@nucleus-suite-pe/core 2.1.0 → 2.3.0

package/fesm2022/nucleus-suite-pe-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, Injector, signal, computed, Injectable, effect, DestroyRef, ElementRef, input, Directive, model, untracked, ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, TemplateRef, viewChild, output, afterNextRender, contentChildren } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, Injector, signal, computed, Injectable, effect, Pipe, DestroyRef, ElementRef, input, Directive, model, untracked, ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, TemplateRef, viewChild, output, afterNextRender, contentChildren } from '@angular/core';
 import { HttpContextToken, HttpClient, HttpContext, HttpErrorResponse } from '@angular/common/http';
 import { firstValueFrom, from, switchMap, catchError, throwError } from 'rxjs';
 import { Router, RouterLink, NavigationEnd } from '@angular/router';
@@ -24,23 +24,26 @@ import * as i5 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
 import * as i6 from 'primeng/toggleswitch';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
+import { CdkDrag, CdkDragHandle, CdkDropList } from '@angular/cdk/drag-drop';
 import * as i1$2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i3$1 from 'primeng/table';
+import * as i2$3 from 'primeng/paginator';
+import { PaginatorModule } from 'primeng/paginator';
+import * as i4 from 'primeng/table';
 import { TableModule } from 'primeng/table';
-import * as i4 from 'primeng/tag';
+import * as i5$1 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
-import * as i5$1 from 'primeng/tooltip';
+import * as i6$1 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 import * as i1$3 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
-import * as i2$3 from 'primeng/breadcrumb';
+import * as i2$4 from 'primeng/breadcrumb';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
 import * as i4$1 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import * as i5$2 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
-import * as i6$1 from 'primeng/drawer';
+import * as i6$2 from 'primeng/drawer';
 import { DrawerModule } from 'primeng/drawer';
 
 const NUCLEUS_CONFIG = new InjectionToken('NUCLEUS_CONFIG');
@@ -361,6 +364,10 @@ const COMMON_COPY = {
         noColor: 'Sin color',
         searchIcon: 'Busca un icono',
         noMatches: 'Ningún icono coincide',
+        reorderHandle: 'Arrastra para cambiar el orden',
+        noResults: 'Ningún registro coincide con la búsqueda',
+        viewGrid: 'Vista en mosaico',
+        viewRows: 'Vista en filas',
         sessionExpired: 'Tu sesión expiró. Vuelve a iniciar sesión.',
         errorNetwork: 'No se pudo conectar con el servidor. Revisa tu conexión o inténtalo en unos minutos.',
         errorTimeout: 'El servidor tardó demasiado en responder. Inténtalo de nuevo.',
@@ -379,6 +386,10 @@ const COMMON_COPY = {
         noColor: 'No colour',
         searchIcon: 'Search an icon',
         noMatches: 'No icon matches',
+        reorderHandle: 'Drag to reorder',
+        noResults: 'No records match your search',
+        viewGrid: 'Tile view',
+        viewRows: 'Row view',
         sessionExpired: 'Your session expired. Sign in again.',
         errorNetwork: 'Could not reach the server. Check your connection or try again in a moment.',
         errorTimeout: 'The server took too long to answer. Try again.',
@@ -488,8 +499,12 @@ class SessionService {
         if (!me)
             return [];
         return [
-            ...me.ownedCompanies.map((company) => toOption(company, 'owner')),
-            ...me.sharedCompanies.map((company) => toOption(company, 'collaborator')),
+            ...me.ownedCompanies
+                .filter((company) => company.isActive)
+                .map((company) => toOption(company, 'owner')),
+            ...me.sharedCompanies
+                .filter((company) => company.isActive)
+                .map((company) => toOption(company, 'collaborator')),
         ];
     }, ...(ngDevMode ? [{ debugName: "companyOptions" }] : /* istanbul ignore next */ []));
     companyId = computed(() => {
@@ -829,7 +844,7 @@ function isoDay(value) {
     const date = String(parsed.getDate()).padStart(2, '0');
     return `${year}-${month}-${date}`;
 }
-function toNumber(value) {
+function toNumber$1(value) {
     const parsed = typeof value === 'number' ? value : Number(value);
     return Number.isFinite(parsed) ? parsed : 0;
 }
@@ -856,6 +871,82 @@ function endOfDayUtc(value) {
     return `${isoDay(nucleusParseDate(value))}T23:59:59.999Z`;
 }
 
+const COMPACT_LOCALES = { es: 'es-PE', en: 'en-US' };
+const BYTE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+function trim(value) {
+    return value.endsWith('.0') ? value.slice(0, -2) : value;
+}
+function compactNumber(value) {
+    if (!Number.isFinite(value))
+        return '—';
+    const abs = Math.abs(value);
+    const locale = COMPACT_LOCALES[nucleusLang()] ?? 'en-US';
+    let digits = 0;
+    if (abs >= 1000) {
+        const unit = 1000 ** Math.floor(Math.log10(abs) / 3);
+        digits = Math.abs(value / unit) < 10 ? 1 : 0;
+    }
+    const text = new Intl.NumberFormat(locale, {
+        notation: 'compact',
+        compactDisplay: 'short',
+        maximumFractionDigits: digits,
+    }).format(value);
+    return text.replace(/(\d)\s?k$/, '$1 K');
+}
+function compactBytes(value) {
+    if (!Number.isFinite(value) || value <= 0)
+        return '0 B';
+    const index = Math.min(Math.floor(Math.log(value) / Math.log(1024)), BYTE_UNITS.length - 1);
+    const scaled = value / 1024 ** index;
+    const digits = index === 0 ? 0 : scaled < 10 ? 1 : 0;
+    return `${trim(scaled.toFixed(digits))} ${BYTE_UNITS[index]}`;
+}
+function compactMegabytes(value) {
+    return compactBytes(value * 1024 * 1024);
+}
+function toNumber(value) {
+    if (value === null || value === undefined || value === '')
+        return null;
+    const parsed = typeof value === 'number' ? value : Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+class NucleusCompact {
+    transform(value, fallback = '—') {
+        const parsed = toNumber(value);
+        return parsed === null ? fallback : compactNumber(parsed);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusCompact, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: NucleusCompact, isStandalone: true, name: "nucleusCompact" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusCompact, decorators: [{
+            type: Pipe,
+            args: [{ name: 'nucleusCompact' }]
+        }] });
+class NucleusBytes {
+    transform(value, fallback = '—') {
+        const parsed = toNumber(value);
+        return parsed === null ? fallback : compactBytes(parsed);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusBytes, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: NucleusBytes, isStandalone: true, name: "nucleusBytes" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusBytes, decorators: [{
+            type: Pipe,
+            args: [{ name: 'nucleusBytes' }]
+        }] });
+class NucleusMegabytes {
+    transform(value, fallback = '—') {
+        const parsed = toNumber(value);
+        return parsed === null ? fallback : compactMegabytes(parsed);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusMegabytes, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: NucleusMegabytes, isStandalone: true, name: "nucleusMegabytes" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusMegabytes, decorators: [{
+            type: Pipe,
+            args: [{ name: 'nucleusMegabytes' }]
+        }] });
+
 const FIELD_TARGETS = [
     'input:not([type="hidden"]):not([disabled])',
     'textarea:not([disabled])',
@@ -1487,12 +1578,12 @@ const FRAMES = [
         starfield: true,
         accent: 'violet',
         tokens: {
-            bg: '#16132b',
-            raised: '#241f42',
+            bg: '#1f1646',
+            raised: '#2c2160',
             ink: '#ece9fb',
-            muted: '#9d95c6',
-            line: '#302a54',
-            glow: '#8c7ff0',
+            muted: '#9690af',
+            line: '#403863',
+            glow: '#a78bfa',
         },
     },
     {
@@ -1501,12 +1592,12 @@ const FRAMES = [
         starfield: false,
         accent: 'blue',
         tokens: {
-            bg: '#131f33',
-            raised: '#1e2e48',
-            ink: '#e3ecfa',
-            muted: '#94a9c9',
-            line: '#2b3d5d',
-            glow: '#6ea8f0',
+            bg: '#12244a',
+            raised: '#1b3263',
+            ink: '#e6edf9',
+            muted: '#95a1b7',
+            line: '#344466',
+            glow: '#60a5fa',
         },
     },
     {
@@ -1515,12 +1606,12 @@ const FRAMES = [
         starfield: false,
         accent: 'cyan',
         tokens: {
-            bg: '#0d2a30',
-            raised: '#153c45',
-            ink: '#e0f2f4',
-            muted: '#8cb3b9',
-            line: '#1d4e58',
-            glow: '#4cc5e8',
+            bg: '#0b3a44',
+            raised: '#124d59',
+            ink: '#e3f3f6',
+            muted: '#a2bcc1',
+            line: '#2e5860',
+            glow: '#22d3ee',
         },
     },
     {
@@ -1529,26 +1620,26 @@ const FRAMES = [
         starfield: false,
         accent: 'green',
         tokens: {
-            bg: '#122419',
-            raised: '#1d3526',
-            ink: '#e2f1e7',
-            muted: '#93b8a1',
-            line: '#28462f',
-            glow: '#5cc47f',
+            bg: '#0f3d2b',
+            raised: '#18523b',
+            ink: '#e6f2eb',
+            muted: '#aabfb5',
+            line: '#315a4a',
+            glow: '#4ade80',
         },
     },
     {
         id: 'plum',
         scheme: 'dark',
         starfield: false,
-        accent: 'rose',
+        accent: 'plum',
         tokens: {
-            bg: '#241330',
-            raised: '#341e43',
-            ink: '#f3e8f7',
-            muted: '#b596c3',
-            line: '#452851',
-            glow: '#cf7fdb',
+            bg: '#3a1a4f',
+            raised: '#4d2666',
+            ink: '#f3e8fa',
+            muted: '#b09ebc',
+            line: '#583b6a',
+            glow: '#c084fc',
         },
     },
     {
@@ -1557,12 +1648,12 @@ const FRAMES = [
         starfield: false,
         accent: 'red',
         tokens: {
-            bg: '#2a1113',
-            raised: '#3d1b1f',
-            ink: '#f8e6e7',
-            muted: '#c9979c',
-            line: '#4d2429',
-            glow: '#f0797b',
+            bg: '#4a1519',
+            raised: '#611f24',
+            ink: '#fbe9e9',
+            muted: '#b8989a',
+            line: '#66373a',
+            glow: '#f87171',
         },
     },
     {
@@ -1571,12 +1662,12 @@ const FRAMES = [
         starfield: false,
         accent: 'amber',
         tokens: {
-            bg: '#2b2415',
-            raised: '#3d3320',
-            ink: '#f6efdd',
-            muted: '#c2b18b',
-            line: '#4b3f28',
-            glow: '#e0a33a',
+            bg: '#3d2d12',
+            raised: '#52401c',
+            ink: '#f7efdd',
+            muted: '#bbb19c',
+            line: '#5b4c32',
+            glow: '#fbbf24',
         },
     },
     {
@@ -1585,12 +1676,12 @@ const FRAMES = [
         starfield: false,
         accent: 'blue',
         tokens: {
-            bg: '#232b36',
-            raised: '#313c4b',
-            ink: '#e6ecf4',
-            muted: '#9fb0c4',
-            line: '#3d4a5b',
-            glow: '#6fb2ea',
+            bg: '#27313f',
+            raised: '#354254',
+            ink: '#e8edf3',
+            muted: '#aab1b9',
+            line: '#464f5c',
+            glow: '#60a5fa',
         },
     },
     {
@@ -1601,10 +1692,10 @@ const FRAMES = [
         tokens: {
             bg: '#101318',
             raised: '#1b2129',
-            ink: '#edf0f4',
-            muted: '#97a1ae',
-            line: '#262d37',
-            glow: '#7fb3d9',
+            ink: '#e9edf2',
+            muted: '#85898e',
+            line: '#33363b',
+            glow: '#94a3b8',
         },
     },
     {
@@ -1615,10 +1706,10 @@ const FRAMES = [
         tokens: {
             bg: '#17171a',
             raised: '#232327',
-            ink: '#eeeef0',
-            muted: '#9c9ca4',
-            line: '#2f2f35',
-            glow: '#b9b9c2',
+            ink: '#ededf0',
+            muted: '#8b8b8e',
+            line: '#39393c',
+            glow: '#a1a1aa',
         },
     },
     {
@@ -1630,9 +1721,9 @@ const FRAMES = [
             bg: '#ffffff',
             raised: '#f1f0f5',
             ink: '#16151d',
-            muted: '#5e5c6b',
-            line: '#e3e2ea',
-            glow: '#5b4fd6',
+            muted: '#6a696e',
+            line: '#dadadb',
+            glow: '#7c3aed',
         },
     },
     {
@@ -1644,9 +1735,65 @@ const FRAMES = [
             bg: '#eef1f6',
             raised: '#e2e7ef',
             ink: '#141a24',
-            muted: '#576274',
-            line: '#d3dae5',
-            glow: '#1160b8',
+            muted: '#5e636b',
+            line: '#cbcfd4',
+            glow: '#2563eb',
+        },
+    },
+    {
+        id: 'studio',
+        scheme: 'light',
+        starfield: false,
+        accent: 'amber',
+        tokens: {
+            bg: '#f1cba0',
+            raised: '#f6dfc4',
+            ink: '#3b2f24',
+            muted: '#675442',
+            line: '#d4b28c',
+            glow: '#7a4a0a',
+        },
+    },
+    {
+        id: 'sage',
+        scheme: 'light',
+        starfield: false,
+        accent: 'green',
+        tokens: {
+            bg: '#d3e4d6',
+            raised: '#e3efe5',
+            ink: '#1c2b20',
+            muted: '#536257',
+            line: '#b6c6b9',
+            glow: '#15803d',
+        },
+    },
+    {
+        id: 'sky',
+        scheme: 'light',
+        starfield: false,
+        accent: 'blue',
+        tokens: {
+            bg: '#cfe0f5',
+            raised: '#e0ebf9',
+            ink: '#14213a',
+            muted: '#505e76',
+            line: '#b1c1d7',
+            glow: '#2563eb',
+        },
+    },
+    {
+        id: 'lavender',
+        scheme: 'light',
+        starfield: false,
+        accent: 'violet',
+        tokens: {
+            bg: '#ddd6f3',
+            raised: '#eae5f8',
+            ink: '#221a3d',
+            muted: '#5e5677',
+            line: '#bfb8d6',
+            glow: '#7c3aed',
         },
     },
 ];
@@ -1674,6 +1821,29 @@ const CANVASES = [
             warning: '#8a5a00',
         },
     },
+    {
+        id: 'soft',
+        tokens: {
+            bg: '#d9dce3',
+            surface: '#eef0f4',
+            surfaceAlt: '#dfe3ea',
+            text: '#16151d',
+            textMuted: '#545a66',
+            border: '#c0c6d1',
+        },
+        effects: {
+            shadowOne: '0 1px 2px rgb(16 20 30 / 8%), 0 2px 8px rgb(16 20 30 / 6%)',
+            shadowTwo: '0 4px 12px rgb(16 20 30 / 10%), 0 12px 32px rgb(16 20 30 / 8%)',
+            wash: 0.1,
+            washStrong: 0.18,
+            headerBg: '#c6ccd8',
+            headerInk: '#333a47',
+            headerLine: '#aeb6c4',
+            danger: '#b02121',
+            success: '#136b35',
+            warning: '#8a5a00',
+        },
+    },
     {
         id: 'dim',
         tokens: {
@@ -1722,15 +1892,20 @@ const CANVASES = [
     },
 ];
 const ACCENTS = [
-    { id: 'violet', light: '#5b4fd6', dark: '#9b8ef5' },
-    { id: 'blue', light: '#1160b8', dark: '#6fb2f2' },
-    { id: 'cyan', light: '#0d6f87', dark: '#4cc5e8' },
-    { id: 'green', light: '#157a3c', dark: '#5bd98a' },
-    { id: 'lime', light: '#4d7c0f', dark: '#a3d94b' },
-    { id: 'amber', light: '#8a5a00', dark: '#e0a33a' },
-    { id: 'orange', light: '#b2430c', dark: '#f2934f' },
-    { id: 'rose', light: '#b21b5c', dark: '#f07aab' },
-    { id: 'red', light: '#b02121', dark: '#f0797b' },
+    { id: 'violet', light: '#7c3aed', dark: '#a78bfa' },
+    { id: 'blue', light: '#2563eb', dark: '#60a5fa' },
+    { id: 'cyan', light: '#0e7490', dark: '#22d3ee' },
+    { id: 'green', light: '#15803d', dark: '#4ade80' },
+    { id: 'lime', light: '#4d7c0f', dark: '#a3e635' },
+    { id: 'amber', light: '#b45309', dark: '#fbbf24' },
+    { id: 'orange', light: '#c2410c', dark: '#fb923c' },
+    { id: 'rose', light: '#e11d48', dark: '#fb7185' },
+    { id: 'red', light: '#dc2626', dark: '#f87171' },
+    { id: 'indigo', light: '#4f46e5', dark: '#818cf8' },
+    { id: 'teal', light: '#0f766e', dark: '#2dd4bf' },
+    { id: 'plum', light: '#9333ea', dark: '#c084fc' },
+    { id: 'slate', light: '#64748b', dark: '#94a3b8' },
+    { id: 'graphite', light: '#71717a', dark: '#a1a1aa' },
 ];
 const DENSITIES = [
     { id: 'comfortable', scale: 1 },
@@ -1791,10 +1966,10 @@ function resolveAccent(frame, preference) {
     return accentById(preference === 'auto' ? frame.accent : preference);
 }
 function accentOn(accent, canvas) {
-    return canvas === 'light' ? accent.light : accent.dark;
+    return isDarkCanvas(canvas) ? accent.dark : accent.light;
 }
 function isDarkCanvas(canvas) {
-    return canvas !== 'light';
+    return canvas === 'dim' || canvas === 'dark';
 }
 function auditAppearance() {
     const issues = [];
@@ -1843,6 +2018,10 @@ const FRAMES_ES = {
     graphite: 'Grafito',
     paper: 'Papel',
     mist: 'Bruma',
+    studio: 'Estudio',
+    sage: 'Salvia',
+    sky: 'Cielo',
+    lavender: 'Lavanda',
 };
 const FRAMES_EN = {
     nucleus: 'Nucleus',
@@ -1857,6 +2036,10 @@ const FRAMES_EN = {
     graphite: 'Graphite',
     paper: 'Paper',
     mist: 'Mist',
+    studio: 'Studio',
+    sage: 'Sage',
+    sky: 'Sky',
+    lavender: 'Lavender',
 };
 const ACCENTS_ES = {
     auto: 'Del marco',
@@ -1869,6 +2052,11 @@ const ACCENTS_ES = {
     orange: 'Naranja',
     rose: 'Rosa',
     red: 'Rojo',
+    slate: 'Pizarra',
+    graphite: 'Grafito',
+    indigo: 'Índigo',
+    teal: 'Verde azulado',
+    plum: 'Ciruela',
 };
 const ACCENTS_EN = {
     auto: 'From the frame',
@@ -1881,6 +2069,11 @@ const ACCENTS_EN = {
     orange: 'Orange',
     rose: 'Rose',
     red: 'Red',
+    slate: 'Slate',
+    graphite: 'Graphite',
+    indigo: 'Indigo',
+    teal: 'Teal',
+    plum: 'Plum',
 };
 const THEME_COPY = {
     es: {
@@ -1894,7 +2087,13 @@ const THEME_COPY = {
         densityTitle: 'Densidad',
         densityHint: 'Cuántas filas quieres ver de una sola pasada.',
         frames: FRAMES_ES,
-        canvases: { light: 'Claro', dim: 'Atenuado', dark: 'Oscuro', system: 'Del sistema' },
+        canvases: {
+            light: 'Claro',
+            soft: 'Suave',
+            dim: 'Atenuado',
+            dark: 'Oscuro',
+            system: 'Del sistema',
+        },
         accents: ACCENTS_ES,
         densities: { comfortable: 'Cómoda', compact: 'Compacta' },
     },
@@ -1909,7 +2108,13 @@ const THEME_COPY = {
         densityTitle: 'Density',
         densityHint: 'How many rows you want to see at a glance.',
         frames: FRAMES_EN,
-        canvases: { light: 'Light', dim: 'Dim', dark: 'Dark', system: 'System' },
+        canvases: {
+            light: 'Light',
+            soft: 'Soft',
+            dim: 'Dim',
+            dark: 'Dark',
+            system: 'System',
+        },
         accents: ACCENTS_EN,
         densities: { comfortable: 'Comfortable', compact: 'Compact' },
     },
@@ -2021,6 +2226,9 @@ class ThemeService {
             root.style.setProperty(`--ns-frame-${kebab(name)}`, value);
         }
         root.style.setProperty('--ns-frame-on-glow', readableOn(frame.tokens.glow));
+        const navActive = readableOn(frame.tokens.bg);
+        root.style.setProperty('--ns-nav-active-bg', navActive);
+        root.style.setProperty('--ns-nav-active-ink', readableOn(navActive));
         for (const [name, value] of Object.entries(canvas.tokens)) {
             root.style.setProperty(`--ac-${kebab(name)}`, value);
         }
@@ -2297,7 +2505,7 @@ class NucleusCard {
     <div class="actions">
       <ng-content select="[nucleusCardActions]" />
     </div>
-  `, isInline: true, styles: [":host{display:block;padding:22px 24px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1)}:host([data-size=\"sm\"]){max-width:34rem}:host([data-size=\"md\"]){max-width:48rem}:host([data-size=\"lg\"]){max-width:64rem}.head{margin-bottom:18px}h2{margin:0;font-size:16px;font-weight:600}.subtitle{margin:4px 0 0;color:var(--ac-text-muted);font-size:13px}.body{display:contents}.skeleton-rows{display:grid}.skeleton-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--ac-border) 60%,transparent)}.skeleton-row:last-child{border-bottom:0}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.actions:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;padding:22px 24px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1)}:host([data-size=\"sm\"]){max-width:34rem}:host([data-size=\"md\"]){max-width:48rem}:host([data-size=\"lg\"]){max-width:64rem}.head{margin-bottom:18px}h2{margin:0;font-size:16px;font-weight:var(--ns-weight-heading)}.subtitle{margin:4px 0 0;color:var(--ac-text-muted);font-size:13px}.body{display:contents}.skeleton-rows{display:grid}.skeleton-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--ac-border) 60%,transparent)}.skeleton-row:last-child{border-bottom:0}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.actions:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusCard, decorators: [{
             type: Component,
@@ -2331,7 +2539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
     <div class="actions">
       <ng-content select="[nucleusCardActions]" />
     </div>
-  `, styles: [":host{display:block;padding:22px 24px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1)}:host([data-size=\"sm\"]){max-width:34rem}:host([data-size=\"md\"]){max-width:48rem}:host([data-size=\"lg\"]){max-width:64rem}.head{margin-bottom:18px}h2{margin:0;font-size:16px;font-weight:600}.subtitle{margin:4px 0 0;color:var(--ac-text-muted);font-size:13px}.body{display:contents}.skeleton-rows{display:grid}.skeleton-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--ac-border) 60%,transparent)}.skeleton-row:last-child{border-bottom:0}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.actions:empty{display:none}\n"] }]
+  `, styles: [":host{display:block;padding:22px 24px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1)}:host([data-size=\"sm\"]){max-width:34rem}:host([data-size=\"md\"]){max-width:48rem}:host([data-size=\"lg\"]){max-width:64rem}.head{margin-bottom:18px}h2{margin:0;font-size:16px;font-weight:var(--ns-weight-heading)}.subtitle{margin:4px 0 0;color:var(--ac-text-muted);font-size:13px}.body{display:contents}.skeleton-rows{display:grid}.skeleton-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--ac-border) 60%,transparent)}.skeleton-row:last-child{border-bottom:0}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.actions:empty{display:none}\n"] }]
         }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }] } });
 
 class NucleusMetrics {
@@ -2351,10 +2559,17 @@ class NucleusMetric {
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     link = input('', ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
     tone = input('plain', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    progress = input(null, ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+    bar = computed(() => {
+        const value = this.progress();
+        if (value === null || !Number.isFinite(value))
+            return null;
+        return Math.min(Math.max(value, 0), 100);
+    }, ...(ngDevMode ? [{ debugName: "bar" }] : /* istanbul ignore next */ []));
     loading = input(null, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     busy = computed(() => this.loading() ?? this.group?.loading() ?? false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusMetric, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusMetric, isStandalone: true, selector: "nucleus-metric", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-tone": "tone() === 'accent' ? 'accent' : null" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusMetric, isStandalone: true, selector: "nucleus-metric", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-tone": "tone() === 'accent' ? 'accent' : null" } }, ngImport: i0, template: `
     @if (link().length) {
       <a class="tile" [routerLink]="link()">
         <ng-container [ngTemplateOutlet]="body" />
@@ -2375,12 +2590,15 @@ class NucleusMetric {
         }
       } @else {
         <strong class="value">{{ value() }}</strong>
+        @if (bar() !== null) {
+          <span class="track"><span class="fill" [style.width.%]="bar()"></span></span>
+        }
         @if (hint().length) {
           <small class="hint">{{ hint() }}</small>
         }
       }
     </ng-template>
-  `, isInline: true, styles: [":host{display:block}.tile{display:grid;align-content:start;gap:5px;height:100%;padding:18px 20px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);color:inherit;text-decoration:none;transition:border-color .14s ease}a.tile:hover{border-color:var(--ac-accent)}:host([data-tone=\"accent\"]) .tile{border-color:var(--ac-accent)}.label{color:var(--ac-text-muted);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.value{font-size:26px;font-variant-numeric:tabular-nums;line-height:1}.hint{color:var(--ac-text-muted);font-size:12px}.value-skeleton{margin:1px 0 2px}.hint-skeleton{margin:3px 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.track{overflow:hidden;height:4px;margin-top:3px;border-radius:999px;background:color-mix(in srgb,var(--ac-text) 12%,transparent)}.fill{display:block;height:4px;border-radius:999px;background:var(--ac-accent)}.tile{display:grid;align-content:start;gap:5px;height:100%;padding:18px 20px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);color:inherit;text-decoration:none;transition:border-color .14s ease}a.tile:hover{border-color:var(--ac-accent)}:host([data-tone=\"accent\"]) .tile{border-color:var(--ac-accent)}.label{color:var(--ac-text-muted);font-size:11px;font-weight:var(--ns-weight-heading);letter-spacing:.04em;text-transform:uppercase}.value{font-size:26px;font-variant-numeric:tabular-nums;line-height:1}.hint{color:var(--ac-text-muted);font-size:12px}.value-skeleton{margin:1px 0 2px}.hint-skeleton{margin:3px 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusMetric, decorators: [{
             type: Component,
@@ -2405,13 +2623,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
         }
       } @else {
         <strong class="value">{{ value() }}</strong>
+        @if (bar() !== null) {
+          <span class="track"><span class="fill" [style.width.%]="bar()"></span></span>
+        }
         @if (hint().length) {
           <small class="hint">{{ hint() }}</small>
         }
       }
     </ng-template>
-  `, styles: [":host{display:block}.tile{display:grid;align-content:start;gap:5px;height:100%;padding:18px 20px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);color:inherit;text-decoration:none;transition:border-color .14s ease}a.tile:hover{border-color:var(--ac-accent)}:host([data-tone=\"accent\"]) .tile{border-color:var(--ac-accent)}.label{color:var(--ac-text-muted);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.value{font-size:26px;font-variant-numeric:tabular-nums;line-height:1}.hint{color:var(--ac-text-muted);font-size:12px}.value-skeleton{margin:1px 0 2px}.hint-skeleton{margin:3px 0}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
+  `, styles: [":host{display:block}.track{overflow:hidden;height:4px;margin-top:3px;border-radius:999px;background:color-mix(in srgb,var(--ac-text) 12%,transparent)}.fill{display:block;height:4px;border-radius:999px;background:var(--ac-accent)}.tile{display:grid;align-content:start;gap:5px;height:100%;padding:18px 20px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);color:inherit;text-decoration:none;transition:border-color .14s ease}a.tile:hover{border-color:var(--ac-accent)}:host([data-tone=\"accent\"]) .tile{border-color:var(--ac-accent)}.label{color:var(--ac-text-muted);font-size:11px;font-weight:var(--ns-weight-heading);letter-spacing:.04em;text-transform:uppercase}.value{font-size:26px;font-variant-numeric:tabular-nums;line-height:1}.hint{color:var(--ac-text-muted);font-size:12px}.value-skeleton{margin:1px 0 2px}.hint-skeleton{margin:3px 0}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
 
 class NucleusTabs {
     tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
@@ -2438,7 +2659,7 @@ class NucleusTabs {
         </button>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;margin-bottom:12px}.bar{display:flex;overflow-x:auto;justify-content:flex-start;gap:4px;border-bottom:1px solid var(--ac-border);scrollbar-width:none}.bar::-webkit-scrollbar{display:none}.tab{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--ac-text-muted);font:inherit;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:color .12s ease,border-color .12s ease}.tab:hover{color:var(--ac-text)}.tab.is-active{border-bottom-color:var(--ac-accent);color:var(--ac-text)}.tab i{font-size:13px}.badge{padding:1px 7px;border-radius:var(--ac-radius-pill);background:color-mix(in srgb,var(--ac-text) 12%,transparent);font-size:11px}.tab.is-active .badge{background:color-mix(in srgb,var(--ac-accent) 26%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;margin-bottom:12px}.bar{display:flex;overflow-x:auto;justify-content:flex-start;gap:4px;padding:5px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1);scrollbar-width:none}.bar::-webkit-scrollbar{display:none}.tab{display:inline-flex;flex:none;align-items:center;gap:8px;padding:8px 14px;border:0;border-radius:8px;background:transparent;color:var(--ac-text-muted);font:inherit;font-size:13px;font-weight:var(--ns-weight-emphasis);white-space:nowrap;cursor:pointer;transition:background .12s ease,color .12s ease}.tab:hover{background:var(--ac-surface-alt);color:var(--ac-text)}.tab:focus-visible{outline:2px solid var(--ac-accent);outline-offset:1px}.tab.is-active{background:var(--ac-text);color:var(--ac-surface)}.tab i{font-size:13px}.badge{padding:1px 7px;border-radius:var(--ac-radius-pill);background:color-mix(in srgb,currentColor 14%,transparent);font-size:11px;font-variant-numeric:tabular-nums}.tab.is-active .badge{background:color-mix(in srgb,currentColor 22%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusTabs, decorators: [{
             type: Component,
@@ -2463,7 +2684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
         </button>
       }
     </div>
-  `, styles: [":host{display:block;margin-bottom:12px}.bar{display:flex;overflow-x:auto;justify-content:flex-start;gap:4px;border-bottom:1px solid var(--ac-border);scrollbar-width:none}.bar::-webkit-scrollbar{display:none}.tab{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--ac-text-muted);font:inherit;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:color .12s ease,border-color .12s ease}.tab:hover{color:var(--ac-text)}.tab.is-active{border-bottom-color:var(--ac-accent);color:var(--ac-text)}.tab i{font-size:13px}.badge{padding:1px 7px;border-radius:var(--ac-radius-pill);background:color-mix(in srgb,var(--ac-text) 12%,transparent);font-size:11px}.tab.is-active .badge{background:color-mix(in srgb,var(--ac-accent) 26%,transparent)}\n"] }]
+  `, styles: [":host{display:block;margin-bottom:12px}.bar{display:flex;overflow-x:auto;justify-content:flex-start;gap:4px;padding:5px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1);scrollbar-width:none}.bar::-webkit-scrollbar{display:none}.tab{display:inline-flex;flex:none;align-items:center;gap:8px;padding:8px 14px;border:0;border-radius:8px;background:transparent;color:var(--ac-text-muted);font:inherit;font-size:13px;font-weight:var(--ns-weight-emphasis);white-space:nowrap;cursor:pointer;transition:background .12s ease,color .12s ease}.tab:hover{background:var(--ac-surface-alt);color:var(--ac-text)}.tab:focus-visible{outline:2px solid var(--ac-accent);outline-offset:1px}.tab.is-active{background:var(--ac-text);color:var(--ac-surface)}.tab i{font-size:13px}.badge{padding:1px 7px;border-radius:var(--ac-radius-pill);background:color-mix(in srgb,currentColor 14%,transparent);font-size:11px;font-variant-numeric:tabular-nums}.tab.is-active .badge{background:color-mix(in srgb,currentColor 22%,transparent)}\n"] }]
         }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }, { type: i0.Output, args: ["activeChange"] }] } });
 
 class NucleusPage {
@@ -2947,6 +3168,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     ], hostDirectives: [NucleusEnterAdvance], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ns-form-grid\" [class]=\"gridClass()\">\n  @for (field of fields(); track field.key) {\n    <div class=\"ns-field\" [class]=\"fieldClass(field)\">\n      @if (kindOf(field) !== 'checkbox' && kindOf(field) !== 'switch') {\n        <label [attr.for]=\"kindOf(field) === 'color' ? null : 'nf-' + field.key\">\n          {{ field.label }}\n        </label>\n      }\n\n      @switch (kindOf(field)) {\n        @case ('textarea') {\n          <textarea\n            pTextarea\n            [id]=\"'nf-' + field.key\"\n            [rows]=\"field.rows ?? 3\"\n            [ngModel]=\"text(field)\"\n            (ngModelChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [attr.maxlength]=\"field.maxlength ?? null\"\n            [attr.placeholder]=\"field.placeholder ?? null\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            fluid\n          ></textarea>\n        }\n        @case ('select') {\n          <p-select\n            [inputId]=\"'nf-' + field.key\"\n            [options]=\"optionsOf(field)\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"read(field)\"\n            (ngModelChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [placeholder]=\"field.placeholder ?? labels().choose\"\n            [showClear]=\"field.clearable === true\"\n            [filter]=\"isSearchable(field)\"\n            filterBy=\"label\"\n            [filterPlaceholder]=\"labels().search\"\n            [autofocusFilter]=\"true\"\n            [resetFilterOnHide]=\"true\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            fluid\n          />\n        }\n        @case ('icon') {\n          <nucleus-icon-picker\n            [inputId]=\"'nf-' + field.key\"\n            [value]=\"nullableText(field)\"\n            (valueChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n          />\n        }\n        @case ('color') {\n          <nucleus-color-picker\n            [value]=\"nullableText(field)\"\n            (valueChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [ariaLabel]=\"field.label\"\n          />\n        }\n        @case ('checkbox') {\n          <div class=\"ns-inline\">\n            <p-checkbox\n              [inputId]=\"'nf-' + field.key\"\n              [binary]=\"true\"\n              [ngModel]=\"checked(field)\"\n              (ngModelChange)=\"write(field, $event)\"\n              [disabled]=\"isDisabled(field)\"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n            <label [attr.for]=\"'nf-' + field.key\" class=\"ns-inline-label\">{{ field.label }}</label>\n          </div>\n        }\n        @case ('switch') {\n          <div class=\"ns-inline\">\n            <p-toggleswitch\n              [inputId]=\"'nf-' + field.key\"\n              [ngModel]=\"checked(field)\"\n              (ngModelChange)=\"write(field, $event)\"\n              [disabled]=\"isDisabled(field)\"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n            <label [attr.for]=\"'nf-' + field.key\" class=\"ns-inline-label\">{{ field.label }}</label>\n          </div>\n        }\n        @default {\n          <input\n            pInputText\n            [id]=\"'nf-' + field.key\"\n            [type]=\"kindOf(field) === 'number' ? 'number' : kindOf(field)\"\n            [ngModel]=\"text(field)\"\n            (ngModelChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [attr.maxlength]=\"field.maxlength ?? null\"\n            [attr.placeholder]=\"field.placeholder ?? null\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            autocomplete=\"off\"\n            fluid\n          />\n        }\n      }\n\n      @if (field.hint) {\n        <p class=\"ns-hint\">{{ field.hint }}</p>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
+class NucleusLink {
+    route = input(null, ...(ngDevMode ? [{ debugName: "route" }] : /* istanbul ignore next */ []));
+    queryParams = input(null, ...(ngDevMode ? [{ debugName: "queryParams" }] : /* istanbul ignore next */ []));
+    href = input(null, ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    muted = input(false, ...(ngDevMode ? [{ debugName: "muted" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusLink, isStandalone: true, selector: "nucleus-link", inputs: { route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, muted: { classPropertyName: "muted", publicName: "muted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-template #body>\n  <span class=\"label\"><ng-content /></span>\n  <i class=\"pi pi-arrow-up-right\" aria-hidden=\"true\"></i>\n</ng-template>\n\n@if (route(); as target) {\n  <a\n    class=\"chip\"\n    [class.is-muted]=\"muted()\"\n    [routerLink]=\"target\"\n    [queryParams]=\"queryParams()\"\n    [attr.title]=\"hint() || null\"\n  >\n    <ng-container [ngTemplateOutlet]=\"body\" />\n  </a>\n} @else {\n  <a\n    class=\"chip\"\n    [class.is-muted]=\"muted()\"\n    [href]=\"href() ?? '#'\"\n    [attr.title]=\"hint() || null\"\n  >\n    <ng-container [ngTemplateOutlet]=\"body\" />\n  </a>\n}\n", styles: [":host{display:inline-flex;min-width:0}.chip{display:inline-flex;min-width:0;align-items:center;gap:7px;padding:3px 7px 3px 10px;border:1px solid color-mix(in srgb,var(--ac-accent) 34%,transparent);border-radius:6px;background:color-mix(in srgb,var(--ac-accent) 11%,transparent);color:var(--ac-accent);font-variant-numeric:tabular-nums;text-decoration:none;transition:background .12s ease,border-color .12s ease}.chip.is-muted{border-color:var(--ac-border);background:color-mix(in srgb,var(--ac-text) 6%,transparent);color:var(--ac-text)}.chip .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip .pi{flex:none;font-size:.72em;opacity:.7;transition:opacity .12s ease,transform .12s ease}.chip:hover{border-color:color-mix(in srgb,var(--ac-accent) 60%,transparent);background:color-mix(in srgb,var(--ac-accent) 18%,transparent)}.chip:hover .pi{opacity:1;transform:translate(1px,-1px)}.chip:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusLink, decorators: [{
+            type: Component,
+            args: [{ selector: 'nucleus-link', imports: [NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #body>\n  <span class=\"label\"><ng-content /></span>\n  <i class=\"pi pi-arrow-up-right\" aria-hidden=\"true\"></i>\n</ng-template>\n\n@if (route(); as target) {\n  <a\n    class=\"chip\"\n    [class.is-muted]=\"muted()\"\n    [routerLink]=\"target\"\n    [queryParams]=\"queryParams()\"\n    [attr.title]=\"hint() || null\"\n  >\n    <ng-container [ngTemplateOutlet]=\"body\" />\n  </a>\n} @else {\n  <a\n    class=\"chip\"\n    [class.is-muted]=\"muted()\"\n    [href]=\"href() ?? '#'\"\n    [attr.title]=\"hint() || null\"\n  >\n    <ng-container [ngTemplateOutlet]=\"body\" />\n  </a>\n}\n", styles: [":host{display:inline-flex;min-width:0}.chip{display:inline-flex;min-width:0;align-items:center;gap:7px;padding:3px 7px 3px 10px;border:1px solid color-mix(in srgb,var(--ac-accent) 34%,transparent);border-radius:6px;background:color-mix(in srgb,var(--ac-accent) 11%,transparent);color:var(--ac-accent);font-variant-numeric:tabular-nums;text-decoration:none;transition:background .12s ease,border-color .12s ease}.chip.is-muted{border-color:var(--ac-border);background:color-mix(in srgb,var(--ac-text) 6%,transparent);color:var(--ac-text)}.chip .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip .pi{flex:none;font-size:.72em;opacity:.7;transition:opacity .12s ease,transform .12s ease}.chip:hover{border-color:color-mix(in srgb,var(--ac-accent) 60%,transparent);background:color-mix(in srgb,var(--ac-accent) 18%,transparent)}.chip:hover .pi{opacity:1;transform:translate(1px,-1px)}.chip:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}\n"] }]
+        }], propDecorators: { route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], muted: [{ type: i0.Input, args: [{ isSignal: true, alias: "muted", required: false }] }] } });
+
 class NucleusCell {
     nucleusCell = input.required(...(ngDevMode ? [{ debugName: "nucleusCell" }] : /* istanbul ignore next */ []));
     template = inject(TemplateRef);
@@ -2960,6 +3195,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 }]
         }], propDecorators: { nucleusCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "nucleusCell", required: true }] }] } });
 
+function menuTile(label, icon, color) {
+    return { label, icon, color, ink: color ? readableOn(color) : null, ghost: false };
+}
+function menuGlyph(icon) {
+    return { label: '', icon, color: null, ink: null, ghost: true };
+}
+function foldText(value) {
+    return value
+        .normalize('NFD')
+        .replace(/[̀-ͯ]/g, '')
+        .toLowerCase();
+}
+function matchesRow(row, term) {
+    return foldText(row.name).includes(term) || foldText(row.meta ?? '').includes(term);
+}
+function selectableRows(sections) {
+    return sections.flatMap((section) => section.rows).filter((row) => !row.disabled && !row.current);
+}
+
+const NUCLEUS_NARROW_QUERY = '(max-width: 720px)';
+class NucleusViewport {
+    query = typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+        ? window.matchMedia(NUCLEUS_NARROW_QUERY)
+        : null;
+    _narrow = signal(this.query?.matches ?? false, ...(ngDevMode ? [{ debugName: "_narrow" }] : /* istanbul ignore next */ []));
+    narrow = this._narrow.asReadonly();
+    constructor() {
+        const query = this.query;
+        if (!query)
+            return;
+        const onChange = (event) => this._narrow.set(event.matches);
+        query.addEventListener('change', onChange);
+        inject(DestroyRef).onDestroy(() => query.removeEventListener('change', onChange));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusViewport, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusViewport, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusViewport, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 class NucleusList {
     rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
@@ -2971,14 +3248,118 @@ class NucleusList {
     rowClass = input(() => '', ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
     pageSize = input(5, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
     pageSizes = input([5, 10, 20, 25], ...(ngDevMode ? [{ debugName: "pageSizes" }] : /* istanbul ignore next */ []));
+    cards = input(true, ...(ngDevMode ? [{ debugName: "cards" }] : /* istanbul ignore next */ []));
+    reorderable = input(false, ...(ngDevMode ? [{ debugName: "reorderable" }] : /* istanbul ignore next */ []));
+    searchable = input(true, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    reorderGroup = input(null, ...(ngDevMode ? [{ debugName: "reorderGroup" }] : /* istanbul ignore next */ []));
     action = output();
+    reorder = output();
+    dragStart = output();
     toggle = output();
     cells = contentChildren(NucleusCell, ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
+    language = inject(NucleusLanguage);
+    viewport = inject(NucleusViewport);
+    copy = computed(() => commonCopyOf(this.language.lang()), ...(ngDevMode ? [{ debugName: "copy" }] : /* istanbul ignore next */ []));
+    term = signal('', ...(ngDevMode ? [{ debugName: "term" }] : /* istanbul ignore next */ []));
+    chosenView = signal('rows', ...(ngDevMode ? [{ debugName: "chosenView" }] : /* istanbul ignore next */ []));
+    canChooseView = computed(() => !this.viewport.narrow(), ...(ngDevMode ? [{ debugName: "canChooseView" }] : /* istanbul ignore next */ []));
+    view = computed(() => this.canChooseView() ? this.chosenView() : 'grid', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    chooseView(value) {
+        this.chosenView.set(value);
+    }
+    filtered = computed(() => {
+        const term = foldText(this.term().trim());
+        const all = this.rows();
+        if (!term)
+            return [...all];
+        const columns = this.columns();
+        return all.filter((row) => columns.some((column) => foldText(this.text(column, row)).includes(term)));
+    }, ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+    dragLocked = computed(() => !this.reorderable() || this.term().trim().length > 0, ...(ngDevMode ? [{ debugName: "dragLocked" }] : /* istanbul ignore next */ []));
+    showNoResults = computed(() => !this.loading() && this.rows().length > 0 && this.filtered().length === 0, ...(ngDevMode ? [{ debugName: "showNoResults" }] : /* istanbul ignore next */ []));
+    onSearch(event) {
+        this.term.set(event.target.value);
+    }
+    firstRow = signal(0, ...(ngDevMode ? [{ debugName: "firstRow" }] : /* istanbul ignore next */ []));
+    rowsOverride = signal(0, ...(ngDevMode ? [{ debugName: "rowsOverride" }] : /* istanbul ignore next */ []));
+    compact = computed(() => this.cards(), ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    rowsPerPage = computed(() => this.rowsOverride() || this.pageSize(), ...(ngDevMode ? [{ debugName: "rowsPerPage" }] : /* istanbul ignore next */ []));
+    identityColumn = computed(() => {
+        const columns = this.columns();
+        return (columns.find((column) => column.role === 'identity') ??
+            columns.find((column) => !column.role) ??
+            columns[0] ??
+            null);
+    }, ...(ngDevMode ? [{ debugName: "identityColumn" }] : /* istanbul ignore next */ []));
+    statusColumn = computed(() => {
+        const columns = this.columns();
+        const explicit = columns.find((column) => column.role === 'status');
+        if (explicit)
+            return explicit;
+        const identity = this.identityColumn();
+        return columns.find((column) => column !== identity && !column.role && !!column.tag) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "statusColumn" }] : /* istanbul ignore next */ []));
+    attributeColumns = computed(() => {
+        const identity = this.identityColumn();
+        const status = this.statusColumn();
+        return this.columns().filter((column) => column !== identity && column !== status && column.role !== 'hidden');
+    }, ...(ngDevMode ? [{ debugName: "attributeColumns" }] : /* istanbul ignore next */ []));
+    pagedRows = computed(() => {
+        const all = this.filtered();
+        if (!this.paginate())
+            return [...all];
+        const size = this.rowsPerPage();
+        const start = this.firstRow() < all.length ? this.firstRow() : 0;
+        return all.slice(start, start + size);
+    }, ...(ngDevMode ? [{ debugName: "pagedRows" }] : /* istanbul ignore next */ []));
+    resetPage = effect(() => {
+        const total = this.filtered().length;
+        untracked(() => {
+            if (this.firstRow() >= total)
+                this.firstRow.set(0);
+        });
+    }, ...(ngDevMode ? [{ debugName: "resetPage" }] : /* istanbul ignore next */ []));
+    page = this.firstRow.asReadonly();
+    sortAllowed = (index, drag) => {
+        const group = this.reorderGroup();
+        if (!group)
+            return true;
+        const target = this.pagedRows()[index];
+        const dragged = drag.data;
+        if (!target || !dragged)
+            return true;
+        return group(target) === group(dragged);
+    };
+    onRowReorder(event) {
+        this.applyMove(event.dragIndex ?? -1, event.dropIndex ?? -1);
+    }
+    onCardDrop(event) {
+        const offset = this.firstRow();
+        this.applyMove(event.previousIndex + offset, event.currentIndex + offset);
+    }
+    applyMove(from, to) {
+        const all = this.rows();
+        if (from < 0 || to < 0 || from === to)
+            return;
+        if (from >= all.length || to >= all.length)
+            return;
+        const next = [...all];
+        const [moved] = next.splice(from, 1);
+        if (!moved)
+            return;
+        next.splice(to, 0, moved);
+        this.reorder.emit(next);
+    }
+    onPage(event) {
+        this.firstRow.set(event.first ?? 0);
+        if (event.rows)
+            this.rowsOverride.set(event.rows);
+    }
     paginate = computed(() => !this.loading(), ...(ngDevMode ? [{ debugName: "paginate" }] : /* istanbul ignore next */ []));
     tableStyle = computed(() => ({ 'min-width': this.minWidth() }), ...(ngDevMode ? [{ debugName: "tableStyle" }] : /* istanbul ignore next */ []));
     showEmpty = computed(() => !this.loading() && this.rows().length === 0, ...(ngDevMode ? [{ debugName: "showEmpty" }] : /* istanbul ignore next */ []));
     placeholders = computed(() => Array.from({ length: Math.max(this.skeletonRows(), 1) }, (_, index) => ({ index })), ...(ngDevMode ? [{ debugName: "placeholders" }] : /* istanbul ignore next */ []));
-    data = computed(() => this.loading() ? this.placeholders() : this.rows(), ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    data = computed(() => this.loading() ? this.placeholders() : [...this.rows()], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     skeletonWidth(column) {
         if (column.kind === 'switch')
             return '84px';
@@ -2997,6 +3378,9 @@ class NucleusList {
         const raw = row[column.key];
         return raw === null || raw === undefined ? '—' : String(raw);
     }
+    linkOf(column, row) {
+        return column.link ? column.link(row) : null;
+    }
     tagOf(column, row) {
         return column.tag ? column.tag(row) : null;
     }
@@ -3024,12 +3408,24 @@ class NucleusList {
         this.toggle.emit({ key: column.key, row, value: !this.isChecked(column, row) });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusList, isStandalone: true, selector: "nucleus-list", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", toggle: "toggle" }, queries: [{ propertyName: "cells", predicate: NucleusCell, isSignal: true }], ngImport: i0, template: "<div class=\"head\">\n  <ng-content select=\"[nucleusListTitle]\" />\n  <div class=\"head-actions\">\n    <ng-content select=\"[nucleusListActions]\" />\n  </div>\n</div>\n\n@if (showEmpty()) {\n  <div class=\"placeholder\">{{ empty() }}</div>\n} @else {\n  <p-table\n    [value]=\"data()\"\n    styleClass=\"ns-table\"\n    [tableStyle]=\"tableStyle()\"\n    [paginator]=\"paginate()\"\n    [rows]=\"pageSize()\"\n    [rowsPerPageOptions]=\"pageSizes()\"\n    [alwaysShowPaginator]=\"true\"\n  >\n    <ng-template #header>\n      <tr>\n        @for (column of columns(); track column.key) {\n          <th [class]=\"'align-' + (column.align ?? 'left')\" [style.width]=\"column.width\">\n            {{ column.header }}\n          </th>\n        }\n        @if (actions().length) {\n          <th class=\"align-right\"></th>\n        }\n      </tr>\n    </ng-template>\n\n    <ng-template #body let-row>\n      @if (loading()) {\n        <tr class=\"is-skeleton\">\n          @for (column of columns(); track column.key) {\n            <td [class]=\"'align-' + (column.align ?? 'left')\">\n              <p-skeleton height=\"13px\" [width]=\"skeletonWidth(column)\" />\n            </td>\n          }\n          @if (actions().length) {\n            <td class=\"align-right actions\">\n              <p-skeleton shape=\"circle\" size=\"26px\" />\n            </td>\n          }\n        </tr>\n      } @else {\n        <tr [class]=\"rowClass()(row)\">\n          @for (column of columns(); track column.key) {\n            <td [class]=\"'align-' + (column.align ?? 'left')\" [class.strong]=\"column.strong\">\n              @if (cellTemplate(column.key); as custom) {\n                <ng-container\n                  [ngTemplateOutlet]=\"custom\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n                />\n              } @else if (column.kind === 'switch') {\n                <span class=\"switch-cell\">\n                  <button\n                    type=\"button\"\n                    class=\"ns-switch\"\n                    role=\"switch\"\n                    [class.is-on]=\"isChecked(column, row)\"\n                    [attr.aria-checked]=\"isChecked(column, row)\"\n                    [attr.aria-label]=\"text(column, row)\"\n                    [disabled]=\"isLocked(column, row)\"\n                    [pTooltip]=\"hintOf(column, row)\"\n                    tooltipPosition=\"top\"\n                    (click)=\"flip(column, row)\"\n                  >\n                    <span class=\"knob\"></span>\n                  </button>\n                  <span class=\"switch-label\">{{ text(column, row) }}</span>\n                </span>\n              } @else {\n                {{ text(column, row) }}\n                @if (tagOf(column, row); as tag) {\n                  <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n                }\n              }\n            </td>\n          }\n\n          @if (actions().length) {\n            <td class=\"align-right actions\">\n              @for (entry of visibleActions(row); track entry.id) {\n                <p-button\n                  [icon]=\"entry.icon\"\n                  [severity]=\"entry.tone === 'danger' ? 'danger' : 'secondary'\"\n                  size=\"small\"\n                  [text]=\"true\"\n                  [rounded]=\"true\"\n                  [pTooltip]=\"entry.label\"\n                  tooltipPosition=\"left\"\n                  [ariaLabel]=\"entry.label\"\n                  [disabled]=\"isActionLocked(entry, row)\"\n                  (onClick)=\"run(entry, row)\"\n                />\n              }\n            </td>\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n}\n", styles: [":host{display:block}.head{display:flex;align-items:center;justify-content:space-between;gap:12px}.head:has(>*:not(.head-actions)),.head:has(.head-actions>*){min-height:34px;margin-bottom:12px}.head-actions{display:flex;gap:8px}.placeholder{padding:26px;border:1px dashed var(--ac-border);border-radius:10px;color:var(--ac-text-muted);font-size:14px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.strong{font-weight:600}.actions{white-space:nowrap}.switch-cell{display:inline-flex;align-items:center;gap:10px}.switch-label{color:var(--ac-text-muted);font-size:12px}.ns-switch{position:relative;width:38px;height:22px;flex:none;padding:0;border:1px solid var(--ac-border);border-radius:var(--ac-radius-pill);background:color-mix(in srgb,var(--ac-text) 10%,transparent);cursor:pointer;transition:background .14s ease,border-color .14s ease}.ns-switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ac-text);transition:transform .14s ease}.ns-switch.is-on{border-color:var(--ac-accent);background:var(--ac-accent)}.ns-switch.is-on .knob{background:var(--ac-on-accent);transform:translate(16px)}.ns-switch:disabled{cursor:not-allowed;opacity:.45}.ns-switch:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i3$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusList, isStandalone: true, selector: "nucleus-list", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, reorderGroup: { classPropertyName: "reorderGroup", publicName: "reorderGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", reorder: "reorder", dragStart: "dragStart", toggle: "toggle" }, queries: [{ propertyName: "cells", predicate: NucleusCell, isSignal: true }], ngImport: i0, template: "<div class=\"head\">\n  <ng-content select=\"[nucleusListTitle]\" />\n  <div class=\"head-actions\">\n    <ng-content select=\"[nucleusListActions]\" />\n  </div>\n</div>\n\n@if (showEmpty()) {\n  <div class=\"placeholder\">{{ empty() }}</div>\n} @else {\n  <div class=\"bar\">\n    @if (searchable()) {\n      <label class=\"search\">\n        <i class=\"pi pi-search\" aria-hidden=\"true\"></i>\n        <input\n          type=\"search\"\n          [value]=\"term()\"\n          [placeholder]=\"copy().search\"\n          [attr.aria-label]=\"copy().search\"\n          (input)=\"onSearch($event)\"\n        />\n      </label>\n    }\n\n    <span class=\"bar-spacer\"></span>\n\n    @if (canChooseView()) {\n      <span class=\"views\">\n      <button\n        type=\"button\"\n        class=\"view\"\n        [class.is-on]=\"view() === 'grid'\"\n        [attr.aria-pressed]=\"view() === 'grid'\"\n        [attr.aria-label]=\"copy().viewGrid\"\n        [pTooltip]=\"copy().viewGrid\"\n        tooltipPosition=\"bottom\"\n        (click)=\"chooseView('grid')\"\n      >\n        <i class=\"pi pi-th-large\" aria-hidden=\"true\"></i>\n      </button>\n      <button\n        type=\"button\"\n        class=\"view\"\n        [class.is-on]=\"view() === 'rows'\"\n        [attr.aria-pressed]=\"view() === 'rows'\"\n        [attr.aria-label]=\"copy().viewRows\"\n        [pTooltip]=\"copy().viewRows\"\n        tooltipPosition=\"bottom\"\n        (click)=\"chooseView('rows')\"\n      >\n        <i class=\"pi pi-list\" aria-hidden=\"true\"></i>\n      </button>\n      </span>\n    }\n  </div>\n\n  @if (compact()) {\n    @if (showNoResults()) {\n      <div class=\"placeholder\">{{ copy().noResults }}</div>\n    }\n\n  <div\n    class=\"cards\"\n    [class.is-rows]=\"view() === 'rows'\"\n    cdkDropList\n    cdkDropListOrientation=\"mixed\"\n    [cdkDropListDisabled]=\"dragLocked()\"\n    [cdkDropListSortPredicate]=\"sortAllowed\"\n    (cdkDropListDropped)=\"onCardDrop($event)\"\n  >\n    @if (loading()) {\n      @for (item of placeholders(); track $index) {\n        <div class=\"card\">\n          <div class=\"card-top\">\n            <p-skeleton height=\"15px\" width=\"52%\" />\n          </div>\n          <div class=\"card-foot\">\n            <p-skeleton height=\"12px\" width=\"30%\" />\n            <p-skeleton height=\"12px\" width=\"30%\" />\n          </div>\n        </div>\n      }\n    } @else {\n      @for (row of pagedRows(); track $index) {\n        <article class=\"card\" [class]=\"rowClass()(row)\" cdkDrag\n          [cdkDragData]=\"row\"\n          [cdkDragDisabled]=\"dragLocked()\"\n          (cdkDragStarted)=\"dragStart.emit(row)\">\n          <div class=\"card-top\">\n            @if (reorderable()) {\n              <button\n                type=\"button\"\n                class=\"grip\"\n                cdkDragHandle\n                [disabled]=\"dragLocked()\"\n                [attr.aria-label]=\"copy().reorderHandle\"\n              >\n                <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n              </button>\n            }\n            @if (identityColumn(); as column) {\n              <span class=\"card-name\">\n                @if (cellTemplate(column.key); as custom) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"custom\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n                  />\n                } @else {\n                  {{ text(column, row) }}\n                }\n              </span>\n            }\n\n            @if (statusColumn(); as column) {\n              <span class=\"card-status\">\n                @if (tagOf(column, row); as tag) {\n                  <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n                } @else if (cellTemplate(column.key); as custom) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"custom\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n                  />\n                } @else {\n                  {{ text(column, row) }}\n                }\n              </span>\n            }\n          </div>\n\n          @if (attributeColumns().length || visibleActions(row).length) {\n            <div class=\"card-foot\">\n              <div class=\"card-fields\">\n                @for (column of attributeColumns(); track column.key) {\n                <div class=\"field\">\n                  <span class=\"field-label\">{{ column.header }}</span>\n                  <span class=\"field-value\">\n                    @if (cellTemplate(column.key); as custom) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"custom\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n                      />\n                    } @else if (linkOf(column, row); as target) {\n                      <nucleus-link\n                        [route]=\"target.route\"\n                        [queryParams]=\"target.queryParams ?? null\"\n                        [hint]=\"column.header\"\n                      >\n                        {{ text(column, row) }}\n                      </nucleus-link>\n                    } @else if (column.kind === 'switch') {\n                      <button\n                        type=\"button\"\n                        class=\"ns-switch\"\n                        role=\"switch\"\n                        [class.is-on]=\"isChecked(column, row)\"\n                        [attr.aria-checked]=\"isChecked(column, row)\"\n                        [attr.aria-label]=\"column.header\"\n                        [disabled]=\"isLocked(column, row)\"\n                        (click)=\"flip(column, row)\"\n                      >\n                        <span class=\"knob\"></span>\n                      </button>\n                      @if (tagOf(column, row); as tag) {\n                        <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n                      } @else {\n                        <span class=\"switch-label\">{{ text(column, row) }}</span>\n                      }\n                    } @else {\n                      {{ text(column, row) }}\n                      @if (tagOf(column, row); as tag) {\n                        <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n                      }\n                    }\n                  </span>\n                  </div>\n                }\n              </div>\n\n              @if (visibleActions(row).length) {\n                <div class=\"card-actions\">\n                  @for (entry of visibleActions(row); track entry.id) {\n                    <p-button\n                      [icon]=\"entry.icon\"\n                      [severity]=\"entry.tone === 'danger' ? 'danger' : 'secondary'\"\n                      size=\"small\"\n                      [text]=\"true\"\n                      [rounded]=\"true\"\n                      [ariaLabel]=\"entry.label\"\n                      [disabled]=\"isActionLocked(entry, row)\"\n                      (onClick)=\"run(entry, row)\"\n                    />\n                  }\n                </div>\n              }\n            </div>\n          }\n        </article>\n      }\n    }\n  </div>\n\n    @if (paginate()) {\n      <div class=\"foot\">\n        <p-paginator\n          styleClass=\"ns-cards-paginator\"\n          [first]=\"page()\"\n          [rows]=\"rowsPerPage()\"\n          [totalRecords]=\"filtered().length\"\n          [rowsPerPageOptions]=\"pageSizes()\"\n          (onPageChange)=\"onPage($event)\"\n        />\n      </div>\n    }\n} @else {\n  <p-table\n    [value]=\"data()\"\n    styleClass=\"ns-table\"\n    [tableStyle]=\"tableStyle()\"\n    [paginator]=\"paginate()\"\n    [rows]=\"pageSize()\"\n    [rowsPerPageOptions]=\"pageSizes()\"\n    [alwaysShowPaginator]=\"true\"\n    (onRowReorder)=\"onRowReorder($event)\"\n  >\n    <ng-template #header>\n      <tr>\n        @if (reorderable()) {\n          <th class=\"grip-head\"></th>\n        }\n        @for (column of columns(); track column.key) {\n          <th [class]=\"'align-' + (column.align ?? 'left')\" [style.width]=\"column.width\">\n            {{ column.header }}\n          </th>\n        }\n        @if (actions().length) {\n          <th class=\"align-right\"></th>\n        }\n      </tr>\n    </ng-template>\n\n    <ng-template #body let-row let-rowIndex=\"rowIndex\">\n      @if (loading()) {\n        <tr class=\"is-skeleton\">\n          @if (reorderable()) {\n            <td class=\"grip-cell\"></td>\n          }\n          @for (column of columns(); track column.key) {\n            <td [class]=\"'align-' + (column.align ?? 'left')\">\n              <p-skeleton height=\"13px\" [width]=\"skeletonWidth(column)\" />\n            </td>\n          }\n          @if (actions().length) {\n            <td class=\"align-right actions\">\n              <p-skeleton shape=\"circle\" size=\"26px\" />\n            </td>\n          }\n        </tr>\n      } @else {\n        <tr\n          [class]=\"rowClass()(row)\"\n          [pReorderableRow]=\"rowIndex\"\n          [pReorderableRowDisabled]=\"dragLocked()\"\n        >\n          @if (reorderable()) {\n            <td class=\"grip-cell\">\n              <span class=\"grip\" pReorderableRowHandle [attr.aria-label]=\"copy().reorderHandle\">\n                <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n              </span>\n            </td>\n          }\n          @for (column of columns(); track column.key) {\n            <td [class]=\"'align-' + (column.align ?? 'left')\" [class.strong]=\"column.strong\">\n              @if (cellTemplate(column.key); as custom) {\n                <ng-container\n                  [ngTemplateOutlet]=\"custom\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n                />\n              } @else if (column.kind === 'switch') {\n                <span class=\"switch-cell\">\n                  <button\n                    type=\"button\"\n                    class=\"ns-switch\"\n                    role=\"switch\"\n                    [class.is-on]=\"isChecked(column, row)\"\n                    [attr.aria-checked]=\"isChecked(column, row)\"\n                    [attr.aria-label]=\"text(column, row)\"\n                    [disabled]=\"isLocked(column, row)\"\n                    [pTooltip]=\"hintOf(column, row)\"\n                    tooltipPosition=\"top\"\n                    (click)=\"flip(column, row)\"\n                  >\n                    <span class=\"knob\"></span>\n                  </button>\n                  <span class=\"switch-label\">{{ text(column, row) }}</span>\n                </span>\n              } @else {\n                {{ text(column, row) }}\n                @if (tagOf(column, row); as tag) {\n                  <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n                }\n              }\n            </td>\n          }\n\n          @if (actions().length) {\n            <td class=\"align-right actions\">\n              @for (entry of visibleActions(row); track entry.id) {\n                <p-button\n                  [icon]=\"entry.icon\"\n                  [severity]=\"entry.tone === 'danger' ? 'danger' : 'secondary'\"\n                  size=\"small\"\n                  [text]=\"true\"\n                  [rounded]=\"true\"\n                  [pTooltip]=\"entry.label\"\n                  tooltipPosition=\"left\"\n                  [ariaLabel]=\"entry.label\"\n                  [disabled]=\"isActionLocked(entry, row)\"\n                  (onClick)=\"run(entry, row)\"\n                />\n              }\n            </td>\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n}\n}\n", styles: [":host{display:block}.head{display:flex;align-items:center;justify-content:space-between;gap:12px}.head:has(>*:not(.head-actions)),.head:has(.head-actions>*){min-height:34px;margin-bottom:12px}.head-actions{display:flex;gap:8px}.placeholder{padding:26px;border:1px dashed var(--ac-border);border-radius:10px;color:var(--ac-text-muted);font-size:14px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.strong{font-weight:var(--ns-weight-emphasis)}.actions{white-space:nowrap}.switch-cell{display:inline-flex;align-items:center;gap:10px}.switch-label{color:var(--ac-text-muted);font-size:12px}.ns-switch{position:relative;width:38px;height:22px;flex:none;padding:0;border:1px solid var(--ac-border);border-radius:var(--ac-radius-pill);background:color-mix(in srgb,var(--ac-text) 10%,transparent);cursor:pointer;transition:background .14s ease,border-color .14s ease}.ns-switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ac-text);transition:transform .14s ease}.ns-switch.is-on{border-color:var(--ac-accent);background:var(--ac-accent)}.ns-switch.is-on .knob{background:var(--ac-on-accent);transform:translate(16px)}.ns-switch:disabled{cursor:not-allowed;opacity:.45}.ns-switch:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.card{padding:13px 14px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1)}.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.card-name{display:flex;min-width:0;flex:1;align-items:center;gap:10px;font-size:15px;font-weight:var(--ns-weight-emphasis);line-height:1.3}.card-status{flex:none}.card-foot{display:flex;align-items:flex-end;gap:12px;margin-top:11px;padding-top:11px;border-top:1px solid var(--ac-border)}.card-fields{display:flex;min-width:0;flex:1;flex-wrap:wrap;gap:10px 20px}.card-actions{display:flex;flex:none;align-items:center;gap:2px}.field{display:flex;min-width:0;flex-direction:column;gap:2px}.field-label{color:var(--ac-text-muted);font-size:10px;font-weight:var(--ns-weight-heading);letter-spacing:.07em;text-transform:uppercase}.field-value{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:var(--ns-weight-emphasis);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}::ng-deep .ns-cards-paginator{background:transparent}.grip{display:inline-grid;width:26px;height:26px;flex:none;padding:0;border:0;border-radius:4px;background:transparent;color:var(--ac-text-muted);cursor:grab;place-items:center;touch-action:none}.grip:hover{background:color-mix(in srgb,var(--ac-text) 8%,transparent);color:var(--ac-text)}.grip:active{cursor:grabbing}.grip:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}.grip .pi{font-size:13px}.grip-head,.grip-cell{width:38px;padding-right:0!important}.cdk-drag-preview{border:1px solid var(--ac-accent);border-radius:12px;background:var(--ac-surface);box-shadow:var(--ns-shadow-2);opacity:.96}.cdk-drag-placeholder{border:1px dashed var(--ac-border);background:color-mix(in srgb,var(--ac-text) 4%,transparent);opacity:.6}.cdk-drag-placeholder *{visibility:hidden}.cards.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .18s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .22s cubic-bezier(0,0,.2,1)}.bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:7px 10px;border:1px solid var(--ac-border);border-radius:10px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1)}.bar-spacer{flex:1}.search{display:flex;min-width:0;max-width:340px;flex:1 1 220px;align-items:center;gap:8px;padding:5px 10px;border:1px solid var(--ac-border);border-radius:6px;background:color-mix(in srgb,var(--ac-text) 4%,transparent);color:var(--ac-text-muted)}.search:focus-within{border-color:var(--ac-accent);color:var(--ac-text)}.search .pi{font-size:13px}.search input{min-width:0;flex:1;padding:0;border:0;background:transparent;color:var(--ac-text);font:inherit;font-size:13px;outline:none}.search input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.6)}.views{display:inline-flex;flex:none;padding:2px;border:1px solid var(--ac-border);border-radius:7px}.view{display:grid;width:30px;height:28px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--ac-text-muted);cursor:pointer;place-items:center}.view:hover{color:var(--ac-text)}.view.is-on{background:color-mix(in srgb,var(--ac-accent) 18%,transparent);color:var(--ac-accent)}.view:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}.view .pi{font-size:14px}.foot{margin-top:12px;padding:4px 6px;border:1px solid var(--ac-border);border-radius:10px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1)}@media(min-width:721px){.cards.is-rows{gap:8px;grid-template-columns:minmax(0,1fr)}.cards.is-rows .card{display:grid;align-items:center;gap:18px;grid-template-columns:minmax(0,2fr) minmax(0,3fr);padding:9px 14px}.cards.is-rows .card-top{min-width:0;align-items:center;gap:12px}.cards.is-rows .card-foot{margin-top:0;padding-top:0;border-top:0;gap:14px}.cards.is-rows .card-fields{display:grid;min-width:0;flex:1;gap:14px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}.cards.is-rows .field-label,.cards.is-rows .field-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NucleusLink, selector: "nucleus-link", inputs: ["route", "queryParams", "href", "hint", "muted"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i2$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i4.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i5$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusList, decorators: [{
             type: Component,
-            args: [{ selector: 'nucleus-list', imports: [NgTemplateOutlet, ButtonModule, SkeletonModule, TableModule, TagModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"head\">\n  <ng-content select=\"[nucleusListTitle]\" />\n  <div class=\"head-actions\">\n    <ng-content select=\"[nucleusListActions]\" />\n  </div>\n</div>\n\n@if (showEmpty()) {\n  <div class=\"placeholder\">{{ empty() }}</div>\n} @else {\n  <p-table\n    [value]=\"data()\"\n    styleClass=\"ns-table\"\n    [tableStyle]=\"tableStyle()\"\n    [paginator]=\"paginate()\"\n    [rows]=\"pageSize()\"\n    [rowsPerPageOptions]=\"pageSizes()\"\n    [alwaysShowPaginator]=\"true\"\n  >\n    <ng-template #header>\n      <tr>\n        @for (column of columns(); track column.key) {\n          <th [class]=\"'align-' + (column.align ?? 'left')\" [style.width]=\"column.width\">\n            {{ column.header }}\n          </th>\n        }\n        @if (actions().length) {\n          <th class=\"align-right\"></th>\n        }\n      </tr>\n    </ng-template>\n\n    <ng-template #body let-row>\n      @if (loading()) {\n        <tr class=\"is-skeleton\">\n          @for (column of columns(); track column.key) {\n            <td [class]=\"'align-' + (column.align ?? 'left')\">\n              <p-skeleton height=\"13px\" [width]=\"skeletonWidth(column)\" />\n            </td>\n          }\n          @if (actions().length) {\n            <td class=\"align-right actions\">\n              <p-skeleton shape=\"circle\" size=\"26px\" />\n            </td>\n          }\n        </tr>\n      } @else {\n        <tr [class]=\"rowClass()(row)\">\n          @for (column of columns(); track column.key) {\n            <td [class]=\"'align-' + (column.align ?? 'left')\" [class.strong]=\"column.strong\">\n              @if (cellTemplate(column.key); as custom) {\n                <ng-container\n                  [ngTemplateOutlet]=\"custom\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n                />\n              } @else if (column.kind === 'switch') {\n                <span class=\"switch-cell\">\n                  <button\n                    type=\"button\"\n                    class=\"ns-switch\"\n                    role=\"switch\"\n                    [class.is-on]=\"isChecked(column, row)\"\n                    [attr.aria-checked]=\"isChecked(column, row)\"\n                    [attr.aria-label]=\"text(column, row)\"\n                    [disabled]=\"isLocked(column, row)\"\n                    [pTooltip]=\"hintOf(column, row)\"\n                    tooltipPosition=\"top\"\n                    (click)=\"flip(column, row)\"\n                  >\n                    <span class=\"knob\"></span>\n                  </button>\n                  <span class=\"switch-label\">{{ text(column, row) }}</span>\n                </span>\n              } @else {\n                {{ text(column, row) }}\n                @if (tagOf(column, row); as tag) {\n                  <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n                }\n              }\n            </td>\n          }\n\n          @if (actions().length) {\n            <td class=\"align-right actions\">\n              @for (entry of visibleActions(row); track entry.id) {\n                <p-button\n                  [icon]=\"entry.icon\"\n                  [severity]=\"entry.tone === 'danger' ? 'danger' : 'secondary'\"\n                  size=\"small\"\n                  [text]=\"true\"\n                  [rounded]=\"true\"\n                  [pTooltip]=\"entry.label\"\n                  tooltipPosition=\"left\"\n                  [ariaLabel]=\"entry.label\"\n                  [disabled]=\"isActionLocked(entry, row)\"\n                  (onClick)=\"run(entry, row)\"\n                />\n              }\n            </td>\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n}\n", styles: [":host{display:block}.head{display:flex;align-items:center;justify-content:space-between;gap:12px}.head:has(>*:not(.head-actions)),.head:has(.head-actions>*){min-height:34px;margin-bottom:12px}.head-actions{display:flex;gap:8px}.placeholder{padding:26px;border:1px dashed var(--ac-border);border-radius:10px;color:var(--ac-text-muted);font-size:14px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.strong{font-weight:600}.actions{white-space:nowrap}.switch-cell{display:inline-flex;align-items:center;gap:10px}.switch-label{color:var(--ac-text-muted);font-size:12px}.ns-switch{position:relative;width:38px;height:22px;flex:none;padding:0;border:1px solid var(--ac-border);border-radius:var(--ac-radius-pill);background:color-mix(in srgb,var(--ac-text) 10%,transparent);cursor:pointer;transition:background .14s ease,border-color .14s ease}.ns-switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ac-text);transition:transform .14s ease}.ns-switch.is-on{border-color:var(--ac-accent);background:var(--ac-accent)}.ns-switch.is-on .knob{background:var(--ac-on-accent);transform:translate(16px)}.ns-switch:disabled{cursor:not-allowed;opacity:.45}.ns-switch:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}\n"] }]
-        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], toggle: [{ type: i0.Output, args: ["toggle"] }], cells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NucleusCell), { isSignal: true }] }] } });
+            args: [{ selector: 'nucleus-list', imports: [
+                        NgTemplateOutlet,
+                        NucleusLink,
+                        CdkDrag,
+                        CdkDragHandle,
+                        CdkDropList,
+                        ButtonModule,
+                        PaginatorModule,
+                        SkeletonModule,
+                        TableModule,
+                        TagModule,
+                        TooltipModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"head\">\n  <ng-content select=\"[nucleusListTitle]\" />\n  <div class=\"head-actions\">\n    <ng-content select=\"[nucleusListActions]\" />\n  </div>\n</div>\n\n@if (showEmpty()) {\n  <div class=\"placeholder\">{{ empty() }}</div>\n} @else {\n  <div class=\"bar\">\n    @if (searchable()) {\n      <label class=\"search\">\n        <i class=\"pi pi-search\" aria-hidden=\"true\"></i>\n        <input\n          type=\"search\"\n          [value]=\"term()\"\n          [placeholder]=\"copy().search\"\n          [attr.aria-label]=\"copy().search\"\n          (input)=\"onSearch($event)\"\n        />\n      </label>\n    }\n\n    <span class=\"bar-spacer\"></span>\n\n    @if (canChooseView()) {\n      <span class=\"views\">\n      <button\n        type=\"button\"\n        class=\"view\"\n        [class.is-on]=\"view() === 'grid'\"\n        [attr.aria-pressed]=\"view() === 'grid'\"\n        [attr.aria-label]=\"copy().viewGrid\"\n        [pTooltip]=\"copy().viewGrid\"\n        tooltipPosition=\"bottom\"\n        (click)=\"chooseView('grid')\"\n      >\n        <i class=\"pi pi-th-large\" aria-hidden=\"true\"></i>\n      </button>\n      <button\n        type=\"button\"\n        class=\"view\"\n        [class.is-on]=\"view() === 'rows'\"\n        [attr.aria-pressed]=\"view() === 'rows'\"\n        [attr.aria-label]=\"copy().viewRows\"\n        [pTooltip]=\"copy().viewRows\"\n        tooltipPosition=\"bottom\"\n        (click)=\"chooseView('rows')\"\n      >\n        <i class=\"pi pi-list\" aria-hidden=\"true\"></i>\n      </button>\n      </span>\n    }\n  </div>\n\n  @if (compact()) {\n    @if (showNoResults()) {\n      <div class=\"placeholder\">{{ copy().noResults }}</div>\n    }\n\n  <div\n    class=\"cards\"\n    [class.is-rows]=\"view() === 'rows'\"\n    cdkDropList\n    cdkDropListOrientation=\"mixed\"\n    [cdkDropListDisabled]=\"dragLocked()\"\n    [cdkDropListSortPredicate]=\"sortAllowed\"\n    (cdkDropListDropped)=\"onCardDrop($event)\"\n  >\n    @if (loading()) {\n      @for (item of placeholders(); track $index) {\n        <div class=\"card\">\n          <div class=\"card-top\">\n            <p-skeleton height=\"15px\" width=\"52%\" />\n          </div>\n          <div class=\"card-foot\">\n            <p-skeleton height=\"12px\" width=\"30%\" />\n            <p-skeleton height=\"12px\" width=\"30%\" />\n          </div>\n        </div>\n      }\n    } @else {\n      @for (row of pagedRows(); track $index) {\n        <article class=\"card\" [class]=\"rowClass()(row)\" cdkDrag\n          [cdkDragData]=\"row\"\n          [cdkDragDisabled]=\"dragLocked()\"\n          (cdkDragStarted)=\"dragStart.emit(row)\">\n          <div class=\"card-top\">\n            @if (reorderable()) {\n              <button\n                type=\"button\"\n                class=\"grip\"\n                cdkDragHandle\n                [disabled]=\"dragLocked()\"\n                [attr.aria-label]=\"copy().reorderHandle\"\n              >\n                <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n              </button>\n            }\n            @if (identityColumn(); as column) {\n              <span class=\"card-name\">\n                @if (cellTemplate(column.key); as custom) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"custom\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n                  />\n                } @else {\n                  {{ text(column, row) }}\n                }\n              </span>\n            }\n\n            @if (statusColumn(); as column) {\n              <span class=\"card-status\">\n                @if (tagOf(column, row); as tag) {\n                  <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n                } @else if (cellTemplate(column.key); as custom) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"custom\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n                  />\n                } @else {\n                  {{ text(column, row) }}\n                }\n              </span>\n            }\n          </div>\n\n          @if (attributeColumns().length || visibleActions(row).length) {\n            <div class=\"card-foot\">\n              <div class=\"card-fields\">\n                @for (column of attributeColumns(); track column.key) {\n                <div class=\"field\">\n                  <span class=\"field-label\">{{ column.header }}</span>\n                  <span class=\"field-value\">\n                    @if (cellTemplate(column.key); as custom) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"custom\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n                      />\n                    } @else if (linkOf(column, row); as target) {\n                      <nucleus-link\n                        [route]=\"target.route\"\n                        [queryParams]=\"target.queryParams ?? null\"\n                        [hint]=\"column.header\"\n                      >\n                        {{ text(column, row) }}\n                      </nucleus-link>\n                    } @else if (column.kind === 'switch') {\n                      <button\n                        type=\"button\"\n                        class=\"ns-switch\"\n                        role=\"switch\"\n                        [class.is-on]=\"isChecked(column, row)\"\n                        [attr.aria-checked]=\"isChecked(column, row)\"\n                        [attr.aria-label]=\"column.header\"\n                        [disabled]=\"isLocked(column, row)\"\n                        (click)=\"flip(column, row)\"\n                      >\n                        <span class=\"knob\"></span>\n                      </button>\n                      @if (tagOf(column, row); as tag) {\n                        <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n                      } @else {\n                        <span class=\"switch-label\">{{ text(column, row) }}</span>\n                      }\n                    } @else {\n                      {{ text(column, row) }}\n                      @if (tagOf(column, row); as tag) {\n                        <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n                      }\n                    }\n                  </span>\n                  </div>\n                }\n              </div>\n\n              @if (visibleActions(row).length) {\n                <div class=\"card-actions\">\n                  @for (entry of visibleActions(row); track entry.id) {\n                    <p-button\n                      [icon]=\"entry.icon\"\n                      [severity]=\"entry.tone === 'danger' ? 'danger' : 'secondary'\"\n                      size=\"small\"\n                      [text]=\"true\"\n                      [rounded]=\"true\"\n                      [ariaLabel]=\"entry.label\"\n                      [disabled]=\"isActionLocked(entry, row)\"\n                      (onClick)=\"run(entry, row)\"\n                    />\n                  }\n                </div>\n              }\n            </div>\n          }\n        </article>\n      }\n    }\n  </div>\n\n    @if (paginate()) {\n      <div class=\"foot\">\n        <p-paginator\n          styleClass=\"ns-cards-paginator\"\n          [first]=\"page()\"\n          [rows]=\"rowsPerPage()\"\n          [totalRecords]=\"filtered().length\"\n          [rowsPerPageOptions]=\"pageSizes()\"\n          (onPageChange)=\"onPage($event)\"\n        />\n      </div>\n    }\n} @else {\n  <p-table\n    [value]=\"data()\"\n    styleClass=\"ns-table\"\n    [tableStyle]=\"tableStyle()\"\n    [paginator]=\"paginate()\"\n    [rows]=\"pageSize()\"\n    [rowsPerPageOptions]=\"pageSizes()\"\n    [alwaysShowPaginator]=\"true\"\n    (onRowReorder)=\"onRowReorder($event)\"\n  >\n    <ng-template #header>\n      <tr>\n        @if (reorderable()) {\n          <th class=\"grip-head\"></th>\n        }\n        @for (column of columns(); track column.key) {\n          <th [class]=\"'align-' + (column.align ?? 'left')\" [style.width]=\"column.width\">\n            {{ column.header }}\n          </th>\n        }\n        @if (actions().length) {\n          <th class=\"align-right\"></th>\n        }\n      </tr>\n    </ng-template>\n\n    <ng-template #body let-row let-rowIndex=\"rowIndex\">\n      @if (loading()) {\n        <tr class=\"is-skeleton\">\n          @if (reorderable()) {\n            <td class=\"grip-cell\"></td>\n          }\n          @for (column of columns(); track column.key) {\n            <td [class]=\"'align-' + (column.align ?? 'left')\">\n              <p-skeleton height=\"13px\" [width]=\"skeletonWidth(column)\" />\n            </td>\n          }\n          @if (actions().length) {\n            <td class=\"align-right actions\">\n              <p-skeleton shape=\"circle\" size=\"26px\" />\n            </td>\n          }\n        </tr>\n      } @else {\n        <tr\n          [class]=\"rowClass()(row)\"\n          [pReorderableRow]=\"rowIndex\"\n          [pReorderableRowDisabled]=\"dragLocked()\"\n        >\n          @if (reorderable()) {\n            <td class=\"grip-cell\">\n              <span class=\"grip\" pReorderableRowHandle [attr.aria-label]=\"copy().reorderHandle\">\n                <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n              </span>\n            </td>\n          }\n          @for (column of columns(); track column.key) {\n            <td [class]=\"'align-' + (column.align ?? 'left')\" [class.strong]=\"column.strong\">\n              @if (cellTemplate(column.key); as custom) {\n                <ng-container\n                  [ngTemplateOutlet]=\"custom\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n                />\n              } @else if (column.kind === 'switch') {\n                <span class=\"switch-cell\">\n                  <button\n                    type=\"button\"\n                    class=\"ns-switch\"\n                    role=\"switch\"\n                    [class.is-on]=\"isChecked(column, row)\"\n                    [attr.aria-checked]=\"isChecked(column, row)\"\n                    [attr.aria-label]=\"text(column, row)\"\n                    [disabled]=\"isLocked(column, row)\"\n                    [pTooltip]=\"hintOf(column, row)\"\n                    tooltipPosition=\"top\"\n                    (click)=\"flip(column, row)\"\n                  >\n                    <span class=\"knob\"></span>\n                  </button>\n                  <span class=\"switch-label\">{{ text(column, row) }}</span>\n                </span>\n              } @else {\n                {{ text(column, row) }}\n                @if (tagOf(column, row); as tag) {\n                  <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n                }\n              }\n            </td>\n          }\n\n          @if (actions().length) {\n            <td class=\"align-right actions\">\n              @for (entry of visibleActions(row); track entry.id) {\n                <p-button\n                  [icon]=\"entry.icon\"\n                  [severity]=\"entry.tone === 'danger' ? 'danger' : 'secondary'\"\n                  size=\"small\"\n                  [text]=\"true\"\n                  [rounded]=\"true\"\n                  [pTooltip]=\"entry.label\"\n                  tooltipPosition=\"left\"\n                  [ariaLabel]=\"entry.label\"\n                  [disabled]=\"isActionLocked(entry, row)\"\n                  (onClick)=\"run(entry, row)\"\n                />\n              }\n            </td>\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n}\n}\n", styles: [":host{display:block}.head{display:flex;align-items:center;justify-content:space-between;gap:12px}.head:has(>*:not(.head-actions)),.head:has(.head-actions>*){min-height:34px;margin-bottom:12px}.head-actions{display:flex;gap:8px}.placeholder{padding:26px;border:1px dashed var(--ac-border);border-radius:10px;color:var(--ac-text-muted);font-size:14px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.strong{font-weight:var(--ns-weight-emphasis)}.actions{white-space:nowrap}.switch-cell{display:inline-flex;align-items:center;gap:10px}.switch-label{color:var(--ac-text-muted);font-size:12px}.ns-switch{position:relative;width:38px;height:22px;flex:none;padding:0;border:1px solid var(--ac-border);border-radius:var(--ac-radius-pill);background:color-mix(in srgb,var(--ac-text) 10%,transparent);cursor:pointer;transition:background .14s ease,border-color .14s ease}.ns-switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ac-text);transition:transform .14s ease}.ns-switch.is-on{border-color:var(--ac-accent);background:var(--ac-accent)}.ns-switch.is-on .knob{background:var(--ac-on-accent);transform:translate(16px)}.ns-switch:disabled{cursor:not-allowed;opacity:.45}.ns-switch:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.card{padding:13px 14px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1)}.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.card-name{display:flex;min-width:0;flex:1;align-items:center;gap:10px;font-size:15px;font-weight:var(--ns-weight-emphasis);line-height:1.3}.card-status{flex:none}.card-foot{display:flex;align-items:flex-end;gap:12px;margin-top:11px;padding-top:11px;border-top:1px solid var(--ac-border)}.card-fields{display:flex;min-width:0;flex:1;flex-wrap:wrap;gap:10px 20px}.card-actions{display:flex;flex:none;align-items:center;gap:2px}.field{display:flex;min-width:0;flex-direction:column;gap:2px}.field-label{color:var(--ac-text-muted);font-size:10px;font-weight:var(--ns-weight-heading);letter-spacing:.07em;text-transform:uppercase}.field-value{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:var(--ns-weight-emphasis);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}::ng-deep .ns-cards-paginator{background:transparent}.grip{display:inline-grid;width:26px;height:26px;flex:none;padding:0;border:0;border-radius:4px;background:transparent;color:var(--ac-text-muted);cursor:grab;place-items:center;touch-action:none}.grip:hover{background:color-mix(in srgb,var(--ac-text) 8%,transparent);color:var(--ac-text)}.grip:active{cursor:grabbing}.grip:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}.grip .pi{font-size:13px}.grip-head,.grip-cell{width:38px;padding-right:0!important}.cdk-drag-preview{border:1px solid var(--ac-accent);border-radius:12px;background:var(--ac-surface);box-shadow:var(--ns-shadow-2);opacity:.96}.cdk-drag-placeholder{border:1px dashed var(--ac-border);background:color-mix(in srgb,var(--ac-text) 4%,transparent);opacity:.6}.cdk-drag-placeholder *{visibility:hidden}.cards.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .18s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .22s cubic-bezier(0,0,.2,1)}.bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:7px 10px;border:1px solid var(--ac-border);border-radius:10px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1)}.bar-spacer{flex:1}.search{display:flex;min-width:0;max-width:340px;flex:1 1 220px;align-items:center;gap:8px;padding:5px 10px;border:1px solid var(--ac-border);border-radius:6px;background:color-mix(in srgb,var(--ac-text) 4%,transparent);color:var(--ac-text-muted)}.search:focus-within{border-color:var(--ac-accent);color:var(--ac-text)}.search .pi{font-size:13px}.search input{min-width:0;flex:1;padding:0;border:0;background:transparent;color:var(--ac-text);font:inherit;font-size:13px;outline:none}.search input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.6)}.views{display:inline-flex;flex:none;padding:2px;border:1px solid var(--ac-border);border-radius:7px}.view{display:grid;width:30px;height:28px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--ac-text-muted);cursor:pointer;place-items:center}.view:hover{color:var(--ac-text)}.view.is-on{background:color-mix(in srgb,var(--ac-accent) 18%,transparent);color:var(--ac-accent)}.view:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}.view .pi{font-size:14px}.foot{margin-top:12px;padding:4px 6px;border:1px solid var(--ac-border);border-radius:10px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1)}@media(min-width:721px){.cards.is-rows{gap:8px;grid-template-columns:minmax(0,1fr)}.cards.is-rows .card{display:grid;align-items:center;gap:18px;grid-template-columns:minmax(0,2fr) minmax(0,3fr);padding:9px 14px}.cards.is-rows .card-top{min-width:0;align-items:center;gap:12px}.cards.is-rows .card-foot{margin-top:0;padding-top:0;border-top:0;gap:14px}.cards.is-rows .card-fields{display:grid;min-width:0;flex:1;gap:14px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}.cards.is-rows .field-label,.cards.is-rows .field-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}\n"] }]
+        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }], cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], reorderGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderGroup", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], reorder: [{ type: i0.Output, args: ["reorder"] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], toggle: [{ type: i0.Output, args: ["toggle"] }], cells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NucleusCell), { isSignal: true }] }] } });
 
 function toggleCollapsed(collapsed, id) {
     const next = new Set(collapsed);
@@ -3166,32 +3562,13 @@ class NucleusAppearance {
         this.theme.setDensity(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusAppearance, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusAppearance, isStandalone: true, selector: "nucleus-appearance", ngImport: i0, template: "@let t = copy();\n@let current = appearance();\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.frameTitle }}</h3>\n  <p class=\"group-hint\">{{ t.frameHint }}</p>\n\n  <div class=\"frames\" role=\"radiogroup\" [attr.aria-label]=\"t.frameTitle\">\n    @for (frame of frames(); track frame.id) {\n      <button\n        type=\"button\"\n        class=\"frame\"\n        role=\"radio\"\n        [class.is-active]=\"frame.id === current.frame\"\n        [attr.aria-checked]=\"frame.id === current.frame\"\n        [attr.aria-label]=\"frame.label\"\n        [style.--f-bg]=\"frame.tokens.bg\"\n        [style.--f-raised]=\"frame.tokens.raised\"\n        [style.--f-ink]=\"frame.tokens.ink\"\n        [style.--f-muted]=\"frame.tokens.muted\"\n        [style.--f-line]=\"frame.tokens.line\"\n        [style.--f-glow]=\"frame.tokens.glow\"\n        (click)=\"pickFrame(frame.id)\"\n      >\n        <span class=\"frame-chip\" aria-hidden=\"true\">\n          <span class=\"frame-bar\">\n            <span class=\"frame-dot\"></span>\n          </span>\n          <span class=\"frame-lower\">\n            <span class=\"frame-rail\">\n              <span class=\"frame-pin\"></span>\n              <span class=\"frame-row is-on\"></span>\n              <span class=\"frame-row\"></span>\n              <span class=\"frame-row\"></span>\n            </span>\n            <span class=\"frame-canvas\"></span>\n          </span>\n        </span>\n        <span class=\"frame-name\">{{ frame.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.canvasTitle }}</h3>\n  <p class=\"group-hint\">{{ t.canvasHint }}</p>\n\n  <div class=\"canvases\" role=\"radiogroup\" [attr.aria-label]=\"t.canvasTitle\">\n    @for (canvas of canvases(); track canvas.id) {\n      <button\n        type=\"button\"\n        class=\"canvas\"\n        role=\"radio\"\n        [class.is-active]=\"canvas.id === current.canvas\"\n        [attr.aria-checked]=\"canvas.id === current.canvas\"\n        (click)=\"pickCanvas(canvas.id)\"\n      >\n        <span\n          class=\"canvas-chip\"\n          aria-hidden=\"true\"\n          [style.background]=\"canvas.bg\"\n          [style.color]=\"canvas.text\"\n        >\n          @if (canvas.icon) {\n            <i [class]=\"canvas.icon\"></i>\n          } @else {\n            <span class=\"canvas-sheet\" [style.background]=\"canvas.surface\"></span>\n          }\n        </span>\n        <span class=\"canvas-name\">{{ canvas.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.accentTitle }}</h3>\n  <p class=\"group-hint\">{{ t.accentHint }}</p>\n\n  <div class=\"accents\" role=\"radiogroup\" [attr.aria-label]=\"t.accentTitle\">\n    @for (accent of accents(); track accent.id) {\n      <button\n        type=\"button\"\n        class=\"accent\"\n        role=\"radio\"\n        [class.is-auto]=\"accent.id === 'auto'\"\n        [class.is-active]=\"accent.id === current.accent\"\n        [attr.aria-checked]=\"accent.id === current.accent\"\n        [attr.aria-label]=\"accent.label\"\n        [title]=\"accent.label\"\n        [style.background]=\"accent.color\"\n        [style.color]=\"accent.ink\"\n        (click)=\"pickAccent(accent.id)\"\n      >\n        @if (accent.id === current.accent) {\n          <i class=\"pi pi-check\" aria-hidden=\"true\"></i>\n        } @else if (accent.id === 'auto') {\n          <i class=\"pi pi-sparkles\" aria-hidden=\"true\"></i>\n        }\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.densityTitle }}</h3>\n  <p class=\"group-hint\">{{ t.densityHint }}</p>\n\n  <div class=\"densities\" role=\"radiogroup\" [attr.aria-label]=\"t.densityTitle\">\n    @for (density of densities(); track density.id) {\n      <button\n        type=\"button\"\n        class=\"density\"\n        role=\"radio\"\n        [class.is-active]=\"density.id === current.density\"\n        [attr.aria-checked]=\"density.id === current.density\"\n        (click)=\"pickDensity(density.id)\"\n      >\n        <span class=\"density-chip\" aria-hidden=\"true\" [style.gap.px]=\"density.gap\">\n          <span class=\"density-row\"></span>\n          <span class=\"density-row\"></span>\n          <span class=\"density-row\"></span>\n        </span>\n        <span class=\"density-name\">{{ density.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n", styles: [":host{display:flex;flex-direction:column;gap:26px}.group{display:flex;flex-direction:column;gap:2px}.group-title{margin:0;font-size:13px;font-weight:600;letter-spacing:.02em}.group-hint{margin:0 0 12px;color:var(--ac-text-muted);font-size:12px;font-weight:300;line-height:1.45}.frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}.frame{display:flex;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.frame:hover{color:var(--ac-text)}.frame.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.frame-chip{display:flex;overflow:hidden;flex-direction:column;height:52px;border:1px solid var(--f-line);border-radius:6px;background:var(--f-bg)}.frame-bar{display:flex;flex:none;align-items:center;height:12px;padding-left:5px;border-bottom:1px solid var(--f-line)}.frame-dot{width:5px;height:5px;border-radius:50%;background:var(--f-glow)}.frame-lower{display:flex;flex:1;min-height:0}.frame-rail{display:flex;flex:none;flex-direction:column;gap:3px;width:22px;padding:4px 3px;border-right:1px solid var(--f-line)}.frame-pin{height:7px;border-left:2px solid var(--f-glow);border-radius:2px;background:var(--f-raised)}.frame-row{height:3px;border-radius:2px;background:var(--f-muted);opacity:.55}.frame-row.is-on{background:var(--f-glow);opacity:1}.frame-canvas{flex:1;background:var(--ac-bg)}.frame-name{overflow:hidden;font-size:11px;font-weight:500;text-align:center;text-overflow:ellipsis;white-space:nowrap}.canvases{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}.canvas{display:flex;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.canvas:hover{color:var(--ac-text)}.canvas.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.canvas-chip{display:flex;align-items:center;justify-content:center;height:40px;border:1px solid var(--ac-border);border-radius:6px}.canvas-chip i{font-size:15px}.canvas-sheet{width:60%;height:58%;border-radius:3px;box-shadow:0 1px 4px #00000038}.canvas-name{font-size:11px;font-weight:500;text-align:center}.accents{display:flex;flex-wrap:wrap;gap:9px}.accent{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:transform .12s ease}.accent:hover{transform:scale(1.12)}.accent.is-auto{border-style:dashed;border-color:var(--ac-border)}.accent.is-active{border-style:solid;border-color:var(--ac-text);box-shadow:0 0 0 2px var(--ac-surface) inset}.accent i{font-size:11px}.densities{display:flex;gap:10px}.density{display:flex;flex:1;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.density:hover{color:var(--ac-text)}.density.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.density-chip{display:flex;flex-direction:column;justify-content:center;height:42px;padding:0 10px;border:1px solid var(--ac-border);border-radius:6px;background:var(--ac-surface)}.density-row{height:3px;border-radius:2px;background:var(--ac-text-muted);opacity:.5}.density-name{font-size:11px;font-weight:500;text-align:center}@media(prefers-reduced-motion:reduce){.accent{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusAppearance, isStandalone: true, selector: "nucleus-appearance", ngImport: i0, template: "@let t = copy();\n@let current = appearance();\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.frameTitle }}</h3>\n  <p class=\"group-hint\">{{ t.frameHint }}</p>\n\n  <div class=\"frames\" role=\"radiogroup\" [attr.aria-label]=\"t.frameTitle\">\n    @for (frame of frames(); track frame.id) {\n      <button\n        type=\"button\"\n        class=\"frame\"\n        role=\"radio\"\n        [class.is-active]=\"frame.id === current.frame\"\n        [attr.aria-checked]=\"frame.id === current.frame\"\n        [attr.aria-label]=\"frame.label\"\n        [style.--f-bg]=\"frame.tokens.bg\"\n        [style.--f-raised]=\"frame.tokens.raised\"\n        [style.--f-ink]=\"frame.tokens.ink\"\n        [style.--f-muted]=\"frame.tokens.muted\"\n        [style.--f-line]=\"frame.tokens.line\"\n        [style.--f-glow]=\"frame.tokens.glow\"\n        (click)=\"pickFrame(frame.id)\"\n      >\n        <span class=\"frame-chip\" aria-hidden=\"true\">\n          <span class=\"frame-bar\">\n            <span class=\"frame-dot\"></span>\n          </span>\n          <span class=\"frame-lower\">\n            <span class=\"frame-rail\">\n              <span class=\"frame-pin\"></span>\n              <span class=\"frame-row is-on\"></span>\n              <span class=\"frame-row\"></span>\n              <span class=\"frame-row\"></span>\n            </span>\n            <span class=\"frame-canvas\"></span>\n          </span>\n        </span>\n        <span class=\"frame-name\">{{ frame.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.canvasTitle }}</h3>\n  <p class=\"group-hint\">{{ t.canvasHint }}</p>\n\n  <div class=\"canvases\" role=\"radiogroup\" [attr.aria-label]=\"t.canvasTitle\">\n    @for (canvas of canvases(); track canvas.id) {\n      <button\n        type=\"button\"\n        class=\"canvas\"\n        role=\"radio\"\n        [class.is-active]=\"canvas.id === current.canvas\"\n        [attr.aria-checked]=\"canvas.id === current.canvas\"\n        (click)=\"pickCanvas(canvas.id)\"\n      >\n        <span\n          class=\"canvas-chip\"\n          aria-hidden=\"true\"\n          [style.background]=\"canvas.bg\"\n          [style.color]=\"canvas.text\"\n        >\n          @if (canvas.icon) {\n            <i [class]=\"canvas.icon\"></i>\n          } @else {\n            <span class=\"canvas-sheet\" [style.background]=\"canvas.surface\"></span>\n          }\n        </span>\n        <span class=\"canvas-name\">{{ canvas.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.accentTitle }}</h3>\n  <p class=\"group-hint\">{{ t.accentHint }}</p>\n\n  <div class=\"accents\" role=\"radiogroup\" [attr.aria-label]=\"t.accentTitle\">\n    @for (accent of accents(); track accent.id) {\n      <button\n        type=\"button\"\n        class=\"accent\"\n        role=\"radio\"\n        [class.is-auto]=\"accent.id === 'auto'\"\n        [class.is-active]=\"accent.id === current.accent\"\n        [attr.aria-checked]=\"accent.id === current.accent\"\n        [attr.aria-label]=\"accent.label\"\n        [title]=\"accent.label\"\n        [style.background]=\"accent.color\"\n        [style.color]=\"accent.ink\"\n        (click)=\"pickAccent(accent.id)\"\n      >\n        @if (accent.id === current.accent) {\n          <i class=\"pi pi-check\" aria-hidden=\"true\"></i>\n        } @else if (accent.id === 'auto') {\n          <i class=\"pi pi-sparkles\" aria-hidden=\"true\"></i>\n        }\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.densityTitle }}</h3>\n  <p class=\"group-hint\">{{ t.densityHint }}</p>\n\n  <div class=\"densities\" role=\"radiogroup\" [attr.aria-label]=\"t.densityTitle\">\n    @for (density of densities(); track density.id) {\n      <button\n        type=\"button\"\n        class=\"density\"\n        role=\"radio\"\n        [class.is-active]=\"density.id === current.density\"\n        [attr.aria-checked]=\"density.id === current.density\"\n        (click)=\"pickDensity(density.id)\"\n      >\n        <span class=\"density-chip\" aria-hidden=\"true\" [style.gap.px]=\"density.gap\">\n          <span class=\"density-row\"></span>\n          <span class=\"density-row\"></span>\n          <span class=\"density-row\"></span>\n        </span>\n        <span class=\"density-name\">{{ density.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n", styles: [":host{display:flex;flex-direction:column;gap:26px}.group{display:flex;flex-direction:column;gap:2px}.group-title{margin:0;font-size:13px;font-weight:var(--ns-weight-heading);letter-spacing:.02em}.group-hint{margin:0 0 12px;color:var(--ac-text-muted);font-size:12px;font-weight:300;line-height:1.45}.frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}.frame{display:flex;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.frame:hover{color:var(--ac-text)}.frame.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.frame-chip{display:flex;overflow:hidden;flex-direction:column;height:52px;border:1px solid var(--f-line);border-radius:6px;background:var(--f-bg)}.frame-bar{display:flex;flex:none;align-items:center;height:12px;padding-left:5px;border-bottom:1px solid var(--f-line)}.frame-dot{width:5px;height:5px;border-radius:50%;background:var(--f-glow)}.frame-lower{display:flex;flex:1;min-height:0}.frame-rail{display:flex;flex:none;flex-direction:column;gap:3px;width:22px;padding:4px 3px;border-right:1px solid var(--f-line)}.frame-pin{height:7px;border-left:2px solid var(--f-glow);border-radius:2px;background:var(--f-raised)}.frame-row{height:3px;border-radius:2px;background:var(--f-muted);opacity:.55}.frame-row.is-on{background:var(--f-glow);opacity:1}.frame-canvas{flex:1;background:var(--ac-bg)}.frame-name{overflow:hidden;font-size:11px;font-weight:var(--ns-weight-emphasis);text-align:center;text-overflow:ellipsis;white-space:nowrap}.canvases{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}.canvas{display:flex;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.canvas:hover{color:var(--ac-text)}.canvas.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.canvas-chip{display:flex;align-items:center;justify-content:center;height:40px;border:1px solid var(--ac-border);border-radius:6px}.canvas-chip i{font-size:15px}.canvas-sheet{width:60%;height:58%;border-radius:3px;box-shadow:0 1px 4px #00000038}.canvas-name{font-size:11px;font-weight:var(--ns-weight-emphasis);text-align:center}.accents{display:flex;flex-wrap:wrap;gap:9px}.accent{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:transform .12s ease}.accent:hover{transform:scale(1.12)}.accent.is-auto{border-style:dashed;border-color:var(--ac-border)}.accent.is-active{border-style:solid;border-color:var(--ac-text);box-shadow:0 0 0 2px var(--ac-surface) inset}.accent i{font-size:11px}.densities{display:flex;gap:10px}.density{display:flex;flex:1;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.density:hover{color:var(--ac-text)}.density.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.density-chip{display:flex;flex-direction:column;justify-content:center;height:42px;padding:0 10px;border:1px solid var(--ac-border);border-radius:6px;background:var(--ac-surface)}.density-row{height:3px;border-radius:2px;background:var(--ac-text-muted);opacity:.5}.density-name{font-size:11px;font-weight:var(--ns-weight-emphasis);text-align:center}@media(prefers-reduced-motion:reduce){.accent{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusAppearance, decorators: [{
             type: Component,
-            args: [{ selector: 'nucleus-appearance', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let t = copy();\n@let current = appearance();\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.frameTitle }}</h3>\n  <p class=\"group-hint\">{{ t.frameHint }}</p>\n\n  <div class=\"frames\" role=\"radiogroup\" [attr.aria-label]=\"t.frameTitle\">\n    @for (frame of frames(); track frame.id) {\n      <button\n        type=\"button\"\n        class=\"frame\"\n        role=\"radio\"\n        [class.is-active]=\"frame.id === current.frame\"\n        [attr.aria-checked]=\"frame.id === current.frame\"\n        [attr.aria-label]=\"frame.label\"\n        [style.--f-bg]=\"frame.tokens.bg\"\n        [style.--f-raised]=\"frame.tokens.raised\"\n        [style.--f-ink]=\"frame.tokens.ink\"\n        [style.--f-muted]=\"frame.tokens.muted\"\n        [style.--f-line]=\"frame.tokens.line\"\n        [style.--f-glow]=\"frame.tokens.glow\"\n        (click)=\"pickFrame(frame.id)\"\n      >\n        <span class=\"frame-chip\" aria-hidden=\"true\">\n          <span class=\"frame-bar\">\n            <span class=\"frame-dot\"></span>\n          </span>\n          <span class=\"frame-lower\">\n            <span class=\"frame-rail\">\n              <span class=\"frame-pin\"></span>\n              <span class=\"frame-row is-on\"></span>\n              <span class=\"frame-row\"></span>\n              <span class=\"frame-row\"></span>\n            </span>\n            <span class=\"frame-canvas\"></span>\n          </span>\n        </span>\n        <span class=\"frame-name\">{{ frame.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.canvasTitle }}</h3>\n  <p class=\"group-hint\">{{ t.canvasHint }}</p>\n\n  <div class=\"canvases\" role=\"radiogroup\" [attr.aria-label]=\"t.canvasTitle\">\n    @for (canvas of canvases(); track canvas.id) {\n      <button\n        type=\"button\"\n        class=\"canvas\"\n        role=\"radio\"\n        [class.is-active]=\"canvas.id === current.canvas\"\n        [attr.aria-checked]=\"canvas.id === current.canvas\"\n        (click)=\"pickCanvas(canvas.id)\"\n      >\n        <span\n          class=\"canvas-chip\"\n          aria-hidden=\"true\"\n          [style.background]=\"canvas.bg\"\n          [style.color]=\"canvas.text\"\n        >\n          @if (canvas.icon) {\n            <i [class]=\"canvas.icon\"></i>\n          } @else {\n            <span class=\"canvas-sheet\" [style.background]=\"canvas.surface\"></span>\n          }\n        </span>\n        <span class=\"canvas-name\">{{ canvas.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.accentTitle }}</h3>\n  <p class=\"group-hint\">{{ t.accentHint }}</p>\n\n  <div class=\"accents\" role=\"radiogroup\" [attr.aria-label]=\"t.accentTitle\">\n    @for (accent of accents(); track accent.id) {\n      <button\n        type=\"button\"\n        class=\"accent\"\n        role=\"radio\"\n        [class.is-auto]=\"accent.id === 'auto'\"\n        [class.is-active]=\"accent.id === current.accent\"\n        [attr.aria-checked]=\"accent.id === current.accent\"\n        [attr.aria-label]=\"accent.label\"\n        [title]=\"accent.label\"\n        [style.background]=\"accent.color\"\n        [style.color]=\"accent.ink\"\n        (click)=\"pickAccent(accent.id)\"\n      >\n        @if (accent.id === current.accent) {\n          <i class=\"pi pi-check\" aria-hidden=\"true\"></i>\n        } @else if (accent.id === 'auto') {\n          <i class=\"pi pi-sparkles\" aria-hidden=\"true\"></i>\n        }\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.densityTitle }}</h3>\n  <p class=\"group-hint\">{{ t.densityHint }}</p>\n\n  <div class=\"densities\" role=\"radiogroup\" [attr.aria-label]=\"t.densityTitle\">\n    @for (density of densities(); track density.id) {\n      <button\n        type=\"button\"\n        class=\"density\"\n        role=\"radio\"\n        [class.is-active]=\"density.id === current.density\"\n        [attr.aria-checked]=\"density.id === current.density\"\n        (click)=\"pickDensity(density.id)\"\n      >\n        <span class=\"density-chip\" aria-hidden=\"true\" [style.gap.px]=\"density.gap\">\n          <span class=\"density-row\"></span>\n          <span class=\"density-row\"></span>\n          <span class=\"density-row\"></span>\n        </span>\n        <span class=\"density-name\">{{ density.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n", styles: [":host{display:flex;flex-direction:column;gap:26px}.group{display:flex;flex-direction:column;gap:2px}.group-title{margin:0;font-size:13px;font-weight:600;letter-spacing:.02em}.group-hint{margin:0 0 12px;color:var(--ac-text-muted);font-size:12px;font-weight:300;line-height:1.45}.frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}.frame{display:flex;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.frame:hover{color:var(--ac-text)}.frame.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.frame-chip{display:flex;overflow:hidden;flex-direction:column;height:52px;border:1px solid var(--f-line);border-radius:6px;background:var(--f-bg)}.frame-bar{display:flex;flex:none;align-items:center;height:12px;padding-left:5px;border-bottom:1px solid var(--f-line)}.frame-dot{width:5px;height:5px;border-radius:50%;background:var(--f-glow)}.frame-lower{display:flex;flex:1;min-height:0}.frame-rail{display:flex;flex:none;flex-direction:column;gap:3px;width:22px;padding:4px 3px;border-right:1px solid var(--f-line)}.frame-pin{height:7px;border-left:2px solid var(--f-glow);border-radius:2px;background:var(--f-raised)}.frame-row{height:3px;border-radius:2px;background:var(--f-muted);opacity:.55}.frame-row.is-on{background:var(--f-glow);opacity:1}.frame-canvas{flex:1;background:var(--ac-bg)}.frame-name{overflow:hidden;font-size:11px;font-weight:500;text-align:center;text-overflow:ellipsis;white-space:nowrap}.canvases{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}.canvas{display:flex;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.canvas:hover{color:var(--ac-text)}.canvas.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.canvas-chip{display:flex;align-items:center;justify-content:center;height:40px;border:1px solid var(--ac-border);border-radius:6px}.canvas-chip i{font-size:15px}.canvas-sheet{width:60%;height:58%;border-radius:3px;box-shadow:0 1px 4px #00000038}.canvas-name{font-size:11px;font-weight:500;text-align:center}.accents{display:flex;flex-wrap:wrap;gap:9px}.accent{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:transform .12s ease}.accent:hover{transform:scale(1.12)}.accent.is-auto{border-style:dashed;border-color:var(--ac-border)}.accent.is-active{border-style:solid;border-color:var(--ac-text);box-shadow:0 0 0 2px var(--ac-surface) inset}.accent i{font-size:11px}.densities{display:flex;gap:10px}.density{display:flex;flex:1;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.density:hover{color:var(--ac-text)}.density.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.density-chip{display:flex;flex-direction:column;justify-content:center;height:42px;padding:0 10px;border:1px solid var(--ac-border);border-radius:6px;background:var(--ac-surface)}.density-row{height:3px;border-radius:2px;background:var(--ac-text-muted);opacity:.5}.density-name{font-size:11px;font-weight:500;text-align:center}@media(prefers-reduced-motion:reduce){.accent{transition:none}}\n"] }]
+            args: [{ selector: 'nucleus-appearance', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let t = copy();\n@let current = appearance();\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.frameTitle }}</h3>\n  <p class=\"group-hint\">{{ t.frameHint }}</p>\n\n  <div class=\"frames\" role=\"radiogroup\" [attr.aria-label]=\"t.frameTitle\">\n    @for (frame of frames(); track frame.id) {\n      <button\n        type=\"button\"\n        class=\"frame\"\n        role=\"radio\"\n        [class.is-active]=\"frame.id === current.frame\"\n        [attr.aria-checked]=\"frame.id === current.frame\"\n        [attr.aria-label]=\"frame.label\"\n        [style.--f-bg]=\"frame.tokens.bg\"\n        [style.--f-raised]=\"frame.tokens.raised\"\n        [style.--f-ink]=\"frame.tokens.ink\"\n        [style.--f-muted]=\"frame.tokens.muted\"\n        [style.--f-line]=\"frame.tokens.line\"\n        [style.--f-glow]=\"frame.tokens.glow\"\n        (click)=\"pickFrame(frame.id)\"\n      >\n        <span class=\"frame-chip\" aria-hidden=\"true\">\n          <span class=\"frame-bar\">\n            <span class=\"frame-dot\"></span>\n          </span>\n          <span class=\"frame-lower\">\n            <span class=\"frame-rail\">\n              <span class=\"frame-pin\"></span>\n              <span class=\"frame-row is-on\"></span>\n              <span class=\"frame-row\"></span>\n              <span class=\"frame-row\"></span>\n            </span>\n            <span class=\"frame-canvas\"></span>\n          </span>\n        </span>\n        <span class=\"frame-name\">{{ frame.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.canvasTitle }}</h3>\n  <p class=\"group-hint\">{{ t.canvasHint }}</p>\n\n  <div class=\"canvases\" role=\"radiogroup\" [attr.aria-label]=\"t.canvasTitle\">\n    @for (canvas of canvases(); track canvas.id) {\n      <button\n        type=\"button\"\n        class=\"canvas\"\n        role=\"radio\"\n        [class.is-active]=\"canvas.id === current.canvas\"\n        [attr.aria-checked]=\"canvas.id === current.canvas\"\n        (click)=\"pickCanvas(canvas.id)\"\n      >\n        <span\n          class=\"canvas-chip\"\n          aria-hidden=\"true\"\n          [style.background]=\"canvas.bg\"\n          [style.color]=\"canvas.text\"\n        >\n          @if (canvas.icon) {\n            <i [class]=\"canvas.icon\"></i>\n          } @else {\n            <span class=\"canvas-sheet\" [style.background]=\"canvas.surface\"></span>\n          }\n        </span>\n        <span class=\"canvas-name\">{{ canvas.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.accentTitle }}</h3>\n  <p class=\"group-hint\">{{ t.accentHint }}</p>\n\n  <div class=\"accents\" role=\"radiogroup\" [attr.aria-label]=\"t.accentTitle\">\n    @for (accent of accents(); track accent.id) {\n      <button\n        type=\"button\"\n        class=\"accent\"\n        role=\"radio\"\n        [class.is-auto]=\"accent.id === 'auto'\"\n        [class.is-active]=\"accent.id === current.accent\"\n        [attr.aria-checked]=\"accent.id === current.accent\"\n        [attr.aria-label]=\"accent.label\"\n        [title]=\"accent.label\"\n        [style.background]=\"accent.color\"\n        [style.color]=\"accent.ink\"\n        (click)=\"pickAccent(accent.id)\"\n      >\n        @if (accent.id === current.accent) {\n          <i class=\"pi pi-check\" aria-hidden=\"true\"></i>\n        } @else if (accent.id === 'auto') {\n          <i class=\"pi pi-sparkles\" aria-hidden=\"true\"></i>\n        }\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.densityTitle }}</h3>\n  <p class=\"group-hint\">{{ t.densityHint }}</p>\n\n  <div class=\"densities\" role=\"radiogroup\" [attr.aria-label]=\"t.densityTitle\">\n    @for (density of densities(); track density.id) {\n      <button\n        type=\"button\"\n        class=\"density\"\n        role=\"radio\"\n        [class.is-active]=\"density.id === current.density\"\n        [attr.aria-checked]=\"density.id === current.density\"\n        (click)=\"pickDensity(density.id)\"\n      >\n        <span class=\"density-chip\" aria-hidden=\"true\" [style.gap.px]=\"density.gap\">\n          <span class=\"density-row\"></span>\n          <span class=\"density-row\"></span>\n          <span class=\"density-row\"></span>\n        </span>\n        <span class=\"density-name\">{{ density.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n", styles: [":host{display:flex;flex-direction:column;gap:26px}.group{display:flex;flex-direction:column;gap:2px}.group-title{margin:0;font-size:13px;font-weight:var(--ns-weight-heading);letter-spacing:.02em}.group-hint{margin:0 0 12px;color:var(--ac-text-muted);font-size:12px;font-weight:300;line-height:1.45}.frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}.frame{display:flex;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.frame:hover{color:var(--ac-text)}.frame.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.frame-chip{display:flex;overflow:hidden;flex-direction:column;height:52px;border:1px solid var(--f-line);border-radius:6px;background:var(--f-bg)}.frame-bar{display:flex;flex:none;align-items:center;height:12px;padding-left:5px;border-bottom:1px solid var(--f-line)}.frame-dot{width:5px;height:5px;border-radius:50%;background:var(--f-glow)}.frame-lower{display:flex;flex:1;min-height:0}.frame-rail{display:flex;flex:none;flex-direction:column;gap:3px;width:22px;padding:4px 3px;border-right:1px solid var(--f-line)}.frame-pin{height:7px;border-left:2px solid var(--f-glow);border-radius:2px;background:var(--f-raised)}.frame-row{height:3px;border-radius:2px;background:var(--f-muted);opacity:.55}.frame-row.is-on{background:var(--f-glow);opacity:1}.frame-canvas{flex:1;background:var(--ac-bg)}.frame-name{overflow:hidden;font-size:11px;font-weight:var(--ns-weight-emphasis);text-align:center;text-overflow:ellipsis;white-space:nowrap}.canvases{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}.canvas{display:flex;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.canvas:hover{color:var(--ac-text)}.canvas.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.canvas-chip{display:flex;align-items:center;justify-content:center;height:40px;border:1px solid var(--ac-border);border-radius:6px}.canvas-chip i{font-size:15px}.canvas-sheet{width:60%;height:58%;border-radius:3px;box-shadow:0 1px 4px #00000038}.canvas-name{font-size:11px;font-weight:var(--ns-weight-emphasis);text-align:center}.accents{display:flex;flex-wrap:wrap;gap:9px}.accent{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:transform .12s ease}.accent:hover{transform:scale(1.12)}.accent.is-auto{border-style:dashed;border-color:var(--ac-border)}.accent.is-active{border-style:solid;border-color:var(--ac-text);box-shadow:0 0 0 2px var(--ac-surface) inset}.accent i{font-size:11px}.densities{display:flex;gap:10px}.density{display:flex;flex:1;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.density:hover{color:var(--ac-text)}.density.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.density-chip{display:flex;flex-direction:column;justify-content:center;height:42px;padding:0 10px;border:1px solid var(--ac-border);border-radius:6px;background:var(--ac-surface)}.density-row{height:3px;border-radius:2px;background:var(--ac-text-muted);opacity:.5}.density-name{font-size:11px;font-weight:var(--ns-weight-emphasis);text-align:center}@media(prefers-reduced-motion:reduce){.accent{transition:none}}\n"] }]
         }] });
 
-function menuTile(label, icon, color) {
-    return { label, icon, color, ink: color ? readableOn(color) : null, ghost: false };
-}
-function menuGlyph(icon) {
-    return { label: '', icon, color: null, ink: null, ghost: true };
-}
-function foldText(value) {
-    return value
-        .normalize('NFD')
-        .replace(/[̀-ͯ]/g, '')
-        .toLowerCase();
-}
-function matchesRow(row, term) {
-    return foldText(row.name).includes(term) || foldText(row.meta ?? '').includes(term);
-}
-function selectableRows(sections) {
-    return sections.flatMap((section) => section.rows).filter((row) => !row.disabled && !row.current);
-}
-
 class NucleusMenu {
     sections = input([], ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
     heading = input('', ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
@@ -3201,9 +3578,14 @@ class NucleusMenu {
     emptyText = input('', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
     keyboardHint = input('', ...(ngDevMode ? [{ debugName: "keyboardHint" }] : /* istanbul ignore next */ []));
     width = input(320, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    layout = input('list', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    columns = input(3, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     select = output();
     dismiss = output();
     term = signal('', ...(ngDevMode ? [{ debugName: "term" }] : /* istanbul ignore next */ []));
+    grid = computed(() => this.layout() === 'grid', ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+    keyed = signal(false, ...(ngDevMode ? [{ debugName: "keyed" }] : /* istanbul ignore next */ []));
+    pointed = computed(() => this.searchable() || this.keyed(), ...(ngDevMode ? [{ debugName: "pointed" }] : /* istanbul ignore next */ []));
     searchBox = viewChild('searchBox', ...(ngDevMode ? [{ debugName: "searchBox" }] : /* istanbul ignore next */ []));
     root = viewChild.required('root');
     visible = computed(() => {
@@ -3230,7 +3612,7 @@ class NucleusMenu {
         queueMicrotask(() => this.focusEntry());
     }
     isActive(row) {
-        return row.id === this.activeId();
+        return this.pointed() && row.id === this.activeId();
     }
     onTerm(value) {
         this.term.set(value);
@@ -3246,12 +3628,15 @@ class NucleusMenu {
             this.dismiss.emit();
             return;
         }
-        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        const move = this.moveOf(event.key);
+        if (move) {
             event.preventDefault();
-            this.step(event.key === 'ArrowDown' ? 1 : -1);
+            if (this.pointed())
+                this.step(move);
+            this.keyed.set(true);
             return;
         }
-        if (event.key === 'Enter') {
+        if (event.key === 'Enter' && this.pointed()) {
             const row = this.reachable().find((item) => item.id === this.activeId());
             if (!row)
                 return;
@@ -3259,15 +3644,41 @@ class NucleusMenu {
             this.choose(row);
         }
     }
-    step(delta) {
+    moveOf(key) {
+        const grid = this.grid();
+        const jump = grid ? this.columns() : 1;
+        if (key === 'ArrowDown')
+            return { delta: jump, wrap: !grid };
+        if (key === 'ArrowUp')
+            return { delta: -jump, wrap: !grid };
+        if (!grid || this.term())
+            return null;
+        if (key === 'ArrowRight')
+            return { delta: 1, wrap: true };
+        if (key === 'ArrowLeft')
+            return { delta: -1, wrap: true };
+        return null;
+    }
+    step(move) {
         const rows = this.reachable();
         if (!rows.length)
             return;
         const index = rows.findIndex((row) => row.id === this.activeId());
-        const next = (index + delta + rows.length) % rows.length;
+        const next = this.landing(index, move, rows.length);
         this.activeId.set(rows[next].id);
         this.scrollIntoView(rows[next].id);
     }
+    landing(index, move, size) {
+        const target = index + move.delta;
+        if (move.wrap)
+            return (target + size) % size;
+        if (target < 0)
+            return Math.max(index, 0);
+        if (target < size)
+            return target;
+        const lastRowStart = size - 1 - ((size - 1) % move.delta);
+        return index < lastRowStart ? size - 1 : index;
+    }
     scrollIntoView(id) {
         const target = this.root().nativeElement.querySelector(`[data-row="${id}"]`);
         target?.scrollIntoView({ block: 'nearest' });
@@ -3281,15 +3692,16 @@ class NucleusMenu {
         this.root().nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusMenu, isStandalone: true, selector: "nucleus-menu", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, keyboardHint: { classPropertyName: "keyboardHint", publicName: "keyboardHint", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select", dismiss: "dismiss" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "style.width.px": "width()" } }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true, isSignal: true }, { propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"menu\" #root tabindex=\"-1\">\n  @if (heading()) {\n    <div class=\"menu-head\">\n      <h4>{{ heading() }}</h4>\n      @if (badge(); as count) {\n        <span class=\"menu-badge\">{{ count }}</span>\n      }\n    </div>\n  }\n\n  @if (showSearch()) {\n    <div class=\"menu-search\">\n      <label class=\"menu-field\">\n        <i class=\"pi pi-search\" aria-hidden=\"true\"></i>\n        <input\n          #searchBox\n          type=\"text\"\n          autocomplete=\"off\"\n          [attr.aria-label]=\"searchPlaceholder()\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"term()\"\n          (input)=\"onTerm($any($event.target).value)\"\n        />\n      </label>\n    </div>\n  }\n\n  <div class=\"menu-body\" role=\"listbox\" [attr.aria-label]=\"heading()\">\n    @if (isEmpty()) {\n      <p class=\"menu-empty\">{{ emptyText() }}</p>\n    }\n\n    @for (section of visible(); track section.id) {\n      @if (section.rows.length) {\n        @if (section.label) {\n          <p class=\"menu-section\">{{ section.label }}</p>\n        }\n\n        @for (row of section.rows; track row.id) {\n          <button\n            type=\"button\"\n            class=\"menu-row\"\n            role=\"option\"\n            [attr.data-row]=\"row.id\"\n            [class.is-current]=\"row.current\"\n            [class.is-locked]=\"row.disabled\"\n            [class.is-active]=\"isActive(row)\"\n            [attr.aria-selected]=\"isActive(row)\"\n            [disabled]=\"row.disabled || row.current\"\n            (click)=\"choose(row)\"\n          >\n            @if (row.tile; as tile) {\n              <span\n                class=\"menu-tile\"\n                [class.is-ghost]=\"tile.ghost\"\n                [style.background]=\"tile.ghost ? null : tile.color\"\n                [style.color]=\"tile.ghost ? null : tile.ink\"\n                aria-hidden=\"true\"\n              >\n                @if (tile.icon) {\n                  <i [class]=\"tile.icon\"></i>\n                } @else {\n                  {{ tile.label }}\n                }\n              </span>\n            }\n\n            <span class=\"menu-text\">\n              <span class=\"menu-name\">{{ row.name }}</span>\n              @if (row.meta) {\n                <span class=\"menu-meta\">{{ row.meta }}</span>\n              }\n            </span>\n\n            <span class=\"menu-end\">\n              @if (row.tag) {\n                <span class=\"menu-tag\" [class.is-current]=\"row.current\">{{ row.tag }}</span>\n              } @else if (!row.disabled && !row.current) {\n                <i class=\"pi pi-chevron-right menu-chevron\" aria-hidden=\"true\"></i>\n              }\n            </span>\n          </button>\n        }\n      }\n    }\n  </div>\n\n  @if (showSearch() && keyboardHint()) {\n    <p class=\"menu-foot\">{{ keyboardHint() }}</p>\n  }\n</div>\n", styles: [":host{display:block}.menu{display:flex;flex-direction:column;min-width:0}.menu:focus-visible{outline:none}.menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px 10px;border-bottom:1px solid var(--ac-border);background:var(--ns-header-bg)}.menu-head h4{margin:0;overflow:hidden;color:var(--ns-header-ink);font-size:11px;font-weight:600;letter-spacing:.08em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.menu-badge{flex:none;padding:1px 8px;border-radius:var(--ac-radius-pill);background:var(--ac-surface-alt);color:var(--ac-text-muted);font-size:10px;font-variant-numeric:tabular-nums}.menu-search{padding:9px 10px;border-bottom:1px solid var(--ac-border)}.menu-field{position:relative;display:block}.menu-field i{position:absolute;top:50%;left:11px;color:var(--ac-text-muted);font-size:12px;pointer-events:none;transform:translateY(-50%)}.menu-field input{width:100%;box-sizing:border-box;padding:7px 10px 7px 31px;border:1px solid var(--ac-border);border-radius:7px;background:var(--ac-bg);color:var(--ac-text);font:inherit;font-size:13px}.menu-field input::placeholder{color:var(--ac-text-muted)}.menu-field input:focus-visible{border-color:var(--ac-accent);outline:2px solid color-mix(in srgb,var(--ac-accent) 45%,transparent);outline-offset:1px}.menu-body{display:flex;max-height:348px;flex-direction:column;gap:1px;padding:6px;overflow-y:auto}.menu-section{margin:0;padding:11px 9px 5px;color:var(--ac-text-muted);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.menu-empty{margin:0;padding:26px 14px;color:var(--ac-text-muted);font-size:12px;text-align:center}.menu-row{display:flex;width:100%;align-items:center;gap:11px;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--ac-text);font:inherit;text-align:left;cursor:pointer}.menu-row:hover:not(:disabled),.menu-row.is-active:not(:disabled){background:var(--ns-accent-wash);box-shadow:inset 2px 0 0 var(--ac-accent)}.menu-row:focus-visible{outline:none}.menu-row.is-current{background:var(--ac-surface-alt);box-shadow:none;cursor:default}.menu-row.is-locked{cursor:default;opacity:.55}.menu-tile{display:inline-flex;width:34px;height:34px;flex:none;align-items:center;justify-content:center;border-radius:9px;font-size:11.5px;font-weight:600;letter-spacing:.02em}.menu-tile i{font-size:14px}.menu-tile.is-ghost{background:var(--ac-surface-alt);color:var(--ac-text-muted)}.menu-row:hover:not(:disabled) .menu-tile.is-ghost,.menu-row.is-active:not(:disabled) .menu-tile.is-ghost{color:var(--ac-accent)}.menu-text{display:flex;min-width:0;flex-direction:column;gap:1px}.menu-name{overflow:hidden;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.menu-meta{overflow:hidden;color:var(--ac-text-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.menu-end{display:flex;flex:none;align-items:center;margin-left:auto}.menu-chevron{color:var(--ac-accent);font-size:11px;opacity:0}.menu-row:hover:not(:disabled) .menu-chevron,.menu-row.is-active:not(:disabled) .menu-chevron{opacity:1}.menu-tag{padding:2px 7px;border-radius:4px;background:var(--ac-surface-alt);color:var(--ac-text-muted);font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.menu-tag.is-current{background:color-mix(in srgb,var(--ac-accent) 16%,transparent);color:var(--ac-accent)}.menu-foot{margin:0;padding:8px 14px;border-top:1px solid var(--ac-border);color:var(--ac-text-muted);font-size:10.5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusMenu, isStandalone: true, selector: "nucleus-menu", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, keyboardHint: { classPropertyName: "keyboardHint", publicName: "keyboardHint", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select", dismiss: "dismiss" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "style.width.px": "width()", "style.--menu-columns": "columns()" } }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true, isSignal: true }, { propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"menu\" #root tabindex=\"-1\" [class.is-grid]=\"grid()\">\n  @if (heading() && !grid()) {\n    <div class=\"menu-head\">\n      <h4>{{ heading() }}</h4>\n      @if (badge(); as count) {\n        <span class=\"menu-badge\">{{ count }}</span>\n      }\n    </div>\n  }\n\n  @if (showSearch()) {\n    <div class=\"menu-search\">\n      <label class=\"menu-field\">\n        <i class=\"pi pi-search\" aria-hidden=\"true\"></i>\n        <input\n          #searchBox\n          type=\"text\"\n          autocomplete=\"off\"\n          [attr.aria-label]=\"searchPlaceholder()\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"term()\"\n          (input)=\"onTerm($any($event.target).value)\"\n        />\n      </label>\n    </div>\n  }\n\n  <div class=\"menu-body\" role=\"listbox\" [attr.aria-label]=\"heading()\">\n    @if (isEmpty()) {\n      <p class=\"menu-empty\">{{ emptyText() }}</p>\n    }\n\n    @for (section of visible(); track section.id) {\n      @if (section.rows.length) {\n        @if (section.label) {\n          <p class=\"menu-section\">\n            {{ section.label }}\n            @if (grid()) {\n              <span class=\"menu-count\">{{ section.rows.length }}</span>\n            }\n          </p>\n        }\n\n        <div class=\"menu-group\" role=\"group\" [attr.aria-label]=\"section.label\">\n          @for (row of section.rows; track row.id) {\n            <button\n              type=\"button\"\n              class=\"menu-row\"\n              role=\"option\"\n              [attr.data-row]=\"row.id\"\n              [attr.title]=\"grid() && row.disabled ? row.tag : null\"\n              [class.is-current]=\"row.current\"\n              [class.is-locked]=\"row.disabled\"\n              [class.is-active]=\"isActive(row)\"\n              [attr.aria-selected]=\"isActive(row)\"\n              [disabled]=\"row.disabled || row.current\"\n              (click)=\"choose(row)\"\n            >\n              @if (row.tile; as tile) {\n                <span\n                  class=\"menu-tile\"\n                  [class.is-ghost]=\"tile.ghost\"\n                  [class.is-outline]=\"grid() && row.disabled\"\n                  [style.background]=\"tile.ghost || (grid() && row.disabled) ? null : tile.color\"\n                  [style.color]=\"tile.ghost || (grid() && row.disabled) ? null : tile.ink\"\n                  aria-hidden=\"true\"\n                >\n                  @if (tile.icon) {\n                    <i [class]=\"tile.icon\"></i>\n                  } @else {\n                    {{ tile.label }}\n                  }\n                </span>\n              }\n\n              <span class=\"menu-text\">\n                <span class=\"menu-name\">{{ row.name }}</span>\n                @if (grid() && row.current && row.tag) {\n                  <span class=\"menu-meta\">{{ row.tag }}</span>\n                } @else if (!grid() && row.meta) {\n                  <span class=\"menu-meta\">{{ row.meta }}</span>\n                }\n              </span>\n\n              @if (grid() && row.current) {\n                <span class=\"menu-end\">\n                  <span class=\"menu-dot\" aria-hidden=\"true\"></span>\n                </span>\n              } @else if (!grid()) {\n                <span class=\"menu-end\">\n                  @if (row.tag) {\n                    <span class=\"menu-tag\" [class.is-current]=\"row.current\">{{ row.tag }}</span>\n                  } @else if (!row.disabled && !row.current) {\n                    <i class=\"pi pi-chevron-right menu-chevron\" aria-hidden=\"true\"></i>\n                  }\n                </span>\n              }\n            </button>\n          }\n        </div>\n      }\n    }\n  </div>\n\n  @if (showSearch() && keyboardHint()) {\n    <p class=\"menu-foot\">{{ keyboardHint() }}</p>\n  }\n</div>\n", styles: [":host{display:block;max-width:calc(100vw - 24px)}.menu{display:flex;flex-direction:column;min-width:0}.menu:focus-visible{outline:none}.menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px 10px;border-bottom:1px solid var(--ac-border);background:var(--ns-header-bg)}.menu-head h4{margin:0;overflow:hidden;color:var(--ns-header-ink);font-size:11px;font-weight:var(--ns-weight-heading);letter-spacing:.08em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.menu-badge{flex:none;padding:1px 8px;border-radius:var(--ac-radius-pill);background:var(--ac-surface-alt);color:var(--ac-text-muted);font-size:10px;font-variant-numeric:tabular-nums}.menu-search{padding:9px 10px;border-bottom:1px solid var(--ac-border)}.menu-field{position:relative;display:block}.menu-field i{position:absolute;top:50%;left:11px;color:var(--ac-text-muted);font-size:12px;pointer-events:none;transform:translateY(-50%)}.menu-field input{width:100%;box-sizing:border-box;padding:7px 10px 7px 31px;border:1px solid var(--ac-border);border-radius:7px;background:var(--ac-bg);color:var(--ac-text);font:inherit;font-size:13px}.menu-field input::placeholder{color:var(--ac-text-muted)}.menu-field input:focus-visible{border-color:var(--ac-accent);outline:2px solid color-mix(in srgb,var(--ac-accent) 45%,transparent);outline-offset:1px}.menu-body{display:flex;max-height:348px;flex-direction:column;gap:1px;padding:6px;overflow-y:auto}.menu-section{margin:0;padding:11px 9px 5px;color:var(--ac-text-muted);font-size:10px;font-weight:var(--ns-weight-heading);letter-spacing:.08em;text-transform:uppercase}.menu-count:before{margin:0 5px;content:\"\\b7\"}.menu-group{display:flex;flex-direction:column;gap:1px}.menu-empty{margin:0;padding:26px 14px;color:var(--ac-text-muted);font-size:12px;text-align:center}.menu-row{display:flex;width:100%;align-items:center;gap:11px;padding:9px 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text);font:inherit;text-align:left;cursor:pointer}.menu-row:hover:not(:disabled),.menu-row.is-active:not(:disabled){border-color:color-mix(in srgb,var(--ac-accent) 38%,transparent);background:var(--ns-accent-wash)}.menu-row:focus-visible{outline:none}.menu-row.is-current{background:var(--ac-surface-alt);cursor:default}.menu-row.is-locked{cursor:default;opacity:.55}.menu-tile{display:inline-flex;width:34px;height:34px;flex:none;align-items:center;justify-content:center;border-radius:9px;font-size:11.5px;font-weight:var(--ns-weight-heading);letter-spacing:.02em}.menu-tile i{font-size:14px}.menu-tile.is-ghost{background:var(--ac-surface-alt);color:var(--ac-text-muted)}.menu-row:hover:not(:disabled) .menu-tile.is-ghost,.menu-row.is-active:not(:disabled) .menu-tile.is-ghost{color:var(--ac-accent)}.menu-text{display:flex;min-width:0;flex-direction:column;gap:1px}.menu-name{overflow:hidden;font-size:13px;font-weight:var(--ns-weight-emphasis);text-overflow:ellipsis;white-space:nowrap}.menu-meta{overflow:hidden;color:var(--ac-text-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.menu-end{display:flex;flex:none;align-items:center;margin-left:auto}.menu-chevron{color:var(--ac-accent);font-size:11px;opacity:0}.menu-row:hover:not(:disabled) .menu-chevron,.menu-row.is-active:not(:disabled) .menu-chevron{opacity:1}.menu-tag{padding:2px 7px;border-radius:4px;background:var(--ac-surface-alt);color:var(--ac-text-muted);font-size:9.5px;font-weight:var(--ns-weight-heading);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.menu-tag.is-current{background:color-mix(in srgb,var(--ac-accent) 16%,transparent);color:var(--ac-accent)}.menu-foot{margin:0;padding:8px 14px;border-top:1px solid var(--ac-border);color:var(--ac-text-muted);font-size:10.5px}.menu-dot{width:8px;height:8px;border-radius:var(--ac-radius-pill);background:var(--ns-success)}.menu.is-grid .menu-search{padding:10px 10px 0;border-bottom:0}.menu.is-grid .menu-body{max-height:min(540px,calc(100dvh - 190px));gap:2px;padding:10px}.menu.is-grid .menu-section{padding:12px 6px 6px}.menu.is-grid .menu-group{display:grid;grid-template-columns:repeat(var(--menu-columns, 3),minmax(0,1fr));gap:4px}.menu.is-grid .menu-row{flex-direction:column;gap:7px;padding:11px 6px 9px;text-align:center}.menu.is-grid .menu-row.is-locked{opacity:1}.menu.is-grid .menu-tile{width:40px;height:40px;border-radius:11px;font-size:12px}.menu.is-grid .menu-tile i{font-size:16px}.menu.is-grid .menu-tile.is-outline{border:1px dashed color-mix(in srgb,var(--ac-text-muted) 55%,transparent);background:transparent;color:var(--ac-text-muted)}.menu.is-grid .menu-text{width:100%;align-items:center}.menu.is-grid .menu-name{display:-webkit-box;max-width:100%;font-size:12px;line-height:1.25;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.menu.is-grid .menu-row.is-locked .menu-name{color:var(--ac-text-muted);font-weight:var(--ns-weight-text)}.menu.is-grid .menu-row.is-current{grid-column:1 / -1;flex-direction:row;gap:12px;padding:10px 12px;background:var(--ac-text);color:var(--ac-surface);text-align:left}.menu.is-grid .menu-row.is-current .menu-tile{width:36px;height:36px;border-radius:10px}.menu.is-grid .menu-row.is-current .menu-text{width:auto;align-items:flex-start}.menu.is-grid .menu-row.is-current .menu-name{display:block;font-size:13px;white-space:nowrap}.menu.is-grid .menu-row.is-current .menu-meta{color:color-mix(in srgb,currentColor 64%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusMenu, decorators: [{
             type: Component,
             args: [{ selector: 'nucleus-menu', host: {
                         '[style.width.px]': 'width()',
+                        '[style.--menu-columns]': 'columns()',
                         '(keydown)': 'onKeydown($event)',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"menu\" #root tabindex=\"-1\">\n  @if (heading()) {\n    <div class=\"menu-head\">\n      <h4>{{ heading() }}</h4>\n      @if (badge(); as count) {\n        <span class=\"menu-badge\">{{ count }}</span>\n      }\n    </div>\n  }\n\n  @if (showSearch()) {\n    <div class=\"menu-search\">\n      <label class=\"menu-field\">\n        <i class=\"pi pi-search\" aria-hidden=\"true\"></i>\n        <input\n          #searchBox\n          type=\"text\"\n          autocomplete=\"off\"\n          [attr.aria-label]=\"searchPlaceholder()\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"term()\"\n          (input)=\"onTerm($any($event.target).value)\"\n        />\n      </label>\n    </div>\n  }\n\n  <div class=\"menu-body\" role=\"listbox\" [attr.aria-label]=\"heading()\">\n    @if (isEmpty()) {\n      <p class=\"menu-empty\">{{ emptyText() }}</p>\n    }\n\n    @for (section of visible(); track section.id) {\n      @if (section.rows.length) {\n        @if (section.label) {\n          <p class=\"menu-section\">{{ section.label }}</p>\n        }\n\n        @for (row of section.rows; track row.id) {\n          <button\n            type=\"button\"\n            class=\"menu-row\"\n            role=\"option\"\n            [attr.data-row]=\"row.id\"\n            [class.is-current]=\"row.current\"\n            [class.is-locked]=\"row.disabled\"\n            [class.is-active]=\"isActive(row)\"\n            [attr.aria-selected]=\"isActive(row)\"\n            [disabled]=\"row.disabled || row.current\"\n            (click)=\"choose(row)\"\n          >\n            @if (row.tile; as tile) {\n              <span\n                class=\"menu-tile\"\n                [class.is-ghost]=\"tile.ghost\"\n                [style.background]=\"tile.ghost ? null : tile.color\"\n                [style.color]=\"tile.ghost ? null : tile.ink\"\n                aria-hidden=\"true\"\n              >\n                @if (tile.icon) {\n                  <i [class]=\"tile.icon\"></i>\n                } @else {\n                  {{ tile.label }}\n                }\n              </span>\n            }\n\n            <span class=\"menu-text\">\n              <span class=\"menu-name\">{{ row.name }}</span>\n              @if (row.meta) {\n                <span class=\"menu-meta\">{{ row.meta }}</span>\n              }\n            </span>\n\n            <span class=\"menu-end\">\n              @if (row.tag) {\n                <span class=\"menu-tag\" [class.is-current]=\"row.current\">{{ row.tag }}</span>\n              } @else if (!row.disabled && !row.current) {\n                <i class=\"pi pi-chevron-right menu-chevron\" aria-hidden=\"true\"></i>\n              }\n            </span>\n          </button>\n        }\n      }\n    }\n  </div>\n\n  @if (showSearch() && keyboardHint()) {\n    <p class=\"menu-foot\">{{ keyboardHint() }}</p>\n  }\n</div>\n", styles: [":host{display:block}.menu{display:flex;flex-direction:column;min-width:0}.menu:focus-visible{outline:none}.menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px 10px;border-bottom:1px solid var(--ac-border);background:var(--ns-header-bg)}.menu-head h4{margin:0;overflow:hidden;color:var(--ns-header-ink);font-size:11px;font-weight:600;letter-spacing:.08em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.menu-badge{flex:none;padding:1px 8px;border-radius:var(--ac-radius-pill);background:var(--ac-surface-alt);color:var(--ac-text-muted);font-size:10px;font-variant-numeric:tabular-nums}.menu-search{padding:9px 10px;border-bottom:1px solid var(--ac-border)}.menu-field{position:relative;display:block}.menu-field i{position:absolute;top:50%;left:11px;color:var(--ac-text-muted);font-size:12px;pointer-events:none;transform:translateY(-50%)}.menu-field input{width:100%;box-sizing:border-box;padding:7px 10px 7px 31px;border:1px solid var(--ac-border);border-radius:7px;background:var(--ac-bg);color:var(--ac-text);font:inherit;font-size:13px}.menu-field input::placeholder{color:var(--ac-text-muted)}.menu-field input:focus-visible{border-color:var(--ac-accent);outline:2px solid color-mix(in srgb,var(--ac-accent) 45%,transparent);outline-offset:1px}.menu-body{display:flex;max-height:348px;flex-direction:column;gap:1px;padding:6px;overflow-y:auto}.menu-section{margin:0;padding:11px 9px 5px;color:var(--ac-text-muted);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.menu-empty{margin:0;padding:26px 14px;color:var(--ac-text-muted);font-size:12px;text-align:center}.menu-row{display:flex;width:100%;align-items:center;gap:11px;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--ac-text);font:inherit;text-align:left;cursor:pointer}.menu-row:hover:not(:disabled),.menu-row.is-active:not(:disabled){background:var(--ns-accent-wash);box-shadow:inset 2px 0 0 var(--ac-accent)}.menu-row:focus-visible{outline:none}.menu-row.is-current{background:var(--ac-surface-alt);box-shadow:none;cursor:default}.menu-row.is-locked{cursor:default;opacity:.55}.menu-tile{display:inline-flex;width:34px;height:34px;flex:none;align-items:center;justify-content:center;border-radius:9px;font-size:11.5px;font-weight:600;letter-spacing:.02em}.menu-tile i{font-size:14px}.menu-tile.is-ghost{background:var(--ac-surface-alt);color:var(--ac-text-muted)}.menu-row:hover:not(:disabled) .menu-tile.is-ghost,.menu-row.is-active:not(:disabled) .menu-tile.is-ghost{color:var(--ac-accent)}.menu-text{display:flex;min-width:0;flex-direction:column;gap:1px}.menu-name{overflow:hidden;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.menu-meta{overflow:hidden;color:var(--ac-text-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.menu-end{display:flex;flex:none;align-items:center;margin-left:auto}.menu-chevron{color:var(--ac-accent);font-size:11px;opacity:0}.menu-row:hover:not(:disabled) .menu-chevron,.menu-row.is-active:not(:disabled) .menu-chevron{opacity:1}.menu-tag{padding:2px 7px;border-radius:4px;background:var(--ac-surface-alt);color:var(--ac-text-muted);font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.menu-tag.is-current{background:color-mix(in srgb,var(--ac-accent) 16%,transparent);color:var(--ac-accent)}.menu-foot{margin:0;padding:8px 14px;border-top:1px solid var(--ac-border);color:var(--ac-text-muted);font-size:10.5px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], keyboardHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardHint", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], searchBox: [{ type: i0.ViewChild, args: ['searchBox', { isSignal: true }] }], root: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"menu\" #root tabindex=\"-1\" [class.is-grid]=\"grid()\">\n  @if (heading() && !grid()) {\n    <div class=\"menu-head\">\n      <h4>{{ heading() }}</h4>\n      @if (badge(); as count) {\n        <span class=\"menu-badge\">{{ count }}</span>\n      }\n    </div>\n  }\n\n  @if (showSearch()) {\n    <div class=\"menu-search\">\n      <label class=\"menu-field\">\n        <i class=\"pi pi-search\" aria-hidden=\"true\"></i>\n        <input\n          #searchBox\n          type=\"text\"\n          autocomplete=\"off\"\n          [attr.aria-label]=\"searchPlaceholder()\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"term()\"\n          (input)=\"onTerm($any($event.target).value)\"\n        />\n      </label>\n    </div>\n  }\n\n  <div class=\"menu-body\" role=\"listbox\" [attr.aria-label]=\"heading()\">\n    @if (isEmpty()) {\n      <p class=\"menu-empty\">{{ emptyText() }}</p>\n    }\n\n    @for (section of visible(); track section.id) {\n      @if (section.rows.length) {\n        @if (section.label) {\n          <p class=\"menu-section\">\n            {{ section.label }}\n            @if (grid()) {\n              <span class=\"menu-count\">{{ section.rows.length }}</span>\n            }\n          </p>\n        }\n\n        <div class=\"menu-group\" role=\"group\" [attr.aria-label]=\"section.label\">\n          @for (row of section.rows; track row.id) {\n            <button\n              type=\"button\"\n              class=\"menu-row\"\n              role=\"option\"\n              [attr.data-row]=\"row.id\"\n              [attr.title]=\"grid() && row.disabled ? row.tag : null\"\n              [class.is-current]=\"row.current\"\n              [class.is-locked]=\"row.disabled\"\n              [class.is-active]=\"isActive(row)\"\n              [attr.aria-selected]=\"isActive(row)\"\n              [disabled]=\"row.disabled || row.current\"\n              (click)=\"choose(row)\"\n            >\n              @if (row.tile; as tile) {\n                <span\n                  class=\"menu-tile\"\n                  [class.is-ghost]=\"tile.ghost\"\n                  [class.is-outline]=\"grid() && row.disabled\"\n                  [style.background]=\"tile.ghost || (grid() && row.disabled) ? null : tile.color\"\n                  [style.color]=\"tile.ghost || (grid() && row.disabled) ? null : tile.ink\"\n                  aria-hidden=\"true\"\n                >\n                  @if (tile.icon) {\n                    <i [class]=\"tile.icon\"></i>\n                  } @else {\n                    {{ tile.label }}\n                  }\n                </span>\n              }\n\n              <span class=\"menu-text\">\n                <span class=\"menu-name\">{{ row.name }}</span>\n                @if (grid() && row.current && row.tag) {\n                  <span class=\"menu-meta\">{{ row.tag }}</span>\n                } @else if (!grid() && row.meta) {\n                  <span class=\"menu-meta\">{{ row.meta }}</span>\n                }\n              </span>\n\n              @if (grid() && row.current) {\n                <span class=\"menu-end\">\n                  <span class=\"menu-dot\" aria-hidden=\"true\"></span>\n                </span>\n              } @else if (!grid()) {\n                <span class=\"menu-end\">\n                  @if (row.tag) {\n                    <span class=\"menu-tag\" [class.is-current]=\"row.current\">{{ row.tag }}</span>\n                  } @else if (!row.disabled && !row.current) {\n                    <i class=\"pi pi-chevron-right menu-chevron\" aria-hidden=\"true\"></i>\n                  }\n                </span>\n              }\n            </button>\n          }\n        </div>\n      }\n    }\n  </div>\n\n  @if (showSearch() && keyboardHint()) {\n    <p class=\"menu-foot\">{{ keyboardHint() }}</p>\n  }\n</div>\n", styles: [":host{display:block;max-width:calc(100vw - 24px)}.menu{display:flex;flex-direction:column;min-width:0}.menu:focus-visible{outline:none}.menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px 10px;border-bottom:1px solid var(--ac-border);background:var(--ns-header-bg)}.menu-head h4{margin:0;overflow:hidden;color:var(--ns-header-ink);font-size:11px;font-weight:var(--ns-weight-heading);letter-spacing:.08em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.menu-badge{flex:none;padding:1px 8px;border-radius:var(--ac-radius-pill);background:var(--ac-surface-alt);color:var(--ac-text-muted);font-size:10px;font-variant-numeric:tabular-nums}.menu-search{padding:9px 10px;border-bottom:1px solid var(--ac-border)}.menu-field{position:relative;display:block}.menu-field i{position:absolute;top:50%;left:11px;color:var(--ac-text-muted);font-size:12px;pointer-events:none;transform:translateY(-50%)}.menu-field input{width:100%;box-sizing:border-box;padding:7px 10px 7px 31px;border:1px solid var(--ac-border);border-radius:7px;background:var(--ac-bg);color:var(--ac-text);font:inherit;font-size:13px}.menu-field input::placeholder{color:var(--ac-text-muted)}.menu-field input:focus-visible{border-color:var(--ac-accent);outline:2px solid color-mix(in srgb,var(--ac-accent) 45%,transparent);outline-offset:1px}.menu-body{display:flex;max-height:348px;flex-direction:column;gap:1px;padding:6px;overflow-y:auto}.menu-section{margin:0;padding:11px 9px 5px;color:var(--ac-text-muted);font-size:10px;font-weight:var(--ns-weight-heading);letter-spacing:.08em;text-transform:uppercase}.menu-count:before{margin:0 5px;content:\"\\b7\"}.menu-group{display:flex;flex-direction:column;gap:1px}.menu-empty{margin:0;padding:26px 14px;color:var(--ac-text-muted);font-size:12px;text-align:center}.menu-row{display:flex;width:100%;align-items:center;gap:11px;padding:9px 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text);font:inherit;text-align:left;cursor:pointer}.menu-row:hover:not(:disabled),.menu-row.is-active:not(:disabled){border-color:color-mix(in srgb,var(--ac-accent) 38%,transparent);background:var(--ns-accent-wash)}.menu-row:focus-visible{outline:none}.menu-row.is-current{background:var(--ac-surface-alt);cursor:default}.menu-row.is-locked{cursor:default;opacity:.55}.menu-tile{display:inline-flex;width:34px;height:34px;flex:none;align-items:center;justify-content:center;border-radius:9px;font-size:11.5px;font-weight:var(--ns-weight-heading);letter-spacing:.02em}.menu-tile i{font-size:14px}.menu-tile.is-ghost{background:var(--ac-surface-alt);color:var(--ac-text-muted)}.menu-row:hover:not(:disabled) .menu-tile.is-ghost,.menu-row.is-active:not(:disabled) .menu-tile.is-ghost{color:var(--ac-accent)}.menu-text{display:flex;min-width:0;flex-direction:column;gap:1px}.menu-name{overflow:hidden;font-size:13px;font-weight:var(--ns-weight-emphasis);text-overflow:ellipsis;white-space:nowrap}.menu-meta{overflow:hidden;color:var(--ac-text-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.menu-end{display:flex;flex:none;align-items:center;margin-left:auto}.menu-chevron{color:var(--ac-accent);font-size:11px;opacity:0}.menu-row:hover:not(:disabled) .menu-chevron,.menu-row.is-active:not(:disabled) .menu-chevron{opacity:1}.menu-tag{padding:2px 7px;border-radius:4px;background:var(--ac-surface-alt);color:var(--ac-text-muted);font-size:9.5px;font-weight:var(--ns-weight-heading);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.menu-tag.is-current{background:color-mix(in srgb,var(--ac-accent) 16%,transparent);color:var(--ac-accent)}.menu-foot{margin:0;padding:8px 14px;border-top:1px solid var(--ac-border);color:var(--ac-text-muted);font-size:10.5px}.menu-dot{width:8px;height:8px;border-radius:var(--ac-radius-pill);background:var(--ns-success)}.menu.is-grid .menu-search{padding:10px 10px 0;border-bottom:0}.menu.is-grid .menu-body{max-height:min(540px,calc(100dvh - 190px));gap:2px;padding:10px}.menu.is-grid .menu-section{padding:12px 6px 6px}.menu.is-grid .menu-group{display:grid;grid-template-columns:repeat(var(--menu-columns, 3),minmax(0,1fr));gap:4px}.menu.is-grid .menu-row{flex-direction:column;gap:7px;padding:11px 6px 9px;text-align:center}.menu.is-grid .menu-row.is-locked{opacity:1}.menu.is-grid .menu-tile{width:40px;height:40px;border-radius:11px;font-size:12px}.menu.is-grid .menu-tile i{font-size:16px}.menu.is-grid .menu-tile.is-outline{border:1px dashed color-mix(in srgb,var(--ac-text-muted) 55%,transparent);background:transparent;color:var(--ac-text-muted)}.menu.is-grid .menu-text{width:100%;align-items:center}.menu.is-grid .menu-name{display:-webkit-box;max-width:100%;font-size:12px;line-height:1.25;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.menu.is-grid .menu-row.is-locked .menu-name{color:var(--ac-text-muted);font-weight:var(--ns-weight-text)}.menu.is-grid .menu-row.is-current{grid-column:1 / -1;flex-direction:row;gap:12px;padding:10px 12px;background:var(--ac-text);color:var(--ac-surface);text-align:left}.menu.is-grid .menu-row.is-current .menu-tile{width:36px;height:36px;border-radius:10px}.menu.is-grid .menu-row.is-current .menu-text{width:auto;align-items:flex-start}.menu.is-grid .menu-row.is-current .menu-name{display:block;font-size:13px;white-space:nowrap}.menu.is-grid .menu-row.is-current .menu-meta{color:color-mix(in srgb,currentColor 64%,transparent)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], keyboardHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardHint", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], searchBox: [{ type: i0.ViewChild, args: ['searchBox', { isSignal: true }] }], root: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }] } });
 
 const STORAGE_KEY = 'nucleus_recent_apps';
 const KEEP = 8;
@@ -3438,11 +3850,10 @@ const SHELL_COPY = {
         appsSwitch: 'Cambiar de aplicación',
         appsSearch: 'Buscar aplicación',
         appsNoMatch: 'Ninguna aplicación coincide con lo que escribiste.',
-        appsRecent: 'Recientes',
-        appsAll: 'Todas',
         appsAvailable: 'Disponibles',
-        appsHere: 'Aquí',
-        keyboardHint: '↑ ↓ moverse · ↵ abrir · esc cerrar',
+        appsUpcoming: 'En preparación',
+        appsHere: 'Estás aquí',
+        keyboardHint: '← ↑ ↓ → moverse · ↵ abrir · esc cerrar',
         accountSwitchHint: 'Entrar con otro correo',
         signOutHint: 'Salir de la suite',
         settingsTitle: 'Ajustes',
@@ -3475,11 +3886,10 @@ const SHELL_COPY = {
         appsSwitch: 'Switch application',
         appsSearch: 'Search applications',
         appsNoMatch: 'No application matches what you typed.',
-        appsRecent: 'Recent',
-        appsAll: 'All',
         appsAvailable: 'Available',
-        appsHere: 'Here',
-        keyboardHint: '↑ ↓ move · ↵ open · esc close',
+        appsUpcoming: 'Coming soon',
+        appsHere: 'You are here',
+        keyboardHint: '← ↑ ↓ → move · ↵ open · esc close',
         accountSwitchHint: 'Sign in with another address',
         signOutHint: 'Leave the suite',
         settingsTitle: 'Settings',
@@ -3508,7 +3918,7 @@ const SHELL_COPY = {
 };
 
 const LAUNCHER_RICH_THRESHOLD = 6;
-const RECENT_LIMIT = 3;
+const SUITE_PREFIX = 'Nucleus ';
 const FALLBACK_APP_COLOR = '#64748b';
 const HOME_MENU_ID = 'nucleus-home';
 class NucleusShell {
@@ -3600,41 +4010,30 @@ class NucleusShell {
     words = computed(() => commonCopyOf(this.lang()), ...(ngDevMode ? [{ debugName: "words" }] : /* istanbul ignore next */ []));
     hasSiteContext = computed(() => this.session.scope() === 'site', ...(ngDevMode ? [{ debugName: "hasSiteContext" }] : /* istanbul ignore next */ []));
     launcherRich = computed(() => this.launcherApps().length > LAUNCHER_RICH_THRESHOLD, ...(ngDevMode ? [{ debugName: "launcherRich" }] : /* istanbul ignore next */ []));
-    launcherCount = computed(() => {
-        const total = this.launcherApps().length + (this.session.currentApp() ? 1 : 0);
-        return total > LAUNCHER_RICH_THRESHOLD ? String(total) : null;
-    }, ...(ngDevMode ? [{ debugName: "launcherCount" }] : /* istanbul ignore next */ []));
     launcherSections = computed(() => {
         const t = this.copy();
         const apps = this.launcherApps();
         const current = this.session.currentApp();
+        const open = apps.filter((app) => this.canOpen(app));
+        const pending = apps.filter((app) => !this.canOpen(app));
         const sections = [];
         if (current) {
             sections.push({ id: 'current', label: null, rows: [this.appRow(current, true)] });
         }
-        if (!apps.length)
-            return sections;
-        if (this.launcherRich()) {
-            const recent = this.recents.pick(apps, RECENT_LIMIT);
-            if (recent.length) {
-                sections.push({
-                    id: 'recent',
-                    label: t.appsRecent,
-                    rows: recent.map((app) => this.appRow(app, false)),
-                });
-            }
+        if (open.length) {
             sections.push({
-                id: 'all',
-                label: t.appsAll,
-                rows: apps.map((app) => this.appRow(app, false)),
+                id: 'available',
+                label: t.appsAvailable,
+                rows: open.map((app) => this.appRow(app, false)),
+            });
+        }
+        if (pending.length) {
+            sections.push({
+                id: 'upcoming',
+                label: t.appsUpcoming,
+                rows: pending.map((app) => this.appRow(app, false)),
             });
-            return sections;
         }
-        sections.push({
-            id: 'all',
-            label: current ? t.appsAvailable : null,
-            rows: apps.map((app) => this.appRow(app, false)),
-        });
         return sections;
     }, ...(ngDevMode ? [{ debugName: "launcherSections" }] : /* istanbul ignore next */ []));
     accountSections = computed(() => {
@@ -3801,11 +4200,12 @@ class NucleusShell {
     }
     appRow(app, current) {
         const hint = current ? this.copy().appsHere : this.launchHint(app);
+        const name = shortAppName(app.name);
         return {
             id: app.id,
-            name: app.name,
+            name,
             meta: app.description,
-            tile: menuTile(initialsOf(app.name), app.icon, app.color ?? FALLBACK_APP_COLOR),
+            tile: menuTile(initialsOf(name), app.icon, app.color ?? FALLBACK_APP_COLOR),
             tag: hint || null,
             current,
             disabled: !current && !this.canOpen(app),
@@ -3879,7 +4279,7 @@ class NucleusShell {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusShell, isStandalone: true, selector: "nucleus-shell", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, activeNavId: { classPropertyName: "activeNavId", publicName: "activeNavId", isSignal: true, isRequired: false, transformFunction: null }, selectedMenuId: { classPropertyName: "selectedMenuId", publicName: "selectedMenuId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navSelect: "navSelect", menuSelect: "menuSelect" }, host: { properties: { "style.--ns-topbar-h": "topbarHeight()" } }, ngImport: i0, template: "@let t = copy();\n@let me = identity();\n\n@if (starfield()) {\n  <nucleus-starfield />\n}\n\n<header class=\"topbar ns-frame\">\n  <div class=\"side\">\n    <p-button\n      icon=\"pi pi-bars\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.navToggle\"\n      [pTooltip]=\"t.navToggle\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"toggleSidebar()\"\n    />\n\n    <div class=\"brand\">\n      <nucleus-mark [size]=\"20\" />\n      <div class=\"brand-name\">\n        <span class=\"brand-primary\">NUCLEUS</span>\n        <span class=\"brand-secondary\">{{ brand() }}</span>\n      </div>\n    </div>\n\n  </div>\n\n  @if (hasSiteContext()) {\n    <div class=\"context ns-context\">\n      <p-select\n        styleClass=\"context-select\"\n        [options]=\"companyChoices()\"\n        optionValue=\"id\"\n        optionLabel=\"name\"\n        [ngModel]=\"companyChoice()\"\n        (ngModelChange)=\"onCompanyChange($event)\"\n        [placeholder]=\"t.companyPlaceholder\"\n        [disabled]=\"switching()\"\n        [filter]=\"companyChoices().length > 8\"\n        filterBy=\"name\"\n        [filterPlaceholder]=\"words().search\"\n        [autofocusFilter]=\"true\"\n        [resetFilterOnHide]=\"true\"\n        [ariaLabel]=\"t.companyLabel\"\n        [ngModelOptions]=\"{ standalone: true }\"\n      >\n        <ng-template #item let-option>\n          <span class=\"company-option\">\n            <span class=\"company-name\">{{ option.name }}</span>\n            <p-tag [value]=\"option.tag\" severity=\"secondary\" />\n          </span>\n        </ng-template>\n      </p-select>\n\n      <p-select\n        styleClass=\"context-select\"\n        [options]=\"siteOptions()\"\n        optionValue=\"id\"\n        optionLabel=\"name\"\n        [ngModel]=\"siteChoice()\"\n        (ngModelChange)=\"onSiteChange($event)\"\n        [placeholder]=\"sitePlaceholder()\"\n        [disabled]=\"switching() || sitesLoading() || !siteOptions().length\"\n        [filter]=\"siteOptions().length > 8\"\n        filterBy=\"name\"\n        [filterPlaceholder]=\"words().search\"\n        [autofocusFilter]=\"true\"\n        [resetFilterOnHide]=\"true\"\n        [ariaLabel]=\"t.siteLabel\"\n        [ngModelOptions]=\"{ standalone: true }\"\n      />\n    </div>\n  }\n\n  <div class=\"side is-end\">\n    <div class=\"lang-switch\" role=\"group\" aria-label=\"Idioma / Language\">\n      <button\n        type=\"button\"\n        class=\"lang-pill\"\n        [class.is-active]=\"lang() === 'es'\"\n        [attr.aria-pressed]=\"lang() === 'es'\"\n        (click)=\"setLang('es')\"\n      >\n        ES\n      </button>\n      <button\n        type=\"button\"\n        class=\"lang-pill\"\n        [class.is-active]=\"lang() === 'en'\"\n        [attr.aria-pressed]=\"lang() === 'en'\"\n        (click)=\"setLang('en')\"\n      >\n        EN\n      </button>\n    </div>\n\n    <p-button\n      icon=\"pi pi-th-large\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.appsLauncher\"\n      [pTooltip]=\"t.appsLauncher\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"launcher.toggle($event)\"\n    />\n\n    <p-popover #launcher styleClass=\"ns-flush-popover\">\n      @if (!hasCompany()) {\n        <div class=\"launcher-notice\">\n          <i class=\"pi pi-building\" aria-hidden=\"true\"></i>\n          <div>\n            <p class=\"launcher-notice-title\">{{ t.noCompanyTitle }}</p>\n            <p class=\"launcher-notice-body\">{{ t.noCompanyHint }}</p>\n          </div>\n        </div>\n      }\n\n      <nucleus-menu\n        [heading]=\"t.appsSwitch\"\n        [badge]=\"launcherCount()\"\n        [sections]=\"launcherSections()\"\n        [searchable]=\"launcherRich()\"\n        [searchPlaceholder]=\"t.appsSearch\"\n        [emptyText]=\"launcherRich() ? t.appsNoMatch : t.appsEmpty\"\n        [keyboardHint]=\"t.keyboardHint\"\n        [width]=\"336\"\n        (select)=\"onLauncherSelect($event); launcher.hide()\"\n        (dismiss)=\"launcher.hide()\"\n      />\n    </p-popover>\n\n    <p-button\n      icon=\"pi pi-cog\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.settingsTitle\"\n      [pTooltip]=\"t.settingsTitle\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"settingsOpen.set(true)\"\n    />\n\n    @if (me) {\n      <p-button\n        severity=\"secondary\"\n        size=\"small\"\n        [text]=\"true\"\n        [rounded]=\"true\"\n        styleClass=\"avatar-trigger\"\n        [ariaLabel]=\"me.name\"\n        [pTooltip]=\"me.name\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"account.toggle($event)\"\n      >\n        <p-avatar\n          [image]=\"me.photoUrl ?? undefined\"\n          [label]=\"me.photoUrl ? undefined : initials()\"\n          shape=\"circle\"\n          size=\"normal\"\n        />\n      </p-button>\n    }\n  </div>\n</header>\n\n<p-popover #account styleClass=\"ns-flush-popover\">\n  @if (me) {\n    <div class=\"who\">\n      @if (me.photoUrl) {\n        <img class=\"who-photo\" [src]=\"me.photoUrl\" alt=\"\" width=\"42\" height=\"42\" />\n      } @else {\n        <span class=\"who-photo who-initials\">{{ initials() }}</span>\n      }\n      <span class=\"who-text\">\n        <span class=\"who-name\">{{ me.name }}</span>\n        <span class=\"who-mail\">{{ me.email }}</span>\n      </span>\n    </div>\n\n    <p class=\"who-role\">\n      <span class=\"who-dot\" aria-hidden=\"true\"></span>\n      @if (roleName(); as role) {\n        <b>{{ role }}</b>\n        <span class=\"who-sep\">\u00B7</span>\n      }\n      <span class=\"who-context\">{{ accountContext() }}</span>\n    </p>\n\n    <nucleus-menu\n      [sections]=\"accountSections()\"\n      [width]=\"304\"\n      (select)=\"onAccountSelect($event); account.hide()\"\n      (dismiss)=\"account.hide()\"\n    />\n  }\n</p-popover>\n\n<div class=\"body\">\n  @if (narrow() && sidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"sidebar-scrim\"\n      [attr.aria-label]=\"t.navToggle\"\n      (click)=\"toggleSidebar()\"\n    ></button>\n  }\n\n  <aside class=\"sidebar ns-frame\" [class.is-collapsed]=\"!sidebarOpen()\">\n    @if (roleName(); as role) {\n      <div class=\"role-badge\" [pTooltip]=\"sidebarOpen() ? '' : role\" tooltipPosition=\"right\">\n        <i class=\"pi pi-key\" aria-hidden=\"true\"></i>\n        <span class=\"nav-label role-text\">\n          <span class=\"role-name\">{{ role }}</span>\n          <span class=\"role-caption\">{{ t.roleCaption }}</span>\n        </span>\n      </div>\n    }\n\n    @if (navItems().length) {\n      <nav>\n        @for (item of navItems(); track item.id) {\n          <button\n            type=\"button\"\n            class=\"nav-item\"\n            [class.is-active]=\"activeNavId() === item.id\"\n            [attr.aria-current]=\"activeNavId() === item.id ? 'page' : null\"\n            [pTooltip]=\"sidebarOpen() ? '' : item.label\"\n            tooltipPosition=\"right\"\n            (click)=\"selectNav(item.id)\"\n          >\n            <i [class]=\"item.icon\" aria-hidden=\"true\"></i>\n            <span class=\"nav-label\">{{ item.label }}</span>\n          </button>\n        }\n      </nav>\n    }\n\n    <nav class=\"access-menu\">\n      @if (menuLoading()) {\n        <div class=\"nav-skeleton\" role=\"status\" [attr.aria-label]=\"t.accessLoading\">\n          @for (width of menuPlaceholders; track $index) {\n            <div class=\"nav-skeleton-item\">\n              <p-skeleton shape=\"circle\" size=\"15px\" />\n              <p-skeleton height=\"9px\" [width]=\"width\" />\n            </div>\n          }\n        </div>\n      } @else if (menuError()) {\n        <p class=\"access-state is-error\">{{ menuError() }}</p>\n      } @else if (!menu().length) {\n        <p class=\"access-state\">{{ t.accessEmpty }}</p>\n      } @else {\n        @for (node of menu(); track node.id) {\n          @let group = isGroup(node);\n          @let open = isExpanded(node);\n\n          <button\n            type=\"button\"\n            class=\"nav-item\"\n            [class.is-active]=\"!group && isSelected(node)\"\n            [class.is-inert]=\"!group && !node.route\"\n            [attr.aria-expanded]=\"group ? open : null\"\n            [disabled]=\"!group && !node.route\"\n            [pTooltip]=\"sidebarOpen() ? '' : node.label\"\n            tooltipPosition=\"right\"\n            (click)=\"selectMenu(node)\"\n          >\n            <i [class]=\"node.icon ?? 'pi pi-circle'\" aria-hidden=\"true\"></i>\n            <span class=\"nav-label\">{{ node.label }}</span>\n            @if (group && sidebarOpen()) {\n              <i\n                class=\"pi nav-caret\"\n                [class.pi-chevron-down]=\"open\"\n                [class.pi-chevron-right]=\"!open\"\n                aria-hidden=\"true\"\n              ></i>\n            }\n          </button>\n\n          @if (open) {\n            @for (child of node.children; track child.id) {\n              <button\n                type=\"button\"\n                class=\"nav-item is-child\"\n                [class.is-active]=\"isSelected(child)\"\n                [pTooltip]=\"sidebarOpen() ? '' : child.label\"\n                tooltipPosition=\"right\"\n                (click)=\"selectMenu(child)\"\n              >\n                <i [class]=\"child.icon ?? 'pi pi-circle'\" aria-hidden=\"true\"></i>\n                <span class=\"nav-label\">{{ child.label }}</span>\n              </button>\n            }\n          }\n        }\n      }\n    </nav>\n  </aside>\n\n  <main class=\"content\">\n    <div class=\"measure\">\n      <ng-content select=\"[nucleusTop]\" />\n\n      @if (crumbs().length || title() || pageActions()) {\n        <header class=\"page-head\">\n          <div class=\"page-head-main\">\n            @if (crumbs().length) {\n              <p-breadcrumb [model]=\"crumbs()\" [home]=\"home()\" styleClass=\"ns-crumbs\" />\n            }\n\n            @if (title()) {\n              <h1>{{ title() }}</h1>\n            }\n          </div>\n\n          @if (pageActions(); as actions) {\n            <div class=\"page-head-actions\">\n              <ng-container [ngTemplateOutlet]=\"actions\" />\n            </div>\n          }\n        </header>\n      }\n\n      <ng-content />\n    </div>\n  </main>\n</div>\n\n<p-drawer\n  [visible]=\"settingsOpen()\"\n  (visibleChange)=\"settingsOpen.set($event)\"\n  position=\"right\"\n  [header]=\"t.settingsTitle\"\n  [modal]=\"false\"\n  [blockScroll]=\"false\"\n  styleClass=\"ns-settings-drawer\"\n  [style]=\"{ width: '380px' }\"\n>\n  <nucleus-appearance />\n</p-drawer>\n\n<p-toast position=\"bottom-right\" styleClass=\"ns-toast\">\n  <ng-template #message let-message>\n    <nucleus-lordicon\n      [src]=\"message.severity === 'success' ? icons.check : icons.warning\"\n      [tone]=\"message.severity === 'success' ? 'accent' : 'danger'\"\n      [size]=\"34\"\n      trigger=\"in\"\n    />\n    <div class=\"toast-text\">\n      <p class=\"toast-summary\">{{ message.summary }}</p>\n      @if (message.detail) {\n        <p class=\"toast-detail\">{{ message.detail }}</p>\n      }\n    </div>\n  </ng-template>\n</p-toast>\n\n<p-confirmdialog [style]=\"{ width: '420px' }\">\n  <ng-template #headless let-message let-onAccept=\"onAccept\" let-onReject=\"onReject\">\n    <div class=\"confirm\">\n      <nucleus-lordicon\n        [src]=\"message.icon\"\n        [tone]=\"message.acceptButtonStyleClass ? 'danger' : 'accent'\"\n        [size]=\"64\"\n        trigger=\"loop\"\n      />\n      <h2>{{ message.header }}</h2>\n      <p>{{ message.message }}</p>\n      <div class=\"confirm-actions\">\n        <p-button\n          [label]=\"message.rejectLabel\"\n          severity=\"secondary\"\n          [text]=\"true\"\n          (onClick)=\"onReject()\"\n        />\n        <p-button\n          [label]=\"message.acceptLabel\"\n          [severity]=\"message.acceptButtonStyleClass ? 'danger' : 'primary'\"\n          (onClick)=\"onAccept()\"\n        />\n      </div>\n    </div>\n  </ng-template>\n</p-confirmdialog>\n", styles: [":host{display:flex;flex-direction:column;min-height:100dvh;background:var(--ac-bg);color:var(--ac-text)}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:flex-start;gap:16px;height:56px;padding:0 12px 0 8px;border-bottom:1px solid var(--ns-frame-line)}.side{display:flex;min-width:0;align-items:center;gap:4px}.side.is-end{margin-left:auto}.brand{display:flex;align-items:center;gap:9px;margin-left:4px}.brand-name{display:flex;align-items:baseline;gap:7px}.brand-primary{font-size:13px;font-weight:700;letter-spacing:.15em}.brand-secondary{font-size:9px;font-weight:500;letter-spacing:.22em;color:var(--ns-frame-muted)}.lang-switch{display:flex;align-items:center;gap:2px;margin-right:6px;border:1px solid var(--ns-frame-line);border-radius:999px;padding:2px}.lang-pill{font-size:10px;font-weight:600;letter-spacing:.08em;padding:4px 10px;border:none;border-radius:999px;background:transparent;color:var(--ns-frame-muted);cursor:pointer}.lang-pill:hover{color:var(--ns-frame-ink)}.lang-pill.is-active{background:var(--ns-frame-glow);color:var(--ns-frame-on-glow)}.body{display:flex;flex:1;min-height:0}.sidebar{flex:none;width:max-content;min-width:224px;max-width:340px;padding:12px 10px;border-right:1px solid var(--ns-frame-line);transition:width .18s ease}.sidebar.is-collapsed{width:60px;min-width:0}.sidebar nav{display:flex;flex-direction:column;gap:3px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:var(--ns-nav-y, 9px) 12px;border:none;border-radius:6px;background:transparent;color:var(--ns-frame-muted);font-size:13px;font-weight:500;text-align:left;white-space:nowrap;cursor:pointer}.nav-item i{flex:none;font-size:15px}.nav-item:hover{background:var(--ns-frame-raised);color:var(--ns-frame-ink)}.nav-item.is-active{background:var(--ns-frame-raised);box-shadow:inset 2px 0 0 var(--ns-frame-glow);color:var(--ns-frame-ink)}.nav-item.is-active i{color:var(--ns-frame-glow)}.nav-caret{margin-left:auto;font-size:11px!important;opacity:.7}.nav-item.is-inert{opacity:.45;cursor:default}.nav-item.is-inert:hover{background:transparent;color:var(--ns-frame-muted)}.nav-label{overflow:hidden;text-overflow:ellipsis}.sidebar.is-collapsed .nav-label{display:none}.sidebar.is-collapsed .nav-item{justify-content:center;padding-inline:0}.content{flex:1;min-width:0;padding:28px 28px 64px;display:flex;flex-direction:column;gap:14px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:7px 16px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1)}.page-head-main{display:flex;min-width:0;flex:1;align-items:center;gap:14px}.page-head-actions{display:flex;flex:none;align-items:center;gap:8px}.page-head h1{margin:0;font-size:19px;font-weight:600}.measure{display:flex;width:100%;max-width:var(--ac-content-max, 1440px);flex-direction:column;gap:14px;margin-inline:0}h1{margin:0;font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.02em}.access-menu{display:flex;flex-direction:column;gap:.15rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--ns-frame-line)}.access-caption{margin:0 0 .4rem;padding:0 .75rem;color:var(--ns-frame-muted);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.access-state{margin:0;padding:.35rem .75rem;color:var(--ns-frame-muted);font-size:.78rem}.access-state.is-error{color:var(--p-red-400, #f87171)}.nav-item.is-child{padding-left:2.1rem;font-size:.86rem}@media(max-width:720px){.sidebar{max-width:none;position:fixed;top:var(--ns-topbar-h, 56px);bottom:0;left:0;z-index:30;width:268px;max-width:82vw;overflow-y:auto;box-shadow:0 18px 44px #00000073;transform:translate(-100%);transition:transform .18s ease}.sidebar.is-collapsed{width:268px;max-width:82vw;transform:translate(-100%)}.sidebar:not(.is-collapsed){transform:translate(0)}.sidebar.is-collapsed .nav-label{display:inline}.sidebar.is-collapsed .role-text{display:flex}.sidebar.is-collapsed .nav-item,.sidebar.is-collapsed .role-badge{justify-content:flex-start;padding-inline:12px}.brand-secondary{display:none}.topbar{height:auto;min-height:56px;flex-wrap:wrap;padding-bottom:8px;row-gap:8px}.context{order:3;width:100%;margin-left:0}.context-select{min-width:0;max-width:none;flex:1 1 0}.content{padding:20px 16px 48px}h1{font-size:22px}.page-head{align-items:stretch;flex-direction:column;gap:10px;padding:10px 14px}.page-head-actions{justify-content:flex-end}}.who{display:flex;align-items:center;gap:12px;padding:15px 15px 13px;border-bottom:1px solid var(--ac-border);background:var(--ns-header-bg)}.who-photo{width:42px;height:42px;flex:none;border-radius:999px;object-fit:cover}.who-initials{display:inline-flex;align-items:center;justify-content:center;background:var(--ac-accent);color:var(--ac-on-accent);font-size:15px;font-weight:600}.who-text{display:flex;min-width:0;flex-direction:column}.who-name{overflow:hidden;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.who-mail{overflow:hidden;color:var(--ac-text-muted);font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}.who-role{display:flex;align-items:center;gap:7px;margin:0;overflow:hidden;padding:9px 15px;border-bottom:1px solid var(--ac-border);color:var(--ac-text-muted);font-size:11.5px;white-space:nowrap}.who-role b{flex:none;color:var(--ac-text);font-size:12px;font-weight:600}.who-sep{flex:none}.who-context{overflow:hidden;text-overflow:ellipsis}.who-dot{width:5px;height:5px;flex:none;border-radius:50%;background:var(--ac-accent)}.company-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}.company-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.launcher-notice{display:flex;gap:10px;margin:12px 12px 0;padding:12px;border:1px solid color-mix(in srgb,var(--ac-accent) 40%,transparent);border-radius:8px;background:color-mix(in srgb,var(--ac-accent) 10%,transparent)}.launcher-notice i{margin-top:2px;color:var(--ac-accent);font-size:15px}.launcher-notice-title{margin:0 0 4px;font-size:13px;font-weight:600}.launcher-notice-body{margin:0;color:var(--ac-text-muted);font-size:12px;line-height:1.45}.confirm{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 24px 20px;border:1px solid var(--ac-border);border-radius:14px;background:var(--ac-surface);text-align:center}.confirm h2{margin:8px 0 0;font-size:17px;font-weight:600}.confirm p{margin:0;max-width:34ch;color:var(--ac-text-muted);font-size:13px;line-height:1.5}.confirm-actions{display:flex;justify-content:center;gap:8px;margin-top:18px}.toast-text{flex:1;margin-left:12px}.toast-summary{margin:0;font-size:13px;font-weight:600}.toast-detail{margin:2px 0 0;color:var(--ac-text-muted);font-size:12px}.context{display:flex;min-width:0;align-items:center;gap:8px;margin-left:14px}.context-select{min-width:150px;max-width:210px}.role-badge{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:9px 12px;border-left:2px solid var(--ns-frame-glow);border-radius:0 7px 7px 0;background:var(--ns-frame-raised);box-shadow:-2px 0 12px -3px color-mix(in srgb,var(--ns-frame-glow) 65%,transparent)}.role-badge>i{flex:none;color:var(--ns-frame-glow);font-size:14px}.role-text{display:flex;min-width:0;flex-direction:column;gap:1px}.role-name{overflow:hidden;color:var(--ns-frame-ink);font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.role-caption{color:var(--ns-frame-muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.sidebar.is-collapsed .role-badge{justify-content:center;padding-inline:0}.sidebar-scrim{position:fixed;top:var(--ns-topbar-h, 56px);right:0;bottom:0;left:0;z-index:29;padding:0;border:0;background:#00000073;cursor:pointer}.nav-skeleton{display:flex;flex-direction:column;gap:3px}.nav-skeleton-item{display:flex;align-items:center;gap:12px;padding:11px 12px}.sidebar.is-collapsed .nav-skeleton-item .p-skeleton:last-child{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i1$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BreadcrumbModule }, { kind: "component", type: i2$3.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i4$1.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i5$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i6$1.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NucleusAppearance, selector: "nucleus-appearance" }, { kind: "component", type: NucleusLordicon, selector: "nucleus-lordicon", inputs: ["src", "trigger", "state", "size", "tone"] }, { kind: "component", type: NucleusMenu, selector: "nucleus-menu", inputs: ["sections", "heading", "badge", "searchable", "searchPlaceholder", "emptyText", "keyboardHint", "width"], outputs: ["select", "dismiss"] }, { kind: "component", type: NucleusMark, selector: "nucleus-mark", inputs: ["accent", "size"] }, { kind: "component", type: NucleusStarfield, selector: "nucleus-starfield" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusShell, isStandalone: true, selector: "nucleus-shell", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, activeNavId: { classPropertyName: "activeNavId", publicName: "activeNavId", isSignal: true, isRequired: false, transformFunction: null }, selectedMenuId: { classPropertyName: "selectedMenuId", publicName: "selectedMenuId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navSelect: "navSelect", menuSelect: "menuSelect" }, host: { properties: { "style.--ns-topbar-h": "topbarHeight()" } }, ngImport: i0, template: "@let t = copy();\n@let me = identity();\n\n@if (starfield()) {\n  <nucleus-starfield />\n}\n\n<header class=\"topbar ns-frame\">\n  <div class=\"side\">\n    <p-button\n      icon=\"pi pi-bars\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.navToggle\"\n      [pTooltip]=\"t.navToggle\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"toggleSidebar()\"\n    />\n\n    <div class=\"brand\">\n      <nucleus-mark [size]=\"20\" />\n      <div class=\"brand-name\">\n        <span class=\"brand-primary\">NUCLEUS</span>\n        <span class=\"brand-secondary\">{{ brand() }}</span>\n      </div>\n    </div>\n\n  </div>\n\n  @if (hasSiteContext()) {\n    <div class=\"context ns-context\">\n      <p-select\n        styleClass=\"context-select\"\n        [options]=\"companyChoices()\"\n        optionValue=\"id\"\n        optionLabel=\"name\"\n        [ngModel]=\"companyChoice()\"\n        (ngModelChange)=\"onCompanyChange($event)\"\n        [placeholder]=\"t.companyPlaceholder\"\n        [disabled]=\"switching()\"\n        [filter]=\"companyChoices().length > 8\"\n        filterBy=\"name\"\n        [filterPlaceholder]=\"words().search\"\n        [autofocusFilter]=\"true\"\n        [resetFilterOnHide]=\"true\"\n        [ariaLabel]=\"t.companyLabel\"\n        [ngModelOptions]=\"{ standalone: true }\"\n      >\n        <ng-template #item let-option>\n          <span class=\"company-option\">\n            <span class=\"company-name\">{{ option.name }}</span>\n            <p-tag [value]=\"option.tag\" severity=\"secondary\" />\n          </span>\n        </ng-template>\n      </p-select>\n\n      <p-select\n        styleClass=\"context-select\"\n        [options]=\"siteOptions()\"\n        optionValue=\"id\"\n        optionLabel=\"name\"\n        [ngModel]=\"siteChoice()\"\n        (ngModelChange)=\"onSiteChange($event)\"\n        [placeholder]=\"sitePlaceholder()\"\n        [disabled]=\"switching() || sitesLoading() || !siteOptions().length\"\n        [filter]=\"siteOptions().length > 8\"\n        filterBy=\"name\"\n        [filterPlaceholder]=\"words().search\"\n        [autofocusFilter]=\"true\"\n        [resetFilterOnHide]=\"true\"\n        [ariaLabel]=\"t.siteLabel\"\n        [ngModelOptions]=\"{ standalone: true }\"\n      />\n    </div>\n  }\n\n  <div class=\"side is-end\">\n    <div class=\"lang-switch\" role=\"group\" aria-label=\"Idioma / Language\">\n      <button\n        type=\"button\"\n        class=\"lang-pill\"\n        [class.is-active]=\"lang() === 'es'\"\n        [attr.aria-pressed]=\"lang() === 'es'\"\n        (click)=\"setLang('es')\"\n      >\n        ES\n      </button>\n      <button\n        type=\"button\"\n        class=\"lang-pill\"\n        [class.is-active]=\"lang() === 'en'\"\n        [attr.aria-pressed]=\"lang() === 'en'\"\n        (click)=\"setLang('en')\"\n      >\n        EN\n      </button>\n    </div>\n\n    <p-button\n      icon=\"pi pi-th-large\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.appsLauncher\"\n      [pTooltip]=\"t.appsLauncher\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"launcher.toggle($event)\"\n    />\n\n    <p-popover #launcher styleClass=\"ns-flush-popover\">\n      @if (!hasCompany()) {\n        <div class=\"launcher-notice\">\n          <i class=\"pi pi-building\" aria-hidden=\"true\"></i>\n          <div>\n            <p class=\"launcher-notice-title\">{{ t.noCompanyTitle }}</p>\n            <p class=\"launcher-notice-body\">{{ t.noCompanyHint }}</p>\n          </div>\n        </div>\n      }\n\n      <nucleus-menu\n        layout=\"grid\"\n        [heading]=\"t.appsSwitch\"\n        [sections]=\"launcherSections()\"\n        [searchable]=\"launcherRich()\"\n        [searchPlaceholder]=\"t.appsSearch\"\n        [emptyText]=\"launcherRich() ? t.appsNoMatch : t.appsEmpty\"\n        [keyboardHint]=\"t.keyboardHint\"\n        [width]=\"384\"\n        (select)=\"onLauncherSelect($event); launcher.hide()\"\n        (dismiss)=\"launcher.hide()\"\n      />\n    </p-popover>\n\n    <p-button\n      icon=\"pi pi-cog\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.settingsTitle\"\n      [pTooltip]=\"t.settingsTitle\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"settingsOpen.set(true)\"\n    />\n\n    @if (me) {\n      <p-button\n        severity=\"secondary\"\n        size=\"small\"\n        [text]=\"true\"\n        [rounded]=\"true\"\n        styleClass=\"avatar-trigger\"\n        [ariaLabel]=\"me.name\"\n        [pTooltip]=\"me.name\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"account.toggle($event)\"\n      >\n        <p-avatar\n          [image]=\"me.photoUrl ?? undefined\"\n          [label]=\"me.photoUrl ? undefined : initials()\"\n          shape=\"circle\"\n          size=\"normal\"\n        />\n      </p-button>\n    }\n  </div>\n</header>\n\n<p-popover #account styleClass=\"ns-flush-popover\">\n  @if (me) {\n    <div class=\"who\">\n      @if (me.photoUrl) {\n        <img class=\"who-photo\" [src]=\"me.photoUrl\" alt=\"\" width=\"42\" height=\"42\" />\n      } @else {\n        <span class=\"who-photo who-initials\">{{ initials() }}</span>\n      }\n      <span class=\"who-text\">\n        <span class=\"who-name\">{{ me.name }}</span>\n        <span class=\"who-mail\">{{ me.email }}</span>\n      </span>\n    </div>\n\n    <p class=\"who-role\">\n      <span class=\"who-dot\" aria-hidden=\"true\"></span>\n      @if (roleName(); as role) {\n        <b>{{ role }}</b>\n        <span class=\"who-sep\">\u00B7</span>\n      }\n      <span class=\"who-context\">{{ accountContext() }}</span>\n    </p>\n\n    <nucleus-menu\n      [sections]=\"accountSections()\"\n      [width]=\"304\"\n      (select)=\"onAccountSelect($event); account.hide()\"\n      (dismiss)=\"account.hide()\"\n    />\n  }\n</p-popover>\n\n<div class=\"body\">\n  @if (narrow() && sidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"sidebar-scrim\"\n      [attr.aria-label]=\"t.navToggle\"\n      (click)=\"toggleSidebar()\"\n    ></button>\n  }\n\n  <aside class=\"sidebar ns-frame\" [class.is-collapsed]=\"!sidebarOpen()\">\n    @if (roleName(); as role) {\n      <div class=\"role-badge\" [pTooltip]=\"sidebarOpen() ? '' : role\" tooltipPosition=\"right\">\n        <i class=\"pi pi-key\" aria-hidden=\"true\"></i>\n        <span class=\"nav-label role-text\">\n          <span class=\"role-name\">{{ role }}</span>\n          <span class=\"role-caption\">{{ t.roleCaption }}</span>\n        </span>\n      </div>\n    }\n\n    @if (navItems().length) {\n      <nav>\n        @for (item of navItems(); track item.id) {\n          <button\n            type=\"button\"\n            class=\"nav-item\"\n            [class.is-active]=\"activeNavId() === item.id\"\n            [attr.aria-current]=\"activeNavId() === item.id ? 'page' : null\"\n            [pTooltip]=\"sidebarOpen() ? '' : item.label\"\n            tooltipPosition=\"right\"\n            (click)=\"selectNav(item.id)\"\n          >\n            <i [class]=\"item.icon\" aria-hidden=\"true\"></i>\n            <span class=\"nav-label\">{{ item.label }}</span>\n          </button>\n        }\n      </nav>\n    }\n\n    <nav class=\"access-menu\">\n      @if (menuLoading()) {\n        <div class=\"nav-skeleton\" role=\"status\" [attr.aria-label]=\"t.accessLoading\">\n          @for (width of menuPlaceholders; track $index) {\n            <div class=\"nav-skeleton-item\">\n              <p-skeleton shape=\"circle\" size=\"15px\" />\n              <p-skeleton height=\"9px\" [width]=\"width\" />\n            </div>\n          }\n        </div>\n      } @else if (menuError()) {\n        <p class=\"access-state is-error\">{{ menuError() }}</p>\n      } @else if (!menu().length) {\n        <p class=\"access-state\">{{ t.accessEmpty }}</p>\n      } @else {\n        @for (node of menu(); track node.id) {\n          @let group = isGroup(node);\n          @let open = isExpanded(node);\n\n          <button\n            type=\"button\"\n            class=\"nav-item\"\n            [class.is-active]=\"!group && isSelected(node)\"\n            [class.is-inert]=\"!group && !node.route\"\n            [attr.aria-expanded]=\"group ? open : null\"\n            [disabled]=\"!group && !node.route\"\n            [pTooltip]=\"sidebarOpen() ? '' : node.label\"\n            tooltipPosition=\"right\"\n            (click)=\"selectMenu(node)\"\n          >\n            <i [class]=\"node.icon ?? 'pi pi-circle'\" aria-hidden=\"true\"></i>\n            <span class=\"nav-label\">{{ node.label }}</span>\n            @if (group && sidebarOpen()) {\n              <i\n                class=\"pi nav-caret\"\n                [class.pi-chevron-down]=\"open\"\n                [class.pi-chevron-right]=\"!open\"\n                aria-hidden=\"true\"\n              ></i>\n            }\n          </button>\n\n          @if (open) {\n            @for (child of node.children; track child.id) {\n              <button\n                type=\"button\"\n                class=\"nav-item is-child\"\n                [class.is-active]=\"isSelected(child)\"\n                [pTooltip]=\"sidebarOpen() ? '' : child.label\"\n                tooltipPosition=\"right\"\n                (click)=\"selectMenu(child)\"\n              >\n                <i [class]=\"child.icon ?? 'pi pi-circle'\" aria-hidden=\"true\"></i>\n                <span class=\"nav-label\">{{ child.label }}</span>\n              </button>\n            }\n          }\n        }\n      }\n    </nav>\n  </aside>\n\n  <main class=\"content\">\n    <div class=\"measure\">\n      <ng-content select=\"[nucleusTop]\" />\n\n      @if (crumbs().length || title() || pageActions()) {\n        <header class=\"page-head\">\n          <div class=\"page-head-main\">\n            @if (crumbs().length) {\n              <p-breadcrumb [model]=\"crumbs()\" [home]=\"home()\" styleClass=\"ns-crumbs\" />\n            }\n\n            @if (title()) {\n              <h1>{{ title() }}</h1>\n            }\n          </div>\n\n          @if (pageActions(); as actions) {\n            <div class=\"page-head-actions\">\n              <ng-container [ngTemplateOutlet]=\"actions\" />\n            </div>\n          }\n        </header>\n      }\n\n      <ng-content />\n    </div>\n  </main>\n</div>\n\n<p-drawer\n  [visible]=\"settingsOpen()\"\n  (visibleChange)=\"settingsOpen.set($event)\"\n  position=\"right\"\n  [header]=\"t.settingsTitle\"\n  [modal]=\"false\"\n  [blockScroll]=\"false\"\n  styleClass=\"ns-settings-drawer\"\n  [style]=\"{ width: '380px' }\"\n>\n  <nucleus-appearance />\n</p-drawer>\n\n<p-toast position=\"bottom-right\" styleClass=\"ns-toast\">\n  <ng-template #message let-message>\n    <nucleus-lordicon\n      [src]=\"message.severity === 'success' ? icons.check : icons.warning\"\n      [tone]=\"message.severity === 'success' ? 'accent' : 'danger'\"\n      [size]=\"34\"\n      trigger=\"in\"\n    />\n    <div class=\"toast-text\">\n      <p class=\"toast-summary\">{{ message.summary }}</p>\n      @if (message.detail) {\n        <p class=\"toast-detail\">{{ message.detail }}</p>\n      }\n    </div>\n  </ng-template>\n</p-toast>\n\n<p-confirmdialog [style]=\"{ width: '420px' }\">\n  <ng-template #headless let-message let-onAccept=\"onAccept\" let-onReject=\"onReject\">\n    <div class=\"confirm\">\n      <nucleus-lordicon\n        [src]=\"message.icon\"\n        [tone]=\"message.acceptButtonStyleClass ? 'danger' : 'accent'\"\n        [size]=\"64\"\n        trigger=\"loop\"\n      />\n      <h2>{{ message.header }}</h2>\n      <p>{{ message.message }}</p>\n      <div class=\"confirm-actions\">\n        <p-button\n          [label]=\"message.rejectLabel\"\n          severity=\"secondary\"\n          [text]=\"true\"\n          (onClick)=\"onReject()\"\n        />\n        <p-button\n          [label]=\"message.acceptLabel\"\n          [severity]=\"message.acceptButtonStyleClass ? 'danger' : 'primary'\"\n          (onClick)=\"onAccept()\"\n        />\n      </div>\n    </div>\n  </ng-template>\n</p-confirmdialog>\n", styles: [":host{display:flex;flex-direction:column;min-height:100dvh;background:var(--ac-bg);color:var(--ac-text)}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:flex-start;gap:16px;height:56px;padding:0 12px 0 8px;border-bottom:1px solid var(--ns-frame-line)}.side{display:flex;min-width:0;align-items:center;gap:4px}.side.is-end{margin-left:auto}.brand{display:flex;align-items:center;gap:9px;margin-left:4px}.brand-name{display:flex;align-items:baseline;gap:7px}.brand-primary{font-size:13px;font-weight:700;letter-spacing:.15em}.brand-secondary{font-size:9px;font-weight:var(--ns-weight-emphasis);letter-spacing:.22em;color:var(--ns-frame-muted)}.lang-switch{display:flex;align-items:center;gap:2px;margin-right:6px;border:1px solid var(--ns-frame-line);border-radius:999px;padding:2px}.lang-pill{font-size:10px;font-weight:var(--ns-weight-emphasis);letter-spacing:.08em;padding:4px 10px;border:none;border-radius:999px;background:transparent;color:var(--ns-frame-muted);cursor:pointer}.lang-pill:hover{color:var(--ns-frame-ink)}.lang-pill.is-active{background:var(--ns-frame-glow);color:var(--ns-frame-on-glow)}.body{display:flex;flex:1;min-height:0}.sidebar{flex:none;width:max-content;min-width:224px;max-width:340px;padding:12px 10px;border-right:1px solid var(--ns-frame-line);transition:width .18s ease}.sidebar.is-collapsed{width:60px;min-width:0}.sidebar nav{display:flex;flex-direction:column;gap:3px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:var(--ns-nav-y, 9px) 12px;border:none;border-radius:6px;background:transparent;color:var(--ns-frame-muted);font-size:13px;font-weight:var(--ns-weight-text);text-align:left;white-space:nowrap;cursor:pointer}.nav-item i{flex:none;font-size:15px}.nav-item:hover{background:var(--ns-frame-raised);color:var(--ns-frame-ink)}.nav-item.is-active{background:var(--ns-nav-active-bg, var(--ns-frame-raised));color:var(--ns-nav-active-ink, var(--ns-frame-ink));font-weight:var(--ns-weight-emphasis)}.nav-item.is-active i{color:inherit}.nav-caret{margin-left:auto;font-size:11px!important;opacity:.7}.nav-item.is-inert{opacity:.45;cursor:default}.nav-item.is-inert:hover{background:transparent;color:var(--ns-frame-muted)}.nav-label{overflow:hidden;text-overflow:ellipsis}.sidebar.is-collapsed .nav-label{display:none}.sidebar.is-collapsed .nav-item{justify-content:center;padding-inline:0}.content{flex:1;min-width:0;padding:28px 28px 64px;display:flex;flex-direction:column;gap:14px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:7px 16px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1)}.page-head-main{display:flex;min-width:0;flex:1;align-items:center;gap:14px}.page-head-actions{display:flex;flex:none;align-items:center;gap:8px}.page-head h1{margin:0;font-size:19px;font-weight:var(--ns-weight-heading)}.measure{display:flex;width:100%;max-width:var(--ac-content-max, 1440px);flex-direction:column;gap:14px;margin-inline:0}h1{margin:0;font-size:26px;line-height:1.2;font-weight:var(--ns-weight-emphasis);letter-spacing:-.02em}.access-menu{display:flex;flex-direction:column;gap:.15rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--ns-frame-line)}.access-caption{margin:0 0 .4rem;padding:0 .75rem;color:var(--ns-frame-muted);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.access-state{margin:0;padding:.35rem .75rem;color:var(--ns-frame-muted);font-size:.78rem}.access-state.is-error{color:var(--p-red-400, #f87171)}.nav-item.is-child{padding-left:2.1rem;font-size:.86rem}@media(max-width:720px){.sidebar{max-width:none;position:fixed;top:var(--ns-topbar-h, 56px);bottom:0;left:0;z-index:30;width:268px;max-width:82vw;overflow-y:auto;box-shadow:0 18px 44px #00000073;transform:translate(-100%);transition:transform .18s ease}.sidebar.is-collapsed{width:268px;max-width:82vw;transform:translate(-100%)}.sidebar:not(.is-collapsed){transform:translate(0)}.sidebar.is-collapsed .nav-label{display:inline}.sidebar.is-collapsed .role-text{display:flex}.sidebar.is-collapsed .nav-item,.sidebar.is-collapsed .role-badge{justify-content:flex-start;padding-inline:12px}.brand-secondary{display:none}.topbar{height:auto;min-height:56px;flex-wrap:wrap;padding-bottom:8px;row-gap:8px}.context{order:3;width:100%;margin-left:0}.context-select{min-width:0;max-width:none;flex:1 1 0}.content{padding:20px 16px 48px}h1{font-size:22px}.page-head{gap:10px;min-height:42px;padding:7px 12px}.page-head-main{gap:8px}.page-head h1{overflow:hidden;min-width:0;font-size:16px;text-overflow:ellipsis;white-space:nowrap}.page-head-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px}.page-head-actions ::ng-deep .p-button{padding-block:6px;padding-inline:11px;font-size:13px;white-space:nowrap}.page-head-actions ::ng-deep .p-button-icon{font-size:13px}}.who{display:flex;align-items:center;gap:12px;margin:6px 6px 0;padding:12px;border-radius:10px;background:var(--ac-text);color:var(--ac-surface)}.who-photo{width:42px;height:42px;flex:none;border-radius:999px;object-fit:cover}.who-initials{display:inline-flex;align-items:center;justify-content:center;background:var(--ac-accent);color:var(--ac-on-accent);font-size:15px;font-weight:var(--ns-weight-emphasis)}.who-text{display:flex;min-width:0;flex-direction:column}.who-name{overflow:hidden;font-size:14px;font-weight:var(--ns-weight-emphasis);text-overflow:ellipsis;white-space:nowrap}.who-mail{overflow:hidden;color:color-mix(in srgb,currentColor 64%,transparent);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.who-role{display:flex;align-items:center;gap:7px;margin:0;overflow:hidden;padding:11px 17px 5px;color:var(--ac-text-muted);font-size:12px;white-space:nowrap}.who-role b{flex:none;color:var(--ac-text);font-size:12px;font-weight:var(--ns-weight-emphasis)}.who-sep{flex:none}.who-context{overflow:hidden;text-overflow:ellipsis}.who-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--ns-success)}.company-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}.company-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.launcher-notice{display:flex;gap:10px;margin:12px 12px 0;padding:12px;border:1px solid color-mix(in srgb,var(--ac-accent) 40%,transparent);border-radius:8px;background:color-mix(in srgb,var(--ac-accent) 10%,transparent)}.launcher-notice i{margin-top:2px;color:var(--ac-accent);font-size:15px}.launcher-notice-title{margin:0 0 4px;font-size:13px;font-weight:var(--ns-weight-emphasis)}.launcher-notice-body{margin:0;color:var(--ac-text-muted);font-size:12px;line-height:1.45}.confirm{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 24px 20px;border:1px solid var(--ac-border);border-radius:14px;background:var(--ac-surface);text-align:center}.confirm h2{margin:8px 0 0;font-size:17px;font-weight:var(--ns-weight-heading)}.confirm p{margin:0;max-width:34ch;color:var(--ac-text-muted);font-size:13px;line-height:1.5}.confirm-actions{display:flex;justify-content:center;gap:8px;margin-top:18px}.toast-text{flex:1;margin-left:12px}.toast-summary{margin:0;font-size:13px;font-weight:var(--ns-weight-emphasis)}.toast-detail{margin:2px 0 0;color:var(--ac-text-muted);font-size:12px}.context{display:flex;min-width:0;align-items:center;gap:8px;margin-left:14px}.context-select{min-width:150px;max-width:210px}.role-badge{display:flex;align-items:center;gap:12px;padding:4px 12px 2px}.role-badge>i{flex:none;color:var(--ns-frame-muted);font-size:14px}.role-text{display:flex;min-width:0;flex-direction:column;gap:1px}.role-name{overflow:hidden;color:var(--ns-frame-ink);font-size:13px;font-weight:var(--ns-weight-emphasis);text-overflow:ellipsis;white-space:nowrap}.role-caption{color:var(--ns-frame-muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.sidebar.is-collapsed .role-badge{justify-content:center;padding-inline:0}.sidebar-scrim{position:fixed;top:var(--ns-topbar-h, 56px);right:0;bottom:0;left:0;z-index:29;padding:0;border:0;background:#00000073;cursor:pointer}.nav-skeleton{display:flex;flex-direction:column;gap:3px}.nav-skeleton-item{display:flex;align-items:center;gap:12px;padding:11px 12px}.sidebar.is-collapsed .nav-skeleton-item .p-skeleton:last-child{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i1$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BreadcrumbModule }, { kind: "component", type: i2$4.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i4$1.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i5$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i6$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i5$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NucleusAppearance, selector: "nucleus-appearance" }, { kind: "component", type: NucleusLordicon, selector: "nucleus-lordicon", inputs: ["src", "trigger", "state", "size", "tone"] }, { kind: "component", type: NucleusMenu, selector: "nucleus-menu", inputs: ["sections", "heading", "badge", "searchable", "searchPlaceholder", "emptyText", "keyboardHint", "width", "layout", "columns"], outputs: ["select", "dismiss"] }, { kind: "component", type: NucleusMark, selector: "nucleus-mark", inputs: ["accent", "size"] }, { kind: "component", type: NucleusStarfield, selector: "nucleus-starfield" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusShell, decorators: [{
             type: Component,
@@ -3902,8 +4302,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         NucleusMenu,
                         NucleusMark,
                         NucleusStarfield,
-                    ], host: { '[style.--ns-topbar-h]': 'topbarHeight()' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let t = copy();\n@let me = identity();\n\n@if (starfield()) {\n  <nucleus-starfield />\n}\n\n<header class=\"topbar ns-frame\">\n  <div class=\"side\">\n    <p-button\n      icon=\"pi pi-bars\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.navToggle\"\n      [pTooltip]=\"t.navToggle\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"toggleSidebar()\"\n    />\n\n    <div class=\"brand\">\n      <nucleus-mark [size]=\"20\" />\n      <div class=\"brand-name\">\n        <span class=\"brand-primary\">NUCLEUS</span>\n        <span class=\"brand-secondary\">{{ brand() }}</span>\n      </div>\n    </div>\n\n  </div>\n\n  @if (hasSiteContext()) {\n    <div class=\"context ns-context\">\n      <p-select\n        styleClass=\"context-select\"\n        [options]=\"companyChoices()\"\n        optionValue=\"id\"\n        optionLabel=\"name\"\n        [ngModel]=\"companyChoice()\"\n        (ngModelChange)=\"onCompanyChange($event)\"\n        [placeholder]=\"t.companyPlaceholder\"\n        [disabled]=\"switching()\"\n        [filter]=\"companyChoices().length > 8\"\n        filterBy=\"name\"\n        [filterPlaceholder]=\"words().search\"\n        [autofocusFilter]=\"true\"\n        [resetFilterOnHide]=\"true\"\n        [ariaLabel]=\"t.companyLabel\"\n        [ngModelOptions]=\"{ standalone: true }\"\n      >\n        <ng-template #item let-option>\n          <span class=\"company-option\">\n            <span class=\"company-name\">{{ option.name }}</span>\n            <p-tag [value]=\"option.tag\" severity=\"secondary\" />\n          </span>\n        </ng-template>\n      </p-select>\n\n      <p-select\n        styleClass=\"context-select\"\n        [options]=\"siteOptions()\"\n        optionValue=\"id\"\n        optionLabel=\"name\"\n        [ngModel]=\"siteChoice()\"\n        (ngModelChange)=\"onSiteChange($event)\"\n        [placeholder]=\"sitePlaceholder()\"\n        [disabled]=\"switching() || sitesLoading() || !siteOptions().length\"\n        [filter]=\"siteOptions().length > 8\"\n        filterBy=\"name\"\n        [filterPlaceholder]=\"words().search\"\n        [autofocusFilter]=\"true\"\n        [resetFilterOnHide]=\"true\"\n        [ariaLabel]=\"t.siteLabel\"\n        [ngModelOptions]=\"{ standalone: true }\"\n      />\n    </div>\n  }\n\n  <div class=\"side is-end\">\n    <div class=\"lang-switch\" role=\"group\" aria-label=\"Idioma / Language\">\n      <button\n        type=\"button\"\n        class=\"lang-pill\"\n        [class.is-active]=\"lang() === 'es'\"\n        [attr.aria-pressed]=\"lang() === 'es'\"\n        (click)=\"setLang('es')\"\n      >\n        ES\n      </button>\n      <button\n        type=\"button\"\n        class=\"lang-pill\"\n        [class.is-active]=\"lang() === 'en'\"\n        [attr.aria-pressed]=\"lang() === 'en'\"\n        (click)=\"setLang('en')\"\n      >\n        EN\n      </button>\n    </div>\n\n    <p-button\n      icon=\"pi pi-th-large\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.appsLauncher\"\n      [pTooltip]=\"t.appsLauncher\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"launcher.toggle($event)\"\n    />\n\n    <p-popover #launcher styleClass=\"ns-flush-popover\">\n      @if (!hasCompany()) {\n        <div class=\"launcher-notice\">\n          <i class=\"pi pi-building\" aria-hidden=\"true\"></i>\n          <div>\n            <p class=\"launcher-notice-title\">{{ t.noCompanyTitle }}</p>\n            <p class=\"launcher-notice-body\">{{ t.noCompanyHint }}</p>\n          </div>\n        </div>\n      }\n\n      <nucleus-menu\n        [heading]=\"t.appsSwitch\"\n        [badge]=\"launcherCount()\"\n        [sections]=\"launcherSections()\"\n        [searchable]=\"launcherRich()\"\n        [searchPlaceholder]=\"t.appsSearch\"\n        [emptyText]=\"launcherRich() ? t.appsNoMatch : t.appsEmpty\"\n        [keyboardHint]=\"t.keyboardHint\"\n        [width]=\"336\"\n        (select)=\"onLauncherSelect($event); launcher.hide()\"\n        (dismiss)=\"launcher.hide()\"\n      />\n    </p-popover>\n\n    <p-button\n      icon=\"pi pi-cog\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.settingsTitle\"\n      [pTooltip]=\"t.settingsTitle\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"settingsOpen.set(true)\"\n    />\n\n    @if (me) {\n      <p-button\n        severity=\"secondary\"\n        size=\"small\"\n        [text]=\"true\"\n        [rounded]=\"true\"\n        styleClass=\"avatar-trigger\"\n        [ariaLabel]=\"me.name\"\n        [pTooltip]=\"me.name\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"account.toggle($event)\"\n      >\n        <p-avatar\n          [image]=\"me.photoUrl ?? undefined\"\n          [label]=\"me.photoUrl ? undefined : initials()\"\n          shape=\"circle\"\n          size=\"normal\"\n        />\n      </p-button>\n    }\n  </div>\n</header>\n\n<p-popover #account styleClass=\"ns-flush-popover\">\n  @if (me) {\n    <div class=\"who\">\n      @if (me.photoUrl) {\n        <img class=\"who-photo\" [src]=\"me.photoUrl\" alt=\"\" width=\"42\" height=\"42\" />\n      } @else {\n        <span class=\"who-photo who-initials\">{{ initials() }}</span>\n      }\n      <span class=\"who-text\">\n        <span class=\"who-name\">{{ me.name }}</span>\n        <span class=\"who-mail\">{{ me.email }}</span>\n      </span>\n    </div>\n\n    <p class=\"who-role\">\n      <span class=\"who-dot\" aria-hidden=\"true\"></span>\n      @if (roleName(); as role) {\n        <b>{{ role }}</b>\n        <span class=\"who-sep\">\u00B7</span>\n      }\n      <span class=\"who-context\">{{ accountContext() }}</span>\n    </p>\n\n    <nucleus-menu\n      [sections]=\"accountSections()\"\n      [width]=\"304\"\n      (select)=\"onAccountSelect($event); account.hide()\"\n      (dismiss)=\"account.hide()\"\n    />\n  }\n</p-popover>\n\n<div class=\"body\">\n  @if (narrow() && sidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"sidebar-scrim\"\n      [attr.aria-label]=\"t.navToggle\"\n      (click)=\"toggleSidebar()\"\n    ></button>\n  }\n\n  <aside class=\"sidebar ns-frame\" [class.is-collapsed]=\"!sidebarOpen()\">\n    @if (roleName(); as role) {\n      <div class=\"role-badge\" [pTooltip]=\"sidebarOpen() ? '' : role\" tooltipPosition=\"right\">\n        <i class=\"pi pi-key\" aria-hidden=\"true\"></i>\n        <span class=\"nav-label role-text\">\n          <span class=\"role-name\">{{ role }}</span>\n          <span class=\"role-caption\">{{ t.roleCaption }}</span>\n        </span>\n      </div>\n    }\n\n    @if (navItems().length) {\n      <nav>\n        @for (item of navItems(); track item.id) {\n          <button\n            type=\"button\"\n            class=\"nav-item\"\n            [class.is-active]=\"activeNavId() === item.id\"\n            [attr.aria-current]=\"activeNavId() === item.id ? 'page' : null\"\n            [pTooltip]=\"sidebarOpen() ? '' : item.label\"\n            tooltipPosition=\"right\"\n            (click)=\"selectNav(item.id)\"\n          >\n            <i [class]=\"item.icon\" aria-hidden=\"true\"></i>\n            <span class=\"nav-label\">{{ item.label }}</span>\n          </button>\n        }\n      </nav>\n    }\n\n    <nav class=\"access-menu\">\n      @if (menuLoading()) {\n        <div class=\"nav-skeleton\" role=\"status\" [attr.aria-label]=\"t.accessLoading\">\n          @for (width of menuPlaceholders; track $index) {\n            <div class=\"nav-skeleton-item\">\n              <p-skeleton shape=\"circle\" size=\"15px\" />\n              <p-skeleton height=\"9px\" [width]=\"width\" />\n            </div>\n          }\n        </div>\n      } @else if (menuError()) {\n        <p class=\"access-state is-error\">{{ menuError() }}</p>\n      } @else if (!menu().length) {\n        <p class=\"access-state\">{{ t.accessEmpty }}</p>\n      } @else {\n        @for (node of menu(); track node.id) {\n          @let group = isGroup(node);\n          @let open = isExpanded(node);\n\n          <button\n            type=\"button\"\n            class=\"nav-item\"\n            [class.is-active]=\"!group && isSelected(node)\"\n            [class.is-inert]=\"!group && !node.route\"\n            [attr.aria-expanded]=\"group ? open : null\"\n            [disabled]=\"!group && !node.route\"\n            [pTooltip]=\"sidebarOpen() ? '' : node.label\"\n            tooltipPosition=\"right\"\n            (click)=\"selectMenu(node)\"\n          >\n            <i [class]=\"node.icon ?? 'pi pi-circle'\" aria-hidden=\"true\"></i>\n            <span class=\"nav-label\">{{ node.label }}</span>\n            @if (group && sidebarOpen()) {\n              <i\n                class=\"pi nav-caret\"\n                [class.pi-chevron-down]=\"open\"\n                [class.pi-chevron-right]=\"!open\"\n                aria-hidden=\"true\"\n              ></i>\n            }\n          </button>\n\n          @if (open) {\n            @for (child of node.children; track child.id) {\n              <button\n                type=\"button\"\n                class=\"nav-item is-child\"\n                [class.is-active]=\"isSelected(child)\"\n                [pTooltip]=\"sidebarOpen() ? '' : child.label\"\n                tooltipPosition=\"right\"\n                (click)=\"selectMenu(child)\"\n              >\n                <i [class]=\"child.icon ?? 'pi pi-circle'\" aria-hidden=\"true\"></i>\n                <span class=\"nav-label\">{{ child.label }}</span>\n              </button>\n            }\n          }\n        }\n      }\n    </nav>\n  </aside>\n\n  <main class=\"content\">\n    <div class=\"measure\">\n      <ng-content select=\"[nucleusTop]\" />\n\n      @if (crumbs().length || title() || pageActions()) {\n        <header class=\"page-head\">\n          <div class=\"page-head-main\">\n            @if (crumbs().length) {\n              <p-breadcrumb [model]=\"crumbs()\" [home]=\"home()\" styleClass=\"ns-crumbs\" />\n            }\n\n            @if (title()) {\n              <h1>{{ title() }}</h1>\n            }\n          </div>\n\n          @if (pageActions(); as actions) {\n            <div class=\"page-head-actions\">\n              <ng-container [ngTemplateOutlet]=\"actions\" />\n            </div>\n          }\n        </header>\n      }\n\n      <ng-content />\n    </div>\n  </main>\n</div>\n\n<p-drawer\n  [visible]=\"settingsOpen()\"\n  (visibleChange)=\"settingsOpen.set($event)\"\n  position=\"right\"\n  [header]=\"t.settingsTitle\"\n  [modal]=\"false\"\n  [blockScroll]=\"false\"\n  styleClass=\"ns-settings-drawer\"\n  [style]=\"{ width: '380px' }\"\n>\n  <nucleus-appearance />\n</p-drawer>\n\n<p-toast position=\"bottom-right\" styleClass=\"ns-toast\">\n  <ng-template #message let-message>\n    <nucleus-lordicon\n      [src]=\"message.severity === 'success' ? icons.check : icons.warning\"\n      [tone]=\"message.severity === 'success' ? 'accent' : 'danger'\"\n      [size]=\"34\"\n      trigger=\"in\"\n    />\n    <div class=\"toast-text\">\n      <p class=\"toast-summary\">{{ message.summary }}</p>\n      @if (message.detail) {\n        <p class=\"toast-detail\">{{ message.detail }}</p>\n      }\n    </div>\n  </ng-template>\n</p-toast>\n\n<p-confirmdialog [style]=\"{ width: '420px' }\">\n  <ng-template #headless let-message let-onAccept=\"onAccept\" let-onReject=\"onReject\">\n    <div class=\"confirm\">\n      <nucleus-lordicon\n        [src]=\"message.icon\"\n        [tone]=\"message.acceptButtonStyleClass ? 'danger' : 'accent'\"\n        [size]=\"64\"\n        trigger=\"loop\"\n      />\n      <h2>{{ message.header }}</h2>\n      <p>{{ message.message }}</p>\n      <div class=\"confirm-actions\">\n        <p-button\n          [label]=\"message.rejectLabel\"\n          severity=\"secondary\"\n          [text]=\"true\"\n          (onClick)=\"onReject()\"\n        />\n        <p-button\n          [label]=\"message.acceptLabel\"\n          [severity]=\"message.acceptButtonStyleClass ? 'danger' : 'primary'\"\n          (onClick)=\"onAccept()\"\n        />\n      </div>\n    </div>\n  </ng-template>\n</p-confirmdialog>\n", styles: [":host{display:flex;flex-direction:column;min-height:100dvh;background:var(--ac-bg);color:var(--ac-text)}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:flex-start;gap:16px;height:56px;padding:0 12px 0 8px;border-bottom:1px solid var(--ns-frame-line)}.side{display:flex;min-width:0;align-items:center;gap:4px}.side.is-end{margin-left:auto}.brand{display:flex;align-items:center;gap:9px;margin-left:4px}.brand-name{display:flex;align-items:baseline;gap:7px}.brand-primary{font-size:13px;font-weight:700;letter-spacing:.15em}.brand-secondary{font-size:9px;font-weight:500;letter-spacing:.22em;color:var(--ns-frame-muted)}.lang-switch{display:flex;align-items:center;gap:2px;margin-right:6px;border:1px solid var(--ns-frame-line);border-radius:999px;padding:2px}.lang-pill{font-size:10px;font-weight:600;letter-spacing:.08em;padding:4px 10px;border:none;border-radius:999px;background:transparent;color:var(--ns-frame-muted);cursor:pointer}.lang-pill:hover{color:var(--ns-frame-ink)}.lang-pill.is-active{background:var(--ns-frame-glow);color:var(--ns-frame-on-glow)}.body{display:flex;flex:1;min-height:0}.sidebar{flex:none;width:max-content;min-width:224px;max-width:340px;padding:12px 10px;border-right:1px solid var(--ns-frame-line);transition:width .18s ease}.sidebar.is-collapsed{width:60px;min-width:0}.sidebar nav{display:flex;flex-direction:column;gap:3px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:var(--ns-nav-y, 9px) 12px;border:none;border-radius:6px;background:transparent;color:var(--ns-frame-muted);font-size:13px;font-weight:500;text-align:left;white-space:nowrap;cursor:pointer}.nav-item i{flex:none;font-size:15px}.nav-item:hover{background:var(--ns-frame-raised);color:var(--ns-frame-ink)}.nav-item.is-active{background:var(--ns-frame-raised);box-shadow:inset 2px 0 0 var(--ns-frame-glow);color:var(--ns-frame-ink)}.nav-item.is-active i{color:var(--ns-frame-glow)}.nav-caret{margin-left:auto;font-size:11px!important;opacity:.7}.nav-item.is-inert{opacity:.45;cursor:default}.nav-item.is-inert:hover{background:transparent;color:var(--ns-frame-muted)}.nav-label{overflow:hidden;text-overflow:ellipsis}.sidebar.is-collapsed .nav-label{display:none}.sidebar.is-collapsed .nav-item{justify-content:center;padding-inline:0}.content{flex:1;min-width:0;padding:28px 28px 64px;display:flex;flex-direction:column;gap:14px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:7px 16px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1)}.page-head-main{display:flex;min-width:0;flex:1;align-items:center;gap:14px}.page-head-actions{display:flex;flex:none;align-items:center;gap:8px}.page-head h1{margin:0;font-size:19px;font-weight:600}.measure{display:flex;width:100%;max-width:var(--ac-content-max, 1440px);flex-direction:column;gap:14px;margin-inline:0}h1{margin:0;font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.02em}.access-menu{display:flex;flex-direction:column;gap:.15rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--ns-frame-line)}.access-caption{margin:0 0 .4rem;padding:0 .75rem;color:var(--ns-frame-muted);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.access-state{margin:0;padding:.35rem .75rem;color:var(--ns-frame-muted);font-size:.78rem}.access-state.is-error{color:var(--p-red-400, #f87171)}.nav-item.is-child{padding-left:2.1rem;font-size:.86rem}@media(max-width:720px){.sidebar{max-width:none;position:fixed;top:var(--ns-topbar-h, 56px);bottom:0;left:0;z-index:30;width:268px;max-width:82vw;overflow-y:auto;box-shadow:0 18px 44px #00000073;transform:translate(-100%);transition:transform .18s ease}.sidebar.is-collapsed{width:268px;max-width:82vw;transform:translate(-100%)}.sidebar:not(.is-collapsed){transform:translate(0)}.sidebar.is-collapsed .nav-label{display:inline}.sidebar.is-collapsed .role-text{display:flex}.sidebar.is-collapsed .nav-item,.sidebar.is-collapsed .role-badge{justify-content:flex-start;padding-inline:12px}.brand-secondary{display:none}.topbar{height:auto;min-height:56px;flex-wrap:wrap;padding-bottom:8px;row-gap:8px}.context{order:3;width:100%;margin-left:0}.context-select{min-width:0;max-width:none;flex:1 1 0}.content{padding:20px 16px 48px}h1{font-size:22px}.page-head{align-items:stretch;flex-direction:column;gap:10px;padding:10px 14px}.page-head-actions{justify-content:flex-end}}.who{display:flex;align-items:center;gap:12px;padding:15px 15px 13px;border-bottom:1px solid var(--ac-border);background:var(--ns-header-bg)}.who-photo{width:42px;height:42px;flex:none;border-radius:999px;object-fit:cover}.who-initials{display:inline-flex;align-items:center;justify-content:center;background:var(--ac-accent);color:var(--ac-on-accent);font-size:15px;font-weight:600}.who-text{display:flex;min-width:0;flex-direction:column}.who-name{overflow:hidden;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.who-mail{overflow:hidden;color:var(--ac-text-muted);font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}.who-role{display:flex;align-items:center;gap:7px;margin:0;overflow:hidden;padding:9px 15px;border-bottom:1px solid var(--ac-border);color:var(--ac-text-muted);font-size:11.5px;white-space:nowrap}.who-role b{flex:none;color:var(--ac-text);font-size:12px;font-weight:600}.who-sep{flex:none}.who-context{overflow:hidden;text-overflow:ellipsis}.who-dot{width:5px;height:5px;flex:none;border-radius:50%;background:var(--ac-accent)}.company-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}.company-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.launcher-notice{display:flex;gap:10px;margin:12px 12px 0;padding:12px;border:1px solid color-mix(in srgb,var(--ac-accent) 40%,transparent);border-radius:8px;background:color-mix(in srgb,var(--ac-accent) 10%,transparent)}.launcher-notice i{margin-top:2px;color:var(--ac-accent);font-size:15px}.launcher-notice-title{margin:0 0 4px;font-size:13px;font-weight:600}.launcher-notice-body{margin:0;color:var(--ac-text-muted);font-size:12px;line-height:1.45}.confirm{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 24px 20px;border:1px solid var(--ac-border);border-radius:14px;background:var(--ac-surface);text-align:center}.confirm h2{margin:8px 0 0;font-size:17px;font-weight:600}.confirm p{margin:0;max-width:34ch;color:var(--ac-text-muted);font-size:13px;line-height:1.5}.confirm-actions{display:flex;justify-content:center;gap:8px;margin-top:18px}.toast-text{flex:1;margin-left:12px}.toast-summary{margin:0;font-size:13px;font-weight:600}.toast-detail{margin:2px 0 0;color:var(--ac-text-muted);font-size:12px}.context{display:flex;min-width:0;align-items:center;gap:8px;margin-left:14px}.context-select{min-width:150px;max-width:210px}.role-badge{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:9px 12px;border-left:2px solid var(--ns-frame-glow);border-radius:0 7px 7px 0;background:var(--ns-frame-raised);box-shadow:-2px 0 12px -3px color-mix(in srgb,var(--ns-frame-glow) 65%,transparent)}.role-badge>i{flex:none;color:var(--ns-frame-glow);font-size:14px}.role-text{display:flex;min-width:0;flex-direction:column;gap:1px}.role-name{overflow:hidden;color:var(--ns-frame-ink);font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.role-caption{color:var(--ns-frame-muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.sidebar.is-collapsed .role-badge{justify-content:center;padding-inline:0}.sidebar-scrim{position:fixed;top:var(--ns-topbar-h, 56px);right:0;bottom:0;left:0;z-index:29;padding:0;border:0;background:#00000073;cursor:pointer}.nav-skeleton{display:flex;flex-direction:column;gap:3px}.nav-skeleton-item{display:flex;align-items:center;gap:12px;padding:11px 12px}.sidebar.is-collapsed .nav-skeleton-item .p-skeleton:last-child{display:none}\n"] }]
+                    ], host: { '[style.--ns-topbar-h]': 'topbarHeight()' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let t = copy();\n@let me = identity();\n\n@if (starfield()) {\n  <nucleus-starfield />\n}\n\n<header class=\"topbar ns-frame\">\n  <div class=\"side\">\n    <p-button\n      icon=\"pi pi-bars\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.navToggle\"\n      [pTooltip]=\"t.navToggle\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"toggleSidebar()\"\n    />\n\n    <div class=\"brand\">\n      <nucleus-mark [size]=\"20\" />\n      <div class=\"brand-name\">\n        <span class=\"brand-primary\">NUCLEUS</span>\n        <span class=\"brand-secondary\">{{ brand() }}</span>\n      </div>\n    </div>\n\n  </div>\n\n  @if (hasSiteContext()) {\n    <div class=\"context ns-context\">\n      <p-select\n        styleClass=\"context-select\"\n        [options]=\"companyChoices()\"\n        optionValue=\"id\"\n        optionLabel=\"name\"\n        [ngModel]=\"companyChoice()\"\n        (ngModelChange)=\"onCompanyChange($event)\"\n        [placeholder]=\"t.companyPlaceholder\"\n        [disabled]=\"switching()\"\n        [filter]=\"companyChoices().length > 8\"\n        filterBy=\"name\"\n        [filterPlaceholder]=\"words().search\"\n        [autofocusFilter]=\"true\"\n        [resetFilterOnHide]=\"true\"\n        [ariaLabel]=\"t.companyLabel\"\n        [ngModelOptions]=\"{ standalone: true }\"\n      >\n        <ng-template #item let-option>\n          <span class=\"company-option\">\n            <span class=\"company-name\">{{ option.name }}</span>\n            <p-tag [value]=\"option.tag\" severity=\"secondary\" />\n          </span>\n        </ng-template>\n      </p-select>\n\n      <p-select\n        styleClass=\"context-select\"\n        [options]=\"siteOptions()\"\n        optionValue=\"id\"\n        optionLabel=\"name\"\n        [ngModel]=\"siteChoice()\"\n        (ngModelChange)=\"onSiteChange($event)\"\n        [placeholder]=\"sitePlaceholder()\"\n        [disabled]=\"switching() || sitesLoading() || !siteOptions().length\"\n        [filter]=\"siteOptions().length > 8\"\n        filterBy=\"name\"\n        [filterPlaceholder]=\"words().search\"\n        [autofocusFilter]=\"true\"\n        [resetFilterOnHide]=\"true\"\n        [ariaLabel]=\"t.siteLabel\"\n        [ngModelOptions]=\"{ standalone: true }\"\n      />\n    </div>\n  }\n\n  <div class=\"side is-end\">\n    <div class=\"lang-switch\" role=\"group\" aria-label=\"Idioma / Language\">\n      <button\n        type=\"button\"\n        class=\"lang-pill\"\n        [class.is-active]=\"lang() === 'es'\"\n        [attr.aria-pressed]=\"lang() === 'es'\"\n        (click)=\"setLang('es')\"\n      >\n        ES\n      </button>\n      <button\n        type=\"button\"\n        class=\"lang-pill\"\n        [class.is-active]=\"lang() === 'en'\"\n        [attr.aria-pressed]=\"lang() === 'en'\"\n        (click)=\"setLang('en')\"\n      >\n        EN\n      </button>\n    </div>\n\n    <p-button\n      icon=\"pi pi-th-large\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.appsLauncher\"\n      [pTooltip]=\"t.appsLauncher\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"launcher.toggle($event)\"\n    />\n\n    <p-popover #launcher styleClass=\"ns-flush-popover\">\n      @if (!hasCompany()) {\n        <div class=\"launcher-notice\">\n          <i class=\"pi pi-building\" aria-hidden=\"true\"></i>\n          <div>\n            <p class=\"launcher-notice-title\">{{ t.noCompanyTitle }}</p>\n            <p class=\"launcher-notice-body\">{{ t.noCompanyHint }}</p>\n          </div>\n        </div>\n      }\n\n      <nucleus-menu\n        layout=\"grid\"\n        [heading]=\"t.appsSwitch\"\n        [sections]=\"launcherSections()\"\n        [searchable]=\"launcherRich()\"\n        [searchPlaceholder]=\"t.appsSearch\"\n        [emptyText]=\"launcherRich() ? t.appsNoMatch : t.appsEmpty\"\n        [keyboardHint]=\"t.keyboardHint\"\n        [width]=\"384\"\n        (select)=\"onLauncherSelect($event); launcher.hide()\"\n        (dismiss)=\"launcher.hide()\"\n      />\n    </p-popover>\n\n    <p-button\n      icon=\"pi pi-cog\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.settingsTitle\"\n      [pTooltip]=\"t.settingsTitle\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"settingsOpen.set(true)\"\n    />\n\n    @if (me) {\n      <p-button\n        severity=\"secondary\"\n        size=\"small\"\n        [text]=\"true\"\n        [rounded]=\"true\"\n        styleClass=\"avatar-trigger\"\n        [ariaLabel]=\"me.name\"\n        [pTooltip]=\"me.name\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"account.toggle($event)\"\n      >\n        <p-avatar\n          [image]=\"me.photoUrl ?? undefined\"\n          [label]=\"me.photoUrl ? undefined : initials()\"\n          shape=\"circle\"\n          size=\"normal\"\n        />\n      </p-button>\n    }\n  </div>\n</header>\n\n<p-popover #account styleClass=\"ns-flush-popover\">\n  @if (me) {\n    <div class=\"who\">\n      @if (me.photoUrl) {\n        <img class=\"who-photo\" [src]=\"me.photoUrl\" alt=\"\" width=\"42\" height=\"42\" />\n      } @else {\n        <span class=\"who-photo who-initials\">{{ initials() }}</span>\n      }\n      <span class=\"who-text\">\n        <span class=\"who-name\">{{ me.name }}</span>\n        <span class=\"who-mail\">{{ me.email }}</span>\n      </span>\n    </div>\n\n    <p class=\"who-role\">\n      <span class=\"who-dot\" aria-hidden=\"true\"></span>\n      @if (roleName(); as role) {\n        <b>{{ role }}</b>\n        <span class=\"who-sep\">\u00B7</span>\n      }\n      <span class=\"who-context\">{{ accountContext() }}</span>\n    </p>\n\n    <nucleus-menu\n      [sections]=\"accountSections()\"\n      [width]=\"304\"\n      (select)=\"onAccountSelect($event); account.hide()\"\n      (dismiss)=\"account.hide()\"\n    />\n  }\n</p-popover>\n\n<div class=\"body\">\n  @if (narrow() && sidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"sidebar-scrim\"\n      [attr.aria-label]=\"t.navToggle\"\n      (click)=\"toggleSidebar()\"\n    ></button>\n  }\n\n  <aside class=\"sidebar ns-frame\" [class.is-collapsed]=\"!sidebarOpen()\">\n    @if (roleName(); as role) {\n      <div class=\"role-badge\" [pTooltip]=\"sidebarOpen() ? '' : role\" tooltipPosition=\"right\">\n        <i class=\"pi pi-key\" aria-hidden=\"true\"></i>\n        <span class=\"nav-label role-text\">\n          <span class=\"role-name\">{{ role }}</span>\n          <span class=\"role-caption\">{{ t.roleCaption }}</span>\n        </span>\n      </div>\n    }\n\n    @if (navItems().length) {\n      <nav>\n        @for (item of navItems(); track item.id) {\n          <button\n            type=\"button\"\n            class=\"nav-item\"\n            [class.is-active]=\"activeNavId() === item.id\"\n            [attr.aria-current]=\"activeNavId() === item.id ? 'page' : null\"\n            [pTooltip]=\"sidebarOpen() ? '' : item.label\"\n            tooltipPosition=\"right\"\n            (click)=\"selectNav(item.id)\"\n          >\n            <i [class]=\"item.icon\" aria-hidden=\"true\"></i>\n            <span class=\"nav-label\">{{ item.label }}</span>\n          </button>\n        }\n      </nav>\n    }\n\n    <nav class=\"access-menu\">\n      @if (menuLoading()) {\n        <div class=\"nav-skeleton\" role=\"status\" [attr.aria-label]=\"t.accessLoading\">\n          @for (width of menuPlaceholders; track $index) {\n            <div class=\"nav-skeleton-item\">\n              <p-skeleton shape=\"circle\" size=\"15px\" />\n              <p-skeleton height=\"9px\" [width]=\"width\" />\n            </div>\n          }\n        </div>\n      } @else if (menuError()) {\n        <p class=\"access-state is-error\">{{ menuError() }}</p>\n      } @else if (!menu().length) {\n        <p class=\"access-state\">{{ t.accessEmpty }}</p>\n      } @else {\n        @for (node of menu(); track node.id) {\n          @let group = isGroup(node);\n          @let open = isExpanded(node);\n\n          <button\n            type=\"button\"\n            class=\"nav-item\"\n            [class.is-active]=\"!group && isSelected(node)\"\n            [class.is-inert]=\"!group && !node.route\"\n            [attr.aria-expanded]=\"group ? open : null\"\n            [disabled]=\"!group && !node.route\"\n            [pTooltip]=\"sidebarOpen() ? '' : node.label\"\n            tooltipPosition=\"right\"\n            (click)=\"selectMenu(node)\"\n          >\n            <i [class]=\"node.icon ?? 'pi pi-circle'\" aria-hidden=\"true\"></i>\n            <span class=\"nav-label\">{{ node.label }}</span>\n            @if (group && sidebarOpen()) {\n              <i\n                class=\"pi nav-caret\"\n                [class.pi-chevron-down]=\"open\"\n                [class.pi-chevron-right]=\"!open\"\n                aria-hidden=\"true\"\n              ></i>\n            }\n          </button>\n\n          @if (open) {\n            @for (child of node.children; track child.id) {\n              <button\n                type=\"button\"\n                class=\"nav-item is-child\"\n                [class.is-active]=\"isSelected(child)\"\n                [pTooltip]=\"sidebarOpen() ? '' : child.label\"\n                tooltipPosition=\"right\"\n                (click)=\"selectMenu(child)\"\n              >\n                <i [class]=\"child.icon ?? 'pi pi-circle'\" aria-hidden=\"true\"></i>\n                <span class=\"nav-label\">{{ child.label }}</span>\n              </button>\n            }\n          }\n        }\n      }\n    </nav>\n  </aside>\n\n  <main class=\"content\">\n    <div class=\"measure\">\n      <ng-content select=\"[nucleusTop]\" />\n\n      @if (crumbs().length || title() || pageActions()) {\n        <header class=\"page-head\">\n          <div class=\"page-head-main\">\n            @if (crumbs().length) {\n              <p-breadcrumb [model]=\"crumbs()\" [home]=\"home()\" styleClass=\"ns-crumbs\" />\n            }\n\n            @if (title()) {\n              <h1>{{ title() }}</h1>\n            }\n          </div>\n\n          @if (pageActions(); as actions) {\n            <div class=\"page-head-actions\">\n              <ng-container [ngTemplateOutlet]=\"actions\" />\n            </div>\n          }\n        </header>\n      }\n\n      <ng-content />\n    </div>\n  </main>\n</div>\n\n<p-drawer\n  [visible]=\"settingsOpen()\"\n  (visibleChange)=\"settingsOpen.set($event)\"\n  position=\"right\"\n  [header]=\"t.settingsTitle\"\n  [modal]=\"false\"\n  [blockScroll]=\"false\"\n  styleClass=\"ns-settings-drawer\"\n  [style]=\"{ width: '380px' }\"\n>\n  <nucleus-appearance />\n</p-drawer>\n\n<p-toast position=\"bottom-right\" styleClass=\"ns-toast\">\n  <ng-template #message let-message>\n    <nucleus-lordicon\n      [src]=\"message.severity === 'success' ? icons.check : icons.warning\"\n      [tone]=\"message.severity === 'success' ? 'accent' : 'danger'\"\n      [size]=\"34\"\n      trigger=\"in\"\n    />\n    <div class=\"toast-text\">\n      <p class=\"toast-summary\">{{ message.summary }}</p>\n      @if (message.detail) {\n        <p class=\"toast-detail\">{{ message.detail }}</p>\n      }\n    </div>\n  </ng-template>\n</p-toast>\n\n<p-confirmdialog [style]=\"{ width: '420px' }\">\n  <ng-template #headless let-message let-onAccept=\"onAccept\" let-onReject=\"onReject\">\n    <div class=\"confirm\">\n      <nucleus-lordicon\n        [src]=\"message.icon\"\n        [tone]=\"message.acceptButtonStyleClass ? 'danger' : 'accent'\"\n        [size]=\"64\"\n        trigger=\"loop\"\n      />\n      <h2>{{ message.header }}</h2>\n      <p>{{ message.message }}</p>\n      <div class=\"confirm-actions\">\n        <p-button\n          [label]=\"message.rejectLabel\"\n          severity=\"secondary\"\n          [text]=\"true\"\n          (onClick)=\"onReject()\"\n        />\n        <p-button\n          [label]=\"message.acceptLabel\"\n          [severity]=\"message.acceptButtonStyleClass ? 'danger' : 'primary'\"\n          (onClick)=\"onAccept()\"\n        />\n      </div>\n    </div>\n  </ng-template>\n</p-confirmdialog>\n", styles: [":host{display:flex;flex-direction:column;min-height:100dvh;background:var(--ac-bg);color:var(--ac-text)}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:flex-start;gap:16px;height:56px;padding:0 12px 0 8px;border-bottom:1px solid var(--ns-frame-line)}.side{display:flex;min-width:0;align-items:center;gap:4px}.side.is-end{margin-left:auto}.brand{display:flex;align-items:center;gap:9px;margin-left:4px}.brand-name{display:flex;align-items:baseline;gap:7px}.brand-primary{font-size:13px;font-weight:700;letter-spacing:.15em}.brand-secondary{font-size:9px;font-weight:var(--ns-weight-emphasis);letter-spacing:.22em;color:var(--ns-frame-muted)}.lang-switch{display:flex;align-items:center;gap:2px;margin-right:6px;border:1px solid var(--ns-frame-line);border-radius:999px;padding:2px}.lang-pill{font-size:10px;font-weight:var(--ns-weight-emphasis);letter-spacing:.08em;padding:4px 10px;border:none;border-radius:999px;background:transparent;color:var(--ns-frame-muted);cursor:pointer}.lang-pill:hover{color:var(--ns-frame-ink)}.lang-pill.is-active{background:var(--ns-frame-glow);color:var(--ns-frame-on-glow)}.body{display:flex;flex:1;min-height:0}.sidebar{flex:none;width:max-content;min-width:224px;max-width:340px;padding:12px 10px;border-right:1px solid var(--ns-frame-line);transition:width .18s ease}.sidebar.is-collapsed{width:60px;min-width:0}.sidebar nav{display:flex;flex-direction:column;gap:3px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:var(--ns-nav-y, 9px) 12px;border:none;border-radius:6px;background:transparent;color:var(--ns-frame-muted);font-size:13px;font-weight:var(--ns-weight-text);text-align:left;white-space:nowrap;cursor:pointer}.nav-item i{flex:none;font-size:15px}.nav-item:hover{background:var(--ns-frame-raised);color:var(--ns-frame-ink)}.nav-item.is-active{background:var(--ns-nav-active-bg, var(--ns-frame-raised));color:var(--ns-nav-active-ink, var(--ns-frame-ink));font-weight:var(--ns-weight-emphasis)}.nav-item.is-active i{color:inherit}.nav-caret{margin-left:auto;font-size:11px!important;opacity:.7}.nav-item.is-inert{opacity:.45;cursor:default}.nav-item.is-inert:hover{background:transparent;color:var(--ns-frame-muted)}.nav-label{overflow:hidden;text-overflow:ellipsis}.sidebar.is-collapsed .nav-label{display:none}.sidebar.is-collapsed .nav-item{justify-content:center;padding-inline:0}.content{flex:1;min-width:0;padding:28px 28px 64px;display:flex;flex-direction:column;gap:14px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:7px 16px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1)}.page-head-main{display:flex;min-width:0;flex:1;align-items:center;gap:14px}.page-head-actions{display:flex;flex:none;align-items:center;gap:8px}.page-head h1{margin:0;font-size:19px;font-weight:var(--ns-weight-heading)}.measure{display:flex;width:100%;max-width:var(--ac-content-max, 1440px);flex-direction:column;gap:14px;margin-inline:0}h1{margin:0;font-size:26px;line-height:1.2;font-weight:var(--ns-weight-emphasis);letter-spacing:-.02em}.access-menu{display:flex;flex-direction:column;gap:.15rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--ns-frame-line)}.access-caption{margin:0 0 .4rem;padding:0 .75rem;color:var(--ns-frame-muted);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.access-state{margin:0;padding:.35rem .75rem;color:var(--ns-frame-muted);font-size:.78rem}.access-state.is-error{color:var(--p-red-400, #f87171)}.nav-item.is-child{padding-left:2.1rem;font-size:.86rem}@media(max-width:720px){.sidebar{max-width:none;position:fixed;top:var(--ns-topbar-h, 56px);bottom:0;left:0;z-index:30;width:268px;max-width:82vw;overflow-y:auto;box-shadow:0 18px 44px #00000073;transform:translate(-100%);transition:transform .18s ease}.sidebar.is-collapsed{width:268px;max-width:82vw;transform:translate(-100%)}.sidebar:not(.is-collapsed){transform:translate(0)}.sidebar.is-collapsed .nav-label{display:inline}.sidebar.is-collapsed .role-text{display:flex}.sidebar.is-collapsed .nav-item,.sidebar.is-collapsed .role-badge{justify-content:flex-start;padding-inline:12px}.brand-secondary{display:none}.topbar{height:auto;min-height:56px;flex-wrap:wrap;padding-bottom:8px;row-gap:8px}.context{order:3;width:100%;margin-left:0}.context-select{min-width:0;max-width:none;flex:1 1 0}.content{padding:20px 16px 48px}h1{font-size:22px}.page-head{gap:10px;min-height:42px;padding:7px 12px}.page-head-main{gap:8px}.page-head h1{overflow:hidden;min-width:0;font-size:16px;text-overflow:ellipsis;white-space:nowrap}.page-head-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px}.page-head-actions ::ng-deep .p-button{padding-block:6px;padding-inline:11px;font-size:13px;white-space:nowrap}.page-head-actions ::ng-deep .p-button-icon{font-size:13px}}.who{display:flex;align-items:center;gap:12px;margin:6px 6px 0;padding:12px;border-radius:10px;background:var(--ac-text);color:var(--ac-surface)}.who-photo{width:42px;height:42px;flex:none;border-radius:999px;object-fit:cover}.who-initials{display:inline-flex;align-items:center;justify-content:center;background:var(--ac-accent);color:var(--ac-on-accent);font-size:15px;font-weight:var(--ns-weight-emphasis)}.who-text{display:flex;min-width:0;flex-direction:column}.who-name{overflow:hidden;font-size:14px;font-weight:var(--ns-weight-emphasis);text-overflow:ellipsis;white-space:nowrap}.who-mail{overflow:hidden;color:color-mix(in srgb,currentColor 64%,transparent);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.who-role{display:flex;align-items:center;gap:7px;margin:0;overflow:hidden;padding:11px 17px 5px;color:var(--ac-text-muted);font-size:12px;white-space:nowrap}.who-role b{flex:none;color:var(--ac-text);font-size:12px;font-weight:var(--ns-weight-emphasis)}.who-sep{flex:none}.who-context{overflow:hidden;text-overflow:ellipsis}.who-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--ns-success)}.company-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}.company-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.launcher-notice{display:flex;gap:10px;margin:12px 12px 0;padding:12px;border:1px solid color-mix(in srgb,var(--ac-accent) 40%,transparent);border-radius:8px;background:color-mix(in srgb,var(--ac-accent) 10%,transparent)}.launcher-notice i{margin-top:2px;color:var(--ac-accent);font-size:15px}.launcher-notice-title{margin:0 0 4px;font-size:13px;font-weight:var(--ns-weight-emphasis)}.launcher-notice-body{margin:0;color:var(--ac-text-muted);font-size:12px;line-height:1.45}.confirm{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 24px 20px;border:1px solid var(--ac-border);border-radius:14px;background:var(--ac-surface);text-align:center}.confirm h2{margin:8px 0 0;font-size:17px;font-weight:var(--ns-weight-heading)}.confirm p{margin:0;max-width:34ch;color:var(--ac-text-muted);font-size:13px;line-height:1.5}.confirm-actions{display:flex;justify-content:center;gap:8px;margin-top:18px}.toast-text{flex:1;margin-left:12px}.toast-summary{margin:0;font-size:13px;font-weight:var(--ns-weight-emphasis)}.toast-detail{margin:2px 0 0;color:var(--ac-text-muted);font-size:12px}.context{display:flex;min-width:0;align-items:center;gap:8px;margin-left:14px}.context-select{min-width:150px;max-width:210px}.role-badge{display:flex;align-items:center;gap:12px;padding:4px 12px 2px}.role-badge>i{flex:none;color:var(--ns-frame-muted);font-size:14px}.role-text{display:flex;min-width:0;flex-direction:column;gap:1px}.role-name{overflow:hidden;color:var(--ns-frame-ink);font-size:13px;font-weight:var(--ns-weight-emphasis);text-overflow:ellipsis;white-space:nowrap}.role-caption{color:var(--ns-frame-muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.sidebar.is-collapsed .role-badge{justify-content:center;padding-inline:0}.sidebar-scrim{position:fixed;top:var(--ns-topbar-h, 56px);right:0;bottom:0;left:0;z-index:29;padding:0;border:0;background:#00000073;cursor:pointer}.nav-skeleton{display:flex;flex-direction:column;gap:3px}.nav-skeleton-item{display:flex;align-items:center;gap:12px;padding:11px 12px}.sidebar.is-collapsed .nav-skeleton-item .p-skeleton:last-child{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], activeNavId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeNavId", required: false }] }], selectedMenuId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedMenuId", required: false }] }], navSelect: [{ type: i0.Output, args: ["navSelect"] }], menuSelect: [{ type: i0.Output, args: ["menuSelect"] }] } });
+function shortAppName(name) {
+    if (!name.startsWith(SUITE_PREFIX))
+        return name;
+    return name.slice(SUITE_PREFIX.length).trim() || name;
+}
 function initialsOf(source) {
     const parts = source.trim().split(/\s+/).filter(Boolean);
     if (!parts.length)
@@ -3935,5 +4340,5 @@ function homeNode(route, label) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCENTS, CANVASES, COMMON_COPY, CONTROL_CONTRAST, DEFAULT_APPEARANCE, DENSITIES, EMPTY_GEO_VALUE, FIELD_TARGETS, FRAMES, GEO_COPY, LEGACY_THEMES, NO_PERMISSIONS, NUCLEUS_ACCENTS, NUCLEUS_CONFIG, NUCLEUS_DARK_SELECTOR, NUCLEUS_FORCE_BEARER, NUCLEUS_HOME, NUCLEUS_ICONS, NUCLEUS_ICON_CATALOG, NUCLEUS_LANGS, NUCLEUS_LOGOUT_PARAM, NUCLEUS_SKIP_AUTH, NucleusAppearance, NucleusAuth, NucleusCache, NucleusCard, NucleusCell, NucleusColorPicker, NucleusEnterAdvance, NucleusFeedback, NucleusForm, NucleusGeo, NucleusGeoSelect, NucleusIconPicker, NucleusLanguage, NucleusList, NucleusLordicon, NucleusMark, NucleusMenu, NucleusMetric, NucleusMetrics, NucleusPage, NucleusPageActions, NucleusPreset, NucleusRecentApps, NucleusSessionAuth, NucleusShell, NucleusShortcut, NucleusShortcuts, NucleusStarfield, NucleusTabs, SHELL_COPY, SessionService, TEXT_CONTRAST, THEME_COPY, ThemeService, UserSyncService, accentById, accentLabelOf, accentOn, ariaKeysOf, auditAppearance, canvasById, clock, comboOf, commonCopyOf, consumeNucleusLogout, contrastIssue, contrastRatio, day, densityById, endOfDayUtc, fieldsIn, findMenuByRoute, flagOf, foldText, frameById, geoCopyOf, hasChildren, hasModifier, iconClassOf, iconNameOf, integer, isAccentPreference, isApplePlatform, isBeforeToday, isCanvasPreference, isDarkCanvas, isDensityId, isFieldSearchable, isFrameId, isHomeRoute, isNucleusConfigured, isOnOrBeforeToday, isReachable, isToday, isTypingTarget, isUnderRoute, isoDay, levelLabel, loadLordicon, loadNucleusConfig, matchMenuByRoute, matchesRow, meetsContrast, menuGlyph, menuTile, minutesAsClock, mixHex, money, moveTo, normalizeHomeRoute, normalizeKeys, nucleusAccessGuard, nucleusAuthInterceptor, nucleusErrorMessage, nucleusLang, nucleusLogoutUrl, nucleusParseDate, ownsUrl, percent, permissionsOf, provideNucleus, provideNucleusFeedback, provideNucleusHome, provideNucleusTheme, qty, readableOn, relativeLuminance, resolveAccent, resolveFieldSize, routePath, searchIcons, selectableRows, shiftDay, shortcutHint, signedMoney, stamp, startOfDayUtc, themeCopyOf, toNumber, toggleCollapsed, visibleTreeRows };
+export { ACCENTS, CANVASES, COMMON_COPY, CONTROL_CONTRAST, DEFAULT_APPEARANCE, DENSITIES, EMPTY_GEO_VALUE, FIELD_TARGETS, FRAMES, GEO_COPY, LEGACY_THEMES, NO_PERMISSIONS, NUCLEUS_ACCENTS, NUCLEUS_CONFIG, NUCLEUS_DARK_SELECTOR, NUCLEUS_FORCE_BEARER, NUCLEUS_HOME, NUCLEUS_ICONS, NUCLEUS_ICON_CATALOG, NUCLEUS_LANGS, NUCLEUS_LOGOUT_PARAM, NUCLEUS_NARROW_QUERY, NUCLEUS_SKIP_AUTH, NucleusAppearance, NucleusAuth, NucleusBytes, NucleusCache, NucleusCard, NucleusCell, NucleusColorPicker, NucleusCompact, NucleusEnterAdvance, NucleusFeedback, NucleusForm, NucleusGeo, NucleusGeoSelect, NucleusIconPicker, NucleusLanguage, NucleusLink, NucleusList, NucleusLordicon, NucleusMark, NucleusMegabytes, NucleusMenu, NucleusMetric, NucleusMetrics, NucleusPage, NucleusPageActions, NucleusPreset, NucleusRecentApps, NucleusSessionAuth, NucleusShell, NucleusShortcut, NucleusShortcuts, NucleusStarfield, NucleusTabs, NucleusViewport, SHELL_COPY, SessionService, TEXT_CONTRAST, THEME_COPY, ThemeService, UserSyncService, accentById, accentLabelOf, accentOn, ariaKeysOf, auditAppearance, canvasById, clock, comboOf, commonCopyOf, compactBytes, compactMegabytes, compactNumber, consumeNucleusLogout, contrastIssue, contrastRatio, day, densityById, endOfDayUtc, fieldsIn, findMenuByRoute, flagOf, foldText, frameById, geoCopyOf, hasChildren, hasModifier, iconClassOf, iconNameOf, integer, isAccentPreference, isApplePlatform, isBeforeToday, isCanvasPreference, isDarkCanvas, isDensityId, isFieldSearchable, isFrameId, isHomeRoute, isNucleusConfigured, isOnOrBeforeToday, isReachable, isToday, isTypingTarget, isUnderRoute, isoDay, levelLabel, loadLordicon, loadNucleusConfig, matchMenuByRoute, matchesRow, meetsContrast, menuGlyph, menuTile, minutesAsClock, mixHex, money, moveTo, normalizeHomeRoute, normalizeKeys, nucleusAccessGuard, nucleusAuthInterceptor, nucleusErrorMessage, nucleusLang, nucleusLogoutUrl, nucleusParseDate, ownsUrl, percent, permissionsOf, provideNucleus, provideNucleusFeedback, provideNucleusHome, provideNucleusTheme, qty, readableOn, relativeLuminance, resolveAccent, resolveFieldSize, routePath, searchIcons, selectableRows, shiftDay, shortcutHint, signedMoney, stamp, startOfDayUtc, themeCopyOf, toNumber$1 as toNumber, toggleCollapsed, visibleTreeRows };
 //# sourceMappingURL=nucleus-suite-pe-core.mjs.map