@politiet/sheriff-web-components 2.6.1 → 2.7.1

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.js

@@ -147,7 +147,7 @@ export class SDSDialogComponent extends SDSEventDispatcherMixin(LitElement) {
 					<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-button class="sds-dialog__close-button" icon variant="tertiary" size="md" command="close" label="${this.closeButtonLabel}">
 									<sds-icon name="close-material-outlined" size="md"></sds-icon>
 								</sds-button>
 							`

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

@@ -1 +1 @@
-{"version":3,"file":"sds-dialog.component.js","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { styles } from './sds-dialog.styles';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\n\ntype ClosedBy = 'none' | 'closerequest' | 'any';\n\nexport interface SDSDialogProps {\n\topen?: boolean;\n\t/**\n\t * Set if dialog opens as a modal or not\n\t *\n\t * If non-modal, the user is allowed to interact with content outside of the dialog.\n\t * If modal, the dialog is placed in the top layer with a ::backdrop pseudo-element.\n\t *\n\t * Docs:\n\t * - https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show\n\t * - https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal\n\t */\n\tmodal?: boolean;\n\t/**\n\t * Set what type of dismiss behavior closes the dialog\n\t * - 'none': Dialog can only be closed programmatically\n\t * - 'closerequest': Dialog closes on ESC key (default)\n\t * - 'any': Dialog closes on ESC key or clicking outside\n\t *\n\t * Docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\t */\n\tclosedby?: ClosedBy;\n\t'close-button-label'?: string;\n}\n\nexport class SDSDialogComponent extends SDSEventDispatcherMixin(LitElement) {\n\tstatic override styles = [styles];\n\n\t@property({ type: Boolean, reflect: true }) open: boolean = false;\n\t@property({ type: Boolean, reflect: true }) modal: boolean = false;\n\t@property({ type: String, reflect: true }) closedby: ClosedBy = 'closerequest';\n\t@property({ type: String, attribute: 'close-button-label' }) closeButtonLabel: string = 'Lukk dialogvindu';\n\n\t@query('dialog') private _dialog!: HTMLDialogElement;\n\n\t@state() private _isHeaderSlotEmpty: boolean = true;\n\n\t// Safari closedBy=any polyfill state\n\tprivate _pointerDownInside = false;\n\n\toverride firstUpdated(): void {\n\t\tthis._setupEventListeners();\n\t\tif (this.open) {\n\t\t\tthis._openDialog();\n\t\t}\n\t}\n\n\toverride updated(changedProperties: PropertyValues): void {\n\t\tif (!changedProperties.has('open')) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.open) {\n\t\t\tthis._openDialog();\n\t\t} else {\n\t\t\tthis._closeDialog();\n\t\t}\n\t}\n\n\tprivate _setupEventListeners(): void {\n\t\tthis._dialog.addEventListener('close', this._handleClose);\n\t\tthis._dialog.addEventListener('cancel', this._handleCancel);\n\t\tthis._dialog.addEventListener('click', this._handleClick);\n\t\tthis._dialog.addEventListener('pointerdown', this._handlePointerDown);\n\t\tthis._dialog.addEventListener('pointerup', this._handlePointerUp);\n\t\tthis._dialog.addEventListener('animationend', this._handleAutoFocus);\n\t}\n\n\tprivate _openDialog(): void {\n\t\tif (!this._dialog) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.modal) {\n\t\t\tthis._dialog.showModal();\n\t\t} else {\n\t\t\tthis._dialog.show();\n\t\t}\n\t}\n\n\tprivate _closeDialog(): void {\n\t\tif (!this._dialog) {\n\t\t\treturn;\n\t\t}\n\t\tthis._dialog.close();\n\t}\n\n\tprivate readonly _handleClose = (): void => {\n\t\tthis.open = false;\n\t\tthis.dispatchSheriffEvent('sds-close');\n\t};\n\n\tprivate readonly _handleClick = (event: MouseEvent): void => {\n\t\tconst target = event.target as Element | null;\n\n\t\tif (target?.closest('[data-command=\"close\"],[command=\"close\"]')) {\n\t\t\tthis._closeDialog();\n\t\t}\n\t};\n\n\t// Safari closedBy=\"any\" polyfill\n\t// Calculate whether the user's pointer down event is outside or inside dialog\n\t// If outside, close the dialog\n\tprivate readonly _handlePointerDown = (event: PointerEvent): void => {\n\t\tconst rect = this._dialog.getBoundingClientRect();\n\t\tconst { clientX: x, clientY: y } = event;\n\t\tthis._pointerDownInside = rect.top <= y && y <= rect.bottom && rect.left <= x && x <= rect.right;\n\t};\n\n\tprivate readonly _handlePointerUp = (event: PointerEvent): void => {\n\t\tconst wasDownInside = this._pointerDownInside;\n\t\tthis._pointerDownInside = false;\n\n\t\tif (this.closedby !== 'any' || wasDownInside) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Clicking the backdrop will have the dialog as the target in Safari/Chrome.\n\t\t// Firefox does not fire this callback when ::backdrop is clicked.\n\t\tif (event.target !== this._dialog) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Use requestAnimationFrame to let the browser handle native closedBy first.\n\t\t// This avoids checking for the closedBy property, which Safari 26.2 exposes\n\t\t// without implementing.\n\t\trequestAnimationFrame(() => {\n\t\t\tif (this._dialog && this._dialog.open) {\n\t\t\t\tthis._closeDialog();\n\t\t\t}\n\t\t});\n\t};\n\n\tprivate readonly _handleCancel = (event: Event): void => {\n\t\tif (this.closedby === 'none') {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\n\tprivate readonly _handleHeaderSlotChange = (event: Event): void => {\n\t\tconst slot = event.target as HTMLSlotElement;\n\t\tthis._isHeaderSlotEmpty = slot.assignedElements().length === 0;\n\t};\n\n\tprivate readonly _handleAutoFocus = (): void => {\n\t\t// slot:not([name]) finds the default nameless slot\n\t\tconst contentSlotElements = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])')?.assignedElements({ flatten: true });\n\t\tif (!contentSlotElements || contentSlotElements.length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst elementToFocus = contentSlotElements.find((element) => {\n\t\t\treturn element.getAttribute('autofocus') != null;\n\t\t});\n\n\t\tif (!(elementToFocus instanceof HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (document.activeElement !== elementToFocus) {\n\t\t\telementToFocus.focus();\n\t\t}\n\t};\n\n\tpublic show(): void {\n\t\tthis.open = true;\n\t}\n\n\tpublic showModal(): void {\n\t\tthis.modal = true;\n\t\tthis.open = true;\n\t}\n\n\tpublic close(): void {\n\t\tthis.open = false;\n\t}\n\n\tpublic requestClose(): void {\n\t\tif (!this._dialog) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._dialog.requestClose();\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<dialog .closedBy=\"${this.closedby}\" class=${this._isHeaderSlotEmpty ? 'sds-dialog__empty-header' : ''}>\n\t\t\t\t<div class=\"sds-dialog__header\">\n\t\t\t\t\t<slot name=\"header\" @slotchange=${this._handleHeaderSlotChange}></slot>\n\t\t\t\t\t${this.closeButtonLabel\n\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t<sds-button class=\"sds-dialog__close-button\" icon variant=\"tertiary\" size=\"md\" data-command=\"close\" aria-label=\"${this.closeButtonLabel}\">\n\t\t\t\t\t\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"md\"></sds-icon>\n\t\t\t\t\t\t\t\t</sds-button>\n\t\t\t\t\t\t\t`\n\t\t\t\t\t\t: nothing}\n\t\t\t\t</div>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t</dialog>\n\t\t`;\n\t}\n}\n"]}
+{"version":3,"file":"sds-dialog.component.js","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { styles } from './sds-dialog.styles';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\n\ntype ClosedBy = 'none' | 'closerequest' | 'any';\n\nexport interface SDSDialogProps {\n\topen?: boolean;\n\t/**\n\t * Set if dialog opens as a modal or not\n\t *\n\t * If non-modal, the user is allowed to interact with content outside of the dialog.\n\t * If modal, the dialog is placed in the top layer with a ::backdrop pseudo-element.\n\t *\n\t * Docs:\n\t * - https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show\n\t * - https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal\n\t */\n\tmodal?: boolean;\n\t/**\n\t * Set what type of dismiss behavior closes the dialog\n\t * - 'none': Dialog can only be closed programmatically\n\t * - 'closerequest': Dialog closes on ESC key (default)\n\t * - 'any': Dialog closes on ESC key or clicking outside\n\t *\n\t * Docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\t */\n\tclosedby?: ClosedBy;\n\t'close-button-label'?: string;\n}\n\nexport class SDSDialogComponent extends SDSEventDispatcherMixin(LitElement) {\n\tstatic override styles = [styles];\n\n\t@property({ type: Boolean, reflect: true }) open: boolean = false;\n\t@property({ type: Boolean, reflect: true }) modal: boolean = false;\n\t@property({ type: String, reflect: true }) closedby: ClosedBy = 'closerequest';\n\t@property({ type: String, attribute: 'close-button-label' }) closeButtonLabel: string = 'Lukk dialogvindu';\n\n\t@query('dialog') private _dialog!: HTMLDialogElement;\n\n\t@state() private _isHeaderSlotEmpty: boolean = true;\n\n\t// Safari closedBy=any polyfill state\n\tprivate _pointerDownInside = false;\n\n\toverride firstUpdated(): void {\n\t\tthis._setupEventListeners();\n\t\tif (this.open) {\n\t\t\tthis._openDialog();\n\t\t}\n\t}\n\n\toverride updated(changedProperties: PropertyValues): void {\n\t\tif (!changedProperties.has('open')) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.open) {\n\t\t\tthis._openDialog();\n\t\t} else {\n\t\t\tthis._closeDialog();\n\t\t}\n\t}\n\n\tprivate _setupEventListeners(): void {\n\t\tthis._dialog.addEventListener('close', this._handleClose);\n\t\tthis._dialog.addEventListener('cancel', this._handleCancel);\n\t\tthis._dialog.addEventListener('click', this._handleClick);\n\t\tthis._dialog.addEventListener('pointerdown', this._handlePointerDown);\n\t\tthis._dialog.addEventListener('pointerup', this._handlePointerUp);\n\t\tthis._dialog.addEventListener('animationend', this._handleAutoFocus);\n\t}\n\n\tprivate _openDialog(): void {\n\t\tif (!this._dialog) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.modal) {\n\t\t\tthis._dialog.showModal();\n\t\t} else {\n\t\t\tthis._dialog.show();\n\t\t}\n\t}\n\n\tprivate _closeDialog(): void {\n\t\tif (!this._dialog) {\n\t\t\treturn;\n\t\t}\n\t\tthis._dialog.close();\n\t}\n\n\tprivate readonly _handleClose = (): void => {\n\t\tthis.open = false;\n\t\tthis.dispatchSheriffEvent('sds-close');\n\t};\n\n\tprivate readonly _handleClick = (event: MouseEvent): void => {\n\t\tconst target = event.target as Element | null;\n\n\t\tif (target?.closest('[data-command=\"close\"],[command=\"close\"]')) {\n\t\t\tthis._closeDialog();\n\t\t}\n\t};\n\n\t// Safari closedBy=\"any\" polyfill\n\t// Calculate whether the user's pointer down event is outside or inside dialog\n\t// If outside, close the dialog\n\tprivate readonly _handlePointerDown = (event: PointerEvent): void => {\n\t\tconst rect = this._dialog.getBoundingClientRect();\n\t\tconst { clientX: x, clientY: y } = event;\n\t\tthis._pointerDownInside = rect.top <= y && y <= rect.bottom && rect.left <= x && x <= rect.right;\n\t};\n\n\tprivate readonly _handlePointerUp = (event: PointerEvent): void => {\n\t\tconst wasDownInside = this._pointerDownInside;\n\t\tthis._pointerDownInside = false;\n\n\t\tif (this.closedby !== 'any' || wasDownInside) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Clicking the backdrop will have the dialog as the target in Safari/Chrome.\n\t\t// Firefox does not fire this callback when ::backdrop is clicked.\n\t\tif (event.target !== this._dialog) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Use requestAnimationFrame to let the browser handle native closedBy first.\n\t\t// This avoids checking for the closedBy property, which Safari 26.2 exposes\n\t\t// without implementing.\n\t\trequestAnimationFrame(() => {\n\t\t\tif (this._dialog && this._dialog.open) {\n\t\t\t\tthis._closeDialog();\n\t\t\t}\n\t\t});\n\t};\n\n\tprivate readonly _handleCancel = (event: Event): void => {\n\t\tif (this.closedby === 'none') {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\n\tprivate readonly _handleHeaderSlotChange = (event: Event): void => {\n\t\tconst slot = event.target as HTMLSlotElement;\n\t\tthis._isHeaderSlotEmpty = slot.assignedElements().length === 0;\n\t};\n\n\tprivate readonly _handleAutoFocus = (): void => {\n\t\t// slot:not([name]) finds the default nameless slot\n\t\tconst contentSlotElements = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])')?.assignedElements({ flatten: true });\n\t\tif (!contentSlotElements || contentSlotElements.length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst elementToFocus = contentSlotElements.find((element) => {\n\t\t\treturn element.getAttribute('autofocus') != null;\n\t\t});\n\n\t\tif (!(elementToFocus instanceof HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (document.activeElement !== elementToFocus) {\n\t\t\telementToFocus.focus();\n\t\t}\n\t};\n\n\tpublic show(): void {\n\t\tthis.open = true;\n\t}\n\n\tpublic showModal(): void {\n\t\tthis.modal = true;\n\t\tthis.open = true;\n\t}\n\n\tpublic close(): void {\n\t\tthis.open = false;\n\t}\n\n\tpublic requestClose(): void {\n\t\tif (!this._dialog) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._dialog.requestClose();\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<dialog .closedBy=\"${this.closedby}\" class=${this._isHeaderSlotEmpty ? 'sds-dialog__empty-header' : ''}>\n\t\t\t\t<div class=\"sds-dialog__header\">\n\t\t\t\t\t<slot name=\"header\" @slotchange=${this._handleHeaderSlotChange}></slot>\n\t\t\t\t\t${this.closeButtonLabel\n\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t<sds-button class=\"sds-dialog__close-button\" icon variant=\"tertiary\" size=\"md\" command=\"close\" label=\"${this.closeButtonLabel}\">\n\t\t\t\t\t\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"md\"></sds-icon>\n\t\t\t\t\t\t\t\t</sds-button>\n\t\t\t\t\t\t\t`\n\t\t\t\t\t\t: nothing}\n\t\t\t\t</div>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t</dialog>\n\t\t`;\n\t}\n}\n"]}

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

@@ -1,9 +1,12 @@
 import { test, expect } from '@playwright/test';
 test.describe('dialog-component', () => {
-    test.describe('commandfor', () => {
-        test.beforeEach(async ({ page }) => {
-            await page.goto('iframe.html?id=komponenter-dialog--dialog');
+    test.beforeEach(async ({ page }) => {
+        await page.goto('iframe.html?viewMode=docs&id=test-dialog--docs');
+        await page.evaluate(async () => {
+            await customElements.whenDefined('sds-dialog');
         });
+    });
+    test.describe('commandfor', () => {
         test('sets aria-haspopup on the trigger button', async ({ page }) => {
             const innerButton = page.locator('sds-button[commandfor="dialog-example"][command="show-modal"]').locator('button');
             await expect(innerButton).toHaveAttribute('aria-haspopup', 'dialog');
@@ -46,5 +49,16 @@ test.describe('dialog-component', () => {
             await expect(innerButton).toHaveAttribute('aria-expanded', 'false');
         });
     });
+    test.describe('also supports data-command', () => {
+        test('can open and close using data-command', async ({ page }) => {
+            const opener = page.locator('sds-button#trigger-data');
+            const closer = page.locator('sds-button#close-data');
+            const dialog = page.locator('sds-dialog#command-fixture-dialog');
+            await opener.click();
+            await expect(dialog).toHaveAttribute('open');
+            await closer.click();
+            await expect(dialog).not.toHaveAttribute('open');
+        });
+    });
 });
 //# sourceMappingURL=sds-dialog.spec.js.map

package/dist/sds-dialog/sds-dialog.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-dialog.spec.js","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test, expect } from '@playwright/test';\n\ntest.describe('dialog-component', () => {\n\ttest.describe('commandfor', () => {\n\t\ttest.beforeEach(async ({ page }) => {\n\t\t\tawait page.goto('iframe.html?id=komponenter-dialog--dialog');\n\t\t});\n\n\t\ttest('sets aria-haspopup on the trigger button', async ({ page }) => {\n\t\t\tconst innerButton = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]').locator('button');\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-haspopup', 'dialog');\n\t\t});\n\n\t\ttest('sets aria-controls on the trigger button', async ({ page }) => {\n\t\t\tconst innerButton = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]').locator('button');\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-controls', 'dialog-example');\n\t\t});\n\n\t\ttest('aria-expanded is false before opening', async ({ page }) => {\n\t\t\tconst innerButton = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]').locator('button');\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'false');\n\t\t});\n\n\t\ttest('clicking the trigger opens the dialog', async ({ page }) => {\n\t\t\tconst trigger = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]');\n\t\t\tconst dialog = page.locator('sds-dialog#dialog-example');\n\n\t\t\tawait trigger.click();\n\n\t\t\tawait expect(dialog).toHaveAttribute('open');\n\t\t});\n\n\t\ttest('aria-expanded is true when dialog is open', async ({ page }) => {\n\t\t\tconst trigger = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]');\n\t\t\tconst innerButton = trigger.locator('button');\n\n\t\t\tawait trigger.click();\n\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'true');\n\t\t});\n\n\t\ttest('closing via command=\"close\" resets aria-expanded', async ({ page }) => {\n\t\t\tconst trigger = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]');\n\t\t\tconst innerButton = trigger.locator('button');\n\n\t\t\tawait trigger.click();\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'true');\n\n\t\t\tconst closeButton = page.locator('sds-dialog#dialog-example sds-button[slot=\"footer\"][command=\"close\"]');\n\t\t\tawait closeButton.click();\n\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'false');\n\t\t});\n\n\t\ttest('closing via ESC resets aria-expanded', async ({ page }) => {\n\t\t\tconst trigger = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]');\n\t\t\tconst innerButton = trigger.locator('button');\n\n\t\t\tawait trigger.click();\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'true');\n\n\t\t\tawait page.keyboard.press('Escape');\n\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'false');\n\t\t});\n\t});\n});\n"]}
+{"version":3,"file":"sds-dialog.spec.js","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test, expect } from '@playwright/test';\n\ntest.describe('dialog-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto('iframe.html?viewMode=docs&id=test-dialog--docs');\n\n\t\tawait page.evaluate(async () => {\n\t\t\tawait customElements.whenDefined('sds-dialog');\n\t\t});\n\t});\n\n\ttest.describe('commandfor', () => {\n\t\ttest('sets aria-haspopup on the trigger button', async ({ page }) => {\n\t\t\tconst innerButton = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]').locator('button');\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-haspopup', 'dialog');\n\t\t});\n\n\t\ttest('sets aria-controls on the trigger button', async ({ page }) => {\n\t\t\tconst innerButton = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]').locator('button');\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-controls', 'dialog-example');\n\t\t});\n\n\t\ttest('aria-expanded is false before opening', async ({ page }) => {\n\t\t\tconst innerButton = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]').locator('button');\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'false');\n\t\t});\n\n\t\ttest('clicking the trigger opens the dialog', async ({ page }) => {\n\t\t\tconst trigger = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]');\n\t\t\tconst dialog = page.locator('sds-dialog#dialog-example');\n\n\t\t\tawait trigger.click();\n\n\t\t\tawait expect(dialog).toHaveAttribute('open');\n\t\t});\n\n\t\ttest('aria-expanded is true when dialog is open', async ({ page }) => {\n\t\t\tconst trigger = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]');\n\t\t\tconst innerButton = trigger.locator('button');\n\n\t\t\tawait trigger.click();\n\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'true');\n\t\t});\n\n\t\ttest('closing via command=\"close\" resets aria-expanded', async ({ page }) => {\n\t\t\tconst trigger = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]');\n\t\t\tconst innerButton = trigger.locator('button');\n\n\t\t\tawait trigger.click();\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'true');\n\n\t\t\tconst closeButton = page.locator('sds-dialog#dialog-example sds-button[slot=\"footer\"][command=\"close\"]');\n\t\t\tawait closeButton.click();\n\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'false');\n\t\t});\n\n\t\ttest('closing via ESC resets aria-expanded', async ({ page }) => {\n\t\t\tconst trigger = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]');\n\t\t\tconst innerButton = trigger.locator('button');\n\n\t\t\tawait trigger.click();\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'true');\n\n\t\t\tawait page.keyboard.press('Escape');\n\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'false');\n\t\t});\n\t});\n\n\ttest.describe('also supports data-command', () => {\n\t\ttest('can open and close using data-command', async ({ page }) => {\n\t\t\tconst opener = page.locator('sds-button#trigger-data');\n\t\t\tconst closer = page.locator('sds-button#close-data');\n\t\t\tconst dialog = page.locator('sds-dialog#command-fixture-dialog');\n\n\t\t\tawait opener.click();\n\t\t\tawait expect(dialog).toHaveAttribute('open');\n\n\t\t\tawait closer.click();\n\t\t\tawait expect(dialog).not.toHaveAttribute('open');\n\t\t});\n\t});\n});\n"]}

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

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

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

@@ -7,12 +7,15 @@ export const styles = css `
 		--_sds-heading-margin: var(--sds-heading-margin, 0);
 		--_sds-heading-padding: var(--sds-heading-padding, 0);
 		--_sds-heading-text-align: var(--sds-heading-text-align, left);
+		--_sds-heading-text-decoration: var(--sds-heading-text-decoration, inherit);
+		--_sds-heading-text-decoration-thickness: var(--sds-heading-text-decoration-thickness, var(--sds-typography-link-text-decoration-thickness));
+		--_sds-heading-text-underline-offset: var(--sds-heading-text-underline-offset, var(--sds-typography-link-text-underline-offset));
 
 		--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-mobile-font-size));
 		--_sds-heading-font-weight: var(--sds-heading-font-weight, var(--sds-typography-font-weight-bold));
 		--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-mobile-line-height));
 
-		display: inline-block;
+		display: block;
 	}
 
 	:host([data-palette]) {
@@ -27,7 +30,7 @@ export const styles = css `
 	h6,
 	.sds-heading {
 		color: var(--_sds-heading-text-color);
-		display: inline-block;
+		display: inherit;
 		font-family: var(--_sds-heading-font-family);
 		font-size: var(--_sds-heading-font-size);
 		font-weight: var(--_sds-heading-font-weight);
@@ -36,6 +39,9 @@ export const styles = css `
 		max-width: var(--_sds-heading-max-line-width);
 		padding: var(--_sds-heading-padding);
 		text-align: var(--_sds-heading-text-align);
+		text-decoration: var(--_sds-heading-text-decoration);
+		text-decoration-thickness: var(--_sds-heading-text-decoration-thickness);
+		text-underline-offset: var(--_sds-heading-text-underline-offset);
 	}
 
 	h1,

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

@@ -1 +1 @@
-{"version":3,"file":"sds-heading.styles.js","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-heading-font-family: var(--sds-heading-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-heading-text-color: var(--sds-heading-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-heading-max-line-width: var(--sds-heading-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-heading-margin: var(--sds-heading-margin, 0);\n\t\t--_sds-heading-padding: var(--sds-heading-padding, 0);\n\t\t--_sds-heading-text-align: var(--sds-heading-text-align, left);\n\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-mobile-font-size));\n\t\t--_sds-heading-font-weight: var(--sds-heading-font-weight, var(--sds-typography-font-weight-bold));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-mobile-line-height));\n\n\t\tdisplay: inline-block;\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-heading-text-color: var(--sds-heading-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t}\n\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\t.sds-heading {\n\t\tcolor: var(--_sds-heading-text-color);\n\t\tdisplay: inline-block;\n\t\tfont-family: var(--_sds-heading-font-family);\n\t\tfont-size: var(--_sds-heading-font-size);\n\t\tfont-weight: var(--_sds-heading-font-weight);\n\t\tline-height: var(--_sds-heading-line-height);\n\t\tmargin: var(--_sds-heading-margin);\n\t\tmax-width: var(--_sds-heading-max-line-width);\n\t\tpadding: var(--_sds-heading-padding);\n\t\ttext-align: var(--_sds-heading-text-align);\n\t}\n\n\th1,\n\t.sds-heading--xl {\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-mobile-font-size));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-mobile-line-height));\n\t}\n\n\t@media (min-width: 640px) {\n\t\th1,\n\t\t.sds-heading--xl {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-tablet-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-tablet-line-height));\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\th1,\n\t\t.sds-heading--xl {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-desktop-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-desktop-line-height));\n\t\t}\n\t}\n\n\th2,\n\t.sds-heading--lg {\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-lg-mobile-font-size));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-lg-mobile-line-height));\n\t}\n\n\t@media (min-width: 640px) {\n\t\th2,\n\t\t.sds-heading--lg {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-lg-tablet-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-lg-tablet-line-height));\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\th2,\n\t\t.sds-heading--lg {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-lg-desktop-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-lg-desktop-line-height));\n\t\t}\n\t}\n\n\th3,\n\t.sds-heading--md {\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-md-mobile-font-size));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-md-mobile-line-height));\n\t}\n\n\t@media (min-width: 640px) {\n\t\th3,\n\t\t.sds-heading--md {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-md-tablet-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-md-tablet-line-height));\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\th3,\n\t\t.sds-heading--md {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-md-desktop-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-md-desktop-line-height));\n\t\t}\n\t}\n\n\th4,\n\t.sds-heading--sm {\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-sm-mobile-font-size));\n\t\t--_sds-heading-font-weight: var(--sds-heading-font-weight, var(--sds-typography-font-weight-semibold));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-sm-mobile-line-height));\n\t}\n\n\t@media (min-width: 640px) {\n\t\th4,\n\t\t.sds-heading--sm {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-sm-tablet-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-sm-tablet-line-height));\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\th4,\n\t\t.sds-heading--sm {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-sm-desktop-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-sm-desktop-line-height));\n\t\t}\n\t}\n\n\th5,\n\th6,\n\t.sds-heading--xs {\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xs-mobile-font-size));\n\t\t--_sds-heading-font-weight: var(--sds-heading-font-weight, var(--sds-typography-font-weight-semibold));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xs-mobile-line-height));\n\t}\n\n\t@media (min-width: 640px) {\n\t\th5,\n\t\th6,\n\t\t.sds-heading--xs {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xs-tablet-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xs-tablet-line-height));\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\th5,\n\t\th6,\n\t\t.sds-heading--xs {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xs-desktop-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xs-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}
+{"version":3,"file":"sds-heading.styles.js","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+JxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-heading-font-family: var(--sds-heading-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-heading-text-color: var(--sds-heading-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-heading-max-line-width: var(--sds-heading-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-heading-margin: var(--sds-heading-margin, 0);\n\t\t--_sds-heading-padding: var(--sds-heading-padding, 0);\n\t\t--_sds-heading-text-align: var(--sds-heading-text-align, left);\n\t\t--_sds-heading-text-decoration: var(--sds-heading-text-decoration, inherit);\n\t\t--_sds-heading-text-decoration-thickness: var(--sds-heading-text-decoration-thickness, var(--sds-typography-link-text-decoration-thickness));\n\t\t--_sds-heading-text-underline-offset: var(--sds-heading-text-underline-offset, var(--sds-typography-link-text-underline-offset));\n\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-mobile-font-size));\n\t\t--_sds-heading-font-weight: var(--sds-heading-font-weight, var(--sds-typography-font-weight-bold));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-mobile-line-height));\n\n\t\tdisplay: block;\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-heading-text-color: var(--sds-heading-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t}\n\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\t.sds-heading {\n\t\tcolor: var(--_sds-heading-text-color);\n\t\tdisplay: inherit;\n\t\tfont-family: var(--_sds-heading-font-family);\n\t\tfont-size: var(--_sds-heading-font-size);\n\t\tfont-weight: var(--_sds-heading-font-weight);\n\t\tline-height: var(--_sds-heading-line-height);\n\t\tmargin: var(--_sds-heading-margin);\n\t\tmax-width: var(--_sds-heading-max-line-width);\n\t\tpadding: var(--_sds-heading-padding);\n\t\ttext-align: var(--_sds-heading-text-align);\n\t\ttext-decoration: var(--_sds-heading-text-decoration);\n\t\ttext-decoration-thickness: var(--_sds-heading-text-decoration-thickness);\n\t\ttext-underline-offset: var(--_sds-heading-text-underline-offset);\n\t}\n\n\th1,\n\t.sds-heading--xl {\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-mobile-font-size));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-mobile-line-height));\n\t}\n\n\t@media (min-width: 640px) {\n\t\th1,\n\t\t.sds-heading--xl {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-tablet-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-tablet-line-height));\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\th1,\n\t\t.sds-heading--xl {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xl-desktop-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xl-desktop-line-height));\n\t\t}\n\t}\n\n\th2,\n\t.sds-heading--lg {\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-lg-mobile-font-size));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-lg-mobile-line-height));\n\t}\n\n\t@media (min-width: 640px) {\n\t\th2,\n\t\t.sds-heading--lg {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-lg-tablet-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-lg-tablet-line-height));\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\th2,\n\t\t.sds-heading--lg {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-lg-desktop-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-lg-desktop-line-height));\n\t\t}\n\t}\n\n\th3,\n\t.sds-heading--md {\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-md-mobile-font-size));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-md-mobile-line-height));\n\t}\n\n\t@media (min-width: 640px) {\n\t\th3,\n\t\t.sds-heading--md {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-md-tablet-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-md-tablet-line-height));\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\th3,\n\t\t.sds-heading--md {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-md-desktop-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-md-desktop-line-height));\n\t\t}\n\t}\n\n\th4,\n\t.sds-heading--sm {\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-sm-mobile-font-size));\n\t\t--_sds-heading-font-weight: var(--sds-heading-font-weight, var(--sds-typography-font-weight-semibold));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-sm-mobile-line-height));\n\t}\n\n\t@media (min-width: 640px) {\n\t\th4,\n\t\t.sds-heading--sm {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-sm-tablet-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-sm-tablet-line-height));\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\th4,\n\t\t.sds-heading--sm {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-sm-desktop-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-sm-desktop-line-height));\n\t\t}\n\t}\n\n\th5,\n\th6,\n\t.sds-heading--xs {\n\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xs-mobile-font-size));\n\t\t--_sds-heading-font-weight: var(--sds-heading-font-weight, var(--sds-typography-font-weight-semibold));\n\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xs-mobile-line-height));\n\t}\n\n\t@media (min-width: 640px) {\n\t\th5,\n\t\th6,\n\t\t.sds-heading--xs {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xs-tablet-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xs-tablet-line-height));\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\th5,\n\t\th6,\n\t\t.sds-heading--xs {\n\t\t\t--_sds-heading-font-size: var(--sds-heading-font-size, var(--sds-typography-heading-xs-desktop-font-size));\n\t\t\t--_sds-heading-line-height: var(--sds-heading-line-height, var(--sds-typography-heading-xs-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import './assets/positioning.js';
+import '../shared/positioning.js';
 type SDSPopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'none';
 type SDSPopoverAutoPlacement = 'true' | 'false';
 type SDSPopoverOverscroll = 'contain';
@@ -14,6 +14,8 @@ export declare class SDSPopover extends LitElement {
     autoPlacement: SDSPopoverProps['autoPlacement'];
     overscroll: SDSPopoverProps['overscroll'];
     connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private syncDataAttributes;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"sds-popover.d.ts","sourceRoot":"","sources":["../../src/sds-popover/sds-popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,yBAAyB,CAAC;AAEjC,KAAK,mBAAmB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AACxE,KAAK,uBAAuB,GAAG,MAAM,GAAG,OAAO,CAAC;AAChD,KAAK,oBAAoB,GAAG,SAAS,CAAC;AAEtC,MAAM,WAAW,eAAe;IAC/B,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,UAAU,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAAY;IAGlC,SAAS,EAAE,eAAe,CAAC,WAAW,CAAC,CAAS;IAGhD,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAa;IAG5D,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAa;IAE7C,iBAAiB,IAAI,IAAI;IASzB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
+{"version":3,"file":"sds-popover.d.ts","sourceRoot":"","sources":["../../src/sds-popover/sds-popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,0BAA0B,CAAC;AAElC,KAAK,mBAAmB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AACxE,KAAK,uBAAuB,GAAG,MAAM,GAAG,OAAO,CAAC;AAChD,KAAK,oBAAoB,GAAG,SAAS,CAAC;AAEtC,MAAM,WAAW,eAAe;IAC/B,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,UAAU,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAAY;IAGlC,SAAS,EAAE,eAAe,CAAC,WAAW,CAAC,CAAS;IAGhD,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAa;IAG5D,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAa;IAE7C,iBAAiB,IAAI,IAAI;IAUzB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAM9C,OAAO,CAAC,kBAAkB;IAMjB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

package/dist/sds-popover/sds-popover.js

@@ -8,7 +8,7 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { guardedCustomElement } from '../utils/guarded-custom-element';
 import { styles } from './sds-popover.styles';
-import './assets/positioning.js';
+import '../shared/positioning.js';
 let SDSPopover = class SDSPopover extends LitElement {
     constructor() {
         super(...arguments);
@@ -21,6 +21,20 @@ let SDSPopover = class SDSPopover extends LitElement {
         if (!this.hasAttribute('popover')) {
             this.setAttribute('popover', 'auto');
         }
+        this.syncDataAttributes();
+    }
+    updated(changed) {
+        if (changed.has('placement') || changed.has('autoPlacement') || changed.has('overscroll')) {
+            this.syncDataAttributes();
+        }
+    }
+    syncDataAttributes() {
+        if (this.placement)
+            this.dataset.placement = this.placement;
+        if (this.autoPlacement)
+            this.dataset.autoplacement = this.autoPlacement;
+        if (this.overscroll)
+            this.dataset.overscroll = this.overscroll;
     }
     render() {
         return html `<slot></slot>`;
@@ -28,13 +42,13 @@ let SDSPopover = class SDSPopover extends LitElement {
 };
 SDSPopover.styles = [styles];
 __decorate([
-    property({ type: String, attribute: 'data-placement', reflect: true })
+    property({ type: String, reflect: true })
 ], SDSPopover.prototype, "placement", void 0);
 __decorate([
-    property({ type: String, attribute: 'data-autoplacement', reflect: true })
+    property({ type: String, reflect: true })
 ], SDSPopover.prototype, "autoPlacement", void 0);
 __decorate([
-    property({ type: String, attribute: 'data-overscroll', reflect: true })
+    property({ type: String, reflect: true })
 ], SDSPopover.prototype, "overscroll", void 0);
 SDSPopover = __decorate([
     guardedCustomElement('sds-popover')

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

@@ -1 +1 @@
-{"version":3,"file":"sds-popover.js","sourceRoot":"","sources":["../../src/sds-popover/sds-popover.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,yBAAyB,CAAC;AAa1B,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIN,cAAS,GAAiC,KAAK,CAAC;QAGhD,kBAAa,GAAqC,SAAS,CAAC;QAG5D,eAAU,GAAkC,SAAS,CAAC;IAcvD,CAAC;IAZS,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;QACtC,CAAC;IAEF,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA,eAAe,CAAC;IAC5B,CAAC;;AAtBe,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACvB;AAGhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACf;AAG5D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAClB;AAV1C,UAAU;IADtB,oBAAoB,CAAC,aAAa,CAAC;GACvB,UAAU,CAwBtB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-popover.styles';\nimport './assets/positioning.js';\n\ntype SDSPopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'none';\ntype SDSPopoverAutoPlacement = 'true' | 'false';\ntype SDSPopoverOverscroll = 'contain';\n\nexport interface SDSPopoverProps {\n\tplacement?: SDSPopoverPlacement;\n\tautoPlacement?: SDSPopoverAutoPlacement;\n\toverscroll?: SDSPopoverOverscroll;\n}\n\n@guardedCustomElement('sds-popover')\nexport class SDSPopover extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, attribute: 'data-placement', reflect: true })\n\tplacement: SDSPopoverProps['placement'] = 'top';\n\n\t@property({ type: String, attribute: 'data-autoplacement', reflect: true })\n\tautoPlacement: SDSPopoverProps['autoPlacement'] = undefined;\n\n\t@property({ type: String, attribute: 'data-overscroll', reflect: true })\n\toverscroll: SDSPopoverProps['overscroll'] = undefined;\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\n\t\tif (!this.hasAttribute('popover')) {\n\t\t\tthis.setAttribute('popover', 'auto');\n\t\t}\n\n\t}\n\n\toverride render() {\n\t\treturn html`<slot></slot>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-popover': SDSPopover;\n\t}\n}\n"]}
+{"version":3,"file":"sds-popover.js","sourceRoot":"","sources":["../../src/sds-popover/sds-popover.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,0BAA0B,CAAC;AAa3B,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIN,cAAS,GAAiC,KAAK,CAAC;QAGhD,kBAAa,GAAqC,SAAS,CAAC;QAG5D,eAAU,GAAkC,SAAS,CAAC;IA2BvD,CAAC;IAzBS,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;QACtC,CAAC;QAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC3B,CAAC;IAEQ,OAAO,CAAC,OAA6B;QAC7C,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YAC3F,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC3B,CAAC;IACF,CAAC;IAEO,kBAAkB;QACzB,IAAI,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5D,IAAI,IAAI,CAAC,aAAa;YAAE,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACxE,IAAI,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IAChE,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA,eAAe,CAAC;IAC5B,CAAC;;AAnCe,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACM;AAGhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACkB;AAG5D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACY;AAV1C,UAAU;IADtB,oBAAoB,CAAC,aAAa,CAAC;GACvB,UAAU,CAqCtB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-popover.styles';\nimport '../shared/positioning.js';\n\ntype SDSPopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'none';\ntype SDSPopoverAutoPlacement = 'true' | 'false';\ntype SDSPopoverOverscroll = 'contain';\n\nexport interface SDSPopoverProps {\n\tplacement?: SDSPopoverPlacement;\n\tautoPlacement?: SDSPopoverAutoPlacement;\n\toverscroll?: SDSPopoverOverscroll;\n}\n\n@guardedCustomElement('sds-popover')\nexport class SDSPopover extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true })\n\tplacement: SDSPopoverProps['placement'] = 'top';\n\n\t@property({ type: String, reflect: true })\n\tautoPlacement: SDSPopoverProps['autoPlacement'] = undefined;\n\n\t@property({ type: String, reflect: true })\n\toverscroll: SDSPopoverProps['overscroll'] = undefined;\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\n\t\tif (!this.hasAttribute('popover')) {\n\t\t\tthis.setAttribute('popover', 'auto');\n\t\t}\n\n\t\tthis.syncDataAttributes();\n\t}\n\n\toverride updated(changed: Map<string, unknown>) {\n\t\tif (changed.has('placement') || changed.has('autoPlacement') || changed.has('overscroll')) {\n\t\t\tthis.syncDataAttributes();\n\t\t}\n\t}\n\n\tprivate syncDataAttributes() {\n\t\tif (this.placement) this.dataset.placement = this.placement;\n\t\tif (this.autoPlacement) this.dataset.autoplacement = this.autoPlacement;\n\t\tif (this.overscroll) this.dataset.overscroll = this.overscroll;\n\t}\n\n\toverride render() {\n\t\treturn html`<slot></slot>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-popover': SDSPopover;\n\t}\n}\n"]}

package/dist/sds-process-step/sds-process-step.styles.d.ts.map

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

package/dist/sds-process-step/sds-process-step.styles.js

@@ -20,6 +20,8 @@ export const styles = css `
 
 		--_sds-process-step-line-display: var(--sds-process-step-line-display, block);
 		--_sds-process-step-line-min-height: var(--sds-process-step-line-min-height, 2rem);
+		--_sds-process-step-line-width: var(--sds-process-step-line-width, 1px);
+		--_sds-process-step-line-color: var(--sds-process-step-line-color, var(--sds-color-neutral-border-subtle));
 
 		--_sds-process-step-heading-color: var(--sds-process-step-heading-color, var(--sds-color-neutral-text-default));
 		--_sds-process-step-heading-font-weight: var(--sds-process-step-heading-font-weight, var(--sds-typography-body-sm-strong-desktop-font-weight));
@@ -84,6 +86,7 @@ export const styles = css `
 		place-items: center;
 		line-height: 1;
 		display: inline-grid;
+		z-index: 2;
 	}
 
 	.sds-process-step__content {
@@ -92,14 +95,15 @@ export const styles = css `
 
 	.sds-process-step__line {
 		display: var(--_sds-process-step-line-display);
-		border: calc(var(--_sds-process-step-border-width) / 2) solid var(--_sds-process-step-border-color);
+		background-color: var(--_sds-process-step-line-color);
 		grid-column: 1;
 		justify-self: center;
-		width: 0;
+		width: var(--_sds-process-step-line-width);
 		min-height: var(--_sds-process-step-line-min-height);
 		grid-row: line-2;
 		position: relative;
 		top: var(--_sds-process-step-border-width);
+		z-index: 1;
 	}
 
 	.sds-process-step__heading {

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

@@ -1 +1 @@
-{"version":3,"file":"sds-process-step.styles.js","sourceRoot":"","sources":["../../src/sds-process-step/sds-process-step.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-process-step-border-width: var(--sds-process-step-border-width, 2px);\n\t\t--_sds-process-step-border-color: var(--sds-process-step-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-process-step-marker-sm: var(--sds-process-step-marker-sm, 1rem);\n\t\t--_sds-process-step-marker-lg: var(--sds-process-step-marker-lg, 2rem);\n\t\t--_sds-process-step-marker-size: var(--_sds-process-step-marker-lg);\n\t\t--_sds-process-step-marker-base: var(--sds-process-step-marker-base, 2rem);\n\t\t--_sds-process-step-marker-text-color: var(--sds-process-step-marker-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-process-step-marker-background: var(--sds-process-step-marker-background, var(--sds-color-action-contrast-subtle, var(--sds-color-main-action-contrast-subtle)));\n\t\t--_sds-process-step-marker-margin-block-start: var(--sds-process-step-marker-margin-block-start, calc((var(--_sds-process-step-marker-lg) - var(--_sds-process-step-marker-sm)) / 2));\n\t\t--_sds-process-step-marker-border-radius: var(--sds-process-step-marker-border-radius, var(--sds-radius-full));\n\t\t--_sds-process-step-grid-template-rows: var(--sds-process-step-grid-template-rows, [line-1] auto [step-start] var(--_sds-process-step-marker-size) [line-2 step-end] auto);\n\t\t--_sds-process-step-grid-template-columns: var(--sds-process-step-grid-template-columns, var(--_sds-process-step-marker-base) auto);\n\t\t--_sds-process-step-sub-step-margin-block-start: var(--sds-process-step-sub-step-margin-block-start, calc((var(--_sds-process-step-marker-sm) / 2) * -1));\n\n\t\t--_sds-process-step-item-grid-template-columns: var(--sds-process-step-item-grid-template-columns, [marker] var(--_sds-process-step-marker-base) [content] auto);\n\t\t--_sds-process-step-item-grid-area: var(--sds-process-step-item-grid-area, 2 / 1 / -1 / -1);\n\n\t\t--_sds-process-step-line-display: var(--sds-process-step-line-display, block);\n\t\t--_sds-process-step-line-min-height: var(--sds-process-step-line-min-height, 2rem);\n\n\t\t--_sds-process-step-heading-color: var(--sds-process-step-heading-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-process-step-heading-font-weight: var(--sds-process-step-heading-font-weight, var(--sds-typography-body-sm-strong-desktop-font-weight));\n\t\t--_sds-process-step-heading-font-size: var(--sds-process-step-heading-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t--_sds-process-step-heading-line-height: var(--sds-process-step-heading-line-height, var(--sds-typography-body-md-strong-desktop-line-height));\n\t\t--_sds-process-step-heading-padding-block: var(--sds-process-step-heading-padding-block, var(--sds-spacing-3xs));\n\t\t--_sds-process-step-heading-margin-block: var(--sds-process-step-heading-margin-block, 0);\n\n\t\t--_sds-process-step-timestamp-color: var(--sds-process-step-timestamp-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-process-step-timestamp-font-weight: var(--sds-process-step-timestamp-font-weight, var(--sds-typography-body-sm-desktop-font-weight));\n\t\t--_sds-process-step-timestamp-font-size: var(--sds-process-step-timestamp-font-size, var(--sds-typography-body-sm-desktop-font-size));\n\t\t--_sds-process-step-timestamp-line-height: var(--sds-process-step-timestamp-line-height, var(--sds-typography-body-sm-desktop-line-height));\n\t\t--_sds-process-step-timestamp-padding-block-start: var(--sds-process-step-timestamp-padding-block-start, var(--sds-spacing-zero));\n\t\t--_sds-process-step-timestamp-padding-block-end: var(--sds-process-step-timestamp-padding-block-end, var(--sds-spacing-3xs));\n\n\t\t--_sds-process-step-slot-content-padding-block: var(--sds-process-step-slot-content-padding-block, var(--sds-spacing-zero));\n\n\t\t--sds-icon-color: var(--_sds-process-step-marker-text-color);\n\t}\n\n\t.sds-process-step {\n\t\tdisplay: grid;\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tgrid-template-rows: var(--_sds-process-step-grid-template-rows);\n\t\tgrid-template-columns: var(--_sds-process-step-grid-template-columns);\n\t\tjustify-items: flex-start;\n\t}\n\n\t.sds-process-step--sub-step {\n\t\t--_sds-process-step-marker-background: var(--sds-process-step-marker-background, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-process-step-marker-size: var(--_sds-process-step-marker-sm);\n\t\t--_sds-process-step-grid-template-rows: var(--sds-process-step-grid-template-rows, [line-1] auto [step-start] var(--_sds-process-step-marker-size) [line-2 step-end] auto);\n\t\tmargin-block-start: var(--_sds-process-step-sub-step-margin-block-start);\n\n\t\t.sds-process-step__marker {\n\t\t\tmargin-block-start: var(--_sds-process-step-marker-margin-block-start);\n\t\t}\n\t}\n\n\t.sds-process-step__item {\n\t\tgrid-area: var(--_sds-process-step-item-grid-area);\n\t\tgrid-template-columns: var(--_sds-process-step-item-grid-template-columns);\n\t\tgap: var(--sds-spacing-xs);\n\t\tpadding: var(--_sds-process-step-border-width);\n\t\tmargin: calc(var(--_sds-process-step-border-width) * -1) calc(var(--_sds-process-step-border-width) * -1) var(--sds-spacing-sm);\n\t\tjustify-content: flex-start;\n\t\twidth: 100%;\n\t\tdisplay: grid;\n\t}\n\n\t.sds-process-step__marker {\n\t\twidth: var(--_sds-process-step-marker-size);\n\t\theight: var(--_sds-process-step-marker-size);\n\t\tborder-radius: var(--_sds-process-step-marker-border-radius);\n\t\tborder: var(--_sds-process-step-border-width) solid;\n\t\tcolor: var(--_sds-process-step-marker-text-color);\n\t\tbackground-color: var(--_sds-process-step-marker-background);\n\t\tborder-color: var(--_sds-process-step-border-color);\n\t\tfont-weight: var(--sds-typography-body-sm-strong-desktop-font-weight);\n\t\tgrid-column: marker;\n\t\tplace-self: baseline center;\n\t\tplace-items: center;\n\t\tline-height: 1;\n\t\tdisplay: inline-grid;\n\t}\n\n\t.sds-process-step__content {\n\t\tgrid-column: content;\n\t}\n\n\t.sds-process-step__line {\n\t\tdisplay: var(--_sds-process-step-line-display);\n\t\tborder: calc(var(--_sds-process-step-border-width) / 2) solid var(--_sds-process-step-border-color);\n\t\tgrid-column: 1;\n\t\tjustify-self: center;\n\t\twidth: 0;\n\t\tmin-height: var(--_sds-process-step-line-min-height);\n\t\tgrid-row: line-2;\n\t\tposition: relative;\n\t\ttop: var(--_sds-process-step-border-width);\n\t}\n\n\t.sds-process-step__heading {\n\t\tcolor: var(--_sds-process-step-heading-color);\n\t\tfont-weight: var(--_sds-process-step-heading-font-weight);\n\t\tfont-size: var(--_sds-process-step-heading-font-size);\n\t\tline-height: var(--_sds-process-step-heading-line-height);\n\t\tpadding-block: var(--_sds-process-step-heading-padding-block);\n\t\tmargin-block: var(--_sds-process-step-heading-margin-block);\n\t}\n\n\t.sds-process-step__timestamp {\n\t\tcolor: var(--_sds-process-step-timestamp-color);\n\t\tfont-weight: var(--_sds-process-step-timestamp-font-weight);\n\t\tfont-size: var(--_sds-process-step-timestamp-font-size);\n\t\tline-height: var(--_sds-process-step-timestamp-line-height);\n\t\tpadding-block-start: var(--_sds-process-step-timestamp-padding-block-start);\n\t\tpadding-block-end: var(--_sds-process-step-timestamp-padding-block-end);\n\n\t\t&:first-child {\n\t\t\t--_sds-process-step-timestamp-padding-block-start: var(--sds-process-step-timestamp-padding-block-start, var(--sds-spacing-3xs));\n\t\t}\n\n\t\t&:empty {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t.sds-process-step__slot-content {\n\t\tpadding-block: var(--_sds-process-step-slot-content-padding-block);\n\n\t\t&:first-child {\n\t\t\t--_sds-process-step-slot-content-padding-block: var(--sds-process-step-slot-content-padding-block, var(--sds-spacing-3xs));\n\t\t}\n\t}\n\n\t:host(:last-of-type) {\n\t\t--_sds-process-step-line-display: none;\n\t}\n`;\n"]}
+{"version":3,"file":"sds-process-step.styles.js","sourceRoot":"","sources":["../../src/sds-process-step/sds-process-step.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-process-step-border-width: var(--sds-process-step-border-width, 2px);\n\t\t--_sds-process-step-border-color: var(--sds-process-step-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-process-step-marker-sm: var(--sds-process-step-marker-sm, 1rem);\n\t\t--_sds-process-step-marker-lg: var(--sds-process-step-marker-lg, 2rem);\n\t\t--_sds-process-step-marker-size: var(--_sds-process-step-marker-lg);\n\t\t--_sds-process-step-marker-base: var(--sds-process-step-marker-base, 2rem);\n\t\t--_sds-process-step-marker-text-color: var(--sds-process-step-marker-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-process-step-marker-background: var(--sds-process-step-marker-background, var(--sds-color-action-contrast-subtle, var(--sds-color-main-action-contrast-subtle)));\n\t\t--_sds-process-step-marker-margin-block-start: var(--sds-process-step-marker-margin-block-start, calc((var(--_sds-process-step-marker-lg) - var(--_sds-process-step-marker-sm)) / 2));\n\t\t--_sds-process-step-marker-border-radius: var(--sds-process-step-marker-border-radius, var(--sds-radius-full));\n\t\t--_sds-process-step-grid-template-rows: var(--sds-process-step-grid-template-rows, [line-1] auto [step-start] var(--_sds-process-step-marker-size) [line-2 step-end] auto);\n\t\t--_sds-process-step-grid-template-columns: var(--sds-process-step-grid-template-columns, var(--_sds-process-step-marker-base) auto);\n\t\t--_sds-process-step-sub-step-margin-block-start: var(--sds-process-step-sub-step-margin-block-start, calc((var(--_sds-process-step-marker-sm) / 2) * -1));\n\n\t\t--_sds-process-step-item-grid-template-columns: var(--sds-process-step-item-grid-template-columns, [marker] var(--_sds-process-step-marker-base) [content] auto);\n\t\t--_sds-process-step-item-grid-area: var(--sds-process-step-item-grid-area, 2 / 1 / -1 / -1);\n\n\t\t--_sds-process-step-line-display: var(--sds-process-step-line-display, block);\n\t\t--_sds-process-step-line-min-height: var(--sds-process-step-line-min-height, 2rem);\n\t\t--_sds-process-step-line-width: var(--sds-process-step-line-width, 1px);\n\t\t--_sds-process-step-line-color: var(--sds-process-step-line-color, var(--sds-color-neutral-border-subtle));\n\n\t\t--_sds-process-step-heading-color: var(--sds-process-step-heading-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-process-step-heading-font-weight: var(--sds-process-step-heading-font-weight, var(--sds-typography-body-sm-strong-desktop-font-weight));\n\t\t--_sds-process-step-heading-font-size: var(--sds-process-step-heading-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t--_sds-process-step-heading-line-height: var(--sds-process-step-heading-line-height, var(--sds-typography-body-md-strong-desktop-line-height));\n\t\t--_sds-process-step-heading-padding-block: var(--sds-process-step-heading-padding-block, var(--sds-spacing-3xs));\n\t\t--_sds-process-step-heading-margin-block: var(--sds-process-step-heading-margin-block, 0);\n\n\t\t--_sds-process-step-timestamp-color: var(--sds-process-step-timestamp-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-process-step-timestamp-font-weight: var(--sds-process-step-timestamp-font-weight, var(--sds-typography-body-sm-desktop-font-weight));\n\t\t--_sds-process-step-timestamp-font-size: var(--sds-process-step-timestamp-font-size, var(--sds-typography-body-sm-desktop-font-size));\n\t\t--_sds-process-step-timestamp-line-height: var(--sds-process-step-timestamp-line-height, var(--sds-typography-body-sm-desktop-line-height));\n\t\t--_sds-process-step-timestamp-padding-block-start: var(--sds-process-step-timestamp-padding-block-start, var(--sds-spacing-zero));\n\t\t--_sds-process-step-timestamp-padding-block-end: var(--sds-process-step-timestamp-padding-block-end, var(--sds-spacing-3xs));\n\n\t\t--_sds-process-step-slot-content-padding-block: var(--sds-process-step-slot-content-padding-block, var(--sds-spacing-zero));\n\n\t\t--sds-icon-color: var(--_sds-process-step-marker-text-color);\n\t}\n\n\t.sds-process-step {\n\t\tdisplay: grid;\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tgrid-template-rows: var(--_sds-process-step-grid-template-rows);\n\t\tgrid-template-columns: var(--_sds-process-step-grid-template-columns);\n\t\tjustify-items: flex-start;\n\t}\n\n\t.sds-process-step--sub-step {\n\t\t--_sds-process-step-marker-background: var(--sds-process-step-marker-background, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-process-step-marker-size: var(--_sds-process-step-marker-sm);\n\t\t--_sds-process-step-grid-template-rows: var(--sds-process-step-grid-template-rows, [line-1] auto [step-start] var(--_sds-process-step-marker-size) [line-2 step-end] auto);\n\t\tmargin-block-start: var(--_sds-process-step-sub-step-margin-block-start);\n\n\t\t.sds-process-step__marker {\n\t\t\tmargin-block-start: var(--_sds-process-step-marker-margin-block-start);\n\t\t}\n\t}\n\n\t.sds-process-step__item {\n\t\tgrid-area: var(--_sds-process-step-item-grid-area);\n\t\tgrid-template-columns: var(--_sds-process-step-item-grid-template-columns);\n\t\tgap: var(--sds-spacing-xs);\n\t\tpadding: var(--_sds-process-step-border-width);\n\t\tmargin: calc(var(--_sds-process-step-border-width) * -1) calc(var(--_sds-process-step-border-width) * -1) var(--sds-spacing-sm);\n\t\tjustify-content: flex-start;\n\t\twidth: 100%;\n\t\tdisplay: grid;\n\t}\n\n\t.sds-process-step__marker {\n\t\twidth: var(--_sds-process-step-marker-size);\n\t\theight: var(--_sds-process-step-marker-size);\n\t\tborder-radius: var(--_sds-process-step-marker-border-radius);\n\t\tborder: var(--_sds-process-step-border-width) solid;\n\t\tcolor: var(--_sds-process-step-marker-text-color);\n\t\tbackground-color: var(--_sds-process-step-marker-background);\n\t\tborder-color: var(--_sds-process-step-border-color);\n\t\tfont-weight: var(--sds-typography-body-sm-strong-desktop-font-weight);\n\t\tgrid-column: marker;\n\t\tplace-self: baseline center;\n\t\tplace-items: center;\n\t\tline-height: 1;\n\t\tdisplay: inline-grid;\n\t\tz-index: 2;\n\t}\n\n\t.sds-process-step__content {\n\t\tgrid-column: content;\n\t}\n\n\t.sds-process-step__line {\n\t\tdisplay: var(--_sds-process-step-line-display);\n\t\tbackground-color: var(--_sds-process-step-line-color);\n\t\tgrid-column: 1;\n\t\tjustify-self: center;\n\t\twidth: var(--_sds-process-step-line-width);\n\t\tmin-height: var(--_sds-process-step-line-min-height);\n\t\tgrid-row: line-2;\n\t\tposition: relative;\n\t\ttop: var(--_sds-process-step-border-width);\n\t\tz-index: 1;\n\t}\n\n\t.sds-process-step__heading {\n\t\tcolor: var(--_sds-process-step-heading-color);\n\t\tfont-weight: var(--_sds-process-step-heading-font-weight);\n\t\tfont-size: var(--_sds-process-step-heading-font-size);\n\t\tline-height: var(--_sds-process-step-heading-line-height);\n\t\tpadding-block: var(--_sds-process-step-heading-padding-block);\n\t\tmargin-block: var(--_sds-process-step-heading-margin-block);\n\t}\n\n\t.sds-process-step__timestamp {\n\t\tcolor: var(--_sds-process-step-timestamp-color);\n\t\tfont-weight: var(--_sds-process-step-timestamp-font-weight);\n\t\tfont-size: var(--_sds-process-step-timestamp-font-size);\n\t\tline-height: var(--_sds-process-step-timestamp-line-height);\n\t\tpadding-block-start: var(--_sds-process-step-timestamp-padding-block-start);\n\t\tpadding-block-end: var(--_sds-process-step-timestamp-padding-block-end);\n\n\t\t&:first-child {\n\t\t\t--_sds-process-step-timestamp-padding-block-start: var(--sds-process-step-timestamp-padding-block-start, var(--sds-spacing-3xs));\n\t\t}\n\n\t\t&:empty {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t.sds-process-step__slot-content {\n\t\tpadding-block: var(--_sds-process-step-slot-content-padding-block);\n\n\t\t&:first-child {\n\t\t\t--_sds-process-step-slot-content-padding-block: var(--sds-process-step-slot-content-padding-block, var(--sds-spacing-3xs));\n\t\t}\n\t}\n\n\t:host(:last-of-type) {\n\t\t--_sds-process-step-line-display: none;\n\t}\n`;\n"]}

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

@@ -1,8 +1,8 @@
 import { LitElement, PropertyValues } from 'lit';
 import { SDS_SIZES } from '../types';
-import type { SDSFormControlProps } from '../mixins/sds-form-control-mixin';
+import type { SDSFormControlAttributes } from '../mixins/sds-form-control-mixin';
 type RadioSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;
-export interface SDSRadioProps extends SDSFormControlProps {
+export interface SDSRadioProps extends SDSFormControlAttributes {
     checked?: boolean;
     error?: boolean;
     'help-text'?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"sds-radio.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sds-radio.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"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"}

package/dist/sds-radio/sds-radio.js

@@ -229,6 +229,7 @@ let SDSRadio = class SDSRadio extends SDSDelegateInteractionMixin(SDSEventDispat
             'sds-radio__input': true,
             'sds-radio__input--error': Boolean(this.error),
         };
+        const describedBy = this.helpText ? 'help-text' : undefined;
         return html `
 			<div class="${classMap(radioClasses)}">
 				<input
@@ -242,13 +243,15 @@ let SDSRadio = class SDSRadio extends SDSDelegateInteractionMixin(SDSEventDispat
 					.disabled="${this.disabled ?? false}"
 					?required="${this.required}"
 					?readonly="${this.readOnly}"
+					aria-describedby="${ifDefined(describedBy)}"
+					aria-invalid="${this.error ? 'true' : 'false'}"
 					@change="${this._handleChange}"
 					@focus="${this._handleFocus}"
 					@blur="${this._handleBlur}"
 					class="${classMap(inputClasses)}"
 				/>
 				${this.label ? html `<label class="sds-radio__label" for="control">${this.label}</label>` : nothing}
-				${this.helpText ? html `<span class="sds-radio__help-text">${this.helpText}</span>` : nothing}
+				${this.helpText ? html `<span id="help-text" class="sds-radio__help-text">${this.helpText}</span>` : nothing}
 			</div>
 		`;
     }
@@ -280,7 +283,7 @@ __decorate([
     property({ type: String, attribute: 'help-text' })
 ], SDSRadio.prototype, "helpText", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], SDSRadio.prototype, "disabled", null);
 __decorate([
     property({ type: Boolean, attribute: false })