@politiet/sheriff-web-components 2.0.0-beta.1 → 2.0.0-rc.1

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

@@ -1 +1 @@
-{"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property } 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-button.styles';\nimport { ColorMode as LoaderColorMode } from '../sds-loader/sds-loader';\nimport { SDS_COLOR_PALETTES, SDS_SIZES, SDS_VARIANTS } from '../types';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\ntype ButtonVariant = SDS_VARIANTS | 'critical';\ntype ButtonColorPalette = Extract<SDS_COLOR_PALETTES, 'accent' | 'danger'>;\ntype ButtonSize = 'large' | 'medium' | 'small' | Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\ntype TargetTypes = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface SDSButtonProps {\n\tcolor?: ButtonColorPalette;\n\tdisabled?: boolean;\n\tform?: string;\n\thref?: string;\n\ticon?: boolean;\n\tloading?: boolean;\n\tname?: string;\n\tsize?: ButtonSize;\n\ttarget?: TargetTypes;\n\ttype?: ButtonType;\n\tvalue?: string;\n\tvariant?: ButtonVariant;\n\tonClick?: (event: CustomEvent) => void;\n\tonReset?: (event: CustomEvent) => void;\n\tonSubmit?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-button')\nexport class SDSButton extends LitElement {\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, reflect: true }) icon: boolean = false;\n\t@property({ type: Boolean, reflect: true }) loading: boolean = false;\n\t@property({ type: String, reflect: true }) color?: ButtonColorPalette;\n\t@property({ type: String, reflect: true }) form?: string;\n\t@property({ type: String, reflect: true }) href?: string;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) size: ButtonSize = 'lg';\n\t@property({ type: String, reflect: true }) target?: TargetTypes;\n\t@property({ type: String, reflect: true }) type: ButtonType = 'button';\n\t@property({ type: String, reflect: true }) value: string = '';\n\t@property({ type: String, reflect: true }) variant: ButtonVariant = 'primary';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride updated(changed: PropertyValues) {\n\t\t// Cast critical variant to primary and color to danger to prevent breaking changes\n\t\tif (changed.has('variant') && this.variant === 'critical') {\n\t\t\tthis.variant = 'primary';\n\t\t\tthis.color = 'danger';\n\t\t}\n\t}\n\n\tprivate readonly _handleClick = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (!this.disabled) {\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'submit': {\n\t\t\t\t\tconst submitEvent = new CustomEvent('submit', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t});\n\t\t\t\t\tconst shouldSubmit = this.dispatchEvent(submitEvent);\n\n\t\t\t\t\tif (shouldSubmit) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.requestSubmit();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.requestSubmit();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tcase 'reset': {\n\t\t\t\t\tconst resetEvent = new CustomEvent('reset', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t});\n\t\t\t\t\tconst shouldReset = this.dispatchEvent(resetEvent);\n\n\t\t\t\t\tif (shouldReset) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.reset();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.reset();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tdefault:\n\t\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\t\tnew CustomEvent('click', {\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\t})\n\t\t\t\t\t);\n\t\t\t}\n\t\t}\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.click();\n\t}\n\n\toverride render() {\n\t\tconst buttonClasses = {\n\t\t\t'sds-button': true,\n\t\t\t'sds-button--as-link': !!this.href,\n\t\t};\n\n\t\tlet loaderColor: LoaderColorMode;\n\t\tif (this.color === 'danger') {\n\t\t\tloaderColor = ['primary', 'critical'].includes(this.variant) ? 'danger' : 'danger-contrast';\n\t\t} else {\n\t\t\tloaderColor = ['primary', 'critical'].includes(this.variant) ? 'accent' : 'accent-contrast';\n\t\t}\n\n\t\tif (this.href) {\n\t\t\treturn html` <a id=\"link\" class=\"${classMap(buttonClasses)}\" href=\"${this.href}\" target=\"${ifDefined(this.target)}\">\n\t\t\t\t<slot name=\"before\"></slot>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"after\"></slot>\n\t\t\t</a>`;\n\t\t}\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\tid=\"control\"\n\t\t\t\tform=\"${ifDefined(this.form)}\"\n\t\t\t\tclass=\"${classMap(buttonClasses)}\"\n\t\t\t\ttype=\"${this.type}\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t@click=\"${this._handleClick}\"\n\t\t\t>\n\t\t\t\t${this.loading ? html`<sds-loader slot=\"before\" color=${loaderColor}></sds-loader>` : nothing} ${this.loading ? nothing : html`<slot name=\"before\"></slot>`}\n\t\t\t\t<slot></slot>\n\t\t\t\t${this.loading ? nothing : html`<slot name=\"after\"></slot>`}\n\t\t\t</button>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-button': SDSButton;\n\t}\n}\n"]}
+{"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { SDS_SIZES, SDS_VARIANTS } from '../types';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-button.styles';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\ntype ButtonVariant = SDS_VARIANTS | 'critical';\ntype ButtonSize = 'large' | 'medium' | 'small' | Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\ntype TargetTypes = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface SDSButtonProps {\n\tdisabled?: boolean;\n\tform?: string;\n\thref?: string;\n\ticon?: boolean;\n\tloading?: boolean;\n\tname?: string;\n\tsize?: ButtonSize;\n\ttarget?: TargetTypes;\n\ttype?: ButtonType;\n\tvalue?: string;\n\tvariant?: ButtonVariant;\n\tonClick?: (event: CustomEvent) => void;\n\tonReset?: (event: CustomEvent) => void;\n\tonSubmit?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-button')\nexport class SDSButton extends LitElement {\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, reflect: true }) icon: boolean = false;\n\t@property({ type: Boolean, reflect: true }) loading: boolean = false;\n\t@property({ type: String, reflect: true }) form?: string;\n\t@property({ type: String, reflect: true }) href?: string;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) size: ButtonSize = 'lg';\n\t@property({ type: String, reflect: true }) target?: TargetTypes;\n\t@property({ type: String, reflect: true }) type: ButtonType = 'button';\n\t@property({ type: String, reflect: true }) value: string = '';\n\t@property({ type: String, reflect: true }) variant: ButtonVariant = 'primary';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride updated(changed: PropertyValues) {\n\t\t// Cast critical variant to danger palette to prevent breaking changes\n\t\tif (changed.has('variant') && this.variant === 'critical') {\n\t\t\tthis.setAttribute('data-palette', 'danger');\n\t\t}\n\t}\n\n\tprivate readonly _handleClick = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (!this.disabled) {\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'submit': {\n\t\t\t\t\tconst submitEvent = new CustomEvent('submit', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t});\n\t\t\t\t\tconst shouldSubmit = this.dispatchEvent(submitEvent);\n\n\t\t\t\t\tif (shouldSubmit) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.requestSubmit();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.requestSubmit();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tcase 'reset': {\n\t\t\t\t\tconst resetEvent = new CustomEvent('reset', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t});\n\t\t\t\t\tconst shouldReset = this.dispatchEvent(resetEvent);\n\n\t\t\t\t\tif (shouldReset) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.reset();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.reset();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tdefault:\n\t\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\t\tnew CustomEvent('click', {\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\t})\n\t\t\t\t\t);\n\t\t\t}\n\t\t}\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.click();\n\t}\n\n\toverride render() {\n\t\tconst buttonClasses = {\n\t\t\t'sds-button': true,\n\t\t\t'sds-button--as-link': !!this.href,\n\t\t};\n\n\t\tif (this.href) {\n\t\t\treturn html` <a id=\"link\" class=\"${classMap(buttonClasses)}\" href=\"${this.href}\" target=\"${ifDefined(this.target)}\">\n\t\t\t\t<slot name=\"before\"></slot>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"after\"></slot>\n\t\t\t</a>`;\n\t\t}\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\tid=\"control\"\n\t\t\t\tform=\"${ifDefined(this.form)}\"\n\t\t\t\tclass=\"${classMap(buttonClasses)}\"\n\t\t\t\ttype=\"${this.type}\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t@click=\"${this._handleClick}\"\n\t\t\t>\n\t\t\t\t${this.loading ? html`<sds-loader slot=\"before\" ?contrast=\"${this.variant !== 'primary'}\"></sds-loader>` : nothing} ${this.loading ? nothing : html`<slot name=\"before\"></slot>`}\n\t\t\t\t<slot></slot>\n\t\t\t\t${this.loading ? nothing : html`<slot name=\"after\"></slot>`}\n\t\t\t</button>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-button': SDSButton;\n\t}\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"sds-button.styles.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAqKlB,CAAC"}
+{"version":3,"file":"sds-button.styles.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA2IlB,CAAC"}

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

@@ -1,8 +1,8 @@
 import { css } from 'lit';
 export const styles = css `
 	:host {
-		--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-action-default));
-		--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-default));
+		--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
+		--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
 		--_sds-button-border-width: var(--sds-button-border-width, var(--sds-border-md));
 		--_sds-button-disabled-opacity: var(--sds-button-disabled-opacity, var(--sds-color-states-disabled-opacity));
 		--_sds-button-focus-color: var(--sds-button-focus-color, var(--sds-color-states-focus-outer));
@@ -10,14 +10,18 @@ export const styles = css `
 		--_sds-button-focus-spacing: var(--sds-button-focus-spacing, var(--sds-color-states-focus-spacing));
 		--_sds-button-font-family: var(--sds-button-font, var(--sds-typography-font-family-roboto));
 		--_sds-button-font-size: var(--sds-button-font-size, var(--sds-typography-body-md-desktop-font-size));
-		--_sds-button-font-weight: var(--sds-button-font-weight, var(--sds-typography-body-md-desktop-font-weight));
+		--_sds-button-font-weight: var(--sds-button-font-weight, var(--sds-typography-body-md-strong-desktop-font-weight));
 		--_sds-button-gap: var(--sds-button-gap, var(--sds-spacing-3xs));
 		--_sds-button-line-height: var(--sds-button-line-height, var(--sds-typography-body-md-desktop-line-height));
 		--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-lg));
 		--_sds-button-padding-block: var(--sds-button-padding-block, 0);
 		--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-xs));
 		--_sds-button-radius: var(--sds-button-radius, var(--sds-radius-sm));
-		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-accent-action-contrast-default));
+		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));
+
+		--_sds-button-tertiary-text-decoration: var(--sds-typography-link-text-decoration, underline);
+		--_sds-button-tertiary-text-underline-offset: var(--sds-typography-link-text-underline-offset, 4px);
+		--_sds-button-tertiary-text-underline-thickness: 2px;
 
 		display: inline-block;
 		box-sizing: border-box;
@@ -43,8 +47,8 @@ export const styles = css `
 		text-align: center;
 
 		&:hover {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-action-hover));
-			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-hover));
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
+			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
 		}
 
 		&:focus-visible {
@@ -54,8 +58,8 @@ export const styles = css `
 		}
 
 		&:active {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-action-active));
-			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-active));
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
+			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
 		}
 
 		&:disabled {
@@ -70,78 +74,40 @@ export const styles = css `
 		text-decoration: none;
 	}
 
-	:host([color='danger']) {
-		--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-default));
-		--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-default));
-
-		.sds-button:hover {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-hover));
-			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-hover));
-		}
-
-		.sds-button:active {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-active));
-			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-active));
-		}
-	}
-
 	:host([variant='secondary']) {
 		--_sds-button-background-color: var(--sds-button-background-color, transparent);
-		--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-default));
-		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-accent-action-default));
+		--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
+		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
 
 		.sds-button:hover {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-hover));
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));
 		}
 
 		.sds-button:active {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-active));
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-hover)));
 		}
 	}
 
 	:host([variant='tertiary']) {
 		--_sds-button-background-color: var(--sds-button-background-color, transparent);
 		--_sds-button-border-color: var(--sds-button-border-color, transparent);
-		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-accent-action-default));
-
-		.sds-button:hover {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-hover));
-			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-surface-hover));
-		}
-
-		.sds-button:active {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-active));
-			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-surface-active));
-		}
-	}
-
-	:host([variant='secondary']):host([color='danger']) {
-		--_sds-button-background-color: var(--sds-button-background-color, transparent);
-		--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-default));
-		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-alert-danger-action-default));
+		--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);
+		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
 
 		.sds-button:hover {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-hover));
-		}
-
-		.sds-button:active {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-active));
-		}
-	}
+			--_sds-button-background-color: var(--sds-button-background-color, transparent);
+			--_sds-button-border-color: var(--sds-button-border-color, transparent);
+			--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
 
-	:host([variant='tertiary']):host([color='danger']) {
-		--_sds-button-background-color: var(--sds-button-background-color, transparent);
-		--_sds-button-border-color: var(--sds-button-border-color, transparent);
-		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-alert-danger-action-default));
-
-		.sds-button:hover {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-hover));
-			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-surface-hover));
+			text-decoration: var(--_sds-button-tertiary-text-decoration);
+			text-decoration-thickness: var(--_sds-button-tertiary-text-underline-thickness);
+			text-underline-offset: var(--_sds-button-tertiary-text-underline-offset);
 		}
 
 		.sds-button:active {
-			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-active));
-			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-surface-active));
+			--_sds-button-background-color: var(--sds-button-background-color, transparent);
+			--_sds-button-border-color: var(--sds-button-border-color, transparent);
+			--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
 		}
 	}
 
@@ -150,6 +116,10 @@ export const styles = css `
 		--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-md));
 		--_sds-button-padding-block: var(--sds-button-padding-block, var(--sds-spacing-4xs));
 		--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));
+
+		&:host([variant='tertiary']) {
+			--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);
+		}
 	}
 
 	:host([size='small']), /* Deprecated */
@@ -158,6 +128,10 @@ export const styles = css `
 		--_sds-button-padding-block: var(--sds-button-padding-block, 0);
 		--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));
 		font-size: 0.875rem;
+
+		&:host([variant='tertiary']) {
+			--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);
+		}
 	}
 
 	:host([icon]) {

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

@@ -1 +1 @@
-{"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqKxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-action-default));\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-default));\n\t\t--_sds-button-border-width: var(--sds-button-border-width, var(--sds-border-md));\n\t\t--_sds-button-disabled-opacity: var(--sds-button-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-button-focus-color: var(--sds-button-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-button-focus-inner-color: var(--sds-button-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-button-focus-spacing: var(--sds-button-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-button-font-family: var(--sds-button-font, var(--sds-typography-font-family-roboto));\n\t\t--_sds-button-font-size: var(--sds-button-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t--_sds-button-font-weight: var(--sds-button-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-button-gap: var(--sds-button-gap, var(--sds-spacing-3xs));\n\t\t--_sds-button-line-height: var(--sds-button-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-lg));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, 0);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-xs));\n\t\t--_sds-button-radius: var(--sds-button-radius, var(--sds-radius-sm));\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-accent-action-contrast-default));\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-button {\n\t\talign-items: center;\n\t\tbackground-color: var(--_sds-button-background-color);\n\t\tborder-radius: var(--_sds-button-radius);\n\t\tborder: var(--_sds-button-border-width) solid var(--_sds-button-border-color);\n\t\tcolor: var(--_sds-button-text-color);\n\t\tcursor: pointer;\n\t\tdisplay: inline-flex;\n\t\tfont-family: var(--_sds-button-font-family);\n\t\tfont-size: var(--_sds-button-font-size);\n\t\tfont-weight: var(--_sds-button-font-weight);\n\t\tgap: var(--_sds-button-gap);\n\t\tinline-size: 100%;\n\t\tjustify-content: center;\n\t\tline-height: var(--_sds-button-line-height);\n\t\tmin-height: var(--_sds-button-min-height);\n\t\tpadding: var(--_sds-button-padding-block) var(--_sds-button-padding-inline);\n\t\ttext-align: center;\n\n\t\t&:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-action-hover));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-hover));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-button-focus-inner-color);\n\t\t\toutline: 3px solid var(--_sds-button-focus-color);\n\t\t\toutline-offset: 3px;\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-action-active));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-active));\n\t\t}\n\n\t\t&:disabled {\n\t\t\topacity: var(--_sds-button-disabled-opacity);\n\t\t\tcursor: not-allowed;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-button--as-link {\n\t\tinline-size: auto;\n\t\ttext-decoration: none;\n\t}\n\n\t:host([color='danger']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-default));\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-default));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-active));\n\t\t}\n\t}\n\n\t:host([variant='secondary']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-default));\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-accent-action-default));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-hover));\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-active));\n\t\t}\n\t}\n\n\t:host([variant='tertiary']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-accent-action-default));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-hover));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-surface-hover));\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-active));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-surface-active));\n\t\t}\n\t}\n\n\t:host([variant='secondary']):host([color='danger']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-default));\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-alert-danger-action-default));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-hover));\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-active));\n\t\t}\n\t}\n\n\t:host([variant='tertiary']):host([color='danger']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-alert-danger-action-default));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-hover));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-surface-hover));\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-active));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-surface-active));\n\t\t}\n\t}\n\n\t:host([size='medium']), /* Deprecated */\n\t:host([size='md']) {\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-md));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, var(--sds-spacing-4xs));\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));\n\t}\n\n\t:host([size='small']), /* Deprecated */\n\t:host([size='sm']) {\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-sm));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, 0);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));\n\t\tfont-size: 0.875rem;\n\t}\n\n\t:host([icon]) {\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\tmin-width: var(--_sds-button-min-height);\n\t}\n`;\n"]}
+{"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2IxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-button-border-width: var(--sds-button-border-width, var(--sds-border-md));\n\t\t--_sds-button-disabled-opacity: var(--sds-button-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-button-focus-color: var(--sds-button-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-button-focus-inner-color: var(--sds-button-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-button-focus-spacing: var(--sds-button-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-button-font-family: var(--sds-button-font, var(--sds-typography-font-family-roboto));\n\t\t--_sds-button-font-size: var(--sds-button-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t--_sds-button-font-weight: var(--sds-button-font-weight, var(--sds-typography-body-md-strong-desktop-font-weight));\n\t\t--_sds-button-gap: var(--sds-button-gap, var(--sds-spacing-3xs));\n\t\t--_sds-button-line-height: var(--sds-button-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-lg));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, 0);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-xs));\n\t\t--_sds-button-radius: var(--sds-button-radius, var(--sds-radius-sm));\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));\n\n\t\t--_sds-button-tertiary-text-decoration: var(--sds-typography-link-text-decoration, underline);\n\t\t--_sds-button-tertiary-text-underline-offset: var(--sds-typography-link-text-underline-offset, 4px);\n\t\t--_sds-button-tertiary-text-underline-thickness: 2px;\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-button {\n\t\talign-items: center;\n\t\tbackground-color: var(--_sds-button-background-color);\n\t\tborder-radius: var(--_sds-button-radius);\n\t\tborder: var(--_sds-button-border-width) solid var(--_sds-button-border-color);\n\t\tcolor: var(--_sds-button-text-color);\n\t\tcursor: pointer;\n\t\tdisplay: inline-flex;\n\t\tfont-family: var(--_sds-button-font-family);\n\t\tfont-size: var(--_sds-button-font-size);\n\t\tfont-weight: var(--_sds-button-font-weight);\n\t\tgap: var(--_sds-button-gap);\n\t\tinline-size: 100%;\n\t\tjustify-content: center;\n\t\tline-height: var(--_sds-button-line-height);\n\t\tmin-height: var(--_sds-button-min-height);\n\t\tpadding: var(--_sds-button-padding-block) var(--_sds-button-padding-inline);\n\t\ttext-align: center;\n\n\t\t&:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-button-focus-inner-color);\n\t\t\toutline: 3px solid var(--_sds-button-focus-color);\n\t\t\toutline-offset: 3px;\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&:disabled {\n\t\t\topacity: var(--_sds-button-disabled-opacity);\n\t\t\tcursor: not-allowed;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-button--as-link {\n\t\tinline-size: auto;\n\t\ttext-decoration: none;\n\t}\n\n\t:host([variant='secondary']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-hover)));\n\t\t}\n\t}\n\n\t:host([variant='tertiary']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\n\t\t\ttext-decoration: var(--_sds-button-tertiary-text-decoration);\n\t\t\ttext-decoration-thickness: var(--_sds-button-tertiary-text-underline-thickness);\n\t\t\ttext-underline-offset: var(--_sds-button-tertiary-text-underline-offset);\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\t}\n\n\t:host([size='medium']), /* Deprecated */\n\t:host([size='md']) {\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-md));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, var(--sds-spacing-4xs));\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));\n\n\t\t&:host([variant='tertiary']) {\n\t\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\t}\n\t}\n\n\t:host([size='small']), /* Deprecated */\n\t:host([size='sm']) {\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-sm));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, 0);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));\n\t\tfont-size: 0.875rem;\n\n\t\t&:host([variant='tertiary']) {\n\t\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\t}\n\t}\n\n\t:host([icon]) {\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\tmin-width: var(--_sds-button-min-height);\n\t}\n`;\n"]}

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

@@ -1,7 +1,7 @@
 import { css } from 'lit';
 export const styles = css `
 	:host {
-		--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-accent-surface-tinted));
+		--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-tinted));
 		--_sds-card-border-radius: var(--sds-card-border-radius, var(--sds-radius-md));
 		--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-xs));
 		--_sds-card-gap: var(--sds-card-gap, var(--sds-spacing-3xs));
@@ -9,9 +9,9 @@ export const styles = css `
 		--_sds-card-focus-color: var(--sds-card-focus-color, var(--sds-color-states-focus-outer));
 		--_sds-card-focus-inner-color: var(--sds-card-focus-inner-color, var(--sds-color-states-focus-inner));
 		--_sds-card-focus-spacing: var(--sds-card-focus-spacing, var(--sds-color-states-focus-spacing));
-		--_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-accent-action-default));
+		--_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-main-action-default));
 
-		--_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-accent-text-default));
+		--_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-main-text-default));
 		--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-mobile-font-size));
 		--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-mobile-font-weight));
 		--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-mobile-line-height));
@@ -42,11 +42,11 @@ export const styles = css `
 		flex: 1;
 
 		&:hover {
-			--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-accent-surface-hover));
+			--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-hover));
 		}
 
 		&:active {
-			--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-accent-surface-active));
+			--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-active));
 		}
 
 		&:focus-visible {

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

@@ -1 +1 @@
-{"version":3,"file":"sds-card.styles.js","sourceRoot":"","sources":["../../src/sds-card/sds-card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-accent-surface-tinted));\n\t\t--_sds-card-border-radius: var(--sds-card-border-radius, var(--sds-radius-md));\n\t\t--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-xs));\n\t\t--_sds-card-gap: var(--sds-card-gap, var(--sds-spacing-3xs));\n\t\t--_sds-card-font-family: var(--sds-card-font-family, var(--sds-typography-font-family));\n\t\t--_sds-card-focus-color: var(--sds-card-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-card-focus-inner-color: var(--sds-card-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-card-focus-spacing: var(--sds-card-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-accent-action-default));\n\n\t\t--_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-accent-text-default));\n\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-mobile-font-size));\n\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-mobile-font-weight));\n\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-mobile-line-height));\n\n\t\t--_sds-card-text-color: var(--sds-card-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\n\t\tdisplay: flex;\n\t}\n\n\t.sds-card {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t}\n\n\t.sds-card__link {\n\t\tbackground-color: var(--_sds-card-background-color);\n\t\tborder-radius: var(--_sds-card-border-radius);\n\t\tfont-family: var(--_sds-card-font-family);\n\t\tpadding: var(--_sds-card-padding);\n\t\tgap: var(--_sds-card-gap);\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\ttext-decoration: none;\n\t\talign-items: center;\n\t\tflex: 1;\n\n\t\t&:hover {\n\t\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-accent-surface-hover));\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-accent-surface-active));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-card-focus-inner-color);\n\t\t\toutline: var(--_sds-card-focus-spacing) solid var(--_sds-card-focus-color);\n\t\t\toutline-offset: var(--_sds-card-focus-spacing);\n\t\t}\n\t}\n\n\t.sds-card__icon {\n\t\tcolor: var(--_sds-card-icon-color);\n\t\tmargin-inline-start: auto;\n\t}\n\n\t::slotted(p) {\n\t\tcolor: var(--_sds-card-text-color) !important;\n\t\tdisplay: none !important;\n\t\tfont-size: var(--_sds-card-text-font-size) !important;\n\t\tline-height: var(--_sds-card-text-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t\ttext-wrap: pretty !important;\n\t}\n\n\t::slotted(h2),\n\t::slotted(h3),\n\t::slotted(h4),\n\t::slotted(h5),\n\t::slotted(h6) {\n\t\tcolor: var(--_sds-card-heading-color) !important;\n\t\tfont-size: var(--_sds-card-heading-font-size) !important;\n\t\tfont-weight: var(--_sds-card-heading-font-weight) !important;\n\t\tline-height: var(--_sds-card-heading-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t\ttext-wrap: pretty !important;\n\t}\n\n\t@media (min-width: 640px) {\n\t\t:host {\n\t\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-tablet-font-size));\n\t\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-tablet-font-weight));\n\t\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-tablet-line-height));\n\t\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-tablet-font-size));\n\t\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-tablet-font-weight));\n\t\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-tablet-line-height));\n\t\t\t--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-sm));\n\t\t}\n\n\t\t.sds-card__link {\n\t\t\tflex-direction: column;\n\t\t\talign-items: start;\n\t\t}\n\n\t\t.sds-card__icon {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t::slotted(p) {\n\t\t\tdisplay: block !important;\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\t:host {\n\t\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-desktop-font-size));\n\t\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-desktop-font-weight));\n\t\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-desktop-line-height));\n\t\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}
+{"version":3,"file":"sds-card.styles.js","sourceRoot":"","sources":["../../src/sds-card/sds-card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-tinted));\n\t\t--_sds-card-border-radius: var(--sds-card-border-radius, var(--sds-radius-md));\n\t\t--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-xs));\n\t\t--_sds-card-gap: var(--sds-card-gap, var(--sds-spacing-3xs));\n\t\t--_sds-card-font-family: var(--sds-card-font-family, var(--sds-typography-font-family));\n\t\t--_sds-card-focus-color: var(--sds-card-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-card-focus-inner-color: var(--sds-card-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-card-focus-spacing: var(--sds-card-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-main-action-default));\n\n\t\t--_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-main-text-default));\n\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-mobile-font-size));\n\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-mobile-font-weight));\n\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-mobile-line-height));\n\n\t\t--_sds-card-text-color: var(--sds-card-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\n\t\tdisplay: flex;\n\t}\n\n\t.sds-card {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t}\n\n\t.sds-card__link {\n\t\tbackground-color: var(--_sds-card-background-color);\n\t\tborder-radius: var(--_sds-card-border-radius);\n\t\tfont-family: var(--_sds-card-font-family);\n\t\tpadding: var(--_sds-card-padding);\n\t\tgap: var(--_sds-card-gap);\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\ttext-decoration: none;\n\t\talign-items: center;\n\t\tflex: 1;\n\n\t\t&:hover {\n\t\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-hover));\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-active));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-card-focus-inner-color);\n\t\t\toutline: var(--_sds-card-focus-spacing) solid var(--_sds-card-focus-color);\n\t\t\toutline-offset: var(--_sds-card-focus-spacing);\n\t\t}\n\t}\n\n\t.sds-card__icon {\n\t\tcolor: var(--_sds-card-icon-color);\n\t\tmargin-inline-start: auto;\n\t}\n\n\t::slotted(p) {\n\t\tcolor: var(--_sds-card-text-color) !important;\n\t\tdisplay: none !important;\n\t\tfont-size: var(--_sds-card-text-font-size) !important;\n\t\tline-height: var(--_sds-card-text-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t\ttext-wrap: pretty !important;\n\t}\n\n\t::slotted(h2),\n\t::slotted(h3),\n\t::slotted(h4),\n\t::slotted(h5),\n\t::slotted(h6) {\n\t\tcolor: var(--_sds-card-heading-color) !important;\n\t\tfont-size: var(--_sds-card-heading-font-size) !important;\n\t\tfont-weight: var(--_sds-card-heading-font-weight) !important;\n\t\tline-height: var(--_sds-card-heading-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t\ttext-wrap: pretty !important;\n\t}\n\n\t@media (min-width: 640px) {\n\t\t:host {\n\t\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-tablet-font-size));\n\t\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-tablet-font-weight));\n\t\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-tablet-line-height));\n\t\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-tablet-font-size));\n\t\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-tablet-font-weight));\n\t\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-tablet-line-height));\n\t\t\t--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-sm));\n\t\t}\n\n\t\t.sds-card__link {\n\t\t\tflex-direction: column;\n\t\t\talign-items: start;\n\t\t}\n\n\t\t.sds-card__icon {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t::slotted(p) {\n\t\t\tdisplay: block !important;\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\t:host {\n\t\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-desktop-font-size));\n\t\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-desktop-font-weight));\n\t\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-desktop-line-height));\n\t\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"sds-checkbox.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAMhE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,YAAY,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAE3D,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,qBACa,WAAY,SAAQ,UAAU;IAE1C,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAGD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACC,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,QAAQ,UAAS;IAClB,IAAI,EAAE,YAAY,CAAQ;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IACH,QAAQ,EAAE,OAAO,CAAS;IAE1E,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IAUjB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQ/D,iBAAiB;IAUjB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAa5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAU1E,IAAI,IAAI,IAAI,MAAM,CAEjB;IAEQ,MAAM;CAgCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}
+{"version":3,"file":"sds-checkbox.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAMhE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,YAAY,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAE3D,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,qBACa,WAAY,SAAQ,UAAU;IAE1C,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAGD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACC,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,QAAQ,UAAS;IAClB,IAAI,EAAE,YAAY,CAAQ;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IACH,QAAQ,EAAE,OAAO,CAAS;IAE1E,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IAUjB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQ/D,iBAAiB;IAUjB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAa5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAU1E,IAAI,IAAI,IAAI,MAAM,CAEjB;IAEQ,MAAM;CAiCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}

package/dist/sds-checkbox/sds-checkbox.js

@@ -122,6 +122,7 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
 					type="checkbox"
 					name="${ifDefined(this.name)}"
 					value="${ifDefined(this.value)}"
+					.checked="${this.checked}"
 					?checked="${this.checked}"
 					?disabled="${this.disabled}"
 					?required="${this.required}"

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

@@ -1 +1 @@
-{"version":3,"file":"sds-checkbox.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, 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-checkbox.styles';\nimport { SDS_SIZES } from '../types';\n\ntype CheckboxSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSCheckboxProps {\n\tname?: string;\n\tlabel?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\terror?: boolean;\n\trequired?: boolean;\n\treadonly?: boolean;\n\tsize?: CheckboxSize;\n\t'help-text'?: string;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value: string }>) => void;\n\tonFocus?: (event: CustomEvent<{ checked: boolean }>) => void;\n\tonBlur?: (event: CustomEvent<{ checked: boolean }>) => void;\n}\n\n@guardedCustomElement('sds-checkbox')\nexport class SDSCheckbox extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t// Props\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String }) value?: string;\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\t@property({ type: Boolean, reflect: true }) error = false;\n\t@property({ type: Boolean, reflect: true }) required = false;\n\t@property({ type: String, reflect: true }) size: CheckboxSize = 'md';\n\t@property({ type: String, attribute: 'help-text' }) helpText?: string;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked;\n\t\tthis.internals.role = 'checkbox';\n\n\t\tif (this.checked) {\n\t\t\tthis.internals.setFormValue(this.value ?? 'on');\n\t\t}\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tif (this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tthis._validate();\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tif (this.control) {\n\t\t\tthis.control.checked = this._initialChecked;\n\t\t}\n\t\tconst resetValue = this.checked ? this.value ?? 'on' : null;\n\t\tthis.internals.setFormValue(resetValue);\n\t\tthis._validate();\n\t}\n\n\tprivate _validate() {\n\t\tif (this.required && !this.checked) {\n\t\t\tthis.internals.setValidity({ valueMissing: true }, this.control.validationMessage, this.control);\n\t\t} else {\n\t\t\tthis.internals.setValidity({});\n\t\t}\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(elem.checked ? elem.value : null);\n\t\tthis._validate();\n\t\tthis.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleClick = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (event.currentTarget === event.target && !this.disabled && !this.readOnly) {\n\t\t\tthis.shadowRoot?.querySelector('input')?.click();\n\t\t}\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled && !this.readOnly) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tif (changedProperties.has('checked')) {\n\t\t\tthis._validate();\n\t\t}\n\t}\n\n\tget type(): string {\n\t\treturn 'checkbox';\n\t}\n\n\toverride render() {\n\t\tconst checkboxClasses = {\n\t\t\t'sds-checkbox': true,\n\t\t\t'sds-checkbox--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-checkbox__input': true,\n\t\t\t'sds-checkbox__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(checkboxClasses)}\" @click=\"${this._handleClick}\">\n\t\t\t\t<input\n\t\t\t\t\tid=\"control\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t/>\n\t\t\t\t${this.label ? html`<label for=\"control\" class=\"sds-checkbox__label\">${this.label}</label>` : nothing}\n\t\t\t\t${this.helpText ? html`<span class=\"sds-checkbox__help-text\">${this.helpText}</span>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox': SDSCheckbox;\n\t}\n}\n"]}
+{"version":3,"file":"sds-checkbox.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, 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-checkbox.styles';\nimport { SDS_SIZES } from '../types';\n\ntype CheckboxSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSCheckboxProps {\n\tname?: string;\n\tlabel?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\terror?: boolean;\n\trequired?: boolean;\n\treadonly?: boolean;\n\tsize?: CheckboxSize;\n\t'help-text'?: string;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value: string }>) => void;\n\tonFocus?: (event: CustomEvent<{ checked: boolean }>) => void;\n\tonBlur?: (event: CustomEvent<{ checked: boolean }>) => void;\n}\n\n@guardedCustomElement('sds-checkbox')\nexport class SDSCheckbox extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t// Props\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String }) value?: string;\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\t@property({ type: Boolean, reflect: true }) error = false;\n\t@property({ type: Boolean, reflect: true }) required = false;\n\t@property({ type: String, reflect: true }) size: CheckboxSize = 'md';\n\t@property({ type: String, attribute: 'help-text' }) helpText?: string;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked;\n\t\tthis.internals.role = 'checkbox';\n\n\t\tif (this.checked) {\n\t\t\tthis.internals.setFormValue(this.value ?? 'on');\n\t\t}\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tif (this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tthis._validate();\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tif (this.control) {\n\t\t\tthis.control.checked = this._initialChecked;\n\t\t}\n\t\tconst resetValue = this.checked ? this.value ?? 'on' : null;\n\t\tthis.internals.setFormValue(resetValue);\n\t\tthis._validate();\n\t}\n\n\tprivate _validate() {\n\t\tif (this.required && !this.checked) {\n\t\t\tthis.internals.setValidity({ valueMissing: true }, this.control.validationMessage, this.control);\n\t\t} else {\n\t\t\tthis.internals.setValidity({});\n\t\t}\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(elem.checked ? elem.value : null);\n\t\tthis._validate();\n\t\tthis.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleClick = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (event.currentTarget === event.target && !this.disabled && !this.readOnly) {\n\t\t\tthis.shadowRoot?.querySelector('input')?.click();\n\t\t}\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled && !this.readOnly) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tif (changedProperties.has('checked')) {\n\t\t\tthis._validate();\n\t\t}\n\t}\n\n\tget type(): string {\n\t\treturn 'checkbox';\n\t}\n\n\toverride render() {\n\t\tconst checkboxClasses = {\n\t\t\t'sds-checkbox': true,\n\t\t\t'sds-checkbox--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-checkbox__input': true,\n\t\t\t'sds-checkbox__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(checkboxClasses)}\" @click=\"${this._handleClick}\">\n\t\t\t\t<input\n\t\t\t\t\tid=\"control\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t.checked=\"${this.checked}\"\n\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t/>\n\t\t\t\t${this.label ? html`<label for=\"control\" class=\"sds-checkbox__label\">${this.label}</label>` : nothing}\n\t\t\t\t${this.helpText ? html`<span class=\"sds-checkbox__help-text\">${this.helpText}</span>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox': SDSCheckbox;\n\t}\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"sds-checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgNlB,CAAC"}
+{"version":3,"file":"sds-checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyNlB,CAAC"}

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

@@ -1,23 +1,23 @@
 import { css } from 'lit';
 export const styles = css `
 	:host {
-		--_sds-checkbox-block-gap: var(--sds-checkbox-label-gap, var(--sds-spacing-4xs));
-		--_sds-checkbox-inline-gap: var(--sds-checkbox-label-gap, var(--sds-spacing-3xs));
+		--_sds-checkbox-block-gap: var(--sds-checkbox-block-gap, var(--sds-spacing-4xs));
+		--_sds-checkbox-inline-gap: var(--sds-checkbox-inline-gap, var(--sds-spacing-3xs));
 		--_sds-checkbox-font-family: var(--sds-checkbox-font-family, var(--sds-typography-font-family-roboto));
 
-		--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-md));
+		--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-md));
 		--_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));
-		--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-squeezed-md));
+		--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-md));
 		--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-neutral-text-default));
 
-		--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, --sds-color-neutral-surface-default);
+		--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-default));
 		--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-default));
 		--_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));
 		--_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));
 		--_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);
-		--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-radio-check-md));
+		--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-icon-md));
 		--_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);
-		--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-accent-action-contrast-default));
+		--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-main-action-contrast-default));
 
 		--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-neutral-text-subtle));
 		--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-md));
@@ -35,6 +35,7 @@ export const styles = css `
 	}
 
 	.sds-checkbox {
+		align-items: start;
 		display: grid;
 		font-family: var(--_sds-checkbox-font-family);
 		gap: var(--_sds-checkbox-block-gap) var(--_sds-checkbox-inline-gap);
@@ -55,15 +56,19 @@ export const styles = css `
 		}
 	}
 
+	.sds-checkbox--error {
+		--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-alert-danger-text-default));
+	}
+
 	.sds-checkbox__label {
 		grid-column: content;
-		align-items: flex-start;
+		align-self: center;
 		cursor: pointer;
 		color: var(--_sds-checkbox-label-text-color);
 		display: inline-flex;
 		font-size: var(--_sds-checkbox-label-font-size);
 		font-weight: var(--_sds-checkbox-label-font-weight);
-		gap: var(--_sds-checkbox-label-gap);
+		gap: var(--_sds-checkbox-inline-gap);
 		line-height: var(--_sds-checkbox-label-line-height);
 	}
 
@@ -95,8 +100,8 @@ export const styles = css `
 		}
 
 		&[checked] {
-			--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-accent-action-default));
-			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-default));
+			--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-default));
+			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-default));
 
 			&::after {
 				content: '';
@@ -106,7 +111,7 @@ export const styles = css `
 				background-color: var(--_sds-checkbox-input-icon-color);
 				transform-origin: bottom left;
 				clip-path: path(
-					'M13.1678 4.91802C13.5583 4.52749 14.1913 4.52749 14.5819 4.91802C14.9724 5.30854 14.9724 5.94156 14.5819 6.33208L8.20686 12.7071C8.01933 12.8946 7.76501 13 7.49983 13C7.23464 13 6.98032 12.8946 6.79279 12.7071L3.41779 9.33208C3.0273 8.94158 3.02735 8.30855 3.41779 7.91802C3.78391 7.5519 4.36291 7.52931 4.75569 7.84966L4.83186 7.91802L7.49983 10.586L13.1678 4.91802Z'
+					'M17.7929 6.79302C18.1834 6.40249 18.8164 6.40249 19.2069 6.79302C19.5974 7.18354 19.5974 7.81656 19.2069 8.20708L10.7069 16.7071C10.5194 16.8946 10.2651 17 9.99989 17C9.7347 17 9.48038 16.8946 9.29286 16.7071L4.79286 12.2071C4.40236 11.8166 4.40241 11.1835 4.79286 10.793C5.18338 10.4025 5.81639 10.4025 6.20692 10.793L9.99989 14.586L17.7929 6.79302Z'
 				);
 				transform: translate(-2px, -2px);
 			}
@@ -121,21 +126,21 @@ export const styles = css `
 		}
 
 		&:hover {
-			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-hover));
+			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-hover));
 		}
 
 		&:active:not([readonly]) {
-			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-active));
+			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active));
 		}
 
 		&[checked]:hover {
-			--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-accent-action-hover));
-			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-hover));
+			--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-hover));
+			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-hover));
 		}
 
 		&[checked]:active:not([readonly]) {
-			--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-accent-action-active));
-			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-active));
+			--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-active));
+			--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active));
 		}
 
 		&:focus-visible {
@@ -181,12 +186,14 @@ export const styles = css `
 	}
 
 	:host([size='sm']) {
-		--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-sm));
-		--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-squeezed-sm));
-		--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-radio-check-sm));
+		--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-sm));
+		--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-sm));
+		--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-sm));
 
 		.sds-checkbox__input:checked::after {
-			transform: translate(-3px, -3px);
+			clip-path: path(
+				'M13.168 4.91815C13.5585 4.52763 14.1915 4.52763 14.582 4.91815C14.9724 5.30869 14.9725 5.94173 14.582 6.33221L8.20703 12.7072C8.01952 12.8947 7.76516 13.0002 7.5 13.0002C7.23484 13.0002 6.98049 12.8947 6.79297 12.7072L3.41797 9.33221C3.02746 8.94171 3.0275 8.30868 3.41797 7.91815C3.80849 7.52763 4.44151 7.52763 4.83203 7.91815L7.5 10.5861L13.168 4.91815Z'
+			);
 		}
 
 		.sds-checkbox__label {
@@ -195,12 +202,14 @@ export const styles = css `
 	}
 
 	:host([size='lg']) {
-		--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-lg));
-		--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-squeezed-lg));
-		--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-radio-check-lg));
+		--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-lg));
+		--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-lg));
+		--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-lg));
 
 		.sds-checkbox__input:checked::after {
-			transform: translate(-1px, -1px);
+			clip-path: path(
+				'M23.9592 9.29327C24.3497 8.9028 24.9828 8.90291 25.3733 9.29327C25.7637 9.68381 25.7638 10.3169 25.3733 10.7073L14.0403 22.0403C13.6498 22.4306 13.0167 22.4307 12.6262 22.0403L6.62622 16.0403C6.23592 15.6499 6.23593 15.0168 6.62622 14.6263C7.0167 14.236 7.6498 14.236 8.04028 14.6263L13.3333 19.9193L23.9592 9.29327Z'
+			);
 		}
 
 		.sds-checkbox__label {