@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-folder-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 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 */ []));
@@ -22,7 +34,7 @@ class CbFolderCard {
         this.files = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
         /** Etiqueta tras el número de archivos. */
-        this.filesLabel = input('archivos', /* @ts-ignore */
+        this.filesLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filesLabel" }] : /* istanbul ignore next */ []));
         /** Tamaño mostrado a la derecha. */
         this.size = input('', /* @ts-ignore */
@@ -30,42 +42,147 @@ 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">
-      <span>{{ files() }} {{ filesLabel() }}</span>
+      @if (files() !== '') {
+        <span>{{ files() }} {{ (filesLabel() ?? t().files) }}</span>
+      }
       @if (size()) {
         <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">
-      <span>{{ files() }} {{ filesLabel() }}</span>
+      @if (files() !== '') {
+        <span>{{ files() }} {{ (filesLabel() ?? t().files) }}</span>
+      }
       @if (size()) {
         <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-galleria.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';
 
 /**
  * Galleria de CaribeNG: galería de imágenes con visor principal, leyenda y
@@ -8,6 +9,10 @@ import { CbIcon } from '@caribeng/ui/icon';
  */
 class CbGalleria {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** Rellena `{0}`, `{1}`… de un texto traducido. */
+        this.fmt = cbFormat;
         this.value = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.showThumbnails = input(true, /* @ts-ignore */
@@ -16,6 +21,7 @@ class CbGalleria {
         ...(ngDevMode ? [{ debugName: "circular" }] : /* istanbul ignore next */ []));
         this.activeIndex = model(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef);
         this.activeItem = computed(() => this.value()[this.activeIndex()] ?? this.value()[0] ?? null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeItem" }] : /* istanbul ignore next */ []));
     }
@@ -39,31 +45,52 @@ class CbGalleria {
         else if (this.circular())
             this.activeIndex.set(0);
     }
+    /** Miniaturas (patrón *tabs*): flechas, Inicio y Fin cambian de imagen y mueven el foco. */
+    onThumbKeydown(event) {
+        const last = this.value().length - 1;
+        const cur = this.activeIndex();
+        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.activeIndex.set(target);
+        this.host.nativeElement.querySelectorAll('.cb-galleria__thumb')[target]?.focus();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbGalleria, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbGalleria, isStandalone: true, selector: "cb-galleria", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showThumbnails: { classPropertyName: "showThumbnails", publicName: "showThumbnails", isSignal: true, isRequired: false, transformFunction: null }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, host: { classAttribute: "cb-galleria" }, ngImport: i0, template: `
     @if (activeItem(); as current) {
       <div class="cb-galleria__stage">
-        <button
-          type="button"
-          class="cb-galleria__nav cb-galleria__nav--prev"
-          aria-label="Imagen anterior"
-          (click)="prev()"
-        >
-          <cb-icon name="chevron-left" [size]="18" aria-hidden="true" />
-        </button>
+        @if (value().length > 1) {
+          <button
+            type="button"
+            class="cb-galleria__nav cb-galleria__nav--prev"
+            [attr.aria-label]="t().previousImage"
+            [disabled]="!circular() && activeIndex() === 0"
+            (click)="prev()"
+          >
+            <cb-icon name="chevron-left" [size]="18" aria-hidden="true" />
+          </button>
+        }
         <img
           class="cb-galleria__main-img"
           [src]="current.itemImageSrc"
           [alt]="current.alt || current.title || ''"
         />
-        <button
-          type="button"
-          class="cb-galleria__nav cb-galleria__nav--next"
-          aria-label="Imagen siguiente"
-          (click)="next()"
-        >
-          <cb-icon name="chevron-right" [size]="18" aria-hidden="true" />
-        </button>
+        @if (value().length > 1) {
+          <button
+            type="button"
+            class="cb-galleria__nav cb-galleria__nav--next"
+            [attr.aria-label]="t().nextImage"
+            [disabled]="!circular() && activeIndex() === value().length - 1"
+            (click)="next()"
+          >
+            <cb-icon name="chevron-right" [size]="18" aria-hidden="true" />
+          </button>
+        }
         @if (current.title) {
           <div class="cb-galleria__caption">{{ current.title }}</div>
         }
@@ -71,20 +98,19 @@ class CbGalleria {
     }
     @if (showThumbnails() && value().length > 1) {
       <div class="cb-galleria__thumbs" role="tablist">
-        @for (item of value(); track item.itemImageSrc; let idx = $index) {
+        @for (item of value(); track $index; let idx = $index) {
           <button
             type="button"
             class="cb-galleria__thumb"
             role="tab"
             [class.cb-is-active]="activeIndex() === idx"
             [attr.aria-selected]="activeIndex() === idx"
-            [attr.aria-label]="item.title || ('Miniatura ' + (idx + 1))"
+            [attr.tabindex]="activeIndex() === idx ? 0 : -1"
+            [attr.aria-label]="item.title || item.alt || fmt(t().thumbnail, idx + 1)"
             (click)="activeIndex.set(idx)"
+            (keydown)="onThumbKeydown($event)"
           >
-            <img
-              [src]="item.thumbnailImageSrc || item.itemImageSrc"
-              [alt]="item.alt || item.title || ''"
-            />
+            <img [src]="item.thumbnailImageSrc || item.itemImageSrc" alt="" />
           </button>
         }
       </div>
@@ -96,27 +122,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'cb-galleria', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-galleria' }, template: `
     @if (activeItem(); as current) {
       <div class="cb-galleria__stage">
-        <button
-          type="button"
-          class="cb-galleria__nav cb-galleria__nav--prev"
-          aria-label="Imagen anterior"
-          (click)="prev()"
-        >
-          <cb-icon name="chevron-left" [size]="18" aria-hidden="true" />
-        </button>
+        @if (value().length > 1) {
+          <button
+            type="button"
+            class="cb-galleria__nav cb-galleria__nav--prev"
+            [attr.aria-label]="t().previousImage"
+            [disabled]="!circular() && activeIndex() === 0"
+            (click)="prev()"
+          >
+            <cb-icon name="chevron-left" [size]="18" aria-hidden="true" />
+          </button>
+        }
         <img
           class="cb-galleria__main-img"
           [src]="current.itemImageSrc"
           [alt]="current.alt || current.title || ''"
         />
-        <button
-          type="button"
-          class="cb-galleria__nav cb-galleria__nav--next"
-          aria-label="Imagen siguiente"
-          (click)="next()"
-        >
-          <cb-icon name="chevron-right" [size]="18" aria-hidden="true" />
-        </button>
+        @if (value().length > 1) {
+          <button
+            type="button"
+            class="cb-galleria__nav cb-galleria__nav--next"
+            [attr.aria-label]="t().nextImage"
+            [disabled]="!circular() && activeIndex() === value().length - 1"
+            (click)="next()"
+          >
+            <cb-icon name="chevron-right" [size]="18" aria-hidden="true" />
+          </button>
+        }
         @if (current.title) {
           <div class="cb-galleria__caption">{{ current.title }}</div>
         }
@@ -124,20 +156,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     }
     @if (showThumbnails() && value().length > 1) {
       <div class="cb-galleria__thumbs" role="tablist">
-        @for (item of value(); track item.itemImageSrc; let idx = $index) {
+        @for (item of value(); track $index; let idx = $index) {
           <button
             type="button"
             class="cb-galleria__thumb"
             role="tab"
             [class.cb-is-active]="activeIndex() === idx"
             [attr.aria-selected]="activeIndex() === idx"
-            [attr.aria-label]="item.title || ('Miniatura ' + (idx + 1))"
+            [attr.tabindex]="activeIndex() === idx ? 0 : -1"
+            [attr.aria-label]="item.title || item.alt || fmt(t().thumbnail, idx + 1)"
             (click)="activeIndex.set(idx)"
+            (keydown)="onThumbKeydown($event)"
           >
-            <img
-              [src]="item.thumbnailImageSrc || item.itemImageSrc"
-              [alt]="item.alt || item.title || ''"
-            />
+            <img [src]="item.thumbnailImageSrc || item.itemImageSrc" alt="" />
           </button>
         }
       </div>