@ajuarezso/sui-design-system 0.2.7 → 0.4.0

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, input, computed, ChangeDetectionStrategy, Component, model, signal, viewChild, effect, untracked, output, inject, ElementRef, forwardRef, TemplateRef, Directive, ViewContainerRef, DestroyRef, ContentChild, ViewChild, ViewEncapsulation, Renderer2, DOCUMENT, HostListener, viewChildren, afterNextRender, ContentChildren, ViewChildren, Injectable } from '@angular/core';
-import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1 } from '@angular/common';
+import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1, NgOptimizedImage } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
@@ -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>
@@ -13971,6 +13971,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ selector: 'sui-store-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, SuiIcon], template: "<a class=\"store\"\n   [class.store--suspended]=\"store().isSuspended\"\n   [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n   [class.store--preview]=\"store().isOwnerPreview\"\n   [routerLink]=\"link()\"\n   (click)=\"onCardClick($event)\">\n\n  <div class=\"store__cover\"\n       [style.background-image]=\"store().coverUrl ? 'url(' + store().coverUrl + ')' : null\"\n       [class.store__cover--fallback]=\"!store().coverUrl\">\n    <div class=\"store__cover-grad\"></div>\n\n    @if (!store().isOwnerPreview) {\n      <button type=\"button\"\n              class=\"store__fav\"\n              [class.store__fav--active]=\"isFavorite()\"\n              (click)=\"onFavClick($event)\"\n              aria-label=\"Favorito\">\n        <sui-icon\n          [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n          [size]=\"18\"\n          color=\"#fa7319\"\n        ></sui-icon>\n      </button>\n    }\n\n    @if (store().isSuspended) {\n      <span class=\"store__status store__status--suspended\">No disponible</span>\n    } @else if (previewBadge(); as pb) {\n      <span class=\"store__status\"\n            [class.store__status--draft]=\"pb.variant === 'draft'\"\n            [class.store__status--pending]=\"pb.variant === 'pending'\"\n            [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n        {{ pb.label }}\n      </span>\n    } @else {\n      <span class=\"store__status\"\n            [class.store__status--open]=\"store().isOpen\"\n            [class.store__status--closed]=\"!store().isOpen\">\n        {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n      </span>\n    }\n  </div>\n\n  <div class=\"store__body\">\n    <div class=\"store__logo\">\n      @if (store().logoUrl) {\n        <img [src]=\"store().logoUrl\" [alt]=\"store().name\" (error)=\"$any($event).target.style.display='none'\" />\n      } @else {\n        {{ initial() }}\n      }\n    </div>\n    <div class=\"store__info\">\n      <h3 class=\"store__name\">{{ store().name }}</h3>\n      <p class=\"store__type\">{{ store().businessType }}</p>\n\n      @if (store().isOwnerPreview) {\n        <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n             solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n        <div class=\"store__meta store__meta--preview\">\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ store().district || '\u2014' }}\n            </span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Env\u00EDo</span>\n            <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n          </div>\n        </div>\n      } @else {\n        <div class=\"store__meta\">\n          <button\n            type=\"button\"\n            class=\"store__stat store__stat--clickable\"\n            (click)=\"onRatingClick($event)\"\n            (touchstart)=\"$event.currentTarget\"\n            (touchend)=\"$any($event.currentTarget).blur()\"\n            [attr.aria-label]=\"'Ver calificaciones del local'\"\n          >\n            <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ ratingLabel() }}\n            </span>\n          </button>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ store().district || '\u2014' }}\n            </span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Env\u00EDo</span>\n            <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Distancia</span>\n            <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;background:var(--sui-bg-soft-200, #e5e7eb);background-size:cover;background-position:center}.store__cover--fallback{background:linear-gradient(135deg,#fb9a56 0%,var(--sui-primary-base, #fa7319) 100%)}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:#c2530b;background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;gap:12px;align-items:flex-start}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-bg-white-0, #fff);border:2px solid var(--sui-bg-white-0, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}\n"] }]
         }], propDecorators: { store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: true }] }], isFavorite: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFavorite", required: false }] }], disableLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableLink", required: false }] }], toggleFavorite: [{ type: i0.Output, args: ["toggleFavorite"] }], ratingClicked: [{ type: i0.Output, args: ["ratingClicked"] }] } });
 
+/**
+ * Card de producto (catálogo del cliente). Presentacional: recibe los datos por
+ * inputs primitivos y emite eventos; el consumidor cablea el carrito.
+ *
+ * Fallback sin imagen — DOS variantes:
+ *  - `'name'` (default): banda de color centrada con el nombre en blanco. El
+ *    color se deriva del nombre (mismo producto → siempre el mismo color).
+ *  - `'icon'`: gradiente brand + ícono de imagen (el fallback histórico).
+ */
+/** Paleta del fallback `'name'` — colores saturados legibles con texto blanco. */
+const FALLBACK_COLORS = [
+    '#E7469A', '#CB2E2E', '#E8722A', '#0E9C93', '#3B6FE0',
+    '#8B4FD6', '#2FA24E', '#C68A12', '#D64550', '#4C86C4',
+];
+class SuiProductCard {
+    /** Nombre del producto (título de la card + fuente del color del fallback). */
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Descripción corta (1 línea, opcional). */
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Precio numérico; se formatea a 2 decimales. */
+    price = input.required(...(ngDevMode ? [{ debugName: "price" }] : /* istanbul ignore next */ []));
+    /** URL de la imagen. Ausente → se usa `fallbackVariant`. */
+    imageUrl = input(null, ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
+    /** Encuadre vertical de la imagen (CSS object-position Y, 0–100). */
+    imagePosition = input(50, ...(ngDevMode ? [{ debugName: "imagePosition" }] : /* istanbul ignore next */ []));
+    /** false → card atenuada + tag "Agotado", sin botón de agregar. */
+    available = input(true, ...(ngDevMode ? [{ debugName: "available" }] : /* istanbul ignore next */ []));
+    /** Cantidad en el carrito. > 0 → muestra el stepper en vez del botón "+". */
+    quantity = input(0, ...(ngDevMode ? [{ debugName: "quantity" }] : /* istanbul ignore next */ []));
+    /** Local cerrado → deshabilita agregar / incrementar. */
+    closed = input(false, ...(ngDevMode ? [{ debugName: "closed" }] : /* istanbul ignore next */ []));
+    /** Prefijo de moneda. */
+    currencySymbol = input('S/', ...(ngDevMode ? [{ debugName: "currencySymbol" }] : /* istanbul ignore next */ []));
+    /** Fallback sin imagen: `'name'` = banda de color + nombre; `'icon'` = ícono. */
+    fallbackVariant = input('name', ...(ngDevMode ? [{ debugName: "fallbackVariant" }] : /* istanbul ignore next */ []));
+    /** Texto del tag cuando no está disponible. */
+    unavailableLabel = input('Agotado', ...(ngDevMode ? [{ debugName: "unavailableLabel" }] : /* istanbul ignore next */ []));
+    /** Tap en la card (abrir detalle del producto). */
+    openDetail = output();
+    /** Tap en el botón "+" (agregar al carrito). */
+    add = output();
+    /** Tap en "+" del stepper (incrementar cantidad). */
+    increment = output();
+    /** Tap en "−" / basurero del stepper (decrementar / quitar). */
+    decrement = output();
+    formattedPrice = computed(() => (this.price() ?? 0).toFixed(2), ...(ngDevMode ? [{ debugName: "formattedPrice" }] : /* istanbul ignore next */ []));
+    showStepper = computed(() => this.available() && this.quantity() > 0, ...(ngDevMode ? [{ debugName: "showStepper" }] : /* istanbul ignore next */ []));
+    showNamedFallback = computed(() => !this.imageUrl() && this.fallbackVariant() === 'name', ...(ngDevMode ? [{ debugName: "showNamedFallback" }] : /* istanbul ignore next */ []));
+    showIconFallback = computed(() => !this.imageUrl() && this.fallbackVariant() === 'icon', ...(ngDevMode ? [{ debugName: "showIconFallback" }] : /* istanbul ignore next */ []));
+    /** Color estable derivado del nombre (hash → índice de paleta). */
+    fallbackColor = computed(() => {
+        const s = this.name() ?? '';
+        let h = 0;
+        for (let i = 0; i < s.length; i++)
+            h = (h * 31 + s.charCodeAt(i)) | 0;
+        return FALLBACK_COLORS[Math.abs(h) % FALLBACK_COLORS.length];
+    }, ...(ngDevMode ? [{ debugName: "fallbackColor" }] : /* istanbul ignore next */ []));
+    onCard() { this.openDetail.emit(); }
+    onAdd(event) { event.stopPropagation(); this.add.emit(); }
+    onInc(event) { event.stopPropagation(); this.increment.emit(); }
+    onDec(event) { event.stopPropagation(); this.decrement.emit(); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProductCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiProductCard, isStandalone: true, selector: "sui-product-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: true, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, imagePosition: { classPropertyName: "imagePosition", publicName: "imagePosition", isSignal: true, isRequired: false, transformFunction: null }, available: { classPropertyName: "available", publicName: "available", isSignal: true, isRequired: false, transformFunction: null }, quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null }, closed: { classPropertyName: "closed", publicName: "closed", isSignal: true, isRequired: false, transformFunction: null }, currencySymbol: { classPropertyName: "currencySymbol", publicName: "currencySymbol", isSignal: true, isRequired: false, transformFunction: null }, fallbackVariant: { classPropertyName: "fallbackVariant", publicName: "fallbackVariant", isSignal: true, isRequired: false, transformFunction: null }, unavailableLabel: { classPropertyName: "unavailableLabel", publicName: "unavailableLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openDetail: "openDetail", add: "add", increment: "increment", decrement: "decrement" }, ngImport: i0, template: "<button type=\"button\"\n        class=\"product\"\n        [class.product--unavailable]=\"!available()\"\n        (click)=\"onCard()\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\">\n  <div class=\"product__img\"\n       [class.product__img--icon]=\"showIconFallback()\"\n       [class.product__img--named]=\"showNamedFallback()\"\n       [style.--fallback-color]=\"showNamedFallback() ? fallbackColor() : null\">\n    @if (imageUrl()) {\n      <img [ngSrc]=\"imageUrl()!\" [alt]=\"name()\" fill\n           [style.object-position]=\"'center ' + imagePosition() + '%'\" />\n    } @else if (showNamedFallback()) {\n      <div class=\"product__band\">\n        <span class=\"product__band-name\">{{ name() }}</span>\n      </div>\n    } @else {\n      <sui-icon class=\"product__icon\" name=\"image-line\" [size]=\"32\" />\n    }\n    @if (!available()) {\n      <span class=\"product__tag product__tag--unavail\">{{ unavailableLabel() }}</span>\n    }\n  </div>\n\n  <div class=\"product__body\">\n    <h3 class=\"product__name\">{{ name() }}</h3>\n    @if (description()) {\n      <p class=\"product__desc\">{{ description() }}</p>\n    }\n    <div class=\"product__footer\">\n      <span class=\"product__price\">{{ currencySymbol() }} {{ formattedPrice() }}</span>\n      @if (available()) {\n        @if (showStepper()) {\n          <div class=\"product__stepper\" (click)=\"$event.stopPropagation()\">\n            <button type=\"button\" class=\"product__step\"\n                    (click)=\"onDec($event)\"\n                    (touchstart)=\"$any($event.currentTarget)\"\n                    (touchend)=\"$any($event.currentTarget).blur()\"\n                    [attr.aria-label]=\"quantity() === 1 ? 'Quitar del carrito' : 'Quitar uno'\">\n              <sui-icon [name]=\"quantity() === 1 ? 'delete-bin-line' : 'subtract-line'\" [size]=\"16\" />\n            </button>\n            <span class=\"product__step-qty\">{{ quantity() }}</span>\n            <button type=\"button\" class=\"product__step\"\n                    (click)=\"onInc($event)\"\n                    (touchstart)=\"$any($event.currentTarget)\"\n                    (touchend)=\"$any($event.currentTarget).blur()\"\n                    [disabled]=\"closed()\"\n                    aria-label=\"Agregar uno\">\n              <sui-icon name=\"add-line\" [size]=\"16\" />\n            </button>\n          </div>\n        } @else {\n          <button type=\"button\" class=\"product__add\"\n                  (click)=\"onAdd($event)\"\n                  (touchstart)=\"$any($event.currentTarget)\"\n                  (touchend)=\"$any($event.currentTarget).blur()\"\n                  [disabled]=\"closed()\"\n                  aria-label=\"Agregar al carrito\">\n            <sui-icon name=\"add-line\" [size]=\"18\" />\n          </button>\n        }\n      }\n    </div>\n  </div>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:block}.product{width:100%;height:100%;background:var(--sui-bg-white-0, #fff);border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;color:inherit;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.04);padding:0;content-visibility:auto;contain-intrinsic-size:auto 300px;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),box-shadow .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product:active{transform:scale(.98);box-shadow:var(--sui-shadow-x-small, 0 1px 2px rgba(0, 0, 0, .06))}.product--unavailable{opacity:.55;cursor:not-allowed}.product--unavailable .product__img{filter:grayscale(.55)}.product__img{width:100%;aspect-ratio:1/1;background-color:#e5e7eb;background-size:cover;background-position:center;position:relative;overflow:hidden}.product__img img{object-fit:cover}.product__img--icon{background:linear-gradient(135deg,var(--brand-400, #fb9a56) 0%,var(--brand-500, #fa7319) 100%);display:flex;align-items:center;justify-content:center}.product__img--named{background:var(--sui-bg-soft-200, #e5e7eb);display:flex;align-items:center;justify-content:center}.product__icon{color:#ffffffb3}.product__band{width:46%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:12px 8px}.product__band-name{color:#fff;font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.01em;text-align:center;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.product__tag{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10px;font-weight:600;color:var(--brand-500, #fa7319);text-transform:uppercase;letter-spacing:.05em}.product__tag--unavail{color:#64748b;background:#fffffff2}.product__body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}.product__name{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717));line-height:1.2;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.product__desc{font-size:11px;color:var(--sui-text-sub-600, var(--text-sub, #5c5c5c));line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin:0}.product__footer{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:6px}.product__price{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717))}.product__add{width:36px;height:36px;border-radius:50%;background:var(--sui-text-strong-950, var(--text-strong, #171717));color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),opacity .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__add:active{transform:scale(.94)}.product__add:disabled{opacity:.4;cursor:not-allowed}.product__stepper{display:inline-flex;align-items:center;height:36px;border-radius:18px;background:var(--sui-text-strong-950, var(--text-strong, #171717));flex-shrink:0;overflow:hidden}.product__step{width:34px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:#fff;cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__step:active{transform:scale(.88)}.product__step:disabled{opacity:.4;cursor:not-allowed}.product__step-qty{min-width:18px;text-align:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { 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: SuiProductCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-product-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage, SuiIcon], template: "<button type=\"button\"\n        class=\"product\"\n        [class.product--unavailable]=\"!available()\"\n        (click)=\"onCard()\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\">\n  <div class=\"product__img\"\n       [class.product__img--icon]=\"showIconFallback()\"\n       [class.product__img--named]=\"showNamedFallback()\"\n       [style.--fallback-color]=\"showNamedFallback() ? fallbackColor() : null\">\n    @if (imageUrl()) {\n      <img [ngSrc]=\"imageUrl()!\" [alt]=\"name()\" fill\n           [style.object-position]=\"'center ' + imagePosition() + '%'\" />\n    } @else if (showNamedFallback()) {\n      <div class=\"product__band\">\n        <span class=\"product__band-name\">{{ name() }}</span>\n      </div>\n    } @else {\n      <sui-icon class=\"product__icon\" name=\"image-line\" [size]=\"32\" />\n    }\n    @if (!available()) {\n      <span class=\"product__tag product__tag--unavail\">{{ unavailableLabel() }}</span>\n    }\n  </div>\n\n  <div class=\"product__body\">\n    <h3 class=\"product__name\">{{ name() }}</h3>\n    @if (description()) {\n      <p class=\"product__desc\">{{ description() }}</p>\n    }\n    <div class=\"product__footer\">\n      <span class=\"product__price\">{{ currencySymbol() }} {{ formattedPrice() }}</span>\n      @if (available()) {\n        @if (showStepper()) {\n          <div class=\"product__stepper\" (click)=\"$event.stopPropagation()\">\n            <button type=\"button\" class=\"product__step\"\n                    (click)=\"onDec($event)\"\n                    (touchstart)=\"$any($event.currentTarget)\"\n                    (touchend)=\"$any($event.currentTarget).blur()\"\n                    [attr.aria-label]=\"quantity() === 1 ? 'Quitar del carrito' : 'Quitar uno'\">\n              <sui-icon [name]=\"quantity() === 1 ? 'delete-bin-line' : 'subtract-line'\" [size]=\"16\" />\n            </button>\n            <span class=\"product__step-qty\">{{ quantity() }}</span>\n            <button type=\"button\" class=\"product__step\"\n                    (click)=\"onInc($event)\"\n                    (touchstart)=\"$any($event.currentTarget)\"\n                    (touchend)=\"$any($event.currentTarget).blur()\"\n                    [disabled]=\"closed()\"\n                    aria-label=\"Agregar uno\">\n              <sui-icon name=\"add-line\" [size]=\"16\" />\n            </button>\n          </div>\n        } @else {\n          <button type=\"button\" class=\"product__add\"\n                  (click)=\"onAdd($event)\"\n                  (touchstart)=\"$any($event.currentTarget)\"\n                  (touchend)=\"$any($event.currentTarget).blur()\"\n                  [disabled]=\"closed()\"\n                  aria-label=\"Agregar al carrito\">\n            <sui-icon name=\"add-line\" [size]=\"18\" />\n          </button>\n        }\n      }\n    </div>\n  </div>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:block}.product{width:100%;height:100%;background:var(--sui-bg-white-0, #fff);border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;color:inherit;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.04);padding:0;content-visibility:auto;contain-intrinsic-size:auto 300px;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),box-shadow .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product:active{transform:scale(.98);box-shadow:var(--sui-shadow-x-small, 0 1px 2px rgba(0, 0, 0, .06))}.product--unavailable{opacity:.55;cursor:not-allowed}.product--unavailable .product__img{filter:grayscale(.55)}.product__img{width:100%;aspect-ratio:1/1;background-color:#e5e7eb;background-size:cover;background-position:center;position:relative;overflow:hidden}.product__img img{object-fit:cover}.product__img--icon{background:linear-gradient(135deg,var(--brand-400, #fb9a56) 0%,var(--brand-500, #fa7319) 100%);display:flex;align-items:center;justify-content:center}.product__img--named{background:var(--sui-bg-soft-200, #e5e7eb);display:flex;align-items:center;justify-content:center}.product__icon{color:#ffffffb3}.product__band{width:46%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:12px 8px}.product__band-name{color:#fff;font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.01em;text-align:center;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.product__tag{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10px;font-weight:600;color:var(--brand-500, #fa7319);text-transform:uppercase;letter-spacing:.05em}.product__tag--unavail{color:#64748b;background:#fffffff2}.product__body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}.product__name{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717));line-height:1.2;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.product__desc{font-size:11px;color:var(--sui-text-sub-600, var(--text-sub, #5c5c5c));line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin:0}.product__footer{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:6px}.product__price{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717))}.product__add{width:36px;height:36px;border-radius:50%;background:var(--sui-text-strong-950, var(--text-strong, #171717));color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),opacity .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__add:active{transform:scale(.94)}.product__add:disabled{opacity:.4;cursor:not-allowed}.product__stepper{display:inline-flex;align-items:center;height:36px;border-radius:18px;background:var(--sui-text-strong-950, var(--text-strong, #171717));flex-shrink:0;overflow:hidden}.product__step{width:34px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:#fff;cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__step:active{transform:scale(.88)}.product__step:disabled{opacity:.4;cursor:not-allowed}.product__step-qty{min-width:18px;text-align:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;-webkit-user-select:none;user-select:none}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: true }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], imagePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "imagePosition", required: false }] }], available: [{ type: i0.Input, args: [{ isSignal: true, alias: "available", required: false }] }], quantity: [{ type: i0.Input, args: [{ isSignal: true, alias: "quantity", required: false }] }], closed: [{ type: i0.Input, args: [{ isSignal: true, alias: "closed", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], fallbackVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackVariant", required: false }] }], unavailableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableLabel", required: false }] }], openDetail: [{ type: i0.Output, args: ["openDetail"] }], add: [{ type: i0.Output, args: ["add"] }], increment: [{ type: i0.Output, args: ["increment"] }], decrement: [{ type: i0.Output, args: ["decrement"] }] } });
+
 /**
  * SUI Switch Card — SUI Design System 2.0
  *
@@ -14882,93 +14951,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
+ *
+ * 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
  *
- * 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'
+ * 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 +15177,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 +16870,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, 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 };
 //# sourceMappingURL=ajuarezso-sui-design-system.mjs.map