@politiet/sheriff-web-components 2.6.0 → 2.6.1

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';\nimport { SDSDelegateInteractionMixin, SDSEventDispatcherMixin } from '../mixins';\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\tparentRequestDisabled?: boolean;\n}\n\n@guardedCustomElement('sds-checkbox')\nexport class SDSCheckbox extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(LitElement)) {\n\t// Styling\n\tstatic override styles = [styles];\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\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\n\t/**\n\t * disabled:\n\t * - If set directly (prop/attr), this checkbox becomes \"self-controlled\"\n\t *   and ignores parentRequestDisabled.\n\t * - If not self-controlled, this follows parentRequestDisabled (group/form).\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tget disabled(): SDSCheckboxProps['disabled'] {\n\t\treturn this._disabled;\n\t}\n\tset disabled(value: SDSCheckboxProps['disabled']) {\n\t\tconst newVal = value ?? false;\n\t\tconst oldVal = this._disabled;\n\n\t\tif (oldVal === newVal) return;\n\n\t\tthis._disabled = newVal;\n\t\tthis.requestUpdate('disabled', oldVal);\n\n\t\tif (!this._settingDisabledFromParent) {\n\t\t\tthis._disabledIsAuthorControlled = newVal;\n\t\t}\n\t}\n\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/**\n\t * parentRequestDisabled:\n\t * - Set by SDSCheckboxGroup to request disabled/enabled.\n\t * - Only applied if SDSCheckbox is NOT self-controlled.\n\t */\n\t@property({ type: Boolean, attribute: false })\n\tget parentRequestDisabled(): SDSCheckboxProps['parentRequestDisabled'] {\n\t\treturn this._parentRequestDisabled;\n\t}\n\tset parentRequestDisabled(value: SDSCheckboxProps['parentRequestDisabled']) {\n\t\tconst newVal = value ?? false;\n\t\tconst oldVal = this._parentRequestDisabled;\n\n\t\tif (oldVal === newVal) return;\n\n\t\tthis._parentRequestDisabled = newVal;\n\t\tthis.requestUpdate('parentRequestDisabled', oldVal);\n\n\t\tif (this._disabledIsAuthorControlled) return;\n\n\t\tthis._settingDisabledFromParent = true;\n\t\tthis.disabled = newVal;\n\t\tthis._settingDisabledFromParent = false;\n\t}\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _disabled: SDSCheckboxProps['disabled'] = false;\n\tprivate _disabledIsAuthorControlled = false;\n\tprivate _settingDisabledFromParent = false;\n\tprivate _parentRequestDisabled: SDSCheckboxProps['parentRequestDisabled'] = false;\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\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.dispatchSheriffEvent('change');\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchSheriffEvent('focus');\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchSheriffEvent('blur');\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\n\t\tif (!this._disabledIsAuthorControlled && this.disabled !== this._parentRequestDisabled) {\n\t\t\tthis._settingDisabledFromParent = true;\n\t\t\tthis.disabled = this._parentRequestDisabled ?? false;\n\t\t\tthis._settingDisabledFromParent = false;\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)}\">\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"]}
+{"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';\nimport { SDSDelegateInteractionMixin, SDSEventDispatcherMixin, SDSFormControlMixin } from '../mixins';\nimport type { SDSFormControlProps } from '../mixins/sds-form-control-mixin';\n\ntype CheckboxSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSCheckboxProps extends SDSFormControlProps {\n\tlabel?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\terror?: boolean;\n\trequired?: boolean;\n\tsize?: CheckboxSize;\n\t'help-text'?: string;\n\tparentRequestDisabled?: boolean;\n}\n\n@guardedCustomElement('sds-checkbox')\nexport class SDSCheckbox extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSFormControlMixin(LitElement))) {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Props\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 }) 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\n\n\t/**\n\t * disabled:\n\t * - If set directly (prop/attr), this checkbox becomes \"self-controlled\"\n\t *   and ignores parentRequestDisabled.\n\t * - If not self-controlled, this follows parentRequestDisabled (group/form).\n\t*/\n\t@property({ type: Boolean })\n\toverride get disabled(): SDSCheckboxProps['disabled'] {\n\t\treturn this._disabled;\n\t}\n\toverride set disabled(value: SDSCheckboxProps['disabled']) {\n\t\tconst newVal = value ?? false;\n\t\tconst oldVal = this._disabled;\n\n\t\tif (oldVal === newVal) return;\n\n\t\tthis._disabled = newVal;\n\t\tthis.requestUpdate('disabled', oldVal);\n\n\t\tif (!this._settingDisabledFromParent) {\n\t\t\tthis._disabledIsAuthorControlled = newVal;\n\t\t}\n\t}\n\n\t/**\n\t * parentRequestDisabled:\n\t * - Set by SDSCheckboxGroup to request disabled/enabled.\n\t * - Only applied if SDSCheckbox is NOT self-controlled.\n\t */\n\t@property({ type: Boolean, attribute: false })\n\tget parentRequestDisabled(): SDSCheckboxProps['parentRequestDisabled'] {\n\t\treturn this._parentRequestDisabled;\n\t}\n\tset parentRequestDisabled(value: SDSCheckboxProps['parentRequestDisabled']) {\n\t\tconst newVal = value ?? false;\n\t\tconst oldVal = this._parentRequestDisabled;\n\n\t\tif (oldVal === newVal) return;\n\n\t\tthis._parentRequestDisabled = newVal;\n\t\tthis.requestUpdate('parentRequestDisabled', oldVal);\n\n\t\tif (this._disabledIsAuthorControlled) return;\n\n\t\tthis._settingDisabledFromParent = true;\n\t\tthis.disabled = newVal;\n\t\tthis._settingDisabledFromParent = false;\n\t}\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _disabled: boolean = false;\n\tprivate _disabledIsAuthorControlled = false;\n\tprivate _settingDisabledFromParent = false;\n\tprivate _parentRequestDisabled: SDSCheckboxProps['parentRequestDisabled'] = false;\n\tprivate _initialChecked: boolean = false;\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.dispatchSheriffEvent('change');\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchSheriffEvent('focus');\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchSheriffEvent('blur');\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\n\t\tif (!this._disabledIsAuthorControlled && this.disabled !== this._parentRequestDisabled) {\n\t\t\tthis._settingDisabledFromParent = true;\n\t\t\tthis.disabled = this._parentRequestDisabled ?? false;\n\t\t\tthis._settingDisabledFromParent = false;\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)}\">\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,yBA8NlB,CAAC"}
+{"version":3,"file":"sds-checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA+NlB,CAAC"}

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

@@ -80,6 +80,7 @@ export const styles = css `
 	.sds-checkbox__input {
 		grid-column: var(--_sds-checkbox-input-grid-area);
 		grid-row: 1;
+		position: relative;
 		appearance: none;
 		background-color: var(--_sds-checkbox-input-background-color);
 		cursor: pointer;

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

@@ -1 +1 @@
-{"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-block-gap: var(--sds-checkbox-block-gap, var(--sds-spacing-4xs));\n\t\t--_sds-checkbox-inline-gap: var(--sds-checkbox-inline-gap, var(--sds-spacing-3xs));\n\t\t--_sds-checkbox-font-family: var(--sds-checkbox-font-family, var(--sds-typography-font-family-roboto));\n\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));\n\t\t--_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));\n\t\t--_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-icon-md));\n\t\t--_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);\n\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-main-action-contrast-default));\n\n\t\t--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-checkbox-help-text-font-weight: var(--sds-checkbox-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-help-text-line-height: var(--sds-checkbox-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-checkbox-focus-color-outer: var(--sds-checkbox-focus-color-outer, var(--sds-color-states-focus-outer));\n\t\t--_sds-checkbox-focus-color-inner: var(--sds-checkbox-focus-color-inner, var(--sds-color-states-focus-inner));\n\t\t--_sds-checkbox-focus-spacing: var(--sds-checkbox-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-checkbox-focus-radius: var(--sds-checkbox-focus-radius, var(--sds-radius-xs));\n\n\t\t--_sds-checkbox-disabled-opacity: var(--sds-checkbox-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-checkbox-grid-template-areas: var(--sds-checkbox-grid-template-area, 'input content');\n\t\t--_sds-checkbox-label-grid-area: var(--sds-checkbox-label-grid-area, content);\n\t\t--_sds-checkbox-input-grid-area: var(--sds-checkbox-input-grid-area, input);\n\t\t--_sds-checkbox-help-text-grid-area: var(--sds-checkbox-help-text-grid-area, content);\n\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-checkbox {\n\t\talign-items: start;\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-checkbox-font-family);\n\t\tgap: var(--_sds-checkbox-block-gap) var(--_sds-checkbox-inline-gap);\n\t\tgrid-template-areas: var(--_sds-checkbox-grid-template-areas);\n\t\tgrid-template-columns: auto 1fr;\n\t\twidth: fit-content;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t\topacity: var(--_sds-checkbox-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\toutline: var(--_sds-checkbox-focus-spacing) solid var(--_sds-checkbox-focus-color-outer);\n\t\t\toutline-offset: calc(var(--_sds-checkbox-focus-spacing) * 2);\n\t\t\tborder-radius: var(--_sds-checkbox-focus-radius);\n\t\t}\n\t}\n\n\t.sds-checkbox--error {\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-alert-danger-text-default));\n\t}\n\n\t.sds-checkbox__label {\n\t\tgrid-column: var(--_sds-checkbox-label-grid-area);\n\t\talign-self: center;\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-checkbox-label-text-color);\n\t\tdisplay: inline-flex;\n\t\tfont-size: var(--_sds-checkbox-label-font-size);\n\t\tfont-weight: var(--_sds-checkbox-label-font-weight);\n\t\tgap: var(--_sds-checkbox-inline-gap);\n\t\tline-height: var(--_sds-checkbox-label-line-height);\n\t}\n\n\t.sds-checkbox__input {\n\t\tgrid-column: var(--_sds-checkbox-input-grid-area);\n\t\tgrid-row: 1;\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-checkbox-input-background-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-checkbox-input-size);\n\t\theight: var(--_sds-checkbox-input-size);\n\t\taspect-ratio: var(--_sds-checkbox-input-aspect-ratio);\n\t\tborder-width: var(--_sds-checkbox-input-border-width);\n\t\tborder-style: var(--_sds-checkbox-input-border-style);\n\t\tborder-color: var(--_sds-checkbox-input-border-color);\n\t\tborder-radius: var(--_sds-checkbox-input-border-radius);\n\t\tmargin: 0;\n\n\t\t&[readonly] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\n\t\t\t& + .sds-checkbox__label {\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&[checked] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: var(--_sds-checkbox-input-size);\n\t\t\t\theight: var(--_sds-checkbox-input-size);\n\t\t\t\tbackground-color: var(--_sds-checkbox-input-icon-color);\n\t\t\t\ttransform-origin: bottom left;\n\t\t\t\tclip-path: path(\n\t\t\t\t\t'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'\n\t\t\t\t);\n\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t}\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-dot-color, var(--sds-color-action-default, var(--sds-color-neutral-action-default)));\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&[checked]:hover {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&[checked]:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&.sds-checkbox__input--error {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&:active:not([readonly]) {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\n\t\t\t&[checked]:hover {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&[checked]:active {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-checkbox__help-text {\n\t\tgrid-column: var(--_sds-checkbox-help-text-grid-area);\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-checkbox-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-help-text-line-height);\n\t\tmax-width: var(--_sds-checkbox-max-line-width);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-sm));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'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'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-lg));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'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'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: -1px;\n\t\t}\n\t}\n`;\n"]}
+{"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-block-gap: var(--sds-checkbox-block-gap, var(--sds-spacing-4xs));\n\t\t--_sds-checkbox-inline-gap: var(--sds-checkbox-inline-gap, var(--sds-spacing-3xs));\n\t\t--_sds-checkbox-font-family: var(--sds-checkbox-font-family, var(--sds-typography-font-family-roboto));\n\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));\n\t\t--_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));\n\t\t--_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-icon-md));\n\t\t--_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);\n\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-main-action-contrast-default));\n\n\t\t--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-checkbox-help-text-font-weight: var(--sds-checkbox-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-help-text-line-height: var(--sds-checkbox-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-checkbox-focus-color-outer: var(--sds-checkbox-focus-color-outer, var(--sds-color-states-focus-outer));\n\t\t--_sds-checkbox-focus-color-inner: var(--sds-checkbox-focus-color-inner, var(--sds-color-states-focus-inner));\n\t\t--_sds-checkbox-focus-spacing: var(--sds-checkbox-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-checkbox-focus-radius: var(--sds-checkbox-focus-radius, var(--sds-radius-xs));\n\n\t\t--_sds-checkbox-disabled-opacity: var(--sds-checkbox-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-checkbox-grid-template-areas: var(--sds-checkbox-grid-template-area, 'input content');\n\t\t--_sds-checkbox-label-grid-area: var(--sds-checkbox-label-grid-area, content);\n\t\t--_sds-checkbox-input-grid-area: var(--sds-checkbox-input-grid-area, input);\n\t\t--_sds-checkbox-help-text-grid-area: var(--sds-checkbox-help-text-grid-area, content);\n\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-checkbox {\n\t\talign-items: start;\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-checkbox-font-family);\n\t\tgap: var(--_sds-checkbox-block-gap) var(--_sds-checkbox-inline-gap);\n\t\tgrid-template-areas: var(--_sds-checkbox-grid-template-areas);\n\t\tgrid-template-columns: auto 1fr;\n\t\twidth: fit-content;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t\topacity: var(--_sds-checkbox-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\toutline: var(--_sds-checkbox-focus-spacing) solid var(--_sds-checkbox-focus-color-outer);\n\t\t\toutline-offset: calc(var(--_sds-checkbox-focus-spacing) * 2);\n\t\t\tborder-radius: var(--_sds-checkbox-focus-radius);\n\t\t}\n\t}\n\n\t.sds-checkbox--error {\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-alert-danger-text-default));\n\t}\n\n\t.sds-checkbox__label {\n\t\tgrid-column: var(--_sds-checkbox-label-grid-area);\n\t\talign-self: center;\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-checkbox-label-text-color);\n\t\tdisplay: inline-flex;\n\t\tfont-size: var(--_sds-checkbox-label-font-size);\n\t\tfont-weight: var(--_sds-checkbox-label-font-weight);\n\t\tgap: var(--_sds-checkbox-inline-gap);\n\t\tline-height: var(--_sds-checkbox-label-line-height);\n\t}\n\n\t.sds-checkbox__input {\n\t\tgrid-column: var(--_sds-checkbox-input-grid-area);\n\t\tgrid-row: 1;\n\t\tposition: relative;\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-checkbox-input-background-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-checkbox-input-size);\n\t\theight: var(--_sds-checkbox-input-size);\n\t\taspect-ratio: var(--_sds-checkbox-input-aspect-ratio);\n\t\tborder-width: var(--_sds-checkbox-input-border-width);\n\t\tborder-style: var(--_sds-checkbox-input-border-style);\n\t\tborder-color: var(--_sds-checkbox-input-border-color);\n\t\tborder-radius: var(--_sds-checkbox-input-border-radius);\n\t\tmargin: 0;\n\n\t\t&[readonly] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\n\t\t\t& + .sds-checkbox__label {\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&[checked] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: var(--_sds-checkbox-input-size);\n\t\t\t\theight: var(--_sds-checkbox-input-size);\n\t\t\t\tbackground-color: var(--_sds-checkbox-input-icon-color);\n\t\t\t\ttransform-origin: bottom left;\n\t\t\t\tclip-path: path(\n\t\t\t\t\t'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'\n\t\t\t\t);\n\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t}\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-dot-color, var(--sds-color-action-default, var(--sds-color-neutral-action-default)));\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&[checked]:hover {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&[checked]:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&.sds-checkbox__input--error {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&:active:not([readonly]) {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\n\t\t\t&[checked]:hover {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&[checked]:active {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-checkbox__help-text {\n\t\tgrid-column: var(--_sds-checkbox-help-text-grid-area);\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-checkbox-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-help-text-line-height);\n\t\tmax-width: var(--_sds-checkbox-max-line-width);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-sm));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'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'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-lg));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'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'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: -1px;\n\t\t}\n\t}\n`;\n"]}

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

@@ -1,37 +1,29 @@
 import { LitElement } from 'lit';
 import { SDS_SIZES } from '../types';
+import type { SDSFormControlProps } from '../mixins/sds-form-control-mixin';
 import '../sds-icon/sds-icon';
 type ChipVariant = 'selectable' | 'removable';
 type ChipSize = 'large' | 'medium' | 'small' | Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;
-export interface SDSChipProps {
-    variant?: ChipVariant;
-    size?: ChipSize;
+export interface SDSChipProps extends SDSFormControlProps {
     checked?: boolean;
-    name?: string;
+    size?: ChipSize;
     value?: string;
-    disabled?: boolean;
-    readonly?: boolean;
+    variant?: ChipVariant;
 }
-declare const SDSChip_base: import("../mixins/types").Constructable<import("../mixins/sds-delegate-interaction-mixin").DelegateInteractionMixinInterface> & import("../mixins/types").Constructable<import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface> & typeof LitElement;
+declare const SDSChip_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 SDSChip extends SDSChip_base {
     static styles: import("lit").CSSResult[];
-    static formAssociated: boolean;
-    readonly internals: ElementInternals;
-    static shadowRootOptions: ShadowRootInit;
     private _initialChecked;
     private _readOnly;
     control: HTMLInputElement;
     variant: SDSChipProps['variant'];
     size: SDSChipProps['size'];
     checked: SDSChipProps['checked'];
-    name?: SDSChipProps['name'];
     value?: SDSChipProps['value'];
-    disabled: SDSChipProps['disabled'];
     get readOnly(): boolean;
-    set readOnly(value: SDSChipProps['readonly']);
+    set readOnly(value: SDSChipProps['readOnly']);
     /** @deprecated Use readOnly instead */
-    set readonly(value: SDSChipProps['readonly']);
-    constructor();
+    set readonly(value: SDSChipProps['readOnly']);
     connectedCallback(): void;
     formResetCallback(): void;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"sds-chip.d.ts","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAGrC,OAAO,sBAAsB,CAAC;AAE9B,KAAK,WAAW,GAAG,YAAY,GAAG,WAAW,CAAC;AAC9C,KAAK,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAEtF,MAAM,WAAW,YAAY;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;;AAED,qBACa,OAAQ,SAAQ,YAAgE;IAE5F,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAE5C,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,SAAS,CAAkB;IAEhB,OAAO,EAAG,gBAAgB,CAAC;IAGH,OAAO,EAAE,YAAY,CAAC,SAAS,CAAC,CAAgB;IAChD,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAQ;IACjC,OAAO,EAAE,YAAY,CAAC,SAAS,CAAC,CAAS;IAC1C,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACd,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAS;IACvF,IAEI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,EAI3C;IAED,uCAAuC;IACvC,IAAI,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,EAE3C;;IAOQ,iBAAiB;IAS1B,iBAAiB;IAKR,MAAM;IAgCf,OAAO,CAAC,QAAQ,CAAC,OAAO,CAQtB;IAEF,OAAO,CAAC,QAAQ,CAAC,OAAO,CAGtB;IAEF,OAAO,CAAC,QAAQ,CAAC,SAAS,CAUxB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
+{"version":3,"file":"sds-chip.d.ts","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAE5E,OAAO,sBAAsB,CAAC;AAE9B,KAAK,WAAW,GAAG,YAAY,GAAG,WAAW,CAAC;AAC9C,KAAK,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAEtF,MAAM,WAAW,YAAa,SAAQ,mBAAmB;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,WAAW,CAAC;CACtB;;AAED,qBACa,OAAQ,SAAQ,YAAqF;IAEjH,OAAgB,MAAM,4BAAY;IAElC,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,SAAS,CAAkB;IAEhB,OAAO,EAAG,gBAAgB,CAAC;IAGH,OAAO,EAAE,YAAY,CAAC,SAAS,CAAC,CAAgB;IAChD,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAQ;IACjC,OAAO,EAAE,YAAY,CAAC,SAAS,CAAC,CAAS;IACzD,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAE1D,IACa,QAAQ,IAAI,OAAO,CAE/B;IACD,IAAa,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,EAIpD;IAED,uCAAuC;IACvC,IAAI,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,EAE3C;IAEQ,iBAAiB;IAS1B,iBAAiB;IAKR,MAAM;IAgCf,OAAO,CAAC,QAAQ,CAAC,OAAO,CAQtB;IAEF,OAAO,CAAC,QAAQ,CAAC,OAAO,CAGtB;IAEF,OAAO,CAAC,QAAQ,CAAC,SAAS,CAUxB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}

package/dist/sds-chip/sds-chip.js

@@ -10,30 +10,17 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { guardedCustomElement } from '../utils/guarded-custom-element';
 import { styles } from './sds-chip.styles';
-import { SDSDelegateInteractionMixin, SDSEventDispatcherMixin } from '../mixins';
+import { SDSDelegateInteractionMixin, SDSEventDispatcherMixin, SDSFormControlMixin } from '../mixins';
 import '../sds-icon/sds-icon';
-let SDSChip = class SDSChip extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(LitElement)) {
-    get readOnly() {
-        return this._readOnly;
-    }
-    set readOnly(value) {
-        const oldVal = this._readOnly;
-        this._readOnly = value ?? false;
-        this.requestUpdate('readOnly', oldVal);
-    }
-    /** @deprecated Use readOnly instead */
-    set readonly(value) {
-        this.readOnly = value;
-    }
+let SDSChip = class SDSChip extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSFormControlMixin(LitElement))) {
     constructor() {
-        super();
+        super(...arguments);
         this._initialChecked = false;
         this._readOnly = false;
         // Reactive Props
         this.variant = 'selectable';
         this.size = 'md';
         this.checked = false;
-        this.disabled = false;
         this._toggle = (event) => {
             event.preventDefault();
             event.stopImmediatePropagation();
@@ -59,7 +46,19 @@ let SDSChip = class SDSChip extends SDSDelegateInteractionMixin(SDSEventDispatch
                 this._toggle(event);
             }
         };
-        this.internals = this.attachInternals();
+    }
+    // TODO: Revert til normal prop and remove readonly fallback handling in next major version of web components package.
+    get readOnly() {
+        return this._readOnly;
+    }
+    set readOnly(value) {
+        const oldVal = this._readOnly;
+        this._readOnly = value ?? false;
+        this.requestUpdate('readOnly', oldVal);
+    }
+    /** @deprecated Use readOnly instead */
+    set readonly(value) {
+        this.readOnly = value;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -104,11 +103,6 @@ let SDSChip = class SDSChip extends SDSDelegateInteractionMixin(SDSEventDispatch
 };
 // Styling
 SDSChip.styles = [styles];
-SDSChip.formAssociated = true;
-SDSChip.shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-};
 __decorate([
     query('#control')
 ], SDSChip.prototype, "control", void 0);
@@ -121,18 +115,11 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SDSChip.prototype, "checked", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], SDSChip.prototype, "name", void 0);
 __decorate([
     property({ type: String })
 ], SDSChip.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SDSChip.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'readonly', reflect: true })
-    // TODO: Revert til normal prop and remove readonly fallback handling in next major version of web components package.
 ], SDSChip.prototype, "readOnly", null);
 SDSChip = __decorate([
     guardedCustomElement('sds-chip')

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

@@ -1 +1 @@
-{"version":3,"file":"sds-chip.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-chip.styles';\nimport { SDS_SIZES } from '../types';\nimport { SDSDelegateInteractionMixin, SDSEventDispatcherMixin } from '../mixins';\n\nimport '../sds-icon/sds-icon';\n\ntype ChipVariant = 'selectable' | 'removable';\ntype ChipSize = 'large' | 'medium' | 'small' | Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSChipProps {\n\tvariant?: ChipVariant;\n\tsize?: ChipSize;\n\tchecked?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tdisabled?: boolean;\n\treadonly?: boolean;\n}\n\n@guardedCustomElement('sds-chip')\nexport class SDSChip extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(LitElement)) {\n\t// Styling\n\tstatic override styles = [styles];\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\n\tprivate _initialChecked: boolean = false;\n\tprivate _readOnly: boolean = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) variant: SDSChipProps['variant'] = 'selectable';\n\t@property({ type: String, reflect: true }) size: SDSChipProps['size'] = 'md';\n\t@property({ type: Boolean, reflect: true }) checked: SDSChipProps['checked'] = false;\n\t@property({ type: String, reflect: true }) name?: SDSChipProps['name'];\n\t@property({ type: String }) value?: SDSChipProps['value'];\n\t@property({ type: Boolean, reflect: true }) disabled: SDSChipProps['disabled'] = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true })\n\t// TODO: Revert til normal prop and remove readonly fallback handling in next major version of web components package.\n\tget readOnly(): boolean {\n\t\treturn this._readOnly;\n\t}\n\tset readOnly(value: SDSChipProps['readonly']) {\n\t\tconst oldVal = this._readOnly;\n\t\tthis._readOnly = value ?? false;\n\t\tthis.requestUpdate('readOnly', oldVal);\n\t}\n\n\t/** @deprecated Use readOnly instead */\n\tset readonly(value: SDSChipProps['readonly']) {\n\t\tthis.readOnly = value;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked ?? false;\n\t\tthis.internals.role = 'checkbox';\n\t\tif (this.checked) {\n\t\t\tthis.internals.setFormValue(this.value ?? null);\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.internals.setFormValue(this.value ?? null);\n\t}\n\n\toverride render() {\n\t\tconst isRemovableVariant = this.variant === 'removable' && !this.readOnly && !this.disabled;\n\n\t\tconst chipClasses = {\n\t\t\t'sds-chip': true,\n\t\t\t'sds-chip--small': this.size === 'small' || this.size === 'sm',\n\t\t\t'sds-chip--large': this.size === 'large' || this.size === 'lg',\n\t\t\t'sds-chip--removable': isRemovableVariant,\n\t\t};\n\n\t\tif (isRemovableVariant) {\n\t\t\treturn html`<button class=\"${classMap(chipClasses)}\" @click=${this._remove} @keyup=\"${this._keypress}\">\n\t\t\t\t<slot></slot>\n\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"s\"></sds-icon>\n\t\t\t</button>`;\n\t\t}\n\n\t\treturn html`<label class=\"${classMap(chipClasses)}\" @click=\"${this._toggle}\" @keyup=\"${this._keypress}\">\n\t\t\t<input\n\t\t\t\tid=\"control\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t.checked=\"${this.checked}\"\n\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t/>\n\t\t\t<slot></slot>\n\t\t</label>`;\n\t}\n\n\tprivate readonly _toggle = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (this.disabled || this.readOnly) return;\n\t\tthis.checked = !this.checked;\n\t\tthis.internals.setFormValue(this.checked ? this.value ?? 'on' : null);\n\t\tthis.dispatchSheriffEvent('change');\n\t};\n\n\tprivate readonly _remove = () => {\n\t\tif (this.disabled || this.readOnly) return;\n\t\tthis.dispatchSheriffEvent('sds-remove');\n\t};\n\n\tprivate readonly _keypress = (event: KeyboardEvent) => {\n\t\tif (![' ', 'Enter'].includes(event.key)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.variant === 'removable') {\n\t\t\tthis._remove();\n\t\t} else {\n\t\t\tthis._toggle(event);\n\t\t}\n\t};\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-chip': SDSChip;\n\t}\n}\n"]}
+{"version":3,"file":"sds-chip.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-chip.styles';\nimport { SDS_SIZES } from '../types';\nimport { SDSDelegateInteractionMixin, SDSEventDispatcherMixin, SDSFormControlMixin } from '../mixins';\nimport type { SDSFormControlProps } from '../mixins/sds-form-control-mixin';\n\nimport '../sds-icon/sds-icon';\n\ntype ChipVariant = 'selectable' | 'removable';\ntype ChipSize = 'large' | 'medium' | 'small' | Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSChipProps extends SDSFormControlProps {\n\tchecked?: boolean;\n\tsize?: ChipSize;\n\tvalue?: string;\n\tvariant?: ChipVariant;\n}\n\n@guardedCustomElement('sds-chip')\nexport class SDSChip extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSFormControlMixin(LitElement))) {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tprivate _initialChecked: boolean = false;\n\tprivate _readOnly: boolean = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) variant: SDSChipProps['variant'] = 'selectable';\n\t@property({ type: String, reflect: true }) size: SDSChipProps['size'] = 'md';\n\t@property({ type: Boolean, reflect: true }) checked: SDSChipProps['checked'] = false;\n\t@property({ type: String }) value?: SDSChipProps['value'];\n\t// TODO: Revert til normal prop and remove readonly fallback handling in next major version of web components package.\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true })\n\toverride get readOnly(): boolean {\n\t\treturn this._readOnly;\n\t}\n\toverride set readOnly(value: SDSChipProps['readOnly']) {\n\t\tconst oldVal = this._readOnly;\n\t\tthis._readOnly = value ?? false;\n\t\tthis.requestUpdate('readOnly', oldVal);\n\t}\n\n\t/** @deprecated Use readOnly instead */\n\tset readonly(value: SDSChipProps['readOnly']) {\n\t\tthis.readOnly = value;\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked ?? false;\n\t\tthis.internals.role = 'checkbox';\n\t\tif (this.checked) {\n\t\t\tthis.internals.setFormValue(this.value ?? null);\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.internals.setFormValue(this.value ?? null);\n\t}\n\n\toverride render() {\n\t\tconst isRemovableVariant = this.variant === 'removable' && !this.readOnly && !this.disabled;\n\n\t\tconst chipClasses = {\n\t\t\t'sds-chip': true,\n\t\t\t'sds-chip--small': this.size === 'small' || this.size === 'sm',\n\t\t\t'sds-chip--large': this.size === 'large' || this.size === 'lg',\n\t\t\t'sds-chip--removable': isRemovableVariant,\n\t\t};\n\n\t\tif (isRemovableVariant) {\n\t\t\treturn html`<button class=\"${classMap(chipClasses)}\" @click=${this._remove} @keyup=\"${this._keypress}\">\n\t\t\t\t<slot></slot>\n\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"s\"></sds-icon>\n\t\t\t</button>`;\n\t\t}\n\n\t\treturn html`<label class=\"${classMap(chipClasses)}\" @click=\"${this._toggle}\" @keyup=\"${this._keypress}\">\n\t\t\t<input\n\t\t\t\tid=\"control\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t.checked=\"${this.checked}\"\n\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t/>\n\t\t\t<slot></slot>\n\t\t</label>`;\n\t}\n\n\tprivate readonly _toggle = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (this.disabled || this.readOnly) return;\n\t\tthis.checked = !this.checked;\n\t\tthis.internals.setFormValue(this.checked ? this.value ?? 'on' : null);\n\t\tthis.dispatchSheriffEvent('change');\n\t};\n\n\tprivate readonly _remove = () => {\n\t\tif (this.disabled || this.readOnly) return;\n\t\tthis.dispatchSheriffEvent('sds-remove');\n\t};\n\n\tprivate readonly _keypress = (event: KeyboardEvent) => {\n\t\tif (![' ', 'Enter'].includes(event.key)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.variant === 'removable') {\n\t\t\tthis._remove();\n\t\t} else {\n\t\t\tthis._toggle(event);\n\t\t}\n\t};\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-chip': SDSChip;\n\t}\n}\n"]}

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

@@ -33,7 +33,7 @@ export const styles = css `
 		}
 	}
 
-	:host([disabled]) {
+	:host(:disabled) {
 		opacity: var(--_sds-chip-disabled-opacity);
 		cursor: not-allowed;
 		pointer-events: none;

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

@@ -1 +1 @@
-{"version":3,"file":"sds-chip.styles.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-chip-font-family: var(--sds-chip-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-chip-font-weight: var(--sds-chip-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-md));\n\n\t\t--_sds-chip-gap: var(--sds-chip-gap, var(--sds-spacing-4xs));\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-border-default, var(--sds-color-main-border-default)));\n\t\t--_sds-chip-border-width: var(--sds-chip-border-width, var(--sds-border-sm));\n\t\t--_sds-chip-border-radius: var(--sds-chip-border-radius, var(--sds-radius-full));\n\n\t\t--_sds-chip-focus-outline-width: var(--sds-chip-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-chip-focus-outline-color: var(--sds-chip-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-chip-focus-outline-offset: var(--sds-chip-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-chip-focus-inner-color: var(--sds-chip-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-chip-disabled-opacity: var(--sds-chip-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\n\t\t::slotted(sds-icon),\n\t\tsds-icon {\n\t\t\t--sds-icon-color: var(--_sds-chip-text-color);\n\t\t}\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-chip-disabled-opacity);\n\t\tcursor: not-allowed;\n\t\tpointer-events: none;\n\t}\n\n\t:host(:hover) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t}\n\n\t:host(:active) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t}\n\n\t:host([checked]) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t}\n\n\t:host([checked]:hover) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t}\n\n\t:host([checked]:active) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-lg));\n\t}\n\n\t.sds-chip {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\theight: var(--_sds-chip-height);\n\t\tgap: var(--_sds-chip-gap);\n\t\tjustify-content: center;\n\t\tpadding-inline: var(--_sds-chip-padding-inline);\n\n\t\tbackground-color: var(--_sds-chip-background-color);\n\t\tborder: var(--_sds-chip-border-width) solid var(--_sds-chip-border-color);\n\t\tborder-radius: var(--_sds-chip-border-radius);\n\n\t\tfont-family: var(--_sds-chip-font-family);\n\t\tfont-size: var(--_sds-chip-font-size);\n\t\tfont-weight: var(--_sds-chip-font-weight);\n\t\tline-height: var(--_sds-chip-line-height);\n\t\ttext-align: center;\n\t\tcolor: var(--_sds-chip-text-color);\n\t\tbox-sizing: border-box;\n\n\t\tuser-select: text;\n\t\tcursor: pointer;\n\n\t\t&:focus-within,\n\t\t&:focus {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-chip-focus-inner-color);\n\t\t\toutline: var(--_sds-chip-focus-outline-width) solid var(--_sds-chip-focus-outline-color);\n\t\t\toutline-offset: var(--_sds-chip-focus-outline-offset);\n\t\t}\n\n\t\t&:has([readonly]) {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&.sds-chip--removable {\n\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t}\n\t\t}\n\n\t\t& input[type='checkbox'] {\n\t\t\tposition: absolute;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\tpadding: 0;\n\t\t\tmargin: -1px;\n\t\t\toverflow: hidden;\n\t\t\tclip-path: inset(50%);\n\t\t\tborder: 0;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n`;\n"]}
+{"version":3,"file":"sds-chip.styles.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-chip-font-family: var(--sds-chip-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-chip-font-weight: var(--sds-chip-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-md));\n\n\t\t--_sds-chip-gap: var(--sds-chip-gap, var(--sds-spacing-4xs));\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-border-default, var(--sds-color-main-border-default)));\n\t\t--_sds-chip-border-width: var(--sds-chip-border-width, var(--sds-border-sm));\n\t\t--_sds-chip-border-radius: var(--sds-chip-border-radius, var(--sds-radius-full));\n\n\t\t--_sds-chip-focus-outline-width: var(--sds-chip-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-chip-focus-outline-color: var(--sds-chip-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-chip-focus-outline-offset: var(--sds-chip-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-chip-focus-inner-color: var(--sds-chip-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-chip-disabled-opacity: var(--sds-chip-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\n\t\t::slotted(sds-icon),\n\t\tsds-icon {\n\t\t\t--sds-icon-color: var(--_sds-chip-text-color);\n\t\t}\n\t}\n\n\t:host(:disabled) {\n\t\topacity: var(--_sds-chip-disabled-opacity);\n\t\tcursor: not-allowed;\n\t\tpointer-events: none;\n\t}\n\n\t:host(:hover) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t}\n\n\t:host(:active) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t}\n\n\t:host([checked]) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t}\n\n\t:host([checked]:hover) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t}\n\n\t:host([checked]:active) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-lg));\n\t}\n\n\t.sds-chip {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\theight: var(--_sds-chip-height);\n\t\tgap: var(--_sds-chip-gap);\n\t\tjustify-content: center;\n\t\tpadding-inline: var(--_sds-chip-padding-inline);\n\n\t\tbackground-color: var(--_sds-chip-background-color);\n\t\tborder: var(--_sds-chip-border-width) solid var(--_sds-chip-border-color);\n\t\tborder-radius: var(--_sds-chip-border-radius);\n\n\t\tfont-family: var(--_sds-chip-font-family);\n\t\tfont-size: var(--_sds-chip-font-size);\n\t\tfont-weight: var(--_sds-chip-font-weight);\n\t\tline-height: var(--_sds-chip-line-height);\n\t\ttext-align: center;\n\t\tcolor: var(--_sds-chip-text-color);\n\t\tbox-sizing: border-box;\n\n\t\tuser-select: text;\n\t\tcursor: pointer;\n\n\t\t&:focus-within,\n\t\t&:focus {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-chip-focus-inner-color);\n\t\t\toutline: var(--_sds-chip-focus-outline-width) solid var(--_sds-chip-focus-outline-color);\n\t\t\toutline-offset: var(--_sds-chip-focus-outline-offset);\n\t\t}\n\n\t\t&:has([readonly]) {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&.sds-chip--removable {\n\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t}\n\t\t}\n\n\t\t& input[type='checkbox'] {\n\t\t\tposition: absolute;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\tpadding: 0;\n\t\t\tmargin: -1px;\n\t\t\toverflow: hidden;\n\t\t\tclip-path: inset(50%);\n\t\t\tborder: 0;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n`;\n"]}

package/dist/sds-dialog/sds-dialog.component.d.ts

@@ -0,0 +1,56 @@
+import { LitElement, type PropertyValues } from 'lit';
+type ClosedBy = 'none' | 'closerequest' | 'any';
+export interface SDSDialogProps {
+    open?: boolean;
+    /**
+     * Set if dialog opens as a modal or not
+     *
+     * If non-modal, the user is allowed to interact with content outside of the dialog.
+     * If modal, the dialog is placed in the top layer with a ::backdrop pseudo-element.
+     *
+     * Docs:
+     * - https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show
+     * - https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal
+     */
+    modal?: boolean;
+    /**
+     * Set what type of dismiss behavior closes the dialog
+     * - 'none': Dialog can only be closed programmatically
+     * - 'closerequest': Dialog closes on ESC key (default)
+     * - 'any': Dialog closes on ESC key or clicking outside
+     *
+     * Docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy
+     */
+    closedby?: ClosedBy;
+    'close-button-label'?: string;
+}
+declare const SDSDialogComponent_base: import("../mixins/types").Constructable<import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface> & typeof LitElement;
+export declare class SDSDialogComponent extends SDSDialogComponent_base {
+    static styles: import("lit").CSSResult[];
+    open: boolean;
+    modal: boolean;
+    closedby: ClosedBy;
+    closeButtonLabel: string;
+    private _dialog;
+    private _isHeaderSlotEmpty;
+    private _pointerDownInside;
+    firstUpdated(): void;
+    updated(changedProperties: PropertyValues): void;
+    private _setupEventListeners;
+    private _openDialog;
+    private _closeDialog;
+    private readonly _handleClose;
+    private readonly _handleClick;
+    private readonly _handlePointerDown;
+    private readonly _handlePointerUp;
+    private readonly _handleCancel;
+    private readonly _handleHeaderSlotChange;
+    private readonly _handleAutoFocus;
+    show(): void;
+    showModal(): void;
+    close(): void;
+    requestClose(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=sds-dialog.component.d.ts.map

package/dist/sds-dialog/sds-dialog.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-dialog.component.d.ts","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKrE,KAAK,QAAQ,GAAG,MAAM,GAAG,cAAc,GAAG,KAAK,CAAC;AAEhD,MAAM,WAAW,cAAc;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC9B;;AAED,qBAAa,kBAAmB,SAAQ,uBAAmC;IAC1E,OAAgB,MAAM,4BAAY;IAEU,IAAI,EAAE,OAAO,CAAS;IACtB,KAAK,EAAE,OAAO,CAAS;IACxB,QAAQ,EAAE,QAAQ,CAAkB;IAClB,gBAAgB,EAAE,MAAM,CAAsB;IAE1F,OAAO,CAAC,OAAO,CAAqB;IAE5C,OAAO,CAAC,kBAAkB,CAAiB;IAGpD,OAAO,CAAC,kBAAkB,CAAS;IAE1B,YAAY,IAAI,IAAI;IAOpB,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAYzD,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAM3B;IAKF,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAIjC;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAsB/B;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAI5B;IAEF,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAGtC;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAkB/B;IAEK,IAAI,IAAI,IAAI;IAIZ,SAAS,IAAI,IAAI;IAKjB,KAAK,IAAI,IAAI;IAIb,YAAY,IAAI,IAAI;IAQlB,MAAM;CAkBf"}

package/dist/sds-dialog/sds-dialog.component.js

@@ -0,0 +1,181 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { styles } from './sds-dialog.styles';
+import { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';
+export class SDSDialogComponent extends SDSEventDispatcherMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.modal = false;
+        this.closedby = 'closerequest';
+        this.closeButtonLabel = 'Lukk dialogvindu';
+        this._isHeaderSlotEmpty = true;
+        // Safari closedBy=any polyfill state
+        this._pointerDownInside = false;
+        this._handleClose = () => {
+            this.open = false;
+            this.dispatchSheriffEvent('sds-close');
+        };
+        this._handleClick = (event) => {
+            const target = event.target;
+            if (target?.closest('[data-command="close"],[command="close"]')) {
+                this._closeDialog();
+            }
+        };
+        // Safari closedBy="any" polyfill
+        // Calculate whether the user's pointer down event is outside or inside dialog
+        // If outside, close the dialog
+        this._handlePointerDown = (event) => {
+            const rect = this._dialog.getBoundingClientRect();
+            const { clientX: x, clientY: y } = event;
+            this._pointerDownInside = rect.top <= y && y <= rect.bottom && rect.left <= x && x <= rect.right;
+        };
+        this._handlePointerUp = (event) => {
+            const wasDownInside = this._pointerDownInside;
+            this._pointerDownInside = false;
+            if (this.closedby !== 'any' || wasDownInside) {
+                return;
+            }
+            // Clicking the backdrop will have the dialog as the target in Safari/Chrome.
+            // Firefox does not fire this callback when ::backdrop is clicked.
+            if (event.target !== this._dialog) {
+                return;
+            }
+            // Use requestAnimationFrame to let the browser handle native closedBy first.
+            // This avoids checking for the closedBy property, which Safari 26.2 exposes
+            // without implementing.
+            requestAnimationFrame(() => {
+                if (this._dialog && this._dialog.open) {
+                    this._closeDialog();
+                }
+            });
+        };
+        this._handleCancel = (event) => {
+            if (this.closedby === 'none') {
+                event.preventDefault();
+            }
+        };
+        this._handleHeaderSlotChange = (event) => {
+            const slot = event.target;
+            this._isHeaderSlotEmpty = slot.assignedElements().length === 0;
+        };
+        this._handleAutoFocus = () => {
+            // slot:not([name]) finds the default nameless slot
+            const contentSlotElements = this.shadowRoot?.querySelector('slot:not([name])')?.assignedElements({ flatten: true });
+            if (!contentSlotElements || contentSlotElements.length === 0) {
+                return;
+            }
+            const elementToFocus = contentSlotElements.find((element) => {
+                return element.getAttribute('autofocus') != null;
+            });
+            if (!(elementToFocus instanceof HTMLElement)) {
+                return;
+            }
+            if (document.activeElement !== elementToFocus) {
+                elementToFocus.focus();
+            }
+        };
+    }
+    firstUpdated() {
+        this._setupEventListeners();
+        if (this.open) {
+            this._openDialog();
+        }
+    }
+    updated(changedProperties) {
+        if (!changedProperties.has('open')) {
+            return;
+        }
+        if (this.open) {
+            this._openDialog();
+        }
+        else {
+            this._closeDialog();
+        }
+    }
+    _setupEventListeners() {
+        this._dialog.addEventListener('close', this._handleClose);
+        this._dialog.addEventListener('cancel', this._handleCancel);
+        this._dialog.addEventListener('click', this._handleClick);
+        this._dialog.addEventListener('pointerdown', this._handlePointerDown);
+        this._dialog.addEventListener('pointerup', this._handlePointerUp);
+        this._dialog.addEventListener('animationend', this._handleAutoFocus);
+    }
+    _openDialog() {
+        if (!this._dialog) {
+            return;
+        }
+        if (this.modal) {
+            this._dialog.showModal();
+        }
+        else {
+            this._dialog.show();
+        }
+    }
+    _closeDialog() {
+        if (!this._dialog) {
+            return;
+        }
+        this._dialog.close();
+    }
+    show() {
+        this.open = true;
+    }
+    showModal() {
+        this.modal = true;
+        this.open = true;
+    }
+    close() {
+        this.open = false;
+    }
+    requestClose() {
+        if (!this._dialog) {
+            return;
+        }
+        this._dialog.requestClose();
+    }
+    render() {
+        return html `
+			<dialog .closedBy="${this.closedby}" class=${this._isHeaderSlotEmpty ? 'sds-dialog__empty-header' : ''}>
+				<div class="sds-dialog__header">
+					<slot name="header" @slotchange=${this._handleHeaderSlotChange}></slot>
+					${this.closeButtonLabel
+            ? html `
+								<sds-button class="sds-dialog__close-button" icon variant="tertiary" size="md" data-command="close" aria-label="${this.closeButtonLabel}">
+									<sds-icon name="close-material-outlined" size="md"></sds-icon>
+								</sds-button>
+							`
+            : nothing}
+				</div>
+				<slot></slot>
+				<slot name="footer"></slot>
+			</dialog>
+		`;
+    }
+}
+SDSDialogComponent.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSDialogComponent.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSDialogComponent.prototype, "modal", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSDialogComponent.prototype, "closedby", void 0);
+__decorate([
+    property({ type: String, attribute: 'close-button-label' })
+], SDSDialogComponent.prototype, "closeButtonLabel", void 0);
+__decorate([
+    query('dialog')
+], SDSDialogComponent.prototype, "_dialog", void 0);
+__decorate([
+    state()
+], SDSDialogComponent.prototype, "_isHeaderSlotEmpty", void 0);
+//# sourceMappingURL=sds-dialog.component.js.map