diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index 8bc0b3a..80db996 100644 --- a/.github/workflows/npm-publish.yml +++ b/.github/workflows/npm-publish.yml @@ -6,7 +6,7 @@ on: workflow_dispatch: inputs: release_tag: - description: "Release tag to publish, for example v2.1.0" + description: "Release tag to publish, for example v2.1.1" required: true type: string diff --git a/CHANGELOG.md b/CHANGELOG.md index e813964..f5d8e98 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,23 @@ All notable changes to `layout-style-css` are documented here. This project follows semantic versioning. +## [2.1.1] - 2026-07-27 + +### Fixed + +- Made personality enhancements query the nearest inline-size container while preserving the named personality containment scope for compatibility. +- Deferred three- and four-track application-shell signatures until their local container reaches `64rem`; existing safe two-track signatures retain their authored thresholds. +- Gave the Docs recipe a distinct wide two-column shell with navigation spanning the left column and `header`, `main`, `aside`, and `footer` stacked in the right column. + +### Tests + +- Added root-wide, local-container fixtures at `47rem`, `49rem`, `63rem`, and `65rem` across all sixteen personalities, including internal overflow, zero-width region, DOM order, and keyboard order checks. +- Added static contracts for nearest-container personality queries and distinct Dashboard and Docs wide geometry. + +### Security + +- Refreshed the development lockfile to patched `fast-uri` and `postcss` releases so the release audit reports no known vulnerabilities; the published CSS package remains dependency-free. + ## [2.1.0] - 2026-07-20 ### Changed diff --git a/README.md b/README.md index dff029b..3dd5f23 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Container-first, dependency-free structural CSS for responsive application layouts. -`layout-style-css@2.1.0` provides semantic wrappers, composition primitives, seven functional recipes, ordering escape hatches, sixteen spatial personalities, and refreshed ecosystem fixtures for UI Style Kit CSS 2.1 and Interactive Surface CSS 1.5. It owns layout only; color, typography, borders, shadows, component paint, and interactive states belong to other libraries. +`layout-style-css@2.1.1` provides semantic wrappers, composition primitives, seven functional recipes, ordering escape hatches, sixteen spatial personalities, and refreshed ecosystem fixtures for UI Style Kit CSS 2.1 and Interactive Surface CSS 1.5. It owns layout only; color, typography, borders, shadows, component paint, and interactive states belong to other libraries. ## Requirements @@ -15,7 +15,7 @@ Container-first, dependency-free structural CSS for responsive application layou ## Install ```bash -npm install layout-style-css@2.1.0 +npm install layout-style-css@2.1.1 ``` Standalone use needs one import: @@ -87,7 +87,7 @@ Every `.ly-wrapper` has fluid logical gutters, safe-area compensation, and `cont ``` -Wrappers and recipe roots respond to the nearest container. The mobile single-column fallback is authoritative; core recipes and primitives enhance at the `48rem` and `64rem` core thresholds, not viewport widths. Personalities may introduce personality-specific thresholds to create a distinct spatial rhythm while preserving source order. +Wrappers, recipe roots, and personality enhancements respond to the nearest inline-size container. The mobile single-column fallback is authoritative; core recipes and primitives enhance at the `48rem` and `64rem` core thresholds, not viewport widths. Personality grid rhythms retain their authored thresholds, safe two-track application shells retain their authored thresholds, and every three- or four-track application shell waits for a locally feasible `64rem` allocation. ## Recipes And Areas @@ -183,8 +183,8 @@ The v1 `.ly-surface--raised` selector is intentionally removed, including from ` ## CDN ```html - - + + ``` Companion CDN styles must appear in the same order as the package imports: UI Style Kit visual CSS, UI Style Kit `interactive-surface-theme.css`, Interactive Surface `state-core.css`, then Layout core. Load `layout-style-css/integrations/ui-style-kit.css` only for deprecated structural aliases. diff --git a/demo/index.html b/demo/index.html index 1bb82a7..c395ff5 100644 --- a/demo/index.html +++ b/demo/index.html @@ -79,7 +79,7 @@ "@context": "https://schema.org", "@type": "SoftwareSourceCode", "name": "layout-style-css", - "version": "2.1.0", + "version": "2.1.1", "description": "A dependency-free, container-first CSS layout library for semantic wrappers, composition primitives, responsive recipes, and spatial personalities.", "programmingLanguage": "CSS", "applicationCategory": "DeveloperApplication", diff --git a/demo/sitemap.xml b/demo/sitemap.xml index c7e68ed..4775175 100644 --- a/demo/sitemap.xml +++ b/demo/sitemap.xml @@ -2,7 +2,7 @@ https://foscat.github.io/layout-style-css/ - 2026-07-20 + 2026-07-27 weekly 0.8 diff --git a/dist/layout-style-css.css b/dist/layout-style-css.css index 806cb53..f3e14ad 100644 --- a/dist/layout-style-css.css +++ b/dist/layout-style-css.css @@ -635,8 +635,7 @@ minmax(min(100%, var(--ly-recipe-aside)), 0.35fr); } - :where(.ly-dashboard, [data-ly-recipe="dashboard"]), - :where(.ly-docs, [data-ly-recipe="docs"]) { + :where(.ly-dashboard, [data-ly-recipe="dashboard"]) { grid-template-areas: "nav header header" "nav main aside" @@ -647,6 +646,15 @@ minmax(min(100%, var(--ly-recipe-aside)), 0.35fr); } + :where(.ly-docs, [data-ly-recipe="docs"]) { + grid-template-areas: + "nav header" + "nav main" + "nav aside" + "nav footer"; + grid-template-columns: minmax(min(100%, var(--ly-recipe-rail)), auto) minmax(0, 1fr); + } + :where(.ly-list-detail, [data-ly-recipe="list-detail"]) { grid-template-columns: minmax(min(100%, var(--ly-pane-size)), 0.45fr) minmax(0, 1fr); } @@ -843,8 +851,14 @@ min-inline-size: 0; } - /* Named areas rearrange the shell without changing its mobile DOM or focus order. */ - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-ly-layout="minimal-saas"]) .ly-grid > :nth-child(4n + 1) { + grid-column: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="minimal-saas"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -857,10 +871,6 @@ minmax(0, 1fr) minmax(min(100%, 16rem), 0.28fr); } - - :where(.ly-root[data-ly-layout="minimal-saas"]) .ly-grid > :nth-child(4n + 1) { - grid-column: span 2; - } } } @@ -879,7 +889,21 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-ly-layout="bento"]) .ly-grid > :nth-child(6n + 1) { + grid-column: span 2; + grid-row: span 2; + } + + :where(.ly-root[data-ly-layout="bento"]) + :where(.ly-card-grid, [data-ly-recipe="card-grid"]) + > :nth-child(6n + 1) { + grid-column: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="bento"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -893,17 +917,6 @@ minmax(0, 1fr) minmax(0, 1fr); } - - :where(.ly-root[data-ly-layout="bento"]) .ly-grid > :nth-child(6n + 1) { - grid-column: span 2; - grid-row: span 2; - } - - :where(.ly-root[data-ly-layout="bento"]) - :where(.ly-card-grid, [data-ly-recipe="card-grid"]) - > :nth-child(6n + 1) { - grid-column: span 2; - } } } @@ -922,14 +935,29 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="maximalist"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 56rem) { + @container (min-width: 56rem) { + :where(.ly-root[data-ly-layout="maximalist"]) .ly-grid > :nth-child(7n + 1) { + grid-column: span 3; + grid-row: span 2; + } + + :where(.ly-root[data-ly-layout="maximalist"]) + :where(.ly-gallery, [data-ly-recipe="gallery"]) + > :nth-child(5n + 1) { + grid-column: span 2; + grid-row: span 2; + } + } + + /* The four-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="maximalist"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -943,18 +971,6 @@ minmax(min(100%, 15rem), 0.32fr) minmax(min(100%, 18rem), 0.38fr); } - - :where(.ly-root[data-ly-layout="maximalist"]) .ly-grid > :nth-child(7n + 1) { - grid-column: span 3; - grid-row: span 2; - } - - :where(.ly-root[data-ly-layout="maximalist"]) - :where(.ly-gallery, [data-ly-recipe="gallery"]) - > :nth-child(5n + 1) { - grid-column: span 2; - grid-row: span 2; - } } } @@ -975,14 +991,22 @@ } /* Cap the fallback rail until the wider personality template is eligible. */ - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="bauhaus"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 14rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 52rem) { + @container (min-width: 52rem) { + :where(.ly-root[data-ly-layout="bauhaus"]) .ly-grid > :nth-child(3n + 1) { + grid-column: span 2; + grid-row: span 2; + } + } + + /* The four-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="bauhaus"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -996,11 +1020,6 @@ minmax(0, 1.3fr) minmax(min(100%, 18rem), 0.3fr); } - - :where(.ly-root[data-ly-layout="bauhaus"]) .ly-grid > :nth-child(3n + 1) { - grid-column: span 2; - grid-row: span 2; - } } } @@ -1020,7 +1039,7 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="tactile"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -1059,14 +1078,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="neumorphism"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 52rem) { + @container (min-width: 52rem) { :where(.ly-root[data-ly-layout="neumorphism"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -1105,7 +1124,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-ly-layout="retrofuturism"]) .ly-grid > :nth-child(6n + 1) { + grid-column: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="retrofuturism"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -1118,10 +1144,6 @@ minmax(0, 1fr) minmax(min(100%, 17rem), 0.3fr); } - - :where(.ly-root[data-ly-layout="retrofuturism"]) .ly-grid > :nth-child(6n + 1) { - grid-column: span 2; - } } } @@ -1141,7 +1163,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-ly-layout="brutalism"]) .ly-grid > :nth-child(3n) { + grid-column: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="brutalism"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -1154,10 +1183,6 @@ minmax(min(100%, 16rem), 0.7fr) minmax(min(100%, 18rem), 0.34fr); } - - :where(.ly-root[data-ly-layout="brutalism"]) .ly-grid > :nth-child(3n) { - grid-column: span 2; - } } } @@ -1177,7 +1202,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 44rem) { + @container (min-width: 44rem) { + :where(.ly-root[data-ly-layout="cyberpunk"]) .ly-grid > :nth-child(4n + 2) { + grid-column: span 3; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="cyberpunk"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -1190,10 +1222,6 @@ minmax(0, 1fr) minmax(min(100%, 19rem), 0.32fr); } - - :where(.ly-root[data-ly-layout="cyberpunk"]) .ly-grid > :nth-child(4n + 2) { - grid-column: span 3; - } } } @@ -1213,7 +1241,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-ly-layout="y2k"]) .ly-grid > :nth-child(5n + 1) { + grid-column: span 3; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="y2k"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -1226,10 +1261,6 @@ minmax(0, 1fr) minmax(min(100%, 16rem), 0.28fr); } - - :where(.ly-root[data-ly-layout="y2k"]) .ly-grid > :nth-child(5n + 1) { - grid-column: span 3; - } } } @@ -1249,14 +1280,22 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="retro-glass"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 56rem) { + @container (min-width: 56rem) { + :where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid > :nth-child(4n) { + grid-column: span 2; + grid-row: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="retro-glass"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -1269,11 +1308,6 @@ minmax(0, 0.75fr) minmax(min(100%, 18rem), 0.32fr); } - - :where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid > :nth-child(4n) { - grid-column: span 2; - grid-row: span 2; - } } } @@ -1293,14 +1327,26 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="f-pattern"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 56rem) { + @container (min-width: 56rem) { + :where(.ly-root[data-ly-layout="f-pattern"]) .ly-grid > :nth-child(3n + 1) { + grid-column: span 2; + } + + :where(.ly-root[data-ly-layout="f-pattern"]) + :where(.ly-split-hero, [data-ly-recipe="split-hero"]) { + grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="f-pattern"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -1313,15 +1359,6 @@ minmax(0, 1.35fr) minmax(min(100%, 18rem), 0.65fr); } - - :where(.ly-root[data-ly-layout="f-pattern"]) .ly-grid > :nth-child(3n + 1) { - grid-column: span 2; - } - - :where(.ly-root[data-ly-layout="f-pattern"]) - :where(.ly-split-hero, [data-ly-recipe="split-hero"]) { - grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); - } } } @@ -1341,14 +1378,27 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="z-pattern"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 60rem) { + @container (min-width: 60rem) { + :where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid > :nth-child(4n + 2) { + grid-column: span 2; + align-self: end; + } + + :where(.ly-root[data-ly-layout="z-pattern"]) + :where(.ly-split-hero, [data-ly-recipe="split-hero"]) { + grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="z-pattern"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -1361,16 +1411,6 @@ minmax(min(100%, 19rem), 0.55fr) minmax(min(100%, 17rem), 0.3fr); } - - :where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid > :nth-child(4n + 2) { - grid-column: span 2; - align-self: end; - } - - :where(.ly-root[data-ly-layout="z-pattern"]) - :where(.ly-split-hero, [data-ly-recipe="split-hero"]) { - grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); - } } } @@ -1390,7 +1430,7 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="split-screen"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -1431,14 +1471,22 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="mondrian"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 13rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 52rem) { + @container (min-width: 52rem) { + :where(.ly-root[data-ly-layout="mondrian"]) .ly-grid > :nth-child(5n + 1) { + grid-column: span 2; + grid-row: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="mondrian"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -1451,11 +1499,6 @@ minmax(0, 1.45fr) minmax(min(100%, 18rem), 0.55fr); } - - :where(.ly-root[data-ly-layout="mondrian"]) .ly-grid > :nth-child(5n + 1) { - grid-column: span 2; - grid-row: span 2; - } } } @@ -1476,14 +1519,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="synthwave"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 64rem) { + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="synthwave"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: diff --git a/dist/layout-style-css.min.css b/dist/layout-style-css.min.css index aceba57..71f1665 100644 --- a/dist/layout-style-css.min.css +++ b/dist/layout-style-css.min.css @@ -1 +1 @@ -@layer ly.reset,ly.tokens,ly.wrappers,ly.primitives,ly.recipes,ly.utilities,ly.personalities,ly.integrations,ly.legacy;@layer ly.tokens{:where(.ly-root){--ly-space-0:0;--ly-space-1:0.25rem;--ly-space-2:0.5rem;--ly-space-3:0.75rem;--ly-space-4:1rem;--ly-space-5:1.5rem;--ly-space-6:2rem;--ly-space-7:3rem;--ly-space-8:4rem;--ly-space-9:6rem;--ly-wrapper-compact:40rem;--ly-wrapper-prose:68ch;--ly-wrapper-content:72rem;--ly-wrapper-wide:112rem;--ly-wrapper-max:var(--ly-wrapper-content);--ly-page-padding-inline:clamp(1rem,4vw,3rem);--ly-safe-area-inline:max( env(safe-area-inset-left,0px),env(safe-area-inset-right,0px) );--ly-wrapper-gutter:max(var(--ly-page-padding-inline),var(--ly-safe-area-inline));--ly-section-padding-block:clamp(3rem,7vw,6rem);--ly-gap:var(--ly-space-5);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-3);--ly-cover-min:100svh;--ly-switcher-threshold:42rem;--ly-sidebar-size:18rem;--ly-sidebar-content-min:50%;--ly-grid-columns:12;--ly-grid-min:16rem;--ly-pane-size:22rem;--ly-media-size:14rem;--ly-reel-item-min:16rem;--ly-reel-item-max:28rem;--ly-scroll-max:70svh;--ly-frame-ratio:16 / 9;--ly-recipe-rail:18rem;--ly-recipe-aside:22rem;--ly-card-grid-min:16rem;--ly-gallery-min:12rem;--ly-card-size-sm:10rem;--ly-card-size-md:14rem;--ly-card-size-lg:18rem;--ly-header-height:4.5rem;--ly-z-header:20;--ly-container-sm:var(--ly-wrapper-compact);--ly-container-md:56rem;--ly-container-lg:var(--ly-wrapper-content);--ly-container-xl:88rem;--ly-container-wide:var(--ly-wrapper-wide);--ly-container-max:var(--ly-container-lg);--ly-content-readable:var(--ly-wrapper-prose);--ly-carousel-item-min:var(--ly-reel-item-min);--ly-carousel-item-max:var(--ly-reel-item-max);--ly-sidebar-min:14rem;--ly-sidebar-width:var(--ly-recipe-rail);--ly-sidebar-max:var(--ly-recipe-aside);--ly-pane-fixed:var(--ly-pane-size);--ly-z-sidebar:10}}@layer ly.reset{:where(.ly-root),:where(.ly-root *){box-sizing:border-box}:where(.ly-root){min-inline-size:0;margin:0}:where(.ly-root img),:where(.ly-root svg),:where(.ly-root video),:where(.ly-root canvas){max-inline-size:100%}}@layer ly.wrappers{.ly-wrapper{--ly-wrapper-max:var(--ly-personality-wrapper-max,var(--ly-wrapper-content));container-name:ly-wrapper;container-type:inline-size;inline-size:min(100%,calc(var(--ly-wrapper-max) + (var(--ly-wrapper-gutter) * 2)));margin-inline:auto;padding-inline:var(--ly-wrapper-gutter)}.ly-wrapper--compact{--ly-wrapper-max:40rem}.ly-wrapper--prose{--ly-wrapper-max:68ch}.ly-wrapper--content{--ly-wrapper-max:72rem}.ly-wrapper--wide{--ly-wrapper-max:112rem}.ly-wrapper--full{--ly-wrapper-max:100%}.ly-wrapper--breakout{--ly-breakout-content-size:min( var(--ly-wrapper-content),calc(100% - (var(--ly-wrapper-gutter) * 2)) );--ly-breakout-feature-size:min( var(--ly-wrapper-wide),calc(100% - (var(--ly-wrapper-gutter) * 2)) );display:grid;grid-template-columns:[full-start] minmax(min(100%,var(--ly-wrapper-gutter)),1fr) [feature-start] minmax( 0,calc((var(--ly-breakout-feature-size) - var(--ly-breakout-content-size)) / 2) ) [content-start] minmax(0,var(--ly-breakout-content-size)) [content-end] minmax( 0,calc((var(--ly-breakout-feature-size) - var(--ly-breakout-content-size)) / 2) ) [feature-end] minmax(min(100%,var(--ly-wrapper-gutter)),1fr) [full-end];inline-size:100%;padding-inline:0}.ly-wrapper--breakout>*{grid-column:content;min-inline-size:0}.ly-wrapper--breakout>:where(.ly-lane--content,[data-ly-lane="content"]){grid-column:content}.ly-wrapper--breakout>:where(.ly-lane--feature,[data-ly-lane="feature"]){grid-column:feature}.ly-wrapper--breakout>:where(.ly-lane--full,[data-ly-lane="full"]){grid-column:full}}@layer ly.primitives{.ly-page{min-block-size:100svh}.ly-header,.ly-footer,.ly-main,.ly-section,.ly-surface{min-inline-size:0;min-block-size:0}.ly-header{min-block-size:var(--ly-header-height)}.ly-header--sticky{position:sticky;inset-block-start:0;z-index:var(--ly-z-header)}.ly-section{padding-block:var(--ly-section-padding-block)}.ly-section--compact{--ly-section-padding-block:var(--ly-space-7)}.ly-section--flush{--ly-section-padding-block:0}.ly-readable{max-inline-size:var(--ly-wrapper-prose)}.ly-stack{display:flex;flex-direction:column;gap:var(--ly-stack-gap)}.ly-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ly-cluster-gap)}.ly-center{inline-size:min(100%,var(--ly-center-max,var(--ly-wrapper-content)));margin-inline:auto}.ly-cover{display:flex;flex-direction:column;min-block-size:var(--ly-cover-min);padding-block:var(--ly-cover-padding,var(--ly-space-5))}.ly-cover>:where(.ly-cover__center,[data-ly-cover-center]){margin-block:auto}.ly-switcher{display:flex;flex-wrap:wrap;gap:var(--ly-gap)}.ly-switcher>*{flex-basis:calc((var(--ly-switcher-threshold) - 100%) * 999);flex-grow:1;min-inline-size:0}.ly-sidebar{display:flex;flex-wrap:wrap;gap:var(--ly-gap)}.ly-sidebar>:where(.ly-sidebar__side,[data-ly-sidebar="side"]){flex-basis:var(--ly-sidebar-size);flex-grow:1}.ly-sidebar>:where(.ly-sidebar__content,[data-ly-sidebar="content"]){flex-basis:0;flex-grow:999;min-inline-size:min(100%,var(--ly-sidebar-content-min))}.ly-grid{display:grid;grid-template-columns:repeat(var(--ly-grid-columns),minmax(0,1fr));gap:var(--ly-grid-gap)}.ly-grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-grid-min)),1fr))}.ly-grid>*,.ly-split>*,.ly-panes>*,.ly-media>*{min-inline-size:0}.ly-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap);align-items:var(--ly-split-align,center)}.ly-panes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap)}.ly-media{display:grid;grid-template-areas:"media" "content" "actions";grid-template-columns:minmax(0,1fr);gap:var(--ly-gap);align-items:var(--ly-media-align,start)}.ly-media>:where(.ly-media__asset,[data-ly-media="asset"]){grid-area:media}.ly-media>:where(.ly-media__content,[data-ly-media="content"]){grid-area:content}.ly-media>:where(.ly-media__actions,[data-ly-media="actions"]){grid-area:actions}.ly-reel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(100%,var(--ly-reel-item-min)),var(--ly-reel-item-max));gap:var(--ly-grid-gap);overflow-x:auto;overflow-inline:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline proximity}.ly-reel>*{min-inline-size:0;scroll-snap-align:start}.ly-frame{aspect-ratio:var(--ly-frame-ratio);overflow:hidden}.ly-frame>*{inline-size:100%;block-size:100%;object-fit:cover}.ly-scroll{min-block-size:0;max-block-size:var(--ly-scroll-max);overflow:auto;overscroll-behavior:contain}}@layer ly.primitives{@container (min-width:48rem){.ly-split{grid-template-columns:minmax(0,var(--ly-split-primary,1fr)) minmax(0,var(--ly-split-secondary,1fr))}.ly-panes--2{grid-template-columns:minmax(0,1fr) minmax(min(100%,var(--ly-pane-size)),0.7fr)}.ly-media{grid-template-areas:"media content" "media actions";grid-template-columns:minmax(min(100%,var(--ly-media-size)),auto) minmax(0,1fr)}}@container (min-width:64rem){.ly-panes--3{grid-template-columns:minmax(min(100%,var(--ly-pane-rail,14rem)),0.35fr) minmax(0,1fr) minmax(min(100%,var(--ly-pane-rail,14rem)),0.35fr)}}}@layer ly.recipes{:where(.ly-app-shell,[data-ly-recipe="app-shell"]),:where(.ly-dashboard,[data-ly-recipe="dashboard"]),:where(.ly-docs,[data-ly-recipe="docs"]),:where(.ly-list-detail,[data-ly-recipe="list-detail"]),:where(.ly-split-hero,[data-ly-recipe="split-hero"]),:where(.ly-gallery,[data-ly-recipe="gallery"]),:where(.ly-card-grid,[data-ly-recipe="card-grid"]){container-name:ly-recipe;container-type:inline-size;min-inline-size:0}:where(.ly-app-shell,[data-ly-recipe="app-shell"]),:where(.ly-dashboard,[data-ly-recipe="dashboard"]),:where(.ly-docs,[data-ly-recipe="docs"]),:where(.ly-list-detail,[data-ly-recipe="list-detail"]),:where(.ly-split-hero,[data-ly-recipe="split-hero"]){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap)}:where(.ly-app-shell,[data-ly-recipe="app-shell"]){min-block-size:100svh;grid-template-areas:"header" "sidebar" "main" "aside" "footer";grid-template-rows:auto auto minmax(0,1fr) auto auto}:where(.ly-dashboard,[data-ly-recipe="dashboard"]){grid-template-areas:"header" "nav" "main" "aside" "footer"}:where(.ly-docs,[data-ly-recipe="docs"]){grid-template-areas:"header" "nav" "main" "aside" "footer"}:where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-areas:"primary" "secondary" "actions"}:where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-areas:"content" "media" "actions";align-items:var(--ly-split-hero-align,center)}:where(.ly-gallery,[data-ly-recipe="gallery"]),:where(.ly-card-grid,[data-ly-recipe="card-grid"]){display:grid;gap:var(--ly-grid-gap)}:where(.ly-gallery,[data-ly-recipe="gallery"]){grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-gallery-min)),1fr))}:where(.ly-card-grid,[data-ly-recipe="card-grid"]){grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-card-grid-min)),1fr))}:where(.ly-gallery,[data-ly-recipe="gallery"])>*,:where(.ly-card-grid,[data-ly-recipe="card-grid"])>*{min-inline-size:0}:where(.ly-area--header,[data-ly-area="header"]){grid-area:header;min-inline-size:0}:where(.ly-area--nav,[data-ly-area="nav"]){grid-area:nav;min-inline-size:0}:where(.ly-area--main,[data-ly-area="main"]){grid-area:main;min-inline-size:0}:where(.ly-area--aside,[data-ly-area="aside"]){grid-area:aside;min-inline-size:0}:where(.ly-area--footer,[data-ly-area="footer"]){grid-area:footer;min-inline-size:0}:where(.ly-area--content,[data-ly-area="content"]){grid-area:content;min-inline-size:0}:where(.ly-area--media,[data-ly-area="media"]){grid-area:media;min-inline-size:0}:where(.ly-area--actions,[data-ly-area="actions"]){grid-area:actions;min-inline-size:0}:where(.ly-area--primary,[data-ly-area="primary"]){grid-area:primary;min-inline-size:0}:where(.ly-area--secondary,[data-ly-area="secondary"]){grid-area:secondary;min-inline-size:0}.ly-app-header{grid-area:header;min-inline-size:0}.ly-app-sidebar{grid-area:sidebar;min-inline-size:0}.ly-app-main{grid-area:main;min-inline-size:0}.ly-app-aside{grid-area:aside;min-inline-size:0}.ly-app-footer{grid-area:footer;min-inline-size:0}:where(.ly-app-shell,[data-ly-recipe="app-shell"])>:where(.ly-area--nav,[data-ly-area="nav"]){grid-area:sidebar}@container (min-width:48rem){:where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header" "sidebar main" "aside main" "footer footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr)}:where(.ly-dashboard,[data-ly-recipe="dashboard"]){grid-template-areas:"header header" "nav nav" "main aside" "footer footer";grid-template-columns:minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr)}:where(.ly-docs,[data-ly-recipe="docs"]){grid-template-areas:"header header" "nav main" "nav aside" "footer footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr)}:where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-areas:"primary secondary" "actions actions";grid-template-columns:minmax(min(100%,var(--ly-pane-size)),0.7fr) minmax(0,1fr)}:where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-areas:"content media" "actions media";grid-template-columns:minmax(0,var(--ly-split-primary,1fr)) minmax(0,var(--ly-split-secondary,1fr))}:where(.ly-gallery,[data-ly-recipe="gallery"]){--ly-gallery-min:14rem}:where(.ly-card-grid,[data-ly-recipe="card-grid"]){--ly-card-grid-min:18rem}}@container (min-width:64rem){:where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr)}:where(.ly-dashboard,[data-ly-recipe="dashboard"]),:where(.ly-docs,[data-ly-recipe="docs"]){grid-template-areas:"nav header header" "nav main aside" "nav footer footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr)}:where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-columns:minmax(min(100%,var(--ly-pane-size)),0.45fr) minmax(0,1fr)}:where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr)}:where(.ly-gallery,[data-ly-recipe="gallery"]){--ly-gallery-min:16rem}:where(.ly-card-grid,[data-ly-recipe="card-grid"]){--ly-card-grid-min:20rem}}}@layer ly.utilities{.ly-cols-1{--ly-grid-columns:1}.ly-cols-2{--ly-grid-columns:2}.ly-cols-3{--ly-grid-columns:3}.ly-cols-4{--ly-grid-columns:4}.ly-cols-5{--ly-grid-columns:5}.ly-cols-6{--ly-grid-columns:6}.ly-cols-7{--ly-grid-columns:7}.ly-cols-8{--ly-grid-columns:8}.ly-cols-9{--ly-grid-columns:9}.ly-cols-10{--ly-grid-columns:10}.ly-cols-11{--ly-grid-columns:11}.ly-cols-12{--ly-grid-columns:12}.ly-cols-16{--ly-grid-columns:16}.ly-span-1{grid-column:span 1}.ly-span-2{grid-column:span 2}.ly-span-3{grid-column:span 3}.ly-span-4{grid-column:span 4}.ly-span-5{grid-column:span 5}.ly-span-6{grid-column:span 6}.ly-span-7{grid-column:span 7}.ly-span-8{grid-column:span 8}.ly-span-9{grid-column:span 9}.ly-span-10{grid-column:span 10}.ly-span-11{grid-column:span 11}.ly-span-12{grid-column:span 12}.ly-span-13{grid-column:span 13}.ly-span-14{grid-column:span 14}.ly-span-15{grid-column:span 15}.ly-span-16{grid-column:span 16}.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-1{--ly-gap:var(--ly-space-1);--ly-grid-gap:var(--ly-space-1);--ly-stack-gap:var(--ly-space-1);--ly-cluster-gap:var(--ly-space-1)}.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-3{--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-3)}.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-5{--ly-gap:var(--ly-space-5);--ly-grid-gap:var(--ly-space-5);--ly-stack-gap:var(--ly-space-5);--ly-cluster-gap:var(--ly-space-5)}.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-7{--ly-gap:var(--ly-space-7);--ly-grid-gap:var(--ly-space-7);--ly-stack-gap:var(--ly-space-7);--ly-cluster-gap:var(--ly-space-7)}.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-9{--ly-gap:var(--ly-space-9);--ly-grid-gap:var(--ly-space-9);--ly-stack-gap:var(--ly-space-9);--ly-cluster-gap:var(--ly-space-9)}.ly-pad-0{padding:var(--ly-space-0)}.ly-pad-1{padding:var(--ly-space-1)}.ly-pad-2{padding:var(--ly-space-2)}.ly-pad-3{padding:var(--ly-space-3)}.ly-pad-4{padding:var(--ly-space-4)}.ly-pad-5{padding:var(--ly-space-5)}.ly-pad-6{padding:var(--ly-space-6)}.ly-pad-7{padding:var(--ly-space-7)}.ly-pad-8{padding:var(--ly-space-8)}.ly-pad-9{padding:var(--ly-space-9)}.ly-px-4{padding-inline:var(--ly-space-4)}.ly-px-6{padding-inline:var(--ly-space-6)}.ly-px-8{padding-inline:var(--ly-space-8)}.ly-py-4{padding-block:var(--ly-space-4)}.ly-py-6{padding-block:var(--ly-space-6)}.ly-py-8{padding-block:var(--ly-space-8)}.ly-mx-auto{margin-inline:auto}.ly-w-full{inline-size:100%}.ly-h-full{block-size:100%}.ly-min-h-screen{min-block-size:100svh}.ly-bleed{inline-size:100vw;margin-inline:calc(50% - 50vw)}.ly-overflow-auto{overflow:auto}.ly-overflow-hidden{overflow:hidden}.ly-items-start{align-items:flex-start}.ly-items-center{align-items:center}.ly-items-end{align-items:flex-end}.ly-items-stretch{align-items:stretch}.ly-justify-start{justify-content:flex-start}.ly-justify-center{justify-content:center}.ly-justify-end{justify-content:flex-end}.ly-justify-between{justify-content:space-between}.ly-frame-1x1{--ly-frame-ratio:1 / 1}.ly-frame-2x1{--ly-frame-ratio:2 / 1}.ly-frame-3x2{--ly-frame-ratio:3 / 2}.ly-frame-4x3{--ly-frame-ratio:4 / 3}.ly-frame-16x9{--ly-frame-ratio:16 / 9}.ly-frame-21x9{--ly-frame-ratio:21 / 9}.ly-hidden{display:none !important}.ly-show-md-up,.ly-show-lg-up{display:none !important}.ly-visually-hidden{position:absolute !important;inline-size:1px !important;block-size:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;clip-path:inset(50%) !important;white-space:nowrap !important}.ly-order-first{order:-1}.ly-order-normal{order:0}.ly-order-last{order:999}.ly-order-1{order:1}.ly-order-2{order:2}.ly-order-3{order:3}.ly-order-4{order:4}.ly-order-5{order:5}.ly-order-6{order:6}@container (min-width:48rem){.ly-md-cols-1{--ly-grid-columns:1}.ly-md-cols-2{--ly-grid-columns:2}.ly-md-cols-3{--ly-grid-columns:3}.ly-md-cols-4{--ly-grid-columns:4}.ly-md-cols-6{--ly-grid-columns:6}.ly-md-cols-8{--ly-grid-columns:8}.ly-md-cols-12{--ly-grid-columns:12}.ly-md-cols-16{--ly-grid-columns:16}.ly-show-md-up{display:revert !important}.ly-md-order-first{order:-1}.ly-md-order-normal{order:0}.ly-md-order-last{order:999}.ly-md-order-1{order:1}.ly-md-order-2{order:2}.ly-md-order-3{order:3}.ly-md-order-4{order:4}.ly-md-order-5{order:5}.ly-md-order-6{order:6}}@container (min-width:64rem){.ly-lg-cols-1{--ly-grid-columns:1}.ly-lg-cols-2{--ly-grid-columns:2}.ly-lg-cols-3{--ly-grid-columns:3}.ly-lg-cols-4{--ly-grid-columns:4}.ly-lg-cols-6{--ly-grid-columns:6}.ly-lg-cols-8{--ly-grid-columns:8}.ly-lg-cols-12{--ly-grid-columns:12}.ly-lg-cols-16{--ly-grid-columns:16}.ly-show-lg-up{display:revert !important}.ly-lg-order-first{order:-1}.ly-lg-order-normal{order:0}.ly-lg-order-last{order:999}.ly-lg-order-1{order:1}.ly-lg-order-2{order:2}.ly-lg-order-3{order:3}.ly-lg-order-4{order:4}.ly-lg-order-5{order:5}.ly-lg-order-6{order:6}}}@layer ly.personalities.minimal_saas{:where(.ly-root[data-ly-layout="minimal-saas"]){--ly-recipe-rail:15rem;--ly-recipe-aside:16rem;--ly-grid-columns:4;--ly-grid-min:16rem;--ly-personality-wrapper-max:88rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="minimal-saas"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,15rem),0.24fr) minmax(0,1fr) minmax(min(100%,16rem),0.28fr)}:where(.ly-root[data-ly-layout="minimal-saas"]) .ly-grid>:nth-child(4n + 1){grid-column:span 2}}}@layer ly.personalities.bento{:where(.ly-root[data-ly-layout="bento"]){--ly-grid-columns:6;--ly-grid-min:12rem;--ly-card-grid-min:13rem;--ly-personality-wrapper-max:112rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="bento"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header header" "sidebar main main" "aside main main" "footer footer footer";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(min(100%,14rem),0.3fr) minmax(0,1fr) minmax(0,1fr)}:where(.ly-root[data-ly-layout="bento"]) .ly-grid>:nth-child(6n + 1){grid-column:span 2;grid-row:span 2}:where(.ly-root[data-ly-layout="bento"]):where(.ly-card-grid,[data-ly-recipe="card-grid"])>:nth-child(6n + 1){grid-column:span 2}}}@layer ly.personalities.maximalist{:where(.ly-root[data-ly-layout="maximalist"]){--ly-grid-columns:12;--ly-grid-min:10rem;--ly-personality-wrapper-max:100%;--ly-card-grid-min:12rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="maximalist"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,18rem),0.3fr) minmax(0,1fr)}}@container ly-personality (min-width:56rem){:where(.ly-root[data-ly-layout="maximalist"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header header header" "main main sidebar aside" "main main footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1.4fr) minmax(0,0.6fr) minmax(min(100%,15rem),0.32fr) minmax(min(100%,18rem),0.38fr)}:where(.ly-root[data-ly-layout="maximalist"]) .ly-grid>:nth-child(7n + 1){grid-column:span 3;grid-row:span 2}:where(.ly-root[data-ly-layout="maximalist"]):where(.ly-gallery,[data-ly-recipe="gallery"])>:nth-child(5n + 1){grid-column:span 2;grid-row:span 2}}}@layer ly.personalities.bauhaus{:where(.ly-root[data-ly-layout="bauhaus"]){--ly-recipe-rail:14rem;--ly-recipe-aside:18rem;--ly-grid-columns:6;--ly-grid-min:13rem;--ly-personality-wrapper-max:96rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="bauhaus"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,14rem),0.3fr) minmax(0,1fr)}}@container ly-personality (min-width:52rem){:where(.ly-root[data-ly-layout="bauhaus"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header aside" "sidebar main main aside" "sidebar footer footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,14rem),0.24fr) minmax(0,0.7fr) minmax(0,1.3fr) minmax(min(100%,18rem),0.3fr)}:where(.ly-root[data-ly-layout="bauhaus"]) .ly-grid>:nth-child(3n + 1){grid-column:span 2;grid-row:span 2}}}@layer ly.personalities.tactile{:where(.ly-root[data-ly-layout="tactile"]){--ly-recipe-rail:17rem;--ly-recipe-aside:20rem;--ly-grid-columns:5;--ly-grid-min:15rem;--ly-personality-wrapper-max:82rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="tactile"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header" "sidebar main" "sidebar aside" "sidebar footer";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(min(100%,17rem),0.28fr) minmax(0,1fr)}:where(.ly-root[data-ly-layout="tactile"]) .ly-grid>:nth-child(5n + 2){grid-column:span 2}:where(.ly-root[data-ly-layout="tactile"]):where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-columns:minmax(min(100%,20rem),0.42fr) minmax(0,0.58fr)}}}@layer ly.personalities.neumorphism{:where(.ly-root[data-ly-layout="neumorphism"]){--ly-recipe-rail:17rem;--ly-recipe-aside:19rem;--ly-grid-columns:4;--ly-grid-min:17rem;--ly-personality-wrapper-max:84rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="neumorphism"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,17rem),0.3fr) minmax(0,1fr)}}@container ly-personality (min-width:52rem){:where(.ly-root[data-ly-layout="neumorphism"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header sidebar" "main sidebar" "aside sidebar" "footer sidebar";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr) minmax(min(100%,17rem),0.3fr)}:where(.ly-root[data-ly-layout="neumorphism"]) .ly-grid>:nth-child(4n + 1){grid-column:span 2}:where(.ly-root[data-ly-layout="neumorphism"]):where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-columns:minmax(0,0.58fr) minmax(min(100%,19rem),0.42fr)}}}@layer ly.personalities.retrofuturism{:where(.ly-root[data-ly-layout="retrofuturism"]){--ly-recipe-rail:14rem;--ly-recipe-aside:17rem;--ly-grid-columns:6;--ly-grid-min:14rem;--ly-personality-wrapper-max:106rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="retrofuturism"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header aside" "sidebar main aside" "sidebar footer aside";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,14rem),0.24fr) minmax(0,1fr) minmax(min(100%,17rem),0.3fr)}:where(.ly-root[data-ly-layout="retrofuturism"]) .ly-grid>:nth-child(6n + 1){grid-column:span 2}}}@layer ly.personalities.brutalism{:where(.ly-root[data-ly-layout="brutalism"]){--ly-recipe-rail:18rem;--ly-recipe-aside:16rem;--ly-grid-columns:6;--ly-grid-min:14rem;--ly-personality-wrapper-max:100rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="brutalism"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header sidebar" "main aside sidebar" "footer footer sidebar";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1.3fr) minmax(min(100%,16rem),0.7fr) minmax(min(100%,18rem),0.34fr)}:where(.ly-root[data-ly-layout="brutalism"]) .ly-grid>:nth-child(3n){grid-column:span 2}}}@layer ly.personalities.cyberpunk{:where(.ly-root[data-ly-layout="cyberpunk"]){--ly-recipe-rail:13rem;--ly-recipe-aside:19rem;--ly-grid-columns:8;--ly-grid-min:12rem;--ly-personality-wrapper-max:112rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:44rem){:where(.ly-root[data-ly-layout="cyberpunk"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header aside" "sidebar main aside" "sidebar footer aside";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,13rem),0.2fr) minmax(0,1fr) minmax(min(100%,19rem),0.32fr)}:where(.ly-root[data-ly-layout="cyberpunk"]) .ly-grid>:nth-child(4n + 2){grid-column:span 3}}}@layer ly.personalities.y2k{:where(.ly-root[data-ly-layout="y2k"]){--ly-recipe-rail:16rem;--ly-recipe-aside:18rem;--ly-grid-columns:5;--ly-grid-min:13rem;--ly-personality-wrapper-max:90rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="y2k"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header sidebar" "aside main sidebar" "footer footer sidebar";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,18rem),0.34fr) minmax(0,1fr) minmax(min(100%,16rem),0.28fr)}:where(.ly-root[data-ly-layout="y2k"]) .ly-grid>:nth-child(5n + 1){grid-column:span 3}}}@layer ly.personalities.retro_glass{:where(.ly-root[data-ly-layout="retro-glass"]){--ly-recipe-rail:18rem;--ly-recipe-aside:20rem;--ly-grid-columns:8;--ly-grid-min:15rem;--ly-personality-wrapper-max:104rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="retro-glass"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,18rem),0.3fr) minmax(0,1fr)}}@container ly-personality (min-width:56rem){:where(.ly-root[data-ly-layout="retro-glass"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header sidebar" "main main sidebar" "aside footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr) minmax(min(100%,18rem),0.32fr)}:where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid>:nth-child(4n){grid-column:span 2;grid-row:span 2}}}@layer ly.personalities.f_pattern{:where(.ly-root[data-ly-layout="f-pattern"]){--ly-recipe-rail:16rem;--ly-recipe-aside:18rem;--ly-grid-columns:6;--ly-grid-min:14rem;--ly-personality-wrapper-max:92rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="f-pattern"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,16rem),0.3fr) minmax(0,1fr)}}@container ly-personality (min-width:56rem){:where(.ly-root[data-ly-layout="f-pattern"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header" "sidebar main aside" "sidebar footer aside";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,16rem),0.26fr) minmax(0,1.35fr) minmax(min(100%,18rem),0.65fr)}:where(.ly-root[data-ly-layout="f-pattern"]) .ly-grid>:nth-child(3n + 1){grid-column:span 2}:where(.ly-root[data-ly-layout="f-pattern"]):where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-columns:minmax(0,1.35fr) minmax(0,0.65fr)}}}@layer ly.personalities.z_pattern{:where(.ly-root[data-ly-layout="z-pattern"]){--ly-recipe-rail:17rem;--ly-recipe-aside:19rem;--ly-grid-columns:8;--ly-grid-min:14rem;--ly-personality-wrapper-max:108rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="z-pattern"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,17rem),0.3fr) minmax(0,1fr)}}@container ly-personality (min-width:60rem){:where(.ly-root[data-ly-layout="z-pattern"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header sidebar" "main aside sidebar" "footer aside sidebar";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1.45fr) minmax(min(100%,19rem),0.55fr) minmax(min(100%,17rem),0.3fr)}:where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid>:nth-child(4n + 2){grid-column:span 2;align-self:end}:where(.ly-root[data-ly-layout="z-pattern"]):where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-columns:minmax(0,1.5fr) minmax(0,0.5fr)}}}@layer ly.personalities.split_screen{:where(.ly-root[data-ly-layout="split-screen"]){--ly-grid-columns:2;--ly-grid-min:20rem;--ly-personality-wrapper-max:100%;--ly-split-primary:1fr;--ly-split-secondary:1fr;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="split-screen"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header" "main sidebar" "aside sidebar" "footer footer";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}:where(.ly-root[data-ly-layout="split-screen"]):where( .ly-split,.ly-split-hero,[data-ly-recipe="split-hero"],.ly-list-detail,[data-ly-recipe="list-detail"] ){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}}@layer ly.personalities.mondrian{:where(.ly-root[data-ly-layout="mondrian"]){--ly-recipe-rail:13rem;--ly-recipe-aside:18rem;--ly-grid-columns:10;--ly-grid-min:11rem;--ly-personality-wrapper-max:112rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="mondrian"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,13rem),0.3fr) minmax(0,1fr)}}@container ly-personality (min-width:52rem){:where(.ly-root[data-ly-layout="mondrian"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header" "sidebar main aside" "footer footer aside";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,13rem),0.22fr) minmax(0,1.45fr) minmax(min(100%,18rem),0.55fr)}:where(.ly-root[data-ly-layout="mondrian"]) .ly-grid>:nth-child(5n + 1){grid-column:span 2;grid-row:span 2}}}@layer ly.personalities.synthwave{:where(.ly-root[data-ly-layout="synthwave"]){--ly-recipe-rail:16rem;--ly-recipe-aside:20rem;--ly-grid-columns:12;--ly-grid-min:14rem;--ly-reel-item-max:34rem;--ly-personality-wrapper-max:112rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="synthwave"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,16rem),0.3fr) minmax(0,1fr)}}@container ly-personality (min-width:64rem){:where(.ly-root[data-ly-layout="synthwave"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header header" "sidebar main aside" "footer footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,16rem),0.28fr) minmax(0,1fr) minmax(min(100%,20rem),0.34fr)}:where(.ly-root[data-ly-layout="synthwave"]) .ly-grid>:nth-child(4n + 1){grid-column:span 3}:where(.ly-root[data-ly-layout="synthwave"]) .ly-reel{grid-auto-columns:minmax(min(100%,20rem),var(--ly-reel-item-max))}}} +@layer ly.reset,ly.tokens,ly.wrappers,ly.primitives,ly.recipes,ly.utilities,ly.personalities,ly.integrations,ly.legacy;@layer ly.tokens{:where(.ly-root){--ly-space-0:0;--ly-space-1:0.25rem;--ly-space-2:0.5rem;--ly-space-3:0.75rem;--ly-space-4:1rem;--ly-space-5:1.5rem;--ly-space-6:2rem;--ly-space-7:3rem;--ly-space-8:4rem;--ly-space-9:6rem;--ly-wrapper-compact:40rem;--ly-wrapper-prose:68ch;--ly-wrapper-content:72rem;--ly-wrapper-wide:112rem;--ly-wrapper-max:var(--ly-wrapper-content);--ly-page-padding-inline:clamp(1rem,4vw,3rem);--ly-safe-area-inline:max( env(safe-area-inset-left,0px),env(safe-area-inset-right,0px) );--ly-wrapper-gutter:max(var(--ly-page-padding-inline),var(--ly-safe-area-inline));--ly-section-padding-block:clamp(3rem,7vw,6rem);--ly-gap:var(--ly-space-5);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-3);--ly-cover-min:100svh;--ly-switcher-threshold:42rem;--ly-sidebar-size:18rem;--ly-sidebar-content-min:50%;--ly-grid-columns:12;--ly-grid-min:16rem;--ly-pane-size:22rem;--ly-media-size:14rem;--ly-reel-item-min:16rem;--ly-reel-item-max:28rem;--ly-scroll-max:70svh;--ly-frame-ratio:16 / 9;--ly-recipe-rail:18rem;--ly-recipe-aside:22rem;--ly-card-grid-min:16rem;--ly-gallery-min:12rem;--ly-card-size-sm:10rem;--ly-card-size-md:14rem;--ly-card-size-lg:18rem;--ly-header-height:4.5rem;--ly-z-header:20;--ly-container-sm:var(--ly-wrapper-compact);--ly-container-md:56rem;--ly-container-lg:var(--ly-wrapper-content);--ly-container-xl:88rem;--ly-container-wide:var(--ly-wrapper-wide);--ly-container-max:var(--ly-container-lg);--ly-content-readable:var(--ly-wrapper-prose);--ly-carousel-item-min:var(--ly-reel-item-min);--ly-carousel-item-max:var(--ly-reel-item-max);--ly-sidebar-min:14rem;--ly-sidebar-width:var(--ly-recipe-rail);--ly-sidebar-max:var(--ly-recipe-aside);--ly-pane-fixed:var(--ly-pane-size);--ly-z-sidebar:10}}@layer ly.reset{:where(.ly-root),:where(.ly-root *){box-sizing:border-box}:where(.ly-root){min-inline-size:0;margin:0}:where(.ly-root img),:where(.ly-root svg),:where(.ly-root video),:where(.ly-root canvas){max-inline-size:100%}}@layer ly.wrappers{.ly-wrapper{--ly-wrapper-max:var(--ly-personality-wrapper-max,var(--ly-wrapper-content));container-name:ly-wrapper;container-type:inline-size;inline-size:min(100%,calc(var(--ly-wrapper-max) + (var(--ly-wrapper-gutter) * 2)));margin-inline:auto;padding-inline:var(--ly-wrapper-gutter)}.ly-wrapper--compact{--ly-wrapper-max:40rem}.ly-wrapper--prose{--ly-wrapper-max:68ch}.ly-wrapper--content{--ly-wrapper-max:72rem}.ly-wrapper--wide{--ly-wrapper-max:112rem}.ly-wrapper--full{--ly-wrapper-max:100%}.ly-wrapper--breakout{--ly-breakout-content-size:min( var(--ly-wrapper-content),calc(100% - (var(--ly-wrapper-gutter) * 2)) );--ly-breakout-feature-size:min( var(--ly-wrapper-wide),calc(100% - (var(--ly-wrapper-gutter) * 2)) );display:grid;grid-template-columns:[full-start] minmax(min(100%,var(--ly-wrapper-gutter)),1fr) [feature-start] minmax( 0,calc((var(--ly-breakout-feature-size) - var(--ly-breakout-content-size)) / 2) ) [content-start] minmax(0,var(--ly-breakout-content-size)) [content-end] minmax( 0,calc((var(--ly-breakout-feature-size) - var(--ly-breakout-content-size)) / 2) ) [feature-end] minmax(min(100%,var(--ly-wrapper-gutter)),1fr) [full-end];inline-size:100%;padding-inline:0}.ly-wrapper--breakout>*{grid-column:content;min-inline-size:0}.ly-wrapper--breakout>:where(.ly-lane--content,[data-ly-lane="content"]){grid-column:content}.ly-wrapper--breakout>:where(.ly-lane--feature,[data-ly-lane="feature"]){grid-column:feature}.ly-wrapper--breakout>:where(.ly-lane--full,[data-ly-lane="full"]){grid-column:full}}@layer ly.primitives{.ly-page{min-block-size:100svh}.ly-header,.ly-footer,.ly-main,.ly-section,.ly-surface{min-inline-size:0;min-block-size:0}.ly-header{min-block-size:var(--ly-header-height)}.ly-header--sticky{position:sticky;inset-block-start:0;z-index:var(--ly-z-header)}.ly-section{padding-block:var(--ly-section-padding-block)}.ly-section--compact{--ly-section-padding-block:var(--ly-space-7)}.ly-section--flush{--ly-section-padding-block:0}.ly-readable{max-inline-size:var(--ly-wrapper-prose)}.ly-stack{display:flex;flex-direction:column;gap:var(--ly-stack-gap)}.ly-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ly-cluster-gap)}.ly-center{inline-size:min(100%,var(--ly-center-max,var(--ly-wrapper-content)));margin-inline:auto}.ly-cover{display:flex;flex-direction:column;min-block-size:var(--ly-cover-min);padding-block:var(--ly-cover-padding,var(--ly-space-5))}.ly-cover>:where(.ly-cover__center,[data-ly-cover-center]){margin-block:auto}.ly-switcher{display:flex;flex-wrap:wrap;gap:var(--ly-gap)}.ly-switcher>*{flex-basis:calc((var(--ly-switcher-threshold) - 100%) * 999);flex-grow:1;min-inline-size:0}.ly-sidebar{display:flex;flex-wrap:wrap;gap:var(--ly-gap)}.ly-sidebar>:where(.ly-sidebar__side,[data-ly-sidebar="side"]){flex-basis:var(--ly-sidebar-size);flex-grow:1}.ly-sidebar>:where(.ly-sidebar__content,[data-ly-sidebar="content"]){flex-basis:0;flex-grow:999;min-inline-size:min(100%,var(--ly-sidebar-content-min))}.ly-grid{display:grid;grid-template-columns:repeat(var(--ly-grid-columns),minmax(0,1fr));gap:var(--ly-grid-gap)}.ly-grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-grid-min)),1fr))}.ly-grid>*,.ly-split>*,.ly-panes>*,.ly-media>*{min-inline-size:0}.ly-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap);align-items:var(--ly-split-align,center)}.ly-panes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap)}.ly-media{display:grid;grid-template-areas:"media" "content" "actions";grid-template-columns:minmax(0,1fr);gap:var(--ly-gap);align-items:var(--ly-media-align,start)}.ly-media>:where(.ly-media__asset,[data-ly-media="asset"]){grid-area:media}.ly-media>:where(.ly-media__content,[data-ly-media="content"]){grid-area:content}.ly-media>:where(.ly-media__actions,[data-ly-media="actions"]){grid-area:actions}.ly-reel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(100%,var(--ly-reel-item-min)),var(--ly-reel-item-max));gap:var(--ly-grid-gap);overflow-x:auto;overflow-inline:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline proximity}.ly-reel>*{min-inline-size:0;scroll-snap-align:start}.ly-frame{aspect-ratio:var(--ly-frame-ratio);overflow:hidden}.ly-frame>*{inline-size:100%;block-size:100%;object-fit:cover}.ly-scroll{min-block-size:0;max-block-size:var(--ly-scroll-max);overflow:auto;overscroll-behavior:contain}}@layer ly.primitives{@container (min-width:48rem){.ly-split{grid-template-columns:minmax(0,var(--ly-split-primary,1fr)) minmax(0,var(--ly-split-secondary,1fr))}.ly-panes--2{grid-template-columns:minmax(0,1fr) minmax(min(100%,var(--ly-pane-size)),0.7fr)}.ly-media{grid-template-areas:"media content" "media actions";grid-template-columns:minmax(min(100%,var(--ly-media-size)),auto) minmax(0,1fr)}}@container (min-width:64rem){.ly-panes--3{grid-template-columns:minmax(min(100%,var(--ly-pane-rail,14rem)),0.35fr) minmax(0,1fr) minmax(min(100%,var(--ly-pane-rail,14rem)),0.35fr)}}}@layer ly.recipes{:where(.ly-app-shell,[data-ly-recipe="app-shell"]),:where(.ly-dashboard,[data-ly-recipe="dashboard"]),:where(.ly-docs,[data-ly-recipe="docs"]),:where(.ly-list-detail,[data-ly-recipe="list-detail"]),:where(.ly-split-hero,[data-ly-recipe="split-hero"]),:where(.ly-gallery,[data-ly-recipe="gallery"]),:where(.ly-card-grid,[data-ly-recipe="card-grid"]){container-name:ly-recipe;container-type:inline-size;min-inline-size:0}:where(.ly-app-shell,[data-ly-recipe="app-shell"]),:where(.ly-dashboard,[data-ly-recipe="dashboard"]),:where(.ly-docs,[data-ly-recipe="docs"]),:where(.ly-list-detail,[data-ly-recipe="list-detail"]),:where(.ly-split-hero,[data-ly-recipe="split-hero"]){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap)}:where(.ly-app-shell,[data-ly-recipe="app-shell"]){min-block-size:100svh;grid-template-areas:"header" "sidebar" "main" "aside" "footer";grid-template-rows:auto auto minmax(0,1fr) auto auto}:where(.ly-dashboard,[data-ly-recipe="dashboard"]){grid-template-areas:"header" "nav" "main" "aside" "footer"}:where(.ly-docs,[data-ly-recipe="docs"]){grid-template-areas:"header" "nav" "main" "aside" "footer"}:where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-areas:"primary" "secondary" "actions"}:where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-areas:"content" "media" "actions";align-items:var(--ly-split-hero-align,center)}:where(.ly-gallery,[data-ly-recipe="gallery"]),:where(.ly-card-grid,[data-ly-recipe="card-grid"]){display:grid;gap:var(--ly-grid-gap)}:where(.ly-gallery,[data-ly-recipe="gallery"]){grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-gallery-min)),1fr))}:where(.ly-card-grid,[data-ly-recipe="card-grid"]){grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-card-grid-min)),1fr))}:where(.ly-gallery,[data-ly-recipe="gallery"])>*,:where(.ly-card-grid,[data-ly-recipe="card-grid"])>*{min-inline-size:0}:where(.ly-area--header,[data-ly-area="header"]){grid-area:header;min-inline-size:0}:where(.ly-area--nav,[data-ly-area="nav"]){grid-area:nav;min-inline-size:0}:where(.ly-area--main,[data-ly-area="main"]){grid-area:main;min-inline-size:0}:where(.ly-area--aside,[data-ly-area="aside"]){grid-area:aside;min-inline-size:0}:where(.ly-area--footer,[data-ly-area="footer"]){grid-area:footer;min-inline-size:0}:where(.ly-area--content,[data-ly-area="content"]){grid-area:content;min-inline-size:0}:where(.ly-area--media,[data-ly-area="media"]){grid-area:media;min-inline-size:0}:where(.ly-area--actions,[data-ly-area="actions"]){grid-area:actions;min-inline-size:0}:where(.ly-area--primary,[data-ly-area="primary"]){grid-area:primary;min-inline-size:0}:where(.ly-area--secondary,[data-ly-area="secondary"]){grid-area:secondary;min-inline-size:0}.ly-app-header{grid-area:header;min-inline-size:0}.ly-app-sidebar{grid-area:sidebar;min-inline-size:0}.ly-app-main{grid-area:main;min-inline-size:0}.ly-app-aside{grid-area:aside;min-inline-size:0}.ly-app-footer{grid-area:footer;min-inline-size:0}:where(.ly-app-shell,[data-ly-recipe="app-shell"])>:where(.ly-area--nav,[data-ly-area="nav"]){grid-area:sidebar}@container (min-width:48rem){:where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header" "sidebar main" "aside main" "footer footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr)}:where(.ly-dashboard,[data-ly-recipe="dashboard"]){grid-template-areas:"header header" "nav nav" "main aside" "footer footer";grid-template-columns:minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr)}:where(.ly-docs,[data-ly-recipe="docs"]){grid-template-areas:"header header" "nav main" "nav aside" "footer footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr)}:where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-areas:"primary secondary" "actions actions";grid-template-columns:minmax(min(100%,var(--ly-pane-size)),0.7fr) minmax(0,1fr)}:where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-areas:"content media" "actions media";grid-template-columns:minmax(0,var(--ly-split-primary,1fr)) minmax(0,var(--ly-split-secondary,1fr))}:where(.ly-gallery,[data-ly-recipe="gallery"]){--ly-gallery-min:14rem}:where(.ly-card-grid,[data-ly-recipe="card-grid"]){--ly-card-grid-min:18rem}}@container (min-width:64rem){:where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr)}:where(.ly-dashboard,[data-ly-recipe="dashboard"]){grid-template-areas:"nav header header" "nav main aside" "nav footer footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr)}:where(.ly-docs,[data-ly-recipe="docs"]){grid-template-areas:"nav header" "nav main" "nav aside" "nav footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr)}:where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-columns:minmax(min(100%,var(--ly-pane-size)),0.45fr) minmax(0,1fr)}:where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr)}:where(.ly-gallery,[data-ly-recipe="gallery"]){--ly-gallery-min:16rem}:where(.ly-card-grid,[data-ly-recipe="card-grid"]){--ly-card-grid-min:20rem}}}@layer ly.utilities{.ly-cols-1{--ly-grid-columns:1}.ly-cols-2{--ly-grid-columns:2}.ly-cols-3{--ly-grid-columns:3}.ly-cols-4{--ly-grid-columns:4}.ly-cols-5{--ly-grid-columns:5}.ly-cols-6{--ly-grid-columns:6}.ly-cols-7{--ly-grid-columns:7}.ly-cols-8{--ly-grid-columns:8}.ly-cols-9{--ly-grid-columns:9}.ly-cols-10{--ly-grid-columns:10}.ly-cols-11{--ly-grid-columns:11}.ly-cols-12{--ly-grid-columns:12}.ly-cols-16{--ly-grid-columns:16}.ly-span-1{grid-column:span 1}.ly-span-2{grid-column:span 2}.ly-span-3{grid-column:span 3}.ly-span-4{grid-column:span 4}.ly-span-5{grid-column:span 5}.ly-span-6{grid-column:span 6}.ly-span-7{grid-column:span 7}.ly-span-8{grid-column:span 8}.ly-span-9{grid-column:span 9}.ly-span-10{grid-column:span 10}.ly-span-11{grid-column:span 11}.ly-span-12{grid-column:span 12}.ly-span-13{grid-column:span 13}.ly-span-14{grid-column:span 14}.ly-span-15{grid-column:span 15}.ly-span-16{grid-column:span 16}.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-1{--ly-gap:var(--ly-space-1);--ly-grid-gap:var(--ly-space-1);--ly-stack-gap:var(--ly-space-1);--ly-cluster-gap:var(--ly-space-1)}.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-3{--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-3)}.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-5{--ly-gap:var(--ly-space-5);--ly-grid-gap:var(--ly-space-5);--ly-stack-gap:var(--ly-space-5);--ly-cluster-gap:var(--ly-space-5)}.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-7{--ly-gap:var(--ly-space-7);--ly-grid-gap:var(--ly-space-7);--ly-stack-gap:var(--ly-space-7);--ly-cluster-gap:var(--ly-space-7)}.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-9{--ly-gap:var(--ly-space-9);--ly-grid-gap:var(--ly-space-9);--ly-stack-gap:var(--ly-space-9);--ly-cluster-gap:var(--ly-space-9)}.ly-pad-0{padding:var(--ly-space-0)}.ly-pad-1{padding:var(--ly-space-1)}.ly-pad-2{padding:var(--ly-space-2)}.ly-pad-3{padding:var(--ly-space-3)}.ly-pad-4{padding:var(--ly-space-4)}.ly-pad-5{padding:var(--ly-space-5)}.ly-pad-6{padding:var(--ly-space-6)}.ly-pad-7{padding:var(--ly-space-7)}.ly-pad-8{padding:var(--ly-space-8)}.ly-pad-9{padding:var(--ly-space-9)}.ly-px-4{padding-inline:var(--ly-space-4)}.ly-px-6{padding-inline:var(--ly-space-6)}.ly-px-8{padding-inline:var(--ly-space-8)}.ly-py-4{padding-block:var(--ly-space-4)}.ly-py-6{padding-block:var(--ly-space-6)}.ly-py-8{padding-block:var(--ly-space-8)}.ly-mx-auto{margin-inline:auto}.ly-w-full{inline-size:100%}.ly-h-full{block-size:100%}.ly-min-h-screen{min-block-size:100svh}.ly-bleed{inline-size:100vw;margin-inline:calc(50% - 50vw)}.ly-overflow-auto{overflow:auto}.ly-overflow-hidden{overflow:hidden}.ly-items-start{align-items:flex-start}.ly-items-center{align-items:center}.ly-items-end{align-items:flex-end}.ly-items-stretch{align-items:stretch}.ly-justify-start{justify-content:flex-start}.ly-justify-center{justify-content:center}.ly-justify-end{justify-content:flex-end}.ly-justify-between{justify-content:space-between}.ly-frame-1x1{--ly-frame-ratio:1 / 1}.ly-frame-2x1{--ly-frame-ratio:2 / 1}.ly-frame-3x2{--ly-frame-ratio:3 / 2}.ly-frame-4x3{--ly-frame-ratio:4 / 3}.ly-frame-16x9{--ly-frame-ratio:16 / 9}.ly-frame-21x9{--ly-frame-ratio:21 / 9}.ly-hidden{display:none !important}.ly-show-md-up,.ly-show-lg-up{display:none !important}.ly-visually-hidden{position:absolute !important;inline-size:1px !important;block-size:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;clip-path:inset(50%) !important;white-space:nowrap !important}.ly-order-first{order:-1}.ly-order-normal{order:0}.ly-order-last{order:999}.ly-order-1{order:1}.ly-order-2{order:2}.ly-order-3{order:3}.ly-order-4{order:4}.ly-order-5{order:5}.ly-order-6{order:6}@container (min-width:48rem){.ly-md-cols-1{--ly-grid-columns:1}.ly-md-cols-2{--ly-grid-columns:2}.ly-md-cols-3{--ly-grid-columns:3}.ly-md-cols-4{--ly-grid-columns:4}.ly-md-cols-6{--ly-grid-columns:6}.ly-md-cols-8{--ly-grid-columns:8}.ly-md-cols-12{--ly-grid-columns:12}.ly-md-cols-16{--ly-grid-columns:16}.ly-show-md-up{display:revert !important}.ly-md-order-first{order:-1}.ly-md-order-normal{order:0}.ly-md-order-last{order:999}.ly-md-order-1{order:1}.ly-md-order-2{order:2}.ly-md-order-3{order:3}.ly-md-order-4{order:4}.ly-md-order-5{order:5}.ly-md-order-6{order:6}}@container (min-width:64rem){.ly-lg-cols-1{--ly-grid-columns:1}.ly-lg-cols-2{--ly-grid-columns:2}.ly-lg-cols-3{--ly-grid-columns:3}.ly-lg-cols-4{--ly-grid-columns:4}.ly-lg-cols-6{--ly-grid-columns:6}.ly-lg-cols-8{--ly-grid-columns:8}.ly-lg-cols-12{--ly-grid-columns:12}.ly-lg-cols-16{--ly-grid-columns:16}.ly-show-lg-up{display:revert !important}.ly-lg-order-first{order:-1}.ly-lg-order-normal{order:0}.ly-lg-order-last{order:999}.ly-lg-order-1{order:1}.ly-lg-order-2{order:2}.ly-lg-order-3{order:3}.ly-lg-order-4{order:4}.ly-lg-order-5{order:5}.ly-lg-order-6{order:6}}}@layer ly.personalities.minimal_saas{:where(.ly-root[data-ly-layout="minimal-saas"]){--ly-recipe-rail:15rem;--ly-recipe-aside:16rem;--ly-grid-columns:4;--ly-grid-min:16rem;--ly-personality-wrapper-max:88rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="minimal-saas"]) .ly-grid>:nth-child(4n + 1){grid-column:span 2}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="minimal-saas"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,15rem),0.24fr) minmax(0,1fr) minmax(min(100%,16rem),0.28fr)}}}@layer ly.personalities.bento{:where(.ly-root[data-ly-layout="bento"]){--ly-grid-columns:6;--ly-grid-min:12rem;--ly-card-grid-min:13rem;--ly-personality-wrapper-max:112rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="bento"]) .ly-grid>:nth-child(6n + 1){grid-column:span 2;grid-row:span 2}:where(.ly-root[data-ly-layout="bento"]):where(.ly-card-grid,[data-ly-recipe="card-grid"])>:nth-child(6n + 1){grid-column:span 2}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="bento"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header header" "sidebar main main" "aside main main" "footer footer footer";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(min(100%,14rem),0.3fr) minmax(0,1fr) minmax(0,1fr)}}}@layer ly.personalities.maximalist{:where(.ly-root[data-ly-layout="maximalist"]){--ly-grid-columns:12;--ly-grid-min:10rem;--ly-personality-wrapper-max:100%;--ly-card-grid-min:12rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="maximalist"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,18rem),0.3fr) minmax(0,1fr)}}@container (min-width:56rem){:where(.ly-root[data-ly-layout="maximalist"]) .ly-grid>:nth-child(7n + 1){grid-column:span 3;grid-row:span 2}:where(.ly-root[data-ly-layout="maximalist"]):where(.ly-gallery,[data-ly-recipe="gallery"])>:nth-child(5n + 1){grid-column:span 2;grid-row:span 2}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="maximalist"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header header header" "main main sidebar aside" "main main footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1.4fr) minmax(0,0.6fr) minmax(min(100%,15rem),0.32fr) minmax(min(100%,18rem),0.38fr)}}}@layer ly.personalities.bauhaus{:where(.ly-root[data-ly-layout="bauhaus"]){--ly-recipe-rail:14rem;--ly-recipe-aside:18rem;--ly-grid-columns:6;--ly-grid-min:13rem;--ly-personality-wrapper-max:96rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="bauhaus"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,14rem),0.3fr) minmax(0,1fr)}}@container (min-width:52rem){:where(.ly-root[data-ly-layout="bauhaus"]) .ly-grid>:nth-child(3n + 1){grid-column:span 2;grid-row:span 2}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="bauhaus"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header aside" "sidebar main main aside" "sidebar footer footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,14rem),0.24fr) minmax(0,0.7fr) minmax(0,1.3fr) minmax(min(100%,18rem),0.3fr)}}}@layer ly.personalities.tactile{:where(.ly-root[data-ly-layout="tactile"]){--ly-recipe-rail:17rem;--ly-recipe-aside:20rem;--ly-grid-columns:5;--ly-grid-min:15rem;--ly-personality-wrapper-max:82rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="tactile"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header" "sidebar main" "sidebar aside" "sidebar footer";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(min(100%,17rem),0.28fr) minmax(0,1fr)}:where(.ly-root[data-ly-layout="tactile"]) .ly-grid>:nth-child(5n + 2){grid-column:span 2}:where(.ly-root[data-ly-layout="tactile"]):where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-columns:minmax(min(100%,20rem),0.42fr) minmax(0,0.58fr)}}}@layer ly.personalities.neumorphism{:where(.ly-root[data-ly-layout="neumorphism"]){--ly-recipe-rail:17rem;--ly-recipe-aside:19rem;--ly-grid-columns:4;--ly-grid-min:17rem;--ly-personality-wrapper-max:84rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="neumorphism"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,17rem),0.3fr) minmax(0,1fr)}}@container (min-width:52rem){:where(.ly-root[data-ly-layout="neumorphism"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header sidebar" "main sidebar" "aside sidebar" "footer sidebar";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr) minmax(min(100%,17rem),0.3fr)}:where(.ly-root[data-ly-layout="neumorphism"]) .ly-grid>:nth-child(4n + 1){grid-column:span 2}:where(.ly-root[data-ly-layout="neumorphism"]):where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-columns:minmax(0,0.58fr) minmax(min(100%,19rem),0.42fr)}}}@layer ly.personalities.retrofuturism{:where(.ly-root[data-ly-layout="retrofuturism"]){--ly-recipe-rail:14rem;--ly-recipe-aside:17rem;--ly-grid-columns:6;--ly-grid-min:14rem;--ly-personality-wrapper-max:106rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="retrofuturism"]) .ly-grid>:nth-child(6n + 1){grid-column:span 2}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="retrofuturism"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header aside" "sidebar main aside" "sidebar footer aside";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,14rem),0.24fr) minmax(0,1fr) minmax(min(100%,17rem),0.3fr)}}}@layer ly.personalities.brutalism{:where(.ly-root[data-ly-layout="brutalism"]){--ly-recipe-rail:18rem;--ly-recipe-aside:16rem;--ly-grid-columns:6;--ly-grid-min:14rem;--ly-personality-wrapper-max:100rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="brutalism"]) .ly-grid>:nth-child(3n){grid-column:span 2}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="brutalism"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header sidebar" "main aside sidebar" "footer footer sidebar";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1.3fr) minmax(min(100%,16rem),0.7fr) minmax(min(100%,18rem),0.34fr)}}}@layer ly.personalities.cyberpunk{:where(.ly-root[data-ly-layout="cyberpunk"]){--ly-recipe-rail:13rem;--ly-recipe-aside:19rem;--ly-grid-columns:8;--ly-grid-min:12rem;--ly-personality-wrapper-max:112rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:44rem){:where(.ly-root[data-ly-layout="cyberpunk"]) .ly-grid>:nth-child(4n + 2){grid-column:span 3}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="cyberpunk"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header aside" "sidebar main aside" "sidebar footer aside";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,13rem),0.2fr) minmax(0,1fr) minmax(min(100%,19rem),0.32fr)}}}@layer ly.personalities.y2k{:where(.ly-root[data-ly-layout="y2k"]){--ly-recipe-rail:16rem;--ly-recipe-aside:18rem;--ly-grid-columns:5;--ly-grid-min:13rem;--ly-personality-wrapper-max:90rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="y2k"]) .ly-grid>:nth-child(5n + 1){grid-column:span 3}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="y2k"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header sidebar" "aside main sidebar" "footer footer sidebar";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,18rem),0.34fr) minmax(0,1fr) minmax(min(100%,16rem),0.28fr)}}}@layer ly.personalities.retro_glass{:where(.ly-root[data-ly-layout="retro-glass"]){--ly-recipe-rail:18rem;--ly-recipe-aside:20rem;--ly-grid-columns:8;--ly-grid-min:15rem;--ly-personality-wrapper-max:104rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="retro-glass"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,18rem),0.3fr) minmax(0,1fr)}}@container (min-width:56rem){:where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid>:nth-child(4n){grid-column:span 2;grid-row:span 2}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="retro-glass"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header sidebar" "main main sidebar" "aside footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr) minmax(min(100%,18rem),0.32fr)}}}@layer ly.personalities.f_pattern{:where(.ly-root[data-ly-layout="f-pattern"]){--ly-recipe-rail:16rem;--ly-recipe-aside:18rem;--ly-grid-columns:6;--ly-grid-min:14rem;--ly-personality-wrapper-max:92rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="f-pattern"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,16rem),0.3fr) minmax(0,1fr)}}@container (min-width:56rem){:where(.ly-root[data-ly-layout="f-pattern"]) .ly-grid>:nth-child(3n + 1){grid-column:span 2}:where(.ly-root[data-ly-layout="f-pattern"]):where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-columns:minmax(0,1.35fr) minmax(0,0.65fr)}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="f-pattern"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header" "sidebar main aside" "sidebar footer aside";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,16rem),0.26fr) minmax(0,1.35fr) minmax(min(100%,18rem),0.65fr)}}}@layer ly.personalities.z_pattern{:where(.ly-root[data-ly-layout="z-pattern"]){--ly-recipe-rail:17rem;--ly-recipe-aside:19rem;--ly-grid-columns:8;--ly-grid-min:14rem;--ly-personality-wrapper-max:108rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="z-pattern"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,17rem),0.3fr) minmax(0,1fr)}}@container (min-width:60rem){:where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid>:nth-child(4n + 2){grid-column:span 2;align-self:end}:where(.ly-root[data-ly-layout="z-pattern"]):where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-columns:minmax(0,1.5fr) minmax(0,0.5fr)}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="z-pattern"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header sidebar" "main aside sidebar" "footer aside sidebar";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1.45fr) minmax(min(100%,19rem),0.55fr) minmax(min(100%,17rem),0.3fr)}}}@layer ly.personalities.split_screen{:where(.ly-root[data-ly-layout="split-screen"]){--ly-grid-columns:2;--ly-grid-min:20rem;--ly-personality-wrapper-max:100%;--ly-split-primary:1fr;--ly-split-secondary:1fr;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="split-screen"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header" "main sidebar" "aside sidebar" "footer footer";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}:where(.ly-root[data-ly-layout="split-screen"]):where( .ly-split,.ly-split-hero,[data-ly-recipe="split-hero"],.ly-list-detail,[data-ly-recipe="list-detail"] ){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}}@layer ly.personalities.mondrian{:where(.ly-root[data-ly-layout="mondrian"]){--ly-recipe-rail:13rem;--ly-recipe-aside:18rem;--ly-grid-columns:10;--ly-grid-min:11rem;--ly-personality-wrapper-max:112rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="mondrian"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,13rem),0.3fr) minmax(0,1fr)}}@container (min-width:52rem){:where(.ly-root[data-ly-layout="mondrian"]) .ly-grid>:nth-child(5n + 1){grid-column:span 2;grid-row:span 2}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="mondrian"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header" "sidebar main aside" "footer footer aside";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,13rem),0.22fr) minmax(0,1.45fr) minmax(min(100%,18rem),0.55fr)}}}@layer ly.personalities.synthwave{:where(.ly-root[data-ly-layout="synthwave"]){--ly-recipe-rail:16rem;--ly-recipe-aside:20rem;--ly-grid-columns:12;--ly-grid-min:14rem;--ly-reel-item-max:34rem;--ly-personality-wrapper-max:112rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="synthwave"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,16rem),0.3fr) minmax(0,1fr)}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="synthwave"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header header" "sidebar main aside" "footer footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,16rem),0.28fr) minmax(0,1fr) minmax(min(100%,20rem),0.34fr)}:where(.ly-root[data-ly-layout="synthwave"]) .ly-grid>:nth-child(4n + 1){grid-column:span 3}:where(.ly-root[data-ly-layout="synthwave"]) .ly-reel{grid-auto-columns:minmax(min(100%,20rem),var(--ly-reel-item-max))}}} diff --git a/dist/legacy.css b/dist/legacy.css index 02434c2..4dadc0b 100644 --- a/dist/legacy.css +++ b/dist/legacy.css @@ -158,8 +158,14 @@ min-inline-size: 0; } - /* Named areas rearrange the shell without changing its mobile DOM or focus order. */ - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) .ly-grid > :nth-child(4n + 1) { + grid-column: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -172,10 +178,6 @@ minmax(0, 1fr) minmax(min(100%, 16rem), 0.28fr); } - - :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) .ly-grid > :nth-child(4n + 1) { - grid-column: span 2; - } } /* V1 personality aliases for bento; generated from the canonical v2 source. */ @@ -190,7 +192,21 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) .ly-grid > :nth-child(6n + 1) { + grid-column: span 2; + grid-row: span 2; + } + + :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) + :where(.ly-card-grid, [data-ly-recipe="card-grid"]) + > :nth-child(6n + 1) { + grid-column: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -204,17 +220,6 @@ minmax(0, 1fr) minmax(0, 1fr); } - - :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) .ly-grid > :nth-child(6n + 1) { - grid-column: span 2; - grid-row: span 2; - } - - :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) - :where(.ly-card-grid, [data-ly-recipe="card-grid"]) - > :nth-child(6n + 1) { - grid-column: span 2; - } } /* V1 personality aliases for maximalist; generated from the canonical v2 source. */ @@ -229,14 +234,29 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 56rem) { + @container (min-width: 56rem) { + :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-grid > :nth-child(7n + 1) { + grid-column: span 3; + grid-row: span 2; + } + + :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) + :where(.ly-gallery, [data-ly-recipe="gallery"]) + > :nth-child(5n + 1) { + grid-column: span 2; + grid-row: span 2; + } + } + + /* The four-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -250,18 +270,6 @@ minmax(min(100%, 15rem), 0.32fr) minmax(min(100%, 18rem), 0.38fr); } - - :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-grid > :nth-child(7n + 1) { - grid-column: span 3; - grid-row: span 2; - } - - :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) - :where(.ly-gallery, [data-ly-recipe="gallery"]) - > :nth-child(5n + 1) { - grid-column: span 2; - grid-row: span 2; - } } /* V1 personality aliases for bauhaus; generated from the canonical v2 source. */ @@ -278,14 +286,22 @@ } /* Cap the fallback rail until the wider personality template is eligible. */ - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 14rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 52rem) { + @container (min-width: 52rem) { + :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) .ly-grid > :nth-child(3n + 1) { + grid-column: span 2; + grid-row: span 2; + } + } + + /* The four-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -299,11 +315,6 @@ minmax(0, 1.3fr) minmax(min(100%, 18rem), 0.3fr); } - - :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) .ly-grid > :nth-child(3n + 1) { - grid-column: span 2; - grid-row: span 2; - } } /* V1 personality aliases for tactile; generated from the canonical v2 source. */ @@ -319,7 +330,7 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -354,14 +365,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 52rem) { + @container (min-width: 52rem) { :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -396,7 +407,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) .ly-grid > :nth-child(6n + 1) { + grid-column: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -409,10 +427,6 @@ minmax(0, 1fr) minmax(min(100%, 17rem), 0.3fr); } - - :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) .ly-grid > :nth-child(6n + 1) { - grid-column: span 2; - } } /* V1 personality aliases for brutalism; generated from the canonical v2 source. */ @@ -428,7 +442,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-grid > :nth-child(3n) { + grid-column: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -441,10 +462,6 @@ minmax(min(100%, 16rem), 0.7fr) minmax(min(100%, 18rem), 0.34fr); } - - :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-grid > :nth-child(3n) { - grid-column: span 2; - } } /* V1 personality aliases for cyberpunk; generated from the canonical v2 source. */ @@ -460,7 +477,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 44rem) { + @container (min-width: 44rem) { + :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) .ly-grid > :nth-child(4n + 2) { + grid-column: span 3; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -473,10 +497,6 @@ minmax(0, 1fr) minmax(min(100%, 19rem), 0.32fr); } - - :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) .ly-grid > :nth-child(4n + 2) { - grid-column: span 3; - } } /* V1 personality aliases for y2k; generated from the canonical v2 source. */ @@ -492,7 +512,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k) .ly-grid > :nth-child(5n + 1) { + grid-column: span 3; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -505,10 +532,6 @@ minmax(0, 1fr) minmax(min(100%, 16rem), 0.28fr); } - - :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k) .ly-grid > :nth-child(5n + 1) { - grid-column: span 3; - } } /* V1 personality aliases for retro-glass; generated from the canonical v2 source. */ @@ -524,14 +547,22 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 56rem) { + @container (min-width: 56rem) { + :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) .ly-grid > :nth-child(4n) { + grid-column: span 2; + grid-row: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -544,11 +575,6 @@ minmax(0, 0.75fr) minmax(min(100%, 18rem), 0.32fr); } - - :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) .ly-grid > :nth-child(4n) { - grid-column: span 2; - grid-row: span 2; - } } /* V1 personality aliases for f-pattern; generated from the canonical v2 source. */ @@ -564,14 +590,26 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 56rem) { + @container (min-width: 56rem) { + :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-grid > :nth-child(3n + 1) { + grid-column: span 2; + } + + :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) + :where(.ly-split-hero, [data-ly-recipe="split-hero"]) { + grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -584,15 +622,6 @@ minmax(0, 1.35fr) minmax(min(100%, 18rem), 0.65fr); } - - :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-grid > :nth-child(3n + 1) { - grid-column: span 2; - } - - :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) - :where(.ly-split-hero, [data-ly-recipe="split-hero"]) { - grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); - } } /* V1 personality aliases for z-pattern; generated from the canonical v2 source. */ @@ -608,14 +637,27 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 60rem) { + @container (min-width: 60rem) { + :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-grid > :nth-child(4n + 2) { + grid-column: span 2; + align-self: end; + } + + :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) + :where(.ly-split-hero, [data-ly-recipe="split-hero"]) { + grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -628,16 +670,6 @@ minmax(min(100%, 19rem), 0.55fr) minmax(min(100%, 17rem), 0.3fr); } - - :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-grid > :nth-child(4n + 2) { - grid-column: span 2; - align-self: end; - } - - :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) - :where(.ly-split-hero, [data-ly-recipe="split-hero"]) { - grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); - } } /* V1 personality aliases for split-screen; generated from the canonical v2 source. */ @@ -653,7 +685,7 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-layout="split-screen"], .ly-root[layout-style="split-screen"], .ly-root.ly-layout-split-screen, .ly-root.ly-style-split-screen) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -690,14 +722,22 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 13rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 52rem) { + @container (min-width: 52rem) { + :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-grid > :nth-child(5n + 1) { + grid-column: span 2; + grid-row: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -710,11 +750,6 @@ minmax(0, 1.45fr) minmax(min(100%, 18rem), 0.55fr); } - - :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-grid > :nth-child(5n + 1) { - grid-column: span 2; - grid-row: span 2; - } } /* V1 personality aliases for synthwave; generated from the canonical v2 source. */ @@ -731,14 +766,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 64rem) { + @container (min-width: 64rem) { :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: diff --git a/dist/personalities/bauhaus.css b/dist/personalities/bauhaus.css index 4f6bc26..c08ebb2 100644 --- a/dist/personalities/bauhaus.css +++ b/dist/personalities/bauhaus.css @@ -16,14 +16,22 @@ } /* Cap the fallback rail until the wider personality template is eligible. */ - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="bauhaus"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 14rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 52rem) { + @container (min-width: 52rem) { + :where(.ly-root[data-ly-layout="bauhaus"]) .ly-grid > :nth-child(3n + 1) { + grid-column: span 2; + grid-row: span 2; + } + } + + /* The four-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="bauhaus"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -37,10 +45,5 @@ minmax(0, 1.3fr) minmax(min(100%, 18rem), 0.3fr); } - - :where(.ly-root[data-ly-layout="bauhaus"]) .ly-grid > :nth-child(3n + 1) { - grid-column: span 2; - grid-row: span 2; - } } } diff --git a/dist/personalities/bento.css b/dist/personalities/bento.css index e380e94..29121d6 100644 --- a/dist/personalities/bento.css +++ b/dist/personalities/bento.css @@ -14,7 +14,21 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-ly-layout="bento"]) .ly-grid > :nth-child(6n + 1) { + grid-column: span 2; + grid-row: span 2; + } + + :where(.ly-root[data-ly-layout="bento"]) + :where(.ly-card-grid, [data-ly-recipe="card-grid"]) + > :nth-child(6n + 1) { + grid-column: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="bento"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -28,16 +42,5 @@ minmax(0, 1fr) minmax(0, 1fr); } - - :where(.ly-root[data-ly-layout="bento"]) .ly-grid > :nth-child(6n + 1) { - grid-column: span 2; - grid-row: span 2; - } - - :where(.ly-root[data-ly-layout="bento"]) - :where(.ly-card-grid, [data-ly-recipe="card-grid"]) - > :nth-child(6n + 1) { - grid-column: span 2; - } } } diff --git a/dist/personalities/brutalism.css b/dist/personalities/brutalism.css index 5bc179a..f88a9e1 100644 --- a/dist/personalities/brutalism.css +++ b/dist/personalities/brutalism.css @@ -15,7 +15,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-ly-layout="brutalism"]) .ly-grid > :nth-child(3n) { + grid-column: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="brutalism"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -28,9 +35,5 @@ minmax(min(100%, 16rem), 0.7fr) minmax(min(100%, 18rem), 0.34fr); } - - :where(.ly-root[data-ly-layout="brutalism"]) .ly-grid > :nth-child(3n) { - grid-column: span 2; - } } } diff --git a/dist/personalities/cyberpunk.css b/dist/personalities/cyberpunk.css index ce070d7..3b715eb 100644 --- a/dist/personalities/cyberpunk.css +++ b/dist/personalities/cyberpunk.css @@ -15,7 +15,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 44rem) { + @container (min-width: 44rem) { + :where(.ly-root[data-ly-layout="cyberpunk"]) .ly-grid > :nth-child(4n + 2) { + grid-column: span 3; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="cyberpunk"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -28,9 +35,5 @@ minmax(0, 1fr) minmax(min(100%, 19rem), 0.32fr); } - - :where(.ly-root[data-ly-layout="cyberpunk"]) .ly-grid > :nth-child(4n + 2) { - grid-column: span 3; - } } } diff --git a/dist/personalities/f-pattern.css b/dist/personalities/f-pattern.css index dad7164..de31747 100644 --- a/dist/personalities/f-pattern.css +++ b/dist/personalities/f-pattern.css @@ -15,14 +15,26 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="f-pattern"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 56rem) { + @container (min-width: 56rem) { + :where(.ly-root[data-ly-layout="f-pattern"]) .ly-grid > :nth-child(3n + 1) { + grid-column: span 2; + } + + :where(.ly-root[data-ly-layout="f-pattern"]) + :where(.ly-split-hero, [data-ly-recipe="split-hero"]) { + grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="f-pattern"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -35,14 +47,5 @@ minmax(0, 1.35fr) minmax(min(100%, 18rem), 0.65fr); } - - :where(.ly-root[data-ly-layout="f-pattern"]) .ly-grid > :nth-child(3n + 1) { - grid-column: span 2; - } - - :where(.ly-root[data-ly-layout="f-pattern"]) - :where(.ly-split-hero, [data-ly-recipe="split-hero"]) { - grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); - } } } diff --git a/dist/personalities/maximalist.css b/dist/personalities/maximalist.css index b9fb5ba..a0be822 100644 --- a/dist/personalities/maximalist.css +++ b/dist/personalities/maximalist.css @@ -14,14 +14,29 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="maximalist"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 56rem) { + @container (min-width: 56rem) { + :where(.ly-root[data-ly-layout="maximalist"]) .ly-grid > :nth-child(7n + 1) { + grid-column: span 3; + grid-row: span 2; + } + + :where(.ly-root[data-ly-layout="maximalist"]) + :where(.ly-gallery, [data-ly-recipe="gallery"]) + > :nth-child(5n + 1) { + grid-column: span 2; + grid-row: span 2; + } + } + + /* The four-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="maximalist"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -35,17 +50,5 @@ minmax(min(100%, 15rem), 0.32fr) minmax(min(100%, 18rem), 0.38fr); } - - :where(.ly-root[data-ly-layout="maximalist"]) .ly-grid > :nth-child(7n + 1) { - grid-column: span 3; - grid-row: span 2; - } - - :where(.ly-root[data-ly-layout="maximalist"]) - :where(.ly-gallery, [data-ly-recipe="gallery"]) - > :nth-child(5n + 1) { - grid-column: span 2; - grid-row: span 2; - } } } diff --git a/dist/personalities/minimal-saas.css b/dist/personalities/minimal-saas.css index 84390f6..828f82e 100644 --- a/dist/personalities/minimal-saas.css +++ b/dist/personalities/minimal-saas.css @@ -15,8 +15,14 @@ min-inline-size: 0; } - /* Named areas rearrange the shell without changing its mobile DOM or focus order. */ - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-ly-layout="minimal-saas"]) .ly-grid > :nth-child(4n + 1) { + grid-column: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="minimal-saas"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -29,9 +35,5 @@ minmax(0, 1fr) minmax(min(100%, 16rem), 0.28fr); } - - :where(.ly-root[data-ly-layout="minimal-saas"]) .ly-grid > :nth-child(4n + 1) { - grid-column: span 2; - } } } diff --git a/dist/personalities/mondrian.css b/dist/personalities/mondrian.css index 092ff9e..9e5c662 100644 --- a/dist/personalities/mondrian.css +++ b/dist/personalities/mondrian.css @@ -15,14 +15,22 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="mondrian"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 13rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 52rem) { + @container (min-width: 52rem) { + :where(.ly-root[data-ly-layout="mondrian"]) .ly-grid > :nth-child(5n + 1) { + grid-column: span 2; + grid-row: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="mondrian"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -35,10 +43,5 @@ minmax(0, 1.45fr) minmax(min(100%, 18rem), 0.55fr); } - - :where(.ly-root[data-ly-layout="mondrian"]) .ly-grid > :nth-child(5n + 1) { - grid-column: span 2; - grid-row: span 2; - } } } diff --git a/dist/personalities/neumorphism.css b/dist/personalities/neumorphism.css index 6b7be35..556c31d 100644 --- a/dist/personalities/neumorphism.css +++ b/dist/personalities/neumorphism.css @@ -15,14 +15,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="neumorphism"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 52rem) { + @container (min-width: 52rem) { :where(.ly-root[data-ly-layout="neumorphism"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: diff --git a/dist/personalities/retro-glass.css b/dist/personalities/retro-glass.css index f201124..326d683 100644 --- a/dist/personalities/retro-glass.css +++ b/dist/personalities/retro-glass.css @@ -15,14 +15,22 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="retro-glass"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 56rem) { + @container (min-width: 56rem) { + :where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid > :nth-child(4n) { + grid-column: span 2; + grid-row: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="retro-glass"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -35,10 +43,5 @@ minmax(0, 0.75fr) minmax(min(100%, 18rem), 0.32fr); } - - :where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid > :nth-child(4n) { - grid-column: span 2; - grid-row: span 2; - } } } diff --git a/dist/personalities/retrofuturism.css b/dist/personalities/retrofuturism.css index 1e757b4..886ef09 100644 --- a/dist/personalities/retrofuturism.css +++ b/dist/personalities/retrofuturism.css @@ -15,7 +15,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-ly-layout="retrofuturism"]) .ly-grid > :nth-child(6n + 1) { + grid-column: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="retrofuturism"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -28,9 +35,5 @@ minmax(0, 1fr) minmax(min(100%, 17rem), 0.3fr); } - - :where(.ly-root[data-ly-layout="retrofuturism"]) .ly-grid > :nth-child(6n + 1) { - grid-column: span 2; - } } } diff --git a/dist/personalities/split-screen.css b/dist/personalities/split-screen.css index 94a9630..8ba8e06 100644 --- a/dist/personalities/split-screen.css +++ b/dist/personalities/split-screen.css @@ -15,7 +15,7 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="split-screen"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: diff --git a/dist/personalities/synthwave.css b/dist/personalities/synthwave.css index b977449..063f77d 100644 --- a/dist/personalities/synthwave.css +++ b/dist/personalities/synthwave.css @@ -16,14 +16,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="synthwave"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 64rem) { + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="synthwave"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: diff --git a/dist/personalities/tactile.css b/dist/personalities/tactile.css index 520e8e7..a5f8120 100644 --- a/dist/personalities/tactile.css +++ b/dist/personalities/tactile.css @@ -15,7 +15,7 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="tactile"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: diff --git a/dist/personalities/y2k.css b/dist/personalities/y2k.css index 267f240..b696f4a 100644 --- a/dist/personalities/y2k.css +++ b/dist/personalities/y2k.css @@ -15,7 +15,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-ly-layout="y2k"]) .ly-grid > :nth-child(5n + 1) { + grid-column: span 3; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="y2k"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -28,9 +35,5 @@ minmax(0, 1fr) minmax(min(100%, 16rem), 0.28fr); } - - :where(.ly-root[data-ly-layout="y2k"]) .ly-grid > :nth-child(5n + 1) { - grid-column: span 3; - } } } diff --git a/dist/personalities/z-pattern.css b/dist/personalities/z-pattern.css index 46d9a08..1960a48 100644 --- a/dist/personalities/z-pattern.css +++ b/dist/personalities/z-pattern.css @@ -15,14 +15,27 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="z-pattern"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 60rem) { + @container (min-width: 60rem) { + :where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid > :nth-child(4n + 2) { + grid-column: span 2; + align-self: end; + } + + :where(.ly-root[data-ly-layout="z-pattern"]) + :where(.ly-split-hero, [data-ly-recipe="split-hero"]) { + grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="z-pattern"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -35,15 +48,5 @@ minmax(min(100%, 19rem), 0.55fr) minmax(min(100%, 17rem), 0.3fr); } - - :where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid > :nth-child(4n + 2) { - grid-column: span 2; - align-self: end; - } - - :where(.ly-root[data-ly-layout="z-pattern"]) - :where(.ly-split-hero, [data-ly-recipe="split-hero"]) { - grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); - } } } diff --git a/dist/recipes.css b/dist/recipes.css index 062c95f..08eef6c 100644 --- a/dist/recipes.css +++ b/dist/recipes.css @@ -239,8 +239,7 @@ minmax(min(100%, var(--ly-recipe-aside)), 0.35fr); } - :where(.ly-dashboard, [data-ly-recipe="dashboard"]), - :where(.ly-docs, [data-ly-recipe="docs"]) { + :where(.ly-dashboard, [data-ly-recipe="dashboard"]) { grid-template-areas: "nav header header" "nav main aside" @@ -251,6 +250,15 @@ minmax(min(100%, var(--ly-recipe-aside)), 0.35fr); } + :where(.ly-docs, [data-ly-recipe="docs"]) { + grid-template-areas: + "nav header" + "nav main" + "nav aside" + "nav footer"; + grid-template-columns: minmax(min(100%, var(--ly-recipe-rail)), auto) minmax(0, 1fr); + } + :where(.ly-list-detail, [data-ly-recipe="list-detail"]) { grid-template-columns: minmax(min(100%, var(--ly-pane-size)), 0.45fr) minmax(0, 1fr); } diff --git a/docs/wiki/Getting-Started.md b/docs/wiki/Getting-Started.md index 784a67c..6755fb7 100644 --- a/docs/wiki/Getting-Started.md +++ b/docs/wiki/Getting-Started.md @@ -7,7 +7,7 @@ Layout Style CSS 2.0 provides structural layout without prescribing theme or com Node.js 20 or newer is required for development scripts. ```bash -npm install layout-style-css@2.1.0 +npm install layout-style-css@2.1.1 ``` ## Import diff --git a/docs/wiki/Home.md b/docs/wiki/Home.md index df094de..8b84682 100644 --- a/docs/wiki/Home.md +++ b/docs/wiki/Home.md @@ -1,6 +1,6 @@ # Layout Style CSS Wiki -Version 2.1.0 is a container-first, dependency-free layout library. It ships semantic wrappers, composition primitives, seven recipes, sixteen layout personalities, focused exports, a v2-only compatibility bundle, and refreshed ecosystem fixtures for UI Style Kit CSS 2.1 and Interactive Surface CSS 1.5. +Version 2.1.1 is a container-first, dependency-free layout library. It ships semantic wrappers, composition primitives, seven recipes, sixteen layout personalities, focused exports, a v2-only compatibility bundle, and refreshed ecosystem fixtures for UI Style Kit CSS 2.1 and Interactive Surface CSS 1.5. ## Start Here @@ -28,6 +28,6 @@ The package has no runtime or peer dependencies. `ui-style-kit-css@2.1.0` and `i - Node.js 20 or newer for package development - Current evergreen Chromium, Firefox, and WebKit -- Mobile-first DOM order with core thresholds at `48rem` and `64rem`, plus tested personality-specific overrides +- Mobile-first DOM order with core thresholds at `48rem` and `64rem`, nearest-container personality overrides, and `64rem` feasibility gates for three- and four-track application shells The deprecated UI structural bridge remains available for existing UI-prefixed layout aliases, but canonical 2.1 examples use UI Style Kit visual CSS, the UI token bridge, Interactive Surface `state-core.css`, and Layout core. diff --git a/docs/wiki/Installation-And-CDN.md b/docs/wiki/Installation-And-CDN.md index 1cb4ad8..705d747 100644 --- a/docs/wiki/Installation-And-CDN.md +++ b/docs/wiki/Installation-And-CDN.md @@ -5,7 +5,7 @@ Layout Style CSS 2.0 is dependency-free and has no peer dependency contract. Nod ## npm ```bash -npm install layout-style-css@2.1.0 +npm install layout-style-css@2.1.1 ``` ## Focused Exports @@ -57,8 +57,8 @@ The first import block is deprecated compatibility for legacy UI-prefixed struct Layout only: ```html - - + + ``` For optional companions, preserve the same order as the package imports: UI Style Kit visual CSS, UI Style Kit `interactive-surface-theme.css`, Interactive Surface 1.5.0 `state-core.css`, then Layout core. Load `layout-style-css/integrations/ui-style-kit.css` only for deprecated structural aliases. diff --git a/docs/wiki/Layout-Recipes.md b/docs/wiki/Layout-Recipes.md index d87d8e4..9a4ebe8 100644 --- a/docs/wiki/Layout-Recipes.md +++ b/docs/wiki/Layout-Recipes.md @@ -36,7 +36,7 @@ Place regions in the order that makes sense on a narrow screen. The recipe uses ## Content And Media Recipes -`docs` creates a documentation shell. `list-detail` arranges primary, secondary, and action regions. `split-hero` arranges content, media, and actions. `gallery` and `card-grid` create responsive repeated-item grids. +`docs` creates a documentation shell. At `64rem`, its navigation spans the left column while `header`, `main`, `aside`, and `footer` remain in source order and stack in the right column; Dashboard retains its three-column wide shell. `list-detail` arranges primary, secondary, and action regions. `split-hero` arranges content, media, and actions. `gallery` and `card-grid` create responsive repeated-item grids. ```html
diff --git a/docs/wiki/Layout-Styles.md b/docs/wiki/Layout-Styles.md index 1f13354..0fc2071 100644 --- a/docs/wiki/Layout-Styles.md +++ b/docs/wiki/Layout-Styles.md @@ -27,7 +27,7 @@ V2 calls spatial styles “personalities” and selects them with the canonical | Mosaic | `maximalist` | Staggered editorial spans and broad measure. | | Equal split | `split-screen` | Two equally weighted primary regions. | -Every personality changes at least two structural characteristics, such as area placement, shell direction, grid/span rhythm, wrapper measure, or responsive threshold. Personalities never set UI paint or change DOM order. +Every personality changes at least two structural characteristics, such as area placement, shell direction, grid/span rhythm, wrapper measure, or responsive threshold. Enhancements query the nearest inline-size container: grid rhythms retain their authored thresholds, safe two-track application shells retain their authored thresholds, and three- or four-track application shells wait until the local allocation reaches `64rem`. Personalities never set UI paint or change DOM order. The v1 `data-layout`, `layout-style`, `.ly-layout-*`, and `.ly-style-*` hooks are available only through `layout-style-css/legacy.css`. New code must use `data-ly-layout`. diff --git a/docs/wiki/Migrating-To-2.0.md b/docs/wiki/Migrating-To-2.0.md index 1a89c7e..cbbe918 100644 --- a/docs/wiki/Migrating-To-2.0.md +++ b/docs/wiki/Migrating-To-2.0.md @@ -13,7 +13,7 @@ Version 2.0 rebuilds Layout Style CSS as a container-first, dependency-free stru Install companions explicitly only when the application uses them: ```bash -npm install layout-style-css@2.1.0 +npm install layout-style-css@2.1.1 npm install ui-style-kit-css@2.1.0 interactive-surface-css@1.5.0 ``` diff --git a/docs/wiki/Release-And-Publishing.md b/docs/wiki/Release-And-Publishing.md index 1c17fe2..f5110a0 100644 --- a/docs/wiki/Release-And-Publishing.md +++ b/docs/wiki/Release-And-Publishing.md @@ -1,12 +1,12 @@ # Release And Publishing -This checklist prepares `layout-style-css@2.1.0`. Publishing, tagging, pushing, and creating a GitHub release require separate explicit approval. +This checklist prepares `layout-style-css@2.1.1`. Publishing, tagging, pushing, and creating a GitHub release require separate explicit approval. ## Version Contract -- `package.json` and `package-lock.json` identify `2.1.0`. +- `package.json` and `package-lock.json` identify `2.1.1`. - Node.js 20 and 22 pass standalone CI. -- `CHANGELOG.md` contains the dated 2.1.0 release entry. +- `CHANGELOG.md` contains the dated 2.1.1 release entry. - README, migration guide, wiki, demo, exports, and tarball describe the same v2 API. - No peer or runtime dependencies are present. @@ -39,22 +39,22 @@ git diff --check ## Tag And Version Validation -The publish workflow checks out the selected tag and fails unless it equals `v${package.version}`. For this release the only valid tag is `v2.1.0`. +The publish workflow checks out the selected tag and fails unless it equals `v${package.version}`. For this release the only valid tag is `v2.1.1`. After separate approval, an operator may check registry availability: ```bash -npm view layout-style-css@2.1.0 version --json +npm view layout-style-css@2.1.1 version --json ``` The eventual release sequence is: ```bash -git tag v2.1.0 -git push origin v2.1.0 +git tag v2.1.1 +git push origin v2.1.1 ``` -Publishing the `v2.1.0` GitHub release triggers the npm workflow. A separately approved recovery run may use `release_tag` set to `v2.1.0`. +Publishing the `v2.1.1` GitHub release triggers the npm workflow. A separately approved recovery run may use `release_tag` set to `v2.1.1`. ## Workflow Safety diff --git a/docs/wiki/UI-Style-Kit-Compatibility.md b/docs/wiki/UI-Style-Kit-Compatibility.md index eeef7aa..50e8e18 100644 --- a/docs/wiki/UI-Style-Kit-Compatibility.md +++ b/docs/wiki/UI-Style-Kit-Compatibility.md @@ -42,7 +42,7 @@ The removed v1 `.ly-surface--raised` selector is not restored by `legacy.css`; i | Library | Verified fixture | Consumer requirement | | --- | --- | --- | -| Layout Style CSS | `2.1.0` | Required for this API | +| Layout Style CSS | `2.1.1` | Required for this API | | UI Style Kit CSS | `2.1.0` visual CSS and manifest | Optional released fixture | | Interactive Surface CSS | `1.5.0` `state-core.css` | Optional released fixture | diff --git a/package-lock.json b/package-lock.json index 67b828b..aec3fb9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "layout-style-css", - "version": "2.1.0", + "version": "2.1.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "layout-style-css", - "version": "2.1.0", + "version": "2.1.1", "license": "MIT", "devDependencies": { "@playwright/test": "1.61.1", @@ -581,9 +581,9 @@ } }, "node_modules/fast-uri": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.3.tgz", - "integrity": "sha512-i70LwGWUduXqzicKXWshooq+sWL1K3WUU5rKZNG/0i3a1OSoX3HqhH5WbWwTmqWfor4urUakGPiRQcleRZTwOg==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.4.tgz", + "integrity": "sha512-8JnbkQ4juDyvYs4mgFGQqg4yCYtFDtUtmp2QIQq11ZZe5CFQ5wcqm1rqDgAh/QdMySuBnPzMUiJUNZG5N/AiQw==", "dev": true, "funding": [ { @@ -1068,9 +1068,9 @@ "license": "MIT" }, "node_modules/nanoid": { - "version": "3.3.15", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz", - "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==", + "version": "3.3.16", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz", + "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==", "dev": true, "funding": [ { @@ -1181,9 +1181,9 @@ } }, "node_modules/postcss": { - "version": "8.5.16", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.16.tgz", - "integrity": "sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==", + "version": "8.5.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.23.tgz", + "integrity": "sha512-g50586zr4bZmwFiTlflMu8E0bDTb5I5gertgwAKmsdUlTQIhZtunzUlD1WSzwcVWPoAVpsrA6vlfCD7oXvRwgg==", "dev": true, "funding": [ { @@ -1201,7 +1201,7 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.12", + "nanoid": "^3.3.16", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, diff --git a/package.json b/package.json index f982067..cdfe2d2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "layout-style-css", - "version": "2.1.0", + "version": "2.1.1", "description": "Dependency-free structural CSS for responsive wrappers, composition primitives, recipes, utilities, and layout personalities.", "type": "module", "license": "MIT", diff --git a/styles/personalities/bauhaus.css b/styles/personalities/bauhaus.css index 4f6bc26..c08ebb2 100644 --- a/styles/personalities/bauhaus.css +++ b/styles/personalities/bauhaus.css @@ -16,14 +16,22 @@ } /* Cap the fallback rail until the wider personality template is eligible. */ - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="bauhaus"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 14rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 52rem) { + @container (min-width: 52rem) { + :where(.ly-root[data-ly-layout="bauhaus"]) .ly-grid > :nth-child(3n + 1) { + grid-column: span 2; + grid-row: span 2; + } + } + + /* The four-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="bauhaus"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -37,10 +45,5 @@ minmax(0, 1.3fr) minmax(min(100%, 18rem), 0.3fr); } - - :where(.ly-root[data-ly-layout="bauhaus"]) .ly-grid > :nth-child(3n + 1) { - grid-column: span 2; - grid-row: span 2; - } } } diff --git a/styles/personalities/bento.css b/styles/personalities/bento.css index e380e94..29121d6 100644 --- a/styles/personalities/bento.css +++ b/styles/personalities/bento.css @@ -14,7 +14,21 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-ly-layout="bento"]) .ly-grid > :nth-child(6n + 1) { + grid-column: span 2; + grid-row: span 2; + } + + :where(.ly-root[data-ly-layout="bento"]) + :where(.ly-card-grid, [data-ly-recipe="card-grid"]) + > :nth-child(6n + 1) { + grid-column: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="bento"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -28,16 +42,5 @@ minmax(0, 1fr) minmax(0, 1fr); } - - :where(.ly-root[data-ly-layout="bento"]) .ly-grid > :nth-child(6n + 1) { - grid-column: span 2; - grid-row: span 2; - } - - :where(.ly-root[data-ly-layout="bento"]) - :where(.ly-card-grid, [data-ly-recipe="card-grid"]) - > :nth-child(6n + 1) { - grid-column: span 2; - } } } diff --git a/styles/personalities/brutalism.css b/styles/personalities/brutalism.css index 5bc179a..f88a9e1 100644 --- a/styles/personalities/brutalism.css +++ b/styles/personalities/brutalism.css @@ -15,7 +15,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-ly-layout="brutalism"]) .ly-grid > :nth-child(3n) { + grid-column: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="brutalism"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -28,9 +35,5 @@ minmax(min(100%, 16rem), 0.7fr) minmax(min(100%, 18rem), 0.34fr); } - - :where(.ly-root[data-ly-layout="brutalism"]) .ly-grid > :nth-child(3n) { - grid-column: span 2; - } } } diff --git a/styles/personalities/cyberpunk.css b/styles/personalities/cyberpunk.css index ce070d7..3b715eb 100644 --- a/styles/personalities/cyberpunk.css +++ b/styles/personalities/cyberpunk.css @@ -15,7 +15,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 44rem) { + @container (min-width: 44rem) { + :where(.ly-root[data-ly-layout="cyberpunk"]) .ly-grid > :nth-child(4n + 2) { + grid-column: span 3; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="cyberpunk"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -28,9 +35,5 @@ minmax(0, 1fr) minmax(min(100%, 19rem), 0.32fr); } - - :where(.ly-root[data-ly-layout="cyberpunk"]) .ly-grid > :nth-child(4n + 2) { - grid-column: span 3; - } } } diff --git a/styles/personalities/f-pattern.css b/styles/personalities/f-pattern.css index dad7164..de31747 100644 --- a/styles/personalities/f-pattern.css +++ b/styles/personalities/f-pattern.css @@ -15,14 +15,26 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="f-pattern"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 56rem) { + @container (min-width: 56rem) { + :where(.ly-root[data-ly-layout="f-pattern"]) .ly-grid > :nth-child(3n + 1) { + grid-column: span 2; + } + + :where(.ly-root[data-ly-layout="f-pattern"]) + :where(.ly-split-hero, [data-ly-recipe="split-hero"]) { + grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="f-pattern"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -35,14 +47,5 @@ minmax(0, 1.35fr) minmax(min(100%, 18rem), 0.65fr); } - - :where(.ly-root[data-ly-layout="f-pattern"]) .ly-grid > :nth-child(3n + 1) { - grid-column: span 2; - } - - :where(.ly-root[data-ly-layout="f-pattern"]) - :where(.ly-split-hero, [data-ly-recipe="split-hero"]) { - grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); - } } } diff --git a/styles/personalities/maximalist.css b/styles/personalities/maximalist.css index b9fb5ba..a0be822 100644 --- a/styles/personalities/maximalist.css +++ b/styles/personalities/maximalist.css @@ -14,14 +14,29 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="maximalist"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 56rem) { + @container (min-width: 56rem) { + :where(.ly-root[data-ly-layout="maximalist"]) .ly-grid > :nth-child(7n + 1) { + grid-column: span 3; + grid-row: span 2; + } + + :where(.ly-root[data-ly-layout="maximalist"]) + :where(.ly-gallery, [data-ly-recipe="gallery"]) + > :nth-child(5n + 1) { + grid-column: span 2; + grid-row: span 2; + } + } + + /* The four-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="maximalist"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -35,17 +50,5 @@ minmax(min(100%, 15rem), 0.32fr) minmax(min(100%, 18rem), 0.38fr); } - - :where(.ly-root[data-ly-layout="maximalist"]) .ly-grid > :nth-child(7n + 1) { - grid-column: span 3; - grid-row: span 2; - } - - :where(.ly-root[data-ly-layout="maximalist"]) - :where(.ly-gallery, [data-ly-recipe="gallery"]) - > :nth-child(5n + 1) { - grid-column: span 2; - grid-row: span 2; - } } } diff --git a/styles/personalities/minimal-saas.css b/styles/personalities/minimal-saas.css index 84390f6..828f82e 100644 --- a/styles/personalities/minimal-saas.css +++ b/styles/personalities/minimal-saas.css @@ -15,8 +15,14 @@ min-inline-size: 0; } - /* Named areas rearrange the shell without changing its mobile DOM or focus order. */ - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-ly-layout="minimal-saas"]) .ly-grid > :nth-child(4n + 1) { + grid-column: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="minimal-saas"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -29,9 +35,5 @@ minmax(0, 1fr) minmax(min(100%, 16rem), 0.28fr); } - - :where(.ly-root[data-ly-layout="minimal-saas"]) .ly-grid > :nth-child(4n + 1) { - grid-column: span 2; - } } } diff --git a/styles/personalities/mondrian.css b/styles/personalities/mondrian.css index 092ff9e..9e5c662 100644 --- a/styles/personalities/mondrian.css +++ b/styles/personalities/mondrian.css @@ -15,14 +15,22 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="mondrian"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 13rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 52rem) { + @container (min-width: 52rem) { + :where(.ly-root[data-ly-layout="mondrian"]) .ly-grid > :nth-child(5n + 1) { + grid-column: span 2; + grid-row: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="mondrian"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -35,10 +43,5 @@ minmax(0, 1.45fr) minmax(min(100%, 18rem), 0.55fr); } - - :where(.ly-root[data-ly-layout="mondrian"]) .ly-grid > :nth-child(5n + 1) { - grid-column: span 2; - grid-row: span 2; - } } } diff --git a/styles/personalities/neumorphism.css b/styles/personalities/neumorphism.css index 6b7be35..556c31d 100644 --- a/styles/personalities/neumorphism.css +++ b/styles/personalities/neumorphism.css @@ -15,14 +15,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="neumorphism"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 52rem) { + @container (min-width: 52rem) { :where(.ly-root[data-ly-layout="neumorphism"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: diff --git a/styles/personalities/retro-glass.css b/styles/personalities/retro-glass.css index f201124..326d683 100644 --- a/styles/personalities/retro-glass.css +++ b/styles/personalities/retro-glass.css @@ -15,14 +15,22 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="retro-glass"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 56rem) { + @container (min-width: 56rem) { + :where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid > :nth-child(4n) { + grid-column: span 2; + grid-row: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="retro-glass"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -35,10 +43,5 @@ minmax(0, 0.75fr) minmax(min(100%, 18rem), 0.32fr); } - - :where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid > :nth-child(4n) { - grid-column: span 2; - grid-row: span 2; - } } } diff --git a/styles/personalities/retrofuturism.css b/styles/personalities/retrofuturism.css index 1e757b4..886ef09 100644 --- a/styles/personalities/retrofuturism.css +++ b/styles/personalities/retrofuturism.css @@ -15,7 +15,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-ly-layout="retrofuturism"]) .ly-grid > :nth-child(6n + 1) { + grid-column: span 2; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="retrofuturism"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -28,9 +35,5 @@ minmax(0, 1fr) minmax(min(100%, 17rem), 0.3fr); } - - :where(.ly-root[data-ly-layout="retrofuturism"]) .ly-grid > :nth-child(6n + 1) { - grid-column: span 2; - } } } diff --git a/styles/personalities/split-screen.css b/styles/personalities/split-screen.css index 94a9630..8ba8e06 100644 --- a/styles/personalities/split-screen.css +++ b/styles/personalities/split-screen.css @@ -15,7 +15,7 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="split-screen"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: diff --git a/styles/personalities/synthwave.css b/styles/personalities/synthwave.css index b977449..063f77d 100644 --- a/styles/personalities/synthwave.css +++ b/styles/personalities/synthwave.css @@ -16,14 +16,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="synthwave"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 64rem) { + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="synthwave"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: diff --git a/styles/personalities/tactile.css b/styles/personalities/tactile.css index 520e8e7..a5f8120 100644 --- a/styles/personalities/tactile.css +++ b/styles/personalities/tactile.css @@ -15,7 +15,7 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="tactile"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: diff --git a/styles/personalities/y2k.css b/styles/personalities/y2k.css index 267f240..b696f4a 100644 --- a/styles/personalities/y2k.css +++ b/styles/personalities/y2k.css @@ -15,7 +15,14 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { + :where(.ly-root[data-ly-layout="y2k"]) .ly-grid > :nth-child(5n + 1) { + grid-column: span 3; + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="y2k"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -28,9 +35,5 @@ minmax(0, 1fr) minmax(min(100%, 16rem), 0.28fr); } - - :where(.ly-root[data-ly-layout="y2k"]) .ly-grid > :nth-child(5n + 1) { - grid-column: span 3; - } } } diff --git a/styles/personalities/z-pattern.css b/styles/personalities/z-pattern.css index 46d9a08..1960a48 100644 --- a/styles/personalities/z-pattern.css +++ b/styles/personalities/z-pattern.css @@ -15,14 +15,27 @@ min-inline-size: 0; } - @container ly-personality (min-width: 48rem) { + @container (min-width: 48rem) { :where(.ly-root[data-ly-layout="z-pattern"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr); } } - @container ly-personality (min-width: 60rem) { + @container (min-width: 60rem) { + :where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid > :nth-child(4n + 2) { + grid-column: span 2; + align-self: end; + } + + :where(.ly-root[data-ly-layout="z-pattern"]) + :where(.ly-split-hero, [data-ly-recipe="split-hero"]) { + grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); + } + } + + /* The three-track shell waits for a locally feasible allocation. */ + @container (min-width: 64rem) { :where(.ly-root[data-ly-layout="z-pattern"]) :where(.ly-app-shell, [data-ly-recipe="app-shell"]) { grid-template-areas: @@ -35,15 +48,5 @@ minmax(min(100%, 19rem), 0.55fr) minmax(min(100%, 17rem), 0.3fr); } - - :where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid > :nth-child(4n + 2) { - grid-column: span 2; - align-self: end; - } - - :where(.ly-root[data-ly-layout="z-pattern"]) - :where(.ly-split-hero, [data-ly-recipe="split-hero"]) { - grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); - } } } diff --git a/styles/recipes.css b/styles/recipes.css index 062c95f..08eef6c 100644 --- a/styles/recipes.css +++ b/styles/recipes.css @@ -239,8 +239,7 @@ minmax(min(100%, var(--ly-recipe-aside)), 0.35fr); } - :where(.ly-dashboard, [data-ly-recipe="dashboard"]), - :where(.ly-docs, [data-ly-recipe="docs"]) { + :where(.ly-dashboard, [data-ly-recipe="dashboard"]) { grid-template-areas: "nav header header" "nav main aside" @@ -251,6 +250,15 @@ minmax(min(100%, var(--ly-recipe-aside)), 0.35fr); } + :where(.ly-docs, [data-ly-recipe="docs"]) { + grid-template-areas: + "nav header" + "nav main" + "nav aside" + "nav footer"; + grid-template-columns: minmax(min(100%, var(--ly-recipe-rail)), auto) minmax(0, 1fr); + } + :where(.ly-list-detail, [data-ly-recipe="list-detail"]) { grid-template-columns: minmax(min(100%, var(--ly-pane-size)), 0.45fr) minmax(0, 1fr); } diff --git a/test/demo-smoke.test.mjs b/test/demo-smoke.test.mjs index ff23ba0..8ee4719 100644 --- a/test/demo-smoke.test.mjs +++ b/test/demo-smoke.test.mjs @@ -137,21 +137,21 @@ const personalityShellAreas = { "split-screen": '"header header" "main sidebar" "aside sidebar" "footer footer"' }; const personalityShellThresholds = { - "minimal-saas": 48, - bauhaus: 52, + "minimal-saas": 64, + bauhaus: 64, tactile: 48, - cyberpunk: 44, - "f-pattern": 56, - brutalism: 48, + cyberpunk: 64, + "f-pattern": 64, + brutalism: 64, neumorphism: 52, - y2k: 48, - "retro-glass": 56, - "z-pattern": 60, - retrofuturism: 48, - mondrian: 52, + y2k: 64, + "retro-glass": 64, + "z-pattern": 64, + retrofuturism: 64, + mondrian: 64, synthwave: 64, - bento: 48, - maximalist: 56, + bento: 64, + maximalist: 64, "split-screen": 48 }; const mobileAppShellAreas = '"header" "sidebar" "main" "aside" "footer"'; @@ -171,7 +171,7 @@ const coreRecipeAreas = { docs: { mobile: '"header" "nav" "main" "aside" "footer"', medium: '"header header" "nav main" "nav aside" "footer footer"', - large: '"nav header header" "nav main aside" "nav footer footer"' + large: '"nav header" "nav main" "nav aside" "nav footer"' }, "list-detail": { mobile: '"primary" "secondary" "actions"', @@ -1262,6 +1262,113 @@ async function verifyNestedThresholdsAndFocus(page, baseUrl) { assert(scroll.scrollHeight > scroll.clientHeight, "List detail must exercise bounded scrolling"); } +async function verifyRootWideLocalPersonalityThresholds(page, baseUrl) { + await page.setViewportSize({ width: 1440, height: 1000 }); + await page.goto( + `${baseUrl}?ecosystem=layout-only&wrapper=full&container=auto&recipe=app-shell&personality=minimal-saas`, + { waitUntil: "networkidle" } + ); + await waitForReady(page); + + const localWidths = ["47rem", "49rem", "63rem", "65rem"]; + + for (const localWidth of localWidths) { + const snapshots = await page.evaluate( + ({ personalityNames, width }) => { + const personalityControl = document.querySelector("#personalitySelect"); + const wrapper = document.querySelector("#previewWrapper"); + + /* + The root intentionally remains wide while the semantic wrapper supplies + the nearest queryable allocation for the nested app shell. + */ + wrapper.style.setProperty("--ly-wrapper-max", width); + + return personalityNames.map((personality) => { + personalityControl.value = personality; + personalityControl.dispatchEvent(new Event("change", { bubbles: true })); + + const recipeRoot = document.querySelector("#recipePreview"); + const previewRoot = document.querySelector("#previewRoot"); + const frame = document.querySelector("#previewFrame"); + const style = getComputedStyle(recipeRoot); + const childWidths = [...recipeRoot.children].map( + (element) => element.getBoundingClientRect().width + ); + + return { + personality, + rootWidth: previewRoot.getBoundingClientRect().width, + localWidth: wrapper.getBoundingClientRect().width, + areas: style.gridTemplateAreas, + sequence: [...recipeRoot.children].map((element) => element.dataset.demoSequence), + childWidths, + overflow: { + recipe: recipeRoot.scrollWidth - recipeRoot.clientWidth, + wrapper: wrapper.scrollWidth - wrapper.clientWidth, + previewRoot: previewRoot.scrollWidth - previewRoot.clientWidth, + frame: frame.scrollWidth - frame.clientWidth + } + }; + }); + }, + { personalityNames: personalities, width: localWidth } + ); + + for (const snapshot of snapshots) { + const context = `${snapshot.personality} with wide root and ${localWidth} local container`; + + assert( + snapshot.rootWidth > 65 * 16, + `${context} fixture must keep the personality root above the widest threshold` + ); + assert( + Math.abs(snapshot.localWidth - Number.parseInt(localWidth, 10) * 16) <= 2, + `${context} fixture must expose the authored local inline size` + ); + assert.equal( + snapshot.areas, + expectedAppShellAreas(snapshot.personality, snapshot.localWidth), + `${context} must respond to the nearest inline-size container` + ); + assert.deepEqual( + snapshot.sequence, + recipeSequence["app-shell"], + `${context} must preserve authoritative DOM order` + ); + assert( + snapshot.childWidths.every((width) => width > 0), + `${context} must not collapse an app-shell region to zero width` + ); + + for (const [scope, overflow] of Object.entries(snapshot.overflow)) { + assert(overflow <= 4, `${context} ${scope} overflowed internally by ${overflow}px`); + } + } + + for (const personality of personalities) { + await selectDemoOption(page, "personalitySelect", personality); + await page.locator("#recipePreview [data-demo-focus]").first().focus(); + const tabOrder = []; + + for (let index = 0; index < recipeSequence["app-shell"].length; index += 1) { + tabOrder.push(await page.evaluate(() => document.activeElement?.dataset.demoFocus)); + await page.keyboard.press("Tab"); + } + + assert.deepEqual( + tabOrder, + recipeSequence["app-shell"], + `${personality} at ${localWidth} must preserve authoritative keyboard order` + ); + } + } + + await page.locator("#previewWrapper").evaluate((wrapper) => { + wrapper.style.removeProperty("--ly-wrapper-max"); + }); +} + assertStaticContract(); const server = createStaticServer(); @@ -1341,6 +1448,7 @@ try { await verifyPersonalityRecipeSelectorParity(page, baseUrl); await verifyWrapperMeasureMatrix(page, baseUrl); await verifyNestedThresholdsAndFocus(page, baseUrl); + await verifyRootWideLocalPersonalityThresholds(page, baseUrl); assert.deepEqual(consoleErrors, [], `Demo should not log console errors: ${consoleErrors.join(" | ")}`); assert.deepEqual(pageErrors, [], `Demo should not throw page errors: ${pageErrors.join(" | ")}`); } finally { diff --git a/test/layout-css-contract.test.mjs b/test/layout-css-contract.test.mjs index e5bbf23..c46a389 100644 --- a/test/layout-css-contract.test.mjs +++ b/test/layout-css-contract.test.mjs @@ -284,6 +284,12 @@ const personalityContracts = { } }; +const safeTwoTrackPersonalityShellThresholds = new Map([ + ["tactile", "48rem"], + ["neumorphism", "52rem"], + ["split-screen", "48rem"] +]); + const task2WrapperVariants = [ [".ly-wrapper--compact", "--ly-wrapper-max: 40rem;"], [".ly-wrapper--prose", "--ly-wrapper-max: 68ch;"], @@ -414,6 +420,42 @@ function normalizeCssWhitespace(css) { return css.replace(/\s+/g, " ").trim(); } +function extractContainerBodies(css, condition) { + const bodies = []; + const marker = `@container ${condition}`; + let searchIndex = 0; + + while (searchIndex < css.length) { + const atRuleStart = css.indexOf(marker, searchIndex); + + if (atRuleStart === -1) { + break; + } + + const bodyStart = css.indexOf("{", atRuleStart + marker.length); + assert.notEqual(bodyStart, -1, `Incomplete container query ${marker}`); + + let depth = 1; + let bodyEnd = bodyStart + 1; + + while (bodyEnd < css.length && depth > 0) { + if (css[bodyEnd] === "{") { + depth += 1; + } else if (css[bodyEnd] === "}") { + depth -= 1; + } + + bodyEnd += 1; + } + + assert.equal(depth, 0, `Unbalanced container query ${marker}`); + bodies.push(css.slice(bodyStart + 1, bodyEnd - 1)); + searchIndex = bodyEnd; + } + + return bodies; +} + function extractStyleRuleSelectors(css) { const selectors = []; let buffer = ""; @@ -610,8 +652,8 @@ const uiKitFixturePackage = JSON.parse( ); const v2ContractFailures = []; -if (packageJson.version !== "2.1.0") { - v2ContractFailures.push(`package version is ${packageJson.version}, expected 2.1.0`); +if (packageJson.version !== "2.1.1") { + v2ContractFailures.push(`package version is ${packageJson.version}, expected 2.1.1`); } if (packageJson.engines?.node !== ">=20") { v2ContractFailures.push(`Node engine is ${packageJson.engines?.node ?? "missing"}, expected >=20`); @@ -762,6 +804,21 @@ assert( "Recipes must enhance at 48rem and 64rem container thresholds" ); assert(recipes.includes("grid-template-areas:"), "Recipes must use named grid areas"); +assert( + extractContainerBodies(recipes, "(min-width: 64rem)").some((body) => + normalizeCssWhitespace(body).includes( + normalizeCssWhitespace( + `:where(.ly-docs, [data-ly-recipe="docs"]) { + grid-template-areas: + "nav header" + "nav main" + "nav aside" + "nav footer";` + ) + ) + ), + "Docs must use its distinct two-column navigation-and-content shell at 64rem" +); assert( !/(?:^|[;{}\n\r])\s*order\s*:/.test(recipes), "Built-in recipes must preserve DOM order and never declare CSS order" @@ -877,10 +934,12 @@ for (const [name, contract] of Object.entries(personalityContracts)) { `${path} must establish the personality containment scope` ); assert( - normalizedCss.includes( - normalizeCssWhitespace(`@container ly-personality (min-width: ${contract.threshold})`) - ), - `${path} must enhance at its ${contract.threshold} personality threshold` + !css.includes("@container ly-personality"), + `${path} personality enhancements must query the nearest inline-size container` + ); + assert( + normalizedCss.includes(normalizeCssWhitespace(`@container (min-width: ${contract.threshold})`)), + `${path} must preserve its authored ${contract.threshold} enhancement rhythm` ); assert( normalizedCss.includes( @@ -908,6 +967,15 @@ for (const [name, contract] of Object.entries(personalityContracts)) { normalizedCss.includes(normalizeCssWhitespace(`grid-template-areas: ${contract.areas};`)), `${path} must implement its ${contract.family} named-area signature` ); + const shellThreshold = safeTwoTrackPersonalityShellThresholds.get(name) ?? "64rem"; + assert( + extractContainerBodies(css, `(min-width: ${shellThreshold})`).some((body) => + normalizeCssWhitespace(body).includes( + normalizeCssWhitespace(`grid-template-areas: ${contract.areas};`) + ) + ), + `${path} must activate its app-shell signature at the safe ${shellThreshold} local threshold` + ); assert( normalizedCss.includes( normalizeCssWhitespace(`grid-template-rows: ${expectedPersonalityRows(contract.areas)};`) @@ -1211,7 +1279,7 @@ assert(!minified.includes("\n\n"), "Minified bundle should not preserve expanded assert(!minified.includes("@import"), "Minified bundle must be layout-only and flattened"); assert.equal(packageJson.name, "layout-style-css"); -assert.equal(packageJson.version, "2.1.0"); +assert.equal(packageJson.version, "2.1.1"); assert.equal(packageJson.license, "MIT"); assert.equal(packageJson.private, undefined); assert.match(packageJson.description, /dependency-free/i); @@ -1230,8 +1298,8 @@ assert.equal(packageJson.devDependencies["ui-style-kit-css"], uiKitFixtureSpec); assert.equal(packageJson.devDependencies["interactive-surface-css"], "1.5.0"); assert(packageJson.devDependencies.stylelint, "Stylelint must be installed for CSS linting"); assert(packageJson.devDependencies["@playwright/test"], "Playwright must be installed for demo smoke checks"); -assert.equal(packageLock.version, "2.1.0"); -assert.equal(lockRoot.version, "2.1.0"); +assert.equal(packageLock.version, "2.1.1"); +assert.equal(lockRoot.version, "2.1.1"); assert.equal(lockRoot.engines.node, ">=20"); assert.equal(lockRoot.dependencies, undefined); assert.equal(lockRoot.peerDependencies, undefined); @@ -1516,8 +1584,8 @@ for (const htmlBlock of extractFencedBlocks(readme, "html")) { } assert( - readme.includes("https://unpkg.com/layout-style-css@2.1.0/dist/layout-style-css.min.css") && - readme.includes("https://cdn.jsdelivr.net/npm/layout-style-css@2.1.0/dist/layout-style-css.min.css"), + readme.includes("https://unpkg.com/layout-style-css@2.1.1/dist/layout-style-css.min.css") && + readme.includes("https://cdn.jsdelivr.net/npm/layout-style-css@2.1.1/dist/layout-style-css.min.css"), "README CDN examples should pin the v2.1 package" ); @@ -1547,13 +1615,13 @@ assert(changelog.includes("wiki"), "CHANGELOG.md should mention the new wiki doc const wikiHome = readFileSync(join(root, "docs/wiki/Home.md"), "utf8"); assert(wikiHome.includes("# Layout Style CSS Wiki"), "Wiki home should use a clear product heading"); -assert(wikiHome.includes("Version 2.1.0"), "Wiki home should identify the documented release"); +assert(wikiHome.includes("Version 2.1.1"), "Wiki home should identify the documented release"); const releaseChecklist = readFileSync(join(root, "docs/wiki/Release-And-Publishing.md"), "utf8"); assert( - releaseChecklist.includes("layout-style-css@2.1.0") && - releaseChecklist.includes("git tag v2.1.0") && - releaseChecklist.includes("release_tag` set to `v2.1.0`"), - "Release checklist should identify the 2.1.0 package, tag, and workflow recovery path" + releaseChecklist.includes("layout-style-css@2.1.1") && + releaseChecklist.includes("git tag v2.1.1") && + releaseChecklist.includes("release_tag` set to `v2.1.1`"), + "Release checklist should identify the 2.1.1 package, tag, and workflow recovery path" ); for (const file of requiredDocumentationFiles.filter((file) => file.startsWith("docs/wiki/"))) { const content = readFileSync(join(root, file), "utf8"); @@ -1576,7 +1644,7 @@ assert( assert( npmPublishWorkflow.includes("workflow_dispatch:") && npmPublishWorkflow.includes("release_tag:") && - npmPublishWorkflow.includes('description: "Release tag to publish, for example v2.1.0"'), + npmPublishWorkflow.includes('description: "Release tag to publish, for example v2.1.1"'), "npm publish workflow should expose a manual recovery dispatch with an explicit release tag" ); assert( diff --git a/test/pages-artifact.test.mjs b/test/pages-artifact.test.mjs index 7fbf68c..8031102 100644 --- a/test/pages-artifact.test.mjs +++ b/test/pages-artifact.test.mjs @@ -69,14 +69,14 @@ assert( "Pages demo should preserve the source demo canonical URL" ); assert( - index.includes('"version": "2.1.0"') && index.includes("layout-style-css 2.1 Interactive Layout Lab"), + index.includes('"version": "2.1.1"') && index.includes("layout-style-css 2.1 Interactive Layout Lab"), "Pages metadata should identify the v2.1 interactive layout lab" ); assert( manifest.description.includes("Container-first layout-style-css 2.1"), "Pages manifest should describe the v2.1 container-first demo" ); -assert(sitemap.includes("2026-07-20"), "Pages sitemap should carry current v2 metadata"); +assert(sitemap.includes("2026-07-27"), "Pages sitemap should carry current v2 metadata"); const pagesWorkflow = readFileSync(pagesWorkflowPath, "utf8"); const pagesPreflightStep = pagesWorkflow.indexOf("- name: Verify Pages configuration"); diff --git a/test/release-docs-contract.test.mjs b/test/release-docs-contract.test.mjs index 43cd7dd..26f15d8 100644 --- a/test/release-docs-contract.test.mjs +++ b/test/release-docs-contract.test.mjs @@ -169,7 +169,7 @@ assert( changelog.includes("## [2.0.0] - 2026-07-19") && changelog.includes("Breaking"), "Changelog must identify the dated 2.0.0 breaking release" ); -assert(release.includes("layout-style-css@2.1.0") && release.includes("v2.1.0")); +assert(release.includes("layout-style-css@2.1.1") && release.includes("v2.1.1")); assert(support.includes("`2.x` | Yes"), "Support table must identify the supported v2 line"); assert(packageJson.files.includes("docs/wiki"), "The package must ship the migration guide with the wiki"); @@ -221,7 +221,7 @@ for (const browser of ["chromium", "firefox", "webkit"]) { } const publishWorkflow = read(".github", "workflows", "npm-publish.yml"); -assert(publishWorkflow.includes("for example v2.1.0")); +assert(publishWorkflow.includes("for example v2.1.1")); assert(publishWorkflow.includes("playwright install --with-deps chromium firefox webkit")); assert(publishWorkflow.includes("npm run release:verify")); assert(