@manzanohq/components 0.1.1 → 0.1.4

package/dist/components/toast/toast.component.js

@@ -0,0 +1,256 @@
+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, state, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import { MzIcon } from "../icon/icon.component.js";
+import styles from "./toast.styles.js";
+let toastStack = null;
+function getToastStack() {
+  if (!toastStack || !toastStack.isConnected) {
+    toastStack = document.createElement("div");
+    toastStack.classList.add("mz-toast-stack");
+    Object.assign(toastStack.style, {
+      position: "fixed",
+      top: "0",
+      right: "0",
+      zIndex: "9999",
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5rem",
+      padding: "1rem",
+      pointerEvents: "none",
+      maxWidth: "28rem",
+      width: "100%"
+    });
+    document.body.appendChild(toastStack);
+  }
+  return toastStack;
+}
+function toast(message, options) {
+  const el = document.createElement("mz-toast");
+  el.textContent = message;
+  if (options?.variant) el.variant = options.variant;
+  if (options?.duration !== void 0) el.duration = options.duration;
+  if (options?.closable !== void 0) el.closable = options.closable;
+  if (options?.icon) el.icon = options.icon;
+  getToastStack().appendChild(el);
+  requestAnimationFrame(() => {
+    el.open = true;
+  });
+  return el;
+}
+const defaultIcons = {
+  primary: "info",
+  danger: "octagon-alert",
+  success: "circle-check",
+  warning: "triangle-alert"
+};
+class MzToast extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "neutral";
+    this.duration = 5e3;
+    this.closable = true;
+    this.icon = "";
+    this.open = false;
+    this._closing = false;
+    this._autoCloseTimer = null;
+    this._remainingTime = 0;
+    this._timerStartedAt = 0;
+    this._progressAnimationFrame = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.open) {
+      this._startAutoClose();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._clearAutoClose();
+  }
+  updated(changedProps) {
+    if (changedProps.has("open")) {
+      if (this.open) {
+        this._closing = false;
+        this._startAutoClose();
+      } else if (changedProps.get("open") === true) {
+        this._runCloseAnimation();
+      }
+    }
+  }
+  get _effectiveDuration() {
+    if (this.duration === 0 || !Number.isFinite(this.duration)) return 0;
+    return this.duration;
+  }
+  get _resolvedIcon() {
+    if (this.icon) return this.icon;
+    return defaultIcons[this.variant] ?? "";
+  }
+  _startAutoClose() {
+    this._clearAutoClose();
+    const dur = this._effectiveDuration;
+    if (dur <= 0) return;
+    this._remainingTime = dur;
+    this._timerStartedAt = Date.now();
+    this._autoCloseTimer = setTimeout(() => this._handleAutoClose(), this._remainingTime);
+    this.updateComplete.then(() => {
+      this._animateProgress();
+    });
+  }
+  _clearAutoClose() {
+    if (this._autoCloseTimer !== null) {
+      clearTimeout(this._autoCloseTimer);
+      this._autoCloseTimer = null;
+    }
+    if (this._progressAnimationFrame !== null) {
+      cancelAnimationFrame(this._progressAnimationFrame);
+      this._progressAnimationFrame = null;
+    }
+  }
+  _pauseAutoClose() {
+    if (this._autoCloseTimer === null) return;
+    clearTimeout(this._autoCloseTimer);
+    this._autoCloseTimer = null;
+    this._remainingTime -= Date.now() - this._timerStartedAt;
+    if (this._remainingTime < 0) this._remainingTime = 0;
+    const progressEl = this._progressEl;
+    if (progressEl) {
+      const computed = getComputedStyle(progressEl);
+      const currentTransform = computed.transform;
+      progressEl.style.transition = "none";
+      progressEl.style.transform = currentTransform;
+    }
+  }
+  _resumeAutoClose() {
+    if (this._remainingTime <= 0 || !this.open) return;
+    this._timerStartedAt = Date.now();
+    this._autoCloseTimer = setTimeout(() => this._handleAutoClose(), this._remainingTime);
+    this._animateProgress();
+  }
+  _animateProgress() {
+    const progressEl = this._progressEl;
+    if (!progressEl) return;
+    const dur = this._effectiveDuration;
+    if (dur <= 0) return;
+    const elapsed = dur - this._remainingTime;
+    const remaining = this._remainingTime;
+    const startFraction = 1 - elapsed / dur;
+    progressEl.style.transition = "none";
+    progressEl.style.transform = `scaleX(${startFraction})`;
+    progressEl.offsetWidth;
+    progressEl.style.transition = `transform ${remaining}ms linear`;
+    progressEl.style.transform = "scaleX(0)";
+  }
+  _handleAutoClose() {
+    this._autoCloseTimer = null;
+    this.close();
+  }
+  /** Close the toast. Triggers exit animation and removes from DOM. */
+  close() {
+    if (!this.open) return;
+    this._clearAutoClose();
+    this.open = false;
+    this.emit("mz-close");
+  }
+  _runCloseAnimation() {
+    this._closing = true;
+    let removed = false;
+    const onEnd = () => {
+      if (removed) return;
+      removed = true;
+      this._closing = false;
+      if (this.isConnected) this.remove();
+    };
+    const toastEl = this.shadowRoot?.querySelector(".toast");
+    if (toastEl) {
+      toastEl.addEventListener("transitionend", onEnd, { once: true });
+      setTimeout(onEnd, 300);
+    } else {
+      this.remove();
+    }
+  }
+  _handleCloseClick() {
+    this.close();
+  }
+  _handleMouseEnter() {
+    this._pauseAutoClose();
+  }
+  _handleMouseLeave() {
+    this._resumeAutoClose();
+  }
+  render() {
+    const icon = this._resolvedIcon;
+    const showProgress = this._effectiveDuration > 0;
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      toast: true,
+      "toast--open": this.open,
+      "toast--closing": this._closing
+    })}
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+        @mouseenter=${this._handleMouseEnter}
+        @mouseleave=${this._handleMouseLeave}
+      >
+        ${icon ? html`<span part="icon" class="toast__icon">
+              <mz-icon name=${icon}></mz-icon>
+            </span>` : nothing}
+        <span part="content" class="toast__content">
+          <slot></slot>
+        </span>
+        ${this.closable ? html`<button
+              part="close"
+              class="toast__close"
+              type="button"
+              aria-label="Close"
+              @click=${this._handleCloseClick}
+            >&times;</button>` : nothing}
+        ${showProgress ? html`<div part="progress" class="toast__progress"></div>` : nothing}
+      </div>
+    `;
+  }
+}
+MzToast.styles = styles;
+MzToast.dependencies = {
+  "mz-icon": MzIcon
+};
+__decorateClass([
+  property({ reflect: true })
+], MzToast.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Number })
+], MzToast.prototype, "duration", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzToast.prototype, "closable", 2);
+__decorateClass([
+  property()
+], MzToast.prototype, "icon", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzToast.prototype, "open", 2);
+__decorateClass([
+  state()
+], MzToast.prototype, "_closing", 2);
+__decorateClass([
+  query(".toast__progress")
+], MzToast.prototype, "_progressEl", 2);
+export {
+  MzToast,
+  toast
+};
+//# sourceMappingURL=toast.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/toast/toast.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport { MzIcon } from '../icon/icon.component.js';\nimport styles from './toast.styles.js';\n\nexport interface ToastOptions {\n  variant?: 'primary' | 'danger' | 'success' | 'warning' | 'neutral';\n  duration?: number;\n  closable?: boolean;\n  icon?: string;\n}\n\n// Module-level toast stack management\nlet toastStack: HTMLElement | null = null;\n\nfunction getToastStack(): HTMLElement {\n  if (!toastStack || !toastStack.isConnected) {\n    toastStack = document.createElement('div');\n    toastStack.classList.add('mz-toast-stack');\n    Object.assign(toastStack.style, {\n      position: 'fixed',\n      top: '0',\n      right: '0',\n      zIndex: '9999',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '0.5rem',\n      padding: '1rem',\n      pointerEvents: 'none',\n      maxWidth: '28rem',\n      width: '100%'\n    });\n    document.body.appendChild(toastStack);\n  }\n  return toastStack;\n}\n\n/**\n * Imperatively create and show a toast notification.\n *\n * @param message - Text content for the toast.\n * @param options - Optional configuration (variant, duration, closable, icon).\n * @returns The created MzToast element.\n */\nexport function toast(message: string, options?: ToastOptions): MzToast {\n  const el = document.createElement('mz-toast') as MzToast;\n  el.textContent = message;\n  if (options?.variant) el.variant = options.variant;\n  if (options?.duration !== undefined) el.duration = options.duration;\n  if (options?.closable !== undefined) el.closable = options.closable;\n  if (options?.icon) el.icon = options.icon;\n\n  getToastStack().appendChild(el);\n  // Use rAF to ensure the element is in DOM before opening (triggers CSS transition)\n  requestAnimationFrame(() => {\n    el.open = true;\n  });\n  return el;\n}\n\nconst defaultIcons: Record<string, string> = {\n  primary: 'info',\n  danger: 'octagon-alert',\n  success: 'circle-check',\n  warning: 'triangle-alert'\n};\n\n/**\n * @summary A toast notification that appears temporarily to communicate a message.\n *\n * @tag mz-toast\n *\n * @dependency mz-icon\n *\n * @slot - The toast's message content.\n *\n * @event mz-close - Emitted when the toast is closed (manually or via auto-dismiss).\n *\n * @csspart base - The toast's base wrapper.\n * @csspart icon - The icon container.\n * @csspart content - The content container.\n * @csspart close - The close button.\n * @csspart progress - The countdown progress bar.\n *\n * @cssproperty --mz-toast-bg - Override the toast background.\n * @cssproperty --mz-toast-border-color - Override the toast border color.\n * @cssproperty --mz-toast-color - Override the toast text color.\n * @cssproperty --mz-toast-icon-color - Override the toast icon color.\n * @cssproperty --mz-toast-accent-color - Override the progress bar / accent color.\n */\nexport class MzToast extends ManzanoElement {\n  static styles = styles;\n\n  static dependencies = {\n    'mz-icon': MzIcon\n  };\n\n  /** The toast's semantic variant. */\n  @property({ reflect: true }) variant: 'primary' | 'danger' | 'success' | 'warning' | 'neutral' = 'neutral';\n\n  /** Auto-dismiss time in ms. Set to 0 or Infinity to disable auto-dismiss. */\n  @property({ type: Number }) duration = 5000;\n\n  /** Whether the toast shows a close button. */\n  @property({ type: Boolean, reflect: true }) closable = true;\n\n  /** Icon name to display. If not set and variant has a default icon, that icon is used. */\n  @property() icon = '';\n\n  /** Whether the toast is visible. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private _closing = false;\n\n  @query('.toast__progress') private _progressEl!: HTMLElement;\n\n  private _autoCloseTimer: ReturnType<typeof setTimeout> | null = null;\n  private _remainingTime = 0;\n  private _timerStartedAt = 0;\n  private _progressAnimationFrame: number | null = null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    if (this.open) {\n      this._startAutoClose();\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearAutoClose();\n  }\n\n  updated(changedProps: Map<string, unknown>): void {\n    if (changedProps.has('open')) {\n      if (this.open) {\n        this._closing = false;\n        this._startAutoClose();\n      } else if (changedProps.get('open') === true) {\n        // Was open, now closed \u2014 run close animation\n        this._runCloseAnimation();\n      }\n    }\n  }\n\n  private get _effectiveDuration(): number {\n    if (this.duration === 0 || !Number.isFinite(this.duration)) return 0;\n    return this.duration;\n  }\n\n  private get _resolvedIcon(): string {\n    if (this.icon) return this.icon;\n    return defaultIcons[this.variant] ?? '';\n  }\n\n  private _startAutoClose(): void {\n    this._clearAutoClose();\n    const dur = this._effectiveDuration;\n    if (dur <= 0) return;\n\n    this._remainingTime = dur;\n    this._timerStartedAt = Date.now();\n    this._autoCloseTimer = setTimeout(() => this._handleAutoClose(), this._remainingTime);\n\n    // Start progress bar animation after the element is rendered\n    this.updateComplete.then(() => {\n      this._animateProgress();\n    });\n  }\n\n  private _clearAutoClose(): void {\n    if (this._autoCloseTimer !== null) {\n      clearTimeout(this._autoCloseTimer);\n      this._autoCloseTimer = null;\n    }\n    if (this._progressAnimationFrame !== null) {\n      cancelAnimationFrame(this._progressAnimationFrame);\n      this._progressAnimationFrame = null;\n    }\n  }\n\n  private _pauseAutoClose(): void {\n    if (this._autoCloseTimer === null) return;\n    clearTimeout(this._autoCloseTimer);\n    this._autoCloseTimer = null;\n    this._remainingTime -= Date.now() - this._timerStartedAt;\n    if (this._remainingTime < 0) this._remainingTime = 0;\n\n    // Pause the progress bar by freezing the current transform\n    const progressEl = this._progressEl;\n    if (progressEl) {\n      const computed = getComputedStyle(progressEl);\n      const currentTransform = computed.transform;\n      progressEl.style.transition = 'none';\n      progressEl.style.transform = currentTransform;\n    }\n  }\n\n  private _resumeAutoClose(): void {\n    if (this._remainingTime <= 0 || !this.open) return;\n\n    this._timerStartedAt = Date.now();\n    this._autoCloseTimer = setTimeout(() => this._handleAutoClose(), this._remainingTime);\n    this._animateProgress();\n  }\n\n  private _animateProgress(): void {\n    const progressEl = this._progressEl;\n    if (!progressEl) return;\n\n    const dur = this._effectiveDuration;\n    if (dur <= 0) return;\n\n    // Calculate the current progress fraction\n    const elapsed = dur - this._remainingTime;\n    const remaining = this._remainingTime;\n    const startFraction = 1 - elapsed / dur;\n\n    // Use CSS transition for smooth progress\n    progressEl.style.transition = 'none';\n    progressEl.style.transform = `scaleX(${startFraction})`;\n\n    // Force reflow\n    progressEl.offsetWidth; // eslint-disable-line @typescript-eslint/no-unused-expressions\n\n    progressEl.style.transition = `transform ${remaining}ms linear`;\n    progressEl.style.transform = 'scaleX(0)';\n  }\n\n  private _handleAutoClose(): void {\n    this._autoCloseTimer = null;\n    this.close();\n  }\n\n  /** Close the toast. Triggers exit animation and removes from DOM. */\n  close(): void {\n    if (!this.open) return;\n    this._clearAutoClose();\n    this.open = false;\n    this.emit('mz-close');\n  }\n\n  private _runCloseAnimation(): void {\n    this._closing = true;\n    let removed = false;\n\n    const onEnd = () => {\n      if (removed) return;\n      removed = true;\n      this._closing = false;\n      // Remove from DOM after animation\n      if (this.isConnected) this.remove();\n    };\n\n    const toastEl = this.shadowRoot?.querySelector('.toast');\n    if (toastEl) {\n      toastEl.addEventListener('transitionend', onEnd, { once: true });\n      // Fallback: if transitionend doesn't fire (e.g., reduced motion), remove after timeout\n      setTimeout(onEnd, 300);\n    } else {\n      this.remove();\n    }\n  }\n\n  private _handleCloseClick(): void {\n    this.close();\n  }\n\n  private _handleMouseEnter(): void {\n    this._pauseAutoClose();\n  }\n\n  private _handleMouseLeave(): void {\n    this._resumeAutoClose();\n  }\n\n  render() {\n    const icon = this._resolvedIcon;\n    const showProgress = this._effectiveDuration > 0;\n\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          toast: true,\n          'toast--open': this.open,\n          'toast--closing': this._closing\n        })}\n        role=\"alert\"\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        @mouseenter=${this._handleMouseEnter}\n        @mouseleave=${this._handleMouseLeave}\n      >\n        ${icon\n          ? html`<span part=\"icon\" class=\"toast__icon\">\n              <mz-icon name=${icon}></mz-icon>\n            </span>`\n          : nothing}\n        <span part=\"content\" class=\"toast__content\">\n          <slot></slot>\n        </span>\n        ${this.closable\n          ? html`<button\n              part=\"close\"\n              class=\"toast__close\"\n              type=\"button\"\n              aria-label=\"Close\"\n              @click=${this._handleCloseClick}\n            >&times;</button>`\n          : nothing}\n        ${showProgress\n          ? html`<div part=\"progress\" class=\"toast__progress\"></div>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/toast/toast.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAI7C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/toast/toast.js

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

package/dist/components/toast/toast.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/toast/toast.ts"],
+  "sourcesContent": ["import { MzToast } from './toast.component.js';\n\nexport * from './toast.component.js';\nexport { toast } from './toast.component.js';\n\nMzToast.define('mz-toast');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-toast': MzToast;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe;AAExB,cAAc;AACd,SAAS,aAAa;AAEtB,QAAQ,OAAO,UAAU;",
+  "names": []
+}

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

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

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

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

package/dist/components/toast/toast.styles.js

@@ -0,0 +1,163 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var toast_styles_default = [
+  componentStyles,
+  css`
+    @layer base, variants, states;
+
+    @layer base {
+      :host {
+        --_toast-bg: var(--mz-toast-bg, var(--mz-color-surface));
+        --_toast-border-color: var(--mz-toast-border-color, var(--mz-color-neutral));
+        --_toast-color: var(--mz-toast-color, var(--mz-color-text));
+        --_toast-icon-color: var(--mz-toast-icon-color, var(--mz-color-neutral));
+        --_toast-accent-color: var(--mz-toast-accent-color, var(--mz-color-neutral));
+
+        display: block;
+        pointer-events: auto;
+      }
+
+      .toast {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--mz-space-sm);
+        padding: var(--mz-space-sm) var(--mz-space-md);
+        background: var(--_toast-bg);
+        border: var(--mz-border-width-sm) solid var(--_toast-border-color);
+        border-radius: var(--mz-radius-lg);
+        color: var(--_toast-color);
+        font-family: var(--mz-font-sans);
+        font-size: var(--mz-font-size-sm);
+        line-height: var(--mz-line-height-normal);
+        box-shadow: var(--mz-shadow-lg);
+        position: relative;
+        overflow: hidden;
+        opacity: 0;
+        transform: translateX(calc(100% + 1rem));
+        transition:
+          opacity var(--mz-transition-normal) ease,
+          transform var(--mz-transition-normal) ease;
+      }
+
+      .toast--open {
+        opacity: 1;
+        transform: translateX(0);
+      }
+
+      .toast--closing {
+        opacity: 0;
+        transform: translateX(calc(100% + 1rem));
+      }
+
+      .toast__icon {
+        display: flex;
+        flex-shrink: 0;
+        padding-top: var(--mz-space-3xs);
+        font-size: var(--mz-font-size-lg);
+        color: var(--_toast-icon-color);
+      }
+
+      .toast__content {
+        flex: 1;
+        min-width: 0;
+        padding-top: 1px;
+      }
+
+      .toast__close {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        background: none;
+        border: none;
+        padding: var(--mz-space-2xs);
+        margin: calc(var(--mz-space-2xs) * -1);
+        cursor: pointer;
+        color: inherit;
+        opacity: 0.7;
+        border-radius: var(--mz-radius-sm);
+        transition: opacity var(--mz-transition-fast);
+        font-size: var(--mz-font-size-lg);
+        line-height: 1;
+      }
+
+      .toast__close:hover {
+        opacity: 1;
+      }
+
+      .toast__close:focus-visible {
+        outline: var(--mz-focus-ring);
+        outline-offset: var(--mz-focus-ring-offset);
+      }
+
+      .toast__progress {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 3px;
+        background: var(--_toast-accent-color);
+        opacity: 0.4;
+        width: 100%;
+        transform-origin: left;
+        transition: none;
+      }
+
+      .toast__progress--active {
+        transition: transform linear;
+      }
+    }
+
+    @layer variants {
+      :host([variant='primary']) {
+        --_toast-bg: color-mix(in srgb, var(--mz-color-primary) 10%, var(--mz-color-surface));
+        --_toast-border-color: color-mix(in srgb, var(--mz-color-primary) 30%, transparent);
+        --_toast-color: var(--mz-color-text);
+        --_toast-icon-color: var(--mz-color-primary);
+        --_toast-accent-color: var(--mz-color-primary);
+      }
+
+      :host([variant='success']) {
+        --_toast-bg: color-mix(in srgb, var(--mz-color-success) 10%, var(--mz-color-surface));
+        --_toast-border-color: color-mix(in srgb, var(--mz-color-success) 30%, transparent);
+        --_toast-color: var(--mz-color-text);
+        --_toast-icon-color: var(--mz-color-success);
+        --_toast-accent-color: var(--mz-color-success);
+      }
+
+      :host([variant='warning']) {
+        --_toast-bg: color-mix(in srgb, var(--mz-color-warning) 10%, var(--mz-color-surface));
+        --_toast-border-color: color-mix(in srgb, var(--mz-color-warning) 30%, transparent);
+        --_toast-color: var(--mz-color-text);
+        --_toast-icon-color: var(--mz-color-warning);
+        --_toast-accent-color: var(--mz-color-warning);
+      }
+
+      :host([variant='danger']) {
+        --_toast-bg: color-mix(in srgb, var(--mz-color-danger) 10%, var(--mz-color-surface));
+        --_toast-border-color: color-mix(in srgb, var(--mz-color-danger) 30%, transparent);
+        --_toast-color: var(--mz-color-text);
+        --_toast-icon-color: var(--mz-color-danger);
+        --_toast-accent-color: var(--mz-color-danger);
+      }
+
+      :host([variant='neutral']),
+      :host(:not([variant])) {
+        --_toast-bg: var(--mz-color-surface);
+        --_toast-border-color: color-mix(in srgb, var(--mz-color-neutral) 30%, transparent);
+        --_toast-color: var(--mz-color-text);
+        --_toast-icon-color: var(--mz-color-neutral);
+        --_toast-accent-color: var(--mz-color-neutral);
+      }
+    }
+
+    @layer states {
+      :host([hidden]) {
+        display: none;
+      }
+    }
+  `
+];
+export {
+  toast_styles_default as default
+};
+//# sourceMappingURL=toast.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/toast/toast.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    @layer base, variants, states;\n\n    @layer base {\n      :host {\n        --_toast-bg: var(--mz-toast-bg, var(--mz-color-surface));\n        --_toast-border-color: var(--mz-toast-border-color, var(--mz-color-neutral));\n        --_toast-color: var(--mz-toast-color, var(--mz-color-text));\n        --_toast-icon-color: var(--mz-toast-icon-color, var(--mz-color-neutral));\n        --_toast-accent-color: var(--mz-toast-accent-color, var(--mz-color-neutral));\n\n        display: block;\n        pointer-events: auto;\n      }\n\n      .toast {\n        display: flex;\n        align-items: flex-start;\n        gap: var(--mz-space-sm);\n        padding: var(--mz-space-sm) var(--mz-space-md);\n        background: var(--_toast-bg);\n        border: var(--mz-border-width-sm) solid var(--_toast-border-color);\n        border-radius: var(--mz-radius-lg);\n        color: var(--_toast-color);\n        font-family: var(--mz-font-sans);\n        font-size: var(--mz-font-size-sm);\n        line-height: var(--mz-line-height-normal);\n        box-shadow: var(--mz-shadow-lg);\n        position: relative;\n        overflow: hidden;\n        opacity: 0;\n        transform: translateX(calc(100% + 1rem));\n        transition:\n          opacity var(--mz-transition-normal) ease,\n          transform var(--mz-transition-normal) ease;\n      }\n\n      .toast--open {\n        opacity: 1;\n        transform: translateX(0);\n      }\n\n      .toast--closing {\n        opacity: 0;\n        transform: translateX(calc(100% + 1rem));\n      }\n\n      .toast__icon {\n        display: flex;\n        flex-shrink: 0;\n        padding-top: var(--mz-space-3xs);\n        font-size: var(--mz-font-size-lg);\n        color: var(--_toast-icon-color);\n      }\n\n      .toast__content {\n        flex: 1;\n        min-width: 0;\n        padding-top: 1px;\n      }\n\n      .toast__close {\n        display: flex;\n        flex-shrink: 0;\n        align-items: center;\n        justify-content: center;\n        background: none;\n        border: none;\n        padding: var(--mz-space-2xs);\n        margin: calc(var(--mz-space-2xs) * -1);\n        cursor: pointer;\n        color: inherit;\n        opacity: 0.7;\n        border-radius: var(--mz-radius-sm);\n        transition: opacity var(--mz-transition-fast);\n        font-size: var(--mz-font-size-lg);\n        line-height: 1;\n      }\n\n      .toast__close:hover {\n        opacity: 1;\n      }\n\n      .toast__close:focus-visible {\n        outline: var(--mz-focus-ring);\n        outline-offset: var(--mz-focus-ring-offset);\n      }\n\n      .toast__progress {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        height: 3px;\n        background: var(--_toast-accent-color);\n        opacity: 0.4;\n        width: 100%;\n        transform-origin: left;\n        transition: none;\n      }\n\n      .toast__progress--active {\n        transition: transform linear;\n      }\n    }\n\n    @layer variants {\n      :host([variant='primary']) {\n        --_toast-bg: color-mix(in srgb, var(--mz-color-primary) 10%, var(--mz-color-surface));\n        --_toast-border-color: color-mix(in srgb, var(--mz-color-primary) 30%, transparent);\n        --_toast-color: var(--mz-color-text);\n        --_toast-icon-color: var(--mz-color-primary);\n        --_toast-accent-color: var(--mz-color-primary);\n      }\n\n      :host([variant='success']) {\n        --_toast-bg: color-mix(in srgb, var(--mz-color-success) 10%, var(--mz-color-surface));\n        --_toast-border-color: color-mix(in srgb, var(--mz-color-success) 30%, transparent);\n        --_toast-color: var(--mz-color-text);\n        --_toast-icon-color: var(--mz-color-success);\n        --_toast-accent-color: var(--mz-color-success);\n      }\n\n      :host([variant='warning']) {\n        --_toast-bg: color-mix(in srgb, var(--mz-color-warning) 10%, var(--mz-color-surface));\n        --_toast-border-color: color-mix(in srgb, var(--mz-color-warning) 30%, transparent);\n        --_toast-color: var(--mz-color-text);\n        --_toast-icon-color: var(--mz-color-warning);\n        --_toast-accent-color: var(--mz-color-warning);\n      }\n\n      :host([variant='danger']) {\n        --_toast-bg: color-mix(in srgb, var(--mz-color-danger) 10%, var(--mz-color-surface));\n        --_toast-border-color: color-mix(in srgb, var(--mz-color-danger) 30%, transparent);\n        --_toast-color: var(--mz-color-text);\n        --_toast-icon-color: var(--mz-color-danger);\n        --_toast-accent-color: var(--mz-color-danger);\n      }\n\n      :host([variant='neutral']),\n      :host(:not([variant])) {\n        --_toast-bg: var(--mz-color-surface);\n        --_toast-border-color: color-mix(in srgb, var(--mz-color-neutral) 30%, transparent);\n        --_toast-color: var(--mz-color-text);\n        --_toast-icon-color: var(--mz-color-neutral);\n        --_toast-accent-color: var(--mz-color-neutral);\n      }\n    }\n\n    @layer states {\n      :host([hidden]) {\n        display: none;\n      }\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,uBAAQ;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;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;AA0JF;",
+  "names": []
+}

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

@@ -0,0 +1,29 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A toggle button that can be pressed on/off, used standalone or inside a toggle group.
+ *
+ * @tag mz-toggle
+ *
+ * @slot - The button label.
+ * @slot prefix - An icon or element before the label.
+ * @slot suffix - An icon or element after the label.
+ *
+ * @csspart base - The inner button element.
+ *
+ * @event mz-toggle - Emitted when the toggle is pressed or released. Detail: `{ pressed: boolean, value: string }`.
+ */
+export declare class MzToggle extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** The value associated with this toggle, used by toggle groups. */
+    value: string;
+    /** Whether the toggle is currently pressed (active). */
+    pressed: boolean;
+    /** Disables the toggle. */
+    disabled: boolean;
+    /** The size of the toggle. */
+    size: 'sm' | 'md' | 'lg';
+    private handleClick;
+    private handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=toggle.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.component.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/toggle.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;GAYG;AACH,qBAAa,QAAS,SAAQ,cAAc;IAC1C,MAAM,CAAC,MAAM,4BAAU;IAEvB,oEAAoE;IACxD,KAAK,SAAM;IAEvB,wDAAwD;IACZ,OAAO,UAAS;IAE5D,2BAA2B;IACiB,QAAQ,UAAS;IAE7D,8BAA8B;IACD,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE7D,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAOrB,MAAM;CAmBP"}

package/dist/components/toggle/toggle.component.js

@@ -0,0 +1,71 @@
+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 "./toggle.styles.js";
+class MzToggle extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.pressed = false;
+    this.disabled = false;
+    this.size = "md";
+  }
+  handleClick() {
+    if (this.disabled) return;
+    this.pressed = !this.pressed;
+    this.emit("mz-toggle", { detail: { pressed: this.pressed, value: this.value } });
+  }
+  handleKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this.handleClick();
+    }
+  }
+  render() {
+    return html`
+      <button
+        class=${classMap({
+      toggle: true,
+      "toggle--pressed": this.pressed
+    })}
+        part="base"
+        aria-pressed=${this.pressed}
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <slot name="prefix"></slot>
+        <slot></slot>
+        <slot name="suffix"></slot>
+      </button>
+    `;
+  }
+}
+MzToggle.styles = styles;
+__decorateClass([
+  property()
+], MzToggle.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzToggle.prototype, "pressed", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzToggle.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzToggle.prototype, "size", 2);
+export {
+  MzToggle
+};
+//# sourceMappingURL=toggle.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/toggle/toggle.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 './toggle.styles.js';\n\n/**\n * @summary A toggle button that can be pressed on/off, used standalone or inside a toggle group.\n *\n * @tag mz-toggle\n *\n * @slot - The button label.\n * @slot prefix - An icon or element before the label.\n * @slot suffix - An icon or element after the label.\n *\n * @csspart base - The inner button element.\n *\n * @event mz-toggle - Emitted when the toggle is pressed or released. Detail: `{ pressed: boolean, value: string }`.\n */\nexport class MzToggle extends ManzanoElement {\n  static styles = styles;\n\n  /** The value associated with this toggle, used by toggle groups. */\n  @property() value = '';\n\n  /** Whether the toggle is currently pressed (active). */\n  @property({ type: Boolean, reflect: true }) pressed = false;\n\n  /** Disables the toggle. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The size of the toggle. */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  private handleClick() {\n    if (this.disabled) return;\n    this.pressed = !this.pressed;\n    this.emit('mz-toggle', { detail: { pressed: this.pressed, value: this.value } });\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleClick();\n    }\n  }\n\n  render() {\n    return html`\n      <button\n        class=${classMap({\n          toggle: true,\n          'toggle--pressed': this.pressed,\n        })}\n        part=\"base\"\n        aria-pressed=${this.pressed}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n      >\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </button>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAeZ,MAAM,iBAAiB,eAAe;AAAA,EAAtC;AAAA;AAIO,iBAAQ;AAGwB,mBAAU;AAGV,oBAAW;AAG1B,gBAA2B;AAAA;AAAA,EAEhD,cAAc;AACpB,QAAI,KAAK,SAAU;AACnB,SAAK,UAAU,CAAC,KAAK;AACrB,SAAK,KAAK,aAAa,EAAE,QAAQ,EAAE,SAAS,KAAK,SAAS,OAAO,KAAK,MAAM,EAAE,CAAC;AAAA,EACjF;AAAA,EAEQ,cAAc,GAAkB;AACtC,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAe;AACjB,WAAK,YAAY;AAAA,IACnB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,mBAAmB,KAAK;AAAA,IAC1B,CAAC,CAAC;AAAA;AAAA,uBAEa,KAAK,OAAO;AAAA,oBACf,KAAK,QAAQ;AAAA,iBAChB,KAAK,WAAW;AAAA,mBACd,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOnC;AACF;AA/Ca,SACJ,SAAS;AAGJ;AAAA,EAAX,SAAS;AAAA,GAJC,SAIC;AAGgC;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAP/B,SAOiC;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAV/B,SAUiC;AAGf;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAbhB,SAakB;",
+  "names": []
+}

package/dist/components/toggle/toggle.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/toggle.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/toggle/toggle.js

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

package/dist/components/toggle/toggle.js.map

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