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

package/dist/src/DialogElement.d.ts

@@ -1,141 +0,0 @@
-import { CSSResultGroup, LitElement } from "lit";
-declare const M3eDialogElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
-/**
- * @summary
- * 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 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

@@ -1 +0,0 @@
-{"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,qBAOrC;;IACC,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

@@ -1,24 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,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

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

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

@@ -1 +0,0 @@
-{"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/eslint.config.mjs

@@ -1,13 +0,0 @@
-import eslint from "@eslint/js";
-import tseslint from "typescript-eslint";
-import { fileURLToPath } from "url";
-import { dirname } from "path";
-
-export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
-  languageOptions: {
-    parserOptions: {
-      project: true,
-      tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
-    },
-  },
-});

package/rollup.config.js

@@ -1,32 +0,0 @@
-import resolve from "@rollup/plugin-node-resolve";
-import terser from "@rollup/plugin-terser";
-import typescript from "@rollup/plugin-typescript";
-
-const banner = `/**
- * @license MIT
- * Copyright (c) 2025 matraic
- * See LICENSE file in the project root for full license text.
- */`;
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: "dist/index.js",
-        format: "esm",
-        sourcemap: true,
-        banner: banner,
-      },
-      {
-        file: "dist/index.min.js",
-        format: "esm",
-        sourcemap: true,
-        banner: banner,
-        plugins: [terser({ mangle: true })],
-      },
-    ],
-    external: ["@m3e/core", "@m3e/core/a11y", "@m3e/icon-button", "lit"],
-    plugins: [resolve(), typescript()],
-  },
-];

package/src/DialogActionElement.ts

@@ -1,56 +0,0 @@
-import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-import { AttachInternals, Role } from "@m3e/core";
-
-/**
- * An element, nested within a clickable element, used to close a parenting dialog.
- * @tag m3e-dialog-action
- *
- * @attr return-value - The value to return from the dialog.
- */
-@customElement("m3e-dialog-action")
-export class M3eDialogActionElement extends AttachInternals(Role(LitElement, "none")) {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = css`
-    :host {
-      display: contents;
-    }
-  `;
-
-  /**
-   * The value to return from the dialog.
-   * @default ""
-   */
-  @property({ attribute: "return-value" }) returnValue = "";
-
-  /** @private */
-  readonly #clickHandler = (e: Event) => {
-    if (!e.defaultPrevented) {
-      this.closest("m3e-dialog")?.hide(this.returnValue);
-    }
-  };
-
-  /** @inheritdoc */
-  override connectedCallback(): void {
-    super.connectedCallback();
-    this.parentElement?.addEventListener("click", this.#clickHandler);
-  }
-
-  /** @inheritdoc */
-  override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.parentElement?.removeEventListener("click", this.#clickHandler);
-  }
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<slot></slot>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-dialog-action": M3eDialogActionElement;
-  }
-}