layout-style-css 1.1.2 → 2.1.0

package/package.json

@@ -1,107 +1,98 @@
-{
-  "name": "layout-style-css",
-  "version": "1.1.2",
-  "description": "Shell-first CSS layout primitives that complement ui-style-kit-css@2.0.1.",
-  "type": "module",
-  "license": "MIT",
-  "homepage": "https://github.com/Foscat/layout-style-css#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Foscat/layout-style-css.git"
-  },
-  "bugs": {
-    "url": "https://github.com/Foscat/layout-style-css/issues"
-  },
-  "keywords": [
-    "css",
-    "layout",
-    "design-system",
-    "ui-style-kit-css",
-    "responsive-layout",
-    "shell-layouts"
-  ],
-  "main": "dist/layout-style-css.css",
-  "style": "dist/layout-style-css.min.css",
-  "unpkg": "dist/layout-style-css.min.css",
-  "jsdelivr": "dist/layout-style-css.min.css",
-  "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",
-    "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"
-  },
-  "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",
-    "stylelint": "17.14.0",
-    "ui-style-kit-css": "2.0.1"
-  },
-  "exports": {
-    ".": "./dist/layout-style-css.css",
-    "./css": "./dist/layout-style-css.css",
-    "./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",
-    "./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.png",
-    "demo/browserconfig.xml",
-    "demo/robots.txt",
-    "demo/site.webmanifest",
-    "demo/sitemap.xml",
-    "README.md",
-    "CHANGELOG.md",
-    "CONTRIBUTING.md",
-    "SECURITY.md",
-    "LICENSE"
-  ]
-}
+{
+  "name": "layout-style-css",
+  "version": "2.1.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",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Foscat/layout-style-css.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Foscat/layout-style-css/issues"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "keywords": [
+    "css",
+    "layout",
+    "design-system",
+    "ui-style-kit-css",
+    "responsive-layout",
+    "shell-layouts"
+  ],
+  "main": "dist/layout-style-css.css",
+  "style": "dist/layout-style-css.min.css",
+  "unpkg": "dist/layout-style-css.min.css",
+  "jsdelivr": "dist/layout-style-css.min.css",
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "pages:build": "node scripts/build-pages.mjs",
+    "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 --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 release:verify"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.61.1",
+    "interactive-surface-css": "1.5.0",
+    "stylelint": "17.14.0",
+    "ui-style-kit-css": "2.1.0"
+  },
+  "exports": {
+    ".": "./dist/layout-style-css.css",
+    "./css": "./dist/layout-style-css.css",
+    "./css.css": "./dist/layout-style-css.css",
+    "./min": "./dist/layout-style-css.min.css",
+    "./min.css": "./dist/layout-style-css.min.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",
+    "demo/demo.css",
+    "demo/demo.js",
+    "demo/assets/apple-touch-icon.svg",
+    "demo/assets/favicon.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/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/{dist/layout-ui-style-kit-bridge.css → styles/integrations/ui-style-kit.css}

@@ -1,170 +1,175 @@
-/*
-  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.
-*/
-
-@layer ly.bridge {
-  :where(.ly-root[data-ui][data-theme][data-mode], [data-ui][data-theme][data-mode] .ly-root) {
-    --ly-ui-style-kit-bridge: 1;
-
-    /*
-      Normalize UI kit root background geometry without redefining its paint.
-      Patterned theme layers should fill the viewport once instead of tiling.
-    */
-    min-block-size: 100svh;
-    background-attachment: fixed;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  :where(.ly-root[data-ui="minimal-saas"], [data-ui="minimal-saas"] .ly-root) {
-    --ly-ui-style-kit-bridge-style: minimal-saas;
-  }
-
-  :where(.ly-root[data-ui="bento"], [data-ui="bento"] .ly-root) {
-    --ly-ui-style-kit-bridge-style: bento;
-  }
-
-  :where(.ly-root[data-ui="maximalist"], [data-ui="maximalist"] .ly-root) {
-    --ly-ui-style-kit-bridge-style: maximalist;
-  }
-
-  :where(.ly-root[data-ui="bauhaus"], [data-ui="bauhaus"] .ly-root) {
-    --ly-ui-style-kit-bridge-style: bauhaus;
-  }
-
-  :where(.ly-root[data-ui="tactile"], [data-ui="tactile"] .ly-root) {
-    --ly-ui-style-kit-bridge-style: tactile;
-  }
-
-  :where(.ly-root[data-ui="neumorphism"], [data-ui="neumorphism"] .ly-root) {
-    --ly-ui-style-kit-bridge-style: neumorphism;
-  }
-
-  :where(.ly-root[data-ui="retrofuturism"], [data-ui="retrofuturism"] .ly-root) {
-    --ly-ui-style-kit-bridge-style: retrofuturism;
-  }
-
-  :where(.ly-root[data-ui="brutalism"], [data-ui="brutalism"] .ly-root) {
-    --ly-ui-style-kit-bridge-style: brutalism;
-  }
-
-  :where(.ly-root[data-ui="cyberpunk"], [data-ui="cyberpunk"] .ly-root) {
-    --ly-ui-style-kit-bridge-style: cyberpunk;
-  }
-
-  :where(.ly-root[data-ui="y2k"], [data-ui="y2k"] .ly-root) {
-    --ly-ui-style-kit-bridge-style: y2k;
-  }
-
-  :where(.ly-root[data-ui="retro-glass"], [data-ui="retro-glass"] .ly-root) {
-    --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-section, .bento-section, .max-section, .bau-section, .tactile-section, .neo-section, .retro-section, .brutal-section, .cyber-section, .y2k-section, .rg-section) {
-    padding-block: var(--ly-section-padding-block);
-  }
-
-  :where(.saas-stack, .bento-stack, .max-stack, .bau-stack, .tactile-stack, .neo-stack, .retro-stack, .brutal-stack, .cyber-stack, .y2k-stack, .rg-stack) {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ly-stack-gap);
-  }
-
-  :where(.saas-cluster, .bento-cluster, .max-cluster, .bau-cluster, .tactile-cluster, .neo-cluster, .retro-cluster, .brutal-cluster, .cyber-cluster, .y2k-cluster, .rg-cluster) {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ly-cluster-gap);
-  }
-
-  :where(.saas-grid, .bento-grid, .max-grid, .bau-grid, .tactile-grid, .neo-grid, .retro-grid, .brutal-grid, .cyber-grid, .y2k-grid, .rg-grid) {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-grid-min)), 1fr));
-    gap: var(--ly-grid-gap);
-  }
-
-  :where(.saas-split, .bento-split, .max-split, .bau-split, .tactile-split, .neo-split, .retro-split, .brutal-split, .cyber-split, .y2k-split, .rg-split) {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--ly-gap);
-    align-items: var(--ly-split-align, center);
-  }
-
-  :where(.saas-split, .bento-split, .max-split, .bau-split, .tactile-split, .neo-split, .retro-split, .brutal-split, .cyber-split, .y2k-split, .rg-split) > * {
-    min-width: 0;
-  }
-
-  :where(.saas-button-group, .bento-button-group, .max-button-group, .bau-button-group, .tactile-button-group, .neo-button-group, .retro-button-group, .brutal-button-group, .cyber-button-group, .y2k-button-group, .rg-button-group) {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ly-cluster-gap);
-  }
-
-  :where(.saas-button-group, .bento-button-group, .max-button-group, .bau-button-group, .tactile-button-group, .neo-button-group, .retro-button-group, .brutal-button-group, .cyber-button-group, .y2k-button-group, .rg-button-group) > * {
-    flex: 0 1 auto;
-    min-width: min(100%, var(--ly-button-min, 8rem));
-  }
-
-  :where(.saas-card-grid, .bento-card-grid, .max-card-grid, .bau-card-grid, .tactile-card-grid, .neo-card-grid, .retro-card-grid, .brutal-card-grid, .cyber-card-grid, .y2k-card-grid, .rg-card-grid) {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-card-grid-min)), 1fr));
-    gap: var(--ly-grid-gap);
-  }
-
-  :where(.saas-card-grid, .bento-card-grid, .max-card-grid, .bau-card-grid, .tactile-card-grid, .neo-card-grid, .retro-card-grid, .brutal-card-grid, .cyber-card-grid, .y2k-card-grid, .rg-card-grid) > * {
-    min-width: 0;
-  }
-
-  :where(.saas-card-sm, .bento-card-sm, .max-card-sm, .bau-card-sm, .tactile-card-sm, .neo-card-sm, .retro-card-sm, .brutal-card-sm, .cyber-card-sm, .y2k-card-sm, .rg-card-sm) {
-    min-block-size: var(--ly-card-size-sm);
-  }
-
-  :where(.saas-card-md, .bento-card-md, .max-card-md, .bau-card-md, .tactile-card-md, .neo-card-md, .retro-card-md, .brutal-card-md, .cyber-card-md, .y2k-card-md, .rg-card-md) {
-    min-block-size: var(--ly-card-size-md);
-  }
-
-  :where(.saas-card-lg, .bento-card-lg, .max-card-lg, .bau-card-lg, .tactile-card-lg, .neo-card-lg, .retro-card-lg, .brutal-card-lg, .cyber-card-lg, .y2k-card-lg, .rg-card-lg) {
-    min-block-size: var(--ly-card-size-lg);
-  }
-
-  :where(.saas-gallery, .bento-gallery, .max-gallery, .bau-gallery, .tactile-gallery, .neo-gallery, .retro-gallery, .brutal-gallery, .cyber-gallery, .y2k-gallery, .rg-gallery) {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-gallery-min)), 1fr));
-    gap: var(--ly-grid-gap);
-  }
-
-  :where(.saas-gallery, .bento-gallery, .max-gallery, .bau-gallery, .tactile-gallery, .neo-gallery, .retro-gallery, .brutal-gallery, .cyber-gallery, .y2k-gallery, .rg-gallery) > * {
-    min-width: 0;
-  }
-
-  :where(.saas-carousel, .bento-carousel, .max-carousel, .bau-carousel, .tactile-carousel, .neo-carousel, .retro-carousel, .brutal-carousel, .cyber-carousel, .y2k-carousel, .rg-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;
-  }
-
-  :where(.saas-carousel, .bento-carousel, .max-carousel, .bau-carousel, .tactile-carousel, .neo-carousel, .retro-carousel, .brutal-carousel, .cyber-carousel, .y2k-carousel, .rg-carousel) > * {
-    min-width: 0;
-    scroll-snap-align: start;
-  }
-
-  @media (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));
-    }
-  }
-}
+@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-css owns structure.
+*/
+
+@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;
+
+    /*
+      Normalize UI kit root background geometry without redefining its paint.
+      Patterned theme layers should fill the viewport once instead of tiling.
+    */
+    min-block-size: 100svh;
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  :where(.ly-root[data-ui="minimal-saas"], [data-ui="minimal-saas"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: minimal-saas;
+  }
+
+  :where(.ly-root[data-ui="bento"], [data-ui="bento"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: bento;
+  }
+
+  :where(.ly-root[data-ui="maximalist"], [data-ui="maximalist"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: maximalist;
+  }
+
+  :where(.ly-root[data-ui="bauhaus"], [data-ui="bauhaus"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: bauhaus;
+  }
+
+  :where(.ly-root[data-ui="tactile"], [data-ui="tactile"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: tactile;
+  }
+
+  :where(.ly-root[data-ui="neumorphism"], [data-ui="neumorphism"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: neumorphism;
+  }
+
+  :where(.ly-root[data-ui="retrofuturism"], [data-ui="retrofuturism"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: retrofuturism;
+  }
+
+  :where(.ly-root[data-ui="brutalism"], [data-ui="brutalism"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: brutalism;
+  }
+
+  :where(.ly-root[data-ui="cyberpunk"], [data-ui="cyberpunk"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: cyberpunk;
+  }
+
+  :where(.ly-root[data-ui="y2k"], [data-ui="y2k"] .ly-root) {
+    --ly-ui-style-kit-bridge-style: y2k;
+  }
+
+  :where(.ly-root[data-ui="retro-glass"], [data-ui="retro-glass"] .ly-root) {
+    --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. */
+    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) {
+    padding-block: var(--ly-section-padding-block);
+  }
+
+  :where(.saas-stack, .bento-stack, .max-stack, .bau-stack, .tactile-stack, .neo-stack, .retro-stack, .brutal-stack, .cyber-stack, .y2k-stack, .rg-stack) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ly-stack-gap);
+  }
+
+  :where(.saas-cluster, .bento-cluster, .max-cluster, .bau-cluster, .tactile-cluster, .neo-cluster, .retro-cluster, .brutal-cluster, .cyber-cluster, .y2k-cluster, .rg-cluster) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ly-cluster-gap);
+  }
+
+  :where(.saas-grid, .bento-grid, .max-grid, .bau-grid, .tactile-grid, .neo-grid, .retro-grid, .brutal-grid, .cyber-grid, .y2k-grid, .rg-grid) {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-grid-min)), 1fr));
+    gap: var(--ly-grid-gap);
+  }
+
+  :where(.saas-split, .bento-split, .max-split, .bau-split, .tactile-split, .neo-split, .retro-split, .brutal-split, .cyber-split, .y2k-split, .rg-split) {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--ly-gap);
+    align-items: var(--ly-split-align, center);
+  }
+
+  :where(.saas-split, .bento-split, .max-split, .bau-split, .tactile-split, .neo-split, .retro-split, .brutal-split, .cyber-split, .y2k-split, .rg-split) > * {
+    min-width: 0;
+  }
+
+  :where(.saas-button-group, .bento-button-group, .max-button-group, .bau-button-group, .tactile-button-group, .neo-button-group, .retro-button-group, .brutal-button-group, .cyber-button-group, .y2k-button-group, .rg-button-group) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ly-cluster-gap);
+  }
+
+  :where(.saas-button-group, .bento-button-group, .max-button-group, .bau-button-group, .tactile-button-group, .neo-button-group, .retro-button-group, .brutal-button-group, .cyber-button-group, .y2k-button-group, .rg-button-group) > * {
+    flex: 0 1 auto;
+    min-width: min(100%, var(--ly-button-min, 8rem));
+  }
+
+  :where(.saas-card-grid, .bento-card-grid, .max-card-grid, .bau-card-grid, .tactile-card-grid, .neo-card-grid, .retro-card-grid, .brutal-card-grid, .cyber-card-grid, .y2k-card-grid, .rg-card-grid) {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-card-grid-min)), 1fr));
+    gap: var(--ly-grid-gap);
+  }
+
+  :where(.saas-card-grid, .bento-card-grid, .max-card-grid, .bau-card-grid, .tactile-card-grid, .neo-card-grid, .retro-card-grid, .brutal-card-grid, .cyber-card-grid, .y2k-card-grid, .rg-card-grid) > * {
+    min-width: 0;
+  }
+
+  :where(.saas-card-sm, .bento-card-sm, .max-card-sm, .bau-card-sm, .tactile-card-sm, .neo-card-sm, .retro-card-sm, .brutal-card-sm, .cyber-card-sm, .y2k-card-sm, .rg-card-sm) {
+    min-block-size: var(--ly-card-size-sm);
+  }
+
+  :where(.saas-card-md, .bento-card-md, .max-card-md, .bau-card-md, .tactile-card-md, .neo-card-md, .retro-card-md, .brutal-card-md, .cyber-card-md, .y2k-card-md, .rg-card-md) {
+    min-block-size: var(--ly-card-size-md);
+  }
+
+  :where(.saas-card-lg, .bento-card-lg, .max-card-lg, .bau-card-lg, .tactile-card-lg, .neo-card-lg, .retro-card-lg, .brutal-card-lg, .cyber-card-lg, .y2k-card-lg, .rg-card-lg) {
+    min-block-size: var(--ly-card-size-lg);
+  }
+
+  :where(.saas-gallery, .bento-gallery, .max-gallery, .bau-gallery, .tactile-gallery, .neo-gallery, .retro-gallery, .brutal-gallery, .cyber-gallery, .y2k-gallery, .rg-gallery) {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-gallery-min)), 1fr));
+    gap: var(--ly-grid-gap);
+  }
+
+  :where(.saas-gallery, .bento-gallery, .max-gallery, .bau-gallery, .tactile-gallery, .neo-gallery, .retro-gallery, .brutal-gallery, .cyber-gallery, .y2k-gallery, .rg-gallery) > * {
+    min-width: 0;
+  }
+
+  :where(.saas-carousel, .bento-carousel, .max-carousel, .bau-carousel, .tactile-carousel, .neo-carousel, .retro-carousel, .brutal-carousel, .cyber-carousel, .y2k-carousel, .rg-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;
+  }
+
+  :where(.saas-carousel, .bento-carousel, .max-carousel, .bau-carousel, .tactile-carousel, .neo-carousel, .retro-carousel, .brutal-carousel, .cyber-carousel, .y2k-carousel, .rg-carousel) > * {
+    min-width: 0;
+    scroll-snap-align: start;
+  }
+
+  @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));
+    }
+  }
+}