fold-ng 0.10.1 → 0.10.2

package/CHANGELOG.md

@@ -8,6 +8,28 @@ 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
@@ -1393,7 +1415,8 @@ design-token stylesheet.
   `currentColor`; `prefers-reduced-motion` + `forced-colors` are respected;
   strings localise via inputs / providers (`provideFoldPanelLabels`).
 
-[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.10.1...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

package/fesm2022/fold-ng.mjs

@@ -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))}@media(max-width:640px){:host{gap:var(--fold-nav-layout-gap, var(--fold-space-sm, 8px))}}: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}\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))}@media(max-width:640px){:host{gap:var(--fold-nav-layout-gap, var(--fold-space-sm, 8px))}}: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}\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: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-sm, 8px))}}\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: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-sm, 8px))}}\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 }] }] } });
 
 /**