@lit-material/dialog 0.0.1 → 0.0.3

package/custom-elements.json

@@ -0,0 +1,264 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/dialog-styles.ts",
+      "declarations": [
+        {
+          "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; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/dialog-styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/dialog.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Material Design 3 (basic) dialog, built on the native `<dialog>` element —\nso focus trapping, initial focus, top-layer stacking, and Escape-to-close\nall come from the browser rather than reimplemented JS.\n\nNative `close`/`cancel` events on `<dialog>` don't bubble or cross the\nshadow boundary (per spec they're `bubbles: false`, and not composed), so\nthis re-dispatches its own bubbling, composed `close`/`cancel` events.\n\n`showModal()` auto-focuses the first focusable descendant when nothing has\n`autofocus` — which, with no autofocus of your own, would otherwise land on\nthe first slotted action button and show its focus ring on every open,\nlooking like a stray highlight the user never asked for. `container` is\ngiven `tabindex=\"-1\" autofocus` (with its own focus ring suppressed) so\nthat's the default focus target instead. Because `container` is an\nancestor of the slotted content, its `autofocus` always wins over one on a\nslotted element (tree order), so it can't be opted out of that way — to\nfocus a specific action instead, call `.focus()` on it yourself after\nopening the dialog.",
+          "name": "LitMaterialDialog",
+          "cssParts": [
+            {
+              "description": "The native `<dialog>` element. Transparent and sized to the viewport so clicks outside `container` can be detected as backdrop clicks; style the visible card via `container` instead.",
+              "name": "dialog"
+            },
+            {
+              "description": "The visible card (background, padding, shape, elevation).",
+              "name": "container"
+            }
+          ],
+          "slots": [
+            {
+              "description": "An optional small icon shown centered above the headline.",
+              "name": "icon"
+            },
+            {
+              "description": "The dialog's title.",
+              "name": "headline"
+            },
+            {
+              "description": "The dialog's body content (supporting text, form fields, etc.).",
+              "name": ""
+            },
+            {
+              "description": "Action buttons, right-aligned. A `<form method=\"dialog\">` submit button inside this slot closes the dialog natively and sets `returnValue`, without any extra JS.",
+              "name": "actions"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disableBackdropClose",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If set, clicking the backdrop (outside the visible card) does not close the dialog.",
+              "attribute": "disable-backdrop-close"
+            },
+            {
+              "kind": "field",
+              "name": "dialogElement",
+              "type": {
+                "text": "HTMLDialogElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "reopenOnClose",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Opens the dialog. Equivalent to setting `.open = true`."
+            },
+            {
+              "kind": "method",
+              "name": "close",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "returnValue",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Closes the dialog. Equivalent to setting `.open = false`."
+            },
+            {
+              "kind": "field",
+              "name": "returnValue",
+              "type": {
+                "text": "string"
+              },
+              "description": "The value the dialog was closed with (via `close()` or a `method=\"dialog\"` form submit).",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleClose",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleCancel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleBackdropClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "close",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Re-dispatched from the native `close` event, after the dialog has closed."
+            },
+            {
+              "name": "cancel",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Re-dispatched from the native `cancel` event (fired on Escape, before `close`). Cancelable: calling `preventDefault()` stops the dialog from closing."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "open"
+            },
+            {
+              "name": "disable-backdrop-close",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If set, clicking the backdrop (outside the visible card) does not close the dialog.",
+              "fieldName": "disableBackdropClose"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "lit-material-dialog",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialDialog",
+          "declaration": {
+            "name": "LitMaterialDialog",
+            "module": "src/dialog.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "lit-material-dialog",
+          "declaration": {
+            "name": "LitMaterialDialog",
+            "module": "src/dialog.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialDialog",
+          "declaration": {
+            "name": "LitMaterialDialog",
+            "module": "./dialog.js"
+          }
+        }
+      ]
+    }
+  ]
+}

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,yBAgGlB,CAAC"}
+{"version":3,"file":"dialog-styles.d.ts","sourceRoot":"","sources":["../src/dialog-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkGlB,CAAC"}

package/dist/dialog-styles.js

@@ -45,6 +45,8 @@ export const styles = css `
     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(
@@ -54,7 +56,7 @@ export const styles = css `
     );
   }
 
-  .icon ::slotted(*) {
+  slot.icon::slotted(*) {
     width: 24px;
     height: 24px;
     display: block;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGxB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGxB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lit-material/dialog",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Material Design 3 dialog web component, built on the native <dialog> element.",
   "license": "MIT",
   "author": {
@@ -15,7 +15,15 @@
     "url": "git+ssh://git@github.com/bohdaq/lit-material.git",
     "directory": "packages/dialog"
   },
-  "keywords": ["lit", "web-components", "lit-material", "material-design", "material-design-3", "dialog", "modal"],
+  "keywords": [
+    "lit",
+    "web-components",
+    "lit-material",
+    "material-design",
+    "material-design-3",
+    "dialog",
+    "modal"
+  ],
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -26,19 +34,15 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "custom-elements.json"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
-    "test": "web-test-runner && node --import tsx --test src/dialog.ssr.test.ts"
-  },
   "dependencies": {
-    "@lit-material/tokens": "workspace:*",
-    "lit": "^3.2.0"
+    "lit": "^3.2.0",
+    "@lit-material/tokens": "0.0.1"
   },
   "devDependencies": {
     "@lit-labs/ssr": "^3.3.1",
@@ -49,5 +53,12 @@
     "@web/test-runner-playwright": "^0.11.0",
     "tsx": "^4.19.0",
     "typescript": "^5.7.0"
+  },
+  "customElements": "custom-elements.json",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "web-test-runner && node --import tsx --test src/dialog.ssr.test.ts",
+    "analyze": "custom-elements-manifest analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.test.ts\" --exclude \"src/**/*.ssr.test.ts\""
   }
-}
+}