layout-style-css 1.1.2 → 2.1.0

package/styles/personalities/synthwave.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: synthwave. A cinematic center stage sits between support zones. */
+
+@layer ly.personalities.synthwave {
+  :where(.ly-root[data-ly-layout="synthwave"]) {
+    --ly-recipe-rail: 16rem;
+    --ly-recipe-aside: 20rem;
+    --ly-grid-columns: 12;
+    --ly-grid-min: 14rem;
+    --ly-reel-item-max: 34rem;
+    --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="synthwave"])
+      :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: 64rem) {
+    :where(.ly-root[data-ly-layout="synthwave"])
+      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-areas:
+        "header header header"
+        "sidebar main aside"
+        "footer footer footer";
+      grid-template-rows: auto minmax(0, 1fr) auto;
+      grid-template-columns:
+        minmax(min(100%, 16rem), 0.28fr)
+        minmax(0, 1fr)
+        minmax(min(100%, 20rem), 0.34fr);
+    }
+
+    :where(.ly-root[data-ly-layout="synthwave"]) .ly-grid > :nth-child(4n + 1) {
+      grid-column: span 3;
+    }
+
+    :where(.ly-root[data-ly-layout="synthwave"]) .ly-reel {
+      grid-auto-columns: minmax(min(100%, 20rem), var(--ly-reel-item-max));
+    }
+  }
+}

package/styles/personalities/tactile.css

@@ -0,0 +1,39 @@
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+
+/* Layout style: tactile. A compact left rail leaves a broad, steady work lane. */
+
+@layer ly.personalities.tactile {
+  :where(.ly-root[data-ly-layout="tactile"]) {
+    --ly-recipe-rail: 17rem;
+    --ly-recipe-aside: 20rem;
+    --ly-grid-columns: 5;
+    --ly-grid-min: 15rem;
+    --ly-personality-wrapper-max: 82rem;
+
+    container-name: ly-personality;
+    container-type: inline-size;
+    min-inline-size: 0;
+  }
+
+  @container ly-personality (min-width: 48rem) {
+    :where(.ly-root[data-ly-layout="tactile"])
+      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-areas:
+        "sidebar header"
+        "sidebar main"
+        "sidebar aside"
+        "sidebar footer";
+      grid-template-rows: auto minmax(0, 1fr) auto auto;
+      grid-template-columns: minmax(min(100%, 17rem), 0.28fr) minmax(0, 1fr);
+    }
+
+    :where(.ly-root[data-ly-layout="tactile"]) .ly-grid > :nth-child(5n + 2) {
+      grid-column: span 2;
+    }
+
+    :where(.ly-root[data-ly-layout="tactile"])
+      :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
+      grid-template-columns: minmax(min(100%, 20rem), 0.42fr) minmax(0, 0.58fr);
+    }
+  }
+}

package/styles/personalities/y2k.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: y2k. A tall right rail frames a reversed supporting workspace. */
+
+@layer ly.personalities.y2k {
+  :where(.ly-root[data-ly-layout="y2k"]) {
+    --ly-recipe-rail: 16rem;
+    --ly-recipe-aside: 18rem;
+    --ly-grid-columns: 5;
+    --ly-grid-min: 13rem;
+    --ly-personality-wrapper-max: 90rem;
+
+    container-name: ly-personality;
+    container-type: inline-size;
+    min-inline-size: 0;
+  }
+
+  @container ly-personality (min-width: 48rem) {
+    :where(.ly-root[data-ly-layout="y2k"])
+      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-areas:
+        "header header sidebar"
+        "aside main sidebar"
+        "footer footer sidebar";
+      grid-template-rows: auto minmax(0, 1fr) auto;
+      grid-template-columns:
+        minmax(min(100%, 18rem), 0.34fr)
+        minmax(0, 1fr)
+        minmax(min(100%, 16rem), 0.28fr);
+    }
+
+    :where(.ly-root[data-ly-layout="y2k"]) .ly-grid > :nth-child(5n + 1) {
+      grid-column: span 3;
+    }
+  }
+}

package/styles/personalities/z-pattern.css

@@ -0,0 +1,49 @@
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+
+/* Layout style: z-pattern. A right rail closes a diagonal reading progression. */
+
+@layer ly.personalities.z_pattern {
+  :where(.ly-root[data-ly-layout="z-pattern"]) {
+    --ly-recipe-rail: 17rem;
+    --ly-recipe-aside: 19rem;
+    --ly-grid-columns: 8;
+    --ly-grid-min: 14rem;
+    --ly-personality-wrapper-max: 108rem;
+
+    container-name: ly-personality;
+    container-type: inline-size;
+    min-inline-size: 0;
+  }
+
+  @container ly-personality (min-width: 48rem) {
+    :where(.ly-root[data-ly-layout="z-pattern"])
+      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr);
+    }
+  }
+
+  @container ly-personality (min-width: 60rem) {
+    :where(.ly-root[data-ly-layout="z-pattern"])
+      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-areas:
+        "header header sidebar"
+        "main aside sidebar"
+        "footer aside sidebar";
+      grid-template-rows: auto minmax(0, 1fr) auto;
+      grid-template-columns:
+        minmax(0, 1.45fr)
+        minmax(min(100%, 19rem), 0.55fr)
+        minmax(min(100%, 17rem), 0.3fr);
+    }
+
+    :where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid > :nth-child(4n + 2) {
+      grid-column: span 2;
+      align-self: end;
+    }
+
+    :where(.ly-root[data-ly-layout="z-pattern"])
+      :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
+      grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
+    }
+  }
+}

package/styles/personalities.css

@@ -0,0 +1,18 @@
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+
+@import url("./personalities/minimal-saas.css");
+@import url("./personalities/bento.css");
+@import url("./personalities/maximalist.css");
+@import url("./personalities/bauhaus.css");
+@import url("./personalities/tactile.css");
+@import url("./personalities/neumorphism.css");
+@import url("./personalities/retrofuturism.css");
+@import url("./personalities/brutalism.css");
+@import url("./personalities/cyberpunk.css");
+@import url("./personalities/y2k.css");
+@import url("./personalities/retro-glass.css");
+@import url("./personalities/f-pattern.css");
+@import url("./personalities/z-pattern.css");
+@import url("./personalities/split-screen.css");
+@import url("./personalities/mondrian.css");
+@import url("./personalities/synthwave.css");

package/styles/primitives.css

@@ -0,0 +1,219 @@
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+
+/* Reusable composition primitives own flow and sizing only. */
+
+@layer ly.primitives {
+  .ly-page {
+    min-block-size: 100svh;
+  }
+
+  .ly-header,
+  .ly-footer,
+  .ly-main,
+  .ly-section,
+  .ly-surface {
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+
+  .ly-header {
+    min-block-size: var(--ly-header-height);
+  }
+
+  .ly-header--sticky {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--ly-z-header);
+  }
+
+  .ly-section {
+    padding-block: var(--ly-section-padding-block);
+  }
+
+  .ly-section--compact {
+    --ly-section-padding-block: var(--ly-space-7);
+  }
+
+  .ly-section--flush {
+    --ly-section-padding-block: 0;
+  }
+
+  .ly-readable {
+    max-inline-size: var(--ly-wrapper-prose);
+  }
+
+  .ly-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ly-stack-gap);
+  }
+
+  .ly-cluster {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ly-cluster-gap);
+  }
+
+  .ly-center {
+    inline-size: min(100%, var(--ly-center-max, var(--ly-wrapper-content)));
+    margin-inline: auto;
+  }
+
+  .ly-cover {
+    display: flex;
+    flex-direction: column;
+    min-block-size: var(--ly-cover-min);
+    padding-block: var(--ly-cover-padding, var(--ly-space-5));
+  }
+
+  .ly-cover > :where(.ly-cover__center, [data-ly-cover-center]) {
+    margin-block: auto;
+  }
+
+  .ly-switcher {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ly-gap);
+  }
+
+  .ly-switcher > * {
+    flex-basis: calc((var(--ly-switcher-threshold) - 100%) * 999);
+    flex-grow: 1;
+    min-inline-size: 0;
+  }
+
+  .ly-sidebar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ly-gap);
+  }
+
+  .ly-sidebar > :where(.ly-sidebar__side, [data-ly-sidebar="side"]) {
+    flex-basis: var(--ly-sidebar-size);
+    flex-grow: 1;
+  }
+
+  .ly-sidebar > :where(.ly-sidebar__content, [data-ly-sidebar="content"]) {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: min(100%, var(--ly-sidebar-content-min));
+  }
+
+  .ly-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--ly-grid-columns), minmax(0, 1fr));
+    gap: var(--ly-grid-gap);
+  }
+
+  .ly-grid--auto {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-grid-min)), 1fr));
+  }
+
+  .ly-grid > *,
+  .ly-split > *,
+  .ly-panes > *,
+  .ly-media > * {
+    min-inline-size: 0;
+  }
+
+  .ly-split {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--ly-gap);
+    align-items: var(--ly-split-align, center);
+  }
+
+  .ly-panes {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--ly-gap);
+  }
+
+  .ly-media {
+    display: grid;
+    grid-template-areas:
+      "media"
+      "content"
+      "actions";
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--ly-gap);
+    align-items: var(--ly-media-align, start);
+  }
+
+  .ly-media > :where(.ly-media__asset, [data-ly-media="asset"]) {
+    grid-area: media;
+  }
+
+  .ly-media > :where(.ly-media__content, [data-ly-media="content"]) {
+    grid-area: content;
+  }
+
+  .ly-media > :where(.ly-media__actions, [data-ly-media="actions"]) {
+    grid-area: actions;
+  }
+
+  .ly-reel {
+    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-reel > * {
+    min-inline-size: 0;
+    scroll-snap-align: start;
+  }
+
+  .ly-frame {
+    aspect-ratio: var(--ly-frame-ratio);
+    overflow: hidden;
+  }
+
+  .ly-frame > * {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  .ly-scroll {
+    min-block-size: 0;
+    max-block-size: var(--ly-scroll-max);
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* Unsupported container-query browsers retain this safe DOM-order stack. */
+}
+
+@layer ly.primitives {
+  @container (min-width: 48rem) {
+    .ly-split {
+      grid-template-columns: minmax(0, var(--ly-split-primary, 1fr)) minmax(0, var(--ly-split-secondary, 1fr));
+    }
+
+    .ly-panes--2 {
+      grid-template-columns: minmax(0, 1fr) minmax(min(100%, var(--ly-pane-size)), 0.7fr);
+    }
+
+    .ly-media {
+      grid-template-areas:
+        "media content"
+        "media actions";
+      grid-template-columns: minmax(min(100%, var(--ly-media-size)), auto) minmax(0, 1fr);
+    }
+  }
+
+  @container (min-width: 64rem) {
+    .ly-panes--3 {
+      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/recipes.css

@@ -0,0 +1,270 @@
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+
+/*
+  Built-in recipes follow semantic mobile DOM order. Wider arrangements use
+  named areas so visual placement never changes keyboard or reading order.
+*/
+
+@layer ly.recipes {
+  :where(.ly-app-shell, [data-ly-recipe="app-shell"]),
+  :where(.ly-dashboard, [data-ly-recipe="dashboard"]),
+  :where(.ly-docs, [data-ly-recipe="docs"]),
+  :where(.ly-list-detail, [data-ly-recipe="list-detail"]),
+  :where(.ly-split-hero, [data-ly-recipe="split-hero"]),
+  :where(.ly-gallery, [data-ly-recipe="gallery"]),
+  :where(.ly-card-grid, [data-ly-recipe="card-grid"]) {
+    container-name: ly-recipe;
+    container-type: inline-size;
+    min-inline-size: 0;
+  }
+
+  :where(.ly-app-shell, [data-ly-recipe="app-shell"]),
+  :where(.ly-dashboard, [data-ly-recipe="dashboard"]),
+  :where(.ly-docs, [data-ly-recipe="docs"]),
+  :where(.ly-list-detail, [data-ly-recipe="list-detail"]),
+  :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--ly-gap);
+  }
+
+  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+    min-block-size: 100svh;
+    grid-template-areas:
+      "header"
+      "sidebar"
+      "main"
+      "aside"
+      "footer";
+    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
+  }
+
+  :where(.ly-dashboard, [data-ly-recipe="dashboard"]) {
+    grid-template-areas:
+      "header"
+      "nav"
+      "main"
+      "aside"
+      "footer";
+  }
+
+  :where(.ly-docs, [data-ly-recipe="docs"]) {
+    grid-template-areas:
+      "header"
+      "nav"
+      "main"
+      "aside"
+      "footer";
+  }
+
+  :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
+    grid-template-areas:
+      "primary"
+      "secondary"
+      "actions";
+  }
+
+  :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
+    grid-template-areas:
+      "content"
+      "media"
+      "actions";
+    align-items: var(--ly-split-hero-align, center);
+  }
+
+  :where(.ly-gallery, [data-ly-recipe="gallery"]),
+  :where(.ly-card-grid, [data-ly-recipe="card-grid"]) {
+    display: grid;
+    gap: var(--ly-grid-gap);
+  }
+
+  :where(.ly-gallery, [data-ly-recipe="gallery"]) {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-gallery-min)), 1fr));
+  }
+
+  :where(.ly-card-grid, [data-ly-recipe="card-grid"]) {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-card-grid-min)), 1fr));
+  }
+
+  :where(.ly-gallery, [data-ly-recipe="gallery"]) > *,
+  :where(.ly-card-grid, [data-ly-recipe="card-grid"]) > * {
+    min-inline-size: 0;
+  }
+
+  :where(.ly-area--header, [data-ly-area="header"]) {
+    grid-area: header;
+    min-inline-size: 0;
+  }
+
+  :where(.ly-area--nav, [data-ly-area="nav"]) {
+    grid-area: nav;
+    min-inline-size: 0;
+  }
+
+  :where(.ly-area--main, [data-ly-area="main"]) {
+    grid-area: main;
+    min-inline-size: 0;
+  }
+
+  :where(.ly-area--aside, [data-ly-area="aside"]) {
+    grid-area: aside;
+    min-inline-size: 0;
+  }
+
+  :where(.ly-area--footer, [data-ly-area="footer"]) {
+    grid-area: footer;
+    min-inline-size: 0;
+  }
+
+  :where(.ly-area--content, [data-ly-area="content"]) {
+    grid-area: content;
+    min-inline-size: 0;
+  }
+
+  :where(.ly-area--media, [data-ly-area="media"]) {
+    grid-area: media;
+    min-inline-size: 0;
+  }
+
+  :where(.ly-area--actions, [data-ly-area="actions"]) {
+    grid-area: actions;
+    min-inline-size: 0;
+  }
+
+  :where(.ly-area--primary, [data-ly-area="primary"]) {
+    grid-area: primary;
+    min-inline-size: 0;
+  }
+
+  :where(.ly-area--secondary, [data-ly-area="secondary"]) {
+    grid-area: secondary;
+    min-inline-size: 0;
+  }
+
+  .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;
+  }
+
+  :where(.ly-app-shell, [data-ly-recipe="app-shell"])
+    > :where(.ly-area--nav, [data-ly-area="nav"]) {
+    grid-area: sidebar;
+  }
+
+  /*
+    A recipe responds to its nearest ancestor container and then becomes the
+    containment scope for nested compositions. Standalone roots keep the safe
+    mobile template when no ancestor container is present.
+  */
+  @container (min-width: 48rem) {
+    :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-areas:
+        "header header"
+        "sidebar main"
+        "aside main"
+        "footer footer";
+      grid-template-columns: minmax(min(100%, var(--ly-recipe-rail)), auto) minmax(0, 1fr);
+    }
+
+    :where(.ly-dashboard, [data-ly-recipe="dashboard"]) {
+      grid-template-areas:
+        "header header"
+        "nav nav"
+        "main aside"
+        "footer footer";
+      grid-template-columns: minmax(0, 1fr) minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
+    }
+
+    :where(.ly-docs, [data-ly-recipe="docs"]) {
+      grid-template-areas:
+        "header header"
+        "nav main"
+        "nav aside"
+        "footer footer";
+      grid-template-columns: minmax(min(100%, var(--ly-recipe-rail)), auto) minmax(0, 1fr);
+    }
+
+    :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
+      grid-template-areas:
+        "primary secondary"
+        "actions actions";
+      grid-template-columns: minmax(min(100%, var(--ly-pane-size)), 0.7fr) minmax(0, 1fr);
+    }
+
+    :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
+      grid-template-areas:
+        "content media"
+        "actions media";
+      grid-template-columns: minmax(0, var(--ly-split-primary, 1fr)) minmax(0, var(--ly-split-secondary, 1fr));
+    }
+
+    :where(.ly-gallery, [data-ly-recipe="gallery"]) {
+      --ly-gallery-min: 14rem;
+    }
+
+    :where(.ly-card-grid, [data-ly-recipe="card-grid"]) {
+      --ly-card-grid-min: 18rem;
+    }
+  }
+
+  @container (min-width: 64rem) {
+    :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
+      grid-template-areas:
+        "sidebar header header"
+        "sidebar main aside"
+        "sidebar footer footer";
+      grid-template-columns:
+        minmax(min(100%, var(--ly-recipe-rail)), auto)
+        minmax(0, 1fr)
+        minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
+    }
+
+    :where(.ly-dashboard, [data-ly-recipe="dashboard"]),
+    :where(.ly-docs, [data-ly-recipe="docs"]) {
+      grid-template-areas:
+        "nav header header"
+        "nav main aside"
+        "nav footer footer";
+      grid-template-columns:
+        minmax(min(100%, var(--ly-recipe-rail)), auto)
+        minmax(0, 1fr)
+        minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
+    }
+
+    :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
+      grid-template-columns: minmax(min(100%, var(--ly-pane-size)), 0.45fr) minmax(0, 1fr);
+    }
+
+    :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
+      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+    }
+
+    :where(.ly-gallery, [data-ly-recipe="gallery"]) {
+      --ly-gallery-min: 16rem;
+    }
+
+    :where(.ly-card-grid, [data-ly-recipe="card-grid"]) {
+      --ly-card-grid-min: 20rem;
+    }
+  }
+}