feat: make titleText slottable in MultiSelect, ComboBox (#1750)

Closes #1747

COMPONENT_INDEX.md

@@ -684,6 +684,7 @@ export interface ComboBoxItem {
 | Slot name | Default | Props                                               | Fallback                          |
 | :-------- | :------ | :-------------------------------------------------- | :-------------------------------- |
 | --        | Yes     | <code>{ item: ComboBoxItem; index: number } </code> | <code>{itemToString(item)}</code> |
+| titleText | No      | --                                                  | <code>{titleText}</code>          |
 
 ### Events
 
@@ -2389,6 +2390,7 @@ export interface MultiSelectItem {
 | Slot name | Default | Props                                                  | Fallback                          |
 | :-------- | :------ | :----------------------------------------------------- | :-------------------------------- |
 | --        | Yes     | <code>{ item: MultiSelectItem; index: number } </code> | <code>{itemToString(item)}</code> |
+| titleText | No      | --                                                     | <code>{titleText}</code>          |
 
 ### Events
 

docs/src/COMPONENT_API.json

@@ -1743,6 +1743,12 @@
           "default": true,
           "fallback": "{itemToString(item)}",
           "slot_props": "{ item: ComboBoxItem; index: number }"
+        },
+        {
+          "name": "titleText",
+          "default": false,
+          "fallback": "{titleText}",
+          "slot_props": "{}"
         }
       ],
       "events": [
@@ -7354,6 +7360,12 @@
           "default": true,
           "fallback": "{itemToString(item)}",
           "slot_props": "{ item: MultiSelectItem; index: number }"
+        },
+        {
+          "name": "titleText",
+          "default": false,
+          "fallback": "{titleText}",
+          "slot_props": "{}"
         }
       ],
       "events": [

src/ComboBox/ComboBox.svelte

@@ -218,13 +218,15 @@
 />
 
 <div class:bx--list-box__wrapper="{true}">
-  {#if titleText}
+  {#if titleText || $$slots.titleText}
     <label
       for="{id}"
       class:bx--label="{true}"
       class:bx--label--disabled="{disabled}"
     >
+    <slot name="titleText">
       {titleText}
+    </slot>
     </label>
   {/if}
   <ListBox

src/MultiSelect/MultiSelect.svelte

@@ -293,14 +293,16 @@
   class:bx--list-box__wrapper--inline="{inline}"
   class:bx--multi-select__wrapper--inline--invalid="{inline && invalid}"
 >
-  {#if titleText}
+  {#if titleText || $$slots.titleText}
     <label
       for="{id}"
       class:bx--label="{true}"
       class:bx--label--disabled="{disabled}"
       class:bx--visually-hidden="{hideLabel}"
     >
+    <slot name="titleText">
       {titleText}
+    </slot>
     </label>
   {/if}
   <ListBox

types/ComboBox/ComboBox.svelte.d.ts

@@ -169,7 +169,7 @@ export default class ComboBox extends SvelteComponentTyped<
     clear: WindowEventMap["clear"];
     scroll: WindowEventMap["scroll"];
   },
-  { default: { item: ComboBoxItem; index: number } }
+  { default: { item: ComboBoxItem; index: number }; titleText: {} }
 > {
   /**
    * Clear the combo box programmatically

types/MultiSelect/MultiSelect.svelte.d.ts

@@ -253,5 +253,5 @@ export default class MultiSelect extends SvelteComponentTyped<
     focus: WindowEventMap["focus"];
     paste: DocumentAndElementEventHandlersEventMap["paste"];
   },
-  { default: { item: MultiSelectItem; index: number } }
+  { default: { item: MultiSelectItem; index: number }; titleText: {} }
 > {}