layout-style-css 2.1.0 → 3.0.0

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 (79) hide show
  1. package/README.md +124 -145
  2. package/dist/core.css +2 -1
  3. package/dist/foundation.css +194 -0
  4. package/dist/layout-style-css.css +527 -941
  5. package/dist/layout-style-css.min.css +1 -1
  6. package/dist/personalities/bauhaus.css +13 -39
  7. package/dist/personalities/bento.css +16 -37
  8. package/dist/personalities/brutalism.css +13 -30
  9. package/dist/personalities/cyberpunk.css +12 -29
  10. package/dist/personalities/f-pattern.css +16 -42
  11. package/dist/personalities/maximalist.css +16 -45
  12. package/dist/personalities/minimal-saas.css +7 -31
  13. package/dist/personalities/mondrian.css +12 -37
  14. package/dist/personalities/neumorphism.css +15 -39
  15. package/dist/personalities/retro-glass.css +14 -39
  16. package/dist/personalities/retrofuturism.css +12 -29
  17. package/dist/personalities/split-screen.css +24 -36
  18. package/dist/personalities/synthwave.css +13 -41
  19. package/dist/personalities/tactile.css +15 -32
  20. package/dist/personalities/y2k.css +13 -30
  21. package/dist/personalities/z-pattern.css +16 -43
  22. package/dist/personalities.css +1 -1
  23. package/dist/primitives.css +27 -63
  24. package/dist/recipes.css +92 -167
  25. package/dist/utilities.css +39 -104
  26. package/dist/wrappers.css +28 -108
  27. package/package.json +12 -24
  28. package/CHANGELOG.md +0 -90
  29. package/CONTRIBUTING.md +0 -55
  30. package/SECURITY.md +0 -50
  31. package/demo/assets/apple-touch-icon.svg +0 -7
  32. package/demo/assets/favicon.svg +0 -7
  33. package/demo/assets/social-card.png +0 -0
  34. package/demo/browserconfig.xml +0 -9
  35. package/demo/demo.css +0 -523
  36. package/demo/demo.js +0 -605
  37. package/demo/index.html +0 -325
  38. package/demo/robots.txt +0 -4
  39. package/demo/site.webmanifest +0 -23
  40. package/demo/sitemap.xml +0 -9
  41. package/dist/integrations/ui-style-kit.css +0 -175
  42. package/dist/legacy.css +0 -787
  43. package/docs/wiki/Contributing.md +0 -36
  44. package/docs/wiki/Demo-And-GitHub-Pages.md +0 -53
  45. package/docs/wiki/Getting-Started.md +0 -51
  46. package/docs/wiki/Home.md +0 -33
  47. package/docs/wiki/Installation-And-CDN.md +0 -72
  48. package/docs/wiki/Layout-Primitives.md +0 -48
  49. package/docs/wiki/Layout-Recipes.md +0 -49
  50. package/docs/wiki/Layout-Styles.md +0 -33
  51. package/docs/wiki/Migrating-To-2.0.md +0 -186
  52. package/docs/wiki/Release-And-Publishing.md +0 -77
  53. package/docs/wiki/Security-And-Support.md +0 -36
  54. package/docs/wiki/UI-Style-Kit-Compatibility.md +0 -49
  55. package/docs/wiki/_Sidebar.md +0 -15
  56. package/styles/core.css +0 -6
  57. package/styles/integrations/ui-style-kit.css +0 -175
  58. package/styles/legacy.css +0 -173
  59. package/styles/personalities/bauhaus.css +0 -46
  60. package/styles/personalities/bento.css +0 -43
  61. package/styles/personalities/brutalism.css +0 -36
  62. package/styles/personalities/cyberpunk.css +0 -36
  63. package/styles/personalities/f-pattern.css +0 -48
  64. package/styles/personalities/maximalist.css +0 -51
  65. package/styles/personalities/minimal-saas.css +0 -37
  66. package/styles/personalities/mondrian.css +0 -44
  67. package/styles/personalities/neumorphism.css +0 -46
  68. package/styles/personalities/retro-glass.css +0 -44
  69. package/styles/personalities/retrofuturism.css +0 -36
  70. package/styles/personalities/split-screen.css +0 -41
  71. package/styles/personalities/synthwave.css +0 -48
  72. package/styles/personalities/tactile.css +0 -39
  73. package/styles/personalities/y2k.css +0 -36
  74. package/styles/personalities/z-pattern.css +0 -49
  75. package/styles/personalities.css +0 -18
  76. package/styles/primitives.css +0 -219
  77. package/styles/recipes.css +0 -270
  78. package/styles/utilities.css +0 -162
  79. package/styles/wrappers.css +0 -174
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # layout-style-css
2
2
 
3
- Container-first, dependency-free structural CSS for responsive application layouts.
3
+ Zero-configuration, dependency-free structural CSS that responds to the width and height a layout actually receives.
4
4
 
5
- `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.
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.
6
6
 
7
7
  ## Requirements
8
8
 
@@ -10,74 +10,51 @@ Container-first, dependency-free structural CSS for responsive application layou
10
10
  - Current evergreen Chromium, Firefox, or WebKit for consumers
11
11
  - No runtime or peer dependencies
12
12
 
13
- `ui-style-kit-css@2.1.0` and `interactive-surface-css@1.5.0` are released registry fixtures for optional ecosystem verification. Neither package is installed for consumers.
14
-
15
13
  ## Install
16
14
 
17
15
  ```bash
18
- npm install layout-style-css@2.1.0
16
+ npm install layout-style-css@3.0.0
19
17
  ```
20
18
 
21
- Standalone use needs one import:
19
+ Most applications need one import:
22
20
 
23
21
  ```js
24
22
  import "layout-style-css";
25
23
  ```
26
24
 
27
- The default and minified bundles contain the v2 core plus all personalities. Import focused modules when an application needs a smaller surface.
28
-
29
- ## Ecosystem Imports
25
+ The full bundle includes the core modules and all personality profiles. No breakpoint configuration, wrapper, JavaScript, or companion library is required.
30
26
 
31
- Layout Style never imports companion packages. Install and import each layer explicitly.
27
+ ## Zero-Configuration Start
32
28
 
33
- Layout plus UI Style Kit:
29
+ Use `.ly-root` as the responsive boundary and keep the mobile DOM order authoritative:
34
30
 
35
- ```js
36
- import "ui-style-kit-css/visual.css";
37
- import "layout-style-css";
38
- ```
39
-
40
- Layout plus UI Style Kit and Interactive Surface must use this order:
41
-
42
- ```js
43
- import "ui-style-kit-css/visual.css";
44
- import "ui-style-kit-css/interactive-surface-theme.css";
45
- import "interactive-surface-css/state-core.css";
46
- import "layout-style-css";
31
+ ```html
32
+ <body class="ly-root" data-ly-layout="minimal-saas">
33
+ <main data-ly-recipe="docs">
34
+ <header data-ly-area="header">Documentation</header>
35
+ <nav data-ly-area="nav" aria-label="Documentation">Navigation</nav>
36
+ <article data-ly-area="main">Guide</article>
37
+ <aside data-ly-area="aside">On this page</aside>
38
+ <footer data-ly-area="footer">Next steps</footer>
39
+ </main>
40
+ </body>
47
41
  ```
48
42
 
49
- UI Style Kit establishes visual paint, the UI token bridge maps theme roles for Interactive Surface, Interactive Surface contributes interaction states, and Layout core applies spatial behavior.
43
+ `.ly-root`, wrappers, and recipe roots establish the named `ly-scope` inline-size container. A recipe works directly in the root; when it is nested in a wrapper, it responds to that nearest wrapper.
50
44
 
51
- ## Public Exports
52
-
53
- | Import | Contents |
54
- | --- | --- |
55
- | `layout-style-css` | Full v2 core plus all personalities. |
56
- | `layout-style-css/min.css` | Minified full v2 bundle. |
57
- | `layout-style-css/core.css` | Wrappers, primitives, recipes, and utilities. |
58
- | `layout-style-css/wrappers.css` | Tokens, reset, and semantic wrappers. |
59
- | `layout-style-css/primitives.css` | Composition primitives. |
60
- | `layout-style-css/recipes.css` | Seven named responsive recipes. |
61
- | `layout-style-css/utilities.css` | Structural utilities and ordering escape hatches. |
62
- | `layout-style-css/personalities.css` | All sixteen personalities. |
63
- | `layout-style-css/personalities/minimal-saas.css` | One personality; substitute any public personality name. |
64
- | `layout-style-css/integrations/ui-style-kit.css` | Deprecated import-free structural bridge for legacy UI Style Kit structural aliases. |
65
- | `layout-style-css/legacy.css` | Full v2 bundle plus v1 compatibility aliases. |
45
+ ## Wrappers
66
46
 
67
- The old root-level personality files and `all-with-ui-kit*` aggregates were removed. See [Migrating To 2.0](docs/wiki/Migrating-To-2.0.md) for exact mappings.
47
+ Wrappers are optional measure and nesting controls. Every wrapper uses logical properties, fluid container-relative gutters, safe-area compensation, and shrink-safe sizing.
68
48
 
69
- ## Container-First Wrappers
70
-
71
- Every `.ly-wrapper` has fluid logical gutters, safe-area compensation, and `container-type: inline-size`. The default is the `72rem` content measure. Personalities may change only the plain-wrapper default; an explicit semantic wrapper variant always retains its documented measure.
72
-
73
- | Wrapper | Measure |
49
+ | Wrapper | Purpose |
74
50
  | --- | --- |
75
- | `.ly-wrapper--compact` | `40rem` |
76
- | `.ly-wrapper--prose` | `68ch` |
77
- | `.ly-wrapper--content` | `72rem` and the default |
78
- | `.ly-wrapper--wide` | `112rem` |
51
+ | `.ly-wrapper` | Personality-aware content measure |
52
+ | `.ly-wrapper--compact` | `40rem` compact measure |
53
+ | `.ly-wrapper--prose` | `68ch` reading measure |
54
+ | `.ly-wrapper--content` | `72rem` content measure |
55
+ | `.ly-wrapper--wide` | `112rem` wide measure |
79
56
  | `.ly-wrapper--full` | Full available inline size |
80
- | `.ly-wrapper--breakout` | Content, feature, and full-width grid lanes |
57
+ | `.ly-wrapper--breakout` | Clamped content, feature, and full lanes |
81
58
 
82
59
  ```html
83
60
  <main class="ly-wrapper ly-wrapper--breakout">
@@ -87,149 +64,151 @@ Every `.ly-wrapper` has fluid logical gutters, safe-area compensation, and `cont
87
64
  </main>
88
65
  ```
89
66
 
90
- 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.
67
+ All lanes clamp to the available inline size, including allocations from 320px through ultrawide screens.
91
68
 
92
- ## Recipes And Areas
69
+ ## Composition Primitives
93
70
 
94
- Use `data-ly-recipe` as the semantic public hook. Each value is independently functional without a matching class; matching classes remain available as an equivalent direct-composition API.
71
+ The core includes:
95
72
 
96
- - `app-shell`
97
- - `dashboard`
98
- - `docs`
99
- - `list-detail`
100
- - `split-hero`
101
- - `gallery`
102
- - `card-grid`
73
+ - `.ly-stack`, `.ly-cluster`, `.ly-center`, and `.ly-cover`
74
+ - `.ly-switcher`, `.ly-sidebar`, `.ly-grid`, and `.ly-split`
75
+ - `.ly-panes` and `.ly-media`
76
+ - `.ly-reel`, `.ly-frame`, and `.ly-scroll`
103
77
 
104
- Named regions use `data-ly-area`: `header`, `nav`, `main`, `aside`, `footer`, `content`, `media`, `actions`, `primary`, and `secondary`.
78
+ Grid and flex primitives wrap intrinsically whenever track wrapping can replace a query. Page, cover, and bounded-scroll sizing use `vh` fallbacks followed by `100dvh`-aware behavior. Only `.ly-reel` deliberately scrolls horizontally; only `.ly-scroll` deliberately creates a bounded vertical scroll region.
105
79
 
106
- ```html
107
- <section class="ly-wrapper ly-wrapper--wide">
108
- <div class="ly-dashboard" data-ly-recipe="dashboard">
109
- <header data-ly-area="header">Dashboard</header>
110
- <nav data-ly-area="nav" aria-label="Dashboard">Navigation</nav>
111
- <main data-ly-area="main">Primary workspace</main>
112
- <aside data-ly-area="aside">Supporting details</aside>
113
- <footer data-ly-area="footer">Status</footer>
114
- </div>
115
- </section>
116
- ```
80
+ ## Automatic Recipe Engine
117
81
 
118
- Keep markup in the correct mobile DOM, reading, and focus order. Built-in recipes rearrange named grid areas at wider container sizes and never use CSS `order`.
82
+ Recipes use attributes only. The stacked semantic source order is always safe, and automatic enhancement is the default.
119
83
 
120
- ## Composition Primitives
84
+ | Recipe | Automatic topology |
85
+ | --- | --- |
86
+ | `data-ly-recipe="split-hero"` | Two tracks at `42rem` |
87
+ | `data-ly-recipe="list-detail"` | Two tracks at `44rem` |
88
+ | `data-ly-recipe="docs"` | Documentation rail at `48rem` |
89
+ | `data-ly-recipe="app-shell"` | Medium at `52rem`, wide at `72rem` |
90
+ | `data-ly-recipe="dashboard"` | Medium at `52rem`, wide at `72rem` |
91
+ | `data-ly-recipe="gallery"` | Intrinsic tracks; no topology breakpoint |
92
+ | `data-ly-recipe="card-grid"` | Intrinsic tracks; no topology breakpoint |
121
93
 
122
- The v2 composition layer includes:
94
+ Canonical regions use `data-ly-area`, including `header`, `sidebar`, `nav`, `main`, `aside`, `footer`, `content`, `media`, `actions`, `primary`, and `secondary`.
123
95
 
124
- | Primitive | Purpose |
125
- | --- | --- |
126
- | `.ly-stack`, `.ly-cluster`, `.ly-center`, `.ly-cover` | Flow, grouping, centering, and full-height composition. |
127
- | `.ly-switcher`, `.ly-sidebar`, `.ly-grid`, `.ly-split` | Adaptive multi-item layouts. |
128
- | `.ly-panes`, `.ly-media` | Workspaces and media-object arrangements. |
129
- | `.ly-reel`, `.ly-frame`, `.ly-scroll` | Horizontal flow, stable ratios, and bounded scrolling. |
96
+ Recipe class aliases such as `.ly-dashboard` no longer exist. Use:
130
97
 
131
- All primitives are structural. Pair them with a paint library or application CSS for visuals.
98
+ ```html
99
+ <section data-ly-recipe="dashboard">
100
+ <header data-ly-area="header">Dashboard</header>
101
+ <nav data-ly-area="nav" aria-label="Dashboard">Navigation</nav>
102
+ <main data-ly-area="main">Primary workspace</main>
103
+ <aside data-ly-area="aside">Supporting details</aside>
104
+ <footer data-ly-area="footer">Status</footer>
105
+ </section>
106
+ ```
132
107
 
133
- ## Layout Personalities
108
+ ## Custom Responsive Topology
134
109
 
135
- Set one canonical `data-ly-layout` value on `.ly-root`:
110
+ Add `data-ly-responsive="manual"` to retain the safe stack and disable built-in topology enhancement. Application CSS can then use the same named container:
136
111
 
137
- ```html
138
- <body class="ly-root" data-ly-layout="synthwave">
139
- <!-- recipes and primitives -->
140
- </body>
112
+ ```css
113
+ @container ly-scope (min-width: 56rem) {
114
+ [data-ly-recipe="docs"][data-ly-responsive="manual"] {
115
+ /* Application-owned topology. */
116
+ }
117
+ }
141
118
  ```
142
119
 
143
- | Family | Personalities |
144
- | --- | --- |
145
- | Left-rail applications | Minimal SaaS, Bauhaus, Tactile, Cyberpunk, F-Pattern |
146
- | Right-rail workspaces | Brutalism, Neumorphism, Y2K, Retro Glass, Z-Pattern |
147
- | Three-zone layouts | Retrofuturism, Mondrian, Synthwave |
148
- | Full-width mosaics | Bento, Maximalist |
149
- | Equal split | Split Screen |
120
+ This opt-out changes topology ownership, not the semantic DOM, shrink safety, gaps, or named regions.
150
121
 
151
- Each personality changes at least two spatial characteristics while leaving UI paint and DOM order unchanged.
122
+ ## Vertical Responsiveness
152
123
 
153
- ## Ordering Utilities And Accessibility
124
+ The system responds to available block size without orientation queries:
154
125
 
155
- The base, `ly-md-*`, and `ly-lg-*` families expose `order-first`, `order-normal`, `order-last`, and numeric order `1` through `6`. For example: `.ly-order-first`, `.ly-md-order-3`, and `.ly-lg-order-last`.
126
+ - At viewport heights of `44rem` or less, gaps, section padding, header height, and bounded-scroll maxima tighten.
127
+ - At viewport heights of `30rem` or less, recipe-owned sticky behavior becomes normal flow, and cover/shell minimums stop forcing full-height regions.
128
+ - Safe-area block insets remain available, and required regions are never hidden solely because the viewport is short.
156
129
 
157
- These are escape hatches. Visual reordering can diverge from screen-reader reading order and keyboard focus order. Prefer correct source order plus recipe named areas; verify assistive-technology and keyboard behavior whenever an order utility is used. Built-in recipes never use order utilities.
130
+ 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`.
158
131
 
159
- ## UI Style Kit Naming Compatibility
132
+ ## Personalities
160
133
 
161
- `layout-style-css/integrations/ui-style-kit.css` remains available for legacy code that still uses UI-prefixed structural aliases such as `.saas-container`, `.bento-grid`, and `.cyber-split`. It is frozen and deprecated; new ecosystem imports should use UI Style Kit visual builds plus Layout core instead of the structural bridge.
134
+ Set one of sixteen canonical `data-ly-layout` values on `.ly-root`:
162
135
 
163
- Deprecated bridge import:
136
+ `minimal-saas`, `bauhaus`, `tactile`, `cyberpunk`, `f-pattern`, `brutalism`, `neumorphism`, `y2k`, `retro-glass`, `z-pattern`, `retrofuturism`, `mondrian`, `synthwave`, `bento`, `maximalist`, or `split-screen`.
164
137
 
165
- ```js
166
- import "layout-style-css/integrations/ui-style-kit.css";
167
- ```
138
+ Each personality is a token/topology profile consumed by the shared recipe engine. A profile changes at least two spatial characteristics—such as measure, gap, rail, media size, card minimum, or ratio—but does not declare its own container or viewport breakpoint system.
168
139
 
169
- Supported UI prefixes are `saas`, `bento`, `max`, `bau`, `tactile`, `neo`, `retro`, `brutal`, `cyber`, `y2k`, and `rg`.
140
+ ## Public Exports
170
141
 
171
- ## Legacy Compatibility
142
+ | Import | Contents |
143
+ | --- | --- |
144
+ | `layout-style-css` | Full v3 bundle |
145
+ | `layout-style-css/min.css` | Minified full v3 bundle |
146
+ | `layout-style-css/core.css` | Foundation, wrappers, primitives, recipes, and utilities |
147
+ | `layout-style-css/foundation.css` | Reset, shared tokens, containment, and vertical responsiveness |
148
+ | `layout-style-css/wrappers.css` | Semantic wrappers and breakout lanes |
149
+ | `layout-style-css/primitives.css` | Intrinsic composition primitives |
150
+ | `layout-style-css/recipes.css` | Seven attribute-only recipes |
151
+ | `layout-style-css/utilities.css` | Small structural utility set |
152
+ | `layout-style-css/personalities.css` | All sixteen profiles |
153
+ | `layout-style-css/personalities/minimal-saas.css` | One profile; substitute any public personality name |
154
+ | `layout-style-css/package.json` | Package metadata |
155
+
156
+ The cascade order is `ly.reset`, `ly.tokens`, `ly.wrappers`, `ly.primitives`, `ly.recipes`, `ly.utilities`, and `ly.personalities`.
157
+
158
+ ## Ecosystem Imports
172
159
 
173
- Applications that cannot migrate all selectors at once may temporarily use:
160
+ Companion libraries are optional and explicit. Layout does not import them.
174
161
 
175
162
  ```js
176
- import "layout-style-css/legacy.css";
163
+ import "ui-style-kit-css/visual.css";
164
+ import "ui-style-kit-css/interactive-surface-theme.css";
165
+ import "interactive-surface-css/state-core.css";
166
+ import "layout-style-css";
177
167
  ```
178
168
 
179
- This one import includes the full v2 bundle and aliases for v1 containers, size names, root personality hooks, columns, carousel, button group, sidebar, pane, card, scroll recipes, `.ly-content` shrink safety, and structural `.ly-divider` spacing. It is supported for the v2 line only, with removal in v3. New code should use canonical v2 exports and hooks.
180
-
181
- The v1 `.ly-surface--raised` selector is intentionally removed, including from `legacy.css`: raised radius, border, background, and shadow treatment belongs to UI Style Kit or application theme styling. See [Migrating To 2.0](docs/wiki/Migrating-To-2.0.md) for the complete selector mapping.
169
+ This order lets UI Style Kit establish paint and theme roles, Interactive Surface add interaction states, and Layout apply structure.
182
170
 
183
171
  ## CDN
184
172
 
185
173
  ```html
186
- <link rel="stylesheet" href="https://unpkg.com/layout-style-css@2.1.0/dist/layout-style-css.min.css">
187
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@2.1.0/dist/layout-style-css.min.css">
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">
188
176
  ```
189
177
 
190
- 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.
178
+ ## Clean-Break Migration
179
+
180
+ v3 has no compatibility bundle. It removes `legacy.css`, the deprecated UI Style Kit structural bridge, v1/v2 aliases, responsive `ly-md-*` and `ly-lg-*` utilities, and all visual-order utilities. See [Migrating To 3.0](docs/wiki/Migrating-To-3.0.md) for exact mappings.
191
181
 
192
- ## Development And Verification
182
+ ## Demo And Verification
183
+
184
+ The demo provides independent width and height controls plus phone, tablet, and desktop portrait/landscape presets. It displays rendered dimensions and active topology, compares automatic with manual responsiveness, and generates canonical copy-ready markup.
193
185
 
194
186
  ```bash
195
187
  npm ci
196
188
  npm run build
197
189
  npm run lint
198
190
  npm run check:demo-js
199
- npm run test:demo:quick
200
191
  npm test
192
+ npm run test:full
193
+ npm run release:verify
201
194
  ```
202
195
 
203
- `npm test` is the local Chromium gate. `npm run test:demo:all` runs Chromium, Firefox, and WebKit. `npm run release:verify` runs the full build, lint, static, Pages, cross-browser, tarball, `npm audit --audit-level=moderate`, and publish-dry-run checks. It does not publish.
196
+ `npm test` runs the quick Chromium gate. `npm run test:full` exercises the rendered matrix in Chromium, Firefox, and WebKit. `npm run release:verify` includes the full build and test gate, tarball verification, `npm audit --audit-level=moderate`, and publish dry-run; it does not publish.
204
197
 
205
- ## Documentation And Wiki
198
+ ## Documentation
206
199
 
207
- | Resource | Purpose |
208
- | --- | --- |
209
- | [Wiki home](docs/wiki/Home.md) | Versioned documentation navigation. |
210
- | [Getting Started](docs/wiki/Getting-Started.md) | First v2 wrapper and recipe. |
211
- | [Installation And CDN](docs/wiki/Installation-And-CDN.md) | Exact exports and import order. |
212
- | [Layout Primitives](docs/wiki/Layout-Primitives.md) | Wrapper and composition contracts. |
213
- | [Layout Recipes](docs/wiki/Layout-Recipes.md) | Recipe and area markup. |
214
- | [Layout Styles](docs/wiki/Layout-Styles.md) | Sixteen personality families. |
215
- | [UI Style Kit Compatibility](docs/wiki/UI-Style-Kit-Compatibility.md) | Ownership and bridge rules. |
216
- | [Migrating To 2.0](docs/wiki/Migrating-To-2.0.md) | Complete 1.x-to-2.0 mapping. |
217
- | [Demo And GitHub Pages](docs/wiki/Demo-And-GitHub-Pages.md) | Rendered QA and Pages artifact. |
218
- | [Release And Publishing](docs/wiki/Release-And-Publishing.md) | Local verification and separately approved release steps. |
219
- | [Security And Support](docs/wiki/Security-And-Support.md) | Supported versions and reporting. |
220
- | [Contributing](docs/wiki/Contributing.md) | Source, generated output, and review rules. |
221
- | [Wiki sidebar source](docs/wiki/_Sidebar.md) | Navigation source for a GitHub Wiki mirror. |
222
- | [Changelog](CHANGELOG.md) | Release history. |
223
- | [Repository contributing guide](CONTRIBUTING.md) | Contribution workflow. |
224
- | [Security policy](SECURITY.md) | Security policy. |
225
-
226
- ## Ownership Boundary
227
-
228
- - `layout-style-css` owns wrappers, flow, grids, areas, measures, spans, containment, and structural responsiveness.
229
- - `ui-style-kit-css` owns theme and component paint.
230
- - `interactive-surface-css` owns interaction-state styling.
231
-
232
- Authored CSS lives in `styles/`; `dist/` is generated. Keep public layout classes prefixed with `ly-`, add tests before changing contracts, and never edit generated CSS directly.
200
+ - [Getting Started](docs/wiki/Getting-Started.md)
201
+ - [Installation And CDN](docs/wiki/Installation-And-CDN.md)
202
+ - [Layout Primitives](docs/wiki/Layout-Primitives.md)
203
+ - [Layout Recipes](docs/wiki/Layout-Recipes.md)
204
+ - [Layout Styles](docs/wiki/Layout-Styles.md)
205
+ - [Migrating To 3.0](docs/wiki/Migrating-To-3.0.md)
206
+ - [Demo And GitHub Pages](docs/wiki/Demo-And-GitHub-Pages.md)
207
+ - [Release And Publishing](docs/wiki/Release-And-Publishing.md)
208
+ - [Security And Support](docs/wiki/Security-And-Support.md)
209
+ - [Changelog](CHANGELOG.md)
210
+
211
+ Authored CSS lives in `styles/`; `dist/` is generated. Keep application markup in correct DOM, reading, keyboard, and focus order.
233
212
 
234
213
  ## License
235
214
 
package/dist/core.css CHANGED
@@ -1,5 +1,6 @@
1
- @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
1
+ @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
2
2
 
3
+ @import url("./foundation.css");
3
4
  @import url("./wrappers.css");
4
5
  @import url("./primitives.css");
5
6
  @import url("./recipes.css");
package/dist/foundation.css ADDED
@@ -0,0 +1,194 @@
1
+ @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
2
+
3
+ /*
4
+ Foundation owns only shared spatial tokens, containment, and defensive
5
+ sizing. Theme and interaction libraries remain responsible for paint.
6
+ */
7
+
8
+ @layer ly.tokens {
9
+ :where(.ly-root) {
10
+ --ly-space-0: 0;
11
+ --ly-space-1: 0.25rem;
12
+ --ly-space-2: 0.5rem;
13
+ --ly-space-3: 0.75rem;
14
+ --ly-space-4: 1rem;
15
+ --ly-space-5: 1.5rem;
16
+ --ly-space-6: 2rem;
17
+ --ly-space-7: 3rem;
18
+ --ly-space-8: 4rem;
19
+ --ly-space-9: 6rem;
20
+
21
+ --ly-wrapper-compact: 40rem;
22
+ --ly-wrapper-prose: 68ch;
23
+ --ly-wrapper-content: 72rem;
24
+ --ly-wrapper-wide: 112rem;
25
+ --ly-page-padding-inline: clamp(1rem, 4vw, 3rem);
26
+ --ly-safe-area-inline: max(
27
+ env(safe-area-inset-left, 0px),
28
+ env(safe-area-inset-right, 0px)
29
+ );
30
+ --ly-safe-area-block-start: env(safe-area-inset-top, 0px);
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));
33
+
34
+ --ly-profile-gap: var(--ly-space-5);
35
+ --ly-gap: var(--ly-profile-gap);
36
+ --ly-grid-gap: var(--ly-gap);
37
+ --ly-stack-gap: var(--ly-space-4);
38
+ --ly-cluster-gap: var(--ly-space-3);
39
+ --ly-section-padding-block: clamp(3rem, 7vh, 6rem);
40
+ --ly-header-height: 4.5rem;
41
+ --ly-sticky-position: sticky;
42
+ --ly-cover-min: 100vh;
43
+ --ly-shell-min: 100vh;
44
+ --ly-scroll-max: min(70vh, 50rem);
45
+
46
+ --ly-switcher-threshold: 42rem;
47
+ --ly-sidebar-size: 18rem;
48
+ --ly-sidebar-content-min: 50%;
49
+ --ly-grid-columns: 12;
50
+ --ly-grid-min: 16rem;
51
+ --ly-split-min: 20rem;
52
+ --ly-pane-min: 18rem;
53
+ --ly-pane-size: 22rem;
54
+ --ly-media-min: 18rem;
55
+ --ly-media-size: 14rem;
56
+ --ly-reel-item-min: 16rem;
57
+ --ly-reel-item-max: 28rem;
58
+ --ly-frame-ratio: 16 / 9;
59
+ --ly-split-primary: 1fr;
60
+ --ly-split-secondary: 1fr;
61
+
62
+ --ly-recipe-rail: 18rem;
63
+ --ly-recipe-aside: 22rem;
64
+ --ly-gallery-min: 12rem;
65
+ --ly-card-grid-min: 16rem;
66
+
67
+ --ly-app-shell-medium-areas:
68
+ "header header"
69
+ "sidebar main"
70
+ "aside main"
71
+ "footer footer";
72
+ --ly-app-shell-medium-columns:
73
+ minmax(min(100%, var(--ly-recipe-rail)), auto)
74
+ minmax(0, 1fr);
75
+ --ly-app-shell-wide-areas:
76
+ "sidebar header header"
77
+ "sidebar main aside"
78
+ "sidebar footer footer";
79
+ --ly-app-shell-wide-columns:
80
+ minmax(min(100%, var(--ly-recipe-rail)), auto)
81
+ minmax(0, 1fr)
82
+ minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
83
+
84
+ --ly-dashboard-medium-areas:
85
+ "header header"
86
+ "nav nav"
87
+ "main aside"
88
+ "footer footer";
89
+ --ly-dashboard-medium-columns:
90
+ minmax(0, 1fr)
91
+ minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
92
+ --ly-dashboard-wide-areas:
93
+ "nav header header"
94
+ "nav main aside"
95
+ "nav footer footer";
96
+ --ly-dashboard-wide-columns:
97
+ minmax(min(100%, var(--ly-recipe-rail)), auto)
98
+ minmax(0, 1fr)
99
+ minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
100
+
101
+ --ly-docs-wide-areas:
102
+ "header header"
103
+ "nav main"
104
+ "nav aside"
105
+ "footer footer";
106
+ --ly-docs-wide-columns:
107
+ minmax(min(100%, var(--ly-recipe-rail)), auto)
108
+ minmax(0, 1fr);
109
+ --ly-list-detail-wide-areas:
110
+ "primary secondary"
111
+ "actions actions";
112
+ --ly-list-detail-wide-columns:
113
+ minmax(min(100%, var(--ly-pane-size)), 0.7fr)
114
+ minmax(0, 1fr);
115
+ --ly-split-hero-wide-areas:
116
+ "content media"
117
+ "actions media";
118
+ --ly-split-hero-wide-columns:
119
+ minmax(0, var(--ly-split-primary, 1fr))
120
+ minmax(0, var(--ly-split-secondary, 1fr));
121
+
122
+ container-name: ly-scope;
123
+ container-type: inline-size;
124
+ min-inline-size: 0;
125
+ min-block-size: 0;
126
+ }
127
+
128
+ /* Enhance viewport-bound tokens only when dynamic viewport units parse. */
129
+ @supports (height: 100dvh) {
130
+ :where(.ly-root) {
131
+ --ly-cover-min: 100dvh;
132
+ --ly-shell-min: 100dvh;
133
+ --ly-scroll-max: min(70dvh, 50rem);
134
+ }
135
+ }
136
+ }
137
+
138
+ @layer ly.reset {
139
+ :where(.ly-root),
140
+ :where(.ly-root *) {
141
+ box-sizing: border-box;
142
+ }
143
+
144
+ :where(.ly-root) {
145
+ margin: 0;
146
+ }
147
+
148
+ :where(.ly-root img),
149
+ :where(.ly-root svg),
150
+ :where(.ly-root video),
151
+ :where(.ly-root canvas),
152
+ :where(.ly-root iframe) {
153
+ max-inline-size: 100%;
154
+ }
155
+ }
156
+
157
+ @layer ly.tokens {
158
+ @media (max-height: 44rem) {
159
+ :where(.ly-root) {
160
+ --ly-gap: min(var(--ly-profile-gap), var(--ly-space-4));
161
+ --ly-grid-gap: var(--ly-gap);
162
+ --ly-stack-gap: min(var(--ly-space-4), 3vh);
163
+ --ly-cluster-gap: min(var(--ly-space-3), 2vh);
164
+ --ly-section-padding-block: clamp(1.5rem, 6vh, 3rem);
165
+ --ly-header-height: 3.5rem;
166
+ --ly-scroll-max: min(62vh, 34rem);
167
+ }
168
+
169
+ @supports (height: 100dvh) {
170
+ :where(.ly-root) {
171
+ --ly-stack-gap: min(var(--ly-space-4), 3dvh);
172
+ --ly-cluster-gap: min(var(--ly-space-3), 2dvh);
173
+ --ly-section-padding-block: clamp(1.5rem, 6dvh, 3rem);
174
+ --ly-scroll-max: min(62dvh, 34rem);
175
+ }
176
+ }
177
+ }
178
+
179
+ @media (max-height: 30rem) {
180
+ :where(.ly-root) {
181
+ --ly-cover-min: auto;
182
+ --ly-shell-min: auto;
183
+ --ly-sticky-position: static;
184
+ --ly-section-padding-block: var(--ly-space-5);
185
+ --ly-scroll-max: max(12rem, calc(100vh - 8rem));
186
+ }
187
+
188
+ @supports (height: 100dvh) {
189
+ :where(.ly-root) {
190
+ --ly-scroll-max: max(12rem, calc(100dvh - 8rem));
191
+ }
192
+ }
193
+ }
194
+ }