layout-style-css 3.0.2 → 3.2.0

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 All notable changes to `layout-style-css` are documented here. This project follows semantic versioning.
 
+## [3.2.0] - 2026-09-08
+
+### Added
+
+- Added Mosaic and Action Bar compositions for responsive dashboards, task bars, and workflow surfaces that need stable DOM order and wrapping actions.
+- Added four specialized layout personalities: Technical Blueprint, Data Terminal, Industrial HMI, and Editorial.
+- Added the Layout Personality Reference and the 3.2 migration guide covering Mosaic, Action Bar, area-aware App Shell behavior, Scroll, and content resilience.
+
+### Changed
+
+- Made App Shell area-aware so absent direct-child side regions do not reserve empty tracks while complete shells preserve their approved topology.
+- Hardened layout content tracks and Scroll behavior so long labels, technical content, tables, and all-three-library fixtures remain usable with UI Style Kit 2.4.0.
+- Expanded personality pairing metadata with recommended and compatible visual presets for the complete 20-layout inventory.
+
+### Security
+
+- Updated the audited `fast-uri` override to the fixed 3.1.7 line while keeping runtime and peer dependencies empty.
+
+### Tests
+
+- Added focused and rendered coverage for Mosaic, Action Bar, area-aware shells, pairing metadata, generated artifacts, release documentation, Pages output, and the final UI Style Kit 2.4.0 ecosystem fixture.
+
+## [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.2.0` is the current v3 release candidate. It provides intrinsic wrappers, Mosaic and Action Bar compositions, seven semantic recipes, explicit local density controls, and twenty 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.2.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 |
@@ -75,11 +87,13 @@ All lanes clamp to the available inline size, including allocations from 320px t
 The core includes:
 
 - `.ly-stack`, `.ly-cluster`, `.ly-center`, and `.ly-cover`
-- `.ly-switcher`, `.ly-sidebar`, `.ly-grid`, and `.ly-split`
+- `.ly-switcher`, `.ly-sidebar`, `.ly-grid`, `.ly-mosaic`, and `.ly-split`
 - `.ly-panes` and `.ly-media`
-- `.ly-reel`, `.ly-frame`, and `.ly-scroll`
+- `.ly-action-bar`, `.ly-reel`, `.ly-frame`, and `.ly-scroll`
+
+Grid and flex primitives wrap intrinsically whenever track wrapping can replace a query. Mosaic uses one, six, and twelve tracks at its base, `42rem`, and `72rem` tiers while keeping DOM order authoritative. Base `.ly-scroll` owns horizontal and vertical 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.
 
-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.
+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,7 +109,9 @@ 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.
+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. The automatic shell is area-aware: absent direct-child side regions do not reserve empty tracks, while full shells preserve personality-approved geometry. `--ly-recipe-main-min: 20rem` guards automatic primary tracks.
 
 Canonical regions use `data-ly-area`, including `header`, `sidebar`, `nav`, `main`, `aside`, `footer`, `content`, `media`, `actions`, `primary`, and `secondary`.
 
@@ -139,12 +155,14 @@ Use the public height, gap, measure, ratio, rail, media, card, and grid-minimum
 
 ## Personalities
 
-Set one of sixteen canonical `data-ly-layout` values on `.ly-root`:
+Set one of twenty canonical `data-ly-layout` values on `.ly-root`:
 
-`minimal-saas`, `bauhaus`, `tactile`, `cyberpunk`, `f-pattern`, `brutalism`, `neumorphism`, `y2k`, `retro-glass`, `z-pattern`, `retrofuturism`, `mondrian`, `synthwave`, `bento`, `maximalist`, or `split-screen`.
+`minimal-saas`, `bento`, `maximalist`, `bauhaus`, `tactile`, `neumorphism`, `retrofuturism`, `brutalism`, `cyberpunk`, `y2k`, `retro-glass`, `f-pattern`, `z-pattern`, `split-screen`, `mondrian`, `synthwave`, `technical-blueprint`, `data-terminal`, `industrial-hmi`, or `editorial`.
 
 Each personality is a token/topology profile consumed by the shared recipe engine. A profile changes at least two spatial characteristics—such as measure, gap, rail, media size, card minimum, or ratio—but does not declare its own container or viewport breakpoint system.
 
+See the [Layout Personality Reference](docs/wiki/Layout-Personality-Reference.md) for canonical geometry, responsive intent, Mosaic usage, and recommended/compatible UI presets.
+
 ## Public Exports
 
 | Import | Contents |
@@ -157,12 +175,12 @@ Each personality is a token/topology profile consumed by the shared recipe engin
 | `layout-style-css/primitives.css` | Intrinsic composition primitives |
 | `layout-style-css/recipes.css` | Seven attribute-only recipes |
 | `layout-style-css/utilities.css` | Small structural utility set |
-| `layout-style-css/personalities.css` | All sixteen profiles |
+| `layout-style-css/personalities.css` | All twenty profiles |
 | `layout-style-css/personalities/minimal-saas.css` | One profile; substitute any public personality name |
 | `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 +195,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.2.0/dist/layout-style-css.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.2.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, [Migrating To 3.1](docs/wiki/Migrating-To-3.1.md) for density and local-gap changes, and [Migrating To 3.2](docs/wiki/Migrating-To-3.2.md) for Mosaic, Action Bar, area-aware shells, and content resilience.
 
 ## Demo And Verification
 
@@ -213,7 +231,10 @@ npm run release:verify
 - [Layout Primitives](docs/wiki/Layout-Primitives.md)
 - [Layout Recipes](docs/wiki/Layout-Recipes.md)
 - [Layout Styles](docs/wiki/Layout-Styles.md)
+- [Layout Personality Reference](docs/wiki/Layout-Personality-Reference.md)
 - [Migrating To 3.0](docs/wiki/Migrating-To-3.0.md)
+- [Migrating To 3.1](docs/wiki/Migrating-To-3.1.md)
+- [Migrating To 3.2](docs/wiki/Migrating-To-3.2.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,19 +37,22 @@
     --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;
     --ly-sidebar-content-min: 50%;
     --ly-grid-columns: 12;
     --ly-grid-min: 16rem;
+    --ly-mosaic-medium-columns: 6;
+    --ly-mosaic-wide-columns: 12;
     --ly-split-min: 20rem;
     --ly-pane-min: 18rem;
     --ly-pane-size: 22rem;
@@ -60,6 +64,7 @@
     --ly-split-primary: 1fr;
     --ly-split-secondary: 1fr;
 
+    --ly-recipe-main-min: 20rem;
     --ly-recipe-rail: 18rem;
     --ly-recipe-aside: 22rem;
     --ly-gallery-min: 12rem;
@@ -74,7 +79,7 @@
     --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);
+      minmax(min(100%, var(--ly-recipe-main-min)), 1fr);
     --ly-app-shell-wide-areas:
       "sidebar header header"
       "sidebar main aside"
@@ -82,7 +87,7 @@
     --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)
+      minmax(min(100%, var(--ly-recipe-main-min)), 1fr)
       minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
 
     --ly-dashboard-medium-areas:
@@ -91,7 +96,7 @@
       "main aside"
       "footer footer";
     --ly-dashboard-medium-columns:
-      minmax(0, 1fr)
+      minmax(min(100%, var(--ly-recipe-main-min)), 1fr)
       minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
     --ly-dashboard-wide-areas:
       "nav header header"
@@ -99,7 +104,7 @@
       "nav footer footer";
     --ly-dashboard-wide-columns:
       minmax(min(100%, var(--ly-recipe-rail)), auto)
-      minmax(0, 1fr)
+      minmax(min(100%, var(--ly-recipe-main-min)), 1fr)
       minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
 
     --ly-docs-wide-areas:
@@ -109,19 +114,19 @@
       "footer footer";
     --ly-docs-wide-columns:
       minmax(min(100%, var(--ly-recipe-rail)), auto)
-      minmax(0, 1fr);
+      minmax(min(100%, var(--ly-recipe-main-min)), 1fr);
     --ly-list-detail-wide-areas:
       "primary secondary"
       "actions actions";
     --ly-list-detail-wide-columns:
-      minmax(min(100%, var(--ly-pane-size)), 0.7fr)
-      minmax(0, 1fr);
+      minmax(min(100%, max(var(--ly-pane-min), var(--ly-pane-size))), 0.7fr)
+      minmax(min(100%, var(--ly-pane-min)), 1fr);
     --ly-split-hero-wide-areas:
       "content media"
       "actions media";
     --ly-split-hero-wide-columns:
-      minmax(0, var(--ly-split-primary, 1fr))
-      minmax(0, var(--ly-split-secondary, 1fr));
+      minmax(min(100%, var(--ly-split-min)), var(--ly-split-primary, 1fr))
+      minmax(min(100%, var(--ly-split-min)), var(--ly-split-secondary, 1fr));
 
     container-name: ly-scope;
     container-type: inline-size;
@@ -141,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);
     }
   }
 }
@@ -172,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);
       }
     }
   }
@@ -194,15 +199,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);
     }
   }
 }