@politiet/sheriff-web-components 2.7.2 → 2.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +79 -7
- package/dist/mixins/sds-dialog-target-mixin.d.ts.map +1 -1
- package/dist/mixins/sds-dialog-target-mixin.js +4 -2
- package/dist/mixins/sds-dialog-target-mixin.js.map +1 -1
- package/dist/mixins/sds-form-control-mixin.d.ts +1 -0
- package/dist/mixins/sds-form-control-mixin.d.ts.map +1 -1
- package/dist/mixins/sds-form-control-mixin.js +7 -0
- package/dist/mixins/sds-form-control-mixin.js.map +1 -1
- package/dist/sds-button/sds-button.component.d.ts +2 -0
- package/dist/sds-button/sds-button.component.d.ts.map +1 -1
- package/dist/sds-button/sds-button.component.js +5 -1
- package/dist/sds-button/sds-button.component.js.map +1 -1
- package/dist/sds-button/sds-button.styles.d.ts.map +1 -1
- package/dist/sds-button/sds-button.styles.js +87 -3
- package/dist/sds-button/sds-button.styles.js.map +1 -1
- package/dist/sds-card/sds-card.styles.d.ts.map +1 -1
- package/dist/sds-card/sds-card.styles.js +9 -3
- package/dist/sds-card/sds-card.styles.js.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.styles.d.ts.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.styles.js +4 -2
- package/dist/sds-checkbox/sds-checkbox.styles.js.map +1 -1
- package/dist/sds-details/sds-details.styles.js +6 -6
- package/dist/sds-details/sds-details.styles.js.map +1 -1
- package/dist/sds-dialog/sds-dialog.styles.d.ts.map +1 -1
- package/dist/sds-dialog/sds-dialog.styles.js +8 -2
- package/dist/sds-dialog/sds-dialog.styles.js.map +1 -1
- package/dist/sds-radio/sds-radio.styles.d.ts.map +1 -1
- package/dist/sds-radio/sds-radio.styles.js +10 -3
- package/dist/sds-radio/sds-radio.styles.js.map +1 -1
- package/dist/sds-select/sds-select.component.d.ts +1 -1
- package/dist/sds-select/sds-select.component.d.ts.map +1 -1
- package/dist/sds-select/sds-select.component.js +2 -1
- package/dist/sds-select/sds-select.component.js.map +1 -1
- package/dist/sds-select/sds-select.styles.d.ts.map +1 -1
- package/dist/sds-select/sds-select.styles.js +3 -2
- package/dist/sds-select/sds-select.styles.js.map +1 -1
- package/dist/sds-stepper-step/sds-stepper-step.styles.d.ts.map +1 -1
- package/dist/sds-stepper-step/sds-stepper-step.styles.js +4 -3
- package/dist/sds-stepper-step/sds-stepper-step.styles.js.map +1 -1
- package/dist/sds-switch/sds-switch.styles.js +6 -6
- package/dist/sds-switch/sds-switch.styles.js.map +1 -1
- package/dist/sds-text/sds-text.styles.d.ts.map +1 -1
- package/dist/sds-text/sds-text.styles.js +2 -1
- package/dist/sds-text/sds-text.styles.js.map +1 -1
- package/dist/sds-textarea/sds-textarea.d.ts +1 -1
- package/dist/sds-textarea/sds-textarea.d.ts.map +1 -1
- package/dist/sds-textarea/sds-textarea.js +6 -1
- package/dist/sds-textarea/sds-textarea.js.map +1 -1
- package/dist/sds-textarea/sds-textarea.styles.d.ts.map +1 -1
- package/dist/sds-textarea/sds-textarea.styles.js +11 -3
- package/dist/sds-textarea/sds-textarea.styles.js.map +1 -1
- package/dist/sds-textfield/sds-textfield.d.ts +5 -1
- package/dist/sds-textfield/sds-textfield.d.ts.map +1 -1
- package/dist/sds-textfield/sds-textfield.js +27 -10
- package/dist/sds-textfield/sds-textfield.js.map +1 -1
- package/dist/sds-textfield/sds-textfield.styles.d.ts.map +1 -1
- package/dist/sds-textfield/sds-textfield.styles.js +4 -3
- package/dist/sds-textfield/sds-textfield.styles.js.map +1 -1
- package/dist/sheriff-web-components.js +276 -157
- package/package.json +2 -2
- package/web-types.json +98 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-stepper-step.styles.js","sourceRoot":"","sources":["../../src/sds-stepper-step/sds-stepper-step.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoQxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t/* Sizing */\n\t\t--_sds-stepper-step-circle-size: var(--sds-stepper-circle-size, 28px);\n\t\t--_sds-stepper-step-border-width: var(--sds-stepper-step-border-width, 2px);\n\t\t--_sds-stepper-step-radius: var(--sds-stepper-step-radius, var(--sds-radius-sm));\n\t\t--_sds-stepper-step-gap: var(--sds-stepper-step-gap, var(--sds-spacing-3xs));\n\n\t\t/* Layout */\n\t\t--_sds-stepper-step-grid-template-rows: var(--sds-stepper-step-grid-template-rows, var(--_sds-stepper-step-circle-size) auto);\n\t\t--_sds-stepper-step-grid-template-columns: var(\n\t\t\t--sds-stepper-step-grid-template-columns,\n\t\t\t[line-1-start] 1fr [step-start] auto [line-1-end] var(--_sds-stepper-step-circle-size) [line-2-start] auto [step-end] 1fr [line-2-end]\n\t\t);\n\n\t\t/* Button */\n\t\t--_sds-stepper-step-step-grid-template-rows: var(--sds-stepper-step-step-grid-template-rows, [circle] var(--_sds-stepper-step-circle-size) [content] auto);\n\t\t--_sds-stepper-step-step-grid-template-columns: var(--sds-stepper-step-step-grid-template-columns, [content-start] auto [circle] var(--_sds-stepper-step-circle-size) [content-end] auto);\n\t\t--_sds-stepper-step-step-grid-area: var(--sds-stepper-step-step-grid-area, 1 / step / -1);\n\t\t--_sds-stepper-step-step-gap: var(--sds-stepper-step-step-gap, var(--sds-spacing-3xs));\n\t\t--_sds-stepper-step-step-margin: var(--sds-stepper-step-step-margin, 0);\n\n\t\t/* Divider */\n\t\t--_sds-stepper-step-divider-color: var(--sds-stepper-step-divider-color, var(--sds-color-neutral-border-subtle));\n\t\t--_sds-stepper-step-divider-width: var(--sds-stepper-step-divider-width, 100%);\n\t\t--_sds-stepper-step-divider-height: var(--sds-stepper-step-divider-height, 1px);\n\t\t--_sds-stepper-step-divider-min-height: var(--sds-stepper-step-divider-min-height, auto);\n\t\t--_sds-stepper-step-divider-grid-row: var(--sds-stepper-step-divider-grid-row, 1);\n\t\t--_sds-stepper-step-divider-before-grid-column: var(--sds-stepper-step-divider-before-grid-column, line-1);\n\t\t--_sds-stepper-step-divider-before-visibility: var(--sds-stepper-step-divider-before-visibility, visible);\n\t\t--_sds-stepper-step-divider-before-display: var(--sds-stepper-step-divider-before-display, block);\n\t\t--_sds-stepper-step-divider-after-grid-column: var(--sds-stepper-step-divider-after-grid-column, line-2);\n\t\t--_sds-stepper-step-divider-after-visibility: var(--sds-stepper-step-divider-after-visibility, visible);\n\t\t--_sds-stepper-step-divider-after-display: var(--sds-stepper-step-divider-after-display, block);\n\n\t\t/* Content */\n\t\t--_sds-stepper-step-label-grid-area: var(--sds-stepper-step-label-grid-area, content / 1 / content / -1);\n\t\t--_sds-stepper-step-label-text-decoration-thickness: var(--sds-stepper-step-label-text-decoration-thickness, var(--sds-typography-link-text-decoration-thickness));\n\t\t--_sds-stepper-step-label-text-underline-offset: var(--sds-stepper-step-label-text-underline-offset, var(--sds-typography-link-text-underline-offset));\n\t\t--_sds-stepper-step-label-max-width: var(--sds-stepper-step-label-max-width, 24ch);\n\t\t--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, none);\n\t\t--_sds-stepper-step-label-padding-inline: var(--sds-stepper-step-label-padding-inline, var(--sds-spacing-3xs));\n\n\t\t/* Counter */\n\t\t--_sds-stepper-step-counter-grid-area: var(--sds-stepper-step-counter-grid-area, circle / 2);\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-content: var(--sds-stepper-step-counter-content, counters(stepper, ''));\n\t\t--_sds-stepper-step-counter-background-color: var(\n\t\t\t--sds-stepper-step-counter-background-color,\n\t\t\tvar(--sds-color-background-action-contrast-default, var(--sds-color-main-background-action-contrast-default))\n\t\t);\n\t\t--_sds-stepper-step-counter-mask: var(--sds-stepper-step-counter-mask, none);\n\t\t--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-mask-background-color, transparent);\n\n\t\t/* Focus */\n\t\t--_sds-stepper-step-focus-color: var(--sds-stepper-step-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-stepper-step-focus-inner-color: var(--sds-stepper-step-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-stepper-step-focus-spacing: var(--sds-stepper-step-focus-spacing, var(--sds-color-states-focus-spacing));\n\n\t\twidth: fit-content;\n\t}\n\n\t:host(:first-child) {\n\t\t--_sds-stepper-step-divider-before-visibility: hidden;\n\t}\n\n\t:host(:last-child) {\n\t\t--_sds-stepper-step-divider-after-visibility: hidden;\n\t}\n\n\t.sds-stepper-step {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: var(--_sds-stepper-step-grid-template-columns);\n\t\tgrid-template-rows: var(--_sds-stepper-step-grid-template-rows);\n\t\tgap: var(--_sds-stepper-step-gap);\n\t\tjustify-items: flex-start;\n\t\tflex: 100%;\n\t\tpadding-block-start: var(--_sds-stepper-step-border-width);\n\t\tfont-family: var(--sds-typography-font-family);\n\t}\n\n\t.sds-stepper-step__divider {\n\t\tdisplay: block;\n\t\talign-self: center;\n\t\tjustify-self: center;\n\n\t\twidth: var(--_sds-stepper-step-divider-width);\n\t\theight: var(--_sds-stepper-step-divider-height);\n\t\tmin-height: var(--_sds-stepper-step-divider-min-height);\n\n\t\tgrid-row: var(--_sds-stepper-step-divider-grid-row);\n\t\tbackground-color: var(--_sds-stepper-step-divider-color);\n\n\t\t&.sds-stepper-step__divider--before {\n\t\t\tgrid-column: var(--_sds-stepper-step-divider-before-grid-column);\n\t\t\tvisibility: var(--_sds-stepper-step-divider-before-visibility);\n\t\t\tdisplay: var(--_sds-stepper-step-divider-before-display);\n\t\t}\n\n\t\t&.sds-stepper-step__divider--after {\n\t\t\tgrid-column: var(--_sds-stepper-step-divider-after-grid-column);\n\t\t\tvisibility: var(--_sds-stepper-step-divider-after-visibility);\n\t\t\tdisplay: var(--_sds-stepper-step-divider-after-display);\n\t\t}\n\t}\n\n\t.sds-stepper-step__step,\n\t.sds-stepper-step__step--static {\n\t\tdisplay: grid;\n\t\twidth: 100%;\n\n\t\tgrid-area: var(--_sds-stepper-step-step-grid-area);\n\t\tgrid-template-rows: var(--_sds-stepper-step-step-grid-template-rows);\n\t\tgrid-template-columns: var(--_sds-stepper-step-step-grid-template-columns);\n\t\tplace-items: center;\n\n\t\tgap: var(--_sds-stepper-step-step-gap);\n\t\tpadding: 0;\n\t\tmargin: var(--_sds-stepper-step-step-margin);\n\n\t\tborder: 0;\n\t\tbackground: none;\n\t\tborder-radius: var(--_sds-stepper-step-radius);\n\t}\n\n\t.sds-stepper-step__step {\n\t\tcursor: pointer;\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-stepper-step-focus-inner-color);\n\t\t\toutline: 3px solid var(--_sds-stepper-step-focus-color);\n\t\t\toutline-offset: 3px;\n\t\t\tisolation: isolate;\n\t\t}\n\t}\n\n\t.sds-stepper-step__label {\n\t\tgrid-column: content;\n\t\tgrid-area: var(--_sds-stepper-step-label-grid-area);\n\t\tmin-width: fit-content;\n\t\tmax-width: var(--_sds-stepper-step-label-max-width);\n\t\ttext-align: left;\n\t\tpadding-inline: var(--_sds-stepper-step-label-padding-inline);\n\n\t\tcolor: var(--_sds-stepper-step-label-text-color);\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: var(--sds-typography-body-lg-strong-tall-desktop-font-size);\n\t\tfont-weight: var(--sds-typography-body-lg-strong-tall-desktop-font-weight);\n\t\tline-height: var(--sds-typography-body-lg-strong-tall-desktop-line-height);\n\n\t\ttext-decoration: var(--_sds-stepper-step-label-text-decoration);\n\t\ttext-decoration-thickness: var(--_sds-stepper-step-label-text-decoration-thickness);\n\t\ttext-underline-offset: var(--_sds-stepper-step-label-text-underline-offset);\n\t}\n\n\t.sds-stepper-step__counter {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\n\t\tgrid-area: var(--_sds-stepper-step-counter-grid-area);\n\n\t\twidth: var(--_sds-stepper-step-circle-size);\n\t\theight: var(--_sds-stepper-step-circle-size);\n\n\t\tborder-radius: 50%;\n\t\tborder: var(--_sds-stepper-step-border-width) solid var(--_sds-stepper-step-counter-border-color);\n\t\tbackground-color: var(--_sds-stepper-step-counter-background-color);\n\n\t\tcounter-increment: stepper;\n\n\t\tcolor: var(--_sds-stepper-step-counter-text-color);\n\t\tfont-size: var(--sds-typography-body-md-strong-desktop-font-size);\n\t\tfont-weight: var(--sds-typography-body-md-strong-desktop-font-weight);\n\t\tline-height: var(--sds-typography-body-md-strong-desktop-line-height);\n\n\t\t&::before {\n\t\t\tcontent: var(--_sds-stepper-step-counter-content);\n\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\n\t\t\tborder-radius: 50%;\n\t\t\tbackground-color: var(--_sds-stepper-step-counter-mask-background-color);\n\t\t\tmask: var(--_sds-stepper-step-counter-mask);\n\t\t}\n\t}\n\n\t:host([complete]) {\n\t\t--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-contrast-subtle, var(--sds-color-main-action-contrast-subtle)));\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-content: var(--sds-stepper-step-counter-content, '');\n\t\t--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-mask-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-mask: var(\n\t\t\t--sds-stepper-step-counter-mask,\n\t\t\turl(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M378-232.43 140.43-470l57.14-57.13L378-346.7l383.43-383.43L818.57-673z'/%3E%3C/svg%3E\")\n\t\t\t\tno-repeat center / 24px 24px\n\t\t);\n\t}\n\n\t:host([active]) {\n\t\t--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-main-action-contrast-default));\n\t\t--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, none);\n\t\t--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\tpointer-events: none;\n\t}\n\n\t:host(:not([active])) .sds-stepper-step__step:hover {\n\t\t--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, var(--sds-typography-link-text-decoration));\n\t\t--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-contrast-subtle, var(--sds-color-main-action-contrast-subtle)));\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t}\n\n\t:host(:not([active])[complete]) .sds-stepper-step__step:hover {\n\t\t--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-mask-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t--_sds-stepper-step-counter-mask: var(\n\t\t\t--sds-stepper-step-counter-mask,\n\t\t\turl(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M378-232.43 140.43-470l57.14-57.13L378-346.7l383.43-383.43L818.57-673z'/%3E%3C/svg%3E\")\n\t\t\t\tno-repeat center / 24px 24px\n\t\t);\n\t}\n\n\t:host(:not([active])) .sds-stepper-step__step:active {\n\t\t--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t}\n\n\t:host(:not([active])[complete]) .sds-stepper-step__step:active {\n\t\t--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-mask-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t--_sds-stepper-step-counter-mask: var(\n\t\t\t--sds-stepper-step-counter-mask,\n\t\t\turl(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M378-232.43 140.43-470l57.14-57.13L378-346.7l383.43-383.43L818.57-673z'/%3E%3C/svg%3E\")\n\t\t\t\tno-repeat center / 24px 24px\n\t\t);\n\t}\n\n\t:host([active][complete]) {\n\t\t--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));\n\t}\n\n\t:host(:not([active]):not([interactive])) {\n\t\t--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, none);\n\t\t--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, transparent);\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-neutral-border-strong));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-neutral-text-default));\n\t}\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"sds-stepper-step.styles.js","sourceRoot":"","sources":["../../src/sds-stepper-step/sds-stepper-step.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqQxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t/* Sizing */\n\t\t--_sds-stepper-step-circle-size: var(--sds-stepper-circle-size, 28px);\n\t\t--_sds-stepper-step-border-width: var(--sds-stepper-step-border-width, 2px);\n\t\t--_sds-stepper-step-radius: var(--sds-stepper-step-radius, var(--sds-radius-sm));\n\t\t--_sds-stepper-step-gap: var(--sds-stepper-step-gap, var(--sds-spacing-3xs));\n\n\t\t/* Layout */\n\t\t--_sds-stepper-step-grid-template-rows: var(--sds-stepper-step-grid-template-rows, var(--_sds-stepper-step-circle-size) auto);\n\t\t--_sds-stepper-step-grid-template-columns: var(\n\t\t\t--sds-stepper-step-grid-template-columns,\n\t\t\t[line-1-start] 1fr [step-start] auto [line-1-end] var(--_sds-stepper-step-circle-size) [line-2-start] auto [step-end] 1fr [line-2-end]\n\t\t);\n\n\t\t/* Button */\n\t\t--_sds-stepper-step-step-grid-template-rows: var(--sds-stepper-step-step-grid-template-rows, [circle] var(--_sds-stepper-step-circle-size) [content] auto);\n\t\t--_sds-stepper-step-step-grid-template-columns: var(--sds-stepper-step-step-grid-template-columns, [content-start] auto [circle] var(--_sds-stepper-step-circle-size) [content-end] auto);\n\t\t--_sds-stepper-step-step-grid-area: var(--sds-stepper-step-step-grid-area, 1 / step / -1);\n\t\t--_sds-stepper-step-step-gap: var(--sds-stepper-step-step-gap, var(--sds-spacing-3xs));\n\t\t--_sds-stepper-step-step-margin: var(--sds-stepper-step-step-margin, 0);\n\n\t\t/* Divider */\n\t\t--_sds-stepper-step-divider-color: var(--sds-stepper-step-divider-color, var(--sds-color-neutral-border-subtle));\n\t\t--_sds-stepper-step-divider-width: var(--sds-stepper-step-divider-width, 100%);\n\t\t--_sds-stepper-step-divider-height: var(--sds-stepper-step-divider-height, 1px);\n\t\t--_sds-stepper-step-divider-min-height: var(--sds-stepper-step-divider-min-height, auto);\n\t\t--_sds-stepper-step-divider-grid-row: var(--sds-stepper-step-divider-grid-row, 1);\n\t\t--_sds-stepper-step-divider-before-grid-column: var(--sds-stepper-step-divider-before-grid-column, line-1);\n\t\t--_sds-stepper-step-divider-before-visibility: var(--sds-stepper-step-divider-before-visibility, visible);\n\t\t--_sds-stepper-step-divider-before-display: var(--sds-stepper-step-divider-before-display, block);\n\t\t--_sds-stepper-step-divider-after-grid-column: var(--sds-stepper-step-divider-after-grid-column, line-2);\n\t\t--_sds-stepper-step-divider-after-visibility: var(--sds-stepper-step-divider-after-visibility, visible);\n\t\t--_sds-stepper-step-divider-after-display: var(--sds-stepper-step-divider-after-display, block);\n\n\t\t/* Content */\n\t\t--_sds-stepper-step-label-grid-area: var(--sds-stepper-step-label-grid-area, content / 1 / content / -1);\n\t\t--_sds-stepper-step-label-text-decoration-thickness: var(--sds-stepper-step-label-text-decoration-thickness, var(--sds-typography-link-text-decoration-thickness));\n\t\t--_sds-stepper-step-label-text-underline-offset: var(--sds-stepper-step-label-text-underline-offset, var(--sds-typography-link-text-underline-offset));\n\t\t--_sds-stepper-step-label-max-width: var(--sds-stepper-step-label-max-width, 24ch);\n\t\t--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, none);\n\t\t--_sds-stepper-step-label-padding-inline: var(--sds-stepper-step-label-padding-inline, var(--sds-spacing-3xs));\n\n\t\t/* Counter */\n\t\t--_sds-stepper-step-counter-grid-area: var(--sds-stepper-step-counter-grid-area, circle / 2);\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-content: var(--sds-stepper-step-counter-content, counters(stepper, ''));\n\t\t--_sds-stepper-step-counter-background-color: var(\n\t\t\t--sds-stepper-step-counter-background-color,\n\t\t\tvar(--sds-color-background-action-contrast-default, var(--sds-color-main-background-action-contrast-default))\n\t\t);\n\t\t--_sds-stepper-step-counter-mask: var(--sds-stepper-step-counter-mask, none);\n\t\t--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-mask-background-color, transparent);\n\n\t\t/* Focus */\n\t\t--_sds-stepper-step-focus-color: var(--sds-stepper-step-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-stepper-step-focus-inner-color: var(--sds-stepper-step-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-stepper-step-focus-spacing: var(--sds-stepper-step-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-stepper-step-focus-outline-size: var(--sds-stepper-step-focus-outline-size, var(--sds-color-states-focus-outline-size));\n\n\t\twidth: fit-content;\n\t}\n\n\t:host(:first-child) {\n\t\t--_sds-stepper-step-divider-before-visibility: hidden;\n\t}\n\n\t:host(:last-child) {\n\t\t--_sds-stepper-step-divider-after-visibility: hidden;\n\t}\n\n\t.sds-stepper-step {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: var(--_sds-stepper-step-grid-template-columns);\n\t\tgrid-template-rows: var(--_sds-stepper-step-grid-template-rows);\n\t\tgap: var(--_sds-stepper-step-gap);\n\t\tjustify-items: flex-start;\n\t\tflex: 100%;\n\t\tpadding-block-start: var(--_sds-stepper-step-border-width);\n\t\tfont-family: var(--sds-typography-font-family);\n\t}\n\n\t.sds-stepper-step__divider {\n\t\tdisplay: block;\n\t\talign-self: center;\n\t\tjustify-self: center;\n\n\t\twidth: var(--_sds-stepper-step-divider-width);\n\t\theight: var(--_sds-stepper-step-divider-height);\n\t\tmin-height: var(--_sds-stepper-step-divider-min-height);\n\n\t\tgrid-row: var(--_sds-stepper-step-divider-grid-row);\n\t\tbackground-color: var(--_sds-stepper-step-divider-color);\n\n\t\t&.sds-stepper-step__divider--before {\n\t\t\tgrid-column: var(--_sds-stepper-step-divider-before-grid-column);\n\t\t\tvisibility: var(--_sds-stepper-step-divider-before-visibility);\n\t\t\tdisplay: var(--_sds-stepper-step-divider-before-display);\n\t\t}\n\n\t\t&.sds-stepper-step__divider--after {\n\t\t\tgrid-column: var(--_sds-stepper-step-divider-after-grid-column);\n\t\t\tvisibility: var(--_sds-stepper-step-divider-after-visibility);\n\t\t\tdisplay: var(--_sds-stepper-step-divider-after-display);\n\t\t}\n\t}\n\n\t.sds-stepper-step__step,\n\t.sds-stepper-step__step--static {\n\t\tdisplay: grid;\n\t\twidth: 100%;\n\n\t\tgrid-area: var(--_sds-stepper-step-step-grid-area);\n\t\tgrid-template-rows: var(--_sds-stepper-step-step-grid-template-rows);\n\t\tgrid-template-columns: var(--_sds-stepper-step-step-grid-template-columns);\n\t\tplace-items: center;\n\n\t\tgap: var(--_sds-stepper-step-step-gap);\n\t\tpadding: 0;\n\t\tmargin: var(--_sds-stepper-step-step-margin);\n\n\t\tborder: 0;\n\t\tbackground: none;\n\t\tborder-radius: var(--_sds-stepper-step-radius);\n\t}\n\n\t.sds-stepper-step__step {\n\t\tcursor: pointer;\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--_sds-stepper-step-focus-spacing) var(--_sds-stepper-step-focus-inner-color);\n\t\t\toutline: var(--_sds-stepper-step-focus-outline-size) solid var(--_sds-stepper-step-focus-color);\n\t\t\toutline-offset: var(--_sds-stepper-step-focus-spacing);\n\t\t\tisolation: isolate;\n\t\t}\n\t}\n\n\t.sds-stepper-step__label {\n\t\tgrid-column: content;\n\t\tgrid-area: var(--_sds-stepper-step-label-grid-area);\n\t\tmin-width: fit-content;\n\t\tmax-width: var(--_sds-stepper-step-label-max-width);\n\t\ttext-align: left;\n\t\tpadding-inline: var(--_sds-stepper-step-label-padding-inline);\n\n\t\tcolor: var(--_sds-stepper-step-label-text-color);\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: var(--sds-typography-body-lg-strong-tall-desktop-font-size);\n\t\tfont-weight: var(--sds-typography-body-lg-strong-tall-desktop-font-weight);\n\t\tline-height: var(--sds-typography-body-lg-strong-tall-desktop-line-height);\n\n\t\ttext-decoration: var(--_sds-stepper-step-label-text-decoration);\n\t\ttext-decoration-thickness: var(--_sds-stepper-step-label-text-decoration-thickness);\n\t\ttext-underline-offset: var(--_sds-stepper-step-label-text-underline-offset);\n\t}\n\n\t.sds-stepper-step__counter {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\n\t\tgrid-area: var(--_sds-stepper-step-counter-grid-area);\n\n\t\twidth: var(--_sds-stepper-step-circle-size);\n\t\theight: var(--_sds-stepper-step-circle-size);\n\n\t\tborder-radius: 50%;\n\t\tborder: var(--_sds-stepper-step-border-width) solid var(--_sds-stepper-step-counter-border-color);\n\t\tbackground-color: var(--_sds-stepper-step-counter-background-color);\n\n\t\tcounter-increment: stepper;\n\n\t\tcolor: var(--_sds-stepper-step-counter-text-color);\n\t\tfont-size: var(--sds-typography-body-md-strong-desktop-font-size);\n\t\tfont-weight: var(--sds-typography-body-md-strong-desktop-font-weight);\n\t\tline-height: var(--sds-typography-body-md-strong-desktop-line-height);\n\n\t\t&::before {\n\t\t\tcontent: var(--_sds-stepper-step-counter-content);\n\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\n\t\t\tborder-radius: 50%;\n\t\t\tbackground-color: var(--_sds-stepper-step-counter-mask-background-color);\n\t\t\tmask: var(--_sds-stepper-step-counter-mask);\n\t\t}\n\t}\n\n\t:host([complete]) {\n\t\t--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-contrast-subtle, var(--sds-color-main-action-contrast-subtle)));\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-content: var(--sds-stepper-step-counter-content, '');\n\t\t--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-mask-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-mask: var(\n\t\t\t--sds-stepper-step-counter-mask,\n\t\t\turl(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M378-232.43 140.43-470l57.14-57.13L378-346.7l383.43-383.43L818.57-673z'/%3E%3C/svg%3E\")\n\t\t\t\tno-repeat center / 24px 24px\n\t\t);\n\t}\n\n\t:host([active]) {\n\t\t--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-main-action-contrast-default));\n\t\t--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, none);\n\t\t--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\tpointer-events: none;\n\t}\n\n\t:host(:not([active])) .sds-stepper-step__step:hover {\n\t\t--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, var(--sds-typography-link-text-decoration));\n\t\t--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-contrast-subtle, var(--sds-color-main-action-contrast-subtle)));\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t}\n\n\t:host(:not([active])[complete]) .sds-stepper-step__step:hover {\n\t\t--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-mask-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t--_sds-stepper-step-counter-mask: var(\n\t\t\t--sds-stepper-step-counter-mask,\n\t\t\turl(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M378-232.43 140.43-470l57.14-57.13L378-346.7l383.43-383.43L818.57-673z'/%3E%3C/svg%3E\")\n\t\t\t\tno-repeat center / 24px 24px\n\t\t);\n\t}\n\n\t:host(:not([active])) .sds-stepper-step__step:active {\n\t\t--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t}\n\n\t:host(:not([active])[complete]) .sds-stepper-step__step:active {\n\t\t--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-mask-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t--_sds-stepper-step-counter-mask: var(\n\t\t\t--sds-stepper-step-counter-mask,\n\t\t\turl(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M378-232.43 140.43-470l57.14-57.13L378-346.7l383.43-383.43L818.57-673z'/%3E%3C/svg%3E\")\n\t\t\t\tno-repeat center / 24px 24px\n\t\t);\n\t}\n\n\t:host([active][complete]) {\n\t\t--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));\n\t}\n\n\t:host(:not([active]):not([interactive])) {\n\t\t--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, none);\n\t\t--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, transparent);\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-neutral-border-strong));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-neutral-text-default));\n\t}\n`;\n"]}
|
|
@@ -26,9 +26,9 @@ export const styles = css `
|
|
|
26
26
|
--_sds-switch-button-position: var(--sds-switch-button-position, calc(var(--_sds-switch-button-gap) - var(--_sds-switch-border-width)));
|
|
27
27
|
--_sds-switch-button-radius: var(--sds-switch-button-radius, var(--sds-radius-full));
|
|
28
28
|
|
|
29
|
-
--_sds-switch-focus-outline-
|
|
30
|
-
--_sds-switch-focus-
|
|
31
|
-
--_sds-switch-focus-
|
|
29
|
+
--_sds-switch-focus-outline-size: var(--sds-switch-focus-outline-size, var(--sds-switch-focus-outline-width, var(--sds-color-states-focus-outline-size)));
|
|
30
|
+
--_sds-switch-focus-color: var(--sds-switch-focus-color, var(--sds-switch-focus-outline-color, var(--sds-color-states-focus-outer)));
|
|
31
|
+
--_sds-switch-focus-spacing: var(--sds-switch-focus-spacing, var(--sds-switch-focus-outline-offset, var(--sds-color-states-focus-spacing)));
|
|
32
32
|
--_sds-switch-focus-inner-color: var(--sds-switch-focus-inner-color, var(--sds-color-states-focus-inner));
|
|
33
33
|
|
|
34
34
|
--_sds-switch-disabled-opacity: var(--sds-switch-disabled-opacity, var(--sds-color-states-disabled-opacity));
|
|
@@ -135,9 +135,9 @@ export const styles = css `
|
|
|
135
135
|
}
|
|
136
136
|
|
|
137
137
|
.sds-switch__input:focus-visible {
|
|
138
|
-
box-shadow: 0 0 0 var(--
|
|
139
|
-
outline: var(--_sds-switch-focus-outline-
|
|
140
|
-
outline-offset: var(--_sds-switch-focus-
|
|
138
|
+
box-shadow: 0 0 0 var(--_sds-switch-focus-spacing) var(--_sds-switch-focus-inner-color);
|
|
139
|
+
outline: var(--_sds-switch-focus-outline-size) solid var(--_sds-switch-focus-color);
|
|
140
|
+
outline-offset: var(--_sds-switch-focus-spacing);
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
.sds-switch__input:checked:not([readonly]) {
|
|
@@ -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-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-content-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-tall-content-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-
|
|
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-content-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-tall-content-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-size: var(--sds-switch-focus-outline-size, var(--sds-switch-focus-outline-width, var(--sds-color-states-focus-outline-size)));\n\t\t--_sds-switch-focus-color: var(--sds-switch-focus-color, var(--sds-switch-focus-outline-color, var(--sds-color-states-focus-outer)));\n\t\t--_sds-switch-focus-spacing: var(--sds-switch-focus-spacing, 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-content-sm));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-tall-content-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-content-lg));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-tall-content-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-switch-focus-spacing) var(--_sds-switch-focus-inner-color);\n\t\toutline: var(--_sds-switch-focus-outline-size) solid var(--_sds-switch-focus-color);\n\t\toutline-offset: var(--_sds-switch-focus-spacing);\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-text.styles.d.ts","sourceRoot":"","sources":["../../src/sds-text/sds-text.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-text.styles.d.ts","sourceRoot":"","sources":["../../src/sds-text/sds-text.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA+ZlB,CAAC"}
|
|
@@ -9,6 +9,7 @@ export const styles = css `
|
|
|
9
9
|
--_sds-text-text-decoration: var(--sds-text-text-decoration, inherit);
|
|
10
10
|
--_sds-text-text-decoration-thickness: var(--sds-text-text-decoration-thickness, var(--sds-typography-link-text-decoration-thickness));
|
|
11
11
|
--_sds-text-text-underline-offset: var(--sds-text-text-underline-offset, var(--sds-typography-link-text-underline-offset));
|
|
12
|
+
--_sds-text-max-width: var(--sds-text-max-width, var(--sds-typography-max-line-width, 60ch));
|
|
12
13
|
|
|
13
14
|
display: block;
|
|
14
15
|
box-sizing: border-box;
|
|
@@ -26,7 +27,7 @@ export const styles = css `
|
|
|
26
27
|
text-underline-offset: var(--_sds-text-text-underline-offset);
|
|
27
28
|
margin: 0;
|
|
28
29
|
padding: 0;
|
|
29
|
-
max-width: var(--
|
|
30
|
+
max-width: var(--_sds-text-max-width);
|
|
30
31
|
}
|
|
31
32
|
|
|
32
33
|
:host([data-palette]) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-text.styles.js","sourceRoot":"","sources":["../../src/sds-text/sds-text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ZxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-text-font-family: var(--sds-text-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\t\t--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-text-text-decoration: var(--sds-text-text-decoration, inherit);\n\t\t--_sds-text-text-decoration-thickness: var(--sds-text-text-decoration-thickness, var(--sds-typography-link-text-decoration-thickness));\n\t\t--_sds-text-text-underline-offset: var(--sds-text-text-underline-offset, var(--sds-typography-link-text-underline-offset));\n\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t}\n\n\tp {\n\t\tfont-family: var(--_sds-text-font-family);\n\t\tfont-size: var(--_sds-text-font-size);\n\t\tfont-weight: var(--_sds-text-font-weight);\n\t\tline-height: var(--_sds-text-line-height);\n\t\tcolor: var(--_sds-text-color);\n\t\tdisplay: inherit;\n\t\ttext-decoration: var(--_sds-text-text-decoration);\n\t\ttext-decoration-thickness: var(--_sds-text-text-decoration-thickness);\n\t\ttext-underline-offset: var(--_sds-text-text-underline-offset);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t}\n\n\t/* Mobile */\n\t:host {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\t}\n\n\t:host([strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-mobile-line-height));\n\t}\n\n\t:host([tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-mobile-line-height));\n\t}\n\n\t:host([strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-tall-mobile-line-height));\n\t}\n\n\t/* Extra small variants */\n\t:host([size='xs']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-mobile-line-height));\n\t}\n\n\t:host([size='xs'][strong]) {\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-mobile-font-weight));\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-mobile-font-size));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-mobile-line-height));\n\t}\n\n\t:host([size='xs'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-tall-mobile-line-height));\n\t}\n\n\t:host([size='xs'][strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-tall-mobile-line-height));\n\t}\n\n\t/* Small variants */\n\t:host([size='sm']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-mobile-line-height));\n\t}\n\n\t:host([size='sm'][strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-mobile-line-height));\n\t}\n\n\t:host([size='sm'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-tall-mobile-line-height));\n\t}\n\n\t:host([size='sm'][strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-tall-mobile-line-height));\n\t}\n\n\t/* Large variants */\n\t:host([size='lg']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-mobile-line-height));\n\t}\n\n\t:host([size='lg'][strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-mobile-line-height));\n\t}\n\n\t:host([size='lg'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-mobile-font-size));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-mobile-line-height));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-mobile-font-weight));\n\t}\n\n\t:host([size='lg'][strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-mobile-line-height));\n\t}\n\n\t/* Extra large variant */\n\t:host([size='xl']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-mobile-line-height));\n\t}\n\n\t:host([size='xl'][strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-mobile-line-height));\n\t}\n\n\t:host([size='xl'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-tall-mobile-line-height));\n\t}\n\n\t:host([size='xl'][strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-tall-mobile-line-height));\n\t}\n\n\t/* Tablet */\n\t@media (min-width: 640px) {\n\t\t/* Medium variants */\n\t\t:host {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tablet-line-height));\n\t\t}\n\n\t\t:host([strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-tablet-line-height));\n\t\t}\n\n\t\t:host([strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Extra small variants */\n\t\t:host([size='xs']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong]) {\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-tablet-font-weight));\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-tablet-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xs'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-tall-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Small variants */\n\t\t:host([size='sm']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-tablet-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='sm'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-tall-tablet-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Large variants */\n\t\t:host([size='lg']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tablet-line-height));\n\t\t}\n\n\t\t:host([size='lg'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='lg'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-tablet-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-tablet-line-height));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-tablet-font-weight));\n\t\t}\n\n\t\t:host([size='lg'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Extra large variant */\n\t\t:host([size='xl']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xl'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xl'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-tall-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xl'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-tall-tablet-line-height));\n\t\t}\n\t}\n\n\t/* Desktop */\n\t@media (min-width: 1024px) {\n\t\t/* Medium variants */\n\t\t:host {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t}\n\n\t\t:host([strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-desktop-line-height));\n\t\t}\n\n\t\t:host([strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Extra small variants */\n\t\t:host([size='xs']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong]) {\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-desktop-font-weight));\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-desktop-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xs'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-tall-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Small variants */\n\t\t:host([size='sm']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-desktop-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='sm'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-tall-desktop-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Large variants */\n\t\t:host([size='lg']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-desktop-line-height));\n\t\t}\n\n\t\t:host([size='lg'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='lg'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-desktop-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-desktop-line-height));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-desktop-font-weight));\n\t\t}\n\n\t\t:host([size='lg'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Extra large variant */\n\t\t:host([size='xl']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xl'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xl'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-tall-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xl'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-tall-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"sds-text.styles.js","sourceRoot":"","sources":["../../src/sds-text/sds-text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+ZxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-text-font-family: var(--sds-text-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\t\t--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-text-text-decoration: var(--sds-text-text-decoration, inherit);\n\t\t--_sds-text-text-decoration-thickness: var(--sds-text-text-decoration-thickness, var(--sds-typography-link-text-decoration-thickness));\n\t\t--_sds-text-text-underline-offset: var(--sds-text-text-underline-offset, var(--sds-typography-link-text-underline-offset));\n\t\t--_sds-text-max-width: var(--sds-text-max-width, var(--sds-typography-max-line-width, 60ch));\n\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t}\n\n\tp {\n\t\tfont-family: var(--_sds-text-font-family);\n\t\tfont-size: var(--_sds-text-font-size);\n\t\tfont-weight: var(--_sds-text-font-weight);\n\t\tline-height: var(--_sds-text-line-height);\n\t\tcolor: var(--_sds-text-color);\n\t\tdisplay: inherit;\n\t\ttext-decoration: var(--_sds-text-text-decoration);\n\t\ttext-decoration-thickness: var(--_sds-text-text-decoration-thickness);\n\t\ttext-underline-offset: var(--_sds-text-text-underline-offset);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tmax-width: var(--_sds-text-max-width);\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t}\n\n\t/* Mobile */\n\t:host {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\t}\n\n\t:host([strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-mobile-line-height));\n\t}\n\n\t:host([tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-mobile-line-height));\n\t}\n\n\t:host([strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-tall-mobile-line-height));\n\t}\n\n\t/* Extra small variants */\n\t:host([size='xs']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-mobile-line-height));\n\t}\n\n\t:host([size='xs'][strong]) {\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-mobile-font-weight));\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-mobile-font-size));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-mobile-line-height));\n\t}\n\n\t:host([size='xs'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-tall-mobile-line-height));\n\t}\n\n\t:host([size='xs'][strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-tall-mobile-line-height));\n\t}\n\n\t/* Small variants */\n\t:host([size='sm']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-mobile-line-height));\n\t}\n\n\t:host([size='sm'][strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-mobile-line-height));\n\t}\n\n\t:host([size='sm'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-tall-mobile-line-height));\n\t}\n\n\t:host([size='sm'][strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-tall-mobile-line-height));\n\t}\n\n\t/* Large variants */\n\t:host([size='lg']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-mobile-line-height));\n\t}\n\n\t:host([size='lg'][strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-mobile-line-height));\n\t}\n\n\t:host([size='lg'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-mobile-font-size));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-mobile-line-height));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-mobile-font-weight));\n\t}\n\n\t:host([size='lg'][strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-mobile-line-height));\n\t}\n\n\t/* Extra large variant */\n\t:host([size='xl']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-mobile-line-height));\n\t}\n\n\t:host([size='xl'][strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-mobile-line-height));\n\t}\n\n\t:host([size='xl'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-tall-mobile-line-height));\n\t}\n\n\t:host([size='xl'][strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-tall-mobile-line-height));\n\t}\n\n\t/* Tablet */\n\t@media (min-width: 640px) {\n\t\t/* Medium variants */\n\t\t:host {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tablet-line-height));\n\t\t}\n\n\t\t:host([strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-tablet-line-height));\n\t\t}\n\n\t\t:host([strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Extra small variants */\n\t\t:host([size='xs']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong]) {\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-tablet-font-weight));\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-tablet-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xs'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-tall-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Small variants */\n\t\t:host([size='sm']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-tablet-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='sm'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-tall-tablet-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Large variants */\n\t\t:host([size='lg']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tablet-line-height));\n\t\t}\n\n\t\t:host([size='lg'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='lg'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-tablet-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-tablet-line-height));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-tablet-font-weight));\n\t\t}\n\n\t\t:host([size='lg'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Extra large variant */\n\t\t:host([size='xl']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xl'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xl'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-tall-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xl'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-tall-tablet-line-height));\n\t\t}\n\t}\n\n\t/* Desktop */\n\t@media (min-width: 1024px) {\n\t\t/* Medium variants */\n\t\t:host {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t}\n\n\t\t:host([strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-desktop-line-height));\n\t\t}\n\n\t\t:host([strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Extra small variants */\n\t\t:host([size='xs']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong]) {\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-desktop-font-weight));\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-desktop-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xs'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-tall-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-xs-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-xs-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-xs-strong-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Small variants */\n\t\t:host([size='sm']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-desktop-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='sm'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-tall-desktop-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-detail-sm-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-detail-sm-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-detail-sm-strong-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Large variants */\n\t\t:host([size='lg']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-desktop-line-height));\n\t\t}\n\n\t\t:host([size='lg'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='lg'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-desktop-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-desktop-line-height));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-desktop-font-weight));\n\t\t}\n\n\t\t:host([size='lg'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Extra large variant */\n\t\t:host([size='xl']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xl'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xl'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-tall-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xl'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-leadtext-xl-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-leadtext-xl-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-leadtext-xl-strong-tall-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}
|
|
@@ -41,7 +41,7 @@ export declare class SDSTextArea extends SDSTextArea_base {
|
|
|
41
41
|
private _defaultValue;
|
|
42
42
|
connectedCallback(): void;
|
|
43
43
|
updated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
44
|
-
|
|
44
|
+
updateValidity(): void;
|
|
45
45
|
private hasTypedTooManyCharacters;
|
|
46
46
|
private renderCharacterCounter;
|
|
47
47
|
private readonly _handleInputChange;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-textarea.d.ts","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAOhD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAEjF,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,SAAS,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAExD,MAAM,WAAW,gBAAiB,SAAQ,wBAAwB;IACjE,YAAY,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;;AAED,qBACa,WAAY,SAAQ,gBAAqF;IAErH,OAAgB,MAAM,4BAAY;IAEN,KAAK,CAAC,EAAE,MAAM,CAAC;IACA,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IACtB,QAAQ,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAC7E,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC/C,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAS;IAChD,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACtC,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAQ;IAEzD,OAAO,EAAG,mBAAmB,CAAC;IAEtD,OAAO,CAAC,aAAa,CAAuB;IAEnC,iBAAiB;IAMjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"sds-textarea.d.ts","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.ts"],"names":[],"mappings":"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"}
|
|
@@ -60,6 +60,9 @@ let SDSTextArea = class SDSTextArea extends SDSDelegateInteractionMixin(SDSEvent
|
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
updateValidity() {
|
|
63
|
+
if (!this.control) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
63
66
|
if (this.control.checkValidity()) {
|
|
64
67
|
this.internals.setValidity({});
|
|
65
68
|
}
|
|
@@ -141,7 +144,9 @@ let SDSTextArea = class SDSTextArea extends SDSDelegateInteractionMixin(SDSEvent
|
|
|
141
144
|
<div class="${classMap(textareaClasses)}">
|
|
142
145
|
${this.label || this.helpText
|
|
143
146
|
? html `<div>
|
|
144
|
-
${this.label
|
|
147
|
+
${this.label
|
|
148
|
+
? html `<label for="sds-textarea" class="sds-textarea__label">${this.readOnly ? html `<sds-icon name="lock-material-filled" size="m"></sds-icon>` : nothing}${this.label}</label>`
|
|
149
|
+
: nothing}
|
|
145
150
|
${this.helpText ? html `<p id="help-text" class="sds-textarea__help-text">${this.helpText}</p>` : nothing}
|
|
146
151
|
</div>`
|
|
147
152
|
: nothing}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-textarea.js","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-textarea.styles';\nimport { SDSDelegateInteractionMixin, SDSEventDispatcherMixin, SDSFormControlMixin } from '../mixins';\nimport type { SDSFormControlAttributes } from '../mixins/sds-form-control-mixin';\n\nimport '../sds-alert/sds-alert';\nimport '../sds-icon/sds-icon';\nimport { SDS_SIZES } from '../types';\n\ntype InputSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSTextAreaProps extends SDSFormControlAttributes {\n\tautocomplete?: HTMLTextAreaElement['autocomplete'];\n\tcols?: number;\n\tcounter?: number;\n\t'error-message'?: string;\n\t'help-text'?: string;\n\tlabel?: string;\n\tmaxlength?: number;\n\tminlength?: number;\n\tplaceholder?: string;\n\trequired?: boolean;\n\trows?: number;\n\tsize?: InputSize;\n\tvalue?: string;\n\twrap?: 'hard' | 'soft';\n}\n\n@guardedCustomElement('sds-textarea')\nexport class SDSTextArea extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSFormControlMixin(LitElement))) {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String }) value?: string;\n\t@property({ type: String, reflect: true }) label?: SDSTextAreaProps['label'];\n\t@property({ type: String, reflect: true }) placeholder?: SDSTextAreaProps['placeholder'];\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: SDSTextAreaProps['help-text'];\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: SDSTextAreaProps['error-message'];\n\t@property({ type: String, reflect: true }) autocomplete?: SDSTextAreaProps['autocomplete'];\n\t@property({ type: Boolean, reflect: true }) required: SDSTextAreaProps['required'] = false;\n\t@property({ type: Number, reflect: true }) rows?: SDSTextAreaProps['rows'];\n\t@property({ type: Number, reflect: true }) cols?: SDSTextAreaProps['cols'];\n\t@property({ type: String, reflect: true }) wrap?: SDSTextAreaProps['wrap'];\n\t@property({ type: Number, reflect: true }) minlength?: SDSTextAreaProps['minlength'];\n\t@property({ type: Number, reflect: true }) maxlength?: SDSTextAreaProps['maxlength'];\n\t@property({ type: Number, reflect: true }) counter?: SDSTextAreaProps['counter'];\n\t@property({ type: String, reflect: true }) size: SDSTextAreaProps['size'] = 'md';\n\n\t@query('#sds-textarea') control!: HTMLTextAreaElement;\n\n\tprivate _defaultValue: string | null = null;\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? null;\n\t\tthis.internals.setFormValue(this._defaultValue);\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\n\t\tif (changedProperties.has('value')) {\n\t\t\tthis.internals.setFormValue(this.value ?? '');\n\n\t\t\tif (this.control) {\n\t\t\t\tthis.control.value = this.value ?? '';\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate updateValidity() {\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate hasTypedTooManyCharacters() {\n\t\tif (!this.counter) {\n\t\t\treturn false;\n\t\t}\n\t\tconst currentLength = this.value?.length || 0;\n\t\treturn currentLength > this.counter;\n\t}\n\n\tprivate renderCharacterCounter() {\n\t\tif (this.counter === undefined) return nothing;\n\n\t\tconst currentLength = this.value?.length || 0;\n\t\tif (this.hasTypedTooManyCharacters()) {\n\t\t\treturn html`<sds-alert variant=\"secondary\" data-palette=\"danger\"\n\t\t\t\t><p class=\"sds-textarea__character-counter\" slot=\"message\">Du har ${currentLength - this.counter} tegn for mye</p></sds-alert\n\t\t\t>`;\n\t\t}\n\n\t\treturn html`<p class=\"sds-textarea__character-counter\">Du har ${this.counter - currentLength} tegn igjen</p>`;\n\t}\n\n\tprivate readonly _handleInputChange = (event: InputEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (this.disabled || !(event.target instanceof HTMLTextAreaElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value = event.target.value;\n\t\tthis.internals.setFormValue(this.value === '' ? null : this.value);\n\t\tthis.updateValidity();\n\t\tthis.dispatchSheriffEvent(event.type);\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchSheriffEvent('select');\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchSheriffEvent('focus');\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchSheriffEvent('blur');\n\t};\n\n\tformResetCallback() {\n\t\tthis.internals.setFormValue(this._defaultValue);\n\n\t\tconst newValue = this._defaultValue ?? '';\n\t\tthis.control.value = newValue;\n\t\tthis.value = newValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\ttype(): string {\n\t\treturn 'textarea';\n\t}\n\n\tget selectionStart(): number | null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number | null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst isInvalid = Boolean(this.errorMessage || this.hasTypedTooManyCharacters());\n\t\tconst textareaClasses = {\n\t\t\t'sds-textarea': true,\n\t\t\t'sds-textarea--error': isInvalid,\n\t\t};\n\n\t\tconst describedBy = [this.errorMessage ? 'error-message' : null, this.helpText ? 'help-text' : null].filter(Boolean).join(' ') || undefined;\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textareaClasses)}\">\n\t\t\t\t${this.label || this.helpText\n\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t\t${this.label ? html`<label for=\"sds-textarea\" class=\"sds-textarea__label\">${this.label}</label>` : nothing}\n\t\t\t\t\t\t\t${this.helpText ? html`<p id=\"help-text\" class=\"sds-textarea__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing}\n\t\t\t\t<div class=\"sds-textarea__input-container\">\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tclass=\"sds-textarea__input\"\n\t\t\t\t\t\tid=\"sds-textarea\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\t.value=\"${this.value ?? ''}\"\n\t\t\t\t\t\t.autocomplete=\"${this.autocomplete}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\trows=\"${ifDefined(this.rows)}\"\n\t\t\t\t\t\tcols=\"${ifDefined(this.cols)}\"\n\t\t\t\t\t\twrap=\"${ifDefined(this.wrap)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\taria-describedby=\"${ifDefined(describedBy)}\"\n\t\t\t\t\t\taria-invalid=\"${isInvalid ? 'true' : 'false'}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t></textarea>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage ? html`<sds-alert id=\"error-message\" variant=\"secondary\" data-palette=\"danger\"><p slot=\"message\">${this.errorMessage}</p></sds-alert>` : nothing} ${this.renderCharacterCounter()}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textarea': SDSTextArea;\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sds-textarea.js","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-textarea.styles';\nimport { SDSDelegateInteractionMixin, SDSEventDispatcherMixin, SDSFormControlMixin } from '../mixins';\nimport type { SDSFormControlAttributes } from '../mixins/sds-form-control-mixin';\n\nimport '../sds-alert/sds-alert';\nimport '../sds-icon/sds-icon';\nimport { SDS_SIZES } from '../types';\n\ntype InputSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSTextAreaProps extends SDSFormControlAttributes {\n\tautocomplete?: HTMLTextAreaElement['autocomplete'];\n\tcols?: number;\n\tcounter?: number;\n\t'error-message'?: string;\n\t'help-text'?: string;\n\tlabel?: string;\n\tmaxlength?: number;\n\tminlength?: number;\n\tplaceholder?: string;\n\trequired?: boolean;\n\trows?: number;\n\tsize?: InputSize;\n\tvalue?: string;\n\twrap?: 'hard' | 'soft';\n}\n\n@guardedCustomElement('sds-textarea')\nexport class SDSTextArea extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSFormControlMixin(LitElement))) {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String }) value?: string;\n\t@property({ type: String, reflect: true }) label?: SDSTextAreaProps['label'];\n\t@property({ type: String, reflect: true }) placeholder?: SDSTextAreaProps['placeholder'];\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: SDSTextAreaProps['help-text'];\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: SDSTextAreaProps['error-message'];\n\t@property({ type: String, reflect: true }) autocomplete?: SDSTextAreaProps['autocomplete'];\n\t@property({ type: Boolean, reflect: true }) required: SDSTextAreaProps['required'] = false;\n\t@property({ type: Number, reflect: true }) rows?: SDSTextAreaProps['rows'];\n\t@property({ type: Number, reflect: true }) cols?: SDSTextAreaProps['cols'];\n\t@property({ type: String, reflect: true }) wrap?: SDSTextAreaProps['wrap'];\n\t@property({ type: Number, reflect: true }) minlength?: SDSTextAreaProps['minlength'];\n\t@property({ type: Number, reflect: true }) maxlength?: SDSTextAreaProps['maxlength'];\n\t@property({ type: Number, reflect: true }) counter?: SDSTextAreaProps['counter'];\n\t@property({ type: String, reflect: true }) size: SDSTextAreaProps['size'] = 'md';\n\n\t@query('#sds-textarea') control!: HTMLTextAreaElement;\n\n\tprivate _defaultValue: string | null = null;\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? null;\n\t\tthis.internals.setFormValue(this._defaultValue);\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\n\t\tif (changedProperties.has('value')) {\n\t\t\tthis.internals.setFormValue(this.value ?? '');\n\n\t\t\tif (this.control) {\n\t\t\t\tthis.control.value = this.value ?? '';\n\t\t\t}\n\t\t}\n\t}\n\n\toverride updateValidity() {\n\t\tif (!this.control) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate hasTypedTooManyCharacters() {\n\t\tif (!this.counter) {\n\t\t\treturn false;\n\t\t}\n\t\tconst currentLength = this.value?.length || 0;\n\t\treturn currentLength > this.counter;\n\t}\n\n\tprivate renderCharacterCounter() {\n\t\tif (this.counter === undefined) return nothing;\n\n\t\tconst currentLength = this.value?.length || 0;\n\t\tif (this.hasTypedTooManyCharacters()) {\n\t\t\treturn html`<sds-alert variant=\"secondary\" data-palette=\"danger\"\n\t\t\t\t><p class=\"sds-textarea__character-counter\" slot=\"message\">Du har ${currentLength - this.counter} tegn for mye</p></sds-alert\n\t\t\t>`;\n\t\t}\n\n\t\treturn html`<p class=\"sds-textarea__character-counter\">Du har ${this.counter - currentLength} tegn igjen</p>`;\n\t}\n\n\tprivate readonly _handleInputChange = (event: InputEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (this.disabled || !(event.target instanceof HTMLTextAreaElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value = event.target.value;\n\t\tthis.internals.setFormValue(this.value === '' ? null : this.value);\n\t\tthis.updateValidity();\n\t\tthis.dispatchSheriffEvent(event.type);\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchSheriffEvent('select');\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchSheriffEvent('focus');\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchSheriffEvent('blur');\n\t};\n\n\tformResetCallback() {\n\t\tthis.internals.setFormValue(this._defaultValue);\n\n\t\tconst newValue = this._defaultValue ?? '';\n\t\tthis.control.value = newValue;\n\t\tthis.value = newValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\ttype(): string {\n\t\treturn 'textarea';\n\t}\n\n\tget selectionStart(): number | null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number | null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst isInvalid = Boolean(this.errorMessage || this.hasTypedTooManyCharacters());\n\t\tconst textareaClasses = {\n\t\t\t'sds-textarea': true,\n\t\t\t'sds-textarea--error': isInvalid,\n\t\t};\n\n\t\tconst describedBy = [this.errorMessage ? 'error-message' : null, this.helpText ? 'help-text' : null].filter(Boolean).join(' ') || undefined;\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textareaClasses)}\">\n\t\t\t\t${this.label || this.helpText\n\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t\t${this.label\n\t\t\t\t\t\t\t\t? html`<label for=\"sds-textarea\" class=\"sds-textarea__label\">${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"m\"></sds-icon>` : nothing}${this.label}</label>`\n\t\t\t\t\t\t\t\t: nothing}\n\t\t\t\t\t\t\t${this.helpText ? html`<p id=\"help-text\" class=\"sds-textarea__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing}\n\t\t\t\t<div class=\"sds-textarea__input-container\">\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tclass=\"sds-textarea__input\"\n\t\t\t\t\t\tid=\"sds-textarea\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\t.value=\"${this.value ?? ''}\"\n\t\t\t\t\t\t.autocomplete=\"${this.autocomplete}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\trows=\"${ifDefined(this.rows)}\"\n\t\t\t\t\t\tcols=\"${ifDefined(this.cols)}\"\n\t\t\t\t\t\twrap=\"${ifDefined(this.wrap)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\taria-describedby=\"${ifDefined(describedBy)}\"\n\t\t\t\t\t\taria-invalid=\"${isInvalid ? 'true' : 'false'}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t></textarea>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage ? html`<sds-alert id=\"error-message\" variant=\"secondary\" data-palette=\"danger\"><p slot=\"message\">${this.errorMessage}</p></sds-alert>` : nothing} ${this.renderCharacterCounter()}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textarea': SDSTextArea;\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-textarea.styles.d.ts","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-textarea.styles.d.ts","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAmMlB,CAAC"}
|
|
@@ -42,6 +42,7 @@ export const styles = css `
|
|
|
42
42
|
--_sds-textarea-focus-color: var(--sds-textarea-focus-color, var(--sds-color-states-focus-outer));
|
|
43
43
|
--_sds-textarea-focus-inner-color: var(--sds-textarea-focus-inner-color, var(--sds-color-states-focus-inner));
|
|
44
44
|
--_sds-textarea-focus-spacing: var(--sds-textarea-focus-spacing, var(--sds-color-states-focus-spacing));
|
|
45
|
+
--_sds-textarea-focus-outline-size: var(--sds-textarea-focus-outline-size, var(--sds-color-states-focus-outline-size));
|
|
45
46
|
|
|
46
47
|
all: unset;
|
|
47
48
|
display: block;
|
|
@@ -82,9 +83,9 @@ export const styles = css `
|
|
|
82
83
|
}
|
|
83
84
|
|
|
84
85
|
&:focus-visible {
|
|
85
|
-
box-shadow: 0 0 0 var(--
|
|
86
|
-
outline:
|
|
87
|
-
outline-offset:
|
|
86
|
+
box-shadow: 0 0 0 var(--_sds-textarea-focus-spacing) var(--_sds-textarea-focus-inner-color);
|
|
87
|
+
outline: var(--_sds-textarea-focus-outline-size) solid var(--_sds-textarea-focus-color);
|
|
88
|
+
outline-offset: var(--_sds-textarea-focus-spacing);
|
|
88
89
|
}
|
|
89
90
|
|
|
90
91
|
&:active {
|
|
@@ -102,6 +103,13 @@ export const styles = css `
|
|
|
102
103
|
max-width: var(--sds-typography-max-line-width);
|
|
103
104
|
}
|
|
104
105
|
|
|
106
|
+
.sds-textarea__label:has(sds-icon) {
|
|
107
|
+
align-items: center;
|
|
108
|
+
display: flex;
|
|
109
|
+
flex-direction: row;
|
|
110
|
+
gap: var(--_sds-textarea-gap);
|
|
111
|
+
}
|
|
112
|
+
|
|
105
113
|
.sds-textarea__help-text {
|
|
106
114
|
color: var(--_sds-textarea-helptext-text-color);
|
|
107
115
|
font-size: var(--_sds-textarea-helptext-font-size);
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2LxB,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-content-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-content-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-content-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-content-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-content-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-resize: var(--sds-textarea-resize, vertical);\n\t\t--_sds-textarea-cursor: var(--sds-textarea-cursor, auto);\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\tcursor: var(--_sds-textarea-cursor);\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: var(--_sds-textarea-resize);\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-resize: var(--sds-textarea-resize, none);\n\t\t--_sds-textarea-cursor: var(--sds-textarea-cursor, default);\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-content-sm));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-content-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-content-sm));\n\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-content-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-content-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-content-lg));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-content-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-content-lg));\n\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-content-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-content-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmMxB,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-content-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-content-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-content-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-content-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-content-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-resize: var(--sds-textarea-resize, vertical);\n\t\t--_sds-textarea-cursor: var(--sds-textarea-cursor, auto);\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\t\t--_sds-textarea-focus-outline-size: var(--sds-textarea-focus-outline-size, var(--sds-color-states-focus-outline-size));\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\tcursor: var(--_sds-textarea-cursor);\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: var(--_sds-textarea-resize);\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-textarea-focus-spacing) var(--_sds-textarea-focus-inner-color);\n\t\t\t\toutline: var(--_sds-textarea-focus-outline-size) solid var(--_sds-textarea-focus-color);\n\t\t\t\toutline-offset: var(--_sds-textarea-focus-spacing);\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__label:has(sds-icon) {\n\t\t\talign-items: center;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tgap: var(--_sds-textarea-gap);\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-resize: var(--sds-textarea-resize, none);\n\t\t--_sds-textarea-cursor: var(--sds-textarea-cursor, default);\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-content-sm));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-content-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-content-sm));\n\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-content-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-content-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-content-lg));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-content-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-content-lg));\n\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-content-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-content-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"]}
|
|
@@ -13,6 +13,8 @@ export interface SDSTextFieldProps extends SDSFormControlAttributes {
|
|
|
13
13
|
label?: string;
|
|
14
14
|
maxlength?: number;
|
|
15
15
|
minlength?: number;
|
|
16
|
+
min?: number | string;
|
|
17
|
+
max?: number | string;
|
|
16
18
|
pattern?: string;
|
|
17
19
|
placeholder?: string;
|
|
18
20
|
required?: boolean;
|
|
@@ -34,6 +36,8 @@ export declare class SDSTextField extends SDSTextField_base {
|
|
|
34
36
|
pattern?: SDSTextFieldProps['pattern'];
|
|
35
37
|
minlength?: SDSTextFieldProps['minlength'];
|
|
36
38
|
maxlength?: SDSTextFieldProps['maxlength'];
|
|
39
|
+
min?: SDSTextFieldProps['min'];
|
|
40
|
+
max?: SDSTextFieldProps['max'];
|
|
37
41
|
size: SDSTextFieldProps['size'];
|
|
38
42
|
private hasIcon;
|
|
39
43
|
control: HTMLInputElement;
|
|
@@ -41,7 +45,7 @@ export declare class SDSTextField extends SDSTextField_base {
|
|
|
41
45
|
connectedCallback(): void;
|
|
42
46
|
updated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
43
47
|
private readonly handleSlotChange;
|
|
44
|
-
|
|
48
|
+
updateValidity(): void;
|
|
45
49
|
private readonly _handleInputChange;
|
|
46
50
|
private readonly _handleSelect;
|
|
47
51
|
private readonly _handleFocus;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-textfield.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAGjF,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,SAAS,GACX,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,KAAK,GACL,OAAO,GACP,UAAU,GACV,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,QAAQ,GACR,OAAO,GACP,OAAO,GACP,UAAU,GACV,OAAO,GACP,MAAM,GACN,QAAQ,GACR,OAAO,GACP,OAAO,GACP,QAAQ,CAAC;AAEZ,KAAK,SAAS,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAC1B,KAAK,GACL,IAAI,GACJ,MAAM,GACN,kBAAkB,GAClB,YAAY,GACZ,iBAAiB,GACjB,aAAa,GACb,kBAAkB,GAClB,UAAU,GACV,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,eAAe,GACf,oBAAoB,GACpB,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,cAAc,GACd,aAAa,GACb,SAAS,GACT,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,WAAW,GACX,QAAQ,GACR,cAAc,GACd,aAAa,GACb,QAAQ,GACR,SAAS,GACT,sBAAsB,GACtB,oBAAoB,GACpB,UAAU,GACV,MAAM,GACN,UAAU,GACV,YAAY,GACZ,WAAW,GACX,KAAK,GACL,KAAK,GACL,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,WAAW,GACX,eAAe,GACf,MAAM,GACN,KAAK,GACL,OAAO,CAAC;AAEX,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IAClE,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;;AAED,qBACa,YAAa,SAAQ,iBAAqF;IAEtH,OAAgB,MAAM,4BAAY;IAES,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAU;IACxD,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACpB,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;IACvB,QAAQ,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACtC,YAAY,CAAC,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC;IAC9E,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAChD,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAS;IACjD,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC3C,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAQ;IAGzE,OAAO,CAAC,OAAO,CAAS;IAER,OAAO,EAAG,gBAAgB,CAAC;IAEpD,OAAO,CAAC,aAAa,CAAuB;IAEnC,iBAAiB;IAMjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAY1E,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAG/B;
|
|
1
|
+
{"version":3,"file":"sds-textfield.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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"}
|