layout-style-css 1.1.2 → 2.1.0

package/docs/wiki/Home.md

@@ -1,48 +1,33 @@
-# Layout Style CSS Wiki
-
-Version 1.1.2 documents the professional library contract for `layout-style-css`: install paths, package exports, layout primitives, recipes, UI Style Kit compatibility, demo deployment, security, and release workflow.
-
-## Start Here
-
-| Page | Purpose |
-| --- | --- |
-| [Getting Started](Getting-Started.md) | First install, first shell, and switching layout personalities. |
-| [Installation And CDN](Installation-And-CDN.md) | npm, bundler, CDN, and export guidance. |
-| [Layout Primitives](Layout-Primitives.md) | Core `ly-*` wrappers, grids, panes, frames, and utilities. |
-| [Layout Recipes](Layout-Recipes.md) | Copyable patterns for common application surfaces. |
-| [Layout Styles](Layout-Styles.md) | All layout personalities and when to use them. |
-| [UI Style Kit Compatibility](UI-Style-Kit-Compatibility.md) | Prefix aliases and ownership boundaries. |
-| [Demo And GitHub Pages](Demo-And-GitHub-Pages.md) | Demo QA and Pages deployment. |
-| [Release And Publishing](Release-And-Publishing.md) | npm v1.1.2 verification and publish checklist. |
-| [Security And Support](Security-And-Support.md) | Security model, supported versions, and reporting path. |
-| [Contributing](Contributing.md) | Contribution workflow and review expectations. |
-
-## Library Positioning
-
-`layout-style-css` is the spatial layer for front-end products. It owns wrappers, spacing, shells, grids, split views, panes, layout recipes, and switchable layout personalities. It does not own paint, typography, component borders, shadows, native controls, focus states, themes, or modes.
-
-The recommended pairing is:
-
-```js
-import "ui-style-kit-css/with-bridge.css";
-import "layout-style-css/all.css";
-```
-
-Use the three-library path only when a project also needs Interactive Surface behavior:
-
-```js
-import "layout-style-css/all-with-ui-kit-and-interactive-surface.css";
-```
-
-## Wiki Source
-
-This `docs/wiki` directory is the versioned source for the GitHub Wiki. Keeping it in the main repository makes docs reviewable with code changes and keeps npm package documentation aligned with the release.
-
-When GitHub Wiki is enabled, mirror these files into the wiki repository:
-
-```bash
-git clone https://github.com/Foscat/Layout-Style-CSS.wiki.git layout-style-css-wiki
-```
-
-Copy the Markdown files from `docs/wiki/`, commit, and push from the wiki clone.
-
+# Layout Style CSS Wiki
+
+Version 2.1.0 is a container-first, dependency-free layout library. It ships semantic wrappers, composition primitives, seven recipes, sixteen layout personalities, focused exports, a v2-only compatibility bundle, and refreshed ecosystem fixtures for UI Style Kit CSS 2.1 and Interactive Surface CSS 1.5.
+
+## Start Here
+
+| Page | Purpose |
+| --- | --- |
+| [Getting Started](Getting-Started.md) | First wrapper, recipe, and personality. |
+| [Installation And CDN](Installation-And-CDN.md) | Exact package exports and ecosystem import order. |
+| [Layout Primitives](Layout-Primitives.md) | Wrappers and composition primitives. |
+| [Layout Recipes](Layout-Recipes.md) | Named recipes, areas, and mobile ordering. |
+| [Layout Styles](Layout-Styles.md) | Sixteen spatial personalities. |
+| [UI Style Kit Compatibility](UI-Style-Kit-Compatibility.md) | Structural bridge and ownership boundaries. |
+| [Migrating To 2.0](Migrating-To-2.0.md) | Complete 1.x selector and export mapping. |
+| [Demo And GitHub Pages](Demo-And-GitHub-Pages.md) | Interactive lab, browser matrix, and Pages artifact. |
+| [Release And Publishing](Release-And-Publishing.md) | Release verification and separately approved publish steps. |
+| [Security And Support](Security-And-Support.md) | Supported versions and reporting. |
+| [Contributing](Contributing.md) | Source, generated output, testing, and review rules. |
+
+## Ownership
+
+Layout Style CSS owns spatial behavior: containment, wrappers, flow, grids, areas, spans, sizing, and responsive arrangement. UI Style Kit owns visual paint. Interactive Surface owns interaction-state styling.
+
+The package has no runtime or peer dependencies. `ui-style-kit-css@2.1.0` and `interactive-surface-css@1.5.0` are released registry fixtures used to prove optional integration.
+
+## Supported Baseline
+
+- Node.js 20 or newer for package development
+- Current evergreen Chromium, Firefox, and WebKit
+- Mobile-first DOM order with core thresholds at `48rem` and `64rem`, plus tested personality-specific overrides
+
+The deprecated UI structural bridge remains available for existing UI-prefixed layout aliases, but canonical 2.1 examples use UI Style Kit visual CSS, the UI token bridge, Interactive Surface `state-core.css`, and Layout core.

package/docs/wiki/Installation-And-CDN.md

@@ -1,58 +1,72 @@
-# Installation And CDN
-
-This package ships authored source files, generated dist files, and importable entrypoints for bundlers and CDNs.
-
-## npm
-
-```bash
-npm install layout-style-css ui-style-kit-css@2.0.1
-```
-
-The default entry is the full flattened layout-only CSS:
-
-```js
-import "layout-style-css";
-```
-
-## Entry Points
-
-| Import | Purpose |
-| --- | --- |
-| `layout-style-css` | Full flattened layout-only CSS. |
-| `layout-style-css/min.css` | Minified layout-only CSS. |
-| `layout-style-css/base.css` | Base primitives only. |
-| `layout-style-css/bridge.css` | UI Style Kit naming bridge only. |
-| `layout-style-css/all.css` | Import-based bundle for all layout files. |
-| `layout-style-css/all-with-ui-kit.css` | UI Style Kit plus Layout Style CSS. |
-| `layout-style-css/all-with-ui-kit-and-interactive-surface.css` | UI Style Kit, Interactive Surface, and Layout Style CSS. |
-| `layout-style-css/<layout>.css` | One layout style, such as `layout-style-css/synthwave.css`. |
-| `layout-style-css/dist/*.css` | Direct generated dist files for advanced consumers. |
-
-## CDN
-
-Layout-only:
-
-```html
-<link rel="stylesheet" href="https://unpkg.com/layout-style-css@1/dist/layout-style-css.min.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@1/dist/layout-style-css.min.css">
-```
-
-Recommended UI Style Kit pairing:
-
-```html
-<link rel="stylesheet" href="https://unpkg.com/ui-style-kit-css@2.0.1/dist/ui-style-kit.with-bridge.min.css">
-<link rel="stylesheet" href="https://unpkg.com/layout-style-css@1/dist/layout-style-css.min.css">
-```
-
-Three-library pairing:
-
-```html
-<link rel="stylesheet" href="https://unpkg.com/ui-style-kit-css@2.0.1/dist/ui-style-kit.with-bridge.min.css">
-<link rel="stylesheet" href="https://unpkg.com/layout-style-css@1/dist/layout-style-css.min.css">
-<link rel="stylesheet" href="https://unpkg.com/interactive-surface-css@1.2.5/dist/interactive-surface.min.css">
-```
-
-## Package Ownership
-
-`styles/` is source. `dist/` is generated by `npm run build`. Consumers should import package entrypoints or dist files, not source files inside `styles/`.
-
+# Installation And CDN
+
+Layout Style CSS 2.0 is dependency-free and has no peer dependency contract. Node.js 20 or newer is required only for package development and verification.
+
+## npm
+
+```bash
+npm install layout-style-css@2.1.0
+```
+
+## Focused Exports
+
+| Import | Purpose |
+| --- | --- |
+| `layout-style-css` | Full v2 core and all personalities. |
+| `layout-style-css/min.css` | Minified full bundle. |
+| `layout-style-css/core.css` | Wrappers, primitives, recipes, and utilities. |
+| `layout-style-css/wrappers.css` | Wrapper tokens and containment. |
+| `layout-style-css/primitives.css` | Composition primitives. |
+| `layout-style-css/recipes.css` | Seven recipe roots and named areas. |
+| `layout-style-css/utilities.css` | Structural utility layer. |
+| `layout-style-css/personalities.css` | All personalities. |
+| `layout-style-css/personalities/minimal-saas.css` | One personality; replace the name as needed. |
+| `layout-style-css/integrations/ui-style-kit.css` | Import-free structural UI bridge. |
+| `layout-style-css/legacy.css` | Full v2 bundle with v1 aliases. |
+
+The old `all-with-ui-kit*`, `all.css`, `base.css`, `bridge.css`, and root personality exports do not exist in v2.
+
+## Import Modes
+
+Standalone:
+
+```js
+import "layout-style-css";
+```
+
+Layout plus UI Style Kit:
+
+```js
+import "ui-style-kit-css/visual.css";
+import "layout-style-css";
+```
+
+All three libraries, in required order:
+
+```js
+import "ui-style-kit-css/visual.css";
+import "ui-style-kit-css/interactive-surface-theme.css";
+import "interactive-surface-css/state-core.css";
+import "layout-style-css";
+```
+
+The first import block is deprecated compatibility for legacy UI-prefixed structural aliases. Canonical 2.1 imports use the released `ui-style-kit-css@2.1.0` visual CSS, `ui-style-kit-css/interactive-surface-theme.css`, released `interactive-surface-css@1.5.0` state core, and Layout core.
+
+## CDN
+
+Layout only:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/layout-style-css@2.1.0/dist/layout-style-css.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@2.1.0/dist/layout-style-css.min.css">
+```
+
+For optional companions, preserve the same order as the package imports: UI Style Kit visual CSS, UI Style Kit `interactive-surface-theme.css`, Interactive Surface 1.5.0 `state-core.css`, then Layout core. Load `layout-style-css/integrations/ui-style-kit.css` only for deprecated structural aliases.
+
+## Browser Baseline
+
+Current evergreen Chromium, Firefox, and WebKit are supported. Core container-driven enhancements activate at `48rem` and `64rem`; personalities may use personality-specific thresholds. Unsupported container-query environments retain the mobile source-order fallback.
+
+## Source Ownership
+
+`styles/` contains authored CSS. `dist/` is generated. Consumers should use package exports or CDN dist files, never internal source paths.

package/docs/wiki/Layout-Primitives.md

@@ -1,57 +1,48 @@
-# Layout Primitives
-
-Primitives are the stable `ly-*` classes that make the package useful without committing to one layout personality.
-
-## Root And Page
-
-| Class | Purpose |
-| --- | --- |
-| `.ly-root` | Scope layout variables and box sizing. |
-| `.ly-page` | Full-height page wrapper. |
-| `.ly-header`, `.ly-footer`, `.ly-main` | Basic document regions. |
-
-## Wrappers
-
-Use `.ly-wrapper` for new markup. `.ly-container` remains supported for compatibility.
-
-| Class | Purpose |
-| --- | --- |
-| `.ly-wrapper` | Responsive centered content wrapper. |
-| `.ly-wrapper--sm` | Small wrapper. |
-| `.ly-wrapper--md` | Medium wrapper. |
-| `.ly-wrapper--lg` | Large wrapper. |
-| `.ly-wrapper--xl` | Extra-large wrapper. |
-| `.ly-wrapper--wide` | Wide application wrapper. |
-| `.ly-wrapper--fluid` | Full-width wrapper with responsive padding. |
-| `.ly-wrapper--readable` | Readable content wrapper based on line length. |
-
-## Shells And Regions
-
-| Class | Purpose |
-| --- | --- |
-| `.ly-app-shell` | Header, sidebar, and main application shell. |
-| `.ly-app-header` | Header region inside the app shell. |
-| `.ly-app-sidebar` | Sidebar region inside the app shell. |
-| `.ly-app-main` | Main content region inside the app shell. |
-| `.ly-sidebar-layout` | Local content plus secondary sidebar. |
-| `.ly-split` | Two-part split layout. |
-| `.ly-panes`, `.ly-panes--two`, `.ly-panes--three` | Adaptive pane layouts. |
-
-## Composition
-
-| Class | Purpose |
-| --- | --- |
-| `.ly-section` | Vertical section spacing. |
-| `.ly-stack` | Vertical rhythm. |
-| `.ly-cluster` | Wrapping horizontal group. |
-| `.ly-grid` | Grid foundation. |
-| `.ly-grid--auto` | Responsive auto-fit grid. |
-| `.ly-row`, `.ly-col` | Flex row and column utilities. |
-| `.ly-surface` | Structural surface hook with no visual styling. |
-| `.ly-frame` | Aspect-ratio media or content frame. |
-| `.ly-scroll-area` | Bounded scroll area. |
-
-## Utility Rules
-
-Utilities set layout variables, spacing, flow, visibility, overflow, or ratios. They must not introduce color, typography, borders, shadows, theme modes, or component paint.
-
+# Layout Primitives
+
+V2 primitives are structural, mobile-first, and safe to use without a visual design system.
+
+## Semantic Wrappers
+
+`.ly-wrapper` defaults to the `72rem` content measure and establishes an inline-size container. Fluid logical gutters include safe-area insets.
+
+Layout personalities can provide a distinct measure for the plain `.ly-wrapper`. Explicit semantic wrapper variants always keep the measures below, so changing the demo wrapper control produces a real structural change under every personality.
+
+| Selector | Measure or behavior |
+| --- | --- |
+| `.ly-wrapper--compact` | `40rem` |
+| `.ly-wrapper--prose` | `68ch` |
+| `.ly-wrapper--content` | `72rem`, also the default |
+| `.ly-wrapper--wide` | `112rem` |
+| `.ly-wrapper--full` | Full available inline size |
+| `.ly-wrapper--breakout` | Content, feature, and full lanes |
+
+Breakout children use `.ly-lane--content`, `.ly-lane--feature`, `.ly-lane--full`, or equivalent `data-ly-lane` attributes.
+
+## Composition
+
+| Primitive | Contract |
+| --- | --- |
+| `.ly-stack` | Vertical flow with a shared stack gap. |
+| `.ly-cluster` | Wrapping inline group. |
+| `.ly-center` | Centered element with a bounded measure. |
+| `.ly-cover` | Full-height vertical composition with an optional centered child. |
+| `.ly-switcher` | Wrapping equal items based on available inline size. |
+| `.ly-sidebar` | Side and content regions that wrap safely. |
+| `.ly-grid` | Explicit structural grid; `.ly-grid--auto` uses auto-fit. |
+| `.ly-split` | One column, then two columns from `48rem`. |
+| `.ly-panes` | One column with two- and three-pane variants. |
+| `.ly-media` | Media, content, and action areas. |
+| `.ly-reel` | Bounded horizontal flow with scroll snapping. |
+| `.ly-frame` | Stable aspect-ratio frame. |
+| `.ly-scroll` | Bounded scrolling with overscroll containment. |
+
+Primitives respond to their nearest wrapper or recipe container at the `48rem` and `64rem` core thresholds. They do not set color, typography, borders, shadows, or interaction states.
+
+For v1 migrations, `legacy.css` keeps `.ly-content` as `min-inline-size: 0` and preserves only the minimum block size and spacing of `.ly-divider`. A visible divider is paint and must come from UI Style Kit or the application theme; `.ly-surface--raised` is removed for the same ownership reason.
+
+## Structural Utilities
+
+The utility module includes grid column variables, spans, gaps, padding, sizing, overflow, alignment, frame ratios, visibility, and explicit order escape hatches.
+
+Ordering families are available at base, medium container (`ly-md-*`), and large container (`ly-lg-*`) sizes. They include first, normal, last, and numeric values 1 through 6. Visual reordering can conflict with reading and focus order; see [Migrating To 2.0](Migrating-To-2.0.md) before using them.

package/docs/wiki/Layout-Recipes.md

@@ -1,80 +1,49 @@
-# Layout Recipes
-
-Recipes are stable combinations of primitives. They are intended to be copied into applications and paired with UI Style Kit component classes.
-
-## App Shell
-
-```html
-<div class="ly-app-shell">
-  <aside class="ly-app-sidebar ly-pad-6">Navigation</aside>
-  <header class="ly-app-header ly-pad-4">Toolbar</header>
-  <main class="ly-app-main">
-    <section class="ly-wrapper ly-wrapper--wide ly-section">Workspace</section>
-  </main>
-</div>
-```
-
-## Content Wrapper
-
-```html
-<article class="ly-wrapper ly-wrapper--readable ly-section ly-stack">
-  <h1>Documentation</h1>
-  <p>Readable content stays centered and responsive.</p>
-</article>
-```
-
-## Split Screen
-
-```html
-<section class="ly-wrapper ly-wrapper--xl ly-section">
-  <div class="ly-split">
-    <div class="ly-stack">Primary content</div>
-    <aside class="ly-frame ly-surface ly-pad-6">Preview</aside>
-  </div>
-</section>
-```
-
-## Button Group
-
-```html
-<div class="ly-button-group">
-  <button class="saas-button">Save</button>
-  <button class="saas-button-secondary">Preview</button>
-  <button class="saas-button-secondary">Export</button>
-</div>
-```
-
-Button groups wrap without forcing every button to full parent width on mobile.
-
-## Card Grid And Card Size
-
-```html
-<div class="ly-card-grid">
-  <article class="saas-card ly-card-sm">Compact</article>
-  <article class="saas-card ly-card-md">Standard</article>
-  <article class="saas-card ly-card-lg">Feature</article>
-</div>
-```
-
-## Gallery
-
-```html
-<div class="ly-gallery">
-  <figure class="ly-frame ly-frame-4x3">Image</figure>
-  <figure class="ly-frame ly-frame-4x3">Image</figure>
-  <figure class="ly-frame ly-frame-4x3">Image</figure>
-</div>
-```
-
-## Carousel
-
-```html
-<div class="ly-carousel">
-  <article class="ly-surface ly-card-md">Step one</article>
-  <article class="ly-surface ly-card-md">Step two</article>
-  <article class="ly-surface ly-card-md">Step three</article>
-</div>
-```
-
-The carousel recipe provides horizontal flow and scroll snapping without adding visual chrome.
-
+# Layout Recipes
+
+Recipes are inline-size containers with an authoritative single-column mobile fallback. At the `48rem` and `64rem` core thresholds, named grid areas rearrange without changing DOM, reading, or focus order. Layout personalities can layer personality-specific thresholds over those core recipes.
+
+## Public Hooks
+
+Use `data-ly-recipe` with one of:
+
+- `app-shell`
+- `dashboard`
+- `docs`
+- `list-detail`
+- `split-hero`
+- `gallery`
+- `card-grid`
+
+The attribute is the complete recipe API, not metadata for a class. A root with only `data-ly-recipe="docs"` receives the same mobile fallback, containment, named areas, and responsive geometry as `.ly-docs`; the class form remains available as an equivalent option.
+
+Use `data-ly-area` with `header`, `nav`, `main`, `aside`, `footer`, `content`, `media`, `actions`, `primary`, or `secondary`.
+
+## Application Recipe
+
+```html
+<div class="ly-wrapper ly-wrapper--wide">
+  <section class="ly-app-shell" data-ly-recipe="app-shell">
+    <header data-ly-area="header">Toolbar</header>
+    <nav data-ly-area="nav" aria-label="Application">Navigation</nav>
+    <main data-ly-area="main">Workspace</main>
+    <aside data-ly-area="aside">Inspector</aside>
+    <footer data-ly-area="footer">Status</footer>
+  </section>
+</div>
+```
+
+Place regions in the order that makes sense on a narrow screen. The recipe uses named areas for wide-container placement and never uses CSS `order`.
+
+## Content And Media Recipes
+
+`docs` creates a documentation shell. `list-detail` arranges primary, secondary, and action regions. `split-hero` arranges content, media, and actions. `gallery` and `card-grid` create responsive repeated-item grids.
+
+```html
+<section class="ly-split-hero" data-ly-recipe="split-hero">
+  <div data-ly-area="content">Primary message</div>
+  <figure data-ly-area="media">Media</figure>
+  <div data-ly-area="actions">Actions</div>
+</section>
+```
+
+Built-in recipes never use an order utility. If application-specific visual order is unavoidable, review the warning in [Layout Primitives](Layout-Primitives.md) and test keyboard and assistive-technology behavior.

package/docs/wiki/Layout-Styles.md

@@ -1,43 +1,33 @@
-# Layout Styles
-
-Layout styles change spatial behavior without changing UI paint. Select them with `data-layout`, `layout-style`, `.ly-layout-*`, or `.ly-style-*`.
-
-## Available Styles
-
-| Style | Best for |
-| --- | --- |
-| `minimal-saas` | Quiet SaaS dashboards, admin tools, and predictable workspaces. |
-| `bento` | Modular dashboards with repeated card surfaces. |
-| `maximalist` | Editorial pages and feature-heavy product screens. |
-| `bauhaus` | Strict modular grids and structured presentation. |
-| `tactile` | Instrument panels and control-heavy interfaces. |
-| `neumorphism` | Centered island layouts and roomy product surfaces. |
-| `retrofuturism` | Panoramic shells and wide staged views. |
-| `brutalism` | Full-bleed slabs and abrupt sectional hierarchy. |
-| `cyberpunk` | Dense command surfaces and narrow utility rails. |
-| `y2k` | Centered hub shells with dock-like support regions. |
-| `retro-glass` | Layered top-frame shells with floating utility rails. |
-| `f-pattern` | Western reading paths with strong top and left scan zones. |
-| `z-pattern` | Landing and promotional flows that move diagonally across the viewport. |
-| `split-screen` | Two competing focal points with equal weight. |
-| `mondrian` | Asymmetric rectangular block compositions. |
-| `synthwave` | Cinematic preview flows and retro-futuristic stage layouts. |
-
-## Selector Contract
-
-```html
-<body data-layout="synthwave" layout-style="synthwave" class="ly-root">
-  <main class="ly-layout-synthwave ly-style-synthwave">...</main>
-</body>
-```
-
-Most applications only need `data-layout`. The class and `layout-style` selectors are provided for integration flexibility.
-
-## Mixing UI And Layout
-
-```html
-<body data-ui="cyberpunk" data-layout="synthwave" data-theme="cyber-lime" data-mode="dark">
-```
-
-This is supported because layout styles do not target `data-ui`.
-
+# Layout Styles
+
+V2 calls spatial styles “personalities” and selects them with the canonical `data-ly-layout` hook on `.ly-root`.
+
+```html
+<body class="ly-root" data-ly-layout="synthwave">...</body>
+```
+
+## Sixteen Personalities
+
+| Family | Personality | Spatial character |
+| --- | --- | --- |
+| Left rail | `minimal-saas` | Restrained application rail and measured workspace. |
+| Left rail | `bauhaus` | Modular columns and assertive structural rhythm. |
+| Left rail | `tactile` | Heavier instrument rail and chunky spacing. |
+| Left rail | `cyberpunk` | Narrow command rail and dense track rhythm. |
+| Left rail | `f-pattern` | Top-and-left scan emphasis. |
+| Right rail | `brutalism` | Raw workspace with a strong right support rail. |
+| Right rail | `neumorphism` | Roomy central workspace and detached right rail. |
+| Right rail | `y2k` | Centered hub with a dock-like support region. |
+| Right rail | `retro-glass` | Broad stage with a floating right utility zone. |
+| Right rail | `z-pattern` | Diagonal reading path into a right support rail. |
+| Three zone | `retrofuturism` | Panoramic bridge with symmetric support zones. |
+| Three zone | `mondrian` | Asymmetric block composition. |
+| Three zone | `synthwave` | Cinematic center stage with flanking zones. |
+| Mosaic | `bento` | Full-width modular tile rhythm. |
+| Mosaic | `maximalist` | Staggered editorial spans and broad measure. |
+| Equal split | `split-screen` | Two equally weighted primary regions. |
+
+Every personality changes at least two structural characteristics, such as area placement, shell direction, grid/span rhythm, wrapper measure, or responsive threshold. Personalities never set UI paint or change DOM order.
+
+The v1 `data-layout`, `layout-style`, `.ly-layout-*`, and `.ly-style-*` hooks are available only through `layout-style-css/legacy.css`. New code must use `data-ly-layout`.
+