@spectrum-web-components/action-group 0.11.2 → 0.12.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 (29) hide show
  1. package/README.md +56 -15
  2. package/custom-elements.json +6 -0
  3. package/package.json +5 -5
  4. package/src/ActionGroup.d.ts +6 -1
  5. package/src/ActionGroup.dev.js +6 -2
  6. package/src/ActionGroup.dev.js.map +2 -2
  7. package/src/ActionGroup.js +2 -2
  8. package/src/ActionGroup.js.map +3 -3
  9. package/src/action-group.css.dev.js +93 -136
  10. package/src/action-group.css.dev.js.map +2 -2
  11. package/src/action-group.css.js +95 -138
  12. package/src/action-group.css.js.map +2 -2
  13. package/src/spectrum-action-group.css.dev.js +91 -136
  14. package/src/spectrum-action-group.css.dev.js.map +2 -2
  15. package/src/spectrum-action-group.css.js +93 -138
  16. package/src/spectrum-action-group.css.js.map +2 -2
  17. package/src/spectrum-config.js +23 -0
  18. package/stories/action-group-sizes.stories.js +140 -0
  19. package/stories/action-group-sizes.stories.js.map +7 -0
  20. package/stories/action-group-tooltip.stories.js +15 -1
  21. package/stories/action-group-tooltip.stories.js.map +2 -2
  22. package/stories/action-group.stories.js +19 -1
  23. package/stories/action-group.stories.js.map +2 -2
  24. package/test/action-group-sizes.test-vrt.js +5 -0
  25. package/test/action-group-sizes.test-vrt.js.map +7 -0
  26. package/test/action-group-tooltip.test-vrt.js.map +2 -2
  27. package/test/action-group.test-vrt.js.map +2 -2
  28. package/test/action-group.test.js +16 -0
  29. package/test/action-group.test.js.map +2 -2
package/src/spectrum-action-group.css.js CHANGED
@@ -1,141 +1,96 @@
1
- "use strict";import{css as t}from"@spectrum-web-components/base";const r=t`
2
- :host{--spectrum-actiongroup-button-gap-reset:0}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(var(
3
- --spectrum-actiongroup-button-gap-y,
4
- var(--spectrum-alias-actiongroup-button-gap)
5
- )*-1)}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(
6
- --spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)
7
- )}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(
8
- --spectrum-actiongroup-button-gap-x,var(--spectrum-alias-actiongroup-button-gap)
9
- )}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(
10
- --spectrum-actiongroup-button-gap-x,var(--spectrum-alias-actiongroup-button-gap)
11
- )}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(
12
- --spectrum-actiongroup-button-gap-reset
13
- )}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(
14
- --spectrum-actiongroup-button-gap-reset
15
- )}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(
16
- --spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)
17
- )}:host([dir=ltr][vertical][vertical]){margin-left:var(
18
- --spectrum-actiongroup-button-gap-reset
19
- )}:host([dir=rtl][vertical][vertical]){margin-right:var(
20
- --spectrum-actiongroup-button-gap-reset
21
- )}:host([vertical][vertical]){margin-top:var(
22
- --spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)
1
+ "use strict";import{css as r}from"@spectrum-web-components/base";const o=r`
2
+ :host{--spectrum-actiongroup-button-spacing-reset:0;--spectrum-actiongroup-border-radius-reset:0;--spectrum-actiongroup-border-radius:var(--spectrum-corner-radius-100)}:host([size=s]){--spectrum-actiongroup-horizontal-spacing-regular:var(
3
+ --spectrum-spacing-75
4
+ );--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host([size=m]){--spectrum-actiongroup-horizontal-spacing-regular:var(
5
+ --spectrum-spacing-100
6
+ );--spectrum-actiongroup-vertical-spacing-regular:var(
7
+ --spectrum-spacing-100
8
+ )}:host([size=l]){--spectrum-actiongroup-horizontal-spacing-regular:var(
9
+ --spectrum-spacing-100
10
+ );--spectrum-actiongroup-vertical-spacing-regular:var(
11
+ --spectrum-spacing-100
12
+ )}:host([size=xl]){--spectrum-actiongroup-horizontal-spacing-regular:var(
13
+ --spectrum-spacing-100
14
+ );--spectrum-actiongroup-vertical-spacing-regular:var(
15
+ --spectrum-spacing-100
16
+ )}:host{display:flex;flex-wrap:wrap;gap:var(
17
+ --mod-actiongroup-horizontal-spacing-regular,var(--spectrum-actiongroup-horizontal-spacing-regular)
18
+ )}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){display:inline-flex;flex-direction:column;gap:var(
19
+ --mod-actiongroup-vertical-spacing-regular,var(--spectrum-actiongroup-vertical-spacing-regular)
23
20
  )}:host([compact]){gap:var(
24
- --spectrum-actiongroup-compact-button-gap,var(--spectrum-alias-actiongroup-button-gap-compact)
25
- )}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(
26
- --spectrum-actiongroup-quiet-compact-button-gap,var(--spectrum-alias-actiongroup-button-gap-quiet-compact)
27
- )}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(
28
- --spectrum-actiongroup-quiet-compact-button-gap,var(--spectrum-alias-actiongroup-button-gap-quiet-compact)
29
- )}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(
30
- --spectrum-actiongroup-button-gap-reset
31
- )}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(
32
- --spectrum-actiongroup-button-gap-reset
33
- )}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(
34
- --spectrum-actiongroup-button-gap-reset
35
- )}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(
36
- --spectrum-actiongroup-quiet-compact-button-gap,var(--spectrum-alias-actiongroup-button-gap-quiet-compact)
37
- )}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){--spectrum-actionbutton-focus-ring-border-radius-adjusted:var(
38
- --spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)
39
- );border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
40
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
41
- )}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
42
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
43
- )}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(
44
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
45
- )}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(
46
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
47
- )}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(var(
48
- --spectrum-actionbutton-m-texticon-border-size,
49
- var(--spectrum-alias-border-size-thin)
50
- )*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(var(
51
- --spectrum-actionbutton-m-texticon-border-size,
52
- var(--spectrum-alias-border-size-thin)
53
- )*-1/2)}:host([compact]:not([quiet])) ::slotted(:first-child){--spectrum-actionbutton-focus-ring-border-radius-adjusted:calc(var(
54
- --spectrum-actionbutton-m-quiet-textonly-border-radius,
55
- var(--spectrum-alias-component-border-radius)
56
- ) + var(
57
- --spectrum-actionbutton-m-textonly-focus-ring-gap,
58
- var(--spectrum-alias-component-focusring-gap)
59
- )) var(
60
- --spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)
21
+ --mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)
22
+ )}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:var(
23
+ --mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)
24
+ );position:relative;z-index:0}:host([compact]:not([quiet])) ::slotted(:first-child){--spectrum-actionbutton-focus-ring-border-radius:var(
25
+ --mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)
26
+ ) 0px 0px var(
27
+ --mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)
28
+ );border-end-start-radius:var(
29
+ --mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)
30
+ );border-start-start-radius:var(
31
+ --mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)
32
+ );margin-inline-start:var(
33
+ --mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)
34
+ )}:host([compact]:not([quiet])) ::slotted(:not(:first-child)){--spectrum-actionbutton-focus-ring-border-radius:0px;margin-inline-end:var(
35
+ --mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)
36
+ );margin-inline-start:var(
37
+ --mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)
38
+ )}:host([compact]:not([quiet])) ::slotted(:last-child){--spectrum-actionbutton-focus-ring-border-radius:0px var(
39
+ --mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)
61
40
  ) var(
62
- --spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)
63
- ) calc(var(
64
- --spectrum-actionbutton-m-quiet-textonly-border-radius,
65
- var(--spectrum-alias-component-border-radius)
66
- ) + var(
67
- --spectrum-actionbutton-m-textonly-focus-ring-gap,
68
- var(--spectrum-alias-component-focusring-gap)
69
- ))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(
70
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
71
- )}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(
72
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
73
- )}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
74
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
75
- )}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
76
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
77
- )}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(var(
78
- --spectrum-actionbutton-m-texticon-border-size,
79
- var(--spectrum-alias-border-size-thin)
80
- )*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(var(
81
- --spectrum-actionbutton-m-texticon-border-size,
82
- var(--spectrum-alias-border-size-thin)
83
- )*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted(:last-child){--spectrum-actionbutton-focus-ring-border-radius-adjusted:var(
84
- --spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)
85
- ) calc(var(
86
- --spectrum-actionbutton-m-quiet-textonly-border-radius,
87
- var(--spectrum-alias-component-border-radius)
88
- ) + var(
89
- --spectrum-actionbutton-m-textonly-focus-ring-gap,
90
- var(--spectrum-alias-component-focusring-gap)
91
- )) calc(var(
92
- --spectrum-actionbutton-m-quiet-textonly-border-radius,
93
- var(--spectrum-alias-component-border-radius)
94
- ) + var(
95
- --spectrum-actionbutton-m-textonly-focus-ring-gap,
96
- var(--spectrum-alias-component-focusring-gap)
97
- )) var(
98
- --spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)
99
- )}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(
100
- --spectrum-actionbutton-m-texticon-border-size,
101
- var(--spectrum-alias-border-size-thin)
102
- )*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(
103
- --spectrum-actionbutton-m-texticon-border-size,
104
- var(--spectrum-alias-border-size-thin)
105
- )*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(
106
- --spectrum-actionbutton-m-texticon-border-size,
107
- var(--spectrum-alias-border-size-thin)
108
- )*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(
109
- --spectrum-actionbutton-m-texticon-border-size,
110
- var(--spectrum-alias-border-size-thin)
111
- )*-1/2)}:host([compact][vertical]:not([quiet])){gap:0}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(var(
112
- --spectrum-actionbutton-m-texticon-border-size,
113
- var(--spectrum-alias-border-size-thin)
114
- )*-1/2);margin-top:calc(var(
115
- --spectrum-actionbutton-m-texticon-border-size,
116
- var(--spectrum-alias-border-size-thin)
117
- )*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
118
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
119
- )}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
120
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
121
- )}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
122
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
123
- )}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
124
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
125
- )}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(var(
126
- --spectrum-actionbutton-m-texticon-border-size,
127
- var(--spectrum-alias-border-size-thin)
128
- )*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
129
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
130
- )}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
131
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
132
- )}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
133
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
134
- )}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
135
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
136
- )}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(var(
137
- --spectrum-actionbutton-m-texticon-border-size,
138
- var(--spectrum-alias-border-size-thin)
139
- )*-1/2)}:host([justified]) ::slotted(*){flex:1}
140
- `;export default r;
41
+ --mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)
42
+ ) 0px;border-end-end-radius:var(
43
+ --mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)
44
+ );border-start-end-radius:var(
45
+ --mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)
46
+ );margin-inline-end:var(
47
+ --mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)
48
+ );margin-inline-start:var(
49
+ --mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)
50
+ )}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([compact][vertical]:not([quiet])){gap:var(
51
+ --mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)
52
+ )}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:var(
53
+ --mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)
54
+ )}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){--spectrum-actionbutton-focus-ring-border-radius:var(
55
+ --mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)
56
+ ) var(
57
+ --mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)
58
+ ) 0px 0px;border-start-end-radius:var(
59
+ --mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)
60
+ );border-start-start-radius:var(
61
+ --mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)
62
+ );margin-block-end:var(
63
+ --mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)
64
+ );margin-block-start:var(
65
+ --mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)
66
+ );margin-inline-end:var(
67
+ --mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)
68
+ )}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-block-end:var(
69
+ --mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)
70
+ );margin-block-start:var(
71
+ --mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)
72
+ );margin-inline-end:var(
73
+ --mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)
74
+ );margin-inline-start:var(
75
+ --mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)
76
+ )}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){--spectrum-actionbutton-focus-ring-border-radius:0px 0px var(
77
+ --mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)
78
+ ) var(
79
+ --mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)
80
+ );border-end-end-radius:var(
81
+ --mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)
82
+ );border-end-start-radius:var(
83
+ --mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)
84
+ );margin-block-end:var(
85
+ --mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)
86
+ );margin-block-start:var(
87
+ --mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)
88
+ )}:host([justified]) ::slotted(*){flex:1}:host{--spectrum-actiongroup-gap-size-compact:var(
89
+ --system-spectrum-actiongroup-gap-size-compact
90
+ );--spectrum-actiongroup-horizontal-spacing-compact:var(
91
+ --system-spectrum-actiongroup-horizontal-spacing-compact
92
+ );--spectrum-actiongroup-vertical-spacing-compact:var(
93
+ --system-spectrum-actiongroup-vertical-spacing-compact
94
+ )}
95
+ `;export default o;
141
96
  //# sourceMappingURL=spectrum-action-group.css.js.map
package/src/spectrum-action-group.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-action-group.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2022 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-actiongroup-button-gap-reset:0}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(var(\n--spectrum-actiongroup-button-gap-y,\nvar(--spectrum-alias-actiongroup-button-gap)\n)*-1)}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=ltr][vertical][vertical]){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical][vertical]){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical][vertical]){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([compact]){gap:var(\n--spectrum-actiongroup-compact-button-gap,var(--spectrum-alias-actiongroup-button-gap-compact)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap,var(--spectrum-alias-actiongroup-button-gap-quiet-compact)\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap,var(--spectrum-alias-actiongroup-button-gap-quiet-compact)\n)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-quiet-compact-button-gap,var(--spectrum-alias-actiongroup-button-gap-quiet-compact)\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){--spectrum-actionbutton-focus-ring-border-radius-adjusted:var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n);border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([compact]:not([quiet])) ::slotted(:first-child){--spectrum-actionbutton-focus-ring-border-radius-adjusted:calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n)) var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n) var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n) calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted(:last-child){--spectrum-actionbutton-focus-ring-border-radius-adjusted:var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n) calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n)) calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n)) var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n)}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([compact][vertical]:not([quiet])){gap:0}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2);margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([justified]) ::slotted(*){flex:1}\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,EA4If,eAAeC",
4
+ "sourcesContent": ["/*\nCopyright 2022 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-actiongroup-button-spacing-reset:0;--spectrum-actiongroup-border-radius-reset:0;--spectrum-actiongroup-border-radius:var(--spectrum-corner-radius-100)}:host([size=s]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-75\n);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host([size=m]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-100\n);--spectrum-actiongroup-vertical-spacing-regular:var(\n--spectrum-spacing-100\n)}:host([size=l]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-100\n);--spectrum-actiongroup-vertical-spacing-regular:var(\n--spectrum-spacing-100\n)}:host([size=xl]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-100\n);--spectrum-actiongroup-vertical-spacing-regular:var(\n--spectrum-spacing-100\n)}:host{display:flex;flex-wrap:wrap;gap:var(\n--mod-actiongroup-horizontal-spacing-regular,var(--spectrum-actiongroup-horizontal-spacing-regular)\n)}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){display:inline-flex;flex-direction:column;gap:var(\n--mod-actiongroup-vertical-spacing-regular,var(--spectrum-actiongroup-vertical-spacing-regular)\n)}:host([compact]){gap:var(\n--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n);position:relative;z-index:0}:host([compact]:not([quiet])) ::slotted(:first-child){--spectrum-actionbutton-focus-ring-border-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px 0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-inline-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])) ::slotted(:not(:first-child)){--spectrum-actionbutton-focus-ring-border-radius:0px;margin-inline-end:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\n);margin-inline-start:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\n)}:host([compact]:not([quiet])) ::slotted(:last-child){--spectrum-actionbutton-focus-ring-border-radius:0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px;border-end-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-inline-end:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n);margin-inline-start:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\n)}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([compact][vertical]:not([quiet])){gap:var(\n--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)\n)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){--spectrum-actionbutton-focus-ring-border-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px 0px;border-start-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-block-end:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-block-start:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-inline-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-block-end:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-block-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-inline-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-inline-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){--spectrum-actionbutton-focus-ring-border-radius:0px 0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-block-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-block-start:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n)}:host([justified]) ::slotted(*){flex:1}:host{--spectrum-actiongroup-gap-size-compact:var(\n--system-spectrum-actiongroup-gap-size-compact\n);--spectrum-actiongroup-horizontal-spacing-compact:var(\n--system-spectrum-actiongroup-horizontal-spacing-compact\n);--spectrum-actiongroup-vertical-spacing-compact:var(\n--system-spectrum-actiongroup-vertical-spacing-compact\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,EA+Ff,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/src/spectrum-config.js CHANGED
@@ -35,6 +35,29 @@ const config = {
35
35
  type: 'boolean',
36
36
  selector: '.spectrum-ActionGroup--justified',
37
37
  },
38
+ {
39
+ type: 'enum',
40
+ name: 'size',
41
+ forceOntoHost: true,
42
+ values: [
43
+ {
44
+ name: 's',
45
+ selector: '.spectrum-ActionGroup--sizeS',
46
+ },
47
+ {
48
+ name: 'm',
49
+ selector: '.spectrum-ActionGroup--sizeM',
50
+ },
51
+ {
52
+ name: 'l',
53
+ selector: '.spectrum-ActionGroup--sizeL',
54
+ },
55
+ {
56
+ name: 'xl',
57
+ selector: '.spectrum-ActionGroup--sizeXL',
58
+ },
59
+ ],
60
+ },
38
61
  ],
39
62
  slots: [
40
63
  {
package/stories/action-group-sizes.stories.js ADDED
@@ -0,0 +1,140 @@
1
+ "use strict";
2
+ import { html } from "@spectrum-web-components/base";
3
+ import { spreadProps } from "../../../test/lit-helpers.js";
4
+ import "@spectrum-web-components/action-group/sp-action-group.js";
5
+ import "@spectrum-web-components/action-button/sp-action-button.js";
6
+ import "@spectrum-web-components/overlay/overlay-trigger.js";
7
+ import "@spectrum-web-components/tooltip/sp-tooltip.js";
8
+ import "@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js";
9
+ import "@spectrum-web-components/icons-workflow/icons/sp-icon-info.js";
10
+ import "@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js";
11
+ export default {
12
+ title: "Action Group/Sizes",
13
+ component: "sp-action-group",
14
+ args: {
15
+ compact: false,
16
+ emphasized: false,
17
+ justified: false,
18
+ quiet: false,
19
+ vertical: false,
20
+ size: "m"
21
+ },
22
+ argTypes: {
23
+ compact: {
24
+ name: "compact",
25
+ description: "Visually joins the buttons together to clarify their relationship to one another.",
26
+ type: { name: "boolean", required: false },
27
+ table: {
28
+ type: { summary: "boolean" },
29
+ defaultValue: { summary: false }
30
+ },
31
+ control: {
32
+ type: "boolean"
33
+ }
34
+ },
35
+ emphasized: {
36
+ name: "emphasized",
37
+ type: { name: "boolean", required: false },
38
+ table: {
39
+ type: { summary: "boolean" },
40
+ defaultValue: { summary: false }
41
+ },
42
+ control: {
43
+ type: "boolean"
44
+ }
45
+ },
46
+ justified: {
47
+ name: "justified",
48
+ description: "Aligns the action group items to use all the available space on that line.",
49
+ type: { name: "boolean", required: false },
50
+ table: {
51
+ type: { summary: "boolean" },
52
+ defaultValue: { summary: false }
53
+ },
54
+ control: {
55
+ type: "boolean"
56
+ }
57
+ },
58
+ quiet: {
59
+ name: "quiet",
60
+ type: { name: "boolean", required: false },
61
+ table: {
62
+ type: { summary: "boolean" },
63
+ defaultValue: { summary: false }
64
+ },
65
+ control: {
66
+ type: "boolean"
67
+ }
68
+ },
69
+ vertical: {
70
+ name: "vertical",
71
+ description: "Changes the orientation of the action group.",
72
+ type: { name: "boolean", required: false },
73
+ table: {
74
+ type: { summary: "boolean" },
75
+ defaultValue: { summary: false }
76
+ },
77
+ control: {
78
+ type: "boolean"
79
+ }
80
+ },
81
+ size: {
82
+ name: "size",
83
+ description: "The size at which to display the action group.",
84
+ type: { name: "string", required: true },
85
+ table: {
86
+ type: { summary: '"s" | "m" | "l" | "xl"' },
87
+ defaultValue: { summary: "m" }
88
+ },
89
+ control: {
90
+ type: "select",
91
+ options: ["s", "m", "l", "xl"]
92
+ }
93
+ }
94
+ }
95
+ };
96
+ function renderButtons(args) {
97
+ return html`
98
+ <sp-action-group ${spreadProps(args)}>
99
+ <sp-action-button>Button 1</sp-action-button>
100
+ <sp-action-button>Longer Button 2</sp-action-button>
101
+ <sp-action-button>Short 3</sp-action-button>
102
+ </sp-action-group>
103
+ `;
104
+ }
105
+ export const XS = (args) => renderButtons(args);
106
+ XS.args = { size: "xs" };
107
+ export const s = (args) => renderButtons(args);
108
+ s.args = { size: "s" };
109
+ export const m = (args) => renderButtons(args);
110
+ m.args = { size: "m" };
111
+ export const l = (args) => renderButtons(args);
112
+ l.args = { size: "l" };
113
+ export const XL = (args) => renderButtons(args);
114
+ XL.args = { size: "xl" };
115
+ export const XSVertical = (args) => renderButtons(args);
116
+ XSVertical.args = {
117
+ vertical: true,
118
+ size: "xs"
119
+ };
120
+ export const sVertical = (args) => renderButtons(args);
121
+ sVertical.args = {
122
+ vertical: true,
123
+ size: "s"
124
+ };
125
+ export const mVertical = (args) => renderButtons(args);
126
+ mVertical.args = {
127
+ vertical: true,
128
+ size: "m"
129
+ };
130
+ export const lVertical = (args) => renderButtons(args);
131
+ lVertical.args = {
132
+ vertical: true,
133
+ size: "l"
134
+ };
135
+ export const XLVertical = (args) => renderButtons(args);
136
+ XLVertical.args = {
137
+ vertical: true,
138
+ size: "xl"
139
+ };
140
+ //# sourceMappingURL=action-group-sizes.stories.js.map
package/stories/action-group-sizes.stories.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["action-group-sizes.stories.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2022 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*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';\n\nexport default {\n title: 'Action Group/Sizes',\n component: 'sp-action-group',\n args: {\n compact: false,\n emphasized: false,\n justified: false,\n quiet: false,\n vertical: false,\n size: 'm',\n },\n argTypes: {\n compact: {\n name: 'compact',\n description:\n 'Visually joins the buttons together to clarify their relationship to one another.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n emphasized: {\n name: 'emphasized',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n justified: {\n name: 'justified',\n description:\n 'Aligns the action group items to use all the available space on that line.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n quiet: {\n name: 'quiet',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n vertical: {\n name: 'vertical',\n description: 'Changes the orientation of the action group.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n size: {\n name: 'size',\n description: 'The size at which to display the action group.',\n type: { name: 'string', required: true },\n table: {\n type: { summary: '\"s\" | \"m\" | \"l\" | \"xl\"' },\n defaultValue: { summary: 'm' },\n },\n control: {\n type: 'select',\n options: ['s', 'm', 'l', 'xl'],\n },\n },\n },\n};\n\ninterface Properties {\n compact?: boolean;\n emphasized?: boolean;\n justified?: boolean;\n quiet?: boolean;\n vertical?: boolean;\n size?: 's' | 'm' | 'l' | 'xl';\n [prop: string]: unknown;\n}\n\nfunction renderButtons(args: Properties): TemplateResult {\n return html`\n <sp-action-group ${spreadProps(args)}>\n <sp-action-button>Button 1</sp-action-button>\n <sp-action-button>Longer Button 2</sp-action-button>\n <sp-action-button>Short 3</sp-action-button>\n </sp-action-group>\n `;\n}\n\nexport const XS = (args: Properties): TemplateResult => renderButtons(args);\nXS.args = { size: 'xs' };\n\nexport const s = (args: Properties): TemplateResult => renderButtons(args);\ns.args = { size: 's' };\n\nexport const m = (args: Properties): TemplateResult => renderButtons(args);\nm.args = { size: 'm' };\n\nexport const l = (args: Properties): TemplateResult => renderButtons(args);\nl.args = { size: 'l' };\n\nexport const XL = (args: Properties): TemplateResult => renderButtons(args);\nXL.args = { size: 'xl' };\n\nexport const XSVertical = (args: Properties): TemplateResult =>\n renderButtons(args);\nXSVertical.args = {\n vertical: true,\n size: 'xs',\n};\nexport const sVertical = (args: Properties): TemplateResult =>\n renderButtons(args);\nsVertical.args = {\n vertical: true,\n size: 's',\n};\n\nexport const mVertical = (args: Properties): TemplateResult =>\n renderButtons(args);\nmVertical.args = {\n vertical: true,\n size: 'm',\n};\n\nexport const lVertical = (args: Properties): TemplateResult =>\n renderButtons(args);\nlVertical.args = {\n vertical: true,\n size: 'l',\n};\n\nexport const XLVertical = (args: Properties): TemplateResult =>\n renderButtons(args);\nXLVertical.args = {\n vertical: true,\n size: 'xl',\n};\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
package/stories/action-group-tooltip.stories.js CHANGED
@@ -17,7 +17,8 @@ export default {
17
17
  justified: false,
18
18
  quiet: false,
19
19
  vertical: false,
20
- selects: "none"
20
+ selects: "none",
21
+ size: "m"
21
22
  },
22
23
  argTypes: {
23
24
  compact: {
@@ -88,6 +89,19 @@ export default {
88
89
  type: "inline-radio",
89
90
  options: ["none", "single", "multiple"]
90
91
  }
92
+ },
93
+ size: {
94
+ name: "size",
95
+ description: "The size at which to display the action group.",
96
+ type: { name: "string", required: true },
97
+ table: {
98
+ type: { summary: '"s" | "m" | "l" | "xl"' },
99
+ defaultValue: { summary: "m" }
100
+ },
101
+ control: {
102
+ type: "select",
103
+ options: ["s", "m", "l", "xl"]
104
+ }
91
105
  }
92
106
  }
93
107
  };
package/stories/action-group-tooltip.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["action-group-tooltip.stories.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';\nimport { ActionGroup } from '@spectrum-web-components/action-group/src/ActionGroup.js';\n\nexport default {\n title: 'Action Group/Tooltips',\n component: 'sp-action-group',\n args: {\n compact: false,\n emphasized: false,\n justified: false,\n quiet: false,\n vertical: false,\n selects: 'none',\n },\n argTypes: {\n compact: {\n name: 'compact',\n description:\n 'Visually joins the buttons together to clarify their relationship to one another.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n emphasized: {\n name: 'emphasized',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n justified: {\n name: 'justified',\n description:\n 'Aligns the action group items to use all the available space on that line.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n quiet: {\n name: 'quiet',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n vertical: {\n name: 'vertical',\n description: 'Changes the orientation of the action group.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n selects: {\n name: 'selects',\n description:\n 'Whether the elements selects its children and how many it can select at a time.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['none', 'single', 'multiple'],\n },\n },\n },\n};\n\ninterface Properties {\n compact?: boolean;\n emphasized?: boolean;\n justified?: boolean;\n quiet?: boolean;\n vertical?: boolean;\n selects?: 'none' | 'single' | 'multiple';\n [prop: string]: unknown;\n}\n\nconst template = (args: Properties): TemplateResult => {\n requestAnimationFrame(() => {\n const group = document.querySelector('sp-action-group') as ActionGroup;\n const selectedDiv = group.nextElementSibling;\n if (selectedDiv) {\n selectedDiv.textContent = `Selected: ${JSON.stringify(\n group.selected\n )}`;\n }\n });\n return html`\n <sp-action-group\n label=\"Favorite Color\"\n ...=${spreadProps(args)}\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Red</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n This is a cool color.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Green</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n You wouldn't be wrong.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\" value=\"blue\" selected>\n Blue\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sky in spring.</sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Yellow</sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sun at noon.</sp-tooltip>\n </overlay-trigger>\n </sp-action-group>\n ${!!args.selects\n ? html`\n <div>Selected:</div>\n `\n : html``}\n `;\n};\n\nexport const selectsSingle = (args: Properties): TemplateResult =>\n template(args);\nselectsSingle.args = {\n compact: true,\n emphasized: true,\n selects: 'single',\n};\n\nexport const selectsMultiple = (args: Properties): TemplateResult =>\n template(args);\nselectsMultiple.args = {\n compact: true,\n emphasized: true,\n selects: 'multiple',\n};\n\nexport const justified = (args: Properties): TemplateResult => template(args);\njustified.args = {\n compact: true,\n emphasized: true,\n justified: true,\n selects: undefined,\n};\n\nexport const vertical = (args: Properties): TemplateResult => template(args);\nvertical.args = {\n compact: true,\n emphasized: true,\n vertical: true,\n selects: undefined,\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';\nimport { ActionGroup } from '@spectrum-web-components/action-group/src/ActionGroup.js';\n\nexport default {\n title: 'Action Group/Tooltips',\n component: 'sp-action-group',\n args: {\n compact: false,\n emphasized: false,\n justified: false,\n quiet: false,\n vertical: false,\n selects: 'none',\n size: 'm',\n },\n argTypes: {\n compact: {\n name: 'compact',\n description:\n 'Visually joins the buttons together to clarify their relationship to one another.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n emphasized: {\n name: 'emphasized',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n justified: {\n name: 'justified',\n description:\n 'Aligns the action group items to use all the available space on that line.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n quiet: {\n name: 'quiet',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n vertical: {\n name: 'vertical',\n description: 'Changes the orientation of the action group.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n selects: {\n name: 'selects',\n description:\n 'Whether the elements selects its children and how many it can select at a time.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['none', 'single', 'multiple'],\n },\n },\n size: {\n name: 'size',\n description: 'The size at which to display the action group.',\n type: { name: 'string', required: true },\n table: {\n type: { summary: '\"s\" | \"m\" | \"l\" | \"xl\"' },\n defaultValue: { summary: 'm' },\n },\n control: {\n type: 'select',\n options: ['s', 'm', 'l', 'xl'],\n },\n },\n },\n};\n\ninterface Properties {\n compact?: boolean;\n emphasized?: boolean;\n justified?: boolean;\n quiet?: boolean;\n vertical?: boolean;\n selects?: 'none' | 'single' | 'multiple';\n size?: 's' | 'm' | 'l' | 'xl';\n [prop: string]: unknown;\n}\n\nconst template = (args: Properties): TemplateResult => {\n requestAnimationFrame(() => {\n const group = document.querySelector('sp-action-group') as ActionGroup;\n const selectedDiv = group.nextElementSibling;\n if (selectedDiv) {\n selectedDiv.textContent = `Selected: ${JSON.stringify(\n group.selected\n )}`;\n }\n });\n return html`\n <sp-action-group\n label=\"Favorite Color\"\n ...=${spreadProps(args)}\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Red</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n This is a cool color.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Green</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n You wouldn't be wrong.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\" value=\"blue\" selected>\n Blue\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sky in spring.</sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Yellow</sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sun at noon.</sp-tooltip>\n </overlay-trigger>\n </sp-action-group>\n ${!!args.selects\n ? html`\n <div>Selected:</div>\n `\n : html``}\n `;\n};\n\nexport const selectsSingle = (args: Properties): TemplateResult =>\n template(args);\nselectsSingle.args = {\n compact: true,\n emphasized: true,\n selects: 'single',\n};\n\nexport const selectsMultiple = (args: Properties): TemplateResult =>\n template(args);\nselectsMultiple.args = {\n compact: true,\n emphasized: true,\n selects: 'multiple',\n};\n\nexport const justified = (args: Properties): TemplateResult => template(args);\njustified.args = {\n compact: true,\n emphasized: true,\n justified: true,\n selects: undefined,\n};\n\nexport const vertical = (args: Properties): TemplateResult => template(args);\nvertical.args = {\n compact: true,\n emphasized: true,\n vertical: true,\n selects: undefined,\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }