@krollins/blueprint 0.2.3 → 0.3.0

package/dist/shared/color-picker-C3-0c3_0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-C3-0c3_0.js","names":["_decorate","__decorate","renderFieldMessage","fieldMessageStyles","fieldMessageState","booleanConverter","colorPickerStyles","parseColor","value","parseHex","parseRgb","parseHsl","hex","r","g","b","a","rgbToHsv","match","rgb","hsl","hslToHsv","max","delta","h","v","hsvToRgb","hsv","s","c","x","m","l","hsvToHsl","roundAlpha","formatColorOutput","format","includeAlpha","hexR","hexG","hexB","BpColorPicker","FormControlMixin","LitElement","event","changedProperties","parsed","rect","y","step","handled","hue","alpha","input","channel","formats","currentIndex","color","result","hueColor","handleX","handleY","nothing","colorStart","colorEnd","currentColor","originalHsv","originalColor","origRgb","hasSwatches","hasSlottedSwatches","e","hasLabel","invalid","describedBy","message","property","state","query","customElement"],"sources":["../../source/components/color-picker/color-picker.style.ts","../../source/components/color-picker/color-picker.utils.ts","../../source/components/color-picker/color-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Color Picker Styles\n *\n * INTENTIONAL HARDCODED VALUES (functional, not themed):\n * - Checkerboard pattern (#ccc) - standard transparency visualization\n * - Hue gradient (hsl spectrum) - must be actual hue colors\n * - White (#fff) handles - must contrast on any color background\n * - Black (#000) gradient - value gradient for color area\n * - Component dimensions (280px, 160px) - not semantic spacing\n *\n * All other values use design tokens.\n */\nexport const colorPickerStyles = css`\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Base Styles\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  :host {\n    /* Component-specific custom properties */\n    /* stylelint-disable blueprint/no-hardcoded-values */\n    --color-picker-width: 350px;\n    --color-picker-area-height: 160px;\n    --color-picker-swatch-size: var(--bp-spacing-lg);\n    --color-picker-handle-size: var(--bp-spacing-md);\n    /* stylelint-enable blueprint/no-hardcoded-values */\n\n    display: inline-block;\n    position: relative;\n    font-family: var(--bp-font-family);\n  }\n\n  :host([disabled]) {\n    opacity: var(--bp-opacity-disabled);\n    pointer-events: none;\n  }\n\n  .color-picker {\n    position: relative;\n  }\n\n  /* Screen reader only text */\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Trigger Button\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bp-spacing-sm);\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    background-color: var(--bp-color-surface);\n    border: var(--bp-border-width) solid var(--bp-color-input-border);\n    border-radius: var(--bp-border-radius-md);\n    cursor: pointer;\n    font-family: inherit;\n    font-size: var(--bp-font-size-base);\n    color: var(--bp-color-text);\n    transition:\n      border-color var(--bp-transition-fast),\n      box-shadow var(--bp-transition-fast);\n  }\n\n  .trigger:hover:not(:disabled) {\n    border-color: var(--bp-color-border-strong);\n  }\n\n  .trigger:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .trigger:disabled {\n    cursor: not-allowed;\n  }\n\n  .trigger-swatch {\n    display: block;\n    width: var(--color-picker-swatch-size);\n    height: var(--color-picker-swatch-size);\n    border-radius: var(--bp-border-radius-sm);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    /* Checkerboard pattern for transparency - functional, not themed */\n    /* stylelint-disable blueprint/no-hardcoded-values */\n    background-image:\n      linear-gradient(45deg, #ccc 25%, transparent 25%),\n      linear-gradient(-45deg, #ccc 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, #ccc 75%),\n      linear-gradient(-45deg, transparent 75%, #ccc 75%);\n    background-size: var(--bp-spacing-sm) var(--bp-spacing-sm);\n    background-position:\n      0 0,\n      0 calc(var(--bp-spacing-sm) / 2),\n      calc(var(--bp-spacing-sm) / 2) calc(var(--bp-spacing-sm) / -2),\n      calc(var(--bp-spacing-sm) / -2) 0;\n    /* stylelint-enable blueprint/no-hardcoded-values */\n    position: relative;\n  }\n\n  .trigger-swatch::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: inherit;\n    border-radius: inherit;\n  }\n\n  .trigger-label {\n    color: var(--bp-color-text);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Picker Panel\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .picker {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    margin-top: var(--bp-spacing-xs);\n    width: var(--color-picker-width);\n    background-color: var(--bp-color-surface-elevated);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-lg);\n    box-shadow: var(--bp-shadow-lg);\n    z-index: var(--bp-z-popover);\n    animation: fadeIn var(--bp-transition-fast) ease-out;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n      transform: translateY(calc(var(--bp-spacing-xs) * -1));\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  :host([inline]) .picker {\n    position: static;\n    margin-top: 0;\n    box-shadow: none;\n  }\n\n  .picker-body {\n    padding: var(--bp-spacing-md);\n    display: flex;\n    flex-direction: column;\n    gap: var(--bp-spacing-md);\n  }\n\n  .picker-main {\n    display: flex;\n    gap: var(--bp-spacing-sm);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Color Area (Saturation/Value)\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .color-area {\n    flex: 1;\n    height: var(--color-picker-area-height);\n    position: relative;\n    border-radius: var(--bp-border-radius-sm);\n    background: var(--hue-color);\n    cursor: crosshair;\n    touch-action: none;\n    user-select: none;\n  }\n\n  /* White-to-transparent and transparent-to-black gradients - functional for color picking */\n  /* stylelint-disable blueprint/no-hardcoded-values */\n  .color-area::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(to right, #fff, transparent);\n    border-radius: inherit;\n  }\n\n  .color-area::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(to bottom, transparent, #000);\n    border-radius: inherit;\n  }\n  /* stylelint-enable blueprint/no-hardcoded-values */\n\n  .color-area:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  /* Slider handles use white borders for visibility on any color */\n  /* stylelint-disable blueprint/no-hardcoded-values -- white border for contrast on any hue */\n  .color-area-handle {\n    position: absolute;\n    width: var(--color-picker-handle-size);\n    height: var(--color-picker-handle-size);\n    border: var(--bp-border-width) solid #fff;\n    border-radius: 50%;\n    box-shadow: var(--bp-shadow-sm);\n    transform: translate(-50%, -50%);\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  /* Expand touch target to 44×44px minimum (WCAG 2.2) */\n  .color-area-handle::after {\n    content: '';\n    position: absolute;\n    /* 44px touch target with 12px visual handle = 16px padding each side */\n    inset: calc(var(--bp-spacing-lg) * -1);\n  }\n  /* stylelint-enable blueprint/no-hardcoded-values */\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Hue Slider\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .hue-slider {\n    width: var(--bp-spacing-lg);\n    height: var(--color-picker-area-height);\n    position: relative;\n    border-radius: var(--bp-border-radius-sm);\n    /* Full hue spectrum gradient - functional, not themed */\n    /* stylelint-disable blueprint/no-hardcoded-values */\n    background: linear-gradient(\n      to bottom,\n      hsl(0, 100%, 50%),\n      hsl(60, 100%, 50%),\n      hsl(120, 100%, 50%),\n      hsl(180, 100%, 50%),\n      hsl(240, 100%, 50%),\n      hsl(300, 100%, 50%),\n      hsl(360, 100%, 50%)\n    );\n    /* stylelint-enable blueprint/no-hardcoded-values */\n    cursor: pointer;\n    touch-action: none;\n    user-select: none;\n  }\n\n  .hue-slider:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  /* stylelint-disable blueprint/no-hardcoded-values -- white border for contrast on hue spectrum */\n  .hue-slider-handle {\n    position: absolute;\n    left: calc(var(--bp-spacing-xs) * -0.5);\n    right: calc(var(--bp-spacing-xs) * -0.5);\n    height: var(--bp-spacing-sm);\n    border: var(--bp-border-width) solid #fff;\n    border-radius: var(--bp-border-radius-sm);\n    box-shadow: var(--bp-shadow-sm);\n    transform: translateY(-50%);\n    pointer-events: none;\n  }\n\n  /* Expand touch target to 44×44px minimum (WCAG 2.2) */\n  .hue-slider-handle::after {\n    content: '';\n    position: absolute;\n    /* 44px touch target with 8px visual handle = 18px padding top/bottom */\n    top: calc(var(--bp-spacing-lg) * -2.25);\n    bottom: calc(var(--bp-spacing-lg) * -2.25);\n    left: 0;\n    right: 0;\n  }\n  /* stylelint-enable blueprint/no-hardcoded-values */\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Alpha Slider\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .alpha-slider {\n    height: var(--bp-spacing-md);\n    position: relative;\n    border-radius: var(--bp-border-radius-sm);\n    /* Checkerboard pattern for transparency - functional, not themed */\n    /* stylelint-disable blueprint/no-hardcoded-values */\n    background-image:\n      linear-gradient(45deg, #ccc 25%, transparent 25%),\n      linear-gradient(-45deg, #ccc 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, #ccc 75%),\n      linear-gradient(-45deg, transparent 75%, #ccc 75%);\n    background-size: var(--bp-spacing-sm) var(--bp-spacing-sm);\n    background-position:\n      0 0,\n      0 calc(var(--bp-spacing-sm) / 2),\n      calc(var(--bp-spacing-sm) / 2) calc(var(--bp-spacing-sm) / -2),\n      calc(var(--bp-spacing-sm) / -2) 0;\n    /* stylelint-enable blueprint/no-hardcoded-values */\n    cursor: pointer;\n    touch-action: none;\n    user-select: none;\n  }\n\n  .alpha-slider::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: var(--alpha-gradient);\n    border-radius: inherit;\n  }\n\n  .alpha-slider:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  /* stylelint-disable blueprint/no-hardcoded-values -- white border for contrast on alpha gradient */\n  .alpha-slider-handle {\n    position: absolute;\n    top: calc(var(--bp-spacing-xs) * -0.5);\n    bottom: calc(var(--bp-spacing-xs) * -0.5);\n    width: var(--bp-spacing-sm);\n    border: var(--bp-border-width) solid #fff;\n    border-radius: var(--bp-border-radius-sm);\n    box-shadow: var(--bp-shadow-sm);\n    transform: translateX(-50%);\n    pointer-events: none;\n  }\n\n  /* Expand touch target to 44×44px minimum (WCAG 2.2) */\n  .alpha-slider-handle::after {\n    content: '';\n    position: absolute;\n    /* 44px touch target with 8px visual handle = 18px padding left/right */\n    left: calc(var(--bp-spacing-lg) * -2.25);\n    right: calc(var(--bp-spacing-lg) * -2.25);\n    top: 0;\n    bottom: 0;\n  }\n  /* stylelint-enable blueprint/no-hardcoded-values */\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Controls Row\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .picker-controls {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--bp-spacing-sm);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Preview\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .preview {\n    display: flex;\n    flex-direction: column;\n    width: var(--bp-spacing-2xl);\n    height: var(--bp-spacing-2xl);\n    border-radius: var(--bp-border-radius-sm);\n    overflow: hidden;\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    /* Checkerboard pattern for transparency - functional, not themed */\n    /* stylelint-disable blueprint/no-hardcoded-values */\n    background-image:\n      linear-gradient(45deg, #ccc 25%, transparent 25%),\n      linear-gradient(-45deg, #ccc 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, #ccc 75%),\n      linear-gradient(-45deg, transparent 75%, #ccc 75%);\n    background-size: var(--bp-spacing-sm) var(--bp-spacing-sm);\n    background-position:\n      0 0,\n      0 calc(var(--bp-spacing-sm) / 2),\n      calc(var(--bp-spacing-sm) / 2) calc(var(--bp-spacing-sm) / -2),\n      calc(var(--bp-spacing-sm) / -2) 0;\n    /* stylelint-enable blueprint/no-hardcoded-values */\n  }\n\n  .preview-swatch {\n    flex: 1;\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Inputs\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .inputs-container {\n    flex: 1;\n    display: flex;\n    align-items: flex-start;\n    gap: var(--bp-spacing-xs);\n  }\n\n  .input-row {\n    display: flex;\n    gap: var(--bp-spacing-xs);\n    flex: 1;\n  }\n\n  .input-group {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: var(--bp-spacing-2xs);\n  }\n\n  .color-input {\n    width: 100%;\n    padding: var(--bp-spacing-xs);\n    font-family: var(--bp-font-family-mono);\n    font-size: var(--bp-font-size-sm);\n    background-color: var(--bp-color-surface);\n    border: var(--bp-border-width) solid var(--bp-color-input-border);\n    border-radius: var(--bp-border-radius-sm);\n    color: var(--bp-color-text);\n    text-align: center;\n    box-sizing: border-box;\n  }\n\n  .color-input:focus {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n    border-color: var(--bp-color-primary);\n  }\n\n  .color-input::-webkit-inner-spin-button,\n  .color-input::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  .color-input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  .hex-input {\n    text-transform: uppercase;\n  }\n\n  .input-label {\n    font-size: var(--bp-font-size-xs);\n    color: var(--bp-color-text-muted);\n    text-align: center;\n    text-transform: uppercase;\n  }\n\n  .format-toggle {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--bp-spacing-xl);\n    height: var(--bp-spacing-xl);\n    padding: 0;\n    margin-top: var(--bp-spacing-2xs);\n    background-color: var(--bp-color-surface);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-sm);\n    color: var(--bp-color-text-muted);\n    cursor: pointer;\n    transition:\n      background-color var(--bp-transition-fast),\n      color var(--bp-transition-fast);\n  }\n\n  .format-toggle:hover:not(:disabled) {\n    background-color: var(--bp-color-surface-subdued);\n    color: var(--bp-color-text);\n  }\n\n  .format-toggle:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .format-toggle svg {\n    width: var(--bp-spacing-md);\n    height: var(--bp-spacing-md);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Eyedropper\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .eyedropper-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--bp-spacing-2xl);\n    height: var(--bp-spacing-2xl);\n    padding: 0;\n    background-color: var(--bp-color-surface);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-sm);\n    color: var(--bp-color-text-muted);\n    cursor: pointer;\n    transition:\n      background-color var(--bp-transition-fast),\n      color var(--bp-transition-fast);\n  }\n\n  .eyedropper-button:hover:not(:disabled) {\n    background-color: var(--bp-color-surface-subdued);\n    color: var(--bp-color-text);\n  }\n\n  .eyedropper-button:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .eyedropper-button:disabled {\n    cursor: not-allowed;\n  }\n\n  .eyedropper-button svg {\n    width: var(--bp-spacing-lg);\n    height: var(--bp-spacing-lg);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Swatches\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .swatches-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--bp-spacing-xs);\n    padding-top: var(--bp-spacing-sm);\n    border-top: var(--bp-border-width) solid var(--bp-color-border);\n  }\n\n  .swatch {\n    width: var(--color-picker-swatch-size);\n    height: var(--color-picker-swatch-size);\n    padding: 0;\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-sm);\n    cursor: pointer;\n    transition: transform var(--bp-transition-fast);\n  }\n\n  .swatch:hover:not(:disabled) {\n    transform: scale(1.1);\n  }\n\n  .swatch:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .swatch:disabled {\n    cursor: not-allowed;\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Sizes\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .color-picker--sm .trigger {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .color-picker--sm .trigger-swatch {\n    width: var(--bp-spacing-lg);\n    height: var(--bp-spacing-lg);\n  }\n\n  .color-picker--lg .trigger {\n    padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    font-size: var(--bp-font-size-lg);\n  }\n\n  .color-picker--lg .trigger-swatch {\n    width: var(--bp-spacing-xl);\n    height: var(--bp-spacing-xl);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Reduced Motion\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    @keyframes fadeIn {\n      from,\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    .trigger,\n    .format-toggle,\n    .eyedropper-button,\n    .swatch,\n    .color-input {\n      transition: none;\n    }\n  }\n\n  /* Invalid: error border on the trigger */\n  .color-picker--invalid .trigger,\n  .color-picker--invalid .trigger:hover {\n    border-color: var(--bp-color-error);\n  }\n`;\n","/**\n * Color Picker Utilities\n *\n * Pure functions for color parsing, conversion, and formatting.\n * Supports HEX, RGB, HSL formats with alpha channel.\n */\n\n/**\n * Internal HSV color representation\n */\nexport interface HSVColor {\n  h: number; // 0-360\n  s: number; // 0-100\n  v: number; // 0-100\n  a: number; // 0-1\n}\n\n/**\n * RGB color representation\n */\nexport interface RGBColor {\n  r: number; // 0-255\n  g: number; // 0-255\n  b: number; // 0-255\n  a: number; // 0-1\n}\n\n/**\n * HSL color representation\n */\nexport interface HSLColor {\n  h: number; // 0-360\n  s: number; // 0-100\n  l: number; // 0-100\n  a: number; // 0-1\n}\n\n/**\n * Color output format\n */\nexport type ColorFormat = 'hex' | 'rgb' | 'hsl';\n\n/**\n * Parses a color string and returns HSV representation\n * @param value Color string in hex, rgb, or hsl format\n * @returns HSV color object or null if parsing fails\n */\nexport function parseColor(value: string): HSVColor | null {\n  if (!value) return null;\n\n  value = value.trim().toLowerCase();\n\n  // HEX format\n  if (value.startsWith('#')) {\n    return parseHex(value);\n  }\n\n  // RGB/RGBA format\n  if (value.startsWith('rgb')) {\n    return parseRgb(value);\n  }\n\n  // HSL/HSLA format\n  if (value.startsWith('hsl')) {\n    return parseHsl(value);\n  }\n\n  return null;\n}\n\n/**\n * Parses a hex color string to HSV\n * @param hex Hex color string (with or without #, 3/4/6/8 digits)\n * @returns HSV color object or null if invalid\n */\nexport function parseHex(hex: string): HSVColor | null {\n  hex = hex.replace('#', '');\n\n  let r: number,\n    g: number,\n    b: number,\n    a = 1;\n\n  if (hex.length === 3) {\n    r = parseInt(hex[0] + hex[0], 16);\n    g = parseInt(hex[1] + hex[1], 16);\n    b = parseInt(hex[2] + hex[2], 16);\n  } else if (hex.length === 4) {\n    r = parseInt(hex[0] + hex[0], 16);\n    g = parseInt(hex[1] + hex[1], 16);\n    b = parseInt(hex[2] + hex[2], 16);\n    a = parseInt(hex[3] + hex[3], 16) / 255;\n  } else if (hex.length === 6) {\n    r = parseInt(hex.substring(0, 2), 16);\n    g = parseInt(hex.substring(2, 4), 16);\n    b = parseInt(hex.substring(4, 6), 16);\n  } else if (hex.length === 8) {\n    r = parseInt(hex.substring(0, 2), 16);\n    g = parseInt(hex.substring(2, 4), 16);\n    b = parseInt(hex.substring(4, 6), 16);\n    a = parseInt(hex.substring(6, 8), 16) / 255;\n  } else {\n    return null;\n  }\n\n  if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) {\n    return null;\n  }\n\n  return rgbToHsv({ r, g, b, a });\n}\n\n/**\n * Parses an rgb/rgba color string to HSV\n * @param rgb RGB color string (e.g., 'rgb(255, 87, 51)' or 'rgba(255, 87, 51, 0.5)')\n * @returns HSV color object or null if invalid\n */\nexport function parseRgb(rgb: string): HSVColor | null {\n  const match = rgb.match(\n    /rgba?\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*(?:,\\s*([\\d.]+))?\\s*\\)/\n  );\n  if (!match) return null;\n\n  const r = parseInt(match[1], 10);\n  const g = parseInt(match[2], 10);\n  const b = parseInt(match[3], 10);\n  const a = match[4] !== undefined ? parseFloat(match[4]) : 1;\n\n  return rgbToHsv({ r, g, b, a });\n}\n\n/**\n * Parses an hsl/hsla color string to HSV\n * @param hsl HSL color string (e.g., 'hsl(14, 100%, 60%)' or 'hsla(14, 100%, 60%, 0.5)')\n * @returns HSV color object or null if invalid\n */\nexport function parseHsl(hsl: string): HSVColor | null {\n  const match = hsl.match(\n    /hsla?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)%?\\s*,\\s*([\\d.]+)%?\\s*(?:,\\s*([\\d.]+))?\\s*\\)/\n  );\n  if (!match) return null;\n\n  const h = parseFloat(match[1]);\n  const s = parseFloat(match[2]);\n  const l = parseFloat(match[3]);\n  const a = match[4] !== undefined ? parseFloat(match[4]) : 1;\n\n  return hslToHsv({ h, s, l, a });\n}\n\n/**\n * Converts RGB color to HSV color space\n * @param rgb RGB color object with r, g, b (0-255) and a (0-1)\n * @returns HSV color object with h (0-360), s (0-100), v (0-100), a (0-1)\n */\nexport function rgbToHsv(rgb: RGBColor): HSVColor {\n  const r = rgb.r / 255;\n  const g = rgb.g / 255;\n  const b = rgb.b / 255;\n\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  const delta = max - min;\n\n  let h = 0;\n  const s = max === 0 ? 0 : (delta / max) * 100;\n  const v = max * 100;\n\n  if (delta !== 0) {\n    if (max === r) {\n      h = 60 * (((g - b) / delta) % 6);\n    } else if (max === g) {\n      h = 60 * ((b - r) / delta + 2);\n    } else {\n      h = 60 * ((r - g) / delta + 4);\n    }\n  }\n\n  if (h < 0) h += 360;\n\n  return { h, s, v, a: rgb.a };\n}\n\n/**\n * Converts HSV color to RGB color space\n * @param hsv HSV color object with h (0-360), s (0-100), v (0-100), a (0-1)\n * @returns RGB color object with r, g, b (0-255) and a (0-1)\n */\nexport function hsvToRgb(hsv: HSVColor): RGBColor {\n  const h = hsv.h;\n  const s = hsv.s / 100;\n  const v = hsv.v / 100;\n\n  const c = v * s;\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n  const m = v - c;\n\n  let r: number, g: number, b: number;\n\n  if (h >= 0 && h < 60) {\n    r = c;\n    g = x;\n    b = 0;\n  } else if (h >= 60 && h < 120) {\n    r = x;\n    g = c;\n    b = 0;\n  } else if (h >= 120 && h < 180) {\n    r = 0;\n    g = c;\n    b = x;\n  } else if (h >= 180 && h < 240) {\n    r = 0;\n    g = x;\n    b = c;\n  } else if (h >= 240 && h < 300) {\n    r = x;\n    g = 0;\n    b = c;\n  } else {\n    r = c;\n    g = 0;\n    b = x;\n  }\n\n  return {\n    r: Math.round((r + m) * 255),\n    g: Math.round((g + m) * 255),\n    b: Math.round((b + m) * 255),\n    a: hsv.a,\n  };\n}\n\n/**\n * Converts HSL color to HSV color space\n * @param hsl HSL color object with h (0-360), s (0-100), l (0-100), a (0-1)\n * @returns HSV color object with h (0-360), s (0-100), v (0-100), a (0-1)\n */\nexport function hslToHsv(hsl: HSLColor): HSVColor {\n  const h = hsl.h;\n  const s = hsl.s / 100;\n  const l = hsl.l / 100;\n\n  const v = l + s * Math.min(l, 1 - l);\n  const sv = v === 0 ? 0 : 2 * (1 - l / v);\n\n  return { h, s: sv * 100, v: v * 100, a: hsl.a };\n}\n\n/**\n * Converts HSV color to HSL color space\n * @param hsv HSV color object with h (0-360), s (0-100), v (0-100), a (0-1)\n * @returns HSL color object with h (0-360), s (0-100), l (0-100), a (0-1)\n */\nexport function hsvToHsl(hsv: HSVColor): HSLColor {\n  const h = hsv.h;\n  const s = hsv.s / 100;\n  const v = hsv.v / 100;\n\n  const l = v * (1 - s / 2);\n  const sl = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);\n\n  return { h, s: sl * 100, l: l * 100, a: hsv.a };\n}\n\n/**\n * Rounds alpha value to 2 decimal places\n * @param a Alpha value (0-1)\n * @returns Rounded alpha value\n */\nexport function roundAlpha(a: number): number {\n  return Math.round(a * 100) / 100;\n}\n\n/**\n * Formats an HSV color to the specified output format\n * @param hsv HSV color object\n * @param format Output format (hex, rgb, or hsl)\n * @param includeAlpha Whether to include alpha channel in output\n * @returns Formatted color string\n */\nexport function formatColorOutput(\n  hsv: HSVColor,\n  format: ColorFormat,\n  includeAlpha: boolean\n): string {\n  const rgb = hsvToRgb(hsv);\n  const hsl = hsvToHsl(hsv);\n\n  switch (format) {\n    case 'rgb':\n      if (includeAlpha && hsv.a < 1) {\n        return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${roundAlpha(hsv.a)})`;\n      }\n      return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n\n    case 'hsl':\n      if (includeAlpha && hsv.a < 1) {\n        return `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${roundAlpha(hsv.a)})`;\n      }\n      return `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`;\n\n    case 'hex':\n    default: {\n      const hexR = rgb.r.toString(16).padStart(2, '0');\n      const hexG = rgb.g.toString(16).padStart(2, '0');\n      const hexB = rgb.b.toString(16).padStart(2, '0');\n      if (includeAlpha && hsv.a < 1) {\n        const hexA = Math.round(hsv.a * 255)\n          .toString(16)\n          .padStart(2, '0');\n        return `#${hexR}${hexG}${hexB}${hexA}`;\n      }\n      return `#${hexR}${hexG}${hexB}`;\n    }\n  }\n}\n","import { LitElement, html, nothing, PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { colorPickerStyles } from './color-picker.style.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\nimport {\n  type ColorFormat,\n  type HSVColor,\n  parseColor,\n  hsvToRgb,\n  hsvToHsl,\n  formatColorOutput,\n} from './color-picker.utils.js';\nimport { FormControlMixin } from '../../utilities/form-control.js';\nimport {\n  fieldMessageState,\n  renderFieldMessage,\n  fieldMessageStyles,\n} from '../../utilities/field-message.js';\n\n// Browser globals: PointerEvent and EyeDropper are available in modern browsers\n\n/**\n * Color picker size\n */\nexport type ColorPickerSize = 'sm' | 'md' | 'lg';\n\n/**\n * A color picker component that provides a consistent, accessible, and feature-rich\n * color selection experience. Supports HEX, RGB, and HSL formats with optional alpha channel.\n *\n * @element bp-color-picker\n *\n * @slot trigger - Custom trigger button content\n * @slot swatches - Custom swatch elements\n * @slot footer - Additional content below picker\n *\n * @csspart trigger - The popover trigger button\n * @csspart popover - The popover container\n * @csspart color-area - The 2D saturation/value gradient\n * @csspart hue-slider - The hue selection slider\n * @csspart alpha-slider - The alpha selection slider\n * @csspart preview - The color preview swatch\n * @csspart input - Text input fields\n * @csspart swatches - Swatches container\n * @csspart swatch - Individual swatch items\n *\n * @fires bp-change - Fired when value changes (on blur/confirm)\n * @fires bp-input - Fired on every input (live updates)\n * @fires bp-open - Popover opened\n * @fires bp-close - Popover closed\n */\n@customElement('bp-color-picker')\nexport class BpColorPicker extends FormControlMixin(LitElement) {\n  static styles = [fieldMessageStyles, colorPickerStyles];\n\n  /** Current color value */\n  @property({ type: String }) declare value: string;\n\n  /** Output format for value */\n  @property({ type: String }) declare format: ColorFormat;\n\n  /** Enable alpha channel */\n  @property({ converter: booleanConverter, reflect: true })\n  declare alpha: boolean;\n\n  /** Predefined swatch colors */\n  @property({ type: Array }) declare swatches: string[];\n\n  /** Render inline instead of popover */\n  @property({ type: Boolean }) declare inline: boolean;\n\n  /** Disable all interactions */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  /** Show value but prevent editing */\n  @property({ type: Boolean, reflect: true }) declare readonly: boolean;\n\n  /** Component size */\n  @property({ type: String, reflect: true }) declare size: ColorPickerSize;\n\n  /** Accessible label */\n  @property({ type: String }) declare label: string;\n\n  /** Helper text displayed below the color picker */\n  @property({ type: String }) declare helperText: string;\n\n  /**\n   * Error text. When set, the color picker is invalid: the message replaces the\n   * helper text, is announced, and the border turns to the error color.\n   */\n  @property({ type: String }) declare errorMessage: string;\n\n  /** Form field name */\n  @property({ type: String }) declare name: string;\n\n  /** Placeholder for trigger */\n  @property({ type: String }) declare placeholder: string;\n\n  /** Whether the popover is open */\n  @state() private _open = false;\n\n  /** Internal HSV color state */\n  @state() private _hsv: HSVColor = { h: 0, s: 0, v: 0, a: 1 };\n\n  /** Original color when popover opened */\n  @state() private _originalValue = '';\n\n  /** Whether eyedropper is supported */\n  @state() private _eyedropperSupported = false;\n\n  /** Current input mode for format toggle */\n  @state() private _inputMode: ColorFormat = 'hex';\n\n  /** HEX input value for controlled input */\n  @state() private _hexInputValue = '';\n\n  /** Whether eyedropper is currently active */\n  @state() private _isPickingColor = false;\n\n  @query('.color-area') private _colorArea!: HTMLElement;\n  @query('.hue-slider') private _hueSlider!: HTMLElement;\n  @query('.alpha-slider') private _alphaSlider!: HTMLElement;\n\n  private _isDraggingArea = false;\n  private _isDraggingHue = false;\n  private _isDraggingAlpha = false;\n\n  constructor() {\n    super();\n    this.value = '#000000';\n    this.format = 'hex';\n    this.alpha = true;\n    this.swatches = [];\n    this.inline = false;\n    this.disabled = false;\n    this.readonly = false;\n    this.size = 'md';\n    this.label = '';\n    this.helperText = '';\n    this.errorMessage = '';\n    this.name = '';\n    this.placeholder = '';\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    // Check for EyeDropper API support\n    this._eyedropperSupported = 'EyeDropper' in window;\n    this._parseValue(this.value);\n    this._hexInputValue = this._formatOutput('hex');\n    this._inputMode = this.format;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._removeGlobalListeners();\n  }\n\n  protected willUpdate(changedProperties: PropertyValues): void {\n    if (changedProperties.has('value') && !this._isDragging()) {\n      this._parseValue(this.value);\n      this._hexInputValue = this._formatOutput('hex');\n    }\n    if (changedProperties.has('format')) {\n      this._inputMode = this.format;\n    }\n  }\n\n  private _isDragging(): boolean {\n    return this._isDraggingArea || this._isDraggingHue || this._isDraggingAlpha;\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Color Parsing & Conversion\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Parses a color value string and updates internal HSV state\n   * @param value Color string in hex, rgb, or hsl format\n   */\n  private _parseValue(value: string): void {\n    const parsed = parseColor(value);\n    if (parsed) {\n      this._hsv = parsed;\n    }\n  }\n\n  /**\n   * Formats the current HSV color to the specified output format\n   * @param format Output format (hex, rgb, or hsl), defaults to this.format\n   * @returns Formatted color string\n   */\n  private _formatOutput(format: ColorFormat = this.format): string {\n    return formatColorOutput(this._hsv, format, this.alpha);\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Event Handlers\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Handles click events on the trigger button\n   * Toggles the picker popover open/closed state\n   */\n  private _handleTriggerClick(): void {\n    if (this.disabled || this.readonly) return;\n    this._toggleOpen();\n  }\n\n  /**\n   * Handles keyboard events on the trigger button\n   * Opens picker on Enter or Space key\n   * @param event Keyboard event\n   */\n  private _handleTriggerKeydown(event: KeyboardEvent): void {\n    if (this.disabled || this.readonly) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this._toggleOpen();\n    }\n  }\n\n  /**\n   * Toggles the picker popover between open and closed states\n   * Saves original value when opening and emits bp-open/bp-close events\n   */\n  private _toggleOpen(): void {\n    if (this._open) {\n      this._close();\n    } else {\n      this._open = true;\n      this._originalValue = this.value;\n      this.dispatchEvent(\n        new CustomEvent('bp-open', { bubbles: true, composed: true })\n      );\n      this._addGlobalListeners();\n    }\n  }\n\n  /**\n   * Closes the picker popover\n   * Removes global event listeners and emits bp-close event\n   */\n  private _close(): void {\n    this._open = false;\n    this._removeGlobalListeners();\n    this.dispatchEvent(\n      new CustomEvent('bp-close', { bubbles: true, composed: true })\n    );\n  }\n\n  private _handleOutsideClick = (event: MouseEvent): void => {\n    const path = event.composedPath();\n    if (!path.includes(this)) {\n      this._close();\n    }\n  };\n\n  private _handleEscapeKey = (event: KeyboardEvent): void => {\n    if (event.key === 'Escape') {\n      // Restore original value\n      this.value = this._originalValue;\n      this._parseValue(this._originalValue);\n      this._hexInputValue = this._formatOutput('hex');\n      this._close();\n    }\n  };\n\n  /**\n   * Adds global document event listeners for outside clicks and escape key\n   * Used when picker popover is open\n   */\n  private _addGlobalListeners(): void {\n    document.addEventListener('click', this._handleOutsideClick);\n    document.addEventListener('keydown', this._handleEscapeKey);\n  }\n\n  /**\n   * Removes global document event listeners\n   * Called when picker popover is closed\n   */\n  private _removeGlobalListeners(): void {\n    document.removeEventListener('click', this._handleOutsideClick);\n    document.removeEventListener('keydown', this._handleEscapeKey);\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Color Area Handlers\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Handles pointer down events on the color area\n   * Starts saturation/value drag interaction\n   * @param event Pointer event\n   */\n  private _handleColorAreaPointerDown(event: PointerEvent): void {\n    if (this.disabled || this.readonly) return;\n    event.preventDefault();\n    this._isDraggingArea = true;\n    this._colorArea.setPointerCapture(event.pointerId);\n    this._updateColorFromPointer(event);\n  }\n\n  /**\n   * Handles pointer move events on the color area during drag\n   * Updates color based on pointer position\n   * @param event Pointer event\n   */\n  private _handleColorAreaPointerMove(event: PointerEvent): void {\n    if (!this._isDraggingArea) return;\n    this._updateColorFromPointer(event);\n  }\n\n  /**\n   * Handles pointer up events on the color area\n   * Ends drag interaction and emits change event\n   * @param event Pointer event\n   */\n  private _handleColorAreaPointerUp(event: PointerEvent): void {\n    if (!this._isDraggingArea) return;\n    this._isDraggingArea = false;\n    this._colorArea.releasePointerCapture(event.pointerId);\n    this._emitChange();\n  }\n\n  /**\n   * Updates color saturation and value based on pointer position in color area\n   * @param event Pointer event with clientX/clientY coordinates\n   */\n  private _updateColorFromPointer(event: PointerEvent): void {\n    const rect = this._colorArea.getBoundingClientRect();\n    const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width));\n    const y = Math.max(0, Math.min(event.clientY - rect.top, rect.height));\n\n    this._hsv = {\n      ...this._hsv,\n      s: (x / rect.width) * 100,\n      v: 100 - (y / rect.height) * 100,\n    };\n\n    this._hexInputValue = this._formatOutput('hex');\n    this._emitInput();\n  }\n\n  /**\n   * Handles keyboard navigation on the color area\n   * Arrow keys adjust saturation/value, Shift increases step size\n   * @param event Keyboard event\n   */\n  private _handleColorAreaKeydown(event: KeyboardEvent): void {\n    if (this.disabled || this.readonly) return;\n\n    const step = event.shiftKey ? 10 : 1;\n    let handled = false;\n\n    switch (event.key) {\n      case 'ArrowRight':\n        this._hsv = { ...this._hsv, s: Math.min(100, this._hsv.s + step) };\n        handled = true;\n        break;\n      case 'ArrowLeft':\n        this._hsv = { ...this._hsv, s: Math.max(0, this._hsv.s - step) };\n        handled = true;\n        break;\n      case 'ArrowUp':\n        this._hsv = { ...this._hsv, v: Math.min(100, this._hsv.v + step) };\n        handled = true;\n        break;\n      case 'ArrowDown':\n        this._hsv = { ...this._hsv, v: Math.max(0, this._hsv.v - step) };\n        handled = true;\n        break;\n      case 'Home':\n        this._hsv = { ...this._hsv, s: 0 };\n        handled = true;\n        break;\n      case 'End':\n        this._hsv = { ...this._hsv, s: 100 };\n        handled = true;\n        break;\n    }\n\n    if (handled) {\n      event.preventDefault();\n      this._hexInputValue = this._formatOutput('hex');\n      this._emitInput();\n      this._emitChange();\n    }\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Hue Slider Handlers\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Handles pointer down events on the hue slider\n   * Starts hue drag interaction\n   * @param event Pointer event\n   */\n  private _handleHuePointerDown(event: PointerEvent): void {\n    if (this.disabled || this.readonly) return;\n    event.preventDefault();\n    this._isDraggingHue = true;\n    this._hueSlider.setPointerCapture(event.pointerId);\n    this._updateHueFromPointer(event);\n  }\n\n  /**\n   * Handles pointer move events on the hue slider during drag\n   * Updates hue based on pointer position\n   * @param event Pointer event\n   */\n  private _handleHuePointerMove(event: PointerEvent): void {\n    if (!this._isDraggingHue) return;\n    this._updateHueFromPointer(event);\n  }\n\n  /**\n   * Handles pointer up events on the hue slider\n   * Ends drag interaction and emits change event\n   * @param event Pointer event\n   */\n  private _handleHuePointerUp(event: PointerEvent): void {\n    if (!this._isDraggingHue) return;\n    this._isDraggingHue = false;\n    this._hueSlider.releasePointerCapture(event.pointerId);\n    this._emitChange();\n  }\n\n  /**\n   * Updates hue based on pointer position in hue slider\n   * @param event Pointer event with clientY coordinate\n   */\n  private _updateHueFromPointer(event: PointerEvent): void {\n    const rect = this._hueSlider.getBoundingClientRect();\n    const y = Math.max(0, Math.min(event.clientY - rect.top, rect.height));\n    const hue = (y / rect.height) * 360;\n\n    this._hsv = { ...this._hsv, h: hue };\n    this._hexInputValue = this._formatOutput('hex');\n    this._emitInput();\n  }\n\n  /**\n   * Handles keyboard navigation on the hue slider\n   * Arrow keys adjust hue, Shift increases step size\n   * @param event Keyboard event\n   */\n  private _handleHueKeydown(event: KeyboardEvent): void {\n    if (this.disabled || this.readonly) return;\n\n    const step = event.shiftKey ? 10 : 1;\n    let handled = false;\n\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        this._hsv = { ...this._hsv, h: (this._hsv.h + step) % 360 };\n        handled = true;\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        this._hsv = { ...this._hsv, h: (this._hsv.h - step + 360) % 360 };\n        handled = true;\n        break;\n      case 'Home':\n        this._hsv = { ...this._hsv, h: 0 };\n        handled = true;\n        break;\n      case 'End':\n        this._hsv = { ...this._hsv, h: 359 };\n        handled = true;\n        break;\n    }\n\n    if (handled) {\n      event.preventDefault();\n      this._hexInputValue = this._formatOutput('hex');\n      this._emitInput();\n      this._emitChange();\n    }\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Alpha Slider Handlers\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Handles pointer down events on the alpha slider\n   * Starts alpha drag interaction\n   * @param event Pointer event\n   */\n  private _handleAlphaPointerDown(event: PointerEvent): void {\n    if (this.disabled || this.readonly) return;\n    event.preventDefault();\n    this._isDraggingAlpha = true;\n    this._alphaSlider.setPointerCapture(event.pointerId);\n    this._updateAlphaFromPointer(event);\n  }\n\n  /**\n   * Handles pointer move events on the alpha slider during drag\n   * Updates alpha based on pointer position\n   * @param event Pointer event\n   */\n  private _handleAlphaPointerMove(event: PointerEvent): void {\n    if (!this._isDraggingAlpha) return;\n    this._updateAlphaFromPointer(event);\n  }\n\n  /**\n   * Handles pointer up events on the alpha slider\n   * Ends drag interaction and emits change event\n   * @param event Pointer event\n   */\n  private _handleAlphaPointerUp(event: PointerEvent): void {\n    if (!this._isDraggingAlpha) return;\n    this._isDraggingAlpha = false;\n    this._alphaSlider.releasePointerCapture(event.pointerId);\n    this._emitChange();\n  }\n\n  /**\n   * Updates alpha based on pointer position in alpha slider\n   * @param event Pointer event with clientX coordinate\n   */\n  private _updateAlphaFromPointer(event: PointerEvent): void {\n    const rect = this._alphaSlider.getBoundingClientRect();\n    const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width));\n    const alpha = x / rect.width;\n\n    this._hsv = { ...this._hsv, a: alpha };\n    this._hexInputValue = this._formatOutput('hex');\n    this._emitInput();\n  }\n\n  /**\n   * Handles keyboard navigation on the alpha slider\n   * Arrow keys adjust alpha, Shift increases step size\n   * @param event Keyboard event\n   */\n  private _handleAlphaKeydown(event: KeyboardEvent): void {\n    if (this.disabled || this.readonly) return;\n\n    const step = event.shiftKey ? 0.1 : 0.01;\n    let handled = false;\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        this._hsv = { ...this._hsv, a: Math.min(1, this._hsv.a + step) };\n        handled = true;\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        this._hsv = { ...this._hsv, a: Math.max(0, this._hsv.a - step) };\n        handled = true;\n        break;\n      case 'Home':\n        this._hsv = { ...this._hsv, a: 0 };\n        handled = true;\n        break;\n      case 'End':\n        this._hsv = { ...this._hsv, a: 1 };\n        handled = true;\n        break;\n    }\n\n    if (handled) {\n      event.preventDefault();\n      this._hexInputValue = this._formatOutput('hex');\n      this._emitInput();\n      this._emitChange();\n    }\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Input Handlers\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Handles input events on the hex input field\n   * Updates controlled input value\n   * @param event Input event\n   */\n  private _handleHexInput(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this._hexInputValue = input.value;\n  }\n\n  /**\n   * Handles change events on the hex input field\n   * Parses and applies hex color value, adds # prefix if missing\n   * @param event Change event\n   */\n  private _handleHexChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    let value = input.value.trim();\n\n    // Add # if missing\n    if (value && !value.startsWith('#')) {\n      value = '#' + value;\n    }\n\n    const parsed = parseColor(value);\n    if (parsed) {\n      this._hsv = parsed;\n      this._hexInputValue = this._formatOutput('hex');\n      this._emitInput();\n      this._emitChange();\n    } else {\n      // Reset to current value if invalid\n      this._hexInputValue = this._formatOutput('hex');\n    }\n  }\n\n  /**\n   * Handles input events on RGB channel inputs\n   * Updates color based on red, green, or blue channel value\n   * @param channel RGB channel to update ('r', 'g', or 'b')\n   * @param event Input event\n   */\n  private _handleRgbInput(channel: 'r' | 'g' | 'b', event: Event): void {\n    const input = event.target as HTMLInputElement;\n    const value = Math.max(0, Math.min(255, parseInt(input.value, 10) || 0));\n\n    const rgb = hsvToRgb(this._hsv);\n    rgb[channel] = value;\n    this._hsv = parseColor(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`)!;\n    this._hexInputValue = this._formatOutput('hex');\n    this._emitInput();\n  }\n\n  /**\n   * Handles change events on RGB inputs\n   * Emits bp-change event\n   */\n  private _handleRgbChange(): void {\n    this._emitChange();\n  }\n\n  /**\n   * Handles input events on HSL channel inputs\n   * Updates color based on hue, saturation, or lightness value\n   * @param channel HSL channel to update ('h', 's', or 'l')\n   * @param event Input event\n   */\n  private _handleHslInput(channel: 'h' | 's' | 'l', event: Event): void {\n    const input = event.target as HTMLInputElement;\n    const hsl = hsvToHsl(this._hsv);\n\n    if (channel === 'h') {\n      hsl.h = Math.max(0, Math.min(360, parseInt(input.value, 10) || 0));\n    } else {\n      hsl[channel] = Math.max(0, Math.min(100, parseInt(input.value, 10) || 0));\n    }\n\n    this._hsv = parseColor(`hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${hsl.a})`)!;\n    this._hexInputValue = this._formatOutput('hex');\n    this._emitInput();\n  }\n\n  /**\n   * Handles change events on HSL inputs\n   * Emits bp-change event\n   */\n  private _handleHslChange(): void {\n    this._emitChange();\n  }\n\n  /**\n   * Handles input events on the alpha percentage input\n   * Updates alpha channel (0-100%)\n   * @param event Input event\n   */\n  private _handleAlphaInput(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    const value = Math.max(0, Math.min(100, parseInt(input.value, 10) || 0));\n    this._hsv = { ...this._hsv, a: value / 100 };\n    this._hexInputValue = this._formatOutput('hex');\n    this._emitInput();\n  }\n\n  /**\n   * Handles change events on alpha input\n   * Emits bp-change event\n   */\n  private _handleAlphaInputChange(): void {\n    this._emitChange();\n  }\n\n  /**\n   * Handles format toggle button click\n   * Cycles through hex → rgb → hsl input modes\n   */\n  private _handleFormatToggle(): void {\n    const formats: ColorFormat[] = ['hex', 'rgb', 'hsl'];\n    const currentIndex = formats.indexOf(this._inputMode);\n    this._inputMode = formats[(currentIndex + 1) % formats.length];\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Swatch Handlers\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Handles click events on predefined color swatches\n   * Updates color to the swatch value\n   * @param color Color string to apply\n   */\n  private _handleSwatchClick(color: string): void {\n    if (this.disabled || this.readonly) return;\n\n    const parsed = parseColor(color);\n    if (parsed) {\n      this._hsv = parsed;\n      this._hexInputValue = this._formatOutput('hex');\n      this._emitInput();\n      this._emitChange();\n    }\n  }\n\n  /**\n   * Handles keyboard events on swatch elements\n   * Activates swatch on Enter or Space key\n   * @param color Color string to apply\n   * @param event Keyboard event\n   */\n  private _handleSwatchKeydown(color: string, event: KeyboardEvent): void {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this._handleSwatchClick(color);\n    }\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Eyedropper\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Handles eyedropper button click\n   * Opens native EyeDropper API to pick color from screen\n   * Only available in browsers that support the EyeDropper API\n   */\n  private async _handleEyedropper(): Promise<void> {\n    if (!this._eyedropperSupported || this.disabled || this.readonly) return;\n\n    this._isPickingColor = true;\n    try {\n      // @ts-expect-error EyeDropper API is not in TypeScript types yet\n      const eyeDropper = new EyeDropper();\n      const result = await eyeDropper.open();\n\n      if (result.sRGBHex) {\n        const parsed = parseColor(result.sRGBHex);\n        if (parsed) {\n          this._hsv = parsed;\n          this._hexInputValue = this._formatOutput('hex');\n          this._emitInput();\n          this._emitChange();\n        }\n      }\n    } catch {\n      // User cancelled or error occurred\n    } finally {\n      this._isPickingColor = false;\n    }\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Event Emission\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Emits bp-input event with current formatted color value\n   * Fired during live color updates (dragging, typing)\n   */\n  private _emitInput(): void {\n    const value = this._formatOutput();\n    this.dispatchEvent(\n      new CustomEvent('bp-input', {\n        detail: { value },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Emits bp-change event and updates the value property\n   * Fired on blur/confirm actions (drag end, input blur)\n   */\n  private _emitChange(): void {\n    const value = this._formatOutput();\n    this.value = value;\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: { value },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Rendering\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Renders the 2D color area for saturation and value selection\n   * @returns TemplateResult for color area with draggable handle\n   */\n  private _renderColorArea() {\n    const hueColor = `hsl(${this._hsv.h}, 100%, 50%)`;\n    const handleX = this._hsv.s;\n    const handleY = 100 - this._hsv.v;\n\n    return html`\n      <div\n        class=\"color-area\"\n        part=\"color-area\"\n        role=\"slider\"\n        tabindex=\"${this.disabled ? -1 : 0}\"\n        aria-label=\"Color selection\"\n        aria-valuetext=\"Saturation ${Math.round(\n          this._hsv.s\n        )}%, Brightness ${Math.round(this._hsv.v)}%\"\n        style=\"--hue-color: ${hueColor}\"\n        @pointerdown=${this._handleColorAreaPointerDown}\n        @pointermove=${this._handleColorAreaPointerMove}\n        @pointerup=${this._handleColorAreaPointerUp}\n        @keydown=${this._handleColorAreaKeydown}\n      >\n        <div\n          class=\"color-area-handle\"\n          style=\"left: ${handleX}%; top: ${handleY}%\"\n        ></div>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders the vertical hue slider (0-360 degrees)\n   * @returns TemplateResult for hue slider with draggable handle\n   */\n  private _renderHueSlider() {\n    const handleY = (this._hsv.h / 360) * 100;\n\n    return html`\n      <div\n        class=\"hue-slider\"\n        part=\"hue-slider\"\n        role=\"slider\"\n        tabindex=\"${this.disabled ? -1 : 0}\"\n        aria-label=\"Hue\"\n        aria-valuenow=\"${Math.round(this._hsv.h)}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"360\"\n        @pointerdown=${this._handleHuePointerDown}\n        @pointermove=${this._handleHuePointerMove}\n        @pointerup=${this._handleHuePointerUp}\n        @keydown=${this._handleHueKeydown}\n      >\n        <div class=\"hue-slider-handle\" style=\"top: ${handleY}%\"></div>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders the horizontal alpha slider (0-100%)\n   * Only shown when alpha property is true\n   * @returns TemplateResult for alpha slider or nothing\n   */\n  private _renderAlphaSlider() {\n    if (!this.alpha) return nothing;\n\n    const rgb = hsvToRgb(this._hsv);\n    const colorStart = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`;\n    const colorEnd = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`;\n    const handleX = this._hsv.a * 100;\n\n    return html`\n      <div\n        class=\"alpha-slider\"\n        part=\"alpha-slider\"\n        role=\"slider\"\n        tabindex=\"${this.disabled ? -1 : 0}\"\n        aria-label=\"Opacity\"\n        aria-valuenow=\"${Math.round(this._hsv.a * 100)}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        style=\"--alpha-gradient: linear-gradient(to right, ${colorStart}, ${colorEnd})\"\n        @pointerdown=${this._handleAlphaPointerDown}\n        @pointermove=${this._handleAlphaPointerMove}\n        @pointerup=${this._handleAlphaPointerUp}\n        @keydown=${this._handleAlphaKeydown}\n      >\n        <div class=\"alpha-slider-handle\" style=\"left: ${handleX}%\"></div>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders the color preview showing original and current colors\n   * Displays side-by-side comparison with checkerboard background for transparency\n   * @returns TemplateResult for preview swatches\n   */\n  private _renderPreview() {\n    const rgb = hsvToRgb(this._hsv);\n    const currentColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${this._hsv.a})`;\n    const originalHsv = parseColor(this._originalValue);\n    const originalColor = originalHsv\n      ? (() => {\n          const origRgb = hsvToRgb(originalHsv);\n          return `rgba(${origRgb.r}, ${origRgb.g}, ${origRgb.b}, ${originalHsv.a})`;\n        })()\n      : currentColor;\n\n    return html`\n      <div class=\"preview\" part=\"preview\">\n        <div\n          class=\"preview-swatch preview-original\"\n          style=\"background: ${originalColor}\"\n          title=\"Original color\"\n          aria-label=\"Original color\"\n        ></div>\n        <div\n          class=\"preview-swatch preview-current\"\n          style=\"background: ${currentColor}\"\n          title=\"Current color\"\n          aria-label=\"Current color\"\n        ></div>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders the hex color input field\n   * @returns TemplateResult for hex input group\n   */\n  private _renderHexInput() {\n    return html`\n      <div class=\"input-group\">\n        <input\n          type=\"text\"\n          class=\"color-input hex-input\"\n          part=\"input\"\n          .value=${this._hexInputValue}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          @input=${this._handleHexInput}\n          @change=${this._handleHexChange}\n          aria-label=\"Hex color value\"\n        />\n        <span class=\"input-label\">HEX</span>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders RGB color input fields (R, G, B, and optionally A)\n   * @returns TemplateResult for RGB input row\n   */\n  private _renderRgbInputs() {\n    const rgb = hsvToRgb(this._hsv);\n\n    return html`\n      <div class=\"input-row\">\n        <div class=\"input-group\">\n          <input\n            type=\"number\"\n            class=\"color-input\"\n            part=\"input\"\n            min=\"0\"\n            max=\"255\"\n            .value=${String(rgb.r)}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            @input=${(e: Event) => this._handleRgbInput('r', e)}\n            @change=${this._handleRgbChange}\n            aria-label=\"Red\"\n          />\n          <span class=\"input-label\">R</span>\n        </div>\n        <div class=\"input-group\">\n          <input\n            type=\"number\"\n            class=\"color-input\"\n            part=\"input\"\n            min=\"0\"\n            max=\"255\"\n            .value=${String(rgb.g)}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            @input=${(e: Event) => this._handleRgbInput('g', e)}\n            @change=${this._handleRgbChange}\n            aria-label=\"Green\"\n          />\n          <span class=\"input-label\">G</span>\n        </div>\n        <div class=\"input-group\">\n          <input\n            type=\"number\"\n            class=\"color-input\"\n            part=\"input\"\n            min=\"0\"\n            max=\"255\"\n            .value=${String(rgb.b)}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            @input=${(e: Event) => this._handleRgbInput('b', e)}\n            @change=${this._handleRgbChange}\n            aria-label=\"Blue\"\n          />\n          <span class=\"input-label\">B</span>\n        </div>\n        ${\n          this.alpha\n            ? html`\n                <div class=\"input-group\">\n                  <input\n                    type=\"number\"\n                    class=\"color-input\"\n                    part=\"input\"\n                    min=\"0\"\n                    max=\"100\"\n                    .value=${String(Math.round(this._hsv.a * 100))}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    @input=${this._handleAlphaInput}\n                    @change=${this._handleAlphaInputChange}\n                    aria-label=\"Alpha\"\n                  />\n                  <span class=\"input-label\">A</span>\n                </div>\n              `\n            : nothing\n        }\n      </div>\n    `;\n  }\n\n  /**\n   * Renders HSL color input fields (H, S, L, and optionally A)\n   * @returns TemplateResult for HSL input row\n   */\n  private _renderHslInputs() {\n    const hsl = hsvToHsl(this._hsv);\n\n    return html`\n      <div class=\"input-row\">\n        <div class=\"input-group\">\n          <input\n            type=\"number\"\n            class=\"color-input\"\n            part=\"input\"\n            min=\"0\"\n            max=\"360\"\n            .value=${String(Math.round(hsl.h))}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            @input=${(e: Event) => this._handleHslInput('h', e)}\n            @change=${this._handleHslChange}\n            aria-label=\"Hue\"\n          />\n          <span class=\"input-label\">H</span>\n        </div>\n        <div class=\"input-group\">\n          <input\n            type=\"number\"\n            class=\"color-input\"\n            part=\"input\"\n            min=\"0\"\n            max=\"100\"\n            .value=${String(Math.round(hsl.s))}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            @input=${(e: Event) => this._handleHslInput('s', e)}\n            @change=${this._handleHslChange}\n            aria-label=\"Saturation\"\n          />\n          <span class=\"input-label\">S</span>\n        </div>\n        <div class=\"input-group\">\n          <input\n            type=\"number\"\n            class=\"color-input\"\n            part=\"input\"\n            min=\"0\"\n            max=\"100\"\n            .value=${String(Math.round(hsl.l))}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            @input=${(e: Event) => this._handleHslInput('l', e)}\n            @change=${this._handleHslChange}\n            aria-label=\"Lightness\"\n          />\n          <span class=\"input-label\">L</span>\n        </div>\n        ${\n          this.alpha\n            ? html`\n                <div class=\"input-group\">\n                  <input\n                    type=\"number\"\n                    class=\"color-input\"\n                    part=\"input\"\n                    min=\"0\"\n                    max=\"100\"\n                    .value=${String(Math.round(this._hsv.a * 100))}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    @input=${this._handleAlphaInput}\n                    @change=${this._handleAlphaInputChange}\n                    aria-label=\"Alpha\"\n                  />\n                  <span class=\"input-label\">A</span>\n                </div>\n              `\n            : nothing\n        }\n      </div>\n    `;\n  }\n\n  /**\n   * Renders the input controls container with format toggle button\n   * Shows hex, rgb, or hsl inputs based on current input mode\n   * @returns TemplateResult for inputs container\n   */\n  private _renderInputs() {\n    return html`\n      <div class=\"inputs-container\">\n        ${this._inputMode === 'hex' ? this._renderHexInput() : nothing}\n        ${this._inputMode === 'rgb' ? this._renderRgbInputs() : nothing}\n        ${this._inputMode === 'hsl' ? this._renderHslInputs() : nothing}\n        <button\n          type=\"button\"\n          class=\"format-toggle\"\n          @click=${this._handleFormatToggle}\n          ?disabled=${this.disabled}\n          aria-label=\"Cycle color format (${this._inputMode.toUpperCase()})\"\n          title=\"Cycle color format\"\n        >\n          <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path\n              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\"\n            />\n          </svg>\n        </button>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders predefined color swatches\n   * Shows swatches from the swatches property or slotted content\n   * @returns TemplateResult for swatches container or nothing\n   */\n  private _renderSwatches() {\n    const hasSwatches = this.swatches.length > 0;\n    const hasSlottedSwatches = this.querySelector('[slot=\"swatches\"]') !== null;\n\n    if (!hasSwatches && !hasSlottedSwatches) return nothing;\n\n    return html`\n      <div\n        class=\"swatches-container\"\n        part=\"swatches\"\n        role=\"listbox\"\n        aria-label=\"Color swatches\"\n      >\n        <slot name=\"swatches\">\n          ${this.swatches.map(\n            (color) => html`\n              <button\n                type=\"button\"\n                class=\"swatch\"\n                part=\"swatch\"\n                role=\"option\"\n                style=\"background: ${color}\"\n                @click=${() => this._handleSwatchClick(color)}\n                @keydown=${(e: KeyboardEvent) =>\n                  this._handleSwatchKeydown(color, e)}\n                ?disabled=${this.disabled}\n                aria-label=\"${color}\"\n              ></button>\n            `\n          )}\n        </slot>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders the eyedropper button if API is supported\n   * @returns TemplateResult for eyedropper button or nothing\n   */\n  private _renderEyedropper() {\n    if (!this._eyedropperSupported) return nothing;\n\n    return html`\n      <button\n        type=\"button\"\n        class=\"eyedropper-button\"\n        @click=${this._handleEyedropper}\n        ?disabled=${this.disabled || this.readonly || this._isPickingColor}\n        aria-label=\"Pick color from screen\"\n        aria-busy=\"${this._isPickingColor}\"\n      >\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path d=\"M2 22l1-1h3l9-9m-3-3l3-3 5 5-3 3m-5-5l5 5M12.5 6.5l5 5\" />\n        </svg>\n      </button>\n    `;\n  }\n\n  /**\n   * Renders the complete color picker panel\n   * Includes color area, sliders, preview, inputs, and swatches\n   * @returns TemplateResult for picker panel\n   */\n  private _renderPicker() {\n    return html`\n      <div\n        class=\"picker\"\n        part=\"popover\"\n        role=\"dialog\"\n        aria-label=\"${this.label || 'Color picker'}\"\n      >\n        <div class=\"picker-body\">\n          <div class=\"picker-main\">\n            ${this._renderColorArea()} ${this._renderHueSlider()}\n          </div>\n          ${this._renderAlphaSlider()}\n          <div class=\"picker-controls\">\n            ${this._renderPreview()} ${this._renderInputs()}\n            ${this._renderEyedropper()}\n          </div>\n          ${this._renderSwatches()}\n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders the trigger button to open the picker popover\n   * Shows current color swatch and optional label\n   * @returns TemplateResult for trigger button\n   */\n  private _renderTrigger(invalid = false, describedBy?: string) {\n    const rgb = hsvToRgb(this._hsv);\n    const currentColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${this._hsv.a})`;\n    const hasLabel = this.label || this.placeholder;\n\n    return html`\n      <button\n        type=\"button\"\n        class=\"trigger\"\n        part=\"trigger\"\n        role=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-expanded=\"${this._open}\"\n        aria-disabled=\"${this.disabled}\"\n        aria-invalid=${invalid ? 'true' : nothing}\n        aria-describedby=${describedBy ?? nothing}\n        tabindex=\"${this.disabled ? -1 : 0}\"\n        ?disabled=${this.disabled}\n        @click=${this._handleTriggerClick}\n        @keydown=${this._handleTriggerKeydown}\n      >\n        <slot name=\"trigger\">\n          <span\n            class=\"trigger-swatch\"\n            style=\"background: ${currentColor}\"\n          ></span>\n          ${\n            hasLabel\n              ? html`<span class=\"trigger-label\"\n                  >${this.label || this.placeholder}</span\n                >`\n              : nothing\n          }\n        </slot>\n      </button>\n    `;\n  }\n\n  render() {\n    const message = {\n      helperText: this.helperText,\n      errorMessage: this.errorMessage,\n      invalid: false,\n    };\n    const { invalid, describedBy } = fieldMessageState(message);\n    if (this.inline) {\n      return html`${this._renderPicker()}${renderFieldMessage(message)}`;\n    }\n\n    return html`\n      <div\n        class=\"color-picker color-picker--${this.size} ${\n          invalid ? 'color-picker--invalid' : ''\n        }\"\n      >\n        ${this._renderTrigger(invalid, describedBy)}\n        ${\n          this._open\n            ? html`\n                <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n                  Current color: ${this._formatOutput()}\n                </div>\n                ${this._renderPicker()}\n              `\n            : nothing\n        }\n      </div>\n      ${renderFieldMessage(message)}\n      ${\n        this.name\n          ? html`<input\n              type=\"hidden\"\n              name=\"${this.name}\"\n              .value=${this._formatOutput()}\n            />`\n          : nothing\n      }\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-color-picker': BpColorPicker;\n  }\n}\n"],"mappings":";;;;;;;AAcA,IAAaM,IAAoB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiCpC,SAAgBC,EAAW,GAAgC;CAoBzD,OAnBKC,KAEL,IAAQA,EAAM,KAAK,CAAC,CAAC,YAAY,GAG7BA,EAAM,WAAW,GAAG,IACfC,EAASD,CAAK,IAInBA,EAAM,WAAW,KAAK,IACjBE,EAASF,CAAK,IAInBA,EAAM,WAAW,KAAK,IACjBG,EAASH,CAAK,IAGhB,QAnBY;AAoBrB;AAOA,SAAgBC,EAAS,GAA8B;CACrD,IAAMG,EAAI,QAAQ,KAAK,EAAE;CAEzB,IAAIC,GACFC,GACAC,GACAC,IAAI;CAEN,IAAIJ,EAAI,WAAW,GAGjB,AAFA,IAAI,SAASA,EAAI,KAAKA,EAAI,IAAI,EAAE,GAChC,IAAI,SAASA,EAAI,KAAKA,EAAI,IAAI,EAAE,GAChC,IAAI,SAASA,EAAI,KAAKA,EAAI,IAAI,EAAE;MAC3B,IAAIA,EAAI,WAAW,GAIxB,AAHA,IAAI,SAASA,EAAI,KAAKA,EAAI,IAAI,EAAE,GAChC,IAAI,SAASA,EAAI,KAAKA,EAAI,IAAI,EAAE,GAChC,IAAI,SAASA,EAAI,KAAKA,EAAI,IAAI,EAAE,GAChC,IAAI,SAASA,EAAI,KAAKA,EAAI,IAAI,EAAE,IAAI;MAC/B,IAAIA,EAAI,WAAW,GAGxB,AAFA,IAAI,SAASA,EAAI,UAAU,GAAG,CAAC,GAAG,EAAE,GACpC,IAAI,SAASA,EAAI,UAAU,GAAG,CAAC,GAAG,EAAE,GACpC,IAAI,SAASA,EAAI,UAAU,GAAG,CAAC,GAAG,EAAE;MAC/B,IAAIA,EAAI,WAAW,GAIxB,AAHA,IAAI,SAASA,EAAI,UAAU,GAAG,CAAC,GAAG,EAAE,GACpC,IAAI,SAASA,EAAI,UAAU,GAAG,CAAC,GAAG,EAAE,GACpC,IAAI,SAASA,EAAI,UAAU,GAAG,CAAC,GAAG,EAAE,GACpC,IAAI,SAASA,EAAI,UAAU,GAAG,CAAC,GAAG,EAAE,IAAI;MAExC,OAAO;CAOT,OAJI,MAAMC,CAAC,KAAK,MAAMC,CAAC,KAAK,MAAMC,CAAC,KAAK,MAAMC,CAAC,IACtC,OAGFC,EAAS;EAAE;EAAG;EAAG;EAAG;CAAE,CAAC;AAChC;AAOA,SAAgBP,EAAS,GAA8B;CACrD,IAAMQ,IAAQC,EAAI,MAChB,kEACF;CAQA,OAPKD,IAOED,EAAS;EAAE,GALR,SAASC,EAAM,IAAI,EAKX;EAAG,GAJX,SAASA,EAAM,IAAI,EAIR;EAAG,GAHd,SAASA,EAAM,IAAI,EAGL;EAAG,GAFjBA,EAAM,OAAO,KAAA,IAAmC,IAAvB,WAAWA,EAAM,EAAE;CAEzB,CAAC,IAPX;AAQrB;AAOA,SAAgBP,EAAS,GAA8B;CACrD,IAAMO,IAAQE,EAAI,MAChB,+EACF;CAQA,OAPKF,IAOEG,EAAS;EAAE,GALR,WAAWH,EAAM,EAKT;EAAG,GAJX,WAAWA,EAAM,EAIN;EAAG,GAHd,WAAWA,EAAM,EAGH;EAAG,GAFjBA,EAAM,OAAO,KAAA,IAAmC,IAAvB,WAAWA,EAAM,EAAE;CAEzB,CAAC,IAPX;AAQrB;AAOA,SAAgBD,EAAS,GAAyB;CAChD,IAAMJ,IAAIM,EAAI,IAAI,KACZL,IAAIK,EAAI,IAAI,KACZJ,IAAII,EAAI,IAAI,KAEZG,IAAM,KAAK,IAAIT,GAAGC,GAAGC,CAAC,GAEtBQ,IAAQD,IADF,KAAK,IAAIT,GAAGC,GAAGC,CACP,GAEhBS,IAAI,GACF,IAAIF,MAAQ,IAAI,IAAKC,IAAQD,IAAO,KACpCG,IAAIH,IAAM;CAchB,OAZIC,MAAU,MACZ,AAKEC,IALEF,MAAQT,IACN,OAAQC,IAAIC,KAAKQ,IAAS,KACrBD,MAAQR,IACb,OAAOC,IAAIF,KAAKU,IAAQ,KAExB,OAAOV,IAAIC,KAAKS,IAAQ,KAI5BC,IAAI,MAAG,KAAK,MAET;EAAE;EAAG;EAAG;EAAG,GAAGL,EAAI;CAAE;AAC7B;AAOA,SAAgBO,EAAS,GAAyB;CAChD,IAAMF,IAAIG,EAAI,GACRC,IAAID,EAAI,IAAI,KACZF,IAAIE,EAAI,IAAI,KAEZE,IAAIJ,IAAIG,GACRE,IAAID,KAAK,IAAI,KAAK,IAAML,IAAI,KAAM,IAAK,CAAC,IACxCO,IAAIN,IAAII,GAEVhB,GAAWC,GAAWC;CA4B1B,OA1BIS,KAAK,KAAKA,IAAI,MAChB,IAAIK,GACJ,IAAIC,GACJ,IAAI,KACKN,KAAK,MAAMA,IAAI,OACxB,IAAIM,GACJ,IAAID,GACJ,IAAI,KACKL,KAAK,OAAOA,IAAI,OACzB,IAAI,GACJ,IAAIK,GACJ,IAAIC,KACKN,KAAK,OAAOA,IAAI,OACzB,IAAI,GACJ,IAAIM,GACJ,IAAID,KACKL,KAAK,OAAOA,IAAI,OACzB,IAAIM,GACJ,IAAI,GACJ,IAAID,MAEJ,IAAIA,GACJ,IAAI,GACJ,IAAIC,IAGC;EACL,GAAG,KAAK,OAAOjB,IAAIkB,KAAK,GAAG;EAC3B,GAAG,KAAK,OAAOjB,IAAIiB,KAAK,GAAG;EAC3B,GAAG,KAAK,OAAOhB,IAAIgB,KAAK,GAAG;EAC3B,GAAGJ,EAAI;CACT;AACF;AAOA,SAAgBN,EAAS,GAAyB;CAChD,IAAMG,IAAIJ,EAAI,GACRQ,IAAIR,EAAI,IAAI,KACZY,IAAIZ,EAAI,IAAI,KAEZK,IAAIO,IAAIJ,IAAI,KAAK,IAAII,GAAG,IAAIA,CAAC;CAGnC,OAAO;EAAE;EAAG,IAFDP,MAAM,IAAI,IAAI,KAAK,IAAIO,IAAIP,MAElB;EAAK,GAAGA,IAAI;EAAK,GAAGL,EAAI;CAAE;AAChD;AAOA,SAAgBa,EAAS,GAAyB;CAChD,IAAMT,IAAIG,EAAI,GACRC,IAAID,EAAI,IAAI,KACZF,IAAIE,EAAI,IAAI,KAEZK,IAAIP,KAAK,IAAIG,IAAI;CAGvB,OAAO;EAAE;EAAG,IAFDI,MAAM,KAAKA,MAAM,IAAI,KAAKP,IAAIO,KAAK,KAAK,IAAIA,GAAG,IAAIA,CAAC,KAE3C;EAAK,GAAGA,IAAI;EAAK,GAAGL,EAAI;CAAE;AAChD;AAOA,SAAgBO,EAAW,GAAmB;CAC5C,OAAO,KAAK,MAAMlB,IAAI,GAAG,IAAI;AAC/B;AASA,SAAgBmB,EACd,GACA,GACA,GACQ;CACR,IAAMhB,IAAMO,EAASC,CAAG,GAClBP,IAAMa,EAASN,CAAG;CAExB,QAAQS,GAAR;EACE,KAAK,OAIH,OAHIC,KAAgBV,EAAI,IAAI,IACnB,QAAQR,EAAI,EAAE,IAAIA,EAAI,EAAE,IAAIA,EAAI,EAAE,IAAIe,EAAWP,EAAI,CAAC,EAAE,KAE1D,OAAOR,EAAI,EAAE,IAAIA,EAAI,EAAE,IAAIA,EAAI,EAAE;EAE1C,KAAK,OAIH,OAHIkB,KAAgBV,EAAI,IAAI,IACnB,QAAQ,KAAK,MAAMP,EAAI,CAAC,EAAE,IAAI,KAAK,MAAMA,EAAI,CAAC,EAAE,KAAK,KAAK,MAAMA,EAAI,CAAC,EAAE,KAAKc,EAAWP,EAAI,CAAC,EAAE,KAEhG,OAAO,KAAK,MAAMP,EAAI,CAAC,EAAE,IAAI,KAAK,MAAMA,EAAI,CAAC,EAAE,KAAK,KAAK,MAAMA,EAAI,CAAC,EAAE;EAG/E,SAAS;GACP,IAAMkB,IAAOnB,EAAI,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,GACzCoB,IAAOpB,EAAI,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,GACzCqB,IAAOrB,EAAI,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG;GAO/C,OANIkB,KAAgBV,EAAI,IAAI,IAInB,IAAIW,IAAOC,IAAOC,IAHZ,KAAK,MAAMb,EAAI,IAAI,GAAG,CAAC,CACjC,SAAS,EAAE,CAAC,CACZ,SAAS,GAAG,GACiB,MAE3B,IAAIW,IAAOC,IAAOC;EAC3B;CACF;AACF;;;ACxQO,IAAMC,IAAN,cAA4BC,EAAiBC,CAAU,CAAC,CAAC;;EAC9C,KAAA,SAAA,CAACxC,GAAoBG,CAAiB;;CA0EtD,cAAc;EAcZ,AAbA,MAAM,GA7BiB,KAAA,QAAA,IAGS,KAAA,OAAA;GAAE,GAAG;GAAG,GAAG;GAAG,GAAG;GAAG,GAAG;EAAE,GAGzB,KAAA,iBAAA,IAGM,KAAA,uBAAA,IAGG,KAAA,aAAA,OAGT,KAAA,iBAAA,IAGC,KAAA,kBAAA,IAMT,KAAA,kBAAA,IACD,KAAA,iBAAA,IACE,KAAA,mBAAA,IA8HI,KAAA,uBAAA,MAA4B;GAEzD,AADasC,EAAM,aACd,CAAA,CAAK,SAAS,IAAI,KACrB,KAAK,OAAO;EAEhB,GAE4B,KAAA,oBAAA,MAA+B;GACzD,AAAIA,EAAM,QAAQ,aAEhB,KAAK,QAAQ,KAAK,gBAClB,KAAK,YAAY,KAAK,cAAc,GACpC,KAAK,iBAAiB,KAAK,cAAc,KAAK,GAC9C,KAAK,OAAO;EAEhB,GAzIE,KAAK,QAAQ,WACb,KAAK,SAAS,OACd,KAAK,QAAQ,IACb,KAAK,WAAW,CAAC,GACjB,KAAK,SAAS,IACd,KAAK,WAAW,IAChB,KAAK,WAAW,IAChB,KAAK,OAAO,MACZ,KAAK,QAAQ,IACb,KAAK,aAAa,IAClB,KAAK,eAAe,IACpB,KAAK,OAAO,IACZ,KAAK,cAAc;CACrB;CAEA,oBAA0B;EAMxB,AALA,MAAM,kBAAkB,GAExB,KAAK,uBAAuB,gBAAgB,QAC5C,KAAK,YAAY,KAAK,KAAK,GAC3B,KAAK,iBAAiB,KAAK,cAAc,KAAK,GAC9C,KAAK,aAAa,KAAK;CACzB;CAEA,uBAA6B;EAE3B,AADA,MAAM,qBAAqB,GAC3B,KAAK,uBAAuB;CAC9B;CAEA,WAAqB,GAAyC;EAK5D,AAJIC,EAAkB,IAAI,OAAO,KAAK,CAAC,KAAK,YAAY,MACtD,KAAK,YAAY,KAAK,KAAK,GAC3B,KAAK,iBAAiB,KAAK,cAAc,KAAK,IAE5CA,EAAkB,IAAI,QAAQ,MAChC,KAAK,aAAa,KAAK;CAE3B;CAEA,cAA+B;EAC7B,OAAO,KAAK,mBAAmB,KAAK,kBAAkB,KAAK;CAC7D;CAUA,YAAoB,GAAqB;EACvC,IAAMC,IAASvC,EAAWC,CAAK;EAC/B,AAAIsC,MACF,KAAK,OAAOA;CAEhB;CAOA,cAAsB,IAAsB,KAAK,QAAgB;EAC/D,OAAOX,EAAkB,KAAK,MAAMC,GAAQ,KAAK,KAAK;CACxD;CAUA,sBAAoC;EAClC,AAAI,KAAK,YAAY,KAAK,YAC1B,KAAK,YAAY;CACnB;CAOA,sBAA8B,GAA4B;EACxD,AAAI,KAAK,YAAY,KAAK,aACtBQ,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzCA,EAAM,eAAe,GACrB,KAAK,YAAY;CAErB;CAMA,cAA4B;EAC1B,AAAI,KAAK,QACP,KAAK,OAAO,KAEZ,KAAK,QAAQ,IACb,KAAK,iBAAiB,KAAK,OAC3B,KAAK,cACH,IAAI,YAAY,WAAW;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAC9D,GACA,KAAK,oBAAoB;CAE7B;CAMA,SAAuB;EAGrB,AAFA,KAAK,QAAQ,IACb,KAAK,uBAAuB,GAC5B,KAAK,cACH,IAAI,YAAY,YAAY;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAC/D;CACF;CAuBA,sBAAoC;EAElC,AADA,SAAS,iBAAiB,SAAS,KAAK,mBAAmB,GAC3D,SAAS,iBAAiB,WAAW,KAAK,gBAAgB;CAC5D;CAMA,yBAAuC;EAErC,AADA,SAAS,oBAAoB,SAAS,KAAK,mBAAmB,GAC9D,SAAS,oBAAoB,WAAW,KAAK,gBAAgB;CAC/D;CAWA,4BAAoC,GAA2B;EAC7D,AAAI,KAAK,YAAY,KAAK,aAC1BA,EAAM,eAAe,GACrB,KAAK,kBAAkB,IACvB,KAAK,WAAW,kBAAkBA,EAAM,SAAS,GACjD,KAAK,wBAAwBA,CAAK;CACpC;CAOA,4BAAoC,GAA2B;EAC7D,AAAK,KAAK,mBACV,KAAK,wBAAwBA,CAAK;CACpC;CAOA,0BAAkC,GAA2B;EAC3D,AAAK,KAAK,oBACV,KAAK,kBAAkB,IACvB,KAAK,WAAW,sBAAsBA,EAAM,SAAS,GACrD,KAAK,YAAY;CACnB;CAMA,wBAAgC,GAA2B;EACzD,IAAMG,IAAO,KAAK,WAAW,sBAAsB,GAC7CjB,IAAI,KAAK,IAAI,GAAG,KAAK,IAAIc,EAAM,UAAUG,EAAK,MAAMA,EAAK,KAAK,CAAC,GAC/DC,IAAI,KAAK,IAAI,GAAG,KAAK,IAAIJ,EAAM,UAAUG,EAAK,KAAKA,EAAK,MAAM,CAAC;EASrE,AAPA,KAAK,OAAO;GACV,GAAG,KAAK;GACR,GAAIjB,IAAIiB,EAAK,QAAS;GACtB,GAAG,MAAOC,IAAID,EAAK,SAAU;EAC/B,GAEA,KAAK,iBAAiB,KAAK,cAAc,KAAK,GAC9C,KAAK,WAAW;CAClB;CAOA,wBAAgC,GAA4B;EAC1D,IAAI,KAAK,YAAY,KAAK,UAAU;EAEpC,IAAME,IAAOL,EAAM,WAAW,KAAK,GAC/BM,IAAU;EAEd,QAAQN,EAAM,KAAd;GACE,KAAK;IAEH,AADA,KAAK,OAAO;KAAE,GAAG,KAAK;KAAM,GAAG,KAAK,IAAI,KAAK,KAAK,KAAK,IAAIK,CAAI;IAAE,GACjE,IAAU;IACV;GACF,KAAK;IAEH,AADA,KAAK,OAAO;KAAE,GAAG,KAAK;KAAM,GAAG,KAAK,IAAI,GAAG,KAAK,KAAK,IAAIA,CAAI;IAAE,GAC/D,IAAU;IACV;GACF,KAAK;IAEH,AADA,KAAK,OAAO;KAAE,GAAG,KAAK;KAAM,GAAG,KAAK,IAAI,KAAK,KAAK,KAAK,IAAIA,CAAI;IAAE,GACjE,IAAU;IACV;GACF,KAAK;IAEH,AADA,KAAK,OAAO;KAAE,GAAG,KAAK;KAAM,GAAG,KAAK,IAAI,GAAG,KAAK,KAAK,IAAIA,CAAI;IAAE,GAC/D,IAAU;IACV;GACF,KAAK;IAEH,AADA,KAAK,OAAO;KAAE,GAAG,KAAK;KAAM,GAAG;IAAE,GACjC,IAAU;IACV;GACF,KAAK,OAEH,AADA,KAAK,OAAO;IAAE,GAAG,KAAK;IAAM,GAAG;GAAI,GACnC,IAAU;EAEd;EAEA,AAAIC,MACFN,EAAM,eAAe,GACrB,KAAK,iBAAiB,KAAK,cAAc,KAAK,GAC9C,KAAK,WAAW,GAChB,KAAK,YAAY;CAErB;CAWA,sBAA8B,GAA2B;EACvD,AAAI,KAAK,YAAY,KAAK,aAC1BA,EAAM,eAAe,GACrB,KAAK,iBAAiB,IACtB,KAAK,WAAW,kBAAkBA,EAAM,SAAS,GACjD,KAAK,sBAAsBA,CAAK;CAClC;CAOA,sBAA8B,GAA2B;EACvD,AAAK,KAAK,kBACV,KAAK,sBAAsBA,CAAK;CAClC;CAOA,oBAA4B,GAA2B;EACrD,AAAK,KAAK,mBACV,KAAK,iBAAiB,IACtB,KAAK,WAAW,sBAAsBA,EAAM,SAAS,GACrD,KAAK,YAAY;CACnB;CAMA,sBAA8B,GAA2B;EACvD,IAAMG,IAAO,KAAK,WAAW,sBAAsB,GAE7CI,IADI,KAAK,IAAI,GAAG,KAAK,IAAIP,EAAM,UAAUG,EAAK,KAAKA,EAAK,MAAM,CACvD,IAAIA,EAAK,SAAU;EAIhC,AAFA,KAAK,OAAO;GAAE,GAAG,KAAK;GAAM,GAAGI;EAAI,GACnC,KAAK,iBAAiB,KAAK,cAAc,KAAK,GAC9C,KAAK,WAAW;CAClB;CAOA,kBAA0B,GAA4B;EACpD,IAAI,KAAK,YAAY,KAAK,UAAU;EAEpC,IAAMF,IAAOL,EAAM,WAAW,KAAK,GAC/BM,IAAU;EAEd,QAAQN,EAAM,KAAd;GACE,KAAK;GACL,KAAK;IAEH,AADA,KAAK,OAAO;KAAE,GAAG,KAAK;KAAM,IAAI,KAAK,KAAK,IAAIK,KAAQ;IAAI,GAC1D,IAAU;IACV;GACF,KAAK;GACL,KAAK;IAEH,AADA,KAAK,OAAO;KAAE,GAAG,KAAK;KAAM,IAAI,KAAK,KAAK,IAAIA,IAAO,OAAO;IAAI,GAChE,IAAU;IACV;GACF,KAAK;IAEH,AADA,KAAK,OAAO;KAAE,GAAG,KAAK;KAAM,GAAG;IAAE,GACjC,IAAU;IACV;GACF,KAAK,OAEH,AADA,KAAK,OAAO;IAAE,GAAG,KAAK;IAAM,GAAG;GAAI,GACnC,IAAU;EAEd;EAEA,AAAIC,MACFN,EAAM,eAAe,GACrB,KAAK,iBAAiB,KAAK,cAAc,KAAK,GAC9C,KAAK,WAAW,GAChB,KAAK,YAAY;CAErB;CAWA,wBAAgC,GAA2B;EACzD,AAAI,KAAK,YAAY,KAAK,aAC1BA,EAAM,eAAe,GACrB,KAAK,mBAAmB,IACxB,KAAK,aAAa,kBAAkBA,EAAM,SAAS,GACnD,KAAK,wBAAwBA,CAAK;CACpC;CAOA,wBAAgC,GAA2B;EACzD,AAAK,KAAK,oBACV,KAAK,wBAAwBA,CAAK;CACpC;CAOA,sBAA8B,GAA2B;EACvD,AAAK,KAAK,qBACV,KAAK,mBAAmB,IACxB,KAAK,aAAa,sBAAsBA,EAAM,SAAS,GACvD,KAAK,YAAY;CACnB;CAMA,wBAAgC,GAA2B;EACzD,IAAMG,IAAO,KAAK,aAAa,sBAAsB,GAE/CK,IADI,KAAK,IAAI,GAAG,KAAK,IAAIR,EAAM,UAAUG,EAAK,MAAMA,EAAK,KAAK,CACtD,IAAIA,EAAK;EAIvB,AAFA,KAAK,OAAO;GAAE,GAAG,KAAK;GAAM,GAAGK;EAAM,GACrC,KAAK,iBAAiB,KAAK,cAAc,KAAK,GAC9C,KAAK,WAAW;CAClB;CAOA,oBAA4B,GAA4B;EACtD,IAAI,KAAK,YAAY,KAAK,UAAU;EAEpC,IAAMH,IAAOL,EAAM,WAAW,KAAM,KAChCM,IAAU;EAEd,QAAQN,EAAM,KAAd;GACE,KAAK;GACL,KAAK;IAEH,AADA,KAAK,OAAO;KAAE,GAAG,KAAK;KAAM,GAAG,KAAK,IAAI,GAAG,KAAK,KAAK,IAAIK,CAAI;IAAE,GAC/D,IAAU;IACV;GACF,KAAK;GACL,KAAK;IAEH,AADA,KAAK,OAAO;KAAE,GAAG,KAAK;KAAM,GAAG,KAAK,IAAI,GAAG,KAAK,KAAK,IAAIA,CAAI;IAAE,GAC/D,IAAU;IACV;GACF,KAAK;IAEH,AADA,KAAK,OAAO;KAAE,GAAG,KAAK;KAAM,GAAG;IAAE,GACjC,IAAU;IACV;GACF,KAAK,OAEH,AADA,KAAK,OAAO;IAAE,GAAG,KAAK;IAAM,GAAG;GAAE,GACjC,IAAU;EAEd;EAEA,AAAIC,MACFN,EAAM,eAAe,GACrB,KAAK,iBAAiB,KAAK,cAAc,KAAK,GAC9C,KAAK,WAAW,GAChB,KAAK,YAAY;CAErB;CAWA,gBAAwB,GAAoB;EAC1C,IAAMS,IAAQT,EAAM;EACpB,KAAK,iBAAiBS,EAAM;CAC9B;CAOA,iBAAyB,GAAoB;EAE3C,IAAI7C,IADUoC,EAAM,OACF,MAAM,KAAK;EAG7B,AAAIpC,KAAS,CAACA,EAAM,WAAW,GAAG,MAChC,IAAQ,MAAMA;EAGhB,IAAMsC,IAASvC,EAAWC,CAAK;EAC/B,AAAIsC,KACF,KAAK,OAAOA,GACZ,KAAK,iBAAiB,KAAK,cAAc,KAAK,GAC9C,KAAK,WAAW,GAChB,KAAK,YAAY,KAGjB,KAAK,iBAAiB,KAAK,cAAc,KAAK;CAElD;CAQA,gBAAwB,GAA0B,GAAoB;EACpE,IAAMO,IAAQT,EAAM,QACdpC,IAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,SAAS6C,EAAM,OAAO,EAAE,KAAK,CAAC,CAAC,GAEjElC,IAAMO,EAAS,KAAK,IAAI;EAI9B,AAHA,EAAI4B,KAAW9C,GACf,KAAK,OAAOD,EAAW,QAAQY,EAAI,EAAE,IAAIA,EAAI,EAAE,IAAIA,EAAI,EAAE,IAAIA,EAAI,EAAE,EAAE,GACrE,KAAK,iBAAiB,KAAK,cAAc,KAAK,GAC9C,KAAK,WAAW;CAClB;CAMA,mBAAiC;EAC/B,KAAK,YAAY;CACnB;CAQA,gBAAwB,GAA0B,GAAoB;EACpE,IAAMkC,IAAQT,EAAM,QACdxB,IAAMa,EAAS,KAAK,IAAI;EAU9B,AARIqB,MAAY,MACd,EAAI,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,SAASD,EAAM,OAAO,EAAE,KAAK,CAAC,CAAC,IAEjE,EAAIC,KAAW,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,SAASD,EAAM,OAAO,EAAE,KAAK,CAAC,CAAC,GAG1E,KAAK,OAAO9C,EAAW,QAAQa,EAAI,EAAE,IAAIA,EAAI,EAAE,KAAKA,EAAI,EAAE,KAAKA,EAAI,EAAE,EAAE,GACvE,KAAK,iBAAiB,KAAK,cAAc,KAAK,GAC9C,KAAK,WAAW;CAClB;CAMA,mBAAiC;EAC/B,KAAK,YAAY;CACnB;CAOA,kBAA0B,GAAoB;EAC5C,IAAMiC,IAAQT,EAAM,QACdpC,IAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,SAAS6C,EAAM,OAAO,EAAE,KAAK,CAAC,CAAC;EAGvE,AAFA,KAAK,OAAO;GAAE,GAAG,KAAK;GAAM,GAAG7C,IAAQ;EAAI,GAC3C,KAAK,iBAAiB,KAAK,cAAc,KAAK,GAC9C,KAAK,WAAW;CAClB;CAMA,0BAAwC;EACtC,KAAK,YAAY;CACnB;CAMA,sBAAoC;EAClC,IAAM+C,IAAyB;GAAC;GAAO;GAAO;EAAK,GAC7CC,IAAeD,EAAQ,QAAQ,KAAK,UAAU;EACpD,KAAK,aAAaA,GAASC,IAAe,KAAKD,EAAQ;CACzD;CAWA,mBAA2B,GAAqB;EAC9C,IAAI,KAAK,YAAY,KAAK,UAAU;EAEpC,IAAMT,IAASvC,EAAWkD,CAAK;EAC/B,AAAIX,MACF,KAAK,OAAOA,GACZ,KAAK,iBAAiB,KAAK,cAAc,KAAK,GAC9C,KAAK,WAAW,GAChB,KAAK,YAAY;CAErB;CAQA,qBAA6B,GAAe,GAA4B;EACtE,CAAIF,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzCA,EAAM,eAAe,GACrB,KAAK,mBAAmBa,CAAK;CAEjC;CAWA,MAAc,oBAAmC;EAC/C,IAAI,GAAC,KAAK,wBAAwB,KAAK,YAAY,KAAK,WAExD;QAAK,kBAAkB;GACvB,IAAI;IAGF,IAAMC,IAAS,MAAM,IADE,WACF,CAAA,CAAW,KAAK;IAErC,IAAIA,EAAO,SAAS;KAClB,IAAMZ,IAASvC,EAAWmD,EAAO,OAAO;KACxC,AAAIZ,MACF,KAAK,OAAOA,GACZ,KAAK,iBAAiB,KAAK,cAAc,KAAK,GAC9C,KAAK,WAAW,GAChB,KAAK,YAAY;IAErB;GACF,QAAQ,CAER,UAAU;IACR,KAAK,kBAAkB;GACzB;EAnBuB;CAoBzB;CAUA,aAA2B;EACzB,IAAMtC,IAAQ,KAAK,cAAc;EACjC,KAAK,cACH,IAAI,YAAY,YAAY;GAC1B,QAAQ,EAAE,SAAM;GAChB,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAMA,cAA4B;EAC1B,IAAMA,IAAQ,KAAK,cAAc;EAEjC,AADA,KAAK,QAAQA,GACb,KAAK,cACH,IAAI,YAAY,aAAa;GAC3B,QAAQ,EAAE,SAAM;GAChB,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAUA,mBAA2B;EACzB,IAAMmD,IAAW,OAAO,KAAK,KAAK,EAAE,eAC9BC,IAAU,KAAK,KAAK,GACpBC,IAAU,MAAM,KAAK,KAAK;EAEhC,OAAO,CAAI;;;;;oBAKK,KAAK,WAAW,KAAK,EAAE;;qCAEN,KAAK,MAChC,KAAK,KAAK,CACZ,EAAE,gBAAgB,KAAK,MAAM,KAAK,KAAK,CAAC,EAAE;8BACpBF,EAAS;uBAChB,KAAK,4BAA4B;uBACjC,KAAK,4BAA4B;qBACnC,KAAK,0BAA0B;mBACjC,KAAK,wBAAwB;;;;yBAIvBC,EAAQ,UAAUC,EAAQ;;;;CAIjD;CAMA,mBAA2B;EACzB,IAAMA,IAAW,KAAK,KAAK,IAAI,MAAO;EAEtC,OAAO,CAAI;;;;;oBAKK,KAAK,WAAW,KAAK,EAAE;;yBAElB,KAAK,MAAM,KAAK,KAAK,CAAC,EAAE;;;uBAG1B,KAAK,sBAAsB;uBAC3B,KAAK,sBAAsB;qBAC7B,KAAK,oBAAoB;mBAC3B,KAAK,kBAAkB;;qDAEWA,EAAQ;;;CAG3D;CAOA,qBAA6B;EAC3B,IAAI,CAAC,KAAK,OAAO,OAAOC;EAExB,IAAM3C,IAAMO,EAAS,KAAK,IAAI,GACxBqC,IAAa,QAAQ5C,EAAI,EAAE,IAAIA,EAAI,EAAE,IAAIA,EAAI,EAAE,OAC/C6C,IAAW,QAAQ7C,EAAI,EAAE,IAAIA,EAAI,EAAE,IAAIA,EAAI,EAAE,OAC7CyC,IAAU,KAAK,KAAK,IAAI;EAE9B,OAAO,CAAI;;;;;oBAKK,KAAK,WAAW,KAAK,EAAE;;yBAElB,KAAK,MAAM,KAAK,KAAK,IAAI,GAAG,EAAE;;;6DAGMG,EAAW,IAAIC,EAAS;uBAC9D,KAAK,wBAAwB;uBAC7B,KAAK,wBAAwB;qBAC/B,KAAK,sBAAsB;mBAC7B,KAAK,oBAAoB;;wDAEYJ,EAAQ;;;CAG9D;CAOA,iBAAyB;EACvB,IAAMzC,IAAMO,EAAS,KAAK,IAAI,GACxBuC,IAAe,QAAQ9C,EAAI,EAAE,IAAIA,EAAI,EAAE,IAAIA,EAAI,EAAE,IAAI,KAAK,KAAK,EAAE,IACjE+C,IAAc3D,EAAW,KAAK,cAAc,GAC5C4D,IAAgBD,WACX;GACL,IAAME,IAAU1C,EAASwC,CAAW;GACpC,OAAO,QAAQE,EAAQ,EAAE,IAAIA,EAAQ,EAAE,IAAIA,EAAQ,EAAE,IAAIF,EAAY,EAAE;EACzE,EAAA,CAAG,IACHD;EAEJ,OAAO,CAAI;;;;+BAIgBE,EAAc;;;;;;+BAMdF,EAAa;;;;;;CAM1C;CAMA,kBAA0B;EACxB,OAAO,CAAI;;;;;;mBAMI,KAAK,eAAe;sBACjB,KAAK,SAAS;sBACd,KAAK,SAAS;mBACjB,KAAK,gBAAgB;oBACpB,KAAK,iBAAiB;;;;;;CAMxC;CAMA,mBAA2B;EACzB,IAAM9C,IAAMO,EAAS,KAAK,IAAI;EAE9B,OAAO,CAAI;;;;;;;;;qBASM,OAAOP,EAAI,CAAC,EAAE;wBACX,KAAK,SAAS;wBACd,KAAK,SAAS;sBAChB,MAAa,KAAK,gBAAgB,KAAK,CAAC,EAAE;sBAC1C,KAAK,iBAAiB;;;;;;;;;;;;qBAYvB,OAAOA,EAAI,CAAC,EAAE;wBACX,KAAK,SAAS;wBACd,KAAK,SAAS;sBAChB,MAAa,KAAK,gBAAgB,KAAK,CAAC,EAAE;sBAC1C,KAAK,iBAAiB;;;;;;;;;;;;qBAYvB,OAAOA,EAAI,CAAC,EAAE;wBACX,KAAK,SAAS;wBACd,KAAK,SAAS;sBAChB,MAAa,KAAK,gBAAgB,KAAK,CAAC,EAAE;sBAC1C,KAAK,iBAAiB;;;;;UAMlC,KAAK,QACD,CAAI;;;;;;;;6BAQW,OAAO,KAAK,MAAM,KAAK,KAAK,IAAI,GAAG,CAAC,EAAE;gCACnC,KAAK,SAAS;gCACd,KAAK,SAAS;6BACjB,KAAK,kBAAkB;8BACtB,KAAK,wBAAwB;;;;;kBAM7C2C,EACL;;;CAGP;CAMA,mBAA2B;EACzB,IAAM1C,IAAMa,EAAS,KAAK,IAAI;EAE9B,OAAO,CAAI;;;;;;;;;qBASM,OAAO,KAAK,MAAMb,EAAI,CAAC,CAAC,EAAE;wBACvB,KAAK,SAAS;wBACd,KAAK,SAAS;sBAChB,MAAa,KAAK,gBAAgB,KAAK,CAAC,EAAE;sBAC1C,KAAK,iBAAiB;;;;;;;;;;;;qBAYvB,OAAO,KAAK,MAAMA,EAAI,CAAC,CAAC,EAAE;wBACvB,KAAK,SAAS;wBACd,KAAK,SAAS;sBAChB,MAAa,KAAK,gBAAgB,KAAK,CAAC,EAAE;sBAC1C,KAAK,iBAAiB;;;;;;;;;;;;qBAYvB,OAAO,KAAK,MAAMA,EAAI,CAAC,CAAC,EAAE;wBACvB,KAAK,SAAS;wBACd,KAAK,SAAS;sBAChB,MAAa,KAAK,gBAAgB,KAAK,CAAC,EAAE;sBAC1C,KAAK,iBAAiB;;;;;UAMlC,KAAK,QACD,CAAI;;;;;;;;6BAQW,OAAO,KAAK,MAAM,KAAK,KAAK,IAAI,GAAG,CAAC,EAAE;gCACnC,KAAK,SAAS;gCACd,KAAK,SAAS;6BACjB,KAAK,kBAAkB;8BACtB,KAAK,wBAAwB;;;;;kBAM7C0C,EACL;;;CAGP;CAOA,gBAAwB;EACtB,OAAO,CAAI;;UAEL,KAAK,eAAe,QAAQ,KAAK,gBAAgB,IAAIA,EAAQ;UAC7D,KAAK,eAAe,QAAQ,KAAK,iBAAiB,IAAIA,EAAQ;UAC9D,KAAK,eAAe,QAAQ,KAAK,iBAAiB,IAAIA,EAAQ;;;;mBAIrD,KAAK,oBAAoB;sBACtB,KAAK,SAAS;4CACQ,KAAK,WAAW,YAAY,EAAE;;;;;;;;;;;;;;;;;;CAkBxE;CAOA,kBAA0B;EACxB,IAAMO,IAAc,KAAK,SAAS,SAAS,GACrCC,IAAqB,KAAK,cAAc,qBAAmB,MAAM;EAIvE,OAFI,CAACD,KAAe,CAACC,IAA2BR,IAEzC,CAAI;;;;;;;;YAQH,KAAK,SAAS,KACb,MAAU,CAAI;;;;;;qCAMUL,EAAM;+BACZ,KAAK,mBAAmBA,CAAK,EAAE;4BAClC,MACV,KAAK,qBAAqBA,GAAOc,CAAC,EAAE;4BAC1B,KAAK,SAAS;8BACZd,EAAM;;aAG1B,EAAE;;;;CAIV;CAMA,oBAA4B;EAG1B,OAFK,KAAK,uBAEH,CAAI;;;;iBAIE,KAAK,kBAAkB;oBACpB,KAAK,YAAY,KAAK,YAAY,KAAK,gBAAgB;;qBAEtD,KAAK,gBAAgB;;;;;;;;;;;QATCK;CAqBzC;CAOA,gBAAwB;EACtB,OAAO,CAAI;;;;;sBAKO,KAAK,SAAS,eAAe;;;;cAIrC,KAAK,iBAAiB,EAAE,GAAG,KAAK,iBAAiB,EAAE;;YAErD,KAAK,mBAAmB,EAAE;;cAExB,KAAK,eAAe,EAAE,GAAG,KAAK,cAAc,EAAE;cAC9C,KAAK,kBAAkB,EAAE;;YAE3B,KAAK,gBAAgB,EAAE;;;;;CAKjC;CAOA,eAAuB,IAAU,IAAO,GAAsB;EAC5D,IAAM3C,IAAMO,EAAS,KAAK,IAAI,GACxBuC,IAAe,QAAQ9C,EAAI,EAAE,IAAIA,EAAI,EAAE,IAAIA,EAAI,EAAE,IAAI,KAAK,KAAK,EAAE,IACjEqD,IAAW,KAAK,SAAS,KAAK;EAEpC,OAAO,CAAI;;;;;;;yBAOU,KAAK,MAAM;yBACX,KAAK,SAAS;uBAChBC,IAAU,SAASX,EAAQ;2BACvBY,KAAeZ,EAAQ;oBAC9B,KAAK,WAAW,KAAK,EAAE;oBACvB,KAAK,SAAS;iBACjB,KAAK,oBAAoB;mBACvB,KAAK,sBAAsB;;;;;iCAKbG,EAAa;;YAGlCO,IACI,CAAI;qBACC,KAAK,SAAS,KAAK,YAAY;qBAEpCV,EACL;;;;CAIT;CAEA,SAAS;EACP,IAAMa,IAAU;GACd,YAAY,KAAK;GACjB,cAAc,KAAK;GACnB,SAAS;EACX,GACM,EAAE,YAAS,mBAAgBvE,EAAkBuE,CAAO;EAK1D,OAJI,KAAK,SACA,CAAI,GAAG,KAAK,cAAc,IAAIzE,EAAmByE,CAAO,MAG1D,CAAI;;4CAE6B,KAAK,KAAK,GAC5CF,IAAU,0BAA0B,GACrC;;UAEC,KAAK,eAAeA,GAASC,CAAW,EAAE;UAE1C,KAAK,QACD,CAAI;;mCAEiB,KAAK,cAAc,EAAE;;kBAEtC,KAAK,cAAc,EAAE;kBAEzBZ,EACL;;QAED5D,EAAmByE,CAAO,EAAE;QAE5B,KAAK,OACD,CAAI;;sBAEM,KAAK,KAAK;uBACT,KAAK,cAAc,EAAE;kBAEhCb,EACL;;CAEL;AACF;AAtwCG9D,EAAA,CAAA4E,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAnC,EAAA,WAAA,SAAA,KAAA,CAAA,GAGzBzC,EAAA,CAAA4E,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAnC,EAAA,WAAA,UAAA,KAAA,CAAA,GAGzBzC,EAAA,CAAA4E,EAAS;CAAE,WAAWvE;CAAkB,SAAS;AAAK,CAAC,CAAA,GAAAoC,EAAA,WAAA,SAAA,KAAA,CAAA,GAIvDzC,EAAA,CAAA4E,EAAS,EAAE,MAAM,MAAM,CAAC,CAAA,GAAAnC,EAAA,WAAA,YAAA,KAAA,CAAA,GAGxBzC,EAAA,CAAA4E,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAAnC,EAAA,WAAA,UAAA,KAAA,CAAA,GAG1BzC,EAAA,CAAA4E,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAnC,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzCzC,EAAA,CAAA4E,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAnC,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzCzC,EAAA,CAAA4E,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAnC,EAAA,WAAA,QAAA,KAAA,CAAA,GAGxCzC,EAAA,CAAA4E,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAnC,EAAA,WAAA,SAAA,KAAA,CAAA,GAGzBzC,EAAA,CAAA4E,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAnC,EAAA,WAAA,cAAA,KAAA,CAAA,GAMzBzC,EAAA,CAAA4E,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAnC,EAAA,WAAA,gBAAA,KAAA,CAAA,GAGzBzC,EAAA,CAAA4E,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAnC,EAAA,WAAA,QAAA,KAAA,CAAA,GAGzBzC,EAAA,CAAA4E,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAnC,EAAA,WAAA,eAAA,KAAA,CAAA,GAGzBzC,EAAA,CAAA6E,EAAM,CAAA,GAAApC,EAAA,WAAA,SAAA,KAAA,CAAA,GAGNzC,EAAA,CAAA6E,EAAM,CAAA,GAAApC,EAAA,WAAA,QAAA,KAAA,CAAA,GAGNzC,EAAA,CAAA6E,EAAM,CAAA,GAAApC,EAAA,WAAA,kBAAA,KAAA,CAAA,GAGNzC,EAAA,CAAA6E,EAAM,CAAA,GAAApC,EAAA,WAAA,wBAAA,KAAA,CAAA,GAGNzC,EAAA,CAAA6E,EAAM,CAAA,GAAApC,EAAA,WAAA,cAAA,KAAA,CAAA,GAGNzC,EAAA,CAAA6E,EAAM,CAAA,GAAApC,EAAA,WAAA,kBAAA,KAAA,CAAA,GAGNzC,EAAA,CAAA6E,EAAM,CAAA,GAAApC,EAAA,WAAA,mBAAA,KAAA,CAAA,GAENzC,EAAA,CAAA8E,EAAM,aAAa,CAAA,GAAArC,EAAA,WAAA,cAAA,KAAA,CAAA,GACnBzC,EAAA,CAAA8E,EAAM,aAAa,CAAA,GAAArC,EAAA,WAAA,cAAA,KAAA,CAAA,GACnBzC,EAAA,CAAA8E,EAAM,eAAe,CAAA,GAAArC,EAAA,WAAA,gBAAA,KAAA,CAAA,GAtEvB,IAAAzC,EAAA,CAAA+E,EAAc,iBAAiB,CAAA,GAAAtC,CAAA"}