sp-component 0.0.1

package/dist/components/checkbox-group/sp-checkbox-group.js

@@ -0,0 +1,104 @@
+import { unsafeCSS as m, LitElement as y } from "lit";
+import { property as o, customElement as f } from "lit/decorators.js";
+import v from "./sp-checkbox-group.css.js";
+import { checkboxGroupTemplate as _ } from "./sp-checkbox-group.template.js";
+var C = Object.defineProperty, b = Object.getOwnPropertyDescriptor, u = (e) => {
+  throw TypeError(e);
+}, i = (e, t, r, a) => {
+  for (var n = a > 1 ? void 0 : a ? b(t, r) : t, h = e.length - 1, c; h >= 0; h--)
+    (c = e[h]) && (n = (a ? c(t, r, n) : c(n)) || n);
+  return a && n && C(t, r, n), n;
+}, d = (e, t, r) => t.has(e) || u("Cannot " + r), p = (e, t, r) => (d(e, t, "read from private field"), r ? r.call(e) : t.get(e)), k = (e, t, r) => t.has(e) ? u("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), g = (e, t, r, a) => (d(e, t, "write to private field"), t.set(e, r), r), l;
+let s = class extends y {
+  constructor() {
+    super(), k(this, l), this.values = "", this.name = "", this.disabled = !1, this.required = !1, this.orientation = "vertical", this.label = "", this.hint = "", this.error = "", this.min = 0, this.max = 0, this._handleSlotChange = () => {
+      this._syncCheckboxes();
+    }, this._handleCheckboxChange = (e) => {
+      if (e.target === this) return;
+      e.stopImmediatePropagation();
+      const t = e.target, r = t.value ?? "", a = new Set(this._getValuesArray());
+      if (e.detail.checked) {
+        if (this.max > 0 && a.size >= this.max) {
+          t.checked = !1;
+          return;
+        }
+        a.add(r);
+      } else
+        a.delete(r);
+      this.values = Array.from(a).join(","), this.dispatchEvent(
+        new CustomEvent("sp-change", {
+          detail: { values: Array.from(a) },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, g(this, l, this.attachInternals());
+  }
+  render() {
+    return _.call(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("sp-change", this._handleCheckboxChange);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("sp-change", this._handleCheckboxChange);
+  }
+  updated(e) {
+    (e.has("values") || e.has("name") || e.has("disabled")) && this._syncCheckboxes(), this._updateFormValue();
+  }
+  formResetCallback() {
+    this.values = "", this._syncCheckboxes();
+  }
+  _getValuesArray() {
+    return this.values ? this.values.split(",").map((e) => e.trim()).filter((e) => e.length > 0) : [];
+  }
+  _updateFormValue() {
+    const e = this._getValuesArray();
+    e.length === 0 ? p(this, l).setFormValue(null) : p(this, l).setFormValue(e.join(","));
+  }
+  _syncCheckboxes() {
+    const e = new Set(this._getValuesArray());
+    this.querySelectorAll("sp-checkbox").forEach((r) => {
+      r.name = this.name, r.checked = e.has(r.value), this.disabled && (r.disabled = !0);
+    });
+  }
+};
+l = /* @__PURE__ */ new WeakMap();
+s.styles = m(v);
+s.formAssociated = !0;
+i([
+  o({ type: String })
+], s.prototype, "values", 2);
+i([
+  o({ type: String })
+], s.prototype, "name", 2);
+i([
+  o({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+i([
+  o({ type: Boolean, reflect: !0 })
+], s.prototype, "required", 2);
+i([
+  o({ type: String, reflect: !0 })
+], s.prototype, "orientation", 2);
+i([
+  o({ type: String })
+], s.prototype, "label", 2);
+i([
+  o({ type: String })
+], s.prototype, "hint", 2);
+i([
+  o({ type: String, reflect: !0 })
+], s.prototype, "error", 2);
+i([
+  o({ type: Number })
+], s.prototype, "min", 2);
+i([
+  o({ type: Number })
+], s.prototype, "max", 2);
+s = i([
+  f("sp-checkbox-group")
+], s);
+export {
+  s as SpCheckboxGroupComponent
+};

package/dist/components/checkbox-group/sp-checkbox-group.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import { SpCheckboxGroupComponent } from './sp-checkbox-group.js';
+export declare function checkboxGroupTemplate(this: SpCheckboxGroupComponent): TemplateResult;
+//# sourceMappingURL=sp-checkbox-group.template.d.ts.map

package/dist/components/checkbox-group/sp-checkbox-group.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-checkbox-group.template.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-group/sp-checkbox-group.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAEvE,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,wBAAwB,GAAG,cAAc,CAiBpF"}

package/dist/components/checkbox-group/sp-checkbox-group.template.js

@@ -0,0 +1,16 @@
+import { nothing as e, html as s } from "lit";
+function t() {
+  return s`
+    <fieldset class="sp-checkbox-group">
+      ${this.label ? s`<legend class="sp-checkbox-group-legend">${this.label}</legend>` : e}
+      <div class="sp-checkbox-group-options">
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+      ${this.error ? s`<span class="sp-checkbox-group-error" role="alert">${this.error}</span>` : e}
+      ${!this.error && this.hint ? s`<span class="sp-checkbox-group-hint">${this.hint}</span>` : e}
+    </fieldset>
+  `;
+}
+export {
+  t as checkboxGroupTemplate
+};

package/dist/components/checkbox-group/sp-checkbox-group.types.d.ts

@@ -0,0 +1,14 @@
+export type SpCheckboxGroupOrientation = "horizontal" | "vertical";
+export interface SpCheckboxGroupProps {
+    values: string;
+    name: string;
+    disabled: boolean;
+    required: boolean;
+    orientation: SpCheckboxGroupOrientation;
+    label: string;
+    hint: string;
+    error: string;
+    min: number;
+    max: number;
+}
+//# sourceMappingURL=sp-checkbox-group.types.d.ts.map

package/dist/components/checkbox-group/sp-checkbox-group.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-checkbox-group.types.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-group/sp-checkbox-group.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,0BAA0B,GAAG,YAAY,GAAG,UAAU,CAAC;AAEnE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,0BAA0B,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb"}

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

@@ -0,0 +1,3 @@
+export { SpColorPickerComponent, hexToHsl, hslToHex, hslToRgb, hslToHslString } from './sp-color-picker.js';
+export type { SpColorPickerProps, SpColorPickerFormat } from './sp-color-picker.types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC5G,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC"}

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

@@ -0,0 +1,4 @@
+const r = ":host{display:inline-block;font-family:inherit;position:relative}.sp-color-picker-label{display:block;font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:4px}.sp-color-picker-trigger{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;background:var(--sp-bg, white);cursor:pointer;font-size:13px;font-family:inherit;color:var(--sp-text-secondary, #374151);transition:border-color .2s,box-shadow .2s}.sp-color-picker-trigger:hover:not(:disabled){border-color:var(--sp-border-strong, #9ca3af)}.sp-color-picker-trigger:focus-visible{outline:2px solid var(--sp-primary-focus, rgba(59, 130, 246, .5));outline-offset:1px}.sp-color-picker-trigger:disabled{opacity:.5;cursor:not-allowed}.sp-color-picker-trigger-preview{display:inline-block;width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.15);flex-shrink:0}.sp-color-picker-trigger-value{font-family:monospace;font-size:13px}.sp-color-picker-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:1000;width:260px;background:var(--sp-bg, white);border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:12px;box-shadow:0 10px 25px #0000001f,0 4px 10px #0000000f;padding:16px;display:flex;flex-direction:column;gap:12px}.sp-color-picker-canvas{position:relative;width:100%;height:160px;border-radius:6px;cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none}.sp-color-picker-thumb{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid var(--sp-bg, white);box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;transform:translate(-50%,-50%);pointer-events:none}.sp-color-picker-sliders{display:flex;flex-direction:column;gap:8px}input[type=range].sp-color-picker-hue,input[type=range].sp-color-picker-alpha{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:12px;border-radius:6px;outline:none;cursor:pointer}input[type=range].sp-color-picker-hue{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}input[type=range].sp-color-picker-hue::-webkit-slider-thumb,input[type=range].sp-color-picker-alpha::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--sp-bg, white);border:2px solid rgba(0,0,0,.2);box-shadow:0 1px 3px #0003;cursor:grab}input[type=range].sp-color-picker-alpha{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.sp-color-picker-inputs{display:flex;gap:8px}.sp-color-picker-hex-input{flex:1;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;padding:6px 10px;font-family:monospace;font-size:13px;color:var(--sp-text-secondary, #374151);outline:none;transition:border-color .2s;background:var(--sp-bg, white)}.sp-color-picker-hex-input:focus{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 2px var(--sp-primary-focus, rgba(59, 130, 246, .2))}.sp-color-picker-swatches{display:flex;flex-wrap:wrap;gap:6px}.sp-color-picker-swatch{width:24px;height:24px;border-radius:50%;border:2px solid rgba(0,0,0,.1);cursor:pointer;padding:0;transition:transform .15s,border-color .15s}.sp-color-picker-swatch:hover{transform:scale(1.2);border-color:#0000004d}.sp-color-picker-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-color-picker-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}.sp-color-picker--disabled .sp-color-picker-trigger{opacity:.5;cursor:not-allowed}@media(prefers-reduced-motion:reduce){.sp-color-picker-trigger,.sp-color-picker-swatch{transition:none}}";
+export {
+  r as default
+};

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

@@ -0,0 +1,78 @@
+import { LitElement } from 'lit';
+import { SpColorPickerFormat } from './sp-color-picker.types.js';
+/**
+ * Color picker component with hue/saturation/lightness canvas and preset swatches.
+ *
+ * @element sp-color-picker
+ *
+ * @prop {string}               value     - Hex color string (default #000000)
+ * @prop {SpColorPickerFormat}  format    - Output format: hex | rgb | hsl
+ * @prop {boolean}              disabled  - Disables the picker
+ * @prop {boolean}              readonly  - Prevents changes
+ * @prop {string}               name      - Form field name
+ * @prop {string}               label     - Label text
+ * @prop {string}               hint      - Hint text
+ * @prop {string}               error     - Error message
+ * @prop {boolean}              showAlpha - Show alpha channel slider (attribute: show-alpha)
+ * @prop {string}               swatches  - Comma-separated preset colors
+ *
+ * @fires {CustomEvent<{ value: string }>} sp-change - Emitted when color is committed
+ * @fires {CustomEvent<{ value: string }>} sp-input  - Emitted on every color change
+ */
+export declare class SpColorPickerComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    static formAssociated: boolean;
+    constructor();
+    value: string;
+    format: SpColorPickerFormat;
+    disabled: boolean;
+    readonly: boolean;
+    name: string;
+    label: string;
+    hint: string;
+    error: string;
+    showAlpha: boolean;
+    swatches: string;
+    _open: boolean;
+    _recentColors: string[];
+    _h: number;
+    _s: number;
+    _l: number;
+    _a: number;
+    private _canvasDragging;
+    private _canvasEl;
+    render(): import('lit-html').TemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    formResetCallback(): void;
+    _toggle(): void;
+    _parseHex(hex: string): void;
+    _formatValue(): string;
+    _emitChange(): void;
+    readonly _handleHueInput: (e: Event) => void;
+    readonly _handleAlphaInput: (e: Event) => void;
+    readonly _handleHexInput: (e: Event) => void;
+    _addToRecentColors(color: string): void;
+    _selectSwatch(color: string): void;
+    readonly _startCanvasDrag: (e: PointerEvent) => void;
+    readonly _onPointerMove: (e: PointerEvent) => void;
+    readonly _onPointerUp: (e: PointerEvent) => void;
+    private _updateFromCanvas;
+    private readonly _handleDocumentPointerDown;
+}
+export declare function hexToHsl(hex: string): {
+    h: number;
+    s: number;
+    l: number;
+} | null;
+export declare function hslToHex(h: number, s: number, l: number): string;
+export declare function hslToRgb(h: number, s: number, l: number): string;
+export declare function hslToHslString(h: number, s: number, l: number): string;
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-color-picker": SpColorPickerComponent;
+    }
+}
+//# sourceMappingURL=sp-color-picker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-color-picker.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/sp-color-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,sBAAuB,SAAQ,UAAU;;IACpD,OAAgB,MAAM,0BAAqB;IAC3C,MAAM,CAAC,cAAc,UAAQ;;IAU7B,KAAK,SAAa;IAGlB,MAAM,EAAE,mBAAmB,CAAS;IAGpC,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,SAAS,UAAS;IAGlB,QAAQ,SAAM;IAGd,KAAK,UAAS;IAGd,aAAa,EAAE,MAAM,EAAE,CAAM;IAG7B,EAAE,SAAK;IAGP,EAAE,SAAO;IAGT,EAAE,SAAM;IAGR,EAAE,SAAK;IAEP,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,SAAS,CAA4B;IAEpC,MAAM;IAIN,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMxD,iBAAiB,IAAI,IAAI;IASzB,OAAO;IAQP,SAAS,CAAC,GAAG,EAAE,MAAM;IASrB,YAAY,IAAI,MAAM;IAUtB,WAAW;IAoBX,QAAQ,CAAC,eAAe,GAAI,GAAG,KAAK,UAIlC;IAEF,QAAQ,CAAC,iBAAiB,GAAI,GAAG,KAAK,UAIpC;IAEF,QAAQ,CAAC,eAAe,GAAI,GAAG,KAAK,UAKlC;IAEF,kBAAkB,CAAC,KAAK,EAAE,MAAM;IAMhC,aAAa,CAAC,KAAK,EAAE,MAAM;IAc3B,QAAQ,CAAC,gBAAgB,GAAI,GAAG,YAAY,UAM1C;IAEF,QAAQ,CAAC,cAAc,GAAI,GAAG,YAAY,UAGxC;IAEF,QAAQ,CAAC,YAAY,GAAI,GAAG,YAAY,UAMtC;IAEF,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,QAAQ,CAAC,0BAA0B,CAIzC;CACH;AAID,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAkChF;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAGhE;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAGhE;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAEtE;AAiBD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,sBAAsB,CAAC;KAC3C;CACF"}

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

@@ -0,0 +1,200 @@
+import { unsafeCSS as b, LitElement as w } from "lit";
+import { property as l, state as c, customElement as x } from "lit/decorators.js";
+import M from "./sp-color-picker.css.js";
+import { colorPickerTemplate as E } from "./sp-color-picker.template.js";
+var S = Object.defineProperty, D = Object.getOwnPropertyDescriptor, g = (t) => {
+  throw TypeError(t);
+}, i = (t, e, s, a) => {
+  for (var n = a > 1 ? void 0 : a ? D(e, s) : e, o = t.length - 1, h; o >= 0; o--)
+    (h = t[o]) && (n = (a ? h(e, s, n) : h(n)) || n);
+  return a && n && S(e, s, n), n;
+}, C = (t, e, s) => e.has(t) || g("Cannot " + s), f = (t, e, s) => (C(t, e, "read from private field"), s ? s.call(t) : e.get(t)), P = (t, e, s) => e.has(t) ? g("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), T = (t, e, s, a) => (C(t, e, "write to private field"), e.set(t, s), s), _;
+let r = class extends w {
+  constructor() {
+    super(), P(this, _), this.value = "#000000", this.format = "hex", this.disabled = !1, this.readonly = !1, this.name = "", this.label = "", this.hint = "", this.error = "", this.showAlpha = !1, this.swatches = "", this._open = !1, this._recentColors = [], this._h = 0, this._s = 100, this._l = 50, this._a = 1, this._canvasDragging = !1, this._canvasEl = null, this._handleHueInput = (t) => {
+      const e = t.target;
+      this._h = Number(e.value), this._emitChange();
+    }, this._handleAlphaInput = (t) => {
+      const e = t.target;
+      this._a = Number(e.value) / 100, this._emitChange();
+    }, this._handleHexInput = (t) => {
+      const s = t.target.value.trim();
+      this._parseHex(s.startsWith("#") ? s : `#${s}`), this._emitChange();
+    }, this._startCanvasDrag = (t) => {
+      this.disabled || this.readonly || (this._canvasDragging = !0, this._canvasEl = t.currentTarget, t.currentTarget.setPointerCapture(t.pointerId), this._updateFromCanvas(t));
+    }, this._onPointerMove = (t) => {
+      this._canvasDragging && this._updateFromCanvas(t);
+    }, this._onPointerUp = (t) => {
+      this._canvasDragging && (this._canvasDragging = !1, this._updateFromCanvas(t), this._emitChange(), this._canvasEl = null);
+    }, this._handleDocumentPointerDown = (t) => {
+      !t.composedPath().includes(this) && this._open && (this._open = !1);
+    }, T(this, _, this.attachInternals());
+  }
+  render() {
+    return E.call(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("pointerdown", this._handleDocumentPointerDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("pointerdown", this._handleDocumentPointerDown);
+  }
+  updated(t) {
+    t.has("value") && f(this, _).setFormValue(this.value);
+  }
+  formResetCallback() {
+    this.value = "#000000", this._h = 0, this._s = 100, this._l = 50, this._a = 1, f(this, _).setFormValue(this.value);
+  }
+  _toggle() {
+    this.disabled || this.readonly || (this._open = !this._open, this._open && this._parseHex(this.value));
+  }
+  _parseHex(t) {
+    const e = k(t);
+    e && (this._h = e.h, this._s = e.s, this._l = e.l);
+  }
+  _formatValue() {
+    return this.format === "rgb" ? $(this._h, this._s, this._l) : this.format === "hsl" ? I(this._h, this._s, this._l) : H(this._h, this._s, this._l);
+  }
+  _emitChange() {
+    const t = this._formatValue();
+    this.value = t, this._addToRecentColors(t), this.dispatchEvent(
+      new CustomEvent("sp-change", {
+        detail: { value: t },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.dispatchEvent(
+      new CustomEvent("sp-input", {
+        detail: { value: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _addToRecentColors(t) {
+    const e = t.toLowerCase(), s = this._recentColors.filter((a) => a.toLowerCase() !== e);
+    this._recentColors = [e, ...s].slice(0, 8);
+  }
+  _selectSwatch(t) {
+    this._addToRecentColors(t), this.value = t, this._parseHex(t), this._open = !1, this.dispatchEvent(
+      new CustomEvent("sp-change", {
+        detail: { value: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _updateFromCanvas(t) {
+    const e = t.currentTarget ?? this._canvasEl;
+    if (!e) return;
+    const s = e.getBoundingClientRect(), a = Math.max(0, Math.min(1, (t.clientX - s.left) / s.width)), n = Math.max(0, Math.min(1, (t.clientY - s.top) / s.height));
+    this._s = Math.round(a * 100), this._l = Math.round((1 - n) * 50), this._emitChange();
+  }
+};
+_ = /* @__PURE__ */ new WeakMap();
+r.styles = b(M);
+r.formAssociated = !0;
+i([
+  l({ type: String, reflect: !0 })
+], r.prototype, "value", 2);
+i([
+  l({ type: String })
+], r.prototype, "format", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "readonly", 2);
+i([
+  l({ type: String })
+], r.prototype, "name", 2);
+i([
+  l({ type: String })
+], r.prototype, "label", 2);
+i([
+  l({ type: String })
+], r.prototype, "hint", 2);
+i([
+  l({ type: String })
+], r.prototype, "error", 2);
+i([
+  l({ type: Boolean, attribute: "show-alpha" })
+], r.prototype, "showAlpha", 2);
+i([
+  l({ type: String })
+], r.prototype, "swatches", 2);
+i([
+  c()
+], r.prototype, "_open", 2);
+i([
+  c()
+], r.prototype, "_recentColors", 2);
+i([
+  c()
+], r.prototype, "_h", 2);
+i([
+  c()
+], r.prototype, "_s", 2);
+i([
+  c()
+], r.prototype, "_l", 2);
+i([
+  c()
+], r.prototype, "_a", 2);
+r = i([
+  x("sp-color-picker")
+], r);
+function k(t) {
+  const e = t.replace(/^#/, "");
+  if (e.length !== 6) return null;
+  const s = parseInt(e.slice(0, 2), 16) / 255, a = parseInt(e.slice(2, 4), 16) / 255, n = parseInt(e.slice(4, 6), 16) / 255, o = Math.max(s, a, n), h = Math.min(s, a, n), d = (o + h) / 2;
+  let p = 0, v = 0;
+  if (o !== h) {
+    const u = o - h;
+    switch (v = d > 0.5 ? u / (2 - o - h) : u / (o + h), o) {
+      case s:
+        p = ((a - n) / u + (a < n ? 6 : 0)) / 6;
+        break;
+      case a:
+        p = ((n - s) / u + 2) / 6;
+        break;
+      case n:
+        p = ((s - a) / u + 4) / 6;
+        break;
+    }
+  }
+  return {
+    h: Math.round(p * 360),
+    s: Math.round(v * 100),
+    l: Math.round(d * 100)
+  };
+}
+function H(t, e, s) {
+  const [a, n, o] = y(t, e, s);
+  return `#${m(a)}${m(n)}${m(o)}`;
+}
+function $(t, e, s) {
+  const [a, n, o] = y(t, e, s);
+  return `rgb(${a}, ${n}, ${o})`;
+}
+function I(t, e, s) {
+  return `hsl(${t}, ${e}%, ${s}%)`;
+}
+function y(t, e, s) {
+  const a = e / 100, n = s / 100, o = a * Math.min(n, 1 - n), h = (d) => {
+    const p = (d + t / 30) % 12;
+    return Math.round((n - o * Math.max(-1, Math.min(p - 3, 9 - p, 1))) * 255);
+  };
+  return [h(0), h(8), h(4)];
+}
+function m(t) {
+  return t.toString(16).padStart(2, "0");
+}
+export {
+  r as SpColorPickerComponent,
+  k as hexToHsl,
+  H as hslToHex,
+  I as hslToHslString,
+  $ as hslToRgb
+};

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

@@ -0,0 +1,8 @@
+import { TemplateResult } from 'lit';
+import { SpColorPickerComponent } from './sp-color-picker.js';
+/**
+ * HTML template for sp-color-picker.
+ * Call as: colorPickerTemplate.call(this) inside render()
+ */
+export declare function colorPickerTemplate(this: SpColorPickerComponent): TemplateResult;
+//# sourceMappingURL=sp-color-picker.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-color-picker.template.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/sp-color-picker.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEnE;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,sBAAsB,GAAG,cAAc,CA2HhF"}

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

@@ -0,0 +1,111 @@
+import { nothing as i, html as s } from "lit";
+import { classMap as a } from "lit/directives/class-map.js";
+function o() {
+  const e = this.swatches ? this.swatches.split(",").map((t) => t.trim()).filter(Boolean) : [];
+  return s`
+    <div
+      class=${a({
+    "sp-color-picker": !0,
+    "sp-color-picker--disabled": this.disabled,
+    "sp-color-picker--error": !!this.error
+  })}
+    >
+      ${this.label ? s`<label class="sp-color-picker-label">${this.label}</label>` : i}
+
+      <button
+        class="sp-color-picker-trigger"
+        type="button"
+        ?disabled=${this.disabled}
+        aria-expanded=${this._open ? "true" : "false"}
+        aria-haspopup="dialog"
+        @click=${this._toggle}
+      >
+        <span
+          class="sp-color-picker-trigger-preview"
+          style="background: ${this.value}"
+        ></span>
+        <span class="sp-color-picker-trigger-value">${this.value}</span>
+      </button>
+
+      ${this._open ? s`
+            <div
+              class="sp-color-picker-panel"
+              role="dialog"
+              aria-label="Color picker"
+            >
+              <!-- Gradient canvas -->
+              <div
+                class="sp-color-picker-canvas"
+                style="background: linear-gradient(to bottom, transparent, black),
+                       linear-gradient(to right, white, hsl(${this._h},100%,50%))"
+                @pointerdown=${this._startCanvasDrag}
+                @pointermove=${this._onPointerMove}
+                @pointerup=${this._onPointerUp}
+              >
+                <div
+                  class="sp-color-picker-thumb"
+                  style="left:${this._s}%;top:${100 - this._l * 2}%"
+                ></div>
+              </div>
+
+              <!-- Sliders -->
+              <div class="sp-color-picker-sliders">
+                <input
+                  type="range"
+                  class="sp-color-picker-hue"
+                  min="0"
+                  max="360"
+                  .value=${String(this._h)}
+                  aria-label="Hue"
+                  @input=${this._handleHueInput}
+                />
+                ${this.showAlpha ? s`
+                      <input
+                        type="range"
+                        class="sp-color-picker-alpha"
+                        min="0"
+                        max="100"
+                        .value=${String(Math.round(this._a * 100))}
+                        aria-label="Alpha"
+                        @input=${this._handleAlphaInput}
+                      />
+                    ` : i}
+              </div>
+
+              <!-- Hex / text input -->
+              <div class="sp-color-picker-inputs">
+                <input
+                  type="text"
+                  class="sp-color-picker-hex-input"
+                  .value=${this._formatValue()}
+                  aria-label="Color value"
+                  @change=${this._handleHexInput}
+                />
+              </div>
+
+              <!-- Swatches -->
+              ${e.length ? s`
+                    <div class="sp-color-picker-swatches">
+                      ${e.map(
+    (t) => s`
+                          <button
+                            class="sp-color-picker-swatch"
+                            type="button"
+                            style="background: ${t}"
+                            aria-label=${t}
+                            @click=${() => this._selectSwatch(t)}
+                          ></button>
+                        `
+  )}
+                    </div>
+                  ` : i}
+            </div>
+          ` : i}
+
+      ${this.error ? s`<span class="sp-color-picker-error" role="alert">${this.error}</span>` : this.hint ? s`<span class="sp-color-picker-hint">${this.hint}</span>` : i}
+    </div>
+  `;
+}
+export {
+  o as colorPickerTemplate
+};

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

@@ -0,0 +1,14 @@
+export type SpColorPickerFormat = "hex" | "rgb" | "hsl";
+export interface SpColorPickerProps {
+    value: string;
+    format: SpColorPickerFormat;
+    disabled: boolean;
+    readonly: boolean;
+    name: string;
+    label: string;
+    hint: string;
+    error: string;
+    showAlpha: boolean;
+    swatches: string;
+}
+//# sourceMappingURL=sp-color-picker.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-color-picker.types.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/sp-color-picker.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAExD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,mBAAmB,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB"}

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

@@ -0,0 +1,3 @@
+export { SpComboboxComponent } from './sp-combobox.js';
+export type { SpComboboxProps, SpComboboxOption, SpComboboxSize } from './sp-combobox.types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/combobox/sp-combobox.css.js

@@ -0,0 +1,4 @@
+const o = ':host{display:block;font-family:inherit}.sp-combobox-wrapper{position:relative}.sp-combobox-label{display:block;font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:4px}.sp-required{color:var(--sp-error, #FF4D4F)}.sp-combobox-container{position:relative;display:flex;align-items:center;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;background:var(--sp-bg, white);transition:border-color .2s}.sp-combobox-container--open,.sp-combobox-container:focus-within{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 2px var(--sp-primary-focus, rgba(59,130,246,.2))}.sp-combobox-container--error{border-color:var(--sp-error, #FF4D4F)}.sp-combobox-container--error:focus-within{box-shadow:0 0 0 2px var(--sp-error-focus, rgba(255,77,79,.2))}.sp-combobox-input{flex:1;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--sp-text, #111827);padding:8px 12px;min-width:0;cursor:pointer}.sp-combobox-input::placeholder{color:var(--sp-text-placeholder, #9ca3af)}:host([size="sm"]) .sp-combobox-input{padding:5px 8px;font-size:12px}:host([size="lg"]) .sp-combobox-input{padding:11px 16px;font-size:16px}.sp-combobox-multi-wrap{display:flex;flex-wrap:wrap;gap:4px;flex:1;align-items:center;padding:4px 6px;min-height:36px}:host([size="sm"]) .sp-combobox-multi-wrap{min-height:28px;padding:3px 5px}:host([size="lg"]) .sp-combobox-multi-wrap{min-height:46px;padding:6px 8px}.sp-combobox-input--multi{flex:1;min-width:80px;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--sp-text, #111827);padding:2px 4px;cursor:text}:host([size="sm"]) .sp-combobox-input--multi{font-size:12px}:host([size="lg"]) .sp-combobox-input--multi{font-size:16px}.sp-combobox-input--multi::placeholder{color:var(--sp-text-placeholder, #9ca3af)}.sp-combobox-tag{display:inline-flex;align-items:center;gap:3px;background:var(--sp-primary-bg, #eff6ff);color:var(--sp-primary-hover, #2563eb);border:1px solid var(--sp-primary-focus, rgba(59,130,246,.3));border-radius:4px;padding:2px 4px 2px 8px;font-size:12px;line-height:1.4;max-width:180px}.sp-combobox-tag-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-combobox-tag-remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--sp-primary, #3b82f6);padding:0 2px;line-height:1;font-size:14px;flex-shrink:0;border-radius:2px}.sp-combobox-tag-remove:hover{color:var(--sp-error, #FF4D4F);background:var(--sp-error-bg, #FFF2F0)}.sp-combobox-clear{background:none;border:none;cursor:pointer;color:var(--sp-text-placeholder, #9ca3af);padding:0 4px;flex-shrink:0}.sp-combobox-clear:hover{color:var(--sp-text-secondary, #374151)}.sp-combobox-arrow-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0 10px;align-self:stretch;color:var(--sp-text-muted, #6b7280);flex-shrink:0}.sp-combobox-arrow-btn:disabled{cursor:not-allowed}.sp-combobox-arrow{color:var(--sp-text-muted, #6b7280);font-size:12px;pointer-events:none}.sp-combobox-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:9999;background:var(--sp-bg, white);border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:6px;box-shadow:0 8px 24px #0000001f;max-height:var(--sp-combobox-max-height, 280px);overflow-y:auto}.sp-combobox-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px;color:var(--sp-text-secondary, #374151);cursor:pointer}.sp-combobox-option:hover:not(.sp-combobox-option--disabled){background:var(--sp-bg-muted, #f3f4f6)}.sp-combobox-option--selected{color:var(--sp-primary, #3b82f6);font-weight:500;background:var(--sp-primary-bg, #eff6ff)}.sp-combobox-option--disabled{opacity:.4;cursor:not-allowed}.sp-combobox-option--highlighted{background:var(--sp-bg-muted, #f3f4f6)}.sp-combobox-option--selected.sp-combobox-option--highlighted{background:var(--sp-primary-bg, #eff6ff);filter:brightness(.96)}.sp-combobox-option-check{width:16px;flex-shrink:0;font-size:12px;color:var(--sp-primary, #3b82f6);font-weight:700}.sp-combobox-no-results{padding:12px;font-size:14px;color:var(--sp-text-placeholder, #9ca3af);text-align:center}.sp-combobox-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-combobox-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}:host([disabled]) .sp-combobox-container{opacity:.5;cursor:not-allowed;background:var(--sp-bg-subtle, #f9fafb)}:host([disabled]) .sp-combobox-input{cursor:not-allowed}@media(max-width:479px){.sp-combobox-wrapper{width:100%}.sp-combobox-dropdown{left:0;right:0;width:100%}}@media(prefers-reduced-motion:reduce){.sp-combobox-container{transition:none}}';
+export {
+  o as default
+};