@justeattakeaway/pie-radio 0.11.1 → 0.11.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 +83 -18
- package/custom-elements.json +3 -3
- package/dist/index.js +2 -2
- package/package.json +1 -1
- package/src/radio.scss +4 -0
package/README.md
CHANGED
|
@@ -1,40 +1,105 @@
|
|
|
1
|
-
|
|
2
|
-
<img align="center" src="../../../readme_image.png" height="200" alt="">
|
|
3
|
-
</p>
|
|
1
|
+
# @justeattakeaway/pie-radio
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
[Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-radio) | [Design Documentation](https://pie.design/components/radio) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-radio)
|
|
4
|
+
<p>
|
|
6
5
|
<a href="https://www.npmjs.com/@justeattakeaway/pie-radio">
|
|
7
6
|
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-radio.svg">
|
|
8
7
|
</a>
|
|
9
8
|
</p>
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
`pie-radio` is a Web Component built using the Lit library.
|
|
10
|
+
`@justeattakeaway/pie-radio` is a Web Component built using the Lit library. It offers a simple and accessible radio button component for web applications.
|
|
14
11
|
|
|
15
|
-
|
|
12
|
+
## Table of Contents
|
|
16
13
|
|
|
14
|
+
- [Installation](#installation)
|
|
15
|
+
- [Documentation](#documentation)
|
|
16
|
+
- [Properties](#properties)
|
|
17
|
+
- [Slots](#slots)
|
|
18
|
+
- [CSS Variables](#css-variables)
|
|
19
|
+
- [Events](#events)
|
|
20
|
+
- [Usage Examples](#usage-examples)
|
|
21
|
+
- [Questions and Support](#questions-and-support)
|
|
22
|
+
- [Contributing](#contributing)
|
|
17
23
|
|
|
18
24
|
## Installation
|
|
19
25
|
|
|
20
|
-
To install
|
|
26
|
+
> To install any of our web components in your application, we would suggest following the [getting started guide](https://webc.pie.design/?path=/docs/introduction-getting-started--docs) to set up your project.
|
|
27
|
+
|
|
28
|
+
Ideally, you should install the component using the **`@justeattakeaway/pie-webc`** package, which includes all of the components. Or you can install the individual component package.
|
|
29
|
+
|
|
30
|
+
## Documentation
|
|
31
|
+
|
|
32
|
+
### Properties
|
|
33
|
+
| Prop | Options | Description | Default |
|
|
34
|
+
|------------------|--------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|
|
|
35
|
+
| `checked` | `true`, `false` | The checked state of the radio. | `false` |
|
|
36
|
+
| `defaultChecked` | `true`, `false` | The default checked state of the radio (not necessarily the same as the current checked state). Used when the radio is part of a form that is reset. | `false` |
|
|
37
|
+
| `disabled` | `true`, `false` | Same as the HTML `disabled` attribute — indicates whether or not the radio is disabled. | `false` |
|
|
38
|
+
| `name` | `string` | The name of the radio (used as a key/value pair with `value`). This is required in order to work properly with forms. | `undefined` |
|
|
39
|
+
| `required` | `true`, `false` | Same as the native `required` attribute. If any radio button in a same-named group has the `required` attribute, a radio button in that group must be checked, although it doesn't have to be the one with the attribute applied. | `false` |
|
|
40
|
+
| `value` | `string` | The value of the radio (used as a key/value pair in HTML forms with `name`). | `undefined` |
|
|
41
|
+
| `status` | `"default"`, `"error"` | The status of the radio component. Can be `default` or `error`. | `"default"` |
|
|
42
|
+
|
|
43
|
+
### Slots
|
|
44
|
+
| Slot | Description |
|
|
45
|
+
|-----------|---------------------------------------------|
|
|
46
|
+
| `default` | The default slot is used for the radio label text. |
|
|
47
|
+
|
|
48
|
+
### CSS Variables
|
|
49
|
+
This component does not expose any CSS variables for style overrides.
|
|
50
|
+
|
|
51
|
+
### Events
|
|
52
|
+
| Event | Description |
|
|
53
|
+
|-----------|----------------------------------------------------------|
|
|
54
|
+
| `change` | Fires when the radio is checked (but not when unchecked).|
|
|
55
|
+
| `input` | Should fire whenever a user toggles the radio. |
|
|
56
|
+
|
|
57
|
+
## Usage Examples
|
|
21
58
|
|
|
22
|
-
|
|
23
|
-
|
|
59
|
+
> ⚠️ It is likely you will want to use this component inside of our [Radio Group component](https://webc.pie.design/?path=/story/components-radio-group), which allows you to group radio buttons together and manage their state and keyboard navigation.
|
|
60
|
+
|
|
61
|
+
**For HTML:**
|
|
62
|
+
|
|
63
|
+
```js
|
|
64
|
+
// import as module into a js file e.g. main.js
|
|
65
|
+
import '@justeattakeaway/pie-webc/components/radio.js'
|
|
24
66
|
```
|
|
25
|
-
|
|
26
|
-
|
|
67
|
+
|
|
68
|
+
```html
|
|
69
|
+
<!-- pass js file into <script> tag -->
|
|
70
|
+
<pie-radio></pie-radio>
|
|
71
|
+
<script>
|
|
72
|
+
const pieRadio = document.querySelector('pie-radio');
|
|
73
|
+
// Properties can be set like any JS object
|
|
74
|
+
pieRadio.checked = checked;
|
|
75
|
+
</script>
|
|
27
76
|
```
|
|
28
77
|
|
|
29
|
-
For
|
|
78
|
+
**For Native JS Applications, Vue, Angular, Svelte etc.:**
|
|
30
79
|
|
|
31
|
-
|
|
80
|
+
```js
|
|
81
|
+
// Vue templates (using Nuxt 3)
|
|
82
|
+
import '@justeattakeaway/pie-webc/components/radio.js';
|
|
32
83
|
|
|
33
|
-
|
|
84
|
+
<pie-radio :checked="checked" value="value" @change="handleRadioChange"></pie-radio>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
**For React Applications:**
|
|
88
|
+
|
|
89
|
+
```jsx
|
|
90
|
+
import { PieRadio } from '@justeattakeaway/pie-webc/react/radio.js';
|
|
91
|
+
|
|
92
|
+
<PieRadio
|
|
93
|
+
checked={isRadioChecked}
|
|
94
|
+
value="value"
|
|
95
|
+
onInput={handleRadioInput}>
|
|
96
|
+
{`checked: ${isRadioChecked}`}
|
|
97
|
+
</PieRadio>
|
|
98
|
+
```
|
|
34
99
|
|
|
35
|
-
## Questions
|
|
100
|
+
## Questions and Support
|
|
36
101
|
|
|
37
|
-
|
|
102
|
+
If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).
|
|
38
103
|
|
|
39
104
|
## Contributing
|
|
40
105
|
|
package/custom-elements.json
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"type": {
|
|
27
27
|
"text": "DefaultProps"
|
|
28
28
|
},
|
|
29
|
-
"default": "{\
|
|
29
|
+
"default": "{\n checked: false,\n defaultChecked: false,\n disabled: false,\n required: false,\n status: 'default',\n}"
|
|
30
30
|
}
|
|
31
31
|
],
|
|
32
32
|
"exports": [
|
|
@@ -163,14 +163,14 @@
|
|
|
163
163
|
"text": "ValidityState"
|
|
164
164
|
},
|
|
165
165
|
"privacy": "public",
|
|
166
|
-
"description": "(Read-only) returns a ValidityState with the validity states that this element is in.\
|
|
166
|
+
"description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
|
|
167
167
|
"readonly": true
|
|
168
168
|
},
|
|
169
169
|
{
|
|
170
170
|
"kind": "method",
|
|
171
171
|
"name": "formResetCallback",
|
|
172
172
|
"privacy": "public",
|
|
173
|
-
"description": "Called when the form that contains this component is reset.\
|
|
173
|
+
"description": "Called when the form that contains this component is reset.\nIf the current checked state is different to the default checked state,\nthe checked state is reset to the default checked state and a `change` event is emitted."
|
|
174
174
|
}
|
|
175
175
|
],
|
|
176
176
|
"events": [
|
package/dist/index.js
CHANGED
|
@@ -9,7 +9,7 @@ const b = class b extends g {
|
|
|
9
9
|
this.getAttribute("v") || this.setAttribute("v", b.v);
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
|
-
b.v = "0.11.
|
|
12
|
+
b.v = "0.11.3";
|
|
13
13
|
let h = b;
|
|
14
14
|
const B = ["default", "error"], s = {
|
|
15
15
|
checked: !1,
|
|
@@ -17,7 +17,7 @@ const B = ["default", "error"], s = {
|
|
|
17
17
|
disabled: !1,
|
|
18
18
|
required: !1,
|
|
19
19
|
status: "default"
|
|
20
|
-
}, E = '*,*:after,*:before{box-sizing:inherit}.c-radio{--radio-dot-bg-color: var(--dt-color-content-interactive-primary);--radio-bg-color: transparent;--radio-bg-color--checked: var(--dt-color-interactive-brand);--radio-border-color: var(--dt-color-border-form);--radio-font-size: calc(var(--dt-font-body-l-size) * 1px);--radio-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--radio-font-weight: var(--dt-font-weight-regular);--radio-text-color: var(--dt-color-content-default);--radio-size: 24px;--radio-dot-size: 8px;--radio-cursor: pointer;--radio-motion-easing: var(--dt-motion-easing-persistent-functional);--radio-border-width: 1px;display:flex;align-items:center;gap:var(--dt-spacing-b);cursor:var(--radio-cursor);font-size:var(--radio-font-size);line-height:var(--radio-line-height);font-weight:var(--radio-font-weight);color:var(--radio-text-color)}.c-radio .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent)}}.c-radio .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-radio .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)));--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(dt-color-interactive-brand))}}.c-radio .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)));--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(dt-color-interactive-brand))}}.c-radio.is-disabled{--radio-cursor: not-allowed}.c-radio.c-radio--status-error{--radio-bg-color--checked: var(--dt-color-support-error);--radio-border-color: var(--dt-color-support-error)}.c-radio.c-radio--status-error .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent)}}.c-radio.c-radio--status-error .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-radio.c-radio--status-error .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)));--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(dt-color-support-error))}}.c-radio.c-radio--status-error .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)));--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(dt-color-support-error))}}.c-radio .c-radio-input{align-self:flex-start;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;inline-size:var(--radio-size);block-size:var(--radio-size);border:var(--radio-border-width) solid var(--radio-border-color);border-radius:50%;margin:0;cursor:var(--radio-cursor);background-color:var(--radio-bg-color);transition:background-color var(--dt-motion-timing-100) var(--radio-motion-easing);flex-shrink:0}.c-radio .c-radio-input:before{--circle-size: calc(var(--radio-border-width) * -1);content:"";display:block;inset:var(--circle-size);border-radius:inherit;background-color:var(--radio-bg-color--checked);position:absolute;transform:scale(0)}@media (prefers-reduced-motion: no-preference){.c-radio .c-radio-input:not(:disabled):before{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}.c-radio .c-radio-input:after{content:"";position:absolute;top:50%;left:50%;width:var(--radio-dot-size);height:var(--radio-dot-size);background-color:var(--radio-dot-bg-color);border-radius:50%;transform:translate(-50%,-50%) scale(0)}.c-radio .c-radio-input:checked:after{transform:translate(-50%,-50%) scale(1)}.c-radio .c-radio-input:checked:before{transform:scale(1)}@media (prefers-reduced-motion: no-preference){.c-radio .c-radio-input:not(:disabled):after{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-radio .c-radio-input:not(:disabled):checked:after{transition:all var(--dt-motion-timing-150) var(--radio-motion-easing)}}.c-radio .c-radio-input:disabled{--radio-bg-color: var(--dt-color-disabled-01);--radio-border-color: var(--dt-color-border-default)}.c-radio .c-radio-input:checked:disabled{--radio-dot-bg-color: var(--dt-color-content-disabled);--radio-bg-color--checked: var(--dt-color-disabled-01)}:host(:focus-visible){outline:none}:host(:focus-visible) .c-radio .c-radio-input{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}';
|
|
20
|
+
}, E = '*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-radio{--radio-dot-bg-color: var(--dt-color-content-interactive-primary);--radio-bg-color: transparent;--radio-bg-color--checked: var(--dt-color-interactive-brand);--radio-border-color: var(--dt-color-border-form);--radio-font-size: calc(var(--dt-font-body-l-size) * 1px);--radio-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--radio-font-weight: var(--dt-font-weight-regular);--radio-text-color: var(--dt-color-content-default);--radio-size: 24px;--radio-dot-size: 8px;--radio-cursor: pointer;--radio-motion-easing: var(--dt-motion-easing-persistent-functional);--radio-border-width: 1px;display:flex;align-items:center;gap:var(--dt-spacing-b);cursor:var(--radio-cursor);font-size:var(--radio-font-size);line-height:var(--radio-line-height);font-weight:var(--radio-font-weight);color:var(--radio-text-color)}.c-radio .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent)}}.c-radio .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-radio .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)));--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(dt-color-interactive-brand))}}.c-radio .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)));--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(dt-color-interactive-brand))}}.c-radio.is-disabled{--radio-cursor: not-allowed}.c-radio.c-radio--status-error{--radio-bg-color--checked: var(--dt-color-support-error);--radio-border-color: var(--dt-color-support-error)}.c-radio.c-radio--status-error .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent)}}.c-radio.c-radio--status-error .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-radio.c-radio--status-error .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)));--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(dt-color-support-error))}}.c-radio.c-radio--status-error .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)));--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(dt-color-support-error))}}.c-radio .c-radio-input{align-self:flex-start;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;inline-size:var(--radio-size);block-size:var(--radio-size);border:var(--radio-border-width) solid var(--radio-border-color);border-radius:50%;margin:0;cursor:var(--radio-cursor);background-color:var(--radio-bg-color);transition:background-color var(--dt-motion-timing-100) var(--radio-motion-easing);flex-shrink:0}.c-radio .c-radio-input:before{--circle-size: calc(var(--radio-border-width) * -1);content:"";display:block;inset:var(--circle-size);border-radius:inherit;background-color:var(--radio-bg-color--checked);position:absolute;transform:scale(0)}@media (prefers-reduced-motion: no-preference){.c-radio .c-radio-input:not(:disabled):before{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}.c-radio .c-radio-input:after{content:"";position:absolute;top:50%;left:50%;width:var(--radio-dot-size);height:var(--radio-dot-size);background-color:var(--radio-dot-bg-color);border-radius:50%;transform:translate(-50%,-50%) scale(0)}.c-radio .c-radio-input:checked:after{transform:translate(-50%,-50%) scale(1)}.c-radio .c-radio-input:checked:before{transform:scale(1)}@media (prefers-reduced-motion: no-preference){.c-radio .c-radio-input:not(:disabled):after{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-radio .c-radio-input:not(:disabled):checked:after{transition:all var(--dt-motion-timing-150) var(--radio-motion-easing)}}.c-radio .c-radio-input:disabled{--radio-bg-color: var(--dt-color-disabled-01);--radio-border-color: var(--dt-color-border-default)}.c-radio .c-radio-input:checked:disabled{--radio-dot-bg-color: var(--dt-color-content-disabled);--radio-bg-color--checked: var(--dt-color-disabled-01)}:host(:focus-visible){outline:none}:host(:focus-visible) .c-radio .c-radio-input{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}';
|
|
21
21
|
var S = Object.defineProperty, F = Object.getOwnPropertyDescriptor, a = (r, e, i, d) => {
|
|
22
22
|
for (var t = d > 1 ? void 0 : d ? F(e, i) : e, n = r.length - 1, l; n >= 0; n--)
|
|
23
23
|
(l = r[n]) && (t = (d ? l(e, i, t) : l(t)) || t);
|
package/package.json
CHANGED