@sentropic/design-system-angular 0.36.59 → 0.36.61

package/dist/MenuPopover.js

@@ -1,39 +1,233 @@
-import { Component, Input as NgInput } from "@angular/core";
+import { Component, ElementRef, EventEmitter, Input as NgInput, Output, ViewChild, } from "@angular/core";
 import { classNames } from "./classNames.js";
 import { Menu } from "./Menu.js";
 import * as i0 from "@angular/core";
+// Anchor spacing between panel and trigger.
+const GAP = 4;
+// Anti-overflow margin between the panel and the viewport edge.
+const VIEWPORT_MARGIN = 8;
+// Height floor: below this threshold we keep a usable scrollable window rather
+// than a crushed menu (rare case of a trigger glued to the edge).
+const MIN_HEIGHT = 160;
+/**
+ * Pure position solver — mirrors Svelte's `computePosition()` / React's
+ * `computePosition` callback so it can be unit-tested without a real
+ * `window`/DOM (this package's tests run in a Node environment, no jsdom).
+ */
+export function computeMenuPopoverPosition(rect, placement, align, viewport) {
+    const verticalUp = placement === "top-start" || placement === "top-end";
+    const horizontalEnd = placement === "bottom-end" || placement === "top-end";
+    const resolvedAlign = align ?? (horizontalEnd ? "end" : "start");
+    const alignEnd = resolvedAlign === "end";
+    const alignCenter = resolvedAlign === "center";
+    let top;
+    let maxHeight;
+    if (verticalUp) {
+        // Panel bottom edge sits above the trigger (transform handles the flip);
+        // available space is what's ABOVE the trigger.
+        top = rect.top + viewport.scrollY - GAP;
+        maxHeight = Math.max(rect.top - GAP - VIEWPORT_MARGIN, MIN_HEIGHT);
+    }
+    else {
+        top = rect.bottom + viewport.scrollY + GAP;
+        // Space actually available BELOW the trigger — `max-height: 100vh` alone
+        // ignores the panel's offset and overflows past the bottom edge.
+        maxHeight = Math.max(viewport.height - rect.bottom - GAP - VIEWPORT_MARGIN, MIN_HEIGHT);
+    }
+    let left;
+    if (resolvedAlign === "end") {
+        left = rect.right + viewport.scrollX;
+    }
+    else if (resolvedAlign === "center") {
+        left = rect.left + viewport.scrollX + rect.width / 2;
+    }
+    else {
+        left = rect.left + viewport.scrollX;
+    }
+    return { top, left, maxHeight, alignEnd, alignCenter };
+}
+export function menuPopoverIsWithin(event, node) {
+    if (!node)
+        return false;
+    const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+    if (path.includes(node))
+        return true;
+    const target = event.target;
+    return Boolean(target && node.contains(target));
+}
 export class MenuPopover {
     static stComponentName = "MenuPopover";
     componentName = "MenuPopover";
+    /** Convenience (not in the Svelte contract): renders a <st-menu> from `items` instead of projected content. */
     items;
-    open;
-    placement;
+    open = false;
+    /** Anchor element used for position computation and outside-click exclusion (Svelte-canonical). */
+    trigger = null;
+    placement = "bottom-start";
+    align;
+    /** Accessible name for the panel (Svelte-canonical: applied as aria-label on role="dialog"). */
+    label;
     classInput;
+    closeOnOutside = true;
+    closeOnEscape = true;
+    openChange = new EventEmitter();
+    panel;
+    top = 0;
+    left = 0;
+    maxHeight = 0;
+    alignEnd = false;
+    alignCenter = false;
+    listenersActive = false;
+    onScroll = () => this.computePosition();
+    onResize = () => this.computePosition();
+    onPointerDown = (event) => {
+        if (!this.open || !this.closeOnOutside)
+            return;
+        if (menuPopoverIsWithin(event, this.panel?.nativeElement))
+            return;
+        if (menuPopoverIsWithin(event, this.trigger))
+            return;
+        this.close();
+    };
+    onKeyDown = (event) => {
+        if (!this.open || !this.closeOnEscape)
+            return;
+        if (event.key === "Escape") {
+            event.preventDefault();
+            this.close();
+        }
+    };
     get hostClass() {
-        return ["st-menuPopover", this.classInput].filter(Boolean).join(" ");
+        return classNames("st-menuPopover", `st-menuPopover--${this.placement}`, this.alignEnd ? "st-menuPopover--alignEnd" : null, this.alignCenter ? "st-menuPopover--alignCenter" : null, this.classInput);
+    }
+    get panelStyle() {
+        return `top: ${this.top}px; left: ${this.left}px;${this.maxHeight ? ` max-height: ${this.maxHeight}px;` : ""}`;
+    }
+    ngAfterViewInit() {
+        this.registerWindowListeners();
+        if (this.open)
+            this.computePosition();
+    }
+    ngOnChanges(changes) {
+        if (typeof window === "undefined")
+            return;
+        if (!this.open)
+            return;
+        if (changes["open"] || changes["trigger"] || changes["placement"] || changes["align"]) {
+            // Recompute after Angular renders the panel for the new state.
+            queueMicrotask(() => {
+                if (this.open)
+                    this.computePosition();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.unregisterWindowListeners();
+    }
+    computePosition() {
+        if (!this.trigger)
+            return;
+        if (typeof window === "undefined")
+            return;
+        const rect = this.trigger.getBoundingClientRect();
+        const pos = computeMenuPopoverPosition({ top: rect.top, bottom: rect.bottom, left: rect.left, right: rect.right, width: rect.width }, this.placement, this.align, { height: window.innerHeight, scrollX: window.scrollX, scrollY: window.scrollY });
+        this.top = pos.top;
+        this.left = pos.left;
+        this.maxHeight = pos.maxHeight;
+        this.alignEnd = pos.alignEnd;
+        this.alignCenter = pos.alignCenter;
+    }
+    close() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.openChange.emit(false);
+    }
+    registerWindowListeners() {
+        if (this.listenersActive)
+            return;
+        if (typeof window === "undefined")
+            return;
+        this.listenersActive = true;
+        window.addEventListener("scroll", this.onScroll, true);
+        window.addEventListener("resize", this.onResize);
+        window.addEventListener("pointerdown", this.onPointerDown);
+        window.addEventListener("keydown", this.onKeyDown);
+    }
+    unregisterWindowListeners() {
+        if (!this.listenersActive)
+            return;
+        this.listenersActive = false;
+        if (typeof window === "undefined")
+            return;
+        window.removeEventListener("scroll", this.onScroll, true);
+        window.removeEventListener("resize", this.onResize);
+        window.removeEventListener("pointerdown", this.onPointerDown);
+        window.removeEventListener("keydown", this.onKeyDown);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: MenuPopover, isStandalone: true, selector: "st-menu-popover", inputs: { items: "items", open: "open", placement: "placement", classInput: ["class", "classInput"] }, ngImport: i0, template: `
-    <div [attr.data-st-component]="componentName" [class]="hostClass">
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true, styles: [":host { display: contents; }"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MenuPopover, isStandalone: true, selector: "st-menu-popover", inputs: { items: "items", open: "open", trigger: "trigger", placement: "placement", align: "align", label: "label", classInput: ["class", "classInput"], closeOnOutside: "closeOnOutside", closeOnEscape: "closeOnEscape" }, outputs: { openChange: "openChange" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    @if (open) {
+      <div
+        #panel
+        [attr.data-st-component]="componentName"
+        [class]="hostClass"
+        role="dialog"
+        [attr.aria-label]="label"
+        [style]="panelStyle"
+      >
+        @if (items && items.length) {
+          <st-menu [items]="items" role="presentation"></st-menu>
+        } @else {
+          <ng-content></ng-content>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host { display: contents; }"], dependencies: [{ kind: "component", type: Menu, selector: "st-menu", inputs: ["items", "dense", "role", "class"], outputs: ["select"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuPopover, decorators: [{
             type: Component,
-            args: [{ selector: "st-menu-popover", standalone: true, template: `
-    <div [attr.data-st-component]="componentName" [class]="hostClass">
-      <ng-content></ng-content>
-    </div>
+            args: [{ selector: "st-menu-popover", standalone: true, imports: [Menu], template: `
+    @if (open) {
+      <div
+        #panel
+        [attr.data-st-component]="componentName"
+        [class]="hostClass"
+        role="dialog"
+        [attr.aria-label]="label"
+        [style]="panelStyle"
+      >
+        @if (items && items.length) {
+          <st-menu [items]="items" role="presentation"></st-menu>
+        } @else {
+          <ng-content></ng-content>
+        }
+      </div>
+    }
   `, styles: [":host { display: contents; }"] }]
         }], propDecorators: { items: [{
                 type: NgInput
             }], open: [{
                 type: NgInput
+            }], trigger: [{
+                type: NgInput
             }], placement: [{
                 type: NgInput
+            }], align: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
             }], classInput: [{
                 type: NgInput,
                 args: ["class"]
+            }], closeOnOutside: [{
+                type: NgInput
+            }], closeOnEscape: [{
+                type: NgInput
+            }], openChange: [{
+                type: Output
+            }], panel: [{
+                type: ViewChild,
+                args: ["panel"]
             }] } });
 //# sourceMappingURL=MenuPopover.js.map

package/dist/MenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../src/MenuPopover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;;AAuBjC,MAAM,OAAO,WAAW;IACtB,MAAM,CAAU,eAAe,GAAG,aAAa,CAAC;IACvC,aAAa,GAAG,aAAa,CAAC;IAC5B,KAAK,CAAc;IACnB,IAAI,CAAW;IACf,SAAS,CAAwB;IAC1B,UAAU,CAAU;IAEtC,IAAI,SAAS;QACX,OAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACvE,CAAC;wGAVU,WAAW;4FAAX,WAAW,kLANZ;;;;GAIT;;4FAEU,WAAW;kBAVvB,SAAS;+BACE,iBAAiB,cACf,IAAI,YAEN;;;;GAIT;;sBAKA,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO"}
+{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../src/MenuPopover.ts"],"names":[],"mappings":"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"}

package/dist/PanelSection.d.ts

@@ -0,0 +1,69 @@
+import { ElementRef, EventEmitter } from "@angular/core";
+import * as i0 from "@angular/core";
+export type PanelSectionProps = {
+    id: string;
+    label: string;
+    /**
+     * Convenience (not in the Svelte contract): renders the header-trailing
+     * actions slot wrapper. Angular content projection has no way to detect
+     * whether optional projected content was actually supplied the way a
+     * Svelte snippet prop (`actions?: Snippet`) can — same reasoning as
+     * `SelectableRow`'s `leading`/`trailing`/`caption` flags. Project the
+     * actions markup with `slot="actions"` and set this to `true`.
+     */
+    actions?: boolean;
+    class?: string;
+};
+/**
+ * One section of a `PanelStack`. Faithful Angular port of
+ * `PanelSection.svelte` — see `PanelStack.ts` for the ratified contract and
+ * for why Angular-specific coordination departs from Svelte's context.
+ *
+ * `isPrimary`/`expanded`/`scrollOwner` are plain `@Input()`s here (not
+ * derived from an injected context, unlike Svelte's `getContext`): a
+ * `PanelStack` ancestor discovers this component via `@ContentChildren` and
+ * pushes these three directly onto each instance it finds. A `PanelSection`
+ * with no such ancestor (never synced) simply keeps its declared defaults —
+ * which mirror `PanelSection.svelte`'s own "no context" fallback exactly:
+ * fully expanded, scroll-owning, non-primary, so it still renders sanely in
+ * isolation.
+ */
+export declare class PanelSection {
+    private readonly host;
+    static readonly stComponentName = "PanelSection";
+    readonly componentName = "PanelSection";
+    id: string;
+    label: string;
+    actions?: boolean;
+    classInput?: string;
+    /** Angular-idiom @Input()s (not literal Svelte props) — see the class-level
+     *  doc comment: a PanelStack ancestor pushes these directly. Defaults match
+     *  PanelSection.svelte's own no-context fallback. */
+    isPrimary: boolean;
+    expanded: boolean;
+    scrollOwner: boolean;
+    /** Angular-idiom addition: fired with this section's `id` when its header
+     *  trigger is activated. `PanelStack` subscribes to every discovered
+     *  section's emitter to drive `toggle()`. */
+    readonly toggleRequested: EventEmitter<string>;
+    private headerElRef?;
+    constructor(host: ElementRef<HTMLElement>);
+    /** The section's own root element — is the host itself (see the
+     *  class-level doc comment) — read by `PanelStack` for ResizeObserver
+     *  measurement. */
+    get rootElement(): HTMLElement;
+    /** Split-primary's auto-collapse measures whichever section is CURRENTLY
+     *  primary by its header height specifically — see `PanelStack.ts`'s
+     *  `register` doc; sticky-item ignores it. `undefined` until the view has
+     *  rendered (e.g. a bare, un-mounted instance in a test). */
+    get headerElement(): HTMLElement | undefined;
+    get triggerId(): string;
+    get regionId(): string;
+    get hostClass(): string;
+    get bodyClasses(): string;
+    get iconClass(): string;
+    onTriggerClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PanelSection, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PanelSection, "st-panel-section", never, { "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; "isPrimary": { "alias": "isPrimary"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "scrollOwner": { "alias": "scrollOwner"; "required": false; }; }, { "toggleRequested": "toggleRequested"; }, never, ["[slot='actions']", "*"], true, never>;
+}
+//# sourceMappingURL=PanelSection.d.ts.map

package/dist/PanelSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelSection.d.ts","sourceRoot":"","sources":["../src/PanelSection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,YAAY,EAAuC,MAAM,eAAe,CAAC;;AAKzG,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,qBAsDa,YAAY;IAuBX,OAAO,CAAC,QAAQ,CAAC,IAAI;IAtBjC,MAAM,CAAC,QAAQ,CAAC,eAAe,kBAAkB;IACjD,QAAQ,CAAC,aAAa,kBAAkB;IAE7B,EAAE,EAAG,MAAM,CAAC;IACZ,KAAK,EAAG,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IAEtC;;yDAEqD;IAC1C,SAAS,UAAS;IAClB,QAAQ,UAAQ;IAChB,WAAW,UAAQ;IAE9B;;iDAE6C;IACnC,QAAQ,CAAC,eAAe,uBAA8B;IAEzC,OAAO,CAAC,WAAW,CAAC,CAA0B;gBAExC,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC;IAE1D;;uBAEmB;IACnB,IAAI,WAAW,IAAI,WAAW,CAE7B;IAED;;;iEAG6D;IAC7D,IAAI,aAAa,IAAI,WAAW,GAAG,SAAS,CAE3C;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,WAAW,IAAI,MAAM,CASxB;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,cAAc,IAAI,IAAI;yCAnEX,YAAY;2CAAZ,YAAY;CAsExB"}

package/dist/PanelSection.js

@@ -0,0 +1,191 @@
+import { Component, ElementRef, EventEmitter, Input as NgInput, Output, ViewChild } from "@angular/core";
+import { classNames } from "./classNames.js";
+import { Icon } from "./Icon.js";
+import * as i0 from "@angular/core";
+/**
+ * One section of a `PanelStack`. Faithful Angular port of
+ * `PanelSection.svelte` — see `PanelStack.ts` for the ratified contract and
+ * for why Angular-specific coordination departs from Svelte's context.
+ *
+ * `isPrimary`/`expanded`/`scrollOwner` are plain `@Input()`s here (not
+ * derived from an injected context, unlike Svelte's `getContext`): a
+ * `PanelStack` ancestor discovers this component via `@ContentChildren` and
+ * pushes these three directly onto each instance it finds. A `PanelSection`
+ * with no such ancestor (never synced) simply keeps its declared defaults —
+ * which mirror `PanelSection.svelte`'s own "no context" fallback exactly:
+ * fully expanded, scroll-owning, non-primary, so it still renders sanely in
+ * isolation.
+ */
+export class PanelSection {
+    host;
+    static stComponentName = "PanelSection";
+    componentName = "PanelSection";
+    id;
+    label;
+    actions;
+    classInput;
+    /** Angular-idiom @Input()s (not literal Svelte props) — see the class-level
+     *  doc comment: a PanelStack ancestor pushes these directly. Defaults match
+     *  PanelSection.svelte's own no-context fallback. */
+    isPrimary = false;
+    expanded = true;
+    scrollOwner = true;
+    /** Angular-idiom addition: fired with this section's `id` when its header
+     *  trigger is activated. `PanelStack` subscribes to every discovered
+     *  section's emitter to drive `toggle()`. */
+    toggleRequested = new EventEmitter();
+    headerElRef;
+    constructor(host) {
+        this.host = host;
+    }
+    /** The section's own root element — is the host itself (see the
+     *  class-level doc comment) — read by `PanelStack` for ResizeObserver
+     *  measurement. */
+    get rootElement() {
+        return this.host.nativeElement;
+    }
+    /** Split-primary's auto-collapse measures whichever section is CURRENTLY
+     *  primary by its header height specifically — see `PanelStack.ts`'s
+     *  `register` doc; sticky-item ignores it. `undefined` until the view has
+     *  rendered (e.g. a bare, un-mounted instance in a test). */
+    get headerElement() {
+        return this.headerElRef?.nativeElement;
+    }
+    get triggerId() {
+        return `st-panelSection-trigger-${this.id}`;
+    }
+    get regionId() {
+        return `st-panelSection-region-${this.id}`;
+    }
+    get hostClass() {
+        return classNames("st-panelSection", this.scrollOwner ? "st-panelSection--scrollOwner" : null, this.classInput);
+    }
+    get bodyClasses() {
+        return classNames("st-panelSection__body", this.scrollOwner
+            ? "st-panelSection__body--scrollOwner"
+            : !this.expanded
+                ? "st-panelSection__body--collapsed"
+                : null);
+    }
+    get iconClass() {
+        return classNames("st-panelSection__icon", this.expanded ? "st-panelSection__icon--expanded" : null);
+    }
+    onTriggerClick() {
+        this.toggleRequested.emit(this.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PanelSection, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PanelSection, isStandalone: true, selector: "st-panel-section", inputs: { id: "id", label: "label", actions: "actions", classInput: ["class", "classInput"], isPrimary: "isPrimary", expanded: "expanded", scrollOwner: "scrollOwner" }, outputs: { toggleRequested: "toggleRequested" }, host: { properties: { "attr.data-st-component": "componentName", "attr.data-panel-section-id": "id", "class": "hostClass" } }, viewQueries: [{ propertyName: "headerElRef", first: true, predicate: ["headerEl"], descendants: true }], ngImport: i0, template: `
+    <div class="st-panelSection__header" #headerEl>
+      <h3 class="st-panelSection__heading">
+        @if (isPrimary) {
+          <span class="st-panelSection__title st-panelSection__title--primary" [id]="triggerId">{{ label }}</span>
+        } @else {
+          <button
+            type="button"
+            class="st-panelSection__trigger"
+            [attr.aria-expanded]="expanded ? 'true' : 'false'"
+            [attr.aria-controls]="regionId"
+            [id]="triggerId"
+            (click)="onTriggerClick()"
+          >
+            <span class="st-panelSection__title">{{ label }}</span>
+            <span [class]="iconClass" aria-hidden="true">
+              <st-icon name="chevron-down" [size]="18"></st-icon>
+            </span>
+          </button>
+        }
+      </h3>
+      @if (actions) {
+        <div class="st-panelSection__actions">
+          <ng-content select="[slot='actions']"></ng-content>
+        </div>
+      }
+    </div>
+    <!-- Mounted once, always — collapsing is purely a class/CSS concern
+         (sizing + hiding this region), never a conditional block. A chat
+         session, a map or any other stateful widget rendered here survives
+         collapse/expand without remounting; see AppShell's
+         panelCollapse="accordion" region for the same technique. -->
+    <div [class]="bodyClasses" role="region" [id]="regionId" [attr.aria-labelledby]="triggerId">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: Icon, selector: "st-icon", inputs: ["name", "size", "strokeWidth", "title", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PanelSection, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-panel-section",
+                    standalone: true,
+                    imports: [Icon],
+                    // The host tag itself carries `.st-panelSection` (no inner wrapper div) —
+                    // see `PanelStack.ts`'s class-level doc comment for why: the shared
+                    // stylesheet's `.st-panelStack > .st-panelSection + .st-panelSection`
+                    // separator rule needs `.st-panelSection` to be a genuine DOM child of
+                    // `.st-panelStack`, and `display:flex`/`flex:0 0 auto`/`flex:1 1 0` (from
+                    // that same class) need to apply to a box that actually participates as a
+                    // flex item in the stack's layout — both of which an extra
+                    // `:host{display:contents}`-wrapped inner div would undermine.
+                    host: {
+                        "[attr.data-st-component]": "componentName",
+                        "[attr.data-panel-section-id]": "id",
+                        "[class]": "hostClass",
+                    },
+                    template: `
+    <div class="st-panelSection__header" #headerEl>
+      <h3 class="st-panelSection__heading">
+        @if (isPrimary) {
+          <span class="st-panelSection__title st-panelSection__title--primary" [id]="triggerId">{{ label }}</span>
+        } @else {
+          <button
+            type="button"
+            class="st-panelSection__trigger"
+            [attr.aria-expanded]="expanded ? 'true' : 'false'"
+            [attr.aria-controls]="regionId"
+            [id]="triggerId"
+            (click)="onTriggerClick()"
+          >
+            <span class="st-panelSection__title">{{ label }}</span>
+            <span [class]="iconClass" aria-hidden="true">
+              <st-icon name="chevron-down" [size]="18"></st-icon>
+            </span>
+          </button>
+        }
+      </h3>
+      @if (actions) {
+        <div class="st-panelSection__actions">
+          <ng-content select="[slot='actions']"></ng-content>
+        </div>
+      }
+    </div>
+    <!-- Mounted once, always — collapsing is purely a class/CSS concern
+         (sizing + hiding this region), never a conditional block. A chat
+         session, a map or any other stateful widget rendered here survives
+         collapse/expand without remounting; see AppShell's
+         panelCollapse="accordion" region for the same technique. -->
+    <div [class]="bodyClasses" role="region" [id]="regionId" [attr.aria-labelledby]="triggerId">
+      <ng-content></ng-content>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], actions: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }], isPrimary: [{
+                type: NgInput
+            }], expanded: [{
+                type: NgInput
+            }], scrollOwner: [{
+                type: NgInput
+            }], toggleRequested: [{
+                type: Output
+            }], headerElRef: [{
+                type: ViewChild,
+                args: ["headerEl"]
+            }] } });
+//# sourceMappingURL=PanelSection.js.map

package/dist/PanelSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelSection.js","sourceRoot":"","sources":["../src/PanelSection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAEzG,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;;AAiBjC;;;;;;;;;;;;;GAaG;AAuDH,MAAM,OAAO,YAAY;IAuBM;IAtB7B,MAAM,CAAU,eAAe,GAAG,cAAc,CAAC;IACxC,aAAa,GAAG,cAAc,CAAC;IAE7B,EAAE,CAAU;IACZ,KAAK,CAAU;IACf,OAAO,CAAW;IACX,UAAU,CAAU;IAEtC;;yDAEqD;IAC1C,SAAS,GAAG,KAAK,CAAC;IAClB,QAAQ,GAAG,IAAI,CAAC;IAChB,WAAW,GAAG,IAAI,CAAC;IAE9B;;iDAE6C;IAC1B,eAAe,GAAG,IAAI,YAAY,EAAU,CAAC;IAEjC,WAAW,CAA2B;IAErE,YAA6B,IAA6B;QAA7B,SAAI,GAAJ,IAAI,CAAyB;IAAG,CAAC;IAE9D;;uBAEmB;IACnB,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;IACjC,CAAC;IAED;;;iEAG6D;IAC7D,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC;IACzC,CAAC;IAED,IAAI,SAAS;QACX,OAAO,2BAA2B,IAAI,CAAC,EAAE,EAAE,CAAC;IAC9C,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,0BAA0B,IAAI,CAAC,EAAE,EAAE,CAAC;IAC7C,CAAC;IAED,IAAI,SAAS;QACX,OAAO,UAAU,CAAC,iBAAiB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAClH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,UAAU,CACf,uBAAuB,EACvB,IAAI,CAAC,WAAW;YACd,CAAC,CAAC,oCAAoC;YACtC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;gBACd,CAAC,CAAC,kCAAkC;gBACpC,CAAC,CAAC,IAAI,CACX,CAAC;IACJ,CAAC;IAED,IAAI,SAAS;QACX,OAAO,UAAU,CAAC,uBAAuB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACvG,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACrC,CAAC;wGArEU,YAAY;4FAAZ,YAAY,8gBArCb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCT,4DAjDS,IAAI;;4FAmDH,YAAY;kBAtDxB,SAAS;mBAAC;oBACT,QAAQ,EAAE,kBAAkB;oBAC5B,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,IAAI,CAAC;oBACf,0EAA0E;oBAC1E,oEAAoE;oBACpE,sEAAsE;oBACtE,uEAAuE;oBACvE,0EAA0E;oBAC1E,0EAA0E;oBAC1E,2DAA2D;oBAC3D,+DAA+D;oBAC/D,IAAI,EAAE;wBACJ,0BAA0B,EAAE,eAAe;wBAC3C,8BAA8B,EAAE,IAAI;wBACpC,SAAS,EAAE,WAAW;qBACvB;oBACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCT;iBACF;;sBAKE,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO;;sBAKf,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBAKP,MAAM;;sBAEN,SAAS;uBAAC,UAAU"}