@ajuarezso/sui-design-system 0.7.25 → 0.8.0

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

@@ -1320,7 +1320,7 @@ declare class SuiBanner {
 declare const SUI_BRAND_LOGO_COMPANIES: readonly ["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"];
 type SuiBrandLogoCompany = (typeof SUI_BRAND_LOGO_COMPANIES)[number];
 type SuiBrandLogoStyle = 'original' | 'black' | 'white';
-type SuiBrandLogoSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SuiBrandLogoSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 /**
  * SUI Brand Logo — SUI Design System 2.0
  *
@@ -1818,6 +1818,174 @@ declare class SuiCard {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiCard, "sui-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, {}, never, ["[sui-card-header]", "*", "[sui-card-media]", "[sui-card-footer]"], true, never>;
 }
 
+/**
+ * Colores canon de series de chart — SUI 2.0.
+ * Los 11 colores del set de dots (Figma 2942:9880) + `disabled`
+ * (variant extra que solo existe en el set de legends, Figma 3871:20344:
+ * mismo dot que `light-gray` pero con el label apagado en el legend).
+ */
+type SuiChartLegendColor = 'gray' | 'light-gray' | 'blue' | 'orange' | 'red' | 'green' | 'yellow' | 'purple' | 'sky' | 'pink' | 'teal' | 'disabled';
+/** Orden EXACTO del set de Figma 2942:9880 (11 colores; `disabled` no es un color de serie). */
+declare const SUI_CHART_LEGEND_COLORS: readonly SuiChartLegendColor[];
+/**
+ * Ciclo de auto-asignación de colores para series de chart (usado por
+ * `<sui-chart-legend>` cuando un item no trae color explícito).
+ * NO es canon de Figma (el set no define orden de series): arranca en `blue`
+ * (primera serie de facto del DS) y deja los grises al final para que los
+ * primeros N series de cualquier chart salgan con color.
+ */
+declare const SUI_CHART_SERIES_COLORS: readonly SuiChartLegendColor[];
+/**
+ * Mapa color → hex canónico resuelto (valores de los tokens `--sui-state-*-base`
+ * que Figma bindea en cada variant). Útil para alimentar la MISMA paleta a la
+ * lib de charts del consumer (echarts `series[].color`, etc.) y que el dot de
+ * la leyenda matchee 1:1 el color pintado en la gráfica.
+ */
+declare const SUI_CHART_LEGEND_HEX: Record<SuiChartLegendColor, string>;
+/**
+ * SUI Chart Legend Dot — SUI Design System 2.0
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Node:       2942:9880 "Chart Legend Dots [1.1]" — VERIFIED via MCP
+ *
+ * Átomo decorativo de las leyendas de chart: el punto de color de una serie.
+ * Render 100% CSS (el SVG de Figma es circle fill + stroke blanco + drop
+ * shadow — se replica con background + box-shadow, sin assets).
+ *
+ * EXACT (pulled from Figma 2942:9880 via get_metadata + get_design_context +
+ * SVG del asset del ellipse):
+ *   - 22 variants en figma = 11 colores × 2 sizes (Medium 20 / Small 16)
+ *   - Container: 20×20 (medium) / 16×16 (small)
+ *   - Ellipse SIEMPRE 12×12 centrado (circle r=6) — solo cambia el container
+ *     (medium inset 20% = 4px; small inset 12.5% = 2px)
+ *   - Ring interno blanco: stroke 2px en r=5 (`stroke/white-0`) → core de
+ *     color visible ≈8px + anillo blanco 2px hasta el borde (separa el dot
+ *     del fill del chart en fondos no-blancos)
+ *   - Drop shadow: Figma var `regular-shadow/small` = 0 2px 4px 0 #1b1c1d0a
+ *     (SIN token en la lib — solo existen regular-shadow x-small y medium;
+ *     se usa el valor EXACT literal en el scss)
+ *
+ * Color tokens (bound en Figma, verificados en src/styles/sui-tokens.scss):
+ *   gray       → --sui-state-faded-base        (#7b7b7b)
+ *   light-gray → --sui-icon-disabled-300       (#d1d1d1)
+ *   blue       → --sui-state-information-base  (#335cff)
+ *   orange     → --sui-state-warning-base      (#fa7319)
+ *   red        → --sui-state-error-base        (#fb3748)
+ *   green      → --sui-state-success-base      (#1fc16b)
+ *   yellow     → --sui-state-away-base         (#f6b51e)
+ *   purple     → --sui-state-feature-base      (#7d52f4)
+ *   sky        → --sui-state-verified-base     (#47c2ff)
+ *   pink       → --sui-state-highlighted-base  (#fb4ba3)
+ *   teal       → --sui-state-stable-base       (#22d3bb)
+ *   disabled   → --sui-icon-disabled-300       (#d1d1d1, igual a light-gray)
+ *
+ * `customColor` acepta cualquier CSS color (hex de una paleta echarts custom)
+ * y sobreescribe el preset — mismo patrón que `customHex` de sui-color-dot.
+ *
+ * A11y: decorativo puro (aria-hidden). El significado lo lleva el label del
+ * `<sui-chart-legend>` que lo compone.
+ *
+ * Usage:
+ *   <sui-chart-legend-dot color="blue" />
+ *   <sui-chart-legend-dot color="green" size="small" />
+ *   <sui-chart-legend-dot [customColor]="'#8b5cf6'" />
+ */
+declare class SuiChartLegendDot {
+    /** Color canon de la serie. Default `gray` (variant default del set Figma). */
+    readonly color: _angular_core.InputSignal<SuiChartLegendColor>;
+    /** Size del container: `medium` 20×20 / `small` 16×16. El dot es 12×12 en ambos. */
+    readonly size: _angular_core.InputSignal<"small" | "medium">;
+    /**
+     * CSS color custom (override del preset) para series fuera de la paleta
+     * canon — ej. colores de una paleta echarts propia. Si presente, ignora
+     * `color` a nivel visual.
+     */
+    readonly customColor: _angular_core.InputSignal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiChartLegendDot, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiChartLegendDot, "sui-chart-legend-dot", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "customColor": { "alias": "customColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Item del array `items` del legend.
+ * Contrato "config presente = visible": `value` solo se renderiza si viene.
+ */
+interface SuiChartLegendItem {
+    /** Label de la serie (requerido). */
+    label: string;
+    /**
+     * Color canon del dot. Si se omite (y no hay `customColor`), el legend
+     * auto-asigna ciclando `SUI_CHART_SERIES_COLORS` por índice.
+     */
+    color?: SuiChartLegendColor;
+    /** CSS color custom del dot (override del preset) — paletas echarts propias. */
+    customColor?: string;
+    /** Valor opcional de la serie, renderizado después del label (ej. `42%`, `S/ 1,200`). */
+    value?: string | number;
+    /**
+     * Serie apagada (Figma 3871:20344 "Disabled"): dot gris pálido + label
+     * disabled-300. Gana sobre `color`/`customColor`.
+     */
+    disabled?: boolean;
+}
+/** Shape interno ya resuelto (color efectivo calculado). */
+interface ResolvedLegendItem {
+    data: SuiChartLegendItem;
+    color: SuiChartLegendColor;
+    customColor: string | null;
+}
+/**
+ * SUI Chart Legend — SUI Design System 2.0
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Node:       2942:9934 "Chart Legends [1.1]" — VERIFIED via MCP
+ *
+ * Leyenda de chart: recibe `items[]` y COMPONE `<sui-chart-legend-dot>`
+ * (átomo, Figma 2942:9880) + label por serie — patrón familia breadcrumbs
+ * (sui-breadcrumbs compone sui-breadcrumb-item).
+ *
+ * EXACT (pulled from Figma 2942:9934 via get_metadata + get_design_context):
+ *   - 12 variants en figma = 12 colores (Gray, Light Gray, Blue, Orange, Red,
+ *     Green, Yellow, Purple, Sky, Pink, Teal, Disabled). El set define el
+ *     ITEM individual (dot + label, 70×16); NO define orientaciones — el eje
+ *     `orientation` es prop de layout para consumo real con charts.
+ *   - Item: flex row, gap 4px, dot Small (16×16, ellipse 12×12)
+ *   - Label: Inter Medium 12/16 ls 0 (`Label/X Small`), color text/sub-600
+ *   - Disabled: label text/disabled-300 (#d1d1d1) + dot gris pálido
+ *   - Separación entre items: 24px (layout del frame del set)
+ *
+ * Colores: si un item no trae `color` ni `customColor`, se auto-asigna
+ * ciclando `SUI_CHART_SERIES_COLORS` por índice (arranca en `blue`; NO es
+ * canon Figma, es convención de consumo — el set no define orden de series).
+ *
+ * A11y: host `role="list"` + items `role="listitem"`; el dot es decorativo
+ * (aria-hidden en el átomo).
+ *
+ * Usage:
+ *   <sui-chart-legend [items]="[
+ *     { label: 'Ventas', color: 'blue', value: '64%' },
+ *     { label: 'Devoluciones', color: 'red' },
+ *     { label: 'Archivadas', disabled: true },
+ *   ]" />
+ *
+ *   <!-- auto-colores (blue, orange, red, …) + layout vertical -->
+ *   <sui-chart-legend orientation="vertical" [items]="[
+ *     { label: 'Lima' }, { label: 'Arequipa' }, { label: 'Cusco' },
+ *   ]" />
+ */
+declare class SuiChartLegend {
+    /** Series de la leyenda, en orden de render. */
+    readonly items: _angular_core.InputSignal<readonly SuiChartLegendItem[]>;
+    /**
+     * Disposición de los items: `horizontal` (row con wrap, default) o
+     * `vertical` (columna — leyendas laterales de donut/pie).
+     */
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    /** Items con color efectivo resuelto (disabled > customColor > color > ciclo auto). */
+    protected readonly resolvedItems: _angular_core.Signal<ResolvedLegendItem[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiChartLegend, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiChartLegend, "sui-chart-legend", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 type SuiCheckboxSize = 'small' | 'medium' | 'large' | 'xlarge';
 /**
  * SUI Checkbox — SUI Design System 2.0
@@ -3230,147 +3398,232 @@ declare class SuiCompactSelect<T = string> implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiCompactSelect<any>, "sui-compact-select", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "flag": { "alias": "flag"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "clicked": "clicked"; "selectedChange": "selectedChange"; }, never, never, true, never>;
 }
 
+/**
+ * 5 tipos de leading visual del Content Label (eje 🧩 Type del set de Figma).
+ *   basic     — sin leading; solo el bloque de texto.
+ *   left-icon — sui-key-icon (círculo stroke, icono = 50% del contenedor).
+ *   avatar    — sui-avatar (foto / iniciales) 40/48px según size.
+ *   brand     — sui-brand-logo RAW (sin caja) 40/48px según size.
+ *   company   — sui-avatar con companyLogoSrc (logo de empresa) 40/48px.
+ */
+type SuiContentLabelType = 'basic' | 'left-icon' | 'avatar' | 'brand' | 'company';
+/** Eje 📏 Size del set: Medium (leading 40px) | Large (leading 48px). */
+type SuiContentLabelSize = 'medium' | 'large';
+/**
+ * Dónde vive el badge:
+ *   trailing — a la derecha del row (canon del set Content Label de Figma).
+ *   title    — inline en el title row, después del sublabel (así lo usa el
+ *              Content Card 2942:9503; existe para esa composición).
+ */
+type SuiContentLabelBadgePlacement = 'trailing' | 'title';
+/**
+ * SUI Content Label — SUI Design System 2.0
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — set "Content Label [1.1]" nodo 2945:5539
+ * (FIGMA-VERIFIED 2026-07-23: metadata + design context + screenshot del set).
+ * 10 variants = Type(5: Basic | Left Icon | Avatar | Brand | Company)
+ *             × Size(2: Medium 40 | Large 48).
+ *
+ * Fila de contenido SIN card: [ leading ] [ text block flex-1 ] [ trailing ].
+ * Es la pieza base de la familia content — el Content Card (2942:9503) es este
+ * mismo row envuelto en una card con botón X (ver sui-content-card, que COMPONE
+ * este componente).
+ *
+ * EXACT (del design context de los nodos 2945:5540/5548/5557/5575/5584/5628):
+ *   row            → flex, items-center, gap 14
+ *   text block     → flex-col, gap 4, flex 1 1 0, min-width 0
+ *   title row      → flex, items-center, gap 4
+ *   label medium   → Inter Medium 14/20 ls -0.084px, text/strong-950  (Label/Small)
+ *   label large    → Inter Medium 16/24 ls -0.176px, text/strong-950  (Label/Medium)
+ *   sublabel       → Inter Regular 12/16 ls 0, text/sub-600 (ambos sizes)
+ *   descr medium   → Inter Regular 12/16 ls 0, text/sub-600           (Paragraph/X Small)
+ *   descr large    → Inter Regular 14/20 ls -0.084px, text/sub-600    (Paragraph/Small)
+ *   left-icon      → instancia "Key Icons [1.1]" stroke: medium p-10 + icono 20
+ *                    (= 40px), large p-12 + icono 24 (= 48px), radius-full,
+ *                    border stroke-soft-200, bg white-0, shadow x-small
+ *                    → se compone <sui-key-icon size 40/48 styleVariant="stroke">.
+ *   avatar         → sui-avatar 40px (size lg) / 48px (size xl), radius-full.
+ *   brand          → logo de marca RAW 40/48px (Spotify en el set), SIN caja.
+ *   company        → círculo de empresa 40/48px (Synergy en el set) → sui-avatar
+ *                    con companyLogoSrc / iniciales (mismo patrón del Content Card).
+ *   badge trailing → Badge [1.1] px-8 py-2 radius-full, texto Inter Medium 12/16
+ *                    = <sui-badge size="medium"> (Label/X Small, sin uppercase).
+ *                    Figma: bg state/information/light #c0d5ff + texto
+ *                    state/information/dark #122368 (= sui-badge color "blue");
+ *                    el fallback del proyecto es color 'orange' (branding).
+ *   toggle         → Switch [1.1] 32×20 = <sui-switch size="medium">.
+ *
+ * Token map (Figma → sui-tokens):
+ *   text/strong-950 → --sui-text-strong-950   (label)
+ *   text/sub-600    → --sui-text-sub-600      (sublabel + description)
+ *   Label/Small     → --sui-type-label-sm-*        (label medium)
+ *   Label/Medium    → --sui-type-label-md-*        (label large)
+ *   Paragraph/X Small → --sui-type-paragraph-xs-*  (sublabel + descr medium)
+ *   Paragraph/Small   → --sui-type-paragraph-sm-*  (descr large)
+ *
+ * Extensiones del proyecto (NO son ejes del set de Figma, documentadas):
+ *   - `badgePlacement='title'` — coloca el badge inline en el title row, como lo
+ *     renderiza el Content Card (2942:9503). Default 'trailing' (canon del set).
+ *   - `disabled` — atenúa texto/leading a tokens disabled-300 y bloquea el
+ *     switch. Heredado de la familia (el Content Card lo expone) para que la
+ *     composición no pierda el estado.
+ *
+ * Usage:
+ *   <sui-content-label label="Notificaciones" sublabel="(Push)"
+ *                      description="Recibe avisos de tus pedidos"
+ *                      [toggle]="true" [(toggleChecked)]="pushOn" />
+ *   <sui-content-label type="left-icon" icon="user-6-line" size="large"
+ *                      label="Perfil" description="Datos de tu cuenta" badge="NUEVO" />
+ *   <sui-content-label type="avatar" [avatar]="{ initials: 'AT' }"
+ *                      label="Ana Torres" description="ana@correo.com" />
+ */
+declare class SuiContentLabel {
+    /** Tipo de leading visual. */
+    readonly type: _angular_core.InputSignal<SuiContentLabelType>;
+    /** Size del set: medium (leading 40, Label/Small) | large (leading 48, Label/Medium). */
+    readonly size: _angular_core.InputSignal<SuiContentLabelSize>;
+    /** Label principal — Label/Small (medium) / Label/Medium (large), text-strong-950. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Sublabel inline al lado del label — Paragraph/X Small, text-sub-600. Vacío = no se renderiza. */
+    readonly sublabel: _angular_core.InputSignal<string>;
+    /** Descripción bajo el title row — Paragraph/X Small (medium) / Paragraph/Small (large), text-sub-600. */
+    readonly description: _angular_core.InputSignal<string>;
+    /** RemixIcon name (sin 'ri-') para type=left-icon — va al sui-key-icon. */
+    readonly icon: _angular_core.InputSignal<string | null>;
+    /** Avatar del leading (type=avatar / company) — string shorthand (src directo)
+        o SuiAvatarConfig { src?, initials?, color? }. */
+    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 (logo raw, sin caja). */
+    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 — string shorthand o SuiBadgeConfig. Fallbacks: color 'orange'
+        (branding; el DS de Figma usa 'blue'), variant 'lighter', size 'medium'
+        (Figma: Badge px-8 py-2 texto 12/16 = sui-badge medium). null/'' = sin badge. */
+    readonly badge: _angular_core.InputSignal<string | SuiBadgeConfig | null>;
+    protected readonly badgeCfg: _angular_core.Signal<SuiBadgeConfig | null>;
+    /** Dónde renderiza el badge: 'trailing' (canon Figma) | 'title' (composición Content Card). */
+    readonly badgePlacement: _angular_core.InputSignal<SuiContentLabelBadgePlacement>;
+    /** Muestra el switch trailing (eje Toggle del set). */
+    readonly toggle: _angular_core.InputSignal<boolean>;
+    /** Estado del switch — two-way: [(toggleChecked)]. */
+    readonly toggleChecked: _angular_core.InputSignal<boolean>;
+    readonly toggleCheckedChange: _angular_core.OutputEmitterRef<boolean>;
+    /** Atenúa texto/leading a tokens disabled-300 y bloquea el switch (extensión de familia). */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** True si hay leading visual (todo menos basic). */
+    readonly hasLeading: _angular_core.Signal<boolean>;
+    /** Leading = 40px (medium) / 48px (large) — ancla la altura del row. */
+    protected readonly keyIconSize: _angular_core.Signal<40 | 48>;
+    protected readonly avatarSize: _angular_core.Signal<SuiAvatarSize>;
+    protected readonly brandLogoSize: _angular_core.Signal<SuiBrandLogoSize>;
+    protected onToggleChange(checked: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiContentLabel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiContentLabel, "sui-content-label", 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; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "companyLogoSrc": { "alias": "companyLogoSrc"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgePlacement": { "alias": "badgePlacement"; "required": false; "isSignal": true; }; "toggle": { "alias": "toggle"; "required": false; "isSignal": true; }; "toggleChecked": { "alias": "toggleChecked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "toggleCheckedChange": "toggleCheckedChange"; }, never, never, true, never>;
+}
+
 /**
  * 6 tipos de leading visual del Content Card (SUI 2.0).
  *   basic        — sin leading; sólo text block.
- *   left-icon    — icono RemixIcon en cuadro redondeado 40×40 (stroke + bg-white).
- *   avatar       — sui-avatar (foto / iniciales) tamaño md (40px).
- *   card-provider — visual de tarjeta de pago (brand logo sobre fondo de marca).
- *   brand        — sui-brand-logo (logo de marca conocida) en cuadro 40×40.
- *   company      — sui-avatar con companyLogoSrc (silueta de empresa) 40px.
+ *   left-icon    — sui-key-icon circular 40px (stroke: border + bg-white + shadow).
+ *   avatar       — sui-avatar (foto / iniciales) 40px.
+ *   card-provider — tile de tarjeta de pago 32×24 radius-4 con brand logo.
+ *   brand        — sui-brand-logo RAW 40px (sin caja).
+ *   company      — sui-avatar con companyLogoSrc (logo de empresa) 40px.
  */
 type SuiContentCardType = 'basic' | 'left-icon' | 'avatar' | 'card-provider' | 'brand' | 'company';
 /**
  * SUI Content Card — SUI Design System 2.0
  *
- * ⚠️ REFERENCIA FIGMA NO VERIFICADA (corregido 2026-05-29):
- *   El header anterior afirmaba que el nodo de referencia era `266:2814`. ESO ES
- *   FALSO: `266:2814` es el componente form `Label [1.1]` (confirmado por el
- *   sui-form-label.ts, que lista explícitamente 263:1850 / 266:2814, y por el
- *   screenshot "Label * (Optional)"). NO es el ContentCard.
- *
- *   El fileKey `8p1k72aKKvzJV4XcvPS4VO` que se usaba en todo el DS es el archivo
- *   de ASSETS DE MARCA de SUI (sus únicas páginas son "Cover" y "Brand";
- *   contiene Visa/Mastercard/Stripe/PayPal logos, NO la librería de componentes).
- *   El nodo real del ContentCard / ContentLabel vive en OTRO archivo de SUI
- *   (la librería "Base Components") al que esta conexión MCP no tiene acceso.
- *   Por lo tanto NINGUNA medida de layout, gap, leading o card-provider de este
- *   componente está confirmada pixel-exacta contra Figma — son inferencias del
- *   patrón SUI ContentLabel estándar + la descripción del SUI-FIGMA-CHECKLIST.
- *   Ver PENDING VERIFY al final y la entrada en PENDIENTES.md.
- *
- * Componente NUEVO de la auditoría (descrito en SUI-FIGMA-CHECKLIST.md:86): es el
- * `ContentLabel` (fila de contenido con leading visual + título/subtítulo + badge
- * inline) ENVUELTO en una card:
- *   bg-white-0, border 1px stroke-soft-200, radius 12px, padding 16px,
- *   drop-shadow x-small.
- * Trailing: en lugar del badge/switch del ContentLabel original, una card lleva
- * un botón X de dismiss (close-line 20px via sui-icon) a la derecha.
- *
- * Anatomía (flex row, gap 12, items-center):
- *   [ leading 40×40 ] [ text block (flex-1) ] [ X dismiss 20px ]
- *   text block = Title row (title + sui-badge inline) + Subtitle.
- *
- * 6 tipos de leading (input `type`):
- *   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) 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: 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
- * 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)
- *   stroke/soft-200     → --sui-stroke-soft-200     (#ebebeb, card border + leading border)
- *   text/strong-950     → --sui-text-strong-950     (#171717, title)
- *   text/sub-600        → --sui-text-sub-600        (#5c5c5c, subtitle)
- *   icon/sub-600        → --sui-icon-sub-600        (#5c5c5c, leading icon + X idle)
- *   text/strong-950     → --sui-text-strong-950     (#171717, X icon on hover)
- *   bg/weak-50          → --sui-bg-weak-50          (#f7f7f7, X hover bg)
- *   text/disabled-300   → --sui-text-disabled-300   (#d1d1d1, title cuando disabled)
- *   icon/disabled-300   → --sui-icon-disabled-300   (#d1d1d1, leading/X cuando disabled)
- *   radius-12           → --sui-radius-12 (card)
- *   radius-10           → --sui-radius-10 (leading box icon/brand)
- *   radius-6            → --sui-radius-6  (card-provider box)
- *   shadow x-small      → --sui-shadow-x-small (0 1px 2px 0 #0a0d1408)
- *
- * Typography:
- *   title    → Label/Small     14/20  weight 500  ls -0.006em (--sui-type-label-sm-*)
- *   subtitle → Paragraph/Small  14/20  weight 400  ls -0.006em (--sui-type-paragraph-sm-*)
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — set "Content Card [1.1]" nodo 2942:9503
+ * (FIGMA-VERIFIED 2026-07-23: metadata + design context + screenshot del set;
+ * cierra el ⚠️ "referencia no verificada" del 2026-05-29 — el nodo real SÍ vive
+ * en este fileKey). 6 variants = Type(Basic | Left Icon | Avatar | Card Provider
+ * | Brand | Company), un solo size (row de 40px, frames de ejemplo 360×72).
+ *
+ * Es el Content Label (set 2945:5539) envuelto en una card — este componente
+ * COMPONE <sui-content-label size="medium" badgePlacement="title"> (la deuda
+ * "extraer el row a sui-content-label" del 2026-05-29 quedó saldada).
+ *
+ * EXACT (design context de 2942:9504/9512/9530 + screenshot):
+ *   card        → bg white-0, border 1px stroke-soft-200, radius-12, padding 16,
+ *                 shadow x-small, flex row gap 14 items-center
+ *   text block  → flex-col gap 4; title row gap 4 (rendereado por sui-content-label)
+ *   title       → Inter Medium 14/20 ls -0.084px, text/strong-950 (Label/Small)
+ *   sublabel    → Inter Regular 12/16, text/sub-600 — inline al lado del título
+ *   subtitle    → Inter Regular 12/16, text/sub-600 (Paragraph/X Small) — la
+ *                 "description" del label (el nodo 2945 la llama description)
+ *   badge       → inline en el title row DESPUÉS del sublabel; Badge px-8 py-2
+ *                 radius-full, texto Inter Medium 11/12 UPPERCASE tracking 0.22px
+ *                 (Subheading/2X Small) = sui-badge size="small". Figma: bg
+ *                 state/information/light #c0d5ff + texto state/information/dark
+ *                 #122368 (= color "blue"); fallback del proyecto = 'orange'.
+ *   left-icon   → instancia "Key Icons [1.1]" stroke 40px (p-10 + icono 20,
+ *                 radius-full, border stroke-soft-200, shadow x-small)
+ *   avatar      → sui-avatar 40px (= size lg; ojo: md es 32px)
+ *   brand       → logo de marca RAW 40px, SIN caja (Spotify en el set)
+ *   company     → círculo de empresa 40px (Synergy en el set)
+ *   card-provider → tile 32×24 radius-4 con la marca de la tarjeta (Mastercard
+ *                 en el set, asset con bg #252525 propio)
+ *   X dismiss   → close-line 20px a la derecha (gap 14 del row)
+ *
+ * Correcciones aplicadas en la verificación 2026-07-23 (antes inferido ≠ Figma):
+ *   - gap del row 12 → 14 · gap del text block 2 → 4 · gap del title row 6 → 4
+ *   - subtitle 14/20 (Paragraph/Small) → 12/16 (Paragraph/X Small)
+ *   - left-icon: cuadro 40×40 radius-10 → sui-key-icon circular (radius-full)
+ *   - avatar: size md (32px) → lg (40px)
+ *   - brand: cuadro con borde → logo raw 40px sin caja
+ *   - card-provider: 40×28 radius-6 → 32×24 radius-4
+ *   - nuevo input `sublabel` (el set lo trae en el title row; faltaba)
+ *
+ * Adaptaciones deliberadas (documentadas, NO son drift):
+ *   - card-provider: el asset de Figma es el tile Mastercard con bg #252525
+ *     propio del arte. Sin card-tiles como asset en la lib, se renderiza el
+ *     brand logo centrado en un tile blanco 32×24 con borde stroke-soft-200.
+ *   - Badge fallback color 'orange' (branding del proyecto; el DS usa blue).
+ *     Cualquier consumer pasa `[badge]="{ label: 'X', color: 'blue' }"`.
+ *   - X dismiss hover/active: hover → bg-weak-50 + icon strong-950, active →
+ *     scale(0.96). INFERIDO, el set no publica estados del botón. PRESERVAR.
+ *   - disabled: extensión del proyecto (el set no publica eje State); tokens
+ *     disabled-300 por consistencia con sui-badge/sui-form-label.
  *
  * iOS :active — el botón X es clickeable custom: lleva (touchstart)/(touchend)
  * para liberar el estado active en WKWebView (regla del proyecto).
  *
- * DEPENDENCIA / DEVIACIÓN: la spec pedía componer `sui-content-label`. Ese
- * componente NO existe aún en el repo (verificado por `find` 2026-05-29, sigue
- * marcado "[no existe como SUI]" en SUI-FIGMA-CHECKLIST.md:85). Para no bloquear,
- * la estructura del ContentLabel se implementa INLINE acá (text block + leading),
- * siguiendo la misma anatomía y tokens. Si más adelante se crea `sui-content-label`,
- * extraer el bloque `.sui-content-card__row` a ese componente y componerlo.
- * Tracking en PENDIENTES.md (sección "SUI · ContentCard / ContentLabel").
- *
- * Disabled: el ContentCard deriva del ContentLabel, que en Figma define un estado
- * `Disabled` (text/disabled-300, icono atenuado, pointer-events none). Se expone
- * via input `disabled`: atenúa title/subtitle/leading/X a tokens disabled-300,
- * pone el badge en su propio estado disabled, bloquea el botón X y setea
- * aria-disabled en el host. Usar para método de pago bloqueado/vencido o
- * integración inactiva.
- *
- * PENDING VERIFY (NO confirmado pixel-exacto contra Figma — el nodo real del
- * ContentCard vive en la librería de componentes SUI, archivo distinto del
- * fileKey de assets de marca 8p1k72aKKvzJV4XcvPS4VO; ver ⚠️ del header):
- *   - leading box 40×40 / card-provider 40×28 / radios (10/6) / gap 12: inferidos
- *     del patrón SUI ContentLabel estándar (avatar md = 40 ancla el row height).
- *     Pueden coincidir por convención DS, pero sin confirmación pixel-exacta.
- *   - card-provider visual: brand logo sobre bg-white + border. El "chip" EMV y el
- *     degradado de tarjeta real del DS no se reproducen (no hay asset). Ver
- *     assetsPending.
- *   - X dismiss hover/active: hover → bg-weak-50 + icon strong-950, active →
- *     scale(0.96). INFERIDO, el set no publica estados del botón. PRESERVAR.
- *   - disabled visual (opacidad/tokens exactos del leading y badge): el patrón
- *     Disabled del ContentLabel no se pudo medir; se aplican los tokens disabled-300
- *     del DS por consistencia con sui-badge/sui-form-label.
- *
  * Usage:
  *   <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" [avatar]="{ src: user.photo, initials: 'AT' }"
- *                     title="Ana Torres" subtitle="ana@correo.com" />
+ *                     title="Ana Torres" sublabel="(Admin)" subtitle="ana@correo.com" />
  *   <sui-content-card type="brand" brand="stripe" title="Stripe" subtitle="Conectado"
  *                     [badge]="{ label: 'Activo', color: 'green' }" />
  */
 declare class SuiContentCard {
     /** Tipo de leading visual. */
     readonly type: _angular_core.InputSignal<SuiContentCardType>;
-    /** Título — Label/Small, text-strong-950. */
+    /** Título — Label/Small 14/20, text-strong-950. */
     readonly title: _angular_core.InputSignal<string>;
-    /** Subtítulo — Paragraph/Small, text-sub-600. */
+    /** Sublabel inline al lado del título — Paragraph/X Small 12/16, text-sub-600
+        (Figma 2942:9517). Vacío = no se renderiza. */
+    readonly sublabel: _angular_core.InputSignal<string>;
+    /** Subtítulo (la "description" del Content Label) — Paragraph/X Small 12/16, text-sub-600. */
     readonly subtitle: _angular_core.InputSignal<string>;
-    /** 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. */
+    /** Badge inline (Title row, después del sublabel) — 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>;
+    /** Config normalizado COMPLETO (fallbacks de la card aplicados) — se pasa al
+        sui-content-label compuesto, cuyo fallback de size es 'medium' (canon del
+        label); la card fija size 'small' (Subheading/2X Small del nodo 2942:9518). */
     protected readonly badgeCfg: _angular_core.Signal<SuiBadgeConfig | null>;
     /** RemixIcon name (sin 'ri-') para type=left-icon. */
     readonly icon: _angular_core.InputSignal<string | null>;
     /** 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. */
@@ -3388,9 +3641,13 @@ declare class SuiContentCard {
     readonly dismiss: _angular_core.OutputEmitterRef<MouseEvent>;
     /** True si hay leading visual (todo menos basic). */
     readonly hasLeading: _angular_core.Signal<boolean>;
+    /** Type que se delega al sui-content-label compuesto. card-provider no existe
+        en el set del label (2945:5539) → la card renderiza ese leading ella misma
+        y el label va en 'basic' (solo text block). */
+    protected readonly labelType: _angular_core.Signal<SuiContentLabelType>;
     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; }; "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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiContentCard, "sui-content-card", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "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';
@@ -5286,7 +5543,7 @@ declare class SuiFileUpload {
     protected readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     protected readonly dragging: _angular_core.WritableSignal<boolean>;
     protected readonly internalError: _angular_core.WritableSignal<string | null>;
-    protected readonly state: _angular_core.Signal<"error" | "default" | "disabled" | "dragover">;
+    protected readonly state: _angular_core.Signal<"default" | "error" | "disabled" | "dragover">;
     protected readonly resolvedTitle: _angular_core.Signal<string>;
     protected readonly resolvedSubtitle: _angular_core.Signal<string>;
     protected readonly resolvedErrorMessage: _angular_core.Signal<string | null>;
@@ -6558,7 +6815,7 @@ declare const SUI_KEY_ICON_SIZES: readonly SuiKeyIconSize[];
 /**
  * SUI Key Icon — SUI Design System 2.0
  *
- * Figma file: 8p1k72aKKvzJV4XcvPS4VO — grupo "Key Components" → "KeyIcons [1.1]".
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — set "Key Icons [1.1]" = nodo 263:1850.
  * Componente NUEVO (no existía como SUI). Contenedor circular de icono usado como
  * leading element en list rows, content-labels, empty-states, notificaciones, etc.
  *
@@ -6584,7 +6841,9 @@ declare const SUI_KEY_ICON_SIZES: readonly SuiKeyIconSize[];
  *
  * ── Icono ────────────────────────────────────────────────────────────────────
  *   Render SIEMPRE vía <sui-icon name="..."> (regla del proyecto — nunca SVG
- *   inline). Tamaño = size / 2 (Figma: el icono ocupa el 50% del contenedor).
+ *   inline). Tamaño MEDIDO en Figma 263:1850: size/2 en 40/48/56/64
+ *   (20/24/28/32), pero Small (32) usa icono 20px (padding 6, NO 16=size/2) —
+ *   Figma no baja el glyph de 20px para mantener legibilidad.
  *   El <sui-icon> recibe su tamaño DIRECTO vía [size]="iconSize()" (su @Input),
  *   NO vía custom prop CSS — sui-icon lee solo su @Input `size`, no una variable.
  *   El color del icono = `*-base` del color, vía la custom prop `--sui-key-icon-fg`.
@@ -6601,21 +6860,21 @@ declare const SUI_KEY_ICON_SIZES: readonly SuiKeyIconSize[];
  *   stroke bg— adapta. NO hardcodear un bg distinto acá: divergiría de Figma (la
  *   spec del KeyIcon stroke ES bg-white-0) y del resto del DS.
  *
- * PENDING VERIFY (Figma — NO verificado pixel-perfect):
- *   - El component set "KeyIcons" NO está en el file 8p1k72aKKvzJV4XcvPS4VO.
- *     Verificado 2026-05-29 vía MCP: get_metadata(file) lista solo 2 páginas
- *     (`0:1 Cover`, `2771:1469 Brand`); la página Brand son brand-logos / crypto /
- *     app-store badges, sin ningún nodo KeyIcon. El node 266:2814 (del prompt
- *     original) resuelve a "Label [1.1]", NO a KeyIcons. KeyIcons vive en OTRO file
- *     de SUI no accesible con este fileKey.
- *   - Los valores actuales (color/lighter/base, size, icon=size/2, stroke=bg-white-0
- *     + border stroke-soft-200 + shadow-x-small) provienen de la auditoría previa
- *     (.claude/sui-audit/reaudit-reports.json + SUI-FIGMA-CHECKLIST.md líneas 84/105),
- *     NO de un render en vivo de KeyIcons. Todos los tokens matchean 1:1 con
- *     sui-tokens.scss, pero NO se hizo comparación visual contra el nodo real.
- *   - Pendiente: identificar el fileKey/nodeId real del set KeyIcons y hacer un
- *     get_screenshot para validar radius (¿círculo full vs radio fijo grande?),
- *     border width, y el size del icono interno antes de marcar Figma-verified.
+ * FIGMA-VERIFIED 2026-07-23 — set "Key Icons [1.1]" nodo 263:1850 (mismo file):
+ *   - Estructura confirmada vía get_metadata(263:1850): 90 symbols exactos =
+ *     Style(Stroke|Lighter) × Color(Gray/Blue/Orange/Red/Green/Yellow/Purple/
+ *     Pink/Teal) × Size(Small 32 / Medium 40 / Large 48 / X-Large 56 / 2X-Large 64).
+ *   - Stroke (263:1849, 264:2386): bg `--bg/white-0` + border 1px solid
+ *     `--stroke/soft-200` (#ebebeb) + `rounded-[var(--radius-full,999px)]` +
+ *     drop-shadow regular-shadow/x-small (0 1px 2px rgba(10,13,20,0.03)) ✓
+ *     — matchea `--sui-bg-white-0` / `--sui-stroke-soft-200` / `--sui-radius-full`
+ *     / `--sui-shadow-x-small` de sui-tokens.scss 1:1.
+ *   - Lighter (264:2716, 264:2604, 264:2496): bg `--state/<x>/lighter`
+ *     (faded #f5f5f5, information #ebf1ff), sin borde ni sombra, radius-full ✓.
+ *   - Icono (glyph placeholder `user-6-line` de RemixIcon, color `*-base`,
+ *     confirmado en screenshot del set completo): 64→32 (p16), 56→28 (p14),
+ *     48→24 (p12), 40→20 (p10) = size/2 ✓; PERO Small 32→20 (p6), NO 16.
+ *     Desviación corregida en `iconSize` (piso de 20px).
  */
 declare class SuiKeyIcon {
     /** RemixIcon name (sin prefijo), e.g. 'mail-line', 'home-5-fill'. Se pasa a <sui-icon>. */
@@ -6629,7 +6888,11 @@ declare class SuiKeyIcon {
     readonly color: _angular_core.InputSignal<SuiKeyIconColor>;
     /** Tamaño del contenedor en px. Uno de 32/40/48/56/64. */
     readonly size: _angular_core.InputSignal<SuiKeyIconSize>;
-    /** Tamaño del icono interno = 50% del contenedor (Figma). */
+    /**
+     * Tamaño del icono interno. Figma 263:1850 (medido por variant): size/2 en
+     * 40/48/56/64, pero Small (32) mantiene el glyph en 20px (piso de legibilidad
+     * — 264:2712/264:2716 usan padding 6, icono 20, NO 16).
+     */
     readonly iconSize: _angular_core.Signal<number>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiKeyIcon, never>;
     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>;
@@ -7628,6 +7891,146 @@ declare class SuiPagination {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiPagination, "sui-pagination", never, { "total": { "alias": "total"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "siblingCount": { "alias": "siblingCount"; "required": false; "isSignal": true; }; "showInfo": { "alias": "showInfo"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "firstLast": { "alias": "firstLast"; "required": false; "isSignal": true; }; "nextPrevious": { "alias": "nextPrevious"; "required": false; "isSignal": true; }; "infoFormat": { "alias": "infoFormat"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; }, { "pageSize": "pageSizeChange"; "currentPage": "currentPageChange"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; }, never, never, true, never>;
 }
 
+type SuiPasswordStrengthLevel = 'empty' | 'weak' | 'moderate' | 'strong';
+/**
+ * Condición de la checklist bajo la barra.
+ *  - `label`: texto visible (requerido).
+ *  - `test`:  RegExp o predicado sobre `value` — evalúa si la condición se cumple.
+ *  - `met`:   override manual — si está definido gana sobre `test` (útil cuando el
+ *             consumer evalúa las reglas afuera, ej. validación de backend).
+ */
+interface SuiPasswordStrengthCondition {
+    label: string;
+    test?: RegExp | ((value: string) => boolean);
+    met?: boolean;
+}
+/** Condiciones default — las 3 del set de Figma, en español (tuteo). */
+declare const SUI_PASSWORD_STRENGTH_DEFAULT_CONDITIONS: SuiPasswordStrengthCondition[];
+/** Labels por nivel para el `aria-valuetext` (configurables vía `levelLabels`). */
+declare const SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS: Record<SuiPasswordStrengthLevel, string>;
+/**
+ * sui-password-strength — SUI Design System 2.0 · Password Strength
+ *
+ * Figma: 8p1k72aKKvzJV4XcvPS4VO — frame "Password Strength [1.1]" node 327:8202.
+ * VERIFIED via MCP (`get_metadata` + `get_design_context` + `get_variable_defs`
+ * + `get_screenshot`, 2026-07-23).
+ *
+ * Indicador de fuerza de contraseña: barra segmentada de 3 niveles + caption +
+ * checklist de condiciones. 4 variants del set (eje Strength):
+ *
+ *  - ⚪️ Empty    (327:8201): 0 segmentos llenos · todas las condiciones con
+ *                 check gris (icon/soft-400) — estado neutro, aún sin tipear.
+ *  - 🔴 Weak     (327:8239): segmento 1 lleno (error/base) · cumplidas con check
+ *                 verde, NO cumplidas con close-circle gris.
+ *  - 🟡 Moderate (327:8258): segmentos 1-2 llenos (error + warning/base).
+ *  - 🟢 Strong   (327:8277): 3 segmentos llenos (error + warning + success/base).
+ *
+ * OJO: cada segmento tiene su color FIJO (1=error, 2=warning, 3=success) y se
+ * llenan progresivamente — en Strong la barra es roja+naranja+verde, NO toda verde.
+ *
+ * EXACT (pulled from Figma 2026-07-23, verified):
+ *  - Contenedor: flex-col, gap 8px, padding-top 6px, width 100% (Figma fija 300
+ *    como ejemplo — el componente es full-width, el consumer restringe).
+ *  - Fila "Level": flex gap 8px; cada segmento flex:1, height 4px, radius 1.2px.
+ *  - Segmento vacío: bg/soft-200 #ebebeb · lleno: state/error/base #fb3748 ·
+ *    state/warning/base #fa7319 · state/success/base #1fc16b.
+ *  - Caption y condiciones: text/sub-600 #5c5c5c, Inter Regular 12/lh16
+ *    (Paragraph/XSmall), font-feature-settings 'ss11' 1,'calt' 0,'liga' 0.
+ *  - Fila condición: flex gap 4px, items-center; icono 16px.
+ *  - Icono check (cumplida / estado empty): checkbox-circle-fill — verde
+ *    state/success/base cumplida, gris icon/soft-400 #a3a3a3 en empty.
+ *  - Icono no cumplida (weak/moderate): close-circle-fill gris icon/soft-400.
+ *  - Copy Figma "Must contain at least;" → "Debe contener al menos:" (ES).
+ *
+ * Derivación automática del nivel (cuando `strength` no se fuerza):
+ *  - `value` vacío → 'empty'
+ *  - todas las condiciones cumplidas → 'strong'
+ *  - cumplidas ≥ mitad del total → 'moderate'
+ *  - resto → 'weak'
+ *  (con las 3 condiciones default: 3=strong, 2=moderate, 0-1=weak — igual al set.)
+ *
+ * Inputs:
+ *  - value:       string — la contraseña; evalúa condiciones y deriva el nivel.
+ *  - strength:    SuiPasswordStrengthLevel | null (default null) — override
+ *                 manual del nivel; si está presente gana sobre el derivado.
+ *  - caption:     string (default 'Debe contener al menos:') — '' lo oculta.
+ *  - conditions:  SuiPasswordStrengthCondition[] — checklist configurable
+ *                 (default: las 3 del set en español). [] oculta la lista.
+ *  - levelLabels: Partial<Record<level, string>> — textos del aria-valuetext.
+ *  - ariaLabel:   string (default 'Seguridad de la contraseña') — label del
+ *                 progressbar.
+ *
+ * Output:
+ *  - strengthChange: SuiPasswordStrengthLevel — emitido cuando el nivel
+ *    resuelto cambia (no emite el estado inicial).
+ *
+ * A11y: la barra es role="progressbar" (aria-valuemin=0, aria-valuemax=3,
+ * aria-valuenow=segmentos llenos, aria-valuetext=label del nivel); la checklist
+ * es <ul>/<li> semántica con los iconos aria-hidden.
+ *
+ * Usage:
+ *  <sui-password-strength [value]="password()" (strengthChange)="onStrength($event)" />
+ *  <sui-password-strength strength="moderate" [conditions]="[]" caption="" />
+ */
+declare class SuiPasswordStrength {
+    /** Contraseña a evaluar — deriva las condiciones cumplidas y el nivel. */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Override manual del nivel — presente gana sobre el derivado de `value`. */
+    readonly strength: _angular_core.InputSignal<SuiPasswordStrengthLevel | null>;
+    /** Caption sobre la checklist. '' = oculto. */
+    readonly caption: _angular_core.InputSignal<string>;
+    /** Checklist de condiciones. [] = sin checklist (solo barra + caption). */
+    readonly conditions: _angular_core.InputSignal<SuiPasswordStrengthCondition[]>;
+    /** Textos del nivel para lectores de pantalla (merge sobre los defaults ES). */
+    readonly levelLabels: _angular_core.InputSignal<Partial<Record<SuiPasswordStrengthLevel, string>>>;
+    /** Label accesible del progressbar. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Emite el nivel resuelto cada vez que cambia (no emite el inicial). */
+    readonly strengthChange: _angular_core.OutputEmitterRef<SuiPasswordStrengthLevel>;
+    /** Condiciones evaluadas: `met` manual gana; sino corre `test` sobre `value`. */
+    protected readonly conditionStates: _angular_core.Signal<{
+        label: string;
+        met: boolean;
+    }[]>;
+    /** Nivel resuelto: override explícito o derivado de las condiciones. */
+    readonly resolvedStrength: _angular_core.Signal<SuiPasswordStrengthLevel>;
+    /** Segmentos llenos de la barra (0-3) — también el aria-valuenow. */
+    protected readonly filledSegments: _angular_core.Signal<number>;
+    /** aria-valuetext del nivel actual (levelLabels del consumer sobre defaults). */
+    protected readonly levelLabel: _angular_core.Signal<string>;
+    /** Icono por condición: check (cumplida o estado empty) vs close (fallida). */
+    protected iconName(met: boolean): string;
+    private previousStrength;
+    constructor();
+    private runTest;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiPasswordStrength, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiPasswordStrength, "sui-password-strength", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "strength": { "alias": "strength"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "conditions": { "alias": "conditions"; "required": false; "isSignal": true; }; "levelLabels": { "alias": "levelLabels"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "strengthChange": "strengthChange"; }, never, never, true, never>;
+}
+
+/** Los 8 tipos canon del set de Figma (mismo orden que el frame). */
+declare const SUI_PAYMENT_ICON_TYPES: readonly ["water", "gas", "electricity", "donate", "internet", "phone", "rent", "tax"];
+type SuiPaymentIconType = (typeof SUI_PAYMENT_ICON_TYPES)[number];
+/** Tamaños del contenedor: reusa la escala canon de sui-key-icon (32/40/48/56/64). */
+type SuiPaymentIconSize = SuiKeyIconSize;
+declare class SuiPaymentIcon {
+    /** Tipo de pago/servicio (ver SUI_PAYMENT_ICON_TYPES). Define icono + color. */
+    readonly type: _angular_core.InputSignal<"water" | "gas" | "electricity" | "donate" | "internet" | "phone" | "rent" | "tax">;
+    /** Tamaño del contenedor en px. Canon Figma = 40; la escala es la de sui-key-icon. */
+    readonly size: _angular_core.InputSignal<SuiKeyIconSize>;
+    /**
+     * Aria-label opcional. Si se provee, se anuncia como imagen (`role="img"`);
+     * si no, se considera decorativo (`aria-hidden="true"`) — el caso típico,
+     * porque el icono acompaña un texto que ya nombra el servicio.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    /** RemixIcon name derivado del type (glyphs literales del set de Figma). */
+    protected readonly iconName: _angular_core.Signal<string>;
+    /** Color semántico de sui-key-icon derivado del type. */
+    protected readonly keyColor: _angular_core.Signal<SuiKeyIconColor>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiPaymentIcon, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiPaymentIcon, "sui-payment-icon", never, { "type": { "alias": "type"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * SUI Period Range — SUI Design System 2.0
  *
@@ -11453,5 +11856,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, SuiAccordionContent, 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, 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, SuiTooltipThemeInput };
+export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_CHART_LEGEND_COLORS, SUI_CHART_LEGEND_HEX, SUI_CHART_SERIES_COLORS, 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_PASSWORD_STRENGTH_DEFAULT_CONDITIONS, SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS, SUI_PAYMENT_ICON_TYPES, SUI_PRODUCT_FALLBACK_COLORS, SUI_TAB_BAR, SuiAccordion, SuiAccordionContent, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiChartLegend, SuiChartLegendDot, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiContentLabel, 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, SuiPasswordStrength, SuiPaymentIcon, 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, SuiChartLegendColor, SuiChartLegendItem, SuiCheckboxCardType, SuiCheckboxSize, SuiCircularProgressBarColor, SuiCircularProgressBarSize, SuiColorDotColor, SuiCommandMenuItemSize, SuiCommandMenuItemType, SuiCompactAvatarGroupAppearance, SuiCompactAvatarGroupSize, SuiCompactButtonSize, SuiCompactButtonStyle, SuiCompactSelectForInputItem, SuiCompactSelectForInputSize, SuiCompactSelectItem, SuiCompactSelectSize, SuiCompactSelectType, SuiContentCardType, SuiContentDividerItem, SuiContentDividerType, SuiContentLabelBadgePlacement, SuiContentLabelSize, SuiContentLabelType, 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, 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, SuiPasswordStrengthCondition, SuiPasswordStrengthLevel, SuiPaymentIconSize, SuiPaymentIconType, 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, SuiTooltipThemeInput };