@ajuarezso/sui-design-system 0.7.22 → 0.7.24

package/package.json

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

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

@@ -977,12 +977,12 @@ interface SuiAlertAction {
  *   error   → error-warning-fill
  *   feature → sparkling-fill
  *
- * ⚠️ PENDING VERIFY — Feature status color:
- *   Figma "🚀 Feature" status uses state/faded (gray #7b7b7b) + `magic-fill`
- *   icon (nodes 170:1544 / 170:2996). The SUI project established `feature`
- *   = state/feature (purple #7d52f4) + `sparkling-fill` across sui-banner +
- *   master-preview. Kept purple here to preserve cross-component consistency;
- *   flagged for Anthony in newQuestions. If SUI canon must win, remap
+ * VERIFIED 2026-07-23 (screenshot set 169:2399) — Feature status color:
+ *   Figma "🚀 Feature" confirmed = state/faded (gray) + `magic-fill` icon en
+ *   las 4 columnas del set (filled/light/lighter/stroke); no existe morado en
+ *   el set. The SUI project established `feature` = state/feature (purple
+ *   #7d52f4) + `sparkling-fill` across sui-banner + master-preview. Kept
+ *   purple here as deliberate brand deviation. If SUI canon must win, remap
  *   feature → --sui-state-faded-* + magic-fill in BOTH alert and banner.
  *
  * Sizes (Figma component set 169:2399):
@@ -1921,6 +1921,9 @@ type SuiCheckboxCardType = 'basic' | 'left-icon' | 'avatar' | 'card-provider' |
  *     badge→bordeado con texto disabled-300. CONFIRMADO (262:254/258/259).
  *   - Badge "NEW": variant Light color Information (state/information/light +
  *     dark), NO primary-base. CONFIRMADO (261:3928). Corregido del naranja previo.
+ *     Renderiza un `<sui-badge>` real (homologación familia radio/checkbox card):
+ *     defaults color 'blue' (→ state information, fiel Figma) + variant 'light' +
+ *     size 'small'; la SuiBadgeConfig del consumer puede overridear los tres.
  *   - 6 types completos (basic/left-icon/avatar + card-provider/brand/company via
  *     slot proyectado). CONFIRMADO contra los 24 variants.
  *
@@ -1978,7 +1981,9 @@ declare class SuiCheckboxCard implements ControlValueAccessor {
     /** URL de imagen para type='avatar'. Si falla, fallback a iniciales del label. */
     readonly imageUrl: _angular_core.InputSignal<string | null>;
     /** Badge junto al label — string shorthand ('NEW') o SuiBadgeConfig
-        (label + color/variant/size, tipado como sui-badge). null = sin badge. */
+        (label + color/variant/size, tipado como sui-badge). Renderiza un
+        `<sui-badge>` real; defaults blue/light/small (information azul, fiel
+        Figma 261:3928). null = sin badge. */
     readonly badge: _angular_core.InputSignal<string | SuiBadgeConfig | null>;
     protected readonly badgeCfg: _angular_core.Signal<SuiBadgeConfig | null>;
     /** Indeterminate state (tri-state checkbox). */
@@ -3044,7 +3049,7 @@ declare class SuiFlag {
  *   - SIN border (el input padre tiene su propio border)
  *   - SIN focus ring (el input padre maneja el focus state)
  *   - SIN error state (heredado del input padre)
- *   - X-Small usa flag 16×16 (vs 24×24 del compact-select normal)
+ *   - X-Small usa flag 16×16, medium/small 20×20 (mismo patrón que el compact-select normal)
  *   - Menu matchea trigger width con minWidth=200
  *
  * `ControlValueAccessor` implementado — funciona con `formControlName`.
@@ -3137,7 +3142,7 @@ declare class SuiCompactSelectForInput<T = string> implements ControlValueAccess
  * Specs Figma (sin cambios vs versión anterior):
  *   Sizes: medium 40 (p=10 r=10) / small 36 (p=8 r=8) / xsmall 32 (p=6 r=8)
  *   States: placeholder / filled / hover / focused / disabled / error
- *   Types: basic / icon (RemixIcon 20×20) / country (sui-flag 24×24)
+ *   Types: basic / icon (RemixIcon 20×20) / country (sui-flag 20×20; 16×16 en xsmall)
  *
  * Eventos:
  *   - `(clicked)`: Event — siempre emite cuando el host se clickea (mode 1 + 2)
@@ -6141,6 +6146,9 @@ type SuiInputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | '
  * @input required: boolean — Muestra asterisco rojo en el label
  * @input tooltip: string | null — Tooltip en ícono info del label
  * @input hint: string | null — Mensaje de ayuda debajo del field
+ * @input hintIcon: string | null — Icono Remix del hint neutral (ej. 'information-fill',
+ *   como en el set de Figma 266:5251). null (default) = sin icono. No afecta el
+ *   estado error (sui-form-hint conserva su icono default por variant).
  * @input error: boolean — Activa borde rojo + muestra errorMessage
  * @input errorMessage: string | null — Mensaje de error
  *
@@ -6196,6 +6204,15 @@ declare class SuiInput implements ControlValueAccessor {
     readonly errorMessage: _angular_core.InputSignal<string | null>;
     readonly label: _angular_core.InputSignal<string | null>;
     readonly hint: _angular_core.InputSignal<string | null>;
+    /**
+     * Icono Remix del hint neutral (ej. 'information-fill' ⓘ como en el set de
+     * Figma). null (default) = sin icono — comportamiento previo. Aditivo: en
+     * estado error NO aplica (el hint de error mantiene su icono default).
+     */
+    readonly hintIcon: _angular_core.InputSignal<string | null>;
+    /** Icon efectivo para sui-form-hint: solo aplica al hint neutral. En error se
+        pasa undefined → sui-form-hint usa su default por variant (information-fill). */
+    protected readonly _resolvedHintIcon: _angular_core.Signal<string | undefined>;
     readonly autocomplete: _angular_core.InputSignal<string | null>;
     /** Texto secundario del label (ej. "Optional", "Required") */
     readonly sublabel: _angular_core.InputSignal<string | null>;
@@ -6346,7 +6363,7 @@ declare class SuiInput implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiInput, "sui-input", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "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; }; "autocomplete": { "alias": "autocomplete"; "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; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "paste": { "alias": "paste"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "leadingDivider": { "alias": "leadingDivider"; "required": false; "isSignal": true; }; "trailingDivider": { "alias": "trailingDivider"; "required": false; "isSignal": true; }; "leadingControl": { "alias": "leadingControl"; "required": false; "isSignal": true; }; "trailingControl": { "alias": "trailingControl"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["[data-slot=start]", "[data-slot=end]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiInput, "sui-input", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "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; }; "hintIcon": { "alias": "hintIcon"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "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; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "paste": { "alias": "paste"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "leadingDivider": { "alias": "leadingDivider"; "required": false; "isSignal": true; }; "trailingDivider": { "alias": "trailingDivider"; "required": false; "isSignal": true; }; "leadingControl": { "alias": "leadingControl"; "required": false; "isSignal": true; }; "trailingControl": { "alias": "trailingControl"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["[data-slot=start]", "[data-slot=end]"], true, never>;
 }
 
 type SuiIntegrationSwitchType = 'horizontal' | 'vertical';
@@ -6512,10 +6529,10 @@ declare class SuiIntegrationSwitch implements ControlValueAccessor {
  *     padding: 2px 6px
  *   Icon content (16×16):
  *     padding: 2px (all sides)
- *     color: inherit (consumer del sui-icon decide)
+ *     color: var(--text/sub-600) #5c5c5c (forzado por el scss sobre el sui-icon proyectado)
  *
- * Auto-detección: si el contenido proyectado contiene `<sui-icon>` se asume
- * variant `subtle` por default; consumer puede override con `[variant]="default"`.
+ * El variant NO se auto-detecta: default es `default`; para el caso icono el
+ * consumer debe pasar `variant="subtle"` explícito.
  *
  * Uso:
  *   <sui-kbd>⌘K</sui-kbd>                                  <!-- text default -->
@@ -7301,9 +7318,13 @@ type SuiNotificationStyle = 'filled' | 'light' | 'lighter' | 'stroke';
  *      derecha (input `showMore` → output `moreClicked`).
  * ────────────────────────────────────────────────────────────────────────────
  *
- * PENDING VERIFY (MCP Figma caído en la homologación 2026-05-29; specs tomados
- * de .claude/sui-audit/reports.json que SÍ tuvo acceso a Figma):
- *   - File card: bg-white, border stroke/soft-200, radius-8, shadow xs.
+ * VERIFIED 2026-07-23 (screenshot MCP del set 4308:731 — sella el PENDING
+ * VERIFY heredado de la homologación 2026-05-29):
+ *   - Items de panel = filas PLANAS: sin border/shadow propios (el radius-12
+ *     solo se manifiesta en el fill bg-weak-50 del hover, redondeado en Figma).
+ *   - File card: hug-content con icono attachment-line 16 + "(4mb)" muted
+ *     (soft-400); bg-white, border stroke/soft-200, radius-8, shadow xs.
+ *   - Message bubble: hug-content (radius asimétrico tl4 tr8 br10 bl8 OK).
  *   - Button-type: Deny stroke + Approve filled, px-10 py-6 radius-8.
  *   - Company logo: 16×16 circle, antes del texto de descripción.
  *   - Hover: bg --sui-bg-weak-50 (#f7f7f7) + more-2-line 20px compact radius-6.
@@ -7486,13 +7507,15 @@ declare class SuiOtpInput implements ControlValueAccessor {
  * SUI Page Header — header reutilizable para cada page del empresa.
  *
  * Reemplaza al topbar contextual en mobile. Cada page lo coloca arriba del
- * todo (antes de cualquier contenido). Absorbe el safe-area-inset-top y
- * deja un espacio visual coherente entre pages.
+ * todo (antes de cualquier contenido) y deja un espacio visual coherente
+ * entre pages. El safe-area-inset-top lo maneja el layout/container de la
+ * página, NO este componente (padding vertical fijo, sin env()).
  *
  * Slots:
- *   - default     → contenido principal (cards, listas, etc.)
  *   - [slot=actions] → botones a la derecha (siempre visibles, no scrollean
  *                     con la página). Útil para "Guardar", "Agregar", filtros.
+ *   No hay slot default: el contenido de la página va DESPUÉS del header,
+ *   no dentro — cualquier contenido proyectado sin slot="actions" se descarta.
  *
  * Inputs:
  *   - title:    string visible (h1)
@@ -7994,13 +8017,13 @@ type SuiRadioCardType = 'basic' | 'left-icon' | 'avatar' | 'card-provider' | 'br
  *     (el component_set no publica variant Focus distinto del Hover/Active). Es
  *     extensión de a11y del proyecto, no rompe fidelidad visual con Figma.
  *
- * NOT IMPLEMENTED (Figma types sin uso real en el proyecto — over-engineering NOW):
- *   - type='card-provider' (515:4374): slot 32×24 radius-4 para logo de tarjeta.
- *   - type='brand'         (515:4383): slot 40×40 logo externo sin frame.
- *   - type='company'       (515:4392): slot 40×40 circle con bg color del consumer.
- *     Cero consumers en el repo (los type=brand/company existentes son de
- *     sui-command-menu-item, no de este card). Agregarlos implica content
- *     projection + assets de marca. Diferido — agregar cuando surja el caso.
+ * IMPLEMENTED 2026-07-21 (types completos del set Figma):
+ *   - type='card-provider' (515:4374): slot 32×24 radius-4 para logo de tarjeta
+ *     (imageUrl).
+ *   - type='brand'         (515:4383): slot 40×40 logo externo sin frame
+ *     (sui-brand-logo via [brand], o imageUrl circular de fallback).
+ *   - type='company'       (515:4392): slot 40×40 circle radius-full
+ *     (imageUrl, fallback sui-avatar con iniciales del label).
  *
  * Form integration:
  *   - Implementa ControlValueAccessor: usable con [(ngModel)] / [formControl].
@@ -8223,6 +8246,8 @@ interface SuiRatingCellView {
  *     + border stroke/soft-200 + regular-shadow x-small (0 1px 2px rgba(10,13,20,.03));
  *     hover → bg weak-50 sin border ni shadow. Es la versión "tarjeta" del input de
  *     estrellas/corazones (distinta del bare 'inline' y del segmented 'bar').
+ *     Estado EMPTY: glyph RELLENO gris sólido ("Empty Filled" star-fill/heart-3-fill
+ *     en stroke/sub-300), NO el outline del inline — ver cellIconName().
  *   - 'bar'      → 5 cells horizontales con border + padding (matches Rating Bar).
  *     Usado para input formulario (modal review en order-tracking, rate-order
  *     CSAT survey). Permite type='emoji'|'number' además de star/heart.
@@ -8241,9 +8266,10 @@ interface SuiRatingCellView {
  *   selected agrega bg weak-50. emoji: solo selected sale de grayscale.
  *
  * PENDING VERIFY (revisar en device / master-preview tras deploy):
- *   - 'cell' appearance: confirmar visual contra Figma 532:4160 con MCP sano
- *     (padding 12 / radius 10 / icon 32 / shadow x-small). Pendiente: el screenshot
- *     no se pudo verificar al implementar (Figma MCP caído por timeout).
+ *   - 'cell' appearance: screenshot MCP de 532:4160 verificado 2026-07-23 —
+ *     confirmó que el empty es glyph RELLENO gris (fix aplicado en cellIconName).
+ *     Queda pendiente medir chrome fino en device (padding 12 / radius 10 /
+ *     icon 32 / shadow x-small).
  *   - 'bar-area' homologado a Figma 535:5057: card 132px = bar 36px + input 96px;
  *     textarea resize:none, min-height 72px, top-aligned (text node y=12 en Figma)
  *   - hover 'Empty Filled' star/heart: glyph relleno sólido en stroke/sub-300
@@ -8373,6 +8399,15 @@ declare class SuiRating implements ControlValueAccessor {
     setDisabledState(isDisabled: boolean): void;
     /** Map del fill al icon name de Remix. */
     iconName(type: SuiRatingType, fill: 'empty' | 'half' | 'full'): string;
+    /**
+     * Icon name para el template iconCell (appearances 'inline' y 'cell').
+     * En appearance='cell' el estado EMPTY renderiza el glyph RELLENO gris
+     * (star-fill / heart-3-fill en stroke/sub-300) — Figma Rating Cell 532:4160
+     * usa el atom "Empty Filled" (relleno sólido neutro), NO el outline
+     * "Empty Line" del inline. Verificado contra screenshot MCP 2026-07-23.
+     * inline mantiene el outline (Rating Items 532:4137 / Rating Review 532:4340).
+     */
+    cellIconName(fill: 'empty' | 'half' | 'full'): string;
     /**
      * Icon name para una celda de bar/bar-area según su estado visual (Figma 535:4535).
      * El glyph de HOVER ("Empty Filled") y SELECTED ("Full") es el mismo relleno sólido
@@ -8613,7 +8648,8 @@ declare class SuiSelect<T = any> implements ControlValueAccessor {
         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). */
+    /** sui-flag name para `type="country"` — se muestra SOLO con selección hecha;
+        en estado vacío el left slot renderea el globo (global-line), fiel a Figma. */
     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>;
@@ -9559,10 +9595,12 @@ type SuiSwitchCardType = 'basic' | 'left-icon' | 'avatar' | 'card-provider' | 'b
  *   - Sublabel: 12/16 regular sub-600
  *   - Description: 12/16 regular sub-600
  *   - Title row gap: 4px, Body gap: 4px
- *   - Built-in NEW badge: padding 2/8, radius 999, bg state/information/light, text
- *     state/information/dark, 11/12 500 0.22px uppercase. Color INFORMATION azul,
- *     fiel a Figma (DECISIONES.md §1: para este badge "se cambió a azul (fiel Figma)";
- *     el naranja de marca aplica solo al active border / focus ring).
+ *   - Badge junto al label: <sui-badge> real honrando SuiBadgeConfig
+ *     (color/variant/size). Defaults blue/light/small = bg state/information/light,
+ *     text state/information/dark, 11/12 500 0.22px uppercase, padding 2/8,
+ *     radius 999 — color INFORMATION azul, fiel a Figma (DECISIONES.md §1: para
+ *     este badge "se cambió a azul (fiel Figma)"; el naranja de marca aplica solo
+ *     al active border / focus ring).
  *
  * LEADING SLOTS (verified vs Figma 2026-05-29, pull per-type design-context):
  *   - basic         → sin leading.
@@ -9595,8 +9633,8 @@ type SuiSwitchCardType = 'basic' | 'left-icon' | 'avatar' | 'card-provider' | 'b
  *   - Switch internal margin-top 2px para baseline align: convención visual.
  *
  * COLOR MAPPING:
- *   #c0d5ff → --sui-state-information-light (NEW badge bg, fiel Figma)
- *   #122368 → --sui-state-information-dark  (NEW badge text, fiel Figma)
+ *   #c0d5ff → --sui-state-information-light (badge default bg, via sui-badge blue/light)
+ *   #122368 → --sui-state-information-dark  (badge default text, via sui-badge blue/light)
  *   No hex hardcoded fuera de los fallbacks de los tokens.
  *
  * Form integration:
@@ -10167,6 +10205,8 @@ interface SuiTabMenuHorizontalItem<T = string> {
 declare class SuiTabMenuHorizontal<T = string> {
     readonly tabs: _angular_core.InputSignal<SuiTabMenuHorizontalItem<T>[]>;
     readonly active: _angular_core.ModelSignal<T | undefined>;
+    /** PENDING spec: hoy solo emite data-sui-size (sin reglas scss) y el set de
+        Figma no tiene eje size. Se conserva por compat de consumers. */
     readonly size: _angular_core.InputSignal<SuiTabMenuHorizontalSize>;
     readonly tabChange: _angular_core.OutputEmitterRef<T>;
     isActive(tab: SuiTabMenuHorizontalItem<T>): boolean;
@@ -11045,6 +11085,11 @@ declare class SuiTimePicker implements ControlValueAccessor {
     protected readonly triggerEl: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
     /** Ref al sui-dropdown-menu interno — para invocar open/close (modo popover). */
     private readonly _menu;
+    /** Columnas scrollables del panel (hora / minuto / periodo) — la query
+        alcanza también la embedded view proyectada al CDK Overlay porque el
+        ng-template se declara en este componente. */
+    private readonly _columnEls;
+    private readonly _injector;
     private _onChange;
     private _onTouched;
     constructor();
@@ -11063,6 +11108,14 @@ declare class SuiTimePicker implements ControlValueAccessor {
     hourLabelOf(item: ColumnItem): string;
     toggle(): void;
     openPopover(): void;
+    /**
+     * Scrollea cada columna (hora / minuto / periodo) para que su opción activa
+     * quede centrada en el viewport de la columna (equivalente a block: 'center').
+     * Instantáneo (sin behavior smooth): al abrir, el panel aparece ya
+     * posicionado. Con step que no contiene el minuto exacto (-1) la columna se
+     * deja en su scroll actual.
+     */
+    private _scrollColumnsToSelection;
     cancel(): void;
     apply(): void;
     /**