@caribeng/ui 22.4.0 → 22.5.0

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

@@ -3,7 +3,7 @@ import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component }
 import { injectCbTranslation } from '@caribeng/ui';
 
 /**
- * Card-content de Caribe Design: tarjeta de contenido con título, subtítulo,
+ * Card-content: tarjeta de contenido con título, subtítulo,
  * cuerpo proyectado y una acción al pie.
  *
  * @example
@@ -24,48 +24,48 @@ class CbCardContent {
         this.action = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCardContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCardContent, isStandalone: true, selector: "cb-card-content", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: `
-    <article class="cb-card-content">
-      <header class="cb-card-content__head">
-        <strong class="cb-card-content__title">{{ title() }}</strong>
-        @if (subtitle()) {
-          <span class="cb-card-content__subtitle">{{ subtitle() }}</span>
-        }
-      </header>
-      <div class="cb-card-content__body"><ng-content /></div>
-      <footer class="cb-card-content__foot">
-        <button
-          type="button"
-          class="cb-card-content__action"
-          (click)="action.emit()"
-        >
-          {{ (actionLabel() ?? t().viewDetails) }}
-        </button>
-      </footer>
-    </article>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCardContent, isStandalone: true, selector: "cb-card-content", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: `
+    <article class="cb-card-content">
+      <header class="cb-card-content__head">
+        <strong class="cb-card-content__title">{{ title() }}</strong>
+        @if (subtitle()) {
+          <span class="cb-card-content__subtitle">{{ subtitle() }}</span>
+        }
+      </header>
+      <div class="cb-card-content__body"><ng-content /></div>
+      <footer class="cb-card-content__foot">
+        <button
+          type="button"
+          class="cb-card-content__action"
+          (click)="action.emit()"
+        >
+          {{ (actionLabel() ?? t().viewDetails) }}
+        </button>
+      </footer>
+    </article>
   `, isInline: true, styles: [":host{display:block;width:100%;max-width:24rem}.cb-card-content{display:flex;flex-direction:column;gap:var(--cb-space-3, .75rem);box-sizing:border-box;padding:var(--cb-space-5, 1.25rem);font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .08))}.cb-card-content__head{display:flex;flex-direction:column;gap:var(--cb-space-1, .2rem)}.cb-card-content__title{font-size:var(--cb-text-lg, 1rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-card-content__subtitle{font-size:var(--cb-text-sm, .8125rem);color:var(--cb-color-text-muted, #64748b)}.cb-card-content__body{font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text, #334155);line-height:var(--cb-line-height-relaxed, 1.6)}.cb-card-content__foot{display:flex;justify-content:flex-end}.cb-card-content__action{padding:var(--cb-space-2, .5rem) var(--cb-space-4, 1rem);font:inherit;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-700, #065f46);background-color:var(--cb-color-primary-50, #ecfdf5);border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-card-content__action:hover{background-color:var(--cb-color-primary-100, #d1fae5)}:host-context([data-theme=\"dark\"]) .cb-card-content{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-card-content__body{color:var(--cb-color-surface-200, #e2e8f0)}:host-context([data-theme=\"dark\"]) .cb-card-content__action{color:var(--cb-color-primary-200, #a7f3d0);background-color:color-mix(in srgb,var(--cb-color-primary-500, #10b981) 20%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCardContent, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-card-content', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
-    <article class="cb-card-content">
-      <header class="cb-card-content__head">
-        <strong class="cb-card-content__title">{{ title() }}</strong>
-        @if (subtitle()) {
-          <span class="cb-card-content__subtitle">{{ subtitle() }}</span>
-        }
-      </header>
-      <div class="cb-card-content__body"><ng-content /></div>
-      <footer class="cb-card-content__foot">
-        <button
-          type="button"
-          class="cb-card-content__action"
-          (click)="action.emit()"
-        >
-          {{ (actionLabel() ?? t().viewDetails) }}
-        </button>
-      </footer>
-    </article>
+            args: [{ selector: 'cb-card-content', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
+    <article class="cb-card-content">
+      <header class="cb-card-content__head">
+        <strong class="cb-card-content__title">{{ title() }}</strong>
+        @if (subtitle()) {
+          <span class="cb-card-content__subtitle">{{ subtitle() }}</span>
+        }
+      </header>
+      <div class="cb-card-content__body"><ng-content /></div>
+      <footer class="cb-card-content__foot">
+        <button
+          type="button"
+          class="cb-card-content__action"
+          (click)="action.emit()"
+        >
+          {{ (actionLabel() ?? t().viewDetails) }}
+        </button>
+      </footer>
+    </article>
   `, styles: [":host{display:block;width:100%;max-width:24rem}.cb-card-content{display:flex;flex-direction:column;gap:var(--cb-space-3, .75rem);box-sizing:border-box;padding:var(--cb-space-5, 1.25rem);font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .08))}.cb-card-content__head{display:flex;flex-direction:column;gap:var(--cb-space-1, .2rem)}.cb-card-content__title{font-size:var(--cb-text-lg, 1rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-card-content__subtitle{font-size:var(--cb-text-sm, .8125rem);color:var(--cb-color-text-muted, #64748b)}.cb-card-content__body{font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text, #334155);line-height:var(--cb-line-height-relaxed, 1.6)}.cb-card-content__foot{display:flex;justify-content:flex-end}.cb-card-content__action{padding:var(--cb-space-2, .5rem) var(--cb-space-4, 1rem);font:inherit;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-700, #065f46);background-color:var(--cb-color-primary-50, #ecfdf5);border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-card-content__action:hover{background-color:var(--cb-color-primary-100, #d1fae5)}:host-context([data-theme=\"dark\"]) .cb-card-content{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-card-content__body{color:var(--cb-color-surface-200, #e2e8f0)}:host-context([data-theme=\"dark\"]) .cb-card-content__action{color:var(--cb-color-primary-200, #a7f3d0);background-color:color-mix(in srgb,var(--cb-color-primary-500, #10b981) 20%,transparent)}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 

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

@@ -3,7 +3,7 @@ import { model, inject, ElementRef, Injector, afterNextRender, ViewEncapsulation
 import { injectCbTranslation } from '@caribeng/ui';
 
 /**
- * Card-move de Caribe Design: lista de elementos reordenables mediante botones
+ * Card-move: lista de elementos reordenables mediante botones
  * de subir/bajar.
  *
  * @example
@@ -42,74 +42,74 @@ class CbCardMove {
         }, { injector: this.injector });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCardMove, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCardMove, isStandalone: true, selector: "cb-card-move", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, ngImport: i0, template: `
-    <section class="cb-card-move">
-      <ul class="cb-card-move__list">
-        @for (item of items(); track $index) {
-          <li class="cb-card-move__item">
-            <span class="cb-card-move__label" [id]="uid + '-' + $index">{{ item }}</span>
-            <span class="cb-card-move__controls">
-              <button
-                type="button"
-                class="cb-card-move__btn"
-                [attr.aria-label]="t().moveUp"
-                [attr.aria-describedby]="uid + '-' + $index"
-                [disabled]="$first"
-                (click)="move($index, -1)"
-              >
-                ↑
-              </button>
-              <button
-                type="button"
-                class="cb-card-move__btn"
-                [attr.aria-label]="t().moveDown"
-                [attr.aria-describedby]="uid + '-' + $index"
-                [disabled]="$last"
-                (click)="move($index, 1)"
-              >
-                ↓
-              </button>
-            </span>
-          </li>
-        }
-      </ul>
-    </section>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCardMove, isStandalone: true, selector: "cb-card-move", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, ngImport: i0, template: `
+    <section class="cb-card-move">
+      <ul class="cb-card-move__list">
+        @for (item of items(); track $index) {
+          <li class="cb-card-move__item">
+            <span class="cb-card-move__label" [id]="uid + '-' + $index">{{ item }}</span>
+            <span class="cb-card-move__controls">
+              <button
+                type="button"
+                class="cb-card-move__btn"
+                [attr.aria-label]="t().moveUp"
+                [attr.aria-describedby]="uid + '-' + $index"
+                [disabled]="$first"
+                (click)="move($index, -1)"
+              >
+                ↑
+              </button>
+              <button
+                type="button"
+                class="cb-card-move__btn"
+                [attr.aria-label]="t().moveDown"
+                [attr.aria-describedby]="uid + '-' + $index"
+                [disabled]="$last"
+                (click)="move($index, 1)"
+              >
+                ↓
+              </button>
+            </span>
+          </li>
+        }
+      </ul>
+    </section>
   `, isInline: true, styles: [":host{display:block;width:100%;max-width:24rem}.cb-card-move{box-sizing:border-box;padding:var(--cb-space-2, .5rem);font-family:var(--cb-font-sans, inherit);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-lg, .75rem)}.cb-card-move__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--cb-space-1, .25rem)}.cb-card-move__item{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);padding:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-50, #f8fafc);border-radius:var(--cb-radius-md, .5rem)}.cb-card-move__controls{display:inline-flex;gap:var(--cb-space-1, .25rem)}.cb-card-move__btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;font-size:.9rem;color:var(--cb-color-text, #334155);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-sm, .375rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-card-move__btn:hover:not(:disabled){background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-card-move__btn:disabled{opacity:.4;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-card-move{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-card-move__item{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-900, #0f172a)}:host-context([data-theme=\"dark\"]) .cb-card-move__btn{color:var(--cb-color-surface-100, #f1f5f9);background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-card-move__btn:hover:not(:disabled){background-color:var(--cb-color-surface-700, #334155)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCardMove, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-card-move', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
-    <section class="cb-card-move">
-      <ul class="cb-card-move__list">
-        @for (item of items(); track $index) {
-          <li class="cb-card-move__item">
-            <span class="cb-card-move__label" [id]="uid + '-' + $index">{{ item }}</span>
-            <span class="cb-card-move__controls">
-              <button
-                type="button"
-                class="cb-card-move__btn"
-                [attr.aria-label]="t().moveUp"
-                [attr.aria-describedby]="uid + '-' + $index"
-                [disabled]="$first"
-                (click)="move($index, -1)"
-              >
-                ↑
-              </button>
-              <button
-                type="button"
-                class="cb-card-move__btn"
-                [attr.aria-label]="t().moveDown"
-                [attr.aria-describedby]="uid + '-' + $index"
-                [disabled]="$last"
-                (click)="move($index, 1)"
-              >
-                ↓
-              </button>
-            </span>
-          </li>
-        }
-      </ul>
-    </section>
+            args: [{ selector: 'cb-card-move', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
+    <section class="cb-card-move">
+      <ul class="cb-card-move__list">
+        @for (item of items(); track $index) {
+          <li class="cb-card-move__item">
+            <span class="cb-card-move__label" [id]="uid + '-' + $index">{{ item }}</span>
+            <span class="cb-card-move__controls">
+              <button
+                type="button"
+                class="cb-card-move__btn"
+                [attr.aria-label]="t().moveUp"
+                [attr.aria-describedby]="uid + '-' + $index"
+                [disabled]="$first"
+                (click)="move($index, -1)"
+              >
+                ↑
+              </button>
+              <button
+                type="button"
+                class="cb-card-move__btn"
+                [attr.aria-label]="t().moveDown"
+                [attr.aria-describedby]="uid + '-' + $index"
+                [disabled]="$last"
+                (click)="move($index, 1)"
+              >
+                ↓
+              </button>
+            </span>
+          </li>
+        }
+      </ul>
+    </section>
   `, styles: [":host{display:block;width:100%;max-width:24rem}.cb-card-move{box-sizing:border-box;padding:var(--cb-space-2, .5rem);font-family:var(--cb-font-sans, inherit);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-lg, .75rem)}.cb-card-move__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--cb-space-1, .25rem)}.cb-card-move__item{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);padding:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-50, #f8fafc);border-radius:var(--cb-radius-md, .5rem)}.cb-card-move__controls{display:inline-flex;gap:var(--cb-space-1, .25rem)}.cb-card-move__btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;font-size:.9rem;color:var(--cb-color-text, #334155);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-sm, .375rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-card-move__btn:hover:not(:disabled){background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-card-move__btn:disabled{opacity:.4;cursor:not-allowed}:host-context([data-theme=\"dark\"]) .cb-card-move{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-card-move__item{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-900, #0f172a)}:host-context([data-theme=\"dark\"]) .cb-card-move__btn{color:var(--cb-color-surface-100, #f1f5f9);background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-card-move__btn:hover:not(:disabled){background-color:var(--cb-color-surface-700, #334155)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }] } });
 

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

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
- * Card-primary de Caribe Design: tarjeta destacada para mostrar un valor
+ * Card-primary: tarjeta destacada para mostrar un valor
  * principal (p. ej. un saldo) con título y subtítulo.
  *
  * @example
@@ -20,39 +20,39 @@ class CbCardPrimary {
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCardPrimary, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCardPrimary, isStandalone: true, selector: "cb-card-primary", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <article class="cb-card-primary">
-      <header class="cb-card-primary__head">
-        <span class="cb-card-primary__badge" aria-hidden="true">★</span>
-        <strong class="cb-card-primary__title">{{ title() }}</strong>
-      </header>
-      @if (subtitle()) {
-        <span class="cb-card-primary__subtitle">{{ subtitle() }}</span>
-      }
-      @if (value()) {
-        <strong class="cb-card-primary__value">{{ value() }}</strong>
-      }
-      <ng-content />
-    </article>
-  `, isInline: true, styles: [":host{display:block;width:100%;max-width:22rem}.cb-card-primary{display:flex;flex-direction:column;gap:var(--cb-space-1, .25rem);box-sizing:border-box;padding:var(--cb-space-5, 1.25rem);font-family:var(--cb-font-sans, inherit);color:var(--cb-color-primary-contrast, #ffffff);background:linear-gradient(135deg,var(--cb-color-primary-600, #047857),var(--cb-color-primary-800, #064e3b));border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-md, 0 6px 16px rgba(0, 0, 0, .18))}.cb-card-primary__head{display:flex;align-items:center;gap:var(--cb-space-2, .5rem)}.cb-card-primary__badge{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:.8rem;background-color:#ffffff2e;border-radius:var(--cb-radius-full, 999px)}.cb-card-primary__title{font-size:var(--cb-text-base, .9375rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-card-primary__subtitle{font-size:var(--cb-text-sm, .8125rem);opacity:.8}.cb-card-primary__value{margin-top:var(--cb-space-2, .5rem);font-size:var(--cb-text-2xl, 1.75rem);font-weight:var(--cb-font-weight-bold, 700);letter-spacing:-.01em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCardPrimary, isStandalone: true, selector: "cb-card-primary", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <article class="cb-card-primary">
+      <header class="cb-card-primary__head">
+        <span class="cb-card-primary__badge" aria-hidden="true">★</span>
+        <strong class="cb-card-primary__title">{{ title() }}</strong>
+      </header>
+      @if (subtitle()) {
+        <span class="cb-card-primary__subtitle">{{ subtitle() }}</span>
+      }
+      @if (value()) {
+        <strong class="cb-card-primary__value">{{ value() }}</strong>
+      }
+      <ng-content />
+    </article>
+  `, isInline: true, styles: [":host{display:block;width:100%;max-width:22rem}.cb-card-primary{display:flex;flex-direction:column;gap:var(--cb-space-1, .25rem);box-sizing:border-box;padding:var(--cb-space-5, 1.25rem);font-family:var(--cb-font-sans, inherit);color:var(--cb-color-primary-contrast, #ffffff);background:linear-gradient(135deg,var(--cb-color-primary-700, #047857),var(--cb-color-primary-900, #064e3b));border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-md, 0 6px 16px rgba(0, 0, 0, .18))}.cb-card-primary__head{display:flex;align-items:center;gap:var(--cb-space-2, .5rem)}.cb-card-primary__badge{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:.8rem;background-color:#ffffff2e;border-radius:var(--cb-radius-full, 999px)}.cb-card-primary__title{font-size:var(--cb-text-base, .9375rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-card-primary__subtitle{font-size:var(--cb-text-sm, .8125rem);opacity:.8}.cb-card-primary__value{margin-top:var(--cb-space-2, .5rem);font-size:var(--cb-text-2xl, 1.75rem);font-weight:var(--cb-font-weight-bold, 700);letter-spacing:-.01em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCardPrimary, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-card-primary', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
-    <article class="cb-card-primary">
-      <header class="cb-card-primary__head">
-        <span class="cb-card-primary__badge" aria-hidden="true">★</span>
-        <strong class="cb-card-primary__title">{{ title() }}</strong>
-      </header>
-      @if (subtitle()) {
-        <span class="cb-card-primary__subtitle">{{ subtitle() }}</span>
-      }
-      @if (value()) {
-        <strong class="cb-card-primary__value">{{ value() }}</strong>
-      }
-      <ng-content />
-    </article>
-  `, styles: [":host{display:block;width:100%;max-width:22rem}.cb-card-primary{display:flex;flex-direction:column;gap:var(--cb-space-1, .25rem);box-sizing:border-box;padding:var(--cb-space-5, 1.25rem);font-family:var(--cb-font-sans, inherit);color:var(--cb-color-primary-contrast, #ffffff);background:linear-gradient(135deg,var(--cb-color-primary-600, #047857),var(--cb-color-primary-800, #064e3b));border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-md, 0 6px 16px rgba(0, 0, 0, .18))}.cb-card-primary__head{display:flex;align-items:center;gap:var(--cb-space-2, .5rem)}.cb-card-primary__badge{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:.8rem;background-color:#ffffff2e;border-radius:var(--cb-radius-full, 999px)}.cb-card-primary__title{font-size:var(--cb-text-base, .9375rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-card-primary__subtitle{font-size:var(--cb-text-sm, .8125rem);opacity:.8}.cb-card-primary__value{margin-top:var(--cb-space-2, .5rem);font-size:var(--cb-text-2xl, 1.75rem);font-weight:var(--cb-font-weight-bold, 700);letter-spacing:-.01em}\n"] }]
+            args: [{ selector: 'cb-card-primary', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
+    <article class="cb-card-primary">
+      <header class="cb-card-primary__head">
+        <span class="cb-card-primary__badge" aria-hidden="true">★</span>
+        <strong class="cb-card-primary__title">{{ title() }}</strong>
+      </header>
+      @if (subtitle()) {
+        <span class="cb-card-primary__subtitle">{{ subtitle() }}</span>
+      }
+      @if (value()) {
+        <strong class="cb-card-primary__value">{{ value() }}</strong>
+      }
+      <ng-content />
+    </article>
+  `, styles: [":host{display:block;width:100%;max-width:22rem}.cb-card-primary{display:flex;flex-direction:column;gap:var(--cb-space-1, .25rem);box-sizing:border-box;padding:var(--cb-space-5, 1.25rem);font-family:var(--cb-font-sans, inherit);color:var(--cb-color-primary-contrast, #ffffff);background:linear-gradient(135deg,var(--cb-color-primary-700, #047857),var(--cb-color-primary-900, #064e3b));border-radius:var(--cb-radius-lg, .75rem);box-shadow:var(--cb-shadow-md, 0 6px 16px rgba(0, 0, 0, .18))}.cb-card-primary__head{display:flex;align-items:center;gap:var(--cb-space-2, .5rem)}.cb-card-primary__badge{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:.8rem;background-color:#ffffff2e;border-radius:var(--cb-radius-full, 999px)}.cb-card-primary__title{font-size:var(--cb-text-base, .9375rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-card-primary__subtitle{font-size:var(--cb-text-sm, .8125rem);opacity:.8}.cb-card-primary__value{margin-top:var(--cb-space-2, .5rem);font-size:var(--cb-text-2xl, 1.75rem);font-weight:var(--cb-font-weight-bold, 700);letter-spacing:-.01em}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
 /**

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

@@ -3,7 +3,7 @@ import { input, model, output, inject, ElementRef, computed, ViewEncapsulation,
 import { injectCbTranslation } from '@caribeng/ui';
 
 /**
- * Card-select de Caribe Design: tarjeta con buscador y lista de opciones
+ * Card-select: tarjeta con buscador y lista de opciones
  * seleccionables.
  *
  * @example
@@ -55,76 +55,76 @@ class CbCardSelect {
         options[target].focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCardSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCardSelect, isStandalone: true, selector: "cb-card-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChange: "selectionChange", query: "queryChange" }, ngImport: i0, template: `
-    <section class="cb-card-select">
-      <input
-        class="cb-card-select__search"
-        type="search"
-        [value]="query()"
-        (input)="query.set($any($event.target).value)"
-        [attr.aria-label]="t().filterOptions"
-        [placeholder]="t().search"
-      />
-      <div
-        class="cb-card-select__list"
-        role="listbox"
-        [attr.aria-label]="(label() ?? t().options)"
-        (keydown)="onListKeydown($event)"
-      >
-        @for (item of filtered(); track $index) {
-          <button
-            type="button"
-            class="cb-card-select__option"
-            role="option"
-            [class.cb-is-selected]="selected() === item"
-            [attr.aria-selected]="selected() === item"
-            [attr.tabindex]="$index === tabbable() ? 0 : -1"
-            (click)="choose(item)"
-          >
-            {{ item }}
-          </button>
-        } @empty {
-          <span class="cb-card-select__empty">{{ t().noResults }}</span>
-        }
-      </div>
-    </section>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCardSelect, isStandalone: true, selector: "cb-card-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChange: "selectionChange", query: "queryChange" }, ngImport: i0, template: `
+    <section class="cb-card-select">
+      <input
+        class="cb-card-select__search"
+        type="search"
+        [value]="query()"
+        (input)="query.set($any($event.target).value)"
+        [attr.aria-label]="t().filterOptions"
+        [placeholder]="t().search"
+      />
+      <div
+        class="cb-card-select__list"
+        role="listbox"
+        [attr.aria-label]="(label() ?? t().options)"
+        (keydown)="onListKeydown($event)"
+      >
+        @for (item of filtered(); track $index) {
+          <button
+            type="button"
+            class="cb-card-select__option"
+            role="option"
+            [class.cb-is-selected]="selected() === item"
+            [attr.aria-selected]="selected() === item"
+            [attr.tabindex]="$index === tabbable() ? 0 : -1"
+            (click)="choose(item)"
+          >
+            {{ item }}
+          </button>
+        } @empty {
+          <span class="cb-card-select__empty">{{ t().noResults }}</span>
+        }
+      </div>
+    </section>
   `, isInline: true, styles: [":host{display:block;width:100%;max-width:22rem}.cb-card-select{display:flex;flex-direction:column;gap:var(--cb-space-2, .5rem);box-sizing:border-box;padding:var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-lg, .75rem)}.cb-card-select__search{box-sizing:border-box;width:100%;padding:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);font:inherit;font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-50, #f8fafc);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-md, .5rem)}.cb-card-select__search:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:0}.cb-card-select__list{display:flex;flex-direction:column;gap:2px;max-height:12rem;overflow-y:auto}.cb-card-select__option{padding:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);font:inherit;font-size:var(--cb-text-sm, .875rem);text-align:left;color:var(--cb-color-text, #334155);background:transparent;border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-card-select__option:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-card-select__option.cb-is-selected{color:var(--cb-color-primary-700, #065f46);background-color:var(--cb-color-primary-50, #ecfdf5);font-weight:var(--cb-font-weight-semibold, 600)}.cb-card-select__empty{padding:var(--cb-space-3, .75rem);font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted, #64748b);text-align:center}:host-context([data-theme=\"dark\"]) .cb-card-select{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-card-select__search{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-900, #0f172a);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-card-select__option{color:var(--cb-color-surface-100, #f1f5f9)}:host-context([data-theme=\"dark\"]) .cb-card-select__option:hover{background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-card-select__option.cb-is-selected{color:var(--cb-color-primary-200, #a7f3d0);background-color:color-mix(in srgb,var(--cb-color-primary-500, #10b981) 20%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCardSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-card-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
-    <section class="cb-card-select">
-      <input
-        class="cb-card-select__search"
-        type="search"
-        [value]="query()"
-        (input)="query.set($any($event.target).value)"
-        [attr.aria-label]="t().filterOptions"
-        [placeholder]="t().search"
-      />
-      <div
-        class="cb-card-select__list"
-        role="listbox"
-        [attr.aria-label]="(label() ?? t().options)"
-        (keydown)="onListKeydown($event)"
-      >
-        @for (item of filtered(); track $index) {
-          <button
-            type="button"
-            class="cb-card-select__option"
-            role="option"
-            [class.cb-is-selected]="selected() === item"
-            [attr.aria-selected]="selected() === item"
-            [attr.tabindex]="$index === tabbable() ? 0 : -1"
-            (click)="choose(item)"
-          >
-            {{ item }}
-          </button>
-        } @empty {
-          <span class="cb-card-select__empty">{{ t().noResults }}</span>
-        }
-      </div>
-    </section>
+            args: [{ selector: 'cb-card-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: `
+    <section class="cb-card-select">
+      <input
+        class="cb-card-select__search"
+        type="search"
+        [value]="query()"
+        (input)="query.set($any($event.target).value)"
+        [attr.aria-label]="t().filterOptions"
+        [placeholder]="t().search"
+      />
+      <div
+        class="cb-card-select__list"
+        role="listbox"
+        [attr.aria-label]="(label() ?? t().options)"
+        (keydown)="onListKeydown($event)"
+      >
+        @for (item of filtered(); track $index) {
+          <button
+            type="button"
+            class="cb-card-select__option"
+            role="option"
+            [class.cb-is-selected]="selected() === item"
+            [attr.aria-selected]="selected() === item"
+            [attr.tabindex]="$index === tabbable() ? 0 : -1"
+            (click)="choose(item)"
+          >
+            {{ item }}
+          </button>
+        } @empty {
+          <span class="cb-card-select__empty">{{ t().noResults }}</span>
+        }
+      </div>
+    </section>
   `, styles: [":host{display:block;width:100%;max-width:22rem}.cb-card-select{display:flex;flex-direction:column;gap:var(--cb-space-2, .5rem);box-sizing:border-box;padding:var(--cb-space-3, .75rem);font-family:var(--cb-font-sans, inherit);background-color:var(--cb-color-surface-0, #ffffff);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-lg, .75rem)}.cb-card-select__search{box-sizing:border-box;width:100%;padding:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);font:inherit;font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-strong, #0f172a);background-color:var(--cb-color-surface-50, #f8fafc);border:1px solid var(--cb-color-border, #e2e8f0);border-radius:var(--cb-radius-md, .5rem)}.cb-card-select__search:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:0}.cb-card-select__list{display:flex;flex-direction:column;gap:2px;max-height:12rem;overflow-y:auto}.cb-card-select__option{padding:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);font:inherit;font-size:var(--cb-text-sm, .875rem);text-align:left;color:var(--cb-color-text, #334155);background:transparent;border:none;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-card-select__option:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-card-select__option.cb-is-selected{color:var(--cb-color-primary-700, #065f46);background-color:var(--cb-color-primary-50, #ecfdf5);font-weight:var(--cb-font-weight-semibold, 600)}.cb-card-select__empty{padding:var(--cb-space-3, .75rem);font-size:var(--cb-text-sm, .875rem);color:var(--cb-color-text-muted, #64748b);text-align:center}:host-context([data-theme=\"dark\"]) .cb-card-select{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-card-select__search{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-900, #0f172a);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-card-select__option{color:var(--cb-color-surface-100, #f1f5f9)}:host-context([data-theme=\"dark\"]) .cb-card-select__option:hover{background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-card-select__option.cb-is-selected{color:var(--cb-color-primary-200, #a7f3d0);background-color:color-mix(in srgb,var(--cb-color-primary-500, #10b981) 20%,transparent)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }] } });
 

package/fesm2022/caribeng-ui-carousel.mjs

@@ -134,7 +134,7 @@ class CbCarousel {
         }
       </div>
     }
-  `, isInline: true, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-carousel__Stage{display:flex;align-items:center;gap:var(--cb-space-3)}.cb-carousel__viewport{flex:1;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);overflow:hidden}.cb-carousel__slide{padding:var(--cb-space-4)}.cb-carousel__img{width:100%;max-height:180px;object-fit:cover;border-radius:var(--cb-radius-md);margin-bottom:var(--cb-space-3)}.cb-carousel__badge{display:inline-block;padding:.125rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--cb-color-primary-500) 15%,transparent);color:var(--cb-color-primary-500);font-size:.75rem;font-weight:var(--cb-font-semibold);margin-bottom:.375rem}.cb-carousel__title{margin:0 0 .25rem;font-size:var(--cb-text-base);font-weight:var(--cb-font-semibold)}.cb-carousel__desc{margin:0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-carousel__nav{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:999px;background:var(--cb-color-surface);color:var(--cb-color-text);cursor:pointer}.cb-carousel__indicators{display:flex;justify-content:center;gap:.5rem;margin-top:var(--cb-space-3)}.cb-carousel__dot{width:.55rem;height:.55rem;padding:0;border:none;border-radius:999px;background:var(--cb-color-border);cursor:pointer}.cb-carousel__dot.cb-is-active{width:1.4rem;background:var(--cb-color-primary-500)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-carousel__Stage{display:flex;align-items:center;gap:var(--cb-space-3)}.cb-carousel__viewport{flex:1;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);overflow:hidden}.cb-carousel__slide{padding:var(--cb-space-4)}.cb-carousel__img{width:100%;max-height:180px;object-fit:cover;border-radius:var(--cb-radius-md);margin-bottom:var(--cb-space-3)}.cb-carousel__badge{display:inline-block;padding:.125rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--cb-color-primary-500) 15%,transparent);color:var(--cb-color-primary-text);font-size:.75rem;font-weight:var(--cb-font-semibold);margin-bottom:.375rem}.cb-carousel__title{margin:0 0 .25rem;font-size:var(--cb-text-base);font-weight:var(--cb-font-semibold)}.cb-carousel__desc{margin:0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-carousel__nav{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:999px;background:var(--cb-color-surface);color:var(--cb-color-text);cursor:pointer}.cb-carousel__indicators{display:flex;justify-content:center;gap:.5rem;margin-top:var(--cb-space-3)}.cb-carousel__dot{width:.55rem;height:.55rem;padding:0;border:none;border-radius:999px;background:var(--cb-color-border);cursor:pointer}.cb-carousel__dot.cb-is-active{width:1.4rem;background:var(--cb-color-primary-500)}\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: CbCarousel, decorators: [{
             type: Component,
@@ -208,7 +208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       </div>
     }
-  `, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-carousel__Stage{display:flex;align-items:center;gap:var(--cb-space-3)}.cb-carousel__viewport{flex:1;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);overflow:hidden}.cb-carousel__slide{padding:var(--cb-space-4)}.cb-carousel__img{width:100%;max-height:180px;object-fit:cover;border-radius:var(--cb-radius-md);margin-bottom:var(--cb-space-3)}.cb-carousel__badge{display:inline-block;padding:.125rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--cb-color-primary-500) 15%,transparent);color:var(--cb-color-primary-500);font-size:.75rem;font-weight:var(--cb-font-semibold);margin-bottom:.375rem}.cb-carousel__title{margin:0 0 .25rem;font-size:var(--cb-text-base);font-weight:var(--cb-font-semibold)}.cb-carousel__desc{margin:0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-carousel__nav{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:999px;background:var(--cb-color-surface);color:var(--cb-color-text);cursor:pointer}.cb-carousel__indicators{display:flex;justify-content:center;gap:.5rem;margin-top:var(--cb-space-3)}.cb-carousel__dot{width:.55rem;height:.55rem;padding:0;border:none;border-radius:999px;background:var(--cb-color-border);cursor:pointer}.cb-carousel__dot.cb-is-active{width:1.4rem;background:var(--cb-color-primary-500)}\n"] }]
+  `, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-carousel__Stage{display:flex;align-items:center;gap:var(--cb-space-3)}.cb-carousel__viewport{flex:1;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);overflow:hidden}.cb-carousel__slide{padding:var(--cb-space-4)}.cb-carousel__img{width:100%;max-height:180px;object-fit:cover;border-radius:var(--cb-radius-md);margin-bottom:var(--cb-space-3)}.cb-carousel__badge{display:inline-block;padding:.125rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--cb-color-primary-500) 15%,transparent);color:var(--cb-color-primary-text);font-size:.75rem;font-weight:var(--cb-font-semibold);margin-bottom:.375rem}.cb-carousel__title{margin:0 0 .25rem;font-size:var(--cb-text-base);font-weight:var(--cb-font-semibold)}.cb-carousel__desc{margin:0;font-size:var(--cb-text-sm);color:var(--cb-color-text-muted)}.cb-carousel__nav{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:999px;background:var(--cb-color-surface);color:var(--cb-color-text);cursor:pointer}.cb-carousel__indicators{display:flex;justify-content:center;gap:.5rem;margin-top:var(--cb-space-3)}.cb-carousel__dot{width:.55rem;height:.55rem;padding:0;border:none;border-radius:999px;background:var(--cb-color-border);cursor:pointer}.cb-carousel__dot.cb-is-active{width:1.4rem;background:var(--cb-color-primary-500)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], circular: [{ type: i0.Input, args: [{ isSignal: true, alias: "circular", required: false }] }], showNavigators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigators", required: false }] }], showIndicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicators", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }] } });
 
 /**