@neural-ui/core 1.3.0 → 1.3.1

package/fesm2022/neural-ui-core-tabs.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, effect, input, output, computed, signal, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { InjectionToken, inject, ElementRef, signal, effect, input, output, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import { NeuUrlStateService } from '@neural-ui/core/url-state';
 
 // ----------------------------------------------------------------
@@ -23,6 +23,23 @@ class NeuTabsComponent {
     urlState = inject(NeuUrlStateService);
     elRef = inject(ElementRef);
     resizeObserver;
+    _urlParamSignals = new Map();
+    _dragPointerId = null;
+    _dragStartX = 0;
+    _dragStartScrollLeft = 0;
+    _suppressNextClick = false;
+    isDraggingNav = signal(false, ...(ngDevMode ? [{ debugName: "isDraggingNav" }] : /* istanbul ignore next */ []));
+    _getUrlParamSignal(key) {
+        let paramSignal = this._urlParamSignals.get(key);
+        if (!paramSignal) {
+            paramSignal = this.urlState.getParam(key);
+            this._urlParamSignals.set(key, paramSignal);
+        }
+        return paramSignal;
+    }
+    _readUrlParam(key) {
+        return this._getUrlParamSignal(key)();
+    }
     constructor() {
         // Actualizar indicador cuando activeTabId cambie — debe estar en el constructor (injection context)
         effect(() => {
@@ -42,7 +59,7 @@ class NeuTabsComponent {
     tabChange = output();
     /** ID de la pestaña activa (de la URL o la primera disponible) / Active tab ID (from the URL or the first available) */
     activeTabId = computed(() => {
-        const fromUrl = this.urlState.getParam(this.tabParam())();
+        const fromUrl = this._readUrlParam(this.tabParam());
         const available = this.tabs().find((t) => t.id === fromUrl && !t.disabled);
         if (available)
             return available.id;
@@ -75,7 +92,23 @@ class NeuTabsComponent {
         if (tabEl) {
             this._indicatorLeft.set(tabEl.offsetLeft + 'px');
             this._indicatorWidth.set(tabEl.offsetWidth + 'px');
+            if (typeof tabEl.scrollIntoView === 'function') {
+                tabEl.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                    inline: 'nearest',
+                });
+            }
+        }
+    }
+    handleTabClick(event, tab) {
+        if (this._suppressNextClick) {
+            event.preventDefault();
+            event.stopPropagation();
+            this._suppressNextClick = false;
+            return;
         }
+        this.selectTab(tab);
     }
     selectTab(tab) {
         if (tab.disabled)
@@ -84,6 +117,45 @@ class NeuTabsComponent {
         this.tabChange.emit(tab.id);
         requestAnimationFrame(() => this._updateIndicator());
     }
+    startNavDrag(event) {
+        if (event.pointerType === 'mouse' && event.button !== 0)
+            return;
+        const target = event.target;
+        if (!target?.closest('.neu-tabs__nav'))
+            return;
+        const nav = event.currentTarget;
+        this._dragPointerId = event.pointerId;
+        this._dragStartX = event.clientX;
+        this._dragStartScrollLeft = nav.scrollLeft;
+        this.isDraggingNav.set(false);
+        nav.setPointerCapture(event.pointerId);
+    }
+    moveNavDrag(event) {
+        if (this._dragPointerId !== event.pointerId)
+            return;
+        const nav = event.currentTarget;
+        const deltaX = event.clientX - this._dragStartX;
+        if (!this.isDraggingNav() && Math.abs(deltaX) > 6) {
+            this.isDraggingNav.set(true);
+            this._suppressNextClick = true;
+        }
+        if (!this.isDraggingNav())
+            return;
+        nav.scrollLeft = this._dragStartScrollLeft - deltaX;
+        event.preventDefault();
+    }
+    endNavDrag(event) {
+        if (this._dragPointerId !== event.pointerId)
+            return;
+        const nav = event.currentTarget;
+        if (nav.hasPointerCapture(event.pointerId)) {
+            nav.releasePointerCapture(event.pointerId);
+        }
+        this._dragPointerId = null;
+        if (this.isDraggingNav()) {
+            requestAnimationFrame(() => this.isDraggingNav.set(false));
+        }
+    }
     /** Mueve el foco entre tabs con flechas (roving tabindex — WAI-ARIA Tabs Pattern) / Moves focus between tabs with arrows (roving tabindex — WAI-ARIA Tabs Pattern) */
     focusTab(event, dir) {
         event.preventDefault();
@@ -108,7 +180,17 @@ class NeuTabsComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NeuTabsComponent, isStandalone: true, selector: "neu-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, tabParam: { classPropertyName: "tabParam", publicName: "tabParam", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, providers: [{ provide: NEU_TABS_CONTEXT, useExisting: NeuTabsComponent }], ngImport: i0, template: `
     <!-- Barra de pestañas -->
     <div class="neu-tabs" [class.neu-tabs--flush]="flush()">
-      <div class="neu-tabs__nav" role="tablist" [attr.aria-label]="ariaLabel()" #navRef>
+      <div
+        class="neu-tabs__nav"
+        role="tablist"
+        [attr.aria-label]="ariaLabel()"
+        [class.neu-tabs__nav--dragging]="isDraggingNav()"
+        #navRef
+        (pointerdown)="startNavDrag($event)"
+        (pointermove)="moveNavDrag($event)"
+        (pointerup)="endNavDrag($event)"
+        (pointercancel)="endNavDrag($event)"
+      >
         @for (tab of tabs(); track tab.id) {
           <button
             class="neu-tabs__tab"
@@ -121,7 +203,7 @@ class NeuTabsComponent {
             [attr.tabindex]="activeTabId() === tab.id ? '0' : '-1'"
             [disabled]="tab.disabled"
             type="button"
-            (click)="selectTab(tab)"
+            (click)="handleTabClick($event, tab)"
             (keydown.arrowRight)="focusTab($any($event), 1)"
             (keydown.arrowLeft)="focusTab($any($event), -1)"
             (keydown.home)="focusTab($any($event), 'first')"
@@ -142,14 +224,24 @@ class NeuTabsComponent {
         <ng-content />
       </div>
     </div>
-  `, isInline: true, styles: [".neu-tabs{display:flex;flex-direction:column}.neu-tabs__nav{position:relative;display:flex;border-bottom:1.5px solid var(--neu-border);overflow-x:auto;scrollbar-width:none}.neu-tabs__nav::-webkit-scrollbar{display:none}.neu-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:var(--neu-space-2);padding:var(--neu-space-3) var(--neu-space-5);background:transparent;border:none;font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);font-weight:500;color:var(--neu-text-muted);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:color var(--neu-transition),background-color var(--neu-transition);outline:none}.neu-tabs__tab:hover:not(:disabled){color:var(--neu-text);background:var(--neu-surface-2)}.neu-tabs__tab:focus-visible{outline:2px solid var(--neu-primary);outline-offset:-2px;border-radius:var(--neu-radius-sm) var(--neu-radius-sm) 0 0}.neu-tabs__tab--active{color:var(--neu-primary);font-weight:600}.neu-tabs__tab--disabled{opacity:.4;cursor:not-allowed}.neu-tabs__tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--neu-radius-full);background:var(--neu-primary-100);color:var(--neu-primary);font-size:10px;font-weight:700;line-height:1}.neu-tabs__indicator{position:absolute;bottom:-1.5px;height:2.5px;background:var(--neu-primary);border-radius:var(--neu-radius-full) var(--neu-radius-full) 0 0;transition:left var(--neu-transition-slow),width var(--neu-transition-slow);pointer-events:none}.neu-tabs__panels{flex:1}.neu-tab-panel{padding-top:1.5rem;animation:neu-tab-fade .18s ease}@keyframes neu-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".neu-tabs{display:flex;flex-direction:column}.neu-tabs__nav{position:relative;display:flex;border-bottom:1.5px solid var(--neu-border);overflow-x:auto;cursor:grab;touch-action:pan-x;scrollbar-width:none}.neu-tabs__nav::-webkit-scrollbar{display:none}.neu-tabs__nav--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neu-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:var(--neu-space-2);padding:var(--neu-space-3) var(--neu-space-5);background:transparent;border:none;font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);font-weight:500;color:var(--neu-text-muted);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:color var(--neu-transition),background-color var(--neu-transition);outline:none}.neu-tabs__tab:hover:not(:disabled){color:var(--neu-text);background:var(--neu-surface-2)}.neu-tabs__tab:focus-visible{outline:2px solid var(--neu-primary);outline-offset:-2px;border-radius:var(--neu-radius-sm) var(--neu-radius-sm) 0 0}.neu-tabs__tab--active{color:var(--neu-primary);font-weight:600}.neu-tabs__tab--disabled{opacity:.4;cursor:not-allowed}.neu-tabs__tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--neu-radius-full);background:var(--neu-primary-100);color:var(--neu-primary);font-size:10px;font-weight:700;line-height:1}.neu-tabs__indicator{position:absolute;bottom:-1.5px;height:2.5px;background:var(--neu-primary);border-radius:var(--neu-radius-full) var(--neu-radius-full) 0 0;transition:left var(--neu-transition-slow),width var(--neu-transition-slow);pointer-events:none}.neu-tabs__panels{flex:1}.neu-tab-panel{padding-top:1.5rem;animation:neu-tab-fade .18s ease}@keyframes neu-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'neu-tabs', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NEU_TABS_CONTEXT, useExisting: NeuTabsComponent }], template: `
     <!-- Barra de pestañas -->
     <div class="neu-tabs" [class.neu-tabs--flush]="flush()">
-      <div class="neu-tabs__nav" role="tablist" [attr.aria-label]="ariaLabel()" #navRef>
+      <div
+        class="neu-tabs__nav"
+        role="tablist"
+        [attr.aria-label]="ariaLabel()"
+        [class.neu-tabs__nav--dragging]="isDraggingNav()"
+        #navRef
+        (pointerdown)="startNavDrag($event)"
+        (pointermove)="moveNavDrag($event)"
+        (pointerup)="endNavDrag($event)"
+        (pointercancel)="endNavDrag($event)"
+      >
         @for (tab of tabs(); track tab.id) {
           <button
             class="neu-tabs__tab"
@@ -162,7 +254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             [attr.tabindex]="activeTabId() === tab.id ? '0' : '-1'"
             [disabled]="tab.disabled"
             type="button"
-            (click)="selectTab(tab)"
+            (click)="handleTabClick($event, tab)"
             (keydown.arrowRight)="focusTab($any($event), 1)"
             (keydown.arrowLeft)="focusTab($any($event), -1)"
             (keydown.home)="focusTab($any($event), 'first')"
@@ -183,7 +275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
         <ng-content />
       </div>
     </div>
-  `, styles: [".neu-tabs{display:flex;flex-direction:column}.neu-tabs__nav{position:relative;display:flex;border-bottom:1.5px solid var(--neu-border);overflow-x:auto;scrollbar-width:none}.neu-tabs__nav::-webkit-scrollbar{display:none}.neu-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:var(--neu-space-2);padding:var(--neu-space-3) var(--neu-space-5);background:transparent;border:none;font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);font-weight:500;color:var(--neu-text-muted);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:color var(--neu-transition),background-color var(--neu-transition);outline:none}.neu-tabs__tab:hover:not(:disabled){color:var(--neu-text);background:var(--neu-surface-2)}.neu-tabs__tab:focus-visible{outline:2px solid var(--neu-primary);outline-offset:-2px;border-radius:var(--neu-radius-sm) var(--neu-radius-sm) 0 0}.neu-tabs__tab--active{color:var(--neu-primary);font-weight:600}.neu-tabs__tab--disabled{opacity:.4;cursor:not-allowed}.neu-tabs__tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--neu-radius-full);background:var(--neu-primary-100);color:var(--neu-primary);font-size:10px;font-weight:700;line-height:1}.neu-tabs__indicator{position:absolute;bottom:-1.5px;height:2.5px;background:var(--neu-primary);border-radius:var(--neu-radius-full) var(--neu-radius-full) 0 0;transition:left var(--neu-transition-slow),width var(--neu-transition-slow);pointer-events:none}.neu-tabs__panels{flex:1}.neu-tab-panel{padding-top:1.5rem;animation:neu-tab-fade .18s ease}@keyframes neu-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+  `, styles: [".neu-tabs{display:flex;flex-direction:column}.neu-tabs__nav{position:relative;display:flex;border-bottom:1.5px solid var(--neu-border);overflow-x:auto;cursor:grab;touch-action:pan-x;scrollbar-width:none}.neu-tabs__nav::-webkit-scrollbar{display:none}.neu-tabs__nav--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neu-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:var(--neu-space-2);padding:var(--neu-space-3) var(--neu-space-5);background:transparent;border:none;font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);font-weight:500;color:var(--neu-text-muted);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:color var(--neu-transition),background-color var(--neu-transition);outline:none}.neu-tabs__tab:hover:not(:disabled){color:var(--neu-text);background:var(--neu-surface-2)}.neu-tabs__tab:focus-visible{outline:2px solid var(--neu-primary);outline-offset:-2px;border-radius:var(--neu-radius-sm) var(--neu-radius-sm) 0 0}.neu-tabs__tab--active{color:var(--neu-primary);font-weight:600}.neu-tabs__tab--disabled{opacity:.4;cursor:not-allowed}.neu-tabs__tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--neu-radius-full);background:var(--neu-primary-100);color:var(--neu-primary);font-size:10px;font-weight:700;line-height:1}.neu-tabs__indicator{position:absolute;bottom:-1.5px;height:2.5px;background:var(--neu-primary);border-radius:var(--neu-radius-full) var(--neu-radius-full) 0 0;transition:left var(--neu-transition-slow),width var(--neu-transition-slow);pointer-events:none}.neu-tabs__panels{flex:1}.neu-tab-panel{padding-top:1.5rem;animation:neu-tab-fade .18s ease}@keyframes neu-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabParam", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
 // ----------------------------------------------------------------
 // NeuTabPanelComponent — panel individual (usa DI para el contexto)

package/fesm2022/neural-ui-core-tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"neural-ui-core-tabs.mjs","sources":["../../../../projects/ui-core/tabs/neu-tabs.component.ts","../../../../projects/ui-core/tabs/neural-ui-core-tabs.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  InjectionToken,\n  OnDestroy,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { NeuUrlStateService } from '@neural-ui/core/url-state';\n\n// ----------------------------------------------------------------\n// Token de contexto — permite a NeuTabPanelComponent inyectar\n// la instancia padre sin pasar signals manualmente.\n// ----------------------------------------------------------------\nexport const NEU_TABS_CONTEXT = new InjectionToken<NeuTabsComponent>('NeuTabsContext');\n\nexport interface NeuTab {\n  /** ID único de la pestaña — se usa como valor en la URL / Unique tab ID — used as the URL value */\n  id: string;\n  /** Etiqueta visible / Visible label */\n  label: string;\n  /** Badge opcional junto al label / Optional badge next to the label */\n  badge?: string;\n  /** Deshabilita la pestaña sin ocultarla / Disables the tab without hiding it */\n  disabled?: boolean;\n}\n\n/**\n * NeuralUI Tabs Component\n *\n * Sistema de pestañas con estado sincronizado a la URL via NeuUrlStateService. / Tab system with state synchronized to the URL via NeuUrlStateService.\n * El panel activo se determina por ?{tabParam}={tabId}. / The active panel is determined by ?{tabParam}={tabId}.\n *\n * Uso:\n *   <neu-tabs [tabs]=\"tabs\" tabParam=\"tab\">\n *     <neu-tab-panel tabId=\"preview\">...</neu-tab-panel>\n *     <neu-tab-panel tabId=\"api\">...</neu-tab-panel>\n *   </neu-tabs>\n */\n@Component({\n  selector: 'neu-tabs',\n  imports: [],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: NEU_TABS_CONTEXT, useExisting: NeuTabsComponent }],\n  template: `\n    <!-- Barra de pestañas -->\n    <div class=\"neu-tabs\" [class.neu-tabs--flush]=\"flush()\">\n      <div class=\"neu-tabs__nav\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\" #navRef>\n        @for (tab of tabs(); track tab.id) {\n          <button\n            class=\"neu-tabs__tab\"\n            [class.neu-tabs__tab--active]=\"activeTabId() === tab.id\"\n            [class.neu-tabs__tab--disabled]=\"tab.disabled\"\n            role=\"tab\"\n            [id]=\"'neu-tab-' + tab.id\"\n            [attr.aria-selected]=\"activeTabId() === tab.id\"\n            [attr.aria-controls]=\"'neu-tabpanel-' + tab.id\"\n            [attr.tabindex]=\"activeTabId() === tab.id ? '0' : '-1'\"\n            [disabled]=\"tab.disabled\"\n            type=\"button\"\n            (click)=\"selectTab(tab)\"\n            (keydown.arrowRight)=\"focusTab($any($event), 1)\"\n            (keydown.arrowLeft)=\"focusTab($any($event), -1)\"\n            (keydown.home)=\"focusTab($any($event), 'first')\"\n            (keydown.end)=\"focusTab($any($event), 'last')\"\n          >\n            {{ tab.label }}\n            @if (tab.badge) {\n              <span class=\"neu-tabs__tab-badge\">{{ tab.badge }}</span>\n            }\n          </button>\n        }\n        <!-- Indicador deslizante -->\n        <span class=\"neu-tabs__indicator\" [style]=\"indicatorStyle()\"></span>\n      </div>\n\n      <!-- Paneles (proyectados desde NeuTabPanelComponent) -->\n      <div class=\"neu-tabs__panels\">\n        <ng-content />\n      </div>\n    </div>\n  `,\n  styleUrl: './neu-tabs.component.scss',\n})\nexport class NeuTabsComponent implements AfterViewInit, OnDestroy {\n  private readonly urlState = inject(NeuUrlStateService);\n  private readonly elRef = inject(ElementRef);\n  private resizeObserver?: ResizeObserver;\n\n  constructor() {\n    // Actualizar indicador cuando activeTabId cambie — debe estar en el constructor (injection context)\n    effect(() => {\n      this.activeTabId(); // dependencia reactiva\n      requestAnimationFrame(() => this._updateIndicator());\n    });\n  }\n\n  /** Definición de pestañas / Tab definitions */\n  tabs = input<NeuTab[]>([]);\n\n  /** QueryParam que almacena la pestaña activa / QueryParam that stores the active tab */\n  tabParam = input<string>('tab');\n\n  /** Si true, elimina el padding interno de los paneles / If true, removes the internal padding from panels */\n  flush = input<boolean>(false);\n\n  /** Etiqueta accesible del rol tablist / Accessible label for the tablist role */\n  ariaLabel = input<string>('Pestañas de contenido');\n\n  /** Emite al cambiar de pestaña / Emits when the tab changes */\n  tabChange = output<string>();\n\n  /** ID de la pestaña activa (de la URL o la primera disponible) / Active tab ID (from the URL or the first available) */\n  readonly activeTabId = computed(() => {\n    const fromUrl = this.urlState.getParam(this.tabParam())();\n    const available = this.tabs().find((t) => t.id === fromUrl && !t.disabled);\n    if (available) return available.id;\n    // Fallback: primera pestaña no deshabilitada\n    return this.tabs().find((t) => !t.disabled)?.id ?? '';\n  });\n\n  /** Posición del indicador calculada mediante medición DOM / Indicator position calculated via DOM measurement */\n  private readonly _indicatorLeft = signal('0px');\n  private readonly _indicatorWidth = signal('0px');\n\n  readonly indicatorStyle = computed(\n    () => `left: ${this._indicatorLeft()}; width: ${this._indicatorWidth()}`,\n  );\n\n  ngAfterViewInit(): void {\n    this._updateIndicator();\n    // Actualizar cuando cambie el tamaño del nav (p.ej. resize de ventana)\n    const nav = this.elRef.nativeElement.querySelector('.neu-tabs__nav');\n    if (nav && typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(() => this._updateIndicator());\n      this.resizeObserver.observe(nav);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  private _updateIndicator(): void {\n    const nav: HTMLElement | null = this.elRef.nativeElement.querySelector('.neu-tabs__nav');\n    if (!nav) return;\n    const tabEls = nav.querySelectorAll<HTMLElement>('.neu-tabs__tab');\n    const idx = this.tabs().findIndex((t) => t.id === this.activeTabId());\n    const tabEl = tabEls[idx];\n    if (tabEl) {\n      this._indicatorLeft.set(tabEl.offsetLeft + 'px');\n      this._indicatorWidth.set(tabEl.offsetWidth + 'px');\n    }\n  }\n\n  selectTab(tab: NeuTab): void {\n    if (tab.disabled) return;\n    this.urlState.setParam(this.tabParam(), tab.id);\n    this.tabChange.emit(tab.id);\n    requestAnimationFrame(() => this._updateIndicator());\n  }\n\n  /** Mueve el foco entre tabs con flechas (roving tabindex — WAI-ARIA Tabs Pattern) / Moves focus between tabs with arrows (roving tabindex — WAI-ARIA Tabs Pattern) */\n  focusTab(event: Event, dir: 1 | -1 | 'first' | 'last'): void {\n    event.preventDefault();\n    const enabledTabs = this.tabs().filter((t) => !t.disabled);\n    const currentIdx = enabledTabs.findIndex((t) => t.id === this.activeTabId());\n    let nextIdx: number;\n    if (dir === 'first') {\n      nextIdx = 0;\n    } else if (dir === 'last') {\n      nextIdx = enabledTabs.length - 1;\n    } else {\n      nextIdx = (currentIdx + dir + enabledTabs.length) % enabledTabs.length;\n    }\n    const next = enabledTabs[nextIdx];\n    this.selectTab(next);\n    const btn = (this.elRef.nativeElement as HTMLElement).querySelector(\n      `#neu-tab-${next.id}`,\n    ) as HTMLElement | null;\n    btn?.focus();\n  }\n}\n\n// ----------------------------------------------------------------\n// NeuTabPanelComponent — panel individual (usa DI para el contexto)\n// ----------------------------------------------------------------\n\n/**\n * NeuralUI Tab Panel\n *\n * Panel de contenido asociado a una pestaña de NeuTabsComponent. / Content panel associated with a NeuTabsComponent tab.\n * Solo se renderiza (no oculta con CSS) cuando la pestaña está activa. / Only rendered (not hidden with CSS) when the tab is active.\n *\n * Uso: hijo directo de <neu-tabs>\n *   <neu-tab-panel tabId=\"api\">...</neu-tab-panel>\n */\n@Component({\n  selector: 'neu-tab-panel',\n  imports: [],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    @if (isActive()) {\n      <div\n        class=\"neu-tab-panel\"\n        role=\"tabpanel\"\n        [id]=\"'neu-tabpanel-' + tabId()\"\n        [attr.aria-labelledby]=\"'neu-tab-' + tabId()\"\n      >\n        <ng-content />\n      </div>\n    }\n  `,\n})\nexport class NeuTabPanelComponent {\n  private readonly tabs = inject(NEU_TABS_CONTEXT, { optional: true });\n\n  /** ID que debe coincidir con NeuTab.id del padre / ID that must match the parent NeuTab.id */\n  tabId = input.required<string>();\n\n  readonly isActive = computed(() => this.tabs?.activeTabId() === this.tabId());\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"neural-ui-core-tabs.mjs","sources":["../../../../projects/ui-core/tabs/neu-tabs.component.ts","../../../../projects/ui-core/tabs/neural-ui-core-tabs.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  InjectionToken,\n  OnDestroy,\n  Signal,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { NeuUrlStateService } from '@neural-ui/core/url-state';\n\n// ----------------------------------------------------------------\n// Token de contexto — permite a NeuTabPanelComponent inyectar\n// la instancia padre sin pasar signals manualmente.\n// ----------------------------------------------------------------\nexport const NEU_TABS_CONTEXT = new InjectionToken<NeuTabsComponent>('NeuTabsContext');\n\nexport interface NeuTab {\n  /** ID único de la pestaña — se usa como valor en la URL / Unique tab ID — used as the URL value */\n  id: string;\n  /** Etiqueta visible / Visible label */\n  label: string;\n  /** Badge opcional junto al label / Optional badge next to the label */\n  badge?: string;\n  /** Deshabilita la pestaña sin ocultarla / Disables the tab without hiding it */\n  disabled?: boolean;\n}\n\n/**\n * NeuralUI Tabs Component\n *\n * Sistema de pestañas con estado sincronizado a la URL via NeuUrlStateService. / Tab system with state synchronized to the URL via NeuUrlStateService.\n * El panel activo se determina por ?{tabParam}={tabId}. / The active panel is determined by ?{tabParam}={tabId}.\n *\n * Uso:\n *   <neu-tabs [tabs]=\"tabs\" tabParam=\"tab\">\n *     <neu-tab-panel tabId=\"preview\">...</neu-tab-panel>\n *     <neu-tab-panel tabId=\"api\">...</neu-tab-panel>\n *   </neu-tabs>\n */\n@Component({\n  selector: 'neu-tabs',\n  imports: [],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: NEU_TABS_CONTEXT, useExisting: NeuTabsComponent }],\n  template: `\n    <!-- Barra de pestañas -->\n    <div class=\"neu-tabs\" [class.neu-tabs--flush]=\"flush()\">\n      <div\n        class=\"neu-tabs__nav\"\n        role=\"tablist\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [class.neu-tabs__nav--dragging]=\"isDraggingNav()\"\n        #navRef\n        (pointerdown)=\"startNavDrag($event)\"\n        (pointermove)=\"moveNavDrag($event)\"\n        (pointerup)=\"endNavDrag($event)\"\n        (pointercancel)=\"endNavDrag($event)\"\n      >\n        @for (tab of tabs(); track tab.id) {\n          <button\n            class=\"neu-tabs__tab\"\n            [class.neu-tabs__tab--active]=\"activeTabId() === tab.id\"\n            [class.neu-tabs__tab--disabled]=\"tab.disabled\"\n            role=\"tab\"\n            [id]=\"'neu-tab-' + tab.id\"\n            [attr.aria-selected]=\"activeTabId() === tab.id\"\n            [attr.aria-controls]=\"'neu-tabpanel-' + tab.id\"\n            [attr.tabindex]=\"activeTabId() === tab.id ? '0' : '-1'\"\n            [disabled]=\"tab.disabled\"\n            type=\"button\"\n            (click)=\"handleTabClick($event, tab)\"\n            (keydown.arrowRight)=\"focusTab($any($event), 1)\"\n            (keydown.arrowLeft)=\"focusTab($any($event), -1)\"\n            (keydown.home)=\"focusTab($any($event), 'first')\"\n            (keydown.end)=\"focusTab($any($event), 'last')\"\n          >\n            {{ tab.label }}\n            @if (tab.badge) {\n              <span class=\"neu-tabs__tab-badge\">{{ tab.badge }}</span>\n            }\n          </button>\n        }\n        <!-- Indicador deslizante -->\n        <span class=\"neu-tabs__indicator\" [style]=\"indicatorStyle()\"></span>\n      </div>\n\n      <!-- Paneles (proyectados desde NeuTabPanelComponent) -->\n      <div class=\"neu-tabs__panels\">\n        <ng-content />\n      </div>\n    </div>\n  `,\n  styleUrl: './neu-tabs.component.scss',\n})\nexport class NeuTabsComponent implements AfterViewInit, OnDestroy {\n  private readonly urlState = inject(NeuUrlStateService);\n  private readonly elRef = inject(ElementRef);\n  private resizeObserver?: ResizeObserver;\n  private readonly _urlParamSignals = new Map<string, Signal<string | null>>();\n  private _dragPointerId: number | null = null;\n  private _dragStartX = 0;\n  private _dragStartScrollLeft = 0;\n  private _suppressNextClick = false;\n  readonly isDraggingNav = signal(false);\n\n  private _getUrlParamSignal(key: string): Signal<string | null> {\n    let paramSignal = this._urlParamSignals.get(key);\n    if (!paramSignal) {\n      paramSignal = this.urlState.getParam(key);\n      this._urlParamSignals.set(key, paramSignal);\n    }\n    return paramSignal;\n  }\n\n  private _readUrlParam(key: string): string | null {\n    return this._getUrlParamSignal(key)();\n  }\n\n  constructor() {\n    // Actualizar indicador cuando activeTabId cambie — debe estar en el constructor (injection context)\n    effect(() => {\n      this.activeTabId(); // dependencia reactiva\n      requestAnimationFrame(() => this._updateIndicator());\n    });\n  }\n\n  /** Definición de pestañas / Tab definitions */\n  tabs = input<NeuTab[]>([]);\n\n  /** QueryParam que almacena la pestaña activa / QueryParam that stores the active tab */\n  tabParam = input<string>('tab');\n\n  /** Si true, elimina el padding interno de los paneles / If true, removes the internal padding from panels */\n  flush = input<boolean>(false);\n\n  /** Etiqueta accesible del rol tablist / Accessible label for the tablist role */\n  ariaLabel = input<string>('Pestañas de contenido');\n\n  /** Emite al cambiar de pestaña / Emits when the tab changes */\n  tabChange = output<string>();\n\n  /** ID de la pestaña activa (de la URL o la primera disponible) / Active tab ID (from the URL or the first available) */\n  readonly activeTabId = computed(() => {\n    const fromUrl = this._readUrlParam(this.tabParam());\n    const available = this.tabs().find((t) => t.id === fromUrl && !t.disabled);\n    if (available) return available.id;\n    // Fallback: primera pestaña no deshabilitada\n    return this.tabs().find((t) => !t.disabled)?.id ?? '';\n  });\n\n  /** Posición del indicador calculada mediante medición DOM / Indicator position calculated via DOM measurement */\n  private readonly _indicatorLeft = signal('0px');\n  private readonly _indicatorWidth = signal('0px');\n\n  readonly indicatorStyle = computed(\n    () => `left: ${this._indicatorLeft()}; width: ${this._indicatorWidth()}`,\n  );\n\n  ngAfterViewInit(): void {\n    this._updateIndicator();\n    // Actualizar cuando cambie el tamaño del nav (p.ej. resize de ventana)\n    const nav = this.elRef.nativeElement.querySelector('.neu-tabs__nav');\n    if (nav && typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(() => this._updateIndicator());\n      this.resizeObserver.observe(nav);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  private _updateIndicator(): void {\n    const nav: HTMLElement | null = this.elRef.nativeElement.querySelector('.neu-tabs__nav');\n    if (!nav) return;\n    const tabEls = nav.querySelectorAll<HTMLElement>('.neu-tabs__tab');\n    const idx = this.tabs().findIndex((t) => t.id === this.activeTabId());\n    const tabEl = tabEls[idx];\n    if (tabEl) {\n      this._indicatorLeft.set(tabEl.offsetLeft + 'px');\n      this._indicatorWidth.set(tabEl.offsetWidth + 'px');\n      if (typeof tabEl.scrollIntoView === 'function') {\n        tabEl.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }\n  }\n\n  handleTabClick(event: Event, tab: NeuTab): void {\n    if (this._suppressNextClick) {\n      event.preventDefault();\n      event.stopPropagation();\n      this._suppressNextClick = false;\n      return;\n    }\n    this.selectTab(tab);\n  }\n\n  selectTab(tab: NeuTab): void {\n    if (tab.disabled) return;\n    this.urlState.setParam(this.tabParam(), tab.id);\n    this.tabChange.emit(tab.id);\n    requestAnimationFrame(() => this._updateIndicator());\n  }\n\n  startNavDrag(event: PointerEvent): void {\n    if (event.pointerType === 'mouse' && event.button !== 0) return;\n    const target = event.target as HTMLElement | null;\n    if (!target?.closest('.neu-tabs__nav')) return;\n\n    const nav = event.currentTarget as HTMLElement;\n    this._dragPointerId = event.pointerId;\n    this._dragStartX = event.clientX;\n    this._dragStartScrollLeft = nav.scrollLeft;\n    this.isDraggingNav.set(false);\n    nav.setPointerCapture(event.pointerId);\n  }\n\n  moveNavDrag(event: PointerEvent): void {\n    if (this._dragPointerId !== event.pointerId) return;\n\n    const nav = event.currentTarget as HTMLElement;\n    const deltaX = event.clientX - this._dragStartX;\n    if (!this.isDraggingNav() && Math.abs(deltaX) > 6) {\n      this.isDraggingNav.set(true);\n      this._suppressNextClick = true;\n    }\n    if (!this.isDraggingNav()) return;\n\n    nav.scrollLeft = this._dragStartScrollLeft - deltaX;\n    event.preventDefault();\n  }\n\n  endNavDrag(event: PointerEvent): void {\n    if (this._dragPointerId !== event.pointerId) return;\n\n    const nav = event.currentTarget as HTMLElement;\n    if (nav.hasPointerCapture(event.pointerId)) {\n      nav.releasePointerCapture(event.pointerId);\n    }\n    this._dragPointerId = null;\n    if (this.isDraggingNav()) {\n      requestAnimationFrame(() => this.isDraggingNav.set(false));\n    }\n  }\n\n  /** Mueve el foco entre tabs con flechas (roving tabindex — WAI-ARIA Tabs Pattern) / Moves focus between tabs with arrows (roving tabindex — WAI-ARIA Tabs Pattern) */\n  focusTab(event: Event, dir: 1 | -1 | 'first' | 'last'): void {\n    event.preventDefault();\n    const enabledTabs = this.tabs().filter((t) => !t.disabled);\n    const currentIdx = enabledTabs.findIndex((t) => t.id === this.activeTabId());\n    let nextIdx: number;\n    if (dir === 'first') {\n      nextIdx = 0;\n    } else if (dir === 'last') {\n      nextIdx = enabledTabs.length - 1;\n    } else {\n      nextIdx = (currentIdx + dir + enabledTabs.length) % enabledTabs.length;\n    }\n    const next = enabledTabs[nextIdx];\n    this.selectTab(next);\n    const btn = (this.elRef.nativeElement as HTMLElement).querySelector(\n      `#neu-tab-${next.id}`,\n    ) as HTMLElement | null;\n    btn?.focus();\n  }\n}\n\n// ----------------------------------------------------------------\n// NeuTabPanelComponent — panel individual (usa DI para el contexto)\n// ----------------------------------------------------------------\n\n/**\n * NeuralUI Tab Panel\n *\n * Panel de contenido asociado a una pestaña de NeuTabsComponent. / Content panel associated with a NeuTabsComponent tab.\n * Solo se renderiza (no oculta con CSS) cuando la pestaña está activa. / Only rendered (not hidden with CSS) when the tab is active.\n *\n * Uso: hijo directo de <neu-tabs>\n *   <neu-tab-panel tabId=\"api\">...</neu-tab-panel>\n */\n@Component({\n  selector: 'neu-tab-panel',\n  imports: [],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    @if (isActive()) {\n      <div\n        class=\"neu-tab-panel\"\n        role=\"tabpanel\"\n        [id]=\"'neu-tabpanel-' + tabId()\"\n        [attr.aria-labelledby]=\"'neu-tab-' + tabId()\"\n      >\n        <ng-content />\n      </div>\n    }\n  `,\n})\nexport class NeuTabPanelComponent {\n  private readonly tabs = inject(NEU_TABS_CONTEXT, { optional: true });\n\n  /** ID que debe coincidir con NeuTab.id del padre / ID that must match the parent NeuTab.id */\n  tabId = input.required<string>();\n\n  readonly isActive = computed(() => this.tabs?.activeTabId() === this.tabId());\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neural-ui/core",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Modern Angular UI component library built with signals, standalone components, and OnPush change detection.",
   "author": "PedroMorenoTrujillo",
   "keywords": [

package/types/neural-ui-core-autocomplete.d.ts

@@ -27,6 +27,8 @@ declare class NeuAutocompleteComponent implements ControlValueAccessor {
     readonly options: _angular_core.InputSignal<NeuAutocompleteOption[]>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<string>;
+    readonly hint: _angular_core.InputSignal<string>;
+    readonly errorMessage: _angular_core.InputSignal<string>;
     readonly emptyLabel: _angular_core.InputSignal<string>;
     readonly minLength: _angular_core.InputSignal<number>;
     /** Muestra el label como flotante (true) o estático encima del campo (false) / Shows the label as floating (true) or static above the field (false) */
@@ -48,6 +50,9 @@ declare class NeuAutocompleteComponent implements ControlValueAccessor {
     private _onTouched;
     readonly _filtered: _angular_core.Signal<NeuAutocompleteOption[]>;
     readonly _activeId: _angular_core.Signal<string | null>;
+    readonly hasError: _angular_core.Signal<boolean>;
+    readonly describedBy: _angular_core.Signal<string | null>;
+    readonly resultsAnnouncement: _angular_core.Signal<string>;
     _optionId(i: number): string;
     private readonly _el;
     onDocClick(e: MouseEvent): void;
@@ -55,6 +60,7 @@ declare class NeuAutocompleteComponent implements ControlValueAccessor {
     _onFocus(): void;
     _onBlur(): void;
     onKeyDown(e: KeyboardEvent): void;
+    private _moveActiveIndex;
     selectOption(opt: NeuAutocompleteOption): void;
     clear(): void;
     writeValue(val: unknown): void;
@@ -62,7 +68,7 @@ declare class NeuAutocompleteComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(d: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NeuAutocompleteComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NeuAutocompleteComponent, "neu-autocomplete", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "optionSelected": "optionSelected"; "queryChange": "queryChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NeuAutocompleteComponent, "neu-autocomplete", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "optionSelected": "optionSelected"; "queryChange": "queryChange"; }, never, never, true, never>;
 }
 
 export { NeuAutocompleteComponent };

package/types/neural-ui-core-multiselect.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef } from '@angular/core';
+import { TemplateRef, Signal } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { NeuSelectOption } from '@neural-ui/core/select';
 export { NeuSelectOption } from '@neural-ui/core/select';
@@ -40,11 +40,14 @@ declare class NeuMultiselectComponent implements ControlValueAccessor {
     private readonly _urlState;
     private readonly _mobileViewportMax;
     private readonly _viewportMargin;
+    private readonly _urlParamSignals;
+    private _getUrlParamSignal;
     constructor();
     /** @internal */
     readonly _triggerId: string;
+    readonly _panelId: string;
     /** Template personalizado para cada opción del dropdown / Custom template for each dropdown option */
-    readonly itemTpl: _angular_core.Signal<NeuMultiselectItemDirective | undefined>;
+    readonly itemTpl: Signal<NeuMultiselectItemDirective | undefined>;
     /** Opciones del dropdown / Dropdown options */
     options: _angular_core.InputSignal<NeuSelectOption[]>;
     /** Etiqueta del componente / Component label */
@@ -57,6 +60,8 @@ declare class NeuMultiselectComponent implements ControlValueAccessor {
     placeholder: _angular_core.InputSignal<string>;
     /** Mensaje de error / Error message */
     errorMessage: _angular_core.InputSignal<string>;
+    /** Texto de ayuda bajo el campo / Helper text below the field */
+    hint: _angular_core.InputSignal<string>;
     /** Deshabilita el componente / Disables the component */
     disabled: _angular_core.InputSignal<boolean>;
     /** Activa input de búsqueda/filtro en el panel / Activates the search/filter input in the panel */
@@ -94,9 +99,11 @@ declare class NeuMultiselectComponent implements ControlValueAccessor {
         width: string | null;
         maxHeight: string | null;
     }>;
-    readonly _visibleChips: _angular_core.Signal<string[]>;
-    readonly hasError: _angular_core.Signal<boolean>;
-    readonly filteredOptions: _angular_core.Signal<NeuSelectOption[]>;
+    readonly _visibleChips: Signal<string[]>;
+    readonly hasError: Signal<boolean>;
+    readonly describedBy: Signal<string | null>;
+    readonly filteredOptions: Signal<NeuSelectOption[]>;
+    readonly resultsAnnouncement: Signal<string>;
     private _onChange;
     private _onTouched;
     writeValue(value: string[] | null): void;
@@ -104,12 +111,14 @@ declare class NeuMultiselectComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     private readonly _cvaDisabled;
     setDisabledState(isDisabled: boolean): void;
-    readonly isDisabledFinal: _angular_core.Signal<boolean>;
+    readonly isDisabledFinal: Signal<boolean>;
     protected labelFor(value: string): string;
     protected isSelected(value: string): boolean;
     protected toggle(): void;
     /** Abre el panel y mueve el foco al primer item / Opens the panel and moves focus to the first item */
     onTriggerKey(event: Event): void;
+    onTriggerActionKey(event: KeyboardEvent): void;
+    focusTrigger(): void;
     /** Navega entre opciones con flechas / Navigates between options with arrows */
     focusOptionByIndex(event: Event, current: NeuSelectOption, dir: 1 | -1): void;
     protected close(): void;
@@ -123,7 +132,7 @@ declare class NeuMultiselectComponent implements ControlValueAccessor {
     private syncPanelPosition;
     private resetPanelPosition;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NeuMultiselectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NeuMultiselectComponent, "neu-multiselect", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultsMessage": { "alias": "noResultsMessage"; "required": false; "isSignal": true; }; "clearAllLabel": { "alias": "clearAllLabel"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "urlParam": { "alias": "urlParam"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, ["itemTpl"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NeuMultiselectComponent, "neu-multiselect", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultsMessage": { "alias": "noResultsMessage"; "required": false; "isSignal": true; }; "clearAllLabel": { "alias": "clearAllLabel"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "urlParam": { "alias": "urlParam"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, ["itemTpl"], never, true, never>;
 }
 
 export { NeuMultiselectComponent, NeuMultiselectItemDirective };

package/types/neural-ui-core-select.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef } from '@angular/core';
+import { TemplateRef, Signal } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
 interface NeuSelectOption {
@@ -75,13 +75,16 @@ declare class NeuSelectComponent implements ControlValueAccessor {
     private readonly _urlState;
     private readonly _mobileViewportMax;
     private readonly _viewportMargin;
+    private readonly _urlParamSignals;
+    private _getUrlParamSignal;
     constructor();
     /** @internal — ID \u00fanico para asociar label con trigger */
     readonly _triggerId: string;
+    readonly _panelId: string;
     /** Template personalizado para cada opción del dropdown / Custom template for each dropdown option */
-    readonly itemTpl: _angular_core.Signal<NeuSelectItemDirective | undefined>;
+    readonly itemTpl: Signal<NeuSelectItemDirective | undefined>;
     /** Template personalizado para el valor seleccionado en el trigger / Custom template for the selected value in the trigger */
-    readonly selectedItemTpl: _angular_core.Signal<NeuSelectSelectedDirective | undefined>;
+    readonly selectedItemTpl: Signal<NeuSelectSelectedDirective | undefined>;
     /** Opciones del dropdown / Dropdown options */
     options: _angular_core.InputSignal<NeuSelectOption[]>;
     /** Texto del floating label / Floating label text */
@@ -90,6 +93,8 @@ declare class NeuSelectComponent implements ControlValueAccessor {
     placeholder: _angular_core.InputSignal<string>;
     /** Mensaje de error / Error message */
     errorMessage: _angular_core.InputSignal<string>;
+    /** Texto de ayuda bajo el campo / Helper text below the field */
+    hint: _angular_core.InputSignal<string>;
     /** Deshabilita el select / Disables the select */
     disabled: _angular_core.InputSignal<boolean>;
     /** Muestra el label como flotante (true) o como label estático encima (false, por defecto) / Shows the label as floating (true) or static above (false, default) */
@@ -128,10 +133,12 @@ declare class NeuSelectComponent implements ControlValueAccessor {
         width: string | null;
         maxHeight: string | null;
     }>;
-    readonly hasError: _angular_core.Signal<boolean>;
-    readonly filteredOptions: _angular_core.Signal<NeuSelectOption[]>;
-    readonly selectedLabel: _angular_core.Signal<string | null>;
-    readonly _selectedOption: _angular_core.Signal<NeuSelectOption | null>;
+    readonly hasError: Signal<boolean>;
+    readonly describedBy: Signal<string | null>;
+    readonly filteredOptions: Signal<NeuSelectOption[]>;
+    readonly selectedLabel: Signal<string | null>;
+    readonly _selectedOption: Signal<NeuSelectOption | null>;
+    readonly resultsAnnouncement: Signal<string>;
     private _onChange;
     private _onTouched;
     writeValue(val: string | null): void;
@@ -139,11 +146,13 @@ declare class NeuSelectComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     private readonly _cvaDisabled;
     setDisabledState(isDisabled: boolean): void;
-    readonly isDisabledFinal: _angular_core.Signal<boolean>;
+    readonly isDisabledFinal: Signal<boolean>;
     toggle(): void;
     close(): void;
     /** Abre el panel y navega con flechas desde el trigger / Opens the panel and navigates with arrows from the trigger */
     onTriggerKey(event: Event): void;
+    onTriggerActionKey(event: KeyboardEvent): void;
+    focusTrigger(): void;
     /** Navega entre opciones con flechas / Navigates between options with arrows */
     focusOptionByIndex(event: Event, current: NeuSelectOption, dir: 1 | -1): void;
     clearValue(event: MouseEvent): void;
@@ -154,7 +163,7 @@ declare class NeuSelectComponent implements ControlValueAccessor {
     private syncPanelPosition;
     private resetPanelPosition;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NeuSelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NeuSelectComponent, "neu-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "noResultsMessage": { "alias": "noResultsMessage"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "urlParam": { "alias": "urlParam"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, ["itemTpl", "selectedItemTpl"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NeuSelectComponent, "neu-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "noResultsMessage": { "alias": "noResultsMessage"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "urlParam": { "alias": "urlParam"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, ["itemTpl", "selectedItemTpl"], never, true, never>;
 }
 
 export { NeuSelectComponent, NeuSelectItemDirective, NeuSelectSelectedDirective };

package/types/neural-ui-core-table.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef } from '@angular/core';
+import { TemplateRef, Signal } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { NeuSelectOption } from '@neural-ui/core/select';
 
@@ -110,7 +110,7 @@ declare class NeuTableComponent {
     private readonly _destroyRef;
     private readonly _urlState;
     private readonly _platformId;
-    readonly expandTemplate: _angular_core.Signal<NeuTableExpandDirective | undefined>;
+    readonly expandTemplate: Signal<NeuTableExpandDirective | undefined>;
     readonly columns: _angular_core.InputSignal<NeuTableColumn<Record<string, unknown>>[]>;
     readonly data: _angular_core.InputSignal<object[]>;
     readonly pageSize: _angular_core.InputSignal<number>;
@@ -189,58 +189,61 @@ declare class NeuTableComponent {
     private readonly _internalSortKey;
     private readonly _internalSortDir;
     private readonly _internalMultiSort;
-    readonly currentPage: _angular_core.Signal<number>;
-    readonly searchQuery: _angular_core.Signal<string>;
-    readonly sortKey: _angular_core.Signal<string>;
-    readonly sortDir: _angular_core.Signal<"asc" | "desc">;
+    private readonly _urlParamSignals;
+    private _getUrlParamSignal;
+    private _readUrlParam;
+    readonly currentPage: Signal<number>;
+    readonly searchQuery: Signal<string>;
+    readonly sortKey: Signal<string>;
+    readonly sortDir: Signal<"asc" | "desc">;
     private readonly rows;
     private readonly _exactMatch;
-    readonly exactMatch: _angular_core.Signal<boolean>;
+    readonly exactMatch: Signal<boolean>;
     /**
      * Multi-sort entries derived from URL param or internal state.
      * Entradas de multisort derivadas del param de URL o del estado interno.
      */
-    readonly _sortEntries: _angular_core.Signal<NeuTableSortEntry[]>;
+    readonly _sortEntries: Signal<NeuTableSortEntry[]>;
     readonly _columnFilters: _angular_core.WritableSignal<Record<string, unknown>>;
     readonly _pageSizeControl: FormControl<string>;
     private readonly _columnFilterControls;
     /** True when at least one column has filterable:true / True si alguna columna tiene filterable:true */
-    readonly _hasFilterableCol: _angular_core.Signal<boolean>;
+    readonly _hasFilterableCol: Signal<boolean>;
     /** Convierte filterOptions de string[] a NeuSelectOption[] con opción "Todos" al inicio.
      *  Converts filterOptions from string[] to NeuSelectOption[] with a leading "All" option. */
     _filterOpts(col: NeuTableColumn): NeuSelectOption[];
-    readonly _pageSizeOptions: _angular_core.Signal<NeuSelectOption[]>;
+    readonly _pageSizeOptions: Signal<NeuSelectOption[]>;
     constructor();
     private readonly _confirmPending;
     private readonly _rows;
-    readonly filteredData: _angular_core.Signal<Row[]>;
-    readonly sortedData: _angular_core.Signal<Row[]>;
+    readonly filteredData: Signal<Row[]>;
+    readonly sortedData: Signal<Row[]>;
     private readonly _dynamicPageSize;
-    readonly effectivePageSize: _angular_core.Signal<number>;
-    readonly totalPages: _angular_core.Signal<number>;
-    readonly paginatedData: _angular_core.Signal<Row[]>;
-    readonly pageNumbers: _angular_core.Signal<number[]>;
-    readonly paginationInfo: _angular_core.Signal<string>;
-    readonly totalColspan: _angular_core.Signal<number>;
+    readonly effectivePageSize: Signal<number>;
+    readonly totalPages: Signal<number>;
+    readonly paginatedData: Signal<Row[]>;
+    readonly pageNumbers: Signal<number[]>;
+    readonly paginationInfo: Signal<string>;
+    readonly totalColspan: Signal<number>;
     /** Calcula el offset izquierdo acumulado para columnas frozen-left múltiples.
      *  Calculates cumulative left offset for multiple frozen-left columns. */
-    readonly _frozenLeftOffsets: _angular_core.Signal<Map<string, number>>;
-    readonly _lastFrozenLeftKey: _angular_core.Signal<string | null>;
-    readonly _firstFrozenRightKey: _angular_core.Signal<string>;
+    readonly _frozenLeftOffsets: Signal<Map<string, number>>;
+    readonly _lastFrozenLeftKey: Signal<string | null>;
+    readonly _firstFrozenRightKey: Signal<string>;
     isLastFrozenLeftColumn(key: string): boolean;
     isFirstFrozenRightColumn(key: string): boolean;
     private readonly _expandedKeys;
     isRowExpanded(row: Row): boolean;
     toggleExpand(row: Row): void;
     private readonly _selectedKeys;
-    readonly selectedCount: _angular_core.Signal<number>;
-    readonly selectedRowsInfo: _angular_core.Signal<string>;
+    readonly selectedCount: Signal<number>;
+    readonly selectedRowsInfo: Signal<string>;
     /**
      * TRUE cuando TODOS los registros que pasan el filtro activo están seleccionados.
      * A diferencia de una selección global, actúa solo sobre el subconjunto filtrado.
      */
-    readonly isAllFilteredSelected: _angular_core.Signal<boolean>;
-    readonly isSomeFilteredSelected: _angular_core.Signal<boolean>;
+    readonly isAllFilteredSelected: Signal<boolean>;
+    readonly isSomeFilteredSelected: Signal<boolean>;
     isRowSelected(row: Row): boolean;
     toggleRow(row: Row): void;
     /** Selecciona/deselecciona SOLO los datos filtrados activos. */