@politiet/sheriff-web-components 2.0.1 → 2.0.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.
Files changed (48) hide show
  1. package/dist/frameworks/react.d.ts +4 -4
  2. package/dist/frameworks/react.d.ts.map +1 -1
  3. package/dist/react-wrappers/SDSCheckboxGroupWrapper.d.ts +1 -0
  4. package/dist/react-wrappers/SDSCheckboxGroupWrapper.d.ts.map +1 -1
  5. package/dist/react-wrappers/SDSCheckboxGroupWrapper.js +1 -0
  6. package/dist/react-wrappers/SDSCheckboxGroupWrapper.js.map +1 -1
  7. package/dist/react-wrappers/SDSRadioGroupWrapper.d.ts +1 -0
  8. package/dist/react-wrappers/SDSRadioGroupWrapper.d.ts.map +1 -1
  9. package/dist/react-wrappers/SDSRadioGroupWrapper.js +1 -0
  10. package/dist/react-wrappers/SDSRadioGroupWrapper.js.map +1 -1
  11. package/dist/sds-alert/sds-alert.styles.d.ts.map +1 -1
  12. package/dist/sds-alert/sds-alert.styles.js +25 -3
  13. package/dist/sds-alert/sds-alert.styles.js.map +1 -1
  14. package/dist/sds-button/sds-button.styles.d.ts.map +1 -1
  15. package/dist/sds-button/sds-button.styles.js +13 -1
  16. package/dist/sds-button/sds-button.styles.js.map +1 -1
  17. package/dist/sds-card/sds-card.d.ts +1 -1
  18. package/dist/sds-card/sds-card.d.ts.map +1 -1
  19. package/dist/sds-card/sds-card.js +5 -5
  20. package/dist/sds-card/sds-card.js.map +1 -1
  21. package/dist/sds-card/sds-card.styles.js +6 -6
  22. package/dist/sds-card/sds-card.styles.js.map +1 -1
  23. package/dist/sds-checkbox/sds-checkbox.styles.js +17 -17
  24. package/dist/sds-checkbox/sds-checkbox.styles.js.map +1 -1
  25. package/dist/sds-checkbox-group/sds-checkbox-group.styles.js +2 -2
  26. package/dist/sds-checkbox-group/sds-checkbox-group.styles.js.map +1 -1
  27. package/dist/sds-chip/sds-chip.styles.js +19 -19
  28. package/dist/sds-chip/sds-chip.styles.js.map +1 -1
  29. package/dist/sds-radio/sds-radio.d.ts +17 -4
  30. package/dist/sds-radio/sds-radio.d.ts.map +1 -1
  31. package/dist/sds-radio/sds-radio.js +76 -21
  32. package/dist/sds-radio/sds-radio.js.map +1 -1
  33. package/dist/sds-radio/sds-radio.styles.js +27 -27
  34. package/dist/sds-radio/sds-radio.styles.js.map +1 -1
  35. package/dist/sds-radio-group/sds-radio-group.d.ts +1 -0
  36. package/dist/sds-radio-group/sds-radio-group.d.ts.map +1 -1
  37. package/dist/sds-radio-group/sds-radio-group.js +14 -10
  38. package/dist/sds-radio-group/sds-radio-group.js.map +1 -1
  39. package/dist/sds-radio-group/sds-radio-group.styles.js +2 -2
  40. package/dist/sds-radio-group/sds-radio-group.styles.js.map +1 -1
  41. package/dist/sds-switch/sds-switch.styles.js +3 -3
  42. package/dist/sds-switch/sds-switch.styles.js.map +1 -1
  43. package/dist/sds-textarea/sds-textarea.styles.js +11 -11
  44. package/dist/sds-textarea/sds-textarea.styles.js.map +1 -1
  45. package/dist/sds-textfield/sds-textfield.styles.js +7 -7
  46. package/dist/sds-textfield/sds-textfield.styles.js.map +1 -1
  47. package/dist/sheriff-web-components.js +218 -133
  48. package/package.json +2 -2
package/dist/sds-checkbox-group/sds-checkbox-group.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-checkbox-group.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-group-gap: var(--sds-checkbox-group-gap, var(--sds-spacing-xs));\n\t\t--_sds-checkbox-group-font-family: var(--sds-checkbox-group-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-group-text-color: var(--sds-checkbox-group-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-checkbox-group-max-line-width: var(--sds-checkbox-group-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-checkbox-group-disabled-opacity: var(--sds-checkbox-group-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-checkbox-group-legend-font-weight: var(--sds-checkbox-group-legend-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-checkbox-group-legend-help-text-gap: var(--sds-checkbox-group-legend-help-text-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-checkbox-group-help-text-color: var(--sds-checkbox-group-help-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-group-help-text-font-weight: var(--sds-checkbox-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\tdisplay: block;\n\t\tcontain: layout style;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-checkbox-group {\n\t\tborder: 0;\n\t\tcolor: var(--_sds-checkbox-group-text-color);\n\t\tfont-family: var(--_sds-checkbox-group-font-family);\n\t\tfont-size: var(--_sds-checkbox-group-font-size);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.sds-checkbox-group--disabled {\n\t\t.sds-checkbox-group__legend,\n\t\t.sds-checkbox-group__help-text,\n\t\tsds-alert {\n\t\t\topacity: var(--_sds-checkbox-group-disabled-opacity);\n\t\t}\n\t}\n\n\tsds-alert {\n\t\t--sds-alert-padding: 0px;\n\t}\n\n\t.sds-checkbox-group__legend {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: var(--sds-spacing-5xs);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tfont-weight: var(--_sds-checkbox-group-legend-font-weight);\n\t\tline-height: var(--_sds-checkbox-group-legend-line-height);\n\t\tmax-width: var(--_sds-checkbox-group-max-line-width);\n\n\t\t+ .sds-checkbox-group__help-text {\n\t\t\tmargin-block-start: var(--_sds-checkbox-group-legend-help-text-gap);\n\t\t}\n\t}\n\n\t.sds-checkbox-group__help-text {\n\t\tcolor: var(--_sds-checkbox-group-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-group-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-group-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-group-help-text-line-height);\n\t\tmargin: 0;\n\t\tmax-width: var(--_sds-checkbox-group-max-line-width);\n\t}\n\n\t.sds-checkbox-group__checkboxes {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-checkbox-group-gap);\n\t\tmargin-top: var(--_sds-checkbox-group-gap);\n\t}\n\n\tsds-alert {\n\t\tmargin-top: var(--_sds-checkbox-group-gap);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-checkbox-group.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-group-gap: var(--sds-checkbox-group-gap, var(--sds-spacing-xs));\n\t\t--_sds-checkbox-group-font-family: var(--sds-checkbox-group-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-group-text-color: var(--sds-checkbox-group-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-checkbox-group-max-line-width: var(--sds-checkbox-group-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-checkbox-group-disabled-opacity: var(--sds-checkbox-group-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-checkbox-group-legend-font-weight: var(--sds-checkbox-group-legend-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-checkbox-group-legend-help-text-gap: var(--sds-checkbox-group-legend-help-text-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-checkbox-group-help-text-color: var(--sds-checkbox-group-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-group-help-text-font-weight: var(--sds-checkbox-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\tdisplay: block;\n\t\tcontain: layout style;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-checkbox-group {\n\t\tborder: 0;\n\t\tcolor: var(--_sds-checkbox-group-text-color);\n\t\tfont-family: var(--_sds-checkbox-group-font-family);\n\t\tfont-size: var(--_sds-checkbox-group-font-size);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.sds-checkbox-group--disabled {\n\t\t.sds-checkbox-group__legend,\n\t\t.sds-checkbox-group__help-text,\n\t\tsds-alert {\n\t\t\topacity: var(--_sds-checkbox-group-disabled-opacity);\n\t\t}\n\t}\n\n\tsds-alert {\n\t\t--sds-alert-padding: 0px;\n\t}\n\n\t.sds-checkbox-group__legend {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: var(--sds-spacing-5xs);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tfont-weight: var(--_sds-checkbox-group-legend-font-weight);\n\t\tline-height: var(--_sds-checkbox-group-legend-line-height);\n\t\tmax-width: var(--_sds-checkbox-group-max-line-width);\n\n\t\t+ .sds-checkbox-group__help-text {\n\t\t\tmargin-block-start: var(--_sds-checkbox-group-legend-help-text-gap);\n\t\t}\n\t}\n\n\t.sds-checkbox-group__help-text {\n\t\tcolor: var(--_sds-checkbox-group-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-group-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-group-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-group-help-text-line-height);\n\t\tmargin: 0;\n\t\tmax-width: var(--_sds-checkbox-group-max-line-width);\n\t}\n\n\t.sds-checkbox-group__checkboxes {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-checkbox-group-gap);\n\t\tmargin-top: var(--_sds-checkbox-group-gap);\n\t}\n\n\tsds-alert {\n\t\tmargin-top: var(--_sds-checkbox-group-gap);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}
package/dist/sds-chip/sds-chip.styles.js CHANGED
@@ -10,7 +10,7 @@ export const styles = css `
10
10
  --_sds-chip-gap: var(--sds-chip-gap, var(--sds-spacing-4xs));
11
11
  --_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));
12
12
 
13
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-border-default));
13
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-border-default, var(--sds-color-main-border-default)));
14
14
  --_sds-chip-border-width: var(--sds-chip-border-width, var(--sds-border-sm));
15
15
  --_sds-chip-border-radius: var(--sds-chip-border-radius, var(--sds-radius-full));
16
16
 
@@ -21,8 +21,8 @@ export const styles = css `
21
21
 
22
22
  --_sds-chip-disabled-opacity: var(--sds-chip-disabled-opacity, var(--sds-color-states-disabled-opacity));
23
23
 
24
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-tinted));
25
- --_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-text-default));
24
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));
25
+ --_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));
26
26
 
27
27
  display: inline-block;
28
28
  box-sizing: border-box;
@@ -35,30 +35,30 @@ export const styles = css `
35
35
  }
36
36
 
37
37
  :host(:hover) {
38
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-hover));
39
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
38
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));
39
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
40
40
  }
41
41
 
42
42
  :host(:active) {
43
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-active));
44
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
43
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));
44
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
45
45
  }
46
46
 
47
47
  :host([checked]) {
48
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-default));
49
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
48
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
49
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
50
50
  --_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
51
51
  }
52
52
 
53
53
  :host([checked]:hover) {
54
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-hover));
54
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
55
55
  --_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
56
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-hover));
56
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
57
57
  }
58
58
 
59
59
  :host([checked]:active) {
60
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-active));
61
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-active));
60
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
61
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
62
62
  }
63
63
 
64
64
  :host([size='sm']) {
@@ -110,20 +110,20 @@ export const styles = css `
110
110
  }
111
111
 
112
112
  &.sds-chip--removable {
113
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-default));
113
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
114
114
  --_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
115
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
115
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
116
116
 
117
117
  &:hover {
118
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-hover));
118
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
119
119
  --_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
120
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-hover));
120
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
121
121
  }
122
122
 
123
123
  &:active {
124
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-active));
124
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
125
125
  --_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
126
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-active));
126
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
127
127
  }
128
128
  }
129
129
 
package/dist/sds-chip/sds-chip.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-chip.styles.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-chip-font-family: var(--sds-chip-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-chip-font-weight: var(--sds-chip-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-md));\n\n\t\t--_sds-chip-gap: var(--sds-chip-gap, var(--sds-spacing-4xs));\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-border-default));\n\t\t--_sds-chip-border-width: var(--sds-chip-border-width, var(--sds-border-sm));\n\t\t--_sds-chip-border-radius: var(--sds-chip-border-radius, var(--sds-radius-full));\n\n\t\t--_sds-chip-focus-outline-width: var(--sds-chip-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-chip-focus-outline-color: var(--sds-chip-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-chip-focus-outline-offset: var(--sds-chip-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-chip-focus-inner-color: var(--sds-chip-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-chip-disabled-opacity: var(--sds-chip-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-tinted));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-text-default));\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-chip-disabled-opacity);\n\t\tcursor: not-allowed;\n\t\tpointer-events: none;\n\t}\n\n\t:host(:hover) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-hover));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));\n\t}\n\n\t:host(:active) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-active));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));\n\t}\n\n\t:host([checked]) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-default));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t}\n\n\t:host([checked]:hover) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-hover));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-hover));\n\t}\n\n\t:host([checked]:active) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-active));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-active));\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-lg));\n\t}\n\n\t.sds-chip {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\theight: var(--_sds-chip-height);\n\t\tgap: var(--_sds-chip-gap);\n\t\tjustify-content: center;\n\t\tpadding-inline: var(--_sds-chip-padding-inline);\n\n\t\tbackground-color: var(--_sds-chip-background-color);\n\t\tborder: var(--_sds-chip-border-width) solid var(--_sds-chip-border-color);\n\t\tborder-radius: var(--_sds-chip-border-radius);\n\n\t\tfont-family: var(--_sds-chip-font-family);\n\t\tfont-size: var(--_sds-chip-font-size);\n\t\tfont-weight: var(--_sds-chip-font-weight);\n\t\tline-height: var(--_sds-chip-line-height);\n\t\ttext-align: center;\n\t\tcolor: var(--_sds-chip-text-color);\n\t\tbox-sizing: border-box;\n\n\t\tuser-select: text;\n\t\tcursor: pointer;\n\n\t\t&:focus-within,\n\t\t&:focus {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-chip-focus-inner-color);\n\t\t\toutline: var(--_sds-chip-focus-outline-width) solid var(--_sds-chip-focus-outline-color);\n\t\t\toutline-offset: var(--_sds-chip-focus-outline-offset);\n\t\t}\n\n\t\t&:has([readonly]) {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&.sds-chip--removable {\n\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-default));\n\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-hover));\n\t\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-hover));\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-active));\n\t\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-active));\n\t\t\t}\n\t\t}\n\n\t\t& input[type='checkbox'] {\n\t\t\tposition: absolute;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\tpadding: 0;\n\t\t\tmargin: -1px;\n\t\t\toverflow: hidden;\n\t\t\tclip-path: inset(50%);\n\t\t\tborder: 0;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-chip.styles.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-chip-font-family: var(--sds-chip-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-chip-font-weight: var(--sds-chip-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-md));\n\n\t\t--_sds-chip-gap: var(--sds-chip-gap, var(--sds-spacing-4xs));\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-border-default, var(--sds-color-main-border-default)));\n\t\t--_sds-chip-border-width: var(--sds-chip-border-width, var(--sds-border-sm));\n\t\t--_sds-chip-border-radius: var(--sds-chip-border-radius, var(--sds-radius-full));\n\n\t\t--_sds-chip-focus-outline-width: var(--sds-chip-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-chip-focus-outline-color: var(--sds-chip-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-chip-focus-outline-offset: var(--sds-chip-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-chip-focus-inner-color: var(--sds-chip-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-chip-disabled-opacity: var(--sds-chip-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-chip-disabled-opacity);\n\t\tcursor: not-allowed;\n\t\tpointer-events: none;\n\t}\n\n\t:host(:hover) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t}\n\n\t:host(:active) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t}\n\n\t:host([checked]) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t}\n\n\t:host([checked]:hover) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t}\n\n\t:host([checked]:active) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-lg));\n\t}\n\n\t.sds-chip {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\theight: var(--_sds-chip-height);\n\t\tgap: var(--_sds-chip-gap);\n\t\tjustify-content: center;\n\t\tpadding-inline: var(--_sds-chip-padding-inline);\n\n\t\tbackground-color: var(--_sds-chip-background-color);\n\t\tborder: var(--_sds-chip-border-width) solid var(--_sds-chip-border-color);\n\t\tborder-radius: var(--_sds-chip-border-radius);\n\n\t\tfont-family: var(--_sds-chip-font-family);\n\t\tfont-size: var(--_sds-chip-font-size);\n\t\tfont-weight: var(--_sds-chip-font-weight);\n\t\tline-height: var(--_sds-chip-line-height);\n\t\ttext-align: center;\n\t\tcolor: var(--_sds-chip-text-color);\n\t\tbox-sizing: border-box;\n\n\t\tuser-select: text;\n\t\tcursor: pointer;\n\n\t\t&:focus-within,\n\t\t&:focus {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-chip-focus-inner-color);\n\t\t\toutline: var(--_sds-chip-focus-outline-width) solid var(--_sds-chip-focus-outline-color);\n\t\t\toutline-offset: var(--_sds-chip-focus-outline-offset);\n\t\t}\n\n\t\t&:has([readonly]) {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&.sds-chip--removable {\n\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t}\n\t\t}\n\n\t\t& input[type='checkbox'] {\n\t\t\tposition: absolute;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\tpadding: 0;\n\t\t\tmargin: -1px;\n\t\t\toverflow: hidden;\n\t\t\tclip-path: inset(50%);\n\t\t\tborder: 0;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n`;\n"]}
package/dist/sds-radio/sds-radio.d.ts CHANGED
@@ -13,33 +13,46 @@ export interface SDSRadioProps {
13
13
  readonly?: boolean;
14
14
  size?: RadioSize;
15
15
  'help-text'?: string;
16
+ parentRequestDisabled?: boolean;
16
17
  }
17
18
  export declare class SDSRadio extends LitElement {
18
19
  static styles: import("lit").CSSResult[];
19
20
  static formAssociated: boolean;
20
21
  readonly internals: ElementInternals;
21
- disabled: SDSRadioProps['disabled'];
22
- required: SDSRadioProps['disabled'];
22
+ required: SDSRadioProps['required'];
23
23
  label: SDSRadioProps['label'];
24
24
  hideLabel: SDSRadioProps['hide-label'];
25
25
  name?: SDSRadioProps['name'];
26
26
  value: SDSRadioProps['value'];
27
- checked: SDSRadioProps['disabled'];
27
+ checked: SDSRadioProps['checked'];
28
28
  error: SDSRadioProps['error'];
29
29
  readOnly: SDSRadioProps['readonly'];
30
30
  size: SDSRadioProps['size'];
31
31
  helpText?: SDSRadioProps['help-text'];
32
+ get disabled(): SDSRadioProps['disabled'];
33
+ set disabled(value: SDSRadioProps['disabled']);
34
+ /**
35
+ * parentRequestDisabled:
36
+ * - Set by SDSRadioGroup to request disabled/enabled.
37
+ * - Only applied if SDSRadio is NOT self-controlled.
38
+ */
39
+ get parentRequestDisabled(): SDSRadioProps['parentRequestDisabled'];
40
+ set parentRequestDisabled(value: SDSRadioProps['parentRequestDisabled']);
32
41
  control: HTMLInputElement;
42
+ private _disabled;
43
+ private _disabledIsAuthorControlled;
44
+ private _settingDisabledFromParent;
45
+ private _parentRequestDisabled;
33
46
  private _initialChecked;
34
47
  constructor();
35
48
  connectedCallback(): void;
36
49
  disconnectedCallback(): void;
37
50
  firstUpdated(_changedProperties: PropertyValues): void;
51
+ updated(changedProperties: Map<string | number | symbol, unknown>): void;
38
52
  private _getGroupRadios;
39
53
  private _updateGroupValidation;
40
54
  private readonly _handleKeydown;
41
55
  formResetCallback(): void;
42
- updated(changedProperties: Map<string | number | symbol, unknown>): void;
43
56
  private _uncheckSiblings;
44
57
  private readonly _handleChange;
45
58
  private readonly _handleFocus;
package/dist/sds-radio/sds-radio.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-radio.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAMhE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,SAAS,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAExD,MAAM,WAAW,aAAa;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,qBACa,QAAS,SAAQ,UAAU;IAEvC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAEA,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAS;IAC5C,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAS;IAC7C,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAM;IACT,SAAS,EAAE,aAAa,CAAC,YAAY,CAAC,CAAS;IACzE,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5C,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAQ;IACrB,OAAO,EAAE,aAAa,CAAC,UAAU,CAAC,CAAS;IAC3C,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAS;IACf,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAS;IACpE,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAQ;IAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAEvE,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IASjB,oBAAoB;IAKpB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAK/D,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,sBAAsB;IAc9B,OAAO,CAAC,QAAQ,CAAC,cAAc,CA4B7B;IAEF,iBAAiB;IAOR,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAiB1E,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAc5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,IAAI,IAAI,2BAEP;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAIzB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIxC,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKpC,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CAiCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}
1
+ {"version":3,"file":"sds-radio.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"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"}
package/dist/sds-radio/sds-radio.js CHANGED
@@ -11,9 +11,43 @@ import { classMap } from 'lit/directives/class-map.js';
11
11
  import { guardedCustomElement } from '../utils/guarded-custom-element';
12
12
  import { styles } from './sds-radio.styles';
13
13
  let SDSRadio = class SDSRadio extends LitElement {
14
+ get disabled() {
15
+ return this._disabled;
16
+ }
17
+ set disabled(value) {
18
+ const newVal = value ?? false;
19
+ const oldVal = this._disabled;
20
+ if (oldVal === newVal)
21
+ return;
22
+ this._disabled = newVal;
23
+ this.requestUpdate('disabled', oldVal);
24
+ if (!this._settingDisabledFromParent) {
25
+ this._disabledIsAuthorControlled = newVal;
26
+ }
27
+ }
28
+ /**
29
+ * parentRequestDisabled:
30
+ * - Set by SDSRadioGroup to request disabled/enabled.
31
+ * - Only applied if SDSRadio is NOT self-controlled.
32
+ */
33
+ get parentRequestDisabled() {
34
+ return this._parentRequestDisabled;
35
+ }
36
+ set parentRequestDisabled(value) {
37
+ const newVal = value ?? false;
38
+ const oldVal = this._parentRequestDisabled;
39
+ if (oldVal === newVal)
40
+ return;
41
+ this._parentRequestDisabled = newVal;
42
+ this.requestUpdate('parentRequestDisabled', oldVal);
43
+ if (this._disabledIsAuthorControlled)
44
+ return;
45
+ this._settingDisabledFromParent = true;
46
+ this.disabled = newVal;
47
+ this._settingDisabledFromParent = false;
48
+ }
14
49
  constructor() {
15
50
  super();
16
- this.disabled = false;
17
51
  this.required = false;
18
52
  this.label = '';
19
53
  this.hideLabel = false;
@@ -22,6 +56,10 @@ let SDSRadio = class SDSRadio extends LitElement {
22
56
  this.error = false;
23
57
  this.readOnly = false;
24
58
  this.size = 'md';
59
+ this._disabled = false;
60
+ this._disabledIsAuthorControlled = false;
61
+ this._settingDisabledFromParent = false;
62
+ this._parentRequestDisabled = false;
25
63
  this._initialChecked = false;
26
64
  this._handleKeydown = (event) => {
27
65
  if (!this.name || this.disabled || this.readOnly)
@@ -90,6 +128,27 @@ let SDSRadio = class SDSRadio extends LitElement {
90
128
  super.firstUpdated(_changedProperties);
91
129
  this._updateGroupValidation();
92
130
  }
131
+ updated(changedProperties) {
132
+ super.updated(changedProperties);
133
+ if (changedProperties.has('checked')) {
134
+ if (this.checked) {
135
+ this._uncheckSiblings();
136
+ this.internals.setFormValue(this.value ?? null);
137
+ }
138
+ else {
139
+ this.internals.setFormValue(null);
140
+ }
141
+ this._updateGroupValidation();
142
+ }
143
+ if (changedProperties.has('required') && this.control) {
144
+ this.control.required = this.required ?? false;
145
+ }
146
+ if (!this._disabledIsAuthorControlled && this.disabled !== this._parentRequestDisabled) {
147
+ this._settingDisabledFromParent = true;
148
+ this.disabled = this._parentRequestDisabled ?? false;
149
+ this._settingDisabledFromParent = false;
150
+ }
151
+ }
93
152
  _getGroupRadios() {
94
153
  if (!this.name)
95
154
  return [this];
@@ -118,22 +177,6 @@ let SDSRadio = class SDSRadio extends LitElement {
118
177
  this.internals.setFormValue(this.checked ? this.value ?? 'on' : null);
119
178
  this._updateGroupValidation();
120
179
  }
121
- updated(changedProperties) {
122
- super.updated(changedProperties);
123
- if (changedProperties.has('checked')) {
124
- if (this.checked) {
125
- this._uncheckSiblings();
126
- this.internals.setFormValue(this.value ?? null);
127
- }
128
- else {
129
- this.internals.setFormValue(null);
130
- }
131
- this._updateGroupValidation();
132
- }
133
- if (changedProperties.has('required') && this.control) {
134
- this.control.required = this.required ?? false;
135
- }
136
- }
137
180
  _uncheckSiblings() {
138
181
  if (!this.name)
139
182
  return;
@@ -170,7 +213,9 @@ let SDSRadio = class SDSRadio extends LitElement {
170
213
  this.internals.setValidity({ customError: !!message }, message);
171
214
  }
172
215
  formDisabledCallback(disabled) {
216
+ this._settingDisabledFromParent = true;
173
217
  this.disabled = disabled;
218
+ this._settingDisabledFromParent = false;
174
219
  if (this.control)
175
220
  this.control.disabled = disabled;
176
221
  }
@@ -204,7 +249,8 @@ let SDSRadio = class SDSRadio extends LitElement {
204
249
  value="${ifDefined(this.value)}"
205
250
  ?checked="${this.checked ?? false}"
206
251
  .checked="${this.checked ?? false}"
207
- ?disabled="${this.disabled}"
252
+ ?disabled="${this.disabled ?? false}"
253
+ .disabled="${this.disabled ?? false}"
208
254
  ?required="${this.required}"
209
255
  ?readonly="${this.readOnly}"
210
256
  @change="${this._handleChange}"
@@ -221,9 +267,6 @@ let SDSRadio = class SDSRadio extends LitElement {
221
267
  // Styling
222
268
  SDSRadio.styles = [styles];
223
269
  SDSRadio.formAssociated = true;
224
- __decorate([
225
- property({ type: Boolean, reflect: true })
226
- ], SDSRadio.prototype, "disabled", void 0);
227
270
  __decorate([
228
271
  property({ type: Boolean, reflect: true })
229
272
  ], SDSRadio.prototype, "required", void 0);
@@ -254,6 +297,18 @@ __decorate([
254
297
  __decorate([
255
298
  property({ type: String, attribute: 'help-text' })
256
299
  ], SDSRadio.prototype, "helpText", void 0);
300
+ __decorate([
301
+ property({ type: Boolean, reflect: true })
302
+ /**
303
+ * disabled:
304
+ * - If set directly (prop/attr), this radio becomes "self-controlled"
305
+ * and ignores parentRequestDisabled.
306
+ * - If not self-controlled, this follows parentRequestDisabled (group/form).
307
+ */
308
+ ], SDSRadio.prototype, "disabled", null);
309
+ __decorate([
310
+ property({ type: Boolean, attribute: false })
311
+ ], SDSRadio.prototype, "parentRequestDisabled", null);
257
312
  __decorate([
258
313
  query('#control')
259
314
  ], SDSRadio.prototype, "control", void 0);
package/dist/sds-radio/sds-radio.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-radio.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-radio.styles';\nimport { SDS_SIZES } from '../types';\n\ntype RadioSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSRadioProps {\n\tdisabled?: boolean;\n\trequired?: boolean;\n\tlabel?: string;\n\t'hide-label'?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\terror?: boolean;\n\treadonly?: boolean;\n\tsize?: RadioSize;\n\t'help-text'?: string;\n}\n\n@guardedCustomElement('sds-radio')\nexport class SDSRadio extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: Boolean, reflect: true }) disabled: SDSRadioProps['disabled'] = false;\n\t@property({ type: Boolean, reflect: true }) required: SDSRadioProps['disabled'] = false;\n\t@property({ type: String, reflect: true }) label: SDSRadioProps['label'] = '';\n\t@property({ type: Boolean, reflect: true, attribute: 'hide-label' }) hideLabel: SDSRadioProps['hide-label'] = false;\n\t@property({ type: String, reflect: true }) name?: SDSRadioProps['name'];\n\t@property({ type: String }) value: SDSRadioProps['value'] = 'on';\n\t@property({ type: Boolean, reflect: true }) checked: SDSRadioProps['disabled'] = false;\n\t@property({ type: Boolean, reflect: true }) error: SDSRadioProps['error'] = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: SDSRadioProps['readonly'] = false;\n\t@property({ type: String, reflect: true }) size: SDSRadioProps['size'] = 'md';\n\t@property({ type: String, attribute: 'help-text' }) helpText?: SDSRadioProps['help-text'];\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.internals.role = 'radio';\n\t\tif (!this._initialChecked) {\n\t\t\tthis._initialChecked = this.checked ?? false;\n\t\t}\n\t\tthis.addEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tthis.removeEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tthis._updateGroupValidation();\n\t}\n\n\tprivate _getGroupRadios(): SDSRadio[] {\n\t\tif (!this.name) return [this];\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radioGroup = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\treturn radioGroup;\n\t}\n\n\tprivate _updateGroupValidation() {\n\t\tconst group: Array<SDSRadio> = this._getGroupRadios();\n\t\tconst isAnyChecked = group.some((radio) => radio.checked);\n\t\tconst isAnyRequired = group.some((radio) => radio.required);\n\t\tgroup.forEach((radio) => {\n\t\t\tif (!radio.control) return;\n\t\t\tif (isAnyRequired) {\n\t\t\t\tradio.internals.setValidity(isAnyChecked ? {} : { valueMissing: true }, isAnyChecked ? '' : radio.control.validationMessage, radio.control);\n\t\t\t} else {\n\t\t\t\tradio.internals.setValidity({});\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate readonly _handleKeydown = (event: KeyboardEvent) => {\n\t\tif (!this.name || this.disabled || this.readOnly) return;\n\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radios = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\tconst currentIndex = radios.indexOf(this);\n\n\t\tif (currentIndex === -1) return;\n\n\t\tlet targetIndex: number | null = null;\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowUp':\n\t\t\tcase 'ArrowLeft':\n\t\t\t\ttargetIndex = currentIndex > 0 ? currentIndex - 1 : radios.length - 1;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\tcase 'ArrowRight':\n\t\t\t\ttargetIndex = currentIndex < radios.length - 1 ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\tconst targetRadio = radios[targetIndex];\n\t\ttargetRadio?.focus();\n\t\ttargetRadio?.click();\n\t\tevent.preventDefault();\n\t};\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.control.checked = this._initialChecked;\n\t\tthis.internals.setFormValue(this.checked ? this.value ?? 'on' : null);\n\t\tthis._updateGroupValidation();\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('checked')) {\n\t\t\tif (this.checked) {\n\t\t\t\tthis._uncheckSiblings();\n\t\t\t\tthis.internals.setFormValue(this.value ?? null);\n\t\t\t} else {\n\t\t\t\tthis.internals.setFormValue(null);\n\t\t\t}\n\t\t\tthis._updateGroupValidation();\n\t\t}\n\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required ?? false;\n\t\t}\n\t}\n\n\tprivate _uncheckSiblings() {\n\t\tif (!this.name) return;\n\t\tconst radios: Array<SDSRadio> = this._getGroupRadios();\n\n\t\tfor (const radio of radios) {\n\t\t\tif (radio !== this && radio.checked) {\n\t\t\t\tradio.checked = false;\n\t\t\t\tradio.internals.setFormValue(null);\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tif (this.disabled || this.readOnly) {\n\t\t\t(event.target as HTMLInputElement).checked = this.checked ?? false;\n\t\t\tevent.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst elem = event.target as HTMLInputElement;\n\t\tthis.checked = elem.checked;\n\t\tif (this.checked) {\n\t\t\tthis._uncheckSiblings();\n\t\t}\n\t\tthis._updateGroupValidation();\n\t\tthis.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleFocus = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tget form() {\n\t\treturn this.internals.form;\n\t}\n\n\tget type(): string {\n\t\treturn 'radio';\n\t}\n\n\tget validity() {\n\t\treturn this.internals.validity;\n\t}\n\n\tget validationMessage() {\n\t\treturn this.internals.validationMessage;\n\t}\n\n\tget willValidate() {\n\t\treturn this.internals.willValidate;\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.internals.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.internals.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.internals.setValidity({ customError: !!message }, message);\n\t}\n\n\tformDisabledCallback(disabled: boolean): void {\n\t\tthis.disabled = disabled;\n\t\tif (this.control) this.control.disabled = disabled;\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled && !this.readOnly) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst radioClasses = {\n\t\t\t'sds-radio': true,\n\t\t\t'sds-radio--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-radio__input': true,\n\t\t\t'sds-radio__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(radioClasses)}\">\n\t\t\t\t<input\n\t\t\t\t\tid=\"control\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t?checked=\"${this.checked ?? false}\"\n\t\t\t\t\t.checked=\"${this.checked ?? false}\"\n\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t/>\n\t\t\t\t${this.label ? html`<label class=\"sds-radio__label\" for=\"control\">${this.label}</label>` : nothing}\n\t\t\t\t${this.helpText ? html`<span class=\"sds-radio__help-text\">${this.helpText}</span>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-radio': SDSRadio;\n\t}\n}\n"]}
1
+ {"version":3,"file":"sds-radio.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-radio.styles';\nimport { SDS_SIZES } from '../types';\n\ntype RadioSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSRadioProps {\n\tdisabled?: boolean;\n\trequired?: boolean;\n\tlabel?: string;\n\t'hide-label'?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\terror?: boolean;\n\treadonly?: boolean;\n\tsize?: RadioSize;\n\t'help-text'?: string;\n\tparentRequestDisabled?: boolean;\n}\n\n@guardedCustomElement('sds-radio')\nexport class SDSRadio extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: Boolean, reflect: true }) required: SDSRadioProps['required'] = false;\n\t@property({ type: String, reflect: true }) label: SDSRadioProps['label'] = '';\n\t@property({ type: Boolean, reflect: true, attribute: 'hide-label' }) hideLabel: SDSRadioProps['hide-label'] = false;\n\t@property({ type: String, reflect: true }) name?: SDSRadioProps['name'];\n\t@property({ type: String }) value: SDSRadioProps['value'] = 'on';\n\t@property({ type: Boolean, reflect: true }) checked: SDSRadioProps['checked'] = false;\n\t@property({ type: Boolean, reflect: true }) error: SDSRadioProps['error'] = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: SDSRadioProps['readonly'] = false;\n\t@property({ type: String, reflect: true }) size: SDSRadioProps['size'] = 'md';\n\t@property({ type: String, attribute: 'help-text' }) helpText?: SDSRadioProps['help-text'];\n\t@property({ type: Boolean, reflect: true })\n\n\t/**\n\t * disabled:\n\t * - If set directly (prop/attr), this radio becomes \"self-controlled\"\n\t * and ignores parentRequestDisabled.\n\t * - If not self-controlled, this follows parentRequestDisabled (group/form).\n\t */\n\tget disabled(): SDSRadioProps['disabled'] {\n\t\treturn this._disabled;\n\t}\n\tset disabled(value: SDSRadioProps['disabled']) {\n\t\tconst newVal = value ?? false;\n\t\tconst oldVal = this._disabled;\n\n\t\tif (oldVal === newVal) return;\n\n\t\tthis._disabled = newVal;\n\t\tthis.requestUpdate('disabled', oldVal);\n\n\t\tif (!this._settingDisabledFromParent) {\n\t\t\tthis._disabledIsAuthorControlled = newVal;\n\t\t}\n\t}\n\n\t/**\n\t * parentRequestDisabled:\n\t * - Set by SDSRadioGroup to request disabled/enabled.\n\t * - Only applied if SDSRadio is NOT self-controlled.\n\t */\n\t@property({ type: Boolean, attribute: false })\n\tget parentRequestDisabled(): SDSRadioProps['parentRequestDisabled'] {\n\t\treturn this._parentRequestDisabled;\n\t}\n\tset parentRequestDisabled(value: SDSRadioProps['parentRequestDisabled']) {\n\t\tconst newVal = value ?? false;\n\t\tconst oldVal = this._parentRequestDisabled;\n\n\t\tif (oldVal === newVal) return;\n\n\t\tthis._parentRequestDisabled = newVal;\n\t\tthis.requestUpdate('parentRequestDisabled', oldVal);\n\n\t\tif (this._disabledIsAuthorControlled) return;\n\n\t\tthis._settingDisabledFromParent = true;\n\t\tthis.disabled = newVal;\n\t\tthis._settingDisabledFromParent = false;\n\t}\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _disabled: SDSRadioProps['disabled'] = false;\n\tprivate _disabledIsAuthorControlled: boolean = false;\n\tprivate _settingDisabledFromParent: boolean = false;\n\tprivate _parentRequestDisabled: SDSRadioProps['parentRequestDisabled'] = false;\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.internals.role = 'radio';\n\t\tif (!this._initialChecked) {\n\t\t\tthis._initialChecked = this.checked ?? false;\n\t\t}\n\t\tthis.addEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tthis.removeEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tthis._updateGroupValidation();\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\n\t\tif (changedProperties.has('checked')) {\n\t\t\tif (this.checked) {\n\t\t\t\tthis._uncheckSiblings();\n\t\t\t\tthis.internals.setFormValue(this.value ?? null);\n\t\t\t} else {\n\t\t\t\tthis.internals.setFormValue(null);\n\t\t\t}\n\t\t\tthis._updateGroupValidation();\n\t\t}\n\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required ?? false;\n\t\t}\n\n\t\tif (!this._disabledIsAuthorControlled && this.disabled !== this._parentRequestDisabled) {\n\t\t\tthis._settingDisabledFromParent = true;\n\t\t\tthis.disabled = this._parentRequestDisabled ?? false;\n\t\t\tthis._settingDisabledFromParent = false;\n\t\t}\n\t}\n\n\tprivate _getGroupRadios(): SDSRadio[] {\n\t\tif (!this.name) return [this];\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radioGroup = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\treturn radioGroup;\n\t}\n\n\tprivate _updateGroupValidation() {\n\t\tconst group: Array<SDSRadio> = this._getGroupRadios();\n\t\tconst isAnyChecked = group.some((radio) => radio.checked);\n\t\tconst isAnyRequired = group.some((radio) => radio.required);\n\t\tgroup.forEach((radio) => {\n\t\t\tif (!radio.control) return;\n\t\t\tif (isAnyRequired) {\n\t\t\t\tradio.internals.setValidity(isAnyChecked ? {} : { valueMissing: true }, isAnyChecked ? '' : radio.control.validationMessage, radio.control);\n\t\t\t} else {\n\t\t\t\tradio.internals.setValidity({});\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate readonly _handleKeydown = (event: KeyboardEvent) => {\n\t\tif (!this.name || this.disabled || this.readOnly) return;\n\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radios = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\tconst currentIndex = radios.indexOf(this);\n\n\t\tif (currentIndex === -1) return;\n\n\t\tlet targetIndex: number | null = null;\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowUp':\n\t\t\tcase 'ArrowLeft':\n\t\t\t\ttargetIndex = currentIndex > 0 ? currentIndex - 1 : radios.length - 1;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\tcase 'ArrowRight':\n\t\t\t\ttargetIndex = currentIndex < radios.length - 1 ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\tconst targetRadio = radios[targetIndex];\n\t\ttargetRadio?.focus();\n\t\ttargetRadio?.click();\n\t\tevent.preventDefault();\n\t};\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.control.checked = this._initialChecked;\n\t\tthis.internals.setFormValue(this.checked ? this.value ?? 'on' : null);\n\t\tthis._updateGroupValidation();\n\t}\n\n\tprivate _uncheckSiblings() {\n\t\tif (!this.name) return;\n\t\tconst radios: Array<SDSRadio> = this._getGroupRadios();\n\n\t\tfor (const radio of radios) {\n\t\t\tif (radio !== this && radio.checked) {\n\t\t\t\tradio.checked = false;\n\t\t\t\tradio.internals.setFormValue(null);\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tif (this.disabled || this.readOnly) {\n\t\t\t(event.target as HTMLInputElement).checked = this.checked ?? false;\n\t\t\tevent.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst elem = event.target as HTMLInputElement;\n\t\tthis.checked = elem.checked;\n\t\tif (this.checked) {\n\t\t\tthis._uncheckSiblings();\n\t\t}\n\t\tthis._updateGroupValidation();\n\t\tthis.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleFocus = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tget form() {\n\t\treturn this.internals.form;\n\t}\n\n\tget type(): string {\n\t\treturn 'radio';\n\t}\n\n\tget validity() {\n\t\treturn this.internals.validity;\n\t}\n\n\tget validationMessage() {\n\t\treturn this.internals.validationMessage;\n\t}\n\n\tget willValidate() {\n\t\treturn this.internals.willValidate;\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.internals.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.internals.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.internals.setValidity({ customError: !!message }, message);\n\t}\n\n\tformDisabledCallback(disabled: boolean): void {\n\t\tthis._settingDisabledFromParent = true;\n\t\tthis.disabled = disabled;\n\t\tthis._settingDisabledFromParent = false;\n\n\t\tif (this.control) this.control.disabled = disabled;\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled && !this.readOnly) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst radioClasses = {\n\t\t\t'sds-radio': true,\n\t\t\t'sds-radio--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-radio__input': true,\n\t\t\t'sds-radio__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(radioClasses)}\">\n\t\t\t\t<input\n\t\t\t\t\tid=\"control\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t?checked=\"${this.checked ?? false}\"\n\t\t\t\t\t.checked=\"${this.checked ?? false}\"\n\t\t\t\t\t?disabled=\"${this.disabled ?? false}\"\n\t\t\t\t\t.disabled=\"${this.disabled ?? false}\"\n\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t/>\n\t\t\t\t${this.label ? html`<label class=\"sds-radio__label\" for=\"control\">${this.label}</label>` : nothing}\n\t\t\t\t${this.helpText ? html`<span class=\"sds-radio__help-text\">${this.helpText}</span>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-radio': SDSRadio;\n\t}\n}\n"]}
package/dist/sds-radio/sds-radio.styles.js CHANGED
@@ -9,16 +9,16 @@ export const styles = css `
9
9
  --_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-md));
10
10
  --_sds-radio-label-font-weight: var(--sds-radio-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));
11
11
  --_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-md));
12
- --_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-neutral-text-default));
12
+ --_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
13
13
 
14
- --_sds-radio-help-text-color: var(--sds-radio-help-text-color, var(--sds-color-neutral-text-subtle));
14
+ --_sds-radio-help-text-color: var(--sds-radio-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
15
15
  --_sds-radio-help-text-font-size: var(--sds-radio-help-text-font-size, var(--sds-components-font-size-content-md));
16
16
  --_sds-radio-help-text-font-weight: var(--sds-radio-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));
17
17
  --_sds-radio-help-text-line-height: var(--sds-radio-help-text-line-height, var(--sds-components-line-height-tall-content-md));
18
18
 
19
19
  --_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-md));
20
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));
21
- --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-neutral-border-default));
20
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
21
+ --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));
22
22
  --_sds-radio-input-border-width: var(--sds-radio-input-border-width, var(--sds-border-md));
23
23
  --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, transparent);
24
24
  --_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 4.5px);
@@ -49,7 +49,7 @@ export const styles = css `
49
49
  }
50
50
 
51
51
  .sds-radio--error {
52
- --_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-alert-danger-text-default));
52
+ --_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-text-default, var(--sds-color-alert-danger-text-default)));
53
53
  }
54
54
 
55
55
  .sds-radio__help-text {
@@ -91,8 +91,8 @@ export const styles = css `
91
91
  grid-row: 1;
92
92
 
93
93
  &[readonly] {
94
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-tinted));
95
- --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-neutral-border-subtle));
94
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));
95
+ --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));
96
96
  cursor: default;
97
97
  pointer-events: none;
98
98
 
@@ -103,38 +103,38 @@ export const styles = css `
103
103
  }
104
104
 
105
105
  &[checked] {
106
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-main-action-default));
107
- --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-default));
108
- --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-main-action-contrast-default));
106
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
107
+ --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
108
+ --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));
109
109
 
110
110
  &[readonly] {
111
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-tinted));
112
- --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-neutral-border-subtle));
113
- --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-action-default));
111
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));
112
+ --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));
113
+ --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-action-default, var(--sds-color-neutral-action-default)));
114
114
  cursor: default;
115
115
  pointer-events: none;
116
116
  }
117
117
  }
118
118
 
119
119
  &:hover {
120
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));
121
- --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-hover));
120
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
121
+ --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
122
122
 
123
123
  &[checked] {
124
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-main-action-hover));
125
- --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-hover));
126
- --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-surface-default));
124
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
125
+ --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
126
+ --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
127
127
  }
128
128
  }
129
129
 
130
130
  &:active:not([readonly], [checked]) {
131
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));
132
- --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-active));
131
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
132
+ --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
133
133
 
134
134
  &[checked] {
135
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-main-action-active));
136
- --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-active));
137
- --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-surface-default));
135
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
136
+ --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
137
+ --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
138
138
  }
139
139
  }
140
140
 
@@ -152,24 +152,24 @@ export const styles = css `
152
152
  }
153
153
 
154
154
  &:hover {
155
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));
155
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
156
156
  --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-hover));
157
157
 
158
158
  &[checked] {
159
159
  --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-hover));
160
160
  --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-hover));
161
- --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-surface-default));
161
+ --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
162
162
  }
163
163
  }
164
164
 
165
165
  &:active:not([readonly], [checked]) {
166
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));
166
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
167
167
  --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-active));
168
168
 
169
169
  &[checked] {
170
170
  --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-active));
171
171
  --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-active));
172
- --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-surface-default));
172
+ --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
173
173
  }
174
174
  }
175
175
  }