fold-ng 0.10.2 → 0.10.3

package/CHANGELOG.md

@@ -8,18 +8,25 @@ All notable changes to **fold-ng** are documented here. The format follows
 
 _Nothing yet._
 
+## [0.10.3] - 2026-08-12
+
+y
+
 ## [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.
+- **A `fold-nav-layout` hands its content a zero gutter, at every width.** The
+  bar is that column's header: it spans the layout's full width, so a gutter
+  under it insets the cards _relative to the menu that names them_ and the two
+  stop reading as one column — a desktop misalignment as much as a mobile one,
+  where it also costs room there isn't. The gutter belongs to the PAGE; a nav
+  layout's body is the inside of a column the page has already inset. 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, and a
+  body that wants its inset back sets the token on its own content.
 
 - **`fold-page-layout` halves its gutter below 640px** —
   `calc(var(--fold-page-gutter) / 2)`, so a page or theme that retuned the token
@@ -1415,7 +1422,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.2...HEAD
+[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.10.3...HEAD
+[0.10.3]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.10.3
 [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

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-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"] });
+        ], 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}.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-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"] }]
+                    ], 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}.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 }] }] } });
 
 /**