@caribeng/ui 22.2.0 → 22.5.0

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

@@ -3,7 +3,7 @@ import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component }
 import { injectCbTranslation } from '@caribeng/ui';
 
 /**
- * Float-menu de Caribe Design: menú flotante en forma de píldora con opciones
+ * Float-menu: menú flotante en forma de píldora con opciones
  * seleccionables (segmentado horizontal).
  *
  * @example
@@ -28,39 +28,39 @@ class CbFloatMenu {
         this.select = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFloatMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFloatMenu, isStandalone: true, selector: "cb-float-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { classAttribute: "cb-float-menu-host" }, ngImport: i0, template: `
-    <nav class="cb-float-menu" [attr.aria-label]="(ariaLabel() ?? t().floatingMenu)">
-      @for (item of items(); track item.id) {
-        <button
-          type="button"
-          class="cb-float-menu__item"
-          [class.cb-float-menu__item--active]="activeId() === item.id"
-          [attr.aria-current]="activeId() === item.id || null"
-          (click)="select.emit(item)"
-        >
-          {{ item.label }}
-        </button>
-      }
-    </nav>
-  `, isInline: true, styles: [":host{display:inline-flex}.cb-float-menu{display:inline-flex;align-items:center;gap:var(--cb-space-1, .25rem);padding:var(--cb-space-1, .3rem);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-full, 999px);box-shadow:var(--cb-shadow-md, 0 6px 16px rgba(0, 0, 0, .12))}.cb-float-menu__item{padding:var(--cb-space-2, .4rem) var(--cb-space-4, .9rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-text, #0f172a);background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-float-menu__item:hover:not(.cb-float-menu__item--active){background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-float-menu__item--active{color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857)}.cb-float-menu__item:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}:host-context([data-theme=\"dark\"]) .cb-float-menu{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item{color:var(--cb-color-surface-0, #f8fafc)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item:hover:not(.cb-float-menu__item--active){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item--active{background-color:var(--cb-color-primary-500, #10b981)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFloatMenu, isStandalone: true, selector: "cb-float-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { classAttribute: "cb-float-menu-host" }, ngImport: i0, template: `
+    <nav class="cb-float-menu" [attr.aria-label]="(ariaLabel() ?? t().floatingMenu)">
+      @for (item of items(); track item.id) {
+        <button
+          type="button"
+          class="cb-float-menu__item"
+          [class.cb-float-menu__item--active]="activeId() === item.id"
+          [attr.aria-current]="activeId() === item.id || null"
+          (click)="select.emit(item)"
+        >
+          {{ item.label }}
+        </button>
+      }
+    </nav>
+  `, isInline: true, styles: [":host{display:inline-flex}.cb-float-menu{display:inline-flex;align-items:center;gap:var(--cb-space-1, .25rem);padding:var(--cb-space-1, .3rem);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-full, 999px);box-shadow:var(--cb-shadow-md, 0 6px 16px rgba(0, 0, 0, .12))}.cb-float-menu__item{padding:var(--cb-space-2, .4rem) var(--cb-space-4, .9rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-text, #0f172a);background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-float-menu__item:hover:not(.cb-float-menu__item--active){background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-float-menu__item--active{color:#fff;background-color:var(--cb-color-primary-700, #047857)}.cb-float-menu__item:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}:host-context([data-theme=\"dark\"]) .cb-float-menu{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item{color:var(--cb-color-surface-0, #f8fafc)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item:hover:not(.cb-float-menu__item--active){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item--active{background-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: CbFloatMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-float-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-float-menu-host' }, template: `
-    <nav class="cb-float-menu" [attr.aria-label]="(ariaLabel() ?? t().floatingMenu)">
-      @for (item of items(); track item.id) {
-        <button
-          type="button"
-          class="cb-float-menu__item"
-          [class.cb-float-menu__item--active]="activeId() === item.id"
-          [attr.aria-current]="activeId() === item.id || null"
-          (click)="select.emit(item)"
-        >
-          {{ item.label }}
-        </button>
-      }
-    </nav>
-  `, styles: [":host{display:inline-flex}.cb-float-menu{display:inline-flex;align-items:center;gap:var(--cb-space-1, .25rem);padding:var(--cb-space-1, .3rem);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-full, 999px);box-shadow:var(--cb-shadow-md, 0 6px 16px rgba(0, 0, 0, .12))}.cb-float-menu__item{padding:var(--cb-space-2, .4rem) var(--cb-space-4, .9rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-text, #0f172a);background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-float-menu__item:hover:not(.cb-float-menu__item--active){background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-float-menu__item--active{color:var(--cb-color-primary-contrast, #ffffff);background-color:var(--cb-color-primary-600, #047857)}.cb-float-menu__item:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}:host-context([data-theme=\"dark\"]) .cb-float-menu{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item{color:var(--cb-color-surface-0, #f8fafc)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item:hover:not(.cb-float-menu__item--active){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item--active{background-color:var(--cb-color-primary-500, #10b981)}\n"] }]
+            args: [{ selector: 'cb-float-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { class: 'cb-float-menu-host' }, template: `
+    <nav class="cb-float-menu" [attr.aria-label]="(ariaLabel() ?? t().floatingMenu)">
+      @for (item of items(); track item.id) {
+        <button
+          type="button"
+          class="cb-float-menu__item"
+          [class.cb-float-menu__item--active]="activeId() === item.id"
+          [attr.aria-current]="activeId() === item.id || null"
+          (click)="select.emit(item)"
+        >
+          {{ item.label }}
+        </button>
+      }
+    </nav>
+  `, styles: [":host{display:inline-flex}.cb-float-menu{display:inline-flex;align-items:center;gap:var(--cb-space-1, .25rem);padding:var(--cb-space-1, .3rem);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-full, 999px);box-shadow:var(--cb-shadow-md, 0 6px 16px rgba(0, 0, 0, .12))}.cb-float-menu__item{padding:var(--cb-space-2, .4rem) var(--cb-space-4, .9rem);font:inherit;font-size:var(--cb-text-sm, .8125rem);font-weight:var(--cb-font-weight-medium, 500);color:var(--cb-color-text, #0f172a);background:transparent;border:none;border-radius:var(--cb-radius-full, 999px);cursor:pointer;white-space:nowrap;transition:background-color var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-float-menu__item:hover:not(.cb-float-menu__item--active){background-color:var(--cb-color-surface-100, #f1f5f9)}.cb-float-menu__item--active{color:#fff;background-color:var(--cb-color-primary-700, #047857)}.cb-float-menu__item:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500, #10b981));outline-offset:2px}:host-context([data-theme=\"dark\"]) .cb-float-menu{background-color:var(--cb-color-surface-800, #1e293b);border-color:var(--cb-color-surface-600, #475569)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item{color:var(--cb-color-surface-0, #f8fafc)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item:hover:not(.cb-float-menu__item--active){background-color:var(--cb-color-surface-700, #334155)}:host-context([data-theme=\"dark\"]) .cb-float-menu__item--active{background-color:var(--cb-color-primary-500, #10b981)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
 
 /**

package/fesm2022/caribeng-ui-floatlabel.mjs

@@ -32,7 +32,7 @@ class CbFloatLabel {
         this.filled.set(Boolean(inputEl && inputEl.value.trim().length > 0));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFloatLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbFloatLabel, isStandalone: true, selector: "cb-float-label", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()", "input": "checkFilled()", "change": "checkFilled()" }, properties: { "class.cb-float-label--over": "variant() === \"over\"", "class.cb-float-label--in": "variant() === \"in\"", "class.cb-float-label--on": "variant() === \"on\"", "class.cb-is-active": "focused() || filled()" }, classAttribute: "cb-float-label" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".cb-float-label{position:relative;display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-float-label>label{position:absolute;left:var(--cb-space-3);top:50%;transform:translateY(-50%);padding:0 .25rem;background:var(--cb-color-surface);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);pointer-events:none;transition:top .14s ease,transform .14s ease,font-size .14s ease,color .14s ease}.cb-float-label.cb-is-active>label{top:0;transform:translateY(-50%);font-size:.75rem;color:var(--cb-color-primary-500)}.cb-float-label--over.cb-is-active>label{top:-.6rem;background:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbFloatLabel, isStandalone: true, selector: "cb-float-label", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()", "input": "checkFilled()", "change": "checkFilled()" }, properties: { "class.cb-float-label--over": "variant() === \"over\"", "class.cb-float-label--in": "variant() === \"in\"", "class.cb-float-label--on": "variant() === \"on\"", "class.cb-is-active": "focused() || filled()" }, classAttribute: "cb-float-label" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".cb-float-label{position:relative;display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-float-label>label{position:absolute;left:var(--cb-space-3);top:50%;transform:translateY(-50%);padding:0 .25rem;background:var(--cb-color-surface);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);pointer-events:none;transition:top .14s ease,transform .14s ease,font-size .14s ease,color .14s ease}.cb-float-label.cb-is-active>label{top:0;transform:translateY(-50%);font-size:.75rem;color:var(--cb-color-primary-text)}.cb-float-label--over.cb-is-active>label{top:-.6rem;background:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFloatLabel, decorators: [{
             type: Component,
@@ -46,7 +46,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '(focusout)': 'onFocusOut()',
                         '(input)': 'checkFilled()',
                         '(change)': 'checkFilled()',
-                    }, template: `<ng-content />`, styles: [".cb-float-label{position:relative;display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-float-label>label{position:absolute;left:var(--cb-space-3);top:50%;transform:translateY(-50%);padding:0 .25rem;background:var(--cb-color-surface);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);pointer-events:none;transition:top .14s ease,transform .14s ease,font-size .14s ease,color .14s ease}.cb-float-label.cb-is-active>label{top:0;transform:translateY(-50%);font-size:.75rem;color:var(--cb-color-primary-500)}.cb-float-label--over.cb-is-active>label{top:-.6rem;background:transparent}\n"] }]
+                    }, template: `<ng-content />`, styles: [".cb-float-label{position:relative;display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-float-label>label{position:absolute;left:var(--cb-space-3);top:50%;transform:translateY(-50%);padding:0 .25rem;background:var(--cb-color-surface);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);pointer-events:none;transition:top .14s ease,transform .14s ease,font-size .14s ease,color .14s ease}.cb-float-label.cb-is-active>label{top:0;transform:translateY(-50%);font-size:.75rem;color:var(--cb-color-primary-text)}.cb-float-label--over.cb-is-active>label{top:-.6rem;background:transparent}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 /**