From a3f577bea3e366335a86bc52859a5adba197ce6a Mon Sep 17 00:00:00 2001
From: Gregor Wassmann <gregor.wassmann@gmail.com>
Date: Tue, 28 Mar 2023 22:27:06 +0200
Subject: [PATCH] chore: v11 Select

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
---
 COMPONENT_INDEX.md                   | 2 +-
 docs/src/COMPONENT_API.json          | 2 +-
 docs/src/pages/components/Select.svx | 4 ++--
 src/Select/Select.svelte             | 6 +++---
 tests/Select.test.svelte             | 2 +-
 types/Select/Select.svelte.d.ts      | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 2f95e0f1..3924be71 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3170,7 +3170,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     |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 2bed366d..39241a60 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -10189,7 +10189,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,
diff --git a/docs/src/pages/components/Select.svx b/docs/src/pages/components/Select.svx
index 3a619e29..bb6ad473 100644
--- a/docs/src/pages/components/Select.svx
+++ b/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" />
diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte
index d1a76f94..f055d329 100644
--- a/src/Select/Select.svelte
+++ b/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
diff --git a/tests/Select.test.svelte b/tests/Select.test.svelte
index cc812777..3a744c9c 100644
--- a/tests/Select.test.svelte
+++ b/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" />
diff --git a/types/Select/Select.svelte.d.ts b/types/Select/Select.svelte.d.ts
index e72c9437..7933ae7d 100644
--- a/types/Select/Select.svelte.d.ts
+++ b/types/Select/Select.svelte.d.ts
@@ -14,7 +14,7 @@ export interface SelectProps extends RestProps {
    * Set the size of the select input
    * @default undefined
    */
-  size?: "sm" | "xl";
+  size?: "sm" | "lg";
 
   /**
    * Set to `true` to use the inline variant