layout-style-css 1.1.2 → 2.0.0

package/demo/site.webmanifest

@@ -1,7 +1,7 @@
 {
   "name": "layout-style-css",
   "short_name": "Layout CSS",
-  "description": "Shell-first CSS layout library demo for ui-style-kit-css integrations.",
+  "description": "Container-first layout-style-css 2.0 lab for wrappers, recipes, personalities, and optional ecosystem integrations.",
   "start_url": "./index.html",
   "display": "standalone",
   "background_color": "#111827",

package/demo/sitemap.xml

@@ -2,7 +2,7 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://foscat.github.io/layout-style-css/</loc>
-    <lastmod>2026-06-30</lastmod>
+    <lastmod>2026-07-20</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
   </url>

package/dist/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 → 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));
     }