fix(list-box): update styles for ListBoxSelection

COMPONENT_INDEX.md

@@ -1958,7 +1958,7 @@ export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
 | Prop name       | Kind               | Reactive | Type                                                                     | Default value                                                            | Description                                      |
 | :-------------- | :----------------- | :------- | :----------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------ |
 | ref             | <code>let</code>   | Yes      | <code>null &#124; HTMLDivElement</code>                                  | <code>null</code>                                                        | Obtain a reference to the top-level HTML element |
-| selectionCount  | <code>let</code>   | No       | <code>any</code>                                                         | --                                                                       | Specify the number of selected items             |
+| selectionCount  | <code>let</code>   | No       | <code>number</code>                                                      | --                                                                       | Specify the number of selected items             |
 | disabled        | <code>let</code>   | No       | <code>boolean</code>                                                     | <code>false</code>                                                       | Set to `true` to disable the list box selection  |
 | translationIds  | <code>const</code> | No       | <code>{ clearAll: "clearAll", clearSelection: "clearSelection", }</code> | <code>{ clearAll: "clearAll", clearSelection: "clearSelection", }</code> | Default translation ids                          |
 | translateWithId | <code>let</code>   | No       | <code>(id: ListBoxSelectionTranslationId) => string</code>               | <code>(id) => defaultTranslations[id]</code>                             | Override the default translation ids             |

docs/src/COMPONENT_API.json

@@ -4595,7 +4595,7 @@
           "name": "selectionCount",
           "kind": "let",
           "description": "Specify the number of selected items",
-          "type": "any",
+          "type": "number",
           "isFunction": false,
           "constant": false,
           "reactive": false

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
+{#if selectionCount !== undefined}
-  bind:this="{ref}"
+  <div
-  role="button"
+    class:bx--tag="{true}"
-  aria-label="Clear Selection"
+    class:bx--tag--filter="{true}"
-  tabindex="{disabled ? '-1' : '0'}"
+    class:bx--tag--high-contrast="{true}"
-  title="{description}"
+    class:bx--tag--disabled="{disabled}"
-  class:bx--list-box__selection="{true}"
+  >
-  class:bx--tag--filter="{selectionCount}"
+    <span class:bx--tag__label="{true}" title="{selectionCount}">
-  class:bx--list-box__selection--multi="{selectionCount}"
+      {selectionCount}
-  {...$$restProps}
+    </span>
-  on:click|preventDefault|stopPropagation="{(e) => {
+    <div
-    if (!disabled) {
+      bind:this="{ref}"
-      dispatch('clear', e);
+      role="button"
-    }
+      tabIndex="{disabled ? -1 : 0}"
-  }}"
+      class:bx--tag__close-icon="{true}"
-  on:keydown|stopPropagation="{(e) => {
+      on:click|preventDefault|stopPropagation="{(e) => {
-    if (!disabled && e.key === 'Enter') {
+        if (!disabled) {
-      dispatch('clear', e);
+          dispatch('clear', e);
-    }
+        }
-  }}"
+      }}"
->
+      on:keydown|stopPropagation="{(e) => {
-  {#if selectionCount}{selectionCount}{/if}
+        if (!disabled && e.key === 'Enter') {
-  <Close16 />
+          dispatch('clear', e);
-</div>
+        }
+      }}"
+      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}

types/ListBox/ListBoxSelection.d.ts

@@ -8,7 +8,7 @@ export interface ListBoxSelectionProps
   /**
    * Specify the number of selected items
    */
-  selectionCount?: any;
+  selectionCount?: number;
 
   /**
    * Set to `true` to disable the list box selection