npm - @ajuarezso/sui-design-system - Versions diffs - 0.2.7 → 0.3.0 - Mend

@ajuarezso/sui-design-system 0.2.7 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/ajuarezso-sui-design-system.mjs +166 -84
package/fesm2022/ajuarezso-sui-design-system.mjs.map +1 -1
package/package.json +1 -1
package/types/ajuarezso-sui-design-system.d.ts +188 -107

package/fesm2022/ajuarezso-sui-design-system.mjs CHANGED Viewed

@@ -7920,7 +7920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *
  * 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.
@@ -7956,7 +7956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *
  * 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>
@@ -14882,93 +14882,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             }] } });
 /**
- * SUI Tabs — SUI Design System 2.0
+ * 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
  *
- * 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'
+ * 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).
+ */
+class SuiTabMenuHorizontal {
+    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    active = model(...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    tabChange = output();
+    isActive(tab) {
+        return this.active() === tab.value;
+    }
+    select(tab) {
+        if (tab.disabled)
+            return;
+        this.active.set(tab.value);
+        this.tabChange.emit(tab.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabMenuHorizontal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabMenuHorizontal, isStandalone: true, selector: "sui-tab-menu-horizontal", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", tabChange: "tabChange" }, host: { properties: { "attr.data-sui-size": "size()" } }, ngImport: i0, template: "<!-- Tab Menu Horizontal \u2014 pesta\u00F1as con subrayado (Figma 3511:9958) -->\n<div class=\"sui-tab-menu-horizontal__track\" role=\"tablist\">\n  @for (tab of tabs(); track tab.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-menu-horizontal__item\"\n      [class.sui-tab-menu-horizontal__item--active]=\"isActive(tab)\"\n      [disabled]=\"tab.disabled\"\n      [attr.aria-selected]=\"isActive(tab)\"\n      [attr.aria-disabled]=\"tab.disabled ? true : null\"\n      role=\"tab\"\n      (click)=\"select(tab)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      @if (tab.icon) {\n        <sui-icon class=\"sui-tab-menu-horizontal__leading\" [name]=\"tab.icon\" [size]=\"20\" />\n      }\n      <span class=\"sui-tab-menu-horizontal__text\">\n        <span class=\"sui-tab-menu-horizontal__label\">{{ tab.label }}</span>\n        @if (tab.number) {\n          <span class=\"sui-tab-menu-horizontal__badge\">{{ tab.number }}</span>\n        }\n      </span>\n      @if (tab.rightIcon) {\n        <span class=\"sui-tab-menu-horizontal__chevron\">\n          <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n        </span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-tab-menu-horizontal__track{display:flex;align-items:flex-start;gap:24px;padding:14px 0;border-top:1px solid var(--sui-stroke-soft-200);border-bottom:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-sizing:border-box;width:100%}.sui-tab-menu-horizontal__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:12px;padding:2px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);color:var(--sui-static-white);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;text-transform:uppercase}.sui-tab-menu-horizontal__item{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0;border:none;background:transparent;cursor:pointer;position:relative;flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-sub-600);white-space:nowrap;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__leading{flex-shrink:0}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__text{display:inline-flex;align-items:center;gap:4px;min-width:0}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);overflow:hidden;color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:after{content:\"\";position:absolute;bottom:-14px;left:0;right:0;height:2px;background:transparent;transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tab-menu-horizontal__item--active{color:var(--sui-text-strong-950)}.sui-tab-menu-horizontal__item--active .sui-tab-menu-horizontal__leading{color:var(--sui-icon-strong-950)}.sui-tab-menu-horizontal__item--active:after{background:var(--sui-primary-base)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active){color:var(--sui-text-strong-950)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active) .sui-tab-menu-horizontal__leading{color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active) .sui-tab-menu-horizontal__chevron{color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:disabled{cursor:not-allowed;opacity:.4}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabMenuHorizontal, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-tab-menu-horizontal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
+                        '[attr.data-sui-size]': 'size()',
+                    }, template: "<!-- Tab Menu Horizontal \u2014 pesta\u00F1as con subrayado (Figma 3511:9958) -->\n<div class=\"sui-tab-menu-horizontal__track\" role=\"tablist\">\n  @for (tab of tabs(); track tab.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-menu-horizontal__item\"\n      [class.sui-tab-menu-horizontal__item--active]=\"isActive(tab)\"\n      [disabled]=\"tab.disabled\"\n      [attr.aria-selected]=\"isActive(tab)\"\n      [attr.aria-disabled]=\"tab.disabled ? true : null\"\n      role=\"tab\"\n      (click)=\"select(tab)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      @if (tab.icon) {\n        <sui-icon class=\"sui-tab-menu-horizontal__leading\" [name]=\"tab.icon\" [size]=\"20\" />\n      }\n      <span class=\"sui-tab-menu-horizontal__text\">\n        <span class=\"sui-tab-menu-horizontal__label\">{{ tab.label }}</span>\n        @if (tab.number) {\n          <span class=\"sui-tab-menu-horizontal__badge\">{{ tab.number }}</span>\n        }\n      </span>\n      @if (tab.rightIcon) {\n        <span class=\"sui-tab-menu-horizontal__chevron\">\n          <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n        </span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-tab-menu-horizontal__track{display:flex;align-items:flex-start;gap:24px;padding:14px 0;border-top:1px solid var(--sui-stroke-soft-200);border-bottom:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-sizing:border-box;width:100%}.sui-tab-menu-horizontal__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:12px;padding:2px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);color:var(--sui-static-white);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;text-transform:uppercase}.sui-tab-menu-horizontal__item{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0;border:none;background:transparent;cursor:pointer;position:relative;flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-sub-600);white-space:nowrap;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__leading{flex-shrink:0}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__text{display:inline-flex;align-items:center;gap:4px;min-width:0}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);overflow:hidden;color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:after{content:\"\";position:absolute;bottom:-14px;left:0;right:0;height:2px;background:transparent;transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tab-menu-horizontal__item--active{color:var(--sui-text-strong-950)}.sui-tab-menu-horizontal__item--active .sui-tab-menu-horizontal__leading{color:var(--sui-icon-strong-950)}.sui-tab-menu-horizontal__item--active:after{background:var(--sui-primary-base)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active){color:var(--sui-text-strong-950)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active) .sui-tab-menu-horizontal__leading{color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active) .sui-tab-menu-horizontal__chevron{color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:disabled{cursor:not-allowed;opacity:.4}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
+/**
+ * SUI Tab Menu Vertical — SUI Design System 2.0
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * 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).
+ *   - 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).
  */
-class SuiTabs {
+class SuiTabMenuVertical {
     tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     active = model(...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
-    variant = input('line', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    /** Estilo del contenedor cuando variant='vertical' (Card|List). */
-    verticalStyle = input('card', ...(ngDevMode ? [{ debugName: "verticalStyle" }] : /* istanbul ignore next */ []));
+    /** Estilo del contenedor: Card (borde/fondo/sombra) o List (plano). */
+    menuStyle = input('card', ...(ngDevMode ? [{ debugName: "menuStyle" }] : /* istanbul ignore next */ []));
     /**
-     * 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.
      */
     dividerLabel = input('', ...(ngDevMode ? [{ debugName: "dividerLabel" }] : /* istanbul ignore next */ []));
     tabChange = output();
+    isActive(tab) {
+        return this.active() === tab.value;
+    }
+    select(tab) {
+        if (tab.disabled)
+            return;
+        this.active.set(tab.value);
+        this.tabChange.emit(tab.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabMenuVertical, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabMenuVertical, isStandalone: true, selector: "sui-tab-menu-vertical", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, menuStyle: { classPropertyName: "menuStyle", publicName: "menuStyle", isSignal: true, isRequired: false, transformFunction: null }, dividerLabel: { classPropertyName: "dividerLabel", publicName: "dividerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", tabChange: "tabChange" }, host: { properties: { "attr.data-sui-style": "menuStyle()" } }, ngImport: i0, template: "<!-- Tab Menu Vertical \u2014 sidebar nav (Figma 3516:10411, Style=Card|List) -->\n<div class=\"sui-tab-menu-vertical__track\" role=\"tablist\">\n  @if (dividerLabel()) {\n    <div class=\"sui-tab-menu-vertical__divider\">{{ dividerLabel() }}</div>\n  }\n  @for (tab of tabs(); track tab.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-menu-vertical__item\"\n      [class.sui-tab-menu-vertical__item--active]=\"isActive(tab)\"\n      [disabled]=\"tab.disabled\"\n      [attr.aria-selected]=\"isActive(tab)\"\n      [attr.aria-disabled]=\"tab.disabled ? true : null\"\n      role=\"tab\"\n      (click)=\"select(tab)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      @if (tab.icon) {\n        <sui-icon class=\"sui-tab-menu-vertical__leading\" [name]=\"tab.icon\" [size]=\"20\" />\n      }\n      <span class=\"sui-tab-menu-vertical__label\">{{ tab.label }}</span>\n      @if (tab.number) {\n        <span class=\"sui-tab-menu-vertical__badge\">{{ tab.number }}</span>\n      }\n      @if (tab.rightIcon) {\n        <span class=\"sui-tab-menu-vertical__chevron\">\n          <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n        </span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-tab-menu-vertical__track{display:flex;flex-direction:column;align-items:stretch;gap:8px;box-sizing:border-box;width:100%}:host([data-sui-style=card]) .sui-tab-menu-vertical__track{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);overflow:hidden}:host([data-sui-style=list]) .sui-tab-menu-vertical__track{padding:0;border:none;background:transparent;box-shadow:none}.sui-tab-menu-vertical__divider{display:flex;align-items:center;padding:4px 8px;color:var(--sui-text-soft-400);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-xs-size);font-weight:var(--sui-type-subheading-xs-weight);line-height:var(--sui-type-subheading-xs-line);letter-spacing:var(--sui-type-subheading-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-transform:uppercase}.sui-tab-menu-vertical__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:12px;padding:2px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);color:var(--sui-static-white);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;text-transform:uppercase}.sui-tab-menu-vertical__item{display:flex;align-items:center;gap:6px;padding:8px;border:none;border-radius:var(--sui-radius-8);background:transparent;cursor:pointer;text-align:left;box-sizing:border-box;width:100%;overflow:hidden;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);color:var(--sui-text-sub-600)}.sui-tab-menu-vertical__item .sui-tab-menu-vertical__leading{flex-shrink:0}.sui-tab-menu-vertical__item .sui-tab-menu-vertical__label{flex:1 0 0;min-width:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sui-tab-menu-vertical__item .sui-tab-menu-vertical__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);color:var(--sui-icon-sub-600)}.sui-tab-menu-vertical__item--active{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tab-menu-vertical__item--active .sui-tab-menu-vertical__leading{color:var(--sui-primary-base)}.sui-tab-menu-vertical__item:hover:not(:disabled):not(.sui-tab-menu-vertical__item--active){background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tab-menu-vertical__item:disabled{cursor:not-allowed;opacity:.4}:host([data-sui-style=card]) .sui-tab-menu-vertical__item:not(.sui-tab-menu-vertical__item--active):not(:hover){background:var(--sui-bg-white-0)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabMenuVertical, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-tab-menu-vertical', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
+                        '[attr.data-sui-style]': 'menuStyle()',
+                    }, template: "<!-- Tab Menu Vertical \u2014 sidebar nav (Figma 3516:10411, Style=Card|List) -->\n<div class=\"sui-tab-menu-vertical__track\" role=\"tablist\">\n  @if (dividerLabel()) {\n    <div class=\"sui-tab-menu-vertical__divider\">{{ dividerLabel() }}</div>\n  }\n  @for (tab of tabs(); track tab.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-menu-vertical__item\"\n      [class.sui-tab-menu-vertical__item--active]=\"isActive(tab)\"\n      [disabled]=\"tab.disabled\"\n      [attr.aria-selected]=\"isActive(tab)\"\n      [attr.aria-disabled]=\"tab.disabled ? true : null\"\n      role=\"tab\"\n      (click)=\"select(tab)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      @if (tab.icon) {\n        <sui-icon class=\"sui-tab-menu-vertical__leading\" [name]=\"tab.icon\" [size]=\"20\" />\n      }\n      <span class=\"sui-tab-menu-vertical__label\">{{ tab.label }}</span>\n      @if (tab.number) {\n        <span class=\"sui-tab-menu-vertical__badge\">{{ tab.number }}</span>\n      }\n      @if (tab.rightIcon) {\n        <span class=\"sui-tab-menu-vertical__chevron\">\n          <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n        </span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-tab-menu-vertical__track{display:flex;flex-direction:column;align-items:stretch;gap:8px;box-sizing:border-box;width:100%}:host([data-sui-style=card]) .sui-tab-menu-vertical__track{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);overflow:hidden}:host([data-sui-style=list]) .sui-tab-menu-vertical__track{padding:0;border:none;background:transparent;box-shadow:none}.sui-tab-menu-vertical__divider{display:flex;align-items:center;padding:4px 8px;color:var(--sui-text-soft-400);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-xs-size);font-weight:var(--sui-type-subheading-xs-weight);line-height:var(--sui-type-subheading-xs-line);letter-spacing:var(--sui-type-subheading-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-transform:uppercase}.sui-tab-menu-vertical__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:12px;padding:2px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);color:var(--sui-static-white);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;text-transform:uppercase}.sui-tab-menu-vertical__item{display:flex;align-items:center;gap:6px;padding:8px;border:none;border-radius:var(--sui-radius-8);background:transparent;cursor:pointer;text-align:left;box-sizing:border-box;width:100%;overflow:hidden;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);color:var(--sui-text-sub-600)}.sui-tab-menu-vertical__item .sui-tab-menu-vertical__leading{flex-shrink:0}.sui-tab-menu-vertical__item .sui-tab-menu-vertical__label{flex:1 0 0;min-width:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sui-tab-menu-vertical__item .sui-tab-menu-vertical__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);color:var(--sui-icon-sub-600)}.sui-tab-menu-vertical__item--active{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tab-menu-vertical__item--active .sui-tab-menu-vertical__leading{color:var(--sui-primary-base)}.sui-tab-menu-vertical__item:hover:not(:disabled):not(.sui-tab-menu-vertical__item--active){background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tab-menu-vertical__item:disabled{cursor:not-allowed;opacity:.4}:host([data-sui-style=card]) .sui-tab-menu-vertical__item:not(.sui-tab-menu-vertical__item--active):not(:hover){background:var(--sui-bg-white-0)}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], menuStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuStyle", required: false }] }], dividerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerLabel", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
+/**
+ * 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.
+ */
+class SuiSegmentedControl {
+    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    active = model(...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    tabChange = output();
     segmentItems;
     segmentTrack;
     indicatorStyle = signal({
@@ -15024,17 +15108,15 @@ class SuiTabs {
         this.active.set(tab.value);
         this.tabChange.emit(tab.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabs, isStandalone: true, selector: "sui-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, verticalStyle: { classPropertyName: "verticalStyle", publicName: "verticalStyle", isSignal: true, isRequired: false, transformFunction: null }, dividerLabel: { classPropertyName: "dividerLabel", publicName: "dividerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", tabChange: "tabChange" }, host: { properties: { "attr.data-sui-variant": "variant()", "attr.data-sui-size": "size()", "attr.data-sui-vstyle": "variant() === 'vertical' ? verticalStyle() : null" } }, viewQueries: [{ propertyName: "segmentTrack", first: true, predicate: ["segmentTrack"], descendants: true }, { propertyName: "segmentItems", predicate: ["segmentItem"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (variant() === 'segment') {\n  <!-- Segment variant: pill/segmented control (iOS-like) \u2014 SUI Segmented Control [1.1] -->\n  <div #segmentTrack class=\"sui-tabs__segment-track\" role=\"tablist\">\n    <div\n      class=\"sui-tabs__segment-indicator\"\n      [style.transform]=\"indicatorStyle().transform\"\n      [style.width]=\"indicatorStyle().width\"\n    ></div>\n    @for (tab of tabs(); track tab.value) {\n      <button\n        #segmentItem\n        type=\"button\"\n        class=\"sui-tabs__segment-item\"\n        [class.sui-tabs__segment-item--active]=\"isActive(tab)\"\n        [class.sui-tabs__segment-item--icon-only]=\"tab.iconOnly && tab.icon\"\n        [disabled]=\"tab.disabled\"\n        [attr.aria-selected]=\"isActive(tab)\"\n        [attr.aria-disabled]=\"tab.disabled ? true : null\"\n        [attr.aria-label]=\"tab.iconOnly && tab.icon ? tab.label : null\"\n        role=\"tab\"\n        (click)=\"select(tab)\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\"\n      >\n        @if (tab.icon) {\n          <sui-icon [name]=\"tab.icon\" [size]=\"20\" />\n        }\n        @if (!tab.iconOnly) {\n          <span>{{ tab.label }}</span>\n        }\n      </button>\n    }\n  </div>\n\n} @else if (variant() === 'vertical') {\n  <!-- Vertical variant: sidebar nav \u2014 SUI Tab Menu Vertical [1.1] (Card|List) -->\n  <div class=\"sui-tabs__vertical-track\" role=\"tablist\">\n    @if (dividerLabel()) {\n      <div class=\"sui-tabs__vertical-divider\">{{ dividerLabel() }}</div>\n    }\n    @for (tab of tabs(); track tab.value) {\n      <button\n        type=\"button\"\n        class=\"sui-tabs__vertical-item\"\n        [class.sui-tabs__vertical-item--active]=\"isActive(tab)\"\n        [disabled]=\"tab.disabled\"\n        [attr.aria-selected]=\"isActive(tab)\"\n        [attr.aria-disabled]=\"tab.disabled ? true : null\"\n        role=\"tab\"\n        (click)=\"select(tab)\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\"\n      >\n        @if (tab.icon) {\n          <sui-icon class=\"sui-tabs__vertical-leading\" [name]=\"tab.icon\" [size]=\"20\" />\n        }\n        <span class=\"sui-tabs__vertical-label\">{{ tab.label }}</span>\n        @if (tab.badge) {\n          <span class=\"sui-tabs__badge\">{{ tab.badge }}</span>\n        }\n        @if (tab.chevron) {\n          <span class=\"sui-tabs__chevron\">\n            <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n          </span>\n        }\n      </button>\n    }\n  </div>\n\n} @else {\n  <!-- Line variant: underline tabs \u2014 SUI Tab Menu Horizontal [1.1] -->\n  <div class=\"sui-tabs__line-track\" role=\"tablist\">\n    @for (tab of tabs(); track tab.value) {\n      <button\n        type=\"button\"\n        class=\"sui-tabs__line-item\"\n        [class.sui-tabs__line-item--active]=\"isActive(tab)\"\n        [disabled]=\"tab.disabled\"\n        [attr.aria-selected]=\"isActive(tab)\"\n        [attr.aria-disabled]=\"tab.disabled ? true : null\"\n        role=\"tab\"\n        (click)=\"select(tab)\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\"\n      >\n        @if (tab.icon) {\n          <sui-icon class=\"sui-tabs__line-leading\" [name]=\"tab.icon\" [size]=\"20\" />\n        }\n        <span class=\"sui-tabs__line-text\">\n          <span class=\"sui-tabs__line-label\">{{ tab.label }}</span>\n          @if (tab.badge) {\n            <span class=\"sui-tabs__badge\">{{ tab.badge }}</span>\n          }\n        </span>\n        @if (tab.chevron) {\n          <span class=\"sui-tabs__line-chevron\">\n            <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n          </span>\n        }\n      </button>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-tabs__segment-track{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-tabs__segment-indicator{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px #0e121b0f,0 2px 4px #0e121b08;transition:transform var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1),width var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}.sui-tabs__segment-item{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-soft-400);text-align:center;white-space:nowrap}.sui-tabs__segment-item--icon-only{gap:0}.sui-tabs__segment-item--active{color:var(--sui-text-strong-950)}.sui-tabs__segment-item:hover:not(:disabled):not(.sui-tabs__segment-item--active){color:var(--sui-text-sub-600)}.sui-tabs__segment-item:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}.sui-tabs__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:12px;padding:2px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);color:var(--sui-static-white);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;text-transform:uppercase}.sui-tabs__line-track{display:flex;align-items:flex-start;gap:24px;padding:14px 0;border-top:1px solid var(--sui-stroke-soft-200);border-bottom:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-sizing:border-box;width:100%}.sui-tabs__line-item{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0;border:none;background:transparent;cursor:pointer;position:relative;flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-sub-600);white-space:nowrap;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tabs__line-item .sui-tabs__line-leading{flex-shrink:0}.sui-tabs__line-item .sui-tabs__line-text{display:inline-flex;align-items:center;gap:4px;min-width:0}.sui-tabs__line-item .sui-tabs__line-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);overflow:hidden;color:var(--sui-icon-sub-600)}.sui-tabs__line-item:after{content:\"\";position:absolute;bottom:-14px;left:0;right:0;height:2px;background:transparent;transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tabs__line-item--active{color:var(--sui-text-strong-950)}.sui-tabs__line-item--active .sui-tabs__line-leading{color:var(--sui-icon-strong-950)}.sui-tabs__line-item--active:after{background:var(--sui-primary-base)}.sui-tabs__line-item:hover:not(:disabled):not(.sui-tabs__line-item--active){color:var(--sui-text-strong-950)}.sui-tabs__line-item:hover:not(:disabled):not(.sui-tabs__line-item--active) .sui-tabs__line-leading{color:var(--sui-icon-sub-600)}.sui-tabs__line-item:hover:not(:disabled):not(.sui-tabs__line-item--active) .sui-tabs__line-chevron{color:var(--sui-icon-sub-600)}.sui-tabs__line-item:disabled{cursor:not-allowed;opacity:.4}.sui-tabs__vertical-track{display:flex;flex-direction:column;align-items:stretch;gap:8px;box-sizing:border-box;width:100%}:host([data-sui-vstyle=card]) .sui-tabs__vertical-track{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);overflow:hidden}:host([data-sui-vstyle=list]) .sui-tabs__vertical-track{padding:0;border:none;background:transparent;box-shadow:none}.sui-tabs__vertical-divider{display:flex;align-items:center;padding:4px 8px;color:var(--sui-text-soft-400);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-xs-size);font-weight:var(--sui-type-subheading-xs-weight);line-height:var(--sui-type-subheading-xs-line);letter-spacing:var(--sui-type-subheading-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-transform:uppercase}.sui-tabs__vertical-item{display:flex;align-items:center;gap:6px;padding:8px;border:none;border-radius:var(--sui-radius-8);background:transparent;cursor:pointer;text-align:left;box-sizing:border-box;width:100%;overflow:hidden;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);color:var(--sui-text-sub-600)}.sui-tabs__vertical-item .sui-tabs__vertical-leading{flex-shrink:0}.sui-tabs__vertical-item .sui-tabs__vertical-label{flex:1 0 0;min-width:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sui-tabs__vertical-item .sui-tabs__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);color:var(--sui-icon-sub-600)}.sui-tabs__vertical-item--active{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tabs__vertical-item--active .sui-tabs__vertical-leading{color:var(--sui-primary-base)}.sui-tabs__vertical-item:hover:not(:disabled):not(.sui-tabs__vertical-item--active){background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tabs__vertical-item:disabled{cursor:not-allowed;opacity:.4}:host([data-sui-vstyle=card]) .sui-tabs__vertical-item:not(.sui-tabs__vertical-item--active):not(:hover){background:var(--sui-bg-white-0)}:host([data-sui-size=small]) .sui-tabs__segment-item{font-size:var(--sui-type-label-xs-size)}:host([data-sui-size=large]) .sui-tabs__segment-item{padding:6px}:host([data-sui-size=xlarge]) .sui-tabs__segment-item{padding:8px;font-size:var(--sui-type-label-md-size);line-height:var(--sui-type-label-md-line)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSegmentedControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSegmentedControl, isStandalone: true, selector: "sui-segmented-control", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", tabChange: "tabChange" }, host: { properties: { "attr.data-sui-size": "size()" } }, viewQueries: [{ propertyName: "segmentTrack", first: true, predicate: ["segmentTrack"], descendants: true }, { propertyName: "segmentItems", predicate: ["segmentItem"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!-- Segmented Control \u2014 pill iOS con indicador animado (Figma 2604:114) -->\n<div #segmentTrack class=\"sui-segmented-control__track\" role=\"tablist\">\n  <div\n    class=\"sui-segmented-control__indicator\"\n    [style.transform]=\"indicatorStyle().transform\"\n    [style.width]=\"indicatorStyle().width\"\n  ></div>\n  @for (tab of tabs(); track tab.value) {\n    <button\n      #segmentItem\n      type=\"button\"\n      class=\"sui-segmented-control__item\"\n      [class.sui-segmented-control__item--active]=\"isActive(tab)\"\n      [class.sui-segmented-control__item--icon-only]=\"tab.iconOnly && tab.icon\"\n      [disabled]=\"tab.disabled\"\n      [attr.aria-selected]=\"isActive(tab)\"\n      [attr.aria-disabled]=\"tab.disabled ? true : null\"\n      [attr.aria-label]=\"tab.iconOnly && tab.icon ? tab.label : null\"\n      role=\"tab\"\n      (click)=\"select(tab)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      @if (tab.icon) {\n        <sui-icon [name]=\"tab.icon\" [size]=\"20\" />\n      }\n      @if (!tab.iconOnly) {\n        <span>{{ tab.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-segmented-control__track{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-segmented-control__indicator{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px #0e121b0f,0 2px 4px #0e121b08;transition:transform var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1),width var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}.sui-segmented-control__item{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-soft-400);text-align:center;white-space:nowrap}.sui-segmented-control__item--icon-only{gap:0}.sui-segmented-control__item--active{color:var(--sui-text-strong-950)}.sui-segmented-control__item:hover:not(:disabled):not(.sui-segmented-control__item--active){color:var(--sui-text-sub-600)}.sui-segmented-control__item:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}:host([data-sui-size=small]) .sui-segmented-control__item{font-size:var(--sui-type-label-xs-size)}:host([data-sui-size=large]) .sui-segmented-control__item{padding:6px}:host([data-sui-size=xlarge]) .sui-segmented-control__item{padding:8px;font-size:var(--sui-type-label-md-size);line-height:var(--sui-type-label-md-line)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSegmentedControl, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-tabs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
-                        '[attr.data-sui-variant]': 'variant()',
+            args: [{ selector: 'sui-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
                         '[attr.data-sui-size]': 'size()',
-                        '[attr.data-sui-vstyle]': "variant() === 'vertical' ? verticalStyle() : null",
-                    }, template: "@if (variant() === 'segment') {\n  <!-- Segment variant: pill/segmented control (iOS-like) \u2014 SUI Segmented Control [1.1] -->\n  <div #segmentTrack class=\"sui-tabs__segment-track\" role=\"tablist\">\n    <div\n      class=\"sui-tabs__segment-indicator\"\n      [style.transform]=\"indicatorStyle().transform\"\n      [style.width]=\"indicatorStyle().width\"\n    ></div>\n    @for (tab of tabs(); track tab.value) {\n      <button\n        #segmentItem\n        type=\"button\"\n        class=\"sui-tabs__segment-item\"\n        [class.sui-tabs__segment-item--active]=\"isActive(tab)\"\n        [class.sui-tabs__segment-item--icon-only]=\"tab.iconOnly && tab.icon\"\n        [disabled]=\"tab.disabled\"\n        [attr.aria-selected]=\"isActive(tab)\"\n        [attr.aria-disabled]=\"tab.disabled ? true : null\"\n        [attr.aria-label]=\"tab.iconOnly && tab.icon ? tab.label : null\"\n        role=\"tab\"\n        (click)=\"select(tab)\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\"\n      >\n        @if (tab.icon) {\n          <sui-icon [name]=\"tab.icon\" [size]=\"20\" />\n        }\n        @if (!tab.iconOnly) {\n          <span>{{ tab.label }}</span>\n        }\n      </button>\n    }\n  </div>\n\n} @else if (variant() === 'vertical') {\n  <!-- Vertical variant: sidebar nav \u2014 SUI Tab Menu Vertical [1.1] (Card|List) -->\n  <div class=\"sui-tabs__vertical-track\" role=\"tablist\">\n    @if (dividerLabel()) {\n      <div class=\"sui-tabs__vertical-divider\">{{ dividerLabel() }}</div>\n    }\n    @for (tab of tabs(); track tab.value) {\n      <button\n        type=\"button\"\n        class=\"sui-tabs__vertical-item\"\n        [class.sui-tabs__vertical-item--active]=\"isActive(tab)\"\n        [disabled]=\"tab.disabled\"\n        [attr.aria-selected]=\"isActive(tab)\"\n        [attr.aria-disabled]=\"tab.disabled ? true : null\"\n        role=\"tab\"\n        (click)=\"select(tab)\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\"\n      >\n        @if (tab.icon) {\n          <sui-icon class=\"sui-tabs__vertical-leading\" [name]=\"tab.icon\" [size]=\"20\" />\n        }\n        <span class=\"sui-tabs__vertical-label\">{{ tab.label }}</span>\n        @if (tab.badge) {\n          <span class=\"sui-tabs__badge\">{{ tab.badge }}</span>\n        }\n        @if (tab.chevron) {\n          <span class=\"sui-tabs__chevron\">\n            <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n          </span>\n        }\n      </button>\n    }\n  </div>\n\n} @else {\n  <!-- Line variant: underline tabs \u2014 SUI Tab Menu Horizontal [1.1] -->\n  <div class=\"sui-tabs__line-track\" role=\"tablist\">\n    @for (tab of tabs(); track tab.value) {\n      <button\n        type=\"button\"\n        class=\"sui-tabs__line-item\"\n        [class.sui-tabs__line-item--active]=\"isActive(tab)\"\n        [disabled]=\"tab.disabled\"\n        [attr.aria-selected]=\"isActive(tab)\"\n        [attr.aria-disabled]=\"tab.disabled ? true : null\"\n        role=\"tab\"\n        (click)=\"select(tab)\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\"\n      >\n        @if (tab.icon) {\n          <sui-icon class=\"sui-tabs__line-leading\" [name]=\"tab.icon\" [size]=\"20\" />\n        }\n        <span class=\"sui-tabs__line-text\">\n          <span class=\"sui-tabs__line-label\">{{ tab.label }}</span>\n          @if (tab.badge) {\n            <span class=\"sui-tabs__badge\">{{ tab.badge }}</span>\n          }\n        </span>\n        @if (tab.chevron) {\n          <span class=\"sui-tabs__line-chevron\">\n            <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n          </span>\n        }\n      </button>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-tabs__segment-track{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-tabs__segment-indicator{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px #0e121b0f,0 2px 4px #0e121b08;transition:transform var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1),width var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}.sui-tabs__segment-item{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-soft-400);text-align:center;white-space:nowrap}.sui-tabs__segment-item--icon-only{gap:0}.sui-tabs__segment-item--active{color:var(--sui-text-strong-950)}.sui-tabs__segment-item:hover:not(:disabled):not(.sui-tabs__segment-item--active){color:var(--sui-text-sub-600)}.sui-tabs__segment-item:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}.sui-tabs__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:12px;padding:2px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);color:var(--sui-static-white);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;text-transform:uppercase}.sui-tabs__line-track{display:flex;align-items:flex-start;gap:24px;padding:14px 0;border-top:1px solid var(--sui-stroke-soft-200);border-bottom:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-sizing:border-box;width:100%}.sui-tabs__line-item{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0;border:none;background:transparent;cursor:pointer;position:relative;flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-sub-600);white-space:nowrap;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tabs__line-item .sui-tabs__line-leading{flex-shrink:0}.sui-tabs__line-item .sui-tabs__line-text{display:inline-flex;align-items:center;gap:4px;min-width:0}.sui-tabs__line-item .sui-tabs__line-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);overflow:hidden;color:var(--sui-icon-sub-600)}.sui-tabs__line-item:after{content:\"\";position:absolute;bottom:-14px;left:0;right:0;height:2px;background:transparent;transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tabs__line-item--active{color:var(--sui-text-strong-950)}.sui-tabs__line-item--active .sui-tabs__line-leading{color:var(--sui-icon-strong-950)}.sui-tabs__line-item--active:after{background:var(--sui-primary-base)}.sui-tabs__line-item:hover:not(:disabled):not(.sui-tabs__line-item--active){color:var(--sui-text-strong-950)}.sui-tabs__line-item:hover:not(:disabled):not(.sui-tabs__line-item--active) .sui-tabs__line-leading{color:var(--sui-icon-sub-600)}.sui-tabs__line-item:hover:not(:disabled):not(.sui-tabs__line-item--active) .sui-tabs__line-chevron{color:var(--sui-icon-sub-600)}.sui-tabs__line-item:disabled{cursor:not-allowed;opacity:.4}.sui-tabs__vertical-track{display:flex;flex-direction:column;align-items:stretch;gap:8px;box-sizing:border-box;width:100%}:host([data-sui-vstyle=card]) .sui-tabs__vertical-track{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);overflow:hidden}:host([data-sui-vstyle=list]) .sui-tabs__vertical-track{padding:0;border:none;background:transparent;box-shadow:none}.sui-tabs__vertical-divider{display:flex;align-items:center;padding:4px 8px;color:var(--sui-text-soft-400);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-xs-size);font-weight:var(--sui-type-subheading-xs-weight);line-height:var(--sui-type-subheading-xs-line);letter-spacing:var(--sui-type-subheading-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-transform:uppercase}.sui-tabs__vertical-item{display:flex;align-items:center;gap:6px;padding:8px;border:none;border-radius:var(--sui-radius-8);background:transparent;cursor:pointer;text-align:left;box-sizing:border-box;width:100%;overflow:hidden;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);color:var(--sui-text-sub-600)}.sui-tabs__vertical-item .sui-tabs__vertical-leading{flex-shrink:0}.sui-tabs__vertical-item .sui-tabs__vertical-label{flex:1 0 0;min-width:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sui-tabs__vertical-item .sui-tabs__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);color:var(--sui-icon-sub-600)}.sui-tabs__vertical-item--active{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tabs__vertical-item--active .sui-tabs__vertical-leading{color:var(--sui-primary-base)}.sui-tabs__vertical-item:hover:not(:disabled):not(.sui-tabs__vertical-item--active){background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tabs__vertical-item:disabled{cursor:not-allowed;opacity:.4}:host([data-sui-vstyle=card]) .sui-tabs__vertical-item:not(.sui-tabs__vertical-item--active):not(:hover){background:var(--sui-bg-white-0)}:host([data-sui-size=small]) .sui-tabs__segment-item{font-size:var(--sui-type-label-xs-size)}:host([data-sui-size=large]) .sui-tabs__segment-item{padding:6px}:host([data-sui-size=xlarge]) .sui-tabs__segment-item{padding:8px;font-size:var(--sui-type-label-md-size);line-height:var(--sui-type-label-md-line)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], verticalStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalStyle", required: false }] }], dividerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerLabel", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], segmentItems: [{
+                    }, template: "<!-- Segmented Control \u2014 pill iOS con indicador animado (Figma 2604:114) -->\n<div #segmentTrack class=\"sui-segmented-control__track\" role=\"tablist\">\n  <div\n    class=\"sui-segmented-control__indicator\"\n    [style.transform]=\"indicatorStyle().transform\"\n    [style.width]=\"indicatorStyle().width\"\n  ></div>\n  @for (tab of tabs(); track tab.value) {\n    <button\n      #segmentItem\n      type=\"button\"\n      class=\"sui-segmented-control__item\"\n      [class.sui-segmented-control__item--active]=\"isActive(tab)\"\n      [class.sui-segmented-control__item--icon-only]=\"tab.iconOnly && tab.icon\"\n      [disabled]=\"tab.disabled\"\n      [attr.aria-selected]=\"isActive(tab)\"\n      [attr.aria-disabled]=\"tab.disabled ? true : null\"\n      [attr.aria-label]=\"tab.iconOnly && tab.icon ? tab.label : null\"\n      role=\"tab\"\n      (click)=\"select(tab)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      @if (tab.icon) {\n        <sui-icon [name]=\"tab.icon\" [size]=\"20\" />\n      }\n      @if (!tab.iconOnly) {\n        <span>{{ tab.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-segmented-control__track{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-segmented-control__indicator{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px #0e121b0f,0 2px 4px #0e121b08;transition:transform var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1),width var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}.sui-segmented-control__item{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-soft-400);text-align:center;white-space:nowrap}.sui-segmented-control__item--icon-only{gap:0}.sui-segmented-control__item--active{color:var(--sui-text-strong-950)}.sui-segmented-control__item:hover:not(:disabled):not(.sui-segmented-control__item--active){color:var(--sui-text-sub-600)}.sui-segmented-control__item:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}:host([data-sui-size=small]) .sui-segmented-control__item{font-size:var(--sui-type-label-xs-size)}:host([data-sui-size=large]) .sui-segmented-control__item{padding:6px}:host([data-sui-size=xlarge]) .sui-segmented-control__item{padding:8px;font-size:var(--sui-type-label-md-size);line-height:var(--sui-type-label-md-line)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], segmentItems: [{
                 type: ViewChildren,
                 args: ['segmentItem', { read: ElementRef }]
             }], segmentTrack: [{
@@ -16719,5 +16801,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
-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 { 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, 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 };
 //# sourceMappingURL=ajuarezso-sui-design-system.mjs.map