fold-ng 0.10.0 → 0.10.2

package/CHANGELOG.md

@@ -8,6 +8,63 @@ All notable changes to **fold-ng** are documented here. The format follows
 
 _Nothing yet._
 
+## [0.10.2] - 2026-08-12
+
+### Changed
+
+- **A `fold-nav-layout` hands its content a zero gutter below 640px.** The bar
+  spans the layout's full width, so a gutter under it insets the cards _relative
+  to the menu that names them_ — they stop reading as one column. It is also
+  pure loss on a phone: 2 × 16px off a ~360px reading width. Handed down as
+  `--fold-page-gutter: 0` on the body rather than selected as a child: a custom
+  property crosses view encapsulation, so it reaches a nested `fold-page-layout`
+  (or a `bleed` section, which stays in lockstep) without the layout having to
+  know what its content is. Vertical rhythm untouched.
+
+- **`fold-page-layout` halves its gutter below 640px** —
+  `calc(var(--fold-page-gutter) / 2)`, so a page or theme that retuned the token
+  gets _its_ value halved, and a `fold-page-section[bleed]` still cancels it
+  exactly.
+
+- **The nav↔content gap drops to the smallest step below 640px** (8 → 4px). The
+  bar and its first card are one block; the seam only has to be visible, not
+  roomy. `--fold-nav-layout-gap` still wins at every width.
+
+## [0.10.1] - 2026-08-12
+
+### Fixed
+
+- **A `side="auto"` panel now docks to the bottom on a narrow host.** It got the
+  bottom-sheet _shape_ (content height, rounded top, slide-up, grabber) but not
+  its _alignment_: the rule that pinned it, `align-items: flex-end`, selected
+  `.panel-dock` from **inside** the dock's own `@container` query — and an
+  element can never match its own container query (`container-type` makes it a
+  container for its _descendants_). The sheet kept the dock's default `stretch`
+  and filled the whole region, which reads as a sheet stuck to the top of the
+  screen. The alignment now rides on the panel (`align-self`), a real
+  descendant. Regression test in `e2e/panel.spec.ts` — a **wide viewport with a
+  narrow stage**, because shrinking the viewport instead lets some ancestor
+  container match ≤640 and answer the query in the dock's place, hiding the bug.
+
+- **A `background="surface"` tab bar is opaque.** `fold-view-nav` / `fold-tabs`
+  painted the rail-3 role, which is a 3% white **overlay** — so a bar a consumer
+  pinned with `position: sticky` had page content scrolling visibly through it.
+  The overlay is now layered over the page fill. On the page background — where
+  a filled bar belongs — the paint is unchanged; anywhere else it is opaque,
+  which is what "carries its own surface" always claimed.
+
+### Changed
+
+- **Tighter insets below 640px.** Three defaults step one notch down the spacing
+  scale on a phone, where a horizontal inset is charged twice against a reading
+  width that has none to spare: the nav↔content gap (`fold-nav-layout` and a
+  standalone `fold-view-nav`, 16 → 8px), the `fold-card` body and chrome padding
+  (16 → 12px, 12/16 → 8/12px), and the panel host's template-panel body
+  (16 → 12px, keyed to the dock's width, not the viewport). Every one keeps its
+  override: `--fold-nav-layout-gap`, `--fold-card-padding` and the card's
+  `padding` input (`p-sm` / `p-lg` / `p-none`) still win at every width — an
+  author who asked for a generous card meant it.
+
 ## [0.10.0] - 2026-08-11
 
 ### Changed
@@ -1358,7 +1415,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.10.0...HEAD
+[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.10.2...HEAD
+[0.10.2]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.10.2
+[0.10.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.10.1
 [0.10.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.10.0
 [0.9.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.9.0
 [0.8.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.8.1

package/fesm2022/fold-ng.mjs

@@ -3442,7 +3442,7 @@ class FoldCardComponent {
         this.activated.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldCardComponent, isStandalone: true, selector: "fold-card", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, raisedBands: { classPropertyName: "raisedBands", publicName: "raisedBands", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { listeners: { "click": "onActivate($event)", "keydown": "onKeydown($event)" }, properties: { "class.s-sunken": "surface() === 'sunken'", "class.s-accent": "surface() === 'accent'", "attr.data-surface": "surface() === 'accent' ? 'accent' : null", "class.r-sm": "radius() === 'sm'", "class.r-md": "radius() === 'md'", "class.p-none": "padding() === 'none'", "class.p-sm": "padding() === 'sm'", "class.p-lg": "padding() === 'lg'", "class.is-interactive": "interactive()", "class.sep-header": "hasBand(separators(), 'header')", "class.sep-footer": "hasBand(separators(), 'footer')", "class.raise-header": "hasBand(raisedBands(), 'header')", "class.raise-footer": "hasBand(raisedBands(), 'footer')", "attr.role": "interactive() ? 'button' : null", "attr.tabindex": "interactive() ? 0 : null", "attr.aria-label": "interactive() ? (ariaLabel() ?? null) : null" } }, ngImport: i0, template: "<div class=\"card-header\"><ng-content select=\"[cardHeader]\" /></div>\n<div class=\"card-body\"><ng-content /></div>\n<div class=\"card-footer\"><ng-content select=\"[cardFooter]\" /></div>\n", styles: ["@charset \"UTF-8\";:host{--_pad: 16px;--_chrome: 12px 16px;--_radius: var(--fold-radius-lg);--_band-raise: var(--fold-color-surface-hover);--_sep-line: var(--fold-color-border-subtle);display:flex;flex-direction:column;background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border);border-radius:var(--_radius);overflow:var(--fold-card-overflow, clip)}:host(.s-sunken){background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);--_band-raise: var(--fold-color-surface-card)}:host(.r-md){--_radius: var(--fold-radius-md)}:host(.r-sm){--_radius: var(--fold-radius-sm)}:host(.p-none){--_pad: 0}:host(.p-sm){--_pad: 10px}:host(.p-lg){--_pad: 20px}.card-header,.card-footer{position:relative;padding:var(--_chrome)}.card-header:empty,.card-footer:empty{display:none}.card-header{border-radius:var(--_radius) var(--_radius) 0 0}.card-footer{border-radius:0 0 var(--_radius) var(--_radius)}.card-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:var(--fold-card-padding, var(--_pad))}:host(.raise-header) .card-header:not(:empty),:host(.raise-footer) .card-footer:not(:empty){background-color:var(--_band-raise)}:host(.sep-header) .card-header:not(:empty){border-bottom:1px solid var(--_sep-line)}:host(.sep-footer) .card-footer:not(:empty){border-top:1px solid var(--_sep-line)}:host(.is-interactive){cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}:host(.is-interactive:hover){transform:translateY(-2px);box-shadow:var(--fold-shadow-md)}:host(.is-interactive:focus-visible){outline:2px solid var(--fold-color-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host(.is-interactive){transition:none}}:host(.s-accent){background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary);--_band-raise: color-mix( in srgb, var(--_accent-ink) 16%, var(--_accent-fill) );--_sep-line: color-mix(in srgb, var(--_accent-ink) 24%, transparent)}:host(.s-accent.is-interactive:focus-visible){outline-color:var(--fold-color-on-primary)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldCardComponent, isStandalone: true, selector: "fold-card", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, raisedBands: { classPropertyName: "raisedBands", publicName: "raisedBands", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { listeners: { "click": "onActivate($event)", "keydown": "onKeydown($event)" }, properties: { "class.s-sunken": "surface() === 'sunken'", "class.s-accent": "surface() === 'accent'", "attr.data-surface": "surface() === 'accent' ? 'accent' : null", "class.r-sm": "radius() === 'sm'", "class.r-md": "radius() === 'md'", "class.p-none": "padding() === 'none'", "class.p-sm": "padding() === 'sm'", "class.p-lg": "padding() === 'lg'", "class.is-interactive": "interactive()", "class.sep-header": "hasBand(separators(), 'header')", "class.sep-footer": "hasBand(separators(), 'footer')", "class.raise-header": "hasBand(raisedBands(), 'header')", "class.raise-footer": "hasBand(raisedBands(), 'footer')", "attr.role": "interactive() ? 'button' : null", "attr.tabindex": "interactive() ? 0 : null", "attr.aria-label": "interactive() ? (ariaLabel() ?? null) : null" } }, ngImport: i0, template: "<div class=\"card-header\"><ng-content select=\"[cardHeader]\" /></div>\n<div class=\"card-body\"><ng-content /></div>\n<div class=\"card-footer\"><ng-content select=\"[cardFooter]\" /></div>\n", styles: ["@charset \"UTF-8\";:host{--_pad: 16px;--_chrome: 12px 16px;--_radius: var(--fold-radius-lg);--_band-raise: var(--fold-color-surface-hover);--_sep-line: var(--fold-color-border-subtle);display:flex;flex-direction:column;background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border);border-radius:var(--_radius);overflow:var(--fold-card-overflow, clip)}@media(max-width:640px){:host{--_pad: 12px;--_chrome: 8px 12px}}:host(.s-sunken){background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);--_band-raise: var(--fold-color-surface-card)}:host(.r-md){--_radius: var(--fold-radius-md)}:host(.r-sm){--_radius: var(--fold-radius-sm)}:host(.p-none){--_pad: 0}:host(.p-sm){--_pad: 10px}:host(.p-lg){--_pad: 20px}.card-header,.card-footer{position:relative;padding:var(--_chrome)}.card-header:empty,.card-footer:empty{display:none}.card-header{border-radius:var(--_radius) var(--_radius) 0 0}.card-footer{border-radius:0 0 var(--_radius) var(--_radius)}.card-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:var(--fold-card-padding, var(--_pad))}:host(.raise-header) .card-header:not(:empty),:host(.raise-footer) .card-footer:not(:empty){background-color:var(--_band-raise)}:host(.sep-header) .card-header:not(:empty){border-bottom:1px solid var(--_sep-line)}:host(.sep-footer) .card-footer:not(:empty){border-top:1px solid var(--_sep-line)}:host(.is-interactive){cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}:host(.is-interactive:hover){transform:translateY(-2px);box-shadow:var(--fold-shadow-md)}:host(.is-interactive:focus-visible){outline:2px solid var(--fold-color-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host(.is-interactive){transition:none}}:host(.s-accent){background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary);--_band-raise: color-mix( in srgb, var(--_accent-ink) 16%, var(--_accent-fill) );--_sep-line: color-mix(in srgb, var(--_accent-ink) 24%, transparent)}:host(.s-accent.is-interactive:focus-visible){outline-color:var(--fold-color-on-primary)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCardComponent, decorators: [{
             type: Component,
@@ -3465,7 +3465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         "[attr.aria-label]": "interactive() ? (ariaLabel() ?? null) : null",
                         "(click)": "onActivate($event)",
                         "(keydown)": "onKeydown($event)",
-                    }, template: "<div class=\"card-header\"><ng-content select=\"[cardHeader]\" /></div>\n<div class=\"card-body\"><ng-content /></div>\n<div class=\"card-footer\"><ng-content select=\"[cardFooter]\" /></div>\n", styles: ["@charset \"UTF-8\";:host{--_pad: 16px;--_chrome: 12px 16px;--_radius: var(--fold-radius-lg);--_band-raise: var(--fold-color-surface-hover);--_sep-line: var(--fold-color-border-subtle);display:flex;flex-direction:column;background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border);border-radius:var(--_radius);overflow:var(--fold-card-overflow, clip)}:host(.s-sunken){background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);--_band-raise: var(--fold-color-surface-card)}:host(.r-md){--_radius: var(--fold-radius-md)}:host(.r-sm){--_radius: var(--fold-radius-sm)}:host(.p-none){--_pad: 0}:host(.p-sm){--_pad: 10px}:host(.p-lg){--_pad: 20px}.card-header,.card-footer{position:relative;padding:var(--_chrome)}.card-header:empty,.card-footer:empty{display:none}.card-header{border-radius:var(--_radius) var(--_radius) 0 0}.card-footer{border-radius:0 0 var(--_radius) var(--_radius)}.card-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:var(--fold-card-padding, var(--_pad))}:host(.raise-header) .card-header:not(:empty),:host(.raise-footer) .card-footer:not(:empty){background-color:var(--_band-raise)}:host(.sep-header) .card-header:not(:empty){border-bottom:1px solid var(--_sep-line)}:host(.sep-footer) .card-footer:not(:empty){border-top:1px solid var(--_sep-line)}:host(.is-interactive){cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}:host(.is-interactive:hover){transform:translateY(-2px);box-shadow:var(--fold-shadow-md)}:host(.is-interactive:focus-visible){outline:2px solid var(--fold-color-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host(.is-interactive){transition:none}}:host(.s-accent){background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary);--_band-raise: color-mix( in srgb, var(--_accent-ink) 16%, var(--_accent-fill) );--_sep-line: color-mix(in srgb, var(--_accent-ink) 24%, transparent)}:host(.s-accent.is-interactive:focus-visible){outline-color:var(--fold-color-on-primary)}\n"] }]
+                    }, template: "<div class=\"card-header\"><ng-content select=\"[cardHeader]\" /></div>\n<div class=\"card-body\"><ng-content /></div>\n<div class=\"card-footer\"><ng-content select=\"[cardFooter]\" /></div>\n", styles: ["@charset \"UTF-8\";:host{--_pad: 16px;--_chrome: 12px 16px;--_radius: var(--fold-radius-lg);--_band-raise: var(--fold-color-surface-hover);--_sep-line: var(--fold-color-border-subtle);display:flex;flex-direction:column;background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border);border-radius:var(--_radius);overflow:var(--fold-card-overflow, clip)}@media(max-width:640px){:host{--_pad: 12px;--_chrome: 8px 12px}}:host(.s-sunken){background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);--_band-raise: var(--fold-color-surface-card)}:host(.r-md){--_radius: var(--fold-radius-md)}:host(.r-sm){--_radius: var(--fold-radius-sm)}:host(.p-none){--_pad: 0}:host(.p-sm){--_pad: 10px}:host(.p-lg){--_pad: 20px}.card-header,.card-footer{position:relative;padding:var(--_chrome)}.card-header:empty,.card-footer:empty{display:none}.card-header{border-radius:var(--_radius) var(--_radius) 0 0}.card-footer{border-radius:0 0 var(--_radius) var(--_radius)}.card-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:var(--fold-card-padding, var(--_pad))}:host(.raise-header) .card-header:not(:empty),:host(.raise-footer) .card-footer:not(:empty){background-color:var(--_band-raise)}:host(.sep-header) .card-header:not(:empty){border-bottom:1px solid var(--_sep-line)}:host(.sep-footer) .card-footer:not(:empty){border-top:1px solid var(--_sep-line)}:host(.is-interactive){cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}:host(.is-interactive:hover){transform:translateY(-2px);box-shadow:var(--fold-shadow-md)}:host(.is-interactive:focus-visible){outline:2px solid var(--fold-color-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host(.is-interactive){transition:none}}:host(.s-accent){background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary);--_band-raise: color-mix( in srgb, var(--_accent-ink) 16%, var(--_accent-fill) );--_sep-line: color-mix(in srgb, var(--_accent-ink) 24%, transparent)}:host(.s-accent.is-interactive:focus-visible){outline-color:var(--fold-color-on-primary)}\n"] }]
         }], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], separators: [{ type: i0.Input, args: [{ isSignal: true, alias: "separators", required: false }] }], raisedBands: [{ type: i0.Input, args: [{ isSignal: true, alias: "raisedBands", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
 
 /**
@@ -10498,13 +10498,13 @@ class FoldNavLayoutComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldNavLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldNavLayoutComponent, isStandalone: true, selector: "fold-nav-layout", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, foldAt: { classPropertyName: "foldAt", publicName: "foldAt", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-row": "!stacked()" } }, providers: [
             { provide: FOLD_NAV_LAYOUT, useExisting: FoldNavLayoutComponent },
-        ], exportAs: ["foldNavLayout"], ngImport: i0, template: "<div class=\"tl-nav\"><ng-content select=\"[tabNav]\" /></div>\n<div class=\"tl-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-nav-layout-gap, var(--fold-space-lg, 16px));min-width:0}:host(.is-row){flex-direction:row}.tl-nav{display:grid;min-width:0}:host(.is-row) .tl-nav{flex:0 0 var(--fold-nav-layout-rail-width, var(--fold-rail-tertiary, 200px))}.tl-body{flex:1 1 auto;min-width:0}\n"] });
+        ], exportAs: ["foldNavLayout"], ngImport: i0, template: "<div class=\"tl-nav\"><ng-content select=\"[tabNav]\" /></div>\n<div class=\"tl-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-nav-layout-gap, var(--fold-space-lg, 16px))}@media(max-width:640px){:host{gap:var(--fold-nav-layout-gap, var(--fold-space-xs, 4px))}}:host{min-width:0}:host(.is-row){flex-direction:row}.tl-nav{display:grid;min-width:0}:host(.is-row) .tl-nav{flex:0 0 var(--fold-nav-layout-rail-width, var(--fold-rail-tertiary, 200px))}.tl-body{flex:1 1 auto;min-width:0}@media(max-width:640px){.tl-body{--fold-page-gutter: 0px}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldNavLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: "fold-nav-layout", standalone: true, exportAs: "foldNavLayout", host: { "[class.is-row]": "!stacked()" }, providers: [
                         { provide: FOLD_NAV_LAYOUT, useExisting: FoldNavLayoutComponent },
-                    ], template: "<div class=\"tl-nav\"><ng-content select=\"[tabNav]\" /></div>\n<div class=\"tl-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-nav-layout-gap, var(--fold-space-lg, 16px));min-width:0}:host(.is-row){flex-direction:row}.tl-nav{display:grid;min-width:0}:host(.is-row) .tl-nav{flex:0 0 var(--fold-nav-layout-rail-width, var(--fold-rail-tertiary, 200px))}.tl-body{flex:1 1 auto;min-width:0}\n"] }]
+                    ], template: "<div class=\"tl-nav\"><ng-content select=\"[tabNav]\" /></div>\n<div class=\"tl-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-nav-layout-gap, var(--fold-space-lg, 16px))}@media(max-width:640px){:host{gap:var(--fold-nav-layout-gap, var(--fold-space-xs, 4px))}}:host{min-width:0}:host(.is-row){flex-direction:row}.tl-nav{display:grid;min-width:0}:host(.is-row) .tl-nav{flex:0 0 var(--fold-nav-layout-rail-width, var(--fold-rail-tertiary, 200px))}.tl-body{flex:1 1 auto;min-width:0}@media(max-width:640px){.tl-body{--fold-page-gutter: 0px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], foldAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "foldAt", required: false }] }] } });
 
 /**
@@ -10614,11 +10614,11 @@ class FoldPageLayoutComponent {
     customTitle = contentChild(FoldPageTitleDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "customTitle" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPageLayoutComponent, isStandalone: true, selector: "fold-page-layout", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.title": "null", "attr.data-scroll": "scroll()" } }, queries: [{ propertyName: "customTitle", first: true, predicate: FoldPageTitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (title() || customTitle()) {\n  <header class=\"page-head\">\n    <div class=\"page-head-text\">\n      <h1 class=\"page-title\">\n        @if (title(); as t) {\n          @if (icon(); as ic) {\n            <fold-icon class=\"page-icon\" [name]=\"ic\" [size]=\"22\" />\n          }\n          <span>{{ t }}</span>\n        }\n        <ng-content select=\"[pageTitle]\" />\n        <span class=\"page-title-badge\"\n          ><ng-content select=\"[titleBadge]\"\n        /></span>\n      </h1>\n      <div class=\"page-desc\"><ng-content select=\"p[description]\" /></div>\n    </div>\n    <div class=\"page-actions\"><ng-content select=\"[pageActions]\" /></div>\n  </header>\n}\n<div class=\"page-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px);box-sizing:border-box;padding-block:var(--fold-page-pad-top, 28px) var(--fold-page-pad-bottom, 40px);padding-inline:var(--fold-page-gutter, 32px);flex:1 0 auto;min-height:0}:host([data-scroll=own]){flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fold-space-lg)}.page-head-text{display:flex;flex-direction:column;gap:var(--fold-space-xs);min-width:0}.page-title{margin:0;display:flex;align-items:center;gap:var(--fold-space-sm);font-size:var(--fold-text-xl);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--fold-color-text)}.page-icon{flex:none;color:var(--fold-color-primary-text)}.page-title-badge{display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.page-title-badge:empty{display:none}.page-desc{font-size:var(--fold-text-sm);line-height:1.5;max-width:var(--fold-page-desc-measure, none);color:var(--fold-color-text-muted)}.page-desc:empty{display:none}.page-desc>*{margin:0}.page-actions{flex:none;display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--fold-space-sm)}.page-actions:empty{display:none}@media(max-width:640px){.page-head{flex-direction:column;align-items:stretch;gap:var(--fold-space-md)}.page-actions{justify-content:flex-start}}@container (max-width: 640px){.page-head{flex-direction:column;align-items:stretch;gap:var(--fold-space-md)}.page-actions{justify-content:flex-start}}.page-body{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px)}\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: FoldPageLayoutComponent, isStandalone: true, selector: "fold-page-layout", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.title": "null", "attr.data-scroll": "scroll()" } }, queries: [{ propertyName: "customTitle", first: true, predicate: FoldPageTitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (title() || customTitle()) {\n  <header class=\"page-head\">\n    <div class=\"page-head-text\">\n      <h1 class=\"page-title\">\n        @if (title(); as t) {\n          @if (icon(); as ic) {\n            <fold-icon class=\"page-icon\" [name]=\"ic\" [size]=\"22\" />\n          }\n          <span>{{ t }}</span>\n        }\n        <ng-content select=\"[pageTitle]\" />\n        <span class=\"page-title-badge\"\n          ><ng-content select=\"[titleBadge]\"\n        /></span>\n      </h1>\n      <div class=\"page-desc\"><ng-content select=\"p[description]\" /></div>\n    </div>\n    <div class=\"page-actions\"><ng-content select=\"[pageActions]\" /></div>\n  </header>\n}\n<div class=\"page-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px);box-sizing:border-box;padding-block:var(--fold-page-pad-top, 28px) var(--fold-page-pad-bottom, 40px);padding-inline:var(--fold-page-gutter, 32px);flex:1 0 auto;min-height:0}:host([data-scroll=own]){flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fold-space-lg)}.page-head-text{display:flex;flex-direction:column;gap:var(--fold-space-xs);min-width:0}.page-title{margin:0;display:flex;align-items:center;gap:var(--fold-space-sm);font-size:var(--fold-text-xl);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--fold-color-text)}.page-icon{flex:none;color:var(--fold-color-primary-text)}.page-title-badge{display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.page-title-badge:empty{display:none}.page-desc{font-size:var(--fold-text-sm);line-height:1.5;max-width:var(--fold-page-desc-measure, none);color:var(--fold-color-text-muted)}.page-desc:empty{display:none}.page-desc>*{margin:0}.page-actions{flex:none;display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--fold-space-sm)}.page-actions:empty{display:none}@media(max-width:640px){.page-head{flex-direction:column;align-items:stretch;gap:var(--fold-space-md)}.page-actions{justify-content:flex-start}:host{padding-inline:calc(var(--fold-page-gutter, 32px) / 2)}}@container (max-width: 640px){.page-head{flex-direction:column;align-items:stretch;gap:var(--fold-space-md)}.page-actions{justify-content:flex-start}:host{padding-inline:calc(var(--fold-page-gutter, 32px) / 2)}}.page-body{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px)}\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: FoldPageLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: "fold-page-layout", standalone: true, imports: [FoldIconComponent], host: { "[attr.title]": "null", "[attr.data-scroll]": "scroll()" }, template: "@if (title() || customTitle()) {\n  <header class=\"page-head\">\n    <div class=\"page-head-text\">\n      <h1 class=\"page-title\">\n        @if (title(); as t) {\n          @if (icon(); as ic) {\n            <fold-icon class=\"page-icon\" [name]=\"ic\" [size]=\"22\" />\n          }\n          <span>{{ t }}</span>\n        }\n        <ng-content select=\"[pageTitle]\" />\n        <span class=\"page-title-badge\"\n          ><ng-content select=\"[titleBadge]\"\n        /></span>\n      </h1>\n      <div class=\"page-desc\"><ng-content select=\"p[description]\" /></div>\n    </div>\n    <div class=\"page-actions\"><ng-content select=\"[pageActions]\" /></div>\n  </header>\n}\n<div class=\"page-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px);box-sizing:border-box;padding-block:var(--fold-page-pad-top, 28px) var(--fold-page-pad-bottom, 40px);padding-inline:var(--fold-page-gutter, 32px);flex:1 0 auto;min-height:0}:host([data-scroll=own]){flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fold-space-lg)}.page-head-text{display:flex;flex-direction:column;gap:var(--fold-space-xs);min-width:0}.page-title{margin:0;display:flex;align-items:center;gap:var(--fold-space-sm);font-size:var(--fold-text-xl);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--fold-color-text)}.page-icon{flex:none;color:var(--fold-color-primary-text)}.page-title-badge{display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.page-title-badge:empty{display:none}.page-desc{font-size:var(--fold-text-sm);line-height:1.5;max-width:var(--fold-page-desc-measure, none);color:var(--fold-color-text-muted)}.page-desc:empty{display:none}.page-desc>*{margin:0}.page-actions{flex:none;display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--fold-space-sm)}.page-actions:empty{display:none}@media(max-width:640px){.page-head{flex-direction:column;align-items:stretch;gap:var(--fold-space-md)}.page-actions{justify-content:flex-start}}@container (max-width: 640px){.page-head{flex-direction:column;align-items:stretch;gap:var(--fold-space-md)}.page-actions{justify-content:flex-start}}.page-body{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px)}\n"] }]
+            args: [{ selector: "fold-page-layout", standalone: true, imports: [FoldIconComponent], host: { "[attr.title]": "null", "[attr.data-scroll]": "scroll()" }, template: "@if (title() || customTitle()) {\n  <header class=\"page-head\">\n    <div class=\"page-head-text\">\n      <h1 class=\"page-title\">\n        @if (title(); as t) {\n          @if (icon(); as ic) {\n            <fold-icon class=\"page-icon\" [name]=\"ic\" [size]=\"22\" />\n          }\n          <span>{{ t }}</span>\n        }\n        <ng-content select=\"[pageTitle]\" />\n        <span class=\"page-title-badge\"\n          ><ng-content select=\"[titleBadge]\"\n        /></span>\n      </h1>\n      <div class=\"page-desc\"><ng-content select=\"p[description]\" /></div>\n    </div>\n    <div class=\"page-actions\"><ng-content select=\"[pageActions]\" /></div>\n  </header>\n}\n<div class=\"page-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px);box-sizing:border-box;padding-block:var(--fold-page-pad-top, 28px) var(--fold-page-pad-bottom, 40px);padding-inline:var(--fold-page-gutter, 32px);flex:1 0 auto;min-height:0}:host([data-scroll=own]){flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fold-space-lg)}.page-head-text{display:flex;flex-direction:column;gap:var(--fold-space-xs);min-width:0}.page-title{margin:0;display:flex;align-items:center;gap:var(--fold-space-sm);font-size:var(--fold-text-xl);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--fold-color-text)}.page-icon{flex:none;color:var(--fold-color-primary-text)}.page-title-badge{display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.page-title-badge:empty{display:none}.page-desc{font-size:var(--fold-text-sm);line-height:1.5;max-width:var(--fold-page-desc-measure, none);color:var(--fold-color-text-muted)}.page-desc:empty{display:none}.page-desc>*{margin:0}.page-actions{flex:none;display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--fold-space-sm)}.page-actions:empty{display:none}@media(max-width:640px){.page-head{flex-direction:column;align-items:stretch;gap:var(--fold-space-md)}.page-actions{justify-content:flex-start}:host{padding-inline:calc(var(--fold-page-gutter, 32px) / 2)}}@container (max-width: 640px){.page-head{flex-direction:column;align-items:stretch;gap:var(--fold-space-md)}.page-actions{justify-content:flex-start}:host{padding-inline:calc(var(--fold-page-gutter, 32px) / 2)}}.page-body{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px)}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], customTitle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FoldPageTitleDirective), { isSignal: true }] }] } });
 
 /**
@@ -11127,7 +11127,7 @@ class FoldViewNavComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedDirection" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldViewNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldViewNavComponent, isStandalone: true, selector: "fold-view-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeKey: "activeKeyChange" }, host: { properties: { "class.is-standalone": "isStandalone()", "class.is-horizontal": "resolvedDirection() === 'horizontal'" } }, ngImport: i0, template: "<nav\n  class=\"tab-bar\"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n>\n  @for (item of items(); track item.key) {\n    @if (item.disabled) {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item is-disabled\"\n        disabled\n        aria-disabled=\"true\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n        />\n      </button>\n    } @else if (item.link !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [routerLink]=\"item.link\"\n        routerLinkActive=\"is-active\"\n        #rla=\"routerLinkActive\"\n        [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n        />\n      </a>\n    } @else if (item.href !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [href]=\"item.href\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n        (click)=\"activeKey.set(item.key)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </button>\n    }\n  }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n  @if (item.icon; as ic) {\n    <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n  } @else if (collapsed()) {\n    <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n         initial so the rail stays icon-width and the label still tooltips. -->\n    <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n      item.label.charAt(0)\n    }}</span>\n  }\n  <span class=\"tab-bar-label\">{{ item.label }}</span>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <fold-badge\n      class=\"tab-bar-badge\"\n      [content]=\"item.badge + ''\"\n      [variant]=\"active ? 'accent' : 'neutral'\"\n    />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)){overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)) .tab-bar{min-width:max-content;max-width:none}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}:host(.is-standalone.is-horizontal){margin-block-end:var(--fold-nav-layout-gap, var(--fold-space-lg, 16px))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldBadgeComponent, selector: "fold-badge", inputs: ["content", "radius", "variant"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldViewNavComponent, isStandalone: true, selector: "fold-view-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeKey: "activeKeyChange" }, host: { properties: { "class.is-standalone": "isStandalone()", "class.is-horizontal": "resolvedDirection() === 'horizontal'" } }, ngImport: i0, template: "<nav\n  class=\"tab-bar\"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n>\n  @for (item of items(); track item.key) {\n    @if (item.disabled) {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item is-disabled\"\n        disabled\n        aria-disabled=\"true\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n        />\n      </button>\n    } @else if (item.link !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [routerLink]=\"item.link\"\n        routerLinkActive=\"is-active\"\n        #rla=\"routerLinkActive\"\n        [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n        />\n      </a>\n    } @else if (item.href !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [href]=\"item.href\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n        (click)=\"activeKey.set(item.key)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </button>\n    }\n  }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n  @if (item.icon; as ic) {\n    <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n  } @else if (collapsed()) {\n    <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n         initial so the rail stays icon-width and the label still tooltips. -->\n    <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n      item.label.charAt(0)\n    }}</span>\n  }\n  <span class=\"tab-bar-label\">{{ item.label }}</span>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <fold-badge\n      class=\"tab-bar-badge\"\n      [content]=\"item.badge + ''\"\n      [variant]=\"active ? 'accent' : 'neutral'\"\n    />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)){overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)) .tab-bar{min-width:max-content;max-width:none}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:linear-gradient(var(--fold-color-bg-rail-tertiary),var(--fold-color-bg-rail-tertiary)),var(--fold-color-bg-page);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}:host(.is-standalone.is-horizontal){margin-block-end:var(--fold-nav-layout-gap, var(--fold-space-lg, 16px))}@media(max-width:640px){:host(.is-standalone.is-horizontal){margin-block-end:var(--fold-nav-layout-gap, var(--fold-space-xs, 4px))}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldBadgeComponent, selector: "fold-badge", inputs: ["content", "radius", "variant"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldViewNavComponent, decorators: [{
             type: Component,
@@ -11144,7 +11144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         // conjunction. Vertical is a side rail, not a header — no block-end margin.
                         "[class.is-standalone]": "isStandalone()",
                         "[class.is-horizontal]": "resolvedDirection() === 'horizontal'",
-                    }, template: "<nav\n  class=\"tab-bar\"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n>\n  @for (item of items(); track item.key) {\n    @if (item.disabled) {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item is-disabled\"\n        disabled\n        aria-disabled=\"true\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n        />\n      </button>\n    } @else if (item.link !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [routerLink]=\"item.link\"\n        routerLinkActive=\"is-active\"\n        #rla=\"routerLinkActive\"\n        [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n        />\n      </a>\n    } @else if (item.href !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [href]=\"item.href\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n        (click)=\"activeKey.set(item.key)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </button>\n    }\n  }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n  @if (item.icon; as ic) {\n    <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n  } @else if (collapsed()) {\n    <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n         initial so the rail stays icon-width and the label still tooltips. -->\n    <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n      item.label.charAt(0)\n    }}</span>\n  }\n  <span class=\"tab-bar-label\">{{ item.label }}</span>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <fold-badge\n      class=\"tab-bar-badge\"\n      [content]=\"item.badge + ''\"\n      [variant]=\"active ? 'accent' : 'neutral'\"\n    />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)){overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)) .tab-bar{min-width:max-content;max-width:none}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}:host(.is-standalone.is-horizontal){margin-block-end:var(--fold-nav-layout-gap, var(--fold-space-lg, 16px))}\n"] }]
+                    }, template: "<nav\n  class=\"tab-bar\"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n>\n  @for (item of items(); track item.key) {\n    @if (item.disabled) {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item is-disabled\"\n        disabled\n        aria-disabled=\"true\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n        />\n      </button>\n    } @else if (item.link !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [routerLink]=\"item.link\"\n        routerLinkActive=\"is-active\"\n        #rla=\"routerLinkActive\"\n        [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n        />\n      </a>\n    } @else if (item.href !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [href]=\"item.href\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n        (click)=\"activeKey.set(item.key)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </button>\n    }\n  }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n  @if (item.icon; as ic) {\n    <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n  } @else if (collapsed()) {\n    <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n         initial so the rail stays icon-width and the label still tooltips. -->\n    <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n      item.label.charAt(0)\n    }}</span>\n  }\n  <span class=\"tab-bar-label\">{{ item.label }}</span>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <fold-badge\n      class=\"tab-bar-badge\"\n      [content]=\"item.badge + ''\"\n      [variant]=\"active ? 'accent' : 'neutral'\"\n    />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)){overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)) .tab-bar{min-width:max-content;max-width:none}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:linear-gradient(var(--fold-color-bg-rail-tertiary),var(--fold-color-bg-rail-tertiary)),var(--fold-color-bg-page);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}:host(.is-standalone.is-horizontal){margin-block-end:var(--fold-nav-layout-gap, var(--fold-space-lg, 16px))}@media(max-width:640px){:host(.is-standalone.is-horizontal){margin-block-end:var(--fold-nav-layout-gap, var(--fold-space-xs, 4px))}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }, { type: i0.Output, args: ["activeKeyChange"] }], activeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStyle", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }] } });
 
 /**
@@ -11359,11 +11359,11 @@ class FoldTabsComponent {
         this.tabButtons()[target]?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldTabsComponent, isStandalone: true, selector: "fold-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: true, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeKey: "activeKeyChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabBtn"], descendants: true, isSignal: true }], exportAs: ["foldTabs"], ngImport: i0, template: "<div\n  class=\"tab-bar\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"\n    resolvedDirection() === 'vertical' ? 'vertical' : 'horizontal'\n  \"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (tab of tabs(); track tab.key) {\n    <button\n      #tabBtn\n      type=\"button\"\n      role=\"tab\"\n      class=\"tab-bar-item\"\n      [id]=\"tabId(tab.key)\"\n      [class.is-active]=\"activeKey() === tab.key\"\n      [attr.aria-selected]=\"activeKey() === tab.key\"\n      [attr.aria-controls]=\"panelId(tab.key)\"\n      [tabindex]=\"activeKey() === tab.key ? 0 : -1\"\n      (click)=\"select(tab.key)\"\n    >\n      @if (tab.icon; as ic) {\n        <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n      } @else if (collapsed()) {\n        <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n          tab.label.charAt(0)\n        }}</span>\n      }\n      <span class=\"tab-bar-label\">{{ tab.label }}</span>\n      @if (tab.badge !== undefined && tab.badge !== null) {\n        <fold-badge\n          class=\"tab-bar-badge\"\n          [content]=\"tab.badge + ''\"\n          [variant]=\"activeKey() === tab.key ? 'accent' : 'neutral'\"\n        />\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)){overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)) .tab-bar{min-width:max-content;max-width:none}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldBadgeComponent, selector: "fold-badge", inputs: ["content", "radius", "variant"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldTabsComponent, isStandalone: true, selector: "fold-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: true, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeKey: "activeKeyChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabBtn"], descendants: true, isSignal: true }], exportAs: ["foldTabs"], ngImport: i0, template: "<div\n  class=\"tab-bar\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"\n    resolvedDirection() === 'vertical' ? 'vertical' : 'horizontal'\n  \"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (tab of tabs(); track tab.key) {\n    <button\n      #tabBtn\n      type=\"button\"\n      role=\"tab\"\n      class=\"tab-bar-item\"\n      [id]=\"tabId(tab.key)\"\n      [class.is-active]=\"activeKey() === tab.key\"\n      [attr.aria-selected]=\"activeKey() === tab.key\"\n      [attr.aria-controls]=\"panelId(tab.key)\"\n      [tabindex]=\"activeKey() === tab.key ? 0 : -1\"\n      (click)=\"select(tab.key)\"\n    >\n      @if (tab.icon; as ic) {\n        <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n      } @else if (collapsed()) {\n        <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n          tab.label.charAt(0)\n        }}</span>\n      }\n      <span class=\"tab-bar-label\">{{ tab.label }}</span>\n      @if (tab.badge !== undefined && tab.badge !== null) {\n        <fold-badge\n          class=\"tab-bar-badge\"\n          [content]=\"tab.badge + ''\"\n          [variant]=\"activeKey() === tab.key ? 'accent' : 'neutral'\"\n        />\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)){overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)) .tab-bar{min-width:max-content;max-width:none}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:linear-gradient(var(--fold-color-bg-rail-tertiary),var(--fold-color-bg-rail-tertiary)),var(--fold-color-bg-page);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldBadgeComponent, selector: "fold-badge", inputs: ["content", "radius", "variant"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "fold-tabs", standalone: true, exportAs: "foldTabs", imports: [FoldIconComponent, FoldBadgeComponent], template: "<div\n  class=\"tab-bar\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"\n    resolvedDirection() === 'vertical' ? 'vertical' : 'horizontal'\n  \"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (tab of tabs(); track tab.key) {\n    <button\n      #tabBtn\n      type=\"button\"\n      role=\"tab\"\n      class=\"tab-bar-item\"\n      [id]=\"tabId(tab.key)\"\n      [class.is-active]=\"activeKey() === tab.key\"\n      [attr.aria-selected]=\"activeKey() === tab.key\"\n      [attr.aria-controls]=\"panelId(tab.key)\"\n      [tabindex]=\"activeKey() === tab.key ? 0 : -1\"\n      (click)=\"select(tab.key)\"\n    >\n      @if (tab.icon; as ic) {\n        <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n      } @else if (collapsed()) {\n        <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n          tab.label.charAt(0)\n        }}</span>\n      }\n      <span class=\"tab-bar-label\">{{ tab.label }}</span>\n      @if (tab.badge !== undefined && tab.badge !== null) {\n        <fold-badge\n          class=\"tab-bar-badge\"\n          [content]=\"tab.badge + ''\"\n          [variant]=\"activeKey() === tab.key ? 'accent' : 'neutral'\"\n        />\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)){overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)) .tab-bar{min-width:max-content;max-width:none}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"] }]
+            args: [{ selector: "fold-tabs", standalone: true, exportAs: "foldTabs", imports: [FoldIconComponent, FoldBadgeComponent], template: "<div\n  class=\"tab-bar\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"\n    resolvedDirection() === 'vertical' ? 'vertical' : 'horizontal'\n  \"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (tab of tabs(); track tab.key) {\n    <button\n      #tabBtn\n      type=\"button\"\n      role=\"tab\"\n      class=\"tab-bar-item\"\n      [id]=\"tabId(tab.key)\"\n      [class.is-active]=\"activeKey() === tab.key\"\n      [attr.aria-selected]=\"activeKey() === tab.key\"\n      [attr.aria-controls]=\"panelId(tab.key)\"\n      [tabindex]=\"activeKey() === tab.key ? 0 : -1\"\n      (click)=\"select(tab.key)\"\n    >\n      @if (tab.icon; as ic) {\n        <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n      } @else if (collapsed()) {\n        <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n          tab.label.charAt(0)\n        }}</span>\n      }\n      <span class=\"tab-bar-label\">{{ tab.label }}</span>\n      @if (tab.badge !== undefined && tab.badge !== null) {\n        <fold-badge\n          class=\"tab-bar-badge\"\n          [content]=\"tab.badge + ''\"\n          [variant]=\"activeKey() === tab.key ? 'accent' : 'neutral'\"\n        />\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)){overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)) .tab-bar{min-width:max-content;max-width:none}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:linear-gradient(var(--fold-color-bg-rail-tertiary),var(--fold-color-bg-rail-tertiary)),var(--fold-color-bg-page);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"] }]
         }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: true }] }, { type: i0.Output, args: ["activeKeyChange"] }], activeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStyle", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], tabButtons: [{ type: i0.ViewChildren, args: ["tabBtn", { isSignal: true }] }] } });
 
 /**
@@ -12190,7 +12190,7 @@ class FoldPanelHostComponent {
         this.inerted = [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPanelHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPanelHostComponent, isStandalone: true, selector: "fold-panel-host", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@for (panel of panels(); track panel.id) {\n  <div\n    class=\"panel-dock\"\n    [attr.data-side]=\"panelSide(panel)\"\n    [class.panel-dock--passthrough]=\"!isModal(panel)\"\n    (click)=\"onBackdrop($event, panel)\"\n  >\n    <aside\n      class=\"panel\"\n      [attr.data-side]=\"panelSide(panel)\"\n      [attr.data-surface]=\"panelSurface(panel)\"\n      [style.--panel-width.px]=\"panel.width()\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"isModal(panel)\"\n      [attr.aria-label]=\"ariaLabel(panel)\"\n      [attr.aria-labelledby]=\"ariaLabelledby(panel)\"\n      tabindex=\"-1\"\n      [foldFocusTrap]=\"shouldTrap(panel)\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (hasGrabber(panel)) {\n        <button\n          type=\"button\"\n          class=\"panel-grabber\"\n          [attr.aria-label]=\"dismissLabel\"\n          (click)=\"onGrabber(panel)\"\n        >\n          <span class=\"panel-grabber__bar\" aria-hidden=\"true\"></span>\n        </button>\n      }\n\n      @if (panel.kind === \"template\") {\n        <fold-panel-header\n          [title]=\"panel.title()\"\n          [subtitle]=\"panel.subtitle()\"\n          (closed)=\"panel.onClose()\"\n        />\n        <div class=\"panel-body\">\n          <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n        </div>\n      } @else {\n        <ng-container [foldPanelComponentOutlet]=\"panel\" />\n      }\n    </aside>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.panel-dock{position:absolute;inset:0;z-index:50;display:flex;justify-content:flex-end;container-type:inline-size;overflow:clip}.panel-dock[data-side=left]{justify-content:flex-start}.panel-dock[data-side=bottom]{align-items:flex-end}.panel-dock--passthrough{pointer-events:none}.panel-dock--passthrough .panel{pointer-events:auto}.panel{--panel-width: 490px;display:flex;flex-direction:column;width:min(var(--panel-width),100%);height:100%;overflow:hidden;font-feature-settings:\"tnum\" on;background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);-webkit-backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);border-left:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-right);animation:panel-slide-in-right .2s cubic-bezier(.4,0,.2,1)}.panel[data-side=left]{border-left:none;border-right:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-left);animation-name:panel-slide-in-left}.panel[data-side=bottom]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom}.panel-grabber{all:unset;display:none;box-sizing:border-box;width:100%;flex:none;place-items:center;padding:var(--fold-space-sm) 0;cursor:grab}.panel-grabber:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-4px}.panel-grabber__bar{display:block;width:2.25rem;height:.28rem;border-radius:var(--fold-radius-pill);background:var(--fold-color-border)}.panel[data-side=bottom] .panel-grabber{display:grid}.panel[data-surface=solid]{background:var(--fold-color-surface-card);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--fold-color-border)}@media(max-width:768px){.panel[data-side=right],.panel[data-side=left]{width:100vw}}@container (max-width: 640px){.panel-dock[data-side=auto]{align-items:flex-end}.panel[data-side=auto]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom}.panel[data-side=auto] .panel-grabber{display:grid}}.panel-body{flex:1 1 auto;overflow-y:auto;padding:var(--fold-space-lg)}@keyframes panel-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes panel-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusTrapDirective, selector: "[foldFocusTrap]", inputs: ["foldFocusTrap"] }, { kind: "directive", type: FoldPanelComponentOutletDirective, selector: "[foldPanelComponentOutlet]", inputs: ["foldPanelComponentOutlet"] }, { kind: "component", type: FoldPanelHeaderComponent, selector: "fold-panel-header", inputs: ["title", "subtitle", "icon", "variant", "closeLabel"], outputs: ["closed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPanelHostComponent, isStandalone: true, selector: "fold-panel-host", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@for (panel of panels(); track panel.id) {\n  <div\n    class=\"panel-dock\"\n    [attr.data-side]=\"panelSide(panel)\"\n    [class.panel-dock--passthrough]=\"!isModal(panel)\"\n    (click)=\"onBackdrop($event, panel)\"\n  >\n    <aside\n      class=\"panel\"\n      [attr.data-side]=\"panelSide(panel)\"\n      [attr.data-surface]=\"panelSurface(panel)\"\n      [style.--panel-width.px]=\"panel.width()\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"isModal(panel)\"\n      [attr.aria-label]=\"ariaLabel(panel)\"\n      [attr.aria-labelledby]=\"ariaLabelledby(panel)\"\n      tabindex=\"-1\"\n      [foldFocusTrap]=\"shouldTrap(panel)\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (hasGrabber(panel)) {\n        <button\n          type=\"button\"\n          class=\"panel-grabber\"\n          [attr.aria-label]=\"dismissLabel\"\n          (click)=\"onGrabber(panel)\"\n        >\n          <span class=\"panel-grabber__bar\" aria-hidden=\"true\"></span>\n        </button>\n      }\n\n      @if (panel.kind === \"template\") {\n        <fold-panel-header\n          [title]=\"panel.title()\"\n          [subtitle]=\"panel.subtitle()\"\n          (closed)=\"panel.onClose()\"\n        />\n        <div class=\"panel-body\">\n          <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n        </div>\n      } @else {\n        <ng-container [foldPanelComponentOutlet]=\"panel\" />\n      }\n    </aside>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.panel-dock{position:absolute;inset:0;z-index:50;display:flex;justify-content:flex-end;container-type:inline-size;overflow:clip}.panel-dock[data-side=left]{justify-content:flex-start}.panel-dock[data-side=bottom]{align-items:flex-end}.panel-dock--passthrough{pointer-events:none}.panel-dock--passthrough .panel{pointer-events:auto}.panel{--panel-width: 490px;display:flex;flex-direction:column;width:min(var(--panel-width),100%);height:100%;overflow:hidden;font-feature-settings:\"tnum\" on;background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);-webkit-backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);border-left:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-right);animation:panel-slide-in-right .2s cubic-bezier(.4,0,.2,1)}.panel[data-side=left]{border-left:none;border-right:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-left);animation-name:panel-slide-in-left}.panel[data-side=bottom]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom}.panel-grabber{all:unset;display:none;box-sizing:border-box;width:100%;flex:none;place-items:center;padding:var(--fold-space-sm) 0;cursor:grab}.panel-grabber:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-4px}.panel-grabber__bar{display:block;width:2.25rem;height:.28rem;border-radius:var(--fold-radius-pill);background:var(--fold-color-border)}.panel[data-side=bottom] .panel-grabber{display:grid}.panel[data-surface=solid]{background:var(--fold-color-surface-card);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--fold-color-border)}@media(max-width:768px){.panel[data-side=right],.panel[data-side=left]{width:100vw}}@container (max-width: 640px){.panel[data-side=auto]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom;align-self:flex-end}.panel[data-side=auto] .panel-grabber{display:grid}.panel-body{padding:var(--fold-space-md)}}.panel-body{flex:1 1 auto;overflow-y:auto;padding:var(--fold-space-lg)}@keyframes panel-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes panel-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusTrapDirective, selector: "[foldFocusTrap]", inputs: ["foldFocusTrap"] }, { kind: "directive", type: FoldPanelComponentOutletDirective, selector: "[foldPanelComponentOutlet]", inputs: ["foldPanelComponentOutlet"] }, { kind: "component", type: FoldPanelHeaderComponent, selector: "fold-panel-header", inputs: ["title", "subtitle", "icon", "variant", "closeLabel"], outputs: ["closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPanelHostComponent, decorators: [{
             type: Component,
@@ -12199,7 +12199,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         FocusTrapDirective,
                         FoldPanelComponentOutletDirective,
                         FoldPanelHeaderComponent,
-                    ], template: "@for (panel of panels(); track panel.id) {\n  <div\n    class=\"panel-dock\"\n    [attr.data-side]=\"panelSide(panel)\"\n    [class.panel-dock--passthrough]=\"!isModal(panel)\"\n    (click)=\"onBackdrop($event, panel)\"\n  >\n    <aside\n      class=\"panel\"\n      [attr.data-side]=\"panelSide(panel)\"\n      [attr.data-surface]=\"panelSurface(panel)\"\n      [style.--panel-width.px]=\"panel.width()\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"isModal(panel)\"\n      [attr.aria-label]=\"ariaLabel(panel)\"\n      [attr.aria-labelledby]=\"ariaLabelledby(panel)\"\n      tabindex=\"-1\"\n      [foldFocusTrap]=\"shouldTrap(panel)\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (hasGrabber(panel)) {\n        <button\n          type=\"button\"\n          class=\"panel-grabber\"\n          [attr.aria-label]=\"dismissLabel\"\n          (click)=\"onGrabber(panel)\"\n        >\n          <span class=\"panel-grabber__bar\" aria-hidden=\"true\"></span>\n        </button>\n      }\n\n      @if (panel.kind === \"template\") {\n        <fold-panel-header\n          [title]=\"panel.title()\"\n          [subtitle]=\"panel.subtitle()\"\n          (closed)=\"panel.onClose()\"\n        />\n        <div class=\"panel-body\">\n          <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n        </div>\n      } @else {\n        <ng-container [foldPanelComponentOutlet]=\"panel\" />\n      }\n    </aside>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.panel-dock{position:absolute;inset:0;z-index:50;display:flex;justify-content:flex-end;container-type:inline-size;overflow:clip}.panel-dock[data-side=left]{justify-content:flex-start}.panel-dock[data-side=bottom]{align-items:flex-end}.panel-dock--passthrough{pointer-events:none}.panel-dock--passthrough .panel{pointer-events:auto}.panel{--panel-width: 490px;display:flex;flex-direction:column;width:min(var(--panel-width),100%);height:100%;overflow:hidden;font-feature-settings:\"tnum\" on;background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);-webkit-backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);border-left:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-right);animation:panel-slide-in-right .2s cubic-bezier(.4,0,.2,1)}.panel[data-side=left]{border-left:none;border-right:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-left);animation-name:panel-slide-in-left}.panel[data-side=bottom]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom}.panel-grabber{all:unset;display:none;box-sizing:border-box;width:100%;flex:none;place-items:center;padding:var(--fold-space-sm) 0;cursor:grab}.panel-grabber:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-4px}.panel-grabber__bar{display:block;width:2.25rem;height:.28rem;border-radius:var(--fold-radius-pill);background:var(--fold-color-border)}.panel[data-side=bottom] .panel-grabber{display:grid}.panel[data-surface=solid]{background:var(--fold-color-surface-card);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--fold-color-border)}@media(max-width:768px){.panel[data-side=right],.panel[data-side=left]{width:100vw}}@container (max-width: 640px){.panel-dock[data-side=auto]{align-items:flex-end}.panel[data-side=auto]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom}.panel[data-side=auto] .panel-grabber{display:grid}}.panel-body{flex:1 1 auto;overflow-y:auto;padding:var(--fold-space-lg)}@keyframes panel-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes panel-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.panel{animation:none}}\n"] }]
+                    ], template: "@for (panel of panels(); track panel.id) {\n  <div\n    class=\"panel-dock\"\n    [attr.data-side]=\"panelSide(panel)\"\n    [class.panel-dock--passthrough]=\"!isModal(panel)\"\n    (click)=\"onBackdrop($event, panel)\"\n  >\n    <aside\n      class=\"panel\"\n      [attr.data-side]=\"panelSide(panel)\"\n      [attr.data-surface]=\"panelSurface(panel)\"\n      [style.--panel-width.px]=\"panel.width()\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"isModal(panel)\"\n      [attr.aria-label]=\"ariaLabel(panel)\"\n      [attr.aria-labelledby]=\"ariaLabelledby(panel)\"\n      tabindex=\"-1\"\n      [foldFocusTrap]=\"shouldTrap(panel)\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (hasGrabber(panel)) {\n        <button\n          type=\"button\"\n          class=\"panel-grabber\"\n          [attr.aria-label]=\"dismissLabel\"\n          (click)=\"onGrabber(panel)\"\n        >\n          <span class=\"panel-grabber__bar\" aria-hidden=\"true\"></span>\n        </button>\n      }\n\n      @if (panel.kind === \"template\") {\n        <fold-panel-header\n          [title]=\"panel.title()\"\n          [subtitle]=\"panel.subtitle()\"\n          (closed)=\"panel.onClose()\"\n        />\n        <div class=\"panel-body\">\n          <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n        </div>\n      } @else {\n        <ng-container [foldPanelComponentOutlet]=\"panel\" />\n      }\n    </aside>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.panel-dock{position:absolute;inset:0;z-index:50;display:flex;justify-content:flex-end;container-type:inline-size;overflow:clip}.panel-dock[data-side=left]{justify-content:flex-start}.panel-dock[data-side=bottom]{align-items:flex-end}.panel-dock--passthrough{pointer-events:none}.panel-dock--passthrough .panel{pointer-events:auto}.panel{--panel-width: 490px;display:flex;flex-direction:column;width:min(var(--panel-width),100%);height:100%;overflow:hidden;font-feature-settings:\"tnum\" on;background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);-webkit-backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);border-left:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-right);animation:panel-slide-in-right .2s cubic-bezier(.4,0,.2,1)}.panel[data-side=left]{border-left:none;border-right:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-left);animation-name:panel-slide-in-left}.panel[data-side=bottom]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom}.panel-grabber{all:unset;display:none;box-sizing:border-box;width:100%;flex:none;place-items:center;padding:var(--fold-space-sm) 0;cursor:grab}.panel-grabber:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-4px}.panel-grabber__bar{display:block;width:2.25rem;height:.28rem;border-radius:var(--fold-radius-pill);background:var(--fold-color-border)}.panel[data-side=bottom] .panel-grabber{display:grid}.panel[data-surface=solid]{background:var(--fold-color-surface-card);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--fold-color-border)}@media(max-width:768px){.panel[data-side=right],.panel[data-side=left]{width:100vw}}@container (max-width: 640px){.panel[data-side=auto]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom;align-self:flex-end}.panel[data-side=auto] .panel-grabber{display:grid}.panel-body{padding:var(--fold-space-md)}}.panel-body{flex:1 1 auto;overflow-y:auto;padding:var(--fold-space-lg)}@keyframes panel-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes panel-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.panel{animation:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onEscape: [{
                 type: HostListener,
                 args: ["document:keydown.escape"]