@krollins/blueprint 0.1.11 → 0.1.13

package/dist/components/color-picker.js

@@ -0,0 +1,1660 @@
+import { css as $, LitElement as x, html as l, nothing as c } from "lit";
+import { property as u, state as f, query as m, customElement as k } from "lit/decorators.js";
+import { b as C } from "../shared/boolean-converter-XDGfS9LC.js";
+const I = $`
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Base Styles
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  :host {
+    /* Component-specific custom properties */
+    /* stylelint-disable blueprint/no-hardcoded-values */
+    --color-picker-width: 350px;
+    --color-picker-area-height: 160px;
+    --color-picker-swatch-size: var(--bp-spacing-lg);
+    --color-picker-handle-size: var(--bp-spacing-md);
+    /* stylelint-enable blueprint/no-hardcoded-values */
+
+    display: inline-block;
+    position: relative;
+    font-family: var(--bp-font-family);
+  }
+
+  :host([disabled]) {
+    opacity: var(--bp-opacity-disabled);
+    pointer-events: none;
+  }
+
+  .color-picker {
+    position: relative;
+  }
+
+  /* Screen reader only text */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Trigger Button
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--bp-spacing-sm);
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    background-color: var(--bp-color-surface);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-md);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--bp-font-size-base);
+    color: var(--bp-color-text);
+    transition:
+      border-color var(--bp-transition-fast),
+      box-shadow var(--bp-transition-fast);
+  }
+
+  .trigger:hover:not(:disabled) {
+    border-color: var(--bp-color-border-strong);
+  }
+
+  .trigger:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .trigger:disabled {
+    cursor: not-allowed;
+  }
+
+  .trigger-swatch {
+    display: block;
+    width: var(--color-picker-swatch-size);
+    height: var(--color-picker-swatch-size);
+    border-radius: var(--bp-border-radius-sm);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    /* Checkerboard pattern for transparency - functional, not themed */
+    /* stylelint-disable blueprint/no-hardcoded-values */
+    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: var(--bp-spacing-sm) var(--bp-spacing-sm);
+    background-position:
+      0 0,
+      0 calc(var(--bp-spacing-sm) / 2),
+      calc(var(--bp-spacing-sm) / 2) calc(var(--bp-spacing-sm) / -2),
+      calc(var(--bp-spacing-sm) / -2) 0;
+    /* stylelint-enable blueprint/no-hardcoded-values */
+    position: relative;
+  }
+
+  .trigger-swatch::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: inherit;
+    border-radius: inherit;
+  }
+
+  .trigger-label {
+    color: var(--bp-color-text);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Picker Panel
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .picker {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: var(--bp-spacing-xs);
+    width: var(--color-picker-width);
+    background-color: var(--bp-color-surface-elevated);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-lg);
+    box-shadow: var(--bp-shadow-lg);
+    z-index: var(--bp-z-popover);
+    animation: fadeIn var(--bp-transition-fast) ease-out;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(calc(var(--bp-spacing-xs) * -1));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  :host([inline]) .picker {
+    position: static;
+    margin-top: 0;
+    box-shadow: none;
+  }
+
+  .picker-body {
+    padding: var(--bp-spacing-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--bp-spacing-md);
+  }
+
+  .picker-main {
+    display: flex;
+    gap: var(--bp-spacing-sm);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Color Area (Saturation/Value)
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .color-area {
+    flex: 1;
+    height: var(--color-picker-area-height);
+    position: relative;
+    border-radius: var(--bp-border-radius-sm);
+    background: var(--hue-color);
+    cursor: crosshair;
+    touch-action: none;
+    user-select: none;
+  }
+
+  /* White-to-transparent and transparent-to-black gradients - functional for color picking */
+  /* stylelint-disable blueprint/no-hardcoded-values */
+  .color-area::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to right, #fff, transparent);
+    border-radius: inherit;
+  }
+
+  .color-area::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, transparent, #000);
+    border-radius: inherit;
+  }
+  /* stylelint-enable blueprint/no-hardcoded-values */
+
+  .color-area:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  /* Slider handles use white borders for visibility on any color */
+  /* stylelint-disable blueprint/no-hardcoded-values -- white border for contrast on any hue */
+  .color-area-handle {
+    position: absolute;
+    width: var(--color-picker-handle-size);
+    height: var(--color-picker-handle-size);
+    border: var(--bp-border-width) solid #fff;
+    border-radius: 50%;
+    box-shadow: var(--bp-shadow-sm);
+    transform: translate(-50%, -50%);
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  /* Expand touch target to 44×44px minimum (WCAG 2.2) */
+  .color-area-handle::after {
+    content: '';
+    position: absolute;
+    /* 44px touch target with 12px visual handle = 16px padding each side */
+    inset: calc(var(--bp-spacing-lg) * -1);
+  }
+  /* stylelint-enable blueprint/no-hardcoded-values */
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Hue Slider
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .hue-slider {
+    width: var(--bp-spacing-lg);
+    height: var(--color-picker-area-height);
+    position: relative;
+    border-radius: var(--bp-border-radius-sm);
+    /* Full hue spectrum gradient - functional, not themed */
+    /* stylelint-disable blueprint/no-hardcoded-values */
+    background: linear-gradient(
+      to bottom,
+      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%)
+    );
+    /* stylelint-enable blueprint/no-hardcoded-values */
+    cursor: pointer;
+    touch-action: none;
+    user-select: none;
+  }
+
+  .hue-slider:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  /* stylelint-disable blueprint/no-hardcoded-values -- white border for contrast on hue spectrum */
+  .hue-slider-handle {
+    position: absolute;
+    left: calc(var(--bp-spacing-xs) * -0.5);
+    right: calc(var(--bp-spacing-xs) * -0.5);
+    height: var(--bp-spacing-sm);
+    border: var(--bp-border-width) solid #fff;
+    border-radius: var(--bp-border-radius-sm);
+    box-shadow: var(--bp-shadow-sm);
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  /* Expand touch target to 44×44px minimum (WCAG 2.2) */
+  .hue-slider-handle::after {
+    content: '';
+    position: absolute;
+    /* 44px touch target with 8px visual handle = 18px padding top/bottom */
+    top: calc(var(--bp-spacing-lg) * -2.25);
+    bottom: calc(var(--bp-spacing-lg) * -2.25);
+    left: 0;
+    right: 0;
+  }
+  /* stylelint-enable blueprint/no-hardcoded-values */
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Alpha Slider
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .alpha-slider {
+    height: var(--bp-spacing-md);
+    position: relative;
+    border-radius: var(--bp-border-radius-sm);
+    /* Checkerboard pattern for transparency - functional, not themed */
+    /* stylelint-disable blueprint/no-hardcoded-values */
+    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: var(--bp-spacing-sm) var(--bp-spacing-sm);
+    background-position:
+      0 0,
+      0 calc(var(--bp-spacing-sm) / 2),
+      calc(var(--bp-spacing-sm) / 2) calc(var(--bp-spacing-sm) / -2),
+      calc(var(--bp-spacing-sm) / -2) 0;
+    /* stylelint-enable blueprint/no-hardcoded-values */
+    cursor: pointer;
+    touch-action: none;
+    user-select: none;
+  }
+
+  .alpha-slider::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--alpha-gradient);
+    border-radius: inherit;
+  }
+
+  .alpha-slider:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  /* stylelint-disable blueprint/no-hardcoded-values -- white border for contrast on alpha gradient */
+  .alpha-slider-handle {
+    position: absolute;
+    top: calc(var(--bp-spacing-xs) * -0.5);
+    bottom: calc(var(--bp-spacing-xs) * -0.5);
+    width: var(--bp-spacing-sm);
+    border: var(--bp-border-width) solid #fff;
+    border-radius: var(--bp-border-radius-sm);
+    box-shadow: var(--bp-shadow-sm);
+    transform: translateX(-50%);
+    pointer-events: none;
+  }
+
+  /* Expand touch target to 44×44px minimum (WCAG 2.2) */
+  .alpha-slider-handle::after {
+    content: '';
+    position: absolute;
+    /* 44px touch target with 8px visual handle = 18px padding left/right */
+    left: calc(var(--bp-spacing-lg) * -2.25);
+    right: calc(var(--bp-spacing-lg) * -2.25);
+    top: 0;
+    bottom: 0;
+  }
+  /* stylelint-enable blueprint/no-hardcoded-values */
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Controls Row
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .picker-controls {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--bp-spacing-sm);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Preview
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .preview {
+    display: flex;
+    flex-direction: column;
+    width: var(--bp-spacing-2xl);
+    height: var(--bp-spacing-2xl);
+    border-radius: var(--bp-border-radius-sm);
+    overflow: hidden;
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    /* Checkerboard pattern for transparency - functional, not themed */
+    /* stylelint-disable blueprint/no-hardcoded-values */
+    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: var(--bp-spacing-sm) var(--bp-spacing-sm);
+    background-position:
+      0 0,
+      0 calc(var(--bp-spacing-sm) / 2),
+      calc(var(--bp-spacing-sm) / 2) calc(var(--bp-spacing-sm) / -2),
+      calc(var(--bp-spacing-sm) / -2) 0;
+    /* stylelint-enable blueprint/no-hardcoded-values */
+  }
+
+  .preview-swatch {
+    flex: 1;
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Inputs
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .inputs-container {
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--bp-spacing-xs);
+  }
+
+  .input-row {
+    display: flex;
+    gap: var(--bp-spacing-xs);
+    flex: 1;
+  }
+
+  .input-group {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--bp-spacing-2xs);
+  }
+
+  .color-input {
+    width: 100%;
+    padding: var(--bp-spacing-xs);
+    font-family: var(--bp-font-family-mono);
+    font-size: var(--bp-font-size-sm);
+    background-color: var(--bp-color-surface);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-sm);
+    color: var(--bp-color-text);
+    text-align: center;
+    box-sizing: border-box;
+  }
+
+  .color-input:focus {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+    border-color: var(--bp-color-primary);
+  }
+
+  .color-input::-webkit-inner-spin-button,
+  .color-input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .color-input[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  .hex-input {
+    text-transform: uppercase;
+  }
+
+  .input-label {
+    font-size: var(--bp-font-size-xs);
+    color: var(--bp-color-text-muted);
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  .format-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--bp-spacing-xl);
+    height: var(--bp-spacing-xl);
+    padding: 0;
+    margin-top: var(--bp-spacing-2xs);
+    background-color: var(--bp-color-surface);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-sm);
+    color: var(--bp-color-text-muted);
+    cursor: pointer;
+    transition:
+      background-color var(--bp-transition-fast),
+      color var(--bp-transition-fast);
+  }
+
+  .format-toggle:hover:not(:disabled) {
+    background-color: var(--bp-color-surface-subdued);
+    color: var(--bp-color-text);
+  }
+
+  .format-toggle:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .format-toggle svg {
+    width: var(--bp-spacing-md);
+    height: var(--bp-spacing-md);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Eyedropper
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .eyedropper-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--bp-spacing-2xl);
+    height: var(--bp-spacing-2xl);
+    padding: 0;
+    background-color: var(--bp-color-surface);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-sm);
+    color: var(--bp-color-text-muted);
+    cursor: pointer;
+    transition:
+      background-color var(--bp-transition-fast),
+      color var(--bp-transition-fast);
+  }
+
+  .eyedropper-button:hover:not(:disabled) {
+    background-color: var(--bp-color-surface-subdued);
+    color: var(--bp-color-text);
+  }
+
+  .eyedropper-button:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .eyedropper-button:disabled {
+    cursor: not-allowed;
+  }
+
+  .eyedropper-button svg {
+    width: var(--bp-spacing-lg);
+    height: var(--bp-spacing-lg);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Swatches
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .swatches-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--bp-spacing-xs);
+    padding-top: var(--bp-spacing-sm);
+    border-top: var(--bp-border-width) solid var(--bp-color-border);
+  }
+
+  .swatch {
+    width: var(--color-picker-swatch-size);
+    height: var(--color-picker-swatch-size);
+    padding: 0;
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-sm);
+    cursor: pointer;
+    transition: transform var(--bp-transition-fast);
+  }
+
+  .swatch:hover:not(:disabled) {
+    transform: scale(1.1);
+  }
+
+  .swatch:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .swatch:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Sizes
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  .color-picker--sm .trigger {
+    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .color-picker--sm .trigger-swatch {
+    width: var(--bp-spacing-lg);
+    height: var(--bp-spacing-lg);
+  }
+
+  .color-picker--lg .trigger {
+    padding: var(--bp-spacing-md) var(--bp-spacing-lg);
+    font-size: var(--bp-font-size-lg);
+  }
+
+  .color-picker--lg .trigger-swatch {
+    width: var(--bp-spacing-xl);
+    height: var(--bp-spacing-xl);
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * Reduced Motion
+   * ───────────────────────────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    @keyframes fadeIn {
+      from,
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .trigger,
+    .format-toggle,
+    .eyedropper-button,
+    .swatch,
+    .color-input {
+      transition: none;
+    }
+  }
+`;
+function g(t) {
+  return t ? (t = t.trim().toLowerCase(), t.startsWith("#") ? M(t) : t.startsWith("rgb") ? A(t) : t.startsWith("hsl") ? S(t) : null) : null;
+}
+function M(t) {
+  t = t.replace("#", "");
+  let e, r, a, i = 1;
+  if (t.length === 3)
+    e = parseInt(t[0] + t[0], 16), r = parseInt(t[1] + t[1], 16), a = parseInt(t[2] + t[2], 16);
+  else if (t.length === 4)
+    e = parseInt(t[0] + t[0], 16), r = parseInt(t[1] + t[1], 16), a = parseInt(t[2] + t[2], 16), i = parseInt(t[3] + t[3], 16) / 255;
+  else if (t.length === 6)
+    e = parseInt(t.substring(0, 2), 16), r = parseInt(t.substring(2, 4), 16), a = parseInt(t.substring(4, 6), 16);
+  else if (t.length === 8)
+    e = parseInt(t.substring(0, 2), 16), r = parseInt(t.substring(2, 4), 16), a = parseInt(t.substring(4, 6), 16), i = parseInt(t.substring(6, 8), 16) / 255;
+  else
+    return null;
+  return isNaN(e) || isNaN(r) || isNaN(a) || isNaN(i) ? null : w({ r: e, g: r, b: a, a: i });
+}
+function A(t) {
+  const e = t.match(
+    /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/
+  );
+  if (!e) return null;
+  const r = parseInt(e[1], 10), a = parseInt(e[2], 10), i = parseInt(e[3], 10), n = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+  return w({ r, g: a, b: i, a: n });
+}
+function S(t) {
+  const e = t.match(
+    /hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%?\s*,\s*([\d.]+)%?\s*(?:,\s*([\d.]+))?\s*\)/
+  );
+  if (!e) return null;
+  const r = parseFloat(e[1]), a = parseFloat(e[2]), i = parseFloat(e[3]), n = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+  return P({ h: r, s: a, l: i, a: n });
+}
+function w(t) {
+  const e = t.r / 255, r = t.g / 255, a = t.b / 255, i = Math.max(e, r, a), n = Math.min(e, r, a), h = i - n;
+  let p = 0;
+  const d = i === 0 ? 0 : h / i * 100, b = i * 100;
+  return h !== 0 && (i === e ? p = 60 * ((r - a) / h % 6) : i === r ? p = 60 * ((a - e) / h + 2) : p = 60 * ((e - r) / h + 4)), p < 0 && (p += 360), { h: p, s: d, v: b, a: t.a };
+}
+function v(t) {
+  const e = t.h, r = t.s / 100, a = t.v / 100, i = a * r, n = i * (1 - Math.abs(e / 60 % 2 - 1)), h = a - i;
+  let p = 0, d = 0, b = 0;
+  return e >= 0 && e < 60 ? (p = i, d = n, b = 0) : e >= 60 && e < 120 ? (p = n, d = i, b = 0) : e >= 120 && e < 180 ? (p = 0, d = i, b = n) : e >= 180 && e < 240 ? (p = 0, d = n, b = i) : e >= 240 && e < 300 ? (p = n, d = 0, b = i) : (p = i, d = 0, b = n), {
+    r: Math.round((p + h) * 255),
+    g: Math.round((d + h) * 255),
+    b: Math.round((b + h) * 255),
+    a: t.a
+  };
+}
+function P(t) {
+  const e = t.h, r = t.s / 100, a = t.l / 100, i = a + r * Math.min(a, 1 - a), n = i === 0 ? 0 : 2 * (1 - a / i);
+  return { h: e, s: n * 100, v: i * 100, a: t.a };
+}
+function _(t) {
+  const e = t.h, r = t.s / 100, a = t.v / 100, i = a * (1 - r / 2), n = i === 0 || i === 1 ? 0 : (a - i) / Math.min(i, 1 - i);
+  return { h: e, s: n * 100, l: i * 100, a: t.a };
+}
+function y(t) {
+  return Math.round(t * 100) / 100;
+}
+function H(t, e, r) {
+  const a = v(t), i = _(t);
+  switch (e) {
+    case "rgb":
+      return r && t.a < 1 ? `rgba(${a.r}, ${a.g}, ${a.b}, ${y(t.a)})` : `rgb(${a.r}, ${a.g}, ${a.b})`;
+    case "hsl":
+      return r && t.a < 1 ? `hsla(${Math.round(i.h)}, ${Math.round(i.s)}%, ${Math.round(i.l)}%, ${y(t.a)})` : `hsl(${Math.round(i.h)}, ${Math.round(i.s)}%, ${Math.round(i.l)}%)`;
+    default: {
+      const n = a.r.toString(16).padStart(2, "0"), h = a.g.toString(16).padStart(2, "0"), p = a.b.toString(16).padStart(2, "0");
+      if (r && t.a < 1) {
+        const d = Math.round(t.a * 255).toString(16).padStart(2, "0");
+        return `#${n}${h}${p}${d}`;
+      }
+      return `#${n}${h}${p}`;
+    }
+  }
+}
+var D = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (t, e, r, a) => {
+  for (var i = a > 1 ? void 0 : a ? O(e, r) : e, n = t.length - 1, h; n >= 0; n--)
+    (h = t[n]) && (i = (a ? h(e, r, i) : h(i)) || i);
+  return a && i && D(e, r, i), i;
+};
+let s = class extends x {
+  constructor() {
+    super(), this._open = !1, this._hsv = { h: 0, s: 0, v: 0, a: 1 }, this._originalValue = "", this._eyedropperSupported = !1, this._inputMode = "hex", this._hexInputValue = "", this._isPickingColor = !1, this._isDraggingArea = !1, this._isDraggingHue = !1, this._isDraggingAlpha = !1, this._handleOutsideClick = (t) => {
+      t.composedPath().includes(this) || this._close();
+    }, this._handleEscapeKey = (t) => {
+      t.key === "Escape" && (this.value = this._originalValue, this._parseValue(this._originalValue), this._hexInputValue = this._formatOutput("hex"), this._close());
+    }, this.value = "#000000", this.format = "hex", this.alpha = !0, this.swatches = [], this.inline = !1, this.disabled = !1, this.readonly = !1, this.size = "md", this.label = "", this.name = "", this.placeholder = "";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._eyedropperSupported = "EyeDropper" in window, this._parseValue(this.value), this._hexInputValue = this._formatOutput("hex"), this._inputMode = this.format;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._removeGlobalListeners();
+  }
+  willUpdate(t) {
+    t.has("value") && !this._isDragging() && (this._parseValue(this.value), this._hexInputValue = this._formatOutput("hex")), t.has("format") && (this._inputMode = this.format);
+  }
+  _isDragging() {
+    return this._isDraggingArea || this._isDraggingHue || this._isDraggingAlpha;
+  }
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Color Parsing & Conversion
+  // ─────────────────────────────────────────────────────────────────────────────
+  /**
+   * Parses a color value string and updates internal HSV state
+   * @param value Color string in hex, rgb, or hsl format
+   */
+  _parseValue(t) {
+    const e = g(t);
+    e && (this._hsv = e);
+  }
+  /**
+   * Formats the current HSV color to the specified output format
+   * @param format Output format (hex, rgb, or hsl), defaults to this.format
+   * @returns Formatted color string
+   */
+  _formatOutput(t = this.format) {
+    return H(this._hsv, t, this.alpha);
+  }
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Event Handlers
+  // ─────────────────────────────────────────────────────────────────────────────
+  /**
+   * Handles click events on the trigger button
+   * Toggles the picker popover open/closed state
+   */
+  _handleTriggerClick() {
+    this.disabled || this.readonly || this._toggleOpen();
+  }
+  /**
+   * Handles keyboard events on the trigger button
+   * Opens picker on Enter or Space key
+   * @param event Keyboard event
+   */
+  _handleTriggerKeydown(t) {
+    this.disabled || this.readonly || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._toggleOpen());
+  }
+  /**
+   * Toggles the picker popover between open and closed states
+   * Saves original value when opening and emits bp-open/bp-close events
+   */
+  _toggleOpen() {
+    this._open ? this._close() : (this._open = !0, this._originalValue = this.value, this.dispatchEvent(
+      new CustomEvent("bp-open", { bubbles: !0, composed: !0 })
+    ), this._addGlobalListeners());
+  }
+  /**
+   * Closes the picker popover
+   * Removes global event listeners and emits bp-close event
+   */
+  _close() {
+    this._open = !1, this._removeGlobalListeners(), this.dispatchEvent(
+      new CustomEvent("bp-close", { bubbles: !0, composed: !0 })
+    );
+  }
+  /**
+   * Adds global document event listeners for outside clicks and escape key
+   * Used when picker popover is open
+   */
+  _addGlobalListeners() {
+    document.addEventListener("click", this._handleOutsideClick), document.addEventListener("keydown", this._handleEscapeKey);
+  }
+  /**
+   * Removes global document event listeners
+   * Called when picker popover is closed
+   */
+  _removeGlobalListeners() {
+    document.removeEventListener("click", this._handleOutsideClick), document.removeEventListener("keydown", this._handleEscapeKey);
+  }
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Color Area Handlers
+  // ─────────────────────────────────────────────────────────────────────────────
+  /**
+   * Handles pointer down events on the color area
+   * Starts saturation/value drag interaction
+   * @param event Pointer event
+   */
+  _handleColorAreaPointerDown(t) {
+    this.disabled || this.readonly || (t.preventDefault(), this._isDraggingArea = !0, this._colorArea.setPointerCapture(t.pointerId), this._updateColorFromPointer(t));
+  }
+  /**
+   * Handles pointer move events on the color area during drag
+   * Updates color based on pointer position
+   * @param event Pointer event
+   */
+  _handleColorAreaPointerMove(t) {
+    this._isDraggingArea && this._updateColorFromPointer(t);
+  }
+  /**
+   * Handles pointer up events on the color area
+   * Ends drag interaction and emits change event
+   * @param event Pointer event
+   */
+  _handleColorAreaPointerUp(t) {
+    this._isDraggingArea && (this._isDraggingArea = !1, this._colorArea.releasePointerCapture(t.pointerId), this._emitChange());
+  }
+  /**
+   * Updates color saturation and value based on pointer position in color area
+   * @param event Pointer event with clientX/clientY coordinates
+   */
+  _updateColorFromPointer(t) {
+    const e = this._colorArea.getBoundingClientRect(), r = Math.max(0, Math.min(t.clientX - e.left, e.width)), a = Math.max(0, Math.min(t.clientY - e.top, e.height));
+    this._hsv = {
+      ...this._hsv,
+      s: r / e.width * 100,
+      v: 100 - a / e.height * 100
+    }, this._hexInputValue = this._formatOutput("hex"), this._emitInput();
+  }
+  /**
+   * Handles keyboard navigation on the color area
+   * Arrow keys adjust saturation/value, Shift increases step size
+   * @param event Keyboard event
+   */
+  _handleColorAreaKeydown(t) {
+    if (this.disabled || this.readonly) return;
+    const e = t.shiftKey ? 10 : 1;
+    let r = !1;
+    switch (t.key) {
+      case "ArrowRight":
+        this._hsv = { ...this._hsv, s: Math.min(100, this._hsv.s + e) }, r = !0;
+        break;
+      case "ArrowLeft":
+        this._hsv = { ...this._hsv, s: Math.max(0, this._hsv.s - e) }, r = !0;
+        break;
+      case "ArrowUp":
+        this._hsv = { ...this._hsv, v: Math.min(100, this._hsv.v + e) }, r = !0;
+        break;
+      case "ArrowDown":
+        this._hsv = { ...this._hsv, v: Math.max(0, this._hsv.v - e) }, r = !0;
+        break;
+      case "Home":
+        this._hsv = { ...this._hsv, s: 0 }, r = !0;
+        break;
+      case "End":
+        this._hsv = { ...this._hsv, s: 100 }, r = !0;
+        break;
+    }
+    r && (t.preventDefault(), this._hexInputValue = this._formatOutput("hex"), this._emitInput(), this._emitChange());
+  }
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Hue Slider Handlers
+  // ─────────────────────────────────────────────────────────────────────────────
+  /**
+   * Handles pointer down events on the hue slider
+   * Starts hue drag interaction
+   * @param event Pointer event
+   */
+  _handleHuePointerDown(t) {
+    this.disabled || this.readonly || (t.preventDefault(), this._isDraggingHue = !0, this._hueSlider.setPointerCapture(t.pointerId), this._updateHueFromPointer(t));
+  }
+  /**
+   * Handles pointer move events on the hue slider during drag
+   * Updates hue based on pointer position
+   * @param event Pointer event
+   */
+  _handleHuePointerMove(t) {
+    this._isDraggingHue && this._updateHueFromPointer(t);
+  }
+  /**
+   * Handles pointer up events on the hue slider
+   * Ends drag interaction and emits change event
+   * @param event Pointer event
+   */
+  _handleHuePointerUp(t) {
+    this._isDraggingHue && (this._isDraggingHue = !1, this._hueSlider.releasePointerCapture(t.pointerId), this._emitChange());
+  }
+  /**
+   * Updates hue based on pointer position in hue slider
+   * @param event Pointer event with clientY coordinate
+   */
+  _updateHueFromPointer(t) {
+    const e = this._hueSlider.getBoundingClientRect(), a = Math.max(0, Math.min(t.clientY - e.top, e.height)) / e.height * 360;
+    this._hsv = { ...this._hsv, h: a }, this._hexInputValue = this._formatOutput("hex"), this._emitInput();
+  }
+  /**
+   * Handles keyboard navigation on the hue slider
+   * Arrow keys adjust hue, Shift increases step size
+   * @param event Keyboard event
+   */
+  _handleHueKeydown(t) {
+    if (this.disabled || this.readonly) return;
+    const e = t.shiftKey ? 10 : 1;
+    let r = !1;
+    switch (t.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        this._hsv = { ...this._hsv, h: (this._hsv.h + e) % 360 }, r = !0;
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        this._hsv = { ...this._hsv, h: (this._hsv.h - e + 360) % 360 }, r = !0;
+        break;
+      case "Home":
+        this._hsv = { ...this._hsv, h: 0 }, r = !0;
+        break;
+      case "End":
+        this._hsv = { ...this._hsv, h: 359 }, r = !0;
+        break;
+    }
+    r && (t.preventDefault(), this._hexInputValue = this._formatOutput("hex"), this._emitInput(), this._emitChange());
+  }
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Alpha Slider Handlers
+  // ─────────────────────────────────────────────────────────────────────────────
+  /**
+   * Handles pointer down events on the alpha slider
+   * Starts alpha drag interaction
+   * @param event Pointer event
+   */
+  _handleAlphaPointerDown(t) {
+    this.disabled || this.readonly || (t.preventDefault(), this._isDraggingAlpha = !0, this._alphaSlider.setPointerCapture(t.pointerId), this._updateAlphaFromPointer(t));
+  }
+  /**
+   * Handles pointer move events on the alpha slider during drag
+   * Updates alpha based on pointer position
+   * @param event Pointer event
+   */
+  _handleAlphaPointerMove(t) {
+    this._isDraggingAlpha && this._updateAlphaFromPointer(t);
+  }
+  /**
+   * Handles pointer up events on the alpha slider
+   * Ends drag interaction and emits change event
+   * @param event Pointer event
+   */
+  _handleAlphaPointerUp(t) {
+    this._isDraggingAlpha && (this._isDraggingAlpha = !1, this._alphaSlider.releasePointerCapture(t.pointerId), this._emitChange());
+  }
+  /**
+   * Updates alpha based on pointer position in alpha slider
+   * @param event Pointer event with clientX coordinate
+   */
+  _updateAlphaFromPointer(t) {
+    const e = this._alphaSlider.getBoundingClientRect(), a = Math.max(0, Math.min(t.clientX - e.left, e.width)) / e.width;
+    this._hsv = { ...this._hsv, a }, this._hexInputValue = this._formatOutput("hex"), this._emitInput();
+  }
+  /**
+   * Handles keyboard navigation on the alpha slider
+   * Arrow keys adjust alpha, Shift increases step size
+   * @param event Keyboard event
+   */
+  _handleAlphaKeydown(t) {
+    if (this.disabled || this.readonly) return;
+    const e = t.shiftKey ? 0.1 : 0.01;
+    let r = !1;
+    switch (t.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        this._hsv = { ...this._hsv, a: Math.min(1, this._hsv.a + e) }, r = !0;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        this._hsv = { ...this._hsv, a: Math.max(0, this._hsv.a - e) }, r = !0;
+        break;
+      case "Home":
+        this._hsv = { ...this._hsv, a: 0 }, r = !0;
+        break;
+      case "End":
+        this._hsv = { ...this._hsv, a: 1 }, r = !0;
+        break;
+    }
+    r && (t.preventDefault(), this._hexInputValue = this._formatOutput("hex"), this._emitInput(), this._emitChange());
+  }
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Input Handlers
+  // ─────────────────────────────────────────────────────────────────────────────
+  /**
+   * Handles input events on the hex input field
+   * Updates controlled input value
+   * @param event Input event
+   */
+  _handleHexInput(t) {
+    const e = t.target;
+    this._hexInputValue = e.value;
+  }
+  /**
+   * Handles change events on the hex input field
+   * Parses and applies hex color value, adds # prefix if missing
+   * @param event Change event
+   */
+  _handleHexChange(t) {
+    let r = t.target.value.trim();
+    r && !r.startsWith("#") && (r = "#" + r);
+    const a = g(r);
+    a ? (this._hsv = a, this._hexInputValue = this._formatOutput("hex"), this._emitInput(), this._emitChange()) : this._hexInputValue = this._formatOutput("hex");
+  }
+  /**
+   * Handles input events on RGB channel inputs
+   * Updates color based on red, green, or blue channel value
+   * @param channel RGB channel to update ('r', 'g', or 'b')
+   * @param event Input event
+   */
+  _handleRgbInput(t, e) {
+    const r = e.target, a = Math.max(0, Math.min(255, parseInt(r.value, 10) || 0)), i = v(this._hsv);
+    i[t] = a, this._hsv = g(`rgba(${i.r}, ${i.g}, ${i.b}, ${i.a})`), this._hexInputValue = this._formatOutput("hex"), this._emitInput();
+  }
+  /**
+   * Handles change events on RGB inputs
+   * Emits bp-change event
+   */
+  _handleRgbChange() {
+    this._emitChange();
+  }
+  /**
+   * Handles input events on HSL channel inputs
+   * Updates color based on hue, saturation, or lightness value
+   * @param channel HSL channel to update ('h', 's', or 'l')
+   * @param event Input event
+   */
+  _handleHslInput(t, e) {
+    const r = e.target, a = _(this._hsv);
+    t === "h" ? a.h = Math.max(0, Math.min(360, parseInt(r.value, 10) || 0)) : a[t] = Math.max(0, Math.min(100, parseInt(r.value, 10) || 0)), this._hsv = g(`hsla(${a.h}, ${a.s}%, ${a.l}%, ${a.a})`), this._hexInputValue = this._formatOutput("hex"), this._emitInput();
+  }
+  /**
+   * Handles change events on HSL inputs
+   * Emits bp-change event
+   */
+  _handleHslChange() {
+    this._emitChange();
+  }
+  /**
+   * Handles input events on the alpha percentage input
+   * Updates alpha channel (0-100%)
+   * @param event Input event
+   */
+  _handleAlphaInput(t) {
+    const e = t.target, r = Math.max(0, Math.min(100, parseInt(e.value, 10) || 0));
+    this._hsv = { ...this._hsv, a: r / 100 }, this._hexInputValue = this._formatOutput("hex"), this._emitInput();
+  }
+  /**
+   * Handles change events on alpha input
+   * Emits bp-change event
+   */
+  _handleAlphaInputChange() {
+    this._emitChange();
+  }
+  /**
+   * Handles format toggle button click
+   * Cycles through hex → rgb → hsl input modes
+   */
+  _handleFormatToggle() {
+    const t = ["hex", "rgb", "hsl"], e = t.indexOf(this._inputMode);
+    this._inputMode = t[(e + 1) % t.length];
+  }
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Swatch Handlers
+  // ─────────────────────────────────────────────────────────────────────────────
+  /**
+   * Handles click events on predefined color swatches
+   * Updates color to the swatch value
+   * @param color Color string to apply
+   */
+  _handleSwatchClick(t) {
+    if (this.disabled || this.readonly) return;
+    const e = g(t);
+    e && (this._hsv = e, this._hexInputValue = this._formatOutput("hex"), this._emitInput(), this._emitChange());
+  }
+  /**
+   * Handles keyboard events on swatch elements
+   * Activates swatch on Enter or Space key
+   * @param color Color string to apply
+   * @param event Keyboard event
+   */
+  _handleSwatchKeydown(t, e) {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._handleSwatchClick(t));
+  }
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Eyedropper
+  // ─────────────────────────────────────────────────────────────────────────────
+  /**
+   * Handles eyedropper button click
+   * Opens native EyeDropper API to pick color from screen
+   * Only available in browsers that support the EyeDropper API
+   */
+  async _handleEyedropper() {
+    if (!(!this._eyedropperSupported || this.disabled || this.readonly)) {
+      this._isPickingColor = !0;
+      try {
+        const e = await new EyeDropper().open();
+        if (e.sRGBHex) {
+          const r = g(e.sRGBHex);
+          r && (this._hsv = r, this._hexInputValue = this._formatOutput("hex"), this._emitInput(), this._emitChange());
+        }
+      } catch {
+      } finally {
+        this._isPickingColor = !1;
+      }
+    }
+  }
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Event Emission
+  // ─────────────────────────────────────────────────────────────────────────────
+  /**
+   * Emits bp-input event with current formatted color value
+   * Fired during live color updates (dragging, typing)
+   */
+  _emitInput() {
+    const t = this._formatOutput();
+    this.dispatchEvent(
+      new CustomEvent("bp-input", {
+        detail: { value: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /**
+   * Emits bp-change event and updates the value property
+   * Fired on blur/confirm actions (drag end, input blur)
+   */
+  _emitChange() {
+    const t = this._formatOutput();
+    this.value = t, this.dispatchEvent(
+      new CustomEvent("bp-change", {
+        detail: { value: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Rendering
+  // ─────────────────────────────────────────────────────────────────────────────
+  /**
+   * Renders the 2D color area for saturation and value selection
+   * @returns TemplateResult for color area with draggable handle
+   */
+  _renderColorArea() {
+    const t = `hsl(${this._hsv.h}, 100%, 50%)`, e = this._hsv.s, r = 100 - this._hsv.v;
+    return l`
+      <div
+        class="color-area"
+        part="color-area"
+        role="slider"
+        tabindex="${this.disabled ? -1 : 0}"
+        aria-label="Color selection"
+        aria-valuetext="Saturation ${Math.round(
+      this._hsv.s
+    )}%, Brightness ${Math.round(this._hsv.v)}%"
+        style="--hue-color: ${t}"
+        @pointerdown=${this._handleColorAreaPointerDown}
+        @pointermove=${this._handleColorAreaPointerMove}
+        @pointerup=${this._handleColorAreaPointerUp}
+        @keydown=${this._handleColorAreaKeydown}
+      >
+        <div
+          class="color-area-handle"
+          style="left: ${e}%; top: ${r}%"
+        ></div>
+      </div>
+    `;
+  }
+  /**
+   * Renders the vertical hue slider (0-360 degrees)
+   * @returns TemplateResult for hue slider with draggable handle
+   */
+  _renderHueSlider() {
+    const t = this._hsv.h / 360 * 100;
+    return l`
+      <div
+        class="hue-slider"
+        part="hue-slider"
+        role="slider"
+        tabindex="${this.disabled ? -1 : 0}"
+        aria-label="Hue"
+        aria-valuenow="${Math.round(this._hsv.h)}"
+        aria-valuemin="0"
+        aria-valuemax="360"
+        @pointerdown=${this._handleHuePointerDown}
+        @pointermove=${this._handleHuePointerMove}
+        @pointerup=${this._handleHuePointerUp}
+        @keydown=${this._handleHueKeydown}
+      >
+        <div class="hue-slider-handle" style="top: ${t}%"></div>
+      </div>
+    `;
+  }
+  /**
+   * Renders the horizontal alpha slider (0-100%)
+   * Only shown when alpha property is true
+   * @returns TemplateResult for alpha slider or nothing
+   */
+  _renderAlphaSlider() {
+    if (!this.alpha) return c;
+    const t = v(this._hsv), e = `rgba(${t.r}, ${t.g}, ${t.b}, 0)`, r = `rgba(${t.r}, ${t.g}, ${t.b}, 1)`, a = this._hsv.a * 100;
+    return l`
+      <div
+        class="alpha-slider"
+        part="alpha-slider"
+        role="slider"
+        tabindex="${this.disabled ? -1 : 0}"
+        aria-label="Opacity"
+        aria-valuenow="${Math.round(this._hsv.a * 100)}"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        style="--alpha-gradient: linear-gradient(to right, ${e}, ${r})"
+        @pointerdown=${this._handleAlphaPointerDown}
+        @pointermove=${this._handleAlphaPointerMove}
+        @pointerup=${this._handleAlphaPointerUp}
+        @keydown=${this._handleAlphaKeydown}
+      >
+        <div class="alpha-slider-handle" style="left: ${a}%"></div>
+      </div>
+    `;
+  }
+  /**
+   * Renders the color preview showing original and current colors
+   * Displays side-by-side comparison with checkerboard background for transparency
+   * @returns TemplateResult for preview swatches
+   */
+  _renderPreview() {
+    const t = v(this._hsv), e = `rgba(${t.r}, ${t.g}, ${t.b}, ${this._hsv.a})`, r = g(this._originalValue), a = r ? (() => {
+      const i = v(r);
+      return `rgba(${i.r}, ${i.g}, ${i.b}, ${r.a})`;
+    })() : e;
+    return l`
+      <div class="preview" part="preview">
+        <div
+          class="preview-swatch preview-original"
+          style="background: ${a}"
+          title="Original color"
+          aria-label="Original color"
+        ></div>
+        <div
+          class="preview-swatch preview-current"
+          style="background: ${e}"
+          title="Current color"
+          aria-label="Current color"
+        ></div>
+      </div>
+    `;
+  }
+  /**
+   * Renders the hex color input field
+   * @returns TemplateResult for hex input group
+   */
+  _renderHexInput() {
+    return l`
+      <div class="input-group">
+        <input
+          type="text"
+          class="color-input hex-input"
+          part="input"
+          .value=${this._hexInputValue}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          @input=${this._handleHexInput}
+          @change=${this._handleHexChange}
+          aria-label="Hex color value"
+        />
+        <span class="input-label">HEX</span>
+      </div>
+    `;
+  }
+  /**
+   * Renders RGB color input fields (R, G, B, and optionally A)
+   * @returns TemplateResult for RGB input row
+   */
+  _renderRgbInputs() {
+    const t = v(this._hsv);
+    return l`
+      <div class="input-row">
+        <div class="input-group">
+          <input
+            type="number"
+            class="color-input"
+            part="input"
+            min="0"
+            max="255"
+            .value=${String(t.r)}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @input=${(e) => this._handleRgbInput("r", e)}
+            @change=${this._handleRgbChange}
+            aria-label="Red"
+          />
+          <span class="input-label">R</span>
+        </div>
+        <div class="input-group">
+          <input
+            type="number"
+            class="color-input"
+            part="input"
+            min="0"
+            max="255"
+            .value=${String(t.g)}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @input=${(e) => this._handleRgbInput("g", e)}
+            @change=${this._handleRgbChange}
+            aria-label="Green"
+          />
+          <span class="input-label">G</span>
+        </div>
+        <div class="input-group">
+          <input
+            type="number"
+            class="color-input"
+            part="input"
+            min="0"
+            max="255"
+            .value=${String(t.b)}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @input=${(e) => this._handleRgbInput("b", e)}
+            @change=${this._handleRgbChange}
+            aria-label="Blue"
+          />
+          <span class="input-label">B</span>
+        </div>
+        ${this.alpha ? l`
+              <div class="input-group">
+                <input
+                  type="number"
+                  class="color-input"
+                  part="input"
+                  min="0"
+                  max="100"
+                  .value=${String(Math.round(this._hsv.a * 100))}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  @input=${this._handleAlphaInput}
+                  @change=${this._handleAlphaInputChange}
+                  aria-label="Alpha"
+                />
+                <span class="input-label">A</span>
+              </div>
+            ` : c}
+      </div>
+    `;
+  }
+  /**
+   * Renders HSL color input fields (H, S, L, and optionally A)
+   * @returns TemplateResult for HSL input row
+   */
+  _renderHslInputs() {
+    const t = _(this._hsv);
+    return l`
+      <div class="input-row">
+        <div class="input-group">
+          <input
+            type="number"
+            class="color-input"
+            part="input"
+            min="0"
+            max="360"
+            .value=${String(Math.round(t.h))}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @input=${(e) => this._handleHslInput("h", e)}
+            @change=${this._handleHslChange}
+            aria-label="Hue"
+          />
+          <span class="input-label">H</span>
+        </div>
+        <div class="input-group">
+          <input
+            type="number"
+            class="color-input"
+            part="input"
+            min="0"
+            max="100"
+            .value=${String(Math.round(t.s))}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @input=${(e) => this._handleHslInput("s", e)}
+            @change=${this._handleHslChange}
+            aria-label="Saturation"
+          />
+          <span class="input-label">S</span>
+        </div>
+        <div class="input-group">
+          <input
+            type="number"
+            class="color-input"
+            part="input"
+            min="0"
+            max="100"
+            .value=${String(Math.round(t.l))}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @input=${(e) => this._handleHslInput("l", e)}
+            @change=${this._handleHslChange}
+            aria-label="Lightness"
+          />
+          <span class="input-label">L</span>
+        </div>
+        ${this.alpha ? l`
+              <div class="input-group">
+                <input
+                  type="number"
+                  class="color-input"
+                  part="input"
+                  min="0"
+                  max="100"
+                  .value=${String(Math.round(this._hsv.a * 100))}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  @input=${this._handleAlphaInput}
+                  @change=${this._handleAlphaInputChange}
+                  aria-label="Alpha"
+                />
+                <span class="input-label">A</span>
+              </div>
+            ` : c}
+      </div>
+    `;
+  }
+  /**
+   * Renders the input controls container with format toggle button
+   * Shows hex, rgb, or hsl inputs based on current input mode
+   * @returns TemplateResult for inputs container
+   */
+  _renderInputs() {
+    return l`
+      <div class="inputs-container">
+        ${this._inputMode === "hex" ? this._renderHexInput() : c}
+        ${this._inputMode === "rgb" ? this._renderRgbInputs() : c}
+        ${this._inputMode === "hsl" ? this._renderHslInputs() : c}
+        <button
+          type="button"
+          class="format-toggle"
+          @click=${this._handleFormatToggle}
+          ?disabled=${this.disabled}
+          aria-label="Cycle color format (${this._inputMode.toUpperCase()})"
+          title="Cycle color format"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path
+              d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"
+            />
+          </svg>
+        </button>
+      </div>
+    `;
+  }
+  /**
+   * Renders predefined color swatches
+   * Shows swatches from the swatches property or slotted content
+   * @returns TemplateResult for swatches container or nothing
+   */
+  _renderSwatches() {
+    const t = this.swatches.length > 0, e = this.querySelector('[slot="swatches"]') !== null;
+    return !t && !e ? c : l`
+      <div
+        class="swatches-container"
+        part="swatches"
+        role="listbox"
+        aria-label="Color swatches"
+      >
+        <slot name="swatches">
+          ${this.swatches.map(
+      (r) => l`
+              <button
+                type="button"
+                class="swatch"
+                part="swatch"
+                role="option"
+                style="background: ${r}"
+                @click=${() => this._handleSwatchClick(r)}
+                @keydown=${(a) => this._handleSwatchKeydown(r, a)}
+                ?disabled=${this.disabled}
+                aria-label="${r}"
+              ></button>
+            `
+    )}
+        </slot>
+      </div>
+    `;
+  }
+  /**
+   * Renders the eyedropper button if API is supported
+   * @returns TemplateResult for eyedropper button or nothing
+   */
+  _renderEyedropper() {
+    return this._eyedropperSupported ? l`
+      <button
+        type="button"
+        class="eyedropper-button"
+        @click=${this._handleEyedropper}
+        ?disabled=${this.disabled || this.readonly || this._isPickingColor}
+        aria-label="Pick color from screen"
+        aria-busy="${this._isPickingColor}"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path d="M2 22l1-1h3l9-9m-3-3l3-3 5 5-3 3m-5-5l5 5M12.5 6.5l5 5" />
+        </svg>
+      </button>
+    ` : c;
+  }
+  /**
+   * Renders the complete color picker panel
+   * Includes color area, sliders, preview, inputs, and swatches
+   * @returns TemplateResult for picker panel
+   */
+  _renderPicker() {
+    return l`
+      <div
+        class="picker"
+        part="popover"
+        role="dialog"
+        aria-label="${this.label || "Color picker"}"
+      >
+        <div class="picker-body">
+          <div class="picker-main">
+            ${this._renderColorArea()} ${this._renderHueSlider()}
+          </div>
+          ${this._renderAlphaSlider()}
+          <div class="picker-controls">
+            ${this._renderPreview()} ${this._renderInputs()}
+            ${this._renderEyedropper()}
+          </div>
+          ${this._renderSwatches()}
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * Renders the trigger button to open the picker popover
+   * Shows current color swatch and optional label
+   * @returns TemplateResult for trigger button
+   */
+  _renderTrigger() {
+    const t = v(this._hsv), e = `rgba(${t.r}, ${t.g}, ${t.b}, ${this._hsv.a})`, r = this.label || this.placeholder;
+    return l`
+      <button
+        type="button"
+        class="trigger"
+        part="trigger"
+        role="button"
+        aria-haspopup="dialog"
+        aria-expanded="${this._open}"
+        aria-disabled="${this.disabled}"
+        tabindex="${this.disabled ? -1 : 0}"
+        ?disabled=${this.disabled}
+        @click=${this._handleTriggerClick}
+        @keydown=${this._handleTriggerKeydown}
+      >
+        <slot name="trigger">
+          <span
+            class="trigger-swatch"
+            style="background: ${e}"
+          ></span>
+          ${r ? l`<span class="trigger-label"
+                >${this.label || this.placeholder}</span
+              >` : c}
+        </slot>
+      </button>
+    `;
+  }
+  render() {
+    return this.inline ? this._renderPicker() : l`
+      <div class="color-picker color-picker--${this.size}">
+        ${this._renderTrigger()}
+        ${this._open ? l`
+              <div aria-live="polite" aria-atomic="true" class="sr-only">
+                Current color: ${this._formatOutput()}
+              </div>
+              ${this._renderPicker()}
+            ` : c}
+      </div>
+      ${this.name ? l`<input
+            type="hidden"
+            name="${this.name}"
+            .value=${this._formatOutput()}
+          />` : c}
+    `;
+  }
+};
+s.styles = [I];
+o([
+  u({ type: String })
+], s.prototype, "value", 2);
+o([
+  u({ type: String })
+], s.prototype, "format", 2);
+o([
+  u({ converter: C, reflect: !0 })
+], s.prototype, "alpha", 2);
+o([
+  u({ type: Array })
+], s.prototype, "swatches", 2);
+o([
+  u({ type: Boolean })
+], s.prototype, "inline", 2);
+o([
+  u({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+o([
+  u({ type: Boolean, reflect: !0 })
+], s.prototype, "readonly", 2);
+o([
+  u({ type: String, reflect: !0 })
+], s.prototype, "size", 2);
+o([
+  u({ type: String })
+], s.prototype, "label", 2);
+o([
+  u({ type: String })
+], s.prototype, "name", 2);
+o([
+  u({ type: String })
+], s.prototype, "placeholder", 2);
+o([
+  f()
+], s.prototype, "_open", 2);
+o([
+  f()
+], s.prototype, "_hsv", 2);
+o([
+  f()
+], s.prototype, "_originalValue", 2);
+o([
+  f()
+], s.prototype, "_eyedropperSupported", 2);
+o([
+  f()
+], s.prototype, "_inputMode", 2);
+o([
+  f()
+], s.prototype, "_hexInputValue", 2);
+o([
+  f()
+], s.prototype, "_isPickingColor", 2);
+o([
+  m(".color-area")
+], s.prototype, "_colorArea", 2);
+o([
+  m(".hue-slider")
+], s.prototype, "_hueSlider", 2);
+o([
+  m(".alpha-slider")
+], s.prototype, "_alphaSlider", 2);
+s = o([
+  k("bp-color-picker")
+], s);
+export {
+  s as BpColorPicker
+};
+//# sourceMappingURL=color-picker.js.map