layout-style-css 3.0.0 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.md +166 -0
  2. package/README.md +15 -4
  3. package/dist/foundation.css +16 -2
  4. package/dist/layout-style-css.css +26 -13
  5. package/dist/layout-style-css.min.css +1 -1
  6. package/dist/personalities/bento.css +1 -0
  7. package/dist/personalities/neumorphism.css +1 -0
  8. package/dist/personalities/split-screen.css +1 -0
  9. package/dist/personalities/tactile.css +1 -0
  10. package/dist/primitives.css +2 -2
  11. package/dist/recipes.css +3 -1
  12. package/dist/wrappers.css +1 -8
  13. package/docs/wiki/Contributing.md +38 -0
  14. package/docs/wiki/Demo-And-GitHub-Pages.md +44 -0
  15. package/docs/wiki/Getting-Started.md +63 -0
  16. package/docs/wiki/Home.md +27 -0
  17. package/docs/wiki/Installation-And-CDN.md +77 -0
  18. package/docs/wiki/Layout-Primitives.md +66 -0
  19. package/docs/wiki/Layout-Recipes.md +60 -0
  20. package/docs/wiki/Layout-Styles.md +69 -0
  21. package/docs/wiki/Migrating-To-2.0.md +186 -0
  22. package/docs/wiki/Migrating-To-3.0.md +205 -0
  23. package/docs/wiki/Release-And-Publishing.md +62 -0
  24. package/docs/wiki/Security-And-Support.md +32 -0
  25. package/docs/wiki/UI-Style-Kit-Compatibility.md +40 -0
  26. package/docs/wiki/_Sidebar.md +12 -0
  27. package/manifest.json +99 -0
  28. package/package.json +25 -8
  29. package/personalities.json +147 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,166 @@
1
+ # Changelog
2
+
3
+ All notable changes to `layout-style-css` are documented here. This project follows semantic versioning.
4
+
5
+ ## [3.0.2] - 2026-08-25
6
+
7
+ ### Fixed
8
+
9
+ - Matched App Shell row tracks to base, medium, wide, and personality-specific area topologies so primary content receives flexible height while headers and footers remain intrinsic.
10
+ - Separated compact section spacing from normal section spacing and preserved the compact-smaller-than-normal invariant across regular, short, and shallow viewport heights.
11
+ - Connected the documented page-padding and Wrapper-gutter tokens to rendered Wrapper padding while retaining safe-area handling.
12
+
13
+ ### Tests
14
+
15
+ - Added static and rendered regression coverage for App Shell row counts, flexible workspace allocation, compact section ordering, public gutter overrides, generated CSS parity, package metadata, and Pages artifacts.
16
+
17
+ ## [3.0.1] - 2026-08-09
18
+
19
+ ### Changed
20
+
21
+ - Corrected the GitHub Pages homepage used by npm, kept readable package defaults alongside explicit minified CDN metadata, and included the maintained packaged documentation.
22
+ - Synchronized the package, lockfile, public manifest, demo metadata, Pages sitemap, release guidance, and current ecosystem contract while preserving the complete 13-export API and existing CSS behavior.
23
+
24
+ ### Security
25
+
26
+ - Retained the audited dependency overrides and secure release tooling used by the protected publication workflow without adding runtime or peer dependencies.
27
+
28
+ ### Tests
29
+
30
+ - Added version-sensitive package, manifest, layout, documentation, demo, Pages, release, packed-export, clean-install, and ecosystem checks for the patch candidate.
31
+
32
+ ## [3.0.0] - 2026-07-29
33
+
34
+ ### Breaking
35
+
36
+ - Rebuilt the package as a clean-break intrinsic responsive system with attribute-only recipes and one shared container-query engine.
37
+ - Removed `legacy.css`, the deprecated UI Style Kit structural bridge, v1/v2 aliases, recipe class aliases, extensionless export aliases, responsive/order utility families, and the scrollbar-unsafe `.ly-bleed` helper.
38
+ - Reduced the npm tarball to the public generated CSS modules and personality profiles; package metadata, README, and license remain npm-standard package files.
39
+
40
+ ### Added
41
+
42
+ - Added `foundation.css` for shared reset, tokens, named `ly-scope` containment, dynamic viewport sizing, and the `44rem`/`30rem` height tiers.
43
+ - Made `.ly-root`, every wrapper, and every recipe root a named responsive scope so recipes work without wrappers and respond to the nearest wrapper when nested.
44
+ - Added `data-ly-responsive="manual"` for application-owned topology with a safe stacked fallback.
45
+ - Added device, independent width/height, automatic/manual, dimension, and active-topology controls to the demo.
46
+
47
+ ### Changed
48
+
49
+ - Replaced breakpoint-heavy primitives with intrinsic Grid and Flexbox behavior and standardized shrink safety.
50
+ - Moved Split Hero, List Detail, Docs, App Shell, and Dashboard topology to the shared `42rem`, `44rem`, `48rem`, `52rem`, and `72rem` query tiers.
51
+ - Converted all sixteen personalities into breakpoint-free token/topology profiles with at least two distinguishing spatial characteristics.
52
+ - Made dynamic viewport and container-relative tokens feature-detected enhancements over valid `vh` and `vw` fallbacks.
53
+ - Made manual Gallery and Card Grid recipes single-column, isolated nested personality split ratios, and aligned gap utilities across Grid, Stack, and Cluster.
54
+ - Restricted deliberate horizontal scrolling to Reel and deliberate bounded vertical scrolling to Scroll.
55
+ - Corrected case-sensitive GitHub Pages metadata and versioned local demo assets to prevent stale v2/v3 asset combinations.
56
+
57
+ ### Tests
58
+
59
+ - Added package/export/tarball, canonical-selector, removed-surface, generated-parity, ownership, and personality-engine contracts.
60
+ - Added exact flattened/minified parity, actual tarball contents, complete v2 selector migration, nested-profile isolation, and fallback-enhancement contracts.
61
+ - Added threshold-edge, six-device, short-height, root-direct, nearest-wrapper, manual-query, DOM/focus-order, overflow, wrapper, recipe, and all-personality rendered matrices.
62
+ - Made Chromium, Firefox, and WebKit the complete release gate and retained the connected-browser interaction spot check.
63
+
64
+ ## [2.1.1] - 2026-07-27
65
+
66
+ ### Fixed
67
+
68
+ - Made personality enhancements query the nearest inline-size container while preserving the named personality containment scope for compatibility.
69
+ - Deferred three- and four-track application-shell signatures until their local container reaches `64rem`; existing safe two-track signatures retain their authored thresholds.
70
+ - 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.
71
+
72
+ ### Tests
73
+
74
+ - 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.
75
+ - Added static contracts for nearest-container personality queries and distinct Dashboard and Docs wide geometry.
76
+
77
+ ### Security
78
+
79
+ - 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.
80
+
81
+ ## [2.1.0] - 2026-07-20
82
+
83
+ ### Changed
84
+
85
+ - Updated the ecosystem demo and documentation to use `ui-style-kit-css@2.1.0` visual CSS, `ui-style-kit-css/interactive-surface-theme.css`, `interactive-surface-css@1.5.0` state core, and Layout core as the canonical import order.
86
+ - Kept `layout-style-css/integrations/ui-style-kit.css` available as a frozen deprecated structural bridge for legacy UI-prefixed layout aliases.
87
+ - Updated release metadata and the GitHub Pages demo to identify the 2.1.0 package line.
88
+
89
+ ### Tests
90
+
91
+ - Switched demo fixtures to consume the staged UI Style Kit 2.1 manifest, visual bundle, and token bridge while locking Interactive Surface to the released 1.5.0 package.
92
+
93
+ ## [2.0.0] - 2026-07-19
94
+
95
+ ### Breaking
96
+
97
+ - Rebuilt the package as a dependency-free, container-first layout system requiring Node.js 20 or newer for development scripts.
98
+ - Replaced size-tier wrappers with compact, prose, content, wide, full, and breakout semantics; wrappers now include fluid logical gutters and safe-area compensation.
99
+ - Standardized personalities, recipes, and regions on `data-ly-layout`, `data-ly-recipe`, and `data-ly-area`.
100
+ - Replaced root personality exports and companion `all-with-ui-kit*` aggregates with focused modules under `personalities/` and `integrations/`.
101
+ - Moved v1 containers, root hooks, columns, and recipe aliases into the opt-in `legacy.css` bundle for the v2 line; removal is scheduled for v3.
102
+
103
+ ### Added
104
+
105
+ - Added stack, cluster, center, cover, switcher, sidebar, grid, split, panes, media, reel, frame, and bounded-scroll primitives.
106
+ - Added seven functional recipes that preserve mobile DOM, reading, and focus order while rearranging named areas at `48rem` and `64rem` container thresholds.
107
+ - Made every `data-ly-recipe` value a complete alternative to its matching class and kept explicit wrapper measures authoritative under all personalities.
108
+ - Added sixteen spatially distinct personalities across left-rail, right-rail, three-zone, mosaic, and equal-split families.
109
+ - Added explicit base, medium-container, and large-container order escape hatches with accessibility guidance.
110
+ - Added a maintainable interactive layout lab with allowlisted query state, copyable snippets, ecosystem modes, and rendered coverage at 375px, 768px, 1280px, and 1440px.
111
+ - Added a complete 1.x-to-2.0 migration guide, Node.js 20/22 CI, and Chromium, Firefox, and WebKit release verification.
112
+
113
+ ### Integration
114
+
115
+ - Pinned `ui-style-kit-css@2.0.1` and `interactive-surface-css@1.4.0` as development fixtures only; the default package has no companion imports, peer dependencies, or runtime dependencies.
116
+ - Documented the all-three import order as UI Style Kit bridge, Interactive Surface `state-core.css`, Layout integration bridge, then Layout core.
117
+ - Kept the upcoming UI Style Kit revision as a follow-up outside this release.
118
+ - Preserved structural v1 `.ly-content` and `.ly-divider` compatibility while leaving the removed paint-owned `.ly-surface--raised` selector to UI Style Kit or application themes.
119
+
120
+ ## [1.1.2] - 2026-07-08
121
+
122
+ ### Fixed
123
+
124
+ - Reissued the release metadata, package lock, README install examples, wiki checklist, and publish workflow recovery tag under `1.1.2`.
125
+ - Kept the additive `1.1.1` CSS and documentation contract intact while moving the publish target to a clean patch version.
126
+
127
+ ## [1.1.1] - 2026-07-05
128
+
129
+ ### Added
130
+
131
+ - Added versioned wiki documentation under `docs/wiki` for installation, layout primitives, recipes, UI Style Kit compatibility, demo deployment, publishing, security, and contribution workflows.
132
+ - Added UI Style Kit-compatible structural aliases for `saas`, `bento`, `max`, `bau`, `tactile`, `neo`, `retro`, `brutal`, `cyber`, `y2k`, and `rg` prefixes.
133
+ - Added layout recipe helpers for button groups, card grids, card sizing, galleries, and carousels.
134
+ - Added F-Pattern, Z-Pattern, Split-Screen, Mondrian, and Synthwave layout styles.
135
+ - Added `layout-style-css/all-with-ui-kit-and-interactive-surface.css` for the three-library import path.
136
+ - Added direct `./dist/*.css` package exports for consumers that need generated dist files.
137
+ - Added `CHANGELOG.md`, `CONTRIBUTING.md`, and `SECURITY.md` to the release documentation set.
138
+
139
+ ### Changed
140
+
141
+ - Reworked the demo mobile controls into a compact drawer so the sticky header does not consume the mobile viewport.
142
+ - Expanded the demo to cover app shell, wrappers, split layouts, sidebars, panes, button groups, card grids, card sizes, galleries, carousels, frames, and scroll areas.
143
+ - Updated README examples to use exported CSS entrypoints and valid CDN links.
144
+ - Updated npm release metadata, package file allowlist, and release verification scripts for the `1.1.1` package.
145
+ - Updated the npm publish workflow to publish from `release.published` events and explicit `workflow_dispatch` tags.
146
+
147
+ ### Fixed
148
+
149
+ - Fixed README quick-start imports that referenced non-exported paths.
150
+ - Fixed malformed UI Style Kit CDN link markup in the README.
151
+ - Clarified responsive column utility documentation so class groups do not imply bare numeric class names.
152
+ - Preserved GitHub Pages artifact generation with a Pages-root `index.html`.
153
+ - Fixed the release automation path so draft releases can be published before the npm workflow runs.
154
+
155
+ ### Security
156
+
157
+ - Kept the layout CSS contract free of visual properties owned by `ui-style-kit-css`.
158
+ - Kept the package CSS-only at runtime with no network calls, dynamic script execution, or secret handling.
159
+ - Added release verification coverage for npm pack contents and documentation completeness.
160
+
161
+ ## [1.0.0]
162
+
163
+ ### Added
164
+
165
+ - Initial public release of layout primitives, layout style files, generated dist bundles, and demo coverage.
166
+
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Zero-configuration, dependency-free structural CSS that responds to the width and height a layout actually receives.
4
4
 
5
- `layout-style-css@3.0.0` is a clean-break release. It provides intrinsic wrappers, composition primitives, seven semantic recipes, and sixteen spatial personalities. Layout owns structure; UI Style Kit owns paint; Interactive Surface owns interaction styling.
5
+ `layout-style-css@3.0.2` is the current v3 patch release and preserves the clean-break structural contract introduced in 3.0.0. It provides intrinsic wrappers, composition primitives, seven semantic recipes, and sixteen spatial personalities. Layout owns structure; UI Style Kit owns paint; Interactive Surface owns interaction styling.
6
6
 
7
7
  ## Requirements
8
8
 
@@ -13,7 +13,7 @@ Zero-configuration, dependency-free structural CSS that responds to the width an
13
13
  ## Install
14
14
 
15
15
  ```bash
16
- npm install layout-style-css@3.0.0
16
+ npm install layout-style-css@3.0.2
17
17
  ```
18
18
 
19
19
  Most applications need one import:
@@ -24,6 +24,8 @@ import "layout-style-css";
24
24
 
25
25
  The full bundle includes the core modules and all personality profiles. No breakpoint configuration, wrapper, JavaScript, or companion library is required.
26
26
 
27
+ Package and bundler defaults (`main`, `style`, and the root export) resolve to the readable `dist/layout-style-css.css` bundle for straightforward inspection and debugging. The `unpkg` and `jsdelivr` convenience fields remain minified, and `layout-style-css/min.css` is the explicit minified package import.
28
+
27
29
  ## Zero-Configuration Start
28
30
 
29
31
  Use `.ly-root` as the responsive boundary and keep the mobile DOM order authoritative:
@@ -66,6 +68,8 @@ Wrappers are optional measure and nesting controls. Every wrapper uses logical p
66
68
 
67
69
  All lanes clamp to the available inline size, including allocations from 320px through ultrawide screens.
68
70
 
71
+ `--ly-page-padding-inline` supplies the default `--ly-wrapper-gutter` value. Override `--ly-wrapper-gutter` on `.ly-root` or a narrower scope to control rendered Wrapper padding; safe-area compensation is still applied once at the Wrapper edge.
72
+
69
73
  ## Composition Primitives
70
74
 
71
75
  The core includes:
@@ -91,6 +95,8 @@ Recipes use attributes only. The stacked semantic source order is always safe, a
91
95
  | `data-ly-recipe="gallery"` | Intrinsic tracks; no topology breakpoint |
92
96
  | `data-ly-recipe="card-grid"` | Intrinsic tracks; no topology breakpoint |
93
97
 
98
+ App Shell base, medium, and wide topologies own matching row definitions. This keeps the primary workspace flexible while header and footer tracks remain intrinsic, including personality-specific four-row topologies.
99
+
94
100
  Canonical regions use `data-ly-area`, including `header`, `sidebar`, `nav`, `main`, `aside`, `footer`, `content`, `media`, `actions`, `primary`, and `secondary`.
95
101
 
96
102
  Recipe class aliases such as `.ly-dashboard` no longer exist. Use:
@@ -127,6 +133,8 @@ The system responds to available block size without orientation queries:
127
133
  - At viewport heights of `30rem` or less, recipe-owned sticky behavior becomes normal flow, and cover/shell minimums stop forcing full-height regions.
128
134
  - Safe-area block insets remain available, and required regions are never hidden solely because the viewport is short.
129
135
 
136
+ `--ly-section-padding-block` controls normal sections. `--ly-section-padding-block-compact` independently controls `.ly-section--compact`, preserving a smaller rhythm through the regular, short, and shallow height tiers.
137
+
130
138
  Use the public height, gap, measure, ratio, rail, media, card, and grid-minimum custom properties for advanced tuning. Defaults use `100vh` fallbacks followed by `100dvh`.
131
139
 
132
140
  ## Personalities
@@ -151,6 +159,7 @@ Each personality is a token/topology profile consumed by the shared recipe engin
151
159
  | `layout-style-css/utilities.css` | Small structural utility set |
152
160
  | `layout-style-css/personalities.css` | All sixteen profiles |
153
161
  | `layout-style-css/personalities/minimal-saas.css` | One profile; substitute any public personality name |
162
+ | `layout-style-css/personalities.json` | Public layout-to-visual pairing recommendations |
154
163
  | `layout-style-css/package.json` | Package metadata |
155
164
 
156
165
  The cascade order is `ly.reset`, `ly.tokens`, `ly.wrappers`, `ly.primitives`, `ly.recipes`, `ly.utilities`, and `ly.personalities`.
@@ -168,11 +177,13 @@ import "layout-style-css";
168
177
 
169
178
  This order lets UI Style Kit establish paint and theme roles, Interactive Surface add interaction states, and Layout apply structure.
170
179
 
180
+ `data-ly-layout`, `data-ui`, `data-theme`, and `data-mode` are independently selectable. See [Layout Styles](docs/wiki/Layout-Styles.md#visual-pairing-guidance) for the full recommendation matrix; pairings are never dependencies.
181
+
171
182
  ## CDN
172
183
 
173
184
  ```html
174
- <link rel="stylesheet" href="https://unpkg.com/layout-style-css@3.0.0/dist/layout-style-css.min.css">
175
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.0.0/dist/layout-style-css.min.css">
185
+ <link rel="stylesheet" href="https://unpkg.com/layout-style-css@3.0.2/dist/layout-style-css.min.css">
186
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.0.2/dist/layout-style-css.min.css">
176
187
  ```
177
188
 
178
189
  ## Clean-Break Migration
package/dist/foundation.css CHANGED
@@ -22,14 +22,14 @@
22
22
  --ly-wrapper-prose: 68ch;
23
23
  --ly-wrapper-content: 72rem;
24
24
  --ly-wrapper-wide: 112rem;
25
- --ly-page-padding-inline: clamp(1rem, 4vw, 3rem);
25
+ --ly-page-padding-inline: clamp(1rem, 3vw, 3rem);
26
26
  --ly-safe-area-inline: max(
27
27
  env(safe-area-inset-left, 0px),
28
28
  env(safe-area-inset-right, 0px)
29
29
  );
30
30
  --ly-safe-area-block-start: env(safe-area-inset-top, 0px);
31
31
  --ly-safe-area-block-end: env(safe-area-inset-bottom, 0px);
32
- --ly-wrapper-gutter: max(var(--ly-page-padding-inline), var(--ly-safe-area-inline));
32
+ --ly-wrapper-gutter: var(--ly-page-padding-inline);
33
33
 
34
34
  --ly-profile-gap: var(--ly-space-5);
35
35
  --ly-gap: var(--ly-profile-gap);
@@ -37,6 +37,7 @@
37
37
  --ly-stack-gap: var(--ly-space-4);
38
38
  --ly-cluster-gap: var(--ly-space-3);
39
39
  --ly-section-padding-block: clamp(3rem, 7vh, 6rem);
40
+ --ly-section-padding-block-compact: clamp(1.5rem, 3.5vh, 3rem);
40
41
  --ly-header-height: 4.5rem;
41
42
  --ly-sticky-position: sticky;
42
43
  --ly-cover-min: 100vh;
@@ -64,11 +65,13 @@
64
65
  --ly-gallery-min: 12rem;
65
66
  --ly-card-grid-min: 16rem;
66
67
 
68
+ --ly-app-shell-base-rows: auto auto minmax(0, 1fr) auto auto;
67
69
  --ly-app-shell-medium-areas:
68
70
  "header header"
69
71
  "sidebar main"
70
72
  "aside main"
71
73
  "footer footer";
74
+ --ly-app-shell-medium-rows: auto auto minmax(0, 1fr) auto;
72
75
  --ly-app-shell-medium-columns:
73
76
  minmax(min(100%, var(--ly-recipe-rail)), auto)
74
77
  minmax(0, 1fr);
@@ -76,6 +79,7 @@
76
79
  "sidebar header header"
77
80
  "sidebar main aside"
78
81
  "sidebar footer footer";
82
+ --ly-app-shell-wide-rows: auto minmax(0, 1fr) auto;
79
83
  --ly-app-shell-wide-columns:
80
84
  minmax(min(100%, var(--ly-recipe-rail)), auto)
81
85
  minmax(0, 1fr)
@@ -125,6 +129,13 @@
125
129
  min-block-size: 0;
126
130
  }
127
131
 
132
+ /* Prefer the nearest layout scope for gutters when container units parse. */
133
+ @supports (width: 1cqi) {
134
+ :where(.ly-root) {
135
+ --ly-page-padding-inline: clamp(1rem, 3cqi, 3rem);
136
+ }
137
+ }
138
+
128
139
  /* Enhance viewport-bound tokens only when dynamic viewport units parse. */
129
140
  @supports (height: 100dvh) {
130
141
  :where(.ly-root) {
@@ -162,6 +173,7 @@
162
173
  --ly-stack-gap: min(var(--ly-space-4), 3vh);
163
174
  --ly-cluster-gap: min(var(--ly-space-3), 2vh);
164
175
  --ly-section-padding-block: clamp(1.5rem, 6vh, 3rem);
176
+ --ly-section-padding-block-compact: clamp(0.75rem, 3vh, 1.25rem);
165
177
  --ly-header-height: 3.5rem;
166
178
  --ly-scroll-max: min(62vh, 34rem);
167
179
  }
@@ -171,6 +183,7 @@
171
183
  --ly-stack-gap: min(var(--ly-space-4), 3dvh);
172
184
  --ly-cluster-gap: min(var(--ly-space-3), 2dvh);
173
185
  --ly-section-padding-block: clamp(1.5rem, 6dvh, 3rem);
186
+ --ly-section-padding-block-compact: clamp(0.75rem, 3dvh, 1.25rem);
174
187
  --ly-scroll-max: min(62dvh, 34rem);
175
188
  }
176
189
  }
@@ -182,6 +195,7 @@
182
195
  --ly-shell-min: auto;
183
196
  --ly-sticky-position: static;
184
197
  --ly-section-padding-block: var(--ly-space-5);
198
+ --ly-section-padding-block-compact: var(--ly-space-3);
185
199
  --ly-scroll-max: max(12rem, calc(100vh - 8rem));
186
200
  }
187
201
 
package/dist/layout-style-css.css CHANGED
@@ -25,14 +25,14 @@
25
25
  --ly-wrapper-prose: 68ch;
26
26
  --ly-wrapper-content: 72rem;
27
27
  --ly-wrapper-wide: 112rem;
28
- --ly-page-padding-inline: clamp(1rem, 4vw, 3rem);
28
+ --ly-page-padding-inline: clamp(1rem, 3vw, 3rem);
29
29
  --ly-safe-area-inline: max(
30
30
  env(safe-area-inset-left, 0px),
31
31
  env(safe-area-inset-right, 0px)
32
32
  );
33
33
  --ly-safe-area-block-start: env(safe-area-inset-top, 0px);
34
34
  --ly-safe-area-block-end: env(safe-area-inset-bottom, 0px);
35
- --ly-wrapper-gutter: max(var(--ly-page-padding-inline), var(--ly-safe-area-inline));
35
+ --ly-wrapper-gutter: var(--ly-page-padding-inline);
36
36
 
37
37
  --ly-profile-gap: var(--ly-space-5);
38
38
  --ly-gap: var(--ly-profile-gap);
@@ -40,6 +40,7 @@
40
40
  --ly-stack-gap: var(--ly-space-4);
41
41
  --ly-cluster-gap: var(--ly-space-3);
42
42
  --ly-section-padding-block: clamp(3rem, 7vh, 6rem);
43
+ --ly-section-padding-block-compact: clamp(1.5rem, 3.5vh, 3rem);
43
44
  --ly-header-height: 4.5rem;
44
45
  --ly-sticky-position: sticky;
45
46
  --ly-cover-min: 100vh;
@@ -67,11 +68,13 @@
67
68
  --ly-gallery-min: 12rem;
68
69
  --ly-card-grid-min: 16rem;
69
70
 
71
+ --ly-app-shell-base-rows: auto auto minmax(0, 1fr) auto auto;
70
72
  --ly-app-shell-medium-areas:
71
73
  "header header"
72
74
  "sidebar main"
73
75
  "aside main"
74
76
  "footer footer";
77
+ --ly-app-shell-medium-rows: auto auto minmax(0, 1fr) auto;
75
78
  --ly-app-shell-medium-columns:
76
79
  minmax(min(100%, var(--ly-recipe-rail)), auto)
77
80
  minmax(0, 1fr);
@@ -79,6 +82,7 @@
79
82
  "sidebar header header"
80
83
  "sidebar main aside"
81
84
  "sidebar footer footer";
85
+ --ly-app-shell-wide-rows: auto minmax(0, 1fr) auto;
82
86
  --ly-app-shell-wide-columns:
83
87
  minmax(min(100%, var(--ly-recipe-rail)), auto)
84
88
  minmax(0, 1fr)
@@ -128,6 +132,13 @@
128
132
  min-block-size: 0;
129
133
  }
130
134
 
135
+ /* Prefer the nearest layout scope for gutters when container units parse. */
136
+ @supports (width: 1cqi) {
137
+ :where(.ly-root) {
138
+ --ly-page-padding-inline: clamp(1rem, 3cqi, 3rem);
139
+ }
140
+ }
141
+
131
142
  /* Enhance viewport-bound tokens only when dynamic viewport units parse. */
132
143
  @supports (height: 100dvh) {
133
144
  :where(.ly-root) {
@@ -165,6 +176,7 @@
165
176
  --ly-stack-gap: min(var(--ly-space-4), 3vh);
166
177
  --ly-cluster-gap: min(var(--ly-space-3), 2vh);
167
178
  --ly-section-padding-block: clamp(1.5rem, 6vh, 3rem);
179
+ --ly-section-padding-block-compact: clamp(0.75rem, 3vh, 1.25rem);
168
180
  --ly-header-height: 3.5rem;
169
181
  --ly-scroll-max: min(62vh, 34rem);
170
182
  }
@@ -174,6 +186,7 @@
174
186
  --ly-stack-gap: min(var(--ly-space-4), 3dvh);
175
187
  --ly-cluster-gap: min(var(--ly-space-3), 2dvh);
176
188
  --ly-section-padding-block: clamp(1.5rem, 6dvh, 3rem);
189
+ --ly-section-padding-block-compact: clamp(0.75rem, 3dvh, 1.25rem);
177
190
  --ly-scroll-max: min(62dvh, 34rem);
178
191
  }
179
192
  }
@@ -185,6 +198,7 @@
185
198
  --ly-shell-min: auto;
186
199
  --ly-sticky-position: static;
187
200
  --ly-section-padding-block: var(--ly-space-5);
201
+ --ly-section-padding-block-compact: var(--ly-space-3);
188
202
  --ly-scroll-max: max(12rem, calc(100vh - 8rem));
189
203
  }
190
204
 
@@ -202,7 +216,7 @@
202
216
  @layer ly.wrappers {
203
217
  .ly-wrapper {
204
218
  --ly-wrapper-max: var(--ly-personality-wrapper-max, var(--ly-wrapper-content));
205
- --ly-wrapper-fluid-gutter: clamp(1rem, 3vw, 3rem);
219
+ --ly-wrapper-fluid-gutter: var(--ly-wrapper-gutter);
206
220
  --ly-wrapper-local-gutter: max(
207
221
  var(--ly-wrapper-fluid-gutter),
208
222
  var(--ly-safe-area-inline)
@@ -216,13 +230,6 @@
216
230
  padding-inline: var(--ly-wrapper-local-gutter);
217
231
  }
218
232
 
219
- /* Container-relative gutters enhance the universally valid viewport fallback. */
220
- @supports (width: 1cqi) {
221
- .ly-wrapper {
222
- --ly-wrapper-fluid-gutter: clamp(1rem, 3cqi, 3rem);
223
- }
224
- }
225
-
226
233
  .ly-wrapper--compact {
227
234
  --ly-wrapper-max: var(--ly-wrapper-compact);
228
235
  }
@@ -325,11 +332,11 @@
325
332
  }
326
333
 
327
334
  .ly-section--compact {
328
- --ly-section-padding-block: var(--ly-space-7);
335
+ padding-block: var(--ly-section-padding-block-compact);
329
336
  }
330
337
 
331
338
  .ly-section--flush {
332
- --ly-section-padding-block: 0;
339
+ padding-block: 0;
333
340
  }
334
341
 
335
342
  .ly-readable {
@@ -516,7 +523,7 @@
516
523
  "main"
517
524
  "aside"
518
525
  "footer";
519
- grid-template-rows: auto auto minmax(0, 1fr) auto auto;
526
+ grid-template-rows: var(--ly-app-shell-base-rows);
520
527
  }
521
528
 
522
529
  [data-ly-recipe="dashboard"],
@@ -647,6 +654,7 @@
647
654
  [data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]) {
648
655
  grid-template-areas: var(--ly-app-shell-medium-areas);
649
656
  grid-template-columns: var(--ly-app-shell-medium-columns);
657
+ grid-template-rows: var(--ly-app-shell-medium-rows);
650
658
  }
651
659
 
652
660
  [data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]) {
@@ -659,6 +667,7 @@
659
667
  [data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]) {
660
668
  grid-template-areas: var(--ly-app-shell-wide-areas);
661
669
  grid-template-columns: var(--ly-app-shell-wide-columns);
670
+ grid-template-rows: var(--ly-app-shell-wide-rows);
662
671
  }
663
672
 
664
673
  [data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]) {
@@ -793,6 +802,7 @@
793
802
  "sidebar main main"
794
803
  "aside main main"
795
804
  "footer footer footer";
805
+ --ly-app-shell-wide-rows: auto auto minmax(0, 1fr) auto;
796
806
  --ly-app-shell-wide-columns:
797
807
  minmax(min(100%, var(--ly-recipe-rail)), 0.3fr)
798
808
  minmax(0, 1fr)
@@ -855,6 +865,7 @@
855
865
  "sidebar main"
856
866
  "aside main"
857
867
  "footer footer";
868
+ --ly-app-shell-wide-rows: auto auto minmax(0, 1fr) auto;
858
869
  --ly-app-shell-wide-columns:
859
870
  minmax(min(100%, var(--ly-recipe-rail)), 0.28fr)
860
871
  minmax(0, 1fr);
@@ -877,6 +888,7 @@
877
888
  "main sidebar"
878
889
  "aside sidebar"
879
890
  "footer sidebar";
891
+ --ly-app-shell-wide-rows: auto minmax(0, 1fr) auto auto;
880
892
  --ly-app-shell-wide-columns:
881
893
  minmax(0, 1fr)
882
894
  minmax(min(100%, var(--ly-recipe-rail)), 0.3fr);
@@ -1042,6 +1054,7 @@
1042
1054
  "main sidebar"
1043
1055
  "aside sidebar"
1044
1056
  "footer footer";
1057
+ --ly-app-shell-wide-rows: auto minmax(0, 1fr) auto auto;
1045
1058
  --ly-app-shell-wide-columns:
1046
1059
  minmax(0, 1fr)
1047
1060
  minmax(0, 1fr);
package/dist/layout-style-css.min.css CHANGED
@@ -1 +1 @@
1
- @layer ly.reset,ly.tokens,ly.wrappers,ly.primitives,ly.recipes,ly.utilities,ly.personalities;@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-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-safe-area-block-start:env(safe-area-inset-top,0px);--ly-safe-area-block-end:env(safe-area-inset-bottom,0px);--ly-wrapper-gutter:max(var(--ly-page-padding-inline),var(--ly-safe-area-inline));--ly-profile-gap:var(--ly-space-5);--ly-gap:var(--ly-profile-gap);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-3);--ly-section-padding-block:clamp(3rem,7vh,6rem);--ly-header-height:4.5rem;--ly-sticky-position:sticky;--ly-cover-min:100vh;--ly-shell-min:100vh;--ly-scroll-max:min(70vh,50rem);--ly-switcher-threshold:42rem;--ly-sidebar-size:18rem;--ly-sidebar-content-min:50%;--ly-grid-columns:12;--ly-grid-min:16rem;--ly-split-min:20rem;--ly-pane-min:18rem;--ly-pane-size:22rem;--ly-media-min:18rem;--ly-media-size:14rem;--ly-reel-item-min:16rem;--ly-reel-item-max:28rem;--ly-frame-ratio:16 / 9;--ly-split-primary:1fr;--ly-split-secondary:1fr;--ly-recipe-rail:18rem;--ly-recipe-aside:22rem;--ly-gallery-min:12rem;--ly-card-grid-min:16rem;--ly-app-shell-medium-areas:"header header" "sidebar main" "aside main" "footer footer";--ly-app-shell-medium-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr);--ly-app-shell-wide-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr);--ly-dashboard-medium-areas:"header header" "nav nav" "main aside" "footer footer";--ly-dashboard-medium-columns:minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr);--ly-dashboard-wide-areas:"nav header header" "nav main aside" "nav footer footer";--ly-dashboard-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr);--ly-docs-wide-areas:"header header" "nav main" "nav aside" "footer footer";--ly-docs-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr);--ly-list-detail-wide-areas:"primary secondary" "actions actions";--ly-list-detail-wide-columns:minmax(min(100%,var(--ly-pane-size)),0.7fr) minmax(0,1fr);--ly-split-hero-wide-areas:"content media" "actions media";--ly-split-hero-wide-columns:minmax(0,var(--ly-split-primary,1fr)) minmax(0,var(--ly-split-secondary,1fr));container-name:ly-scope;container-type:inline-size;min-inline-size:0;min-block-size:0}@supports (height:100dvh){:where(.ly-root){--ly-cover-min:100dvh;--ly-shell-min:100dvh;--ly-scroll-max:min(70dvh,50rem)}}}@layer ly.reset{:where(.ly-root),:where(.ly-root *){box-sizing:border-box}:where(.ly-root){margin:0}:where(.ly-root img),:where(.ly-root svg),:where(.ly-root video),:where(.ly-root canvas),:where(.ly-root iframe){max-inline-size:100%}}@layer ly.tokens{@media (max-height:44rem){:where(.ly-root){--ly-gap:min(var(--ly-profile-gap),var(--ly-space-4));--ly-grid-gap:var(--ly-gap);--ly-stack-gap:min(var(--ly-space-4),3vh);--ly-cluster-gap:min(var(--ly-space-3),2vh);--ly-section-padding-block:clamp(1.5rem,6vh,3rem);--ly-header-height:3.5rem;--ly-scroll-max:min(62vh,34rem)}@supports (height:100dvh){:where(.ly-root){--ly-stack-gap:min(var(--ly-space-4),3dvh);--ly-cluster-gap:min(var(--ly-space-3),2dvh);--ly-section-padding-block:clamp(1.5rem,6dvh,3rem);--ly-scroll-max:min(62dvh,34rem)}}}@media (max-height:30rem){:where(.ly-root){--ly-cover-min:auto;--ly-shell-min:auto;--ly-sticky-position:static;--ly-section-padding-block:var(--ly-space-5);--ly-scroll-max:max(12rem,calc(100vh - 8rem))}@supports (height:100dvh){:where(.ly-root){--ly-scroll-max:max(12rem,calc(100dvh - 8rem))}}}}@layer ly.wrappers{.ly-wrapper{--ly-wrapper-max:var(--ly-personality-wrapper-max,var(--ly-wrapper-content));--ly-wrapper-fluid-gutter:clamp(1rem,3vw,3rem);--ly-wrapper-local-gutter:max( var(--ly-wrapper-fluid-gutter),var(--ly-safe-area-inline) );container-name:ly-scope;container-type:inline-size;inline-size:min(100%,calc(var(--ly-wrapper-max) + (var(--ly-wrapper-local-gutter) * 2)));max-inline-size:100%;margin-inline:auto;padding-inline:var(--ly-wrapper-local-gutter)}@supports (width:1cqi){.ly-wrapper{--ly-wrapper-fluid-gutter:clamp(1rem,3cqi,3rem)}}.ly-wrapper--compact{--ly-wrapper-max:var(--ly-wrapper-compact)}.ly-wrapper--prose{--ly-wrapper-max:var(--ly-wrapper-prose)}.ly-wrapper--content{--ly-wrapper-max:var(--ly-wrapper-content)}.ly-wrapper--wide{--ly-wrapper-max:var(--ly-wrapper-wide)}.ly-wrapper--full{--ly-wrapper-max:100%}.ly-wrapper--breakout{--ly-wrapper-max:100%;--ly-breakout-content-size:min( var(--ly-wrapper-content),calc(100% - (var(--ly-wrapper-local-gutter) * 2)) );--ly-breakout-feature-size:min( var(--ly-wrapper-wide),calc(100% - (var(--ly-wrapper-local-gutter) * 2)) );display:grid;grid-template-columns:[full-start] minmax(min(100%,var(--ly-wrapper-local-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-local-gutter)),1fr) [full-end];inline-size:100%;padding-inline:0}.ly-wrapper--breakout>*{grid-column:content;min-inline-size:0;max-inline-size:100%}.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:100vh;min-block-size:100dvh;padding-block-start:var(--ly-safe-area-block-start);padding-block-end:var(--ly-safe-area-block-end)}.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:var(--ly-sticky-position,sticky);inset-block-start:0;z-index:var(--ly-z-header,20)}.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:100vh;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;min-inline-size:min(100%,var(--ly-sidebar-size))}.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(auto-fit,minmax(min(100%,var(--ly-grid-min)),1fr));gap:var(--ly-grid-gap)}.ly-grid--fixed{grid-template-columns:repeat(var(--ly-grid-columns),minmax(0,1fr))}.ly-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-split-min)),1fr));gap:var(--ly-gap);align-items:var(--ly-split-align,center)}.ly-panes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-pane-min)),1fr));gap:var(--ly-gap)}.ly-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-media-min)),1fr));gap:var(--ly-gap);align-items:var(--ly-media-align,start)}.ly-media>:where(.ly-media__actions,[data-ly-media="actions"]){min-inline-size:min(100%,var(--ly-media-size))}.ly-grid>*,.ly-split>*,.ly-panes>*,.ly-media>*{min-inline-size:0;min-block-size:0}.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;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-x:clip;overflow-y:auto;overscroll-behavior-block:contain}}@layer ly.recipes{:where( [data-ly-recipe="app-shell"],[data-ly-recipe="dashboard"],[data-ly-recipe="docs"],[data-ly-recipe="list-detail"],[data-ly-recipe="split-hero"],[data-ly-recipe="gallery"],[data-ly-recipe="card-grid"] ){container-name:ly-scope;container-type:inline-size;min-inline-size:0;min-block-size:0}:where( [data-ly-recipe="app-shell"],[data-ly-recipe="dashboard"],[data-ly-recipe="docs"],[data-ly-recipe="list-detail"],[data-ly-recipe="split-hero"] ){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap)}[data-ly-recipe="app-shell"]{min-block-size:100vh;min-block-size:var(--ly-shell-min);grid-template-areas:"header" "sidebar" "main" "aside" "footer";grid-template-rows:auto auto minmax(0,1fr) auto auto}[data-ly-recipe="dashboard"],[data-ly-recipe="docs"]{grid-template-areas:"header" "nav" "main" "aside" "footer"}[data-ly-recipe="list-detail"]{grid-template-areas:"primary" "secondary" "actions"}[data-ly-recipe="split-hero"]{grid-template-areas:"content" "media" "actions";align-items:var(--ly-split-hero-align,center)}[data-ly-recipe="gallery"],[data-ly-recipe="card-grid"]{display:grid;gap:var(--ly-grid-gap)}[data-ly-recipe="gallery"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-gallery-min)),1fr))}[data-ly-recipe="card-grid"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-card-grid-min)),1fr))}:where( [data-ly-recipe="gallery"],[data-ly-recipe="card-grid"] )[data-ly-responsive="manual"]{grid-template-columns:minmax(0,1fr)}:where( [data-ly-recipe="app-shell"],[data-ly-recipe="dashboard"],[data-ly-recipe="docs"],[data-ly-recipe="list-detail"],[data-ly-recipe="split-hero"],[data-ly-recipe="gallery"],[data-ly-recipe="card-grid"] )>*{min-inline-size:0;min-block-size:0}[data-ly-area="header"]{grid-area:header}[data-ly-area="nav"]{grid-area:nav}[data-ly-area="sidebar"]{grid-area:sidebar}[data-ly-area="main"]{grid-area:main}[data-ly-area="aside"]{grid-area:aside}[data-ly-area="footer"]{grid-area:footer}[data-ly-area="content"]{grid-area:content}[data-ly-area="media"]{grid-area:media}[data-ly-area="actions"]{grid-area:actions}[data-ly-area="primary"]{grid-area:primary}[data-ly-area="secondary"]{grid-area:secondary}@container ly-scope (min-width:42rem){[data-ly-recipe="split-hero"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-split-hero-wide-areas);grid-template-columns:var(--ly-split-hero-wide-columns)}}@container ly-scope (min-width:44rem){[data-ly-recipe="list-detail"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-list-detail-wide-areas);grid-template-columns:var(--ly-list-detail-wide-columns)}}@container ly-scope (min-width:48rem){[data-ly-recipe="docs"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-docs-wide-areas);grid-template-columns:var(--ly-docs-wide-columns)}}@container ly-scope (min-width:52rem){[data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-app-shell-medium-areas);grid-template-columns:var(--ly-app-shell-medium-columns)}[data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-dashboard-medium-areas);grid-template-columns:var(--ly-dashboard-medium-columns)}}@container ly-scope (min-width:72rem){[data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-app-shell-wide-areas);grid-template-columns:var(--ly-app-shell-wide-columns)}[data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-dashboard-wide-areas);grid-template-columns:var(--ly-dashboard-wide-columns)}}}@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-6{--ly-grid-columns:6}.ly-cols-12{--ly-grid-columns:12}.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-full{grid-column:1 / -1}.ly-gap-0{--ly-gap:var(--ly-space-0);--ly-grid-gap:var(--ly-space-0);--ly-stack-gap:var(--ly-space-0);--ly-cluster-gap:var(--ly-space-0)}.ly-gap-2{--ly-gap:var(--ly-space-2);--ly-grid-gap:var(--ly-space-2);--ly-stack-gap:var(--ly-space-2);--ly-cluster-gap:var(--ly-space-2)}.ly-gap-4{--ly-gap:var(--ly-space-4);--ly-grid-gap:var(--ly-space-4);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-4)}.ly-gap-6{--ly-gap:var(--ly-space-6);--ly-grid-gap:var(--ly-space-6);--ly-stack-gap:var(--ly-space-6);--ly-cluster-gap:var(--ly-space-6)}.ly-gap-8{--ly-gap:var(--ly-space-8);--ly-grid-gap:var(--ly-space-8);--ly-stack-gap:var(--ly-space-8);--ly-cluster-gap:var(--ly-space-8)}.ly-pad-0{padding:var(--ly-space-0)}.ly-pad-2{padding:var(--ly-space-2)}.ly-pad-4{padding:var(--ly-space-4)}.ly-pad-6{padding:var(--ly-space-6)}.ly-pad-8{padding: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:100vh;min-block-size:100dvh}.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-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-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}}@layer ly.personalities.minimal-saas{:where(.ly-root[data-ly-layout="minimal-saas"]){--ly-personality-wrapper-max:88rem;--ly-profile-gap:var(--ly-space-5);--ly-grid-min:16rem;--ly-recipe-rail:15rem;--ly-recipe-aside:16rem;--ly-split-primary:1.05fr;--ly-split-secondary:0.95fr}}@layer ly.personalities.bento{:where(.ly-root[data-ly-layout="bento"]){--ly-personality-wrapper-max:112rem;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:12rem;--ly-card-grid-min:14rem;--ly-gallery-min:11rem;--ly-recipe-rail:14rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header header" "sidebar main main" "aside main main" "footer footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.3fr) minmax(0,1fr) minmax(0,1fr)}}@layer ly.personalities.maximalist{:where(.ly-root[data-ly-layout="maximalist"]){--ly-personality-wrapper-max:100%;--ly-profile-gap:var(--ly-space-7);--ly-grid-min:10rem;--ly-card-grid-min:13rem;--ly-gallery-min:10rem;--ly-recipe-rail:15rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header header header" "main main sidebar aside" "main main footer footer";--ly-app-shell-wide-columns:minmax(0,1.4fr) minmax(0,0.6fr) minmax(min(100%,var(--ly-recipe-rail)),0.32fr) minmax(min(100%,var(--ly-recipe-aside)),0.38fr)}}@layer ly.personalities.bauhaus{:where(.ly-root[data-ly-layout="bauhaus"]){--ly-personality-wrapper-max:96rem;--ly-profile-gap:var(--ly-space-6);--ly-grid-min:13rem;--ly-recipe-rail:14rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header header header" "sidebar main main aside" "sidebar footer footer aside";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.24fr) minmax(0,0.7fr) minmax(0,1.3fr) minmax(min(100%,var(--ly-recipe-aside)),0.3fr)}}@layer ly.personalities.tactile{:where(.ly-root[data-ly-layout="tactile"]){--ly-personality-wrapper-max:82rem;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:15rem;--ly-recipe-rail:17rem;--ly-recipe-aside:20rem;--ly-app-shell-wide-areas:"header header" "sidebar main" "aside main" "footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.28fr) minmax(0,1fr);--ly-list-detail-wide-columns:minmax(min(100%,var(--ly-pane-size)),0.5fr) minmax(0,0.9fr)}}@layer ly.personalities.neumorphism{:where(.ly-root[data-ly-layout="neumorphism"]){--ly-personality-wrapper-max:84rem;--ly-profile-gap:var(--ly-space-6);--ly-grid-min:17rem;--ly-recipe-rail:17rem;--ly-recipe-aside:19rem;--ly-app-shell-wide-areas:"header sidebar" "main sidebar" "aside sidebar" "footer sidebar";--ly-app-shell-wide-columns:minmax(0,1fr) minmax(min(100%,var(--ly-recipe-rail)),0.3fr);--ly-list-detail-wide-columns:minmax(0,1.1fr) minmax(min(100%,var(--ly-pane-size)),0.7fr)}}@layer ly.personalities.retrofuturism{:where(.ly-root[data-ly-layout="retrofuturism"]){--ly-personality-wrapper-max:106rem;--ly-profile-gap:var(--ly-space-5);--ly-grid-min:14rem;--ly-recipe-rail:14rem;--ly-recipe-aside:17rem;--ly-app-shell-wide-areas:"sidebar header aside" "sidebar main aside" "sidebar footer aside";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.24fr) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.3fr)}}@layer ly.personalities.brutalism{:where(.ly-root[data-ly-layout="brutalism"]){--ly-personality-wrapper-max:100rem;--ly-profile-gap:var(--ly-space-3);--ly-grid-min:14rem;--ly-recipe-rail:16rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header sidebar" "main aside sidebar" "footer footer sidebar";--ly-app-shell-wide-columns:minmax(0,1.3fr) minmax(0,0.7fr) minmax(min(100%,var(--ly-recipe-rail)),0.34fr)}}@layer ly.personalities.cyberpunk{:where(.ly-root[data-ly-layout="cyberpunk"]){--ly-personality-wrapper-max:112rem;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:12rem;--ly-recipe-rail:13rem;--ly-recipe-aside:19rem;--ly-app-shell-wide-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.2fr) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.32fr)}}@layer ly.personalities.y2k{:where(.ly-root[data-ly-layout="y2k"]){--ly-personality-wrapper-max:90rem;--ly-profile-gap:var(--ly-space-6);--ly-grid-min:13rem;--ly-recipe-rail:18rem;--ly-recipe-aside:16rem;--ly-app-shell-wide-areas:"header header sidebar" "aside main sidebar" "footer footer sidebar";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-aside)),0.34fr) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-rail)),0.28fr)}}@layer ly.personalities.retro-glass{:where(.ly-root[data-ly-layout="retro-glass"]){--ly-personality-wrapper-max:104rem;--ly-profile-gap:var(--ly-space-5);--ly-grid-min:15rem;--ly-recipe-rail:18rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header sidebar" "main main sidebar" "aside footer footer";--ly-app-shell-wide-columns:minmax(0,1.25fr) minmax(0,0.75fr) minmax(min(100%,var(--ly-recipe-rail)),0.32fr)}}@layer ly.personalities.f-pattern{:where(.ly-root[data-ly-layout="f-pattern"]){--ly-personality-wrapper-max:92rem;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:14rem;--ly-recipe-rail:16rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.26fr) minmax(0,1.35fr) minmax(min(100%,var(--ly-recipe-aside)),0.65fr);--ly-split-hero-wide-columns:minmax(0,1.8fr) minmax(0,0.8fr)}}@layer ly.personalities.z-pattern{:where(.ly-root[data-ly-layout="z-pattern"]){--ly-personality-wrapper-max:108rem;--ly-profile-gap:var(--ly-space-5);--ly-grid-min:14rem;--ly-recipe-rail:17rem;--ly-recipe-aside:19rem;--ly-app-shell-wide-areas:"header header sidebar" "main aside sidebar" "footer aside sidebar";--ly-app-shell-wide-columns:minmax(0,1.45fr) minmax(min(100%,var(--ly-recipe-aside)),0.55fr) minmax(min(100%,var(--ly-recipe-rail)),0.3fr);--ly-split-hero-wide-columns:minmax(0,1.5fr) minmax(0,0.5fr)}}@layer ly.personalities.split-screen{:where(.ly-root[data-ly-layout="split-screen"]){--ly-personality-wrapper-max:100%;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:20rem;--ly-recipe-rail:24rem;--ly-recipe-aside:24rem;--ly-app-shell-wide-areas:"header header" "main sidebar" "aside sidebar" "footer footer";--ly-app-shell-wide-columns:minmax(0,1fr) minmax(0,1fr);--ly-split-hero-wide-columns:minmax(0,1fr) minmax(0,1fr);--ly-list-detail-wide-columns:minmax(0,1fr) minmax(0,1fr)}}@layer ly.personalities.mondrian{:where(.ly-root[data-ly-layout="mondrian"]){--ly-personality-wrapper-max:112rem;--ly-profile-gap:var(--ly-space-3);--ly-grid-min:11rem;--ly-recipe-rail:13rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"sidebar header header" "sidebar main aside" "footer footer aside";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.22fr) minmax(0,1.45fr) minmax(min(100%,var(--ly-recipe-aside)),0.55fr)}}@layer ly.personalities.synthwave{:where(.ly-root[data-ly-layout="synthwave"]){--ly-personality-wrapper-max:112rem;--ly-profile-gap:var(--ly-space-6);--ly-grid-min:14rem;--ly-recipe-rail:16rem;--ly-recipe-aside:20rem;--ly-app-shell-wide-areas:"header header header" "sidebar main aside" "footer footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.28fr) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.34fr);--ly-reel-item-min:20rem}}
1
+ @layer ly.reset,ly.tokens,ly.wrappers,ly.primitives,ly.recipes,ly.utilities,ly.personalities;@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-page-padding-inline:clamp(1rem,3vw,3rem);--ly-safe-area-inline:max( env(safe-area-inset-left,0px),env(safe-area-inset-right,0px) );--ly-safe-area-block-start:env(safe-area-inset-top,0px);--ly-safe-area-block-end:env(safe-area-inset-bottom,0px);--ly-wrapper-gutter:var(--ly-page-padding-inline);--ly-profile-gap:var(--ly-space-5);--ly-gap:var(--ly-profile-gap);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-3);--ly-section-padding-block:clamp(3rem,7vh,6rem);--ly-section-padding-block-compact:clamp(1.5rem,3.5vh,3rem);--ly-header-height:4.5rem;--ly-sticky-position:sticky;--ly-cover-min:100vh;--ly-shell-min:100vh;--ly-scroll-max:min(70vh,50rem);--ly-switcher-threshold:42rem;--ly-sidebar-size:18rem;--ly-sidebar-content-min:50%;--ly-grid-columns:12;--ly-grid-min:16rem;--ly-split-min:20rem;--ly-pane-min:18rem;--ly-pane-size:22rem;--ly-media-min:18rem;--ly-media-size:14rem;--ly-reel-item-min:16rem;--ly-reel-item-max:28rem;--ly-frame-ratio:16 / 9;--ly-split-primary:1fr;--ly-split-secondary:1fr;--ly-recipe-rail:18rem;--ly-recipe-aside:22rem;--ly-gallery-min:12rem;--ly-card-grid-min:16rem;--ly-app-shell-base-rows:auto auto minmax(0,1fr) auto auto;--ly-app-shell-medium-areas:"header header" "sidebar main" "aside main" "footer footer";--ly-app-shell-medium-rows:auto auto minmax(0,1fr) auto;--ly-app-shell-medium-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr);--ly-app-shell-wide-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";--ly-app-shell-wide-rows:auto minmax(0,1fr) auto;--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr);--ly-dashboard-medium-areas:"header header" "nav nav" "main aside" "footer footer";--ly-dashboard-medium-columns:minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr);--ly-dashboard-wide-areas:"nav header header" "nav main aside" "nav footer footer";--ly-dashboard-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr);--ly-docs-wide-areas:"header header" "nav main" "nav aside" "footer footer";--ly-docs-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr);--ly-list-detail-wide-areas:"primary secondary" "actions actions";--ly-list-detail-wide-columns:minmax(min(100%,var(--ly-pane-size)),0.7fr) minmax(0,1fr);--ly-split-hero-wide-areas:"content media" "actions media";--ly-split-hero-wide-columns:minmax(0,var(--ly-split-primary,1fr)) minmax(0,var(--ly-split-secondary,1fr));container-name:ly-scope;container-type:inline-size;min-inline-size:0;min-block-size:0}@supports (width:1cqi){:where(.ly-root){--ly-page-padding-inline:clamp(1rem,3cqi,3rem)}}@supports (height:100dvh){:where(.ly-root){--ly-cover-min:100dvh;--ly-shell-min:100dvh;--ly-scroll-max:min(70dvh,50rem)}}}@layer ly.reset{:where(.ly-root),:where(.ly-root *){box-sizing:border-box}:where(.ly-root){margin:0}:where(.ly-root img),:where(.ly-root svg),:where(.ly-root video),:where(.ly-root canvas),:where(.ly-root iframe){max-inline-size:100%}}@layer ly.tokens{@media (max-height:44rem){:where(.ly-root){--ly-gap:min(var(--ly-profile-gap),var(--ly-space-4));--ly-grid-gap:var(--ly-gap);--ly-stack-gap:min(var(--ly-space-4),3vh);--ly-cluster-gap:min(var(--ly-space-3),2vh);--ly-section-padding-block:clamp(1.5rem,6vh,3rem);--ly-section-padding-block-compact:clamp(0.75rem,3vh,1.25rem);--ly-header-height:3.5rem;--ly-scroll-max:min(62vh,34rem)}@supports (height:100dvh){:where(.ly-root){--ly-stack-gap:min(var(--ly-space-4),3dvh);--ly-cluster-gap:min(var(--ly-space-3),2dvh);--ly-section-padding-block:clamp(1.5rem,6dvh,3rem);--ly-section-padding-block-compact:clamp(0.75rem,3dvh,1.25rem);--ly-scroll-max:min(62dvh,34rem)}}}@media (max-height:30rem){:where(.ly-root){--ly-cover-min:auto;--ly-shell-min:auto;--ly-sticky-position:static;--ly-section-padding-block:var(--ly-space-5);--ly-section-padding-block-compact:var(--ly-space-3);--ly-scroll-max:max(12rem,calc(100vh - 8rem))}@supports (height:100dvh){:where(.ly-root){--ly-scroll-max:max(12rem,calc(100dvh - 8rem))}}}}@layer ly.wrappers{.ly-wrapper{--ly-wrapper-max:var(--ly-personality-wrapper-max,var(--ly-wrapper-content));--ly-wrapper-fluid-gutter:var(--ly-wrapper-gutter);--ly-wrapper-local-gutter:max( var(--ly-wrapper-fluid-gutter),var(--ly-safe-area-inline) );container-name:ly-scope;container-type:inline-size;inline-size:min(100%,calc(var(--ly-wrapper-max) + (var(--ly-wrapper-local-gutter) * 2)));max-inline-size:100%;margin-inline:auto;padding-inline:var(--ly-wrapper-local-gutter)}.ly-wrapper--compact{--ly-wrapper-max:var(--ly-wrapper-compact)}.ly-wrapper--prose{--ly-wrapper-max:var(--ly-wrapper-prose)}.ly-wrapper--content{--ly-wrapper-max:var(--ly-wrapper-content)}.ly-wrapper--wide{--ly-wrapper-max:var(--ly-wrapper-wide)}.ly-wrapper--full{--ly-wrapper-max:100%}.ly-wrapper--breakout{--ly-wrapper-max:100%;--ly-breakout-content-size:min( var(--ly-wrapper-content),calc(100% - (var(--ly-wrapper-local-gutter) * 2)) );--ly-breakout-feature-size:min( var(--ly-wrapper-wide),calc(100% - (var(--ly-wrapper-local-gutter) * 2)) );display:grid;grid-template-columns:[full-start] minmax(min(100%,var(--ly-wrapper-local-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-local-gutter)),1fr) [full-end];inline-size:100%;padding-inline:0}.ly-wrapper--breakout>*{grid-column:content;min-inline-size:0;max-inline-size:100%}.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:100vh;min-block-size:100dvh;padding-block-start:var(--ly-safe-area-block-start);padding-block-end:var(--ly-safe-area-block-end)}.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:var(--ly-sticky-position,sticky);inset-block-start:0;z-index:var(--ly-z-header,20)}.ly-section{padding-block:var(--ly-section-padding-block)}.ly-section--compact{padding-block:var(--ly-section-padding-block-compact)}.ly-section--flush{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:100vh;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;min-inline-size:min(100%,var(--ly-sidebar-size))}.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(auto-fit,minmax(min(100%,var(--ly-grid-min)),1fr));gap:var(--ly-grid-gap)}.ly-grid--fixed{grid-template-columns:repeat(var(--ly-grid-columns),minmax(0,1fr))}.ly-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-split-min)),1fr));gap:var(--ly-gap);align-items:var(--ly-split-align,center)}.ly-panes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-pane-min)),1fr));gap:var(--ly-gap)}.ly-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-media-min)),1fr));gap:var(--ly-gap);align-items:var(--ly-media-align,start)}.ly-media>:where(.ly-media__actions,[data-ly-media="actions"]){min-inline-size:min(100%,var(--ly-media-size))}.ly-grid>*,.ly-split>*,.ly-panes>*,.ly-media>*{min-inline-size:0;min-block-size:0}.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;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-x:clip;overflow-y:auto;overscroll-behavior-block:contain}}@layer ly.recipes{:where( [data-ly-recipe="app-shell"],[data-ly-recipe="dashboard"],[data-ly-recipe="docs"],[data-ly-recipe="list-detail"],[data-ly-recipe="split-hero"],[data-ly-recipe="gallery"],[data-ly-recipe="card-grid"] ){container-name:ly-scope;container-type:inline-size;min-inline-size:0;min-block-size:0}:where( [data-ly-recipe="app-shell"],[data-ly-recipe="dashboard"],[data-ly-recipe="docs"],[data-ly-recipe="list-detail"],[data-ly-recipe="split-hero"] ){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap)}[data-ly-recipe="app-shell"]{min-block-size:100vh;min-block-size:var(--ly-shell-min);grid-template-areas:"header" "sidebar" "main" "aside" "footer";grid-template-rows:var(--ly-app-shell-base-rows)}[data-ly-recipe="dashboard"],[data-ly-recipe="docs"]{grid-template-areas:"header" "nav" "main" "aside" "footer"}[data-ly-recipe="list-detail"]{grid-template-areas:"primary" "secondary" "actions"}[data-ly-recipe="split-hero"]{grid-template-areas:"content" "media" "actions";align-items:var(--ly-split-hero-align,center)}[data-ly-recipe="gallery"],[data-ly-recipe="card-grid"]{display:grid;gap:var(--ly-grid-gap)}[data-ly-recipe="gallery"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-gallery-min)),1fr))}[data-ly-recipe="card-grid"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-card-grid-min)),1fr))}:where( [data-ly-recipe="gallery"],[data-ly-recipe="card-grid"] )[data-ly-responsive="manual"]{grid-template-columns:minmax(0,1fr)}:where( [data-ly-recipe="app-shell"],[data-ly-recipe="dashboard"],[data-ly-recipe="docs"],[data-ly-recipe="list-detail"],[data-ly-recipe="split-hero"],[data-ly-recipe="gallery"],[data-ly-recipe="card-grid"] )>*{min-inline-size:0;min-block-size:0}[data-ly-area="header"]{grid-area:header}[data-ly-area="nav"]{grid-area:nav}[data-ly-area="sidebar"]{grid-area:sidebar}[data-ly-area="main"]{grid-area:main}[data-ly-area="aside"]{grid-area:aside}[data-ly-area="footer"]{grid-area:footer}[data-ly-area="content"]{grid-area:content}[data-ly-area="media"]{grid-area:media}[data-ly-area="actions"]{grid-area:actions}[data-ly-area="primary"]{grid-area:primary}[data-ly-area="secondary"]{grid-area:secondary}@container ly-scope (min-width:42rem){[data-ly-recipe="split-hero"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-split-hero-wide-areas);grid-template-columns:var(--ly-split-hero-wide-columns)}}@container ly-scope (min-width:44rem){[data-ly-recipe="list-detail"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-list-detail-wide-areas);grid-template-columns:var(--ly-list-detail-wide-columns)}}@container ly-scope (min-width:48rem){[data-ly-recipe="docs"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-docs-wide-areas);grid-template-columns:var(--ly-docs-wide-columns)}}@container ly-scope (min-width:52rem){[data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-app-shell-medium-areas);grid-template-columns:var(--ly-app-shell-medium-columns);grid-template-rows:var(--ly-app-shell-medium-rows)}[data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-dashboard-medium-areas);grid-template-columns:var(--ly-dashboard-medium-columns)}}@container ly-scope (min-width:72rem){[data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-app-shell-wide-areas);grid-template-columns:var(--ly-app-shell-wide-columns);grid-template-rows:var(--ly-app-shell-wide-rows)}[data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-dashboard-wide-areas);grid-template-columns:var(--ly-dashboard-wide-columns)}}}@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-6{--ly-grid-columns:6}.ly-cols-12{--ly-grid-columns:12}.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-full{grid-column:1 / -1}.ly-gap-0{--ly-gap:var(--ly-space-0);--ly-grid-gap:var(--ly-space-0);--ly-stack-gap:var(--ly-space-0);--ly-cluster-gap:var(--ly-space-0)}.ly-gap-2{--ly-gap:var(--ly-space-2);--ly-grid-gap:var(--ly-space-2);--ly-stack-gap:var(--ly-space-2);--ly-cluster-gap:var(--ly-space-2)}.ly-gap-4{--ly-gap:var(--ly-space-4);--ly-grid-gap:var(--ly-space-4);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-4)}.ly-gap-6{--ly-gap:var(--ly-space-6);--ly-grid-gap:var(--ly-space-6);--ly-stack-gap:var(--ly-space-6);--ly-cluster-gap:var(--ly-space-6)}.ly-gap-8{--ly-gap:var(--ly-space-8);--ly-grid-gap:var(--ly-space-8);--ly-stack-gap:var(--ly-space-8);--ly-cluster-gap:var(--ly-space-8)}.ly-pad-0{padding:var(--ly-space-0)}.ly-pad-2{padding:var(--ly-space-2)}.ly-pad-4{padding:var(--ly-space-4)}.ly-pad-6{padding:var(--ly-space-6)}.ly-pad-8{padding: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:100vh;min-block-size:100dvh}.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-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-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}}@layer ly.personalities.minimal-saas{:where(.ly-root[data-ly-layout="minimal-saas"]){--ly-personality-wrapper-max:88rem;--ly-profile-gap:var(--ly-space-5);--ly-grid-min:16rem;--ly-recipe-rail:15rem;--ly-recipe-aside:16rem;--ly-split-primary:1.05fr;--ly-split-secondary:0.95fr}}@layer ly.personalities.bento{:where(.ly-root[data-ly-layout="bento"]){--ly-personality-wrapper-max:112rem;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:12rem;--ly-card-grid-min:14rem;--ly-gallery-min:11rem;--ly-recipe-rail:14rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header header" "sidebar main main" "aside main main" "footer footer footer";--ly-app-shell-wide-rows:auto auto minmax(0,1fr) auto;--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.3fr) minmax(0,1fr) minmax(0,1fr)}}@layer ly.personalities.maximalist{:where(.ly-root[data-ly-layout="maximalist"]){--ly-personality-wrapper-max:100%;--ly-profile-gap:var(--ly-space-7);--ly-grid-min:10rem;--ly-card-grid-min:13rem;--ly-gallery-min:10rem;--ly-recipe-rail:15rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header header header" "main main sidebar aside" "main main footer footer";--ly-app-shell-wide-columns:minmax(0,1.4fr) minmax(0,0.6fr) minmax(min(100%,var(--ly-recipe-rail)),0.32fr) minmax(min(100%,var(--ly-recipe-aside)),0.38fr)}}@layer ly.personalities.bauhaus{:where(.ly-root[data-ly-layout="bauhaus"]){--ly-personality-wrapper-max:96rem;--ly-profile-gap:var(--ly-space-6);--ly-grid-min:13rem;--ly-recipe-rail:14rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header header header" "sidebar main main aside" "sidebar footer footer aside";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.24fr) minmax(0,0.7fr) minmax(0,1.3fr) minmax(min(100%,var(--ly-recipe-aside)),0.3fr)}}@layer ly.personalities.tactile{:where(.ly-root[data-ly-layout="tactile"]){--ly-personality-wrapper-max:82rem;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:15rem;--ly-recipe-rail:17rem;--ly-recipe-aside:20rem;--ly-app-shell-wide-areas:"header header" "sidebar main" "aside main" "footer footer";--ly-app-shell-wide-rows:auto auto minmax(0,1fr) auto;--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.28fr) minmax(0,1fr);--ly-list-detail-wide-columns:minmax(min(100%,var(--ly-pane-size)),0.5fr) minmax(0,0.9fr)}}@layer ly.personalities.neumorphism{:where(.ly-root[data-ly-layout="neumorphism"]){--ly-personality-wrapper-max:84rem;--ly-profile-gap:var(--ly-space-6);--ly-grid-min:17rem;--ly-recipe-rail:17rem;--ly-recipe-aside:19rem;--ly-app-shell-wide-areas:"header sidebar" "main sidebar" "aside sidebar" "footer sidebar";--ly-app-shell-wide-rows:auto minmax(0,1fr) auto auto;--ly-app-shell-wide-columns:minmax(0,1fr) minmax(min(100%,var(--ly-recipe-rail)),0.3fr);--ly-list-detail-wide-columns:minmax(0,1.1fr) minmax(min(100%,var(--ly-pane-size)),0.7fr)}}@layer ly.personalities.retrofuturism{:where(.ly-root[data-ly-layout="retrofuturism"]){--ly-personality-wrapper-max:106rem;--ly-profile-gap:var(--ly-space-5);--ly-grid-min:14rem;--ly-recipe-rail:14rem;--ly-recipe-aside:17rem;--ly-app-shell-wide-areas:"sidebar header aside" "sidebar main aside" "sidebar footer aside";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.24fr) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.3fr)}}@layer ly.personalities.brutalism{:where(.ly-root[data-ly-layout="brutalism"]){--ly-personality-wrapper-max:100rem;--ly-profile-gap:var(--ly-space-3);--ly-grid-min:14rem;--ly-recipe-rail:16rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header sidebar" "main aside sidebar" "footer footer sidebar";--ly-app-shell-wide-columns:minmax(0,1.3fr) minmax(0,0.7fr) minmax(min(100%,var(--ly-recipe-rail)),0.34fr)}}@layer ly.personalities.cyberpunk{:where(.ly-root[data-ly-layout="cyberpunk"]){--ly-personality-wrapper-max:112rem;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:12rem;--ly-recipe-rail:13rem;--ly-recipe-aside:19rem;--ly-app-shell-wide-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.2fr) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.32fr)}}@layer ly.personalities.y2k{:where(.ly-root[data-ly-layout="y2k"]){--ly-personality-wrapper-max:90rem;--ly-profile-gap:var(--ly-space-6);--ly-grid-min:13rem;--ly-recipe-rail:18rem;--ly-recipe-aside:16rem;--ly-app-shell-wide-areas:"header header sidebar" "aside main sidebar" "footer footer sidebar";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-aside)),0.34fr) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-rail)),0.28fr)}}@layer ly.personalities.retro-glass{:where(.ly-root[data-ly-layout="retro-glass"]){--ly-personality-wrapper-max:104rem;--ly-profile-gap:var(--ly-space-5);--ly-grid-min:15rem;--ly-recipe-rail:18rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header sidebar" "main main sidebar" "aside footer footer";--ly-app-shell-wide-columns:minmax(0,1.25fr) minmax(0,0.75fr) minmax(min(100%,var(--ly-recipe-rail)),0.32fr)}}@layer ly.personalities.f-pattern{:where(.ly-root[data-ly-layout="f-pattern"]){--ly-personality-wrapper-max:92rem;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:14rem;--ly-recipe-rail:16rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.26fr) minmax(0,1.35fr) minmax(min(100%,var(--ly-recipe-aside)),0.65fr);--ly-split-hero-wide-columns:minmax(0,1.8fr) minmax(0,0.8fr)}}@layer ly.personalities.z-pattern{:where(.ly-root[data-ly-layout="z-pattern"]){--ly-personality-wrapper-max:108rem;--ly-profile-gap:var(--ly-space-5);--ly-grid-min:14rem;--ly-recipe-rail:17rem;--ly-recipe-aside:19rem;--ly-app-shell-wide-areas:"header header sidebar" "main aside sidebar" "footer aside sidebar";--ly-app-shell-wide-columns:minmax(0,1.45fr) minmax(min(100%,var(--ly-recipe-aside)),0.55fr) minmax(min(100%,var(--ly-recipe-rail)),0.3fr);--ly-split-hero-wide-columns:minmax(0,1.5fr) minmax(0,0.5fr)}}@layer ly.personalities.split-screen{:where(.ly-root[data-ly-layout="split-screen"]){--ly-personality-wrapper-max:100%;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:20rem;--ly-recipe-rail:24rem;--ly-recipe-aside:24rem;--ly-app-shell-wide-areas:"header header" "main sidebar" "aside sidebar" "footer footer";--ly-app-shell-wide-rows:auto minmax(0,1fr) auto auto;--ly-app-shell-wide-columns:minmax(0,1fr) minmax(0,1fr);--ly-split-hero-wide-columns:minmax(0,1fr) minmax(0,1fr);--ly-list-detail-wide-columns:minmax(0,1fr) minmax(0,1fr)}}@layer ly.personalities.mondrian{:where(.ly-root[data-ly-layout="mondrian"]){--ly-personality-wrapper-max:112rem;--ly-profile-gap:var(--ly-space-3);--ly-grid-min:11rem;--ly-recipe-rail:13rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"sidebar header header" "sidebar main aside" "footer footer aside";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.22fr) minmax(0,1.45fr) minmax(min(100%,var(--ly-recipe-aside)),0.55fr)}}@layer ly.personalities.synthwave{:where(.ly-root[data-ly-layout="synthwave"]){--ly-personality-wrapper-max:112rem;--ly-profile-gap:var(--ly-space-6);--ly-grid-min:14rem;--ly-recipe-rail:16rem;--ly-recipe-aside:20rem;--ly-app-shell-wide-areas:"header header header" "sidebar main aside" "footer footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.28fr) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.34fr);--ly-reel-item-min:20rem}}
package/dist/personalities/bento.css CHANGED
@@ -14,6 +14,7 @@
14
14
  "sidebar main main"
15
15
  "aside main main"
16
16
  "footer footer footer";
17
+ --ly-app-shell-wide-rows: auto auto minmax(0, 1fr) auto;
17
18
  --ly-app-shell-wide-columns:
18
19
  minmax(min(100%, var(--ly-recipe-rail)), 0.3fr)
19
20
  minmax(0, 1fr)
package/dist/personalities/neumorphism.css CHANGED
@@ -12,6 +12,7 @@
12
12
  "main sidebar"
13
13
  "aside sidebar"
14
14
  "footer sidebar";
15
+ --ly-app-shell-wide-rows: auto minmax(0, 1fr) auto auto;
15
16
  --ly-app-shell-wide-columns:
16
17
  minmax(0, 1fr)
17
18
  minmax(min(100%, var(--ly-recipe-rail)), 0.3fr);
package/dist/personalities/split-screen.css CHANGED
@@ -16,6 +16,7 @@
16
16
  "main sidebar"
17
17
  "aside sidebar"
18
18
  "footer footer";
19
+ --ly-app-shell-wide-rows: auto minmax(0, 1fr) auto auto;
19
20
  --ly-app-shell-wide-columns:
20
21
  minmax(0, 1fr)
21
22
  minmax(0, 1fr);
package/dist/personalities/tactile.css CHANGED
@@ -12,6 +12,7 @@
12
12
  "sidebar main"
13
13
  "aside main"
14
14
  "footer footer";
15
+ --ly-app-shell-wide-rows: auto auto minmax(0, 1fr) auto;
15
16
  --ly-app-shell-wide-columns:
16
17
  minmax(min(100%, var(--ly-recipe-rail)), 0.28fr)
17
18
  minmax(0, 1fr);