@ajuarezso/sui-design-system 0.2.6 → 0.3.0

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

@@ -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>
@@ -14865,7 +14865,7 @@ class SuiTable {
         return this.columns().map((_, i) => i);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTable, isStandalone: true, selector: "sui-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRows: "selectedRowsChange", sortKey: "sortKeyChange", sortDir: "sortDirChange", rowClicked: "rowClicked", sortChanged: "sortChanged" }, host: { properties: { "attr.data-sui-size": "size()", "attr.data-sui-striped": "striped() ? \"\" : null", "attr.data-sui-selectable": "selectable() ? \"\" : null", "attr.data-sui-loading": "loading() ? \"\" : null", "attr.data-sui-sticky": "hasStickyColumn() ? \"\" : null" } }, queries: [{ propertyName: "cellTemplates", predicate: SuiTableCellDirective }], viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scrollEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550 SUI Table \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-table\" #scrollEl>\n\n  <!-- Header -->\n  <div class=\"sui-table__header\">\n    <!-- Checkbox header (selectable mode) \u2014 compone sui-checkbox (canon) -->\n    @if (selectable()) {\n      <div class=\"sui-table__header-cell sui-table__header-cell--checkbox\">\n        <sui-checkbox\n          [checked]=\"allSelected\"\n          [indeterminate]=\"partialSelected\"\n          (checkedChange)=\"toggleAll()\"\n          (click)=\"$event.stopPropagation()\"\n          aria-label=\"Seleccionar todas las filas\"\n        />\n      </div>\n    }\n\n    @for (col of columns(); track col.key) {\n      <div\n        class=\"sui-table__header-cell\"\n        [class.sui-table__header-cell--sortable]=\"col.sortable && !col.disabled\"\n        [class.sui-table__header-cell--sorted]=\"isSortActive(col.key)\"\n        [class.sui-table__header-cell--disabled]=\"col.disabled\"\n        [class.sui-table__header-cell--center]=\"col.align === 'center'\"\n        [class.sui-table__header-cell--right]=\"col.align === 'right'\"\n        [class.sui-table__header-cell--empty]=\"!col.label\"\n        [class.sui-table__header-cell--sticky]=\"col.sticky\"\n        [style.width]=\"col.width ?? null\"\n        [style.min-width]=\"colMinWidth(col)\"\n        [style.max-width]=\"col.maxWidth ?? null\"\n        [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n        (click)=\"!col.disabled && onSort(col)\"\n        [attr.tabindex]=\"col.sortable && !col.disabled ? '0' : null\"\n        [attr.role]=\"col.sortable ? 'columnheader' : null\"\n        [attr.aria-disabled]=\"col.disabled ? 'true' : null\"\n        [attr.aria-sort]=\"col.sortable ? (isSortActive(col.key) ? (sortDir() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n        (keydown.enter)=\"!col.disabled && onSort(col)\"\n        (keydown.space)=\"$event.preventDefault(); !col.disabled && onSort(col)\"\n      >\n        @if (col.label) {\n          <span class=\"sui-table__header-label\">{{ col.label }}</span>\n        }\n        @if (col.sortable) {\n          <span class=\"sui-table__sort-icon\" [class.sui-table__sort-icon--active]=\"isSortActive(col.key)\">\n            @if (!isSortActive(col.key)) {\n              <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n            } @else if (sortDir() === 'asc') {\n              <sui-icon name=\"arrow-up-s-fill\" [size]=\"20\" />\n            } @else {\n              <sui-icon name=\"arrow-down-s-fill\" [size]=\"20\" />\n            }\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Body: Loading skeleton -->\n  @if (loading()) {\n    <div class=\"sui-table__body\">\n      @for (sk of skeletonRows; track sk) {\n        <div class=\"sui-table__row sui-table__row--skeleton\">\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\">\n              <span class=\"sui-table__skeleton-box sui-table__skeleton-box--sm\"></span>\n            </div>\n          }\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <span class=\"sui-table__skeleton-box\"></span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Body: Empty state -->\n  @else if (rows().length === 0) {\n    <div class=\"sui-table__empty\">\n      <sui-icon name=\"inbox-line\" [size]=\"40\" class=\"sui-table__empty-icon\" />\n      <p class=\"sui-table__empty-msg\">{{ emptyMessage() }}</p>\n    </div>\n  }\n\n  <!-- Body: Data rows -->\n  @else {\n    <div class=\"sui-table__body\">\n      @for (row of rows(); track getRowKey(row, $index); let i = $index) {\n        <div\n          class=\"sui-table__row\"\n          [class.sui-table__row--selected]=\"selectedRows().has(getRowKey(row, i))\"\n          [class.sui-table__row--striped]=\"striped() && i % 2 === 1\"\n          (click)=\"rowClicked.emit(row)\"\n        >\n          <!-- Checkbox column \u2014 compone sui-checkbox (canon) -->\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\" (click)=\"$event.stopPropagation()\">\n              <sui-checkbox\n                [checked]=\"selectedRows().has(getRowKey(row, i))\"\n                (checkedChange)=\"toggleRow(row, i)\"\n                aria-label=\"Seleccionar fila\"\n              />\n            </div>\n          }\n\n          <!-- Data columns -->\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--center]=\"col.align === 'center'\"\n              [class.sui-table__cell--right]=\"col.align === 'right'\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [class.sui-table__cell--leading]=\"cellPriority(col) === 'leading'\"\n              [class.sui-table__cell--passive]=\"cellPriority(col) === 'passive'\"\n              [class.sui-table__cell--none]=\"cellPriority(col) === 'none'\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <!-- Custom template via SuiTableCellDirective -->\n              @if (getTemplate(col.key); as tmpl) {\n                <ng-container *ngTemplateOutlet=\"tmpl.templateRef; context: { $implicit: row }\"></ng-container>\n              } @else if (getCellDescription(row, col); as desc) {\n                <!-- Texto + sub-texto (Figma Priority=Leading, 2da l\u00EDnea XSmall) -->\n                <span class=\"sui-table__cell-block\">\n                  <span\n                    class=\"sui-table__cell-text\"\n                    [class.sui-table__cell-text--truncate]=\"col.truncate\"\n                    [suiTooltip]=\"getCellTooltip(row, col)\"\n                  >{{ getCellValue(row, col.key) }}</span>\n                  <span class=\"sui-table__cell-desc\">{{ desc }}</span>\n                </span>\n              } @else if (col.truncate) {\n                <!-- Texto truncado + tooltip con el valor completo -->\n                <span\n                  class=\"sui-table__cell-text sui-table__cell-text--truncate\"\n                  [suiTooltip]=\"getCellTooltip(row, col)\"\n                >{{ getCellValue(row, col.key) }}</span>\n              } @else {\n                <!-- Default text rendering -->\n                <span class=\"sui-table__cell-text\">{{ getCellValue(row, col.key) }}</span>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- Row divider (not after last row) -->\n        @if (i < rows().length - 1) {\n          <div class=\"sui-table__divider\"></div>\n        }\n      }\n    </div>\n  }\n\n</div>\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;width:100%}.sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}:host([data-sui-sticky]) .sui-table__header,:host([data-sui-sticky]) .sui-table__row{overflow:visible}@media(max-width:767px){.sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}}@media(max-width:767px)and (max-width:767px){.sui-table{scrollbar-width:none}.sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media(max-width:767px){.sui-table .sui-table__header,.sui-table .sui-table__body{min-width:max-content}.sui-table .sui-table__cell,.sui-table .sui-table__header-cell{min-width:120px}.sui-table .sui-table__cell--checkbox,.sui-table .sui-table__header-cell--checkbox{min-width:44px}.sui-table .sui-table__header-cell--empty{min-width:0}}:host([data-sui-sticky]) .sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}@media(max-width:767px){:host([data-sui-sticky]) .sui-table{scrollbar-width:none}:host([data-sui-sticky]) .sui-table::-webkit-scrollbar{display:none;width:0;height:0}}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:max-content}:host([data-sui-sticky]) .sui-table .sui-table__cell,:host([data-sui-sticky]) .sui-table .sui-table__header-cell{min-width:120px}:host([data-sui-sticky]) .sui-table .sui-table__cell--checkbox,:host([data-sui-sticky]) .sui-table .sui-table__header-cell--checkbox{min-width:44px}:host([data-sui-sticky]) .sui-table .sui-table__header-cell--empty{min-width:0}.sui-table__header{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600)}.sui-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sui-table__header-cell--sortable:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable:hover .sui-table__sort-icon{opacity:1}.sui-table__header-cell--sortable:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled .sui-table__sort-icon{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty{flex-shrink:0;padding:0}.sui-table__header-cell--center{justify-content:center}.sui-table__header-cell--right{justify-content:flex-end}.sui-table__header-cell--checkbox{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active{color:var(--sui-text-strong-950);opacity:1}.sui-table__body{display:flex;flex-direction:column;width:100%}.sui-table__row{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}.sui-table__row:hover,.sui-table__row:hover .sui-table__cell,.sui-table__row:active,.sui-table__row:active .sui-table__cell{background:var(--sui-bg-weak-50)}.sui-table__row--selected{background:var(--sui-primary-alpha-10)}.sui-table__row--selected:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped{background:var(--sui-bg-weak-50)}.sui-table__row--skeleton{pointer-events:none;cursor:default}.sui-table__row--skeleton:hover{background:transparent}.sui-table__row--skeleton:hover .sui-table__cell{background:var(--sui-bg-white-0)}:host([data-sui-size=medium]) .sui-table__cell{min-height:64px;padding:12px 20px 12px 12px}:host([data-sui-size=small]) .sui-table__cell{min-height:48px;padding:8px 16px 8px 12px}:host([data-sui-size=large]) .sui-table__cell{min-height:80px;padding:16px 20px 16px 12px}:host([data-sui-size=xlarge]) .sui-table__cell{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}.sui-table__cell--center{justify-content:center}.sui-table__cell--right{justify-content:flex-end}.sui-table__cell--checkbox{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected .sui-table__cell{background:transparent}.sui-table__row--selected .sui-table__cell.sui-table__cell--sticky{background:var(--sui-primary-alpha-10)}.sui-table__cell-text{min-width:0}.sui-table__cell-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading .sui-table__cell-text{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive .sui-table__cell-text{font-weight:inherit;color:inherit}:host ::ng-deep .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}:host([data-sui-size=small]) ::ng-deep .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider{width:100%;padding:1.5px 0;flex-shrink:0;background:var(--sui-bg-white-0)}.sui-table__divider:after{content:\"\";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon{color:var(--sui-text-disabled-300)}.sui-table__empty-msg{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg,var(--sui-bg-soft-200) 25%,var(--sui-bg-weak-50) 50%,var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}to{background-position:0% 50%}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiCheckbox, selector: "sui-checkbox", inputs: ["size", "checked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiTooltip, selector: "[suiTooltip], [suiTooltipLarge]", inputs: ["suiTooltip", "suiTooltipLarge", "position", "suiTooltipSize", "theme", "delay", "disabled", "showArrow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTable, isStandalone: true, selector: "sui-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRows: "selectedRowsChange", sortKey: "sortKeyChange", sortDir: "sortDirChange", rowClicked: "rowClicked", sortChanged: "sortChanged" }, host: { properties: { "attr.data-sui-size": "size()", "attr.data-sui-striped": "striped() ? \"\" : null", "attr.data-sui-selectable": "selectable() ? \"\" : null", "attr.data-sui-loading": "loading() ? \"\" : null", "attr.data-sui-sticky": "hasStickyColumn() ? \"\" : null" } }, queries: [{ propertyName: "cellTemplates", predicate: SuiTableCellDirective }], viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scrollEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550 SUI Table \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-table\" #scrollEl>\n\n  <!-- Header -->\n  <div class=\"sui-table__header\">\n    <!-- Checkbox header (selectable mode) \u2014 compone sui-checkbox (canon) -->\n    @if (selectable()) {\n      <div class=\"sui-table__header-cell sui-table__header-cell--checkbox\">\n        <sui-checkbox\n          [checked]=\"allSelected\"\n          [indeterminate]=\"partialSelected\"\n          (checkedChange)=\"toggleAll()\"\n          (click)=\"$event.stopPropagation()\"\n          aria-label=\"Seleccionar todas las filas\"\n        />\n      </div>\n    }\n\n    @for (col of columns(); track col.key) {\n      <div\n        class=\"sui-table__header-cell\"\n        [class.sui-table__header-cell--sortable]=\"col.sortable && !col.disabled\"\n        [class.sui-table__header-cell--sorted]=\"isSortActive(col.key)\"\n        [class.sui-table__header-cell--disabled]=\"col.disabled\"\n        [class.sui-table__header-cell--center]=\"col.align === 'center'\"\n        [class.sui-table__header-cell--right]=\"col.align === 'right'\"\n        [class.sui-table__header-cell--empty]=\"!col.label\"\n        [class.sui-table__header-cell--sticky]=\"col.sticky\"\n        [style.width]=\"col.width ?? null\"\n        [style.min-width]=\"colMinWidth(col)\"\n        [style.max-width]=\"col.maxWidth ?? null\"\n        [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n        (click)=\"!col.disabled && onSort(col)\"\n        [attr.tabindex]=\"col.sortable && !col.disabled ? '0' : null\"\n        [attr.role]=\"col.sortable ? 'columnheader' : null\"\n        [attr.aria-disabled]=\"col.disabled ? 'true' : null\"\n        [attr.aria-sort]=\"col.sortable ? (isSortActive(col.key) ? (sortDir() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n        (keydown.enter)=\"!col.disabled && onSort(col)\"\n        (keydown.space)=\"$event.preventDefault(); !col.disabled && onSort(col)\"\n      >\n        @if (col.label) {\n          <span class=\"sui-table__header-label\">{{ col.label }}</span>\n        }\n        @if (col.sortable) {\n          <span class=\"sui-table__sort-icon\" [class.sui-table__sort-icon--active]=\"isSortActive(col.key)\">\n            @if (!isSortActive(col.key)) {\n              <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n            } @else if (sortDir() === 'asc') {\n              <sui-icon name=\"arrow-up-s-fill\" [size]=\"20\" />\n            } @else {\n              <sui-icon name=\"arrow-down-s-fill\" [size]=\"20\" />\n            }\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Body: Loading skeleton -->\n  @if (loading()) {\n    <div class=\"sui-table__body\">\n      @for (sk of skeletonRows; track sk) {\n        <div class=\"sui-table__row sui-table__row--skeleton\">\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\">\n              <span class=\"sui-table__skeleton-box sui-table__skeleton-box--sm\"></span>\n            </div>\n          }\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <span class=\"sui-table__skeleton-box\"></span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Body: Empty state -->\n  @else if (rows().length === 0) {\n    <div class=\"sui-table__empty\">\n      <sui-icon name=\"inbox-line\" [size]=\"40\" class=\"sui-table__empty-icon\" />\n      <p class=\"sui-table__empty-msg\">{{ emptyMessage() }}</p>\n    </div>\n  }\n\n  <!-- Body: Data rows -->\n  @else {\n    <div class=\"sui-table__body\">\n      @for (row of rows(); track getRowKey(row, $index); let i = $index) {\n        <div\n          class=\"sui-table__row\"\n          [class.sui-table__row--selected]=\"selectedRows().has(getRowKey(row, i))\"\n          [class.sui-table__row--striped]=\"striped() && i % 2 === 1\"\n          (click)=\"rowClicked.emit(row)\"\n        >\n          <!-- Checkbox column \u2014 compone sui-checkbox (canon) -->\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\" (click)=\"$event.stopPropagation()\">\n              <sui-checkbox\n                [checked]=\"selectedRows().has(getRowKey(row, i))\"\n                (checkedChange)=\"toggleRow(row, i)\"\n                aria-label=\"Seleccionar fila\"\n              />\n            </div>\n          }\n\n          <!-- Data columns -->\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--center]=\"col.align === 'center'\"\n              [class.sui-table__cell--right]=\"col.align === 'right'\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [class.sui-table__cell--leading]=\"cellPriority(col) === 'leading'\"\n              [class.sui-table__cell--passive]=\"cellPriority(col) === 'passive'\"\n              [class.sui-table__cell--none]=\"cellPriority(col) === 'none'\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <!-- Custom template via SuiTableCellDirective -->\n              @if (getTemplate(col.key); as tmpl) {\n                <ng-container *ngTemplateOutlet=\"tmpl.templateRef; context: { $implicit: row }\"></ng-container>\n              } @else if (getCellDescription(row, col); as desc) {\n                <!-- Texto + sub-texto (Figma Priority=Leading, 2da l\u00EDnea XSmall) -->\n                <span class=\"sui-table__cell-block\">\n                  <span\n                    class=\"sui-table__cell-text\"\n                    [class.sui-table__cell-text--truncate]=\"col.truncate\"\n                    [suiTooltip]=\"getCellTooltip(row, col)\"\n                  >{{ getCellValue(row, col.key) }}</span>\n                  <span class=\"sui-table__cell-desc\">{{ desc }}</span>\n                </span>\n              } @else if (col.truncate) {\n                <!-- Texto truncado + tooltip con el valor completo -->\n                <span\n                  class=\"sui-table__cell-text sui-table__cell-text--truncate\"\n                  [suiTooltip]=\"getCellTooltip(row, col)\"\n                >{{ getCellValue(row, col.key) }}</span>\n              } @else {\n                <!-- Default text rendering -->\n                <span class=\"sui-table__cell-text\">{{ getCellValue(row, col.key) }}</span>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- Row divider (not after last row) -->\n        @if (i < rows().length - 1) {\n          <div class=\"sui-table__divider\"></div>\n        }\n      }\n    </div>\n  }\n\n</div>\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;width:100%}.sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}:host([data-sui-sticky]) .sui-table__header,:host([data-sui-sticky]) .sui-table__row{overflow:visible}@media(max-width:767px){.sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none}}@media(max-width:767px)and (max-width:767px){.sui-table{scrollbar-width:none}.sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media(max-width:767px){.sui-table .sui-table__header,.sui-table .sui-table__body{min-width:max-content}.sui-table .sui-table__cell,.sui-table .sui-table__header-cell{min-width:120px}.sui-table .sui-table__cell--checkbox,.sui-table .sui-table__header-cell--checkbox{min-width:44px}.sui-table .sui-table__header-cell--empty{min-width:0}}:host([data-sui-sticky]) .sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none}@media(max-width:767px){:host([data-sui-sticky]) .sui-table{scrollbar-width:none}:host([data-sui-sticky]) .sui-table::-webkit-scrollbar{display:none;width:0;height:0}}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:max-content}:host([data-sui-sticky]) .sui-table .sui-table__cell,:host([data-sui-sticky]) .sui-table .sui-table__header-cell{min-width:120px}:host([data-sui-sticky]) .sui-table .sui-table__cell--checkbox,:host([data-sui-sticky]) .sui-table .sui-table__header-cell--checkbox{min-width:44px}:host([data-sui-sticky]) .sui-table .sui-table__header-cell--empty{min-width:0}.sui-table__header{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600)}.sui-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sui-table__header-cell--sortable:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable:hover .sui-table__sort-icon{opacity:1}.sui-table__header-cell--sortable:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled .sui-table__sort-icon{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty{flex-shrink:0;padding:0}.sui-table__header-cell--center{justify-content:center}.sui-table__header-cell--right{justify-content:flex-end}.sui-table__header-cell--checkbox{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active{color:var(--sui-text-strong-950);opacity:1}.sui-table__body{display:flex;flex-direction:column;width:100%}.sui-table__row{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}.sui-table__row:hover,.sui-table__row:hover .sui-table__cell,.sui-table__row:active,.sui-table__row:active .sui-table__cell{background:var(--sui-bg-weak-50)}.sui-table__row--selected{background:var(--sui-primary-alpha-10)}.sui-table__row--selected:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped{background:var(--sui-bg-weak-50)}.sui-table__row--skeleton{pointer-events:none;cursor:default}.sui-table__row--skeleton:hover{background:transparent}.sui-table__row--skeleton:hover .sui-table__cell{background:var(--sui-bg-white-0)}:host([data-sui-size=medium]) .sui-table__cell{min-height:64px;padding:12px 20px 12px 12px}:host([data-sui-size=small]) .sui-table__cell{min-height:48px;padding:8px 16px 8px 12px}:host([data-sui-size=large]) .sui-table__cell{min-height:80px;padding:16px 20px 16px 12px}:host([data-sui-size=xlarge]) .sui-table__cell{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}.sui-table__cell--center{justify-content:center}.sui-table__cell--right{justify-content:flex-end}.sui-table__cell--checkbox{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected .sui-table__cell{background:transparent}.sui-table__row--selected .sui-table__cell.sui-table__cell--sticky{background:var(--sui-primary-alpha-10)}.sui-table__cell-text{min-width:0}.sui-table__cell-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading .sui-table__cell-text{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive .sui-table__cell-text{font-weight:inherit;color:inherit}:host ::ng-deep .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}:host([data-sui-size=small]) ::ng-deep .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider{width:100%;padding:1.5px 0;flex-shrink:0;background:var(--sui-bg-white-0)}.sui-table__divider:after{content:\"\";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon{color:var(--sui-text-disabled-300)}.sui-table__empty-msg{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg,var(--sui-bg-soft-200) 25%,var(--sui-bg-weak-50) 50%,var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}to{background-position:0% 50%}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiCheckbox, selector: "sui-checkbox", inputs: ["size", "checked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiTooltip, selector: "[suiTooltip], [suiTooltipLarge]", inputs: ["suiTooltip", "suiTooltipLarge", "position", "suiTooltipSize", "theme", "delay", "disabled", "showArrow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTable, decorators: [{
             type: Component,
@@ -14875,100 +14875,184 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-selectable]': 'selectable() ? "" : null',
                         '[attr.data-sui-loading]': 'loading() ? "" : null',
                         '[attr.data-sui-sticky]': 'hasStickyColumn() ? "" : null',
-                    }, template: "<!-- \u2550\u2550 SUI Table \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-table\" #scrollEl>\n\n  <!-- Header -->\n  <div class=\"sui-table__header\">\n    <!-- Checkbox header (selectable mode) \u2014 compone sui-checkbox (canon) -->\n    @if (selectable()) {\n      <div class=\"sui-table__header-cell sui-table__header-cell--checkbox\">\n        <sui-checkbox\n          [checked]=\"allSelected\"\n          [indeterminate]=\"partialSelected\"\n          (checkedChange)=\"toggleAll()\"\n          (click)=\"$event.stopPropagation()\"\n          aria-label=\"Seleccionar todas las filas\"\n        />\n      </div>\n    }\n\n    @for (col of columns(); track col.key) {\n      <div\n        class=\"sui-table__header-cell\"\n        [class.sui-table__header-cell--sortable]=\"col.sortable && !col.disabled\"\n        [class.sui-table__header-cell--sorted]=\"isSortActive(col.key)\"\n        [class.sui-table__header-cell--disabled]=\"col.disabled\"\n        [class.sui-table__header-cell--center]=\"col.align === 'center'\"\n        [class.sui-table__header-cell--right]=\"col.align === 'right'\"\n        [class.sui-table__header-cell--empty]=\"!col.label\"\n        [class.sui-table__header-cell--sticky]=\"col.sticky\"\n        [style.width]=\"col.width ?? null\"\n        [style.min-width]=\"colMinWidth(col)\"\n        [style.max-width]=\"col.maxWidth ?? null\"\n        [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n        (click)=\"!col.disabled && onSort(col)\"\n        [attr.tabindex]=\"col.sortable && !col.disabled ? '0' : null\"\n        [attr.role]=\"col.sortable ? 'columnheader' : null\"\n        [attr.aria-disabled]=\"col.disabled ? 'true' : null\"\n        [attr.aria-sort]=\"col.sortable ? (isSortActive(col.key) ? (sortDir() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n        (keydown.enter)=\"!col.disabled && onSort(col)\"\n        (keydown.space)=\"$event.preventDefault(); !col.disabled && onSort(col)\"\n      >\n        @if (col.label) {\n          <span class=\"sui-table__header-label\">{{ col.label }}</span>\n        }\n        @if (col.sortable) {\n          <span class=\"sui-table__sort-icon\" [class.sui-table__sort-icon--active]=\"isSortActive(col.key)\">\n            @if (!isSortActive(col.key)) {\n              <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n            } @else if (sortDir() === 'asc') {\n              <sui-icon name=\"arrow-up-s-fill\" [size]=\"20\" />\n            } @else {\n              <sui-icon name=\"arrow-down-s-fill\" [size]=\"20\" />\n            }\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Body: Loading skeleton -->\n  @if (loading()) {\n    <div class=\"sui-table__body\">\n      @for (sk of skeletonRows; track sk) {\n        <div class=\"sui-table__row sui-table__row--skeleton\">\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\">\n              <span class=\"sui-table__skeleton-box sui-table__skeleton-box--sm\"></span>\n            </div>\n          }\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <span class=\"sui-table__skeleton-box\"></span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Body: Empty state -->\n  @else if (rows().length === 0) {\n    <div class=\"sui-table__empty\">\n      <sui-icon name=\"inbox-line\" [size]=\"40\" class=\"sui-table__empty-icon\" />\n      <p class=\"sui-table__empty-msg\">{{ emptyMessage() }}</p>\n    </div>\n  }\n\n  <!-- Body: Data rows -->\n  @else {\n    <div class=\"sui-table__body\">\n      @for (row of rows(); track getRowKey(row, $index); let i = $index) {\n        <div\n          class=\"sui-table__row\"\n          [class.sui-table__row--selected]=\"selectedRows().has(getRowKey(row, i))\"\n          [class.sui-table__row--striped]=\"striped() && i % 2 === 1\"\n          (click)=\"rowClicked.emit(row)\"\n        >\n          <!-- Checkbox column \u2014 compone sui-checkbox (canon) -->\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\" (click)=\"$event.stopPropagation()\">\n              <sui-checkbox\n                [checked]=\"selectedRows().has(getRowKey(row, i))\"\n                (checkedChange)=\"toggleRow(row, i)\"\n                aria-label=\"Seleccionar fila\"\n              />\n            </div>\n          }\n\n          <!-- Data columns -->\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--center]=\"col.align === 'center'\"\n              [class.sui-table__cell--right]=\"col.align === 'right'\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [class.sui-table__cell--leading]=\"cellPriority(col) === 'leading'\"\n              [class.sui-table__cell--passive]=\"cellPriority(col) === 'passive'\"\n              [class.sui-table__cell--none]=\"cellPriority(col) === 'none'\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <!-- Custom template via SuiTableCellDirective -->\n              @if (getTemplate(col.key); as tmpl) {\n                <ng-container *ngTemplateOutlet=\"tmpl.templateRef; context: { $implicit: row }\"></ng-container>\n              } @else if (getCellDescription(row, col); as desc) {\n                <!-- Texto + sub-texto (Figma Priority=Leading, 2da l\u00EDnea XSmall) -->\n                <span class=\"sui-table__cell-block\">\n                  <span\n                    class=\"sui-table__cell-text\"\n                    [class.sui-table__cell-text--truncate]=\"col.truncate\"\n                    [suiTooltip]=\"getCellTooltip(row, col)\"\n                  >{{ getCellValue(row, col.key) }}</span>\n                  <span class=\"sui-table__cell-desc\">{{ desc }}</span>\n                </span>\n              } @else if (col.truncate) {\n                <!-- Texto truncado + tooltip con el valor completo -->\n                <span\n                  class=\"sui-table__cell-text sui-table__cell-text--truncate\"\n                  [suiTooltip]=\"getCellTooltip(row, col)\"\n                >{{ getCellValue(row, col.key) }}</span>\n              } @else {\n                <!-- Default text rendering -->\n                <span class=\"sui-table__cell-text\">{{ getCellValue(row, col.key) }}</span>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- Row divider (not after last row) -->\n        @if (i < rows().length - 1) {\n          <div class=\"sui-table__divider\"></div>\n        }\n      }\n    </div>\n  }\n\n</div>\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;width:100%}.sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}:host([data-sui-sticky]) .sui-table__header,:host([data-sui-sticky]) .sui-table__row{overflow:visible}@media(max-width:767px){.sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}}@media(max-width:767px)and (max-width:767px){.sui-table{scrollbar-width:none}.sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media(max-width:767px){.sui-table .sui-table__header,.sui-table .sui-table__body{min-width:max-content}.sui-table .sui-table__cell,.sui-table .sui-table__header-cell{min-width:120px}.sui-table .sui-table__cell--checkbox,.sui-table .sui-table__header-cell--checkbox{min-width:44px}.sui-table .sui-table__header-cell--empty{min-width:0}}:host([data-sui-sticky]) .sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}@media(max-width:767px){:host([data-sui-sticky]) .sui-table{scrollbar-width:none}:host([data-sui-sticky]) .sui-table::-webkit-scrollbar{display:none;width:0;height:0}}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:max-content}:host([data-sui-sticky]) .sui-table .sui-table__cell,:host([data-sui-sticky]) .sui-table .sui-table__header-cell{min-width:120px}:host([data-sui-sticky]) .sui-table .sui-table__cell--checkbox,:host([data-sui-sticky]) .sui-table .sui-table__header-cell--checkbox{min-width:44px}:host([data-sui-sticky]) .sui-table .sui-table__header-cell--empty{min-width:0}.sui-table__header{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600)}.sui-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sui-table__header-cell--sortable:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable:hover .sui-table__sort-icon{opacity:1}.sui-table__header-cell--sortable:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled .sui-table__sort-icon{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty{flex-shrink:0;padding:0}.sui-table__header-cell--center{justify-content:center}.sui-table__header-cell--right{justify-content:flex-end}.sui-table__header-cell--checkbox{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active{color:var(--sui-text-strong-950);opacity:1}.sui-table__body{display:flex;flex-direction:column;width:100%}.sui-table__row{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}.sui-table__row:hover,.sui-table__row:hover .sui-table__cell,.sui-table__row:active,.sui-table__row:active .sui-table__cell{background:var(--sui-bg-weak-50)}.sui-table__row--selected{background:var(--sui-primary-alpha-10)}.sui-table__row--selected:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped{background:var(--sui-bg-weak-50)}.sui-table__row--skeleton{pointer-events:none;cursor:default}.sui-table__row--skeleton:hover{background:transparent}.sui-table__row--skeleton:hover .sui-table__cell{background:var(--sui-bg-white-0)}:host([data-sui-size=medium]) .sui-table__cell{min-height:64px;padding:12px 20px 12px 12px}:host([data-sui-size=small]) .sui-table__cell{min-height:48px;padding:8px 16px 8px 12px}:host([data-sui-size=large]) .sui-table__cell{min-height:80px;padding:16px 20px 16px 12px}:host([data-sui-size=xlarge]) .sui-table__cell{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}.sui-table__cell--center{justify-content:center}.sui-table__cell--right{justify-content:flex-end}.sui-table__cell--checkbox{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected .sui-table__cell{background:transparent}.sui-table__row--selected .sui-table__cell.sui-table__cell--sticky{background:var(--sui-primary-alpha-10)}.sui-table__cell-text{min-width:0}.sui-table__cell-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading .sui-table__cell-text{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive .sui-table__cell-text{font-weight:inherit;color:inherit}:host ::ng-deep .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}:host([data-sui-size=small]) ::ng-deep .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider{width:100%;padding:1.5px 0;flex-shrink:0;background:var(--sui-bg-white-0)}.sui-table__divider:after{content:\"\";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon{color:var(--sui-text-disabled-300)}.sui-table__empty-msg{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg,var(--sui-bg-soft-200) 25%,var(--sui-bg-weak-50) 50%,var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}to{background-position:0% 50%}}\n"] }]
+                    }, template: "<!-- \u2550\u2550 SUI Table \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-table\" #scrollEl>\n\n  <!-- Header -->\n  <div class=\"sui-table__header\">\n    <!-- Checkbox header (selectable mode) \u2014 compone sui-checkbox (canon) -->\n    @if (selectable()) {\n      <div class=\"sui-table__header-cell sui-table__header-cell--checkbox\">\n        <sui-checkbox\n          [checked]=\"allSelected\"\n          [indeterminate]=\"partialSelected\"\n          (checkedChange)=\"toggleAll()\"\n          (click)=\"$event.stopPropagation()\"\n          aria-label=\"Seleccionar todas las filas\"\n        />\n      </div>\n    }\n\n    @for (col of columns(); track col.key) {\n      <div\n        class=\"sui-table__header-cell\"\n        [class.sui-table__header-cell--sortable]=\"col.sortable && !col.disabled\"\n        [class.sui-table__header-cell--sorted]=\"isSortActive(col.key)\"\n        [class.sui-table__header-cell--disabled]=\"col.disabled\"\n        [class.sui-table__header-cell--center]=\"col.align === 'center'\"\n        [class.sui-table__header-cell--right]=\"col.align === 'right'\"\n        [class.sui-table__header-cell--empty]=\"!col.label\"\n        [class.sui-table__header-cell--sticky]=\"col.sticky\"\n        [style.width]=\"col.width ?? null\"\n        [style.min-width]=\"colMinWidth(col)\"\n        [style.max-width]=\"col.maxWidth ?? null\"\n        [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n        (click)=\"!col.disabled && onSort(col)\"\n        [attr.tabindex]=\"col.sortable && !col.disabled ? '0' : null\"\n        [attr.role]=\"col.sortable ? 'columnheader' : null\"\n        [attr.aria-disabled]=\"col.disabled ? 'true' : null\"\n        [attr.aria-sort]=\"col.sortable ? (isSortActive(col.key) ? (sortDir() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n        (keydown.enter)=\"!col.disabled && onSort(col)\"\n        (keydown.space)=\"$event.preventDefault(); !col.disabled && onSort(col)\"\n      >\n        @if (col.label) {\n          <span class=\"sui-table__header-label\">{{ col.label }}</span>\n        }\n        @if (col.sortable) {\n          <span class=\"sui-table__sort-icon\" [class.sui-table__sort-icon--active]=\"isSortActive(col.key)\">\n            @if (!isSortActive(col.key)) {\n              <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n            } @else if (sortDir() === 'asc') {\n              <sui-icon name=\"arrow-up-s-fill\" [size]=\"20\" />\n            } @else {\n              <sui-icon name=\"arrow-down-s-fill\" [size]=\"20\" />\n            }\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Body: Loading skeleton -->\n  @if (loading()) {\n    <div class=\"sui-table__body\">\n      @for (sk of skeletonRows; track sk) {\n        <div class=\"sui-table__row sui-table__row--skeleton\">\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\">\n              <span class=\"sui-table__skeleton-box sui-table__skeleton-box--sm\"></span>\n            </div>\n          }\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <span class=\"sui-table__skeleton-box\"></span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Body: Empty state -->\n  @else if (rows().length === 0) {\n    <div class=\"sui-table__empty\">\n      <sui-icon name=\"inbox-line\" [size]=\"40\" class=\"sui-table__empty-icon\" />\n      <p class=\"sui-table__empty-msg\">{{ emptyMessage() }}</p>\n    </div>\n  }\n\n  <!-- Body: Data rows -->\n  @else {\n    <div class=\"sui-table__body\">\n      @for (row of rows(); track getRowKey(row, $index); let i = $index) {\n        <div\n          class=\"sui-table__row\"\n          [class.sui-table__row--selected]=\"selectedRows().has(getRowKey(row, i))\"\n          [class.sui-table__row--striped]=\"striped() && i % 2 === 1\"\n          (click)=\"rowClicked.emit(row)\"\n        >\n          <!-- Checkbox column \u2014 compone sui-checkbox (canon) -->\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\" (click)=\"$event.stopPropagation()\">\n              <sui-checkbox\n                [checked]=\"selectedRows().has(getRowKey(row, i))\"\n                (checkedChange)=\"toggleRow(row, i)\"\n                aria-label=\"Seleccionar fila\"\n              />\n            </div>\n          }\n\n          <!-- Data columns -->\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--center]=\"col.align === 'center'\"\n              [class.sui-table__cell--right]=\"col.align === 'right'\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [class.sui-table__cell--leading]=\"cellPriority(col) === 'leading'\"\n              [class.sui-table__cell--passive]=\"cellPriority(col) === 'passive'\"\n              [class.sui-table__cell--none]=\"cellPriority(col) === 'none'\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <!-- Custom template via SuiTableCellDirective -->\n              @if (getTemplate(col.key); as tmpl) {\n                <ng-container *ngTemplateOutlet=\"tmpl.templateRef; context: { $implicit: row }\"></ng-container>\n              } @else if (getCellDescription(row, col); as desc) {\n                <!-- Texto + sub-texto (Figma Priority=Leading, 2da l\u00EDnea XSmall) -->\n                <span class=\"sui-table__cell-block\">\n                  <span\n                    class=\"sui-table__cell-text\"\n                    [class.sui-table__cell-text--truncate]=\"col.truncate\"\n                    [suiTooltip]=\"getCellTooltip(row, col)\"\n                  >{{ getCellValue(row, col.key) }}</span>\n                  <span class=\"sui-table__cell-desc\">{{ desc }}</span>\n                </span>\n              } @else if (col.truncate) {\n                <!-- Texto truncado + tooltip con el valor completo -->\n                <span\n                  class=\"sui-table__cell-text sui-table__cell-text--truncate\"\n                  [suiTooltip]=\"getCellTooltip(row, col)\"\n                >{{ getCellValue(row, col.key) }}</span>\n              } @else {\n                <!-- Default text rendering -->\n                <span class=\"sui-table__cell-text\">{{ getCellValue(row, col.key) }}</span>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- Row divider (not after last row) -->\n        @if (i < rows().length - 1) {\n          <div class=\"sui-table__divider\"></div>\n        }\n      }\n    </div>\n  }\n\n</div>\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;width:100%}.sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}:host([data-sui-sticky]) .sui-table__header,:host([data-sui-sticky]) .sui-table__row{overflow:visible}@media(max-width:767px){.sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none}}@media(max-width:767px)and (max-width:767px){.sui-table{scrollbar-width:none}.sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media(max-width:767px){.sui-table .sui-table__header,.sui-table .sui-table__body{min-width:max-content}.sui-table .sui-table__cell,.sui-table .sui-table__header-cell{min-width:120px}.sui-table .sui-table__cell--checkbox,.sui-table .sui-table__header-cell--checkbox{min-width:44px}.sui-table .sui-table__header-cell--empty{min-width:0}}:host([data-sui-sticky]) .sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none}@media(max-width:767px){:host([data-sui-sticky]) .sui-table{scrollbar-width:none}:host([data-sui-sticky]) .sui-table::-webkit-scrollbar{display:none;width:0;height:0}}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:max-content}:host([data-sui-sticky]) .sui-table .sui-table__cell,:host([data-sui-sticky]) .sui-table .sui-table__header-cell{min-width:120px}:host([data-sui-sticky]) .sui-table .sui-table__cell--checkbox,:host([data-sui-sticky]) .sui-table .sui-table__header-cell--checkbox{min-width:44px}:host([data-sui-sticky]) .sui-table .sui-table__header-cell--empty{min-width:0}.sui-table__header{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600)}.sui-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sui-table__header-cell--sortable:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable:hover .sui-table__sort-icon{opacity:1}.sui-table__header-cell--sortable:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled .sui-table__sort-icon{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty{flex-shrink:0;padding:0}.sui-table__header-cell--center{justify-content:center}.sui-table__header-cell--right{justify-content:flex-end}.sui-table__header-cell--checkbox{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active{color:var(--sui-text-strong-950);opacity:1}.sui-table__body{display:flex;flex-direction:column;width:100%}.sui-table__row{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}.sui-table__row:hover,.sui-table__row:hover .sui-table__cell,.sui-table__row:active,.sui-table__row:active .sui-table__cell{background:var(--sui-bg-weak-50)}.sui-table__row--selected{background:var(--sui-primary-alpha-10)}.sui-table__row--selected:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped{background:var(--sui-bg-weak-50)}.sui-table__row--skeleton{pointer-events:none;cursor:default}.sui-table__row--skeleton:hover{background:transparent}.sui-table__row--skeleton:hover .sui-table__cell{background:var(--sui-bg-white-0)}:host([data-sui-size=medium]) .sui-table__cell{min-height:64px;padding:12px 20px 12px 12px}:host([data-sui-size=small]) .sui-table__cell{min-height:48px;padding:8px 16px 8px 12px}:host([data-sui-size=large]) .sui-table__cell{min-height:80px;padding:16px 20px 16px 12px}:host([data-sui-size=xlarge]) .sui-table__cell{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}.sui-table__cell--center{justify-content:center}.sui-table__cell--right{justify-content:flex-end}.sui-table__cell--checkbox{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected .sui-table__cell{background:transparent}.sui-table__row--selected .sui-table__cell.sui-table__cell--sticky{background:var(--sui-primary-alpha-10)}.sui-table__cell-text{min-width:0}.sui-table__cell-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading .sui-table__cell-text{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive .sui-table__cell-text{font-weight:inherit;color:inherit}:host ::ng-deep .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}:host([data-sui-size=small]) ::ng-deep .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider{width:100%;padding:1.5px 0;flex-shrink:0;background:var(--sui-bg-white-0)}.sui-table__divider:after{content:\"\";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon{color:var(--sui-text-disabled-300)}.sui-table__empty-msg{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg,var(--sui-bg-soft-200) 25%,var(--sui-bg-weak-50) 50%,var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}to{background-position:0% 50%}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], selectedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRows", required: false }] }, { type: i0.Output, args: ["selectedRowsChange"] }], sortKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortKey", required: false }] }, { type: i0.Output, args: ["sortKeyChange"] }], sortDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDir", required: false }] }, { type: i0.Output, args: ["sortDirChange"] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }], scrollEl: [{ type: i0.ViewChild, args: ['scrollEl', { isSignal: true }] }], cellTemplates: [{
                 type: ContentChildren,
                 args: [SuiTableCellDirective]
             }] } });
 
 /**
- * SUI Tabs — SUI Design System 2.0
+ * SUI Tab Menu Horizontal — SUI Design System 2.0
  *
  * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Componente Figma: "Tab Menu Horizontal [1.1]"
+ *   3511:9958 — container (border-t/b, py-14px, gap-24px)
+ *   3511:9832 — Tab Menu Horizontal Items [1.1] (State × Active; leftIcon/rightIcon/number)
+ *   3511:9897 — Item Active/On (label strong-950 + línea primary)
+ *   3511:9877 — Item Hover/Off (text strong-950, icon sub-600)
+ *
+ * Pestañas horizontales con subrayado (underline 2px primary en el ítem activo,
+ * al ras del border-bottom del container).
+ *
+ * EXACT specs (Figma):
+ *   Container (3511:9958): border-top + border-bottom 1px stroke-soft-200,
+ *     padding 14px 0, gap 24px entre items, align-items flex-start, bg-white-0
+ *   Item (3511:9830/9897): gap icon↔label 6px, gap label↔number 4px
+ *     Default/Off:  text/icon sub-600
+ *     Hover/Off:    text strong-950, icon sub-600
+ *     Active/On:    text strong-950 + underline primary-base 2px (bottom -14px);
+ *                   leftIcon strong-950 (verificado 2026-06-21: difiere del
+ *                   vertical, cuyo icono activo es primary-base — a propósito)
+ *   number: badge state/error/base, p-2px, radius-full, text static-white,
+ *     Subheading/2XSmall (11px/12px line, +2% / 0.22px, uppercase)
+ *   rightIcon (chevron): pill 'Arrow' (3511:9882/9902/9844): bg-white-0, p-px,
+ *     radius-full, overflow-clip, icon arrow-right-s-line 18px, SIN shadow
  *
- * Cubre tres componentes de Figma bajo un solo `sui-tabs`:
- *   - variant='segment'  → "Segmented Control [1.1]" (pill iOS, indicador animado)
- *   - variant='line'     → "Tab Menu Horizontal [1.1]" (underline tabs)
- *   - variant='vertical' → "Tab Menu Vertical [1.1]" (sidebar nav, Card|List)
- *
- * Nodos homologados (2026-05-29 · Tab Menu pass):
- *   3511:9958  — Tab Menu Horizontal [1.1] (container: border-t/b, py-14px, gap-24px)
- *   3511:9832  — Tab Menu Horizontal Items [1.1] (State × Active; leftIcon/rightIcon/number)
- *   3511:9897  — Horizontal Item Active/On (label strong-950 + línea primary)
- *   3511:9877  — Horizontal Item Hover/Off (text strong-950, icon sub-600)
- *   3516:10411 — Tab Menu Vertical [1.1] (Style=Card|List × Quantity 02–08 × divider)
- *   3516:10412 — Vertical Card Quantity=03 con divider 'SELECT MENU'
+ * PENDING VERIFY:
+ *   - `size`: el Tab Menu Horizontal de Figma no expone eje size. El input se
+ *     mantiene como extensión SUI (espeja el data-attr del host como hook de
+ *     SCSS), pero hoy solo medium está 1:1 y no altera estilos.
+ *   - `disabled` por ítem es extensión SUI (Figma no muestra estado Disabled).
+ *
+ * Historia: hasta la v0.2.x este componente vivía como `<sui-tabs variant="line">`;
+ * en la v0.3.0 se separó en componente propio (junto a `sui-segmented-control`
+ * y `sui-tab-menu-vertical`) espejando los tres sets independientes de Figma.
+ * Renombres vs la interface SuiTab vieja: `badge` → `number` y `chevron` →
+ * `rightIcon` (nombres de los props del Figma).
+ */
+class SuiTabMenuHorizontal {
+    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    active = model(...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    tabChange = output();
+    isActive(tab) {
+        return this.active() === tab.value;
+    }
+    select(tab) {
+        if (tab.disabled)
+            return;
+        this.active.set(tab.value);
+        this.tabChange.emit(tab.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabMenuHorizontal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabMenuHorizontal, isStandalone: true, selector: "sui-tab-menu-horizontal", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", tabChange: "tabChange" }, host: { properties: { "attr.data-sui-size": "size()" } }, ngImport: i0, template: "<!-- Tab Menu Horizontal \u2014 pesta\u00F1as con subrayado (Figma 3511:9958) -->\n<div class=\"sui-tab-menu-horizontal__track\" role=\"tablist\">\n  @for (tab of tabs(); track tab.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-menu-horizontal__item\"\n      [class.sui-tab-menu-horizontal__item--active]=\"isActive(tab)\"\n      [disabled]=\"tab.disabled\"\n      [attr.aria-selected]=\"isActive(tab)\"\n      [attr.aria-disabled]=\"tab.disabled ? true : null\"\n      role=\"tab\"\n      (click)=\"select(tab)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      @if (tab.icon) {\n        <sui-icon class=\"sui-tab-menu-horizontal__leading\" [name]=\"tab.icon\" [size]=\"20\" />\n      }\n      <span class=\"sui-tab-menu-horizontal__text\">\n        <span class=\"sui-tab-menu-horizontal__label\">{{ tab.label }}</span>\n        @if (tab.number) {\n          <span class=\"sui-tab-menu-horizontal__badge\">{{ tab.number }}</span>\n        }\n      </span>\n      @if (tab.rightIcon) {\n        <span class=\"sui-tab-menu-horizontal__chevron\">\n          <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n        </span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-tab-menu-horizontal__track{display:flex;align-items:flex-start;gap:24px;padding:14px 0;border-top:1px solid var(--sui-stroke-soft-200);border-bottom:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-sizing:border-box;width:100%}.sui-tab-menu-horizontal__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:12px;padding:2px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);color:var(--sui-static-white);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;text-transform:uppercase}.sui-tab-menu-horizontal__item{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0;border:none;background:transparent;cursor:pointer;position:relative;flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-sub-600);white-space:nowrap;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__leading{flex-shrink:0}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__text{display:inline-flex;align-items:center;gap:4px;min-width:0}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);overflow:hidden;color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:after{content:\"\";position:absolute;bottom:-14px;left:0;right:0;height:2px;background:transparent;transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tab-menu-horizontal__item--active{color:var(--sui-text-strong-950)}.sui-tab-menu-horizontal__item--active .sui-tab-menu-horizontal__leading{color:var(--sui-icon-strong-950)}.sui-tab-menu-horizontal__item--active:after{background:var(--sui-primary-base)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active){color:var(--sui-text-strong-950)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active) .sui-tab-menu-horizontal__leading{color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active) .sui-tab-menu-horizontal__chevron{color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:disabled{cursor:not-allowed;opacity:.4}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabMenuHorizontal, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-tab-menu-horizontal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
+                        '[attr.data-sui-size]': 'size()',
+                    }, template: "<!-- Tab Menu Horizontal \u2014 pesta\u00F1as con subrayado (Figma 3511:9958) -->\n<div class=\"sui-tab-menu-horizontal__track\" role=\"tablist\">\n  @for (tab of tabs(); track tab.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-menu-horizontal__item\"\n      [class.sui-tab-menu-horizontal__item--active]=\"isActive(tab)\"\n      [disabled]=\"tab.disabled\"\n      [attr.aria-selected]=\"isActive(tab)\"\n      [attr.aria-disabled]=\"tab.disabled ? true : null\"\n      role=\"tab\"\n      (click)=\"select(tab)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      @if (tab.icon) {\n        <sui-icon class=\"sui-tab-menu-horizontal__leading\" [name]=\"tab.icon\" [size]=\"20\" />\n      }\n      <span class=\"sui-tab-menu-horizontal__text\">\n        <span class=\"sui-tab-menu-horizontal__label\">{{ tab.label }}</span>\n        @if (tab.number) {\n          <span class=\"sui-tab-menu-horizontal__badge\">{{ tab.number }}</span>\n        }\n      </span>\n      @if (tab.rightIcon) {\n        <span class=\"sui-tab-menu-horizontal__chevron\">\n          <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n        </span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-tab-menu-horizontal__track{display:flex;align-items:flex-start;gap:24px;padding:14px 0;border-top:1px solid var(--sui-stroke-soft-200);border-bottom:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-sizing:border-box;width:100%}.sui-tab-menu-horizontal__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:12px;padding:2px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);color:var(--sui-static-white);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;text-transform:uppercase}.sui-tab-menu-horizontal__item{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0;border:none;background:transparent;cursor:pointer;position:relative;flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-sub-600);white-space:nowrap;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__leading{flex-shrink:0}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__text{display:inline-flex;align-items:center;gap:4px;min-width:0}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);overflow:hidden;color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:after{content:\"\";position:absolute;bottom:-14px;left:0;right:0;height:2px;background:transparent;transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tab-menu-horizontal__item--active{color:var(--sui-text-strong-950)}.sui-tab-menu-horizontal__item--active .sui-tab-menu-horizontal__leading{color:var(--sui-icon-strong-950)}.sui-tab-menu-horizontal__item--active:after{background:var(--sui-primary-base)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active){color:var(--sui-text-strong-950)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active) .sui-tab-menu-horizontal__leading{color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active) .sui-tab-menu-horizontal__chevron{color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:disabled{cursor:not-allowed;opacity:.4}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
+
+/**
+ * SUI Tab Menu Vertical — SUI Design System 2.0
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Componente Figma: "Tab Menu Vertical [1.1]"
+ *   3516:10411 — set (Style=Card|List × Quantity 02–08 × divider)
+ *   3516:10412 — Card Quantity=03 con divider 'SELECT MENU'
  *   3515:10326 — Tab Menu Vertical Items [1.1] (State × Active; leftIcon/rightIcon/number)
- *   3515:10341 — Vertical Item Active/On (bg-weak-50)
- *
- * EXACT specs (Tab Menu pass):
- *   Horizontal container (3511:9958):
- *     border-top + border-bottom: 1px solid stroke-soft-200
- *     padding: 14px 0 (py-14px) · gap entre items: 24px
- *     align-items: flex-start (items-start) · background: bg-white-0
- *   Horizontal item (3511:9830/9897):
- *     gap icon↔label: 6px · gap label↔badge: 4px
- *     Default/Off:  text/icon sub-600 (#5c5c5c)
- *     Hover/Off:    text strong-950 (#171717), icon sub-600 (#5c5c5c)
- *     Active/On:    text strong-950 + indicator line primary-base 2px (bottom -14px,
- *                   al ras del border-bottom del container)
- *     leftIcon: 20px · rightIcon: chevron arrow-right-s-line 18px en pill 'Arrow'
- *               (3511:9882/9902/9844): bg-white-0, p-px, radius-full, overflow-clip,
- *               SIN shadow (el vertical sí lleva shadow-x-small)
- *     number: badge state/error/base, p-2px, radius-full, text static-white
- *             Subheading/2XSmall (11px/12px line, +2% / 0.22px, uppercase)
- *   Vertical item (3515:10327/10341/10334):
- *     gap: 6px · padding: 8px · radius: radius-8 · w-full · label flex-1 text-left
- *     overflow-clip en el item (y en el container Card 3516:10412)
- *     Active/On:  bg-weak-50 + text strong-950 / icon strong-950
+ *   3515:10341 — Item Active/On (bg-weak-50)
+ *
+ * Navegación lateral (sidebar nav) con dos estilos de contenedor: Card (con
+ * borde/fondo/sombra) o List (plano).
+ *
+ * EXACT specs (Figma):
+ *   Item (3515:10327/10341): gap 6px, padding 8px, radius-8, w-full, label flex-1
+ *     text-left, overflow-clip
+ *     Active/On:  bg-weak-50 + text strong-950; leftIcon PRIMARY-BASE (verificado
+ *                 2026-06-21 vía variable_defs + screenshot de 3515:10341 — difiere
+ *                 del horizontal, cuyo icono activo es strong-950, a propósito)
  *     Hover/Off:  bg-weak-50 (igual fill que el active) + text strong-950 (3515:10334)
- *     Default/Off (Card):  bg-white-0 + text/icon sub-600
- *     Default/Off (List):  transparent + text/icon sub-600
- *     number: mismo badge que horizontal
- *     rightIcon (chevron): pill bg-white-0, p-1px, radius-full, shadow-x-small,
- *                          arrow-right-s-line 18px
- *   Vertical container Card (3516:10412):
- *     bg-white-0, border 1px stroke-soft-200, p-10px, radius-16, shadow-x-small,
- *     flex-col gap-8px
- *   Vertical container List: flat (sin border/bg/shadow/padding), gap-8px
- *   Divider label (Content Divider [1.1], reusado): px-8px py-4px, text-soft-400,
- *     Subheading/XSmall (12px/16px line, +4% / 0.48px, uppercase)
- *
- * VERIFICADO (2026-06-21, re-verificación visual pixel-perfect):
- *   - Horizontal Active leftIcon = STRONG-950 (oscuro). Confirmado: variable_defs
- *     de 3511:9897 expone primary-base SOLO para la línea underline (NO para el
- *     icono); icon/sub-600 es el chevron; el screenshot del item activo muestra el
- *     leftIcon oscuro. → icono activo horizontal = strong-950 (queda como estaba).
- *   - Vertical Active leftIcon = PRIMARY-BASE (azul en Figma → naranja brand acá).
- *     Confirmado: variable_defs de 3515:10341 expone primary-base (texto=strong-950,
- *     bg=weak-50) → ese primary es el icono; screenshot del item activo lo muestra
- *     AZUL. El componente lo tenía en strong-950 → FIX aplicado (.sui-tabs__vertical-
- *     item--active .sui-tabs__vertical-leading { color: var(--sui-primary-base) }).
- *     OJO: horizontal y vertical DIFIEREN en el color del icono activo (a propósito).
+ *     Default/Off (Card): bg-white-0 + text/icon sub-600
+ *     Default/Off (List): transparent + text/icon sub-600
+ *   Container Card (3516:10412): bg-white-0, border 1px stroke-soft-200, p-10px,
+ *     radius-16, shadow-x-small, flex-col gap-8px, overflow-clip
+ *   Container List: flat (sin border/bg/shadow/padding), gap-8px
+ *   Divider label (Content Divider [1.1] reusado): px-8px py-4px, text-soft-400,
+ *     Subheading/XSmall (12px/16px line, +4% / 0.48px), uppercase
+ *   number: badge state/error/base, p-2px, radius-full, text static-white
+ *   rightIcon (chevron): pill bg-white-0, p-1px, radius-full, shadow-x-small,
+ *     arrow-right-s-line 18px
  *
  * PENDING VERIFY:
- *   - line/segment size (small/medium/large): el Tab Menu Horizontal de Figma no
- *     expone eje `size`. Los 3 sizes son extensión SUI; solo medium está 1:1.
- *   - Vertical no expone eje `size`; usa un único tamaño (item p-8px / icon 20px).
- *
- * EXTRA FEATURES preservadas (no están en el Figma 'Tab Menu', se mantienen):
- *   - variant='segment' completo (indicador animado ResizeObserver + translateX).
- *   - prop `size` (small/medium/large) del line/segment.
- *   - prop `disabled` por ítem (Figma no muestra estado Disabled del Tab Menu).
+ *   - El set de Figma no expone eje `size`; usa un único tamaño (item p-8px /
+ *     icon 20px), por eso este componente NO tiene input `size`.
+ *   - `disabled` por ítem es extensión SUI (Figma no muestra estado Disabled).
+ *
+ * Historia: hasta la v0.2.x este componente vivía como
+ * `<sui-tabs variant="vertical">`; en la v0.3.0 se separó en componente propio
+ * (junto a `sui-segmented-control` y `sui-tab-menu-horizontal`) espejando los
+ * tres sets independientes de Figma. Renombres vs la API vieja:
+ *   - input `verticalStyle` → `menuStyle` (el prefijo "vertical" quedó
+ *     redundante con el nombre del componente; no se usa `style` a secas para
+ *     no chocar con el atributo HTML global `style`).
+ *   - item `badge` → `number` y `chevron` → `rightIcon` (props del Figma).
  */
-class SuiTabs {
+class SuiTabMenuVertical {
     tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     active = model(...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
-    variant = input('line', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    /** Estilo del contenedor cuando variant='vertical' (Card|List). */
-    verticalStyle = input('card', ...(ngDevMode ? [{ debugName: "verticalStyle" }] : /* istanbul ignore next */ []));
+    /** Estilo del contenedor: Card (borde/fondo/sombra) o List (plano). */
+    menuStyle = input('card', ...(ngDevMode ? [{ debugName: "menuStyle" }] : /* istanbul ignore next */ []));
     /**
-     * Label de sección renderizado sobre el menú vertical (prop `divider` del
-     * Figma — ej. 'SELECT MENU'). Vacío = sin divider. Solo variant='vertical'.
+     * Label de sección renderizado sobre el menú (prop `divider` del Figma —
+     * ej. 'SELECT MENU'). Vacío = sin divider.
      */
     dividerLabel = input('', ...(ngDevMode ? [{ debugName: "dividerLabel" }] : /* istanbul ignore next */ []));
     tabChange = output();
+    isActive(tab) {
+        return this.active() === tab.value;
+    }
+    select(tab) {
+        if (tab.disabled)
+            return;
+        this.active.set(tab.value);
+        this.tabChange.emit(tab.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabMenuVertical, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabMenuVertical, isStandalone: true, selector: "sui-tab-menu-vertical", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, menuStyle: { classPropertyName: "menuStyle", publicName: "menuStyle", isSignal: true, isRequired: false, transformFunction: null }, dividerLabel: { classPropertyName: "dividerLabel", publicName: "dividerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", tabChange: "tabChange" }, host: { properties: { "attr.data-sui-style": "menuStyle()" } }, ngImport: i0, template: "<!-- Tab Menu Vertical \u2014 sidebar nav (Figma 3516:10411, Style=Card|List) -->\n<div class=\"sui-tab-menu-vertical__track\" role=\"tablist\">\n  @if (dividerLabel()) {\n    <div class=\"sui-tab-menu-vertical__divider\">{{ dividerLabel() }}</div>\n  }\n  @for (tab of tabs(); track tab.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-menu-vertical__item\"\n      [class.sui-tab-menu-vertical__item--active]=\"isActive(tab)\"\n      [disabled]=\"tab.disabled\"\n      [attr.aria-selected]=\"isActive(tab)\"\n      [attr.aria-disabled]=\"tab.disabled ? true : null\"\n      role=\"tab\"\n      (click)=\"select(tab)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      @if (tab.icon) {\n        <sui-icon class=\"sui-tab-menu-vertical__leading\" [name]=\"tab.icon\" [size]=\"20\" />\n      }\n      <span class=\"sui-tab-menu-vertical__label\">{{ tab.label }}</span>\n      @if (tab.number) {\n        <span class=\"sui-tab-menu-vertical__badge\">{{ tab.number }}</span>\n      }\n      @if (tab.rightIcon) {\n        <span class=\"sui-tab-menu-vertical__chevron\">\n          <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n        </span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-tab-menu-vertical__track{display:flex;flex-direction:column;align-items:stretch;gap:8px;box-sizing:border-box;width:100%}:host([data-sui-style=card]) .sui-tab-menu-vertical__track{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);overflow:hidden}:host([data-sui-style=list]) .sui-tab-menu-vertical__track{padding:0;border:none;background:transparent;box-shadow:none}.sui-tab-menu-vertical__divider{display:flex;align-items:center;padding:4px 8px;color:var(--sui-text-soft-400);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-xs-size);font-weight:var(--sui-type-subheading-xs-weight);line-height:var(--sui-type-subheading-xs-line);letter-spacing:var(--sui-type-subheading-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-transform:uppercase}.sui-tab-menu-vertical__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:12px;padding:2px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);color:var(--sui-static-white);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;text-transform:uppercase}.sui-tab-menu-vertical__item{display:flex;align-items:center;gap:6px;padding:8px;border:none;border-radius:var(--sui-radius-8);background:transparent;cursor:pointer;text-align:left;box-sizing:border-box;width:100%;overflow:hidden;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);color:var(--sui-text-sub-600)}.sui-tab-menu-vertical__item .sui-tab-menu-vertical__leading{flex-shrink:0}.sui-tab-menu-vertical__item .sui-tab-menu-vertical__label{flex:1 0 0;min-width:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sui-tab-menu-vertical__item .sui-tab-menu-vertical__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);color:var(--sui-icon-sub-600)}.sui-tab-menu-vertical__item--active{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tab-menu-vertical__item--active .sui-tab-menu-vertical__leading{color:var(--sui-primary-base)}.sui-tab-menu-vertical__item:hover:not(:disabled):not(.sui-tab-menu-vertical__item--active){background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tab-menu-vertical__item:disabled{cursor:not-allowed;opacity:.4}:host([data-sui-style=card]) .sui-tab-menu-vertical__item:not(.sui-tab-menu-vertical__item--active):not(:hover){background:var(--sui-bg-white-0)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabMenuVertical, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-tab-menu-vertical', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
+                        '[attr.data-sui-style]': 'menuStyle()',
+                    }, template: "<!-- Tab Menu Vertical \u2014 sidebar nav (Figma 3516:10411, Style=Card|List) -->\n<div class=\"sui-tab-menu-vertical__track\" role=\"tablist\">\n  @if (dividerLabel()) {\n    <div class=\"sui-tab-menu-vertical__divider\">{{ dividerLabel() }}</div>\n  }\n  @for (tab of tabs(); track tab.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-menu-vertical__item\"\n      [class.sui-tab-menu-vertical__item--active]=\"isActive(tab)\"\n      [disabled]=\"tab.disabled\"\n      [attr.aria-selected]=\"isActive(tab)\"\n      [attr.aria-disabled]=\"tab.disabled ? true : null\"\n      role=\"tab\"\n      (click)=\"select(tab)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      @if (tab.icon) {\n        <sui-icon class=\"sui-tab-menu-vertical__leading\" [name]=\"tab.icon\" [size]=\"20\" />\n      }\n      <span class=\"sui-tab-menu-vertical__label\">{{ tab.label }}</span>\n      @if (tab.number) {\n        <span class=\"sui-tab-menu-vertical__badge\">{{ tab.number }}</span>\n      }\n      @if (tab.rightIcon) {\n        <span class=\"sui-tab-menu-vertical__chevron\">\n          <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n        </span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-tab-menu-vertical__track{display:flex;flex-direction:column;align-items:stretch;gap:8px;box-sizing:border-box;width:100%}:host([data-sui-style=card]) .sui-tab-menu-vertical__track{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);overflow:hidden}:host([data-sui-style=list]) .sui-tab-menu-vertical__track{padding:0;border:none;background:transparent;box-shadow:none}.sui-tab-menu-vertical__divider{display:flex;align-items:center;padding:4px 8px;color:var(--sui-text-soft-400);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-xs-size);font-weight:var(--sui-type-subheading-xs-weight);line-height:var(--sui-type-subheading-xs-line);letter-spacing:var(--sui-type-subheading-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-transform:uppercase}.sui-tab-menu-vertical__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:12px;padding:2px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);color:var(--sui-static-white);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;text-transform:uppercase}.sui-tab-menu-vertical__item{display:flex;align-items:center;gap:6px;padding:8px;border:none;border-radius:var(--sui-radius-8);background:transparent;cursor:pointer;text-align:left;box-sizing:border-box;width:100%;overflow:hidden;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);color:var(--sui-text-sub-600)}.sui-tab-menu-vertical__item .sui-tab-menu-vertical__leading{flex-shrink:0}.sui-tab-menu-vertical__item .sui-tab-menu-vertical__label{flex:1 0 0;min-width:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sui-tab-menu-vertical__item .sui-tab-menu-vertical__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);color:var(--sui-icon-sub-600)}.sui-tab-menu-vertical__item--active{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tab-menu-vertical__item--active .sui-tab-menu-vertical__leading{color:var(--sui-primary-base)}.sui-tab-menu-vertical__item:hover:not(:disabled):not(.sui-tab-menu-vertical__item--active){background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tab-menu-vertical__item:disabled{cursor:not-allowed;opacity:.4}:host([data-sui-style=card]) .sui-tab-menu-vertical__item:not(.sui-tab-menu-vertical__item--active):not(:hover){background:var(--sui-bg-white-0)}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], menuStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuStyle", required: false }] }], dividerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerLabel", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
+
+/**
+ * SUI Segmented Control — SUI Design System 2.0
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Componente Figma: "Segmented Control [1.1]"
+ *   2604:114  — set del Segmented Control
+ *   2604:150  — variantes de ítem (Text · Left Icon · Only Icon)
+ *   2603:2062 — estados (default · hover · active · disabled)
+ *   2604:152  — container (bg-weak-50, padding 4px, gap 4px, radius 10px)
+ *
+ * Píldora estilo iOS: opciones mutuamente excluyentes con un indicador de
+ * fondo blanco que se anima (translateX + width) hacia la opción activa.
+ * El indicador se reposiciona con ResizeObserver cuando el track cambia de
+ * tamaño (responsive) y con un effect cuando cambia `active` o `tabs`.
+ *
+ * EXACT specs (Figma):
+ *   Container (2604:152): bg #f7f7f7 (bg-weak-50), padding 4px, gap 4px, radius 10px
+ *   Item: padding 4px, gap 6px, radius 6px, icon 20px
+ *   Estados: default text/icon-soft-400 · hover sub-600 · active strong-950 + indicator
+ *   Disabled: color discreto text-disabled-300 (NO opacity)
+ *
+ * EXTRA FEATURES (extensión SUI, el set de Figma no expone eje `size`):
+ *   - prop `size` (small/medium/large/xlarge); solo medium está 1:1 con Figma.
+ *   - prop `disabled` por ítem.
+ *
+ * Historia: hasta la v0.2.x este componente vivía como `<sui-tabs variant="segment">`;
+ * en la v0.3.0 se separó en componente propio (junto a `sui-tab-menu-horizontal`
+ * y `sui-tab-menu-vertical`) espejando los tres sets independientes de Figma.
+ */
+class SuiSegmentedControl {
+    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    active = model(...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    tabChange = output();
     segmentItems;
     segmentTrack;
     indicatorStyle = signal({
@@ -15024,17 +15108,15 @@ class SuiTabs {
         this.active.set(tab.value);
         this.tabChange.emit(tab.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabs, isStandalone: true, selector: "sui-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, verticalStyle: { classPropertyName: "verticalStyle", publicName: "verticalStyle", isSignal: true, isRequired: false, transformFunction: null }, dividerLabel: { classPropertyName: "dividerLabel", publicName: "dividerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", tabChange: "tabChange" }, host: { properties: { "attr.data-sui-variant": "variant()", "attr.data-sui-size": "size()", "attr.data-sui-vstyle": "variant() === 'vertical' ? verticalStyle() : null" } }, viewQueries: [{ propertyName: "segmentTrack", first: true, predicate: ["segmentTrack"], descendants: true }, { propertyName: "segmentItems", predicate: ["segmentItem"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (variant() === 'segment') {\n  <!-- Segment variant: pill/segmented control (iOS-like) \u2014 SUI Segmented Control [1.1] -->\n  <div #segmentTrack class=\"sui-tabs__segment-track\" role=\"tablist\">\n    <div\n      class=\"sui-tabs__segment-indicator\"\n      [style.transform]=\"indicatorStyle().transform\"\n      [style.width]=\"indicatorStyle().width\"\n    ></div>\n    @for (tab of tabs(); track tab.value) {\n      <button\n        #segmentItem\n        type=\"button\"\n        class=\"sui-tabs__segment-item\"\n        [class.sui-tabs__segment-item--active]=\"isActive(tab)\"\n        [class.sui-tabs__segment-item--icon-only]=\"tab.iconOnly && tab.icon\"\n        [disabled]=\"tab.disabled\"\n        [attr.aria-selected]=\"isActive(tab)\"\n        [attr.aria-disabled]=\"tab.disabled ? true : null\"\n        [attr.aria-label]=\"tab.iconOnly && tab.icon ? tab.label : null\"\n        role=\"tab\"\n        (click)=\"select(tab)\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\"\n      >\n        @if (tab.icon) {\n          <sui-icon [name]=\"tab.icon\" [size]=\"20\" />\n        }\n        @if (!tab.iconOnly) {\n          <span>{{ tab.label }}</span>\n        }\n      </button>\n    }\n  </div>\n\n} @else if (variant() === 'vertical') {\n  <!-- Vertical variant: sidebar nav \u2014 SUI Tab Menu Vertical [1.1] (Card|List) -->\n  <div class=\"sui-tabs__vertical-track\" role=\"tablist\">\n    @if (dividerLabel()) {\n      <div class=\"sui-tabs__vertical-divider\">{{ dividerLabel() }}</div>\n    }\n    @for (tab of tabs(); track tab.value) {\n      <button\n        type=\"button\"\n        class=\"sui-tabs__vertical-item\"\n        [class.sui-tabs__vertical-item--active]=\"isActive(tab)\"\n        [disabled]=\"tab.disabled\"\n        [attr.aria-selected]=\"isActive(tab)\"\n        [attr.aria-disabled]=\"tab.disabled ? true : null\"\n        role=\"tab\"\n        (click)=\"select(tab)\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\"\n      >\n        @if (tab.icon) {\n          <sui-icon class=\"sui-tabs__vertical-leading\" [name]=\"tab.icon\" [size]=\"20\" />\n        }\n        <span class=\"sui-tabs__vertical-label\">{{ tab.label }}</span>\n        @if (tab.badge) {\n          <span class=\"sui-tabs__badge\">{{ tab.badge }}</span>\n        }\n        @if (tab.chevron) {\n          <span class=\"sui-tabs__chevron\">\n            <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n          </span>\n        }\n      </button>\n    }\n  </div>\n\n} @else {\n  <!-- Line variant: underline tabs \u2014 SUI Tab Menu Horizontal [1.1] -->\n  <div class=\"sui-tabs__line-track\" role=\"tablist\">\n    @for (tab of tabs(); track tab.value) {\n      <button\n        type=\"button\"\n        class=\"sui-tabs__line-item\"\n        [class.sui-tabs__line-item--active]=\"isActive(tab)\"\n        [disabled]=\"tab.disabled\"\n        [attr.aria-selected]=\"isActive(tab)\"\n        [attr.aria-disabled]=\"tab.disabled ? true : null\"\n        role=\"tab\"\n        (click)=\"select(tab)\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\"\n      >\n        @if (tab.icon) {\n          <sui-icon class=\"sui-tabs__line-leading\" [name]=\"tab.icon\" [size]=\"20\" />\n        }\n        <span class=\"sui-tabs__line-text\">\n          <span class=\"sui-tabs__line-label\">{{ tab.label }}</span>\n          @if (tab.badge) {\n            <span class=\"sui-tabs__badge\">{{ tab.badge }}</span>\n          }\n        </span>\n        @if (tab.chevron) {\n          <span class=\"sui-tabs__line-chevron\">\n            <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n          </span>\n        }\n      </button>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-tabs__segment-track{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-tabs__segment-indicator{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px #0e121b0f,0 2px 4px #0e121b08;transition:transform var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1),width var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}.sui-tabs__segment-item{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-soft-400);text-align:center;white-space:nowrap}.sui-tabs__segment-item--icon-only{gap:0}.sui-tabs__segment-item--active{color:var(--sui-text-strong-950)}.sui-tabs__segment-item:hover:not(:disabled):not(.sui-tabs__segment-item--active){color:var(--sui-text-sub-600)}.sui-tabs__segment-item:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}.sui-tabs__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:12px;padding:2px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);color:var(--sui-static-white);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;text-transform:uppercase}.sui-tabs__line-track{display:flex;align-items:flex-start;gap:24px;padding:14px 0;border-top:1px solid var(--sui-stroke-soft-200);border-bottom:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-sizing:border-box;width:100%}.sui-tabs__line-item{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0;border:none;background:transparent;cursor:pointer;position:relative;flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-sub-600);white-space:nowrap;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tabs__line-item .sui-tabs__line-leading{flex-shrink:0}.sui-tabs__line-item .sui-tabs__line-text{display:inline-flex;align-items:center;gap:4px;min-width:0}.sui-tabs__line-item .sui-tabs__line-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);overflow:hidden;color:var(--sui-icon-sub-600)}.sui-tabs__line-item:after{content:\"\";position:absolute;bottom:-14px;left:0;right:0;height:2px;background:transparent;transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tabs__line-item--active{color:var(--sui-text-strong-950)}.sui-tabs__line-item--active .sui-tabs__line-leading{color:var(--sui-icon-strong-950)}.sui-tabs__line-item--active:after{background:var(--sui-primary-base)}.sui-tabs__line-item:hover:not(:disabled):not(.sui-tabs__line-item--active){color:var(--sui-text-strong-950)}.sui-tabs__line-item:hover:not(:disabled):not(.sui-tabs__line-item--active) .sui-tabs__line-leading{color:var(--sui-icon-sub-600)}.sui-tabs__line-item:hover:not(:disabled):not(.sui-tabs__line-item--active) .sui-tabs__line-chevron{color:var(--sui-icon-sub-600)}.sui-tabs__line-item:disabled{cursor:not-allowed;opacity:.4}.sui-tabs__vertical-track{display:flex;flex-direction:column;align-items:stretch;gap:8px;box-sizing:border-box;width:100%}:host([data-sui-vstyle=card]) .sui-tabs__vertical-track{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);overflow:hidden}:host([data-sui-vstyle=list]) .sui-tabs__vertical-track{padding:0;border:none;background:transparent;box-shadow:none}.sui-tabs__vertical-divider{display:flex;align-items:center;padding:4px 8px;color:var(--sui-text-soft-400);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-xs-size);font-weight:var(--sui-type-subheading-xs-weight);line-height:var(--sui-type-subheading-xs-line);letter-spacing:var(--sui-type-subheading-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-transform:uppercase}.sui-tabs__vertical-item{display:flex;align-items:center;gap:6px;padding:8px;border:none;border-radius:var(--sui-radius-8);background:transparent;cursor:pointer;text-align:left;box-sizing:border-box;width:100%;overflow:hidden;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);color:var(--sui-text-sub-600)}.sui-tabs__vertical-item .sui-tabs__vertical-leading{flex-shrink:0}.sui-tabs__vertical-item .sui-tabs__vertical-label{flex:1 0 0;min-width:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sui-tabs__vertical-item .sui-tabs__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);color:var(--sui-icon-sub-600)}.sui-tabs__vertical-item--active{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tabs__vertical-item--active .sui-tabs__vertical-leading{color:var(--sui-primary-base)}.sui-tabs__vertical-item:hover:not(:disabled):not(.sui-tabs__vertical-item--active){background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tabs__vertical-item:disabled{cursor:not-allowed;opacity:.4}:host([data-sui-vstyle=card]) .sui-tabs__vertical-item:not(.sui-tabs__vertical-item--active):not(:hover){background:var(--sui-bg-white-0)}:host([data-sui-size=small]) .sui-tabs__segment-item{font-size:var(--sui-type-label-xs-size)}:host([data-sui-size=large]) .sui-tabs__segment-item{padding:6px}:host([data-sui-size=xlarge]) .sui-tabs__segment-item{padding:8px;font-size:var(--sui-type-label-md-size);line-height:var(--sui-type-label-md-line)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSegmentedControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSegmentedControl, isStandalone: true, selector: "sui-segmented-control", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", tabChange: "tabChange" }, host: { properties: { "attr.data-sui-size": "size()" } }, viewQueries: [{ propertyName: "segmentTrack", first: true, predicate: ["segmentTrack"], descendants: true }, { propertyName: "segmentItems", predicate: ["segmentItem"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!-- Segmented Control \u2014 pill iOS con indicador animado (Figma 2604:114) -->\n<div #segmentTrack class=\"sui-segmented-control__track\" role=\"tablist\">\n  <div\n    class=\"sui-segmented-control__indicator\"\n    [style.transform]=\"indicatorStyle().transform\"\n    [style.width]=\"indicatorStyle().width\"\n  ></div>\n  @for (tab of tabs(); track tab.value) {\n    <button\n      #segmentItem\n      type=\"button\"\n      class=\"sui-segmented-control__item\"\n      [class.sui-segmented-control__item--active]=\"isActive(tab)\"\n      [class.sui-segmented-control__item--icon-only]=\"tab.iconOnly && tab.icon\"\n      [disabled]=\"tab.disabled\"\n      [attr.aria-selected]=\"isActive(tab)\"\n      [attr.aria-disabled]=\"tab.disabled ? true : null\"\n      [attr.aria-label]=\"tab.iconOnly && tab.icon ? tab.label : null\"\n      role=\"tab\"\n      (click)=\"select(tab)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      @if (tab.icon) {\n        <sui-icon [name]=\"tab.icon\" [size]=\"20\" />\n      }\n      @if (!tab.iconOnly) {\n        <span>{{ tab.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-segmented-control__track{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-segmented-control__indicator{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px #0e121b0f,0 2px 4px #0e121b08;transition:transform var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1),width var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}.sui-segmented-control__item{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-soft-400);text-align:center;white-space:nowrap}.sui-segmented-control__item--icon-only{gap:0}.sui-segmented-control__item--active{color:var(--sui-text-strong-950)}.sui-segmented-control__item:hover:not(:disabled):not(.sui-segmented-control__item--active){color:var(--sui-text-sub-600)}.sui-segmented-control__item:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}:host([data-sui-size=small]) .sui-segmented-control__item{font-size:var(--sui-type-label-xs-size)}:host([data-sui-size=large]) .sui-segmented-control__item{padding:6px}:host([data-sui-size=xlarge]) .sui-segmented-control__item{padding:8px;font-size:var(--sui-type-label-md-size);line-height:var(--sui-type-label-md-line)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSegmentedControl, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-tabs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
-                        '[attr.data-sui-variant]': 'variant()',
+            args: [{ selector: 'sui-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
                         '[attr.data-sui-size]': 'size()',
-                        '[attr.data-sui-vstyle]': "variant() === 'vertical' ? verticalStyle() : null",
-                    }, template: "@if (variant() === 'segment') {\n  <!-- Segment variant: pill/segmented control (iOS-like) \u2014 SUI Segmented Control [1.1] -->\n  <div #segmentTrack class=\"sui-tabs__segment-track\" role=\"tablist\">\n    <div\n      class=\"sui-tabs__segment-indicator\"\n      [style.transform]=\"indicatorStyle().transform\"\n      [style.width]=\"indicatorStyle().width\"\n    ></div>\n    @for (tab of tabs(); track tab.value) {\n      <button\n        #segmentItem\n        type=\"button\"\n        class=\"sui-tabs__segment-item\"\n        [class.sui-tabs__segment-item--active]=\"isActive(tab)\"\n        [class.sui-tabs__segment-item--icon-only]=\"tab.iconOnly && tab.icon\"\n        [disabled]=\"tab.disabled\"\n        [attr.aria-selected]=\"isActive(tab)\"\n        [attr.aria-disabled]=\"tab.disabled ? true : null\"\n        [attr.aria-label]=\"tab.iconOnly && tab.icon ? tab.label : null\"\n        role=\"tab\"\n        (click)=\"select(tab)\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\"\n      >\n        @if (tab.icon) {\n          <sui-icon [name]=\"tab.icon\" [size]=\"20\" />\n        }\n        @if (!tab.iconOnly) {\n          <span>{{ tab.label }}</span>\n        }\n      </button>\n    }\n  </div>\n\n} @else if (variant() === 'vertical') {\n  <!-- Vertical variant: sidebar nav \u2014 SUI Tab Menu Vertical [1.1] (Card|List) -->\n  <div class=\"sui-tabs__vertical-track\" role=\"tablist\">\n    @if (dividerLabel()) {\n      <div class=\"sui-tabs__vertical-divider\">{{ dividerLabel() }}</div>\n    }\n    @for (tab of tabs(); track tab.value) {\n      <button\n        type=\"button\"\n        class=\"sui-tabs__vertical-item\"\n        [class.sui-tabs__vertical-item--active]=\"isActive(tab)\"\n        [disabled]=\"tab.disabled\"\n        [attr.aria-selected]=\"isActive(tab)\"\n        [attr.aria-disabled]=\"tab.disabled ? true : null\"\n        role=\"tab\"\n        (click)=\"select(tab)\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\"\n      >\n        @if (tab.icon) {\n          <sui-icon class=\"sui-tabs__vertical-leading\" [name]=\"tab.icon\" [size]=\"20\" />\n        }\n        <span class=\"sui-tabs__vertical-label\">{{ tab.label }}</span>\n        @if (tab.badge) {\n          <span class=\"sui-tabs__badge\">{{ tab.badge }}</span>\n        }\n        @if (tab.chevron) {\n          <span class=\"sui-tabs__chevron\">\n            <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n          </span>\n        }\n      </button>\n    }\n  </div>\n\n} @else {\n  <!-- Line variant: underline tabs \u2014 SUI Tab Menu Horizontal [1.1] -->\n  <div class=\"sui-tabs__line-track\" role=\"tablist\">\n    @for (tab of tabs(); track tab.value) {\n      <button\n        type=\"button\"\n        class=\"sui-tabs__line-item\"\n        [class.sui-tabs__line-item--active]=\"isActive(tab)\"\n        [disabled]=\"tab.disabled\"\n        [attr.aria-selected]=\"isActive(tab)\"\n        [attr.aria-disabled]=\"tab.disabled ? true : null\"\n        role=\"tab\"\n        (click)=\"select(tab)\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\"\n      >\n        @if (tab.icon) {\n          <sui-icon class=\"sui-tabs__line-leading\" [name]=\"tab.icon\" [size]=\"20\" />\n        }\n        <span class=\"sui-tabs__line-text\">\n          <span class=\"sui-tabs__line-label\">{{ tab.label }}</span>\n          @if (tab.badge) {\n            <span class=\"sui-tabs__badge\">{{ tab.badge }}</span>\n          }\n        </span>\n        @if (tab.chevron) {\n          <span class=\"sui-tabs__line-chevron\">\n            <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n          </span>\n        }\n      </button>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-tabs__segment-track{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-tabs__segment-indicator{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px #0e121b0f,0 2px 4px #0e121b08;transition:transform var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1),width var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}.sui-tabs__segment-item{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-soft-400);text-align:center;white-space:nowrap}.sui-tabs__segment-item--icon-only{gap:0}.sui-tabs__segment-item--active{color:var(--sui-text-strong-950)}.sui-tabs__segment-item:hover:not(:disabled):not(.sui-tabs__segment-item--active){color:var(--sui-text-sub-600)}.sui-tabs__segment-item:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}.sui-tabs__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:12px;padding:2px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);color:var(--sui-static-white);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;text-transform:uppercase}.sui-tabs__line-track{display:flex;align-items:flex-start;gap:24px;padding:14px 0;border-top:1px solid var(--sui-stroke-soft-200);border-bottom:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-sizing:border-box;width:100%}.sui-tabs__line-item{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0;border:none;background:transparent;cursor:pointer;position:relative;flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-sub-600);white-space:nowrap;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tabs__line-item .sui-tabs__line-leading{flex-shrink:0}.sui-tabs__line-item .sui-tabs__line-text{display:inline-flex;align-items:center;gap:4px;min-width:0}.sui-tabs__line-item .sui-tabs__line-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);overflow:hidden;color:var(--sui-icon-sub-600)}.sui-tabs__line-item:after{content:\"\";position:absolute;bottom:-14px;left:0;right:0;height:2px;background:transparent;transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tabs__line-item--active{color:var(--sui-text-strong-950)}.sui-tabs__line-item--active .sui-tabs__line-leading{color:var(--sui-icon-strong-950)}.sui-tabs__line-item--active:after{background:var(--sui-primary-base)}.sui-tabs__line-item:hover:not(:disabled):not(.sui-tabs__line-item--active){color:var(--sui-text-strong-950)}.sui-tabs__line-item:hover:not(:disabled):not(.sui-tabs__line-item--active) .sui-tabs__line-leading{color:var(--sui-icon-sub-600)}.sui-tabs__line-item:hover:not(:disabled):not(.sui-tabs__line-item--active) .sui-tabs__line-chevron{color:var(--sui-icon-sub-600)}.sui-tabs__line-item:disabled{cursor:not-allowed;opacity:.4}.sui-tabs__vertical-track{display:flex;flex-direction:column;align-items:stretch;gap:8px;box-sizing:border-box;width:100%}:host([data-sui-vstyle=card]) .sui-tabs__vertical-track{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);overflow:hidden}:host([data-sui-vstyle=list]) .sui-tabs__vertical-track{padding:0;border:none;background:transparent;box-shadow:none}.sui-tabs__vertical-divider{display:flex;align-items:center;padding:4px 8px;color:var(--sui-text-soft-400);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-xs-size);font-weight:var(--sui-type-subheading-xs-weight);line-height:var(--sui-type-subheading-xs-line);letter-spacing:var(--sui-type-subheading-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-transform:uppercase}.sui-tabs__vertical-item{display:flex;align-items:center;gap:6px;padding:8px;border:none;border-radius:var(--sui-radius-8);background:transparent;cursor:pointer;text-align:left;box-sizing:border-box;width:100%;overflow:hidden;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);color:var(--sui-text-sub-600)}.sui-tabs__vertical-item .sui-tabs__vertical-leading{flex-shrink:0}.sui-tabs__vertical-item .sui-tabs__vertical-label{flex:1 0 0;min-width:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sui-tabs__vertical-item .sui-tabs__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);color:var(--sui-icon-sub-600)}.sui-tabs__vertical-item--active{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tabs__vertical-item--active .sui-tabs__vertical-leading{color:var(--sui-primary-base)}.sui-tabs__vertical-item:hover:not(:disabled):not(.sui-tabs__vertical-item--active){background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tabs__vertical-item:disabled{cursor:not-allowed;opacity:.4}:host([data-sui-vstyle=card]) .sui-tabs__vertical-item:not(.sui-tabs__vertical-item--active):not(:hover){background:var(--sui-bg-white-0)}:host([data-sui-size=small]) .sui-tabs__segment-item{font-size:var(--sui-type-label-xs-size)}:host([data-sui-size=large]) .sui-tabs__segment-item{padding:6px}:host([data-sui-size=xlarge]) .sui-tabs__segment-item{padding:8px;font-size:var(--sui-type-label-md-size);line-height:var(--sui-type-label-md-line)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], verticalStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalStyle", required: false }] }], dividerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerLabel", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], segmentItems: [{
+                    }, template: "<!-- Segmented Control \u2014 pill iOS con indicador animado (Figma 2604:114) -->\n<div #segmentTrack class=\"sui-segmented-control__track\" role=\"tablist\">\n  <div\n    class=\"sui-segmented-control__indicator\"\n    [style.transform]=\"indicatorStyle().transform\"\n    [style.width]=\"indicatorStyle().width\"\n  ></div>\n  @for (tab of tabs(); track tab.value) {\n    <button\n      #segmentItem\n      type=\"button\"\n      class=\"sui-segmented-control__item\"\n      [class.sui-segmented-control__item--active]=\"isActive(tab)\"\n      [class.sui-segmented-control__item--icon-only]=\"tab.iconOnly && tab.icon\"\n      [disabled]=\"tab.disabled\"\n      [attr.aria-selected]=\"isActive(tab)\"\n      [attr.aria-disabled]=\"tab.disabled ? true : null\"\n      [attr.aria-label]=\"tab.iconOnly && tab.icon ? tab.label : null\"\n      role=\"tab\"\n      (click)=\"select(tab)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      @if (tab.icon) {\n        <sui-icon [name]=\"tab.icon\" [size]=\"20\" />\n      }\n      @if (!tab.iconOnly) {\n        <span>{{ tab.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-segmented-control__track{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-segmented-control__indicator{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px #0e121b0f,0 2px 4px #0e121b08;transition:transform var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1),width var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}.sui-segmented-control__item{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-soft-400);text-align:center;white-space:nowrap}.sui-segmented-control__item--icon-only{gap:0}.sui-segmented-control__item--active{color:var(--sui-text-strong-950)}.sui-segmented-control__item:hover:not(:disabled):not(.sui-segmented-control__item--active){color:var(--sui-text-sub-600)}.sui-segmented-control__item:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}:host([data-sui-size=small]) .sui-segmented-control__item{font-size:var(--sui-type-label-xs-size)}:host([data-sui-size=large]) .sui-segmented-control__item{padding:6px}:host([data-sui-size=xlarge]) .sui-segmented-control__item{padding:8px;font-size:var(--sui-type-label-md-size);line-height:var(--sui-type-label-md-line)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], segmentItems: [{
                 type: ViewChildren,
                 args: ['segmentItem', { read: ElementRef }]
             }], segmentTrack: [{
@@ -16719,5 +16801,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_TAB_BAR, SuiAccordion, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPeriodRange, SuiPopover, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTable, SuiTableCellDirective, SuiTabs, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
+export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_TAB_BAR, SuiAccordion, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPeriodRange, SuiPopover, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
 //# sourceMappingURL=ajuarezso-sui-design-system.mjs.map