@manzanohq/components 0.1.1 → 0.1.4

package/dist/components/combobox/combobox.component.js

@@ -0,0 +1,341 @@
+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, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./combobox.styles.js";
+class MzCombobox extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.value = "";
+    this.placeholder = "";
+    this.size = "medium";
+    this.disabled = false;
+    this.clearable = false;
+    this.required = false;
+    this.isOpen = false;
+    this.query = "";
+    this.highlightedIndex = -1;
+    this.displayValue = "";
+    this.isFocused = false;
+    /** Cached list of filtered (visible) options. */
+    this._filteredOptions = [];
+    this.blurTimeout = null;
+    this.handleOptionClick = (e) => {
+      const target = e.target;
+      const option = target.closest("mz-option");
+      if (option && !option.disabled && this.contains(option)) {
+        this.selectOption(option);
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleOptionClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleOptionClick);
+    if (this.blurTimeout) {
+      clearTimeout(this.blurTimeout);
+    }
+  }
+  willUpdate(changed) {
+    if (changed.has("value")) {
+      this.syncDisplayValue();
+    }
+  }
+  /** Sets focus on the input. */
+  focus(options) {
+    this.inputEl?.focus(options);
+  }
+  /** Removes focus from the input. */
+  blur() {
+    this.inputEl?.blur();
+  }
+  getOptions() {
+    return [...this.querySelectorAll("mz-option")];
+  }
+  get filteredOptions() {
+    const options = this.getOptions();
+    const q = this.query.toLowerCase();
+    const filtered = [];
+    for (const opt of options) {
+      const text = (opt.textContent ?? "").toLowerCase();
+      const match = !q || text.includes(q);
+      opt.style.display = match ? "" : "none";
+      if (match) {
+        filtered.push(opt);
+      }
+    }
+    this._filteredOptions = filtered;
+    return filtered;
+  }
+  syncDisplayValue() {
+    if (!this.value) {
+      this.displayValue = "";
+      return;
+    }
+    const options = this.getOptions();
+    for (const opt of options) {
+      if (opt.value === this.value || opt.getAttribute("value") === this.value) {
+        this.displayValue = (opt.textContent ?? "").trim();
+        return;
+      }
+    }
+    this.displayValue = "";
+  }
+  selectOption(option) {
+    const newValue = option.getAttribute("value") ?? (option.textContent ?? "").trim();
+    const oldValue = this.value;
+    this.value = newValue;
+    this.displayValue = (option.textContent ?? "").trim();
+    this.query = "";
+    this.isOpen = false;
+    this.highlightedIndex = -1;
+    this.clearHighlight();
+    if (newValue !== oldValue) {
+      this.emit("mz-change");
+    }
+  }
+  handleControlClick() {
+    if (this.disabled) return;
+    this.inputEl?.focus();
+    if (!this.isOpen) {
+      this.openDropdown();
+    }
+  }
+  handleInput(e) {
+    const input = e.target;
+    this.query = input.value;
+    if (!this.isOpen) {
+      this.openDropdown();
+    }
+    this.highlightedIndex = -1;
+    this.clearHighlight();
+    this.filteredOptions;
+    this.emit("mz-input");
+  }
+  handleFocus() {
+    if (this.blurTimeout) {
+      clearTimeout(this.blurTimeout);
+      this.blurTimeout = null;
+    }
+    this.isFocused = true;
+    this.openDropdown();
+  }
+  handleBlur() {
+    this.blurTimeout = setTimeout(() => {
+      this.isFocused = false;
+      this.isOpen = false;
+      this.query = "";
+      this.highlightedIndex = -1;
+      this.clearHighlight();
+      for (const opt of this.getOptions()) {
+        opt.style.display = "";
+      }
+    }, 150);
+  }
+  handleKeydown(e) {
+    if (this.disabled) return;
+    const filtered = this._filteredOptions.length > 0 ? this._filteredOptions : this.filteredOptions;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!this.isOpen) {
+          this.openDropdown();
+        }
+        if (filtered.length > 0) {
+          this.highlightedIndex = this.highlightedIndex < filtered.length - 1 ? this.highlightedIndex + 1 : 0;
+          this.updateHighlight();
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (!this.isOpen) {
+          this.openDropdown();
+        }
+        if (filtered.length > 0) {
+          this.highlightedIndex = this.highlightedIndex > 0 ? this.highlightedIndex - 1 : filtered.length - 1;
+          this.updateHighlight();
+        }
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (this.isOpen && this.highlightedIndex >= 0 && this.highlightedIndex < filtered.length) {
+          this.selectOption(filtered[this.highlightedIndex]);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        this.isOpen = false;
+        this.query = "";
+        this.highlightedIndex = -1;
+        this.clearHighlight();
+        for (const opt of this.getOptions()) {
+          opt.style.display = "";
+        }
+        break;
+      case "Tab":
+        this.isOpen = false;
+        this.query = "";
+        this.highlightedIndex = -1;
+        this.clearHighlight();
+        for (const opt of this.getOptions()) {
+          opt.style.display = "";
+        }
+        break;
+    }
+  }
+  handleClear(e) {
+    e.stopPropagation();
+    this.value = "";
+    this.displayValue = "";
+    this.query = "";
+    this.highlightedIndex = -1;
+    this.clearHighlight();
+    this.emit("mz-clear");
+    this.emit("mz-change");
+    this.inputEl?.focus();
+  }
+  handleSlotChange() {
+    this.syncDisplayValue();
+    if (this.isOpen) {
+      this.filteredOptions;
+    }
+  }
+  openDropdown() {
+    if (this.isOpen || this.disabled) return;
+    this.isOpen = true;
+    this.filteredOptions;
+  }
+  clearHighlight() {
+    for (const opt of this.getOptions()) {
+      opt.classList.remove("combobox-highlighted");
+      opt.current = false;
+    }
+  }
+  updateHighlight() {
+    this.clearHighlight();
+    const filtered = this._filteredOptions;
+    if (this.highlightedIndex >= 0 && this.highlightedIndex < filtered.length) {
+      const opt = filtered[this.highlightedIndex];
+      opt.classList.add("combobox-highlighted");
+      opt.current = true;
+      opt.scrollIntoView?.({ block: "nearest" });
+    }
+  }
+  render() {
+    const inputValue = this.isOpen || this.query !== "" ? this.query : this.displayValue;
+    const placeholderText = this.displayValue || this.placeholder || void 0;
+    const filtered = this.isOpen ? this.filteredOptions : [];
+    const noResults = this.isOpen && this.query !== "" && filtered.length === 0;
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      combobox: true,
+      "combobox--open": this.isOpen,
+      "combobox--disabled": this.disabled,
+      "combobox--focused": this.isFocused
+    })}
+      >
+        <div part="control" class="combobox__control" @click=${this.handleControlClick}>
+          <input
+            part="input"
+            class="combobox__input"
+            type="text"
+            role="combobox"
+            aria-expanded=${this.isOpen}
+            aria-haspopup="listbox"
+            aria-autocomplete="list"
+            .value=${inputValue}
+            placeholder=${placeholderText ?? nothing}
+            ?disabled=${this.disabled}
+            autocomplete="off"
+            @input=${this.handleInput}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+            @keydown=${this.handleKeydown}
+          />
+          ${this.clearable && this.value ? html`
+                <button
+                  part="clear"
+                  class="combobox__clear"
+                  type="button"
+                  tabindex="-1"
+                  aria-label="Clear"
+                  @click=${this.handleClear}
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                </button>
+              ` : nothing}
+          <div class="combobox__chevron" part="chevron">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+          </div>
+        </div>
+
+        ${this.isOpen ? html`
+              <div part="listbox" class="combobox__listbox" role="listbox">
+                <slot @slotchange=${this.handleSlotChange}></slot>
+                ${noResults ? html`<div class="combobox__empty" part="empty">No matches</div>` : nothing}
+              </div>
+            ` : html`<div style="display:none"><slot @slotchange=${this.handleSlotChange}></slot></div>`}
+      </div>
+    `;
+  }
+}
+MzCombobox.styles = styles;
+__decorateClass([
+  query(".combobox__input")
+], MzCombobox.prototype, "inputEl", 2);
+__decorateClass([
+  property()
+], MzCombobox.prototype, "name", 2);
+__decorateClass([
+  property()
+], MzCombobox.prototype, "value", 2);
+__decorateClass([
+  property()
+], MzCombobox.prototype, "placeholder", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzCombobox.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzCombobox.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzCombobox.prototype, "clearable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzCombobox.prototype, "required", 2);
+__decorateClass([
+  state()
+], MzCombobox.prototype, "isOpen", 2);
+__decorateClass([
+  state()
+], MzCombobox.prototype, "query", 2);
+__decorateClass([
+  state()
+], MzCombobox.prototype, "highlightedIndex", 2);
+__decorateClass([
+  state()
+], MzCombobox.prototype, "displayValue", 2);
+__decorateClass([
+  state()
+], MzCombobox.prototype, "isFocused", 2);
+export {
+  MzCombobox
+};
+//# sourceMappingURL=combobox.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/combobox/combobox.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport type { MzOption } from '../option/option.component.js';\nimport styles from './combobox.styles.js';\n\n/**\n * @summary A searchable combobox with filtering, keyboard navigation, and dropdown options list.\n *\n * @tag mz-combobox\n *\n * @slot - The options (mz-option elements).\n *\n * @event mz-change - Emitted when the selected value changes.\n * @event mz-input - Emitted on each keystroke in the search input.\n * @event mz-clear - Emitted when the value is cleared.\n *\n * @csspart base - The outer wrapper.\n * @csspart control - The control wrapper containing the input, clear, and chevron.\n * @csspart input - The text input element.\n * @csspart clear - The clear button.\n * @csspart chevron - The dropdown chevron indicator.\n * @csspart listbox - The dropdown options list.\n * @csspart empty - The \"No matches\" message.\n */\nexport class MzCombobox extends ManzanoElement {\n  static styles = styles;\n\n  @query('.combobox__input') private inputEl!: HTMLInputElement;\n\n  /** The combobox's name for form participation. */\n  @property() name = '';\n\n  /** The currently selected value. */\n  @property() value = '';\n\n  /** Placeholder text for the input. */\n  @property() placeholder = '';\n\n  /** The combobox's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the combobox. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Shows a clear button when a value is selected. */\n  @property({ type: Boolean, reflect: true }) clearable = false;\n\n  /** Makes the combobox required. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Whether the dropdown is open. */\n  @state() private isOpen = false;\n\n  /** The current search query. */\n  @state() private query = '';\n\n  /** Index of the currently highlighted option in the filtered list. */\n  @state() private highlightedIndex = -1;\n\n  /** The display text shown in the input (the label of the selected option). */\n  @state() private displayValue = '';\n\n  /** Whether the input is focused. */\n  @state() private isFocused = false;\n\n  /** Cached list of filtered (visible) options. */\n  private _filteredOptions: MzOption[] = [];\n\n  private blurTimeout: ReturnType<typeof setTimeout> | null = null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('click', this.handleOptionClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleOptionClick);\n    if (this.blurTimeout) {\n      clearTimeout(this.blurTimeout);\n    }\n  }\n\n  willUpdate(changed: Map<string, unknown>): void {\n    if (changed.has('value')) {\n      this.syncDisplayValue();\n    }\n  }\n\n  /** Sets focus on the input. */\n  focus(options?: FocusOptions): void {\n    this.inputEl?.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  blur(): void {\n    this.inputEl?.blur();\n  }\n\n  private getOptions(): MzOption[] {\n    return [...this.querySelectorAll('mz-option')] as MzOption[];\n  }\n\n  private get filteredOptions(): MzOption[] {\n    const options = this.getOptions();\n    const q = this.query.toLowerCase();\n    const filtered: MzOption[] = [];\n\n    for (const opt of options) {\n      const text = (opt.textContent ?? '').toLowerCase();\n      const match = !q || text.includes(q);\n      (opt as HTMLElement).style.display = match ? '' : 'none';\n      if (match) {\n        filtered.push(opt);\n      }\n    }\n\n    this._filteredOptions = filtered;\n    return filtered;\n  }\n\n  private syncDisplayValue(): void {\n    if (!this.value) {\n      this.displayValue = '';\n      return;\n    }\n    const options = this.getOptions();\n    for (const opt of options) {\n      if (opt.value === this.value || opt.getAttribute('value') === this.value) {\n        this.displayValue = (opt.textContent ?? '').trim();\n        return;\n      }\n    }\n    // If no matching option found, clear display\n    this.displayValue = '';\n  }\n\n  private selectOption(option: MzOption): void {\n    const newValue = option.getAttribute('value') ?? (option.textContent ?? '').trim();\n    const oldValue = this.value;\n    this.value = newValue;\n    this.displayValue = (option.textContent ?? '').trim();\n    this.query = '';\n    this.isOpen = false;\n    this.highlightedIndex = -1;\n    this.clearHighlight();\n\n    if (newValue !== oldValue) {\n      this.emit('mz-change');\n    }\n  }\n\n  private handleOptionClick = (e: Event): void => {\n    const target = e.target as Element;\n    const option = target.closest('mz-option') as MzOption | null;\n    if (option && !option.disabled && this.contains(option)) {\n      this.selectOption(option);\n    }\n  };\n\n  private handleControlClick(): void {\n    if (this.disabled) return;\n    this.inputEl?.focus();\n    if (!this.isOpen) {\n      this.openDropdown();\n    }\n  }\n\n  private handleInput(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    this.query = input.value;\n    if (!this.isOpen) {\n      this.openDropdown();\n    }\n    this.highlightedIndex = -1;\n    this.clearHighlight();\n    // Re-filter\n    this.filteredOptions;\n    this.emit('mz-input');\n  }\n\n  private handleFocus(): void {\n    if (this.blurTimeout) {\n      clearTimeout(this.blurTimeout);\n      this.blurTimeout = null;\n    }\n    this.isFocused = true;\n    this.openDropdown();\n  }\n\n  private handleBlur(): void {\n    this.blurTimeout = setTimeout(() => {\n      this.isFocused = false;\n      this.isOpen = false;\n      this.query = '';\n      this.highlightedIndex = -1;\n      this.clearHighlight();\n      // Restore all option visibility\n      for (const opt of this.getOptions()) {\n        (opt as HTMLElement).style.display = '';\n      }\n    }, 150);\n  }\n\n  private handleKeydown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n\n    const filtered = this._filteredOptions.length > 0 ? this._filteredOptions : this.filteredOptions;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!this.isOpen) {\n          this.openDropdown();\n        }\n        if (filtered.length > 0) {\n          this.highlightedIndex = this.highlightedIndex < filtered.length - 1\n            ? this.highlightedIndex + 1\n            : 0;\n          this.updateHighlight();\n        }\n        break;\n\n      case 'ArrowUp':\n        e.preventDefault();\n        if (!this.isOpen) {\n          this.openDropdown();\n        }\n        if (filtered.length > 0) {\n          this.highlightedIndex = this.highlightedIndex > 0\n            ? this.highlightedIndex - 1\n            : filtered.length - 1;\n          this.updateHighlight();\n        }\n        break;\n\n      case 'Enter':\n        e.preventDefault();\n        if (this.isOpen && this.highlightedIndex >= 0 && this.highlightedIndex < filtered.length) {\n          this.selectOption(filtered[this.highlightedIndex]);\n        }\n        break;\n\n      case 'Escape':\n        e.preventDefault();\n        this.isOpen = false;\n        this.query = '';\n        this.highlightedIndex = -1;\n        this.clearHighlight();\n        // Restore all option visibility\n        for (const opt of this.getOptions()) {\n          (opt as HTMLElement).style.display = '';\n        }\n        break;\n\n      case 'Tab':\n        this.isOpen = false;\n        this.query = '';\n        this.highlightedIndex = -1;\n        this.clearHighlight();\n        for (const opt of this.getOptions()) {\n          (opt as HTMLElement).style.display = '';\n        }\n        break;\n    }\n  }\n\n  private handleClear(e: Event): void {\n    e.stopPropagation();\n    this.value = '';\n    this.displayValue = '';\n    this.query = '';\n    this.highlightedIndex = -1;\n    this.clearHighlight();\n    this.emit('mz-clear');\n    this.emit('mz-change');\n    this.inputEl?.focus();\n  }\n\n  private handleSlotChange(): void {\n    this.syncDisplayValue();\n    // Re-filter when slotted content changes\n    if (this.isOpen) {\n      this.filteredOptions;\n    }\n  }\n\n  private openDropdown(): void {\n    if (this.isOpen || this.disabled) return;\n    this.isOpen = true;\n    // Run filter to apply visibility\n    this.filteredOptions;\n  }\n\n  private clearHighlight(): void {\n    for (const opt of this.getOptions()) {\n      opt.classList.remove('combobox-highlighted');\n      opt.current = false;\n    }\n  }\n\n  private updateHighlight(): void {\n    this.clearHighlight();\n    const filtered = this._filteredOptions;\n    if (this.highlightedIndex >= 0 && this.highlightedIndex < filtered.length) {\n      const opt = filtered[this.highlightedIndex];\n      opt.classList.add('combobox-highlighted');\n      opt.current = true;\n      // Scroll into view\n      opt.scrollIntoView?.({ block: 'nearest' });\n    }\n  }\n\n  render() {\n    const inputValue = this.isOpen || this.query !== '' ? this.query : this.displayValue;\n    const placeholderText = this.displayValue || this.placeholder || undefined;\n\n    // Compute filtered options for rendering\n    const filtered = this.isOpen ? this.filteredOptions : [];\n    const noResults = this.isOpen && this.query !== '' && filtered.length === 0;\n\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          combobox: true,\n          'combobox--open': this.isOpen,\n          'combobox--disabled': this.disabled,\n          'combobox--focused': this.isFocused\n        })}\n      >\n        <div part=\"control\" class=\"combobox__control\" @click=${this.handleControlClick}>\n          <input\n            part=\"input\"\n            class=\"combobox__input\"\n            type=\"text\"\n            role=\"combobox\"\n            aria-expanded=${this.isOpen}\n            aria-haspopup=\"listbox\"\n            aria-autocomplete=\"list\"\n            .value=${inputValue}\n            placeholder=${placeholderText ?? nothing}\n            ?disabled=${this.disabled}\n            autocomplete=\"off\"\n            @input=${this.handleInput}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n          />\n          ${this.clearable && this.value\n            ? html`\n                <button\n                  part=\"clear\"\n                  class=\"combobox__clear\"\n                  type=\"button\"\n                  tabindex=\"-1\"\n                  aria-label=\"Clear\"\n                  @click=${this.handleClear}\n                >\n                  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/></svg>\n                </button>\n              `\n            : nothing}\n          <div class=\"combobox__chevron\" part=\"chevron\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>\n          </div>\n        </div>\n\n        ${this.isOpen\n          ? html`\n              <div part=\"listbox\" class=\"combobox__listbox\" role=\"listbox\">\n                <slot @slotchange=${this.handleSlotChange}></slot>\n                ${noResults\n                  ? html`<div class=\"combobox__empty\" part=\"empty\">No matches</div>`\n                  : nothing}\n              </div>\n            `\n          : html`<div style=\"display:none\"><slot @slotchange=${this.handleSlotChange}></slot></div>`}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/combobox/combobox.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/combobox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAIrD,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/combobox/combobox.js

@@ -0,0 +1,6 @@
+import { MzCombobox } from "./combobox.component.js";
+MzCombobox.define("mz-combobox");
+export {
+  MzCombobox
+};
+//# sourceMappingURL=combobox.js.map

package/dist/components/combobox/combobox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/combobox/combobox.ts"],
+  "sourcesContent": ["import { MzCombobox } from './combobox.component.js';\n\nMzCombobox.define('mz-combobox');\n\nexport { MzCombobox };\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-combobox': MzCombobox;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,WAAW,OAAO,aAAa;",
+  "names": []
+}

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

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

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

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

package/dist/components/combobox/combobox.styles.js

@@ -0,0 +1,158 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var combobox_styles_default = [
+  componentStyles,
+  css`
+    @layer base, sizes, states;
+
+    @layer base {
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      .combobox {
+        position: relative;
+        font-family: var(--mz-font-sans);
+      }
+
+      .combobox__control {
+        display: flex;
+        align-items: center;
+        border: var(--mz-border-width-sm) solid var(--mz-input-border-color);
+        border-radius: var(--_radius, var(--mz-input-border-radius));
+        background: var(--mz-input-bg, var(--mz-color-surface));
+        cursor: text;
+        transition:
+          border-color var(--mz-transition-fast),
+          box-shadow var(--mz-transition-fast);
+      }
+
+      .combobox__control:hover {
+        border-color: var(--mz-color-border-hover);
+      }
+
+      .combobox--focused .combobox__control,
+      .combobox--open .combobox__control {
+        border-color: var(--mz-color-primary);
+        outline: var(--mz-focus-ring);
+        outline-offset: var(--mz-focus-ring-offset);
+      }
+
+      .combobox--disabled .combobox__control {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .combobox__input {
+        flex: 1;
+        min-width: 0;
+        border: none;
+        background: transparent;
+        font-family: inherit;
+        font-size: var(--_font-size);
+        line-height: var(--mz-line-height-normal);
+        color: var(--mz-color-text);
+        height: var(--_height);
+        padding: 0 var(--_padding-inline);
+        outline: none;
+      }
+
+      .combobox__input::placeholder {
+        color: var(--mz-color-text-disabled);
+      }
+
+      .combobox__input:disabled {
+        cursor: not-allowed;
+      }
+
+      .combobox__clear {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        background: none;
+        color: var(--mz-color-text-secondary);
+        cursor: pointer;
+        padding: var(--mz-space-xs);
+        transition: color var(--mz-transition-fast);
+      }
+
+      .combobox__clear:hover {
+        color: var(--mz-color-text);
+      }
+
+      .combobox__chevron {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        padding: 0 var(--mz-space-sm);
+        color: var(--mz-color-text-secondary);
+        transition: transform var(--mz-transition-fast);
+      }
+
+      .combobox--open .combobox__chevron {
+        transform: rotate(180deg);
+      }
+
+      .combobox__listbox {
+        position: absolute;
+        top: calc(100% + var(--mz-space-2xs, 4px));
+        left: 0;
+        right: 0;
+        max-height: 15rem;
+        overflow-y: auto;
+        background: var(--mz-color-surface);
+        border: var(--mz-border-width-sm) solid var(--mz-color-border);
+        border-radius: var(--mz-radius-md);
+        box-shadow: var(--mz-shadow-lg);
+        z-index: 1000;
+        padding: var(--mz-space-2xs);
+      }
+
+      .combobox__empty {
+        padding: var(--mz-space-md);
+        text-align: center;
+        color: var(--mz-color-text-secondary);
+        font-size: var(--_font-size);
+      }
+
+      /* Highlighted option */
+      ::slotted(.combobox-highlighted) {
+        background: color-mix(in srgb, var(--mz-color-primary) 10%, var(--mz-color-surface)) !important;
+      }
+    }
+
+    @layer sizes {
+      :host([size='small']) {
+        --_height: var(--mz-input-height-sm);
+        --_font-size: var(--mz-input-font-size-sm);
+        --_padding-inline: var(--mz-space-sm);
+      }
+
+      :host([size='medium']),
+      :host(:not([size])) {
+        --_height: var(--mz-input-height-md);
+        --_font-size: var(--mz-input-font-size-md);
+        --_padding-inline: var(--mz-space-md);
+      }
+
+      :host([size='large']) {
+        --_height: var(--mz-input-height-lg);
+        --_font-size: var(--mz-input-font-size-lg);
+        --_padding-inline: var(--mz-space-md);
+      }
+    }
+
+    @layer states {
+      :host([disabled]) .combobox__control {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  `
+];
+export {
+  combobox_styles_default as default
+};
+//# sourceMappingURL=combobox.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/combobox/combobox.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    @layer base, sizes, states;\n\n    @layer base {\n      :host {\n        display: block;\n        position: relative;\n      }\n\n      .combobox {\n        position: relative;\n        font-family: var(--mz-font-sans);\n      }\n\n      .combobox__control {\n        display: flex;\n        align-items: center;\n        border: var(--mz-border-width-sm) solid var(--mz-input-border-color);\n        border-radius: var(--_radius, var(--mz-input-border-radius));\n        background: var(--mz-input-bg, var(--mz-color-surface));\n        cursor: text;\n        transition:\n          border-color var(--mz-transition-fast),\n          box-shadow var(--mz-transition-fast);\n      }\n\n      .combobox__control:hover {\n        border-color: var(--mz-color-border-hover);\n      }\n\n      .combobox--focused .combobox__control,\n      .combobox--open .combobox__control {\n        border-color: var(--mz-color-primary);\n        outline: var(--mz-focus-ring);\n        outline-offset: var(--mz-focus-ring-offset);\n      }\n\n      .combobox--disabled .combobox__control {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n\n      .combobox__input {\n        flex: 1;\n        min-width: 0;\n        border: none;\n        background: transparent;\n        font-family: inherit;\n        font-size: var(--_font-size);\n        line-height: var(--mz-line-height-normal);\n        color: var(--mz-color-text);\n        height: var(--_height);\n        padding: 0 var(--_padding-inline);\n        outline: none;\n      }\n\n      .combobox__input::placeholder {\n        color: var(--mz-color-text-disabled);\n      }\n\n      .combobox__input:disabled {\n        cursor: not-allowed;\n      }\n\n      .combobox__clear {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        background: none;\n        color: var(--mz-color-text-secondary);\n        cursor: pointer;\n        padding: var(--mz-space-xs);\n        transition: color var(--mz-transition-fast);\n      }\n\n      .combobox__clear:hover {\n        color: var(--mz-color-text);\n      }\n\n      .combobox__chevron {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n        padding: 0 var(--mz-space-sm);\n        color: var(--mz-color-text-secondary);\n        transition: transform var(--mz-transition-fast);\n      }\n\n      .combobox--open .combobox__chevron {\n        transform: rotate(180deg);\n      }\n\n      .combobox__listbox {\n        position: absolute;\n        top: calc(100% + var(--mz-space-2xs, 4px));\n        left: 0;\n        right: 0;\n        max-height: 15rem;\n        overflow-y: auto;\n        background: var(--mz-color-surface);\n        border: var(--mz-border-width-sm) solid var(--mz-color-border);\n        border-radius: var(--mz-radius-md);\n        box-shadow: var(--mz-shadow-lg);\n        z-index: 1000;\n        padding: var(--mz-space-2xs);\n      }\n\n      .combobox__empty {\n        padding: var(--mz-space-md);\n        text-align: center;\n        color: var(--mz-color-text-secondary);\n        font-size: var(--_font-size);\n      }\n\n      /* Highlighted option */\n      ::slotted(.combobox-highlighted) {\n        background: color-mix(in srgb, var(--mz-color-primary) 10%, var(--mz-color-surface)) !important;\n      }\n    }\n\n    @layer sizes {\n      :host([size='small']) {\n        --_height: var(--mz-input-height-sm);\n        --_font-size: var(--mz-input-font-size-sm);\n        --_padding-inline: var(--mz-space-sm);\n      }\n\n      :host([size='medium']),\n      :host(:not([size])) {\n        --_height: var(--mz-input-height-md);\n        --_font-size: var(--mz-input-font-size-md);\n        --_padding-inline: var(--mz-space-md);\n      }\n\n      :host([size='large']) {\n        --_height: var(--mz-input-height-lg);\n        --_font-size: var(--mz-input-font-size-lg);\n        --_padding-inline: var(--mz-space-md);\n      }\n    }\n\n    @layer states {\n      :host([disabled]) .combobox__control {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,0BAAQ;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;AAqJF;",
+  "names": []
+}

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

@@ -0,0 +1,67 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A command palette (Cmd+K / Ctrl+K) with search input, keyboard navigation, and grouped commands.
+ *
+ * @tag mz-command
+ *
+ * @slot - Command items (e.g. `mz-menu-item` elements or any element).
+ *
+ * @event mz-command-select - Emitted when a command is selected. Detail: `{ value: string }`.
+ * @event mz-command-open - Emitted when the palette opens.
+ * @event mz-command-close - Emitted when the palette closes.
+ *
+ * @csspart dialog - The native `<dialog>` element.
+ * @csspart base - The command palette container.
+ * @csspart search - The search area.
+ * @csspart input - The search input.
+ * @csspart list - The command list.
+ * @csspart empty - The empty-state message.
+ */
+export declare class MzCommand extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    private dialogEl;
+    /** Whether the command palette is visible. */
+    open: boolean;
+    /** Search input placeholder. */
+    placeholder: string;
+    /** Text shown when no results match. */
+    emptyText: string;
+    private query;
+    private highlightedIndex;
+    /** Guard to prevent re-entrant show/hide calls from updated(). */
+    private _isTransitioning;
+    /** Cached list of all slotted items. */
+    private _allItems;
+    updated(changed: Map<string, unknown>): Promise<void>;
+    /** Programmatically open the command palette. */
+    show(): void;
+    /** Programmatically close the command palette. */
+    hide(): void;
+    private _showDialog;
+    private _hideDialog;
+    /** Get all slotted items from the default slot. */
+    private getItems;
+    /** Return only items that match the current query. */
+    private get visibleItems();
+    /**
+     * Show/hide slotted items based on the query string and trigger a re-render.
+     * Use this from event handlers (not from updated()).
+     */
+    private filterItems;
+    /**
+     * Show/hide slotted items without triggering requestUpdate().
+     * Safe to call from updated() without causing the "update scheduled during update" warning.
+     */
+    private _applyFilter;
+    /** Update the highlighted class on items. */
+    private updateHighlight;
+    private handleSlotChange;
+    private handleInput;
+    private handleKeydown;
+    private selectItem;
+    private handleDialogClick;
+    private handleDialogClose;
+    private handleItemClick;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=command.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"command.component.d.ts","sourceRoot":"","sources":["../../../src/components/command/command.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,SAAU,SAAQ,cAAc;IAC3C,MAAM,CAAC,MAAM,4BAAU;IAEN,OAAO,CAAC,QAAQ,CAAqB;IAEtD,8CAA8C;IACF,IAAI,UAAS;IAEzD,gCAAgC;IACpB,WAAW,SAAuB;IAE9C,wCAAwC;IACD,SAAS,SAAsB;IAE7D,OAAO,CAAC,KAAK,CAAM;IACnB,OAAO,CAAC,gBAAgB,CAAK;IAEtC,kEAAkE;IAClE,OAAO,CAAC,gBAAgB,CAAS;IAEjC,wCAAwC;IACxC,OAAO,CAAC,SAAS,CAAqB;IAEhC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAU3D,iDAAiD;IACjD,IAAI,IAAI,IAAI;IAIZ,kDAAkD;IAClD,IAAI,IAAI,IAAI;YAQE,WAAW;YAeX,WAAW;IAOzB,mDAAmD;IACnD,OAAO,CAAC,QAAQ;IAIhB,sDAAsD;IACtD,OAAO,KAAK,YAAY,GAQvB;IAED;;;OAGG;IACH,OAAO,CAAC,WAAW;IAKnB;;;OAGG;IACH,OAAO,CAAC,YAAY;IAapB,6CAA6C;IAC7C,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IA8BrB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,eAAe;IAUvB,MAAM;CAqCP"}