@caribeng/ui 22.2.0 → 22.4.0

package/fesm2022/caribeng-ui-drawer.mjs

@@ -38,6 +38,9 @@ class CbDrawer {
         this.closeOnEscape = input(true, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: toBoolean });
         this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Ancho (izquierda/derecha) o alto (arriba/abajo) del panel, p. ej. `'32rem'`. */
+        this.size = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.onShow = output();
         this.onHide = output();
         this.titleId = `cb-drawer-${nextUid()}-title`;
@@ -99,11 +102,12 @@ class CbDrawer {
         this.onHide.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDrawer, isStandalone: true, selector: "cb-drawer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onShow: "onShow", onHide: "onHide" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDrawer, isStandalone: true, selector: "cb-drawer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onShow: "onShow", onHide: "onHide" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #tpl>
       <div
         class="cb-drawer"
         [class]="'cb-drawer--' + position()"
+        [style.--cb-drawer-size]="size() || null"
         role="dialog"
         aria-modal="true"
         [attr.aria-labelledby]="header() ? titleId : null"
@@ -127,7 +131,7 @@ class CbDrawer {
         <footer class="cb-drawer__footer"><ng-content select="[cb-drawer-footer]" /></footer>
       </div>
     </ng-template>
-  `, isInline: true, styles: [".cb-drawer{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);box-shadow:var(--cb-shadow-lg);overflow:hidden}.cb-drawer--left,.cb-drawer--right{width:min(22rem,100vw);height:100vh}.cb-drawer--top,.cb-drawer--bottom{width:100vw;height:min(18rem,100vh)}.cb-drawer--right{animation:cb-drawer-right var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--left{animation:cb-drawer-left var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--top{animation:cb-drawer-top var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--bottom{animation:cb-drawer-bottom var(--cb-duration-normal, .22s) var(--cb-ease, ease)}@keyframes cb-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cb-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes cb-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cb-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cb-drawer{animation:none!important}}.cb-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5);border-bottom:1px solid var(--cb-color-border)}.cb-drawer__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold)}.cb-drawer__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-drawer__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-drawer__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-drawer__body{flex:1 1 auto;padding:var(--cb-space-5);overflow-y:auto}.cb-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5)}.cb-drawer__footer:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".cb-drawer{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);box-shadow:var(--cb-shadow-lg);overflow:hidden}.cb-drawer--left,.cb-drawer--right{width:min(var(--cb-drawer-size, 22rem),100vw);height:100vh}.cb-drawer--top,.cb-drawer--bottom{width:100vw;height:min(var(--cb-drawer-size, 18rem),100vh)}.cb-drawer--right{animation:cb-drawer-right var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--left{animation:cb-drawer-left var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--top{animation:cb-drawer-top var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--bottom{animation:cb-drawer-bottom var(--cb-duration-normal, .22s) var(--cb-ease, ease)}@keyframes cb-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cb-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes cb-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cb-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cb-drawer{animation:none!important}}.cb-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5);border-bottom:1px solid var(--cb-color-border)}.cb-drawer__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold)}.cb-drawer__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-drawer__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-drawer__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-drawer__body{flex:1 1 auto;padding:var(--cb-space-5);overflow-y:auto}.cb-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5)}.cb-drawer__footer:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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: CbDrawer, decorators: [{
             type: Component,
@@ -136,6 +140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <div
         class="cb-drawer"
         [class]="'cb-drawer--' + position()"
+        [style.--cb-drawer-size]="size() || null"
         role="dialog"
         aria-modal="true"
         [attr.aria-labelledby]="header() ? titleId : null"
@@ -159,8 +164,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <footer class="cb-drawer__footer"><ng-content select="[cb-drawer-footer]" /></footer>
       </div>
     </ng-template>
-  `, styles: [".cb-drawer{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);box-shadow:var(--cb-shadow-lg);overflow:hidden}.cb-drawer--left,.cb-drawer--right{width:min(22rem,100vw);height:100vh}.cb-drawer--top,.cb-drawer--bottom{width:100vw;height:min(18rem,100vh)}.cb-drawer--right{animation:cb-drawer-right var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--left{animation:cb-drawer-left var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--top{animation:cb-drawer-top var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--bottom{animation:cb-drawer-bottom var(--cb-duration-normal, .22s) var(--cb-ease, ease)}@keyframes cb-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cb-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes cb-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cb-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cb-drawer{animation:none!important}}.cb-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5);border-bottom:1px solid var(--cb-color-border)}.cb-drawer__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold)}.cb-drawer__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-drawer__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-drawer__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-drawer__body{flex:1 1 auto;padding:var(--cb-space-5);overflow-y:auto}.cb-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5)}.cb-drawer__footer:empty{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissableMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissableMask", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
+  `, styles: [".cb-drawer{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);box-shadow:var(--cb-shadow-lg);overflow:hidden}.cb-drawer--left,.cb-drawer--right{width:min(var(--cb-drawer-size, 22rem),100vw);height:100vh}.cb-drawer--top,.cb-drawer--bottom{width:100vw;height:min(var(--cb-drawer-size, 18rem),100vh)}.cb-drawer--right{animation:cb-drawer-right var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--left{animation:cb-drawer-left var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--top{animation:cb-drawer-top var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--bottom{animation:cb-drawer-bottom var(--cb-duration-normal, .22s) var(--cb-ease, ease)}@keyframes cb-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cb-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes cb-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cb-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cb-drawer{animation:none!important}}.cb-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5);border-bottom:1px solid var(--cb-color-border)}.cb-drawer__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold)}.cb-drawer__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-drawer__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-drawer__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-drawer__body{flex:1 1 auto;padding:var(--cb-space-5);overflow-y:auto}.cb-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5)}.cb-drawer__footer:empty{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissableMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissableMask", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
 let uid = 0;
 function nextUid() {
     return ++uid;

package/fesm2022/caribeng-ui-editor.mjs

@@ -2025,6 +2025,11 @@ class CbEditor {
             this.exec('insertHTML', `<a href="${escapeAttr(url)}"${target}>${escapeHtml(url)}</a>`);
         }
         else {
+            // El doble clic en Windows selecciona también el espacio siguiente: se deja fuera del enlace
+            // (insertHTML lo descartaría y las palabras quedarían pegadas).
+            trimRangeWhitespace(range);
+            sel.removeAllRanges();
+            sel.addRange(range);
             this.exec('insertHTML', `<a href="${escapeAttr(url)}"${target}>${escapeHtml(range.toString())}</a>`);
         }
     }
@@ -4469,6 +4474,22 @@ function setLinkAttrs(anchor, url, newTab) {
         anchor.removeAttribute('rel');
     }
 }
+/** Saca de la selección los espacios de los extremos (si caen en un nodo de texto). */
+function trimRangeWhitespace(range) {
+    const { startContainer: start, endContainer: end } = range;
+    if (end.nodeType === Node.TEXT_NODE) {
+        const before = (end.textContent ?? '').slice(0, range.endOffset);
+        const trailing = before.length - before.trimEnd().length;
+        if (trailing && range.toString().trim())
+            range.setEnd(end, range.endOffset - trailing);
+    }
+    if (start.nodeType === Node.TEXT_NODE) {
+        const after = (start.textContent ?? '').slice(range.startOffset);
+        const leading = after.length - after.trimStart().length;
+        if (leading && range.toString().trim())
+            range.setStart(start, range.startOffset + leading);
+    }
+}
 function readAsDataUrl(file) {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();

package/fesm2022/caribeng-ui-fieldset.mjs

@@ -42,7 +42,7 @@ class CbFieldset {
             type="button"
             class="cb-fieldset__toggler"
             [attr.aria-expanded]="!collapsed()"
-            [attr.aria-controls]="contentId"
+            [attr.aria-controls]="collapsed() ? null : contentId"
             (click)="toggle()"
           >
             <cb-icon
@@ -84,7 +84,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type="button"
             class="cb-fieldset__toggler"
             [attr.aria-expanded]="!collapsed()"
-            [attr.aria-controls]="contentId"
+            [attr.aria-controls]="collapsed() ? null : contentId"
             (click)="toggle()"
           >
             <cb-icon

package/fesm2022/caribeng-ui-file-card.mjs

@@ -1,20 +1,32 @@
 import * as i0 from '@angular/core';
-import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { viewChild, input, booleanAttribute, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { CbMenu } from '@caribeng/ui/menu';
+import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Tarjeta de categoría/almacenamiento de CaribeNG: icono con tinte, título y
  * subtítulo a la izquierda; dos valores alineados a la derecha. Útil para
  * resúmenes de media, almacenamiento o métricas de categoría.
  *
+ * Como `cb-folder-card`: con `actions` muestra un botón ⋮ con un menú
+ * (`actionSelect`) y con `clickable` toda la tarjeta emite `open`.
+ *
  * @example
  * ```html
  * <cb-file-card icon="image" color="#10b981" title="Imágenes"
- *   subtitle="17% usado" value="245 archivos" valueSub="26.4 GB" />
+ *   subtitle="17% usado" value="245 archivos" valueSub="26.4 GB"
+ *   clickable (open)="verImagenes()" />
  * ```
  */
 class CbFileCard {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.menu = viewChild('menu', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+        this.trigger = viewChild('trigger', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
         /** Nombre del icono (del set de CaribeNG). */
         this.icon = input('file', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
@@ -33,55 +45,160 @@ class CbFileCard {
         /** Valor secundario a la derecha (p. ej. "26.4 GB"). */
         this.valueSub = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valueSub" }] : /* istanbul ignore next */ []));
+        /** Acciones del menú ⋮. Sin acciones no se muestra el botón. */
+        this.actions = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+        /** Nombre del botón ⋮ y del menú. Por defecto, "Más acciones: {título}" del idioma activo. */
+        this.actionsAriaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionsAriaLabel" }] : /* istanbul ignore next */ []));
+        /** Toda la tarjeta es pulsable y emite `open` (clic, Enter o Espacio). */
+        this.clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Acción elegida en el menú ⋮. */
+        this.actionSelect = output();
+        /** Se pulsó la tarjeta (solo con `clickable`). */
+        this.open = output();
+        this.menuOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
+        this.menuLabel = computed(() => {
+            const custom = this.actionsAriaLabel();
+            if (custom)
+                return custom;
+            const title = this.title();
+            return title ? `${this.t().moreActions}: ${title}` : this.t().moreActions;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuLabel" }] : /* istanbul ignore next */ []));
     }
     /** Fondo tintado derivado del color (cualquier color CSS: hex, rgb(), var(--…)). */
     tintBg() {
         const c = this.color();
         return c ? `color-mix(in srgb, ${c} 12%, transparent)` : null;
     }
+    /** Abre o cierra el menú de acciones anclado al botón ⋮. */
+    toggleMenu() {
+        const menu = this.menu();
+        const trigger = this.trigger()?.nativeElement;
+        if (!menu || !trigger)
+            return;
+        if (menu.isOpen) {
+            menu.hide();
+            return;
+        }
+        menu.show(trigger);
+        this.menuOpen.set(true);
+    }
+    openFromKeyboard(event) {
+        event.preventDefault();
+        if (!this.menu()?.isOpen)
+            this.toggleMenu();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFileCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFileCard, isStandalone: true, selector: "cb-file-card", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, 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 }, valueSub: { classPropertyName: "valueSub", publicName: "valueSub", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-file-card" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFileCard, isStandalone: true, selector: "cb-file-card", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, 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 }, valueSub: { classPropertyName: "valueSub", publicName: "valueSub", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, actionsAriaLabel: { classPropertyName: "actionsAriaLabel", publicName: "actionsAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelect: "actionSelect", open: "open" }, host: { properties: { "class.cb-file-card--clickable": "clickable()" }, classAttribute: "cb-file-card" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="cb-file-card__left">
       <span class="cb-file-card__icon" [style.background]="tintBg()" [style.color]="color() || null">
         <cb-icon [name]="icon()" [size]="20" aria-hidden="true" />
       </span>
       <div class="cb-file-card__text">
-        <span class="cb-file-card__title">{{ title() }}</span>
+        @if (clickable()) {
+          <button type="button" class="cb-file-card__title cb-file-card__open" (click)="open.emit($event)">{{ title() }}</button>
+        } @else {
+          <span class="cb-file-card__title">{{ title() }}</span>
+        }
         @if (subtitle()) {
           <span class="cb-file-card__subtitle">{{ subtitle() }}</span>
         }
       </div>
     </div>
-    <div class="cb-file-card__values">
-      <span class="cb-file-card__value">{{ value() }}</span>
-      @if (valueSub()) {
-        <span class="cb-file-card__value-sub">{{ valueSub() }}</span>
+    <div class="cb-file-card__end">
+      <div class="cb-file-card__values">
+        <span class="cb-file-card__value">{{ value() }}</span>
+        @if (valueSub()) {
+          <span class="cb-file-card__value-sub">{{ valueSub() }}</span>
+        }
+      </div>
+      @if (actions().length) {
+        <button
+          #trigger
+          type="button"
+          class="cb-file-card__menu-button"
+          [attr.aria-label]="menuLabel()"
+          aria-haspopup="menu"
+          [attr.aria-expanded]="menuOpen()"
+          (click)="toggleMenu()"
+          (keydown.arrowdown)="openFromKeyboard($event)"
+        >
+          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
+            <circle cx="12" cy="5" r="2" />
+            <circle cx="12" cy="12" r="2" />
+            <circle cx="12" cy="19" r="2" />
+          </svg>
+        </button>
+        <cb-menu
+          #menu
+          [items]="actions()"
+          [ariaLabel]="menuLabel()"
+          (itemSelect)="actionSelect.emit($event)"
+          (hidden)="menuOpen.set(false)"
+        />
       }
     </div>
-  `, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);padding:.9rem 1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 14px);background:var(--cb-color-surface);font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-file-card__left{display:flex;align-items:center;gap:.75rem;min-width:0}.cb-file-card__icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--cb-radius-md, 10px);flex:none;color:var(--cb-color-primary-600, #059669)}.cb-file-card__text{display:flex;flex-direction:column;min-width:0}.cb-file-card__title{font-weight:600;font-size:.9rem}.cb-file-card__subtitle{font-size:.8rem;color:var(--cb-color-text-muted)}.cb-file-card__values{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none}.cb-file-card__value,.cb-file-card__value-sub{font-size:.85rem;color:var(--cb-color-text-muted)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);padding:.9rem 1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 14px);background:var(--cb-color-surface);font-family:var(--cb-font-sans);color:var(--cb-color-text)}:host(.cb-file-card--clickable){cursor:pointer;transition:background-color .15s ease}:host(.cb-file-card--clickable:hover){background:var(--cb-color-surface-hover)}:host(.cb-file-card--clickable:has(.cb-file-card__open:focus-visible)){outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-file-card__left{display:flex;align-items:center;gap:.75rem;min-width:0}.cb-file-card__icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--cb-radius-md, 10px);flex:none;color:var(--cb-color-primary-600, #059669)}.cb-file-card__text{display:flex;flex-direction:column;min-width:0}.cb-file-card__title{font-weight:600;font-size:.9rem}.cb-file-card__open{padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;font-size:.9rem;text-align:start;cursor:pointer}.cb-file-card__open:focus-visible{outline:none}.cb-file-card__open:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.cb-file-card__subtitle{font-size:.8rem;color:var(--cb-color-text-muted)}.cb-file-card__end{display:flex;align-items:center;gap:.25rem;flex:none}.cb-file-card__menu-button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-right:-.5rem;padding:0;border:0;border-radius:var(--cb-radius-md, 8px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-file-card__menu-button:hover,.cb-file-card__menu-button[aria-expanded=true]{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-file-card__menu-button:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-file-card__values{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none}.cb-file-card__value,.cb-file-card__value-sub{font-size:.85rem;color:var(--cb-color-text-muted)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbMenu, selector: "cb-menu", inputs: ["items", "ariaLabel"], outputs: ["itemSelect", "hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFileCard, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-file-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-file-card' }, template: `
+            args: [{ selector: 'cb-file-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon, CbMenu], host: {
+                        class: 'cb-file-card',
+                        '[class.cb-file-card--clickable]': 'clickable()',
+                    }, template: `
     <div class="cb-file-card__left">
       <span class="cb-file-card__icon" [style.background]="tintBg()" [style.color]="color() || null">
         <cb-icon [name]="icon()" [size]="20" aria-hidden="true" />
       </span>
       <div class="cb-file-card__text">
-        <span class="cb-file-card__title">{{ title() }}</span>
+        @if (clickable()) {
+          <button type="button" class="cb-file-card__title cb-file-card__open" (click)="open.emit($event)">{{ title() }}</button>
+        } @else {
+          <span class="cb-file-card__title">{{ title() }}</span>
+        }
         @if (subtitle()) {
           <span class="cb-file-card__subtitle">{{ subtitle() }}</span>
         }
       </div>
     </div>
-    <div class="cb-file-card__values">
-      <span class="cb-file-card__value">{{ value() }}</span>
-      @if (valueSub()) {
-        <span class="cb-file-card__value-sub">{{ valueSub() }}</span>
+    <div class="cb-file-card__end">
+      <div class="cb-file-card__values">
+        <span class="cb-file-card__value">{{ value() }}</span>
+        @if (valueSub()) {
+          <span class="cb-file-card__value-sub">{{ valueSub() }}</span>
+        }
+      </div>
+      @if (actions().length) {
+        <button
+          #trigger
+          type="button"
+          class="cb-file-card__menu-button"
+          [attr.aria-label]="menuLabel()"
+          aria-haspopup="menu"
+          [attr.aria-expanded]="menuOpen()"
+          (click)="toggleMenu()"
+          (keydown.arrowdown)="openFromKeyboard($event)"
+        >
+          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
+            <circle cx="12" cy="5" r="2" />
+            <circle cx="12" cy="12" r="2" />
+            <circle cx="12" cy="19" r="2" />
+          </svg>
+        </button>
+        <cb-menu
+          #menu
+          [items]="actions()"
+          [ariaLabel]="menuLabel()"
+          (itemSelect)="actionSelect.emit($event)"
+          (hidden)="menuOpen.set(false)"
+        />
       }
     </div>
-  `, styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);padding:.9rem 1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 14px);background:var(--cb-color-surface);font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-file-card__left{display:flex;align-items:center;gap:.75rem;min-width:0}.cb-file-card__icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--cb-radius-md, 10px);flex:none;color:var(--cb-color-primary-600, #059669)}.cb-file-card__text{display:flex;flex-direction:column;min-width:0}.cb-file-card__title{font-weight:600;font-size:.9rem}.cb-file-card__subtitle{font-size:.8rem;color:var(--cb-color-text-muted)}.cb-file-card__values{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none}.cb-file-card__value,.cb-file-card__value-sub{font-size:.85rem;color:var(--cb-color-text-muted)}\n"] }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], 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 }] }], valueSub: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueSub", required: false }] }] } });
+  `, styles: [":host{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);padding:.9rem 1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 14px);background:var(--cb-color-surface);font-family:var(--cb-font-sans);color:var(--cb-color-text)}:host(.cb-file-card--clickable){cursor:pointer;transition:background-color .15s ease}:host(.cb-file-card--clickable:hover){background:var(--cb-color-surface-hover)}:host(.cb-file-card--clickable:has(.cb-file-card__open:focus-visible)){outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-file-card__left{display:flex;align-items:center;gap:.75rem;min-width:0}.cb-file-card__icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--cb-radius-md, 10px);flex:none;color:var(--cb-color-primary-600, #059669)}.cb-file-card__text{display:flex;flex-direction:column;min-width:0}.cb-file-card__title{font-weight:600;font-size:.9rem}.cb-file-card__open{padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;font-size:.9rem;text-align:start;cursor:pointer}.cb-file-card__open:focus-visible{outline:none}.cb-file-card__open:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.cb-file-card__subtitle{font-size:.8rem;color:var(--cb-color-text-muted)}.cb-file-card__end{display:flex;align-items:center;gap:.25rem;flex:none}.cb-file-card__menu-button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-right:-.5rem;padding:0;border:0;border-radius:var(--cb-radius-md, 8px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-file-card__menu-button:hover,.cb-file-card__menu-button[aria-expanded=true]{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-file-card__menu-button:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-file-card__values{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none}.cb-file-card__value,.cb-file-card__value-sub{font-size:.85rem;color:var(--cb-color-text-muted)}\n"] }]
+        }], propDecorators: { menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], 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 }] }], valueSub: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueSub", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], actionsAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsAriaLabel", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], actionSelect: [{ type: i0.Output, args: ["actionSelect"] }], open: [{ type: i0.Output, args: ["open"] }] } });
 
 /*
  * Public API Surface de @caribeng/ui/file-card

package/fesm2022/caribeng-ui-folder-card.mjs

@@ -1,23 +1,32 @@
 import * as i0 from '@angular/core';
-import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { viewChild, input, booleanAttribute, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { CbMenu } from '@caribeng/ui/menu';
 import { injectCbTranslation } from '@caribeng/ui';
 
 /**
  * Tarjeta de carpeta de CaribeNG: icono de carpeta, nombre y una fila con
- * número de archivos y tamaño. Proyecta acciones (menú) por `[cb-folder-actions]`.
+ * número de archivos y tamaño.
+ *
+ * Con `actions` muestra un botón ⋮ que abre un menú (`cb-menu`) con esas
+ * acciones y emite `actionSelect`. Con `clickable`, toda la tarjeta abre la
+ * carpeta (`open`) sin interferir con el botón del menú. Sigue aceptando un
+ * trigger propio proyectado por `[cb-folder-actions]`.
  *
  * @example
  * ```html
- * <cb-folder-card name="Imágenes" files="345" size="26.4 GB">
- *   <button cb-folder-actions aria-label="Opciones">⋮</button>
- * </cb-folder-card>
+ * <cb-folder-card name="Imágenes" files="345" size="26.4 GB" clickable
+ *   [actions]="acciones" (actionSelect)="onAccion($event)" (open)="abrir()" />
  * ```
  */
 class CbFolderCard {
     constructor() {
         /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
         this.t = injectCbTranslation();
+        this.menu = viewChild('menu', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+        this.trigger = viewChild('trigger', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
         /** Nombre de la carpeta. */
         this.name = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
@@ -33,16 +42,85 @@ class CbFolderCard {
         /** Color del icono de carpeta. */
         this.color = input('#f5b301', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** Acciones del menú ⋮ (abrir, renombrar, eliminar…). Sin acciones no se muestra el botón. */
+        this.actions = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+        /** Nombre del botón ⋮ y del menú. Por defecto, "Más acciones: {nombre}" del idioma activo. */
+        this.actionsAriaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionsAriaLabel" }] : /* istanbul ignore next */ []));
+        /** Toda la tarjeta es pulsable y emite `open` (clic, Enter o Espacio). */
+        this.clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Acción elegida en el menú ⋮. */
+        this.actionSelect = output();
+        /** Se pidió abrir la carpeta (solo con `clickable`). */
+        this.open = output();
+        this.menuOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
+        this.menuLabel = computed(() => {
+            const custom = this.actionsAriaLabel();
+            if (custom)
+                return custom;
+            const name = this.name();
+            return name ? `${this.t().moreActions}: ${name}` : this.t().moreActions;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuLabel" }] : /* istanbul ignore next */ []));
+    }
+    /** Abre o cierra el menú de acciones anclado al botón ⋮. */
+    toggleMenu() {
+        const menu = this.menu();
+        const trigger = this.trigger()?.nativeElement;
+        if (!menu || !trigger)
+            return;
+        if (menu.isOpen) {
+            menu.hide();
+            return;
+        }
+        menu.show(trigger);
+        this.menuOpen.set(true);
+    }
+    openFromKeyboard(event) {
+        event.preventDefault();
+        if (!this.menu()?.isOpen)
+            this.toggleMenu();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFolderCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFolderCard, isStandalone: true, selector: "cb-folder-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, filesLabel: { classPropertyName: "filesLabel", publicName: "filesLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-folder-card" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFolderCard, isStandalone: true, selector: "cb-folder-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, filesLabel: { classPropertyName: "filesLabel", publicName: "filesLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, actionsAriaLabel: { classPropertyName: "actionsAriaLabel", publicName: "actionsAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelect: "actionSelect", open: "open" }, host: { properties: { "class.cb-folder-card--clickable": "clickable()" }, classAttribute: "cb-folder-card" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="cb-folder-card__top">
       <cb-icon name="folder" [size]="30" class="cb-folder-card__icon" [style.color]="color() || null" aria-hidden="true" />
       <span class="cb-folder-card__actions">
         <ng-content select="[cb-folder-actions]" />
+        @if (actions().length) {
+          <button
+            #trigger
+            type="button"
+            class="cb-folder-card__menu-button"
+            [attr.aria-label]="menuLabel()"
+            aria-haspopup="menu"
+            [attr.aria-expanded]="menuOpen()"
+            (click)="toggleMenu()"
+            (keydown.arrowdown)="openFromKeyboard($event)"
+          >
+            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
+              <circle cx="12" cy="5" r="2" />
+              <circle cx="12" cy="12" r="2" />
+              <circle cx="12" cy="19" r="2" />
+            </svg>
+          </button>
+          <cb-menu
+            #menu
+            [items]="actions()"
+            [ariaLabel]="menuLabel()"
+            (itemSelect)="actionSelect.emit($event)"
+            (hidden)="menuOpen.set(false)"
+          />
+        }
       </span>
     </div>
-    <div class="cb-folder-card__name">{{ name() }}</div>
+    @if (clickable()) {
+      <button type="button" class="cb-folder-card__name cb-folder-card__open" (click)="open.emit($event)">{{ name() }}</button>
+    } @else {
+      <div class="cb-folder-card__name">{{ name() }}</div>
+    }
     <div class="cb-folder-card__meta">
       @if (files() !== '') {
         <span>{{ files() }} {{ (filesLabel() ?? t().files) }}</span>
@@ -51,18 +129,50 @@ class CbFolderCard {
         <span>{{ size() }}</span>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;padding:1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 14px);background:var(--cb-color-surface);font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-folder-card__top{display:flex;align-items:flex-start;justify-content:space-between}.cb-folder-card__icon{color:#f5b301}.cb-folder-card__actions{color:var(--cb-color-text-muted);line-height:1}.cb-folder-card__name{margin:.75rem 0 .25rem;font-weight:600;font-size:.95rem}.cb-folder-card__meta{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;color:var(--cb-color-text-muted)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{position:relative;display:block;padding:1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 14px);background:var(--cb-color-surface);font-family:var(--cb-font-sans);color:var(--cb-color-text)}:host(.cb-folder-card--clickable){cursor:pointer;transition:background-color .15s ease}:host(.cb-folder-card--clickable:hover){background:var(--cb-color-surface-hover)}:host(.cb-folder-card--clickable:has(.cb-folder-card__open:focus-visible)){outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-folder-card__top{display:flex;align-items:flex-start;justify-content:space-between}.cb-folder-card__icon{color:#f5b301}.cb-folder-card__actions{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.25rem;color:var(--cb-color-text-muted);line-height:1}.cb-folder-card__menu-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:-.375rem -.5rem 0 0;padding:0;border:0;border-radius:var(--cb-radius-md, 8px);background:transparent;color:inherit;cursor:pointer}.cb-folder-card__menu-button:hover,.cb-folder-card__menu-button[aria-expanded=true]{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-folder-card__menu-button:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-folder-card__name{display:block;margin:.75rem 0 .25rem;font-weight:600;font-size:.95rem}.cb-folder-card__open{width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;font-size:.95rem;text-align:start;cursor:pointer}.cb-folder-card__open:focus-visible{outline:none}.cb-folder-card__open:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.cb-folder-card__meta{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;color:var(--cb-color-text-muted)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbMenu, selector: "cb-menu", inputs: ["items", "ariaLabel"], outputs: ["itemSelect", "hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFolderCard, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-folder-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-folder-card' }, template: `
+            args: [{ selector: 'cb-folder-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon, CbMenu], host: {
+                        class: 'cb-folder-card',
+                        '[class.cb-folder-card--clickable]': 'clickable()',
+                    }, template: `
     <div class="cb-folder-card__top">
       <cb-icon name="folder" [size]="30" class="cb-folder-card__icon" [style.color]="color() || null" aria-hidden="true" />
       <span class="cb-folder-card__actions">
         <ng-content select="[cb-folder-actions]" />
+        @if (actions().length) {
+          <button
+            #trigger
+            type="button"
+            class="cb-folder-card__menu-button"
+            [attr.aria-label]="menuLabel()"
+            aria-haspopup="menu"
+            [attr.aria-expanded]="menuOpen()"
+            (click)="toggleMenu()"
+            (keydown.arrowdown)="openFromKeyboard($event)"
+          >
+            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
+              <circle cx="12" cy="5" r="2" />
+              <circle cx="12" cy="12" r="2" />
+              <circle cx="12" cy="19" r="2" />
+            </svg>
+          </button>
+          <cb-menu
+            #menu
+            [items]="actions()"
+            [ariaLabel]="menuLabel()"
+            (itemSelect)="actionSelect.emit($event)"
+            (hidden)="menuOpen.set(false)"
+          />
+        }
       </span>
     </div>
-    <div class="cb-folder-card__name">{{ name() }}</div>
+    @if (clickable()) {
+      <button type="button" class="cb-folder-card__name cb-folder-card__open" (click)="open.emit($event)">{{ name() }}</button>
+    } @else {
+      <div class="cb-folder-card__name">{{ name() }}</div>
+    }
     <div class="cb-folder-card__meta">
       @if (files() !== '') {
         <span>{{ files() }} {{ (filesLabel() ?? t().files) }}</span>
@@ -71,8 +181,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <span>{{ size() }}</span>
       }
     </div>
-  `, styles: [":host{display:block;padding:1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 14px);background:var(--cb-color-surface);font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-folder-card__top{display:flex;align-items:flex-start;justify-content:space-between}.cb-folder-card__icon{color:#f5b301}.cb-folder-card__actions{color:var(--cb-color-text-muted);line-height:1}.cb-folder-card__name{margin:.75rem 0 .25rem;font-weight:600;font-size:.95rem}.cb-folder-card__meta{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;color:var(--cb-color-text-muted)}\n"] }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], filesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filesLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+  `, styles: [":host{position:relative;display:block;padding:1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 14px);background:var(--cb-color-surface);font-family:var(--cb-font-sans);color:var(--cb-color-text)}:host(.cb-folder-card--clickable){cursor:pointer;transition:background-color .15s ease}:host(.cb-folder-card--clickable:hover){background:var(--cb-color-surface-hover)}:host(.cb-folder-card--clickable:has(.cb-folder-card__open:focus-visible)){outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-folder-card__top{display:flex;align-items:flex-start;justify-content:space-between}.cb-folder-card__icon{color:#f5b301}.cb-folder-card__actions{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.25rem;color:var(--cb-color-text-muted);line-height:1}.cb-folder-card__menu-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:-.375rem -.5rem 0 0;padding:0;border:0;border-radius:var(--cb-radius-md, 8px);background:transparent;color:inherit;cursor:pointer}.cb-folder-card__menu-button:hover,.cb-folder-card__menu-button[aria-expanded=true]{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-folder-card__menu-button:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-folder-card__name{display:block;margin:.75rem 0 .25rem;font-weight:600;font-size:.95rem}.cb-folder-card__open{width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;font-size:.95rem;text-align:start;cursor:pointer}.cb-folder-card__open:focus-visible{outline:none}.cb-folder-card__open:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.cb-folder-card__meta{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;color:var(--cb-color-text-muted)}\n"] }]
+        }], propDecorators: { menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], filesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filesLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], actionsAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsAriaLabel", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], actionSelect: [{ type: i0.Output, args: ["actionSelect"] }], open: [{ type: i0.Output, args: ["open"] }] } });
 
 /*
  * Public API Surface de @caribeng/ui/folder-card

package/fesm2022/caribeng-ui-inlinemessage.mjs

@@ -26,7 +26,7 @@ class CbInlineMessage {
         ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbInlineMessage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbInlineMessage, isStandalone: true, selector: "cb-inline-message", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert" }, properties: { "class.cb-inline-message--info": "severity() === \"info\"", "class.cb-inline-message--success": "severity() === \"success\"", "class.cb-inline-message--warn": "severity() === \"warn\"", "class.cb-inline-message--danger": "severity() === \"danger\"" }, classAttribute: "cb-inline-message" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbInlineMessage, isStandalone: true, selector: "cb-inline-message", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "severity() === \"danger\" || severity() === \"warn\" ? \"alert\" : \"status\"", "class.cb-inline-message--info": "severity() === \"info\"", "class.cb-inline-message--success": "severity() === \"success\"", "class.cb-inline-message--warn": "severity() === \"warn\"", "class.cb-inline-message--danger": "severity() === \"danger\"" }, classAttribute: "cb-inline-message" }, ngImport: i0, template: `
     <cb-icon [name]="iconName()" [size]="15" aria-hidden="true" />
     <span class="cb-inline-message__text">{{ text() }}<ng-content /></span>
   `, isInline: true, styles: [":host{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:var(--cb-radius-md);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);font-weight:var(--cb-font-medium)}:host(.cb-inline-message--info){background:color-mix(in srgb,var(--cb-color-info-500) 14%,transparent);color:var(--cb-color-info-500)}:host(.cb-inline-message--success){background:color-mix(in srgb,var(--cb-color-success-500) 14%,transparent);color:var(--cb-color-success-500)}:host(.cb-inline-message--warn){background:color-mix(in srgb,var(--cb-color-warning-500) 14%,transparent);color:var(--cb-color-warning-500)}:host(.cb-inline-message--danger){background:color-mix(in srgb,var(--cb-color-danger-500) 14%,transparent);color:var(--cb-color-danger-500)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -35,7 +35,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type: Component,
             args: [{ selector: 'cb-inline-message', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: {
                         class: 'cb-inline-message',
-                        role: 'alert',
+                        '[attr.role]': 'severity() === "danger" || severity() === "warn" ? "alert" : "status"',
                         '[class.cb-inline-message--info]': 'severity() === "info"',
                         '[class.cb-inline-message--success]': 'severity() === "success"',
                         '[class.cb-inline-message--warn]': 'severity() === "warn"',