layout-style-css 3.0.2 → 3.1.0

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to `layout-style-css` are documented here. This project follows semantic versioning.
 
+## [3.1.0] - 2026-08-25
+
+### Added
+
+- Added compact, normal, and spacious density contexts that can be applied at the root or to a nested layout subtree.
+- Added the `96rem` workspace Wrapper, all ten local gap utilities, explicit bounded and viewport-relative Scroll modifiers, and recipe-owned threshold metadata.
+
+### Changed
+
+- Made normal section spacing more conservative while retaining the former marketing rhythm through spacious density.
+- Made gap utilities local to the element carrying the class and made base Scroll rely on its containing layout for height constraints.
+
+### Migration
+
+- Use spacious density for the former section rhythm, explicit inherited gap tokens for a shared spacing context, and `ly-scroll--viewport` for the former viewport-relative Scroll behavior.
+
+### Tests
+
+- Added density, workspace utilization, nested-gap isolation, Scroll-mode, public-token liveness, threshold metadata, cross-height, generated-output, package, and Pages contracts.
+
 ## [3.0.2] - 2026-08-25
 
 ### Fixed

package/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.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.
+`layout-style-css@3.1.0` is the current additive v3 release. It provides intrinsic wrappers, composition primitives, seven semantic recipes, explicit local density controls, 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.2
+npm install layout-style-css@3.1.0
 ```
 
 Most applications need one import:
@@ -44,6 +44,17 @@ Use `.ly-root` as the responsive boundary and keep the mobile DOM order authorit
 
 `.ly-root`, wrappers, and recipe roots establish the named `ly-scope` inline-size container. A recipe works directly in the root; when it is nested in a wrapper, it responds to that nearest wrapper.
 
+## Density Contexts
+
+Normal density is the zero-configuration default. Use `data-ly-density="compact"`, `data-ly-density="normal"`, or `data-ly-density="spacious"` on `.ly-root` or any nested layout subtree. A nested density explicitly resets inherited gaps and section rhythm, so task controls can remain compact inside a spacious marketing page.
+
+```html
+<main class="ly-root" data-ly-density="normal">
+  <section data-ly-density="compact">Dense application controls</section>
+  <section data-ly-density="spacious">Campaign presentation</section>
+</main>
+```
+
 ## Wrappers
 
 Wrappers are optional measure and nesting controls. Every wrapper uses logical properties, fluid container-relative gutters, safe-area compensation, and shrink-safe sizing.
@@ -54,6 +65,7 @@ Wrappers are optional measure and nesting controls. Every wrapper uses logical p
 | `.ly-wrapper--compact` | `40rem` compact measure |
 | `.ly-wrapper--prose` | `68ch` reading measure |
 | `.ly-wrapper--content` | `72rem` content measure |
+| `.ly-wrapper--workspace` | `96rem` task-oriented application measure |
 | `.ly-wrapper--wide` | `112rem` wide measure |
 | `.ly-wrapper--full` | Full available inline size |
 | `.ly-wrapper--breakout` | Clamped content, feature, and full lanes |
@@ -79,7 +91,9 @@ The core includes:
 - `.ly-panes` and `.ly-media`
 - `.ly-reel`, `.ly-frame`, and `.ly-scroll`
 
-Grid and flex primitives wrap intrinsically whenever track wrapping can replace a query. Page, cover, and bounded-scroll sizing use `vh` fallbacks followed by `100dvh`-aware behavior. Only `.ly-reel` deliberately scrolls horizontally; only `.ly-scroll` deliberately creates a bounded vertical scroll region.
+Grid and flex primitives wrap intrinsically whenever track wrapping can replace a query. Base `.ly-scroll` owns overflow but no height cap. Add `.ly-scroll--bounded` for the stable `--ly-scroll-max` cap or `.ly-scroll--viewport` for height-aware `--ly-scroll-viewport-max` behavior. Only `.ly-reel` deliberately scrolls horizontally; only the Scroll family deliberately creates vertical scrolling.
+
+Gap utilities `.ly-gap-0` through `.ly-gap-9` assign `gap` only on the element carrying the class. They do not alter inherited primitive gap variables. Override `--ly-gap`, `--ly-grid-gap`, `--ly-stack-gap`, or `--ly-cluster-gap` when a shared spacing context is intentional.
 
 ## Automatic Recipe Engine
 
@@ -95,6 +109,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 |
 
+The same ownership is available in `manifest.json` through `thresholds.recipes`, alongside the generic container-width and viewport-height arrays. Release checks verify every mapping against authored queries and require every public geometry token to reach a runtime CSS declaration.
+
 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`.
@@ -162,7 +178,7 @@ Each personality is a token/topology profile consumed by the shared recipe engin
 | `layout-style-css/personalities.json` | Public layout-to-visual pairing recommendations |
 | `layout-style-css/package.json` | Package metadata |
 
-The cascade order is `ly.reset`, `ly.tokens`, `ly.wrappers`, `ly.primitives`, `ly.recipes`, `ly.utilities`, and `ly.personalities`.
+The cascade order is `ly.reset`, `ly.tokens`, `ly.wrappers`, `ly.primitives`, `ly.recipes`, `ly.utilities`, `ly.personalities`, and `ly.context`. Unlayered application CSS remains stronger than every library layer.
 
 ## Ecosystem Imports
 
@@ -177,18 +193,18 @@ import "layout-style-css";
 
 This order lets UI Style Kit establish paint and theme roles, Interactive Surface add interaction states, and Layout apply structure.
 
-`data-ly-layout`, `data-ui`, `data-theme`, and `data-mode` are independently selectable. See [Layout Styles](docs/wiki/Layout-Styles.md#visual-pairing-guidance) for the full recommendation matrix; pairings are never dependencies.
+`data-ly-layout`, `data-ly-density`, `data-ui`, `data-theme`, and `data-mode` are independently selectable. See [Layout Styles](docs/wiki/Layout-Styles.md#visual-pairing-guidance) for the full recommendation matrix; pairings are never dependencies.
 
 ## CDN
 
 ```html
-<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">
+<link rel="stylesheet" href="https://unpkg.com/layout-style-css@3.1.0/dist/layout-style-css.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.1.0/dist/layout-style-css.min.css">
 ```
 
 ## Clean-Break Migration
 
-v3 has no compatibility bundle. It removes `legacy.css`, the deprecated UI Style Kit structural bridge, v1/v2 aliases, responsive `ly-md-*` and `ly-lg-*` utilities, and all visual-order utilities. See [Migrating To 3.0](docs/wiki/Migrating-To-3.0.md) for exact mappings.
+v3 has no compatibility bundle. It removes `legacy.css`, the deprecated UI Style Kit structural bridge, v1/v2 aliases, responsive `ly-md-*` and `ly-lg-*` utilities, and all visual-order utilities. See [Migrating To 3.0](docs/wiki/Migrating-To-3.0.md) for the major-version mappings and [Migrating To 3.1](docs/wiki/Migrating-To-3.1.md) for density, local gap, and Scroll behavior changes.
 
 ## Demo And Verification
 
@@ -214,6 +230,7 @@ npm run release:verify
 - [Layout Recipes](docs/wiki/Layout-Recipes.md)
 - [Layout Styles](docs/wiki/Layout-Styles.md)
 - [Migrating To 3.0](docs/wiki/Migrating-To-3.0.md)
+- [Migrating To 3.1](docs/wiki/Migrating-To-3.1.md)
 - [Demo And GitHub Pages](docs/wiki/Demo-And-GitHub-Pages.md)
 - [Release And Publishing](docs/wiki/Release-And-Publishing.md)
 - [Security And Support](docs/wiki/Security-And-Support.md)

package/dist/core.css

@@ -1,4 +1,4 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
 
 @import url("./foundation.css");
 @import url("./wrappers.css");

package/dist/foundation.css

@@ -1,4 +1,4 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
 
 /*
   Foundation owns only shared spatial tokens, containment, and defensive
@@ -21,6 +21,7 @@
     --ly-wrapper-compact: 40rem;
     --ly-wrapper-prose: 68ch;
     --ly-wrapper-content: 72rem;
+    --ly-wrapper-workspace: 96rem;
     --ly-wrapper-wide: 112rem;
     --ly-page-padding-inline: clamp(1rem, 3vw, 3rem);
     --ly-safe-area-inline: max(
@@ -36,13 +37,14 @@
     --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-section-padding-block: clamp(2rem, 4vh, 4rem);
+    --ly-section-padding-block-compact: clamp(1rem, 2.5vh, 2rem);
     --ly-header-height: 4.5rem;
     --ly-sticky-position: sticky;
     --ly-cover-min: 100vh;
     --ly-shell-min: 100vh;
-    --ly-scroll-max: min(70vh, 50rem);
+    --ly-scroll-max: 50rem;
+    --ly-scroll-viewport-max: min(70vh, 50rem);
 
     --ly-switcher-threshold: 42rem;
     --ly-sidebar-size: 18rem;
@@ -141,7 +143,7 @@
     :where(.ly-root) {
       --ly-cover-min: 100dvh;
       --ly-shell-min: 100dvh;
-      --ly-scroll-max: min(70dvh, 50rem);
+      --ly-scroll-viewport-max: min(70dvh, 50rem);
     }
   }
 }
@@ -172,19 +174,19 @@
       --ly-grid-gap: var(--ly-gap);
       --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-section-padding-block: clamp(1.25rem, 4vh, 2rem);
+      --ly-section-padding-block-compact: clamp(0.75rem, 2vh, 1.25rem);
       --ly-header-height: 3.5rem;
-      --ly-scroll-max: min(62vh, 34rem);
+      --ly-scroll-viewport-max: min(62vh, 34rem);
     }
 
     @supports (height: 100dvh) {
       :where(.ly-root) {
         --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);
+        --ly-section-padding-block: clamp(1.25rem, 4dvh, 2rem);
+        --ly-section-padding-block-compact: clamp(0.75rem, 2dvh, 1.25rem);
+        --ly-scroll-viewport-max: min(62dvh, 34rem);
       }
     }
   }
@@ -194,15 +196,154 @@
       --ly-cover-min: auto;
       --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));
+      --ly-section-padding-block: var(--ly-space-4);
+      --ly-section-padding-block-compact: var(--ly-space-2);
+      --ly-scroll-viewport-max: max(12rem, calc(100vh - 8rem));
     }
 
     @supports (height: 100dvh) {
       :where(.ly-root) {
-        --ly-scroll-max: max(12rem, calc(100dvh - 8rem));
+        --ly-scroll-viewport-max: max(12rem, calc(100dvh - 8rem));
+      }
+    }
+  }
+}
+
+@layer ly.context {
+  :where(
+    .ly-root[data-ly-density="compact"],
+    .ly-root [data-ly-density="compact"]
+  ) {
+    --ly-gap: var(--ly-space-3);
+    --ly-grid-gap: var(--ly-space-3);
+    --ly-stack-gap: var(--ly-space-3);
+    --ly-cluster-gap: var(--ly-space-2);
+    --ly-section-padding-block: clamp(1rem, 2.5vh, 2rem);
+    --ly-section-padding-block-compact: clamp(0.5rem, 1.5vh, 1rem);
+  }
+
+  :where(
+    .ly-root[data-ly-density="normal"],
+    .ly-root [data-ly-density="normal"]
+  ) {
+    --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(2rem, 4vh, 4rem);
+    --ly-section-padding-block-compact: clamp(1rem, 2.5vh, 2rem);
+  }
+
+  :where(
+    .ly-root[data-ly-density="spacious"],
+    .ly-root [data-ly-density="spacious"]
+  ) {
+    --ly-gap: max(var(--ly-profile-gap), var(--ly-space-6));
+    --ly-grid-gap: var(--ly-gap);
+    --ly-stack-gap: var(--ly-space-5);
+    --ly-cluster-gap: var(--ly-space-4);
+    --ly-section-padding-block: clamp(3rem, 7vh, 6rem);
+    --ly-section-padding-block-compact: clamp(1.5rem, 3.5vh, 3rem);
+  }
+
+  @media (max-height: 44rem) {
+    :where(
+      .ly-root[data-ly-density="compact"],
+      .ly-root [data-ly-density="compact"]
+    ) {
+      --ly-gap: var(--ly-space-3);
+      --ly-grid-gap: var(--ly-space-3);
+      --ly-stack-gap: var(--ly-space-3);
+      --ly-cluster-gap: var(--ly-space-2);
+      --ly-section-padding-block: clamp(0.75rem, 2vh, 1.25rem);
+      --ly-section-padding-block-compact: var(--ly-space-2);
+    }
+
+    :where(
+      .ly-root[data-ly-density="normal"],
+      .ly-root [data-ly-density="normal"]
+    ) {
+      --ly-gap: min(var(--ly-profile-gap), var(--ly-space-4));
+      --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(1.25rem, 4vh, 2rem);
+      --ly-section-padding-block-compact: clamp(0.75rem, 2vh, 1.25rem);
+    }
+
+    :where(
+      .ly-root[data-ly-density="spacious"],
+      .ly-root [data-ly-density="spacious"]
+    ) {
+      --ly-gap: var(--ly-space-5);
+      --ly-grid-gap: var(--ly-space-5);
+      --ly-stack-gap: var(--ly-space-4);
+      --ly-cluster-gap: var(--ly-space-3);
+      --ly-section-padding-block: clamp(1.5rem, 6vh, 3rem);
+      --ly-section-padding-block-compact: clamp(0.75rem, 3vh, 1.25rem);
+    }
+
+    @supports (height: 100dvh) {
+      :where(
+        .ly-root[data-ly-density="compact"],
+        .ly-root [data-ly-density="compact"]
+      ) {
+        --ly-section-padding-block: clamp(0.75rem, 2dvh, 1.25rem);
       }
+
+      :where(
+        .ly-root[data-ly-density="normal"],
+        .ly-root [data-ly-density="normal"]
+      ) {
+        --ly-section-padding-block: clamp(1.25rem, 4dvh, 2rem);
+        --ly-section-padding-block-compact: clamp(0.75rem, 2dvh, 1.25rem);
+      }
+
+      :where(
+        .ly-root[data-ly-density="spacious"],
+        .ly-root [data-ly-density="spacious"]
+      ) {
+        --ly-section-padding-block: clamp(1.5rem, 6dvh, 3rem);
+        --ly-section-padding-block-compact: clamp(0.75rem, 3dvh, 1.25rem);
+      }
+    }
+  }
+
+  @media (max-height: 30rem) {
+    :where(
+      .ly-root[data-ly-density="compact"],
+      .ly-root [data-ly-density="compact"]
+    ) {
+      --ly-gap: var(--ly-space-2);
+      --ly-grid-gap: var(--ly-space-2);
+      --ly-stack-gap: var(--ly-space-2);
+      --ly-cluster-gap: var(--ly-space-1);
+      --ly-section-padding-block: var(--ly-space-3);
+      --ly-section-padding-block-compact: var(--ly-space-2);
+    }
+
+    :where(
+      .ly-root[data-ly-density="normal"],
+      .ly-root [data-ly-density="normal"]
+    ) {
+      --ly-gap: var(--ly-space-3);
+      --ly-grid-gap: var(--ly-space-3);
+      --ly-stack-gap: var(--ly-space-3);
+      --ly-cluster-gap: var(--ly-space-2);
+      --ly-section-padding-block: var(--ly-space-4);
+      --ly-section-padding-block-compact: var(--ly-space-2);
+    }
+
+    :where(
+      .ly-root[data-ly-density="spacious"],
+      .ly-root [data-ly-density="spacious"]
+    ) {
+      --ly-gap: var(--ly-space-4);
+      --ly-grid-gap: var(--ly-space-4);
+      --ly-stack-gap: var(--ly-space-4);
+      --ly-cluster-gap: var(--ly-space-3);
+      --ly-section-padding-block: var(--ly-space-5);
+      --ly-section-padding-block-compact: var(--ly-space-3);
     }
   }
 }

package/dist/layout-style-css.css

@@ -1,4 +1,4 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
 
 /* layout-style-css v3 bundle. Generated from focused styles/ modules. */
 
@@ -24,6 +24,7 @@
     --ly-wrapper-compact: 40rem;
     --ly-wrapper-prose: 68ch;
     --ly-wrapper-content: 72rem;
+    --ly-wrapper-workspace: 96rem;
     --ly-wrapper-wide: 112rem;
     --ly-page-padding-inline: clamp(1rem, 3vw, 3rem);
     --ly-safe-area-inline: max(
@@ -39,13 +40,14 @@
     --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-section-padding-block: clamp(2rem, 4vh, 4rem);
+    --ly-section-padding-block-compact: clamp(1rem, 2.5vh, 2rem);
     --ly-header-height: 4.5rem;
     --ly-sticky-position: sticky;
     --ly-cover-min: 100vh;
     --ly-shell-min: 100vh;
-    --ly-scroll-max: min(70vh, 50rem);
+    --ly-scroll-max: 50rem;
+    --ly-scroll-viewport-max: min(70vh, 50rem);
 
     --ly-switcher-threshold: 42rem;
     --ly-sidebar-size: 18rem;
@@ -144,7 +146,7 @@
     :where(.ly-root) {
       --ly-cover-min: 100dvh;
       --ly-shell-min: 100dvh;
-      --ly-scroll-max: min(70dvh, 50rem);
+      --ly-scroll-viewport-max: min(70dvh, 50rem);
     }
   }
 }
@@ -175,19 +177,19 @@
       --ly-grid-gap: var(--ly-gap);
       --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-section-padding-block: clamp(1.25rem, 4vh, 2rem);
+      --ly-section-padding-block-compact: clamp(0.75rem, 2vh, 1.25rem);
       --ly-header-height: 3.5rem;
-      --ly-scroll-max: min(62vh, 34rem);
+      --ly-scroll-viewport-max: min(62vh, 34rem);
     }
 
     @supports (height: 100dvh) {
       :where(.ly-root) {
         --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);
+        --ly-section-padding-block: clamp(1.25rem, 4dvh, 2rem);
+        --ly-section-padding-block-compact: clamp(0.75rem, 2dvh, 1.25rem);
+        --ly-scroll-viewport-max: min(62dvh, 34rem);
       }
     }
   }
@@ -197,17 +199,156 @@
       --ly-cover-min: auto;
       --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));
+      --ly-section-padding-block: var(--ly-space-4);
+      --ly-section-padding-block-compact: var(--ly-space-2);
+      --ly-scroll-viewport-max: max(12rem, calc(100vh - 8rem));
     }
 
     @supports (height: 100dvh) {
       :where(.ly-root) {
-        --ly-scroll-max: max(12rem, calc(100dvh - 8rem));
+        --ly-scroll-viewport-max: max(12rem, calc(100dvh - 8rem));
+      }
+    }
+  }
+}
+
+@layer ly.context {
+  :where(
+    .ly-root[data-ly-density="compact"],
+    .ly-root [data-ly-density="compact"]
+  ) {
+    --ly-gap: var(--ly-space-3);
+    --ly-grid-gap: var(--ly-space-3);
+    --ly-stack-gap: var(--ly-space-3);
+    --ly-cluster-gap: var(--ly-space-2);
+    --ly-section-padding-block: clamp(1rem, 2.5vh, 2rem);
+    --ly-section-padding-block-compact: clamp(0.5rem, 1.5vh, 1rem);
+  }
+
+  :where(
+    .ly-root[data-ly-density="normal"],
+    .ly-root [data-ly-density="normal"]
+  ) {
+    --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(2rem, 4vh, 4rem);
+    --ly-section-padding-block-compact: clamp(1rem, 2.5vh, 2rem);
+  }
+
+  :where(
+    .ly-root[data-ly-density="spacious"],
+    .ly-root [data-ly-density="spacious"]
+  ) {
+    --ly-gap: max(var(--ly-profile-gap), var(--ly-space-6));
+    --ly-grid-gap: var(--ly-gap);
+    --ly-stack-gap: var(--ly-space-5);
+    --ly-cluster-gap: var(--ly-space-4);
+    --ly-section-padding-block: clamp(3rem, 7vh, 6rem);
+    --ly-section-padding-block-compact: clamp(1.5rem, 3.5vh, 3rem);
+  }
+
+  @media (max-height: 44rem) {
+    :where(
+      .ly-root[data-ly-density="compact"],
+      .ly-root [data-ly-density="compact"]
+    ) {
+      --ly-gap: var(--ly-space-3);
+      --ly-grid-gap: var(--ly-space-3);
+      --ly-stack-gap: var(--ly-space-3);
+      --ly-cluster-gap: var(--ly-space-2);
+      --ly-section-padding-block: clamp(0.75rem, 2vh, 1.25rem);
+      --ly-section-padding-block-compact: var(--ly-space-2);
+    }
+
+    :where(
+      .ly-root[data-ly-density="normal"],
+      .ly-root [data-ly-density="normal"]
+    ) {
+      --ly-gap: min(var(--ly-profile-gap), var(--ly-space-4));
+      --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(1.25rem, 4vh, 2rem);
+      --ly-section-padding-block-compact: clamp(0.75rem, 2vh, 1.25rem);
+    }
+
+    :where(
+      .ly-root[data-ly-density="spacious"],
+      .ly-root [data-ly-density="spacious"]
+    ) {
+      --ly-gap: var(--ly-space-5);
+      --ly-grid-gap: var(--ly-space-5);
+      --ly-stack-gap: var(--ly-space-4);
+      --ly-cluster-gap: var(--ly-space-3);
+      --ly-section-padding-block: clamp(1.5rem, 6vh, 3rem);
+      --ly-section-padding-block-compact: clamp(0.75rem, 3vh, 1.25rem);
+    }
+
+    @supports (height: 100dvh) {
+      :where(
+        .ly-root[data-ly-density="compact"],
+        .ly-root [data-ly-density="compact"]
+      ) {
+        --ly-section-padding-block: clamp(0.75rem, 2dvh, 1.25rem);
+      }
+
+      :where(
+        .ly-root[data-ly-density="normal"],
+        .ly-root [data-ly-density="normal"]
+      ) {
+        --ly-section-padding-block: clamp(1.25rem, 4dvh, 2rem);
+        --ly-section-padding-block-compact: clamp(0.75rem, 2dvh, 1.25rem);
+      }
+
+      :where(
+        .ly-root[data-ly-density="spacious"],
+        .ly-root [data-ly-density="spacious"]
+      ) {
+        --ly-section-padding-block: clamp(1.5rem, 6dvh, 3rem);
+        --ly-section-padding-block-compact: clamp(0.75rem, 3dvh, 1.25rem);
       }
     }
   }
+
+  @media (max-height: 30rem) {
+    :where(
+      .ly-root[data-ly-density="compact"],
+      .ly-root [data-ly-density="compact"]
+    ) {
+      --ly-gap: var(--ly-space-2);
+      --ly-grid-gap: var(--ly-space-2);
+      --ly-stack-gap: var(--ly-space-2);
+      --ly-cluster-gap: var(--ly-space-1);
+      --ly-section-padding-block: var(--ly-space-3);
+      --ly-section-padding-block-compact: var(--ly-space-2);
+    }
+
+    :where(
+      .ly-root[data-ly-density="normal"],
+      .ly-root [data-ly-density="normal"]
+    ) {
+      --ly-gap: var(--ly-space-3);
+      --ly-grid-gap: var(--ly-space-3);
+      --ly-stack-gap: var(--ly-space-3);
+      --ly-cluster-gap: var(--ly-space-2);
+      --ly-section-padding-block: var(--ly-space-4);
+      --ly-section-padding-block-compact: var(--ly-space-2);
+    }
+
+    :where(
+      .ly-root[data-ly-density="spacious"],
+      .ly-root [data-ly-density="spacious"]
+    ) {
+      --ly-gap: var(--ly-space-4);
+      --ly-grid-gap: var(--ly-space-4);
+      --ly-stack-gap: var(--ly-space-4);
+      --ly-cluster-gap: var(--ly-space-3);
+      --ly-section-padding-block: var(--ly-space-5);
+      --ly-section-padding-block-compact: var(--ly-space-3);
+    }
+  }
 }
 
 /* wrappers.css */
@@ -242,6 +383,10 @@
     --ly-wrapper-max: var(--ly-wrapper-content);
   }
 
+  .ly-wrapper--workspace {
+    --ly-wrapper-max: var(--ly-wrapper-workspace);
+  }
+
   .ly-wrapper--wide {
     --ly-wrapper-max: var(--ly-wrapper-wide);
   }
@@ -473,11 +618,18 @@
 
   .ly-scroll {
     min-block-size: 0;
-    max-block-size: var(--ly-scroll-max);
     overflow-x: clip;
     overflow-y: auto;
     overscroll-behavior-block: contain;
   }
+
+  .ly-scroll--bounded {
+    max-block-size: var(--ly-scroll-max);
+  }
+
+  .ly-scroll--viewport {
+    max-block-size: var(--ly-scroll-viewport-max);
+  }
 }
 
 /* recipes.css */
@@ -694,40 +846,16 @@
   .ly-span-4 { grid-column: span 4; }
   .ly-span-full { grid-column: 1 / -1; }
 
-  .ly-gap-0 {
-    --ly-gap: var(--ly-space-0);
-    --ly-grid-gap: var(--ly-space-0);
-    --ly-stack-gap: var(--ly-space-0);
-    --ly-cluster-gap: var(--ly-space-0);
-  }
-
-  .ly-gap-2 {
-    --ly-gap: var(--ly-space-2);
-    --ly-grid-gap: var(--ly-space-2);
-    --ly-stack-gap: var(--ly-space-2);
-    --ly-cluster-gap: var(--ly-space-2);
-  }
-
-  .ly-gap-4 {
-    --ly-gap: var(--ly-space-4);
-    --ly-grid-gap: var(--ly-space-4);
-    --ly-stack-gap: var(--ly-space-4);
-    --ly-cluster-gap: var(--ly-space-4);
-  }
-
-  .ly-gap-6 {
-    --ly-gap: var(--ly-space-6);
-    --ly-grid-gap: var(--ly-space-6);
-    --ly-stack-gap: var(--ly-space-6);
-    --ly-cluster-gap: var(--ly-space-6);
-  }
-
-  .ly-gap-8 {
-    --ly-gap: var(--ly-space-8);
-    --ly-grid-gap: var(--ly-space-8);
-    --ly-stack-gap: var(--ly-space-8);
-    --ly-cluster-gap: var(--ly-space-8);
-  }
+  .ly-gap-0 { gap: var(--ly-space-0); }
+  .ly-gap-1 { gap: var(--ly-space-1); }
+  .ly-gap-2 { gap: var(--ly-space-2); }
+  .ly-gap-3 { gap: var(--ly-space-3); }
+  .ly-gap-4 { gap: var(--ly-space-4); }
+  .ly-gap-5 { gap: var(--ly-space-5); }
+  .ly-gap-6 { gap: var(--ly-space-6); }
+  .ly-gap-7 { gap: var(--ly-space-7); }
+  .ly-gap-8 { gap: var(--ly-space-8); }
+  .ly-gap-9 { gap: var(--ly-space-9); }
 
   .ly-pad-0 { padding: var(--ly-space-0); }
   .ly-pad-2 { padding: var(--ly-space-2); }