@politiet/sheriff-web-components 2.6.0 → 2.7.0

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, state } 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 { SDSFormControlAttributes } 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 SDSFormControlAttributes {\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\t@state() private _slotLabel: string = '';\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 = 'none';\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)}\">\n\t\t\t<input\n\t\t\t\tid=\"control\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\taria-label=\"${this._slotLabel}\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t.checked=\"${this.checked ?? false}\"\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\t@change=\"${this._handleChange}\"\n\t\t\t/>\n\t\t\t<span aria-hidden=\"true\"><slot @slotchange=\"${this._handleSlotChange}\"></slot></span>\n\t\t</label>`;\n\t}\n\n\tprivate readonly _handleSlotChange = (event: Event) => {\n\t\tconst slot = event.target as HTMLSlotElement;\n\t\tthis._slotLabel = slot\n\t\t\t.assignedNodes()\n\t\t\t.map((node) => node.textContent)\n\t\t\t.join('')\n\t\t\t.trim();\n\t};\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (!(event.target instanceof HTMLInputElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.disabled || this.readOnly) {\n\t\t\tevent.target.checked = this.checked ?? false;\n\t\t\treturn;\n\t\t}\n\n\t\tconst elem = event.target;\n\t\tthis.checked = elem.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 (event.key === ' ' || event.key === 'Enter') {\n\t\t\tthis._remove();\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-details/sds-details.d.ts

@@ -3,15 +3,16 @@ import '../sds-icon/sds-icon';
 export interface SDSDetailsProps {
     open?: boolean;
     standalone?: boolean;
-    name?: string;
 }
 declare const SDSDetails_base: import("../mixins/types").Constructable<import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface> & typeof LitElement;
 export declare class SDSDetails extends SDSDetails_base {
     static styles: import("lit").CSSResult[];
     open: SDSDetailsProps['open'];
     standalone: SDSDetailsProps['standalone'];
-    name: SDSDetailsProps['name'];
+    name: string | undefined;
+    private _initialized;
     private _handleToggle;
+    updated(changedProperties: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"sds-details.d.ts","sourceRoot":"","sources":["../../src/sds-details/sds-details.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,sBAAsB,CAAC;AAG9B,MAAM,WAAW,eAAe;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;;AAED,qBACa,UAAW,SAAQ,eAAmC;IAClE,OAAgB,MAAM,4BAAY;IAGlC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAS;IAGtC,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAS;IAGlD,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAa;IAE1C,OAAO,CAAC,aAAa,CAOnB;IAEO,MAAM;CAef;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
+{"version":3,"file":"sds-details.d.ts","sourceRoot":"","sources":["../../src/sds-details/sds-details.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,sBAAsB,CAAC;AAG9B,MAAM,WAAW,eAAe;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;;AAED,qBACa,UAAW,SAAQ,eAAmC;IAClE,OAAgB,MAAM,4BAAY;IAGlC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAS;IAGtC,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAS;IAGlD,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,aAAa,CAKnB;IAEO,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C,MAAM;CAef;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

package/dist/sds-details/sds-details.js

@@ -16,19 +16,28 @@ let SDSDetails = class SDSDetails extends SDSEventDispatcherMixin(LitElement) {
         this.open = false;
         this.standalone = false;
         this.name = undefined;
+        this._initialized = false;
         this._handleToggle = (event) => {
             const details = event.currentTarget;
             if (this.open !== details.open) {
                 this.open = details.open;
             }
-            this.dispatchSheriffEvent('sds-toggle', { open: details.open });
         };
     }
+    updated(changedProperties) {
+        if (!this._initialized) {
+            this._initialized = true;
+            return;
+        }
+        if (changedProperties.has('open')) {
+            this.dispatchSheriffEvent('toggle', { open: !!this.open });
+        }
+    }
     render() {
         return html `
 			<details class="sds-details" .name="${this.name ?? ''}" ?data-standalone="${this.standalone}" ?open="${this.open}" @toggle="${this._handleToggle}">
 				<summary class="sds-details__summary">
-					<sds-icon name="chevron_up-material-filled"></sds-icon>
+					<sds-icon name="chevron_up-material-filled" role="presentation"></sds-icon>
 					<div class="sds-details__summary-content">
 						<slot name="summary"></slot>
 					</div>

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

@@ -1 +1 @@
-{"version":3,"file":"sds-details.js","sourceRoot":"","sources":["../../src/sds-details/sds-details.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AASxE,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,uBAAuB,CAAC,UAAU,CAAC;IAA5D;;QAIN,SAAI,GAA4B,KAAK,CAAC;QAGtC,eAAU,GAAkC,KAAK,CAAC;QAGlD,SAAI,GAA4B,SAAS,CAAC;QAElC,kBAAa,GAAG,CAAC,KAAY,EAAE,EAAE;YACxC,MAAM,OAAO,GAAG,KAAK,CAAC,aAAmC,CAAC;YAC1D,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC;gBAChC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;YAC1B,CAAC;YAED,IAAI,CAAC,oBAAoB,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;QACjE,CAAC,CAAC;IAiBH,CAAC;IAfS,MAAM;QACd,OAAO,IAAI,CAAA;yCAC4B,IAAI,CAAC,IAAI,IAAI,EAAE,uBAAuB,IAAI,CAAC,UAAU,YAAY,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,aAAa;;;;;;;;;;;GAWhJ,CAAC;IACH,CAAC;;AAlCe,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACL;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACO;AAGlD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACA;AAV9B,UAAU;IADtB,oBAAoB,CAAC,aAAa,CAAC;GACvB,UAAU,CAoCtB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-details.styles';\nimport '../sds-icon/sds-icon';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\n\nexport interface SDSDetailsProps {\n\topen?: boolean;\n\tstandalone?: boolean;\n\tname?: string;\n}\n\n@guardedCustomElement('sds-details')\nexport class SDSDetails extends SDSEventDispatcherMixin(LitElement) {\n\tstatic override styles = [styles];\n\n\t@property({ type: Boolean, reflect: true })\n\topen: SDSDetailsProps['open'] = false;\n\n\t@property({ type: Boolean, reflect: true })\n\tstandalone: SDSDetailsProps['standalone'] = false;\n\n\t@property({ type: String, reflect: true })\n\tname: SDSDetailsProps['name'] = undefined;\n\n\tprivate _handleToggle = (event: Event) => {\n\t\tconst details = event.currentTarget as HTMLDetailsElement;\n\t\tif (this.open !== details.open) {\n\t\t\tthis.open = details.open;\n\t\t}\n\n\t\tthis.dispatchSheriffEvent('sds-toggle', { open: details.open });\n\t};\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<details class=\"sds-details\" .name=\"${this.name ?? ''}\" ?data-standalone=\"${this.standalone}\" ?open=\"${this.open}\" @toggle=\"${this._handleToggle}\">\n\t\t\t\t<summary class=\"sds-details__summary\">\n\t\t\t\t\t<sds-icon name=\"chevron_up-material-filled\"></sds-icon>\n\t\t\t\t\t<div class=\"sds-details__summary-content\">\n\t\t\t\t\t\t<slot name=\"summary\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</summary>\n\t\t\t\t<div class=\"sds-details__content\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</details>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-details': SDSDetails;\n\t}\n}\n"]}
+{"version":3,"file":"sds-details.js","sourceRoot":"","sources":["../../src/sds-details/sds-details.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAQxE,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,uBAAuB,CAAC,UAAU,CAAC;IAA5D;;QAIN,SAAI,GAA4B,KAAK,CAAC;QAGtC,eAAU,GAAkC,KAAK,CAAC;QAGlD,SAAI,GAAuB,SAAS,CAAC;QAE7B,iBAAY,GAAG,KAAK,CAAC;QAErB,kBAAa,GAAG,CAAC,KAAY,EAAE,EAAE;YACxC,MAAM,OAAO,GAAG,KAAK,CAAC,aAAmC,CAAC;YAC1D,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC;gBAChC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;YAC1B,CAAC;QACF,CAAC,CAAC;IA2BH,CAAC;IAzBS,OAAO,CAAC,iBAAuC;QACvD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,OAAO;QACR,CAAC;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC5D,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA;yCAC4B,IAAI,CAAC,IAAI,IAAI,EAAE,uBAAuB,IAAI,CAAC,UAAU,YAAY,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,aAAa;;;;;;;;;;;GAWhJ,CAAC;IACH,CAAC;;AA5Ce,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACL;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACO;AAGlD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACL;AAVzB,UAAU;IADtB,oBAAoB,CAAC,aAAa,CAAC;GACvB,UAAU,CA8CtB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-details.styles';\nimport '../sds-icon/sds-icon';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\n\nexport interface SDSDetailsProps {\n\topen?: boolean;\n\tstandalone?: boolean;\n}\n\n@guardedCustomElement('sds-details')\nexport class SDSDetails extends SDSEventDispatcherMixin(LitElement) {\n\tstatic override styles = [styles];\n\n\t@property({ type: Boolean, reflect: true })\n\topen: SDSDetailsProps['open'] = false;\n\n\t@property({ type: Boolean, reflect: true })\n\tstandalone: SDSDetailsProps['standalone'] = false;\n\n\t@property({ type: String, reflect: true })\n\tname: string | undefined = undefined;\n\n\tprivate _initialized = false;\n\n\tprivate _handleToggle = (event: Event) => {\n\t\tconst details = event.currentTarget as HTMLDetailsElement;\n\t\tif (this.open !== details.open) {\n\t\t\tthis.open = details.open;\n\t\t}\n\t};\n\n\toverride updated(changedProperties: Map<string, unknown>) {\n\t\tif (!this._initialized) {\n\t\t\tthis._initialized = true;\n\t\t\treturn;\n\t\t}\n\t\tif (changedProperties.has('open')) {\n\t\t\tthis.dispatchSheriffEvent('toggle', { open: !!this.open });\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<details class=\"sds-details\" .name=\"${this.name ?? ''}\" ?data-standalone=\"${this.standalone}\" ?open=\"${this.open}\" @toggle=\"${this._handleToggle}\">\n\t\t\t\t<summary class=\"sds-details__summary\">\n\t\t\t\t\t<sds-icon name=\"chevron_up-material-filled\" role=\"presentation\"></sds-icon>\n\t\t\t\t\t<div class=\"sds-details__summary-content\">\n\t\t\t\t\t\t<slot name=\"summary\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</summary>\n\t\t\t\t<div class=\"sds-details__content\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</details>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-details': SDSDetails;\n\t}\n}\n"]}

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

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

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

@@ -6,6 +6,7 @@ export const styles = css `
 		--_sds-details-summary-padding: var(--sds-details-summary-padding, var(--sds-spacing-xs));
 		--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));
 		--_sds-details-summary-gap: var(--sds-details-summary-gap, var(--sds-spacing-3xs));
+		--_sds-details-summary-border-radius: var(--sds-details-summary-border-radius, 0);
 
 		--_sds-details-content-padding-start: var(--sds-details-content-padding-start, calc(var(--_sds-details-summary-padding) + var(--_sds-details-summary-gap) + var(--sds-components-icon-md)));
 		--_sds-details-content-padding: var(--sds-details-content-padding, var(--sds-spacing-xs));
@@ -20,6 +21,9 @@ export const styles = css `
 
 		--_sds-details-border-color: var(--sds-details-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));
 		--_sds-details-border-bottom: var(--sds-details-border-bottom, solid 1px var(--_sds-details-border-color));
+		--_sds-details-border-top: var(--sds-details-border-top, solid 1px var(--_sds-details-border-color));
+		--_sds-details-border-standalone: var(--sds-details-border-standalone, solid 1px var(--_sds-details-border-color));
+		--_sds-details-border-radius: var(--sds-details-border-radius, var(--sds-radius-md));
 	}
 
 	:host([data-palette]) {
@@ -35,7 +39,7 @@ export const styles = css `
 		}
 
 		&:not([data-standalone]) {
-			border-top: solid 1px var(--_sds-details-border-color);
+			border-top: var(--_sds-details-border-top);
 			border-bottom: var(--_sds-details-border-bottom);
 		}
 
@@ -44,8 +48,8 @@ export const styles = css `
 		*/
 		&:is([data-standalone]) {
 			summary {
-				border-radius: var(--sds-radius-md);
-				border: solid 1px var(--_sds-details-border-color);
+				border-radius: var(--_sds-details-border-radius);
+				border: var(--_sds-details-border-standalone);
 			}
 
 			&:is([open]) {
@@ -58,8 +62,8 @@ export const styles = css `
 					border-left: solid 1px var(--_sds-details-border-color);
 					border-right: solid 1px var(--_sds-details-border-color);
 					border-bottom: solid 1px var(--_sds-details-border-color);
-					border-bottom-left-radius: var(--sds-radius-md);
-					border-bottom-right-radius: var(--sds-radius-md);
+					border-bottom-left-radius: var(--_sds-details-border-radius);
+					border-bottom-right-radius: var(--_sds-details-border-radius);
 				}
 			}
 		}
@@ -72,6 +76,7 @@ export const styles = css `
 		justify-content: space-between;
 		padding: var(--_sds-details-summary-padding);
 		background-color: var(--_sds-details-summary-background-color);
+		border-radius: var(--_sds-details-summary-border-radius);
 		gap: var(--_sds-details-summary-gap);
 		list-style: none;
 		user-select: none;

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

@@ -1 +1 @@
-{"version":3,"file":"sds-details.styles.js","sourceRoot":"","sources":["../../src/sds-details/sds-details.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\t--_sds-details-summary-padding: var(--sds-details-summary-padding, var(--sds-spacing-xs));\n\t\t--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t\t--_sds-details-summary-gap: var(--sds-details-summary-gap, var(--sds-spacing-3xs));\n\n\t\t--_sds-details-content-padding-start: var(--sds-details-content-padding-start, calc(var(--_sds-details-summary-padding) + var(--_sds-details-summary-gap) + var(--sds-components-icon-md)));\n\t\t--_sds-details-content-padding: var(--sds-details-content-padding, var(--sds-spacing-xs));\n\t\t--_sds-details-content-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\n\t\t--_sds-details-focus-outline-width: var(--sds-details-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-details-focus-outline-color: var(--sds-details-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-details-focus-outline-offset: var(--sds-details-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-details-focus-inner-color: var(--sds-details-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-details-icon-transition: var(--sds-details-icon-transition, transform 0.2s ease);\n\n\t\t--_sds-details-border-color: var(--sds-details-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t\t--_sds-details-border-bottom: var(--sds-details-border-bottom, solid 1px var(--_sds-details-border-color));\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\t\t--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t}\n\n\t.sds-details {\n\t\tcolor: var(--_sds-details-text-color);\n\n\t\t&:is([open]) {\n\t\t\t--_sds-details-summary-background-color: var(----_sds-details-summary-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));\n\t\t}\n\n\t\t&:not([data-standalone]) {\n\t\t\tborder-top: solid 1px var(--_sds-details-border-color);\n\t\t\tborder-bottom: var(--_sds-details-border-bottom);\n\t\t}\n\n\t\t/* Setting the border on the summary element preserves the border\n\t\t   when the element has focus\n\t\t*/\n\t\t&:is([data-standalone]) {\n\t\t\tsummary {\n\t\t\t\tborder-radius: var(--sds-radius-md);\n\t\t\t\tborder: solid 1px var(--_sds-details-border-color);\n\t\t\t}\n\n\t\t\t&:is([open]) {\n\t\t\t\t& summary {\n\t\t\t\t\tborder-bottom-left-radius: 0px;\n\t\t\t\t\tborder-bottom-right-radius: 0px;\n\t\t\t\t}\n\n\t\t\t\t& .sds-details__content {\n\t\t\t\t\tborder-left: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-right: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-bottom: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-bottom-left-radius: var(--sds-radius-md);\n\t\t\t\t\tborder-bottom-right-radius: var(--sds-radius-md);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-details__summary {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: var(--_sds-details-summary-padding);\n\t\tbackground-color: var(--_sds-details-summary-background-color);\n\t\tgap: var(--_sds-details-summary-gap);\n\t\tlist-style: none;\n\t\tuser-select: none;\n\n\t\t&:hover {\n\t\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-active, 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-details-focus-inner-color);\n\t\t\toutline: var(--_sds-details-focus-outline-width) solid var(--_sds-details-focus-outline-color);\n\t\t\toutline-offset: var(--_sds-details-focus-outline-offset);\n\t\t}\n\t}\n\n\t.sds-details__summary-content {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t}\n\n\tsds-icon {\n\t\ttransition: var(--_sds-details-icon-transition);\n\t}\n\n\t.sds-details:not([open]) sds-icon {\n\t\ttransform: rotate(180deg);\n\t}\n\n\t.sds-details__content {\n\t\tpadding: var(--_sds-details-content-padding);\n\t\tpadding-inline-start: var(--_sds-details-content-padding-start);\n\t}\n\n\t@media (prefers-reduced-motion: no-preference) {\n\t\t.sds-details__content {\n\t\t\tanimation: show-content-keyframes 200ms ease-in-out;\n\t\t}\n\t}\n\n\t@keyframes show-content-keyframes {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(-0.5rem);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t::slotted([slot='summary']) {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t}\n`;\n"]}
+{"version":3,"file":"sds-details.styles.js","sourceRoot":"","sources":["../../src/sds-details/sds-details.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\t--_sds-details-summary-padding: var(--sds-details-summary-padding, var(--sds-spacing-xs));\n\t\t--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t\t--_sds-details-summary-gap: var(--sds-details-summary-gap, var(--sds-spacing-3xs));\n\t\t--_sds-details-summary-border-radius: var(--sds-details-summary-border-radius, 0);\n\n\t\t--_sds-details-content-padding-start: var(--sds-details-content-padding-start, calc(var(--_sds-details-summary-padding) + var(--_sds-details-summary-gap) + var(--sds-components-icon-md)));\n\t\t--_sds-details-content-padding: var(--sds-details-content-padding, var(--sds-spacing-xs));\n\t\t--_sds-details-content-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\n\t\t--_sds-details-focus-outline-width: var(--sds-details-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-details-focus-outline-color: var(--sds-details-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-details-focus-outline-offset: var(--sds-details-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-details-focus-inner-color: var(--sds-details-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-details-icon-transition: var(--sds-details-icon-transition, transform 0.2s ease);\n\n\t\t--_sds-details-border-color: var(--sds-details-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t\t--_sds-details-border-bottom: var(--sds-details-border-bottom, solid 1px var(--_sds-details-border-color));\n\t\t--_sds-details-border-top: var(--sds-details-border-top, solid 1px var(--_sds-details-border-color));\n\t\t--_sds-details-border-standalone: var(--sds-details-border-standalone, solid 1px var(--_sds-details-border-color));\n\t\t--_sds-details-border-radius: var(--sds-details-border-radius, var(--sds-radius-md));\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\t\t--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t}\n\n\t.sds-details {\n\t\tcolor: var(--_sds-details-text-color);\n\n\t\t&:is([open]) {\n\t\t\t--_sds-details-summary-background-color: var(----_sds-details-summary-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));\n\t\t}\n\n\t\t&:not([data-standalone]) {\n\t\t\tborder-top: var(--_sds-details-border-top);\n\t\t\tborder-bottom: var(--_sds-details-border-bottom);\n\t\t}\n\n\t\t/* Setting the border on the summary element preserves the border\n\t\t   when the element has focus\n\t\t*/\n\t\t&:is([data-standalone]) {\n\t\t\tsummary {\n\t\t\t\tborder-radius: var(--_sds-details-border-radius);\n\t\t\t\tborder: var(--_sds-details-border-standalone);\n\t\t\t}\n\n\t\t\t&:is([open]) {\n\t\t\t\t& summary {\n\t\t\t\t\tborder-bottom-left-radius: 0px;\n\t\t\t\t\tborder-bottom-right-radius: 0px;\n\t\t\t\t}\n\n\t\t\t\t& .sds-details__content {\n\t\t\t\t\tborder-left: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-right: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-bottom: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-bottom-left-radius: var(--_sds-details-border-radius);\n\t\t\t\t\tborder-bottom-right-radius: var(--_sds-details-border-radius);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-details__summary {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: var(--_sds-details-summary-padding);\n\t\tbackground-color: var(--_sds-details-summary-background-color);\n\t\tborder-radius: var(--_sds-details-summary-border-radius);\n\t\tgap: var(--_sds-details-summary-gap);\n\t\tlist-style: none;\n\t\tuser-select: none;\n\n\t\t&:hover {\n\t\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-active, 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-details-focus-inner-color);\n\t\t\toutline: var(--_sds-details-focus-outline-width) solid var(--_sds-details-focus-outline-color);\n\t\t\toutline-offset: var(--_sds-details-focus-outline-offset);\n\t\t}\n\t}\n\n\t.sds-details__summary-content {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t}\n\n\tsds-icon {\n\t\ttransition: var(--_sds-details-icon-transition);\n\t}\n\n\t.sds-details:not([open]) sds-icon {\n\t\ttransform: rotate(180deg);\n\t}\n\n\t.sds-details__content {\n\t\tpadding: var(--_sds-details-content-padding);\n\t\tpadding-inline-start: var(--_sds-details-content-padding-start);\n\t}\n\n\t@media (prefers-reduced-motion: no-preference) {\n\t\t.sds-details__content {\n\t\t\tanimation: show-content-keyframes 200ms ease-in-out;\n\t\t}\n\t}\n\n\t@keyframes show-content-keyframes {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(-0.5rem);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t::slotted([slot='summary']) {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t}\n`;\n"]}

package/dist/sds-details-group/sds-details-group.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+export interface SDSDetailsGroupProps {
+    outlined?: boolean;
+    name?: string;
+}
+export declare class SDSDetailsGroup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    outlined: SDSDetailsGroupProps['outlined'];
+    name: SDSDetailsGroupProps['name'];
+    private _detailsChildren;
+    private _toggleListeners;
+    updated(changedProperties: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private _handleSlotChange;
+    private _syncChildren;
+    private _removeListeners;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-details-group': SDSDetailsGroup;
+    }
+}
+//# sourceMappingURL=sds-details-group.d.ts.map

package/dist/sds-details-group/sds-details-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-details-group.d.ts","sourceRoot":"","sources":["../../src/sds-details-group/sds-details-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,MAAM,WAAW,oBAAoB;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAAY;IAGlC,QAAQ,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAS;IAGnD,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAGnC,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,gBAAgB,CAAwC;IAEvD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAM/C,oBAAoB;IAK7B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,gBAAgB;IAOf,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}

package/dist/sds-details-group/sds-details-group.js

@@ -0,0 +1,73 @@
+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 } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { guardedCustomElement } from '../utils/guarded-custom-element';
+import { styles } from './sds-details-group.styles';
+let SDSDetailsGroup = class SDSDetailsGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.outlined = false;
+        this._toggleListeners = new Map();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('name')) {
+            this._syncChildren();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._removeListeners();
+    }
+    _handleSlotChange() {
+        this._syncChildren();
+    }
+    _syncChildren() {
+        this._removeListeners();
+        const children = this._detailsChildren;
+        children.forEach(child => {
+            child.name = this.name;
+            if (this.name) {
+                const listener = (event) => {
+                    const { open } = event.detail;
+                    if (open) {
+                        children.forEach(sibling => {
+                            if (sibling !== child && sibling.open)
+                                sibling.open = false;
+                        });
+                    }
+                };
+                child.addEventListener('toggle', listener);
+                this._toggleListeners.set(child, listener);
+            }
+        });
+    }
+    _removeListeners() {
+        this._toggleListeners.forEach((listener, child) => {
+            child.removeEventListener('toggle', listener);
+        });
+        this._toggleListeners.clear();
+    }
+    render() {
+        return html `<div><slot @slotchange="${this._handleSlotChange}"></slot></div>`;
+    }
+};
+SDSDetailsGroup.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSDetailsGroup.prototype, "outlined", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSDetailsGroup.prototype, "name", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'sds-details' })
+], SDSDetailsGroup.prototype, "_detailsChildren", void 0);
+SDSDetailsGroup = __decorate([
+    guardedCustomElement('sds-details-group')
+], SDSDetailsGroup);
+export { SDSDetailsGroup };
+//# sourceMappingURL=sds-details-group.js.map

package/dist/sds-details-group/sds-details-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-details-group.js","sourceRoot":"","sources":["../../src/sds-details-group/sds-details-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAS7C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAIN,aAAQ,GAAqC,KAAK,CAAC;QAO3C,qBAAgB,GAAG,IAAI,GAAG,EAA6B,CAAC;IAkDjE,CAAC;IAhDS,OAAO,CAAC,iBAAuC;QACvD,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,aAAa,EAAE,CAAC;QACtB,CAAC;IACF,CAAC;IAEQ,oBAAoB;QAC5B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACzB,CAAC;IAEO,iBAAiB;QACxB,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAEO,aAAa;QACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAEvC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACxB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAEvB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACf,MAAM,QAAQ,GAAkB,CAAC,KAAY,EAAE,EAAE;oBAChD,MAAM,EAAE,IAAI,EAAE,GAAI,KAAwC,CAAC,MAAM,CAAC;oBAClE,IAAI,IAAI,EAAE,CAAC;wBACV,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;4BAC1B,IAAI,OAAO,KAAK,KAAK,IAAI,OAAO,CAAC,IAAI;gCAAE,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC;wBAC7D,CAAC,CAAC,CAAC;oBACJ,CAAC;gBACF,CAAC,CAAC;gBACF,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;gBAC3C,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;YAC5C,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACvB,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;YACjD,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;IAC/B,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,iBAAiB,iBAAiB,CAAC;IAC/E,CAAC;;AA3De,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACQ;AAGnD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACP;AAG3B;IADP,qBAAqB,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;yDACN;AAVjC,eAAe;IAD3B,oBAAoB,CAAC,mBAAmB,CAAC;GAC7B,eAAe,CA6D3B","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-details-group.styles';\nimport type { SDSDetails } from '../sds-details/sds-details';\n\nexport interface SDSDetailsGroupProps {\n\toutlined?: boolean;\n\tname?: string;\n}\n\n@guardedCustomElement('sds-details-group')\nexport class SDSDetailsGroup extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: Boolean, reflect: true })\n\toutlined: SDSDetailsGroupProps['outlined'] = false;\n\n\t@property({ type: String, reflect: true })\n\tname: SDSDetailsGroupProps['name'];\n\n\t@queryAssignedElements({ selector: 'sds-details' })\n\tprivate _detailsChildren!: Array<SDSDetails>;\n\tprivate _toggleListeners = new Map<SDSDetails, EventListener>();\n\n\toverride updated(changedProperties: Map<string, unknown>) {\n\t\tif (changedProperties.has('name')) {\n\t\t\tthis._syncChildren();\n\t\t}\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tthis._removeListeners();\n\t}\n\n\tprivate _handleSlotChange() {\n\t\tthis._syncChildren();\n\t}\n\n\tprivate _syncChildren() {\n\t\tthis._removeListeners();\n\n\t\tconst children = this._detailsChildren;\n\n\t\tchildren.forEach(child => {\n\t\t\tchild.name = this.name;\n\n\t\t\tif (this.name) {\n\t\t\t\tconst listener: EventListener = (event: Event) => {\n\t\t\t\t\tconst { open } = (event as CustomEvent<{ open: boolean }>).detail;\n\t\t\t\t\tif (open) {\n\t\t\t\t\t\tchildren.forEach(sibling => {\n\t\t\t\t\t\t\tif (sibling !== child && sibling.open) sibling.open = false;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\tchild.addEventListener('toggle', listener);\n\t\t\t\tthis._toggleListeners.set(child, listener);\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate _removeListeners() {\n\t\tthis._toggleListeners.forEach((listener, child) => {\n\t\t\tchild.removeEventListener('toggle', listener);\n\t\t});\n\t\tthis._toggleListeners.clear();\n\t}\n\n\toverride render() {\n\t\treturn html`<div><slot @slotchange=\"${this._handleSlotChange}\"></slot></div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-details-group': SDSDetailsGroup;\n\t}\n}\n"]}

package/dist/sds-details-group/sds-details-group.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=sds-details-group.styles.d.ts.map

package/dist/sds-details-group/sds-details-group.styles.d.ts.map

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

package/dist/sds-details-group/sds-details-group.styles.js

@@ -0,0 +1,30 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		display: block;
+	}
+
+	div ::slotted(sds-details:not(:last-child)) {
+		--sds-details-border-bottom: 0;
+	}
+
+	:host([outlined]) div {
+		border: 1px solid var(--sds-color-border-subtle, var(--sds-color-main-border-subtle));
+		border-radius: var(--sds-radius-md);
+	}
+
+	:host([outlined]) div ::slotted(sds-details:first-child) {
+		--sds-details-border-top: 0;
+		--sds-details-summary-border-radius: var(--sds-radius-md) var(--sds-radius-md) 0 0;
+	}
+
+	:host([outlined]) div ::slotted(sds-details:last-child) {
+		--sds-details-border-bottom: 0;
+		--sds-details-summary-border-radius: 0 0 var(--sds-radius-md) var(--sds-radius-md);
+	}
+
+	:host([outlined]) div ::slotted(sds-details:last-child[open]) {
+		--sds-details-summary-border-radius: 0;
+	}
+`;
+//# sourceMappingURL=sds-details-group.styles.js.map

package/dist/sds-details-group/sds-details-group.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-details-group.styles.js","sourceRoot":"","sources":["../../src/sds-details-group/sds-details-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\tdiv ::slotted(sds-details:not(:last-child)) {\n\t\t--sds-details-border-bottom: 0;\n\t}\n\n\t:host([outlined]) div {\n\t\tborder: 1px solid var(--sds-color-border-subtle, var(--sds-color-main-border-subtle));\n\t\tborder-radius: var(--sds-radius-md);\n\t}\n\n\t:host([outlined]) div ::slotted(sds-details:first-child) {\n\t\t--sds-details-border-top: 0;\n\t\t--sds-details-summary-border-radius: var(--sds-radius-md) var(--sds-radius-md) 0 0;\n\t}\n\n\t:host([outlined]) div ::slotted(sds-details:last-child) {\n\t\t--sds-details-border-bottom: 0;\n\t\t--sds-details-summary-border-radius: 0 0 var(--sds-radius-md) var(--sds-radius-md);\n\t}\n\n\t:host([outlined]) div ::slotted(sds-details:last-child[open]) {\n\t\t--sds-details-summary-border-radius: 0;\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"}