@spectrum-web-components/number-field 0.3.0 → 0.3.3

package/README.md

@@ -124,7 +124,7 @@ While `Intl.NumberFormatOptions` does support a [wide range of units](https://tc
     value="500"
     format-options='{
         "style": "unit",
-        "unit": "px",
+        "unit": "px"
     }'
 ></sp-number-field>
 ```

package/custom-elements.json

@@ -37,10 +37,28 @@
           },
           "default": "'-'"
         },
+        {
+          "kind": "variable",
+          "name": "remapMultiByteCharacters",
+          "type": {
+            "text": "Record<string, string>"
+          },
+          "default": "{\n    '１': '1',\n    '２': '2',\n    '３': '3',\n    '４': '4',\n    '５': '5',\n    '６': '6',\n    '７': '7',\n    '８': '8',\n    '９': '9',\n    '０': '0',\n    '、': ',',\n    '，': ',',\n    '。': '.',\n    '．': '.',\n    '％': '%',\n    '＋': '+',\n    ー: '-',\n}"
+        },
         {
           "kind": "class",
           "description": "",
           "name": "NumberField",
+          "slots": [
+            {
+              "description": "default or non-negative help text to associate to your form element",
+              "name": "help-text"
+            },
+            {
+              "description": "negative help text to associate to your form element when `invalid`",
+              "name": "negative-help-text"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -77,7 +95,7 @@
               },
               "privacy": "public",
               "default": "{}",
-              "description": "An `<sp-number-field>` element will process its numeric value with\n`new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.valueAsNumber)`\nin order to prepare it for visual delivery in the input. In order to customize this\nprocessing supply your own `Intl.NumberFormatOptions` object here.\n\nSee: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat",
+              "description": "An `&lt;sp-number-field&gt;` element will process its numeric value with\n`new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.valueAsNumber)`\nin order to prepare it for visual delivery in the input. In order to customize this\nprocessing supply your own `Intl.NumberFormatOptions` object here.\n\nSee: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat",
               "attribute": "format-options"
             },
             {
@@ -536,7 +554,7 @@
             },
             {
               "kind": "method",
-              "name": "onChange",
+              "name": "handleChange",
               "privacy": "protected",
               "return": {
                 "type": {
@@ -546,7 +564,7 @@
             },
             {
               "kind": "method",
-              "name": "onInput",
+              "name": "handleInput",
               "privacy": "protected",
               "return": {
                 "type": {
@@ -638,6 +656,16 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "renderField",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "resolveLanguage",
@@ -678,7 +706,7 @@
                 "text": "Intl.NumberFormatOptions"
               },
               "default": "{}",
-              "description": "An `<sp-number-field>` element will process its numeric value with\n`new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.valueAsNumber)`\nin order to prepare it for visual delivery in the input. In order to customize this\nprocessing supply your own `Intl.NumberFormatOptions` object here.\n\nSee: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat",
+              "description": "An `&lt;sp-number-field&gt;` element will process its numeric value with\n`new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.valueAsNumber)`\nin order to prepare it for visual delivery in the input. In order to customize this\nprocessing supply your own `Intl.NumberFormatOptions` object here.\n\nSee: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat",
               "fieldName": "formatOptions"
             },
             {
@@ -769,6 +797,14 @@
             "module": "src/NumberField.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "remapMultiByteCharacters",
+          "declaration": {
+            "name": "remapMultiByteCharacters",
+            "module": "src/NumberField.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "NumberField",
@@ -801,7 +837,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n:host{--spectrum-stepper-width:var(\n--spectrum-global-dimension-size-900\n);--spectrum-stepper-border-size:var(\n--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-stepper-button-height:calc(var(\n--spectrum-alias-single-line-height,\nvar(--spectrum-global-dimension-size-400)\n)/2);--spectrum-stepper-button-width:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-stepper-border-size));--spectrum-stepper-button-padding:calc(var(--spectrum-global-dimension-size-150)/2);--spectrum-stepper-border-radius-reset:0;--spectrum-stepper-border-size-reset:0;--spectrum-stepper-icon-nudge-top:var(--spectrum-global-dimension-size-10);--spectrum-stepper-icon-nudge:var(--spectrum-global-dimension-size-25);--spectrum-stepper-quiet-width:var(--spectrum-global-dimension-size-600);--spectrum-stepper-button-offset:calc(var(--spectrum-stepper-button-width)/2 - var(--spectrum-alias-ui-icon-chevron-size-75)/2);--spectrum-stepper-quiet-button-width:calc(var(--spectrum-stepper-button-width) - var(--spectrum-stepper-button-offset))}:host{border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);display:inline-flex;flex-direction:row;flex-wrap:nowrap;line-height:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-stepper-width)}:host:before{content:\"\"}:host([dir=ltr]) .buttons{border-top-left-radius:0}:host([dir=rtl]) .buttons{border-top-right-radius:0}:host([dir=ltr]) .buttons{border-top-right-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=rtl]) .buttons{border-top-left-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr]) .buttons{border-bottom-right-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=rtl]) .buttons{border-bottom-left-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr]) .buttons{border-bottom-left-radius:0}:host([dir=rtl]) .buttons{border-bottom-right-radius:0}.buttons{display:block;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-left:var(\n--spectrum-stepper-button-padding\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-right:var(\n--spectrum-stepper-button-padding\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-right:var(\n--spectrum-stepper-button-padding\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-left:var(\n--spectrum-stepper-button-padding\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-left-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-right-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepDown,.stepUp{border-width:var(--spectrum-stepper-border-size);box-sizing:border-box;display:flex;height:var(--spectrum-stepper-button-height);margin:0!important;min-width:0;position:relative;width:var(--spectrum-stepper-button-width)}.stepDown .icon,.stepUp .icon{margin:0!important;opacity:1}:host([dir=ltr]) .stepUp{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepUp{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepUp{border-bottom:none;padding-top:var(--spectrum-stepper-icon-nudge-top)}:host([dir=ltr]) .stepDown{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepDown{padding-bottom:var(\n--spectrum-stepper-icon-nudge\n)}.textfield{flex:1;width:auto}:host([dir=ltr]) .input{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .input{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr]) .input{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .input{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.input,.textfield{min-width:0}:host([quiet]){border-radius:var(\n--spectrum-stepper-border-radius-reset\n);width:var(--spectrum-stepper-quiet-width)}:host([quiet]) .buttons{border-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-right-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-left-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-left:none}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-right:none}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{padding-right:0}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{padding-left:0}:host([quiet]) .stepDown,:host([quiet]) .stepUp{border-radius:var(--spectrum-stepper-border-radius-reset);border-top:none;justify-content:flex-end;min-width:0;width:var(\n--spectrum-stepper-quiet-button-width\n)}:host([dir=ltr][quiet]) .stepDown:after,:host([dir=ltr][quiet]) .stepUp:after{right:calc(var(--spectrum-stepper-button-offset)*-1)}:host([dir=rtl][quiet]) .stepDown:after,:host([dir=rtl][quiet]) .stepUp:after{left:calc(var(--spectrum-stepper-button-offset)*-1)}:host([quiet]) .stepDown:after,:host([quiet]) .stepUp:after{content:\"\";height:100%;position:absolute;width:var(--spectrum-stepper-button-offset)}:host(:hover:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) .input,:host(:hover:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) .stepDown,:host(:hover:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-hover,var(--spectrum-alias-input-border-color-hover)\n)}:host([focused]){border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n)}:host([focused]) .stepDown,:host([focused]) .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n)}:host([focused]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n);box-shadow:none}:host([focused][invalid]){border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid]) .stepDown,:host([focused][invalid]) .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([keyboard-focused]){box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused]) .buttons,:host([keyboard-focused]) .input{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused]) .input,:host([keyboard-focused]) .stepDown,:host([keyboard-focused]) .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused][invalid]){box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([keyboard-focused][invalid]) .stepDown,:host([keyboard-focused][invalid]) .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([keyboard-focused][invalid]) .buttons{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([invalid]) .stepDown,:host([invalid]) .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([invalid]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([invalid][keyboard-focused]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([invalid][keyboard-focused]) .buttons{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([disabled]) .stepDown,:host([disabled]) .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)\n)}.stepDown,.stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n)}.stepDown:disabled,.stepUp:disabled{border-color:var(\n--spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)\n)}:host([quiet][disabled]) .stepDown,:host([quiet][disabled]) .stepUp{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)\n)}:host([quiet]) .stepDown,:host([quiet]) .stepUp{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n)}:host([quiet]) .stepDown:disabled,:host([quiet]) .stepUp:disabled{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)\n)}:host([quiet]) .input{box-shadow:none}:host([quiet][invalid]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][invalid]) .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused]),:host([quiet][keyboard-focused]){box-shadow:none}:host([quiet][focused]) .buttons,:host([quiet][focused]) .input,:host([quiet][keyboard-focused]) .buttons,:host([quiet][keyboard-focused]) .input{box-shadow:0 1px 0 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([quiet][focused]) .stepDown,:host([quiet][keyboard-focused]) .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([quiet][focused][invalid]),:host([quiet][keyboard-focused][invalid]){box-shadow:none}:host([quiet][focused][invalid]) .buttons,:host([quiet][focused][invalid]) .input,:host([quiet][keyboard-focused][invalid]) .buttons,:host([quiet][keyboard-focused][invalid]) .input{box-shadow:0 1px 0 0 var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused][invalid]) .input,:host([quiet][keyboard-focused][invalid]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused][invalid]) .stepDown,:host([quiet][keyboard-focused][invalid]) .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}sp-field-button{--spectrum-dropdown-height:100%;--spectrum-dropdown-padding-x:0}.input{font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums}:host([readonly]) .buttons{pointer-events:none}:host([hide-stepper]) .input{border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr][invalid]:not([hide-stepper])) .icon{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl][invalid]:not([hide-stepper])) .icon{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][valid]:not([hide-stepper])) .icon{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl][valid]:not([hide-stepper])) .icon{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][quiet][invalid]:not([hide-stepper])) .icon{right:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet][invalid]:not([hide-stepper])) .icon{left:var(--spectrum-stepper-button-width)}:host([dir=ltr][quiet][valid]:not([hide-stepper])) .icon{right:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet][valid]:not([hide-stepper])) .icon{left:var(--spectrum-stepper-button-width)}:host([dir=ltr]:not([hide-stepper])) .icon-workflow{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl]:not([hide-stepper])) .icon-workflow{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][quiet]:not([hide-stepper])) .icon-workflow{left:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet]:not([hide-stepper])) .icon-workflow{right:var(--spectrum-stepper-button-width)}\n`"
+          "default": "css`\n:host{--spectrum-stepper-width:var(\n--spectrum-global-dimension-size-900\n);--spectrum-stepper-border-size:var(\n--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-stepper-button-height:calc(var(\n--spectrum-alias-single-line-height,\nvar(--spectrum-global-dimension-size-400)\n)/2);--spectrum-stepper-button-width:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-stepper-border-size));--spectrum-stepper-button-padding:calc(var(--spectrum-global-dimension-size-150)/2);--spectrum-stepper-border-radius-reset:0;--spectrum-stepper-border-size-reset:0;--spectrum-stepper-icon-nudge-top:var(--spectrum-global-dimension-size-10);--spectrum-stepper-icon-nudge:var(--spectrum-global-dimension-size-25);--spectrum-stepper-quiet-width:var(--spectrum-global-dimension-size-600);--spectrum-stepper-button-offset:calc(var(--spectrum-stepper-button-width)/2 - var(--spectrum-alias-ui-icon-chevron-size-75)/2);--spectrum-stepper-quiet-button-width:calc(var(--spectrum-stepper-button-width) - var(--spectrum-stepper-button-offset))}#textfield{border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);display:inline-flex;flex-direction:row;flex-wrap:nowrap;line-height:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-stepper-width)}#textfield:before{content:\"\"}:host([dir=ltr]) .buttons{border-top-left-radius:0}:host([dir=rtl]) .buttons{border-top-right-radius:0}:host([dir=ltr]) .buttons{border-top-right-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=rtl]) .buttons{border-top-left-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr]) .buttons{border-bottom-right-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=rtl]) .buttons{border-bottom-left-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr]) .buttons{border-bottom-left-radius:0}:host([dir=rtl]) .buttons{border-bottom-right-radius:0}.buttons{display:block;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-left:var(\n--spectrum-stepper-button-padding\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-right:var(\n--spectrum-stepper-button-padding\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-right:var(\n--spectrum-stepper-button-padding\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-left:var(\n--spectrum-stepper-button-padding\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-left-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-right-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepDown,.stepUp{border-width:var(--spectrum-stepper-border-size);box-sizing:border-box;display:flex;height:var(--spectrum-stepper-button-height);margin:0!important;min-width:0;position:relative;width:var(--spectrum-stepper-button-width)}.stepDown .stepper-icon,.stepUp .stepper-icon{margin:0!important;opacity:1}:host([dir=ltr]) .stepUp{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepUp{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepUp{border-bottom:none;padding-top:var(--spectrum-stepper-icon-nudge-top)}:host([dir=ltr]) .stepDown{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepDown{padding-bottom:var(\n--spectrum-stepper-icon-nudge\n)}.textfield{flex:1;width:auto}:host([dir=ltr]) .input{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .input{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr]) .input{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .input{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.input,.textfield{min-width:0}:host([quiet]) #textfield{border-radius:var(\n--spectrum-stepper-border-radius-reset\n);width:var(--spectrum-stepper-quiet-width)}:host([quiet]) .buttons{border-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-right-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-left-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-left:none}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-right:none}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{padding-right:0}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{padding-left:0}:host([quiet]) .stepDown,:host([quiet]) .stepUp{border-radius:var(--spectrum-stepper-border-radius-reset);border-top:none;justify-content:flex-end;min-width:0;width:var(\n--spectrum-stepper-quiet-button-width\n)}:host([dir=ltr][quiet]) .stepDown:after,:host([dir=ltr][quiet]) .stepUp:after{right:calc(var(--spectrum-stepper-button-offset)*-1)}:host([dir=rtl][quiet]) .stepDown:after,:host([dir=rtl][quiet]) .stepUp:after{left:calc(var(--spectrum-stepper-button-offset)*-1)}:host([quiet]) .stepDown:after,:host([quiet]) .stepUp:after{content:\"\";height:100%;position:absolute;width:var(--spectrum-stepper-button-offset)}:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .input,:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .stepDown,:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-hover,var(--spectrum-alias-input-border-color-hover)\n)}:host([focused]) #textfield{border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n)}:host([focused]) #textfield .stepDown,:host([focused]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n)}:host([focused]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n);box-shadow:none}:host([focused][invalid]) #textfield{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid]) #textfield .stepDown,:host([focused][invalid]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([keyboard-focused]) #textfield{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused][invalid]) #textfield{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([keyboard-focused][invalid]) #textfield .buttons{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([invalid]) #textfield .stepDown,:host([invalid]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([invalid][keyboard-focused]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([invalid][keyboard-focused]) #textfield .buttons{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([disabled]) #textfield .stepDown,:host([disabled]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)\n)}.stepDown,.stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n)}.stepDown:disabled,.stepUp:disabled{border-color:var(\n--spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)\n)}:host([quiet][disabled]) #textfield .stepDown,:host([quiet][disabled]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)\n)}:host([quiet]) .stepDown,:host([quiet]) .stepUp{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n)}:host([quiet]) .stepDown:disabled,:host([quiet]) .stepUp:disabled{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)\n)}:host([quiet]) .input{box-shadow:none}:host([quiet][invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][invalid]) #textfield .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused]) #textfield,:host([quiet][keyboard-focused]) #textfield{box-shadow:none}:host([quiet][focused]) #textfield .buttons,:host([quiet][focused]) #textfield .input,:host([quiet][keyboard-focused]) #textfield .buttons,:host([quiet][keyboard-focused]) #textfield .input{box-shadow:0 1px 0 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([quiet][focused]) #textfield .stepDown,:host([quiet][keyboard-focused]) #textfield .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([quiet][focused][invalid]) #textfield,:host([quiet][keyboard-focused][invalid]) #textfield{box-shadow:none}:host([quiet][focused][invalid]) #textfield .buttons,:host([quiet][focused][invalid]) #textfield .input,:host([quiet][keyboard-focused][invalid]) #textfield .buttons,:host([quiet][keyboard-focused][invalid]) #textfield .input{box-shadow:0 1px 0 0 var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused][invalid]) #textfield .input,:host([quiet][keyboard-focused][invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused][invalid]) #textfield .stepDown,:host([quiet][keyboard-focused][invalid]) #textfield .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host{width:var(--spectrum-stepper-width)}#textfield{width:100%}sp-field-button{--spectrum-dropdown-height:100%;--spectrum-dropdown-padding-x:0}.input{font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums}:host([readonly]) .buttons{pointer-events:none}:host([hide-stepper]:not([quiet])) .input{border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr][invalid]:not([hide-stepper])) .icon{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl][invalid]:not([hide-stepper])) .icon{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][valid]:not([hide-stepper])) .icon{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl][valid]:not([hide-stepper])) .icon{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][quiet][invalid]:not([hide-stepper])) .icon{right:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet][invalid]:not([hide-stepper])) .icon{left:var(--spectrum-stepper-button-width)}:host([dir=ltr][quiet][valid]:not([hide-stepper])) .icon{right:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet][valid]:not([hide-stepper])) .icon{left:var(--spectrum-stepper-button-width)}:host([dir=ltr]:not([hide-stepper])) .icon-workflow{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl]:not([hide-stepper])) .icon-workflow{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][quiet]:not([hide-stepper])) .icon-workflow{left:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet]:not([hide-stepper])) .icon-workflow{right:var(--spectrum-stepper-button-width)}\n`"
         }
       ],
       "exports": [
@@ -822,7 +858,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n:host{--spectrum-stepper-width:var(\n--spectrum-global-dimension-size-900\n);--spectrum-stepper-border-size:var(\n--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-stepper-button-height:calc(var(\n--spectrum-alias-single-line-height,\nvar(--spectrum-global-dimension-size-400)\n)/2);--spectrum-stepper-button-width:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-stepper-border-size));--spectrum-stepper-button-padding:calc(var(--spectrum-global-dimension-size-150)/2);--spectrum-stepper-border-radius-reset:0;--spectrum-stepper-border-size-reset:0;--spectrum-stepper-icon-nudge-top:var(--spectrum-global-dimension-size-10);--spectrum-stepper-icon-nudge:var(--spectrum-global-dimension-size-25);--spectrum-stepper-quiet-width:var(--spectrum-global-dimension-size-600);--spectrum-stepper-button-offset:calc(var(--spectrum-stepper-button-width)/2 - var(--spectrum-alias-ui-icon-chevron-size-75)/2);--spectrum-stepper-quiet-button-width:calc(var(--spectrum-stepper-button-width) - var(--spectrum-stepper-button-offset))}:host{border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);display:inline-flex;flex-direction:row;flex-wrap:nowrap;line-height:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-stepper-width)}:host:before{content:\"\"}:host([dir=ltr]) .buttons{border-top-left-radius:0}:host([dir=rtl]) .buttons{border-top-right-radius:0}:host([dir=ltr]) .buttons{border-top-right-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=rtl]) .buttons{border-top-left-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr]) .buttons{border-bottom-right-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=rtl]) .buttons{border-bottom-left-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr]) .buttons{border-bottom-left-radius:0}:host([dir=rtl]) .buttons{border-bottom-right-radius:0}.buttons{display:block;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-left:var(\n--spectrum-stepper-button-padding\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-right:var(\n--spectrum-stepper-button-padding\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-right:var(\n--spectrum-stepper-button-padding\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-left:var(\n--spectrum-stepper-button-padding\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-left-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-right-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepDown,.stepUp{border-width:var(--spectrum-stepper-border-size);box-sizing:border-box;display:flex;height:var(--spectrum-stepper-button-height);margin:0!important;min-width:0;position:relative;width:var(--spectrum-stepper-button-width)}.stepDown .icon,.stepUp .icon{margin:0!important;opacity:1}:host([dir=ltr]) .stepUp{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepUp{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepUp{border-bottom:none;padding-top:var(--spectrum-stepper-icon-nudge-top)}:host([dir=ltr]) .stepDown{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepDown{padding-bottom:var(\n--spectrum-stepper-icon-nudge\n)}.textfield{flex:1;width:auto}:host([dir=ltr]) .input{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .input{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr]) .input{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .input{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.input,.textfield{min-width:0}:host([quiet]){border-radius:var(\n--spectrum-stepper-border-radius-reset\n);width:var(--spectrum-stepper-quiet-width)}:host([quiet]) .buttons{border-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-right-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-left-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-left:none}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-right:none}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{padding-right:0}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{padding-left:0}:host([quiet]) .stepDown,:host([quiet]) .stepUp{border-radius:var(--spectrum-stepper-border-radius-reset);border-top:none;justify-content:flex-end;min-width:0;width:var(\n--spectrum-stepper-quiet-button-width\n)}:host([dir=ltr][quiet]) .stepDown:after,:host([dir=ltr][quiet]) .stepUp:after{right:calc(var(--spectrum-stepper-button-offset)*-1)}:host([dir=rtl][quiet]) .stepDown:after,:host([dir=rtl][quiet]) .stepUp:after{left:calc(var(--spectrum-stepper-button-offset)*-1)}:host([quiet]) .stepDown:after,:host([quiet]) .stepUp:after{content:\"\";height:100%;position:absolute;width:var(--spectrum-stepper-button-offset)}:host(:hover:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) .input,:host(:hover:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) .stepDown,:host(:hover:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-hover,var(--spectrum-alias-input-border-color-hover)\n)}:host([focused]){border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n)}:host([focused]) .stepDown,:host([focused]) .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n)}:host([focused]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n);box-shadow:none}:host([focused][invalid]){border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid]) .stepDown,:host([focused][invalid]) .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([keyboard-focused]){box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused]) .buttons,:host([keyboard-focused]) .input{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused]) .input,:host([keyboard-focused]) .stepDown,:host([keyboard-focused]) .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused][invalid]){box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([keyboard-focused][invalid]) .stepDown,:host([keyboard-focused][invalid]) .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([keyboard-focused][invalid]) .buttons{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([invalid]) .stepDown,:host([invalid]) .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([invalid]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([invalid][keyboard-focused]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([invalid][keyboard-focused]) .buttons{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([disabled]) .stepDown,:host([disabled]) .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)\n)}.stepDown,.stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n)}.stepDown:disabled,.stepUp:disabled{border-color:var(\n--spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)\n)}:host([quiet][disabled]) .stepDown,:host([quiet][disabled]) .stepUp{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)\n)}:host([quiet]) .stepDown,:host([quiet]) .stepUp{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n)}:host([quiet]) .stepDown:disabled,:host([quiet]) .stepUp:disabled{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)\n)}:host([quiet]) .input{box-shadow:none}:host([quiet][invalid]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][invalid]) .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused]),:host([quiet][keyboard-focused]){box-shadow:none}:host([quiet][focused]) .buttons,:host([quiet][focused]) .input,:host([quiet][keyboard-focused]) .buttons,:host([quiet][keyboard-focused]) .input{box-shadow:0 1px 0 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([quiet][focused]) .stepDown,:host([quiet][keyboard-focused]) .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([quiet][focused][invalid]),:host([quiet][keyboard-focused][invalid]){box-shadow:none}:host([quiet][focused][invalid]) .buttons,:host([quiet][focused][invalid]) .input,:host([quiet][keyboard-focused][invalid]) .buttons,:host([quiet][keyboard-focused][invalid]) .input{box-shadow:0 1px 0 0 var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused][invalid]) .input,:host([quiet][keyboard-focused][invalid]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused][invalid]) .stepDown,:host([quiet][keyboard-focused][invalid]) .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}\n`"
+          "default": "css`\n:host{--spectrum-stepper-width:var(\n--spectrum-global-dimension-size-900\n);--spectrum-stepper-border-size:var(\n--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-stepper-button-height:calc(var(\n--spectrum-alias-single-line-height,\nvar(--spectrum-global-dimension-size-400)\n)/2);--spectrum-stepper-button-width:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-stepper-border-size));--spectrum-stepper-button-padding:calc(var(--spectrum-global-dimension-size-150)/2);--spectrum-stepper-border-radius-reset:0;--spectrum-stepper-border-size-reset:0;--spectrum-stepper-icon-nudge-top:var(--spectrum-global-dimension-size-10);--spectrum-stepper-icon-nudge:var(--spectrum-global-dimension-size-25);--spectrum-stepper-quiet-width:var(--spectrum-global-dimension-size-600);--spectrum-stepper-button-offset:calc(var(--spectrum-stepper-button-width)/2 - var(--spectrum-alias-ui-icon-chevron-size-75)/2);--spectrum-stepper-quiet-button-width:calc(var(--spectrum-stepper-button-width) - var(--spectrum-stepper-button-offset))}#textfield{border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);display:inline-flex;flex-direction:row;flex-wrap:nowrap;line-height:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-stepper-width)}#textfield:before{content:\"\"}:host([dir=ltr]) .buttons{border-top-left-radius:0}:host([dir=rtl]) .buttons{border-top-right-radius:0}:host([dir=ltr]) .buttons{border-top-right-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=rtl]) .buttons{border-top-left-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr]) .buttons{border-bottom-right-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=rtl]) .buttons{border-bottom-left-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr]) .buttons{border-bottom-left-radius:0}:host([dir=rtl]) .buttons{border-bottom-right-radius:0}.buttons{display:block;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-left:var(\n--spectrum-stepper-button-padding\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-right:var(\n--spectrum-stepper-button-padding\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-right:var(\n--spectrum-stepper-button-padding\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-left:var(\n--spectrum-stepper-button-padding\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-left-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-right-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepDown,.stepUp{border-width:var(--spectrum-stepper-border-size);box-sizing:border-box;display:flex;height:var(--spectrum-stepper-button-height);margin:0!important;min-width:0;position:relative;width:var(--spectrum-stepper-button-width)}.stepDown .stepper-icon,.stepUp .stepper-icon{margin:0!important;opacity:1}:host([dir=ltr]) .stepUp{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepUp{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepUp{border-bottom:none;padding-top:var(--spectrum-stepper-icon-nudge-top)}:host([dir=ltr]) .stepDown{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepDown{padding-bottom:var(\n--spectrum-stepper-icon-nudge\n)}.textfield{flex:1;width:auto}:host([dir=ltr]) .input{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .input{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr]) .input{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .input{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.input,.textfield{min-width:0}:host([quiet]) #textfield{border-radius:var(\n--spectrum-stepper-border-radius-reset\n);width:var(--spectrum-stepper-quiet-width)}:host([quiet]) .buttons{border-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-right-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-left-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-left:none}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-right:none}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{padding-right:0}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{padding-left:0}:host([quiet]) .stepDown,:host([quiet]) .stepUp{border-radius:var(--spectrum-stepper-border-radius-reset);border-top:none;justify-content:flex-end;min-width:0;width:var(\n--spectrum-stepper-quiet-button-width\n)}:host([dir=ltr][quiet]) .stepDown:after,:host([dir=ltr][quiet]) .stepUp:after{right:calc(var(--spectrum-stepper-button-offset)*-1)}:host([dir=rtl][quiet]) .stepDown:after,:host([dir=rtl][quiet]) .stepUp:after{left:calc(var(--spectrum-stepper-button-offset)*-1)}:host([quiet]) .stepDown:after,:host([quiet]) .stepUp:after{content:\"\";height:100%;position:absolute;width:var(--spectrum-stepper-button-offset)}:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .input,:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .stepDown,:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-hover,var(--spectrum-alias-input-border-color-hover)\n)}:host([focused]) #textfield{border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n)}:host([focused]) #textfield .stepDown,:host([focused]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n)}:host([focused]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n);box-shadow:none}:host([focused][invalid]) #textfield{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid]) #textfield .stepDown,:host([focused][invalid]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([keyboard-focused]) #textfield{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused][invalid]) #textfield{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([keyboard-focused][invalid]) #textfield .buttons{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([invalid]) #textfield .stepDown,:host([invalid]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([invalid][keyboard-focused]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([invalid][keyboard-focused]) #textfield .buttons{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([disabled]) #textfield .stepDown,:host([disabled]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)\n)}.stepDown,.stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n)}.stepDown:disabled,.stepUp:disabled{border-color:var(\n--spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)\n)}:host([quiet][disabled]) #textfield .stepDown,:host([quiet][disabled]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)\n)}:host([quiet]) .stepDown,:host([quiet]) .stepUp{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n)}:host([quiet]) .stepDown:disabled,:host([quiet]) .stepUp:disabled{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)\n)}:host([quiet]) .input{box-shadow:none}:host([quiet][invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][invalid]) #textfield .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused]) #textfield,:host([quiet][keyboard-focused]) #textfield{box-shadow:none}:host([quiet][focused]) #textfield .buttons,:host([quiet][focused]) #textfield .input,:host([quiet][keyboard-focused]) #textfield .buttons,:host([quiet][keyboard-focused]) #textfield .input{box-shadow:0 1px 0 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([quiet][focused]) #textfield .stepDown,:host([quiet][keyboard-focused]) #textfield .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([quiet][focused][invalid]) #textfield,:host([quiet][keyboard-focused][invalid]) #textfield{box-shadow:none}:host([quiet][focused][invalid]) #textfield .buttons,:host([quiet][focused][invalid]) #textfield .input,:host([quiet][keyboard-focused][invalid]) #textfield .buttons,:host([quiet][keyboard-focused][invalid]) #textfield .input{box-shadow:0 1px 0 0 var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused][invalid]) #textfield .input,:host([quiet][keyboard-focused][invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused][invalid]) #textfield .stepDown,:host([quiet][keyboard-focused][invalid]) #textfield .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}\n`"
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/number-field",
-    "version": "0.3.0",
+    "version": "0.3.3",
     "publishConfig": {
         "access": "public"
     },
@@ -45,21 +45,22 @@
     ],
     "dependencies": {
         "@internationalized/number": "^3.0.2",
-        "@spectrum-web-components/action-button": "^0.7.0",
-        "@spectrum-web-components/base": "^0.5.0",
-        "@spectrum-web-components/icon": "^0.11.0",
-        "@spectrum-web-components/icons-ui": "^0.8.0",
-        "@spectrum-web-components/textfield": "^0.10.0",
+        "@spectrum-web-components/action-button": "^0.7.3",
+        "@spectrum-web-components/base": "^0.5.1",
+        "@spectrum-web-components/icon": "^0.11.2",
+        "@spectrum-web-components/icons-ui": "^0.8.2",
+        "@spectrum-web-components/shared": "^0.13.3",
+        "@spectrum-web-components/textfield": "^0.11.0",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
         "@formatjs/intl-numberformat": "7.1.4",
-        "@spectrum-css/stepper": "^3.0.5"
+        "@spectrum-css/stepper": "^3.0.13"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
     "sideEffects": [
         "./sp-*.js"
     ],
-    "gitHead": "7ce77352f6894043bceac9ef92b21e5f85420969"
+    "gitHead": "279380c6d72c0819fe224b405844af9ddcb87f8a"
 }

package/src/NumberField.d.ts

@@ -5,8 +5,11 @@ import '@spectrum-web-components/action-button/sp-action-button.js';
 import { TextfieldBase } from '@spectrum-web-components/textfield';
 export declare const FRAMES_PER_CHANGE = 5;
 export declare const indeterminatePlaceholder = "-";
+export declare const remapMultiByteCharacters: Record<string, string>;
 /**
  * @element sp-number-field
+ * @slot help-text - default or non-negative help text to associate to your form element
+ * @slot negative-help-text - negative help text to associate to your form element when `invalid`
  */
 export declare class NumberField extends TextfieldBase {
     static get styles(): CSSResultArray;
@@ -14,7 +17,7 @@ export declare class NumberField extends TextfieldBase {
     focused: boolean;
     _forcedUnit: string;
     /**
-     * An `<sp-number-field>` element will process its numeric value with
+     * An `&lt;sp-number-field&gt;` element will process its numeric value with
      * `new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.valueAsNumber)`
      * in order to prepare it for visual delivery in the input. In order to customize this
      * processing supply your own `Intl.NumberFormatOptions` object here.
@@ -75,8 +78,8 @@ export declare class NumberField extends TextfieldBase {
     private handleFocusout;
     private wasIndeterminate;
     private indeterminateValue?;
-    protected onChange(): void;
-    protected onInput(): void;
+    protected handleChange(): void;
+    protected handleInput(): void;
     private validateInput;
     protected get displayValue(): string;
     protected clearNumberFormatterCache(): void;
@@ -86,7 +89,7 @@ export declare class NumberField extends TextfieldBase {
     protected get numberParser(): NumberParser;
     private _numberParser?;
     private _numberParserFocused?;
-    protected render(): TemplateResult;
+    protected renderField(): TemplateResult;
     protected update(changes: PropertyValues): void;
     protected firstUpdated(changes: PropertyValues): void;
     protected updated(changes: PropertyValues<this>): void;

package/src/NumberField.js

@@ -16,31 +16,35 @@ import { streamingListener } from '@spectrum-web-components/base/src/streaming-l
 import { NumberFormatter, NumberParser } from '@internationalized/number';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js';
 import '@spectrum-web-components/action-button/sp-action-button.js';
+import { isAndroid, isIPhone, } from '@spectrum-web-components/shared/src/platform.js';
 import { TextfieldBase } from '@spectrum-web-components/textfield';
 import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 import styles from './number-field.css.js';
-function testPlatform(re) {
-    return typeof window !== 'undefined' && window.navigator != null
-        ? re.test(window.navigator.platform)
-        : /* c8 ignore next */
-            false;
-}
-function testUserAgent(re) {
-    return typeof window !== 'undefined' && window.navigator != null
-        ? re.test(window.navigator.userAgent)
-        : /* c8 ignore next */
-            false;
-}
-function isIPhone() {
-    return testPlatform(/^iPhone/);
-}
-function isAndroid() {
-    return testUserAgent(/Android/);
-}
 export const FRAMES_PER_CHANGE = 5;
 export const indeterminatePlaceholder = '-';
+export const remapMultiByteCharacters = {
+    '１': '1',
+    '２': '2',
+    '３': '3',
+    '４': '4',
+    '５': '5',
+    '６': '6',
+    '７': '7',
+    '８': '8',
+    '９': '9',
+    '０': '0',
+    '、': ',',
+    '，': ',',
+    '。': '.',
+    '．': '.',
+    '％': '%',
+    '＋': '+',
+    ー: '-',
+};
 /**
  * @element sp-number-field
+ * @slot help-text - default or non-negative help text to associate to your form element
+ * @slot negative-help-text - negative help text to associate to your form element when `invalid`
  */
 export class NumberField extends TextfieldBase {
     constructor() {
@@ -48,7 +52,7 @@ export class NumberField extends TextfieldBase {
         this.focused = false;
         this._forcedUnit = '';
         /**
-         * An `<sp-number-field>` element will process its numeric value with
+         * An `&lt;sp-number-field&gt;` element will process its numeric value with
          * `new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.valueAsNumber)`
          * in order to prepare it for visual delivery in the input. In order to customize this
          * processing supply your own `Intl.NumberFormatOptions` object here.
@@ -173,7 +177,7 @@ export class NumberField extends TextfieldBase {
         });
     }
     stepBy(count) {
-        if (this.readonly) {
+        if (this.disabled || this.readonly) {
             return;
         }
         const min = typeof this.min !== 'undefined' ? this.min : 0;
@@ -237,7 +241,7 @@ export class NumberField extends TextfieldBase {
         this.focused = false;
         this.keyboardFocused = false;
     }
-    onChange() {
+    handleChange() {
         const value = this.convertValueToNumber(this.inputValue);
         if (this.wasIndeterminate) {
             this.wasIndeterminate = false;
@@ -248,15 +252,19 @@ export class NumberField extends TextfieldBase {
             }
         }
         this.value = value;
-        super.onChange();
+        super.handleChange();
     }
-    onInput() {
+    handleInput() {
         if (this.indeterminate) {
             this.wasIndeterminate = true;
             this.indeterminateValue = this.value;
             this.inputElement.value = this.inputElement.value.replace(indeterminatePlaceholder, '');
         }
-        const { value, selectionStart } = this.inputElement;
+        const { value: originalValue, selectionStart } = this.inputElement;
+        const value = originalValue
+            .split('')
+            .map((char) => remapMultiByteCharacters[char] || char)
+            .join('');
         if (this.numberParser.isValidPartialNumber(value)) {
             const valueAsNumber = this.convertValueToNumber(value);
             if (!value && this.indeterminateValue) {
@@ -268,6 +276,7 @@ export class NumberField extends TextfieldBase {
                 this._value = this.validateInput(valueAsNumber);
             }
             this._trackingValue = value;
+            this.inputElement.value = value;
             return;
         }
         const currentLength = value.length;
@@ -283,7 +292,11 @@ export class NumberField extends TextfieldBase {
         if (typeof this.min !== 'undefined') {
             value = Math.max(this.min, value);
         }
-        if (typeof this.step !== 'undefined') {
+        if (typeof this.max !== 'undefined') {
+            value = Math.min(this.max, value);
+        }
+        // Step shouldn't validate when 0...
+        if (this.step) {
             const min = typeof this.min !== 'undefined' ? this.min : 0;
             const moduloStep = (value - min) % this.step;
             const fallsOnStep = moduloStep === 0;
@@ -302,9 +315,6 @@ export class NumberField extends TextfieldBase {
                 }
             }
         }
-        if (typeof this.max !== 'undefined') {
-            value = Math.min(this.max, value);
-        }
         return value;
     }
     get displayValue() {
@@ -363,10 +373,10 @@ export class NumberField extends TextfieldBase {
         }
         return this.focused ? this._numberParserFocused : this._numberParser;
     }
-    render() {
+    renderField() {
         this.autocomplete = 'off';
         return html `
-            ${super.render()}
+            ${super.renderField()}
             ${this.hideStepper
             ? html ``
             : html `
@@ -401,6 +411,7 @@ export class NumberField extends TextfieldBase {
                 this.readonly ||
                 (typeof this.max !== 'undefined' &&
                     this.value === this.max)}
+                              ?quiet=${this.quiet}
                           >
                               <sp-icon-chevron75
                                   slot="icon"
@@ -416,6 +427,7 @@ export class NumberField extends TextfieldBase {
                 this.readonly ||
                 (typeof this.min !== 'undefined' &&
                     this.value === this.min)}
+                              ?quiet=${this.quiet}
                           >
                               <sp-icon-chevron75
                                   slot="icon"