feat(dropdown): add hideLabel prop

COMPONENT_INDEX.md

@@ -988,6 +988,7 @@ export interface DropdownItem {
 | warnText        | <code>let</code> | No       | <code>string</code>                         | <code>""</code>                                       | Specify the warning state text                |
 | helperText      | <code>let</code> | No       | <code>string</code>                         | <code>""</code>                                       | Specify the helper text                       |
 | label           | <code>let</code> | No       | <code>string</code>                         | --                                                    | Specify the list box label                    |
+| hideLabel       | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>                                    | Set to `true` to visually hide the label text |
 | translateWithId | <code>let</code> | No       | <code>(id: any) => string</code>            | --                                                    | Override the default translation ids          |
 | id              | <code>let</code> | No       | <code>string</code>                         | <code>"ccs-" + Math.random().toString(36)</code>      | Set an id for the list box component          |
 | name            | <code>let</code> | No       | <code>string</code>                         | --                                                    | Specify a name attribute for the list box     |

docs/src/COMPONENT_API.json

@@ -3858,6 +3858,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "hideLabel",
+          "kind": "let",
+          "description": "Set to `true` to visually hide the label text",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "translateWithId",
           "kind": "let",

docs/src/pages/components/Dropdown.svx

@@ -13,6 +13,12 @@ components: ["Dropdown", "DropdownSkeleton"]
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
+### Hidden label
+
+<Dropdown hideLabel titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
 ### Format item display text
 
 Use the `itemToString` prop to format the display of individual items.

src/Dropdown/Dropdown.svelte

@@ -69,6 +69,9 @@
    */
   export let label = undefined;
 
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
   /**
    * Override the default translation ids
    * @type {(id: any) => string}
@@ -145,6 +148,7 @@
       for="{id}"
       class:bx--label="{true}"
       class:bx--label--disabled="{disabled}"
+      class:bx--visually-hidden="{hideLabel}"
     >
       {titleText}
     </label>

types/Dropdown/Dropdown.d.ts

@@ -104,6 +104,12 @@ export interface DropdownProps extends svelte.JSX.HTMLAttributes<HTMLElementTagN
    */
   label?: string;
 
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
   /**
    * Override the default translation ids
    */