@manzanohq/components 0.1.1 → 0.1.4

package/dist/components/accordion-item/accordion-item.component.d.ts

@@ -0,0 +1,34 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A collapsible section within an accordion. Used inside `mz-accordion`.
+ *
+ * @tag mz-accordion-item
+ *
+ * @slot - The collapsible content.
+ * @slot summary - Custom header content (overrides the `summary` property).
+ * @slot expand-icon - Custom expand/collapse icon.
+ *
+ * @event mz-show - Emitted when the item starts opening. Cancelable.
+ * @event mz-hide - Emitted when the item starts closing. Cancelable.
+ * @event mz-after-show - Emitted after the open animation completes.
+ * @event mz-after-hide - Emitted after the close animation completes.
+ *
+ * @csspart header - The clickable header area.
+ * @csspart icon - The expand/collapse icon wrapper.
+ * @csspart content - The content area.
+ */
+export declare class MzAccordionItem extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    private readonly componentId;
+    /** Whether the item is expanded. */
+    open: boolean;
+    /** Whether the item is disabled. */
+    disabled: boolean;
+    /** The header summary text. Use the `summary` slot for richer content. */
+    summary: string;
+    private handleToggle;
+    private handleTransitionEnd;
+    private handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=accordion-item.component.d.ts.map

package/dist/components/accordion-item/accordion-item.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.component.d.ts","sourceRoot":"","sources":["../../../src/components/accordion-item/accordion-item.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAKnE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,eAAgB,SAAQ,cAAc;IACjD,MAAM,CAAC,MAAM,4BAAU;IAEvB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAgC;IAE5D,oCAAoC;IACQ,IAAI,UAAS;IAEzD,oCAAoC;IACQ,QAAQ,UAAS;IAE7D,0EAA0E;IAC9D,OAAO,SAAM;IAEzB,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,aAAa;IAOrB,MAAM;CA2DP"}

package/dist/components/accordion-item/accordion-item.component.js

@@ -0,0 +1,123 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./accordion-item.styles.js";
+let nextId = 0;
+class MzAccordionItem extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.componentId = `accordion-item-${++nextId}`;
+    this.open = false;
+    this.disabled = false;
+    this.summary = "";
+  }
+  handleToggle() {
+    if (this.disabled) return;
+    if (this.open) {
+      const allowed = this.emit("mz-hide", { cancelable: true });
+      if (!allowed) return;
+      this.open = false;
+    } else {
+      const allowed = this.emit("mz-show", { cancelable: true });
+      if (!allowed) return;
+      this.open = true;
+    }
+  }
+  handleTransitionEnd(e) {
+    if (e.propertyName !== "grid-template-rows") return;
+    if (this.open) {
+      this.emit("mz-after-show");
+    } else {
+      this.emit("mz-after-hide");
+    }
+  }
+  handleKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this.handleToggle();
+    }
+  }
+  render() {
+    const headerId = `${this.componentId}-header`;
+    const contentId = `${this.componentId}-content`;
+    return html`
+      <div
+        class=${classMap({
+      "accordion-item": true,
+      "accordion-item--open": this.open,
+      "accordion-item--disabled": this.disabled
+    })}
+      >
+        <div
+          class="accordion-item__header"
+          id=${headerId}
+          role="button"
+          tabindex=${this.disabled ? -1 : 0}
+          aria-expanded=${this.open}
+          aria-controls=${contentId}
+          aria-disabled=${this.disabled}
+          @click=${this.handleToggle}
+          @keydown=${this.handleKeyDown}
+          part="header"
+        >
+          <slot name="summary">
+            <span class="accordion-item__summary">${this.summary}</span>
+          </slot>
+          <span class="accordion-item__icon" part="icon">
+            <slot name="expand-icon">
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <polyline points="6 9 12 15 18 9"></polyline>
+              </svg>
+            </slot>
+          </span>
+        </div>
+        <div
+          class="accordion-item__body"
+          id=${contentId}
+          role="region"
+          aria-labelledby=${headerId}
+          @transitionend=${this.handleTransitionEnd}
+        >
+          <div class="accordion-item__content" part="content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+MzAccordionItem.styles = styles;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzAccordionItem.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzAccordionItem.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], MzAccordionItem.prototype, "summary", 2);
+export {
+  MzAccordionItem
+};
+//# sourceMappingURL=accordion-item.component.js.map

package/dist/components/accordion-item/accordion-item.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/accordion-item/accordion-item.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './accordion-item.styles.js';\n\nlet nextId = 0;\n\n/**\n * @summary A collapsible section within an accordion. Used inside `mz-accordion`.\n *\n * @tag mz-accordion-item\n *\n * @slot - The collapsible content.\n * @slot summary - Custom header content (overrides the `summary` property).\n * @slot expand-icon - Custom expand/collapse icon.\n *\n * @event mz-show - Emitted when the item starts opening. Cancelable.\n * @event mz-hide - Emitted when the item starts closing. Cancelable.\n * @event mz-after-show - Emitted after the open animation completes.\n * @event mz-after-hide - Emitted after the close animation completes.\n *\n * @csspart header - The clickable header area.\n * @csspart icon - The expand/collapse icon wrapper.\n * @csspart content - The content area.\n */\nexport class MzAccordionItem extends ManzanoElement {\n  static styles = styles;\n\n  private readonly componentId = `accordion-item-${++nextId}`;\n\n  /** Whether the item is expanded. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Whether the item is disabled. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The header summary text. Use the `summary` slot for richer content. */\n  @property() summary = '';\n\n  private handleToggle(): void {\n    if (this.disabled) return;\n\n    if (this.open) {\n      const allowed = this.emit('mz-hide', { cancelable: true });\n      if (!allowed) return;\n      this.open = false;\n    } else {\n      const allowed = this.emit('mz-show', { cancelable: true });\n      if (!allowed) return;\n      this.open = true;\n    }\n  }\n\n  private handleTransitionEnd(e: TransitionEvent): void {\n    if (e.propertyName !== 'grid-template-rows') return;\n\n    if (this.open) {\n      this.emit('mz-after-show');\n    } else {\n      this.emit('mz-after-hide');\n    }\n  }\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleToggle();\n    }\n  }\n\n  render() {\n    const headerId = `${this.componentId}-header`;\n    const contentId = `${this.componentId}-content`;\n\n    return html`\n      <div\n        class=${classMap({\n          'accordion-item': true,\n          'accordion-item--open': this.open,\n          'accordion-item--disabled': this.disabled\n        })}\n      >\n        <div\n          class=\"accordion-item__header\"\n          id=${headerId}\n          role=\"button\"\n          tabindex=${this.disabled ? -1 : 0}\n          aria-expanded=${this.open}\n          aria-controls=${contentId}\n          aria-disabled=${this.disabled}\n          @click=${this.handleToggle}\n          @keydown=${this.handleKeyDown}\n          part=\"header\"\n        >\n          <slot name=\"summary\">\n            <span class=\"accordion-item__summary\">${this.summary}</span>\n          </slot>\n          <span class=\"accordion-item__icon\" part=\"icon\">\n            <slot name=\"expand-icon\">\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <polyline points=\"6 9 12 15 18 9\"></polyline>\n              </svg>\n            </slot>\n          </span>\n        </div>\n        <div\n          class=\"accordion-item__body\"\n          id=${contentId}\n          role=\"region\"\n          aria-labelledby=${headerId}\n          @transitionend=${this.handleTransitionEnd}\n        >\n          <div class=\"accordion-item__content\" part=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAEnB,IAAI,SAAS;AAoBN,MAAM,wBAAwB,eAAe;AAAA,EAA7C;AAAA;AAGL,SAAiB,cAAc,kBAAkB,EAAE,MAAM;AAGb,gBAAO;AAGP,oBAAW;AAG3C,mBAAU;AAAA;AAAA,EAEd,eAAqB;AAC3B,QAAI,KAAK,SAAU;AAEnB,QAAI,KAAK,MAAM;AACb,YAAM,UAAU,KAAK,KAAK,WAAW,EAAE,YAAY,KAAK,CAAC;AACzD,UAAI,CAAC,QAAS;AACd,WAAK,OAAO;AAAA,IACd,OAAO;AACL,YAAM,UAAU,KAAK,KAAK,WAAW,EAAE,YAAY,KAAK,CAAC;AACzD,UAAI,CAAC,QAAS;AACd,WAAK,OAAO;AAAA,IACd;AAAA,EACF;AAAA,EAEQ,oBAAoB,GAA0B;AACpD,QAAI,EAAE,iBAAiB,qBAAsB;AAE7C,QAAI,KAAK,MAAM;AACb,WAAK,KAAK,eAAe;AAAA,IAC3B,OAAO;AACL,WAAK,KAAK,eAAe;AAAA,IAC3B;AAAA,EACF;AAAA,EAEQ,cAAc,GAAwB;AAC5C,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAe;AACjB,WAAK,aAAa;AAAA,IACpB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,UAAM,WAAW,GAAG,KAAK,WAAW;AACpC,UAAM,YAAY,GAAG,KAAK,WAAW;AAErC,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,kBAAkB;AAAA,MAClB,wBAAwB,KAAK;AAAA,MAC7B,4BAA4B,KAAK;AAAA,IACnC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,eAIK,QAAQ;AAAA;AAAA,qBAEF,KAAK,WAAW,KAAK,CAAC;AAAA,0BACjB,KAAK,IAAI;AAAA,0BACT,SAAS;AAAA,0BACT,KAAK,QAAQ;AAAA,mBACpB,KAAK,YAAY;AAAA,qBACf,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,oDAIa,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAsBjD,SAAS;AAAA;AAAA,4BAEI,QAAQ;AAAA,2BACT,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQjD;AACF;AAxGa,gBACJ,SAAS;AAK4B;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAN/B,gBAMiC;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAT/B,gBASiC;AAGhC;AAAA,EAAX,SAAS;AAAA,GAZC,gBAYC;",
+  "names": []
+}

package/dist/components/accordion-item/accordion-item.d.ts

@@ -0,0 +1,8 @@
+import { MzAccordionItem } from './accordion-item.component.js';
+export * from './accordion-item.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-accordion-item': MzAccordionItem;
+    }
+}
+//# sourceMappingURL=accordion-item.d.ts.map

package/dist/components/accordion-item/accordion-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.d.ts","sourceRoot":"","sources":["../../../src/components/accordion-item/accordion-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,cAAc,+BAA+B,CAAC;AAI9C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/components/accordion-item/accordion-item.js

@@ -0,0 +1,4 @@
+import { MzAccordionItem } from "./accordion-item.component.js";
+export * from "./accordion-item.component.js";
+MzAccordionItem.define("mz-accordion-item");
+//# sourceMappingURL=accordion-item.js.map

package/dist/components/accordion-item/accordion-item.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/accordion-item/accordion-item.ts"],
+  "sourcesContent": ["import { MzAccordionItem } from './accordion-item.component.js';\n\nexport * from './accordion-item.component.js';\n\nMzAccordionItem.define('mz-accordion-item');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-accordion-item': MzAccordionItem;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAEhC,cAAc;AAEd,gBAAgB,OAAO,mBAAmB;",
+  "names": []
+}

package/dist/components/accordion-item/accordion-item.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;
+//# sourceMappingURL=accordion-item.styles.d.ts.map

package/dist/components/accordion-item/accordion-item.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.styles.d.ts","sourceRoot":"","sources":["../../../src/components/accordion-item/accordion-item.styles.ts"],"names":[],"mappings":";AAGA,wBAoFE"}

package/dist/components/accordion-item/accordion-item.styles.js

@@ -0,0 +1,91 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var accordion_item_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: block;
+    }
+
+    .accordion-item {
+      border-bottom: var(--mz-border-width-sm, 1px) solid var(--mz-color-border);
+    }
+
+    .accordion-item:last-child {
+      border-bottom: none;
+    }
+
+    .accordion-item__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--mz-space-sm);
+      padding: var(--mz-space-md) var(--mz-space-lg);
+      cursor: pointer;
+      user-select: none;
+      font-family: var(--mz-font-sans);
+      font-size: var(--mz-font-size-sm);
+      font-weight: var(--mz-font-weight-medium, 500);
+      color: var(--mz-color-text);
+      background: transparent;
+      transition: background-color 150ms ease;
+      outline: none;
+    }
+
+    .accordion-item__header:hover {
+      background: var(--mz-color-surface-raised);
+    }
+
+    .accordion-item__header:focus-visible {
+      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mz-color-primary) 25%, transparent);
+    }
+
+    .accordion-item--disabled .accordion-item__header {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .accordion-item--disabled .accordion-item__header:hover {
+      background: transparent;
+    }
+
+    .accordion-item__icon {
+      display: flex;
+      align-items: center;
+      color: var(--mz-color-text-disabled);
+      transition: transform 250ms ease;
+    }
+
+    .accordion-item--open .accordion-item__icon {
+      transform: rotate(180deg);
+    }
+
+    .accordion-item__body {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows 250ms ease;
+    }
+
+    .accordion-item--open .accordion-item__body {
+      grid-template-rows: 1fr;
+    }
+
+    .accordion-item__content {
+      overflow: hidden;
+      min-height: 0;
+      padding: 0 var(--mz-space-lg);
+      font-family: var(--mz-font-sans);
+      font-size: var(--mz-font-size-sm);
+      color: var(--mz-color-text-secondary);
+      line-height: var(--mz-line-height-relaxed, 1.625);
+    }
+
+    .accordion-item--open .accordion-item__content {
+      padding-bottom: var(--mz-space-md);
+    }
+  `
+];
+export {
+  accordion_item_styles_default as default
+};
+//# sourceMappingURL=accordion-item.styles.js.map

package/dist/components/accordion-item/accordion-item.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/accordion-item/accordion-item.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: block;\n    }\n\n    .accordion-item {\n      border-bottom: var(--mz-border-width-sm, 1px) solid var(--mz-color-border);\n    }\n\n    .accordion-item:last-child {\n      border-bottom: none;\n    }\n\n    .accordion-item__header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--mz-space-sm);\n      padding: var(--mz-space-md) var(--mz-space-lg);\n      cursor: pointer;\n      user-select: none;\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-sm);\n      font-weight: var(--mz-font-weight-medium, 500);\n      color: var(--mz-color-text);\n      background: transparent;\n      transition: background-color 150ms ease;\n      outline: none;\n    }\n\n    .accordion-item__header:hover {\n      background: var(--mz-color-surface-raised);\n    }\n\n    .accordion-item__header:focus-visible {\n      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mz-color-primary) 25%, transparent);\n    }\n\n    .accordion-item--disabled .accordion-item__header {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .accordion-item--disabled .accordion-item__header:hover {\n      background: transparent;\n    }\n\n    .accordion-item__icon {\n      display: flex;\n      align-items: center;\n      color: var(--mz-color-text-disabled);\n      transition: transform 250ms ease;\n    }\n\n    .accordion-item--open .accordion-item__icon {\n      transform: rotate(180deg);\n    }\n\n    .accordion-item__body {\n      display: grid;\n      grid-template-rows: 0fr;\n      transition: grid-template-rows 250ms ease;\n    }\n\n    .accordion-item--open .accordion-item__body {\n      grid-template-rows: 1fr;\n    }\n\n    .accordion-item__content {\n      overflow: hidden;\n      min-height: 0;\n      padding: 0 var(--mz-space-lg);\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-sm);\n      color: var(--mz-color-text-secondary);\n      line-height: var(--mz-line-height-relaxed, 1.625);\n    }\n\n    .accordion-item--open .accordion-item__content {\n      padding-bottom: var(--mz-space-md);\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,gCAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkFF;",
+  "names": []
+}

package/dist/components/alert-dialog/alert-dialog.component.d.ts

@@ -0,0 +1,61 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+import { MzButton } from '../button/button.component.js';
+/**
+ * @summary A confirmation/alert dialog built on the native <dialog> element.
+ * Purpose-built for confirm/cancel actions like "Are you sure you want to delete?".
+ *
+ * @tag mz-alert-dialog
+ *
+ * @dependency mz-button
+ *
+ * @slot - The dialog body/message content.
+ *
+ * @event mz-confirm - Emitted when the user clicks the confirm button.
+ * @event mz-cancel - Emitted when the user clicks cancel or presses Escape.
+ * @event mz-request-close - Cancelable event emitted before closing. Prevents close if cancelled.
+ *
+ * @csspart base - The native <dialog> element (overlay/backdrop).
+ * @csspart panel - The dialog panel container.
+ * @csspart header - The header area containing the title.
+ * @csspart body - The body content area.
+ * @csspart footer - The footer with action buttons.
+ * @csspart confirm-button - The confirm button.
+ * @csspart cancel-button - The cancel button.
+ */
+export declare class MzAlertDialog extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    static dependencies: {
+        'mz-button': typeof MzButton;
+    };
+    private dialogEl;
+    private cancelBtn;
+    /** Whether the dialog is open. */
+    open: boolean;
+    /** The dialog title/heading. */
+    label: string;
+    /** The dialog variant — affects confirm button color and title color. */
+    variant: 'neutral' | 'danger' | 'warning' | 'primary';
+    /** The confirm button label. */
+    confirmText: string;
+    /** The cancel button label. */
+    cancelText: string;
+    /** Show a loading state on the confirm button. */
+    loading: boolean;
+    /** Map dialog variant to button variant. */
+    private get confirmVariant();
+    updated(changed: Map<string, unknown>): Promise<void>;
+    disconnectedCallback(): void;
+    /** Request close — emits mz-request-close, which can be cancelled. */
+    private requestClose;
+    private handleConfirm;
+    /** Handle native <dialog> cancel (Escape key). */
+    private handleDialogCancel;
+    /** Handle clicks on the <dialog> element (backdrop clicks). */
+    private handleBackdropClick;
+    /** Programmatically show the dialog. */
+    show(): void;
+    /** Programmatically hide the dialog. */
+    hide(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=alert-dialog.component.d.ts.map

package/dist/components/alert-dialog/alert-dialog.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.component.d.ts","sourceRoot":"","sources":["../../../src/components/alert-dialog/alert-dialog.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAIzD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,aAAc,SAAQ,cAAc;IAC/C,MAAM,CAAC,MAAM,4BAAU;IAEvB,MAAM,CAAC,YAAY;;MAEjB;IAEe,OAAO,CAAC,QAAQ,CAAqB;IACtB,OAAO,CAAC,SAAS,CAAe;IAEhE,kCAAkC;IACU,IAAI,UAAS;IAEzD,gCAAgC;IACpB,KAAK,SAAM;IAEvB,yEAAyE;IAC5C,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAa;IAE/F,gCAAgC;IACS,WAAW,SAAa;IAEjE,+BAA+B;IACS,UAAU,SAAY;IAE9D,kDAAkD;IACrB,OAAO,UAAS;IAE7C,4CAA4C;IAC5C,OAAO,KAAK,cAAc,GAEzB;IAEK,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAgB3D,oBAAoB,IAAI,IAAI;IAO5B,sEAAsE;IACtE,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,aAAa;IAMrB,kDAAkD;IAClD,OAAO,CAAC,kBAAkB;IAK1B,+DAA+D;IAC/D,OAAO,CAAC,mBAAmB;IAM3B,wCAAwC;IACxC,IAAI,IAAI,IAAI;IAIZ,wCAAwC;IACxC,IAAI,IAAI,IAAI;IAIZ,MAAM;CA2CP"}

package/dist/components/alert-dialog/alert-dialog.component.js

@@ -0,0 +1,156 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import { MzButton } from "../button/button.component.js";
+import { lockScroll, unlockScroll } from "../../internal/scroll.js";
+import styles from "./alert-dialog.styles.js";
+class MzAlertDialog extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.label = "";
+    this.variant = "neutral";
+    this.confirmText = "Confirm";
+    this.cancelText = "Cancel";
+    this.loading = false;
+  }
+  /** Map dialog variant to button variant. */
+  get confirmVariant() {
+    return this.variant === "neutral" ? "primary" : this.variant;
+  }
+  async updated(changed) {
+    if (changed.has("open")) {
+      if (this.open) {
+        await this.updateComplete;
+        this.dialogEl?.showModal();
+        lockScroll();
+        this.cancelBtn?.focus();
+      } else if (changed.get("open") === true) {
+        this.dialogEl?.close();
+        unlockScroll();
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.open) {
+      unlockScroll();
+    }
+  }
+  /** Request close — emits mz-request-close, which can be cancelled. */
+  requestClose() {
+    const allowed = this.emit("mz-request-close", { cancelable: true });
+    if (!allowed) return;
+    this.open = false;
+    this.emit("mz-cancel");
+  }
+  handleConfirm() {
+    if (this.loading) return;
+    this.emit("mz-confirm");
+  }
+  /** Handle native <dialog> cancel (Escape key). */
+  handleDialogCancel(e) {
+    e.preventDefault();
+    this.requestClose();
+  }
+  /** Handle clicks on the <dialog> element (backdrop clicks). */
+  handleBackdropClick(e) {
+    if (e.target === this.dialogEl) {
+      this.requestClose();
+    }
+  }
+  /** Programmatically show the dialog. */
+  show() {
+    this.open = true;
+  }
+  /** Programmatically hide the dialog. */
+  hide() {
+    this.open = false;
+  }
+  render() {
+    return html`
+      <dialog
+        class=${classMap({
+      "alert-dialog": true,
+      "alert-dialog--open": this.open
+    })}
+        part="base"
+        aria-label=${this.label}
+        @cancel=${this.handleDialogCancel}
+        @click=${this.handleBackdropClick}
+      >
+        <div class="alert-dialog__panel" part="panel">
+          <div class="alert-dialog__header" part="header">
+            <h2 class="alert-dialog__title">${this.label}</h2>
+          </div>
+          <div class="alert-dialog__body" part="body">
+            <slot></slot>
+          </div>
+          <div class="alert-dialog__footer" part="footer">
+            <mz-button
+              class="alert-dialog__cancel"
+              variant="neutral"
+              appearance="outline"
+              size="sm"
+              part="cancel-button"
+              @click=${this.requestClose}
+            >${this.cancelText}</mz-button>
+            <mz-button
+              class="alert-dialog__confirm"
+              variant=${this.confirmVariant}
+              appearance="filled"
+              size="sm"
+              part="confirm-button"
+              ?loading=${this.loading}
+              ?disabled=${this.loading}
+              @click=${this.handleConfirm}
+            >${this.confirmText}</mz-button>
+          </div>
+        </div>
+      </dialog>
+    `;
+  }
+}
+MzAlertDialog.styles = styles;
+MzAlertDialog.dependencies = {
+  "mz-button": MzButton
+};
+__decorateClass([
+  query("dialog")
+], MzAlertDialog.prototype, "dialogEl", 2);
+__decorateClass([
+  query(".alert-dialog__cancel")
+], MzAlertDialog.prototype, "cancelBtn", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzAlertDialog.prototype, "open", 2);
+__decorateClass([
+  property()
+], MzAlertDialog.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzAlertDialog.prototype, "variant", 2);
+__decorateClass([
+  property({ attribute: "confirm-text" })
+], MzAlertDialog.prototype, "confirmText", 2);
+__decorateClass([
+  property({ attribute: "cancel-text" })
+], MzAlertDialog.prototype, "cancelText", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MzAlertDialog.prototype, "loading", 2);
+export {
+  MzAlertDialog
+};
+//# sourceMappingURL=alert-dialog.component.js.map

package/dist/components/alert-dialog/alert-dialog.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/alert-dialog/alert-dialog.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport { MzButton } from '../button/button.component.js';\nimport { lockScroll, unlockScroll } from '../../internal/scroll.js';\nimport styles from './alert-dialog.styles.js';\n\n/**\n * @summary A confirmation/alert dialog built on the native <dialog> element.\n * Purpose-built for confirm/cancel actions like \"Are you sure you want to delete?\".\n *\n * @tag mz-alert-dialog\n *\n * @dependency mz-button\n *\n * @slot - The dialog body/message content.\n *\n * @event mz-confirm - Emitted when the user clicks the confirm button.\n * @event mz-cancel - Emitted when the user clicks cancel or presses Escape.\n * @event mz-request-close - Cancelable event emitted before closing. Prevents close if cancelled.\n *\n * @csspart base - The native <dialog> element (overlay/backdrop).\n * @csspart panel - The dialog panel container.\n * @csspart header - The header area containing the title.\n * @csspart body - The body content area.\n * @csspart footer - The footer with action buttons.\n * @csspart confirm-button - The confirm button.\n * @csspart cancel-button - The cancel button.\n */\nexport class MzAlertDialog extends ManzanoElement {\n  static styles = styles;\n\n  static dependencies = {\n    'mz-button': MzButton\n  };\n\n  @query('dialog') private dialogEl!: HTMLDialogElement;\n  @query('.alert-dialog__cancel') private cancelBtn!: HTMLElement;\n\n  /** Whether the dialog is open. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** The dialog title/heading. */\n  @property() label = '';\n\n  /** The dialog variant \u2014 affects confirm button color and title color. */\n  @property({ reflect: true }) variant: 'neutral' | 'danger' | 'warning' | 'primary' = 'neutral';\n\n  /** The confirm button label. */\n  @property({ attribute: 'confirm-text' }) confirmText = 'Confirm';\n\n  /** The cancel button label. */\n  @property({ attribute: 'cancel-text' }) cancelText = 'Cancel';\n\n  /** Show a loading state on the confirm button. */\n  @property({ type: Boolean }) loading = false;\n\n  /** Map dialog variant to button variant. */\n  private get confirmVariant(): string {\n    return this.variant === 'neutral' ? 'primary' : this.variant;\n  }\n\n  async updated(changed: Map<string, unknown>): Promise<void> {\n    if (changed.has('open')) {\n      if (this.open) {\n        // Wait for render so the dialog element exists\n        await this.updateComplete;\n        this.dialogEl?.showModal();\n        lockScroll();\n        // Focus cancel button \u2014 safer default (less likely to accidentally confirm)\n        this.cancelBtn?.focus();\n      } else if (changed.get('open') === true) {\n        this.dialogEl?.close();\n        unlockScroll();\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.open) {\n      unlockScroll();\n    }\n  }\n\n  /** Request close \u2014 emits mz-request-close, which can be cancelled. */\n  private requestClose(): void {\n    const allowed = this.emit('mz-request-close', { cancelable: true });\n    if (!allowed) return;\n    this.open = false;\n    this.emit('mz-cancel');\n  }\n\n  private handleConfirm(): void {\n    if (this.loading) return;\n    this.emit('mz-confirm');\n    // Don't auto-close \u2014 let the consumer close after async operation\n  }\n\n  /** Handle native <dialog> cancel (Escape key). */\n  private handleDialogCancel(e: Event): void {\n    e.preventDefault();\n    this.requestClose();\n  }\n\n  /** Handle clicks on the <dialog> element (backdrop clicks). */\n  private handleBackdropClick(e: MouseEvent): void {\n    if (e.target === this.dialogEl) {\n      this.requestClose();\n    }\n  }\n\n  /** Programmatically show the dialog. */\n  show(): void {\n    this.open = true;\n  }\n\n  /** Programmatically hide the dialog. */\n  hide(): void {\n    this.open = false;\n  }\n\n  render() {\n    return html`\n      <dialog\n        class=${classMap({\n          'alert-dialog': true,\n          'alert-dialog--open': this.open\n        })}\n        part=\"base\"\n        aria-label=${this.label}\n        @cancel=${this.handleDialogCancel}\n        @click=${this.handleBackdropClick}\n      >\n        <div class=\"alert-dialog__panel\" part=\"panel\">\n          <div class=\"alert-dialog__header\" part=\"header\">\n            <h2 class=\"alert-dialog__title\">${this.label}</h2>\n          </div>\n          <div class=\"alert-dialog__body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"alert-dialog__footer\" part=\"footer\">\n            <mz-button\n              class=\"alert-dialog__cancel\"\n              variant=\"neutral\"\n              appearance=\"outline\"\n              size=\"sm\"\n              part=\"cancel-button\"\n              @click=${this.requestClose}\n            >${this.cancelText}</mz-button>\n            <mz-button\n              class=\"alert-dialog__confirm\"\n              variant=${this.confirmVariant}\n              appearance=\"filled\"\n              size=\"sm\"\n              part=\"confirm-button\"\n              ?loading=${this.loading}\n              ?disabled=${this.loading}\n              @click=${this.handleConfirm}\n            >${this.confirmText}</mz-button>\n          </div>\n        </div>\n      </dialog>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,UAAU,aAAa;AAChC,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,YAAY,oBAAoB;AACzC,OAAO,YAAY;AAwBZ,MAAM,sBAAsB,eAAe;AAAA,EAA3C;AAAA;AAWuC,gBAAO;AAGvC,iBAAQ;AAGS,mBAAwD;AAG5C,uBAAc;AAGf,sBAAa;AAGxB,mBAAU;AAAA;AAAA;AAAA,EAGvC,IAAY,iBAAyB;AACnC,WAAO,KAAK,YAAY,YAAY,YAAY,KAAK;AAAA,EACvD;AAAA,EAEA,MAAM,QAAQ,SAA8C;AAC1D,QAAI,QAAQ,IAAI,MAAM,GAAG;AACvB,UAAI,KAAK,MAAM;AAEb,cAAM,KAAK;AACX,aAAK,UAAU,UAAU;AACzB,mBAAW;AAEX,aAAK,WAAW,MAAM;AAAA,MACxB,WAAW,QAAQ,IAAI,MAAM,MAAM,MAAM;AACvC,aAAK,UAAU,MAAM;AACrB,qBAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAAA,EAEA,uBAA6B;AAC3B,UAAM,qBAAqB;AAC3B,QAAI,KAAK,MAAM;AACb,mBAAa;AAAA,IACf;AAAA,EACF;AAAA;AAAA,EAGQ,eAAqB;AAC3B,UAAM,UAAU,KAAK,KAAK,oBAAoB,EAAE,YAAY,KAAK,CAAC;AAClE,QAAI,CAAC,QAAS;AACd,SAAK,OAAO;AACZ,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAEQ,gBAAsB;AAC5B,QAAI,KAAK,QAAS;AAClB,SAAK,KAAK,YAAY;AAAA,EAExB;AAAA;AAAA,EAGQ,mBAAmB,GAAgB;AACzC,MAAE,eAAe;AACjB,SAAK,aAAa;AAAA,EACpB;AAAA;AAAA,EAGQ,oBAAoB,GAAqB;AAC/C,QAAI,EAAE,WAAW,KAAK,UAAU;AAC9B,WAAK,aAAa;AAAA,IACpB;AAAA,EACF;AAAA;AAAA,EAGA,OAAa;AACX,SAAK,OAAO;AAAA,EACd;AAAA;AAAA,EAGA,OAAa;AACX,SAAK,OAAO;AAAA,EACd;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,gBAAgB;AAAA,MAChB,sBAAsB,KAAK;AAAA,IAC7B,CAAC,CAAC;AAAA;AAAA,qBAEW,KAAK,KAAK;AAAA,kBACb,KAAK,kBAAkB;AAAA,iBACxB,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA,8CAIK,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAYjC,KAAK,YAAY;AAAA,eACzB,KAAK,UAAU;AAAA;AAAA;AAAA,wBAGN,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA,yBAIlB,KAAK,OAAO;AAAA,0BACX,KAAK,OAAO;AAAA,uBACf,KAAK,aAAa;AAAA,eAC1B,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,EAK7B;AACF;AAxIa,cACJ,SAAS;AADL,cAGJ,eAAe;AAAA,EACpB,aAAa;AACf;AAEyB;AAAA,EAAxB,MAAM,QAAQ;AAAA,GAPJ,cAOc;AACe;AAAA,EAAvC,MAAM,uBAAuB;AAAA,GARnB,cAQ6B;AAGI;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAX/B,cAWiC;AAGhC;AAAA,EAAX,SAAS;AAAA,GAdC,cAcC;AAGiB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAjBhB,cAiBkB;AAGY;AAAA,EAAxC,SAAS,EAAE,WAAW,eAAe,CAAC;AAAA,GApB5B,cAoB8B;AAGD;AAAA,EAAvC,SAAS,EAAE,WAAW,cAAc,CAAC;AAAA,GAvB3B,cAuB6B;AAGX;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GA1BhB,cA0BkB;",
+  "names": []
+}

package/dist/components/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,8 @@
+import { MzAlertDialog } from './alert-dialog.component.js';
+export * from './alert-dialog.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-alert-dialog': MzAlertDialog;
+    }
+}
+//# sourceMappingURL=alert-dialog.d.ts.map

package/dist/components/alert-dialog/alert-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/alert-dialog/alert-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,cAAc,6BAA6B,CAAC;AAI5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/alert-dialog/alert-dialog.js

@@ -0,0 +1,4 @@
+import { MzAlertDialog } from "./alert-dialog.component.js";
+export * from "./alert-dialog.component.js";
+MzAlertDialog.define("mz-alert-dialog");
+//# sourceMappingURL=alert-dialog.js.map

package/dist/components/alert-dialog/alert-dialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/alert-dialog/alert-dialog.ts"],
+  "sourcesContent": ["import { MzAlertDialog } from './alert-dialog.component.js';\n\nexport * from './alert-dialog.component.js';\n\nMzAlertDialog.define('mz-alert-dialog');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-alert-dialog': MzAlertDialog;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAE9B,cAAc;AAEd,cAAc,OAAO,iBAAiB;",
+  "names": []
+}

package/dist/components/alert-dialog/alert-dialog.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;
+//# sourceMappingURL=alert-dialog.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/alert-dialog/alert-dialog.styles.ts"],"names":[],"mappings":";AAGA,wBA4EE"}