@digital-realty/ix-dialog 1.0.28 → 1.0.30-alpha.0

package/dist/IxDialog.d.ts

@@ -1,21 +1,21 @@
-import { LitElement } from 'lit';
-import './md-dialog.js';
-import { Dialog } from './internal/dialog.js';
-export declare class IxDialog extends LitElement {
-    /** @nocollapse */
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
-        customElements?: CustomElementRegistry | undefined;
-        registry?: CustomElementRegistry | undefined;
-    };
-    readonly component: Dialog;
-    open: boolean;
-    onOpen(): void;
-    onOpened(): void;
-    onClose(): void;
-    onClosed(): void;
-    onCancel(): void;
-    render(): import("lit").TemplateResult<1>;
-}
+import { LitElement } from 'lit';
+import './md-dialog.js';
+import { Dialog } from './internal/dialog.js';
+export declare class IxDialog extends LitElement {
+    /** @nocollapse */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+        customElements?: CustomElementRegistry | undefined;
+        registry?: CustomElementRegistry | undefined;
+    };
+    readonly component: Dialog;
+    open: boolean;
+    onOpen(): void;
+    onOpened(): void;
+    onClose(): void;
+    onClosed(): void;
+    onCancel(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/IxDialog.js

@@ -1,29 +1,29 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import './md-dialog.js';
-import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
-export class IxDialog extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.open = false;
-    }
-    onOpen() {
-        this.dispatchEvent(new Event('open'));
-    }
-    onOpened() {
-        this.dispatchEvent(new Event('opened'));
-    }
-    onClose() {
-        this.dispatchEvent(new Event('close'));
-    }
-    onClosed() {
-        this.dispatchEvent(new Event('closed'));
-    }
-    onCancel() {
-        this.dispatchEvent(new Event('cancel'));
-    }
-    render() {
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import './md-dialog.js';
+import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
+export class IxDialog extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+    }
+    onOpen() {
+        this.dispatchEvent(new Event('open'));
+    }
+    onOpened() {
+        this.dispatchEvent(new Event('opened'));
+    }
+    onClose() {
+        this.dispatchEvent(new Event('close'));
+    }
+    onClosed() {
+        this.dispatchEvent(new Event('closed'));
+    }
+    onCancel() {
+        this.dispatchEvent(new Event('cancel'));
+    }
+    render() {
         return html `
       <md-dialog
         ?open=${this.open}
@@ -39,21 +39,21 @@ export class IxDialog extends LitElement {
         <slot slot="actions" name="actions"></slot>
         ></md-dialog
       >
-    `;
-    }
-}
-(() => {
-    requestUpdateOnAriaChange(IxDialog);
-})();
-/** @nocollapse */
-IxDialog.shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-__decorate([
-    query('.dialog')
-], IxDialog.prototype, "component", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IxDialog.prototype, "open", void 0);
+    `;
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(IxDialog);
+})();
+/** @nocollapse */
+IxDialog.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    query('.dialog')
+], IxDialog.prototype, "component", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IxDialog.prototype, "open", void 0);
 //# sourceMappingURL=IxDialog.js.map

package/dist/index.d.ts

@@ -1 +1 @@
-export { IxDialog } from './IxDialog.js';
+export { IxDialog } from './IxDialog.js';

package/dist/index.js

@@ -1,2 +1,2 @@
-export { IxDialog } from './IxDialog.js';
+export { IxDialog } from './IxDialog.js';
 //# sourceMappingURL=index.js.map

package/dist/internal/dialog.d.ts

@@ -1,107 +1,107 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import '@material/web/divider/divider.js';
-import { LitElement } from 'lit';
-import { DialogAnimation } from '@material/web/dialog/internal/animations.js';
-/**
- * A dialog component.
- *
- * @fires open {Event} Dispatched when the dialog is opening before any animations.
- * @fires opened {Event} Dispatched when the dialog has opened after any animations.
- * @fires close {Event} Dispatched when the dialog is closing before any animations.
- * @fires closed {Event} Dispatched when the dialog has closed after any animations.
- * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking
- * on the scrim or pressing Escape.
- */
-export declare class Dialog extends LitElement {
-    /**
-     * Opens the dialog when set to `true` and closes it when set to `false`.
-     */
-    get open(): boolean;
-    set open(open: boolean);
-    /**
-     * Gets or sets the dialog's return value, usually to indicate which button
-     * a user pressed to close it.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue
-     */
-    returnValue: string;
-    /**
-     * The type of dialog for accessibility. Set this to `alert` to announce a
-     * dialog as an alert dialog.
-     */
-    type?: 'alert';
-    /**
-     * Gets the opening animation for a dialog. Set to a new function to customize
-     * the animation.
-     */
-    getOpenAnimation: () => DialogAnimation;
-    /**
-     * Gets the closing animation for a dialog. Set to a new function to customize
-     * the animation.
-     */
-    getCloseAnimation: () => DialogAnimation;
-    private isOpen;
-    private isOpening;
-    private isConnectedPromiseResolve;
-    private isConnectedPromise;
-    private readonly dialog;
-    private readonly scrim;
-    private readonly container;
-    private readonly headline;
-    private readonly content;
-    private readonly actions;
-    private isAtScrollTop;
-    private isAtScrollBottom;
-    private readonly scroller;
-    private readonly topAnchor;
-    private readonly bottomAnchor;
-    private nextClickIsFromContent;
-    private intersectionObserver?;
-    private hasHeadline;
-    private hasActions;
-    private hasIcon;
-    private escapePressedWithoutCancel;
-    constructor();
-    /**
-     * Opens the dialog and fires a cancelable `open` event. After a dialog's
-     * animation, an `opened` event is fired.
-     *
-     * Add an `autocomplete` attribute to a child of the dialog that should
-     * receive focus after opening.
-     *
-     * @return A Promise that resolves after the animation is finished and the
-     *     `opened` event was fired.
-     */
-    show(): Promise<void>;
-    /**
-     * Closes the dialog and fires a cancelable `close` event. After a dialog's
-     * animation, a `closed` event is fired.
-     *
-     * @param returnValue A return value usually indicating which button was used
-     *     to close a dialog. If a dialog is canceled by clicking the scrim or
-     *     pressing Escape, it will not change the return value after closing.
-     * @return A Promise that resolves after the animation is finished and the
-     *     `closed` event was fired.
-     */
-    close(returnValue?: string): Promise<void>;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected render(): import("lit").TemplateResult<1>;
-    protected firstUpdated(): void;
-    private handleDialogClick;
-    private handleContentClick;
-    private handleSubmit;
-    private handleCancel;
-    private handleClose;
-    private handleKeydown;
-    private animateDialog;
-    private handleHeadlineChange;
-    private handleActionsChange;
-    private handleIconChange;
-    private handleAnchorIntersection;
-    private getIsConnectedPromise;
-}
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '@material/web/divider/divider.js';
+import { LitElement } from 'lit';
+import { DialogAnimation } from '@material/web/dialog/internal/animations.js';
+/**
+ * A dialog component.
+ *
+ * @fires open {Event} Dispatched when the dialog is opening before any animations.
+ * @fires opened {Event} Dispatched when the dialog has opened after any animations.
+ * @fires close {Event} Dispatched when the dialog is closing before any animations.
+ * @fires closed {Event} Dispatched when the dialog has closed after any animations.
+ * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking
+ * on the scrim or pressing Escape.
+ */
+export declare class Dialog extends LitElement {
+    /**
+     * Opens the dialog when set to `true` and closes it when set to `false`.
+     */
+    get open(): boolean;
+    set open(open: boolean);
+    /**
+     * Gets or sets the dialog's return value, usually to indicate which button
+     * a user pressed to close it.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue
+     */
+    returnValue: string;
+    /**
+     * The type of dialog for accessibility. Set this to `alert` to announce a
+     * dialog as an alert dialog.
+     */
+    type?: 'alert';
+    /**
+     * Gets the opening animation for a dialog. Set to a new function to customize
+     * the animation.
+     */
+    getOpenAnimation: () => DialogAnimation;
+    /**
+     * Gets the closing animation for a dialog. Set to a new function to customize
+     * the animation.
+     */
+    getCloseAnimation: () => DialogAnimation;
+    private isOpen;
+    private isOpening;
+    private isConnectedPromiseResolve;
+    private isConnectedPromise;
+    private readonly dialog;
+    private readonly scrim;
+    private readonly container;
+    private readonly headline;
+    private readonly content;
+    private readonly actions;
+    private isAtScrollTop;
+    private isAtScrollBottom;
+    private readonly scroller;
+    private readonly topAnchor;
+    private readonly bottomAnchor;
+    private nextClickIsFromContent;
+    private intersectionObserver?;
+    private hasHeadline;
+    private hasActions;
+    private hasIcon;
+    private escapePressedWithoutCancel;
+    constructor();
+    /**
+     * Opens the dialog and fires a cancelable `open` event. After a dialog's
+     * animation, an `opened` event is fired.
+     *
+     * Add an `autocomplete` attribute to a child of the dialog that should
+     * receive focus after opening.
+     *
+     * @return A Promise that resolves after the animation is finished and the
+     *     `opened` event was fired.
+     */
+    show(): Promise<void>;
+    /**
+     * Closes the dialog and fires a cancelable `close` event. After a dialog's
+     * animation, a `closed` event is fired.
+     *
+     * @param returnValue A return value usually indicating which button was used
+     *     to close a dialog. If a dialog is canceled by clicking the scrim or
+     *     pressing Escape, it will not change the return value after closing.
+     * @return A Promise that resolves after the animation is finished and the
+     *     `closed` event was fired.
+     */
+    close(returnValue?: string): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): import("lit").TemplateResult<1>;
+    protected firstUpdated(): void;
+    private handleDialogClick;
+    private handleContentClick;
+    private handleSubmit;
+    private handleCancel;
+    private handleClose;
+    private handleKeydown;
+    private animateDialog;
+    private handleHeadlineChange;
+    private handleActionsChange;
+    private handleIconChange;
+    private handleAnchorIntersection;
+    private getIsConnectedPromise;
+}

package/dist/internal/dialog.js

@@ -1,215 +1,215 @@
-/* eslint-disable no-shadow */
-/* eslint-disable class-methods-use-this */
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { __decorate } from "tslib";
-import '@material/web/divider/divider.js';
-import { html, isServer, LitElement, nothing } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
-import { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';
-import { DIALOG_DEFAULT_CLOSE_ANIMATION, DIALOG_DEFAULT_OPEN_ANIMATION, } from '@material/web/dialog/internal/animations.js';
-/**
- * A dialog component.
- *
- * @fires open {Event} Dispatched when the dialog is opening before any animations.
- * @fires opened {Event} Dispatched when the dialog has opened after any animations.
- * @fires close {Event} Dispatched when the dialog is closing before any animations.
- * @fires closed {Event} Dispatched when the dialog has closed after any animations.
- * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking
- * on the scrim or pressing Escape.
- */
-export class Dialog extends LitElement {
-    /**
-     * Opens the dialog when set to `true` and closes it when set to `false`.
-     */
-    get open() {
-        return this.isOpen;
-    }
-    set open(open) {
-        if (open === this.isOpen) {
-            return;
-        }
-        this.isOpen = open;
-        if (open) {
-            this.setAttribute('open', '');
-            this.show();
-        }
-        else {
-            this.removeAttribute('open');
-            this.close();
-        }
-    }
-    constructor() {
-        super();
-        /**
-         * Gets or sets the dialog's return value, usually to indicate which button
-         * a user pressed to close it.
-         *
-         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue
-         */
-        this.returnValue = '';
-        /**
-         * Gets the opening animation for a dialog. Set to a new function to customize
-         * the animation.
-         */
-        this.getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION;
-        /**
-         * Gets the closing animation for a dialog. Set to a new function to customize
-         * the animation.
-         */
-        this.getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION;
-        this.isOpen = false;
-        this.isOpening = false;
-        this.isConnectedPromise = this.getIsConnectedPromise();
-        this.isAtScrollTop = false;
-        this.isAtScrollBottom = false;
-        this.nextClickIsFromContent = false;
-        // Dialogs should not be SSR'd while open, so we can just use runtime checks.
-        this.hasHeadline = false;
-        this.hasActions = false;
-        this.hasIcon = false;
-        // See https://bugs.chromium.org/p/chromium/issues/detail?id=1512224
-        // Chrome v120 has a bug where escape keys do not trigger cancels. If we get
-        // a dialog "close" event that is triggered without a "cancel" after an escape
-        // keydown, then we need to manually trigger our closing logic.
-        //
-        // This bug occurs when pressing escape to close a dialog without first
-        // interacting with the dialog's content.
-        //
-        // Cleanup tracking:
-        // https://github.com/material-components/material-web/issues/5330
-        // This can be removed when full CloseWatcher support added and the above bug
-        // in Chromium is fixed to fire 'cancel' with one escape press and close with
-        // multiple.
-        this.escapePressedWithoutCancel = false;
-        if (!isServer) {
-            this.addEventListener('submit', this.handleSubmit);
-            // We do not use `delegatesFocus: true` due to a Chromium bug with
-            // selecting text.
-            // See https://bugs.chromium.org/p/chromium/issues/detail?id=950357
-            //
-            // Material requires using focus trapping within the dialog (see
-            // b/314840853 for the bug to add it). This would normally mean we don't
-            // care about delegating focus since the `<dialog>` never receives it.
-            // However, we still need to handle situations when a user has not
-            // provided an focusable child in the content. When that happens, the
-            // `<dialog>` itself is focused.
-            //
-            // Listen to focus/blur instead of focusin/focusout since those can bubble
-            // from content.
-            this.addEventListener('focus', () => {
-                var _a;
-                (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.focus();
-            });
-            this.addEventListener('blur', () => {
-                var _a;
-                (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.blur();
-            });
-        }
-    }
-    /**
-     * Opens the dialog and fires a cancelable `open` event. After a dialog's
-     * animation, an `opened` event is fired.
-     *
-     * Add an `autocomplete` attribute to a child of the dialog that should
-     * receive focus after opening.
-     *
-     * @return A Promise that resolves after the animation is finished and the
-     *     `opened` event was fired.
-     */
-    async show() {
-        var _a;
-        this.isOpening = true;
-        // Dialogs can be opened before being attached to the DOM, so we need to
-        // wait until we're connected before calling `showModal()`.
-        await this.isConnectedPromise;
-        await this.updateComplete;
-        const dialog = this.dialog;
-        // Check if already opened or if `dialog.close()` was called while awaiting.
-        if (dialog.open || !this.isOpening) {
-            this.isOpening = false;
-            return;
-        }
-        const preventOpen = !this.dispatchEvent(new Event('open', { cancelable: true }));
-        if (preventOpen) {
-            this.open = false;
-            return;
-        }
-        // All Material dialogs are modal.
-        dialog.showModal();
-        this.open = true;
-        // Reset scroll position if re-opening a dialog with the same content.
-        if (this.scroller) {
-            this.scroller.scrollTop = 0;
-        }
-        // Native modal dialogs ignore autofocus and instead force focus to the
-        // first focusable child. Override this behavior if there is a child with
-        // an autofocus attribute.
-        (_a = this.querySelector('[autofocus]')) === null || _a === void 0 ? void 0 : _a.focus();
-        await this.animateDialog(this.getOpenAnimation());
-        this.dispatchEvent(new Event('opened'));
-        this.isOpening = false;
-    }
-    /**
-     * Closes the dialog and fires a cancelable `close` event. After a dialog's
-     * animation, a `closed` event is fired.
-     *
-     * @param returnValue A return value usually indicating which button was used
-     *     to close a dialog. If a dialog is canceled by clicking the scrim or
-     *     pressing Escape, it will not change the return value after closing.
-     * @return A Promise that resolves after the animation is finished and the
-     *     `closed` event was fired.
-     */
-    async close(returnValue = this.returnValue) {
-        this.isOpening = false;
-        if (!this.isConnected) {
-            // Disconnected dialogs do not fire close events or animate.
-            this.open = false;
-            return;
-        }
-        await this.updateComplete;
-        const dialog = this.dialog;
-        // Check if already closed or if `dialog.show()` was called while awaiting.
-        if (!dialog.open || this.isOpening) {
-            this.open = false;
-            return;
-        }
-        const prevReturnValue = this.returnValue;
-        this.returnValue = returnValue;
-        const preventClose = !this.dispatchEvent(new Event('close', { cancelable: true }));
-        if (preventClose) {
-            this.returnValue = prevReturnValue;
-            return;
-        }
-        await this.animateDialog(this.getCloseAnimation());
-        dialog.close(returnValue);
-        this.open = false;
-        this.dispatchEvent(new Event('closed'));
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.isConnectedPromiseResolve();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.isConnectedPromise = this.getIsConnectedPromise();
-    }
-    render() {
-        const scrollable = this.open && !(this.isAtScrollTop && this.isAtScrollBottom);
-        const classes = {
-            'has-headline': this.hasHeadline,
-            'has-actions': this.hasActions,
-            'has-icon': this.hasIcon,
-            scrollable: scrollable,
-            'show-top-divider': scrollable && !this.isAtScrollTop,
-            'show-bottom-divider': scrollable && !this.isAtScrollBottom,
-        };
-        const { ariaLabel } = this;
+/* eslint-disable no-shadow */
+/* eslint-disable class-methods-use-this */
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '@material/web/divider/divider.js';
+import { html, isServer, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
+import { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';
+import { DIALOG_DEFAULT_CLOSE_ANIMATION, DIALOG_DEFAULT_OPEN_ANIMATION, } from '@material/web/dialog/internal/animations.js';
+/**
+ * A dialog component.
+ *
+ * @fires open {Event} Dispatched when the dialog is opening before any animations.
+ * @fires opened {Event} Dispatched when the dialog has opened after any animations.
+ * @fires close {Event} Dispatched when the dialog is closing before any animations.
+ * @fires closed {Event} Dispatched when the dialog has closed after any animations.
+ * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking
+ * on the scrim or pressing Escape.
+ */
+export class Dialog extends LitElement {
+    /**
+     * Opens the dialog when set to `true` and closes it when set to `false`.
+     */
+    get open() {
+        return this.isOpen;
+    }
+    set open(open) {
+        if (open === this.isOpen) {
+            return;
+        }
+        this.isOpen = open;
+        if (open) {
+            this.setAttribute('open', '');
+            this.show();
+        }
+        else {
+            this.removeAttribute('open');
+            this.close();
+        }
+    }
+    constructor() {
+        super();
+        /**
+         * Gets or sets the dialog's return value, usually to indicate which button
+         * a user pressed to close it.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue
+         */
+        this.returnValue = '';
+        /**
+         * Gets the opening animation for a dialog. Set to a new function to customize
+         * the animation.
+         */
+        this.getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION;
+        /**
+         * Gets the closing animation for a dialog. Set to a new function to customize
+         * the animation.
+         */
+        this.getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION;
+        this.isOpen = false;
+        this.isOpening = false;
+        this.isConnectedPromise = this.getIsConnectedPromise();
+        this.isAtScrollTop = false;
+        this.isAtScrollBottom = false;
+        this.nextClickIsFromContent = false;
+        // Dialogs should not be SSR'd while open, so we can just use runtime checks.
+        this.hasHeadline = false;
+        this.hasActions = false;
+        this.hasIcon = false;
+        // See https://bugs.chromium.org/p/chromium/issues/detail?id=1512224
+        // Chrome v120 has a bug where escape keys do not trigger cancels. If we get
+        // a dialog "close" event that is triggered without a "cancel" after an escape
+        // keydown, then we need to manually trigger our closing logic.
+        //
+        // This bug occurs when pressing escape to close a dialog without first
+        // interacting with the dialog's content.
+        //
+        // Cleanup tracking:
+        // https://github.com/material-components/material-web/issues/5330
+        // This can be removed when full CloseWatcher support added and the above bug
+        // in Chromium is fixed to fire 'cancel' with one escape press and close with
+        // multiple.
+        this.escapePressedWithoutCancel = false;
+        if (!isServer) {
+            this.addEventListener('submit', this.handleSubmit);
+            // We do not use `delegatesFocus: true` due to a Chromium bug with
+            // selecting text.
+            // See https://bugs.chromium.org/p/chromium/issues/detail?id=950357
+            //
+            // Material requires using focus trapping within the dialog (see
+            // b/314840853 for the bug to add it). This would normally mean we don't
+            // care about delegating focus since the `<dialog>` never receives it.
+            // However, we still need to handle situations when a user has not
+            // provided an focusable child in the content. When that happens, the
+            // `<dialog>` itself is focused.
+            //
+            // Listen to focus/blur instead of focusin/focusout since those can bubble
+            // from content.
+            this.addEventListener('focus', () => {
+                var _a;
+                (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+            this.addEventListener('blur', () => {
+                var _a;
+                (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.blur();
+            });
+        }
+    }
+    /**
+     * Opens the dialog and fires a cancelable `open` event. After a dialog's
+     * animation, an `opened` event is fired.
+     *
+     * Add an `autocomplete` attribute to a child of the dialog that should
+     * receive focus after opening.
+     *
+     * @return A Promise that resolves after the animation is finished and the
+     *     `opened` event was fired.
+     */
+    async show() {
+        var _a;
+        this.isOpening = true;
+        // Dialogs can be opened before being attached to the DOM, so we need to
+        // wait until we're connected before calling `showModal()`.
+        await this.isConnectedPromise;
+        await this.updateComplete;
+        const dialog = this.dialog;
+        // Check if already opened or if `dialog.close()` was called while awaiting.
+        if (dialog.open || !this.isOpening) {
+            this.isOpening = false;
+            return;
+        }
+        const preventOpen = !this.dispatchEvent(new Event('open', { cancelable: true }));
+        if (preventOpen) {
+            this.open = false;
+            return;
+        }
+        // All Material dialogs are modal.
+        dialog.showModal();
+        this.open = true;
+        // Reset scroll position if re-opening a dialog with the same content.
+        if (this.scroller) {
+            this.scroller.scrollTop = 0;
+        }
+        // Native modal dialogs ignore autofocus and instead force focus to the
+        // first focusable child. Override this behavior if there is a child with
+        // an autofocus attribute.
+        (_a = this.querySelector('[autofocus]')) === null || _a === void 0 ? void 0 : _a.focus();
+        await this.animateDialog(this.getOpenAnimation());
+        this.dispatchEvent(new Event('opened'));
+        this.isOpening = false;
+    }
+    /**
+     * Closes the dialog and fires a cancelable `close` event. After a dialog's
+     * animation, a `closed` event is fired.
+     *
+     * @param returnValue A return value usually indicating which button was used
+     *     to close a dialog. If a dialog is canceled by clicking the scrim or
+     *     pressing Escape, it will not change the return value after closing.
+     * @return A Promise that resolves after the animation is finished and the
+     *     `closed` event was fired.
+     */
+    async close(returnValue = this.returnValue) {
+        this.isOpening = false;
+        if (!this.isConnected) {
+            // Disconnected dialogs do not fire close events or animate.
+            this.open = false;
+            return;
+        }
+        await this.updateComplete;
+        const dialog = this.dialog;
+        // Check if already closed or if `dialog.show()` was called while awaiting.
+        if (!dialog.open || this.isOpening) {
+            this.open = false;
+            return;
+        }
+        const prevReturnValue = this.returnValue;
+        this.returnValue = returnValue;
+        const preventClose = !this.dispatchEvent(new Event('close', { cancelable: true }));
+        if (preventClose) {
+            this.returnValue = prevReturnValue;
+            return;
+        }
+        await this.animateDialog(this.getCloseAnimation());
+        dialog.close(returnValue);
+        this.open = false;
+        this.dispatchEvent(new Event('closed'));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.isConnectedPromiseResolve();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.isConnectedPromise = this.getIsConnectedPromise();
+    }
+    render() {
+        const scrollable = this.open && !(this.isAtScrollTop && this.isAtScrollBottom);
+        const classes = {
+            'has-headline': this.hasHeadline,
+            'has-actions': this.hasActions,
+            'has-icon': this.hasIcon,
+            scrollable: scrollable,
+            'show-top-divider': scrollable && !this.isAtScrollTop,
+            'show-bottom-divider': scrollable && !this.isAtScrollBottom,
+        };
+        const { ariaLabel } = this;
         return html `
       <div class="scrim"></div>
       <dialog
@@ -249,183 +249,183 @@ export class Dialog extends LitElement {
           </div>
         </div>
       </dialog>
-    `;
-    }
-    firstUpdated() {
-        this.intersectionObserver = new IntersectionObserver(entries => {
-            for (const entry of entries) {
-                this.handleAnchorIntersection(entry);
-            }
-        }, { root: this.scroller });
-        this.intersectionObserver.observe(this.topAnchor);
-        this.intersectionObserver.observe(this.bottomAnchor);
-    }
-    handleDialogClick() {
-        if (this.nextClickIsFromContent) {
-            // Avoid doing a layout calculation below if we know the click came from
-            // content.
-            this.nextClickIsFromContent = false;
-            return;
-        }
-        // Click originated on the backdrop. Native `<dialog>`s will not cancel,
-        // but Material dialogs do.
-        const preventDefault = !this.dispatchEvent(new Event('cancel', { cancelable: true }));
-        if (preventDefault) {
-            return;
-        }
-        this.close();
-    }
-    handleContentClick() {
-        this.nextClickIsFromContent = true;
-    }
-    handleSubmit(event) {
-        var _a;
-        const form = event.target;
-        const { submitter } = event;
-        if (form.method !== 'dialog' || !submitter) {
-            return;
-        }
-        // Close reason is the submitter's value attribute, or the dialog's
-        // `returnValue` if there is no attribute.
-        this.close((_a = submitter.getAttribute('value')) !== null && _a !== void 0 ? _a : this.returnValue);
-    }
-    handleCancel(event) {
-        if (event.target !== this.dialog) {
-            // Ignore any cancel events dispatched by content.
-            return;
-        }
-        this.escapePressedWithoutCancel = false;
-        const preventDefault = !redispatchEvent(this, event);
-        // We always prevent default on the original dialog event since we'll
-        // animate closing it before it actually closes.
-        event.preventDefault();
-        if (preventDefault) {
-            return;
-        }
-        this.close();
-    }
-    handleClose() {
-        var _a;
-        if (!this.escapePressedWithoutCancel) {
-            return;
-        }
-        this.escapePressedWithoutCancel = false;
-        (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('cancel', { cancelable: true }));
-    }
-    handleKeydown(event) {
-        if (event.key !== 'Escape') {
-            return;
-        }
-        // An escape key was pressed. If a "close" event fires next without a
-        // "cancel" event first, then we know we're in the Chrome v120 bug.
-        this.escapePressedWithoutCancel = true;
-        // Wait a full task for the cancel/close event listeners to fire, then
-        // reset the flag.
-        setTimeout(() => {
-            this.escapePressedWithoutCancel = false;
-        });
-    }
-    async animateDialog(animation) {
-        const { dialog, scrim, container, headline, content, actions } = this;
-        if (!dialog || !scrim || !container || !headline || !content || !actions) {
-            return;
-        }
-        const { container: containerAnimate, dialog: dialogAnimate, scrim: scrimAnimate, headline: headlineAnimate, content: contentAnimate, actions: actionsAnimate, } = animation;
-        const elementAndAnimation = [
-            [dialog, dialogAnimate !== null && dialogAnimate !== void 0 ? dialogAnimate : []],
-            [scrim, scrimAnimate !== null && scrimAnimate !== void 0 ? scrimAnimate : []],
-            [container, containerAnimate !== null && containerAnimate !== void 0 ? containerAnimate : []],
-            [headline, headlineAnimate !== null && headlineAnimate !== void 0 ? headlineAnimate : []],
-            [content, contentAnimate !== null && contentAnimate !== void 0 ? contentAnimate : []],
-            [actions, actionsAnimate !== null && actionsAnimate !== void 0 ? actionsAnimate : []],
-        ];
-        const animations = [];
-        for (const [element, animation] of elementAndAnimation) {
-            for (const animateArgs of animation) {
-                animations.push(element.animate(...animateArgs));
-            }
-        }
-        await Promise.all(animations.map(animation => animation.finished));
-    }
-    handleHeadlineChange(event) {
-        const slot = event.target;
-        this.hasHeadline = slot.assignedElements().length > 0;
-    }
-    handleActionsChange(event) {
-        const slot = event.target;
-        this.hasActions = slot.assignedElements().length > 0;
-    }
-    handleIconChange(event) {
-        const slot = event.target;
-        this.hasIcon = slot.assignedElements().length > 0;
-    }
-    handleAnchorIntersection(entry) {
-        const { target, isIntersecting } = entry;
-        if (target === this.topAnchor) {
-            this.isAtScrollTop = isIntersecting;
-        }
-        if (target === this.bottomAnchor) {
-            this.isAtScrollBottom = isIntersecting;
-        }
-    }
-    getIsConnectedPromise() {
-        return new Promise(resolve => {
-            this.isConnectedPromiseResolve = resolve;
-        });
-    }
-}
-(() => {
-    requestUpdateOnAriaChange(Dialog);
-})();
-__decorate([
-    property({ type: Boolean })
-], Dialog.prototype, "open", null);
-__decorate([
-    property({ attribute: false })
-], Dialog.prototype, "returnValue", void 0);
-__decorate([
-    property()
-], Dialog.prototype, "type", void 0);
-__decorate([
-    query('dialog')
-], Dialog.prototype, "dialog", void 0);
-__decorate([
-    query('.scrim')
-], Dialog.prototype, "scrim", void 0);
-__decorate([
-    query('.container')
-], Dialog.prototype, "container", void 0);
-__decorate([
-    query('.headline')
-], Dialog.prototype, "headline", void 0);
-__decorate([
-    query('.content')
-], Dialog.prototype, "content", void 0);
-__decorate([
-    query('.actions')
-], Dialog.prototype, "actions", void 0);
-__decorate([
-    state()
-], Dialog.prototype, "isAtScrollTop", void 0);
-__decorate([
-    state()
-], Dialog.prototype, "isAtScrollBottom", void 0);
-__decorate([
-    query('.scroller')
-], Dialog.prototype, "scroller", void 0);
-__decorate([
-    query('.top.anchor')
-], Dialog.prototype, "topAnchor", void 0);
-__decorate([
-    query('.bottom.anchor')
-], Dialog.prototype, "bottomAnchor", void 0);
-__decorate([
-    state()
-], Dialog.prototype, "hasHeadline", void 0);
-__decorate([
-    state()
-], Dialog.prototype, "hasActions", void 0);
-__decorate([
-    state()
-], Dialog.prototype, "hasIcon", void 0);
+    `;
+    }
+    firstUpdated() {
+        this.intersectionObserver = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                this.handleAnchorIntersection(entry);
+            }
+        }, { root: this.scroller });
+        this.intersectionObserver.observe(this.topAnchor);
+        this.intersectionObserver.observe(this.bottomAnchor);
+    }
+    handleDialogClick() {
+        if (this.nextClickIsFromContent) {
+            // Avoid doing a layout calculation below if we know the click came from
+            // content.
+            this.nextClickIsFromContent = false;
+            return;
+        }
+        // Click originated on the backdrop. Native `<dialog>`s will not cancel,
+        // but Material dialogs do.
+        const preventDefault = !this.dispatchEvent(new Event('cancel', { cancelable: true }));
+        if (preventDefault) {
+            return;
+        }
+        this.close();
+    }
+    handleContentClick() {
+        this.nextClickIsFromContent = true;
+    }
+    handleSubmit(event) {
+        var _a;
+        const form = event.target;
+        const { submitter } = event;
+        if (form.method !== 'dialog' || !submitter) {
+            return;
+        }
+        // Close reason is the submitter's value attribute, or the dialog's
+        // `returnValue` if there is no attribute.
+        this.close((_a = submitter.getAttribute('value')) !== null && _a !== void 0 ? _a : this.returnValue);
+    }
+    handleCancel(event) {
+        if (event.target !== this.dialog) {
+            // Ignore any cancel events dispatched by content.
+            return;
+        }
+        this.escapePressedWithoutCancel = false;
+        const preventDefault = !redispatchEvent(this, event);
+        // We always prevent default on the original dialog event since we'll
+        // animate closing it before it actually closes.
+        event.preventDefault();
+        if (preventDefault) {
+            return;
+        }
+        this.close();
+    }
+    handleClose() {
+        var _a;
+        if (!this.escapePressedWithoutCancel) {
+            return;
+        }
+        this.escapePressedWithoutCancel = false;
+        (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('cancel', { cancelable: true }));
+    }
+    handleKeydown(event) {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        // An escape key was pressed. If a "close" event fires next without a
+        // "cancel" event first, then we know we're in the Chrome v120 bug.
+        this.escapePressedWithoutCancel = true;
+        // Wait a full task for the cancel/close event listeners to fire, then
+        // reset the flag.
+        setTimeout(() => {
+            this.escapePressedWithoutCancel = false;
+        });
+    }
+    async animateDialog(animation) {
+        const { dialog, scrim, container, headline, content, actions } = this;
+        if (!dialog || !scrim || !container || !headline || !content || !actions) {
+            return;
+        }
+        const { container: containerAnimate, dialog: dialogAnimate, scrim: scrimAnimate, headline: headlineAnimate, content: contentAnimate, actions: actionsAnimate, } = animation;
+        const elementAndAnimation = [
+            [dialog, dialogAnimate !== null && dialogAnimate !== void 0 ? dialogAnimate : []],
+            [scrim, scrimAnimate !== null && scrimAnimate !== void 0 ? scrimAnimate : []],
+            [container, containerAnimate !== null && containerAnimate !== void 0 ? containerAnimate : []],
+            [headline, headlineAnimate !== null && headlineAnimate !== void 0 ? headlineAnimate : []],
+            [content, contentAnimate !== null && contentAnimate !== void 0 ? contentAnimate : []],
+            [actions, actionsAnimate !== null && actionsAnimate !== void 0 ? actionsAnimate : []],
+        ];
+        const animations = [];
+        for (const [element, animation] of elementAndAnimation) {
+            for (const animateArgs of animation) {
+                animations.push(element.animate(...animateArgs));
+            }
+        }
+        await Promise.all(animations.map(animation => animation.finished));
+    }
+    handleHeadlineChange(event) {
+        const slot = event.target;
+        this.hasHeadline = slot.assignedElements().length > 0;
+    }
+    handleActionsChange(event) {
+        const slot = event.target;
+        this.hasActions = slot.assignedElements().length > 0;
+    }
+    handleIconChange(event) {
+        const slot = event.target;
+        this.hasIcon = slot.assignedElements().length > 0;
+    }
+    handleAnchorIntersection(entry) {
+        const { target, isIntersecting } = entry;
+        if (target === this.topAnchor) {
+            this.isAtScrollTop = isIntersecting;
+        }
+        if (target === this.bottomAnchor) {
+            this.isAtScrollBottom = isIntersecting;
+        }
+    }
+    getIsConnectedPromise() {
+        return new Promise(resolve => {
+            this.isConnectedPromiseResolve = resolve;
+        });
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(Dialog);
+})();
+__decorate([
+    property({ type: Boolean })
+], Dialog.prototype, "open", null);
+__decorate([
+    property({ attribute: false })
+], Dialog.prototype, "returnValue", void 0);
+__decorate([
+    property()
+], Dialog.prototype, "type", void 0);
+__decorate([
+    query('dialog')
+], Dialog.prototype, "dialog", void 0);
+__decorate([
+    query('.scrim')
+], Dialog.prototype, "scrim", void 0);
+__decorate([
+    query('.container')
+], Dialog.prototype, "container", void 0);
+__decorate([
+    query('.headline')
+], Dialog.prototype, "headline", void 0);
+__decorate([
+    query('.content')
+], Dialog.prototype, "content", void 0);
+__decorate([
+    query('.actions')
+], Dialog.prototype, "actions", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "isAtScrollTop", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "isAtScrollBottom", void 0);
+__decorate([
+    query('.scroller')
+], Dialog.prototype, "scroller", void 0);
+__decorate([
+    query('.top.anchor')
+], Dialog.prototype, "topAnchor", void 0);
+__decorate([
+    query('.bottom.anchor')
+], Dialog.prototype, "bottomAnchor", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "hasHeadline", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "hasActions", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "hasIcon", void 0);
 //# sourceMappingURL=dialog.js.map

package/dist/ix-dialog.d.ts

@@ -1,4 +1,4 @@
-import { IxDialog } from './IxDialog.js';
-export declare class IxDialogStyled extends IxDialog {
-    static styles: import("lit").CSSResult;
-}
+import { IxDialog } from './IxDialog.js';
+export declare class IxDialogStyled extends IxDialog {
+    static styles: import("lit").CSSResult;
+}

package/dist/ix-dialog.js

@@ -1,7 +1,7 @@
-import { css } from 'lit';
-import { IxDialog } from './IxDialog.js';
-export class IxDialogStyled extends IxDialog {
-}
+import { css } from 'lit';
+import { IxDialog } from './IxDialog.js';
+export class IxDialogStyled extends IxDialog {
+}
 IxDialogStyled.styles = css `
     :root,
     :host :root,
@@ -17,6 +17,6 @@ IxDialogStyled.styles = css `
       font-size: var(--ix-dialog-font-size, 0.875rem);
       line-height: var(--ix-dialog-line-height, 1.25rem);
     }
-  `;
-window.customElements.define('ix-dialog', IxDialogStyled);
+  `;
+window.customElements.define('ix-dialog', IxDialogStyled);
 //# sourceMappingURL=ix-dialog.js.map

package/dist/md-dialog.d.ts

@@ -1,6 +1,6 @@
-import { CSSResultOrNative } from 'lit';
-import { Dialog } from './internal/dialog.js';
-export declare const styles: import("lit").CSSResult;
-export declare class MdDialog extends Dialog {
-    static styles: CSSResultOrNative[];
-}
+import { CSSResultOrNative } from 'lit';
+import { Dialog } from './internal/dialog.js';
+export declare const styles: import("lit").CSSResult;
+export declare class MdDialog extends Dialog {
+    static styles: CSSResultOrNative[];
+}

package/dist/md-dialog.js

@@ -1,5 +1,5 @@
-import { css } from 'lit';
-import { Dialog } from './internal/dialog.js';
+import { css } from 'lit';
+import { Dialog } from './internal/dialog.js';
 export const styles = css `
   :host {
     border-start-start-radius: var(
@@ -274,9 +274,9 @@ export const styles = css `
       outline: 2px solid WindowText;
     }
   }
-`;
-export class MdDialog extends Dialog {
-}
-MdDialog.styles = [styles];
-window.customElements.define('md-dialog', MdDialog);
+`;
+export class MdDialog extends Dialog {
+}
+MdDialog.styles = [styles];
+window.customElements.define('md-dialog', MdDialog);
 //# sourceMappingURL=md-dialog.js.map

package/dist/react/IxDialog.d.ts

@@ -1,2 +1,2 @@
-import { IxDialog as LitComp } from '../IxDialog.js';
-export declare const IxDialog: import("@lit/react").ReactWebComponent<LitComp, {}>;
+import { IxDialog as LitComp } from '../IxDialog.js';
+export declare const IxDialog: import("@lit/react").ReactWebComponent<LitComp, {}>;

package/dist/react/IxDialog.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import { createComponent } from '@lit/react';
-import { IxDialog as LitComp } from '../IxDialog.js';
-customElements.define('ix-dialog', LitComp);
-export const IxDialog = createComponent({
-    tagName: 'ix-dialog',
-    elementClass: LitComp,
-    react: React,
-});
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { IxDialog as LitComp } from '../IxDialog.js';
+customElements.define('ix-dialog', LitComp);
+export const IxDialog = createComponent({
+    tagName: 'ix-dialog',
+    elementClass: LitComp,
+    react: React,
+});
 //# sourceMappingURL=IxDialog.js.map

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-dialog following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.0.28",
+  "version": "1.0.30-alpha.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -100,5 +100,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "dc83d7ba595b824274ec44de0918b5b826fcd3ed"
+  "gitHead": "020de6dab25bbe6058e9a71b2c56681822403481"
 }