@sentropic/design-system-angular 0.36.57 → 0.36.59

package/dist/AppShell.d.ts

@@ -2,29 +2,90 @@ import * as i0 from "@angular/core";
 export type AppShellVariant = "site" | "workspace";
 export type AppShellUtilityMode = "reserve" | "overlay" | "floating";
 export type AppShellUtilitySide = "left" | "right" | "bottom";
+export type AppShellPanelCollapse = "stack" | "accordion";
 export type AppShellProps = {
     variant?: AppShellVariant;
+    /** Presence flags for named panels — pair with a projected `[slot=x]` element. */
+    topChrome?: unknown;
+    primaryRail?: unknown;
+    navigationPanel?: unknown;
+    contextPanel?: unknown;
+    utilityPanel?: unknown;
+    bottomPanel?: unknown;
     mainId?: string;
     navigationLabel?: string;
     contextLabel?: string;
     utilityLabel?: string;
     utilityMode?: AppShellUtilityMode;
     utilitySide?: AppShellUtilitySide;
+    /**
+     * Below the 48rem breakpoint, `"stack"` (default) keeps today's behaviour —
+     * panels stack full-width in document order, always expanded. `"accordion"`
+     * degrades each present panel to a keyboard-accessible disclosure (collapsed
+     * by default) instead of squeezing the main content. Desktop (>48rem)
+     * rendering is IDENTICAL in both modes. Panel content is mounted once
+     * regardless of mode/breakpoint; collapsing hides/sizes the region via CSS
+     * rather than destroying it, so a stateful widget projected into a panel
+     * never remounts.
+     */
+    panelCollapse?: AppShellPanelCollapse;
+    /** Disclosure label for `primaryRail` when `panelCollapse="accordion"`. */
+    primaryRailLabel?: string;
+    /** Disclosure label for `navigationPanel` when `panelCollapse="accordion"`. Defaults to `navigationLabel`. */
+    navigationPanelLabel?: string;
+    /** Disclosure label for `contextPanel` when `panelCollapse="accordion"`. Defaults to `contextLabel`. */
+    contextPanelLabel?: string;
+    /** Disclosure label for `utilityPanel` when `panelCollapse="accordion"`. Defaults to `utilityLabel`. */
+    utilityPanelLabel?: string;
     class?: string;
 };
 export declare class AppShell {
     static readonly stComponentName = "AppShell";
     readonly componentName = "AppShell";
     variant: AppShellVariant;
+    topChrome?: unknown;
+    primaryRail?: unknown;
+    navigationPanel?: unknown;
+    contextPanel?: unknown;
+    utilityPanel?: unknown;
+    bottomPanel?: unknown;
     mainId: string;
     navigationLabel: string;
     contextLabel: string;
     utilityLabel: string;
     utilityMode: AppShellUtilityMode;
     utilitySide: AppShellUtilitySide;
+    panelCollapse: AppShellPanelCollapse;
+    primaryRailLabel: string;
+    navigationPanelLabel?: string;
+    contextPanelLabel?: string;
+    utilityPanelLabel?: string;
     classInput?: string;
+    primaryRailPanelOpen: boolean;
+    navigationPanelOpen: boolean;
+    contextPanelOpen: boolean;
+    utilityPanelOpen: boolean;
+    readonly primaryRailTriggerId = "st-appShell-primaryRail-trigger";
+    readonly primaryRailRegionId = "st-appShell-primaryRail-region";
+    readonly navigationPanelTriggerId = "st-appShell-navigationPanel-trigger";
+    readonly navigationPanelRegionId = "st-appShell-navigationPanel-region";
+    readonly contextPanelTriggerId = "st-appShell-contextPanel-trigger";
+    readonly contextPanelRegionId = "st-appShell-contextPanel-region";
+    readonly utilityPanelTriggerId = "st-appShell-utilityPanel-trigger";
+    readonly utilityPanelRegionId = "st-appShell-utilityPanel-region";
     get hostClass(): string;
+    get navigationPanelLabelResolved(): string;
+    get contextPanelLabelResolved(): string;
+    get utilityPanelLabelResolved(): string;
+    get primaryRailRegionCollapsed(): boolean;
+    get navigationPanelRegionCollapsed(): boolean;
+    get contextPanelRegionCollapsed(): boolean;
+    get utilityPanelRegionCollapsed(): boolean;
+    togglePrimaryRailPanel(): void;
+    toggleNavigationPanel(): void;
+    toggleContextPanel(): void;
+    toggleUtilityPanel(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AppShell, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AppShell, "st-app-shell", never, { "variant": { "alias": "variant"; "required": false; }; "mainId": { "alias": "mainId"; "required": false; }; "navigationLabel": { "alias": "navigationLabel"; "required": false; }; "contextLabel": { "alias": "contextLabel"; "required": false; }; "utilityLabel": { "alias": "utilityLabel"; "required": false; }; "utilityMode": { "alias": "utilityMode"; "required": false; }; "utilitySide": { "alias": "utilitySide"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppShell, "st-app-shell", never, { "variant": { "alias": "variant"; "required": false; }; "topChrome": { "alias": "topChrome"; "required": false; }; "primaryRail": { "alias": "primaryRail"; "required": false; }; "navigationPanel": { "alias": "navigationPanel"; "required": false; }; "contextPanel": { "alias": "contextPanel"; "required": false; }; "utilityPanel": { "alias": "utilityPanel"; "required": false; }; "bottomPanel": { "alias": "bottomPanel"; "required": false; }; "mainId": { "alias": "mainId"; "required": false; }; "navigationLabel": { "alias": "navigationLabel"; "required": false; }; "contextLabel": { "alias": "contextLabel"; "required": false; }; "utilityLabel": { "alias": "utilityLabel"; "required": false; }; "utilityMode": { "alias": "utilityMode"; "required": false; }; "utilitySide": { "alias": "utilitySide"; "required": false; }; "panelCollapse": { "alias": "panelCollapse"; "required": false; }; "primaryRailLabel": { "alias": "primaryRailLabel"; "required": false; }; "navigationPanelLabel": { "alias": "navigationPanelLabel"; "required": false; }; "contextPanelLabel": { "alias": "contextPanelLabel"; "required": false; }; "utilityPanelLabel": { "alias": "utilityPanelLabel"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, ["*", "[slot=topChrome]", "[slot=primaryRail]", "[slot=navigationPanel]", "[slot=main]", "[slot=contextPanel]", "[slot=utilityPanel]", "[slot=bottomPanel]"], true, never>;
 }
 //# sourceMappingURL=AppShell.d.ts.map

package/dist/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../src/AppShell.ts"],"names":[],"mappings":";AAEA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,WAAW,CAAC;AACnD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AACrE,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBASa,QAAQ;IACnB,MAAM,CAAC,QAAQ,CAAC,eAAe,cAAc;IAC7C,QAAQ,CAAC,aAAa,cAAc;IACzB,OAAO,EAAE,eAAe,CAAe;IACvC,MAAM,SAAU;IAChB,eAAe,SAA0B;IACzC,YAAY,SAAmB;IAC/B,YAAY,SAAmB;IAC/B,WAAW,EAAE,mBAAmB,CAAa;IAC7C,WAAW,EAAE,mBAAmB,CAAW;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEtC,IAAI,SAAS,IAAI,MAAM,CAEtB;yCAdU,QAAQ;2CAAR,QAAQ;CAepB"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../src/AppShell.ts"],"names":[],"mappings":"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"}

package/dist/AppShell.js

@@ -1,39 +1,392 @@
 import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.js";
+import { Icon } from "./Icon.js";
 import * as i0 from "@angular/core";
 export class AppShell {
     static stComponentName = "AppShell";
     componentName = "AppShell";
     variant = "workspace";
+    topChrome;
+    primaryRail;
+    navigationPanel;
+    contextPanel;
+    utilityPanel;
+    bottomPanel;
     mainId = "main";
     navigationLabel = "Workspace navigation";
     contextLabel = "Context panel";
     utilityLabel = "Utility panel";
     utilityMode = "reserve";
     utilitySide = "right";
+    panelCollapse = "stack";
+    primaryRailLabel = "Primary rail";
+    navigationPanelLabel;
+    contextPanelLabel;
+    utilityPanelLabel;
     classInput;
+    // Uncontrolled per-panel disclosure state (v1) — each accordion panel
+    // starts collapsed. Desktop rendering never reads these (CSS scopes the
+    // collapse to `@media (max-width: 48rem)`), so they have zero effect above
+    // the breakpoint.
+    primaryRailPanelOpen = false;
+    navigationPanelOpen = false;
+    contextPanelOpen = false;
+    utilityPanelOpen = false;
+    // Static, framework-wide-matching disclosure ids (parity with the Svelte
+    // reference — one AppShell instance per page is the expected usage).
+    primaryRailTriggerId = "st-appShell-primaryRail-trigger";
+    primaryRailRegionId = "st-appShell-primaryRail-region";
+    navigationPanelTriggerId = "st-appShell-navigationPanel-trigger";
+    navigationPanelRegionId = "st-appShell-navigationPanel-region";
+    contextPanelTriggerId = "st-appShell-contextPanel-trigger";
+    contextPanelRegionId = "st-appShell-contextPanel-region";
+    utilityPanelTriggerId = "st-appShell-utilityPanel-trigger";
+    utilityPanelRegionId = "st-appShell-utilityPanel-region";
     get hostClass() {
-        return ["st-appShell", `st-appShell--${this.variant}`, this.classInput].filter(Boolean).join(" ");
+        return classNames("st-appShell", `st-appShell--${this.variant}`, this.classInput);
+    }
+    // Resolved disclosure labels: default to the existing aria-label inputs so
+    // a consumer who already customized navigationLabel/contextLabel/utilityLabel
+    // doesn't need to duplicate the translation for the accordion trigger text.
+    get navigationPanelLabelResolved() {
+        return this.navigationPanelLabel ?? this.navigationLabel;
+    }
+    get contextPanelLabelResolved() {
+        return this.contextPanelLabel ?? this.contextLabel;
+    }
+    get utilityPanelLabelResolved() {
+        return this.utilityPanelLabel ?? this.utilityLabel;
+    }
+    get primaryRailRegionCollapsed() {
+        return this.panelCollapse === "accordion" && !this.primaryRailPanelOpen;
+    }
+    get navigationPanelRegionCollapsed() {
+        return this.panelCollapse === "accordion" && !this.navigationPanelOpen;
+    }
+    get contextPanelRegionCollapsed() {
+        return this.panelCollapse === "accordion" && !this.contextPanelOpen;
+    }
+    get utilityPanelRegionCollapsed() {
+        return this.panelCollapse === "accordion" && !this.utilityPanelOpen;
+    }
+    togglePrimaryRailPanel() {
+        this.primaryRailPanelOpen = !this.primaryRailPanelOpen;
+    }
+    toggleNavigationPanel() {
+        this.navigationPanelOpen = !this.navigationPanelOpen;
+    }
+    toggleContextPanel() {
+        this.contextPanelOpen = !this.contextPanelOpen;
+    }
+    toggleUtilityPanel() {
+        this.utilityPanelOpen = !this.utilityPanelOpen;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AppShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: AppShell, isStandalone: true, selector: "st-app-shell", inputs: { variant: "variant", mainId: "mainId", navigationLabel: "navigationLabel", contextLabel: "contextLabel", utilityLabel: "utilityLabel", utilityMode: "utilityMode", utilitySide: "utilitySide", classInput: ["class", "classInput"] }, ngImport: i0, template: `
-    <div [attr.data-st-component]="componentName" [attr.data-st-app-shell-variant]="variant" [attr.data-utility-mode]="utilityMode" [attr.data-utility-side]="utilitySide" [class]="hostClass">
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AppShell, isStandalone: true, selector: "st-app-shell", inputs: { variant: "variant", topChrome: "topChrome", primaryRail: "primaryRail", navigationPanel: "navigationPanel", contextPanel: "contextPanel", utilityPanel: "utilityPanel", bottomPanel: "bottomPanel", mainId: "mainId", navigationLabel: "navigationLabel", contextLabel: "contextLabel", utilityLabel: "utilityLabel", utilityMode: "utilityMode", utilitySide: "utilitySide", panelCollapse: "panelCollapse", primaryRailLabel: "primaryRailLabel", navigationPanelLabel: "navigationPanelLabel", contextPanelLabel: "contextPanelLabel", utilityPanelLabel: "utilityPanelLabel", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    @if (variant === "site") {
+      <div [attr.data-st-component]="componentName" data-st-app-shell-variant="site" [class]="hostClass">
+        <ng-content></ng-content>
+      </div>
+    } @else {
+      <div
+        [attr.data-st-component]="componentName"
+        data-st-app-shell-variant="workspace"
+        [attr.data-utility-mode]="utilityMode"
+        [attr.data-utility-side]="utilitySide"
+        [attr.data-panel-collapse]="panelCollapse"
+        [class]="hostClass"
+      >
+        @if (topChrome) {
+          <div class="st-appShell__topChrome">
+            <ng-content select="[slot=topChrome]"></ng-content>
+          </div>
+        }
+        <div class="st-appShell__body">
+          @if (primaryRail) {
+            <aside class="st-appShell__primaryRail" [attr.aria-label]="primaryRailLabel">
+              @if (panelCollapse === "accordion") {
+                <button
+                  type="button"
+                  class="st-appShell__panelDisclosure"
+                  [attr.aria-expanded]="primaryRailPanelOpen"
+                  [attr.aria-controls]="primaryRailRegionId"
+                  [id]="primaryRailTriggerId"
+                  (click)="togglePrimaryRailPanel()"
+                >
+                  <span class="st-appShell__panelDisclosureLabel">{{ primaryRailLabel }}</span>
+                  <span class="st-appShell__panelDisclosureIcon" [class.st-appShell__panelDisclosureIcon--expanded]="primaryRailPanelOpen">
+                    <st-icon name="chevron-down" [size]="16"></st-icon>
+                  </span>
+                </button>
+              }
+              <div
+                class="st-appShell__panelRegion"
+                [class.st-appShell__panelRegion--collapsed]="primaryRailRegionCollapsed"
+                [attr.id]="panelCollapse === 'accordion' ? primaryRailRegionId : null"
+                [attr.role]="panelCollapse === 'accordion' ? 'region' : null"
+                [attr.aria-labelledby]="panelCollapse === 'accordion' ? primaryRailTriggerId : null"
+              >
+                <ng-content select="[slot=primaryRail]"></ng-content>
+              </div>
+            </aside>
+          }
+          @if (navigationPanel) {
+            <aside class="st-appShell__navigationPanel" [attr.aria-label]="navigationLabel">
+              @if (panelCollapse === "accordion") {
+                <button
+                  type="button"
+                  class="st-appShell__panelDisclosure"
+                  [attr.aria-expanded]="navigationPanelOpen"
+                  [attr.aria-controls]="navigationPanelRegionId"
+                  [id]="navigationPanelTriggerId"
+                  (click)="toggleNavigationPanel()"
+                >
+                  <span class="st-appShell__panelDisclosureLabel">{{ navigationPanelLabelResolved }}</span>
+                  <span class="st-appShell__panelDisclosureIcon" [class.st-appShell__panelDisclosureIcon--expanded]="navigationPanelOpen">
+                    <st-icon name="chevron-down" [size]="16"></st-icon>
+                  </span>
+                </button>
+              }
+              <div
+                class="st-appShell__panelRegion"
+                [class.st-appShell__panelRegion--collapsed]="navigationPanelRegionCollapsed"
+                [attr.id]="panelCollapse === 'accordion' ? navigationPanelRegionId : null"
+                [attr.role]="panelCollapse === 'accordion' ? 'region' : null"
+                [attr.aria-labelledby]="panelCollapse === 'accordion' ? navigationPanelTriggerId : null"
+              >
+                <ng-content select="[slot=navigationPanel]"></ng-content>
+              </div>
+            </aside>
+          }
+          <main class="st-appShell__main" [id]="mainId">
+            <ng-content select="[slot=main]"></ng-content>
+          </main>
+          @if (contextPanel) {
+            <aside class="st-appShell__contextPanel" [attr.aria-label]="contextLabel">
+              @if (panelCollapse === "accordion") {
+                <button
+                  type="button"
+                  class="st-appShell__panelDisclosure"
+                  [attr.aria-expanded]="contextPanelOpen"
+                  [attr.aria-controls]="contextPanelRegionId"
+                  [id]="contextPanelTriggerId"
+                  (click)="toggleContextPanel()"
+                >
+                  <span class="st-appShell__panelDisclosureLabel">{{ contextPanelLabelResolved }}</span>
+                  <span class="st-appShell__panelDisclosureIcon" [class.st-appShell__panelDisclosureIcon--expanded]="contextPanelOpen">
+                    <st-icon name="chevron-down" [size]="16"></st-icon>
+                  </span>
+                </button>
+              }
+              <div
+                class="st-appShell__panelRegion"
+                [class.st-appShell__panelRegion--collapsed]="contextPanelRegionCollapsed"
+                [attr.id]="panelCollapse === 'accordion' ? contextPanelRegionId : null"
+                [attr.role]="panelCollapse === 'accordion' ? 'region' : null"
+                [attr.aria-labelledby]="panelCollapse === 'accordion' ? contextPanelTriggerId : null"
+              >
+                <ng-content select="[slot=contextPanel]"></ng-content>
+              </div>
+            </aside>
+          }
+          @if (utilityPanel) {
+            <aside class="st-appShell__utilityPanel" [attr.aria-label]="utilityLabel">
+              @if (panelCollapse === "accordion") {
+                <button
+                  type="button"
+                  class="st-appShell__panelDisclosure"
+                  [attr.aria-expanded]="utilityPanelOpen"
+                  [attr.aria-controls]="utilityPanelRegionId"
+                  [id]="utilityPanelTriggerId"
+                  (click)="toggleUtilityPanel()"
+                >
+                  <span class="st-appShell__panelDisclosureLabel">{{ utilityPanelLabelResolved }}</span>
+                  <span class="st-appShell__panelDisclosureIcon" [class.st-appShell__panelDisclosureIcon--expanded]="utilityPanelOpen">
+                    <st-icon name="chevron-down" [size]="16"></st-icon>
+                  </span>
+                </button>
+              }
+              <div
+                class="st-appShell__panelRegion"
+                [class.st-appShell__panelRegion--collapsed]="utilityPanelRegionCollapsed"
+                [attr.id]="panelCollapse === 'accordion' ? utilityPanelRegionId : null"
+                [attr.role]="panelCollapse === 'accordion' ? 'region' : null"
+                [attr.aria-labelledby]="panelCollapse === 'accordion' ? utilityPanelTriggerId : null"
+              >
+                <ng-content select="[slot=utilityPanel]"></ng-content>
+              </div>
+            </aside>
+          }
+        </div>
+        @if (bottomPanel) {
+          <section class="st-appShell__bottomPanel" aria-label="Workspace tools">
+            <ng-content select="[slot=bottomPanel]"></ng-content>
+          </section>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host { display: contents; }"], 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: AppShell, decorators: [{
             type: Component,
-            args: [{
-                    selector: "st-app-shell",
-                    standalone: true,
-                    template: `
-    <div [attr.data-st-component]="componentName" [attr.data-st-app-shell-variant]="variant" [attr.data-utility-mode]="utilityMode" [attr.data-utility-side]="utilitySide" [class]="hostClass">
-      <ng-content></ng-content>
-    </div>
-  `,
-                }]
+            args: [{ selector: "st-app-shell", standalone: true, imports: [Icon], template: `
+    @if (variant === "site") {
+      <div [attr.data-st-component]="componentName" data-st-app-shell-variant="site" [class]="hostClass">
+        <ng-content></ng-content>
+      </div>
+    } @else {
+      <div
+        [attr.data-st-component]="componentName"
+        data-st-app-shell-variant="workspace"
+        [attr.data-utility-mode]="utilityMode"
+        [attr.data-utility-side]="utilitySide"
+        [attr.data-panel-collapse]="panelCollapse"
+        [class]="hostClass"
+      >
+        @if (topChrome) {
+          <div class="st-appShell__topChrome">
+            <ng-content select="[slot=topChrome]"></ng-content>
+          </div>
+        }
+        <div class="st-appShell__body">
+          @if (primaryRail) {
+            <aside class="st-appShell__primaryRail" [attr.aria-label]="primaryRailLabel">
+              @if (panelCollapse === "accordion") {
+                <button
+                  type="button"
+                  class="st-appShell__panelDisclosure"
+                  [attr.aria-expanded]="primaryRailPanelOpen"
+                  [attr.aria-controls]="primaryRailRegionId"
+                  [id]="primaryRailTriggerId"
+                  (click)="togglePrimaryRailPanel()"
+                >
+                  <span class="st-appShell__panelDisclosureLabel">{{ primaryRailLabel }}</span>
+                  <span class="st-appShell__panelDisclosureIcon" [class.st-appShell__panelDisclosureIcon--expanded]="primaryRailPanelOpen">
+                    <st-icon name="chevron-down" [size]="16"></st-icon>
+                  </span>
+                </button>
+              }
+              <div
+                class="st-appShell__panelRegion"
+                [class.st-appShell__panelRegion--collapsed]="primaryRailRegionCollapsed"
+                [attr.id]="panelCollapse === 'accordion' ? primaryRailRegionId : null"
+                [attr.role]="panelCollapse === 'accordion' ? 'region' : null"
+                [attr.aria-labelledby]="panelCollapse === 'accordion' ? primaryRailTriggerId : null"
+              >
+                <ng-content select="[slot=primaryRail]"></ng-content>
+              </div>
+            </aside>
+          }
+          @if (navigationPanel) {
+            <aside class="st-appShell__navigationPanel" [attr.aria-label]="navigationLabel">
+              @if (panelCollapse === "accordion") {
+                <button
+                  type="button"
+                  class="st-appShell__panelDisclosure"
+                  [attr.aria-expanded]="navigationPanelOpen"
+                  [attr.aria-controls]="navigationPanelRegionId"
+                  [id]="navigationPanelTriggerId"
+                  (click)="toggleNavigationPanel()"
+                >
+                  <span class="st-appShell__panelDisclosureLabel">{{ navigationPanelLabelResolved }}</span>
+                  <span class="st-appShell__panelDisclosureIcon" [class.st-appShell__panelDisclosureIcon--expanded]="navigationPanelOpen">
+                    <st-icon name="chevron-down" [size]="16"></st-icon>
+                  </span>
+                </button>
+              }
+              <div
+                class="st-appShell__panelRegion"
+                [class.st-appShell__panelRegion--collapsed]="navigationPanelRegionCollapsed"
+                [attr.id]="panelCollapse === 'accordion' ? navigationPanelRegionId : null"
+                [attr.role]="panelCollapse === 'accordion' ? 'region' : null"
+                [attr.aria-labelledby]="panelCollapse === 'accordion' ? navigationPanelTriggerId : null"
+              >
+                <ng-content select="[slot=navigationPanel]"></ng-content>
+              </div>
+            </aside>
+          }
+          <main class="st-appShell__main" [id]="mainId">
+            <ng-content select="[slot=main]"></ng-content>
+          </main>
+          @if (contextPanel) {
+            <aside class="st-appShell__contextPanel" [attr.aria-label]="contextLabel">
+              @if (panelCollapse === "accordion") {
+                <button
+                  type="button"
+                  class="st-appShell__panelDisclosure"
+                  [attr.aria-expanded]="contextPanelOpen"
+                  [attr.aria-controls]="contextPanelRegionId"
+                  [id]="contextPanelTriggerId"
+                  (click)="toggleContextPanel()"
+                >
+                  <span class="st-appShell__panelDisclosureLabel">{{ contextPanelLabelResolved }}</span>
+                  <span class="st-appShell__panelDisclosureIcon" [class.st-appShell__panelDisclosureIcon--expanded]="contextPanelOpen">
+                    <st-icon name="chevron-down" [size]="16"></st-icon>
+                  </span>
+                </button>
+              }
+              <div
+                class="st-appShell__panelRegion"
+                [class.st-appShell__panelRegion--collapsed]="contextPanelRegionCollapsed"
+                [attr.id]="panelCollapse === 'accordion' ? contextPanelRegionId : null"
+                [attr.role]="panelCollapse === 'accordion' ? 'region' : null"
+                [attr.aria-labelledby]="panelCollapse === 'accordion' ? contextPanelTriggerId : null"
+              >
+                <ng-content select="[slot=contextPanel]"></ng-content>
+              </div>
+            </aside>
+          }
+          @if (utilityPanel) {
+            <aside class="st-appShell__utilityPanel" [attr.aria-label]="utilityLabel">
+              @if (panelCollapse === "accordion") {
+                <button
+                  type="button"
+                  class="st-appShell__panelDisclosure"
+                  [attr.aria-expanded]="utilityPanelOpen"
+                  [attr.aria-controls]="utilityPanelRegionId"
+                  [id]="utilityPanelTriggerId"
+                  (click)="toggleUtilityPanel()"
+                >
+                  <span class="st-appShell__panelDisclosureLabel">{{ utilityPanelLabelResolved }}</span>
+                  <span class="st-appShell__panelDisclosureIcon" [class.st-appShell__panelDisclosureIcon--expanded]="utilityPanelOpen">
+                    <st-icon name="chevron-down" [size]="16"></st-icon>
+                  </span>
+                </button>
+              }
+              <div
+                class="st-appShell__panelRegion"
+                [class.st-appShell__panelRegion--collapsed]="utilityPanelRegionCollapsed"
+                [attr.id]="panelCollapse === 'accordion' ? utilityPanelRegionId : null"
+                [attr.role]="panelCollapse === 'accordion' ? 'region' : null"
+                [attr.aria-labelledby]="panelCollapse === 'accordion' ? utilityPanelTriggerId : null"
+              >
+                <ng-content select="[slot=utilityPanel]"></ng-content>
+              </div>
+            </aside>
+          }
+        </div>
+        @if (bottomPanel) {
+          <section class="st-appShell__bottomPanel" aria-label="Workspace tools">
+            <ng-content select="[slot=bottomPanel]"></ng-content>
+          </section>
+        }
+      </div>
+    }
+  `, styles: [":host { display: contents; }"] }]
         }], propDecorators: { variant: [{
                 type: NgInput
+            }], topChrome: [{
+                type: NgInput
+            }], primaryRail: [{
+                type: NgInput
+            }], navigationPanel: [{
+                type: NgInput
+            }], contextPanel: [{
+                type: NgInput
+            }], utilityPanel: [{
+                type: NgInput
+            }], bottomPanel: [{
+                type: NgInput
             }], mainId: [{
                 type: NgInput
             }], navigationLabel: [{
@@ -46,6 +399,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: NgInput
             }], utilitySide: [{
                 type: NgInput
+            }], panelCollapse: [{
+                type: NgInput
+            }], primaryRailLabel: [{
+                type: NgInput
+            }], navigationPanelLabel: [{
+                type: NgInput
+            }], contextPanelLabel: [{
+                type: NgInput
+            }], utilityPanelLabel: [{
+                type: NgInput
             }], classInput: [{
                 type: NgInput,
                 args: ["class"]

package/dist/AppShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../src/AppShell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;;AA0B5D,MAAM,OAAO,QAAQ;IACnB,MAAM,CAAU,eAAe,GAAG,UAAU,CAAC;IACpC,aAAa,GAAG,UAAU,CAAC;IACzB,OAAO,GAAoB,WAAW,CAAC;IACvC,MAAM,GAAG,MAAM,CAAC;IAChB,eAAe,GAAG,sBAAsB,CAAC;IACzC,YAAY,GAAG,eAAe,CAAC;IAC/B,YAAY,GAAG,eAAe,CAAC;IAC/B,WAAW,GAAwB,SAAS,CAAC;IAC7C,WAAW,GAAwB,OAAO,CAAC;IACpC,UAAU,CAAU;IAEtC,IAAI,SAAS;QACX,OAAO,CAAC,aAAa,EAAE,gBAAgB,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACpG,CAAC;wGAdU,QAAQ;4FAAR,QAAQ,uTANT;;;;GAIT;;4FAEU,QAAQ;kBATpB,SAAS;mBAAC;oBACT,QAAQ,EAAE,cAAc;oBACxB,UAAU,EAAE,IAAI;oBAChB,QAAQ,EAAE;;;;GAIT;iBACF;;sBAIE,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO"}
+{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../src/AppShell.ts"],"names":[],"mappings":"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"}

package/dist/Icon.d.ts

@@ -0,0 +1,32 @@
+import * as i0 from "@angular/core";
+/** A canonical DS icon name accepted by {@link Icon}. */
+export type IconName = "settings" | "eye" | "eye-off" | "layers" | "target" | "close" | "chevron-down" | "chevron-right";
+export type IconProps = {
+    name: IconName;
+    size?: number;
+    strokeWidth?: number;
+    title?: string;
+    class?: string;
+};
+type IconNode = Array<[string, Record<string, string>]>;
+/** All canonical icon names, ordered — useful for docs/catalogs. */
+export declare const ICON_NAMES: IconName[];
+export declare class Icon {
+    static readonly stComponentName = "Icon";
+    readonly componentName = "Icon";
+    /** Canonical DS icon name. */
+    name: IconName;
+    /** Square size in px. Default 18 — the DS-standard inline glyph size. */
+    size?: number;
+    /** Stroke width. Default 2.25 — matches the DS's existing lucide usage. */
+    strokeWidth?: number;
+    /** Accessible name; when omitted the icon is decorative (`aria-hidden`). */
+    titleInput?: string;
+    classInput?: string;
+    get nodes(): IconNode | null;
+    get hostClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Icon, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Icon, "st-icon", never, { "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "titleInput": { "alias": "title"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=Icon.d.ts.map

package/dist/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../src/Icon.ts"],"names":[],"mappings":";AAIA,yDAAyD;AACzD,MAAM,MAAM,QAAQ,GAChB,UAAU,GACV,KAAK,GACL,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,cAAc,GACd,eAAe,CAAC;AAEpB,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,QAAQ,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;AA2CxD,oEAAoE;AACpE,eAAO,MAAM,UAAU,EAA8B,QAAQ,EAAE,CAAC;AAEhE,qBAuCa,IAAI;IACf,MAAM,CAAC,QAAQ,CAAC,eAAe,UAAU;IACzC,QAAQ,CAAC,aAAa,UAAU;IAChC,8BAA8B;IACnB,IAAI,EAAG,QAAQ,CAAC;IAC3B,yEAAyE;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACzB,2EAA2E;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IAChC,4EAA4E;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEtC,IAAI,KAAK,IAAI,QAAQ,GAAG,IAAI,CAE3B;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;yCAnBU,IAAI;2CAAJ,IAAI;CAoBhB"}