fold-ng 0.17.1 → 0.19.0

package/CHANGELOG.md

@@ -8,6 +8,72 @@ All notable changes to **fold-ng** are documented here. The format follows
 
 _Nothing yet._
 
+## [0.19.0] - 2026-08-28
+
+### Added
+
+- **`fold-element-title` : la variante `caps`** — les capitales à la taille et à
+  l'encre du titre, pour une RÉGION qui s'annonce : un puits, un rail, une
+  bande.
+
+  `eyebrow` chuchote au-dessus d'une chose, `caps` NOMME la chose — d'où
+  l'encre pleine et non la teinte atténuée. Elle comblait un trou réel : entre
+  un sur-titre de 10 px et un titre en bas de casse, il n'existait aucun
+  registre pour la tête d'une section qui doit se lire d'un bout de l'écran à
+  l'autre.
+
+  ⚠️ Son interlettrage reste **positif** (`--fold-tracking-caps`). Des capitales
+  ont besoin d'air entre les fûts : le resserrement qui flatte une grande ligne
+  d'affichage les soude à cette taille-là. C'est un défaut qui ne se voit que
+  sur fond clair — sur un fond sombre, la halation du texte le rattrape — et
+  qui fait donc rendre deux titres différemment pour des règles identiques.
+
+  Le glyphe de tête y reste **plein**, sans la tuile de 40 px du variant
+  `title` : une tuile à côté d'une ligne de capitales de 14 px pèserait plus
+  lourd que les mots qu'elle introduit.
+
+## [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 +2270,9 @@ 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.19.0...HEAD
+[0.19.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.19.0
+[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"]
             }] } });
@@ -3659,6 +3682,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * - `title` — normal-case, `text-md`, primary. A card/panel heading; a leading
  *   `icon` renders in a tile whose tone is set by `iconTone`
  *   (`neutral` raised · `primary` filled brand · `faded` dim).
+ * - `caps` — uppercase at the title's size and in primary ink. The register for
+ *   a REGION that announces itself: a well, a rail, a band. `eyebrow` whispers
+ *   above a thing, `caps` names the thing — which is why it takes the full text
+ *   colour and not the muted one.
  *
  * A trailing action (edit/add button, lock badge) projects into `[titleAction]`,
  * right-aligned. The title — not the action — is the heading for assistive tech.
@@ -3669,6 +3696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * ```html
  * <fold-element-title title="Documents" variant="bar" />
  * <fold-element-title variant="title" icon="company" title="Contexte" subtitle="Activité de l'espace" />
+ * <fold-element-title variant="caps" title="Mes suivis" subtitle="3 en cours" />
  * <fold-element-title title="Poste">
  *   <button titleAction (click)="edit()">✎</button>
  * </fold-element-title>
@@ -3687,7 +3715,8 @@ class FoldElementTitleComponent {
     /** Optional secondary line under the title. */
     subtitle = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
-    /** Emphasis — `eyebrow` (10px muted), `bar` (11px secondary), `title` (text-md, normal-case). */
+    /** Emphasis — `eyebrow` (10px muted), `bar` (11px secondary), `title` (text-md,
+     *  normal-case), `caps` (title-size uppercase, primary ink). */
     variant = input("eyebrow", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     /** Heading outline depth exposed to assistive tech (`aria-level`). */
@@ -3700,19 +3729,20 @@ class FoldElementTitleComponent {
     iconSize = computed(() => this.variant() === "title" ? "md" : "sm", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldElementTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldElementTitleComponent, isStandalone: true, selector: "fold-element-title", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, headingId: { classPropertyName: "headingId", publicName: "headingId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.v-bar": "variant() === 'bar'", "class.v-title": "variant() === 'title'", "class.it-primary": "iconTone() === 'primary'", "class.it-faded": "iconTone() === 'faded'", "attr.title": "null" } }, ngImport: i0, template: "@if (icon(); as ic) {\n  <span class=\"et-icon\"><fold-icon [name]=\"ic\" [size]=\"iconSize()\" /></span>\n}\n<span class=\"et-main\">\n  <span class=\"et-row\">\n    <span\n      class=\"et-label\"\n      role=\"heading\"\n      [attr.id]=\"headingId()\"\n      [attr.aria-level]=\"level()\"\n      >{{ title() }}</span\n    >\n    <span class=\"et-action\"><ng-content select=\"[titleAction]\" /></span>\n  </span>\n  @if (subtitle(); as s) {\n    <span class=\"et-sub\">{{ s }}</span>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--fold-space-md);margin:0}.et-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.et-row{display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-sm)}.et-label{min-width:0;font-family:var(--fold-font-label);font-size:var(--fold-text-2xs);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-caps);text-transform:uppercase;color:var(--fold-color-text-muted)}:host(.v-bar) .et-label{font-size:var(--fold-text-xs);color:var(--fold-color-text-secondary)}:host(.v-title) .et-label{font-size:var(--fold-text-base);letter-spacing:var(--fold-tracking-normal);text-transform:none;color:var(--fold-color-text)}.et-sub{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}.et-action{flex:none;display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.et-action:empty{display:none}.et-icon{flex:none;display:grid;place-items:center;color:var(--fold-color-primary)}:host(.v-title) .et-icon{width:40px;height:40px;border-radius:var(--fold-radius-md);border:1px solid var(--fold-color-border);background:var(--fold-color-surface-raised)}:host(.v-title.it-primary) .et-icon{background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}:host(.v-title.it-faded) .et-icon{background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);color:var(--fold-color-text-muted)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldElementTitleComponent, isStandalone: true, selector: "fold-element-title", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, headingId: { classPropertyName: "headingId", publicName: "headingId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.v-bar": "variant() === 'bar'", "class.v-title": "variant() === 'title'", "class.v-caps": "variant() === 'caps'", "class.it-primary": "iconTone() === 'primary'", "class.it-faded": "iconTone() === 'faded'", "attr.title": "null" } }, ngImport: i0, template: "@if (icon(); as ic) {\n  <span class=\"et-icon\"><fold-icon [name]=\"ic\" [size]=\"iconSize()\" /></span>\n}\n<span class=\"et-main\">\n  <span class=\"et-row\">\n    <span\n      class=\"et-label\"\n      role=\"heading\"\n      [attr.id]=\"headingId()\"\n      [attr.aria-level]=\"level()\"\n      >{{ title() }}</span\n    >\n    <span class=\"et-action\"><ng-content select=\"[titleAction]\" /></span>\n  </span>\n  @if (subtitle(); as s) {\n    <span class=\"et-sub\">{{ s }}</span>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--fold-space-md);margin:0}.et-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.et-row{display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-sm)}.et-label{min-width:0;font-family:var(--fold-font-label);font-size:var(--fold-text-2xs);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-caps);text-transform:uppercase;color:var(--fold-color-text-muted)}:host(.v-bar) .et-label{font-size:var(--fold-text-xs);color:var(--fold-color-text-secondary)}:host(.v-caps) .et-label{font-size:var(--fold-text-base);font-weight:var(--fold-weight-extrabold);letter-spacing:var(--fold-tracking-caps);color:var(--fold-color-text)}:host(.v-title) .et-label{font-size:var(--fold-text-base);letter-spacing:var(--fold-tracking-normal);text-transform:none;color:var(--fold-color-text)}.et-sub{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}.et-action{flex:none;display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.et-action:empty{display:none}.et-icon{flex:none;display:grid;place-items:center;color:var(--fold-color-primary)}:host(.v-title) .et-icon{width:40px;height:40px;border-radius:var(--fold-radius-md);border:1px solid var(--fold-color-border);background:var(--fold-color-surface-raised)}:host(.v-title.it-primary) .et-icon{background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}:host(.v-title.it-faded) .et-icon{background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);color:var(--fold-color-text-muted)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldElementTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: "fold-element-title", standalone: true, imports: [FoldIconComponent], host: {
                         "[class.v-bar]": "variant() === 'bar'",
                         "[class.v-title]": "variant() === 'title'",
+                        "[class.v-caps]": "variant() === 'caps'",
                         "[class.it-primary]": "iconTone() === 'primary'",
                         "[class.it-faded]": "iconTone() === 'faded'",
                         // `title` is a heading input — strip the reflected native attribute so it
                         // never doubles as a browser tooltip.
                         "[attr.title]": "null",
-                    }, template: "@if (icon(); as ic) {\n  <span class=\"et-icon\"><fold-icon [name]=\"ic\" [size]=\"iconSize()\" /></span>\n}\n<span class=\"et-main\">\n  <span class=\"et-row\">\n    <span\n      class=\"et-label\"\n      role=\"heading\"\n      [attr.id]=\"headingId()\"\n      [attr.aria-level]=\"level()\"\n      >{{ title() }}</span\n    >\n    <span class=\"et-action\"><ng-content select=\"[titleAction]\" /></span>\n  </span>\n  @if (subtitle(); as s) {\n    <span class=\"et-sub\">{{ s }}</span>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--fold-space-md);margin:0}.et-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.et-row{display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-sm)}.et-label{min-width:0;font-family:var(--fold-font-label);font-size:var(--fold-text-2xs);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-caps);text-transform:uppercase;color:var(--fold-color-text-muted)}:host(.v-bar) .et-label{font-size:var(--fold-text-xs);color:var(--fold-color-text-secondary)}:host(.v-title) .et-label{font-size:var(--fold-text-base);letter-spacing:var(--fold-tracking-normal);text-transform:none;color:var(--fold-color-text)}.et-sub{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}.et-action{flex:none;display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.et-action:empty{display:none}.et-icon{flex:none;display:grid;place-items:center;color:var(--fold-color-primary)}:host(.v-title) .et-icon{width:40px;height:40px;border-radius:var(--fold-radius-md);border:1px solid var(--fold-color-border);background:var(--fold-color-surface-raised)}:host(.v-title.it-primary) .et-icon{background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}:host(.v-title.it-faded) .et-icon{background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);color:var(--fold-color-text-muted)}\n"] }]
+                    }, template: "@if (icon(); as ic) {\n  <span class=\"et-icon\"><fold-icon [name]=\"ic\" [size]=\"iconSize()\" /></span>\n}\n<span class=\"et-main\">\n  <span class=\"et-row\">\n    <span\n      class=\"et-label\"\n      role=\"heading\"\n      [attr.id]=\"headingId()\"\n      [attr.aria-level]=\"level()\"\n      >{{ title() }}</span\n    >\n    <span class=\"et-action\"><ng-content select=\"[titleAction]\" /></span>\n  </span>\n  @if (subtitle(); as s) {\n    <span class=\"et-sub\">{{ s }}</span>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--fold-space-md);margin:0}.et-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.et-row{display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-sm)}.et-label{min-width:0;font-family:var(--fold-font-label);font-size:var(--fold-text-2xs);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-caps);text-transform:uppercase;color:var(--fold-color-text-muted)}:host(.v-bar) .et-label{font-size:var(--fold-text-xs);color:var(--fold-color-text-secondary)}:host(.v-caps) .et-label{font-size:var(--fold-text-base);font-weight:var(--fold-weight-extrabold);letter-spacing:var(--fold-tracking-caps);color:var(--fold-color-text)}:host(.v-title) .et-label{font-size:var(--fold-text-base);letter-spacing:var(--fold-tracking-normal);text-transform:none;color:var(--fold-color-text)}.et-sub{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}.et-action{flex:none;display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.et-action:empty{display:none}.et-icon{flex:none;display:grid;place-items:center;color:var(--fold-color-primary)}:host(.v-title) .et-icon{width:40px;height:40px;border-radius:var(--fold-radius-md);border:1px solid var(--fold-color-border);background:var(--fold-color-surface-raised)}:host(.v-title.it-primary) .et-icon{background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}:host(.v-title.it-faded) .et-icon{background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);color:var(--fold-color-text-muted)}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], headingId: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingId", required: false }] }] } });
 
 /**