@ajuarezso/sui-design-system 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ajuarezso/sui-design-system",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "SUI Design System — librería de componentes Angular (SUI 2.0).",
   "license": "UNLICENSED",
   "publishConfig": {

package/types/ajuarezso-sui-design-system.d.ts

@@ -904,7 +904,7 @@ declare class SuiAlert {
      * `small` (12/16) en los compactos (small/xsmall). Mapea el tipo del action al
      * tamaño del alert.
      */
-    readonly actionLinkSize: _angular_core.Signal<"small" | "medium">;
+    readonly actionLinkSize: _angular_core.Signal<"medium" | "small">;
     /**
      * Tamaño del `sui-compact-button` del cierre, mapeado del size del alert para
      * conservar el footprint del icono: xsmall (icon 16) → compact `medium`;
@@ -1306,7 +1306,7 @@ type SuiBrandLogoSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  *     ariaLabel="Síguenos en GitHub" />
  */
 declare class SuiBrandLogo {
-    readonly company: _angular_core.InputSignal<"apple" | "x-twitter" | "google" | "facebook" | "linkedin" | "github" | "dropbox" | "adobe" | "amazon" | "bitcoin" | "discord" | "figma" | "framer" | "instagram" | "microsoft" | "netflix" | "notion" | "paypal" | "pinterest" | "slack" | "spotify" | "stripe" | "telegram" | "twitch" | "webflow" | "whatsapp" | "wise" | "youtube">;
+    readonly company: _angular_core.InputSignal<"adobe" | "amazon" | "apple" | "bitcoin" | "discord" | "dropbox" | "facebook" | "figma" | "framer" | "github" | "google" | "instagram" | "linkedin" | "microsoft" | "netflix" | "notion" | "paypal" | "pinterest" | "slack" | "spotify" | "stripe" | "telegram" | "twitch" | "webflow" | "whatsapp" | "wise" | "x-twitter" | "youtube">;
     readonly variant: _angular_core.InputSignal<SuiBrandLogoStyle>;
     readonly size: _angular_core.InputSignal<SuiBrandLogoSize>;
     readonly href: _angular_core.InputSignal<string | null>;
@@ -1527,7 +1527,7 @@ declare class SuiButtonGroupItem {
     /** aria-label para icon-only buttons */
     readonly ariaLabel: _angular_core.InputSignal<string>;
     /** Estado del data-attribute para CSS scoping */
-    readonly state: _angular_core.Signal<"disabled" | "default" | "active">;
+    readonly state: _angular_core.Signal<"default" | "active" | "disabled">;
     /** True cuando solo tiene icon (left o right) sin label */
     readonly onlyIcon: _angular_core.Signal<boolean>;
     /**
@@ -1898,7 +1898,7 @@ declare class SuiCheckboxCard implements ControlValueAccessor {
     /** RemixIcon name (sin prefijo "ri-") para type='left-icon'. */
     readonly icon: _angular_core.InputSignal<string | null>;
     /** Emoji del catálogo SUI_EMOJI_MAP — alternativa a icon para type='left-icon'. */
-    readonly emoji: _angular_core.InputSignal<"label" | "warning" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
+    readonly emoji: _angular_core.InputSignal<"warning" | "label" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
     /** URL directa al emoji para type='left-icon'. Precedencia: icon > emoji > iconSrc. */
     readonly iconSrc: _angular_core.InputSignal<string | null>;
     /** URL de imagen para type='avatar'. Si falla, fallback a iniciales del label. */
@@ -2235,7 +2235,7 @@ declare class SuiColorDot {
      *   - `selected` → dot 12×12 + ring 2px.
      *   - `disabled` → dot gris pálido, sin pointer events.
      */
-    readonly state: _angular_core.InputSignal<"disabled" | "default" | "hover" | "selected">;
+    readonly state: _angular_core.InputSignal<"default" | "disabled" | "hover" | "selected">;
     /** aria-label override. */
     readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly clicked: _angular_core.OutputEmitterRef<void>;
@@ -2374,6 +2374,7 @@ declare class SuiColorPicker {
     /** Hex input visible (separate del value model para validación en blur). */
     protected readonly hexInput: _angular_core.WritableSignal<string>;
     /** Refs del spectrum y sliders para cálculos de bounds */
+    private readonly _menu;
     private readonly canvasRef;
     private readonly hueRef;
     private readonly opacityRef;
@@ -2456,6 +2457,10 @@ declare class SuiColorPicker {
     readonly hexDisplayValue: _angular_core.Signal<string>;
     toggle(): void;
     close(): void;
+    /** 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. */
+    protected onMenuOpenedChange(opened: boolean): void;
     onPresetClick(preset: SuiColorDotColor): void;
     private canvasDragging;
     protected onCanvasPointerDown(ev: PointerEvent): void;
@@ -2478,8 +2483,6 @@ declare class SuiColorPicker {
     protected onHexKeyDown(ev: KeyboardEvent): void;
     protected onOpacityFieldCommit(ev: Event): void;
     protected onEyedropper(): Promise<void>;
-    protected onDocumentClick(target: EventTarget | null): void;
-    protected onEscape(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiColorPicker, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiColorPicker, "sui-color-picker", never, { "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "recommendedLabel": { "alias": "recommendedLabel"; "required": false; "isSignal": true; }; "presetsOnly": { "alias": "presetsOnly"; "required": false; "isSignal": true; }; "alpha": { "alias": "alpha"; "required": false; "isSignal": true; }; "eyedropper": { "alias": "eyedropper"; "required": false; "isSignal": true; }; "showFormatLabel": { "alias": "showFormatLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "change": "change"; }, never, never, true, never>;
 }
@@ -3172,7 +3175,7 @@ declare class SuiContentCard {
     /** Logo de empresa para type=company (mini-avatar bottom-right del sui-avatar). */
     readonly companyLogoSrc: _angular_core.InputSignal<string | null>;
     /** Marca para type=brand / card-provider. */
-    readonly brand: _angular_core.InputSignal<"apple" | "x-twitter" | "google" | "facebook" | "linkedin" | "github" | "dropbox" | "adobe" | "amazon" | "bitcoin" | "discord" | "figma" | "framer" | "instagram" | "microsoft" | "netflix" | "notion" | "paypal" | "pinterest" | "slack" | "spotify" | "stripe" | "telegram" | "twitch" | "webflow" | "whatsapp" | "wise" | "youtube" | null>;
+    readonly brand: _angular_core.InputSignal<"adobe" | "amazon" | "apple" | "bitcoin" | "discord" | "dropbox" | "facebook" | "figma" | "framer" | "github" | "google" | "instagram" | "linkedin" | "microsoft" | "netflix" | "notion" | "paypal" | "pinterest" | "slack" | "spotify" | "stripe" | "telegram" | "twitch" | "webflow" | "whatsapp" | "wise" | "x-twitter" | "youtube" | null>;
     /** Mostrar el botón X de dismiss. Default true. */
     readonly dismissible: _angular_core.InputSignal<boolean>;
     /** aria-label del botón X. */
@@ -4446,7 +4449,7 @@ type SuiEmojiName = keyof typeof SUI_EMOJI_MAP;
 type SuiEmojiSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 declare class SuiEmoji {
     /** Nombre del emoji del catálogo. Si se proveé `src`, este se ignora. */
-    readonly name: _angular_core.InputSignal<"label" | "warning" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
+    readonly name: _angular_core.InputSignal<"warning" | "label" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
     /** URL directa al emoji (override del catálogo). Útil para usar emojis fuera del map. */
     readonly src: _angular_core.InputSignal<string | null>;
     /** Tamaño del emoji. */
@@ -4927,13 +4930,13 @@ declare class SuiFileUpload {
     protected readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     protected readonly dragging: _angular_core.WritableSignal<boolean>;
     protected readonly internalError: _angular_core.WritableSignal<string | null>;
-    protected readonly state: _angular_core.Signal<"error" | "disabled" | "default" | "dragover">;
+    protected readonly state: _angular_core.Signal<"default" | "error" | "disabled" | "dragover">;
     protected readonly resolvedTitle: _angular_core.Signal<string>;
     protected readonly resolvedSubtitle: _angular_core.Signal<string>;
     protected readonly resolvedErrorMessage: _angular_core.Signal<string | null>;
     /** Icon size px. Figma verified = 24 (medium). small/large/xlarge escalan +4
      *  (small 20 → medium 24 → large 28 → xlarge 32) — extensión de proyecto. */
-    protected readonly iconSize: _angular_core.Signal<24 | 20 | 32 | 28>;
+    protected readonly iconSize: _angular_core.Signal<20 | 24 | 32 | 28>;
     onClick(): void;
     /** Browse File button — abre el picker. stopPropagation evita doble-open
      *  (el host también es clickeable). */
@@ -5155,7 +5158,7 @@ declare class SuiFilterPanelFooter {
     readonly clearDisabled: _angular_core.InputSignal<boolean>;
     readonly applyDisabled: _angular_core.InputSignal<boolean>;
     /** Tamaño de los botones. Default 'small' (Figma: p-8px/radius-8 = size small). */
-    readonly size: _angular_core.InputSignal<"small" | "medium">;
+    readonly size: _angular_core.InputSignal<"medium" | "small">;
     readonly clear: _angular_core.OutputEmitterRef<void>;
     readonly apply: _angular_core.OutputEmitterRef<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiFilterPanelFooter, never>;
@@ -5591,7 +5594,7 @@ declare class SuiImageUpload {
      *  (matchea el escalado del contenedor 32→40 en SCSS). */
     protected readonly iconSize: _angular_core.Signal<20 | 16>;
     protected readonly hasSrc: _angular_core.Signal<boolean>;
-    protected readonly state: _angular_core.Signal<"disabled" | "filled" | "dragover" | "empty">;
+    protected readonly state: _angular_core.Signal<"filled" | "disabled" | "dragover" | "empty">;
     protected readonly resolvedTitle: _angular_core.Signal<string>;
     protected readonly resolvedSubtitle: _angular_core.Signal<string>;
     onHostClick(): void;
@@ -6979,7 +6982,7 @@ declare class SuiNotification {
     readonly dismissible: _angular_core.InputSignal<boolean>;
     readonly unread: _angular_core.InputSignal<boolean>;
     /** Item body type. 'basic' keeps the legacy/alert layout (no body slot). */
-    readonly type: _angular_core.InputSignal<"button" | "basic" | "file" | "message">;
+    readonly type: _angular_core.InputSignal<"file" | "button" | "basic" | "message">;
     /** When true, item paints the Figma hover bg + reveals the more-2-line button. */
     readonly showMore: _angular_core.InputSignal<boolean>;
     /** Forces the hover affordance visible (e.g. keyboard-focused row). */
@@ -7631,7 +7634,7 @@ declare class SuiRadioCard implements ControlValueAccessor {
     readonly size: _angular_core.InputSignal<SuiRadioSize>;
     /** Lado en px del radio según size: medium 20 · large 24 · xlarge 28. Los
      *  insets internos (bg/box) son % → escalan solos. */
-    readonly radioPx: _angular_core.Signal<24 | 20 | 28>;
+    readonly radioPx: _angular_core.Signal<20 | 24 | 28>;
     /** Valor del radio (requerido para uso en grupo). */
     readonly value: _angular_core.InputSignal<string>;
     /** Título principal del card (label de la fila Title). */
@@ -7650,7 +7653,7 @@ declare class SuiRadioCard implements ControlValueAccessor {
      * Emoji del catálogo SUI_EMOJI_MAP — alternativa a icon para type='left-icon'.
      * Si ambos están, icon tiene precedencia.
      */
-    readonly emoji: _angular_core.InputSignal<"label" | "warning" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
+    readonly emoji: _angular_core.InputSignal<"warning" | "label" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
     /**
      * URL directa al emoji para type='left-icon'. Útil cuando el consumer ya tiene
      * la URL (ej. FLUENT_EMOJI map del proyecto) y no quiere registrar el emoji
@@ -8691,7 +8694,7 @@ declare class SuiStatusBadge {
      */
     readonly withDot: _angular_core.InputSignal<boolean>;
     /** Icono Remix mapeado al status. Solo se usa cuando withDot=false. */
-    readonly iconName: _angular_core.Signal<"information-fill" | "checkbox-circle-fill" | "alert-fill" | "error-warning-fill" | "forbid-fill">;
+    readonly iconName: _angular_core.Signal<"checkbox-circle-fill" | "alert-fill" | "error-warning-fill" | "information-fill" | "forbid-fill">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiStatusBadge, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiStatusBadge, "sui-status-badge", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "withDot": { "alias": "withDot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
@@ -8993,7 +8996,7 @@ declare class SuiSwitchCard implements ControlValueAccessor {
      * `<sui-icon>` proyectado vía `[sui-switch-card-leading]` y se renderiza
      * con las MISMAS dimensiones (20×20 dentro del círculo de 40px).
      */
-    readonly emoji: _angular_core.InputSignal<"label" | "warning" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
+    readonly emoji: _angular_core.InputSignal<"warning" | "label" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
     /**
      * URL de imagen para type='avatar' — se renderiza con sui-avatar size=lg
      * (40×40 redonda). Si la imagen falla, fallback automático a iniciales del
@@ -10306,7 +10309,7 @@ declare class SuiTimePicker implements ControlValueAccessor {
     readonly error: _angular_core.InputSignal<boolean>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
-    readonly size: _angular_core.InputSignal<"small" | "medium">;
+    readonly size: _angular_core.InputSignal<"medium" | "small">;
     /** Formato de display: '12h' (AM/PM) o '24h'. */
     readonly format: _angular_core.InputSignal<SuiTimeFormat>;
     /** Incremento de minutos de la lista (1, 5, 15, ...). Default 5. */