@politiet/sheriff-web-components 2.0.1 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/frameworks/react.d.ts +4 -4
- package/dist/frameworks/react.d.ts.map +1 -1
- package/dist/react-wrappers/SDSCheckboxGroupWrapper.d.ts +1 -0
- package/dist/react-wrappers/SDSCheckboxGroupWrapper.d.ts.map +1 -1
- package/dist/react-wrappers/SDSCheckboxGroupWrapper.js +1 -0
- package/dist/react-wrappers/SDSCheckboxGroupWrapper.js.map +1 -1
- package/dist/react-wrappers/SDSRadioGroupWrapper.d.ts +1 -0
- package/dist/react-wrappers/SDSRadioGroupWrapper.d.ts.map +1 -1
- package/dist/react-wrappers/SDSRadioGroupWrapper.js +1 -0
- package/dist/react-wrappers/SDSRadioGroupWrapper.js.map +1 -1
- package/dist/sds-alert/sds-alert.styles.d.ts.map +1 -1
- package/dist/sds-alert/sds-alert.styles.js +25 -3
- package/dist/sds-alert/sds-alert.styles.js.map +1 -1
- package/dist/sds-button/sds-button.styles.d.ts.map +1 -1
- package/dist/sds-button/sds-button.styles.js +13 -1
- package/dist/sds-button/sds-button.styles.js.map +1 -1
- package/dist/sds-card/sds-card.d.ts +1 -1
- package/dist/sds-card/sds-card.d.ts.map +1 -1
- package/dist/sds-card/sds-card.js +5 -5
- package/dist/sds-card/sds-card.js.map +1 -1
- package/dist/sds-card/sds-card.styles.js +6 -6
- package/dist/sds-card/sds-card.styles.js.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.styles.js +17 -17
- package/dist/sds-checkbox/sds-checkbox.styles.js.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.styles.js +2 -2
- package/dist/sds-checkbox-group/sds-checkbox-group.styles.js.map +1 -1
- package/dist/sds-chip/sds-chip.styles.js +19 -19
- package/dist/sds-chip/sds-chip.styles.js.map +1 -1
- package/dist/sds-radio/sds-radio.d.ts +17 -4
- package/dist/sds-radio/sds-radio.d.ts.map +1 -1
- package/dist/sds-radio/sds-radio.js +76 -21
- package/dist/sds-radio/sds-radio.js.map +1 -1
- package/dist/sds-radio/sds-radio.styles.js +27 -27
- package/dist/sds-radio/sds-radio.styles.js.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.d.ts +1 -0
- package/dist/sds-radio-group/sds-radio-group.d.ts.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.js +14 -10
- package/dist/sds-radio-group/sds-radio-group.js.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.styles.js +2 -2
- package/dist/sds-radio-group/sds-radio-group.styles.js.map +1 -1
- package/dist/sds-switch/sds-switch.styles.js +3 -3
- package/dist/sds-switch/sds-switch.styles.js.map +1 -1
- package/dist/sds-textarea/sds-textarea.styles.js +11 -11
- package/dist/sds-textarea/sds-textarea.styles.js.map +1 -1
- package/dist/sds-textfield/sds-textfield.styles.js +7 -7
- package/dist/sds-textfield/sds-textfield.styles.js.map +1 -1
- package/dist/sheriff-web-components.js +218 -133
- package/package.json +2 -2
|
@@ -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"]}
|
|
@@ -32,6 +32,7 @@ export declare class SDSRadioGroup extends LitElement {
|
|
|
32
32
|
private _slotElement;
|
|
33
33
|
private readonly _handleRadioChange;
|
|
34
34
|
private _handleSlotChange;
|
|
35
|
+
private _getChildRadios;
|
|
35
36
|
private _updateChildProps;
|
|
36
37
|
updated(changedProps: Map<string | number | symbol, unknown>): void;
|
|
37
38
|
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-radio-group.d.ts","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,cAAc,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAI7D,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAGhC;;;GAGG;AAEH,MAAM,WAAW,kBAAkB;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAY;IAEN,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACxC,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAS;IACxF,SAAS,EAAE,QAAQ,GAAG,KAAK,CAAY;IACvB,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAS;IACjD,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAS;IAClD,IAAI,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAQ;IAE1E,OAAO,CAAC,cAAc,CAAuB;IACvC,OAAO,CAAC,YAAY,CAAmB;IAEtD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAOjC;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,iBAAiB;
|
|
1
|
+
{"version":3,"file":"sds-radio-group.d.ts","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,cAAc,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAI7D,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAGhC;;;GAGG;AAEH,MAAM,WAAW,kBAAkB;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAY;IAEN,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACxC,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAS;IACxF,SAAS,EAAE,QAAQ,GAAG,KAAK,CAAY;IACvB,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAS;IACjD,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAS;IAClD,IAAI,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAQ;IAE1E,OAAO,CAAC,cAAc,CAAuB;IACvC,OAAO,CAAC,YAAY,CAAmB;IAEtD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAOjC;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IA0BhB,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAS5D,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAevF,MAAM;IA+Bf,IAAI,KAAK,IAAI,EAAE,CAEd;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}
|
|
@@ -33,28 +33,32 @@ let SDSRadioGroup = class SDSRadioGroup extends LitElement {
|
|
|
33
33
|
this._updateChildProps([...updatableRadioProps]);
|
|
34
34
|
};
|
|
35
35
|
}
|
|
36
|
+
_getChildRadios() {
|
|
37
|
+
return this._slotElement?.assignedElements({ flatten: true }).filter((element) => element.tagName === 'SDS-RADIO') ?? [];
|
|
38
|
+
}
|
|
36
39
|
_updateChildProps(changedAttributes) {
|
|
37
|
-
const radios = this.
|
|
38
|
-
radios
|
|
39
|
-
|
|
40
|
+
const radios = this._getChildRadios();
|
|
41
|
+
for (const childRadio of radios) {
|
|
42
|
+
for (const attribute of changedAttributes) {
|
|
40
43
|
switch (attribute) {
|
|
41
44
|
case 'readOnly':
|
|
42
|
-
|
|
45
|
+
childRadio.readOnly = this.readOnly;
|
|
43
46
|
break;
|
|
44
47
|
case 'disabled':
|
|
45
|
-
|
|
48
|
+
childRadio.parentRequestDisabled = this.disabled;
|
|
46
49
|
break;
|
|
47
50
|
case 'errorMessage':
|
|
48
|
-
|
|
51
|
+
childRadio.error = Boolean(this.errorMessage);
|
|
49
52
|
break;
|
|
50
53
|
case 'required':
|
|
51
|
-
|
|
54
|
+
childRadio.required = this.required;
|
|
52
55
|
break;
|
|
53
56
|
case 'size':
|
|
54
|
-
|
|
57
|
+
childRadio.size = this.size;
|
|
58
|
+
break;
|
|
55
59
|
}
|
|
56
|
-
}
|
|
57
|
-
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
58
62
|
}
|
|
59
63
|
updated(changedProps) {
|
|
60
64
|
super.updated(changedProps);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-radio-group.js","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-radio-group.styles';\nimport { SDS_SIZES } from '../types';\n\ntype RadioGroupSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\nconst updatableRadioProps = ['disabled', 'errorMessage', 'readOnly', 'required', 'size'] as const;\ntype UpdatableRadioProp = (typeof updatableRadioProps)[number];\n\nimport '../sds-radio/sds-radio';\nimport '../sds-icon/sds-icon';\nimport '../sds-alert/sds-alert';\nimport { SDSRadio } from '../sds-radio/sds-radio';\n\n/**\n * TODO: Implement keyboard navigation behavior according to\n * https://www.w3.org/WAI/ARIA/apg/patterns/radio/\n */\n\nexport interface SDSRadioGroupProps {\n\tlegend?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\treadonly?: boolean;\n\tdirection?: 'column' | 'row';\n\tdisabled?: boolean;\n\tsize?: RadioGroupSize;\n\trequired?: boolean;\n}\n\n@guardedCustomElement('sds-radio-group')\nexport class SDSRadioGroup extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String }) legend?: SDSRadioGroupProps['legend'];\n\t@property({ type: String, attribute: 'help-text' }) helpText?: SDSRadioGroupProps['help-text'];\n\t@property({ type: String, attribute: 'error-message' }) errorMessage?: SDSRadioGroupProps['error-message'];\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: SDSRadioGroupProps['readonly'] = false;\n\t@property({ type: String }) direction: 'column' | 'row' = 'column';\n\t@property({ type: Boolean, reflect: true }) disabled: SDSRadioGroupProps['disabled'] = false;\n\t@property({ type: Boolean, reflect: true }) required: SDSRadioGroupProps['required'] = false;\n\t@property({ type: String, reflect: true }) size: SDSRadioGroupProps['size'] = 'md';\n\n\t@state() private _selectedValue: string | null = null;\n\t@query('slot') private _slotElement!: HTMLSlotElement;\n\n\tprivate readonly _handleRadioChange = (event: Event): void => {\n\t\tconst target = event.composedPath().find((el) => el instanceof HTMLElement && el.tagName === 'SDS-RADIO') as HTMLElement & { value: string };\n\n\t\tif (target) {\n\t\t\tthis._selectedValue = target.getAttribute('value') || null;\n\t\t\tthis.dispatchEvent(new CustomEvent('sds-update', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate _handleSlotChange = () => {\n\t\tthis._updateChildProps([...updatableRadioProps]);\n\t};\n\n\tprivate _updateChildProps(changedAttributes: Array<UpdatableRadioProp>) {\n\t\tconst radios = this._slotElement?.assignedElements({ flatten: true }).filter((element): element is SDSRadio => element.tagName === 'SDS-RADIO') ?? [];\n\t\tradios.forEach((radio) => {\n\t\t\tchangedAttributes.forEach((attribute) => {\n\t\t\t\tswitch (attribute) {\n\t\t\t\t\tcase 'readOnly':\n\t\t\t\t\t\tradio.readOnly = this.readOnly;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'disabled':\n\t\t\t\t\t\tradio.disabled = this.disabled;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'errorMessage':\n\t\t\t\t\t\tradio.error = Boolean(this.errorMessage);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'required':\n\t\t\t\t\t\tradio.required = this.required;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'size':\n\t\t\t\t\t\tradio.size = this.size;\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t}\n\n\toverride updated(changedProps: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProps);\n\n\t\tconst changedKeys = Array.from(changedProps.keys());\n\t\tif (changedKeys.includes('errorMessage') || changedKeys.includes('error-message')) {\n\t\t\tthis._updateChildProps(['errorMessage']);\n\t\t}\n\t}\n\n\toverride attributeChangedCallback(name: string, _old: string | null, value: string | null): void {\n\t\tsuper.attributeChangedCallback(name, _old, value);\n\n\t\t// DOM attribute for readonly has different casing than our types\n\t\tif (name === 'readonly') {\n\t\t\tthis._updateChildProps(['readOnly']);\n\t\t\treturn;\n\t\t}\n\n\t\tconst property = name as UpdatableRadioProp;\n\t\tif (updatableRadioProps.includes(property)) {\n\t\t\tthis._updateChildProps([property]);\n\t\t}\n\t}\n\n\toverride render() {\n\t\tconst radioGroupClasses = {\n\t\t\t'sds-radio-group': true,\n\t\t\t'sds-radio-group--readonly': this.readOnly ?? false,\n\t\t\t'sds-radio-group--disabled': this.disabled ?? false,\n\t\t};\n\n\t\tconst radioClasses = {\n\t\t\t'sds-radio-group__radios': true,\n\t\t\t'sds-radio-group--column': this.direction === 'column',\n\t\t\t'sds-radio-group--row': this.direction === 'row',\n\t\t};\n\n\t\treturn html`\n\t\t\t<fieldset class=\"${classMap(radioGroupClasses)}\">\n\t\t\t\t${this.legend\n\t\t\t\t\t? html`<legend class=\"sds-radio-group__legend\">${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"md\"></sds-icon>` : nothing}${this.legend}</legend>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-radio-group__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"${classMap(radioClasses)}\" @change=${this._handleRadioChange}>\n\t\t\t\t\t<slot @slotchange=${this._handleSlotChange}></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage\n\t\t\t\t\t? html`<sds-alert variant=\"secondary\" data-palette=\"danger\">\n\t\t\t\t\t\t\t<p slot=\"message\">${this.errorMessage}</p>\n\t\t\t\t\t\t</sds-alert>`\n\t\t\t\t\t: nothing}\n\t\t\t</fieldset>\n\t\t`;\n\t}\n\n\tget value(): {} {\n\t\treturn { selectedValue: this._selectedValue };\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-radio-group': SDSRadioGroup;\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sds-radio-group.js","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-radio-group.styles';\nimport { SDS_SIZES } from '../types';\n\ntype RadioGroupSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\nconst updatableRadioProps = ['disabled', 'errorMessage', 'readOnly', 'required', 'size'] as const;\ntype UpdatableRadioProp = (typeof updatableRadioProps)[number];\n\nimport '../sds-radio/sds-radio';\nimport '../sds-icon/sds-icon';\nimport '../sds-alert/sds-alert';\nimport { SDSRadio } from '../sds-radio/sds-radio';\n\n/**\n * TODO: Implement keyboard navigation behavior according to\n * https://www.w3.org/WAI/ARIA/apg/patterns/radio/\n */\n\nexport interface SDSRadioGroupProps {\n\tlegend?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\treadonly?: boolean;\n\tdirection?: 'column' | 'row';\n\tdisabled?: boolean;\n\tsize?: RadioGroupSize;\n\trequired?: boolean;\n}\n\n@guardedCustomElement('sds-radio-group')\nexport class SDSRadioGroup extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String }) legend?: SDSRadioGroupProps['legend'];\n\t@property({ type: String, attribute: 'help-text' }) helpText?: SDSRadioGroupProps['help-text'];\n\t@property({ type: String, attribute: 'error-message' }) errorMessage?: SDSRadioGroupProps['error-message'];\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: SDSRadioGroupProps['readonly'] = false;\n\t@property({ type: String }) direction: 'column' | 'row' = 'column';\n\t@property({ type: Boolean, reflect: true }) disabled: SDSRadioGroupProps['disabled'] = false;\n\t@property({ type: Boolean, reflect: true }) required: SDSRadioGroupProps['required'] = false;\n\t@property({ type: String, reflect: true }) size: SDSRadioGroupProps['size'] = 'md';\n\n\t@state() private _selectedValue: string | null = null;\n\t@query('slot') private _slotElement!: HTMLSlotElement;\n\n\tprivate readonly _handleRadioChange = (event: Event): void => {\n\t\tconst target = event.composedPath().find((el) => el instanceof HTMLElement && el.tagName === 'SDS-RADIO') as HTMLElement & { value: string };\n\n\t\tif (target) {\n\t\t\tthis._selectedValue = target.getAttribute('value') || null;\n\t\t\tthis.dispatchEvent(new CustomEvent('sds-update', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate _handleSlotChange = () => {\n\t\tthis._updateChildProps([...updatableRadioProps]);\n\t};\n\n\tprivate _getChildRadios(): SDSRadio[] {\n\t\treturn this._slotElement?.assignedElements({ flatten: true }).filter((element): element is SDSRadio => element.tagName === 'SDS-RADIO') ?? [];\n\t}\n\n\tprivate _updateChildProps(changedAttributes: Array<UpdatableRadioProp>) {\n\t\tconst radios = this._getChildRadios();\n\n\t\tfor (const childRadio of radios) {\n\t\t\tfor (const attribute of changedAttributes) {\n\t\t\t\tswitch (attribute) {\n\t\t\t\t\tcase 'readOnly':\n\t\t\t\t\t\tchildRadio.readOnly = this.readOnly;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'disabled':\n\t\t\t\t\t\tchildRadio.parentRequestDisabled = this.disabled;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'errorMessage':\n\t\t\t\t\t\tchildRadio.error = Boolean(this.errorMessage);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'required':\n\t\t\t\t\t\tchildRadio.required = this.required;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'size':\n\t\t\t\t\t\tchildRadio.size = this.size;\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\toverride updated(changedProps: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProps);\n\n\t\tconst changedKeys = Array.from(changedProps.keys());\n\t\tif (changedKeys.includes('errorMessage') || changedKeys.includes('error-message')) {\n\t\t\tthis._updateChildProps(['errorMessage']);\n\t\t}\n\t}\n\n\toverride attributeChangedCallback(name: string, _old: string | null, value: string | null): void {\n\t\tsuper.attributeChangedCallback(name, _old, value);\n\n\t\t// DOM attribute for readonly has different casing than our types\n\t\tif (name === 'readonly') {\n\t\t\tthis._updateChildProps(['readOnly']);\n\t\t\treturn;\n\t\t}\n\n\t\tconst property = name as UpdatableRadioProp;\n\t\tif (updatableRadioProps.includes(property)) {\n\t\t\tthis._updateChildProps([property]);\n\t\t}\n\t}\n\n\toverride render() {\n\t\tconst radioGroupClasses = {\n\t\t\t'sds-radio-group': true,\n\t\t\t'sds-radio-group--readonly': this.readOnly ?? false,\n\t\t\t'sds-radio-group--disabled': this.disabled ?? false,\n\t\t};\n\n\t\tconst radioClasses = {\n\t\t\t'sds-radio-group__radios': true,\n\t\t\t'sds-radio-group--column': this.direction === 'column',\n\t\t\t'sds-radio-group--row': this.direction === 'row',\n\t\t};\n\n\t\treturn html`\n\t\t\t<fieldset class=\"${classMap(radioGroupClasses)}\">\n\t\t\t\t${this.legend\n\t\t\t\t\t? html`<legend class=\"sds-radio-group__legend\">${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"md\"></sds-icon>` : nothing}${this.legend}</legend>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-radio-group__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"${classMap(radioClasses)}\" @change=${this._handleRadioChange}>\n\t\t\t\t\t<slot @slotchange=${this._handleSlotChange}></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage\n\t\t\t\t\t? html`<sds-alert variant=\"secondary\" data-palette=\"danger\">\n\t\t\t\t\t\t\t<p slot=\"message\">${this.errorMessage}</p>\n\t\t\t\t\t\t</sds-alert>`\n\t\t\t\t\t: nothing}\n\t\t\t</fieldset>\n\t\t`;\n\t}\n\n\tget value(): {} {\n\t\treturn { selectedValue: this._selectedValue };\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-radio-group': SDSRadioGroup;\n\t}\n}\n"]}
|
|
@@ -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));
|
|
@@ -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"]}
|
|
@@ -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
|
|
|
@@ -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"]}
|
|
@@ -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
|
}
|
|
@@ -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"]}
|
|
@@ -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]) {
|
|
@@ -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"]}
|