@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-tabmenu.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
-import { injectCbTranslation } from '@caribeng/ui';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 
 /** Horizontal navigation menu with an active item. */
 class CbTabMenu {
@@ -10,6 +10,9 @@ class CbTabMenu {
         this.t = injectCbTranslation();
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Items sin los de `visible: false`. */
+        this.visibleItems = computed(() => cbVisibleItems(this.items()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
         this.activeIndex = model(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
         this.ariaLabel = input(undefined, /* @ts-ignore */
@@ -20,13 +23,14 @@ class CbTabMenu {
         if (item.disabled)
             return;
         this.activeIndex.set(index);
+        cbRunCommand(item);
         this.itemSelect.emit(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTabMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTabMenu, isStandalone: true, selector: "cb-tabmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", itemSelect: "itemSelect" }, host: { classAttribute: "cb-tabmenu" }, ngImport: i0, template: `
     <nav [attr.aria-label]="(ariaLabel() ?? t().sectionNavigation)">
       <ul class="cb-tabmenu__list">
-        @for (item of items(); track $index; let i = $index) {
+        @for (item of visibleItems(); track $index; let i = $index) {
           <li class="cb-tabmenu__entry">
             @if (item.url && !item.disabled) {
               <a class="cb-tabmenu__link" [href]="item.url" [attr.aria-current]="activeIndex() === i ? 'page' : null" [attr.tabindex]="item.disabled ? -1 : 0" (click)="select(item, i)">
@@ -43,14 +47,14 @@ class CbTabMenu {
         }
       </ul>
     </nav>
-  `, isInline: true, styles: [":host{display:block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tabmenu__list{display:flex;gap:.25rem;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--cb-color-border)}.cb-tabmenu__link{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.625rem .875rem;border:0;border-bottom:2px solid transparent;background:transparent;color:inherit;font:inherit;text-decoration:none;cursor:pointer}.cb-tabmenu__link:hover:not(:disabled),.cb-tabmenu__link:focus-visible{background:var(--cb-color-surface);outline:none}.cb-tabmenu__link[aria-current=page]{border-bottom-color:var(--cb-color-primary);color:var(--cb-color-primary);font-weight:600}.cb-tabmenu__link:disabled{opacity:.5;cursor:default}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;min-width:0;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tabmenu__list{display:flex;gap:.25rem;margin:0;padding:0;overflow-x:auto;scrollbar-width:thin;list-style:none;border-bottom:1px solid var(--cb-color-border)}.cb-tabmenu__entry{flex:none}.cb-tabmenu__link{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;white-space:nowrap;padding:.625rem .875rem;border:0;border-bottom:2px solid transparent;background:transparent;color:inherit;font:inherit;text-decoration:none;cursor:pointer}.cb-tabmenu__link:hover:not(:disabled),.cb-tabmenu__link:focus-visible{background:var(--cb-color-surface);outline:none}.cb-tabmenu__link[aria-current=page]{border-bottom-color:var(--cb-color-primary);color:var(--cb-color-primary-text);font-weight:600}.cb-tabmenu__link:disabled{opacity:.5;cursor:default}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTabMenu, decorators: [{
             type: Component,
             args: [{ selector: 'cb-tabmenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-tabmenu' }, template: `
     <nav [attr.aria-label]="(ariaLabel() ?? t().sectionNavigation)">
       <ul class="cb-tabmenu__list">
-        @for (item of items(); track $index; let i = $index) {
+        @for (item of visibleItems(); track $index; let i = $index) {
           <li class="cb-tabmenu__entry">
             @if (item.url && !item.disabled) {
               <a class="cb-tabmenu__link" [href]="item.url" [attr.aria-current]="activeIndex() === i ? 'page' : null" [attr.tabindex]="item.disabled ? -1 : 0" (click)="select(item, i)">
@@ -67,7 +71,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       </ul>
     </nav>
-  `, styles: [":host{display:block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tabmenu__list{display:flex;gap:.25rem;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--cb-color-border)}.cb-tabmenu__link{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.625rem .875rem;border:0;border-bottom:2px solid transparent;background:transparent;color:inherit;font:inherit;text-decoration:none;cursor:pointer}.cb-tabmenu__link:hover:not(:disabled),.cb-tabmenu__link:focus-visible{background:var(--cb-color-surface);outline:none}.cb-tabmenu__link[aria-current=page]{border-bottom-color:var(--cb-color-primary);color:var(--cb-color-primary);font-weight:600}.cb-tabmenu__link:disabled{opacity:.5;cursor:default}\n"] }]
+  `, styles: [":host{display:block;min-width:0;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tabmenu__list{display:flex;gap:.25rem;margin:0;padding:0;overflow-x:auto;scrollbar-width:thin;list-style:none;border-bottom:1px solid var(--cb-color-border)}.cb-tabmenu__entry{flex:none}.cb-tabmenu__link{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;white-space:nowrap;padding:.625rem .875rem;border:0;border-bottom:2px solid transparent;background:transparent;color:inherit;font:inherit;text-decoration:none;cursor:pointer}.cb-tabmenu__link:hover:not(:disabled),.cb-tabmenu__link:focus-visible{background:var(--cb-color-surface);outline:none}.cb-tabmenu__link[aria-current=page]{border-bottom-color:var(--cb-color-primary);color:var(--cb-color-primary-text);font-weight:600}.cb-tabmenu__link:disabled{opacity:.5;cursor:default}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }] } });
 
 /**

package/fesm2022/caribeng-ui-tabs.mjs

@@ -82,7 +82,7 @@ class CbTabs {
     <div class="cb-tabs__panels">
       <ng-content />
     </div>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-tabs__list{display:flex;gap:var(--cb-space-1);border-bottom:var(--cb-border-width) solid var(--cb-color-border);overflow-x:auto}.cb-tabs__tab{position:relative;padding:var(--cb-space-3) var(--cb-space-4);border:none;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:var(--cb-font-weight-medium);white-space:nowrap;cursor:pointer;transition:color var(--cb-duration-fast) var(--cb-ease)}.cb-tabs__tab:after{content:\"\";position:absolute;left:var(--cb-space-3);right:var(--cb-space-3);bottom:-1px;height:2px;border-radius:2px;background-color:transparent;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-tabs__tab:hover{color:var(--cb-color-text)}.cb-tabs__tab.cb-is-active{color:var(--cb-color-primary-500)}.cb-tabs__tab.cb-is-active:after{background-color:var(--cb-color-primary-500)}.cb-tabs__tab:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px;border-radius:var(--cb-radius-sm)}.cb-tabs__tab:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-tabs__panels{padding:var(--cb-space-4) 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-tabs__list{display:flex;gap:var(--cb-space-1);border-bottom:var(--cb-border-width) solid var(--cb-color-border);overflow-x:auto}.cb-tabs__tab{position:relative;padding:var(--cb-space-3) var(--cb-space-4);border:none;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:var(--cb-font-weight-medium);white-space:nowrap;cursor:pointer;transition:color var(--cb-duration-fast) var(--cb-ease)}.cb-tabs__tab:after{content:\"\";position:absolute;left:var(--cb-space-3);right:var(--cb-space-3);bottom:-1px;height:2px;border-radius:2px;background-color:transparent;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-tabs__tab:hover{color:var(--cb-color-text)}.cb-tabs__tab.cb-is-active{color:var(--cb-color-primary-text)}.cb-tabs__tab.cb-is-active:after{background-color:var(--cb-color-primary-500)}.cb-tabs__tab:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px;border-radius:var(--cb-radius-sm)}.cb-tabs__tab:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-tabs__panels{padding:var(--cb-space-4) 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTabs, decorators: [{
             type: Component,
@@ -109,7 +109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     <div class="cb-tabs__panels">
       <ng-content />
     </div>
-  `, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-tabs__list{display:flex;gap:var(--cb-space-1);border-bottom:var(--cb-border-width) solid var(--cb-color-border);overflow-x:auto}.cb-tabs__tab{position:relative;padding:var(--cb-space-3) var(--cb-space-4);border:none;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:var(--cb-font-weight-medium);white-space:nowrap;cursor:pointer;transition:color var(--cb-duration-fast) var(--cb-ease)}.cb-tabs__tab:after{content:\"\";position:absolute;left:var(--cb-space-3);right:var(--cb-space-3);bottom:-1px;height:2px;border-radius:2px;background-color:transparent;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-tabs__tab:hover{color:var(--cb-color-text)}.cb-tabs__tab.cb-is-active{color:var(--cb-color-primary-500)}.cb-tabs__tab.cb-is-active:after{background-color:var(--cb-color-primary-500)}.cb-tabs__tab:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px;border-radius:var(--cb-radius-sm)}.cb-tabs__tab:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-tabs__panels{padding:var(--cb-space-4) 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}\n"] }]
+  `, styles: [":host{display:block;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-tabs__list{display:flex;gap:var(--cb-space-1);border-bottom:var(--cb-border-width) solid var(--cb-color-border);overflow-x:auto}.cb-tabs__tab{position:relative;padding:var(--cb-space-3) var(--cb-space-4);border:none;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:var(--cb-font-weight-medium);white-space:nowrap;cursor:pointer;transition:color var(--cb-duration-fast) var(--cb-ease)}.cb-tabs__tab:after{content:\"\";position:absolute;left:var(--cb-space-3);right:var(--cb-space-3);bottom:-1px;height:2px;border-radius:2px;background-color:transparent;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-tabs__tab:hover{color:var(--cb-color-text)}.cb-tabs__tab.cb-is-active{color:var(--cb-color-primary-text)}.cb-tabs__tab.cb-is-active:after{background-color:var(--cb-color-primary-500)}.cb-tabs__tab:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px;border-radius:var(--cb-radius-sm)}.cb-tabs__tab:disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-tabs__panels{padding:var(--cb-space-4) 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}\n"] }]
         }], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbTab), { isSignal: true }] }] } });
 /** Pestaña individual de un `<cb-tabs>`. */
 class CbTab {

package/fesm2022/{caribeng-ui-caribe-tag-button.mjs → caribeng-ui-tag-button.mjs}

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { input, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
- * Tag-button de Caribe Design: píldora pulsable usada como filtro o chip de
+ * Tag-button: píldora pulsable usada como filtro o chip de
  * acción. Alterna su estado seleccionado y emite el cambio.
  *
  * @example
@@ -32,33 +32,33 @@ class CbTagButton {
         this.changed.emit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTagButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbTagButton, isStandalone: true, selector: "cb-tag-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", changed: "changed" }, host: { classAttribute: "cb-tag-button-host" }, ngImport: i0, template: `
-    <button
-      type="button"
-      class="cb-tag-button"
-      [class.cb-tag-button--selected]="selected()"
-      [disabled]="disabled()"
-      [attr.aria-pressed]="selected()"
-      (click)="toggle()"
-    >
-      <span class="cb-tag-button__label">{{ label() }}</span>
-    </button>
-  `, isInline: true, styles: [":host{display:inline-block}.cb-tag-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--cb-space-1, .25rem);height:2rem;padding:0 var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);line-height:1;color:var(--cb-color-text, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #cbd5e1);border-radius:var(--cb-radius-full, 999px);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-tag-button:hover:not(:disabled){background-color:var(--cb-color-surface-100, #f1f5f9);border-color:var(--cb-color-border-strong, #94a3b8)}.cb-tag-button:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-tag-button--selected,.cb-tag-button--selected:hover:not(:disabled){color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857);border-color:var(--cb-color-primary-600, #047857)}.cb-tag-button:disabled{opacity:.55;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-tag-button{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-tag-button:hover:not(:disabled){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-tag-button--selected,:host-context([data-theme=\"dark\"]) .cb-tag-button--selected:hover:not(:disabled){color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-500, #10b981);border-color:var(--cb-color-primary-500, #10b981)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbTagButton, isStandalone: true, selector: "cb-tag-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", changed: "changed" }, host: { classAttribute: "cb-tag-button-host" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="cb-tag-button"
+      [class.cb-tag-button--selected]="selected()"
+      [disabled]="disabled()"
+      [attr.aria-pressed]="selected()"
+      (click)="toggle()"
+    >
+      <span class="cb-tag-button__label">{{ label() }}</span>
+    </button>
+  `, isInline: true, styles: [":host{display:inline-block}.cb-tag-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--cb-space-1, .25rem);height:2rem;padding:0 var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);line-height:1;color:var(--cb-color-text, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #cbd5e1);border-radius:var(--cb-radius-full, 999px);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-tag-button:hover:not(:disabled){background-color:var(--cb-color-surface-100, #f1f5f9);border-color:var(--cb-color-border-strong, #94a3b8)}.cb-tag-button:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-tag-button--selected,.cb-tag-button--selected:hover:not(:disabled){color:#fff;background-color:var(--cb-color-primary-700, #047857);border-color:var(--cb-color-primary-600, #047857)}.cb-tag-button:disabled{opacity:.55;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-tag-button{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-tag-button:hover:not(:disabled){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-tag-button--selected,:host-context([data-theme=\"dark\"]) .cb-tag-button--selected:hover:not(:disabled){color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-500, #10b981);border-color:var(--cb-color-primary-500, #10b981)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTagButton, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-tag-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-tag-button-host' }, template: `
-    <button
-      type="button"
-      class="cb-tag-button"
-      [class.cb-tag-button--selected]="selected()"
-      [disabled]="disabled()"
-      [attr.aria-pressed]="selected()"
-      (click)="toggle()"
-    >
-      <span class="cb-tag-button__label">{{ label() }}</span>
-    </button>
-  `, styles: [":host{display:inline-block}.cb-tag-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--cb-space-1, .25rem);height:2rem;padding:0 var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);line-height:1;color:var(--cb-color-text, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #cbd5e1);border-radius:var(--cb-radius-full, 999px);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-tag-button:hover:not(:disabled){background-color:var(--cb-color-surface-100, #f1f5f9);border-color:var(--cb-color-border-strong, #94a3b8)}.cb-tag-button:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-tag-button--selected,.cb-tag-button--selected:hover:not(:disabled){color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857);border-color:var(--cb-color-primary-600, #047857)}.cb-tag-button:disabled{opacity:.55;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-tag-button{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-tag-button:hover:not(:disabled){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-tag-button--selected,:host-context([data-theme=\"dark\"]) .cb-tag-button--selected:hover:not(:disabled){color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-500, #10b981);border-color:var(--cb-color-primary-500, #10b981)}\n"] }]
+            args: [{ selector: 'cb-tag-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-tag-button-host' }, template: `
+    <button
+      type="button"
+      class="cb-tag-button"
+      [class.cb-tag-button--selected]="selected()"
+      [disabled]="disabled()"
+      [attr.aria-pressed]="selected()"
+      (click)="toggle()"
+    >
+      <span class="cb-tag-button__label">{{ label() }}</span>
+    </button>
+  `, styles: [":host{display:inline-block}.cb-tag-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--cb-space-1, .25rem);height:2rem;padding:0 var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);line-height:1;color:var(--cb-color-text, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #cbd5e1);border-radius:var(--cb-radius-full, 999px);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-tag-button:hover:not(:disabled){background-color:var(--cb-color-surface-100, #f1f5f9);border-color:var(--cb-color-border-strong, #94a3b8)}.cb-tag-button:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-tag-button--selected,.cb-tag-button--selected:hover:not(:disabled){color:#fff;background-color:var(--cb-color-primary-700, #047857);border-color:var(--cb-color-primary-600, #047857)}.cb-tag-button:disabled{opacity:.55;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-tag-button{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-tag-button:hover:not(:disabled){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-tag-button--selected,:host-context([data-theme=\"dark\"]) .cb-tag-button--selected:hover:not(:disabled){color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-500, #10b981);border-color:var(--cb-color-primary-500, #10b981)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**

package/fesm2022/caribeng-ui-tag.mjs

@@ -31,7 +31,7 @@ class CbTag {
       <span class="cb-tag__label">{{ value() }}</span>
     }
     <ng-content />
-  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:var(--cb-radius-sm);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);line-height:1.4;color:var(--_fg);background-color:var(--_bg)}:host(.cb-tag--rounded){border-radius:var(--cb-radius-full);padding-inline:.625rem}:host(.cb-tag--primary){--_bg: var(--cb-color-primary-100);--_fg: var(--cb-color-primary-500)}:host(.cb-tag--secondary){--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text-muted)}:host(.cb-tag--success){--_bg: var(--cb-color-success-100);--_fg: var(--cb-color-success-500)}:host(.cb-tag--info){--_bg: var(--cb-color-info-100);--_fg: var(--cb-color-info-500)}:host(.cb-tag--warning){--_bg: var(--cb-color-warning-100);--_fg: var(--cb-color-warning-500)}:host(.cb-tag--danger){--_bg: var(--cb-color-danger-100);--_fg: var(--cb-color-danger-500)}:host(.cb-tag--help){--_bg: var(--cb-color-help-100);--_fg: var(--cb-color-help-500)}:host(.cb-tag--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}:host-context([data-theme=\"dark\"]){--_bg: color-mix(in srgb, var(--_fg) 22%, transparent)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:var(--cb-radius-sm);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);line-height:1.4;color:var(--_fg);background-color:var(--_bg)}:host(.cb-tag--rounded){border-radius:var(--cb-radius-full);padding-inline:.625rem}:host(.cb-tag--primary){--_bg: var(--cb-color-primary-100);--_fg: var(--cb-color-primary-text)}:host(.cb-tag--secondary){--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text-muted)}:host(.cb-tag--success){--_bg: var(--cb-color-success-100);--_fg: var(--cb-color-success-text)}:host(.cb-tag--info){--_bg: var(--cb-color-info-100);--_fg: var(--cb-color-info-text)}:host(.cb-tag--warning){--_bg: var(--cb-color-warning-100);--_fg: var(--cb-color-warning-text)}:host(.cb-tag--danger){--_bg: var(--cb-color-danger-100);--_fg: var(--cb-color-danger-text)}:host(.cb-tag--help){--_bg: var(--cb-color-help-100);--_fg: var(--cb-color-help-text)}:host(.cb-tag--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}:host-context([data-theme=\"dark\"]){--_bg: color-mix(in srgb, var(--_fg) 22%, transparent)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTag, decorators: [{
             type: Component,
@@ -47,7 +47,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <span class="cb-tag__label">{{ value() }}</span>
     }
     <ng-content />
-  `, styles: [":host{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:var(--cb-radius-sm);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);line-height:1.4;color:var(--_fg);background-color:var(--_bg)}:host(.cb-tag--rounded){border-radius:var(--cb-radius-full);padding-inline:.625rem}:host(.cb-tag--primary){--_bg: var(--cb-color-primary-100);--_fg: var(--cb-color-primary-500)}:host(.cb-tag--secondary){--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text-muted)}:host(.cb-tag--success){--_bg: var(--cb-color-success-100);--_fg: var(--cb-color-success-500)}:host(.cb-tag--info){--_bg: var(--cb-color-info-100);--_fg: var(--cb-color-info-500)}:host(.cb-tag--warning){--_bg: var(--cb-color-warning-100);--_fg: var(--cb-color-warning-500)}:host(.cb-tag--danger){--_bg: var(--cb-color-danger-100);--_fg: var(--cb-color-danger-500)}:host(.cb-tag--help){--_bg: var(--cb-color-help-100);--_fg: var(--cb-color-help-500)}:host(.cb-tag--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}:host-context([data-theme=\"dark\"]){--_bg: color-mix(in srgb, var(--_fg) 22%, transparent)}\n"] }]
+  `, styles: [":host{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:var(--cb-radius-sm);font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);line-height:1.4;color:var(--_fg);background-color:var(--_bg)}:host(.cb-tag--rounded){border-radius:var(--cb-radius-full);padding-inline:.625rem}:host(.cb-tag--primary){--_bg: var(--cb-color-primary-100);--_fg: var(--cb-color-primary-text)}:host(.cb-tag--secondary){--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text-muted)}:host(.cb-tag--success){--_bg: var(--cb-color-success-100);--_fg: var(--cb-color-success-text)}:host(.cb-tag--info){--_bg: var(--cb-color-info-100);--_fg: var(--cb-color-info-text)}:host(.cb-tag--warning){--_bg: var(--cb-color-warning-100);--_fg: var(--cb-color-warning-text)}:host(.cb-tag--danger){--_bg: var(--cb-color-danger-100);--_fg: var(--cb-color-danger-text)}:host(.cb-tag--help){--_bg: var(--cb-color-help-100);--_fg: var(--cb-color-help-text)}:host(.cb-tag--contrast){--_bg: var(--cb-color-text);--_fg: var(--cb-color-bg)}:host-context([data-theme=\"dark\"]){--_bg: color-mix(in srgb, var(--_fg) 22%, transparent)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

package/fesm2022/caribeng-ui-tieredmenu.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, DestroyRef, input, output, signal, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ViewContainerRef, DestroyRef, input, computed, output, signal, viewChild, Injector, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { CbIcon } from '@caribeng/ui/icon';
-import { injectCbTranslation } from '@caribeng/ui';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 
 /** Popup menu with cascading submenus. */
 class CbTieredMenu {
@@ -15,6 +15,9 @@ class CbTieredMenu {
         this.destroyRef = inject(DestroyRef);
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Items sin los de `visible: false`. */
+        this.visibleItems = computed(() => cbVisibleItems(this.items()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
         this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.triggerLabel = input(undefined, /* @ts-ignore */
@@ -33,6 +36,8 @@ class CbTieredMenu {
             { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
             { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
         ];
+        this.injector = inject(Injector);
+        this.trigger = viewChild.required('trigger');
         this.destroyRef.onDestroy(() => this.overlayRef?.dispose());
     }
     toggle(event) { if (this.overlayRef)
@@ -46,26 +51,111 @@ class CbTieredMenu {
         this.overlayRef = ref;
         this.isOpen.set(true);
         ref.attach(new TemplatePortal(this.content(), this.vcr));
-        ref.backdropClick().subscribe(() => this.hide());
+        ref.backdropClick().subscribe(() => this.hide(false));
         ref.keydownEvents().subscribe((event) => { if (event.key === 'Escape') {
             event.preventDefault();
             this.hide();
         } });
+        // Patrón WAI-ARIA menu: al abrir, el foco pasa al primer item.
+        afterNextRender(() => this.focusFirst(ref.overlayElement.querySelector('.cb-tieredmenu__list')), { injector: this.injector });
     }
     select(item) { if (item.disabled)
-        return; this.itemSelect.emit(item); this.hide(); }
-    hide() { this.overlayRef?.dispose(); this.overlayRef = null; this.isOpen.set(false); this.openIndex.set(null); this.openChildIndex.set(null); }
+        return; cbRunCommand(item); this.itemSelect.emit(item); this.hide(); }
+    /** Cierra el menú; con `restoreFocus` (por defecto) el foco vuelve al botón que lo abre. */
+    hide(restoreFocus = true) {
+        const wasOpen = !!this.overlayRef;
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.isOpen.set(false);
+        this.openIndex.set(null);
+        this.openChildIndex.set(null);
+        if (wasOpen && restoreFocus)
+            this.trigger().nativeElement.focus();
+    }
+    onTriggerKeydown(event) {
+        if (event.key !== 'ArrowDown' || this.overlayRef)
+            return;
+        event.preventDefault();
+        this.show(event.currentTarget);
+    }
+    /** Flechas, Inicio y Fin dentro de cada nivel; derecha abre el submenú e izquierda vuelve al nivel anterior. */
+    onMenuKeydown(event) {
+        const item = event.target.closest('[role="menuitem"]');
+        const menu = item?.closest('[role="menu"]');
+        if (!item || !menu)
+            return;
+        const items = this.menuItems(menu);
+        const at = items.indexOf(item);
+        const opensSubmenu = item.getAttribute('aria-haspopup') === 'menu';
+        switch (event.key) {
+            case 'ArrowDown':
+                items[(at + 1) % items.length]?.focus();
+                break;
+            case 'ArrowUp':
+                items[(at - 1 + items.length) % items.length]?.focus();
+                break;
+            case 'Home':
+                items[0]?.focus();
+                break;
+            case 'End':
+                items[items.length - 1]?.focus();
+                break;
+            case 'ArrowRight':
+            case 'Enter':
+            case ' ':
+                if (!opensSubmenu)
+                    return;
+                this.openSubmenu(item);
+                break;
+            case 'ArrowLeft': {
+                if (menu.classList.contains('cb-tieredmenu__list'))
+                    break;
+                const parent = menu.parentElement?.querySelector(':scope > [role="menuitem"]');
+                if (parent?.dataset['level'] === '1') {
+                    this.openIndex.set(null);
+                    this.openChildIndex.set(null);
+                }
+                else
+                    this.openChildIndex.set(null);
+                parent?.focus();
+                break;
+            }
+            case 'Tab':
+                this.hide();
+                break;
+            default: return;
+        }
+        event.preventDefault();
+    }
+    openSubmenu(item) {
+        const index = Number(item.dataset['index']);
+        if (item.dataset['level'] === '1') {
+            this.openIndex.set(index);
+            this.openChildIndex.set(null);
+        }
+        else
+            this.openChildIndex.set(index);
+        // El submenú se pinta en el siguiente render (zoneless): se enfoca después.
+        afterNextRender(() => this.focusFirst(item.parentElement?.querySelector(':scope > [role="menu"]') ?? null), { injector: this.injector });
+    }
+    menuItems(menu) {
+        return Array.from(menu.querySelectorAll(':scope > li > [role="menuitem"]')).filter((el) => !el.hasAttribute('disabled'));
+    }
+    focusFirst(menu) {
+        if (menu)
+            this.menuItems(menu)[0]?.focus();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTieredMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTieredMenu, isStandalone: true, selector: "cb-tieredmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <button class="cb-tieredmenu__trigger" type="button" [attr.aria-expanded]="isOpen()" aria-haspopup="menu" (click)="toggle($event)">{{ (triggerLabel() ?? t().menu) }}</button>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTieredMenu, isStandalone: true, selector: "cb-tieredmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button #trigger class="cb-tieredmenu__trigger" type="button" [attr.aria-expanded]="isOpen()" aria-haspopup="menu" (click)="toggle($event)" (keydown)="onTriggerKeydown($event)">{{ (triggerLabel() ?? t().menu) }}</button>
     <ng-template #content>
-      <ul class="cb-tieredmenu__list" role="menu" [attr.aria-label]="(ariaLabel() ?? t().menu)">
-        @for (item of items(); track $index; let i = $index) {
+      <ul class="cb-tieredmenu__list" role="menu" [attr.aria-label]="(ariaLabel() ?? t().menu)" (keydown)="onMenuKeydown($event)">
+        @for (item of visibleItems(); track $index; let i = $index) {
           @if (item.separator) { <li class="cb-tieredmenu__separator" role="separator"></li> }
           @else {
-            <li class="cb-tieredmenu__entry" [class.cb-tieredmenu__entry--open]="openIndex() === i">
+            <li class="cb-tieredmenu__entry" role="none" [class.cb-tieredmenu__entry--open]="openIndex() === i">
               @if (item.items?.length) {
-                <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openIndex() === i" [disabled]="item.disabled" (mouseenter)="openIndex.set(i)" (click)="openIndex.set(openIndex() === i ? null : i)">
+                <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openIndex() === i" data-level="1" [attr.data-index]="i" [disabled]="item.disabled" (mouseenter)="openIndex.set(i)" (click)="openIndex.set(i)">
                   @if (item.icon) { <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" /> }<span>{{ item.label }}</span><cb-icon name="chevron-right" [size]="15" aria-hidden="true" />
                 </button>
                 @if (openIndex() === i) {
@@ -73,7 +163,7 @@ class CbTieredMenu {
                     @for (child of item.items; track $index; let j = $index) {
                       <li role="none">
                         @if (child.items?.length) {
-                          <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openChildIndex() === j" [disabled]="child.disabled" (mouseenter)="openChildIndex.set(j)" (click)="openChildIndex.set(openChildIndex() === j ? null : j)">
+                          <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openChildIndex() === j" data-level="2" [attr.data-index]="j" [disabled]="child.disabled" (mouseenter)="openChildIndex.set(j)" (click)="openChildIndex.set(j)">
                             @if (child.icon) { <cb-icon [name]="child.icon" [size]="16" aria-hidden="true" /> }<span>{{ child.label }}</span><cb-icon name="chevron-right" [size]="15" aria-hidden="true" />
                           </button>
                           @if (openChildIndex() === j) {
@@ -100,20 +190,20 @@ class CbTieredMenu {
         }
       </ul>
     </ng-template>
-  `, isInline: true, styles: [":host{display:inline-block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tieredmenu__trigger{min-height:2.5rem;padding:.5rem .875rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);color:inherit;font:inherit;cursor:pointer}.cb-tieredmenu__trigger:hover,.cb-tieredmenu__trigger:focus-visible{outline:none;border-color:var(--cb-color-primary)}.cb-tieredmenu__list,.cb-tieredmenu__submenu{min-width:13rem;margin:0;padding:.375rem;list-style:none;background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-lg)}.cb-tieredmenu__entry{position:relative}.cb-tieredmenu__item{display:flex;align-items:center;gap:.625rem;width:100%;min-height:2.25rem;padding:.5rem .625rem;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.cb-tieredmenu__item span{flex:1}.cb-tieredmenu__item:hover:not(:disabled),.cb-tieredmenu__item:focus-visible,.cb-tieredmenu__entry--open>.cb-tieredmenu__item{outline:none;background:var(--cb-color-surface)}.cb-tieredmenu__item:disabled{opacity:.5;cursor:default}.cb-tieredmenu__submenu{position:absolute;z-index:2;top:-.375rem;left:calc(100% + .25rem)}.cb-tieredmenu__submenu--third{z-index:3}.cb-tieredmenu__separator{height:1px;margin:.375rem .25rem;background:var(--cb-color-border)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:inline-block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tieredmenu__trigger{min-height:2.5rem;padding:.5rem .875rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);color:inherit;font:inherit;cursor:pointer}.cb-tieredmenu__trigger:hover,.cb-tieredmenu__trigger:focus-visible{outline:none;border-color:var(--cb-color-primary)}.cb-tieredmenu__list,.cb-tieredmenu__submenu{min-width:13rem;margin:0;padding:.375rem;list-style:none;background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-lg)}.cb-tieredmenu__entry{position:relative}.cb-tieredmenu__item{display:flex;align-items:center;gap:.625rem;width:100%;min-height:2.25rem;padding:.5rem .625rem;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.cb-tieredmenu__item span{flex:1}.cb-tieredmenu__item:hover:not(:disabled),.cb-tieredmenu__item:focus-visible,.cb-tieredmenu__entry--open>.cb-tieredmenu__item{outline:none;background:var(--cb-color-surface)}.cb-tieredmenu__item:disabled{opacity:.5;cursor:default}.cb-tieredmenu__submenu{position:absolute;z-index:2;top:-.375rem;left:calc(100% + .25rem)}.cb-tieredmenu__submenu--third{z-index:3}.cb-tieredmenu__separator{height:1px;margin:.375rem .25rem;background:var(--cb-color-border)}@media(max-width:40rem){.cb-tieredmenu__list{min-width:min(13rem,calc(100vw - 2rem));max-width:calc(100vw - 2rem)}.cb-tieredmenu__submenu{position:static;min-width:0;margin:0 0 0 .75rem;padding:0 0 0 .25rem;border:0;border-left:1px solid var(--cb-color-border);border-radius:0;box-shadow:none}.cb-tieredmenu__item[aria-expanded=true]>cb-icon:last-child{transform:rotate(90deg)}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTieredMenu, decorators: [{
             type: Component,
             args: [{ selector: 'cb-tieredmenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], template: `
-    <button class="cb-tieredmenu__trigger" type="button" [attr.aria-expanded]="isOpen()" aria-haspopup="menu" (click)="toggle($event)">{{ (triggerLabel() ?? t().menu) }}</button>
+    <button #trigger class="cb-tieredmenu__trigger" type="button" [attr.aria-expanded]="isOpen()" aria-haspopup="menu" (click)="toggle($event)" (keydown)="onTriggerKeydown($event)">{{ (triggerLabel() ?? t().menu) }}</button>
     <ng-template #content>
-      <ul class="cb-tieredmenu__list" role="menu" [attr.aria-label]="(ariaLabel() ?? t().menu)">
-        @for (item of items(); track $index; let i = $index) {
+      <ul class="cb-tieredmenu__list" role="menu" [attr.aria-label]="(ariaLabel() ?? t().menu)" (keydown)="onMenuKeydown($event)">
+        @for (item of visibleItems(); track $index; let i = $index) {
           @if (item.separator) { <li class="cb-tieredmenu__separator" role="separator"></li> }
           @else {
-            <li class="cb-tieredmenu__entry" [class.cb-tieredmenu__entry--open]="openIndex() === i">
+            <li class="cb-tieredmenu__entry" role="none" [class.cb-tieredmenu__entry--open]="openIndex() === i">
               @if (item.items?.length) {
-                <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openIndex() === i" [disabled]="item.disabled" (mouseenter)="openIndex.set(i)" (click)="openIndex.set(openIndex() === i ? null : i)">
+                <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openIndex() === i" data-level="1" [attr.data-index]="i" [disabled]="item.disabled" (mouseenter)="openIndex.set(i)" (click)="openIndex.set(i)">
                   @if (item.icon) { <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" /> }<span>{{ item.label }}</span><cb-icon name="chevron-right" [size]="15" aria-hidden="true" />
                 </button>
                 @if (openIndex() === i) {
@@ -121,7 +211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     @for (child of item.items; track $index; let j = $index) {
                       <li role="none">
                         @if (child.items?.length) {
-                          <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openChildIndex() === j" [disabled]="child.disabled" (mouseenter)="openChildIndex.set(j)" (click)="openChildIndex.set(openChildIndex() === j ? null : j)">
+                          <button class="cb-tieredmenu__item" type="button" role="menuitem" aria-haspopup="menu" [attr.aria-expanded]="openChildIndex() === j" data-level="2" [attr.data-index]="j" [disabled]="child.disabled" (mouseenter)="openChildIndex.set(j)" (click)="openChildIndex.set(j)">
                             @if (child.icon) { <cb-icon [name]="child.icon" [size]="16" aria-hidden="true" /> }<span>{{ child.label }}</span><cb-icon name="chevron-right" [size]="15" aria-hidden="true" />
                           </button>
                           @if (openChildIndex() === j) {
@@ -148,8 +238,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       </ul>
     </ng-template>
-  `, styles: [":host{display:inline-block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tieredmenu__trigger{min-height:2.5rem;padding:.5rem .875rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);color:inherit;font:inherit;cursor:pointer}.cb-tieredmenu__trigger:hover,.cb-tieredmenu__trigger:focus-visible{outline:none;border-color:var(--cb-color-primary)}.cb-tieredmenu__list,.cb-tieredmenu__submenu{min-width:13rem;margin:0;padding:.375rem;list-style:none;background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-lg)}.cb-tieredmenu__entry{position:relative}.cb-tieredmenu__item{display:flex;align-items:center;gap:.625rem;width:100%;min-height:2.25rem;padding:.5rem .625rem;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.cb-tieredmenu__item span{flex:1}.cb-tieredmenu__item:hover:not(:disabled),.cb-tieredmenu__item:focus-visible,.cb-tieredmenu__entry--open>.cb-tieredmenu__item{outline:none;background:var(--cb-color-surface)}.cb-tieredmenu__item:disabled{opacity:.5;cursor:default}.cb-tieredmenu__submenu{position:absolute;z-index:2;top:-.375rem;left:calc(100% + .25rem)}.cb-tieredmenu__submenu--third{z-index:3}.cb-tieredmenu__separator{height:1px;margin:.375rem .25rem;background:var(--cb-color-border)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+  `, styles: [":host{display:inline-block;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-tieredmenu__trigger{min-height:2.5rem;padding:.5rem .875rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);color:inherit;font:inherit;cursor:pointer}.cb-tieredmenu__trigger:hover,.cb-tieredmenu__trigger:focus-visible{outline:none;border-color:var(--cb-color-primary)}.cb-tieredmenu__list,.cb-tieredmenu__submenu{min-width:13rem;margin:0;padding:.375rem;list-style:none;background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-lg)}.cb-tieredmenu__entry{position:relative}.cb-tieredmenu__item{display:flex;align-items:center;gap:.625rem;width:100%;min-height:2.25rem;padding:.5rem .625rem;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.cb-tieredmenu__item span{flex:1}.cb-tieredmenu__item:hover:not(:disabled),.cb-tieredmenu__item:focus-visible,.cb-tieredmenu__entry--open>.cb-tieredmenu__item{outline:none;background:var(--cb-color-surface)}.cb-tieredmenu__item:disabled{opacity:.5;cursor:default}.cb-tieredmenu__submenu{position:absolute;z-index:2;top:-.375rem;left:calc(100% + .25rem)}.cb-tieredmenu__submenu--third{z-index:3}.cb-tieredmenu__separator{height:1px;margin:.375rem .25rem;background:var(--cb-color-border)}@media(max-width:40rem){.cb-tieredmenu__list{min-width:min(13rem,calc(100vw - 2rem));max-width:calc(100vw - 2rem)}.cb-tieredmenu__submenu{position:static;min-width:0;margin:0 0 0 .75rem;padding:0 0 0 .25rem;border:0;border-left:1px solid var(--cb-color-border);border-radius:0;box-shadow:none}.cb-tieredmenu__item[aria-expanded=true]>cb-icon:last-child{transform:rotate(90deg)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/{caribeng-ui-caribe-tracker.mjs → caribeng-ui-tracker.mjs}

@@ -3,7 +3,7 @@ import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
- * Tracker de Caribe Design: indicador de progreso por pasos (stepper) con
+ * Tracker: indicador de progreso por pasos (stepper) con
  * marcadores completados, activo y pendientes conectados por líneas.
  *
  * @example
@@ -27,38 +27,38 @@ class CbTracker {
         return index < this.currentIndex() ? '✓' : index + 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTracker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTracker, isStandalone: true, selector: "cb-tracker", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, currentIndex: { classPropertyName: "currentIndex", publicName: "currentIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <ol class="cb-tracker" [attr.aria-label]="t().progress">
-      @for (step of steps(); track $index) {
-        <li
-          class="cb-tracker__step"
-          [class.cb-is-complete]="$index < currentIndex()"
-          [class.cb-is-current]="$index === currentIndex()"
-          [attr.aria-current]="ariaCurrent($index)"
-        >
-          <span class="cb-tracker__marker">{{ marker($index) }}</span>
-          <span class="cb-tracker__label">{{ step }}</span>
-        </li>
-      }
-    </ol>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbTracker, isStandalone: true, selector: "cb-tracker", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, currentIndex: { classPropertyName: "currentIndex", publicName: "currentIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <ol class="cb-tracker" [attr.aria-label]="t().progress">
+      @for (step of steps(); track $index) {
+        <li
+          class="cb-tracker__step"
+          [class.cb-is-complete]="$index < currentIndex()"
+          [class.cb-is-current]="$index === currentIndex()"
+          [attr.aria-current]="ariaCurrent($index)"
+        >
+          <span class="cb-tracker__marker">{{ marker($index) }}</span>
+          <span class="cb-tracker__label">{{ step }}</span>
+        </li>
+      }
+    </ol>
   `, isInline: true, styles: [":host{display:block;width:100%}.cb-tracker{display:flex;margin:0;padding:0;list-style:none;font-family:var(--cb-font-sans, inherit)}.cb-tracker__step{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-2, .5rem);text-align:center}.cb-tracker__step:before{content:\"\";position:absolute;top:.9rem;right:50%;width:100%;height:2px;background-color:var(--cb-color-surface-300, #cbd5e1)}.cb-tracker__step:first-child:before{display:none}.cb-tracker__step.cb-is-complete:before,.cb-tracker__step.cb-is-current:before{background-color:var(--cb-color-primary-500, #10b981)}.cb-tracker__marker{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted, #64748b);background-color:var(--cb-color-surface-200, #e2e8f0);border:2px solid var(--cb-color-surface-300, #cbd5e1);border-radius:var(--cb-radius-full, 999px)}.cb-tracker__step.cb-is-complete .cb-tracker__marker{color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-500, #10b981);border-color:var(--cb-color-primary-500, #10b981)}.cb-tracker__step.cb-is-current .cb-tracker__marker{color:var(--cb-color-primary-700, #065f46);background-color:var(--cb-color-surface-0, #ffffff);border-color:var(--cb-color-primary-500, #10b981)}.cb-tracker__label{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b);padding:0 var(--cb-space-1, .25rem)}.cb-tracker__step.cb-is-current .cb-tracker__label{color:var(--cb-color-text-strong, #0f172a);font-weight:var(--cb-font-weight-semibold, 600)}:host-context([data-theme=\"dark\"]) .cb-tracker__step:before{background-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-tracker__step.cb-is-complete:before,:host-context([data-theme=\"dark\"]) .cb-tracker__step.cb-is-current:before{background-color:var(--cb-color-primary-500, #10b981)}:host-context([data-theme=\"dark\"]) .cb-tracker__marker{background-color:var(--cb-color-surface-700, #334155);border-color:var(--cb-color-surface-600, #475569);color:var(--cb-color-surface-300, #cbd5e1)}:host-context([data-theme=\"dark\"]) .cb-tracker__step.cb-is-current .cb-tracker__marker{background-color:var(--cb-color-surface-900, #0f172a)}:host-context([data-theme=\"dark\"]) .cb-tracker__step.cb-is-current .cb-tracker__label{color:var(--cb-color-surface-0, #f8fafc)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTracker, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-tracker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
-    <ol class="cb-tracker" [attr.aria-label]="t().progress">
-      @for (step of steps(); track $index) {
-        <li
-          class="cb-tracker__step"
-          [class.cb-is-complete]="$index < currentIndex()"
-          [class.cb-is-current]="$index === currentIndex()"
-          [attr.aria-current]="ariaCurrent($index)"
-        >
-          <span class="cb-tracker__marker">{{ marker($index) }}</span>
-          <span class="cb-tracker__label">{{ step }}</span>
-        </li>
-      }
-    </ol>
+            args: [{ selector: 'cb-tracker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
+    <ol class="cb-tracker" [attr.aria-label]="t().progress">
+      @for (step of steps(); track $index) {
+        <li
+          class="cb-tracker__step"
+          [class.cb-is-complete]="$index < currentIndex()"
+          [class.cb-is-current]="$index === currentIndex()"
+          [attr.aria-current]="ariaCurrent($index)"
+        >
+          <span class="cb-tracker__marker">{{ marker($index) }}</span>
+          <span class="cb-tracker__label">{{ step }}</span>
+        </li>
+      }
+    </ol>
   `, styles: [":host{display:block;width:100%}.cb-tracker{display:flex;margin:0;padding:0;list-style:none;font-family:var(--cb-font-sans, inherit)}.cb-tracker__step{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-2, .5rem);text-align:center}.cb-tracker__step:before{content:\"\";position:absolute;top:.9rem;right:50%;width:100%;height:2px;background-color:var(--cb-color-surface-300, #cbd5e1)}.cb-tracker__step:first-child:before{display:none}.cb-tracker__step.cb-is-complete:before,.cb-tracker__step.cb-is-current:before{background-color:var(--cb-color-primary-500, #10b981)}.cb-tracker__marker{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted, #64748b);background-color:var(--cb-color-surface-200, #e2e8f0);border:2px solid var(--cb-color-surface-300, #cbd5e1);border-radius:var(--cb-radius-full, 999px)}.cb-tracker__step.cb-is-complete .cb-tracker__marker{color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-500, #10b981);border-color:var(--cb-color-primary-500, #10b981)}.cb-tracker__step.cb-is-current .cb-tracker__marker{color:var(--cb-color-primary-700, #065f46);background-color:var(--cb-color-surface-0, #ffffff);border-color:var(--cb-color-primary-500, #10b981)}.cb-tracker__label{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b);padding:0 var(--cb-space-1, .25rem)}.cb-tracker__step.cb-is-current .cb-tracker__label{color:var(--cb-color-text-strong, #0f172a);font-weight:var(--cb-font-weight-semibold, 600)}:host-context([data-theme=\"dark\"]) .cb-tracker__step:before{background-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-tracker__step.cb-is-complete:before,:host-context([data-theme=\"dark\"]) .cb-tracker__step.cb-is-current:before{background-color:var(--cb-color-primary-500, #10b981)}:host-context([data-theme=\"dark\"]) .cb-tracker__marker{background-color:var(--cb-color-surface-700, #334155);border-color:var(--cb-color-surface-600, #475569);color:var(--cb-color-surface-300, #cbd5e1)}:host-context([data-theme=\"dark\"]) .cb-tracker__step.cb-is-current .cb-tracker__marker{background-color:var(--cb-color-surface-900, #0f172a)}:host-context([data-theme=\"dark\"]) .cb-tracker__step.cb-is-current .cb-tracker__label{color:var(--cb-color-surface-0, #f8fafc)}\n"] }]
         }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], currentIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentIndex", required: false }] }] } });
 

package/fesm2022/{caribeng-ui-caribe-transaction-status.mjs → caribeng-ui-transaction-status.mjs}

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
- * Transaction-status de Caribe Design: indicador del resultado de una
+ * Transaction-status: indicador del resultado de una
  * transacción (éxito, advertencia, error, info).
  *
  * @example
@@ -30,20 +30,20 @@ class CbTransactionStatus {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTransactionStatus, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbTransactionStatus, isStandalone: true, selector: "cb-transaction-status", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="cb-txn cb-txn--{{ status() }}" role="status">
-      <span class="cb-txn__icon" aria-hidden="true">{{ glyph() }}</span>
-      <span class="cb-txn__label">{{ label() }}</span>
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbTransactionStatus, isStandalone: true, selector: "cb-transaction-status", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="cb-txn cb-txn--{{ status() }}" role="status">
+      <span class="cb-txn__icon" aria-hidden="true">{{ glyph() }}</span>
+      <span class="cb-txn__label">{{ label() }}</span>
+    </div>
   `, isInline: true, styles: [":host{display:inline-flex}.cb-txn{display:inline-flex;align-items:center;gap:var(--cb-space-2, .5rem);padding:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);border:1px solid transparent;border-radius:var(--cb-radius-full, 999px)}.cb-txn__icon{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:.75rem;font-weight:var(--cb-font-weight-bold, 700);color:#fff;border-radius:var(--cb-radius-full, 999px)}.cb-txn--success{color:var(--cb-color-success-700, #15803d);background-color:var(--cb-color-success-50, #f0fdf4);border-color:var(--cb-color-success-200, #bbf7d0)}.cb-txn--success .cb-txn__icon{background-color:var(--cb-color-success-500, #16a34a)}.cb-txn--warning{color:var(--cb-color-warning-700, #b45309);background-color:var(--cb-color-warning-50, #fffbeb);border-color:var(--cb-color-warning-200, #fde68a)}.cb-txn--warning .cb-txn__icon{background-color:var(--cb-color-warning-500, #d97706)}.cb-txn--error{color:var(--cb-color-danger-700, #b91c1c);background-color:var(--cb-color-danger-50, #fef2f2);border-color:var(--cb-color-danger-200, #fecaca)}.cb-txn--error .cb-txn__icon{background-color:var(--cb-color-danger-500, #dc2626)}.cb-txn--info{color:var(--cb-color-info-700, #1d4ed8);background-color:var(--cb-color-info-50, #eff6ff);border-color:var(--cb-color-info-200, #bfdbfe)}.cb-txn--info .cb-txn__icon{background-color:var(--cb-color-info-500, #2563eb)}:host-context([data-theme=\"dark\"]) .cb-txn{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569);color:var(--cb-color-surface-100, #f1f5f9)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbTransactionStatus, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-transaction-status', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
-    <div class="cb-txn cb-txn--{{ status() }}" role="status">
-      <span class="cb-txn__icon" aria-hidden="true">{{ glyph() }}</span>
-      <span class="cb-txn__label">{{ label() }}</span>
-    </div>
+            args: [{ selector: 'cb-transaction-status', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
+    <div class="cb-txn cb-txn--{{ status() }}" role="status">
+      <span class="cb-txn__icon" aria-hidden="true">{{ glyph() }}</span>
+      <span class="cb-txn__label">{{ label() }}</span>
+    </div>
   `, styles: [":host{display:inline-flex}.cb-txn{display:inline-flex;align-items:center;gap:var(--cb-space-2, .5rem);padding:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500);border:1px solid transparent;border-radius:var(--cb-radius-full, 999px)}.cb-txn__icon{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:.75rem;font-weight:var(--cb-font-weight-bold, 700);color:#fff;border-radius:var(--cb-radius-full, 999px)}.cb-txn--success{color:var(--cb-color-success-700, #15803d);background-color:var(--cb-color-success-50, #f0fdf4);border-color:var(--cb-color-success-200, #bbf7d0)}.cb-txn--success .cb-txn__icon{background-color:var(--cb-color-success-500, #16a34a)}.cb-txn--warning{color:var(--cb-color-warning-700, #b45309);background-color:var(--cb-color-warning-50, #fffbeb);border-color:var(--cb-color-warning-200, #fde68a)}.cb-txn--warning .cb-txn__icon{background-color:var(--cb-color-warning-500, #d97706)}.cb-txn--error{color:var(--cb-color-danger-700, #b91c1c);background-color:var(--cb-color-danger-50, #fef2f2);border-color:var(--cb-color-danger-200, #fecaca)}.cb-txn--error .cb-txn__icon{background-color:var(--cb-color-danger-500, #dc2626)}.cb-txn--info{color:var(--cb-color-info-700, #1d4ed8);background-color:var(--cb-color-info-50, #eff6ff);border-color:var(--cb-color-info-200, #bfdbfe)}.cb-txn--info .cb-txn__icon{background-color:var(--cb-color-info-500, #2563eb)}:host-context([data-theme=\"dark\"]) .cb-txn{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569);color:var(--cb-color-surface-100, #f1f5f9)}\n"] }]
         }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });