@ajuarezso/sui-design-system 0.2.7 → 0.4.0

package/package.json

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

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

@@ -4976,7 +4976,7 @@ declare class SuiFileUpload {
  *
  * Toolbar horizontal de filtros con layout Left/Right split. Es un CONTENEDOR
  * de composición: el consumer proyecta los controles ya homologados —
- * Segmented Control (`<sui-tabs variant="segment">`), Text Input
+ * Segmented Control (`<sui-segmented-control>`), Text Input
  * (`<sui-input type="search">` con kbd badge), Select (`<sui-select>`),
  * Button Group (`<sui-button-group>`) y Buttons (`<sui-button>`)— en dos slots
  * nombrados.
@@ -5012,7 +5012,7 @@ declare class SuiFileUpload {
  *
  * Usage (Table variant):
  *   <sui-filter-bar>
- *     <sui-tabs slot="start" variant="segment" [tabs]="views" [(active)]="view" />
+ *     <sui-segmented-control slot="start" [tabs]="views" [(active)]="view" />
  *     <div slot="end" class="row">
  *       <sui-input type="search" placeholder="Search…" [(value)]="q">
  *         <sui-kbd input-suffix>⌘1</sui-kbd>
@@ -8884,6 +8884,51 @@ declare class SuiStoreCard {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiStoreCard, "sui-store-card", never, { "store": { "alias": "store"; "required": true; "isSignal": true; }; "isFavorite": { "alias": "isFavorite"; "required": false; "isSignal": true; }; "disableLink": { "alias": "disableLink"; "required": false; "isSignal": true; }; }, { "toggleFavorite": "toggleFavorite"; "ratingClicked": "ratingClicked"; }, never, never, true, never>;
 }
 
+declare class SuiProductCard {
+    /** Nombre del producto (título de la card + fuente del color del fallback). */
+    readonly name: _angular_core.InputSignal<string>;
+    /** Descripción corta (1 línea, opcional). */
+    readonly description: _angular_core.InputSignal<string>;
+    /** Precio numérico; se formatea a 2 decimales. */
+    readonly price: _angular_core.InputSignal<number>;
+    /** URL de la imagen. Ausente → se usa `fallbackVariant`. */
+    readonly imageUrl: _angular_core.InputSignal<string | null>;
+    /** Encuadre vertical de la imagen (CSS object-position Y, 0–100). */
+    readonly imagePosition: _angular_core.InputSignal<number>;
+    /** false → card atenuada + tag "Agotado", sin botón de agregar. */
+    readonly available: _angular_core.InputSignal<boolean>;
+    /** Cantidad en el carrito. > 0 → muestra el stepper en vez del botón "+". */
+    readonly quantity: _angular_core.InputSignal<number>;
+    /** Local cerrado → deshabilita agregar / incrementar. */
+    readonly closed: _angular_core.InputSignal<boolean>;
+    /** Prefijo de moneda. */
+    readonly currencySymbol: _angular_core.InputSignal<string>;
+    /** Fallback sin imagen: `'name'` = banda de color + nombre; `'icon'` = ícono. */
+    readonly fallbackVariant: _angular_core.InputSignal<"name" | "icon">;
+    /** Texto del tag cuando no está disponible. */
+    readonly unavailableLabel: _angular_core.InputSignal<string>;
+    /** Tap en la card (abrir detalle del producto). */
+    readonly openDetail: _angular_core.OutputEmitterRef<void>;
+    /** Tap en el botón "+" (agregar al carrito). */
+    readonly add: _angular_core.OutputEmitterRef<void>;
+    /** Tap en "+" del stepper (incrementar cantidad). */
+    readonly increment: _angular_core.OutputEmitterRef<void>;
+    /** Tap en "−" / basurero del stepper (decrementar / quitar). */
+    readonly decrement: _angular_core.OutputEmitterRef<void>;
+    readonly formattedPrice: _angular_core.Signal<string>;
+    readonly showStepper: _angular_core.Signal<boolean>;
+    readonly showNamedFallback: _angular_core.Signal<boolean>;
+    readonly showIconFallback: _angular_core.Signal<boolean>;
+    /** Color estable derivado del nombre (hash → índice de paleta). */
+    readonly fallbackColor: _angular_core.Signal<string>;
+    onCard(): void;
+    onAdd(event: Event): void;
+    onInc(event: Event): void;
+    onDec(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiProductCard, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiProductCard, "sui-product-card", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "price": { "alias": "price"; "required": true; "isSignal": true; }; "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "imagePosition": { "alias": "imagePosition"; "required": false; "isSignal": true; }; "available": { "alias": "available"; "required": false; "isSignal": true; }; "quantity": { "alias": "quantity"; "required": false; "isSignal": true; }; "closed": { "alias": "closed"; "required": false; "isSignal": true; }; "currencySymbol": { "alias": "currencySymbol"; "required": false; "isSignal": true; }; "fallbackVariant": { "alias": "fallbackVariant"; "required": false; "isSignal": true; }; "unavailableLabel": { "alias": "unavailableLabel"; "required": false; "isSignal": true; }; }, { "openDetail": "openDetail"; "add": "add"; "increment": "increment"; "decrement": "decrement"; }, never, never, true, never>;
+}
+
 /**
  * SUI Switch — SUI Design System 2.0
  *
@@ -9494,125 +9539,206 @@ declare class SuiTable<T = any> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiTable<any>, "sui-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "selectedRows": { "alias": "selectedRows"; "required": false; "isSignal": true; }; "sortKey": { "alias": "sortKey"; "required": false; "isSignal": true; }; "sortDir": { "alias": "sortDir"; "required": false; "isSignal": true; }; }, { "selectedRows": "selectedRowsChange"; "sortKey": "sortKeyChange"; "sortDir": "sortDirChange"; "rowClicked": "rowClicked"; "sortChanged": "sortChanged"; }, ["cellTemplates"], never, true, never>;
 }
 
-type SuiTabsVariant = 'line' | 'segment' | 'vertical';
-type SuiTabsSize = 'small' | 'medium' | 'large' | 'xlarge';
-/** Estilo del contenedor del variant `vertical` (Tab Menu Vertical de Figma). */
-type SuiTabsVerticalStyle = 'card' | 'list';
-interface SuiTab<T = string> {
+type SuiTabMenuHorizontalSize = 'small' | 'medium' | 'large' | 'xlarge';
+interface SuiTabMenuHorizontalItem<T = string> {
     value: T;
     label: string;
     icon?: string;
-    disabled?: boolean;
     /**
-     * Renderiza el ítem solo con icono (sin label visible) — mapea al
-     * Type=Only Icon del Figma Segmented Control. Requiere que `icon` esté
-     * presente. El `label` se usa entonces como `aria-label` para accesibilidad.
-     * Solo aplica al variant='segment'.
+     * Muestra el chevron de navegación (pill `arrow-right-s-line` 18px) a la
+     * derecha del ítem — prop `rightIcon` del Tab Menu de Figma. El pill es
+     * bg-white-0 p-px radius-full overflow-clip SIN shadow (Figma 3511:9882,
+     * a diferencia del pill del Tab Menu Vertical, que sí lleva shadow-x-small).
      */
-    iconOnly?: boolean;
+    rightIcon?: boolean;
     /**
      * Badge numérico rojo (state/error/base) renderizado a la derecha del label.
-     * Mapea al prop `number` del Tab Menu de Figma (Horizontal/Vertical Items).
-     * Si es `0`/`undefined` no se renderiza. Solo aplica a variants `line`/`vertical`.
+     * Mapea al prop `number` del Tab Menu Horizontal Items de Figma.
+     * Si es `0`/`undefined` no se renderiza.
      */
-    badge?: number;
+    number?: number;
+    disabled?: boolean;
+}
+/**
+ * SUI Tab Menu Horizontal — SUI Design System 2.0
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Componente Figma: "Tab Menu Horizontal [1.1]"
+ *   3511:9958 — container (border-t/b, py-14px, gap-24px)
+ *   3511:9832 — Tab Menu Horizontal Items [1.1] (State × Active; leftIcon/rightIcon/number)
+ *   3511:9897 — Item Active/On (label strong-950 + línea primary)
+ *   3511:9877 — Item Hover/Off (text strong-950, icon sub-600)
+ *
+ * Pestañas horizontales con subrayado (underline 2px primary en el ítem activo,
+ * al ras del border-bottom del container).
+ *
+ * EXACT specs (Figma):
+ *   Container (3511:9958): border-top + border-bottom 1px stroke-soft-200,
+ *     padding 14px 0, gap 24px entre items, align-items flex-start, bg-white-0
+ *   Item (3511:9830/9897): gap icon↔label 6px, gap label↔number 4px
+ *     Default/Off:  text/icon sub-600
+ *     Hover/Off:    text strong-950, icon sub-600
+ *     Active/On:    text strong-950 + underline primary-base 2px (bottom -14px);
+ *                   leftIcon strong-950 (verificado 2026-06-21: difiere del
+ *                   vertical, cuyo icono activo es primary-base — a propósito)
+ *   number: badge state/error/base, p-2px, radius-full, text static-white,
+ *     Subheading/2XSmall (11px/12px line, +2% / 0.22px, uppercase)
+ *   rightIcon (chevron): pill 'Arrow' (3511:9882/9902/9844): bg-white-0, p-px,
+ *     radius-full, overflow-clip, icon arrow-right-s-line 18px, SIN shadow
+ *
+ * PENDING VERIFY:
+ *   - `size`: el Tab Menu Horizontal de Figma no expone eje size. El input se
+ *     mantiene como extensión SUI (espeja el data-attr del host como hook de
+ *     SCSS), pero hoy solo medium está 1:1 y no altera estilos.
+ *   - `disabled` por ítem es extensión SUI (Figma no muestra estado Disabled).
+ *
+ * Historia: hasta la v0.2.x este componente vivía como `<sui-tabs variant="line">`;
+ * en la v0.3.0 se separó en componente propio (junto a `sui-segmented-control`
+ * y `sui-tab-menu-vertical`) espejando los tres sets independientes de Figma.
+ * Renombres vs la interface SuiTab vieja: `badge` → `number` y `chevron` →
+ * `rightIcon` (nombres de los props del Figma).
+ */
+declare class SuiTabMenuHorizontal<T = string> {
+    readonly tabs: _angular_core.InputSignal<SuiTabMenuHorizontalItem<T>[]>;
+    readonly active: _angular_core.ModelSignal<T | undefined>;
+    readonly size: _angular_core.InputSignal<SuiTabMenuHorizontalSize>;
+    readonly tabChange: _angular_core.OutputEmitterRef<T>;
+    isActive(tab: SuiTabMenuHorizontalItem<T>): boolean;
+    select(tab: SuiTabMenuHorizontalItem<T>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiTabMenuHorizontal<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiTabMenuHorizontal<any>, "sui-tab-menu-horizontal", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "tabChange": "tabChange"; }, never, never, true, never>;
+}
+
+/** Estilo del contenedor del Tab Menu Vertical (prop Style=Card|List de Figma). */
+type SuiTabMenuVerticalStyle = 'card' | 'list';
+interface SuiTabMenuVerticalItem<T = string> {
+    value: T;
+    label: string;
+    icon?: string;
     /**
      * Muestra el chevron de navegación (pill `arrow-right-s-line` 18px) a la
-     * derecha del ítem — prop `rightIcon` del Tab Menu de Figma. Aplica a
-     * `vertical` y `line`. En ambos el chevron va dentro de un pill bg-white-0
-     * p-px radius-full overflow-clip; el pill vertical lleva shadow-x-small y el
-     * horizontal NO (Figma 3515:10332 vs 3511:9882).
+     * derecha del ítem — prop `rightIcon` del Tab Menu de Figma. El pill vertical
+     * es bg-white-0 p-1px radius-full CON shadow-x-small (Figma 3515:10332, a
+     * diferencia del pill del Tab Menu Horizontal, que NO lleva shadow).
      */
-    chevron?: boolean;
+    rightIcon?: boolean;
+    /**
+     * Badge numérico rojo (state/error/base) renderizado a la derecha del label.
+     * Mapea al prop `number` del Tab Menu Vertical Items de Figma.
+     * Si es `0`/`undefined` no se renderiza.
+     */
+    number?: number;
+    disabled?: boolean;
 }
 /**
- * SUI Tabs — SUI Design System 2.0
+ * SUI Tab Menu Vertical — SUI Design System 2.0
  *
  * Figma file: 8p1k72aKKvzJV4XcvPS4VO
- *
- * Cubre tres componentes de Figma bajo un solo `sui-tabs`:
- *   - variant='segment'  → "Segmented Control [1.1]" (pill iOS, indicador animado)
- *   - variant='line'     → "Tab Menu Horizontal [1.1]" (underline tabs)
- *   - variant='vertical' → "Tab Menu Vertical [1.1]" (sidebar nav, Card|List)
- *
- * Nodos homologados (2026-05-29 · Tab Menu pass):
- *   3511:9958  — Tab Menu Horizontal [1.1] (container: border-t/b, py-14px, gap-24px)
- *   3511:9832  — Tab Menu Horizontal Items [1.1] (State × Active; leftIcon/rightIcon/number)
- *   3511:9897  — Horizontal Item Active/On (label strong-950 + línea primary)
- *   3511:9877  — Horizontal Item Hover/Off (text strong-950, icon sub-600)
- *   3516:10411 — Tab Menu Vertical [1.1] (Style=Card|List × Quantity 02–08 × divider)
- *   3516:10412 — Vertical Card Quantity=03 con divider 'SELECT MENU'
+ * Componente Figma: "Tab Menu Vertical [1.1]"
+ *   3516:10411 — set (Style=Card|List × Quantity 02–08 × divider)
+ *   3516:10412 — Card Quantity=03 con divider 'SELECT MENU'
  *   3515:10326 — Tab Menu Vertical Items [1.1] (State × Active; leftIcon/rightIcon/number)
- *   3515:10341 — Vertical Item Active/On (bg-weak-50)
- *
- * EXACT specs (Tab Menu pass):
- *   Horizontal container (3511:9958):
- *     border-top + border-bottom: 1px solid stroke-soft-200
- *     padding: 14px 0 (py-14px) · gap entre items: 24px
- *     align-items: flex-start (items-start) · background: bg-white-0
- *   Horizontal item (3511:9830/9897):
- *     gap icon↔label: 6px · gap label↔badge: 4px
- *     Default/Off:  text/icon sub-600 (#5c5c5c)
- *     Hover/Off:    text strong-950 (#171717), icon sub-600 (#5c5c5c)
- *     Active/On:    text strong-950 + indicator line primary-base 2px (bottom -14px,
- *                   al ras del border-bottom del container)
- *     leftIcon: 20px · rightIcon: chevron arrow-right-s-line 18px en pill 'Arrow'
- *               (3511:9882/9902/9844): bg-white-0, p-px, radius-full, overflow-clip,
- *               SIN shadow (el vertical sí lleva shadow-x-small)
- *     number: badge state/error/base, p-2px, radius-full, text static-white
- *             Subheading/2XSmall (11px/12px line, +2% / 0.22px, uppercase)
- *   Vertical item (3515:10327/10341/10334):
- *     gap: 6px · padding: 8px · radius: radius-8 · w-full · label flex-1 text-left
- *     overflow-clip en el item (y en el container Card 3516:10412)
- *     Active/On:  bg-weak-50 + text strong-950 / icon strong-950
+ *   3515:10341 — Item Active/On (bg-weak-50)
+ *
+ * Navegación lateral (sidebar nav) con dos estilos de contenedor: Card (con
+ * borde/fondo/sombra) o List (plano).
+ *
+ * EXACT specs (Figma):
+ *   Item (3515:10327/10341): gap 6px, padding 8px, radius-8, w-full, label flex-1
+ *     text-left, overflow-clip
+ *     Active/On:  bg-weak-50 + text strong-950; leftIcon PRIMARY-BASE (verificado
+ *                 2026-06-21 vía variable_defs + screenshot de 3515:10341 — difiere
+ *                 del horizontal, cuyo icono activo es strong-950, a propósito)
  *     Hover/Off:  bg-weak-50 (igual fill que el active) + text strong-950 (3515:10334)
- *     Default/Off (Card):  bg-white-0 + text/icon sub-600
- *     Default/Off (List):  transparent + text/icon sub-600
- *     number: mismo badge que horizontal
- *     rightIcon (chevron): pill bg-white-0, p-1px, radius-full, shadow-x-small,
- *                          arrow-right-s-line 18px
- *   Vertical container Card (3516:10412):
- *     bg-white-0, border 1px stroke-soft-200, p-10px, radius-16, shadow-x-small,
- *     flex-col gap-8px
- *   Vertical container List: flat (sin border/bg/shadow/padding), gap-8px
- *   Divider label (Content Divider [1.1], reusado): px-8px py-4px, text-soft-400,
- *     Subheading/XSmall (12px/16px line, +4% / 0.48px, uppercase)
- *
- * VERIFICADO (2026-06-21, re-verificación visual pixel-perfect):
- *   - Horizontal Active leftIcon = STRONG-950 (oscuro). Confirmado: variable_defs
- *     de 3511:9897 expone primary-base SOLO para la línea underline (NO para el
- *     icono); icon/sub-600 es el chevron; el screenshot del item activo muestra el
- *     leftIcon oscuro. → icono activo horizontal = strong-950 (queda como estaba).
- *   - Vertical Active leftIcon = PRIMARY-BASE (azul en Figma → naranja brand acá).
- *     Confirmado: variable_defs de 3515:10341 expone primary-base (texto=strong-950,
- *     bg=weak-50) → ese primary es el icono; screenshot del item activo lo muestra
- *     AZUL. El componente lo tenía en strong-950 → FIX aplicado (.sui-tabs__vertical-
- *     item--active .sui-tabs__vertical-leading { color: var(--sui-primary-base) }).
- *     OJO: horizontal y vertical DIFIEREN en el color del icono activo (a propósito).
+ *     Default/Off (Card): bg-white-0 + text/icon sub-600
+ *     Default/Off (List): transparent + text/icon sub-600
+ *   Container Card (3516:10412): bg-white-0, border 1px stroke-soft-200, p-10px,
+ *     radius-16, shadow-x-small, flex-col gap-8px, overflow-clip
+ *   Container List: flat (sin border/bg/shadow/padding), gap-8px
+ *   Divider label (Content Divider [1.1] reusado): px-8px py-4px, text-soft-400,
+ *     Subheading/XSmall (12px/16px line, +4% / 0.48px), uppercase
+ *   number: badge state/error/base, p-2px, radius-full, text static-white
+ *   rightIcon (chevron): pill bg-white-0, p-1px, radius-full, shadow-x-small,
+ *     arrow-right-s-line 18px
  *
  * PENDING VERIFY:
- *   - line/segment size (small/medium/large): el Tab Menu Horizontal de Figma no
- *     expone eje `size`. Los 3 sizes son extensión SUI; solo medium está 1:1.
- *   - Vertical no expone eje `size`; usa un único tamaño (item p-8px / icon 20px).
- *
- * EXTRA FEATURES preservadas (no están en el Figma 'Tab Menu', se mantienen):
- *   - variant='segment' completo (indicador animado ResizeObserver + translateX).
- *   - prop `size` (small/medium/large) del line/segment.
- *   - prop `disabled` por ítem (Figma no muestra estado Disabled del Tab Menu).
- */
-declare class SuiTabs<T = string> implements AfterViewInit {
-    readonly tabs: _angular_core.InputSignal<SuiTab<T>[]>;
+ *   - El set de Figma no expone eje `size`; usa un único tamaño (item p-8px /
+ *     icon 20px), por eso este componente NO tiene input `size`.
+ *   - `disabled` por ítem es extensión SUI (Figma no muestra estado Disabled).
+ *
+ * Historia: hasta la v0.2.x este componente vivía como
+ * `<sui-tabs variant="vertical">`; en la v0.3.0 se separó en componente propio
+ * (junto a `sui-segmented-control` y `sui-tab-menu-horizontal`) espejando los
+ * tres sets independientes de Figma. Renombres vs la API vieja:
+ *   - input `verticalStyle` → `menuStyle` (el prefijo "vertical" quedó
+ *     redundante con el nombre del componente; no se usa `style` a secas para
+ *     no chocar con el atributo HTML global `style`).
+ *   - item `badge` → `number` y `chevron` → `rightIcon` (props del Figma).
+ */
+declare class SuiTabMenuVertical<T = string> {
+    readonly tabs: _angular_core.InputSignal<SuiTabMenuVerticalItem<T>[]>;
     readonly active: _angular_core.ModelSignal<T | undefined>;
-    readonly variant: _angular_core.InputSignal<SuiTabsVariant>;
-    readonly size: _angular_core.InputSignal<SuiTabsSize>;
-    /** Estilo del contenedor cuando variant='vertical' (Card|List). */
-    readonly verticalStyle: _angular_core.InputSignal<SuiTabsVerticalStyle>;
+    /** Estilo del contenedor: Card (borde/fondo/sombra) o List (plano). */
+    readonly menuStyle: _angular_core.InputSignal<SuiTabMenuVerticalStyle>;
     /**
-     * Label de sección renderizado sobre el menú vertical (prop `divider` del
-     * Figma — ej. 'SELECT MENU'). Vacío = sin divider. Solo variant='vertical'.
+     * Label de sección renderizado sobre el menú (prop `divider` del Figma —
+     * ej. 'SELECT MENU'). Vacío = sin divider.
      */
     readonly dividerLabel: _angular_core.InputSignal<string>;
     readonly tabChange: _angular_core.OutputEmitterRef<T>;
+    isActive(tab: SuiTabMenuVerticalItem<T>): boolean;
+    select(tab: SuiTabMenuVerticalItem<T>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiTabMenuVertical<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiTabMenuVertical<any>, "sui-tab-menu-vertical", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "menuStyle": { "alias": "menuStyle"; "required": false; "isSignal": true; }; "dividerLabel": { "alias": "dividerLabel"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "tabChange": "tabChange"; }, never, never, true, never>;
+}
+
+type SuiSegmentedControlSize = 'small' | 'medium' | 'large' | 'xlarge';
+interface SuiSegmentedControlItem<T = string> {
+    value: T;
+    label: string;
+    icon?: string;
+    /**
+     * Renderiza el ítem solo con icono (sin label visible) — mapea al
+     * Type=Only Icon del Figma Segmented Control. Requiere que `icon` esté
+     * presente. El `label` se usa entonces como `aria-label` para accesibilidad.
+     */
+    iconOnly?: boolean;
+    disabled?: boolean;
+}
+/**
+ * SUI Segmented Control — SUI Design System 2.0
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Componente Figma: "Segmented Control [1.1]"
+ *   2604:114  — set del Segmented Control
+ *   2604:150  — variantes de ítem (Text · Left Icon · Only Icon)
+ *   2603:2062 — estados (default · hover · active · disabled)
+ *   2604:152  — container (bg-weak-50, padding 4px, gap 4px, radius 10px)
+ *
+ * Píldora estilo iOS: opciones mutuamente excluyentes con un indicador de
+ * fondo blanco que se anima (translateX + width) hacia la opción activa.
+ * El indicador se reposiciona con ResizeObserver cuando el track cambia de
+ * tamaño (responsive) y con un effect cuando cambia `active` o `tabs`.
+ *
+ * EXACT specs (Figma):
+ *   Container (2604:152): bg #f7f7f7 (bg-weak-50), padding 4px, gap 4px, radius 10px
+ *   Item: padding 4px, gap 6px, radius 6px, icon 20px
+ *   Estados: default text/icon-soft-400 · hover sub-600 · active strong-950 + indicator
+ *   Disabled: color discreto text-disabled-300 (NO opacity)
+ *
+ * EXTRA FEATURES (extensión SUI, el set de Figma no expone eje `size`):
+ *   - prop `size` (small/medium/large/xlarge); solo medium está 1:1 con Figma.
+ *   - prop `disabled` por ítem.
+ *
+ * Historia: hasta la v0.2.x este componente vivía como `<sui-tabs variant="segment">`;
+ * en la v0.3.0 se separó en componente propio (junto a `sui-tab-menu-horizontal`
+ * y `sui-tab-menu-vertical`) espejando los tres sets independientes de Figma.
+ */
+declare class SuiSegmentedControl<T = string> implements AfterViewInit {
+    readonly tabs: _angular_core.InputSignal<SuiSegmentedControlItem<T>[]>;
+    readonly active: _angular_core.ModelSignal<T | undefined>;
+    readonly size: _angular_core.InputSignal<SuiSegmentedControlSize>;
+    readonly tabChange: _angular_core.OutputEmitterRef<T>;
     segmentItems?: QueryList<ElementRef<HTMLElement>>;
     segmentTrack?: ElementRef<HTMLElement>;
     readonly indicatorStyle: _angular_core.WritableSignal<{
@@ -9623,10 +9749,10 @@ declare class SuiTabs<T = string> implements AfterViewInit {
     constructor();
     ngAfterViewInit(): void;
     private updateIndicator;
-    isActive(tab: SuiTab<T>): boolean;
-    select(tab: SuiTab<T>): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiTabs<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiTabs<any>, "sui-tabs", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "verticalStyle": { "alias": "verticalStyle"; "required": false; "isSignal": true; }; "dividerLabel": { "alias": "dividerLabel"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "tabChange": "tabChange"; }, never, never, true, never>;
+    isActive(tab: SuiSegmentedControlItem<T>): boolean;
+    select(tab: SuiSegmentedControlItem<T>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiSegmentedControl<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiSegmentedControl<any>, "sui-segmented-control", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "tabChange": "tabChange"; }, never, never, true, never>;
 }
 
 type SuiTagInputSize = 'xsmall' | 'small' | 'medium';
@@ -10699,5 +10825,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_TAB_BAR, SuiAccordion, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPeriodRange, SuiPopover, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTable, SuiTableCellDirective, SuiTabs, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
-export type { CalendarCell, CalendarRow, DatepickerPreset, DatepickerPresetId, SuiAccordionFlipIcon, SuiActivityAvatarRef, SuiActivityFeedItem, SuiActivityFile, SuiActivityFilterState, SuiActivityTask, SuiActivityTaskState, SuiAlertAction, SuiAlertSize, SuiAlertStyle, SuiAlertVariant, SuiAppStoreBadgeAppearance, SuiAppStoreBadgeCompany, SuiAvatarColor, SuiAvatarGroupItem, SuiAvatarSize, SuiAvatarStatus, SuiAvatarTopBadge, SuiBadgeColor, SuiBadgeConfig, SuiBadgeSize, SuiBadgeType, SuiBadgeVariant, SuiBannerStyle, SuiBannerVariant, SuiBrandLogoCompany, SuiBrandLogoSize, SuiBrandLogoStyle, SuiBreadcrumbDivider, SuiBreadcrumbEntry, SuiButtonColor, SuiButtonGroupEntry, SuiButtonGroupItemSize, SuiButtonSize, SuiButtonVariant, SuiCardSize, SuiCardVariant, SuiCheckboxCardType, SuiCheckboxSize, SuiCircularProgressBarColor, SuiCircularProgressBarSize, SuiColorDotColor, SuiCommandMenuItemSize, SuiCommandMenuItemType, SuiCompactAvatarGroupAppearance, SuiCompactAvatarGroupSize, SuiCompactButtonSize, SuiCompactButtonStyle, SuiCompactSelectForInputItem, SuiCompactSelectForInputSize, SuiCompactSelectItem, SuiCompactSelectSize, SuiCompactSelectType, SuiContentCardType, SuiContentDividerItem, SuiContentDividerType, SuiCounterInputSize, SuiDateRange, SuiDatepickerCalendars, SuiDatepickerMode, SuiDayCellType, SuiDividerOrientation, SuiDrawerFooterType, SuiDrawerHeaderSize, SuiDrawerHeaderType, SuiDropdownItemMode, SuiDropdownItemSize, SuiDropdownMenuPopupRole, SuiDropdownMenuPosition, SuiEmojiName, SuiEmojiSize, SuiFancyButtonSize, SuiFancyButtonType, SuiFileIconColor, SuiFileIconSize, SuiFileUploadCardState, SuiFileUploadSize, SuiFilterItemState, SuiFlagName, SuiFlagSize, SuiFormHintSize, SuiFormHintVariant, SuiFormLabelSize, SuiImageUploadProfileAlignment, SuiImageUploadProfileType, SuiImageUploadShape, SuiImageUploadSize, SuiInlineSelectItem, SuiInlineSelectType, SuiInputSize, SuiInputType, SuiIntegrationSwitchAppearance, SuiIntegrationSwitchType, SuiKbdVariant, SuiKeyIconColor, SuiKeyIconSize, SuiKeyIconStyle, SuiLinkButtonSize, SuiLinkButtonVariant, SuiModalIconVariant, SuiModalSize, SuiModalStatusAlignment, SuiNavbarVisibility, SuiNotificationStyle, SuiNotificationTab, SuiNotificationVariant, SuiOtpInputType, SuiPaginationInfoFormat, SuiPaginationSize, SuiPaginationType, SuiPopoverFooter, SuiPopoverPosition, SuiProgressBarColor, SuiProgressBarLabelType, SuiProgressBarSize, SuiRadioCardType, SuiRadioSize, SuiRadioValue, SuiRatingAlignment, SuiRatingAppearance, SuiRatingReviewLink, SuiRatingSize, SuiRatingType, SuiRichEditorAction, SuiRichEditorCommand, SuiRichEditorItemState, SuiRichEditorItemType, SuiRichEditorLayout, SuiSelectOption, SuiSelectSize, SuiSelectType, SuiSidebarIndicatorColor, SuiSidebarItem, SuiSidebarMobileMode, SuiSidebarProfile, SuiSliderType, SuiSocialButtonBrand, SuiSocialButtonStyle, SuiStatusBadgeAppearance, SuiStatusBadgeStatus, SuiStepperItem, SuiStepperSize, SuiStepperState, SuiStepperVariant, SuiStoreCardData, SuiSwitchCardType, SuiSwitchSize, SuiTab, SuiTabBar, SuiTabChipItem, SuiTableCellMisc, SuiTableCellPriority, SuiTableColumn, SuiTableSize, SuiTabsSize, SuiTabsVariant, SuiTabsVerticalStyle, SuiTagInputSize, SuiTagStyle, SuiTimeDurationPreset, SuiTimeFormat, SuiTimePeriod, SuiTimePickerItemDirection, SuiTimePickerStatusType, SuiTimeValue, SuiToastAction, SuiToastData, SuiToastItem, SuiToastPosition, SuiToastStyle, SuiToastVariant, SuiTooltipLargeData, SuiTooltipPosition, SuiTooltipSize, SuiTooltipTheme };
+export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_TAB_BAR, SuiAccordion, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPeriodRange, SuiPopover, SuiProductCard, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
+export type { CalendarCell, CalendarRow, DatepickerPreset, DatepickerPresetId, SuiAccordionFlipIcon, SuiActivityAvatarRef, SuiActivityFeedItem, SuiActivityFile, SuiActivityFilterState, SuiActivityTask, SuiActivityTaskState, SuiAlertAction, SuiAlertSize, SuiAlertStyle, SuiAlertVariant, SuiAppStoreBadgeAppearance, SuiAppStoreBadgeCompany, SuiAvatarColor, SuiAvatarGroupItem, SuiAvatarSize, SuiAvatarStatus, SuiAvatarTopBadge, SuiBadgeColor, SuiBadgeConfig, SuiBadgeSize, SuiBadgeType, SuiBadgeVariant, SuiBannerStyle, SuiBannerVariant, SuiBrandLogoCompany, SuiBrandLogoSize, SuiBrandLogoStyle, SuiBreadcrumbDivider, SuiBreadcrumbEntry, SuiButtonColor, SuiButtonGroupEntry, SuiButtonGroupItemSize, SuiButtonSize, SuiButtonVariant, SuiCardSize, SuiCardVariant, SuiCheckboxCardType, SuiCheckboxSize, SuiCircularProgressBarColor, SuiCircularProgressBarSize, SuiColorDotColor, SuiCommandMenuItemSize, SuiCommandMenuItemType, SuiCompactAvatarGroupAppearance, SuiCompactAvatarGroupSize, SuiCompactButtonSize, SuiCompactButtonStyle, SuiCompactSelectForInputItem, SuiCompactSelectForInputSize, SuiCompactSelectItem, SuiCompactSelectSize, SuiCompactSelectType, SuiContentCardType, SuiContentDividerItem, SuiContentDividerType, SuiCounterInputSize, SuiDateRange, SuiDatepickerCalendars, SuiDatepickerMode, SuiDayCellType, SuiDividerOrientation, SuiDrawerFooterType, SuiDrawerHeaderSize, SuiDrawerHeaderType, SuiDropdownItemMode, SuiDropdownItemSize, SuiDropdownMenuPopupRole, SuiDropdownMenuPosition, SuiEmojiName, SuiEmojiSize, SuiFancyButtonSize, SuiFancyButtonType, SuiFileIconColor, SuiFileIconSize, SuiFileUploadCardState, SuiFileUploadSize, SuiFilterItemState, SuiFlagName, SuiFlagSize, SuiFormHintSize, SuiFormHintVariant, SuiFormLabelSize, SuiImageUploadProfileAlignment, SuiImageUploadProfileType, SuiImageUploadShape, SuiImageUploadSize, SuiInlineSelectItem, SuiInlineSelectType, SuiInputSize, SuiInputType, SuiIntegrationSwitchAppearance, SuiIntegrationSwitchType, SuiKbdVariant, SuiKeyIconColor, SuiKeyIconSize, SuiKeyIconStyle, SuiLinkButtonSize, SuiLinkButtonVariant, SuiModalIconVariant, SuiModalSize, SuiModalStatusAlignment, SuiNavbarVisibility, SuiNotificationStyle, SuiNotificationTab, SuiNotificationVariant, SuiOtpInputType, SuiPaginationInfoFormat, SuiPaginationSize, SuiPaginationType, SuiPopoverFooter, SuiPopoverPosition, SuiProgressBarColor, SuiProgressBarLabelType, SuiProgressBarSize, SuiRadioCardType, SuiRadioSize, SuiRadioValue, SuiRatingAlignment, SuiRatingAppearance, SuiRatingReviewLink, SuiRatingSize, SuiRatingType, SuiRichEditorAction, SuiRichEditorCommand, SuiRichEditorItemState, SuiRichEditorItemType, SuiRichEditorLayout, SuiSegmentedControlItem, SuiSegmentedControlSize, SuiSelectOption, SuiSelectSize, SuiSelectType, SuiSidebarIndicatorColor, SuiSidebarItem, SuiSidebarMobileMode, SuiSidebarProfile, SuiSliderType, SuiSocialButtonBrand, SuiSocialButtonStyle, SuiStatusBadgeAppearance, SuiStatusBadgeStatus, SuiStepperItem, SuiStepperSize, SuiStepperState, SuiStepperVariant, SuiStoreCardData, SuiSwitchCardType, SuiSwitchSize, SuiTabBar, SuiTabChipItem, SuiTabMenuHorizontalItem, SuiTabMenuHorizontalSize, SuiTabMenuVerticalItem, SuiTabMenuVerticalStyle, SuiTableCellMisc, SuiTableCellPriority, SuiTableColumn, SuiTableSize, SuiTagInputSize, SuiTagStyle, SuiTimeDurationPreset, SuiTimeFormat, SuiTimePeriod, SuiTimePickerItemDirection, SuiTimePickerStatusType, SuiTimeValue, SuiToastAction, SuiToastData, SuiToastItem, SuiToastPosition, SuiToastStyle, SuiToastVariant, SuiTooltipLargeData, SuiTooltipPosition, SuiTooltipSize, SuiTooltipTheme };