From 9f32d57353fe885edd33dc4b7c79f93de72f56b5 Mon Sep 17 00:00:00 2001
From: Gregor Wassmann <gregor.wassmann@gmail.com>
Date: Tue, 28 Mar 2023 19:30:16 +0200
Subject: [PATCH] chore: v11 NumberInput

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/NumberInput.svx | 4 ++--
 src/NumberInput/NumberInput.svelte        | 8 +++-----
 types/NumberInput/NumberInput.svelte.d.ts | 2 +-
 5 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index dcb62877..9c2906bf 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2488,7 +2488,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
 | :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- |
 | ref             | No       | <code>let</code>   | Yes      | <code>null &#124; HTMLInputElement</code>                       | <code>null</code>                                                | Obtain a reference to the input HTML element                  |
 | value           | No       | <code>let</code>   | Yes      | <code>null &#124; number</code>                                 | <code>null</code>                                                | Specify the input value.<br />Use `null` to denote "no value" |
-| size            | No       | <code>let</code>   | No       | <code>"sm" &#124; "xl"</code>                                   | <code>undefined</code>                                           | Set the size of the input                                     |
+| size            | No       | <code>let</code>   | No       | <code>"sm" &#124; "lg"</code>                                   | <code>undefined</code>                                           | Set the size of the input                                     |
 | step            | No       | <code>let</code>   | No       | <code>number</code>                                             | <code>1</code>                                                   | Specify the step increment                                    |
 | max             | No       | <code>let</code>   | No       | <code>number</code>                                             | <code>undefined</code>                                           | Specify the maximum value                                     |
 | min             | No       | <code>let</code>   | No       | <code>number</code>                                             | <code>undefined</code>                                           | Specify the minimum value                                     |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 3766ad24..a8b7f796 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -7580,7 +7580,7 @@
           "name": "size",
           "kind": "let",
           "description": "Set the size of the input",
-          "type": "\"sm\" | \"xl\"",
+          "type": "\"sm\" | \"lg\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
diff --git a/docs/src/pages/components/NumberInput.svx b/docs/src/pages/components/NumberInput.svx
index 7c4c7317..e0622d85 100644
--- a/docs/src/pages/components/NumberInput.svx
+++ b/docs/src/pages/components/NumberInput.svx
@@ -51,9 +51,9 @@ Set `value` to `null` to denote "no value."
 
 <NumberInput readonly label="Clusters" value={0} />
 
-## Extra-large size
+## Large size
 
-<NumberInput size="xl" label="Clusters" value={0} />
+<NumberInput size="lg" label="Clusters" value={0} />
 
 ## Small size
 
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index 59009775..ff226977 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -7,7 +7,7 @@
 
   /**
    * Set the size of the input
-   * @type {"sm" | "xl"}
+   * @type {"sm" | "lg"}
    */
   export let size = undefined;
 
@@ -171,7 +171,7 @@
     class:bx--number--nolabel="{hideLabel}"
     class:bx--number--nosteppers="{hideSteppers}"
     class:bx--number--sm="{size === 'sm'}"
-    class:bx--number--xl="{size === 'xl'}"
+    class:bx--number--lg="{size === 'lg' || size === 'xl'}"
   >
     {#if $$slots.label || label}
       <label
@@ -212,9 +212,7 @@
         on:blur
         on:paste
       />
-      {#if readonly}
-        <EditOff class="bx--text-input__readonly-icon" />
-      {:else}
+      {#if !readonly}
         {#if invalid}
           <WarningFilled class="bx--number__invalid" />
         {/if}
diff --git a/types/NumberInput/NumberInput.svelte.d.ts b/types/NumberInput/NumberInput.svelte.d.ts
index 4d3200a1..21516316 100644
--- a/types/NumberInput/NumberInput.svelte.d.ts
+++ b/types/NumberInput/NumberInput.svelte.d.ts
@@ -10,7 +10,7 @@ export interface NumberInputProps extends RestProps {
    * Set the size of the input
    * @default undefined
    */
-  size?: "sm" | "xl";
+  size?: "sm" | "lg";
 
   /**
    * Specify the input value.