/*
* layoutkit-css — a tiny pure-CSS layout vocabulary for readable app structure.
* Zero dependencies. No JavaScript. No build step.
*
*
*
*
* Dashboard
*
*
*
* Tokens: remap the scale onto your design tokens by defining --space-*
* (or override --lk-space-* directly). All rules are in @layer layoutkit.
* Free-form values use custom properties:
* --lk-ratio, --lk-divider-color, --lk-min-child-width, --lk-max-height, --lk-max-width.
*/
@layer layoutkit {
/* Design tokens — remap via your --space-* / --text-* / --radius-* tokens, or override --lk-* directly */
:root { --lk-space-xs: var(--space-xs, 0.25rem); --lk-space-sm: var(--space-sm, 0.5rem); --lk-space-md: var(--space-md, 1rem); --lk-space-lg: var(--space-lg, 1.5rem); --lk-space-xl: var(--space-xl, 2rem); --lk-space-2xl: var(--space-2xl, 3rem); --lk-space-3xl: var(--space-3xl, 4rem); --lk-text-xs: var(--text-xs, 0.75rem); --lk-text-sm: var(--text-sm, 0.875rem); --lk-text-md: var(--text-md, 1rem); --lk-text-lg: var(--text-lg, 1.125rem); --lk-text-xl: var(--text-xl, 1.25rem); --lk-text-2xl: var(--text-2xl, 1.5rem); --lk-text-3xl: var(--text-3xl, 2rem); --lk-text-4xl: var(--text-4xl, 3rem); --lk-radius-sm: var(--radius-sm, 0.375rem); --lk-radius-md: var(--radius-md, 0.75rem); --lk-radius-lg: var(--radius-lg, 1rem); }
/* Base — every primitive sets its own display + box model */
lk-stack,
lk-row,
lk-center,
lk-box,
lk-card,
lk-spread,
lk-grid,
lk-cluster,
lk-switcher,
lk-sidebar,
lk-cover,
lk-spacer,
lk-divider,
lk-aspect-ratio,
lk-scroll-area { box-sizing: border-box; }
lk-stack { display: flex; flex-direction: column; gap: var(--lk-space-md); align-items: stretch; justify-content: flex-start; }
lk-row { display: flex; flex-direction: row; gap: var(--lk-space-md); align-items: center; justify-content: flex-start; }
lk-center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
lk-box { display: block; }
lk-spread { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
lk-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--lk-space-md); }
lk-spacer { display: block; flex: 1 1 0%; }
lk-divider { display: block; inline-size: 100%; border-block-start: 1px solid var(--lk-divider-color, #e5e7eb); }
lk-aspect-ratio { display: block; aspect-ratio: var(--lk-ratio, 1); }
lk-scroll-area { display: block; overflow-y: auto; max-block-size: var(--lk-max-height, none); max-inline-size: var(--lk-max-width, none); }
lk-card { display: block; padding: var(--lk-space-lg); border-radius: var(--lk-radius-md); border: 1px solid var(--lk-card-border, color-mix(in srgb, currentColor 12%, transparent)); }
/* Responsive intent primitives — respond to available space, no media queries */
lk-cluster { display: flex; flex-wrap: wrap; gap: var(--lk-space-sm); align-items: center; }
lk-switcher { display: flex; flex-wrap: wrap; gap: var(--lk-space-md); }
lk-switcher > * { flex-grow: 1; flex-basis: calc((var(--lk-switch-at, 30rem) - 100%) * 999); }
lk-sidebar { display: flex; flex-wrap: wrap; gap: var(--lk-space-md); }
lk-sidebar > :first-child { flex-grow: 1; flex-basis: var(--lk-sidebar-width, 18rem); }
lk-sidebar > :last-child { flex-grow: 999; flex-basis: 0; min-inline-size: var(--lk-sidebar-content-min, 50%); }
lk-sidebar[side="end"] > :first-child { flex-grow: 999; flex-basis: 0; min-inline-size: var(--lk-sidebar-content-min, 50%); }
lk-sidebar[side="end"] > :last-child { flex-grow: 1; flex-basis: var(--lk-sidebar-width, 18rem); min-inline-size: 0; }
lk-cover { display: flex; flex-direction: column; min-block-size: var(--lk-cover-min, 100svh); gap: var(--lk-space-md); padding: var(--lk-space-md); }
lk-cover > [center],
lk-cover > :only-child { margin-block: auto; }
/* Type scale — lk-text / lk-weight (namespaced; work on any element) */
[lk-text="xs"] { font-size: var(--lk-text-xs); }
[lk-text="sm"] { font-size: var(--lk-text-sm); }
[lk-text="md"] { font-size: var(--lk-text-md); }
[lk-text="lg"] { font-size: var(--lk-text-lg); }
[lk-text="xl"] { font-size: var(--lk-text-xl); }
[lk-text="2xl"] { font-size: var(--lk-text-2xl); }
[lk-text="3xl"] { font-size: var(--lk-text-3xl); }
[lk-text="4xl"] { font-size: var(--lk-text-4xl); }
[lk-weight="normal"] { font-weight: 400; }
[lk-weight="medium"] { font-weight: 500; }
[lk-weight="semibold"] { font-weight: 600; }
[lk-weight="bold"] { font-weight: 700; }
/* Width — constrain & center content */
lk-box[width="xs"],
lk-card[width="xs"],
lk-stack[width="xs"],
lk-center[width="xs"],
lk-row[width="xs"] { max-inline-size: 20rem; margin-inline: auto; }
lk-box[width="sm"],
lk-card[width="sm"],
lk-stack[width="sm"],
lk-center[width="sm"],
lk-row[width="sm"] { max-inline-size: 30rem; margin-inline: auto; }
lk-box[width="md"],
lk-card[width="md"],
lk-stack[width="md"],
lk-center[width="md"],
lk-row[width="md"] { max-inline-size: 40rem; margin-inline: auto; }
lk-box[width="lg"],
lk-card[width="lg"],
lk-stack[width="lg"],
lk-center[width="lg"],
lk-row[width="lg"] { max-inline-size: 50rem; margin-inline: auto; }
lk-box[width="xl"],
lk-card[width="xl"],
lk-stack[width="xl"],
lk-center[width="xl"],
lk-row[width="xl"] { max-inline-size: 64rem; margin-inline: auto; }
lk-box[width="prose"],
lk-card[width="prose"],
lk-stack[width="prose"],
lk-center[width="prose"],
lk-row[width="prose"] { max-inline-size: var(--lk-measure, 65ch); margin-inline: auto; }
lk-box[width="full"],
lk-card[width="full"],
lk-stack[width="full"],
lk-center[width="full"],
lk-row[width="full"] { max-inline-size: 100%; }
/* Flow — vertical rhythm between flowing children (the owl) */
lk-box[flow] > * + *,
lk-card[flow] > * + * { margin-block-start: var(--lk-space-md); }
lk-box[flow="xs"] > * + *,
lk-card[flow="xs"] > * + * { margin-block-start: var(--lk-space-xs); }
lk-box[flow="sm"] > * + *,
lk-card[flow="sm"] > * + * { margin-block-start: var(--lk-space-sm); }
lk-box[flow="md"] > * + *,
lk-card[flow="md"] > * + * { margin-block-start: var(--lk-space-md); }
lk-box[flow="lg"] > * + *,
lk-card[flow="lg"] > * + * { margin-block-start: var(--lk-space-lg); }
lk-box[flow="xl"] > * + *,
lk-card[flow="xl"] > * + * { margin-block-start: var(--lk-space-xl); }
lk-box[flow="2xl"] > * + *,
lk-card[flow="2xl"] > * + * { margin-block-start: var(--lk-space-2xl); }
lk-box[flow="3xl"] > * + *,
lk-card[flow="3xl"] > * + * { margin-block-start: var(--lk-space-3xl); }
/* Card — padding, radius, surface, border */
lk-card[padding="1"] { padding: 0.25rem; }
lk-card[padding="2"] { padding: 0.5rem; }
lk-card[padding="3"] { padding: 0.75rem; }
lk-card[padding="4"] { padding: 1rem; }
lk-card[padding="5"] { padding: 1.25rem; }
lk-card[padding="6"] { padding: 1.5rem; }
lk-card[padding="7"] { padding: 1.75rem; }
lk-card[padding="8"] { padding: 2rem; }
lk-card[padding="9"] { padding: 2.25rem; }
lk-card[padding="10"] { padding: 2.5rem; }
lk-card[padding="11"] { padding: 2.75rem; }
lk-card[padding="12"] { padding: 3rem; }
lk-card[padding="14"] { padding: 3.5rem; }
lk-card[padding="16"] { padding: 4rem; }
lk-card[padding="none"] { padding: 0; }
lk-card[padding="px"] { padding: 1px; }
lk-card[padding="xs"] { padding: var(--lk-space-xs); }
lk-card[padding="sm"] { padding: var(--lk-space-sm); }
lk-card[padding="md"] { padding: var(--lk-space-md); }
lk-card[padding="lg"] { padding: var(--lk-space-lg); }
lk-card[padding="xl"] { padding: var(--lk-space-xl); }
lk-card[padding="2xl"] { padding: var(--lk-space-2xl); }
lk-card[padding="3xl"] { padding: var(--lk-space-3xl); }
lk-card[padding="0.5"] { padding: 0.125rem; }
lk-card[padding="1.5"] { padding: 0.375rem; }
lk-card[padding="2.5"] { padding: 0.625rem; }
lk-card[padding="3.5"] { padding: 0.875rem; }
lk-card[radius="none"] { border-radius: 0; }
lk-card[radius="sm"] { border-radius: var(--lk-radius-sm); }
lk-card[radius="md"] { border-radius: var(--lk-radius-md); }
lk-card[radius="lg"] { border-radius: var(--lk-radius-lg); }
lk-card[radius="full"] { border-radius: 9999px; }
lk-card[surface] { background: var(--lk-surface, color-mix(in srgb, currentColor 6%, transparent)); }
lk-card[border="none"] { border: 0; }
/* Gap (lk-stack, lk-row, lk-grid, lk-cluster, lk-switcher, lk-sidebar, lk-cover) */
lk-stack[gap="1"],
lk-row[gap="1"],
lk-grid[gap="1"],
lk-cluster[gap="1"],
lk-switcher[gap="1"],
lk-sidebar[gap="1"],
lk-cover[gap="1"] { gap: 0.25rem; }
lk-stack[gap="2"],
lk-row[gap="2"],
lk-grid[gap="2"],
lk-cluster[gap="2"],
lk-switcher[gap="2"],
lk-sidebar[gap="2"],
lk-cover[gap="2"] { gap: 0.5rem; }
lk-stack[gap="3"],
lk-row[gap="3"],
lk-grid[gap="3"],
lk-cluster[gap="3"],
lk-switcher[gap="3"],
lk-sidebar[gap="3"],
lk-cover[gap="3"] { gap: 0.75rem; }
lk-stack[gap="4"],
lk-row[gap="4"],
lk-grid[gap="4"],
lk-cluster[gap="4"],
lk-switcher[gap="4"],
lk-sidebar[gap="4"],
lk-cover[gap="4"] { gap: 1rem; }
lk-stack[gap="5"],
lk-row[gap="5"],
lk-grid[gap="5"],
lk-cluster[gap="5"],
lk-switcher[gap="5"],
lk-sidebar[gap="5"],
lk-cover[gap="5"] { gap: 1.25rem; }
lk-stack[gap="6"],
lk-row[gap="6"],
lk-grid[gap="6"],
lk-cluster[gap="6"],
lk-switcher[gap="6"],
lk-sidebar[gap="6"],
lk-cover[gap="6"] { gap: 1.5rem; }
lk-stack[gap="7"],
lk-row[gap="7"],
lk-grid[gap="7"],
lk-cluster[gap="7"],
lk-switcher[gap="7"],
lk-sidebar[gap="7"],
lk-cover[gap="7"] { gap: 1.75rem; }
lk-stack[gap="8"],
lk-row[gap="8"],
lk-grid[gap="8"],
lk-cluster[gap="8"],
lk-switcher[gap="8"],
lk-sidebar[gap="8"],
lk-cover[gap="8"] { gap: 2rem; }
lk-stack[gap="9"],
lk-row[gap="9"],
lk-grid[gap="9"],
lk-cluster[gap="9"],
lk-switcher[gap="9"],
lk-sidebar[gap="9"],
lk-cover[gap="9"] { gap: 2.25rem; }
lk-stack[gap="10"],
lk-row[gap="10"],
lk-grid[gap="10"],
lk-cluster[gap="10"],
lk-switcher[gap="10"],
lk-sidebar[gap="10"],
lk-cover[gap="10"] { gap: 2.5rem; }
lk-stack[gap="11"],
lk-row[gap="11"],
lk-grid[gap="11"],
lk-cluster[gap="11"],
lk-switcher[gap="11"],
lk-sidebar[gap="11"],
lk-cover[gap="11"] { gap: 2.75rem; }
lk-stack[gap="12"],
lk-row[gap="12"],
lk-grid[gap="12"],
lk-cluster[gap="12"],
lk-switcher[gap="12"],
lk-sidebar[gap="12"],
lk-cover[gap="12"] { gap: 3rem; }
lk-stack[gap="14"],
lk-row[gap="14"],
lk-grid[gap="14"],
lk-cluster[gap="14"],
lk-switcher[gap="14"],
lk-sidebar[gap="14"],
lk-cover[gap="14"] { gap: 3.5rem; }
lk-stack[gap="16"],
lk-row[gap="16"],
lk-grid[gap="16"],
lk-cluster[gap="16"],
lk-switcher[gap="16"],
lk-sidebar[gap="16"],
lk-cover[gap="16"] { gap: 4rem; }
lk-stack[gap="none"],
lk-row[gap="none"],
lk-grid[gap="none"],
lk-cluster[gap="none"],
lk-switcher[gap="none"],
lk-sidebar[gap="none"],
lk-cover[gap="none"] { gap: 0; }
lk-stack[gap="px"],
lk-row[gap="px"],
lk-grid[gap="px"],
lk-cluster[gap="px"],
lk-switcher[gap="px"],
lk-sidebar[gap="px"],
lk-cover[gap="px"] { gap: 1px; }
lk-stack[gap="xs"],
lk-row[gap="xs"],
lk-grid[gap="xs"],
lk-cluster[gap="xs"],
lk-switcher[gap="xs"],
lk-sidebar[gap="xs"],
lk-cover[gap="xs"] { gap: var(--lk-space-xs); }
lk-stack[gap="sm"],
lk-row[gap="sm"],
lk-grid[gap="sm"],
lk-cluster[gap="sm"],
lk-switcher[gap="sm"],
lk-sidebar[gap="sm"],
lk-cover[gap="sm"] { gap: var(--lk-space-sm); }
lk-stack[gap="md"],
lk-row[gap="md"],
lk-grid[gap="md"],
lk-cluster[gap="md"],
lk-switcher[gap="md"],
lk-sidebar[gap="md"],
lk-cover[gap="md"] { gap: var(--lk-space-md); }
lk-stack[gap="lg"],
lk-row[gap="lg"],
lk-grid[gap="lg"],
lk-cluster[gap="lg"],
lk-switcher[gap="lg"],
lk-sidebar[gap="lg"],
lk-cover[gap="lg"] { gap: var(--lk-space-lg); }
lk-stack[gap="xl"],
lk-row[gap="xl"],
lk-grid[gap="xl"],
lk-cluster[gap="xl"],
lk-switcher[gap="xl"],
lk-sidebar[gap="xl"],
lk-cover[gap="xl"] { gap: var(--lk-space-xl); }
lk-stack[gap="2xl"],
lk-row[gap="2xl"],
lk-grid[gap="2xl"],
lk-cluster[gap="2xl"],
lk-switcher[gap="2xl"],
lk-sidebar[gap="2xl"],
lk-cover[gap="2xl"] { gap: var(--lk-space-2xl); }
lk-stack[gap="3xl"],
lk-row[gap="3xl"],
lk-grid[gap="3xl"],
lk-cluster[gap="3xl"],
lk-switcher[gap="3xl"],
lk-sidebar[gap="3xl"],
lk-cover[gap="3xl"] { gap: var(--lk-space-3xl); }
lk-stack[gap="0.5"],
lk-row[gap="0.5"],
lk-grid[gap="0.5"],
lk-cluster[gap="0.5"],
lk-switcher[gap="0.5"],
lk-sidebar[gap="0.5"],
lk-cover[gap="0.5"] { gap: 0.125rem; }
lk-stack[gap="1.5"],
lk-row[gap="1.5"],
lk-grid[gap="1.5"],
lk-cluster[gap="1.5"],
lk-switcher[gap="1.5"],
lk-sidebar[gap="1.5"],
lk-cover[gap="1.5"] { gap: 0.375rem; }
lk-stack[gap="2.5"],
lk-row[gap="2.5"],
lk-grid[gap="2.5"],
lk-cluster[gap="2.5"],
lk-switcher[gap="2.5"],
lk-sidebar[gap="2.5"],
lk-cover[gap="2.5"] { gap: 0.625rem; }
lk-stack[gap="3.5"],
lk-row[gap="3.5"],
lk-grid[gap="3.5"],
lk-cluster[gap="3.5"],
lk-switcher[gap="3.5"],
lk-sidebar[gap="3.5"],
lk-cover[gap="3.5"] { gap: 0.875rem; }
/* Padding (lk-stack, lk-row, lk-box, lk-spread) */
lk-stack[padding="1"],
lk-row[padding="1"],
lk-box[padding="1"],
lk-spread[padding="1"] { padding: 0.25rem; }
lk-stack[padding="2"],
lk-row[padding="2"],
lk-box[padding="2"],
lk-spread[padding="2"] { padding: 0.5rem; }
lk-stack[padding="3"],
lk-row[padding="3"],
lk-box[padding="3"],
lk-spread[padding="3"] { padding: 0.75rem; }
lk-stack[padding="4"],
lk-row[padding="4"],
lk-box[padding="4"],
lk-spread[padding="4"] { padding: 1rem; }
lk-stack[padding="5"],
lk-row[padding="5"],
lk-box[padding="5"],
lk-spread[padding="5"] { padding: 1.25rem; }
lk-stack[padding="6"],
lk-row[padding="6"],
lk-box[padding="6"],
lk-spread[padding="6"] { padding: 1.5rem; }
lk-stack[padding="7"],
lk-row[padding="7"],
lk-box[padding="7"],
lk-spread[padding="7"] { padding: 1.75rem; }
lk-stack[padding="8"],
lk-row[padding="8"],
lk-box[padding="8"],
lk-spread[padding="8"] { padding: 2rem; }
lk-stack[padding="9"],
lk-row[padding="9"],
lk-box[padding="9"],
lk-spread[padding="9"] { padding: 2.25rem; }
lk-stack[padding="10"],
lk-row[padding="10"],
lk-box[padding="10"],
lk-spread[padding="10"] { padding: 2.5rem; }
lk-stack[padding="11"],
lk-row[padding="11"],
lk-box[padding="11"],
lk-spread[padding="11"] { padding: 2.75rem; }
lk-stack[padding="12"],
lk-row[padding="12"],
lk-box[padding="12"],
lk-spread[padding="12"] { padding: 3rem; }
lk-stack[padding="14"],
lk-row[padding="14"],
lk-box[padding="14"],
lk-spread[padding="14"] { padding: 3.5rem; }
lk-stack[padding="16"],
lk-row[padding="16"],
lk-box[padding="16"],
lk-spread[padding="16"] { padding: 4rem; }
lk-stack[padding="none"],
lk-row[padding="none"],
lk-box[padding="none"],
lk-spread[padding="none"] { padding: 0; }
lk-stack[padding="px"],
lk-row[padding="px"],
lk-box[padding="px"],
lk-spread[padding="px"] { padding: 1px; }
lk-stack[padding="xs"],
lk-row[padding="xs"],
lk-box[padding="xs"],
lk-spread[padding="xs"] { padding: var(--lk-space-xs); }
lk-stack[padding="sm"],
lk-row[padding="sm"],
lk-box[padding="sm"],
lk-spread[padding="sm"] { padding: var(--lk-space-sm); }
lk-stack[padding="md"],
lk-row[padding="md"],
lk-box[padding="md"],
lk-spread[padding="md"] { padding: var(--lk-space-md); }
lk-stack[padding="lg"],
lk-row[padding="lg"],
lk-box[padding="lg"],
lk-spread[padding="lg"] { padding: var(--lk-space-lg); }
lk-stack[padding="xl"],
lk-row[padding="xl"],
lk-box[padding="xl"],
lk-spread[padding="xl"] { padding: var(--lk-space-xl); }
lk-stack[padding="2xl"],
lk-row[padding="2xl"],
lk-box[padding="2xl"],
lk-spread[padding="2xl"] { padding: var(--lk-space-2xl); }
lk-stack[padding="3xl"],
lk-row[padding="3xl"],
lk-box[padding="3xl"],
lk-spread[padding="3xl"] { padding: var(--lk-space-3xl); }
lk-stack[padding="0.5"],
lk-row[padding="0.5"],
lk-box[padding="0.5"],
lk-spread[padding="0.5"] { padding: 0.125rem; }
lk-stack[padding="1.5"],
lk-row[padding="1.5"],
lk-box[padding="1.5"],
lk-spread[padding="1.5"] { padding: 0.375rem; }
lk-stack[padding="2.5"],
lk-row[padding="2.5"],
lk-box[padding="2.5"],
lk-spread[padding="2.5"] { padding: 0.625rem; }
lk-stack[padding="3.5"],
lk-row[padding="3.5"],
lk-box[padding="3.5"],
lk-spread[padding="3.5"] { padding: 0.875rem; }
/* Align-items (lk-stack, lk-row, lk-spread) */
lk-stack[align="start"],
lk-row[align="start"],
lk-spread[align="start"] { align-items: flex-start; }
lk-stack[align="center"],
lk-row[align="center"],
lk-spread[align="center"] { align-items: center; }
lk-stack[align="end"],
lk-row[align="end"],
lk-spread[align="end"] { align-items: flex-end; }
lk-stack[align="stretch"],
lk-row[align="stretch"],
lk-spread[align="stretch"] { align-items: stretch; }
lk-stack[align="baseline"],
lk-row[align="baseline"],
lk-spread[align="baseline"] { align-items: baseline; }
/* Justify-content (lk-stack, lk-row) */
lk-stack[justify="start"],
lk-row[justify="start"] { justify-content: flex-start; }
lk-stack[justify="center"],
lk-row[justify="center"] { justify-content: center; }
lk-stack[justify="end"],
lk-row[justify="end"] { justify-content: flex-end; }
lk-stack[justify="between"],
lk-row[justify="between"] { justify-content: space-between; }
lk-stack[justify="around"],
lk-row[justify="around"] { justify-content: space-around; }
lk-stack[justify="evenly"],
lk-row[justify="evenly"] { justify-content: space-evenly; }
/* Place — axis-agnostic alignment (the same word works on rows and stacks) */
lk-stack[place="center"] { justify-content: center; align-items: center; }
lk-stack[place="top"] { justify-content: flex-start; align-items: center; }
lk-stack[place="bottom"] { justify-content: flex-end; align-items: center; }
lk-stack[place="start"] { justify-content: center; align-items: flex-start; }
lk-stack[place="end"] { justify-content: center; align-items: flex-end; }
lk-stack[place="top-start"] { justify-content: flex-start; align-items: flex-start; }
lk-stack[place="top-end"] { justify-content: flex-start; align-items: flex-end; }
lk-stack[place="bottom-start"] { justify-content: flex-end; align-items: flex-start; }
lk-stack[place="bottom-end"] { justify-content: flex-end; align-items: flex-end; }
lk-stack[place="between"] { justify-content: space-between; }
lk-stack[place="around"] { justify-content: space-around; }
lk-stack[place="evenly"] { justify-content: space-evenly; }
lk-center[place="center"] { justify-content: center; align-items: center; }
lk-center[place="top"] { justify-content: flex-start; align-items: center; }
lk-center[place="bottom"] { justify-content: flex-end; align-items: center; }
lk-center[place="start"] { justify-content: center; align-items: flex-start; }
lk-center[place="end"] { justify-content: center; align-items: flex-end; }
lk-center[place="top-start"] { justify-content: flex-start; align-items: flex-start; }
lk-center[place="top-end"] { justify-content: flex-start; align-items: flex-end; }
lk-center[place="bottom-start"] { justify-content: flex-end; align-items: flex-start; }
lk-center[place="bottom-end"] { justify-content: flex-end; align-items: flex-end; }
lk-center[place="between"] { justify-content: space-between; }
lk-center[place="around"] { justify-content: space-around; }
lk-center[place="evenly"] { justify-content: space-evenly; }
lk-row[place="center"] { justify-content: center; align-items: center; }
lk-row[place="top"] { justify-content: center; align-items: flex-start; }
lk-row[place="bottom"] { justify-content: center; align-items: flex-end; }
lk-row[place="start"] { justify-content: flex-start; align-items: center; }
lk-row[place="end"] { justify-content: flex-end; align-items: center; }
lk-row[place="top-start"] { justify-content: flex-start; align-items: flex-start; }
lk-row[place="top-end"] { justify-content: flex-end; align-items: flex-start; }
lk-row[place="bottom-start"] { justify-content: flex-start; align-items: flex-end; }
lk-row[place="bottom-end"] { justify-content: flex-end; align-items: flex-end; }
lk-row[place="between"] { justify-content: space-between; }
lk-row[place="around"] { justify-content: space-around; }
lk-row[place="evenly"] { justify-content: space-evenly; }
lk-spread[place="center"] { justify-content: center; align-items: center; }
lk-spread[place="top"] { justify-content: center; align-items: flex-start; }
lk-spread[place="bottom"] { justify-content: center; align-items: flex-end; }
lk-spread[place="start"] { justify-content: flex-start; align-items: center; }
lk-spread[place="end"] { justify-content: flex-end; align-items: center; }
lk-spread[place="top-start"] { justify-content: flex-start; align-items: flex-start; }
lk-spread[place="top-end"] { justify-content: flex-end; align-items: flex-start; }
lk-spread[place="bottom-start"] { justify-content: flex-start; align-items: flex-end; }
lk-spread[place="bottom-end"] { justify-content: flex-end; align-items: flex-end; }
lk-spread[place="between"] { justify-content: space-between; }
lk-spread[place="around"] { justify-content: space-around; }
lk-spread[place="evenly"] { justify-content: space-evenly; }
lk-cluster[place="center"] { justify-content: center; align-items: center; }
lk-cluster[place="top"] { justify-content: center; align-items: flex-start; }
lk-cluster[place="bottom"] { justify-content: center; align-items: flex-end; }
lk-cluster[place="start"] { justify-content: flex-start; align-items: center; }
lk-cluster[place="end"] { justify-content: flex-end; align-items: center; }
lk-cluster[place="top-start"] { justify-content: flex-start; align-items: flex-start; }
lk-cluster[place="top-end"] { justify-content: flex-end; align-items: flex-start; }
lk-cluster[place="bottom-start"] { justify-content: flex-start; align-items: flex-end; }
lk-cluster[place="bottom-end"] { justify-content: flex-end; align-items: flex-end; }
lk-cluster[place="between"] { justify-content: space-between; }
lk-cluster[place="around"] { justify-content: space-around; }
lk-cluster[place="evenly"] { justify-content: space-evenly; }
lk-grid[place="center"] { justify-items: center; align-items: center; }
lk-grid[place="top"] { justify-items: center; align-items: start; }
lk-grid[place="bottom"] { justify-items: center; align-items: end; }
lk-grid[place="start"] { justify-items: start; align-items: center; }
lk-grid[place="end"] { justify-items: end; align-items: center; }
lk-grid[place="top-start"] { justify-items: start; align-items: start; }
lk-grid[place="top-end"] { justify-items: end; align-items: start; }
lk-grid[place="bottom-start"] { justify-items: start; align-items: end; }
lk-grid[place="bottom-end"] { justify-items: end; align-items: end; }
/* Boolean modifiers */
lk-stack[center],
lk-row[center] { align-items: center; justify-content: center; }
lk-center[fill],
lk-stack[fill],
lk-row[fill],
lk-box[fill] { flex: 1 1 0%; }
lk-center[full-height],
lk-stack[full-height],
lk-row[full-height] { min-block-size: 100vh; }
lk-stack[wrap],
lk-row[wrap] { flex-wrap: wrap; }
lk-row[reverse] { flex-direction: row-reverse; }
/* Center — single-axis overrides */
lk-center[inline] { display: inline-flex; }
lk-center[horizontal]:not([vertical]) { justify-content: flex-start; }
lk-center[vertical]:not([horizontal]) { align-items: stretch; }
/* Grid columns / rows / flow / placement */
lk-grid[cols="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
lk-grid[cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
lk-grid[cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
lk-grid[cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
lk-grid[cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
lk-grid[cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
lk-grid[cols="7"] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
lk-grid[cols="8"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
lk-grid[cols="9"] { grid-template-columns: repeat(9, minmax(0, 1fr)); }
lk-grid[cols="10"] { grid-template-columns: repeat(10, minmax(0, 1fr)); }
lk-grid[cols="11"] { grid-template-columns: repeat(11, minmax(0, 1fr)); }
lk-grid[cols="12"] { grid-template-columns: repeat(12, minmax(0, 1fr)); }
lk-grid[rows="1"] { grid-template-rows: repeat(1, minmax(0, 1fr)); }
lk-grid[rows="2"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }
lk-grid[rows="3"] { grid-template-rows: repeat(3, minmax(0, 1fr)); }
lk-grid[rows="4"] { grid-template-rows: repeat(4, minmax(0, 1fr)); }
lk-grid[rows="5"] { grid-template-rows: repeat(5, minmax(0, 1fr)); }
lk-grid[rows="6"] { grid-template-rows: repeat(6, minmax(0, 1fr)); }
lk-grid[rows="7"] { grid-template-rows: repeat(7, minmax(0, 1fr)); }
lk-grid[rows="8"] { grid-template-rows: repeat(8, minmax(0, 1fr)); }
lk-grid[rows="9"] { grid-template-rows: repeat(9, minmax(0, 1fr)); }
lk-grid[rows="10"] { grid-template-rows: repeat(10, minmax(0, 1fr)); }
lk-grid[rows="11"] { grid-template-rows: repeat(11, minmax(0, 1fr)); }
lk-grid[rows="12"] { grid-template-rows: repeat(12, minmax(0, 1fr)); }
lk-grid[responsive] { grid-template-columns: repeat(auto-fit, minmax(var(--lk-min-child-width, 250px), 1fr)); }
lk-grid[min="2xs"] { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
lk-grid[min="xs"] { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
lk-grid[min="sm"] { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
lk-grid[min="md"] { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
lk-grid[min="lg"] { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
lk-grid[min="xl"] { grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); }
lk-grid[col-gap="1"] { column-gap: 0.25rem; }
lk-grid[col-gap="2"] { column-gap: 0.5rem; }
lk-grid[col-gap="3"] { column-gap: 0.75rem; }
lk-grid[col-gap="4"] { column-gap: 1rem; }
lk-grid[col-gap="5"] { column-gap: 1.25rem; }
lk-grid[col-gap="6"] { column-gap: 1.5rem; }
lk-grid[col-gap="7"] { column-gap: 1.75rem; }
lk-grid[col-gap="8"] { column-gap: 2rem; }
lk-grid[col-gap="9"] { column-gap: 2.25rem; }
lk-grid[col-gap="10"] { column-gap: 2.5rem; }
lk-grid[col-gap="11"] { column-gap: 2.75rem; }
lk-grid[col-gap="12"] { column-gap: 3rem; }
lk-grid[col-gap="14"] { column-gap: 3.5rem; }
lk-grid[col-gap="16"] { column-gap: 4rem; }
lk-grid[col-gap="none"] { column-gap: 0; }
lk-grid[col-gap="px"] { column-gap: 1px; }
lk-grid[col-gap="xs"] { column-gap: var(--lk-space-xs); }
lk-grid[col-gap="sm"] { column-gap: var(--lk-space-sm); }
lk-grid[col-gap="md"] { column-gap: var(--lk-space-md); }
lk-grid[col-gap="lg"] { column-gap: var(--lk-space-lg); }
lk-grid[col-gap="xl"] { column-gap: var(--lk-space-xl); }
lk-grid[col-gap="2xl"] { column-gap: var(--lk-space-2xl); }
lk-grid[col-gap="3xl"] { column-gap: var(--lk-space-3xl); }
lk-grid[col-gap="0.5"] { column-gap: 0.125rem; }
lk-grid[col-gap="1.5"] { column-gap: 0.375rem; }
lk-grid[col-gap="2.5"] { column-gap: 0.625rem; }
lk-grid[col-gap="3.5"] { column-gap: 0.875rem; }
lk-grid[row-gap="1"] { row-gap: 0.25rem; }
lk-grid[row-gap="2"] { row-gap: 0.5rem; }
lk-grid[row-gap="3"] { row-gap: 0.75rem; }
lk-grid[row-gap="4"] { row-gap: 1rem; }
lk-grid[row-gap="5"] { row-gap: 1.25rem; }
lk-grid[row-gap="6"] { row-gap: 1.5rem; }
lk-grid[row-gap="7"] { row-gap: 1.75rem; }
lk-grid[row-gap="8"] { row-gap: 2rem; }
lk-grid[row-gap="9"] { row-gap: 2.25rem; }
lk-grid[row-gap="10"] { row-gap: 2.5rem; }
lk-grid[row-gap="11"] { row-gap: 2.75rem; }
lk-grid[row-gap="12"] { row-gap: 3rem; }
lk-grid[row-gap="14"] { row-gap: 3.5rem; }
lk-grid[row-gap="16"] { row-gap: 4rem; }
lk-grid[row-gap="none"] { row-gap: 0; }
lk-grid[row-gap="px"] { row-gap: 1px; }
lk-grid[row-gap="xs"] { row-gap: var(--lk-space-xs); }
lk-grid[row-gap="sm"] { row-gap: var(--lk-space-sm); }
lk-grid[row-gap="md"] { row-gap: var(--lk-space-md); }
lk-grid[row-gap="lg"] { row-gap: var(--lk-space-lg); }
lk-grid[row-gap="xl"] { row-gap: var(--lk-space-xl); }
lk-grid[row-gap="2xl"] { row-gap: var(--lk-space-2xl); }
lk-grid[row-gap="3xl"] { row-gap: var(--lk-space-3xl); }
lk-grid[row-gap="0.5"] { row-gap: 0.125rem; }
lk-grid[row-gap="1.5"] { row-gap: 0.375rem; }
lk-grid[row-gap="2.5"] { row-gap: 0.625rem; }
lk-grid[row-gap="3.5"] { row-gap: 0.875rem; }
lk-grid[flow="row"] { grid-auto-flow: row; }
lk-grid[flow="col"] { grid-auto-flow: column; }
lk-grid[flow="dense"] { grid-auto-flow: dense; }
lk-grid[place-items="start"] { place-items: start; }
lk-grid[place-items="center"] { place-items: center; }
lk-grid[place-items="end"] { place-items: end; }
lk-grid[place-items="stretch"] { place-items: stretch; }
/* Spacer — fixed sizes (default is flexible) */
lk-spacer[size="auto"] { flex: 1 1 0%; }
lk-spacer[size="1"] { flex: none; block-size: 0.25rem; }
lk-spacer[size="2"] { flex: none; block-size: 0.5rem; }
lk-spacer[size="3"] { flex: none; block-size: 0.75rem; }
lk-spacer[size="4"] { flex: none; block-size: 1rem; }
lk-spacer[size="5"] { flex: none; block-size: 1.25rem; }
lk-spacer[size="6"] { flex: none; block-size: 1.5rem; }
lk-spacer[size="7"] { flex: none; block-size: 1.75rem; }
lk-spacer[size="8"] { flex: none; block-size: 2rem; }
lk-spacer[size="9"] { flex: none; block-size: 2.25rem; }
lk-spacer[size="10"] { flex: none; block-size: 2.5rem; }
lk-spacer[size="11"] { flex: none; block-size: 2.75rem; }
lk-spacer[size="12"] { flex: none; block-size: 3rem; }
lk-spacer[size="14"] { flex: none; block-size: 3.5rem; }
lk-spacer[size="16"] { flex: none; block-size: 4rem; }
lk-spacer[size="none"] { flex: none; block-size: 0; }
lk-spacer[size="px"] { flex: none; block-size: 1px; }
lk-spacer[size="xs"] { flex: none; block-size: var(--lk-space-xs); }
lk-spacer[size="sm"] { flex: none; block-size: var(--lk-space-sm); }
lk-spacer[size="md"] { flex: none; block-size: var(--lk-space-md); }
lk-spacer[size="lg"] { flex: none; block-size: var(--lk-space-lg); }
lk-spacer[size="xl"] { flex: none; block-size: var(--lk-space-xl); }
lk-spacer[size="2xl"] { flex: none; block-size: var(--lk-space-2xl); }
lk-spacer[size="3xl"] { flex: none; block-size: var(--lk-space-3xl); }
lk-spacer[size="0.5"] { flex: none; block-size: 0.125rem; }
lk-spacer[size="1.5"] { flex: none; block-size: 0.375rem; }
lk-spacer[size="2.5"] { flex: none; block-size: 0.625rem; }
lk-spacer[size="3.5"] { flex: none; block-size: 0.875rem; }
/* Divider — thickness + vertical orientation */
lk-divider[thickness="medium"] { border-block-start-width: 2px; }
lk-divider[thickness="thick"] { border-block-start-width: 4px; }
lk-divider[orientation="vertical"] { inline-size: auto; block-size: 100%; align-self: stretch; border-block-start: 0; border-inline-start: 1px solid var(--lk-divider-color, #e5e7eb); }
lk-divider[orientation="vertical"][thickness="medium"] { border-inline-start-width: 2px; }
lk-divider[orientation="vertical"][thickness="thick"] { border-inline-start-width: 4px; }
/* Scroll-area — direction + enumerated max height */
lk-scroll-area[direction="vertical"] { overflow-x: hidden; overflow-y: auto; }
lk-scroll-area[direction="horizontal"] { overflow-x: auto; overflow-y: hidden; }
lk-scroll-area[direction="both"] { overflow: auto; }
lk-scroll-area[max-h="sm"] { max-block-size: 16rem; }
lk-scroll-area[max-h="md"] { max-block-size: 24rem; }
lk-scroll-area[max-h="lg"] { max-block-size: 32rem; }
lk-scroll-area[max-h="screen"] { max-block-size: 100svh; }
/* Aspect-ratio — common ratios (enumerated, CSP-clean) */
lk-aspect-ratio[ratio="1/1"] { aspect-ratio: 1/1; }
lk-aspect-ratio[ratio="16/9"] { aspect-ratio: 16/9; }
lk-aspect-ratio[ratio="4/3"] { aspect-ratio: 4/3; }
lk-aspect-ratio[ratio="3/2"] { aspect-ratio: 3/2; }
lk-aspect-ratio[ratio="2/1"] { aspect-ratio: 2/1; }
lk-aspect-ratio[ratio="3/1"] { aspect-ratio: 3/1; }
lk-aspect-ratio[ratio="9/16"] { aspect-ratio: 9/16; }
lk-aspect-ratio[ratio="4/5"] { aspect-ratio: 4/5; }
}