@m3e/dialog 1.0.0-rc.2 → 1.0.0-rc.4

package/dist/src/DialogElement.d.ts

@@ -0,0 +1,141 @@
+import { CSSResultGroup, LitElement } from "lit";
+declare const M3eDialogElement_base: typeof LitElement;
+/**
+ * A dialog that provides important prompts in a user flow.
+ *
+ * @description
+ * The `m3e-dialog` component presents important prompts, alerts, and actions in user flows.
+ * Designed according to Material 3 principles, it supports custom header, content, and
+ * close icon slots, ARIA accessibility, focus management, and theming via CSS custom properties.
+ *
+ * @example
+ * ```html
+ * <m3e-button variant="filled">
+ *   <m3e-dialog-trigger for="dlg">Open Dialog</m3e-dialog-trigger>
+ * </m3e-button>
+ * <m3e-dialog id="dlg" dismissible onclosed="console.log(this.returnValue)">
+ *   <span slot="header">Dialog Title</span>
+ *   Dialog content goes here.
+ *   <div slot="actions" end>
+ *     <m3e-button autofocus><m3e-dialog-action return-value="ok">Close</m3e-dialog-action></m3e-button>
+ *   </div>
+ * </m3e-dialog>
+ * ```
+ *
+ * @tag m3e-dialog
+ *
+ * @slot - Renders the content of the dialog.
+ * @slot header - Renders the header of the dialog.
+ * @slot actions - Renders the actions of the dialog.
+ * @slot close-icon - Renders the icon of the button used to close the dialog.
+ *
+ * @attr alert - Whether the dialog is an alert.
+ * @attr close-label - The accessible label given to the button used to dismiss the dialog.
+ * @attr disable-close -Whether users cannot click the backdrop or press escape to dismiss the dialog.
+ * @attr dismissible - Whether a button is presented that can be used to close the dialog.
+ * @attr no-focus-trap - Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.
+ * @attr open - Whether the dialog is open.
+ *
+ * @fires opening - Emitted when the dialog begins to open.
+ * @fires opened - Emitted when the dialog has opened.
+ * @fires cancel - Emitted when the dialog is cancelled.
+ * @fires closing - Emitted when the dialog begins to close.
+ * @fires closed - Emitted when the dialog has closed.
+ *
+ * @cssprop --m3e-dialog-shape - Border radius of the dialog container.
+ * @cssprop --m3e-dialog-min-width - Minimum width of the dialog.
+ * @cssprop --m3e-dialog-max-width - Maximum width of the dialog.
+ * @cssprop --m3e-dialog-color - Foreground color of the dialog.
+ * @cssprop --m3e-dialog-container-color - Background color of the dialog container.
+ * @cssprop --m3e-dialog-scrim-color - Color of the scrim (backdrop overlay).
+ * @cssprop --m3e-dialog-scrim-opacity - Opacity of the scrim when open.
+ * @cssprop --m3e-dialog-header-container-color - Background color of the dialog header.
+ * @cssprop --m3e-dialog-header-color - Foreground color of the dialog header.
+ * @cssprop --m3e-dialog-header-font-size - Font size for the dialog header.
+ * @cssprop --m3e-dialog-header-font-weight - Font weight for the dialog header.
+ * @cssprop --m3e-dialog-header-line-height - Line height for the dialog header.
+ * @cssprop --m3e-dialog-header-tracking - Letter spacing for the dialog header.
+ * @cssprop --m3e-dialog-content-color - Foreground color of the dialog content.
+ * @cssprop --m3e-dialog-content-font-size - Font size for the dialog content.
+ * @cssprop --m3e-dialog-content-font-weight - Font weight for the dialog content.
+ * @cssprop --m3e-dialog-content-line-height - Line height for the dialog content.
+ * @cssprop --m3e-dialog-content-tracking - Letter spacing for the dialog content.
+ */
+export declare class M3eDialogElement extends M3eDialogElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private static __nextId;
+    /** @private */ private _hasActions;
+    /** @private */ private readonly _base;
+    /** @private */ private readonly _content;
+    /**
+     * Whether the dialog is an alert.
+     * @default false
+     */
+    alert: boolean;
+    /**
+     * Whether the dialog is open.
+     * @default false
+     */
+    get open(): boolean;
+    set open(value: boolean);
+    /**
+     * Whether a button is presented that can be used to close the dialog.
+     * @default false
+     */
+    dismissible: boolean;
+    /**
+     * Whether users cannot click the backdrop or press ESC to dismiss the dialog.
+     * @default false
+     */
+    disableClose: boolean;
+    /**
+     * Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.
+     * @default false
+     */
+    noFocusTrap: boolean;
+    /**
+     * The accessible label given to the button used to dismiss the dialog.
+     * @default "Close"
+     */
+    closeLabel: string;
+    /**
+     * The return value of the dialog.
+     * @default ""
+     */
+    returnValue: string;
+    /**
+     * Asynchronously opens the dialog.
+     * @returns {Promise<void>} A `Promise` that resolves when the dialog is open.
+     */
+    show(): Promise<void>;
+    /**
+     * Asynchronously closes the dialog.
+     * @param {string} returnValue The value to return.
+     * @returns {Promise<void>} A `Promise` that resolves when the dialog is closed.
+     */
+    hide(returnValue?: string): Promise<void>;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+interface M3eDialogElementEventMap extends HTMLElementEventMap {
+    opening: Event;
+    opened: Event;
+    closing: Event;
+    closed: Event;
+    cancel: Event;
+}
+export interface M3eDialogElement {
+    addEventListener<K extends keyof M3eDialogElementEventMap>(type: K, listener: (this: M3eDialogElement, ev: M3eDialogElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof M3eDialogElementEventMap>(type: K, listener: (this: M3eDialogElement, ev: M3eDialogElementEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-dialog": M3eDialogElement;
+    }
+}
+export {};
+//# sourceMappingURL=DialogElement.d.ts.map

package/dist/src/DialogElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogElement.d.ts","sourceRoot":"","sources":["../../src/DialogElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAsB,MAAM,KAAK,CAAC;;AAOhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,qBACa,gBAAiB,SAAQ,qBAA8E;;IAClH,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA8IpC;IAEF,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAK;IAK5C,eAAe,CAAU,OAAO,CAAC,WAAW,CAAS;IACrD,eAAe,CAAiB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAqB;IAC3E,eAAe,CAAoB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAqB;IAEjF;;;OAGG;IAC0B,KAAK,UAAS;IAE3C;;;OAGG;IACH,IAAgD,IAAI,IAGpC,OAAO,CADtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAQtB;IAED;;;OAGG;IAC0B,WAAW,UAAS;IAEjD;;;OAGG;IACsD,YAAY,UAAS;IAE9E;;;OAGG;IACsD,WAAW,UAAS;IAE7E;;;OAGG;IACqC,UAAU,SAAW;IAE7D;;;OAGG;IACH,WAAW,SAAM;IAEjB;;;OAGG;IACG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IA6B3B;;;;OAIG;IACG,IAAI,CAAC,WAAW,GAAE,MAAyB,GAAG,OAAO,CAAC,IAAI,CAAC;IA0BjE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAiFrC;AAED,UAAU,wBAAyB,SAAQ,mBAAmB;IAC5D,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;IACd,MAAM,EAAE,KAAK,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,gBAAgB,CAAC,CAAC,SAAS,MAAM,wBAAwB,EACvD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3E,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,MAAM,wBAAwB,EAC1D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3E,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/dist/src/DialogTriggerElement.d.ts

@@ -0,0 +1,24 @@
+import { CSSResultGroup, LitElement } from "lit";
+declare const M3eDialogTriggerElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").HtmlForMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & typeof LitElement;
+/**
+ * An element, nested within a clickable element, used to open a dialog.
+ * @tag m3e-dialog-trigger
+ */
+export declare class M3eDialogTriggerElement extends M3eDialogTriggerElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-dialog-trigger": M3eDialogTriggerElement;
+    }
+}
+export {};
+//# sourceMappingURL=DialogTriggerElement.d.ts.map

package/dist/src/DialogTriggerElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogTriggerElement.d.ts","sourceRoot":"","sources":["../../src/DialogTriggerElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAO5D;;;GAGG;AACH,qBACa,uBAAwB,SAAQ,4BAAoC;;IAC/E,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAIpC;IASF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IASlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IASrC,kBAAkB;cACC,MAAM,IAAI,OAAO;CAGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}

package/dist/src/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./DialogActionElement";
+export * from "./DialogElement";
+export * from "./DialogTriggerElement";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/dialog",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.4",
   "description": "Dialog for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -27,8 +27,8 @@
     "clean": "rimraf dist"
   },
   "peerDependencies": {
-    "@m3e/core": "1.0.0-rc.2",
-    "@m3e/icon-button": "1.0.0-rc.2",
+    "@m3e/core": "1.0.0-rc.4",
+    "@m3e/icon-button": "1.0.0-rc.4",
     "lit": "^3.3.0"
   },
   "devDependencies": {