@caribeng/ui 22.2.0 → 22.4.0

package/fesm2022/caribeng-ui-sidebar.mjs

@@ -0,0 +1,573 @@
+import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, model, booleanAttribute, output, signal, computed, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, Injector, DestroyRef, afterNextRender, forwardRef, Directive } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
+import { CbIcon } from '@caribeng/ui/icon';
+import { CbTooltipDirective } from '@caribeng/ui/tooltip';
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+
+/** Clave de un item para `active`. */
+function cbSidebarKey(item) {
+    return item.id ?? item.url ?? item.label;
+}
+const CB_APP_SHELL = new InjectionToken('CB_APP_SHELL');
+
+let nextUid$1 = 0;
+/**
+ * Menú lateral de CaribeNG: secciones con título, enlaces con icono y badge,
+ * grupos desplegables de un nivel y modo contraído a iconos (con tooltip).
+ * Dentro de `cb-app-shell` se convierte en panel deslizante en móvil.
+ *
+ * @example
+ * ```html
+ * <cb-sidebar [groups]="menu" [(active)]="seccion" [navigate]="navigate">
+ *   <img cb-sidebar-header src="logo.svg" alt="Mi banco" />
+ * </cb-sidebar>
+ * ```
+ */
+class CbSidebar {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        /** `cb-app-shell` que lo contiene, si hay. */
+        this.shell = inject(CB_APP_SHELL, { optional: true });
+        this.uid = `cb-sidebar-${++nextUid$1}`;
+        this.groups = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+        /** Clave del item activo (`id`, `url` o `label`); se marca con `aria-current="page"`. */
+        this.active = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        /** Contraído a iconos. Dentro de `cb-app-shell` lo controla el shell. */
+        this.collapsed = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+        /** Muestra el botón de contraer/expandir en el pie. */
+        this.collapsible = input(true, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Nombre de la navegación. Por defecto, "Navegación principal". */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Navegación SPA: si se indica, los enlaces internos (sin `target` ni teclas
+         * modificadoras) la llaman en lugar de recargar la página.
+         * Ej.: `navigate = (url: string) => this.router.navigateByUrl(url)`.
+         */
+        this.navigate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigate" }] : /* istanbul ignore next */ []));
+        /** Item elegido. */
+        this.itemSelect = output();
+        this.expanded = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        this.isCollapsed = computed(() => {
+            const shell = this.shell;
+            if (!shell)
+                return this.collapsed();
+            return !shell.mobile() && shell.collapsed();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+        // Abre el grupo que contiene el item activo.
+        effect(() => {
+            const active = this.active();
+            const groups = this.groups();
+            untracked(() => {
+                for (const group of groups) {
+                    for (const item of group.items) {
+                        if (item.children?.some((c) => cbSidebarKey(c) === active) && !this.expanded().has(cbSidebarKey(item))) {
+                            this.expanded.update((set) => new Set(set).add(cbSidebarKey(item)));
+                        }
+                    }
+                }
+            });
+        });
+    }
+    key(item) {
+        return cbSidebarKey(item);
+    }
+    isActive(item) {
+        return this.active() === cbSidebarKey(item);
+    }
+    hasActiveChild(item) {
+        return !!item.children?.some((c) => this.isActive(c));
+    }
+    isExpanded(item) {
+        return this.expanded().has(cbSidebarKey(item));
+    }
+    toggleGroup(item) {
+        const key = cbSidebarKey(item);
+        if (this.isCollapsed()) {
+            // Contraído no caben los hijos: se expande el sidebar y se abre el grupo.
+            this.setCollapsed(false);
+            this.expanded.update((set) => new Set(set).add(key));
+            return;
+        }
+        this.expanded.update((set) => {
+            const next = new Set(set);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    }
+    toggleCollapsed() {
+        this.setCollapsed(!this.isCollapsed());
+    }
+    setCollapsed(collapsed) {
+        if (this.shell)
+            this.shell.setCollapsed(collapsed);
+        else
+            this.collapsed.set(collapsed);
+    }
+    /** Marca el item como activo, ejecuta su `command`, emite `itemSelect` y navega. */
+    select(item, event) {
+        if (item.disabled)
+            return;
+        this.active.set(cbSidebarKey(item));
+        item.command?.({ item, originalEvent: event });
+        this.itemSelect.emit({ item, originalEvent: event });
+        const navigate = this.navigate();
+        const mouse = event;
+        const modified = mouse.ctrlKey || mouse.metaKey || mouse.shiftKey || mouse.altKey || mouse.button > 0;
+        if (navigate && item.url && !item.target && !modified && !event.defaultPrevented && !/^[a-z][a-z\d+.-]*:/i.test(item.url)) {
+            event.preventDefault();
+            navigate(item.url);
+        }
+        this.shell?.closeSidebar();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbSidebar, isStandalone: true, selector: "cb-sidebar", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, navigate: { classPropertyName: "navigate", publicName: "navigate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", collapsed: "collapsedChange", itemSelect: "itemSelect" }, host: { properties: { "class.cb-sidebar--collapsed": "isCollapsed()" }, classAttribute: "cb-sidebar" }, ngImport: i0, template: `
+    <nav class="cb-sidebar__nav" [attr.aria-label]="ariaLabel() ?? t().mainNavigation">
+      <div class="cb-sidebar__header"><ng-content select="[cb-sidebar-header]" /></div>
+
+      <div class="cb-sidebar__body">
+        @for (group of groups(); track $index; let g = $index) {
+          <div class="cb-sidebar__group">
+            @if (group.label) {
+              <div class="cb-sidebar__group-label" [id]="uid + '-g' + g">{{ group.label }}</div>
+            }
+            <ul class="cb-sidebar__list" role="list" [attr.aria-labelledby]="group.label ? uid + '-g' + g : null">
+              @for (item of group.items; track key(item)) {
+                <li>
+                  @if (item.children?.length) {
+                    <button
+                      type="button"
+                      class="cb-sidebar__item"
+                      [class.cb-sidebar__item--has-active]="hasActiveChild(item)"
+                      [disabled]="item.disabled"
+                      [attr.aria-expanded]="isCollapsed() ? null : isExpanded(item)"
+                      [attr.aria-controls]="isCollapsed() ? null : uid + '-' + key(item)"
+                      [cbTooltip]="item.label"
+                      cbTooltipPosition="right"
+                      [cbTooltipDisabled]="!isCollapsed()"
+                      (click)="toggleGroup(item)"
+                    >
+                      <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+                      <cb-icon class="cb-sidebar__chevron" name="chevron-down" [size]="16" aria-hidden="true" />
+                    </button>
+                    @if (isExpanded(item) && !isCollapsed()) {
+                      <ul class="cb-sidebar__sublist" role="list" [id]="uid + '-' + key(item)">
+                        @for (child of item.children; track key(child)) {
+                          <li>
+                            <ng-container *ngTemplateOutlet="leaf; context: { $implicit: child }" />
+                          </li>
+                        }
+                      </ul>
+                    }
+                  } @else {
+                    <ng-container *ngTemplateOutlet="leaf; context: { $implicit: item }" />
+                  }
+                </li>
+              }
+            </ul>
+          </div>
+        }
+      </div>
+
+      <div class="cb-sidebar__footer">
+        <ng-content select="[cb-sidebar-footer]" />
+        @if (collapsible() && !shell?.mobile()) {
+          <button
+            type="button"
+            class="cb-sidebar__collapse"
+            [attr.aria-label]="isCollapsed() ? t().expandSidebar : t().collapseSidebar"
+            [attr.aria-expanded]="!isCollapsed()"
+            [cbTooltip]="t().expandSidebar"
+            cbTooltipPosition="right"
+            [cbTooltipDisabled]="!isCollapsed()"
+            (click)="toggleCollapsed()"
+          >
+            <cb-icon [name]="isCollapsed() ? 'chevron-right' : 'chevron-left'" [size]="18" aria-hidden="true" />
+          </button>
+        }
+      </div>
+    </nav>
+
+    <ng-template #leaf let-item>
+      @if (item.url && !item.disabled) {
+        <a
+          class="cb-sidebar__item"
+          [class.cb-sidebar__item--active]="isActive(item)"
+          [href]="item.url"
+          [attr.target]="item.target || null"
+          [attr.aria-current]="isActive(item) ? 'page' : null"
+          [cbTooltip]="item.label"
+          cbTooltipPosition="right"
+          [cbTooltipDisabled]="!isCollapsed()"
+          (click)="select(item, $event)"
+        >
+          <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+        </a>
+      } @else {
+        <button
+          type="button"
+          class="cb-sidebar__item"
+          [class.cb-sidebar__item--active]="isActive(item)"
+          [disabled]="item.disabled"
+          [attr.aria-current]="isActive(item) ? 'page' : null"
+          [cbTooltip]="item.label"
+          cbTooltipPosition="right"
+          [cbTooltipDisabled]="!isCollapsed()"
+          (click)="select(item, $event)"
+        >
+          <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+        </button>
+      }
+    </ng-template>
+
+    <ng-template #content let-item>
+      @if (item.icon) {
+        <cb-icon class="cb-sidebar__icon" [name]="item.icon" [size]="20" aria-hidden="true" />
+      } @else {
+        <span class="cb-sidebar__icon cb-sidebar__initial" aria-hidden="true">{{ item.label.charAt(0) }}</span>
+      }
+      <span class="cb-sidebar__label">{{ item.label }}</span>
+      @if (item.badge !== undefined && item.badge !== '') {
+        <span class="cb-sidebar__badge">{{ item.badge }}</span>
+      }
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block;width:var(--cb-sidebar-width, 16rem);height:100%;border-right:1px solid var(--cb-color-border);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:var(--cb-font-sans);transition:width var(--cb-duration-normal, .2s) ease}:host(.cb-sidebar--collapsed){width:var(--cb-sidebar-collapsed-width, 4.5rem)}.cb-sidebar__nav{display:flex;flex-direction:column;height:100%}.cb-sidebar__header:not(:empty){display:flex;align-items:center;min-height:3.5rem;padding:.75rem 1rem;overflow:hidden}.cb-sidebar__body{flex:1;overflow-x:hidden;overflow-y:auto;padding:.5rem .75rem}.cb-sidebar__group+.cb-sidebar__group{margin-top:1rem}.cb-sidebar__group-label{padding:.25rem .75rem;overflow:hidden;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}:host(.cb-sidebar--collapsed) .cb-sidebar__group-label{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0)}.cb-sidebar__list,.cb-sidebar__sublist{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}.cb-sidebar__sublist{margin:2px 0 0 1.625rem;padding-left:.5rem;border-left:1px solid var(--cb-color-border)}.cb-sidebar__item{display:flex;align-items:center;gap:.75rem;width:100%;min-height:2.5rem;padding:.5rem .75rem;border:0;border-radius:var(--cb-radius-md, 8px);background:transparent;color:inherit;font:inherit;font-size:var(--cb-text-sm, .875rem);text-align:start;text-decoration:none;cursor:pointer}.cb-sidebar__item:hover:not(:disabled){background:var(--cb-color-surface-hover);color:var(--cb-color-text-strong)}.cb-sidebar__item:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-sidebar__item:disabled{cursor:not-allowed;opacity:.5}.cb-sidebar__item--active{background:color-mix(in srgb,var(--cb-color-primary) 12%,transparent);color:var(--cb-color-primary);font-weight:var(--cb-font-weight-semibold, 600)}.cb-sidebar__item--has-active{color:var(--cb-color-primary)}.cb-sidebar__icon{flex:none}.cb-sidebar__initial{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-surface-hover);font-size:.75rem;font-weight:var(--cb-font-weight-semibold, 600)}.cb-sidebar__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-sidebar__badge{flex:none;min-width:1.25rem;padding:.0625rem .375rem;border-radius:var(--cb-radius-full, 999px);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast);font-size:.6875rem;font-weight:var(--cb-font-weight-semibold, 600);text-align:center}.cb-sidebar__chevron{flex:none;transition:transform var(--cb-duration-fast, .15s) ease}.cb-sidebar__item[aria-expanded=true] .cb-sidebar__chevron{transform:rotate(180deg)}:host(.cb-sidebar--collapsed) .cb-sidebar__item{justify-content:center;padding-inline:0}:host(.cb-sidebar--collapsed) .cb-sidebar__label,:host(.cb-sidebar--collapsed) .cb-sidebar__chevron{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}:host(.cb-sidebar--collapsed) .cb-sidebar__badge{position:absolute;margin:-1.25rem -1.5rem 0 0;min-width:1rem;padding:0 .25rem;font-size:.625rem}.cb-sidebar__footer{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;border-top:1px solid var(--cb-color-border)}.cb-sidebar__footer:empty{display:none}.cb-sidebar__collapse{display:inline-flex;align-items:center;justify-content:center;align-self:flex-end;width:2.25rem;height:2.25rem;border:0;border-radius:var(--cb-radius-md, 8px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}:host(.cb-sidebar--collapsed) .cb-sidebar__collapse{align-self:center}.cb-sidebar__collapse:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-sidebar__collapse:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host,.cb-sidebar__chevron{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "directive", type: CbTooltipDirective, selector: "[cbTooltip]", inputs: ["cbTooltip", "cbTooltipPosition", "cbTooltipDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbSidebar, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [NgTemplateOutlet, CbIcon, CbTooltipDirective], host: {
+                        class: 'cb-sidebar',
+                        '[class.cb-sidebar--collapsed]': 'isCollapsed()',
+                    }, template: `
+    <nav class="cb-sidebar__nav" [attr.aria-label]="ariaLabel() ?? t().mainNavigation">
+      <div class="cb-sidebar__header"><ng-content select="[cb-sidebar-header]" /></div>
+
+      <div class="cb-sidebar__body">
+        @for (group of groups(); track $index; let g = $index) {
+          <div class="cb-sidebar__group">
+            @if (group.label) {
+              <div class="cb-sidebar__group-label" [id]="uid + '-g' + g">{{ group.label }}</div>
+            }
+            <ul class="cb-sidebar__list" role="list" [attr.aria-labelledby]="group.label ? uid + '-g' + g : null">
+              @for (item of group.items; track key(item)) {
+                <li>
+                  @if (item.children?.length) {
+                    <button
+                      type="button"
+                      class="cb-sidebar__item"
+                      [class.cb-sidebar__item--has-active]="hasActiveChild(item)"
+                      [disabled]="item.disabled"
+                      [attr.aria-expanded]="isCollapsed() ? null : isExpanded(item)"
+                      [attr.aria-controls]="isCollapsed() ? null : uid + '-' + key(item)"
+                      [cbTooltip]="item.label"
+                      cbTooltipPosition="right"
+                      [cbTooltipDisabled]="!isCollapsed()"
+                      (click)="toggleGroup(item)"
+                    >
+                      <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+                      <cb-icon class="cb-sidebar__chevron" name="chevron-down" [size]="16" aria-hidden="true" />
+                    </button>
+                    @if (isExpanded(item) && !isCollapsed()) {
+                      <ul class="cb-sidebar__sublist" role="list" [id]="uid + '-' + key(item)">
+                        @for (child of item.children; track key(child)) {
+                          <li>
+                            <ng-container *ngTemplateOutlet="leaf; context: { $implicit: child }" />
+                          </li>
+                        }
+                      </ul>
+                    }
+                  } @else {
+                    <ng-container *ngTemplateOutlet="leaf; context: { $implicit: item }" />
+                  }
+                </li>
+              }
+            </ul>
+          </div>
+        }
+      </div>
+
+      <div class="cb-sidebar__footer">
+        <ng-content select="[cb-sidebar-footer]" />
+        @if (collapsible() && !shell?.mobile()) {
+          <button
+            type="button"
+            class="cb-sidebar__collapse"
+            [attr.aria-label]="isCollapsed() ? t().expandSidebar : t().collapseSidebar"
+            [attr.aria-expanded]="!isCollapsed()"
+            [cbTooltip]="t().expandSidebar"
+            cbTooltipPosition="right"
+            [cbTooltipDisabled]="!isCollapsed()"
+            (click)="toggleCollapsed()"
+          >
+            <cb-icon [name]="isCollapsed() ? 'chevron-right' : 'chevron-left'" [size]="18" aria-hidden="true" />
+          </button>
+        }
+      </div>
+    </nav>
+
+    <ng-template #leaf let-item>
+      @if (item.url && !item.disabled) {
+        <a
+          class="cb-sidebar__item"
+          [class.cb-sidebar__item--active]="isActive(item)"
+          [href]="item.url"
+          [attr.target]="item.target || null"
+          [attr.aria-current]="isActive(item) ? 'page' : null"
+          [cbTooltip]="item.label"
+          cbTooltipPosition="right"
+          [cbTooltipDisabled]="!isCollapsed()"
+          (click)="select(item, $event)"
+        >
+          <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+        </a>
+      } @else {
+        <button
+          type="button"
+          class="cb-sidebar__item"
+          [class.cb-sidebar__item--active]="isActive(item)"
+          [disabled]="item.disabled"
+          [attr.aria-current]="isActive(item) ? 'page' : null"
+          [cbTooltip]="item.label"
+          cbTooltipPosition="right"
+          [cbTooltipDisabled]="!isCollapsed()"
+          (click)="select(item, $event)"
+        >
+          <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+        </button>
+      }
+    </ng-template>
+
+    <ng-template #content let-item>
+      @if (item.icon) {
+        <cb-icon class="cb-sidebar__icon" [name]="item.icon" [size]="20" aria-hidden="true" />
+      } @else {
+        <span class="cb-sidebar__icon cb-sidebar__initial" aria-hidden="true">{{ item.label.charAt(0) }}</span>
+      }
+      <span class="cb-sidebar__label">{{ item.label }}</span>
+      @if (item.badge !== undefined && item.badge !== '') {
+        <span class="cb-sidebar__badge">{{ item.badge }}</span>
+      }
+    </ng-template>
+  `, styles: [":host{display:block;width:var(--cb-sidebar-width, 16rem);height:100%;border-right:1px solid var(--cb-color-border);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:var(--cb-font-sans);transition:width var(--cb-duration-normal, .2s) ease}:host(.cb-sidebar--collapsed){width:var(--cb-sidebar-collapsed-width, 4.5rem)}.cb-sidebar__nav{display:flex;flex-direction:column;height:100%}.cb-sidebar__header:not(:empty){display:flex;align-items:center;min-height:3.5rem;padding:.75rem 1rem;overflow:hidden}.cb-sidebar__body{flex:1;overflow-x:hidden;overflow-y:auto;padding:.5rem .75rem}.cb-sidebar__group+.cb-sidebar__group{margin-top:1rem}.cb-sidebar__group-label{padding:.25rem .75rem;overflow:hidden;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}:host(.cb-sidebar--collapsed) .cb-sidebar__group-label{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0)}.cb-sidebar__list,.cb-sidebar__sublist{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}.cb-sidebar__sublist{margin:2px 0 0 1.625rem;padding-left:.5rem;border-left:1px solid var(--cb-color-border)}.cb-sidebar__item{display:flex;align-items:center;gap:.75rem;width:100%;min-height:2.5rem;padding:.5rem .75rem;border:0;border-radius:var(--cb-radius-md, 8px);background:transparent;color:inherit;font:inherit;font-size:var(--cb-text-sm, .875rem);text-align:start;text-decoration:none;cursor:pointer}.cb-sidebar__item:hover:not(:disabled){background:var(--cb-color-surface-hover);color:var(--cb-color-text-strong)}.cb-sidebar__item:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-sidebar__item:disabled{cursor:not-allowed;opacity:.5}.cb-sidebar__item--active{background:color-mix(in srgb,var(--cb-color-primary) 12%,transparent);color:var(--cb-color-primary);font-weight:var(--cb-font-weight-semibold, 600)}.cb-sidebar__item--has-active{color:var(--cb-color-primary)}.cb-sidebar__icon{flex:none}.cb-sidebar__initial{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-surface-hover);font-size:.75rem;font-weight:var(--cb-font-weight-semibold, 600)}.cb-sidebar__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-sidebar__badge{flex:none;min-width:1.25rem;padding:.0625rem .375rem;border-radius:var(--cb-radius-full, 999px);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast);font-size:.6875rem;font-weight:var(--cb-font-weight-semibold, 600);text-align:center}.cb-sidebar__chevron{flex:none;transition:transform var(--cb-duration-fast, .15s) ease}.cb-sidebar__item[aria-expanded=true] .cb-sidebar__chevron{transform:rotate(180deg)}:host(.cb-sidebar--collapsed) .cb-sidebar__item{justify-content:center;padding-inline:0}:host(.cb-sidebar--collapsed) .cb-sidebar__label,:host(.cb-sidebar--collapsed) .cb-sidebar__chevron{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}:host(.cb-sidebar--collapsed) .cb-sidebar__badge{position:absolute;margin:-1.25rem -1.5rem 0 0;min-width:1rem;padding:0 .25rem;font-size:.625rem}.cb-sidebar__footer{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;border-top:1px solid var(--cb-color-border)}.cb-sidebar__footer:empty{display:none}.cb-sidebar__collapse{display:inline-flex;align-items:center;justify-content:center;align-self:flex-end;width:2.25rem;height:2.25rem;border:0;border-radius:var(--cb-radius-md, 8px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}:host(.cb-sidebar--collapsed) .cb-sidebar__collapse{align-self:center}.cb-sidebar__collapse:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-sidebar__collapse:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host,.cb-sidebar__chevron{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], navigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigate", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }] } });
+
+let nextUid = 0;
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+/**
+ * Esqueleto de aplicación de CaribeNG: menú lateral, cabecera y contenido.
+ * En escritorio el sidebar es una columna que se puede contraer; por debajo de
+ * `breakpoint` (medido en el propio shell) pasa a ser un panel deslizante con
+ * fondo, cierre con Escape y foco atrapado mientras está abierto.
+ *
+ * @example
+ * ```html
+ * <cb-app-shell style="height: 100vh">
+ *   <cb-sidebar [groups]="menu" />
+ *   <header cb-app-shell-header>
+ *     <button type="button" cbSidebarToggle><cb-icon name="menu" /></button>
+ *   </header>
+ *   <router-outlet />
+ * </cb-app-shell>
+ * ```
+ */
+class CbAppShell {
+    constructor() {
+        this.host = inject(ElementRef);
+        this.document = inject(DOCUMENT);
+        this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
+        this.previouslyFocused = null;
+        this.sidebarId = `cb-app-shell-sidebar-${++nextUid}`;
+        /** Ancho (px) del shell por debajo del cual el sidebar es un panel deslizante. */
+        this.breakpoint = input(768, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "breakpoint" }] : /* istanbul ignore next */ []));
+        /** Panel abierto en móvil. */
+        this.sidebarOpen = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidebarOpen" }] : /* istanbul ignore next */ []));
+        /** Sidebar contraído a iconos en escritorio. */
+        this.collapsed = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+        /** Fuerza el modo móvil (útil en pruebas o vistas embebidas). */
+        this.forceMobile = input(false, { ...(ngDevMode ? { debugName: "forceMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.width = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        this.mobile = computed(() => {
+            if (this.forceMobile())
+                return true;
+            const width = this.width();
+            return width !== null && width < this.breakpoint();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mobile" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            const el = this.host.nativeElement;
+            this.width.set(el.getBoundingClientRect().width);
+            const view = this.document.defaultView;
+            if (!view?.ResizeObserver)
+                return;
+            const observer = new view.ResizeObserver((entries) => this.width.set(entries[0].contentRect.width));
+            observer.observe(el);
+            this.destroyRef.onDestroy(() => observer.disconnect());
+        });
+        // Al abrir el panel móvil se enfoca su primer control; al cerrarlo, vuelve el foco.
+        effect(() => {
+            const open = this.mobile() && this.sidebarOpen();
+            untracked(() => {
+                if (open) {
+                    this.previouslyFocused = this.document.activeElement;
+                    afterNextRender(() => this.host.nativeElement.querySelector(`#${this.sidebarId}`)?.querySelector(FOCUSABLE)?.focus(), { injector: this.injector });
+                }
+                else if (this.previouslyFocused) {
+                    const target = this.previouslyFocused;
+                    this.previouslyFocused = null;
+                    if (target.isConnected)
+                        afterNextRender(() => target.focus(), { injector: this.injector });
+                }
+            });
+        });
+        // Al pasar a escritorio no queda un panel "abierto" colgado.
+        effect(() => {
+            if (!this.mobile())
+                untracked(() => this.sidebarOpen.set(false));
+        });
+    }
+    toggle() {
+        if (this.mobile())
+            this.sidebarOpen.update((open) => !open);
+        else
+            this.collapsed.update((collapsed) => !collapsed);
+    }
+    setCollapsed(collapsed) {
+        this.collapsed.set(collapsed);
+    }
+    closeSidebar() {
+        if (this.mobile())
+            this.sidebarOpen.set(false);
+    }
+    onEscape(event) {
+        if (!this.mobile() || !this.sidebarOpen())
+            return;
+        event.preventDefault();
+        this.closeSidebar();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbAppShell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbAppShell, isStandalone: true, selector: "cb-app-shell", inputs: { breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, sidebarOpen: { classPropertyName: "sidebarOpen", publicName: "sidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, forceMobile: { classPropertyName: "forceMobile", publicName: "forceMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidebarOpen: "sidebarOpenChange", collapsed: "collapsedChange" }, host: { properties: { "class.cb-app-shell--mobile": "mobile()", "class.cb-app-shell--open": "mobile() && sidebarOpen()", "class.cb-app-shell--collapsed": "!mobile() && collapsed()" }, classAttribute: "cb-app-shell" }, providers: [{ provide: CB_APP_SHELL, useExisting: forwardRef(() => CbAppShell) }], ngImport: i0, template: `
+    <div
+      class="cb-app-shell__sidebar"
+      [id]="sidebarId"
+      [attr.inert]="mobile() && !sidebarOpen() ? '' : null"
+      [cdkTrapFocus]="mobile() && sidebarOpen()"
+      (keydown.escape)="onEscape($event)"
+    >
+      <ng-content select="cb-sidebar, [cb-app-shell-sidebar]" />
+    </div>
+    @if (mobile() && sidebarOpen()) {
+      <div class="cb-app-shell__backdrop" aria-hidden="true" (click)="closeSidebar()"></div>
+    }
+    <div class="cb-app-shell__main">
+      <ng-content select="[cb-app-shell-header]" />
+      <div class="cb-app-shell__content"><ng-content /></div>
+    </div>
+  `, isInline: true, styles: [":host{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);height:100%;min-height:0;overflow:hidden;background:var(--cb-color-bg, var(--cb-color-surface-raised));color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-app-shell__sidebar{height:100%;min-height:0}.cb-app-shell__main{display:flex;flex-direction:column;min-width:0;min-height:0}.cb-app-shell__content{flex:1;min-height:0;overflow:auto}:host(.cb-app-shell--mobile){grid-template-columns:minmax(0,1fr)}:host(.cb-app-shell--mobile) .cb-app-shell__sidebar{position:absolute;inset-block:0;left:0;z-index:20;max-width:calc(100% - 3rem);transform:translate(-100%);visibility:hidden;transition:transform var(--cb-duration-normal, .2s) ease,visibility 0s linear var(--cb-duration-normal, .2s)}:host(.cb-app-shell--open) .cb-app-shell__sidebar{transform:none;visibility:visible;box-shadow:var(--cb-shadow-lg);transition:transform var(--cb-duration-normal, .2s) ease}.cb-app-shell__backdrop{position:absolute;inset:0;z-index:15;background:var(--cb-color-overlay, rgb(2 6 23 / .5))}@media(prefers-reduced-motion:reduce){:host(.cb-app-shell--mobile) .cb-app-shell__sidebar{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbAppShell, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-app-shell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [A11yModule], providers: [{ provide: CB_APP_SHELL, useExisting: forwardRef(() => CbAppShell) }], host: {
+                        class: 'cb-app-shell',
+                        '[class.cb-app-shell--mobile]': 'mobile()',
+                        '[class.cb-app-shell--open]': 'mobile() && sidebarOpen()',
+                        '[class.cb-app-shell--collapsed]': '!mobile() && collapsed()',
+                    }, template: `
+    <div
+      class="cb-app-shell__sidebar"
+      [id]="sidebarId"
+      [attr.inert]="mobile() && !sidebarOpen() ? '' : null"
+      [cdkTrapFocus]="mobile() && sidebarOpen()"
+      (keydown.escape)="onEscape($event)"
+    >
+      <ng-content select="cb-sidebar, [cb-app-shell-sidebar]" />
+    </div>
+    @if (mobile() && sidebarOpen()) {
+      <div class="cb-app-shell__backdrop" aria-hidden="true" (click)="closeSidebar()"></div>
+    }
+    <div class="cb-app-shell__main">
+      <ng-content select="[cb-app-shell-header]" />
+      <div class="cb-app-shell__content"><ng-content /></div>
+    </div>
+  `, styles: [":host{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);height:100%;min-height:0;overflow:hidden;background:var(--cb-color-bg, var(--cb-color-surface-raised));color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-app-shell__sidebar{height:100%;min-height:0}.cb-app-shell__main{display:flex;flex-direction:column;min-width:0;min-height:0}.cb-app-shell__content{flex:1;min-height:0;overflow:auto}:host(.cb-app-shell--mobile){grid-template-columns:minmax(0,1fr)}:host(.cb-app-shell--mobile) .cb-app-shell__sidebar{position:absolute;inset-block:0;left:0;z-index:20;max-width:calc(100% - 3rem);transform:translate(-100%);visibility:hidden;transition:transform var(--cb-duration-normal, .2s) ease,visibility 0s linear var(--cb-duration-normal, .2s)}:host(.cb-app-shell--open) .cb-app-shell__sidebar{transform:none;visibility:visible;box-shadow:var(--cb-shadow-lg);transition:transform var(--cb-duration-normal, .2s) ease}.cb-app-shell__backdrop{position:absolute;inset:0;z-index:15;background:var(--cb-color-overlay, rgb(2 6 23 / .5))}@media(prefers-reduced-motion:reduce){:host(.cb-app-shell--mobile) .cb-app-shell__sidebar{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], sidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarOpen", required: false }] }, { type: i0.Output, args: ["sidebarOpenChange"] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], forceMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMobile", required: false }] }] } });
+
+/**
+ * Convierte cualquier botón en el control del sidebar de `cb-app-shell`: en
+ * móvil abre o cierra el panel; en escritorio contrae o expande. Gestiona
+ * `aria-controls`, `aria-expanded` y un nombre accesible por defecto.
+ *
+ * @example
+ * ```html
+ * <button type="button" cbSidebarToggle><cb-icon name="menu" aria-hidden="true" /></button>
+ * ```
+ */
+class CbSidebarToggle {
+    constructor() {
+        this.t = injectCbTranslation();
+        this.shell = inject(CB_APP_SHELL, { optional: true });
+        /** Nombre accesible. Por defecto, "Abrir menú" (móvil) o "Contraer/Expandir menú lateral". */
+        this.cbSidebarToggle = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cbSidebarToggle" }] : /* istanbul ignore next */ []));
+        this.expanded = computed(() => {
+            const shell = this.shell;
+            if (!shell)
+                return null;
+            return shell.mobile() ? shell.sidebarOpen() : !shell.collapsed();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        this.label = computed(() => {
+            const custom = this.cbSidebarToggle();
+            if (custom)
+                return custom;
+            const shell = this.shell;
+            if (!shell)
+                return null;
+            if (shell.mobile())
+                return this.t().openMenu;
+            return shell.collapsed() ? this.t().expandSidebar : this.t().collapseSidebar;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbSidebarToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbSidebarToggle, isStandalone: true, selector: "[cbSidebarToggle]", inputs: { cbSidebarToggle: { classPropertyName: "cbSidebarToggle", publicName: "cbSidebarToggle", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "shell?.toggle()" }, properties: { "attr.aria-controls": "shell?.sidebarId ?? null", "attr.aria-expanded": "expanded()", "attr.aria-label": "label()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbSidebarToggle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cbSidebarToggle]',
+                    host: {
+                        '(click)': 'shell?.toggle()',
+                        '[attr.aria-controls]': 'shell?.sidebarId ?? null',
+                        '[attr.aria-expanded]': 'expanded()',
+                        '[attr.aria-label]': 'label()',
+                    },
+                }]
+        }], propDecorators: { cbSidebarToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cbSidebarToggle", required: false }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/sidebar
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CB_APP_SHELL, CbAppShell, CbSidebar, CbSidebarToggle, cbSidebarKey };

package/fesm2022/caribeng-ui-stepper.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { contentChildren, input, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, computed } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
 import { CbButton } from '@caribeng/ui/button';
-import { injectCbTranslation } from '@caribeng/ui';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
 
 let nextUid = 0;
 /**
@@ -35,6 +35,11 @@ class CbStepper {
     isComplete(step) {
         return this.steps().indexOf(step) < this.activeIndex();
     }
+    /** Nombre del botón del paso: "Paso 2 de 3: Envío" (y ", completado" si ya pasó). */
+    stepName(step, index) {
+        const name = cbFormat(this.t().stepOf, index + 1, this.steps().length) + (step.label() ? `: ${step.label()}` : '');
+        return this.isComplete(step) ? `${name}, ${this.t().stepCompleted}` : name;
+    }
     goTo(index) {
         const max = this.steps().length - 1;
         this.activeIndex.set(Math.min(max, Math.max(0, index)));
@@ -58,6 +63,7 @@ class CbStepper {
             type="button"
             class="cb-stepper__indicator"
             [attr.aria-current]="isActive(step) ? 'step' : null"
+            [attr.aria-label]="stepName(step, i)"
             [disabled]="step.disabled()"
             (click)="goTo(i)"
           >
@@ -67,7 +73,7 @@ class CbStepper {
               {{ i + 1 }}
             }
           </button>
-          <span class="cb-stepper__label">{{ step.label() }}</span>
+          <span class="cb-stepper__label" aria-hidden="true">{{ step.label() }}</span>
           @if (!last) {
             <span class="cb-stepper__connector" aria-hidden="true"></span>
           }
@@ -105,6 +111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type="button"
             class="cb-stepper__indicator"
             [attr.aria-current]="isActive(step) ? 'step' : null"
+            [attr.aria-label]="stepName(step, i)"
             [disabled]="step.disabled()"
             (click)="goTo(i)"
           >
@@ -114,7 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               {{ i + 1 }}
             }
           </button>
-          <span class="cb-stepper__label">{{ step.label() }}</span>
+          <span class="cb-stepper__label" aria-hidden="true">{{ step.label() }}</span>
           @if (!last) {
             <span class="cb-stepper__connector" aria-hidden="true"></span>
           }