layout-style-css 2.1.0 → 3.0.0

package/docs/wiki/Security-And-Support.md

@@ -1,36 +0,0 @@
-# Security And Support
-
-`layout-style-css` is dependency-free runtime CSS. It executes no consumer JavaScript, calls no services, reads no secrets, and processes no user input. The demo JavaScript uses allowlisted query values and `textContent` for generated snippets.
-
-## Supported Versions
-
-| Version | Supported |
-| --- | --- |
-| `2.x` | Yes |
-| `1.1.x` | Migration support only |
-| `1.0.x` | No |
-
-The v2 `legacy.css` compatibility bundle is scheduled for removal in v3.
-
-## Browser Baseline
-
-Current evergreen Chromium, Firefox, and WebKit are supported. The mobile DOM-order fallback remains usable when container queries are unavailable, but current browser engines are the tested contract.
-
-## Report A Security Issue
-
-Use GitHub security advisories when available. Otherwise, open a minimal issue requesting a private coordination path without publishing exploit details.
-
-Include the affected version, export or selector, reproduction, expected impact, and whether the issue affects package consumers, the demo, or GitHub Pages.
-
-## Release Checks
-
-```bash
-npm audit --audit-level=moderate
-npm run release:verify
-```
-
-The release gate checks authored/generated parity, structural ownership, documentation, tarball contents, Pages output, and the Chromium, Firefox, and WebKit rendered matrices.
-
-The npm publish workflow also enforces a strict tag namespace, exact tag/HEAD identity, protected-main ancestry, package-version alignment, an `npm` GitHub Environment with required reviewers, and npm provenance. The registry token is scoped to the final publish step. Replacing it with npm trusted publishing and pinning GitHub Actions to an immutable commit SHA remain explicit hardening follow-ups.
-
-The demo protects its two exact-version companion CDN fixtures with SHA-384 subresource integrity and anonymous CORS; rendered tests recompute those hashes from the pinned local fixtures.

package/docs/wiki/UI-Style-Kit-Compatibility.md

@@ -1,49 +0,0 @@
-# UI Style Kit Compatibility
-
-Layout Style CSS is dependency-free. `ui-style-kit-css@2.1.0` is the released visual fixture for 2.1 ecosystem verification and is not a runtime or peer dependency.
-
-## Ownership Boundary
-
-| Package | Owns |
-| --- | --- |
-| `layout-style-css` | Wrappers, containment, flow, areas, grids, spans, recipes, and spatial personalities. |
-| `ui-style-kit-css` | Color, typography, borders, shadows, native controls, component paint, themes, and modes. |
-| `interactive-surface-css` | Interaction-state styling. |
-
-## Explicit Imports
-
-Layout plus UI:
-
-```js
-import "ui-style-kit-css/visual.css";
-import "layout-style-css";
-```
-
-All three libraries:
-
-```js
-import "ui-style-kit-css/visual.css";
-import "ui-style-kit-css/interactive-surface-theme.css";
-import "interactive-surface-css/state-core.css";
-import "layout-style-css";
-```
-
-The Layout integration bridge contains structural mappings but no package imports. It remains available as deprecated compatibility for legacy UI-prefixed structural aliases. The removed `all-with-ui-kit*` aggregates have no v2 replacement because dependency ownership stays with the application.
-
-## Structural Aliases
-
-The bridge supports the `saas`, `bento`, `max`, `bau`, `tactile`, `neo`, `retro`, `brutal`, `cyber`, `y2k`, and `rg` prefixes for container, section, stack, cluster, grid, split, button-group, card-grid, card-size, gallery, and carousel structure.
-
-Visual component names remain owned by UI Style Kit. The bridge does not map color, typography, border, shadow, theme, or interaction tokens.
-
-The removed v1 `.ly-surface--raised` selector is not restored by `legacy.css`; its radius and raised paint belong to UI Style Kit or application theme styling. Likewise, the legacy `.ly-divider` alias supplies structural size and spacing only, leaving the visible separator to the UI layer.
-
-## Compatibility Baseline
-
-| Library | Verified fixture | Consumer requirement |
-| --- | --- | --- |
-| Layout Style CSS | `2.1.0` | Required for this API |
-| UI Style Kit CSS | `2.1.0` visual CSS and manifest | Optional released fixture |
-| Interactive Surface CSS | `1.5.0` `state-core.css` | Optional released fixture |
-
-Current evergreen Chromium, Firefox, and WebKit are covered by the release gate.

package/docs/wiki/_Sidebar.md

@@ -1,15 +0,0 @@
-# Wiki Navigation
-
-- [Home](Home.md)
-- [Getting Started](Getting-Started.md)
-- [Installation And CDN](Installation-And-CDN.md)
-- [Layout Primitives](Layout-Primitives.md)
-- [Layout Recipes](Layout-Recipes.md)
-- [Layout Styles](Layout-Styles.md)
-- [UI Style Kit Compatibility](UI-Style-Kit-Compatibility.md)
-- [Migrating To 2.0](Migrating-To-2.0.md)
-- [Demo And GitHub Pages](Demo-And-GitHub-Pages.md)
-- [Release And Publishing](Release-And-Publishing.md)
-- [Security And Support](Security-And-Support.md)
-- [Contributing](Contributing.md)
-

package/styles/core.css

@@ -1,6 +0,0 @@
-@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/integrations/ui-style-kit.css

@@ -1,175 +0,0 @@
-@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));
-    }
-  }
-}

package/styles/legacy.css

@@ -1,173 +0,0 @@
-@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

@@ -1,46 +0,0 @@
-@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

@@ -1,43 +0,0 @@
-@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

@@ -1,36 +0,0 @@
-@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

@@ -1,36 +0,0 @@
-@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

@@ -1,48 +0,0 @@
-@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);
-    }
-  }
-}