npm - layout-style-css - Versions diffs - 2.1.1 → 3.0.0 - Mend

layout-style-css 2.1.1 → 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

package/README.md +124 -145
package/dist/core.css +2 -1
package/dist/foundation.css +194 -0
package/dist/layout-style-css.css +527 -984
package/dist/layout-style-css.min.css +1 -1
package/dist/personalities/bauhaus.css +13 -42
package/dist/personalities/bento.css +16 -40
package/dist/personalities/brutalism.css +13 -33
package/dist/personalities/cyberpunk.css +12 -32
package/dist/personalities/f-pattern.css +16 -45
package/dist/personalities/maximalist.css +16 -48
package/dist/personalities/minimal-saas.css +7 -33
package/dist/personalities/mondrian.css +12 -40
package/dist/personalities/neumorphism.css +15 -39
package/dist/personalities/retro-glass.css +14 -42
package/dist/personalities/retrofuturism.css +12 -32
package/dist/personalities/split-screen.css +24 -36
package/dist/personalities/synthwave.css +13 -41
package/dist/personalities/tactile.css +15 -32
package/dist/personalities/y2k.css +13 -33
package/dist/personalities/z-pattern.css +16 -46
package/dist/personalities.css +1 -1
package/dist/primitives.css +27 -63
package/dist/recipes.css +92 -175
package/dist/utilities.css +39 -104
package/dist/wrappers.css +28 -108
package/package.json +12 -24
package/CHANGELOG.md +0 -107
package/CONTRIBUTING.md +0 -55
package/SECURITY.md +0 -50
package/demo/assets/apple-touch-icon.svg +0 -7
package/demo/assets/favicon.svg +0 -7
package/demo/assets/social-card.png +0 -0
package/demo/browserconfig.xml +0 -9
package/demo/demo.css +0 -523
package/demo/demo.js +0 -605
package/demo/index.html +0 -325
package/demo/robots.txt +0 -4
package/demo/site.webmanifest +0 -23
package/demo/sitemap.xml +0 -9
package/dist/integrations/ui-style-kit.css +0 -175
package/dist/legacy.css +0 -822
package/docs/wiki/Contributing.md +0 -36
package/docs/wiki/Demo-And-GitHub-Pages.md +0 -53
package/docs/wiki/Getting-Started.md +0 -51
package/docs/wiki/Home.md +0 -33
package/docs/wiki/Installation-And-CDN.md +0 -72
package/docs/wiki/Layout-Primitives.md +0 -48
package/docs/wiki/Layout-Recipes.md +0 -49
package/docs/wiki/Layout-Styles.md +0 -33
package/docs/wiki/Migrating-To-2.0.md +0 -186
package/docs/wiki/Release-And-Publishing.md +0 -77
package/docs/wiki/Security-And-Support.md +0 -36
package/docs/wiki/UI-Style-Kit-Compatibility.md +0 -49
package/docs/wiki/_Sidebar.md +0 -15
package/styles/core.css +0 -6
package/styles/integrations/ui-style-kit.css +0 -175
package/styles/legacy.css +0 -173
package/styles/personalities/bauhaus.css +0 -49
package/styles/personalities/bento.css +0 -46
package/styles/personalities/brutalism.css +0 -39
package/styles/personalities/cyberpunk.css +0 -39
package/styles/personalities/f-pattern.css +0 -51
package/styles/personalities/maximalist.css +0 -54
package/styles/personalities/minimal-saas.css +0 -39
package/styles/personalities/mondrian.css +0 -47
package/styles/personalities/neumorphism.css +0 -46
package/styles/personalities/retro-glass.css +0 -47
package/styles/personalities/retrofuturism.css +0 -39
package/styles/personalities/split-screen.css +0 -41
package/styles/personalities/synthwave.css +0 -48
package/styles/personalities/tactile.css +0 -39
package/styles/personalities/y2k.css +0 -39
package/styles/personalities/z-pattern.css +0 -52
package/styles/personalities.css +0 -18
package/styles/primitives.css +0 -219
package/styles/recipes.css +0 -278
package/styles/utilities.css +0 -162
package/styles/wrappers.css +0 -174

package/docs/wiki/Contributing.md DELETED Viewed

@@ -1,36 +0,0 @@
-# Contributing
-Contributions must preserve the package boundary: Layout Style owns structure, UI Style Kit owns visual paint, and Interactive Surface owns interaction states.
-## Workflow
-```bash
-npm ci
-npm run build
-npm run lint
-npm run check:demo-js
-npm test
-```
-Use `npm run test:demo:all` for rendered layout changes and `npm run release:verify` before release-facing work is merged.
-## Source And Generated Files
-- Edit authored modules in `styles/`.
-- Regenerate `dist/` with `npm run build`.
-- Keep the shared cascade-layer prelude in every public entry.
-- Never hand-edit generated CSS or Pages output.
-- Use professional comments for containment, accessibility, cascade, or build-safety decisions.
-## Layout Rules
-- Prefix public classes with `ly-`.
-- Keep the mobile DOM, reading, and focus order authoritative.
-- Use named areas in built-in recipes; never use `order` there.
-- Test nested containers below and above `48rem` and `64rem`.
-- Use `minmax(0, 1fr)` or guarded floors for tracks that receive application content.
-- Do not add colors, typography, borders, shadows, component paint, focus styles, or native control styles.
-## Documentation
-Update README, migration guide, wiki, changelog, demo metadata, and contract tests whenever an export, selector, recipe, compatibility rule, browser baseline, or release command changes.

package/docs/wiki/Demo-And-GitHub-Pages.md DELETED Viewed

@@ -1,53 +0,0 @@
-# Demo And GitHub Pages
-The interactive layout lab lives in `demo/index.html`, `demo/demo.css`, and `demo/demo.js`. GitHub Pages serves a generated artifact from `output/github-pages/`.
-## Local Gates
-The quick gate uses Chromium and a representative rendered matrix:
-```bash
-npm run test:demo:quick
-```
-Run one complete engine matrix:
-```bash
-npm run test:demo:chromium
-npm run test:demo:firefox
-npm run test:demo:webkit
-```
-Run all supported engines:
-```bash
-npm run test:demo:all
-```
-The full matrix exercises current evergreen Chromium, Firefox, and WebKit at 375px, 768px, 1280px, and 1440px, plus nested containers around the `48rem` and `64rem` core thresholds and the personality-specific signatures.
-## Rendered Contracts
-The smoke suite verifies:
-- all wrappers, recipes, and personalities
-- stable DOM and keyboard focus order
-- named-area transitions at both container thresholds
-- no meaningful horizontal overflow
-- bounded scrolling
-- accessible mobile controls
-- layout-only, Layout plus UI, and all-three ecosystem modes
-- pinned `ui-style-kit-css@2.1.0` visual, token bridge, and manifest behavior plus released `interactive-surface-css@1.5.0`
-The demo query parser uses explicit allowlists and writes generated imports and markup with `textContent`.
-## Pages Artifact
-```bash
-npm run pages:build
-node test/pages-artifact.test.mjs
-```
-The generated root contains the demo, metadata assets, `.nojekyll`, and `dist/`. The build rewrites only known parent-relative Layout Style paths, preserving external companion URLs and canonical metadata.
-The Pages workflow installs Chromium, runs the quick package gate, builds and tests the artifact, then uploads it. Repository Pages must be enabled with GitHub Actions as the source before deployment.

package/docs/wiki/Getting-Started.md DELETED Viewed

@@ -1,51 +0,0 @@
-# Getting Started
-Layout Style CSS 2.0 provides structural layout without prescribing theme or component paint.
-## Install
-Node.js 20 or newer is required for development scripts.
-```bash
-npm install layout-style-css@2.1.1
-```
-## Import
-```js
-import "layout-style-css";
-```
-The package is dependency-free. Optional UI and interaction layers are installed and imported explicitly; see [Installation And CDN](Installation-And-CDN.md).
-## First Recipe
-Place the recipe inside a `.ly-wrapper`. The wrapper supplies inline-size containment, fluid logical gutters, and safe-area compensation.
-```html
-<body class="ly-root" data-ly-layout="minimal-saas">
-  <div class="ly-wrapper ly-wrapper--wide">
-    <section class="ly-dashboard" data-ly-recipe="dashboard">
-      <header data-ly-area="header">Dashboard</header>
-      <nav data-ly-area="nav" aria-label="Dashboard">Navigation</nav>
-      <main data-ly-area="main">Workspace</main>
-      <aside data-ly-area="aside">Details</aside>
-      <footer data-ly-area="footer">Status</footer>
-    </section>
-  </div>
-</body>
-```
-The single-column DOM order is authoritative for mobile reading and keyboard focus. Core named grid areas rearrange at `48rem` and `64rem` container widths without changing source order; a selected personality may apply its own personality-specific enhancement threshold.
-## Switch Personality
-```js
-document.querySelector(".ly-root").dataset.lyLayout = "synthwave";
-```
-`data-ly-layout` accepts one of the sixteen values listed in [Layout Styles](Layout-Styles.md). UI attributes such as `data-ui`, `data-theme`, and `data-mode` remain independent.
-## Migrate Existing Markup
-Do not copy v1 root hooks or size-based wrappers into new code. Follow [Migrating To 2.0](Migrating-To-2.0.md), or use `layout-style-css/legacy.css` temporarily while converting an application.

package/docs/wiki/Home.md DELETED Viewed

@@ -1,33 +0,0 @@
-# Layout Style CSS Wiki
-Version 2.1.1 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`, nearest-container personality overrides, and `64rem` feasibility gates for three- and four-track application shells
-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 DELETED Viewed

@@ -1,72 +0,0 @@
-# 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.1
-```
-## 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.1/dist/layout-style-css.min.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@2.1.1/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 DELETED Viewed

@@ -1,48 +0,0 @@
-# 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 DELETED Viewed

@@ -1,49 +0,0 @@
-# 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. At `64rem`, its navigation spans the left column while `header`, `main`, `aside`, and `footer` remain in source order and stack in the right column; Dashboard retains its three-column wide 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 DELETED Viewed

@@ -1,33 +0,0 @@
-# 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. Enhancements query the nearest inline-size container: grid rhythms retain their authored thresholds, safe two-track application shells retain their authored thresholds, and three- or four-track application shells wait until the local allocation reaches `64rem`. 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`.

package/docs/wiki/Migrating-To-2.0.md DELETED Viewed

@@ -1,186 +0,0 @@
-# Migrating To 2.0
-Version 2.0 rebuilds Layout Style CSS as a container-first, dependency-free structural layout system. This guide maps the complete 1.x public surface to v2 and identifies the compatibility window.
-## Runtime And Tooling Contract
-- Development and release scripts require Node.js 20 or newer.
-- The package has no runtime dependencies and no peer dependencies.
-- `ui-style-kit-css@2.1.0` and `interactive-surface-css@1.5.0` are released registry fixtures; neither is a consumer dependency.
-- Current evergreen Chromium, Firefox, and WebKit are supported.
-- Responsive recipes use core thresholds at `48rem` and `64rem`; personalities may add personality-specific thresholds.
-Install companions explicitly only when the application uses them:
-```bash
-npm install layout-style-css@2.1.1
-npm install ui-style-kit-css@2.1.0 interactive-surface-css@1.5.0
-```
-Layout Style CSS 2.1 keeps the v2 layout contract and updates the optional companion fixture path to UI Style Kit visual CSS, its Interactive Surface token bridge, and Interactive Surface 1.5 state core.
-## Export Changes
-The v2 package exports are focused and companion-free:
-| V2 import | Purpose |
-| --- | --- |
-| `layout-style-css` | Default full bundle: core plus 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` | Tokens, reset, safe-area gutters, and wrappers. |
-| `layout-style-css/primitives.css` | Composition primitives. |
-| `layout-style-css/recipes.css` | Functional recipes and named areas. |
-| `layout-style-css/utilities.css` | Structural and order utilities. |
-| `layout-style-css/personalities.css` | All personalities. |
-| `layout-style-css/personalities/minimal-saas.css` | One personality; replace the filename with any of the sixteen names. |
-| `layout-style-css/integrations/ui-style-kit.css` | Import-free UI Style Kit structural bridge. |
-| `layout-style-css/legacy.css` | Full v2 bundle plus v1 selector aliases. |
-The following v1 exports were removed from the default contract:
-- `layout-style-css/base.css` and the old `layout-base.css` dist file
-- `layout-style-css/bridge.css` and `layout-ui-style-kit-bridge.css`
-- `layout-style-css/all.css`
-- `layout-style-css/all-with-ui-kit.css`
-- `layout-style-css/all-with-ui-kit-and-interactive-surface.css`
-- duplicated root personality exports such as `layout-style-css/minimal-saas.css`
-- root dist files named `layout-style-*.css`
-Replace a root personality import with its `personalities/` path. Replace old aggregates with explicit companion imports and the v2 default or focused core.
-## Import Recipes
-Standalone Layout Style CSS:
-```js
-import "layout-style-css";
-```
-Layout plus UI Style Kit:
-```js
-import "ui-style-kit-css/visual.css";
-import "layout-style-css/integrations/ui-style-kit.css";
-import "layout-style-css";
-```
-All three libraries must be imported in this exact 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 layer supplies UI paint, the second interaction states, the third structural name mappings, and the fourth the layout system. The Layout integration file contains no package imports.
-## Wrapper Mapping
-V2 wrapper names communicate intent rather than a generic size tier. `.ly-wrapper` now defaults to the `72rem` content measure and establishes an inline-size container. A personality may change that plain-wrapper default, but an explicit compact, prose, content, wide, full, or breakout variant always wins.
-| 1.x selector | V2 selector | V2 measure or behavior |
-| --- | --- | --- |
-| `.ly-container`, `.ly-wrapper` | `.ly-wrapper` or `.ly-wrapper--content` | Default `72rem` content wrapper |
-| `.ly-container--sm`, `.ly-wrapper--sm` | `.ly-wrapper--compact` | `40rem` |
-| `.ly-container--md`, `.ly-wrapper--md` | Local `--ly-wrapper-max: 56rem` override, or temporary `legacy.css` | No canonical v2 tier |
-| `.ly-wrapper--readable` | `.ly-wrapper--prose` | `68ch` |
-| `.ly-container--lg`, `.ly-wrapper--lg` | `.ly-wrapper--content` | `72rem` |
-| `.ly-container--xl`, `.ly-wrapper--xl` | `.ly-wrapper--wide` | `112rem` in the new semantic scale |
-| `.ly-container--wide`, `.ly-wrapper--wide` | `.ly-wrapper--wide` | `112rem` |
-| `.ly-container--fluid`, `.ly-wrapper--fluid` | `.ly-wrapper--full` | Full available width with safe-area gutters |
-| No v1 equivalent | `.ly-wrapper--breakout` | Content, feature, and full-width lanes |
-The v1 medium `56rem` and extra-large `88rem` measures do not have canonical v2 names. Use a local `--ly-wrapper-max` override if those exact measures are product requirements, or load `legacy.css` while migrating.
-Breakout markup defaults to the content lane:
-```html
-<div class="ly-wrapper ly-wrapper--breakout">
-  <article data-ly-lane="content">Article</article>
-  <figure data-ly-lane="feature">Feature media</figure>
-  <section data-ly-lane="full">Full-width stage</section>
-</div>
-```
-Every wrapper uses fluid logical gutters and safe-area insets. Test the containing element around the `48rem` and `64rem` core thresholds and around any selected personality threshold; viewport width alone no longer determines layout changes.
-## Canonical Hooks
-V2 standardizes three attributes:
-- `data-ly-layout` selects one of the sixteen personalities.
-- `data-ly-recipe` identifies `app-shell`, `dashboard`, `docs`, `list-detail`, `split-hero`, `gallery`, or `card-grid`.
-- `data-ly-area` identifies `header`, `nav`, `main`, `aside`, `footer`, `content`, `media`, `actions`, `primary`, or `secondary`.
-Every `data-ly-recipe` value is a complete alternative to its matching recipe class. For example, `data-ly-recipe="dashboard"` works without `.ly-dashboard`; applications may keep the class API, use the attribute API, or include both during migration.
-```html
-<body class="ly-root" data-ly-layout="minimal-saas">
-  <div class="ly-dashboard" data-ly-recipe="dashboard">
-    <header data-ly-area="header">Header</header>
-    <nav data-ly-area="nav">Navigation</nav>
-    <main data-ly-area="main">Main</main>
-    <aside data-ly-area="aside">Aside</aside>
-    <footer data-ly-area="footer">Footer</footer>
-  </div>
-</body>
-```
-The v1 personality hooks `data-layout`, `layout-style`, `.ly-layout-*`, and `.ly-style-*` are legacy-only. Move the personality value to `data-ly-layout` on `.ly-root`.
-## Primitive And Recipe Mapping
-The v2 composition set is stack, cluster, center, cover, switcher, sidebar, grid, split, panes, media, reel, frame, and bounded scroll.
-| 1.x API | V2 API |
-| --- | --- |
-| `.ly-row` plus `.ly-col-*` | `.ly-grid` plus `.ly-cols-*` and `.ly-span-*`, or `.ly-cluster` for wrapping flow |
-| `.ly-carousel` | `.ly-reel` |
-| `.ly-scroll-area` | `.ly-scroll` |
-| `.ly-sidebar-layout` | `.ly-sidebar` or the `docs` recipe |
-| `.ly-panes--two` | `.ly-panes--2` |
-| `.ly-panes--three` | `.ly-panes--3` |
-| Ad hoc shell class combinations | A matching `data-ly-recipe` root with named `data-ly-area` children |
-| `.ly-button-group` | `.ly-cluster` |
-| `.ly-card-grid` | `data-ly-recipe="card-grid"` or `.ly-card-grid` |
-| `.ly-gallery` | `data-ly-recipe="gallery"` or `.ly-gallery` |
-| `.ly-content` | V2 primitives and recipe areas already apply shrink safety; `legacy.css` preserves the structural `min-inline-size: 0` alias for ad hoc v1 content regions. |
-| `.ly-divider` | Replace spacing with a stack gap or spacing utility and source the visual divider from UI Style Kit or the application theme. `legacy.css` preserves only its `1px` minimum block geometry and block spacing, never paint. |
-| `.ly-surface--raised` | Removed. Raised radius, border, background, and shadow treatment belongs to UI Style Kit or application theme styling, so `legacy.css` intentionally does not restore this selector. |
-The v1 column, carousel, button-group, sidebar, pane, card-size, app-area, scroll, content, and structural divider aliases remain functional only through `legacy.css`. The paint-owned `.ly-surface--raised` API is removed rather than aliased.
-## Mobile Order And Accessibility
-DOM order is authoritative on mobile and must match the intended reading order and focus order. Built-in recipes never use CSS `order`; they rearrange named grid areas at wider containers without changing source order.
-V2 provides `.ly-order-first`, `.ly-order-normal`, `.ly-order-last`, and `.ly-order-1` through `.ly-order-6`. Equivalent `ly-md-order-*` and `ly-lg-order-*` utilities activate at the `48rem` and `64rem` container thresholds.
-These utilities are explicit escape hatches. They can make visual order disagree with assistive-technology reading order or keyboard focus order. Prefer semantic source order. When an escape hatch is unavoidable, test the complete keyboard sequence, screen-reader reading order, and mobile fallback.
-## Temporary Legacy Bundle
-Use one import during an incremental migration:
-```js
-import "layout-style-css/legacy.css";
-```
-`legacy.css` imports the full v2 bundle and adds functional aliases for old wrapper names, root hooks, layout aliases, 12-column utilities, carousel, button groups, sidebar layouts, pane names, card sizing, app regions, scroll areas, `.ly-content`, and structural `.ly-divider` geometry. It does not restore `.ly-surface--raised`, companion imports, or removed package exports.
-Legacy compatibility is supported for the v2 line only and is scheduled for removal in v3. Treat it as a transition tool: migrate markup and imports before upgrading to the next major version.
-## Migration Checklist
-1. Upgrade the development runtime to Node.js 20 or newer.
-2. Remove companion packages from peer assumptions and install only the layers the application uses.
-3. Replace removed aggregate and root personality imports with focused v2 exports.
-4. Change wrapper size names to semantic wrapper names.
-5. Move personality selection to `data-ly-layout`.
-6. Add `data-ly-recipe` and `data-ly-area` hooks while preserving correct mobile source order.
-7. Replace v1 column and recipe aliases, or temporarily switch to `legacy.css`.
-8. Audit every base, `ly-md-*`, and `ly-lg-*` order utility for reading and focus-order impact.
-9. Test below and above both core container thresholds and the selected personality threshold in Chromium, Firefox, and WebKit.
-10. Remove `legacy.css` before the v3 upgrade.

package/docs/wiki/Release-And-Publishing.md DELETED Viewed

@@ -1,77 +0,0 @@
-# Release And Publishing
-This checklist prepares `layout-style-css@2.1.1`. Publishing, tagging, pushing, and creating a GitHub release require separate explicit approval.
-## Version Contract
-- `package.json` and `package-lock.json` identify `2.1.1`.
-- Node.js 20 and 22 pass standalone CI.
-- `CHANGELOG.md` contains the dated 2.1.1 release entry.
-- README, migration guide, wiki, demo, exports, and tarball describe the same v2 API.
-- No peer or runtime dependencies are present.
-## Local Verification
-Install all Playwright engines once:
-```bash
-npx playwright install chromium firefox webkit
-```
-Then run:
-```bash
-npm run build
-npm run lint
-npm run check:demo-js
-npm run test:static
-npm run test:demo:quick
-npm run test:demo:all
-npm run test:pages
-npm run pack:dry-run
-npm run release:verify
-git diff --check
-```
-`release:verify` runs build, lint, JavaScript syntax, static contracts, the Pages artifact, Chromium, Firefox, WebKit, the intentional tarball listing, `npm audit --audit-level=moderate`, and an npm publish dry run. It does not publish.
-`prepublishOnly` runs `npm run release:verify`, so a direct `npm publish` still has the full release verification gate.
-## Tag And Version Validation
-The publish workflow checks out the selected tag and fails unless it equals `v${package.version}`. For this release the only valid tag is `v2.1.1`.
-After separate approval, an operator may check registry availability:
-```bash
-npm view layout-style-css@2.1.1 version --json
-```
-The eventual release sequence is:
-```bash
-git tag v2.1.1
-git push origin v2.1.1
-```
-Publishing the `v2.1.1` GitHub release triggers the npm workflow. A separately approved recovery run may use `release_tag` set to `v2.1.1`.
-## Workflow Safety
-Create a GitHub Environment named `npm` and configure required reviewers before enabling the publish job. Environment approval is the final human authorization boundary for npm releases.
-Before `npm ci` can execute package lifecycle code, the workflow:
-1. rejects release inputs that are not strict `v`-prefixed semantic-version tags;
-2. checks out the exact `refs/tags/<release_tag>` namespace without persisted credentials;
-3. verifies `HEAD` equals the tag's peeled commit;
-4. fetches `origin/main` and requires the tag commit to be reachable from protected main; and
-5. requires the package version to equal the tag.
-The workflow installs Chromium, Firefox, and WebKit, runs full release verification, and publishes with npm provenance. `NODE_AUTH_TOKEN` exists only on the final publish step. Migrating to npm trusted publishing should remove that long-lived secret in a follow-up.
-The workflow actions remain major-version references. Pinning every third-party action to an immutable commit SHA is a documented security follow-up and should be performed with an automated update process. Do not bypass a failed trust, version, browser, audit, tarball, or documentation contract.
-## Wiki Mirror
-The versioned `docs/wiki/` source is authoritative. If GitHub Wiki is enabled, mirror these Markdown files only after the release documentation has passed the local contract suite.