fix: release layout style 3.0.2

.github/workflows/npm-publish.yml

@@ -6,7 +6,7 @@ on:
   workflow_dispatch:
     inputs:
       release_tag:
-        description: "Release tag to publish, for example v3.0.1"
+        description: "Release tag to publish, for example v3.0.2"
         required: true
         type: string
 

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to `layout-style-css` are documented here. This project follows semantic versioning.
 
+## [3.0.2] - 2026-08-25
+
+### Fixed
+
+- Matched App Shell row tracks to base, medium, wide, and personality-specific area topologies so primary content receives flexible height while headers and footers remain intrinsic.
+- Separated compact section spacing from normal section spacing and preserved the compact-smaller-than-normal invariant across regular, short, and shallow viewport heights.
+- Connected the documented page-padding and Wrapper-gutter tokens to rendered Wrapper padding while retaining safe-area handling.
+
+### Tests
+
+- Added static and rendered regression coverage for App Shell row counts, flexible workspace allocation, compact section ordering, public gutter overrides, generated CSS parity, package metadata, and Pages artifacts.
+
 ## [3.0.1] - 2026-08-09
 
 ### Changed

README.md

@@ -2,7 +2,7 @@
 
 Zero-configuration, dependency-free structural CSS that responds to the width and height a layout actually receives.
 
-`layout-style-css@3.0.1` is the current v3 patch release and preserves the clean-break structural contract introduced in 3.0.0. It provides intrinsic wrappers, composition primitives, seven semantic recipes, and sixteen spatial personalities. Layout owns structure; UI Style Kit owns paint; Interactive Surface owns interaction styling.
+`layout-style-css@3.0.2` is the current v3 patch release and preserves the clean-break structural contract introduced in 3.0.0. It provides intrinsic wrappers, composition primitives, seven semantic recipes, and sixteen spatial personalities. Layout owns structure; UI Style Kit owns paint; Interactive Surface owns interaction styling.
 
 ## Requirements
 
@@ -13,7 +13,7 @@ Zero-configuration, dependency-free structural CSS that responds to the width an
 ## Install
 
 ```bash
-npm install layout-style-css@3.0.1
+npm install layout-style-css@3.0.2
 ```
 
 Most applications need one import:
@@ -68,6 +68,8 @@ Wrappers are optional measure and nesting controls. Every wrapper uses logical p
 
 All lanes clamp to the available inline size, including allocations from 320px through ultrawide screens.
 
+`--ly-page-padding-inline` supplies the default `--ly-wrapper-gutter` value. Override `--ly-wrapper-gutter` on `.ly-root` or a narrower scope to control rendered Wrapper padding; safe-area compensation is still applied once at the Wrapper edge.
+
 ## Composition Primitives
 
 The core includes:
@@ -93,6 +95,8 @@ Recipes use attributes only. The stacked semantic source order is always safe, a
 | `data-ly-recipe="gallery"` | Intrinsic tracks; no topology breakpoint |
 | `data-ly-recipe="card-grid"` | Intrinsic tracks; no topology breakpoint |
 
+App Shell base, medium, and wide topologies own matching row definitions. This keeps the primary workspace flexible while header and footer tracks remain intrinsic, including personality-specific four-row topologies.
+
 Canonical regions use `data-ly-area`, including `header`, `sidebar`, `nav`, `main`, `aside`, `footer`, `content`, `media`, `actions`, `primary`, and `secondary`.
 
 Recipe class aliases such as `.ly-dashboard` no longer exist. Use:
@@ -129,6 +133,8 @@ The system responds to available block size without orientation queries:
 - At viewport heights of `30rem` or less, recipe-owned sticky behavior becomes normal flow, and cover/shell minimums stop forcing full-height regions.
 - Safe-area block insets remain available, and required regions are never hidden solely because the viewport is short.
 
+`--ly-section-padding-block` controls normal sections. `--ly-section-padding-block-compact` independently controls `.ly-section--compact`, preserving a smaller rhythm through the regular, short, and shallow height tiers.
+
 Use the public height, gap, measure, ratio, rail, media, card, and grid-minimum custom properties for advanced tuning. Defaults use `100vh` fallbacks followed by `100dvh`.
 
 ## Personalities
@@ -176,8 +182,8 @@ This order lets UI Style Kit establish paint and theme roles, Interactive Surfac
 ## CDN
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/layout-style-css@3.0.1/dist/layout-style-css.min.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.0.1/dist/layout-style-css.min.css">
+<link rel="stylesheet" href="https://unpkg.com/layout-style-css@3.0.2/dist/layout-style-css.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.0.2/dist/layout-style-css.min.css">
 ```
 
 ## Clean-Break Migration

demo/index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="content-language" content="en-US">
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <meta name="title" content="Layout Style CSS v3 Intrinsic Responsive Demo">
-    <meta name="version" content="3.0.1">
+    <meta name="version" content="3.0.2">
     <meta name="description" content="Explore zero-configuration intrinsic wrappers, responsive recipes, vertical adaptations, and sixteen layout personalities in Layout Style CSS v3.">
     <meta name="keywords" content="CSS layout library, container queries, layout recipes, UI Style Kit CSS, Interactive Surface CSS, responsive CSS">
     <meta name="author" content="Foscat">
@@ -47,7 +47,7 @@
     <meta property="og:image:height" content="630">
     <meta property="og:url" content="https://foscat.github.io/Layout-Style-CSS/">
     <meta property="og:site_name" content="layout-style-css">
-    <meta property="og:updated_time" content="2026-08-09T00:00:00-05:00">
+    <meta property="og:updated_time" content="2026-08-25T00:00:00-05:00">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Layout Style CSS v3 Intrinsic Responsive Demo">
     <meta name="twitter:description" content="Intrinsic responsive layouts that adapt to available width and height and pair cleanly with paint and interaction libraries.">
@@ -71,28 +71,28 @@
     <link id="uiKitStylesheet" rel="stylesheet" href="https://unpkg.com/ui-style-kit-css@2.1.0/dist/ui-style-kit.visual.min.css" integrity="sha384-DUhB5MkNLJffjy7NRg13prdEcPTUR6zdPtameCyfq3tId/cM8o3ojpyvU/xdxZ8t" crossorigin="anonymous">
     <link id="uiKitInteractiveThemeStylesheet" rel="stylesheet" href="https://unpkg.com/ui-style-kit-css@2.1.0/styles/interactive-surface-theme.css" integrity="sha384-t7ZuirMM/Qoeoz+/5+S4JxIGXs076pqlgMxv6FymZW3tGj7snT8J2ZlV2+sH6++j" crossorigin="anonymous">
     <link id="interactiveSurfaceStylesheet" rel="stylesheet" href="https://unpkg.com/interactive-surface-css@1.5.0/state-core.css" integrity="sha384-v2NwNOzOcQ5ed7W7OHahaKHXspqfD0p8XO+kueqrsyfEcuBO2izsAQb/J/PxF0eX" crossorigin="anonymous">
-    <link id="layoutCoreStylesheet" rel="stylesheet" href="../dist/layout-style-css.css?v=3.0.1">
-    <link rel="stylesheet" href="./demo.css?v=3.0.1">
+    <link id="layoutCoreStylesheet" rel="stylesheet" href="../dist/layout-style-css.css?v=3.0.2">
+    <link rel="stylesheet" href="./demo.css?v=3.0.2">
 
     <script type="application/ld+json">
       {
         "@context": "https://schema.org",
         "@type": "SoftwareSourceCode",
         "name": "layout-style-css",
-        "version": "3.0.1",
+        "version": "3.0.2",
         "description": "A dependency-free CSS layout library for intrinsic wrappers, composition primitives, width and height responsive recipes, and spatial personalities.",
         "programmingLanguage": "CSS",
         "applicationCategory": "DeveloperApplication",
         "url": "https://foscat.github.io/Layout-Style-CSS/",
         "image": "https://foscat.github.io/Layout-Style-CSS/assets/social-card.png",
         "datePublished": "2026-07-29",
-        "dateModified": "2026-08-09",
+        "dateModified": "2026-08-25",
         "author": { "@type": "Organization", "name": "Foscat" },
         "publisher": { "@type": "Organization", "name": "Foscat" }
       }
     </script>
-    <script src="./personality-metadata.js?v=3.0.1"></script>
-    <script type="module" src="./demo.js?v=3.0.1" data-personalities-url="../personalities.json?v=3.0.1"></script>
+    <script src="./personality-metadata.js?v=3.0.2"></script>
+    <script type="module" src="./demo.js?v=3.0.2" data-personalities-url="../personalities.json?v=3.0.2"></script>
   </head>
   <body class="ly-root" data-ui="minimal-saas" data-theme="arctic-indigo" data-mode="light" data-ly-layout="minimal-saas" data-density="comfortable" data-ecosystem="all-three">
     <a class="demo-skip-link" href="#layoutLab">Skip to the layout lab</a>

demo/sitemap.xml

@@ -2,7 +2,7 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://foscat.github.io/Layout-Style-CSS/</loc>
-    <lastmod>2026-08-09</lastmod>
+    <lastmod>2026-08-25</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
   </url>

dist/foundation.css

@@ -22,21 +22,22 @@
     --ly-wrapper-prose: 68ch;
     --ly-wrapper-content: 72rem;
     --ly-wrapper-wide: 112rem;
-    --ly-page-padding-inline: clamp(1rem, 4vw, 3rem);
+    --ly-page-padding-inline: clamp(1rem, 3vw, 3rem);
     --ly-safe-area-inline: max(
       env(safe-area-inset-left, 0px),
       env(safe-area-inset-right, 0px)
     );
     --ly-safe-area-block-start: env(safe-area-inset-top, 0px);
     --ly-safe-area-block-end: env(safe-area-inset-bottom, 0px);
-    --ly-wrapper-gutter: max(var(--ly-page-padding-inline), var(--ly-safe-area-inline));
+    --ly-wrapper-gutter: var(--ly-page-padding-inline);
 
     --ly-profile-gap: var(--ly-space-5);
     --ly-gap: var(--ly-profile-gap);
     --ly-grid-gap: var(--ly-gap);
     --ly-stack-gap: var(--ly-space-4);
     --ly-cluster-gap: var(--ly-space-3);
     --ly-section-padding-block: clamp(3rem, 7vh, 6rem);
+    --ly-section-padding-block-compact: clamp(1.5rem, 3.5vh, 3rem);
     --ly-header-height: 4.5rem;
     --ly-sticky-position: sticky;
     --ly-cover-min: 100vh;
@@ -64,18 +65,21 @@
     --ly-gallery-min: 12rem;
     --ly-card-grid-min: 16rem;
 
+    --ly-app-shell-base-rows: auto auto minmax(0, 1fr) auto auto;
     --ly-app-shell-medium-areas:
       "header header"
       "sidebar main"
       "aside main"
       "footer footer";
+    --ly-app-shell-medium-rows: auto auto minmax(0, 1fr) auto;
     --ly-app-shell-medium-columns:
       minmax(min(100%, var(--ly-recipe-rail)), auto)
       minmax(0, 1fr);
     --ly-app-shell-wide-areas:
       "sidebar header header"
       "sidebar main aside"
       "sidebar footer footer";
+    --ly-app-shell-wide-rows: auto minmax(0, 1fr) auto;
     --ly-app-shell-wide-columns:
       minmax(min(100%, var(--ly-recipe-rail)), auto)
       minmax(0, 1fr)
@@ -125,6 +129,13 @@
     min-block-size: 0;
   }
 
+  /* Prefer the nearest layout scope for gutters when container units parse. */
+  @supports (width: 1cqi) {
+    :where(.ly-root) {
+      --ly-page-padding-inline: clamp(1rem, 3cqi, 3rem);
+    }
+  }
+
   /* Enhance viewport-bound tokens only when dynamic viewport units parse. */
   @supports (height: 100dvh) {
     :where(.ly-root) {
@@ -162,6 +173,7 @@
       --ly-stack-gap: min(var(--ly-space-4), 3vh);
       --ly-cluster-gap: min(var(--ly-space-3), 2vh);
       --ly-section-padding-block: clamp(1.5rem, 6vh, 3rem);
+      --ly-section-padding-block-compact: clamp(0.75rem, 3vh, 1.25rem);
       --ly-header-height: 3.5rem;
       --ly-scroll-max: min(62vh, 34rem);
     }
@@ -171,6 +183,7 @@
         --ly-stack-gap: min(var(--ly-space-4), 3dvh);
         --ly-cluster-gap: min(var(--ly-space-3), 2dvh);
         --ly-section-padding-block: clamp(1.5rem, 6dvh, 3rem);
+        --ly-section-padding-block-compact: clamp(0.75rem, 3dvh, 1.25rem);
         --ly-scroll-max: min(62dvh, 34rem);
       }
     }
@@ -182,6 +195,7 @@
       --ly-shell-min: auto;
       --ly-sticky-position: static;
       --ly-section-padding-block: var(--ly-space-5);
+      --ly-section-padding-block-compact: var(--ly-space-3);
       --ly-scroll-max: max(12rem, calc(100vh - 8rem));
     }