@spectrum-web-components/number-field - npm Package Compare versions

Comparing version 0.39.3 to 0.39.4

package.json

 {
     "name": "@spectrum-web-components/number-field",
-    "version": "0.39.3",
+    "version": "0.39.4",
     "publishConfig": {
@@ -61,13 +61,13 @@ "access": "public"
         "@internationalized/number": "^3.1.0",
-        "@spectrum-web-components/action-button": "^0.39.3",
-        "@spectrum-web-components/base": "^0.39.3",
-        "@spectrum-web-components/icon": "^0.39.3",
-        "@spectrum-web-components/icons-ui": "^0.39.3",
-        "@spectrum-web-components/reactive-controllers": "^0.39.3",
-        "@spectrum-web-components/shared": "^0.39.3",
-        "@spectrum-web-components/textfield": "^0.39.3"
+        "@spectrum-web-components/base": "^0.39.4",
+        "@spectrum-web-components/icon": "^0.39.4",
+        "@spectrum-web-components/icons-ui": "^0.39.4",
+        "@spectrum-web-components/infield-button": "^0.39.4",
+        "@spectrum-web-components/reactive-controllers": "^0.39.4",
+        "@spectrum-web-components/shared": "^0.39.4",
+        "@spectrum-web-components/textfield": "^0.39.4"
     },
     "devDependencies": {
         "@formatjs/intl-numberformat": "^8.3.5",
-        "@spectrum-css/stepper": "^4.0.56"
+        "@spectrum-css/stepper": "^5.0.1"
     },
@@ -80,3 +80,3 @@ "types": "./src/index.d.ts",
     ],
-    "gitHead": "d7840b3a9b99db4de62c44e3fb91b69dec7319af"
+    "gitHead": "f745c90e8e9ea85ff10be025e058b14cc925ec9f"
 }

src/number-field.css.dev.js

 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-:host{--spectrum-stepper-width-medium:72px;--spectrum-stepper-width-large:90px;--spectrum-stepper-icon-width-medium:10px;--spectrum-stepper-icon-width-large:12px;--spectrum-stepper-width:var(--spectrum-stepper-width-medium);--spectrum-stepper-icon-width:var(--spectrum-stepper-icon-width-medium);--spectrum-stepper-icon-nudge-start:1px;--spectrum-stepper-button-offset:calc(var(--spectrum-stepper-button-width)/2 - var(--spectrum-stepper-icon-width)/2);--spectrum-stepper-animation-duration:var(
---spectrum-animation-duration-100
-);--spectrum-stepper-buttons-height:var(--spectrum-component-height-100);--spectrum-stepper-border-radius:var(--spectrum-corner-radius-100);--spectrum-stepper-button-width:calc(var(--spectrum-spacing-400) - var(--spectrum-stepper-border-width)*2);--spectrum-stepper-button-gap:var(--spectrum-stepper-button-gap-reset);--spectrum-stepper-background-color:var(--spectrum-gray-50);--spectrum-stepper-background-color-disabled:var(
---spectrum-disabled-background-color
-);--spectrum-stepper-quiet-width:var(--spectrum-component-height-300);--spectrum-stepper-quiet-button-width:var(--spectrum-stepper-button-width);--spectrum-stepper-border-color-disabled:var(
---spectrum-disabled-background-color
-);--spectrum-stepper-border-color-quiet-disabled:var(
---spectrum-disabled-border-color
-);--spectrum-stepper-border-color-invalid-default:var(
---spectrum-negative-border-color-default
-);--spectrum-stepper-border-color-invalid-hover:var(
---spectrum-negative-border-color-hover
-);--spectrum-stepper-border-color-invalid-focus:var(
---spectrum-negative-border-color-focus
-);--spectrum-stepper-border-color-invalid-focus-hover:var(
---spectrum-negative-border-color-focus-hover
-);--spectrum-stepper-border-color-invalid-keyboard-focus:var(
---spectrum-negative-border-color-key-focus
-);--spectrum-stepper-focus-indicator-width:var(
+:host{--spectrum-stepper-height:var(--spectrum-component-height-100);--spectrum-stepper-border-radius:var(--spectrum-corner-radius-100);--spectrum-stepper-button-width:var(
+--spectrum-in-field-button-width-stacked-medium
+);--spectrum-stepper-button-padding:var(
+--spectrum-in-field-button-edge-to-fill
+);--spectrum-stepper-width:calc(var(--mod-stepper-height, var(--spectrum-stepper-height))*var(
+--mod-stepper-min-width-multiplier,
+var(--spectrum-text-field-minimum-width-multiplier)
+) + var(
+--mod-stepper-button-width,
+var(--spectrum-stepper-button-width)
+) + var(
+--mod-stepper-border-width,
+var(--spectrum-stepper-border-width)
+)*2);--spectrum-stepper-focus-indicator-width:var(
 --spectrum-focus-indicator-thickness
 );--spectrum-stepper-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-stepper-focus-indicator-color:var(
 --spectrum-focus-indicator-color
-)}#textfield .spectrum--medium{--spectrum-stepper-width:var(--spectrum-stepper-width-medium);--spectrum-stepper-icon-width:var(--spectrum-stepper-icon-width-medium);--spectrum-stepper-button-padding:calc(var(--spectrum-spacing-200)/2)}#textfield .spectrum--large{--spectrum-stepper-width:var(--spectrum-stepper-width-large);--spectrum-stepper-icon-width:var(--spectrum-stepper-icon-width-large);--spectrum-stepper-button-padding:calc(var(--spectrum-spacing-100)/2)}@media (forced-colors:active){:host{--highcontrast-stepper-border-color:CanvasText;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:CanvasText;--highcontrast-stepper-border-color-disabled:GrayText;--highcontrast-stepper-border-color-quiet-disabled:GrayText;--highcontrast-stepper-border-color-invalid-default:Highlight;--highcontrast-stepper-border-color-invalid-hover:Highlight;--highcontrast-stepper-border-color-invalid-focus:Highlight;--highcontrast-stepper-border-color-invalid-focus-hover:Highlight;--highcontrast-stepper-border-color-invalid-keyboard-focus:Highlight;--highcontrast-stepper-button-background-color-default:Canvas;--highcontrast-stepper-button-background-color-hover:Canvas;--highcontrast-stepper-button-background-color-focus:Canvas;--highcontrast-stepper-button-background-color-keyboard-focus:Canvas;--highcontrast-stepper-focus-indicator-color:Highlight}}.x{border-radius:var(--spectrum-stepper-button-border-radius-reset)}#textfield{border-radius:var(
+);--spectrum-stepper-button-offset:calc(var(--spectrum-stepper-button-width)/2);--spectrum-stepper-animation-duration:var(
+--spectrum-animation-duration-100
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
+);--mod-infield-button-border-width:var(
+--mod-stepper-border-width,var(--spectrum-stepper-border-width)
+);--mod-textfield-border-width:var(
+--mod-stepper-border-width,var(--spectrum-stepper-border-width)
+)}:host([size=s]) #textfield{--spectrum-stepper-button-width:var(
+--spectrum-in-field-button-width-stacked-small
+);--spectrum-stepper-height:var(--spectrum-component-height-75)}:host([size=l]) #textfield{--spectrum-stepper-button-width:var(
+--spectrum-in-field-button-width-stacked-large
+);--spectrum-stepper-height:var(--spectrum-component-height-200)}:host([size=xl]) #textfield{--spectrum-stepper-button-width:var(
+--spectrum-in-field-button-width-stacked-extra-large
+);--spectrum-stepper-height:var(--spectrum-component-height-300)}:host([quiet]) #textfield{--mod-infield-button-width-stacked:var(
+--mod-stepper-button-width-quiet,var(--spectrum-stepper-button-width)
+);--mod-textfield-focus-indicator-color:transparent}:host([disabled]) #textfield{--mod-infield-button-border-color-quiet-disabled:var(
+--spectrum-disabled-border-color
+)}:host([invalid]) #textfield{--mod-stepper-border-color:var(
+--mod-stepper-border-color-invalid,var(--spectrum-negative-border-color-default)
+);--mod-stepper-border-color-hover:var(
+--mod-stepper-border-color-hover-invalid,var(--spectrum-negative-border-color-hover)
+);--mod-stepper-border-color-focus:var(
+--mod-stepper-border-color-focus-invalid,var(--spectrum-negative-border-color-focus)
+);--mod-stepper-border-color-focus-hover:var(
+--mod-stepper-border-color-focus-hover-invalid,var(--spectrum-negative-border-color-focus-hover)
+);--mod-stepper-border-color-keyboard-focus:var(
+--mod-stepper-border-color-keyboard-focus-invalid,var(--spectrum-negative-border-color-key-focus)
+);--mod-infield-button-border-color:var(
+--mod-stepper-border-color-invalid,var(--spectrum-negative-border-color-default)
+)}@media (forced-colors:active){:host{--highcontrast-stepper-border-color:CanvasText;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:CanvasText;--highcontrast-stepper-button-background-color-default:Canvas;--highcontrast-stepper-button-background-color-hover:Canvas;--highcontrast-stepper-button-background-color-focus:Canvas;--highcontrast-stepper-button-background-color-keyboard-focus:Canvas;--highcontrast-stepper-focus-indicator-color:Highlight}:host([disabled]) #textfield{--highcontrast-stepper-border-color:GrayText}:host([invalid]) #textfield{--highcontrast-stepper-border-color:Highlight;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:Highlight}}.x{border-radius:var(--spectrum-stepper-button-border-radius-reset)}#textfield{block-size:var(--mod-stepper-height,var(--spectrum-stepper-height));border-radius:var(
 --mod-stepper-border-radius,var(--spectrum-stepper-border-radius)
-);display:inline-flex;flex-flow:row;inline-size:var(--mod-stepper-width,var(--spectrum-stepper-width));line-height:0;position:relative}:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .buttons,:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .input,:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .step-down,:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .step-up{border-color:var(
+);display:inline-flex;flex-flow:row;inline-size:var(--mod-stepper-width,var(--spectrum-stepper-width));position:relative}#textfield,#textfield .input{border-color:var(
+--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
+)}#textfield .input{border-end-end-radius:0;border-inline-end-width:0;border-start-end-radius:0}:host(:hover:not([disabled])) #textfield{--mod-infield-button-border-color:var(
 --highcontrast-stepper-border-color-hover,var(
 --mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
 )
-)}:host([focused]) #textfield .input{outline:none}:host([focused]) #textfield .buttons,:host([focused]) #textfield .input,:host([focused]) #textfield .step-down,:host([focused]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-focus,var(
---mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
+)}:host(:hover:not([disabled])) #textfield .buttons,:host(:hover:not([disabled])) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-hover,var(
+--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
 )
-)}:host([focused]) #textfield .step-down,:host([focused]) #textfield .step-up{background-color:var(
+)}#textfield:focus,:host([focused]) #textfield{--mod-infield-button-background-color:var(
 --highcontrast-stepper-button-background-color-focus,var(
 --mod-stepper-button-background-color-focus,var(--spectrum-stepper-button-background-color-focus)
 )
-)}:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input,:host([focused]:hover) #textfield .step-down,:host([focused]:hover) #textfield .step-up{border-color:var(
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-focus,var(
+--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
+)
+)}#textfield:focus .input,:host([focused]) #textfield .input{outline:none}#textfield:focus .buttons,#textfield:focus .input,:host([focused]) #textfield .buttons,:host([focused]) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-focus,var(
+--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
+)
+)}:host(:hover) #textfield:focus,:host([focused]:hover) #textfield{--mod-infield-button-border-color:var(
 --highcontrast-stepper-border-color-focus-hover,var(
 --mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
 )
-)}:host([focused][invalid]) #textfield .buttons,:host([focused][invalid]) #textfield .input,:host([focused][invalid]) #textfield .step-down,:host([focused][invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-focus,var(
---mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)
+)}:host(:hover) #textfield:focus .buttons,:host(:hover) #textfield:focus .input,:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-focus-hover,var(
+--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
 )
-)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{outline:var(
+)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{--mod-infield-button-background-color:var(
+--highcontrast-stepper-button-background-color-keyboard-focus,var(
+--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
+)
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-keyboard-focus,var(
+--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
+)
+);outline:var(
 --mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)
@@ -56,3 +99,11 @@ ) solid;outline-color:var(
 --mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)
-)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{outline:var(
+)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{--mod-infield-button-background-color:var(
+--highcontrast-stepper-button-background-color-keyboard-focus,var(
+--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
+)
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-keyboard-focus,var(
+--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
+)
+);outline:var(
 --mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)
@@ -65,3 +116,11 @@ ) solid;outline-color:var(
 --mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)
-)}#textfield:focus-visible,:host([keyboard-focused]) #textfield{outline:var(
+)}#textfield:focus-visible,:host([keyboard-focused]) #textfield{--mod-infield-button-background-color:var(
+--highcontrast-stepper-button-background-color-keyboard-focus,var(
+--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
+)
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-keyboard-focus,var(
+--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
+)
+);outline:var(
 --mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)
@@ -74,67 +133,17 @@ ) solid;outline-color:var(
 --mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)
-)}#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield:focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield.focus-visible .buttons,#textfield.focus-visible .input,#textfield.focus-visible .step-down,#textfield.focus-visible .step-up,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{border-color:var(
+)}#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield:focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield.focus-visible .buttons,#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{border-color:var(
 --highcontrast-stepper-border-color-keyboard-focus,var(
 --mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
 )
-)}#textfield.focus-visible .buttons,#textfield.focus-visible .input,#textfield.focus-visible .step-down,#textfield.focus-visible .step-up,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{border-color:var(
+)}#textfield.focus-visible .buttons,#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{border-color:var(
 --highcontrast-stepper-border-color-keyboard-focus,var(
 --mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
 )
-)}#textfield:focus-visible .buttons,#textfield:focus-visible .input,#textfield:focus-visible .step-down,#textfield:focus-visible .step-up,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{border-color:var(
+)}#textfield:focus-visible .buttons,#textfield:focus-visible .input,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{border-color:var(
 --highcontrast-stepper-border-color-keyboard-focus,var(
 --mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
 )
-)}#textfield.focus-visible .step-down,#textfield.focus-visible .step-up,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{background-color:var(
---highcontrast-stepper-button-background-color-keyboard-focus,var(
---mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
-)
-)}#textfield.focus-visible .step-down,#textfield.focus-visible .step-up,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{background-color:var(
---highcontrast-stepper-button-background-color-keyboard-focus,var(
---mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
-)
-)}#textfield:focus-visible .step-down,#textfield:focus-visible .step-up,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{background-color:var(
---highcontrast-stepper-button-background-color-keyboard-focus,var(
---mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
-)
-)}:host([invalid]) #textfield.focus-visible .buttons,:host([invalid]) #textfield.focus-visible .input,:host([invalid]) #textfield.focus-visible .step-down,:host([invalid]) #textfield.focus-visible .step-up,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .step-down,:host([keyboard-focused][invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
-)}:host([invalid]) #textfield.focus-visible .buttons,:host([invalid]) #textfield.focus-visible .input,:host([invalid]) #textfield.focus-visible .step-down,:host([invalid]) #textfield.focus-visible .step-up,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .step-down,:host([keyboard-focused][invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
-)}:host([invalid]) #textfield:focus-visible .buttons,:host([invalid]) #textfield:focus-visible .input,:host([invalid]) #textfield:focus-visible .step-down,:host([invalid]) #textfield:focus-visible .step-up,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .step-down,:host([keyboard-focused][invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
-)}:host([invalid]) #textfield .buttons,:host([invalid]) #textfield .input,:host([invalid]) #textfield .step-down,:host([invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-default,var(
---mod-stepper-border-color-invalid-default,var(--spectrum-stepper-border-color-invalid-default)
-)
-)}:host([invalid]:hover) #textfield .buttons,:host([invalid]:hover) #textfield .input,:host([invalid]:hover) #textfield .step-down,:host([invalid]:hover) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-hover,var(
---mod-stepper-border-color-invalid-hover,var(--spectrum-stepper-border-color-invalid-hover)
-)
-)}:host([invalid][focused]) #textfield .buttons,:host([invalid][focused]) #textfield .input,:host([invalid][focused]) #textfield .step-down,:host([invalid][focused]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-focus,var(
---mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)
-)
-)}:host([invalid][focused]:hover) #textfield .buttons,:host([invalid][focused]:hover) #textfield .input,:host([invalid][focused]:hover) #textfield .step-down,:host([invalid][focused]:hover) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-focus-hover,var(
---mod-stepper-border-color-invalid-focus-hover,var(--spectrum-stepper-border-color-invalid-focus-hover)
-)
-)}:host([invalid][keyboard-focused]) #textfield .buttons,:host([invalid][keyboard-focused]) #textfield .input,:host([invalid][keyboard-focused]) #textfield .step-down,:host([invalid][keyboard-focused]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
-)}:host([disabled]) #textfield .buttons,:host([disabled]) #textfield .input,:host([disabled]) #textfield .step-down,:host([disabled]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-disabled,var(
---mod-stepper-border-color-disabled,var(--spectrum-stepper-border-color-disabled)
-)
-)}:host([disabled]) #textfield .step-down,:host([disabled]) #textfield .step-up{background-color:#0000}:host([disabled]) #textfield .buttons{background-color:var(--spectrum-stepper-background-color-disabled)}:host([quiet]) #textfield{border-radius:0;inline-size:var(
---mod-stepper-quiet-width,var(--spectrum-stepper-quiet-width)
-)}:host([quiet]):after{block-size:var(
+)}:host([quiet]) #textfield{border-end-end-radius:0;border-end-start-radius:0;border-start-end-radius:0;border-start-start-radius:0}:host([quiet]) #textfield.hide-stepper .input{border-end-end-radius:0;border-inline-end-width:0}:host([quiet]) #textfield:after{block-size:var(
 --mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)
-);bottom:calc((var(
+);content:"";inline-size:100%;inset-block-end:calc((var(
 --mod-stepper-focus-indicator-gap,
@@ -145,78 +154,39 @@ var(--spectrum-stepper-focus-indicator-gap)
 var(--spectrum-stepper-focus-indicator-width)
-))*-1);content:"";inline-size:100%;left:0;position:absolute}:host([quiet]) .buttons{border-radius:0;border-width:0 0 var(--mod-stepper-border-width,var(--spectrum-stepper-border-width)) 0}:host([quiet]) .step-down,:host([quiet]) .step-up{border-block-start-color:currentColor;border-block-start-style:none;border-inline-color:currentColor;border-inline-style:none;border-radius:0;border-width:0;inline-size:var(
---mod-stepper-quiet-button-width,var(--spectrum-stepper-quiet-button-width)
-);justify-content:flex-end;min-inline-size:0;padding-inline-end:0}:host([quiet]) .step-down:after,:host([quiet]) .step-up:after{block-size:100%;content:"";inline-size:var(
---mod-stepper-button-offset,var(--spectrum-stepper-button-offset)
-);inset-inline-end:calc(var(--mod-stepper-button-offset, var(--spectrum-stepper-button-offset))*-1);position:absolute}:host([quiet]) .buttons,:host([quiet]) .input,:host([quiet]) .step-down,:host([quiet]) .step-up,:host([quiet]:hover) .buttons,:host([quiet]:hover) .step-down,:host([quiet]:hover) .step-up{background-color:#0000}:host([quiet][disabled]) #textfield .buttons,:host([quiet][disabled]) #textfield .input,:host([quiet][disabled]) #textfield .step-down,:host([quiet][disabled]) #textfield .step-up{background-color:#0000;border-color:var(
---highcontrast-stepper-border-color-quiet-disabled,var(
---mod-stepper-border-color-quiet-disabled,var(--spectrum-stepper-border-color-quiet-disabled)
-)
-)}:host([quiet][invalid]) .buttons,:host([quiet][invalid]) .input,:host([quiet][invalid]) .step-down{border-color:var(
---highcontrast-stepper-border-color-invalid-default,var(
---mod-stepper-border-color-invalid-default,var(--spectrum-stepper-border-color-invalid-default)
-)
-)}:host([quiet][invalid]) .step-down,:host([quiet][invalid]) .step-up{background-color:#0000}:host([quiet][focused]) .buttons,:host([quiet][focused]) .input,:host([quiet][focused]) .step-down{border-color:var(
---highcontrast-stepper-border-color-focus,var(
---mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
-)
-)}:host([quiet][focused]) .step-down,:host([quiet][focused]) .step-up{background-color:#0000}:host([quiet][focused]:hover) .buttons,:host([quiet][focused]:hover) .input,:host([quiet][focused]:hover) .step-down,:host([quiet][focused]:hover) .step-up{border-color:var(
---highcontrast-stepper-border-color-focus-hover,var(
---mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
-)
-)}:host([quiet][focused][invalid]) .buttons,:host([quiet][focused][invalid]) .input,:host([quiet][focused][invalid]) .step-down{border-color:var(
---highcontrast-stepper-border-color-invalid-focus,var(
---mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)
-)
-)}:host([quiet][keyboard-focused]) #textfield{outline:none}:host([quiet][keyboard-focused]):after{background-color:var(
+))*-1);inset-inline-start:0;position:absolute}:host([quiet]) #textfield .buttons{border:none}:host([quiet]) #textfield .button{padding:0}:host([quiet]) #textfield .button.step-down .spectrum-InfieldButton-fill{border-block-end-width:var(
+--mod-stepper-border-width,var(--spectrum-stepper-border-width)
+);border-end-end-radius:0;border-end-start-radius:0}:host([quiet]) #textfield .button .spectrum-InfieldButton-fill{justify-content:flex-end}:host([quiet]) #textfield .buttons,:host([quiet]) #textfield .input,:host([quiet]:hover) #textfield .buttons{background-color:#0000}:host([quiet][keyboard-focused]) #textfield{outline:none}:host([quiet][keyboard-focused]) #textfield:after{background-color:var(
 --highcontrast-stepper-focus-indicator-color,var(
 --mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)
 )
-)}:host([quiet][keyboard-focused]) .step-down,:host([quiet][keyboard-focused]) .step-up{background-color:#0000}:host([quiet][keyboard-focused]) .buttons,:host([quiet][keyboard-focused]) .step-down{border-color:var(
---highcontrast-stepper-border-color-keyboard-focus,var(
---mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
-)
-)}:host([quiet][keyboard-focused][invalid]) .buttons,:host([quiet][keyboard-focused][invalid]) .input,:host([quiet][keyboard-focused][invalid]) .step-down{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
 )}#textfield:before{content:""}.buttons{background-color:var(
---highcontrast-stepper-background-color,var(
---mod-stepper-background-color,var(--spectrum-stepper-background-color)
+--highcontrast-stepper-buttons-background-color,var(
+--mod-stepper-buttons-background-color,var(--spectrum-stepper-buttons-background-color)
 )
-);block-size:var(
---mod-stepper-buttons-height,var(--spectrum-stepper-buttons-height)
-);border-color:var(
+);block-size:var(--mod-stepper-height,var(--spectrum-stepper-height));border-color:var(
 --highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
 );border-end-end-radius:var(
 --mod-stepper-border-radius,var(--spectrum-stepper-border-radius)
-);border-end-start-radius:0;border-start-end-radius:var(
+);border-start-end-radius:var(
 --mod-stepper-border-radius,var(--spectrum-stepper-border-radius)
-);border-start-start-radius:0;border-style:solid;border-width:var(
---mod-stepper-border-width,var(--spectrum-stepper-border-width)
-) var(--mod-stepper-border-width,var(--spectrum-stepper-border-width)) var(--mod-stepper-border-width,var(--spectrum-stepper-border-width)) var(--spectrum-stepper-button-border-width-reset);flex-direction:column;inline-size:calc(var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + var(--mod-stepper-button-gap, var(--spectrum-stepper-button-gap))*2);justify-content:center;overflow:hidden;padding-inline-end:var(--spectrum-stepper-button-gap);row-gap:var(--mod-stepper-button-gap,var(--spectrum-stepper-button-gap));transition:border-color var(
+);border-style:var(
+--mod-stepper-buttons-border-style,var(--spectrum-stepper-buttons-border-style)
+);border-width:var(
+--mod-stepper-buttons-border-width,var(--spectrum-stepper-buttons-border-width)
+);border-inline-start-width:0;box-sizing:border-box;display:flex;flex-direction:column;inline-size:var(
+--mod-stepper-button-width,var(--spectrum-stepper-button-width)
+);justify-content:center;transition:border-color var(
 --mod-stepper-animation-duration,var(--spectrum-stepper-animation-duration)
-) ease-in-out}.buttons,.step-down,.step-up{box-sizing:border-box;display:flex}.step-down,.step-up{background-color:var(
---highcontrast-stepper-button-background-color-default,var(
---mod-stepper-button-background-color-default,var(--spectrum-stepper-button-background-color-default)
-)
-);block-size:calc(var(
---mod-stepper-buttons-height,
-var(--spectrum-stepper-buttons-height)
-)/2 - var(--mod-stepper-button-gap, var(--spectrum-stepper-button-gap))*2.5);border-width:0;inline-size:var(
---mod-stepper-button-width,var(--spectrum-stepper-button-width)
-);margin:0;min-inline-size:0;padding-inline-end:var(
---mod-stepper-button-padding,var(--spectrum-stepper-button-padding)
-);padding-inline-start:var(
---mod-stepper-button-padding,var(--spectrum-stepper-button-padding)
-);position:relative}.step-down .stepper-icon,.step-up .stepper-icon{margin:0;margin-inline-start:var(--spectrum-stepper-button-icon-nudge);opacity:1}:host(:hover) .step-down,:host(:hover) .step-up{background-color:var(
---highcontrast-stepper-button-background-color-hover,var(
---mod-stepper-button-background-color-hover,var(--spectrum-stepper-button-background-color-hover)
-)
-)}.step-down:disabled,.step-up:disabled{border-color:#0000}.step-up{border-end-end-radius:0;border-end-start-radius:0;border-start-end-radius:var(--spectrum-stepper-button-border-radius-reset);border-start-start-radius:var(
---spectrum-stepper-button-border-radius-reset
-);padding-block-end:0;padding-block-start:var(
---mod-stepper-icon-nudge-start,var(--spectrum-stepper-icon-nudge-start)
-)}.step-down{border-block-start-color:var(
---highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
-);border-block-start-width:0;border-block-start-width:var(--spectrum-stepper-button-border-width-reset);border-end-end-radius:var(--spectrum-stepper-button-border-radius-reset);border-end-start-radius:var(--spectrum-stepper-button-border-radius-reset);border-start-end-radius:0;border-start-start-radius:0;padding-block-start:0}.textfield{flex:1;inline-size:auto;min-inline-size:0}.input{border-end-end-radius:0;border-inline-end-width:0;border-start-end-radius:0;min-inline-size:0}#textfield.hide-stepper .input{border-end-end-radius:var(
+) ease-in-out}.button.step-up{padding-block-start:calc(var(
+--mod-stepper-button-padding,
+var(--spectrum-stepper-button-padding)
+) - var(
+--mod-stepper-border-width,
+var(--spectrum-stepper-border-width)
+))}.button.step-down{padding-block-end:calc(var(
+--mod-stepper-button-padding,
+var(--spectrum-stepper-button-padding)
+) - var(
+--mod-stepper-border-width,
+var(--spectrum-stepper-border-width)
+))}#textfield.hide-stepper .input{border-end-end-radius:var(
 --mod-stepper-border-radius,var(--spectrum-stepper-border-radius)
@@ -229,10 +199,8 @@ );border-inline-end-width:var(
 --system-spectrum-stepper-border-width
-);--spectrum-stepper-button-border-width-reset:var(
---system-spectrum-stepper-button-border-width-reset
-);--spectrum-stepper-button-icon-nudge:var(
---system-spectrum-stepper-button-icon-nudge
-);--spectrum-stepper-button-gap-reset:var(
---system-spectrum-stepper-button-gap-reset
-);--spectrum-stepper-button-border-radius-reset:var(
---system-spectrum-stepper-button-border-radius-reset
+);--spectrum-stepper-buttons-border-style:var(
+--system-spectrum-stepper-buttons-border-style
+);--spectrum-stepper-buttons-border-width:var(
+--system-spectrum-stepper-buttons-border-width
+);--spectrum-stepper-buttons-background-color:var(
+--system-spectrum-stepper-buttons-background-color
 );--spectrum-stepper-border-color:var(
@@ -248,6 +216,4 @@ --system-spectrum-stepper-border-color
 --system-spectrum-stepper-border-color-keyboard-focus
-);--spectrum-stepper-button-background-color-default:var(
---system-spectrum-stepper-button-background-color-default
-);--spectrum-stepper-button-background-color-hover:var(
---system-spectrum-stepper-button-background-color-hover
+);--spectrum-stepper-button-border-radius-reset:var(
+--system-spectrum-stepper-button-border-radius-reset
 );--spectrum-stepper-button-background-color-focus:var(
@@ -257,9 +223,18 @@ --system-spectrum-stepper-button-background-color-focus
 --system-spectrum-stepper-button-background-color-keyboard-focus
-)}:host{inline-size:var(--mod-stepper-width,var(--spectrum-stepper-width))}:host([size=s]){--spectrum-stepper-width:calc(var(--spectrum-stepper-width-medium)/5*4)}:host([size=l]){--spectrum-stepper-width:calc(var(--spectrum-stepper-width-medium)*1.25)}:host([size=xl]){--spectrum-stepper-width:calc(var(--spectrum-stepper-width-medium)*1.25*1.25)}#textfield{inline-size:100%}sp-field-button{--spectrum-dropdown-height:100%;--spectrum-dropdown-padding-x:0}.input{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.buttons{--mod-actionbutton-background-color-disabled:var(
---spectrum-global-color-gray-200
-);block-size:var(--mod-textfield-height,var(--spectrum-textfield-height));flex-shrink:0;inline-size:calc(var(--mod-textfield-height, var(--spectrum-textfield-height))*3/4);padding-block:var(--spectrum-stepper-button-gap)}.step-down,.step-up{height:50%;overflow:hidden;padding:0;width:100%}.step-down .stepper-icon,.step-up .stepper-icon{margin-inline-start:0;translate:5%}:host([readonly]) .buttons{pointer-events:none;visibility:hidden}:host([hide-stepper]:not([quiet])) .input{border-radius:var(
---spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
-)}: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)}:host([readonly]:not([disabled],[invalid],[focused],[keyboard-focused])) #textfield:hover .input{border-color:transparent}:host([hide-stepper]:not([quiet])) #textfield input{border:var(--spectrum-textfield-border-width) solid var(--spectrum-textfield-border-color);border-radius:var(--spectrum-textfield-corner-radius)}
+)}:host([disabled]) #textfield{--spectrum-stepper-buttons-background-color:var(
+--system-spectrum-stepper-disabled-buttons-background-color
+);--spectrum-stepper-buttons-border-width:var(
+--system-spectrum-stepper-disabled-buttons-border-width
+)}:host{--swc-number-field-width:calc(var(--mod-stepper-height, var(--spectrum-stepper-height))*var(
+--mod-stepper-min-width-multiplier,
+var(--spectrum-text-field-minimum-width-multiplier)
+) + var(
+--mod-stepper-button-width,
+var(--spectrum-stepper-button-width)
+) + var(
+--mod-stepper-border-width,
+var(--spectrum-stepper-border-width)
+)*2);--mod-infield-button-border-width:var(--unset-value-resets-inheritance);inline-size:var(--mod-stepper-width,var(--spectrum-stepper-width))}:host([size=s]){--spectrum-stepper-width:calc(var(--swc-number-field-width)/5*4)}:host([size=l]){--spectrum-stepper-width:calc(var(--swc-number-field-width)*1.25)}:host([size=xl]){--spectrum-stepper-width:calc(var(--swc-number-field-width)*1.25*1.25)}#textfield{inline-size:100%}.input{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}:host([readonly]) .buttons{pointer-events:none;visibility:hidden}:host([readonly]:not([disabled],[invalid],[focused],[keyboard-focused])) #textfield:hover .input{border-color:transparent}:host([hide-stepper]:not([quiet])) #textfield input{border:var(--spectrum-textfield-border-width) solid var(--spectrum-textfield-border-color);border-radius:var(--spectrum-textfield-corner-radius)}
 `;
 export default styles;
 //# sourceMappingURL=number-field.css.dev.js.map

src/number-field.css.js

@@ -1,47 +0,90 @@
-"use strict";import{css as e}from"@spectrum-web-components/base";const t=e`
-:host{--spectrum-stepper-width-medium:72px;--spectrum-stepper-width-large:90px;--spectrum-stepper-icon-width-medium:10px;--spectrum-stepper-icon-width-large:12px;--spectrum-stepper-width:var(--spectrum-stepper-width-medium);--spectrum-stepper-icon-width:var(--spectrum-stepper-icon-width-medium);--spectrum-stepper-icon-nudge-start:1px;--spectrum-stepper-button-offset:calc(var(--spectrum-stepper-button-width)/2 - var(--spectrum-stepper-icon-width)/2);--spectrum-stepper-animation-duration:var(
---spectrum-animation-duration-100
-);--spectrum-stepper-buttons-height:var(--spectrum-component-height-100);--spectrum-stepper-border-radius:var(--spectrum-corner-radius-100);--spectrum-stepper-button-width:calc(var(--spectrum-spacing-400) - var(--spectrum-stepper-border-width)*2);--spectrum-stepper-button-gap:var(--spectrum-stepper-button-gap-reset);--spectrum-stepper-background-color:var(--spectrum-gray-50);--spectrum-stepper-background-color-disabled:var(
---spectrum-disabled-background-color
-);--spectrum-stepper-quiet-width:var(--spectrum-component-height-300);--spectrum-stepper-quiet-button-width:var(--spectrum-stepper-button-width);--spectrum-stepper-border-color-disabled:var(
---spectrum-disabled-background-color
-);--spectrum-stepper-border-color-quiet-disabled:var(
---spectrum-disabled-border-color
-);--spectrum-stepper-border-color-invalid-default:var(
---spectrum-negative-border-color-default
-);--spectrum-stepper-border-color-invalid-hover:var(
---spectrum-negative-border-color-hover
-);--spectrum-stepper-border-color-invalid-focus:var(
---spectrum-negative-border-color-focus
-);--spectrum-stepper-border-color-invalid-focus-hover:var(
---spectrum-negative-border-color-focus-hover
-);--spectrum-stepper-border-color-invalid-keyboard-focus:var(
---spectrum-negative-border-color-key-focus
-);--spectrum-stepper-focus-indicator-width:var(
+"use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
+:host{--spectrum-stepper-height:var(--spectrum-component-height-100);--spectrum-stepper-border-radius:var(--spectrum-corner-radius-100);--spectrum-stepper-button-width:var(
+--spectrum-in-field-button-width-stacked-medium
+);--spectrum-stepper-button-padding:var(
+--spectrum-in-field-button-edge-to-fill
+);--spectrum-stepper-width:calc(var(--mod-stepper-height, var(--spectrum-stepper-height))*var(
+--mod-stepper-min-width-multiplier,
+var(--spectrum-text-field-minimum-width-multiplier)
+) + var(
+--mod-stepper-button-width,
+var(--spectrum-stepper-button-width)
+) + var(
+--mod-stepper-border-width,
+var(--spectrum-stepper-border-width)
+)*2);--spectrum-stepper-focus-indicator-width:var(
 --spectrum-focus-indicator-thickness
 );--spectrum-stepper-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-stepper-focus-indicator-color:var(
 --spectrum-focus-indicator-color
-)}#textfield .spectrum--medium{--spectrum-stepper-width:var(--spectrum-stepper-width-medium);--spectrum-stepper-icon-width:var(--spectrum-stepper-icon-width-medium);--spectrum-stepper-button-padding:calc(var(--spectrum-spacing-200)/2)}#textfield .spectrum--large{--spectrum-stepper-width:var(--spectrum-stepper-width-large);--spectrum-stepper-icon-width:var(--spectrum-stepper-icon-width-large);--spectrum-stepper-button-padding:calc(var(--spectrum-spacing-100)/2)}@media (forced-colors:active){:host{--highcontrast-stepper-border-color:CanvasText;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:CanvasText;--highcontrast-stepper-border-color-disabled:GrayText;--highcontrast-stepper-border-color-quiet-disabled:GrayText;--highcontrast-stepper-border-color-invalid-default:Highlight;--highcontrast-stepper-border-color-invalid-hover:Highlight;--highcontrast-stepper-border-color-invalid-focus:Highlight;--highcontrast-stepper-border-color-invalid-focus-hover:Highlight;--highcontrast-stepper-border-color-invalid-keyboard-focus:Highlight;--highcontrast-stepper-button-background-color-default:Canvas;--highcontrast-stepper-button-background-color-hover:Canvas;--highcontrast-stepper-button-background-color-focus:Canvas;--highcontrast-stepper-button-background-color-keyboard-focus:Canvas;--highcontrast-stepper-focus-indicator-color:Highlight}}.x{border-radius:var(--spectrum-stepper-button-border-radius-reset)}#textfield{border-radius:var(
+);--spectrum-stepper-button-offset:calc(var(--spectrum-stepper-button-width)/2);--spectrum-stepper-animation-duration:var(
+--spectrum-animation-duration-100
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
+);--mod-infield-button-border-width:var(
+--mod-stepper-border-width,var(--spectrum-stepper-border-width)
+);--mod-textfield-border-width:var(
+--mod-stepper-border-width,var(--spectrum-stepper-border-width)
+)}:host([size=s]) #textfield{--spectrum-stepper-button-width:var(
+--spectrum-in-field-button-width-stacked-small
+);--spectrum-stepper-height:var(--spectrum-component-height-75)}:host([size=l]) #textfield{--spectrum-stepper-button-width:var(
+--spectrum-in-field-button-width-stacked-large
+);--spectrum-stepper-height:var(--spectrum-component-height-200)}:host([size=xl]) #textfield{--spectrum-stepper-button-width:var(
+--spectrum-in-field-button-width-stacked-extra-large
+);--spectrum-stepper-height:var(--spectrum-component-height-300)}:host([quiet]) #textfield{--mod-infield-button-width-stacked:var(
+--mod-stepper-button-width-quiet,var(--spectrum-stepper-button-width)
+);--mod-textfield-focus-indicator-color:transparent}:host([disabled]) #textfield{--mod-infield-button-border-color-quiet-disabled:var(
+--spectrum-disabled-border-color
+)}:host([invalid]) #textfield{--mod-stepper-border-color:var(
+--mod-stepper-border-color-invalid,var(--spectrum-negative-border-color-default)
+);--mod-stepper-border-color-hover:var(
+--mod-stepper-border-color-hover-invalid,var(--spectrum-negative-border-color-hover)
+);--mod-stepper-border-color-focus:var(
+--mod-stepper-border-color-focus-invalid,var(--spectrum-negative-border-color-focus)
+);--mod-stepper-border-color-focus-hover:var(
+--mod-stepper-border-color-focus-hover-invalid,var(--spectrum-negative-border-color-focus-hover)
+);--mod-stepper-border-color-keyboard-focus:var(
+--mod-stepper-border-color-keyboard-focus-invalid,var(--spectrum-negative-border-color-key-focus)
+);--mod-infield-button-border-color:var(
+--mod-stepper-border-color-invalid,var(--spectrum-negative-border-color-default)
+)}@media (forced-colors:active){:host{--highcontrast-stepper-border-color:CanvasText;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:CanvasText;--highcontrast-stepper-button-background-color-default:Canvas;--highcontrast-stepper-button-background-color-hover:Canvas;--highcontrast-stepper-button-background-color-focus:Canvas;--highcontrast-stepper-button-background-color-keyboard-focus:Canvas;--highcontrast-stepper-focus-indicator-color:Highlight}:host([disabled]) #textfield{--highcontrast-stepper-border-color:GrayText}:host([invalid]) #textfield{--highcontrast-stepper-border-color:Highlight;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:Highlight}}.x{border-radius:var(--spectrum-stepper-button-border-radius-reset)}#textfield{block-size:var(--mod-stepper-height,var(--spectrum-stepper-height));border-radius:var(
 --mod-stepper-border-radius,var(--spectrum-stepper-border-radius)
-);display:inline-flex;flex-flow:row;inline-size:var(--mod-stepper-width,var(--spectrum-stepper-width));line-height:0;position:relative}:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .buttons,:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .input,:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .step-down,:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .step-up{border-color:var(
+);display:inline-flex;flex-flow:row;inline-size:var(--mod-stepper-width,var(--spectrum-stepper-width));position:relative}#textfield,#textfield .input{border-color:var(
+--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
+)}#textfield .input{border-end-end-radius:0;border-inline-end-width:0;border-start-end-radius:0}:host(:hover:not([disabled])) #textfield{--mod-infield-button-border-color:var(
 --highcontrast-stepper-border-color-hover,var(
 --mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
 )
-)}:host([focused]) #textfield .input{outline:none}:host([focused]) #textfield .buttons,:host([focused]) #textfield .input,:host([focused]) #textfield .step-down,:host([focused]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-focus,var(
---mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
+)}:host(:hover:not([disabled])) #textfield .buttons,:host(:hover:not([disabled])) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-hover,var(
+--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
 )
-)}:host([focused]) #textfield .step-down,:host([focused]) #textfield .step-up{background-color:var(
+)}#textfield:focus,:host([focused]) #textfield{--mod-infield-button-background-color:var(
 --highcontrast-stepper-button-background-color-focus,var(
 --mod-stepper-button-background-color-focus,var(--spectrum-stepper-button-background-color-focus)
 )
-)}:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input,:host([focused]:hover) #textfield .step-down,:host([focused]:hover) #textfield .step-up{border-color:var(
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-focus,var(
+--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
+)
+)}#textfield:focus .input,:host([focused]) #textfield .input{outline:none}#textfield:focus .buttons,#textfield:focus .input,:host([focused]) #textfield .buttons,:host([focused]) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-focus,var(
+--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
+)
+)}:host(:hover) #textfield:focus,:host([focused]:hover) #textfield{--mod-infield-button-border-color:var(
 --highcontrast-stepper-border-color-focus-hover,var(
 --mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
 )
-)}:host([focused][invalid]) #textfield .buttons,:host([focused][invalid]) #textfield .input,:host([focused][invalid]) #textfield .step-down,:host([focused][invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-focus,var(
---mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)
+)}:host(:hover) #textfield:focus .buttons,:host(:hover) #textfield:focus .input,:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-focus-hover,var(
+--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
 )
-)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{outline:var(
+)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{--mod-infield-button-background-color:var(
+--highcontrast-stepper-button-background-color-keyboard-focus,var(
+--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
+)
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-keyboard-focus,var(
+--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
+)
+);outline:var(
 --mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)
@@ -54,3 +97,11 @@ ) solid;outline-color:var(
 --mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)
-)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{outline:var(
+)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{--mod-infield-button-background-color:var(
+--highcontrast-stepper-button-background-color-keyboard-focus,var(
+--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
+)
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-keyboard-focus,var(
+--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
+)
+);outline:var(
 --mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)
@@ -63,3 +114,11 @@ ) solid;outline-color:var(
 --mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)
-)}#textfield:focus-visible,:host([keyboard-focused]) #textfield{outline:var(
+)}#textfield:focus-visible,:host([keyboard-focused]) #textfield{--mod-infield-button-background-color:var(
+--highcontrast-stepper-button-background-color-keyboard-focus,var(
+--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
+)
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-keyboard-focus,var(
+--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
+)
+);outline:var(
 --mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)
@@ -72,67 +131,17 @@ ) solid;outline-color:var(
 --mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)
-)}#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield:focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield.focus-visible .buttons,#textfield.focus-visible .input,#textfield.focus-visible .step-down,#textfield.focus-visible .step-up,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{border-color:var(
+)}#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield:focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield.focus-visible .buttons,#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{border-color:var(
 --highcontrast-stepper-border-color-keyboard-focus,var(
 --mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
 )
-)}#textfield.focus-visible .buttons,#textfield.focus-visible .input,#textfield.focus-visible .step-down,#textfield.focus-visible .step-up,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{border-color:var(
+)}#textfield.focus-visible .buttons,#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{border-color:var(
 --highcontrast-stepper-border-color-keyboard-focus,var(
 --mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
 )
-)}#textfield:focus-visible .buttons,#textfield:focus-visible .input,#textfield:focus-visible .step-down,#textfield:focus-visible .step-up,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{border-color:var(
+)}#textfield:focus-visible .buttons,#textfield:focus-visible .input,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{border-color:var(
 --highcontrast-stepper-border-color-keyboard-focus,var(
 --mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
 )
-)}#textfield.focus-visible .step-down,#textfield.focus-visible .step-up,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{background-color:var(
---highcontrast-stepper-button-background-color-keyboard-focus,var(
---mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
-)
-)}#textfield.focus-visible .step-down,#textfield.focus-visible .step-up,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{background-color:var(
---highcontrast-stepper-button-background-color-keyboard-focus,var(
---mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
-)
-)}#textfield:focus-visible .step-down,#textfield:focus-visible .step-up,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{background-color:var(
---highcontrast-stepper-button-background-color-keyboard-focus,var(
---mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
-)
-)}:host([invalid]) #textfield.focus-visible .buttons,:host([invalid]) #textfield.focus-visible .input,:host([invalid]) #textfield.focus-visible .step-down,:host([invalid]) #textfield.focus-visible .step-up,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .step-down,:host([keyboard-focused][invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
-)}:host([invalid]) #textfield.focus-visible .buttons,:host([invalid]) #textfield.focus-visible .input,:host([invalid]) #textfield.focus-visible .step-down,:host([invalid]) #textfield.focus-visible .step-up,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .step-down,:host([keyboard-focused][invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
-)}:host([invalid]) #textfield:focus-visible .buttons,:host([invalid]) #textfield:focus-visible .input,:host([invalid]) #textfield:focus-visible .step-down,:host([invalid]) #textfield:focus-visible .step-up,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .step-down,:host([keyboard-focused][invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
-)}:host([invalid]) #textfield .buttons,:host([invalid]) #textfield .input,:host([invalid]) #textfield .step-down,:host([invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-default,var(
---mod-stepper-border-color-invalid-default,var(--spectrum-stepper-border-color-invalid-default)
-)
-)}:host([invalid]:hover) #textfield .buttons,:host([invalid]:hover) #textfield .input,:host([invalid]:hover) #textfield .step-down,:host([invalid]:hover) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-hover,var(
---mod-stepper-border-color-invalid-hover,var(--spectrum-stepper-border-color-invalid-hover)
-)
-)}:host([invalid][focused]) #textfield .buttons,:host([invalid][focused]) #textfield .input,:host([invalid][focused]) #textfield .step-down,:host([invalid][focused]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-focus,var(
---mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)
-)
-)}:host([invalid][focused]:hover) #textfield .buttons,:host([invalid][focused]:hover) #textfield .input,:host([invalid][focused]:hover) #textfield .step-down,:host([invalid][focused]:hover) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-focus-hover,var(
---mod-stepper-border-color-invalid-focus-hover,var(--spectrum-stepper-border-color-invalid-focus-hover)
-)
-)}:host([invalid][keyboard-focused]) #textfield .buttons,:host([invalid][keyboard-focused]) #textfield .input,:host([invalid][keyboard-focused]) #textfield .step-down,:host([invalid][keyboard-focused]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
-)}:host([disabled]) #textfield .buttons,:host([disabled]) #textfield .input,:host([disabled]) #textfield .step-down,:host([disabled]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-disabled,var(
---mod-stepper-border-color-disabled,var(--spectrum-stepper-border-color-disabled)
-)
-)}:host([disabled]) #textfield .step-down,:host([disabled]) #textfield .step-up{background-color:#0000}:host([disabled]) #textfield .buttons{background-color:var(--spectrum-stepper-background-color-disabled)}:host([quiet]) #textfield{border-radius:0;inline-size:var(
---mod-stepper-quiet-width,var(--spectrum-stepper-quiet-width)
-)}:host([quiet]):after{block-size:var(
+)}:host([quiet]) #textfield{border-end-end-radius:0;border-end-start-radius:0;border-start-end-radius:0;border-start-start-radius:0}:host([quiet]) #textfield.hide-stepper .input{border-end-end-radius:0;border-inline-end-width:0}:host([quiet]) #textfield:after{block-size:var(
 --mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)
-);bottom:calc((var(
+);content:"";inline-size:100%;inset-block-end:calc((var(
 --mod-stepper-focus-indicator-gap,
@@ -143,78 +152,39 @@ var(--spectrum-stepper-focus-indicator-gap)
 var(--spectrum-stepper-focus-indicator-width)
-))*-1);content:"";inline-size:100%;left:0;position:absolute}:host([quiet]) .buttons{border-radius:0;border-width:0 0 var(--mod-stepper-border-width,var(--spectrum-stepper-border-width)) 0}:host([quiet]) .step-down,:host([quiet]) .step-up{border-block-start-color:currentColor;border-block-start-style:none;border-inline-color:currentColor;border-inline-style:none;border-radius:0;border-width:0;inline-size:var(
---mod-stepper-quiet-button-width,var(--spectrum-stepper-quiet-button-width)
-);justify-content:flex-end;min-inline-size:0;padding-inline-end:0}:host([quiet]) .step-down:after,:host([quiet]) .step-up:after{block-size:100%;content:"";inline-size:var(
---mod-stepper-button-offset,var(--spectrum-stepper-button-offset)
-);inset-inline-end:calc(var(--mod-stepper-button-offset, var(--spectrum-stepper-button-offset))*-1);position:absolute}:host([quiet]) .buttons,:host([quiet]) .input,:host([quiet]) .step-down,:host([quiet]) .step-up,:host([quiet]:hover) .buttons,:host([quiet]:hover) .step-down,:host([quiet]:hover) .step-up{background-color:#0000}:host([quiet][disabled]) #textfield .buttons,:host([quiet][disabled]) #textfield .input,:host([quiet][disabled]) #textfield .step-down,:host([quiet][disabled]) #textfield .step-up{background-color:#0000;border-color:var(
---highcontrast-stepper-border-color-quiet-disabled,var(
---mod-stepper-border-color-quiet-disabled,var(--spectrum-stepper-border-color-quiet-disabled)
-)
-)}:host([quiet][invalid]) .buttons,:host([quiet][invalid]) .input,:host([quiet][invalid]) .step-down{border-color:var(
---highcontrast-stepper-border-color-invalid-default,var(
---mod-stepper-border-color-invalid-default,var(--spectrum-stepper-border-color-invalid-default)
-)
-)}:host([quiet][invalid]) .step-down,:host([quiet][invalid]) .step-up{background-color:#0000}:host([quiet][focused]) .buttons,:host([quiet][focused]) .input,:host([quiet][focused]) .step-down{border-color:var(
---highcontrast-stepper-border-color-focus,var(
---mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
-)
-)}:host([quiet][focused]) .step-down,:host([quiet][focused]) .step-up{background-color:#0000}:host([quiet][focused]:hover) .buttons,:host([quiet][focused]:hover) .input,:host([quiet][focused]:hover) .step-down,:host([quiet][focused]:hover) .step-up{border-color:var(
---highcontrast-stepper-border-color-focus-hover,var(
---mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
-)
-)}:host([quiet][focused][invalid]) .buttons,:host([quiet][focused][invalid]) .input,:host([quiet][focused][invalid]) .step-down{border-color:var(
---highcontrast-stepper-border-color-invalid-focus,var(
---mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)
-)
-)}:host([quiet][keyboard-focused]) #textfield{outline:none}:host([quiet][keyboard-focused]):after{background-color:var(
+))*-1);inset-inline-start:0;position:absolute}:host([quiet]) #textfield .buttons{border:none}:host([quiet]) #textfield .button{padding:0}:host([quiet]) #textfield .button.step-down .spectrum-InfieldButton-fill{border-block-end-width:var(
+--mod-stepper-border-width,var(--spectrum-stepper-border-width)
+);border-end-end-radius:0;border-end-start-radius:0}:host([quiet]) #textfield .button .spectrum-InfieldButton-fill{justify-content:flex-end}:host([quiet]) #textfield .buttons,:host([quiet]) #textfield .input,:host([quiet]:hover) #textfield .buttons{background-color:#0000}:host([quiet][keyboard-focused]) #textfield{outline:none}:host([quiet][keyboard-focused]) #textfield:after{background-color:var(
 --highcontrast-stepper-focus-indicator-color,var(
 --mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)
 )
-)}:host([quiet][keyboard-focused]) .step-down,:host([quiet][keyboard-focused]) .step-up{background-color:#0000}:host([quiet][keyboard-focused]) .buttons,:host([quiet][keyboard-focused]) .step-down{border-color:var(
---highcontrast-stepper-border-color-keyboard-focus,var(
---mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
-)
-)}:host([quiet][keyboard-focused][invalid]) .buttons,:host([quiet][keyboard-focused][invalid]) .input,:host([quiet][keyboard-focused][invalid]) .step-down{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
 )}#textfield:before{content:""}.buttons{background-color:var(
---highcontrast-stepper-background-color,var(
---mod-stepper-background-color,var(--spectrum-stepper-background-color)
+--highcontrast-stepper-buttons-background-color,var(
+--mod-stepper-buttons-background-color,var(--spectrum-stepper-buttons-background-color)
 )
-);block-size:var(
---mod-stepper-buttons-height,var(--spectrum-stepper-buttons-height)
-);border-color:var(
+);block-size:var(--mod-stepper-height,var(--spectrum-stepper-height));border-color:var(
 --highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
 );border-end-end-radius:var(
 --mod-stepper-border-radius,var(--spectrum-stepper-border-radius)
-);border-end-start-radius:0;border-start-end-radius:var(
+);border-start-end-radius:var(
 --mod-stepper-border-radius,var(--spectrum-stepper-border-radius)
-);border-start-start-radius:0;border-style:solid;border-width:var(
---mod-stepper-border-width,var(--spectrum-stepper-border-width)
-) var(--mod-stepper-border-width,var(--spectrum-stepper-border-width)) var(--mod-stepper-border-width,var(--spectrum-stepper-border-width)) var(--spectrum-stepper-button-border-width-reset);flex-direction:column;inline-size:calc(var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + var(--mod-stepper-button-gap, var(--spectrum-stepper-button-gap))*2);justify-content:center;overflow:hidden;padding-inline-end:var(--spectrum-stepper-button-gap);row-gap:var(--mod-stepper-button-gap,var(--spectrum-stepper-button-gap));transition:border-color var(
+);border-style:var(
+--mod-stepper-buttons-border-style,var(--spectrum-stepper-buttons-border-style)
+);border-width:var(
+--mod-stepper-buttons-border-width,var(--spectrum-stepper-buttons-border-width)
+);border-inline-start-width:0;box-sizing:border-box;display:flex;flex-direction:column;inline-size:var(
+--mod-stepper-button-width,var(--spectrum-stepper-button-width)
+);justify-content:center;transition:border-color var(
 --mod-stepper-animation-duration,var(--spectrum-stepper-animation-duration)
-) ease-in-out}.buttons,.step-down,.step-up{box-sizing:border-box;display:flex}.step-down,.step-up{background-color:var(
---highcontrast-stepper-button-background-color-default,var(
---mod-stepper-button-background-color-default,var(--spectrum-stepper-button-background-color-default)
-)
-);block-size:calc(var(
---mod-stepper-buttons-height,
-var(--spectrum-stepper-buttons-height)
-)/2 - var(--mod-stepper-button-gap, var(--spectrum-stepper-button-gap))*2.5);border-width:0;inline-size:var(
---mod-stepper-button-width,var(--spectrum-stepper-button-width)
-);margin:0;min-inline-size:0;padding-inline-end:var(
---mod-stepper-button-padding,var(--spectrum-stepper-button-padding)
-);padding-inline-start:var(
---mod-stepper-button-padding,var(--spectrum-stepper-button-padding)
-);position:relative}.step-down .stepper-icon,.step-up .stepper-icon{margin:0;margin-inline-start:var(--spectrum-stepper-button-icon-nudge);opacity:1}:host(:hover) .step-down,:host(:hover) .step-up{background-color:var(
---highcontrast-stepper-button-background-color-hover,var(
---mod-stepper-button-background-color-hover,var(--spectrum-stepper-button-background-color-hover)
-)
-)}.step-down:disabled,.step-up:disabled{border-color:#0000}.step-up{border-end-end-radius:0;border-end-start-radius:0;border-start-end-radius:var(--spectrum-stepper-button-border-radius-reset);border-start-start-radius:var(
---spectrum-stepper-button-border-radius-reset
-);padding-block-end:0;padding-block-start:var(
---mod-stepper-icon-nudge-start,var(--spectrum-stepper-icon-nudge-start)
-)}.step-down{border-block-start-color:var(
---highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
-);border-block-start-width:0;border-block-start-width:var(--spectrum-stepper-button-border-width-reset);border-end-end-radius:var(--spectrum-stepper-button-border-radius-reset);border-end-start-radius:var(--spectrum-stepper-button-border-radius-reset);border-start-end-radius:0;border-start-start-radius:0;padding-block-start:0}.textfield{flex:1;inline-size:auto;min-inline-size:0}.input{border-end-end-radius:0;border-inline-end-width:0;border-start-end-radius:0;min-inline-size:0}#textfield.hide-stepper .input{border-end-end-radius:var(
+) ease-in-out}.button.step-up{padding-block-start:calc(var(
+--mod-stepper-button-padding,
+var(--spectrum-stepper-button-padding)
+) - var(
+--mod-stepper-border-width,
+var(--spectrum-stepper-border-width)
+))}.button.step-down{padding-block-end:calc(var(
+--mod-stepper-button-padding,
+var(--spectrum-stepper-button-padding)
+) - var(
+--mod-stepper-border-width,
+var(--spectrum-stepper-border-width)
+))}#textfield.hide-stepper .input{border-end-end-radius:var(
 --mod-stepper-border-radius,var(--spectrum-stepper-border-radius)
@@ -227,10 +197,8 @@ );border-inline-end-width:var(
 --system-spectrum-stepper-border-width
-);--spectrum-stepper-button-border-width-reset:var(
---system-spectrum-stepper-button-border-width-reset
-);--spectrum-stepper-button-icon-nudge:var(
---system-spectrum-stepper-button-icon-nudge
-);--spectrum-stepper-button-gap-reset:var(
---system-spectrum-stepper-button-gap-reset
-);--spectrum-stepper-button-border-radius-reset:var(
---system-spectrum-stepper-button-border-radius-reset
+);--spectrum-stepper-buttons-border-style:var(
+--system-spectrum-stepper-buttons-border-style
+);--spectrum-stepper-buttons-border-width:var(
+--system-spectrum-stepper-buttons-border-width
+);--spectrum-stepper-buttons-background-color:var(
+--system-spectrum-stepper-buttons-background-color
 );--spectrum-stepper-border-color:var(
@@ -246,6 +214,4 @@ --system-spectrum-stepper-border-color
 --system-spectrum-stepper-border-color-keyboard-focus
-);--spectrum-stepper-button-background-color-default:var(
---system-spectrum-stepper-button-background-color-default
-);--spectrum-stepper-button-background-color-hover:var(
---system-spectrum-stepper-button-background-color-hover
+);--spectrum-stepper-button-border-radius-reset:var(
+--system-spectrum-stepper-button-border-radius-reset
 );--spectrum-stepper-button-background-color-focus:var(
@@ -255,8 +221,17 @@ --system-spectrum-stepper-button-background-color-focus
 --system-spectrum-stepper-button-background-color-keyboard-focus
-)}:host{inline-size:var(--mod-stepper-width,var(--spectrum-stepper-width))}:host([size=s]){--spectrum-stepper-width:calc(var(--spectrum-stepper-width-medium)/5*4)}:host([size=l]){--spectrum-stepper-width:calc(var(--spectrum-stepper-width-medium)*1.25)}:host([size=xl]){--spectrum-stepper-width:calc(var(--spectrum-stepper-width-medium)*1.25*1.25)}#textfield{inline-size:100%}sp-field-button{--spectrum-dropdown-height:100%;--spectrum-dropdown-padding-x:0}.input{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.buttons{--mod-actionbutton-background-color-disabled:var(
---spectrum-global-color-gray-200
-);block-size:var(--mod-textfield-height,var(--spectrum-textfield-height));flex-shrink:0;inline-size:calc(var(--mod-textfield-height, var(--spectrum-textfield-height))*3/4);padding-block:var(--spectrum-stepper-button-gap)}.step-down,.step-up{height:50%;overflow:hidden;padding:0;width:100%}.step-down .stepper-icon,.step-up .stepper-icon{margin-inline-start:0;translate:5%}:host([readonly]) .buttons{pointer-events:none;visibility:hidden}:host([hide-stepper]:not([quiet])) .input{border-radius:var(
---spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
-)}: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)}:host([readonly]:not([disabled],[invalid],[focused],[keyboard-focused])) #textfield:hover .input{border-color:transparent}:host([hide-stepper]:not([quiet])) #textfield input{border:var(--spectrum-textfield-border-width) solid var(--spectrum-textfield-border-color);border-radius:var(--spectrum-textfield-corner-radius)}
-`;export default t;
+)}:host([disabled]) #textfield{--spectrum-stepper-buttons-background-color:var(
+--system-spectrum-stepper-disabled-buttons-background-color
+);--spectrum-stepper-buttons-border-width:var(
+--system-spectrum-stepper-disabled-buttons-border-width
+)}:host{--swc-number-field-width:calc(var(--mod-stepper-height, var(--spectrum-stepper-height))*var(
+--mod-stepper-min-width-multiplier,
+var(--spectrum-text-field-minimum-width-multiplier)
+) + var(
+--mod-stepper-button-width,
+var(--spectrum-stepper-button-width)
+) + var(
+--mod-stepper-border-width,
+var(--spectrum-stepper-border-width)
+)*2);--mod-infield-button-border-width:var(--unset-value-resets-inheritance);inline-size:var(--mod-stepper-width,var(--spectrum-stepper-width))}:host([size=s]){--spectrum-stepper-width:calc(var(--swc-number-field-width)/5*4)}:host([size=l]){--spectrum-stepper-width:calc(var(--swc-number-field-width)*1.25)}:host([size=xl]){--spectrum-stepper-width:calc(var(--swc-number-field-width)*1.25*1.25)}#textfield{inline-size:100%}.input{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}:host([readonly]) .buttons{pointer-events:none;visibility:hidden}:host([readonly]:not([disabled],[invalid],[focused],[keyboard-focused])) #textfield:hover .input{border-color:transparent}:host([hide-stepper]:not([quiet])) #textfield input{border:var(--spectrum-textfield-border-width) solid var(--spectrum-textfield-border-color);border-radius:var(--spectrum-textfield-corner-radius)}
+`;export default e;
 //# sourceMappingURL=number-field.css.js.map

src/NumberField.d.ts

 import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
 import { NumberFormatter, NumberParser } from '@internationalized/number';
+import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron50.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js';
-import '@spectrum-web-components/action-button/sp-action-button.js';
+import '@spectrum-web-components/infield-button/sp-infield-button.js';
 import { TextfieldBase } from '@spectrum-web-components/textfield';
@@ -8,0 +9,0 @@ export declare const FRAMES_PER_CHANGE = 5;

src/NumberField.dev.js

@@ -27,6 +27,7 @@ "use strict";
 import { NumberFormatter, NumberParser } from "@internationalized/number";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron50.js";
 import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js";
 import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";
 import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js";
-import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/infield-button/sp-infield-button.js";
 import {
@@ -63,10 +64,8 @@ isAndroid,
   s: (dir) => html`
-        <sp-icon-chevron75
-            slot="icon"
-            class="stepper-icon spectrum-UIIcon-Chevron${dir}75"
-        ></sp-icon-chevron75>
+        <sp-icon-chevron50
+            class="stepper-icon spectrum-UIIcon-Chevron${dir}50"
+        ></sp-icon-chevron50>
     `,
   m: (dir) => html`
         <sp-icon-chevron75
-            slot="icon"
             class="stepper-icon spectrum-UIIcon-Chevron${dir}75"
@@ -77,3 +76,2 @@ ></sp-icon-chevron75>
         <sp-icon-chevron100
-            slot="icon"
             class="stepper-icon spectrum-UIIcon-Chevron${dir}100"
@@ -84,3 +82,2 @@ ></sp-icon-chevron100>
         <sp-icon-chevron200
-            slot="icon"
             class="stepper-icon spectrum-UIIcon-Chevron${dir}200"
@@ -495,6 +492,9 @@ ></sp-icon-chevron200>
                       >
-                          <sp-action-button
-                              class="step-up"
+                          <sp-infield-button
+                              inline="end"
+                              block="start"
+                              class="button step-up"
                               aria-describedby=${this.helpTextId}
                               label=${"Increase " + this.appliedLabel}
+                              size=${this.size}
                               tabindex="-1"
@@ -506,7 +506,10 @@ ?focused=${this.focused}
                               ${chevronIcon[this.size]("Up")}
-                          </sp-action-button>
-                          <sp-action-button
-                              class="step-down"
+                          </sp-infield-button>
+                          <sp-infield-button
+                              inline="end"
+                              block="end"
+                              class="button step-down"
                               aria-describedby=${this.helpTextId}
                               label=${"Decrease " + this.appliedLabel}
+                              size=${this.size}
                               tabindex="-1"
@@ -518,3 +521,3 @@ ?focused=${this.focused}
                               ${chevronIcon[this.size]("Down")}
-                          </sp-action-button>
+                          </sp-infield-button>
                       </span>
@@ -521,0 +524,0 @@ `}

src/NumberField.js

@@ -1,9 +0,7 @@
-"use strict";var g=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var n=(a,l,e,t)=>{for(var s=t>1?void 0:t?y(l,e):l,i=a.length-1,r;i>=0;i--)(r=a[i])&&(s=(t?r(l,e,s):r(s))||s);return t&&s&&g(l,e,s),s};import{html as h,nothing as C}from"@spectrum-web-components/base";import{property as o,query as P}from"@spectrum-web-components/base/src/decorators.js";import{LanguageResolutionController as E,languageResolverUpdatedSymbol as _}from"@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";import{streamingListener as F}from"@spectrum-web-components/base/src/streaming-listener.js";import{NumberFormatter as c,NumberParser as f}from"@internationalized/number";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js";import"@spectrum-web-components/action-button/sp-action-button.js";import{isAndroid as V,isIPhone as v}from"@spectrum-web-components/shared/src/platform.js";import{TextfieldBase as w}from"@spectrum-web-components/textfield";import x from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import I from"./number-field.css.js";export const FRAMES_PER_CHANGE=5,CHANGE_DEBOUNCE_MS=100,indeterminatePlaceholder="-",remapMultiByteCharacters={"\uFF11":"1","\uFF12":"2","\uFF13":"3","\uFF14":"4","\uFF15":"5","\uFF16":"6","\uFF17":"7","\uFF18":"8","\uFF19":"9","\uFF10":"0","\u3001":",","\uFF0C":",","\u3002":".","\uFF0E":".","\uFF05":"%","\uFF0B":"+",\u30FC:"-"};const b={s:a=>h`
-        <sp-icon-chevron75
-            slot="icon"
-            class="stepper-icon spectrum-UIIcon-Chevron${a}75"
-        ></sp-icon-chevron75>
+"use strict";var g=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var n=(a,l,e,t)=>{for(var s=t>1?void 0:t?y(l,e):l,i=a.length-1,r;i>=0;i--)(r=a[i])&&(s=(t?r(l,e,s):r(s))||s);return t&&s&&g(l,e,s),s};import{html as h,nothing as C}from"@spectrum-web-components/base";import{property as o,query as P}from"@spectrum-web-components/base/src/decorators.js";import{LanguageResolutionController as E,languageResolverUpdatedSymbol as _}from"@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";import{streamingListener as F}from"@spectrum-web-components/base/src/streaming-listener.js";import{NumberFormatter as c,NumberParser as f}from"@internationalized/number";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron50.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js";import"@spectrum-web-components/infield-button/sp-infield-button.js";import{isAndroid as V,isIPhone as v}from"@spectrum-web-components/shared/src/platform.js";import{TextfieldBase as w}from"@spectrum-web-components/textfield";import x from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import I from"./number-field.css.js";export const FRAMES_PER_CHANGE=5,CHANGE_DEBOUNCE_MS=100,indeterminatePlaceholder="-",remapMultiByteCharacters={"\uFF11":"1","\uFF12":"2","\uFF13":"3","\uFF14":"4","\uFF15":"5","\uFF16":"6","\uFF17":"7","\uFF18":"8","\uFF19":"9","\uFF10":"0","\u3001":",","\uFF0C":",","\u3002":".","\uFF0E":".","\uFF05":"%","\uFF0B":"+",\u30FC:"-"};const b={s:a=>h`
+        <sp-icon-chevron50
+            class="stepper-icon spectrum-UIIcon-Chevron${a}50"
+        ></sp-icon-chevron50>
     `,m:a=>h`
         <sp-icon-chevron75
-            slot="icon"
             class="stepper-icon spectrum-UIIcon-Chevron${a}75"
@@ -13,3 +11,2 @@ ></sp-icon-chevron75>
         <sp-icon-chevron100
-            slot="icon"
             class="stepper-icon spectrum-UIIcon-Chevron${a}100"
@@ -19,3 +16,2 @@ ></sp-icon-chevron100>
         <sp-icon-chevron200
-            slot="icon"
             class="stepper-icon spectrum-UIIcon-Chevron${a}200"
@@ -32,6 +28,9 @@ ></sp-icon-chevron200>
                       >
-                          <sp-action-button
-                              class="step-up"
+                          <sp-infield-button
+                              inline="end"
+                              block="start"
+                              class="button step-up"
                               aria-describedby=${this.helpTextId}
                               label=${"Increase "+this.appliedLabel}
+                              size=${this.size}
                               tabindex="-1"
@@ -43,7 +42,10 @@ ?focused=${this.focused}
                               ${b[this.size]("Up")}
-                          </sp-action-button>
-                          <sp-action-button
-                              class="step-down"
+                          </sp-infield-button>
+                          <sp-infield-button
+                              inline="end"
+                              block="end"
+                              class="button step-down"
                               aria-describedby=${this.helpTextId}
                               label=${"Decrease "+this.appliedLabel}
+                              size=${this.size}
                               tabindex="-1"
@@ -55,3 +57,3 @@ ?focused=${this.focused}
                               ${b[this.size]("Down")}
-                          </sp-action-button>
+                          </sp-infield-button>
                       </span>
@@ -58,0 +60,0 @@ `}

src/spectrum-config.js

@@ -243,3 +243,2 @@ /*
                 ),
-                converter.classToClass('spectrum-Stepper-stepUp', 'step-up'),
                 converter.classToClass(
@@ -251,2 +250,19 @@ 'spectrum-Stepper-textfield',
                 converter.classToClass('spectrum-Stepper-input', 'input'),
+                converter.classToClass('spectrum-Stepper-button', 'button'),
+                converter.classToClass(
+                    'spectrum-InfieldButton--top',
+                    'step-up'
+                ),
+                converter.classToClass(
+                    'spectrum-InfieldButton--bottom',
+                    'step-down'
+                ),
+                ...converter.enumerateAttributes(
+                    [
+                        ['spectrum-Stepper--sizeS', 's'],
+                        ['spectrum-Stepper--sizeL', 'l'],
+                        ['spectrum-Stepper--sizeXL', 'xl'],
+                    ],
+                    'size'
+                ),
             ],
@@ -253,0 +269,0 @@ },

src/spectrum-number-field.css.dev.js

 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-:host{--spectrum-stepper-width-medium:72px;--spectrum-stepper-width-large:90px;--spectrum-stepper-icon-width-medium:10px;--spectrum-stepper-icon-width-large:12px;--spectrum-stepper-width:var(--spectrum-stepper-width-medium);--spectrum-stepper-icon-width:var(--spectrum-stepper-icon-width-medium);--spectrum-stepper-icon-nudge-start:1px;--spectrum-stepper-button-offset:calc(var(--spectrum-stepper-button-width)/2 - var(--spectrum-stepper-icon-width)/2);--spectrum-stepper-animation-duration:var(
---spectrum-animation-duration-100
-);--spectrum-stepper-buttons-height:var(--spectrum-component-height-100);--spectrum-stepper-border-radius:var(--spectrum-corner-radius-100);--spectrum-stepper-button-width:calc(var(--spectrum-spacing-400) - var(--spectrum-stepper-border-width)*2);--spectrum-stepper-button-gap:var(--spectrum-stepper-button-gap-reset);--spectrum-stepper-background-color:var(--spectrum-gray-50);--spectrum-stepper-background-color-disabled:var(
---spectrum-disabled-background-color
-);--spectrum-stepper-quiet-width:var(--spectrum-component-height-300);--spectrum-stepper-quiet-button-width:var(--spectrum-stepper-button-width);--spectrum-stepper-border-color-disabled:var(
---spectrum-disabled-background-color
-);--spectrum-stepper-border-color-quiet-disabled:var(
---spectrum-disabled-border-color
-);--spectrum-stepper-border-color-invalid-default:var(
---spectrum-negative-border-color-default
-);--spectrum-stepper-border-color-invalid-hover:var(
---spectrum-negative-border-color-hover
-);--spectrum-stepper-border-color-invalid-focus:var(
---spectrum-negative-border-color-focus
-);--spectrum-stepper-border-color-invalid-focus-hover:var(
---spectrum-negative-border-color-focus-hover
-);--spectrum-stepper-border-color-invalid-keyboard-focus:var(
---spectrum-negative-border-color-key-focus
-);--spectrum-stepper-focus-indicator-width:var(
+:host{--spectrum-stepper-height:var(--spectrum-component-height-100);--spectrum-stepper-border-radius:var(--spectrum-corner-radius-100);--spectrum-stepper-button-width:var(
+--spectrum-in-field-button-width-stacked-medium
+);--spectrum-stepper-button-padding:var(
+--spectrum-in-field-button-edge-to-fill
+);--spectrum-stepper-width:calc(var(--mod-stepper-height, var(--spectrum-stepper-height))*var(
+--mod-stepper-min-width-multiplier,
+var(--spectrum-text-field-minimum-width-multiplier)
+) + var(
+--mod-stepper-button-width,
+var(--spectrum-stepper-button-width)
+) + var(
+--mod-stepper-border-width,
+var(--spectrum-stepper-border-width)
+)*2);--spectrum-stepper-focus-indicator-width:var(
 --spectrum-focus-indicator-thickness
 );--spectrum-stepper-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-stepper-focus-indicator-color:var(
 --spectrum-focus-indicator-color
-)}#textfield .spectrum--medium{--spectrum-stepper-width:var(--spectrum-stepper-width-medium);--spectrum-stepper-icon-width:var(--spectrum-stepper-icon-width-medium);--spectrum-stepper-button-padding:calc(var(--spectrum-spacing-200)/2)}#textfield .spectrum--large{--spectrum-stepper-width:var(--spectrum-stepper-width-large);--spectrum-stepper-icon-width:var(--spectrum-stepper-icon-width-large);--spectrum-stepper-button-padding:calc(var(--spectrum-spacing-100)/2)}@media (forced-colors:active){:host{--highcontrast-stepper-border-color:CanvasText;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:CanvasText;--highcontrast-stepper-border-color-disabled:GrayText;--highcontrast-stepper-border-color-quiet-disabled:GrayText;--highcontrast-stepper-border-color-invalid-default:Highlight;--highcontrast-stepper-border-color-invalid-hover:Highlight;--highcontrast-stepper-border-color-invalid-focus:Highlight;--highcontrast-stepper-border-color-invalid-focus-hover:Highlight;--highcontrast-stepper-border-color-invalid-keyboard-focus:Highlight;--highcontrast-stepper-button-background-color-default:Canvas;--highcontrast-stepper-button-background-color-hover:Canvas;--highcontrast-stepper-button-background-color-focus:Canvas;--highcontrast-stepper-button-background-color-keyboard-focus:Canvas;--highcontrast-stepper-focus-indicator-color:Highlight}}.x{border-radius:var(--spectrum-stepper-button-border-radius-reset)}#textfield{border-radius:var(
+);--spectrum-stepper-button-offset:calc(var(--spectrum-stepper-button-width)/2);--spectrum-stepper-animation-duration:var(
+--spectrum-animation-duration-100
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
+);--mod-infield-button-border-width:var(
+--mod-stepper-border-width,var(--spectrum-stepper-border-width)
+);--mod-textfield-border-width:var(
+--mod-stepper-border-width,var(--spectrum-stepper-border-width)
+)}:host([size=s]) #textfield{--spectrum-stepper-button-width:var(
+--spectrum-in-field-button-width-stacked-small
+);--spectrum-stepper-height:var(--spectrum-component-height-75)}:host([size=l]) #textfield{--spectrum-stepper-button-width:var(
+--spectrum-in-field-button-width-stacked-large
+);--spectrum-stepper-height:var(--spectrum-component-height-200)}:host([size=xl]) #textfield{--spectrum-stepper-button-width:var(
+--spectrum-in-field-button-width-stacked-extra-large
+);--spectrum-stepper-height:var(--spectrum-component-height-300)}:host([quiet]) #textfield{--mod-infield-button-width-stacked:var(
+--mod-stepper-button-width-quiet,var(--spectrum-stepper-button-width)
+);--mod-textfield-focus-indicator-color:transparent}:host([disabled]) #textfield{--mod-infield-button-border-color-quiet-disabled:var(
+--spectrum-disabled-border-color
+)}:host([invalid]) #textfield{--mod-stepper-border-color:var(
+--mod-stepper-border-color-invalid,var(--spectrum-negative-border-color-default)
+);--mod-stepper-border-color-hover:var(
+--mod-stepper-border-color-hover-invalid,var(--spectrum-negative-border-color-hover)
+);--mod-stepper-border-color-focus:var(
+--mod-stepper-border-color-focus-invalid,var(--spectrum-negative-border-color-focus)
+);--mod-stepper-border-color-focus-hover:var(
+--mod-stepper-border-color-focus-hover-invalid,var(--spectrum-negative-border-color-focus-hover)
+);--mod-stepper-border-color-keyboard-focus:var(
+--mod-stepper-border-color-keyboard-focus-invalid,var(--spectrum-negative-border-color-key-focus)
+);--mod-infield-button-border-color:var(
+--mod-stepper-border-color-invalid,var(--spectrum-negative-border-color-default)
+)}@media (forced-colors:active){:host{--highcontrast-stepper-border-color:CanvasText;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:CanvasText;--highcontrast-stepper-button-background-color-default:Canvas;--highcontrast-stepper-button-background-color-hover:Canvas;--highcontrast-stepper-button-background-color-focus:Canvas;--highcontrast-stepper-button-background-color-keyboard-focus:Canvas;--highcontrast-stepper-focus-indicator-color:Highlight}:host([disabled]) #textfield{--highcontrast-stepper-border-color:GrayText}:host([invalid]) #textfield{--highcontrast-stepper-border-color:Highlight;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:Highlight}}.x{border-radius:var(--spectrum-stepper-button-border-radius-reset)}#textfield{block-size:var(--mod-stepper-height,var(--spectrum-stepper-height));border-radius:var(
 --mod-stepper-border-radius,var(--spectrum-stepper-border-radius)
-);display:inline-flex;flex-flow:row;inline-size:var(--mod-stepper-width,var(--spectrum-stepper-width));line-height:0;position:relative}:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .buttons,:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .input,:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .step-down,:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .step-up{border-color:var(
+);display:inline-flex;flex-flow:row;inline-size:var(--mod-stepper-width,var(--spectrum-stepper-width));position:relative}#textfield,#textfield .input{border-color:var(
+--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
+)}#textfield .input{border-end-end-radius:0;border-inline-end-width:0;border-start-end-radius:0}:host(:hover:not([disabled])) #textfield{--mod-infield-button-border-color:var(
 --highcontrast-stepper-border-color-hover,var(
 --mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
 )
-)}:host([focused]) #textfield .input{outline:none}:host([focused]) #textfield .buttons,:host([focused]) #textfield .input,:host([focused]) #textfield .step-down,:host([focused]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-focus,var(
---mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
+)}:host(:hover:not([disabled])) #textfield .buttons,:host(:hover:not([disabled])) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-hover,var(
+--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
 )
-)}:host([focused]) #textfield .step-down,:host([focused]) #textfield .step-up{background-color:var(
+)}#textfield:focus,:host([focused]) #textfield{--mod-infield-button-background-color:var(
 --highcontrast-stepper-button-background-color-focus,var(
 --mod-stepper-button-background-color-focus,var(--spectrum-stepper-button-background-color-focus)
 )
-)}:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input,:host([focused]:hover) #textfield .step-down,:host([focused]:hover) #textfield .step-up{border-color:var(
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-focus,var(
+--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
+)
+)}#textfield:focus .input,:host([focused]) #textfield .input{outline:none}#textfield:focus .buttons,#textfield:focus .input,:host([focused]) #textfield .buttons,:host([focused]) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-focus,var(
+--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
+)
+)}:host(:hover) #textfield:focus,:host([focused]:hover) #textfield{--mod-infield-button-border-color:var(
 --highcontrast-stepper-border-color-focus-hover,var(
 --mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
 )
-)}:host([focused][invalid]) #textfield .buttons,:host([focused][invalid]) #textfield .input,:host([focused][invalid]) #textfield .step-down,:host([focused][invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-focus,var(
---mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)
+)}:host(:hover) #textfield:focus .buttons,:host(:hover) #textfield:focus .input,:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-focus-hover,var(
+--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
 )
-)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{outline:var(
+)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{--mod-infield-button-background-color:var(
+--highcontrast-stepper-button-background-color-keyboard-focus,var(
+--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
+)
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-keyboard-focus,var(
+--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
+)
+);outline:var(
 --mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)
@@ -56,3 +99,11 @@ ) solid;outline-color:var(
 --mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)
-)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{outline:var(
+)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{--mod-infield-button-background-color:var(
+--highcontrast-stepper-button-background-color-keyboard-focus,var(
+--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
+)
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-keyboard-focus,var(
+--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
+)
+);outline:var(
 --mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)
@@ -65,3 +116,11 @@ ) solid;outline-color:var(
 --mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)
-)}#textfield:focus-visible,:host([keyboard-focused]) #textfield{outline:var(
+)}#textfield:focus-visible,:host([keyboard-focused]) #textfield{--mod-infield-button-background-color:var(
+--highcontrast-stepper-button-background-color-keyboard-focus,var(
+--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
+)
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-keyboard-focus,var(
+--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
+)
+);outline:var(
 --mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)
@@ -74,67 +133,17 @@ ) solid;outline-color:var(
 --mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)
-)}#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield:focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield.focus-visible .buttons,#textfield.focus-visible .input,#textfield.focus-visible .step-down,#textfield.focus-visible .step-up,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{border-color:var(
+)}#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield:focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield.focus-visible .buttons,#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{border-color:var(
 --highcontrast-stepper-border-color-keyboard-focus,var(
 --mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
 )
-)}#textfield.focus-visible .buttons,#textfield.focus-visible .input,#textfield.focus-visible .step-down,#textfield.focus-visible .step-up,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{border-color:var(
+)}#textfield.focus-visible .buttons,#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{border-color:var(
 --highcontrast-stepper-border-color-keyboard-focus,var(
 --mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
 )
-)}#textfield:focus-visible .buttons,#textfield:focus-visible .input,#textfield:focus-visible .step-down,#textfield:focus-visible .step-up,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{border-color:var(
+)}#textfield:focus-visible .buttons,#textfield:focus-visible .input,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{border-color:var(
 --highcontrast-stepper-border-color-keyboard-focus,var(
 --mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
 )
-)}#textfield.focus-visible .step-down,#textfield.focus-visible .step-up,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{background-color:var(
---highcontrast-stepper-button-background-color-keyboard-focus,var(
---mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
-)
-)}#textfield.focus-visible .step-down,#textfield.focus-visible .step-up,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{background-color:var(
---highcontrast-stepper-button-background-color-keyboard-focus,var(
---mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
-)
-)}#textfield:focus-visible .step-down,#textfield:focus-visible .step-up,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{background-color:var(
---highcontrast-stepper-button-background-color-keyboard-focus,var(
---mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
-)
-)}:host([invalid]) #textfield.focus-visible .buttons,:host([invalid]) #textfield.focus-visible .input,:host([invalid]) #textfield.focus-visible .step-down,:host([invalid]) #textfield.focus-visible .step-up,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .step-down,:host([keyboard-focused][invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
-)}:host([invalid]) #textfield.focus-visible .buttons,:host([invalid]) #textfield.focus-visible .input,:host([invalid]) #textfield.focus-visible .step-down,:host([invalid]) #textfield.focus-visible .step-up,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .step-down,:host([keyboard-focused][invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
-)}:host([invalid]) #textfield:focus-visible .buttons,:host([invalid]) #textfield:focus-visible .input,:host([invalid]) #textfield:focus-visible .step-down,:host([invalid]) #textfield:focus-visible .step-up,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .step-down,:host([keyboard-focused][invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
-)}:host([invalid]) #textfield .buttons,:host([invalid]) #textfield .input,:host([invalid]) #textfield .step-down,:host([invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-default,var(
---mod-stepper-border-color-invalid-default,var(--spectrum-stepper-border-color-invalid-default)
-)
-)}:host([invalid]:hover) #textfield .buttons,:host([invalid]:hover) #textfield .input,:host([invalid]:hover) #textfield .step-down,:host([invalid]:hover) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-hover,var(
---mod-stepper-border-color-invalid-hover,var(--spectrum-stepper-border-color-invalid-hover)
-)
-)}:host([invalid][focused]) #textfield .buttons,:host([invalid][focused]) #textfield .input,:host([invalid][focused]) #textfield .step-down,:host([invalid][focused]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-focus,var(
---mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)
-)
-)}:host([invalid][focused]:hover) #textfield .buttons,:host([invalid][focused]:hover) #textfield .input,:host([invalid][focused]:hover) #textfield .step-down,:host([invalid][focused]:hover) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-focus-hover,var(
---mod-stepper-border-color-invalid-focus-hover,var(--spectrum-stepper-border-color-invalid-focus-hover)
-)
-)}:host([invalid][keyboard-focused]) #textfield .buttons,:host([invalid][keyboard-focused]) #textfield .input,:host([invalid][keyboard-focused]) #textfield .step-down,:host([invalid][keyboard-focused]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
-)}:host([disabled]) #textfield .buttons,:host([disabled]) #textfield .input,:host([disabled]) #textfield .step-down,:host([disabled]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-disabled,var(
---mod-stepper-border-color-disabled,var(--spectrum-stepper-border-color-disabled)
-)
-)}:host([disabled]) #textfield .step-down,:host([disabled]) #textfield .step-up{background-color:#0000}:host([disabled]) #textfield .buttons{background-color:var(--spectrum-stepper-background-color-disabled)}:host([quiet]) #textfield{border-radius:0;inline-size:var(
---mod-stepper-quiet-width,var(--spectrum-stepper-quiet-width)
-)}:host([quiet]):after{block-size:var(
+)}:host([quiet]) #textfield{border-end-end-radius:0;border-end-start-radius:0;border-start-end-radius:0;border-start-start-radius:0}:host([quiet]) #textfield.hide-stepper .input{border-end-end-radius:0;border-inline-end-width:0}:host([quiet]) #textfield:after{block-size:var(
 --mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)
-);bottom:calc((var(
+);content:"";inline-size:100%;inset-block-end:calc((var(
 --mod-stepper-focus-indicator-gap,
@@ -145,78 +154,39 @@ var(--spectrum-stepper-focus-indicator-gap)
 var(--spectrum-stepper-focus-indicator-width)
-))*-1);content:"";inline-size:100%;left:0;position:absolute}:host([quiet]) .buttons{border-radius:0;border-width:0 0 var(--mod-stepper-border-width,var(--spectrum-stepper-border-width)) 0}:host([quiet]) .step-down,:host([quiet]) .step-up{border-block-start-color:currentColor;border-block-start-style:none;border-inline-color:currentColor;border-inline-style:none;border-radius:0;border-width:0;inline-size:var(
---mod-stepper-quiet-button-width,var(--spectrum-stepper-quiet-button-width)
-);justify-content:flex-end;min-inline-size:0;padding-inline-end:0}:host([quiet]) .step-down:after,:host([quiet]) .step-up:after{block-size:100%;content:"";inline-size:var(
---mod-stepper-button-offset,var(--spectrum-stepper-button-offset)
-);inset-inline-end:calc(var(--mod-stepper-button-offset, var(--spectrum-stepper-button-offset))*-1);position:absolute}:host([quiet]) .buttons,:host([quiet]) .input,:host([quiet]) .step-down,:host([quiet]) .step-up,:host([quiet]:hover) .buttons,:host([quiet]:hover) .step-down,:host([quiet]:hover) .step-up{background-color:#0000}:host([quiet][disabled]) #textfield .buttons,:host([quiet][disabled]) #textfield .input,:host([quiet][disabled]) #textfield .step-down,:host([quiet][disabled]) #textfield .step-up{background-color:#0000;border-color:var(
---highcontrast-stepper-border-color-quiet-disabled,var(
---mod-stepper-border-color-quiet-disabled,var(--spectrum-stepper-border-color-quiet-disabled)
-)
-)}:host([quiet][invalid]) .buttons,:host([quiet][invalid]) .input,:host([quiet][invalid]) .step-down{border-color:var(
---highcontrast-stepper-border-color-invalid-default,var(
---mod-stepper-border-color-invalid-default,var(--spectrum-stepper-border-color-invalid-default)
-)
-)}:host([quiet][invalid]) .step-down,:host([quiet][invalid]) .step-up{background-color:#0000}:host([quiet][focused]) .buttons,:host([quiet][focused]) .input,:host([quiet][focused]) .step-down{border-color:var(
---highcontrast-stepper-border-color-focus,var(
---mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
-)
-)}:host([quiet][focused]) .step-down,:host([quiet][focused]) .step-up{background-color:#0000}:host([quiet][focused]:hover) .buttons,:host([quiet][focused]:hover) .input,:host([quiet][focused]:hover) .step-down,:host([quiet][focused]:hover) .step-up{border-color:var(
---highcontrast-stepper-border-color-focus-hover,var(
---mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
-)
-)}:host([quiet][focused][invalid]) .buttons,:host([quiet][focused][invalid]) .input,:host([quiet][focused][invalid]) .step-down{border-color:var(
---highcontrast-stepper-border-color-invalid-focus,var(
---mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)
-)
-)}:host([quiet][keyboard-focused]) #textfield{outline:none}:host([quiet][keyboard-focused]):after{background-color:var(
+))*-1);inset-inline-start:0;position:absolute}:host([quiet]) #textfield .buttons{border:none}:host([quiet]) #textfield .button{padding:0}:host([quiet]) #textfield .button.step-down .spectrum-InfieldButton-fill{border-block-end-width:var(
+--mod-stepper-border-width,var(--spectrum-stepper-border-width)
+);border-end-end-radius:0;border-end-start-radius:0}:host([quiet]) #textfield .button .spectrum-InfieldButton-fill{justify-content:flex-end}:host([quiet]) #textfield .buttons,:host([quiet]) #textfield .input,:host([quiet]:hover) #textfield .buttons{background-color:#0000}:host([quiet][keyboard-focused]) #textfield{outline:none}:host([quiet][keyboard-focused]) #textfield:after{background-color:var(
 --highcontrast-stepper-focus-indicator-color,var(
 --mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)
 )
-)}:host([quiet][keyboard-focused]) .step-down,:host([quiet][keyboard-focused]) .step-up{background-color:#0000}:host([quiet][keyboard-focused]) .buttons,:host([quiet][keyboard-focused]) .step-down{border-color:var(
---highcontrast-stepper-border-color-keyboard-focus,var(
---mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
-)
-)}:host([quiet][keyboard-focused][invalid]) .buttons,:host([quiet][keyboard-focused][invalid]) .input,:host([quiet][keyboard-focused][invalid]) .step-down{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
 )}#textfield:before{content:""}.buttons{background-color:var(
---highcontrast-stepper-background-color,var(
---mod-stepper-background-color,var(--spectrum-stepper-background-color)
+--highcontrast-stepper-buttons-background-color,var(
+--mod-stepper-buttons-background-color,var(--spectrum-stepper-buttons-background-color)
 )
-);block-size:var(
---mod-stepper-buttons-height,var(--spectrum-stepper-buttons-height)
-);border-color:var(
+);block-size:var(--mod-stepper-height,var(--spectrum-stepper-height));border-color:var(
 --highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
 );border-end-end-radius:var(
 --mod-stepper-border-radius,var(--spectrum-stepper-border-radius)
-);border-end-start-radius:0;border-start-end-radius:var(
+);border-start-end-radius:var(
 --mod-stepper-border-radius,var(--spectrum-stepper-border-radius)
-);border-start-start-radius:0;border-style:solid;border-width:var(
---mod-stepper-border-width,var(--spectrum-stepper-border-width)
-) var(--mod-stepper-border-width,var(--spectrum-stepper-border-width)) var(--mod-stepper-border-width,var(--spectrum-stepper-border-width)) var(--spectrum-stepper-button-border-width-reset);flex-direction:column;inline-size:calc(var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + var(--mod-stepper-button-gap, var(--spectrum-stepper-button-gap))*2);justify-content:center;overflow:hidden;padding-inline-end:var(--spectrum-stepper-button-gap);row-gap:var(--mod-stepper-button-gap,var(--spectrum-stepper-button-gap));transition:border-color var(
+);border-style:var(
+--mod-stepper-buttons-border-style,var(--spectrum-stepper-buttons-border-style)
+);border-width:var(
+--mod-stepper-buttons-border-width,var(--spectrum-stepper-buttons-border-width)
+);border-inline-start-width:0;box-sizing:border-box;display:flex;flex-direction:column;inline-size:var(
+--mod-stepper-button-width,var(--spectrum-stepper-button-width)
+);justify-content:center;transition:border-color var(
 --mod-stepper-animation-duration,var(--spectrum-stepper-animation-duration)
-) ease-in-out}.buttons,.step-down,.step-up{box-sizing:border-box;display:flex}.step-down,.step-up{background-color:var(
---highcontrast-stepper-button-background-color-default,var(
---mod-stepper-button-background-color-default,var(--spectrum-stepper-button-background-color-default)
-)
-);block-size:calc(var(
---mod-stepper-buttons-height,
-var(--spectrum-stepper-buttons-height)
-)/2 - var(--mod-stepper-button-gap, var(--spectrum-stepper-button-gap))*2.5);border-width:0;inline-size:var(
---mod-stepper-button-width,var(--spectrum-stepper-button-width)
-);margin:0;min-inline-size:0;padding-inline-end:var(
---mod-stepper-button-padding,var(--spectrum-stepper-button-padding)
-);padding-inline-start:var(
---mod-stepper-button-padding,var(--spectrum-stepper-button-padding)
-);position:relative}.step-down .stepper-icon,.step-up .stepper-icon{margin:0;margin-inline-start:var(--spectrum-stepper-button-icon-nudge);opacity:1}:host(:hover) .step-down,:host(:hover) .step-up{background-color:var(
---highcontrast-stepper-button-background-color-hover,var(
---mod-stepper-button-background-color-hover,var(--spectrum-stepper-button-background-color-hover)
-)
-)}.step-down:disabled,.step-up:disabled{border-color:#0000}.step-up{border-end-end-radius:0;border-end-start-radius:0;border-start-end-radius:var(--spectrum-stepper-button-border-radius-reset);border-start-start-radius:var(
---spectrum-stepper-button-border-radius-reset
-);padding-block-end:0;padding-block-start:var(
---mod-stepper-icon-nudge-start,var(--spectrum-stepper-icon-nudge-start)
-)}.step-down{border-block-start-color:var(
---highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
-);border-block-start-width:0;border-block-start-width:var(--spectrum-stepper-button-border-width-reset);border-end-end-radius:var(--spectrum-stepper-button-border-radius-reset);border-end-start-radius:var(--spectrum-stepper-button-border-radius-reset);border-start-end-radius:0;border-start-start-radius:0;padding-block-start:0}.textfield{flex:1;inline-size:auto;min-inline-size:0}.input{border-end-end-radius:0;border-inline-end-width:0;border-start-end-radius:0;min-inline-size:0}#textfield.hide-stepper .input{border-end-end-radius:var(
+) ease-in-out}.button.step-up{padding-block-start:calc(var(
+--mod-stepper-button-padding,
+var(--spectrum-stepper-button-padding)
+) - var(
+--mod-stepper-border-width,
+var(--spectrum-stepper-border-width)
+))}.button.step-down{padding-block-end:calc(var(
+--mod-stepper-button-padding,
+var(--spectrum-stepper-button-padding)
+) - var(
+--mod-stepper-border-width,
+var(--spectrum-stepper-border-width)
+))}#textfield.hide-stepper .input{border-end-end-radius:var(
 --mod-stepper-border-radius,var(--spectrum-stepper-border-radius)
@@ -229,10 +199,8 @@ );border-inline-end-width:var(
 --system-spectrum-stepper-border-width
-);--spectrum-stepper-button-border-width-reset:var(
---system-spectrum-stepper-button-border-width-reset
-);--spectrum-stepper-button-icon-nudge:var(
---system-spectrum-stepper-button-icon-nudge
-);--spectrum-stepper-button-gap-reset:var(
---system-spectrum-stepper-button-gap-reset
-);--spectrum-stepper-button-border-radius-reset:var(
---system-spectrum-stepper-button-border-radius-reset
+);--spectrum-stepper-buttons-border-style:var(
+--system-spectrum-stepper-buttons-border-style
+);--spectrum-stepper-buttons-border-width:var(
+--system-spectrum-stepper-buttons-border-width
+);--spectrum-stepper-buttons-background-color:var(
+--system-spectrum-stepper-buttons-background-color
 );--spectrum-stepper-border-color:var(
@@ -248,6 +216,4 @@ --system-spectrum-stepper-border-color
 --system-spectrum-stepper-border-color-keyboard-focus
-);--spectrum-stepper-button-background-color-default:var(
---system-spectrum-stepper-button-background-color-default
-);--spectrum-stepper-button-background-color-hover:var(
---system-spectrum-stepper-button-background-color-hover
+);--spectrum-stepper-button-border-radius-reset:var(
+--system-spectrum-stepper-button-border-radius-reset
 );--spectrum-stepper-button-background-color-focus:var(
@@ -257,2 +223,6 @@ --system-spectrum-stepper-button-background-color-focus
 --system-spectrum-stepper-button-background-color-keyboard-focus
+)}:host([disabled]) #textfield{--spectrum-stepper-buttons-background-color:var(
+--system-spectrum-stepper-disabled-buttons-background-color
+);--spectrum-stepper-buttons-border-width:var(
+--system-spectrum-stepper-disabled-buttons-border-width
 )}
@@ -259,0 +229,0 @@ `;

src/spectrum-number-field.css.js

@@ -1,47 +0,90 @@
-"use strict";import{css as e}from"@spectrum-web-components/base";const r=e`
-:host{--spectrum-stepper-width-medium:72px;--spectrum-stepper-width-large:90px;--spectrum-stepper-icon-width-medium:10px;--spectrum-stepper-icon-width-large:12px;--spectrum-stepper-width:var(--spectrum-stepper-width-medium);--spectrum-stepper-icon-width:var(--spectrum-stepper-icon-width-medium);--spectrum-stepper-icon-nudge-start:1px;--spectrum-stepper-button-offset:calc(var(--spectrum-stepper-button-width)/2 - var(--spectrum-stepper-icon-width)/2);--spectrum-stepper-animation-duration:var(
---spectrum-animation-duration-100
-);--spectrum-stepper-buttons-height:var(--spectrum-component-height-100);--spectrum-stepper-border-radius:var(--spectrum-corner-radius-100);--spectrum-stepper-button-width:calc(var(--spectrum-spacing-400) - var(--spectrum-stepper-border-width)*2);--spectrum-stepper-button-gap:var(--spectrum-stepper-button-gap-reset);--spectrum-stepper-background-color:var(--spectrum-gray-50);--spectrum-stepper-background-color-disabled:var(
---spectrum-disabled-background-color
-);--spectrum-stepper-quiet-width:var(--spectrum-component-height-300);--spectrum-stepper-quiet-button-width:var(--spectrum-stepper-button-width);--spectrum-stepper-border-color-disabled:var(
---spectrum-disabled-background-color
-);--spectrum-stepper-border-color-quiet-disabled:var(
---spectrum-disabled-border-color
-);--spectrum-stepper-border-color-invalid-default:var(
---spectrum-negative-border-color-default
-);--spectrum-stepper-border-color-invalid-hover:var(
---spectrum-negative-border-color-hover
-);--spectrum-stepper-border-color-invalid-focus:var(
---spectrum-negative-border-color-focus
-);--spectrum-stepper-border-color-invalid-focus-hover:var(
---spectrum-negative-border-color-focus-hover
-);--spectrum-stepper-border-color-invalid-keyboard-focus:var(
---spectrum-negative-border-color-key-focus
-);--spectrum-stepper-focus-indicator-width:var(
+"use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
+:host{--spectrum-stepper-height:var(--spectrum-component-height-100);--spectrum-stepper-border-radius:var(--spectrum-corner-radius-100);--spectrum-stepper-button-width:var(
+--spectrum-in-field-button-width-stacked-medium
+);--spectrum-stepper-button-padding:var(
+--spectrum-in-field-button-edge-to-fill
+);--spectrum-stepper-width:calc(var(--mod-stepper-height, var(--spectrum-stepper-height))*var(
+--mod-stepper-min-width-multiplier,
+var(--spectrum-text-field-minimum-width-multiplier)
+) + var(
+--mod-stepper-button-width,
+var(--spectrum-stepper-button-width)
+) + var(
+--mod-stepper-border-width,
+var(--spectrum-stepper-border-width)
+)*2);--spectrum-stepper-focus-indicator-width:var(
 --spectrum-focus-indicator-thickness
 );--spectrum-stepper-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-stepper-focus-indicator-color:var(
 --spectrum-focus-indicator-color
-)}#textfield .spectrum--medium{--spectrum-stepper-width:var(--spectrum-stepper-width-medium);--spectrum-stepper-icon-width:var(--spectrum-stepper-icon-width-medium);--spectrum-stepper-button-padding:calc(var(--spectrum-spacing-200)/2)}#textfield .spectrum--large{--spectrum-stepper-width:var(--spectrum-stepper-width-large);--spectrum-stepper-icon-width:var(--spectrum-stepper-icon-width-large);--spectrum-stepper-button-padding:calc(var(--spectrum-spacing-100)/2)}@media (forced-colors:active){:host{--highcontrast-stepper-border-color:CanvasText;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:CanvasText;--highcontrast-stepper-border-color-disabled:GrayText;--highcontrast-stepper-border-color-quiet-disabled:GrayText;--highcontrast-stepper-border-color-invalid-default:Highlight;--highcontrast-stepper-border-color-invalid-hover:Highlight;--highcontrast-stepper-border-color-invalid-focus:Highlight;--highcontrast-stepper-border-color-invalid-focus-hover:Highlight;--highcontrast-stepper-border-color-invalid-keyboard-focus:Highlight;--highcontrast-stepper-button-background-color-default:Canvas;--highcontrast-stepper-button-background-color-hover:Canvas;--highcontrast-stepper-button-background-color-focus:Canvas;--highcontrast-stepper-button-background-color-keyboard-focus:Canvas;--highcontrast-stepper-focus-indicator-color:Highlight}}.x{border-radius:var(--spectrum-stepper-button-border-radius-reset)}#textfield{border-radius:var(
+);--spectrum-stepper-button-offset:calc(var(--spectrum-stepper-button-width)/2);--spectrum-stepper-animation-duration:var(
+--spectrum-animation-duration-100
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
+);--mod-infield-button-border-width:var(
+--mod-stepper-border-width,var(--spectrum-stepper-border-width)
+);--mod-textfield-border-width:var(
+--mod-stepper-border-width,var(--spectrum-stepper-border-width)
+)}:host([size=s]) #textfield{--spectrum-stepper-button-width:var(
+--spectrum-in-field-button-width-stacked-small
+);--spectrum-stepper-height:var(--spectrum-component-height-75)}:host([size=l]) #textfield{--spectrum-stepper-button-width:var(
+--spectrum-in-field-button-width-stacked-large
+);--spectrum-stepper-height:var(--spectrum-component-height-200)}:host([size=xl]) #textfield{--spectrum-stepper-button-width:var(
+--spectrum-in-field-button-width-stacked-extra-large
+);--spectrum-stepper-height:var(--spectrum-component-height-300)}:host([quiet]) #textfield{--mod-infield-button-width-stacked:var(
+--mod-stepper-button-width-quiet,var(--spectrum-stepper-button-width)
+);--mod-textfield-focus-indicator-color:transparent}:host([disabled]) #textfield{--mod-infield-button-border-color-quiet-disabled:var(
+--spectrum-disabled-border-color
+)}:host([invalid]) #textfield{--mod-stepper-border-color:var(
+--mod-stepper-border-color-invalid,var(--spectrum-negative-border-color-default)
+);--mod-stepper-border-color-hover:var(
+--mod-stepper-border-color-hover-invalid,var(--spectrum-negative-border-color-hover)
+);--mod-stepper-border-color-focus:var(
+--mod-stepper-border-color-focus-invalid,var(--spectrum-negative-border-color-focus)
+);--mod-stepper-border-color-focus-hover:var(
+--mod-stepper-border-color-focus-hover-invalid,var(--spectrum-negative-border-color-focus-hover)
+);--mod-stepper-border-color-keyboard-focus:var(
+--mod-stepper-border-color-keyboard-focus-invalid,var(--spectrum-negative-border-color-key-focus)
+);--mod-infield-button-border-color:var(
+--mod-stepper-border-color-invalid,var(--spectrum-negative-border-color-default)
+)}@media (forced-colors:active){:host{--highcontrast-stepper-border-color:CanvasText;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:CanvasText;--highcontrast-stepper-button-background-color-default:Canvas;--highcontrast-stepper-button-background-color-hover:Canvas;--highcontrast-stepper-button-background-color-focus:Canvas;--highcontrast-stepper-button-background-color-keyboard-focus:Canvas;--highcontrast-stepper-focus-indicator-color:Highlight}:host([disabled]) #textfield{--highcontrast-stepper-border-color:GrayText}:host([invalid]) #textfield{--highcontrast-stepper-border-color:Highlight;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:Highlight}}.x{border-radius:var(--spectrum-stepper-button-border-radius-reset)}#textfield{block-size:var(--mod-stepper-height,var(--spectrum-stepper-height));border-radius:var(
 --mod-stepper-border-radius,var(--spectrum-stepper-border-radius)
-);display:inline-flex;flex-flow:row;inline-size:var(--mod-stepper-width,var(--spectrum-stepper-width));line-height:0;position:relative}:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .buttons,:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .input,:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .step-down,:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .step-up{border-color:var(
+);display:inline-flex;flex-flow:row;inline-size:var(--mod-stepper-width,var(--spectrum-stepper-width));position:relative}#textfield,#textfield .input{border-color:var(
+--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
+)}#textfield .input{border-end-end-radius:0;border-inline-end-width:0;border-start-end-radius:0}:host(:hover:not([disabled])) #textfield{--mod-infield-button-border-color:var(
 --highcontrast-stepper-border-color-hover,var(
 --mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
 )
-)}:host([focused]) #textfield .input{outline:none}:host([focused]) #textfield .buttons,:host([focused]) #textfield .input,:host([focused]) #textfield .step-down,:host([focused]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-focus,var(
---mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
+)}:host(:hover:not([disabled])) #textfield .buttons,:host(:hover:not([disabled])) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-hover,var(
+--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
 )
-)}:host([focused]) #textfield .step-down,:host([focused]) #textfield .step-up{background-color:var(
+)}#textfield:focus,:host([focused]) #textfield{--mod-infield-button-background-color:var(
 --highcontrast-stepper-button-background-color-focus,var(
 --mod-stepper-button-background-color-focus,var(--spectrum-stepper-button-background-color-focus)
 )
-)}:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input,:host([focused]:hover) #textfield .step-down,:host([focused]:hover) #textfield .step-up{border-color:var(
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-focus,var(
+--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
+)
+)}#textfield:focus .input,:host([focused]) #textfield .input{outline:none}#textfield:focus .buttons,#textfield:focus .input,:host([focused]) #textfield .buttons,:host([focused]) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-focus,var(
+--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
+)
+)}:host(:hover) #textfield:focus,:host([focused]:hover) #textfield{--mod-infield-button-border-color:var(
 --highcontrast-stepper-border-color-focus-hover,var(
 --mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
 )
-)}:host([focused][invalid]) #textfield .buttons,:host([focused][invalid]) #textfield .input,:host([focused][invalid]) #textfield .step-down,:host([focused][invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-focus,var(
---mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)
+)}:host(:hover) #textfield:focus .buttons,:host(:hover) #textfield:focus .input,:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-focus-hover,var(
+--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
 )
-)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{outline:var(
+)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{--mod-infield-button-background-color:var(
+--highcontrast-stepper-button-background-color-keyboard-focus,var(
+--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
+)
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-keyboard-focus,var(
+--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
+)
+);outline:var(
 --mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)
@@ -54,3 +97,11 @@ ) solid;outline-color:var(
 --mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)
-)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{outline:var(
+)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{--mod-infield-button-background-color:var(
+--highcontrast-stepper-button-background-color-keyboard-focus,var(
+--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
+)
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-keyboard-focus,var(
+--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
+)
+);outline:var(
 --mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)
@@ -63,3 +114,11 @@ ) solid;outline-color:var(
 --mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)
-)}#textfield:focus-visible,:host([keyboard-focused]) #textfield{outline:var(
+)}#textfield:focus-visible,:host([keyboard-focused]) #textfield{--mod-infield-button-background-color:var(
+--highcontrast-stepper-button-background-color-keyboard-focus,var(
+--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
+)
+);--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-keyboard-focus,var(
+--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
+)
+);outline:var(
 --mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)
@@ -72,67 +131,17 @@ ) solid;outline-color:var(
 --mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)
-)}#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield:focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield.focus-visible .buttons,#textfield.focus-visible .input,#textfield.focus-visible .step-down,#textfield.focus-visible .step-up,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{border-color:var(
+)}#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield:focus-visible .input,:host([keyboard-focused]) #textfield .input{outline:none}#textfield.focus-visible .buttons,#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{border-color:var(
 --highcontrast-stepper-border-color-keyboard-focus,var(
 --mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
 )
-)}#textfield.focus-visible .buttons,#textfield.focus-visible .input,#textfield.focus-visible .step-down,#textfield.focus-visible .step-up,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{border-color:var(
+)}#textfield.focus-visible .buttons,#textfield.focus-visible .input,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{border-color:var(
 --highcontrast-stepper-border-color-keyboard-focus,var(
 --mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
 )
-)}#textfield:focus-visible .buttons,#textfield:focus-visible .input,#textfield:focus-visible .step-down,#textfield:focus-visible .step-up,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{border-color:var(
+)}#textfield:focus-visible .buttons,#textfield:focus-visible .input,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{border-color:var(
 --highcontrast-stepper-border-color-keyboard-focus,var(
 --mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
 )
-)}#textfield.focus-visible .step-down,#textfield.focus-visible .step-up,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{background-color:var(
---highcontrast-stepper-button-background-color-keyboard-focus,var(
---mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
-)
-)}#textfield.focus-visible .step-down,#textfield.focus-visible .step-up,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{background-color:var(
---highcontrast-stepper-button-background-color-keyboard-focus,var(
---mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
-)
-)}#textfield:focus-visible .step-down,#textfield:focus-visible .step-up,:host([keyboard-focused]) #textfield .step-down,:host([keyboard-focused]) #textfield .step-up{background-color:var(
---highcontrast-stepper-button-background-color-keyboard-focus,var(
---mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)
-)
-)}:host([invalid]) #textfield.focus-visible .buttons,:host([invalid]) #textfield.focus-visible .input,:host([invalid]) #textfield.focus-visible .step-down,:host([invalid]) #textfield.focus-visible .step-up,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .step-down,:host([keyboard-focused][invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
-)}:host([invalid]) #textfield.focus-visible .buttons,:host([invalid]) #textfield.focus-visible .input,:host([invalid]) #textfield.focus-visible .step-down,:host([invalid]) #textfield.focus-visible .step-up,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .step-down,:host([keyboard-focused][invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
-)}:host([invalid]) #textfield:focus-visible .buttons,:host([invalid]) #textfield:focus-visible .input,:host([invalid]) #textfield:focus-visible .step-down,:host([invalid]) #textfield:focus-visible .step-up,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .step-down,:host([keyboard-focused][invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
-)}:host([invalid]) #textfield .buttons,:host([invalid]) #textfield .input,:host([invalid]) #textfield .step-down,:host([invalid]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-default,var(
---mod-stepper-border-color-invalid-default,var(--spectrum-stepper-border-color-invalid-default)
-)
-)}:host([invalid]:hover) #textfield .buttons,:host([invalid]:hover) #textfield .input,:host([invalid]:hover) #textfield .step-down,:host([invalid]:hover) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-hover,var(
---mod-stepper-border-color-invalid-hover,var(--spectrum-stepper-border-color-invalid-hover)
-)
-)}:host([invalid][focused]) #textfield .buttons,:host([invalid][focused]) #textfield .input,:host([invalid][focused]) #textfield .step-down,:host([invalid][focused]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-focus,var(
---mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)
-)
-)}:host([invalid][focused]:hover) #textfield .buttons,:host([invalid][focused]:hover) #textfield .input,:host([invalid][focused]:hover) #textfield .step-down,:host([invalid][focused]:hover) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-focus-hover,var(
---mod-stepper-border-color-invalid-focus-hover,var(--spectrum-stepper-border-color-invalid-focus-hover)
-)
-)}:host([invalid][keyboard-focused]) #textfield .buttons,:host([invalid][keyboard-focused]) #textfield .input,:host([invalid][keyboard-focused]) #textfield .step-down,:host([invalid][keyboard-focused]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
-)}:host([disabled]) #textfield .buttons,:host([disabled]) #textfield .input,:host([disabled]) #textfield .step-down,:host([disabled]) #textfield .step-up{border-color:var(
---highcontrast-stepper-border-color-disabled,var(
---mod-stepper-border-color-disabled,var(--spectrum-stepper-border-color-disabled)
-)
-)}:host([disabled]) #textfield .step-down,:host([disabled]) #textfield .step-up{background-color:#0000}:host([disabled]) #textfield .buttons{background-color:var(--spectrum-stepper-background-color-disabled)}:host([quiet]) #textfield{border-radius:0;inline-size:var(
---mod-stepper-quiet-width,var(--spectrum-stepper-quiet-width)
-)}:host([quiet]):after{block-size:var(
+)}:host([quiet]) #textfield{border-end-end-radius:0;border-end-start-radius:0;border-start-end-radius:0;border-start-start-radius:0}:host([quiet]) #textfield.hide-stepper .input{border-end-end-radius:0;border-inline-end-width:0}:host([quiet]) #textfield:after{block-size:var(
 --mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)
-);bottom:calc((var(
+);content:"";inline-size:100%;inset-block-end:calc((var(
 --mod-stepper-focus-indicator-gap,
@@ -143,78 +152,39 @@ var(--spectrum-stepper-focus-indicator-gap)
 var(--spectrum-stepper-focus-indicator-width)
-))*-1);content:"";inline-size:100%;left:0;position:absolute}:host([quiet]) .buttons{border-radius:0;border-width:0 0 var(--mod-stepper-border-width,var(--spectrum-stepper-border-width)) 0}:host([quiet]) .step-down,:host([quiet]) .step-up{border-block-start-color:currentColor;border-block-start-style:none;border-inline-color:currentColor;border-inline-style:none;border-radius:0;border-width:0;inline-size:var(
---mod-stepper-quiet-button-width,var(--spectrum-stepper-quiet-button-width)
-);justify-content:flex-end;min-inline-size:0;padding-inline-end:0}:host([quiet]) .step-down:after,:host([quiet]) .step-up:after{block-size:100%;content:"";inline-size:var(
---mod-stepper-button-offset,var(--spectrum-stepper-button-offset)
-);inset-inline-end:calc(var(--mod-stepper-button-offset, var(--spectrum-stepper-button-offset))*-1);position:absolute}:host([quiet]) .buttons,:host([quiet]) .input,:host([quiet]) .step-down,:host([quiet]) .step-up,:host([quiet]:hover) .buttons,:host([quiet]:hover) .step-down,:host([quiet]:hover) .step-up{background-color:#0000}:host([quiet][disabled]) #textfield .buttons,:host([quiet][disabled]) #textfield .input,:host([quiet][disabled]) #textfield .step-down,:host([quiet][disabled]) #textfield .step-up{background-color:#0000;border-color:var(
---highcontrast-stepper-border-color-quiet-disabled,var(
---mod-stepper-border-color-quiet-disabled,var(--spectrum-stepper-border-color-quiet-disabled)
-)
-)}:host([quiet][invalid]) .buttons,:host([quiet][invalid]) .input,:host([quiet][invalid]) .step-down{border-color:var(
---highcontrast-stepper-border-color-invalid-default,var(
---mod-stepper-border-color-invalid-default,var(--spectrum-stepper-border-color-invalid-default)
-)
-)}:host([quiet][invalid]) .step-down,:host([quiet][invalid]) .step-up{background-color:#0000}:host([quiet][focused]) .buttons,:host([quiet][focused]) .input,:host([quiet][focused]) .step-down{border-color:var(
---highcontrast-stepper-border-color-focus,var(
---mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
-)
-)}:host([quiet][focused]) .step-down,:host([quiet][focused]) .step-up{background-color:#0000}:host([quiet][focused]:hover) .buttons,:host([quiet][focused]:hover) .input,:host([quiet][focused]:hover) .step-down,:host([quiet][focused]:hover) .step-up{border-color:var(
---highcontrast-stepper-border-color-focus-hover,var(
---mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
-)
-)}:host([quiet][focused][invalid]) .buttons,:host([quiet][focused][invalid]) .input,:host([quiet][focused][invalid]) .step-down{border-color:var(
---highcontrast-stepper-border-color-invalid-focus,var(
---mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)
-)
-)}:host([quiet][keyboard-focused]) #textfield{outline:none}:host([quiet][keyboard-focused]):after{background-color:var(
+))*-1);inset-inline-start:0;position:absolute}:host([quiet]) #textfield .buttons{border:none}:host([quiet]) #textfield .button{padding:0}:host([quiet]) #textfield .button.step-down .spectrum-InfieldButton-fill{border-block-end-width:var(
+--mod-stepper-border-width,var(--spectrum-stepper-border-width)
+);border-end-end-radius:0;border-end-start-radius:0}:host([quiet]) #textfield .button .spectrum-InfieldButton-fill{justify-content:flex-end}:host([quiet]) #textfield .buttons,:host([quiet]) #textfield .input,:host([quiet]:hover) #textfield .buttons{background-color:#0000}:host([quiet][keyboard-focused]) #textfield{outline:none}:host([quiet][keyboard-focused]) #textfield:after{background-color:var(
 --highcontrast-stepper-focus-indicator-color,var(
 --mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)
 )
-)}:host([quiet][keyboard-focused]) .step-down,:host([quiet][keyboard-focused]) .step-up{background-color:#0000}:host([quiet][keyboard-focused]) .buttons,:host([quiet][keyboard-focused]) .step-down{border-color:var(
---highcontrast-stepper-border-color-keyboard-focus,var(
---mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)
-)
-)}:host([quiet][keyboard-focused][invalid]) .buttons,:host([quiet][keyboard-focused][invalid]) .input,:host([quiet][keyboard-focused][invalid]) .step-down{border-color:var(
---highcontrast-stepper-border-color-invalid-keyboard-focus,var(
---mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)
-)
 )}#textfield:before{content:""}.buttons{background-color:var(
---highcontrast-stepper-background-color,var(
---mod-stepper-background-color,var(--spectrum-stepper-background-color)
+--highcontrast-stepper-buttons-background-color,var(
+--mod-stepper-buttons-background-color,var(--spectrum-stepper-buttons-background-color)
 )
-);block-size:var(
---mod-stepper-buttons-height,var(--spectrum-stepper-buttons-height)
-);border-color:var(
+);block-size:var(--mod-stepper-height,var(--spectrum-stepper-height));border-color:var(
 --highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
 );border-end-end-radius:var(
 --mod-stepper-border-radius,var(--spectrum-stepper-border-radius)
-);border-end-start-radius:0;border-start-end-radius:var(
+);border-start-end-radius:var(
 --mod-stepper-border-radius,var(--spectrum-stepper-border-radius)
-);border-start-start-radius:0;border-style:solid;border-width:var(
---mod-stepper-border-width,var(--spectrum-stepper-border-width)
-) var(--mod-stepper-border-width,var(--spectrum-stepper-border-width)) var(--mod-stepper-border-width,var(--spectrum-stepper-border-width)) var(--spectrum-stepper-button-border-width-reset);flex-direction:column;inline-size:calc(var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + var(--mod-stepper-button-gap, var(--spectrum-stepper-button-gap))*2);justify-content:center;overflow:hidden;padding-inline-end:var(--spectrum-stepper-button-gap);row-gap:var(--mod-stepper-button-gap,var(--spectrum-stepper-button-gap));transition:border-color var(
+);border-style:var(
+--mod-stepper-buttons-border-style,var(--spectrum-stepper-buttons-border-style)
+);border-width:var(
+--mod-stepper-buttons-border-width,var(--spectrum-stepper-buttons-border-width)
+);border-inline-start-width:0;box-sizing:border-box;display:flex;flex-direction:column;inline-size:var(
+--mod-stepper-button-width,var(--spectrum-stepper-button-width)
+);justify-content:center;transition:border-color var(
 --mod-stepper-animation-duration,var(--spectrum-stepper-animation-duration)
-) ease-in-out}.buttons,.step-down,.step-up{box-sizing:border-box;display:flex}.step-down,.step-up{background-color:var(
---highcontrast-stepper-button-background-color-default,var(
---mod-stepper-button-background-color-default,var(--spectrum-stepper-button-background-color-default)
-)
-);block-size:calc(var(
---mod-stepper-buttons-height,
-var(--spectrum-stepper-buttons-height)
-)/2 - var(--mod-stepper-button-gap, var(--spectrum-stepper-button-gap))*2.5);border-width:0;inline-size:var(
---mod-stepper-button-width,var(--spectrum-stepper-button-width)
-);margin:0;min-inline-size:0;padding-inline-end:var(
---mod-stepper-button-padding,var(--spectrum-stepper-button-padding)
-);padding-inline-start:var(
---mod-stepper-button-padding,var(--spectrum-stepper-button-padding)
-);position:relative}.step-down .stepper-icon,.step-up .stepper-icon{margin:0;margin-inline-start:var(--spectrum-stepper-button-icon-nudge);opacity:1}:host(:hover) .step-down,:host(:hover) .step-up{background-color:var(
---highcontrast-stepper-button-background-color-hover,var(
---mod-stepper-button-background-color-hover,var(--spectrum-stepper-button-background-color-hover)
-)
-)}.step-down:disabled,.step-up:disabled{border-color:#0000}.step-up{border-end-end-radius:0;border-end-start-radius:0;border-start-end-radius:var(--spectrum-stepper-button-border-radius-reset);border-start-start-radius:var(
---spectrum-stepper-button-border-radius-reset
-);padding-block-end:0;padding-block-start:var(
---mod-stepper-icon-nudge-start,var(--spectrum-stepper-icon-nudge-start)
-)}.step-down{border-block-start-color:var(
---highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
-);border-block-start-width:0;border-block-start-width:var(--spectrum-stepper-button-border-width-reset);border-end-end-radius:var(--spectrum-stepper-button-border-radius-reset);border-end-start-radius:var(--spectrum-stepper-button-border-radius-reset);border-start-end-radius:0;border-start-start-radius:0;padding-block-start:0}.textfield{flex:1;inline-size:auto;min-inline-size:0}.input{border-end-end-radius:0;border-inline-end-width:0;border-start-end-radius:0;min-inline-size:0}#textfield.hide-stepper .input{border-end-end-radius:var(
+) ease-in-out}.button.step-up{padding-block-start:calc(var(
+--mod-stepper-button-padding,
+var(--spectrum-stepper-button-padding)
+) - var(
+--mod-stepper-border-width,
+var(--spectrum-stepper-border-width)
+))}.button.step-down{padding-block-end:calc(var(
+--mod-stepper-button-padding,
+var(--spectrum-stepper-button-padding)
+) - var(
+--mod-stepper-border-width,
+var(--spectrum-stepper-border-width)
+))}#textfield.hide-stepper .input{border-end-end-radius:var(
 --mod-stepper-border-radius,var(--spectrum-stepper-border-radius)
@@ -227,10 +197,8 @@ );border-inline-end-width:var(
 --system-spectrum-stepper-border-width
-);--spectrum-stepper-button-border-width-reset:var(
---system-spectrum-stepper-button-border-width-reset
-);--spectrum-stepper-button-icon-nudge:var(
---system-spectrum-stepper-button-icon-nudge
-);--spectrum-stepper-button-gap-reset:var(
---system-spectrum-stepper-button-gap-reset
-);--spectrum-stepper-button-border-radius-reset:var(
---system-spectrum-stepper-button-border-radius-reset
+);--spectrum-stepper-buttons-border-style:var(
+--system-spectrum-stepper-buttons-border-style
+);--spectrum-stepper-buttons-border-width:var(
+--system-spectrum-stepper-buttons-border-width
+);--spectrum-stepper-buttons-background-color:var(
+--system-spectrum-stepper-buttons-background-color
 );--spectrum-stepper-border-color:var(
@@ -246,6 +214,4 @@ --system-spectrum-stepper-border-color
 --system-spectrum-stepper-border-color-keyboard-focus
-);--spectrum-stepper-button-background-color-default:var(
---system-spectrum-stepper-button-background-color-default
-);--spectrum-stepper-button-background-color-hover:var(
---system-spectrum-stepper-button-background-color-hover
+);--spectrum-stepper-button-border-radius-reset:var(
+--system-spectrum-stepper-button-border-radius-reset
 );--spectrum-stepper-button-background-color-focus:var(
@@ -255,4 +221,8 @@ --system-spectrum-stepper-button-background-color-focus
 --system-spectrum-stepper-button-background-color-keyboard-focus
+)}:host([disabled]) #textfield{--spectrum-stepper-buttons-background-color:var(
+--system-spectrum-stepper-disabled-buttons-background-color
+);--spectrum-stepper-buttons-border-width:var(
+--system-spectrum-stepper-disabled-buttons-border-width
 )}
-`;export default r;
+`;export default e;
 //# sourceMappingURL=spectrum-number-field.css.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 2 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 2 instances in 1 package

Worsened metrics

Total package byte prevSize

540267

decreased by-12.18%

Lines of code

5296

decreased by-3.25%

Dependency changes

• + Added@spectrum-web-components/infield-button@^0.39.4

• + Added@spectrum-web-components/infield-button@0.39.4(transitive)

• - Removed@spectrum-web-components/action-button@^0.39.3

• - Removed@spectrum-web-components/action-button@0.39.4(transitive)

• Updated@spectrum-web-components/base@^0.39.4

• Updated@spectrum-web-components/icon@^0.39.4

• Updated@spectrum-web-components/icons-ui@^0.39.4

• Updated@spectrum-web-components/reactive-controllers@^0.39.4

• Updated@spectrum-web-components/shared@^0.39.4

• Updated@spectrum-web-components/textfield@^0.39.4