@spectrum-web-components/number-field 0.3.4 → 0.3.6

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.
Files changed (18) hide show
  1. package/package.json +9 -9
  2. package/sp-number-field.d.ts +0 -6
  3. package/sp-number-field.js +0 -14
  4. package/sp-number-field.js.map +0 -1
  5. package/src/NumberField.d.ts +0 -99
  6. package/src/NumberField.js +0 -549
  7. package/src/NumberField.js.map +0 -1
  8. package/src/index.d.ts +0 -1
  9. package/src/index.js +0 -13
  10. package/src/index.js.map +0 -1
  11. package/src/number-field.css.d.ts +0 -2
  12. package/src/number-field.css.js +0 -146
  13. package/src/number-field.css.js.map +0 -1
  14. package/src/spectrum-number-field.css.d.ts +0 -2
  15. package/src/spectrum-number-field.css.js +0 -144
  16. package/src/spectrum-number-field.css.js.map +0 -1
  17. package/stories/number-field.stories.js +0 -372
  18. package/stories/number-field.stories.js.map +0 -1
package/src/number-field.css.js DELETED
@@ -1,146 +0,0 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import { css } from '@spectrum-web-components/base';
13
- const styles = css `
14
- :host{--spectrum-stepper-width:var(
15
- --spectrum-global-dimension-size-900
16
- );--spectrum-stepper-border-size:var(
17
- --spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)
18
- );--spectrum-stepper-button-height:calc(var(
19
- --spectrum-alias-single-line-height,
20
- var(--spectrum-global-dimension-size-400)
21
- )/2);--spectrum-stepper-button-width:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-stepper-border-size));--spectrum-stepper-button-padding:calc(var(--spectrum-global-dimension-size-150)/2);--spectrum-stepper-border-radius-reset:0;--spectrum-stepper-border-size-reset:0;--spectrum-stepper-icon-nudge-top:var(--spectrum-global-dimension-size-10);--spectrum-stepper-icon-nudge:var(--spectrum-global-dimension-size-25);--spectrum-stepper-quiet-width:var(--spectrum-global-dimension-size-600);--spectrum-stepper-button-offset:calc(var(--spectrum-stepper-button-width)/2 - var(--spectrum-alias-ui-icon-chevron-size-75)/2);--spectrum-stepper-quiet-button-width:calc(var(--spectrum-stepper-button-width) - var(--spectrum-stepper-button-offset))}#textfield{border-radius:var(
22
- --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
23
- );display:inline-flex;flex-direction:row;flex-wrap:nowrap;line-height:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-stepper-width)}#textfield:before{content:""}:host([dir=ltr]) .buttons{border-top-left-radius:0}:host([dir=rtl]) .buttons{border-top-right-radius:0}:host([dir=ltr]) .buttons{border-top-right-radius:var(
24
- --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
25
- )}:host([dir=rtl]) .buttons{border-top-left-radius:var(
26
- --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
27
- )}:host([dir=ltr]) .buttons{border-bottom-right-radius:var(
28
- --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
29
- )}:host([dir=rtl]) .buttons{border-bottom-left-radius:var(
30
- --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
31
- )}:host([dir=ltr]) .buttons{border-bottom-left-radius:0}:host([dir=rtl]) .buttons{border-bottom-right-radius:0}.buttons{display:block;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-left:var(
32
- --spectrum-stepper-button-padding
33
- )}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-right:var(
34
- --spectrum-stepper-button-padding
35
- )}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-right:var(
36
- --spectrum-stepper-button-padding
37
- )}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-left:var(
38
- --spectrum-stepper-button-padding
39
- )}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-left-width:var(
40
- --spectrum-stepper-border-size-reset
41
- )}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-right-width:var(
42
- --spectrum-stepper-border-size-reset
43
- )}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-top-left-radius:var(
44
- --spectrum-stepper-border-radius-reset
45
- )}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-top-right-radius:var(
46
- --spectrum-stepper-border-radius-reset
47
- )}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-bottom-left-radius:var(
48
- --spectrum-stepper-border-radius-reset
49
- )}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-bottom-right-radius:var(
50
- --spectrum-stepper-border-radius-reset
51
- )}.stepDown,.stepUp{border-width:var(--spectrum-stepper-border-size);box-sizing:border-box;display:flex;height:var(--spectrum-stepper-button-height);margin:0!important;min-width:0;position:relative;width:var(--spectrum-stepper-button-width)}.stepDown .stepper-icon,.stepUp .stepper-icon{margin:0!important;opacity:1}:host([dir=ltr]) .stepUp{border-bottom-right-radius:var(
52
- --spectrum-stepper-border-radius-reset
53
- )}:host([dir=rtl]) .stepUp{border-bottom-left-radius:var(
54
- --spectrum-stepper-border-radius-reset
55
- )}.stepUp{border-bottom:none;padding-top:var(--spectrum-stepper-icon-nudge-top)}:host([dir=ltr]) .stepDown{border-top-right-radius:var(
56
- --spectrum-stepper-border-radius-reset
57
- )}:host([dir=rtl]) .stepDown{border-top-left-radius:var(
58
- --spectrum-stepper-border-radius-reset
59
- )}.stepDown{padding-bottom:var(
60
- --spectrum-stepper-icon-nudge
61
- )}.textfield{flex:1;width:auto}:host([dir=ltr]) .input{border-top-right-radius:var(
62
- --spectrum-stepper-border-radius-reset
63
- )}:host([dir=rtl]) .input{border-top-left-radius:var(
64
- --spectrum-stepper-border-radius-reset
65
- )}:host([dir=ltr]) .input{border-bottom-right-radius:var(
66
- --spectrum-stepper-border-radius-reset
67
- )}:host([dir=rtl]) .input{border-bottom-left-radius:var(
68
- --spectrum-stepper-border-radius-reset
69
- )}.input,.textfield{min-width:0}:host([quiet]) #textfield{border-radius:var(
70
- --spectrum-stepper-border-radius-reset
71
- );width:var(--spectrum-stepper-quiet-width)}:host([quiet]) .buttons{border-radius:var(
72
- --spectrum-stepper-border-radius-reset
73
- )}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-right-width:var(
74
- --spectrum-stepper-border-size-reset
75
- )}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-left-width:var(
76
- --spectrum-stepper-border-size-reset
77
- )}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-left:none}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-right:none}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{padding-right:0}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{padding-left:0}:host([quiet]) .stepDown,:host([quiet]) .stepUp{border-radius:var(--spectrum-stepper-border-radius-reset);border-top:none;justify-content:flex-end;min-width:0;width:var(
78
- --spectrum-stepper-quiet-button-width
79
- )}:host([dir=ltr][quiet]) .stepDown:after,:host([dir=ltr][quiet]) .stepUp:after{right:calc(var(--spectrum-stepper-button-offset)*-1)}:host([dir=rtl][quiet]) .stepDown:after,:host([dir=rtl][quiet]) .stepUp:after{left:calc(var(--spectrum-stepper-button-offset)*-1)}:host([quiet]) .stepDown:after,:host([quiet]) .stepUp:after{content:"";height:100%;position:absolute;width:var(--spectrum-stepper-button-offset)}:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .input,:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .stepDown,:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .stepUp{border-color:var(
80
- --spectrum-textfield-m-texticon-border-color-hover,var(--spectrum-alias-input-border-color-hover)
81
- )}:host([focused]) #textfield{border-color:var(
82
- --spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)
83
- )}:host([focused]) #textfield .stepDown,:host([focused]) #textfield .stepUp{border-color:var(
84
- --spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)
85
- )}:host([focused]) #textfield .input{border-color:var(
86
- --spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)
87
- );box-shadow:none}:host([focused][invalid]) #textfield{border-color:var(
88
- --spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)
89
- )}:host([focused][invalid]) #textfield .stepDown,:host([focused][invalid]) #textfield .stepUp{border-color:var(
90
- --spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)
91
- )}:host([focused][invalid]) #textfield .input{border-color:var(
92
- --spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)
93
- )}:host([keyboard-focused]) #textfield{box-shadow:0 0 0 1px var(
94
- --spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
95
- )}:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{box-shadow:0 0 0 1px var(
96
- --spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
97
- )}:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(
98
- --spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
99
- )}:host([keyboard-focused][invalid]) #textfield{box-shadow:0 0 0 1px var(
100
- --spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)
101
- )}:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(
102
- --spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)
103
- )}:host([keyboard-focused][invalid]) #textfield .buttons{box-shadow:0 0 0 1px var(
104
- --spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)
105
- )}:host([invalid]) #textfield .stepDown,:host([invalid]) #textfield .stepUp{border-color:var(
106
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
107
- )}:host([invalid]) #textfield .input{border-color:var(
108
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
109
- )}:host([invalid][keyboard-focused]) #textfield .input{border-color:var(
110
- --spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)
111
- );box-shadow:0 0 0 1px var(
112
- --spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)
113
- )}:host([invalid][keyboard-focused]) #textfield .buttons{box-shadow:0 0 0 1px var(
114
- --spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)
115
- )}:host([disabled]) #textfield .stepDown,:host([disabled]) #textfield .stepUp{border-color:var(
116
- --spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)
117
- )}.stepDown,.stepUp{border-color:var(
118
- --spectrum-textfield-m-texticon-border-color,var(--spectrum-alias-input-border-color-default)
119
- )}.stepDown:disabled,.stepUp:disabled{border-color:var(
120
- --spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)
121
- )}:host([quiet][disabled]) #textfield .stepDown,:host([quiet][disabled]) #textfield .stepUp{border-color:var(
122
- --spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)
123
- )}:host([quiet]) .stepDown,:host([quiet]) .stepUp{border-color:var(
124
- --spectrum-textfield-m-quiet-texticon-border-color,var(--spectrum-alias-input-border-color-default)
125
- )}:host([quiet]) .stepDown:disabled,:host([quiet]) .stepUp:disabled{border-color:var(
126
- --spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)
127
- )}:host([quiet]) .input{box-shadow:none}:host([quiet][invalid]) #textfield .input{border-color:var(
128
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
129
- )}:host([quiet][invalid]) #textfield .stepDown{border-color:var(
130
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
131
- )}:host([quiet][focused]) #textfield,:host([quiet][keyboard-focused]) #textfield{box-shadow:none}:host([quiet][focused]) #textfield .buttons,:host([quiet][focused]) #textfield .input,:host([quiet][keyboard-focused]) #textfield .buttons,:host([quiet][keyboard-focused]) #textfield .input{box-shadow:0 1px 0 0 var(
132
- --spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
133
- )}:host([quiet][focused]) #textfield .stepDown,:host([quiet][keyboard-focused]) #textfield .stepDown{border-color:var(
134
- --spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
135
- )}:host([quiet][focused][invalid]) #textfield,:host([quiet][keyboard-focused][invalid]) #textfield{box-shadow:none}:host([quiet][focused][invalid]) #textfield .buttons,:host([quiet][focused][invalid]) #textfield .input,:host([quiet][keyboard-focused][invalid]) #textfield .buttons,:host([quiet][keyboard-focused][invalid]) #textfield .input{box-shadow:0 1px 0 0 var(
136
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
137
- )}:host([quiet][focused][invalid]) #textfield .input,:host([quiet][keyboard-focused][invalid]) #textfield .input{border-color:var(
138
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
139
- )}:host([quiet][focused][invalid]) #textfield .stepDown,:host([quiet][keyboard-focused][invalid]) #textfield .stepDown{border-color:var(
140
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
141
- )}:host{width:var(--spectrum-stepper-width)}#textfield{width:100%}sp-field-button{--spectrum-dropdown-height:100%;--spectrum-dropdown-padding-x:0}.input{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}:host([readonly]) .buttons{pointer-events:none}:host([hide-stepper]:not([quiet])) .input{border-radius:var(
142
- --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
143
- )}: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)}
144
- `;
145
- export default styles;
146
- //# sourceMappingURL=number-field.css.js.map
package/src/number-field.css.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"number-field.css.js","sourceRoot":"","sources":["number-field.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 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:var(\n--spectrum-global-dimension-size-900\n);--spectrum-stepper-border-size:var(\n--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-stepper-button-height:calc(var(\n--spectrum-alias-single-line-height,\nvar(--spectrum-global-dimension-size-400)\n)/2);--spectrum-stepper-button-width:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-stepper-border-size));--spectrum-stepper-button-padding:calc(var(--spectrum-global-dimension-size-150)/2);--spectrum-stepper-border-radius-reset:0;--spectrum-stepper-border-size-reset:0;--spectrum-stepper-icon-nudge-top:var(--spectrum-global-dimension-size-10);--spectrum-stepper-icon-nudge:var(--spectrum-global-dimension-size-25);--spectrum-stepper-quiet-width:var(--spectrum-global-dimension-size-600);--spectrum-stepper-button-offset:calc(var(--spectrum-stepper-button-width)/2 - var(--spectrum-alias-ui-icon-chevron-size-75)/2);--spectrum-stepper-quiet-button-width:calc(var(--spectrum-stepper-button-width) - var(--spectrum-stepper-button-offset))}#textfield{border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);display:inline-flex;flex-direction:row;flex-wrap:nowrap;line-height:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-stepper-width)}#textfield:before{content:\"\"}:host([dir=ltr]) .buttons{border-top-left-radius:0}:host([dir=rtl]) .buttons{border-top-right-radius:0}:host([dir=ltr]) .buttons{border-top-right-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=rtl]) .buttons{border-top-left-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr]) .buttons{border-bottom-right-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=rtl]) .buttons{border-bottom-left-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr]) .buttons{border-bottom-left-radius:0}:host([dir=rtl]) .buttons{border-bottom-right-radius:0}.buttons{display:block;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-left:var(\n--spectrum-stepper-button-padding\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-right:var(\n--spectrum-stepper-button-padding\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-right:var(\n--spectrum-stepper-button-padding\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-left:var(\n--spectrum-stepper-button-padding\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-left-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-right-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepDown,.stepUp{border-width:var(--spectrum-stepper-border-size);box-sizing:border-box;display:flex;height:var(--spectrum-stepper-button-height);margin:0!important;min-width:0;position:relative;width:var(--spectrum-stepper-button-width)}.stepDown .stepper-icon,.stepUp .stepper-icon{margin:0!important;opacity:1}:host([dir=ltr]) .stepUp{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepUp{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepUp{border-bottom:none;padding-top:var(--spectrum-stepper-icon-nudge-top)}:host([dir=ltr]) .stepDown{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepDown{padding-bottom:var(\n--spectrum-stepper-icon-nudge\n)}.textfield{flex:1;width:auto}:host([dir=ltr]) .input{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .input{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr]) .input{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .input{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.input,.textfield{min-width:0}:host([quiet]) #textfield{border-radius:var(\n--spectrum-stepper-border-radius-reset\n);width:var(--spectrum-stepper-quiet-width)}:host([quiet]) .buttons{border-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-right-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-left-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-left:none}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-right:none}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{padding-right:0}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{padding-left:0}:host([quiet]) .stepDown,:host([quiet]) .stepUp{border-radius:var(--spectrum-stepper-border-radius-reset);border-top:none;justify-content:flex-end;min-width:0;width:var(\n--spectrum-stepper-quiet-button-width\n)}:host([dir=ltr][quiet]) .stepDown:after,:host([dir=ltr][quiet]) .stepUp:after{right:calc(var(--spectrum-stepper-button-offset)*-1)}:host([dir=rtl][quiet]) .stepDown:after,:host([dir=rtl][quiet]) .stepUp:after{left:calc(var(--spectrum-stepper-button-offset)*-1)}:host([quiet]) .stepDown:after,:host([quiet]) .stepUp:after{content:\"\";height:100%;position:absolute;width:var(--spectrum-stepper-button-offset)}:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .input,:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .stepDown,:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-hover,var(--spectrum-alias-input-border-color-hover)\n)}:host([focused]) #textfield{border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n)}:host([focused]) #textfield .stepDown,:host([focused]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n)}:host([focused]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n);box-shadow:none}:host([focused][invalid]) #textfield{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid]) #textfield .stepDown,:host([focused][invalid]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([keyboard-focused]) #textfield{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused][invalid]) #textfield{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([keyboard-focused][invalid]) #textfield .buttons{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([invalid]) #textfield .stepDown,:host([invalid]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([invalid][keyboard-focused]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([invalid][keyboard-focused]) #textfield .buttons{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([disabled]) #textfield .stepDown,:host([disabled]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)\n)}.stepDown,.stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n)}.stepDown:disabled,.stepUp:disabled{border-color:var(\n--spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)\n)}:host([quiet][disabled]) #textfield .stepDown,:host([quiet][disabled]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)\n)}:host([quiet]) .stepDown,:host([quiet]) .stepUp{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n)}:host([quiet]) .stepDown:disabled,:host([quiet]) .stepUp:disabled{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)\n)}:host([quiet]) .input{box-shadow:none}:host([quiet][invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][invalid]) #textfield .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused]) #textfield,:host([quiet][keyboard-focused]) #textfield{box-shadow:none}:host([quiet][focused]) #textfield .buttons,:host([quiet][focused]) #textfield .input,:host([quiet][keyboard-focused]) #textfield .buttons,:host([quiet][keyboard-focused]) #textfield .input{box-shadow:0 1px 0 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([quiet][focused]) #textfield .stepDown,:host([quiet][keyboard-focused]) #textfield .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([quiet][focused][invalid]) #textfield,:host([quiet][keyboard-focused][invalid]) #textfield{box-shadow:none}:host([quiet][focused][invalid]) #textfield .buttons,:host([quiet][focused][invalid]) #textfield .input,:host([quiet][keyboard-focused][invalid]) #textfield .buttons,:host([quiet][keyboard-focused][invalid]) #textfield .input{box-shadow:0 1px 0 0 var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused][invalid]) #textfield .input,:host([quiet][keyboard-focused][invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused][invalid]) #textfield .stepDown,:host([quiet][keyboard-focused][invalid]) #textfield .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host{width:var(--spectrum-stepper-width)}#textfield{width:100%}sp-field-button{--spectrum-dropdown-height:100%;--spectrum-dropdown-padding-x:0}.input{font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums}:host([readonly]) .buttons{pointer-events:none}:host([hide-stepper]:not([quiet])) .input{border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr][invalid]:not([hide-stepper])) .icon{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl][invalid]:not([hide-stepper])) .icon{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][valid]:not([hide-stepper])) .icon{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl][valid]:not([hide-stepper])) .icon{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][quiet][invalid]:not([hide-stepper])) .icon{right:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet][invalid]:not([hide-stepper])) .icon{left:var(--spectrum-stepper-button-width)}:host([dir=ltr][quiet][valid]:not([hide-stepper])) .icon{right:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet][valid]:not([hide-stepper])) .icon{left:var(--spectrum-stepper-button-width)}:host([dir=ltr]:not([hide-stepper])) .icon-workflow{left:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=rtl]:not([hide-stepper])) .icon-workflow{right:calc(var(--spectrum-stepper-button-width) + var(--spectrum-textfield-error-icon-margin-left))}:host([dir=ltr][quiet]:not([hide-stepper])) .icon-workflow{left:var(--spectrum-stepper-button-width)}:host([dir=rtl][quiet]:not([hide-stepper])) .icon-workflow{right:var(--spectrum-stepper-button-width)}\n`;\nexport default styles;"]}
package/src/spectrum-number-field.css.d.ts DELETED
@@ -1,2 +0,0 @@
1
- declare const styles: import("@spectrum-web-components/base").CSSResult;
2
- export default styles;
package/src/spectrum-number-field.css.js DELETED
@@ -1,144 +0,0 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import { css } from '@spectrum-web-components/base';
13
- const styles = css `
14
- :host{--spectrum-stepper-width:var(
15
- --spectrum-global-dimension-size-900
16
- );--spectrum-stepper-border-size:var(
17
- --spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)
18
- );--spectrum-stepper-button-height:calc(var(
19
- --spectrum-alias-single-line-height,
20
- var(--spectrum-global-dimension-size-400)
21
- )/2);--spectrum-stepper-button-width:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-stepper-border-size));--spectrum-stepper-button-padding:calc(var(--spectrum-global-dimension-size-150)/2);--spectrum-stepper-border-radius-reset:0;--spectrum-stepper-border-size-reset:0;--spectrum-stepper-icon-nudge-top:var(--spectrum-global-dimension-size-10);--spectrum-stepper-icon-nudge:var(--spectrum-global-dimension-size-25);--spectrum-stepper-quiet-width:var(--spectrum-global-dimension-size-600);--spectrum-stepper-button-offset:calc(var(--spectrum-stepper-button-width)/2 - var(--spectrum-alias-ui-icon-chevron-size-75)/2);--spectrum-stepper-quiet-button-width:calc(var(--spectrum-stepper-button-width) - var(--spectrum-stepper-button-offset))}#textfield{border-radius:var(
22
- --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
23
- );display:inline-flex;flex-direction:row;flex-wrap:nowrap;line-height:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-stepper-width)}#textfield:before{content:""}:host([dir=ltr]) .buttons{border-top-left-radius:0}:host([dir=rtl]) .buttons{border-top-right-radius:0}:host([dir=ltr]) .buttons{border-top-right-radius:var(
24
- --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
25
- )}:host([dir=rtl]) .buttons{border-top-left-radius:var(
26
- --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
27
- )}:host([dir=ltr]) .buttons{border-bottom-right-radius:var(
28
- --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
29
- )}:host([dir=rtl]) .buttons{border-bottom-left-radius:var(
30
- --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
31
- )}:host([dir=ltr]) .buttons{border-bottom-left-radius:0}:host([dir=rtl]) .buttons{border-bottom-right-radius:0}.buttons{display:block;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-left:var(
32
- --spectrum-stepper-button-padding
33
- )}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-right:var(
34
- --spectrum-stepper-button-padding
35
- )}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-right:var(
36
- --spectrum-stepper-button-padding
37
- )}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-left:var(
38
- --spectrum-stepper-button-padding
39
- )}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-left-width:var(
40
- --spectrum-stepper-border-size-reset
41
- )}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-right-width:var(
42
- --spectrum-stepper-border-size-reset
43
- )}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-top-left-radius:var(
44
- --spectrum-stepper-border-radius-reset
45
- )}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-top-right-radius:var(
46
- --spectrum-stepper-border-radius-reset
47
- )}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-bottom-left-radius:var(
48
- --spectrum-stepper-border-radius-reset
49
- )}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-bottom-right-radius:var(
50
- --spectrum-stepper-border-radius-reset
51
- )}.stepDown,.stepUp{border-width:var(--spectrum-stepper-border-size);box-sizing:border-box;display:flex;height:var(--spectrum-stepper-button-height);margin:0!important;min-width:0;position:relative;width:var(--spectrum-stepper-button-width)}.stepDown .stepper-icon,.stepUp .stepper-icon{margin:0!important;opacity:1}:host([dir=ltr]) .stepUp{border-bottom-right-radius:var(
52
- --spectrum-stepper-border-radius-reset
53
- )}:host([dir=rtl]) .stepUp{border-bottom-left-radius:var(
54
- --spectrum-stepper-border-radius-reset
55
- )}.stepUp{border-bottom:none;padding-top:var(--spectrum-stepper-icon-nudge-top)}:host([dir=ltr]) .stepDown{border-top-right-radius:var(
56
- --spectrum-stepper-border-radius-reset
57
- )}:host([dir=rtl]) .stepDown{border-top-left-radius:var(
58
- --spectrum-stepper-border-radius-reset
59
- )}.stepDown{padding-bottom:var(
60
- --spectrum-stepper-icon-nudge
61
- )}.textfield{flex:1;width:auto}:host([dir=ltr]) .input{border-top-right-radius:var(
62
- --spectrum-stepper-border-radius-reset
63
- )}:host([dir=rtl]) .input{border-top-left-radius:var(
64
- --spectrum-stepper-border-radius-reset
65
- )}:host([dir=ltr]) .input{border-bottom-right-radius:var(
66
- --spectrum-stepper-border-radius-reset
67
- )}:host([dir=rtl]) .input{border-bottom-left-radius:var(
68
- --spectrum-stepper-border-radius-reset
69
- )}.input,.textfield{min-width:0}:host([quiet]) #textfield{border-radius:var(
70
- --spectrum-stepper-border-radius-reset
71
- );width:var(--spectrum-stepper-quiet-width)}:host([quiet]) .buttons{border-radius:var(
72
- --spectrum-stepper-border-radius-reset
73
- )}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-right-width:var(
74
- --spectrum-stepper-border-size-reset
75
- )}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-left-width:var(
76
- --spectrum-stepper-border-size-reset
77
- )}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-left:none}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-right:none}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{padding-right:0}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{padding-left:0}:host([quiet]) .stepDown,:host([quiet]) .stepUp{border-radius:var(--spectrum-stepper-border-radius-reset);border-top:none;justify-content:flex-end;min-width:0;width:var(
78
- --spectrum-stepper-quiet-button-width
79
- )}:host([dir=ltr][quiet]) .stepDown:after,:host([dir=ltr][quiet]) .stepUp:after{right:calc(var(--spectrum-stepper-button-offset)*-1)}:host([dir=rtl][quiet]) .stepDown:after,:host([dir=rtl][quiet]) .stepUp:after{left:calc(var(--spectrum-stepper-button-offset)*-1)}:host([quiet]) .stepDown:after,:host([quiet]) .stepUp:after{content:"";height:100%;position:absolute;width:var(--spectrum-stepper-button-offset)}:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .input,:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .stepDown,:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .stepUp{border-color:var(
80
- --spectrum-textfield-m-texticon-border-color-hover,var(--spectrum-alias-input-border-color-hover)
81
- )}:host([focused]) #textfield{border-color:var(
82
- --spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)
83
- )}:host([focused]) #textfield .stepDown,:host([focused]) #textfield .stepUp{border-color:var(
84
- --spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)
85
- )}:host([focused]) #textfield .input{border-color:var(
86
- --spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)
87
- );box-shadow:none}:host([focused][invalid]) #textfield{border-color:var(
88
- --spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)
89
- )}:host([focused][invalid]) #textfield .stepDown,:host([focused][invalid]) #textfield .stepUp{border-color:var(
90
- --spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)
91
- )}:host([focused][invalid]) #textfield .input{border-color:var(
92
- --spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)
93
- )}:host([keyboard-focused]) #textfield{box-shadow:0 0 0 1px var(
94
- --spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
95
- )}:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{box-shadow:0 0 0 1px var(
96
- --spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
97
- )}:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(
98
- --spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
99
- )}:host([keyboard-focused][invalid]) #textfield{box-shadow:0 0 0 1px var(
100
- --spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)
101
- )}:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(
102
- --spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)
103
- )}:host([keyboard-focused][invalid]) #textfield .buttons{box-shadow:0 0 0 1px var(
104
- --spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)
105
- )}:host([invalid]) #textfield .stepDown,:host([invalid]) #textfield .stepUp{border-color:var(
106
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
107
- )}:host([invalid]) #textfield .input{border-color:var(
108
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
109
- )}:host([invalid][keyboard-focused]) #textfield .input{border-color:var(
110
- --spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)
111
- );box-shadow:0 0 0 1px var(
112
- --spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)
113
- )}:host([invalid][keyboard-focused]) #textfield .buttons{box-shadow:0 0 0 1px var(
114
- --spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)
115
- )}:host([disabled]) #textfield .stepDown,:host([disabled]) #textfield .stepUp{border-color:var(
116
- --spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)
117
- )}.stepDown,.stepUp{border-color:var(
118
- --spectrum-textfield-m-texticon-border-color,var(--spectrum-alias-input-border-color-default)
119
- )}.stepDown:disabled,.stepUp:disabled{border-color:var(
120
- --spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)
121
- )}:host([quiet][disabled]) #textfield .stepDown,:host([quiet][disabled]) #textfield .stepUp{border-color:var(
122
- --spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)
123
- )}:host([quiet]) .stepDown,:host([quiet]) .stepUp{border-color:var(
124
- --spectrum-textfield-m-quiet-texticon-border-color,var(--spectrum-alias-input-border-color-default)
125
- )}:host([quiet]) .stepDown:disabled,:host([quiet]) .stepUp:disabled{border-color:var(
126
- --spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)
127
- )}:host([quiet]) .input{box-shadow:none}:host([quiet][invalid]) #textfield .input{border-color:var(
128
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
129
- )}:host([quiet][invalid]) #textfield .stepDown{border-color:var(
130
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
131
- )}:host([quiet][focused]) #textfield,:host([quiet][keyboard-focused]) #textfield{box-shadow:none}:host([quiet][focused]) #textfield .buttons,:host([quiet][focused]) #textfield .input,:host([quiet][keyboard-focused]) #textfield .buttons,:host([quiet][keyboard-focused]) #textfield .input{box-shadow:0 1px 0 0 var(
132
- --spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
133
- )}:host([quiet][focused]) #textfield .stepDown,:host([quiet][keyboard-focused]) #textfield .stepDown{border-color:var(
134
- --spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
135
- )}:host([quiet][focused][invalid]) #textfield,:host([quiet][keyboard-focused][invalid]) #textfield{box-shadow:none}:host([quiet][focused][invalid]) #textfield .buttons,:host([quiet][focused][invalid]) #textfield .input,:host([quiet][keyboard-focused][invalid]) #textfield .buttons,:host([quiet][keyboard-focused][invalid]) #textfield .input{box-shadow:0 1px 0 0 var(
136
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
137
- )}:host([quiet][focused][invalid]) #textfield .input,:host([quiet][keyboard-focused][invalid]) #textfield .input{border-color:var(
138
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
139
- )}:host([quiet][focused][invalid]) #textfield .stepDown,:host([quiet][keyboard-focused][invalid]) #textfield .stepDown{border-color:var(
140
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
141
- )}
142
- `;
143
- export default styles;
144
- //# sourceMappingURL=spectrum-number-field.css.js.map
package/src/spectrum-number-field.css.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"spectrum-number-field.css.js","sourceRoot":"","sources":["spectrum-number-field.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiIjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 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:var(\n--spectrum-global-dimension-size-900\n);--spectrum-stepper-border-size:var(\n--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-stepper-button-height:calc(var(\n--spectrum-alias-single-line-height,\nvar(--spectrum-global-dimension-size-400)\n)/2);--spectrum-stepper-button-width:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-stepper-border-size));--spectrum-stepper-button-padding:calc(var(--spectrum-global-dimension-size-150)/2);--spectrum-stepper-border-radius-reset:0;--spectrum-stepper-border-size-reset:0;--spectrum-stepper-icon-nudge-top:var(--spectrum-global-dimension-size-10);--spectrum-stepper-icon-nudge:var(--spectrum-global-dimension-size-25);--spectrum-stepper-quiet-width:var(--spectrum-global-dimension-size-600);--spectrum-stepper-button-offset:calc(var(--spectrum-stepper-button-width)/2 - var(--spectrum-alias-ui-icon-chevron-size-75)/2);--spectrum-stepper-quiet-button-width:calc(var(--spectrum-stepper-button-width) - var(--spectrum-stepper-button-offset))}#textfield{border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);display:inline-flex;flex-direction:row;flex-wrap:nowrap;line-height:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-stepper-width)}#textfield:before{content:\"\"}:host([dir=ltr]) .buttons{border-top-left-radius:0}:host([dir=rtl]) .buttons{border-top-right-radius:0}:host([dir=ltr]) .buttons{border-top-right-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=rtl]) .buttons{border-top-left-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr]) .buttons{border-bottom-right-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=rtl]) .buttons{border-bottom-left-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr]) .buttons{border-bottom-left-radius:0}:host([dir=rtl]) .buttons{border-bottom-right-radius:0}.buttons{display:block;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-left:var(\n--spectrum-stepper-button-padding\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-right:var(\n--spectrum-stepper-button-padding\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-right:var(\n--spectrum-stepper-button-padding\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-left:var(\n--spectrum-stepper-button-padding\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-left-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-right-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepDown,.stepUp{border-width:var(--spectrum-stepper-border-size);box-sizing:border-box;display:flex;height:var(--spectrum-stepper-button-height);margin:0!important;min-width:0;position:relative;width:var(--spectrum-stepper-button-width)}.stepDown .stepper-icon,.stepUp .stepper-icon{margin:0!important;opacity:1}:host([dir=ltr]) .stepUp{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepUp{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepUp{border-bottom:none;padding-top:var(--spectrum-stepper-icon-nudge-top)}:host([dir=ltr]) .stepDown{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .stepDown{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.stepDown{padding-bottom:var(\n--spectrum-stepper-icon-nudge\n)}.textfield{flex:1;width:auto}:host([dir=ltr]) .input{border-top-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .input{border-top-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr]) .input{border-bottom-right-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=rtl]) .input{border-bottom-left-radius:var(\n--spectrum-stepper-border-radius-reset\n)}.input,.textfield{min-width:0}:host([quiet]) #textfield{border-radius:var(\n--spectrum-stepper-border-radius-reset\n);width:var(--spectrum-stepper-quiet-width)}:host([quiet]) .buttons{border-radius:var(\n--spectrum-stepper-border-radius-reset\n)}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-right-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-left-width:var(\n--spectrum-stepper-border-size-reset\n)}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-left:none}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-right:none}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{padding-right:0}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{padding-left:0}:host([quiet]) .stepDown,:host([quiet]) .stepUp{border-radius:var(--spectrum-stepper-border-radius-reset);border-top:none;justify-content:flex-end;min-width:0;width:var(\n--spectrum-stepper-quiet-button-width\n)}:host([dir=ltr][quiet]) .stepDown:after,:host([dir=ltr][quiet]) .stepUp:after{right:calc(var(--spectrum-stepper-button-offset)*-1)}:host([dir=rtl][quiet]) .stepDown:after,:host([dir=rtl][quiet]) .stepUp:after{left:calc(var(--spectrum-stepper-button-offset)*-1)}:host([quiet]) .stepDown:after,:host([quiet]) .stepUp:after{content:\"\";height:100%;position:absolute;width:var(--spectrum-stepper-button-offset)}:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .input,:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .stepDown,:host(:not([disabled]):not([invalid]):not([focused]):not([keyboard-focused])) #textfield:hover .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-hover,var(--spectrum-alias-input-border-color-hover)\n)}:host([focused]) #textfield{border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n)}:host([focused]) #textfield .stepDown,:host([focused]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n)}:host([focused]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n);box-shadow:none}:host([focused][invalid]) #textfield{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid]) #textfield .stepDown,:host([focused][invalid]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([keyboard-focused]) #textfield{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([keyboard-focused][invalid]) #textfield{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([keyboard-focused][invalid]) #textfield .stepDown,:host([keyboard-focused][invalid]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([keyboard-focused][invalid]) #textfield .buttons{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([invalid]) #textfield .stepDown,:host([invalid]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([invalid][keyboard-focused]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([invalid][keyboard-focused]) #textfield .buttons{box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([disabled]) #textfield .stepDown,:host([disabled]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)\n)}.stepDown,.stepUp{border-color:var(\n--spectrum-textfield-m-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n)}.stepDown:disabled,.stepUp:disabled{border-color:var(\n--spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)\n)}:host([quiet][disabled]) #textfield .stepDown,:host([quiet][disabled]) #textfield .stepUp{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)\n)}:host([quiet]) .stepDown,:host([quiet]) .stepUp{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n)}:host([quiet]) .stepDown:disabled,:host([quiet]) .stepUp:disabled{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)\n)}:host([quiet]) .input{box-shadow:none}:host([quiet][invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][invalid]) #textfield .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused]) #textfield,:host([quiet][keyboard-focused]) #textfield{box-shadow:none}:host([quiet][focused]) #textfield .buttons,:host([quiet][focused]) #textfield .input,:host([quiet][keyboard-focused]) #textfield .buttons,:host([quiet][keyboard-focused]) #textfield .input{box-shadow:0 1px 0 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([quiet][focused]) #textfield .stepDown,:host([quiet][keyboard-focused]) #textfield .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([quiet][focused][invalid]) #textfield,:host([quiet][keyboard-focused][invalid]) #textfield{box-shadow:none}:host([quiet][focused][invalid]) #textfield .buttons,:host([quiet][focused][invalid]) #textfield .input,:host([quiet][keyboard-focused][invalid]) #textfield .buttons,:host([quiet][keyboard-focused][invalid]) #textfield .input{box-shadow:0 1px 0 0 var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused][invalid]) #textfield .input,:host([quiet][keyboard-focused][invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused][invalid]) #textfield .stepDown,:host([quiet][keyboard-focused][invalid]) #textfield .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}\n`;\nexport default styles;"]}