layout-style-css 2.0.0 → 2.1.1
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.
- package/CHANGELOG.md +79 -50
- package/CONTRIBUTING.md +43 -43
- package/LICENSE +21 -21
- package/README.md +19 -14
- package/SECURITY.md +39 -39
- package/demo/assets/apple-touch-icon.svg +7 -7
- package/demo/assets/favicon.svg +7 -7
- package/demo/browserconfig.xml +9 -9
- package/demo/demo.js +128 -43
- package/demo/index.html +20 -18
- package/demo/robots.txt +4 -4
- package/demo/site.webmanifest +23 -23
- package/demo/sitemap.xml +9 -9
- package/dist/integrations/ui-style-kit.css +162 -162
- package/dist/layout-style-css.css +147 -104
- package/dist/layout-style-css.min.css +1 -1
- package/dist/legacy.css +137 -102
- package/dist/personalities/bauhaus.css +10 -7
- package/dist/personalities/bento.css +15 -12
- package/dist/personalities/brutalism.css +8 -5
- package/dist/personalities/cyberpunk.css +8 -5
- package/dist/personalities/f-pattern.css +14 -11
- package/dist/personalities/maximalist.css +17 -14
- package/dist/personalities/minimal-saas.css +8 -6
- package/dist/personalities/mondrian.css +10 -7
- package/dist/personalities/neumorphism.css +2 -2
- package/dist/personalities/retro-glass.css +10 -7
- package/dist/personalities/retrofuturism.css +8 -5
- package/dist/personalities/split-screen.css +1 -1
- package/dist/personalities/synthwave.css +2 -2
- package/dist/personalities/tactile.css +1 -1
- package/dist/personalities/y2k.css +8 -5
- package/dist/personalities/z-pattern.css +15 -12
- package/dist/recipes.css +10 -2
- package/docs/wiki/Demo-And-GitHub-Pages.md +1 -1
- package/docs/wiki/Getting-Started.md +1 -1
- package/docs/wiki/Home.md +4 -4
- package/docs/wiki/Installation-And-CDN.md +8 -9
- package/docs/wiki/Layout-Recipes.md +1 -1
- package/docs/wiki/Layout-Styles.md +1 -1
- package/docs/wiki/Migrating-To-2.0.md +7 -7
- package/docs/wiki/Release-And-Publishing.md +10 -8
- package/docs/wiki/UI-Style-Kit-Compatibility.md +8 -9
- package/package.json +78 -78
- package/styles/integrations/ui-style-kit.css +162 -162
- package/styles/personalities/bauhaus.css +10 -7
- package/styles/personalities/bento.css +15 -12
- package/styles/personalities/brutalism.css +8 -5
- package/styles/personalities/cyberpunk.css +8 -5
- package/styles/personalities/f-pattern.css +14 -11
- package/styles/personalities/maximalist.css +17 -14
- package/styles/personalities/minimal-saas.css +8 -6
- package/styles/personalities/mondrian.css +10 -7
- package/styles/personalities/neumorphism.css +2 -2
- package/styles/personalities/retro-glass.css +10 -7
- package/styles/personalities/retrofuturism.css +8 -5
- package/styles/personalities/split-screen.css +1 -1
- package/styles/personalities/synthwave.css +2 -2
- package/styles/personalities/tactile.css +1 -1
- package/styles/personalities/y2k.css +8 -5
- package/styles/personalities/z-pattern.css +15 -12
- package/styles/recipes.css +10 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,7 +1,36 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
3
|
All notable changes to `layout-style-css` are documented here. This project follows semantic versioning.
|
|
4
4
|
|
|
5
|
+
## [2.1.1] - 2026-07-27
|
|
6
|
+
|
|
7
|
+
### Fixed
|
|
8
|
+
|
|
9
|
+
- Made personality enhancements query the nearest inline-size container while preserving the named personality containment scope for compatibility.
|
|
10
|
+
- Deferred three- and four-track application-shell signatures until their local container reaches `64rem`; existing safe two-track signatures retain their authored thresholds.
|
|
11
|
+
- 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.
|
|
12
|
+
|
|
13
|
+
### Tests
|
|
14
|
+
|
|
15
|
+
- 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.
|
|
16
|
+
- Added static contracts for nearest-container personality queries and distinct Dashboard and Docs wide geometry.
|
|
17
|
+
|
|
18
|
+
### Security
|
|
19
|
+
|
|
20
|
+
- 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.
|
|
21
|
+
|
|
22
|
+
## [2.1.0] - 2026-07-20
|
|
23
|
+
|
|
24
|
+
### Changed
|
|
25
|
+
|
|
26
|
+
- 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.
|
|
27
|
+
- Kept `layout-style-css/integrations/ui-style-kit.css` available as a frozen deprecated structural bridge for legacy UI-prefixed layout aliases.
|
|
28
|
+
- Updated release metadata and the GitHub Pages demo to identify the 2.1.0 package line.
|
|
29
|
+
|
|
30
|
+
### Tests
|
|
31
|
+
|
|
32
|
+
- 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.
|
|
33
|
+
|
|
5
34
|
## [2.0.0] - 2026-07-19
|
|
6
35
|
|
|
7
36
|
### Breaking
|
|
@@ -28,51 +57,51 @@ All notable changes to `layout-style-css` are documented here. This project foll
|
|
|
28
57
|
- Documented the all-three import order as UI Style Kit bridge, Interactive Surface `state-core.css`, Layout integration bridge, then Layout core.
|
|
29
58
|
- Kept the upcoming UI Style Kit revision as a follow-up outside this release.
|
|
30
59
|
- 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.
|
|
31
|
-
|
|
32
|
-
## [1.1.2] - 2026-07-08
|
|
33
|
-
|
|
34
|
-
### Fixed
|
|
35
|
-
|
|
36
|
-
- Reissued the release metadata, package lock, README install examples, wiki checklist, and publish workflow recovery tag under `1.1.2`.
|
|
37
|
-
- Kept the additive `1.1.1` CSS and documentation contract intact while moving the publish target to a clean patch version.
|
|
38
|
-
|
|
39
|
-
## [1.1.1] - 2026-07-05
|
|
40
|
-
|
|
41
|
-
### Added
|
|
42
|
-
|
|
43
|
-
- Added versioned wiki documentation under `docs/wiki` for installation, layout primitives, recipes, UI Style Kit compatibility, demo deployment, publishing, security, and contribution workflows.
|
|
44
|
-
- Added UI Style Kit-compatible structural aliases for `saas`, `bento`, `max`, `bau`, `tactile`, `neo`, `retro`, `brutal`, `cyber`, `y2k`, and `rg` prefixes.
|
|
45
|
-
- Added layout recipe helpers for button groups, card grids, card sizing, galleries, and carousels.
|
|
46
|
-
- Added F-Pattern, Z-Pattern, Split-Screen, Mondrian, and Synthwave layout styles.
|
|
47
|
-
- Added `layout-style-css/all-with-ui-kit-and-interactive-surface.css` for the three-library import path.
|
|
48
|
-
- Added direct `./dist/*.css` package exports for consumers that need generated dist files.
|
|
49
|
-
- Added `CHANGELOG.md`, `CONTRIBUTING.md`, and `SECURITY.md` to the release documentation set.
|
|
50
|
-
|
|
51
|
-
### Changed
|
|
52
|
-
|
|
53
|
-
- Reworked the demo mobile controls into a compact drawer so the sticky header does not consume the mobile viewport.
|
|
54
|
-
- Expanded the demo to cover app shell, wrappers, split layouts, sidebars, panes, button groups, card grids, card sizes, galleries, carousels, frames, and scroll areas.
|
|
55
|
-
- Updated README examples to use exported CSS entrypoints and valid CDN links.
|
|
56
|
-
- Updated npm release metadata, package file allowlist, and release verification scripts for the `1.1.1` package.
|
|
57
|
-
- Updated the npm publish workflow to publish from `release.published` events and explicit `workflow_dispatch` tags.
|
|
58
|
-
|
|
59
|
-
### Fixed
|
|
60
|
-
|
|
61
|
-
- Fixed README quick-start imports that referenced non-exported paths.
|
|
62
|
-
- Fixed malformed UI Style Kit CDN link markup in the README.
|
|
63
|
-
- Clarified responsive column utility documentation so class groups do not imply bare numeric class names.
|
|
64
|
-
- Preserved GitHub Pages artifact generation with a Pages-root `index.html`.
|
|
65
|
-
- Fixed the release automation path so draft releases can be published before the npm workflow runs.
|
|
66
|
-
|
|
67
|
-
### Security
|
|
68
|
-
|
|
69
|
-
- Kept the layout CSS contract free of visual properties owned by `ui-style-kit-css`.
|
|
70
|
-
- Kept the package CSS-only at runtime with no network calls, dynamic script execution, or secret handling.
|
|
71
|
-
- Added release verification coverage for npm pack contents and documentation completeness.
|
|
72
|
-
|
|
73
|
-
## [1.0.0]
|
|
74
|
-
|
|
75
|
-
### Added
|
|
76
|
-
|
|
77
|
-
- Initial public release of layout primitives, layout style files, generated dist bundles, and demo coverage.
|
|
78
|
-
|
|
60
|
+
|
|
61
|
+
## [1.1.2] - 2026-07-08
|
|
62
|
+
|
|
63
|
+
### Fixed
|
|
64
|
+
|
|
65
|
+
- Reissued the release metadata, package lock, README install examples, wiki checklist, and publish workflow recovery tag under `1.1.2`.
|
|
66
|
+
- Kept the additive `1.1.1` CSS and documentation contract intact while moving the publish target to a clean patch version.
|
|
67
|
+
|
|
68
|
+
## [1.1.1] - 2026-07-05
|
|
69
|
+
|
|
70
|
+
### Added
|
|
71
|
+
|
|
72
|
+
- Added versioned wiki documentation under `docs/wiki` for installation, layout primitives, recipes, UI Style Kit compatibility, demo deployment, publishing, security, and contribution workflows.
|
|
73
|
+
- Added UI Style Kit-compatible structural aliases for `saas`, `bento`, `max`, `bau`, `tactile`, `neo`, `retro`, `brutal`, `cyber`, `y2k`, and `rg` prefixes.
|
|
74
|
+
- Added layout recipe helpers for button groups, card grids, card sizing, galleries, and carousels.
|
|
75
|
+
- Added F-Pattern, Z-Pattern, Split-Screen, Mondrian, and Synthwave layout styles.
|
|
76
|
+
- Added `layout-style-css/all-with-ui-kit-and-interactive-surface.css` for the three-library import path.
|
|
77
|
+
- Added direct `./dist/*.css` package exports for consumers that need generated dist files.
|
|
78
|
+
- Added `CHANGELOG.md`, `CONTRIBUTING.md`, and `SECURITY.md` to the release documentation set.
|
|
79
|
+
|
|
80
|
+
### Changed
|
|
81
|
+
|
|
82
|
+
- Reworked the demo mobile controls into a compact drawer so the sticky header does not consume the mobile viewport.
|
|
83
|
+
- Expanded the demo to cover app shell, wrappers, split layouts, sidebars, panes, button groups, card grids, card sizes, galleries, carousels, frames, and scroll areas.
|
|
84
|
+
- Updated README examples to use exported CSS entrypoints and valid CDN links.
|
|
85
|
+
- Updated npm release metadata, package file allowlist, and release verification scripts for the `1.1.1` package.
|
|
86
|
+
- Updated the npm publish workflow to publish from `release.published` events and explicit `workflow_dispatch` tags.
|
|
87
|
+
|
|
88
|
+
### Fixed
|
|
89
|
+
|
|
90
|
+
- Fixed README quick-start imports that referenced non-exported paths.
|
|
91
|
+
- Fixed malformed UI Style Kit CDN link markup in the README.
|
|
92
|
+
- Clarified responsive column utility documentation so class groups do not imply bare numeric class names.
|
|
93
|
+
- Preserved GitHub Pages artifact generation with a Pages-root `index.html`.
|
|
94
|
+
- Fixed the release automation path so draft releases can be published before the npm workflow runs.
|
|
95
|
+
|
|
96
|
+
### Security
|
|
97
|
+
|
|
98
|
+
- Kept the layout CSS contract free of visual properties owned by `ui-style-kit-css`.
|
|
99
|
+
- Kept the package CSS-only at runtime with no network calls, dynamic script execution, or secret handling.
|
|
100
|
+
- Added release verification coverage for npm pack contents and documentation completeness.
|
|
101
|
+
|
|
102
|
+
## [1.0.0]
|
|
103
|
+
|
|
104
|
+
### Added
|
|
105
|
+
|
|
106
|
+
- Initial public release of layout primitives, layout style files, generated dist bundles, and demo coverage.
|
|
107
|
+
|
package/CONTRIBUTING.md
CHANGED
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
# Contributing
|
|
2
|
-
|
|
3
|
-
Thanks for improving `layout-style-css`. This repository is a CSS layout library, so changes should keep structure, spacing, responsive behavior, and package contracts separate from visual styling.
|
|
4
|
-
|
|
5
|
-
## Local Setup
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install
|
|
1
|
+
# Contributing
|
|
2
|
+
|
|
3
|
+
Thanks for improving `layout-style-css`. This repository is a CSS layout library, so changes should keep structure, spacing, responsive behavior, and package contracts separate from visual styling.
|
|
4
|
+
|
|
5
|
+
## Local Setup
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install
|
|
9
9
|
npm run build
|
|
10
10
|
npm run lint
|
|
11
11
|
npm run check:demo-js
|
|
12
12
|
npm test
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
Run the full release gate before opening a release PR:
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
npm run release:verify
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## Development Rules
|
|
22
|
-
|
|
23
|
-
- Keep authored CSS in `styles/`.
|
|
24
|
-
- Regenerate `dist/` with `npm run build`; do not hand-edit generated dist files.
|
|
25
|
-
- Keep public layout classes prefixed with `ly-`.
|
|
26
|
-
- Leave colors, typography, borders, shadows, native controls, focus states, themes, and modes to `ui-style-kit-css`.
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Run the full release gate before opening a release PR:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm run release:verify
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Development Rules
|
|
22
|
+
|
|
23
|
+
- Keep authored CSS in `styles/`.
|
|
24
|
+
- Regenerate `dist/` with `npm run build`; do not hand-edit generated dist files.
|
|
25
|
+
- Keep public layout classes prefixed with `ly-`.
|
|
26
|
+
- Leave colors, typography, borders, shadows, native controls, focus states, themes, and modes to `ui-style-kit-css`.
|
|
27
27
|
- Add structural aliases in `styles/integrations/ui-style-kit.css` only when they map to layout primitives or layout recipes.
|
|
28
28
|
- Preserve semantic mobile DOM, reading, and focus order; built-in recipes must use named areas instead of `order`.
|
|
29
29
|
- Test container behavior below and above `48rem` and `64rem`.
|
|
30
|
-
- Update README, `docs/wiki`, and `CHANGELOG.md` when a public class, export, recipe, release workflow, or package behavior changes.
|
|
31
|
-
|
|
32
|
-
## Testing Expectations
|
|
33
|
-
|
|
34
|
-
Every change that affects public behavior should update or preserve:
|
|
35
|
-
|
|
30
|
+
- Update README, `docs/wiki`, and `CHANGELOG.md` when a public class, export, recipe, release workflow, or package behavior changes.
|
|
31
|
+
|
|
32
|
+
## Testing Expectations
|
|
33
|
+
|
|
34
|
+
Every change that affects public behavior should update or preserve:
|
|
35
|
+
|
|
36
36
|
- `test/layout-css-contract.test.mjs` for package, CSS, docs, and tarball contracts.
|
|
37
37
|
- `test/release-docs-contract.test.mjs` for current documentation and workflow contracts.
|
|
38
38
|
- `test/demo-smoke.test.mjs` for rendered demo behavior.
|
|
39
|
-
- `test/pages-artifact.test.mjs` for GitHub Pages output.
|
|
40
|
-
- `stylelint` for authored CSS formatting.
|
|
41
|
-
|
|
42
|
-
## Review Checklist
|
|
43
|
-
|
|
44
|
-
- The package remains publishable as a public npm library.
|
|
45
|
-
- The npm tarball contains only intended release files.
|
|
46
|
-
- README examples use exported package entrypoints.
|
|
47
|
-
- Documentation links resolve to versioned files.
|
|
39
|
+
- `test/pages-artifact.test.mjs` for GitHub Pages output.
|
|
40
|
+
- `stylelint` for authored CSS formatting.
|
|
41
|
+
|
|
42
|
+
## Review Checklist
|
|
43
|
+
|
|
44
|
+
- The package remains publishable as a public npm library.
|
|
45
|
+
- The npm tarball contains only intended release files.
|
|
46
|
+
- README examples use exported package entrypoints.
|
|
47
|
+
- Documentation links resolve to versioned files.
|
|
48
48
|
- Demo controls remain compact on mobile and tablet viewports.
|
|
49
49
|
- Chromium, Firefox, and WebKit pass for release-facing rendered changes.
|
|
50
|
-
- New CSS does not introduce UI Style Kit-owned visual declarations.
|
|
51
|
-
|
|
52
|
-
## Wiki Updates
|
|
53
|
-
|
|
54
|
-
The source for the project wiki is `docs/wiki/`. If GitHub Wiki is enabled for the repository, mirror those files into the wiki remote after the main branch documentation is merged.
|
|
55
|
-
|
|
50
|
+
- New CSS does not introduce UI Style Kit-owned visual declarations.
|
|
51
|
+
|
|
52
|
+
## Wiki Updates
|
|
53
|
+
|
|
54
|
+
The source for the project wiki is `docs/wiki/`. If GitHub Wiki is enabled for the repository, mirror those files into the wiki remote after the main branch documentation is merged.
|
|
55
|
+
|
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2026 Foscat
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Foscat
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Container-first, dependency-free structural CSS for responsive application layouts.
|
|
4
4
|
|
|
5
|
-
`layout-style-css@2.
|
|
5
|
+
`layout-style-css@2.1.1` provides semantic wrappers, composition primitives, seven functional recipes, ordering escape hatches, sixteen spatial personalities, and refreshed ecosystem fixtures for UI Style Kit CSS 2.1 and Interactive Surface CSS 1.5. It owns layout only; color, typography, borders, shadows, component paint, and interactive states belong to other libraries.
|
|
6
6
|
|
|
7
7
|
## Requirements
|
|
8
8
|
|
|
@@ -10,12 +10,12 @@ 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.0
|
|
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
14
|
|
|
15
15
|
## Install
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
|
-
npm install layout-style-css@2.
|
|
18
|
+
npm install layout-style-css@2.1.1
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
Standalone use needs one import:
|
|
@@ -33,21 +33,20 @@ Layout Style never imports companion packages. Install and import each layer exp
|
|
|
33
33
|
Layout plus UI Style Kit:
|
|
34
34
|
|
|
35
35
|
```js
|
|
36
|
-
import "ui-style-kit-css/
|
|
37
|
-
import "layout-style-css/integrations/ui-style-kit.css";
|
|
36
|
+
import "ui-style-kit-css/visual.css";
|
|
38
37
|
import "layout-style-css";
|
|
39
38
|
```
|
|
40
39
|
|
|
41
40
|
Layout plus UI Style Kit and Interactive Surface must use this order:
|
|
42
41
|
|
|
43
42
|
```js
|
|
44
|
-
import "ui-style-kit-css/
|
|
43
|
+
import "ui-style-kit-css/visual.css";
|
|
44
|
+
import "ui-style-kit-css/interactive-surface-theme.css";
|
|
45
45
|
import "interactive-surface-css/state-core.css";
|
|
46
|
-
import "layout-style-css/integrations/ui-style-kit.css";
|
|
47
46
|
import "layout-style-css";
|
|
48
47
|
```
|
|
49
48
|
|
|
50
|
-
|
|
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.
|
|
51
50
|
|
|
52
51
|
## Public Exports
|
|
53
52
|
|
|
@@ -62,7 +61,7 @@ The UI Style Kit bridge establishes its visual tokens, Interactive Surface contr
|
|
|
62
61
|
| `layout-style-css/utilities.css` | Structural utilities and ordering escape hatches. |
|
|
63
62
|
| `layout-style-css/personalities.css` | All sixteen personalities. |
|
|
64
63
|
| `layout-style-css/personalities/minimal-saas.css` | One personality; substitute any public personality name. |
|
|
65
|
-
| `layout-style-css/integrations/ui-style-kit.css` |
|
|
64
|
+
| `layout-style-css/integrations/ui-style-kit.css` | Deprecated import-free structural bridge for legacy UI Style Kit structural aliases. |
|
|
66
65
|
| `layout-style-css/legacy.css` | Full v2 bundle plus v1 compatibility aliases. |
|
|
67
66
|
|
|
68
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.
|
|
@@ -88,7 +87,7 @@ Every `.ly-wrapper` has fluid logical gutters, safe-area compensation, and `cont
|
|
|
88
87
|
</main>
|
|
89
88
|
```
|
|
90
89
|
|
|
91
|
-
Wrappers
|
|
90
|
+
Wrappers, recipe roots, and personality enhancements respond to the nearest inline-size container. The mobile single-column fallback is authoritative; core recipes and primitives enhance at the `48rem` and `64rem` core thresholds, not viewport widths. Personality grid rhythms retain their authored thresholds, safe two-track application shells retain their authored thresholds, and every three- or four-track application shell waits for a locally feasible `64rem` allocation.
|
|
92
91
|
|
|
93
92
|
## Recipes And Areas
|
|
94
93
|
|
|
@@ -159,7 +158,13 @@ These are escape hatches. Visual reordering can diverge from screen-reader readi
|
|
|
159
158
|
|
|
160
159
|
## UI Style Kit Naming Compatibility
|
|
161
160
|
|
|
162
|
-
|
|
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.
|
|
162
|
+
|
|
163
|
+
Deprecated bridge import:
|
|
164
|
+
|
|
165
|
+
```js
|
|
166
|
+
import "layout-style-css/integrations/ui-style-kit.css";
|
|
167
|
+
```
|
|
163
168
|
|
|
164
169
|
Supported UI prefixes are `saas`, `bento`, `max`, `bau`, `tactile`, `neo`, `retro`, `brutal`, `cyber`, `y2k`, and `rg`.
|
|
165
170
|
|
|
@@ -178,11 +183,11 @@ The v1 `.ly-surface--raised` selector is intentionally removed, including from `
|
|
|
178
183
|
## CDN
|
|
179
184
|
|
|
180
185
|
```html
|
|
181
|
-
<link rel="stylesheet" href="https://unpkg.com/layout-style-css@2.
|
|
182
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@2.
|
|
186
|
+
<link rel="stylesheet" href="https://unpkg.com/layout-style-css@2.1.1/dist/layout-style-css.min.css">
|
|
187
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@2.1.1/dist/layout-style-css.min.css">
|
|
183
188
|
```
|
|
184
189
|
|
|
185
|
-
Companion CDN styles must appear in the same order as the package imports: UI Style Kit
|
|
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.
|
|
186
191
|
|
|
187
192
|
## Development And Verification
|
|
188
193
|
|
package/SECURITY.md
CHANGED
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
# Security Policy
|
|
2
|
-
|
|
3
|
-
`layout-style-css` is a CSS-only layout package. It does not execute JavaScript at runtime, make network requests, process user input, store credentials, or read secrets.
|
|
4
|
-
|
|
5
|
-
## Supported Versions
|
|
6
|
-
|
|
1
|
+
# Security Policy
|
|
2
|
+
|
|
3
|
+
`layout-style-css` is a CSS-only layout package. It does not execute JavaScript at runtime, make network requests, process user input, store credentials, or read secrets.
|
|
4
|
+
|
|
5
|
+
## Supported Versions
|
|
6
|
+
|
|
7
7
|
| Version | Supported |
|
|
8
8
|
| --- | --- |
|
|
9
9
|
| `2.x` | Yes |
|
|
10
10
|
| `1.1.x` | Migration support only |
|
|
11
11
|
| `1.0.x` | No |
|
|
12
|
-
|
|
13
|
-
## Reporting A Vulnerability
|
|
14
|
-
|
|
15
|
-
Use GitHub security advisories for private reports when available. If advisories are not enabled, open a minimal GitHub issue that avoids public exploit details and asks for a private coordination path.
|
|
16
|
-
|
|
17
|
-
Please include:
|
|
18
|
-
|
|
19
|
-
- affected version and package entrypoint
|
|
20
|
-
- affected selector, file, or demo behavior
|
|
21
|
-
- reproduction steps
|
|
22
|
-
- expected impact
|
|
23
|
-
- whether the issue affects package consumers, the demo, or GitHub Pages deployment
|
|
24
|
-
|
|
25
|
-
## Security Model
|
|
26
|
-
|
|
27
|
-
The primary security risks for this package are supply-chain and documentation risks:
|
|
28
|
-
|
|
29
|
-
- incorrect package exports that make consumers import unexpected files
|
|
30
|
-
- malformed CDN examples that point to wrong assets
|
|
31
|
-
- accidental runtime JavaScript or network behavior in docs or demo code
|
|
32
|
-
- package contents that include secrets, build caches, or unrelated local files
|
|
33
|
-
- CSS that hides important controls or breaks keyboard-visible flows in the demo
|
|
34
|
-
|
|
12
|
+
|
|
13
|
+
## Reporting A Vulnerability
|
|
14
|
+
|
|
15
|
+
Use GitHub security advisories for private reports when available. If advisories are not enabled, open a minimal GitHub issue that avoids public exploit details and asks for a private coordination path.
|
|
16
|
+
|
|
17
|
+
Please include:
|
|
18
|
+
|
|
19
|
+
- affected version and package entrypoint
|
|
20
|
+
- affected selector, file, or demo behavior
|
|
21
|
+
- reproduction steps
|
|
22
|
+
- expected impact
|
|
23
|
+
- whether the issue affects package consumers, the demo, or GitHub Pages deployment
|
|
24
|
+
|
|
25
|
+
## Security Model
|
|
26
|
+
|
|
27
|
+
The primary security risks for this package are supply-chain and documentation risks:
|
|
28
|
+
|
|
29
|
+
- incorrect package exports that make consumers import unexpected files
|
|
30
|
+
- malformed CDN examples that point to wrong assets
|
|
31
|
+
- accidental runtime JavaScript or network behavior in docs or demo code
|
|
32
|
+
- package contents that include secrets, build caches, or unrelated local files
|
|
33
|
+
- CSS that hides important controls or breaks keyboard-visible flows in the demo
|
|
34
|
+
|
|
35
35
|
The release gate verifies package contents, README imports, documentation links, CSS contracts, GitHub Pages artifact structure, and rendered behavior in Chromium, Firefox, and WebKit.
|
|
36
|
-
|
|
37
|
-
## Dependency Checks
|
|
38
|
-
|
|
39
|
-
Run the local dependency audit before publishing:
|
|
40
|
-
|
|
41
|
-
```bash
|
|
42
|
-
npm audit --audit-level=moderate
|
|
43
|
-
```
|
|
44
|
-
|
|
36
|
+
|
|
37
|
+
## Dependency Checks
|
|
38
|
+
|
|
39
|
+
Run the local dependency audit before publishing:
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
npm audit --audit-level=moderate
|
|
43
|
+
```
|
|
44
|
+
|
|
45
45
|
The package also uses `npm run release:verify` to run build, lint, static, Pages, cross-browser, pack dry-run, and publish dry-run checks.
|
|
46
46
|
|
|
47
47
|
The npm workflow validates a strict tag, exact peeled commit, protected-main ancestry, and package version before dependency lifecycle code runs. Publishing requires the protected `npm` GitHub Environment, emits npm provenance, and exposes `NODE_AUTH_TOKEN` only to the publish step. npm trusted publishing and immutable commit SHA pins for GitHub Actions remain follow-up hardening work.
|
|
48
48
|
|
|
49
49
|
The demo's two exact-version companion CDN fixtures use SHA-384 subresource integrity with anonymous CORS. Their hashes are derived from the pinned local development fixtures and enforced by the rendered smoke contract.
|
|
50
|
-
|
|
50
|
+
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" role="img" aria-labelledby="title">
|
|
2
|
-
<title id="title">layout-style-css app icon</title>
|
|
3
|
-
<rect width="180" height="180" rx="40" fill="#111827"/>
|
|
4
|
-
<rect x="30" y="34" width="40" height="112" rx="12" fill="#7dd3fc"/>
|
|
5
|
-
<rect x="88" y="34" width="62" height="44" rx="12" fill="#fbbf24"/>
|
|
6
|
-
<rect x="88" y="100" width="62" height="46" rx="12" fill="#f472b6"/>
|
|
7
|
-
</svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" role="img" aria-labelledby="title">
|
|
2
|
+
<title id="title">layout-style-css app icon</title>
|
|
3
|
+
<rect width="180" height="180" rx="40" fill="#111827"/>
|
|
4
|
+
<rect x="30" y="34" width="40" height="112" rx="12" fill="#7dd3fc"/>
|
|
5
|
+
<rect x="88" y="34" width="62" height="44" rx="12" fill="#fbbf24"/>
|
|
6
|
+
<rect x="88" y="100" width="62" height="46" rx="12" fill="#f472b6"/>
|
|
7
|
+
</svg>
|
package/demo/assets/favicon.svg
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title">
|
|
2
|
-
<title id="title">layout-style-css favicon</title>
|
|
3
|
-
<rect width="64" height="64" rx="14" fill="#111827"/>
|
|
4
|
-
<rect x="10" y="12" width="14" height="40" rx="4" fill="#7dd3fc"/>
|
|
5
|
-
<rect x="30" y="12" width="24" height="16" rx="4" fill="#fbbf24"/>
|
|
6
|
-
<rect x="30" y="36" width="24" height="16" rx="4" fill="#f472b6"/>
|
|
7
|
-
</svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title">
|
|
2
|
+
<title id="title">layout-style-css favicon</title>
|
|
3
|
+
<rect width="64" height="64" rx="14" fill="#111827"/>
|
|
4
|
+
<rect x="10" y="12" width="14" height="40" rx="4" fill="#7dd3fc"/>
|
|
5
|
+
<rect x="30" y="12" width="24" height="16" rx="4" fill="#fbbf24"/>
|
|
6
|
+
<rect x="30" y="36" width="24" height="16" rx="4" fill="#f472b6"/>
|
|
7
|
+
</svg>
|
package/demo/browserconfig.xml
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
-
<browserconfig>
|
|
3
|
-
<msapplication>
|
|
4
|
-
<tile>
|
|
5
|
-
<square150x150logo src="./assets/apple-touch-icon.svg"/>
|
|
6
|
-
<TileColor>#111827</TileColor>
|
|
7
|
-
</tile>
|
|
8
|
-
</msapplication>
|
|
9
|
-
</browserconfig>
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<browserconfig>
|
|
3
|
+
<msapplication>
|
|
4
|
+
<tile>
|
|
5
|
+
<square150x150logo src="./assets/apple-touch-icon.svg"/>
|
|
6
|
+
<TileColor>#111827</TileColor>
|
|
7
|
+
</tile>
|
|
8
|
+
</msapplication>
|
|
9
|
+
</browserconfig>
|