@politiet/sheriff-web-components 2.0.1 → 2.0.2

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 (24) hide show
  1. package/dist/sds-card/sds-card.d.ts +1 -1
  2. package/dist/sds-card/sds-card.d.ts.map +1 -1
  3. package/dist/sds-card/sds-card.js +5 -5
  4. package/dist/sds-card/sds-card.js.map +1 -1
  5. package/dist/sds-card/sds-card.styles.js +6 -6
  6. package/dist/sds-card/sds-card.styles.js.map +1 -1
  7. package/dist/sds-checkbox/sds-checkbox.styles.js +17 -17
  8. package/dist/sds-checkbox/sds-checkbox.styles.js.map +1 -1
  9. package/dist/sds-checkbox-group/sds-checkbox-group.styles.js +2 -2
  10. package/dist/sds-checkbox-group/sds-checkbox-group.styles.js.map +1 -1
  11. package/dist/sds-chip/sds-chip.styles.js +19 -19
  12. package/dist/sds-chip/sds-chip.styles.js.map +1 -1
  13. package/dist/sds-radio/sds-radio.styles.js +27 -27
  14. package/dist/sds-radio/sds-radio.styles.js.map +1 -1
  15. package/dist/sds-radio-group/sds-radio-group.styles.js +2 -2
  16. package/dist/sds-radio-group/sds-radio-group.styles.js.map +1 -1
  17. package/dist/sds-switch/sds-switch.styles.js +3 -3
  18. package/dist/sds-switch/sds-switch.styles.js.map +1 -1
  19. package/dist/sds-textarea/sds-textarea.styles.js +11 -11
  20. package/dist/sds-textarea/sds-textarea.styles.js.map +1 -1
  21. package/dist/sds-textfield/sds-textfield.styles.js +7 -7
  22. package/dist/sds-textfield/sds-textfield.styles.js.map +1 -1
  23. package/dist/sheriff-web-components.js +99 -99
  24. package/package.json +2 -2
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqMxB,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-neutral-text-default));\n\n\t\t--_sds-radio-help-text-color: var(--sds-radio-help-text-color, 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-neutral-surface-default));\n\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, 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\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: 'input content';\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-alert-danger-text-default));\n\t}\n\n\t.sds-radio__help-text {\n\t\tgrid-column: content;\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: content;\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: input;\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-neutral-surface-tinted));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, 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-main-action-default));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-default));\n\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, 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-neutral-surface-tinted));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, 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-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-neutral-surface-default));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, 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-main-action-hover));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, 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-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-neutral-surface-default));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, 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-main-action-active));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, 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-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-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-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-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-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqMxB,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\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: 'input content';\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: content;\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: content;\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: input;\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-radio-group/sds-radio-group.styles.js CHANGED
@@ -5,7 +5,7 @@ export const styles = css `
5
5
  --_sds-radio-group-row-gap: var(--sds-radio-group-row-gap, var(--sds-spacing-md));
6
6
  --_sds-radio-group-font-family: var(--sds-radio-group-font-family, var(--sds-typography-font-family-roboto));
7
7
  --_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-md));
8
- --_sds-radio-group-text-color: var(--sds-radio-group-text-color, var(--sds-color-neutral-text-default));
8
+ --_sds-radio-group-text-color: var(--sds-radio-group-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
9
9
  --_sds-radio-group-max-line-width: var(--sds-radio-group-max-line-width, var(--sds-typography-max-line-width));
10
10
  --_sds-radio-group-disabled-opacity: var(--sds-radio-group-disabled-opacity, var(--sds-color-states-disabled-opacity));
11
11
 
@@ -13,7 +13,7 @@ export const styles = css `
13
13
  --_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-md));
14
14
  --_sds_radio-group-legend-help-text-gap: var(--sds-radio-group-legend-help-text-gap, var(--sds-spacing-4xs));
15
15
 
16
- --_sds-radio-group-help-text-color: var(--sds-radio-group-help-text-color, var(--sds-color-neutral-text-subtle));
16
+ --_sds-radio-group-help-text-color: var(--sds-radio-group-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
17
17
  --_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-md));
18
18
  --_sds-radio-group-help-text-font-weight: var(--sds-radio-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));
19
19
  --_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-md));
package/dist/sds-radio-group/sds-radio-group.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-radio-group.styles.js","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-radio-group-gap: var(--sds-radio-group-gap, var(--sds-spacing-xs));\n\t\t--_sds-radio-group-row-gap: var(--sds-radio-group-row-gap, var(--sds-spacing-md));\n\t\t--_sds-radio-group-font-family: var(--sds-radio-group-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-radio-group-text-color: var(--sds-radio-group-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-radio-group-max-line-width: var(--sds-radio-group-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-radio-group-disabled-opacity: var(--sds-radio-group-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-radio-group-legend-font-weight: var(--sds-radio-group-legend-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds_radio-group-legend-help-text-gap: var(--sds-radio-group-legend-help-text-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-radio-group-help-text-color: var(--sds-radio-group-help-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-radio-group-help-text-font-weight: var(--sds-radio-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\tdisplay: block;\n\t\tcontain: layout style;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-radio-group {\n\t\tborder: 0;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tcolor: var(--_sds-radio-group-text-color);\n\t\tfont-family: var(--_sds-radio-group-font-family);\n\t\tfont-size: var(--_sds-radio-group-font-size);\n\t}\n\n\t.sds-radio-group--disabled {\n\t\t.sds-radio-group__legend,\n\t\t.sds-radio-group__help-text,\n\t\tsds-alert {\n\t\t\topacity: var(--_sds-radio-group-disabled-opacity);\n\t\t}\n\t}\n\n\tsds-alert {\n\t\t--sds-alert-padding: 0px;\n\t}\n\n\t.sds-radio-group__legend {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: var(--sds-spacing-5xs);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tfont-weight: var(--_sds-radio-group-legend-font-weight);\n\t\tline-height: var(--_sds-radio-group-legend-line-height);\n\t\tmax-width: var(--_sds-radio-group-max-line-width);\n\n\t\t+ .sds-radio-group__help-text {\n\t\t\tmargin-block-start: var(--_sds_radio-group-legend-help-text-gap);\n\t\t}\n\t}\n\n\t.sds-radio-group__help-text {\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-radio-group-help-text-color);\n\t\tfont-size: var(--_sds-radio-group-help-text-font-size);\n\t\tfont-weight: var(--_sds-radio-group-help-text-font-weight);\n\t\tline-height: var(--_sds-radio-group-help-text-line-height);\n\t\tmax-width: var(--_sds-radio-group-max-line-width);\n\t}\n\n\t.sds-radio-group__radios {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-radio-group-gap);\n\t\tmargin-top: var(--_sds-radio-group-gap);\n\n\t\t&.sds-radio-group--row {\n\t\t\tflex-direction: row;\n\t\t\tgap: var(--_sds-radio-group-row-gap);\n\t\t}\n\t}\n\n\tsds-alert {\n\t\tmargin-top: var(--_sds-radio-group-gap);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-radio-group.styles.js","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-radio-group-gap: var(--sds-radio-group-gap, var(--sds-spacing-xs));\n\t\t--_sds-radio-group-row-gap: var(--sds-radio-group-row-gap, var(--sds-spacing-md));\n\t\t--_sds-radio-group-font-family: var(--sds-radio-group-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-radio-group-text-color: var(--sds-radio-group-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-radio-group-max-line-width: var(--sds-radio-group-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-radio-group-disabled-opacity: var(--sds-radio-group-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-radio-group-legend-font-weight: var(--sds-radio-group-legend-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds_radio-group-legend-help-text-gap: var(--sds-radio-group-legend-help-text-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-radio-group-help-text-color: var(--sds-radio-group-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-radio-group-help-text-font-weight: var(--sds-radio-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\tdisplay: block;\n\t\tcontain: layout style;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-radio-group {\n\t\tborder: 0;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tcolor: var(--_sds-radio-group-text-color);\n\t\tfont-family: var(--_sds-radio-group-font-family);\n\t\tfont-size: var(--_sds-radio-group-font-size);\n\t}\n\n\t.sds-radio-group--disabled {\n\t\t.sds-radio-group__legend,\n\t\t.sds-radio-group__help-text,\n\t\tsds-alert {\n\t\t\topacity: var(--_sds-radio-group-disabled-opacity);\n\t\t}\n\t}\n\n\tsds-alert {\n\t\t--sds-alert-padding: 0px;\n\t}\n\n\t.sds-radio-group__legend {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: var(--sds-spacing-5xs);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tfont-weight: var(--_sds-radio-group-legend-font-weight);\n\t\tline-height: var(--_sds-radio-group-legend-line-height);\n\t\tmax-width: var(--_sds-radio-group-max-line-width);\n\n\t\t+ .sds-radio-group__help-text {\n\t\t\tmargin-block-start: var(--_sds_radio-group-legend-help-text-gap);\n\t\t}\n\t}\n\n\t.sds-radio-group__help-text {\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-radio-group-help-text-color);\n\t\tfont-size: var(--_sds-radio-group-help-text-font-size);\n\t\tfont-weight: var(--_sds-radio-group-help-text-font-weight);\n\t\tline-height: var(--_sds-radio-group-help-text-line-height);\n\t\tmax-width: var(--_sds-radio-group-max-line-width);\n\t}\n\n\t.sds-radio-group__radios {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-radio-group-gap);\n\t\tmargin-top: var(--_sds-radio-group-gap);\n\n\t\t&.sds-radio-group--row {\n\t\t\tflex-direction: row;\n\t\t\tgap: var(--_sds-radio-group-row-gap);\n\t\t}\n\t}\n\n\tsds-alert {\n\t\tmargin-top: var(--_sds-radio-group-gap);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}
package/dist/sds-switch/sds-switch.styles.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { css } from 'lit';
2
2
  export const styles = css `
3
3
  :host {
4
- --_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-neutral-surface-default));
5
- --_sds-switch-text-color: var(--sds-switch-text-color, var(--sds-color-neutral-text-default));
4
+ --_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
5
+ --_sds-switch-text-color: var(--sds-switch-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
6
6
 
7
7
  --_sds-switch-transition-time: var(--sds-switch-transition-time, 200ms);
8
8
 
9
- --_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-neutral-border-default));
9
+ --_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));
10
10
  --_sds-switch-border-width: var(--sds-switch-border-width, var(--sds-border-md));
11
11
  --_sds-switch-border-radius: var(--sds-switch-border-radius, var(--sds-radius-full));
12
12
 
package/dist/sds-switch/sds-switch.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-switch.styles.js","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-neutral-surface-default));\n\t\t--_sds-switch-text-color: var(--sds-switch-text-color, var(--sds-color-neutral-text-default));\n\n\t\t--_sds-switch-transition-time: var(--sds-switch-transition-time, 200ms);\n\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-neutral-border-default));\n\t\t--_sds-switch-border-width: var(--sds-switch-border-width, var(--sds-border-md));\n\t\t--_sds-switch-border-radius: var(--sds-switch-border-radius, var(--sds-radius-full));\n\n\t\t--_sds-switch-font-family: var(--sds-switch-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-switch-font-weight: var(--sds-switch-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-switch-gap: var(--sds-switch-gap, var(--sds-spacing-3xs));\n\t\t--_sds-switch-icon-gap: var(--sds-switch-icon-gap, var(--sds-spacing-4xs));\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-md));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-md));\n\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-md));\n\t\t--_sds-switch-button-gap: var(--sds-switch-button-gap, var(--sds-spacing-4xs));\n\t\t--_sds-switch-button-position: var(--sds-switch-button-position, calc(var(--_sds-switch-button-gap) - var(--_sds-switch-border-width)));\n\t\t--_sds-switch-button-radius: var(--sds-switch-button-radius, var(--sds-radius-full));\n\n\t\t--_sds-switch-focus-outline-width: var(--sds-switch-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-switch-focus-outline-color: var(--sds-switch-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-switch-focus-outline-offset: var(--sds-switch-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-switch-focus-inner-color: var(--sds-switch-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-switch-disabled-opacity: var(--sds-switch-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host([hidden]) {\n\t\tdisplay: none;\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-neutral-border-subtle));\n\t\tcursor: default;\n\t\tpointer-events: none;\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-switch-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='s']),\n\t:host([size='sm']) {\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-sm));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-sm));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-sm));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='l']),\n\t:host([size='lg']) {\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-lg));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-lg));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-lg));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n\n\t.sds-switch {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: var(--_sds-switch-gap);\n\t\tfont-family: var(--_sds-switch-font-family);\n\t}\n\n\t.sds-switch__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\t\tgap: var(--_sds-switch-icon-gap);\n\t\tcolor: var(--_sds-switch-text-color);\n\t\tfont-size: var(--_sds-switch-font-size);\n\t\tfont-weight: var(--_sds-switch-font-weight);\n\t\tline-height: var(--_sds-switch-line-height);\n\t}\n\n\t.sds-switch__label--hidden:not(:focus):not(:active):not(:focus-within) {\n\t\tclip-path: inset(50%);\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\twhite-space: nowrap;\n\t\twidth: 1px;\n\t}\n\n\t.sds-switch__input {\n\t\tappearance: none;\n\t\tposition: relative;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\t\tmargin: 0;\n\n\t\twidth: var(--_sds-switch-width);\n\t\theight: var(--_sds-switch-height);\n\n\t\tbackground-color: var(--_sds-switch-background-color);\n\t\tborder: var(--_sds-switch-border-width) solid var(--_sds-switch-border-color);\n\t\tborder-radius: var(--_sds-switch-border-radius);\n\n\t\ttransition: background-color var(--_sds-switch-transition-time) ease;\n\t}\n\n\t.sds-switch__input::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%) translateX(var(--_sds-switch-button-position));\n\n\t\twidth: var(--_sds-switch-button-size);\n\t\theight: var(--_sds-switch-button-size);\n\n\t\tbackground-color: var(--_sds-switch-button-color);\n\t\tborder-radius: var(--_sds-switch-button-radius);\n\n\t\ttransition:\n\t\t\ttransform var(--_sds-switch-transition-time) ease,\n\t\t\tbackground-color var(--_sds-switch-transition-time) ease;\n\t}\n\n\t.sds-switch__input:focus-visible {\n\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-switch-focus-inner-color);\n\t\toutline: var(--_sds-switch-focus-outline-width) solid var(--_sds-switch-focus-outline-color);\n\t\toutline-offset: var(--_sds-switch-focus-outline-offset);\n\t}\n\n\t.sds-switch__input:checked:not([readonly]) {\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-main-action-default));\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color-checked, var(--sds-color-main-action-default));\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-surface-default));\n\t}\n\n\t.sds-switch__input:checked::before {\n\t\t--_sds-switch-button-position: calc(var(--_sds-switch-width) - var(--_sds-switch-button-size) - var(--_sds-switch-button-gap) - var(--_sds-switch-border-width));\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-switch.styles.js","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-switch-text-color: var(--sds-switch-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-switch-transition-time: var(--sds-switch-transition-time, 200ms);\n\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-switch-border-width: var(--sds-switch-border-width, var(--sds-border-md));\n\t\t--_sds-switch-border-radius: var(--sds-switch-border-radius, var(--sds-radius-full));\n\n\t\t--_sds-switch-font-family: var(--sds-switch-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-switch-font-weight: var(--sds-switch-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-switch-gap: var(--sds-switch-gap, var(--sds-spacing-3xs));\n\t\t--_sds-switch-icon-gap: var(--sds-switch-icon-gap, var(--sds-spacing-4xs));\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-md));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-md));\n\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-md));\n\t\t--_sds-switch-button-gap: var(--sds-switch-button-gap, var(--sds-spacing-4xs));\n\t\t--_sds-switch-button-position: var(--sds-switch-button-position, calc(var(--_sds-switch-button-gap) - var(--_sds-switch-border-width)));\n\t\t--_sds-switch-button-radius: var(--sds-switch-button-radius, var(--sds-radius-full));\n\n\t\t--_sds-switch-focus-outline-width: var(--sds-switch-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-switch-focus-outline-color: var(--sds-switch-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-switch-focus-outline-offset: var(--sds-switch-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-switch-focus-inner-color: var(--sds-switch-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-switch-disabled-opacity: var(--sds-switch-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host([hidden]) {\n\t\tdisplay: none;\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-neutral-border-subtle));\n\t\tcursor: default;\n\t\tpointer-events: none;\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-switch-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='s']),\n\t:host([size='sm']) {\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-sm));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-sm));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-sm));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='l']),\n\t:host([size='lg']) {\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-lg));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-lg));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-lg));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n\n\t.sds-switch {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: var(--_sds-switch-gap);\n\t\tfont-family: var(--_sds-switch-font-family);\n\t}\n\n\t.sds-switch__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\t\tgap: var(--_sds-switch-icon-gap);\n\t\tcolor: var(--_sds-switch-text-color);\n\t\tfont-size: var(--_sds-switch-font-size);\n\t\tfont-weight: var(--_sds-switch-font-weight);\n\t\tline-height: var(--_sds-switch-line-height);\n\t}\n\n\t.sds-switch__label--hidden:not(:focus):not(:active):not(:focus-within) {\n\t\tclip-path: inset(50%);\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\twhite-space: nowrap;\n\t\twidth: 1px;\n\t}\n\n\t.sds-switch__input {\n\t\tappearance: none;\n\t\tposition: relative;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\t\tmargin: 0;\n\n\t\twidth: var(--_sds-switch-width);\n\t\theight: var(--_sds-switch-height);\n\n\t\tbackground-color: var(--_sds-switch-background-color);\n\t\tborder: var(--_sds-switch-border-width) solid var(--_sds-switch-border-color);\n\t\tborder-radius: var(--_sds-switch-border-radius);\n\n\t\ttransition: background-color var(--_sds-switch-transition-time) ease;\n\t}\n\n\t.sds-switch__input::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%) translateX(var(--_sds-switch-button-position));\n\n\t\twidth: var(--_sds-switch-button-size);\n\t\theight: var(--_sds-switch-button-size);\n\n\t\tbackground-color: var(--_sds-switch-button-color);\n\t\tborder-radius: var(--_sds-switch-button-radius);\n\n\t\ttransition:\n\t\t\ttransform var(--_sds-switch-transition-time) ease,\n\t\t\tbackground-color var(--_sds-switch-transition-time) ease;\n\t}\n\n\t.sds-switch__input:focus-visible {\n\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-switch-focus-inner-color);\n\t\toutline: var(--_sds-switch-focus-outline-width) solid var(--_sds-switch-focus-outline-color);\n\t\toutline-offset: var(--_sds-switch-focus-outline-offset);\n\t}\n\n\t.sds-switch__input:checked:not([readonly]) {\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-main-action-default));\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color-checked, var(--sds-color-main-action-default));\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-surface-default));\n\t}\n\n\t.sds-switch__input:checked::before {\n\t\t--_sds-switch-button-position: calc(var(--_sds-switch-width) - var(--_sds-switch-button-size) - var(--_sds-switch-button-gap) - var(--_sds-switch-border-width));\n\t}\n`;\n"]}
package/dist/sds-textarea/sds-textarea.styles.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { css } from 'lit';
2
2
  export const styles = css `
3
3
  :host {
4
- --_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-neutral-background-default));
5
- --_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-neutral-text-default));
4
+ --_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-background-default, var(--sds-color-neutral-background-default)));
5
+ --_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
6
6
 
7
- --_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-neutral-border-default));
7
+ --_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));
8
8
  --_sds-textarea-border-width: var(--sds-textarea-border-width, var(--sds-border-sm));
9
9
  --_sds-textarea-border-radius: var(--sds-textarea-border-radius, var(--sds-radius-sm));
10
10
 
@@ -19,19 +19,19 @@ export const styles = css `
19
19
  --_sds-textarea-padding-inline: var(--sds-textarea-padding-inline, var(--sds-spacing-2xs));
20
20
  --_sds-textarea-disabled-opacity: var(--sds-textarea-disabled-opacity, var(--sds-color-states-disabled-opacity));
21
21
 
22
- --_sds-textarea-label-text-color: var(--sds-textarea-label-text-color, var(--sds-color-neutral-text-default));
22
+ --_sds-textarea-label-text-color: var(--sds-textarea-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
23
23
  --_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-md));
24
24
  --_sds-textarea-label-font-weight: var(--sds-textarea-label-font-weight, var(--sds-typography-font-weight-medium));
25
25
  --_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-md));
26
26
 
27
27
  --_sds-textarea-label-gap: var(--sds-textarea-gap, var(--sds-spacing-4xs));
28
28
 
29
- --_sds-textarea-helptext-text-color: var(--sds-textarea-helptext-text-color, var(--sds-color-neutral-text-subtle));
29
+ --_sds-textarea-helptext-text-color: var(--sds-textarea-helptext-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
30
30
  --_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-md));
31
31
  --_sds-textarea-helptext-font-weight: var(--sds-textarea-helptext-font-weight, var(--sds-typography-font-weight-regular));
32
32
  --_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-md));
33
33
 
34
- --_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-neutral-text-default));
34
+ --_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
35
35
  --_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-md));
36
36
  --_sds-textarea-counter-font-weight: var(--sds-textarea-counter-font-weight, var(--sds-typography-font-weight-regular));
37
37
  --_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-md));
@@ -74,7 +74,7 @@ export const styles = css `
74
74
  resize: vertical;
75
75
 
76
76
  &:hover {
77
- --_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-main-action-hover));
77
+ --_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
78
78
  }
79
79
 
80
80
  &:focus-visible {
@@ -84,8 +84,8 @@ export const styles = css `
84
84
  }
85
85
 
86
86
  &:active {
87
- --_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-main-action-active));
88
- --_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-main-text-default));
87
+ --_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
88
+ --_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));
89
89
  }
90
90
  }
91
91
 
@@ -142,8 +142,8 @@ export const styles = css `
142
142
  }
143
143
 
144
144
  :host([readonly]) {
145
- --_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-neutral-surface-tinted));
146
- --_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-neutral-border-subtle));
145
+ --_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));
146
+ --_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));
147
147
  .sds-textarea__input {
148
148
  resize: none;
149
149
  }
package/dist/sds-textarea/sds-textarea.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-textarea.styles.js","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwLxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-neutral-background-default));\n\t\t--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-neutral-text-default));\n\n\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-neutral-border-default));\n\t\t--_sds-textarea-border-width: var(--sds-textarea-border-width, var(--sds-border-sm));\n\t\t--_sds-textarea-border-radius: var(--sds-textarea-border-radius, var(--sds-radius-sm));\n\n\t\t--_sds-textarea-font-family: var(--sds-textarea-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-font-weight: var(--sds-textarea-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-md));\n\t\t--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-md));\n\n\t\t--_sds-textarea-gap: var(--sds-textarea-gap, var(--sds-spacing-3xs));\n\t\t--_sds-textarea-padding-block: var(--sds-textarea-padding-block, var(--sds-spacing-2xs));\n\t\t--_sds-textarea-padding-inline: var(--sds-textarea-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-textarea-disabled-opacity: var(--sds-textarea-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-textarea-label-text-color: var(--sds-textarea-label-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-label-font-weight: var(--sds-textarea-label-font-weight, var(--sds-typography-font-weight-medium));\n\t\t--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textarea-label-gap: var(--sds-textarea-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-textarea-helptext-text-color: var(--sds-textarea-helptext-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-helptext-font-weight: var(--sds-textarea-helptext-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-counter-font-weight: var(--sds-textarea-counter-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textarea-focus-color: var(--sds-textarea-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-textarea-focus-inner-color: var(--sds-textarea-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-textarea-focus-spacing: var(--sds-textarea-focus-spacing, var(--sds-color-states-focus-spacing));\n\n\t\tall: unset;\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-textarea {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-textarea-gap);\n\t\tfont-family: var(--_sds-textarea-font-family);\n\n\t\t.sds-textarea__input-container {\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.sds-textarea__input {\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--_sds-textarea-text-color);\n\t\t\tpadding: var(--_sds-textarea-padding-block) var(--_sds-textarea-padding-inline);\n\t\t\tline-height: var(--_sds-textarea-line-height);\n\t\t\tfont-size: var(--_sds-textarea-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-font-weight);\n\t\t\tfont-family: var(--_sds-textarea-font-family);\n\t\t\tjustify-content: flex-end;\n\t\t\tborder-radius: var(--_sds-textarea-border-radius);\n\t\t\tborder: var(--_sds-textarea-border-width) solid var(--_sds-textarea-border-color);\n\t\t\tbackground: var(--_sds-textarea-background-color);\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t\twidth: 100%;\n\t\t\tmin-height: var(--_sds-textarea-min-height);\n\t\t\tresize: vertical;\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-main-action-hover));\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-textarea-focus-inner-color);\n\t\t\t\toutline: 3px solid var(--_sds-textarea-focus-color);\n\t\t\t\toutline-offset: 3px;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-main-action-active));\n\t\t\t\t--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-main-text-default));\n\t\t\t}\n\t\t}\n\n\t\t.sds-textarea__label {\n\t\t\tcolor: var(--_sds-textarea-label-text-color);\n\t\t\tdisplay: block;\n\t\t\tfont-size: var(--_sds-textarea-label-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-label-font-weight);\n\t\t\tline-height: var(--_sds-textarea-label-line-height);\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t.sds-textarea__help-text {\n\t\t\tcolor: var(--_sds-textarea-helptext-text-color);\n\t\t\tfont-size: var(--_sds-textarea-helptext-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-helptext-font-weight);\n\t\t\tline-height: var(--_sds-textarea-helptext-line-height);\n\t\t\tmargin: 0;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t*:has(.sds-textarea__label) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: var(--_sds-textarea-label-gap);\n\t\t}\n\n\t\t.sds-textarea__character-counter {\n\t\t\tcolor: var(--_sds-textarea-counter-text-color);\n\t\t\tfont-size: var(--_sds-textarea-counter-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-counter-font-weight);\n\t\t\tline-height: var(--_sds-textarea-counter-line-height);\n\t\t\tmargin: 0;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t&.sds-textarea--error {\n\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-border-default));\n\t\t\t--_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-alert-danger-text-subtle));\n\n\t\t\t& .sds-textarea__input:hover {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-alert-danger-text-default));\n\t\t\t}\n\n\t\t\t& .sds-textarea__input:active {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\n\t\t\t& :is(sds-alert) {\n\t\t\t\t--sds-alert-padding: 0px;\n\t\t\t}\n\t\t}\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-neutral-border-subtle));\n\t\t.sds-textarea__input {\n\t\t\tresize: none;\n\t\t}\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-textarea-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-sm));\n\t\t--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-sm));\n\n\t\t--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-sm));\n\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-sm));\n\n\t\t--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-lg));\n\t\t--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-lg));\n\n\t\t--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-lg));\n\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-lg));\n\n\t\t--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-textarea.styles.js","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwLxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-background-default, var(--sds-color-neutral-background-default)));\n\t\t--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-textarea-border-width: var(--sds-textarea-border-width, var(--sds-border-sm));\n\t\t--_sds-textarea-border-radius: var(--sds-textarea-border-radius, var(--sds-radius-sm));\n\n\t\t--_sds-textarea-font-family: var(--sds-textarea-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-font-weight: var(--sds-textarea-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-md));\n\t\t--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-md));\n\n\t\t--_sds-textarea-gap: var(--sds-textarea-gap, var(--sds-spacing-3xs));\n\t\t--_sds-textarea-padding-block: var(--sds-textarea-padding-block, var(--sds-spacing-2xs));\n\t\t--_sds-textarea-padding-inline: var(--sds-textarea-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-textarea-disabled-opacity: var(--sds-textarea-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-textarea-label-text-color: var(--sds-textarea-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-label-font-weight: var(--sds-textarea-label-font-weight, var(--sds-typography-font-weight-medium));\n\t\t--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textarea-label-gap: var(--sds-textarea-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-textarea-helptext-text-color: var(--sds-textarea-helptext-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-helptext-font-weight: var(--sds-textarea-helptext-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-counter-font-weight: var(--sds-textarea-counter-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textarea-focus-color: var(--sds-textarea-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-textarea-focus-inner-color: var(--sds-textarea-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-textarea-focus-spacing: var(--sds-textarea-focus-spacing, var(--sds-color-states-focus-spacing));\n\n\t\tall: unset;\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-textarea {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-textarea-gap);\n\t\tfont-family: var(--_sds-textarea-font-family);\n\n\t\t.sds-textarea__input-container {\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.sds-textarea__input {\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--_sds-textarea-text-color);\n\t\t\tpadding: var(--_sds-textarea-padding-block) var(--_sds-textarea-padding-inline);\n\t\t\tline-height: var(--_sds-textarea-line-height);\n\t\t\tfont-size: var(--_sds-textarea-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-font-weight);\n\t\t\tfont-family: var(--_sds-textarea-font-family);\n\t\t\tjustify-content: flex-end;\n\t\t\tborder-radius: var(--_sds-textarea-border-radius);\n\t\t\tborder: var(--_sds-textarea-border-width) solid var(--_sds-textarea-border-color);\n\t\t\tbackground: var(--_sds-textarea-background-color);\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t\twidth: 100%;\n\t\t\tmin-height: var(--_sds-textarea-min-height);\n\t\t\tresize: vertical;\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-textarea-focus-inner-color);\n\t\t\t\toutline: 3px solid var(--_sds-textarea-focus-color);\n\t\t\t\toutline-offset: 3px;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t\t--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\t\t\t}\n\t\t}\n\n\t\t.sds-textarea__label {\n\t\t\tcolor: var(--_sds-textarea-label-text-color);\n\t\t\tdisplay: block;\n\t\t\tfont-size: var(--_sds-textarea-label-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-label-font-weight);\n\t\t\tline-height: var(--_sds-textarea-label-line-height);\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t.sds-textarea__help-text {\n\t\t\tcolor: var(--_sds-textarea-helptext-text-color);\n\t\t\tfont-size: var(--_sds-textarea-helptext-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-helptext-font-weight);\n\t\t\tline-height: var(--_sds-textarea-helptext-line-height);\n\t\t\tmargin: 0;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t*:has(.sds-textarea__label) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: var(--_sds-textarea-label-gap);\n\t\t}\n\n\t\t.sds-textarea__character-counter {\n\t\t\tcolor: var(--_sds-textarea-counter-text-color);\n\t\t\tfont-size: var(--_sds-textarea-counter-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-counter-font-weight);\n\t\t\tline-height: var(--_sds-textarea-counter-line-height);\n\t\t\tmargin: 0;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t&.sds-textarea--error {\n\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-border-default));\n\t\t\t--_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-alert-danger-text-subtle));\n\n\t\t\t& .sds-textarea__input:hover {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-alert-danger-text-default));\n\t\t\t}\n\n\t\t\t& .sds-textarea__input:active {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\n\t\t\t& :is(sds-alert) {\n\t\t\t\t--sds-alert-padding: 0px;\n\t\t\t}\n\t\t}\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t.sds-textarea__input {\n\t\t\tresize: none;\n\t\t}\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-textarea-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-sm));\n\t\t--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-sm));\n\n\t\t--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-sm));\n\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-sm));\n\n\t\t--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-lg));\n\t\t--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-lg));\n\n\t\t--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-lg));\n\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-lg));\n\n\t\t--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}
package/dist/sds-textfield/sds-textfield.styles.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { css } from 'lit';
2
2
  export const styles = css `
3
3
  :host {
4
- --_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-neutral-background-default));
5
- --_sds-textfield-text-color: var(--sds-textfield-text-color, var(--sds-color-neutral-text-default));
4
+ --_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-background-default, var(--sds-color-neutral-background-default)));
5
+ --_sds-textfield-text-color: var(--sds-textfield-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
6
6
 
7
- --_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-neutral-border-default));
7
+ --_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));
8
8
  --_sds-textfield-border-width: var(--sds-textfield-border-width, var(--sds-border-sm));
9
9
  --_sds-textfield-border-radius: var(--sds-textfield-border-radius, var(--sds-radius-sm));
10
10
 
@@ -21,12 +21,12 @@ export const styles = css `
21
21
  --_sds-textfield-disabled-opacity: var(--sds-textfield-disabled-opacity, var(--sds-color-states-disabled-opacity));
22
22
  --_sds-textfield-max-width: var(--sds-textfield-input-max-width, var(--sds-typography-max-line-width, 80ch));
23
23
 
24
- --_sds-textfield-label-text-color: var(--sds-textfield-label-text-color, var(--sds-color-neutral-text-default));
24
+ --_sds-textfield-label-text-color: var(--sds-textfield-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
25
25
  --_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-md));
26
26
  --_sds-textfield-label-font-weight: var(--sds-textfield-label-font-weight, var(--sds-typography-font-weight-medium));
27
27
  --_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-md));
28
28
 
29
- --_sds-textfield-helptext-text-color: var(--sds-textfield-helptext-text-color, var(--sds-color-neutral-text-subtle));
29
+ --_sds-textfield-helptext-text-color: var(--sds-textfield-helptext-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
30
30
  --_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-md));
31
31
  --_sds-textfield-helptext-font-weight: var(--sds-textfield-helptext-font-weight, var(--sds-typography-font-weight-regular));
32
32
  --_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-md));
@@ -69,7 +69,7 @@ export const styles = css `
69
69
  width: 100%;
70
70
 
71
71
  &:hover {
72
- --_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-neutral-border-strong));
72
+ --_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-border-strong, var(--sds-color-neutral-border-strong)));
73
73
  }
74
74
 
75
75
  &:focus-visible {
@@ -113,7 +113,7 @@ export const styles = css `
113
113
  }
114
114
 
115
115
  :host([readonly]) {
116
- --_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-neutral-surface-tinted));
116
+ --_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));
117
117
  }
118
118
 
119
119
  :host([disabled]) {
package/dist/sds-textfield/sds-textfield.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-textfield.styles.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-neutral-background-default));\n\t\t--_sds-textfield-text-color: var(--sds-textfield-text-color, var(--sds-color-neutral-text-default));\n\n\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-neutral-border-default));\n\t\t--_sds-textfield-border-width: var(--sds-textfield-border-width, var(--sds-border-sm));\n\t\t--_sds-textfield-border-radius: var(--sds-textfield-border-radius, var(--sds-radius-sm));\n\n\t\t--_sds-textfield-font-family: var(--sds-textfield-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-textfield-font-weight: var(--sds-textfield-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-md));\n\n\t\t--_sds-textfield-gap: var(--sds-textfield-gap, var(--sds-spacing-3xs));\n\t\t--_sds-textfield-padding-block: var(--sds-textfield-padding-block, 0);\n\t\t--_sds-textfield-padding-inline: var(--sds-textfield-padding-inline, var(--sds-spacing-xs));\n\t\t--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-md)));\n\t\t--_sds-textfield-disabled-opacity: var(--sds-textfield-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-textfield-max-width: var(--sds-textfield-input-max-width, var(--sds-typography-max-line-width, 80ch));\n\n\t\t--_sds-textfield-label-text-color: var(--sds-textfield-label-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-textfield-label-font-weight: var(--sds-textfield-label-font-weight, var(--sds-typography-font-weight-medium));\n\t\t--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textfield-helptext-text-color: var(--sds-textfield-helptext-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-textfield-helptext-font-weight: var(--sds-textfield-helptext-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textfield-focus-color: var(--sds-textfield-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-textfield-focus-inner-color: var(--sds-textfield-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-textfield-focus-spacing: var(--sds-textfield-focus-spacing, var(--sds-color-states-focus-spacing));\n\n\t\t--_sds-textfield-icon-right: var(--sds-textfield-icon-right, var(--sds-spacing-xs));\n\t\t--_sds-textfield-icon-top: var(--sds-textfield-icon-top, var(--sds-spacing-3xs));\n\n\t\tall: unset;\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-textfield {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-textfield-gap);\n\t\tfont-family: var(--_sds-textfield-font-family);\n\n\t\t.sds-textfield__input-container {\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.sds-textfield__input {\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--_sds-textfield-text-color);\n\t\t\tpadding: var(--_sds-textfield-padding-block) var(--_sds-textfield-padding-inline);\n\t\t\tline-height: var(--_sds-textfield-line-height);\n\t\t\tfont-size: var(--_sds-textfield-font-size);\n\t\t\tfont-weight: var(--_sds-textfield-font-weight);\n\t\t\tfont-family: var(--_sds-textfield-font-family);\n\t\t\tmin-height: var(--_sds-textfield-min-height);\n\t\t\tborder-radius: var(--_sds-textfield-border-radius);\n\t\t\tborder: var(--_sds-textfield-border-width) solid var(--_sds-textfield-border-color);\n\t\t\tbackground: var(--_sds-textfield-background-color);\n\t\t\tmax-width: var(--_sds-textfield-max-width);\n\t\t\twidth: 100%;\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-neutral-border-strong));\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-textfield-focus-inner-color);\n\t\t\t\toutline: 3px solid var(--_sds-textfield-focus-color);\n\t\t\t\toutline-offset: 3px;\n\t\t\t}\n\t\t}\n\n\t\t.sds-textfield__label {\n\t\t\tcolor: var(--_sds-textfield-text-color);\n\t\t\tfont-size: var(--_sds-textfield-label-font-size);\n\t\t\tfont-weight: var(--_sds-textfield-label-font-weight);\n\t\t\tline-height: var(--_sds-textfield-label-line-height);\n\t\t}\n\n\t\t.sds-textfield__label:has(sds-icon) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tgap: var(--_sds-textfield-gap);\n\t\t}\n\n\t\t.sds-textfield__help-text {\n\t\t\tdisplay: block;\n\t\t\tcolor: var(--_sds-textfield-helptext-text-color);\n\t\t\tfont-size: var(--_sds-textfield-helptext-font-size);\n\t\t\tfont-weight: var(--_sds-textfield-helptext-font-weight);\n\t\t\tline-height: var(--_sds-textfield-helptext-line-height);\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t.sds-textfield--error {\n\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t& .sds-textfield__input:hover,\n\t\t& .sds-textfield__input:hover {\n\t\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-alert-danger-border-default));\n\t\t}\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-neutral-surface-tinted));\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-textfield-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t.sds-textfield--has-icon {\n\t\t.sds-textfield__input {\n\t\t\tpadding-right: var(--_sds-textfield-padding-icon);\n\t\t}\n\t}\n\n\t::slotted([slot='after']) {\n\t\tposition: absolute;\n\t\ttop: var(--_sds-textfield-icon-top);\n\t\tright: var(--_sds-textfield-icon-right);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-sm));\n\t\t--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textfield-icon-top: var(--sds-textfield-icon-top, calc((var(--_sds-textfield-min-height) - var(--sds-components-icon-sm)) / 2));\n\t\t--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-sm)));\n\n\t\t&:has(sds-icon:not([size])) {\n\t\t\t--sds-icon-size: var(--sds-textfield-icon-size, var(--sds-components-icon-sm));\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-lg));\n\t\t--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textfield-icon-top: var(--sds-textfield-icon-top, var(--sds-spacing-3xs));\n\t\t--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-lg)));\n\n\t\t&:has(sds-icon:not([size])) {\n\t\t\t--sds-icon-size: var(--sds-textfield-icon-size, var(--sds-components-icon-lg));\n\t\t}\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-textfield.styles.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-background-default, var(--sds-color-neutral-background-default)));\n\t\t--_sds-textfield-text-color: var(--sds-textfield-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-textfield-border-width: var(--sds-textfield-border-width, var(--sds-border-sm));\n\t\t--_sds-textfield-border-radius: var(--sds-textfield-border-radius, var(--sds-radius-sm));\n\n\t\t--_sds-textfield-font-family: var(--sds-textfield-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-textfield-font-weight: var(--sds-textfield-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-md));\n\n\t\t--_sds-textfield-gap: var(--sds-textfield-gap, var(--sds-spacing-3xs));\n\t\t--_sds-textfield-padding-block: var(--sds-textfield-padding-block, 0);\n\t\t--_sds-textfield-padding-inline: var(--sds-textfield-padding-inline, var(--sds-spacing-xs));\n\t\t--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-md)));\n\t\t--_sds-textfield-disabled-opacity: var(--sds-textfield-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-textfield-max-width: var(--sds-textfield-input-max-width, var(--sds-typography-max-line-width, 80ch));\n\n\t\t--_sds-textfield-label-text-color: var(--sds-textfield-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-textfield-label-font-weight: var(--sds-textfield-label-font-weight, var(--sds-typography-font-weight-medium));\n\t\t--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textfield-helptext-text-color: var(--sds-textfield-helptext-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-textfield-helptext-font-weight: var(--sds-textfield-helptext-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textfield-focus-color: var(--sds-textfield-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-textfield-focus-inner-color: var(--sds-textfield-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-textfield-focus-spacing: var(--sds-textfield-focus-spacing, var(--sds-color-states-focus-spacing));\n\n\t\t--_sds-textfield-icon-right: var(--sds-textfield-icon-right, var(--sds-spacing-xs));\n\t\t--_sds-textfield-icon-top: var(--sds-textfield-icon-top, var(--sds-spacing-3xs));\n\n\t\tall: unset;\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-textfield {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-textfield-gap);\n\t\tfont-family: var(--_sds-textfield-font-family);\n\n\t\t.sds-textfield__input-container {\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.sds-textfield__input {\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--_sds-textfield-text-color);\n\t\t\tpadding: var(--_sds-textfield-padding-block) var(--_sds-textfield-padding-inline);\n\t\t\tline-height: var(--_sds-textfield-line-height);\n\t\t\tfont-size: var(--_sds-textfield-font-size);\n\t\t\tfont-weight: var(--_sds-textfield-font-weight);\n\t\t\tfont-family: var(--_sds-textfield-font-family);\n\t\t\tmin-height: var(--_sds-textfield-min-height);\n\t\t\tborder-radius: var(--_sds-textfield-border-radius);\n\t\t\tborder: var(--_sds-textfield-border-width) solid var(--_sds-textfield-border-color);\n\t\t\tbackground: var(--_sds-textfield-background-color);\n\t\t\tmax-width: var(--_sds-textfield-max-width);\n\t\t\twidth: 100%;\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-border-strong, var(--sds-color-neutral-border-strong)));\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-textfield-focus-inner-color);\n\t\t\t\toutline: 3px solid var(--_sds-textfield-focus-color);\n\t\t\t\toutline-offset: 3px;\n\t\t\t}\n\t\t}\n\n\t\t.sds-textfield__label {\n\t\t\tcolor: var(--_sds-textfield-text-color);\n\t\t\tfont-size: var(--_sds-textfield-label-font-size);\n\t\t\tfont-weight: var(--_sds-textfield-label-font-weight);\n\t\t\tline-height: var(--_sds-textfield-label-line-height);\n\t\t}\n\n\t\t.sds-textfield__label:has(sds-icon) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tgap: var(--_sds-textfield-gap);\n\t\t}\n\n\t\t.sds-textfield__help-text {\n\t\t\tdisplay: block;\n\t\t\tcolor: var(--_sds-textfield-helptext-text-color);\n\t\t\tfont-size: var(--_sds-textfield-helptext-font-size);\n\t\t\tfont-weight: var(--_sds-textfield-helptext-font-weight);\n\t\t\tline-height: var(--_sds-textfield-helptext-line-height);\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t.sds-textfield--error {\n\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t& .sds-textfield__input:hover,\n\t\t& .sds-textfield__input:hover {\n\t\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-alert-danger-border-default));\n\t\t}\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-textfield-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t.sds-textfield--has-icon {\n\t\t.sds-textfield__input {\n\t\t\tpadding-right: var(--_sds-textfield-padding-icon);\n\t\t}\n\t}\n\n\t::slotted([slot='after']) {\n\t\tposition: absolute;\n\t\ttop: var(--_sds-textfield-icon-top);\n\t\tright: var(--_sds-textfield-icon-right);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-sm));\n\t\t--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textfield-icon-top: var(--sds-textfield-icon-top, calc((var(--_sds-textfield-min-height) - var(--sds-components-icon-sm)) / 2));\n\t\t--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-sm)));\n\n\t\t&:has(sds-icon:not([size])) {\n\t\t\t--sds-icon-size: var(--sds-textfield-icon-size, var(--sds-components-icon-sm));\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-lg));\n\t\t--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textfield-icon-top: var(--sds-textfield-icon-top, var(--sds-spacing-3xs));\n\t\t--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-lg)));\n\n\t\t&:has(sds-icon:not([size])) {\n\t\t\t--sds-icon-size: var(--sds-textfield-icon-size, var(--sds-components-icon-lg));\n\t\t}\n\t}\n`;\n"]}