@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-colorpicker.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { model, input, signal, viewChild, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, Injector, model, input, signal, viewChild, computed, afterNextRender, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFormat, cbFieldState } from '@caribeng/ui';
 
 let nextUid = 0;
 const DEFAULT_PRESETS = [
@@ -23,6 +23,10 @@ const DEFAULT_PRESETS = [
  */
 class CbColorPicker {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.injector = inject(Injector);
         /** Color seleccionado (hex `#rrggbb`). Two-way opcional fuera de Forms. */
         this.value = model('#10b981', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -85,7 +89,13 @@ class CbColorPicker {
     toggle() {
         if (this.isDisabled())
             return;
-        this.open() ? this.close() : this.open.set(true);
+        if (this.open()) {
+            this.close();
+            return;
+        }
+        this.open.set(true);
+        // El panel se pinta al final del documento: el foco entra en él al abrir.
+        afterNextRender(() => this.svRef()?.nativeElement.focus(), { injector: this.injector });
     }
     close() {
         if (!this.open())
@@ -98,7 +108,63 @@ class CbColorPicker {
         if (event.key === 'Escape') {
             event.preventDefault();
             this.close();
+            return;
+        }
+        // Tab fuera del panel (antes del primero o después del último) lo cierra y vuelve al botón.
+        if (event.key !== 'Tab' || !(event.target instanceof Element))
+            return;
+        const panel = event.target.closest('.cb-colorpicker__panel');
+        const focusables = panel ? Array.from(panel.querySelectorAll('[tabindex="0"], input, button')) : [];
+        const edge = event.shiftKey ? focusables[0] : focusables[focusables.length - 1];
+        if (event.target === edge) {
+            event.preventDefault();
+            this.close();
+        }
+    }
+    // --- Teclado en el área y el matiz (Mayús: pasos de 10) --------------------
+    onSvKeydown(event) {
+        const step = event.shiftKey ? 10 : 1;
+        const clamp = (n) => Math.min(100, Math.max(0, n));
+        switch (event.key) {
+            case 'ArrowRight':
+                this.s.set(clamp(this.s() + step));
+                break;
+            case 'ArrowLeft':
+                this.s.set(clamp(this.s() - step));
+                break;
+            case 'ArrowUp':
+                this.v.set(clamp(this.v() + step));
+                break;
+            case 'ArrowDown':
+                this.v.set(clamp(this.v() - step));
+                break;
+            default: return;
         }
+        event.preventDefault();
+        this.commitFromHsv();
+    }
+    onHueKeydown(event) {
+        const step = event.shiftKey ? 10 : 1;
+        const clamp = (n) => Math.min(360, Math.max(0, n));
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                this.h.set(clamp(this.h() + step));
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                this.h.set(clamp(this.h() - step));
+                break;
+            case 'Home':
+                this.h.set(0);
+                break;
+            case 'End':
+                this.h.set(360);
+                break;
+            default: return;
+        }
+        event.preventDefault();
+        this.commitFromHsv();
     }
     // --- Área saturación/valor -------------------------------------------------
     onSvPointerDown(event) {
@@ -191,7 +257,7 @@ class CbColorPicker {
       [disabled]="isDisabled()"
       [attr.aria-haspopup]="'dialog'"
       [attr.aria-expanded]="open()"
-      [attr.aria-label]="(ariaLabel() || 'Color') + ': ' + value()"
+      [attr.aria-label]="(ariaLabel() || t().color) + ': ' + value()"
       (click)="toggle()"
     >
       <span class="cb-colorpicker__swatch" [style.background-color]="value()"></span>
@@ -210,12 +276,20 @@ class CbColorPicker {
       (overlayKeydown)="onOverlayKeydown($event)"
       (detach)="close()"
     >
-      <div class="cb-colorpicker__panel" role="dialog" [attr.aria-label]="ariaLabel() || 'Selector de color'">
+      <div class="cb-colorpicker__panel" role="dialog" [attr.aria-label]="ariaLabel() || t().colorPicker">
         <div
           #sv
           class="cb-colorpicker__sv"
+          role="slider"
+          tabindex="0"
+          [attr.aria-label]="t().colorArea"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          [attr.aria-valuenow]="s()"
+          [attr.aria-valuetext]="fmt(t().colorAreaValue, s(), v())"
           [style.background-color]="hueColor()"
           (pointerdown)="onSvPointerDown($event)"
+          (keydown)="onSvKeydown($event)"
         >
           <div class="cb-colorpicker__sv-white"></div>
           <div class="cb-colorpicker__sv-black"></div>
@@ -231,7 +305,14 @@ class CbColorPicker {
           <div
             #hue
             class="cb-colorpicker__hue"
+            role="slider"
+            tabindex="0"
+            [attr.aria-label]="t().hue"
+            aria-valuemin="0"
+            aria-valuemax="360"
+            [attr.aria-valuenow]="h()"
             (pointerdown)="onHuePointerDown($event)"
+            (keydown)="onHueKeydown($event)"
           >
             <div class="cb-colorpicker__hue-pointer" [style.left.%]="(h() / 360) * 100"></div>
           </div>
@@ -244,7 +325,7 @@ class CbColorPicker {
             type="text"
             spellcheck="false"
             autocomplete="off"
-            aria-label="Color hexadecimal"
+            [attr.aria-label]="t().hexColor"
             [value]="value()"
             (change)="onHexInput($event)"
           />
@@ -266,7 +347,7 @@ class CbColorPicker {
         }
       </div>
     </ng-template>
-  `, isInline: true, styles: [":host{display:inline-block}.cb-colorpicker__trigger{display:inline-flex;align-items:center;gap:var(--cb-space-2);min-height:2.5rem;padding:0 var(--cb-space-3) 0 var(--cb-space-2);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);color:var(--cb-color-text);font-family:var(--cb-font-sans);cursor:pointer;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-colorpicker__trigger--sm{min-height:2.125rem;font-size:var(--cb-text-sm)}.cb-colorpicker__trigger--lg{min-height:2.875rem;font-size:var(--cb-text-lg)}.cb-colorpicker__trigger:focus-visible,.cb-colorpicker__trigger.cb-is-open{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-colorpicker__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-colorpicker__trigger.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-colorpicker__swatch{width:1.5rem;height:1.5rem;flex:none;border-radius:var(--cb-radius-sm);box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__value{font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.02em}.cb-colorpicker__panel{width:15rem;padding:var(--cb-space-3);background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);font-family:var(--cb-font-sans)}.cb-colorpicker__sv{position:relative;height:9rem;border-radius:var(--cb-radius-sm);cursor:crosshair;touch-action:none;overflow:hidden}.cb-colorpicker__sv-white,.cb-colorpicker__sv-black{position:absolute;inset:0}.cb-colorpicker__sv-white{background:linear-gradient(to right,#fff,#fff0)}.cb-colorpicker__sv-black{background:linear-gradient(to top,#000,#0000)}.cb-colorpicker__sv-pointer{position:absolute;width:.875rem;height:.875rem;transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);border:2px solid #fff;box-shadow:0 0 0 1px #0000004d;pointer-events:none}.cb-colorpicker__controls{display:flex;align-items:center;gap:var(--cb-space-3);margin-top:var(--cb-space-3)}.cb-colorpicker__hue{position:relative;flex:1 1 auto;height:.875rem;border-radius:var(--cb-radius-full);cursor:pointer;touch-action:none;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cb-colorpicker__hue-pointer{position:absolute;top:50%;width:1rem;height:1rem;transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);background:#fff;box-shadow:0 0 0 1px #0000004d;pointer-events:none}.cb-colorpicker__preview{width:1.75rem;height:1.75rem;flex:none;border-radius:var(--cb-radius-sm);box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__fields{margin-top:var(--cb-space-3)}.cb-colorpicker__hex{width:100%;padding:var(--cb-space-2);text-align:center;text-transform:uppercase;font-variant-numeric:tabular-nums;letter-spacing:.04em;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-mono, monospace);outline:none}.cb-colorpicker__hex:focus{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-colorpicker__presets{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--cb-space-2);margin-top:var(--cb-space-3)}.cb-colorpicker__preset{aspect-ratio:1;border:none;border-radius:var(--cb-radius-sm);cursor:pointer;box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__preset.cb-is-active{box-shadow:inset 0 0 0 1px #00000026,0 0 0 2px var(--cb-color-primary-500)}.cb-colorpicker__preset:focus-visible{outline:2px solid var(--cb-color-primary-500);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:inline-block}.cb-colorpicker__trigger{display:inline-flex;align-items:center;gap:var(--cb-space-2);min-height:2.5rem;padding:0 var(--cb-space-3) 0 var(--cb-space-2);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);color:var(--cb-color-text);font-family:var(--cb-font-sans);cursor:pointer;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-colorpicker__trigger--sm{min-height:2.125rem;font-size:var(--cb-text-sm)}.cb-colorpicker__trigger--lg{min-height:2.875rem;font-size:var(--cb-text-lg)}.cb-colorpicker__trigger:focus-visible,.cb-colorpicker__trigger.cb-is-open{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-colorpicker__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-colorpicker__trigger.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-colorpicker__swatch{width:1.5rem;height:1.5rem;flex:none;border-radius:var(--cb-radius-sm);box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__value{font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.02em}.cb-colorpicker__panel{width:15rem;padding:var(--cb-space-3);background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);font-family:var(--cb-font-sans)}.cb-colorpicker__sv{position:relative;height:9rem;border-radius:var(--cb-radius-sm);cursor:crosshair;touch-action:none;overflow:hidden}.cb-colorpicker__sv-white,.cb-colorpicker__sv-black{position:absolute;inset:0}.cb-colorpicker__sv-white{background:linear-gradient(to right,#fff,#fff0)}.cb-colorpicker__sv-black{background:linear-gradient(to top,#000,#0000)}.cb-colorpicker__sv-pointer{position:absolute;width:.875rem;height:.875rem;transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);border:2px solid #fff;box-shadow:0 0 0 1px #0000004d;pointer-events:none}.cb-colorpicker__controls{display:flex;align-items:center;gap:var(--cb-space-3);margin-top:var(--cb-space-3)}.cb-colorpicker__hue{position:relative;flex:1 1 auto;height:.875rem;border-radius:var(--cb-radius-full);cursor:pointer;touch-action:none;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cb-colorpicker__hue-pointer{position:absolute;top:50%;width:1rem;height:1rem;transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);background:#fff;box-shadow:0 0 0 1px #0000004d;pointer-events:none}.cb-colorpicker__preview{width:1.75rem;height:1.75rem;flex:none;border-radius:var(--cb-radius-sm);box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__fields{margin-top:var(--cb-space-3)}.cb-colorpicker__hex{width:100%;padding:var(--cb-space-2);text-align:center;text-transform:uppercase;font-variant-numeric:tabular-nums;letter-spacing:.04em;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-mono, monospace);outline:none}.cb-colorpicker__hex:focus{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-colorpicker__presets{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--cb-space-2);margin-top:var(--cb-space-3)}.cb-colorpicker__preset{aspect-ratio:1;border:none;border-radius:var(--cb-radius-sm);cursor:pointer;box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__preset.cb-is-active{box-shadow:inset 0 0 0 1px #00000026,0 0 0 2px var(--cb-color-primary-500)}.cb-colorpicker__sv:focus-visible,.cb-colorpicker__hue:focus-visible{outline:2px solid var(--cb-color-primary-500);outline-offset:2px}.cb-colorpicker__preset:focus-visible{outline:2px solid var(--cb-color-primary-500);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbColorPicker, decorators: [{
             type: Component,
@@ -288,7 +369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       [disabled]="isDisabled()"
       [attr.aria-haspopup]="'dialog'"
       [attr.aria-expanded]="open()"
-      [attr.aria-label]="(ariaLabel() || 'Color') + ': ' + value()"
+      [attr.aria-label]="(ariaLabel() || t().color) + ': ' + value()"
       (click)="toggle()"
     >
       <span class="cb-colorpicker__swatch" [style.background-color]="value()"></span>
@@ -307,12 +388,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       (overlayKeydown)="onOverlayKeydown($event)"
       (detach)="close()"
     >
-      <div class="cb-colorpicker__panel" role="dialog" [attr.aria-label]="ariaLabel() || 'Selector de color'">
+      <div class="cb-colorpicker__panel" role="dialog" [attr.aria-label]="ariaLabel() || t().colorPicker">
         <div
           #sv
           class="cb-colorpicker__sv"
+          role="slider"
+          tabindex="0"
+          [attr.aria-label]="t().colorArea"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          [attr.aria-valuenow]="s()"
+          [attr.aria-valuetext]="fmt(t().colorAreaValue, s(), v())"
           [style.background-color]="hueColor()"
           (pointerdown)="onSvPointerDown($event)"
+          (keydown)="onSvKeydown($event)"
         >
           <div class="cb-colorpicker__sv-white"></div>
           <div class="cb-colorpicker__sv-black"></div>
@@ -328,7 +417,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           <div
             #hue
             class="cb-colorpicker__hue"
+            role="slider"
+            tabindex="0"
+            [attr.aria-label]="t().hue"
+            aria-valuemin="0"
+            aria-valuemax="360"
+            [attr.aria-valuenow]="h()"
             (pointerdown)="onHuePointerDown($event)"
+            (keydown)="onHueKeydown($event)"
           >
             <div class="cb-colorpicker__hue-pointer" [style.left.%]="(h() / 360) * 100"></div>
           </div>
@@ -341,7 +437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type="text"
             spellcheck="false"
             autocomplete="off"
-            aria-label="Color hexadecimal"
+            [attr.aria-label]="t().hexColor"
             [value]="value()"
             (change)="onHexInput($event)"
           />
@@ -363,7 +459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       </div>
     </ng-template>
-  `, styles: [":host{display:inline-block}.cb-colorpicker__trigger{display:inline-flex;align-items:center;gap:var(--cb-space-2);min-height:2.5rem;padding:0 var(--cb-space-3) 0 var(--cb-space-2);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);color:var(--cb-color-text);font-family:var(--cb-font-sans);cursor:pointer;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-colorpicker__trigger--sm{min-height:2.125rem;font-size:var(--cb-text-sm)}.cb-colorpicker__trigger--lg{min-height:2.875rem;font-size:var(--cb-text-lg)}.cb-colorpicker__trigger:focus-visible,.cb-colorpicker__trigger.cb-is-open{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-colorpicker__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-colorpicker__trigger.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-colorpicker__swatch{width:1.5rem;height:1.5rem;flex:none;border-radius:var(--cb-radius-sm);box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__value{font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.02em}.cb-colorpicker__panel{width:15rem;padding:var(--cb-space-3);background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);font-family:var(--cb-font-sans)}.cb-colorpicker__sv{position:relative;height:9rem;border-radius:var(--cb-radius-sm);cursor:crosshair;touch-action:none;overflow:hidden}.cb-colorpicker__sv-white,.cb-colorpicker__sv-black{position:absolute;inset:0}.cb-colorpicker__sv-white{background:linear-gradient(to right,#fff,#fff0)}.cb-colorpicker__sv-black{background:linear-gradient(to top,#000,#0000)}.cb-colorpicker__sv-pointer{position:absolute;width:.875rem;height:.875rem;transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);border:2px solid #fff;box-shadow:0 0 0 1px #0000004d;pointer-events:none}.cb-colorpicker__controls{display:flex;align-items:center;gap:var(--cb-space-3);margin-top:var(--cb-space-3)}.cb-colorpicker__hue{position:relative;flex:1 1 auto;height:.875rem;border-radius:var(--cb-radius-full);cursor:pointer;touch-action:none;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cb-colorpicker__hue-pointer{position:absolute;top:50%;width:1rem;height:1rem;transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);background:#fff;box-shadow:0 0 0 1px #0000004d;pointer-events:none}.cb-colorpicker__preview{width:1.75rem;height:1.75rem;flex:none;border-radius:var(--cb-radius-sm);box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__fields{margin-top:var(--cb-space-3)}.cb-colorpicker__hex{width:100%;padding:var(--cb-space-2);text-align:center;text-transform:uppercase;font-variant-numeric:tabular-nums;letter-spacing:.04em;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-mono, monospace);outline:none}.cb-colorpicker__hex:focus{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-colorpicker__presets{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--cb-space-2);margin-top:var(--cb-space-3)}.cb-colorpicker__preset{aspect-ratio:1;border:none;border-radius:var(--cb-radius-sm);cursor:pointer;box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__preset.cb-is-active{box-shadow:inset 0 0 0 1px #00000026,0 0 0 2px var(--cb-color-primary-500)}.cb-colorpicker__preset:focus-visible{outline:2px solid var(--cb-color-primary-500);outline-offset:2px}\n"] }]
+  `, styles: [":host{display:inline-block}.cb-colorpicker__trigger{display:inline-flex;align-items:center;gap:var(--cb-space-2);min-height:2.5rem;padding:0 var(--cb-space-3) 0 var(--cb-space-2);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);color:var(--cb-color-text);font-family:var(--cb-font-sans);cursor:pointer;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-colorpicker__trigger--sm{min-height:2.125rem;font-size:var(--cb-text-sm)}.cb-colorpicker__trigger--lg{min-height:2.875rem;font-size:var(--cb-text-lg)}.cb-colorpicker__trigger:focus-visible,.cb-colorpicker__trigger.cb-is-open{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-colorpicker__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-colorpicker__trigger.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-colorpicker__swatch{width:1.5rem;height:1.5rem;flex:none;border-radius:var(--cb-radius-sm);box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__value{font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.02em}.cb-colorpicker__panel{width:15rem;padding:var(--cb-space-3);background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);font-family:var(--cb-font-sans)}.cb-colorpicker__sv{position:relative;height:9rem;border-radius:var(--cb-radius-sm);cursor:crosshair;touch-action:none;overflow:hidden}.cb-colorpicker__sv-white,.cb-colorpicker__sv-black{position:absolute;inset:0}.cb-colorpicker__sv-white{background:linear-gradient(to right,#fff,#fff0)}.cb-colorpicker__sv-black{background:linear-gradient(to top,#000,#0000)}.cb-colorpicker__sv-pointer{position:absolute;width:.875rem;height:.875rem;transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);border:2px solid #fff;box-shadow:0 0 0 1px #0000004d;pointer-events:none}.cb-colorpicker__controls{display:flex;align-items:center;gap:var(--cb-space-3);margin-top:var(--cb-space-3)}.cb-colorpicker__hue{position:relative;flex:1 1 auto;height:.875rem;border-radius:var(--cb-radius-full);cursor:pointer;touch-action:none;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cb-colorpicker__hue-pointer{position:absolute;top:50%;width:1rem;height:1rem;transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);background:#fff;box-shadow:0 0 0 1px #0000004d;pointer-events:none}.cb-colorpicker__preview{width:1.75rem;height:1.75rem;flex:none;border-radius:var(--cb-radius-sm);box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__fields{margin-top:var(--cb-space-3)}.cb-colorpicker__hex{width:100%;padding:var(--cb-space-2);text-align:center;text-transform:uppercase;font-variant-numeric:tabular-nums;letter-spacing:.04em;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-mono, monospace);outline:none}.cb-colorpicker__hex:focus{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-colorpicker__presets{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--cb-space-2);margin-top:var(--cb-space-3)}.cb-colorpicker__preset{aspect-ratio:1;border:none;border-radius:var(--cb-radius-sm);cursor:pointer;box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__preset.cb-is-active{box-shadow:inset 0 0 0 1px #00000026,0 0 0 2px var(--cb-color-primary-500)}.cb-colorpicker__sv:focus-visible,.cb-colorpicker__hue:focus-visible{outline:2px solid var(--cb-color-primary-500);outline-offset:2px}.cb-colorpicker__preset:focus-visible{outline:2px solid var(--cb-color-primary-500);outline-offset:2px}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], svRef: [{ type: i0.ViewChild, args: ['sv', { isSignal: true }] }], hueRef: [{ type: i0.ViewChild, args: ['hue', { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';