@krollins/blueprint 0.2.2 → 0.3.0

package/dist/components/color-picker.js

@@ -1,1660 +1,2 @@
-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
+import { t as e } from "../shared/color-picker-C3-0c3_0.js";
+export { e as BpColorPicker };