@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-command-palette.mjs

@@ -0,0 +1,476 @@
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ViewContainerRef, Injector, viewChild, input, model, booleanAttribute, output, computed, signal, effect, untracked, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
+import { CbIcon } from '@caribeng/ui/icon';
+import { CbKbd } from '@caribeng/ui/kbd';
+
+/** Minúsculas y sin tildes, carácter a carácter (conserva las posiciones). */
+function cbCommandNormalize(text) {
+    let out = '';
+    for (const ch of text)
+        out += ch.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase().charAt(0) || ch;
+    return out;
+}
+function isSubsequence(needle, haystack) {
+    let i = 0;
+    for (const ch of haystack)
+        if (ch === needle[i] && ++i === needle.length)
+            return true;
+    return needle.length === 0;
+}
+/**
+ * Relevancia de `item` para `query` (0 = no coincide). Prioriza el label que
+ * empieza por la búsqueda, luego el inicio de una palabra, el texto contenido,
+ * los sinónimos y la descripción, y por último las letras en orden ("cfg" → "Configuración").
+ */
+function cbCommandScore(item, query) {
+    const q = cbCommandNormalize(query.trim());
+    if (!q)
+        return 1;
+    const label = cbCommandNormalize(item.label);
+    if (label.startsWith(q))
+        return 100;
+    if (label.split(/[\s\-_/.]+/).some((word) => word.startsWith(q)))
+        return 80;
+    if (label.includes(q))
+        return 60;
+    const keywords = (item.keywords ?? []).map(cbCommandNormalize);
+    if (keywords.some((k) => k.startsWith(q)))
+        return 50;
+    if (keywords.some((k) => k.includes(q)))
+        return 40;
+    if (cbCommandNormalize(item.description ?? '').includes(q) || cbCommandNormalize(item.group ?? '').includes(q))
+        return 30;
+    if (q.length > 1 && isSubsequence(q, label.replace(/\s+/g, '')))
+        return 10;
+    return 0;
+}
+/**
+ * Filtra, ordena y agrupa los items. Sin búsqueda conserva el orden original;
+ * con búsqueda ordena por relevancia y los grupos siguen a su mejor resultado.
+ */
+function cbCommandFilter(items, query, filter = true) {
+    const ranked = items
+        .map((item, index) => ({ item, index, score: filter ? cbCommandScore(item, query) : 1 }))
+        .filter((entry) => entry.score > 0);
+    if (filter && query.trim())
+        ranked.sort((a, b) => b.score - a.score || a.index - b.index);
+    const groups = new Map();
+    for (const { item } of ranked) {
+        const key = item.group ?? '';
+        if (!groups.has(key))
+            groups.set(key, []);
+        groups.get(key).push(item);
+    }
+    return [...groups].map(([label, groupItems]) => ({ label, items: groupItems }));
+}
+/** Partes del label para resaltar la coincidencia contigua con la búsqueda. */
+function cbCommandHighlight(label, query) {
+    const q = cbCommandNormalize(query.trim());
+    const start = q ? cbCommandNormalize(label).indexOf(q) : -1;
+    if (start < 0)
+        return [{ text: label, match: false }];
+    const chars = [...label];
+    const parts = [
+        { text: chars.slice(0, start).join(''), match: false },
+        { text: chars.slice(start, start + [...q].length).join(''), match: true },
+        { text: chars.slice(start + [...q].length).join(''), match: false },
+    ];
+    return parts.filter((p) => p.text);
+}
+
+let nextUid = 0;
+/** Combinación de teclas en texto (`mod+k`, `ctrl+shift+p`, `/`). `mod` acepta ⌘ y Ctrl. */
+function matchesShortcut(event, shortcut) {
+    const parts = shortcut.toLowerCase().split('+').map((p) => p.trim()).filter(Boolean);
+    const key = parts.pop();
+    if (!key || event.key.toLowerCase() !== key)
+        return false;
+    const wants = new Set(parts);
+    if (wants.has('mod')) {
+        if (!event.metaKey && !event.ctrlKey)
+            return false;
+    }
+    else if (event.ctrlKey !== wants.has('ctrl') || event.metaKey !== wants.has('meta')) {
+        return false;
+    }
+    return event.shiftKey === wants.has('shift') && event.altKey === wants.has('alt');
+}
+/** Si el foco está en un campo de texto (para no robar atajos sin modificador como `/`). */
+function isTyping(target) {
+    const el = target;
+    return !!el && (el.isContentEditable || /^(input|textarea|select)$/i.test(el.tagName));
+}
+/**
+ * Paleta de comandos de CaribeNG (Ctrl/⌘ + K): buscador global de páginas y
+ * acciones con teclado. Filtra sin tildes ni mayúsculas, agrupa, resalta la
+ * coincidencia y muestra atajos con `cb-kbd`.
+ *
+ * Accesibilidad: diálogo modal con un combobox (`aria-activedescendant`) que
+ * controla una lista de opciones; el foco no sale del campo y vuelve al
+ * elemento anterior al cerrar.
+ *
+ * @example
+ * ```html
+ * <cb-command-palette [items]="comandos" (itemSelect)="ir($event.item)" />
+ * ```
+ */
+class CbCommandPalette {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.overlay = inject(Overlay);
+        this.vcr = inject(ViewContainerRef);
+        this.document = inject(DOCUMENT);
+        this.injector = inject(Injector);
+        this.tpl = viewChild.required('tpl');
+        this.inputEl = viewChild('input', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+        this.overlayRef = null;
+        this.previouslyFocused = null;
+        this.listId = `cb-command-${++nextUid}`;
+        /** Páginas y acciones. */
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Abierta o cerrada. */
+        this.visible = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        /** Texto buscado (bidireccional, para búsquedas en servidor). */
+        this.query = model('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+        /** Atajo global que abre o cierra la paleta. `''` lo desactiva. */
+        this.shortcut = input('mod+k', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []));
+        this.placeholder = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** Mensaje sin resultados. Por defecto, "Sin resultados". */
+        this.emptyMessage = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        /** Nombre del diálogo. Por defecto, "Paleta de comandos". */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Filtra `items` con la búsqueda. Desactívalo si los resultados llegan ya filtrados (servidor). */
+        this.filter = input(true, { ...(ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Muestra "Cargando" mientras no hay resultados. */
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Cierra la paleta al elegir un item. */
+        this.closeOnSelect = input(true, { ...(ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Item elegido (con clic o Enter). */
+        this.itemSelect = output();
+        this.label = computed(() => this.ariaLabel() ?? this.t().commandPalette, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.groups = computed(() => cbCommandFilter(this.items(), this.query(), this.filter()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+        /** Resultados en el orden en que se muestran (para el teclado). */
+        this.flat = computed(() => this.groups().flatMap((g) => g.items), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "flat" }] : /* istanbul ignore next */ []));
+        this.enabled = computed(() => this.flat().filter((item) => !item.disabled), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+        this.activeItem = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeItem" }] : /* istanbul ignore next */ []));
+        this.activeOptionId = computed(() => {
+            const item = this.activeItem();
+            return item ? this.optionId(item) : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
+        this.announcement = computed(() => this.query().trim() && !this.loading() ? cbFormat(this.t().commandResults, String(this.flat().length)) : '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const open = this.visible();
+            untracked(() => {
+                if (open && !this.overlayRef)
+                    this.attach();
+                else if (!open && this.overlayRef)
+                    this.detach();
+            });
+        });
+        // Al cambiar los resultados, el activo pasa al primero disponible.
+        effect(() => {
+            const enabled = this.enabled();
+            untracked(() => {
+                const current = this.activeItem();
+                if (!current || !enabled.includes(current))
+                    this.activeItem.set(enabled[0] ?? null);
+            });
+        });
+    }
+    open() {
+        this.visible.set(true);
+    }
+    close() {
+        this.visible.set(false);
+    }
+    toggle() {
+        this.visible.update((v) => !v);
+    }
+    optionId(item) {
+        return `${this.listId}-o${this.flat().indexOf(item)}`;
+    }
+    highlight(item) {
+        return this.filter() ? cbCommandHighlight(item.label, this.query()) : [{ text: item.label, match: false }];
+    }
+    onDocumentKeydown(event) {
+        const shortcut = this.shortcut();
+        if (!shortcut || !matchesShortcut(event, shortcut))
+            return;
+        // Un atajo sin modificador (p. ej. "/") no se roba mientras se escribe en otro campo.
+        const hasModifier = /(^|\+)(mod|ctrl|meta|alt)\+/i.test(shortcut);
+        if (!hasModifier && !this.visible() && isTyping(event.target))
+            return;
+        event.preventDefault();
+        this.toggle();
+    }
+    onInput(event) {
+        this.query.set(event.target.value);
+    }
+    hover(item) {
+        if (!item.disabled && this.activeItem() !== item)
+            this.activeItem.set(item);
+    }
+    onKeydown(event) {
+        const enabled = this.enabled();
+        const index = enabled.indexOf(this.activeItem());
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                event.preventDefault();
+                if (!enabled.length)
+                    return;
+                const step = event.key === 'ArrowDown' ? 1 : -1;
+                this.setActive(enabled[(index + step + enabled.length) % enabled.length]);
+                break;
+            }
+            case 'Home':
+            case 'End':
+                if (!event.ctrlKey && !event.metaKey)
+                    return;
+                event.preventDefault();
+                this.setActive(event.key === 'Home' ? enabled[0] : enabled[enabled.length - 1]);
+                break;
+            case 'Enter': {
+                event.preventDefault();
+                const item = this.activeItem();
+                if (item)
+                    this.select(item, event);
+                break;
+            }
+            case 'Tab':
+                // El foco se queda en el campo: la lista se recorre con las flechas.
+                event.preventDefault();
+                break;
+        }
+    }
+    /** Elige un item: ejecuta su `command`, emite `itemSelect` y cierra (según `closeOnSelect`). */
+    select(item, originalEvent) {
+        if (item.disabled)
+            return;
+        const event = { item, query: this.query(), originalEvent };
+        if (this.closeOnSelect())
+            this.close();
+        item.command?.(event);
+        this.itemSelect.emit(event);
+    }
+    setActive(item) {
+        if (!item)
+            return;
+        this.activeItem.set(item);
+        afterNextRender(() => {
+            this.document.getElementById(this.optionId(item))?.scrollIntoView?.({ block: 'nearest' });
+        }, { injector: this.injector });
+    }
+    attach() {
+        this.previouslyFocused = this.document.activeElement;
+        this.query.set('');
+        this.overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            backdropClass: 'cb-dialog-backdrop',
+            panelClass: 'cb-command-pane',
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            positionStrategy: this.overlay.position().global().centerHorizontally().top('12vh'),
+        });
+        this.overlayRef.attach(new TemplatePortal(this.tpl(), this.vcr));
+        this.overlayRef.backdropClick().subscribe(() => this.close());
+        this.overlayRef.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.close();
+            }
+        });
+        this.activeItem.set(this.enabled()[0] ?? null);
+        afterNextRender(() => this.inputEl()?.nativeElement.focus(), { injector: this.injector });
+    }
+    detach() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        const target = this.previouslyFocused;
+        this.previouslyFocused = null;
+        if (target?.isConnected)
+            target.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCommandPalette, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCommandPalette, isStandalone: true, selector: "cb-command-palette", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", query: "queryChange", itemSelect: "itemSelect" }, host: { listeners: { "document:keydown": "onDocumentKeydown($event)" }, classAttribute: "cb-command-palette" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #tpl>
+      <div class="cb-command" role="dialog" aria-modal="true" [attr.aria-label]="label()">
+        <div class="cb-command__search">
+          <cb-icon name="search" [size]="18" class="cb-command__search-icon" aria-hidden="true" />
+          <input
+            #input
+            class="cb-command__input"
+            type="text"
+            role="combobox"
+            aria-autocomplete="list"
+            aria-expanded="true"
+            autocomplete="off"
+            spellcheck="false"
+            [attr.aria-controls]="listId"
+            [attr.aria-activedescendant]="activeOptionId()"
+            [attr.aria-label]="label()"
+            [placeholder]="placeholder() ?? t().commandPlaceholder"
+            [value]="query()"
+            (input)="onInput($event)"
+            (keydown)="onKeydown($event)"
+          />
+        </div>
+
+        <div class="cb-command__list" role="listbox" [id]="listId" [attr.aria-label]="label()">
+          @for (group of groups(); track group.label; let g = $index) {
+            <div role="group" [attr.aria-labelledby]="group.label ? listId + '-g' + g : null">
+              @if (group.label) {
+                <div class="cb-command__group" [id]="listId + '-g' + g" aria-hidden="true">{{ group.label }}</div>
+              }
+              @for (item of group.items; track item.id ?? item.label) {
+                <div
+                  class="cb-command__option"
+                  role="option"
+                  [id]="optionId(item)"
+                  [class.cb-command__option--active]="item === activeItem()"
+                  [attr.aria-selected]="item === activeItem()"
+                  [attr.aria-disabled]="item.disabled ? 'true' : null"
+                  (mousemove)="hover(item)"
+                  (mousedown)="$event.preventDefault()"
+                  (click)="select(item, $event)"
+                >
+                  @if (item.icon) {
+                    <cb-icon class="cb-command__icon" [name]="item.icon" [size]="18" aria-hidden="true" />
+                  }
+                  <span class="cb-command__text">
+                    <!-- En una línea: los saltos de línea añadirían espacios dentro de la palabra resaltada. -->
+                    <span class="cb-command__label">@for (part of highlight(item); track $index) {@if (part.match) {<mark class="cb-command__match">{{ part.text }}</mark>} @else {<span>{{ part.text }}</span>}}</span>
+                    @if (item.description) {
+                      <span class="cb-command__description">{{ item.description }}</span>
+                    }
+                  </span>
+                  @if (item.shortcut?.length) {
+                    <cb-kbd class="cb-command__shortcut" [keys]="item.shortcut!" size="sm" aria-hidden="true" />
+                  }
+                </div>
+              }
+            </div>
+          }
+          @if (!flat().length) {
+            <div class="cb-command__empty">{{ loading() ? t().loading : (emptyMessage() ?? t().noResults) }}</div>
+          }
+        </div>
+
+        <div class="cb-command__footer" aria-hidden="true">
+          <span><cb-kbd [keys]="['up', 'down']" size="sm" /> {{ t().commandNavigate }}</span>
+          <span><cb-kbd [keys]="['enter']" size="sm" /> {{ t().commandSelect }}</span>
+          <span><cb-kbd size="sm">Esc</cb-kbd> {{ t().close }}</span>
+        </div>
+        <div class="cb-command__status" role="status">{{ announcement() }}</div>
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:contents}.cb-command{display:flex;flex-direction:column;width:min(40rem,calc(100vw - 2rem));max-height:min(32rem,76vh);overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 12px);background:var(--cb-color-surface-raised);box-shadow:var(--cb-shadow-lg);color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-command__search{display:flex;align-items:center;gap:.625rem;padding:0 1rem;border-bottom:1px solid var(--cb-color-border)}.cb-command__search-icon{flex:none;color:var(--cb-color-text-muted)}.cb-command__input{flex:1;min-width:0;height:3.25rem;padding:0;border:0;outline:none;background:transparent;color:inherit;font:inherit;font-size:var(--cb-text-base, 1rem)}.cb-command__input::placeholder{color:var(--cb-color-text-muted)}.cb-command__list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:.375rem}.cb-command__group{padding:.625rem .625rem .25rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-command__option{display:flex;align-items:center;gap:.75rem;min-height:2.5rem;padding:.375rem .625rem;border-radius:var(--cb-radius-md, 8px);cursor:pointer;-webkit-user-select:none;user-select:none}.cb-command__option--active{background:var(--cb-color-surface-hover);color:var(--cb-color-text-strong);outline:2px solid transparent;box-shadow:inset 3px 0 0 var(--cb-color-primary)}.cb-command__option[aria-disabled=true]{cursor:not-allowed;opacity:.5}.cb-command__icon{flex:none;color:var(--cb-color-text-muted)}.cb-command__text{display:flex;flex:1;flex-direction:column;min-width:0}.cb-command__label,.cb-command__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-command__description{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-command__match{background:transparent;color:var(--cb-color-primary-text);font-weight:var(--cb-font-weight-semibold, 600)}.cb-command__shortcut{flex:none}.cb-command__empty{padding:2rem 1rem;color:var(--cb-color-text-muted);text-align:center}.cb-command__footer{display:flex;flex-wrap:wrap;gap:1rem;padding:.5rem 1rem;border-top:1px solid var(--cb-color-border);color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-command__footer span{display:inline-flex;align-items:center;gap:.375rem}.cb-command__status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-width:480px){.cb-command__footer{display:none}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbKbd, selector: "cb-kbd", inputs: ["keys", "platform", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCommandPalette, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-command-palette', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon, CbKbd], host: {
+                        class: 'cb-command-palette',
+                        '(document:keydown)': 'onDocumentKeydown($event)',
+                    }, template: `
+    <ng-template #tpl>
+      <div class="cb-command" role="dialog" aria-modal="true" [attr.aria-label]="label()">
+        <div class="cb-command__search">
+          <cb-icon name="search" [size]="18" class="cb-command__search-icon" aria-hidden="true" />
+          <input
+            #input
+            class="cb-command__input"
+            type="text"
+            role="combobox"
+            aria-autocomplete="list"
+            aria-expanded="true"
+            autocomplete="off"
+            spellcheck="false"
+            [attr.aria-controls]="listId"
+            [attr.aria-activedescendant]="activeOptionId()"
+            [attr.aria-label]="label()"
+            [placeholder]="placeholder() ?? t().commandPlaceholder"
+            [value]="query()"
+            (input)="onInput($event)"
+            (keydown)="onKeydown($event)"
+          />
+        </div>
+
+        <div class="cb-command__list" role="listbox" [id]="listId" [attr.aria-label]="label()">
+          @for (group of groups(); track group.label; let g = $index) {
+            <div role="group" [attr.aria-labelledby]="group.label ? listId + '-g' + g : null">
+              @if (group.label) {
+                <div class="cb-command__group" [id]="listId + '-g' + g" aria-hidden="true">{{ group.label }}</div>
+              }
+              @for (item of group.items; track item.id ?? item.label) {
+                <div
+                  class="cb-command__option"
+                  role="option"
+                  [id]="optionId(item)"
+                  [class.cb-command__option--active]="item === activeItem()"
+                  [attr.aria-selected]="item === activeItem()"
+                  [attr.aria-disabled]="item.disabled ? 'true' : null"
+                  (mousemove)="hover(item)"
+                  (mousedown)="$event.preventDefault()"
+                  (click)="select(item, $event)"
+                >
+                  @if (item.icon) {
+                    <cb-icon class="cb-command__icon" [name]="item.icon" [size]="18" aria-hidden="true" />
+                  }
+                  <span class="cb-command__text">
+                    <!-- En una línea: los saltos de línea añadirían espacios dentro de la palabra resaltada. -->
+                    <span class="cb-command__label">@for (part of highlight(item); track $index) {@if (part.match) {<mark class="cb-command__match">{{ part.text }}</mark>} @else {<span>{{ part.text }}</span>}}</span>
+                    @if (item.description) {
+                      <span class="cb-command__description">{{ item.description }}</span>
+                    }
+                  </span>
+                  @if (item.shortcut?.length) {
+                    <cb-kbd class="cb-command__shortcut" [keys]="item.shortcut!" size="sm" aria-hidden="true" />
+                  }
+                </div>
+              }
+            </div>
+          }
+          @if (!flat().length) {
+            <div class="cb-command__empty">{{ loading() ? t().loading : (emptyMessage() ?? t().noResults) }}</div>
+          }
+        </div>
+
+        <div class="cb-command__footer" aria-hidden="true">
+          <span><cb-kbd [keys]="['up', 'down']" size="sm" /> {{ t().commandNavigate }}</span>
+          <span><cb-kbd [keys]="['enter']" size="sm" /> {{ t().commandSelect }}</span>
+          <span><cb-kbd size="sm">Esc</cb-kbd> {{ t().close }}</span>
+        </div>
+        <div class="cb-command__status" role="status">{{ announcement() }}</div>
+      </div>
+    </ng-template>
+  `, styles: [":host{display:contents}.cb-command{display:flex;flex-direction:column;width:min(40rem,calc(100vw - 2rem));max-height:min(32rem,76vh);overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 12px);background:var(--cb-color-surface-raised);box-shadow:var(--cb-shadow-lg);color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-command__search{display:flex;align-items:center;gap:.625rem;padding:0 1rem;border-bottom:1px solid var(--cb-color-border)}.cb-command__search-icon{flex:none;color:var(--cb-color-text-muted)}.cb-command__input{flex:1;min-width:0;height:3.25rem;padding:0;border:0;outline:none;background:transparent;color:inherit;font:inherit;font-size:var(--cb-text-base, 1rem)}.cb-command__input::placeholder{color:var(--cb-color-text-muted)}.cb-command__list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:.375rem}.cb-command__group{padding:.625rem .625rem .25rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-command__option{display:flex;align-items:center;gap:.75rem;min-height:2.5rem;padding:.375rem .625rem;border-radius:var(--cb-radius-md, 8px);cursor:pointer;-webkit-user-select:none;user-select:none}.cb-command__option--active{background:var(--cb-color-surface-hover);color:var(--cb-color-text-strong);outline:2px solid transparent;box-shadow:inset 3px 0 0 var(--cb-color-primary)}.cb-command__option[aria-disabled=true]{cursor:not-allowed;opacity:.5}.cb-command__icon{flex:none;color:var(--cb-color-text-muted)}.cb-command__text{display:flex;flex:1;flex-direction:column;min-width:0}.cb-command__label,.cb-command__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-command__description{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-command__match{background:transparent;color:var(--cb-color-primary-text);font-weight:var(--cb-font-weight-semibold, 600)}.cb-command__shortcut{flex:none}.cb-command__empty{padding:2rem 1rem;color:var(--cb-color-text-muted);text-align:center}.cb-command__footer{display:flex;flex-wrap:wrap;gap:1rem;padding:.5rem 1rem;border-top:1px solid var(--cb-color-border);color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-command__footer span{display:inline-flex;align-items:center;gap:.375rem}.cb-command__status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-width:480px){.cb-command__footer{display:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/command-palette
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbCommandPalette, cbCommandFilter, cbCommandHighlight, cbCommandNormalize, cbCommandScore };