fold-ng 0.17.1 → 0.18.0

package/CHANGELOG.md

@@ -8,6 +8,48 @@ All notable changes to **fold-ng** are documented here. The format follows
 
 _Nothing yet._
 
+## [0.18.0] - 2026-08-28
+
+### Added
+
+- **`fold-app-shell` : la bande `subheader`**, sous la barre d'en-tête — une
+  sous-barre de navigation, un ruban de contexte, une rangée de filtres.
+
+  Elle suit **exactement la règle de placement de l'en-tête** :
+  `subheaderLayout="inset"` (par défaut) la pose au-dessus de la colonne de
+  contenu, les rails montant à son flanc ; `"full"` l'étire sur toutes les
+  colonnes, au-dessus des rails. Deux réglages de hauteur l'accompagnent,
+  `subheaderHeight` (52) et `subheaderHeightMobile` (48), avec leurs variables
+  `--fold-shell-subheader-height*` — la même paire entrée typée / variable CSS
+  que le reste de la coque.
+
+  Comme le pied, elle est **auto-effaçante** : sans rien de projeté, elle ne
+  réclame aucune rangée. Elle est rendue en `<div>` nu — `<header>` est déjà
+  pris, et la sémantique de la bande (un `<nav>`, une barre d'outils) appartient
+  à ce que l'application y projette.
+
+  Le tiroir mobile et son voile descendent maintenant de
+  `--fold-shell-chrome-offset` : l'en-tête, plus la bande quand il y en a une.
+  Sans ça, la navigation mobile se serait glissée **par-dessus** la sous-barre.
+
+### Changed
+
+- **`fold-app-shell` : les rangées de la grille sont générées, plus écrites à la
+  main.** Trois bandes optionnellement pleine largeur font dix-huit états ;
+  l'en-tête et le pied à eux seuls occupaient déjà quatre blocs
+  `grid-template-areas`, et ajouter la sous-barre les aurait portés à dix-huit
+  blocs copiés-collés.
+
+  Une boucle les émet depuis les deux mêmes faits que portent déjà les classes
+  de l'hôte. Chaque sélecteur généré est **exact** — une bande encastrée nomme
+  son `:not(.*-full)`, une bande absente son `:not(:has([…]))` — si bien que
+  deux règles ne peuvent plus viser la même coque : la cascade ne départage plus
+  rien, l'ordre des sources non plus. C'est aussi ce qui permet à la version
+  étroite de ré-émettre le même jeu et de gagner simplement en venant après.
+
+  Aucun changement de rendu : les quatre combinaisons existantes produisent les
+  mêmes rangées qu'avant.
+
 ## [0.17.1] - 2026-08-26
 
 ### Fixed
@@ -2204,7 +2246,8 @@ design-token stylesheet.
   `currentColor`; `prefers-reduced-motion` + `forced-colors` are respected;
   strings localise via inputs / providers (`provideFoldPanelLabels`).
 
-[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.17.1...HEAD
+[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.18.0...HEAD
+[0.18.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.18.0
 [0.17.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.17.1
 [0.17.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.17.0
 [0.16.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.16.0

package/fesm2022/fold-ng.mjs

@@ -334,6 +334,8 @@ const MOBILE_BREAKPOINT = 768;
  * ┌────────┬──────────────┬─────────────────────┐
  * │  rail  │ rail          │ header              │  ← header row (fixed height)
  * │ primary│ secondary     ├─────────────────────┤
+ * │        │               │ subheader           │  ← optional band (0 when empty)
+ * │        │               ├─────────────────────┤
  * │ (auto, │ (auto width,  │ content             │  ← content row (1fr)
  * │  self- │  self-        │ (position: relative │
  * │  sized)│  collapsing)  │  anchor for panels) │
@@ -357,6 +359,7 @@ const MOBILE_BREAKPOINT = 768;
  * |------------------|-------------------------------------------|
  * | `railPrimary`    | Left rail (intrinsic width — the rail component sizes itself; `railWidth` sets its base via `--fold-shell-rail-width`). At ≤768px it becomes the mobile drawer (see `mobileNavOpen`). |
  * | `railSecondary`  | Second rail (intrinsic width; a component that collapses to `0` hides itself). |
+ * | `subheader`      | The band **under** the header — a nav sub-bar, a filter strip, a context ribbon. Same placement rule as the header (`subheaderLayout`: over the content column, or full width above the rails), and like the footer it is **self-collapsing**: an empty slot claims no row. Rendered as a plain `<div>`, so the band brings its own semantics (a `<nav>`, a toolbar). |
  * | `header`         | Top bar (content column, or full-width — see `headerLayout`). Rendered as `<header>` — project plain elements into it, not another `<header>`. |
  * | *(default)*      | The content region — routed pages, floating panels, overlays, banners. Rendered as the document's single `<main>`. **Full-bleed**: the shell adds no gutter, so a page can paint edge-to-edge (a full-width banner, a hero, a bleeding panel). Want the themed page gutter? Wrap the page in `fold-page-layout` — padding is *its* job, not the shell's. |
  * | `footer`         | Bottom bar — a player / status strip (`footerBehavior="pinned"`, always in sight) or a legal / support footer (`footerBehavior="scroll"`, revealed at the end of the content). Rendered as `<footer>` (the document's `contentinfo` landmark). **Content-sized and self-collapsing**: an empty slot takes no space (unlike the fixed-height header). Content column, or full-width — see `footerLayout`. |
@@ -367,11 +370,14 @@ const MOBILE_BREAKPOINT = 768;
  * | `railWidth`          | `--fold-shell-rail-width`           | `64px`  | Base width the primary rail reads (column is intrinsic). |
  * | `headerHeight`       | `--fold-shell-header-height`        | `56px`  | Header row height.         |
  * | `headerHeightMobile` | `--fold-shell-header-height-mobile` | `52px`  | Header height at ≤768px.    |
+ * | `subheaderHeight`    | `--fold-shell-subheader-height`     | `52px`  | Subheader band height.     |
+ * | `subheaderHeightMobile` | `--fold-shell-subheader-height-mobile` | `48px` | Subheader height at ≤768px. |
  *
  * ## Layout knobs
  * | Input          | Values                | Default   | Meaning                                    |
  * |----------------|-----------------------|-----------|--------------------------------------------|
  * | `headerLayout` | `"inset" \| "full"`   | `"inset"` | `inset` = header sits over the content column (rails climb its side); `full` = header spans the full width, above the rails. |
+ * | `subheaderLayout` | `"inset" \| "full"` | `"inset"` | Same two positions as the header, for the band under it. Pair it with `headerLayout` — a `full` header over an `inset` sub-bar leaves the rails climbing only half the chrome. |
  * | `footerLayout` | `"inset" \| "full"`   | `"inset"` | `inset` = footer sits under the content column (rails climb its side); `full` = footer spans the full width, below the rails (the usual player-bar look). Ignored when `footerBehavior="scroll"`. |
  * | `footerBehavior`| `"pinned" \| "scroll"`| `"pinned"`| `pinned` = the footer is a fixed row, **always in sight** (a player / status bar) — supports `inset` and `full`. `scroll` = the footer flows at the **end of the content**, revealed when you scroll to the bottom (a legal / support footer) — it lives in the content column (inset). A short page still pushes it to the bottom (the content grows to fill), and a tall page reveals it below the fold; you never manage that. |
  * | `scroll`       | `"scroll" \| "stage"` | `"scroll"`| **Who owns the content scroll.** `scroll` (default) = the shell's content region owns the scroll; pages flow inside it (`fold-page-layout scroll="flow"`), the chrome stays put, a `scroll` footer sits at the true end. `stage` = the content region is a fixed-height stage that does *not* scroll — the page fills it and scrolling happens inside `[foldScrollRegion]` areas (a mail-style split view). See `docs/scroll.md`. |
@@ -435,6 +441,7 @@ const MOBILE_BREAKPOINT = 768;
  *   <app-menu railPrimary foldElevated /><!-- a floating rail; drop it for flat -->
  *   <app-workspace-rail railSecondary />
  *   <app-header header /><!-- its hamburger toggles navOpen at ≤768px -->
+ *   <app-nav-bar subheader /><!-- optional; omit it and the band collapses -->
  *   <router-outlet />
  *   <!-- panels / overlays / banners also go in the default slot -->
  *   <app-player footer /><!-- optional; omit it and the footer row collapses -->
@@ -452,9 +459,18 @@ class FoldAppShellComponent {
     /** Header height at ≤768px in px. Omit to inherit `--fold-shell-header-height-mobile` (52). */
     headerHeightMobile = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "headerHeightMobile" }] : /* istanbul ignore next */ []));
+    /** Subheader band height in px. Omit to inherit `--fold-shell-subheader-height` (52). */
+    subheaderHeight = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "subheaderHeight" }] : /* istanbul ignore next */ []));
+    /** Subheader band height at ≤768px in px. Omit to inherit `--fold-shell-subheader-height-mobile` (48). */
+    subheaderHeightMobile = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "subheaderHeightMobile" }] : /* istanbul ignore next */ []));
     /** `"full"` spans the header across every column, above the rails; `"inset"` (default) keeps it over the content column. */
     headerLayout = input("inset", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "headerLayout" }] : /* istanbul ignore next */ []));
+    /** `"full"` spans the subheader band across every column, above the rails, in step with a `"full"` header; `"inset"` (default) keeps it over the content column. The band claims a row only when something is projected into it. */
+    subheaderLayout = input("inset", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subheaderLayout" }] : /* istanbul ignore next */ []));
     /** `"full"` spans the footer across every column, below the rails (the usual player-bar look); `"inset"` (default) keeps it under the content column. The footer row is content-sized and collapses to `0` when the slot is empty. Ignored when `footerBehavior="scroll"`. */
     footerLayout = input("inset", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "footerLayout" }] : /* istanbul ignore next */ []));
@@ -600,8 +616,12 @@ class FoldAppShellComponent {
     ...(ngDevMode ? [{ debugName: "headerHeightVar" }] : /* istanbul ignore next */ []));
     headerHeightMobileVar = computed(() => pxVar(this.headerHeightMobile()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "headerHeightMobileVar" }] : /* istanbul ignore next */ []));
+    subheaderHeightVar = computed(() => pxVar(this.subheaderHeight()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subheaderHeightVar" }] : /* istanbul ignore next */ []));
+    subheaderHeightMobileVar = computed(() => pxVar(this.subheaderHeightMobile()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subheaderHeightMobileVar" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldAppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldAppShellComponent, isStandalone: true, selector: "fold-app-shell", inputs: { railWidth: { classPropertyName: "railWidth", publicName: "railWidth", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, headerHeightMobile: { classPropertyName: "headerHeightMobile", publicName: "headerHeightMobile", isSignal: true, isRequired: false, transformFunction: null }, headerLayout: { classPropertyName: "headerLayout", publicName: "headerLayout", isSignal: true, isRequired: false, transformFunction: null }, footerLayout: { classPropertyName: "footerLayout", publicName: "footerLayout", isSignal: true, isRequired: false, transformFunction: null }, footerBehavior: { classPropertyName: "footerBehavior", publicName: "footerBehavior", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, skipLinkLabel: { classPropertyName: "skipLinkLabel", publicName: "skipLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, drawerLabel: { classPropertyName: "drawerLabel", publicName: "drawerLabel", isSignal: true, isRequired: false, transformFunction: null }, mobileNav: { classPropertyName: "mobileNav", publicName: "mobileNav", isSignal: true, isRequired: false, transformFunction: null }, mobileNavOpen: { classPropertyName: "mobileNavOpen", publicName: "mobileNavOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mobileNavOpen: "mobileNavOpenChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "style.--fold-shell-rail-width": "railWidthVar()", "style.--fold-shell-header-height": "headerHeightVar()", "style.--fold-shell-header-height-mobile": "headerHeightMobileVar()", "class.header-full": "headerLayout() === \"full\"", "class.footer-full": "footerLayout() === \"full\"", "class.footer-scroll": "footerBehavior() === \"scroll\"", "class.mobile-drawer": "mobileNav() === \"drawer\"", "class.mobile-nav-open": "drawerOpen()", "attr.data-scroll": "scroll()" } }, viewQueries: [{ propertyName: "scrollBox", first: true, predicate: ["scrollBox"], descendants: true, isSignal: true }], exportAs: ["foldAppShell"], ngImport: i0, template: "<!-- Skip-link: the first Tab stop \u2014 visually hidden until focused, then jumps\n     keyboard users past the rails to <main> (which is focusable, tabindex=-1). -->\n<a class=\"skip-link\" [href]=\"'#' + contentId\" (click)=\"skipToContent($event)\">{{\n  skipLinkLabel()\n}}</a>\n\n<!-- The primary rail. While the mobile drawer is open it is a real modal dialog\n     (named, aria-modal, focus-trapped) and every sibling region is inert \u2014 the\n     same bar the panel host holds; on desktop it's a plain nav rail. -->\n<div\n  class=\"rail-primary\"\n  [id]=\"drawerId\"\n  foldSurface=\"chrome\"\n  [foldFocusTrap]=\"drawerOpen()\"\n  [attr.role]=\"drawerOpen() ? 'dialog' : null\"\n  [attr.aria-modal]=\"drawerOpen() ? 'true' : null\"\n  [attr.aria-label]=\"drawerOpen() ? drawerLabel() : null\"\n  tabindex=\"-1\"\n>\n  <ng-content select=\"[railPrimary]\" />\n</div>\n<div\n  class=\"rail-secondary\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[railSecondary]\" />\n</div>\n\n<!-- Mobile drawer scrim \u2014 only rendered while the drawer is actually open (the\n     shell is narrow AND mobileNavOpen). A darkening veil that dismisses on\n     click; Escape and widening close it too. aria-hidden: the focus-trapped\n     drawer + Escape are the accessible path, the scrim is a mouse convenience. -->\n@if (drawerOpen()) {\n  <div class=\"mobile-scrim\" (click)=\"closeMobileNav()\" aria-hidden=\"true\"></div>\n}\n<header\n  class=\"header\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[header]\" />\n</header>\n\n<!-- One footer, stamped in one of two positions \u2014 a grid row (pinned, always in\n     sight) or inside the content scroll (revealed on the way down). A single\n     <ng-content> in a template avoids duplicate-selector projection loss. -->\n<ng-template #footerTpl>\n  <footer\n    class=\"footer\"\n    [class.footer-inflow]=\"footerBehavior() === 'scroll'\"\n    foldSurface=\"chrome\"\n    [attr.inert]=\"drawerOpen() ? '' : null\"\n  >\n    <ng-content select=\"[footer]\" />\n  </footer>\n</ng-template>\n\n<!-- The content region is the fixed, positioned FRAME \u2014 never scrolls, so a\n     docked overlay (the panel host) anchored to it stays put. The scroll lives on\n     the inner `.content-scroll` box; because its containing block is this frame\n     (above the scroll box), an absolutely-positioned panel dock escapes the\n     scroll and floats over the frame. `.content-flow` grows to fill, so a short\n     page still pushes a trailing `scroll` footer to the true bottom. -->\n<main\n  class=\"content\"\n  foldSurface=\"page\"\n  [id]=\"contentId\"\n  tabindex=\"-1\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <div class=\"content-scroll fold-shell-scroll\" #scrollBox>\n    <div class=\"content-flow\"><ng-content /></div>\n    @if (footerBehavior() === \"scroll\") {\n      <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n    }\n  </div>\n</main>\n@if (footerBehavior() !== \"scroll\") {\n  <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;height:100%;width:100%;position:relative;box-sizing:border-box;overflow:hidden;background:var(--fold-color-bg-page);grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}.skip-link{position:absolute;top:0;left:0;z-index:60;margin:var(--fold-space-sm, 8px);padding:var(--fold-space-sm) var(--fold-space-md);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);color:var(--fold-color-text);font-size:var(--fold-text-sm);font-weight:var(--fold-weight-semibold);text-decoration:none;transform:translateY(-150%);transition:transform .12s ease}.skip-link:focus{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}:host(.header-full){grid-template-areas:\"header       header         header\" \"rail-primary rail-secondary content\"}:host(:not(.footer-scroll):has([footer])){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:not(.footer-scroll):has([footer])){grid-template-areas:\"header       header         header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.footer-full:not(.footer-scroll):has([footer])){grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"footer       footer         footer\"}:host(.header-full.footer-full:not(.footer-scroll):has([footer])){grid-template-areas:\"header       header         header\" \"rail-primary rail-secondary content\" \"footer       footer         footer\"}.rail-primary{grid-area:rail-primary;min-height:0;background:var(--fold-color-bg-rail-primary)}.rail-secondary{grid-area:rail-secondary;min-height:0;background:var(--fold-color-bg-rail-secondary)}.header{grid-area:header;min-width:0;background:var(--fold-color-bg-header)}.footer{grid-area:footer;min-width:0;min-height:0;background:var(--fold-color-bg-header)}.content{grid-area:content;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.content:focus{outline:none}.content-scroll{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;scrollbar-width:thin;scrollbar-color:var(--fold-scrollbar-thumb, color-mix(in srgb, currentColor 24%, transparent)) var(--fold-scrollbar-track, transparent);overflow-anchor:auto}:host([data-scroll=scroll]) .content-scroll,:host(.footer-scroll) .content-scroll{overflow-y:auto}.content-flow{flex:1 0 auto;min-width:0;min-height:0;display:flex;flex-direction:column}.footer-inflow{flex:none}.rail-primary:has([data-elevated]),.rail-secondary:has([data-elevated]),.header:has([data-elevated]),.footer:has([data-elevated]),.content:has([data-elevated]){padding:var(--fold-surface-inset, var(--fold-space-md))}@media(max-width:768px){:host,:host(.header-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.footer-scroll):has([footer])),:host(.header-full:not(.footer-scroll):has([footer])),:host(.footer-full:not(.footer-scroll):has([footer])),:host(.header-full.footer-full:not(.footer-scroll):has([footer])){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-header-height-mobile, 52px);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-header-height-mobile, 52px) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content-scroll{overflow:hidden}}@container (max-width: 1024px){.rail-secondary{display:none}}@container (max-width: 768px){:host,:host(.header-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.footer-scroll):has([footer])),:host(.header-full:not(.footer-scroll):has([footer])),:host(.footer-full:not(.footer-scroll):has([footer])),:host(.header-full.footer-full:not(.footer-scroll):has([footer])){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-header-height-mobile, 52px);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-header-height-mobile, 52px) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content-scroll{overflow:hidden}}@keyframes fold-shell-scrim-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.rail-primary,.mobile-scrim{transition:none;animation:none}}\n"], dependencies: [{ kind: "directive", type: FoldSurfaceDirective, selector: "[foldSurface]", inputs: ["foldSurface"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusTrapDirective, selector: "[foldFocusTrap]", inputs: ["foldFocusTrap"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldAppShellComponent, isStandalone: true, selector: "fold-app-shell", inputs: { railWidth: { classPropertyName: "railWidth", publicName: "railWidth", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, headerHeightMobile: { classPropertyName: "headerHeightMobile", publicName: "headerHeightMobile", isSignal: true, isRequired: false, transformFunction: null }, subheaderHeight: { classPropertyName: "subheaderHeight", publicName: "subheaderHeight", isSignal: true, isRequired: false, transformFunction: null }, subheaderHeightMobile: { classPropertyName: "subheaderHeightMobile", publicName: "subheaderHeightMobile", isSignal: true, isRequired: false, transformFunction: null }, headerLayout: { classPropertyName: "headerLayout", publicName: "headerLayout", isSignal: true, isRequired: false, transformFunction: null }, subheaderLayout: { classPropertyName: "subheaderLayout", publicName: "subheaderLayout", isSignal: true, isRequired: false, transformFunction: null }, footerLayout: { classPropertyName: "footerLayout", publicName: "footerLayout", isSignal: true, isRequired: false, transformFunction: null }, footerBehavior: { classPropertyName: "footerBehavior", publicName: "footerBehavior", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, skipLinkLabel: { classPropertyName: "skipLinkLabel", publicName: "skipLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, drawerLabel: { classPropertyName: "drawerLabel", publicName: "drawerLabel", isSignal: true, isRequired: false, transformFunction: null }, mobileNav: { classPropertyName: "mobileNav", publicName: "mobileNav", isSignal: true, isRequired: false, transformFunction: null }, mobileNavOpen: { classPropertyName: "mobileNavOpen", publicName: "mobileNavOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mobileNavOpen: "mobileNavOpenChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "style.--fold-shell-rail-width": "railWidthVar()", "style.--fold-shell-header-height": "headerHeightVar()", "style.--fold-shell-header-height-mobile": "headerHeightMobileVar()", "style.--fold-shell-subheader-height": "subheaderHeightVar()", "style.--fold-shell-subheader-height-mobile": "subheaderHeightMobileVar()", "class.header-full": "headerLayout() === \"full\"", "class.subheader-full": "subheaderLayout() === \"full\"", "class.footer-full": "footerLayout() === \"full\"", "class.footer-scroll": "footerBehavior() === \"scroll\"", "class.mobile-drawer": "mobileNav() === \"drawer\"", "class.mobile-nav-open": "drawerOpen()", "attr.data-scroll": "scroll()" } }, viewQueries: [{ propertyName: "scrollBox", first: true, predicate: ["scrollBox"], descendants: true, isSignal: true }], exportAs: ["foldAppShell"], ngImport: i0, template: "<!-- Skip-link: the first Tab stop \u2014 visually hidden until focused, then jumps\n     keyboard users past the rails to <main> (which is focusable, tabindex=-1). -->\n<a class=\"skip-link\" [href]=\"'#' + contentId\" (click)=\"skipToContent($event)\">{{\n  skipLinkLabel()\n}}</a>\n\n<!-- The primary rail. While the mobile drawer is open it is a real modal dialog\n     (named, aria-modal, focus-trapped) and every sibling region is inert \u2014 the\n     same bar the panel host holds; on desktop it's a plain nav rail. -->\n<div\n  class=\"rail-primary\"\n  [id]=\"drawerId\"\n  foldSurface=\"chrome\"\n  [foldFocusTrap]=\"drawerOpen()\"\n  [attr.role]=\"drawerOpen() ? 'dialog' : null\"\n  [attr.aria-modal]=\"drawerOpen() ? 'true' : null\"\n  [attr.aria-label]=\"drawerOpen() ? drawerLabel() : null\"\n  tabindex=\"-1\"\n>\n  <ng-content select=\"[railPrimary]\" />\n</div>\n<div\n  class=\"rail-secondary\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[railSecondary]\" />\n</div>\n\n<!-- Mobile drawer scrim \u2014 only rendered while the drawer is actually open (the\n     shell is narrow AND mobileNavOpen). A darkening veil that dismisses on\n     click; Escape and widening close it too. aria-hidden: the focus-trapped\n     drawer + Escape are the accessible path, the scrim is a mouse convenience. -->\n@if (drawerOpen()) {\n  <div class=\"mobile-scrim\" (click)=\"closeMobileNav()\" aria-hidden=\"true\"></div>\n}\n<header\n  class=\"header\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[header]\" />\n</header>\n\n<!-- The band under the header: a nav sub-bar, a filter strip, a context ribbon.\n     A plain <div> on purpose \u2014 <header> is taken, and the band's own semantics\n     (a <nav>, a toolbar) belong to what the app projects into it. Like the\n     footer, it claims a grid row only when something is actually projected. -->\n<div\n  class=\"subheader\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[subheader]\" />\n</div>\n\n<!-- One footer, stamped in one of two positions \u2014 a grid row (pinned, always in\n     sight) or inside the content scroll (revealed on the way down). A single\n     <ng-content> in a template avoids duplicate-selector projection loss. -->\n<ng-template #footerTpl>\n  <footer\n    class=\"footer\"\n    [class.footer-inflow]=\"footerBehavior() === 'scroll'\"\n    foldSurface=\"chrome\"\n    [attr.inert]=\"drawerOpen() ? '' : null\"\n  >\n    <ng-content select=\"[footer]\" />\n  </footer>\n</ng-template>\n\n<!-- The content region is the fixed, positioned FRAME \u2014 never scrolls, so a\n     docked overlay (the panel host) anchored to it stays put. The scroll lives on\n     the inner `.content-scroll` box; because its containing block is this frame\n     (above the scroll box), an absolutely-positioned panel dock escapes the\n     scroll and floats over the frame. `.content-flow` grows to fill, so a short\n     page still pushes a trailing `scroll` footer to the true bottom. -->\n<main\n  class=\"content\"\n  foldSurface=\"page\"\n  [id]=\"contentId\"\n  tabindex=\"-1\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <div class=\"content-scroll fold-shell-scroll\" #scrollBox>\n    <div class=\"content-flow\"><ng-content /></div>\n    @if (footerBehavior() === \"scroll\") {\n      <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n    }\n  </div>\n</main>\n@if (footerBehavior() !== \"scroll\") {\n  <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;height:100%;width:100%;position:relative;box-sizing:border-box;overflow:hidden;background:var(--fold-color-bg-page);grid-template-columns:auto auto minmax(0,1fr)}:host{--fold-shell-chrome-offset: var(--fold-shell-header-height-mobile, 52px)}:host(:has([subheader])){--fold-shell-chrome-offset: calc( var(--fold-shell-header-height-mobile, 52px) + var(--fold-shell-subheader-height-mobile, 48px) )}.skip-link{position:absolute;top:0;left:0;z-index:60;margin:var(--fold-space-sm, 8px);padding:var(--fold-space-sm) var(--fold-space-md);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);color:var(--fold-color-text);font-size:var(--fold-text-sm);font-weight:var(--fold-weight-semibold);text-decoration:none;transform:translateY(-150%);transition:transform .12s ease}.skip-link:focus{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\"}:host(.header-full:not(:has([subheader])).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}.rail-primary{grid-area:rail-primary;min-height:0;background:var(--fold-color-bg-rail-primary)}.rail-secondary{grid-area:rail-secondary;min-height:0;background:var(--fold-color-bg-rail-secondary)}.header{grid-area:header;min-width:0;background:var(--fold-color-bg-header)}.subheader{grid-area:subheader;min-width:0;background:var(--fold-color-bg-header)}.footer{grid-area:footer;min-width:0;min-height:0;background:var(--fold-color-bg-header)}.content{grid-area:content;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.content:focus{outline:none}.content-scroll{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;scrollbar-width:thin;scrollbar-color:var(--fold-scrollbar-thumb, color-mix(in srgb, currentColor 24%, transparent)) var(--fold-scrollbar-track, transparent);overflow-anchor:auto}:host([data-scroll=scroll]) .content-scroll,:host(.footer-scroll) .content-scroll{overflow-y:auto}.content-flow{flex:1 0 auto;min-width:0;min-height:0;display:flex;flex-direction:column}.footer-inflow{flex:none}.rail-primary:has([data-elevated]),.rail-secondary:has([data-elevated]),.header:has([data-elevated]),.subheader:has([data-elevated]),.footer:has([data-elevated]),.content:has([data-elevated]){padding:var(--fold-surface-inset, var(--fold-space-md))}@media(max-width:768px){:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-chrome-offset);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-chrome-offset) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content-scroll{overflow:hidden}}@container (max-width: 1024px){.rail-secondary{display:none}}@container (max-width: 768px){:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-chrome-offset);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-chrome-offset) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content-scroll{overflow:hidden}}@keyframes fold-shell-scrim-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.rail-primary,.mobile-scrim{transition:none;animation:none}}\n"], dependencies: [{ kind: "directive", type: FoldSurfaceDirective, selector: "[foldSurface]", inputs: ["foldSurface"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusTrapDirective, selector: "[foldFocusTrap]", inputs: ["foldFocusTrap"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldAppShellComponent, decorators: [{
             type: Component,
@@ -609,14 +629,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         "[style.--fold-shell-rail-width]": "railWidthVar()",
                         "[style.--fold-shell-header-height]": "headerHeightVar()",
                         "[style.--fold-shell-header-height-mobile]": "headerHeightMobileVar()",
+                        "[style.--fold-shell-subheader-height]": "subheaderHeightVar()",
+                        "[style.--fold-shell-subheader-height-mobile]": "subheaderHeightMobileVar()",
                         "[class.header-full]": 'headerLayout() === "full"',
+                        "[class.subheader-full]": 'subheaderLayout() === "full"',
                         "[class.footer-full]": 'footerLayout() === "full"',
                         "[class.footer-scroll]": 'footerBehavior() === "scroll"',
                         "[class.mobile-drawer]": 'mobileNav() === "drawer"',
                         "[class.mobile-nav-open]": "drawerOpen()",
                         "[attr.data-scroll]": "scroll()",
-                    }, template: "<!-- Skip-link: the first Tab stop \u2014 visually hidden until focused, then jumps\n     keyboard users past the rails to <main> (which is focusable, tabindex=-1). -->\n<a class=\"skip-link\" [href]=\"'#' + contentId\" (click)=\"skipToContent($event)\">{{\n  skipLinkLabel()\n}}</a>\n\n<!-- The primary rail. While the mobile drawer is open it is a real modal dialog\n     (named, aria-modal, focus-trapped) and every sibling region is inert \u2014 the\n     same bar the panel host holds; on desktop it's a plain nav rail. -->\n<div\n  class=\"rail-primary\"\n  [id]=\"drawerId\"\n  foldSurface=\"chrome\"\n  [foldFocusTrap]=\"drawerOpen()\"\n  [attr.role]=\"drawerOpen() ? 'dialog' : null\"\n  [attr.aria-modal]=\"drawerOpen() ? 'true' : null\"\n  [attr.aria-label]=\"drawerOpen() ? drawerLabel() : null\"\n  tabindex=\"-1\"\n>\n  <ng-content select=\"[railPrimary]\" />\n</div>\n<div\n  class=\"rail-secondary\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[railSecondary]\" />\n</div>\n\n<!-- Mobile drawer scrim \u2014 only rendered while the drawer is actually open (the\n     shell is narrow AND mobileNavOpen). A darkening veil that dismisses on\n     click; Escape and widening close it too. aria-hidden: the focus-trapped\n     drawer + Escape are the accessible path, the scrim is a mouse convenience. -->\n@if (drawerOpen()) {\n  <div class=\"mobile-scrim\" (click)=\"closeMobileNav()\" aria-hidden=\"true\"></div>\n}\n<header\n  class=\"header\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[header]\" />\n</header>\n\n<!-- One footer, stamped in one of two positions \u2014 a grid row (pinned, always in\n     sight) or inside the content scroll (revealed on the way down). A single\n     <ng-content> in a template avoids duplicate-selector projection loss. -->\n<ng-template #footerTpl>\n  <footer\n    class=\"footer\"\n    [class.footer-inflow]=\"footerBehavior() === 'scroll'\"\n    foldSurface=\"chrome\"\n    [attr.inert]=\"drawerOpen() ? '' : null\"\n  >\n    <ng-content select=\"[footer]\" />\n  </footer>\n</ng-template>\n\n<!-- The content region is the fixed, positioned FRAME \u2014 never scrolls, so a\n     docked overlay (the panel host) anchored to it stays put. The scroll lives on\n     the inner `.content-scroll` box; because its containing block is this frame\n     (above the scroll box), an absolutely-positioned panel dock escapes the\n     scroll and floats over the frame. `.content-flow` grows to fill, so a short\n     page still pushes a trailing `scroll` footer to the true bottom. -->\n<main\n  class=\"content\"\n  foldSurface=\"page\"\n  [id]=\"contentId\"\n  tabindex=\"-1\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <div class=\"content-scroll fold-shell-scroll\" #scrollBox>\n    <div class=\"content-flow\"><ng-content /></div>\n    @if (footerBehavior() === \"scroll\") {\n      <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n    }\n  </div>\n</main>\n@if (footerBehavior() !== \"scroll\") {\n  <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;height:100%;width:100%;position:relative;box-sizing:border-box;overflow:hidden;background:var(--fold-color-bg-page);grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}.skip-link{position:absolute;top:0;left:0;z-index:60;margin:var(--fold-space-sm, 8px);padding:var(--fold-space-sm) var(--fold-space-md);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);color:var(--fold-color-text);font-size:var(--fold-text-sm);font-weight:var(--fold-weight-semibold);text-decoration:none;transform:translateY(-150%);transition:transform .12s ease}.skip-link:focus{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}:host(.header-full){grid-template-areas:\"header       header         header\" \"rail-primary rail-secondary content\"}:host(:not(.footer-scroll):has([footer])){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:not(.footer-scroll):has([footer])){grid-template-areas:\"header       header         header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.footer-full:not(.footer-scroll):has([footer])){grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"footer       footer         footer\"}:host(.header-full.footer-full:not(.footer-scroll):has([footer])){grid-template-areas:\"header       header         header\" \"rail-primary rail-secondary content\" \"footer       footer         footer\"}.rail-primary{grid-area:rail-primary;min-height:0;background:var(--fold-color-bg-rail-primary)}.rail-secondary{grid-area:rail-secondary;min-height:0;background:var(--fold-color-bg-rail-secondary)}.header{grid-area:header;min-width:0;background:var(--fold-color-bg-header)}.footer{grid-area:footer;min-width:0;min-height:0;background:var(--fold-color-bg-header)}.content{grid-area:content;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.content:focus{outline:none}.content-scroll{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;scrollbar-width:thin;scrollbar-color:var(--fold-scrollbar-thumb, color-mix(in srgb, currentColor 24%, transparent)) var(--fold-scrollbar-track, transparent);overflow-anchor:auto}:host([data-scroll=scroll]) .content-scroll,:host(.footer-scroll) .content-scroll{overflow-y:auto}.content-flow{flex:1 0 auto;min-width:0;min-height:0;display:flex;flex-direction:column}.footer-inflow{flex:none}.rail-primary:has([data-elevated]),.rail-secondary:has([data-elevated]),.header:has([data-elevated]),.footer:has([data-elevated]),.content:has([data-elevated]){padding:var(--fold-surface-inset, var(--fold-space-md))}@media(max-width:768px){:host,:host(.header-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.footer-scroll):has([footer])),:host(.header-full:not(.footer-scroll):has([footer])),:host(.footer-full:not(.footer-scroll):has([footer])),:host(.header-full.footer-full:not(.footer-scroll):has([footer])){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-header-height-mobile, 52px);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-header-height-mobile, 52px) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content-scroll{overflow:hidden}}@container (max-width: 1024px){.rail-secondary{display:none}}@container (max-width: 768px){:host,:host(.header-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.footer-scroll):has([footer])),:host(.header-full:not(.footer-scroll):has([footer])),:host(.footer-full:not(.footer-scroll):has([footer])),:host(.header-full.footer-full:not(.footer-scroll):has([footer])){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-header-height-mobile, 52px);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-header-height-mobile, 52px) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content-scroll{overflow:hidden}}@keyframes fold-shell-scrim-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.rail-primary,.mobile-scrim{transition:none;animation:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { railWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "railWidth", required: false }] }], headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: false }] }], headerHeightMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeightMobile", required: false }] }], headerLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerLayout", required: false }] }], footerLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerLayout", required: false }] }], footerBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerBehavior", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkLabel", required: false }] }], drawerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerLabel", required: false }] }], mobileNav: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileNav", required: false }] }], mobileNavOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileNavOpen", required: false }] }, { type: i0.Output, args: ["mobileNavOpenChange"] }], scrollBox: [{ type: i0.ViewChild, args: ["scrollBox", { isSignal: true }] }], onEscape: [{
+                    }, template: "<!-- Skip-link: the first Tab stop \u2014 visually hidden until focused, then jumps\n     keyboard users past the rails to <main> (which is focusable, tabindex=-1). -->\n<a class=\"skip-link\" [href]=\"'#' + contentId\" (click)=\"skipToContent($event)\">{{\n  skipLinkLabel()\n}}</a>\n\n<!-- The primary rail. While the mobile drawer is open it is a real modal dialog\n     (named, aria-modal, focus-trapped) and every sibling region is inert \u2014 the\n     same bar the panel host holds; on desktop it's a plain nav rail. -->\n<div\n  class=\"rail-primary\"\n  [id]=\"drawerId\"\n  foldSurface=\"chrome\"\n  [foldFocusTrap]=\"drawerOpen()\"\n  [attr.role]=\"drawerOpen() ? 'dialog' : null\"\n  [attr.aria-modal]=\"drawerOpen() ? 'true' : null\"\n  [attr.aria-label]=\"drawerOpen() ? drawerLabel() : null\"\n  tabindex=\"-1\"\n>\n  <ng-content select=\"[railPrimary]\" />\n</div>\n<div\n  class=\"rail-secondary\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[railSecondary]\" />\n</div>\n\n<!-- Mobile drawer scrim \u2014 only rendered while the drawer is actually open (the\n     shell is narrow AND mobileNavOpen). A darkening veil that dismisses on\n     click; Escape and widening close it too. aria-hidden: the focus-trapped\n     drawer + Escape are the accessible path, the scrim is a mouse convenience. -->\n@if (drawerOpen()) {\n  <div class=\"mobile-scrim\" (click)=\"closeMobileNav()\" aria-hidden=\"true\"></div>\n}\n<header\n  class=\"header\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[header]\" />\n</header>\n\n<!-- The band under the header: a nav sub-bar, a filter strip, a context ribbon.\n     A plain <div> on purpose \u2014 <header> is taken, and the band's own semantics\n     (a <nav>, a toolbar) belong to what the app projects into it. Like the\n     footer, it claims a grid row only when something is actually projected. -->\n<div\n  class=\"subheader\"\n  foldSurface=\"chrome\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <ng-content select=\"[subheader]\" />\n</div>\n\n<!-- One footer, stamped in one of two positions \u2014 a grid row (pinned, always in\n     sight) or inside the content scroll (revealed on the way down). A single\n     <ng-content> in a template avoids duplicate-selector projection loss. -->\n<ng-template #footerTpl>\n  <footer\n    class=\"footer\"\n    [class.footer-inflow]=\"footerBehavior() === 'scroll'\"\n    foldSurface=\"chrome\"\n    [attr.inert]=\"drawerOpen() ? '' : null\"\n  >\n    <ng-content select=\"[footer]\" />\n  </footer>\n</ng-template>\n\n<!-- The content region is the fixed, positioned FRAME \u2014 never scrolls, so a\n     docked overlay (the panel host) anchored to it stays put. The scroll lives on\n     the inner `.content-scroll` box; because its containing block is this frame\n     (above the scroll box), an absolutely-positioned panel dock escapes the\n     scroll and floats over the frame. `.content-flow` grows to fill, so a short\n     page still pushes a trailing `scroll` footer to the true bottom. -->\n<main\n  class=\"content\"\n  foldSurface=\"page\"\n  [id]=\"contentId\"\n  tabindex=\"-1\"\n  [attr.inert]=\"drawerOpen() ? '' : null\"\n>\n  <div class=\"content-scroll fold-shell-scroll\" #scrollBox>\n    <div class=\"content-flow\"><ng-content /></div>\n    @if (footerBehavior() === \"scroll\") {\n      <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n    }\n  </div>\n</main>\n@if (footerBehavior() !== \"scroll\") {\n  <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;height:100%;width:100%;position:relative;box-sizing:border-box;overflow:hidden;background:var(--fold-color-bg-page);grid-template-columns:auto auto minmax(0,1fr)}:host{--fold-shell-chrome-offset: var(--fold-shell-header-height-mobile, 52px)}:host(:has([subheader])){--fold-shell-chrome-offset: calc( var(--fold-shell-header-height-mobile, 52px) + var(--fold-shell-subheader-height-mobile, 48px) )}.skip-link{position:absolute;top:0;left:0;z-index:60;margin:var(--fold-space-sm, 8px);padding:var(--fold-space-sm) var(--fold-space-md);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);color:var(--fold-color-text);font-size:var(--fold-text-sm);font-weight:var(--fold-weight-semibold);text-decoration:none;transform:translateY(-150%);transition:transform .12s ease}.skip-link:focus{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"rail-primary rail-secondary header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\"}:host(.header-full:not(:has([subheader])).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"rail-primary rail-secondary subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"rail-primary rail-secondary footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-rows:var(--fold-shell-header-height, 56px) var(--fold-shell-subheader-height, 52px) 1fr auto;grid-template-areas:\"header header header\" \"subheader subheader subheader\" \"rail-primary rail-secondary content\" \"footer footer footer\"}.rail-primary{grid-area:rail-primary;min-height:0;background:var(--fold-color-bg-rail-primary)}.rail-secondary{grid-area:rail-secondary;min-height:0;background:var(--fold-color-bg-rail-secondary)}.header{grid-area:header;min-width:0;background:var(--fold-color-bg-header)}.subheader{grid-area:subheader;min-width:0;background:var(--fold-color-bg-header)}.footer{grid-area:footer;min-width:0;min-height:0;background:var(--fold-color-bg-header)}.content{grid-area:content;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.content:focus{outline:none}.content-scroll{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;scrollbar-width:thin;scrollbar-color:var(--fold-scrollbar-thumb, color-mix(in srgb, currentColor 24%, transparent)) var(--fold-scrollbar-track, transparent);overflow-anchor:auto}:host([data-scroll=scroll]) .content-scroll,:host(.footer-scroll) .content-scroll{overflow-y:auto}.content-flow{flex:1 0 auto;min-width:0;min-height:0;display:flex;flex-direction:column}.footer-inflow{flex:none}.rail-primary:has([data-elevated]),.rail-secondary:has([data-elevated]),.header:has([data-elevated]),.subheader:has([data-elevated]),.footer:has([data-elevated]),.content:has([data-elevated]){padding:var(--fold-surface-inset, var(--fold-space-md))}@media(max-width:768px){:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-chrome-offset);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-chrome-offset) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content-scroll{overflow:hidden}}@container (max-width: 1024px){.rail-secondary{display:none}}@container (max-width: 768px){:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(:not(.header-full):has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr;grid-template-areas:\"header\" \"content\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:not(:has([subheader])):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) 1fr auto;grid-template-areas:\"header\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full).footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]):not(.subheader-full):not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):not(:has([footer]))){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full.footer-scroll){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr;grid-template-areas:\"header\" \"subheader\" \"content\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]):not(.footer-full)){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}:host(.header-full:has([subheader]).subheader-full:not(.footer-scroll):has([footer]).footer-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-shell-header-height-mobile, 52px) var(--fold-shell-subheader-height-mobile, 48px) 1fr auto;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\"}.rail-primary,.rail-secondary{display:none}:host(.mobile-drawer) .rail-primary{display:block;position:absolute;top:var(--fold-shell-chrome-offset);bottom:0;left:0;z-index:41;width:auto;max-width:85%;overflow-y:auto;visibility:hidden;transform:translate(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}:host(.mobile-drawer.mobile-nav-open) .rail-primary{visibility:visible;transform:translate(0)}.mobile-scrim{position:absolute;inset:var(--fold-shell-chrome-offset) 0 0 0;z-index:40;border:0;padding:0;background:var(--fold-color-scrim);animation:fold-shell-scrim-in .24s ease}:host(.mobile-nav-open) .content-scroll{overflow:hidden}}@keyframes fold-shell-scrim-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.rail-primary,.mobile-scrim{transition:none;animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { railWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "railWidth", required: false }] }], headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: false }] }], headerHeightMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeightMobile", required: false }] }], subheaderHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheaderHeight", required: false }] }], subheaderHeightMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheaderHeightMobile", required: false }] }], headerLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerLayout", required: false }] }], subheaderLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheaderLayout", required: false }] }], footerLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerLayout", required: false }] }], footerBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerBehavior", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkLabel", required: false }] }], drawerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerLabel", required: false }] }], mobileNav: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileNav", required: false }] }], mobileNavOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileNavOpen", required: false }] }, { type: i0.Output, args: ["mobileNavOpenChange"] }], scrollBox: [{ type: i0.ViewChild, args: ["scrollBox", { isSignal: true }] }], onEscape: [{
                 type: HostListener,
                 args: ["document:keydown.escape"]
             }] } });