Alignment with Carbon version 10.30 (#559)

* feat(toolbar): forward "clear" event in ToolbarSearch

* docs(search): add on:clear example

* fix(ui-shell): set aria-hidden in SideNav

Ref c2b4f1f00

* chore(deps-dev): upgrade carbon-components to v10.30.0

* fix(text-input): use bx--text-input class for TextInputSkeleton

* fix(radio-button): only render span if labelText is truthy

* docs(password-input): add custom tooltip example

* feat(button): add isSelected prop for icon-only, ghost buttons

* feat(radio-button): add legendText prop to RadioButtonGroup

* docs(tag): add filterable (disabled) variant

* feat(tag): add interactive prop

* chore(number-input): deprecate the mobile variant

Mobile variant styles will no longer work.

* feat(button): set aria-pressed attribute if icon-only, ghost button is selected

* fix(multi-select): type dispatched select event

* fix(button): remove redundant "button" role

* feat(icon): deprecate Icon, IconSkeleton

* feat(ui-shell): make SideNavMenuItem text slottable

* fix(list-box): update styles for ListBoxSelection

* fix(list-box): temporarily apply override styles to ListBoxMenuIcon for chevron

* fix(tag): set disabled prop on interactive tag

* docs(button): extract selected, icon-only button example

* feat(tooltip): elevate z-index of tooltip when open

* feat: forward restProps to input element

* fix(types): fix TimePicker test to pass svelte-check

* feat: add ImageLoader component

* test: add ImageLoader

* feat: add LocalStorage component

* test(local-storage): fix invalid file

* chore(docs): use green tag type

src/ListBox/ListBoxMenuIcon.svelte

@@ -30,6 +30,7 @@
   class:bx--list-box__menu-icon--open="{open}"
   {...$$restProps}
   on:click|preventDefault
+  style="top: 0; bottom: 0; margin: auto;"
 >
   <ChevronDown16 aria-label="{description}" title="{description}" />
 </div>

src/ListBox/ListBoxSelection.svelte

@@ -5,7 +5,7 @@
 
   /**
    * Specify the number of selected items
-   * @type {any}
+   * @type {number}
    */
   export let selectionCount = undefined;
 
@@ -46,27 +46,61 @@
     : translateWithId("clearSelection");
 </script>
 
-<div
-  bind:this="{ref}"
-  role="button"
-  aria-label="Clear Selection"
-  tabindex="{disabled ? '-1' : '0'}"
-  title="{description}"
-  class:bx--list-box__selection="{true}"
-  class:bx--tag--filter="{selectionCount}"
-  class:bx--list-box__selection--multi="{selectionCount}"
-  {...$$restProps}
-  on:click|preventDefault|stopPropagation="{(e) => {
-    if (!disabled) {
-      dispatch('clear', e);
-    }
-  }}"
-  on:keydown|stopPropagation="{(e) => {
-    if (!disabled && e.key === 'Enter') {
-      dispatch('clear', e);
-    }
-  }}"
->
-  {#if selectionCount}{selectionCount}{/if}
-  <Close16 />
-</div>
+{#if selectionCount !== undefined}
+  <div
+    class:bx--tag="{true}"
+    class:bx--tag--filter="{true}"
+    class:bx--tag--high-contrast="{true}"
+    class:bx--tag--disabled="{disabled}"
+  >
+    <span class:bx--tag__label="{true}" title="{selectionCount}">
+      {selectionCount}
+    </span>
+    <div
+      bind:this="{ref}"
+      role="button"
+      tabIndex="{disabled ? -1 : 0}"
+      class:bx--tag__close-icon="{true}"
+      on:click|preventDefault|stopPropagation="{(e) => {
+        if (!disabled) {
+          dispatch('clear', e);
+        }
+      }}"
+      on:keydown|stopPropagation="{(e) => {
+        if (!disabled && e.key === 'Enter') {
+          dispatch('clear', e);
+        }
+      }}"
+      disabled="{disabled}"
+      aria-label="{translationIds.clearAll}"
+      title="{description}"
+    >
+      <Close16 />
+    </div>
+  </div>
+{:else}
+  <div
+    bind:this="{ref}"
+    role="button"
+    aria-label="{description}"
+    title="{description}"
+    tabindex="{disabled ? '-1' : '0'}"
+    class:bx--list-box__selection="{true}"
+    class:bx--tag--filter="{selectionCount}"
+    class:bx--list-box__selection--multi="{selectionCount}"
+    {...$$restProps}
+    on:click|preventDefault|stopPropagation="{(e) => {
+      if (!disabled) {
+        dispatch('clear', e);
+      }
+    }}"
+    on:keydown|stopPropagation="{(e) => {
+      if (!disabled && e.key === 'Enter') {
+        dispatch('clear', e);
+      }
+    }}"
+  >
+    {#if selectionCount !== undefined}{selectionCount}{/if}
+    <Close16 />
+  </div>
+{/if}