layout-style-css 2.1.0 → 3.0.0

package/dist/wrappers.css

@@ -1,127 +1,45 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
 
-/*
-  Shared structural tokens and wrapper geometry. Theme, type, borders, shadows,
-  and interactive states remain outside Layout Style's ownership boundary.
-*/
-
-@layer ly.tokens {
-  :where(.ly-root) {
-    --ly-space-0: 0;
-    --ly-space-1: 0.25rem;
-    --ly-space-2: 0.5rem;
-    --ly-space-3: 0.75rem;
-    --ly-space-4: 1rem;
-    --ly-space-5: 1.5rem;
-    --ly-space-6: 2rem;
-    --ly-space-7: 3rem;
-    --ly-space-8: 4rem;
-    --ly-space-9: 6rem;
-
-    --ly-wrapper-compact: 40rem;
-    --ly-wrapper-prose: 68ch;
-    --ly-wrapper-content: 72rem;
-    --ly-wrapper-wide: 112rem;
-    --ly-wrapper-max: var(--ly-wrapper-content);
-    --ly-page-padding-inline: clamp(1rem, 4vw, 3rem);
-    --ly-safe-area-inline: max(
-      env(safe-area-inset-left, 0px),
-      env(safe-area-inset-right, 0px)
-    );
-    --ly-wrapper-gutter: max(var(--ly-page-padding-inline), var(--ly-safe-area-inline));
-
-    --ly-section-padding-block: clamp(3rem, 7vw, 6rem);
-    --ly-gap: var(--ly-space-5);
-    --ly-grid-gap: var(--ly-gap);
-    --ly-stack-gap: var(--ly-space-4);
-    --ly-cluster-gap: var(--ly-space-3);
-    --ly-cover-min: 100svh;
-    --ly-switcher-threshold: 42rem;
-    --ly-sidebar-size: 18rem;
-    --ly-sidebar-content-min: 50%;
-    --ly-grid-columns: 12;
-    --ly-grid-min: 16rem;
-    --ly-pane-size: 22rem;
-    --ly-media-size: 14rem;
-    --ly-reel-item-min: 16rem;
-    --ly-reel-item-max: 28rem;
-    --ly-scroll-max: 70svh;
-    --ly-frame-ratio: 16 / 9;
-
-    --ly-recipe-rail: 18rem;
-    --ly-recipe-aside: 22rem;
-    --ly-card-grid-min: 16rem;
-    --ly-gallery-min: 12rem;
-    --ly-card-size-sm: 10rem;
-    --ly-card-size-md: 14rem;
-    --ly-card-size-lg: 18rem;
-    --ly-header-height: 4.5rem;
-    --ly-z-header: 20;
-
-    /* V1 token aliases remain available so legacy selectors can preserve sizing. */
-    --ly-container-sm: var(--ly-wrapper-compact);
-    --ly-container-md: 56rem;
-    --ly-container-lg: var(--ly-wrapper-content);
-    --ly-container-xl: 88rem;
-    --ly-container-wide: var(--ly-wrapper-wide);
-    --ly-container-max: var(--ly-container-lg);
-    --ly-content-readable: var(--ly-wrapper-prose);
-    --ly-carousel-item-min: var(--ly-reel-item-min);
-    --ly-carousel-item-max: var(--ly-reel-item-max);
-    --ly-sidebar-min: 14rem;
-    --ly-sidebar-width: var(--ly-recipe-rail);
-    --ly-sidebar-max: var(--ly-recipe-aside);
-    --ly-pane-fixed: var(--ly-pane-size);
-    --ly-z-sidebar: 10;
-  }
-}
-
-@layer ly.reset {
-  :where(.ly-root),
-  :where(.ly-root *) {
-    box-sizing: border-box;
-  }
-
-  :where(.ly-root) {
-    min-inline-size: 0;
-    margin: 0;
-  }
-
-  :where(.ly-root img),
-  :where(.ly-root svg),
-  :where(.ly-root video),
-  :where(.ly-root canvas) {
-    max-inline-size: 100%;
-  }
-}
+/* Wrappers provide fluid measures and become the nearest responsive scope. */
 
 @layer ly.wrappers {
   .ly-wrapper {
-    /* Personalities provide only the plain-wrapper default; explicit variants stay authoritative. */
     --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)
+    );
 
-    /* Symmetric safe-area compensation keeps logical gutters stable in either direction. */
-    container-name: ly-wrapper;
+    container-name: ly-scope;
     container-type: inline-size;
-    inline-size: min(100%, calc(var(--ly-wrapper-max) + (var(--ly-wrapper-gutter) * 2)));
+    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-gutter);
+    padding-inline: var(--ly-wrapper-local-gutter);
+  }
+
+  /* Container-relative gutters enhance the universally valid viewport fallback. */
+  @supports (width: 1cqi) {
+    .ly-wrapper {
+      --ly-wrapper-fluid-gutter: clamp(1rem, 3cqi, 3rem);
+    }
   }
 
   .ly-wrapper--compact {
-    --ly-wrapper-max: 40rem;
+    --ly-wrapper-max: var(--ly-wrapper-compact);
   }
 
   .ly-wrapper--prose {
-    --ly-wrapper-max: 68ch;
+    --ly-wrapper-max: var(--ly-wrapper-prose);
   }
 
   .ly-wrapper--content {
-    --ly-wrapper-max: 72rem;
+    --ly-wrapper-max: var(--ly-wrapper-content);
   }
 
   .ly-wrapper--wide {
-    --ly-wrapper-max: 112rem;
+    --ly-wrapper-max: var(--ly-wrapper-wide);
   }
 
   .ly-wrapper--full {
@@ -129,18 +47,19 @@
   }
 
   .ly-wrapper--breakout {
+    --ly-wrapper-max: 100%;
     --ly-breakout-content-size: min(
       var(--ly-wrapper-content),
-      calc(100% - (var(--ly-wrapper-gutter) * 2))
+      calc(100% - (var(--ly-wrapper-local-gutter) * 2))
     );
     --ly-breakout-feature-size: min(
       var(--ly-wrapper-wide),
-      calc(100% - (var(--ly-wrapper-gutter) * 2))
+      calc(100% - (var(--ly-wrapper-local-gutter) * 2))
     );
 
     display: grid;
     grid-template-columns:
-      [full-start] minmax(min(100%, var(--ly-wrapper-gutter)), 1fr)
+      [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)
@@ -150,7 +69,7 @@
         0,
         calc((var(--ly-breakout-feature-size) - var(--ly-breakout-content-size)) / 2)
       )
-      [feature-end] minmax(min(100%, var(--ly-wrapper-gutter)), 1fr) [full-end];
+      [feature-end] minmax(min(100%, var(--ly-wrapper-local-gutter)), 1fr) [full-end];
     inline-size: 100%;
     padding-inline: 0;
   }
@@ -158,6 +77,7 @@
   .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"]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "layout-style-css",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "Dependency-free structural CSS for responsive wrappers, composition primitives, recipes, utilities, and layout personalities.",
   "type": "module",
   "license": "MIT",
@@ -60,39 +60,27 @@
   },
   "exports": {
     ".": "./dist/layout-style-css.css",
-    "./css": "./dist/layout-style-css.css",
-    "./css.css": "./dist/layout-style-css.css",
-    "./min": "./dist/layout-style-css.min.css",
     "./min.css": "./dist/layout-style-css.min.css",
     "./core.css": "./dist/core.css",
+    "./foundation.css": "./dist/foundation.css",
     "./wrappers.css": "./dist/wrappers.css",
     "./primitives.css": "./dist/primitives.css",
     "./recipes.css": "./dist/recipes.css",
     "./utilities.css": "./dist/utilities.css",
     "./personalities.css": "./dist/personalities.css",
     "./personalities/*.css": "./dist/personalities/*.css",
-    "./integrations/ui-style-kit.css": "./dist/integrations/ui-style-kit.css",
-    "./legacy.css": "./dist/legacy.css",
     "./package.json": "./package.json"
   },
   "files": [
-    "dist",
-    "styles",
-    "docs/wiki",
-    "demo/index.html",
-    "demo/demo.css",
-    "demo/demo.js",
-    "demo/assets/apple-touch-icon.svg",
-    "demo/assets/favicon.svg",
-    "demo/assets/social-card.png",
-    "demo/browserconfig.xml",
-    "demo/robots.txt",
-    "demo/site.webmanifest",
-    "demo/sitemap.xml",
-    "README.md",
-    "CHANGELOG.md",
-    "CONTRIBUTING.md",
-    "SECURITY.md",
-    "LICENSE"
+    "dist/layout-style-css.css",
+    "dist/layout-style-css.min.css",
+    "dist/core.css",
+    "dist/foundation.css",
+    "dist/wrappers.css",
+    "dist/primitives.css",
+    "dist/recipes.css",
+    "dist/utilities.css",
+    "dist/personalities.css",
+    "dist/personalities/*.css"
   ]
 }

package/CHANGELOG.md

@@ -1,90 +0,0 @@
-# Changelog
-
-All notable changes to `layout-style-css` are documented here. This project follows semantic versioning.
-
-## [2.1.0] - 2026-07-20
-
-### Changed
-
-- 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.
-- Kept `layout-style-css/integrations/ui-style-kit.css` available as a frozen deprecated structural bridge for legacy UI-prefixed layout aliases.
-- Updated release metadata and the GitHub Pages demo to identify the 2.1.0 package line.
-
-### Tests
-
-- 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.
-
-## [2.0.0] - 2026-07-19
-
-### Breaking
-
-- Rebuilt the package as a dependency-free, container-first layout system requiring Node.js 20 or newer for development scripts.
-- Replaced size-tier wrappers with compact, prose, content, wide, full, and breakout semantics; wrappers now include fluid logical gutters and safe-area compensation.
-- Standardized personalities, recipes, and regions on `data-ly-layout`, `data-ly-recipe`, and `data-ly-area`.
-- Replaced root personality exports and companion `all-with-ui-kit*` aggregates with focused modules under `personalities/` and `integrations/`.
-- 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.
-
-### Added
-
-- Added stack, cluster, center, cover, switcher, sidebar, grid, split, panes, media, reel, frame, and bounded-scroll primitives.
-- Added seven functional recipes that preserve mobile DOM, reading, and focus order while rearranging named areas at `48rem` and `64rem` container thresholds.
-- Made every `data-ly-recipe` value a complete alternative to its matching class and kept explicit wrapper measures authoritative under all personalities.
-- Added sixteen spatially distinct personalities across left-rail, right-rail, three-zone, mosaic, and equal-split families.
-- Added explicit base, medium-container, and large-container order escape hatches with accessibility guidance.
-- Added a maintainable interactive layout lab with allowlisted query state, copyable snippets, ecosystem modes, and rendered coverage at 375px, 768px, 1280px, and 1440px.
-- Added a complete 1.x-to-2.0 migration guide, Node.js 20/22 CI, and Chromium, Firefox, and WebKit release verification.
-
-### Integration
-
-- 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.
-- Documented the all-three import order as UI Style Kit bridge, Interactive Surface `state-core.css`, Layout integration bridge, then Layout core.
-- Kept the upcoming UI Style Kit revision as a follow-up outside this release.
-- 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.
-
-## [1.1.2] - 2026-07-08
-
-### Fixed
-
-- Reissued the release metadata, package lock, README install examples, wiki checklist, and publish workflow recovery tag under `1.1.2`.
-- Kept the additive `1.1.1` CSS and documentation contract intact while moving the publish target to a clean patch version.
-
-## [1.1.1] - 2026-07-05
-
-### Added
-
-- Added versioned wiki documentation under `docs/wiki` for installation, layout primitives, recipes, UI Style Kit compatibility, demo deployment, publishing, security, and contribution workflows.
-- Added UI Style Kit-compatible structural aliases for `saas`, `bento`, `max`, `bau`, `tactile`, `neo`, `retro`, `brutal`, `cyber`, `y2k`, and `rg` prefixes.
-- Added layout recipe helpers for button groups, card grids, card sizing, galleries, and carousels.
-- Added F-Pattern, Z-Pattern, Split-Screen, Mondrian, and Synthwave layout styles.
-- Added `layout-style-css/all-with-ui-kit-and-interactive-surface.css` for the three-library import path.
-- Added direct `./dist/*.css` package exports for consumers that need generated dist files.
-- Added `CHANGELOG.md`, `CONTRIBUTING.md`, and `SECURITY.md` to the release documentation set.
-
-### Changed
-
-- Reworked the demo mobile controls into a compact drawer so the sticky header does not consume the mobile viewport.
-- Expanded the demo to cover app shell, wrappers, split layouts, sidebars, panes, button groups, card grids, card sizes, galleries, carousels, frames, and scroll areas.
-- Updated README examples to use exported CSS entrypoints and valid CDN links.
-- Updated npm release metadata, package file allowlist, and release verification scripts for the `1.1.1` package.
-- Updated the npm publish workflow to publish from `release.published` events and explicit `workflow_dispatch` tags.
-
-### Fixed
-
-- Fixed README quick-start imports that referenced non-exported paths.
-- Fixed malformed UI Style Kit CDN link markup in the README.
-- Clarified responsive column utility documentation so class groups do not imply bare numeric class names.
-- Preserved GitHub Pages artifact generation with a Pages-root `index.html`.
-- Fixed the release automation path so draft releases can be published before the npm workflow runs.
-
-### Security
-
-- Kept the layout CSS contract free of visual properties owned by `ui-style-kit-css`.
-- Kept the package CSS-only at runtime with no network calls, dynamic script execution, or secret handling.
-- Added release verification coverage for npm pack contents and documentation completeness.
-
-## [1.0.0]
-
-### Added
-
-- Initial public release of layout primitives, layout style files, generated dist bundles, and demo coverage.
-

package/CONTRIBUTING.md

@@ -1,55 +0,0 @@
-# Contributing
-
-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.
-
-## Local Setup
-
-```bash
-npm install
-npm run build
-npm run lint
-npm run check:demo-js
-npm test
-```
-
-Run the full release gate before opening a release PR:
-
-```bash
-npm run release:verify
-```
-
-## Development Rules
-
-- Keep authored CSS in `styles/`.
-- Regenerate `dist/` with `npm run build`; do not hand-edit generated dist files.
-- Keep public layout classes prefixed with `ly-`.
-- Leave colors, typography, borders, shadows, native controls, focus states, themes, and modes to `ui-style-kit-css`.
-- Add structural aliases in `styles/integrations/ui-style-kit.css` only when they map to layout primitives or layout recipes.
-- Preserve semantic mobile DOM, reading, and focus order; built-in recipes must use named areas instead of `order`.
-- Test container behavior below and above `48rem` and `64rem`.
-- Update README, `docs/wiki`, and `CHANGELOG.md` when a public class, export, recipe, release workflow, or package behavior changes.
-
-## Testing Expectations
-
-Every change that affects public behavior should update or preserve:
-
-- `test/layout-css-contract.test.mjs` for package, CSS, docs, and tarball contracts.
-- `test/release-docs-contract.test.mjs` for current documentation and workflow contracts.
-- `test/demo-smoke.test.mjs` for rendered demo behavior.
-- `test/pages-artifact.test.mjs` for GitHub Pages output.
-- `stylelint` for authored CSS formatting.
-
-## Review Checklist
-
-- The package remains publishable as a public npm library.
-- The npm tarball contains only intended release files.
-- README examples use exported package entrypoints.
-- Documentation links resolve to versioned files.
-- Demo controls remain compact on mobile and tablet viewports.
-- Chromium, Firefox, and WebKit pass for release-facing rendered changes.
-- New CSS does not introduce UI Style Kit-owned visual declarations.
-
-## Wiki Updates
-
-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.
-

package/SECURITY.md

@@ -1,50 +0,0 @@
-# Security Policy
-
-`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.
-
-## Supported Versions
-
-| Version | Supported |
-| --- | --- |
-| `2.x` | Yes |
-| `1.1.x` | Migration support only |
-| `1.0.x` | No |
-
-## Reporting A Vulnerability
-
-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.
-
-Please include:
-
-- affected version and package entrypoint
-- affected selector, file, or demo behavior
-- reproduction steps
-- expected impact
-- whether the issue affects package consumers, the demo, or GitHub Pages deployment
-
-## Security Model
-
-The primary security risks for this package are supply-chain and documentation risks:
-
-- incorrect package exports that make consumers import unexpected files
-- malformed CDN examples that point to wrong assets
-- accidental runtime JavaScript or network behavior in docs or demo code
-- package contents that include secrets, build caches, or unrelated local files
-- CSS that hides important controls or breaks keyboard-visible flows in the demo
-
-The release gate verifies package contents, README imports, documentation links, CSS contracts, GitHub Pages artifact structure, and rendered behavior in Chromium, Firefox, and WebKit.
-
-## Dependency Checks
-
-Run the local dependency audit before publishing:
-
-```bash
-npm audit --audit-level=moderate
-```
-
-The package also uses `npm run release:verify` to run build, lint, static, Pages, cross-browser, pack dry-run, and publish dry-run checks.
-
-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.
-
-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.
-

package/demo/assets/apple-touch-icon.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" role="img" aria-labelledby="title">
-  <title id="title">layout-style-css app icon</title>
-  <rect width="180" height="180" rx="40" fill="#111827"/>
-  <rect x="30" y="34" width="40" height="112" rx="12" fill="#7dd3fc"/>
-  <rect x="88" y="34" width="62" height="44" rx="12" fill="#fbbf24"/>
-  <rect x="88" y="100" width="62" height="46" rx="12" fill="#f472b6"/>
-</svg>

package/demo/assets/favicon.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title">
-  <title id="title">layout-style-css favicon</title>
-  <rect width="64" height="64" rx="14" fill="#111827"/>
-  <rect x="10" y="12" width="14" height="40" rx="4" fill="#7dd3fc"/>
-  <rect x="30" y="12" width="24" height="16" rx="4" fill="#fbbf24"/>
-  <rect x="30" y="36" width="24" height="16" rx="4" fill="#f472b6"/>
-</svg>

package/demo/browserconfig.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-  <msapplication>
-    <tile>
-      <square150x150logo src="./assets/apple-touch-icon.svg"/>
-      <TileColor>#111827</TileColor>
-    </tile>
-  </msapplication>
-</browserconfig>