@politiet/sheriff-web-components 2.7.2 → 2.8.0

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 (61) hide show
  1. package/custom-elements.json +79 -7
  2. package/dist/mixins/sds-dialog-target-mixin.d.ts.map +1 -1
  3. package/dist/mixins/sds-dialog-target-mixin.js +4 -2
  4. package/dist/mixins/sds-dialog-target-mixin.js.map +1 -1
  5. package/dist/mixins/sds-form-control-mixin.d.ts +1 -0
  6. package/dist/mixins/sds-form-control-mixin.d.ts.map +1 -1
  7. package/dist/mixins/sds-form-control-mixin.js +7 -0
  8. package/dist/mixins/sds-form-control-mixin.js.map +1 -1
  9. package/dist/sds-button/sds-button.component.d.ts +2 -0
  10. package/dist/sds-button/sds-button.component.d.ts.map +1 -1
  11. package/dist/sds-button/sds-button.component.js +5 -1
  12. package/dist/sds-button/sds-button.component.js.map +1 -1
  13. package/dist/sds-button/sds-button.styles.d.ts.map +1 -1
  14. package/dist/sds-button/sds-button.styles.js +87 -3
  15. package/dist/sds-button/sds-button.styles.js.map +1 -1
  16. package/dist/sds-card/sds-card.styles.d.ts.map +1 -1
  17. package/dist/sds-card/sds-card.styles.js +9 -3
  18. package/dist/sds-card/sds-card.styles.js.map +1 -1
  19. package/dist/sds-checkbox/sds-checkbox.styles.d.ts.map +1 -1
  20. package/dist/sds-checkbox/sds-checkbox.styles.js +4 -2
  21. package/dist/sds-checkbox/sds-checkbox.styles.js.map +1 -1
  22. package/dist/sds-details/sds-details.styles.js +6 -6
  23. package/dist/sds-details/sds-details.styles.js.map +1 -1
  24. package/dist/sds-dialog/sds-dialog.styles.d.ts.map +1 -1
  25. package/dist/sds-dialog/sds-dialog.styles.js +8 -2
  26. package/dist/sds-dialog/sds-dialog.styles.js.map +1 -1
  27. package/dist/sds-radio/sds-radio.styles.d.ts.map +1 -1
  28. package/dist/sds-radio/sds-radio.styles.js +10 -3
  29. package/dist/sds-radio/sds-radio.styles.js.map +1 -1
  30. package/dist/sds-select/sds-select.component.d.ts +1 -1
  31. package/dist/sds-select/sds-select.component.d.ts.map +1 -1
  32. package/dist/sds-select/sds-select.component.js +2 -1
  33. package/dist/sds-select/sds-select.component.js.map +1 -1
  34. package/dist/sds-select/sds-select.styles.d.ts.map +1 -1
  35. package/dist/sds-select/sds-select.styles.js +3 -2
  36. package/dist/sds-select/sds-select.styles.js.map +1 -1
  37. package/dist/sds-stepper-step/sds-stepper-step.styles.d.ts.map +1 -1
  38. package/dist/sds-stepper-step/sds-stepper-step.styles.js +4 -3
  39. package/dist/sds-stepper-step/sds-stepper-step.styles.js.map +1 -1
  40. package/dist/sds-switch/sds-switch.styles.js +6 -6
  41. package/dist/sds-switch/sds-switch.styles.js.map +1 -1
  42. package/dist/sds-text/sds-text.styles.d.ts.map +1 -1
  43. package/dist/sds-text/sds-text.styles.js +2 -1
  44. package/dist/sds-text/sds-text.styles.js.map +1 -1
  45. package/dist/sds-textarea/sds-textarea.d.ts +1 -1
  46. package/dist/sds-textarea/sds-textarea.d.ts.map +1 -1
  47. package/dist/sds-textarea/sds-textarea.js +6 -1
  48. package/dist/sds-textarea/sds-textarea.js.map +1 -1
  49. package/dist/sds-textarea/sds-textarea.styles.d.ts.map +1 -1
  50. package/dist/sds-textarea/sds-textarea.styles.js +11 -3
  51. package/dist/sds-textarea/sds-textarea.styles.js.map +1 -1
  52. package/dist/sds-textfield/sds-textfield.d.ts +5 -1
  53. package/dist/sds-textfield/sds-textfield.d.ts.map +1 -1
  54. package/dist/sds-textfield/sds-textfield.js +27 -10
  55. package/dist/sds-textfield/sds-textfield.js.map +1 -1
  56. package/dist/sds-textfield/sds-textfield.styles.d.ts.map +1 -1
  57. package/dist/sds-textfield/sds-textfield.styles.js +4 -3
  58. package/dist/sds-textfield/sds-textfield.styles.js.map +1 -1
  59. package/dist/sheriff-web-components.js +276 -157
  60. package/package.json +2 -2
  61. package/web-types.json +98 -2
package/dist/sds-card/sds-card.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-card.styles.js","sourceRoot":"","sources":["../../src/sds-card/sds-card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));\n\t\t--_sds-card-border-radius: var(--sds-card-border-radius, var(--sds-radius-md));\n\t\t--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-xs));\n\t\t--_sds-card-gap: var(--sds-card-gap, var(--sds-spacing-zero) var(--sds-spacing-xs));\n\t\t--_sds-card-font-family: var(--sds-card-font-family, var(--sds-typography-font-family));\n\t\t--_sds-card-focus-color: var(--sds-card-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-card-focus-inner-color: var(--sds-card-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-card-focus-spacing: var(--sds-card-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-card-icon-display: var(--sds-card-icon-display, block);\n\n\t\t--_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-mobile-font-size));\n\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-mobile-font-weight));\n\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-mobile-line-height));\n\n\t\t--_sds-card-text-color: var(--sds-card-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\n\t\tdisplay: block;\n\t}\n\n\t.sds-card__content {\n\t\tbackground-color: var(--_sds-card-background-color);\n\t\tborder-radius: var(--_sds-card-border-radius);\n\t\tfont-family: var(--_sds-card-font-family);\n\t\tpadding: var(--_sds-card-padding);\n\t\tgap: var(--_sds-card-gap);\n\t\ttext-decoration: none;\n\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t\tgrid-template-rows: auto auto;\n\t\tgrid-template-areas:\n\t\t\t\"heading icon\"\n\t\t\t\"text text\";\n\n\t\t&:hover {\n\t\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-card-focus-inner-color);\n\t\t\toutline: var(--_sds-card-focus-spacing) solid var(--_sds-card-focus-color);\n\t\t\toutline-offset: var(--_sds-card-focus-spacing);\n\t\t}\n\t}\n\n\t.sds-card__icon {\n\t\tcolor: var(--_sds-card-icon-color);\n\t\tmargin-block-start: var(--sds-spacing-5xs);\n\t\tmargin-inline-start: auto;\n\t\tdisplay: var(--_sds-card-icon-display);\n\t\tgrid-area: icon;\n\t}\n\n\tslot[name=\"heading\"] {\n\t\tgrid-area: heading;\n\t\toverflow-wrap: anywhere;\n\t}\n\n\tslot[name=\"text\"] {\n\t\tgrid-area: text;\n\t}\n\n\t::slotted(p) {\n\t\tcolor: var(--_sds-card-text-color) !important;\n\t\tdisplay: none !important;\n\t\tfont-size: var(--_sds-card-text-font-size) !important;\n\t\tline-height: var(--_sds-card-text-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t\ttext-wrap: pretty !important;\n\t}\n\n\t::slotted(h2),\n\t::slotted(h3),\n\t::slotted(h4),\n\t::slotted(h5),\n\t::slotted(h6) {\n\t\tcolor: var(--_sds-card-heading-color) !important;\n\t\tfont-size: var(--_sds-card-heading-font-size) !important;\n\t\tfont-weight: var(--_sds-card-heading-font-weight) !important;\n\t\tline-height: var(--_sds-card-heading-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t\ttext-wrap: pretty !important;\n\t}\n\n\t@media (min-width: 640px) {\n\t\t:host {\n\t\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-tablet-font-size));\n\t\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-tablet-font-weight));\n\t\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-tablet-line-height));\n\t\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-tablet-font-size));\n\t\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-tablet-font-weight));\n\t\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-tablet-line-height));\n\t\t\t--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-sm));\n\t\t\t--_sds-card-gap: var(--sds-card-gap, var(--sds-spacing-3xs) var(--sds-spacing-xs));\n\t\t}\n\n\t\t::slotted(p) {\n\t\t\tdisplay: block !important;\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\t:host {\n\t\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-desktop-font-size));\n\t\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-desktop-font-weight));\n\t\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-desktop-line-height));\n\t\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-card.styles.js","sourceRoot":"","sources":["../../src/sds-card/sds-card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkIxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));\n\t\t--_sds-card-border-radius: var(--sds-card-border-radius, var(--sds-radius-md));\n\t\t--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-xs));\n\t\t--_sds-card-gap: var(--sds-card-gap, var(--sds-spacing-zero) var(--sds-spacing-xs));\n\t\t--_sds-card-font-family: var(--sds-card-font-family, var(--sds-typography-font-family));\n\t\t--_sds-card-focus-color: var(--sds-card-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-card-focus-inner-color: var(--sds-card-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-card-focus-spacing: var(--sds-card-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-card-focus-outline-size: var(--sds-card-focus-outline-size, var(--sds-color-states-focus-outline-size));\n\t\t--_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-card-icon-display: var(--sds-card-icon-display, block);\n\n\t\t--_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-mobile-font-size));\n\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-mobile-font-weight));\n\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-mobile-line-height));\n\n\t\t--_sds-card-text-color: var(--sds-card-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\n\t\tdisplay: block;\n\t}\n\n\t.sds-card {\n\t\theight: 100%;\n\t\tdisplay: grid;\n\t}\n\n\t.sds-card__content {\n\t\tbackground-color: var(--_sds-card-background-color);\n\t\tborder-radius: var(--_sds-card-border-radius);\n\t\tfont-family: var(--_sds-card-font-family);\n\t\tpadding: var(--_sds-card-padding);\n\t\tgap: var(--_sds-card-gap);\n\t\ttext-decoration: none;\n\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t\tgrid-template-rows: auto 1fr;\n\t\tgrid-template-areas:\n\t\t\t\"heading icon\"\n\t\t\t\"text text\";\n\n\t\t&:hover {\n\t\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--_sds-card-focus-spacing) var(--_sds-card-focus-inner-color);\n\t\t\toutline: var(--_sds-card-focus-outline-size) solid var(--_sds-card-focus-color);\n\t\t\toutline-offset: var(--_sds-card-focus-spacing);\n\t\t}\n\t}\n\n\t.sds-card__icon {\n\t\tcolor: var(--_sds-card-icon-color);\n\t\tmargin-block-start: var(--sds-spacing-5xs);\n\t\tmargin-inline-start: auto;\n\t\tdisplay: var(--_sds-card-icon-display);\n\t\tgrid-area: icon;\n\t}\n\n\tslot[name=\"heading\"] {\n\t\tgrid-area: heading;\n\t\toverflow-wrap: anywhere;\n\t}\n\n\tslot[name=\"text\"] {\n\t\tgrid-area: text;\n\t}\n\n\t::slotted(p) {\n\t\tcolor: var(--_sds-card-text-color) !important;\n\t\tdisplay: none !important;\n\t\tfont-size: var(--_sds-card-text-font-size) !important;\n\t\tline-height: var(--_sds-card-text-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t\ttext-wrap: pretty !important;\n\t}\n\n\t::slotted(h2),\n\t::slotted(h3),\n\t::slotted(h4),\n\t::slotted(h5),\n\t::slotted(h6) {\n\t\tcolor: var(--_sds-card-heading-color) !important;\n\t\tfont-size: var(--_sds-card-heading-font-size) !important;\n\t\tfont-weight: var(--_sds-card-heading-font-weight) !important;\n\t\tline-height: var(--_sds-card-heading-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t\ttext-wrap: pretty !important;\n\t}\n\n\t@media (min-width: 640px) {\n\t\t:host {\n\t\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-tablet-font-size));\n\t\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-tablet-font-weight));\n\t\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-tablet-line-height));\n\t\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-tablet-font-size));\n\t\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-tablet-font-weight));\n\t\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-tablet-line-height));\n\t\t\t--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-sm));\n\t\t\t--_sds-card-gap: var(--sds-card-gap, var(--sds-spacing-3xs) var(--sds-spacing-xs));\n\t\t}\n\n\t\t::slotted(p) {\n\t\t\tdisplay: block !important;\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\t:host {\n\t\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-desktop-font-size));\n\t\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-desktop-font-weight));\n\t\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-desktop-line-height));\n\t\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}
package/dist/sds-checkbox/sds-checkbox.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA+NlB,CAAC"}
1
+ {"version":3,"file":"sds-checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiOlB,CAAC"}
package/dist/sds-checkbox/sds-checkbox.styles.js CHANGED
@@ -27,6 +27,7 @@ export const styles = css `
27
27
  --_sds-checkbox-focus-color-outer: var(--sds-checkbox-focus-color-outer, var(--sds-color-states-focus-outer));
28
28
  --_sds-checkbox-focus-color-inner: var(--sds-checkbox-focus-color-inner, var(--sds-color-states-focus-inner));
29
29
  --_sds-checkbox-focus-spacing: var(--sds-checkbox-focus-spacing, var(--sds-color-states-focus-spacing));
30
+ --_sds-checkbox-focus-outline-size: var(--sds-checkbox-focus-outline-size, var(--sds-color-states-focus-outline-size));
30
31
  --_sds-checkbox-focus-radius: var(--sds-checkbox-focus-radius, var(--sds-radius-xs));
31
32
 
32
33
  --_sds-checkbox-disabled-opacity: var(--sds-checkbox-disabled-opacity, var(--sds-color-states-disabled-opacity));
@@ -55,8 +56,9 @@ export const styles = css `
55
56
  }
56
57
 
57
58
  &:has(:focus-visible) {
58
- outline: var(--_sds-checkbox-focus-spacing) solid var(--_sds-checkbox-focus-color-outer);
59
- outline-offset: calc(var(--_sds-checkbox-focus-spacing) * 2);
59
+ box-shadow: 0 0 0 var(--_sds-checkbox-focus-spacing) var(--_sds-checkbox-focus-color-inner);
60
+ outline: var(--_sds-checkbox-focus-outline-size) solid var(--_sds-checkbox-focus-color-outer);
61
+ outline-offset: var(--_sds-checkbox-focus-spacing);
60
62
  border-radius: var(--_sds-checkbox-focus-radius);
61
63
  }
62
64
  }
package/dist/sds-checkbox/sds-checkbox.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-block-gap: var(--sds-checkbox-block-gap, var(--sds-spacing-4xs));\n\t\t--_sds-checkbox-inline-gap: var(--sds-checkbox-inline-gap, var(--sds-spacing-3xs));\n\t\t--_sds-checkbox-font-family: var(--sds-checkbox-font-family, var(--sds-typography-font-family-roboto));\n\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));\n\t\t--_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));\n\t\t--_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-icon-md));\n\t\t--_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);\n\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-main-action-contrast-default));\n\n\t\t--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-checkbox-help-text-font-weight: var(--sds-checkbox-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-help-text-line-height: var(--sds-checkbox-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-checkbox-focus-color-outer: var(--sds-checkbox-focus-color-outer, var(--sds-color-states-focus-outer));\n\t\t--_sds-checkbox-focus-color-inner: var(--sds-checkbox-focus-color-inner, var(--sds-color-states-focus-inner));\n\t\t--_sds-checkbox-focus-spacing: var(--sds-checkbox-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-checkbox-focus-radius: var(--sds-checkbox-focus-radius, var(--sds-radius-xs));\n\n\t\t--_sds-checkbox-disabled-opacity: var(--sds-checkbox-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-checkbox-grid-template-areas: var(--sds-checkbox-grid-template-area, 'input content');\n\t\t--_sds-checkbox-label-grid-area: var(--sds-checkbox-label-grid-area, content);\n\t\t--_sds-checkbox-input-grid-area: var(--sds-checkbox-input-grid-area, input);\n\t\t--_sds-checkbox-help-text-grid-area: var(--sds-checkbox-help-text-grid-area, content);\n\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-checkbox {\n\t\talign-items: start;\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-checkbox-font-family);\n\t\tgap: var(--_sds-checkbox-block-gap) var(--_sds-checkbox-inline-gap);\n\t\tgrid-template-areas: var(--_sds-checkbox-grid-template-areas);\n\t\tgrid-template-columns: auto 1fr;\n\t\twidth: fit-content;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t\topacity: var(--_sds-checkbox-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\toutline: var(--_sds-checkbox-focus-spacing) solid var(--_sds-checkbox-focus-color-outer);\n\t\t\toutline-offset: calc(var(--_sds-checkbox-focus-spacing) * 2);\n\t\t\tborder-radius: var(--_sds-checkbox-focus-radius);\n\t\t}\n\t}\n\n\t.sds-checkbox--error {\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-alert-danger-text-default));\n\t}\n\n\t.sds-checkbox__label {\n\t\tgrid-column: var(--_sds-checkbox-label-grid-area);\n\t\talign-self: center;\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-checkbox-label-text-color);\n\t\tdisplay: inline-flex;\n\t\tfont-size: var(--_sds-checkbox-label-font-size);\n\t\tfont-weight: var(--_sds-checkbox-label-font-weight);\n\t\tgap: var(--_sds-checkbox-inline-gap);\n\t\tline-height: var(--_sds-checkbox-label-line-height);\n\t}\n\n\t.sds-checkbox__input {\n\t\tgrid-column: var(--_sds-checkbox-input-grid-area);\n\t\tgrid-row: 1;\n\t\tposition: relative;\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-checkbox-input-background-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-checkbox-input-size);\n\t\theight: var(--_sds-checkbox-input-size);\n\t\taspect-ratio: var(--_sds-checkbox-input-aspect-ratio);\n\t\tborder-width: var(--_sds-checkbox-input-border-width);\n\t\tborder-style: var(--_sds-checkbox-input-border-style);\n\t\tborder-color: var(--_sds-checkbox-input-border-color);\n\t\tborder-radius: var(--_sds-checkbox-input-border-radius);\n\t\tmargin: 0;\n\n\t\t&[readonly] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\n\t\t\t& + .sds-checkbox__label {\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&[checked] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: var(--_sds-checkbox-input-size);\n\t\t\t\theight: var(--_sds-checkbox-input-size);\n\t\t\t\tbackground-color: var(--_sds-checkbox-input-icon-color);\n\t\t\t\ttransform-origin: bottom left;\n\t\t\t\tclip-path: path(\n\t\t\t\t\t'M17.7929 6.79302C18.1834 6.40249 18.8164 6.40249 19.2069 6.79302C19.5974 7.18354 19.5974 7.81656 19.2069 8.20708L10.7069 16.7071C10.5194 16.8946 10.2651 17 9.99989 17C9.7347 17 9.48038 16.8946 9.29286 16.7071L4.79286 12.2071C4.40236 11.8166 4.40241 11.1835 4.79286 10.793C5.18338 10.4025 5.81639 10.4025 6.20692 10.793L9.99989 14.586L17.7929 6.79302Z'\n\t\t\t\t);\n\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t}\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-dot-color, var(--sds-color-action-default, var(--sds-color-neutral-action-default)));\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&[checked]:hover {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&[checked]:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&.sds-checkbox__input--error {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&:active:not([readonly]) {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\n\t\t\t&[checked]:hover {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&[checked]:active {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-checkbox__help-text {\n\t\tgrid-column: var(--_sds-checkbox-help-text-grid-area);\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-checkbox-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-help-text-line-height);\n\t\tmax-width: var(--_sds-checkbox-max-line-width);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-sm));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'M13.168 4.91815C13.5585 4.52763 14.1915 4.52763 14.582 4.91815C14.9724 5.30869 14.9725 5.94173 14.582 6.33221L8.20703 12.7072C8.01952 12.8947 7.76516 13.0002 7.5 13.0002C7.23484 13.0002 6.98049 12.8947 6.79297 12.7072L3.41797 9.33221C3.02746 8.94171 3.0275 8.30868 3.41797 7.91815C3.80849 7.52763 4.44151 7.52763 4.83203 7.91815L7.5 10.5861L13.168 4.91815Z'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-lg));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'M23.9592 9.29327C24.3497 8.9028 24.9828 8.90291 25.3733 9.29327C25.7637 9.68381 25.7638 10.3169 25.3733 10.7073L14.0403 22.0403C13.6498 22.4306 13.0167 22.4307 12.6262 22.0403L6.62622 16.0403C6.23592 15.6499 6.23593 15.0168 6.62622 14.6263C7.0167 14.236 7.6498 14.236 8.04028 14.6263L13.3333 19.9193L23.9592 9.29327Z'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: -1px;\n\t\t}\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiOxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-block-gap: var(--sds-checkbox-block-gap, var(--sds-spacing-4xs));\n\t\t--_sds-checkbox-inline-gap: var(--sds-checkbox-inline-gap, var(--sds-spacing-3xs));\n\t\t--_sds-checkbox-font-family: var(--sds-checkbox-font-family, var(--sds-typography-font-family-roboto));\n\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));\n\t\t--_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));\n\t\t--_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-icon-md));\n\t\t--_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);\n\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-main-action-contrast-default));\n\n\t\t--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-checkbox-help-text-font-weight: var(--sds-checkbox-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-help-text-line-height: var(--sds-checkbox-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-checkbox-focus-color-outer: var(--sds-checkbox-focus-color-outer, var(--sds-color-states-focus-outer));\n\t\t--_sds-checkbox-focus-color-inner: var(--sds-checkbox-focus-color-inner, var(--sds-color-states-focus-inner));\n\t\t--_sds-checkbox-focus-spacing: var(--sds-checkbox-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-checkbox-focus-outline-size: var(--sds-checkbox-focus-outline-size, var(--sds-color-states-focus-outline-size));\n\t\t--_sds-checkbox-focus-radius: var(--sds-checkbox-focus-radius, var(--sds-radius-xs));\n\n\t\t--_sds-checkbox-disabled-opacity: var(--sds-checkbox-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-checkbox-grid-template-areas: var(--sds-checkbox-grid-template-area, 'input content');\n\t\t--_sds-checkbox-label-grid-area: var(--sds-checkbox-label-grid-area, content);\n\t\t--_sds-checkbox-input-grid-area: var(--sds-checkbox-input-grid-area, input);\n\t\t--_sds-checkbox-help-text-grid-area: var(--sds-checkbox-help-text-grid-area, content);\n\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-checkbox {\n\t\talign-items: start;\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-checkbox-font-family);\n\t\tgap: var(--_sds-checkbox-block-gap) var(--_sds-checkbox-inline-gap);\n\t\tgrid-template-areas: var(--_sds-checkbox-grid-template-areas);\n\t\tgrid-template-columns: auto 1fr;\n\t\twidth: fit-content;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t\topacity: var(--_sds-checkbox-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\tbox-shadow: 0 0 0 var(--_sds-checkbox-focus-spacing) var(--_sds-checkbox-focus-color-inner);\n\t\t\toutline: var(--_sds-checkbox-focus-outline-size) solid var(--_sds-checkbox-focus-color-outer);\n\t\t\toutline-offset: var(--_sds-checkbox-focus-spacing);\n\t\t\tborder-radius: var(--_sds-checkbox-focus-radius);\n\t\t}\n\t}\n\n\t.sds-checkbox--error {\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-alert-danger-text-default));\n\t}\n\n\t.sds-checkbox__label {\n\t\tgrid-column: var(--_sds-checkbox-label-grid-area);\n\t\talign-self: center;\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-checkbox-label-text-color);\n\t\tdisplay: inline-flex;\n\t\tfont-size: var(--_sds-checkbox-label-font-size);\n\t\tfont-weight: var(--_sds-checkbox-label-font-weight);\n\t\tgap: var(--_sds-checkbox-inline-gap);\n\t\tline-height: var(--_sds-checkbox-label-line-height);\n\t}\n\n\t.sds-checkbox__input {\n\t\tgrid-column: var(--_sds-checkbox-input-grid-area);\n\t\tgrid-row: 1;\n\t\tposition: relative;\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-checkbox-input-background-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-checkbox-input-size);\n\t\theight: var(--_sds-checkbox-input-size);\n\t\taspect-ratio: var(--_sds-checkbox-input-aspect-ratio);\n\t\tborder-width: var(--_sds-checkbox-input-border-width);\n\t\tborder-style: var(--_sds-checkbox-input-border-style);\n\t\tborder-color: var(--_sds-checkbox-input-border-color);\n\t\tborder-radius: var(--_sds-checkbox-input-border-radius);\n\t\tmargin: 0;\n\n\t\t&[readonly] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\n\t\t\t& + .sds-checkbox__label {\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&[checked] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: var(--_sds-checkbox-input-size);\n\t\t\t\theight: var(--_sds-checkbox-input-size);\n\t\t\t\tbackground-color: var(--_sds-checkbox-input-icon-color);\n\t\t\t\ttransform-origin: bottom left;\n\t\t\t\tclip-path: path(\n\t\t\t\t\t'M17.7929 6.79302C18.1834 6.40249 18.8164 6.40249 19.2069 6.79302C19.5974 7.18354 19.5974 7.81656 19.2069 8.20708L10.7069 16.7071C10.5194 16.8946 10.2651 17 9.99989 17C9.7347 17 9.48038 16.8946 9.29286 16.7071L4.79286 12.2071C4.40236 11.8166 4.40241 11.1835 4.79286 10.793C5.18338 10.4025 5.81639 10.4025 6.20692 10.793L9.99989 14.586L17.7929 6.79302Z'\n\t\t\t\t);\n\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t}\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-dot-color, var(--sds-color-action-default, var(--sds-color-neutral-action-default)));\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&[checked]:hover {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&[checked]:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&.sds-checkbox__input--error {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&:active:not([readonly]) {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\n\t\t\t&[checked]:hover {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&[checked]:active {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-checkbox__help-text {\n\t\tgrid-column: var(--_sds-checkbox-help-text-grid-area);\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-checkbox-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-help-text-line-height);\n\t\tmax-width: var(--_sds-checkbox-max-line-width);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-sm));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'M13.168 4.91815C13.5585 4.52763 14.1915 4.52763 14.582 4.91815C14.9724 5.30869 14.9725 5.94173 14.582 6.33221L8.20703 12.7072C8.01952 12.8947 7.76516 13.0002 7.5 13.0002C7.23484 13.0002 6.98049 12.8947 6.79297 12.7072L3.41797 9.33221C3.02746 8.94171 3.0275 8.30868 3.41797 7.91815C3.80849 7.52763 4.44151 7.52763 4.83203 7.91815L7.5 10.5861L13.168 4.91815Z'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-lg));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'M23.9592 9.29327C24.3497 8.9028 24.9828 8.90291 25.3733 9.29327C25.7637 9.68381 25.7638 10.3169 25.3733 10.7073L14.0403 22.0403C13.6498 22.4306 13.0167 22.4307 12.6262 22.0403L6.62622 16.0403C6.23592 15.6499 6.23593 15.0168 6.62622 14.6263C7.0167 14.236 7.6498 14.236 8.04028 14.6263L13.3333 19.9193L23.9592 9.29327Z'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: -1px;\n\t\t}\n\t}\n`;\n"]}
package/dist/sds-details/sds-details.styles.js CHANGED
@@ -12,9 +12,9 @@ export const styles = css `
12
12
  --_sds-details-content-padding: var(--sds-details-content-padding, var(--sds-spacing-xs));
13
13
  --_sds-details-content-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));
14
14
 
15
- --_sds-details-focus-outline-width: var(--sds-details-focus-outline-width, var(--sds-border-md));
16
- --_sds-details-focus-outline-color: var(--sds-details-focus-outline-color, var(--sds-color-states-focus-outer));
17
- --_sds-details-focus-outline-offset: var(--sds-details-focus-outline-offset, var(--sds-color-states-focus-spacing));
15
+ --_sds-details-focus-outline-size: var(--sds-details-focus-outline-size, var(--sds-details-focus-outline-width, var(--sds-color-states-focus-outline-size)));
16
+ --_sds-details-focus-color: var(--sds-details-focus-color, var(--sds-details-focus-outline-color, var(--sds-color-states-focus-outer)));
17
+ --_sds-details-focus-spacing: var(--sds-details-focus-spacing, var(--sds-details-focus-outline-offset, var(--sds-color-states-focus-spacing)));
18
18
  --_sds-details-focus-inner-color: var(--sds-details-focus-inner-color, var(--sds-color-states-focus-inner));
19
19
 
20
20
  --_sds-details-icon-transition: var(--sds-details-icon-transition, transform 0.2s ease);
@@ -90,9 +90,9 @@ export const styles = css `
90
90
  }
91
91
 
92
92
  &:focus-visible {
93
- box-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-details-focus-inner-color);
94
- outline: var(--_sds-details-focus-outline-width) solid var(--_sds-details-focus-outline-color);
95
- outline-offset: var(--_sds-details-focus-outline-offset);
93
+ box-shadow: 0 0 0 var(--_sds-details-focus-spacing) var(--_sds-details-focus-inner-color);
94
+ outline: var(--_sds-details-focus-outline-size) solid var(--_sds-details-focus-color);
95
+ outline-offset: var(--_sds-details-focus-spacing);
96
96
  }
97
97
  }
98
98
 
package/dist/sds-details/sds-details.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-details.styles.js","sourceRoot":"","sources":["../../src/sds-details/sds-details.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\t--_sds-details-summary-padding: var(--sds-details-summary-padding, var(--sds-spacing-xs));\n\t\t--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t\t--_sds-details-summary-gap: var(--sds-details-summary-gap, var(--sds-spacing-3xs));\n\t\t--_sds-details-summary-border-radius: var(--sds-details-summary-border-radius, 0);\n\n\t\t--_sds-details-content-padding-start: var(--sds-details-content-padding-start, calc(var(--_sds-details-summary-padding) + var(--_sds-details-summary-gap) + var(--sds-components-icon-md)));\n\t\t--_sds-details-content-padding: var(--sds-details-content-padding, var(--sds-spacing-xs));\n\t\t--_sds-details-content-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\n\t\t--_sds-details-focus-outline-width: var(--sds-details-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-details-focus-outline-color: var(--sds-details-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-details-focus-outline-offset: var(--sds-details-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-details-focus-inner-color: var(--sds-details-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-details-icon-transition: var(--sds-details-icon-transition, transform 0.2s ease);\n\n\t\t--_sds-details-border-color: var(--sds-details-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t\t--_sds-details-border-bottom: var(--sds-details-border-bottom, solid 1px var(--_sds-details-border-color));\n\t\t--_sds-details-border-top: var(--sds-details-border-top, solid 1px var(--_sds-details-border-color));\n\t\t--_sds-details-border-standalone: var(--sds-details-border-standalone, solid 1px var(--_sds-details-border-color));\n\t\t--_sds-details-border-radius: var(--sds-details-border-radius, var(--sds-radius-md));\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\t\t--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t}\n\n\t.sds-details {\n\t\tcolor: var(--_sds-details-text-color);\n\n\t\t&:is([open]) {\n\t\t\t--_sds-details-summary-background-color: var(----_sds-details-summary-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));\n\t\t}\n\n\t\t&:not([data-standalone]) {\n\t\t\tborder-top: var(--_sds-details-border-top);\n\t\t\tborder-bottom: var(--_sds-details-border-bottom);\n\t\t}\n\n\t\t/* Setting the border on the summary element preserves the border\n\t\t when the element has focus\n\t\t*/\n\t\t&:is([data-standalone]) {\n\t\t\tsummary {\n\t\t\t\tborder-radius: var(--_sds-details-border-radius);\n\t\t\t\tborder: var(--_sds-details-border-standalone);\n\t\t\t}\n\n\t\t\t&:is([open]) {\n\t\t\t\t& summary {\n\t\t\t\t\tborder-bottom-left-radius: 0px;\n\t\t\t\t\tborder-bottom-right-radius: 0px;\n\t\t\t\t}\n\n\t\t\t\t& .sds-details__content {\n\t\t\t\t\tborder-left: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-right: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-bottom: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-bottom-left-radius: var(--_sds-details-border-radius);\n\t\t\t\t\tborder-bottom-right-radius: var(--_sds-details-border-radius);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-details__summary {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: var(--_sds-details-summary-padding);\n\t\tbackground-color: var(--_sds-details-summary-background-color);\n\t\tborder-radius: var(--_sds-details-summary-border-radius);\n\t\tgap: var(--_sds-details-summary-gap);\n\t\tlist-style: none;\n\t\tuser-select: none;\n\n\t\t&:hover {\n\t\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-details-focus-inner-color);\n\t\t\toutline: var(--_sds-details-focus-outline-width) solid var(--_sds-details-focus-outline-color);\n\t\t\toutline-offset: var(--_sds-details-focus-outline-offset);\n\t\t}\n\t}\n\n\t.sds-details__summary-content {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t}\n\n\tsds-icon {\n\t\ttransition: var(--_sds-details-icon-transition);\n\t}\n\n\t.sds-details:not([open]) sds-icon {\n\t\ttransform: rotate(180deg);\n\t}\n\n\t.sds-details__content {\n\t\tpadding: var(--_sds-details-content-padding);\n\t\tpadding-inline-start: var(--_sds-details-content-padding-start);\n\t}\n\n\t@media (prefers-reduced-motion: no-preference) {\n\t\t.sds-details__content {\n\t\t\tanimation: show-content-keyframes 200ms ease-in-out;\n\t\t}\n\t}\n\n\t@keyframes show-content-keyframes {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(-0.5rem);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t::slotted([slot='summary']) {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-details.styles.js","sourceRoot":"","sources":["../../src/sds-details/sds-details.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\t--_sds-details-summary-padding: var(--sds-details-summary-padding, var(--sds-spacing-xs));\n\t\t--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t\t--_sds-details-summary-gap: var(--sds-details-summary-gap, var(--sds-spacing-3xs));\n\t\t--_sds-details-summary-border-radius: var(--sds-details-summary-border-radius, 0);\n\n\t\t--_sds-details-content-padding-start: var(--sds-details-content-padding-start, calc(var(--_sds-details-summary-padding) + var(--_sds-details-summary-gap) + var(--sds-components-icon-md)));\n\t\t--_sds-details-content-padding: var(--sds-details-content-padding, var(--sds-spacing-xs));\n\t\t--_sds-details-content-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\n\t\t--_sds-details-focus-outline-size: var(--sds-details-focus-outline-size, var(--sds-details-focus-outline-width, var(--sds-color-states-focus-outline-size)));\n\t\t--_sds-details-focus-color: var(--sds-details-focus-color, var(--sds-details-focus-outline-color, var(--sds-color-states-focus-outer)));\n\t\t--_sds-details-focus-spacing: var(--sds-details-focus-spacing, var(--sds-details-focus-outline-offset, var(--sds-color-states-focus-spacing)));\n\t\t--_sds-details-focus-inner-color: var(--sds-details-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-details-icon-transition: var(--sds-details-icon-transition, transform 0.2s ease);\n\n\t\t--_sds-details-border-color: var(--sds-details-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t\t--_sds-details-border-bottom: var(--sds-details-border-bottom, solid 1px var(--_sds-details-border-color));\n\t\t--_sds-details-border-top: var(--sds-details-border-top, solid 1px var(--_sds-details-border-color));\n\t\t--_sds-details-border-standalone: var(--sds-details-border-standalone, solid 1px var(--_sds-details-border-color));\n\t\t--_sds-details-border-radius: var(--sds-details-border-radius, var(--sds-radius-md));\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\t\t--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t}\n\n\t.sds-details {\n\t\tcolor: var(--_sds-details-text-color);\n\n\t\t&:is([open]) {\n\t\t\t--_sds-details-summary-background-color: var(----_sds-details-summary-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));\n\t\t}\n\n\t\t&:not([data-standalone]) {\n\t\t\tborder-top: var(--_sds-details-border-top);\n\t\t\tborder-bottom: var(--_sds-details-border-bottom);\n\t\t}\n\n\t\t/* Setting the border on the summary element preserves the border\n\t\t when the element has focus\n\t\t*/\n\t\t&:is([data-standalone]) {\n\t\t\tsummary {\n\t\t\t\tborder-radius: var(--_sds-details-border-radius);\n\t\t\t\tborder: var(--_sds-details-border-standalone);\n\t\t\t}\n\n\t\t\t&:is([open]) {\n\t\t\t\t& summary {\n\t\t\t\t\tborder-bottom-left-radius: 0px;\n\t\t\t\t\tborder-bottom-right-radius: 0px;\n\t\t\t\t}\n\n\t\t\t\t& .sds-details__content {\n\t\t\t\t\tborder-left: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-right: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-bottom: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-bottom-left-radius: var(--_sds-details-border-radius);\n\t\t\t\t\tborder-bottom-right-radius: var(--_sds-details-border-radius);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-details__summary {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: var(--_sds-details-summary-padding);\n\t\tbackground-color: var(--_sds-details-summary-background-color);\n\t\tborder-radius: var(--_sds-details-summary-border-radius);\n\t\tgap: var(--_sds-details-summary-gap);\n\t\tlist-style: none;\n\t\tuser-select: none;\n\n\t\t&:hover {\n\t\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--_sds-details-focus-spacing) var(--_sds-details-focus-inner-color);\n\t\t\toutline: var(--_sds-details-focus-outline-size) solid var(--_sds-details-focus-color);\n\t\t\toutline-offset: var(--_sds-details-focus-spacing);\n\t\t}\n\t}\n\n\t.sds-details__summary-content {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t}\n\n\tsds-icon {\n\t\ttransition: var(--_sds-details-icon-transition);\n\t}\n\n\t.sds-details:not([open]) sds-icon {\n\t\ttransform: rotate(180deg);\n\t}\n\n\t.sds-details__content {\n\t\tpadding: var(--_sds-details-content-padding);\n\t\tpadding-inline-start: var(--_sds-details-content-padding-start);\n\t}\n\n\t@media (prefers-reduced-motion: no-preference) {\n\t\t.sds-details__content {\n\t\t\tanimation: show-content-keyframes 200ms ease-in-out;\n\t\t}\n\t}\n\n\t@keyframes show-content-keyframes {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(-0.5rem);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t::slotted([slot='summary']) {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t}\n`;\n"]}
package/dist/sds-dialog/sds-dialog.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-dialog.styles.d.ts","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgHlB,CAAC"}
1
+ {"version":3,"file":"sds-dialog.styles.d.ts","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAsHlB,CAAC"}
package/dist/sds-dialog/sds-dialog.styles.js CHANGED
@@ -24,6 +24,11 @@ export const styles = css `
24
24
  --_sds-dialog-animation-duration: var(--sds-dialog-animation-duration, 200ms);
25
25
  --_sds-dialog-close-button-offset: var(--sds-dialog-close-button-offset, var(--sds-spacing-3xs));
26
26
 
27
+ --_sds-dialog-focus-color: var(--sds-dialog-focus-color, var(--sds-color-states-focus-outer));
28
+ --_sds-dialog-focus-inner-color: var(--sds-dialog-focus-inner-color, var(--sds-color-states-focus-inner));
29
+ --_sds-dialog-focus-spacing: var(--sds-dialog-focus-spacing, var(--sds-color-states-focus-spacing));
30
+ --_sds-dialog-focus-outline-size: var(--sds-dialog-focus-outline-size, var(--sds-color-states-focus-outline-size));
31
+
27
32
  display: contents;
28
33
  }
29
34
 
@@ -48,8 +53,9 @@ export const styles = css `
48
53
  animation: sds-dialog-fade-in var(--_sds-dialog-animation-duration) ease-out forwards;
49
54
 
50
55
  &:focus-visible {
51
- outline: 3px solid var(--sds-color-states-focus-outer);
52
- outline-offset: 3px;
56
+ box-shadow: 0 0 0 var(--_sds-dialog-focus-spacing) var(--_sds-dialog-focus-inner-color);
57
+ outline: var(--_sds-dialog-focus-outline-size) solid var(--_sds-dialog-focus-color);
58
+ outline-offset: var(--_sds-dialog-focus-spacing);
53
59
  }
54
60
 
55
61
  &[open] {
package/dist/sds-dialog/sds-dialog.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-dialog.styles.js","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-dialog-background-color: var(--sds-dialog-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t\t--_sds-dialog-backdrop-color: var(--sds-dialog-backdrop-color, rgba(0, 0, 0, 0.5));\n\n\t\t--_sds-dialog-border-color: var(--sds-dialog-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t\t--_sds-dialog-border-radius: var(--sds-dialog-border-radius, var(--sds-radius-md));\n\t\t--_sds-dialog-border-width: var(--sds-dialog-border-width, var(--sds-border-sm));\n\n\t\t--_sds-dialog-max-width: var(--sds-dialog-max-width, min(60ch, 100vw));\n\t\t--_sds-dialog-max-height: var(--sds-dialog-max-height, calc(100dvh - var(--sds-spacing-lg)));\n\n\t\t--_sds-dialog-margin: var(--sds-dialog-margin, auto);\n\t\t--_sds-dialog-padding-block: var(--sds-dialog-padding-block, var(--sds-spacing-sm));\n\t\t--_sds-dialog-padding-inline: var(--sds-dialog-padding-inline, var(--sds-spacing-sm));\n\t\t--_sds-dialog-gap: var(--sds-dialog-gap, var(--sds-spacing-xs));\n\n\t\t--_sds-dialog-font-family: var(--sds-dialog-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-dialog-text-color: var(--sds-dialog-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\t--_sds-dialog-box-shadow: var(--sds-dialog-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));\n\n\t\t--_sds-dialog-animation-duration: var(--sds-dialog-animation-duration, 200ms);\n\t\t--_sds-dialog-close-button-offset: var(--sds-dialog-close-button-offset, var(--sds-spacing-3xs));\n\n\t\tdisplay: contents;\n\t}\n\n\tdialog {\n\t\tcolor: var(--_sds-dialog-text-color);\n\t\tbackground-color: var(--_sds-dialog-background-color);\n\t\tbox-shadow: var(--_sds-dialog-box-shadow);\n\n\t\tborder: var(--_sds-dialog-border-width) solid var(--_sds-dialog-border-color);\n\t\tborder-radius: var(--_sds-dialog-border-radius);\n\n\t\tfont-family: var(--_sds-dialog-font-family);\n\n\t\tmax-width: var(--_sds-dialog-max-width);\n\t\tmax-height: var(--_sds-dialog-max-height);\n\n\t\toverflow: auto;\n\t\tpadding: 0;\n\n\t\topacity: 0;\n\t\ttransform: translateY(-1rem);\n\t\tanimation: sds-dialog-fade-in var(--_sds-dialog-animation-duration) ease-out forwards;\n\n\t\t&:focus-visible {\n\t\t\toutline: 3px solid var(--sds-color-states-focus-outer);\n\t\t\toutline-offset: 3px;\n\t\t}\n\n\t\t&[open] {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tmargin: var(--_sds-dialog-margin);\n\t\t\tpadding-block: var(--_sds-dialog-padding-block);\n\t\t\tpadding-inline: var(--_sds-dialog-padding-inline);\n\t\t\tgap: var(--_sds-dialog-gap);\n\t\t}\n\n\t\t&.sds-dialog__empty-header:has(.sds-dialog__close-button) {\n\t\t\t/* Set padding right to avoid overflowing the close button */\n\t\t\tpadding-right: var(--sds-dialog-padding-right, var(--sds-spacing-lg));\n\t\t}\n\n\t\t&::backdrop {\n\t\t\tbackground-color: var(--_sds-dialog-backdrop-color);\n\t\t\t/* @keyframes does not work for ::backdrop in Firefox, so use transition instead */\n\t\t\ttransition: opacity var(--_sds-dialog-animation-duration) ease-out;\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&[open]::backdrop {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t@keyframes sds-dialog-fade-in {\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t.sds-dialog__close-button {\n\t\t--sds-button-text-color: var(--sds-dialog-close-button-color, var(--sds-color-text-subtle, var(--sds-color-main-text-subtle)));\n\t\t--sds-button-padding-inline: 0;\n\n\t\tposition: absolute;\n\t\ttop: var(--_sds-dialog-close-button-offset);\n\t\tright: var(--_sds-dialog-close-button-offset);\n\t\tz-index: 1;\n\t}\n\n\t.sds-dialog__header {\n\t\tmargin-right: var(--sds-spacing-lg);\n\t}\n\n\t@media (max-width: 640px) {\n\t\t:host {\n\t\t\t--_sds-dialog-max-width: var(--sds-dialog-max-width, 100%);\n\t\t\t--_sds-dialog-margin: var(--sds-dialog-margin, var(--sds-spacing-xs));\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\t--_sds-dialog-animation-duration: 0ms;\n\t\t}\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-dialog.styles.js","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-dialog-background-color: var(--sds-dialog-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t\t--_sds-dialog-backdrop-color: var(--sds-dialog-backdrop-color, rgba(0, 0, 0, 0.5));\n\n\t\t--_sds-dialog-border-color: var(--sds-dialog-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t\t--_sds-dialog-border-radius: var(--sds-dialog-border-radius, var(--sds-radius-md));\n\t\t--_sds-dialog-border-width: var(--sds-dialog-border-width, var(--sds-border-sm));\n\n\t\t--_sds-dialog-max-width: var(--sds-dialog-max-width, min(60ch, 100vw));\n\t\t--_sds-dialog-max-height: var(--sds-dialog-max-height, calc(100dvh - var(--sds-spacing-lg)));\n\n\t\t--_sds-dialog-margin: var(--sds-dialog-margin, auto);\n\t\t--_sds-dialog-padding-block: var(--sds-dialog-padding-block, var(--sds-spacing-sm));\n\t\t--_sds-dialog-padding-inline: var(--sds-dialog-padding-inline, var(--sds-spacing-sm));\n\t\t--_sds-dialog-gap: var(--sds-dialog-gap, var(--sds-spacing-xs));\n\n\t\t--_sds-dialog-font-family: var(--sds-dialog-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-dialog-text-color: var(--sds-dialog-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\t--_sds-dialog-box-shadow: var(--sds-dialog-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));\n\n\t\t--_sds-dialog-animation-duration: var(--sds-dialog-animation-duration, 200ms);\n\t\t--_sds-dialog-close-button-offset: var(--sds-dialog-close-button-offset, var(--sds-spacing-3xs));\n\n\t\t--_sds-dialog-focus-color: var(--sds-dialog-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-dialog-focus-inner-color: var(--sds-dialog-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-dialog-focus-spacing: var(--sds-dialog-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-dialog-focus-outline-size: var(--sds-dialog-focus-outline-size, var(--sds-color-states-focus-outline-size));\n\n\t\tdisplay: contents;\n\t}\n\n\tdialog {\n\t\tcolor: var(--_sds-dialog-text-color);\n\t\tbackground-color: var(--_sds-dialog-background-color);\n\t\tbox-shadow: var(--_sds-dialog-box-shadow);\n\n\t\tborder: var(--_sds-dialog-border-width) solid var(--_sds-dialog-border-color);\n\t\tborder-radius: var(--_sds-dialog-border-radius);\n\n\t\tfont-family: var(--_sds-dialog-font-family);\n\n\t\tmax-width: var(--_sds-dialog-max-width);\n\t\tmax-height: var(--_sds-dialog-max-height);\n\n\t\toverflow: auto;\n\t\tpadding: 0;\n\n\t\topacity: 0;\n\t\ttransform: translateY(-1rem);\n\t\tanimation: sds-dialog-fade-in var(--_sds-dialog-animation-duration) ease-out forwards;\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--_sds-dialog-focus-spacing) var(--_sds-dialog-focus-inner-color);\n\t\t\toutline: var(--_sds-dialog-focus-outline-size) solid var(--_sds-dialog-focus-color);\n\t\t\toutline-offset: var(--_sds-dialog-focus-spacing);\n\t\t}\n\n\t\t&[open] {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tmargin: var(--_sds-dialog-margin);\n\t\t\tpadding-block: var(--_sds-dialog-padding-block);\n\t\t\tpadding-inline: var(--_sds-dialog-padding-inline);\n\t\t\tgap: var(--_sds-dialog-gap);\n\t\t}\n\n\t\t&.sds-dialog__empty-header:has(.sds-dialog__close-button) {\n\t\t\t/* Set padding right to avoid overflowing the close button */\n\t\t\tpadding-right: var(--sds-dialog-padding-right, var(--sds-spacing-lg));\n\t\t}\n\n\t\t&::backdrop {\n\t\t\tbackground-color: var(--_sds-dialog-backdrop-color);\n\t\t\t/* @keyframes does not work for ::backdrop in Firefox, so use transition instead */\n\t\t\ttransition: opacity var(--_sds-dialog-animation-duration) ease-out;\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&[open]::backdrop {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t@keyframes sds-dialog-fade-in {\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t.sds-dialog__close-button {\n\t\t--sds-button-text-color: var(--sds-dialog-close-button-color, var(--sds-color-text-subtle, var(--sds-color-main-text-subtle)));\n\t\t--sds-button-padding-inline: 0;\n\n\t\tposition: absolute;\n\t\ttop: var(--_sds-dialog-close-button-offset);\n\t\tright: var(--_sds-dialog-close-button-offset);\n\t\tz-index: 1;\n\t}\n\n\t.sds-dialog__header {\n\t\tmargin-right: var(--sds-spacing-lg);\n\t}\n\n\t@media (max-width: 640px) {\n\t\t:host {\n\t\t\t--_sds-dialog-max-width: var(--sds-dialog-max-width, 100%);\n\t\t\t--_sds-dialog-margin: var(--sds-dialog-margin, var(--sds-spacing-xs));\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\t--_sds-dialog-animation-duration: 0ms;\n\t\t}\n\t}\n`;\n"]}
package/dist/sds-radio/sds-radio.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-radio.styles.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA0MlB,CAAC"}
1
+ {"version":3,"file":"sds-radio.styles.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiNlB,CAAC"}
package/dist/sds-radio/sds-radio.styles.js CHANGED
@@ -23,6 +23,12 @@ export const styles = css `
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);
25
25
 
26
+ --_sds-radio-focus-color-outer: var(--sds-radio-focus-color-outer, var(--sds-color-states-focus-outer));
27
+ --_sds-radio-focus-color-inner: var(--sds-radio-focus-color-inner, var(--sds-color-states-focus-inner));
28
+ --_sds-radio-focus-spacing: var(--sds-radio-focus-spacing, var(--sds-color-states-focus-spacing));
29
+ --_sds-radio-focus-outline-size: var(--sds-radio-focus-outline-size, var(--sds-color-states-focus-outline-size));
30
+ --_sds-radio-focus-radius: var(--sds-radio-focus-radius, var(--sds-radius-xs));
31
+
26
32
  --_sds-radio-grid-template-areas: var(--sds-radio-grid-template-area, 'input content');
27
33
  --_sds-radio-label-grid-area: var(--sds-radio-label-grid-area, content);
28
34
  --_sds-radio-input-grid-area: var(--sds-radio-input-grid-area, input);
@@ -47,9 +53,10 @@ export const styles = css `
47
53
  }
48
54
 
49
55
  &:has(:focus-visible) {
50
- outline: 3px solid var(--sds-color-states-focus-outer);
51
- outline-offset: 6px;
52
- border-radius: var(--sds-radius-sm);
56
+ box-shadow: 0 0 0 var(--_sds-radio-focus-spacing) var(--_sds-radio-focus-color-inner);
57
+ outline: var(--_sds-radio-focus-outline-size) solid var(--_sds-radio-focus-color-outer);
58
+ outline-offset: var(--_sds-radio-focus-spacing);
59
+ border-radius: var(--_sds-radio-focus-radius);
53
60
  }
54
61
  }
55
62
 
package/dist/sds-radio/sds-radio.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-radio.styles.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0MxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-radio-font-family: var(--sds-radio-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-radio-disabled-opacity: var(--sds-radio-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-radio-block-gap: var(--sds-radio-block-gap, var(--sds-spacing-4xs));\n\t\t--_sds-radio-inline-gap: var(--sds-radio-inline-gap, var(--sds-spacing-3xs));\n\n\t\t--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-radio-label-font-weight: var(--sds-radio-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-radio-help-text-color: var(--sds-radio-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-radio-help-text-font-size: var(--sds-radio-help-text-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-radio-help-text-font-weight: var(--sds-radio-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-radio-help-text-line-height: var(--sds-radio-help-text-line-height, var(--sds-components-line-height-tall-content-md));\n\n\t\t--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-md));\n\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-radio-input-border-width: var(--sds-radio-input-border-width, var(--sds-border-md));\n\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, transparent);\n\t\t--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 4.5px);\n\n\t\t--_sds-radio-grid-template-areas: var(--sds-radio-grid-template-area, 'input content');\n\t\t--_sds-radio-label-grid-area: var(--sds-radio-label-grid-area, content);\n\t\t--_sds-radio-input-grid-area: var(--sds-radio-input-grid-area, input);\n\t\t--_sds-radio-help-text-grid-area: var(--sds-radio-help-text-grid-area, content);\n\n\t\tdisplay: inline-flex;\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-radio {\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-radio-font-family);\n\t\tgap: var(--_sds-radio-block-gap) var(--_sds-radio-inline-gap);\n\t\tgrid-template-areas: var(--_sds-radio-grid-template-areas);\n\t\tgrid-template-columns: auto 1fr;\n\t\twidth: fit-content;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t\topacity: var(--_sds-radio-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\toutline: 3px solid var(--sds-color-states-focus-outer);\n\t\t\toutline-offset: 6px;\n\t\t\tborder-radius: var(--sds-radius-sm);\n\t\t}\n\t}\n\n\t.sds-radio--error {\n\t\t--_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-text-default, var(--sds-color-alert-danger-text-default)));\n\t}\n\n\t.sds-radio__help-text {\n\t\tgrid-column: var(--_sds-radio-help-text-grid-area);\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-radio-help-text-color);\n\t\tfont-size: var(--_sds-radio-help-text-font-size);\n\t\tfont-weight: var(--_sds-radio-help-text-font-weight);\n\t\tline-height: var(--_sds-radio-help-text-line-height);\n\t\tmax-width: var(--_sds-radio-max-line-width);\n\t}\n\n\t.sds-radio__label {\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-radio-label-text-color);\n\t\tdisplay: inline-block;\n\t\tfont-size: var(--_sds-radio-label-font-size);\n\t\tfont-weight: var(--_sds-radio-label-font-weight);\n\t\tline-height: var(--_sds-radio-label-line-height);\n\n\t\tgrid-column: var(--_sds-radio-label-grid-area);\n\t}\n\n\t.sds-radio__input {\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-radio-input-background-color);\n\t\tbackground-image: radial-gradient(circle closest-side, currentcolor var(--_sds-radio-input-dot-size), transparent 0);\n\t\tcolor: var(--_sds-radio-input-dot-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-radio-input-size);\n\t\theight: var(--_sds-radio-input-size);\n\t\taspect-ratio: 1;\n\t\tborder: var(--_sds-radio-input-border-width) solid var(--_sds-radio-input-border-color);\n\t\tborder-radius: 50%;\n\t\tmargin: 0;\n\t\tposition: relative;\n\n\t\tgrid-column: var(--_sds-radio-input-grid-area);\n\t\tgrid-row: 1;\n\n\t\t&[readonly] {\n\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\n\t\t\t& + .sds-radio__label {\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&[checked] {\n\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-action-default, var(--sds-color-neutral-action-default)));\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t}\n\t\t}\n\n\t\t&:active:not([readonly], [checked]) {\n\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t}\n\n\t\t&.sds-radio__input--error {\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-alert-danger-action-contrast-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-hover));\n\n\t\t\t\t&[checked] {\n\t\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active:not([readonly], [checked]) {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-active));\n\n\t\t\t\t&[checked] {\n\t\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-sm));\n\t\t--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 3.5px);\n\n\t\t.sds-radio__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-lg));\n\t\t--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 4.5px);\n\n\t\t.sds-radio__label {\n\t\t\tmargin-block-start: -1px;\n\t\t}\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-radio.styles.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiNxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-radio-font-family: var(--sds-radio-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-radio-disabled-opacity: var(--sds-radio-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-radio-block-gap: var(--sds-radio-block-gap, var(--sds-spacing-4xs));\n\t\t--_sds-radio-inline-gap: var(--sds-radio-inline-gap, var(--sds-spacing-3xs));\n\n\t\t--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-radio-label-font-weight: var(--sds-radio-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-radio-help-text-color: var(--sds-radio-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-radio-help-text-font-size: var(--sds-radio-help-text-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-radio-help-text-font-weight: var(--sds-radio-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-radio-help-text-line-height: var(--sds-radio-help-text-line-height, var(--sds-components-line-height-tall-content-md));\n\n\t\t--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-md));\n\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-radio-input-border-width: var(--sds-radio-input-border-width, var(--sds-border-md));\n\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, transparent);\n\t\t--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 4.5px);\n\n\t\t--_sds-radio-focus-color-outer: var(--sds-radio-focus-color-outer, var(--sds-color-states-focus-outer));\n\t\t--_sds-radio-focus-color-inner: var(--sds-radio-focus-color-inner, var(--sds-color-states-focus-inner));\n\t\t--_sds-radio-focus-spacing: var(--sds-radio-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-radio-focus-outline-size: var(--sds-radio-focus-outline-size, var(--sds-color-states-focus-outline-size));\n\t\t--_sds-radio-focus-radius: var(--sds-radio-focus-radius, var(--sds-radius-xs));\n\n\t\t--_sds-radio-grid-template-areas: var(--sds-radio-grid-template-area, 'input content');\n\t\t--_sds-radio-label-grid-area: var(--sds-radio-label-grid-area, content);\n\t\t--_sds-radio-input-grid-area: var(--sds-radio-input-grid-area, input);\n\t\t--_sds-radio-help-text-grid-area: var(--sds-radio-help-text-grid-area, content);\n\n\t\tdisplay: inline-flex;\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-radio {\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-radio-font-family);\n\t\tgap: var(--_sds-radio-block-gap) var(--_sds-radio-inline-gap);\n\t\tgrid-template-areas: var(--_sds-radio-grid-template-areas);\n\t\tgrid-template-columns: auto 1fr;\n\t\twidth: fit-content;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t\topacity: var(--_sds-radio-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\tbox-shadow: 0 0 0 var(--_sds-radio-focus-spacing) var(--_sds-radio-focus-color-inner);\n\t\t\toutline: var(--_sds-radio-focus-outline-size) solid var(--_sds-radio-focus-color-outer);\n\t\t\toutline-offset: var(--_sds-radio-focus-spacing);\n\t\t\tborder-radius: var(--_sds-radio-focus-radius);\n\t\t}\n\t}\n\n\t.sds-radio--error {\n\t\t--_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-text-default, var(--sds-color-alert-danger-text-default)));\n\t}\n\n\t.sds-radio__help-text {\n\t\tgrid-column: var(--_sds-radio-help-text-grid-area);\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-radio-help-text-color);\n\t\tfont-size: var(--_sds-radio-help-text-font-size);\n\t\tfont-weight: var(--_sds-radio-help-text-font-weight);\n\t\tline-height: var(--_sds-radio-help-text-line-height);\n\t\tmax-width: var(--_sds-radio-max-line-width);\n\t}\n\n\t.sds-radio__label {\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-radio-label-text-color);\n\t\tdisplay: inline-block;\n\t\tfont-size: var(--_sds-radio-label-font-size);\n\t\tfont-weight: var(--_sds-radio-label-font-weight);\n\t\tline-height: var(--_sds-radio-label-line-height);\n\n\t\tgrid-column: var(--_sds-radio-label-grid-area);\n\t}\n\n\t.sds-radio__input {\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-radio-input-background-color);\n\t\tbackground-image: radial-gradient(circle closest-side, currentcolor var(--_sds-radio-input-dot-size), transparent 0);\n\t\tcolor: var(--_sds-radio-input-dot-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-radio-input-size);\n\t\theight: var(--_sds-radio-input-size);\n\t\taspect-ratio: 1;\n\t\tborder: var(--_sds-radio-input-border-width) solid var(--_sds-radio-input-border-color);\n\t\tborder-radius: 50%;\n\t\tmargin: 0;\n\t\tposition: relative;\n\n\t\tgrid-column: var(--_sds-radio-input-grid-area);\n\t\tgrid-row: 1;\n\n\t\t&[readonly] {\n\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\n\t\t\t& + .sds-radio__label {\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&[checked] {\n\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-action-default, var(--sds-color-neutral-action-default)));\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t}\n\t\t}\n\n\t\t&:active:not([readonly], [checked]) {\n\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t}\n\n\t\t&.sds-radio__input--error {\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-alert-danger-action-contrast-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-hover));\n\n\t\t\t\t&[checked] {\n\t\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active:not([readonly], [checked]) {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-active));\n\n\t\t\t\t&[checked] {\n\t\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-sm));\n\t\t--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 3.5px);\n\n\t\t.sds-radio__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-lg));\n\t\t--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 4.5px);\n\n\t\t.sds-radio__label {\n\t\t\tmargin-block-start: -1px;\n\t\t}\n\t}\n`;\n"]}
package/dist/sds-select/sds-select.component.d.ts CHANGED
@@ -38,7 +38,7 @@ export declare class SDSSelectComponent extends SDSSelectComponent_base {
38
38
  * slotchange won't fire for in-place mutations, so we also use a MutationObserver.
39
39
  */
40
40
  private readonly _handleSlotChange;
41
- private updateValidity;
41
+ updateValidity(): void;
42
42
  private getLightDomSelectedValue;
43
43
  formResetCallback(): void;
44
44
  private readonly _handleChange;
package/dist/sds-select/sds-select.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-select.component.d.ts","sourceRoot":"","sources":["../../src/sds-select/sds-select.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAGrC,KAAK,UAAU,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAEzD,MAAM,WAAW,cAAe,SAAQ,wBAAwB;IAC/D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;;AAED,qBAAa,kBAAmB,SAAQ,uBAAqF;IAE5H,OAAgB,MAAM,4BAAY;IAGS,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACtB,YAAY,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAC1E,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,CAAS;IAC9C,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,CAAQ;IAE5D,OAAO,CAAC,OAAO,CAAqB;IAEvD,OAAO,CAAC,aAAa,CAAuB;IAG5C,OAAO,CAAC,iBAAiB,CAAC,CAAmB;IAC7C,OAAO,CAAC,oBAAoB,CAAS;IAE5B,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;IAK5B,YAAY;IAoBZ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAYnD,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,qBAAqB;IA0B7B,OAAO,CAAC,uBAAuB;IAoC/B,OAAO,CAAC,sBAAsB;IAM9B;;;OAGG;IACH,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAShC;IAEF,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,wBAAwB;IAOhC,iBAAiB;IAajB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAiB5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAI1B;IAEF,OAAO,CAAC,QAAQ,CAAC,cAAc,CAS7B;IAGF,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,cAAc;IAQb,MAAM;CA8Cf"}
1
+ {"version":3,"file":"sds-select.component.d.ts","sourceRoot":"","sources":["../../src/sds-select/sds-select.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAGrC,KAAK,UAAU,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAEzD,MAAM,WAAW,cAAe,SAAQ,wBAAwB;IAC/D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;;AAED,qBAAa,kBAAmB,SAAQ,uBAAqF;IAE5H,OAAgB,MAAM,4BAAY;IAGS,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACtB,YAAY,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAC1E,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,CAAS;IAC9C,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,CAAQ;IAE5D,OAAO,CAAC,OAAO,CAAqB;IAEvD,OAAO,CAAC,aAAa,CAAuB;IAG5C,OAAO,CAAC,iBAAiB,CAAC,CAAmB;IAC7C,OAAO,CAAC,oBAAoB,CAAS;IAE5B,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;IAK5B,YAAY;IAoBZ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAYnD,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,qBAAqB;IA0B7B,OAAO,CAAC,uBAAuB;IAoC/B,OAAO,CAAC,sBAAsB;IAM9B;;;OAGG;IACH,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAShC;IAEO,cAAc;IAYvB,OAAO,CAAC,wBAAwB;IAOhC,iBAAiB;IAajB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAiB5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAI1B;IAEF,OAAO,CAAC,QAAQ,CAAC,cAAc,CAS7B;IAGF,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,cAAc;IAQb,MAAM;CA8Cf"}
package/dist/sds-select/sds-select.component.js CHANGED
@@ -165,8 +165,9 @@ export class SDSSelectComponent extends SDSDelegateInteractionMixin(SDSEventDisp
165
165
  this._pendingLightDomSync = false;
166
166
  }
167
167
  updateValidity() {
168
- if (!this.control)
168
+ if (!this.control) {
169
169
  return;
170
+ }
170
171
  if (this.control.checkValidity()) {
171
172
  this.internals.setValidity({});
172
173
  }
package/dist/sds-select/sds-select.component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-select.component.js","sourceRoot":"","sources":["../../src/sds-select/sds-select.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { SDSDelegateInteractionMixin, SDSEventDispatcherMixin, SDSFormControlMixin } from '../mixins';\nimport type { SDSFormControlAttributes } from '../mixins/sds-form-control-mixin';\nimport { SDS_SIZES } from '../types';\nimport { styles } from './sds-select.styles';\n\ntype SelectSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSSelectProps extends SDSFormControlAttributes {\n\t'default-value'?: string;\n\t'error-message'?: string;\n\t'help-text'?: string;\n\tlabel?: string;\n\trequired?: boolean;\n\tsize?: SelectSize;\n\tvalue?: string;\n}\n\nexport class SDSSelectComponent extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSFormControlMixin(LitElement))) {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Props\n\t@property({ type: String, reflect: true }) label?: SDSSelectProps['label'];\n\t@property({ type: String, attribute: false }) value?: SDSSelectProps['value'];\n\t@property({ type: String, attribute: 'default-value' }) defaultValue?: SDSSelectProps['default-value'];\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: SDSSelectProps['help-text'];\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: SDSSelectProps['error-message'];\n\t@property({ type: Boolean, reflect: true }) required: SDSSelectProps['required'] = false;\n\t@property({ type: String, reflect: true }) size: SDSSelectProps['size'] = 'md';\n\n\t@query('#control') private control!: HTMLSelectElement;\n\n\tprivate _defaultValue: string | null = null;\n\n\t// Observe in-place mutations to existing <option>/<optgroup> (text/attrs)\n\tprivate _lightDomObserver?: MutationObserver;\n\tprivate _pendingLightDomSync = false;\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\n\t\tif (this.value == null) {\n\t\t\tconst selected = Array.from(this.querySelectorAll('option')).find((option) => option.hasAttribute('selected') || option.defaultSelected);\n\n\t\t\tif (selected) {\n\t\t\t\tthis.value = selected.value;\n\t\t\t}\n\t\t}\n\n\t\tthis._startObservingLightDom();\n\t}\n\n\toverride disconnectedCallback(): void {\n\t\tthis._stopObservingLightDom();\n\t\tsuper.disconnectedCallback();\n\t}\n\n\toverride firstUpdated() {\n\t\t// Let the native <select> decide first (covers <option selected>)\n\t\tconst controlValue = this.control?.value ?? '';\n\n\t\t// Resolution order:\n\t\t// 1. value (controlled)\n\t\t// 2. default-value\n\t\t// 3. native control value\n\t\tthis.value = this.value ?? this.defaultValue ?? controlValue;\n\n\t\t// Sync native control\n\t\tthis.control.value = this.value ?? '';\n\n\t\t// Store default for form reset\n\t\tthis._defaultValue = this.value ?? null;\n\n\t\tthis.internals.setFormValue(this._defaultValue);\n\t\tthis.updateValidity();\n\t}\n\n\toverride updated(changed: Map<PropertyKey, unknown>) {\n\t\tsuper.updated(changed);\n\n\t\tif (!this.control) return;\n\n\t\tif (changed.has('value')) {\n\t\t\tthis.control.value = this.value ?? '';\n\t\t\tthis._setFormValue(this.value);\n\t\t\tthis.updateValidity();\n\t\t}\n\t}\n\n\tprivate _setFormValue(value: string | undefined) {\n\t\tthis.internals.setFormValue(value == null ? null : value);\n\t}\n\n\tprivate _scheduleLightDomSync() {\n\t\tif (this._pendingLightDomSync) return;\n\t\tthis._pendingLightDomSync = true;\n\n\t\tqueueMicrotask(() => {\n\t\t\tthis._pendingLightDomSync = false;\n\n\t\t\t// If light DOM indicates a selected option, treat it as source of truth.\n\t\t\tconst selectedFromLightDom = this.getLightDomSelectedValue();\n\t\t\tif (selectedFromLightDom !== undefined && selectedFromLightDom !== this.value) {\n\t\t\t\tthis.value = selectedFromLightDom;\n\t\t\t}\n\n\t\t\tthis.requestUpdate();\n\n\t\t\tthis.updateComplete.then(() => {\n\t\t\t\tif (!this.control) return;\n\n\t\t\t\tthis.control.value = this.value ?? '';\n\n\t\t\t\tthis._setFormValue(this.value);\n\t\t\t\tthis.updateValidity();\n\t\t\t});\n\t\t});\n\t}\n\n\tprivate _startObservingLightDom() {\n\t\tif (this._lightDomObserver) return;\n\n\t\tthis._lightDomObserver = new MutationObserver((mutations) => {\n\t\t\tfor (const m of mutations) {\n\t\t\t\tif (m.type === 'childList') {\n\t\t\t\t\tthis._scheduleLightDomSync();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif (m.type === 'characterData') {\n\t\t\t\t\tthis._scheduleLightDomSync();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif (m.type === 'attributes') {\n\t\t\t\t\tconst target = m.target;\n\t\t\t\t\tif (!(target instanceof HTMLElement)) continue;\n\n\t\t\t\t\tconst tag = target.tagName;\n\t\t\t\t\tif (tag === 'OPTION' || tag === 'OPTGROUP' || tag === 'HR') {\n\t\t\t\t\t\tthis._scheduleLightDomSync();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tthis._lightDomObserver.observe(this, {\n\t\t\tsubtree: true,\n\t\t\tchildList: true,\n\t\t\tattributes: true,\n\t\t\tcharacterData: true,\n\t\t});\n\t}\n\n\tprivate _stopObservingLightDom() {\n\t\tthis._lightDomObserver?.disconnect();\n\t\tthis._lightDomObserver = undefined;\n\t\tthis._pendingLightDomSync = false;\n\t}\n\n\t/**\n\t * Called whenever light DOM children change (options/optgroups/hr added/removed).\n\t * slotchange won't fire for in-place mutations, so we also use a MutationObserver.\n\t */\n\tprivate readonly _handleSlotChange = () => {\n\t\tif (this.value == null) {\n\t\t\tconst selectedValue = this.getLightDomSelectedValue();\n\t\t\tif (selectedValue != null) {\n\t\t\t\tthis.value = selectedValue;\n\t\t\t}\n\t\t}\n\n\t\tthis._scheduleLightDomSync();\n\t};\n\n\tprivate updateValidity() {\n\t\tif (!this.control) return;\n\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate getLightDomSelectedValue(): string | undefined {\n\t\t// First selected option wins (matches typical native parsing behavior for single-select)\n\t\tconst selected = Array.from(this.querySelectorAll('option')).find((option) => option.hasAttribute('selected') || option.defaultSelected);\n\t\treturn selected?.value;\n\t}\n\n\t// Form-associated lifecycle\n\tformResetCallback() {\n\t\tthis.internals.setFormValue(this._defaultValue);\n\n\t\tconst newValue = this._defaultValue ?? '';\n\t\tif (this.control) {\n\t\t\tthis.control.value = newValue;\n\t\t}\n\t\tthis.value = this._defaultValue ?? '';\n\n\t\tthis.updateValidity();\n\t}\n\n\t// Event handlers\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (!(event.target instanceof HTMLSelectElement)) return;\n\n\t\tif (this.disabled || this.readOnly) {\n\t\t\tevent.target.value = this.value ?? '';\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value = event.target.value;\n\n\t\tthis._setFormValue(this.value);\n\t\tthis.updateValidity();\n\n\t\tthis.dispatchSheriffEvent('input');\n\t\tthis.dispatchSheriffEvent('change');\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchSheriffEvent('focus');\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchSheriffEvent('blur');\n\t};\n\n\tprivate readonly _handleKeyDown = (event: KeyboardEvent) => {\n\t\tif (!this.readOnly) return;\n\n\t\tconst keysThatChange = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown', ' ', 'Enter']);\n\n\t\tif (keysThatChange.has(event.key)) {\n\t\t\tevent.preventDefault();\n\t\t\tevent.stopImmediatePropagation();\n\t\t}\n\t};\n\n\t// Rendering helpers: mirror light DOM structure into the internal <select>\n\tprivate renderFromLightDom() {\n\t\tconst nodes = this.children ?? [];\n\t\tconst children: HTMLElement[] = Array.from(nodes).filter((node): node is HTMLElement => node instanceof HTMLElement);\n\n\t\treturn children.map((node) => {\n\t\t\tswitch (node.tagName) {\n\t\t\t\tcase 'OPTION':\n\t\t\t\t\treturn this.renderOption(node as HTMLOptionElement);\n\t\t\t\tcase 'OPTGROUP':\n\t\t\t\t\treturn this.renderOptgroup(node as HTMLOptGroupElement);\n\t\t\t\tcase 'HR':\n\t\t\t\t\treturn html`<hr />`;\n\t\t\t\tdefault:\n\t\t\t\t\treturn nothing;\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate renderOption(option: HTMLOptionElement) {\n\t\tconst attrValue = option.getAttribute('value');\n\t\tconst optionValueForSelect = option.value;\n\t\tconst isSelected = this.value != null && optionValueForSelect === this.value;\n\n\t\treturn html` <option value=${ifDefined(attrValue === null ? undefined : attrValue)} ?disabled=${option.disabled} .selected=${isSelected}>${option.text}</option> `;\n\t}\n\n\tprivate renderOptgroup(group: HTMLOptGroupElement) {\n\t\tconst options = Array.from(group.querySelectorAll('option'));\n\n\t\treturn html` <optgroup label=${ifDefined(group.label || undefined)} ?disabled=${group.disabled}>${options.map((opt) => this.renderOption(opt))}</optgroup> `;\n\t}\n\n\t// Render\n\t// Hidden slot: holds light DOM <option>/<optgroup>/<hr> and triggers slotchange\n\toverride render() {\n\t\tconst selectClasses = {\n\t\t\t'sds-select': true,\n\t\t\t'sds-select--error': Boolean(this.errorMessage),\n\t\t};\n\n\t\tconst describedBy = [this.errorMessage ? 'error-message' : null, this.helpText ? 'help-text' : null].filter(Boolean).join(' ') || undefined;\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(selectClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html` <label for=\"control\" class=\"sds-select__label\"> ${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"m\"></sds-icon>` : nothing} ${this.label} </label> `\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p id=\"help-text\" class=\"sds-select__help-text\">${this.helpText}</p>` : nothing}\n\n\t\t\t\t<div hidden>\n\t\t\t\t\t<slot @slotchange=${this._handleSlotChange}></slot>\n\t\t\t\t</div>\n\n\t\t\t\t<select\n\t\t\t\t\tid=\"control\"\n\t\t\t\t\tclass=\"sds-select__control\"\n\t\t\t\t\tname=${ifDefined(this.name)}\n\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t?required=${this.required}\n\t\t\t\t\taria-readonly=${ifDefined(this.readOnly)}\n\t\t\t\t\taria-invalid=${this.errorMessage ? 'true' : 'false'}\n\t\t\t\t\taria-describedby=${ifDefined(describedBy)}\n\t\t\t\t\t@keydown=${this._handleKeyDown}\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>\n\t\t\t\t\t${this.renderFromLightDom()}\n\t\t\t\t</select>\n\n\t\t\t\t${this.errorMessage\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<sds-alert id=\"error-message\" variant=\"secondary\" data-palette=\"danger\">\n\t\t\t\t\t\t\t\t<p slot=\"message\">${this.errorMessage}</p>\n\t\t\t\t\t\t\t</sds-alert>\n\t\t\t\t\t\t`\n\t\t\t\t\t: nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n"]}
1
+ {"version":3,"file":"sds-select.component.js","sourceRoot":"","sources":["../../src/sds-select/sds-select.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { SDSDelegateInteractionMixin, SDSEventDispatcherMixin, SDSFormControlMixin } from '../mixins';\nimport type { SDSFormControlAttributes } from '../mixins/sds-form-control-mixin';\nimport { SDS_SIZES } from '../types';\nimport { styles } from './sds-select.styles';\n\ntype SelectSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSSelectProps extends SDSFormControlAttributes {\n\t'default-value'?: string;\n\t'error-message'?: string;\n\t'help-text'?: string;\n\tlabel?: string;\n\trequired?: boolean;\n\tsize?: SelectSize;\n\tvalue?: string;\n}\n\nexport class SDSSelectComponent extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSFormControlMixin(LitElement))) {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Props\n\t@property({ type: String, reflect: true }) label?: SDSSelectProps['label'];\n\t@property({ type: String, attribute: false }) value?: SDSSelectProps['value'];\n\t@property({ type: String, attribute: 'default-value' }) defaultValue?: SDSSelectProps['default-value'];\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: SDSSelectProps['help-text'];\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: SDSSelectProps['error-message'];\n\t@property({ type: Boolean, reflect: true }) required: SDSSelectProps['required'] = false;\n\t@property({ type: String, reflect: true }) size: SDSSelectProps['size'] = 'md';\n\n\t@query('#control') private control!: HTMLSelectElement;\n\n\tprivate _defaultValue: string | null = null;\n\n\t// Observe in-place mutations to existing <option>/<optgroup> (text/attrs)\n\tprivate _lightDomObserver?: MutationObserver;\n\tprivate _pendingLightDomSync = false;\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\n\t\tif (this.value == null) {\n\t\t\tconst selected = Array.from(this.querySelectorAll('option')).find((option) => option.hasAttribute('selected') || option.defaultSelected);\n\n\t\t\tif (selected) {\n\t\t\t\tthis.value = selected.value;\n\t\t\t}\n\t\t}\n\n\t\tthis._startObservingLightDom();\n\t}\n\n\toverride disconnectedCallback(): void {\n\t\tthis._stopObservingLightDom();\n\t\tsuper.disconnectedCallback();\n\t}\n\n\toverride firstUpdated() {\n\t\t// Let the native <select> decide first (covers <option selected>)\n\t\tconst controlValue = this.control?.value ?? '';\n\n\t\t// Resolution order:\n\t\t// 1. value (controlled)\n\t\t// 2. default-value\n\t\t// 3. native control value\n\t\tthis.value = this.value ?? this.defaultValue ?? controlValue;\n\n\t\t// Sync native control\n\t\tthis.control.value = this.value ?? '';\n\n\t\t// Store default for form reset\n\t\tthis._defaultValue = this.value ?? null;\n\n\t\tthis.internals.setFormValue(this._defaultValue);\n\t\tthis.updateValidity();\n\t}\n\n\toverride updated(changed: Map<PropertyKey, unknown>) {\n\t\tsuper.updated(changed);\n\n\t\tif (!this.control) return;\n\n\t\tif (changed.has('value')) {\n\t\t\tthis.control.value = this.value ?? '';\n\t\t\tthis._setFormValue(this.value);\n\t\t\tthis.updateValidity();\n\t\t}\n\t}\n\n\tprivate _setFormValue(value: string | undefined) {\n\t\tthis.internals.setFormValue(value == null ? null : value);\n\t}\n\n\tprivate _scheduleLightDomSync() {\n\t\tif (this._pendingLightDomSync) return;\n\t\tthis._pendingLightDomSync = true;\n\n\t\tqueueMicrotask(() => {\n\t\t\tthis._pendingLightDomSync = false;\n\n\t\t\t// If light DOM indicates a selected option, treat it as source of truth.\n\t\t\tconst selectedFromLightDom = this.getLightDomSelectedValue();\n\t\t\tif (selectedFromLightDom !== undefined && selectedFromLightDom !== this.value) {\n\t\t\t\tthis.value = selectedFromLightDom;\n\t\t\t}\n\n\t\t\tthis.requestUpdate();\n\n\t\t\tthis.updateComplete.then(() => {\n\t\t\t\tif (!this.control) return;\n\n\t\t\t\tthis.control.value = this.value ?? '';\n\n\t\t\t\tthis._setFormValue(this.value);\n\t\t\t\tthis.updateValidity();\n\t\t\t});\n\t\t});\n\t}\n\n\tprivate _startObservingLightDom() {\n\t\tif (this._lightDomObserver) return;\n\n\t\tthis._lightDomObserver = new MutationObserver((mutations) => {\n\t\t\tfor (const m of mutations) {\n\t\t\t\tif (m.type === 'childList') {\n\t\t\t\t\tthis._scheduleLightDomSync();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif (m.type === 'characterData') {\n\t\t\t\t\tthis._scheduleLightDomSync();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif (m.type === 'attributes') {\n\t\t\t\t\tconst target = m.target;\n\t\t\t\t\tif (!(target instanceof HTMLElement)) continue;\n\n\t\t\t\t\tconst tag = target.tagName;\n\t\t\t\t\tif (tag === 'OPTION' || tag === 'OPTGROUP' || tag === 'HR') {\n\t\t\t\t\t\tthis._scheduleLightDomSync();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tthis._lightDomObserver.observe(this, {\n\t\t\tsubtree: true,\n\t\t\tchildList: true,\n\t\t\tattributes: true,\n\t\t\tcharacterData: true,\n\t\t});\n\t}\n\n\tprivate _stopObservingLightDom() {\n\t\tthis._lightDomObserver?.disconnect();\n\t\tthis._lightDomObserver = undefined;\n\t\tthis._pendingLightDomSync = false;\n\t}\n\n\t/**\n\t * Called whenever light DOM children change (options/optgroups/hr added/removed).\n\t * slotchange won't fire for in-place mutations, so we also use a MutationObserver.\n\t */\n\tprivate readonly _handleSlotChange = () => {\n\t\tif (this.value == null) {\n\t\t\tconst selectedValue = this.getLightDomSelectedValue();\n\t\t\tif (selectedValue != null) {\n\t\t\t\tthis.value = selectedValue;\n\t\t\t}\n\t\t}\n\n\t\tthis._scheduleLightDomSync();\n\t};\n\n\toverride updateValidity() {\n\t\tif (!this.control) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate getLightDomSelectedValue(): string | undefined {\n\t\t// First selected option wins (matches typical native parsing behavior for single-select)\n\t\tconst selected = Array.from(this.querySelectorAll('option')).find((option) => option.hasAttribute('selected') || option.defaultSelected);\n\t\treturn selected?.value;\n\t}\n\n\t// Form-associated lifecycle\n\tformResetCallback() {\n\t\tthis.internals.setFormValue(this._defaultValue);\n\n\t\tconst newValue = this._defaultValue ?? '';\n\t\tif (this.control) {\n\t\t\tthis.control.value = newValue;\n\t\t}\n\t\tthis.value = this._defaultValue ?? '';\n\n\t\tthis.updateValidity();\n\t}\n\n\t// Event handlers\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (!(event.target instanceof HTMLSelectElement)) return;\n\n\t\tif (this.disabled || this.readOnly) {\n\t\t\tevent.target.value = this.value ?? '';\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value = event.target.value;\n\n\t\tthis._setFormValue(this.value);\n\t\tthis.updateValidity();\n\n\t\tthis.dispatchSheriffEvent('input');\n\t\tthis.dispatchSheriffEvent('change');\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchSheriffEvent('focus');\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchSheriffEvent('blur');\n\t};\n\n\tprivate readonly _handleKeyDown = (event: KeyboardEvent) => {\n\t\tif (!this.readOnly) return;\n\n\t\tconst keysThatChange = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown', ' ', 'Enter']);\n\n\t\tif (keysThatChange.has(event.key)) {\n\t\t\tevent.preventDefault();\n\t\t\tevent.stopImmediatePropagation();\n\t\t}\n\t};\n\n\t// Rendering helpers: mirror light DOM structure into the internal <select>\n\tprivate renderFromLightDom() {\n\t\tconst nodes = this.children ?? [];\n\t\tconst children: HTMLElement[] = Array.from(nodes).filter((node): node is HTMLElement => node instanceof HTMLElement);\n\n\t\treturn children.map((node) => {\n\t\t\tswitch (node.tagName) {\n\t\t\t\tcase 'OPTION':\n\t\t\t\t\treturn this.renderOption(node as HTMLOptionElement);\n\t\t\t\tcase 'OPTGROUP':\n\t\t\t\t\treturn this.renderOptgroup(node as HTMLOptGroupElement);\n\t\t\t\tcase 'HR':\n\t\t\t\t\treturn html`<hr />`;\n\t\t\t\tdefault:\n\t\t\t\t\treturn nothing;\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate renderOption(option: HTMLOptionElement) {\n\t\tconst attrValue = option.getAttribute('value');\n\t\tconst optionValueForSelect = option.value;\n\t\tconst isSelected = this.value != null && optionValueForSelect === this.value;\n\n\t\treturn html` <option value=${ifDefined(attrValue === null ? undefined : attrValue)} ?disabled=${option.disabled} .selected=${isSelected}>${option.text}</option> `;\n\t}\n\n\tprivate renderOptgroup(group: HTMLOptGroupElement) {\n\t\tconst options = Array.from(group.querySelectorAll('option'));\n\n\t\treturn html` <optgroup label=${ifDefined(group.label || undefined)} ?disabled=${group.disabled}>${options.map((opt) => this.renderOption(opt))}</optgroup> `;\n\t}\n\n\t// Render\n\t// Hidden slot: holds light DOM <option>/<optgroup>/<hr> and triggers slotchange\n\toverride render() {\n\t\tconst selectClasses = {\n\t\t\t'sds-select': true,\n\t\t\t'sds-select--error': Boolean(this.errorMessage),\n\t\t};\n\n\t\tconst describedBy = [this.errorMessage ? 'error-message' : null, this.helpText ? 'help-text' : null].filter(Boolean).join(' ') || undefined;\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(selectClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html` <label for=\"control\" class=\"sds-select__label\"> ${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"m\"></sds-icon>` : nothing} ${this.label} </label> `\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p id=\"help-text\" class=\"sds-select__help-text\">${this.helpText}</p>` : nothing}\n\n\t\t\t\t<div hidden>\n\t\t\t\t\t<slot @slotchange=${this._handleSlotChange}></slot>\n\t\t\t\t</div>\n\n\t\t\t\t<select\n\t\t\t\t\tid=\"control\"\n\t\t\t\t\tclass=\"sds-select__control\"\n\t\t\t\t\tname=${ifDefined(this.name)}\n\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t?required=${this.required}\n\t\t\t\t\taria-readonly=${ifDefined(this.readOnly)}\n\t\t\t\t\taria-invalid=${this.errorMessage ? 'true' : 'false'}\n\t\t\t\t\taria-describedby=${ifDefined(describedBy)}\n\t\t\t\t\t@keydown=${this._handleKeyDown}\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>\n\t\t\t\t\t${this.renderFromLightDom()}\n\t\t\t\t</select>\n\n\t\t\t\t${this.errorMessage\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<sds-alert id=\"error-message\" variant=\"secondary\" data-palette=\"danger\">\n\t\t\t\t\t\t\t\t<p slot=\"message\">${this.errorMessage}</p>\n\t\t\t\t\t\t\t</sds-alert>\n\t\t\t\t\t\t`\n\t\t\t\t\t: nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n"]}
package/dist/sds-select/sds-select.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-select.styles.d.ts","sourceRoot":"","sources":["../../src/sds-select/sds-select.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgLlB,CAAC"}
1
+ {"version":3,"file":"sds-select.styles.d.ts","sourceRoot":"","sources":["../../src/sds-select/sds-select.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiLlB,CAAC"}
package/dist/sds-select/sds-select.styles.js CHANGED
@@ -36,6 +36,7 @@ export const styles = css `
36
36
  --_sds-select-focus-color: var(--sds-select-focus-color, var(--sds-color-states-focus-outer));
37
37
  --_sds-select-focus-inner-color: var(--sds-select-focus-inner-color, var(--sds-color-states-focus-inner));
38
38
  --_sds-select-focus-spacing: var(--sds-select-focus-spacing, var(--sds-color-states-focus-spacing));
39
+ --_sds-select-focus-outline-size: var(--sds-select-focus-outline-size, var(--sds-color-states-focus-outline-size));
39
40
 
40
41
  --_sds-select-error-border-color: var(--sds-select-error-border-color, var(--sds-color-alert-danger-border-default, var(--sds-color-neutral-border-strong)));
41
42
  --_sds-select-error-text-color: var(--sds-select-error-text-color, var(--sds-color-alert-danger-text-default, var(--sds-color-neutral-text-default)));
@@ -106,8 +107,8 @@ export const styles = css `
106
107
  }
107
108
 
108
109
  &:focus-visible {
109
- box-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-select-focus-inner-color);
110
- outline: var(--_sds-select-focus-spacing) solid var(--_sds-select-focus-color);
110
+ box-shadow: 0 0 0 var(--_sds-select-focus-spacing) var(--_sds-select-focus-inner-color);
111
+ outline: var(--_sds-select-focus-outline-size) solid var(--_sds-select-focus-color);
111
112
  outline-offset: var(--_sds-select-focus-spacing);
112
113
  }
113
114
 
package/dist/sds-select/sds-select.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-select.styles.js","sourceRoot":"","sources":["../../src/sds-select/sds-select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-select-background-color: var(--sds-select-background-color, var(--sds-color-background-default, var(--sds-color-neutral-background-default)));\n\t\t--_sds-select-text-color: var(--sds-select-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-select-border-color: var(--sds-select-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-select-border-width: var(--sds-select-border-width, var(--sds-border-sm));\n\t\t--_sds-select-border-radius: var(--sds-select-border-radius, var(--sds-radius-sm));\n\n\t\t--_sds-select-font-family: var(--sds-select-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-select-font-size: var(--sds-select-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-select-font-weight: var(--sds-select-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-select-line-height: var(--sds-select-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-select-min-height: var(--sds-select-height, var(--sds-components-button-md));\n\n\t\t--_sds-select-gap: var(--sds-select-gap, var(--sds-spacing-3xs));\n\t\t--_sds-select-padding-block: var(--sds-select-padding-block, 0);\n\t\t--_sds-select-padding-inline: var(--sds-select-padding-inline, var(--sds-spacing-xs));\n\t\t--_sds-select-padding-icon-inline-end: var(--sds-spacing-lg);\n\n\t\t--_sds-select-disabled-opacity: var(--sds-select-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-select-max-width: var(--sds-select-max-width, var(--sds-typography-max-line-width, 60ch));\n\t\t--_sds-select-width: var(--sds-select-width, fit-content);\n\n\t\t--_sds-select-label-text-color: var(--sds-select-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-select-label-font-size: var(--sds-select-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-select-label-font-weight: var(--sds-select-label-font-weight, var(--sds-typography-font-weight-medium));\n\t\t--_sds-select-label-line-height: var(--sds-select-label-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-select-helptext-text-color: var(--sds-select-helptext-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-select-helptext-font-size: var(--sds-select-helptext-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-select-helptext-font-weight: var(--sds-select-helptext-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-select-helptext-line-height: var(--sds-select-helptext-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-select-focus-color: var(--sds-select-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-select-focus-inner-color: var(--sds-select-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-select-focus-spacing: var(--sds-select-focus-spacing, var(--sds-color-states-focus-spacing));\n\n\t\t--_sds-select-error-border-color: var(--sds-select-error-border-color, var(--sds-color-alert-danger-border-default, var(--sds-color-neutral-border-strong)));\n\t\t--_sds-select-error-text-color: var(--sds-select-error-text-color, var(--sds-color-alert-danger-text-default, var(--sds-color-neutral-text-default)));\n\n\t\tall: unset;\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-select {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-select-gap);\n\t\tfont-family: var(--_sds-select-font-family);\n\t}\n\n\t.sds-select__label {\n\t\tcolor: var(--_sds-select-label-text-color);\n\t\tfont-size: var(--_sds-select-label-font-size);\n\t\tfont-weight: var(--_sds-select-label-font-weight);\n\t\tline-height: var(--_sds-select-label-line-height);\n\t}\n\n\t.sds-select__label:has(sds-icon) {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: var(--_sds-select-gap);\n\t}\n\n\t.sds-select__help-text {\n\t\tcolor: var(--_sds-select-helptext-text-color);\n\t\tfont-size: var(--_sds-select-helptext-font-size);\n\t\tfont-weight: var(--_sds-select-helptext-font-weight);\n\t\tline-height: var(--_sds-select-helptext-line-height);\n\t\tmargin: 0;\n\t}\n\n\t.sds-select__control {\n\t\tbox-sizing: border-box;\n\t\twidth: var(--_sds-select-width);\n\t\tmax-width: var(--_sds-select-max-width);\n\n\t\tcolor: var(--_sds-select-text-color);\n\t\tbackground-color: var(--_sds-select-background-color);\n\n\t\tpadding-block: var(--_sds-select-padding-block);\n\t\tpadding-inline-start: var(--_sds-select-padding-inline);\n\t\tpadding-inline-end: var(--_sds-select-padding-icon-inline-end);\n\n\t\tline-height: var(--_sds-select-line-height);\n\t\tfont-size: var(--_sds-select-font-size);\n\t\tfont-weight: var(--_sds-select-font-weight);\n\t\tfont-family: var(--_sds-select-font-family);\n\n\t\tmin-height: var(--_sds-select-min-height);\n\t\tborder-radius: var(--_sds-select-border-radius);\n\t\tborder: var(--_sds-select-border-width) solid var(--_sds-select-border-color);\n\t\tappearance: none;\n\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 32 32'%3E%3Cpath d='M16 20.5 8 12.5 9.867 10.633 16 16.767 22.133 10.633 24 12.5Z'/%3E%3C/svg%3E\");\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: 2rem;\n\t\tbackground-position: top 50% right var(--sds-spacing-3xs);\n\n\t\t&:hover {\n\t\t\t--_sds-select-border-color: var(--sds-select-border-color, var(--sds-color-border-strong, var(--sds-color-neutral-border-strong)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-select-focus-inner-color);\n\t\t\toutline: var(--_sds-select-focus-spacing) solid var(--_sds-select-focus-color);\n\t\t\toutline-offset: var(--_sds-select-focus-spacing);\n\t\t}\n\n\t\t&:open {\n\t\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 32 32'%3E%3Cpath d='m16 11.5 8 8-1.867 1.867L16 15.233l-6.133 6.134L8 19.5z'/%3E%3C/svg%3E\");\n\t\t}\n\t}\n\n\t.sds-select--error .sds-select__control {\n\t\tborder-color: var(--_sds-select-error-border-color);\n\t}\n\n\t.sds-select__error {\n\t\tcolor: var(--_sds-select-error-text-color);\n\t\tfont-size: var(--_sds-select-helptext-font-size);\n\t\tline-height: var(--_sds-select-helptext-line-height);\n\t\tmargin: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: var(--sds-spacing-3xs);\n\t}\n\n\t:host(:disabled) .sds-select__control {\n\t\topacity: var(--_sds-select-disabled-opacity);\n\t\tcursor: not-allowed;\n\t}\n\n\t.sds-select__icon {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tinset-inline-end: var(--_sds-select-padding-inline);\n\t\ttransform: translateY(-50%);\n\t\twidth: var(--sds-components-icon-md, 1rem);\n\t\theight: var(--sds-components-icon-md, 1rem);\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\tmask: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.47 6.47a.75.75 0 0 1 1.06 0L8 8.94l2.47-2.47a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 0 1 0-1.06z' fill='black'/%3E%3C/svg%3E\")\n\t\t\tno-repeat center / contain;\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-select-background-color: var(--sds-select-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\n\t\t& .sds-select__control {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-select-min-height: var(--sds-select-height, var(--sds-components-button-sm));\n\t\t--_sds-select-font-size: var(--sds-select-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-select-line-height: var(--sds-select-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-select-label-font-size: var(--sds-select-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-select-label-line-height: var(--sds-select-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-select-helptext-font-size: var(--sds-select-helptext-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-select-helptext-line-height: var(--sds-select-helptext-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-select-min-height: var(--sds-select-height, var(--sds-components-button-lg));\n\t\t--_sds-select-font-size: var(--sds-select-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-select-line-height: var(--sds-select-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-select-label-font-size: var(--sds-select-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-select-label-line-height: var(--sds-select-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-select-helptext-font-size: var(--sds-select-helptext-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-select-helptext-line-height: var(--sds-select-helptext-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-select.styles.js","sourceRoot":"","sources":["../../src/sds-select/sds-select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiLxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-select-background-color: var(--sds-select-background-color, var(--sds-color-background-default, var(--sds-color-neutral-background-default)));\n\t\t--_sds-select-text-color: var(--sds-select-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-select-border-color: var(--sds-select-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-select-border-width: var(--sds-select-border-width, var(--sds-border-sm));\n\t\t--_sds-select-border-radius: var(--sds-select-border-radius, var(--sds-radius-sm));\n\n\t\t--_sds-select-font-family: var(--sds-select-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-select-font-size: var(--sds-select-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-select-font-weight: var(--sds-select-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-select-line-height: var(--sds-select-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-select-min-height: var(--sds-select-height, var(--sds-components-button-md));\n\n\t\t--_sds-select-gap: var(--sds-select-gap, var(--sds-spacing-3xs));\n\t\t--_sds-select-padding-block: var(--sds-select-padding-block, 0);\n\t\t--_sds-select-padding-inline: var(--sds-select-padding-inline, var(--sds-spacing-xs));\n\t\t--_sds-select-padding-icon-inline-end: var(--sds-spacing-lg);\n\n\t\t--_sds-select-disabled-opacity: var(--sds-select-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-select-max-width: var(--sds-select-max-width, var(--sds-typography-max-line-width, 60ch));\n\t\t--_sds-select-width: var(--sds-select-width, fit-content);\n\n\t\t--_sds-select-label-text-color: var(--sds-select-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-select-label-font-size: var(--sds-select-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-select-label-font-weight: var(--sds-select-label-font-weight, var(--sds-typography-font-weight-medium));\n\t\t--_sds-select-label-line-height: var(--sds-select-label-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-select-helptext-text-color: var(--sds-select-helptext-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-select-helptext-font-size: var(--sds-select-helptext-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-select-helptext-font-weight: var(--sds-select-helptext-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-select-helptext-line-height: var(--sds-select-helptext-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-select-focus-color: var(--sds-select-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-select-focus-inner-color: var(--sds-select-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-select-focus-spacing: var(--sds-select-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-select-focus-outline-size: var(--sds-select-focus-outline-size, var(--sds-color-states-focus-outline-size));\n\n\t\t--_sds-select-error-border-color: var(--sds-select-error-border-color, var(--sds-color-alert-danger-border-default, var(--sds-color-neutral-border-strong)));\n\t\t--_sds-select-error-text-color: var(--sds-select-error-text-color, var(--sds-color-alert-danger-text-default, var(--sds-color-neutral-text-default)));\n\n\t\tall: unset;\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-select {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-select-gap);\n\t\tfont-family: var(--_sds-select-font-family);\n\t}\n\n\t.sds-select__label {\n\t\tcolor: var(--_sds-select-label-text-color);\n\t\tfont-size: var(--_sds-select-label-font-size);\n\t\tfont-weight: var(--_sds-select-label-font-weight);\n\t\tline-height: var(--_sds-select-label-line-height);\n\t}\n\n\t.sds-select__label:has(sds-icon) {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: var(--_sds-select-gap);\n\t}\n\n\t.sds-select__help-text {\n\t\tcolor: var(--_sds-select-helptext-text-color);\n\t\tfont-size: var(--_sds-select-helptext-font-size);\n\t\tfont-weight: var(--_sds-select-helptext-font-weight);\n\t\tline-height: var(--_sds-select-helptext-line-height);\n\t\tmargin: 0;\n\t}\n\n\t.sds-select__control {\n\t\tbox-sizing: border-box;\n\t\twidth: var(--_sds-select-width);\n\t\tmax-width: var(--_sds-select-max-width);\n\n\t\tcolor: var(--_sds-select-text-color);\n\t\tbackground-color: var(--_sds-select-background-color);\n\n\t\tpadding-block: var(--_sds-select-padding-block);\n\t\tpadding-inline-start: var(--_sds-select-padding-inline);\n\t\tpadding-inline-end: var(--_sds-select-padding-icon-inline-end);\n\n\t\tline-height: var(--_sds-select-line-height);\n\t\tfont-size: var(--_sds-select-font-size);\n\t\tfont-weight: var(--_sds-select-font-weight);\n\t\tfont-family: var(--_sds-select-font-family);\n\n\t\tmin-height: var(--_sds-select-min-height);\n\t\tborder-radius: var(--_sds-select-border-radius);\n\t\tborder: var(--_sds-select-border-width) solid var(--_sds-select-border-color);\n\t\tappearance: none;\n\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 32 32'%3E%3Cpath d='M16 20.5 8 12.5 9.867 10.633 16 16.767 22.133 10.633 24 12.5Z'/%3E%3C/svg%3E\");\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: 2rem;\n\t\tbackground-position: top 50% right var(--sds-spacing-3xs);\n\n\t\t&:hover {\n\t\t\t--_sds-select-border-color: var(--sds-select-border-color, var(--sds-color-border-strong, var(--sds-color-neutral-border-strong)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--_sds-select-focus-spacing) var(--_sds-select-focus-inner-color);\n\t\t\toutline: var(--_sds-select-focus-outline-size) solid var(--_sds-select-focus-color);\n\t\t\toutline-offset: var(--_sds-select-focus-spacing);\n\t\t}\n\n\t\t&:open {\n\t\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 32 32'%3E%3Cpath d='m16 11.5 8 8-1.867 1.867L16 15.233l-6.133 6.134L8 19.5z'/%3E%3C/svg%3E\");\n\t\t}\n\t}\n\n\t.sds-select--error .sds-select__control {\n\t\tborder-color: var(--_sds-select-error-border-color);\n\t}\n\n\t.sds-select__error {\n\t\tcolor: var(--_sds-select-error-text-color);\n\t\tfont-size: var(--_sds-select-helptext-font-size);\n\t\tline-height: var(--_sds-select-helptext-line-height);\n\t\tmargin: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: var(--sds-spacing-3xs);\n\t}\n\n\t:host(:disabled) .sds-select__control {\n\t\topacity: var(--_sds-select-disabled-opacity);\n\t\tcursor: not-allowed;\n\t}\n\n\t.sds-select__icon {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tinset-inline-end: var(--_sds-select-padding-inline);\n\t\ttransform: translateY(-50%);\n\t\twidth: var(--sds-components-icon-md, 1rem);\n\t\theight: var(--sds-components-icon-md, 1rem);\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\tmask: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.47 6.47a.75.75 0 0 1 1.06 0L8 8.94l2.47-2.47a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 0 1 0-1.06z' fill='black'/%3E%3C/svg%3E\")\n\t\t\tno-repeat center / contain;\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-select-background-color: var(--sds-select-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\n\t\t& .sds-select__control {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-select-min-height: var(--sds-select-height, var(--sds-components-button-sm));\n\t\t--_sds-select-font-size: var(--sds-select-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-select-line-height: var(--sds-select-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-select-label-font-size: var(--sds-select-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-select-label-line-height: var(--sds-select-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-select-helptext-font-size: var(--sds-select-helptext-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-select-helptext-line-height: var(--sds-select-helptext-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-select-min-height: var(--sds-select-height, var(--sds-components-button-lg));\n\t\t--_sds-select-font-size: var(--sds-select-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-select-line-height: var(--sds-select-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-select-label-font-size: var(--sds-select-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-select-label-line-height: var(--sds-select-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-select-helptext-font-size: var(--sds-select-helptext-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-select-helptext-line-height: var(--sds-select-helptext-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}
package/dist/sds-stepper-step/sds-stepper-step.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-stepper-step.styles.d.ts","sourceRoot":"","sources":["../../src/sds-stepper-step/sds-stepper-step.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAoQlB,CAAC"}
1
+ {"version":3,"file":"sds-stepper-step.styles.d.ts","sourceRoot":"","sources":["../../src/sds-stepper-step/sds-stepper-step.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAqQlB,CAAC"}
package/dist/sds-stepper-step/sds-stepper-step.styles.js CHANGED
@@ -59,6 +59,7 @@ export const styles = css `
59
59
  --_sds-stepper-step-focus-color: var(--sds-stepper-step-focus-color, var(--sds-color-states-focus-outer));
60
60
  --_sds-stepper-step-focus-inner-color: var(--sds-stepper-step-focus-inner-color, var(--sds-color-states-focus-inner));
61
61
  --_sds-stepper-step-focus-spacing: var(--sds-stepper-step-focus-spacing, var(--sds-color-states-focus-spacing));
62
+ --_sds-stepper-step-focus-outline-size: var(--sds-stepper-step-focus-outline-size, var(--sds-color-states-focus-outline-size));
62
63
 
63
64
  width: fit-content;
64
65
  }
@@ -130,9 +131,9 @@ export const styles = css `
130
131
  cursor: pointer;
131
132
 
132
133
  &:focus-visible {
133
- box-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-stepper-step-focus-inner-color);
134
- outline: 3px solid var(--_sds-stepper-step-focus-color);
135
- outline-offset: 3px;
134
+ box-shadow: 0 0 0 var(--_sds-stepper-step-focus-spacing) var(--_sds-stepper-step-focus-inner-color);
135
+ outline: var(--_sds-stepper-step-focus-outline-size) solid var(--_sds-stepper-step-focus-color);
136
+ outline-offset: var(--_sds-stepper-step-focus-spacing);
136
137
  isolation: isolate;
137
138
  }
138
139
  }