Skip to content

Commit 123b759

Browse files
author
Foscat
committed
fix: harden v3 responsive and release contracts
1 parent 700fedc commit 123b759

22 files changed

Lines changed: 825 additions & 80 deletions

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,15 @@ All notable changes to `layout-style-css` are documented here. This project foll
2222
- Replaced breakpoint-heavy primitives with intrinsic Grid and Flexbox behavior and standardized shrink safety.
2323
- Moved Split Hero, List Detail, Docs, App Shell, and Dashboard topology to the shared `42rem`, `44rem`, `48rem`, `52rem`, and `72rem` query tiers.
2424
- Converted all sixteen personalities into breakpoint-free token/topology profiles with at least two distinguishing spatial characteristics.
25+
- Made dynamic viewport and container-relative tokens feature-detected enhancements over valid `vh` and `vw` fallbacks.
26+
- Made manual Gallery and Card Grid recipes single-column, isolated nested personality split ratios, and aligned gap utilities across Grid, Stack, and Cluster.
2527
- Restricted deliberate horizontal scrolling to Reel and deliberate bounded vertical scrolling to Scroll.
28+
- Corrected case-sensitive GitHub Pages metadata and versioned local demo assets to prevent stale v2/v3 asset combinations.
2629

2730
### Tests
2831

2932
- Added package/export/tarball, canonical-selector, removed-surface, generated-parity, ownership, and personality-engine contracts.
33+
- Added exact flattened/minified parity, actual tarball contents, complete v2 selector migration, nested-profile isolation, and fallback-enhancement contracts.
3034
- Added threshold-edge, six-device, short-height, root-direct, nearest-wrapper, manual-query, DOM/focus-order, overflow, wrapper, recipe, and all-personality rendered matrices.
3135
- Made Chromium, Firefox, and WebKit the complete release gate and retained the connected-browser interaction spot check.
3236

‎demo/demo.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -127,8 +127,6 @@ const ALLOWLISTS = Object.freeze({
127127
"49rem",
128128
"51rem",
129129
"53rem",
130-
"63rem",
131-
"65rem",
132130
"71rem",
133131
"73rem",
134132
"80rem"
@@ -169,8 +167,6 @@ const CONTAINER_WIDTHS = Object.freeze({
169167
"49rem": "49rem",
170168
"51rem": "51rem",
171169
"53rem": "53rem",
172-
"63rem": "63rem",
173-
"65rem": "65rem",
174170
"71rem": "71rem",
175171
"73rem": "73rem",
176172
"80rem": "80rem"

‎demo/index.html‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -39,24 +39,24 @@
3939
<meta property="og:locale" content="en_US">
4040
<meta property="og:title" content="Layout Style CSS v3 Intrinsic Responsive Demo">
4141
<meta property="og:description" content="Test semantic wrappers, width and height responsive recipes, and sixteen spatial personalities without coupling layout to paint.">
42-
<meta property="og:image" content="https://foscat.github.io/layout-style-css/assets/social-card.png">
43-
<meta property="og:image:secure_url" content="https://foscat.github.io/layout-style-css/assets/social-card.png">
42+
<meta property="og:image" content="https://foscat.github.io/Layout-Style-CSS/assets/social-card.png">
43+
<meta property="og:image:secure_url" content="https://foscat.github.io/Layout-Style-CSS/assets/social-card.png">
4444
<meta property="og:image:alt" content="layout-style-css interactive layout lab social card">
4545
<meta property="og:image:type" content="image/png">
4646
<meta property="og:image:width" content="1200">
4747
<meta property="og:image:height" content="630">
48-
<meta property="og:url" content="https://foscat.github.io/layout-style-css/">
48+
<meta property="og:url" content="https://foscat.github.io/Layout-Style-CSS/">
4949
<meta property="og:site_name" content="layout-style-css">
5050
<meta property="og:updated_time" content="2026-07-29T00:00:00-05:00">
5151
<meta name="twitter:card" content="summary_large_image">
5252
<meta name="twitter:title" content="Layout Style CSS v3 Intrinsic Responsive Demo">
5353
<meta name="twitter:description" content="Intrinsic responsive layouts that adapt to available width and height and pair cleanly with paint and interaction libraries.">
54-
<meta name="twitter:image" content="https://foscat.github.io/layout-style-css/assets/social-card.png">
54+
<meta name="twitter:image" content="https://foscat.github.io/Layout-Style-CSS/assets/social-card.png">
5555
<meta name="twitter:image:alt" content="layout-style-css interactive layout lab social card">
5656
<meta itemprop="name" content="Layout Style CSS v3 Intrinsic Responsive Demo">
5757
<meta itemprop="description" content="A live workbench for semantic wrappers, automatic and manual recipes, vertical responsiveness, and spatial personalities.">
58-
<meta itemprop="image" content="https://foscat.github.io/layout-style-css/assets/social-card.png">
59-
<link rel="canonical" href="https://foscat.github.io/layout-style-css/">
58+
<meta itemprop="image" content="https://foscat.github.io/Layout-Style-CSS/assets/social-card.png">
59+
<link rel="canonical" href="https://foscat.github.io/Layout-Style-CSS/">
6060
<link rel="dns-prefetch" href="https://unpkg.com">
6161
<link rel="preconnect" href="https://unpkg.com" crossorigin>
6262
<link rel="image_src" href="./assets/social-card.png">
@@ -71,8 +71,8 @@
7171
<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">
7272
<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">
7373
<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">
74-
<link id="layoutCoreStylesheet" rel="stylesheet" href="../dist/layout-style-css.css">
75-
<link rel="stylesheet" href="./demo.css">
74+
<link id="layoutCoreStylesheet" rel="stylesheet" href="../dist/layout-style-css.css?v=3.0.0">
75+
<link rel="stylesheet" href="./demo.css?v=3.0.0">
7676

7777
<script type="application/ld+json">
7878
{
@@ -83,15 +83,15 @@
8383
"description": "A dependency-free CSS layout library for intrinsic wrappers, composition primitives, width and height responsive recipes, and spatial personalities.",
8484
"programmingLanguage": "CSS",
8585
"applicationCategory": "DeveloperApplication",
86-
"url": "https://foscat.github.io/layout-style-css/",
87-
"image": "https://foscat.github.io/layout-style-css/assets/social-card.png",
86+
"url": "https://foscat.github.io/Layout-Style-CSS/",
87+
"image": "https://foscat.github.io/Layout-Style-CSS/assets/social-card.png",
8888
"datePublished": "2026-07-29",
8989
"dateModified": "2026-07-29",
9090
"author": { "@type": "Organization", "name": "Foscat" },
9191
"publisher": { "@type": "Organization", "name": "Foscat" }
9292
}
9393
</script>
94-
<script type="module" src="./demo.js"></script>
94+
<script type="module" src="./demo.js?v=3.0.0"></script>
9595
</head>
9696
<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">
9797
<a class="demo-skip-link" href="#layoutLab">Skip to the layout lab</a>
@@ -186,16 +186,14 @@ <h2 id="controlsTitle">Layout controls</h2>
186186
<option value="auto">Auto</option>
187187
<option value="20rem">20rem - minimum supported</option>
188188
<option value="32rem">32rem - narrow</option>
189+
<option value="40rem">40rem · compact</option>
189190
<option value="41rem">41rem - below split hero</option>
190191
<option value="43rem">43rem - above split hero</option>
191192
<option value="45rem">45rem - above list detail</option>
192-
<option value="40rem">40rem · compact</option>
193193
<option value="47rem">47rem · below medium</option>
194194
<option value="49rem">49rem · above medium</option>
195195
<option value="51rem">51rem - below shell medium</option>
196196
<option value="53rem">53rem - above shell medium</option>
197-
<option value="63rem">63rem · below large</option>
198-
<option value="65rem">65rem · above large</option>
199197
<option value="71rem">71rem - below shell wide</option>
200198
<option value="73rem">73rem - above shell wide</option>
201199
<option value="80rem">80rem · expansive</option>

‎demo/robots.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
User-agent: *
22
Allow: /
33

4-
Sitemap: https://foscat.github.io/layout-style-css/sitemap.xml
4+
Sitemap: https://foscat.github.io/Layout-Style-CSS/sitemap.xml

‎demo/sitemap.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
33
<url>
4-
<loc>https://foscat.github.io/layout-style-css/</loc>
4+
<loc>https://foscat.github.io/Layout-Style-CSS/</loc>
55
<lastmod>2026-07-29</lastmod>
66
<changefreq>weekly</changefreq>
77
<priority>0.8</priority>

‎desktop.ini‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
[.ShellClassInfo]
2+
IconResource=C:\Users\Foscat Laptop\Desktop\Layout-Style-CSS\demo\assets\favicon.ico,0
3+
[ViewState]
4+
Mode=
5+
Vid=
6+
FolderType=Generic

‎dist/foundation.css‎

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@
3939
--ly-section-padding-block: clamp(3rem, 7vh, 6rem);
4040
--ly-header-height: 4.5rem;
4141
--ly-sticky-position: sticky;
42-
--ly-cover-min: 100dvh;
43-
--ly-shell-min: 100dvh;
44-
--ly-scroll-max: min(70dvh, 50rem);
42+
--ly-cover-min: 100vh;
43+
--ly-shell-min: 100vh;
44+
--ly-scroll-max: min(70vh, 50rem);
4545

4646
--ly-switcher-threshold: 42rem;
4747
--ly-sidebar-size: 18rem;
@@ -56,6 +56,8 @@
5656
--ly-reel-item-min: 16rem;
5757
--ly-reel-item-max: 28rem;
5858
--ly-frame-ratio: 16 / 9;
59+
--ly-split-primary: 1fr;
60+
--ly-split-secondary: 1fr;
5961

6062
--ly-recipe-rail: 18rem;
6163
--ly-recipe-aside: 22rem;
@@ -122,6 +124,15 @@
122124
min-inline-size: 0;
123125
min-block-size: 0;
124126
}
127+
128+
/* Enhance viewport-bound tokens only when dynamic viewport units parse. */
129+
@supports (height: 100dvh) {
130+
:where(.ly-root) {
131+
--ly-cover-min: 100dvh;
132+
--ly-shell-min: 100dvh;
133+
--ly-scroll-max: min(70dvh, 50rem);
134+
}
135+
}
125136
}
126137

127138
@layer ly.reset {
@@ -148,11 +159,20 @@
148159
:where(.ly-root) {
149160
--ly-gap: min(var(--ly-profile-gap), var(--ly-space-4));
150161
--ly-grid-gap: var(--ly-gap);
151-
--ly-stack-gap: min(var(--ly-space-4), 3dvh);
152-
--ly-cluster-gap: min(var(--ly-space-3), 2dvh);
153-
--ly-section-padding-block: clamp(1.5rem, 6dvh, 3rem);
162+
--ly-stack-gap: min(var(--ly-space-4), 3vh);
163+
--ly-cluster-gap: min(var(--ly-space-3), 2vh);
164+
--ly-section-padding-block: clamp(1.5rem, 6vh, 3rem);
154165
--ly-header-height: 3.5rem;
155-
--ly-scroll-max: min(62dvh, 34rem);
166+
--ly-scroll-max: min(62vh, 34rem);
167+
}
168+
169+
@supports (height: 100dvh) {
170+
:where(.ly-root) {
171+
--ly-stack-gap: min(var(--ly-space-4), 3dvh);
172+
--ly-cluster-gap: min(var(--ly-space-3), 2dvh);
173+
--ly-section-padding-block: clamp(1.5rem, 6dvh, 3rem);
174+
--ly-scroll-max: min(62dvh, 34rem);
175+
}
156176
}
157177
}
158178

@@ -162,7 +182,13 @@
162182
--ly-shell-min: auto;
163183
--ly-sticky-position: static;
164184
--ly-section-padding-block: var(--ly-space-5);
165-
--ly-scroll-max: max(12rem, calc(100dvh - 8rem));
185+
--ly-scroll-max: max(12rem, calc(100vh - 8rem));
186+
}
187+
188+
@supports (height: 100dvh) {
189+
:where(.ly-root) {
190+
--ly-scroll-max: max(12rem, calc(100dvh - 8rem));
191+
}
166192
}
167193
}
168194
}

‎dist/layout-style-css.css‎

Lines changed: 82 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@
4242
--ly-section-padding-block: clamp(3rem, 7vh, 6rem);
4343
--ly-header-height: 4.5rem;
4444
--ly-sticky-position: sticky;
45-
--ly-cover-min: 100dvh;
46-
--ly-shell-min: 100dvh;
47-
--ly-scroll-max: min(70dvh, 50rem);
45+
--ly-cover-min: 100vh;
46+
--ly-shell-min: 100vh;
47+
--ly-scroll-max: min(70vh, 50rem);
4848

4949
--ly-switcher-threshold: 42rem;
5050
--ly-sidebar-size: 18rem;
@@ -59,6 +59,8 @@
5959
--ly-reel-item-min: 16rem;
6060
--ly-reel-item-max: 28rem;
6161
--ly-frame-ratio: 16 / 9;
62+
--ly-split-primary: 1fr;
63+
--ly-split-secondary: 1fr;
6264

6365
--ly-recipe-rail: 18rem;
6466
--ly-recipe-aside: 22rem;
@@ -125,6 +127,15 @@
125127
min-inline-size: 0;
126128
min-block-size: 0;
127129
}
130+
131+
/* Enhance viewport-bound tokens only when dynamic viewport units parse. */
132+
@supports (height: 100dvh) {
133+
:where(.ly-root) {
134+
--ly-cover-min: 100dvh;
135+
--ly-shell-min: 100dvh;
136+
--ly-scroll-max: min(70dvh, 50rem);
137+
}
138+
}
128139
}
129140

130141
@layer ly.reset {
@@ -151,11 +162,20 @@
151162
:where(.ly-root) {
152163
--ly-gap: min(var(--ly-profile-gap), var(--ly-space-4));
153164
--ly-grid-gap: var(--ly-gap);
154-
--ly-stack-gap: min(var(--ly-space-4), 3dvh);
155-
--ly-cluster-gap: min(var(--ly-space-3), 2dvh);
156-
--ly-section-padding-block: clamp(1.5rem, 6dvh, 3rem);
165+
--ly-stack-gap: min(var(--ly-space-4), 3vh);
166+
--ly-cluster-gap: min(var(--ly-space-3), 2vh);
167+
--ly-section-padding-block: clamp(1.5rem, 6vh, 3rem);
157168
--ly-header-height: 3.5rem;
158-
--ly-scroll-max: min(62dvh, 34rem);
169+
--ly-scroll-max: min(62vh, 34rem);
170+
}
171+
172+
@supports (height: 100dvh) {
173+
:where(.ly-root) {
174+
--ly-stack-gap: min(var(--ly-space-4), 3dvh);
175+
--ly-cluster-gap: min(var(--ly-space-3), 2dvh);
176+
--ly-section-padding-block: clamp(1.5rem, 6dvh, 3rem);
177+
--ly-scroll-max: min(62dvh, 34rem);
178+
}
159179
}
160180
}
161181

@@ -165,7 +185,13 @@
165185
--ly-shell-min: auto;
166186
--ly-sticky-position: static;
167187
--ly-section-padding-block: var(--ly-space-5);
168-
--ly-scroll-max: max(12rem, calc(100dvh - 8rem));
188+
--ly-scroll-max: max(12rem, calc(100vh - 8rem));
189+
}
190+
191+
@supports (height: 100dvh) {
192+
:where(.ly-root) {
193+
--ly-scroll-max: max(12rem, calc(100dvh - 8rem));
194+
}
169195
}
170196
}
171197
}
@@ -177,7 +203,6 @@
177203
.ly-wrapper {
178204
--ly-wrapper-max: var(--ly-personality-wrapper-max, var(--ly-wrapper-content));
179205
--ly-wrapper-fluid-gutter: clamp(1rem, 3vw, 3rem);
180-
--ly-wrapper-fluid-gutter: clamp(1rem, 3cqi, 3rem);
181206
--ly-wrapper-local-gutter: max(
182207
var(--ly-wrapper-fluid-gutter),
183208
var(--ly-safe-area-inline)
@@ -191,6 +216,13 @@
191216
padding-inline: var(--ly-wrapper-local-gutter);
192217
}
193218

219+
/* Container-relative gutters enhance the universally valid viewport fallback. */
220+
@supports (width: 1cqi) {
221+
.ly-wrapper {
222+
--ly-wrapper-fluid-gutter: clamp(1rem, 3cqi, 3rem);
223+
}
224+
}
225+
194226
.ly-wrapper--compact {
195227
--ly-wrapper-max: var(--ly-wrapper-compact);
196228
}
@@ -525,6 +557,13 @@
525557
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-card-grid-min)), 1fr));
526558
}
527559

560+
:where(
561+
[data-ly-recipe="gallery"],
562+
[data-ly-recipe="card-grid"]
563+
)[data-ly-responsive="manual"] {
564+
grid-template-columns: minmax(0, 1fr);
565+
}
566+
528567
:where(
529568
[data-ly-recipe="app-shell"],
530569
[data-ly-recipe="dashboard"],
@@ -645,11 +684,40 @@
645684
.ly-span-4 { grid-column: span 4; }
646685
.ly-span-full { grid-column: 1 / -1; }
647686

648-
.ly-gap-0 { --ly-gap: var(--ly-space-0); --ly-grid-gap: var(--ly-space-0); }
649-
.ly-gap-2 { --ly-gap: var(--ly-space-2); --ly-grid-gap: var(--ly-space-2); }
650-
.ly-gap-4 { --ly-gap: var(--ly-space-4); --ly-grid-gap: var(--ly-space-4); }
651-
.ly-gap-6 { --ly-gap: var(--ly-space-6); --ly-grid-gap: var(--ly-space-6); }
652-
.ly-gap-8 { --ly-gap: var(--ly-space-8); --ly-grid-gap: var(--ly-space-8); }
687+
.ly-gap-0 {
688+
--ly-gap: var(--ly-space-0);
689+
--ly-grid-gap: var(--ly-space-0);
690+
--ly-stack-gap: var(--ly-space-0);
691+
--ly-cluster-gap: var(--ly-space-0);
692+
}
693+
694+
.ly-gap-2 {
695+
--ly-gap: var(--ly-space-2);
696+
--ly-grid-gap: var(--ly-space-2);
697+
--ly-stack-gap: var(--ly-space-2);
698+
--ly-cluster-gap: var(--ly-space-2);
699+
}
700+
701+
.ly-gap-4 {
702+
--ly-gap: var(--ly-space-4);
703+
--ly-grid-gap: var(--ly-space-4);
704+
--ly-stack-gap: var(--ly-space-4);
705+
--ly-cluster-gap: var(--ly-space-4);
706+
}
707+
708+
.ly-gap-6 {
709+
--ly-gap: var(--ly-space-6);
710+
--ly-grid-gap: var(--ly-space-6);
711+
--ly-stack-gap: var(--ly-space-6);
712+
--ly-cluster-gap: var(--ly-space-6);
713+
}
714+
715+
.ly-gap-8 {
716+
--ly-gap: var(--ly-space-8);
717+
--ly-grid-gap: var(--ly-space-8);
718+
--ly-stack-gap: var(--ly-space-8);
719+
--ly-cluster-gap: var(--ly-space-8);
720+
}
653721

654722
.ly-pad-0 { padding: var(--ly-space-0); }
655723
.ly-pad-2 { padding: var(--ly-space-2); }

‎dist/layout-style-css.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/recipes.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,13 @@
8484
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-card-grid-min)), 1fr));
8585
}
8686

87+
:where(
88+
[data-ly-recipe="gallery"],
89+
[data-ly-recipe="card-grid"]
90+
)[data-ly-responsive="manual"] {
91+
grid-template-columns: minmax(0, 1fr);
92+
}
93+
8794
:where(
8895
[data-ly-recipe="app-shell"],
8996
[data-ly-recipe="dashboard"],

0 commit comments

Comments
 (0)