layout-style-css 1.0.0 → 1.1.1

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

@@ -0,0 +1,34 @@
+# Security And Support
+
+`layout-style-css` is a CSS-only package. The package does not execute runtime JavaScript, call external services, read secrets, or process user input.
+
+## Supported Versions
+
+| Version | Supported |
+| --- | --- |
+| `1.1.x` | Yes |
+| `1.0.x` | Security fixes only when practical |
+
+## Report A Security Issue
+
+Use GitHub security advisories when available. If advisories are not enabled, open a minimal GitHub issue that requests a private coordination path and avoids public exploit details.
+
+Include:
+
+- affected version
+- affected package export or CSS selector
+- reproduction steps
+- expected impact
+- whether the issue affects package consumers, the demo, or GitHub Pages deployment
+
+## Security Checks
+
+Before release:
+
+```bash
+npm audit --audit-level=moderate
+npm run release:verify
+```
+
+The package contract tests check package exports, README import examples, npm tarball contents, generated CSS, demo smoke behavior, and GitHub Pages artifact structure.
+

package/docs/wiki/UI-Style-Kit-Compatibility.md

@@ -0,0 +1,54 @@
+# UI Style Kit Compatibility
+
+`layout-style-css` is built to pair with `ui-style-kit-css@2.0.1` while keeping each package responsible for one layer.
+
+## Ownership Boundary
+
+| Package | Owns |
+| --- | --- |
+| `ui-style-kit-css` | colors, typography, borders, shadows, native controls, component paint, focus states, themes, modes |
+| `layout-style-css` | wrappers, shells, grid behavior, panes, sidebars, spacing, layout recipes, layout personalities |
+
+## One Import Pairing
+
+```js
+import "layout-style-css/all-with-ui-kit.css";
+```
+
+This imports UI Style Kit and all layout files. Use `layout-style-css/all-with-ui-kit-and-interactive-surface.css` when Interactive Surface is also required.
+
+## Prefix Aliases
+
+The bridge maps UI-style structural names to layout primitives for these prefixes:
+
+```txt
+saas, bento, max, bau, tactile, neo, retro, brutal, cyber, y2k, rg
+```
+
+| Alias pattern | Layout primitive |
+| --- | --- |
+| `<prefix>-container` | `.ly-wrapper` |
+| `<prefix>-section` | `.ly-section` |
+| `<prefix>-stack` | `.ly-stack` |
+| `<prefix>-cluster` | `.ly-cluster` |
+| `<prefix>-grid` | `.ly-grid` |
+| `<prefix>-split` | `.ly-split` |
+| `<prefix>-button-group` | `.ly-button-group` |
+| `<prefix>-card-grid` | `.ly-card-grid` |
+| `<prefix>-card-sm`, `<prefix>-card-md`, `<prefix>-card-lg` | `.ly-card-sm`, `.ly-card-md`, `.ly-card-lg` |
+| `<prefix>-gallery` | `.ly-gallery` |
+| `<prefix>-carousel` | `.ly-carousel` |
+
+Visual component aliases such as `<prefix>-button`, `<prefix>-card`, and `<prefix>-panel` remain owned by UI Style Kit.
+
+## Integration Example
+
+```html
+<section class="saas-container saas-section">
+  <div class="saas-card-grid">
+    <article class="saas-card saas-card-md">Plan</article>
+    <article class="saas-card saas-card-md">Plan</article>
+  </div>
+</section>
+```
+

package/docs/wiki/_Sidebar.md

@@ -0,0 +1,14 @@
+# Wiki Navigation
+
+- [Home](Home.md)
+- [Getting Started](Getting-Started.md)
+- [Installation And CDN](Installation-And-CDN.md)
+- [Layout Primitives](Layout-Primitives.md)
+- [Layout Recipes](Layout-Recipes.md)
+- [Layout Styles](Layout-Styles.md)
+- [UI Style Kit Compatibility](UI-Style-Kit-Compatibility.md)
+- [Demo And GitHub Pages](Demo-And-GitHub-Pages.md)
+- [Release And Publishing](Release-And-Publishing.md)
+- [Security And Support](Security-And-Support.md)
+- [Contributing](Contributing.md)
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "layout-style-css",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Shell-first CSS layout primitives that complement ui-style-kit-css@2.0.1.",
   "type": "module",
   "license": "MIT",
@@ -60,6 +60,7 @@
     "./css.css": "./dist/layout-style-css.css",
     "./min": "./dist/layout-style-css.min.css",
     "./min.css": "./dist/layout-style-css.min.css",
+    "./dist/*.css": "./dist/*.css",
     "./dist/layout-style-css.css": "./dist/layout-style-css.css",
     "./dist/layout-style-css.min.css": "./dist/layout-style-css.min.css",
     "./base.css": "./dist/layout-base.css",
@@ -78,20 +79,29 @@
     "./cyberpunk.css": "./dist/layout-style-cyberpunk.css",
     "./y2k.css": "./dist/layout-style-y2k.css",
     "./retro-glass.css": "./dist/layout-style-retro-glass.css",
+    "./f-pattern.css": "./dist/layout-style-f-pattern.css",
+    "./z-pattern.css": "./dist/layout-style-z-pattern.css",
+    "./split-screen.css": "./dist/layout-style-split-screen.css",
+    "./mondrian.css": "./dist/layout-style-mondrian.css",
+    "./synthwave.css": "./dist/layout-style-synthwave.css",
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
     "styles",
+    "docs/wiki",
     "demo/index.html",
     "demo/assets/apple-touch-icon.svg",
     "demo/assets/favicon.svg",
-    "demo/assets/social-card.svg",
+    "demo/assets/social-card.png",
     "demo/browserconfig.xml",
     "demo/robots.txt",
     "demo/site.webmanifest",
     "demo/sitemap.xml",
     "README.md",
+    "CHANGELOG.md",
+    "CONTRIBUTING.md",
+    "SECURITY.md",
     "LICENSE"
   ]
 }

package/styles/layout-base.css

@@ -34,6 +34,13 @@
 
     --ly-grid-columns: 12;
     --ly-grid-min: 16rem;
+    --ly-card-grid-min: 16rem;
+    --ly-card-size-sm: 10rem;
+    --ly-card-size-md: 14rem;
+    --ly-card-size-lg: 18rem;
+    --ly-gallery-min: 12rem;
+    --ly-carousel-item-min: 16rem;
+    --ly-carousel-item-max: 28rem;
     --ly-sidebar-min: 14rem;
     --ly-sidebar-width: 18rem;
     --ly-sidebar-max: 22rem;
@@ -165,6 +172,19 @@
     gap: var(--ly-cluster-gap);
   }
 
+  .ly-button-group {
+    /* Button groups provide flow only; UI libraries keep button paint and states. */
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ly-cluster-gap);
+  }
+
+  .ly-button-group > * {
+    flex: 0 1 auto;
+    min-width: min(100%, var(--ly-button-min, 8rem));
+  }
+
   .ly-grid {
     display: grid;
     grid-template-columns: repeat(var(--ly-grid-columns), minmax(0, 1fr));
@@ -175,6 +195,53 @@
     grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-grid-min)), 1fr));
   }
 
+  .ly-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-card-grid-min)), 1fr));
+    gap: var(--ly-grid-gap);
+  }
+
+  .ly-card-grid > * {
+    min-width: 0;
+  }
+
+  .ly-card-sm {
+    min-block-size: var(--ly-card-size-sm);
+  }
+
+  .ly-card-md {
+    min-block-size: var(--ly-card-size-md);
+  }
+
+  .ly-card-lg {
+    min-block-size: var(--ly-card-size-lg);
+  }
+
+  .ly-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-gallery-min)), 1fr));
+    gap: var(--ly-grid-gap);
+  }
+
+  .ly-gallery > * {
+    min-width: 0;
+  }
+
+  .ly-carousel {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(min(100%, var(--ly-carousel-item-min)), var(--ly-carousel-item-max));
+    gap: var(--ly-grid-gap);
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scroll-snap-type: x proximity;
+  }
+
+  .ly-carousel > * {
+    min-width: 0;
+    scroll-snap-align: start;
+  }
+
   .ly-row {
     display: flex;
     flex-wrap: wrap;

package/styles/layout-style-f-pattern.css

@@ -0,0 +1,76 @@
+/*
+  Layout style: f-pattern.
+  Top-led scan path with a persistent left rail and heavier early content rows.
+  Visual identity remains owned by ui-style-kit-css.
+*/
+
+@layer ly.styles.f_pattern {
+  :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) {
+    --ly-container-max: 94rem;
+    --ly-page-padding-inline: clamp(1rem, 3vw, 2.75rem);
+    --ly-section-padding-block: clamp(2rem, 5vw, 4.5rem);
+    --ly-sidebar-width: clamp(13rem, 19vw, 20rem);
+    --ly-grid-min: 15rem;
+    --ly-gap: clamp(1rem, 2.25vw, 1.85rem);
+    --ly-grid-gap: var(--ly-gap);
+    --ly-stack-gap: clamp(0.875rem, 1.8vw, 1.45rem);
+  }
+
+  :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-app-main {
+    padding-block: clamp(0.75rem, 2vw, 2rem);
+  }
+
+  :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-container,
+  :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-wrapper {
+    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
+  }
+
+  :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-section {
+    padding-block: var(--ly-section-padding-block);
+  }
+
+  :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-grid--auto {
+    grid-auto-rows: minmax(8rem, auto);
+  }
+
+  @media (min-width: 48rem) {
+    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-app-shell {
+      grid-template-areas:
+        "header header"
+        "sidebar main";
+      grid-template-columns: minmax(min(100%, 13rem), 0.3fr) minmax(0, 1fr);
+      grid-template-rows: auto 1fr;
+    }
+
+    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-app-sidebar {
+      display: block;
+      position: sticky;
+      top: 0;
+      height: 100svh;
+      overflow: auto;
+    }
+
+    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-grid--auto > :nth-child(3n + 1) {
+      grid-column: span 2;
+      min-height: 13rem;
+    }
+
+    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-sidebar-layout {
+      grid-template-columns: minmax(min(100%, 14rem), 0.34fr) minmax(0, 1fr);
+    }
+
+    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-split {
+      grid-template-columns: minmax(0, 1.35fr) minmax(min(100%, 18rem), 0.65fr);
+    }
+
+    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-panes--two {
+      grid-template-columns: minmax(min(100%, 15rem), 0.38fr) minmax(0, 1fr);
+    }
+  }
+
+  @media (min-width: 80rem) {
+    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-panes--three {
+      grid-template-columns: minmax(min(100%, 13rem), 0.28fr) minmax(0, 1.28fr) minmax(min(100%, 16rem), 0.44fr);
+    }
+  }
+}

package/styles/layout-style-mondrian.css

@@ -0,0 +1,77 @@
+/*
+  Layout style: mondrian.
+  Asymmetrical rectangular blocks with staggered spans inspired by Mondrian
+  composition. Visual identity remains owned by ui-style-kit-css.
+*/
+
+@layer ly.styles.mondrian {
+  :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) {
+    --ly-container-max: 108rem;
+    --ly-page-padding-inline: clamp(0.75rem, 2.5vw, 2rem);
+    --ly-section-padding-block: clamp(1.75rem, 4.5vw, 4rem);
+    --ly-sidebar-width: clamp(11rem, 16vw, 17rem);
+    --ly-grid-min: 11rem;
+    --ly-gap: clamp(0.75rem, 1.6vw, 1.25rem);
+    --ly-grid-gap: var(--ly-gap);
+    --ly-stack-gap: clamp(0.75rem, 1.5vw, 1.2rem);
+  }
+
+  :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-app-main {
+    padding-block: clamp(0.75rem, 1.8vw, 1.5rem);
+  }
+
+  :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-container,
+  :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-wrapper {
+    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
+  }
+
+  :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-section {
+    padding-block: var(--ly-section-padding-block);
+  }
+
+  :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-grid--auto {
+    grid-auto-rows: minmax(7rem, auto);
+  }
+
+  @media (min-width: 48rem) {
+    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-app-shell {
+      grid-template-areas:
+        "sidebar header header"
+        "sidebar main main";
+      grid-template-columns: minmax(min(100%, 11rem), 0.28fr) minmax(0, 0.86fr) minmax(0, 1.14fr);
+      grid-template-rows: auto 1fr;
+    }
+
+    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-app-sidebar {
+      display: block;
+      position: sticky;
+      top: var(--ly-space-3);
+      height: calc(100svh - (var(--ly-space-3) * 2));
+      overflow: auto;
+    }
+
+    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-grid--auto > :nth-child(5n + 1) {
+      grid-column: span 2;
+      grid-row: span 2;
+      min-height: 15rem;
+    }
+
+    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-sidebar-layout {
+      grid-template-columns: minmax(min(100%, 11rem), 0.25fr) minmax(0, 1fr);
+    }
+
+    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-split {
+      grid-template-columns: minmax(0, 0.7fr) minmax(min(100%, 20rem), 1.3fr);
+    }
+
+    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-panes--two {
+      grid-template-columns: minmax(min(100%, 13rem), 0.46fr) minmax(0, 1.54fr);
+    }
+  }
+
+  @media (min-width: 80rem) {
+    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-panes--three {
+      grid-template-columns: minmax(min(100%, 11rem), 0.28fr) minmax(0, 1.44fr) minmax(min(100%, 13rem), 0.28fr);
+    }
+  }
+}

package/styles/layout-style-split-screen.css

@@ -0,0 +1,62 @@
+/*
+  Layout style: split-screen.
+  Equal-weight shell columns for contrasting focal points or side-by-side
+  choices. Visual identity remains owned by ui-style-kit-css.
+*/
+
+@layer ly.styles.split_screen {
+  :where(.ly-root[data-layout="split-screen"], .ly-root[layout-style="split-screen"], .ly-root.ly-layout-split-screen, .ly-root.ly-style-split-screen) {
+    --ly-container-max: 100vw;
+    --ly-page-padding-inline: clamp(0.875rem, 2.5vw, 2rem);
+    --ly-section-padding-block: clamp(1.5rem, 4vw, 3.5rem);
+    --ly-sidebar-width: 50vw;
+    --ly-grid-min: 14rem;
+    --ly-gap: clamp(0.875rem, 2vw, 1.5rem);
+    --ly-grid-gap: var(--ly-gap);
+    --ly-stack-gap: clamp(0.875rem, 1.6vw, 1.25rem);
+  }
+
+  :where(.ly-root[data-layout="split-screen"], .ly-root[layout-style="split-screen"], .ly-root.ly-layout-split-screen, .ly-root.ly-style-split-screen) .ly-app-main {
+    padding-block: 0;
+  }
+
+  :where(.ly-root[data-layout="split-screen"], .ly-root[layout-style="split-screen"], .ly-root.ly-layout-split-screen, .ly-root.ly-style-split-screen) .ly-container,
+  :where(.ly-root[data-layout="split-screen"], .ly-root[layout-style="split-screen"], .ly-root.ly-layout-split-screen, .ly-root.ly-style-split-screen) .ly-wrapper {
+    width: min(100%, var(--ly-container-max));
+  }
+
+  :where(.ly-root[data-layout="split-screen"], .ly-root[layout-style="split-screen"], .ly-root.ly-layout-split-screen, .ly-root.ly-style-split-screen) .ly-section {
+    padding-block: var(--ly-section-padding-block);
+  }
+
+  :where(.ly-root[data-layout="split-screen"], .ly-root[layout-style="split-screen"], .ly-root.ly-layout-split-screen, .ly-root.ly-style-split-screen) .ly-grid--auto {
+    grid-auto-rows: minmax(9rem, auto);
+  }
+
+  @media (min-width: 48rem) {
+    :where(.ly-root[data-layout="split-screen"], .ly-root[layout-style="split-screen"], .ly-root.ly-layout-split-screen, .ly-root.ly-style-split-screen) .ly-app-shell {
+      grid-template-areas:
+        "header header"
+        "main sidebar";
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+
+    :where(.ly-root[data-layout="split-screen"], .ly-root[layout-style="split-screen"], .ly-root.ly-layout-split-screen, .ly-root.ly-style-split-screen) .ly-app-sidebar {
+      display: block;
+      min-height: 100%;
+      overflow: auto;
+    }
+
+    :where(.ly-root[data-layout="split-screen"], .ly-root[layout-style="split-screen"], .ly-root.ly-layout-split-screen, .ly-root.ly-style-split-screen) .ly-sidebar-layout,
+    :where(.ly-root[data-layout="split-screen"], .ly-root[layout-style="split-screen"], .ly-root.ly-layout-split-screen, .ly-root.ly-style-split-screen) .ly-split,
+    :where(.ly-root[data-layout="split-screen"], .ly-root[layout-style="split-screen"], .ly-root.ly-layout-split-screen, .ly-root.ly-style-split-screen) .ly-panes--two {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+  }
+
+  @media (min-width: 80rem) {
+    :where(.ly-root[data-layout="split-screen"], .ly-root[layout-style="split-screen"], .ly-root.ly-layout-split-screen, .ly-root.ly-style-split-screen) .ly-panes--three {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+    }
+  }
+}

package/styles/layout-style-synthwave.css

@@ -0,0 +1,88 @@
+/*
+  Layout style: synthwave.
+  Wide stage, dock-like support areas, and cinematic horizontal flow inspired
+  by retro-futuristic interface composition. Visual identity remains owned by
+  ui-style-kit-css.
+*/
+
+@layer ly.styles.synthwave {
+  :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) {
+    --ly-container-max: 112rem;
+    --ly-page-padding-inline: clamp(1rem, 4vw, 3.5rem);
+    --ly-section-padding-block: clamp(2.5rem, 7vw, 6rem);
+    --ly-sidebar-width: clamp(14rem, 18vw, 20rem);
+    --ly-grid-min: 14rem;
+    --ly-gap: clamp(1rem, 2.8vw, 2.25rem);
+    --ly-grid-gap: var(--ly-gap);
+    --ly-stack-gap: clamp(1rem, 2.2vw, 1.8rem);
+    --ly-carousel-item-min: 18rem;
+    --ly-carousel-item-max: 34rem;
+  }
+
+  :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) .ly-app-main {
+    padding-block: clamp(1rem, 3vw, 3rem);
+  }
+
+  :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) .ly-container,
+  :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) .ly-wrapper {
+    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
+  }
+
+  :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) .ly-section {
+    padding-block: var(--ly-section-padding-block);
+  }
+
+  :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) .ly-grid--auto {
+    grid-auto-rows: minmax(9rem, auto);
+  }
+
+  @media (min-width: 48rem) {
+    :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) .ly-app-shell {
+      grid-template-areas:
+        "header header"
+        "main main"
+        "sidebar sidebar";
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+
+    :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) .ly-app-sidebar {
+      display: block;
+      overflow: auto;
+    }
+
+    :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) .ly-sidebar-layout {
+      grid-template-columns: minmax(0, 1.2fr) minmax(min(100%, 17rem), 0.8fr);
+    }
+
+    :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) .ly-split {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) .ly-panes--two {
+      grid-template-columns: minmax(0, 1.35fr) minmax(min(100%, 17rem), 0.65fr);
+    }
+  }
+
+  @media (min-width: 80rem) {
+    :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) .ly-app-shell {
+      grid-template-areas:
+        "header header"
+        "main sidebar";
+      grid-template-columns: minmax(0, 1.52fr) minmax(min(100%, 17rem), 0.48fr);
+    }
+
+    :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) .ly-app-sidebar {
+      position: sticky;
+      top: var(--ly-space-5);
+      height: calc(100svh - (var(--ly-space-5) * 2));
+    }
+
+    :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) .ly-split {
+      grid-template-columns: minmax(0, 1.42fr) minmax(min(100%, 20rem), 0.58fr);
+    }
+
+    :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) .ly-panes--three {
+      grid-template-columns: minmax(min(100%, 14rem), 0.36fr) minmax(0, 1.28fr) minmax(min(100%, 16rem), 0.36fr);
+    }
+  }
+}

package/styles/layout-style-z-pattern.css

@@ -0,0 +1,76 @@
+/*
+  Layout style: z-pattern.
+  Header-first scan path that moves from broad lead content to a right-side
+  support rail. Visual identity remains owned by ui-style-kit-css.
+*/
+
+@layer ly.styles.z_pattern {
+  :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) {
+    --ly-container-max: 100rem;
+    --ly-page-padding-inline: clamp(1rem, 3.4vw, 3rem);
+    --ly-section-padding-block: clamp(2rem, 5.5vw, 5rem);
+    --ly-sidebar-width: clamp(14rem, 20vw, 21rem);
+    --ly-grid-min: 15rem;
+    --ly-gap: clamp(1rem, 2.4vw, 2rem);
+    --ly-grid-gap: var(--ly-gap);
+    --ly-stack-gap: clamp(0.875rem, 1.9vw, 1.5rem);
+  }
+
+  :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-app-main {
+    padding-block: clamp(1rem, 2.6vw, 2.5rem);
+  }
+
+  :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-container,
+  :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-wrapper {
+    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
+  }
+
+  :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-section {
+    padding-block: var(--ly-section-padding-block);
+  }
+
+  :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-grid--auto {
+    grid-auto-rows: minmax(8rem, auto);
+  }
+
+  @media (min-width: 48rem) {
+    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-app-shell {
+      grid-template-areas:
+        "header header"
+        "main sidebar";
+      grid-template-columns: minmax(0, 1.18fr) minmax(min(100%, 15rem), 0.42fr);
+    }
+
+    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-app-sidebar {
+      display: block;
+      position: sticky;
+      top: var(--ly-space-4);
+      height: calc(100svh - (var(--ly-space-4) * 2));
+      overflow: auto;
+    }
+
+    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-grid--auto > :nth-child(4n + 2) {
+      grid-column: span 2;
+      min-height: 12rem;
+    }
+
+    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-sidebar-layout {
+      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 15rem), 0.36fr);
+    }
+
+    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-split {
+      grid-template-columns: minmax(0, 0.92fr) minmax(min(100%, 19rem), 1.08fr);
+      align-items: end;
+    }
+
+    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-panes--two {
+      grid-template-columns: minmax(0, 1.25fr) minmax(min(100%, 17rem), 0.75fr);
+    }
+  }
+
+  @media (min-width: 80rem) {
+    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-panes--three {
+      grid-template-columns: minmax(0, 1.1fr) minmax(min(100%, 15rem), 0.55fr) minmax(min(100%, 14rem), 0.35fr);
+    }
+  }
+}