@spectrum-web-components/action-group 0.6.3-express.0 → 0.7.2
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 +31 -0
- package/custom-elements.json +71 -22
- package/package.json +6 -5
- package/src/ActionGroup.d.ts +11 -7
- package/src/ActionGroup.js +100 -156
- package/src/ActionGroup.js.map +1 -1
- package/src/action-group.css.js +20 -17
- package/src/action-group.css.js.map +1 -1
- package/src/spectrum-action-group.css.js +20 -17
- package/src/spectrum-action-group.css.js.map +1 -1
- package/stories/action-group-tooltip.stories.js +13 -4
- package/stories/action-group-tooltip.stories.js.map +1 -1
- package/stories/action-group.stories.js +30 -0
- package/stories/action-group.stories.js.map +1 -1
package/README.md
CHANGED
|
@@ -99,6 +99,37 @@ An `<sp-action-group selects="multiple">` will manage its `<sp-action-button>` c
|
|
|
99
99
|
</sp-action-group>
|
|
100
100
|
```
|
|
101
101
|
|
|
102
|
+
## Selected
|
|
103
|
+
|
|
104
|
+
The `selected` property represents the selection state within a button group. This property can be managed either by the component or by the user. Passing in an array of button values will make `<sp-action-group>` a controllable component. Though `selected` would more commonly be set via Javascript expressions (i.e. `<sp-action-group .selected=${["first"]}>`), it is also possible to set `selected` as a JSON string.
|
|
105
|
+
|
|
106
|
+
```html
|
|
107
|
+
<sp-action-group selects="single" selected='["first"]'>
|
|
108
|
+
<sp-action-button value="first">First</sp-action-button>
|
|
109
|
+
<sp-action-button value="second">Second</sp-action-button>
|
|
110
|
+
</sp-action-group>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
By default, an `<sp-action-group>` will select any button passed into `selected`. Afterwards, `.selects` controls how button values are added to the selection state. For example, if `.selects` is not specified when `selected` is set, any further interaction will result in no change to the selection.
|
|
114
|
+
|
|
115
|
+
```html
|
|
116
|
+
<sp-action-group selected='["first", "second"]'>
|
|
117
|
+
<sp-action-button value="first">First</sp-action-button>
|
|
118
|
+
<sp-action-button value="second">Second</sp-action-button>
|
|
119
|
+
<sp-action-button value="third">Third</sp-action-button>
|
|
120
|
+
</sp-action-group>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
Similarly, if `selected` contains more than one button value, but `selects = "single"`, then those initial buttons will be highlighted, but further interaction will result in radio-button functionality.
|
|
124
|
+
|
|
125
|
+
```html
|
|
126
|
+
<sp-action-group selects="single" selected='["first", "second"]'>
|
|
127
|
+
<sp-action-button value="first">First</sp-action-button>
|
|
128
|
+
<sp-action-button value="second">Second</sp-action-button>
|
|
129
|
+
<sp-action-button value="third">Third</sp-action-button>
|
|
130
|
+
</sp-action-group>
|
|
131
|
+
```
|
|
132
|
+
|
|
102
133
|
## Horizontal
|
|
103
134
|
|
|
104
135
|
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.
|
package/custom-elements.json
CHANGED
|
@@ -35,6 +35,14 @@
|
|
|
35
35
|
{
|
|
36
36
|
"kind": "field",
|
|
37
37
|
"name": "buttons",
|
|
38
|
+
"privacy": "public",
|
|
39
|
+
"type": {
|
|
40
|
+
"text": "ActionButton[]"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"kind": "field",
|
|
45
|
+
"name": "_buttons",
|
|
38
46
|
"type": {
|
|
39
47
|
"text": "ActionButton[]"
|
|
40
48
|
},
|
|
@@ -50,6 +58,11 @@
|
|
|
50
58
|
"privacy": "protected",
|
|
51
59
|
"default": "'sp-action-button'"
|
|
52
60
|
},
|
|
61
|
+
{
|
|
62
|
+
"kind": "field",
|
|
63
|
+
"name": "rovingTabindexController",
|
|
64
|
+
"default": "new RovingTabindexController<ActionButton>(\n this,\n {\n focusInIndex: (elements: ActionButton[]) => {\n let firstEnabledIndex = -1;\n const firstSelectedIndex = elements.findIndex((el, index) => {\n if (!elements[firstEnabledIndex] && !el.disabled) {\n firstEnabledIndex = index;\n }\n return el.selected && !el.disabled;\n });\n return elements[firstSelectedIndex]\n ? firstSelectedIndex\n : firstEnabledIndex;\n },\n elements: () => this.buttons,\n isFocusableElement: (el: ActionButton) => !el.disabled,\n }\n )"
|
|
65
|
+
},
|
|
53
66
|
{
|
|
54
67
|
"kind": "field",
|
|
55
68
|
"name": "compact",
|
|
@@ -131,16 +144,44 @@
|
|
|
131
144
|
"text": "string[]"
|
|
132
145
|
},
|
|
133
146
|
"privacy": "public",
|
|
147
|
+
"default": "[]",
|
|
134
148
|
"attribute": "selected"
|
|
135
149
|
},
|
|
136
150
|
{
|
|
137
|
-
"kind": "
|
|
138
|
-
"name": "
|
|
139
|
-
"
|
|
140
|
-
|
|
151
|
+
"kind": "method",
|
|
152
|
+
"name": "dispatchChange",
|
|
153
|
+
"privacy": "private",
|
|
154
|
+
"return": {
|
|
155
|
+
"type": {
|
|
156
|
+
"text": "void"
|
|
157
|
+
}
|
|
141
158
|
},
|
|
159
|
+
"parameters": [
|
|
160
|
+
{
|
|
161
|
+
"name": "old",
|
|
162
|
+
"type": {
|
|
163
|
+
"text": "string[]"
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
]
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
"kind": "method",
|
|
170
|
+
"name": "setSelected",
|
|
142
171
|
"privacy": "private",
|
|
143
|
-
"
|
|
172
|
+
"return": {
|
|
173
|
+
"type": {
|
|
174
|
+
"text": "void"
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
"parameters": [
|
|
178
|
+
{
|
|
179
|
+
"name": "selected",
|
|
180
|
+
"type": {
|
|
181
|
+
"text": "string[]"
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
]
|
|
144
185
|
},
|
|
145
186
|
{
|
|
146
187
|
"kind": "method",
|
|
@@ -161,6 +202,16 @@
|
|
|
161
202
|
}
|
|
162
203
|
]
|
|
163
204
|
},
|
|
205
|
+
{
|
|
206
|
+
"kind": "method",
|
|
207
|
+
"name": "deselectSelectedButtons",
|
|
208
|
+
"privacy": "private",
|
|
209
|
+
"return": {
|
|
210
|
+
"type": {
|
|
211
|
+
"text": "void"
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
},
|
|
164
215
|
{
|
|
165
216
|
"kind": "method",
|
|
166
217
|
"name": "handleClick",
|
|
@@ -179,21 +230,6 @@
|
|
|
179
230
|
}
|
|
180
231
|
]
|
|
181
232
|
},
|
|
182
|
-
{
|
|
183
|
-
"kind": "field",
|
|
184
|
-
"name": "handleFocusin",
|
|
185
|
-
"privacy": "private"
|
|
186
|
-
},
|
|
187
|
-
{
|
|
188
|
-
"kind": "field",
|
|
189
|
-
"name": "handleKeydown",
|
|
190
|
-
"privacy": "private"
|
|
191
|
-
},
|
|
192
|
-
{
|
|
193
|
-
"kind": "field",
|
|
194
|
-
"name": "handleFocusout",
|
|
195
|
-
"privacy": "private"
|
|
196
|
-
},
|
|
197
233
|
{
|
|
198
234
|
"kind": "method",
|
|
199
235
|
"name": "manageSelects",
|
|
@@ -228,6 +264,15 @@
|
|
|
228
264
|
"privacy": "private"
|
|
229
265
|
}
|
|
230
266
|
],
|
|
267
|
+
"events": [
|
|
268
|
+
{
|
|
269
|
+
"name": "change",
|
|
270
|
+
"type": {
|
|
271
|
+
"text": "Event"
|
|
272
|
+
},
|
|
273
|
+
"description": "Announces that selection state has been changed by user"
|
|
274
|
+
}
|
|
275
|
+
],
|
|
231
276
|
"attributes": [
|
|
232
277
|
{
|
|
233
278
|
"name": "compact",
|
|
@@ -289,6 +334,10 @@
|
|
|
289
334
|
"type": {
|
|
290
335
|
"text": "string[]"
|
|
291
336
|
},
|
|
337
|
+
"default": "EMPTY_SELECTION",
|
|
338
|
+
"resolveInitializer": {
|
|
339
|
+
"module": "src/ActionGroup.ts"
|
|
340
|
+
},
|
|
292
341
|
"fieldName": "selected"
|
|
293
342
|
}
|
|
294
343
|
],
|
|
@@ -318,7 +367,7 @@
|
|
|
318
367
|
{
|
|
319
368
|
"kind": "variable",
|
|
320
369
|
"name": "styles",
|
|
321
|
-
"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-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-texticon-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-texticon-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-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-texticon-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-texticon-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-texticon-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-texticon-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-texticon-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-texticon-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-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2);margin-top:calc(-1*var(\n--spectrum-actionbutton-m-texticon-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-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-texticon-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-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(-1*var(\n--spectrum-actionbutton-m-texticon-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])){--overriden-border-radius:0;--spectrum-actionbutton-s-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-s-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-m-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-m-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-l-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-l-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-xl-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-xl-textonly-border-radius:var(\n--overriden-border-radius\n)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--overriden-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){--overriden-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){--overriden-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){--overriden-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){--overriden-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){--overriden-border-radius:var(--spectrum-alias-border-radius-regular) 0 0 var(--spectrum-alias-border-radius-regular)}\n`"
|
|
370
|
+
"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(var(\n--spectrum-actiongroup-button-gap-y,\nvar(--spectrum-global-dimension-size-100)\n)*-1)}: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-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2);margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([justified]) ::slotted(*){flex:1}: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])){--overriden-border-radius:0;--spectrum-actionbutton-s-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-s-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-m-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-m-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-l-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-l-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-xl-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-xl-textonly-border-radius:var(\n--overriden-border-radius\n)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--overriden-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){--overriden-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){--overriden-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){--overriden-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){--overriden-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){--overriden-border-radius:var(--spectrum-alias-border-radius-regular) 0 0 var(--spectrum-alias-border-radius-regular)}\n`"
|
|
322
371
|
}
|
|
323
372
|
],
|
|
324
373
|
"exports": [
|
|
@@ -354,7 +403,7 @@
|
|
|
354
403
|
{
|
|
355
404
|
"kind": "variable",
|
|
356
405
|
"name": "styles",
|
|
357
|
-
"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(
|
|
406
|
+
"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(var(\n--spectrum-actiongroup-button-gap-y,\nvar(--spectrum-global-dimension-size-100)\n)*-1)}: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-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2);margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([justified]) ::slotted(*){flex:1}\n`"
|
|
358
407
|
}
|
|
359
408
|
],
|
|
360
409
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/action-group",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -44,17 +44,18 @@
|
|
|
44
44
|
"lit-html"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@spectrum-web-components/action-button": "^0.7.
|
|
48
|
-
"@spectrum-web-components/base": "^0.5.2
|
|
47
|
+
"@spectrum-web-components/action-button": "^0.7.4",
|
|
48
|
+
"@spectrum-web-components/base": "^0.5.2",
|
|
49
|
+
"@spectrum-web-components/reactive-controllers": "^0.2.0",
|
|
49
50
|
"tslib": "^2.0.0"
|
|
50
51
|
},
|
|
51
52
|
"devDependencies": {
|
|
52
|
-
"@spectrum-css/actiongroup": "
|
|
53
|
+
"@spectrum-css/actiongroup": "^1.0.13"
|
|
53
54
|
},
|
|
54
55
|
"types": "./src/index.d.ts",
|
|
55
56
|
"customElements": "custom-elements.json",
|
|
56
57
|
"sideEffects": [
|
|
57
58
|
"./sp-*.js"
|
|
58
59
|
],
|
|
59
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "bb5308b9be01cc7c5bbab289312042256bdcc740"
|
|
60
61
|
}
|
package/src/ActionGroup.d.ts
CHANGED
|
@@ -1,13 +1,19 @@
|
|
|
1
1
|
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
2
|
import type { ActionButton } from '@spectrum-web-components/action-button';
|
|
3
|
+
import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
|
|
3
4
|
/**
|
|
4
5
|
* @element sp-action-group
|
|
5
6
|
* @slot - the sp-action-button elements that make up the group
|
|
7
|
+
*
|
|
8
|
+
* @fires change - Announces that selection state has been changed by user
|
|
6
9
|
*/
|
|
7
10
|
export declare class ActionGroup extends SpectrumElement {
|
|
8
11
|
static get styles(): CSSResultArray;
|
|
9
|
-
buttons: ActionButton[];
|
|
12
|
+
set buttons(tabs: ActionButton[]);
|
|
13
|
+
get buttons(): ActionButton[];
|
|
14
|
+
_buttons: ActionButton[];
|
|
10
15
|
protected _buttonSelector: string;
|
|
16
|
+
rovingTabindexController: RovingTabindexController<ActionButton>;
|
|
11
17
|
compact: boolean;
|
|
12
18
|
emphasized: boolean;
|
|
13
19
|
justified: boolean;
|
|
@@ -15,14 +21,12 @@ export declare class ActionGroup extends SpectrumElement {
|
|
|
15
21
|
quiet: boolean;
|
|
16
22
|
selects: undefined | 'single' | 'multiple';
|
|
17
23
|
vertical: boolean;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
private
|
|
24
|
+
selected: string[];
|
|
25
|
+
private dispatchChange;
|
|
26
|
+
private setSelected;
|
|
21
27
|
focus(options?: FocusOptions): void;
|
|
28
|
+
private deselectSelectedButtons;
|
|
22
29
|
private handleClick;
|
|
23
|
-
private handleFocusin;
|
|
24
|
-
private handleKeydown;
|
|
25
|
-
private handleFocusout;
|
|
26
30
|
private manageSelects;
|
|
27
31
|
protected render(): TemplateResult;
|
|
28
32
|
protected firstUpdated(changes: PropertyValues): void;
|