@teseor/css 1.3.0 → 1.4.0

package/dist/index.css

@@ -15,18 +15,23 @@
 @layer reset{*,*::before,*::after{box-sizing:border-box;margin:0}}
 @layer base{.ui-root{font-family:var(--ui-font-sans, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);font-size:var(--ui-font-size-md, 1rem);line-height:var(--ui-leading-md, calc(0.5rem * 3));color:var(--ui-color-text, hsl(220, 10%, 10%));background:var(--ui-color-bg, hsl(220, 10%, 98%))}}
 @layer base{h1{margin-block-end:var(--ui-space-4);font-size:var(--ui-heading-1-size);font-weight:var(--ui-heading-1-weight);line-height:var(--ui-heading-1-line-height);letter-spacing:var(--ui-heading-1-tracking)}h2{margin-block-end:var(--ui-space-3);font-size:var(--ui-heading-2-size);font-weight:var(--ui-heading-2-weight);line-height:var(--ui-heading-2-line-height);letter-spacing:var(--ui-heading-2-tracking)}h3{margin-block-end:var(--ui-space-2);font-size:var(--ui-heading-3-size);font-weight:var(--ui-heading-3-weight);line-height:var(--ui-heading-3-line-height);letter-spacing:var(--ui-heading-3-tracking)}h4{margin-block-end:var(--ui-space-2);font-size:var(--ui-heading-4-size);font-weight:var(--ui-heading-4-weight);line-height:var(--ui-heading-4-line-height);letter-spacing:var(--ui-heading-4-tracking)}h5,h6{margin-block-end:var(--ui-space-1);font-size:var(--ui-heading-5-size);font-weight:var(--ui-heading-5-weight);line-height:var(--ui-heading-5-line-height);letter-spacing:var(--ui-heading-5-tracking)}p{margin-block-end:var(--ui-space-2);font-size:var(--ui-body-size);line-height:var(--ui-body-line-height);letter-spacing:var(--ui-body-tracking)}p:last-child{margin-block-end:0}strong,b{font-weight:var(--ui-weight-bold);line-height:0}small{font-size:var(--ui-caption-size);line-height:0}code{padding:0 var(--ui-space-1);font-family:var(--ui-font-mono);font-size:var(--ui-body-sm-size);line-height:0;vertical-align:baseline;background:var(--ui-color-bg-muted);border-radius:var(--ui-radius-sm)}pre{padding:var(--ui-space-2);margin-block-end:var(--ui-space-2);overflow-x:auto;font-family:var(--ui-font-mono);font-size:var(--ui-body-sm-size);line-height:var(--ui-body-sm-line-height);background:var(--ui-color-bg-muted);border-radius:var(--ui-radius-md)}pre code{padding:0;background:none}a{text-decoration:underline;color:var(--ui-color-primary);transition:color var(--ui-duration-fast) var(--ui-ease-default)}a:hover{color:var(--ui-color-primary-hover)}a:visited{color:var(--ui-color-primary)}@media(width < 45.625rem){h1{font-size:var(--ui-font-size-2xl);line-height:var(--ui-leading-2xl)}h2{font-size:var(--ui-font-size-xl);line-height:var(--ui-leading-xl)}h3{font-size:var(--ui-font-size-lg);line-height:var(--ui-leading-sm)}h4{font-size:1.125rem;line-height:var(--ui-leading-sm)}}@media(width > 67.5rem){h1{font-size:calc(var(--ui-unit)*6);line-height:calc(var(--ui-unit)*7)}h2{font-size:var(--ui-font-size-4xl);line-height:var(--ui-leading-4xl)}}}
+@layer primitives{.ui-app-shell{min-block-size:100vh}}
+@layer primitives{.ui-aspect-ratio{aspect-ratio:var(--ui-aspect-ratio, 1/1);overflow:hidden}.ui-aspect-ratio>img,.ui-aspect-ratio>video,.ui-aspect-ratio>iframe{block-size:100%;inline-size:100%;object-fit:cover}.ui-aspect-ratio--square{--ui-aspect-ratio: 1 / 1}.ui-aspect-ratio--video{--ui-aspect-ratio: 16 / 9}.ui-aspect-ratio--photo{--ui-aspect-ratio: 4 / 3}.ui-aspect-ratio--wide{--ui-aspect-ratio: 21 / 9}.ui-aspect-ratio--portrait{--ui-aspect-ratio: 3 / 4}}
 @layer primitives{.ui-box{--ui-_padding: var(--ui-box-padding, 0);--ui-_bg: var(--ui-box-bg, transparent);--ui-_color: var(--ui-box-color, inherit);--ui-_radius: var(--ui-box-radius, 0);padding:var(--ui-_padding);color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-box--p-1{--ui-_padding: var(--ui-space-1, 0.5rem)}.ui-box--p-2{--ui-_padding: var(--ui-space-2, 1rem)}.ui-box--p-3{--ui-_padding: var(--ui-space-3, 1.5rem)}.ui-box--p-4{--ui-_padding: var(--ui-space-4, 2rem)}.ui-box--bg-subtle{--ui-_bg: var(--ui-color-bg-subtle, hsl(220, 10%, 96%))}.ui-box--bg-muted{--ui-_bg: var(--ui-color-bg-muted, hsl(220, 10%, 90%))}.ui-box--rounded{--ui-_radius: var(--ui-radius-md, 0.5rem)}.ui-box--rounded-lg{--ui-_radius: var(--ui-radius-lg, 1rem)}}
-@layer primitives{.ui-stack{display:flex;flex-direction:column;gap:var(--ui-stack-gap, var(--ui-space-2))}.ui-stack--xs{--ui-stack-gap: var(--ui-space-1)}.ui-stack--sm{--ui-stack-gap: var(--ui-space-2)}.ui-stack--md{--ui-stack-gap: var(--ui-space-4)}.ui-stack--lg{--ui-stack-gap: var(--ui-space-6)}.ui-stack--xl{--ui-stack-gap: var(--ui-space-8)}}
+@layer primitives{.ui-center{display:flex;align-items:center;justify-content:center}.ui-center--column{flex-direction:column}}
 @layer primitives{.ui-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-cluster-gap, var(--ui-space-2))}.ui-cluster--xs{--ui-cluster-gap: var(--ui-space-1)}.ui-cluster--sm{--ui-cluster-gap: var(--ui-space-2)}.ui-cluster--md{--ui-cluster-gap: var(--ui-space-4)}.ui-cluster--lg{--ui-cluster-gap: var(--ui-space-6)}.ui-cluster--start{justify-content:flex-start}.ui-cluster--center{justify-content:center}.ui-cluster--end{justify-content:flex-end}.ui-cluster--between{justify-content:space-between}}
+@layer primitives{.ui-container{max-inline-size:var(--ui-container-width, calc(var(--ui-unit) * 120));padding-inline:var(--ui-space-4)}.ui-container--center{margin-inline:auto}.ui-container--sm{--ui-container-width: calc(var(--ui-unit) * 80)}.ui-container--md{--ui-container-width: calc(var(--ui-unit) * 100)}.ui-container--lg{--ui-container-width: calc(var(--ui-unit) * 120)}.ui-container--xl{--ui-container-width: calc(var(--ui-unit) * 160)}.ui-container--full{max-inline-size:none}}
+@layer primitives{.ui-content{--ui-_padding-block: var(--ui-content-padding-block, var(--ui-space-4));--ui-_padding-inline: var(--ui-content-padding-inline, var(--ui-space-4));--ui-_gap: var(--ui-content-gap, var(--ui-space-3));display:flex;flex-direction:column;gap:var(--ui-_gap);padding-block:var(--ui-_padding-block);padding-inline:var(--ui-_padding-inline)}.ui-content--prose{max-inline-size:calc(var(--ui-unit)*80)}.ui-content--flush{padding-block:0;padding-inline:0}}
 @layer primitives{.ui-flex{--ui-_gap: var(--ui-flex-gap, var(--ui-space-2, 1rem));--ui-_direction: var(--ui-flex-direction, row);--ui-_wrap: var(--ui-flex-wrap, nowrap);--ui-_align: var(--ui-flex-align, stretch);--ui-_justify: var(--ui-flex-justify, flex-start);display:flex;flex-direction:var(--ui-_direction);flex-wrap:var(--ui-_wrap);align-items:var(--ui-_align);justify-content:var(--ui-_justify);gap:var(--ui-_gap)}.ui-flex--row{--ui-_direction: row}.ui-flex--col{--ui-_direction: column}.ui-flex--row-reverse{--ui-_direction: row-reverse}.ui-flex--col-reverse{--ui-_direction: column-reverse}.ui-flex--wrap{--ui-_wrap: wrap}.ui-flex--nowrap{--ui-_wrap: nowrap}.ui-flex--items-start{--ui-_align: flex-start}.ui-flex--items-center{--ui-_align: center}.ui-flex--items-end{--ui-_align: flex-end}.ui-flex--items-baseline{--ui-_align: baseline}.ui-flex--justify-start{--ui-_justify: flex-start}.ui-flex--justify-center{--ui-_justify: center}.ui-flex--justify-end{--ui-_justify: flex-end}.ui-flex--justify-between{--ui-_justify: space-between}.ui-flex--justify-around{--ui-_justify: space-around}.ui-flex--gap-0{--ui-_gap: 0}.ui-flex--gap-1{--ui-_gap: var(--ui-space-1, 0.5rem)}.ui-flex--gap-2{--ui-_gap: var(--ui-space-2, 1rem)}.ui-flex--gap-3{--ui-_gap: var(--ui-space-3, 1.5rem)}.ui-flex--gap-4{--ui-_gap: var(--ui-space-4, 2rem)}}
-@layer primitives{.ui-center{display:flex;align-items:center;justify-content:center}.ui-center--column{flex-direction:column}}
+@layer primitives{.ui-footer{--ui-_height: var(--ui-footer-height, var(--ui-row-3));--ui-_bg: var(--ui-footer-bg, var(--ui-color-bg));--ui-_padding-inline: var(--ui-footer-padding-inline, var(--ui-space-3));--ui-_border-color: var(--ui-footer-border-color, var(--ui-color-border));--ui-_z: var(--ui-footer-z, var(--ui-z-sticky));display:flex;align-items:center;z-index:var(--ui-_z);block-size:var(--ui-_height);padding-inline:var(--ui-_padding-inline);background:var(--ui-_bg)}.ui-footer__start{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-space-2)}.ui-footer__center{display:flex;flex:1;align-items:center;justify-content:center;gap:var(--ui-space-2)}.ui-footer__end{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-space-2)}.ui-footer--sticky{position:sticky;inset-block-end:0}.ui-footer--fixed{position:fixed;inset-block-end:0;inset-inline:0}.ui-footer--bordered{box-shadow:inset 0 var(--ui-border-width-sm) 0 0 var(--ui-_border-color)}.ui-footer--raised{box-shadow:0 calc(var(--ui-border-width-sm)*-1) 6px hsl(var(--ui-hue-primary, 220), 10%, 20%, 0.08)}}
 @layer primitives{.ui-grid{display:grid;gap:var(--ui-grid-gap, var(--ui-space-4));grid-template-columns:repeat(var(--ui-grid-cols, 1), minmax(0, 1fr))}.ui-grid--2{--ui-grid-cols: 2}.ui-grid--3{--ui-grid-cols: 3}.ui-grid--4{--ui-grid-cols: 4}.ui-grid--auto{grid-template-columns:repeat(auto-fit, minmax(var(--ui-grid-min, 16rem), 1fr))}}
-@layer primitives{.ui-app-shell{min-block-size:100vh}}
-@layer primitives{.ui-sidebar{display:flex;flex-direction:column;position:fixed;inset-block-start:0;inset-inline-start:0;z-index:var(--ui-z-sticky);block-size:100vh;inline-size:var(--ui-sidebar-width, calc(var(--ui-unit) * 30));overflow-y:auto;background:var(--ui-color-bg-subtle);box-shadow:inset calc(var(--ui-border-width-sm)*-1) 0 0 0 var(--ui-color-border)}.ui-sidebar--sm{--ui-sidebar-width: calc(var(--ui-unit) * 24)}.ui-sidebar--md{--ui-sidebar-width: calc(var(--ui-unit) * 30)}.ui-sidebar--lg{--ui-sidebar-width: calc(var(--ui-unit) * 40)}.ui-sidebar--end{inset-inline-start:auto;inset-inline-end:0;box-shadow:inset var(--ui-border-width-sm) 0 0 0 var(--ui-color-border)}}
+@layer primitives{.ui-main{padding-block-start:var(--ui-topbar-height, 0);margin-inline-start:var(--ui-sidebar-width, calc(var(--ui-unit) * 30))}.ui-main--sidebar-end{margin-inline-start:0;margin-inline-end:var(--ui-sidebar-width, calc(var(--ui-unit) * 30))}.ui-main--full{margin-inline-start:0;margin-inline-end:0}}
+@layer primitives{.ui-nav-rail{--ui-_width: var(--ui-nav-rail-width, var(--ui-row-4));--ui-_bg: var(--ui-nav-rail-bg, var(--ui-color-bg-subtle));--ui-_border-color: var(--ui-nav-rail-border-color, var(--ui-color-border));--ui-_gap: var(--ui-nav-rail-gap, var(--ui-space-1));--ui-_z: var(--ui-nav-rail-z, var(--ui-z-sticky));display:flex;flex-direction:column;align-items:center;position:fixed;inset-block:var(--ui-topbar-height, 0);inset-inline-start:0;z-index:var(--ui-_z);inline-size:var(--ui-_width);padding-block:var(--ui-space-2);background:var(--ui-_bg);box-shadow:inset calc(var(--ui-border-width-sm)*-1) 0 0 0 var(--ui-_border-color)}.ui-nav-rail__items{display:flex;flex:1;flex-direction:column;align-items:center;gap:var(--ui-_gap)}.ui-nav-rail__actions{display:flex;flex-direction:column;align-items:center;gap:var(--ui-_gap);margin-block-start:auto}.ui-nav-rail--end{inset-inline-start:auto;inset-inline-end:0;box-shadow:inset var(--ui-border-width-sm) 0 0 0 var(--ui-_border-color)}}
+@layer primitives{.ui-page-header{--ui-_padding-block: var(--ui-page-header-padding-block, var(--ui-space-3));--ui-_padding-inline: var(--ui-page-header-padding-inline, 0);--ui-_gap: var(--ui-page-header-gap, var(--ui-space-2));--ui-_border-color: var(--ui-page-header-border-color, var(--ui-color-border));display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-_gap);padding-block:var(--ui-_padding-block);padding-inline:var(--ui-_padding-inline);line-height:var(--ui-body-line-height)}.ui-page-header__title{display:flex;flex:1;flex-direction:column;gap:var(--ui-space-1)}.ui-page-header__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-space-2)}.ui-page-header__breadcrumb{flex-basis:100%}.ui-page-header--bordered{box-shadow:inset 0 calc(var(--ui-border-width-sm)*-1) 0 0 var(--ui-_border-color)}.ui-page-header--sticky{position:sticky;inset-block-start:0;z-index:var(--ui-z-sticky);background:var(--ui-color-bg)}}
+@layer primitives{.ui-sidebar{display:flex;flex-direction:column;position:fixed;inset-block-start:var(--ui-topbar-height, 0);inset-inline-start:0;z-index:var(--ui-z-sticky);block-size:calc(100vh - var(--ui-topbar-height, 0px));inline-size:var(--ui-sidebar-width, calc(var(--ui-unit) * 30));overflow-y:auto;background:var(--ui-color-bg-subtle);box-shadow:inset calc(var(--ui-border-width-sm)*-1) 0 0 0 var(--ui-color-border)}.ui-sidebar--sm{--ui-sidebar-width: calc(var(--ui-unit) * 24)}.ui-sidebar--md{--ui-sidebar-width: calc(var(--ui-unit) * 30)}.ui-sidebar--lg{--ui-sidebar-width: calc(var(--ui-unit) * 40)}.ui-sidebar--end{inset-inline-start:auto;inset-inline-end:0;box-shadow:inset var(--ui-border-width-sm) 0 0 0 var(--ui-color-border)}}
 @layer primitives{.ui-sidebar-nav{--ui-_width: var(--ui-sidebar-nav-width, calc(var(--ui-unit) * 30));--ui-_bg: var(--ui-sidebar-nav-bg, var(--ui-color-bg-subtle));--ui-_border-color: var(--ui-sidebar-nav-border-color, var(--ui-color-border));--ui-_padding: var(--ui-sidebar-nav-padding, var(--ui-space-2));display:flex;flex-direction:column;block-size:100%;inline-size:var(--ui-_width);background:var(--ui-_bg)}.ui-sidebar-nav__header{--ui-_padding: var(--ui-sidebar-nav-header-padding, var(--ui-space-2));flex-shrink:0;padding:var(--ui-_padding);box-shadow:inset 0 calc(var(--ui-border-width-sm)*-1) 0 0 var(--ui-_border-color)}.ui-sidebar-nav__content{flex:1;padding:var(--ui-_padding);overflow-y:auto}.ui-sidebar-nav__footer{--ui-_padding: var(--ui-sidebar-nav-footer-padding, var(--ui-space-2));flex-shrink:0;padding:var(--ui-_padding);box-shadow:inset 0 var(--ui-border-width-sm) 0 0 var(--ui-_border-color)}.ui-sidebar-nav__group{margin-block-end:var(--ui-space-2)}.ui-sidebar-nav__group-label{--ui-_font-size: var(--ui-sidebar-nav-group-label-size, var(--ui-size-xs));--ui-_color: var(--ui-sidebar-nav-group-label-color, var(--ui-color-text-muted));--ui-_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-weight-bold));display:block;padding:var(--ui-space-1) var(--ui-space-2);margin:0;font-size:var(--ui-_font-size);font-weight:var(--ui-_weight);letter-spacing:.05em;text-transform:uppercase;color:var(--ui-_color)}.ui-sidebar-nav__group-items{display:flex;flex-direction:column;gap:var(--ui-space-half);padding:0;margin:0;list-style:none}.ui-sidebar-nav__subgroup-label{display:block;padding:var(--ui-space-1) var(--ui-space-2);margin:0;margin-block-start:var(--ui-space-1);font-size:var(--ui-size-xs);font-weight:var(--ui-weight-medium);color:var(--ui-color-text-muted)}.ui-sidebar-nav__item{--ui-_height: var(--ui-sidebar-nav-item-height, var(--ui-row-2));--ui-_padding-inline: var(--ui-sidebar-nav-item-padding-inline, var(--ui-space-2));--ui-_font-size: var(--ui-sidebar-nav-item-size, var(--ui-size-sm));--ui-_color: var(--ui-sidebar-nav-item-color, var(--ui-color-text));--ui-_bg: var(--ui-sidebar-nav-item-bg, transparent);--ui-_radius: var(--ui-sidebar-nav-item-radius, var(--ui-radius-sm));display:flex;align-items:center;gap:var(--ui-space-1);min-block-size:var(--ui-_height);padding-inline:var(--ui-_padding-inline);font-size:var(--ui-_font-size);font-weight:var(--ui-_weight, normal);text-decoration:none;color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius);cursor:pointer;transition:background var(--ui-duration-fast) var(--ui-easing-default),color var(--ui-duration-fast) var(--ui-easing-default)}.ui-sidebar-nav__item:hover{--ui-_bg: var(--ui-sidebar-nav-item-hover-bg, var(--ui-color-bg-muted))}.ui-sidebar-nav__item:visited{color:var(--ui-_color)}.ui-sidebar-nav__item:focus-visible{outline:2px solid var(--ui-color-focus);outline-offset:-2px}.ui-sidebar-nav__item--active{--ui-_bg: var(--ui-sidebar-nav-item-active-bg, var(--ui-color-primary-subtle));--ui-_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary-hover));--ui-_weight: var(--ui-sidebar-nav-item-active-weight, var(--ui-weight-medium))}.ui-sidebar-nav__item--nested{--ui-_padding-inline-start: var(--ui-sidebar-nav-item-nested-indent, var(--ui-space-4));padding-inline-start:var(--ui-_padding-inline-start)}.ui-sidebar-nav__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ui-sidebar-nav__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--ui-size-md);inline-size:var(--ui-size-md)}.ui-sidebar-nav__label{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-sidebar-nav__badge{flex-shrink:0;margin-inline-start:auto}.ui-sidebar-nav--collapsed{--ui-_width: var(--ui-sidebar-nav-width-collapsed, var(--ui-row-3))}.ui-sidebar-nav--collapsed .ui-sidebar-nav__label,.ui-sidebar-nav--collapsed .ui-sidebar-nav__badge,.ui-sidebar-nav--collapsed .ui-sidebar-nav__group-label,.ui-sidebar-nav--collapsed .ui-sidebar-nav__subgroup-label{display:none}.ui-sidebar-nav--collapsed .ui-sidebar-nav__item{justify-content:center;padding-inline:var(--ui-space-1)}}
-@layer primitives{.ui-main{margin-inline-start:var(--ui-sidebar-width, calc(var(--ui-unit) * 30))}.ui-main--sidebar-end{margin-inline-start:0;margin-inline-end:var(--ui-sidebar-width, calc(var(--ui-unit) * 30))}.ui-main--full{margin-inline-start:0;margin-inline-end:0}}
-@layer primitives{.ui-container{max-inline-size:var(--ui-container-width, calc(var(--ui-unit) * 120));padding-inline:var(--ui-space-4)}.ui-container--center{margin-inline:auto}.ui-container--sm{--ui-container-width: calc(var(--ui-unit) * 80)}.ui-container--md{--ui-container-width: calc(var(--ui-unit) * 100)}.ui-container--lg{--ui-container-width: calc(var(--ui-unit) * 120)}.ui-container--xl{--ui-container-width: calc(var(--ui-unit) * 160)}.ui-container--full{max-inline-size:none}}
-@layer primitives{.ui-aspect-ratio{aspect-ratio:var(--ui-aspect-ratio, 1/1);overflow:hidden}.ui-aspect-ratio>img,.ui-aspect-ratio>video,.ui-aspect-ratio>iframe{block-size:100%;inline-size:100%;object-fit:cover}.ui-aspect-ratio--square{--ui-aspect-ratio: 1 / 1}.ui-aspect-ratio--video{--ui-aspect-ratio: 16 / 9}.ui-aspect-ratio--photo{--ui-aspect-ratio: 4 / 3}.ui-aspect-ratio--wide{--ui-aspect-ratio: 21 / 9}.ui-aspect-ratio--portrait{--ui-aspect-ratio: 3 / 4}}
+@layer primitives{.ui-stack{display:flex;flex-direction:column;gap:var(--ui-stack-gap, var(--ui-space-2))}.ui-stack--xs{--ui-stack-gap: var(--ui-space-1)}.ui-stack--sm{--ui-stack-gap: var(--ui-space-2)}.ui-stack--md{--ui-stack-gap: var(--ui-space-4)}.ui-stack--lg{--ui-stack-gap: var(--ui-space-6)}.ui-stack--xl{--ui-stack-gap: var(--ui-space-8)}}
+@layer primitives{.ui-topbar{--ui-_height: var(--ui-topbar-height, var(--ui-row-3));--ui-_bg: var(--ui-topbar-bg, var(--ui-color-bg));--ui-_padding-inline: var(--ui-topbar-padding-inline, var(--ui-space-3));--ui-_border-color: var(--ui-topbar-border-color, var(--ui-color-border));--ui-_z: var(--ui-topbar-z, var(--ui-z-sticky));display:flex;align-items:center;z-index:var(--ui-_z);block-size:var(--ui-_height);padding-inline:var(--ui-_padding-inline);background:var(--ui-_bg)}.ui-topbar__start{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-space-2)}.ui-topbar__center{display:flex;flex:1;align-items:center;justify-content:center;gap:var(--ui-space-2)}.ui-topbar__end{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-space-2)}.ui-topbar--sticky{position:sticky;inset-block-start:0}.ui-topbar--fixed{position:fixed;inset-block-start:0;inset-inline:0}.ui-topbar--bordered{box-shadow:inset 0 calc(var(--ui-border-width-sm)*-1) 0 0 var(--ui-_border-color)}.ui-topbar--raised{box-shadow:var(--ui-shadow-sm)}}
 @layer components.tokens{.ui-button{--ui-_accent: var(--ui-button-accent, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_height: var(--ui-button-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-button-padding-x, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-button-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_font-weight: var(--ui-button-font-weight, var(--ui-weight-medium, 500));--ui-_radius: var(--ui-button-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-_accent);--ui-_bg-hover: color-mix(in oklch, var(--ui-_accent) 80%, black);--ui-_text: var(--ui-button-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.ui-button--sm{--ui-ctx-size: var(--ui-size-sm, 0.75rem);--ui-_height: var(--ui-button-height-sm, calc(var(--ui-row, 1rem) * 1.5));--ui-_font-size: var(--ui-button-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-button--md{--ui-ctx-size: var(--ui-size-md, 1rem);--ui-_height: var(--ui-button-height-md, var(--ui-row-2, 2rem));--ui-_font-size: var(--ui-button-font-size-md, var(--ui-font-size-sm, 0.875rem))}.ui-button--lg{--ui-ctx-size: var(--ui-size-lg, 1.25rem);--ui-_height: var(--ui-button-height-lg, calc(var(--ui-row, 1rem) * 2.5));--ui-_padding-x: var(--ui-button-padding-x-lg, var(--ui-space-3, 1.5rem));--ui-_font-size: var(--ui-button-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-button--secondary{--ui-_bg: var(--ui-color-bg-muted, hsl(220, 10%, 90%));--ui-_bg-hover: var(--ui-color-border-strong, hsl(220, 10%, 80%));--ui-_text: var(--ui-color-text, hsl(220, 10%, 10%))}.ui-button--ghost{--ui-_bg: transparent;--ui-_bg-hover: color-mix(in oklch, var(--ui-_accent) 10%, transparent);--ui-_text: var(--ui-_accent)}.ui-button--outline{--ui-_bg: transparent;--ui-_bg-hover: var(--ui-_accent);--ui-_text: var(--ui-_accent);--ui-_text-hover: var(--ui-color-text-inverse, hsl(220, 10%, 98%));--ui-_border: var(--ui-border-width-sm, 0.0625rem) solid currentColor}.ui-button--danger{--ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg))}.ui-button--link{--ui-_bg: transparent;--ui-_bg-hover: transparent;--ui-_text: var(--ui-_accent);--ui-_text-hover: color-mix(in oklch, var(--ui-_accent) 70%, black);--ui-_height: auto;--ui-_padding-x: 0;--ui-_radius: 0}.ui-button--icon{--ui-_padding-x: 0}.ui-button--radius-none{--ui-_radius: 0}.ui-button--radius-sm{--ui-_radius: var(--ui-radius-sm, 0.25rem)}.ui-button--radius-lg{--ui-_radius: var(--ui-radius-lg, 1rem)}.ui-button--radius-full{--ui-_radius: 624.9375rem}}
 @layer components.styles{.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-1, 0.5rem);block-size:var(--ui-_height);padding-inline:var(--ui-_padding-x);margin:0;font-family:var(--ui-font-sans, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);font-size:var(--ui-_font-size);font-weight:var(--ui-_font-weight);line-height:1;text-decoration:none;white-space:nowrap;color:var(--ui-_text);background:var(--ui-_bg);border:var(--ui-_border, none);border-radius:var(--ui-_radius);cursor:pointer;transition:background-color var(--ui-duration-base) var(--ui-ease-default),color var(--ui-duration-base) var(--ui-ease-default),transform var(--ui-duration-fast) var(--ui-ease-default)}.ui-button:hover,.ui-button--hover{color:var(--ui-_text-hover, var(--ui-_text));background:var(--ui-_bg-hover)}.ui-button:focus-visible,.ui-button--focus{outline:var(--ui-border-width-md, 0.125rem) solid var(--ui-color-focus, oklch(75% 0.15 250deg));outline-offset:var(--ui-border-width-md, 0.125rem)}.ui-button:active,.ui-button--active{transform:scale(0.98)}.ui-button:disabled{opacity:.5;cursor:not-allowed}.ui-button:disabled:hover{background:var(--ui-_bg);transform:none}.ui-button--icon{inline-size:var(--ui-_height)}.ui-button--block{inline-size:100%}.ui-button--link{text-decoration:underline;text-underline-offset:var(--ui-space-quarter)}.ui-button--link:hover{text-decoration-thickness:var(--ui-space-quarter)}.ui-button__icon{flex-shrink:0;block-size:1em;inline-size:1em}.ui-button__icon--start{order:-1}.ui-button__icon--end{order:1}.ui-button--loading{position:relative;opacity:.7;pointer-events:none}.ui-button--loading::after{content:"";position:absolute;block-size:1em;inline-size:1em;border:2px solid currentcolor;border-radius:50%;animation:button-spin .6s linear infinite;border-inline-end-color:rgba(0,0,0,0)}@keyframes button-spin{to{transform:rotate(360deg)}}}
 @layer components.tokens{.ui-button-group{--ui-_radius: var(--ui-button-group-radius, var(--ui-radius-md, calc(0.5rem / 2)))}}
@@ -41,12 +46,12 @@
 @layer components.styles{.ui-data-list{display:flex;flex-direction:column;gap:var(--ui-_gap);margin:0;line-height:var(--ui-row-1, 1rem)}.ui-data-list__item{display:flex;flex-direction:column;gap:var(--ui-_item-gap)}.ui-data-list__label{font-size:var(--ui-font-size-sm, 0.875rem);font-weight:var(--ui-weight-medium, 500);line-height:var(--ui-row-1, 1rem);color:var(--ui-_label-color)}.ui-data-list__value{margin:0;line-height:var(--ui-row-1, 1rem);color:var(--ui-_value-color)}.ui-data-list--horizontal .ui-data-list__item{flex-direction:row;align-items:baseline;justify-content:space-between;gap:calc(0.5rem*2)}.ui-data-list--horizontal .ui-data-list__label{flex-shrink:0}.ui-data-list--horizontal .ui-data-list__value{text-align:end}.ui-data-list--divided .ui-data-list__item{padding-block-end:calc(var(--ui-_gap) - var(--ui-border-width-sm, 0.0625rem));border-block-end:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-border, hsl(220, 10%, 90%))}.ui-data-list--divided .ui-data-list__item:last-child{padding-block-end:0;border-block-end:none}.ui-data-list--striped .ui-data-list__item:nth-child(odd){padding:calc(0.5rem*1);background:var(--ui-color-bg-subtle, hsl(220, 10%, 96%));border-radius:var(--ui-radius-sm, 0.25rem)}.ui-data-list--sm{--ui-_gap: calc(0.5rem * 1);--ui-_item-gap: 0;font-size:var(--ui-font-size-sm, 0.875rem)}.ui-data-list--lg{--ui-_gap: calc(0.5rem * 3);--ui-_item-gap: calc(0.5rem * 1);font-size:var(--ui-font-size-lg, 1.25rem)}}
 @layer components.tokens{.ui-icon{--ui-_size: var(--ui-icon-size, var(--ui-ctx-size, 1rem));--ui-_stroke: var(--ui-icon-stroke, 2)}.ui-icon--xs{--ui-_size: var(--ui-icon-size-xs, var(--ui-size-xs, 0.5rem))}.ui-icon--sm{--ui-_size: var(--ui-icon-size-sm, var(--ui-size-sm, 0.75rem))}.ui-icon--md{--ui-_size: var(--ui-icon-size-md, var(--ui-size-md, 1rem))}.ui-icon--lg{--ui-_size: var(--ui-icon-size-lg, var(--ui-size-lg, 1.25rem))}.ui-icon--xl{--ui-_size: var(--ui-icon-size-xl, var(--ui-size-xl, 1.5rem))}.ui-icon--stroke-thin{--ui-_stroke: var(--ui-icon-stroke-thin, 1)}.ui-icon--stroke-thick{--ui-_stroke: var(--ui-icon-stroke-thick, 2.5)}}
 @layer components.styles{.ui-icon{display:inline-block;flex-shrink:0;block-size:var(--ui-_size);inline-size:var(--ui-_size);vertical-align:middle;color:currentcolor;fill:none;stroke:currentcolor;stroke-width:var(--ui-_stroke);stroke-linecap:round;stroke-linejoin:round}.ui-icon--filled{fill:currentcolor;stroke:none}.ui-icon--spin{animation:icon-spin 1s linear infinite}@keyframes icon-spin{to{transform:rotate(360deg)}}}
+@layer components.tokens{.ui-stat{--ui-_gap: var(--ui-stat-gap, var(--ui-space-1, 0.5rem))}.ui-stat__value{--ui-_font-size: var(--ui-stat-value-font-size, var(--ui-font-size-3xl, 2rem));--ui-_font-weight: var(--ui-stat-value-font-weight, var(--ui-weight-bold, 700));--ui-_line-height: var(--ui-stat-value-line-height, var(--ui-leading-3xl, 2.5rem));--ui-_color: var(--ui-stat-value-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-stat__label{--ui-_font-size: var(--ui-stat-label-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_color: var(--ui-stat-label-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_line-height: var(--ui-stat-label-line-height, var(--ui-leading-sm, 1.5rem))}.ui-stat--sm .ui-stat__value{--ui-_font-size: var(--ui-font-size-xl, 1.5rem);--ui-_line-height: var(--ui-leading-xl, 2rem)}}
+@layer components.styles{.ui-stat{display:flex;flex-direction:column;gap:var(--ui-_gap)}.ui-stat__value{font-size:var(--ui-_font-size);font-weight:var(--ui-_font-weight);line-height:var(--ui-_line-height);letter-spacing:var(--ui-tracking-display, -0.02em);color:var(--ui-_color)}.ui-stat__label{font-size:var(--ui-_font-size);line-height:var(--ui-_line-height);color:var(--ui-_color)}}
 @layer components.tokens{.ui-status{--ui-_size: var(--ui-status-size, calc(0.5rem * 1));--ui-_color: var(--ui-status-color, var(--ui-color-text-muted));--ui-_gap: var(--ui-status-gap, calc(0.5rem * 1))}.ui-status--success{--ui-_color: var(--ui-color-success)}.ui-status--warning{--ui-_color: var(--ui-color-warning)}.ui-status--danger{--ui-_color: var(--ui-color-danger)}.ui-status--info{--ui-_color: var(--ui-color-primary)}}
 @layer components.styles{.ui-status{display:inline-flex;align-items:center;gap:var(--ui-_gap)}.ui-status__dot{flex-shrink:0;block-size:var(--ui-_size);inline-size:var(--ui-_size);background:var(--ui-_color);border-radius:50%}.ui-status--pulse .ui-status__dot{position:relative}.ui-status--pulse .ui-status__dot::before{content:"";position:absolute;inset:0;background:var(--ui-_color);border-radius:50%;animation:status-pulse 2s infinite}@keyframes status-pulse{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.5)}}.ui-status--sm{--ui-_size: calc(0.5rem * 0.75);--ui-_gap: calc(0.5rem * 0.75)}.ui-status--lg{--ui-_size: calc(0.5rem * 1.5);--ui-_gap: calc(0.5rem * 1.5)}}
 @layer components.tokens{.ui-table{--ui-_font-size: var(--ui-table-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_border-color: var(--ui-table-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_header-bg: var(--ui-table-header-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--ui-_cell-padding-x: var(--ui-table-cell-padding-x, var(--ui-space-2, 1rem));--ui-_cell-padding-y: var(--ui-table-cell-padding-y, var(--ui-space-1, 0.5rem))}.ui-table--compact{--ui-_cell-padding-y: var(--ui-space-0, 0.25rem);--ui-_cell-padding-x: var(--ui-space-1, 0.5rem);--ui-_font-size: var(--ui-font-size-xs, 0.75rem)}}
 @layer components.styles{.ui-table{inline-size:100%;font-size:var(--ui-_font-size);border-collapse:separate;border-spacing:0}.ui-table th,.ui-table td{padding-block-start:var(--ui-_cell-padding-y);padding-block-end:calc(var(--ui-_cell-padding-y) - var(--ui-border-width-sm, 0.0625rem));padding-inline:var(--ui-_cell-padding-x);line-height:calc(var(--ui-unit, 0.5rem)*3);text-align:start;border-block-end:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color)}.ui-table th{font-weight:var(--ui-weight-medium, 500);background:var(--ui-_header-bg)}.ui-table--striped tbody tr:nth-child(odd){background:var(--ui-color-bg-subtle, hsl(220, 10%, 96%))}.ui-table--striped th{background:var(--ui-color-bg-muted, hsl(220, 10%, 90%))}}
-@layer components.tokens{.ui-stat{--ui-_gap: var(--ui-stat-gap, var(--ui-space-1, 0.5rem))}.ui-stat__value{--ui-_font-size: var(--ui-stat-value-font-size, var(--ui-font-size-3xl, 2rem));--ui-_font-weight: var(--ui-stat-value-font-weight, var(--ui-weight-bold, 700));--ui-_line-height: var(--ui-stat-value-line-height, var(--ui-leading-3xl, 2.5rem));--ui-_color: var(--ui-stat-value-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-stat__label{--ui-_font-size: var(--ui-stat-label-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_color: var(--ui-stat-label-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_line-height: var(--ui-stat-label-line-height, var(--ui-leading-sm, 1.5rem))}.ui-stat--sm .ui-stat__value{--ui-_font-size: var(--ui-font-size-xl, 1.5rem);--ui-_line-height: var(--ui-leading-xl, 2rem)}}
-@layer components.styles{.ui-stat{display:flex;flex-direction:column;gap:var(--ui-_gap)}.ui-stat__value{font-size:var(--ui-_font-size);font-weight:var(--ui-_font-weight);line-height:var(--ui-_line-height);letter-spacing:var(--ui-tracking-display, -0.02em);color:var(--ui-_color)}.ui-stat__label{font-size:var(--ui-_font-size);line-height:var(--ui-_line-height);color:var(--ui-_color)}}
 @layer components.tokens{.ui-tag{--ui-_height: var(--ui-tag-height, calc(0.5rem * 3));--ui-_padding-x: var(--ui-tag-padding-x, var(--ui-space-1, 0.5rem));--ui-_gap: var(--ui-tag-gap, calc(0.5rem * 0.5));--ui-_radius: var(--ui-tag-radius, var(--ui-radius-full, 9999px));--ui-_font-size: var(--ui-tag-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_bg: var(--ui-tag-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_color: var(--ui-tag-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-tag--sm{--ui-_height: var(--ui-tag-height-sm, calc(0.5rem * 2.5));--ui-_padding-x: var(--ui-tag-padding-x-sm, calc(0.5rem * 1));--ui-_font-size: var(--ui-tag-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-tag--primary{--ui-_bg: var(--ui-tag-primary-bg, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_color: var(--ui-tag-primary-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.ui-tag--success{--ui-_bg: var(--ui-tag-success-bg, var(--ui-color-success, oklch(60% 0.18 145deg)));--ui-_color: var(--ui-tag-success-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.ui-tag--warning{--ui-_bg: var(--ui-tag-warning-bg, var(--ui-color-warning, oklch(75% 0.18 70deg)));--ui-_color: var(--ui-tag-warning-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-tag--danger{--ui-_bg: var(--ui-tag-danger-bg, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_color: var(--ui-tag-danger-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}}
 @layer components.styles{.ui-tag{display:inline-flex;align-items:center;gap:var(--ui-_gap);block-size:var(--ui-_height);padding-inline:var(--ui-_padding-x);font-size:var(--ui-_font-size);font-weight:var(--ui-weight-medium, 500);line-height:1;white-space:nowrap;color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-tag:disabled,.ui-tag[aria-disabled=true]{opacity:.5;cursor:not-allowed}.ui-tag__remove{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;margin-inline-start:calc(var(--ui-_gap)*-0.5);color:currentcolor;background:none;border:none;opacity:.7;cursor:pointer}.ui-tag__remove:hover{opacity:1}.ui-tag-group{display:flex;flex-wrap:wrap;gap:calc(0.5rem*.5)}}
 @layer components.tokens{.ui-accordion{--ui-_border-color: var(--ui-accordion-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));--ui-_border-width: var(--ui-accordion-border-width, 1px);--ui-_radius: var(--ui-accordion-radius, var(--ui-radius-md, calc(0.5rem * 1)))}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teseor/css",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "CSS library - reset, primitives, components, utilities",
   "license": "MIT",
   "author": "letanure",

package/src/03-layout/app-shell/app-shell.api.json

@@ -3,6 +3,15 @@
   "element": "body",
   "modifiers": {},
   "relatedComponents": [
+    {
+      "name": "topbar",
+      "modifiers": {
+        "sticky": { "type": "boolean" },
+        "fixed": { "type": "boolean" },
+        "bordered": { "type": "boolean" },
+        "raised": { "type": "boolean" }
+      }
+    },
     {
       "name": "sidebar",
       "modifiers": {
@@ -20,6 +29,15 @@
       "modifiers": {
         "center": { "type": "boolean" }
       }
+    },
+    {
+      "name": "footer",
+      "modifiers": {
+        "sticky": { "type": "boolean" },
+        "fixed": { "type": "boolean" },
+        "bordered": { "type": "boolean" },
+        "raised": { "type": "boolean" }
+      }
     }
   ],
   "cssVars": []

package/src/03-layout/app-shell/app-shell.docs.json

@@ -14,6 +14,15 @@
         }
       ]
     },
+    {
+      "title": "With Topbar",
+      "description": "Add a fixed topbar by setting --topbar-height on app-shell. Sidebar and main offset automatically.",
+      "examples": [
+        {
+          "code": "<body class=\"ui-app-shell\" style=\"--topbar-height: var(--ui-row-3)\">\n  <header class=\"ui-topbar ui-topbar--fixed ui-topbar--bordered\">\n    <div class=\"ui-topbar__start\"><strong>App</strong></div>\n    <div class=\"ui-topbar__end\">User</div>\n  </header>\n  <aside class=\"ui-sidebar\">Sidebar</aside>\n  <main class=\"ui-main\">\n    <div class=\"ui-container\">Content</div>\n  </main>\n</body>"
+        }
+      ]
+    },
     {
       "title": "Sidebar Widths",
       "examples": [
@@ -107,6 +116,15 @@
         }
       ]
     },
+    {
+      "title": "With Footer",
+      "description": "Place footer inside the content area, after the container.",
+      "examples": [
+        {
+          "code": "<body class=\"ui-app-shell\">\n  <main class=\"ui-main ui-main--full\">\n    <div class=\"ui-container\">Content</div>\n    <footer class=\"ui-footer ui-footer--bordered\">\n      <div class=\"ui-footer__start\"><small>Brand</small></div>\n      <div class=\"ui-footer__end\"><small>v1.0.0</small></div>\n    </footer>\n  </main>\n</body>"
+        }
+      ]
+    },
     {
       "title": "Centered Container",
       "examples": [

package/src/03-layout/content/content.api.json

@@ -0,0 +1,26 @@
+{
+  "name": "content",
+  "element": "div",
+  "modifiers": {
+    "prose": {
+      "type": "boolean"
+    },
+    "flush": {
+      "type": "boolean"
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-content-padding-block",
+      "default": "var(--ui-space-4)"
+    },
+    {
+      "name": "--ui-content-padding-inline",
+      "default": "var(--ui-space-4)"
+    },
+    {
+      "name": "--ui-content-gap",
+      "default": "var(--ui-space-3)"
+    }
+  ]
+}

package/src/03-layout/content/content.docs.json

@@ -0,0 +1,82 @@
+{
+  "id": "content",
+  "type": "primitive",
+  "title": "Content",
+  "description": "Content wrapper with consistent vertical spacing. Use inside container for padded, spaced content areas.",
+  "api": "./content.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "description": "Vertical flex layout with gap between children and block/inline padding.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-content",
+              "style": "background: var(--ui-color-bg-subtle)",
+              "children": [
+                { "tag": "p", "text": "First section of content with consistent spacing." },
+                { "tag": "p", "text": "Second section automatically spaced by the gap token." },
+                { "tag": "p", "text": "Third section follows the same rhythm." }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Prose",
+      "description": "Narrower max-width for readable long-form text (640px / 80 units).",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-content ui-content--prose",
+              "style": "background: var(--ui-color-bg-subtle)",
+              "children": [
+                {
+                  "tag": "p",
+                  "text": "Prose content is constrained to a comfortable reading width. Long paragraphs stay readable without requiring the eye to travel too far across the screen."
+                },
+                {
+                  "tag": "p",
+                  "text": "This works well for articles, documentation, and form layouts."
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Flush",
+      "description": "No padding, only gap between children. Useful when the parent handles padding.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-content ui-content--flush",
+              "style": "background: var(--ui-color-bg-subtle)",
+              "children": [
+                { "tag": "p", "text": "Flush content has no padding." },
+                { "tag": "p", "text": "Gap between children is preserved." }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "With Container",
+      "description": "Content inside a centered container for a typical page layout.",
+      "examples": [
+        {
+          "code": "<div class=\"ui-container ui-container--center\">\n  <div class=\"ui-content\">\n    <h2 class=\"ui-heading ui-heading--3\">Page Title</h2>\n    <p>Content with consistent spacing and max-width.</p>\n  </div>\n</div>"
+        }
+      ]
+    }
+  ]
+}

package/src/03-layout/content/content.visual.spec.ts

@@ -0,0 +1,14 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+
+const DOCS_PATH = resolve(__dirname, 'content.docs.json');
+
+test.describe('content visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'content');
+    await saveForLostPixel(page, 'content');
+    await expect(page.locator('body')).toHaveScreenshot('content.visual.png');
+  });
+});

package/src/03-layout/content/index.scss

@@ -0,0 +1,25 @@
+@layer primitives {
+  .content {
+    --_padding-block: var(--ui-content-padding-block, var(--ui-space-4));
+    --_padding-inline: var(--ui-content-padding-inline, var(--ui-space-4));
+    --_gap: var(--ui-content-gap, var(--ui-space-3));
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--_gap);
+
+    padding-block: var(--_padding-block);
+    padding-inline: var(--_padding-inline);
+  }
+
+  // Prose-friendly: narrower max-width for readability
+  .content--prose {
+    max-inline-size: calc(var(--unit) * 80);
+  }
+
+  // Flush: no padding, just gap
+  .content--flush {
+    padding-block: 0;
+    padding-inline: 0;
+  }
+}

package/src/03-layout/footer/footer.api.json

@@ -0,0 +1,45 @@
+{
+  "name": "footer",
+  "element": "footer",
+  "modifiers": {
+    "sticky": {
+      "type": "boolean"
+    },
+    "fixed": {
+      "type": "boolean"
+    },
+    "bordered": {
+      "type": "boolean"
+    },
+    "raised": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "start": {},
+    "center": {},
+    "end": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-footer-height",
+      "default": "var(--ui-row-3)"
+    },
+    {
+      "name": "--ui-footer-bg",
+      "default": "var(--ui-color-bg)"
+    },
+    {
+      "name": "--ui-footer-padding-inline",
+      "default": "var(--ui-space-3)"
+    },
+    {
+      "name": "--ui-footer-border-color",
+      "default": "var(--ui-color-border)"
+    },
+    {
+      "name": "--ui-footer-z",
+      "default": "var(--ui-z-sticky)"
+    }
+  ]
+}

package/src/03-layout/footer/footer.docs.json

@@ -0,0 +1,110 @@
+{
+  "id": "footer",
+  "type": "primitive",
+  "title": "Footer",
+  "description": "Page footer with start, center, and end sections. Supports sticky/fixed positioning and border/shadow variants.",
+  "api": "./footer.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "description": "Basic footer with three sections.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "footer",
+              "class": "ui-footer ui-footer--bordered",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-footer__start",
+                  "children": [{ "tag": "small", "text": "2026 Brand" }]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-footer__center",
+                  "children": [{ "tag": "span", "text": "Footer links" }]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-footer__end",
+                  "children": [{ "tag": "small", "text": "v1.0.0" }]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Sticky",
+      "description": "Stays at the bottom of the viewport on scroll.",
+      "examples": [
+        {
+          "code": "<footer class=\"ui-footer ui-footer--sticky ui-footer--bordered\">\n  <div class=\"ui-footer__start\"><small>Brand</small></div>\n  <div class=\"ui-footer__center\">Links</div>\n  <div class=\"ui-footer__end\"><small>v1.0.0</small></div>\n</footer>"
+        }
+      ]
+    },
+    {
+      "title": "Bordered",
+      "description": "Top border via inset box-shadow to preserve grid rhythm.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "footer",
+              "class": "ui-footer ui-footer--bordered",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-footer__start",
+                  "children": [{ "tag": "small", "text": "Bordered footer" }]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-footer__end",
+                  "children": [{ "tag": "small", "text": "v1.0.0" }]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Raised",
+      "description": "Subtle drop shadow above the footer.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "footer",
+              "class": "ui-footer ui-footer--raised",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-footer__start",
+                  "children": [{ "tag": "small", "text": "Raised footer" }]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-footer__end",
+                  "children": [{ "tag": "small", "text": "v1.0.0" }]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Full Layout",
+      "description": "Footer inside an app-shell with topbar and sidebar.",
+      "examples": [
+        {
+          "code": "<body class=\"ui-app-shell\">\n  <header class=\"ui-topbar ui-topbar--bordered\">\n    <div class=\"ui-topbar__start\"><strong>App</strong></div>\n  </header>\n  <main class=\"ui-main ui-main--full\">\n    <div class=\"ui-container\">Content</div>\n    <footer class=\"ui-footer ui-footer--bordered\">\n      <div class=\"ui-footer__start\"><small>Brand</small></div>\n      <div class=\"ui-footer__end\"><small>v1.0.0</small></div>\n    </footer>\n  </main>\n</body>"
+        }
+      ]
+    }
+  ]
+}

package/src/03-layout/footer/footer.visual.spec.ts

@@ -0,0 +1,14 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+
+const DOCS_PATH = resolve(__dirname, 'footer.docs.json');
+
+test.describe('footer visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'footer');
+    await saveForLostPixel(page, 'footer');
+    await expect(page.locator('body')).toHaveScreenshot('footer.visual.png');
+  });
+});

package/src/03-layout/footer/index.scss

@@ -0,0 +1,62 @@
+@layer primitives {
+  .footer {
+    --_height: var(--ui-footer-height, var(--ui-row-3));
+    --_bg: var(--ui-footer-bg, var(--ui-color-bg));
+    --_padding-inline: var(--ui-footer-padding-inline, var(--ui-space-3));
+    --_border-color: var(--ui-footer-border-color, var(--ui-color-border));
+    --_z: var(--ui-footer-z, var(--ui-z-sticky));
+
+    display: flex;
+    align-items: center;
+    z-index: var(--_z);
+
+    block-size: var(--_height);
+    padding-inline: var(--_padding-inline);
+
+    background: var(--_bg);
+  }
+
+  // Sections
+  .footer__start {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--ui-space-2);
+  }
+
+  .footer__center {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ui-space-2);
+  }
+
+  .footer__end {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--ui-space-2);
+  }
+
+  // Position modifiers
+  .footer--sticky {
+    position: sticky;
+    inset-block-end: 0;
+  }
+
+  .footer--fixed {
+    position: fixed;
+    inset-block-end: 0;
+    inset-inline: 0;
+  }
+
+  // Visual modifiers
+  .footer--bordered {
+    box-shadow: inset 0 var(--ui-border-width-sm) 0 0 var(--_border-color);
+  }
+
+  .footer--raised {
+    box-shadow: 0 calc(var(--ui-border-width-sm) * -1) 6px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.08);
+  }
+}

package/src/03-layout/index.scss

@@ -1,12 +1,17 @@
+@forward './app-shell';
+@forward './aspect-ratio';
 @forward './box';
-@forward './stack';
+@forward './center';
 @forward './cluster';
+@forward './container';
+@forward './content';
 @forward './flex';
-@forward './center';
+@forward './footer';
 @forward './grid';
-@forward './app-shell';
+@forward './main';
+@forward './nav-rail';
+@forward './page-header';
 @forward './sidebar';
 @forward './sidebar-nav';
-@forward './main';
-@forward './container';
-@forward './aspect-ratio';
+@forward './stack';
+@forward './topbar';

package/src/03-layout/main/index.scss

@@ -1,5 +1,6 @@
 @layer primitives {
   .main {
+    padding-block-start: var(--topbar-height, 0);
     margin-inline-start: var(--sidebar-width, calc(var(--unit) * 30));
   }