@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-caribe-tracker.mjs

@@ -1,3 +1,4 @@
+import { injectCbTranslation } from '@caribeng/ui';
 import * as i0 from '@angular/core';
 import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
@@ -12,6 +13,8 @@ import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@a
  */
 class CbTracker {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.steps = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
         this.currentIndex = input(0, /* @ts-ignore */
@@ -25,7 +28,7 @@ class CbTracker {
     }
     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" aria-label="Progreso">
+    <ol class="cb-tracker" [attr.aria-label]="t().progress">
       @for (step of steps(); track $index) {
         <li
           class="cb-tracker__step"
@@ -43,7 +46,7 @@ class CbTracker {
 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" aria-label="Progreso">
+    <ol class="cb-tracker" [attr.aria-label]="t().progress">
       @for (step of steps(); track $index) {
         <li
           class="cb-tracker__step"

package/fesm2022/caribeng-ui-caribe-transaction-status.mjs

@@ -14,7 +14,7 @@ class CbTransactionStatus {
     constructor() {
         this.status = input('success', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
-        this.label = input('Transacción completada', /* @ts-ignore */
+        this.label = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     }
     glyph() {

package/fesm2022/caribeng-ui-caribe-voucher.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Voucher de Caribe Design: comprobante de operación con filas clave/valor y
@@ -12,11 +13,13 @@ import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component }
  */
 class CbVoucher {
     constructor() {
-        this.title = input('Comprobante', /* @ts-ignore */
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.title = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         this.rows = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-        this.actionLabel = input('Compartir', /* @ts-ignore */
+        this.actionLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
         this.copy = output();
     }
@@ -25,11 +28,11 @@ class CbVoucher {
     <article class="cb-voucher">
       <header class="cb-voucher__head">
         <span class="cb-voucher__check" aria-hidden="true">✓</span>
-        <h2 class="cb-voucher__title">{{ title() }}</h2>
+        <h2 class="cb-voucher__title">{{ (title() ?? t().receipt) }}</h2>
       </header>
       <div class="cb-voucher__intro"><ng-content /></div>
       <dl class="cb-voucher__list">
-        @for (row of rows(); track row.label) {
+        @for (row of rows(); track $index) {
           <div class="cb-voucher__row">
             <dt class="cb-voucher__label">{{ row.label }}</dt>
             <dd class="cb-voucher__value">{{ row.value }}</dd>
@@ -38,7 +41,7 @@ class CbVoucher {
       </dl>
       <div class="cb-voucher__foot">
         <button type="button" class="cb-voucher__action" (click)="copy.emit()">
-          {{ actionLabel() }}
+          {{ (actionLabel() ?? t().share) }}
         </button>
       </div>
     </article>
@@ -50,11 +53,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     <article class="cb-voucher">
       <header class="cb-voucher__head">
         <span class="cb-voucher__check" aria-hidden="true">✓</span>
-        <h2 class="cb-voucher__title">{{ title() }}</h2>
+        <h2 class="cb-voucher__title">{{ (title() ?? t().receipt) }}</h2>
       </header>
       <div class="cb-voucher__intro"><ng-content /></div>
       <dl class="cb-voucher__list">
-        @for (row of rows(); track row.label) {
+        @for (row of rows(); track $index) {
           <div class="cb-voucher__row">
             <dt class="cb-voucher__label">{{ row.label }}</dt>
             <dd class="cb-voucher__value">{{ row.value }}</dd>
@@ -63,7 +66,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       </dl>
       <div class="cb-voucher__foot">
         <button type="button" class="cb-voucher__action" (click)="copy.emit()">
-          {{ actionLabel() }}
+          {{ (actionLabel() ?? t().share) }}
         </button>
       </div>
     </article>

package/fesm2022/caribeng-ui-carousel.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, model, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, model, inject, ElementRef, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 
 /**
  * Carousel de CaribeNG: carrusel accesible de tarjetas o diapositivas con
@@ -8,6 +9,10 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbCarousel {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         this.circular = input(true, /* @ts-ignore */
@@ -16,10 +21,11 @@ class CbCarousel {
         ...(ngDevMode ? [{ debugName: "showNavigators" }] : /* istanbul ignore next */ []));
         this.showIndicators = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showIndicators" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Carrusel', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.page = model(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef);
         this.activeItem = computed(() => this.items()[this.page()] ?? this.items()[0] ?? null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeItem" }] : /* istanbul ignore next */ []));
         this.canPrev = computed(() => this.circular() || this.page() > 0, /* @ts-ignore */
@@ -47,15 +53,30 @@ class CbCarousel {
         else if (this.circular())
             this.page.set(0);
     }
+    /** Indicadores (patrón *tabs*): flechas, Inicio y Fin cambian de diapositiva y mueven el foco. */
+    onDotKeydown(event) {
+        const last = this.items().length - 1;
+        const cur = this.page();
+        const target = event.key === 'ArrowRight' ? (cur < last ? cur + 1 : 0)
+            : event.key === 'ArrowLeft' ? (cur > 0 ? cur - 1 : last)
+                : event.key === 'Home' ? 0
+                    : event.key === 'End' ? last
+                        : null;
+        if (target === null)
+            return;
+        event.preventDefault();
+        this.page.set(target);
+        this.host.nativeElement.querySelectorAll('.cb-carousel__dot')[target]?.focus();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCarousel, isStandalone: true, selector: "cb-carousel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: true, isRequired: false, transformFunction: null }, showNavigators: { classPropertyName: "showNavigators", publicName: "showNavigators", isSignal: true, isRequired: false, transformFunction: null }, showIndicators: { classPropertyName: "showIndicators", publicName: "showIndicators", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, host: { attributes: { "role": "region", "aria-roledescription": "carousel" }, properties: { "attr.aria-label": "ariaLabel() || \"Carrusel\"" }, classAttribute: "cb-carousel" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCarousel, isStandalone: true, selector: "cb-carousel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: true, isRequired: false, transformFunction: null }, showNavigators: { classPropertyName: "showNavigators", publicName: "showNavigators", isSignal: true, isRequired: false, transformFunction: null }, showIndicators: { classPropertyName: "showIndicators", publicName: "showIndicators", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, host: { attributes: { "role": "region", "aria-roledescription": "carousel" }, properties: { "attr.aria-label": "(ariaLabel() ?? t().carousel)" }, classAttribute: "cb-carousel" }, ngImport: i0, template: `
     <div class="cb-carousel__Stage">
       @if (showNavigators()) {
         <button
           type="button"
           class="cb-carousel__nav cb-carousel__nav--prev"
           [disabled]="!canPrev()"
-          aria-label="Anterior"
+          [attr.aria-label]="t().previous"
           (click)="prev()"
         >
           <cb-icon name="chevron-left" [size]="18" aria-hidden="true" />
@@ -63,7 +84,12 @@ class CbCarousel {
       }
       <div class="cb-carousel__viewport" aria-live="polite">
         @if (activeItem(); as item) {
-          <div class="cb-carousel__slide" role="group" aria-roledescription="slide">
+          <div
+            class="cb-carousel__slide"
+            role="group"
+            aria-roledescription="slide"
+            [attr.aria-label]="fmt(t().slideOf, page() + 1, items().length)"
+          >
             @if (item.image) {
               <img class="cb-carousel__img" [src]="item.image" [alt]="item.title" />
             }
@@ -84,7 +110,7 @@ class CbCarousel {
           type="button"
           class="cb-carousel__nav cb-carousel__nav--next"
           [disabled]="!canNext()"
-          aria-label="Siguiente"
+          [attr.aria-label]="t().next"
           (click)="next()"
         >
           <cb-icon name="chevron-right" [size]="18" aria-hidden="true" />
@@ -93,15 +119,17 @@ class CbCarousel {
     </div>
     @if (showIndicators() && items().length > 1) {
       <div class="cb-carousel__indicators" role="tablist">
-        @for (item of items(); track item.title; let i = $index) {
+        @for (item of items(); track $index; let i = $index) {
           <button
             type="button"
             class="cb-carousel__dot"
             role="tab"
             [class.cb-is-active]="page() === i"
             [attr.aria-selected]="page() === i"
-            [attr.aria-label]="'Diapositiva ' + (i + 1)"
+            [attr.tabindex]="page() === i ? 0 : -1"
+            [attr.aria-label]="fmt(t().slide, i + 1)"
             (click)="page.set(i)"
+            (keydown)="onDotKeydown($event)"
           ></button>
         }
       </div>
@@ -114,7 +142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         class: 'cb-carousel',
                         role: 'region',
                         'aria-roledescription': 'carousel',
-                        '[attr.aria-label]': 'ariaLabel() || "Carrusel"',
+                        '[attr.aria-label]': '(ariaLabel() ?? t().carousel)',
                     }, template: `
     <div class="cb-carousel__Stage">
       @if (showNavigators()) {
@@ -122,7 +150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           type="button"
           class="cb-carousel__nav cb-carousel__nav--prev"
           [disabled]="!canPrev()"
-          aria-label="Anterior"
+          [attr.aria-label]="t().previous"
           (click)="prev()"
         >
           <cb-icon name="chevron-left" [size]="18" aria-hidden="true" />
@@ -130,7 +158,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       }
       <div class="cb-carousel__viewport" aria-live="polite">
         @if (activeItem(); as item) {
-          <div class="cb-carousel__slide" role="group" aria-roledescription="slide">
+          <div
+            class="cb-carousel__slide"
+            role="group"
+            aria-roledescription="slide"
+            [attr.aria-label]="fmt(t().slideOf, page() + 1, items().length)"
+          >
             @if (item.image) {
               <img class="cb-carousel__img" [src]="item.image" [alt]="item.title" />
             }
@@ -151,7 +184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           type="button"
           class="cb-carousel__nav cb-carousel__nav--next"
           [disabled]="!canNext()"
-          aria-label="Siguiente"
+          [attr.aria-label]="t().next"
           (click)="next()"
         >
           <cb-icon name="chevron-right" [size]="18" aria-hidden="true" />
@@ -160,15 +193,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     </div>
     @if (showIndicators() && items().length > 1) {
       <div class="cb-carousel__indicators" role="tablist">
-        @for (item of items(); track item.title; let i = $index) {
+        @for (item of items(); track $index; let i = $index) {
           <button
             type="button"
             class="cb-carousel__dot"
             role="tab"
             [class.cb-is-active]="page() === i"
             [attr.aria-selected]="page() === i"
-            [attr.aria-label]="'Diapositiva ' + (i + 1)"
+            [attr.tabindex]="page() === i ? 0 : -1"
+            [attr.aria-label]="fmt(t().slide, i + 1)"
             (click)="page.set(i)"
+            (keydown)="onDotKeydown($event)"
           ></button>
         }
       </div>

package/fesm2022/caribeng-ui-cascadeselect.mjs

@@ -1,17 +1,19 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, model, signal, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, booleanAttribute, model, signal, computed, viewChild, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CbIcon } from '@caribeng/ui/icon';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFieldState } from '@caribeng/ui';
 
 /**
  * CascadeSelect de CaribeNG: selector en cascada multinivel con integración CVA.
  */
 class CbCascadeSelect {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.options = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        this.placeholder = input('Seleccionar opción…', /* @ts-ignore */
+        this.placeholder = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -46,6 +48,7 @@ class CbCascadeSelect {
         ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
         this.onChange = () => { };
         this.onTouched = () => { };
+        this.trigger = viewChild.required('trigger');
     }
     writeValue(val) {
         this.value.set(val ?? null);
@@ -59,6 +62,14 @@ class CbCascadeSelect {
     setDisabledState(isDisabled) {
         this.cvaDisabled.set(isDisabled);
     }
+    /** Escape cierra el panel y devuelve el foco al disparador. */
+    closeOnEscape(event) {
+        if (!this.open())
+            return;
+        event.preventDefault();
+        this.open.set(false);
+        this.trigger().nativeElement.focus();
+    }
     toggleOpen() {
         if (this.isDisabled())
             return;
@@ -80,14 +91,15 @@ class CbCascadeSelect {
         this.open.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCascadeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCascadeSelect, isStandalone: true, selector: "cb-cascade-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.cb-is-open": "open()" }, classAttribute: "cb-cascade-select" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCascadeSelect, isStandalone: true, selector: "cb-cascade-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "keydown.escape": "closeOnEscape($event)" }, properties: { "class.cb-is-open": "open()" }, classAttribute: "cb-cascade-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CbCascadeSelect),
                 multi: true,
             },
-        ], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <button
+      #trigger
       type="button"
       class="cb-cascade-select__trigger"
       [class.cb-is-invalid]="fieldState.invalid()"
@@ -99,7 +111,7 @@ class CbCascadeSelect {
       (click)="toggleOpen()"
     >
       <span class="cb-cascade-select__label" [class.cb-is-placeholder]="!selectedLabel()">
-        {{ selectedLabel() || placeholder() }}
+        {{ selectedLabel() || (placeholder() ?? t().select) }}
       </span>
       <cb-icon name="chevron-down" [size]="16" aria-hidden="true" />
     </button>
@@ -154,8 +166,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], host: {
                         class: 'cb-cascade-select',
                         '[class.cb-is-open]': 'open()',
+                        '(keydown.escape)': 'closeOnEscape($event)',
                     }, template: `
     <button
+      #trigger
       type="button"
       class="cb-cascade-select__trigger"
       [class.cb-is-invalid]="fieldState.invalid()"
@@ -167,7 +181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       (click)="toggleOpen()"
     >
       <span class="cb-cascade-select__label" [class.cb-is-placeholder]="!selectedLabel()">
-        {{ selectedLabel() || placeholder() }}
+        {{ selectedLabel() || (placeholder() ?? t().select) }}
       </span>
       <cb-icon name="chevron-down" [size]="16" aria-hidden="true" />
     </button>
@@ -210,7 +224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       </div>
     }
   `, styles: [":host{position:relative;display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-cascade-select__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);cursor:pointer}.cb-cascade-select__label.cb-is-placeholder{color:var(--cb-color-text-muted)}.cb-cascade-select__menus{position:absolute;top:calc(100% + 4px);left:0;z-index:30;display:flex;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);box-shadow:var(--cb-shadow-md, 0 8px 20px rgba(0, 0, 0, .12));overflow:hidden}.cb-cascade-select__list{list-style:none;margin:0;padding:var(--cb-space-1);min-width:150px;border-right:var(--cb-border-width) solid var(--cb-color-border)}.cb-cascade-select__list:last-child{border-right:none}.cb-cascade-select__option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-2);padding:.4rem .6rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);cursor:pointer}.cb-cascade-select__option.cb-is-active,.cb-cascade-select__option.cb-is-selected{background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}.cb-cascade-select__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.