@manzanohq/components 0.1.1

package/dist/components/dialog/dialog.styles.js

@@ -0,0 +1,98 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var dialog_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: contents;
+    }
+
+    .dialog {
+      border: none;
+      padding: 0;
+      background: transparent;
+      max-width: none;
+      max-height: none;
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+    }
+
+    .dialog::backdrop {
+      background: rgb(28 25 21 / 0.5);
+    }
+
+    .dialog__panel {
+      position: fixed;
+      inset: 0;
+      margin: auto;
+      display: flex;
+      flex-direction: column;
+      width: min(calc(100vw - var(--mz-space-xl) * 2), 32rem);
+      max-height: calc(100vh - var(--mz-space-xl) * 2);
+      background: var(--mz-color-surface-overlay, var(--mz-color-surface));
+      border-radius: var(--mz-radius-lg);
+      box-shadow: var(--mz-shadow-xl);
+      z-index: var(--mz-z-modal, 1050);
+    }
+
+    .dialog__header {
+      display: flex;
+      align-items: center;
+      gap: var(--mz-space-sm);
+      padding: var(--mz-space-md) var(--mz-space-lg);
+      border-bottom: var(--mz-border-width-sm) solid var(--mz-color-border);
+      font-family: var(--mz-font-sans);
+      font-size: var(--mz-font-size-lg);
+      font-weight: var(--mz-font-weight-semibold, 600);
+      color: var(--mz-color-text);
+    }
+
+    .dialog__close {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin-inline-start: auto;
+      padding: var(--mz-space-2xs);
+      border: none;
+      background: none;
+      color: var(--mz-color-text-secondary);
+      cursor: pointer;
+      border-radius: var(--mz-radius-sm);
+      transition: color var(--mz-transition-fast), background var(--mz-transition-fast);
+    }
+
+    .dialog__close:hover {
+      color: var(--mz-color-text);
+      background: var(--mz-color-gray-100);
+    }
+
+    .dialog__close:focus-visible {
+      outline: var(--mz-focus-ring);
+      outline-offset: var(--mz-focus-ring-offset);
+    }
+
+    .dialog__body {
+      flex: 1;
+      padding: var(--mz-space-lg);
+      overflow-y: auto;
+      color: var(--mz-color-text);
+      font-family: var(--mz-font-sans);
+      font-size: var(--mz-font-size-md);
+      line-height: var(--mz-line-height-normal);
+    }
+
+    .dialog__footer {
+      padding: var(--mz-space-md) var(--mz-space-lg);
+      border-top: var(--mz-border-width-sm) solid var(--mz-color-border);
+    }
+
+    .dialog__footer:empty {
+      display: none;
+    }
+  `
+];
+export {
+  dialog_styles_default as default
+};
+//# sourceMappingURL=dialog.styles.js.map

package/dist/components/dialog/dialog.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/dialog/dialog.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: contents;\n    }\n\n    .dialog {\n      border: none;\n      padding: 0;\n      background: transparent;\n      max-width: none;\n      max-height: none;\n      width: 100%;\n      height: 100%;\n      overflow: visible;\n    }\n\n    .dialog::backdrop {\n      background: rgb(28 25 21 / 0.5);\n    }\n\n    .dialog__panel {\n      position: fixed;\n      inset: 0;\n      margin: auto;\n      display: flex;\n      flex-direction: column;\n      width: min(calc(100vw - var(--mz-space-xl) * 2), 32rem);\n      max-height: calc(100vh - var(--mz-space-xl) * 2);\n      background: var(--mz-color-surface-overlay, var(--mz-color-surface));\n      border-radius: var(--mz-radius-lg);\n      box-shadow: var(--mz-shadow-xl);\n      z-index: var(--mz-z-modal, 1050);\n    }\n\n    .dialog__header {\n      display: flex;\n      align-items: center;\n      gap: var(--mz-space-sm);\n      padding: var(--mz-space-md) var(--mz-space-lg);\n      border-bottom: var(--mz-border-width-sm) solid var(--mz-color-border);\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-lg);\n      font-weight: var(--mz-font-weight-semibold, 600);\n      color: var(--mz-color-text);\n    }\n\n    .dialog__close {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      margin-inline-start: auto;\n      padding: var(--mz-space-2xs);\n      border: none;\n      background: none;\n      color: var(--mz-color-text-secondary);\n      cursor: pointer;\n      border-radius: var(--mz-radius-sm);\n      transition: color var(--mz-transition-fast), background var(--mz-transition-fast);\n    }\n\n    .dialog__close:hover {\n      color: var(--mz-color-text);\n      background: var(--mz-color-gray-100);\n    }\n\n    .dialog__close:focus-visible {\n      outline: var(--mz-focus-ring);\n      outline-offset: var(--mz-focus-ring-offset);\n    }\n\n    .dialog__body {\n      flex: 1;\n      padding: var(--mz-space-lg);\n      overflow-y: auto;\n      color: var(--mz-color-text);\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-md);\n      line-height: var(--mz-line-height-normal);\n    }\n\n    .dialog__footer {\n      padding: var(--mz-space-md) var(--mz-space-lg);\n      border-top: var(--mz-border-width-sm) solid var(--mz-color-border);\n    }\n\n    .dialog__footer:empty {\n      display: none;\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,wBAAQ;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyFF;",
+  "names": []
+}

package/dist/components/divider/divider.component.d.ts

@@ -0,0 +1,20 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A visual divider for separating content.
+ *
+ * @tag mz-divider
+ *
+ * @csspart base - The divider element.
+ *
+ * @cssproperty --mz-divider-color - Override the divider color.
+ * @cssproperty --mz-divider-width - Override the divider width.
+ */
+export declare class MzDivider extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** Renders a vertical divider. */
+    vertical: boolean;
+    /** The spacing around the divider. */
+    spacing: 'sm' | 'md' | 'lg';
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=divider.component.d.ts.map

package/dist/components/divider/divider.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.component.d.ts","sourceRoot":"","sources":["../../../src/components/divider/divider.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;GASG;AACH,qBAAa,SAAU,SAAQ,cAAc;IAC3C,MAAM,CAAC,MAAM,4BAAU;IAEvB,kCAAkC;IACU,QAAQ,UAAS;IAE7D,sCAAsC;IACT,OAAO,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhE,MAAM;CAUP"}

package/dist/components/divider/divider.component.js

@@ -0,0 +1,42 @@
+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 { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./divider.styles.js";
+class MzDivider extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.vertical = false;
+    this.spacing = "md";
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class="divider"
+        role="separator"
+        aria-orientation=${this.vertical ? "vertical" : "horizontal"}
+      ></div>
+    `;
+  }
+}
+MzDivider.styles = styles;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzDivider.prototype, "vertical", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzDivider.prototype, "spacing", 2);
+export {
+  MzDivider
+};
+//# sourceMappingURL=divider.component.js.map

package/dist/components/divider/divider.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/divider/divider.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './divider.styles.js';\n\n/**\n * @summary A visual divider for separating content.\n *\n * @tag mz-divider\n *\n * @csspart base - The divider element.\n *\n * @cssproperty --mz-divider-color - Override the divider color.\n * @cssproperty --mz-divider-width - Override the divider width.\n */\nexport class MzDivider extends ManzanoElement {\n  static styles = styles;\n\n  /** Renders a vertical divider. */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** The spacing around the divider. */\n  @property({ reflect: true }) spacing: 'sm' | 'md' | 'lg' = 'md';\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=\"divider\"\n        role=\"separator\"\n        aria-orientation=${this.vertical ? 'vertical' : 'horizontal'}\n      ></div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAYZ,MAAM,kBAAkB,eAAe;AAAA,EAAvC;AAAA;AAIuC,oBAAW;AAG1B,mBAA8B;AAAA;AAAA,EAE3D,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKgB,KAAK,WAAW,aAAa,YAAY;AAAA;AAAA;AAAA,EAGlE;AACF;AAnBa,UACJ,SAAS;AAG4B;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAJ/B,UAIiC;AAGf;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAPhB,UAOkB;",
+  "names": []
+}

package/dist/components/divider/divider.d.ts

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

package/dist/components/divider/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../src/components/divider/divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,cAAc,wBAAwB,CAAC;AAIvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/divider/divider.js

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

package/dist/components/divider/divider.js.map

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

package/dist/components/divider/divider.styles.d.ts

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

package/dist/components/divider/divider.styles.d.ts.map

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

package/dist/components/divider/divider.styles.js

@@ -0,0 +1,54 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var divider_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: block;
+    }
+
+    :host(:not([vertical])) .divider {
+      border-top: var(--mz-divider-width, var(--mz-border-width-sm)) solid
+        var(--mz-divider-color, var(--mz-color-border));
+    }
+
+    :host([vertical]) {
+      display: inline-block;
+      height: auto;
+      align-self: stretch;
+    }
+
+    :host([vertical]) .divider {
+      height: 100%;
+      min-height: 1em;
+      border-left: var(--mz-divider-width, var(--mz-border-width-sm)) solid
+        var(--mz-divider-color, var(--mz-color-border));
+    }
+
+    :host([spacing='sm']) {
+      margin: var(--mz-space-sm) 0;
+    }
+    :host([spacing='md']),
+    :host(:not([spacing])) {
+      margin: var(--mz-space-md) 0;
+    }
+    :host([spacing='lg']) {
+      margin: var(--mz-space-lg) 0;
+    }
+
+    :host([vertical][spacing='sm']) {
+      margin: 0 var(--mz-space-sm);
+    }
+    :host([vertical][spacing='md']),
+    :host([vertical]:not([spacing])) {
+      margin: 0 var(--mz-space-md);
+    }
+    :host([vertical][spacing='lg']) {
+      margin: 0 var(--mz-space-lg);
+    }
+  `
+];
+export {
+  divider_styles_default as default
+};
+//# sourceMappingURL=divider.styles.js.map

package/dist/components/divider/divider.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/divider/divider.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    :host(:not([vertical])) .divider {\n      border-top: var(--mz-divider-width, var(--mz-border-width-sm)) solid\n        var(--mz-divider-color, var(--mz-color-border));\n    }\n\n    :host([vertical]) {\n      display: inline-block;\n      height: auto;\n      align-self: stretch;\n    }\n\n    :host([vertical]) .divider {\n      height: 100%;\n      min-height: 1em;\n      border-left: var(--mz-divider-width, var(--mz-border-width-sm)) solid\n        var(--mz-divider-color, var(--mz-color-border));\n    }\n\n    :host([spacing='sm']) {\n      margin: var(--mz-space-sm) 0;\n    }\n    :host([spacing='md']),\n    :host(:not([spacing])) {\n      margin: var(--mz-space-md) 0;\n    }\n    :host([spacing='lg']) {\n      margin: var(--mz-space-lg) 0;\n    }\n\n    :host([vertical][spacing='sm']) {\n      margin: 0 var(--mz-space-sm);\n    }\n    :host([vertical][spacing='md']),\n    :host([vertical]:not([spacing])) {\n      margin: 0 var(--mz-space-md);\n    }\n    :host([vertical][spacing='lg']) {\n      margin: 0 var(--mz-space-lg);\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,yBAAQ;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;AA6CF;",
+  "names": []
+}

package/dist/components/drawer/drawer.component.d.ts

@@ -0,0 +1,57 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+import { MzIcon } from '../icon/icon.component.js';
+/**
+ * @summary A slide-in panel from a screen edge, using native <dialog>.
+ *
+ * @tag mz-drawer
+ *
+ * @dependency mz-icon
+ *
+ * @slot - The drawer body content.
+ * @slot header - Content for the drawer header (overrides label).
+ * @slot footer - Content for the drawer footer.
+ *
+ * @event mz-show - Emitted when the drawer begins to open.
+ * @event mz-hide - Emitted when the drawer begins to close.
+ * @event mz-after-show - Emitted after the drawer open animation completes.
+ * @event mz-after-hide - Emitted after the drawer close animation completes.
+ * @event mz-request-close - Emitted when close is requested (cancelable).
+ *
+ * @csspart base - The native <dialog> element.
+ * @csspart panel - The drawer panel container.
+ * @csspart header - The drawer header.
+ * @csspart close - The close button.
+ * @csspart body - The drawer body.
+ * @csspart footer - The drawer footer.
+ */
+export declare class MzDrawer extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    static dependencies: {
+        'mz-icon': typeof MzIcon;
+    };
+    private dialogEl;
+    private panelEl;
+    private focusTrap;
+    /** Whether the drawer is open. */
+    open: boolean;
+    /** The drawer title (used as accessible label and default header). */
+    label: string;
+    /** Which edge the drawer slides from. */
+    placement: 'start' | 'end' | 'top' | 'bottom';
+    /** Hides the close button in the header. */
+    noCloseButton: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): Promise<void>;
+    private showDrawer;
+    private hideDrawer;
+    private requestClose;
+    /** Programmatically show the drawer */
+    show(): void;
+    /** Programmatically hide the drawer */
+    hide(): void;
+    private handleCancel;
+    private handleDialogClick;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=drawer.component.d.ts.map

package/dist/components/drawer/drawer.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.component.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAInE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAoEnD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,QAAS,SAAQ,cAAc;IAC1C,MAAM,CAAC,MAAM,4BAAU;IAEvB,MAAM,CAAC,YAAY;;MAEjB;IAEe,OAAO,CAAC,QAAQ,CAAqB;IAC7B,OAAO,CAAC,OAAO,CAAkB;IAE1D,OAAO,CAAC,SAAS,CAAa;IAE9B,kCAAkC;IACU,IAAI,UAAS;IAEzD,sEAAsE;IAC1D,KAAK,SAAM;IAEvB,yCAAyC;IACZ,SAAS,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAW;IAErF,4CAA4C;IACe,aAAa,UAAS;IAEjF,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAMtB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;YAU7C,UAAU;YAUV,UAAU;IAUxB,OAAO,CAAC,YAAY;IAUpB,uCAAuC;IACvC,IAAI,IAAI,IAAI;IAIZ,uCAAuC;IACvC,IAAI,IAAI,IAAI;IAIZ,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,iBAAiB;IAMzB,MAAM;CAoCP"}

package/dist/components/drawer/drawer.component.js

@@ -0,0 +1,205 @@
+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, nothing } from "lit";
+import { property, query } from "lit/decorators.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import { FocusTrap } from "../../internal/modal.js";
+import { lockScroll, unlockScroll } from "../../internal/scroll.js";
+import { animateTo, setDefaultAnimation } from "../../utilities/animation-registry.js";
+import { MzIcon } from "../icon/icon.component.js";
+import styles from "./drawer.styles.js";
+setDefaultAnimation("drawer.show.start", {
+  keyframes: [
+    { opacity: 0, transform: "translateX(-100%)" },
+    { opacity: 1, transform: "translateX(0)" }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("drawer.hide.start", {
+  keyframes: [
+    { opacity: 1, transform: "translateX(0)" },
+    { opacity: 0, transform: "translateX(-100%)" }
+  ],
+  options: { duration: 150, easing: "ease" }
+});
+setDefaultAnimation("drawer.show.end", {
+  keyframes: [
+    { opacity: 0, transform: "translateX(100%)" },
+    { opacity: 1, transform: "translateX(0)" }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("drawer.hide.end", {
+  keyframes: [
+    { opacity: 1, transform: "translateX(0)" },
+    { opacity: 0, transform: "translateX(100%)" }
+  ],
+  options: { duration: 150, easing: "ease" }
+});
+setDefaultAnimation("drawer.show.top", {
+  keyframes: [
+    { opacity: 0, transform: "translateY(-100%)" },
+    { opacity: 1, transform: "translateY(0)" }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("drawer.hide.top", {
+  keyframes: [
+    { opacity: 1, transform: "translateY(0)" },
+    { opacity: 0, transform: "translateY(-100%)" }
+  ],
+  options: { duration: 150, easing: "ease" }
+});
+setDefaultAnimation("drawer.show.bottom", {
+  keyframes: [
+    { opacity: 0, transform: "translateY(100%)" },
+    { opacity: 1, transform: "translateY(0)" }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("drawer.hide.bottom", {
+  keyframes: [
+    { opacity: 1, transform: "translateY(0)" },
+    { opacity: 0, transform: "translateY(100%)" }
+  ],
+  options: { duration: 150, easing: "ease" }
+});
+class MzDrawer extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.label = "";
+    this.placement = "start";
+    this.noCloseButton = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.focusTrap = new FocusTrap(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.focusTrap.deactivate();
+    unlockScroll();
+  }
+  async updated(changed) {
+    if (changed.has("open")) {
+      if (this.open) {
+        await this.showDrawer();
+      } else if (changed.get("open") === true) {
+        await this.hideDrawer();
+      }
+    }
+  }
+  async showDrawer() {
+    this.emit("mz-show");
+    this.dialogEl.showModal();
+    lockScroll();
+    this.focusTrap.activate();
+    const anim = animateTo(this.panelEl, `drawer.show.${this.placement}`, this.prefersReducedMotion);
+    await anim.finished;
+    this.emit("mz-after-show");
+  }
+  async hideDrawer() {
+    this.emit("mz-hide");
+    this.focusTrap.deactivate();
+    const anim = animateTo(this.panelEl, `drawer.hide.${this.placement}`, this.prefersReducedMotion);
+    await anim.finished;
+    this.dialogEl.close();
+    unlockScroll();
+    this.emit("mz-after-hide");
+  }
+  requestClose(source) {
+    const allowed = this.emit("mz-request-close", {
+      cancelable: true,
+      detail: { source }
+    });
+    if (allowed) {
+      this.open = false;
+    }
+  }
+  /** Programmatically show the drawer */
+  show() {
+    this.open = true;
+  }
+  /** Programmatically hide the drawer */
+  hide() {
+    this.open = false;
+  }
+  handleCancel(e) {
+    e.preventDefault();
+    this.requestClose("keyboard");
+  }
+  handleDialogClick(e) {
+    if (e.target === this.dialogEl) {
+      this.requestClose("backdrop");
+    }
+  }
+  render() {
+    return html`
+      <dialog
+        part="base"
+        class="drawer"
+        aria-label=${this.label || nothing}
+        @cancel=${this.handleCancel}
+        @click=${this.handleDialogClick}
+      >
+        <div part="panel" class="drawer__panel">
+          <header part="header" class="drawer__header">
+            <slot name="header">${this.label}</slot>
+            ${!this.noCloseButton ? html`
+                  <button
+                    part="close"
+                    class="drawer__close"
+                    type="button"
+                    aria-label="Close"
+                    @click=${() => this.requestClose("close-button")}
+                  >
+                    <mz-icon name="x" label="Close"></mz-icon>
+                  </button>
+                ` : nothing}
+          </header>
+          <div part="body" class="drawer__body">
+            <slot></slot>
+          </div>
+          <footer part="footer" class="drawer__footer">
+            <slot name="footer"></slot>
+          </footer>
+        </div>
+      </dialog>
+    `;
+  }
+}
+MzDrawer.styles = styles;
+MzDrawer.dependencies = {
+  "mz-icon": MzIcon
+};
+__decorateClass([
+  query("dialog")
+], MzDrawer.prototype, "dialogEl", 2);
+__decorateClass([
+  query(".drawer__panel")
+], MzDrawer.prototype, "panelEl", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzDrawer.prototype, "open", 2);
+__decorateClass([
+  property()
+], MzDrawer.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzDrawer.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "no-close-button" })
+], MzDrawer.prototype, "noCloseButton", 2);
+export {
+  MzDrawer
+};
+//# sourceMappingURL=drawer.component.js.map

package/dist/components/drawer/drawer.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/drawer/drawer.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport { FocusTrap } from '../../internal/modal.js';\nimport { lockScroll, unlockScroll } from '../../internal/scroll.js';\nimport { animateTo, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { MzIcon } from '../icon/icon.component.js';\nimport styles from './drawer.styles.js';\n\n// Register directional drawer animations\nsetDefaultAnimation('drawer.show.start', {\n  keyframes: [\n    { opacity: 0, transform: 'translateX(-100%)' },\n    { opacity: 1, transform: 'translateX(0)' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hide.start', {\n  keyframes: [\n    { opacity: 1, transform: 'translateX(0)' },\n    { opacity: 0, transform: 'translateX(-100%)' }\n  ],\n  options: { duration: 150, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.show.end', {\n  keyframes: [\n    { opacity: 0, transform: 'translateX(100%)' },\n    { opacity: 1, transform: 'translateX(0)' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hide.end', {\n  keyframes: [\n    { opacity: 1, transform: 'translateX(0)' },\n    { opacity: 0, transform: 'translateX(100%)' }\n  ],\n  options: { duration: 150, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.show.top', {\n  keyframes: [\n    { opacity: 0, transform: 'translateY(-100%)' },\n    { opacity: 1, transform: 'translateY(0)' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hide.top', {\n  keyframes: [\n    { opacity: 1, transform: 'translateY(0)' },\n    { opacity: 0, transform: 'translateY(-100%)' }\n  ],\n  options: { duration: 150, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.show.bottom', {\n  keyframes: [\n    { opacity: 0, transform: 'translateY(100%)' },\n    { opacity: 1, transform: 'translateY(0)' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hide.bottom', {\n  keyframes: [\n    { opacity: 1, transform: 'translateY(0)' },\n    { opacity: 0, transform: 'translateY(100%)' }\n  ],\n  options: { duration: 150, easing: 'ease' }\n});\n\n/**\n * @summary A slide-in panel from a screen edge, using native <dialog>.\n *\n * @tag mz-drawer\n *\n * @dependency mz-icon\n *\n * @slot - The drawer body content.\n * @slot header - Content for the drawer header (overrides label).\n * @slot footer - Content for the drawer footer.\n *\n * @event mz-show - Emitted when the drawer begins to open.\n * @event mz-hide - Emitted when the drawer begins to close.\n * @event mz-after-show - Emitted after the drawer open animation completes.\n * @event mz-after-hide - Emitted after the drawer close animation completes.\n * @event mz-request-close - Emitted when close is requested (cancelable).\n *\n * @csspart base - The native <dialog> element.\n * @csspart panel - The drawer panel container.\n * @csspart header - The drawer header.\n * @csspart close - The close button.\n * @csspart body - The drawer body.\n * @csspart footer - The drawer footer.\n */\nexport class MzDrawer extends ManzanoElement {\n  static styles = styles;\n\n  static dependencies = {\n    'mz-icon': MzIcon\n  };\n\n  @query('dialog') private dialogEl!: HTMLDialogElement;\n  @query('.drawer__panel') private panelEl!: HTMLDivElement;\n\n  private focusTrap!: FocusTrap;\n\n  /** Whether the drawer is open. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** The drawer title (used as accessible label and default header). */\n  @property() label = '';\n\n  /** Which edge the drawer slides from. */\n  @property({ reflect: true }) placement: 'start' | 'end' | 'top' | 'bottom' = 'start';\n\n  /** Hides the close button in the header. */\n  @property({ type: Boolean, attribute: 'no-close-button' }) noCloseButton = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.focusTrap = new FocusTrap(this);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.focusTrap.deactivate();\n    unlockScroll();\n  }\n\n  async updated(changed: Map<string, unknown>): Promise<void> {\n    if (changed.has('open')) {\n      if (this.open) {\n        await this.showDrawer();\n      } else if (changed.get('open') === true) {\n        await this.hideDrawer();\n      }\n    }\n  }\n\n  private async showDrawer(): Promise<void> {\n    this.emit('mz-show');\n    this.dialogEl.showModal();\n    lockScroll();\n    this.focusTrap.activate();\n    const anim = animateTo(this.panelEl, `drawer.show.${this.placement}`, this.prefersReducedMotion);\n    await anim.finished;\n    this.emit('mz-after-show');\n  }\n\n  private async hideDrawer(): Promise<void> {\n    this.emit('mz-hide');\n    this.focusTrap.deactivate();\n    const anim = animateTo(this.panelEl, `drawer.hide.${this.placement}`, this.prefersReducedMotion);\n    await anim.finished;\n    this.dialogEl.close();\n    unlockScroll();\n    this.emit('mz-after-hide');\n  }\n\n  private requestClose(source: string): void {\n    const allowed = this.emit('mz-request-close', {\n      cancelable: true,\n      detail: { source }\n    });\n    if (allowed) {\n      this.open = false;\n    }\n  }\n\n  /** Programmatically show the drawer */\n  show(): void {\n    this.open = true;\n  }\n\n  /** Programmatically hide the drawer */\n  hide(): void {\n    this.open = false;\n  }\n\n  private handleCancel(e: Event): void {\n    e.preventDefault();\n    this.requestClose('keyboard');\n  }\n\n  private handleDialogClick(e: MouseEvent): void {\n    if (e.target === this.dialogEl) {\n      this.requestClose('backdrop');\n    }\n  }\n\n  render() {\n    return html`\n      <dialog\n        part=\"base\"\n        class=\"drawer\"\n        aria-label=${this.label || nothing}\n        @cancel=${this.handleCancel}\n        @click=${this.handleDialogClick}\n      >\n        <div part=\"panel\" class=\"drawer__panel\">\n          <header part=\"header\" class=\"drawer__header\">\n            <slot name=\"header\">${this.label}</slot>\n            ${!this.noCloseButton\n              ? html`\n                  <button\n                    part=\"close\"\n                    class=\"drawer__close\"\n                    type=\"button\"\n                    aria-label=\"Close\"\n                    @click=${() => this.requestClose('close-button')}\n                  >\n                    <mz-icon name=\"x\" label=\"Close\"></mz-icon>\n                  </button>\n                `\n              : nothing}\n          </header>\n          <div part=\"body\" class=\"drawer__body\">\n            <slot></slot>\n          </div>\n          <footer part=\"footer\" class=\"drawer__footer\">\n            <slot name=\"footer\"></slot>\n          </footer>\n        </div>\n      </dialog>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/drawer/drawer.d.ts

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

package/dist/components/drawer/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,cAAc,uBAAuB,CAAC;AAItC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/drawer/drawer.js

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

package/dist/components/drawer/drawer.js.map

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

package/dist/components/drawer/drawer.styles.d.ts

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

package/dist/components/drawer/drawer.styles.d.ts.map

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