chore: v11 Select

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

Author: gregorw

COMPONENT_INDEX.md

@@ -3152,7 +3152,7 @@ None.
 | :---------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- |
 | ref         | No       | <code>let</code> | Yes      | <code>null &#124; HTMLSelectElement</code> | <code>null</code>                                | Obtain a reference to the select HTML element   |
 | selected    | No       | <code>let</code> | Yes      | <code>string &#124; number</code>          | <code>undefined</code>                           | Specify the selected item value                 |
-| size        | No       | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>              | <code>undefined</code>                           | Set the size of the select input                |
+| size        | No       | <code>let</code> | No       | <code>"sm" &#124; "lg"</code>              | <code>undefined</code>                           | Set the size of the select input                |
 | inline      | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to use the inline variant         |
 | light       | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to enable the light variant       |
 | disabled    | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to disable the select element     |

docs/src/COMPONENT_API.json

@@ -10059,7 +10059,7 @@
           "name": "size",
           "kind": "let",
           "description": "Set the size of the select input",
-          "type": "\"sm\" | \"xl\"",
+          "type": "\"sm\" | \"lg\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,

docs/src/pages/components/Select.svx

@@ -104,9 +104,9 @@ The `selected` prop is reactive and supports two-way binding.
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-## Extra-large size
+## Large size
 
-<Select size="xl" labelText="Carbon theme" selected="g10" >
+<Select size="lg" labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
   <SelectItem value="g80" text="Gray 80" />

src/Select/Select.svelte

@@ -11,7 +11,7 @@
 
   /**
    * Set the size of the select input
-   * @type {"sm" | "xl"}
+   * @type {"sm" | "lg"}
    */
   export let size = undefined;
 
@@ -161,7 +161,7 @@
             name="{name}"
             class:bx--select-input="{true}"
             class:bx--select-input--sm="{size === 'sm'}"
-            class:bx--select-input--xl="{size === 'xl'}"
+            class:bx--select-input--lg="{size === 'lg' || size === 'xl'}"
             on:change="{handleChange}"
             on:change
             on:input
@@ -205,7 +205,7 @@
           aria-invalid="{invalid || undefined}"
           class:bx--select-input="{true}"
           class:bx--select-input--sm="{size === 'sm'}"
-          class:bx--select-input--xl="{size === 'xl'}"
+          class:bx--select-input--lg="{size === 'lg' || size === 'xl'}"
           on:change="{handleChange}"
           on:change
           on:input

tests/Select.test.svelte

@@ -40,7 +40,7 @@
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-<Select size="xl" labelText="Carbon theme" selected="g10">
+<Select size="lg" labelText="Carbon theme" selected="g10">
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
   <SelectItem value="g90" text="Gray 90" />

types/Select/Select.svelte.d.ts

@@ -13,7 +13,7 @@ export interface SelectProps
    * Set the size of the select input
    * @default undefined
    */
-  size?: "sm" | "xl";
+  size?: "sm" | "lg";
 
   /**
    * Set to `true` to use the inline variant