@flusys/ng-ui 6.0.1 → 6.1.0

package/fesm2022/flusys-ng-ui.mjs

@@ -10118,6 +10118,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     template: `<div [class]="'flex flex-col h-full ' + styleClass()" [style]="style()"><ng-content /></div>`,
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onTabChange: [{ type: i0.Output, args: ["onTabChange"] }] } });
+// ─── Tab — individual clickable tab button ────────────────────────────────────
+// Declared before TabListComponent: its content-query predicate below must
+// reference an already-declared class, otherwise the compiled query metadata
+// resolves the predicate as undefined.
+class TabComponent {
+    ctx = inject(TabsContext);
+    buttonRef = viewChild('btn', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonRef" }] : /* istanbul ignore next */ []));
+    value = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    closable = input(false, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    isActive = computed(() => this.ctx.active() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    onClose = output();
+    triggerId = computed(() => `f-tab-trigger-${this.value()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+    panelId = computed(() => `f-tab-panel-${this.value()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+    hostClass = computed(() => {
+        const base = 'inline-flex items-stretch border-b-[2.5px] -mb-px transition-all duration-[var(--f-transition-duration)]';
+        return this.isActive() ? `${base} border-primary` : `${base} border-transparent hover:border-(--f-content-border-color)`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    tabClass = computed(() => {
+        const base = 'px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-all duration-[var(--f-transition-duration)] inline-flex items-center gap-1.5 focus:outline-none focus-visible:ring-focus cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 select-none';
+        return this.isActive()
+            ? `${base} text-primary`
+            : `${base} text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background)/60`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabClass" }] : /* istanbul ignore next */ []));
+    buttonEl() {
+        return this.buttonRef()?.nativeElement;
+    }
+    focusButton() {
+        this.buttonRef()?.nativeElement.focus();
+    }
+    onClick() {
+        if (!this.disabled())
+            this.ctx.setActive(this.value());
+    }
+    onCloseClick(e) {
+        e.stopPropagation();
+        this.onClose.emit({ originalEvent: e, value: this.value() });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabComponent, isStandalone: true, selector: "f-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, host: { properties: { "class": "hostClass()" } }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["btn"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button
+      #btn
+      type="button"
+      role="tab"
+      [class]="tabClass()"
+      [disabled]="disabled()"
+      [id]="triggerId()"
+      [attr.aria-controls]="panelId()"
+      [attr.aria-selected]="isActive() ? 'true' : 'false'"
+      [attr.tabindex]="isActive() ? 0 : -1"
+      (click)="onClick()"
+    >
+      <ng-content />
+    </button>
+    @if (closable()) {
+      <button
+        type="button"
+        aria-label="Close"
+        class="w-4 h-4 my-auto mr-2 flex items-center justify-center rounded-full hover:bg-(--f-content-border-color) text-(--f-text-muted-color) hover:text-(--f-text-hover-color) transition-all duration-[var(--f-transition-duration)] cursor-pointer focus:outline-none focus-visible:ring-focus"
+        (click)="onCloseClick($event)"
+      >
+        <ui-icon name="times" class="text-[9px]"></ui-icon>
+      </button>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'f-tab',
+                    imports: [UiIconComponent],
+                    host: { '[class]': 'hostClass()' },
+                    template: `
+    <button
+      #btn
+      type="button"
+      role="tab"
+      [class]="tabClass()"
+      [disabled]="disabled()"
+      [id]="triggerId()"
+      [attr.aria-controls]="panelId()"
+      [attr.aria-selected]="isActive() ? 'true' : 'false'"
+      [attr.tabindex]="isActive() ? 0 : -1"
+      (click)="onClick()"
+    >
+      <ng-content />
+    </button>
+    @if (closable()) {
+      <button
+        type="button"
+        aria-label="Close"
+        class="w-4 h-4 my-auto mr-2 flex items-center justify-center rounded-full hover:bg-(--f-content-border-color) text-(--f-text-muted-color) hover:text-(--f-text-hover-color) transition-all duration-[var(--f-transition-duration)] cursor-pointer focus:outline-none focus-visible:ring-focus"
+        (click)="onCloseClick($event)"
+      >
+        <ui-icon name="times" class="text-[9px]"></ui-icon>
+      </button>
+    }
+  `,
+                }]
+        }], propDecorators: { buttonRef: [{ type: i0.ViewChild, args: ['btn', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
 // ─── TabList — wraps tab buttons, with optional scroll navigators ────────────
 class TabListComponent {
     ctx = inject(TabsContext);
@@ -10258,110 +10365,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
   `,
                 }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], scrollContainerRef: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }] } });
-// ─── Tab — individual clickable tab button ────────────────────────────────────
-class TabComponent {
-    ctx = inject(TabsContext);
-    buttonRef = viewChild('btn', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "buttonRef" }] : /* istanbul ignore next */ []));
-    value = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    closable = input(false, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    isActive = computed(() => this.ctx.active() === this.value(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
-    onClose = output();
-    triggerId = computed(() => `f-tab-trigger-${this.value()}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
-    panelId = computed(() => `f-tab-panel-${this.value()}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
-    hostClass = computed(() => {
-        const base = 'inline-flex items-stretch border-b-[2.5px] -mb-px transition-all duration-[var(--f-transition-duration)]';
-        return this.isActive() ? `${base} border-primary` : `${base} border-transparent hover:border-(--f-content-border-color)`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
-    tabClass = computed(() => {
-        const base = 'px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-all duration-[var(--f-transition-duration)] inline-flex items-center gap-1.5 focus:outline-none focus-visible:ring-focus cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 select-none';
-        return this.isActive()
-            ? `${base} text-primary`
-            : `${base} text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background)/60`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tabClass" }] : /* istanbul ignore next */ []));
-    buttonEl() {
-        return this.buttonRef()?.nativeElement;
-    }
-    focusButton() {
-        this.buttonRef()?.nativeElement.focus();
-    }
-    onClick() {
-        if (!this.disabled())
-            this.ctx.setActive(this.value());
-    }
-    onCloseClick(e) {
-        e.stopPropagation();
-        this.onClose.emit({ originalEvent: e, value: this.value() });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabComponent, isStandalone: true, selector: "f-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, host: { properties: { "class": "hostClass()" } }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["btn"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <button
-      #btn
-      type="button"
-      role="tab"
-      [class]="tabClass()"
-      [disabled]="disabled()"
-      [id]="triggerId()"
-      [attr.aria-controls]="panelId()"
-      [attr.aria-selected]="isActive() ? 'true' : 'false'"
-      [attr.tabindex]="isActive() ? 0 : -1"
-      (click)="onClick()"
-    >
-      <ng-content />
-    </button>
-    @if (closable()) {
-      <button
-        type="button"
-        aria-label="Close"
-        class="w-4 h-4 my-auto mr-2 flex items-center justify-center rounded-full hover:bg-(--f-content-border-color) text-(--f-text-muted-color) hover:text-(--f-text-hover-color) transition-all duration-[var(--f-transition-duration)] cursor-pointer focus:outline-none focus-visible:ring-focus"
-        (click)="onCloseClick($event)"
-      >
-        <ui-icon name="times" class="text-[9px]"></ui-icon>
-      </button>
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'f-tab',
-                    imports: [UiIconComponent],
-                    host: { '[class]': 'hostClass()' },
-                    template: `
-    <button
-      #btn
-      type="button"
-      role="tab"
-      [class]="tabClass()"
-      [disabled]="disabled()"
-      [id]="triggerId()"
-      [attr.aria-controls]="panelId()"
-      [attr.aria-selected]="isActive() ? 'true' : 'false'"
-      [attr.tabindex]="isActive() ? 0 : -1"
-      (click)="onClick()"
-    >
-      <ng-content />
-    </button>
-    @if (closable()) {
-      <button
-        type="button"
-        aria-label="Close"
-        class="w-4 h-4 my-auto mr-2 flex items-center justify-center rounded-full hover:bg-(--f-content-border-color) text-(--f-text-muted-color) hover:text-(--f-text-hover-color) transition-all duration-[var(--f-transition-duration)] cursor-pointer focus:outline-none focus-visible:ring-focus"
-        (click)="onCloseClick($event)"
-      >
-        <ui-icon name="times" class="text-[9px]"></ui-icon>
-      </button>
-    }
-  `,
-                }]
-        }], propDecorators: { buttonRef: [{ type: i0.ViewChild, args: ['btn', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
 // ─── TabPanels — wrapper around individual panels ─────────────────────────────
 class TabPanelsComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabPanelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -10468,6 +10471,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Injectable
         }] });
 
+// ─── AccordionHeader — reads panel context, triggers toggle ───────────────────
+// Declared before AccordionComponent: its content-query predicate below must
+// reference an already-declared class, otherwise the compiled query metadata
+// resolves the predicate as undefined.
+class AccordionHeaderComponent {
+    panelCtx = inject(AccordionPanelCtx);
+    accordionCtx = inject(AccordionContext, { optional: true });
+    buttonRef = viewChild('btn', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonRef" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.panelCtx.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    headerId = computed(() => `${this.accordionCtx?.id ?? 'f-accordion'}-header-${this.panelCtx.value()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerId" }] : /* istanbul ignore next */ []));
+    contentId = computed(() => `${this.accordionCtx?.id ?? 'f-accordion'}-content-${this.panelCtx.value()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    buttonEl() {
+        return this.buttonRef()?.nativeElement;
+    }
+    focusButton() {
+        this.buttonRef()?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AccordionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: AccordionHeaderComponent, isStandalone: true, selector: "f-accordion-header", viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["btn"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button
+      #btn
+      type="button"
+      class="w-full flex items-center justify-between px-5 py-3.5 text-sm font-semibold text-(--f-text-color) hover:bg-(--f-content-hover-background)/80 transition-all duration-[var(--f-transition-duration)] text-left select-none focus:outline-none focus-visible:ring-focus cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
+      [id]="headerId()"
+      [disabled]="panelCtx.disabled()"
+      [attr.aria-expanded]="panelCtx.open()"
+      [attr.aria-controls]="contentId()"
+      (click)="panelCtx.toggle()"
+    >
+      <span class="flex-1 tracking-tight"><ng-content /></span>
+      <ui-icon
+        name="chevron-down"
+        class="text-xs text-(--f-text-muted-color) ml-3 shrink-0 transition-transform duration-200"
+        [class.rotate-180]="panelCtx.open()"
+      ></ui-icon>
+    </button>
+  `, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AccordionHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'f-accordion-header',
+                    imports: [UiIconComponent],
+                    template: `
+    <button
+      #btn
+      type="button"
+      class="w-full flex items-center justify-between px-5 py-3.5 text-sm font-semibold text-(--f-text-color) hover:bg-(--f-content-hover-background)/80 transition-all duration-[var(--f-transition-duration)] text-left select-none focus:outline-none focus-visible:ring-focus cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
+      [id]="headerId()"
+      [disabled]="panelCtx.disabled()"
+      [attr.aria-expanded]="panelCtx.open()"
+      [attr.aria-controls]="contentId()"
+      (click)="panelCtx.toggle()"
+    >
+      <span class="flex-1 tracking-tight"><ng-content /></span>
+      <ui-icon
+        name="chevron-down"
+        class="text-xs text-(--f-text-muted-color) ml-3 shrink-0 transition-transform duration-200"
+        [class.rotate-180]="panelCtx.open()"
+      ></ui-icon>
+    </button>
+  `,
+                }]
+        }], propDecorators: { buttonRef: [{ type: i0.ViewChild, args: ['btn', { isSignal: true }] }] } });
 // ─── Accordion root — provides context ────────────────────────────────────────
 class AccordionComponent {
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -10482,8 +10553,7 @@ class AccordionComponent {
     onTabChange = output();
     onTabClose = output();
     ctx = inject(AccordionContext);
-    headers = contentChildren(AccordionHeaderComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "headers" }] : /* istanbul ignore next */ []));
+    headers = contentChildren(AccordionHeaderComponent, { ...(ngDevMode ? { debugName: "headers" } : /* istanbul ignore next */ {}), descendants: true });
     rootClass = computed(() => `border border-(--f-content-border-color) rounded-lg overflow-hidden shadow-sm bg-(--f-content-background) ${this.styleClass()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rootClass" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -10547,7 +10617,7 @@ class AccordionComponent {
         headers[nextIndex].focusButton();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: AccordionComponent, isStandalone: true, selector: "f-accordion", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onOpen: "onOpen", onClose: "onClose", onTabChange: "onTabChange", onTabClose: "onTabClose" }, host: { classAttribute: "block" }, providers: [AccordionContext], queries: [{ propertyName: "headers", predicate: AccordionHeaderComponent, isSignal: true }], ngImport: i0, template: `<div
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: AccordionComponent, isStandalone: true, selector: "f-accordion", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onOpen: "onOpen", onClose: "onClose", onTabChange: "onTabChange", onTabClose: "onTabClose" }, host: { classAttribute: "block" }, providers: [AccordionContext], queries: [{ propertyName: "headers", predicate: AccordionHeaderComponent, descendants: true, isSignal: true }], ngImport: i0, template: `<div
     [class]="rootClass()"
     [style]="style()"
     (keydown)="onKeydown($event)"
@@ -10571,7 +10641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
     <ng-content />
   </div>`,
                 }]
-        }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onOpen: [{ type: i0.Output, args: ["onOpen"] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onTabChange: [{ type: i0.Output, args: ["onTabChange"] }], onTabClose: [{ type: i0.Output, args: ["onTabClose"] }], headers: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionHeaderComponent), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onOpen: [{ type: i0.Output, args: ["onOpen"] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onTabChange: [{ type: i0.Output, args: ["onTabChange"] }], onTabClose: [{ type: i0.Output, args: ["onTabClose"] }], headers: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionHeaderComponent), { ...{ descendants: true }, isSignal: true }] }] } });
 // ─── AccordionPanel — provides panel-level context ────────────────────────────
 class AccordionPanelComponent {
     value = input('', /* @ts-ignore */
@@ -10620,71 +10690,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
   </div>`,
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
-// ─── AccordionHeader — reads panel context, triggers toggle ───────────────────
-class AccordionHeaderComponent {
-    panelCtx = inject(AccordionPanelCtx);
-    accordionCtx = inject(AccordionContext, { optional: true });
-    buttonRef = viewChild('btn', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "buttonRef" }] : /* istanbul ignore next */ []));
-    disabled = computed(() => this.panelCtx.disabled(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    headerId = computed(() => `${this.accordionCtx?.id ?? 'f-accordion'}-header-${this.panelCtx.value()}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "headerId" }] : /* istanbul ignore next */ []));
-    contentId = computed(() => `${this.accordionCtx?.id ?? 'f-accordion'}-content-${this.panelCtx.value()}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
-    buttonEl() {
-        return this.buttonRef()?.nativeElement;
-    }
-    focusButton() {
-        this.buttonRef()?.nativeElement.focus();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AccordionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: AccordionHeaderComponent, isStandalone: true, selector: "f-accordion-header", viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["btn"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <button
-      #btn
-      type="button"
-      class="w-full flex items-center justify-between px-5 py-3.5 text-sm font-semibold text-(--f-text-color) hover:bg-(--f-content-hover-background)/80 transition-all duration-[var(--f-transition-duration)] text-left select-none focus:outline-none focus-visible:ring-focus cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
-      [id]="headerId()"
-      [disabled]="panelCtx.disabled()"
-      [attr.aria-expanded]="panelCtx.open()"
-      [attr.aria-controls]="contentId()"
-      (click)="panelCtx.toggle()"
-    >
-      <span class="flex-1 tracking-tight"><ng-content /></span>
-      <ui-icon
-        name="chevron-down"
-        class="text-xs text-(--f-text-muted-color) ml-3 shrink-0 transition-transform duration-200"
-        [class.rotate-180]="panelCtx.open()"
-      ></ui-icon>
-    </button>
-  `, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AccordionHeaderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'f-accordion-header',
-                    imports: [UiIconComponent],
-                    template: `
-    <button
-      #btn
-      type="button"
-      class="w-full flex items-center justify-between px-5 py-3.5 text-sm font-semibold text-(--f-text-color) hover:bg-(--f-content-hover-background)/80 transition-all duration-[var(--f-transition-duration)] text-left select-none focus:outline-none focus-visible:ring-focus cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
-      [id]="headerId()"
-      [disabled]="panelCtx.disabled()"
-      [attr.aria-expanded]="panelCtx.open()"
-      [attr.aria-controls]="contentId()"
-      (click)="panelCtx.toggle()"
-    >
-      <span class="flex-1 tracking-tight"><ng-content /></span>
-      <ui-icon
-        name="chevron-down"
-        class="text-xs text-(--f-text-muted-color) ml-3 shrink-0 transition-transform duration-200"
-        [class.rotate-180]="panelCtx.open()"
-      ></ui-icon>
-    </button>
-  `,
-                }]
-        }], propDecorators: { buttonRef: [{ type: i0.ViewChild, args: ['btn', { isSignal: true }] }] } });
 // ─── AccordionContent — shows/hides via panel context ─────────────────────────
 class AccordionContentComponent {
     panelCtx = inject(AccordionPanelCtx);
@@ -15202,6 +15207,14 @@ class TreeTableComponent {
         return { nodes: out, matchedKeys };
     }
     sortNodesRecursive(nodes) {
+        // Skip cloning entirely when there's nothing to sort — spreading nodes
+        // here (even with no active sort) mints new object identities, which
+        // desyncs the __uid assigned by assignKey() from the original nodes
+        // held externally (e.g. by expandAll()/toggleRow() callers), silently
+        // breaking expand/collapse state.
+        const hasActiveSort = this.sortMode() === 'multiple' ? this.multiSortMeta().length > 0 : !!this.sortField();
+        if (!hasActiveSort)
+            return nodes;
         const withSortedChildren = nodes.map((n) => n.children?.length ? { ...n, children: this.sortNodesRecursive(n.children) } : n);
         if (this.sortMode() === 'multiple') {
             const metas = this.multiSortMeta();
@@ -26021,15 +26034,25 @@ class TerminalComponent {
     _current = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_current" }] : /* istanbul ignore next */ []));
     current = this._current.asReadonly();
-    _history = signal(this.welcomeMessage() ? [{ type: 'response', text: this.welcomeMessage() }] : [], /* @ts-ignore */
+    _history = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_history" }] : /* istanbul ignore next */ []));
     history = this._history.asReadonly();
     _commandHistory = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_commandHistory" }] : /* istanbul ignore next */ []));
     historyIndex = -1;
+    welcomeMessageShown = false;
     containerClass = computed(() => `bg-surface-950 text-surface-0 rounded-lg font-mono text-sm p-3 overflow-y-auto ${this.styleClass()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []));
     constructor() {
+        effect(() => {
+            const welcome = this.welcomeMessage();
+            // input() isn't populated yet at field-initializer time, so seed the
+            // welcome message here instead, once, the first time it becomes available.
+            if (welcome && !this.welcomeMessageShown) {
+                this.welcomeMessageShown = true;
+                this._history.update(h => [{ type: 'response', text: welcome }, ...h]);
+            }
+        });
         effect(() => {
             this.history();
             const el = this.scrollContainer()?.nativeElement;