feat!: rebuild Layout Style CSS for v3 intrinsic responsiveness

.github/workflows/npm-publish.yml

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

.gitignore

@@ -7,3 +7,4 @@ output/
 playwright-report/
 test-results/
 npm-debug.log*
+desktop.ini

CHANGELOG.md

@@ -2,6 +2,38 @@
 
 All notable changes to `layout-style-css` are documented here. This project follows semantic versioning.
 
+## [3.0.0] - 2026-07-29
+
+### Breaking
+
+- Rebuilt the package as a clean-break intrinsic responsive system with attribute-only recipes and one shared container-query engine.
+- Removed `legacy.css`, the deprecated UI Style Kit structural bridge, v1/v2 aliases, recipe class aliases, extensionless export aliases, responsive/order utility families, and the scrollbar-unsafe `.ly-bleed` helper.
+- Reduced the npm tarball to the public generated CSS modules and personality profiles; package metadata, README, and license remain npm-standard package files.
+
+### Added
+
+- Added `foundation.css` for shared reset, tokens, named `ly-scope` containment, dynamic viewport sizing, and the `44rem`/`30rem` height tiers.
+- Made `.ly-root`, every wrapper, and every recipe root a named responsive scope so recipes work without wrappers and respond to the nearest wrapper when nested.
+- Added `data-ly-responsive="manual"` for application-owned topology with a safe stacked fallback.
+- Added device, independent width/height, automatic/manual, dimension, and active-topology controls to the demo.
+
+### Changed
+
+- Replaced breakpoint-heavy primitives with intrinsic Grid and Flexbox behavior and standardized shrink safety.
+- Moved Split Hero, List Detail, Docs, App Shell, and Dashboard topology to the shared `42rem`, `44rem`, `48rem`, `52rem`, and `72rem` query tiers.
+- Converted all sixteen personalities into breakpoint-free token/topology profiles with at least two distinguishing spatial characteristics.
+- Made dynamic viewport and container-relative tokens feature-detected enhancements over valid `vh` and `vw` fallbacks.
+- Made manual Gallery and Card Grid recipes single-column, isolated nested personality split ratios, and aligned gap utilities across Grid, Stack, and Cluster.
+- Restricted deliberate horizontal scrolling to Reel and deliberate bounded vertical scrolling to Scroll.
+- Corrected case-sensitive GitHub Pages metadata and versioned local demo assets to prevent stale v2/v3 asset combinations.
+
+### Tests
+
+- Added package/export/tarball, canonical-selector, removed-surface, generated-parity, ownership, and personality-engine contracts.
+- Added exact flattened/minified parity, actual tarball contents, complete v2 selector migration, nested-profile isolation, and fallback-enhancement contracts.
+- Added threshold-edge, six-device, short-height, root-direct, nearest-wrapper, manual-query, DOM/focus-order, overflow, wrapper, recipe, and all-personality rendered matrices.
+- Made Chromium, Firefox, and WebKit the complete release gate and retained the connected-browser interaction spot check.
+
 ## [2.1.1] - 2026-07-27
 
 ### Fixed

CONTRIBUTING.md

@@ -24,9 +24,11 @@ npm run release:verify
 - Regenerate `dist/` with `npm run build`; do not hand-edit generated dist files.
 - Keep public layout classes prefixed with `ly-`.
 - Leave colors, typography, borders, shadows, native controls, focus states, themes, and modes to `ui-style-kit-css`.
-- Add structural aliases in `styles/integrations/ui-style-kit.css` only when they map to layout primitives or layout recipes.
-- Preserve semantic mobile DOM, reading, and focus order; built-in recipes must use named areas instead of `order`.
-- Test container behavior below and above `48rem` and `64rem`.
+- Keep v3 on canonical hooks; do not add legacy, recipe-class, or companion structural aliases.
+- Preserve semantic mobile DOM, reading, and focus order; built-in recipes must use named areas instead of visual order.
+- Test container behavior below and above `42rem`, `44rem`, `48rem`, `52rem`, and `72rem`.
+- Test height behavior below and above `30rem` and `44rem`.
+- Keep personality files limited to tokens and topology templates; they must not declare breakpoints.
 - Update README, `docs/wiki`, and `CHANGELOG.md` when a public class, export, recipe, release workflow, or package behavior changes.
 
 ## Testing Expectations

demo/demo.css

@@ -61,7 +61,9 @@ html {
 }
 
 body {
+  min-block-size: 100vh;
   min-block-size: 100svh;
+  min-block-size: 100dvh;
   margin: 0;
   overflow-x: clip;
   background: var(--demo-bg);
@@ -194,11 +196,17 @@ h3 {
 
 .demo-status,
 .demo-copy-status,
-#containerReadout {
+.demo-readouts {
   color: var(--demo-muted);
   font-size: 0.875rem;
 }
 
+.demo-readouts {
+  display: grid;
+  justify-items: end;
+  gap: 0.125rem;
+}
+
 .demo-status {
   padding: 0.4rem 0.7rem;
   border: 1px solid var(--demo-line);
@@ -305,45 +313,73 @@ body[data-ecosystem="all-three"] .demo-status {
 
 .demo-preview-frame {
   --demo-container-inline-size: 100%;
+  --demo-container-block-size: auto;
 
   container-name: demo-preview;
   container-type: inline-size;
   inline-size: min(100%, var(--demo-container-inline-size));
+  block-size: var(--demo-container-block-size);
+  max-block-size: none;
   min-inline-size: 0;
+  min-block-size: 0;
   margin-inline: auto;
-  overflow: clip;
+  overflow: auto;
   border: 1px dashed var(--demo-line);
   border-radius: calc(var(--demo-radius) * 0.85);
   background: var(--demo-bg);
 }
 
 /* The nested root lets personalities respond to preview width, not viewport width. */
 .demo-preview-root {
+  --ly-cover-min: 100%;
+  --ly-shell-min: 100%;
+
+  block-size: 100%;
   min-block-size: 0;
   min-inline-size: 0;
   padding-block: 0.75rem;
 }
 
 .demo-preview-root > .ly-wrapper {
-  /* The width control represents the queried content box exactly at 48rem/64rem. */
-  --ly-wrapper-gutter: 0px;
-
+  /*
+    Preview allocations represent the nearest queried content box exactly;
+    safe-area behavior remains exercised by the outer document root.
+  */
+  --ly-wrapper-fluid-gutter: 0px;
+  --ly-wrapper-local-gutter: 0px;
+
+  block-size: 100%;
   min-inline-size: 0;
 }
 
 .demo-recipe {
-  min-block-size: 30rem;
+  min-block-size: 100%;
   min-inline-size: 0;
   gap: var(--demo-density-gap);
 }
 
-.demo-recipe:is(.ly-gallery, [data-ly-recipe="gallery"]),
-.demo-recipe:is(.ly-card-grid, [data-ly-recipe="card-grid"]) {
+.demo-recipe:is([data-ly-recipe="gallery"], [data-ly-recipe="card-grid"]) {
   min-block-size: auto;
 }
 
-.demo-recipe:is(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-  min-block-size: 32rem;
+.demo-preview-root[data-demo-height-tier="short"] {
+  --ly-gap: min(var(--demo-density-gap), 1rem);
+  --ly-grid-gap: var(--ly-gap);
+  --ly-section-padding-block: clamp(1.5rem, 6%, 3rem);
+  --ly-header-height: 3.5rem;
+  --ly-scroll-max: min(62%, 34rem);
+}
+
+.demo-preview-root[data-demo-height-tier="shallow"] {
+  --ly-cover-min: auto;
+  --ly-shell-min: auto;
+  --ly-sticky-position: static;
+  --ly-section-padding-block: 1.5rem;
+  --ly-scroll-max: max(12rem, calc(100% - 8rem));
+}
+
+.demo-preview-root[data-demo-height-tier="shallow"] .demo-recipe {
+  min-block-size: auto;
 }
 
 .demo-region {
@@ -460,7 +496,9 @@ body[data-ecosystem="all-three"] .demo-status {
     position: sticky;
     inset-block-start: 6rem;
     display: block;
+    max-block-size: calc(100vh - 7rem);
     max-block-size: calc(100svh - 7rem);
+    max-block-size: calc(100dvh - 7rem);
     overflow: auto;
   }
 }
@@ -480,7 +518,9 @@ body[data-ecosystem="all-three"] .demo-status {
     inset-inline-end: 0;
     z-index: 40;
     inline-size: min(24rem, calc(100% - 1rem));
+    max-block-size: 100vh;
     max-block-size: 100svh;
+    max-block-size: 100dvh;
     padding:
       max(1rem, env(safe-area-inset-top, 0px))
       max(1rem, env(safe-area-inset-right, 0px))
@@ -516,6 +556,33 @@ body[data-ecosystem="all-three"] .demo-status {
   }
 }
 
+@media (max-height: 44rem) {
+  .demo-page {
+    padding-block: 0.75rem 2rem;
+  }
+
+  .demo-main {
+    gap: 1rem;
+  }
+
+  .demo-intro,
+  .demo-lab {
+    padding-block: 1rem;
+  }
+}
+
+@media (max-height: 30rem) {
+  .demo-topbar,
+  .demo-controls {
+    position: static;
+    max-block-size: none;
+  }
+
+  .demo-preview-frame {
+    max-block-size: none;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto;