npm - @m3e/dialog - Versions diffs - 1.0.0-rc.1 → 1.0.0-rc.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/README.md +2 -0
package/dist/custom-elements.json +2696 -12
package/dist/html-custom-data.json +9 -3
package/dist/index.js +4 -4
package/dist/index.js.map +1 -1
package/dist/index.min.js +41 -41
package/dist/index.min.js.map +1 -1
package/dist/src/DialogActionElement.d.ts +1 -1
package/dist/src/DialogActionElement.d.ts.map +1 -1
package/dist/src/DialogElement.d.ts +2 -2
package/dist/src/DialogElement.d.ts.map +1 -1
package/package.json +4 -4
package/cem.config.mjs +0 -16
package/demo/index.html +0 -60
package/eslint.config.mjs +0 -13
package/rollup.config.js +0 -32
package/src/DialogActionElement.ts +0 -56
package/src/DialogElement.ts +0 -472
package/src/DialogTriggerElement.ts +0 -50
package/src/index.ts +0 -3
package/tsconfig.json +0 -9

package/demo/index.html DELETED Viewed

@@ -1,60 +0,0 @@
-<!doctype html>
-<html lang="en" style="overflow-y: auto">
-  <head>
-    <title>Dialog for M3E</title>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="Dialog for M3E" />
-    <base href="./" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0"
-      rel="stylesheet"
-    />
-    <script type="importmap">
-      {
-        "imports": {
-          "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
-          "@m3e/core": "../../core/dist/index.min.js",
-          "@m3e/core/a11y": "../../core/dist/a11y.min.js"
-        }
-      }
-    </script>
-    <script type="module" src="../../icon/dist/index.min.js"></script>
-    <script type="module" src="../../theme/dist/index.min.js"></script>
-    <script type="module" src="../../button/dist/index.min.js"></script>
-    <script type="module" src="../../icon-button/dist/index.min.js"></script>
-    <script type="module" src="../dist/index.min.js"></script>
-    <style>
-      body {
-        font-family: "Roboto";
-      }
-      *:not(:defined) {
-        display: none;
-      }
-    </style>
-  </head>
-  <body>
-    <m3e-theme strong-focus>
-      <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">Lorem ipsum dolor sit amet</span>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-        <div slot="actions" end>
-          <m3e-button autofocus><m3e-dialog-action return-value="ok">Close</m3e-dialog-action></m3e-button>
-        </div>
-      </m3e-dialog>
-    </m3e-theme>
-  </body>
-</html>

package/eslint.config.mjs DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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;
-  }
-}

package/src/DialogElement.ts DELETED Viewed

@@ -1,472 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */
-import { css, CSSResultGroup, html, LitElement, nothing, unsafeCSS } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { DesignToken, EventAttribute, prefersReducedMotion, Role } from "@m3e/core";
-import {} from "@m3e/core/a11y";
-/**
- * @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.
- */
-@customElement("m3e-dialog")
-export class M3eDialogElement extends EventAttribute(
-  Role(LitElement, "none"),
-  "opening",
-  "opened",
-  "cancel",
-  "closing",
-  "closed"
-) {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = css`
-    :host {
-      display: contents;
-    }
-    .base {
-      font: inherit;
-      border: unset;
-      outline: unset;
-      padding: unset;
-      display: flex;
-      flex-direction: column;
-      position: fixed;
-      overflow: visible;
-      border-radius: var(--m3e-dialog-shape, ${DesignToken.shape.corner.extraLarge});
-      min-width: var(--m3e-dialog-min-width, 17.5rem);
-      max-width: var(--m3e-dialog-max-width, 35rem);
-      color: var(--m3e-dialog-color, ${DesignToken.color.onSurface});
-      background-color: var(--m3e-dialog-container-color, ${DesignToken.color.surfaceContainerHigh});
-      visibility: hidden;
-      opacity: 0;
-      transform-origin: top;
-      transform: translateY(-3.125rem) scaleY(0.8);
-    }
-    .base::backdrop {
-      background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent);
-      margin-right: -20px;
-    }
-    .base:not([open]) {
-      visibility: hidden;
-      opacity: 0;
-      transform: translateY(-3.125rem) scaleY(0.8);
-      transition: ${unsafeCSS(
-        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized},
-        transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized},
-        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized} allow-discrete,
-        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized} allow-discrete`
-      )};
-    }
-    .base[open] {
-      visibility: visible;
-      opacity: 1;
-      transform: translateY(0) scaleY(1);
-      transition: ${unsafeCSS(
-        `opacity ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized},
-        transform ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized},
-        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized} allow-discrete,
-        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized} allow-discrete`
-      )};
-    }
-    .base:not([open])::backdrop {
-      transition: ${unsafeCSS(
-        `background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
-        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
-        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`
-      )};
-    }
-    .base[open]::backdrop {
-      background-color: color-mix(
-        in srgb,
-        var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) var(--m3e-dialog-scrim-opacity, 32%),
-        transparent
-      );
-      transition: ${unsafeCSS(
-        `background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},
-        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,
-        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`
-      )};
-    }
-    @starting-style {
-      .base[open] {
-        opacity: 0;
-        transform: translateY(-3.125rem) scaleY(0.8);
-      }
-      .base[open]::backdrop {
-        background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent);
-      }
-    }
-    .header {
-      flex: none;
-      display: flex;
-      align-items: center;
-      padding: 1.5rem 1.5rem 1rem 1.5rem;
-      background-color: var(--m3e-dialog-header-container-color, transparent);
-    }
-    ::slotted([slot="header"]) {
-      margin: unset;
-      flex: 1 1 auto;
-      color: var(--m3e-dialog-header-color, inherit);
-      font-size: var(--m3e-dialog-header-font-size, ${DesignToken.typescale.standard.headline.small.fontSize});
-      font-weight: var(--m3e-dialog-header-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight});
-      line-height: var(--m3e-dialog-header-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight});
-      letter-spacing: var(--m3e-dialog-header-tracking, ${DesignToken.typescale.standard.headline.small.tracking});
-    }
-    .content {
-      padding-inline: 1.5rem;
-      color: var(--m3e-dialog-content-color, ${DesignToken.color.onSurfaceVariant});
-      font-size: var(--m3e-dialog-content-font-size, ${DesignToken.typescale.standard.body.medium.fontSize});
-      font-weight: var(--m3e-dialog-content-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight});
-      line-height: var(--m3e-dialog-content-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight});
-      letter-spacing: var(--m3e-dialog-content-tracking, ${DesignToken.typescale.standard.body.medium.tracking});
-    }
-    ::slotted([slot="actions"]) {
-      flex: none;
-      display: flex;
-      align-items: center;
-      min-height: 1.5rem;
-      padding: 1.5rem;
-      column-gap: 0.5rem;
-    }
-    ::slotted([slot="actions"][end]) {
-      justify-content: flex-end;
-    }
-    :host(:not(.-has-actions)) .content {
-      margin-bottom: 1.5rem;
-    }
-    .close {
-      margin-left: 0.5rem;
-    }
-    ::slotted([slot="close-icon"]),
-    .close-icon {
-      width: 1em;
-      font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;
-    }
-    @media (forced-colors: active) {
-      .base:not([open])::backdrop,
-      .base[open]::backdrop {
-        transition: none;
-      }
-      .base {
-        border-style: solid;
-        border-width: 1px;
-        border-color: CanvasText;
-      }
-    }
-    @media (prefers-reduced-motion) {
-      .base:not([open]),
-      .base[open],
-      .base:not([open])::backdrop,
-      .base[open]::backdrop {
-        transition: none;
-      }
-    }
-  `;
-  /** @private */ private static __nextId = 0;
-  /** @private */ #id = M3eDialogElement.__nextId++;
-  /** @private */ #open = false;
-  /** @private */ #escapePressedWithoutCancel = false;
-  /** @private */ @state() private _hasActions = false;
-  /** @private */ @query(".base") private readonly _base!: HTMLDialogElement;
-  /** @private */ @query(".content") private readonly _content!: HTMLDialogElement;
-  /**
-   * Whether the dialog is an alert.
-   * @default false
-   */
-  @property({ type: Boolean }) alert = false;
-  /**
-   * Whether the dialog is open.
-   * @default false
-   */
-  @property({ type: Boolean, reflect: true }) get open() {
-    return this.#open;
-  }
-  set open(value: boolean) {
-    if (value === this.#open) return;
-    this.#open = value;
-    if (this.#open) {
-      this.show();
-    } else {
-      this.hide();
-    }
-  }
-  /**
-   * Whether a button is presented that can be used to close the dialog.
-   * @default false
-   */
-  @property({ type: Boolean }) dismissible = false;
-  /**
-   * Whether users cannot click the backdrop or press ESC to dismiss the dialog.
-   * @default false
-   */
-  @property({ attribute: "disable-close", type: Boolean }) disableClose = false;
-  /**
-   * Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.
-   * @default false
-   */
-  @property({ attribute: "no-focus-trap", type: Boolean }) noFocusTrap = false;
-  /**
-   * The accessible label given to the button used to dismiss the dialog.
-   * @default "Close"
-   */
-  @property({ attribute: "close-label" }) closeLabel = "Close";
-  /**
-   * The return value of the dialog.
-   * @default ""
-   */
-  returnValue = "";
-  /**
-   * Asynchronously opens the dialog.
-   * @returns {Promise<void>} A `Promise` that resolves when the dialog is open.
-   */
-  async show(): Promise<void> {
-    await this.updateComplete;
-    if (this._base.open) {
-      return;
-    }
-    if (!this.dispatchEvent(new Event("opening", { cancelable: true }))) {
-      this.open = false;
-      return;
-    }
-    this._base.showModal();
-    this._content.scrollTop = 0;
-    const focusable = this.querySelector<HTMLElement>("[autofocus]");
-    if (focusable) {
-      if (!prefersReducedMotion()) {
-        this._base.addEventListener("transitionend", () => focusable.focus(), {
-          once: true,
-        });
-      } else {
-        focusable.focus();
-      }
-    }
-    this.dispatchEvent(new Event("opened"));
-  }
-  /**
-   * Asynchronously closes the dialog.
-   * @param {string} returnValue The value to return.
-   * @returns {Promise<void>} A `Promise` that resolves when the dialog is closed.
-   */
-  async hide(returnValue: string = this.returnValue): Promise<void> {
-    if (!this.isConnected) {
-      this.open = false;
-      return;
-    }
-    await this.updateComplete;
-    if (!this._base.open) {
-      this.open = false;
-      return;
-    }
-    const prevReturnValue = this.returnValue;
-    this.returnValue = returnValue;
-    if (!this.dispatchEvent(new Event("closing", { cancelable: true }))) {
-      this.returnValue = prevReturnValue;
-      return;
-    }
-    this.open = false;
-    this._base.close(returnValue);
-    this.dispatchEvent(new Event("closed"));
-  }
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<dialog
-      class="base"
-      role="${ifDefined(this.alert ? "alertdialog" : undefined)}"
-      aria-labelledby="m3e-dialog-${this.#id}-header"
-      .returnValue="${this.returnValue}"
-      @close="${this.#handleClose}"
-      @cancel="${this.#handleCancel}"
-      @click="${this.#handleClick}"
-      @keydown="${this.#handleKeyDown}"
-    >
-      <m3e-elevation level="3"></m3e-elevation>
-      <m3e-focus-trap ?disabled="${this.noFocusTrap}">
-        <div class="header">
-          <slot name="header" id="m3e-dialog-${this.#id}-header"></slot>
-          ${this.#renderCloseButton()}
-        </div>
-        <m3e-scroll-container class="content" dividers="${this._hasActions ? "above-below" : "above"}">
-          <slot></slot>
-        </m3e-scroll-container>
-        <slot name="actions" @slotchange="${this.#handleActionsSlotChange}"></slot>
-      </m3e-focus-trap>
-    </dialog>`;
-  }
-  /** @private */
-  #renderCloseButton(): unknown {
-    return !this.dismissible
-      ? nothing
-      : html`<m3e-icon-button aria-label="${this.closeLabel}" class="close" @click="${this.hide}">
-          <slot name="close-icon">
-            <svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor">
-              <path
-                d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"
-              />
-            </svg>
-          </slot>
-        </m3e-icon-button>`;
-  }
-  /** @private */
-  #handleClose(): void {
-    if (!this.#escapePressedWithoutCancel) {
-      return;
-    }
-    this.#escapePressedWithoutCancel = true;
-    this._base?.dispatchEvent(new Event("cancel", { cancelable: true }));
-  }
-  /** @private */
-  #handleCancel(e: Event): void {
-    if (e.target !== this._base) return;
-    this.#escapePressedWithoutCancel = false;
-    e.preventDefault();
-    if (!this.dispatchEvent(new Event("cancel", { cancelable: true }))) {
-      this.hide();
-    }
-  }
-  /** @private */
-  #handleClick(e: Event): void {
-    if (!this.disableClose && e.target === this._base) {
-      this.hide();
-    }
-  }
-  /** @private */
-  #handleKeyDown(e: KeyboardEvent): void {
-    if (e.key === "Escape" && !e.shiftKey && !e.ctrlKey) {
-      e.preventDefault();
-      if (!this.disableClose) {
-        this.hide();
-      }
-    }
-  }
-  /** @private */
-  #handleActionsSlotChange(e: Event): void {
-    this._hasActions = (<HTMLSlotElement>e.target).assignedNodes({ flatten: true }).length > 0;
-    this.classList.toggle("-has-actions", this._hasActions);
-  }
-}
-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;
-  }
-}

package/src/DialogTriggerElement.ts DELETED Viewed

@@ -1,50 +0,0 @@
-import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-import { AttachInternals, HtmlFor } from "@m3e/core";
-import { M3eDialogElement } from "./DialogElement";
-/**
- * An element, nested within a clickable element, used to open a dialog.
- * @tag m3e-dialog-trigger
- */
-@customElement("m3e-dialog-trigger")
-export class M3eDialogTriggerElement extends HtmlFor(AttachInternals(LitElement)) {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = css`
-    :host {
-      display: contents;
-    }
-  `;
-  /** @private */
-  #clickHandler = (e: Event) => {
-    if (!e.defaultPrevented && this.control instanceof M3eDialogElement) {
-      this.control.show();
-    }
-  };
-  /** @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-trigger": M3eDialogTriggerElement;
-  }
-}

package/src/index.ts DELETED Viewed

@@ -1,3 +0,0 @@
-export * from "./DialogActionElement";
-export * from "./DialogElement";
-export * from "./DialogTriggerElement";