@spectrum-web-components/number-field 0.32.1-overlay.33 → 0.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -27,7 +27,11 @@ import { NumberField } from '@spectrum-web-components/number-field';
|
|
|
27
27
|
## Example
|
|
28
28
|
|
|
29
29
|
```html
|
|
30
|
-
<sp-number-field
|
|
30
|
+
<sp-number-field
|
|
31
|
+
label="Size"
|
|
32
|
+
value="1024"
|
|
33
|
+
style="width: 200px"
|
|
34
|
+
></sp-number-field>
|
|
31
35
|
```
|
|
32
36
|
|
|
33
37
|
## Number formatting
|
|
@@ -79,6 +83,7 @@ If you need to allow the user to change the currency, you should include a separ
|
|
|
79
83
|
```html
|
|
80
84
|
<sp-field-label for="currency">Transaction amount</sp-field-label>
|
|
81
85
|
<sp-number-field
|
|
86
|
+
id="currency"
|
|
82
87
|
style="width: 200px"
|
|
83
88
|
value="45"
|
|
84
89
|
format-options='{
|
package/custom-elements.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "sp-number-field.
|
|
7
|
+
"path": "sp-number-field.js",
|
|
8
8
|
"declarations": [],
|
|
9
9
|
"exports": [
|
|
10
10
|
{
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
"kind": "javascript-module",
|
|
22
|
-
"path": "src/NumberField.
|
|
22
|
+
"path": "src/NumberField.js",
|
|
23
23
|
"declarations": [
|
|
24
24
|
{
|
|
25
25
|
"kind": "variable",
|
|
@@ -799,7 +799,7 @@
|
|
|
799
799
|
"name": "FRAMES_PER_CHANGE",
|
|
800
800
|
"declaration": {
|
|
801
801
|
"name": "FRAMES_PER_CHANGE",
|
|
802
|
-
"module": "src/NumberField.
|
|
802
|
+
"module": "src/NumberField.js"
|
|
803
803
|
}
|
|
804
804
|
},
|
|
805
805
|
{
|
|
@@ -807,7 +807,7 @@
|
|
|
807
807
|
"name": "CHANGE_DEBOUNCE_MS",
|
|
808
808
|
"declaration": {
|
|
809
809
|
"name": "CHANGE_DEBOUNCE_MS",
|
|
810
|
-
"module": "src/NumberField.
|
|
810
|
+
"module": "src/NumberField.js"
|
|
811
811
|
}
|
|
812
812
|
},
|
|
813
813
|
{
|
|
@@ -815,7 +815,7 @@
|
|
|
815
815
|
"name": "indeterminatePlaceholder",
|
|
816
816
|
"declaration": {
|
|
817
817
|
"name": "indeterminatePlaceholder",
|
|
818
|
-
"module": "src/NumberField.
|
|
818
|
+
"module": "src/NumberField.js"
|
|
819
819
|
}
|
|
820
820
|
},
|
|
821
821
|
{
|
|
@@ -823,7 +823,7 @@
|
|
|
823
823
|
"name": "remapMultiByteCharacters",
|
|
824
824
|
"declaration": {
|
|
825
825
|
"name": "remapMultiByteCharacters",
|
|
826
|
-
"module": "src/NumberField.
|
|
826
|
+
"module": "src/NumberField.js"
|
|
827
827
|
}
|
|
828
828
|
},
|
|
829
829
|
{
|
|
@@ -831,7 +831,7 @@
|
|
|
831
831
|
"name": "NumberField",
|
|
832
832
|
"declaration": {
|
|
833
833
|
"name": "NumberField",
|
|
834
|
-
"module": "src/NumberField.
|
|
834
|
+
"module": "src/NumberField.js"
|
|
835
835
|
}
|
|
836
836
|
}
|
|
837
837
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/number-field",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.33.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -58,13 +58,13 @@
|
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
60
|
"@internationalized/number": "^3.1.0",
|
|
61
|
-
"@spectrum-web-components/action-button": "^0.
|
|
62
|
-
"@spectrum-web-components/base": "^0.
|
|
63
|
-
"@spectrum-web-components/icon": "^0.
|
|
64
|
-
"@spectrum-web-components/icons-ui": "^0.
|
|
65
|
-
"@spectrum-web-components/reactive-controllers": "^0.
|
|
66
|
-
"@spectrum-web-components/shared": "^0.
|
|
67
|
-
"@spectrum-web-components/textfield": "^0.
|
|
61
|
+
"@spectrum-web-components/action-button": "^0.33.0",
|
|
62
|
+
"@spectrum-web-components/base": "^0.33.0",
|
|
63
|
+
"@spectrum-web-components/icon": "^0.33.0",
|
|
64
|
+
"@spectrum-web-components/icons-ui": "^0.33.0",
|
|
65
|
+
"@spectrum-web-components/reactive-controllers": "^0.33.0",
|
|
66
|
+
"@spectrum-web-components/shared": "^0.33.0",
|
|
67
|
+
"@spectrum-web-components/textfield": "^0.33.0"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
70
|
"@formatjs/intl-numberformat": "^8.3.5",
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
"./sp-*.js",
|
|
77
77
|
"./**/*.dev.js"
|
|
78
78
|
],
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "0f46cf0508f39ec42ce8c52b1e6f0055bacb4f00"
|
|
80
80
|
}
|
|
@@ -248,7 +248,7 @@ var(--spectrum-stepper-buttons-height)
|
|
|
248
248
|
--system-spectrum-stepper-button-background-color-focus
|
|
249
249
|
);--spectrum-stepper-button-background-color-keyboard-focus:var(
|
|
250
250
|
--system-spectrum-stepper-button-background-color-keyboard-focus
|
|
251
|
-
)}:host
|
|
251
|
+
)}:host{inline-size:var(--mod-stepper-width,var(--spectrum-stepper-width))}#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(
|
|
252
252
|
--spectrum-global-color-gray-200
|
|
253
253
|
);flex-shrink:0}:host([readonly]) .buttons{pointer-events:none;visibility:hidden}:host([hide-stepper]:not([quiet])) .input{border-radius:var(
|
|
254
254
|
--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["number-field.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n: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(\n--spectrum-animation-duration-100\n);--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(\n--spectrum-disabled-background-color\n);--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(\n--spectrum-disabled-background-color\n);--spectrum-stepper-border-color-quiet-disabled:var(\n--spectrum-disabled-border-color\n);--spectrum-stepper-border-color-invalid-default:var(\n--spectrum-negative-border-color-default\n);--spectrum-stepper-border-color-invalid-hover:var(\n--spectrum-negative-border-color-hover\n);--spectrum-stepper-border-color-invalid-focus:var(\n--spectrum-negative-border-color-focus\n);--spectrum-stepper-border-color-invalid-focus-hover:var(\n--spectrum-negative-border-color-focus-hover\n);--spectrum-stepper-border-color-invalid-keyboard-focus:var(\n--spectrum-negative-border-color-key-focus\n);--spectrum-stepper-focus-indicator-width:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-stepper-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-stepper-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}#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(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n);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) .stepDown,:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .stepUp{border-color:var(\n--highcontrast-stepper-border-color-hover,var(\n--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)\n)\n)}:host([focused]) #textfield .input{outline:none}:host([focused]) #textfield .buttons,:host([focused]) #textfield .input,:host([focused]) #textfield .stepDown,:host([focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-focus,var(\n--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)\n)\n)}:host([focused]) #textfield .stepDown,:host([focused]) #textfield .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-focus,var(\n--mod-stepper-button-background-color-focus,var(--spectrum-stepper-button-background-color-focus)\n)\n)}:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input,:host([focused]:hover) #textfield .stepDown,:host([focused]:hover) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-focus-hover,var(\n--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)\n)\n)}:host([focused][invalid]) #textfield .buttons,:host([focused][invalid]) #textfield .input,:host([focused][invalid]) #textfield .stepDown,:host([focused][invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-focus,var(\n--mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)\n)\n)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{outline:var(\n--mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)\n) solid;outline-color:var(\n--highcontrast-stepper-focus-indicator-color,var(\n--mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)\n)\n);outline-offset:var(\n--mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)\n)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{outline:var(\n--mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)\n) solid;outline-color:var(\n--highcontrast-stepper-focus-indicator-color,var(\n--mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)\n)\n);outline-offset:var(\n--mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)\n)}#textfield:focus-visible,:host([keyboard-focused]) #textfield{outline:var(\n--mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)\n) solid;outline-color:var(\n--highcontrast-stepper-focus-indicator-color,var(\n--mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)\n)\n);outline-offset:var(\n--mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)\n)}#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 .stepDown,#textfield.focus-visible .stepUp,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-keyboard-focus,var(\n--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)\n)\n)}#textfield.focus-visible .buttons,#textfield.focus-visible .input,#textfield.focus-visible .stepDown,#textfield.focus-visible .stepUp,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-keyboard-focus,var(\n--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)\n)\n)}#textfield:focus-visible .buttons,#textfield:focus-visible .input,#textfield:focus-visible .stepDown,#textfield:focus-visible .stepUp,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-keyboard-focus,var(\n--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)\n)\n)}#textfield.focus-visible .stepDown,#textfield.focus-visible .stepUp,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-keyboard-focus,var(\n--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)\n)\n)}#textfield.focus-visible .stepDown,#textfield.focus-visible .stepUp,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-keyboard-focus,var(\n--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)\n)\n)}#textfield:focus-visible .stepDown,#textfield:focus-visible .stepUp,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-keyboard-focus,var(\n--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)\n)\n)}:host([invalid]) #textfield.focus-visible .buttons,:host([invalid]) #textfield.focus-visible .input,:host([invalid]) #textfield.focus-visible .stepDown,:host([invalid]) #textfield.focus-visible .stepUp,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}:host([invalid]) #textfield.focus-visible .buttons,:host([invalid]) #textfield.focus-visible .input,:host([invalid]) #textfield.focus-visible .stepDown,:host([invalid]) #textfield.focus-visible .stepUp,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}:host([invalid]) #textfield:focus-visible .buttons,:host([invalid]) #textfield:focus-visible .input,:host([invalid]) #textfield:focus-visible .stepDown,:host([invalid]) #textfield:focus-visible .stepUp,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}:host([invalid]) #textfield .buttons,:host([invalid]) #textfield .input,:host([invalid]) #textfield .stepDown,:host([invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-default,var(\n--mod-stepper-border-color-invalid-default,var(--spectrum-stepper-border-color-invalid-default)\n)\n)}:host([invalid]:hover) #textfield .buttons,:host([invalid]:hover) #textfield .input,:host([invalid]:hover) #textfield .stepDown,:host([invalid]:hover) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-hover,var(\n--mod-stepper-border-color-invalid-hover,var(--spectrum-stepper-border-color-invalid-hover)\n)\n)}:host([invalid][focused]) #textfield .buttons,:host([invalid][focused]) #textfield .input,:host([invalid][focused]) #textfield .stepDown,:host([invalid][focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-focus,var(\n--mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)\n)\n)}:host([invalid][focused]:hover) #textfield .buttons,:host([invalid][focused]:hover) #textfield .input,:host([invalid][focused]:hover) #textfield .stepDown,:host([invalid][focused]:hover) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-focus-hover,var(\n--mod-stepper-border-color-invalid-focus-hover,var(--spectrum-stepper-border-color-invalid-focus-hover)\n)\n)}:host([invalid][keyboard-focused]) #textfield .buttons,:host([invalid][keyboard-focused]) #textfield .input,:host([invalid][keyboard-focused]) #textfield .stepDown,:host([invalid][keyboard-focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}:host([disabled]) #textfield .buttons,:host([disabled]) #textfield .input,:host([disabled]) #textfield .stepDown,:host([disabled]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-disabled,var(\n--mod-stepper-border-color-disabled,var(--spectrum-stepper-border-color-disabled)\n)\n)}:host([disabled]) #textfield .stepDown,:host([disabled]) #textfield .stepUp{background-color:#0000}:host([disabled]) #textfield .buttons{background-color:var(--spectrum-stepper-background-color-disabled)}:host([quiet]) #textfield{border-radius:0;inline-size:var(\n--mod-stepper-quiet-width,var(--spectrum-stepper-quiet-width)\n)}:host([quiet]):after{block-size:var(\n--mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)\n);bottom:calc((var(\n--mod-stepper-focus-indicator-gap,\nvar(--spectrum-stepper-focus-indicator-gap)\n) + var(\n--mod-stepper-focus-indicator-width,\nvar(--spectrum-stepper-focus-indicator-width)\n))*-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]) .stepDown,:host([quiet]) .stepUp{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(\n--mod-stepper-quiet-button-width,var(--spectrum-stepper-quiet-button-width)\n);justify-content:flex-end;min-inline-size:0;padding-inline-end:0}:host([quiet]) .stepDown:after,:host([quiet]) .stepUp:after{block-size:100%;content:\"\";inline-size:var(\n--mod-stepper-button-offset,var(--spectrum-stepper-button-offset)\n);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]) .stepDown,:host([quiet]) .stepUp,:host([quiet]:hover) .buttons,:host([quiet]:hover) .stepDown,:host([quiet]:hover) .stepUp{background-color:#0000}:host([quiet][disabled]) #textfield .buttons,:host([quiet][disabled]) #textfield .input,:host([quiet][disabled]) #textfield .stepDown,:host([quiet][disabled]) #textfield .stepUp{background-color:#0000;border-color:var(\n--highcontrast-stepper-border-color-quiet-disabled,var(\n--mod-stepper-border-color-quiet-disabled,var(--spectrum-stepper-border-color-quiet-disabled)\n)\n)}:host([quiet][invalid]) .buttons,:host([quiet][invalid]) .input,:host([quiet][invalid]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-invalid-default,var(\n--mod-stepper-border-color-invalid-default,var(--spectrum-stepper-border-color-invalid-default)\n)\n)}:host([quiet][invalid]) .stepDown,:host([quiet][invalid]) .stepUp{background-color:#0000}:host([quiet][focused]) .buttons,:host([quiet][focused]) .input,:host([quiet][focused]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-focus,var(\n--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)\n)\n)}:host([quiet][focused]) .stepDown,:host([quiet][focused]) .stepUp{background-color:#0000}:host([quiet][focused]:hover) .buttons,:host([quiet][focused]:hover) .input,:host([quiet][focused]:hover) .stepDown,:host([quiet][focused]:hover) .stepUp{border-color:var(\n--highcontrast-stepper-border-color-focus-hover,var(\n--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)\n)\n)}:host([quiet][focused][invalid]) .buttons,:host([quiet][focused][invalid]) .input,:host([quiet][focused][invalid]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-invalid-focus,var(\n--mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)\n)\n)}:host([quiet][keyboard-focused]) #textfield{outline:none}:host([quiet][keyboard-focused]):after{background-color:var(\n--highcontrast-stepper-focus-indicator-color,var(\n--mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)\n)\n)}:host([quiet][keyboard-focused]) .stepDown,:host([quiet][keyboard-focused]) .stepUp{background-color:#0000}:host([quiet][keyboard-focused]) .buttons,:host([quiet][keyboard-focused]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-keyboard-focus,var(\n--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)\n)\n)}:host([quiet][keyboard-focused][invalid]) .buttons,:host([quiet][keyboard-focused][invalid]) .input,:host([quiet][keyboard-focused][invalid]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}#textfield:before{content:\"\"}.buttons{background-color:var(\n--highcontrast-stepper-background-color,var(\n--mod-stepper-background-color,var(--spectrum-stepper-background-color)\n)\n);block-size:var(\n--mod-stepper-buttons-height,var(--spectrum-stepper-buttons-height)\n);border-color:var(\n--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))\n);border-end-end-radius:var(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n);border-end-start-radius:0;border-start-end-radius:var(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n);border-start-start-radius:0;border-style:solid;border-width:var(\n--mod-stepper-border-width,var(--spectrum-stepper-border-width)\n) 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(\n--mod-stepper-animation-duration,var(--spectrum-stepper-animation-duration)\n) ease-in-out}.buttons,.stepDown,.stepUp{box-sizing:border-box;display:flex}.stepDown,.stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-default,var(\n--mod-stepper-button-background-color-default,var(--spectrum-stepper-button-background-color-default)\n)\n);block-size:calc(var(\n--mod-stepper-buttons-height,\nvar(--spectrum-stepper-buttons-height)\n)/2 - var(--mod-stepper-button-gap, var(--spectrum-stepper-button-gap))*2.5);border-width:0;inline-size:var(\n--mod-stepper-button-width,var(--spectrum-stepper-button-width)\n);margin:0;min-inline-size:0;padding-inline-end:var(\n--mod-stepper-button-padding,var(--spectrum-stepper-button-padding)\n);padding-inline-start:var(\n--mod-stepper-button-padding,var(--spectrum-stepper-button-padding)\n);position:relative}.stepDown .stepper-icon,.stepUp .stepper-icon{margin:0;margin-inline-start:var(--spectrum-stepper-button-icon-nudge);opacity:1}:host(:hover) .stepDown,:host(:hover) .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-hover,var(\n--mod-stepper-button-background-color-hover,var(--spectrum-stepper-button-background-color-hover)\n)\n)}.stepDown:disabled,.stepUp:disabled{border-color:#0000}.stepUp{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(\n--spectrum-stepper-button-border-radius-reset\n);padding-block-end:0;padding-block-start:var(\n--mod-stepper-icon-nudge-start,var(--spectrum-stepper-icon-nudge-start)\n)}.stepDown{border-block-start-color:var(\n--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))\n);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(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n);border-inline-end-width:var(\n--mod-stepper-border-width,var(--spectrum-stepper-border-width)\n);border-start-end-radius:var(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n)}:host{--spectrum-stepper-border-width:var(\n--system-spectrum-stepper-border-width\n);--spectrum-stepper-button-border-width-reset:var(\n--system-spectrum-stepper-button-border-width-reset\n);--spectrum-stepper-button-icon-nudge:var(\n--system-spectrum-stepper-button-icon-nudge\n);--spectrum-stepper-button-gap-reset:var(\n--system-spectrum-stepper-button-gap-reset\n);--spectrum-stepper-button-border-radius-reset:var(\n--system-spectrum-stepper-button-border-radius-reset\n);--spectrum-stepper-border-color:var(\n--system-spectrum-stepper-border-color\n);--spectrum-stepper-border-color-hover:var(\n--system-spectrum-stepper-border-color-hover\n);--spectrum-stepper-border-color-focus:var(\n--system-spectrum-stepper-border-color-focus\n);--spectrum-stepper-border-color-focus-hover:var(\n--system-spectrum-stepper-border-color-focus-hover\n);--spectrum-stepper-border-color-keyboard-focus:var(\n--system-spectrum-stepper-border-color-keyboard-focus\n);--spectrum-stepper-button-background-color-default:var(\n--system-spectrum-stepper-button-background-color-default\n);--spectrum-stepper-button-background-color-hover:var(\n--system-spectrum-stepper-button-background-color-hover\n);--spectrum-stepper-button-background-color-focus:var(\n--system-spectrum-stepper-button-background-color-focus\n);--spectrum-stepper-button-background-color-keyboard-focus:var(\n--system-spectrum-stepper-button-background-color-keyboard-focus\n)}:host([quiet]){width:var(--spectrum-stepper-quiet-width)}#textfield,:host([quiet]) #textfield{width:100%}sp-field-button{--spectrum-dropdown-height:100%;--spectrum-dropdown-padding-x:0}.input{font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums}.buttons{--mod-actionbutton-background-color-disabled:var(\n--spectrum-global-color-gray-200\n);flex-shrink:0}:host([readonly]) .buttons{pointer-events:none;visibility:hidden}:host([hide-stepper]:not([quiet])) .input{border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr][invalid]:not([hide-stepper])) .icon{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl][invalid]:not([hide-stepper])) .icon{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][valid]:not([hide-stepper])) .icon{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl][valid]:not([hide-stepper])) .icon{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][quiet][invalid]:not([hide-stepper])) .icon{right:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet][invalid]:not([hide-stepper])) .icon{left:var(--spectrum-stepper-button-width)}:host([dir=ltr][quiet][valid]:not([hide-stepper])) .icon{right:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet][valid]:not([hide-stepper])) .icon{left:var(--spectrum-stepper-button-width)}:host([dir=ltr]:not([hide-stepper])) .icon-workflow{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl]:not([hide-stepper])) .icon-workflow{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][quiet]:not([hide-stepper])) .icon-workflow{left:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet]:not([hide-stepper])) .icon-workflow{right:var(--spectrum-stepper-button-width)}: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)}\n`;\nexport default styles;"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n: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(\n--spectrum-animation-duration-100\n);--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(\n--spectrum-disabled-background-color\n);--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(\n--spectrum-disabled-background-color\n);--spectrum-stepper-border-color-quiet-disabled:var(\n--spectrum-disabled-border-color\n);--spectrum-stepper-border-color-invalid-default:var(\n--spectrum-negative-border-color-default\n);--spectrum-stepper-border-color-invalid-hover:var(\n--spectrum-negative-border-color-hover\n);--spectrum-stepper-border-color-invalid-focus:var(\n--spectrum-negative-border-color-focus\n);--spectrum-stepper-border-color-invalid-focus-hover:var(\n--spectrum-negative-border-color-focus-hover\n);--spectrum-stepper-border-color-invalid-keyboard-focus:var(\n--spectrum-negative-border-color-key-focus\n);--spectrum-stepper-focus-indicator-width:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-stepper-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-stepper-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}#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(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n);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) .stepDown,:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .stepUp{border-color:var(\n--highcontrast-stepper-border-color-hover,var(\n--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)\n)\n)}:host([focused]) #textfield .input{outline:none}:host([focused]) #textfield .buttons,:host([focused]) #textfield .input,:host([focused]) #textfield .stepDown,:host([focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-focus,var(\n--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)\n)\n)}:host([focused]) #textfield .stepDown,:host([focused]) #textfield .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-focus,var(\n--mod-stepper-button-background-color-focus,var(--spectrum-stepper-button-background-color-focus)\n)\n)}:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input,:host([focused]:hover) #textfield .stepDown,:host([focused]:hover) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-focus-hover,var(\n--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)\n)\n)}:host([focused][invalid]) #textfield .buttons,:host([focused][invalid]) #textfield .input,:host([focused][invalid]) #textfield .stepDown,:host([focused][invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-focus,var(\n--mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)\n)\n)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{outline:var(\n--mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)\n) solid;outline-color:var(\n--highcontrast-stepper-focus-indicator-color,var(\n--mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)\n)\n);outline-offset:var(\n--mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)\n)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{outline:var(\n--mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)\n) solid;outline-color:var(\n--highcontrast-stepper-focus-indicator-color,var(\n--mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)\n)\n);outline-offset:var(\n--mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)\n)}#textfield:focus-visible,:host([keyboard-focused]) #textfield{outline:var(\n--mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)\n) solid;outline-color:var(\n--highcontrast-stepper-focus-indicator-color,var(\n--mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)\n)\n);outline-offset:var(\n--mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)\n)}#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 .stepDown,#textfield.focus-visible .stepUp,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-keyboard-focus,var(\n--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)\n)\n)}#textfield.focus-visible .buttons,#textfield.focus-visible .input,#textfield.focus-visible .stepDown,#textfield.focus-visible .stepUp,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-keyboard-focus,var(\n--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)\n)\n)}#textfield:focus-visible .buttons,#textfield:focus-visible .input,#textfield:focus-visible .stepDown,#textfield:focus-visible .stepUp,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-keyboard-focus,var(\n--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)\n)\n)}#textfield.focus-visible .stepDown,#textfield.focus-visible .stepUp,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-keyboard-focus,var(\n--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)\n)\n)}#textfield.focus-visible .stepDown,#textfield.focus-visible .stepUp,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-keyboard-focus,var(\n--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)\n)\n)}#textfield:focus-visible .stepDown,#textfield:focus-visible .stepUp,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-keyboard-focus,var(\n--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)\n)\n)}:host([invalid]) #textfield.focus-visible .buttons,:host([invalid]) #textfield.focus-visible .input,:host([invalid]) #textfield.focus-visible .stepDown,:host([invalid]) #textfield.focus-visible .stepUp,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}:host([invalid]) #textfield.focus-visible .buttons,:host([invalid]) #textfield.focus-visible .input,:host([invalid]) #textfield.focus-visible .stepDown,:host([invalid]) #textfield.focus-visible .stepUp,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}:host([invalid]) #textfield:focus-visible .buttons,:host([invalid]) #textfield:focus-visible .input,:host([invalid]) #textfield:focus-visible .stepDown,:host([invalid]) #textfield:focus-visible .stepUp,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}:host([invalid]) #textfield .buttons,:host([invalid]) #textfield .input,:host([invalid]) #textfield .stepDown,:host([invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-default,var(\n--mod-stepper-border-color-invalid-default,var(--spectrum-stepper-border-color-invalid-default)\n)\n)}:host([invalid]:hover) #textfield .buttons,:host([invalid]:hover) #textfield .input,:host([invalid]:hover) #textfield .stepDown,:host([invalid]:hover) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-hover,var(\n--mod-stepper-border-color-invalid-hover,var(--spectrum-stepper-border-color-invalid-hover)\n)\n)}:host([invalid][focused]) #textfield .buttons,:host([invalid][focused]) #textfield .input,:host([invalid][focused]) #textfield .stepDown,:host([invalid][focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-focus,var(\n--mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)\n)\n)}:host([invalid][focused]:hover) #textfield .buttons,:host([invalid][focused]:hover) #textfield .input,:host([invalid][focused]:hover) #textfield .stepDown,:host([invalid][focused]:hover) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-focus-hover,var(\n--mod-stepper-border-color-invalid-focus-hover,var(--spectrum-stepper-border-color-invalid-focus-hover)\n)\n)}:host([invalid][keyboard-focused]) #textfield .buttons,:host([invalid][keyboard-focused]) #textfield .input,:host([invalid][keyboard-focused]) #textfield .stepDown,:host([invalid][keyboard-focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}:host([disabled]) #textfield .buttons,:host([disabled]) #textfield .input,:host([disabled]) #textfield .stepDown,:host([disabled]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-disabled,var(\n--mod-stepper-border-color-disabled,var(--spectrum-stepper-border-color-disabled)\n)\n)}:host([disabled]) #textfield .stepDown,:host([disabled]) #textfield .stepUp{background-color:#0000}:host([disabled]) #textfield .buttons{background-color:var(--spectrum-stepper-background-color-disabled)}:host([quiet]) #textfield{border-radius:0;inline-size:var(\n--mod-stepper-quiet-width,var(--spectrum-stepper-quiet-width)\n)}:host([quiet]):after{block-size:var(\n--mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)\n);bottom:calc((var(\n--mod-stepper-focus-indicator-gap,\nvar(--spectrum-stepper-focus-indicator-gap)\n) + var(\n--mod-stepper-focus-indicator-width,\nvar(--spectrum-stepper-focus-indicator-width)\n))*-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]) .stepDown,:host([quiet]) .stepUp{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(\n--mod-stepper-quiet-button-width,var(--spectrum-stepper-quiet-button-width)\n);justify-content:flex-end;min-inline-size:0;padding-inline-end:0}:host([quiet]) .stepDown:after,:host([quiet]) .stepUp:after{block-size:100%;content:\"\";inline-size:var(\n--mod-stepper-button-offset,var(--spectrum-stepper-button-offset)\n);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]) .stepDown,:host([quiet]) .stepUp,:host([quiet]:hover) .buttons,:host([quiet]:hover) .stepDown,:host([quiet]:hover) .stepUp{background-color:#0000}:host([quiet][disabled]) #textfield .buttons,:host([quiet][disabled]) #textfield .input,:host([quiet][disabled]) #textfield .stepDown,:host([quiet][disabled]) #textfield .stepUp{background-color:#0000;border-color:var(\n--highcontrast-stepper-border-color-quiet-disabled,var(\n--mod-stepper-border-color-quiet-disabled,var(--spectrum-stepper-border-color-quiet-disabled)\n)\n)}:host([quiet][invalid]) .buttons,:host([quiet][invalid]) .input,:host([quiet][invalid]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-invalid-default,var(\n--mod-stepper-border-color-invalid-default,var(--spectrum-stepper-border-color-invalid-default)\n)\n)}:host([quiet][invalid]) .stepDown,:host([quiet][invalid]) .stepUp{background-color:#0000}:host([quiet][focused]) .buttons,:host([quiet][focused]) .input,:host([quiet][focused]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-focus,var(\n--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)\n)\n)}:host([quiet][focused]) .stepDown,:host([quiet][focused]) .stepUp{background-color:#0000}:host([quiet][focused]:hover) .buttons,:host([quiet][focused]:hover) .input,:host([quiet][focused]:hover) .stepDown,:host([quiet][focused]:hover) .stepUp{border-color:var(\n--highcontrast-stepper-border-color-focus-hover,var(\n--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)\n)\n)}:host([quiet][focused][invalid]) .buttons,:host([quiet][focused][invalid]) .input,:host([quiet][focused][invalid]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-invalid-focus,var(\n--mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)\n)\n)}:host([quiet][keyboard-focused]) #textfield{outline:none}:host([quiet][keyboard-focused]):after{background-color:var(\n--highcontrast-stepper-focus-indicator-color,var(\n--mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)\n)\n)}:host([quiet][keyboard-focused]) .stepDown,:host([quiet][keyboard-focused]) .stepUp{background-color:#0000}:host([quiet][keyboard-focused]) .buttons,:host([quiet][keyboard-focused]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-keyboard-focus,var(\n--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)\n)\n)}:host([quiet][keyboard-focused][invalid]) .buttons,:host([quiet][keyboard-focused][invalid]) .input,:host([quiet][keyboard-focused][invalid]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}#textfield:before{content:\"\"}.buttons{background-color:var(\n--highcontrast-stepper-background-color,var(\n--mod-stepper-background-color,var(--spectrum-stepper-background-color)\n)\n);block-size:var(\n--mod-stepper-buttons-height,var(--spectrum-stepper-buttons-height)\n);border-color:var(\n--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))\n);border-end-end-radius:var(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n);border-end-start-radius:0;border-start-end-radius:var(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n);border-start-start-radius:0;border-style:solid;border-width:var(\n--mod-stepper-border-width,var(--spectrum-stepper-border-width)\n) 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(\n--mod-stepper-animation-duration,var(--spectrum-stepper-animation-duration)\n) ease-in-out}.buttons,.stepDown,.stepUp{box-sizing:border-box;display:flex}.stepDown,.stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-default,var(\n--mod-stepper-button-background-color-default,var(--spectrum-stepper-button-background-color-default)\n)\n);block-size:calc(var(\n--mod-stepper-buttons-height,\nvar(--spectrum-stepper-buttons-height)\n)/2 - var(--mod-stepper-button-gap, var(--spectrum-stepper-button-gap))*2.5);border-width:0;inline-size:var(\n--mod-stepper-button-width,var(--spectrum-stepper-button-width)\n);margin:0;min-inline-size:0;padding-inline-end:var(\n--mod-stepper-button-padding,var(--spectrum-stepper-button-padding)\n);padding-inline-start:var(\n--mod-stepper-button-padding,var(--spectrum-stepper-button-padding)\n);position:relative}.stepDown .stepper-icon,.stepUp .stepper-icon{margin:0;margin-inline-start:var(--spectrum-stepper-button-icon-nudge);opacity:1}:host(:hover) .stepDown,:host(:hover) .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-hover,var(\n--mod-stepper-button-background-color-hover,var(--spectrum-stepper-button-background-color-hover)\n)\n)}.stepDown:disabled,.stepUp:disabled{border-color:#0000}.stepUp{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(\n--spectrum-stepper-button-border-radius-reset\n);padding-block-end:0;padding-block-start:var(\n--mod-stepper-icon-nudge-start,var(--spectrum-stepper-icon-nudge-start)\n)}.stepDown{border-block-start-color:var(\n--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))\n);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(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n);border-inline-end-width:var(\n--mod-stepper-border-width,var(--spectrum-stepper-border-width)\n);border-start-end-radius:var(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n)}:host{--spectrum-stepper-border-width:var(\n--system-spectrum-stepper-border-width\n);--spectrum-stepper-button-border-width-reset:var(\n--system-spectrum-stepper-button-border-width-reset\n);--spectrum-stepper-button-icon-nudge:var(\n--system-spectrum-stepper-button-icon-nudge\n);--spectrum-stepper-button-gap-reset:var(\n--system-spectrum-stepper-button-gap-reset\n);--spectrum-stepper-button-border-radius-reset:var(\n--system-spectrum-stepper-button-border-radius-reset\n);--spectrum-stepper-border-color:var(\n--system-spectrum-stepper-border-color\n);--spectrum-stepper-border-color-hover:var(\n--system-spectrum-stepper-border-color-hover\n);--spectrum-stepper-border-color-focus:var(\n--system-spectrum-stepper-border-color-focus\n);--spectrum-stepper-border-color-focus-hover:var(\n--system-spectrum-stepper-border-color-focus-hover\n);--spectrum-stepper-border-color-keyboard-focus:var(\n--system-spectrum-stepper-border-color-keyboard-focus\n);--spectrum-stepper-button-background-color-default:var(\n--system-spectrum-stepper-button-background-color-default\n);--spectrum-stepper-button-background-color-hover:var(\n--system-spectrum-stepper-button-background-color-hover\n);--spectrum-stepper-button-background-color-focus:var(\n--system-spectrum-stepper-button-background-color-focus\n);--spectrum-stepper-button-background-color-keyboard-focus:var(\n--system-spectrum-stepper-button-background-color-keyboard-focus\n)}:host{inline-size:var(--mod-stepper-width,var(--spectrum-stepper-width))}#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(\n--spectrum-global-color-gray-200\n);flex-shrink:0}:host([readonly]) .buttons{pointer-events:none;visibility:hidden}:host([hide-stepper]:not([quiet])) .input{border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr][invalid]:not([hide-stepper])) .icon{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl][invalid]:not([hide-stepper])) .icon{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][valid]:not([hide-stepper])) .icon{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl][valid]:not([hide-stepper])) .icon{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][quiet][invalid]:not([hide-stepper])) .icon{right:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet][invalid]:not([hide-stepper])) .icon{left:var(--spectrum-stepper-button-width)}:host([dir=ltr][quiet][valid]:not([hide-stepper])) .icon{right:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet][valid]:not([hide-stepper])) .icon{left:var(--spectrum-stepper-button-width)}:host([dir=ltr]:not([hide-stepper])) .icon-workflow{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl]:not([hide-stepper])) .icon-workflow{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][quiet]:not([hide-stepper])) .icon-workflow{left:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet]:not([hide-stepper])) .icon-workflow{right:var(--spectrum-stepper-button-width)}: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)}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8Pf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/number-field.css.js
CHANGED
|
@@ -246,7 +246,7 @@ var(--spectrum-stepper-buttons-height)
|
|
|
246
246
|
--system-spectrum-stepper-button-background-color-focus
|
|
247
247
|
);--spectrum-stepper-button-background-color-keyboard-focus:var(
|
|
248
248
|
--system-spectrum-stepper-button-background-color-keyboard-focus
|
|
249
|
-
)}:host
|
|
249
|
+
)}:host{inline-size:var(--mod-stepper-width,var(--spectrum-stepper-width))}#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(
|
|
250
250
|
--spectrum-global-color-gray-200
|
|
251
251
|
);flex-shrink:0}:host([readonly]) .buttons{pointer-events:none;visibility:hidden}:host([hide-stepper]:not([quiet])) .input{border-radius:var(
|
|
252
252
|
--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["number-field.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n: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(\n--spectrum-animation-duration-100\n);--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(\n--spectrum-disabled-background-color\n);--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(\n--spectrum-disabled-background-color\n);--spectrum-stepper-border-color-quiet-disabled:var(\n--spectrum-disabled-border-color\n);--spectrum-stepper-border-color-invalid-default:var(\n--spectrum-negative-border-color-default\n);--spectrum-stepper-border-color-invalid-hover:var(\n--spectrum-negative-border-color-hover\n);--spectrum-stepper-border-color-invalid-focus:var(\n--spectrum-negative-border-color-focus\n);--spectrum-stepper-border-color-invalid-focus-hover:var(\n--spectrum-negative-border-color-focus-hover\n);--spectrum-stepper-border-color-invalid-keyboard-focus:var(\n--spectrum-negative-border-color-key-focus\n);--spectrum-stepper-focus-indicator-width:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-stepper-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-stepper-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}#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(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n);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) .stepDown,:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .stepUp{border-color:var(\n--highcontrast-stepper-border-color-hover,var(\n--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)\n)\n)}:host([focused]) #textfield .input{outline:none}:host([focused]) #textfield .buttons,:host([focused]) #textfield .input,:host([focused]) #textfield .stepDown,:host([focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-focus,var(\n--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)\n)\n)}:host([focused]) #textfield .stepDown,:host([focused]) #textfield .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-focus,var(\n--mod-stepper-button-background-color-focus,var(--spectrum-stepper-button-background-color-focus)\n)\n)}:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input,:host([focused]:hover) #textfield .stepDown,:host([focused]:hover) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-focus-hover,var(\n--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)\n)\n)}:host([focused][invalid]) #textfield .buttons,:host([focused][invalid]) #textfield .input,:host([focused][invalid]) #textfield .stepDown,:host([focused][invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-focus,var(\n--mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)\n)\n)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{outline:var(\n--mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)\n) solid;outline-color:var(\n--highcontrast-stepper-focus-indicator-color,var(\n--mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)\n)\n);outline-offset:var(\n--mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)\n)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{outline:var(\n--mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)\n) solid;outline-color:var(\n--highcontrast-stepper-focus-indicator-color,var(\n--mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)\n)\n);outline-offset:var(\n--mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)\n)}#textfield:focus-visible,:host([keyboard-focused]) #textfield{outline:var(\n--mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)\n) solid;outline-color:var(\n--highcontrast-stepper-focus-indicator-color,var(\n--mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)\n)\n);outline-offset:var(\n--mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)\n)}#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 .stepDown,#textfield.focus-visible .stepUp,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-keyboard-focus,var(\n--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)\n)\n)}#textfield.focus-visible .buttons,#textfield.focus-visible .input,#textfield.focus-visible .stepDown,#textfield.focus-visible .stepUp,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-keyboard-focus,var(\n--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)\n)\n)}#textfield:focus-visible .buttons,#textfield:focus-visible .input,#textfield:focus-visible .stepDown,#textfield:focus-visible .stepUp,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-keyboard-focus,var(\n--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)\n)\n)}#textfield.focus-visible .stepDown,#textfield.focus-visible .stepUp,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-keyboard-focus,var(\n--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)\n)\n)}#textfield.focus-visible .stepDown,#textfield.focus-visible .stepUp,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-keyboard-focus,var(\n--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)\n)\n)}#textfield:focus-visible .stepDown,#textfield:focus-visible .stepUp,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-keyboard-focus,var(\n--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)\n)\n)}:host([invalid]) #textfield.focus-visible .buttons,:host([invalid]) #textfield.focus-visible .input,:host([invalid]) #textfield.focus-visible .stepDown,:host([invalid]) #textfield.focus-visible .stepUp,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}:host([invalid]) #textfield.focus-visible .buttons,:host([invalid]) #textfield.focus-visible .input,:host([invalid]) #textfield.focus-visible .stepDown,:host([invalid]) #textfield.focus-visible .stepUp,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}:host([invalid]) #textfield:focus-visible .buttons,:host([invalid]) #textfield:focus-visible .input,:host([invalid]) #textfield:focus-visible .stepDown,:host([invalid]) #textfield:focus-visible .stepUp,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}:host([invalid]) #textfield .buttons,:host([invalid]) #textfield .input,:host([invalid]) #textfield .stepDown,:host([invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-default,var(\n--mod-stepper-border-color-invalid-default,var(--spectrum-stepper-border-color-invalid-default)\n)\n)}:host([invalid]:hover) #textfield .buttons,:host([invalid]:hover) #textfield .input,:host([invalid]:hover) #textfield .stepDown,:host([invalid]:hover) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-hover,var(\n--mod-stepper-border-color-invalid-hover,var(--spectrum-stepper-border-color-invalid-hover)\n)\n)}:host([invalid][focused]) #textfield .buttons,:host([invalid][focused]) #textfield .input,:host([invalid][focused]) #textfield .stepDown,:host([invalid][focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-focus,var(\n--mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)\n)\n)}:host([invalid][focused]:hover) #textfield .buttons,:host([invalid][focused]:hover) #textfield .input,:host([invalid][focused]:hover) #textfield .stepDown,:host([invalid][focused]:hover) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-focus-hover,var(\n--mod-stepper-border-color-invalid-focus-hover,var(--spectrum-stepper-border-color-invalid-focus-hover)\n)\n)}:host([invalid][keyboard-focused]) #textfield .buttons,:host([invalid][keyboard-focused]) #textfield .input,:host([invalid][keyboard-focused]) #textfield .stepDown,:host([invalid][keyboard-focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}:host([disabled]) #textfield .buttons,:host([disabled]) #textfield .input,:host([disabled]) #textfield .stepDown,:host([disabled]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-disabled,var(\n--mod-stepper-border-color-disabled,var(--spectrum-stepper-border-color-disabled)\n)\n)}:host([disabled]) #textfield .stepDown,:host([disabled]) #textfield .stepUp{background-color:#0000}:host([disabled]) #textfield .buttons{background-color:var(--spectrum-stepper-background-color-disabled)}:host([quiet]) #textfield{border-radius:0;inline-size:var(\n--mod-stepper-quiet-width,var(--spectrum-stepper-quiet-width)\n)}:host([quiet]):after{block-size:var(\n--mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)\n);bottom:calc((var(\n--mod-stepper-focus-indicator-gap,\nvar(--spectrum-stepper-focus-indicator-gap)\n) + var(\n--mod-stepper-focus-indicator-width,\nvar(--spectrum-stepper-focus-indicator-width)\n))*-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]) .stepDown,:host([quiet]) .stepUp{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(\n--mod-stepper-quiet-button-width,var(--spectrum-stepper-quiet-button-width)\n);justify-content:flex-end;min-inline-size:0;padding-inline-end:0}:host([quiet]) .stepDown:after,:host([quiet]) .stepUp:after{block-size:100%;content:\"\";inline-size:var(\n--mod-stepper-button-offset,var(--spectrum-stepper-button-offset)\n);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]) .stepDown,:host([quiet]) .stepUp,:host([quiet]:hover) .buttons,:host([quiet]:hover) .stepDown,:host([quiet]:hover) .stepUp{background-color:#0000}:host([quiet][disabled]) #textfield .buttons,:host([quiet][disabled]) #textfield .input,:host([quiet][disabled]) #textfield .stepDown,:host([quiet][disabled]) #textfield .stepUp{background-color:#0000;border-color:var(\n--highcontrast-stepper-border-color-quiet-disabled,var(\n--mod-stepper-border-color-quiet-disabled,var(--spectrum-stepper-border-color-quiet-disabled)\n)\n)}:host([quiet][invalid]) .buttons,:host([quiet][invalid]) .input,:host([quiet][invalid]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-invalid-default,var(\n--mod-stepper-border-color-invalid-default,var(--spectrum-stepper-border-color-invalid-default)\n)\n)}:host([quiet][invalid]) .stepDown,:host([quiet][invalid]) .stepUp{background-color:#0000}:host([quiet][focused]) .buttons,:host([quiet][focused]) .input,:host([quiet][focused]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-focus,var(\n--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)\n)\n)}:host([quiet][focused]) .stepDown,:host([quiet][focused]) .stepUp{background-color:#0000}:host([quiet][focused]:hover) .buttons,:host([quiet][focused]:hover) .input,:host([quiet][focused]:hover) .stepDown,:host([quiet][focused]:hover) .stepUp{border-color:var(\n--highcontrast-stepper-border-color-focus-hover,var(\n--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)\n)\n)}:host([quiet][focused][invalid]) .buttons,:host([quiet][focused][invalid]) .input,:host([quiet][focused][invalid]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-invalid-focus,var(\n--mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)\n)\n)}:host([quiet][keyboard-focused]) #textfield{outline:none}:host([quiet][keyboard-focused]):after{background-color:var(\n--highcontrast-stepper-focus-indicator-color,var(\n--mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)\n)\n)}:host([quiet][keyboard-focused]) .stepDown,:host([quiet][keyboard-focused]) .stepUp{background-color:#0000}:host([quiet][keyboard-focused]) .buttons,:host([quiet][keyboard-focused]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-keyboard-focus,var(\n--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)\n)\n)}:host([quiet][keyboard-focused][invalid]) .buttons,:host([quiet][keyboard-focused][invalid]) .input,:host([quiet][keyboard-focused][invalid]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}#textfield:before{content:\"\"}.buttons{background-color:var(\n--highcontrast-stepper-background-color,var(\n--mod-stepper-background-color,var(--spectrum-stepper-background-color)\n)\n);block-size:var(\n--mod-stepper-buttons-height,var(--spectrum-stepper-buttons-height)\n);border-color:var(\n--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))\n);border-end-end-radius:var(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n);border-end-start-radius:0;border-start-end-radius:var(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n);border-start-start-radius:0;border-style:solid;border-width:var(\n--mod-stepper-border-width,var(--spectrum-stepper-border-width)\n) 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(\n--mod-stepper-animation-duration,var(--spectrum-stepper-animation-duration)\n) ease-in-out}.buttons,.stepDown,.stepUp{box-sizing:border-box;display:flex}.stepDown,.stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-default,var(\n--mod-stepper-button-background-color-default,var(--spectrum-stepper-button-background-color-default)\n)\n);block-size:calc(var(\n--mod-stepper-buttons-height,\nvar(--spectrum-stepper-buttons-height)\n)/2 - var(--mod-stepper-button-gap, var(--spectrum-stepper-button-gap))*2.5);border-width:0;inline-size:var(\n--mod-stepper-button-width,var(--spectrum-stepper-button-width)\n);margin:0;min-inline-size:0;padding-inline-end:var(\n--mod-stepper-button-padding,var(--spectrum-stepper-button-padding)\n);padding-inline-start:var(\n--mod-stepper-button-padding,var(--spectrum-stepper-button-padding)\n);position:relative}.stepDown .stepper-icon,.stepUp .stepper-icon{margin:0;margin-inline-start:var(--spectrum-stepper-button-icon-nudge);opacity:1}:host(:hover) .stepDown,:host(:hover) .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-hover,var(\n--mod-stepper-button-background-color-hover,var(--spectrum-stepper-button-background-color-hover)\n)\n)}.stepDown:disabled,.stepUp:disabled{border-color:#0000}.stepUp{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(\n--spectrum-stepper-button-border-radius-reset\n);padding-block-end:0;padding-block-start:var(\n--mod-stepper-icon-nudge-start,var(--spectrum-stepper-icon-nudge-start)\n)}.stepDown{border-block-start-color:var(\n--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))\n);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(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n);border-inline-end-width:var(\n--mod-stepper-border-width,var(--spectrum-stepper-border-width)\n);border-start-end-radius:var(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n)}:host{--spectrum-stepper-border-width:var(\n--system-spectrum-stepper-border-width\n);--spectrum-stepper-button-border-width-reset:var(\n--system-spectrum-stepper-button-border-width-reset\n);--spectrum-stepper-button-icon-nudge:var(\n--system-spectrum-stepper-button-icon-nudge\n);--spectrum-stepper-button-gap-reset:var(\n--system-spectrum-stepper-button-gap-reset\n);--spectrum-stepper-button-border-radius-reset:var(\n--system-spectrum-stepper-button-border-radius-reset\n);--spectrum-stepper-border-color:var(\n--system-spectrum-stepper-border-color\n);--spectrum-stepper-border-color-hover:var(\n--system-spectrum-stepper-border-color-hover\n);--spectrum-stepper-border-color-focus:var(\n--system-spectrum-stepper-border-color-focus\n);--spectrum-stepper-border-color-focus-hover:var(\n--system-spectrum-stepper-border-color-focus-hover\n);--spectrum-stepper-border-color-keyboard-focus:var(\n--system-spectrum-stepper-border-color-keyboard-focus\n);--spectrum-stepper-button-background-color-default:var(\n--system-spectrum-stepper-button-background-color-default\n);--spectrum-stepper-button-background-color-hover:var(\n--system-spectrum-stepper-button-background-color-hover\n);--spectrum-stepper-button-background-color-focus:var(\n--system-spectrum-stepper-button-background-color-focus\n);--spectrum-stepper-button-background-color-keyboard-focus:var(\n--system-spectrum-stepper-button-background-color-keyboard-focus\n)}:host([quiet]){width:var(--spectrum-stepper-quiet-width)}#textfield,:host([quiet]) #textfield{width:100%}sp-field-button{--spectrum-dropdown-height:100%;--spectrum-dropdown-padding-x:0}.input{font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums}.buttons{--mod-actionbutton-background-color-disabled:var(\n--spectrum-global-color-gray-200\n);flex-shrink:0}:host([readonly]) .buttons{pointer-events:none;visibility:hidden}:host([hide-stepper]:not([quiet])) .input{border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr][invalid]:not([hide-stepper])) .icon{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl][invalid]:not([hide-stepper])) .icon{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][valid]:not([hide-stepper])) .icon{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl][valid]:not([hide-stepper])) .icon{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][quiet][invalid]:not([hide-stepper])) .icon{right:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet][invalid]:not([hide-stepper])) .icon{left:var(--spectrum-stepper-button-width)}:host([dir=ltr][quiet][valid]:not([hide-stepper])) .icon{right:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet][valid]:not([hide-stepper])) .icon{left:var(--spectrum-stepper-button-width)}:host([dir=ltr]:not([hide-stepper])) .icon-workflow{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl]:not([hide-stepper])) .icon-workflow{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][quiet]:not([hide-stepper])) .icon-workflow{left:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet]:not([hide-stepper])) .icon-workflow{right:var(--spectrum-stepper-button-width)}: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)}\n`;\nexport default styles;"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n: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(\n--spectrum-animation-duration-100\n);--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(\n--spectrum-disabled-background-color\n);--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(\n--spectrum-disabled-background-color\n);--spectrum-stepper-border-color-quiet-disabled:var(\n--spectrum-disabled-border-color\n);--spectrum-stepper-border-color-invalid-default:var(\n--spectrum-negative-border-color-default\n);--spectrum-stepper-border-color-invalid-hover:var(\n--spectrum-negative-border-color-hover\n);--spectrum-stepper-border-color-invalid-focus:var(\n--spectrum-negative-border-color-focus\n);--spectrum-stepper-border-color-invalid-focus-hover:var(\n--spectrum-negative-border-color-focus-hover\n);--spectrum-stepper-border-color-invalid-keyboard-focus:var(\n--spectrum-negative-border-color-key-focus\n);--spectrum-stepper-focus-indicator-width:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-stepper-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-stepper-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}#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(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n);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) .stepDown,:host(:hover:not([disabled]):not([invalid]):not([focused])) #textfield:not(.is-keyboardFocused) .stepUp{border-color:var(\n--highcontrast-stepper-border-color-hover,var(\n--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)\n)\n)}:host([focused]) #textfield .input{outline:none}:host([focused]) #textfield .buttons,:host([focused]) #textfield .input,:host([focused]) #textfield .stepDown,:host([focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-focus,var(\n--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)\n)\n)}:host([focused]) #textfield .stepDown,:host([focused]) #textfield .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-focus,var(\n--mod-stepper-button-background-color-focus,var(--spectrum-stepper-button-background-color-focus)\n)\n)}:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input,:host([focused]:hover) #textfield .stepDown,:host([focused]:hover) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-focus-hover,var(\n--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)\n)\n)}:host([focused][invalid]) #textfield .buttons,:host([focused][invalid]) #textfield .input,:host([focused][invalid]) #textfield .stepDown,:host([focused][invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-focus,var(\n--mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)\n)\n)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{outline:var(\n--mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)\n) solid;outline-color:var(\n--highcontrast-stepper-focus-indicator-color,var(\n--mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)\n)\n);outline-offset:var(\n--mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)\n)}#textfield.focus-visible,:host([keyboard-focused]) #textfield{outline:var(\n--mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)\n) solid;outline-color:var(\n--highcontrast-stepper-focus-indicator-color,var(\n--mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)\n)\n);outline-offset:var(\n--mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)\n)}#textfield:focus-visible,:host([keyboard-focused]) #textfield{outline:var(\n--mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)\n) solid;outline-color:var(\n--highcontrast-stepper-focus-indicator-color,var(\n--mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)\n)\n);outline-offset:var(\n--mod-stepper-focus-indicator-gap,var(--spectrum-stepper-focus-indicator-gap)\n)}#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 .stepDown,#textfield.focus-visible .stepUp,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-keyboard-focus,var(\n--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)\n)\n)}#textfield.focus-visible .buttons,#textfield.focus-visible .input,#textfield.focus-visible .stepDown,#textfield.focus-visible .stepUp,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-keyboard-focus,var(\n--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)\n)\n)}#textfield:focus-visible .buttons,#textfield:focus-visible .input,#textfield:focus-visible .stepDown,#textfield:focus-visible .stepUp,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-keyboard-focus,var(\n--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)\n)\n)}#textfield.focus-visible .stepDown,#textfield.focus-visible .stepUp,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-keyboard-focus,var(\n--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)\n)\n)}#textfield.focus-visible .stepDown,#textfield.focus-visible .stepUp,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-keyboard-focus,var(\n--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)\n)\n)}#textfield:focus-visible .stepDown,#textfield:focus-visible .stepUp,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-keyboard-focus,var(\n--mod-stepper-button-background-color-keyboard-focus,var(--spectrum-stepper-button-background-color-keyboard-focus)\n)\n)}:host([invalid]) #textfield.focus-visible .buttons,:host([invalid]) #textfield.focus-visible .input,:host([invalid]) #textfield.focus-visible .stepDown,:host([invalid]) #textfield.focus-visible .stepUp,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}:host([invalid]) #textfield.focus-visible .buttons,:host([invalid]) #textfield.focus-visible .input,:host([invalid]) #textfield.focus-visible .stepDown,:host([invalid]) #textfield.focus-visible .stepUp,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}:host([invalid]) #textfield:focus-visible .buttons,:host([invalid]) #textfield:focus-visible .input,:host([invalid]) #textfield:focus-visible .stepDown,:host([invalid]) #textfield:focus-visible .stepUp,:host([keyboard-focused][invalid]) #textfield .buttons,:host([keyboard-focused][invalid]) #textfield .input,:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}:host([invalid]) #textfield .buttons,:host([invalid]) #textfield .input,:host([invalid]) #textfield .stepDown,:host([invalid]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-default,var(\n--mod-stepper-border-color-invalid-default,var(--spectrum-stepper-border-color-invalid-default)\n)\n)}:host([invalid]:hover) #textfield .buttons,:host([invalid]:hover) #textfield .input,:host([invalid]:hover) #textfield .stepDown,:host([invalid]:hover) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-hover,var(\n--mod-stepper-border-color-invalid-hover,var(--spectrum-stepper-border-color-invalid-hover)\n)\n)}:host([invalid][focused]) #textfield .buttons,:host([invalid][focused]) #textfield .input,:host([invalid][focused]) #textfield .stepDown,:host([invalid][focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-focus,var(\n--mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)\n)\n)}:host([invalid][focused]:hover) #textfield .buttons,:host([invalid][focused]:hover) #textfield .input,:host([invalid][focused]:hover) #textfield .stepDown,:host([invalid][focused]:hover) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-focus-hover,var(\n--mod-stepper-border-color-invalid-focus-hover,var(--spectrum-stepper-border-color-invalid-focus-hover)\n)\n)}:host([invalid][keyboard-focused]) #textfield .buttons,:host([invalid][keyboard-focused]) #textfield .input,:host([invalid][keyboard-focused]) #textfield .stepDown,:host([invalid][keyboard-focused]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}:host([disabled]) #textfield .buttons,:host([disabled]) #textfield .input,:host([disabled]) #textfield .stepDown,:host([disabled]) #textfield .stepUp{border-color:var(\n--highcontrast-stepper-border-color-disabled,var(\n--mod-stepper-border-color-disabled,var(--spectrum-stepper-border-color-disabled)\n)\n)}:host([disabled]) #textfield .stepDown,:host([disabled]) #textfield .stepUp{background-color:#0000}:host([disabled]) #textfield .buttons{background-color:var(--spectrum-stepper-background-color-disabled)}:host([quiet]) #textfield{border-radius:0;inline-size:var(\n--mod-stepper-quiet-width,var(--spectrum-stepper-quiet-width)\n)}:host([quiet]):after{block-size:var(\n--mod-stepper-focus-indicator-width,var(--spectrum-stepper-focus-indicator-width)\n);bottom:calc((var(\n--mod-stepper-focus-indicator-gap,\nvar(--spectrum-stepper-focus-indicator-gap)\n) + var(\n--mod-stepper-focus-indicator-width,\nvar(--spectrum-stepper-focus-indicator-width)\n))*-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]) .stepDown,:host([quiet]) .stepUp{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(\n--mod-stepper-quiet-button-width,var(--spectrum-stepper-quiet-button-width)\n);justify-content:flex-end;min-inline-size:0;padding-inline-end:0}:host([quiet]) .stepDown:after,:host([quiet]) .stepUp:after{block-size:100%;content:\"\";inline-size:var(\n--mod-stepper-button-offset,var(--spectrum-stepper-button-offset)\n);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]) .stepDown,:host([quiet]) .stepUp,:host([quiet]:hover) .buttons,:host([quiet]:hover) .stepDown,:host([quiet]:hover) .stepUp{background-color:#0000}:host([quiet][disabled]) #textfield .buttons,:host([quiet][disabled]) #textfield .input,:host([quiet][disabled]) #textfield .stepDown,:host([quiet][disabled]) #textfield .stepUp{background-color:#0000;border-color:var(\n--highcontrast-stepper-border-color-quiet-disabled,var(\n--mod-stepper-border-color-quiet-disabled,var(--spectrum-stepper-border-color-quiet-disabled)\n)\n)}:host([quiet][invalid]) .buttons,:host([quiet][invalid]) .input,:host([quiet][invalid]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-invalid-default,var(\n--mod-stepper-border-color-invalid-default,var(--spectrum-stepper-border-color-invalid-default)\n)\n)}:host([quiet][invalid]) .stepDown,:host([quiet][invalid]) .stepUp{background-color:#0000}:host([quiet][focused]) .buttons,:host([quiet][focused]) .input,:host([quiet][focused]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-focus,var(\n--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)\n)\n)}:host([quiet][focused]) .stepDown,:host([quiet][focused]) .stepUp{background-color:#0000}:host([quiet][focused]:hover) .buttons,:host([quiet][focused]:hover) .input,:host([quiet][focused]:hover) .stepDown,:host([quiet][focused]:hover) .stepUp{border-color:var(\n--highcontrast-stepper-border-color-focus-hover,var(\n--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)\n)\n)}:host([quiet][focused][invalid]) .buttons,:host([quiet][focused][invalid]) .input,:host([quiet][focused][invalid]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-invalid-focus,var(\n--mod-stepper-border-color-invalid-focus,var(--spectrum-stepper-border-color-invalid-focus)\n)\n)}:host([quiet][keyboard-focused]) #textfield{outline:none}:host([quiet][keyboard-focused]):after{background-color:var(\n--highcontrast-stepper-focus-indicator-color,var(\n--mod-stepper-focus-indicator-color,var(--spectrum-stepper-focus-indicator-color)\n)\n)}:host([quiet][keyboard-focused]) .stepDown,:host([quiet][keyboard-focused]) .stepUp{background-color:#0000}:host([quiet][keyboard-focused]) .buttons,:host([quiet][keyboard-focused]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-keyboard-focus,var(\n--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)\n)\n)}:host([quiet][keyboard-focused][invalid]) .buttons,:host([quiet][keyboard-focused][invalid]) .input,:host([quiet][keyboard-focused][invalid]) .stepDown{border-color:var(\n--highcontrast-stepper-border-color-invalid-keyboard-focus,var(\n--mod-stepper-border-color-invalid-keyboard-focus,var(--spectrum-stepper-border-color-invalid-keyboard-focus)\n)\n)}#textfield:before{content:\"\"}.buttons{background-color:var(\n--highcontrast-stepper-background-color,var(\n--mod-stepper-background-color,var(--spectrum-stepper-background-color)\n)\n);block-size:var(\n--mod-stepper-buttons-height,var(--spectrum-stepper-buttons-height)\n);border-color:var(\n--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))\n);border-end-end-radius:var(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n);border-end-start-radius:0;border-start-end-radius:var(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n);border-start-start-radius:0;border-style:solid;border-width:var(\n--mod-stepper-border-width,var(--spectrum-stepper-border-width)\n) 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(\n--mod-stepper-animation-duration,var(--spectrum-stepper-animation-duration)\n) ease-in-out}.buttons,.stepDown,.stepUp{box-sizing:border-box;display:flex}.stepDown,.stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-default,var(\n--mod-stepper-button-background-color-default,var(--spectrum-stepper-button-background-color-default)\n)\n);block-size:calc(var(\n--mod-stepper-buttons-height,\nvar(--spectrum-stepper-buttons-height)\n)/2 - var(--mod-stepper-button-gap, var(--spectrum-stepper-button-gap))*2.5);border-width:0;inline-size:var(\n--mod-stepper-button-width,var(--spectrum-stepper-button-width)\n);margin:0;min-inline-size:0;padding-inline-end:var(\n--mod-stepper-button-padding,var(--spectrum-stepper-button-padding)\n);padding-inline-start:var(\n--mod-stepper-button-padding,var(--spectrum-stepper-button-padding)\n);position:relative}.stepDown .stepper-icon,.stepUp .stepper-icon{margin:0;margin-inline-start:var(--spectrum-stepper-button-icon-nudge);opacity:1}:host(:hover) .stepDown,:host(:hover) .stepUp{background-color:var(\n--highcontrast-stepper-button-background-color-hover,var(\n--mod-stepper-button-background-color-hover,var(--spectrum-stepper-button-background-color-hover)\n)\n)}.stepDown:disabled,.stepUp:disabled{border-color:#0000}.stepUp{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(\n--spectrum-stepper-button-border-radius-reset\n);padding-block-end:0;padding-block-start:var(\n--mod-stepper-icon-nudge-start,var(--spectrum-stepper-icon-nudge-start)\n)}.stepDown{border-block-start-color:var(\n--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))\n);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(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n);border-inline-end-width:var(\n--mod-stepper-border-width,var(--spectrum-stepper-border-width)\n);border-start-end-radius:var(\n--mod-stepper-border-radius,var(--spectrum-stepper-border-radius)\n)}:host{--spectrum-stepper-border-width:var(\n--system-spectrum-stepper-border-width\n);--spectrum-stepper-button-border-width-reset:var(\n--system-spectrum-stepper-button-border-width-reset\n);--spectrum-stepper-button-icon-nudge:var(\n--system-spectrum-stepper-button-icon-nudge\n);--spectrum-stepper-button-gap-reset:var(\n--system-spectrum-stepper-button-gap-reset\n);--spectrum-stepper-button-border-radius-reset:var(\n--system-spectrum-stepper-button-border-radius-reset\n);--spectrum-stepper-border-color:var(\n--system-spectrum-stepper-border-color\n);--spectrum-stepper-border-color-hover:var(\n--system-spectrum-stepper-border-color-hover\n);--spectrum-stepper-border-color-focus:var(\n--system-spectrum-stepper-border-color-focus\n);--spectrum-stepper-border-color-focus-hover:var(\n--system-spectrum-stepper-border-color-focus-hover\n);--spectrum-stepper-border-color-keyboard-focus:var(\n--system-spectrum-stepper-border-color-keyboard-focus\n);--spectrum-stepper-button-background-color-default:var(\n--system-spectrum-stepper-button-background-color-default\n);--spectrum-stepper-button-background-color-hover:var(\n--system-spectrum-stepper-button-background-color-hover\n);--spectrum-stepper-button-background-color-focus:var(\n--system-spectrum-stepper-button-background-color-focus\n);--spectrum-stepper-button-background-color-keyboard-focus:var(\n--system-spectrum-stepper-button-background-color-keyboard-focus\n)}:host{inline-size:var(--mod-stepper-width,var(--spectrum-stepper-width))}#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(\n--spectrum-global-color-gray-200\n);flex-shrink:0}:host([readonly]) .buttons{pointer-events:none;visibility:hidden}:host([hide-stepper]:not([quiet])) .input{border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr][invalid]:not([hide-stepper])) .icon{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl][invalid]:not([hide-stepper])) .icon{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][valid]:not([hide-stepper])) .icon{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl][valid]:not([hide-stepper])) .icon{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][quiet][invalid]:not([hide-stepper])) .icon{right:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet][invalid]:not([hide-stepper])) .icon{left:var(--spectrum-stepper-button-width)}:host([dir=ltr][quiet][valid]:not([hide-stepper])) .icon{right:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet][valid]:not([hide-stepper])) .icon{left:var(--spectrum-stepper-button-width)}:host([dir=ltr]:not([hide-stepper])) .icon-workflow{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl]:not([hide-stepper])) .icon-workflow{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][quiet]:not([hide-stepper])) .icon-workflow{left:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet]:not([hide-stepper])) .icon-workflow{right:var(--spectrum-stepper-button-width)}: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)}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA8Pf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|