feat(number-input): add hideSteppers prop

Allows consumers to hide the input stepper buttons.

COMPONENT_INDEX.md

@@ -2472,7 +2472,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
 ### Props
 
 | Prop name       | Kind               | Reactive | Type                                                            | Default value                                                    | Description                                     |
-| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------- |
+| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------- |
 | ref             | <code>let</code>   | Yes      | <code>null &#124; HTMLInputElement</code>                       | <code>null</code>                                                | Obtain a reference to the input HTML element    |
 | value           | <code>let</code>   | Yes      | <code>number &#124; string</code>                               | <code>""</code>                                                  | Specify the input value                         |
 | size            | <code>let</code>   | No       | <code>"sm" &#124; "xl"</code>                                   | --                                                               | Set the size of the input                       |
@@ -2484,6 +2484,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
 | mobile          | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to enable the mobile variant      |
 | allowEmpty      | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to allow for an empty value       |
 | disabled        | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to disable the input              |
+| hideSteppers    | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to hide the input stepper buttons |
 | iconDescription | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the ARIA label for the increment icons  |
 | invalid         | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to indicate an invalid state      |
 | invalidText     | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the invalid state text                  |

docs/src/COMPONENT_API.json

@@ -6134,6 +6134,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "hideSteppers",
+          "kind": "let",
+          "description": "Set to `true` to hide the input stepper buttons",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "iconDescription",
           "kind": "let",

docs/src/pages/components/NumberInput.svx

@@ -23,6 +23,10 @@ components: ["NumberInput", "NumberInputSkeleton"]
 
 <NumberInput hideLabel label="Clusters" />
 
+### Hidden steppers
+
+<NumberInput hideSteppers label="Clusters" />
+
 ### Light variant
 
 <NumberInput light label="Clusters" />

src/NumberInput/NumberInput.svelte

@@ -49,6 +49,9 @@
   /** Set to `true` to disable the input */
   export let disabled = false;
 
+  /** Set to `true` to hide the input stepper buttons */
+  export let hideSteppers = false;
+
   /** Specify the ARIA label for the increment icons */
   export let iconDescription = "";
 
@@ -156,6 +159,7 @@
     class:bx--number--readonly="{readonly}"
     class:bx--number--light="{light}"
     class:bx--number--nolabel="{hideLabel}"
+    class:bx--number--nosteppers="{hideSteppers}"
     class:bx--number--mobile="{mobile}"
     class="{size && `bx--number--${size}`}"
   >
@@ -269,6 +273,7 @@
             class="bx--number__invalid bx--number__invalid--warning"
           />
         {/if}
+        {#if !hideSteppers}
           <div class:bx--number__controls="{true}">
             <button
               type="button"
@@ -301,6 +306,7 @@
             </button>
             <div class:bx--number__rule-divider="{true}"></div>
           </div>
+        {/if}
       </div>
     {/if}
     {#if !error && !warn && helperText}

types/NumberInput/NumberInput.d.ts

@@ -62,6 +62,12 @@ export interface NumberInputProps
    */
   disabled?: boolean;
 
+  /**
+   * Set to `true` to hide the input stepper buttons
+   * @default false
+   */
+  hideSteppers?: boolean;
+
   /**
    * Specify the ARIA label for the increment icons
    * @default ""