@caribeng/ui 22.2.0 → 22.5.0

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

@@ -3,7 +3,7 @@ import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component }
 import { injectCbTranslation } from '@caribeng/ui';
 
 /**
- * Header de Caribe Design: cabecera de pantalla con título, subtítulo opcional,
+ * Header: cabecera de pantalla con título, subtítulo opcional,
  * botón de retroceso y una zona de acciones proyectadas.
  *
  * @example
@@ -28,58 +28,58 @@ class CbHeader {
         this.backClick = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbHeader, isStandalone: true, selector: "cb-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backClick: "backClick" }, host: { classAttribute: "cb-header-host" }, ngImport: i0, template: `
-    <header class="cb-header">
-      <div class="cb-header__start">
-        @if (showBack()) {
-          <button
-            type="button"
-            class="cb-header__back"
-            [attr.aria-label]="t().back"
-            (click)="backClick.emit()"
-          >
-            <span aria-hidden="true">←</span>
-          </button>
-        }
-        <div class="cb-header__titles">
-          <strong class="cb-header__title">{{ title() }}</strong>
-          @if (subtitle()) {
-            <span class="cb-header__subtitle">{{ subtitle() }}</span>
-          }
-        </div>
-      </div>
-      <div class="cb-header__actions">
-        <ng-content />
-      </div>
-    </header>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbHeader, isStandalone: true, selector: "cb-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backClick: "backClick" }, host: { classAttribute: "cb-header-host" }, ngImport: i0, template: `
+    <header class="cb-header">
+      <div class="cb-header__start">
+        @if (showBack()) {
+          <button
+            type="button"
+            class="cb-header__back"
+            [attr.aria-label]="t().back"
+            (click)="backClick.emit()"
+          >
+            <span aria-hidden="true">←</span>
+          </button>
+        }
+        <div class="cb-header__titles">
+          <strong class="cb-header__title">{{ title() }}</strong>
+          @if (subtitle()) {
+            <span class="cb-header__subtitle">{{ subtitle() }}</span>
+          }
+        </div>
+      </div>
+      <div class="cb-header__actions">
+        <ng-content />
+      </div>
+    </header>
   `, isInline: true, styles: [":host{display:block;width:100%}.cb-header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);width:100%;box-sizing:border-box;padding:var(--cb-space-3, .75rem) 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-bottom:1px solid var(--cb-color-border, #e2e8f0)}.cb-header__start{display:flex;align-items:center;gap:var(--cb-space-3, .75rem);min-width:0}.cb-header__back{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:1.1rem;color:inherit;background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-header__back:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-header__titles{display:flex;flex-direction:column;min-width:0}.cb-header__title{font-size:var(--cb-text-lg, 1rem);font-weight:var(--cb-font-weight-semibold, 600);line-height:var(--cb-line-height-tight, 1.25);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-header__subtitle{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b)}.cb-header__actions{display:flex;align-items:center;gap:var(--cb-space-2, .5rem)}:host-context([data-theme=\"dark\"]) .cb-header{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-900, #0f172a);border-bottom-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-header__back:hover{background-color:var(--cb-color-surface-800, #1e293b)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-header-host' }, template: `
-    <header class="cb-header">
-      <div class="cb-header__start">
-        @if (showBack()) {
-          <button
-            type="button"
-            class="cb-header__back"
-            [attr.aria-label]="t().back"
-            (click)="backClick.emit()"
-          >
-            <span aria-hidden="true">←</span>
-          </button>
-        }
-        <div class="cb-header__titles">
-          <strong class="cb-header__title">{{ title() }}</strong>
-          @if (subtitle()) {
-            <span class="cb-header__subtitle">{{ subtitle() }}</span>
-          }
-        </div>
-      </div>
-      <div class="cb-header__actions">
-        <ng-content />
-      </div>
-    </header>
+            args: [{ selector: 'cb-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-header-host' }, template: `
+    <header class="cb-header">
+      <div class="cb-header__start">
+        @if (showBack()) {
+          <button
+            type="button"
+            class="cb-header__back"
+            [attr.aria-label]="t().back"
+            (click)="backClick.emit()"
+          >
+            <span aria-hidden="true">←</span>
+          </button>
+        }
+        <div class="cb-header__titles">
+          <strong class="cb-header__title">{{ title() }}</strong>
+          @if (subtitle()) {
+            <span class="cb-header__subtitle">{{ subtitle() }}</span>
+          }
+        </div>
+      </div>
+      <div class="cb-header__actions">
+        <ng-content />
+      </div>
+    </header>
   `, styles: [":host{display:block;width:100%}.cb-header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);width:100%;box-sizing:border-box;padding:var(--cb-space-3, .75rem) 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-bottom:1px solid var(--cb-color-border, #e2e8f0)}.cb-header__start{display:flex;align-items:center;gap:var(--cb-space-3, .75rem);min-width:0}.cb-header__back{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:1.1rem;color:inherit;background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-header__back:hover{background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-header__titles{display:flex;flex-direction:column;min-width:0}.cb-header__title{font-size:var(--cb-text-lg, 1rem);font-weight:var(--cb-font-weight-semibold, 600);line-height:var(--cb-line-height-tight, 1.25);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-header__subtitle{font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted, #64748b)}.cb-header__actions{display:flex;align-items:center;gap:var(--cb-space-2, .5rem)}:host-context([data-theme=\"dark\"]) .cb-header{color:var(--cb-color-surface-0, #f8fafc);background-color:var(--cb-color-surface-900, #0f172a);border-bottom-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-header__back:hover{background-color:var(--cb-color-surface-800, #1e293b)}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], backClick: [{ type: i0.Output, args: ["backClick"] }] } });
 

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

@@ -4,7 +4,7 @@ import { CbIcon } from '@caribeng/ui/icon';
 import { injectCbTranslation } from '@caribeng/ui';
 
 /**
- * Icon-button de Caribe Design: botón circular con un único icono. Útil para
+ * Icon-button: botón circular con un único icono. Útil para
  * acciones compactas en barras y cabeceras.
  *
  * @example
@@ -32,32 +32,32 @@ class CbIconButton {
         this.pressed = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbIconButton, isStandalone: true, selector: "cb-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressed" }, host: { classAttribute: "cb-icon-button-host" }, ngImport: i0, template: `
-    <button
-      type="button"
-      class="cb-icon-button"
-      [class.cb-icon-button--ghost]="variant() === 'ghost'"
-      [disabled]="disabled()"
-      [attr.aria-label]="(ariaLabel() ?? t().action) || icon()"
-      (click)="!disabled() && pressed.emit($event)"
-    >
-      <cb-icon [name]="icon()" [size]="18" aria-hidden="true" />
-    </button>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbIconButton, isStandalone: true, selector: "cb-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressed" }, host: { classAttribute: "cb-icon-button-host" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="cb-icon-button"
+      [class.cb-icon-button--ghost]="variant() === 'ghost'"
+      [disabled]="disabled()"
+      [attr.aria-label]="(ariaLabel() ?? t().action) || icon()"
+      (click)="!disabled() && pressed.emit($event)"
+    >
+      <cb-icon [name]="icon()" [size]="18" aria-hidden="true" />
+    </button>
   `, isInline: true, styles: [":host{display:inline-flex}.cb-icon-button{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;color:var(--cb-color-text-strong, #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;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-icon-button:hover:not(:disabled){background-color:var(--cb-color-surface-100, #f1f5f9);border-color:var(--cb-color-border-strong, #94a3b8)}.cb-icon-button:active:not(:disabled){background-color:var(--cb-color-surface-200, #e2e8f0)}.cb-icon-button:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-icon-button:disabled{opacity:.5;cursor:not-allowed}.cb-icon-button--ghost{background-color:transparent;border-color:transparent}.cb-icon-button--ghost:hover:not(:disabled){background-color:var(--cb-color-surface-100, #f1f5f9);border-color:transparent}:host-context([data-theme=\"dark\"]) .cb-icon-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-icon-button:hover:not(:disabled){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-icon-button--ghost{background-color:transparent;border-color:transparent}:host-context([data-theme=\"dark\"]) .cb-icon-button--ghost:hover:not(:disabled){background-color:var(--cb-color-surface-700, #334155)}\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: CbIconButton, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-icon-button-host' }, template: `
-    <button
-      type="button"
-      class="cb-icon-button"
-      [class.cb-icon-button--ghost]="variant() === 'ghost'"
-      [disabled]="disabled()"
-      [attr.aria-label]="(ariaLabel() ?? t().action) || icon()"
-      (click)="!disabled() && pressed.emit($event)"
-    >
-      <cb-icon [name]="icon()" [size]="18" aria-hidden="true" />
-    </button>
+            args: [{ selector: 'cb-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-icon-button-host' }, template: `
+    <button
+      type="button"
+      class="cb-icon-button"
+      [class.cb-icon-button--ghost]="variant() === 'ghost'"
+      [disabled]="disabled()"
+      [attr.aria-label]="(ariaLabel() ?? t().action) || icon()"
+      (click)="!disabled() && pressed.emit($event)"
+    >
+      <cb-icon [name]="icon()" [size]="18" aria-hidden="true" />
+    </button>
   `, styles: [":host{display:inline-flex}.cb-icon-button{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;color:var(--cb-color-text-strong, #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;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),border-color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-icon-button:hover:not(:disabled){background-color:var(--cb-color-surface-100, #f1f5f9);border-color:var(--cb-color-border-strong, #94a3b8)}.cb-icon-button:active:not(:disabled){background-color:var(--cb-color-surface-200, #e2e8f0)}.cb-icon-button:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}.cb-icon-button:disabled{opacity:.5;cursor:not-allowed}.cb-icon-button--ghost{background-color:transparent;border-color:transparent}.cb-icon-button--ghost:hover:not(:disabled){background-color:var(--cb-color-surface-100, #f1f5f9);border-color:transparent}:host-context([data-theme=\"dark\"]) .cb-icon-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-icon-button:hover:not(:disabled){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-icon-button--ghost{background-color:transparent;border-color:transparent}:host-context([data-theme=\"dark\"]) .cb-icon-button--ghost:hover:not(:disabled){background-color:var(--cb-color-surface-700, #334155)}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], pressed: [{ type: i0.Output, args: ["pressed"] }] } });