@spectrum-web-components/infield-button 0.39.4

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 (44) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +122 -0
  3. package/custom-elements.json +119 -0
  4. package/package.json +74 -0
  5. package/sp-infield-button.d.ts +6 -0
  6. package/sp-infield-button.dev.js +4 -0
  7. package/sp-infield-button.dev.js.map +7 -0
  8. package/sp-infield-button.js +2 -0
  9. package/sp-infield-button.js.map +7 -0
  10. package/src/InfieldButton.d.ts +25 -0
  11. package/src/InfieldButton.dev.js +49 -0
  12. package/src/InfieldButton.dev.js.map +7 -0
  13. package/src/InfieldButton.js +6 -0
  14. package/src/InfieldButton.js.map +7 -0
  15. package/src/index.d.ts +1 -0
  16. package/src/index.dev.js +3 -0
  17. package/src/index.dev.js.map +7 -0
  18. package/src/index.js +2 -0
  19. package/src/index.js.map +7 -0
  20. package/src/infield-button.css.d.ts +2 -0
  21. package/src/infield-button.css.dev.js +222 -0
  22. package/src/infield-button.css.dev.js.map +7 -0
  23. package/src/infield-button.css.js +219 -0
  24. package/src/infield-button.css.js.map +7 -0
  25. package/src/spectrum-config.js +60 -0
  26. package/src/spectrum-infield-button.css.d.ts +2 -0
  27. package/src/spectrum-infield-button.css.dev.js +222 -0
  28. package/src/spectrum-infield-button.css.dev.js.map +7 -0
  29. package/src/spectrum-infield-button.css.js +219 -0
  30. package/src/spectrum-infield-button.css.js.map +7 -0
  31. package/stories/index.js +113 -0
  32. package/stories/index.js.map +7 -0
  33. package/stories/infield-button-sizes.stories.js +88 -0
  34. package/stories/infield-button-sizes.stories.js.map +7 -0
  35. package/stories/infield-button.stories.js +45 -0
  36. package/stories/infield-button.stories.js.map +7 -0
  37. package/test/benchmark/basic-test.js +8 -0
  38. package/test/benchmark/basic-test.js.map +7 -0
  39. package/test/infield-button-sizes.test-vrt.js +5 -0
  40. package/test/infield-button-sizes.test-vrt.js.map +7 -0
  41. package/test/infield-button.test-vrt.js +5 -0
  42. package/test/infield-button.test-vrt.js.map +7 -0
  43. package/test/infield-button.test.js +22 -0
  44. package/test/infield-button.test.js.map +7 -0
package/src/spectrum-infield-button.css.dev.js ADDED
@@ -0,0 +1,222 @@
1
+ "use strict";
2
+ import { css } from "@spectrum-web-components/base";
3
+ const styles = css`
4
+ :host{--spectrum-infield-button-height:var(--spectrum-component-height-100);--spectrum-infield-button-width:var(--spectrum-component-height-100);--spectrum-infield-button-stacked-border-radius-reset:var(
5
+ --spectrum-in-field-button-fill-stacked-inner-border-rounding
6
+ );--spectrum-infield-button-edge-to-fill:var(
7
+ --spectrum-in-field-button-edge-to-fill
8
+ );--spectrum-infield-button-inner-edge-to-fill:var(
9
+ --spectrum-in-field-button-stacked-inner-edge-to-fill
10
+ );--spectrum-infield-button-fill-padding:0px;--spectrum-infield-button-stacked-fill-padding-inline:var(
11
+ --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium
12
+ );--spectrum-infield-button-stacked-fill-padding-outer:var(
13
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium
14
+ );--spectrum-infield-button-stacked-fill-padding-inner:var(
15
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium
16
+ );--spectrum-infield-button-animation-duration:var(
17
+ --spectrum-animation-duration-100
18
+ );--spectrum-infield-button-icon-color:var(
19
+ --spectrum-neutral-content-color-default
20
+ );--spectrum-infield-button-icon-color-hover:var(
21
+ --spectrum-neutral-content-color-hover
22
+ );--spectrum-infield-button-icon-color-down:var(
23
+ --spectrum-neutral-content-color-down
24
+ );--spectrum-infield-button-icon-color-key-focus:var(
25
+ --spectrum-neutral-content-color-key-focus
26
+ )}:host([disabled]){--mod-infield-button-background-color:var(
27
+ --mod-infield-button-background-color-disabled,var(--spectrum-disabled-background-color)
28
+ );--mod-infield-button-background-color-hover:var(
29
+ --mod-infield-button-background-color-hover-disabled,var(--spectrum-disabled-background-color)
30
+ );--mod-infield-button-background-color-down:var(
31
+ --mod-infield-button-background-color-down-disabled,var(--spectrum-disabled-background-color)
32
+ );--mod-infield-button-border-color:var(
33
+ --mod-infield-button-border-color-disabled,var(--spectrum-disabled-background-color)
34
+ );--mod-infield-button-icon-color:var(
35
+ --mod-infield-button-icon-color-disabled,var(--spectrum-disabled-content-color)
36
+ );--mod-infield-button-icon-color-hover:var(
37
+ --mod-infield-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color)
38
+ );--mod-infield-button-icon-color-down:var(
39
+ --mod-infield-button-icon-color-down-disabled,var(--spectrum-disabled-content-color)
40
+ );--mod-infield-button-icon-color-key-focus:var(
41
+ --mod-infield-button-icon-color-key-focus-disabled,var(--spectrum-disabled-content-color)
42
+ )}:host([size=s]){--spectrum-infield-button-height:var(--spectrum-component-height-75);--spectrum-infield-button-width:var(--spectrum-component-height-75);--spectrum-infield-button-stacked-fill-padding-inline:var(
43
+ --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small
44
+ );--spectrum-infield-button-stacked-fill-padding-outer:var(
45
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small
46
+ );--spectrum-infield-button-stacked-fill-padding-inner:var(
47
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small
48
+ )}:host([size=l]){--spectrum-infield-button-height:var(--spectrum-component-height-200);--spectrum-infield-button-width:var(--spectrum-component-height-200);--spectrum-infield-button-stacked-fill-padding-inline:var(
49
+ --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large
50
+ );--spectrum-infield-button-stacked-fill-padding-outer:var(
51
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large
52
+ );--spectrum-infield-button-stacked-fill-padding-inner:var(
53
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large
54
+ )}:host([size=xl]){--spectrum-infield-button-height:var(--spectrum-component-height-300);--spectrum-infield-button-width:var(--spectrum-component-height-300);--spectrum-infield-button-stacked-fill-padding-inline:var(
55
+ --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large
56
+ );--spectrum-infield-button-stacked-fill-padding-outer:var(
57
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large
58
+ );--spectrum-infield-button-stacked-fill-padding-inner:var(
59
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large
60
+ )}:host([block=end]),:host([block=start]){--mod-infield-button-width:var(
61
+ --mod-infield-button-width-stacked,var(--spectrum-in-field-button-width-stacked-medium)
62
+ )}:host([block=end][size=s]),:host([block=start][size=s]){--mod-infield-button-width:var(
63
+ --mod-infield-button-width-stacked,var(--spectrum-in-field-button-width-stacked-small)
64
+ )}:host([block=end][size=l]),:host([block=start][size=l]){--mod-infield-button-width:var(
65
+ --mod-infield-button-width-stacked,var(--spectrum-in-field-button-width-stacked-large)
66
+ )}:host([block=end][size=xl]),:host([block=start][size=xl]){--mod-infield-button-width:var(
67
+ --mod-infield-button-width-stacked,var(--spectrum-in-field-button-width-stacked-extra-large)
68
+ )}:host([quiet]){--mod-infield-button-background-color:var(
69
+ --mod-infield-button-background-color-quiet,transparent
70
+ );--mod-infield-button-background-color-hover:var(
71
+ --mod-infield-button-background-color-hover-quiet,transparent
72
+ );--mod-infield-button-background-color-down:var(
73
+ --mod-infield-button-background-color-down-quiet,transparent
74
+ );--mod-infield-button-background-color-key-focus:var(
75
+ --mod-infield-button-background-color-key-focus-quiet,transparent
76
+ );--mod-infield-border-color:var(
77
+ --mod-infield-border-color-quiet,transparent
78
+ );--mod-infield-button-border-width:var(
79
+ --mod-infield-button-border-width-quiet,0
80
+ )}:host([quiet][disabled]){--mod-infield-button-background-color:var(
81
+ --mod-infield-button-background-color-quiet-disabled,transparent
82
+ );--mod-infield-button-border-color:var(
83
+ --mod-infield-button-border-color-quiet-disabled,transparent
84
+ )}:host{align-items:center;background-color:#0000;block-size:var(
85
+ --mod-infield-button-height,var(--spectrum-infield-button-height)
86
+ );border-style:none;cursor:pointer;display:flex;inline-size:var(
87
+ --mod-infield-button-width,var(--spectrum-infield-button-width)
88
+ );justify-content:center;padding:var(
89
+ --mod-infield-button-edge-to-fill,var(--spectrum-infield-button-edge-to-fill)
90
+ )}.fill{background-color:var(
91
+ --mod-infield-button-background-color,var(--spectrum-infield-button-background-color)
92
+ );block-size:100%;border-color:var(
93
+ --mod-infield-button-border-color,var(--spectrum-infield-button-border-color)
94
+ );border-end-end-radius:var(
95
+ --mod-infield-button-border-radius,var(--spectrum-infield-button-border-radius)
96
+ );border-end-start-radius:var(
97
+ --mod-infield-button-border-radius,var(--spectrum-infield-button-border-radius)
98
+ );border-start-end-radius:var(
99
+ --mod-infield-button-border-radius,var(--spectrum-infield-button-border-radius)
100
+ );border-start-start-radius:var(
101
+ --mod-infield-button-border-radius,var(--spectrum-infield-button-border-radius)
102
+ );border-style:solid;border-width:var(
103
+ --mod-infield-button-border-width,var(--spectrum-infield-button-border-width)
104
+ );inline-size:100%;padding:var(
105
+ --mod-infield-button-fill-padding,var(--spectrum-infield-button-fill-padding)
106
+ )}::slotted(*){color:var(
107
+ --mod-infield-button-icon-color,var(--spectrum-infield-button-icon-color)
108
+ )}:host([inline=end]) .fill{border-end-start-radius:var(
109
+ --mod-infield-button-border-radius-reset,var(--spectrum-infield-button-border-radius-reset)
110
+ );border-start-start-radius:var(
111
+ --mod-infield-button-border-radius-reset,var(--spectrum-infield-button-border-radius-reset)
112
+ )}:host([inline=start]) .fill{border-end-end-radius:var(
113
+ --mod-infield-button-border-radius-reset,var(--spectrum-infield-button-border-radius-reset)
114
+ );border-start-end-radius:var(
115
+ --mod-infield-button-border-radius-reset,var(--spectrum-infield-button-border-radius-reset)
116
+ )}:host([disabled]){cursor:auto}:host(:hover) .fill{background-color:var(
117
+ --mod-infield-button-background-color-hover,var(--spectrum-infield-button-background-color-hover)
118
+ )}:host(:hover) ::slotted(*){color:var(
119
+ --mod-infield-button-icon-color-hover,var(--spectrum-infield-button-icon-color-hover)
120
+ )}:host:active .fill{background-color:var(
121
+ --mod-infield-button-background-color-down,var(--spectrum-infield-button-background-color-down)
122
+ )}:host:active ::slotted(*){color:var(
123
+ --mod-infield-button-icon-color-down,var(--spectrum-infield-button-icon-color-down)
124
+ )}:host(.focus-visible) .fill,:host(:focus) .fill{background-color:var(
125
+ --mod-infield-button-background-color-key-focus,var(--spectrum-infield-button-background-color-key-focus)
126
+ )}:host(:focus) .fill,:host(:focus-visible) .fill{background-color:var(
127
+ --mod-infield-button-background-color-key-focus,var(--spectrum-infield-button-background-color-key-focus)
128
+ )}:host(.focus-visible) ::slotted(*),:host(:focus) ::slotted(*){color:var(
129
+ --mod-infield-button-icon-color-key-focus,var(--spectrum-infield-button-icon-color-key-focus)
130
+ )}:host(:focus) ::slotted(*),:host(:focus-visible) ::slotted(*){color:var(
131
+ --mod-infield-button-icon-color-key-focus,var(--spectrum-infield-button-icon-color-key-focus)
132
+ )}.fill{align-items:center;display:flex;justify-content:center;transition:border-color var(--spectrum-global-animation-duration-100) ease-in-out}:host([block=end]),:host([block=start]){block-size:calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height))/2)}:host([block=end]) .fill,:host([block=start]) .fill{box-sizing:border-box;padding-inline-end:calc(var(
133
+ --mod-infield-button-stacked-fill-padding-inline,
134
+ var(--spectrum-infield-button-stacked-fill-padding-inline)
135
+ ) - var(
136
+ --mod-infield-button-edge-to-fill,
137
+ var(--spectrum-infield-button-edge-to-fill)
138
+ ) - var(
139
+ --mod-infield-button-border-width,
140
+ var(--spectrum-infield-button-border-width)
141
+ ));padding-inline-start:calc(var(
142
+ --mod-infield-button-stacked-fill-padding-inline,
143
+ var(--spectrum-infield-button-stacked-fill-padding-inline)
144
+ ) - var(
145
+ --mod-infield-button-edge-to-fill,
146
+ var(--spectrum-infield-button-edge-to-fill)
147
+ ) - var(
148
+ --mod-infield-button-border-width,
149
+ var(--spectrum-infield-button-border-width)
150
+ ))}:host([block=start]){padding-block-end:var(
151
+ --mod-infield-button-inner-edge-to-fill,var(--spectrum-infield-button-inner-edge-to-fill)
152
+ )}:host([block=start]) .fill{border-block-end:none;border-end-end-radius:var(
153
+ --mod-infield-button-stacked-border-radius-reset,var(--spectrum-infield-button-stacked-border-radius-reset)
154
+ );border-end-start-radius:var(
155
+ --mod-infield-button-stacked-border-radius-reset,var(--spectrum-infield-button-stacked-border-radius-reset)
156
+ );border-start-start-radius:var(
157
+ --mod-infield-button-stacked-top-border-radius-start-start,var(--spectrum-infield-button-stacked-top-border-radius-start-start)
158
+ );padding-block-end:calc(var(
159
+ --mod-infield-button-stacked-fill-padding-inner,
160
+ var(--spectrum-infield-button-stacked-fill-padding-inner)
161
+ ) - var(
162
+ --mod-infield-button-inner-edge-to-fill,
163
+ var(--spectrum-infield-button-inner-edge-to-fill)
164
+ ));padding-block-start:calc(var(
165
+ --mod-infield-button-stacked-fill-padding-outer,
166
+ var(--spectrum-infield-button-stacked-fill-padding-outer)
167
+ ) - var(
168
+ --mod-infield-button-edge-to-fill,
169
+ var(--spectrum-infield-button-edge-to-fill)
170
+ ) - var(
171
+ --mod-infield-button-border-width,
172
+ var(--spectrum-infield-button-border-width)
173
+ ))}:host([block=end]){padding-block-start:var(
174
+ --mod-infield-button-inner-edge-to-fill,var(--spectrum-infield-button-inner-edge-to-fill)
175
+ )}:host([block=end]) .fill{border-end-start-radius:var(
176
+ --mod-infield-button-stacked-bottom-border-radius-end-start,var(--spectrum-infield-button-stacked-bottom-border-radius-end-start)
177
+ );border-start-end-radius:var(
178
+ --mod-infield-button-stacked-border-radius-reset,var(--spectrum-infield-button-stacked-border-radius-reset)
179
+ );border-start-start-radius:var(
180
+ --mod-infield-button-stacked-border-radius-reset,var(--spectrum-infield-button-stacked-border-radius-reset)
181
+ );padding-block-end:calc(var(
182
+ --mod-infield-button-stacked-fill-padding-outer,
183
+ var(--spectrum-infield-button-stacked-fill-padding-outer)
184
+ ) - var(
185
+ --mod-infield-button-inner-edge-to-fill,
186
+ var(--spectrum-infield-button-inner-edge-to-fill)
187
+ ) - var(
188
+ --mod-infield-button-border-width,
189
+ var(--spectrum-infield-button-border-width)
190
+ ));padding-block-start:calc(var(
191
+ --mod-infield-button-stacked-fill-padding-inner,
192
+ var(--spectrum-infield-button-stacked-fill-padding-inner)
193
+ ) - var(
194
+ --mod-infield-button-edge-to-fill,
195
+ var(--spectrum-infield-button-edge-to-fill)
196
+ ) - var(
197
+ --mod-infield-button-border-width,
198
+ var(--spectrum-infield-button-border-width)
199
+ ))}::slotted(*){display:initial;flex-shrink:0;margin:0!important}:host{--spectrum-infield-button-border-width:var(
200
+ --system-spectrum-infieldbutton-spectrum-infield-button-border-width
201
+ );--spectrum-infield-button-border-color:var(
202
+ --system-spectrum-infieldbutton-spectrum-infield-button-border-color
203
+ );--spectrum-infield-button-border-radius:var(
204
+ --system-spectrum-infieldbutton-spectrum-infield-button-border-radius
205
+ );--spectrum-infield-button-border-radius-reset:var(
206
+ --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset
207
+ );--spectrum-infield-button-stacked-top-border-radius-start-start:var(
208
+ --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start
209
+ );--spectrum-infield-button-stacked-bottom-border-radius-end-start:var(
210
+ --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start
211
+ );--spectrum-infield-button-background-color:var(
212
+ --system-spectrum-infieldbutton-spectrum-infield-button-background-color
213
+ );--spectrum-infield-button-background-color-hover:var(
214
+ --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover
215
+ );--spectrum-infield-button-background-color-down:var(
216
+ --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down
217
+ );--spectrum-infield-button-background-color-key-focus:var(
218
+ --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus
219
+ )}
220
+ `;
221
+ export default styles;
222
+ //# sourceMappingURL=spectrum-infield-button.css.dev.js.map
package/src/spectrum-infield-button.css.dev.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["spectrum-infield-button.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-infield-button-height:var(--spectrum-component-height-100);--spectrum-infield-button-width:var(--spectrum-component-height-100);--spectrum-infield-button-stacked-border-radius-reset:var(\n--spectrum-in-field-button-fill-stacked-inner-border-rounding\n);--spectrum-infield-button-edge-to-fill:var(\n--spectrum-in-field-button-edge-to-fill\n);--spectrum-infield-button-inner-edge-to-fill:var(\n--spectrum-in-field-button-stacked-inner-edge-to-fill\n);--spectrum-infield-button-fill-padding:0px;--spectrum-infield-button-stacked-fill-padding-inline:var(\n--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium\n);--spectrum-infield-button-stacked-fill-padding-outer:var(\n--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium\n);--spectrum-infield-button-stacked-fill-padding-inner:var(\n--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium\n);--spectrum-infield-button-animation-duration:var(\n--spectrum-animation-duration-100\n);--spectrum-infield-button-icon-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-infield-button-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-infield-button-icon-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-infield-button-icon-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n)}:host([disabled]){--mod-infield-button-background-color:var(\n--mod-infield-button-background-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-infield-button-background-color-hover:var(\n--mod-infield-button-background-color-hover-disabled,var(--spectrum-disabled-background-color)\n);--mod-infield-button-background-color-down:var(\n--mod-infield-button-background-color-down-disabled,var(--spectrum-disabled-background-color)\n);--mod-infield-button-border-color:var(\n--mod-infield-button-border-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-infield-button-icon-color:var(\n--mod-infield-button-icon-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-infield-button-icon-color-hover:var(\n--mod-infield-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-infield-button-icon-color-down:var(\n--mod-infield-button-icon-color-down-disabled,var(--spectrum-disabled-content-color)\n);--mod-infield-button-icon-color-key-focus:var(\n--mod-infield-button-icon-color-key-focus-disabled,var(--spectrum-disabled-content-color)\n)}:host([size=s]){--spectrum-infield-button-height:var(--spectrum-component-height-75);--spectrum-infield-button-width:var(--spectrum-component-height-75);--spectrum-infield-button-stacked-fill-padding-inline:var(\n--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small\n);--spectrum-infield-button-stacked-fill-padding-outer:var(\n--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small\n);--spectrum-infield-button-stacked-fill-padding-inner:var(\n--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small\n)}:host([size=l]){--spectrum-infield-button-height:var(--spectrum-component-height-200);--spectrum-infield-button-width:var(--spectrum-component-height-200);--spectrum-infield-button-stacked-fill-padding-inline:var(\n--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large\n);--spectrum-infield-button-stacked-fill-padding-outer:var(\n--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large\n);--spectrum-infield-button-stacked-fill-padding-inner:var(\n--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large\n)}:host([size=xl]){--spectrum-infield-button-height:var(--spectrum-component-height-300);--spectrum-infield-button-width:var(--spectrum-component-height-300);--spectrum-infield-button-stacked-fill-padding-inline:var(\n--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large\n);--spectrum-infield-button-stacked-fill-padding-outer:var(\n--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large\n);--spectrum-infield-button-stacked-fill-padding-inner:var(\n--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large\n)}:host([block=end]),:host([block=start]){--mod-infield-button-width:var(\n--mod-infield-button-width-stacked,var(--spectrum-in-field-button-width-stacked-medium)\n)}:host([block=end][size=s]),:host([block=start][size=s]){--mod-infield-button-width:var(\n--mod-infield-button-width-stacked,var(--spectrum-in-field-button-width-stacked-small)\n)}:host([block=end][size=l]),:host([block=start][size=l]){--mod-infield-button-width:var(\n--mod-infield-button-width-stacked,var(--spectrum-in-field-button-width-stacked-large)\n)}:host([block=end][size=xl]),:host([block=start][size=xl]){--mod-infield-button-width:var(\n--mod-infield-button-width-stacked,var(--spectrum-in-field-button-width-stacked-extra-large)\n)}:host([quiet]){--mod-infield-button-background-color:var(\n--mod-infield-button-background-color-quiet,transparent\n);--mod-infield-button-background-color-hover:var(\n--mod-infield-button-background-color-hover-quiet,transparent\n);--mod-infield-button-background-color-down:var(\n--mod-infield-button-background-color-down-quiet,transparent\n);--mod-infield-button-background-color-key-focus:var(\n--mod-infield-button-background-color-key-focus-quiet,transparent\n);--mod-infield-border-color:var(\n--mod-infield-border-color-quiet,transparent\n);--mod-infield-button-border-width:var(\n--mod-infield-button-border-width-quiet,0\n)}:host([quiet][disabled]){--mod-infield-button-background-color:var(\n--mod-infield-button-background-color-quiet-disabled,transparent\n);--mod-infield-button-border-color:var(\n--mod-infield-button-border-color-quiet-disabled,transparent\n)}:host{align-items:center;background-color:#0000;block-size:var(\n--mod-infield-button-height,var(--spectrum-infield-button-height)\n);border-style:none;cursor:pointer;display:flex;inline-size:var(\n--mod-infield-button-width,var(--spectrum-infield-button-width)\n);justify-content:center;padding:var(\n--mod-infield-button-edge-to-fill,var(--spectrum-infield-button-edge-to-fill)\n)}.fill{background-color:var(\n--mod-infield-button-background-color,var(--spectrum-infield-button-background-color)\n);block-size:100%;border-color:var(\n--mod-infield-button-border-color,var(--spectrum-infield-button-border-color)\n);border-end-end-radius:var(\n--mod-infield-button-border-radius,var(--spectrum-infield-button-border-radius)\n);border-end-start-radius:var(\n--mod-infield-button-border-radius,var(--spectrum-infield-button-border-radius)\n);border-start-end-radius:var(\n--mod-infield-button-border-radius,var(--spectrum-infield-button-border-radius)\n);border-start-start-radius:var(\n--mod-infield-button-border-radius,var(--spectrum-infield-button-border-radius)\n);border-style:solid;border-width:var(\n--mod-infield-button-border-width,var(--spectrum-infield-button-border-width)\n);inline-size:100%;padding:var(\n--mod-infield-button-fill-padding,var(--spectrum-infield-button-fill-padding)\n)}::slotted(*){color:var(\n--mod-infield-button-icon-color,var(--spectrum-infield-button-icon-color)\n)}:host([inline=end]) .fill{border-end-start-radius:var(\n--mod-infield-button-border-radius-reset,var(--spectrum-infield-button-border-radius-reset)\n);border-start-start-radius:var(\n--mod-infield-button-border-radius-reset,var(--spectrum-infield-button-border-radius-reset)\n)}:host([inline=start]) .fill{border-end-end-radius:var(\n--mod-infield-button-border-radius-reset,var(--spectrum-infield-button-border-radius-reset)\n);border-start-end-radius:var(\n--mod-infield-button-border-radius-reset,var(--spectrum-infield-button-border-radius-reset)\n)}:host([disabled]){cursor:auto}:host(:hover) .fill{background-color:var(\n--mod-infield-button-background-color-hover,var(--spectrum-infield-button-background-color-hover)\n)}:host(:hover) ::slotted(*){color:var(\n--mod-infield-button-icon-color-hover,var(--spectrum-infield-button-icon-color-hover)\n)}:host:active .fill{background-color:var(\n--mod-infield-button-background-color-down,var(--spectrum-infield-button-background-color-down)\n)}:host:active ::slotted(*){color:var(\n--mod-infield-button-icon-color-down,var(--spectrum-infield-button-icon-color-down)\n)}:host(.focus-visible) .fill,:host(:focus) .fill{background-color:var(\n--mod-infield-button-background-color-key-focus,var(--spectrum-infield-button-background-color-key-focus)\n)}:host(:focus) .fill,:host(:focus-visible) .fill{background-color:var(\n--mod-infield-button-background-color-key-focus,var(--spectrum-infield-button-background-color-key-focus)\n)}:host(.focus-visible) ::slotted(*),:host(:focus) ::slotted(*){color:var(\n--mod-infield-button-icon-color-key-focus,var(--spectrum-infield-button-icon-color-key-focus)\n)}:host(:focus) ::slotted(*),:host(:focus-visible) ::slotted(*){color:var(\n--mod-infield-button-icon-color-key-focus,var(--spectrum-infield-button-icon-color-key-focus)\n)}.fill{align-items:center;display:flex;justify-content:center;transition:border-color var(--spectrum-global-animation-duration-100) ease-in-out}:host([block=end]),:host([block=start]){block-size:calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height))/2)}:host([block=end]) .fill,:host([block=start]) .fill{box-sizing:border-box;padding-inline-end:calc(var(\n--mod-infield-button-stacked-fill-padding-inline,\nvar(--spectrum-infield-button-stacked-fill-padding-inline)\n) - var(\n--mod-infield-button-edge-to-fill,\nvar(--spectrum-infield-button-edge-to-fill)\n) - var(\n--mod-infield-button-border-width,\nvar(--spectrum-infield-button-border-width)\n));padding-inline-start:calc(var(\n--mod-infield-button-stacked-fill-padding-inline,\nvar(--spectrum-infield-button-stacked-fill-padding-inline)\n) - var(\n--mod-infield-button-edge-to-fill,\nvar(--spectrum-infield-button-edge-to-fill)\n) - var(\n--mod-infield-button-border-width,\nvar(--spectrum-infield-button-border-width)\n))}:host([block=start]){padding-block-end:var(\n--mod-infield-button-inner-edge-to-fill,var(--spectrum-infield-button-inner-edge-to-fill)\n)}:host([block=start]) .fill{border-block-end:none;border-end-end-radius:var(\n--mod-infield-button-stacked-border-radius-reset,var(--spectrum-infield-button-stacked-border-radius-reset)\n);border-end-start-radius:var(\n--mod-infield-button-stacked-border-radius-reset,var(--spectrum-infield-button-stacked-border-radius-reset)\n);border-start-start-radius:var(\n--mod-infield-button-stacked-top-border-radius-start-start,var(--spectrum-infield-button-stacked-top-border-radius-start-start)\n);padding-block-end:calc(var(\n--mod-infield-button-stacked-fill-padding-inner,\nvar(--spectrum-infield-button-stacked-fill-padding-inner)\n) - var(\n--mod-infield-button-inner-edge-to-fill,\nvar(--spectrum-infield-button-inner-edge-to-fill)\n));padding-block-start:calc(var(\n--mod-infield-button-stacked-fill-padding-outer,\nvar(--spectrum-infield-button-stacked-fill-padding-outer)\n) - var(\n--mod-infield-button-edge-to-fill,\nvar(--spectrum-infield-button-edge-to-fill)\n) - var(\n--mod-infield-button-border-width,\nvar(--spectrum-infield-button-border-width)\n))}:host([block=end]){padding-block-start:var(\n--mod-infield-button-inner-edge-to-fill,var(--spectrum-infield-button-inner-edge-to-fill)\n)}:host([block=end]) .fill{border-end-start-radius:var(\n--mod-infield-button-stacked-bottom-border-radius-end-start,var(--spectrum-infield-button-stacked-bottom-border-radius-end-start)\n);border-start-end-radius:var(\n--mod-infield-button-stacked-border-radius-reset,var(--spectrum-infield-button-stacked-border-radius-reset)\n);border-start-start-radius:var(\n--mod-infield-button-stacked-border-radius-reset,var(--spectrum-infield-button-stacked-border-radius-reset)\n);padding-block-end:calc(var(\n--mod-infield-button-stacked-fill-padding-outer,\nvar(--spectrum-infield-button-stacked-fill-padding-outer)\n) - var(\n--mod-infield-button-inner-edge-to-fill,\nvar(--spectrum-infield-button-inner-edge-to-fill)\n) - var(\n--mod-infield-button-border-width,\nvar(--spectrum-infield-button-border-width)\n));padding-block-start:calc(var(\n--mod-infield-button-stacked-fill-padding-inner,\nvar(--spectrum-infield-button-stacked-fill-padding-inner)\n) - var(\n--mod-infield-button-edge-to-fill,\nvar(--spectrum-infield-button-edge-to-fill)\n) - var(\n--mod-infield-button-border-width,\nvar(--spectrum-infield-button-border-width)\n))}::slotted(*){display:initial;flex-shrink:0;margin:0!important}:host{--spectrum-infield-button-border-width:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-border-width\n);--spectrum-infield-button-border-color:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-border-color\n);--spectrum-infield-button-border-radius:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-border-radius\n);--spectrum-infield-button-border-radius-reset:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset\n);--spectrum-infield-button-stacked-top-border-radius-start-start:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start\n);--spectrum-infield-button-stacked-bottom-border-radius-end-start:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start\n);--spectrum-infield-button-background-color:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-background-color\n);--spectrum-infield-button-background-color-hover:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover\n);--spectrum-infield-button-background-color-down:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-background-color-down\n);--spectrum-infield-button-background-color-key-focus:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus\n)}\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0Nf,eAAe;",
6
+ "names": []
7
+ }
package/src/spectrum-infield-button.css.js ADDED
@@ -0,0 +1,219 @@
1
+ "use strict";import{css as t}from"@spectrum-web-components/base";const e=t`
2
+ :host{--spectrum-infield-button-height:var(--spectrum-component-height-100);--spectrum-infield-button-width:var(--spectrum-component-height-100);--spectrum-infield-button-stacked-border-radius-reset:var(
3
+ --spectrum-in-field-button-fill-stacked-inner-border-rounding
4
+ );--spectrum-infield-button-edge-to-fill:var(
5
+ --spectrum-in-field-button-edge-to-fill
6
+ );--spectrum-infield-button-inner-edge-to-fill:var(
7
+ --spectrum-in-field-button-stacked-inner-edge-to-fill
8
+ );--spectrum-infield-button-fill-padding:0px;--spectrum-infield-button-stacked-fill-padding-inline:var(
9
+ --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium
10
+ );--spectrum-infield-button-stacked-fill-padding-outer:var(
11
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium
12
+ );--spectrum-infield-button-stacked-fill-padding-inner:var(
13
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium
14
+ );--spectrum-infield-button-animation-duration:var(
15
+ --spectrum-animation-duration-100
16
+ );--spectrum-infield-button-icon-color:var(
17
+ --spectrum-neutral-content-color-default
18
+ );--spectrum-infield-button-icon-color-hover:var(
19
+ --spectrum-neutral-content-color-hover
20
+ );--spectrum-infield-button-icon-color-down:var(
21
+ --spectrum-neutral-content-color-down
22
+ );--spectrum-infield-button-icon-color-key-focus:var(
23
+ --spectrum-neutral-content-color-key-focus
24
+ )}:host([disabled]){--mod-infield-button-background-color:var(
25
+ --mod-infield-button-background-color-disabled,var(--spectrum-disabled-background-color)
26
+ );--mod-infield-button-background-color-hover:var(
27
+ --mod-infield-button-background-color-hover-disabled,var(--spectrum-disabled-background-color)
28
+ );--mod-infield-button-background-color-down:var(
29
+ --mod-infield-button-background-color-down-disabled,var(--spectrum-disabled-background-color)
30
+ );--mod-infield-button-border-color:var(
31
+ --mod-infield-button-border-color-disabled,var(--spectrum-disabled-background-color)
32
+ );--mod-infield-button-icon-color:var(
33
+ --mod-infield-button-icon-color-disabled,var(--spectrum-disabled-content-color)
34
+ );--mod-infield-button-icon-color-hover:var(
35
+ --mod-infield-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color)
36
+ );--mod-infield-button-icon-color-down:var(
37
+ --mod-infield-button-icon-color-down-disabled,var(--spectrum-disabled-content-color)
38
+ );--mod-infield-button-icon-color-key-focus:var(
39
+ --mod-infield-button-icon-color-key-focus-disabled,var(--spectrum-disabled-content-color)
40
+ )}:host([size=s]){--spectrum-infield-button-height:var(--spectrum-component-height-75);--spectrum-infield-button-width:var(--spectrum-component-height-75);--spectrum-infield-button-stacked-fill-padding-inline:var(
41
+ --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small
42
+ );--spectrum-infield-button-stacked-fill-padding-outer:var(
43
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small
44
+ );--spectrum-infield-button-stacked-fill-padding-inner:var(
45
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small
46
+ )}:host([size=l]){--spectrum-infield-button-height:var(--spectrum-component-height-200);--spectrum-infield-button-width:var(--spectrum-component-height-200);--spectrum-infield-button-stacked-fill-padding-inline:var(
47
+ --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large
48
+ );--spectrum-infield-button-stacked-fill-padding-outer:var(
49
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large
50
+ );--spectrum-infield-button-stacked-fill-padding-inner:var(
51
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large
52
+ )}:host([size=xl]){--spectrum-infield-button-height:var(--spectrum-component-height-300);--spectrum-infield-button-width:var(--spectrum-component-height-300);--spectrum-infield-button-stacked-fill-padding-inline:var(
53
+ --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large
54
+ );--spectrum-infield-button-stacked-fill-padding-outer:var(
55
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large
56
+ );--spectrum-infield-button-stacked-fill-padding-inner:var(
57
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large
58
+ )}:host([block=end]),:host([block=start]){--mod-infield-button-width:var(
59
+ --mod-infield-button-width-stacked,var(--spectrum-in-field-button-width-stacked-medium)
60
+ )}:host([block=end][size=s]),:host([block=start][size=s]){--mod-infield-button-width:var(
61
+ --mod-infield-button-width-stacked,var(--spectrum-in-field-button-width-stacked-small)
62
+ )}:host([block=end][size=l]),:host([block=start][size=l]){--mod-infield-button-width:var(
63
+ --mod-infield-button-width-stacked,var(--spectrum-in-field-button-width-stacked-large)
64
+ )}:host([block=end][size=xl]),:host([block=start][size=xl]){--mod-infield-button-width:var(
65
+ --mod-infield-button-width-stacked,var(--spectrum-in-field-button-width-stacked-extra-large)
66
+ )}:host([quiet]){--mod-infield-button-background-color:var(
67
+ --mod-infield-button-background-color-quiet,transparent
68
+ );--mod-infield-button-background-color-hover:var(
69
+ --mod-infield-button-background-color-hover-quiet,transparent
70
+ );--mod-infield-button-background-color-down:var(
71
+ --mod-infield-button-background-color-down-quiet,transparent
72
+ );--mod-infield-button-background-color-key-focus:var(
73
+ --mod-infield-button-background-color-key-focus-quiet,transparent
74
+ );--mod-infield-border-color:var(
75
+ --mod-infield-border-color-quiet,transparent
76
+ );--mod-infield-button-border-width:var(
77
+ --mod-infield-button-border-width-quiet,0
78
+ )}:host([quiet][disabled]){--mod-infield-button-background-color:var(
79
+ --mod-infield-button-background-color-quiet-disabled,transparent
80
+ );--mod-infield-button-border-color:var(
81
+ --mod-infield-button-border-color-quiet-disabled,transparent
82
+ )}:host{align-items:center;background-color:#0000;block-size:var(
83
+ --mod-infield-button-height,var(--spectrum-infield-button-height)
84
+ );border-style:none;cursor:pointer;display:flex;inline-size:var(
85
+ --mod-infield-button-width,var(--spectrum-infield-button-width)
86
+ );justify-content:center;padding:var(
87
+ --mod-infield-button-edge-to-fill,var(--spectrum-infield-button-edge-to-fill)
88
+ )}.fill{background-color:var(
89
+ --mod-infield-button-background-color,var(--spectrum-infield-button-background-color)
90
+ );block-size:100%;border-color:var(
91
+ --mod-infield-button-border-color,var(--spectrum-infield-button-border-color)
92
+ );border-end-end-radius:var(
93
+ --mod-infield-button-border-radius,var(--spectrum-infield-button-border-radius)
94
+ );border-end-start-radius:var(
95
+ --mod-infield-button-border-radius,var(--spectrum-infield-button-border-radius)
96
+ );border-start-end-radius:var(
97
+ --mod-infield-button-border-radius,var(--spectrum-infield-button-border-radius)
98
+ );border-start-start-radius:var(
99
+ --mod-infield-button-border-radius,var(--spectrum-infield-button-border-radius)
100
+ );border-style:solid;border-width:var(
101
+ --mod-infield-button-border-width,var(--spectrum-infield-button-border-width)
102
+ );inline-size:100%;padding:var(
103
+ --mod-infield-button-fill-padding,var(--spectrum-infield-button-fill-padding)
104
+ )}::slotted(*){color:var(
105
+ --mod-infield-button-icon-color,var(--spectrum-infield-button-icon-color)
106
+ )}:host([inline=end]) .fill{border-end-start-radius:var(
107
+ --mod-infield-button-border-radius-reset,var(--spectrum-infield-button-border-radius-reset)
108
+ );border-start-start-radius:var(
109
+ --mod-infield-button-border-radius-reset,var(--spectrum-infield-button-border-radius-reset)
110
+ )}:host([inline=start]) .fill{border-end-end-radius:var(
111
+ --mod-infield-button-border-radius-reset,var(--spectrum-infield-button-border-radius-reset)
112
+ );border-start-end-radius:var(
113
+ --mod-infield-button-border-radius-reset,var(--spectrum-infield-button-border-radius-reset)
114
+ )}:host([disabled]){cursor:auto}:host(:hover) .fill{background-color:var(
115
+ --mod-infield-button-background-color-hover,var(--spectrum-infield-button-background-color-hover)
116
+ )}:host(:hover) ::slotted(*){color:var(
117
+ --mod-infield-button-icon-color-hover,var(--spectrum-infield-button-icon-color-hover)
118
+ )}:host:active .fill{background-color:var(
119
+ --mod-infield-button-background-color-down,var(--spectrum-infield-button-background-color-down)
120
+ )}:host:active ::slotted(*){color:var(
121
+ --mod-infield-button-icon-color-down,var(--spectrum-infield-button-icon-color-down)
122
+ )}:host(.focus-visible) .fill,:host(:focus) .fill{background-color:var(
123
+ --mod-infield-button-background-color-key-focus,var(--spectrum-infield-button-background-color-key-focus)
124
+ )}:host(:focus) .fill,:host(:focus-visible) .fill{background-color:var(
125
+ --mod-infield-button-background-color-key-focus,var(--spectrum-infield-button-background-color-key-focus)
126
+ )}:host(.focus-visible) ::slotted(*),:host(:focus) ::slotted(*){color:var(
127
+ --mod-infield-button-icon-color-key-focus,var(--spectrum-infield-button-icon-color-key-focus)
128
+ )}:host(:focus) ::slotted(*),:host(:focus-visible) ::slotted(*){color:var(
129
+ --mod-infield-button-icon-color-key-focus,var(--spectrum-infield-button-icon-color-key-focus)
130
+ )}.fill{align-items:center;display:flex;justify-content:center;transition:border-color var(--spectrum-global-animation-duration-100) ease-in-out}:host([block=end]),:host([block=start]){block-size:calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height))/2)}:host([block=end]) .fill,:host([block=start]) .fill{box-sizing:border-box;padding-inline-end:calc(var(
131
+ --mod-infield-button-stacked-fill-padding-inline,
132
+ var(--spectrum-infield-button-stacked-fill-padding-inline)
133
+ ) - var(
134
+ --mod-infield-button-edge-to-fill,
135
+ var(--spectrum-infield-button-edge-to-fill)
136
+ ) - var(
137
+ --mod-infield-button-border-width,
138
+ var(--spectrum-infield-button-border-width)
139
+ ));padding-inline-start:calc(var(
140
+ --mod-infield-button-stacked-fill-padding-inline,
141
+ var(--spectrum-infield-button-stacked-fill-padding-inline)
142
+ ) - var(
143
+ --mod-infield-button-edge-to-fill,
144
+ var(--spectrum-infield-button-edge-to-fill)
145
+ ) - var(
146
+ --mod-infield-button-border-width,
147
+ var(--spectrum-infield-button-border-width)
148
+ ))}:host([block=start]){padding-block-end:var(
149
+ --mod-infield-button-inner-edge-to-fill,var(--spectrum-infield-button-inner-edge-to-fill)
150
+ )}:host([block=start]) .fill{border-block-end:none;border-end-end-radius:var(
151
+ --mod-infield-button-stacked-border-radius-reset,var(--spectrum-infield-button-stacked-border-radius-reset)
152
+ );border-end-start-radius:var(
153
+ --mod-infield-button-stacked-border-radius-reset,var(--spectrum-infield-button-stacked-border-radius-reset)
154
+ );border-start-start-radius:var(
155
+ --mod-infield-button-stacked-top-border-radius-start-start,var(--spectrum-infield-button-stacked-top-border-radius-start-start)
156
+ );padding-block-end:calc(var(
157
+ --mod-infield-button-stacked-fill-padding-inner,
158
+ var(--spectrum-infield-button-stacked-fill-padding-inner)
159
+ ) - var(
160
+ --mod-infield-button-inner-edge-to-fill,
161
+ var(--spectrum-infield-button-inner-edge-to-fill)
162
+ ));padding-block-start:calc(var(
163
+ --mod-infield-button-stacked-fill-padding-outer,
164
+ var(--spectrum-infield-button-stacked-fill-padding-outer)
165
+ ) - var(
166
+ --mod-infield-button-edge-to-fill,
167
+ var(--spectrum-infield-button-edge-to-fill)
168
+ ) - var(
169
+ --mod-infield-button-border-width,
170
+ var(--spectrum-infield-button-border-width)
171
+ ))}:host([block=end]){padding-block-start:var(
172
+ --mod-infield-button-inner-edge-to-fill,var(--spectrum-infield-button-inner-edge-to-fill)
173
+ )}:host([block=end]) .fill{border-end-start-radius:var(
174
+ --mod-infield-button-stacked-bottom-border-radius-end-start,var(--spectrum-infield-button-stacked-bottom-border-radius-end-start)
175
+ );border-start-end-radius:var(
176
+ --mod-infield-button-stacked-border-radius-reset,var(--spectrum-infield-button-stacked-border-radius-reset)
177
+ );border-start-start-radius:var(
178
+ --mod-infield-button-stacked-border-radius-reset,var(--spectrum-infield-button-stacked-border-radius-reset)
179
+ );padding-block-end:calc(var(
180
+ --mod-infield-button-stacked-fill-padding-outer,
181
+ var(--spectrum-infield-button-stacked-fill-padding-outer)
182
+ ) - var(
183
+ --mod-infield-button-inner-edge-to-fill,
184
+ var(--spectrum-infield-button-inner-edge-to-fill)
185
+ ) - var(
186
+ --mod-infield-button-border-width,
187
+ var(--spectrum-infield-button-border-width)
188
+ ));padding-block-start:calc(var(
189
+ --mod-infield-button-stacked-fill-padding-inner,
190
+ var(--spectrum-infield-button-stacked-fill-padding-inner)
191
+ ) - var(
192
+ --mod-infield-button-edge-to-fill,
193
+ var(--spectrum-infield-button-edge-to-fill)
194
+ ) - var(
195
+ --mod-infield-button-border-width,
196
+ var(--spectrum-infield-button-border-width)
197
+ ))}::slotted(*){display:initial;flex-shrink:0;margin:0!important}:host{--spectrum-infield-button-border-width:var(
198
+ --system-spectrum-infieldbutton-spectrum-infield-button-border-width
199
+ );--spectrum-infield-button-border-color:var(
200
+ --system-spectrum-infieldbutton-spectrum-infield-button-border-color
201
+ );--spectrum-infield-button-border-radius:var(
202
+ --system-spectrum-infieldbutton-spectrum-infield-button-border-radius
203
+ );--spectrum-infield-button-border-radius-reset:var(
204
+ --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset
205
+ );--spectrum-infield-button-stacked-top-border-radius-start-start:var(
206
+ --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start
207
+ );--spectrum-infield-button-stacked-bottom-border-radius-end-start:var(
208
+ --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start
209
+ );--spectrum-infield-button-background-color:var(
210
+ --system-spectrum-infieldbutton-spectrum-infield-button-background-color
211
+ );--spectrum-infield-button-background-color-hover:var(
212
+ --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover
213
+ );--spectrum-infield-button-background-color-down:var(
214
+ --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down
215
+ );--spectrum-infield-button-background-color-key-focus:var(
216
+ --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus
217
+ )}
218
+ `;export default e;
219
+ //# sourceMappingURL=spectrum-infield-button.css.js.map
package/src/spectrum-infield-button.css.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["spectrum-infield-button.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-infield-button-height:var(--spectrum-component-height-100);--spectrum-infield-button-width:var(--spectrum-component-height-100);--spectrum-infield-button-stacked-border-radius-reset:var(\n--spectrum-in-field-button-fill-stacked-inner-border-rounding\n);--spectrum-infield-button-edge-to-fill:var(\n--spectrum-in-field-button-edge-to-fill\n);--spectrum-infield-button-inner-edge-to-fill:var(\n--spectrum-in-field-button-stacked-inner-edge-to-fill\n);--spectrum-infield-button-fill-padding:0px;--spectrum-infield-button-stacked-fill-padding-inline:var(\n--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium\n);--spectrum-infield-button-stacked-fill-padding-outer:var(\n--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium\n);--spectrum-infield-button-stacked-fill-padding-inner:var(\n--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium\n);--spectrum-infield-button-animation-duration:var(\n--spectrum-animation-duration-100\n);--spectrum-infield-button-icon-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-infield-button-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-infield-button-icon-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-infield-button-icon-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n)}:host([disabled]){--mod-infield-button-background-color:var(\n--mod-infield-button-background-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-infield-button-background-color-hover:var(\n--mod-infield-button-background-color-hover-disabled,var(--spectrum-disabled-background-color)\n);--mod-infield-button-background-color-down:var(\n--mod-infield-button-background-color-down-disabled,var(--spectrum-disabled-background-color)\n);--mod-infield-button-border-color:var(\n--mod-infield-button-border-color-disabled,var(--spectrum-disabled-background-color)\n);--mod-infield-button-icon-color:var(\n--mod-infield-button-icon-color-disabled,var(--spectrum-disabled-content-color)\n);--mod-infield-button-icon-color-hover:var(\n--mod-infield-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color)\n);--mod-infield-button-icon-color-down:var(\n--mod-infield-button-icon-color-down-disabled,var(--spectrum-disabled-content-color)\n);--mod-infield-button-icon-color-key-focus:var(\n--mod-infield-button-icon-color-key-focus-disabled,var(--spectrum-disabled-content-color)\n)}:host([size=s]){--spectrum-infield-button-height:var(--spectrum-component-height-75);--spectrum-infield-button-width:var(--spectrum-component-height-75);--spectrum-infield-button-stacked-fill-padding-inline:var(\n--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small\n);--spectrum-infield-button-stacked-fill-padding-outer:var(\n--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small\n);--spectrum-infield-button-stacked-fill-padding-inner:var(\n--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small\n)}:host([size=l]){--spectrum-infield-button-height:var(--spectrum-component-height-200);--spectrum-infield-button-width:var(--spectrum-component-height-200);--spectrum-infield-button-stacked-fill-padding-inline:var(\n--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large\n);--spectrum-infield-button-stacked-fill-padding-outer:var(\n--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large\n);--spectrum-infield-button-stacked-fill-padding-inner:var(\n--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large\n)}:host([size=xl]){--spectrum-infield-button-height:var(--spectrum-component-height-300);--spectrum-infield-button-width:var(--spectrum-component-height-300);--spectrum-infield-button-stacked-fill-padding-inline:var(\n--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large\n);--spectrum-infield-button-stacked-fill-padding-outer:var(\n--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large\n);--spectrum-infield-button-stacked-fill-padding-inner:var(\n--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large\n)}:host([block=end]),:host([block=start]){--mod-infield-button-width:var(\n--mod-infield-button-width-stacked,var(--spectrum-in-field-button-width-stacked-medium)\n)}:host([block=end][size=s]),:host([block=start][size=s]){--mod-infield-button-width:var(\n--mod-infield-button-width-stacked,var(--spectrum-in-field-button-width-stacked-small)\n)}:host([block=end][size=l]),:host([block=start][size=l]){--mod-infield-button-width:var(\n--mod-infield-button-width-stacked,var(--spectrum-in-field-button-width-stacked-large)\n)}:host([block=end][size=xl]),:host([block=start][size=xl]){--mod-infield-button-width:var(\n--mod-infield-button-width-stacked,var(--spectrum-in-field-button-width-stacked-extra-large)\n)}:host([quiet]){--mod-infield-button-background-color:var(\n--mod-infield-button-background-color-quiet,transparent\n);--mod-infield-button-background-color-hover:var(\n--mod-infield-button-background-color-hover-quiet,transparent\n);--mod-infield-button-background-color-down:var(\n--mod-infield-button-background-color-down-quiet,transparent\n);--mod-infield-button-background-color-key-focus:var(\n--mod-infield-button-background-color-key-focus-quiet,transparent\n);--mod-infield-border-color:var(\n--mod-infield-border-color-quiet,transparent\n);--mod-infield-button-border-width:var(\n--mod-infield-button-border-width-quiet,0\n)}:host([quiet][disabled]){--mod-infield-button-background-color:var(\n--mod-infield-button-background-color-quiet-disabled,transparent\n);--mod-infield-button-border-color:var(\n--mod-infield-button-border-color-quiet-disabled,transparent\n)}:host{align-items:center;background-color:#0000;block-size:var(\n--mod-infield-button-height,var(--spectrum-infield-button-height)\n);border-style:none;cursor:pointer;display:flex;inline-size:var(\n--mod-infield-button-width,var(--spectrum-infield-button-width)\n);justify-content:center;padding:var(\n--mod-infield-button-edge-to-fill,var(--spectrum-infield-button-edge-to-fill)\n)}.fill{background-color:var(\n--mod-infield-button-background-color,var(--spectrum-infield-button-background-color)\n);block-size:100%;border-color:var(\n--mod-infield-button-border-color,var(--spectrum-infield-button-border-color)\n);border-end-end-radius:var(\n--mod-infield-button-border-radius,var(--spectrum-infield-button-border-radius)\n);border-end-start-radius:var(\n--mod-infield-button-border-radius,var(--spectrum-infield-button-border-radius)\n);border-start-end-radius:var(\n--mod-infield-button-border-radius,var(--spectrum-infield-button-border-radius)\n);border-start-start-radius:var(\n--mod-infield-button-border-radius,var(--spectrum-infield-button-border-radius)\n);border-style:solid;border-width:var(\n--mod-infield-button-border-width,var(--spectrum-infield-button-border-width)\n);inline-size:100%;padding:var(\n--mod-infield-button-fill-padding,var(--spectrum-infield-button-fill-padding)\n)}::slotted(*){color:var(\n--mod-infield-button-icon-color,var(--spectrum-infield-button-icon-color)\n)}:host([inline=end]) .fill{border-end-start-radius:var(\n--mod-infield-button-border-radius-reset,var(--spectrum-infield-button-border-radius-reset)\n);border-start-start-radius:var(\n--mod-infield-button-border-radius-reset,var(--spectrum-infield-button-border-radius-reset)\n)}:host([inline=start]) .fill{border-end-end-radius:var(\n--mod-infield-button-border-radius-reset,var(--spectrum-infield-button-border-radius-reset)\n);border-start-end-radius:var(\n--mod-infield-button-border-radius-reset,var(--spectrum-infield-button-border-radius-reset)\n)}:host([disabled]){cursor:auto}:host(:hover) .fill{background-color:var(\n--mod-infield-button-background-color-hover,var(--spectrum-infield-button-background-color-hover)\n)}:host(:hover) ::slotted(*){color:var(\n--mod-infield-button-icon-color-hover,var(--spectrum-infield-button-icon-color-hover)\n)}:host:active .fill{background-color:var(\n--mod-infield-button-background-color-down,var(--spectrum-infield-button-background-color-down)\n)}:host:active ::slotted(*){color:var(\n--mod-infield-button-icon-color-down,var(--spectrum-infield-button-icon-color-down)\n)}:host(.focus-visible) .fill,:host(:focus) .fill{background-color:var(\n--mod-infield-button-background-color-key-focus,var(--spectrum-infield-button-background-color-key-focus)\n)}:host(:focus) .fill,:host(:focus-visible) .fill{background-color:var(\n--mod-infield-button-background-color-key-focus,var(--spectrum-infield-button-background-color-key-focus)\n)}:host(.focus-visible) ::slotted(*),:host(:focus) ::slotted(*){color:var(\n--mod-infield-button-icon-color-key-focus,var(--spectrum-infield-button-icon-color-key-focus)\n)}:host(:focus) ::slotted(*),:host(:focus-visible) ::slotted(*){color:var(\n--mod-infield-button-icon-color-key-focus,var(--spectrum-infield-button-icon-color-key-focus)\n)}.fill{align-items:center;display:flex;justify-content:center;transition:border-color var(--spectrum-global-animation-duration-100) ease-in-out}:host([block=end]),:host([block=start]){block-size:calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height))/2)}:host([block=end]) .fill,:host([block=start]) .fill{box-sizing:border-box;padding-inline-end:calc(var(\n--mod-infield-button-stacked-fill-padding-inline,\nvar(--spectrum-infield-button-stacked-fill-padding-inline)\n) - var(\n--mod-infield-button-edge-to-fill,\nvar(--spectrum-infield-button-edge-to-fill)\n) - var(\n--mod-infield-button-border-width,\nvar(--spectrum-infield-button-border-width)\n));padding-inline-start:calc(var(\n--mod-infield-button-stacked-fill-padding-inline,\nvar(--spectrum-infield-button-stacked-fill-padding-inline)\n) - var(\n--mod-infield-button-edge-to-fill,\nvar(--spectrum-infield-button-edge-to-fill)\n) - var(\n--mod-infield-button-border-width,\nvar(--spectrum-infield-button-border-width)\n))}:host([block=start]){padding-block-end:var(\n--mod-infield-button-inner-edge-to-fill,var(--spectrum-infield-button-inner-edge-to-fill)\n)}:host([block=start]) .fill{border-block-end:none;border-end-end-radius:var(\n--mod-infield-button-stacked-border-radius-reset,var(--spectrum-infield-button-stacked-border-radius-reset)\n);border-end-start-radius:var(\n--mod-infield-button-stacked-border-radius-reset,var(--spectrum-infield-button-stacked-border-radius-reset)\n);border-start-start-radius:var(\n--mod-infield-button-stacked-top-border-radius-start-start,var(--spectrum-infield-button-stacked-top-border-radius-start-start)\n);padding-block-end:calc(var(\n--mod-infield-button-stacked-fill-padding-inner,\nvar(--spectrum-infield-button-stacked-fill-padding-inner)\n) - var(\n--mod-infield-button-inner-edge-to-fill,\nvar(--spectrum-infield-button-inner-edge-to-fill)\n));padding-block-start:calc(var(\n--mod-infield-button-stacked-fill-padding-outer,\nvar(--spectrum-infield-button-stacked-fill-padding-outer)\n) - var(\n--mod-infield-button-edge-to-fill,\nvar(--spectrum-infield-button-edge-to-fill)\n) - var(\n--mod-infield-button-border-width,\nvar(--spectrum-infield-button-border-width)\n))}:host([block=end]){padding-block-start:var(\n--mod-infield-button-inner-edge-to-fill,var(--spectrum-infield-button-inner-edge-to-fill)\n)}:host([block=end]) .fill{border-end-start-radius:var(\n--mod-infield-button-stacked-bottom-border-radius-end-start,var(--spectrum-infield-button-stacked-bottom-border-radius-end-start)\n);border-start-end-radius:var(\n--mod-infield-button-stacked-border-radius-reset,var(--spectrum-infield-button-stacked-border-radius-reset)\n);border-start-start-radius:var(\n--mod-infield-button-stacked-border-radius-reset,var(--spectrum-infield-button-stacked-border-radius-reset)\n);padding-block-end:calc(var(\n--mod-infield-button-stacked-fill-padding-outer,\nvar(--spectrum-infield-button-stacked-fill-padding-outer)\n) - var(\n--mod-infield-button-inner-edge-to-fill,\nvar(--spectrum-infield-button-inner-edge-to-fill)\n) - var(\n--mod-infield-button-border-width,\nvar(--spectrum-infield-button-border-width)\n));padding-block-start:calc(var(\n--mod-infield-button-stacked-fill-padding-inner,\nvar(--spectrum-infield-button-stacked-fill-padding-inner)\n) - var(\n--mod-infield-button-edge-to-fill,\nvar(--spectrum-infield-button-edge-to-fill)\n) - var(\n--mod-infield-button-border-width,\nvar(--spectrum-infield-button-border-width)\n))}::slotted(*){display:initial;flex-shrink:0;margin:0!important}:host{--spectrum-infield-button-border-width:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-border-width\n);--spectrum-infield-button-border-color:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-border-color\n);--spectrum-infield-button-border-radius:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-border-radius\n);--spectrum-infield-button-border-radius-reset:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset\n);--spectrum-infield-button-stacked-top-border-radius-start-start:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start\n);--spectrum-infield-button-stacked-bottom-border-radius-end-start:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start\n);--spectrum-infield-button-background-color:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-background-color\n);--spectrum-infield-button-background-color-hover:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover\n);--spectrum-infield-button-background-color-down:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-background-color-down\n);--spectrum-infield-button-background-color-key-focus:var(\n--system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus\n)}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0Nf,eAAeC",
6
+ "names": ["css", "styles"]
7
+ }
package/stories/index.js ADDED
@@ -0,0 +1,113 @@
1
+ "use strict";
2
+ import { html } from "@spectrum-web-components/base";
3
+ import "@spectrum-web-components/infield-button/sp-infield-button.js";
4
+ import "@spectrum-web-components/icons-workflow/icons/sp-icon-add.js";
5
+ import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js";
6
+ import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
7
+ import chevronStyles from "@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";
8
+ document.adoptedStyleSheets = [
9
+ ...document.adoptedStyleSheets,
10
+ chevronStyles.styleSheet
11
+ ];
12
+ export const args = {
13
+ block: void 0,
14
+ disabled: false,
15
+ inline: void 0,
16
+ label: "Add",
17
+ size: void 0,
18
+ quiet: false
19
+ };
20
+ export const argTypes = {
21
+ block: {
22
+ name: "block",
23
+ type: { name: "text", required: false },
24
+ description: "Where to place the button along the block axis.",
25
+ table: {
26
+ type: { summary: '"start" | "end"' },
27
+ defaultValue: { summary: "" }
28
+ },
29
+ control: "select",
30
+ options: ["none", "start", "end"]
31
+ },
32
+ disabled: {
33
+ name: "disabled",
34
+ type: { name: "boolean", required: false },
35
+ description: "Whether the button is disabled or not.",
36
+ table: {
37
+ type: { summary: "boolean" },
38
+ defaultValue: { summary: false }
39
+ },
40
+ control: {
41
+ type: "boolean"
42
+ }
43
+ },
44
+ inline: {
45
+ name: "inline",
46
+ type: { name: "text", required: false },
47
+ description: "Where to place the button along the inline axis.",
48
+ table: {
49
+ type: { summary: '"start" | "end"' },
50
+ defaultValue: { summary: "" }
51
+ },
52
+ control: "select",
53
+ options: ["none", "start", "end"]
54
+ },
55
+ size: {
56
+ name: "size",
57
+ type: { name: "text", required: false },
58
+ description: "The t-shit size of the button.",
59
+ table: {
60
+ type: { summary: '"s" | "m" | "l" | "xl"' },
61
+ defaultValue: { summary: "" }
62
+ },
63
+ control: "select",
64
+ options: ["s", "m", "l", "xl"]
65
+ },
66
+ quiet: {
67
+ name: "quiet",
68
+ type: { name: "boolean", required: false },
69
+ description: "Whether the button is quiet or not.",
70
+ table: {
71
+ type: { summary: "boolean" },
72
+ defaultValue: { summary: false }
73
+ },
74
+ control: {
75
+ type: "boolean"
76
+ }
77
+ }
78
+ };
79
+ export const Template = ({
80
+ block,
81
+ content,
82
+ disabled,
83
+ inline,
84
+ label,
85
+ size,
86
+ quiet
87
+ }) => {
88
+ return html`
89
+ <sp-infield-button
90
+ block=${ifDefined(block)}
91
+ ?disabled=${disabled}
92
+ inline=${ifDefined(inline)}
93
+ label=${ifDefined(label)}
94
+ size=${ifDefined(size)}
95
+ ?quiet=${quiet}
96
+ >
97
+ ${content ? content() : html`
98
+ <sp-icon-add></sp-icon-add>
99
+ `}
100
+ </sp-infield-button>
101
+ `;
102
+ };
103
+ export const chevronUp = () => html`
104
+ <sp-icon-chevron75
105
+ class="spectrum-UIIcon-ChevronUp75"
106
+ ></sp-icon-chevron75>
107
+ `;
108
+ export const chevronDown = () => html`
109
+ <sp-icon-chevron75
110
+ class="spectrum-UIIcon-ChevronDown75"
111
+ ></sp-icon-chevron75>
112
+ `;
113
+ //# sourceMappingURL=index.js.map