@manzanohq/components 0.1.1 → 0.1.4

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collapsible/collapsible.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './collapsible.styles.js';\n\nlet nextId = 0;\n\n/**\n * @summary A standalone collapsible/expandable section. Like an enhanced `<details>` element.\n *\n * @tag mz-collapsible\n *\n * @slot - The collapsible content.\n * @slot summary - Custom header content (overrides the `summary` property).\n * @slot icon - Custom expand/collapse icon.\n *\n * @event mz-show - Emitted when the section starts opening. Cancelable.\n * @event mz-hide - Emitted when the section starts closing. Cancelable.\n * @event mz-after-show - Emitted after the open animation completes.\n * @event mz-after-hide - Emitted after the close animation completes.\n *\n * @csspart header - The clickable header area.\n * @csspart icon - The expand/collapse icon wrapper.\n * @csspart content - The content area.\n */\nexport class MzCollapsible extends ManzanoElement {\n  static styles = styles;\n\n  private readonly componentId = `collapsible-${++nextId}`;\n\n  /** Whether the content is visible. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Whether toggling is disabled. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The header summary text. Use the `summary` slot for richer content. */\n  @property() summary = '';\n\n  private handleToggle(): void {\n    if (this.disabled) return;\n\n    if (this.open) {\n      const allowed = this.emit('mz-hide', { cancelable: true });\n      if (!allowed) return;\n      this.open = false;\n    } else {\n      const allowed = this.emit('mz-show', { cancelable: true });\n      if (!allowed) return;\n      this.open = true;\n    }\n  }\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleToggle();\n    }\n  }\n\n  private handleTransitionEnd(e: TransitionEvent): void {\n    if (e.propertyName !== 'grid-template-rows') return;\n\n    if (this.open) {\n      this.emit('mz-after-show');\n    } else {\n      this.emit('mz-after-hide');\n    }\n  }\n\n  render() {\n    const headerId = `${this.componentId}-header`;\n    const contentId = `${this.componentId}-content`;\n\n    return html`\n      <div\n        class=${classMap({\n          'collapsible': true,\n          'collapsible--open': this.open,\n          'collapsible--disabled': this.disabled\n        })}\n      >\n        <div\n          class=\"collapsible__header\"\n          id=${headerId}\n          role=\"button\"\n          tabindex=${this.disabled ? -1 : 0}\n          aria-expanded=${this.open}\n          aria-controls=${contentId}\n          aria-disabled=${this.disabled}\n          @click=${this.handleToggle}\n          @keydown=${this.handleKeyDown}\n          part=\"header\"\n        >\n          <slot name=\"summary\">\n            <span class=\"collapsible__summary\">${this.summary}</span>\n          </slot>\n          <span class=\"collapsible__icon\" part=\"icon\">\n            <slot name=\"icon\">\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <polyline points=\"6 9 12 15 18 9\"></polyline>\n              </svg>\n            </slot>\n          </span>\n        </div>\n        <div\n          class=\"collapsible__body\"\n          id=${contentId}\n          role=\"region\"\n          aria-labelledby=${headerId}\n          @transitionend=${this.handleTransitionEnd}\n        >\n          <div class=\"collapsible__content\" part=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAEnB,IAAI,SAAS;AAoBN,MAAM,sBAAsB,eAAe;AAAA,EAA3C;AAAA;AAGL,SAAiB,cAAc,eAAe,EAAE,MAAM;AAGV,gBAAO;AAGP,oBAAW;AAG3C,mBAAU;AAAA;AAAA,EAEd,eAAqB;AAC3B,QAAI,KAAK,SAAU;AAEnB,QAAI,KAAK,MAAM;AACb,YAAM,UAAU,KAAK,KAAK,WAAW,EAAE,YAAY,KAAK,CAAC;AACzD,UAAI,CAAC,QAAS;AACd,WAAK,OAAO;AAAA,IACd,OAAO;AACL,YAAM,UAAU,KAAK,KAAK,WAAW,EAAE,YAAY,KAAK,CAAC;AACzD,UAAI,CAAC,QAAS;AACd,WAAK,OAAO;AAAA,IACd;AAAA,EACF;AAAA,EAEQ,cAAc,GAAwB;AAC5C,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAe;AACjB,WAAK,aAAa;AAAA,IACpB;AAAA,EACF;AAAA,EAEQ,oBAAoB,GAA0B;AACpD,QAAI,EAAE,iBAAiB,qBAAsB;AAE7C,QAAI,KAAK,MAAM;AACb,WAAK,KAAK,eAAe;AAAA,IAC3B,OAAO;AACL,WAAK,KAAK,eAAe;AAAA,IAC3B;AAAA,EACF;AAAA,EAEA,SAAS;AACP,UAAM,WAAW,GAAG,KAAK,WAAW;AACpC,UAAM,YAAY,GAAG,KAAK,WAAW;AAErC,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,eAAe;AAAA,MACf,qBAAqB,KAAK;AAAA,MAC1B,yBAAyB,KAAK;AAAA,IAChC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,eAIK,QAAQ;AAAA;AAAA,qBAEF,KAAK,WAAW,KAAK,CAAC;AAAA,0BACjB,KAAK,IAAI;AAAA,0BACT,SAAS;AAAA,0BACT,KAAK,QAAQ;AAAA,mBACpB,KAAK,YAAY;AAAA,qBACf,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,iDAIU,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAsB9C,SAAS;AAAA;AAAA,4BAEI,QAAQ;AAAA,2BACT,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQjD;AACF;AAxGa,cACJ,SAAS;AAK4B;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAN/B,cAMiC;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAT/B,cASiC;AAGhC;AAAA,EAAX,SAAS;AAAA,GAZC,cAYC;",
+  "names": []
+}

package/dist/components/collapsible/collapsible.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/collapsible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,cAAc,4BAA4B,CAAC;AAI3C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/dist/components/collapsible/collapsible.js

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

package/dist/components/collapsible/collapsible.js.map

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

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

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

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

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

package/dist/components/collapsible/collapsible.styles.js

@@ -0,0 +1,89 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var collapsible_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: block;
+    }
+
+    .collapsible {
+      border: var(--mz-border-width-sm, 1px) solid var(--mz-color-border);
+      border-radius: var(--mz-radius-lg);
+      overflow: hidden;
+    }
+
+    .collapsible__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--mz-space-sm);
+      padding: var(--mz-space-sm) var(--mz-space-md);
+      cursor: pointer;
+      user-select: none;
+      font-family: var(--mz-font-sans);
+      font-size: var(--mz-font-size-sm);
+      font-weight: var(--mz-font-weight-medium, 500);
+      color: var(--mz-color-text);
+      background: transparent;
+      transition: background-color 150ms ease;
+      outline: none;
+    }
+
+    .collapsible__header:hover {
+      background: var(--mz-color-surface-raised);
+    }
+
+    .collapsible__header:focus-visible {
+      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mz-color-primary) 25%, transparent);
+    }
+
+    .collapsible--disabled .collapsible__header {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .collapsible--disabled .collapsible__header:hover {
+      background: transparent;
+    }
+
+    .collapsible__icon {
+      display: flex;
+      align-items: center;
+      color: var(--mz-color-text-disabled);
+      transition: transform 250ms ease;
+    }
+
+    .collapsible--open .collapsible__icon {
+      transform: rotate(180deg);
+    }
+
+    .collapsible__body {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows 250ms ease;
+    }
+
+    .collapsible--open .collapsible__body {
+      grid-template-rows: 1fr;
+    }
+
+    .collapsible__content {
+      overflow: hidden;
+      min-height: 0;
+      padding: 0 var(--mz-space-md);
+      font-family: var(--mz-font-sans);
+      font-size: var(--mz-font-size-sm);
+      color: var(--mz-color-text-secondary);
+      line-height: var(--mz-line-height-relaxed, 1.625);
+    }
+
+    .collapsible--open .collapsible__content {
+      padding-bottom: var(--mz-space-md);
+    }
+  `
+];
+export {
+  collapsible_styles_default as default
+};
+//# sourceMappingURL=collapsible.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collapsible/collapsible.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: block;\n    }\n\n    .collapsible {\n      border: var(--mz-border-width-sm, 1px) solid var(--mz-color-border);\n      border-radius: var(--mz-radius-lg);\n      overflow: hidden;\n    }\n\n    .collapsible__header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--mz-space-sm);\n      padding: var(--mz-space-sm) var(--mz-space-md);\n      cursor: pointer;\n      user-select: none;\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-sm);\n      font-weight: var(--mz-font-weight-medium, 500);\n      color: var(--mz-color-text);\n      background: transparent;\n      transition: background-color 150ms ease;\n      outline: none;\n    }\n\n    .collapsible__header:hover {\n      background: var(--mz-color-surface-raised);\n    }\n\n    .collapsible__header:focus-visible {\n      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mz-color-primary) 25%, transparent);\n    }\n\n    .collapsible--disabled .collapsible__header {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .collapsible--disabled .collapsible__header:hover {\n      background: transparent;\n    }\n\n    .collapsible__icon {\n      display: flex;\n      align-items: center;\n      color: var(--mz-color-text-disabled);\n      transition: transform 250ms ease;\n    }\n\n    .collapsible--open .collapsible__icon {\n      transform: rotate(180deg);\n    }\n\n    .collapsible__body {\n      display: grid;\n      grid-template-rows: 0fr;\n      transition: grid-template-rows 250ms ease;\n    }\n\n    .collapsible--open .collapsible__body {\n      grid-template-rows: 1fr;\n    }\n\n    .collapsible__content {\n      overflow: hidden;\n      min-height: 0;\n      padding: 0 var(--mz-space-md);\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-sm);\n      color: var(--mz-color-text-secondary);\n      line-height: var(--mz-line-height-relaxed, 1.625);\n    }\n\n    .collapsible--open .collapsible__content {\n      padding-bottom: var(--mz-space-md);\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,6BAAQ;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;AAgFF;",
+  "names": []
+}

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

@@ -0,0 +1,70 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @tag mz-color-picker
+ * @summary A color picker with spectrum area, hue slider, optional alpha slider, preset swatches, and hex text input.
+ *
+ * @event mz-change - Emitted when the color value changes (on commit).
+ * @event mz-input - Emitted on each drag/interaction as the color is being adjusted.
+ *
+ * @csspart base - The component wrapper.
+ * @csspart trigger - The trigger button that opens the picker.
+ * @csspart panel - The dropdown panel containing the picker controls.
+ * @csspart spectrum - The saturation/brightness spectrum area.
+ * @csspart hue-slider - The hue slider bar.
+ * @csspart alpha-slider - The alpha/opacity slider bar (visible when alpha is enabled).
+ * @csspart input - The hex color text input.
+ * @csspart swatches - The container for preset color swatches.
+ */
+export declare class MzColorPicker extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** The current hex color value. */
+    value: string;
+    /** Whether to show the alpha (opacity) slider. */
+    alpha: boolean;
+    /** Whether the color picker is disabled. */
+    disabled: boolean;
+    /** Comma-separated list of preset swatch colors. */
+    swatches: string;
+    /** Always show the picker panel (no trigger/dropdown). */
+    inline: boolean;
+    /** Size variant for the trigger button. */
+    size: 'small' | 'medium' | 'large';
+    /** Form name for the hidden input. */
+    name: string;
+    private isOpen;
+    private hue;
+    private saturation;
+    private brightness;
+    private alphaValue;
+    private inputValue;
+    private isDraggingSpectrum;
+    private isDraggingHue;
+    private isDraggingAlpha;
+    private boundHandleOutsideClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Parse the initial value into HSV when the component first renders. */
+    protected firstUpdated(): void;
+    /** Sync internal HSV state from the hex value property. */
+    private syncFromValue;
+    /** Watch the `value` property for external changes. */
+    willUpdate(changed: Map<string, unknown>): void;
+    private hsvToRgb;
+    private hsvToHex;
+    private hexToHsv;
+    private get swatchList();
+    private handleSpectrumPointerDown;
+    private updateSpectrumFromPointer;
+    private handleHuePointerDown;
+    private updateHueFromPointer;
+    private handleAlphaPointerDown;
+    private updateAlphaFromPointer;
+    private updateValueFromHsv;
+    private setColorFromHex;
+    private handleTextInput;
+    private handleTextChange;
+    private toggleOpen;
+    private handleOutsideClick;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=color-picker.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.component.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,aAAc,SAAQ,cAAc;IAC/C,MAAM,CAAC,MAAM,4BAAU;IAEvB,mCAAmC;IACP,KAAK,SAAa;IAE9C,kDAAkD;IACN,KAAK,UAAS;IAE1D,4CAA4C;IACA,QAAQ,UAAS;IAE7D,oDAAoD;IACxB,QAAQ,SAAM;IAE1C,0DAA0D;IACd,MAAM,UAAS;IAE3D,2CAA2C;IACA,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAEzF,sCAAsC;IACV,IAAI,SAAM;IAE7B,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,GAAG,CAAK;IAChB,OAAO,CAAC,UAAU,CAAO;IACzB,OAAO,CAAC,UAAU,CAAO;IACzB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,eAAe,CAAS;IAEzC,OAAO,CAAC,uBAAuB,CAAsC;IAErE,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAK5B,yEAAyE;IACzE,SAAS,CAAC,YAAY,IAAI,IAAI;IAI9B,2DAA2D;IAC3D,OAAO,CAAC,aAAa;IAQrB,uDAAuD;IACvD,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAU/C,OAAO,CAAC,QAAQ;IAiChB,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,QAAQ;IAgChB,OAAO,KAAK,UAAU,GAOrB;IAMD,OAAO,CAAC,yBAAyB;IAkBjC,OAAO,CAAC,yBAAyB;IAcjC,OAAO,CAAC,oBAAoB;IAkB5B,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,sBAAsB;IAkB9B,OAAO,CAAC,sBAAsB;IAW9B,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,gBAAgB;IAsBxB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,kBAAkB;IAY1B,MAAM;CA0GP"}

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

@@ -0,0 +1,406 @@
+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 } from "lit/decorators.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./color-picker.styles.js";
+class MzColorPicker extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.value = "#4260a8";
+    this.alpha = false;
+    this.disabled = false;
+    this.swatches = "";
+    this.inline = false;
+    this.size = "medium";
+    this.name = "";
+    this.isOpen = false;
+    this.hue = 0;
+    this.saturation = 100;
+    this.brightness = 100;
+    this.alphaValue = 1;
+    this.inputValue = "";
+    this.isDraggingSpectrum = false;
+    this.isDraggingHue = false;
+    this.isDraggingAlpha = false;
+    this.boundHandleOutsideClick = this.handleOutsideClick.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.syncFromValue();
+    document.addEventListener("click", this.boundHandleOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.boundHandleOutsideClick);
+  }
+  /** Parse the initial value into HSV when the component first renders. */
+  firstUpdated() {
+    this.syncFromValue();
+  }
+  /** Sync internal HSV state from the hex value property. */
+  syncFromValue() {
+    const hsv = this.hexToHsv(this.value);
+    this.hue = hsv.h;
+    this.saturation = hsv.s;
+    this.brightness = hsv.v;
+    this.inputValue = this.value;
+  }
+  /** Watch the `value` property for external changes. */
+  willUpdate(changed) {
+    if (changed.has("value") && !this.isDraggingSpectrum && !this.isDraggingHue && !this.isDraggingAlpha) {
+      this.syncFromValue();
+    }
+  }
+  // ---------------------------------------------------------------------------
+  // Color conversions
+  // ---------------------------------------------------------------------------
+  hsvToRgb(h, s, v) {
+    s /= 100;
+    v /= 100;
+    const c = v * s;
+    const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+    const m = v - c;
+    let r = 0, g = 0, b = 0;
+    if (h < 60) {
+      r = c;
+      g = x;
+    } else if (h < 120) {
+      r = x;
+      g = c;
+    } else if (h < 180) {
+      g = c;
+      b = x;
+    } else if (h < 240) {
+      g = x;
+      b = c;
+    } else if (h < 300) {
+      r = x;
+      b = c;
+    } else {
+      r = c;
+      b = x;
+    }
+    return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
+  }
+  hsvToHex(h, s, v) {
+    const rgb = this.hsvToRgb(h, s, v);
+    return "#" + rgb.map((c) => c.toString(16).padStart(2, "0")).join("");
+  }
+  hexToHsv(hex) {
+    hex = hex.replace("#", "");
+    if (hex.length === 3) hex = hex.split("").map((c) => c + c).join("");
+    if (hex.length < 6) hex = hex.padEnd(6, "0");
+    const r = parseInt(hex.slice(0, 2), 16) / 255;
+    const g = parseInt(hex.slice(2, 4), 16) / 255;
+    const b = parseInt(hex.slice(4, 6), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const d = max - min;
+    let h = 0;
+    if (d !== 0) {
+      if (max === r) h = ((g - b) / d + 6) % 6;
+      else if (max === g) h = (b - r) / d + 2;
+      else h = (r - g) / d + 4;
+      h *= 60;
+    }
+    const s = max === 0 ? 0 : d / max * 100;
+    const v = max * 100;
+    return { h, s, v };
+  }
+  // ---------------------------------------------------------------------------
+  // Swatches
+  // ---------------------------------------------------------------------------
+  get swatchList() {
+    return this.swatches ? this.swatches.split(",").map((s) => s.trim()).filter(Boolean) : [];
+  }
+  // ---------------------------------------------------------------------------
+  // Pointer handlers — Spectrum
+  // ---------------------------------------------------------------------------
+  handleSpectrumPointerDown(e) {
+    if (this.disabled) return;
+    this.isDraggingSpectrum = true;
+    const target = e.currentTarget;
+    target.setPointerCapture(e.pointerId);
+    this.updateSpectrumFromPointer(e);
+    const handleMove = (ev) => this.updateSpectrumFromPointer(ev);
+    const handleUp = () => {
+      this.isDraggingSpectrum = false;
+      this.emit("mz-change");
+      target.removeEventListener("pointermove", handleMove);
+      target.removeEventListener("pointerup", handleUp);
+    };
+    target.addEventListener("pointermove", handleMove);
+    target.addEventListener("pointerup", handleUp);
+  }
+  updateSpectrumFromPointer(e) {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+    this.saturation = Math.round(x * 100);
+    this.brightness = Math.round((1 - y) * 100);
+    this.updateValueFromHsv();
+    this.emit("mz-input");
+  }
+  // ---------------------------------------------------------------------------
+  // Pointer handlers — Hue
+  // ---------------------------------------------------------------------------
+  handleHuePointerDown(e) {
+    if (this.disabled) return;
+    this.isDraggingHue = true;
+    const target = e.currentTarget;
+    target.setPointerCapture(e.pointerId);
+    this.updateHueFromPointer(e);
+    const handleMove = (ev) => this.updateHueFromPointer(ev);
+    const handleUp = () => {
+      this.isDraggingHue = false;
+      this.emit("mz-change");
+      target.removeEventListener("pointermove", handleMove);
+      target.removeEventListener("pointerup", handleUp);
+    };
+    target.addEventListener("pointermove", handleMove);
+    target.addEventListener("pointerup", handleUp);
+  }
+  updateHueFromPointer(e) {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    this.hue = Math.round(x * 360);
+    this.updateValueFromHsv();
+    this.emit("mz-input");
+  }
+  // ---------------------------------------------------------------------------
+  // Pointer handlers — Alpha
+  // ---------------------------------------------------------------------------
+  handleAlphaPointerDown(e) {
+    if (this.disabled) return;
+    this.isDraggingAlpha = true;
+    const target = e.currentTarget;
+    target.setPointerCapture(e.pointerId);
+    this.updateAlphaFromPointer(e);
+    const handleMove = (ev) => this.updateAlphaFromPointer(ev);
+    const handleUp = () => {
+      this.isDraggingAlpha = false;
+      this.emit("mz-change");
+      target.removeEventListener("pointermove", handleMove);
+      target.removeEventListener("pointerup", handleUp);
+    };
+    target.addEventListener("pointermove", handleMove);
+    target.addEventListener("pointerup", handleUp);
+  }
+  updateAlphaFromPointer(e) {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    this.alphaValue = Math.round(x * 100) / 100;
+    this.emit("mz-input");
+  }
+  // ---------------------------------------------------------------------------
+  // Value sync
+  // ---------------------------------------------------------------------------
+  updateValueFromHsv() {
+    this.value = this.hsvToHex(this.hue, this.saturation, this.brightness);
+    this.inputValue = this.value;
+  }
+  setColorFromHex(hex) {
+    const hsv = this.hexToHsv(hex);
+    this.hue = hsv.h;
+    this.saturation = hsv.s;
+    this.brightness = hsv.v;
+    this.value = hex;
+    this.inputValue = hex;
+    this.emit("mz-change");
+  }
+  // ---------------------------------------------------------------------------
+  // Text input
+  // ---------------------------------------------------------------------------
+  handleTextInput(e) {
+    this.inputValue = e.target.value;
+  }
+  handleTextChange() {
+    let hex = this.inputValue.trim();
+    if (!hex.startsWith("#")) hex = "#" + hex;
+    const hexBody = hex.slice(1);
+    if (/^[0-9a-fA-F]{3}$/.test(hexBody) || /^[0-9a-fA-F]{6}$/.test(hexBody)) {
+      if (hexBody.length === 3) {
+        hex = "#" + hexBody.split("").map((c) => c + c).join("");
+      }
+      this.setColorFromHex(hex.toLowerCase());
+    } else {
+      this.inputValue = this.value;
+    }
+  }
+  // ---------------------------------------------------------------------------
+  // Open / close
+  // ---------------------------------------------------------------------------
+  toggleOpen() {
+    if (this.disabled) return;
+    this.isOpen = !this.isOpen;
+  }
+  handleOutsideClick(e) {
+    if (!this.isOpen || this.inline) return;
+    const path = e.composedPath();
+    if (!path.includes(this)) {
+      this.isOpen = false;
+    }
+  }
+  // ---------------------------------------------------------------------------
+  // Render
+  // ---------------------------------------------------------------------------
+  render() {
+    const showPanel = this.isOpen || this.inline;
+    return html`
+      <div part="base" class="color-picker">
+        ${!this.inline ? html`
+              <button
+                part="trigger"
+                class="color-picker__trigger"
+                type="button"
+                ?disabled=${this.disabled}
+                aria-label="Select color"
+                aria-expanded=${this.isOpen}
+                @click=${this.toggleOpen}
+                style="--_swatch-color: ${this.value}"
+              >
+                <div class="color-picker__trigger-swatch"></div>
+              </button>
+            ` : nothing}
+        ${showPanel ? html`
+              <div part="panel" class="color-picker__panel">
+                <!-- Spectrum: Saturation (x) x Brightness (y) -->
+                <div
+                  part="spectrum"
+                  class="color-picker__spectrum"
+                  style="background-color: hsl(${this.hue}, 100%, 50%)"
+                  @pointerdown=${this.handleSpectrumPointerDown}
+                >
+                  <div class="color-picker__spectrum-white"></div>
+                  <div class="color-picker__spectrum-black"></div>
+                  <div
+                    class="color-picker__spectrum-handle"
+                    style="left: ${this.saturation}%; top: ${100 - this.brightness}%"
+                  ></div>
+                </div>
+
+                <!-- Sliders -->
+                <div class="color-picker__sliders">
+                  <div
+                    part="hue-slider"
+                    class="color-picker__hue"
+                    @pointerdown=${this.handleHuePointerDown}
+                  >
+                    <div
+                      class="color-picker__hue-handle"
+                      style="left: ${this.hue / 360 * 100}%"
+                    ></div>
+                  </div>
+
+                  ${this.alpha ? html`
+                        <div
+                          part="alpha-slider"
+                          class="color-picker__alpha"
+                          style="--_alpha-gradient: linear-gradient(to right, transparent, ${this.hsvToHex(this.hue, this.saturation, this.brightness)})"
+                          @pointerdown=${this.handleAlphaPointerDown}
+                        >
+                          <div
+                            class="color-picker__alpha-handle"
+                            style="left: ${this.alphaValue * 100}%"
+                          ></div>
+                        </div>
+                      ` : nothing}
+                </div>
+
+                <!-- Text input -->
+                <div class="color-picker__input-row">
+                  <input
+                    part="input"
+                    class="color-picker__input"
+                    type="text"
+                    .value=${this.inputValue}
+                    @input=${this.handleTextInput}
+                    @change=${this.handleTextChange}
+                    ?disabled=${this.disabled}
+                  />
+                </div>
+
+                <!-- Swatches -->
+                ${this.swatchList.length > 0 ? html`
+                      <div part="swatches" class="color-picker__swatches">
+                        ${this.swatchList.map(
+      (color) => html`
+                            <button
+                              class="color-picker__swatch-btn"
+                              type="button"
+                              style="--_swatch-color: ${color}"
+                              aria-label=${color}
+                              @click=${() => this.setColorFromHex(color)}
+                            ></button>
+                          `
+    )}
+                      </div>
+                    ` : nothing}
+              </div>
+            ` : nothing}
+      </div>
+    `;
+  }
+}
+MzColorPicker.styles = styles;
+__decorateClass([
+  property({ type: String })
+], MzColorPicker.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzColorPicker.prototype, "alpha", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzColorPicker.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String })
+], MzColorPicker.prototype, "swatches", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzColorPicker.prototype, "inline", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], MzColorPicker.prototype, "size", 2);
+__decorateClass([
+  property({ type: String })
+], MzColorPicker.prototype, "name", 2);
+__decorateClass([
+  state()
+], MzColorPicker.prototype, "isOpen", 2);
+__decorateClass([
+  state()
+], MzColorPicker.prototype, "hue", 2);
+__decorateClass([
+  state()
+], MzColorPicker.prototype, "saturation", 2);
+__decorateClass([
+  state()
+], MzColorPicker.prototype, "brightness", 2);
+__decorateClass([
+  state()
+], MzColorPicker.prototype, "alphaValue", 2);
+__decorateClass([
+  state()
+], MzColorPicker.prototype, "inputValue", 2);
+__decorateClass([
+  state()
+], MzColorPicker.prototype, "isDraggingSpectrum", 2);
+__decorateClass([
+  state()
+], MzColorPicker.prototype, "isDraggingHue", 2);
+__decorateClass([
+  state()
+], MzColorPicker.prototype, "isDraggingAlpha", 2);
+export {
+  MzColorPicker
+};
+//# sourceMappingURL=color-picker.component.js.map