@ajuarezso/sui-design-system 0.2.2 → 0.2.3

package/fesm2022/ajuarezso-sui-design-system.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, computed, ChangeDetectionStrategy, Component, model, signal, viewChild, effect, untracked, output, inject, ElementRef, forwardRef, HostListener, TemplateRef, Directive, ViewContainerRef, DestroyRef, ContentChild, ViewChild, ViewEncapsulation, Renderer2, DOCUMENT, viewChildren, afterNextRender, ContentChildren, ViewChildren, Injectable } from '@angular/core';
+import { InjectionToken, input, computed, ChangeDetectionStrategy, Component, model, signal, viewChild, effect, untracked, output, inject, ElementRef, forwardRef, TemplateRef, Directive, ViewContainerRef, DestroyRef, ContentChild, ViewChild, ViewEncapsulation, Renderer2, DOCUMENT, HostListener, viewChildren, afterNextRender, ContentChildren, ViewChildren, Injectable } from '@angular/core';
 import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subscription } from 'rxjs';
@@ -3143,6 +3143,218 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "<button\n  type=\"button\"\n  class=\"sui-color-dot__inner\"\n  role=\"radio\"\n  [disabled]=\"state() === 'disabled' || null\"\n  [attr.aria-checked]=\"state() === 'selected' ? 'true' : 'false'\"\n  [attr.aria-label]=\"ariaLabel() || defaultAriaLabel()\"\n  (click)=\"onClick()\"\n  (touchstart)=\"$event.currentTarget\"\n  (touchend)=\"$any($event.currentTarget).blur()\"\n></button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:24px;height:24px;vertical-align:middle;--c: var(--sui-neutral-500)}:host([data-sui-color=gray]){--c: var(--sui-neutral-500)}:host([data-sui-color=blue]){--c: var(--sui-blue-500)}:host([data-sui-color=orange]){--c: var(--sui-orange-500)}:host([data-sui-color=red]){--c: var(--sui-red-500)}:host([data-sui-color=green]){--c: var(--sui-green-500)}:host([data-sui-color=yellow]){--c: var(--sui-yellow-500)}:host([data-sui-color=purple]){--c: var(--sui-purple-500)}:host([data-sui-color=sky]){--c: var(--sui-sky-500)}:host([data-sui-color=pink]){--c: var(--sui-pink-500)}:host([data-sui-color=teal]){--c: var(--sui-teal-500)}:host([data-sui-state=disabled]){--c: var(--sui-bg-soft-200)}.sui-color-dot__inner{position:relative;display:block;width:24px;height:24px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:50%;transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-dot__inner:after{content:\"\";position:absolute;inset:4px;border-radius:50%;background:var(--c);transition:inset var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-state=selected]) .sui-color-dot__inner:after{inset:6px}.sui-color-dot__inner:before{content:\"\";position:absolute;inset:3px;border-radius:50%;border:2px solid transparent;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-state=selected]) .sui-color-dot__inner:before{border-color:var(--c)}.sui-color-dot__inner:active{transform:none}:host([data-sui-state=default]) .sui-color-dot__inner:hover:after,:host([data-sui-state=hover]) .sui-color-dot__inner:after{inset:5px}.sui-color-dot__inner:focus-visible{outline:2px solid var(--c);outline-offset:2px}:host([data-sui-state=disabled]) .sui-color-dot__inner{cursor:not-allowed;pointer-events:none}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], customHex: [{ type: i0.Input, args: [{ isSignal: true, alias: "customHex", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
+/**
+ * Structural directive — marca un `<ng-template>` como panel del
+ * sui-dropdown-menu. El componente padre captura este TemplateRef
+ * via `@ContentChild(SuiDropdownPanel)` y lo monta en el CDK Overlay
+ * cuando se abre el menu.
+ *
+ * Usa el patrón canon Angular (similar a `*matMenuContent` de Material):
+ * un directive que se aplica al `<ng-template>` SE convierte en una
+ * marca semántica, evitando que Angular renderee el contenido inline
+ * cuando no hay `<ng-content>` matching para el template.
+ *
+ * Uso:
+ *   <sui-dropdown-menu>
+ *     <sui-compact-select trigger ... />
+ *     <ng-template suiDropdownPanel>
+ *       <sui-dropdown-item ...></sui-dropdown-item>
+ *     </ng-template>
+ *   </sui-dropdown-menu>
+ */
+class SuiDropdownPanel {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDropdownPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: SuiDropdownPanel, isStandalone: true, selector: "ng-template[suiDropdownPanel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDropdownPanel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[suiDropdownPanel]',
+                    standalone: true,
+                }]
+        }] });
+
+/* Posiciones con fallback HORIZONTAL: la primera (start-aligned, abre a la
+   derecha) es la default; si el trigger está pegado al borde derecho y no entra,
+   CDK cae a la end-aligned (abre hacia la izquierda) y recién después flipea
+   vertical. Sin esto, un trigger en la esquina derecha (ej. kebab ⋮ de una card)
+   recorta el panel fuera del viewport. */
+const POSITIONS_BELOW = [
+    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+];
+const POSITIONS_ABOVE = [
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+];
+class SuiDropdownMenu {
+    /** Si true, el panel matchea el ancho del trigger. Default: auto width. */
+    matchWidth = input(false, ...(ngDevMode ? [{ debugName: "matchWidth" }] : /* istanbul ignore next */ []));
+    /** Min-width fijo del panel (px). Si matchWidth + minWidth: `max(triggerWidth, minWidth)`. */
+    minWidth = input(null, ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    /** Position primary. Default: auto = below con fallback above. */
+    position = input('auto', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Margen 8px del viewport edge (canon SUI). */
+    viewportMargin = input(8, ...(ngDevMode ? [{ debugName: "viewportMargin" }] : /* istanbul ignore next */ []));
+    /** Panel custom class para overrides de bg/padding/etc desde el consumer. */
+    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    /** Disabled — no abre el menu al clickear el trigger. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Rol del popup para `aria-haspopup` del trigger. Default 'menu' (los items
+     * proyectados llevan role="menuitem"). Los consumers de tipo listbox
+     * (sui-select / compact-selects, items con role="option") DEBEN pasar
+     * `popupRole="listbox"`. Ver SuiDropdownMenuPopupRole.
+     */
+    popupRole = input('menu', ...(ngDevMode ? [{ debugName: "popupRole" }] : /* istanbul ignore next */ []));
+    /**
+     * Origin externo. Si presente, el menu se ancla a ese elemento y NO renderea
+     * el trigger wrapper interno (el parent maneja el click). Caso de uso:
+     * compact-selects donde el host element es el trigger visual.
+     */
+    origin = input(null, ...(ngDevMode ? [{ debugName: "origin" }] : /* istanbul ignore next */ []));
+    openedChange = output();
+    /** Signal pública — wire al `[open]` del trigger para visual state. */
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /** Wrapper del trigger projection — captura el click. NO existe si `[origin]` se pasa. */
+    _triggerWrap;
+    /** Panel directive proyectado — capturado via `[suiDropdownPanel]` en un ng-template. */
+    _panel;
+    _getTriggerEl() {
+        const o = this.origin();
+        if (o)
+            return o instanceof ElementRef ? o.nativeElement : o;
+        return this._triggerWrap?.nativeElement ?? null;
+    }
+    _vcr = inject(ViewContainerRef);
+    _destroyRef = inject(DestroyRef);
+    _overlay = inject(Overlay);
+    _overlayRef = null;
+    _overlaySubs = null;
+    _resizeObserver = null;
+    constructor() {
+        this._destroyRef.onDestroy(() => this.close());
+    }
+    onTriggerClick(event) {
+        if (this.disabled())
+            return;
+        event.stopPropagation();
+        this.toggle();
+    }
+    onTriggerKeydown(event) {
+        if (this.disabled())
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggle();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.open();
+        }
+    }
+    toggle() {
+        if (this.isOpen())
+            this.close();
+        else
+            this.open();
+    }
+    open() {
+        if (this.disabled() || this._overlayRef || !this._panel)
+            return;
+        const triggerEl = this._getTriggerEl();
+        if (!triggerEl)
+            return;
+        const positions = this.position() === 'above' ? POSITIONS_ABOVE : POSITIONS_BELOW;
+        const positionStrategy = this._overlay
+            .position()
+            .flexibleConnectedTo(triggerEl)
+            .withPositions(positions)
+            .withPush(false)
+            .withFlexibleDimensions(true)
+            .withViewportMargin(this.viewportMargin());
+        const triggerWidth = triggerEl.getBoundingClientRect().width;
+        const minW = this.minWidth();
+        const effectiveMinWidth = this.matchWidth() && minW !== null
+            ? Math.max(triggerWidth, minW)
+            : minW;
+        const config = {
+            positionStrategy,
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            panelClass: ['sui-dropdown-menu__overlay-pane', this.panelClass()].filter(Boolean),
+            disposeOnNavigation: true,
+        };
+        if (this.matchWidth() && minW === null) {
+            config.width = `${triggerWidth}px`;
+        }
+        if (effectiveMinWidth !== null) {
+            config.minWidth = effectiveMinWidth;
+        }
+        this._overlayRef = this._overlay.create(config);
+        const portal = new TemplatePortal(this._panel.template, this._vcr);
+        this._overlayRef.attach(portal);
+        /* Width sync mientras el viewport cambia (canon sui-select). Solo aplica
+           cuando matchWidth fija width o minWidth — para que el panel siga el trigger. */
+        if (this.matchWidth() && typeof ResizeObserver !== 'undefined') {
+            this._resizeObserver = new ResizeObserver(() => {
+                if (!this._overlayRef)
+                    return;
+                const w = triggerEl.getBoundingClientRect().width;
+                if (minW === null) {
+                    this._overlayRef.updateSize({ width: `${w}px` });
+                }
+                else {
+                    this._overlayRef.updateSize({ minWidth: Math.max(w, minW) });
+                }
+                this._overlayRef.updatePosition();
+            });
+            this._resizeObserver.observe(triggerEl);
+        }
+        this._overlaySubs = new Subscription();
+        this._overlaySubs.add(this._overlayRef.backdropClick().subscribe(() => this.close()));
+        this._overlaySubs.add(this._overlayRef.keydownEvents().subscribe((e) => {
+            if (e.key === 'Escape')
+                this.close();
+        }));
+        this._overlaySubs.add(this._overlayRef.detachments().subscribe(() => {
+            this.isOpen.set(false);
+        }));
+        this.isOpen.set(true);
+        this.openedChange.emit(true);
+    }
+    close() {
+        if (!this._overlayRef)
+            return;
+        this._overlaySubs?.unsubscribe();
+        this._overlaySubs = null;
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
+        this._overlayRef.dispose();
+        this._overlayRef = null;
+        this.isOpen.set(false);
+        this.openedChange.emit(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDropdownMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiDropdownMenu, isStandalone: true, selector: "sui-dropdown-menu", inputs: { matchWidth: { classPropertyName: "matchWidth", publicName: "matchWidth", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, viewportMargin: { classPropertyName: "viewportMargin", publicName: "viewportMargin", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, popupRole: { classPropertyName: "popupRole", publicName: "popupRole", isSignal: true, isRequired: false, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, queries: [{ propertyName: "_panel", first: true, predicate: SuiDropdownPanel, descendants: true }], viewQueries: [{ propertyName: "_triggerWrap", first: true, predicate: ["triggerWrap"], descendants: true }], exportAs: ["suiDropdownMenu"], ngImport: i0, template: "<!-- Trigger wrapper \u2014 captura click y keydown del trigger child. Solo se\n     renderea cuando NO se pasa [origin] (modo content-projection canon).\n     Cuando se pasa [origin], el parent maneja el trigger y llama\n     menu.toggle() desde su propio click handler. -->\n@if (!origin()) {\n  <span\n    #triggerWrap\n    class=\"sui-dropdown-menu__trigger\"\n    [attr.aria-haspopup]=\"popupRole()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    (click)=\"onTriggerClick($event)\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <ng-content select=\"[trigger]\" />\n  </span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-dropdown-menu__trigger{display:inline-block;cursor:pointer;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDropdownMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-dropdown-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'suiDropdownMenu', template: "<!-- Trigger wrapper \u2014 captura click y keydown del trigger child. Solo se\n     renderea cuando NO se pasa [origin] (modo content-projection canon).\n     Cuando se pasa [origin], el parent maneja el trigger y llama\n     menu.toggle() desde su propio click handler. -->\n@if (!origin()) {\n  <span\n    #triggerWrap\n    class=\"sui-dropdown-menu__trigger\"\n    [attr.aria-haspopup]=\"popupRole()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    (click)=\"onTriggerClick($event)\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <ng-content select=\"[trigger]\" />\n  </span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-dropdown-menu__trigger{display:inline-block;cursor:pointer;outline:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { matchWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchWidth", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], viewportMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportMargin", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], popupRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupRole", required: false }] }], origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], _triggerWrap: [{
+                type: ViewChild,
+                args: ['triggerWrap', { static: false }]
+            }], _panel: [{
+                type: ContentChild,
+                args: [SuiDropdownPanel]
+            }] } });
+
 /* ════════════════════════════════════════════════════════════════════════
  * HSV ↔ RGB ↔ HEX conversion helpers
  *
@@ -3391,6 +3603,7 @@ class SuiColorPicker {
     /** Hex input visible (separate del value model para validación en blur). */
     hexInput = signal('', ...(ngDevMode ? [{ debugName: "hexInput" }] : /* istanbul ignore next */ []));
     /** Refs del spectrum y sliders para cálculos de bounds */
+    _menu = viewChild(SuiDropdownMenu, ...(ngDevMode ? [{ debugName: "_menu" }] : /* istanbul ignore next */ []));
     canvasRef = viewChild('canvas', ...(ngDevMode ? [{ debugName: "canvasRef" }] : /* istanbul ignore next */ []));
     hueRef = viewChild('hueSlider', ...(ngDevMode ? [{ debugName: "hueRef" }] : /* istanbul ignore next */ []));
     opacityRef = viewChild('opacitySlider', ...(ngDevMode ? [{ debugName: "opacityRef" }] : /* istanbul ignore next */ []));
@@ -3577,17 +3790,21 @@ class SuiColorPicker {
     toggle() {
         if (this.disabled())
             return;
-        this.open.update(v => !v);
-        // Al abrir, sync hex input con value actual
-        if (this.open()) {
+        this._menu()?.toggle();
+    }
+    close() {
+        this._menu()?.close();
+    }
+    /** El sui-dropdown-menu (CDK overlay) es el dueño del open/close: acá solo se
+        sincroniza el signal `open` (aria-expanded, chevron, data-sui-open) y el
+        hex input al abrir. Backdrop + Esc + detachments los maneja el menu. */
+    onMenuOpenedChange(opened) {
+        this.open.set(opened);
+        if (opened) {
             const parsed = parseHexWithAlpha(this.value());
             this.hexInput.set(parsed?.hex ?? '');
         }
     }
-    close() {
-        if (this.open())
-            this.open.set(false);
-    }
     /* ─────────── Recommended dot click ─────────── */
     onPresetClick(preset) {
         // setColor atómico → garantiza que value, HSV y hexInput queden
@@ -3761,34 +3978,17 @@ class SuiColorPicker {
             // user canceló (Esc) — no-op.
         }
     }
-    /* ─────────── Outside click + Esc ─────────── */
-    onDocumentClick(target) {
-        if (!this.open())
-            return;
-        if (target instanceof Node && !this.hostRef.nativeElement.contains(target)) {
-            this.close();
-        }
-    }
-    onEscape() {
-        this.close();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiColorPicker, isStandalone: true, selector: "sui-color-picker", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, recommendedLabel: { classPropertyName: "recommendedLabel", publicName: "recommendedLabel", isSignal: true, isRequired: false, transformFunction: null }, presetsOnly: { classPropertyName: "presetsOnly", publicName: "presetsOnly", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, eyedropper: { classPropertyName: "eyedropper", publicName: "eyedropper", isSignal: true, isRequired: false, transformFunction: null }, showFormatLabel: { classPropertyName: "showFormatLabel", publicName: "showFormatLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change" }, host: { listeners: { "document:click": "onDocumentClick($event.target)", "document:keydown.escape": "onEscape()" }, properties: { "attr.data-sui-open": "open() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.data-sui-presets-only": "presetsOnly() ? \"\" : null" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "hueRef", first: true, predicate: ["hueSlider"], descendants: true, isSignal: true }, { propertyName: "opacityRef", first: true, predicate: ["opacitySlider"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"sui-color-picker__trigger\"\n  [disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-haspopup]=\"'dialog'\"\n  [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n  (click)=\"toggle()\"\n  (touchstart)=\"$event.currentTarget\"\n  (touchend)=\"$any($event.currentTarget).blur()\"\n>\n  @if (value()) {\n    @if (currentPreset()) {\n      <sui-color-dot [color]=\"currentPreset()!\" state=\"selected\" class=\"sui-color-picker__preview\" />\n    } @else {\n      <sui-color-dot [customHex]=\"previewColor()\" state=\"selected\" class=\"sui-color-picker__preview\" />\n    }\n  } @else {\n    <span class=\"sui-color-picker__placeholder-dot\" aria-hidden=\"true\"></span>\n  }\n  <span class=\"sui-color-picker__label\">{{ currentLabel() }}</span>\n  <sui-icon name=\"arrow-down-s-line\" [size]=\"16\" class=\"sui-color-picker__chevron\" />\n</button>\n\n@if (open()) {\n  <div\n    class=\"sui-color-picker__panel\"\n    role=\"dialog\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    @if (!presetsOnly()) {\n      <!-- Secci\u00F3n \"Colors\" \u2014 Figma 4456:115716 -->\n      <div class=\"sui-color-picker__section sui-color-picker__section--colors\">\n        <!-- HSV Color Spectrum \u2014 Figma 4456:115425 -->\n        <div\n          #canvas\n          class=\"sui-color-picker__canvas\"\n          role=\"application\"\n          aria-label=\"Saturaci\u00F3n y brillo\"\n          [style.--hue-color]=\"hueColor()\"\n          (pointerdown)=\"onCanvasPointerDown($event)\"\n          (pointermove)=\"onCanvasPointerMove($event)\"\n          (pointerup)=\"onCanvasPointerUp($event)\"\n          (pointercancel)=\"onCanvasPointerUp($event)\"\n        >\n          <div\n            class=\"sui-color-picker__canvas-thumb\"\n            [style.left]=\"canvasThumbX()\"\n            [style.top]=\"canvasThumbY()\"\n            [style.background-color]=\"currentHex()\"\n          ></div>\n        </div>\n\n        <!-- Hue slider \u2014 Figma 4415:53669 -->\n        <div\n          #hueSlider\n          class=\"sui-color-picker__slider sui-color-picker__hue\"\n          role=\"slider\"\n          aria-label=\"Matiz\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"360\"\n          [attr.aria-valuenow]=\"hueRounded()\"\n          (pointerdown)=\"onHuePointerDown($event)\"\n          (pointermove)=\"onHuePointerMove($event)\"\n          (pointerup)=\"onHuePointerUp($event)\"\n          (pointercancel)=\"onHuePointerUp($event)\"\n        >\n          <div class=\"sui-color-picker__slider-track\"></div>\n          <div\n            class=\"sui-color-picker__slider-thumb\"\n            [style.left]=\"hueThumbX()\"\n            [style.background-color]=\"hueColor()\"\n          ></div>\n        </div>\n\n        <!-- Opacity slider \u2014 Figma 4415:53670. Visible por default (alpha on);\n             ocultable con [alpha]=false. -->\n        @if (alpha()) {\n          <div\n            #opacitySlider\n            class=\"sui-color-picker__slider sui-color-picker__opacity\"\n            role=\"slider\"\n            aria-label=\"Opacidad\"\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            [attr.aria-valuenow]=\"alphaPercent()\"\n            [style.--opacity-color]=\"opacityColor()\"\n            (pointerdown)=\"onOpacityPointerDown($event)\"\n            (pointermove)=\"onOpacityPointerMove($event)\"\n            (pointerup)=\"onOpacityPointerUp($event)\"\n            (pointercancel)=\"onOpacityPointerUp($event)\"\n          >\n            <div class=\"sui-color-picker__slider-track\"></div>\n            <div\n              class=\"sui-color-picker__slider-thumb\"\n              [style.left]=\"opacityThumbX()\"\n              [style.--thumb-color]=\"opacityThumbColor()\"\n            ></div>\n          </div>\n        }\n\n        <!-- Color Input \u2014 Figma 4456:115720 -->\n        <div class=\"sui-color-picker__color-input\">\n          <!-- Format label \"Hex\" + chevron \u2014 Figma 4456:115721.\n               Hex-only por ahora (ver PENDING VERIFY en el .ts). -->\n          @if (showFormatLabel()) {\n            <div class=\"sui-color-picker__format\" aria-hidden=\"true\">\n              <span class=\"sui-color-picker__format-label\">Hex</span>\n              <sui-icon name=\"arrow-down-s-line\" [size]=\"20\" class=\"sui-color-picker__format-chevron\" />\n            </div>\n          }\n\n          <!-- Input row \u2014 Figma 4456:115724: sip | hex | opacity -->\n          <div class=\"sui-color-picker__input-row\">\n            <!-- Sip (eyedropper) \u2014 Figma 4456:115796. Solo con EyeDropper API. -->\n            @if (showEyedropper()) {\n              <button\n                type=\"button\"\n                class=\"sui-color-picker__sip\"\n                aria-label=\"Cuentagotas\"\n                (click)=\"onEyedropper()\"\n                (touchstart)=\"$event.currentTarget\"\n                (touchend)=\"$any($event.currentTarget).blur()\"\n              >\n                <sui-icon name=\"sip-line\" [size]=\"20\" />\n              </button>\n            }\n\n            <!-- Hex field \u2014 Figma 4456:115725 / 4456:115726: el texto va SIN\n                 prefijo '#' (Figma muestra \"335CFF\" pelado dentro de la celda). -->\n            <div class=\"sui-color-picker__hex-cell\">\n              <input\n                class=\"sui-color-picker__hex-field\"\n                type=\"text\"\n                inputmode=\"text\"\n                autocomplete=\"off\"\n                spellcheck=\"false\"\n                maxlength=\"8\"\n                aria-label=\"Valor hexadecimal\"\n                [value]=\"hexDisplayValue()\"\n                (input)=\"onHexInputChange($event)\"\n                (keydown)=\"onHexKeyDown($event)\"\n                (blur)=\"onHexCommit()\"\n              />\n            </div>\n\n            <!-- Opacity field \"%\" \u2014 Figma 4456:115727. Visible por default\n                 (alpha on); ocultable con [alpha]=false. -->\n            @if (alpha()) {\n              <div class=\"sui-color-picker__opacity-cell\">\n                <input\n                  class=\"sui-color-picker__opacity-field\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  autocomplete=\"off\"\n                  maxlength=\"3\"\n                  aria-label=\"Opacidad\"\n                  [value]=\"alphaPercent()\"\n                  (change)=\"onOpacityFieldCommit($event)\"\n                  (keydown)=\"onHexKeyDown($event)\"\n                />\n                <span class=\"sui-color-picker__opacity-suffix\" aria-hidden=\"true\">%</span>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Secci\u00F3n \"Recommended Colors\" \u2014 Figma 4456:115765 -->\n    <div class=\"sui-color-picker__section sui-color-picker__section--recommended\">\n      <p class=\"sui-color-picker__panel-label\">{{ recommendedLabel() }}</p>\n      <div class=\"sui-color-picker__grid\" role=\"radiogroup\">\n        @for (c of colors(); track c) {\n          <sui-color-dot\n            [color]=\"c\"\n            [state]=\"currentPreset() === c ? 'selected' : 'default'\"\n            (clicked)=\"onPresetClick(c)\"\n          />\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-block;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-color-picker__trigger{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);cursor:pointer;appearance:none;font:inherit;color:var(--sui-text-strong-950);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__trigger:hover{background:var(--sui-bg-weak-50)}:host([data-sui-open]) .sui-color-picker__trigger{border-color:var(--sui-stroke-strong-950, var(--sui-text-strong-950))}.sui-color-picker__trigger:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:2px}.sui-color-picker__trigger:active{transform:none}:host([data-sui-disabled]) .sui-color-picker__trigger{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);cursor:not-allowed;pointer-events:none}.sui-color-picker__placeholder-dot{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--sui-bg-soft-200)}.sui-color-picker__label{flex:1 0 auto;white-space:nowrap}.sui-color-picker__chevron{flex-shrink:0;color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-color-picker__chevron{transform:rotate(180deg)}.sui-color-picker__panel{position:absolute;top:calc(100% + 6px);left:0;z-index:100;width:272px;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);box-shadow:var(--sui-shadow-medium);overflow:hidden;display:flex;flex-direction:column;animation:sui-color-picker__fade var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}@keyframes sui-color-picker__fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sui-color-picker__section{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:16px;width:100%}.sui-color-picker__section--colors{border-bottom:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__section--recommended{gap:8px}:host([data-sui-presets-only]) .sui-color-picker__section--recommended{border-bottom:none}.sui-color-picker__canvas{position:relative;width:100%;height:232px;border-radius:var(--sui-radius-8);cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden;background-color:var(--hue-color, #335cff);background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.sui-color-picker__canvas-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__slider{position:relative;width:100%;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.sui-color-picker__slider-track{position:absolute;left:0;right:0;top:4px;height:8px;border-radius:var(--sui-radius-full);overflow:hidden}.sui-color-picker__hue .sui-color-picker__slider-track{background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.sui-color-picker__opacity .sui-color-picker__slider-track{background-color:#fff;background-image:linear-gradient(to right,transparent,var(--opacity-color, #335cff)),conic-gradient(#ebebeb 0 25%,transparent 0 50%,#ebebeb 0 75%,transparent 0);background-size:auto,10.88px 10.88px}.sui-color-picker__slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__opacity .sui-color-picker__slider-thumb{background-image:linear-gradient(var(--thumb-color, #335cff),var(--thumb-color, #335cff)),conic-gradient(#ebebeb 0 25%,#fff 0 50%,#ebebeb 0 75%,#fff 0);background-size:auto,6px 6px}.sui-color-picker__color-input{display:flex;flex-direction:column;gap:4px;width:100%}.sui-color-picker__format{display:flex;align-items:center;gap:2px;appearance:none;border:none;background:transparent;padding:0;cursor:default;font:inherit;color:var(--sui-text-strong-950)}.sui-color-picker__format-label{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);white-space:nowrap}.sui-color-picker__format-chevron{flex-shrink:0;color:var(--sui-icon-sub-600)}.sui-color-picker__input-row{box-sizing:border-box;display:flex;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);overflow:hidden}.sui-color-picker__sip{display:flex;align-items:center;justify-content:center;padding:6px;border:none;border-right:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);cursor:pointer;appearance:none;flex-shrink:0;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__sip:hover{background:var(--sui-bg-weak-50)}.sui-color-picker__sip:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:-2px}.sui-color-picker__sip:active{transform:none}.sui-color-picker__hex-cell{box-sizing:border-box;display:flex;align-items:center;flex:1 0 0;min-width:0;padding:6px 10px;border-right:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__hex-cell:last-child{border-right:none}.sui-color-picker__hex-field{flex:1 0 0;min-width:0;width:100%;border:none;outline:none;background:transparent;padding:0;appearance:none;color:var(--sui-text-strong-950);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);text-transform:uppercase}.sui-color-picker__hex-field::placeholder{color:var(--sui-text-soft-400);text-transform:none}.sui-color-picker__opacity-cell{box-sizing:border-box;display:flex;align-items:center;flex-shrink:0;padding:6px 10px}.sui-color-picker__opacity-field{width:3.5ch;border:none;outline:none;background:transparent;padding:0;appearance:none;text-align:right;color:var(--sui-text-sub-600);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}.sui-color-picker__opacity-suffix{color:var(--sui-text-sub-600);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}.sui-color-picker__panel-label{margin:0;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-color-picker__grid{display:flex;flex-wrap:wrap;gap:4px;width:100%}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiColorDot, selector: "sui-color-dot", inputs: ["color", "customHex", "state", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiColorPicker, isStandalone: true, selector: "sui-color-picker", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, recommendedLabel: { classPropertyName: "recommendedLabel", publicName: "recommendedLabel", isSignal: true, isRequired: false, transformFunction: null }, presetsOnly: { classPropertyName: "presetsOnly", publicName: "presetsOnly", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, eyedropper: { classPropertyName: "eyedropper", publicName: "eyedropper", isSignal: true, isRequired: false, transformFunction: null }, showFormatLabel: { classPropertyName: "showFormatLabel", publicName: "showFormatLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change" }, host: { properties: { "attr.data-sui-open": "open() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.data-sui-presets-only": "presetsOnly() ? \"\" : null" } }, viewQueries: [{ propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }, { propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "hueRef", first: true, predicate: ["hueSlider"], descendants: true, isSignal: true }, { propertyName: "opacityRef", first: true, predicate: ["opacitySlider"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"sui-color-picker__trigger\"\n  [disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-haspopup]=\"'dialog'\"\n  [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n  (click)=\"toggle()\"\n  (touchstart)=\"$event.currentTarget\"\n  (touchend)=\"$any($event.currentTarget).blur()\"\n>\n  @if (value()) {\n    @if (currentPreset()) {\n      <sui-color-dot [color]=\"currentPreset()!\" state=\"selected\" class=\"sui-color-picker__preview\" />\n    } @else {\n      <sui-color-dot [customHex]=\"previewColor()\" state=\"selected\" class=\"sui-color-picker__preview\" />\n    }\n  } @else {\n    <span class=\"sui-color-picker__placeholder-dot\" aria-hidden=\"true\"></span>\n  }\n  <span class=\"sui-color-picker__label\">{{ currentLabel() }}</span>\n  <sui-icon name=\"arrow-down-s-line\" [size]=\"16\" class=\"sui-color-picker__chevron\" />\n</button>\n\n<!-- Panel en CDK overlay (via sui-dropdown-menu): escapa cualquier overflow\n     clipping del contenedor (Storybook docs, modales, tablas). El contenido del\n     ng-template mantiene el scoping de estilos del componente. -->\n<sui-dropdown-menu\n  [origin]=\"trigger\"\n  [disabled]=\"disabled()\"\n  panelClass=\"sui-color-picker__overlay-pane\"\n  (openedChange)=\"onMenuOpenedChange($event)\"\n>\n  <ng-template suiDropdownPanel>\n  <div\n    class=\"sui-color-picker__panel\"\n    role=\"dialog\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    @if (!presetsOnly()) {\n      <!-- Secci\u00F3n \"Colors\" \u2014 Figma 4456:115716 -->\n      <div class=\"sui-color-picker__section sui-color-picker__section--colors\">\n        <!-- HSV Color Spectrum \u2014 Figma 4456:115425 -->\n        <div\n          #canvas\n          class=\"sui-color-picker__canvas\"\n          role=\"application\"\n          aria-label=\"Saturaci\u00F3n y brillo\"\n          [style.--hue-color]=\"hueColor()\"\n          (pointerdown)=\"onCanvasPointerDown($event)\"\n          (pointermove)=\"onCanvasPointerMove($event)\"\n          (pointerup)=\"onCanvasPointerUp($event)\"\n          (pointercancel)=\"onCanvasPointerUp($event)\"\n        >\n          <div\n            class=\"sui-color-picker__canvas-thumb\"\n            [style.left]=\"canvasThumbX()\"\n            [style.top]=\"canvasThumbY()\"\n            [style.background-color]=\"currentHex()\"\n          ></div>\n        </div>\n\n        <!-- Hue slider \u2014 Figma 4415:53669 -->\n        <div\n          #hueSlider\n          class=\"sui-color-picker__slider sui-color-picker__hue\"\n          role=\"slider\"\n          aria-label=\"Matiz\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"360\"\n          [attr.aria-valuenow]=\"hueRounded()\"\n          (pointerdown)=\"onHuePointerDown($event)\"\n          (pointermove)=\"onHuePointerMove($event)\"\n          (pointerup)=\"onHuePointerUp($event)\"\n          (pointercancel)=\"onHuePointerUp($event)\"\n        >\n          <div class=\"sui-color-picker__slider-track\"></div>\n          <div\n            class=\"sui-color-picker__slider-thumb\"\n            [style.left]=\"hueThumbX()\"\n            [style.background-color]=\"hueColor()\"\n          ></div>\n        </div>\n\n        <!-- Opacity slider \u2014 Figma 4415:53670. Visible por default (alpha on);\n             ocultable con [alpha]=false. -->\n        @if (alpha()) {\n          <div\n            #opacitySlider\n            class=\"sui-color-picker__slider sui-color-picker__opacity\"\n            role=\"slider\"\n            aria-label=\"Opacidad\"\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            [attr.aria-valuenow]=\"alphaPercent()\"\n            [style.--opacity-color]=\"opacityColor()\"\n            (pointerdown)=\"onOpacityPointerDown($event)\"\n            (pointermove)=\"onOpacityPointerMove($event)\"\n            (pointerup)=\"onOpacityPointerUp($event)\"\n            (pointercancel)=\"onOpacityPointerUp($event)\"\n          >\n            <div class=\"sui-color-picker__slider-track\"></div>\n            <div\n              class=\"sui-color-picker__slider-thumb\"\n              [style.left]=\"opacityThumbX()\"\n              [style.--thumb-color]=\"opacityThumbColor()\"\n            ></div>\n          </div>\n        }\n\n        <!-- Color Input \u2014 Figma 4456:115720 -->\n        <div class=\"sui-color-picker__color-input\">\n          <!-- Format label \"Hex\" + chevron \u2014 Figma 4456:115721.\n               Hex-only por ahora (ver PENDING VERIFY en el .ts). -->\n          @if (showFormatLabel()) {\n            <div class=\"sui-color-picker__format\" aria-hidden=\"true\">\n              <span class=\"sui-color-picker__format-label\">Hex</span>\n              <sui-icon name=\"arrow-down-s-line\" [size]=\"20\" class=\"sui-color-picker__format-chevron\" />\n            </div>\n          }\n\n          <!-- Input row \u2014 Figma 4456:115724: sip | hex | opacity -->\n          <div class=\"sui-color-picker__input-row\">\n            <!-- Sip (eyedropper) \u2014 Figma 4456:115796. Solo con EyeDropper API. -->\n            @if (showEyedropper()) {\n              <button\n                type=\"button\"\n                class=\"sui-color-picker__sip\"\n                aria-label=\"Cuentagotas\"\n                (click)=\"onEyedropper()\"\n                (touchstart)=\"$event.currentTarget\"\n                (touchend)=\"$any($event.currentTarget).blur()\"\n              >\n                <sui-icon name=\"sip-line\" [size]=\"20\" />\n              </button>\n            }\n\n            <!-- Hex field \u2014 Figma 4456:115725 / 4456:115726: el texto va SIN\n                 prefijo '#' (Figma muestra \"335CFF\" pelado dentro de la celda). -->\n            <div class=\"sui-color-picker__hex-cell\">\n              <input\n                class=\"sui-color-picker__hex-field\"\n                type=\"text\"\n                inputmode=\"text\"\n                autocomplete=\"off\"\n                spellcheck=\"false\"\n                maxlength=\"8\"\n                aria-label=\"Valor hexadecimal\"\n                [value]=\"hexDisplayValue()\"\n                (input)=\"onHexInputChange($event)\"\n                (keydown)=\"onHexKeyDown($event)\"\n                (blur)=\"onHexCommit()\"\n              />\n            </div>\n\n            <!-- Opacity field \"%\" \u2014 Figma 4456:115727. Visible por default\n                 (alpha on); ocultable con [alpha]=false. -->\n            @if (alpha()) {\n              <div class=\"sui-color-picker__opacity-cell\">\n                <input\n                  class=\"sui-color-picker__opacity-field\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  autocomplete=\"off\"\n                  maxlength=\"3\"\n                  aria-label=\"Opacidad\"\n                  [value]=\"alphaPercent()\"\n                  (change)=\"onOpacityFieldCommit($event)\"\n                  (keydown)=\"onHexKeyDown($event)\"\n                />\n                <span class=\"sui-color-picker__opacity-suffix\" aria-hidden=\"true\">%</span>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Secci\u00F3n \"Recommended Colors\" \u2014 Figma 4456:115765 -->\n    <div class=\"sui-color-picker__section sui-color-picker__section--recommended\">\n      <p class=\"sui-color-picker__panel-label\">{{ recommendedLabel() }}</p>\n      <div class=\"sui-color-picker__grid\" role=\"radiogroup\">\n        @for (c of colors(); track c) {\n          <sui-color-dot\n            [color]=\"c\"\n            [state]=\"currentPreset() === c ? 'selected' : 'default'\"\n            (clicked)=\"onPresetClick(c)\"\n          />\n        }\n      </div>\n    </div>\n  </div>\n  </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-block;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-color-picker__trigger{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);cursor:pointer;appearance:none;font:inherit;color:var(--sui-text-strong-950);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__trigger:hover{background:var(--sui-bg-weak-50)}:host([data-sui-open]) .sui-color-picker__trigger{border-color:var(--sui-stroke-strong-950, var(--sui-text-strong-950))}.sui-color-picker__trigger:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:2px}.sui-color-picker__trigger:active{transform:none}:host([data-sui-disabled]) .sui-color-picker__trigger{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);cursor:not-allowed;pointer-events:none}.sui-color-picker__placeholder-dot{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--sui-bg-soft-200)}.sui-color-picker__label{flex:1 0 auto;white-space:nowrap}.sui-color-picker__chevron{flex-shrink:0;color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-color-picker__chevron{transform:rotate(180deg)}.sui-color-picker__panel{width:272px;margin-top:6px;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);box-shadow:var(--sui-shadow-medium);overflow:hidden;display:flex;flex-direction:column;animation:sui-color-picker__fade var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}@keyframes sui-color-picker__fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sui-color-picker__section{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:16px;width:100%}.sui-color-picker__section--colors{border-bottom:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__section--recommended{gap:8px}:host([data-sui-presets-only]) .sui-color-picker__section--recommended{border-bottom:none}.sui-color-picker__canvas{position:relative;width:100%;height:232px;border-radius:var(--sui-radius-8);cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden;background-color:var(--hue-color, #335cff);background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.sui-color-picker__canvas-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__slider{position:relative;width:100%;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.sui-color-picker__slider-track{position:absolute;left:0;right:0;top:4px;height:8px;border-radius:var(--sui-radius-full);overflow:hidden}.sui-color-picker__hue .sui-color-picker__slider-track{background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.sui-color-picker__opacity .sui-color-picker__slider-track{background-color:#fff;background-image:linear-gradient(to right,transparent,var(--opacity-color, #335cff)),conic-gradient(#ebebeb 0 25%,transparent 0 50%,#ebebeb 0 75%,transparent 0);background-size:auto,10.88px 10.88px}.sui-color-picker__slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__opacity .sui-color-picker__slider-thumb{background-image:linear-gradient(var(--thumb-color, #335cff),var(--thumb-color, #335cff)),conic-gradient(#ebebeb 0 25%,#fff 0 50%,#ebebeb 0 75%,#fff 0);background-size:auto,6px 6px}.sui-color-picker__color-input{display:flex;flex-direction:column;gap:4px;width:100%}.sui-color-picker__format{display:flex;align-items:center;gap:2px;appearance:none;border:none;background:transparent;padding:0;cursor:default;font:inherit;color:var(--sui-text-strong-950)}.sui-color-picker__format-label{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);white-space:nowrap}.sui-color-picker__format-chevron{flex-shrink:0;color:var(--sui-icon-sub-600)}.sui-color-picker__input-row{box-sizing:border-box;display:flex;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);overflow:hidden}.sui-color-picker__sip{display:flex;align-items:center;justify-content:center;padding:6px;border:none;border-right:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);cursor:pointer;appearance:none;flex-shrink:0;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__sip:hover{background:var(--sui-bg-weak-50)}.sui-color-picker__sip:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:-2px}.sui-color-picker__sip:active{transform:none}.sui-color-picker__hex-cell{box-sizing:border-box;display:flex;align-items:center;flex:1 0 0;min-width:0;padding:6px 10px;border-right:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__hex-cell:last-child{border-right:none}.sui-color-picker__hex-field{flex:1 0 0;min-width:0;width:100%;border:none;outline:none;background:transparent;padding:0;appearance:none;color:var(--sui-text-strong-950);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);text-transform:uppercase}.sui-color-picker__hex-field::placeholder{color:var(--sui-text-soft-400);text-transform:none}.sui-color-picker__opacity-cell{box-sizing:border-box;display:flex;align-items:center;flex-shrink:0;padding:6px 10px}.sui-color-picker__opacity-field{width:3.5ch;border:none;outline:none;background:transparent;padding:0;appearance:none;text-align:right;color:var(--sui-text-sub-600);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}.sui-color-picker__opacity-suffix{color:var(--sui-text-sub-600);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}.sui-color-picker__panel-label{margin:0;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-color-picker__grid{display:flex;flex-wrap:wrap;gap:4px;width:100%}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiColorDot, selector: "sui-color-dot", inputs: ["color", "customHex", "state", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiColorPicker, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-color-picker', standalone: true, imports: [SuiIcon, SuiColorDot], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'sui-color-picker', standalone: true, imports: [SuiIcon, SuiColorDot, SuiDropdownMenu, SuiDropdownPanel], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-sui-open]': 'open() ? "" : null',
                         '[attr.data-sui-disabled]': 'disabled() ? "" : null',
                         '[attr.data-sui-presets-only]': 'presetsOnly() ? "" : null',
-                    }, template: "<button\n  type=\"button\"\n  class=\"sui-color-picker__trigger\"\n  [disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-haspopup]=\"'dialog'\"\n  [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n  (click)=\"toggle()\"\n  (touchstart)=\"$event.currentTarget\"\n  (touchend)=\"$any($event.currentTarget).blur()\"\n>\n  @if (value()) {\n    @if (currentPreset()) {\n      <sui-color-dot [color]=\"currentPreset()!\" state=\"selected\" class=\"sui-color-picker__preview\" />\n    } @else {\n      <sui-color-dot [customHex]=\"previewColor()\" state=\"selected\" class=\"sui-color-picker__preview\" />\n    }\n  } @else {\n    <span class=\"sui-color-picker__placeholder-dot\" aria-hidden=\"true\"></span>\n  }\n  <span class=\"sui-color-picker__label\">{{ currentLabel() }}</span>\n  <sui-icon name=\"arrow-down-s-line\" [size]=\"16\" class=\"sui-color-picker__chevron\" />\n</button>\n\n@if (open()) {\n  <div\n    class=\"sui-color-picker__panel\"\n    role=\"dialog\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    @if (!presetsOnly()) {\n      <!-- Secci\u00F3n \"Colors\" \u2014 Figma 4456:115716 -->\n      <div class=\"sui-color-picker__section sui-color-picker__section--colors\">\n        <!-- HSV Color Spectrum \u2014 Figma 4456:115425 -->\n        <div\n          #canvas\n          class=\"sui-color-picker__canvas\"\n          role=\"application\"\n          aria-label=\"Saturaci\u00F3n y brillo\"\n          [style.--hue-color]=\"hueColor()\"\n          (pointerdown)=\"onCanvasPointerDown($event)\"\n          (pointermove)=\"onCanvasPointerMove($event)\"\n          (pointerup)=\"onCanvasPointerUp($event)\"\n          (pointercancel)=\"onCanvasPointerUp($event)\"\n        >\n          <div\n            class=\"sui-color-picker__canvas-thumb\"\n            [style.left]=\"canvasThumbX()\"\n            [style.top]=\"canvasThumbY()\"\n            [style.background-color]=\"currentHex()\"\n          ></div>\n        </div>\n\n        <!-- Hue slider \u2014 Figma 4415:53669 -->\n        <div\n          #hueSlider\n          class=\"sui-color-picker__slider sui-color-picker__hue\"\n          role=\"slider\"\n          aria-label=\"Matiz\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"360\"\n          [attr.aria-valuenow]=\"hueRounded()\"\n          (pointerdown)=\"onHuePointerDown($event)\"\n          (pointermove)=\"onHuePointerMove($event)\"\n          (pointerup)=\"onHuePointerUp($event)\"\n          (pointercancel)=\"onHuePointerUp($event)\"\n        >\n          <div class=\"sui-color-picker__slider-track\"></div>\n          <div\n            class=\"sui-color-picker__slider-thumb\"\n            [style.left]=\"hueThumbX()\"\n            [style.background-color]=\"hueColor()\"\n          ></div>\n        </div>\n\n        <!-- Opacity slider \u2014 Figma 4415:53670. Visible por default (alpha on);\n             ocultable con [alpha]=false. -->\n        @if (alpha()) {\n          <div\n            #opacitySlider\n            class=\"sui-color-picker__slider sui-color-picker__opacity\"\n            role=\"slider\"\n            aria-label=\"Opacidad\"\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            [attr.aria-valuenow]=\"alphaPercent()\"\n            [style.--opacity-color]=\"opacityColor()\"\n            (pointerdown)=\"onOpacityPointerDown($event)\"\n            (pointermove)=\"onOpacityPointerMove($event)\"\n            (pointerup)=\"onOpacityPointerUp($event)\"\n            (pointercancel)=\"onOpacityPointerUp($event)\"\n          >\n            <div class=\"sui-color-picker__slider-track\"></div>\n            <div\n              class=\"sui-color-picker__slider-thumb\"\n              [style.left]=\"opacityThumbX()\"\n              [style.--thumb-color]=\"opacityThumbColor()\"\n            ></div>\n          </div>\n        }\n\n        <!-- Color Input \u2014 Figma 4456:115720 -->\n        <div class=\"sui-color-picker__color-input\">\n          <!-- Format label \"Hex\" + chevron \u2014 Figma 4456:115721.\n               Hex-only por ahora (ver PENDING VERIFY en el .ts). -->\n          @if (showFormatLabel()) {\n            <div class=\"sui-color-picker__format\" aria-hidden=\"true\">\n              <span class=\"sui-color-picker__format-label\">Hex</span>\n              <sui-icon name=\"arrow-down-s-line\" [size]=\"20\" class=\"sui-color-picker__format-chevron\" />\n            </div>\n          }\n\n          <!-- Input row \u2014 Figma 4456:115724: sip | hex | opacity -->\n          <div class=\"sui-color-picker__input-row\">\n            <!-- Sip (eyedropper) \u2014 Figma 4456:115796. Solo con EyeDropper API. -->\n            @if (showEyedropper()) {\n              <button\n                type=\"button\"\n                class=\"sui-color-picker__sip\"\n                aria-label=\"Cuentagotas\"\n                (click)=\"onEyedropper()\"\n                (touchstart)=\"$event.currentTarget\"\n                (touchend)=\"$any($event.currentTarget).blur()\"\n              >\n                <sui-icon name=\"sip-line\" [size]=\"20\" />\n              </button>\n            }\n\n            <!-- Hex field \u2014 Figma 4456:115725 / 4456:115726: el texto va SIN\n                 prefijo '#' (Figma muestra \"335CFF\" pelado dentro de la celda). -->\n            <div class=\"sui-color-picker__hex-cell\">\n              <input\n                class=\"sui-color-picker__hex-field\"\n                type=\"text\"\n                inputmode=\"text\"\n                autocomplete=\"off\"\n                spellcheck=\"false\"\n                maxlength=\"8\"\n                aria-label=\"Valor hexadecimal\"\n                [value]=\"hexDisplayValue()\"\n                (input)=\"onHexInputChange($event)\"\n                (keydown)=\"onHexKeyDown($event)\"\n                (blur)=\"onHexCommit()\"\n              />\n            </div>\n\n            <!-- Opacity field \"%\" \u2014 Figma 4456:115727. Visible por default\n                 (alpha on); ocultable con [alpha]=false. -->\n            @if (alpha()) {\n              <div class=\"sui-color-picker__opacity-cell\">\n                <input\n                  class=\"sui-color-picker__opacity-field\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  autocomplete=\"off\"\n                  maxlength=\"3\"\n                  aria-label=\"Opacidad\"\n                  [value]=\"alphaPercent()\"\n                  (change)=\"onOpacityFieldCommit($event)\"\n                  (keydown)=\"onHexKeyDown($event)\"\n                />\n                <span class=\"sui-color-picker__opacity-suffix\" aria-hidden=\"true\">%</span>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Secci\u00F3n \"Recommended Colors\" \u2014 Figma 4456:115765 -->\n    <div class=\"sui-color-picker__section sui-color-picker__section--recommended\">\n      <p class=\"sui-color-picker__panel-label\">{{ recommendedLabel() }}</p>\n      <div class=\"sui-color-picker__grid\" role=\"radiogroup\">\n        @for (c of colors(); track c) {\n          <sui-color-dot\n            [color]=\"c\"\n            [state]=\"currentPreset() === c ? 'selected' : 'default'\"\n            (clicked)=\"onPresetClick(c)\"\n          />\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-block;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-color-picker__trigger{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);cursor:pointer;appearance:none;font:inherit;color:var(--sui-text-strong-950);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__trigger:hover{background:var(--sui-bg-weak-50)}:host([data-sui-open]) .sui-color-picker__trigger{border-color:var(--sui-stroke-strong-950, var(--sui-text-strong-950))}.sui-color-picker__trigger:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:2px}.sui-color-picker__trigger:active{transform:none}:host([data-sui-disabled]) .sui-color-picker__trigger{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);cursor:not-allowed;pointer-events:none}.sui-color-picker__placeholder-dot{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--sui-bg-soft-200)}.sui-color-picker__label{flex:1 0 auto;white-space:nowrap}.sui-color-picker__chevron{flex-shrink:0;color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-color-picker__chevron{transform:rotate(180deg)}.sui-color-picker__panel{position:absolute;top:calc(100% + 6px);left:0;z-index:100;width:272px;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);box-shadow:var(--sui-shadow-medium);overflow:hidden;display:flex;flex-direction:column;animation:sui-color-picker__fade var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}@keyframes sui-color-picker__fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sui-color-picker__section{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:16px;width:100%}.sui-color-picker__section--colors{border-bottom:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__section--recommended{gap:8px}:host([data-sui-presets-only]) .sui-color-picker__section--recommended{border-bottom:none}.sui-color-picker__canvas{position:relative;width:100%;height:232px;border-radius:var(--sui-radius-8);cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden;background-color:var(--hue-color, #335cff);background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.sui-color-picker__canvas-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__slider{position:relative;width:100%;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.sui-color-picker__slider-track{position:absolute;left:0;right:0;top:4px;height:8px;border-radius:var(--sui-radius-full);overflow:hidden}.sui-color-picker__hue .sui-color-picker__slider-track{background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.sui-color-picker__opacity .sui-color-picker__slider-track{background-color:#fff;background-image:linear-gradient(to right,transparent,var(--opacity-color, #335cff)),conic-gradient(#ebebeb 0 25%,transparent 0 50%,#ebebeb 0 75%,transparent 0);background-size:auto,10.88px 10.88px}.sui-color-picker__slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__opacity .sui-color-picker__slider-thumb{background-image:linear-gradient(var(--thumb-color, #335cff),var(--thumb-color, #335cff)),conic-gradient(#ebebeb 0 25%,#fff 0 50%,#ebebeb 0 75%,#fff 0);background-size:auto,6px 6px}.sui-color-picker__color-input{display:flex;flex-direction:column;gap:4px;width:100%}.sui-color-picker__format{display:flex;align-items:center;gap:2px;appearance:none;border:none;background:transparent;padding:0;cursor:default;font:inherit;color:var(--sui-text-strong-950)}.sui-color-picker__format-label{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);white-space:nowrap}.sui-color-picker__format-chevron{flex-shrink:0;color:var(--sui-icon-sub-600)}.sui-color-picker__input-row{box-sizing:border-box;display:flex;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);overflow:hidden}.sui-color-picker__sip{display:flex;align-items:center;justify-content:center;padding:6px;border:none;border-right:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);cursor:pointer;appearance:none;flex-shrink:0;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__sip:hover{background:var(--sui-bg-weak-50)}.sui-color-picker__sip:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:-2px}.sui-color-picker__sip:active{transform:none}.sui-color-picker__hex-cell{box-sizing:border-box;display:flex;align-items:center;flex:1 0 0;min-width:0;padding:6px 10px;border-right:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__hex-cell:last-child{border-right:none}.sui-color-picker__hex-field{flex:1 0 0;min-width:0;width:100%;border:none;outline:none;background:transparent;padding:0;appearance:none;color:var(--sui-text-strong-950);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);text-transform:uppercase}.sui-color-picker__hex-field::placeholder{color:var(--sui-text-soft-400);text-transform:none}.sui-color-picker__opacity-cell{box-sizing:border-box;display:flex;align-items:center;flex-shrink:0;padding:6px 10px}.sui-color-picker__opacity-field{width:3.5ch;border:none;outline:none;background:transparent;padding:0;appearance:none;text-align:right;color:var(--sui-text-sub-600);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}.sui-color-picker__opacity-suffix{color:var(--sui-text-sub-600);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}.sui-color-picker__panel-label{margin:0;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-color-picker__grid{display:flex;flex-wrap:wrap;gap:4px;width:100%}\n"] }]
-        }], propDecorators: { colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], recommendedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "recommendedLabel", required: false }] }], presetsOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetsOnly", required: false }] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }], eyedropper: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyedropper", required: false }] }], showFormatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFormatLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], hueRef: [{ type: i0.ViewChild, args: ['hueSlider', { isSignal: true }] }], opacityRef: [{ type: i0.ViewChild, args: ['opacitySlider', { isSignal: true }] }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event.target']]
-            }], onEscape: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }] } });
+                    }, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"sui-color-picker__trigger\"\n  [disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-haspopup]=\"'dialog'\"\n  [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n  (click)=\"toggle()\"\n  (touchstart)=\"$event.currentTarget\"\n  (touchend)=\"$any($event.currentTarget).blur()\"\n>\n  @if (value()) {\n    @if (currentPreset()) {\n      <sui-color-dot [color]=\"currentPreset()!\" state=\"selected\" class=\"sui-color-picker__preview\" />\n    } @else {\n      <sui-color-dot [customHex]=\"previewColor()\" state=\"selected\" class=\"sui-color-picker__preview\" />\n    }\n  } @else {\n    <span class=\"sui-color-picker__placeholder-dot\" aria-hidden=\"true\"></span>\n  }\n  <span class=\"sui-color-picker__label\">{{ currentLabel() }}</span>\n  <sui-icon name=\"arrow-down-s-line\" [size]=\"16\" class=\"sui-color-picker__chevron\" />\n</button>\n\n<!-- Panel en CDK overlay (via sui-dropdown-menu): escapa cualquier overflow\n     clipping del contenedor (Storybook docs, modales, tablas). El contenido del\n     ng-template mantiene el scoping de estilos del componente. -->\n<sui-dropdown-menu\n  [origin]=\"trigger\"\n  [disabled]=\"disabled()\"\n  panelClass=\"sui-color-picker__overlay-pane\"\n  (openedChange)=\"onMenuOpenedChange($event)\"\n>\n  <ng-template suiDropdownPanel>\n  <div\n    class=\"sui-color-picker__panel\"\n    role=\"dialog\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    @if (!presetsOnly()) {\n      <!-- Secci\u00F3n \"Colors\" \u2014 Figma 4456:115716 -->\n      <div class=\"sui-color-picker__section sui-color-picker__section--colors\">\n        <!-- HSV Color Spectrum \u2014 Figma 4456:115425 -->\n        <div\n          #canvas\n          class=\"sui-color-picker__canvas\"\n          role=\"application\"\n          aria-label=\"Saturaci\u00F3n y brillo\"\n          [style.--hue-color]=\"hueColor()\"\n          (pointerdown)=\"onCanvasPointerDown($event)\"\n          (pointermove)=\"onCanvasPointerMove($event)\"\n          (pointerup)=\"onCanvasPointerUp($event)\"\n          (pointercancel)=\"onCanvasPointerUp($event)\"\n        >\n          <div\n            class=\"sui-color-picker__canvas-thumb\"\n            [style.left]=\"canvasThumbX()\"\n            [style.top]=\"canvasThumbY()\"\n            [style.background-color]=\"currentHex()\"\n          ></div>\n        </div>\n\n        <!-- Hue slider \u2014 Figma 4415:53669 -->\n        <div\n          #hueSlider\n          class=\"sui-color-picker__slider sui-color-picker__hue\"\n          role=\"slider\"\n          aria-label=\"Matiz\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"360\"\n          [attr.aria-valuenow]=\"hueRounded()\"\n          (pointerdown)=\"onHuePointerDown($event)\"\n          (pointermove)=\"onHuePointerMove($event)\"\n          (pointerup)=\"onHuePointerUp($event)\"\n          (pointercancel)=\"onHuePointerUp($event)\"\n        >\n          <div class=\"sui-color-picker__slider-track\"></div>\n          <div\n            class=\"sui-color-picker__slider-thumb\"\n            [style.left]=\"hueThumbX()\"\n            [style.background-color]=\"hueColor()\"\n          ></div>\n        </div>\n\n        <!-- Opacity slider \u2014 Figma 4415:53670. Visible por default (alpha on);\n             ocultable con [alpha]=false. -->\n        @if (alpha()) {\n          <div\n            #opacitySlider\n            class=\"sui-color-picker__slider sui-color-picker__opacity\"\n            role=\"slider\"\n            aria-label=\"Opacidad\"\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            [attr.aria-valuenow]=\"alphaPercent()\"\n            [style.--opacity-color]=\"opacityColor()\"\n            (pointerdown)=\"onOpacityPointerDown($event)\"\n            (pointermove)=\"onOpacityPointerMove($event)\"\n            (pointerup)=\"onOpacityPointerUp($event)\"\n            (pointercancel)=\"onOpacityPointerUp($event)\"\n          >\n            <div class=\"sui-color-picker__slider-track\"></div>\n            <div\n              class=\"sui-color-picker__slider-thumb\"\n              [style.left]=\"opacityThumbX()\"\n              [style.--thumb-color]=\"opacityThumbColor()\"\n            ></div>\n          </div>\n        }\n\n        <!-- Color Input \u2014 Figma 4456:115720 -->\n        <div class=\"sui-color-picker__color-input\">\n          <!-- Format label \"Hex\" + chevron \u2014 Figma 4456:115721.\n               Hex-only por ahora (ver PENDING VERIFY en el .ts). -->\n          @if (showFormatLabel()) {\n            <div class=\"sui-color-picker__format\" aria-hidden=\"true\">\n              <span class=\"sui-color-picker__format-label\">Hex</span>\n              <sui-icon name=\"arrow-down-s-line\" [size]=\"20\" class=\"sui-color-picker__format-chevron\" />\n            </div>\n          }\n\n          <!-- Input row \u2014 Figma 4456:115724: sip | hex | opacity -->\n          <div class=\"sui-color-picker__input-row\">\n            <!-- Sip (eyedropper) \u2014 Figma 4456:115796. Solo con EyeDropper API. -->\n            @if (showEyedropper()) {\n              <button\n                type=\"button\"\n                class=\"sui-color-picker__sip\"\n                aria-label=\"Cuentagotas\"\n                (click)=\"onEyedropper()\"\n                (touchstart)=\"$event.currentTarget\"\n                (touchend)=\"$any($event.currentTarget).blur()\"\n              >\n                <sui-icon name=\"sip-line\" [size]=\"20\" />\n              </button>\n            }\n\n            <!-- Hex field \u2014 Figma 4456:115725 / 4456:115726: el texto va SIN\n                 prefijo '#' (Figma muestra \"335CFF\" pelado dentro de la celda). -->\n            <div class=\"sui-color-picker__hex-cell\">\n              <input\n                class=\"sui-color-picker__hex-field\"\n                type=\"text\"\n                inputmode=\"text\"\n                autocomplete=\"off\"\n                spellcheck=\"false\"\n                maxlength=\"8\"\n                aria-label=\"Valor hexadecimal\"\n                [value]=\"hexDisplayValue()\"\n                (input)=\"onHexInputChange($event)\"\n                (keydown)=\"onHexKeyDown($event)\"\n                (blur)=\"onHexCommit()\"\n              />\n            </div>\n\n            <!-- Opacity field \"%\" \u2014 Figma 4456:115727. Visible por default\n                 (alpha on); ocultable con [alpha]=false. -->\n            @if (alpha()) {\n              <div class=\"sui-color-picker__opacity-cell\">\n                <input\n                  class=\"sui-color-picker__opacity-field\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  autocomplete=\"off\"\n                  maxlength=\"3\"\n                  aria-label=\"Opacidad\"\n                  [value]=\"alphaPercent()\"\n                  (change)=\"onOpacityFieldCommit($event)\"\n                  (keydown)=\"onHexKeyDown($event)\"\n                />\n                <span class=\"sui-color-picker__opacity-suffix\" aria-hidden=\"true\">%</span>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Secci\u00F3n \"Recommended Colors\" \u2014 Figma 4456:115765 -->\n    <div class=\"sui-color-picker__section sui-color-picker__section--recommended\">\n      <p class=\"sui-color-picker__panel-label\">{{ recommendedLabel() }}</p>\n      <div class=\"sui-color-picker__grid\" role=\"radiogroup\">\n        @for (c of colors(); track c) {\n          <sui-color-dot\n            [color]=\"c\"\n            [state]=\"currentPreset() === c ? 'selected' : 'default'\"\n            (clicked)=\"onPresetClick(c)\"\n          />\n        }\n      </div>\n    </div>\n  </div>\n  </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-block;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-color-picker__trigger{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);cursor:pointer;appearance:none;font:inherit;color:var(--sui-text-strong-950);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__trigger:hover{background:var(--sui-bg-weak-50)}:host([data-sui-open]) .sui-color-picker__trigger{border-color:var(--sui-stroke-strong-950, var(--sui-text-strong-950))}.sui-color-picker__trigger:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:2px}.sui-color-picker__trigger:active{transform:none}:host([data-sui-disabled]) .sui-color-picker__trigger{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);cursor:not-allowed;pointer-events:none}.sui-color-picker__placeholder-dot{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--sui-bg-soft-200)}.sui-color-picker__label{flex:1 0 auto;white-space:nowrap}.sui-color-picker__chevron{flex-shrink:0;color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-color-picker__chevron{transform:rotate(180deg)}.sui-color-picker__panel{width:272px;margin-top:6px;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);box-shadow:var(--sui-shadow-medium);overflow:hidden;display:flex;flex-direction:column;animation:sui-color-picker__fade var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}@keyframes sui-color-picker__fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sui-color-picker__section{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:16px;width:100%}.sui-color-picker__section--colors{border-bottom:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__section--recommended{gap:8px}:host([data-sui-presets-only]) .sui-color-picker__section--recommended{border-bottom:none}.sui-color-picker__canvas{position:relative;width:100%;height:232px;border-radius:var(--sui-radius-8);cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden;background-color:var(--hue-color, #335cff);background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.sui-color-picker__canvas-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__slider{position:relative;width:100%;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.sui-color-picker__slider-track{position:absolute;left:0;right:0;top:4px;height:8px;border-radius:var(--sui-radius-full);overflow:hidden}.sui-color-picker__hue .sui-color-picker__slider-track{background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.sui-color-picker__opacity .sui-color-picker__slider-track{background-color:#fff;background-image:linear-gradient(to right,transparent,var(--opacity-color, #335cff)),conic-gradient(#ebebeb 0 25%,transparent 0 50%,#ebebeb 0 75%,transparent 0);background-size:auto,10.88px 10.88px}.sui-color-picker__slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__opacity .sui-color-picker__slider-thumb{background-image:linear-gradient(var(--thumb-color, #335cff),var(--thumb-color, #335cff)),conic-gradient(#ebebeb 0 25%,#fff 0 50%,#ebebeb 0 75%,#fff 0);background-size:auto,6px 6px}.sui-color-picker__color-input{display:flex;flex-direction:column;gap:4px;width:100%}.sui-color-picker__format{display:flex;align-items:center;gap:2px;appearance:none;border:none;background:transparent;padding:0;cursor:default;font:inherit;color:var(--sui-text-strong-950)}.sui-color-picker__format-label{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);white-space:nowrap}.sui-color-picker__format-chevron{flex-shrink:0;color:var(--sui-icon-sub-600)}.sui-color-picker__input-row{box-sizing:border-box;display:flex;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);overflow:hidden}.sui-color-picker__sip{display:flex;align-items:center;justify-content:center;padding:6px;border:none;border-right:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);cursor:pointer;appearance:none;flex-shrink:0;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__sip:hover{background:var(--sui-bg-weak-50)}.sui-color-picker__sip:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:-2px}.sui-color-picker__sip:active{transform:none}.sui-color-picker__hex-cell{box-sizing:border-box;display:flex;align-items:center;flex:1 0 0;min-width:0;padding:6px 10px;border-right:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__hex-cell:last-child{border-right:none}.sui-color-picker__hex-field{flex:1 0 0;min-width:0;width:100%;border:none;outline:none;background:transparent;padding:0;appearance:none;color:var(--sui-text-strong-950);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);text-transform:uppercase}.sui-color-picker__hex-field::placeholder{color:var(--sui-text-soft-400);text-transform:none}.sui-color-picker__opacity-cell{box-sizing:border-box;display:flex;align-items:center;flex-shrink:0;padding:6px 10px}.sui-color-picker__opacity-field{width:3.5ch;border:none;outline:none;background:transparent;padding:0;appearance:none;text-align:right;color:var(--sui-text-sub-600);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}.sui-color-picker__opacity-suffix{color:var(--sui-text-sub-600);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}.sui-color-picker__panel-label{margin:0;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-color-picker__grid{display:flex;flex-wrap:wrap;gap:4px;width:100%}\n"] }]
+        }], propDecorators: { colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], recommendedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "recommendedLabel", required: false }] }], presetsOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetsOnly", required: false }] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }], eyedropper: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyedropper", required: false }] }], showFormatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFormatLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], _menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SuiDropdownMenu), { isSignal: true }] }], canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], hueRef: [{ type: i0.ViewChild, args: ['hueSlider', { isSignal: true }] }], opacityRef: [{ type: i0.ViewChild, args: ['opacitySlider', { isSignal: true }] }] } });
 
 class SuiKbd {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -4476,218 +4676,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "<div class=\"sui-dropdown-item__leading\">\n  <ng-content select=\"[slot=leading]\" />\n</div>\n\n<div class=\"sui-dropdown-item__text\">\n  <span class=\"sui-dropdown-item__label\">{{ label() }}</span>\n  @if (hasSublabel()) {\n    <span class=\"sui-dropdown-item__sublabel\">{{ sublabel() }}</span>\n  }\n  @if (hasDescription()) {\n    <span class=\"sui-dropdown-item__description\">{{ description() }}</span>\n  }\n</div>\n\n<div class=\"sui-dropdown-item__trailing\">\n  <!-- Canon trailing-slot (Figma 405:6432): el consumer proyecta en este orden DOM\n       fijo \u2192 badge primero, luego shortcut (provisto por el input shortcut() abajo),\n       luego toggle/button al final. El gap del flex (8px) los separa.\n       Pill button (variante Large): bg primary-alpha-10, p-6, radius-8, label primary\n       Inter Medium 14/20. Link button (variante Small): texto primary sin bg.\n       El componente no fija sublots \u2014 el orden lo controla el consumer seg\u00FAn este\n       patr\u00F3n para mantener consistencia visual vs Figma. -->\n  <ng-content select=\"[slot=trailing]\" />\n  @if (shortcut()) {\n    <span class=\"sui-dropdown-item__shortcut\">{{ shortcut() }}</span>\n  }\n  @if (showCheck()) {\n    <!-- Check icon autom\u00E1tico en mode='option' cuando selected=true.\n         Remixicon check-line (ri-check-line) v\u00EDa sui-icon \u2014 mismo glyph que\n         el resto del proyecto, color heredado de .sui-dropdown-item__check. -->\n    <sui-icon class=\"sui-dropdown-item__check\" name=\"check-line\" [size]=\"20\" />\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-8, 8px);cursor:pointer;outline:none;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);transition:background .1s ease-out,box-shadow .1s ease-out;-webkit-user-select:none;user-select:none}:host:hover{background:var(--sui-bg-weak-50)}:host:active:not([data-sui-disabled]),:host:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=small]){min-height:36px;padding:8px;gap:8px}:host([data-sui-size=large]){min-height:56px;padding:8px;gap:12px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=large]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=large]) .sui-dropdown-item__label{font-weight:var(--sui-type-label-sm-weight, 500)}:host([data-sui-size=xlarge]){min-height:76px;padding:8px;gap:16px;border-radius:var(--sui-radius-12, 12px)}:host([data-sui-size=xlarge]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=xlarge]) .sui-dropdown-item__label{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=xlarge]) .sui-dropdown-item__description{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em)}.sui-dropdown-item__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-dropdown-item__leading:empty{display:none}:host([data-sui-size=large][data-sui-framed]) .sui-dropdown-item__leading,:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full, 999px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:12px}.sui-dropdown-item__text{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-dropdown-item__label{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);color:var(--sui-text-strong-950);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-dropdown-item__sublabel{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-soft-400);flex-shrink:0}.sui-dropdown-item__description{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-sub-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-dropdown-item__trailing{flex-shrink:0;display:inline-flex;align-items:center;gap:8px}.sui-dropdown-item__trailing:empty{display:none}.sui-dropdown-item__shortcut{display:inline-flex;align-items:center;padding:2px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4, 4px);font-family:var(--sui-font-sans);font-size:12px;line-height:16px;font-weight:500;color:var(--sui-text-sub-600);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}:host([data-sui-mode=option][data-sui-selected]){background:var(--sui-primary-alpha-10)}:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__label,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__sublabel,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__check{color:var(--sui-primary-base)}:host([data-sui-mode=option][data-sui-selected]):hover{background:var(--sui-primary-alpha-16)}.sui-dropdown-item__check{width:20px;height:20px;flex-shrink:0;color:var(--sui-primary-base)}:host([data-sui-highlighted]:not([data-sui-selected])){background:var(--sui-bg-weak-50)}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-dropdown-item__label,:host([data-sui-disabled]) .sui-dropdown-item__sublabel,:host([data-sui-disabled]) .sui-dropdown-item__description{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-dropdown-item__leading{color:var(--sui-icon-disabled-300, #d1d1d1)}:host([data-sui-disabled]) .sui-dropdown-item__leading>:not(sui-icon){opacity:.48}:host([data-sui-disabled]):hover{background:var(--sui-bg-white-0)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], leadingFramed: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingFramed", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], highlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighted", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
-/**
- * Structural directive — marca un `<ng-template>` como panel del
- * sui-dropdown-menu. El componente padre captura este TemplateRef
- * via `@ContentChild(SuiDropdownPanel)` y lo monta en el CDK Overlay
- * cuando se abre el menu.
- *
- * Usa el patrón canon Angular (similar a `*matMenuContent` de Material):
- * un directive que se aplica al `<ng-template>` SE convierte en una
- * marca semántica, evitando que Angular renderee el contenido inline
- * cuando no hay `<ng-content>` matching para el template.
- *
- * Uso:
- *   <sui-dropdown-menu>
- *     <sui-compact-select trigger ... />
- *     <ng-template suiDropdownPanel>
- *       <sui-dropdown-item ...></sui-dropdown-item>
- *     </ng-template>
- *   </sui-dropdown-menu>
- */
-class SuiDropdownPanel {
-    template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDropdownPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: SuiDropdownPanel, isStandalone: true, selector: "ng-template[suiDropdownPanel]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDropdownPanel, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[suiDropdownPanel]',
-                    standalone: true,
-                }]
-        }] });
-
-/* Posiciones con fallback HORIZONTAL: la primera (start-aligned, abre a la
-   derecha) es la default; si el trigger está pegado al borde derecho y no entra,
-   CDK cae a la end-aligned (abre hacia la izquierda) y recién después flipea
-   vertical. Sin esto, un trigger en la esquina derecha (ej. kebab ⋮ de una card)
-   recorta el panel fuera del viewport. */
-const POSITIONS_BELOW = [
-    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
-    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
-    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
-    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
-];
-const POSITIONS_ABOVE = [
-    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
-    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
-    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
-    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
-];
-class SuiDropdownMenu {
-    /** Si true, el panel matchea el ancho del trigger. Default: auto width. */
-    matchWidth = input(false, ...(ngDevMode ? [{ debugName: "matchWidth" }] : /* istanbul ignore next */ []));
-    /** Min-width fijo del panel (px). Si matchWidth + minWidth: `max(triggerWidth, minWidth)`. */
-    minWidth = input(null, ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
-    /** Position primary. Default: auto = below con fallback above. */
-    position = input('auto', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    /** Margen 8px del viewport edge (canon SUI). */
-    viewportMargin = input(8, ...(ngDevMode ? [{ debugName: "viewportMargin" }] : /* istanbul ignore next */ []));
-    /** Panel custom class para overrides de bg/padding/etc desde el consumer. */
-    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
-    /** Disabled — no abre el menu al clickear el trigger. */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    /**
-     * Rol del popup para `aria-haspopup` del trigger. Default 'menu' (los items
-     * proyectados llevan role="menuitem"). Los consumers de tipo listbox
-     * (sui-select / compact-selects, items con role="option") DEBEN pasar
-     * `popupRole="listbox"`. Ver SuiDropdownMenuPopupRole.
-     */
-    popupRole = input('menu', ...(ngDevMode ? [{ debugName: "popupRole" }] : /* istanbul ignore next */ []));
-    /**
-     * Origin externo. Si presente, el menu se ancla a ese elemento y NO renderea
-     * el trigger wrapper interno (el parent maneja el click). Caso de uso:
-     * compact-selects donde el host element es el trigger visual.
-     */
-    origin = input(null, ...(ngDevMode ? [{ debugName: "origin" }] : /* istanbul ignore next */ []));
-    openedChange = output();
-    /** Signal pública — wire al `[open]` del trigger para visual state. */
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    /** Wrapper del trigger projection — captura el click. NO existe si `[origin]` se pasa. */
-    _triggerWrap;
-    /** Panel directive proyectado — capturado via `[suiDropdownPanel]` en un ng-template. */
-    _panel;
-    _getTriggerEl() {
-        const o = this.origin();
-        if (o)
-            return o instanceof ElementRef ? o.nativeElement : o;
-        return this._triggerWrap?.nativeElement ?? null;
-    }
-    _vcr = inject(ViewContainerRef);
-    _destroyRef = inject(DestroyRef);
-    _overlay = inject(Overlay);
-    _overlayRef = null;
-    _overlaySubs = null;
-    _resizeObserver = null;
-    constructor() {
-        this._destroyRef.onDestroy(() => this.close());
-    }
-    onTriggerClick(event) {
-        if (this.disabled())
-            return;
-        event.stopPropagation();
-        this.toggle();
-    }
-    onTriggerKeydown(event) {
-        if (this.disabled())
-            return;
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            this.toggle();
-        }
-        else if (event.key === 'ArrowDown') {
-            event.preventDefault();
-            this.open();
-        }
-    }
-    toggle() {
-        if (this.isOpen())
-            this.close();
-        else
-            this.open();
-    }
-    open() {
-        if (this.disabled() || this._overlayRef || !this._panel)
-            return;
-        const triggerEl = this._getTriggerEl();
-        if (!triggerEl)
-            return;
-        const positions = this.position() === 'above' ? POSITIONS_ABOVE : POSITIONS_BELOW;
-        const positionStrategy = this._overlay
-            .position()
-            .flexibleConnectedTo(triggerEl)
-            .withPositions(positions)
-            .withPush(false)
-            .withFlexibleDimensions(true)
-            .withViewportMargin(this.viewportMargin());
-        const triggerWidth = triggerEl.getBoundingClientRect().width;
-        const minW = this.minWidth();
-        const effectiveMinWidth = this.matchWidth() && minW !== null
-            ? Math.max(triggerWidth, minW)
-            : minW;
-        const config = {
-            positionStrategy,
-            scrollStrategy: this._overlay.scrollStrategies.reposition(),
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-            panelClass: ['sui-dropdown-menu__overlay-pane', this.panelClass()].filter(Boolean),
-            disposeOnNavigation: true,
-        };
-        if (this.matchWidth() && minW === null) {
-            config.width = `${triggerWidth}px`;
-        }
-        if (effectiveMinWidth !== null) {
-            config.minWidth = effectiveMinWidth;
-        }
-        this._overlayRef = this._overlay.create(config);
-        const portal = new TemplatePortal(this._panel.template, this._vcr);
-        this._overlayRef.attach(portal);
-        /* Width sync mientras el viewport cambia (canon sui-select). Solo aplica
-           cuando matchWidth fija width o minWidth — para que el panel siga el trigger. */
-        if (this.matchWidth() && typeof ResizeObserver !== 'undefined') {
-            this._resizeObserver = new ResizeObserver(() => {
-                if (!this._overlayRef)
-                    return;
-                const w = triggerEl.getBoundingClientRect().width;
-                if (minW === null) {
-                    this._overlayRef.updateSize({ width: `${w}px` });
-                }
-                else {
-                    this._overlayRef.updateSize({ minWidth: Math.max(w, minW) });
-                }
-                this._overlayRef.updatePosition();
-            });
-            this._resizeObserver.observe(triggerEl);
-        }
-        this._overlaySubs = new Subscription();
-        this._overlaySubs.add(this._overlayRef.backdropClick().subscribe(() => this.close()));
-        this._overlaySubs.add(this._overlayRef.keydownEvents().subscribe((e) => {
-            if (e.key === 'Escape')
-                this.close();
-        }));
-        this._overlaySubs.add(this._overlayRef.detachments().subscribe(() => {
-            this.isOpen.set(false);
-        }));
-        this.isOpen.set(true);
-        this.openedChange.emit(true);
-    }
-    close() {
-        if (!this._overlayRef)
-            return;
-        this._overlaySubs?.unsubscribe();
-        this._overlaySubs = null;
-        this._resizeObserver?.disconnect();
-        this._resizeObserver = null;
-        this._overlayRef.dispose();
-        this._overlayRef = null;
-        this.isOpen.set(false);
-        this.openedChange.emit(false);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDropdownMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiDropdownMenu, isStandalone: true, selector: "sui-dropdown-menu", inputs: { matchWidth: { classPropertyName: "matchWidth", publicName: "matchWidth", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, viewportMargin: { classPropertyName: "viewportMargin", publicName: "viewportMargin", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, popupRole: { classPropertyName: "popupRole", publicName: "popupRole", isSignal: true, isRequired: false, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, queries: [{ propertyName: "_panel", first: true, predicate: SuiDropdownPanel, descendants: true }], viewQueries: [{ propertyName: "_triggerWrap", first: true, predicate: ["triggerWrap"], descendants: true }], exportAs: ["suiDropdownMenu"], ngImport: i0, template: "<!-- Trigger wrapper \u2014 captura click y keydown del trigger child. Solo se\n     renderea cuando NO se pasa [origin] (modo content-projection canon).\n     Cuando se pasa [origin], el parent maneja el trigger y llama\n     menu.toggle() desde su propio click handler. -->\n@if (!origin()) {\n  <span\n    #triggerWrap\n    class=\"sui-dropdown-menu__trigger\"\n    [attr.aria-haspopup]=\"popupRole()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    (click)=\"onTriggerClick($event)\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <ng-content select=\"[trigger]\" />\n  </span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-dropdown-menu__trigger{display:inline-block;cursor:pointer;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDropdownMenu, decorators: [{
-            type: Component,
-            args: [{ selector: 'sui-dropdown-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'suiDropdownMenu', template: "<!-- Trigger wrapper \u2014 captura click y keydown del trigger child. Solo se\n     renderea cuando NO se pasa [origin] (modo content-projection canon).\n     Cuando se pasa [origin], el parent maneja el trigger y llama\n     menu.toggle() desde su propio click handler. -->\n@if (!origin()) {\n  <span\n    #triggerWrap\n    class=\"sui-dropdown-menu__trigger\"\n    [attr.aria-haspopup]=\"popupRole()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    (click)=\"onTriggerClick($event)\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <ng-content select=\"[trigger]\" />\n  </span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-dropdown-menu__trigger{display:inline-block;cursor:pointer;outline:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { matchWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchWidth", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], viewportMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportMargin", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], popupRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupRole", required: false }] }], origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], _triggerWrap: [{
-                type: ViewChild,
-                args: ['triggerWrap', { static: false }]
-            }], _panel: [{
-                type: ContentChild,
-                args: [SuiDropdownPanel]
-            }] } });
-
 class SuiCompactSelectForInput {
     size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -14603,8 +14591,13 @@ class SuiTable {
         let sx = 0, sy = 0, lx = 0, ly = 0;
         let axis = null;
         let pageScroller = null;
-        /* Velocidad vertical (px/ms) + timestamp del último move, para el fling. */
-        let vy = 0, lastT = 0, momentumRaf = 0, momentumTs = 0;
+        /* Velocidad vertical (px/ms) para el fling. CRÍTICO: se estima con una
+           ventana de samples (~100ms) tipo VelocityTracker de Android — NO con el
+           último move suelto: el dedo siempre desacelera antes de soltar, así que
+           la velocidad instantánea final es ~0 y el fling moría → scroll "lento". */
+        let vy = 0, momentumRaf = 0, momentumTs = 0;
+        const samples = [];
+        const VELOCITY_WINDOW_MS = 100;
         const findPageScroller = () => {
             let n = el.parentElement;
             while (n && n !== this.doc.body) {
@@ -14631,7 +14624,8 @@ class SuiTable {
             sy = ly = t.clientY;
             axis = null;
             vy = 0;
-            lastT = e.timeStamp;
+            samples.length = 0;
+            samples.push({ y: t.clientY, t: e.timeStamp });
             pageScroller = findPageScroller();
         };
         const onMove = (e) => {
@@ -14657,22 +14651,27 @@ class SuiTable {
                 el.scrollLeft -= t.clientX - lx;
             }
             else if (pageScroller) {
-                const dy = t.clientY - ly;
-                pageScroller.scrollTop -= dy;
-                const dt = e.timeStamp - lastT;
-                if (dt > 0)
-                    vy = dy / dt; // px/ms (positivo = dedo bajando)
+                pageScroller.scrollTop -= t.clientY - ly;
+                samples.push({ y: t.clientY, t: e.timeStamp });
+                while (samples.length > 1 && e.timeStamp - samples[0].t > VELOCITY_WINDOW_MS)
+                    samples.shift();
             }
             e.preventDefault();
             lx = t.clientX;
             ly = t.clientY;
-            lastT = e.timeStamp;
         };
         const onEnd = () => {
             /* Fling: continúa el scroll de la página con la velocidad de salida y
                fricción exponencial frame-rate-independent (para que en 120Hz no vuele).
                Replica el momentum nativo que el manejo manual del touch pierde. */
-            if (axis !== 'y' || !pageScroller || Math.abs(vy) < 0.05)
+            if (axis !== 'y' || !pageScroller)
+                return;
+            /* Velocidad de salida = promedio de la ventana (primer→último sample). */
+            const first = samples[0];
+            const last = samples[samples.length - 1];
+            const win = last && first ? last.t - first.t : 0;
+            vy = win > 0 ? (last.y - first.y) / win : 0;
+            if (Math.abs(vy) < 0.05)
                 return;
             const scroller = pageScroller;
             momentumTs = 0;