layout-style-css 1.0.0 → 1.1.2

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);
+    }
+  }
+}

package/styles/layout-ui-style-kit-bridge.css

@@ -7,6 +7,16 @@
 @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) {
@@ -52,4 +62,109 @@
   :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));
+    }
+  }
 }

package/demo/assets/social-card.svg

@@ -1,17 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-labelledby="title desc">
-  <title id="title">layout-style-css social card</title>
-  <desc id="desc">A shell-first CSS layout card showing independent UI and layout tracks.</desc>
-  <rect width="1200" height="630" fill="#111827"/>
-  <rect x="72" y="72" width="210" height="486" rx="36" fill="#7dd3fc"/>
-  <rect x="330" y="72" width="798" height="180" rx="36" fill="#fbbf24"/>
-  <rect x="330" y="306" width="360" height="252" rx="36" fill="#f472b6"/>
-  <rect x="750" y="306" width="378" height="252" rx="36" fill="#a7f3d0"/>
-  <text x="116" y="154" fill="#111827" font-family="Arial, sans-serif" font-size="38" font-weight="700">Layout</text>
-  <text x="116" y="204" fill="#111827" font-family="Arial, sans-serif" font-size="38" font-weight="700">Style</text>
-  <text x="116" y="254" fill="#111827" font-family="Arial, sans-serif" font-size="38" font-weight="700">Library</text>
-  <text x="378" y="162" fill="#111827" font-family="Arial, sans-serif" font-size="56" font-weight="700">Shells without visual ownership</text>
-  <text x="378" y="414" fill="#111827" font-family="Arial, sans-serif" font-size="34">UI Style Kit controls</text>
-  <text x="378" y="462" fill="#111827" font-family="Arial, sans-serif" font-size="34">color, type, borders</text>
-  <text x="798" y="414" fill="#111827" font-family="Arial, sans-serif" font-size="34">Layout Library controls</text>
-  <text x="798" y="462" fill="#111827" font-family="Arial, sans-serif" font-size="34">size, shape, position</text>
-</svg>