@politiet/sheriff-web-components 2.5.1 → 2.6.1

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

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

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

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

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

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

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

@@ -0,0 +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"]}

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

@@ -1,54 +1,8 @@
-import { LitElement, type PropertyValues } from 'lit';
 import { SheriffEvent } from '../types';
+import { SDSDialogComponent } from './sds-dialog.component';
 import '../sds-icon/sds-icon';
 import '../sds-button/sds-button';
-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 SDSDialog_base: (new (...args: any[]) => import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface) & typeof LitElement;
-export declare class SDSDialog extends SDSDialog_base {
-    static styles: import("lit").CSSResult[];
-    open: boolean;
-    modal: boolean;
-    closedby: ClosedBy;
-    closeButtonLabel: string;
-    private _dialog;
-    private headerSlotElements;
-    firstUpdated(): void;
-    updated(changedProperties: PropertyValues): void;
-    private _setupEventListeners;
-    private _openDialog;
-    private _closeDialog;
-    private readonly _handleClose;
-    private readonly _handleClick;
-    private readonly _handleCancel;
-    private readonly _handleAutoFocus;
-    show(): void;
-    showModal(): void;
-    close(): void;
-    render(): import("lit-html").TemplateResult<1>;
+export declare class SDSDialog extends SDSDialogComponent {
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -58,5 +12,4 @@ declare global {
         'sds-close': SheriffEvent;
     }
 }
-export {};
 //# sourceMappingURL=sds-dialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sds-dialog.d.ts","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAElC,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,qBACa,SAAU,SAAQ,cAAmC;IACjE,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;IAEM,OAAO,CAAC,kBAAkB,CAAa;IAEzF,YAAY,IAAI,IAAI;IAOpB,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAOzD,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAkC3B;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAI5B;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAkB/B;IAEK,IAAI,IAAI,IAAI;IAIZ,SAAS,IAAI,IAAI;IAKjB,KAAK,IAAI,IAAI;IAIX,MAAM;CAmBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;IACD,UAAU,2BAA2B;QACpC,WAAW,EAAE,YAAY,CAAC;KAC1B;CACD"}
+{"version":3,"file":"sds-dialog.d.ts","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAElC,qBACa,SAAU,SAAQ,kBAAkB;CAAG;AAEpD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;IACD,UAAU,2BAA2B;QACpC,WAAW,EAAE,YAAY,CAAC;KAC1B;CACD"}

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

@@ -4,155 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, nothing } from 'lit';
-import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { guardedCustomElement } from '../utils/guarded-custom-element';
-import { styles } from './sds-dialog.styles';
-import { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';
+import { SDSDialogComponent } from './sds-dialog.component';
 import '../sds-icon/sds-icon';
 import '../sds-button/sds-button';
-let SDSDialog = class SDSDialog extends SDSEventDispatcherMixin(LitElement) {
-    constructor() {
-        super(...arguments);
-        this.open = false;
-        this.modal = false;
-        this.closedby = 'closerequest';
-        this.closeButtonLabel = 'Lukk dialogvindu';
-        this._handleClose = () => {
-            this.open = false;
-            this.dispatchSheriffEvent('sds-close');
-        };
-        this._handleClick = (event) => {
-            const target = event.target;
-            if (target?.closest('[data-command="close"]')) {
-                this._closeDialog();
-                return;
-            }
-            // Clicking the backdrop will have the dialog as the target in Safari/Chrome.
-            // Firefox does not fire this callback when ::backdrop is clicked.
-            if (target !== this._dialog) {
-                return;
-            }
-            if (this.closedby !== 'any') {
-                return;
-            }
-            // Cast _dialog to its own type to avoid it being narrowed to never by TS.
-            // The types defines that `closedBy` _is_ in dialog.
-            // So, if it is not, it can't be that type and is cast to never.
-            // Do this test to check if closedBy is supported in current browser.
-            const hasClosedBy = 'closedBy' in this._dialog;
-            if (hasClosedBy) {
-                return;
-            }
-            // Manual bounds checking for Safari as it does not (yet) support closedby="any".
-            const { clientX: x, clientY: y } = event;
-            const { top, bottom, left, right } = this._dialog.getBoundingClientRect();
-            const clickedOutsideDialog = top > y || bottom < y || left > x || right < x;
-            if (clickedOutsideDialog) {
-                this._closeDialog();
-            }
-        };
-        this._handleCancel = (event) => {
-            if (this.closedby === 'none') {
-                event.preventDefault();
-            }
-        };
-        this._handleAutoFocus = () => {
-            // slot:not([name]) finds the default nameless slot
-            const contentSlotElements = this.shadowRoot?.querySelector('slot:not([name])')?.assignedElements({ flatten: true });
-            if (!contentSlotElements || contentSlotElements.length === 0) {
-                return;
-            }
-            const elementToFocus = contentSlotElements.find((element) => {
-                return element.getAttribute('autofocus') != null;
-            });
-            if (!(elementToFocus instanceof HTMLElement)) {
-                return;
-            }
-            if (document.activeElement !== elementToFocus) {
-                elementToFocus.focus();
-            }
-        };
-    }
-    firstUpdated() {
-        this._setupEventListeners();
-        if (this.open) {
-            this._openDialog();
-        }
-    }
-    updated(changedProperties) {
-        if (!changedProperties.has('open')) {
-            return;
-        }
-        this.open ? this._openDialog() : this._closeDialog();
-    }
-    _setupEventListeners() {
-        this._dialog.addEventListener('close', this._handleClose);
-        this._dialog.addEventListener('cancel', this._handleCancel);
-        this._dialog.addEventListener('click', this._handleClick);
-        this._dialog.addEventListener('animationend', this._handleAutoFocus);
-    }
-    _openDialog() {
-        if (!this._dialog) {
-            return;
-        }
-        this.modal ? this._dialog.showModal() : this._dialog.show();
-    }
-    _closeDialog() {
-        if (!this._dialog) {
-            return;
-        }
-        this._dialog.close();
-    }
-    show() {
-        this.open = true;
-    }
-    showModal() {
-        this.modal = true;
-        this.open = true;
-    }
-    close() {
-        this.open = false;
-    }
-    render() {
-        const headerIsEmpty = this.headerSlotElements.length === 0;
-        return html `
-			<dialog closedby="${this.closedby}" class=${headerIsEmpty ? 'sds-dialog__empty-header' : ''}>
-				<div class="sds-dialog__header">
-					<slot name="header"></slot>
-					${this.closeButtonLabel
-            ? html `
-								<sds-button class="sds-dialog__close-button" icon variant="tertiary" size="md" data-command="close" aria-label="${this.closeButtonLabel}">
-									<sds-icon name="close-material-outlined" size="md"></sds-icon>
-								</sds-button>
-							`
-            : nothing}
-				</div>
-				<slot></slot>
-				<slot name="footer"></slot>
-			</dialog>
-		`;
-    }
+let SDSDialog = class SDSDialog extends SDSDialogComponent {
 };
-SDSDialog.styles = [styles];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SDSDialog.prototype, "open", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SDSDialog.prototype, "modal", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], SDSDialog.prototype, "closedby", void 0);
-__decorate([
-    property({ type: String, attribute: 'close-button-label' })
-], SDSDialog.prototype, "closeButtonLabel", void 0);
-__decorate([
-    query('dialog')
-], SDSDialog.prototype, "_dialog", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'header', flatten: false })
-], SDSDialog.prototype, "headerSlotElements", void 0);
 SDSDialog = __decorate([
     guardedCustomElement('sds-dialog')
 ], SDSDialog);

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

@@ -1 +1 @@
-{"version":3,"file":"sds-dialog.js","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-dialog.styles';\nimport { SheriffEvent } from '../types';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\n\nimport '../sds-icon/sds-icon';\nimport '../sds-button/sds-button';\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\n@guardedCustomElement('sds-dialog')\nexport class SDSDialog 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@queryAssignedElements({ slot: 'header', flatten: false }) private headerSlotElements!: Element[];\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\t\tthis.open ? this._openDialog() : this._closeDialog();\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('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\tthis.modal ? this._dialog.showModal() : this._dialog.show();\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\"]')) {\n\t\t\tthis._closeDialog();\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 (target !== this._dialog) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.closedby !== 'any') {\n\t\t\treturn;\n\t\t}\n\n\t\t// Cast _dialog to its own type to avoid it being narrowed to never by TS.\n\t\t// The types defines that `closedBy` _is_ in dialog.\n\t\t// So, if it is not, it can't be that type and is cast to never.\n\t\t// Do this test to check if closedBy is supported in current browser.\n\t\tconst hasClosedBy = 'closedBy' in (this._dialog as typeof this._dialog);\n\t\tif (hasClosedBy) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Manual bounds checking for Safari as it does not (yet) support closedby=\"any\".\n\t\tconst { clientX: x, clientY: y } = event;\n\t\tconst { top, bottom, left, right } = this._dialog.getBoundingClientRect();\n\t\tconst clickedOutsideDialog = top > y || bottom < y || left > x || right < x;\n\t\tif (clickedOutsideDialog) {\n\t\t\tthis._closeDialog();\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 _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\toverride render() {\n\t\tconst headerIsEmpty = this.headerSlotElements.length === 0;\n\t\treturn html`\n\t\t\t<dialog closedby=\"${this.closedby}\" class=${headerIsEmpty ? 'sds-dialog__empty-header' : ''}>\n\t\t\t\t<div class=\"sds-dialog__header\">\n\t\t\t\t\t<slot name=\"header\"></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\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-dialog': SDSDialog;\n\t}\n\tinterface GlobalEventHandlersEventMap {\n\t\t'sds-close': SheriffEvent;\n\t}\n}\n"]}
+{"version":3,"file":"sds-dialog.js","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAEvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAG3B,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,kBAAkB;CAAG,CAAA;AAAvC,SAAS;IADrB,oBAAoB,CAAC,YAAY,CAAC;GACtB,SAAS,CAA8B","sourcesContent":["import { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { SheriffEvent } from '../types';\nimport { SDSDialogComponent } from './sds-dialog.component';\n\nimport '../sds-icon/sds-icon';\nimport '../sds-button/sds-button';\n\n@guardedCustomElement('sds-dialog')\nexport class SDSDialog extends SDSDialogComponent {}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-dialog': SDSDialog;\n\t}\n\tinterface GlobalEventHandlersEventMap {\n\t\t'sds-close': SheriffEvent;\n\t}\n}\n"]}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sds-dialog.spec.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-dialog.spec.d.ts","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.spec.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,50 @@
+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('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');
+        });
+        test('sets aria-controls 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-controls', 'dialog-example');
+        });
+        test('aria-expanded is false before opening', async ({ page }) => {
+            const innerButton = page.locator('sds-button[commandfor="dialog-example"][command="show-modal"]').locator('button');
+            await expect(innerButton).toHaveAttribute('aria-expanded', 'false');
+        });
+        test('clicking the trigger opens the dialog', async ({ page }) => {
+            const trigger = page.locator('sds-button[commandfor="dialog-example"][command="show-modal"]');
+            const dialog = page.locator('sds-dialog#dialog-example');
+            await trigger.click();
+            await expect(dialog).toHaveAttribute('open');
+        });
+        test('aria-expanded is true when dialog is open', async ({ page }) => {
+            const trigger = page.locator('sds-button[commandfor="dialog-example"][command="show-modal"]');
+            const innerButton = trigger.locator('button');
+            await trigger.click();
+            await expect(innerButton).toHaveAttribute('aria-expanded', 'true');
+        });
+        test('closing via command="close" resets aria-expanded', async ({ page }) => {
+            const trigger = page.locator('sds-button[commandfor="dialog-example"][command="show-modal"]');
+            const innerButton = trigger.locator('button');
+            await trigger.click();
+            await expect(innerButton).toHaveAttribute('aria-expanded', 'true');
+            const closeButton = page.locator('sds-dialog#dialog-example sds-button[slot="footer"][command="close"]');
+            await closeButton.click();
+            await expect(innerButton).toHaveAttribute('aria-expanded', 'false');
+        });
+        test('closing via ESC resets aria-expanded', async ({ page }) => {
+            const trigger = page.locator('sds-button[commandfor="dialog-example"][command="show-modal"]');
+            const innerButton = trigger.locator('button');
+            await trigger.click();
+            await expect(innerButton).toHaveAttribute('aria-expanded', 'true');
+            await page.keyboard.press('Escape');
+            await expect(innerButton).toHaveAttribute('aria-expanded', 'false');
+        });
+    });
+});
+//# sourceMappingURL=sds-dialog.spec.js.map

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

@@ -0,0 +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"]}

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

@@ -11,6 +11,7 @@ export const styles = css `
 		--_sds-dialog-max-width: var(--sds-dialog-max-width, min(60ch, 100vw));
 		--_sds-dialog-max-height: var(--sds-dialog-max-height, calc(100dvh - var(--sds-spacing-lg)));
 
+		--_sds-dialog-margin: var(--sds-dialog-margin, auto);
 		--_sds-dialog-padding-block: var(--sds-dialog-padding-block, var(--sds-spacing-sm));
 		--_sds-dialog-padding-inline: var(--sds-dialog-padding-inline, var(--sds-spacing-sm));
 		--_sds-dialog-gap: var(--sds-dialog-gap, var(--sds-spacing-xs));
@@ -54,14 +55,13 @@ export const styles = css `
 		&[open] {
 			display: flex;
 			flex-direction: column;
+			margin: var(--_sds-dialog-margin);
 			padding-block: var(--_sds-dialog-padding-block);
 			padding-inline: var(--_sds-dialog-padding-inline);
 			gap: var(--_sds-dialog-gap);
 		}
 
-		&.sds-dialog__empty-header {
-			/* Set gap to 0 to collapse empty header */
-			--_sds-dialog-gap: var(--sds-dialog-gap, var(--sds-spacing-zero));
+		&.sds-dialog__empty-header:has(.sds-dialog__close-button) {
 			/* Set padding right to avoid overflowing the close button */
 			padding-right: var(--sds-dialog-padding-right, var(--sds-spacing-lg));
 		}
@@ -102,7 +102,7 @@ export const styles = css `
 	@media (max-width: 640px) {
 		:host {
 			--_sds-dialog-max-width: var(--sds-dialog-max-width, 100%);
-			--_sds-dialog-border-radius: var(--sds-dialog-border-radius, var(--sds-spacing-zero));
+			--_sds-dialog-margin: var(--sds-dialog-margin, var(--sds-spacing-xs));
 		}
 	}