@spectrum-web-components/number-field 0.5.13 → 0.6.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.
Files changed (11) hide show
  1. package/custom-elements.json +7 -7
  2. package/package.json +6 -6
  3. package/src/number-field.css.dev.js +13 -77
  4. package/src/number-field.css.dev.js.map +2 -2
  5. package/src/number-field.css.js +13 -77
  6. package/src/number-field.css.js.map +2 -2
  7. package/src/spectrum-config.js +213 -40
  8. package/src/spectrum-number-field.css.dev.js +13 -77
  9. package/src/spectrum-number-field.css.dev.js.map +2 -2
  10. package/src/spectrum-number-field.css.js +13 -77
  11. package/src/spectrum-number-field.css.js.map +2 -2
package/src/spectrum-config.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- Copyright 2020 Adobe. All rights reserved.
2
+ Copyright 2023 Adobe. All rights reserved.
3
3
  This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
4
  you may not use this file except in compliance with the License. You may obtain a copy
5
5
  of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -10,67 +10,240 @@ OF ANY KIND, either express or implied. See the License for the specific languag
10
10
  governing permissions and limitations under the License.
11
11
  */
12
12
 
13
+ // @ts-check
14
+ import {
15
+ builder,
16
+ converterFor,
17
+ } from '../../../tasks/process-spectrum-utils.js';
18
+
19
+ // Prepopulate a converter with the base class name of the package in question.
20
+ const converter = converterFor('spectrum-Stepper');
21
+
22
+ /**
23
+ * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
24
+ */
13
25
  const config = {
14
- spectrum: 'stepper',
15
- components: [
26
+ conversions: [
16
27
  {
17
- name: 'number-field',
18
- host: {
19
- selector: '.spectrum-Stepper',
20
- shadowSelector: '#textfield',
21
- },
22
- attributes: [
28
+ inPackage: '@spectrum-css/stepper',
29
+ outPackage: 'number-field',
30
+ fileName: 'number-field',
31
+ hoistCustomPropertiesFrom: 'spectrum-Stepper',
32
+ components: [
23
33
  {
24
- type: 'boolean',
25
- name: 'quiet',
26
- selector: '.spectrum-Stepper--quiet',
34
+ find: builder.pseudoClass('hover'),
35
+ replace: builder.pseudoClass('hover'),
36
+ hoist: true,
27
37
  },
28
38
  {
29
- type: 'boolean',
30
- name: 'disabled',
31
- selector: '.is-disabled',
39
+ find: {
40
+ type: 'pseudo-class',
41
+ kind: 'not',
42
+ selectors: [[builder.class('is-focused')]],
43
+ },
44
+ replace: {
45
+ type: 'pseudo-class',
46
+ kind: 'not',
47
+ selectors: [[builder.attribute('focused')]],
48
+ },
49
+ hoist: true,
32
50
  },
33
51
  {
34
- type: 'boolean',
35
- name: 'invalid',
36
- selector: '.is-invalid',
52
+ find: {
53
+ type: 'pseudo-class',
54
+ kind: 'not',
55
+ selectors: [[builder.class('is-disabled')]],
56
+ },
57
+ replace: {
58
+ type: 'pseudo-class',
59
+ kind: 'not',
60
+ selectors: [[builder.attribute('disabled')]],
61
+ },
62
+ hoist: true,
37
63
  },
38
64
  {
39
- type: 'boolean',
40
- name: 'focused',
41
- selector: '.is-focused',
65
+ find: {
66
+ type: 'pseudo-class',
67
+ kind: 'not',
68
+ selectors: [[builder.class('is-invalid')]],
69
+ },
70
+ replace: {
71
+ type: 'pseudo-class',
72
+ kind: 'not',
73
+ selectors: [[builder.attribute('invalid')]],
74
+ },
75
+ hoist: true,
42
76
  },
43
77
  {
44
- type: 'boolean',
45
- name: 'keyboard-focused',
46
- selector: '.is-keyboardFocused',
47
- },
48
- ],
49
- classes: [
50
- {
51
- selector: '.spectrum-Stepper-buttons',
52
- name: 'buttons',
78
+ exactSelector: true,
79
+ find: [builder.class('spectrum-Stepper--quiet')],
80
+ replace: [
81
+ {
82
+ replace: builder.attribute('quiet'),
83
+ hoist: true,
84
+ },
85
+ {
86
+ replace: builder.combinator(' '),
87
+ },
88
+ {
89
+ replace: builder.id('textfield'),
90
+ },
91
+ ],
53
92
  },
54
93
  {
55
- selector: '.spectrum-Stepper-stepDown',
56
- name: 'stepDown',
94
+ expandSelector: true,
95
+ find: [
96
+ builder.class('spectrum-Stepper--quiet'),
97
+ builder.class('is-disabled'),
98
+ ],
99
+ replace: [
100
+ {
101
+ replace: builder.attribute('quiet'),
102
+ hoist: true,
103
+ },
104
+ {
105
+ replace: builder.combinator(' '),
106
+ },
107
+ {
108
+ replace: builder.id('textfield'),
109
+ },
110
+ {
111
+ replace: builder.combinator(' '),
112
+ },
113
+ ],
57
114
  },
58
115
  {
59
- selector: '.spectrum-Stepper-stepUp',
60
- name: 'stepUp',
116
+ exactSelector: true,
117
+ find: [
118
+ builder.class('spectrum-Stepper--quiet'),
119
+ builder.class('is-focused'),
120
+ ],
121
+ replace: [
122
+ {
123
+ replace: builder.attribute('quiet'),
124
+ hoist: true,
125
+ },
126
+ {
127
+ replace: builder.attribute('focused'),
128
+ hoist: true,
129
+ },
130
+ {
131
+ replace: builder.combinator(' '),
132
+ },
133
+ {
134
+ replace: builder.id('textfield'),
135
+ },
136
+ {
137
+ replace: builder.combinator(' '),
138
+ },
139
+ ],
61
140
  },
62
141
  {
63
- selector: '.spectrum-Stepper-textfield',
64
- name: 'textfield',
142
+ exactSelector: true,
143
+ find: [
144
+ builder.class('spectrum-Stepper--quiet'),
145
+ builder.class('is-keyboardFocused'),
146
+ ],
147
+ replace: [
148
+ {
149
+ replace: builder.attribute('quiet'),
150
+ hoist: true,
151
+ },
152
+ {
153
+ replace: builder.attribute('keyboard-focused'),
154
+ hoist: true,
155
+ },
156
+ {
157
+ replace: builder.combinator(' '),
158
+ },
159
+ {
160
+ replace: builder.id('textfield'),
161
+ },
162
+ {
163
+ replace: builder.combinator(' '),
164
+ },
165
+ ],
65
166
  },
66
167
  {
67
- selector: '.spectrum-Icon',
68
- name: 'stepper-icon',
168
+ exactSelector: true,
169
+ find: [
170
+ builder.class('spectrum-Stepper--quiet'),
171
+ builder.class('is-focused'),
172
+ builder.class('is-invalid'),
173
+ ],
174
+ replace: [
175
+ {
176
+ replace: builder.attribute('quiet'),
177
+ hoist: true,
178
+ },
179
+ {
180
+ replace: builder.attribute('focused'),
181
+ hoist: true,
182
+ },
183
+ {
184
+ replace: builder.attribute('invalid'),
185
+ hoist: true,
186
+ },
187
+ {
188
+ replace: builder.combinator(' '),
189
+ },
190
+ {
191
+ replace: builder.id('textfield'),
192
+ },
193
+ {
194
+ replace: builder.combinator(' '),
195
+ },
196
+ ],
69
197
  },
70
198
  {
71
- selector: '.spectrum-Stepper-input',
72
- name: 'input',
199
+ exactSelector: true,
200
+ find: [
201
+ builder.class('spectrum-Stepper--quiet'),
202
+ builder.class('is-keyboardFocused'),
203
+ builder.class('is-invalid'),
204
+ ],
205
+ replace: [
206
+ {
207
+ replace: builder.attribute('quiet'),
208
+ hoist: true,
209
+ },
210
+ {
211
+ replace: builder.attribute('keyboard-focused'),
212
+ hoist: true,
213
+ },
214
+ {
215
+ replace: builder.attribute('invalid'),
216
+ hoist: true,
217
+ },
218
+ {
219
+ replace: builder.combinator(' '),
220
+ },
221
+ {
222
+ replace: builder.id('textfield'),
223
+ },
224
+ {
225
+ replace: builder.combinator(' '),
226
+ },
227
+ ],
73
228
  },
229
+ converter.classToId('spectrum-Stepper', 'textfield'),
230
+ converter.classToAttribute('spectrum-Stepper--quiet'),
231
+ converter.classToAttribute('is-disabled', 'disabled'),
232
+ converter.classToAttribute('is-invalid', 'invalid'),
233
+ converter.classToAttribute('is-focused', 'focused'),
234
+ converter.classToAttribute(
235
+ 'is-keyboardFocused',
236
+ 'keyboard-focused'
237
+ ),
238
+ converter.classToClass('spectrum-Stepper-buttons', 'buttons'),
239
+ converter.classToClass('spectrum-Stepper-stepDown', 'stepDown'),
240
+ converter.classToClass('spectrum-Stepper-stepUp', 'stepUp'),
241
+ converter.classToClass(
242
+ 'spectrum-Stepper-textfield',
243
+ 'textfield'
244
+ ),
245
+ converter.classToClass('spectrum-Icon', 'stepper-icon'),
246
+ converter.classToClass('spectrum-Stepper-input', 'input'),
74
247
  ],
75
248
  },
76
249
  ],
package/src/spectrum-number-field.css.dev.js CHANGED
@@ -1,16 +1,14 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :host{--spectrum-stepper-width:var(
5
- --spectrum-global-dimension-size-900
6
- );--spectrum-stepper-border-size:var(
4
+ :host{--spectrum-stepper-width:var(--spectrum-global-dimension-size-900);--spectrum-stepper-border-size:var(
7
5
  --spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)
8
6
  );--spectrum-stepper-button-height:calc(var(
9
7
  --spectrum-alias-single-line-height,
10
8
  var(--spectrum-global-dimension-size-400)
11
9
  )/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(
12
10
  --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
13
- );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(
11
+ );display:inline-flex;flex-flow:row;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(
14
12
  --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
15
13
  )}:host([dir=rtl]) .buttons{border-top-left-radius:var(
16
14
  --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
@@ -18,71 +16,15 @@ var(--spectrum-global-dimension-size-400)
18
16
  --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
19
17
  )}:host([dir=rtl]) .buttons{border-bottom-left-radius:var(
20
18
  --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
21
- )}: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(
22
- --spectrum-stepper-button-padding
23
- )}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-right:var(
24
- --spectrum-stepper-button-padding
25
- )}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{padding-right:var(
26
- --spectrum-stepper-button-padding
27
- )}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-left:var(
28
- --spectrum-stepper-button-padding
29
- )}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-left-width:var(
30
- --spectrum-stepper-border-size-reset
31
- )}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-right-width:var(
32
- --spectrum-stepper-border-size-reset
33
- )}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-top-left-radius:var(
34
- --spectrum-stepper-border-radius-reset
35
- )}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-top-right-radius:var(
36
- --spectrum-stepper-border-radius-reset
37
- )}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-bottom-left-radius:var(
38
- --spectrum-stepper-border-radius-reset
39
- )}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-bottom-right-radius:var(
40
- --spectrum-stepper-border-radius-reset
41
- )}.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(
42
- --spectrum-stepper-border-radius-reset
43
- )}:host([dir=rtl]) .stepUp{border-bottom-left-radius:var(
44
- --spectrum-stepper-border-radius-reset
45
- )}.stepUp{border-bottom:none;padding-top:var(--spectrum-stepper-icon-nudge-top)}:host([dir=ltr]) .stepDown{border-top-right-radius:var(
46
- --spectrum-stepper-border-radius-reset
47
- )}:host([dir=rtl]) .stepDown{border-top-left-radius:var(
48
- --spectrum-stepper-border-radius-reset
49
- )}.stepDown{padding-bottom:var(
50
- --spectrum-stepper-icon-nudge
51
- )}.textfield{flex:1;width:auto}:host([dir=ltr]) .input{border-top-right-radius:var(
52
- --spectrum-stepper-border-radius-reset
53
- )}:host([dir=rtl]) .input{border-top-left-radius:var(
54
- --spectrum-stepper-border-radius-reset
55
- )}:host([dir=ltr]) .input{border-bottom-right-radius:var(
56
- --spectrum-stepper-border-radius-reset
57
- )}:host([dir=rtl]) .input{border-bottom-left-radius:var(
58
- --spectrum-stepper-border-radius-reset
59
- )}.input,.textfield{min-width:0}:host([quiet]) #textfield{border-radius:var(
60
- --spectrum-stepper-border-radius-reset
61
- );width:var(--spectrum-stepper-quiet-width)}:host([quiet]) .buttons{border-radius:var(
62
- --spectrum-stepper-border-radius-reset
63
- )}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-right-width:var(
64
- --spectrum-stepper-border-size-reset
65
- )}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-left-width:var(
66
- --spectrum-stepper-border-size-reset
67
- )}: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(
68
- --spectrum-stepper-quiet-button-width
69
- )}: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(
19
+ )}: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(--spectrum-stepper-button-padding)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp,:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-right:var(--spectrum-stepper-button-padding)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-left:var(--spectrum-stepper-button-padding)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-left-width:var(--spectrum-stepper-border-size-reset)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-right-width:var(--spectrum-stepper-border-size-reset)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-top-left-radius:var(--spectrum-stepper-border-radius-reset)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-top-right-radius:var(--spectrum-stepper-border-radius-reset)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-bottom-left-radius:var(--spectrum-stepper-border-radius-reset)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-bottom-right-radius:var(--spectrum-stepper-border-radius-reset)}.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(--spectrum-stepper-border-radius-reset)}:host([dir=rtl]) .stepUp{border-bottom-left-radius:var(--spectrum-stepper-border-radius-reset)}.stepUp{border-bottom:none;padding-top:var(--spectrum-stepper-icon-nudge-top)}:host([dir=ltr]) .stepDown{border-top-right-radius:var(--spectrum-stepper-border-radius-reset)}:host([dir=rtl]) .stepDown{border-top-left-radius:var(--spectrum-stepper-border-radius-reset)}.stepDown{padding-bottom:var(--spectrum-stepper-icon-nudge)}.textfield{flex:1;width:auto}:host([dir=ltr]) .input{border-top-right-radius:var(--spectrum-stepper-border-radius-reset)}:host([dir=rtl]) .input{border-top-left-radius:var(--spectrum-stepper-border-radius-reset)}:host([dir=ltr]) .input{border-bottom-right-radius:var(--spectrum-stepper-border-radius-reset)}:host([dir=rtl]) .input{border-bottom-left-radius:var(--spectrum-stepper-border-radius-reset)}.input,.textfield{min-width:0}:host([quiet]) #textfield{border-radius:var(--spectrum-stepper-border-radius-reset);width:var(--spectrum-stepper-quiet-width)}:host([quiet]) .buttons{border-radius:var(--spectrum-stepper-border-radius-reset)}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-right-width:var(--spectrum-stepper-border-size-reset)}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-left-width:var(--spectrum-stepper-border-size-reset)}: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(--spectrum-stepper-quiet-button-width)}:host([dir=ltr][quiet]) .stepDown:after,:host([dir=ltr][quiet]) .stepUp:after{right:calc(var(--spectrum-stepper-button-offset)*-1)}:host([dir=rtl][quiet]) .stepDown:after,:host([dir=rtl][quiet]) .stepUp:after{left:calc(var(--spectrum-stepper-button-offset)*-1)}:host([quiet]) .stepDown:after,:host([quiet]) .stepUp:after{content:"";height:100%;position:absolute;width:var(--spectrum-stepper-button-offset)}:host(:hover:not([disabled]):not([invalid]):not([focused])) #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(
70
20
  --spectrum-textfield-m-texticon-border-color-hover,var(--spectrum-alias-input-border-color-hover)
71
- )}:host([focused]) #textfield{border-color:var(
72
- --spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)
73
- )}:host([focused]) #textfield .stepDown,:host([focused]) #textfield .stepUp{border-color:var(
21
+ )}:host([focused]) #textfield,:host([focused]) #textfield .stepDown,:host([focused]) #textfield .stepUp{border-color:var(
74
22
  --spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)
75
23
  )}:host([focused]) #textfield .input{border-color:var(
76
24
  --spectrum-textfield-m-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)
77
- );box-shadow:none}:host([focused][invalid]) #textfield{border-color:var(
78
- --spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)
79
- )}:host([focused][invalid]) #textfield .stepDown,:host([focused][invalid]) #textfield .stepUp{border-color:var(
25
+ );box-shadow:none}:host([focused][invalid]) #textfield,:host([focused][invalid]) #textfield .input,:host([focused][invalid]) #textfield .stepDown,:host([focused][invalid]) #textfield .stepUp{border-color:var(
80
26
  --spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)
81
- )}:host([focused][invalid]) #textfield .input{border-color:var(
82
- --spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)
83
- )}:host([keyboard-focused]) #textfield{box-shadow:0 0 0 1px var(
84
- --spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
85
- )}:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{box-shadow:0 0 0 1px var(
27
+ )}:host([keyboard-focused]) #textfield,:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{box-shadow:0 0 0 1px var(
86
28
  --spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
87
29
  )}:host([keyboard-focused]) #textfield .input,:host([keyboard-focused]) #textfield .stepDown,:host([keyboard-focused]) #textfield .stepUp{border-color:var(
88
30
  --spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
@@ -92,9 +34,7 @@ var(--spectrum-global-dimension-size-400)
92
34
  --spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)
93
35
  )}:host([keyboard-focused][invalid]) #textfield .buttons{box-shadow:0 0 0 1px var(
94
36
  --spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)
95
- )}:host([invalid]) #textfield .stepDown,:host([invalid]) #textfield .stepUp{border-color:var(
96
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
97
- )}:host([invalid]) #textfield .input{border-color:var(
37
+ )}:host([invalid]) #textfield .input,:host([invalid]) #textfield .stepDown,:host([invalid]) #textfield .stepUp{border-color:var(
98
38
  --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
99
39
  )}:host([invalid][keyboard-focused]) #textfield .input{border-color:var(
100
40
  --spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)
@@ -114,21 +54,17 @@ var(--spectrum-global-dimension-size-400)
114
54
  --spectrum-textfield-m-quiet-texticon-border-color,var(--spectrum-alias-input-border-color-default)
115
55
  )}:host([quiet]) .stepDown:disabled,:host([quiet]) .stepUp:disabled{border-color:var(
116
56
  --spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)
117
- )}:host([quiet]) .input{box-shadow:none}:host([quiet][invalid]) #textfield .input{border-color:var(
118
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
119
- )}:host([quiet][invalid]) #textfield .stepDown{border-color:var(
57
+ )}:host([quiet]) .input{box-shadow:none}:host([quiet][invalid]) .input,:host([quiet][invalid]) .stepDown{border-color:var(
120
58
  --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
121
- )}: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(
59
+ )}:host([quiet][focused]) #textfield,:host([quiet][keyboard-focused]) #textfield{box-shadow:none}:host([quiet][focused]) .buttons,:host([quiet][focused]) .input,:host([quiet][keyboard-focused]) .buttons,:host([quiet][keyboard-focused]) .input{box-shadow:0 1px 0 0 var(
122
60
  --spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
123
- )}:host([quiet][focused]) #textfield .stepDown,:host([quiet][keyboard-focused]) #textfield .stepDown{border-color:var(
61
+ )}:host([quiet][focused]) .stepDown,:host([quiet][keyboard-focused]) .stepDown{border-color:var(
124
62
  --spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
125
- )}: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(
126
- --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
127
- )}:host([quiet][focused][invalid]) #textfield .input,:host([quiet][keyboard-focused][invalid]) #textfield .input{border-color:var(
63
+ )}:host([quiet][focused][invalid]) #textfield,:host([quiet][keyboard-focused][invalid]) #textfield{box-shadow:none}:host([quiet][focused][invalid]) .buttons,:host([quiet][focused][invalid]) .input,:host([quiet][keyboard-focused][invalid]) .buttons,:host([quiet][keyboard-focused][invalid]) .input{box-shadow:0 1px 0 0 var(
128
64
  --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
129
- )}:host([quiet][focused][invalid]) #textfield .stepDown,:host([quiet][keyboard-focused][invalid]) #textfield .stepDown{border-color:var(
65
+ )}:host([quiet][focused][invalid]) .input,:host([quiet][focused][invalid]) .stepDown,:host([quiet][keyboard-focused][invalid]) .input,:host([quiet][keyboard-focused][invalid]) .stepDown{border-color:var(
130
66
  --spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)
131
- )}@media (forced-colors:active){#textfield{--spectrum-textfield-m-quiet-texticon-border-color-disabled:GrayText;--spectrum-textfield-m-texticon-border-color-disabled:GrayText;--spectrum-textfield-m-texticon-border-color-hover:Highlight;--spectrum-textfield-m-texticon-border-color-invalid:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-key-focus:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus:Highlight;--spectrum-textfield-m-texticon-border-color-key-focus:Highlight;--spectrum-textfield-m-texticon-border-color-mouse-focus:Highlight;--spectrum-textfield-m-texticon-focus-ring-border-width:2px}:host([keyboard-focused]) #textfield{outline:2px solid var(
67
+ )}@media (forced-colors:active){:host{--spectrum-textfield-m-quiet-texticon-border-color-disabled:GrayText;--spectrum-textfield-m-texticon-border-color-disabled:GrayText;--spectrum-textfield-m-texticon-border-color-hover:Highlight;--spectrum-textfield-m-texticon-border-color-invalid:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-key-focus:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus:Highlight;--spectrum-textfield-m-texticon-border-color-key-focus:Highlight;--spectrum-textfield-m-texticon-border-color-mouse-focus:Highlight;--spectrum-textfield-m-texticon-focus-ring-border-width:2px}:host([keyboard-focused]) #textfield{outline:2px solid var(
132
68
  --spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)
133
69
  )}:host([keyboard-focused]) #textfield .buttons,:host([keyboard-focused]) #textfield .input{--spectrum-textfield-m-texticon-border-color:ButtonText}:host([quiet][focused]) #textfield,:host([quiet][keyboard-focused]) #textfield{outline: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 var(
134
70
  --spectrum-textfield-m-texticon-focus-ring-border-width,var(--spectrum-alias-component-focusring-size)
package/src/spectrum-number-field.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-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: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)}@media (forced-colors:active){#textfield{--spectrum-textfield-m-quiet-texticon-border-color-disabled:GrayText;--spectrum-textfield-m-texticon-border-color-disabled:GrayText;--spectrum-textfield-m-texticon-border-color-hover:Highlight;--spectrum-textfield-m-texticon-border-color-invalid:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-key-focus:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus:Highlight;--spectrum-textfield-m-texticon-border-color-key-focus:Highlight;--spectrum-textfield-m-texticon-border-color-mouse-focus:Highlight;--spectrum-textfield-m-texticon-focus-ring-border-width:2px}:host([keyboard-focused]) #textfield{outline:2px solid 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{--spectrum-textfield-m-texticon-border-color:ButtonText}:host([quiet][focused]) #textfield,:host([quiet][keyboard-focused]) #textfield{outline: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 var(\n--spectrum-textfield-m-texticon-focus-ring-border-width,var(--spectrum-alias-component-focusring-size)\n) 0 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n);forced-color-adjust: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 var(\n--spectrum-textfield-m-texticon-focus-ring-border-width,var(--spectrum-alias-component-focusring-size)\n) 0 0 var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n);forced-color-adjust:none}}\n`;\nexport default styles;"],
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;AA4If,eAAe;",
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:var(--spectrum-global-dimension-size-900);--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-flow:row;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(--spectrum-stepper-button-padding)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp,:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-right:var(--spectrum-stepper-button-padding)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{padding-left:var(--spectrum-stepper-button-padding)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-left-width:var(--spectrum-stepper-border-size-reset)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-right-width:var(--spectrum-stepper-border-size-reset)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-top-left-radius:var(--spectrum-stepper-border-radius-reset)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-top-right-radius:var(--spectrum-stepper-border-radius-reset)}:host([dir=ltr]) .stepDown,:host([dir=ltr]) .stepUp{border-bottom-left-radius:var(--spectrum-stepper-border-radius-reset)}:host([dir=rtl]) .stepDown,:host([dir=rtl]) .stepUp{border-bottom-right-radius:var(--spectrum-stepper-border-radius-reset)}.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(--spectrum-stepper-border-radius-reset)}:host([dir=rtl]) .stepUp{border-bottom-left-radius:var(--spectrum-stepper-border-radius-reset)}.stepUp{border-bottom:none;padding-top:var(--spectrum-stepper-icon-nudge-top)}:host([dir=ltr]) .stepDown{border-top-right-radius:var(--spectrum-stepper-border-radius-reset)}:host([dir=rtl]) .stepDown{border-top-left-radius:var(--spectrum-stepper-border-radius-reset)}.stepDown{padding-bottom:var(--spectrum-stepper-icon-nudge)}.textfield{flex:1;width:auto}:host([dir=ltr]) .input{border-top-right-radius:var(--spectrum-stepper-border-radius-reset)}:host([dir=rtl]) .input{border-top-left-radius:var(--spectrum-stepper-border-radius-reset)}:host([dir=ltr]) .input{border-bottom-right-radius:var(--spectrum-stepper-border-radius-reset)}:host([dir=rtl]) .input{border-bottom-left-radius:var(--spectrum-stepper-border-radius-reset)}.input,.textfield{min-width:0}:host([quiet]) #textfield{border-radius:var(--spectrum-stepper-border-radius-reset);width:var(--spectrum-stepper-quiet-width)}:host([quiet]) .buttons{border-radius:var(--spectrum-stepper-border-radius-reset)}:host([dir=ltr][quiet]) .stepDown,:host([dir=ltr][quiet]) .stepUp{border-right-width:var(--spectrum-stepper-border-size-reset)}:host([dir=rtl][quiet]) .stepDown,:host([dir=rtl][quiet]) .stepUp{border-left-width:var(--spectrum-stepper-border-size-reset)}: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(--spectrum-stepper-quiet-button-width)}:host([dir=ltr][quiet]) .stepDown:after,:host([dir=ltr][quiet]) .stepUp:after{right:calc(var(--spectrum-stepper-button-offset)*-1)}:host([dir=rtl][quiet]) .stepDown:after,:host([dir=rtl][quiet]) .stepUp:after{left:calc(var(--spectrum-stepper-button-offset)*-1)}:host([quiet]) .stepDown:after,:host([quiet]) .stepUp:after{content:\"\";height:100%;position:absolute;width:var(--spectrum-stepper-button-offset)}:host(:hover:not([disabled]):not([invalid]):not([focused])) #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--spectrum-textfield-m-texticon-border-color-hover,var(--spectrum-alias-input-border-color-hover)\n)}:host([focused]) #textfield,: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,:host([focused][invalid]) #textfield .input,: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([keyboard-focused]) #textfield,: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 .input,: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][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]) .input,:host([quiet][invalid]) .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused]) #textfield,:host([quiet][keyboard-focused]) #textfield{box-shadow:none}:host([quiet][focused]) .buttons,:host([quiet][focused]) .input,:host([quiet][keyboard-focused]) .buttons,:host([quiet][keyboard-focused]) .input{box-shadow:0 1px 0 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([quiet][focused]) .stepDown,:host([quiet][keyboard-focused]) .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([quiet][focused][invalid]) #textfield,:host([quiet][keyboard-focused][invalid]) #textfield{box-shadow:none}:host([quiet][focused][invalid]) .buttons,:host([quiet][focused][invalid]) .input,:host([quiet][keyboard-focused][invalid]) .buttons,:host([quiet][keyboard-focused][invalid]) .input{box-shadow:0 1px 0 0 var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([quiet][focused][invalid]) .input,:host([quiet][focused][invalid]) .stepDown,:host([quiet][keyboard-focused][invalid]) .input,:host([quiet][keyboard-focused][invalid]) .stepDown{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}@media (forced-colors:active){:host{--spectrum-textfield-m-quiet-texticon-border-color-disabled:GrayText;--spectrum-textfield-m-texticon-border-color-disabled:GrayText;--spectrum-textfield-m-texticon-border-color-hover:Highlight;--spectrum-textfield-m-texticon-border-color-invalid:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-key-focus:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus:Highlight;--spectrum-textfield-m-texticon-border-color-key-focus:Highlight;--spectrum-textfield-m-texticon-border-color-mouse-focus:Highlight;--spectrum-textfield-m-texticon-focus-ring-border-width:2px}:host([keyboard-focused]) #textfield{outline:2px solid 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{--spectrum-textfield-m-texticon-border-color:ButtonText}:host([quiet][focused]) #textfield,:host([quiet][keyboard-focused]) #textfield{outline: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 var(\n--spectrum-textfield-m-texticon-focus-ring-border-width,var(--spectrum-alias-component-focusring-size)\n) 0 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n);forced-color-adjust: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 var(\n--spectrum-textfield-m-texticon-focus-ring-border-width,var(--spectrum-alias-component-focusring-size)\n) 0 0 var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n);forced-color-adjust:none}}\n`;\nexport default styles;"],
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;AA4Ef,eAAe;",
6
6
  "names": []
7
7
  }