@lit-material/dialog 0.0.4 → 0.1.1

package/README.md

@@ -80,6 +80,32 @@ dialog.
 | `cancel` | Yes        | On Escape, before the dialog closes.                              |
 | `close`  | No         | After the dialog closes (via `close()`, Escape, backdrop click, or a `method="dialog"` form submit). |
 
+## About dialog
+
+`lit-material-about-dialog` is what a Help → About menu item opens: the product's name and logo,
+version and build details, and legal lines, with a Close button. It also depends on
+`@lit-material/button`.
+
+```html
+<lit-material-about-dialog product-name="Acme Console">
+  <img slot="logo" src="logo.svg" alt="" />
+  <dl>
+    <dt>Version</dt><dd>2.4.1</dd>
+    <dt>Build</dt><dd>2026-11-01 · 03c3708</dd>
+  </dl>
+  <span slot="legal">© 2026 Acme. MIT license.</span>
+</lit-material-about-dialog>
+```
+
+| Property      | Attribute      | Type      | Default   |
+| ------------- | -------------- | --------- | --------- |
+| `productName` | `product-name` | `string` (the heading) | `""` |
+| `open`        | `open` (reflected) | `boolean` | `false` |
+| `closeLabel`  | `close-label`  | `string`  | `"Close"` |
+
+`show()` and `close()` open and close it; `close` fires after it closes (Close, Escape or a click
+outside). Slots: `logo`, default (details), `legal`.
+
 ## License
 
 MIT

package/custom-elements.json

@@ -2,6 +2,141 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/about-dialog.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An \"About\" dialog: the product's name and logo, its version and build\ndetails, and the legal lines — what a Help → About menu item opens.\n\nPut the details in the default slot (a `<dl>` of Version, Build, Server\nand so on, or a `lit-material-description-list`), the logo in `logo` and\ncopyright and trademark text in `legal`. A Close button closes it, as do\nEscape and a click outside.",
+          "name": "LitMaterialAboutDialog",
+          "slots": [
+            {
+              "description": "The product's logo, shown above its name.",
+              "name": "logo"
+            },
+            {
+              "description": "Version and build details.",
+              "name": ""
+            },
+            {
+              "description": "Copyright, trademark and license lines, in small print.",
+              "name": "legal"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "productName",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The product's name: the dialog's heading.",
+              "attribute": "product-name"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "closeLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Close\"",
+              "description": "The close button's text.",
+              "attribute": "close-label"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Opens the dialog."
+            },
+            {
+              "kind": "method",
+              "name": "close",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Closes the dialog."
+            }
+          ],
+          "events": [
+            {
+              "description": "After the dialog has closed.",
+              "name": "close"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "product-name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The product's name: the dialog's heading.",
+              "fieldName": "productName"
+            },
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "open"
+            },
+            {
+              "name": "close-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Close\"",
+              "description": "The close button's text.",
+              "fieldName": "closeLabel"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "lit-material-about-dialog",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialAboutDialog",
+          "declaration": {
+            "name": "LitMaterialAboutDialog",
+            "module": "src/about-dialog.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "lit-material-about-dialog",
+          "declaration": {
+            "name": "LitMaterialAboutDialog",
+            "module": "src/about-dialog.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/dialog-styles.ts",
@@ -9,7 +144,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css` :host { display: contents; } /* The dialog element itself is transparent and fills the viewport (rather than shrink-wrapping the visible card) so a click landing outside .container still has its event target equal to the dialog element — that's what lets the backdrop-click handler use a simple equality check instead of manual hit-testing against the card's bounding box. */ .dialog { margin: 0; padding: 0; border: none; width: 100%; height: 100%; max-width: 100%; max-height: 100%; background: transparent; color: inherit; } .dialog[open] { display: flex; align-items: center; justify-content: center; } .dialog::backdrop { background-color: rgba(0, 0, 0, 0.32); } .container { display: flex; flex-direction: column; align-items: stretch; gap: 16px; box-sizing: border-box; /* Not part of the tab order (see the component for why it's the default focus target) — no visible focus indicator of its own. */ outline: none; width: min(560px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 24px; border-radius: var(--md-sys-shape-corner-extra-large, 28px); background-color: var(--md-sys-color-surface-container-high, #ece6f0); /* Outlined text fields in the body notch their label against this surface. */ --lit-material-text-field-notch-color: var(--md-sys-color-surface-container-high, #ece6f0); color: var(--md-sys-color-on-surface, #1c1b1f); font-family: var(--md-sys-typescale-body-medium-font, Roboto, system-ui, sans-serif); box-shadow: var( --md-sys-elevation-level3, 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) ); } slot.icon::slotted(*) { width: 24px; height: 24px; display: block; color: var(--md-sys-color-secondary, #625b71); } .icon:has(::slotted(*)) { align-self: center; } .headline { display: block; color: var(--md-sys-color-on-surface, #1c1b1f); font-family: var(--md-sys-typescale-headline-small-font, Roboto, system-ui, sans-serif); font-size: var(--md-sys-typescale-headline-small-size, 1.5rem); line-height: var(--md-sys-typescale-headline-small-line-height, 2rem); } .icon:has(::slotted(*)) ~ .headline { text-align: center; } .content { flex: 1; min-height: 0; overflow-y: auto; color: var(--md-sys-color-on-surface-variant, #49454f); font-size: var(--md-sys-typescale-body-medium-size, 0.875rem); line-height: var(--md-sys-typescale-body-medium-line-height, 1.25rem); } .actions { display: flex; justify-content: flex-end; gap: 8px; } .actions:empty { display: none; } `"
+          "default": "css` :host { display: contents; } :host([hidden]) { display: none; } /* The dialog element itself is transparent and fills the viewport (rather than shrink-wrapping the visible card) so a click landing outside .container still has its event target equal to the dialog element — that's what lets the backdrop-click handler use a simple equality check instead of manual hit-testing against the card's bounding box. */ .dialog { margin: 0; padding: 0; border: none; width: 100%; height: 100%; max-width: 100%; max-height: 100%; background: transparent; color: inherit; } .dialog[open] { display: flex; align-items: center; justify-content: center; } .dialog::backdrop { background-color: rgba(0, 0, 0, 0.32); } .container { display: flex; flex-direction: column; align-items: stretch; gap: 16px; box-sizing: border-box; /* Not part of the tab order (see the component for why it's the default focus target) — no visible focus indicator of its own. */ outline: none; width: min(560px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 24px; border-radius: var(--md-sys-shape-corner-extra-large, 28px); background-color: var(--md-sys-color-surface-container-high, #ece6f0); /* Outlined text fields in the body notch their label against this surface. */ --lit-material-text-field-notch-color: var(--md-sys-color-surface-container-high, #ece6f0); color: var(--md-sys-color-on-surface, #1c1b1f); font-family: var(--md-sys-typescale-body-medium-font, Roboto, system-ui, sans-serif); box-shadow: var( --md-sys-elevation-level3, 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) ); } slot.icon::slotted(*) { width: 24px; height: 24px; display: block; color: var(--md-sys-color-secondary, #625b71); } .icon:has(::slotted(*)) { align-self: center; } .headline { display: block; color: var(--md-sys-color-on-surface, #1c1b1f); font-family: var(--md-sys-typescale-headline-small-font, Roboto, system-ui, sans-serif); font-size: var(--md-sys-typescale-headline-small-size, 1.5rem); line-height: var(--md-sys-typescale-headline-small-line-height, 2rem); } .icon:has(::slotted(*)) ~ .headline { text-align: center; } .content { flex: 1; min-height: 0; overflow-y: auto; color: var(--md-sys-color-on-surface-variant, #49454f); font-size: var(--md-sys-typescale-body-medium-size, 0.875rem); line-height: var(--md-sys-typescale-body-medium-line-height, 1.25rem); } .actions { display: flex; justify-content: flex-end; gap: 8px; } .actions:empty { display: none; } `"
         }
       ],
       "exports": [
@@ -257,6 +392,14 @@
             "name": "LitMaterialDialog",
             "module": "./dialog.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "LitMaterialAboutDialog",
+          "declaration": {
+            "name": "LitMaterialAboutDialog",
+            "module": "./about-dialog.js"
+          }
         }
       ]
     }

package/dist/about-dialog.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from "lit";
+import "@lit-material/button";
+import "./dialog.js";
+/**
+ * An "About" dialog: the product's name and logo, its version and build
+ * details, and the legal lines — what a Help → About menu item opens.
+ *
+ * Put the details in the default slot (a `<dl>` of Version, Build, Server
+ * and so on, or a `lit-material-description-list`), the logo in `logo` and
+ * copyright and trademark text in `legal`. A Close button closes it, as do
+ * Escape and a click outside.
+ *
+ * @element lit-material-about-dialog
+ *
+ * @slot logo - The product's logo, shown above its name.
+ * @slot - Version and build details.
+ * @slot legal - Copyright, trademark and license lines, in small print.
+ *
+ * @fires close - After the dialog has closed.
+ */
+export declare class LitMaterialAboutDialog extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The product's name: the dialog's heading. */
+    productName: string;
+    open: boolean;
+    /** The close button's text. */
+    closeLabel: string;
+    /** Opens the dialog. */
+    show(): void;
+    /** Closes the dialog. */
+    close(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "lit-material-about-dialog": LitMaterialAboutDialog;
+    }
+}
+//# sourceMappingURL=about-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"about-dialog.d.ts","sourceRoot":"","sources":["../src/about-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,aAAa,CAAC;AAErB;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD,OAAgB,MAAM,0BA2BpB;IAEF,gDAAgD;IACP,WAAW,SAAM;IAEd,IAAI,UAAS;IAEzD,+BAA+B;IACS,UAAU,SAAW;IAE7D,wBAAwB;IACxB,IAAI,IAAI,IAAI;IAIZ,yBAAyB;IACzB,KAAK,IAAI,IAAI;IAIJ,MAAM;CAUhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,2BAA2B,EAAE,sBAAsB,CAAC;KACrD;CACF"}

package/dist/about-dialog.js

@@ -0,0 +1,97 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "@lit-material/button";
+import "./dialog.js";
+/**
+ * An "About" dialog: the product's name and logo, its version and build
+ * details, and the legal lines — what a Help → About menu item opens.
+ *
+ * Put the details in the default slot (a `<dl>` of Version, Build, Server
+ * and so on, or a `lit-material-description-list`), the logo in `logo` and
+ * copyright and trademark text in `legal`. A Close button closes it, as do
+ * Escape and a click outside.
+ *
+ * @element lit-material-about-dialog
+ *
+ * @slot logo - The product's logo, shown above its name.
+ * @slot - Version and build details.
+ * @slot legal - Copyright, trademark and license lines, in small print.
+ *
+ * @fires close - After the dialog has closed.
+ */
+let LitMaterialAboutDialog = class LitMaterialAboutDialog extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The product's name: the dialog's heading. */
+        this.productName = "";
+        this.open = false;
+        /** The close button's text. */
+        this.closeLabel = "Close";
+    }
+    static { this.styles = css `
+    :host {
+      display: contents;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+    .logo::slotted(*) {
+      display: block;
+      max-width: 100%;
+      max-height: 64px;
+      margin-block-end: 8px;
+    }
+    .name {
+      text-align: start;
+    }
+    .details {
+      color: var(--md-sys-color-on-surface, light-dark(#1d1b20, #e6e0e9));
+    }
+    .legal {
+      display: block;
+      margin-block-start: 16px;
+      color: var(--md-sys-color-on-surface-variant, light-dark(#49454f, #cac4d0));
+      font-size: var(--md-sys-typescale-body-small-size, 0.75rem);
+      line-height: var(--md-sys-typescale-body-small-line-height, 1rem);
+    }
+  `; }
+    /** Opens the dialog. */
+    show() {
+        this.open = true;
+    }
+    /** Closes the dialog. */
+    close() {
+        this.open = false;
+    }
+    render() {
+        // The inner dialog's `close` is composed, so it already reaches listeners
+        // on this element; only the state needs following.
+        return html `<lit-material-dialog .open=${this.open} @close=${() => (this.open = false)}>
+      <span slot="headline" class="name"><slot name="logo" class="logo"></slot>${this.productName}</span>
+      <div class="details"><slot></slot></div>
+      <slot name="legal" class="legal"></slot>
+      <lit-material-button slot="actions" variant="text" @click=${() => this.close()}>${this.closeLabel}</lit-material-button>
+    </lit-material-dialog>`;
+    }
+};
+__decorate([
+    property({ attribute: "product-name" })
+], LitMaterialAboutDialog.prototype, "productName", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialAboutDialog.prototype, "open", void 0);
+__decorate([
+    property({ attribute: "close-label" })
+], LitMaterialAboutDialog.prototype, "closeLabel", void 0);
+LitMaterialAboutDialog = __decorate([
+    customElement("lit-material-about-dialog")
+], LitMaterialAboutDialog);
+export { LitMaterialAboutDialog };
+//# sourceMappingURL=about-dialog.js.map

package/dist/about-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"about-dialog.js","sourceRoot":"","sources":["../src/about-dialog.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,sBAAsB,CAAC;AAC9B,OAAO,aAAa,CAAC;AAErB;;;;;;;;;;;;;;;;GAgBG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;IAA/C;;QA8BL,gDAAgD;QACP,gBAAW,GAAG,EAAE,CAAC;QAEd,SAAI,GAAG,KAAK,CAAC;QAEzD,+BAA+B;QACS,eAAU,GAAG,OAAO,CAAC;IAsB/D,CAAC;aAzDiB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2B3B,AA3BqB,CA2BpB;IAUF,wBAAwB;IACxB,IAAI;QACF,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,yBAAyB;IACzB,KAAK;QACH,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAEQ,MAAM;QACb,0EAA0E;QAC1E,mDAAmD;QACnD,OAAO,IAAI,CAAA,8BAA8B,IAAI,CAAC,IAAI,WAAW,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;iFACT,IAAI,CAAC,WAAW;;;kEAG/B,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,IAAI,CAAC,UAAU;2BAC5E,CAAC;IAC1B,CAAC;;AA1BwC;IAAxC,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2DAAkB;AAEd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAc;AAGjB;IAAvC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;0DAAsB;AApClD,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CA0DlC"}

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

@@ -1 +1 @@
-{"version":3,"file":"dialog-styles.d.ts","sourceRoot":"","sources":["../src/dialog-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkGlB,CAAC"}
+{"version":3,"file":"dialog-styles.d.ts","sourceRoot":"","sources":["../src/dialog-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAsGlB,CAAC"}

package/dist/dialog-styles.js

@@ -4,6 +4,10 @@ export const styles = css `
     display: contents;
   }
 
+  :host([hidden]) {
+    display: none;
+  }
+
   /* The dialog element itself is transparent and fills the viewport (rather
      than shrink-wrapping the visible card) so a click landing outside
      .container still has its event target equal to the dialog element —

package/dist/dialog-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-styles.js","sourceRoot":"","sources":["../src/dialog-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGxB,CAAC"}
+{"version":3,"file":"dialog-styles.js","sourceRoot":"","sources":["../src/dialog-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGxB,CAAC"}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { LitMaterialDialog } from "./dialog.js";
+export { LitMaterialAboutDialog } from "./about-dialog.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -1,2 +1,3 @@
 export { LitMaterialDialog } from "./dialog.js";
+export { LitMaterialAboutDialog } from "./about-dialog.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lit-material/dialog",
-  "version": "0.0.4",
+  "version": "0.1.1",
   "description": "Material Design 3 dialog web component, built on the native <dialog> element.",
   "license": "MIT",
   "author": {
@@ -42,7 +42,8 @@
   },
   "dependencies": {
     "lit": "^3.2.0",
-    "@lit-material/tokens": "0.0.2"
+    "@lit-material/button": "0.2.1",
+    "@lit-material/tokens": "0.1.0"
   },
   "devDependencies": {
     "@lit-labs/ssr": "^3.3.1",