layout-style-css 2.1.1 → 3.0.1

package/docs/wiki/Layout-Recipes.md

@@ -1,49 +1,58 @@
 # 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.
+Recipes are attribute-only semantic layouts. The mobile DOM order is authoritative, and automatic container enhancement is the zero-configuration default.
 
-## Public Hooks
+## Automatic Thresholds
 
-Use `data-ly-recipe` with one of:
+| Recipe | Nearest `ly-scope` threshold |
+| --- | --- |
+| `data-ly-recipe="split-hero"` | `42rem` |
+| `data-ly-recipe="list-detail"` | `44rem` |
+| `data-ly-recipe="docs"` | `48rem` |
+| `data-ly-recipe="app-shell"` | medium `52rem`, wide `72rem` |
+| `data-ly-recipe="dashboard"` | medium `52rem`, wide `72rem` |
+| `data-ly-recipe="gallery"` | intrinsic; no topology query |
+| `data-ly-recipe="card-grid"` | intrinsic; no topology query |
 
-- `app-shell`
-- `dashboard`
-- `docs`
-- `list-detail`
-- `split-hero`
-- `gallery`
-- `card-grid`
+Recipe roots also establish `ly-scope`, so child compositions can respond without extra setup.
 
-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.
+## Areas
 
-Use `data-ly-area` with `header`, `nav`, `main`, `aside`, `footer`, `content`, `media`, `actions`, `primary`, or `secondary`.
+Canonical `data-ly-area` values are:
 
-## Application Recipe
+- App shell: `header`, `sidebar`, `main`, `aside`, `footer`
+- Dashboard and Docs: `header`, `nav`, `main`, `aside`, `footer`
+- List detail: `primary`, `secondary`, `actions`
+- Split hero: `content`, `media`, `actions`
 
 ```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>
+<section data-ly-recipe="docs">
+  <header data-ly-area="header">Docs</header>
+  <nav data-ly-area="nav" aria-label="Documentation">Navigation</nav>
+  <main data-ly-area="main">Article</main>
+  <aside data-ly-area="aside">On this page</aside>
+  <footer data-ly-area="footer">Next</footer>
+</section>
 ```
 
-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
+## Manual Responsiveness
 
-`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.
+`data-ly-responsive="manual"` disables automatic topology rules while retaining the stacked fallback.
 
-```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>
+```css
+@container ly-scope (min-width: 56rem) {
+  [data-ly-recipe="docs"][data-ly-responsive="manual"] {
+    /* Application-owned topology. */
+  }
+}
 ```
 
-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.
+Use the nearest wrapper as the query boundary when a component needs a constrained local allocation. Use a recipe directly in `.ly-root` when no measure wrapper is needed.
+
+## Accessibility
+
+Write the source in mobile reading order and keep actions beside the content they control. Named grid areas can change visual placement, but they do not alter DOM, reading, keyboard, or focus order. Visual-order utilities are not part of v3.
+
+## Vertical Responsiveness
+
+Recipe gaps and scroll bounds tighten at `44rem` viewport height. At `30rem`, recipe-owned sticky positioning and forced shell height stop so navigation, main content, and actions remain reachable.

package/docs/wiki/Layout-Styles.md

@@ -1,33 +1,67 @@
 # Layout Styles
 
-V2 calls spatial styles “personalities” and selects them with the canonical `data-ly-layout` hook on `.ly-root`.
+The sixteen `data-ly-layout` values are focused token and topology profiles:
+
+`minimal-saas`, `bauhaus`, `tactile`, `cyberpunk`, `f-pattern`, `brutalism`, `neumorphism`, `y2k`, `retro-glass`, `z-pattern`, `retrofuturism`, `mondrian`, `synthwave`, `bento`, `maximalist`, and `split-screen`.
 
 ```html
-<body class="ly-root" data-ly-layout="synthwave">...</body>
+<body class="ly-root" data-ly-layout="bento">
+  <main data-ly-recipe="dashboard">...</main>
+</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`.
+## Shared Engine
+
+Every profile feeds the same wrapper, primitive, and recipe engine. Profiles tune values such as:
+
+- wrapper measure
+- base and grid gaps
+- rail, pane, and media preferences
+- gallery and card minimums
+- frame ratio
+- shared recipe area and track templates
+
+A profile must remain visibly distinct through at least two spatial characteristics. Personality files may not declare their own `@container`, viewport, or orientation breakpoint systems.
+
+## Ownership
+
+Layout owns structure. UI Style Kit owns paint. Interactive Surface owns interaction styling.
+
+The personality name does not promise colors, typography, borders, shadows, or interaction states. Pair the same name across libraries when desired, but import each library explicitly and let it own its layer.
+
+## Visual Pairing Guidance
+
+[`layout-style-css/personalities.json`](../../personalities.json) is the public, machine-readable pairing source used by the demo. Its entries are recommendations, never dependencies: `data-ly-layout`, `data-ui`, `data-theme`, and `data-mode` are independently selectable on the same document.
+
+| Layout personality | Visual pairing guidance |
+| --- | --- |
+| Minimal SaaS | Native match: `minimal-saas` |
+| Bento | Native match: `bento` |
+| Maximalist | Native match: `maximalist` |
+| Bauhaus | Native match: `bauhaus` |
+| Tactile | Native match: `tactile` |
+| Neumorphism | Native match: `neumorphism` |
+| Retrofuturism | Native match: `retrofuturism` |
+| Brutalism | Native match: `brutalism` |
+| Cyberpunk | Native match: `cyberpunk` |
+| Y2K | Native match: `y2k` |
+| Retro Glass | Native match: `retro-glass` |
+| F-pattern | Any visual preset; this is structure only |
+| Z-pattern | Any visual preset; this is structure only |
+| Split Screen | Any visual preset; this is structure only |
+| Mondrian | Any visual preset; this is structure only |
+| Synthwave | Recommended: `cyberpunk` or `retrofuturism`; the browser contract verifies each preset's distinct rendered article shadow while retaining `data-ly-layout="synthwave"` |
+
+## Customization
+
+Override public tokens at `.ly-root` or a narrower scope:
+
+```css
+.product-shell {
+  --ly-profile-gap: 1.25rem;
+  --ly-recipe-rail: 17rem;
+  --ly-card-grid-min: 18rem;
+}
+```
 
+Use `data-ly-responsive="manual"` plus an application-owned `@container ly-scope` query when token tuning is not enough.

package/docs/wiki/Migrating-To-3.0.md

@@ -0,0 +1,205 @@
+# Migrating To 3.0
+
+`layout-style-css@3.0.0` is an intentional clean break from v2. There is no compatibility bundle. Migrate markup and imports before upgrading the package.
+
+## Package Imports
+
+| Removed v2 surface | v3 replacement |
+| --- | --- |
+| `layout-style-css/legacy.css` | Canonical v3 hooks; `legacy.css` is not shipped |
+| `layout-style-css/integrations/ui-style-kit.css` | Import UI Style Kit paint explicitly; `integrations/ui-style-kit.css` is not shipped |
+| `layout-style-css/bridge.css` | Removed; compose UI Style Kit paint explicitly because `bridge.css` is not shipped |
+| `layout-style-css/css` (`./css`) | `layout-style-css` |
+| `layout-style-css/css.css` (`./css.css`) | `layout-style-css` |
+| `layout-style-css/min` (`./min`) | `layout-style-css/min.css` |
+
+Focused exports remain available for `foundation.css`, `wrappers.css`, `primitives.css`, `recipes.css`, `utilities.css`, `personalities.css`, and `personalities/*.css`.
+
+## Recipe Hooks
+
+Recipe classes were aliases in v2 and are removed in v3. Replace them with the canonical attribute:
+
+| Removed class | Canonical v3 hook |
+| --- | --- |
+| `.ly-app-shell` | `data-ly-recipe="app-shell"` |
+| `.ly-dashboard` | `data-ly-recipe="dashboard"` |
+| `.ly-docs` | `data-ly-recipe="docs"` |
+| `.ly-list-detail` | `data-ly-recipe="list-detail"` |
+| `.ly-split-hero` | `data-ly-recipe="split-hero"` |
+| `.ly-gallery` | `data-ly-recipe="gallery"` |
+| `.ly-card-grid` | `data-ly-recipe="card-grid"` |
+
+Before:
+
+```html
+<section class="ly-dashboard" data-ly-recipe="dashboard">...</section>
+```
+
+After:
+
+```html
+<section data-ly-recipe="dashboard">...</section>
+```
+
+Keep canonical `data-ly-area` values on regions. App shell uses `sidebar`; Dashboard and Docs use `nav`.
+
+## Automatic And Manual Responsiveness
+
+Missing `data-ly-responsive` means automatic enhancement. To own topology yourself, opt out:
+
+```html
+<section data-ly-recipe="docs" data-ly-responsive="manual">...</section>
+```
+
+```css
+@container ly-scope (min-width: 56rem) {
+  [data-ly-recipe="docs"][data-ly-responsive="manual"] {
+    /* Application-owned topology. */
+  }
+}
+```
+
+The manual form retains the safe single-column fallback until the application query applies.
+
+## Containers And Wrappers
+
+`.ly-root`, every `.ly-wrapper`, and every recipe root now establishes the named `ly-scope` inline-size container. Recipes can be direct children of `.ly-root`; nested recipes respond to the nearest wrapper.
+
+The v3 wrapper names remain:
+
+- `.ly-wrapper--compact`
+- `.ly-wrapper--prose`
+- `.ly-wrapper--content`
+- `.ly-wrapper--wide`
+- `.ly-wrapper--full`
+- `.ly-wrapper--breakout`
+
+Breakout lanes remain `data-ly-lane="content"`, `data-ly-lane="feature"`, and `data-ly-lane="full"`.
+
+## Utilities And Source Order
+
+Remove all v2 responsive utility families:
+
+- `ly-md-*`
+- `ly-lg-*`
+
+Remove all visual-order utilities, including `.ly-order-first`, `.ly-order-normal`, `.ly-order-last`, and numbered order classes. There is no v3 replacement.
+
+Fix the DOM instead. The mobile DOM order is the reading and keyboard order; named grid areas enhance presentation without moving focus. Built-in recipes never use Flexbox or Grid ordering.
+
+The v3 utility module keeps only stable structural sizing, gap, padding, ratio, alignment, overflow, visibility, span, and column helpers.
+
+Remove `.ly-bleed`. Its `100vw` technique could overflow documents with classic scrollbars. Use the clamped `data-ly-lane="feature"` or `data-ly-lane="full"` breakout lanes, or an application-owned technique that accounts for its actual containing block.
+
+## Complete V2 Selector Index
+
+This index compares the `2.1.1` default bundle with v3. Selectors not named below remain available with their canonical v3 meaning.
+
+### Structural Aliases
+
+Replace application-shell region classes with canonical areas:
+
+| Removed classes | v3 replacement |
+| --- | --- |
+| `.ly-app-header`, `.ly-app-sidebar`, `.ly-app-main`, `.ly-app-aside`, `.ly-app-footer` | `data-ly-area="header"`, `data-ly-area="sidebar"`, `data-ly-area="main"`, `data-ly-area="aside"`, `data-ly-area="footer"` |
+
+Replace every removed area class with its same-named attribute:
+
+- `.ly-area--header` → `data-ly-area="header"`
+- `.ly-area--nav` → `data-ly-area="nav"`
+- `.ly-area--main` → `data-ly-area="main"`
+- `.ly-area--aside` → `data-ly-area="aside"`
+- `.ly-area--footer` → `data-ly-area="footer"`
+- `.ly-area--content` → `data-ly-area="content"`
+- `.ly-area--media` → `data-ly-area="media"`
+- `.ly-area--actions` → `data-ly-area="actions"`
+- `.ly-area--primary` → `data-ly-area="primary"`
+- `.ly-area--secondary` → `data-ly-area="secondary"`
+
+`.ly-grid--auto` becomes `.ly-grid`; intrinsic `auto-fit` tracks are now the default. Replace `.ly-panes--2` and `.ly-panes--3` with `.ly-panes`, then tune `--ly-pane-min`, `--ly-pane-size`, or application CSS if an exact fixed topology is required.
+
+The removed `.ly-media__asset` and `.ly-media__content` aliases become correctly ordered children of `.ly-media`. Keep `.ly-media__actions` when its existing action sizing is useful; use application-owned hooks if asset and content children need additional semantics.
+
+### Columns And Spans
+
+The stable column utilities retained by v3 are `.ly-cols-1`, `.ly-cols-2`, `.ly-cols-3`, `.ly-cols-4`, `.ly-cols-6`, and `.ly-cols-12`. Replace the removed `.ly-cols-5`, `.ly-cols-7`, `.ly-cols-8`, `.ly-cols-9`, `.ly-cols-10`, `.ly-cols-11`, and `.ly-cols-16` with a local `--ly-grid-columns` override:
+
+```css
+.application-grid {
+  --ly-grid-columns: 8;
+}
+```
+
+All responsive column aliases are removed:
+
+- `.ly-md-cols-1`, `.ly-md-cols-2`, `.ly-md-cols-3`, `.ly-md-cols-4`, `.ly-md-cols-6`, `.ly-md-cols-8`, `.ly-md-cols-12`, `.ly-md-cols-16`
+- `.ly-lg-cols-1`, `.ly-lg-cols-2`, `.ly-lg-cols-3`, `.ly-lg-cols-4`, `.ly-lg-cols-6`, `.ly-lg-cols-8`, `.ly-lg-cols-12`, `.ly-lg-cols-16`
+
+Put a retained base utility or `--ly-grid-columns` override inside an application-owned `@container ly-scope` query when a fixed responsive column count is genuinely required.
+
+V3 retains `.ly-span-1` through `.ly-span-4` and `.ly-span-full`. Replace `.ly-span-5`, `.ly-span-6`, `.ly-span-7`, `.ly-span-8`, `.ly-span-9`, `.ly-span-10`, `.ly-span-11`, `.ly-span-12`, `.ly-span-13`, `.ly-span-14`, `.ly-span-15`, and `.ly-span-16` with application CSS such as `grid-column: span 8`.
+
+### Spacing And Ratio Utilities
+
+V3 keeps the even spacing steps. Replace `.ly-gap-1`, `.ly-gap-3`, `.ly-gap-5`, `.ly-gap-7`, and `.ly-gap-9` with the closest retained utility or set `--ly-gap`, `--ly-grid-gap`, `--ly-stack-gap`, and `--ly-cluster-gap` together in application CSS.
+
+Replace `.ly-pad-1`, `.ly-pad-3`, `.ly-pad-5`, `.ly-pad-7`, and `.ly-pad-9` with a retained even padding step or application padding. The directional `.ly-px-4`, `.ly-px-6`, `.ly-px-8`, `.ly-py-4`, `.ly-py-6`, and `.ly-py-8` aliases have no v3 utility; use logical `padding-inline` or `padding-block`.
+
+Replace `.ly-frame-2x1` with an application token override:
+
+```css
+.application-frame {
+  --ly-frame-ratio: 2 / 1;
+}
+```
+
+### Responsive Visibility And Visual Order
+
+`.ly-show-md-up` and `.ly-show-lg-up` are removed. Prefer content that remains available at every allocation; if conditional rendering is a product requirement, own it in application CSS and preserve an accessible reading experience.
+
+All visual-order selectors are removed with no v3 replacement:
+
+- `.ly-order-first`, `.ly-order-normal`, `.ly-order-last`, `.ly-order-1`, `.ly-order-2`, `.ly-order-3`, `.ly-order-4`, `.ly-order-5`, `.ly-order-6`
+- `.ly-md-order-first`, `.ly-md-order-normal`, `.ly-md-order-last`, `.ly-md-order-1`, `.ly-md-order-2`, `.ly-md-order-3`, `.ly-md-order-4`, `.ly-md-order-5`, `.ly-md-order-6`
+- `.ly-lg-order-first`, `.ly-lg-order-normal`, `.ly-lg-order-last`, `.ly-lg-order-1`, `.ly-lg-order-2`, `.ly-lg-order-3`, `.ly-lg-order-4`, `.ly-lg-order-5`, `.ly-lg-order-6`
+
+## Vertical Responsiveness
+
+v3 adds height-aware defaults:
+
+- At `44rem` high or less, spacing, header height, and scroll bounds tighten.
+- At `30rem` high or less, recipe-owned sticky positioning and forced cover/shell heights are removed.
+- `100vh` fallbacks are followed by `100dvh`.
+
+Delete application orientation workarounds that existed only to make v2 shells usable in short landscape, then test actual available width and height.
+
+## Personalities
+
+All sixteen `data-ly-layout` values remain. Personality files are now token/topology profiles consumed by one shared responsive engine. They do not own independent `@container` or viewport breakpoint systems.
+
+If application CSS targeted personality-specific topology thresholds, move that topology to a manual recipe query against `ly-scope`.
+
+## Ecosystem Ownership
+
+Layout owns structure. UI Style Kit owns paint. Interactive Surface owns interaction styling.
+
+```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";
+```
+
+Do not recreate the removed structural bridge with UI-prefixed aliases. Put canonical Layout hooks in markup and let companion libraries style their own responsibilities.
+
+## Migration Checklist
+
+1. Replace removed package exports.
+2. Remove recipe class aliases.
+3. Remove responsive and order utilities.
+4. Confirm the mobile DOM, reading, keyboard, and focus order.
+5. Use automatic recipes by default.
+6. Add `data-ly-responsive="manual"` only where application topology is genuinely required.
+7. Test all recipes directly in `.ly-root` and inside their nearest wrapper.
+8. Test narrow, wide, tall, and short-landscape allocations.
+9. Run `npm run test:full` in Chromium, Firefox, and WebKit.

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

@@ -1,77 +1,62 @@
 # Release And Publishing
 
-This checklist prepares `layout-style-css@2.1.1`. Publishing, tagging, pushing, and creating a GitHub release require separate explicit approval.
+This guide describes the release gate for `layout-style-css@3.0.1`. Running verification does not publish, tag, push, create a GitHub Release, or change the npm registry.
 
-## 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:
+## Local Candidate Gate
 
 ```bash
+npm ci
 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 test:full
 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.
+`npm run release:verify` includes `npm audit --audit-level=moderate`, the cross-engine browser matrix, Pages verification, tarball dry-run, publish dry-run, and `npm run release:preflight`. It does not publish.
 
-## Tag And Version Validation
+The read-only ecosystem preflight uses the immutable UI fixture in `ecosystem-release-fixture.json`, overrides Layout Style with the candidate tarball, queries npm for every exact documented minimum/current version, resolves all packed exports (including personality modules), validates maintained documentation, and runs the reviewed clean-install matrices. Pull requests execute this same gate without enabling publish, tag, release, or deployment mutations.
 
-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`.
+The package's `prepublishOnly` script runs `npm run release:verify`, so a direct npm publish uses the same full gate.
 
-After separate approval, an operator may check registry availability:
+## Coordinated Bootstrap Sequence
 
-```bash
-npm view layout-style-css@2.1.1 version --json
-```
+The immutable cross-repository pins require this exact remote sequence:
 
-The eventual release sequence is:
+1. Push a stable UI bootstrap ref containing `bdbb6a7e432f30b92de206cac6a00fe85394190c`.
+2. Push and merge Interactive Surface CSS and Layout Style CSS with merge commits so their reviewed commit SHAs remain reachable.
+3. Update and verify the final UI companion pins against those merged companion commits.
+4. Push the final UI branch, rerun its ecosystem preflight, and merge UI with a merge commit.
+5. Do not squash, rebase, or delete the only remote refs until every pinned commit is reachable through merged ancestry.
 
-```bash
-git tag v2.1.1
-git push origin v2.1.1
-```
+The bootstrap SHA is deliberately stable: companion workflows use it to load the reviewed preflight implementation before the final UI commit can reference the companion heads.
 
-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`.
+## Candidate Inspection
 
-## Workflow Safety
+Confirm:
 
-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.
+- package version is `3.0.1`
+- intended tag would be `v3.0.1`
+- runtime and peer dependencies are empty
+- exact exports and tarball files match the v3 contract
+- generated CSS matches authored sources
+- Chromium, Firefox, and WebKit are green
+- `desktop.ini` and other local-only files are absent from the tarball
 
-Before `npm ci` can execute package lifecycle code, the workflow:
+## Separately Approved Publication
 
-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.
+Only after explicit approval:
 
-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.
+1. Commit the verified candidate.
+2. Push the intended branch.
+3. Merge through the repository's normal review policy.
+4. Create the exact `v3.0.1` tag from the protected release commit.
+5. Publish the GitHub Release.
+6. Let the protected npm workflow verify the tag and publish with provenance.
+7. Confirm the GitHub Release, tag, and npm registry state independently.
 
-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.
+The npm job uses the protected `npm` environment, required reviewers, least-privilege permissions, strict tag validation, exact tag checkout, main-ancestry verification, and an immutable commit sha. Prefer npm trusted publishing when the registry setup supports it.
 
-## Wiki Mirror
+## Recovery
 
-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.
+If verification fails, fix the candidate and rerun the complete gate. Do not move or overwrite an existing release tag. Use a new semantic version when a published artifact must be corrected.

package/docs/wiki/Security-And-Support.md

@@ -1,36 +1,32 @@
 # Security And Support
 
-`layout-style-css` is dependency-free runtime CSS. It executes no consumer JavaScript, calls no services, reads no secrets, and processes no user input. The demo JavaScript uses allowlisted query values and `textContent` for generated snippets.
-
-## Supported Versions
+## Supported Lines
 
 | Version | Supported |
 | --- | --- |
-| `2.x` | Yes |
-| `1.1.x` | Migration support only |
-| `1.0.x` | No |
-
-The v2 `legacy.css` compatibility bundle is scheduled for removal in v3.
-
-## Browser Baseline
+| `3.x` | Yes |
+| `2.x` | Security fixes only during the v3 transition |
+| `1.x` | No |
 
-Current evergreen Chromium, Firefox, and WebKit are supported. The mobile DOM-order fallback remains usable when container queries are unavailable, but current browser engines are the tested contract.
+v3 is dependency-free at runtime. Development dependencies and release automation remain subject to the repository security policy.
 
-## Report A Security Issue
+## Reporting
 
-Use GitHub security advisories when available. Otherwise, open a minimal issue requesting a private coordination path without publishing exploit details.
+Use the private process in the repository [SECURITY.md](../../SECURITY.md). Do not publish exploit details in a public issue before maintainers can assess them.
 
-Include the affected version, export or selector, reproduction, expected impact, and whether the issue affects package consumers, the demo, or GitHub Pages.
+## Release Trust
 
-## Release Checks
+The npm workflow uses:
 
-```bash
-npm audit --audit-level=moderate
-npm run release:verify
-```
+- a protected npm environment with required reviewers
+- exact `refs/tags/v*` checkout
+- main-branch ancestry verification
+- least-privilege workflow permissions
+- registry provenance
+- an immutable commit sha
 
-The release gate checks authored/generated parity, structural ownership, documentation, tarball contents, Pages output, and the Chromium, Firefox, and WebKit rendered matrices.
+Use npm trusted publishing when configured. A local green `release:verify` is evidence for a candidate, not authority to publish.
 
-The npm publish workflow also enforces a strict tag namespace, exact tag/HEAD identity, protected-main ancestry, package-version alignment, an `npm` GitHub Environment with required reviewers, and npm provenance. The registry token is scoped to the final publish step. Replacing it with npm trusted publishing and pinning GitHub Actions to an immutable commit SHA remain explicit hardening follow-ups.
+## Structural Security Boundary
 
-The demo protects its two exact-version companion CDN fixtures with SHA-384 subresource integrity and anonymous CORS; rendered tests recompute those hashes from the pinned local fixtures.
+Layout CSS has no network calls, script execution, runtime dependencies, secrets, or user data processing. Security-sensitive application behavior remains outside this package.