layout-style-css 1.1.2 → 2.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "layout-style-css",
-  "version": "1.1.2",
-  "description": "Shell-first CSS layout primitives that complement ui-style-kit-css@2.0.1.",
+  "version": "2.0.0",
+  "description": "Dependency-free structural CSS for responsive wrappers, composition primitives, recipes, utilities, and layout personalities.",
   "type": "module",
   "license": "MIT",
   "homepage": "https://github.com/Foscat/layout-style-css#readme",
@@ -12,6 +12,9 @@
   "bugs": {
     "url": "https://github.com/Foscat/layout-style-css/issues"
   },
+  "engines": {
+    "node": ">=20"
+  },
   "keywords": [
     "css",
     "layout",
@@ -27,30 +30,31 @@
   "scripts": {
     "build": "node scripts/build.mjs",
     "pages:build": "node scripts/build-pages.mjs",
-    "lint": "stylelint \"styles/**/*.css\"",
-    "test": "node test/layout-css-contract.test.mjs && node test/demo-smoke.test.mjs && node test/pages-artifact.test.mjs",
-    "check": "npm run build && npm run lint && npm test && npm run pack:dry-run",
+    "lint": "stylelint \"styles/**/*.css\" \"demo/**/*.css\"",
+    "check:demo-js": "node --check demo/demo.js",
+    "test:static": "node test/layout-css-contract.test.mjs && node test/release-docs-contract.test.mjs",
+    "test:demo:quick": "node test/demo-smoke.test.mjs --quick --browser=chromium",
+    "test:demo:chromium": "node test/demo-smoke.test.mjs --browser=chromium",
+    "test:demo:firefox": "node test/demo-smoke.test.mjs --browser=firefox",
+    "test:demo:webkit": "node test/demo-smoke.test.mjs --browser=webkit",
+    "test:demo:all": "npm run test:demo:chromium && npm run test:demo:firefox && npm run test:demo:webkit",
+    "test:pages": "node test/pages-artifact.test.mjs",
+    "test": "npm run test:static && npm run test:demo:quick && npm run test:pages",
+    "test:full": "npm run test:static && npm run test:demo:all && npm run test:pages",
+    "check": "npm run build && npm run lint && npm run check:demo-js && npm test && npm run pack:dry-run",
+    "check:full": "npm run build && npm run lint && npm run check:demo-js && npm run test:full && npm run pack:dry-run",
     "pack:dry-run": "npm pack --dry-run --ignore-scripts",
-    "publish:dry-run": "npm publish --dry-run --access public",
-    "release:verify": "npm run check && npm run publish:dry-run",
-    "prepack": "npm run check",
-    "prepublishOnly": "npm run check"
+    "publish:dry-run": "npm publish --dry-run --access public --ignore-scripts",
+    "release:verify": "npm run check:full && npm audit --audit-level=moderate && npm run publish:dry-run",
+    "prepack": "npm run build && npm run test:static",
+    "prepublishOnly": "npm run check:full"
   },
   "publishConfig": {
     "access": "public"
   },
-  "peerDependencies": {
-    "interactive-surface-css": "1.2.5",
-    "ui-style-kit-css": "2.0.1"
-  },
-  "peerDependenciesMeta": {
-    "interactive-surface-css": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@playwright/test": "1.61.1",
-    "interactive-surface-css": "1.2.5",
+    "interactive-surface-css": "1.4.0",
     "stylelint": "17.14.0",
     "ui-style-kit-css": "2.0.1"
   },
@@ -60,37 +64,24 @@
     "./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",
-    "./bridge.css": "./dist/layout-ui-style-kit-bridge.css",
-    "./all.css": "./dist/layout-all.css",
-    "./all-with-ui-kit.css": "./dist/layout-all-with-ui-kit.css",
-    "./all-with-ui-kit-and-interactive-surface.css": "./dist/layout-all-with-ui-kit-and-interactive-surface.css",
-    "./minimal-saas.css": "./dist/layout-style-minimal-saas.css",
-    "./bento.css": "./dist/layout-style-bento.css",
-    "./maximalist.css": "./dist/layout-style-maximalist.css",
-    "./bauhaus.css": "./dist/layout-style-bauhaus.css",
-    "./tactile.css": "./dist/layout-style-tactile.css",
-    "./neumorphism.css": "./dist/layout-style-neumorphism.css",
-    "./retrofuturism.css": "./dist/layout-style-retrofuturism.css",
-    "./brutalism.css": "./dist/layout-style-brutalism.css",
-    "./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",
+    "./core.css": "./dist/core.css",
+    "./wrappers.css": "./dist/wrappers.css",
+    "./primitives.css": "./dist/primitives.css",
+    "./recipes.css": "./dist/recipes.css",
+    "./utilities.css": "./dist/utilities.css",
+    "./personalities.css": "./dist/personalities.css",
+    "./personalities/*.css": "./dist/personalities/*.css",
+    "./integrations/ui-style-kit.css": "./dist/integrations/ui-style-kit.css",
+    "./legacy.css": "./dist/legacy.css",
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
     "styles",
-    "docs/wiki",
-    "demo/index.html",
+    "docs/wiki",
+    "demo/index.html",
+    "demo/demo.css",
+    "demo/demo.js",
     "demo/assets/apple-touch-icon.svg",
     "demo/assets/favicon.svg",
     "demo/assets/social-card.png",

package/styles/core.css

@@ -0,0 +1,6 @@
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+
+@import url("./wrappers.css");
+@import url("./primitives.css");
+@import url("./recipes.css");
+@import url("./utilities.css");

package/styles/{layout-ui-style-kit-bridge.css → integrations/ui-style-kit.css}

@@ -1,10 +1,12 @@
-/*
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+
+/*
   Compatibility bridge for ui-style-kit-css.
   This bridge intentionally does not map color, type, border, or shadow tokens.
-  ui-style-kit-css owns those visuals; layout-style-library owns structure.
+  ui-style-kit-css owns those visuals; layout-style-css owns structure.
 */
 
-@layer ly.bridge {
+@layer ly.integrations.ui_style_kit {
   :where(.ly-root[data-ui][data-theme][data-mode], [data-ui][data-theme][data-mode] .ly-root) {
     --ly-ui-style-kit-bridge: 1;
 
@@ -63,10 +65,13 @@
     --ly-ui-style-kit-bridge-style: retro-glass;
   }
 
-  :where(.saas-container, .bento-container, .max-container, .bau-container, .tactile-container, .neo-container, .retro-container, .brutal-container, .cyber-container, .y2k-container, .rg-container) {
-    /* UI Style Kit naming can opt into layout sizing without taking over visual paint. */
-    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
-    margin-inline: auto;
+  :where(.saas-container, .bento-container, .max-container, .bau-container, .tactile-container, .neo-container, .retro-container, .brutal-container, .cyber-container, .y2k-container, .rg-container) {
+    /* UI Style Kit naming can opt into layout sizing without taking over visual paint. */
+    container-name: ly-wrapper;
+    container-type: inline-size;
+    inline-size: min(100%, calc(var(--ly-wrapper-max) + (var(--ly-wrapper-gutter) * 2)));
+    margin-inline: auto;
+    padding-inline: var(--ly-wrapper-gutter);
   }
 
   :where(.saas-section, .bento-section, .max-section, .bau-section, .tactile-section, .neo-section, .retro-section, .brutal-section, .cyber-section, .y2k-section, .rg-section) {
@@ -162,7 +167,7 @@
     scroll-snap-align: start;
   }
 
-  @media (min-width: 48rem) {
+  @container (min-width: 48rem) {
     :where(.saas-split, .bento-split, .max-split, .bau-split, .tactile-split, .neo-split, .retro-split, .brutal-split, .cyber-split, .y2k-split, .rg-split) {
       grid-template-columns: minmax(0, var(--ly-split-primary, 1fr)) minmax(0, var(--ly-split-secondary, 1fr));
     }

package/styles/legacy.css

@@ -0,0 +1,173 @@
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+
+@import url("./layout-style-css.css");
+
+@layer ly.legacy {
+  /* Preserve v1 wrapper measures while applications migrate to semantic v2 names. */
+  .ly-container {
+    container-name: ly-wrapper;
+    container-type: inline-size;
+    width: min(100% - (var(--ly-page-padding-inline) * 2), var(--ly-container-max));
+    margin-inline: auto;
+  }
+
+  .ly-container--sm,
+  .ly-wrapper--sm {
+    --ly-container-max: var(--ly-container-sm);
+    --ly-wrapper-max: 40rem;
+  }
+
+  .ly-container--md,
+  .ly-wrapper--md {
+    --ly-container-max: var(--ly-container-md);
+    --ly-wrapper-max: 56rem;
+  }
+
+  .ly-container--lg,
+  .ly-wrapper--lg {
+    --ly-container-max: var(--ly-container-lg);
+    --ly-wrapper-max: 72rem;
+  }
+
+  .ly-container--xl,
+  .ly-wrapper--xl {
+    --ly-container-max: var(--ly-container-xl);
+    --ly-wrapper-max: 88rem;
+  }
+
+  .ly-container--wide {
+    --ly-container-max: var(--ly-container-wide);
+  }
+
+  .ly-container--fluid {
+    width: 100%;
+    max-width: none;
+    padding-inline: var(--ly-wrapper-gutter);
+  }
+
+  .ly-wrapper--fluid {
+    --ly-wrapper-max: 100%;
+  }
+
+  .ly-wrapper--readable {
+    --ly-wrapper-max: 68ch;
+  }
+
+  .ly-row {
+    display: flex;
+    flex-wrap: wrap;
+    /* Outer compensation preserves exact percentage tracks while columns own gutters. */
+    margin-inline: calc(var(--ly-gutter, var(--ly-gap)) * -0.5);
+  }
+
+  .ly-col {
+    flex: 1 1 0;
+    min-inline-size: 0;
+    padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5);
+  }
+
+  .ly-col-1 { flex: 0 0 auto; width: 8.333333%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
+  .ly-col-2 { flex: 0 0 auto; width: 16.666667%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
+  .ly-col-3 { flex: 0 0 auto; width: 25%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
+  .ly-col-4 { flex: 0 0 auto; width: 33.333333%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
+  .ly-col-5 { flex: 0 0 auto; width: 41.666667%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
+  .ly-col-6 { flex: 0 0 auto; width: 50%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
+  .ly-col-7 { flex: 0 0 auto; width: 58.333333%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
+  .ly-col-8 { flex: 0 0 auto; width: 66.666667%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
+  .ly-col-9 { flex: 0 0 auto; width: 75%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
+  .ly-col-10 { flex: 0 0 auto; width: 83.333333%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
+  .ly-col-11 { flex: 0 0 auto; width: 91.666667%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
+  .ly-col-12 { flex: 0 0 auto; width: 100%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
+
+  .ly-carousel {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(min(100%, var(--ly-reel-item-min)), var(--ly-reel-item-max));
+    gap: var(--ly-grid-gap);
+    overflow-x: auto;
+    overflow-inline: auto;
+    overscroll-behavior-inline: contain;
+    scroll-snap-type: inline proximity;
+  }
+
+  .ly-carousel > * {
+    min-inline-size: 0;
+    scroll-snap-align: start;
+  }
+
+  .ly-button-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ly-cluster-gap);
+  }
+
+  .ly-button-group > * {
+    flex: 0 1 auto;
+    min-inline-size: min(100%, var(--ly-button-min, 8rem));
+  }
+
+  .ly-sidebar-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--ly-gap);
+  }
+
+  .ly-sidebar-layout > * {
+    min-inline-size: 0;
+  }
+
+  .ly-content {
+    min-inline-size: 0;
+  }
+
+  .ly-divider {
+    /* V2 preserves separator geometry here; themes remain responsible for visible paint. */
+    min-block-size: 1px;
+    margin-block: var(--ly-space-5);
+  }
+
+  .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-scroll-area {
+    min-block-size: 0;
+    max-block-size: var(--ly-scroll-max);
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  .ly-app-header { grid-area: header; min-inline-size: 0; }
+  .ly-app-sidebar { grid-area: sidebar; min-inline-size: 0; }
+  .ly-app-main { grid-area: main; min-inline-size: 0; }
+  .ly-app-aside { grid-area: aside; min-inline-size: 0; }
+  .ly-app-footer { grid-area: footer; min-inline-size: 0; }
+
+  /* The build expands canonical personality rules into functional v1 aliases here. */
+  /* @generated-personality-aliases */
+
+  @container (min-width: 48rem) {
+    .ly-sidebar-layout {
+      grid-template-columns: minmax(min(100%, var(--ly-sidebar-min)), var(--ly-sidebar-max)) minmax(0, 1fr);
+      align-items: start;
+    }
+
+    .ly-sidebar-layout--right {
+      grid-template-columns: minmax(0, 1fr) minmax(min(100%, var(--ly-sidebar-min)), var(--ly-sidebar-max));
+    }
+
+    .ly-panes--two {
+      grid-template-columns: minmax(0, 1fr) minmax(min(100%, var(--ly-pane-size)), 0.7fr);
+    }
+  }
+
+  @container (min-width: 64rem) {
+    .ly-panes--three {
+      grid-template-columns:
+        minmax(min(100%, var(--ly-pane-rail, 14rem)), 0.35fr)
+        minmax(0, 1fr)
+        minmax(min(100%, var(--ly-pane-rail, 14rem)), 0.35fr);
+    }
+  }
+}

package/styles/personalities/bauhaus.css

@@ -0,0 +1,46 @@
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+
+/* Layout style: bauhaus. A left rail anchors an intentionally asymmetric grid. */
+
+@layer ly.personalities.bauhaus {
+  :where(.ly-root[data-ly-layout="bauhaus"]) {
+    --ly-recipe-rail: 14rem;
+    --ly-recipe-aside: 18rem;
+    --ly-grid-columns: 6;
+    --ly-grid-min: 13rem;
+    --ly-personality-wrapper-max: 96rem;
+
+    container-name: ly-personality;
+    container-type: inline-size;
+    min-inline-size: 0;
+  }
+
+  /* Cap the fallback rail until the wider personality template is eligible. */
+  @container ly-personality (min-width: 48rem) {
+    :where(.ly-root[data-ly-layout="bauhaus"])
+      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-columns: minmax(min(100%, 14rem), 0.3fr) minmax(0, 1fr);
+    }
+  }
+
+  @container ly-personality (min-width: 52rem) {
+    :where(.ly-root[data-ly-layout="bauhaus"])
+      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-areas:
+        "sidebar header header aside"
+        "sidebar main main aside"
+        "sidebar footer footer footer";
+      grid-template-rows: auto minmax(0, 1fr) auto;
+      grid-template-columns:
+        minmax(min(100%, 14rem), 0.24fr)
+        minmax(0, 0.7fr)
+        minmax(0, 1.3fr)
+        minmax(min(100%, 18rem), 0.3fr);
+    }
+
+    :where(.ly-root[data-ly-layout="bauhaus"]) .ly-grid > :nth-child(3n + 1) {
+      grid-column: span 2;
+      grid-row: span 2;
+    }
+  }
+}

package/styles/personalities/bento.css

@@ -0,0 +1,43 @@
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+
+/* Layout style: bento. A full-width shell and staggered spans form modular tiles. */
+
+@layer ly.personalities.bento {
+  :where(.ly-root[data-ly-layout="bento"]) {
+    --ly-grid-columns: 6;
+    --ly-grid-min: 12rem;
+    --ly-card-grid-min: 13rem;
+    --ly-personality-wrapper-max: 112rem;
+
+    container-name: ly-personality;
+    container-type: inline-size;
+    min-inline-size: 0;
+  }
+
+  @container ly-personality (min-width: 48rem) {
+    :where(.ly-root[data-ly-layout="bento"])
+      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-areas:
+        "header header header"
+        "sidebar main main"
+        "aside main main"
+        "footer footer footer";
+      grid-template-rows: auto minmax(0, 1fr) auto auto;
+      grid-template-columns:
+        minmax(min(100%, 14rem), 0.3fr)
+        minmax(0, 1fr)
+        minmax(0, 1fr);
+    }
+
+    :where(.ly-root[data-ly-layout="bento"]) .ly-grid > :nth-child(6n + 1) {
+      grid-column: span 2;
+      grid-row: span 2;
+    }
+
+    :where(.ly-root[data-ly-layout="bento"])
+      :where(.ly-card-grid, [data-ly-recipe="card-grid"])
+      > :nth-child(6n + 1) {
+      grid-column: span 2;
+    }
+  }
+}

package/styles/personalities/brutalism.css

@@ -0,0 +1,36 @@
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+
+/* Layout style: brutalism. A blunt right rail counters a broad primary plane. */
+
+@layer ly.personalities.brutalism {
+  :where(.ly-root[data-ly-layout="brutalism"]) {
+    --ly-recipe-rail: 18rem;
+    --ly-recipe-aside: 16rem;
+    --ly-grid-columns: 6;
+    --ly-grid-min: 14rem;
+    --ly-personality-wrapper-max: 100rem;
+
+    container-name: ly-personality;
+    container-type: inline-size;
+    min-inline-size: 0;
+  }
+
+  @container ly-personality (min-width: 48rem) {
+    :where(.ly-root[data-ly-layout="brutalism"])
+      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-areas:
+        "header header sidebar"
+        "main aside sidebar"
+        "footer footer sidebar";
+      grid-template-rows: auto minmax(0, 1fr) auto;
+      grid-template-columns:
+        minmax(0, 1.3fr)
+        minmax(min(100%, 16rem), 0.7fr)
+        minmax(min(100%, 18rem), 0.34fr);
+    }
+
+    :where(.ly-root[data-ly-layout="brutalism"]) .ly-grid > :nth-child(3n) {
+      grid-column: span 2;
+    }
+  }
+}

package/styles/personalities/cyberpunk.css

@@ -0,0 +1,36 @@
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+
+/* Layout style: cyberpunk. A narrow command rail fronts a dense three-lane shell. */
+
+@layer ly.personalities.cyberpunk {
+  :where(.ly-root[data-ly-layout="cyberpunk"]) {
+    --ly-recipe-rail: 13rem;
+    --ly-recipe-aside: 19rem;
+    --ly-grid-columns: 8;
+    --ly-grid-min: 12rem;
+    --ly-personality-wrapper-max: 112rem;
+
+    container-name: ly-personality;
+    container-type: inline-size;
+    min-inline-size: 0;
+  }
+
+  @container ly-personality (min-width: 44rem) {
+    :where(.ly-root[data-ly-layout="cyberpunk"])
+      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-areas:
+        "sidebar header aside"
+        "sidebar main aside"
+        "sidebar footer aside";
+      grid-template-rows: auto minmax(0, 1fr) auto;
+      grid-template-columns:
+        minmax(min(100%, 13rem), 0.2fr)
+        minmax(0, 1fr)
+        minmax(min(100%, 19rem), 0.32fr);
+    }
+
+    :where(.ly-root[data-ly-layout="cyberpunk"]) .ly-grid > :nth-child(4n + 2) {
+      grid-column: span 3;
+    }
+  }
+}

package/styles/personalities/f-pattern.css

@@ -0,0 +1,48 @@
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+
+/* Layout style: f-pattern. A left rail supports a wide first-reading column. */
+
+@layer ly.personalities.f_pattern {
+  :where(.ly-root[data-ly-layout="f-pattern"]) {
+    --ly-recipe-rail: 16rem;
+    --ly-recipe-aside: 18rem;
+    --ly-grid-columns: 6;
+    --ly-grid-min: 14rem;
+    --ly-personality-wrapper-max: 92rem;
+
+    container-name: ly-personality;
+    container-type: inline-size;
+    min-inline-size: 0;
+  }
+
+  @container ly-personality (min-width: 48rem) {
+    :where(.ly-root[data-ly-layout="f-pattern"])
+      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr);
+    }
+  }
+
+  @container ly-personality (min-width: 56rem) {
+    :where(.ly-root[data-ly-layout="f-pattern"])
+      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-areas:
+        "sidebar header header"
+        "sidebar main aside"
+        "sidebar footer aside";
+      grid-template-rows: auto minmax(0, 1fr) auto;
+      grid-template-columns:
+        minmax(min(100%, 16rem), 0.26fr)
+        minmax(0, 1.35fr)
+        minmax(min(100%, 18rem), 0.65fr);
+    }
+
+    :where(.ly-root[data-ly-layout="f-pattern"]) .ly-grid > :nth-child(3n + 1) {
+      grid-column: span 2;
+    }
+
+    :where(.ly-root[data-ly-layout="f-pattern"])
+      :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
+      grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
+    }
+  }
+}

package/styles/personalities/maximalist.css

@@ -0,0 +1,51 @@
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+
+/* Layout style: maximalist. A full-bleed four-track mosaic favors dramatic spans. */
+
+@layer ly.personalities.maximalist {
+  :where(.ly-root[data-ly-layout="maximalist"]) {
+    --ly-grid-columns: 12;
+    --ly-grid-min: 10rem;
+    --ly-personality-wrapper-max: 100%;
+    --ly-card-grid-min: 12rem;
+
+    container-name: ly-personality;
+    container-type: inline-size;
+    min-inline-size: 0;
+  }
+
+  @container ly-personality (min-width: 48rem) {
+    :where(.ly-root[data-ly-layout="maximalist"])
+      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr);
+    }
+  }
+
+  @container ly-personality (min-width: 56rem) {
+    :where(.ly-root[data-ly-layout="maximalist"])
+      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-areas:
+        "header header header header"
+        "main main sidebar aside"
+        "main main footer footer";
+      grid-template-rows: auto minmax(0, 1fr) auto;
+      grid-template-columns:
+        minmax(0, 1.4fr)
+        minmax(0, 0.6fr)
+        minmax(min(100%, 15rem), 0.32fr)
+        minmax(min(100%, 18rem), 0.38fr);
+    }
+
+    :where(.ly-root[data-ly-layout="maximalist"]) .ly-grid > :nth-child(7n + 1) {
+      grid-column: span 3;
+      grid-row: span 2;
+    }
+
+    :where(.ly-root[data-ly-layout="maximalist"])
+      :where(.ly-gallery, [data-ly-recipe="gallery"])
+      > :nth-child(5n + 1) {
+      grid-column: span 2;
+      grid-row: span 2;
+    }
+  }
+}

package/styles/personalities/minimal-saas.css

@@ -0,0 +1,37 @@
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+
+/* Layout style: minimal-saas. A measured left rail keeps work areas predictable. */
+
+@layer ly.personalities.minimal_saas {
+  :where(.ly-root[data-ly-layout="minimal-saas"]) {
+    --ly-recipe-rail: 15rem;
+    --ly-recipe-aside: 16rem;
+    --ly-grid-columns: 4;
+    --ly-grid-min: 16rem;
+    --ly-personality-wrapper-max: 88rem;
+
+    container-name: ly-personality;
+    container-type: inline-size;
+    min-inline-size: 0;
+  }
+
+  /* Named areas rearrange the shell without changing its mobile DOM or focus order. */
+  @container ly-personality (min-width: 48rem) {
+    :where(.ly-root[data-ly-layout="minimal-saas"])
+      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-areas:
+        "sidebar header header"
+        "sidebar main aside"
+        "sidebar footer footer";
+      grid-template-rows: auto minmax(0, 1fr) auto;
+      grid-template-columns:
+        minmax(min(100%, 15rem), 0.24fr)
+        minmax(0, 1fr)
+        minmax(min(100%, 16rem), 0.28fr);
+    }
+
+    :where(.ly-root[data-ly-layout="minimal-saas"]) .ly-grid > :nth-child(4n + 1) {
+      grid-column: span 2;
+    }
+  }
+}