@manzanohq/components 0.1.1 → 0.1.4

package/dist/components/command/command.component.js

@@ -0,0 +1,239 @@
+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 { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./command.styles.js";
+class MzCommand extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.placeholder = "Type a command...";
+    this.emptyText = "No results found";
+    this.query = "";
+    this.highlightedIndex = 0;
+    /** Guard to prevent re-entrant show/hide calls from updated(). */
+    this._isTransitioning = false;
+    /** Cached list of all slotted items. */
+    this._allItems = [];
+  }
+  async updated(changed) {
+    if (changed.has("open") && !this._isTransitioning) {
+      if (this.open) {
+        await this._showDialog();
+      } else if (changed.get("open") === true) {
+        await this._hideDialog();
+      }
+    }
+  }
+  /** Programmatically open the command palette. */
+  show() {
+    this.open = true;
+  }
+  /** Programmatically close the command palette. */
+  hide() {
+    this.open = false;
+  }
+  // ---------------------------------------------------------------------------
+  // Private helpers
+  // ---------------------------------------------------------------------------
+  async _showDialog() {
+    this._isTransitioning = true;
+    this.dialogEl.showModal();
+    this.query = "";
+    this.highlightedIndex = 0;
+    this._applyFilter();
+    await this.updateComplete;
+    requestAnimationFrame(() => {
+      this.shadowRoot.querySelector(".command__input")?.focus();
+    });
+    this.emit("mz-command-open");
+    this._isTransitioning = false;
+  }
+  async _hideDialog() {
+    this._isTransitioning = true;
+    this.dialogEl.close();
+    this.emit("mz-command-close");
+    this._isTransitioning = false;
+  }
+  /** Get all slotted items from the default slot. */
+  getItems() {
+    return this._allItems;
+  }
+  /** Return only items that match the current query. */
+  get visibleItems() {
+    const items = this.getItems();
+    if (!this.query) return items;
+    const q = this.query.toLowerCase();
+    return items.filter((item) => {
+      const text = item.textContent?.toLowerCase() ?? "";
+      return text.includes(q);
+    });
+  }
+  /**
+   * Show/hide slotted items based on the query string and trigger a re-render.
+   * Use this from event handlers (not from updated()).
+   */
+  filterItems() {
+    this._applyFilter();
+    this.requestUpdate();
+  }
+  /**
+   * Show/hide slotted items without triggering requestUpdate().
+   * Safe to call from updated() without causing the "update scheduled during update" warning.
+   */
+  _applyFilter() {
+    const items = this.getItems();
+    const q = this.query.toLowerCase();
+    items.forEach((item) => {
+      if (!q) {
+        item.style.display = "";
+      } else {
+        const text = item.textContent?.toLowerCase() ?? "";
+        item.style.display = text.includes(q) ? "" : "none";
+      }
+    });
+  }
+  /** Update the highlighted class on items. */
+  updateHighlight() {
+    const visible = this.visibleItems;
+    this.getItems().forEach((item) => item.classList.remove("command-highlighted"));
+    if (visible.length > 0 && this.highlightedIndex < visible.length) {
+      visible[this.highlightedIndex].classList.add("command-highlighted");
+      visible[this.highlightedIndex].scrollIntoView({ block: "nearest" });
+    }
+  }
+  // ---------------------------------------------------------------------------
+  // Event handlers
+  // ---------------------------------------------------------------------------
+  handleSlotChange(e) {
+    const slot = e.target;
+    this._allItems = slot.assignedElements({ flatten: true }).filter((el) => el instanceof HTMLElement);
+    this.filterItems();
+  }
+  handleInput(e) {
+    this.query = e.target.value;
+    this.highlightedIndex = 0;
+    this.filterItems();
+  }
+  handleKeydown(e) {
+    const visible = this.visibleItems;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (visible.length > 0) {
+          this.highlightedIndex = (this.highlightedIndex + 1) % visible.length;
+          this.updateHighlight();
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (visible.length > 0) {
+          this.highlightedIndex = (this.highlightedIndex - 1 + visible.length) % visible.length;
+          this.updateHighlight();
+        }
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (visible.length > 0 && this.highlightedIndex < visible.length) {
+          this.selectItem(visible[this.highlightedIndex]);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        this.hide();
+        break;
+    }
+  }
+  selectItem(item) {
+    const value = item.getAttribute("value") ?? item.textContent?.trim() ?? "";
+    this.emit("mz-command-select", { detail: { value } });
+    this.hide();
+  }
+  handleDialogClick(e) {
+    if (e.target === e.currentTarget) {
+      this.hide();
+    }
+  }
+  handleDialogClose() {
+    if (this.open) {
+      this.open = false;
+      this.emit("mz-command-close");
+    }
+  }
+  handleItemClick(e) {
+    const path = e.composedPath();
+    const item = path.find(
+      (el) => el instanceof HTMLElement && this._allItems.includes(el)
+    );
+    if (item) {
+      this.selectItem(item);
+    }
+  }
+  render() {
+    return html`
+      <dialog
+        part="dialog"
+        class="command__dialog"
+        @click=${this.handleDialogClick}
+        @close=${this.handleDialogClose}
+        @cancel=${(e) => {
+      e.preventDefault();
+      this.hide();
+    }}
+      >
+        <div part="base" class="command">
+          <div part="search" class="command__search">
+            <svg class="command__search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+            </svg>
+            <input
+              part="input"
+              class="command__input"
+              type="text"
+              placeholder=${this.placeholder}
+              .value=${this.query}
+              @input=${this.handleInput}
+              @keydown=${this.handleKeydown}
+            />
+          </div>
+          <div part="list" class="command__list" role="listbox" @click=${this.handleItemClick}>
+            <slot @slotchange=${this.handleSlotChange}></slot>
+            ${this.visibleItems.length === 0 && this.query ? html`<div class="command__empty" part="empty">${this.emptyText}</div>` : nothing}
+          </div>
+        </div>
+      </dialog>
+    `;
+  }
+}
+MzCommand.styles = styles;
+__decorateClass([
+  query("dialog")
+], MzCommand.prototype, "dialogEl", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzCommand.prototype, "open", 2);
+__decorateClass([
+  property()
+], MzCommand.prototype, "placeholder", 2);
+__decorateClass([
+  property({ attribute: "empty-text" })
+], MzCommand.prototype, "emptyText", 2);
+__decorateClass([
+  state()
+], MzCommand.prototype, "query", 2);
+__decorateClass([
+  state()
+], MzCommand.prototype, "highlightedIndex", 2);
+export {
+  MzCommand
+};
+//# sourceMappingURL=command.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/command/command.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './command.styles.js';\n\n/**\n * @summary A command palette (Cmd+K / Ctrl+K) with search input, keyboard navigation, and grouped commands.\n *\n * @tag mz-command\n *\n * @slot - Command items (e.g. `mz-menu-item` elements or any element).\n *\n * @event mz-command-select - Emitted when a command is selected. Detail: `{ value: string }`.\n * @event mz-command-open - Emitted when the palette opens.\n * @event mz-command-close - Emitted when the palette closes.\n *\n * @csspart dialog - The native `<dialog>` element.\n * @csspart base - The command palette container.\n * @csspart search - The search area.\n * @csspart input - The search input.\n * @csspart list - The command list.\n * @csspart empty - The empty-state message.\n */\nexport class MzCommand extends ManzanoElement {\n  static styles = styles;\n\n  @query('dialog') private dialogEl!: HTMLDialogElement;\n\n  /** Whether the command palette is visible. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Search input placeholder. */\n  @property() placeholder = 'Type a command...';\n\n  /** Text shown when no results match. */\n  @property({ attribute: 'empty-text' }) emptyText = 'No results found';\n\n  @state() private query = '';\n  @state() private highlightedIndex = 0;\n\n  /** Guard to prevent re-entrant show/hide calls from updated(). */\n  private _isTransitioning = false;\n\n  /** Cached list of all slotted items. */\n  private _allItems: HTMLElement[] = [];\n\n  async updated(changed: Map<string, unknown>): Promise<void> {\n    if (changed.has('open') && !this._isTransitioning) {\n      if (this.open) {\n        await this._showDialog();\n      } else if (changed.get('open') === true) {\n        await this._hideDialog();\n      }\n    }\n  }\n\n  /** Programmatically open the command palette. */\n  show(): void {\n    this.open = true;\n  }\n\n  /** Programmatically close the command palette. */\n  hide(): void {\n    this.open = false;\n  }\n\n  // ---------------------------------------------------------------------------\n  // Private helpers\n  // ---------------------------------------------------------------------------\n\n  private async _showDialog(): Promise<void> {\n    this._isTransitioning = true;\n    this.dialogEl.showModal();\n    this.query = '';\n    this.highlightedIndex = 0;\n    this._applyFilter();\n    // Focus the input after the dialog is visible\n    await this.updateComplete;\n    requestAnimationFrame(() => {\n      this.shadowRoot!.querySelector<HTMLInputElement>('.command__input')?.focus();\n    });\n    this.emit('mz-command-open');\n    this._isTransitioning = false;\n  }\n\n  private async _hideDialog(): Promise<void> {\n    this._isTransitioning = true;\n    this.dialogEl.close();\n    this.emit('mz-command-close');\n    this._isTransitioning = false;\n  }\n\n  /** Get all slotted items from the default slot. */\n  private getItems(): HTMLElement[] {\n    return this._allItems;\n  }\n\n  /** Return only items that match the current query. */\n  private get visibleItems(): HTMLElement[] {\n    const items = this.getItems();\n    if (!this.query) return items;\n    const q = this.query.toLowerCase();\n    return items.filter(item => {\n      const text = item.textContent?.toLowerCase() ?? '';\n      return text.includes(q);\n    });\n  }\n\n  /**\n   * Show/hide slotted items based on the query string and trigger a re-render.\n   * Use this from event handlers (not from updated()).\n   */\n  private filterItems(): void {\n    this._applyFilter();\n    this.requestUpdate();\n  }\n\n  /**\n   * Show/hide slotted items without triggering requestUpdate().\n   * Safe to call from updated() without causing the \"update scheduled during update\" warning.\n   */\n  private _applyFilter(): void {\n    const items = this.getItems();\n    const q = this.query.toLowerCase();\n    items.forEach(item => {\n      if (!q) {\n        item.style.display = '';\n      } else {\n        const text = item.textContent?.toLowerCase() ?? '';\n        item.style.display = text.includes(q) ? '' : 'none';\n      }\n    });\n  }\n\n  /** Update the highlighted class on items. */\n  private updateHighlight(): void {\n    const visible = this.visibleItems;\n    this.getItems().forEach(item => item.classList.remove('command-highlighted'));\n    if (visible.length > 0 && this.highlightedIndex < visible.length) {\n      visible[this.highlightedIndex].classList.add('command-highlighted');\n      visible[this.highlightedIndex].scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Event handlers\n  // ---------------------------------------------------------------------------\n\n  private handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._allItems = slot\n      .assignedElements({ flatten: true })\n      .filter((el): el is HTMLElement => el instanceof HTMLElement);\n    this.filterItems();\n  }\n\n  private handleInput(e: Event): void {\n    this.query = (e.target as HTMLInputElement).value;\n    this.highlightedIndex = 0;\n    this.filterItems();\n  }\n\n  private handleKeydown(e: KeyboardEvent): void {\n    const visible = this.visibleItems;\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        if (visible.length > 0) {\n          this.highlightedIndex = (this.highlightedIndex + 1) % visible.length;\n          this.updateHighlight();\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (visible.length > 0) {\n          this.highlightedIndex = (this.highlightedIndex - 1 + visible.length) % visible.length;\n          this.updateHighlight();\n        }\n        break;\n      case 'Enter':\n        e.preventDefault();\n        if (visible.length > 0 && this.highlightedIndex < visible.length) {\n          this.selectItem(visible[this.highlightedIndex]);\n        }\n        break;\n      case 'Escape':\n        e.preventDefault();\n        this.hide();\n        break;\n    }\n  }\n\n  private selectItem(item: HTMLElement): void {\n    const value = item.getAttribute('value') ?? item.textContent?.trim() ?? '';\n    this.emit('mz-command-select', { detail: { value } });\n    this.hide();\n  }\n\n  private handleDialogClick(e: Event): void {\n    if (e.target === e.currentTarget) {\n      this.hide();\n    }\n  }\n\n  private handleDialogClose(): void {\n    // Native dialog was closed (e.g. Escape key) \u2014 sync our state\n    if (this.open) {\n      this.open = false;\n      this.emit('mz-command-close');\n    }\n  }\n\n  private handleItemClick(e: Event): void {\n    const path = e.composedPath();\n    const item = path.find(\n      el => el instanceof HTMLElement && this._allItems.includes(el)\n    ) as HTMLElement | undefined;\n    if (item) {\n      this.selectItem(item);\n    }\n  }\n\n  render() {\n    return html`\n      <dialog\n        part=\"dialog\"\n        class=\"command__dialog\"\n        @click=${this.handleDialogClick}\n        @close=${this.handleDialogClose}\n        @cancel=${(e: Event) => {\n          e.preventDefault();\n          this.hide();\n        }}\n      >\n        <div part=\"base\" class=\"command\">\n          <div part=\"search\" class=\"command__search\">\n            <svg class=\"command__search-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n            </svg>\n            <input\n              part=\"input\"\n              class=\"command__input\"\n              type=\"text\"\n              placeholder=${this.placeholder}\n              .value=${this.query}\n              @input=${this.handleInput}\n              @keydown=${this.handleKeydown}\n            />\n          </div>\n          <div part=\"list\" class=\"command__list\" role=\"listbox\" @click=${this.handleItemClick}>\n            <slot @slotchange=${this.handleSlotChange}></slot>\n            ${this.visibleItems.length === 0 && this.query\n              ? html`<div class=\"command__empty\" part=\"empty\">${this.emptyText}</div>`\n              : nothing}\n          </div>\n        </div>\n      </dialog>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,MAAM,eAAe;AAC9B,SAAS,UAAU,OAAO,aAAa;AACvC,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAoBZ,MAAM,kBAAkB,eAAe;AAAA,EAAvC;AAAA;AAMuC,gBAAO;AAGvC,uBAAc;AAGa,qBAAY;AAE1C,SAAQ,QAAQ;AAChB,SAAQ,mBAAmB;AAGpC;AAAA,SAAQ,mBAAmB;AAG3B;AAAA,SAAQ,YAA2B,CAAC;AAAA;AAAA,EAEpC,MAAM,QAAQ,SAA8C;AAC1D,QAAI,QAAQ,IAAI,MAAM,KAAK,CAAC,KAAK,kBAAkB;AACjD,UAAI,KAAK,MAAM;AACb,cAAM,KAAK,YAAY;AAAA,MACzB,WAAW,QAAQ,IAAI,MAAM,MAAM,MAAM;AACvC,cAAM,KAAK,YAAY;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAGA,OAAa;AACX,SAAK,OAAO;AAAA,EACd;AAAA;AAAA,EAGA,OAAa;AACX,SAAK,OAAO;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAMA,MAAc,cAA6B;AACzC,SAAK,mBAAmB;AACxB,SAAK,SAAS,UAAU;AACxB,SAAK,QAAQ;AACb,SAAK,mBAAmB;AACxB,SAAK,aAAa;AAElB,UAAM,KAAK;AACX,0BAAsB,MAAM;AAC1B,WAAK,WAAY,cAAgC,iBAAiB,GAAG,MAAM;AAAA,IAC7E,CAAC;AACD,SAAK,KAAK,iBAAiB;AAC3B,SAAK,mBAAmB;AAAA,EAC1B;AAAA,EAEA,MAAc,cAA6B;AACzC,SAAK,mBAAmB;AACxB,SAAK,SAAS,MAAM;AACpB,SAAK,KAAK,kBAAkB;AAC5B,SAAK,mBAAmB;AAAA,EAC1B;AAAA;AAAA,EAGQ,WAA0B;AAChC,WAAO,KAAK;AAAA,EACd;AAAA;AAAA,EAGA,IAAY,eAA8B;AACxC,UAAM,QAAQ,KAAK,SAAS;AAC5B,QAAI,CAAC,KAAK,MAAO,QAAO;AACxB,UAAM,IAAI,KAAK,MAAM,YAAY;AACjC,WAAO,MAAM,OAAO,UAAQ;AAC1B,YAAM,OAAO,KAAK,aAAa,YAAY,KAAK;AAChD,aAAO,KAAK,SAAS,CAAC;AAAA,IACxB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,cAAoB;AAC1B,SAAK,aAAa;AAClB,SAAK,cAAc;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,eAAqB;AAC3B,UAAM,QAAQ,KAAK,SAAS;AAC5B,UAAM,IAAI,KAAK,MAAM,YAAY;AACjC,UAAM,QAAQ,UAAQ;AACpB,UAAI,CAAC,GAAG;AACN,aAAK,MAAM,UAAU;AAAA,MACvB,OAAO;AACL,cAAM,OAAO,KAAK,aAAa,YAAY,KAAK;AAChD,aAAK,MAAM,UAAU,KAAK,SAAS,CAAC,IAAI,KAAK;AAAA,MAC/C;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA,EAGQ,kBAAwB;AAC9B,UAAM,UAAU,KAAK;AACrB,SAAK,SAAS,EAAE,QAAQ,UAAQ,KAAK,UAAU,OAAO,qBAAqB,CAAC;AAC5E,QAAI,QAAQ,SAAS,KAAK,KAAK,mBAAmB,QAAQ,QAAQ;AAChE,cAAQ,KAAK,gBAAgB,EAAE,UAAU,IAAI,qBAAqB;AAClE,cAAQ,KAAK,gBAAgB,EAAE,eAAe,EAAE,OAAO,UAAU,CAAC;AAAA,IACpE;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAMQ,iBAAiB,GAAgB;AACvC,UAAM,OAAO,EAAE;AACf,SAAK,YAAY,KACd,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAClC,OAAO,CAAC,OAA0B,cAAc,WAAW;AAC9D,SAAK,YAAY;AAAA,EACnB;AAAA,EAEQ,YAAY,GAAgB;AAClC,SAAK,QAAS,EAAE,OAA4B;AAC5C,SAAK,mBAAmB;AACxB,SAAK,YAAY;AAAA,EACnB;AAAA,EAEQ,cAAc,GAAwB;AAC5C,UAAM,UAAU,KAAK;AACrB,YAAQ,EAAE,KAAK;AAAA,MACb,KAAK;AACH,UAAE,eAAe;AACjB,YAAI,QAAQ,SAAS,GAAG;AACtB,eAAK,oBAAoB,KAAK,mBAAmB,KAAK,QAAQ;AAC9D,eAAK,gBAAgB;AAAA,QACvB;AACA;AAAA,MACF,KAAK;AACH,UAAE,eAAe;AACjB,YAAI,QAAQ,SAAS,GAAG;AACtB,eAAK,oBAAoB,KAAK,mBAAmB,IAAI,QAAQ,UAAU,QAAQ;AAC/E,eAAK,gBAAgB;AAAA,QACvB;AACA;AAAA,MACF,KAAK;AACH,UAAE,eAAe;AACjB,YAAI,QAAQ,SAAS,KAAK,KAAK,mBAAmB,QAAQ,QAAQ;AAChE,eAAK,WAAW,QAAQ,KAAK,gBAAgB,CAAC;AAAA,QAChD;AACA;AAAA,MACF,KAAK;AACH,UAAE,eAAe;AACjB,aAAK,KAAK;AACV;AAAA,IACJ;AAAA,EACF;AAAA,EAEQ,WAAW,MAAyB;AAC1C,UAAM,QAAQ,KAAK,aAAa,OAAO,KAAK,KAAK,aAAa,KAAK,KAAK;AACxE,SAAK,KAAK,qBAAqB,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;AACpD,SAAK,KAAK;AAAA,EACZ;AAAA,EAEQ,kBAAkB,GAAgB;AACxC,QAAI,EAAE,WAAW,EAAE,eAAe;AAChC,WAAK,KAAK;AAAA,IACZ;AAAA,EACF;AAAA,EAEQ,oBAA0B;AAEhC,QAAI,KAAK,MAAM;AACb,WAAK,OAAO;AACZ,WAAK,KAAK,kBAAkB;AAAA,IAC9B;AAAA,EACF;AAAA,EAEQ,gBAAgB,GAAgB;AACtC,UAAM,OAAO,EAAE,aAAa;AAC5B,UAAM,OAAO,KAAK;AAAA,MAChB,QAAM,cAAc,eAAe,KAAK,UAAU,SAAS,EAAE;AAAA,IAC/D;AACA,QAAI,MAAM;AACR,WAAK,WAAW,IAAI;AAAA,IACtB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA,iBAIM,KAAK,iBAAiB;AAAA,iBACtB,KAAK,iBAAiB;AAAA,kBACrB,CAAC,MAAa;AACtB,QAAE,eAAe;AACjB,WAAK,KAAK;AAAA,IACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAWmB,KAAK,WAAW;AAAA,uBACrB,KAAK,KAAK;AAAA,uBACV,KAAK,WAAW;AAAA,yBACd,KAAK,aAAa;AAAA;AAAA;AAAA,yEAG8B,KAAK,eAAe;AAAA,gCAC7D,KAAK,gBAAgB;AAAA,cACvC,KAAK,aAAa,WAAW,KAAK,KAAK,QACrC,gDAAgD,KAAK,SAAS,WAC9D,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB;AACF;AA5Oa,UACJ,SAAS;AAES;AAAA,EAAxB,MAAM,QAAQ;AAAA,GAHJ,UAGc;AAGmB;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAN/B,UAMiC;AAGhC;AAAA,EAAX,SAAS;AAAA,GATC,UASC;AAG2B;AAAA,EAAtC,SAAS,EAAE,WAAW,aAAa,CAAC;AAAA,GAZ1B,UAY4B;AAEtB;AAAA,EAAhB,MAAM;AAAA,GAdI,UAcM;AACA;AAAA,EAAhB,MAAM;AAAA,GAfI,UAeM;",
+  "names": []
+}

package/dist/components/command/command.d.ts

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

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

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

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

package/dist/components/command/command.js.map

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

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

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

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

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

package/dist/components/command/command.styles.js

@@ -0,0 +1,116 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var command_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: contents;
+    }
+
+    dialog {
+      position: fixed;
+      inset: 0;
+      border: none;
+      background: transparent;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      max-width: 100%;
+      max-height: 100%;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      padding-top: 15vh;
+    }
+
+    dialog::backdrop {
+      background: rgb(28 25 21 / 0.4);
+    }
+
+    dialog:not([open]) {
+      display: none;
+    }
+
+    .command {
+      width: min(90vw, 32rem);
+      background: var(--mz-color-surface-overlay, var(--mz-color-surface, #fff));
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-xl, 1rem);
+      box-shadow: var(--mz-shadow-xl, 0 20px 60px rgb(28 25 21 / 0.2));
+      overflow: hidden;
+      font-family: var(--mz-font-sans);
+    }
+
+    .command__search {
+      display: flex;
+      align-items: center;
+      gap: var(--mz-space-sm, 0.5rem);
+      padding: var(--mz-space-sm, 0.5rem) var(--mz-space-md, 0.75rem);
+      border-bottom: 1px solid var(--mz-color-border);
+    }
+
+    .command__search-icon {
+      color: var(--mz-color-text-disabled);
+      flex-shrink: 0;
+    }
+
+    .command__input {
+      flex: 1;
+      border: none;
+      background: transparent;
+      font-family: inherit;
+      font-size: var(--mz-font-size-base, 1rem);
+      color: var(--mz-color-text, inherit);
+      outline: none;
+      padding: var(--mz-space-xs, 0.25rem) 0;
+    }
+
+    .command__input::placeholder {
+      color: var(--mz-color-text-disabled);
+    }
+
+    .command__list {
+      max-height: 18rem;
+      overflow-y: auto;
+      padding: var(--mz-space-xs, 0.25rem);
+    }
+
+    .command__empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--mz-space-lg, 1rem);
+      color: var(--mz-color-text-secondary);
+      font-size: var(--mz-font-size-sm, 0.875rem);
+    }
+
+    /* Style slotted items */
+    ::slotted(mz-menu-item),
+    ::slotted([role="option"]) {
+      display: block;
+      cursor: pointer;
+    }
+
+    ::slotted(.command-highlighted) {
+      background: color-mix(in srgb, var(--mz-color-primary) 10%, var(--mz-color-surface));
+      border-radius: var(--mz-radius-md, 0.375rem);
+    }
+
+    /* Group labels */
+    ::slotted(.command-group-label) {
+      display: block;
+      padding: var(--mz-space-xs, 0.25rem) var(--mz-space-sm, 0.5rem);
+      font-size: var(--mz-font-size-xs, 0.75rem);
+      font-weight: var(--mz-font-weight-semibold, 600);
+      color: var(--mz-color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      pointer-events: none;
+    }
+  `
+];
+export {
+  command_styles_default as default
+};
+//# sourceMappingURL=command.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/command/command.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      position: fixed;\n      inset: 0;\n      border: none;\n      background: transparent;\n      padding: 0;\n      margin: 0;\n      width: 100%;\n      height: 100%;\n      max-width: 100%;\n      max-height: 100%;\n      display: flex;\n      align-items: flex-start;\n      justify-content: center;\n      padding-top: 15vh;\n    }\n\n    dialog::backdrop {\n      background: rgb(28 25 21 / 0.4);\n    }\n\n    dialog:not([open]) {\n      display: none;\n    }\n\n    .command {\n      width: min(90vw, 32rem);\n      background: var(--mz-color-surface-overlay, var(--mz-color-surface, #fff));\n      border: 1px solid var(--mz-color-border);\n      border-radius: var(--mz-radius-xl, 1rem);\n      box-shadow: var(--mz-shadow-xl, 0 20px 60px rgb(28 25 21 / 0.2));\n      overflow: hidden;\n      font-family: var(--mz-font-sans);\n    }\n\n    .command__search {\n      display: flex;\n      align-items: center;\n      gap: var(--mz-space-sm, 0.5rem);\n      padding: var(--mz-space-sm, 0.5rem) var(--mz-space-md, 0.75rem);\n      border-bottom: 1px solid var(--mz-color-border);\n    }\n\n    .command__search-icon {\n      color: var(--mz-color-text-disabled);\n      flex-shrink: 0;\n    }\n\n    .command__input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      font-family: inherit;\n      font-size: var(--mz-font-size-base, 1rem);\n      color: var(--mz-color-text, inherit);\n      outline: none;\n      padding: var(--mz-space-xs, 0.25rem) 0;\n    }\n\n    .command__input::placeholder {\n      color: var(--mz-color-text-disabled);\n    }\n\n    .command__list {\n      max-height: 18rem;\n      overflow-y: auto;\n      padding: var(--mz-space-xs, 0.25rem);\n    }\n\n    .command__empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: var(--mz-space-lg, 1rem);\n      color: var(--mz-color-text-secondary);\n      font-size: var(--mz-font-size-sm, 0.875rem);\n    }\n\n    /* Style slotted items */\n    ::slotted(mz-menu-item),\n    ::slotted([role=\"option\"]) {\n      display: block;\n      cursor: pointer;\n    }\n\n    ::slotted(.command-highlighted) {\n      background: color-mix(in srgb, var(--mz-color-primary) 10%, var(--mz-color-surface));\n      border-radius: var(--mz-radius-md, 0.375rem);\n    }\n\n    /* Group labels */\n    ::slotted(.command-group-label) {\n      display: block;\n      padding: var(--mz-space-xs, 0.25rem) var(--mz-space-sm, 0.5rem);\n      font-size: var(--mz-font-size-xs, 0.75rem);\n      font-weight: var(--mz-font-weight-semibold, 600);\n      color: var(--mz-color-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      pointer-events: none;\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2GF;",
+  "names": []
+}

package/dist/components/comparison-slider/comparison-slider.component.d.ts

@@ -0,0 +1,39 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary An image/content comparison slider that reveals one layer over another by dragging.
+ *
+ * @slot before - Content for the "before" (left) layer that clips to reveal the "after" layer.
+ * @slot after - Content for the "after" (right) layer shown beneath.
+ * @slot handle - Custom handle content. Defaults to a circular grip with arrows.
+ *
+ * @event mz-change - Emitted while dragging. `event.detail.position` is the current percentage.
+ *
+ * @csspart base - The outer container.
+ * @csspart before - The clipped before pane.
+ * @csspart after - The after pane (bottom layer).
+ * @csspart divider - The drag handle.
+ *
+ * @cssproperty --mz-comparison-slider-divider-width - Divider line thickness (default: 3px).
+ * @cssproperty --mz-comparison-slider-divider-color - Divider line color.
+ * @cssproperty --mz-comparison-slider-handle-size - Grip circle diameter (default: 40px).
+ * @cssproperty --mz-comparison-slider-handle-color - Grip circle background color.
+ */
+export declare class MzComparisonSlider extends ManzanoElement {
+    static styles: import("lit").CSSResult;
+    /** Divider position as a percentage from the left (0-100). */
+    position: number;
+    /** Prevent the divider from being dragged. */
+    disabled: boolean;
+    private dragging;
+    private container;
+    private resizeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncWidth;
+    private handleDragStart;
+    private handleDragMove;
+    private handleDragEnd;
+    private handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=comparison-slider.component.d.ts.map

package/dist/components/comparison-slider/comparison-slider.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparison-slider.component.d.ts","sourceRoot":"","sources":["../../../src/components/comparison-slider/comparison-slider.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,kBAAmB,SAAQ,cAAc;IACpD,MAAM,CAAC,MAAM,0BAAU;IAEvB,8DAA8D;IAClC,QAAQ,SAAM;IAE1C,8CAA8C;IACF,QAAQ,UAAS;IAEpD,OAAO,CAAC,QAAQ,CAAS;IAEV,OAAO,CAAC,SAAS,CAAe;IAExD,OAAO,CAAC,cAAc,CAAC,CAAiB;IAExC,iBAAiB;IASjB,oBAAoB;IAKpB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAkCrB,MAAM;CAsCP"}

package/dist/components/comparison-slider/comparison-slider.component.js

@@ -0,0 +1,140 @@
+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, svg } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./comparison-slider.styles.js";
+class MzComparisonSlider extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.position = 50;
+    this.disabled = false;
+    this.dragging = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(() => this.syncWidth());
+    this.updateComplete.then(() => {
+      if (this.container) this.resizeObserver.observe(this.container);
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+  }
+  syncWidth() {
+    if (!this.container) return;
+    this.style.setProperty("--_container-width", this.container.offsetWidth + "px");
+  }
+  handleDragStart(e) {
+    if (this.disabled) return;
+    e.preventDefault();
+    this.dragging = true;
+    this.setAttribute("dragging", "");
+    e.target.setPointerCapture(e.pointerId);
+  }
+  handleDragMove(e) {
+    if (!this.dragging || !this.container) return;
+    const rect = this.container.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(100, (e.clientX - rect.left) / rect.width * 100));
+    this.position = pct;
+    this.emit("mz-change", { detail: { position: pct } });
+  }
+  handleDragEnd() {
+    this.dragging = false;
+    this.removeAttribute("dragging");
+  }
+  handleKeyDown(e) {
+    if (this.disabled) return;
+    let newPos = this.position;
+    const step = e.shiftKey ? 10 : 1;
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault();
+        newPos -= step;
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        newPos += step;
+        break;
+      case "Home":
+        e.preventDefault();
+        newPos = 0;
+        break;
+      case "End":
+        e.preventDefault();
+        newPos = 100;
+        break;
+      default:
+        return;
+    }
+    newPos = Math.max(0, Math.min(100, newPos));
+    if (newPos !== this.position) {
+      this.position = newPos;
+      this.emit("mz-change", { detail: { position: newPos } });
+    }
+  }
+  render() {
+    const pos = `${this.position}%`;
+    return html`
+      <div class="slider__base" part="base">
+        <div class="slider__after" part="after">
+          <slot name="after"></slot>
+        </div>
+        <div class="slider__before-clip" part="before" style=${styleMap({ width: pos })}>
+          <div class="slider__before">
+            <slot name="before"></slot>
+          </div>
+        </div>
+        <div
+          class="slider__handle"
+          part="divider"
+          role="slider"
+          tabindex=${this.disabled ? -1 : 0}
+          aria-label="Comparison slider"
+          aria-valuenow=${Math.round(this.position)}
+          aria-valuemin="0"
+          aria-valuemax="100"
+          style=${styleMap({ left: pos })}
+          @pointerdown=${this.handleDragStart}
+          @pointermove=${this.handleDragMove}
+          @pointerup=${this.handleDragEnd}
+          @lostpointercapture=${this.handleDragEnd}
+          @keydown=${this.handleKeyDown}
+        >
+          <slot name="handle">
+            <div class="slider__grip">
+              ${svg`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M8 6l-4 6 4 6"/><path d="M16 6l4 6-4 6"/></svg>`}
+            </div>
+          </slot>
+        </div>
+      </div>
+    `;
+  }
+}
+MzComparisonSlider.styles = styles;
+__decorateClass([
+  property({ type: Number })
+], MzComparisonSlider.prototype, "position", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzComparisonSlider.prototype, "disabled", 2);
+__decorateClass([
+  state()
+], MzComparisonSlider.prototype, "dragging", 2);
+__decorateClass([
+  query(".slider__base")
+], MzComparisonSlider.prototype, "container", 2);
+export {
+  MzComparisonSlider
+};
+//# sourceMappingURL=comparison-slider.component.js.map

package/dist/components/comparison-slider/comparison-slider.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/comparison-slider/comparison-slider.component.ts"],
+  "sourcesContent": ["import { html, svg } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './comparison-slider.styles.js';\n\n/**\n * @summary An image/content comparison slider that reveals one layer over another by dragging.\n *\n * @slot before - Content for the \"before\" (left) layer that clips to reveal the \"after\" layer.\n * @slot after - Content for the \"after\" (right) layer shown beneath.\n * @slot handle - Custom handle content. Defaults to a circular grip with arrows.\n *\n * @event mz-change - Emitted while dragging. `event.detail.position` is the current percentage.\n *\n * @csspart base - The outer container.\n * @csspart before - The clipped before pane.\n * @csspart after - The after pane (bottom layer).\n * @csspart divider - The drag handle.\n *\n * @cssproperty --mz-comparison-slider-divider-width - Divider line thickness (default: 3px).\n * @cssproperty --mz-comparison-slider-divider-color - Divider line color.\n * @cssproperty --mz-comparison-slider-handle-size - Grip circle diameter (default: 40px).\n * @cssproperty --mz-comparison-slider-handle-color - Grip circle background color.\n */\nexport class MzComparisonSlider extends ManzanoElement {\n  static styles = styles;\n\n  /** Divider position as a percentage from the left (0-100). */\n  @property({ type: Number }) position = 50;\n\n  /** Prevent the divider from being dragged. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() private dragging = false;\n\n  @query('.slider__base') private container!: HTMLElement;\n\n  private resizeObserver?: ResizeObserver;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => this.syncWidth());\n    // Wait for first render to observe the container\n    this.updateComplete.then(() => {\n      if (this.container) this.resizeObserver!.observe(this.container);\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n  }\n\n  private syncWidth() {\n    if (!this.container) return;\n    this.style.setProperty('--_container-width', this.container.offsetWidth + 'px');\n  }\n\n  private handleDragStart(e: PointerEvent) {\n    if (this.disabled) return;\n    e.preventDefault();\n    this.dragging = true;\n    this.setAttribute('dragging', '');\n    (e.target as HTMLElement).setPointerCapture(e.pointerId);\n  }\n\n  private handleDragMove(e: PointerEvent) {\n    if (!this.dragging || !this.container) return;\n    const rect = this.container.getBoundingClientRect();\n    const pct = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));\n    this.position = pct;\n    this.emit('mz-change', { detail: { position: pct } });\n  }\n\n  private handleDragEnd() {\n    this.dragging = false;\n    this.removeAttribute('dragging');\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (this.disabled) return;\n\n    let newPos = this.position;\n    const step = e.shiftKey ? 10 : 1;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n        e.preventDefault();\n        newPos -= step;\n        break;\n      case 'ArrowRight':\n        e.preventDefault();\n        newPos += step;\n        break;\n      case 'Home':\n        e.preventDefault();\n        newPos = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        newPos = 100;\n        break;\n      default:\n        return;\n    }\n\n    newPos = Math.max(0, Math.min(100, newPos));\n    if (newPos !== this.position) {\n      this.position = newPos;\n      this.emit('mz-change', { detail: { position: newPos } });\n    }\n  }\n\n  render() {\n    const pos = `${this.position}%`;\n\n    return html`\n      <div class=\"slider__base\" part=\"base\">\n        <div class=\"slider__after\" part=\"after\">\n          <slot name=\"after\"></slot>\n        </div>\n        <div class=\"slider__before-clip\" part=\"before\" style=${styleMap({ width: pos })}>\n          <div class=\"slider__before\">\n            <slot name=\"before\"></slot>\n          </div>\n        </div>\n        <div\n          class=\"slider__handle\"\n          part=\"divider\"\n          role=\"slider\"\n          tabindex=${this.disabled ? -1 : 0}\n          aria-label=\"Comparison slider\"\n          aria-valuenow=${Math.round(this.position)}\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          style=${styleMap({ left: pos })}\n          @pointerdown=${this.handleDragStart}\n          @pointermove=${this.handleDragMove}\n          @pointerup=${this.handleDragEnd}\n          @lostpointercapture=${this.handleDragEnd}\n          @keydown=${this.handleKeyDown}\n        >\n          <slot name=\"handle\">\n            <div class=\"slider__grip\">\n              ${svg`<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M8 6l-4 6 4 6\"/><path d=\"M16 6l4 6-4 6\"/></svg>`}\n            </div>\n          </slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/comparison-slider/comparison-slider.d.ts

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

package/dist/components/comparison-slider/comparison-slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparison-slider.d.ts","sourceRoot":"","sources":["../../../src/components/comparison-slider/comparison-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,cAAc,kCAAkC,CAAC;AAIjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}