@ajuarezso/sui-design-system 0.5.4 → 0.6.0

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

@@ -23,6 +23,93 @@ interface SuiTabBar {
 }
 declare const SUI_TAB_BAR: InjectionToken<SuiTabBar>;
 
+type SuiBadgeColor = 'gray' | 'blue' | 'orange' | 'red' | 'green' | 'yellow' | 'purple' | 'sky' | 'pink' | 'teal';
+type SuiBadgeVariant = 'filled' | 'light' | 'lighter' | 'stroke' | 'dark';
+type SuiBadgeSize = 'small' | 'medium';
+type SuiBadgeType = 'basic' | 'with-dot' | 'left-icon' | 'right-icon' | 'number';
+/**
+ * Config de badge embebido en otros componentes (checkbox-label, switch-label,
+ * integration-switch, checkbox-card, radio-card, switch-card). Un solo input
+ * `[badge]` reemplaza al par booleano + badgeLabel; acepta string shorthand
+ * (`badge="NEW"`) para el caso común. Los componentes que renderizan un
+ * <sui-badge> real honran color/variant/size (defaults orange/light/small);
+ * las cards usan su render Figma-exacto y toman solo `label`.
+ */
+interface SuiBadgeConfig {
+    label: string;
+    color?: SuiBadgeColor;
+    variant?: SuiBadgeVariant;
+    size?: SuiBadgeSize;
+}
+/**
+ * SUI Badge — SUI Design System 2.0
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Variants pulled for verification:
+ *  - 118:2584 Basic/Filled/Small/Gray
+ *  - 118:2587 Basic/Light/Small/Gray
+ *  - 118:2590 Basic/Lighter/Small/Gray
+ *  - 118:2616 With Dot/Filled/Small/Gray
+ *  - 118:2322 Left Icon/Light/Small/Gray
+ *  - 289:7551 Right Icon/Stroke/Small/Gray
+ *  - 118:2686 Basic/Filled/Small/Gray/Number=On
+ *  - 119:2361 Basic/Filled/Medium/Gray
+ *
+ * EXACT (pulled):
+ *  - Small: padding py=2px, font Subheading/2X Small 11/12/0.22px UPPERCASE, ss11 features
+ *  - Medium basic: padding px=8 py=2 (119:2361), font Label/X Small 12/16/0 NO uppercase, ss11
+ *  - Radius: 999 (full)
+ *  - Per-type padding Small: Basic=px8 / LeftIcon=pl4 pr8 / RightIcon=pl8 pr4 /
+ *    WithDot=pr8 ONLY (no left, no py) / Number=p2 (near-square, text w12)
+ *  - WithDot box: dot vive en CONTAINER 16×16 (full-height del badge small),
+ *    círculo r=2 → DIÁMETRO 4px centrado (asset SVG 118:2632). El dot del Badge
+ *    regular (4px) es DISTINTO del dot del sui-status-badge (6px, r=3) — assets
+ *    separados en el DS, NO unificar.
+ *  - WithDot Medium (119:2369): padding pl2 pr8 py2, dot box SIGUE 16×16 (NO 20).
+ *  - Style colors: Filled=bg-base+text-white, Light=bg-light+text-dark,
+ *    Lighter=bg-lighter+text-BASE (NOT dark!), Stroke=border1-base+text-base
+ *
+ * INFERRED (declared approximations):
+ *  - Medium Left/Right Icon padding: same asymmetric pattern as Small (4/8 vs 8/4)
+ *  - Medium Number: p=2 (proportional to Small)
+ *  - Medium icon size: 16x16 (scaled from Small's 12x12)
+ *
+ * PENDING VERIFY (inferido, sin confirmar pixel-exacto en Figma):
+ *  - Medium Left Icon / Right Icon: el padding asimétrico (pl4/pr8, pl8/pr4) se
+ *    asumió igual al Small. No se pulló la variante Medium+LeftIcon/RightIcon
+ *    específica del archivo — el frame 118:2324 es too-large para pull directo.
+ *  - Medium icon slot size 16×16: escalado del Small (12×12) sin confirmar contra
+ *    una variante Medium con icono real.
+ *  - Number type: el width del label (12px small / 16px medium) y el padding p2
+ *    se infirieron de la variante Small Number=On (118:2686); no se confirmó si
+ *    un número de 2 dígitos ('99') reflowea el width o se mantiene fijo.
+ *  - Disabled: Figma demuestra Disabled=On solo en color Gray (representativo).
+ *    El override universal a tokens disabled (todos los colores) es extrapolación
+ *    intencional — más completa que la demo, asumida consistente con SUI 2.0.
+ *
+ * CUSTOM (not in Figma 118:2324 — add-on local del proyecto):
+ *  - `variant='dark'` — glass translúcido vibrante pensado para superficies
+ *    oscuras. El color tiñe el bg (22% alpha) y borde (45% alpha) del
+ *    state-base, texto blanco para contraste. Se mantiene porque está en
+ *    uso en pantallas con backgrounds oscuros (master-preview, etc.).
+ *    Sin `[color]`, cae al fallback white-glass neutral.
+ *
+ *  - `disabled` state: implementado con override de bg/border/text a tokens
+ *    disabled-300 y faded-light/lighter (matchea visual figma), NO con
+ *    `opacity` (que produciría tintes desaturados en lugar de gris uniforme).
+ */
+declare class SuiBadge {
+    readonly color: _angular_core.InputSignal<SuiBadgeColor>;
+    readonly variant: _angular_core.InputSignal<SuiBadgeVariant>;
+    readonly size: _angular_core.InputSignal<SuiBadgeSize>;
+    readonly type: _angular_core.InputSignal<SuiBadgeType>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Internal: true when the badge renders its built-in dot (type=with-dot). */
+    readonly showsDot: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiBadge, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiBadge, "sui-badge", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["[data-slot=start]", "*", "[data-slot=end]"], true, never>;
+}
+
 type SuiAccordionFlipIcon = 'off' | 'on';
 /**
  * SUI Accordion — SUI Design System 2.0
@@ -123,9 +210,11 @@ type SuiAccordionFlipIcon = 'off' | 'on';
  *     el contenido proyectado se monta solo cuando se abre la primera vez,
  *     y permanece en el DOM (no se desmuenta al cerrar) para conservar
  *     state interno y evitar re-medir.
- *   - `leftIcon` (boolean) gates si se muestra el slot izquierdo cuando
- *     `flipIcon=off`. Cuando `flipIcon=on`, el slot izquierdo nunca aparece
- *     (el toggle ocupa esa posición — coincide con Figma 210:4105/4111/4117).
+ *   - `leftIcon` (string | boolean) controla el slot izquierdo cuando
+ *     `flipIcon=off`: true = icono default 'question-line', string = nombre
+ *     custom (Remix), false = sin icono. Cuando `flipIcon=on`, el slot
+ *     izquierdo nunca aparece (el toggle ocupa esa posición — coincide con
+ *     Figma 210:4105/4111/4117).
  *
  * iOS WKWebView :active fix: el host es interactive (botón), aplicamos los
  * listeners touchstart/touchend para liberar :active inmediatamente.
@@ -185,24 +274,29 @@ declare class SuiAccordion {
      */
     readonly flipIcon: _angular_core.InputSignal<SuiAccordionFlipIcon>;
     /**
-     * Si false, oculta el icono izquierdo (solo aplica con flipIcon=off).
-     * Por default `true`; el icono por default es `question-line`.
-     */
-    readonly leftIcon: _angular_core.InputSignal<boolean>;
-    /**
-     * Nombre del icono izquierdo (Remix Icon, sin prefijo `ri-`).
-     * Solo se renderiza si `flipIcon=off` y `leftIcon=true`.
-     * Default: 'question-line'.
+     * Icono izquierdo (solo aplica con `flipIcon=off`):
+     * - `true` (default) → icono default `question-line`
+     * - string           → nombre custom del Remix Icon (sin prefijo `ri-`)
+     * - `false`          → sin icono
      */
-    readonly leftIconName: _angular_core.InputSignal<string>;
+    readonly leftIcon: _angular_core.InputSignal<string | boolean>;
+    /** Nombre resuelto del icono izquierdo; `null` = no renderizar el slot. */
+    protected readonly leftIconName: _angular_core.Signal<string | null>;
     /**
-     * Badge opcional en el header (ej. "New" / "Old" / "Updated"). Vacío = sin badge.
-     * Usado en el catálogo (master-preview) para marcar el estado de homologación
-     * de cada componente. Aditivo: sin valor, el header se renderiza igual que antes.
+     * Badge opcional en el header — string shorthand (`badge="New"`) o
+     * `SuiBadgeConfig` ({ label, color?, variant?, size? }, tipado sui-badge).
+     * `null` = sin badge. Render con `<sui-badge>` real.
+     *
+     * Defaults cuando el config no trae color/variant/size: color `green` +
+     * variant `lighter` + size `small` — equivalente visual del viejo enum
+     * `badgeColor='new'` (texto success-base sobre bg success-lighter = variant
+     * `lighter` de sui-badge). Mapeo del enum eliminado → el consumer lo pasa
+     * ahora via config: new→`color: 'green'` · upd→`color: 'blue'` ·
+     * old→`color: 'gray'`.
      */
-    readonly badge: _angular_core.InputSignal<string>;
-    /** Variante de color del badge del header: new (verde) | upd (azul) | old (gris). */
-    readonly badgeColor: _angular_core.InputSignal<"new" | "old" | "upd">;
+    readonly badge: _angular_core.InputSignal<string | SuiBadgeConfig | null>;
+    /** Config resuelta del badge (string → { label }; null → null). */
+    protected readonly badgeCfg: _angular_core.Signal<SuiBadgeConfig | null>;
     /** Estado del data-attribute (default | active) — usa _resolvedOpen para
      *  consistencia visual con el data-state del body (que también usa
      *  _resolvedOpen). El icono y el bg cambian junto con la animation. */
@@ -270,7 +364,7 @@ declare class SuiAccordion {
     private readonly syncOpen;
     toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiAccordion, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiAccordion, "sui-accordion", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "flipIcon": { "alias": "flipIcon"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "leftIconName": { "alias": "leftIconName"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[sui-accordion-body]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiAccordion, "sui-accordion", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "flipIcon": { "alias": "flipIcon"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[sui-accordion-body]", "*"], true, never>;
 }
 
 /**
@@ -280,6 +374,17 @@ declare class SuiAccordion {
  */
 type SuiAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
 type SuiAvatarColor = 'slate' | 'gray' | 'blue' | 'orange' | 'red' | 'green' | 'yellow' | 'purple' | 'sky' | 'pink' | 'teal';
+/**
+ * Config del avatar que exponen los componentes con <sui-avatar> interno
+ * (command-menu-item, content-card, notification…). Mismo espíritu que
+ * SuiBadgeConfig/SuiLinkConfig: un objeto en vez de N props sueltos.
+ * String shorthand = src directo.
+ */
+interface SuiAvatarConfig {
+    src?: string | null;
+    initials?: string;
+    color?: SuiAvatarColor;
+}
 /**
  * BottomStatus types (Figma 245:18721): indicador bottom-right.
  * Online/offline/away/busy renderizan como dot; `company` renderiza el
@@ -904,7 +1009,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`;
@@ -1064,93 +1169,6 @@ declare class SuiAvatarGroup {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiAvatarGroup, "sui-avatar-group", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type SuiBadgeColor = 'gray' | 'blue' | 'orange' | 'red' | 'green' | 'yellow' | 'purple' | 'sky' | 'pink' | 'teal';
-type SuiBadgeVariant = 'filled' | 'light' | 'lighter' | 'stroke' | 'dark';
-type SuiBadgeSize = 'small' | 'medium';
-type SuiBadgeType = 'basic' | 'with-dot' | 'left-icon' | 'right-icon' | 'number';
-/**
- * Config de badge embebido en otros componentes (checkbox-label, switch-label,
- * integration-switch, checkbox-card, radio-card, switch-card). Un solo input
- * `[badge]` reemplaza al par booleano + badgeLabel; acepta string shorthand
- * (`badge="NEW"`) para el caso común. Los componentes que renderizan un
- * <sui-badge> real honran color/variant/size (defaults orange/light/small);
- * las cards usan su render Figma-exacto y toman solo `label`.
- */
-interface SuiBadgeConfig {
-    label: string;
-    color?: SuiBadgeColor;
-    variant?: SuiBadgeVariant;
-    size?: SuiBadgeSize;
-}
-/**
- * SUI Badge — SUI Design System 2.0
- *
- * Figma file: 8p1k72aKKvzJV4XcvPS4VO
- * Variants pulled for verification:
- *  - 118:2584 Basic/Filled/Small/Gray
- *  - 118:2587 Basic/Light/Small/Gray
- *  - 118:2590 Basic/Lighter/Small/Gray
- *  - 118:2616 With Dot/Filled/Small/Gray
- *  - 118:2322 Left Icon/Light/Small/Gray
- *  - 289:7551 Right Icon/Stroke/Small/Gray
- *  - 118:2686 Basic/Filled/Small/Gray/Number=On
- *  - 119:2361 Basic/Filled/Medium/Gray
- *
- * EXACT (pulled):
- *  - Small: padding py=2px, font Subheading/2X Small 11/12/0.22px UPPERCASE, ss11 features
- *  - Medium basic: padding px=8 py=2 (119:2361), font Label/X Small 12/16/0 NO uppercase, ss11
- *  - Radius: 999 (full)
- *  - Per-type padding Small: Basic=px8 / LeftIcon=pl4 pr8 / RightIcon=pl8 pr4 /
- *    WithDot=pr8 ONLY (no left, no py) / Number=p2 (near-square, text w12)
- *  - WithDot box: dot vive en CONTAINER 16×16 (full-height del badge small),
- *    círculo r=2 → DIÁMETRO 4px centrado (asset SVG 118:2632). El dot del Badge
- *    regular (4px) es DISTINTO del dot del sui-status-badge (6px, r=3) — assets
- *    separados en el DS, NO unificar.
- *  - WithDot Medium (119:2369): padding pl2 pr8 py2, dot box SIGUE 16×16 (NO 20).
- *  - Style colors: Filled=bg-base+text-white, Light=bg-light+text-dark,
- *    Lighter=bg-lighter+text-BASE (NOT dark!), Stroke=border1-base+text-base
- *
- * INFERRED (declared approximations):
- *  - Medium Left/Right Icon padding: same asymmetric pattern as Small (4/8 vs 8/4)
- *  - Medium Number: p=2 (proportional to Small)
- *  - Medium icon size: 16x16 (scaled from Small's 12x12)
- *
- * PENDING VERIFY (inferido, sin confirmar pixel-exacto en Figma):
- *  - Medium Left Icon / Right Icon: el padding asimétrico (pl4/pr8, pl8/pr4) se
- *    asumió igual al Small. No se pulló la variante Medium+LeftIcon/RightIcon
- *    específica del archivo — el frame 118:2324 es too-large para pull directo.
- *  - Medium icon slot size 16×16: escalado del Small (12×12) sin confirmar contra
- *    una variante Medium con icono real.
- *  - Number type: el width del label (12px small / 16px medium) y el padding p2
- *    se infirieron de la variante Small Number=On (118:2686); no se confirmó si
- *    un número de 2 dígitos ('99') reflowea el width o se mantiene fijo.
- *  - Disabled: Figma demuestra Disabled=On solo en color Gray (representativo).
- *    El override universal a tokens disabled (todos los colores) es extrapolación
- *    intencional — más completa que la demo, asumida consistente con SUI 2.0.
- *
- * CUSTOM (not in Figma 118:2324 — add-on local del proyecto):
- *  - `variant='dark'` — glass translúcido vibrante pensado para superficies
- *    oscuras. El color tiñe el bg (22% alpha) y borde (45% alpha) del
- *    state-base, texto blanco para contraste. Se mantiene porque está en
- *    uso en pantallas con backgrounds oscuros (master-preview, etc.).
- *    Sin `[color]`, cae al fallback white-glass neutral.
- *
- *  - `disabled` state: implementado con override de bg/border/text a tokens
- *    disabled-300 y faded-light/lighter (matchea visual figma), NO con
- *    `opacity` (que produciría tintes desaturados en lugar de gris uniforme).
- */
-declare class SuiBadge {
-    readonly color: _angular_core.InputSignal<SuiBadgeColor>;
-    readonly variant: _angular_core.InputSignal<SuiBadgeVariant>;
-    readonly size: _angular_core.InputSignal<SuiBadgeSize>;
-    readonly type: _angular_core.InputSignal<SuiBadgeType>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    /** Internal: true when the badge renders its built-in dot (type=with-dot). */
-    readonly showsDot: _angular_core.Signal<boolean>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiBadge, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiBadge, "sui-badge", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["[data-slot=start]", "*", "[data-slot=end]"], true, never>;
-}
-
 type SuiBannerVariant = 'info' | 'success' | 'warning' | 'error' | 'feature';
 type SuiBannerStyle = 'filled' | 'light' | 'lighter' | 'stroke';
 /**
@@ -1629,6 +1647,15 @@ declare class SuiButtonGroup {
 type SuiButtonColor = 'primary' | 'neutral' | 'error';
 type SuiButtonVariant = 'filled' | 'stroke' | 'lighter' | 'ghost';
 type SuiButtonSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+/**
+ * Config de los botones internos de footers (drawer-footer, filter-panel-footer):
+ * { label, disabled? } con string shorthand = solo label. Interfaz COMPARTIDA
+ * para que ambos footers expongan el mismo contrato.
+ */
+interface SuiFooterButtonConfig {
+    label: string;
+    disabled?: boolean;
+}
 /**
  * SUI Button — SUI Design System 2.0
  *
@@ -1913,7 +1940,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<"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>;
+    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. */
@@ -1948,6 +1975,101 @@ declare class SuiCheckboxCard implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiCheckboxCard, "sui-checkbox-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; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "emoji": { "alias": "emoji"; "required": false; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "checkedChange2": "checkedChange2"; }, never, ["[slot=leading]"], true, never>;
 }
 
+type SuiLinkButtonVariant = 'gray' | 'black' | 'primary' | 'error' | 'modifiable';
+/**
+ * Config del "link" que exponen los componentes con Link Button integrado
+ * (checkbox-label, switch-label, drawer-header/footer, progress-bar-label).
+ * String shorthand = solo label (renderiza <button> + output linkClick);
+ * con `href` el link es un <a> real. `rel` default 'noopener noreferrer'
+ * cuando target='_blank' (mismo patrón objeto que SuiBadgeConfig).
+ */
+interface SuiLinkConfig {
+    label: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+}
+type SuiLinkButtonSize = 'medium' | 'small';
+/**
+ * SUI Link Button — SUI Design System 2.0
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Frame: 168:4889 ("Link Buttons [1.1]") — 80 variants total
+ *
+ * EXACT (pulled from Figma + verified against sui-tokens.scss):
+ *   Anatomy
+ *     Container          flex / inline-flex, gap=4px, items=center
+ *     Medium size        text 14/20/-0.6%, icons 20×20
+ *     Small  size        text 12/16/0,     icons 16×16
+ *     Font features      'ss11' 1, 'calt' 0, 'liga' 0
+ *     Underline          (hover / focus / underline=on): línea continua SOLO
+ *                        bajo el texto (los iconos chevron NO van subrayados —
+ *                        Figma 169:1391/169:1419: la clase `underline` vive solo
+ *                        en el <p>). Implementado vía ::after en
+ *                        .sui-link-button__text (NO `text-decoration` sobre el
+ *                        flex, que se fragmentaba en 3 trazos icon|text|icon).
+ *   Variant × State color matrix
+ *     Gray   Default → text/sub-600    | Hover → sub-600 + underline | Focus → strong-950 + underline | Disabled → disabled-300
+ *     Black  Default → text/strong-950 | Hover → strong-950 + underline
+ *     Primary Default → primary-base   | Hover → primary-dark + underline
+ *     Error  Default → state/error/base | Hover → red/700 + underline
+ *     Modifiable      → currentColor (consumer-controlled)
+ *
+ * Token map (Figma → sui-tokens.scss):
+ *     text/sub-600     #5c5c5c → --sui-text-sub-600
+ *     text/strong-950  #171717 → --sui-text-strong-950
+ *     text/disabled-300 #d1d1d1 → --sui-text-disabled-300
+ *     primary-base     #335cff → --sui-primary-base   (project remaps to orange #fa7319)
+ *     primary-dark     #2547d0 → --sui-primary-dark   (project remaps to dark orange #e16614)
+ *     state/error/base #fb3748 → --sui-state-error-base
+ *     red/700          #d02533 → --sui-red-700
+ *     icon/*           same as text/* per token level
+ *
+ * FOCUS states PULLED from Figma (2026-05-29) — el Focus mantiene el color
+ * BASE + underline; solo el Hover oscurece. Nodos verificados:
+ *   Gray   focus 169:1034 → strong-950 + underline
+ *   Black  focus 169:1090 → strong-950 + underline
+ *   Primary focus 169:1138 → primary-base (NO dark) + underline
+ *   Error  focus 169:1187 → error-base (NO red-700) + underline
+ *   (Hover: Primary 169:1134 → primary-dark; Error 169:1183 → red-700)
+ *
+ * PENDING VERIFY (inferred, NOT pulled):
+ *   - Modifiable Focus / Hover / Disabled: currentColor para hover/focus; disabled assumed --sui-text-disabled-300
+ *   - Underline=On styling para todos: misma decoration spec que Gray (decoration solid, thickness/position from-font, skip-ink none)
+ *   - Active state: no es variante Figma; tactile-press scale(0.97) por convención project
+ *   - Figma usa font-feature 'cv09' 1 además de 'ss11' 1 'calt' 0 'liga' 0; SUI omite cv09 (alterna del 9) — diferencia tipográfica menor, no afecta layout
+ *
+ * Usage:
+ *   <sui-link-button variant="primary" leftIcon="arrow-left-s-line">Volver</sui-link-button>
+ *   <sui-link-button variant="error" [underline]="true" (click)="onDelete()">Eliminar</sui-link-button>
+ *   <sui-link-button variant="primary" href="https://docs.example" target="_blank">Ver documentación</sui-link-button>
+ *
+ * Floating vs inline: el componente es `display: inline-flex` con baseline align,
+ * por lo que fluye dentro de un párrafo como un link normal. Para uso "flotante"
+ * (toast actions, notification CTA), el consumer lo posiciona libremente — el
+ * componente no impone position/z-index propios.
+ */
+declare class SuiLinkButton {
+    readonly variant: _angular_core.InputSignal<SuiLinkButtonVariant>;
+    readonly size: _angular_core.InputSignal<SuiLinkButtonSize>;
+    readonly underline: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly leftIcon: _angular_core.InputSignal<string | null>;
+    readonly rightIcon: _angular_core.InputSignal<string | null>;
+    /** Cuando se setea, el componente renderiza un <a> nativo en vez de <button>. */
+    readonly href: _angular_core.InputSignal<string | null>;
+    readonly target: _angular_core.InputSignal<string | null>;
+    readonly rel: _angular_core.InputSignal<string | null>;
+    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    readonly iconSize: _angular_core.Signal<number>;
+    readonly isAnchor: _angular_core.Signal<boolean>;
+    onClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiLinkButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiLinkButton, "sui-link-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "underline": { "alias": "underline"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+}
+
 /**
  * SUI Checkbox Label — SUI Design System 2.0
  *
@@ -2025,7 +2147,13 @@ declare class SuiCheckboxLabel implements ControlValueAccessor {
     protected readonly badgeCfg: _angular_core.Signal<SuiBadgeConfig | null>;
     /** Texto del Link Button opcional debajo de la description. Solo se renderiza
         cuando description tiene valor. */
-    readonly linkLabel: _angular_core.InputSignal<string | null>;
+    /** Link Button bajo la descripción — string shorthand (solo label, emite
+     *  `linkClick`) o SuiLinkConfig { label, href?, target?, rel? }: con href
+     *  renderiza <a> real; rel automático 'noopener noreferrer' para _blank.
+     *  (Mismo patrón objeto que `badge`/SuiBadgeConfig.) */
+    readonly link: _angular_core.InputSignal<string | SuiLinkConfig | null>;
+    /** Config resuelta del link (string → { label }, rel automático). */
+    protected readonly linkCfg: _angular_core.Signal<SuiLinkConfig | null>;
     /** Si true, invierte orden: [content] [checkbox] (label a la izquierda). */
     readonly flip: _angular_core.InputSignal<boolean>;
     /** Deshabilita el checkbox + wrapper. */
@@ -2052,7 +2180,7 @@ declare class SuiCheckboxLabel implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiCheckboxLabel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiCheckboxLabel, "sui-checkbox-label", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "linkLabel": { "alias": "linkLabel"; "required": false; "isSignal": true; }; "flip": { "alias": "flip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "linkClick": "linkClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiCheckboxLabel, "sui-checkbox-label", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "flip": { "alias": "flip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "linkClick": "linkClick"; }, never, never, true, never>;
 }
 
 type SuiCircularProgressBarColor = 'blue' | 'green' | 'orange' | 'red' | 'purple';
@@ -2523,19 +2651,27 @@ declare class SuiColorPicker {
  *   - navigateLabel:  string ('Navigate' por default)
  *   - selectLabel:    string ('Select')
  *   - helpText:       string | null ('Not what you're looking for? Try the')
- *   - helpLinkLabel:  string ('Help Center')
- *   - helpHref:       string | null (si null, renderiza button)
+ *                     — copy previo al link; null oculta el bloque de ayuda completo
+ *   - helpLink:       SuiLinkConfig | string | null ('Help Center') — string
+ *                     shorthand = solo label (renderiza <button>, emite helpClicked);
+ *                     SuiLinkConfig { label, href?, target?, rel? } = <a> real con
+ *                     rel automático 'noopener noreferrer' si target='_blank'.
+ *                     (Patrón canon `link` de sui-checkbox-label.)
  *   - (helpClicked):  output cuando el link se clickea
  */
 declare class SuiCommandMenuFooter {
     readonly navigateLabel: _angular_core.InputSignal<string>;
     readonly selectLabel: _angular_core.InputSignal<string>;
     readonly helpText: _angular_core.InputSignal<string | null>;
-    readonly helpLinkLabel: _angular_core.InputSignal<string>;
-    readonly helpHref: _angular_core.InputSignal<string | null>;
+    /** Link de ayuda — string shorthand (solo label, emite `helpClicked`) o
+     *  SuiLinkConfig { label, href?, target?, rel? }: con href renderiza <a> real;
+     *  rel automático 'noopener noreferrer' para _blank. null = sin link. */
+    readonly helpLink: _angular_core.InputSignal<string | SuiLinkConfig | null>;
+    /** Config resuelta del link (string → { label }, rel automático). */
+    protected readonly helpLinkCfg: _angular_core.Signal<SuiLinkConfig | null>;
     readonly helpClicked: _angular_core.OutputEmitterRef<MouseEvent>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiCommandMenuFooter, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiCommandMenuFooter, "sui-command-menu-footer", never, { "navigateLabel": { "alias": "navigateLabel"; "required": false; "isSignal": true; }; "selectLabel": { "alias": "selectLabel"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpLinkLabel": { "alias": "helpLinkLabel"; "required": false; "isSignal": true; }; "helpHref": { "alias": "helpHref"; "required": false; "isSignal": true; }; }, { "helpClicked": "helpClicked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiCommandMenuFooter, "sui-command-menu-footer", never, { "navigateLabel": { "alias": "navigateLabel"; "required": false; "isSignal": true; }; "selectLabel": { "alias": "selectLabel"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpLink": { "alias": "helpLink"; "required": false; "isSignal": true; }; }, { "helpClicked": "helpClicked"; }, never, never, true, never>;
 }
 
 /**
@@ -2557,7 +2693,8 @@ declare class SuiCommandMenuFooter {
  *   - medium (64) → multi-line (title row + description)
  *
  * **Optional bits** (right-aligned, en este orden):
- *   - badge:    sui-badge (gray pill, ej. "Pro")
+ *   - badge:    sui-badge — string shorthand (pill gray/lighter, ej. "Pro") o
+ *               SuiBadgeConfig { label, color?, variant?, size? }
  *   - shortcut: sui-kbd con texto (ej. "⌘K")
  *   - button:   chevron arrow-right (Default) / lifted compact-button (Hover)
  *
@@ -2594,6 +2731,11 @@ declare class SuiCommandMenuFooter {
  *     description="Edita tu nombre, email, contraseña."
  *     shortcut="⌘K"
  *     [showButton]="true" />
+ *
+ *   <sui-command-menu-item type="avatar" size="medium"
+ *     [avatar]="{ initials: 'JB', color: 'purple' }"
+ *     title="James Brown"
+ *     [badge]="{ label: 'Pro', color: 'purple', variant: 'light' }" />
  */
 type SuiCommandMenuItemType = 'basic' | 'left-icon' | 'avatar' | 'brand' | 'company' | 'country';
 type SuiCommandMenuItemSize = 'small' | 'medium';
@@ -2607,14 +2749,18 @@ declare class SuiCommandMenuItem {
     readonly description: _angular_core.InputSignal<string | null>;
     /** Type=left-icon: nombre RemixIcon para el leading. */
     readonly icon: _angular_core.InputSignal<string | null>;
-    /** Type=avatar/company: src de la imagen (opcional, sino fallback initials). */
-    readonly avatarSrc: _angular_core.InputSignal<string | null>;
-    readonly avatarInitials: _angular_core.InputSignal<string>;
-    readonly avatarColor: _angular_core.InputSignal<SuiAvatarColor>;
+    /** Type=avatar/company: avatar — string shorthand (src de la imagen) o
+        SuiAvatarConfig { src?, initials?, color? } (tipado como sui-avatar).
+        null = sin datos (sui-avatar cae a su placeholder). */
+    readonly avatar: _angular_core.InputSignal<string | SuiAvatarConfig | null>;
+    protected readonly avatarCfg: _angular_core.Signal<SuiAvatarConfig | null>;
     /** Type=country: slug del país. */
     readonly flagName: _angular_core.InputSignal<"abkhazia" | "afghanistan" | "aland-islands" | "albania" | "algeria" | "american-samoa" | "andorra" | "angola" | "anguilla" | "antigua-and-barbuda" | "argentina" | "armenia" | "aruba" | "australia" | "austria" | "azerbaijan" | "azores-islands" | "bahamas" | "bahrain" | "balearic-islands" | "bangladesh" | "barbados" | "basque-country" | "belarus" | "belgium" | "belize" | "benin" | "bermuda" | "bhutan" | "bolivia" | "bonaire" | "bosnia-and-herzegovina" | "botswana" | "brazil" | "british-columbia" | "british-indian-ocean-territory" | "british-virgin-islands" | "brunei" | "bulgaria" | "burkina-faso" | "burundi" | "cambodia" | "cameroon" | "canada" | "canary-islands" | "cape-verde" | "cayman-islands" | "central-african-republic" | "ceuta" | "chad" | "chile" | "china" | "christmas-island" | "cocos-island" | "colombia" | "comoros" | "cook-islands" | "corsica" | "costa-rica" | "croatia" | "cuba" | "curacao" | "cyprus" | "czech-republic" | "democratic-republic-of-congo" | "denmark" | "djibouti" | "dominica" | "dominican-republic" | "east-timor" | "ecuador" | "egypt" | "el-salvador" | "england" | "equatorial-guinea" | "eritrea" | "estonia" | "ethiopia" | "european-union" | "falkland-islands" | "faroe-islands" | "fiji" | "finland" | "france" | "french-polynesia" | "gabon" | "galapagos-islands" | "gambia" | "georgia" | "germany" | "ghana" | "gibraltar" | "greece" | "greenland" | "grenada" | "guam" | "guatemala" | "guernsey" | "guinea-bissau" | "guinea" | "guyana" | "haiti" | "hawaii" | "honduras" | "hong-kong" | "hungary" | "iceland" | "india" | "indonesia" | "iran" | "iraq" | "ireland" | "isle-of-man" | "israel" | "italy" | "ivory-coast" | "jamaica" | "japan" | "jersey" | "jordan" | "kazakhstan" | "kenya" | "kiribati" | "kosovo" | "kuwait" | "kyrgyzstan" | "laos" | "latvia" | "lebanon" | "lesotho" | "liberia" | "libya" | "liechtenstein" | "lithuania" | "luxembourg" | "macao" | "madagascar" | "madeira" | "malawi" | "malaysia" | "maldives" | "mali" | "malta" | "marshall-island" | "martinique" | "mauritania" | "mauritus" | "melilla" | "mexico" | "micronesia" | "moldova" | "monaco" | "mongolia" | "montenegro" | "montserrat" | "morocco" | "mozambique" | "myanmar" | "namibia" | "nato" | "nauru" | "nepal" | "netherlands" | "new-zealand" | "nicaragua" | "niger" | "nigeria" | "niue" | "norfolk-island" | "north-korea" | "northern-cyprus" | "northern-marianas-islands" | "norway" | "oman" | "orkney-islands" | "ossetia" | "pakistan" | "palau" | "palestine" | "panama" | "papua-new-guinea" | "paraguay" | "peru" | "philippines" | "pitcairn-islands" | "poland" | "portugal" | "puerto-rico" | "qatar" | "rapa-nui" | "republic-of-macedonia" | "republic-of-the-congo" | "romania" | "russia" | "rwanda" | "saba-island" | "sahrawi-arab-democratic-republic" | "saint-kitts-and-nevis" | "samoa" | "san-marino" | "sao-tome-and-prince" | "sardinia" | "saudi-arabia" | "scotland" | "senegal" | "serbia" | "seychelles" | "sierra-leone" | "singapore" | "sint-eustatius" | "sint-maarten" | "slovakia" | "slovania" | "solomon-islands" | "somalia" | "somaliland" | "south-africa" | "south-korea" | "south-sudan" | "spain" | "sri-lanka" | "st-barts" | "st-lucia" | "st-vincent-and-the-grenadines" | "sudan" | "suriname" | "swaziland" | "sweden" | "switzerland" | "syria" | "taijikistan" | "taiwan" | "tanzania" | "thailand" | "tibet" | "togo" | "tokelau" | "tonga" | "transnistria" | "trinidad-and-tobago" | "tunisia" | "turkey" | "turkmenistan" | "turks-and-caicos" | "tuvalu" | "uganda" | "ukraine" | "united-arab-emirates" | "united-kingdom" | "united-nations" | "united-states" | "uruguay" | "uzbekistan" | "vanuatu" | "vatican-city" | "venezuela" | "vietnam" | "virgin-islands" | "wales" | "yemen" | "zambia" | "zimbabwe" | null>;
-    /** Right side: badge text (sui-badge gray). */
-    readonly badge: _angular_core.InputSignal<string | null>;
+    /** Right side: badge — string shorthand (pill gray/lighter, ej. "Pro") o
+        SuiBadgeConfig { label, color?, variant?, size? } (tipado como sui-badge).
+        null = sin badge. */
+    readonly badge: _angular_core.InputSignal<string | SuiBadgeConfig | null>;
+    protected readonly badgeCfg: _angular_core.Signal<SuiBadgeConfig | null>;
     /** Right side: shortcut text (sui-kbd, ej. "⌘K"). */
     readonly shortcut: _angular_core.InputSignal<string | null>;
     /** Right side: chevron button (arrow-right). */
@@ -2628,7 +2774,7 @@ declare class SuiCommandMenuItem {
     onClick(event: MouseEvent): void;
     onButtonClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiCommandMenuItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiCommandMenuItem, "sui-command-menu-item", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarColor": { "alias": "avatarColor"; "required": false; "isSignal": true; }; "flagName": { "alias": "flagName"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "shortcut": { "alias": "shortcut"; "required": false; "isSignal": true; }; "showButton": { "alias": "showButton"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; "buttonClicked": "buttonClicked"; }, never, ["[slot=brand]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiCommandMenuItem, "sui-command-menu-item", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "flagName": { "alias": "flagName"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "shortcut": { "alias": "shortcut"; "required": false; "isSignal": true; }; "showButton": { "alias": "showButton"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; "buttonClicked": "buttonClicked"; }, never, ["[slot=brand]"], true, never>;
 }
 
 /**
@@ -3092,19 +3238,21 @@ type SuiContentCardType = 'basic' | 'left-icon' | 'avatar' | 'card-provider' | '
  *   basic         → sin leading
  *   left-icon     → cuadro 40×40 radius-10 border stroke-soft-200 bg-white-0,
  *                   sui-icon `icon` 20px color icon-sub-600
- *   avatar        → sui-avatar size=md (40px) src/initials
+ *   avatar        → sui-avatar size=md (40px) via input `avatar` (config u src)
  *   card-provider → cuadro 40×28 (ratio tarjeta) radius-6 con brand logo centrado
  *   brand         → cuadro 40×40 radius-10 border + sui-brand-logo `brand`
  *   company       → sui-avatar size=md con companyLogoSrc / iniciales
  *
- * Badge (input `badge` + `badgeColor`): vive DENTRO del Title row (al lado del
- * título), usando <sui-badge size="small" [color]="badgeColor()" variant="lighter">.
+ * Badge (input `badge: SuiBadgeConfig | string | null`): vive DENTRO del Title row
+ * (al lado del título), usando <sui-badge>. String shorthand = solo el label con los
+ * defaults de la card (color 'orange', variant 'lighter', size 'small'); el objeto
+ * SuiBadgeConfig { label, color?, variant?, size? } controla el badge completo.
  * El DS de Figma especifica AZUL (state/information/light #c0d5ff → sui-badge
  * color="blue"). El proyecto Master Pedidos prefiere NARANJA por branding, así que
- * `badgeColor` default = 'orange', PERO es un input configurable: cualquier consumer
- * que necesite el color del DS u otro semántico pasa `[badgeColor]="'blue'"` sin
- * forkear el template. La tipografía del badge small es Subheading/2X Small 11/12
- * UPPERCASE tracking 0.22px (0.02em), provista por el propio sui-badge.
+ * el fallback de color = 'orange'; cualquier consumer que necesite el color del DS
+ * u otro semántico pasa `[badge]="{ label: 'X', color: 'blue' }"` sin forkear el
+ * template. La tipografía del badge small es Subheading/2X Small 11/12 UPPERCASE
+ * tracking 0.22px (0.02em), provista por el propio sui-badge.
  *
  * Token map (Figma → sui-tokens):
  *   bg/white-0          → --sui-bg-white-0          (#ffffff, card bg + leading bg)
@@ -3162,10 +3310,10 @@ type SuiContentCardType = 'basic' | 'left-icon' | 'avatar' | 'card-provider' | '
  *   <sui-content-card type="left-icon" icon="bank-card-line"
  *                     title="Visa **** 4242" subtitle="Expira 09/27"
  *                     badge="Principal" (dismiss)="onRemove()" />
- *   <sui-content-card type="avatar" [avatarSrc]="user.photo"
+ *   <sui-content-card type="avatar" [avatar]="{ src: user.photo, initials: 'AT' }"
  *                     title="Ana Torres" subtitle="ana@correo.com" />
- *   <sui-content-card type="brand" brand="stripe"
- *                     title="Stripe" subtitle="Conectado" badge="Activo" />
+ *   <sui-content-card type="brand" brand="stripe" title="Stripe" subtitle="Conectado"
+ *                     [badge]="{ label: 'Activo', color: 'green' }" />
  */
 declare class SuiContentCard {
     /** Tipo de leading visual. */
@@ -3174,20 +3322,18 @@ declare class SuiContentCard {
     readonly title: _angular_core.InputSignal<string>;
     /** Subtítulo — Paragraph/Small, text-sub-600. */
     readonly subtitle: _angular_core.InputSignal<string>;
-    /** Texto del badge inline (Title row). Vacío → no se renderiza el badge. */
-    readonly badge: _angular_core.InputSignal<string>;
-    /**
-     * Color del badge inline. Default 'orange' (branding Master Pedidos). El DS de
-     * Figma especifica 'blue' (state/information/light); pasar [badgeColor]="'blue'"
-     * para alinearse al DS, o cualquier otro SuiBadgeColor semántico.
-     */
-    readonly badgeColor: _angular_core.InputSignal<SuiBadgeColor>;
+    /** Badge inline (Title row) — string shorthand ('Principal') o SuiBadgeConfig
+        (label + color/variant/size, tipado como sui-badge). Fallbacks de la card:
+        color 'orange' (branding; el DS de Figma usa 'blue'), variant 'lighter',
+        size 'small'. null/'' = sin badge. */
+    readonly badge: _angular_core.InputSignal<string | SuiBadgeConfig | null>;
+    protected readonly badgeCfg: _angular_core.Signal<SuiBadgeConfig | null>;
     /** RemixIcon name (sin 'ri-') para type=left-icon. */
     readonly icon: _angular_core.InputSignal<string | null>;
-    /** Foto del avatar para type=avatar / company. */
-    readonly avatarSrc: _angular_core.InputSignal<string | null>;
-    /** Iniciales fallback del avatar (type=avatar / company). */
-    readonly avatarInitials: _angular_core.InputSignal<string>;
+    /** Avatar del leading (type=avatar / company) — string shorthand (src directo)
+        o SuiAvatarConfig { src?, initials?, color? }. null = sin avatar. */
+    readonly avatar: _angular_core.InputSignal<string | SuiAvatarConfig | null>;
+    protected readonly avatarCfg: _angular_core.Signal<SuiAvatarConfig | null>;
     /** 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. */
@@ -3207,7 +3353,7 @@ declare class SuiContentCard {
     readonly hasLeading: _angular_core.Signal<boolean>;
     onDismiss(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiContentCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiContentCard, "sui-content-card", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "companyLogoSrc": { "alias": "companyLogoSrc"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "dismissAriaLabel": { "alias": "dismissAriaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiContentCard, "sui-content-card", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "companyLogoSrc": { "alias": "companyLogoSrc"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "dismissAriaLabel": { "alias": "dismissAriaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, never, true, never>;
 }
 
 type SuiContentDividerType = 'line' | 'line-spacing' | 'text-line' | 'text' | 'solid-text' | 'icon-button' | 'icon-button-group' | 'text-button' | 'text-button-group';
@@ -3869,13 +4015,14 @@ type SuiDrawerFooterType = 'stretch' | 'basic' | 'checkbox' | 'toggle' | 'steppe
  *   radius-full       → --sui-radius-full (stepper dots)
  *
  * Decisiones de homologación (vs reporte Drawer):
- *   - primaryDisabled / secondaryDisabled: NO existen como variant en Figma,
- *     pero se PRESERVAN — necesarios para flujos con validación. extraFeature.
- *   - stepperCurrent / stepperTotal: Figma es decorativo (3 dots fijos); el SUI
- *     los hace dinámicos/multi-step real. Se PRESERVAN (mejora funcional).
- *   - type='link-button' con linkLabel vacío ('') ahora NO renderiza el link
+ *   - `disabled` de los botones: NO existe como variant en Figma, pero se
+ *     PRESERVA (via SuiFooterButtonConfig.disabled) — necesario para flujos
+ *     con validación. extraFeature.
+ *   - stepper { current, total }: Figma es decorativo (3 dots fijos); el SUI
+ *     lo hace dinámico/multi-step real. Se PRESERVA (mejora funcional).
+ *   - type='link-button' con link null o label vacío NO renderiza el link
  *     (antes renderizaba un sui-link-button vacío). Corrige openQuestion del
- *     reporte sin tocar API pública (mismo input/output/type).
+ *     reporte.
  *
  * Confirmado contra Figma live (2026-05-29):
  *   - Stepper Dot [1.1] (479:14399): gap inter-dot = 10px exacto, dots 8×8,
@@ -3887,8 +4034,8 @@ type SuiDrawerFooterType = 'stretch' | 'basic' | 'checkbox' | 'toggle' | 'steppe
  * Usage:
  *   <sui-drawer-footer
  *     type="stretch"
- *     primaryLabel="Continuar"
- *     secondaryLabel="Cancelar"
+ *     primaryButton="Continuar"
+ *     secondaryButton="Cancelar"
  *     (primaryClick)="save()"
  *     (secondaryClick)="cancel()"
  *   />
@@ -3897,28 +4044,31 @@ type SuiDrawerFooterType = 'stretch' | 'basic' | 'checkbox' | 'toggle' | 'steppe
  *     type="checkbox"
  *     checkboxLabel="No mostrar de nuevo"
  *     [(checkboxActive)]="dontShowAgain"
- *     primaryLabel="Continuar"
+ *     [primaryButton]="{ label: 'Continuar', disabled: !valido }"
  *     (primaryClick)="save()"
  *   />
  *
  *   <sui-drawer-footer
  *     type="stepper"
- *     [stepperCurrent]="2"
- *     [stepperTotal]="5"
- *     primaryLabel="Siguiente"
- *     secondaryLabel="Atrás"
+ *     [stepper]="{ current: 2, total: 5 }"
+ *     primaryButton="Siguiente"
+ *     secondaryButton="Atrás"
  *   />
  */
 declare class SuiDrawerFooter {
     readonly type: _angular_core.InputSignal<SuiDrawerFooterType>;
-    /** Label del botón primario (filled primary-base). */
-    readonly primaryLabel: _angular_core.InputSignal<string>;
-    /** Label del botón secundario (stroke neutral). null = ocultar. */
-    readonly secondaryLabel: _angular_core.InputSignal<string | null>;
-    /** Disabled state del botón primario. */
-    readonly primaryDisabled: _angular_core.InputSignal<boolean>;
-    /** Disabled state del botón secundario. */
-    readonly secondaryDisabled: _angular_core.InputSignal<boolean>;
+    /** Botón primario (filled primary-base) — string shorthand (solo label) o
+     *  SuiFooterButtonConfig { label, disabled? }. Interfaz compartida con
+     *  sui-filter-panel-footer. */
+    readonly primaryButton: _angular_core.InputSignal<string | SuiFooterButtonConfig>;
+    /** Botón secundario (stroke neutral) — string shorthand o
+     *  SuiFooterButtonConfig. null (o label vacío) = ocultar. */
+    readonly secondaryButton: _angular_core.InputSignal<string | SuiFooterButtonConfig | null>;
+    /** Config resuelta del botón primario (string → { label }). */
+    protected readonly primaryCfg: _angular_core.Signal<SuiFooterButtonConfig>;
+    /** Config resuelta del botón secundario (string → { label }; null/label vacío
+     *  = oculto — regla DS: config presente = visible). */
+    protected readonly secondaryCfg: _angular_core.Signal<SuiFooterButtonConfig | null>;
     /** Label del checkbox (type='checkbox'). */
     readonly checkboxLabel: _angular_core.InputSignal<string>;
     /** Two-way del checkbox state. */
@@ -3927,12 +4077,24 @@ declare class SuiDrawerFooter {
     readonly toggleLabel: _angular_core.InputSignal<string>;
     /** Two-way del switch state. */
     readonly toggleActive: _angular_core.ModelSignal<boolean>;
-    /** Stepper actual (0-indexed, type='stepper'). */
-    readonly stepperCurrent: _angular_core.InputSignal<number>;
-    /** Total de steps (type='stepper'). Default 3. */
-    readonly stepperTotal: _angular_core.InputSignal<number>;
-    /** Label del link button (type='link-button'). */
-    readonly linkLabel: _angular_core.InputSignal<string>;
+    /** Stepper (type='stepper') — { current (0-indexed), total }. null cae al
+     *  default Figma (3 dots, primero activo). */
+    readonly stepper: _angular_core.InputSignal<{
+        current: number;
+        total: number;
+    } | null>;
+    /** Config resuelta del stepper (null → default { current: 0, total: 3 }). */
+    protected readonly stepperCfg: _angular_core.Signal<{
+        current: number;
+        total: number;
+    }>;
+    /** Link button (type='link-button') — string shorthand (solo label, emite
+     *  `linkClick`) o SuiLinkConfig { label, href?, target?, rel? }: con href
+     *  renderiza <a> real; rel automático 'noopener noreferrer' para _blank.
+     *  null o label vacío no renderiza el link. */
+    readonly link: _angular_core.InputSignal<string | SuiLinkConfig | null>;
+    /** Config resuelta del link (string → { label }, rel automático). */
+    protected readonly linkCfg: _angular_core.Signal<SuiLinkConfig | null>;
     readonly primaryClick: _angular_core.OutputEmitterRef<Event>;
     readonly secondaryClick: _angular_core.OutputEmitterRef<Event>;
     readonly linkClick: _angular_core.OutputEmitterRef<MouseEvent>;
@@ -3942,7 +4104,7 @@ declare class SuiDrawerFooter {
     onSecondary(event: Event): void;
     onLink(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiDrawerFooter, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiDrawerFooter, "sui-drawer-footer", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "primaryLabel": { "alias": "primaryLabel"; "required": false; "isSignal": true; }; "secondaryLabel": { "alias": "secondaryLabel"; "required": false; "isSignal": true; }; "primaryDisabled": { "alias": "primaryDisabled"; "required": false; "isSignal": true; }; "secondaryDisabled": { "alias": "secondaryDisabled"; "required": false; "isSignal": true; }; "checkboxLabel": { "alias": "checkboxLabel"; "required": false; "isSignal": true; }; "checkboxActive": { "alias": "checkboxActive"; "required": false; "isSignal": true; }; "toggleLabel": { "alias": "toggleLabel"; "required": false; "isSignal": true; }; "toggleActive": { "alias": "toggleActive"; "required": false; "isSignal": true; }; "stepperCurrent": { "alias": "stepperCurrent"; "required": false; "isSignal": true; }; "stepperTotal": { "alias": "stepperTotal"; "required": false; "isSignal": true; }; "linkLabel": { "alias": "linkLabel"; "required": false; "isSignal": true; }; }, { "checkboxActive": "checkboxActiveChange"; "toggleActive": "toggleActiveChange"; "primaryClick": "primaryClick"; "secondaryClick": "secondaryClick"; "linkClick": "linkClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiDrawerFooter, "sui-drawer-footer", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "primaryButton": { "alias": "primaryButton"; "required": false; "isSignal": true; }; "secondaryButton": { "alias": "secondaryButton"; "required": false; "isSignal": true; }; "checkboxLabel": { "alias": "checkboxLabel"; "required": false; "isSignal": true; }; "checkboxActive": { "alias": "checkboxActive"; "required": false; "isSignal": true; }; "toggleLabel": { "alias": "toggleLabel"; "required": false; "isSignal": true; }; "toggleActive": { "alias": "toggleActive"; "required": false; "isSignal": true; }; "stepper": { "alias": "stepper"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; }, { "checkboxActive": "checkboxActiveChange"; "toggleActive": "toggleActiveChange"; "primaryClick": "primaryClick"; "secondaryClick": "secondaryClick"; "linkClick": "linkClick"; }, never, never, true, never>;
 }
 
 type SuiDrawerHeaderType = 'basic' | 'left-icon';
@@ -3973,8 +4135,8 @@ type SuiDrawerHeaderSize = 'small' | 'large' | 'xlarge';
  *   Link Button (opcional, input `button=true` en Figma) — un Link Button
  *                gray/medium/underlined (14/20/-0.6%, text/sub-600) entre el
  *                content y el dismiss icon. Solo aparece en Basic+Small y
- *                LeftIcon+Small en Figma. Homologado vía `linkLabel` +
- *                `linkClick` (usa sui-link-button size=medium).
+ *                LeftIcon+Small en Figma. Homologado vía `link` (SuiLinkConfig
+ *                | string) + `linkClick` (usa sui-link-button size=medium).
  *
  *   Divider (opcional, posición=absolute bottom) — 1px stroke-soft-200
  *
@@ -3988,16 +4150,20 @@ type SuiDrawerHeaderSize = 'small' | 'large' | 'xlarge';
  *   radius-full          → --sui-radius-full (badge + icon-badge)
  *   shadow x-small       → --sui-regular-shadow-x-small (icon-badge frame)
  *
- * Badge: círculo 20×20 fijo en Figma (siempre muestra "2"). El SUI usa
- *   min-width:20px + height:20px → para 1 dígito es un círculo 20×20 exacto;
- *   para 2+ dígitos crece en width manteniendo height 20 (pill), comportamiento
- *   DS estándar de un number-badge. NO se fuerza width:20px fijo para no recortar
- *   números >= 10 (ver openQuestion del reporte).
+ * Badge (`badge: SuiBadgeConfig | number | string | null`):
+ *   - number → badge NUMÉRICO Figma (círculo error 20×20, span custom): círculo
+ *     20×20 fijo en Figma (siempre muestra "2"). El SUI usa min-width:20px +
+ *     height:20px → para 1 dígito es un círculo 20×20 exacto; para 2+ dígitos
+ *     crece en width manteniendo height 20 (pill), comportamiento DS estándar de
+ *     un number-badge. NO se fuerza width:20px fijo para no recortar números
+ *     >= 10 (ver openQuestion del reporte).
+ *   - string / SuiBadgeConfig → <sui-badge> estándar con los fallbacks canon del
+ *     patrón (orange/light/small), igual que checkbox-label/switch-label.
  *
  * Confirmado contra Figma live (2026-05-29):
  *   - Link Button SOLO existe en variants Small. El prop `button` solo está
  *     en Basic+Small (3187:5673) y LeftIcon+Small; las variants Large
- *     (3187:4549) NO lo tienen. El template gatea `linkLabel() && size()==='small'`.
+ *     (3187:4549) NO lo tienen. El template gatea `linkCfg() && size()==='small'`.
  *   - Link Button color = text/sub-600 (gray variant del sui-link-button).
  *   - Posición: entre content y dismiss icon (orden de capas Figma confirmado).
  *
@@ -4026,17 +4192,29 @@ declare class SuiDrawerHeader {
     readonly description: _angular_core.InputSignal<string | null>;
     /** RemixIcon name (sin 'ri-') para variant left-icon. */
     readonly icon: _angular_core.InputSignal<string | null>;
-    /** Número del badge built-in al lado del title (style.error.base). null = no badge. */
-    readonly badgeNumber: _angular_core.InputSignal<number | null>;
-    /**
-     * Label del Link Button inline del header (Figma input `button=true`).
-     * Cuando es '' (default) NO se renderiza el link. Cualquier string lo muestra
-     * entre el content y el dismiss icon — PERO solo cuando size='small', porque
-     * Figma define el Link Button únicamente en Basic+Small / LeftIcon+Small
-     * (las variants Large no tienen el prop `button`). Pasar linkLabel con
-     * size='large' no renderiza nada (se gatea en el template).
-     */
-    readonly linkLabel: _angular_core.InputSignal<string>;
+    /** Badge junto al title — union de 3 formas:
+     *  - `number` → badge NUMÉRICO built-in del Figma (círculo state/error/base
+     *    20×20, span custom). `0` es válido (se renderiza).
+     *  - `string` → shorthand de badge estándar (solo label, fallbacks canon).
+     *  - `SuiBadgeConfig` → <sui-badge> con color/variant/size (defaults
+     *    orange/light/small, mismo patrón que checkbox-label).
+     *  null = sin badge. */
+    readonly badge: _angular_core.InputSignal<string | number | SuiBadgeConfig | null>;
+    /** Valor del badge numérico Figma (render span custom). null si el badge no es number. */
+    protected readonly badgeNum: _angular_core.Signal<number | null>;
+    /** Config resuelta del badge estándar (string → { label }). null si number/sin badge. */
+    protected readonly badgeCfg: _angular_core.Signal<SuiBadgeConfig | null>;
+    /** Link Button inline del header (Figma input `button=true`) — string
+     *  shorthand (solo label, emite `linkClick`) o SuiLinkConfig
+     *  { label, href?, target?, rel? }: con href renderiza <a> real; rel
+     *  automático 'noopener noreferrer' para _blank. (Mismo patrón objeto que
+     *  `badge`/SuiBadgeConfig.) Se muestra entre el content y el dismiss icon —
+     *  PERO solo cuando size='small', porque Figma define el Link Button
+     *  únicamente en Basic+Small / LeftIcon+Small (las variants Large no tienen
+     *  el prop `button`). Pasar link con size='large' no renderiza nada. */
+    readonly link: _angular_core.InputSignal<string | SuiLinkConfig | null>;
+    /** Config resuelta del link (string → { label }, rel automático). */
+    protected readonly linkCfg: _angular_core.Signal<SuiLinkConfig | null>;
     /** Muestra el close button trailing. Default true. */
     readonly showDismiss: _angular_core.InputSignal<boolean>;
     /** Muestra divider 1px al fondo del header. Default false. */
@@ -4045,12 +4223,12 @@ declare class SuiDrawerHeader {
     readonly dismissAriaLabel: _angular_core.InputSignal<string>;
     /** Click en el close button. */
     readonly dismiss: _angular_core.OutputEmitterRef<MouseEvent>;
-    /** Click en el Link Button inline (solo cuando linkLabel !== ''). */
+    /** Click en el Link Button inline (solo cuando `link` está set). */
     readonly linkClick: _angular_core.OutputEmitterRef<MouseEvent>;
     onDismiss(event: MouseEvent): void;
     onLink(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiDrawerHeader, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiDrawerHeader, "sui-drawer-header", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "badgeNumber": { "alias": "badgeNumber"; "required": false; "isSignal": true; }; "linkLabel": { "alias": "linkLabel"; "required": false; "isSignal": true; }; "showDismiss": { "alias": "showDismiss"; "required": false; "isSignal": true; }; "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "dismissAriaLabel": { "alias": "dismissAriaLabel"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; "linkClick": "linkClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiDrawerHeader, "sui-drawer-header", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "showDismiss": { "alias": "showDismiss"; "required": false; "isSignal": true; }; "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "dismissAriaLabel": { "alias": "dismissAriaLabel"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; "linkClick": "linkClick"; }, never, never, true, never>;
 }
 
 /**
@@ -4278,6 +4456,18 @@ type SuiDropdownMenuPopupRole = 'menu' | 'listbox' | 'true';
 declare class SuiDropdownMenu {
     /** Si true, el panel matchea el ancho del trigger. Default: auto width. */
     readonly matchWidth: _angular_core.InputSignal<boolean>;
+    /** Estrategia ante espacio insuficiente. Default (true): el pane se ENCOGE
+     *  al espacio libre (correcto para menús de items con scroll interno).
+     *  Para paneles de tamaño FIJO (color picker): false + push=true — el panel
+     *  se corre (puede tapar el trigger) pero se muestra ENTERO. */
+    readonly flexibleDimensions: _angular_core.InputSignal<boolean>;
+    /** withPush del CDK: empuja el pane dentro del viewport si no cabe.
+     *  ⚠️ Caveat CDK: un pane pusheado queda con coordenadas fijas y NO
+     *  re-ancla al origin al scrollear (flota despegado del trigger) — bug
+     *  real con el color picker 2026-07-21. Preferir push=false: el pane
+     *  queda anclado y sigue el scroll; si no cabe, sobresale del viewport
+     *  como cualquier popover nativo. */
+    readonly push: _angular_core.InputSignal<boolean>;
     /** Min-width fijo del panel (px). Si matchWidth + minWidth: `max(triggerWidth, minWidth)`. */
     readonly minWidth: _angular_core.InputSignal<number | null>;
     /** Position primary. Default: auto = below con fallback above. */
@@ -4322,7 +4512,7 @@ declare class SuiDropdownMenu {
     open(): void;
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiDropdownMenu, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiDropdownMenu, "sui-dropdown-menu", ["suiDropdownMenu"], { "matchWidth": { "alias": "matchWidth"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "viewportMargin": { "alias": "viewportMargin"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "popupRole": { "alias": "popupRole"; "required": false; "isSignal": true; }; "origin": { "alias": "origin"; "required": false; "isSignal": true; }; }, { "openedChange": "openedChange"; }, ["_panel"], ["[trigger]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiDropdownMenu, "sui-dropdown-menu", ["suiDropdownMenu"], { "matchWidth": { "alias": "matchWidth"; "required": false; "isSignal": true; }; "flexibleDimensions": { "alias": "flexibleDimensions"; "required": false; "isSignal": true; }; "push": { "alias": "push"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "viewportMargin": { "alias": "viewportMargin"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "popupRole": { "alias": "popupRole"; "required": false; "isSignal": true; }; "origin": { "alias": "origin"; "required": false; "isSignal": true; }; }, { "openedChange": "openedChange"; }, ["_panel"], ["[trigger]"], true, never>;
 }
 
 /**
@@ -4465,7 +4655,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<"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>;
+    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. */
@@ -4481,6 +4671,15 @@ declare class SuiEmoji {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiEmoji, "sui-emoji", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Config del CTA del empty state. String shorthand = solo label (el botón
+ * emite `actionClicked`); con `route` el botón navega vía routerLink.
+ * (Mismo patrón objeto que `badge`/`link` de sui-checkbox-label.)
+ */
+interface SuiEmptyStateAction {
+    label: string;
+    route?: string;
+}
 /**
  * SUI Empty State — SUI Design System 2.0
  *
@@ -4512,24 +4711,28 @@ declare class SuiEmoji {
  *    ilustración default es el zorro (mascota canon de los empty states).
  *  - title (required): heading
  *  - subtitle: descripción
- *  - actionLabel + actionRoute: botón con routerLink
- *  - actionLabel solo: botón emite (actionClicked)
+ *  - action: string shorthand (solo label → botón emite actionClicked) o
+ *    { label, route? } — con route el botón navega vía routerLink
  */
 declare class SuiEmptyState {
     /** URL de Fluent Emoji (3D o animado) — override del zorro default. */
     emoji: _angular_core.InputSignal<string>;
     title: _angular_core.InputSignal<string>;
     subtitle: _angular_core.InputSignal<string>;
-    actionLabel: _angular_core.InputSignal<string>;
-    actionRoute: _angular_core.InputSignal<string>;
+    /** CTA del empty state — string shorthand (solo label, emite `actionClicked`)
+        o SuiEmptyStateAction { label, route? } (con route usa routerLink).
+        null/'' = sin botón. */
+    action: _angular_core.InputSignal<string | SuiEmptyStateAction | null>;
     actionClicked: _angular_core.OutputEmitterRef<void>;
+    /** Config resuelta del CTA (string → { label }; sin label → null). */
+    protected readonly actionCfg: _angular_core.Signal<SuiEmptyStateAction | null>;
     /** URL del emoji. Default = zorro (mascota canon de empty states del proyecto):
         todo empty muestra el zorro salvo que pase un `emoji` URL distinto explícito.
         Centralizar el default acá garantiza consistencia en TODOS los empty —
         incluidas las secciones reutilizables — sin tocar cada uso. */
     protected readonly resolvedEmojiSrc: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiEmptyState, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiEmptyState, "sui-empty-state", never, { "emoji": { "alias": "emoji"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionRoute": { "alias": "actionRoute"; "required": false; "isSignal": true; }; }, { "actionClicked": "actionClicked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiEmptyState, "sui-empty-state", never, { "emoji": { "alias": "emoji"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "action": { "alias": "action"; "required": false; "isSignal": true; }; }, { "actionClicked": "actionClicked"; }, never, never, true, never>;
 }
 /** Zorro animado (Fluent Emoji) — emoji default canon de los empty states. */
 declare const EMPTY_STATE_FOX_EMOJI = "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Fox.png";
@@ -4739,6 +4942,15 @@ declare class SuiFileIcon {
 }
 
 type SuiFileUploadCardState = 'in-progress' | 'success' | 'error';
+/**
+ * Config del archivo mostrado en la card. String shorthand = filename directo
+ * (mismo patrón objeto que `badge`/`link` de sui-checkbox-label).
+ * `extension` fuerza el tipo del file-icon; si falta se extrae del filename.
+ */
+interface SuiFileUploadCardFile {
+    filename: string;
+    extension?: string;
+}
 /**
  * SUI File Upload Card — SUI Design System 2.0
  *
@@ -4822,8 +5034,9 @@ type SuiFileUploadCardState = 'in-progress' | 'success' | 'error';
  *       error-warning-fill (error)          → --sui-state-error-base (rojo) — íd.
  *
  * Inputs:
- *  - filename:        string visible (default "file.pdf")
- *  - extension:       override del FileIcon (extrae de filename si vacío)
+ *  - file:            string shorthand (= filename, default "file.pdf") o
+ *                     { filename, extension? } — extension overridea el FileIcon
+ *                     (si falta se extrae del filename)
  *  - description:     texto secundario izquierdo (ej. "0 KB of 120 KB")
  *  - state:           'in-progress' | 'success' | 'error'
  *  - progress:        0–100 — solo se muestra si state==='in-progress'
@@ -4838,8 +5051,10 @@ type SuiFileUploadCardState = 'in-progress' | 'success' | 'error';
  *  - retryClicked:    click en "Try Again" (solo state==='error')
  */
 declare class SuiFileUploadCard {
-    readonly filename: _angular_core.InputSignal<string>;
-    readonly extension: _angular_core.InputSignal<string>;
+    /** Archivo mostrado — string shorthand (= filename) o { filename, extension? }. */
+    readonly file: _angular_core.InputSignal<string | SuiFileUploadCardFile>;
+    /** Config resuelta del archivo (string → { filename }). */
+    protected readonly fileCfg: _angular_core.Signal<Required<SuiFileUploadCardFile>>;
     readonly description: _angular_core.InputSignal<string>;
     readonly state: _angular_core.InputSignal<SuiFileUploadCardState>;
     readonly progress: _angular_core.InputSignal<number>;
@@ -4859,7 +5074,7 @@ declare class SuiFileUploadCard {
     protected onAction(): void;
     protected onRetry(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiFileUploadCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiFileUploadCard, "sui-file-upload-card", never, { "filename": { "alias": "filename"; "required": false; "isSignal": true; }; "extension": { "alias": "extension"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "progress": { "alias": "progress"; "required": false; "isSignal": true; }; "statusText": { "alias": "statusText"; "required": false; "isSignal": true; }; "showStatus": { "alias": "showStatus"; "required": false; "isSignal": true; }; "retryLabel": { "alias": "retryLabel"; "required": false; "isSignal": true; }; }, { "actionClicked": "actionClicked"; "retryClicked": "retryClicked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiFileUploadCard, "sui-file-upload-card", never, { "file": { "alias": "file"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "progress": { "alias": "progress"; "required": false; "isSignal": true; }; "statusText": { "alias": "statusText"; "required": false; "isSignal": true; }; "showStatus": { "alias": "showStatus"; "required": false; "isSignal": true; }; "retryLabel": { "alias": "retryLabel"; "required": false; "isSignal": true; }; }, { "actionClicked": "actionClicked"; "retryClicked": "retryClicked"; }, never, never, true, never>;
 }
 
 type SuiFileUploadSize = 'small' | 'medium' | 'large' | 'xlarge';
@@ -5118,19 +5333,24 @@ declare class SuiFilterItem {
  *
  * Usage:
  *   <sui-filter-panel-header label="Filters" leftIcon="equalizer-line"
- *                            [clearable]="true" (clear)="onClear()" />
+ *                            [clear]="true" (clearClick)="onClear()" />
+ *   <sui-filter-panel-header label="Filtros" clear="Limpiar"
+ *                            (clearClick)="onClear()" />
  */
 declare class SuiFilterPanelHeader {
     readonly label: _angular_core.InputSignal<string>;
     /** Icono opcional a la izquierda del label (20×20). */
     readonly leftIcon: _angular_core.InputSignal<string | null>;
-    /** Muestra el link "Clear" a la derecha. */
-    readonly clearable: _angular_core.InputSignal<boolean>;
-    /** Texto del link de limpieza. */
-    readonly clearLabel: _angular_core.InputSignal<string>;
-    readonly clear: _angular_core.OutputEmitterRef<void>;
+    /** Link de limpieza a la derecha: `true` = label default 'Clear', string =
+     *  label custom, `false` (default) = oculto. */
+    readonly clear: _angular_core.InputSignal<string | boolean>;
+    /** Label resuelto del link (null = oculto). */
+    protected readonly clearLabelCfg: _angular_core.Signal<string | null>;
+    /** Click en el link de limpieza. (Renombrado de `clear` — el nombre lo tomó
+     *  el input consolidado; input y output no pueden compartir nombre.) */
+    readonly clearClick: _angular_core.OutputEmitterRef<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiFilterPanelHeader, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiFilterPanelHeader, "sui-filter-panel-header", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; }, { "clear": "clear"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiFilterPanelHeader, "sui-filter-panel-header", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "clear": { "alias": "clear"; "required": false; "isSignal": true; }; }, { "clearClick": "clearClick"; }, never, never, true, never>;
 }
 
 /**
@@ -5165,20 +5385,27 @@ declare class SuiFilterPanelHeader {
  *
  * Usage:
  *   <sui-filter-panel-footer (clear)="onClear()" (apply)="onApply()" />
- *   <sui-filter-panel-footer clearLabel="Reset" applyLabel="Aplicar filtros"
- *                            [applyDisabled]="!dirty()" (apply)="onApply()" />
+ *   <sui-filter-panel-footer clearButton="Reset"
+ *                            [applyButton]="{ label: 'Aplicar filtros', disabled: !dirty() }"
+ *                            (apply)="onApply()" />
  */
 declare class SuiFilterPanelFooter {
-    readonly clearLabel: _angular_core.InputSignal<string>;
-    readonly applyLabel: _angular_core.InputSignal<string>;
-    readonly clearDisabled: _angular_core.InputSignal<boolean>;
-    readonly applyDisabled: _angular_core.InputSignal<boolean>;
+    /** Botón "Clear" (stroke neutral) — string shorthand (solo label) o
+     *  SuiFooterButtonConfig { label, disabled? }. Interfaz compartida con
+     *  sui-drawer-footer. */
+    readonly clearButton: _angular_core.InputSignal<string | SuiFooterButtonConfig>;
+    /** 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 }). */
+    protected readonly applyCfg: _angular_core.Signal<SuiFooterButtonConfig>;
     readonly clear: _angular_core.OutputEmitterRef<void>;
     readonly apply: _angular_core.OutputEmitterRef<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiFilterPanelFooter, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiFilterPanelFooter, "sui-filter-panel-footer", never, { "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "applyLabel": { "alias": "applyLabel"; "required": false; "isSignal": true; }; "clearDisabled": { "alias": "clearDisabled"; "required": false; "isSignal": true; }; "applyDisabled": { "alias": "applyDisabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "clear": "clear"; "apply": "apply"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiFilterPanelFooter, "sui-filter-panel-footer", never, { "clearButton": { "alias": "clearButton"; "required": false; "isSignal": true; }; "applyButton": { "alias": "applyButton"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "clear": "clear"; "apply": "apply"; }, never, never, true, never>;
 }
 
 type SuiFormHintVariant = 'neutral' | 'error' | 'success' | 'warning' | 'disabled';
@@ -5261,18 +5488,21 @@ type SuiFormLabelSize = 'xsmall' | 'small' | 'medium';
  *   - Required         → input `required` (asterisco)
  *   - Sublabel         → input `sublabel` (texto secundario)
  *   - Info             → input `tooltip` (icono ℹ + tooltip)
- *   - Button           → input `linkText` + output `linkClick` (link tipo "Help?" a la derecha)
+ *   - Button           → input `link` + output `linkClick` (link tipo "Help?" a la derecha)
  *
  * @input label: string (required) — Texto principal del label
  * @input sublabel: string | null — Texto secundario pequeño (ej. "Optional", "Required")
  * @input required: boolean — Muestra asterisco al final del label principal
  * @input tooltip: string | null — Tooltip sobre icono info (ℹ) al final del label
- * @input linkText: string | null — Texto del link de acción a la derecha (variante "Button"
- *   de Figma, ej. "Help?"). Si null, no se renderiza el link.
+ * @input link: SuiLinkConfig | string | null — Link de acción a la derecha (variante
+ *   "Button" de Figma, ej. "Help?"). String shorthand = solo label (emite `linkClick`);
+ *   SuiLinkConfig { label, href?, target?, rel? } = <a> real con rel automático
+ *   'noopener noreferrer' si target='_blank' (patrón canon sui-checkbox-label).
+ *   Si null, no se renderiza el link.
  * @input size: 'xsmall' | 'small' | 'medium' — Tamaño visual, default 'medium'
  * @input disabled: boolean — Atenúa todo el label (text/sublabel/asterisco/icono/link)
  * @input for: string | null — Attr `for` del <label> para accesibilidad
- * @output linkClick: void — Emite cuando se clickea el link de acción ("Button" variant)
+ * @output linkClick: MouseEvent — Emite cuando se clickea el link de acción ("Button" variant)
  *
  * Variantes (todas verificadas contra el variantMatrix de la auditoría;
  *  los valores cromáticos exactos quedan PENDING VERIFY hasta re-correr MCP Figma):
@@ -5286,7 +5516,12 @@ type SuiFormLabelSize = 'xsmall' | 'small' | 'medium';
  *       (registrado en SUI_CUSTOM_ICONS) — círculo relleno con "i" serif, NO el
  *       ri-information-fill de RemixIcon (i recta). Color --sui-icon-disabled-300 (#d1d1d1)
  *       via currentColor; el vector queda ~12.5px centrado en slot 20px (padding 18.75%).
- *   - linkText: link --sui-primary-base alineado a la derecha (margin-left: auto).
+ *   - link: sui-link-button variant="gray" size="small" alineado a la derecha
+ *       (margin-left: auto). En Figma el nodo del link ES una instancia de
+ *       "Link Buttons [1.1]" (266:2814) → se renderiza con el COMPONENTE real,
+ *       no un <button> maqueta (canon: ningún button custom donde un SUI sirve).
+ *       Variant gray = 12/16/500 text/sub-600 base + disabled-300, idéntico al
+ *       spec verificado del label.
  *   - disabled: --sui-text-disabled-300 / --sui-icon-disabled-300 en todo, sin cursor pointer.
  *   - sizes: xsmall/small/medium — tipografía escala con el field que acompaña.
  *
@@ -5302,11 +5537,14 @@ declare class SuiFormLabel {
     readonly required: _angular_core.InputSignal<boolean>;
     /** Tooltip opcional sobre un icono info (ℹ) al final del label */
     readonly tooltip: _angular_core.InputSignal<string | null>;
-    /**
-     * Texto del link de acción a la derecha (variante "Button" de Figma, ej. "Help?").
-     * Si null/vacío, no se renderiza el link.
-     */
-    readonly linkText: _angular_core.InputSignal<string | null>;
+    /** Link de acción a la derecha (variante "Button" de Figma, ej. "Help?") —
+     *  string shorthand (solo label, emite `linkClick`) o SuiLinkConfig
+     *  { label, href?, target?, rel? }: con href renderiza <a> real; rel
+     *  automático 'noopener noreferrer' para _blank. Si null/vacío, no se
+     *  renderiza el link. (Patrón canon `link` de sui-checkbox-label.) */
+    readonly link: _angular_core.InputSignal<string | SuiLinkConfig | null>;
+    /** Config resuelta del link (string → { label }, rel automático). */
+    protected readonly linkCfg: _angular_core.Signal<SuiLinkConfig | null>;
     /** Tamaño visual — matchea al field que acompaña */
     readonly size: _angular_core.InputSignal<SuiFormLabelSize>;
     /** Atenúa todo el label (estado Disabled de Figma) */
@@ -5314,9 +5552,12 @@ declare class SuiFormLabel {
     /** ID del field controlado (para accesibilidad `for` attribute) */
     readonly for: _angular_core.InputSignal<string | null>;
     /** Emite cuando se clickea el link de acción (variante "Button" de Figma) */
-    readonly linkClick: _angular_core.OutputEmitterRef<void>;
+    readonly linkClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    /** Click del link: stop-propagation para no disparar la activación del <label>
+     *  contenedor. sui-link-button ya bloquea el click cuando está disabled. */
+    onLinkClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiFormLabel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiFormLabel, "sui-form-label", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "linkText": { "alias": "linkText"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "for": { "alias": "for"; "required": false; "isSignal": true; }; }, { "linkClick": "linkClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiFormLabel, "sui-form-label", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "for": { "alias": "for"; "required": false; "isSignal": true; }; }, { "linkClick": "linkClick"; }, never, never, true, never>;
 }
 
 /**
@@ -5350,6 +5591,13 @@ declare class SuiIcon {
 
 type SuiImageUploadProfileAlignment = 'vertical' | 'horizontal';
 type SuiImageUploadProfileType = 'avatar' | 'company';
+/** Copy de los botones de acción (i18n). Cada key es opcional — lo no seteado
+ *  cae al default en español (tuteo): Subir / Eliminar / Cambiar. */
+interface SuiImageUploadProfileLabels {
+    upload?: string;
+    remove?: string;
+    change?: string;
+}
 /**
  * SUI Image Upload Profile — SUI Design System 2.0
  *
@@ -5396,9 +5644,10 @@ type SuiImageUploadProfileType = 'avatar' | 'company';
  *                        + "Change"  (stroke neutral) — node 452:847
  *     Geometría Figma: p-6 uniforme, radius-8, inner text-wrap px-4,
  *       Label/Small 14/20/-0.6% 500. Mapea EXACTO a <sui-button size="xsmall">.
- *       Labels configurables via inputs (uploadLabel/removeLabel/changeLabel) —
- *       en Figma están hardcodeadas en inglés; acá el default va en español
- *       (tuteo peruano) y el consumer puede overridear para i18n.
+ *       Labels configurables via el input objeto `labels`
+ *       ({ upload?, remove?, change? }) — en Figma están hardcodeadas en inglés;
+ *       acá el default va en español (tuteo peruano) y el consumer puede
+ *       overridear (parcial o total) para i18n.
  *
  *   Type=Company (452:792 / 452:1006): el avatar es un SLOT `pickCompany` —
  *     el consumer pasa el logo real de la empresa. Acá se expone como
@@ -5431,7 +5680,8 @@ type SuiImageUploadProfileType = 'avatar' | 'company';
  *   - subtitle:       subtítulo (Paragraph/Small). Default hint de dimensiones.
  *   - alignment:      'vertical' (texto + avatar 64) | 'horizontal' (avatar 56, sin texto).
  *   - type:           'avatar' (silueta humana) | 'company' (silueta edificios).
- *   - uploadLabel / removeLabel / changeLabel: copy de los botones (i18n).
+ *   - labels:         copy de los botones (i18n) — { upload?, remove?, change? },
+ *                     defaults Subir / Eliminar / Cambiar.
  *   - disabled:       deshabilita los botones (no se puede interactuar).
  *   - loading:        estado de carga (botones deshabilitados mientras sube).
  *
@@ -5457,9 +5707,10 @@ declare class SuiImageUploadProfile implements ControlValueAccessor {
     readonly subtitle: _angular_core.InputSignal<string>;
     readonly alignment: _angular_core.InputSignal<SuiImageUploadProfileAlignment>;
     readonly type: _angular_core.InputSignal<SuiImageUploadProfileType>;
-    readonly uploadLabel: _angular_core.InputSignal<string>;
-    readonly removeLabel: _angular_core.InputSignal<string>;
-    readonly changeLabel: _angular_core.InputSignal<string>;
+    /** Copy de los botones (i18n) — objeto parcial; lo no seteado cae al default. */
+    readonly labels: _angular_core.InputSignal<SuiImageUploadProfileLabels>;
+    /** Labels resueltas con los defaults en español (tuteo). */
+    protected readonly labelsCfg: _angular_core.Signal<Required<SuiImageUploadProfileLabels>>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly loading: _angular_core.InputSignal<boolean>;
     readonly upload: _angular_core.OutputEmitterRef<void>;
@@ -5499,7 +5750,7 @@ declare class SuiImageUploadProfile implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiImageUploadProfile, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiImageUploadProfile, "sui-image-upload-profile", never, { "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "companyLogoSrc": { "alias": "companyLogoSrc"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "uploadLabel": { "alias": "uploadLabel"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "changeLabel": { "alias": "changeLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, { "upload": "upload"; "remove": "remove"; "change": "change"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiImageUploadProfile, "sui-image-upload-profile", never, { "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "companyLogoSrc": { "alias": "companyLogoSrc"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, { "upload": "upload"; "remove": "remove"; "change": "change"; }, never, never, true, never>;
 }
 
 type SuiImageUploadShape = 'circle' | 'rect';
@@ -6071,6 +6322,19 @@ declare class SuiInput implements ControlValueAccessor {
 
 type SuiIntegrationSwitchType = 'horizontal' | 'vertical';
 type SuiIntegrationSwitchAppearance = 'card' | 'list';
+/**
+ * Config del manage button embebido. Un solo input `[manage]` reemplaza al
+ * trío showManage/manageLabel/manageIcon (mismo patrón objeto que
+ * `badge`/SuiBadgeConfig — canon sui-checkbox-label):
+ *   - `true` (default)  → botón con defaults ('Manage' + settings-2-line)
+ *   - `'Configurar'`    → string shorthand: label custom, icon default
+ *   - `{ label, icon }` → config completa
+ *   - `false` / `null`  → sin botón
+ */
+interface SuiIntegrationManageConfig {
+    label?: string;
+    icon?: string;
+}
 /**
  * SUI Integration Switch — SUI Design System 2.0
  *
@@ -6133,9 +6397,13 @@ type SuiIntegrationSwitchAppearance = 'card' | 'list';
  *     description="Seamless collaboration and document management."
  *     brandIconSrc="/assets/brand/microsoft.svg"
  *     [(active)]="integrations.microsoft"
- *     [badge]="true"
- *     (manage)="openSettings('microsoft')"
+ *     badge="NEW"
+ *     (manageClick)="openSettings('microsoft')"
  *   />
+ *
+ *   <!-- Manage custom (config objeto) · sin manage -->
+ *   <sui-integration-switch title="..." [manage]="{ label: 'Configurar', icon: 'tools-line' }" />
+ *   <sui-integration-switch title="..." [manage]="false" />
  */
 declare class SuiIntegrationSwitch implements ControlValueAccessor {
     readonly type: _angular_core.InputSignal<SuiIntegrationSwitchType>;
@@ -6150,10 +6418,11 @@ declare class SuiIntegrationSwitch implements ControlValueAccessor {
         (label + color/variant/size, tipado como sui-badge). null = sin badge. */
     readonly badge: _angular_core.InputSignal<string | SuiBadgeConfig | null>;
     protected readonly badgeCfg: _angular_core.Signal<SuiBadgeConfig | null>;
-    /** Mostrar el manage button. Default true. */
-    readonly showManage: _angular_core.InputSignal<boolean>;
-    readonly manageLabel: _angular_core.InputSignal<string>;
-    readonly manageIcon: _angular_core.InputSignal<string>;
+    /** Manage button — true = defaults ('Manage' + settings-2-line), string =
+        label custom con icon default, SuiIntegrationManageConfig = todo,
+        false/null = oculto. */
+    readonly manage: _angular_core.InputSignal<string | boolean | SuiIntegrationManageConfig | null>;
+    protected readonly manageCfg: _angular_core.Signal<Required<SuiIntegrationManageConfig> | null>;
     /** Mostrar el switch toggle. Default true. */
     readonly showToggle: _angular_core.InputSignal<boolean>;
     readonly disabled: _angular_core.InputSignal<boolean>;
@@ -6163,8 +6432,9 @@ declare class SuiIntegrationSwitch implements ControlValueAccessor {
      *  two-way con `input + output` separados (input `active` + output `activeChange`). */
     readonly active: _angular_core.InputSignal<boolean>;
     readonly activeChange: _angular_core.OutputEmitterRef<boolean>;
-    /** Click en el manage button. */
-    readonly manage: _angular_core.OutputEmitterRef<MouseEvent>;
+    /** Click en el manage button. (Nombrado como checkbox-label.linkClick —
+        el nombre `manage` lo ocupa el input config del botón.) */
+    readonly manageClick: _angular_core.OutputEmitterRef<MouseEvent>;
     private readonly _disabledByForm;
     readonly isDisabled: _angular_core.Signal<boolean>;
     /** CVA buffer — usado SOLO en form mode (formControlName/formControl). */
@@ -6183,7 +6453,7 @@ declare class SuiIntegrationSwitch implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiIntegrationSwitch, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiIntegrationSwitch, "sui-integration-switch", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "brandIconSrc": { "alias": "brandIconSrc"; "required": false; "isSignal": true; }; "brandIcon": { "alias": "brandIcon"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "showManage": { "alias": "showManage"; "required": false; "isSignal": true; }; "manageLabel": { "alias": "manageLabel"; "required": false; "isSignal": true; }; "manageIcon": { "alias": "manageIcon"; "required": false; "isSignal": true; }; "showToggle": { "alias": "showToggle"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "activeChange": "activeChange"; "manage": "manage"; }, never, ["[sui-integration-brand]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiIntegrationSwitch, "sui-integration-switch", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "brandIconSrc": { "alias": "brandIconSrc"; "required": false; "isSignal": true; }; "brandIcon": { "alias": "brandIcon"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "manage": { "alias": "manage"; "required": false; "isSignal": true; }; "showToggle": { "alias": "showToggle"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "activeChange": "activeChange"; "manageClick": "manageClick"; }, never, ["[sui-integration-brand]"], true, never>;
 }
 
 /**
@@ -6319,88 +6589,6 @@ declare class SuiKeyIcon {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiKeyIcon, "sui-key-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "styleVariant": { "alias": "styleVariant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type SuiLinkButtonVariant = 'gray' | 'black' | 'primary' | 'error' | 'modifiable';
-type SuiLinkButtonSize = 'medium' | 'small';
-/**
- * SUI Link Button — SUI Design System 2.0
- *
- * Figma file: 8p1k72aKKvzJV4XcvPS4VO
- * Frame: 168:4889 ("Link Buttons [1.1]") — 80 variants total
- *
- * EXACT (pulled from Figma + verified against sui-tokens.scss):
- *   Anatomy
- *     Container          flex / inline-flex, gap=4px, items=center
- *     Medium size        text 14/20/-0.6%, icons 20×20
- *     Small  size        text 12/16/0,     icons 16×16
- *     Font features      'ss11' 1, 'calt' 0, 'liga' 0
- *     Underline          (hover / focus / underline=on): línea continua SOLO
- *                        bajo el texto (los iconos chevron NO van subrayados —
- *                        Figma 169:1391/169:1419: la clase `underline` vive solo
- *                        en el <p>). Implementado vía ::after en
- *                        .sui-link-button__text (NO `text-decoration` sobre el
- *                        flex, que se fragmentaba en 3 trazos icon|text|icon).
- *   Variant × State color matrix
- *     Gray   Default → text/sub-600    | Hover → sub-600 + underline | Focus → strong-950 + underline | Disabled → disabled-300
- *     Black  Default → text/strong-950 | Hover → strong-950 + underline
- *     Primary Default → primary-base   | Hover → primary-dark + underline
- *     Error  Default → state/error/base | Hover → red/700 + underline
- *     Modifiable      → currentColor (consumer-controlled)
- *
- * Token map (Figma → sui-tokens.scss):
- *     text/sub-600     #5c5c5c → --sui-text-sub-600
- *     text/strong-950  #171717 → --sui-text-strong-950
- *     text/disabled-300 #d1d1d1 → --sui-text-disabled-300
- *     primary-base     #335cff → --sui-primary-base   (project remaps to orange #fa7319)
- *     primary-dark     #2547d0 → --sui-primary-dark   (project remaps to dark orange #e16614)
- *     state/error/base #fb3748 → --sui-state-error-base
- *     red/700          #d02533 → --sui-red-700
- *     icon/*           same as text/* per token level
- *
- * FOCUS states PULLED from Figma (2026-05-29) — el Focus mantiene el color
- * BASE + underline; solo el Hover oscurece. Nodos verificados:
- *   Gray   focus 169:1034 → strong-950 + underline
- *   Black  focus 169:1090 → strong-950 + underline
- *   Primary focus 169:1138 → primary-base (NO dark) + underline
- *   Error  focus 169:1187 → error-base (NO red-700) + underline
- *   (Hover: Primary 169:1134 → primary-dark; Error 169:1183 → red-700)
- *
- * PENDING VERIFY (inferred, NOT pulled):
- *   - Modifiable Focus / Hover / Disabled: currentColor para hover/focus; disabled assumed --sui-text-disabled-300
- *   - Underline=On styling para todos: misma decoration spec que Gray (decoration solid, thickness/position from-font, skip-ink none)
- *   - Active state: no es variante Figma; tactile-press scale(0.97) por convención project
- *   - Figma usa font-feature 'cv09' 1 además de 'ss11' 1 'calt' 0 'liga' 0; SUI omite cv09 (alterna del 9) — diferencia tipográfica menor, no afecta layout
- *
- * Usage:
- *   <sui-link-button variant="primary" leftIcon="arrow-left-s-line">Volver</sui-link-button>
- *   <sui-link-button variant="error" [underline]="true" (click)="onDelete()">Eliminar</sui-link-button>
- *   <sui-link-button variant="primary" href="https://docs.example" target="_blank">Ver documentación</sui-link-button>
- *
- * Floating vs inline: el componente es `display: inline-flex` con baseline align,
- * por lo que fluye dentro de un párrafo como un link normal. Para uso "flotante"
- * (toast actions, notification CTA), el consumer lo posiciona libremente — el
- * componente no impone position/z-index propios.
- */
-declare class SuiLinkButton {
-    readonly variant: _angular_core.InputSignal<SuiLinkButtonVariant>;
-    readonly size: _angular_core.InputSignal<SuiLinkButtonSize>;
-    readonly underline: _angular_core.InputSignal<boolean>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    readonly leftIcon: _angular_core.InputSignal<string | null>;
-    readonly rightIcon: _angular_core.InputSignal<string | null>;
-    /** Cuando se setea, el componente renderiza un <a> nativo en vez de <button>. */
-    readonly href: _angular_core.InputSignal<string | null>;
-    readonly target: _angular_core.InputSignal<string | null>;
-    readonly rel: _angular_core.InputSignal<string | null>;
-    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
-    readonly ariaLabel: _angular_core.InputSignal<string | null>;
-    readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
-    readonly iconSize: _angular_core.Signal<number>;
-    readonly isAnchor: _angular_core.Signal<boolean>;
-    onClick(event: MouseEvent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiLinkButton, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiLinkButton, "sui-link-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "underline": { "alias": "underline"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*", "*"], true, never>;
-}
-
 /**
  * SUI Modal Sheet — bottom sheet con breakpoints (estilo Apple Maps / Ionic ion-modal sheet).
  *
@@ -6756,6 +6944,102 @@ declare class SuiModal implements AfterViewInit, OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiModal, "sui-modal", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "iconVariant": { "alias": "iconVariant"; "required": false; "isSignal": true; }; "headerIcon": { "alias": "headerIcon"; "required": false; "isSignal": true; }; "statusAlignment": { "alias": "statusAlignment"; "required": false; "isSignal": true; }; "backdropBlur": { "alias": "backdropBlur"; "required": false; "isSignal": true; }; "fullscreen": { "alias": "fullscreen"; "required": false; "isSignal": true; }; "fullBody": { "alias": "fullBody"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; }, never, ["*", "[slot=footer]"], true, never>;
 }
 
+/** Variantes semánticas del icono de status (mismo union que sui-modal). */
+type SuiModalHeaderVariant = 'info' | 'success' | 'warning' | 'error';
+/**
+ * SUI Modal Header — SUI Design System 2.0
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Component set: 466:4778 ("Modal Header [1.1]") — 6 Types × 2 Sizes
+ *   Types: Basic · Left Icon · Error · Warning · Success · Information
+ *   Sizes: Medium (80, title 14/20 Medium + description 12/16) · Small (56, solo title)
+ *
+ * Componente STANDALONE para componer modales/paneles custom — el mismo header
+ * que sui-modal renderiza internamente, ahora como pieza independiente (igual
+ * que drawer-header/drawer-footer para drawers).
+ *
+ * EXACT (Figma 466:4777 medium / 472:298 small):
+ *   Container      bg white-0 · border-bottom stroke-soft-200 · flex gap-16
+ *                  (small: gap-12) · padding 16px 16px 16px 20px
+ *   Title          Inter Medium 14/20 ls -0.084px, text-strong-950
+ *   Description    Inter Regular 12/16, text-sub-600 (solo medium)
+ *   Status icon    círculo padding-10 radius-full, state lighter bg + base color
+ *                  (mismos tokens que sui-modal)
+ *   Close          compact button ghost (icon close-line 20), top-right
+ *
+ * Tipos: `iconVariant` (semántico) o `icon` (custom, tipo Left Icon).
+ * `icon` custom tiene prioridad; con ambos null → Basic (sin icono).
+ *
+ * Usage:
+ *   <sui-modal-header title="Editar producto" description="Cambios en vivo."
+ *     iconVariant="info" (closed)="cerrar()" />
+ *   <sui-modal-header size="small" title="Filtros" (closed)="cerrar()" />
+ */
+declare class SuiModalHeader {
+    /** Título del header (14/20 Medium). */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Descripción bajo el título (solo size medium). */
+    readonly description: _angular_core.InputSignal<string | null>;
+    /** medium (80): title + description · small (56): solo title. */
+    readonly size: _angular_core.InputSignal<"small" | "medium">;
+    /** Icono semántico de status (círculo state lighter/base). */
+    readonly iconVariant: _angular_core.InputSignal<SuiModalHeaderVariant | null>;
+    /** Icono custom (tipo "Left Icon" de Figma). Prioridad sobre iconVariant. */
+    readonly icon: _angular_core.InputSignal<string | null>;
+    /** Muestra el botón de cerrar (default true). */
+    readonly showClose: _angular_core.InputSignal<boolean>;
+    /** Click en el botón de cerrar. */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    protected readonly iconName: _angular_core.Signal<string | null>;
+    /** Variant efectivo para el data-attr del círculo (custom icon = neutral). */
+    protected readonly resolvedVariant: _angular_core.Signal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiModalHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiModalHeader, "sui-modal-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "iconVariant": { "alias": "iconVariant"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
+}
+
+/**
+ * SUI Modal Footer — SUI Design System 2.0
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Component set: 472:566 ("Modal Footer [1.1]") — 7 Types:
+ *   Basic · Checkbox · Information · Toggle · Stepper · Link Button · Stretch
+ *
+ * Componente STANDALONE para componer modales/paneles custom (par del
+ * sui-modal-header). Diseño componible en vez de 7 types hardcodeados:
+ *   - Los botones (derecha) via `primaryButton`/`secondaryButton` con la
+ *     interfaz COMPARTIDA SuiFooterButtonConfig (string shorthand = label).
+ *   - El slot izquierdo (los "types" de Figma) via <ng-content>: proyecta
+ *     ahí un <sui-checkbox-label>, <sui-switch-label>, <sui-link-button>,
+ *     texto informativo o el stepper — las stories muestran cada uno.
+ *   - `stretch` (type Stretch): los botones ocupan todo el ancho 50/50.
+ *
+ * EXACT (Figma 472:567): container bg white-0 + border-top soft-200,
+ * padding 16px 20px · actions a la derecha gap-12 · botones size small.
+ *
+ * Usage:
+ *   <sui-modal-footer primaryButton="Continuar" secondaryButton="Cancelar"
+ *     (primaryClick)="save()" (secondaryClick)="close()" />
+ *
+ *   <sui-modal-footer [primaryButton]="{ label: 'Eliminar', disabled: !ok }">
+ *     <sui-checkbox-label label="No volver a preguntar" [(active)]="skip" />
+ *   </sui-modal-footer>
+ */
+declare class SuiModalFooter {
+    /** Botón primario (derecha) — string shorthand o { label, disabled? }. */
+    readonly primaryButton: _angular_core.InputSignal<string | SuiFooterButtonConfig | null>;
+    /** Botón secundario (izquierda del primario) — string o config. */
+    readonly secondaryButton: _angular_core.InputSignal<string | SuiFooterButtonConfig | null>;
+    /** Type Stretch de Figma: los botones ocupan todo el ancho (50/50). */
+    readonly stretch: _angular_core.InputSignal<boolean>;
+    readonly primaryClick: _angular_core.OutputEmitterRef<void>;
+    readonly secondaryClick: _angular_core.OutputEmitterRef<void>;
+    private cfg;
+    protected readonly primaryCfg: _angular_core.Signal<SuiFooterButtonConfig | null>;
+    protected readonly secondaryCfg: _angular_core.Signal<SuiFooterButtonConfig | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiModalFooter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiModalFooter, "sui-modal-footer", never, { "primaryButton": { "alias": "primaryButton"; "required": false; "isSignal": true; }; "secondaryButton": { "alias": "secondaryButton"; "required": false; "isSignal": true; }; "stretch": { "alias": "stretch"; "required": false; "isSignal": true; }; }, { "primaryClick": "primaryClick"; "secondaryClick": "secondaryClick"; }, never, ["*"], true, never>;
+}
+
 /**
  * SUI Notification Footer — SUI Design System 2.0
  *
@@ -6793,12 +7077,17 @@ declare class SuiModal implements AfterViewInit, OnDestroy {
  * API:
  *   - usePrefix:    string  ('Use')            — texto antes de las teclas
  *   - useSuffix:    string  ('to navigate')    — texto después de las teclas
- *   - manageLabel:  string  ('Manage Notification')
- *   - showManage:   boolean (true)             — toggle del link (Figma prop `button`)
+ *   - manage:       SuiLinkConfig | string | boolean | null (true) — link de gestión
+ *                   (Figma prop `button`): true = label default 'Manage Notification';
+ *                   string = label custom; SuiLinkConfig { label, href?, target?, rel? }
+ *                   = <a> real con rel automático 'noopener noreferrer' si
+ *                   target='_blank'; false/null = oculto.
+ *                   (Patrón canon `link` de sui-checkbox-label.)
  *   - (manageClick): output<MouseEvent>        — click en "Manage Notification"
  *
  * Uso:
  *   <sui-notification-footer (manageClick)="abrirAjustes()" />
+ *   <sui-notification-footer [manage]="{ label: 'Ajustes', href: '/ajustes' }" />
  *
  * PENDING VERIFY:
  *   - El frame Figma es 540px fijo; acá el host es width 100% para encajar en el
@@ -6807,13 +7096,21 @@ declare class SuiModal implements AfterViewInit, OnDestroy {
  *     que existe en RemixIcon; si el panel real usa otro glyph, ajustar el name.
  */
 declare class SuiNotificationFooter {
+    /** Label default del link de gestión (Figma "Manage Notification"). */
+    private static readonly DEFAULT_MANAGE_LABEL;
     readonly usePrefix: _angular_core.InputSignal<string>;
     readonly useSuffix: _angular_core.InputSignal<string>;
-    readonly manageLabel: _angular_core.InputSignal<string>;
-    readonly showManage: _angular_core.InputSignal<boolean>;
+    /** Link de gestión — true = label default ('Manage Notification'); string =
+     *  label custom (emite `manageClick`); SuiLinkConfig { label, href?, target?,
+     *  rel? }: con href renderiza <a> real, rel automático 'noopener noreferrer'
+     *  para _blank. false/null = oculto (Figma prop `button` off). */
+    readonly manage: _angular_core.InputSignal<string | boolean | SuiLinkConfig | null>;
+    /** Config resuelta del link (true → label default, string → { label },
+     *  rel automático). null cuando el link está oculto. */
+    protected readonly manageCfg: _angular_core.Signal<SuiLinkConfig | null>;
     readonly manageClick: _angular_core.OutputEmitterRef<MouseEvent>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiNotificationFooter, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiNotificationFooter, "sui-notification-footer", never, { "usePrefix": { "alias": "usePrefix"; "required": false; "isSignal": true; }; "useSuffix": { "alias": "useSuffix"; "required": false; "isSignal": true; }; "manageLabel": { "alias": "manageLabel"; "required": false; "isSignal": true; }; "showManage": { "alias": "showManage"; "required": false; "isSignal": true; }; }, { "manageClick": "manageClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiNotificationFooter, "sui-notification-footer", never, { "usePrefix": { "alias": "usePrefix"; "required": false; "isSignal": true; }; "useSuffix": { "alias": "useSuffix"; "required": false; "isSignal": true; }; "manage": { "alias": "manage"; "required": false; "isSignal": true; }; }, { "manageClick": "manageClick"; }, never, never, true, never>;
 }
 
 /**
@@ -6984,7 +7281,8 @@ type SuiNotificationStyle = 'filled' | 'light' | 'lighter' | 'stroke';
  * Extra features preservadas (no Figma, producto):
  *   - status variant×style (alert inline)
  *   - unread dot (8px primary-base — Figma node 4308:731)
- *   - avatarInitials fallback
+ *   - avatar config `{ src?, initials? }` (string shorthand = src) con
+ *     fallback a initials
  *   - dismissible (X close)
  *   - showIcon/iconName status icons
  */
@@ -6994,13 +7292,18 @@ declare class SuiNotification {
     readonly title: _angular_core.InputSignal<string | null>;
     readonly description: _angular_core.InputSignal<string | null>;
     readonly timestamp: _angular_core.InputSignal<string | null>;
-    readonly avatarSrc: _angular_core.InputSignal<string | null>;
-    readonly avatarInitials: _angular_core.InputSignal<string | null>;
+    /** Avatar del item de panel — string shorthand (URL = src directo) o
+     *  SuiAvatarConfig { src?, initials? } (mismo patrón objeto que
+     *  `badge`/`link` de sui-checkbox-label). null = sin avatar (modelo
+     *  status inline). Su presencia activa el modelo item de panel. */
+    readonly avatar: _angular_core.InputSignal<string | SuiAvatarConfig | null>;
+    /** Config resuelta del avatar (string → { src }). */
+    protected readonly avatarCfg: _angular_core.Signal<SuiAvatarConfig | null>;
     readonly showIcon: _angular_core.InputSignal<boolean>;
     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<"file" | "button" | "basic" | "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). */
@@ -7029,7 +7332,7 @@ declare class SuiNotification {
     onDismiss(): void;
     onMore(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiNotification, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiNotification, "sui-notification", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "variantStyle": { "alias": "variantStyle"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "unread": { "alias": "unread"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "showMore": { "alias": "showMore"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; "moreClicked": "moreClicked"; }, never, ["[slot=company-logo]", "[slot=file]", "[slot=message]", "*", "[slot=actions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiNotification, "sui-notification", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "variantStyle": { "alias": "variantStyle"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": false; "isSignal": true; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "unread": { "alias": "unread"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "showMore": { "alias": "showMore"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; "moreClicked": "moreClicked"; }, never, ["[slot=company-logo]", "[slot=file]", "[slot=message]", "*", "[slot=actions]"], true, never>;
 }
 
 type SuiOtpInputType = 'number' | 'text';
@@ -7327,10 +7630,12 @@ declare class SuiPopover {
     readonly nextLabel: _angular_core.InputSignal<string>;
     /** Renderear el botón secundario (Back). Si false, solo se muestra el primario. */
     readonly doubleButton: _angular_core.InputSignal<boolean>;
-    /** Paso actual (1-based) — usado en text-stepper y stepper. */
-    readonly currentStep: _angular_core.InputSignal<number>;
-    /** Total de pasos — usado en text-stepper y stepper. */
-    readonly totalSteps: _angular_core.InputSignal<number>;
+    /** Progreso del stepper — { current (1-based), total }. Usado en text-stepper
+     *  y stepper. null cae al default del sample de Figma ({ current: 1, total: 4 }). */
+    readonly step: _angular_core.InputSignal<{
+        current: number;
+        total: number;
+    } | null>;
     /** Click en el botón X de dismiss. */
     readonly dismissed: _angular_core.OutputEmitterRef<void>;
     /** Click en el botón secundario (Back). */
@@ -7347,12 +7652,14 @@ declare class SuiPopover {
     readonly isTextStepper: _angular_core.Signal<boolean>;
     /** True para footer con dot indicator. */
     readonly isDotStepper: _angular_core.Signal<boolean>;
+    /** Config resuelta del step (null → default { current: 1, total: 4 }). */
+    private readonly stepCfg;
     /** Texto "Step X of N" del text-stepper. */
     readonly stepperText: _angular_core.Signal<string>;
     /** Array de dots para el stepper. Cada item: índice activo => primary. */
     readonly dots: _angular_core.Signal<boolean[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiPopover, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiPopover, "sui-popover", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "tail": { "alias": "tail"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "dismissIcon": { "alias": "dismissIcon"; "required": false; "isSignal": true; }; "footer": { "alias": "footer"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "doubleButton": { "alias": "doubleButton"; "required": false; "isSignal": true; }; "currentStep": { "alias": "currentStep"; "required": false; "isSignal": true; }; "totalSteps": { "alias": "totalSteps"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; "back": "back"; "next": "next"; }, never, ["[data-slot=body]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiPopover, "sui-popover", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "tail": { "alias": "tail"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "dismissIcon": { "alias": "dismissIcon"; "required": false; "isSignal": true; }; "footer": { "alias": "footer"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "doubleButton": { "alias": "doubleButton"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; "back": "back"; "next": "next"; }, never, ["[data-slot=body]"], true, never>;
 }
 
 type SuiProgressBarColor = 'blue' | 'green' | 'orange' | 'red' | 'purple';
@@ -7452,8 +7759,9 @@ type SuiProgressBarLabelType = 'on-top' | 'on-right';
  *                 pending-verify): el primary de este proyecto nunca será azul.
  *
  * Decisiones (responde openQuestions del audit):
- *  - #2: el texto del link NO es hardcoded "Upgrade" → input `linkLabel`
- *        (default 'Upgrade'). La acción se expone vía output `linkClick`.
+ *  - #2: el texto del link NO es hardcoded "Upgrade" → input `link`
+ *        (string shorthand o SuiLinkConfig; default 'Upgrade'). La acción se
+ *        expone vía output `linkClick`; con `href` el <a> además navega.
  *  - #3: es componente SUI nuevo (`sui-progress-bar-label`) que COMPONE
  *        `sui-progress-bar` internamente (no proyección de contenido), para
  *        mantener la barra como única fuente de verdad del fill.
@@ -7470,14 +7778,17 @@ type SuiProgressBarLabelType = 'on-top' | 'on-right';
  *  - value:           number 0–100 (delegado a sui-progress-bar).
  *  - type:            'on-top' (default) | 'on-right'.
  *  - title:           string — título (sólo on-top). Se espera no-vacío en
- *                     on-top (la fila head se omite si title='' y showPercentage
+ *                     on-top (la fila head se omite si title='' y percentage
  *                     es false, para no dejar una fila invisible ocupando alto).
- *  - showPercentage:  boolean (default true) — muestra el % textual.
- *  - percentageText:  string opcional — override del texto del % (default `${value}%`).
+ *  - percentage:      boolean | string (default true) — true muestra `${value}%`,
+ *                     string lo reemplaza por un texto custom, false lo oculta.
  *  - showBottom:      boolean (default false) — fila inferior link+descripción (sólo on-top).
  *  - description:     string — texto descriptivo (fila inferior).
- *  - showLink:        boolean (default false) — muestra el link.
- *  - linkLabel:       string (default 'Upgrade') — texto del link.
+ *  - link:            SuiLinkConfig | string | null (default null = sin link) —
+ *                     string = solo label (el <a> no navega, emite linkClick);
+ *                     objeto { label, href?, target?, rel? } = <a> con navegación
+ *                     real; rel automático 'noopener noreferrer' si target='_blank'.
+ *                     Presente = visible (contrato config del DS, sin flag show).
  *  - color / size:    delegados a sui-progress-bar.
  *  - ariaLabel:       delegado a sui-progress-bar.
  *
@@ -7488,22 +7799,30 @@ declare class SuiProgressBarLabel {
     readonly value: _angular_core.InputSignal<number>;
     readonly type: _angular_core.InputSignal<SuiProgressBarLabelType>;
     readonly title: _angular_core.InputSignal<string>;
-    readonly showPercentage: _angular_core.InputSignal<boolean>;
-    readonly percentageText: _angular_core.InputSignal<string | null>;
+    /** % textual — true = `${value}%` automático · string = texto custom · false = oculto. */
+    readonly percentage: _angular_core.InputSignal<string | boolean>;
     readonly showBottom: _angular_core.InputSignal<boolean>;
     readonly description: _angular_core.InputSignal<string>;
-    readonly showLink: _angular_core.InputSignal<boolean>;
-    readonly linkLabel: _angular_core.InputSignal<string>;
+    /** Link de la fila inferior — string shorthand (solo label, el <a> no navega
+     *  y emite `linkClick`) o SuiLinkConfig { label, href?, target?, rel? }: con
+     *  `href` el <a> navega de verdad; rel automático 'noopener noreferrer' para
+     *  target='_blank'. Presente = visible; null (default) = sin link.
+     *  (Mismo patrón objeto que sui-checkbox-label.link / SuiBadgeConfig.) */
+    readonly link: _angular_core.InputSignal<string | SuiLinkConfig | null>;
     readonly color: _angular_core.InputSignal<SuiProgressBarColor>;
     readonly size: _angular_core.InputSignal<SuiProgressBarSize>;
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
     readonly linkClick: _angular_core.OutputEmitterRef<void>;
+    /** Config resuelta del link (string → { label }, rel automático). */
+    protected readonly linkCfg: _angular_core.Signal<SuiLinkConfig | null>;
     readonly clampedValue: _angular_core.Signal<number>;
     /** Texto del % mostrado: override explícito o `${value}%`. */
+    /** Mostrar el bloque de % (percentage !== false). */
+    readonly showPercent: _angular_core.Signal<boolean>;
     readonly percentLabel: _angular_core.Signal<string>;
     onLinkClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiProgressBarLabel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiProgressBarLabel, "sui-progress-bar-label", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "showPercentage": { "alias": "showPercentage"; "required": false; "isSignal": true; }; "percentageText": { "alias": "percentageText"; "required": false; "isSignal": true; }; "showBottom": { "alias": "showBottom"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "showLink": { "alias": "showLink"; "required": false; "isSignal": true; }; "linkLabel": { "alias": "linkLabel"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "linkClick": "linkClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiProgressBarLabel, "sui-progress-bar-label", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "percentage": { "alias": "percentage"; "required": false; "isSignal": true; }; "showBottom": { "alias": "showBottom"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "linkClick": "linkClick"; }, never, never, true, never>;
 }
 
 type SuiRadioValue = string | number | null;
@@ -7552,7 +7871,7 @@ declare class SuiRadio {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiRadio, "sui-radio", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "standaloneChecked": { "alias": "standaloneChecked"; "required": false; "isSignal": true; }; }, { "standaloneChecked": "standaloneCheckedChange"; }, never, never, true, never>;
 }
 
-type SuiRadioCardType = 'basic' | 'left-icon' | 'avatar';
+type SuiRadioCardType = 'basic' | 'left-icon' | 'avatar' | 'card-provider' | 'brand' | 'company';
 /**
  * SUI Radio Card — SUI Design System 2.0
  *
@@ -7671,7 +7990,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<"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>;
+    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
@@ -7684,6 +8003,9 @@ declare class SuiRadioCard implements ControlValueAccessor {
      * label. Para los otros types se ignora.
      */
     readonly imageUrl: _angular_core.InputSignal<string | null>;
+    /** Company del sui-brand-logo para type='brand' (Figma 515:4383 — logo 40px).
+        Para logos fuera del catálogo, usar `imageUrl` (fallback circular). */
+    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>;
     /** Badge junto al label — string shorthand ('NEW') o SuiBadgeConfig
         (label + color/variant/size, tipado como sui-badge). null = sin badge. */
     readonly badge: _angular_core.InputSignal<string | SuiBadgeConfig | null>;
@@ -7712,7 +8034,81 @@ declare class SuiRadioCard implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiRadioCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiRadioCard, "sui-radio-card", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "emoji": { "alias": "emoji"; "required": false; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "selected": "selected"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiRadioCard, "sui-radio-card", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "emoji": { "alias": "emoji"; "required": false; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "selected": "selected"; }, never, never, true, never>;
+}
+
+/**
+ * SUI Radio Label — SUI Design System 2.0
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Component set: 515:4282 ("Radio Label [1.1]") — 8 variants
+ *   Active(off/on) × Description(off/on) × Flip(off/on)
+ *
+ * Anatomía IDÉNTICA a sui-checkbox-label (misma familia label en Figma):
+ *   Container         flex gap-8 items-start · radio 20×20 shrink-0
+ *   description=off → fila gap-4: Label (14/20 Regular) + Sublabel + Badge
+ *   description=on  → columna gap-10: Title (Label 14/20 MEDIUM + Sublabel +
+ *                     Badge) · Description 12/16 sub-600 · Link Button 12/16
+ *   Flip            → radio a la derecha (CSS order, DOM order estable)
+ *
+ * Semántica de GRUPO (patrón sui-radio-card, NO el CVA boolean del checkbox):
+ *   - `value` requerido; dentro de <sui-radio-group> el group manda
+ *     (group.value() === value() ⇒ checked; click ⇒ group.select(value)).
+ *   - Standalone: model two-way `checked` + output `selected`.
+ *   - El sui-radio interno es SOLO visual (pointer-events none en SCSS):
+ *     todos los clicks/teclas los maneja el host — una sola fuente de
+ *     selección, sin doble-toggle.
+ *
+ * A11y: host role="radio" + aria-checked + Space/Enter seleccionan.
+ * iOS WKWebView fix: touchstart/touchend en host (SUI canon).
+ *
+ * Usage:
+ *   <sui-radio-group [(ngModel)]="plan">
+ *     <sui-radio-label value="free"  label="Freemium" />
+ *     <sui-radio-label value="pro"   label="Pro" sublabel="(recomendado)"
+ *       badge="NEW" description="Facturación mensual."
+ *       [link]="{ label: 'Ver precios', href: '/precios' }" />
+ *   </sui-radio-group>
+ */
+declare class SuiRadioLabel {
+    private readonly group;
+    /** Valor que representa esta opción dentro del grupo. */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Texto principal del label. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Sublabel opcional (12/16 sub-600 al lado del label). */
+    readonly sublabel: _angular_core.InputSignal<string | null>;
+    /** Descripción opcional debajo del title (variant "with description"). */
+    readonly description: _angular_core.InputSignal<string | null>;
+    /** Badge junto al label — string shorthand ('NEW') o SuiBadgeConfig
+        (label + color/variant/size). null = sin badge. */
+    readonly badge: _angular_core.InputSignal<string | SuiBadgeConfig | null>;
+    protected readonly badgeCfg: _angular_core.Signal<SuiBadgeConfig | null>;
+    /** Link Button bajo la descripción — string shorthand (solo label, emite
+     *  `linkClick`) o SuiLinkConfig { label, href?, target?, rel? }: con href
+     *  renderiza <a> real; rel automático 'noopener noreferrer' para _blank. */
+    readonly link: _angular_core.InputSignal<string | SuiLinkConfig | null>;
+    /** Config resuelta del link (string → { label }, rel automático). */
+    protected readonly linkCfg: _angular_core.Signal<SuiLinkConfig | null>;
+    /** Si true, invierte orden: [content] [radio] (radio a la derecha). */
+    readonly flip: _angular_core.InputSignal<boolean>;
+    /** Deshabilita el radio + wrapper. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Standalone mode (sin group): two-way binding del estado checked. */
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    /** Emite el value cuando se selecciona. */
+    readonly selected: _angular_core.OutputEmitterRef<string>;
+    /** Click en el Link Button (stop-propagation interno — no selecciona). */
+    readonly linkClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    /** Checked resuelto: group-driven > standalone. */
+    readonly isChecked: _angular_core.Signal<boolean>;
+    onLabelClick(event: MouseEvent): void;
+    onKeySelect(event: Event): void;
+    private select;
+    onLinkClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiRadioLabel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiRadioLabel, "sui-radio-label", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "flip": { "alias": "flip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "selected": "selected"; "linkClick": "linkClick"; }, never, never, true, never>;
 }
 
 declare class SuiRadioGroup implements ControlValueAccessor {
@@ -8099,8 +8495,8 @@ type SuiSelectSize = 'xsmall' | 'small' | 'medium';
  *   - brand     → 🎗️ logo/thumbnail (placeholder: award-line)
  *   - company   → 🏢 logo/thumbnail (placeholder: building-line)
  *
- * El default `'basic'` NO renderea left-icon a menos que `leftIcon` esté
- * activado o se proyecte `[slot=leading]` — preserva la API previa.
+ * El default `'basic'` NO renderea left-icon a menos que `leadingIcon` esté
+ * activado (true o string) o haya imageUrl/flag — el slot es opt-in.
  */
 type SuiSelectType = 'basic' | 'country' | 'avatar' | 'provider' | 'brand' | 'company';
 interface SuiSelectOption<T = any> {
@@ -8136,10 +8532,11 @@ interface SuiSelectOption<T = any> {
  * @input options: SuiSelectOption<T>[]
  *
  * @input type — left-decoration kind (basic/country/avatar/provider/brand/company)
- * @input leftIcon — activa el slot de left-decoration (default false: opt-in)
- * @input leadingIcon — RemixIcon name custom para el left slot (override del default por type)
+ * @input leadingIcon — left-decoration: true = icono default por type, string =
+ *        RemixIcon custom, false = sin icono (default: opt-in)
  * @input imageUrl — imagen del left slot cuando hay value (avatar/brand/provider/company logo)
- * @input badge — texto del badge inline entre value y chevron (null = sin badge)
+ * @input badge — badge inline entre value y chevron: string shorthand o
+ *        SuiBadgeConfig { label, color?, variant?, size? }. null = sin badge.
  * Slot proyectado: `[slot=leading]` → left-decoration totalmente custom (gana sobre todo)
  *
  * @model value: T | null — two-way con FormControl via CVA
@@ -8151,7 +8548,8 @@ interface SuiSelectOption<T = any> {
  *     (basic=flashlight, country=global, avatar=user, provider=bank-card-rect).
  *   - badge: confirmado decorativo en el DS (px-8 py-2, radius-full,
  *     bg state/information/lighter, text state/information/base 12/16 medium).
- *     Alimentado por el input `badge` (string) — no hay signal interno.
+ *     Renderizado con <sui-badge> real — defaults orange/lighter/medium (brand
+ *     naranja, DECISIONES.md §1) replican pixel-exacto el chip del Figma.
  */
 declare class SuiSelect<T = any> implements ControlValueAccessor {
     readonly size: _angular_core.InputSignal<SuiSelectSize>;
@@ -8164,16 +8562,18 @@ declare class SuiSelect<T = any> implements ControlValueAccessor {
     readonly hint: _angular_core.InputSignal<string | null>;
     /** Tipo de left-decoration del trigger (Figma Select[1.1] Type variant). */
     readonly type: _angular_core.InputSignal<SuiSelectType>;
-    /** Activa el slot de left-decoration. Default false (opt-in, preserva API previa). */
-    readonly leftIcon: _angular_core.InputSignal<boolean>;
-    /** RemixIcon name custom para el left slot (override del default-por-type). */
-    readonly leadingIcon: _angular_core.InputSignal<string | null>;
+    /** Left-decoration del trigger — true = icono default por type, string =
+        RemixIcon custom, false = sin icono (default: opt-in). Consolida el par
+        leftIcon (boolean) + leadingIcon (string) previo. */
+    readonly leadingIcon: _angular_core.InputSignal<string | boolean>;
     /** sui-flag name para `type="country"` (override; sino el option selected puede traerla). */
     readonly flag: _angular_core.InputSignal<"abkhazia" | "afghanistan" | "aland-islands" | "albania" | "algeria" | "american-samoa" | "andorra" | "angola" | "anguilla" | "antigua-and-barbuda" | "argentina" | "armenia" | "aruba" | "australia" | "austria" | "azerbaijan" | "azores-islands" | "bahamas" | "bahrain" | "balearic-islands" | "bangladesh" | "barbados" | "basque-country" | "belarus" | "belgium" | "belize" | "benin" | "bermuda" | "bhutan" | "bolivia" | "bonaire" | "bosnia-and-herzegovina" | "botswana" | "brazil" | "british-columbia" | "british-indian-ocean-territory" | "british-virgin-islands" | "brunei" | "bulgaria" | "burkina-faso" | "burundi" | "cambodia" | "cameroon" | "canada" | "canary-islands" | "cape-verde" | "cayman-islands" | "central-african-republic" | "ceuta" | "chad" | "chile" | "china" | "christmas-island" | "cocos-island" | "colombia" | "comoros" | "cook-islands" | "corsica" | "costa-rica" | "croatia" | "cuba" | "curacao" | "cyprus" | "czech-republic" | "democratic-republic-of-congo" | "denmark" | "djibouti" | "dominica" | "dominican-republic" | "east-timor" | "ecuador" | "egypt" | "el-salvador" | "england" | "equatorial-guinea" | "eritrea" | "estonia" | "ethiopia" | "european-union" | "falkland-islands" | "faroe-islands" | "fiji" | "finland" | "france" | "french-polynesia" | "gabon" | "galapagos-islands" | "gambia" | "georgia" | "germany" | "ghana" | "gibraltar" | "greece" | "greenland" | "grenada" | "guam" | "guatemala" | "guernsey" | "guinea-bissau" | "guinea" | "guyana" | "haiti" | "hawaii" | "honduras" | "hong-kong" | "hungary" | "iceland" | "india" | "indonesia" | "iran" | "iraq" | "ireland" | "isle-of-man" | "israel" | "italy" | "ivory-coast" | "jamaica" | "japan" | "jersey" | "jordan" | "kazakhstan" | "kenya" | "kiribati" | "kosovo" | "kuwait" | "kyrgyzstan" | "laos" | "latvia" | "lebanon" | "lesotho" | "liberia" | "libya" | "liechtenstein" | "lithuania" | "luxembourg" | "macao" | "madagascar" | "madeira" | "malawi" | "malaysia" | "maldives" | "mali" | "malta" | "marshall-island" | "martinique" | "mauritania" | "mauritus" | "melilla" | "mexico" | "micronesia" | "moldova" | "monaco" | "mongolia" | "montenegro" | "montserrat" | "morocco" | "mozambique" | "myanmar" | "namibia" | "nato" | "nauru" | "nepal" | "netherlands" | "new-zealand" | "nicaragua" | "niger" | "nigeria" | "niue" | "norfolk-island" | "north-korea" | "northern-cyprus" | "northern-marianas-islands" | "norway" | "oman" | "orkney-islands" | "ossetia" | "pakistan" | "palau" | "palestine" | "panama" | "papua-new-guinea" | "paraguay" | "peru" | "philippines" | "pitcairn-islands" | "poland" | "portugal" | "puerto-rico" | "qatar" | "rapa-nui" | "republic-of-macedonia" | "republic-of-the-congo" | "romania" | "russia" | "rwanda" | "saba-island" | "sahrawi-arab-democratic-republic" | "saint-kitts-and-nevis" | "samoa" | "san-marino" | "sao-tome-and-prince" | "sardinia" | "saudi-arabia" | "scotland" | "senegal" | "serbia" | "seychelles" | "sierra-leone" | "singapore" | "sint-eustatius" | "sint-maarten" | "slovakia" | "slovania" | "solomon-islands" | "somalia" | "somaliland" | "south-africa" | "south-korea" | "south-sudan" | "spain" | "sri-lanka" | "st-barts" | "st-lucia" | "st-vincent-and-the-grenadines" | "sudan" | "suriname" | "swaziland" | "sweden" | "switzerland" | "syria" | "taijikistan" | "taiwan" | "tanzania" | "thailand" | "tibet" | "togo" | "tokelau" | "tonga" | "transnistria" | "trinidad-and-tobago" | "tunisia" | "turkey" | "turkmenistan" | "turks-and-caicos" | "tuvalu" | "uganda" | "ukraine" | "united-arab-emirates" | "united-kingdom" | "united-nations" | "united-states" | "uruguay" | "uzbekistan" | "vanuatu" | "vatican-city" | "venezuela" | "vietnam" | "virgin-islands" | "wales" | "yemen" | "zambia" | "zimbabwe" | null>;
     /** Imagen del left slot cuando hay value (avatar/brand/provider/company logo). */
     readonly imageUrl: _angular_core.InputSignal<string | null>;
-    /** Texto del badge inline entre value y chevron (null = sin badge). */
-    readonly badge: _angular_core.InputSignal<string | null>;
+    /** Badge inline entre value y chevron — string shorthand ('New') o
+        SuiBadgeConfig (label + color/variant/size). null = sin badge. */
+    readonly badge: _angular_core.InputSignal<string | SuiBadgeConfig | null>;
+    protected readonly badgeCfg: _angular_core.Signal<SuiBadgeConfig | null>;
     /** Texto secundario del label (ej. "Optional", "Required") */
     readonly sublabel: _angular_core.InputSignal<string | null>;
     /** Muestra asterisco rojo en el label */
@@ -8194,8 +8594,11 @@ declare class SuiSelect<T = any> implements ControlValueAccessor {
      * provider=bank-card, brand=award, company=building).
      */
     private readonly _defaultIconByType;
-    /** Icono efectivo del left slot: custom > default-por-type. */
+    /** Icono efectivo del left slot: string custom > default-por-type (true). */
     readonly leadingIconName: _angular_core.Signal<string>;
+    /** Muestra el slot de left-decoration: leadingIcon activo (true o string)
+        o presencia de imageUrl/flag. */
+    readonly showLeading: _angular_core.Signal<boolean>;
     /** Muestra la imagen (avatar/logo) en vez del ícono cuando hay imageUrl. */
     readonly showLeadingImage: _angular_core.Signal<boolean>;
     /** Trigger element — pasado al sui-dropdown-menu como [origin]. */
@@ -8221,7 +8624,7 @@ declare class SuiSelect<T = any> implements ControlValueAccessor {
     setDisabledState(isDisabled: boolean): void;
     private _moveHighlight;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiSelect<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiSelect<any>, "sui-select", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "flag": { "alias": "flag"; "required": false; "isSignal": true; }; "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["[slot=leading]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiSelect<any>, "sui-select", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "flag": { "alias": "flag"; "required": false; "isSignal": true; }; "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["[slot=leading]"], true, never>;
 }
 
 interface SuiSidebarItem {
@@ -8261,6 +8664,30 @@ interface SuiSidebarItem {
     tooltip?: string;
 }
 type SuiSidebarMobileMode = 'drawer' | 'sheet';
+/** Config del brand header (logo + nombre + subtítulo). Patrón objeto, como `profile`. */
+interface SuiSidebarBrandConfig {
+    /** Nombre de la marca / workspace en el header */
+    name: string;
+    /** Texto secundario debajo del nombre (ej. "HR Management" o "SUPERADMIN") */
+    subtitle?: string;
+    /**
+     * Cuando true, el subtitle se renderiza como <sui-badge variant="filled"
+     * color="orange" size="small"> (típico para roles tipo "SUPERADMIN").
+     * Cuando false (default) → texto plano sub-600.
+     */
+    subtitleAsBadge?: boolean;
+    /** URL de imagen del brand logo (40×40 rounded-full) */
+    logo?: string;
+    /** Fallback (emoji o texto corto) cuando no hay logo */
+    fallback?: string;
+}
+/** Config del search slot (Figma prop search=true). Patrón objeto, como `profile`. */
+interface SuiSidebarSearchConfig {
+    /** Placeholder del input. Default 'Search...'. */
+    placeholder?: string;
+    /** Shortcut pill dentro del search (ej. '⌘1'). Omitir → sin pill. */
+    shortcut?: string;
+}
 interface SuiSidebarProfile {
     name: string;
     avatarUrl?: string;
@@ -8289,29 +8716,23 @@ declare class SuiSidebar {
      *  - 'information': azul --sui-state-information-base (Figma canon SUI, opt-in)
      */
     readonly indicatorColor: _angular_core.InputSignal<SuiSidebarIndicatorColor>;
-    readonly brandName: _angular_core.InputSignal<string>;
-    /** Texto secundario debajo del nombre (ej. "HR Management" o "SUPERADMIN") */
-    readonly brandSubtitle: _angular_core.InputSignal<string | null>;
     /**
-     * Cuando true, el subtitle se renderiza como <sui-badge variant="filled"
-     * color="orange" size="small"> (typical para roles tipo "SUPERADMIN").
-     * Cuando false (default) → texto plano sub-600.
+     * Config del brand header: { name, subtitle?, subtitleAsBadge?, logo?, fallback? }.
+     * null → header sin nombre (solo el placeholder building-line).
      */
-    readonly brandSubtitleAsBadge: _angular_core.InputSignal<boolean>;
-    /** URL de imagen del brand logo (40×40 rounded-full) */
-    readonly brandLogo: _angular_core.InputSignal<string | null>;
-    /** Fallback (emoji o texto corto) cuando no hay logo */
-    readonly brandFallback: _angular_core.InputSignal<string | null>;
+    readonly brand: _angular_core.InputSignal<SuiSidebarBrandConfig | null>;
     /**
      * Muestra el Compact Button del header (expand-up-down-line) — workspace
      * switcher de Figma. Emite (headerButtonClicked) al click. Default false.
      */
     readonly showHeaderButton: _angular_core.InputSignal<boolean>;
-    /** Renderiza el Text Input de búsqueda encima de las secciones. Default false. */
-    readonly searchable: _angular_core.InputSignal<boolean>;
-    readonly searchPlaceholder: _angular_core.InputSignal<string>;
-    /** Shortcut pill dentro del search (ej. '⌘1'). null → sin pill. */
-    readonly searchShortcut: _angular_core.InputSignal<string | null>;
+    /**
+     * Search encima de las secciones:
+     *  - `false` / `null` (default): sin search
+     *  - `true`: search con defaults (placeholder 'Search...', sin shortcut)
+     *  - objeto `{ placeholder?, shortcut? }`: search configurado
+     */
+    readonly search: _angular_core.InputSignal<boolean | SuiSidebarSearchConfig | null>;
     /** Valor del input de búsqueda (2-way). */
     readonly searchValue: _angular_core.ModelSignal<string>;
     readonly items: _angular_core.InputSignal<SuiSidebarItem[]>;
@@ -8369,6 +8790,16 @@ declare class SuiSidebar {
     readonly profileClicked: _angular_core.OutputEmitterRef<void>;
     /** Submit del search input (Enter). Emite el valor actual. */
     readonly searchSubmitted: _angular_core.OutputEmitterRef<string>;
+    /** Brand normalizado — nunca null para simplificar los binds del template. */
+    protected readonly brandCfg: _angular_core.Signal<SuiSidebarBrandConfig>;
+    /**
+     * Search normalizado: null → sin search; objeto con defaults aplicados
+     * (placeholder 'Search...') cuando search=true o config parcial.
+     */
+    protected readonly searchCfg: _angular_core.Signal<{
+        placeholder: string;
+        shortcut: string | null;
+    } | null>;
     /**
      * Resuelve cuándo un item sin route está "activo" via activeRoute.
      * Match por prefijo: '/master/inicio' activa también '/master/inicio/sub'.
@@ -8383,7 +8814,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; }; "brandName": { "alias": "brandName"; "required": false; "isSignal": true; }; "brandSubtitle": { "alias": "brandSubtitle"; "required": false; "isSignal": true; }; "brandSubtitleAsBadge": { "alias": "brandSubtitleAsBadge"; "required": false; "isSignal": true; }; "brandLogo": { "alias": "brandLogo"; "required": false; "isSignal": true; }; "brandFallback": { "alias": "brandFallback"; "required": false; "isSignal": true; }; "showHeaderButton": { "alias": "showHeaderButton"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "searchShortcut": { "alias": "searchShortcut"; "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; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnNavigate": { "alias": "closeOnNavigate"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "mobileMode": { "alias": "mobileMode"; "required": false; "isSignal": true; }; }, { "searchValue": "searchValueChange"; "open": "openChange"; "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; }; "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; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnNavigate": { "alias": "closeOnNavigate"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "mobileMode": { "alias": "mobileMode"; "required": false; "isSignal": true; }; }, { "searchValue": "searchValueChange"; "open": "openChange"; "itemClicked": "itemClicked"; "logoutClicked": "logoutClicked"; "backdropClicked": "backdropClicked"; "headerButtonClicked": "headerButtonClicked"; "profileClicked": "profileClicked"; "searchSubmitted": "searchSubmitted"; }, never, ["[feature-card]"], true, never>;
 }
 
 /**
@@ -8940,6 +9371,20 @@ declare class SuiImgRetry {
  *  (ej. random por visita) y la pase por `[fallbackColor]`. El componente NO
  *  hace random internamente — se mantiene presentacional y puro. */
 declare const SUI_PRODUCT_FALLBACK_COLORS: readonly ["var(--sui-state-information-base)", "var(--sui-state-warning-base)", "var(--sui-state-error-base)", "var(--sui-state-success-base)", "var(--sui-state-feature-base)", "var(--sui-state-highlighted-base)"];
+/** Config de la imagen del producto. El input `image` también acepta string
+ *  shorthand (= solo la `url`, `position` default 50). */
+interface SuiProductCardImage {
+    url: string;
+    /** Encuadre vertical de la imagen (CSS object-position Y, 0–100). Default 50. */
+    position?: number;
+}
+/** Config del fallback sin imagen. */
+interface SuiProductCardFallback {
+    /** `'name'` = banda de color + nombre (default) · `'icon'` = ícono. */
+    variant?: 'name' | 'icon';
+    /** Color de la banda del variant `'name'` (CSS color o `var(--sui-...)`). */
+    color?: string | null;
+}
 declare class SuiProductCard {
     /** Nombre del producto (título de la card + fuente del color del fallback). */
     readonly name: _angular_core.InputSignal<string>;
@@ -8947,10 +9392,10 @@ declare class SuiProductCard {
     readonly description: _angular_core.InputSignal<string>;
     /** Precio numérico; se formatea a 2 decimales. */
     readonly price: _angular_core.InputSignal<number>;
-    /** URL de la imagen. Ausente → se usa `fallbackVariant`. */
-    readonly imageUrl: _angular_core.InputSignal<string | null>;
-    /** Encuadre vertical de la imagen (CSS object-position Y, 0–100). */
-    readonly imagePosition: _angular_core.InputSignal<number>;
+    /** Imagen del producto — string shorthand (solo URL) o SuiProductCardImage
+     *  { url, position? } para fine-tuning del encuadre vertical.
+     *  null → se usa `fallbackVariant`. */
+    readonly image: _angular_core.InputSignal<string | SuiProductCardImage | null>;
     /** false → card atenuada + tag "Agotado", sin botón de agregar. */
     readonly available: _angular_core.InputSignal<boolean>;
     /** Cantidad en el carrito. > 0 → muestra el stepper en vez del botón "+". */
@@ -8959,12 +9404,12 @@ declare class SuiProductCard {
     readonly closed: _angular_core.InputSignal<boolean>;
     /** Prefijo de moneda. */
     readonly currencySymbol: _angular_core.InputSignal<string>;
-    /** Fallback sin imagen: `'name'` = banda de color + nombre; `'icon'` = ícono. */
-    readonly fallbackVariant: _angular_core.InputSignal<"name" | "icon">;
-    /** Color del fallback `'name'` (CSS color o `var(--sui-...)`). Lo decide el
-     *  consumidor (ej. random por visita usando `SUI_PRODUCT_FALLBACK_COLORS`).
-     *  Si no se pasa, cae a un default determinista por nombre (puro, sin random). */
-    readonly fallbackColor: _angular_core.InputSignal<string | null>;
+    /** Fallback sin imagen — `{ variant?, color? }`. `variant`: `'name'` = banda
+     *  de color + nombre (default) · `'icon'` = ícono. `color`: CSS color o
+     *  `var(--sui-...)` para la banda del variant `'name'` (ej. random por visita
+     *  usando `SUI_PRODUCT_FALLBACK_COLORS`); sin color cae a un default
+     *  determinista por nombre (puro, sin random). */
+    readonly fallback: _angular_core.InputSignal<SuiProductCardFallback | null>;
     /** Texto del tag cuando no está disponible. */
     readonly unavailableLabel: _angular_core.InputSignal<string>;
     /** Tap en la card (abrir detalle del producto). */
@@ -8977,19 +9422,24 @@ declare class SuiProductCard {
     readonly decrement: _angular_core.OutputEmitterRef<void>;
     readonly formattedPrice: _angular_core.Signal<string>;
     readonly showStepper: _angular_core.Signal<boolean>;
+    /** Config resuelta de la imagen (string → { url }; `position` default 50).
+     *  null = sin imagen → fallback. */
+    readonly imageCfg: _angular_core.Signal<Required<SuiProductCardImage> | null>;
+    /** Config resuelta del fallback (null → variant `'name'`, sin color explícito). */
+    private readonly fallbackCfg;
     readonly showNamedFallback: _angular_core.Signal<boolean>;
     readonly showIconFallback: _angular_core.Signal<boolean>;
-    /** Color resuelto del fallback `'name'`. Usa `fallbackColor` si el consumidor
+    /** Color resuelto del fallback `'name'`. Usa `fallback.color` si el consumidor
      *  lo pasa; si no, un default DETERMINISTA por nombre (puro, sin `Math.random`
      *  ni efectos → seguro para SSR/hidratación y testeable). La variedad "random
-     *  por visita" la implementa el consumidor pasando `[fallbackColor]`. */
+     *  por visita" la implementa el consumidor pasando `color` en el config. */
     readonly resolvedFallbackColor: _angular_core.Signal<string>;
     onCard(): void;
     onAdd(event: Event): void;
     onInc(event: Event): void;
     onDec(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiProductCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiProductCard, "sui-product-card", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "price": { "alias": "price"; "required": true; "isSignal": true; }; "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "imagePosition": { "alias": "imagePosition"; "required": false; "isSignal": true; }; "available": { "alias": "available"; "required": false; "isSignal": true; }; "quantity": { "alias": "quantity"; "required": false; "isSignal": true; }; "closed": { "alias": "closed"; "required": false; "isSignal": true; }; "currencySymbol": { "alias": "currencySymbol"; "required": false; "isSignal": true; }; "fallbackVariant": { "alias": "fallbackVariant"; "required": false; "isSignal": true; }; "fallbackColor": { "alias": "fallbackColor"; "required": false; "isSignal": true; }; "unavailableLabel": { "alias": "unavailableLabel"; "required": false; "isSignal": true; }; }, { "openDetail": "openDetail"; "add": "add"; "increment": "increment"; "decrement": "decrement"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiProductCard, "sui-product-card", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "price": { "alias": "price"; "required": true; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "available": { "alias": "available"; "required": false; "isSignal": true; }; "quantity": { "alias": "quantity"; "required": false; "isSignal": true; }; "closed": { "alias": "closed"; "required": false; "isSignal": true; }; "currencySymbol": { "alias": "currencySymbol"; "required": false; "isSignal": true; }; "fallback": { "alias": "fallback"; "required": false; "isSignal": true; }; "unavailableLabel": { "alias": "unavailableLabel"; "required": false; "isSignal": true; }; }, { "openDetail": "openDetail"; "add": "add"; "increment": "increment"; "decrement": "decrement"; }, never, never, true, never>;
 }
 
 /**
@@ -9121,7 +9571,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<"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>;
+    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
@@ -9234,7 +9684,13 @@ declare class SuiSwitchLabel implements ControlValueAccessor {
         (label + color/variant/size, tipado como sui-badge). null = sin badge. */
     readonly badge: _angular_core.InputSignal<string | SuiBadgeConfig | null>;
     protected readonly badgeCfg: _angular_core.Signal<SuiBadgeConfig | null>;
-    readonly linkLabel: _angular_core.InputSignal<string | null>;
+    /** Link Button bajo la descripción — string shorthand (solo label, emite
+     *  `linkClick`) o SuiLinkConfig { label, href?, target?, rel? }: con href
+     *  renderiza <a> real; rel automático 'noopener noreferrer' para _blank.
+     *  (Mismo patrón objeto que `badge`/SuiBadgeConfig.) */
+    readonly link: _angular_core.InputSignal<string | SuiLinkConfig | null>;
+    /** Config resuelta del link (string → { label }, rel automático). */
+    protected readonly linkCfg: _angular_core.Signal<SuiLinkConfig | null>;
     /** Si true, invierte orden: [content] [switch] (label a la izquierda). */
     readonly flip: _angular_core.InputSignal<boolean>;
     readonly disabled: _angular_core.InputSignal<boolean>;
@@ -9267,7 +9723,7 @@ declare class SuiSwitchLabel implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiSwitchLabel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiSwitchLabel, "sui-switch-label", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "linkLabel": { "alias": "linkLabel"; "required": false; "isSignal": true; }; "flip": { "alias": "flip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "activeChange": "activeChange"; "linkClick": "linkClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiSwitchLabel, "sui-switch-label", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "flip": { "alias": "flip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "activeChange": "activeChange"; "linkClick": "linkClick"; }, never, never, true, never>;
 }
 
 interface SuiTabChipItem {
@@ -9909,13 +10365,15 @@ declare class SuiTagInput implements ControlValueAccessor {
     readonly error: _angular_core.InputSignal<boolean>;
     readonly errorMessage: _angular_core.InputSignal<string | null>;
     /**
-     * Renderiza el icono trailing del frame "Basic" (Figma `rightIcon`, node 428:4819).
-     * Default: `info-custom-fill` 20×20 coloreado text-soft-400. Para sustituir el
+     * Icono trailing del frame "Basic" (Figma `rightIcon`, node 428:4819).
+     * `true` = icono default `info-custom-fill` 20×20 coloreado text-soft-400;
+     * string = nombre de icono custom; `false` = sin icono. Para sustituir el
      * contenido del slot proyectá markup en `[slot=right]` (equivalente `pickRight`).
+     * (Mismo patrón fusionado que `badge`/`link` de sui-checkbox-label.)
      */
-    readonly rightIcon: _angular_core.InputSignal<boolean>;
-    /** Nombre del icono trailing cuando rightIcon=true y no se proyecta `[slot=right]`. */
-    readonly rightIconName: _angular_core.InputSignal<string>;
+    readonly rightIcon: _angular_core.InputSignal<string | boolean>;
+    /** Nombre resuelto del icono trailing (null = no se renderiza). */
+    protected readonly rightIconCfg: _angular_core.Signal<string | null>;
     readonly label: _angular_core.InputSignal<string | null>;
     readonly sublabel: _angular_core.InputSignal<string | null>;
     readonly required: _angular_core.InputSignal<boolean>;
@@ -9964,7 +10422,7 @@ declare class SuiTagInput implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiTagInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiTagInput, "sui-tag-input", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "rightIconName": { "alias": "rightIconName"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "commaSeparator": { "alias": "commaSeparator"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "maxTags": { "alias": "maxTags"; "required": false; "isSignal": true; }; "addOnBlur": { "alias": "addOnBlur"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "tagAdded": "tagAdded"; "tagRemoved": "tagRemoved"; }, never, ["[slot=right]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiTagInput, "sui-tag-input", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "commaSeparator": { "alias": "commaSeparator"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "maxTags": { "alias": "maxTags"; "required": false; "isSignal": true; }; "addOnBlur": { "alias": "addOnBlur"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "tagAdded": "tagAdded"; "tagRemoved": "tagRemoved"; }, never, ["[slot=right]"], true, never>;
 }
 
 type SuiTagStyle = 'stroke' | 'gray';
@@ -10517,7 +10975,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. */
@@ -10888,5 +11346,5 @@ declare class SuiTooltipPanel {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiTooltipPanel, "sui-tooltip-panel", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "showArrow": { "alias": "showArrow"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, never, never, true, never>;
 }
 
-export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_PRODUCT_FALLBACK_COLORS, SUI_TAB_BAR, SuiAccordion, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiImgRetry, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPeriodRange, SuiPopover, SuiProductCard, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
-export type { CalendarCell, CalendarRow, DatepickerPreset, DatepickerPresetId, SuiAccordionFlipIcon, SuiActivityAvatarRef, SuiActivityFeedItem, SuiActivityFile, SuiActivityFilterState, SuiActivityTask, SuiActivityTaskState, SuiAlertAction, SuiAlertSize, SuiAlertStyle, SuiAlertVariant, SuiAppStoreBadgeAppearance, SuiAppStoreBadgeCompany, SuiAvatarColor, SuiAvatarGroupItem, SuiAvatarSize, SuiAvatarStatus, SuiAvatarTopBadge, SuiBadgeColor, SuiBadgeConfig, SuiBadgeSize, SuiBadgeType, SuiBadgeVariant, SuiBannerStyle, SuiBannerVariant, SuiBrandLogoCompany, SuiBrandLogoSize, SuiBrandLogoStyle, SuiBreadcrumbDivider, SuiBreadcrumbEntry, SuiButtonColor, SuiButtonGroupEntry, SuiButtonGroupItemSize, SuiButtonSize, SuiButtonVariant, SuiCardSize, SuiCardVariant, SuiCheckboxCardType, SuiCheckboxSize, SuiCircularProgressBarColor, SuiCircularProgressBarSize, SuiColorDotColor, SuiCommandMenuItemSize, SuiCommandMenuItemType, SuiCompactAvatarGroupAppearance, SuiCompactAvatarGroupSize, SuiCompactButtonSize, SuiCompactButtonStyle, SuiCompactSelectForInputItem, SuiCompactSelectForInputSize, SuiCompactSelectItem, SuiCompactSelectSize, SuiCompactSelectType, SuiContentCardType, SuiContentDividerItem, SuiContentDividerType, SuiCounterInputSize, SuiDateRange, SuiDatepickerCalendars, SuiDatepickerMode, SuiDayCellType, SuiDividerOrientation, SuiDrawerFooterType, SuiDrawerHeaderSize, SuiDrawerHeaderType, SuiDropdownItemMode, SuiDropdownItemSize, SuiDropdownMenuPopupRole, SuiDropdownMenuPosition, SuiEmojiName, SuiEmojiSize, SuiFancyButtonSize, SuiFancyButtonType, SuiFileIconColor, SuiFileIconSize, SuiFileUploadCardState, SuiFileUploadSize, SuiFilterItemState, SuiFlagName, SuiFlagSize, SuiFormHintSize, SuiFormHintVariant, SuiFormLabelSize, SuiImageUploadProfileAlignment, SuiImageUploadProfileType, SuiImageUploadShape, SuiImageUploadSize, SuiInlineSelectItem, SuiInlineSelectType, SuiInputSize, SuiInputType, SuiIntegrationSwitchAppearance, SuiIntegrationSwitchType, SuiKbdVariant, SuiKeyIconColor, SuiKeyIconSize, SuiKeyIconStyle, SuiLinkButtonSize, SuiLinkButtonVariant, SuiModalIconVariant, SuiModalSize, SuiModalStatusAlignment, SuiNavbarVisibility, SuiNotificationStyle, SuiNotificationTab, SuiNotificationVariant, SuiOtpInputType, SuiPaginationInfoFormat, SuiPaginationSize, SuiPaginationType, SuiPopoverFooter, SuiPopoverPosition, SuiProgressBarColor, SuiProgressBarLabelType, SuiProgressBarSize, SuiRadioCardType, SuiRadioSize, SuiRadioValue, SuiRatingAlignment, SuiRatingAppearance, SuiRatingReviewLink, SuiRatingSize, SuiRatingType, SuiRichEditorAction, SuiRichEditorCommand, SuiRichEditorItemState, SuiRichEditorItemType, SuiRichEditorLayout, SuiSegmentedControlItem, SuiSegmentedControlSize, SuiSelectOption, SuiSelectSize, SuiSelectType, SuiSidebarIndicatorColor, SuiSidebarItem, SuiSidebarMobileMode, SuiSidebarProfile, SuiSliderType, SuiSocialButtonBrand, SuiSocialButtonStyle, SuiStatusBadgeAppearance, SuiStatusBadgeStatus, SuiStepperItem, SuiStepperSize, SuiStepperState, SuiStepperVariant, SuiStoreCardData, SuiSwitchCardType, SuiSwitchSize, SuiTabBar, SuiTabChipItem, SuiTabMenuHorizontalItem, SuiTabMenuHorizontalSize, SuiTabMenuVerticalItem, SuiTabMenuVerticalStyle, SuiTableCellMisc, SuiTableCellPriority, SuiTableColumn, SuiTableSize, SuiTagInputSize, SuiTagStyle, SuiTimeDurationPreset, SuiTimeFormat, SuiTimePeriod, SuiTimePickerItemDirection, SuiTimePickerStatusType, SuiTimeValue, SuiToastAction, SuiToastData, SuiToastItem, SuiToastPosition, SuiToastStyle, SuiToastVariant, SuiTooltipLargeData, SuiTooltipPosition, SuiTooltipSize, SuiTooltipTheme };
+export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_PRODUCT_FALLBACK_COLORS, SUI_TAB_BAR, SuiAccordion, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiImgRetry, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalFooter, SuiModalHeader, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPeriodRange, SuiPopover, SuiProductCard, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRadioLabel, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
+export type { CalendarCell, CalendarRow, DatepickerPreset, DatepickerPresetId, SuiAccordionFlipIcon, SuiActivityAvatarRef, SuiActivityFeedItem, SuiActivityFile, SuiActivityFilterState, SuiActivityTask, SuiActivityTaskState, SuiAlertAction, SuiAlertSize, SuiAlertStyle, SuiAlertVariant, SuiAppStoreBadgeAppearance, SuiAppStoreBadgeCompany, SuiAvatarColor, SuiAvatarConfig, SuiAvatarGroupItem, SuiAvatarSize, SuiAvatarStatus, SuiAvatarTopBadge, SuiBadgeColor, SuiBadgeConfig, SuiBadgeSize, SuiBadgeType, SuiBadgeVariant, SuiBannerStyle, SuiBannerVariant, SuiBrandLogoCompany, SuiBrandLogoSize, SuiBrandLogoStyle, SuiBreadcrumbDivider, SuiBreadcrumbEntry, SuiButtonColor, SuiButtonGroupEntry, SuiButtonGroupItemSize, SuiButtonSize, SuiButtonVariant, SuiCardSize, SuiCardVariant, SuiCheckboxCardType, SuiCheckboxSize, SuiCircularProgressBarColor, SuiCircularProgressBarSize, SuiColorDotColor, SuiCommandMenuItemSize, SuiCommandMenuItemType, SuiCompactAvatarGroupAppearance, SuiCompactAvatarGroupSize, SuiCompactButtonSize, SuiCompactButtonStyle, SuiCompactSelectForInputItem, SuiCompactSelectForInputSize, SuiCompactSelectItem, SuiCompactSelectSize, SuiCompactSelectType, SuiContentCardType, SuiContentDividerItem, SuiContentDividerType, SuiCounterInputSize, SuiDateRange, SuiDatepickerCalendars, SuiDatepickerMode, SuiDayCellType, SuiDividerOrientation, SuiDrawerFooterType, SuiDrawerHeaderSize, SuiDrawerHeaderType, SuiDropdownItemMode, SuiDropdownItemSize, SuiDropdownMenuPopupRole, SuiDropdownMenuPosition, SuiEmojiName, SuiEmojiSize, SuiEmptyStateAction, SuiFancyButtonSize, SuiFancyButtonType, SuiFileIconColor, SuiFileIconSize, SuiFileUploadCardFile, SuiFileUploadCardState, SuiFileUploadSize, SuiFilterItemState, SuiFlagName, SuiFlagSize, SuiFooterButtonConfig, SuiFormHintSize, SuiFormHintVariant, SuiFormLabelSize, SuiImageUploadProfileAlignment, SuiImageUploadProfileLabels, SuiImageUploadProfileType, SuiImageUploadShape, SuiImageUploadSize, SuiInlineSelectItem, SuiInlineSelectType, SuiInputSize, SuiInputType, SuiIntegrationManageConfig, SuiIntegrationSwitchAppearance, SuiIntegrationSwitchType, SuiKbdVariant, SuiKeyIconColor, SuiKeyIconSize, SuiKeyIconStyle, SuiLinkButtonSize, SuiLinkButtonVariant, SuiLinkConfig, SuiModalHeaderVariant, SuiModalIconVariant, SuiModalSize, SuiModalStatusAlignment, SuiNavbarVisibility, SuiNotificationStyle, SuiNotificationTab, SuiNotificationVariant, SuiOtpInputType, SuiPaginationInfoFormat, SuiPaginationSize, SuiPaginationType, SuiPopoverFooter, SuiPopoverPosition, SuiProductCardFallback, SuiProductCardImage, SuiProgressBarColor, SuiProgressBarLabelType, SuiProgressBarSize, SuiRadioCardType, SuiRadioSize, SuiRadioValue, SuiRatingAlignment, SuiRatingAppearance, SuiRatingReviewLink, SuiRatingSize, SuiRatingType, SuiRichEditorAction, SuiRichEditorCommand, SuiRichEditorItemState, SuiRichEditorItemType, SuiRichEditorLayout, SuiSegmentedControlItem, SuiSegmentedControlSize, SuiSelectOption, SuiSelectSize, SuiSelectType, SuiSidebarBrandConfig, SuiSidebarIndicatorColor, SuiSidebarItem, SuiSidebarMobileMode, SuiSidebarProfile, SuiSidebarSearchConfig, SuiSliderType, SuiSocialButtonBrand, SuiSocialButtonStyle, SuiStatusBadgeAppearance, SuiStatusBadgeStatus, SuiStepperItem, SuiStepperSize, SuiStepperState, SuiStepperVariant, SuiStoreCardData, SuiSwitchCardType, SuiSwitchSize, SuiTabBar, SuiTabChipItem, SuiTabMenuHorizontalItem, SuiTabMenuHorizontalSize, SuiTabMenuVerticalItem, SuiTabMenuVerticalStyle, SuiTableCellMisc, SuiTableCellPriority, SuiTableColumn, SuiTableSize, SuiTagInputSize, SuiTagStyle, SuiTimeDurationPreset, SuiTimeFormat, SuiTimePeriod, SuiTimePickerItemDirection, SuiTimePickerStatusType, SuiTimeValue, SuiToastAction, SuiToastData, SuiToastItem, SuiToastPosition, SuiToastStyle, SuiToastVariant, SuiTooltipLargeData, SuiTooltipPosition, SuiTooltipSize, SuiTooltipTheme };