@spectrum-web-components/radio 0.9.0 → 0.9.3
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 +58 -0
- package/custom-elements.json +29 -67
- package/package.json +8 -6
- package/src/Radio.d.ts +1 -3
- package/src/Radio.js +2 -17
- package/src/Radio.js.map +1 -1
- package/src/RadioGroup.d.ts +8 -7
- package/src/RadioGroup.js +24 -137
- package/src/RadioGroup.js.map +1 -1
- package/src/radio.css.js +20 -16
- package/src/radio.css.js.map +1 -1
- package/src/spectrum-radio.css.js +20 -16
- package/src/spectrum-radio.css.js.map +1 -1
- package/test/radio-group.test.js +0 -405
- package/test/radio-group.test.js.map +0 -1
- package/test/radio.test-vrt.js +0 -15
- package/test/radio.test-vrt.js.map +0 -1
- package/test/radio.test.js +0 -138
- package/test/radio.test.js.map +0 -1
package/README.md
CHANGED
|
@@ -131,6 +131,64 @@ Event handlers for clicks and other user actions can be registered on an `<sp-ra
|
|
|
131
131
|
</sp-radio>
|
|
132
132
|
```
|
|
133
133
|
|
|
134
|
+
## Help text
|
|
135
|
+
|
|
136
|
+
Help text can be accessibly associated with an `<sp-radio-group>` element by using the `help-text` or `negative-help-text` slots. When using the `negative-help-text` slot, `<sp-radio-group>` will self manage the presence of this content based on the value of the `invalid` property on your `<sp-radio-group>` element. Content within the `help-text` slot will be show by default. When your `<sp-radio-group>` should receive help text based on state outside of the complexity of `invalid` or not, manage the content addressed to the `help-text` from above to ensure that it displays the right messaging and possesses the right `variant`.
|
|
137
|
+
|
|
138
|
+
<sp-tabs selected="self" auto label="Help text usage in radio groups">
|
|
139
|
+
<sp-tab value="self">Self managed</sp-tab>
|
|
140
|
+
<sp-tab-panel value="self">
|
|
141
|
+
|
|
142
|
+
```html
|
|
143
|
+
<sp-field-label for="self">
|
|
144
|
+
What is your favorite ice cream flavor?
|
|
145
|
+
</sp-field-label>
|
|
146
|
+
<sp-radio-group
|
|
147
|
+
is="self"
|
|
148
|
+
onchange="
|
|
149
|
+
this.invalid = this.selected === 'fourth';
|
|
150
|
+
"
|
|
151
|
+
>
|
|
152
|
+
<sp-radio value="first">Vanilla</sp-radio>
|
|
153
|
+
<sp-radio value="second">Chocolate</sp-radio>
|
|
154
|
+
<sp-radio value="third">Strawberry</sp-radio>
|
|
155
|
+
<sp-radio value="fourth">I don't like ice cream</sp-radio>
|
|
156
|
+
<sp-help-text slot="help-text">Everyone likes ice cream.</sp-help-text>
|
|
157
|
+
<sp-help-text slot="negative-help-text" icon>
|
|
158
|
+
You can't not like ice cream.
|
|
159
|
+
</sp-help-text>
|
|
160
|
+
</sp-radio-group>
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
</sp-tab-panel>
|
|
164
|
+
<sp-tab value="above">Managed from above</sp-tab>
|
|
165
|
+
<sp-tab-panel value="above">
|
|
166
|
+
|
|
167
|
+
```html
|
|
168
|
+
<sp-field-label for="managed">
|
|
169
|
+
What is your favorite ice cream flavor?
|
|
170
|
+
</sp-field-label>
|
|
171
|
+
<sp-radio-group
|
|
172
|
+
is="managed"
|
|
173
|
+
onchange="
|
|
174
|
+
const helpText = this.querySelector(`[slot='help-text']`);
|
|
175
|
+
const isInvalid = this.selected === 'fourth';
|
|
176
|
+
helpText.icon = isInvalid;
|
|
177
|
+
helpText.textContent = isInvalid ? 'You can\'t not like ice cream.' : 'Everyone likes ice cream.';
|
|
178
|
+
helpText.variant = isInvalid ? 'negative' : 'neutral';
|
|
179
|
+
"
|
|
180
|
+
>
|
|
181
|
+
<sp-radio value="first">Vanilla</sp-radio>
|
|
182
|
+
<sp-radio value="second">Chocolate</sp-radio>
|
|
183
|
+
<sp-radio value="third">Strawberry</sp-radio>
|
|
184
|
+
<sp-radio value="fourth">I don't like ice cream</sp-radio>
|
|
185
|
+
<sp-help-text slot="help-text">Everyone likes ice cream.</sp-help-text>
|
|
186
|
+
</sp-radio-group>
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
</sp-tab-panel>
|
|
190
|
+
</sp-tabs>
|
|
191
|
+
|
|
134
192
|
## Accessibility
|
|
135
193
|
|
|
136
194
|
Radio buttons are accessible by default, rendered in HTML using the `<input type="radio">` element. Tabbing into a group of radio buttons places the focus on the first radio button selected. If none of the radio buttons are selected, the focus is set on the first one in the group. Space selects the radio button in focus (if not already selected). Using the arrow keys moves focus and selection to the previous or next radio button in the group (last becomes first, and first becomes last). The new radio button in focus gets selected even if the previous one was not.
|
package/custom-elements.json
CHANGED
|
@@ -124,14 +124,6 @@
|
|
|
124
124
|
"attribute": "readonly",
|
|
125
125
|
"reflects": true
|
|
126
126
|
},
|
|
127
|
-
{
|
|
128
|
-
"kind": "field",
|
|
129
|
-
"name": "inputElement",
|
|
130
|
-
"type": {
|
|
131
|
-
"text": "HTMLInputElement"
|
|
132
|
-
},
|
|
133
|
-
"privacy": "private"
|
|
134
|
-
},
|
|
135
127
|
{
|
|
136
128
|
"kind": "method",
|
|
137
129
|
"name": "click",
|
|
@@ -152,24 +144,6 @@
|
|
|
152
144
|
}
|
|
153
145
|
}
|
|
154
146
|
},
|
|
155
|
-
{
|
|
156
|
-
"kind": "method",
|
|
157
|
-
"name": "handleChange",
|
|
158
|
-
"privacy": "public",
|
|
159
|
-
"return": {
|
|
160
|
-
"type": {
|
|
161
|
-
"text": "void"
|
|
162
|
-
}
|
|
163
|
-
},
|
|
164
|
-
"parameters": [
|
|
165
|
-
{
|
|
166
|
-
"name": "event",
|
|
167
|
-
"type": {
|
|
168
|
-
"text": "Event"
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
]
|
|
172
|
-
},
|
|
173
147
|
{
|
|
174
148
|
"kind": "method",
|
|
175
149
|
"name": "activate",
|
|
@@ -211,11 +185,8 @@
|
|
|
211
185
|
"name": "change",
|
|
212
186
|
"type": {
|
|
213
187
|
"text": "Event"
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
{
|
|
217
|
-
"description": "When the input is interacted with and its state is changed",
|
|
218
|
-
"name": "sp-radio:change"
|
|
188
|
+
},
|
|
189
|
+
"description": "When the input is interacted with and its state is changed"
|
|
219
190
|
}
|
|
220
191
|
],
|
|
221
192
|
"attributes": [
|
|
@@ -322,6 +293,14 @@
|
|
|
322
293
|
{
|
|
323
294
|
"description": "The `sp-radio` elements to display/manage in the group.",
|
|
324
295
|
"name": ""
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
"description": "default or non-negative help text to associate to your form element",
|
|
299
|
+
"name": "help-text"
|
|
300
|
+
},
|
|
301
|
+
{
|
|
302
|
+
"description": "negative help text to associate to your form element when `invalid`",
|
|
303
|
+
"name": "negative-help-text"
|
|
325
304
|
}
|
|
326
305
|
],
|
|
327
306
|
"members": [
|
|
@@ -343,16 +322,6 @@
|
|
|
343
322
|
},
|
|
344
323
|
"privacy": "public"
|
|
345
324
|
},
|
|
346
|
-
{
|
|
347
|
-
"kind": "field",
|
|
348
|
-
"name": "label",
|
|
349
|
-
"type": {
|
|
350
|
-
"text": "string"
|
|
351
|
-
},
|
|
352
|
-
"privacy": "public",
|
|
353
|
-
"default": "''",
|
|
354
|
-
"attribute": "label"
|
|
355
|
-
},
|
|
356
325
|
{
|
|
357
326
|
"kind": "field",
|
|
358
327
|
"name": "buttons",
|
|
@@ -361,6 +330,11 @@
|
|
|
361
330
|
},
|
|
362
331
|
"privacy": "public"
|
|
363
332
|
},
|
|
333
|
+
{
|
|
334
|
+
"kind": "field",
|
|
335
|
+
"name": "rovingTabindexController",
|
|
336
|
+
"default": "new RovingTabindexController<Radio>(this, {\n focusInIndex: (elements: Radio[]) => {\n return elements.findIndex((el) => {\n return this.selected\n ? !el.disabled && el.value === this.selected\n : !el.disabled;\n });\n },\n elementEnterAction: (el: Radio) => {\n this.selected = el.value;\n },\n elements: () => this.buttons,\n isFocusableElement: (el: Radio) => !el.disabled,\n })"
|
|
337
|
+
},
|
|
364
338
|
{
|
|
365
339
|
"kind": "method",
|
|
366
340
|
"name": "focus",
|
|
@@ -371,21 +345,6 @@
|
|
|
371
345
|
}
|
|
372
346
|
}
|
|
373
347
|
},
|
|
374
|
-
{
|
|
375
|
-
"kind": "field",
|
|
376
|
-
"name": "handleFocusin",
|
|
377
|
-
"privacy": "private"
|
|
378
|
-
},
|
|
379
|
-
{
|
|
380
|
-
"kind": "field",
|
|
381
|
-
"name": "handleKeydown",
|
|
382
|
-
"privacy": "private"
|
|
383
|
-
},
|
|
384
|
-
{
|
|
385
|
-
"kind": "field",
|
|
386
|
-
"name": "handleFocusout",
|
|
387
|
-
"privacy": "private"
|
|
388
|
-
},
|
|
389
348
|
{
|
|
390
349
|
"kind": "method",
|
|
391
350
|
"name": "_setSelected",
|
|
@@ -424,6 +383,16 @@
|
|
|
424
383
|
"text": "void"
|
|
425
384
|
}
|
|
426
385
|
}
|
|
386
|
+
},
|
|
387
|
+
{
|
|
388
|
+
"kind": "method",
|
|
389
|
+
"name": "handleSlotchange",
|
|
390
|
+
"privacy": "protected",
|
|
391
|
+
"return": {
|
|
392
|
+
"type": {
|
|
393
|
+
"text": "void"
|
|
394
|
+
}
|
|
395
|
+
}
|
|
427
396
|
}
|
|
428
397
|
],
|
|
429
398
|
"events": [
|
|
@@ -431,7 +400,8 @@
|
|
|
431
400
|
"name": "change",
|
|
432
401
|
"type": {
|
|
433
402
|
"text": "Event"
|
|
434
|
-
}
|
|
403
|
+
},
|
|
404
|
+
"description": "An alteration to the value of the element has been committed by the user."
|
|
435
405
|
}
|
|
436
406
|
],
|
|
437
407
|
"attributes": [
|
|
@@ -443,14 +413,6 @@
|
|
|
443
413
|
"default": "''",
|
|
444
414
|
"fieldName": "name"
|
|
445
415
|
},
|
|
446
|
-
{
|
|
447
|
-
"name": "label",
|
|
448
|
-
"type": {
|
|
449
|
-
"text": "string"
|
|
450
|
-
},
|
|
451
|
-
"default": "''",
|
|
452
|
-
"fieldName": "label"
|
|
453
|
-
},
|
|
454
416
|
{
|
|
455
417
|
"name": "selected",
|
|
456
418
|
"type": {
|
|
@@ -515,7 +477,7 @@
|
|
|
515
477
|
{
|
|
516
478
|
"kind": "variable",
|
|
517
479
|
"name": "styles",
|
|
518
|
-
"default": "css`\n:host{--spectrum-radio-circle-dot-size:var(\n--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-radio-circle-diameter:var(\n--spectrum-radio-m-circle-diameter,var(--spectrum-alias-control-two-size-m)\n);--spectrum-radio-circle-border-size:var(\n--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-radio-text-size:var(\n--spectrum-radio-m-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-radio-text-gap:var(\n--spectrum-radio-m-text-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-radio-text-font-style:var(\n--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-radio-text-font-weight:var(\n--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-radio-text-line-height:var(\n--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-radio-height:var(\n--spectrum-radio-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(\n--spectrum-global-dimension-size-50\n) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75)}:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-radio-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:0;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(\n--spectrum-radio-border-width-checked\n)}:host(.focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-radio-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-radio-text-gap\n)}#label{font-size:var(--spectrum-radio-text-size);font-style:var(--spectrum-radio-text-font-style);font-weight:var(--spectrum-radio-text-font-weight);line-height:var(--spectrum-radio-text-line-height);margin-top:var(\n--spectrum-radio-label-margin-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{flex-grow:0;flex-shrink:0;margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative}#button,#button:before{box-sizing:border-box;height:var(--spectrum-radio-circle-diameter);width:var(--spectrum-radio-circle-diameter)}#button:before{border-radius:var(--spectrum-radio-radius);border-style:solid;border-width:var(--spectrum-radio-circle-border-size);transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;z-index:0}#button:after,#button:before{content:\"\";display:block;position:absolute}#button:after{border-radius:100%;bottom:0;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){align-items:center;display:inline-flex;flex-direction:column;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(\n--spectrum-radio-labelbelow-label-margin\n)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}#label{color:var(\n--spectrum-radio-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:before{background-color:var(\n--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-radio-m-circle-border-color,var(--spectrum-global-color-gray-600)\n);forced-color-adjust:none}:host(:hover) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-hover,var(--spectrum-global-color-gray-700)\n);box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)\n)}:host(:hover) #label{color:var(\n--spectrum-radio-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host(:active) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host(:active[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)\n)}:host(:active) #label{color:var(\n--spectrum-radio-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([emphasized][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([emphasized][checked]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)\n)}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-alias-component-text-color-error-down)\n)}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-alias-component-text-color-error-default)\n)}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(\n--spectrum-radio-m-emphasized-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700)\n)}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before,:host([emphasized]:focus-visible) #input+#button:before,:host([emphasized]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700)\n)}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after,:host([emphasized]:focus-visible) #input+#button:after,:host([emphasized]:hover:focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before,:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-disabled:GrayText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-disabled:GrayText;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}}:host{--spectrum-radio-label-margin-top:var(\n--spectrum-global-dimension-size-75,6px\n)}:host(:focus){outline:none}:host([disabled]){pointer-events:none}\n`"
|
|
480
|
+
"default": "css`\n:host{--spectrum-radio-circle-dot-size:var(\n--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-radio-circle-diameter:var(\n--spectrum-radio-m-circle-diameter,var(--spectrum-alias-control-two-size-m)\n);--spectrum-radio-circle-border-size:var(\n--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-radio-text-size:var(\n--spectrum-radio-m-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-radio-text-gap:var(\n--spectrum-radio-m-text-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-radio-text-font-style:var(\n--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-radio-text-font-weight:var(\n--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-radio-text-line-height:var(\n--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-radio-height:var(\n--spectrum-radio-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(\n--spectrum-global-dimension-size-50\n) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75)}:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-radio-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:0;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(\n--spectrum-radio-border-width-checked\n)}:host(.focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-radio-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-radio-text-gap\n)}#label{font-size:var(--spectrum-radio-text-size);font-style:var(--spectrum-radio-text-font-style);font-weight:var(--spectrum-radio-text-font-weight);line-height:var(--spectrum-radio-text-line-height);margin-top:var(\n--spectrum-radio-label-margin-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative;width:var(--spectrum-radio-circle-diameter)}#button:before{border-radius:var(--spectrum-radio-radius);border-style:solid;border-width:var(--spectrum-radio-circle-border-size);box-sizing:border-box;content:\"\";display:block;height:var(--spectrum-radio-circle-diameter);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-radio-circle-diameter);z-index:0}#button:after{border-radius:100%;bottom:0;content:\"\";display:block;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);position:absolute;right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){align-items:center;display:inline-flex;flex-direction:column;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(\n--spectrum-radio-labelbelow-label-margin\n)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}#label{color:var(\n--spectrum-radio-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:before{background-color:var(\n--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-radio-m-circle-border-color,var(--spectrum-alias-toggle-border-color-default)\n);forced-color-adjust:none}:host(:hover) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n);box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)\n)}:host(:hover) #label{color:var(\n--spectrum-radio-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host(:active) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host(:active[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)\n)}:host(:active) #label{color:var(\n--spectrum-radio-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([emphasized][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([emphasized][checked]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)\n)}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-alias-component-text-color-error-down)\n)}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-alias-component-text-color-error-default)\n)}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(\n--spectrum-radio-m-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}}:host{--spectrum-radio-label-margin-top:var(\n--spectrum-global-dimension-size-75,6px\n)}:host(:focus){outline:none}:host([disabled]){pointer-events:none}\n`"
|
|
519
481
|
}
|
|
520
482
|
],
|
|
521
483
|
"exports": [
|
|
@@ -536,7 +498,7 @@
|
|
|
536
498
|
{
|
|
537
499
|
"kind": "variable",
|
|
538
500
|
"name": "styles",
|
|
539
|
-
"default": "css`\n:host{--spectrum-radio-circle-dot-size:var(\n--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-radio-circle-diameter:var(\n--spectrum-radio-m-circle-diameter,var(--spectrum-alias-control-two-size-m)\n);--spectrum-radio-circle-border-size:var(\n--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-radio-text-size:var(\n--spectrum-radio-m-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-radio-text-gap:var(\n--spectrum-radio-m-text-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-radio-text-font-style:var(\n--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-radio-text-font-weight:var(\n--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-radio-text-line-height:var(\n--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-radio-height:var(\n--spectrum-radio-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(\n--spectrum-global-dimension-size-50\n) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75)}:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-radio-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:0;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(\n--spectrum-radio-border-width-checked\n)}:host(.focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-radio-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-radio-text-gap\n)}#label{font-size:var(--spectrum-radio-text-size);font-style:var(--spectrum-radio-text-font-style);font-weight:var(--spectrum-radio-text-font-weight);line-height:var(--spectrum-radio-text-line-height);margin-top:var(\n--spectrum-radio-label-margin-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{flex-grow:0;flex-shrink:0;margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative}#button,#button:before{box-sizing:border-box;height:var(--spectrum-radio-circle-diameter);width:var(--spectrum-radio-circle-diameter)}#button:before{border-radius:var(--spectrum-radio-radius);border-style:solid;border-width:var(--spectrum-radio-circle-border-size);transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;z-index:0}#button:after,#button:before{content:\"\";display:block;position:absolute}#button:after{border-radius:100%;bottom:0;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){align-items:center;display:inline-flex;flex-direction:column;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(\n--spectrum-radio-labelbelow-label-margin\n)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}#label{color:var(\n--spectrum-radio-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:before{background-color:var(\n--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-radio-m-circle-border-color,var(--spectrum-global-color-gray-600)\n);forced-color-adjust:none}:host(:hover) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-hover,var(--spectrum-global-color-gray-700)\n);box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)\n)}:host(:hover) #label{color:var(\n--spectrum-radio-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host(:active) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host(:active[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)\n)}:host(:active) #label{color:var(\n--spectrum-radio-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([emphasized][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([emphasized][checked]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)\n)}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-alias-component-text-color-error-down)\n)}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-alias-component-text-color-error-default)\n)}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(\n--spectrum-radio-m-emphasized-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700)\n)}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before,:host([emphasized]:focus-visible) #input+#button:before,:host([emphasized]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700)\n)}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after,:host([emphasized]:focus-visible) #input+#button:after,:host([emphasized]:hover:focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before,:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-disabled:GrayText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-disabled:GrayText;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}}\n`"
|
|
501
|
+
"default": "css`\n:host{--spectrum-radio-circle-dot-size:var(\n--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-radio-circle-diameter:var(\n--spectrum-radio-m-circle-diameter,var(--spectrum-alias-control-two-size-m)\n);--spectrum-radio-circle-border-size:var(\n--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-radio-text-size:var(\n--spectrum-radio-m-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-radio-text-gap:var(\n--spectrum-radio-m-text-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-radio-text-font-style:var(\n--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-radio-text-font-weight:var(\n--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-radio-text-line-height:var(\n--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-radio-height:var(\n--spectrum-radio-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(\n--spectrum-global-dimension-size-50\n) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75)}:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-radio-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:0;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(\n--spectrum-radio-border-width-checked\n)}:host(.focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-radio-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-radio-text-gap\n)}#label{font-size:var(--spectrum-radio-text-size);font-style:var(--spectrum-radio-text-font-style);font-weight:var(--spectrum-radio-text-font-weight);line-height:var(--spectrum-radio-text-line-height);margin-top:var(\n--spectrum-radio-label-margin-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative;width:var(--spectrum-radio-circle-diameter)}#button:before{border-radius:var(--spectrum-radio-radius);border-style:solid;border-width:var(--spectrum-radio-circle-border-size);box-sizing:border-box;content:\"\";display:block;height:var(--spectrum-radio-circle-diameter);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-radio-circle-diameter);z-index:0}#button:after{border-radius:100%;bottom:0;content:\"\";display:block;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);position:absolute;right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){align-items:center;display:inline-flex;flex-direction:column;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(\n--spectrum-radio-labelbelow-label-margin\n)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}#label{color:var(\n--spectrum-radio-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:before{background-color:var(\n--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-radio-m-circle-border-color,var(--spectrum-alias-toggle-border-color-default)\n);forced-color-adjust:none}:host(:hover) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n);box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)\n)}:host(:hover) #label{color:var(\n--spectrum-radio-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host(:active) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host(:active[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)\n)}:host(:active) #label{color:var(\n--spectrum-radio-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([emphasized][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([emphasized][checked]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)\n)}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-alias-component-text-color-error-down)\n)}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-alias-component-text-color-error-default)\n)}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(\n--spectrum-radio-m-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}}\n`"
|
|
540
502
|
}
|
|
541
503
|
],
|
|
542
504
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/radio",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -46,18 +46,20 @@
|
|
|
46
46
|
"lit-html"
|
|
47
47
|
],
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@spectrum-web-components/base": "^0.5.
|
|
50
|
-
"@spectrum-web-components/field-group": "^0.5.
|
|
51
|
-
"@spectrum-web-components/
|
|
49
|
+
"@spectrum-web-components/base": "^0.5.1",
|
|
50
|
+
"@spectrum-web-components/field-group": "^0.5.2",
|
|
51
|
+
"@spectrum-web-components/help-text": "^0.1.1",
|
|
52
|
+
"@spectrum-web-components/reactive-controllers": "^0.1.0",
|
|
53
|
+
"@spectrum-web-components/shared": "^0.13.3",
|
|
52
54
|
"tslib": "^2.0.0"
|
|
53
55
|
},
|
|
54
56
|
"devDependencies": {
|
|
55
|
-
"@spectrum-css/radio": "^3.0.
|
|
57
|
+
"@spectrum-css/radio": "^3.0.12"
|
|
56
58
|
},
|
|
57
59
|
"types": "./src/index.d.ts",
|
|
58
60
|
"customElements": "custom-elements.json",
|
|
59
61
|
"sideEffects": [
|
|
60
62
|
"./sp-*.js"
|
|
61
63
|
],
|
|
62
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "279380c6d72c0819fe224b405844af9ddcb87f8a"
|
|
63
65
|
}
|
package/src/Radio.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ declare const Radio_base: typeof SpectrumElement;
|
|
|
10
10
|
* @attr checked - Represents when the input is checked
|
|
11
11
|
* @attr value - Identifies this radio button within its radio group
|
|
12
12
|
*
|
|
13
|
-
* @
|
|
13
|
+
* @fires change - When the input is interacted with and its state is changed
|
|
14
14
|
*/
|
|
15
15
|
export declare class Radio extends Radio_base {
|
|
16
16
|
static get styles(): CSSResultArray;
|
|
@@ -25,10 +25,8 @@ export declare class Radio extends Radio_base {
|
|
|
25
25
|
emphasized: boolean;
|
|
26
26
|
invalid: boolean;
|
|
27
27
|
readonly: boolean;
|
|
28
|
-
private inputElement;
|
|
29
28
|
click(): void;
|
|
30
29
|
protected manageAutoFocus(): void;
|
|
31
|
-
handleChange(event: Event): void;
|
|
32
30
|
protected activate(): void;
|
|
33
31
|
protected handleKeyup(event: KeyboardEvent): void;
|
|
34
32
|
protected render(): TemplateResult;
|
package/src/Radio.js
CHANGED
|
@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
|
|
|
11
11
|
*/
|
|
12
12
|
import { __decorate } from "tslib";
|
|
13
13
|
import { html, SpectrumElement, } from '@spectrum-web-components/base';
|
|
14
|
-
import { property
|
|
14
|
+
import { property } from '@spectrum-web-components/base/src/decorators.js';
|
|
15
15
|
import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
|
|
16
16
|
import radioStyles from './radio.css.js';
|
|
17
17
|
/**
|
|
@@ -24,7 +24,7 @@ import radioStyles from './radio.css.js';
|
|
|
24
24
|
* @attr checked - Represents when the input is checked
|
|
25
25
|
* @attr value - Identifies this radio button within its radio group
|
|
26
26
|
*
|
|
27
|
-
* @
|
|
27
|
+
* @fires change - When the input is interacted with and its state is changed
|
|
28
28
|
*/
|
|
29
29
|
export class Radio extends FocusVisiblePolyfillMixin(SpectrumElement) {
|
|
30
30
|
constructor() {
|
|
@@ -63,18 +63,6 @@ export class Radio extends FocusVisiblePolyfillMixin(SpectrumElement) {
|
|
|
63
63
|
this.focus();
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
|
-
handleChange(event) {
|
|
67
|
-
event.stopPropagation();
|
|
68
|
-
if (this.readonly) {
|
|
69
|
-
this.inputElement.checked = this.checked;
|
|
70
|
-
return;
|
|
71
|
-
}
|
|
72
|
-
this.checked = this.inputElement.checked;
|
|
73
|
-
this.dispatchEvent(new Event('change', {
|
|
74
|
-
bubbles: true,
|
|
75
|
-
composed: true,
|
|
76
|
-
}));
|
|
77
|
-
}
|
|
78
66
|
activate() {
|
|
79
67
|
this.checked = true;
|
|
80
68
|
this.dispatchEvent(new Event('change', {
|
|
@@ -153,7 +141,4 @@ __decorate([
|
|
|
153
141
|
__decorate([
|
|
154
142
|
property({ type: Boolean, reflect: true })
|
|
155
143
|
], Radio.prototype, "readonly", void 0);
|
|
156
|
-
__decorate([
|
|
157
|
-
query('#input')
|
|
158
|
-
], Radio.prototype, "inputElement", void 0);
|
|
159
144
|
//# sourceMappingURL=Radio.js.map
|
package/src/Radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["Radio.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,EAEJ,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,
|
|
1
|
+
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["Radio.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,EAEJ,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAC3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,sDAAsD,CAAC;AAEjG,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,KAAM,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAArE;;QAKI;;;WAGG;QAEI,cAAS,GAAG,KAAK,CAAC;QAGlB,UAAK,GAAG,EAAE,CAAC;QAGX,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAGjB,eAAU,GAAG,KAAK,CAAC;QAGnB,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;IAoF5B,CAAC;IA/GU,MAAM,KAAK,MAAM;QACpB,OAAO,CAAC,WAAW,CAAC,CAAC;IACzB,CAAC;IA2BM,KAAK;QACR,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO;SACV;QACD,IAAI,CAAC,QAAQ,EAAE,CAAC;IACpB,CAAC;IAES,eAAe;QACrB,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB;;;;gBAII;YACJ,IAAI,CAAC,aAAa,CACd,IAAI,aAAa,CAAC,SAAS,EAAE;gBACzB,IAAI,EAAE,KAAK;aACd,CAAC,CACL,CAAC;YACF,IAAI,CAAC,KAAK,EAAE,CAAC;SAChB;IACL,CAAC;IAES,QAAQ;QACd,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,aAAa,CACd,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CACL,CAAC;IACN,CAAC;IAES,WAAW,CAAC,KAAoB;QACtC,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YACxB,IAAI,CAAC,QAAQ,EAAE,CAAC;SACnB;IACL,CAAC;IAES,MAAM;QACZ,OAAO,IAAI,CAAA;;;;SAIV,CAAC;IACN,CAAC;IAES,YAAY,CAAC,OAAuB;QAC1C,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC5B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;SACrB;QACD,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC9C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACrD,CAAC;IAES,OAAO,CAAC,OAAuB;QACrC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YACxB,IAAI,IAAI,CAAC,OAAO,EAAE;gBACd,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;aAC7C;iBAAM;gBACH,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;aACxC;SACJ;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YACxB,IAAI,IAAI,CAAC,OAAO,EAAE;gBACd,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;aAC7C;iBAAM;gBACH,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;aAC9C;SACJ;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACf,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;aAC9C;iBAAM;gBACH,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;aACzC;SACJ;IACL,CAAC;CACJ;AAtGG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACH;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCACxB;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACpB;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACnB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACpB;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACnB","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 CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\n\nimport radioStyles from './radio.css.js';\n\n/**\n * @element sp-radio\n *\n * @slot - text label of the Radio button\n * @attr label-below - Moves the label below the radio button\n * @attr invalid - Uses the invalid style\n * @attr disabled - Uses the disabled style\n * @attr checked - Represents when the input is checked\n * @attr value - Identifies this radio button within its radio group\n *\n * @fires change - When the input is interacted with and its state is changed\n */\nexport class Radio extends FocusVisiblePolyfillMixin(SpectrumElement) {\n public static get styles(): CSSResultArray {\n return [radioStyles];\n }\n\n /**\n * When this control is rendered, focus it automatically\n * @private\n */\n @property({ type: Boolean })\n public autofocus = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n @property({ type: Boolean, reflect: true })\n public checked = false;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n public click(): void {\n if (this.disabled) {\n return;\n }\n this.activate();\n }\n\n protected manageAutoFocus(): void {\n if (this.autofocus) {\n /**\n * Trick :focus-visible polyfill into thinking keyboard based focus\n *\n * @private\n **/\n this.dispatchEvent(\n new KeyboardEvent('keydown', {\n code: 'Tab',\n })\n );\n this.focus();\n }\n }\n\n protected activate(): void {\n this.checked = true;\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n if (event.code === 'Space') {\n this.activate();\n }\n }\n\n protected render(): TemplateResult {\n return html`\n <div id=\"input\"></div>\n <span id=\"button\"></span>\n <span id=\"label\" role=\"presentation\"><slot></slot></span>\n `;\n }\n\n protected firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.setAttribute('role', 'radio');\n if (!this.hasAttribute('tabindex')) {\n this.tabIndex = 0;\n }\n this.manageAutoFocus();\n this.addEventListener('click', this.activate);\n this.addEventListener('keyup', this.handleKeyup);\n }\n\n protected updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('invalid')) {\n if (this.invalid) {\n this.setAttribute('aria-invalid', 'true');\n } else {\n this.removeAttribute('aria-invalid');\n }\n }\n if (changes.has('checked')) {\n if (this.checked) {\n this.setAttribute('aria-checked', 'true');\n } else {\n this.setAttribute('aria-checked', 'false');\n }\n }\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabeld');\n }\n }\n }\n}\n"]}
|
package/src/RadioGroup.d.ts
CHANGED
|
@@ -1,27 +1,28 @@
|
|
|
1
|
-
import { PropertyValues
|
|
1
|
+
import { PropertyValues } from '@spectrum-web-components/base';
|
|
2
2
|
import { FieldGroup } from '@spectrum-web-components/field-group';
|
|
3
3
|
import { Radio } from './Radio.js';
|
|
4
|
+
import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
|
|
4
5
|
declare const RadioGroup_base: typeof FieldGroup;
|
|
5
6
|
/**
|
|
6
7
|
* @element sp-radio-group
|
|
7
8
|
*
|
|
8
9
|
* @slot - The `sp-radio` elements to display/manage in the group.
|
|
10
|
+
* @slot help-text - default or non-negative help text to associate to your form element
|
|
11
|
+
* @slot negative-help-text - negative help text to associate to your form element when `invalid`
|
|
12
|
+
*
|
|
13
|
+
* @fires change - An alteration to the value of the element has been committed by the user.
|
|
9
14
|
*/
|
|
10
15
|
export declare class RadioGroup extends RadioGroup_base {
|
|
11
16
|
name: string;
|
|
12
17
|
defaultNodes: Node[];
|
|
13
|
-
label: string;
|
|
14
18
|
get buttons(): Radio[];
|
|
15
|
-
|
|
19
|
+
rovingTabindexController: RovingTabindexController<Radio>;
|
|
16
20
|
focus(): void;
|
|
17
|
-
private handleFocusin;
|
|
18
|
-
private handleKeydown;
|
|
19
|
-
private handleFocusout;
|
|
20
21
|
private _setSelected;
|
|
21
22
|
selected: string;
|
|
22
|
-
protected render(): TemplateResult;
|
|
23
23
|
protected firstUpdated(changes: PropertyValues<this>): void;
|
|
24
24
|
protected updated(changes: PropertyValues<this>): void;
|
|
25
25
|
private validateRadios;
|
|
26
|
+
protected handleSlotchange(): void;
|
|
26
27
|
}
|
|
27
28
|
export {};
|