feat!: rebuild Layout Style CSS for v3 intrinsic responsiveness by Foscat · Pull Request #12 · Foscat/Layout-Style-CSS

Foscat · 2026-07-29T17:18:03Z

Summary

rebuild Layout Style CSS as a dependency-free, CSS-only intrinsic responsive system
make wrappers, primitives, and seven semantic recipes adapt to available inline and block space
add one shared container-query recipe engine with an opt-out manual fallback
convert all sixteen personalities into spatial token profiles consumed by the shared engine
rebuild the demo with independent width and height controls, responsive presets, topology reporting, and copy-ready canonical markup
update package exports, generated distribution files, documentation, changelog, migration guidance, Pages artifacts, and release automation for 3.0.0

Breaking changes

remove legacy.css, v1/v2 aliases, recipe class aliases, responsive utility families, visual-order utilities, redundant export aliases, and the deprecated UI Style Kit structural bridge
recipes now use canonical data-ly-recipe, data-ly-area, and data-ly-layout hooks
consumers that own topology can set data-ly-responsive="manual" and provide application container queries against the named ly-scope container

User and developer impact

Layouts now work with near-zero configuration across mobile, tablet, desktop, portrait, landscape, ultrawide, and short-height allocations. Wrapper nesting and direct-root recipes respond to their actual available space while preserving semantic DOM, reading, keyboard, and focus order.

Verification

npm.cmd run release:verify
- build and generated/source parity
- Stylelint and demo JavaScript syntax
- static package, documentation, export, migration, and tarball contracts
- full Chromium, Firefox, and WebKit responsive matrices
- GitHub Pages artifact checks
- npm pack and publish dry-runs
- npm audit: zero vulnerabilities
connected Chromium desktop and 360×800 mobile interaction smoke tests
git diff --check

Release boundary

This PR prepares version 3.0.0 only. It does not create a tag or GitHub Release and does not publish to npm.

Copilot

Pull request overview

Introduces layout-style-css v3.0.0 as a clean-break, intrinsic, attribute-first responsive layout system. This release restructures the shipped CSS surface (new foundation + focused modules + profiles), removes legacy/bridge layers, and updates the demo/tests/docs to match the new container-query engine and height-aware behavior.

Changes:

Rebuilds the CSS architecture around foundation.css, a shared ly-scope container model, and breakpoint-free personality “profiles”.
Removes legacy compatibility surfaces (legacy bundle + UI Style Kit bridge + responsive/order utility families) and tightens the npm tarball/public exports.
Updates demo, pages artifact workflow, docs/wiki guidance, and test contracts for v3 usage and validation.

Reviewed changes

Copilot reviewed 58 out of 86 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
test/pages-artifact.test.mjs	Updates GitHub Pages artifact assertions for v3 files, canonical URL, and metadata.
test/fixtures/v2-public-selectors.json	Adds v2 selector index fixture for migration/contract testing.
styles/wrappers.css	Refactors wrappers to `ly-scope` containment and updated gutter token strategy.
styles/utilities.css	Trims utilities to v3 surface (removes responsive/order families; updates height sizing).
styles/primitives.css	Shifts primitives toward intrinsic track behavior and v3 height/safe-area tokens.
styles/personalities/z-pattern.css	Converts personality to token/topology profile variables (no `@container` rules).
styles/personalities/y2k.css	Converts personality to token/topology profile variables (no `@container` rules).
styles/personalities/tactile.css	Converts personality to token/topology profile variables (no `@container` rules).
styles/personalities/synthwave.css	Converts personality to token/topology profile variables (no `@container` rules).
styles/personalities/split-screen.css	Converts personality to token/topology profile variables (no `@container` rules).
styles/personalities/retrofuturism.css	Converts personality to token/topology profile variables (no `@container` rules).
styles/personalities/retro-glass.css	Converts personality to token/topology profile variables (no `@container` rules).
styles/personalities/neumorphism.css	Converts personality to token/topology profile variables (no `@container` rules).
styles/personalities/mondrian.css	Converts personality to token/topology profile variables (no `@container` rules).
styles/personalities/minimal-saas.css	Converts personality to token/topology profile variables (no `@container` rules).
styles/personalities/maximalist.css	Converts personality to token/topology profile variables (no `@container` rules).
styles/personalities/f-pattern.css	Converts personality to token/topology profile variables (no `@container` rules).
styles/personalities/cyberpunk.css	Converts personality to token/topology profile variables (no `@container` rules).
styles/personalities/brutalism.css	Converts personality to token/topology profile variables (no `@container` rules).
styles/personalities/bento.css	Converts personality to token/topology profile variables (no `@container` rules).
styles/personalities/bauhaus.css	Converts personality to token/topology profile variables (no `@container` rules).
styles/personalities.css	Keeps personality entrypoint import list aligned with new profile files.
styles/legacy.css	Removes legacy compatibility bundle from source.
styles/integrations/ui-style-kit.css	Removes deprecated UI Style Kit structural bridge.
styles/foundation.css	Adds shared tokens/reset/containment + height-tier behavior for v3.
styles/core.css	Includes new `foundation.css` in the core bundle entrypoint.
stylelint.config.mjs	Allows consecutive duplicate declarations to support unit fallbacks/enhancements.
scripts/build.mjs	Updates build pipeline to emit new module set and remove legacy/integration outputs.
scripts/build-pages.mjs	Removes integration rewrite from Pages build step.
package.json	Bumps version to 3.0.0, updates exports surface, and tightens published `files`.
package-lock.json	Aligns lockfile version metadata with 3.0.0.
docs/wiki/UI-Style-Kit-Compatibility.md	Reframes guidance around companion-library ownership without a bridge.
docs/wiki/Security-And-Support.md	Updates supported lines and release trust narrative for v3.
docs/wiki/Release-And-Publishing.md	Updates release gate instructions and candidate checklist for v3.
docs/wiki/Migrating-To-3.0.md	Adds new v3 migration guide and removed-surface mapping.
docs/wiki/Layout-Styles.md	Updates personality model description to “profiles” + shared engine constraints.
docs/wiki/Layout-Recipes.md	Updates recipe semantics (attribute-only, automatic/manual responsiveness).
docs/wiki/Layout-Primitives.md	Updates primitives/wrappers guidance to v3 foundation and intrinsic tracks.
docs/wiki/Installation-And-CDN.md	Updates v3 install/import/CDN snippets and export list.
docs/wiki/Home.md	Updates wiki homepage for v3 contract and navigation set.
docs/wiki/Getting-Started.md	Updates getting-started path for v3 automatic layouts and manual mode.
docs/wiki/Demo-And-GitHub-Pages.md	Updates demo controls and Pages verification guidance for v3.
docs/wiki/Contributing.md	Tightens contributor expectations around v3 thresholds and profile constraints.
docs/wiki/_Sidebar.md	Updates wiki sidebar links for v3 structure.
dist/wrappers.css	Regenerates dist wrapper module to match v3 wrapper scope behavior.
dist/utilities.css	Regenerates dist utility module to match v3 utility surface.
dist/primitives.css	Regenerates dist primitives module to match v3 intrinsic track behavior.
dist/personalities/z-pattern.css	Regenerates dist personality profile module (z-pattern).
dist/personalities/y2k.css	Regenerates dist personality profile module (y2k).
dist/personalities/tactile.css	Regenerates dist personality profile module (tactile).
dist/personalities/synthwave.css	Regenerates dist personality profile module (synthwave).
dist/personalities/split-screen.css	Regenerates dist personality profile module (split-screen).
dist/personalities/retrofuturism.css	Regenerates dist personality profile module (retrofuturism).
dist/personalities/retro-glass.css	Regenerates dist personality profile module (retro-glass).
dist/personalities/neumorphism.css	Regenerates dist personality profile module (neumorphism).
dist/personalities/mondrian.css	Regenerates dist personality profile module (mondrian).
dist/personalities/minimal-saas.css	Regenerates dist personality profile module (minimal-saas).
dist/personalities/maximalist.css	Regenerates dist personality profile module (maximalist).
dist/personalities/f-pattern.css	Regenerates dist personality profile module (f-pattern).
dist/personalities/cyberpunk.css	Regenerates dist personality profile module (cyberpunk).
dist/personalities/brutalism.css	Regenerates dist personality profile module (brutalism).
dist/personalities/bento.css	Regenerates dist personality profile module (bento).
dist/personalities/bauhaus.css	Regenerates dist personality profile module (bauhaus).
dist/personalities.css	Regenerates dist personality entrypoint to import v3 profile files.
dist/integrations/ui-style-kit.css	Removes generated integration bridge output.
dist/foundation.css	Adds generated foundation module output in dist.
dist/core.css	Updates generated core entrypoint to include foundation.
desktop.ini	Adds OS-specific metadata file (should not be committed).
demo/sitemap.xml	Updates canonical Pages URL casing and lastmod metadata.
demo/site.webmanifest	Updates demo manifest description for v3.
demo/robots.txt	Updates sitemap URL casing for GitHub Pages.
demo/index.html	Updates demo metadata, versioning, asset cache-busting, and new controls UI.
demo/demo.js	Adds device + width/height + manual mode controls and topology/readout logic.
demo/demo.css	Adds height-tier styling and preview sizing behavior; adjusts viewport sizing fallbacks.
CONTRIBUTING.md	Updates top-level contributing rules for v3 canonical hooks and thresholds.
CHANGELOG.md	Adds 3.0.0 release notes describing breaking changes and new architecture.
.github/workflows/npm-publish.yml	Updates workflow input description examples to v3 tag.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

  .ly-header--sticky {
-    position: sticky;
+    position: var(--ly-sticky-position);
    inset-block-start: 0;
-    z-index: var(--ly-z-header);
+    z-index: var(--ly-z-header, 20);
  }


+[.ShellClassInfo]
+IconResource=C:\Users\Foscat Laptop\Desktop\Layout-Style-CSS\demo\assets\favicon.ico,0
+[ViewState]
+Mode=
+Vid=


+    requestedWidth: state.container === "auto" ? null : Number.parseFloat(state.container) * 16,
+    requestedHeight: state.height === "auto" ? null : Number.parseFloat(state.height) * 16,


+  const availableHeight = allocation.requestedHeight ?? window.innerHeight;
+  const tier = availableHeight <= 30 * 16 ? "shallow" : availableHeight <= 44 * 16 ? "short" : "regular";
+  previewRoot.dataset.demoHeightTier = tier;
+}


Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

…er, root font size, remove desktop.ini

Foscat added 4 commits July 29, 2026 06:03

feat!: rebuild core as intrinsic responsive v3

ddef6ac

feat: rebuild intrinsic responsive demo and browser matrix

9173ca9

docs: publish v3 contract and migration guidance

700fedc

fix: harden v3 responsive and release contracts

123b759

Copilot AI review requested due to automatic review settings July 29, 2026 17:18

Copilot started reviewing on behalf of Foscat July 29, 2026 17:18 View session

Foscat changed the title ~~3.0.0~~ feat!: rebuild Layout Style CSS for v3 intrinsic responsiveness Jul 29, 2026

Foscat marked this pull request as draft July 29, 2026 17:20

Copilot AI reviewed Jul 29, 2026

View reviewed changes

change from auto to clip

30222ad

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot started work on behalf of Foscat July 29, 2026 17:25 View session

fix: apply PR review feedback - fallback position, viewport units ord…

fde826c

…er, root font size, remove desktop.ini

Copilot finished work on behalf of Foscat July 29, 2026 17:29

fix: harden responsive review regressions

e1dec33

Foscat marked this pull request as ready for review July 29, 2026 18:03

Foscat merged commit fab8e26 into main Jul 29, 2026
10 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat!: rebuild Layout Style CSS for v3 intrinsic responsiveness - #12

feat!: rebuild Layout Style CSS for v3 intrinsic responsiveness#12
Foscat merged 7 commits into
mainfrom
3.0.0

Foscat commented Jul 29, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		requestedWidth: state.container === "auto" ? null : Number.parseFloat(state.container) * 16,
		requestedHeight: state.height === "auto" ? null : Number.parseFloat(state.height) * 16,

Conversation

Foscat commented Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Breaking changes

User and developer impact

Verification

Release boundary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Foscat commented Jul 29, 2026 •

edited

Loading