@spectrum-web-components/action-group 0.4.15 → 0.4.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -4
- package/custom-elements.json +21 -2
- package/package.json +3 -3
- package/src/ActionGroup.d.ts +1 -0
- package/src/ActionGroup.js +14 -0
- package/src/ActionGroup.js.map +1 -1
- package/src/action-group.css.js +113 -13
- package/src/action-group.css.js.map +1 -1
- package/src/spectrum-action-group.css.js +101 -13
- package/src/spectrum-action-group.css.js.map +1 -1
- package/src/spectrum-config.js +1 -1
package/README.md
CHANGED
|
@@ -24,16 +24,41 @@ When looking to leverage the `ActionGroup` base class as a type and/or for exten
|
|
|
24
24
|
import { ActionGroup } from '@spectrum-web-components/action-group';
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
+
## Example
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<sp-action-group>
|
|
31
|
+
<sp-action-button>
|
|
32
|
+
<sp-icon-magnify slot="icon"></sp-icon-magnify>
|
|
33
|
+
Button 1
|
|
34
|
+
</sp-action-button>
|
|
35
|
+
<sp-action-button>
|
|
36
|
+
<sp-icon-magnify slot="icon"></sp-icon-magnify>
|
|
37
|
+
Longer Button 2
|
|
38
|
+
</sp-action-button>
|
|
39
|
+
<sp-action-button>
|
|
40
|
+
<sp-icon-magnify slot="icon"></sp-icon-magnify>
|
|
41
|
+
Short 3
|
|
42
|
+
</sp-action-button>
|
|
43
|
+
</sp-action-group>
|
|
44
|
+
```
|
|
45
|
+
|
|
27
46
|
## Selects
|
|
28
47
|
|
|
29
48
|
An `<sp-action-group selects="single|multiple">` will manage a `selected` property that consists on an array of the `<sp-action-button>` children that are currently selected. A `change` event is dispatched from the `<sp-action-group>` element when the value of `selected` is updated. This event can be canceled via `event.preventDefault()`, after which the value of `selected` will be returned to what it was previously.
|
|
30
49
|
|
|
50
|
+
When a selection can be made, it is a good idea to supply the group of options with accessible text that names the group of buttons. This can be done in a non-visual way via the `label` attribute of the `<sp-action-group>` element. You can also associate the `<sp-action-group>` to a second, visible DOM element via the `aria-labelledby` attribute or, when available, via the `for` attribute on the second element to make the association in the other direction.
|
|
51
|
+
|
|
31
52
|
### Single
|
|
32
53
|
|
|
33
54
|
An `<sp-action-group selects="single">` will manage its `<sp-action-button>` children as "radio buttons" allowing the user to select a _single_ one of the buttons presented. The `<sp-action-button>` children will only be able to turn their `selected` value on while maintaining a single selection after an intial selection is made.
|
|
34
55
|
|
|
35
56
|
```html
|
|
36
|
-
<sp-action-group
|
|
57
|
+
<sp-action-group
|
|
58
|
+
selects="single"
|
|
59
|
+
emphasized
|
|
60
|
+
label="Single Selection Demo Group"
|
|
61
|
+
>
|
|
37
62
|
<sp-action-button>
|
|
38
63
|
<sp-icon-magnify slot="icon"></sp-icon-magnify>
|
|
39
64
|
Button 1
|
|
@@ -54,7 +79,11 @@ An `<sp-action-group selects="single">` will manage its `<sp-action-button>` chi
|
|
|
54
79
|
An `<sp-action-group selects="multiple">` will manage its `<sp-action-button>` children as "chekboxes" allowing the user to select a _multiple_ of the buttons presented. The `<sp-action-button>` children will toggle their `selected` value on and off when clicked sucessively.
|
|
55
80
|
|
|
56
81
|
```html
|
|
57
|
-
<sp-action-group
|
|
82
|
+
<sp-action-group
|
|
83
|
+
selects="multiple"
|
|
84
|
+
emphasized
|
|
85
|
+
label="Multiple Selection Demo Group"
|
|
86
|
+
>
|
|
58
87
|
<sp-action-button selected>
|
|
59
88
|
<sp-icon-magnify slot="icon"></sp-icon-magnify>
|
|
60
89
|
Button 1
|
|
@@ -70,7 +99,9 @@ An `<sp-action-group selects="multiple">` will manage its `<sp-action-button>` c
|
|
|
70
99
|
</sp-action-group>
|
|
71
100
|
```
|
|
72
101
|
|
|
73
|
-
##
|
|
102
|
+
## Horizontal
|
|
103
|
+
|
|
104
|
+
By default, an `<sp-action-group>` will organize its child buttons horizontally and the delivery of those buttons can be modified with the `compact`, `emphasized`, or `quiet` attributes.
|
|
74
105
|
|
|
75
106
|
```html
|
|
76
107
|
<sp-action-group>
|
|
@@ -115,7 +146,7 @@ An `<sp-action-group selects="multiple">` will manage its `<sp-action-button>` c
|
|
|
115
146
|
</sp-action-button>
|
|
116
147
|
</sp-action-group>
|
|
117
148
|
<br />
|
|
118
|
-
<sp-action-group compact>
|
|
149
|
+
<sp-action-group compact emphasized>
|
|
119
150
|
<sp-action-button label="Zoom in">
|
|
120
151
|
<sp-icon-magnify slot="icon"></sp-icon-magnify>
|
|
121
152
|
</sp-action-button>
|
|
@@ -130,6 +161,8 @@ An `<sp-action-group selects="multiple">` will manage its `<sp-action-button>` c
|
|
|
130
161
|
|
|
131
162
|
## Vertical
|
|
132
163
|
|
|
164
|
+
The use of the `vertical` attribute instructs the `<sp-action-group>` element to organize its child buttons vertically, while accepting the same `compact`, `emphasized`, and `quiet` attributes as modifiers.
|
|
165
|
+
|
|
133
166
|
```html
|
|
134
167
|
<div style="display: flex; justify-content: space-around;">
|
|
135
168
|
<sp-action-group vertical>
|
|
@@ -187,6 +220,8 @@ An `<sp-action-group selects="multiple">` will manage its `<sp-action-button>` c
|
|
|
187
220
|
|
|
188
221
|
## Justified
|
|
189
222
|
|
|
223
|
+
The `justified` attribute will cause the `<sp-action-group>` element to fill the available horizontal space and evenly distribute that space across its child button elements.
|
|
224
|
+
|
|
190
225
|
```html
|
|
191
226
|
<sp-action-group justified>
|
|
192
227
|
<sp-action-button>
|
package/custom-elements.json
CHANGED
|
@@ -142,6 +142,25 @@
|
|
|
142
142
|
"privacy": "private",
|
|
143
143
|
"default": "[]"
|
|
144
144
|
},
|
|
145
|
+
{
|
|
146
|
+
"kind": "method",
|
|
147
|
+
"name": "focus",
|
|
148
|
+
"privacy": "public",
|
|
149
|
+
"return": {
|
|
150
|
+
"type": {
|
|
151
|
+
"text": "void"
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
"parameters": [
|
|
155
|
+
{
|
|
156
|
+
"name": "options",
|
|
157
|
+
"optional": true,
|
|
158
|
+
"type": {
|
|
159
|
+
"text": "FocusOptions"
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
]
|
|
163
|
+
},
|
|
145
164
|
{
|
|
146
165
|
"kind": "method",
|
|
147
166
|
"name": "handleClick",
|
|
@@ -294,7 +313,7 @@
|
|
|
294
313
|
{
|
|
295
314
|
"kind": "variable",
|
|
296
315
|
"name": "styles",
|
|
297
|
-
"default": "css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(--spectrum-global-dimension-size-25);display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(--spectrum-actiongroup-button-gap-reset)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(--spectrum-actiongroup-button-gap-reset)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100))}:host([dir=ltr][vertical][vertical]){margin-left:var(--spectrum-actiongroup-button-gap-reset)}:host([dir=rtl][vertical][vertical]){margin-right:var(--spectrum-actiongroup-button-gap-reset)}:host([vertical][vertical]){margin-top:var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100))}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(--spectrum-actiongroup-quiet-compact-button-gap)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(--spectrum-actiongroup-quiet-compact-button-gap)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(--spectrum-actiongroup-button-gap-reset)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(--spectrum-actiongroup-button-gap-reset)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(--spectrum-actiongroup-button-gap-reset)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(--spectrum-actiongroup-quiet-compact-button-gap)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){position:relative;border-radius:0;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/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([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]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-top:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2);margin-bottom:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-top:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2);margin-bottom:0}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-right:0;margin-left:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){display:flex;flex-direction:column;align-items:stretch}:host([compact]:not([quiet])) ::slotted(:not([role])){--spectrum-actionbutton-m-border-radius:0;--spectrum-actionbutton-s-border-radius:var(--spectrum-actionbutton-m-border-radius);--spectrum-actionbutton-l-border-radius:var(--spectrum-actionbutton-m-border-radius);--spectrum-actionbutton-xl-border-radius:var(--spectrum-actionbutton-m-border-radius)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular)}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(--spectrum-alias-border-radius-regular) 0 0 var(--spectrum-alias-border-radius-regular)}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:var(--spectrum-alias-border-radius-regular) 0 0 var(--spectrum-alias-border-radius-regular)}\n`"
|
|
316
|
+
"default": "css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(\n--spectrum-global-dimension-size-25\n)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\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-global-dimension-size-100)\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-global-dimension-size-100)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap\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\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){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-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/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([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(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2);margin-top:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-left:0;margin-right:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){align-items:stretch;display:flex;flex-direction:column}:host([compact]:not([quiet])) ::slotted(:not([role])){--spectrum-actionbutton-m-border-radius:0;--spectrum-actionbutton-s-border-radius:var(\n--spectrum-actionbutton-m-border-radius\n);--spectrum-actionbutton-l-border-radius:var(\n--spectrum-actionbutton-m-border-radius\n);--spectrum-actionbutton-xl-border-radius:var(\n--spectrum-actionbutton-m-border-radius\n)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(\n--spectrum-alias-border-radius-regular\n) var(--spectrum-alias-border-radius-regular) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular)}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(\n--spectrum-alias-border-radius-regular\n) 0 0 var(--spectrum-alias-border-radius-regular)}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:var(\n--spectrum-alias-border-radius-regular\n) 0 0 var(--spectrum-alias-border-radius-regular)}\n`"
|
|
298
317
|
}
|
|
299
318
|
],
|
|
300
319
|
"exports": [
|
|
@@ -330,7 +349,7 @@
|
|
|
330
349
|
{
|
|
331
350
|
"kind": "variable",
|
|
332
351
|
"name": "styles",
|
|
333
|
-
"default": "css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(--spectrum-global-dimension-size-25)
|
|
352
|
+
"default": "css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(\n--spectrum-global-dimension-size-25\n)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\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-global-dimension-size-100)\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-global-dimension-size-100)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap\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\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){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-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/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([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(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2);margin-top:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([justified]) ::slotted(*){flex:1}\n`"
|
|
334
353
|
}
|
|
335
354
|
],
|
|
336
355
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/action-group",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.17",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"lit-html"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@spectrum-web-components/action-button": "^0.5.
|
|
47
|
+
"@spectrum-web-components/action-button": "^0.5.8",
|
|
48
48
|
"@spectrum-web-components/base": "^0.4.5",
|
|
49
49
|
"tslib": "^2.0.0"
|
|
50
50
|
},
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"sideEffects": [
|
|
57
57
|
"./sp-*.js"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "3d9d540b4cc99ea64586a66a287c0aa51245db8e"
|
|
60
60
|
}
|
package/src/ActionGroup.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ export declare class ActionGroup extends SpectrumElement {
|
|
|
18
18
|
get selected(): string[];
|
|
19
19
|
set selected(selected: string[]);
|
|
20
20
|
private _selected;
|
|
21
|
+
focus(options?: FocusOptions): void;
|
|
21
22
|
private handleClick;
|
|
22
23
|
private handleFocusin;
|
|
23
24
|
private handleKeydown;
|
package/src/ActionGroup.js
CHANGED
|
@@ -153,6 +153,20 @@ export class ActionGroup extends SpectrumElement {
|
|
|
153
153
|
});
|
|
154
154
|
}
|
|
155
155
|
}
|
|
156
|
+
focus(options) {
|
|
157
|
+
if (!this.buttons.length) {
|
|
158
|
+
return;
|
|
159
|
+
}
|
|
160
|
+
const firstButtonNonDisabled = this.buttons.find((button) => {
|
|
161
|
+
if (this.selected) {
|
|
162
|
+
return button.selected;
|
|
163
|
+
}
|
|
164
|
+
return !button.disabled;
|
|
165
|
+
});
|
|
166
|
+
if (firstButtonNonDisabled) {
|
|
167
|
+
firstButtonNonDisabled.focus(options);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
156
170
|
handleClick(event) {
|
|
157
171
|
const target = event.target;
|
|
158
172
|
if (typeof target.value === 'undefined') {
|
package/src/ActionGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionGroup.js","sourceRoot":"","sources":["ActionGroup.ts"],"names":[],"mappings":"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","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 {\n html,\n SpectrumElement,\n CSSResultArray,\n TemplateResult,\n property,\n PropertyValues,\n} from '@spectrum-web-components/base';\nimport type { ActionButton } from '@spectrum-web-components/action-button';\n\nimport styles from './action-group.css.js';\n\nconst EMPTY_SELECTION: string[] = [];\n\n/**\n * @element sp-action-group\n * @slot - the sp-action-button elements that make up the group\n */\nexport class ActionGroup extends SpectrumElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n public buttons: ActionButton[] = [];\n protected _buttonSelector = 'sp-action-button';\n\n @property({ type: Boolean, reflect: true })\n public compact = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n @property({ type: Boolean, reflect: true })\n public justified = false;\n\n @property({ type: String })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public selects: undefined | 'single' | 'multiple';\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: Array })\n public get selected(): string[] {\n return this._selected;\n }\n public set selected(selected: string[]) {\n if (selected === this.selected) return;\n const old = this.selected;\n this._selected = selected;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this._selected = old;\n this.buttons.map((button) => {\n button.selected = this.selected.includes(button.value);\n });\n }\n }\n private _selected: string[] = EMPTY_SELECTION;\n\n private handleClick(event: Event): void {\n const target = event.target as ActionButton;\n if (typeof target.value === 'undefined') {\n return;\n }\n switch (this.selects) {\n case 'single': {\n const selected = [\n ...this.querySelectorAll('[selected]'),\n ] as ActionButton[];\n selected.forEach((el) => {\n el.selected = false;\n el.tabIndex = -1;\n el.setAttribute('aria-checked', 'false');\n });\n target.selected = true;\n target.tabIndex = 0;\n target.setAttribute('aria-checked', 'true');\n this.selected = [target.value];\n target.focus();\n break;\n }\n case 'multiple': {\n const selected = [...this.selected];\n target.selected = !target.selected;\n target.setAttribute(\n 'aria-checked',\n target.selected ? 'true' : 'false'\n );\n if (target.selected) {\n selected.push(target.value);\n } else {\n selected.splice(this.selected.indexOf(target.value), 1);\n }\n this.selected = selected;\n break;\n }\n default:\n this.selected = EMPTY_SELECTION;\n break;\n }\n }\n\n private handleFocusin = (): void => {\n this.addEventListener('focusout', this.handleFocusout);\n this.addEventListener('keydown', this.handleKeydown);\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n if (\n ![\n 'ArrowUp',\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowDown',\n 'End',\n 'Home',\n 'PageUp',\n 'PageDown',\n ].includes(code)\n ) {\n return;\n }\n const activeElement = (this.getRootNode() as Document)\n .activeElement as ActionButton;\n /* c8 ignore next 3 */\n if (!activeElement) {\n return;\n }\n let nextIndex = this.buttons.indexOf(activeElement);\n /* c8 ignore next 3 */\n if (nextIndex === -1) {\n return;\n }\n const circularIndexedElement = <T extends HTMLElement>(\n list: T[],\n index: number\n ): T => list[(list.length + index) % list.length];\n const buttonFromDelta = (delta: number): void => {\n nextIndex += delta;\n while (circularIndexedElement(this.buttons, nextIndex).disabled) {\n nextIndex += delta;\n }\n };\n switch (code) {\n case 'ArrowUp':\n buttonFromDelta(-1);\n break;\n case 'ArrowLeft':\n buttonFromDelta(this.isLTR ? -1 : 1);\n break;\n case 'ArrowRight':\n buttonFromDelta(this.isLTR ? 1 : -1);\n break;\n case 'ArrowDown':\n buttonFromDelta(1);\n break;\n case 'End':\n nextIndex = this.buttons.length;\n buttonFromDelta(-1);\n break;\n case 'Home':\n nextIndex = -1;\n buttonFromDelta(1);\n break;\n case 'PageUp':\n case 'PageDown':\n default:\n const tagsSiblings = [\n ...(this.getRootNode() as Document).querySelectorAll<ActionGroup>(\n 'sp-action-group'\n ),\n ];\n if (tagsSiblings.length < 2) {\n return;\n }\n event.preventDefault();\n const currentIndex = tagsSiblings.indexOf(this);\n const offset = code === 'PageUp' ? -1 : 1;\n let nextRadioGroupIndex = currentIndex + offset;\n let nextRadioGroup = circularIndexedElement(\n tagsSiblings,\n nextRadioGroupIndex\n );\n while (!nextRadioGroup.buttons.length) {\n nextRadioGroupIndex += offset;\n nextRadioGroup = circularIndexedElement(\n tagsSiblings,\n nextRadioGroupIndex\n );\n }\n nextRadioGroup.focus();\n return;\n }\n event.preventDefault();\n const nextRadio = circularIndexedElement(this.buttons, nextIndex);\n activeElement.tabIndex = -1;\n nextRadio.tabIndex = 0;\n nextRadio.focus();\n };\n\n private handleFocusout = (event: FocusEvent): void => {\n const { relatedTarget } = event;\n if (!relatedTarget || !this.contains(relatedTarget as HTMLElement)) {\n const firstButtonNonDisabled = this.buttons.find((button) => {\n if (this.selected.length) {\n return button.selected;\n }\n return !button.disabled;\n });\n if (firstButtonNonDisabled) {\n firstButtonNonDisabled.tabIndex = 0;\n }\n }\n this.removeEventListener('keydown', this.handleKeydown);\n this.removeEventListener('focusout', this.handleFocusout);\n };\n\n private async manageSelects(): Promise<void> {\n if (!this.buttons.length) {\n return;\n }\n switch (this.selects) {\n case 'single': {\n this.setAttribute('role', 'radiogroup');\n let selection: ActionButton | undefined;\n let firstEnabled: ActionButton | undefined;\n const options = this.buttons;\n const updates = options.map(async (option) => {\n await option.updateComplete;\n option.setAttribute('role', 'radio');\n option.setAttribute(\n 'aria-checked',\n option.selected ? 'true' : 'false'\n );\n option.tabIndex = option.selected ? 0 : -1;\n if (option.selected) {\n selection = option;\n }\n if (!firstEnabled && !option.disabled) {\n firstEnabled = option;\n }\n });\n await Promise.all(updates);\n if (selection || firstEnabled) {\n ((selection || firstEnabled) as ActionButton).tabIndex = 0;\n }\n this.selected = selection ? [selection.value] : EMPTY_SELECTION;\n break;\n }\n case 'multiple': {\n this.setAttribute('role', 'group');\n const selection: string[] = [];\n const options = this.buttons;\n const updates = options.map(async (option) => {\n await option.updateComplete;\n option.setAttribute('role', 'checkbox');\n option.setAttribute(\n 'aria-checked',\n option.selected ? 'true' : 'false'\n );\n option.tabIndex = 0;\n if (option.selected) {\n selection.push(option.value);\n }\n });\n await Promise.all(updates);\n this.selected = !!selection.length\n ? selection\n : EMPTY_SELECTION;\n break;\n }\n default:\n this.buttons.forEach((option) => {\n option.setAttribute('role', 'button');\n option.tabIndex = 0;\n });\n this.removeAttribute('role');\n this.selected = EMPTY_SELECTION;\n break;\n }\n }\n\n protected render(): TemplateResult {\n return html`\n <slot role=\"presentation\"></slot>\n `;\n }\n\n protected firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.addEventListener('click', this.handleClick);\n this.addEventListener('focusin', this.handleFocusin);\n }\n\n protected updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('selects')) {\n this.manageSelects();\n }\n if (\n (changes.has('quiet') && this.quiet) ||\n (changes.has('emphasized') && this.emphasized)\n ) {\n this.manageChildren();\n }\n // Update `aria-label` when `label` available or not first `updated`\n if (\n changes.has('label') &&\n (this.label || typeof changes.get('label') !== 'undefined')\n ) {\n if (this.label.length) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n\n private manageChildren(): void {\n this.buttons.forEach((button) => {\n button.quiet = this.quiet;\n button.emphasized = this.emphasized;\n });\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n if (!this.observer) {\n const findButtons = (): void => {\n const buttons = [\n ...this.querySelectorAll(this._buttonSelector),\n ] as ActionButton[];\n buttons.filter((button) => {\n const buttonParent = button.parentElement;\n return !buttonParent?.closest(this._buttonSelector);\n });\n this.buttons = buttons;\n this.manageChildren();\n this.manageSelects();\n };\n this.observer = new MutationObserver(findButtons);\n findButtons();\n }\n this.observer.observe(this, { childList: true, subtree: true });\n }\n\n public disconnectedCallback(): void {\n this.observer.disconnect();\n super.disconnectedCallback();\n }\n\n private observer!: MutationObserver;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ActionGroup.js","sourceRoot":"","sources":["ActionGroup.ts"],"names":[],"mappings":"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","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 {\n html,\n SpectrumElement,\n CSSResultArray,\n TemplateResult,\n property,\n PropertyValues,\n} from '@spectrum-web-components/base';\nimport type { ActionButton } from '@spectrum-web-components/action-button';\n\nimport styles from './action-group.css.js';\n\nconst EMPTY_SELECTION: string[] = [];\n\n/**\n * @element sp-action-group\n * @slot - the sp-action-button elements that make up the group\n */\nexport class ActionGroup extends SpectrumElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n public buttons: ActionButton[] = [];\n protected _buttonSelector = 'sp-action-button';\n\n @property({ type: Boolean, reflect: true })\n public compact = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n @property({ type: Boolean, reflect: true })\n public justified = false;\n\n @property({ type: String })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public selects: undefined | 'single' | 'multiple';\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: Array })\n public get selected(): string[] {\n return this._selected;\n }\n public set selected(selected: string[]) {\n if (selected === this.selected) return;\n const old = this.selected;\n this._selected = selected;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this._selected = old;\n this.buttons.map((button) => {\n button.selected = this.selected.includes(button.value);\n });\n }\n }\n private _selected: string[] = EMPTY_SELECTION;\n\n public focus(options?: FocusOptions): void {\n if (!this.buttons.length) {\n return;\n }\n const firstButtonNonDisabled = this.buttons.find((button) => {\n if (this.selected) {\n return button.selected;\n }\n return !button.disabled;\n });\n if (firstButtonNonDisabled) {\n firstButtonNonDisabled.focus(options);\n }\n }\n\n private handleClick(event: Event): void {\n const target = event.target as ActionButton;\n if (typeof target.value === 'undefined') {\n return;\n }\n switch (this.selects) {\n case 'single': {\n const selected = [\n ...this.querySelectorAll('[selected]'),\n ] as ActionButton[];\n selected.forEach((el) => {\n el.selected = false;\n el.tabIndex = -1;\n el.setAttribute('aria-checked', 'false');\n });\n target.selected = true;\n target.tabIndex = 0;\n target.setAttribute('aria-checked', 'true');\n this.selected = [target.value];\n target.focus();\n break;\n }\n case 'multiple': {\n const selected = [...this.selected];\n target.selected = !target.selected;\n target.setAttribute(\n 'aria-checked',\n target.selected ? 'true' : 'false'\n );\n if (target.selected) {\n selected.push(target.value);\n } else {\n selected.splice(this.selected.indexOf(target.value), 1);\n }\n this.selected = selected;\n break;\n }\n default:\n this.selected = EMPTY_SELECTION;\n break;\n }\n }\n\n private handleFocusin = (): void => {\n this.addEventListener('focusout', this.handleFocusout);\n this.addEventListener('keydown', this.handleKeydown);\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n if (\n ![\n 'ArrowUp',\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowDown',\n 'End',\n 'Home',\n 'PageUp',\n 'PageDown',\n ].includes(code)\n ) {\n return;\n }\n const activeElement = (this.getRootNode() as Document)\n .activeElement as ActionButton;\n /* c8 ignore next 3 */\n if (!activeElement) {\n return;\n }\n let nextIndex = this.buttons.indexOf(activeElement);\n /* c8 ignore next 3 */\n if (nextIndex === -1) {\n return;\n }\n const circularIndexedElement = <T extends HTMLElement>(\n list: T[],\n index: number\n ): T => list[(list.length + index) % list.length];\n const buttonFromDelta = (delta: number): void => {\n nextIndex += delta;\n while (circularIndexedElement(this.buttons, nextIndex).disabled) {\n nextIndex += delta;\n }\n };\n switch (code) {\n case 'ArrowUp':\n buttonFromDelta(-1);\n break;\n case 'ArrowLeft':\n buttonFromDelta(this.isLTR ? -1 : 1);\n break;\n case 'ArrowRight':\n buttonFromDelta(this.isLTR ? 1 : -1);\n break;\n case 'ArrowDown':\n buttonFromDelta(1);\n break;\n case 'End':\n nextIndex = this.buttons.length;\n buttonFromDelta(-1);\n break;\n case 'Home':\n nextIndex = -1;\n buttonFromDelta(1);\n break;\n case 'PageUp':\n case 'PageDown':\n default:\n const tagsSiblings = [\n ...(\n this.getRootNode() as Document\n ).querySelectorAll<ActionGroup>('sp-action-group'),\n ];\n if (tagsSiblings.length < 2) {\n return;\n }\n event.preventDefault();\n const currentIndex = tagsSiblings.indexOf(this);\n const offset = code === 'PageUp' ? -1 : 1;\n let nextRadioGroupIndex = currentIndex + offset;\n let nextRadioGroup = circularIndexedElement(\n tagsSiblings,\n nextRadioGroupIndex\n );\n while (!nextRadioGroup.buttons.length) {\n nextRadioGroupIndex += offset;\n nextRadioGroup = circularIndexedElement(\n tagsSiblings,\n nextRadioGroupIndex\n );\n }\n nextRadioGroup.focus();\n return;\n }\n event.preventDefault();\n const nextRadio = circularIndexedElement(this.buttons, nextIndex);\n activeElement.tabIndex = -1;\n nextRadio.tabIndex = 0;\n nextRadio.focus();\n };\n\n private handleFocusout = (event: FocusEvent): void => {\n const { relatedTarget } = event;\n if (!relatedTarget || !this.contains(relatedTarget as HTMLElement)) {\n const firstButtonNonDisabled = this.buttons.find((button) => {\n if (this.selected.length) {\n return button.selected;\n }\n return !button.disabled;\n });\n if (firstButtonNonDisabled) {\n firstButtonNonDisabled.tabIndex = 0;\n }\n }\n this.removeEventListener('keydown', this.handleKeydown);\n this.removeEventListener('focusout', this.handleFocusout);\n };\n\n private async manageSelects(): Promise<void> {\n if (!this.buttons.length) {\n return;\n }\n switch (this.selects) {\n case 'single': {\n this.setAttribute('role', 'radiogroup');\n let selection: ActionButton | undefined;\n let firstEnabled: ActionButton | undefined;\n const options = this.buttons;\n const updates = options.map(async (option) => {\n await option.updateComplete;\n option.setAttribute('role', 'radio');\n option.setAttribute(\n 'aria-checked',\n option.selected ? 'true' : 'false'\n );\n option.tabIndex = option.selected ? 0 : -1;\n if (option.selected) {\n selection = option;\n }\n if (!firstEnabled && !option.disabled) {\n firstEnabled = option;\n }\n });\n await Promise.all(updates);\n if (selection || firstEnabled) {\n ((selection || firstEnabled) as ActionButton).tabIndex = 0;\n }\n this.selected = selection ? [selection.value] : EMPTY_SELECTION;\n break;\n }\n case 'multiple': {\n this.setAttribute('role', 'group');\n const selection: string[] = [];\n const options = this.buttons;\n const updates = options.map(async (option) => {\n await option.updateComplete;\n option.setAttribute('role', 'checkbox');\n option.setAttribute(\n 'aria-checked',\n option.selected ? 'true' : 'false'\n );\n option.tabIndex = 0;\n if (option.selected) {\n selection.push(option.value);\n }\n });\n await Promise.all(updates);\n this.selected = !!selection.length\n ? selection\n : EMPTY_SELECTION;\n break;\n }\n default:\n this.buttons.forEach((option) => {\n option.setAttribute('role', 'button');\n option.tabIndex = 0;\n });\n this.removeAttribute('role');\n this.selected = EMPTY_SELECTION;\n break;\n }\n }\n\n protected render(): TemplateResult {\n return html`\n <slot role=\"presentation\"></slot>\n `;\n }\n\n protected firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.addEventListener('click', this.handleClick);\n this.addEventListener('focusin', this.handleFocusin);\n }\n\n protected updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('selects')) {\n this.manageSelects();\n }\n if (\n (changes.has('quiet') && this.quiet) ||\n (changes.has('emphasized') && this.emphasized)\n ) {\n this.manageChildren();\n }\n // Update `aria-label` when `label` available or not first `updated`\n if (\n changes.has('label') &&\n (this.label || typeof changes.get('label') !== 'undefined')\n ) {\n if (this.label.length) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n\n private manageChildren(): void {\n this.buttons.forEach((button) => {\n button.quiet = this.quiet;\n button.emphasized = this.emphasized;\n });\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n if (!this.observer) {\n const findButtons = (): void => {\n const buttons = [\n ...this.querySelectorAll(this._buttonSelector),\n ] as ActionButton[];\n buttons.filter((button) => {\n const buttonParent = button.parentElement;\n return !buttonParent?.closest(this._buttonSelector);\n });\n this.buttons = buttons;\n this.manageChildren();\n this.manageSelects();\n };\n this.observer = new MutationObserver(findButtons);\n findButtons();\n }\n this.observer.observe(this, { childList: true, subtree: true });\n }\n\n public disconnectedCallback(): void {\n this.observer.disconnect();\n super.disconnectedCallback();\n }\n\n private observer!: MutationObserver;\n}\n"]}
|
package/src/action-group.css.js
CHANGED
|
@@ -11,19 +11,119 @@ governing permissions and limitations under the License.
|
|
|
11
11
|
*/
|
|
12
12
|
import { css } from '@spectrum-web-components/base';
|
|
13
13
|
const styles = css `
|
|
14
|
-
:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
14
|
+
:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(
|
|
15
|
+
--spectrum-global-dimension-size-25
|
|
16
|
+
)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(
|
|
17
|
+
--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
|
|
18
|
+
)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(
|
|
19
|
+
--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)
|
|
20
|
+
)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(
|
|
21
|
+
--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)
|
|
22
|
+
)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(
|
|
23
|
+
--spectrum-actiongroup-button-gap-reset
|
|
24
|
+
)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(
|
|
25
|
+
--spectrum-actiongroup-button-gap-reset
|
|
26
|
+
)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(
|
|
27
|
+
--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
|
|
28
|
+
)}:host([dir=ltr][vertical][vertical]){margin-left:var(
|
|
29
|
+
--spectrum-actiongroup-button-gap-reset
|
|
30
|
+
)}:host([dir=rtl][vertical][vertical]){margin-right:var(
|
|
31
|
+
--spectrum-actiongroup-button-gap-reset
|
|
32
|
+
)}:host([vertical][vertical]){margin-top:var(
|
|
33
|
+
--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
|
|
34
|
+
)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(
|
|
35
|
+
--spectrum-actiongroup-quiet-compact-button-gap
|
|
36
|
+
)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(
|
|
37
|
+
--spectrum-actiongroup-quiet-compact-button-gap
|
|
38
|
+
)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(
|
|
39
|
+
--spectrum-actiongroup-button-gap-reset
|
|
40
|
+
)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(
|
|
41
|
+
--spectrum-actiongroup-button-gap-reset
|
|
42
|
+
)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(
|
|
43
|
+
--spectrum-actiongroup-button-gap-reset
|
|
44
|
+
)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(
|
|
45
|
+
--spectrum-actiongroup-quiet-compact-button-gap
|
|
46
|
+
)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
|
|
47
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
48
|
+
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
|
|
49
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
50
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(
|
|
51
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
52
|
+
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(
|
|
53
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
54
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(
|
|
55
|
+
--spectrum-actionbutton-m-border-size,
|
|
56
|
+
var(--spectrum-alias-border-size-thin)
|
|
57
|
+
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(
|
|
58
|
+
--spectrum-actionbutton-m-border-size,
|
|
59
|
+
var(--spectrum-alias-border-size-thin)
|
|
60
|
+
)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(
|
|
61
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
62
|
+
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(
|
|
63
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
64
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
|
|
65
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
66
|
+
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
|
|
67
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
68
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(
|
|
69
|
+
--spectrum-actionbutton-m-border-size,
|
|
70
|
+
var(--spectrum-alias-border-size-thin)
|
|
71
|
+
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(
|
|
72
|
+
--spectrum-actionbutton-m-border-size,
|
|
73
|
+
var(--spectrum-alias-border-size-thin)
|
|
74
|
+
)/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([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(-1*var(
|
|
75
|
+
--spectrum-actionbutton-m-border-size,
|
|
76
|
+
var(--spectrum-alias-border-size-thin)
|
|
77
|
+
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(
|
|
78
|
+
--spectrum-actionbutton-m-border-size,
|
|
79
|
+
var(--spectrum-alias-border-size-thin)
|
|
80
|
+
)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(
|
|
81
|
+
--spectrum-actionbutton-m-border-size,
|
|
82
|
+
var(--spectrum-alias-border-size-thin)
|
|
83
|
+
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(
|
|
84
|
+
--spectrum-actionbutton-m-border-size,
|
|
85
|
+
var(--spectrum-alias-border-size-thin)
|
|
86
|
+
)/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(-1*var(
|
|
87
|
+
--spectrum-actionbutton-m-border-size,
|
|
88
|
+
var(--spectrum-alias-border-size-thin)
|
|
89
|
+
)/2);margin-top:calc(-1*var(
|
|
90
|
+
--spectrum-actionbutton-m-border-size,
|
|
91
|
+
var(--spectrum-alias-border-size-thin)
|
|
92
|
+
)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
|
|
93
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
94
|
+
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
|
|
95
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
96
|
+
)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
|
|
97
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
98
|
+
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
|
|
99
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
100
|
+
)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(
|
|
101
|
+
--spectrum-actionbutton-m-border-size,
|
|
102
|
+
var(--spectrum-alias-border-size-thin)
|
|
103
|
+
)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
|
|
104
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
105
|
+
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
|
|
106
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
107
|
+
)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
|
|
108
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
109
|
+
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
|
|
110
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
111
|
+
)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(-1*var(
|
|
112
|
+
--spectrum-actionbutton-m-border-size,
|
|
113
|
+
var(--spectrum-alias-border-size-thin)
|
|
114
|
+
)/2)}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-left:0;margin-right:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){align-items:stretch;display:flex;flex-direction:column}:host([compact]:not([quiet])) ::slotted(:not([role])){--spectrum-actionbutton-m-border-radius:0;--spectrum-actionbutton-s-border-radius:var(
|
|
115
|
+
--spectrum-actionbutton-m-border-radius
|
|
116
|
+
);--spectrum-actionbutton-l-border-radius:var(
|
|
117
|
+
--spectrum-actionbutton-m-border-radius
|
|
118
|
+
);--spectrum-actionbutton-xl-border-radius:var(
|
|
119
|
+
--spectrum-actionbutton-m-border-radius
|
|
120
|
+
)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(
|
|
121
|
+
--spectrum-alias-border-radius-regular
|
|
122
|
+
) var(--spectrum-alias-border-radius-regular) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular)}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(
|
|
123
|
+
--spectrum-alias-border-radius-regular
|
|
124
|
+
) 0 0 var(--spectrum-alias-border-radius-regular)}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:var(
|
|
125
|
+
--spectrum-alias-border-radius-regular
|
|
126
|
+
) 0 0 var(--spectrum-alias-border-radius-regular)}
|
|
27
127
|
`;
|
|
28
128
|
export default styles;
|
|
29
129
|
//# sourceMappingURL=action-group.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action-group.css.js","sourceRoot":"","sources":["action-group.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAcjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(--spectrum-global-dimension-size-25);display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(--spectrum-actiongroup-button-gap-reset)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(--spectrum-actiongroup-button-gap-reset)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100))}:host([dir=ltr][vertical][vertical]){margin-left:var(--spectrum-actiongroup-button-gap-reset)}:host([dir=rtl][vertical][vertical]){margin-right:var(--spectrum-actiongroup-button-gap-reset)}:host([vertical][vertical]){margin-top:var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100))}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(--spectrum-actiongroup-quiet-compact-button-gap)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(--spectrum-actiongroup-quiet-compact-button-gap)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(--spectrum-actiongroup-button-gap-reset)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(--spectrum-actiongroup-button-gap-reset)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(--spectrum-actiongroup-button-gap-reset)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(--spectrum-actiongroup-quiet-compact-button-gap)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){position:relative;border-radius:0;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/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([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]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-top:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2);margin-bottom:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-top:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2);margin-bottom:0}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-right:0;margin-left:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){display:flex;flex-direction:column;align-items:stretch}:host([compact]:not([quiet])) ::slotted(:not([role])){--spectrum-actionbutton-m-border-radius:0;--spectrum-actionbutton-s-border-radius:var(--spectrum-actionbutton-m-border-radius);--spectrum-actionbutton-l-border-radius:var(--spectrum-actionbutton-m-border-radius);--spectrum-actionbutton-xl-border-radius:var(--spectrum-actionbutton-m-border-radius)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular)}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(--spectrum-alias-border-radius-regular) 0 0 var(--spectrum-alias-border-radius-regular)}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:var(--spectrum-alias-border-radius-regular) 0 0 var(--spectrum-alias-border-radius-regular)}\n`;\nexport default styles;"]}
|
|
1
|
+
{"version":3,"file":"action-group.css.js","sourceRoot":"","sources":["action-group.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(\n--spectrum-global-dimension-size-25\n)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\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-global-dimension-size-100)\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-global-dimension-size-100)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap\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\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){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-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/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([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(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2);margin-top:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-left:0;margin-right:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){align-items:stretch;display:flex;flex-direction:column}:host([compact]:not([quiet])) ::slotted(:not([role])){--spectrum-actionbutton-m-border-radius:0;--spectrum-actionbutton-s-border-radius:var(\n--spectrum-actionbutton-m-border-radius\n);--spectrum-actionbutton-l-border-radius:var(\n--spectrum-actionbutton-m-border-radius\n);--spectrum-actionbutton-xl-border-radius:var(\n--spectrum-actionbutton-m-border-radius\n)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(\n--spectrum-alias-border-radius-regular\n) var(--spectrum-alias-border-radius-regular) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular)}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(\n--spectrum-alias-border-radius-regular\n) 0 0 var(--spectrum-alias-border-radius-regular)}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:var(\n--spectrum-alias-border-radius-regular\n) 0 0 var(--spectrum-alias-border-radius-regular)}\n`;\nexport default styles;"]}
|
|
@@ -11,19 +11,107 @@ governing permissions and limitations under the License.
|
|
|
11
11
|
*/
|
|
12
12
|
import { css } from '@spectrum-web-components/base';
|
|
13
13
|
const styles = css `
|
|
14
|
-
:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
14
|
+
:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(
|
|
15
|
+
--spectrum-global-dimension-size-25
|
|
16
|
+
)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(
|
|
17
|
+
--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
|
|
18
|
+
)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(
|
|
19
|
+
--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)
|
|
20
|
+
)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(
|
|
21
|
+
--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)
|
|
22
|
+
)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(
|
|
23
|
+
--spectrum-actiongroup-button-gap-reset
|
|
24
|
+
)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(
|
|
25
|
+
--spectrum-actiongroup-button-gap-reset
|
|
26
|
+
)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(
|
|
27
|
+
--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
|
|
28
|
+
)}:host([dir=ltr][vertical][vertical]){margin-left:var(
|
|
29
|
+
--spectrum-actiongroup-button-gap-reset
|
|
30
|
+
)}:host([dir=rtl][vertical][vertical]){margin-right:var(
|
|
31
|
+
--spectrum-actiongroup-button-gap-reset
|
|
32
|
+
)}:host([vertical][vertical]){margin-top:var(
|
|
33
|
+
--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
|
|
34
|
+
)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(
|
|
35
|
+
--spectrum-actiongroup-quiet-compact-button-gap
|
|
36
|
+
)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(
|
|
37
|
+
--spectrum-actiongroup-quiet-compact-button-gap
|
|
38
|
+
)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(
|
|
39
|
+
--spectrum-actiongroup-button-gap-reset
|
|
40
|
+
)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(
|
|
41
|
+
--spectrum-actiongroup-button-gap-reset
|
|
42
|
+
)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(
|
|
43
|
+
--spectrum-actiongroup-button-gap-reset
|
|
44
|
+
)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(
|
|
45
|
+
--spectrum-actiongroup-quiet-compact-button-gap
|
|
46
|
+
)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
|
|
47
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
48
|
+
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
|
|
49
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
50
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(
|
|
51
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
52
|
+
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(
|
|
53
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
54
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(
|
|
55
|
+
--spectrum-actionbutton-m-border-size,
|
|
56
|
+
var(--spectrum-alias-border-size-thin)
|
|
57
|
+
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(
|
|
58
|
+
--spectrum-actionbutton-m-border-size,
|
|
59
|
+
var(--spectrum-alias-border-size-thin)
|
|
60
|
+
)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(
|
|
61
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
62
|
+
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(
|
|
63
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
64
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
|
|
65
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
66
|
+
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
|
|
67
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
68
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(
|
|
69
|
+
--spectrum-actionbutton-m-border-size,
|
|
70
|
+
var(--spectrum-alias-border-size-thin)
|
|
71
|
+
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(
|
|
72
|
+
--spectrum-actionbutton-m-border-size,
|
|
73
|
+
var(--spectrum-alias-border-size-thin)
|
|
74
|
+
)/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([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(-1*var(
|
|
75
|
+
--spectrum-actionbutton-m-border-size,
|
|
76
|
+
var(--spectrum-alias-border-size-thin)
|
|
77
|
+
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(
|
|
78
|
+
--spectrum-actionbutton-m-border-size,
|
|
79
|
+
var(--spectrum-alias-border-size-thin)
|
|
80
|
+
)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(
|
|
81
|
+
--spectrum-actionbutton-m-border-size,
|
|
82
|
+
var(--spectrum-alias-border-size-thin)
|
|
83
|
+
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(
|
|
84
|
+
--spectrum-actionbutton-m-border-size,
|
|
85
|
+
var(--spectrum-alias-border-size-thin)
|
|
86
|
+
)/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(-1*var(
|
|
87
|
+
--spectrum-actionbutton-m-border-size,
|
|
88
|
+
var(--spectrum-alias-border-size-thin)
|
|
89
|
+
)/2);margin-top:calc(-1*var(
|
|
90
|
+
--spectrum-actionbutton-m-border-size,
|
|
91
|
+
var(--spectrum-alias-border-size-thin)
|
|
92
|
+
)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
|
|
93
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
94
|
+
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
|
|
95
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
96
|
+
)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
|
|
97
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
98
|
+
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
|
|
99
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
100
|
+
)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(
|
|
101
|
+
--spectrum-actionbutton-m-border-size,
|
|
102
|
+
var(--spectrum-alias-border-size-thin)
|
|
103
|
+
)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
|
|
104
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
105
|
+
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
|
|
106
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
107
|
+
)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
|
|
108
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
109
|
+
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
|
|
110
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
111
|
+
)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(-1*var(
|
|
112
|
+
--spectrum-actionbutton-m-border-size,
|
|
113
|
+
var(--spectrum-alias-border-size-thin)
|
|
114
|
+
)/2)}:host([justified]) ::slotted(*){flex:1}
|
|
27
115
|
`;
|
|
28
116
|
export default styles;
|
|
29
117
|
//# sourceMappingURL=spectrum-action-group.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spectrum-action-group.css.js","sourceRoot":"","sources":["spectrum-action-group.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"spectrum-action-group.css.js","sourceRoot":"","sources":["spectrum-action-group.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(\n--spectrum-global-dimension-size-25\n)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\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-global-dimension-size-100)\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-global-dimension-size-100)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap\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\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){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-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/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([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(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2);margin-top:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([justified]) ::slotted(*){flex:1}\n`;\nexport default styles;"]}
|
package/src/spectrum-config.js
CHANGED