@manzanohq/components 0.1.1 → 0.1.4

package/dist/components/color-picker/color-picker.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/color-picker/color-picker.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './color-picker.styles.js';\n\n/**\n * @tag mz-color-picker\n * @summary A color picker with spectrum area, hue slider, optional alpha slider, preset swatches, and hex text input.\n *\n * @event mz-change - Emitted when the color value changes (on commit).\n * @event mz-input - Emitted on each drag/interaction as the color is being adjusted.\n *\n * @csspart base - The component wrapper.\n * @csspart trigger - The trigger button that opens the picker.\n * @csspart panel - The dropdown panel containing the picker controls.\n * @csspart spectrum - The saturation/brightness spectrum area.\n * @csspart hue-slider - The hue slider bar.\n * @csspart alpha-slider - The alpha/opacity slider bar (visible when alpha is enabled).\n * @csspart input - The hex color text input.\n * @csspart swatches - The container for preset color swatches.\n */\nexport class MzColorPicker extends ManzanoElement {\n  static styles = styles;\n\n  /** The current hex color value. */\n  @property({ type: String }) value = '#4260a8';\n\n  /** Whether to show the alpha (opacity) slider. */\n  @property({ type: Boolean, reflect: true }) alpha = false;\n\n  /** Whether the color picker is disabled. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Comma-separated list of preset swatch colors. */\n  @property({ type: String }) swatches = '';\n\n  /** Always show the picker panel (no trigger/dropdown). */\n  @property({ type: Boolean, reflect: true }) inline = false;\n\n  /** Size variant for the trigger button. */\n  @property({ type: String, reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Form name for the hidden input. */\n  @property({ type: String }) name = '';\n\n  @state() private isOpen = false;\n  @state() private hue = 0;\n  @state() private saturation = 100;\n  @state() private brightness = 100;\n  @state() private alphaValue = 1;\n  @state() private inputValue = '';\n  @state() private isDraggingSpectrum = false;\n  @state() private isDraggingHue = false;\n  @state() private isDraggingAlpha = false;\n\n  private boundHandleOutsideClick = this.handleOutsideClick.bind(this);\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.syncFromValue();\n    document.addEventListener('click', this.boundHandleOutsideClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.boundHandleOutsideClick);\n  }\n\n  /** Parse the initial value into HSV when the component first renders. */\n  protected firstUpdated(): void {\n    this.syncFromValue();\n  }\n\n  /** Sync internal HSV state from the hex value property. */\n  private syncFromValue(): void {\n    const hsv = this.hexToHsv(this.value);\n    this.hue = hsv.h;\n    this.saturation = hsv.s;\n    this.brightness = hsv.v;\n    this.inputValue = this.value;\n  }\n\n  /** Watch the `value` property for external changes. */\n  willUpdate(changed: Map<string, unknown>): void {\n    if (changed.has('value') && !this.isDraggingSpectrum && !this.isDraggingHue && !this.isDraggingAlpha) {\n      this.syncFromValue();\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Color conversions\n  // ---------------------------------------------------------------------------\n\n  private hsvToRgb(h: number, s: number, v: number): [number, number, number] {\n    s /= 100;\n    v /= 100;\n    const c = v * s;\n    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n    const m = v - c;\n    let r = 0,\n      g = 0,\n      b = 0;\n\n    if (h < 60) {\n      r = c;\n      g = x;\n    } else if (h < 120) {\n      r = x;\n      g = c;\n    } else if (h < 180) {\n      g = c;\n      b = x;\n    } else if (h < 240) {\n      g = x;\n      b = c;\n    } else if (h < 300) {\n      r = x;\n      b = c;\n    } else {\n      r = c;\n      b = x;\n    }\n\n    return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];\n  }\n\n  private hsvToHex(h: number, s: number, v: number): string {\n    const rgb = this.hsvToRgb(h, s, v);\n    return (\n      '#' +\n      rgb\n        .map(c => c.toString(16).padStart(2, '0'))\n        .join('')\n    );\n  }\n\n  private hexToHsv(hex: string): { h: number; s: number; v: number } {\n    hex = hex.replace('#', '');\n    if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');\n    // Ensure we have a valid 6-char hex\n    if (hex.length < 6) hex = hex.padEnd(6, '0');\n\n    const r = parseInt(hex.slice(0, 2), 16) / 255;\n    const g = parseInt(hex.slice(2, 4), 16) / 255;\n    const b = parseInt(hex.slice(4, 6), 16) / 255;\n\n    const max = Math.max(r, g, b);\n    const min = Math.min(r, g, b);\n    const d = max - min;\n\n    let h = 0;\n    if (d !== 0) {\n      if (max === r) h = ((g - b) / d + 6) % 6;\n      else if (max === g) h = (b - r) / d + 2;\n      else h = (r - g) / d + 4;\n      h *= 60;\n    }\n\n    const s = max === 0 ? 0 : (d / max) * 100;\n    const v = max * 100;\n\n    return { h, s, v };\n  }\n\n  // ---------------------------------------------------------------------------\n  // Swatches\n  // ---------------------------------------------------------------------------\n\n  private get swatchList(): string[] {\n    return this.swatches\n      ? this.swatches\n          .split(',')\n          .map(s => s.trim())\n          .filter(Boolean)\n      : [];\n  }\n\n  // ---------------------------------------------------------------------------\n  // Pointer handlers \u2014 Spectrum\n  // ---------------------------------------------------------------------------\n\n  private handleSpectrumPointerDown(e: PointerEvent): void {\n    if (this.disabled) return;\n    this.isDraggingSpectrum = true;\n    const target = e.currentTarget as HTMLElement;\n    target.setPointerCapture(e.pointerId);\n    this.updateSpectrumFromPointer(e);\n\n    const handleMove = (ev: PointerEvent) => this.updateSpectrumFromPointer(ev);\n    const handleUp = () => {\n      this.isDraggingSpectrum = false;\n      this.emit('mz-change');\n      target.removeEventListener('pointermove', handleMove);\n      target.removeEventListener('pointerup', handleUp);\n    };\n    target.addEventListener('pointermove', handleMove);\n    target.addEventListener('pointerup', handleUp);\n  }\n\n  private updateSpectrumFromPointer(e: PointerEvent): void {\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));\n    this.saturation = Math.round(x * 100);\n    this.brightness = Math.round((1 - y) * 100);\n    this.updateValueFromHsv();\n    this.emit('mz-input');\n  }\n\n  // ---------------------------------------------------------------------------\n  // Pointer handlers \u2014 Hue\n  // ---------------------------------------------------------------------------\n\n  private handleHuePointerDown(e: PointerEvent): void {\n    if (this.disabled) return;\n    this.isDraggingHue = true;\n    const target = e.currentTarget as HTMLElement;\n    target.setPointerCapture(e.pointerId);\n    this.updateHueFromPointer(e);\n\n    const handleMove = (ev: PointerEvent) => this.updateHueFromPointer(ev);\n    const handleUp = () => {\n      this.isDraggingHue = false;\n      this.emit('mz-change');\n      target.removeEventListener('pointermove', handleMove);\n      target.removeEventListener('pointerup', handleUp);\n    };\n    target.addEventListener('pointermove', handleMove);\n    target.addEventListener('pointerup', handleUp);\n  }\n\n  private updateHueFromPointer(e: PointerEvent): void {\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    this.hue = Math.round(x * 360);\n    this.updateValueFromHsv();\n    this.emit('mz-input');\n  }\n\n  // ---------------------------------------------------------------------------\n  // Pointer handlers \u2014 Alpha\n  // ---------------------------------------------------------------------------\n\n  private handleAlphaPointerDown(e: PointerEvent): void {\n    if (this.disabled) return;\n    this.isDraggingAlpha = true;\n    const target = e.currentTarget as HTMLElement;\n    target.setPointerCapture(e.pointerId);\n    this.updateAlphaFromPointer(e);\n\n    const handleMove = (ev: PointerEvent) => this.updateAlphaFromPointer(ev);\n    const handleUp = () => {\n      this.isDraggingAlpha = false;\n      this.emit('mz-change');\n      target.removeEventListener('pointermove', handleMove);\n      target.removeEventListener('pointerup', handleUp);\n    };\n    target.addEventListener('pointermove', handleMove);\n    target.addEventListener('pointerup', handleUp);\n  }\n\n  private updateAlphaFromPointer(e: PointerEvent): void {\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    this.alphaValue = Math.round(x * 100) / 100;\n    this.emit('mz-input');\n  }\n\n  // ---------------------------------------------------------------------------\n  // Value sync\n  // ---------------------------------------------------------------------------\n\n  private updateValueFromHsv(): void {\n    this.value = this.hsvToHex(this.hue, this.saturation, this.brightness);\n    this.inputValue = this.value;\n  }\n\n  private setColorFromHex(hex: string): void {\n    const hsv = this.hexToHsv(hex);\n    this.hue = hsv.h;\n    this.saturation = hsv.s;\n    this.brightness = hsv.v;\n    this.value = hex;\n    this.inputValue = hex;\n    this.emit('mz-change');\n  }\n\n  // ---------------------------------------------------------------------------\n  // Text input\n  // ---------------------------------------------------------------------------\n\n  private handleTextInput(e: Event): void {\n    this.inputValue = (e.target as HTMLInputElement).value;\n  }\n\n  private handleTextChange(): void {\n    let hex = this.inputValue.trim();\n    if (!hex.startsWith('#')) hex = '#' + hex;\n\n    // Validate hex format (3 or 6 chars after #)\n    const hexBody = hex.slice(1);\n    if (/^[0-9a-fA-F]{3}$/.test(hexBody) || /^[0-9a-fA-F]{6}$/.test(hexBody)) {\n      // Normalize to 6-char\n      if (hexBody.length === 3) {\n        hex = '#' + hexBody.split('').map(c => c + c).join('');\n      }\n      this.setColorFromHex(hex.toLowerCase());\n    } else {\n      // Revert to current value\n      this.inputValue = this.value;\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Open / close\n  // ---------------------------------------------------------------------------\n\n  private toggleOpen(): void {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  }\n\n  private handleOutsideClick(e: MouseEvent): void {\n    if (!this.isOpen || this.inline) return;\n    const path = e.composedPath();\n    if (!path.includes(this)) {\n      this.isOpen = false;\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Render\n  // ---------------------------------------------------------------------------\n\n  render() {\n    const showPanel = this.isOpen || this.inline;\n\n    return html`\n      <div part=\"base\" class=\"color-picker\">\n        ${!this.inline\n          ? html`\n              <button\n                part=\"trigger\"\n                class=\"color-picker__trigger\"\n                type=\"button\"\n                ?disabled=${this.disabled}\n                aria-label=\"Select color\"\n                aria-expanded=${this.isOpen}\n                @click=${this.toggleOpen}\n                style=\"--_swatch-color: ${this.value}\"\n              >\n                <div class=\"color-picker__trigger-swatch\"></div>\n              </button>\n            `\n          : nothing}\n        ${showPanel\n          ? html`\n              <div part=\"panel\" class=\"color-picker__panel\">\n                <!-- Spectrum: Saturation (x) x Brightness (y) -->\n                <div\n                  part=\"spectrum\"\n                  class=\"color-picker__spectrum\"\n                  style=\"background-color: hsl(${this.hue}, 100%, 50%)\"\n                  @pointerdown=${this.handleSpectrumPointerDown}\n                >\n                  <div class=\"color-picker__spectrum-white\"></div>\n                  <div class=\"color-picker__spectrum-black\"></div>\n                  <div\n                    class=\"color-picker__spectrum-handle\"\n                    style=\"left: ${this.saturation}%; top: ${100 - this.brightness}%\"\n                  ></div>\n                </div>\n\n                <!-- Sliders -->\n                <div class=\"color-picker__sliders\">\n                  <div\n                    part=\"hue-slider\"\n                    class=\"color-picker__hue\"\n                    @pointerdown=${this.handleHuePointerDown}\n                  >\n                    <div\n                      class=\"color-picker__hue-handle\"\n                      style=\"left: ${(this.hue / 360) * 100}%\"\n                    ></div>\n                  </div>\n\n                  ${this.alpha\n                    ? html`\n                        <div\n                          part=\"alpha-slider\"\n                          class=\"color-picker__alpha\"\n                          style=\"--_alpha-gradient: linear-gradient(to right, transparent, ${this.hsvToHex(this.hue, this.saturation, this.brightness)})\"\n                          @pointerdown=${this.handleAlphaPointerDown}\n                        >\n                          <div\n                            class=\"color-picker__alpha-handle\"\n                            style=\"left: ${this.alphaValue * 100}%\"\n                          ></div>\n                        </div>\n                      `\n                    : nothing}\n                </div>\n\n                <!-- Text input -->\n                <div class=\"color-picker__input-row\">\n                  <input\n                    part=\"input\"\n                    class=\"color-picker__input\"\n                    type=\"text\"\n                    .value=${this.inputValue}\n                    @input=${this.handleTextInput}\n                    @change=${this.handleTextChange}\n                    ?disabled=${this.disabled}\n                  />\n                </div>\n\n                <!-- Swatches -->\n                ${this.swatchList.length > 0\n                  ? html`\n                      <div part=\"swatches\" class=\"color-picker__swatches\">\n                        ${this.swatchList.map(\n                          color => html`\n                            <button\n                              class=\"color-picker__swatch-btn\"\n                              type=\"button\"\n                              style=\"--_swatch-color: ${color}\"\n                              aria-label=${color}\n                              @click=${() => this.setColorFromHex(color)}\n                            ></button>\n                          `\n                        )}\n                      </div>\n                    `\n                  : nothing}\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/color-picker/color-picker.d.ts

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

package/dist/components/color-picker/color-picker.d.ts.map

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

package/dist/components/color-picker/color-picker.js

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

package/dist/components/color-picker/color-picker.js.map

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

package/dist/components/color-picker/color-picker.styles.d.ts

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

package/dist/components/color-picker/color-picker.styles.d.ts.map

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

package/dist/components/color-picker/color-picker.styles.js

@@ -0,0 +1,228 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var color_picker_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: inline-block;
+      font-family: var(--mz-font-sans);
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .color-picker {
+      position: relative;
+    }
+
+    /* Trigger */
+    .color-picker__trigger {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 2.25rem;
+      height: 2.25rem;
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-md, 0.5rem);
+      background: var(--mz-color-surface, #fff);
+      cursor: pointer;
+      padding: 0.25rem;
+      transition: border-color 0.15s;
+    }
+
+    .color-picker__trigger:hover {
+      border-color: var(--mz-color-text-disabled);
+    }
+
+    .color-picker__trigger:focus-visible {
+      outline: 2px solid var(--mz-color-primary);
+      outline-offset: 2px;
+    }
+
+    :host([size='small']) .color-picker__trigger {
+      width: 1.75rem;
+      height: 1.75rem;
+    }
+
+    :host([size='large']) .color-picker__trigger {
+      width: 2.75rem;
+      height: 2.75rem;
+    }
+
+    .color-picker__trigger-swatch {
+      width: 100%;
+      height: 100%;
+      border-radius: calc(var(--mz-radius-md, 0.5rem) - 4px);
+      background: var(--_swatch-color);
+    }
+
+    /* Panel */
+    .color-picker__panel {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      z-index: 1000;
+      background: var(--mz-color-surface, #fff);
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-lg, 0.75rem);
+      box-shadow: var(--mz-shadow-lg, 0 10px 30px rgb(28 25 21 / 0.12));
+      padding: 0.75rem;
+      width: 14rem;
+    }
+
+    :host([inline]) .color-picker__panel {
+      position: static;
+      box-shadow: none;
+      border: 1px solid var(--mz-color-border);
+    }
+
+    /* Spectrum */
+    .color-picker__spectrum {
+      position: relative;
+      width: 100%;
+      height: 9rem;
+      border-radius: var(--mz-radius-md, 0.5rem);
+      cursor: crosshair;
+      overflow: hidden;
+      touch-action: none;
+      user-select: none;
+    }
+
+    .color-picker__spectrum-white {
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(to right, #fff, transparent);
+    }
+
+    .color-picker__spectrum-black {
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(to top, #000, transparent);
+    }
+
+    .color-picker__spectrum-handle {
+      position: absolute;
+      width: 12px;
+      height: 12px;
+      border: 2px solid #fff;
+      border-radius: 50%;
+      box-shadow: 0 0 2px rgb(0 0 0 / 0.4);
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+
+    /* Sliders */
+    .color-picker__sliders {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin-top: 0.5rem;
+    }
+
+    .color-picker__hue,
+    .color-picker__alpha {
+      position: relative;
+      height: 12px;
+      border-radius: 6px;
+      cursor: pointer;
+      touch-action: none;
+      user-select: none;
+    }
+
+    .color-picker__hue {
+      background: linear-gradient(
+        to right,
+        hsl(0, 100%, 50%),
+        hsl(60, 100%, 50%),
+        hsl(120, 100%, 50%),
+        hsl(180, 100%, 50%),
+        hsl(240, 100%, 50%),
+        hsl(300, 100%, 50%),
+        hsl(360, 100%, 50%)
+      );
+    }
+
+    .color-picker__alpha {
+      background-image: var(--_alpha-gradient),
+        repeating-conic-gradient(
+            var(--mz-color-border) 0% 25%,
+            transparent 0% 50%
+          )
+          0 0 / 8px 8px;
+    }
+
+    .color-picker__hue-handle,
+    .color-picker__alpha-handle {
+      position: absolute;
+      top: 50%;
+      width: 14px;
+      height: 14px;
+      border: 2px solid #fff;
+      border-radius: 50%;
+      box-shadow: 0 0 3px rgb(0 0 0 / 0.3);
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+
+    /* Input */
+    .color-picker__input-row {
+      margin-top: 0.5rem;
+    }
+
+    .color-picker__input {
+      width: 100%;
+      box-sizing: border-box;
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-md, 0.5rem);
+      padding: 0.25rem 0.5rem;
+      font-family: var(--mz-font-mono, monospace);
+      font-size: var(--mz-font-size-sm, 0.875rem);
+      color: var(--mz-color-text, #1a1a1a);
+      background: var(--mz-color-surface, #fff);
+      outline: none;
+      transition: border-color 0.15s;
+    }
+
+    .color-picker__input:focus {
+      border-color: var(--mz-color-primary);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mz-color-primary) 15%, transparent);
+    }
+
+    /* Swatches */
+    .color-picker__swatches {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.25rem;
+      margin-top: 0.5rem;
+      padding-top: 0.5rem;
+      border-top: 1px solid var(--mz-color-border);
+    }
+
+    .color-picker__swatch-btn {
+      width: 1.25rem;
+      height: 1.25rem;
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-sm, 0.25rem);
+      background: var(--_swatch-color);
+      cursor: pointer;
+      padding: 0;
+      transition: transform 0.1s, box-shadow 0.1s;
+    }
+
+    .color-picker__swatch-btn:hover {
+      transform: scale(1.15);
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mz-color-primary) 25%, transparent);
+    }
+
+    .color-picker__swatch-btn:focus-visible {
+      outline: 2px solid var(--mz-color-primary);
+      outline-offset: 1px;
+    }
+  `
+];
+export {
+  color_picker_styles_default as default
+};
+//# sourceMappingURL=color-picker.styles.js.map

package/dist/components/color-picker/color-picker.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/color-picker/color-picker.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: inline-block;\n      font-family: var(--mz-font-sans);\n    }\n\n    :host([disabled]) {\n      opacity: 0.5;\n      pointer-events: none;\n    }\n\n    .color-picker {\n      position: relative;\n    }\n\n    /* Trigger */\n    .color-picker__trigger {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 2.25rem;\n      height: 2.25rem;\n      border: 1px solid var(--mz-color-border);\n      border-radius: var(--mz-radius-md, 0.5rem);\n      background: var(--mz-color-surface, #fff);\n      cursor: pointer;\n      padding: 0.25rem;\n      transition: border-color 0.15s;\n    }\n\n    .color-picker__trigger:hover {\n      border-color: var(--mz-color-text-disabled);\n    }\n\n    .color-picker__trigger:focus-visible {\n      outline: 2px solid var(--mz-color-primary);\n      outline-offset: 2px;\n    }\n\n    :host([size='small']) .color-picker__trigger {\n      width: 1.75rem;\n      height: 1.75rem;\n    }\n\n    :host([size='large']) .color-picker__trigger {\n      width: 2.75rem;\n      height: 2.75rem;\n    }\n\n    .color-picker__trigger-swatch {\n      width: 100%;\n      height: 100%;\n      border-radius: calc(var(--mz-radius-md, 0.5rem) - 4px);\n      background: var(--_swatch-color);\n    }\n\n    /* Panel */\n    .color-picker__panel {\n      position: absolute;\n      top: calc(100% + 4px);\n      left: 0;\n      z-index: 1000;\n      background: var(--mz-color-surface, #fff);\n      border: 1px solid var(--mz-color-border);\n      border-radius: var(--mz-radius-lg, 0.75rem);\n      box-shadow: var(--mz-shadow-lg, 0 10px 30px rgb(28 25 21 / 0.12));\n      padding: 0.75rem;\n      width: 14rem;\n    }\n\n    :host([inline]) .color-picker__panel {\n      position: static;\n      box-shadow: none;\n      border: 1px solid var(--mz-color-border);\n    }\n\n    /* Spectrum */\n    .color-picker__spectrum {\n      position: relative;\n      width: 100%;\n      height: 9rem;\n      border-radius: var(--mz-radius-md, 0.5rem);\n      cursor: crosshair;\n      overflow: hidden;\n      touch-action: none;\n      user-select: none;\n    }\n\n    .color-picker__spectrum-white {\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(to right, #fff, transparent);\n    }\n\n    .color-picker__spectrum-black {\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(to top, #000, transparent);\n    }\n\n    .color-picker__spectrum-handle {\n      position: absolute;\n      width: 12px;\n      height: 12px;\n      border: 2px solid #fff;\n      border-radius: 50%;\n      box-shadow: 0 0 2px rgb(0 0 0 / 0.4);\n      transform: translate(-50%, -50%);\n      pointer-events: none;\n    }\n\n    /* Sliders */\n    .color-picker__sliders {\n      display: flex;\n      flex-direction: column;\n      gap: 0.5rem;\n      margin-top: 0.5rem;\n    }\n\n    .color-picker__hue,\n    .color-picker__alpha {\n      position: relative;\n      height: 12px;\n      border-radius: 6px;\n      cursor: pointer;\n      touch-action: none;\n      user-select: none;\n    }\n\n    .color-picker__hue {\n      background: linear-gradient(\n        to right,\n        hsl(0, 100%, 50%),\n        hsl(60, 100%, 50%),\n        hsl(120, 100%, 50%),\n        hsl(180, 100%, 50%),\n        hsl(240, 100%, 50%),\n        hsl(300, 100%, 50%),\n        hsl(360, 100%, 50%)\n      );\n    }\n\n    .color-picker__alpha {\n      background-image: var(--_alpha-gradient),\n        repeating-conic-gradient(\n            var(--mz-color-border) 0% 25%,\n            transparent 0% 50%\n          )\n          0 0 / 8px 8px;\n    }\n\n    .color-picker__hue-handle,\n    .color-picker__alpha-handle {\n      position: absolute;\n      top: 50%;\n      width: 14px;\n      height: 14px;\n      border: 2px solid #fff;\n      border-radius: 50%;\n      box-shadow: 0 0 3px rgb(0 0 0 / 0.3);\n      transform: translate(-50%, -50%);\n      pointer-events: none;\n    }\n\n    /* Input */\n    .color-picker__input-row {\n      margin-top: 0.5rem;\n    }\n\n    .color-picker__input {\n      width: 100%;\n      box-sizing: border-box;\n      border: 1px solid var(--mz-color-border);\n      border-radius: var(--mz-radius-md, 0.5rem);\n      padding: 0.25rem 0.5rem;\n      font-family: var(--mz-font-mono, monospace);\n      font-size: var(--mz-font-size-sm, 0.875rem);\n      color: var(--mz-color-text, #1a1a1a);\n      background: var(--mz-color-surface, #fff);\n      outline: none;\n      transition: border-color 0.15s;\n    }\n\n    .color-picker__input:focus {\n      border-color: var(--mz-color-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mz-color-primary) 15%, transparent);\n    }\n\n    /* Swatches */\n    .color-picker__swatches {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 0.25rem;\n      margin-top: 0.5rem;\n      padding-top: 0.5rem;\n      border-top: 1px solid var(--mz-color-border);\n    }\n\n    .color-picker__swatch-btn {\n      width: 1.25rem;\n      height: 1.25rem;\n      border: 1px solid var(--mz-color-border);\n      border-radius: var(--mz-radius-sm, 0.25rem);\n      background: var(--_swatch-color);\n      cursor: pointer;\n      padding: 0;\n      transition: transform 0.1s, box-shadow 0.1s;\n    }\n\n    .color-picker__swatch-btn:hover {\n      transform: scale(1.15);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mz-color-primary) 25%, transparent);\n    }\n\n    .color-picker__swatch-btn:focus-visible {\n      outline: 2px solid var(--mz-color-primary);\n      outline-offset: 1px;\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,8BAAQ;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2NF;",
+  "names": []
+}

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

@@ -0,0 +1,75 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A searchable combobox with filtering, keyboard navigation, and dropdown options list.
+ *
+ * @tag mz-combobox
+ *
+ * @slot - The options (mz-option elements).
+ *
+ * @event mz-change - Emitted when the selected value changes.
+ * @event mz-input - Emitted on each keystroke in the search input.
+ * @event mz-clear - Emitted when the value is cleared.
+ *
+ * @csspart base - The outer wrapper.
+ * @csspart control - The control wrapper containing the input, clear, and chevron.
+ * @csspart input - The text input element.
+ * @csspart clear - The clear button.
+ * @csspart chevron - The dropdown chevron indicator.
+ * @csspart listbox - The dropdown options list.
+ * @csspart empty - The "No matches" message.
+ */
+export declare class MzCombobox extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    private inputEl;
+    /** The combobox's name for form participation. */
+    name: string;
+    /** The currently selected value. */
+    value: string;
+    /** Placeholder text for the input. */
+    placeholder: string;
+    /** The combobox's size. */
+    size: 'small' | 'medium' | 'large';
+    /** Disables the combobox. */
+    disabled: boolean;
+    /** Shows a clear button when a value is selected. */
+    clearable: boolean;
+    /** Makes the combobox required. */
+    required: boolean;
+    /** Whether the dropdown is open. */
+    private isOpen;
+    /** The current search query. */
+    private query;
+    /** Index of the currently highlighted option in the filtered list. */
+    private highlightedIndex;
+    /** The display text shown in the input (the label of the selected option). */
+    private displayValue;
+    /** Whether the input is focused. */
+    private isFocused;
+    /** Cached list of filtered (visible) options. */
+    private _filteredOptions;
+    private blurTimeout;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changed: Map<string, unknown>): void;
+    /** Sets focus on the input. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the input. */
+    blur(): void;
+    private getOptions;
+    private get filteredOptions();
+    private syncDisplayValue;
+    private selectOption;
+    private handleOptionClick;
+    private handleControlClick;
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    private handleKeydown;
+    private handleClear;
+    private handleSlotChange;
+    private openDropdown;
+    private clearHighlight;
+    private updateHighlight;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=combobox.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.component.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/combobox.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAInE;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,UAAW,SAAQ,cAAc;IAC5C,MAAM,CAAC,MAAM,4BAAU;IAEI,OAAO,CAAC,OAAO,CAAoB;IAE9D,kDAAkD;IACtC,IAAI,SAAM;IAEtB,oCAAoC;IACxB,KAAK,SAAM;IAEvB,sCAAsC;IAC1B,WAAW,SAAM;IAE7B,2BAA2B;IACE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE3E,6BAA6B;IACe,QAAQ,UAAS;IAE7D,qDAAqD;IACT,SAAS,UAAS;IAE9D,mCAAmC;IACS,QAAQ,UAAS;IAE7D,oCAAoC;IAC3B,OAAO,CAAC,MAAM,CAAS;IAEhC,gCAAgC;IACvB,OAAO,CAAC,KAAK,CAAM;IAE5B,sEAAsE;IAC7D,OAAO,CAAC,gBAAgB,CAAM;IAEvC,8EAA8E;IACrE,OAAO,CAAC,YAAY,CAAM;IAEnC,oCAAoC;IAC3B,OAAO,CAAC,SAAS,CAAS;IAEnC,iDAAiD;IACjD,OAAO,CAAC,gBAAgB,CAAkB;IAE1C,OAAO,CAAC,WAAW,CAA8C;IAEjE,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAQ5B,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAM/C,+BAA+B;IAC/B,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,oCAAoC;IACpC,IAAI,IAAI,IAAI;IAIZ,OAAO,CAAC,UAAU;IAIlB,OAAO,KAAK,eAAe,GAgB1B;IAED,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,iBAAiB,CAMvB;IAEF,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,aAAa;IA+DrB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,eAAe;IAYvB,MAAM;CAoEP"}