@ajuarezso/sui-design-system 0.11.0 → 0.11.2

package/package.json

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

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

@@ -1037,7 +1037,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<"medium" | "small">;
+    readonly actionLinkSize: _angular_core.Signal<"small" | "medium">;
     /**
      * Tamaño del `sui-compact-button` del cierre, mapeado del size del alert para
      * conservar el footprint del icono: xsmall (icon 16) → compact `medium`;
@@ -1894,7 +1894,7 @@ declare class SuiChartLegendDot {
     /** Color canon de la serie. Default `gray` (variant default del set Figma). */
     readonly color: _angular_core.InputSignal<SuiChartLegendColor>;
     /** Size del container: `medium` 20×20 / `small` 16×16. El dot es 12×12 en ambos. */
-    readonly size: _angular_core.InputSignal<"medium" | "small">;
+    readonly size: _angular_core.InputSignal<"small" | "medium">;
     /**
      * CSS color custom (override del preset) para series fuera de la paleta
      * canon — ej. colores de una paleta echarts propia. Si presente, ignora
@@ -1979,7 +1979,7 @@ declare class SuiChartLegend {
      * Disposición de los items: `horizontal` (row con wrap, default) o
      * `vertical` (columna — leyendas laterales de donut/pie).
      */
-    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     /** Items con color efectivo resuelto (disabled > customColor > color > ciclo auto). */
     protected readonly resolvedItems: _angular_core.Signal<ResolvedLegendItem[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiChartLegend, never>;
@@ -2143,7 +2143,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<"pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "label" | "warning" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "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<"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>;
     /** 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. */
@@ -2584,7 +2584,7 @@ declare class SuiColorDot {
      *   - `selected` → dot 12×12 + ring 2px.
      *   - `disabled` → dot gris pálido, sin pointer events.
      */
-    readonly state: _angular_core.InputSignal<"default" | "hover" | "selected" | "disabled">;
+    readonly state: _angular_core.InputSignal<"default" | "disabled" | "hover" | "selected">;
     /** aria-label override. */
     readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly clicked: _angular_core.OutputEmitterRef<void>;
@@ -5037,7 +5037,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<"pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "label" | "warning" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "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<"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>;
     /** 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. */
@@ -5543,7 +5543,7 @@ 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" | "default" | "disabled" | "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>;
@@ -5779,7 +5779,7 @@ declare class SuiFilterPanelFooter {
     /** Botón "Apply" (filled primary) — string shorthand o SuiFooterButtonConfig. */
     readonly applyButton: _angular_core.InputSignal<string | SuiFooterButtonConfig>;
     /** Tamaño de los botones. Default 'small' (Figma: p-8px/radius-8 = size small). */
-    readonly size: _angular_core.InputSignal<"medium" | "small">;
+    readonly size: _angular_core.InputSignal<"small" | "medium">;
     /** Config resuelta del botón Clear (string → { label }). */
     protected readonly clearCfg: _angular_core.Signal<SuiFooterButtonConfig>;
     /** Config resuelta del botón Apply (string → { label }). */
@@ -6182,7 +6182,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<"empty" | "filled" | "disabled" | "dragover">;
+    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;
@@ -7325,7 +7325,7 @@ declare class SuiModalHeader {
     /** Descripción bajo el título (Paragraph/X-Small). */
     readonly description: _angular_core.InputSignal<string | null>;
     /** medium (80): título + descripción · small (56): título; icono flat 24. */
-    readonly size: _angular_core.InputSignal<"medium" | "small">;
+    readonly size: _angular_core.InputSignal<"small" | "medium">;
     /** Icono semántico de status (círculo state lighter/base en medium). */
     readonly iconVariant: _angular_core.InputSignal<SuiModalHeaderVariant | null>;
     /** Icono custom (type "Left Icon" de Figma). Prioridad sobre iconVariant. */
@@ -7662,7 +7662,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<"basic" | "file" | "button" | "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). */
@@ -8491,7 +8491,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<"pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "label" | "warning" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "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<"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>;
     /**
      * 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
@@ -9240,6 +9240,12 @@ declare class SuiSidebar {
      * switcher de Figma. Emite (headerButtonClicked) al click. Default false.
      */
     readonly showHeaderButton: _angular_core.InputSignal<boolean>;
+    /**
+     * Estado presionado/abierto del Compact Button del header: fondo strong-950
+     * e icono blanco mientras el switcher esté desplegado (el consumer lo
+     * bindea al open de su dropdown). Default false.
+     */
+    readonly headerButtonActive: _angular_core.InputSignal<boolean>;
     /**
      * Search encima de las secciones:
      *  - `false` / `null` (default): sin search
@@ -9347,7 +9353,7 @@ declare class SuiSidebar {
     protected onSearchInput(value: string): void;
     protected onSearchSubmit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiSidebar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiSidebar, "sui-sidebar", never, { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "indicatorColor": { "alias": "indicatorColor"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "showHeaderButton": { "alias": "showHeaderButton"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "searchValue": { "alias": "searchValue"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "secondaryItems": { "alias": "secondaryItems"; "required": false; "isSignal": true; }; "supportingItems": { "alias": "supportingItems"; "required": false; "isSignal": true; }; "supportingAnchorBottom": { "alias": "supportingAnchorBottom"; "required": false; "isSignal": true; }; "itemsLabel": { "alias": "itemsLabel"; "required": false; "isSignal": true; }; "secondaryItemsLabel": { "alias": "secondaryItemsLabel"; "required": false; "isSignal": true; }; "supportingItemsLabel": { "alias": "supportingItemsLabel"; "required": false; "isSignal": true; }; "activeRoute": { "alias": "activeRoute"; "required": false; "isSignal": true; }; "profile": { "alias": "profile"; "required": false; "isSignal": true; }; "profileDropdown": { "alias": "profileDropdown"; "required": false; "isSignal": true; }; "mobileOpen": { "alias": "mobileOpen"; "required": false; "isSignal": true; }; "closeOnItemClick": { "alias": "closeOnItemClick"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "mobileMode": { "alias": "mobileMode"; "required": false; "isSignal": true; }; }, { "searchValue": "searchValueChange"; "mobileOpen": "mobileOpenChange"; "itemClicked": "itemClicked"; "logoutClicked": "logoutClicked"; "backdropClicked": "backdropClicked"; "headerButtonClicked": "headerButtonClicked"; "profileClicked": "profileClicked"; "searchSubmitted": "searchSubmitted"; }, never, ["[feature-card]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiSidebar, "sui-sidebar", never, { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "indicatorColor": { "alias": "indicatorColor"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "showHeaderButton": { "alias": "showHeaderButton"; "required": false; "isSignal": true; }; "headerButtonActive": { "alias": "headerButtonActive"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "searchValue": { "alias": "searchValue"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "secondaryItems": { "alias": "secondaryItems"; "required": false; "isSignal": true; }; "supportingItems": { "alias": "supportingItems"; "required": false; "isSignal": true; }; "supportingAnchorBottom": { "alias": "supportingAnchorBottom"; "required": false; "isSignal": true; }; "itemsLabel": { "alias": "itemsLabel"; "required": false; "isSignal": true; }; "secondaryItemsLabel": { "alias": "secondaryItemsLabel"; "required": false; "isSignal": true; }; "supportingItemsLabel": { "alias": "supportingItemsLabel"; "required": false; "isSignal": true; }; "activeRoute": { "alias": "activeRoute"; "required": false; "isSignal": true; }; "profile": { "alias": "profile"; "required": false; "isSignal": true; }; "profileDropdown": { "alias": "profileDropdown"; "required": false; "isSignal": true; }; "mobileOpen": { "alias": "mobileOpen"; "required": false; "isSignal": true; }; "closeOnItemClick": { "alias": "closeOnItemClick"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "mobileMode": { "alias": "mobileMode"; "required": false; "isSignal": true; }; }, { "searchValue": "searchValueChange"; "mobileOpen": "mobileOpenChange"; "itemClicked": "itemClicked"; "logoutClicked": "logoutClicked"; "backdropClicked": "backdropClicked"; "headerButtonClicked": "headerButtonClicked"; "profileClicked": "profileClicked"; "searchSubmitted": "searchSubmitted"; }, never, ["[header-panel]", "[feature-card]"], true, never>;
 }
 
 /**
@@ -10106,7 +10112,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<"pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "label" | "warning" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "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<"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>;
     /**
      * 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
@@ -11512,7 +11518,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<"medium" | "small">;
+    readonly size: _angular_core.InputSignal<"small" | "medium">;
     /** 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. */