@krollins/blueprint 0.2.3 → 0.3.0

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

@@ -0,0 +1,1423 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./form-control-CBEBNz12.js";
+import { a as n, i as r, r as i } from "./field-message-CPXPLd6z.js";
+import { t as a } from "./boolean-converter-saxBDLhA.js";
+import { LitElement as o, css as s, html as c, nothing as l } from "lit";
+import { customElement as u, property as d, query as f, state as p } from "lit/decorators.js";
+//#region source/components/color-picker/color-picker.style.ts
+var m = s`
+  /* ─────────────────────────────────────────────────────────────────────────────
+   * 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-input-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-input-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;
+    }
+  }
+
+  /* Invalid: error border on the trigger */
+  .color-picker--invalid .trigger,
+  .color-picker--invalid .trigger:hover {
+    border-color: var(--bp-color-error);
+  }
+`;
+//#endregion
+//#region source/components/color-picker/color-picker.utils.ts
+function h(e) {
+	return e ? (e = e.trim().toLowerCase(), e.startsWith("#") ? g(e) : e.startsWith("rgb") ? _(e) : e.startsWith("hsl") ? v(e) : null) : null;
+}
+function g(e) {
+	e = e.replace("#", "");
+	let t, n, r, i = 1;
+	if (e.length === 3) t = parseInt(e[0] + e[0], 16), n = parseInt(e[1] + e[1], 16), r = parseInt(e[2] + e[2], 16);
+	else if (e.length === 4) t = parseInt(e[0] + e[0], 16), n = parseInt(e[1] + e[1], 16), r = parseInt(e[2] + e[2], 16), i = parseInt(e[3] + e[3], 16) / 255;
+	else if (e.length === 6) t = parseInt(e.substring(0, 2), 16), n = parseInt(e.substring(2, 4), 16), r = parseInt(e.substring(4, 6), 16);
+	else if (e.length === 8) t = parseInt(e.substring(0, 2), 16), n = parseInt(e.substring(2, 4), 16), r = parseInt(e.substring(4, 6), 16), i = parseInt(e.substring(6, 8), 16) / 255;
+	else return null;
+	return isNaN(t) || isNaN(n) || isNaN(r) || isNaN(i) ? null : y({
+		r: t,
+		g: n,
+		b: r,
+		a: i
+	});
+}
+function _(e) {
+	let t = e.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/);
+	return t ? y({
+		r: parseInt(t[1], 10),
+		g: parseInt(t[2], 10),
+		b: parseInt(t[3], 10),
+		a: t[4] === void 0 ? 1 : parseFloat(t[4])
+	}) : null;
+}
+function v(e) {
+	let t = e.match(/hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%?\s*,\s*([\d.]+)%?\s*(?:,\s*([\d.]+))?\s*\)/);
+	return t ? x({
+		h: parseFloat(t[1]),
+		s: parseFloat(t[2]),
+		l: parseFloat(t[3]),
+		a: t[4] === void 0 ? 1 : parseFloat(t[4])
+	}) : null;
+}
+function y(e) {
+	let t = e.r / 255, n = e.g / 255, r = e.b / 255, i = Math.max(t, n, r), a = i - Math.min(t, n, r), o = 0, s = i === 0 ? 0 : a / i * 100, c = i * 100;
+	return a !== 0 && (o = i === t ? 60 * ((n - r) / a % 6) : i === n ? 60 * ((r - t) / a + 2) : 60 * ((t - n) / a + 4)), o < 0 && (o += 360), {
+		h: o,
+		s,
+		v: c,
+		a: e.a
+	};
+}
+function b(e) {
+	let t = e.h, n = e.s / 100, r = e.v / 100, i = r * n, a = i * (1 - Math.abs(t / 60 % 2 - 1)), o = r - i, s, c, l;
+	return t >= 0 && t < 60 ? (s = i, c = a, l = 0) : t >= 60 && t < 120 ? (s = a, c = i, l = 0) : t >= 120 && t < 180 ? (s = 0, c = i, l = a) : t >= 180 && t < 240 ? (s = 0, c = a, l = i) : t >= 240 && t < 300 ? (s = a, c = 0, l = i) : (s = i, c = 0, l = a), {
+		r: Math.round((s + o) * 255),
+		g: Math.round((c + o) * 255),
+		b: Math.round((l + o) * 255),
+		a: e.a
+	};
+}
+function x(e) {
+	let t = e.h, n = e.s / 100, r = e.l / 100, i = r + n * Math.min(r, 1 - r);
+	return {
+		h: t,
+		s: (i === 0 ? 0 : 2 * (1 - r / i)) * 100,
+		v: i * 100,
+		a: e.a
+	};
+}
+function S(e) {
+	let t = e.h, n = e.s / 100, r = e.v / 100, i = r * (1 - n / 2);
+	return {
+		h: t,
+		s: (i === 0 || i === 1 ? 0 : (r - i) / Math.min(i, 1 - i)) * 100,
+		l: i * 100,
+		a: e.a
+	};
+}
+function C(e) {
+	return Math.round(e * 100) / 100;
+}
+function w(e, t, n) {
+	let r = b(e), i = S(e);
+	switch (t) {
+		case "rgb": return n && e.a < 1 ? `rgba(${r.r}, ${r.g}, ${r.b}, ${C(e.a)})` : `rgb(${r.r}, ${r.g}, ${r.b})`;
+		case "hsl": return n && e.a < 1 ? `hsla(${Math.round(i.h)}, ${Math.round(i.s)}%, ${Math.round(i.l)}%, ${C(e.a)})` : `hsl(${Math.round(i.h)}, ${Math.round(i.s)}%, ${Math.round(i.l)}%)`;
+		default: {
+			let t = r.r.toString(16).padStart(2, "0"), i = r.g.toString(16).padStart(2, "0"), a = r.b.toString(16).padStart(2, "0");
+			return n && e.a < 1 ? `#${t}${i}${a}${Math.round(e.a * 255).toString(16).padStart(2, "0")}` : `#${t}${i}${a}`;
+		}
+	}
+}
+//#endregion
+//#region source/components/color-picker/color-picker.ts
+var T = class extends t(o) {
+	static {
+		this.styles = [r, m];
+	}
+	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 = (e) => {
+			e.composedPath().includes(this) || this._close();
+		}, this._handleEscapeKey = (e) => {
+			e.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.helperText = "", this.errorMessage = "", 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(e) {
+		e.has("value") && !this._isDragging() && (this._parseValue(this.value), this._hexInputValue = this._formatOutput("hex")), e.has("format") && (this._inputMode = this.format);
+	}
+	_isDragging() {
+		return this._isDraggingArea || this._isDraggingHue || this._isDraggingAlpha;
+	}
+	_parseValue(e) {
+		let t = h(e);
+		t && (this._hsv = t);
+	}
+	_formatOutput(e = this.format) {
+		return w(this._hsv, e, this.alpha);
+	}
+	_handleTriggerClick() {
+		this.disabled || this.readonly || this._toggleOpen();
+	}
+	_handleTriggerKeydown(e) {
+		this.disabled || this.readonly || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._toggleOpen());
+	}
+	_toggleOpen() {
+		this._open ? this._close() : (this._open = !0, this._originalValue = this.value, this.dispatchEvent(new CustomEvent("bp-open", {
+			bubbles: !0,
+			composed: !0
+		})), this._addGlobalListeners());
+	}
+	_close() {
+		this._open = !1, this._removeGlobalListeners(), this.dispatchEvent(new CustomEvent("bp-close", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_addGlobalListeners() {
+		document.addEventListener("click", this._handleOutsideClick), document.addEventListener("keydown", this._handleEscapeKey);
+	}
+	_removeGlobalListeners() {
+		document.removeEventListener("click", this._handleOutsideClick), document.removeEventListener("keydown", this._handleEscapeKey);
+	}
+	_handleColorAreaPointerDown(e) {
+		this.disabled || this.readonly || (e.preventDefault(), this._isDraggingArea = !0, this._colorArea.setPointerCapture(e.pointerId), this._updateColorFromPointer(e));
+	}
+	_handleColorAreaPointerMove(e) {
+		this._isDraggingArea && this._updateColorFromPointer(e);
+	}
+	_handleColorAreaPointerUp(e) {
+		this._isDraggingArea && (this._isDraggingArea = !1, this._colorArea.releasePointerCapture(e.pointerId), this._emitChange());
+	}
+	_updateColorFromPointer(e) {
+		let t = this._colorArea.getBoundingClientRect(), n = Math.max(0, Math.min(e.clientX - t.left, t.width)), r = Math.max(0, Math.min(e.clientY - t.top, t.height));
+		this._hsv = {
+			...this._hsv,
+			s: n / t.width * 100,
+			v: 100 - r / t.height * 100
+		}, this._hexInputValue = this._formatOutput("hex"), this._emitInput();
+	}
+	_handleColorAreaKeydown(e) {
+		if (this.disabled || this.readonly) return;
+		let t = e.shiftKey ? 10 : 1, n = !1;
+		switch (e.key) {
+			case "ArrowRight":
+				this._hsv = {
+					...this._hsv,
+					s: Math.min(100, this._hsv.s + t)
+				}, n = !0;
+				break;
+			case "ArrowLeft":
+				this._hsv = {
+					...this._hsv,
+					s: Math.max(0, this._hsv.s - t)
+				}, n = !0;
+				break;
+			case "ArrowUp":
+				this._hsv = {
+					...this._hsv,
+					v: Math.min(100, this._hsv.v + t)
+				}, n = !0;
+				break;
+			case "ArrowDown":
+				this._hsv = {
+					...this._hsv,
+					v: Math.max(0, this._hsv.v - t)
+				}, n = !0;
+				break;
+			case "Home":
+				this._hsv = {
+					...this._hsv,
+					s: 0
+				}, n = !0;
+				break;
+			case "End": this._hsv = {
+				...this._hsv,
+				s: 100
+			}, n = !0;
+		}
+		n && (e.preventDefault(), this._hexInputValue = this._formatOutput("hex"), this._emitInput(), this._emitChange());
+	}
+	_handleHuePointerDown(e) {
+		this.disabled || this.readonly || (e.preventDefault(), this._isDraggingHue = !0, this._hueSlider.setPointerCapture(e.pointerId), this._updateHueFromPointer(e));
+	}
+	_handleHuePointerMove(e) {
+		this._isDraggingHue && this._updateHueFromPointer(e);
+	}
+	_handleHuePointerUp(e) {
+		this._isDraggingHue && (this._isDraggingHue = !1, this._hueSlider.releasePointerCapture(e.pointerId), this._emitChange());
+	}
+	_updateHueFromPointer(e) {
+		let t = this._hueSlider.getBoundingClientRect(), n = Math.max(0, Math.min(e.clientY - t.top, t.height)) / t.height * 360;
+		this._hsv = {
+			...this._hsv,
+			h: n
+		}, this._hexInputValue = this._formatOutput("hex"), this._emitInput();
+	}
+	_handleHueKeydown(e) {
+		if (this.disabled || this.readonly) return;
+		let t = e.shiftKey ? 10 : 1, n = !1;
+		switch (e.key) {
+			case "ArrowDown":
+			case "ArrowRight":
+				this._hsv = {
+					...this._hsv,
+					h: (this._hsv.h + t) % 360
+				}, n = !0;
+				break;
+			case "ArrowUp":
+			case "ArrowLeft":
+				this._hsv = {
+					...this._hsv,
+					h: (this._hsv.h - t + 360) % 360
+				}, n = !0;
+				break;
+			case "Home":
+				this._hsv = {
+					...this._hsv,
+					h: 0
+				}, n = !0;
+				break;
+			case "End": this._hsv = {
+				...this._hsv,
+				h: 359
+			}, n = !0;
+		}
+		n && (e.preventDefault(), this._hexInputValue = this._formatOutput("hex"), this._emitInput(), this._emitChange());
+	}
+	_handleAlphaPointerDown(e) {
+		this.disabled || this.readonly || (e.preventDefault(), this._isDraggingAlpha = !0, this._alphaSlider.setPointerCapture(e.pointerId), this._updateAlphaFromPointer(e));
+	}
+	_handleAlphaPointerMove(e) {
+		this._isDraggingAlpha && this._updateAlphaFromPointer(e);
+	}
+	_handleAlphaPointerUp(e) {
+		this._isDraggingAlpha && (this._isDraggingAlpha = !1, this._alphaSlider.releasePointerCapture(e.pointerId), this._emitChange());
+	}
+	_updateAlphaFromPointer(e) {
+		let t = this._alphaSlider.getBoundingClientRect(), n = Math.max(0, Math.min(e.clientX - t.left, t.width)) / t.width;
+		this._hsv = {
+			...this._hsv,
+			a: n
+		}, this._hexInputValue = this._formatOutput("hex"), this._emitInput();
+	}
+	_handleAlphaKeydown(e) {
+		if (this.disabled || this.readonly) return;
+		let t = e.shiftKey ? .1 : .01, n = !1;
+		switch (e.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				this._hsv = {
+					...this._hsv,
+					a: Math.min(1, this._hsv.a + t)
+				}, n = !0;
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				this._hsv = {
+					...this._hsv,
+					a: Math.max(0, this._hsv.a - t)
+				}, n = !0;
+				break;
+			case "Home":
+				this._hsv = {
+					...this._hsv,
+					a: 0
+				}, n = !0;
+				break;
+			case "End": this._hsv = {
+				...this._hsv,
+				a: 1
+			}, n = !0;
+		}
+		n && (e.preventDefault(), this._hexInputValue = this._formatOutput("hex"), this._emitInput(), this._emitChange());
+	}
+	_handleHexInput(e) {
+		let t = e.target;
+		this._hexInputValue = t.value;
+	}
+	_handleHexChange(e) {
+		let t = e.target.value.trim();
+		t && !t.startsWith("#") && (t = "#" + t);
+		let n = h(t);
+		n ? (this._hsv = n, this._hexInputValue = this._formatOutput("hex"), this._emitInput(), this._emitChange()) : this._hexInputValue = this._formatOutput("hex");
+	}
+	_handleRgbInput(e, t) {
+		let n = t.target, r = Math.max(0, Math.min(255, parseInt(n.value, 10) || 0)), i = b(this._hsv);
+		i[e] = r, this._hsv = h(`rgba(${i.r}, ${i.g}, ${i.b}, ${i.a})`), this._hexInputValue = this._formatOutput("hex"), this._emitInput();
+	}
+	_handleRgbChange() {
+		this._emitChange();
+	}
+	_handleHslInput(e, t) {
+		let n = t.target, r = S(this._hsv);
+		e === "h" ? r.h = Math.max(0, Math.min(360, parseInt(n.value, 10) || 0)) : r[e] = Math.max(0, Math.min(100, parseInt(n.value, 10) || 0)), this._hsv = h(`hsla(${r.h}, ${r.s}%, ${r.l}%, ${r.a})`), this._hexInputValue = this._formatOutput("hex"), this._emitInput();
+	}
+	_handleHslChange() {
+		this._emitChange();
+	}
+	_handleAlphaInput(e) {
+		let t = e.target, n = Math.max(0, Math.min(100, parseInt(t.value, 10) || 0));
+		this._hsv = {
+			...this._hsv,
+			a: n / 100
+		}, this._hexInputValue = this._formatOutput("hex"), this._emitInput();
+	}
+	_handleAlphaInputChange() {
+		this._emitChange();
+	}
+	_handleFormatToggle() {
+		let e = [
+			"hex",
+			"rgb",
+			"hsl"
+		], t = e.indexOf(this._inputMode);
+		this._inputMode = e[(t + 1) % e.length];
+	}
+	_handleSwatchClick(e) {
+		if (this.disabled || this.readonly) return;
+		let t = h(e);
+		t && (this._hsv = t, this._hexInputValue = this._formatOutput("hex"), this._emitInput(), this._emitChange());
+	}
+	_handleSwatchKeydown(e, t) {
+		(t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._handleSwatchClick(e));
+	}
+	async _handleEyedropper() {
+		if (!(!this._eyedropperSupported || this.disabled || this.readonly)) {
+			this._isPickingColor = !0;
+			try {
+				let e = await new EyeDropper().open();
+				if (e.sRGBHex) {
+					let t = h(e.sRGBHex);
+					t && (this._hsv = t, this._hexInputValue = this._formatOutput("hex"), this._emitInput(), this._emitChange());
+				}
+			} catch {} finally {
+				this._isPickingColor = !1;
+			}
+		}
+	}
+	_emitInput() {
+		let e = this._formatOutput();
+		this.dispatchEvent(new CustomEvent("bp-input", {
+			detail: { value: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_emitChange() {
+		let e = this._formatOutput();
+		this.value = e, this.dispatchEvent(new CustomEvent("bp-change", {
+			detail: { value: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_renderColorArea() {
+		let e = `hsl(${this._hsv.h}, 100%, 50%)`, t = this._hsv.s, n = 100 - this._hsv.v;
+		return c`
+      <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: ${e}"
+        @pointerdown=${this._handleColorAreaPointerDown}
+        @pointermove=${this._handleColorAreaPointerMove}
+        @pointerup=${this._handleColorAreaPointerUp}
+        @keydown=${this._handleColorAreaKeydown}
+      >
+        <div
+          class="color-area-handle"
+          style="left: ${t}%; top: ${n}%"
+        ></div>
+      </div>
+    `;
+	}
+	_renderHueSlider() {
+		let e = this._hsv.h / 360 * 100;
+		return c`
+      <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: ${e}%"></div>
+      </div>
+    `;
+	}
+	_renderAlphaSlider() {
+		if (!this.alpha) return l;
+		let e = b(this._hsv), t = `rgba(${e.r}, ${e.g}, ${e.b}, 0)`, n = `rgba(${e.r}, ${e.g}, ${e.b}, 1)`, r = this._hsv.a * 100;
+		return c`
+      <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, ${t}, ${n})"
+        @pointerdown=${this._handleAlphaPointerDown}
+        @pointermove=${this._handleAlphaPointerMove}
+        @pointerup=${this._handleAlphaPointerUp}
+        @keydown=${this._handleAlphaKeydown}
+      >
+        <div class="alpha-slider-handle" style="left: ${r}%"></div>
+      </div>
+    `;
+	}
+	_renderPreview() {
+		let e = b(this._hsv), t = `rgba(${e.r}, ${e.g}, ${e.b}, ${this._hsv.a})`, n = h(this._originalValue), r = n ? (() => {
+			let e = b(n);
+			return `rgba(${e.r}, ${e.g}, ${e.b}, ${n.a})`;
+		})() : t;
+		return c`
+      <div class="preview" part="preview">
+        <div
+          class="preview-swatch preview-original"
+          style="background: ${r}"
+          title="Original color"
+          aria-label="Original color"
+        ></div>
+        <div
+          class="preview-swatch preview-current"
+          style="background: ${t}"
+          title="Current color"
+          aria-label="Current color"
+        ></div>
+      </div>
+    `;
+	}
+	_renderHexInput() {
+		return c`
+      <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>
+    `;
+	}
+	_renderRgbInputs() {
+		let e = b(this._hsv);
+		return c`
+      <div class="input-row">
+        <div class="input-group">
+          <input
+            type="number"
+            class="color-input"
+            part="input"
+            min="0"
+            max="255"
+            .value=${String(e.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(e.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(e.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 ? c`
+                <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>
+              ` : l}
+      </div>
+    `;
+	}
+	_renderHslInputs() {
+		let e = S(this._hsv);
+		return c`
+      <div class="input-row">
+        <div class="input-group">
+          <input
+            type="number"
+            class="color-input"
+            part="input"
+            min="0"
+            max="360"
+            .value=${String(Math.round(e.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(e.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(e.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 ? c`
+                <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>
+              ` : l}
+      </div>
+    `;
+	}
+	_renderInputs() {
+		return c`
+      <div class="inputs-container">
+        ${this._inputMode === "hex" ? this._renderHexInput() : l}
+        ${this._inputMode === "rgb" ? this._renderRgbInputs() : l}
+        ${this._inputMode === "hsl" ? this._renderHslInputs() : l}
+        <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>
+    `;
+	}
+	_renderSwatches() {
+		let e = this.swatches.length > 0, t = this.querySelector("[slot=\"swatches\"]") !== null;
+		return !e && !t ? l : c`
+      <div
+        class="swatches-container"
+        part="swatches"
+        role="listbox"
+        aria-label="Color swatches"
+      >
+        <slot name="swatches">
+          ${this.swatches.map((e) => c`
+              <button
+                type="button"
+                class="swatch"
+                part="swatch"
+                role="option"
+                style="background: ${e}"
+                @click=${() => this._handleSwatchClick(e)}
+                @keydown=${(t) => this._handleSwatchKeydown(e, t)}
+                ?disabled=${this.disabled}
+                aria-label="${e}"
+              ></button>
+            `)}
+        </slot>
+      </div>
+    `;
+	}
+	_renderEyedropper() {
+		return this._eyedropperSupported ? c`
+      <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>
+    ` : l;
+	}
+	_renderPicker() {
+		return c`
+      <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>
+    `;
+	}
+	_renderTrigger(e = !1, t) {
+		let n = b(this._hsv), r = `rgba(${n.r}, ${n.g}, ${n.b}, ${this._hsv.a})`, i = this.label || this.placeholder;
+		return c`
+      <button
+        type="button"
+        class="trigger"
+        part="trigger"
+        role="button"
+        aria-haspopup="dialog"
+        aria-expanded="${this._open}"
+        aria-disabled="${this.disabled}"
+        aria-invalid=${e ? "true" : l}
+        aria-describedby=${t ?? l}
+        tabindex="${this.disabled ? -1 : 0}"
+        ?disabled=${this.disabled}
+        @click=${this._handleTriggerClick}
+        @keydown=${this._handleTriggerKeydown}
+      >
+        <slot name="trigger">
+          <span
+            class="trigger-swatch"
+            style="background: ${r}"
+          ></span>
+          ${i ? c`<span class="trigger-label"
+                  >${this.label || this.placeholder}</span
+                >` : l}
+        </slot>
+      </button>
+    `;
+	}
+	render() {
+		let e = {
+			helperText: this.helperText,
+			errorMessage: this.errorMessage,
+			invalid: !1
+		}, { invalid: t, describedBy: r } = i(e);
+		return this.inline ? c`${this._renderPicker()}${n(e)}` : c`
+      <div
+        class="color-picker color-picker--${this.size} ${t ? "color-picker--invalid" : ""}"
+      >
+        ${this._renderTrigger(t, r)}
+        ${this._open ? c`
+                <div aria-live="polite" aria-atomic="true" class="sr-only">
+                  Current color: ${this._formatOutput()}
+                </div>
+                ${this._renderPicker()}
+              ` : l}
+      </div>
+      ${n(e)}
+      ${this.name ? c`<input
+              type="hidden"
+              name="${this.name}"
+              .value=${this._formatOutput()}
+            />` : l}
+    `;
+	}
+};
+e([d({ type: String })], T.prototype, "value", void 0), e([d({ type: String })], T.prototype, "format", void 0), e([d({
+	converter: a,
+	reflect: !0
+})], T.prototype, "alpha", void 0), e([d({ type: Array })], T.prototype, "swatches", void 0), e([d({ type: Boolean })], T.prototype, "inline", void 0), e([d({
+	type: Boolean,
+	reflect: !0
+})], T.prototype, "disabled", void 0), e([d({
+	type: Boolean,
+	reflect: !0
+})], T.prototype, "readonly", void 0), e([d({
+	type: String,
+	reflect: !0
+})], T.prototype, "size", void 0), e([d({ type: String })], T.prototype, "label", void 0), e([d({ type: String })], T.prototype, "helperText", void 0), e([d({ type: String })], T.prototype, "errorMessage", void 0), e([d({ type: String })], T.prototype, "name", void 0), e([d({ type: String })], T.prototype, "placeholder", void 0), e([p()], T.prototype, "_open", void 0), e([p()], T.prototype, "_hsv", void 0), e([p()], T.prototype, "_originalValue", void 0), e([p()], T.prototype, "_eyedropperSupported", void 0), e([p()], T.prototype, "_inputMode", void 0), e([p()], T.prototype, "_hexInputValue", void 0), e([p()], T.prototype, "_isPickingColor", void 0), e([f(".color-area")], T.prototype, "_colorArea", void 0), e([f(".hue-slider")], T.prototype, "_hueSlider", void 0), e([f(".alpha-slider")], T.prototype, "_alphaSlider", void 0), T = e([u("bp-color-picker")], T);
+//#endregion
+export { T as t };
+
+//# sourceMappingURL=color-picker-C3-0c3_0.js.map