@politiet/sheriff-web-components 2.6.0 → 2.7.0

package/dist/sds-stepper-step/sds-stepper-step.styles.js.map

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkQxB,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, 32px);\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\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, var(--sds-typography-link-text-decoration));\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-spacing-xs);\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\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-main-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-label-text-decoration-thickness: var(--sds-stepper-step-label-text-decoration-thickness, calc(var(--sds-typography-link-text-decoration-thickness) + 1px));\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"]}
+{"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"]}

package/dist/sds-switch/sds-switch.d.ts

@@ -1,35 +1,26 @@
 import { LitElement } from 'lit';
 import { SDS_SIZES } from '../types';
+import type { SDSFormControlAttributes } from '../mixins/sds-form-control-mixin';
 import '../sds-icon/sds-icon';
 type v2SwitchSizes = Extract<SDS_SIZES, 'sm' | 'md' | 'lg'>;
 type SwitchSize = v2SwitchSizes | 's' | 'l';
-export interface SDSSwitchProps {
-    disabled?: boolean;
-    label?: string;
+export interface SDSSwitchProps extends SDSFormControlAttributes {
+    checked?: boolean;
     'hide-label'?: boolean;
-    name?: string;
-    readonly?: boolean;
+    label?: string;
     reverse?: boolean;
-    checked?: boolean;
     size?: SwitchSize;
 }
-declare const SDSSwitch_base: import("../mixins/types").Constructable<import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface> & typeof LitElement;
+declare const SDSSwitch_base: import("../mixins/types").Constructable<import("../mixins/sds-delegate-interaction-mixin").DelegateInteractionMixinInterface> & import("../mixins/types").Constructable<import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface> & import("../mixins/types").Constructable<import("../mixins/sds-form-control-mixin").SDSFormControlMixinInterface> & typeof LitElement;
 export declare class SDSSwitch extends SDSSwitch_base {
     static styles: import("lit").CSSResult[];
-    disabled: boolean;
     label: string;
     hideLabel: boolean;
-    name?: string;
     reverse: boolean;
     checked: boolean;
-    readOnly: boolean;
     size: SwitchSize;
     control: HTMLInputElement;
-    static formAssociated: boolean;
-    readonly internals: ElementInternals;
-    static shadowRootOptions: ShadowRootInit;
     private _initialChecked;
-    constructor();
     connectedCallback(): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     formResetCallback(): void;

package/dist/sds-switch/sds-switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sds-switch.d.ts","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAGrC,OAAO,sBAAsB,CAAC;AAE9B,KAAK,aAAa,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAC5D,KAAK,UAAU,GAAG,aAAa,GAAG,GAAG,GAAG,GAAG,CAAC;AAE5C,MAAM,WAAW,cAAc;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CAClB;;AAED,qBACa,SAAU,SAAQ,cAAmC;IACjE,OAAgB,MAAM,4BAAY;IAEU,QAAQ,EAAE,OAAO,CAAS;IAC3B,KAAK,EAAE,MAAM,CAAM;IACO,SAAS,EAAE,OAAO,CAAS;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAS;IACzB,OAAO,EAAE,OAAO,CAAS;IACF,QAAQ,EAAE,OAAO,CAAS;IAClD,IAAI,EAAE,UAAU,CAAQ;IAEhD,OAAO,EAAG,gBAAgB,CAAC;IAE9C,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAE5C,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IACF,OAAO,CAAC,eAAe,CAAkB;;IAOhC,iBAAiB,IAAI,IAAI;IAMzB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAO1E,iBAAiB;IAMjB,wBAAwB,CAAC,KAAK,EAAE,OAAO;IAIvC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAQ5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAK1B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAW1B;IAEF,IAAI,KAAK,IAAI,MAAM,CAElB;IAEQ,MAAM;CA4Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
+{"version":3,"file":"sds-switch.d.ts","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAEjF,OAAO,sBAAsB,CAAC;AAE9B,KAAK,aAAa,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAC5D,KAAK,UAAU,GAAG,aAAa,GAAG,GAAG,GAAG,GAAG,CAAC;AAE5C,MAAM,WAAW,cAAe,SAAQ,wBAAwB;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CAClB;;AAED,qBACa,SAAU,SAAQ,cAAqF;IACnH,OAAgB,MAAM,4BAAY;IAES,KAAK,EAAE,MAAM,CAAM;IACO,SAAS,EAAE,OAAO,CAAS;IACpD,OAAO,EAAE,OAAO,CAAS;IACzB,OAAO,EAAE,OAAO,CAAS;IAC1B,IAAI,EAAE,UAAU,CAAQ;IAEhD,OAAO,EAAG,gBAAgB,CAAC;IAC9C,OAAO,CAAC,eAAe,CAAkB;IAEhC,iBAAiB,IAAI,IAAI;IAMzB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAS1E,iBAAiB;IAMjB,wBAAwB,CAAC,KAAK,EAAE,OAAO;IAIvC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAY5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAK1B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAW1B;IAEF,IAAI,KAAK,IAAI,MAAM,CAElB;IAEQ,MAAM;CA4Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

package/dist/sds-switch/sds-switch.js

@@ -10,27 +10,28 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { guardedCustomElement } from '../utils/guarded-custom-element';
 import { styles } from './sds-switch.styles';
-import { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';
+import { SDSEventDispatcherMixin, SDSDelegateInteractionMixin, SDSFormControlMixin } from '../mixins';
 import '../sds-icon/sds-icon';
-let SDSSwitch = class SDSSwitch extends SDSEventDispatcherMixin(LitElement) {
+let SDSSwitch = class SDSSwitch extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSFormControlMixin(LitElement))) {
     constructor() {
-        super();
-        this.disabled = false;
+        super(...arguments);
         this.label = '';
         this.hideLabel = false;
         this.reverse = false;
         this.checked = false;
-        this.readOnly = false;
         this.size = 'md';
         this._initialChecked = false;
         this._handleChange = (event) => {
             event.stopImmediatePropagation();
-            if (!this.disabled) {
-                const elem = event.target;
-                this.checked = elem.checked;
-                this.internals.setFormValue(this.checked ? 'on' : 'off');
-                this.dispatchSheriffEvent('change');
+            if (this.disabled || this.readOnly) {
+                event.target.checked = this.checked;
+                event.preventDefault();
+                return;
             }
+            const elem = event.target;
+            this.checked = elem.checked;
+            this.internals.setFormValue(this.checked ? 'on' : 'off');
+            this.dispatchSheriffEvent('change');
         };
         this._handleFocus = (event) => {
             event.stopImmediatePropagation();
@@ -40,7 +41,7 @@ let SDSSwitch = class SDSSwitch extends SDSEventDispatcherMixin(LitElement) {
         };
         this._handleBlur = (event) => {
             event.stopImmediatePropagation();
-            if (!this.disabled && !this.disabled) {
+            if (!this.disabled) {
                 this.dispatchSheriffEvent('blur');
             }
         };
@@ -56,7 +57,6 @@ let SDSSwitch = class SDSSwitch extends SDSEventDispatcherMixin(LitElement) {
                     return 'sm';
             }
         };
-        this.internals = this.attachInternals();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -64,6 +64,7 @@ let SDSSwitch = class SDSSwitch extends SDSEventDispatcherMixin(LitElement) {
         this.internals.setFormValue(this.checked ? 'on' : 'off');
     }
     updated(changedProperties) {
+        super.updated(changedProperties);
         if (changedProperties.has('checked')) {
             this.control.checked = this.checked;
             this.internals.setFormValue(this.checked ? 'on' : 'off');
@@ -108,32 +109,18 @@ let SDSSwitch = class SDSSwitch extends SDSEventDispatcherMixin(LitElement) {
     }
 };
 SDSSwitch.styles = [styles];
-SDSSwitch.formAssociated = true;
-SDSSwitch.shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SDSSwitch.prototype, "disabled", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], SDSSwitch.prototype, "label", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'hide-label' })
 ], SDSSwitch.prototype, "hideLabel", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], SDSSwitch.prototype, "name", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SDSSwitch.prototype, "reverse", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SDSSwitch.prototype, "checked", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'readonly', reflect: true })
-], SDSSwitch.prototype, "readOnly", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], SDSSwitch.prototype, "size", void 0);

package/dist/sds-switch/sds-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-switch.js","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-switch.styles';\nimport { SDS_SIZES } from '../types';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\n\nimport '../sds-icon/sds-icon';\n\ntype v2SwitchSizes = Extract<SDS_SIZES, 'sm' | 'md' | 'lg'>;\ntype SwitchSize = v2SwitchSizes | 's' | 'l';\n\nexport interface SDSSwitchProps {\n\tdisabled?: boolean;\n\tlabel?: string;\n\t'hide-label'?: boolean;\n\tname?: string;\n\treadonly?: boolean;\n\treverse?: boolean;\n\tchecked?: boolean;\n\tsize?: SwitchSize;\n}\n\n@guardedCustomElement('sds-switch')\nexport class SDSSwitch extends SDSEventDispatcherMixin(LitElement) {\n\tstatic override styles = [styles];\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: String, reflect: true }) label: string = '';\n\t@property({ type: Boolean, reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: Boolean, reflect: true }) reverse: boolean = false;\n\t@property({ type: Boolean, reflect: true }) checked: boolean = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: String, reflect: true }) size: SwitchSize = 'md';\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tstatic override shadowRootOptions: ShadowRootInit = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t};\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked;\n\t\tthis.internals.setFormValue(this.checked ? 'on' : 'off');\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tif (changedProperties.has('checked')) {\n\t\t\tthis.control.checked = this.checked;\n\t\t\tthis.internals.setFormValue(this.checked ? 'on' : 'off');\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.control.checked = this._initialChecked;\n\t\tthis.internals.setFormValue(this._initialChecked ? 'on' : 'off');\n\t}\n\n\tformStateRestoreCallback(state: unknown) {\n\t\tthis.checked = state as boolean;\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst elem = event.target as HTMLInputElement;\n\t\t\tthis.checked = elem.checked;\n\t\t\tthis.internals.setFormValue(this.checked ? 'on' : 'off');\n\t\t\tthis.dispatchSheriffEvent('change');\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchSheriffEvent('focus');\n\t\t}\n\t};\n\n\tprivate readonly _handleBlur = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled && !this.disabled) {\n\t\t\tthis.dispatchSheriffEvent('blur');\n\t\t}\n\t};\n\n\tprivate readonly getIconSize = (): v2SwitchSizes => {\n\t\tswitch (this.size) {\n\t\t\tcase 'sm':\n\t\t\tcase 'md':\n\t\t\tcase 'lg':\n\t\t\t\treturn this.size;\n\t\t\tcase 'l':\n\t\t\t\treturn 'lg';\n\t\t\tcase 's':\n\t\t\t\treturn 'sm';\n\t\t}\n\t};\n\n\tget value(): string {\n\t\treturn this.checked ? 'on' : 'off';\n\t}\n\n\toverride render() {\n\t\tconst switchClasses = {\n\t\t\t'sds-switch': true,\n\t\t};\n\n\t\tconst labelClasses = {\n\t\t\t'sds-switch__label': true,\n\t\t\t'sds-switch__label--hidden': this.hideLabel,\n\t\t};\n\n\t\tconst inputTemplate = html`<input\n\t\t\tclass=\"sds-switch__input\"\n\t\t\tid=\"control\"\n\t\t\ttype=\"checkbox\"\n\t\t\trole=\"switch\"\n\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t.checked=\"${this.checked}\"\n\t\t\t?checked=\"${this.checked}\"\n\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t@change=\"${this._handleChange}\"\n\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t@blur=\"${this._handleBlur}\"\n\t\t/>`;\n\t\tconst iconTemplate = this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"${this.getIconSize()}\"></sds-icon>` : nothing;\n\t\tconst labelTemplate = html`<label class=\"${classMap(labelClasses)}\" for=\"control\">${iconTemplate}${this.label}</label>`;\n\t\treturn html`<div class=\"${classMap(switchClasses)}\">${this.reverse ? [labelTemplate, inputTemplate] : [inputTemplate, labelTemplate]}</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-switch': SDSSwitch;\n\t}\n}\n"]}
+{"version":3,"file":"sds-switch.js","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-switch.styles';\nimport { SDS_SIZES } from '../types';\nimport { SDSEventDispatcherMixin, SDSDelegateInteractionMixin, SDSFormControlMixin } from '../mixins';\nimport type { SDSFormControlAttributes } from '../mixins/sds-form-control-mixin';\n\nimport '../sds-icon/sds-icon';\n\ntype v2SwitchSizes = Extract<SDS_SIZES, 'sm' | 'md' | 'lg'>;\ntype SwitchSize = v2SwitchSizes | 's' | 'l';\n\nexport interface SDSSwitchProps extends SDSFormControlAttributes {\n\tchecked?: boolean;\n\t'hide-label'?: boolean;\n\tlabel?: string;\n\treverse?: boolean;\n\tsize?: SwitchSize;\n}\n\n@guardedCustomElement('sds-switch')\nexport class SDSSwitch extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSFormControlMixin(LitElement))) {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) label: string = '';\n\t@property({ type: Boolean, reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\n\t@property({ type: Boolean, reflect: true }) reverse: boolean = false;\n\t@property({ type: Boolean, reflect: true }) checked: boolean = false;\n\t@property({ type: String, reflect: true }) size: SwitchSize = 'md';\n\n\t@query('#control') control!: HTMLInputElement;\n\tprivate _initialChecked: boolean = false;\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked;\n\t\tthis.internals.setFormValue(this.checked ? 'on' : 'off');\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\n\t\tif (changedProperties.has('checked')) {\n\t\t\tthis.control.checked = this.checked;\n\t\t\tthis.internals.setFormValue(this.checked ? 'on' : 'off');\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.control.checked = this._initialChecked;\n\t\tthis.internals.setFormValue(this._initialChecked ? 'on' : 'off');\n\t}\n\n\tformStateRestoreCallback(state: unknown) {\n\t\tthis.checked = state as boolean;\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (this.disabled || this.readOnly) {\n\t\t\t(event.target as HTMLInputElement).checked = this.checked;\n\t\t\tevent.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst elem = event.target as HTMLInputElement;\n\t\tthis.checked = elem.checked;\n\t\tthis.internals.setFormValue(this.checked ? 'on' : 'off');\n\t\tthis.dispatchSheriffEvent('change');\n\t};\n\n\tprivate readonly _handleFocus = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchSheriffEvent('focus');\n\t\t}\n\t};\n\n\tprivate readonly _handleBlur = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchSheriffEvent('blur');\n\t\t}\n\t};\n\n\tprivate readonly getIconSize = (): v2SwitchSizes => {\n\t\tswitch (this.size) {\n\t\t\tcase 'sm':\n\t\t\tcase 'md':\n\t\t\tcase 'lg':\n\t\t\t\treturn this.size;\n\t\t\tcase 'l':\n\t\t\t\treturn 'lg';\n\t\t\tcase 's':\n\t\t\t\treturn 'sm';\n\t\t}\n\t};\n\n\tget value(): string {\n\t\treturn this.checked ? 'on' : 'off';\n\t}\n\n\toverride render() {\n\t\tconst switchClasses = {\n\t\t\t'sds-switch': true,\n\t\t};\n\n\t\tconst labelClasses = {\n\t\t\t'sds-switch__label': true,\n\t\t\t'sds-switch__label--hidden': this.hideLabel,\n\t\t};\n\n\t\tconst inputTemplate = html`<input\n\t\t\tclass=\"sds-switch__input\"\n\t\t\tid=\"control\"\n\t\t\ttype=\"checkbox\"\n\t\t\trole=\"switch\"\n\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t.checked=\"${this.checked}\"\n\t\t\t?checked=\"${this.checked}\"\n\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t@change=\"${this._handleChange}\"\n\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t@blur=\"${this._handleBlur}\"\n\t\t/>`;\n\t\tconst iconTemplate = this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"${this.getIconSize()}\"></sds-icon>` : nothing;\n\t\tconst labelTemplate = html`<label class=\"${classMap(labelClasses)}\" for=\"control\">${iconTemplate}${this.label}</label>`;\n\t\treturn html`<div class=\"${classMap(switchClasses)}\">${this.reverse ? [labelTemplate, inputTemplate] : [inputTemplate, labelTemplate]}</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-switch': SDSSwitch;\n\t}\n}\n"]}

package/dist/sds-switch/sds-switch.styles.js

@@ -48,7 +48,7 @@ export const styles = css `
 		pointer-events: none;
 	}
 
-	:host([disabled]) {
+	:host(:disabled) {
 		opacity: var(--_sds-switch-disabled-opacity);
 		pointer-events: none;
 	}

package/dist/sds-switch/sds-switch.styles.js.map

@@ -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-width: var(--sds-switch-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-switch-focus-outline-color: var(--sds-switch-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-switch-focus-outline-offset: var(--sds-switch-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-switch-focus-inner-color: var(--sds-switch-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-switch-disabled-opacity: var(--sds-switch-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host([hidden]) {\n\t\tdisplay: none;\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-neutral-border-subtle));\n\t\tcursor: default;\n\t\tpointer-events: none;\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-switch-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='s']),\n\t:host([size='sm']) {\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-sm));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-sm));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-sm));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-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-color-states-focus-spacing) var(--_sds-switch-focus-inner-color);\n\t\toutline: var(--_sds-switch-focus-outline-width) solid var(--_sds-switch-focus-outline-color);\n\t\toutline-offset: var(--_sds-switch-focus-outline-offset);\n\t}\n\n\t.sds-switch__input:checked:not([readonly]) {\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-main-action-default));\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color-checked, var(--sds-color-main-action-default));\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-surface-default));\n\t}\n\n\t.sds-switch__input:checked::before {\n\t\t--_sds-switch-button-position: calc(var(--_sds-switch-width) - var(--_sds-switch-button-size) - var(--_sds-switch-button-gap) - var(--_sds-switch-border-width));\n\t}\n`;\n"]}
+{"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-width: var(--sds-switch-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-switch-focus-outline-color: var(--sds-switch-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-switch-focus-outline-offset: var(--sds-switch-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-switch-focus-inner-color: var(--sds-switch-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-switch-disabled-opacity: var(--sds-switch-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host([hidden]) {\n\t\tdisplay: none;\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-neutral-border-subtle));\n\t\tcursor: default;\n\t\tpointer-events: none;\n\t}\n\n\t:host(:disabled) {\n\t\topacity: var(--_sds-switch-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='s']),\n\t:host([size='sm']) {\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-sm));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-sm));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-sm));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-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-color-states-focus-spacing) var(--_sds-switch-focus-inner-color);\n\t\toutline: var(--_sds-switch-focus-outline-width) solid var(--_sds-switch-focus-outline-color);\n\t\toutline-offset: var(--_sds-switch-focus-outline-offset);\n\t}\n\n\t.sds-switch__input:checked:not([readonly]) {\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-main-action-default));\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color-checked, var(--sds-color-main-action-default));\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-surface-default));\n\t}\n\n\t.sds-switch__input:checked::before {\n\t\t--_sds-switch-button-position: calc(var(--_sds-switch-width) - var(--_sds-switch-button-size) - var(--_sds-switch-button-gap) - var(--_sds-switch-border-width));\n\t}\n`;\n"]}

package/dist/sds-text/sds-text.styles.d.ts.map

@@ -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,yBAmRlB,CAAC"}
+{"version":3,"file":"sds-text.styles.d.ts","sourceRoot":"","sources":["../../src/sds-text/sds-text.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA8ZlB,CAAC"}