@momentum-design/components 0.129.29 → 0.129.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/browser/index.js +43 -47
  2. package/dist/browser/index.js.map +2 -2
  3. package/dist/components/radio/radio.component.d.ts +46 -20
  4. package/dist/components/radio/radio.component.js +46 -20
  5. package/dist/components/radio/radio.styles.js +9 -13
  6. package/dist/components/staticradio/staticradio.component.d.ts +17 -16
  7. package/dist/components/staticradio/staticradio.component.js +17 -16
  8. package/dist/components/staticradio/staticradio.styles.js +34 -34
  9. package/dist/custom-elements.json +107 -230
  10. package/dist/react/radio/index.d.ts +24 -10
  11. package/dist/react/radio/index.js +24 -10
  12. package/dist/react/staticradio/index.d.ts +11 -10
  13. package/dist/react/staticradio/index.js +11 -10
  14. package/package.json +1 -1
package/dist/components/radio/radio.component.d.ts CHANGED
@@ -3,10 +3,29 @@ import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
3
3
  import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
4
4
  declare const Radio_base: import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
5
5
  /**
6
- * Radio allow users to select single options from a list or turn an item/feature on or off.
7
- * These are often used in forms, settings, and selection in lists.
6
+ * The Radio component allows users to select a single option from a group of mutually exclusive choices.
7
+ * Unlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected
8
+ * at a time within the same group. These are commonly used in forms, surveys, and settings where users
9
+ * need to make a single selection from multiple options.
8
10
  *
9
- * A radio component contains an optional label, optional info icon and an optional helper text.
11
+ * To create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons
12
+ * share the same `name` attribute.
13
+ *
14
+ * **Note:** This component internally renders a native radio input element with custom styling.
15
+ *
16
+ * ## When to use
17
+ * Use radio buttons when users must select exactly one option from a list of 2-5 choices. For longer lists,
18
+ * consider using a dropdown menu instead.
19
+ *
20
+ * ## Accessibility
21
+ * - Provide clear labels that describe each option
22
+ * - Use `data-aria-label` when a visual label is not present
23
+ * - Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form
24
+ * - Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component
25
+ *
26
+ * ## Styling
27
+ * Use the `static-radio` part to apply custom styles to the radio visual element.
28
+ * This part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.
10
29
  *
11
30
  * @dependency mdc-button
12
31
  * @dependency mdc-icon
@@ -19,12 +38,6 @@ declare const Radio_base: import("../../utils/mixins/index.types").Constructor<i
19
38
  * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
20
39
  * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
21
40
  *
22
- * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
23
- * @cssproperty --mdc-radio-outer-circle-size - size of the outer circle
24
- * @cssproperty --mdc-radio-inner-circle-background-color - background color of the inner circle
25
- * @cssproperty --mdc-radio-outer-circle-border-color - border color of the outer circle
26
- * @cssproperty --mdc-radio-outer-circle-background-color - background color of the outer circle
27
- *
28
41
  * @csspart label - The label element.
29
42
  * @csspart label-text - The container for the label and required indicator elements.
30
43
  * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
@@ -33,13 +46,14 @@ declare const Radio_base: import("../../utils/mixins/index.types").Constructor<i
33
46
  * @csspart help-text - The helper/validation text element.
34
47
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
35
48
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
36
- * @csspart radio-input - The native radio input element.
49
+ * @csspart radio-input - The native radio input element that provides the interactive functionality.
37
50
  * @csspart text-container - The container for the label and helper text elements.
51
+ * @csspart static-radio - The staticradio that provides the visual radio appearance.
38
52
  */
39
53
  declare class Radio extends Radio_base implements AssociatedFormControl {
40
54
  /**
41
- * Determines whether the radio is selected or unselected.
42
- *
55
+ * Determines whether the radio is checked (selected) or unchecked.
56
+ * Within a radio group, only one radio can be checked at a time.
43
57
  * @default false
44
58
  */
45
59
  checked: boolean;
@@ -47,6 +61,7 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
47
61
  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
48
62
  /**
49
63
  * Returns all radios within the same group (name).
64
+ * @internal
50
65
  */
51
66
  private getAllRadiosWithinSameGroup;
52
67
  /** @internal */
@@ -54,6 +69,8 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
54
69
  /** @internal */
55
70
  formStateRestoreCallback(state: string): void;
56
71
  /**
72
+ * Sets the validity state of the radio component.
73
+ * @param isValid - Boolean value to set the validity
57
74
  * @internal
58
75
  */
59
76
  setComponentValidity(isValid: boolean): void;
@@ -61,39 +78,48 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
61
78
  * Sets the validity of the group of radios.
62
79
  * @param radios - Array of radios of the same group
63
80
  * @param isValid - Boolean value to set the validity of the group
81
+ * @internal
64
82
  */
65
83
  private setGroupValidity;
66
84
  /**
67
85
  * Updates the form value to reflect the current state of the radio.
68
- * If checked, the value is set to the user-provided value.
86
+ * If checked, the value is set to the user-provided value or 'on' if no value is provided.
69
87
  * If unchecked, the value is set to null.
88
+ * @internal
70
89
  */
71
90
  private setActualFormValue;
72
91
  /**
73
92
  * Handles the change event on the radio element.
74
- * This will toggle the state of the radio element.
93
+ * Unchecks all other radios in the same group and checks this radio.
75
94
  * Dispatches the change event.
95
+ * @internal
76
96
  */
77
97
  private handleChange;
78
98
  /**
79
99
  * Updates the state of the radio button at the specified index within the enabled radios.
80
- * Focuses the radio button and triggers the change event if the radio button is not read-only.
81
- *
100
+ * Focuses the radio button and triggers the change event.
82
101
  * @param enabledRadios - An array of enabled radio buttons within the same group.
83
102
  * @param index - The index of the radio button to be updated within the enabled radios array.
103
+ * @internal
84
104
  */
85
105
  private updateRadio;
86
106
  /**
87
- * Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element.
107
+ * Handles the keydown event on the radio element.
108
+ * Supports Arrow keys for navigation between radios in the same group, Space for selection, and Enter for form submission.
109
+ * @param event - The keyboard event.
110
+ * @internal
88
111
  */
89
112
  private handleKeyDown;
90
113
  /**
91
- * Update tab index for all radios in the same group (name)
92
- * If any radio group is checked, it will have a tab index of 0
93
- * If no radio group is checked, the first enabled radio will have a tab index of 0
114
+ * Updates tab index for all radios in the same group (name).
115
+ * If any radio in the group is checked, it will have a tab index of 0.
116
+ * If no radio is checked, the first enabled radio will have a tab index of 0.
117
+ * This ensures proper keyboard navigation within radio groups.
118
+ * @internal
94
119
  */
95
120
  private updateTabIndex;
96
121
  update(changedProperties: PropertyValues): void;
122
+ /** @internal */
97
123
  private renderLabelAndHelperText;
98
124
  render(): import("lit-html").TemplateResult<1>;
99
125
  static styles: Array<CSSResult>;
package/dist/components/radio/radio.component.js CHANGED
@@ -20,10 +20,29 @@ import { KEYS } from '../../utils/keys';
20
20
  import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
21
21
  import styles from './radio.styles';
22
22
  /**
23
- * Radio allow users to select single options from a list or turn an item/feature on or off.
24
- * These are often used in forms, settings, and selection in lists.
23
+ * The Radio component allows users to select a single option from a group of mutually exclusive choices.
24
+ * Unlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected
25
+ * at a time within the same group. These are commonly used in forms, surveys, and settings where users
26
+ * need to make a single selection from multiple options.
25
27
  *
26
- * A radio component contains an optional label, optional info icon and an optional helper text.
28
+ * To create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons
29
+ * share the same `name` attribute.
30
+ *
31
+ * **Note:** This component internally renders a native radio input element with custom styling.
32
+ *
33
+ * ## When to use
34
+ * Use radio buttons when users must select exactly one option from a list of 2-5 choices. For longer lists,
35
+ * consider using a dropdown menu instead.
36
+ *
37
+ * ## Accessibility
38
+ * - Provide clear labels that describe each option
39
+ * - Use `data-aria-label` when a visual label is not present
40
+ * - Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form
41
+ * - Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component
42
+ *
43
+ * ## Styling
44
+ * Use the `static-radio` part to apply custom styles to the radio visual element.
45
+ * This part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.
27
46
  *
28
47
  * @dependency mdc-button
29
48
  * @dependency mdc-icon
@@ -36,12 +55,6 @@ import styles from './radio.styles';
36
55
  * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
37
56
  * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
38
57
  *
39
- * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
40
- * @cssproperty --mdc-radio-outer-circle-size - size of the outer circle
41
- * @cssproperty --mdc-radio-inner-circle-background-color - background color of the inner circle
42
- * @cssproperty --mdc-radio-outer-circle-border-color - border color of the outer circle
43
- * @cssproperty --mdc-radio-outer-circle-background-color - background color of the outer circle
44
- *
45
58
  * @csspart label - The label element.
46
59
  * @csspart label-text - The container for the label and required indicator elements.
47
60
  * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
@@ -50,18 +63,20 @@ import styles from './radio.styles';
50
63
  * @csspart help-text - The helper/validation text element.
51
64
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
52
65
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
53
- * @csspart radio-input - The native radio input element.
66
+ * @csspart radio-input - The native radio input element that provides the interactive functionality.
54
67
  * @csspart text-container - The container for the label and helper text elements.
68
+ * @csspart static-radio - The staticradio that provides the visual radio appearance.
55
69
  */
56
70
  class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
57
71
  constructor() {
58
72
  super(...arguments);
59
73
  /**
60
- * Determines whether the radio is selected or unselected.
61
- *
74
+ * Determines whether the radio is checked (selected) or unchecked.
75
+ * Within a radio group, only one radio can be checked at a time.
62
76
  * @default false
63
77
  */
64
78
  this.checked = false;
79
+ /** @internal */
65
80
  this.renderLabelAndHelperText = () => {
66
81
  if (!this.label)
67
82
  return nothing;
@@ -85,6 +100,7 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
85
100
  }
86
101
  /**
87
102
  * Returns all radios within the same group (name).
103
+ * @internal
88
104
  */
89
105
  getAllRadiosWithinSameGroup() {
90
106
  return Array.from(document.querySelectorAll(`mdc-radio[name="${this.name}"]`));
@@ -112,6 +128,8 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
112
128
  }
113
129
  }
114
130
  /**
131
+ * Sets the validity state of the radio component.
132
+ * @param isValid - Boolean value to set the validity
115
133
  * @internal
116
134
  */
117
135
  setComponentValidity(isValid) {
@@ -133,6 +151,7 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
133
151
  * Sets the validity of the group of radios.
134
152
  * @param radios - Array of radios of the same group
135
153
  * @param isValid - Boolean value to set the validity of the group
154
+ * @internal
136
155
  */
137
156
  setGroupValidity(radios, isValid) {
138
157
  this.updateComplete
@@ -149,8 +168,9 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
149
168
  }
150
169
  /**
151
170
  * Updates the form value to reflect the current state of the radio.
152
- * If checked, the value is set to the user-provided value.
171
+ * If checked, the value is set to the user-provided value or 'on' if no value is provided.
153
172
  * If unchecked, the value is set to null.
173
+ * @internal
154
174
  */
155
175
  setActualFormValue() {
156
176
  let actualValue = '';
@@ -174,8 +194,9 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
174
194
  }
175
195
  /**
176
196
  * Handles the change event on the radio element.
177
- * This will toggle the state of the radio element.
197
+ * Unchecks all other radios in the same group and checks this radio.
178
198
  * Dispatches the change event.
199
+ * @internal
179
200
  */
180
201
  handleChange() {
181
202
  var _a;
@@ -202,10 +223,10 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
202
223
  }
203
224
  /**
204
225
  * Updates the state of the radio button at the specified index within the enabled radios.
205
- * Focuses the radio button and triggers the change event if the radio button is not read-only.
206
- *
226
+ * Focuses the radio button and triggers the change event.
207
227
  * @param enabledRadios - An array of enabled radio buttons within the same group.
208
228
  * @param index - The index of the radio button to be updated within the enabled radios array.
229
+ * @internal
209
230
  */
210
231
  updateRadio(enabledRadios, index) {
211
232
  var _a, _b;
@@ -213,7 +234,10 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
213
234
  enabledRadios[index].handleChange();
214
235
  }
215
236
  /**
216
- * Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element.
237
+ * Handles the keydown event on the radio element.
238
+ * Supports Arrow keys for navigation between radios in the same group, Space for selection, and Enter for form submission.
239
+ * @param event - The keyboard event.
240
+ * @internal
217
241
  */
218
242
  handleKeyDown(event) {
219
243
  var _a;
@@ -244,9 +268,11 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
244
268
  }
245
269
  }
246
270
  /**
247
- * Update tab index for all radios in the same group (name)
248
- * If any radio group is checked, it will have a tab index of 0
249
- * If no radio group is checked, the first enabled radio will have a tab index of 0
271
+ * Updates tab index for all radios in the same group (name).
272
+ * If any radio in the group is checked, it will have a tab index of 0.
273
+ * If no radio is checked, the first enabled radio will have a tab index of 0.
274
+ * This ensures proper keyboard navigation within radio groups.
275
+ * @internal
250
276
  */
251
277
  updateTabIndex() {
252
278
  const radios = this.getAllRadiosWithinSameGroup();
package/dist/components/radio/radio.styles.js CHANGED
@@ -4,6 +4,9 @@ const styles = [
4
4
  hostFitContentStyles,
5
5
  css `
6
6
  :host {
7
+ --mdc-label-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
8
+ --mdc-label-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
9
+ --mdc-label-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
7
10
  display: flex;
8
11
  flex-direction: row;
9
12
  align-items: start;
@@ -28,35 +31,28 @@ const styles = [
28
31
  flex: 1;
29
32
  }
30
33
 
31
- :host::part(required-indicator) {
32
- display: none;
33
- }
34
-
35
34
  :host::part(label) {
36
35
  cursor: pointer;
37
36
  word-break: break-word;
38
37
  white-space: normal;
39
- --mdc-label-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
40
- --mdc-label-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
41
- --mdc-label-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
42
38
  }
43
39
 
44
40
  :host(:hover)::part(static-radio) {
45
- --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-inactive-hover);
41
+ --mdc-staticradio-outer-circle-background-color: var(--mds-color-theme-control-inactive-hover);
46
42
  }
47
43
 
48
44
  :host(:active)::part(static-radio) {
49
- --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-inactive-pressed);
45
+ --mdc-staticradio-outer-circle-background-color: var(--mds-color-theme-control-inactive-pressed);
50
46
  }
51
47
 
52
48
  :host([checked]:hover)::part(static-radio) {
53
- --mdc-radio-outer-circle-border-color: var(--mds-color-theme-control-active-hover);
54
- --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-active-hover);
49
+ --mdc-staticradio-outer-circle-border-color: var(--mds-color-theme-control-active-hover);
50
+ --mdc-staticradio-outer-circle-background-color: var(--mds-color-theme-control-active-hover);
55
51
  }
56
52
 
57
53
  :host([checked]:active)::part(static-radio) {
58
- --mdc-radio-outer-circle-border-color: var(--mds-color-theme-control-active-pressed);
59
- --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-active-pressed);
54
+ --mdc-staticradio-outer-circle-border-color: var(--mds-color-theme-control-active-pressed);
55
+ --mdc-staticradio-outer-circle-background-color: var(--mds-color-theme-control-active-pressed);
60
56
  }
61
57
 
62
58
  :host([readonly]),
package/dist/components/staticradio/staticradio.component.d.ts CHANGED
@@ -2,39 +2,40 @@ import { CSSResult } from 'lit';
2
2
  import { Component } from '../../models';
3
3
  declare const StaticRadio_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
4
4
  /**
5
- * This is a decorative component that is styled to look as a radio.
6
- * It has 4 properties - checked, disabled, readonly and soft-disabled.
5
+ * StaticRadio is a decorative component styled as a radio button for visual presentation.
6
+ * Unlike the interactive `mdc-radio`, this component does not handle user interactions or form submissions.
7
+ * It is used purely for displaying radio button states in read-only scenarios.
7
8
  *
8
- * We are using the same styling that has been created for the `mdc-radio` component.
9
+ * This component supports four display states: checked, disabled, readonly, and soft-disabled.
9
10
  *
10
11
  * @tagname mdc-staticradio
11
12
  *
12
- * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
13
- * @cssproperty --mdc-radio-outer-circle-size - size of the outer circle
14
- * @cssproperty --mdc-radio-inner-circle-background-color - background color of the inner circle
15
- * @cssproperty --mdc-radio-outer-circle-border-color - border color of the outer circle
16
- * @cssproperty --mdc-radio-outer-circle-background-color - background color of the outer circle
13
+ * @cssproperty --mdc-staticradio-inner-circle-size - The size of the inner circle when checked.
14
+ * @cssproperty --mdc-staticradio-outer-circle-size - The size of the outer circle border.
15
+ * @cssproperty --mdc-staticradio-inner-circle-background-color - The background color of the inner circle when checked.
16
+ * @cssproperty --mdc-staticradio-outer-circle-border-color - The border color of the outer circle.
17
+ * @cssproperty --mdc-staticradio-outer-circle-background-color - The background color of the outer circle.
17
18
  *
18
- * @csspart radio-icon - The radio icon.
19
+ * @csspart radio-icon - The radio icon element
19
20
  *
20
- * @slot - Default slot for the label of the radio.
21
+ * @slot - Default slot for the label of the radio
21
22
  */
22
23
  declare class StaticRadio extends StaticRadio_base {
23
24
  /**
24
- * Determines whether the radio is selected or unselected.
25
- *
25
+ * Determines whether the radio appears checked (selected) or unchecked.
26
26
  * @default false
27
27
  */
28
28
  checked: boolean;
29
29
  /**
30
- * Determines whether the radio is read-only.
31
- *
30
+ * Determines whether the radio appears in a read-only state.
31
+ * Note: This is purely visual as StaticRadio is non-interactive by design.
32
32
  * @default false
33
33
  */
34
34
  readonly: boolean;
35
35
  /**
36
- * Determines whether the radio is soft-disabled.
37
- *
36
+ * Determines whether the radio appears in a soft-disabled state.
37
+ * Soft-disabled provides a less prominent disabled appearance than the standard disabled state.
38
+ * Note: This is purely visual as StaticRadio is non-interactive by design.
38
39
  * @default false
39
40
  */
40
41
  softDisabled: boolean;
package/dist/components/staticradio/staticradio.component.js CHANGED
@@ -13,41 +13,42 @@ import { Component } from '../../models';
13
13
  import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
14
14
  import styles from './staticradio.styles';
15
15
  /**
16
- * This is a decorative component that is styled to look as a radio.
17
- * It has 4 properties - checked, disabled, readonly and soft-disabled.
16
+ * StaticRadio is a decorative component styled as a radio button for visual presentation.
17
+ * Unlike the interactive `mdc-radio`, this component does not handle user interactions or form submissions.
18
+ * It is used purely for displaying radio button states in read-only scenarios.
18
19
  *
19
- * We are using the same styling that has been created for the `mdc-radio` component.
20
+ * This component supports four display states: checked, disabled, readonly, and soft-disabled.
20
21
  *
21
22
  * @tagname mdc-staticradio
22
23
  *
23
- * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
24
- * @cssproperty --mdc-radio-outer-circle-size - size of the outer circle
25
- * @cssproperty --mdc-radio-inner-circle-background-color - background color of the inner circle
26
- * @cssproperty --mdc-radio-outer-circle-border-color - border color of the outer circle
27
- * @cssproperty --mdc-radio-outer-circle-background-color - background color of the outer circle
24
+ * @cssproperty --mdc-staticradio-inner-circle-size - The size of the inner circle when checked.
25
+ * @cssproperty --mdc-staticradio-outer-circle-size - The size of the outer circle border.
26
+ * @cssproperty --mdc-staticradio-inner-circle-background-color - The background color of the inner circle when checked.
27
+ * @cssproperty --mdc-staticradio-outer-circle-border-color - The border color of the outer circle.
28
+ * @cssproperty --mdc-staticradio-outer-circle-background-color - The background color of the outer circle.
28
29
  *
29
- * @csspart radio-icon - The radio icon.
30
+ * @csspart radio-icon - The radio icon element
30
31
  *
31
- * @slot - Default slot for the label of the radio.
32
+ * @slot - Default slot for the label of the radio
32
33
  */
33
34
  class StaticRadio extends DisabledMixin(Component) {
34
35
  constructor() {
35
36
  super(...arguments);
36
37
  /**
37
- * Determines whether the radio is selected or unselected.
38
- *
38
+ * Determines whether the radio appears checked (selected) or unchecked.
39
39
  * @default false
40
40
  */
41
41
  this.checked = false;
42
42
  /**
43
- * Determines whether the radio is read-only.
44
- *
43
+ * Determines whether the radio appears in a read-only state.
44
+ * Note: This is purely visual as StaticRadio is non-interactive by design.
45
45
  * @default false
46
46
  */
47
47
  this.readonly = false;
48
48
  /**
49
- * Determines whether the radio is soft-disabled.
50
- *
49
+ * Determines whether the radio appears in a soft-disabled state.
50
+ * Soft-disabled provides a less prominent disabled appearance than the standard disabled state.
51
+ * Note: This is purely visual as StaticRadio is non-interactive by design.
51
52
  * @default false
52
53
  */
53
54
  this.softDisabled = false;
package/dist/components/staticradio/staticradio.styles.js CHANGED
@@ -2,11 +2,11 @@ import { css } from 'lit';
2
2
  const styles = [
3
3
  css `
4
4
  :host {
5
- --mdc-radio-inner-circle-size: 0.375rem;
6
- --mdc-radio-outer-circle-size: 1rem;
7
- --mdc-radio-inner-circle-background-color: var(--mds-color-theme-inverted-text-primary-normal);
8
- --mdc-radio-outer-circle-border-color: var(--mds-color-theme-outline-input-normal);
9
- --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-inactive-normal);
5
+ --mdc-staticradio-inner-circle-size: 0.375rem;
6
+ --mdc-staticradio-outer-circle-size: 1rem;
7
+ --mdc-staticradio-inner-circle-background-color: var(--mds-color-theme-inverted-text-primary-normal);
8
+ --mdc-staticradio-outer-circle-border-color: var(--mds-color-theme-outline-input-normal);
9
+ --mdc-staticradio-outer-circle-background-color: var(--mds-color-theme-control-inactive-normal);
10
10
 
11
11
  display: block;
12
12
  position: relative;
@@ -20,10 +20,10 @@ const styles = [
20
20
  position: absolute;
21
21
  top: 0;
22
22
  left: 0;
23
- width: var(--mdc-radio-outer-circle-size);
24
- height: var(--mdc-radio-outer-circle-size);
25
- border: 0.0625rem solid var(--mdc-radio-outer-circle-border-color);
26
- background-color: var(--mdc-radio-outer-circle-background-color);
23
+ width: var(--mdc-staticradio-outer-circle-size);
24
+ height: var(--mdc-staticradio-outer-circle-size);
25
+ border: 0.0625rem solid var(--mdc-staticradio-outer-circle-border-color);
26
+ background-color: var(--mdc-staticradio-outer-circle-background-color);
27
27
  border-radius: 50%;
28
28
  }
29
29
 
@@ -34,8 +34,8 @@ const styles = [
34
34
  }
35
35
 
36
36
  :host([checked]) {
37
- --mdc-radio-outer-circle-border-color: var(--mds-color-theme-control-active-normal);
38
- --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-active-normal);
37
+ --mdc-staticradio-outer-circle-border-color: var(--mds-color-theme-control-active-normal);
38
+ --mdc-staticradio-outer-circle-background-color: var(--mds-color-theme-control-active-normal);
39
39
  }
40
40
 
41
41
  :host([checked]) .radio-icon:after {
@@ -43,58 +43,58 @@ const styles = [
43
43
  top: 50%;
44
44
  left: 50%;
45
45
  transform: translate(-50%, -50%);
46
- width: var(--mdc-radio-inner-circle-size);
47
- height: var(--mdc-radio-inner-circle-size);
46
+ width: var(--mdc-staticradio-inner-circle-size);
47
+ height: var(--mdc-staticradio-inner-circle-size);
48
48
  border-radius: 50%;
49
- background-color: var(--mdc-radio-inner-circle-background-color);
49
+ background-color: var(--mdc-staticradio-inner-circle-background-color);
50
50
  }
51
51
 
52
52
  :host([readonly]) {
53
- --mdc-radio-outer-circle-border-color: var(--mds-color-theme-outline-input-normal);
54
- --mdc-radio-outer-circle-background-color: transparent;
53
+ --mdc-staticradio-outer-circle-border-color: var(--mds-color-theme-outline-input-normal);
54
+ --mdc-staticradio-outer-circle-background-color: transparent;
55
55
  }
56
56
 
57
57
  :host([readonly][checked]) {
58
- --mdc-radio-inner-circle-background-color: var(--mds-color-theme-text-primary-normal);
59
- --mdc-radio-outer-circle-border-color: var(--mds-color-theme-outline-input-normal);
60
- --mdc-radio-outer-circle-background-color: transparent;
58
+ --mdc-staticradio-inner-circle-background-color: var(--mds-color-theme-text-primary-normal);
59
+ --mdc-staticradio-outer-circle-border-color: var(--mds-color-theme-outline-input-normal);
60
+ --mdc-staticradio-outer-circle-background-color: transparent;
61
61
  }
62
62
 
63
63
  :host([disabled]),
64
64
  :host([soft-disabled]) {
65
- --mdc-radio-outer-circle-border-color: var(--mds-color-theme-outline-primary-disabled);
66
- --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-inactive-disabled);
65
+ --mdc-staticradio-outer-circle-border-color: var(--mds-color-theme-outline-primary-disabled);
66
+ --mdc-staticradio-outer-circle-background-color: var(--mds-color-theme-control-inactive-disabled);
67
67
  }
68
68
 
69
69
  :host([disabled][checked]),
70
70
  :host([soft-disabled][checked]) {
71
- --mdc-radio-inner-circle-background-color: var(--mds-color-theme-inverted-text-primary-disabled);
72
- --mdc-radio-outer-circle-border-color: transparent;
73
- --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-active-disabled);
71
+ --mdc-staticradio-inner-circle-background-color: var(--mds-color-theme-inverted-text-primary-disabled);
72
+ --mdc-staticradio-outer-circle-border-color: transparent;
73
+ --mdc-staticradio-outer-circle-background-color: var(--mds-color-theme-control-active-disabled);
74
74
  }
75
75
 
76
76
  @media (forced-colors: active) {
77
77
  :host([checked]) {
78
- --mdc-radio-outer-circle-border-color: SelectedItem;
79
- --mdc-radio-outer-circle-background-color: SelectedItem;
78
+ --mdc-staticradio-outer-circle-border-color: SelectedItem;
79
+ --mdc-staticradio-outer-circle-background-color: SelectedItem;
80
80
  }
81
81
  :host([readonly]),
82
82
  :host([readonly][checked]) {
83
- --mdc-radio-inner-circle-background-color: Highlight;
84
- --mdc-radio-outer-circle-border-color: Highlight;
85
- --mdc-radio-outer-circle-background-color: ButtonFace;
83
+ --mdc-staticradio-inner-circle-background-color: Highlight;
84
+ --mdc-staticradio-outer-circle-border-color: Highlight;
85
+ --mdc-staticradio-outer-circle-background-color: ButtonFace;
86
86
  }
87
87
  :host([disabled]),
88
88
  :host([soft-disabled]) {
89
- --mdc-radio-outer-circle-border-color: GrayText;
90
- --mdc-radio-outer-circle-background-color: GrayText;
91
- --mdc-radio-inner-circle-background-color: GrayText;
89
+ --mdc-staticradio-outer-circle-border-color: GrayText;
90
+ --mdc-staticradio-outer-circle-background-color: GrayText;
91
+ --mdc-staticradio-inner-circle-background-color: GrayText;
92
92
  }
93
93
 
94
94
  :host([disabled][checked]),
95
95
  :host([soft-disabled][checked]) {
96
- --mdc-radio-outer-circle-border-color: GrayText;
97
- --mdc-radio-outer-circle-background-color: GrayText;
96
+ --mdc-staticradio-outer-circle-border-color: GrayText;
97
+ --mdc-staticradio-outer-circle-background-color: GrayText;
98
98
  }
99
99
  }
100
100
  `,