@ajuarezso/sui-design-system 0.2.0 → 0.2.2

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@ajuarezso/sui-design-system",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "SUI Design System — librería de componentes Angular (SUI 2.0).",
   "license": "UNLICENSED",
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "@angular/common": "^21.2.0",
-    "@angular/core": "^21.2.0",
-    "@angular/forms": "^21.2.0",
-    "@angular/router": "^21.2.0",
-    "@angular/cdk": "^21.2.0",
-    "@angular/platform-browser": "^21.2.0",
+    "@angular/common": "^21.2.0 || ^22.0.0",
+    "@angular/core": "^21.2.0 || ^22.0.0",
+    "@angular/forms": "^21.2.0 || ^22.0.0",
+    "@angular/router": "^21.2.0 || ^22.0.0",
+    "@angular/cdk": "^21.2.0 || ^22.0.0",
+    "@angular/platform-browser": "^21.2.0 || ^22.0.0",
     "rxjs": "^7.8.0",
     "@capacitor/core": ">=6.0.0",
     "@capacitor/keyboard": ">=6.0.0"

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`;
@@ -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. */
@@ -4353,7 +4353,7 @@ declare class SuiDropdownPanel {
  *     placeholder text "Search..." color text-soft-400
  *
  *   Active (con valor escrito):
- *     search icon: text-soft-400 (no cambia)
+ *     search icon: icon-sub-600 (oscurece vs el soft-400 de Default)
  *     text input: color text-strong-950 (el valor escrito en negro)
  *     close icon 20×20 trailing para clear (text-soft-400)
  *
@@ -4446,7 +4446,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,7 +4927,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>;
@@ -5155,7 +5155,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>;
@@ -6979,7 +6979,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" | "file" | "basic" | "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). */
@@ -7650,7 +7650,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
@@ -8585,7 +8585,19 @@ declare class SuiSocialButton {
     /** Disabled efectivo: el input disabled O el estado loading. */
     readonly isDisabled: _angular_core.Signal<boolean>;
     readonly isAnchor: _angular_core.Signal<boolean>;
-    /** Logo style derivado del button style. */
+    /** Marcas con logo MONOCROMÁTICO OSCURO: su `original` es negro/gris horneado en
+     *  el SVG (no responde a currentColor por ser <img>), así que en stroke + dark
+     *  quedaría casi invisible sobre el bg oscuro → se usa el logo `white`. Las marcas
+     *  multicolor (google/facebook/linkedin/dropbox) se ven bien y quedan `original`. */
+    private static readonly MONO_DARK_BRANDS;
+    /** Dark mode reactivo — leído del `data-theme` del root (mecanismo del DS).
+     *  Necesario porque el logo es un asset distinto por tema (no un color CSS). */
+    private readonly isDark;
+    private readDark;
+    constructor();
+    /** Logo style derivado del button style + tema. filled → siempre blanco; stroke →
+     *  `original`, salvo dark + marca monocromática oscura, donde usa `white` para no
+     *  perder el logo sobre la superficie oscura (ver MONO_DARK_BRANDS). */
     readonly logoStyle: _angular_core.Signal<"white" | "original">;
     /** Color de fondo brand-specific (solo aplica si style=filled). */
     readonly filledBg: _angular_core.Signal<string | null>;
@@ -8981,7 +8993,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
@@ -9006,6 +9018,8 @@ declare class SuiSwitchCard implements ControlValueAccessor {
     readonly isDisabled: _angular_core.Signal<boolean>;
     /** True si type requiere render del slot leading. */
     readonly hasLeading: _angular_core.Signal<boolean>;
+    /** Box del leading según type — usado por el wrapper único del slot proyectado. */
+    readonly leadingBoxClass: _angular_core.Signal<"" | "sui-switch-card__leading-icon" | "sui-switch-card__leading-card-provider" | "sui-switch-card__leading-brand" | "sui-switch-card__leading-company">;
     /** Iniciales para fallback de sui-avatar cuando la imagen no carga. */
     readonly initialsFromLabel: _angular_core.Signal<string>;
     private _onChange;
@@ -9022,7 +9036,7 @@ declare class SuiSwitchCard implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiSwitchCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiSwitchCard, "sui-switch-card", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "emoji": { "alias": "emoji"; "required": false; "isSignal": true; }; "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeLabel": { "alias": "badgeLabel"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; }, never, ["[sui-switch-card-leading]", "[sui-switch-card-leading]", "[sui-switch-card-leading]", "[sui-switch-card-leading]", "[sui-switch-card-leading]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiSwitchCard, "sui-switch-card", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "emoji": { "alias": "emoji"; "required": false; "isSignal": true; }; "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeLabel": { "alias": "badgeLabel"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; }, never, ["[sui-switch-card-leading]"], true, never>;
 }
 
 /**
@@ -10292,7 +10306,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. */