@teseor/css 1.2.4 → 1.4.0

package/dist/index.css

@@ -15,21 +15,27 @@
 @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-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)))}}
-@layer components.styles{.ui-button-group{display:inline-flex}.ui-button-group>.ui-button:not(:first-child,:last-child){border-radius:0}.ui-button-group>.ui-button:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.ui-button-group>.ui-button:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.ui-button-group>.ui-button+.ui-button{margin-inline-start:calc(0.5rem/-8)}.ui-button-group>.ui-button:focus-visible{z-index:1}.ui-button-group--vertical{flex-direction:column}.ui-button-group--vertical>.ui-button:not(:first-child,:last-child){border-radius:0}.ui-button-group--vertical>.ui-button:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0}.ui-button-group--vertical>.ui-button:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0}.ui-button-group--vertical>.ui-button+.ui-button{margin-block-start:calc(0.5rem/-8);margin-inline-start:0}.ui-button-group--attached>.ui-button{border-inline-end-width:0}.ui-button-group--attached>.ui-button:last-child{border-inline-end-width:1px}.ui-button-group--attached>.ui-button+.ui-button{margin-inline-start:0}}
+@layer components.styles{.ui-button-group{display:inline-flex}.ui-button-group>.ui-button:not(:first-child,:last-child){border-radius:0}.ui-button-group>.ui-button:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.ui-button-group>.ui-button:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.ui-button-group>.ui-button+.ui-button{margin-inline-start:calc(0.5rem/-8)}.ui-button-group>.ui-button:focus-visible{z-index:1}.ui-button-group--vertical{flex-direction:column}.ui-button-group--vertical>.ui-button:not(:first-child,:last-child){border-radius:0}.ui-button-group--vertical>.ui-button:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0}.ui-button-group--vertical>.ui-button:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0}.ui-button-group--vertical>.ui-button+.ui-button{border-block-start-width:0;margin-inline-start:0}.ui-button-group--attached>.ui-button{border-inline-end-width:0}.ui-button-group--attached>.ui-button:last-child{border-inline-end-width:1px}.ui-button-group--attached>.ui-button+.ui-button{margin-inline-start:0}}
 @layer components.tokens{.ui-avatar{--ui-_size: var(--ui-avatar-size, calc(0.5rem * 5));--ui-_bg: var(--ui-avatar-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--ui-_color: var(--ui-avatar-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_font-size: var(--ui-avatar-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-avatar-radius, 50%)}.ui-avatar--xs{--ui-_size: var(--ui-avatar-size-xs, calc(0.5rem * 3));--ui-_font-size: var(--ui-avatar-font-size-xs, var(--ui-font-size-xs, 0.75rem))}.ui-avatar--sm{--ui-_size: var(--ui-avatar-size-sm, calc(0.5rem * 4));--ui-_font-size: var(--ui-avatar-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-avatar--lg{--ui-_size: var(--ui-avatar-size-lg, calc(0.5rem * 6));--ui-_font-size: var(--ui-avatar-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-avatar--xl{--ui-_size: var(--ui-avatar-size-xl, calc(0.5rem * 8));--ui-_font-size: var(--ui-avatar-font-size-xl, var(--ui-font-size-lg, 1.25rem))}.ui-avatar--square{--ui-_radius: var(--ui-avatar-radius-square, var(--ui-radius-md, 0.5rem))}}
 @layer components.styles{.ui-avatar{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;position:relative;block-size:var(--ui-_size);inline-size:var(--ui-_size);overflow:hidden;font-size:var(--ui-_font-size);font-weight:var(--ui-weight-medium, 500);line-height:1;text-transform:uppercase;color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-avatar__image{position:absolute;inset:0;block-size:100%;inline-size:100%;object-fit:cover;border-radius:inherit}.ui-avatar__fallback{display:flex;align-items:center;justify-content:center;block-size:100%;inline-size:100%;user-select:none}.ui-avatar-group{display:flex;flex-direction:row-reverse;justify-content:flex-end}.ui-avatar-group>.ui-avatar{margin-inline-start:calc(var(--ui-_size)*-0.25);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-bg, hsl(220, 10%, 98%))}.ui-avatar-group>.ui-avatar:last-child{margin-inline-start:0}}
 @layer components.tokens{.ui-badge{--ui-_accent: var(--ui-badge-accent, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_height: var(--ui-badge-height, calc(var(--ui-row, 1rem) * 1.25));--ui-_padding-x: var(--ui-badge-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-badge-font-size, var(--ui-font-size-xs, 0.75rem));--ui-_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, 500));--ui-_radius: var(--ui-badge-radius, var(--ui-radius-full, 9999px));--ui-_bg: var(--ui-_accent);--ui-_text: var(--ui-badge-text, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-badge--sm{--ui-_height: var(--ui-badge-height-sm, var(--ui-row, 1rem));--ui-_padding-x: var(--ui-badge-padding-x-sm, var(--ui-space-0, 0.25rem));--ui-_font-size: var(--ui-badge-font-size-sm, calc(var(--ui-font-size-xs, 0.75rem) * 0.85))}.ui-badge--primary{--ui-_accent: var(--ui-color-primary, oklch(55% 0.22 250deg));--ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}.ui-badge--success{--ui-_accent: var(--ui-color-success, oklch(60% 0.18 145deg));--ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}.ui-badge--warning{--ui-_accent: var(--ui-color-warning, oklch(75% 0.18 70deg));--ui-_text: var(--ui-color-text, hsl(220, 10%, 10%))}.ui-badge--danger{--ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));--ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}}
@@ -40,6 +46,8 @@
 @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)}}
@@ -82,6 +90,8 @@
 @layer components.styles{.ui-toggle{display:inline-flex;flex-shrink:0;align-items:center;position:relative;block-size:var(--ui-_track-height);inline-size:var(--ui-_track-width);background:var(--ui-_track-bg);border-radius:var(--ui-_track-radius);cursor:pointer;transition:background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.ui-toggle__input{position:absolute;inset:0;block-size:100%;inline-size:100%;margin:0;opacity:0;cursor:pointer}.ui-toggle__track{position:absolute;inset:0;background:var(--ui-_track-bg);border-radius:var(--ui-_track-radius);transition:background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.ui-toggle__thumb{position:absolute;inset-block-start:var(--ui-_thumb-offset);inset-inline-start:var(--ui-_thumb-offset);block-size:var(--ui-_thumb-size);inline-size:var(--ui-_thumb-size);background:var(--ui-_thumb-bg);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.ui-toggle__input:checked~.ui-toggle__track{background:var(--ui-_track-bg-checked)}.ui-toggle__input:checked~.ui-toggle__thumb{transform:translateX(calc(var(--ui-_track-width) - var(--ui-_thumb-size) - var(--ui-_thumb-offset) * 2))}.ui-toggle__input:focus-visible~.ui-toggle__track{outline:2px solid var(--ui-color-focus, var(--ui-color-primary));outline-offset:calc(0.5rem/4)}.ui-toggle__input:disabled~.ui-toggle__track,.ui-toggle__input:disabled~.ui-toggle__thumb{opacity:.5;cursor:not-allowed}.ui-toggle:has(.ui-toggle__input:disabled){cursor:not-allowed}}
 @layer components.tokens{.ui-divider{--ui-_color: var(--ui-divider-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));--ui-_line-size: var(--ui-divider-line-size, 1px);--ui-_height: var(--ui-divider-height, 0.5rem);--ui-_gap: var(--ui-divider-gap, calc(0.5rem * 2))}}
 @layer components.styles{.ui-divider{display:flex;align-items:center;block-size:var(--ui-_height);margin:var(--ui-_gap) 0;font-size:var(--ui-font-size-sm, 0.875rem);line-height:1;color:var(--ui-color-text-muted)}.ui-divider::before,.ui-divider::after{content:"";flex:1;block-size:var(--ui-_line-size);background:var(--ui-_color)}.ui-divider:not(:empty){--ui-_height: var(--ui-row-1, 1rem)}.ui-divider:not(:empty)::before{margin-inline-end:calc(0.5rem*2)}.ui-divider:not(:empty)::after{margin-inline-start:calc(0.5rem*2)}.ui-divider:empty::after{display:none}.ui-divider--vertical{flex-direction:column;align-self:stretch;margin:0 var(--ui-_gap);writing-mode:vertical-rl}.ui-divider--vertical::before,.ui-divider--vertical::after{flex:1;block-size:auto;inline-size:var(--ui-_size)}.ui-divider--start::before{display:none}.ui-divider--start:not(:empty)::after{margin-inline-start:calc(0.5rem*2)}.ui-divider--end::after{display:none}.ui-divider--end:not(:empty)::before{margin-inline-end:calc(0.5rem*2)}.ui-divider--dashed::before,.ui-divider--dashed::after{background:repeating-linear-gradient(90deg, var(--ui-_color) 0, var(--ui-_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem)}.ui-divider--vertical.ui-divider--dashed::before,.ui-divider--vertical.ui-divider--dashed::after{background:repeating-linear-gradient(180deg, var(--ui-_color) 0, var(--ui-_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem)}}
+@layer components.tokens{.ui-spacer{--ui-_size: var(--ui-spacer-size, 1)}}
+@layer components.styles{.ui-spacer{flex:var(--ui-_size)}}
 @layer components.tokens{.ui-breadcrumb{--ui-_height: var(--ui-breadcrumb-height, var(--ui-row-1, 1rem));--ui-_gap: var(--ui-breadcrumb-gap, calc(0.5rem * 1));--ui-_separator-color: var(--ui-breadcrumb-separator-color, var(--ui-color-text-muted));--ui-_link-color: var(--ui-breadcrumb-link-color, var(--ui-color-text-muted));--ui-_current-color: var(--ui-breadcrumb-current-color, var(--ui-color-text))}}
 @layer components.styles{.ui-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-_gap);block-size:var(--ui-_height);padding:0;margin:0;font-size:var(--ui-font-size-sm, 0.875rem);line-height:1;list-style:none}.ui-breadcrumb__item{display:flex;align-items:center;gap:var(--ui-_gap);block-size:var(--ui-_height)}.ui-breadcrumb__item:not(:last-child)::after{content:var(--ui-breadcrumb-separator, "/");color:var(--ui-_separator-color)}.ui-breadcrumb__link{text-decoration:none;color:var(--ui-_link-color);transition:color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.ui-breadcrumb__link:hover{text-decoration:underline;color:var(--ui-color-primary)}.ui-breadcrumb__item:last-child .ui-breadcrumb__link,.ui-breadcrumb__current{color:var(--ui-_current-color);pointer-events:none}.ui-breadcrumb__item--hidden{display:none}.ui-breadcrumb__ellipsis{color:var(--ui-_separator-color)}}
 @layer components.tokens{.ui-menu{--ui-_min-width: var(--ui-menu-min-width, calc(0.5rem * 16));--ui-_max-height: var(--ui-menu-max-height, calc(0.5rem * 40));--ui-_padding: var(--ui-menu-padding, calc(0.5rem * 1));--ui-_radius: var(--ui-menu-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-menu-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-menu-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg));--ui-_item-padding: var(--ui-menu-item-padding, calc(0.5rem * 1) calc(0.5rem * 2));--ui-_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, 0.25rem));--ui-_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)))}}
@@ -104,12 +114,18 @@
 @layer components.styles{.ui-popover{position:absolute;z-index:var(--ui-_z);max-inline-size:var(--ui-_max-width);padding:var(--ui-_padding);line-height:var(--ui-row-1, 1rem);background:var(--ui-_bg);border-radius:var(--ui-_radius);outline:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);box-shadow:var(--ui-_shadow);outline-offset:calc(var(--ui-border-width-sm, 0.0625rem)*-1)}.ui-popover__header{padding-block-end:calc(0.5rem*2);margin-block-end:calc(0.5rem*2);box-shadow:inset 0 calc(var(--ui-border-width-sm, 1px)*-1) 0 var(--ui-_border-color)}.ui-popover__title{margin:0;font-size:var(--ui-font-size-md, 1rem);font-weight:var(--ui-weight-semibold, 600)}.ui-popover--top::after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:50%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-block-start-color:var(--ui-_bg);transform:translateX(-50%)}.ui-popover--top::before{content:"";position:absolute;inset-block-start:100%;inset-inline-start:50%;border:calc(var(--ui-_arrow-size) + 1px) solid rgba(0,0,0,0);border-block-start-color:var(--ui-_border-color);transform:translateX(-50%)}.ui-popover--bottom::after{content:"";position:absolute;inset-block-end:100%;inset-inline-start:50%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-block-end-color:var(--ui-_bg);transform:translateX(-50%)}.ui-popover--bottom::before{content:"";position:absolute;inset-block-end:100%;inset-inline-start:50%;border:calc(var(--ui-_arrow-size) + 1px) solid rgba(0,0,0,0);border-block-end-color:var(--ui-_border-color);transform:translateX(-50%)}.ui-popover--visible{opacity:1}.ui-popover--hidden{opacity:0;pointer-events:none}.ui-popover--animate{transition:opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}}
 @layer components.tokens{.ui-tooltip{--ui-_bg: var(--ui-tooltip-bg, var(--ui-color-text, #1a1a1a));--ui-_color: var(--ui-tooltip-color, var(--ui-color-bg, white));--ui-_radius: var(--ui-tooltip-radius, var(--ui-radius-sm, calc(0.5rem / 2)));--ui-_padding-x: var(--ui-tooltip-padding-x, calc(0.5rem * 1));--ui-_padding-y: var(--ui-tooltip-padding-y, calc(0.5rem / 2));--ui-_size: var(--ui-tooltip-size, var(--ui-font-size-sm, 0.875rem));--ui-_z: var(--ui-tooltip-z, var(--ui-z-tooltip, 500));--ui-_arrow-size: var(--ui-tooltip-arrow-size, calc(0.5rem / 2))}}
 @layer components.styles{.ui-tooltip{position:absolute;z-index:var(--ui-_z);max-inline-size:calc(0.5rem*25);padding:var(--ui-_padding-y) var(--ui-_padding-x);font-size:var(--ui-_size);line-height:calc(0.5rem*2);text-align:center;white-space:nowrap;color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-tooltip--top::after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:50%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-block-start-color:var(--ui-_bg);transform:translateX(-50%)}.ui-tooltip--bottom::after{content:"";position:absolute;inset-block-end:100%;inset-inline-start:50%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-block-end-color:var(--ui-_bg);transform:translateX(-50%)}.ui-tooltip--start::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:100%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-inline-start-color:var(--ui-_bg);transform:translateY(-50%)}.ui-tooltip--end::after{content:"";position:absolute;inset-block-start:50%;inset-inline-end:100%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-inline-end-color:var(--ui-_bg);transform:translateY(-50%)}.ui-tooltip--visible{opacity:1}.ui-tooltip--hidden{opacity:0;pointer-events:none}.ui-tooltip--animate{transition:opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}}
+@layer components.tokens{.ui-blockquote{--ui-_border-color: var(--ui-blockquote-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-width: var(--ui-blockquote-border-width, var(--ui-border-width-lg, 0.25rem));--ui-_padding-inline: var(--ui-blockquote-padding-inline, var(--ui-space-3, 1.5rem));--ui-_color: var(--ui-blockquote-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_font-size: var(--ui-blockquote-font-size, var(--ui-font-size-lg, 1.25rem));--ui-_line-height: var(--ui-blockquote-line-height, var(--ui-leading-lg, 2rem))}.ui-blockquote--accent{--ui-_border-color: var(--ui-color-primary, oklch(55% 0.22 250deg))}}
+@layer components.styles{.ui-blockquote{padding-inline-start:var(--ui-_padding-inline);margin:0;font-size:var(--ui-_font-size);font-style:italic;line-height:var(--ui-_line-height);color:var(--ui-_color);border-inline-start:var(--ui-_border-width) solid var(--ui-_border-color)}.ui-blockquote__cite{display:block;margin-block-start:var(--ui-space-1, 0.5rem);font-size:var(--ui-font-size-sm, 0.875rem);font-style:normal;line-height:var(--ui-leading-sm, 1.5rem);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}}
 @layer components.tokens{.ui-code{--ui-_font-size: var(--ui-code-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_bg: var(--ui-code-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_padding-x: var(--ui-code-padding-x, var(--ui-space-1, 0.5rem));--ui-_padding-y: var(--ui-code-padding-y, var(--ui-space-0, 0.25rem));--ui-_radius: var(--ui-code-radius, var(--ui-radius-sm, 0.25rem))}.ui-code--sm{--ui-_font-size: var(--ui-font-size-xs, 0.75rem)}.ui-code-block{--ui-_font-size: var(--ui-code-font-size-block, var(--ui-font-size-sm, 0.875rem));--ui-_bg: var(--ui-code-bg-block, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_padding: var(--ui-code-padding-block, var(--ui-space-3, 1.5rem));--ui-_radius: var(--ui-code-radius-block, var(--ui-radius-md, 0.5rem));--ui-_border-color: var(--ui-code-border-color-block, var(--ui-color-border, hsl(220, 10%, 90%)))}}
 @layer components.styles{.ui-code{padding:var(--ui-_padding-y) var(--ui-_padding-x);font-family:var(--ui-font-mono, ui-monospace, sfmono-regular, SF Mono, menlo, consolas, Liberation Mono, monospace);font-size:var(--ui-_font-size);line-height:var(--ui-leading-tight-sm, 1rem);background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-code-block{display:block;padding:calc(var(--ui-_padding) - var(--ui-border-width-sm, 0.0625rem));overflow-x:auto;font-family:var(--ui-font-mono, ui-monospace, sfmono-regular, SF Mono, menlo, consolas, Liberation Mono, monospace);font-size:var(--ui-_font-size);line-height:var(--ui-leading-tight-sm, 1rem);white-space:pre;background:var(--ui-_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);border-radius:var(--ui-_radius)}.ui-code-block code{padding:0;font-size:inherit;background:none}}
 @layer components.tokens{.ui-heading{--ui-_font-size: var(--ui-heading-font-size, var(--ui-font-size-xl, 1.5rem));--ui-_line-height: var(--ui-heading-line-height, var(--ui-leading-xl, 2rem));--ui-_weight: var(--ui-heading-weight, var(--ui-weight-bold, 700));--ui-_color: var(--ui-heading-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-heading--4xl{--ui-_font-size: var(--ui-heading-font-size-4xl, var(--ui-font-size-4xl, 2.5rem));--ui-_line-height: var(--ui-heading-line-height-4xl, var(--ui-leading-4xl, 3rem))}.ui-heading--3xl{--ui-_font-size: var(--ui-heading-font-size-3xl, var(--ui-font-size-3xl, 2rem));--ui-_line-height: var(--ui-heading-line-height-3xl, var(--ui-leading-3xl, 2.5rem))}.ui-heading--2xl{--ui-_font-size: var(--ui-heading-font-size-2xl, var(--ui-font-size-2xl, 1.75rem));--ui-_line-height: var(--ui-heading-line-height-2xl, var(--ui-leading-2xl, 2rem))}.ui-heading--xl{--ui-_font-size: var(--ui-heading-font-size-xl, var(--ui-font-size-xl, 1.5rem));--ui-_line-height: var(--ui-heading-line-height-xl, var(--ui-leading-xl, 2rem))}.ui-heading--lg{--ui-_font-size: var(--ui-heading-font-size-lg, var(--ui-font-size-lg, 1.25rem));--ui-_line-height: var(--ui-heading-line-height-lg, var(--ui-leading-lg, 2rem))}.ui-heading--md{--ui-_font-size: var(--ui-heading-font-size-md, var(--ui-font-size-md, 1rem));--ui-_line-height: var(--ui-heading-line-height-md, var(--ui-leading-tight-md, 1.5rem))}.ui-heading--sm{--ui-_font-size: var(--ui-heading-font-size-sm, var(--ui-font-size-sm, 0.875rem));--ui-_line-height: var(--ui-heading-line-height-sm, var(--ui-leading-tight-sm, 1rem))}}
 @layer components.styles{.ui-heading{margin:0;font-size:var(--ui-_font-size);font-weight:var(--ui-_weight);line-height:var(--ui-_line-height);color:var(--ui-_color)}}
+@layer components.tokens{.ui-kbd{--ui-_font-size: var(--ui-kbd-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_font-family: var(--ui-kbd-font-family, var(--ui-font-mono, ui-monospace, sfmono-regular, SF Mono, menlo, consolas, Liberation Mono, monospace));--ui-_padding-x: var(--ui-kbd-padding-x, var(--ui-space-0, 0.25rem));--ui-_padding-y: var(--ui-kbd-padding-y, var(--ui-space-0, 0.25rem));--ui-_bg: var(--ui-kbd-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--ui-_border-color: var(--ui-kbd-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_radius: var(--ui-kbd-radius, var(--ui-radius-sm, 0.25rem));--ui-_color: var(--ui-kbd-color, var(--ui-color-text, hsl(220, 10%, 10%)))}}
+@layer components.styles{.ui-kbd{display:inline-flex;align-items:center;padding:var(--ui-_padding-y) var(--ui-_padding-x);font-family:var(--ui-_font-family);font-size:var(--ui-_font-size);line-height:1;color:var(--ui-_color);background:var(--ui-_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);border-radius:var(--ui-_radius);box-shadow:0 var(--ui-space-quarter, 0.125rem) 0 var(--ui-_border-color)}}
 @layer components.tokens{.ui-link{--ui-_color: var(--ui-link-color, var(--ui-color-primary));--ui-_color-hover: var(--ui-link-color-hover, var(--ui-color-primary-hover, color-mix(in srgb, var(--ui-_color) 85%, black)));--ui-_color-visited: var(--ui-link-color-visited, var(--ui-_color));--ui-_decoration: var(--ui-link-decoration, underline);--ui-_decoration-hover: var(--ui-link-decoration-hover, underline)}.ui-link--muted{--ui-_color: var(--ui-link-color-muted, var(--ui-color-text-muted));--ui-_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text))}.ui-link--subtle{--ui-_decoration: none;--ui-_decoration-hover: underline}}
 @layer components.styles{.ui-link{text-decoration:var(--ui-_decoration);color:var(--ui-_color);cursor:pointer;transition:color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);text-underline-offset:calc(0.5rem/4)}.ui-link:hover{text-decoration:var(--ui-_decoration-hover);color:var(--ui-_color-hover)}.ui-link:focus-visible{border-radius:calc(0.5rem/4);outline:2px solid var(--ui-color-focus, var(--ui-color-primary));outline-offset:calc(0.5rem/4)}.ui-link:visited{color:var(--ui-_color-visited)}.ui-link--disabled,.ui-link[aria-disabled=true]{color:var(--ui-color-text-muted);opacity:.6;cursor:not-allowed;pointer-events:none}.ui-link--external::after{content:"↗";display:inline-block;margin-inline-start:calc(0.5rem/4);font-size:.75em}}
+@layer components.tokens{.ui-mark{--ui-_bg: var(--ui-mark-bg, var(--ui-color-warning, oklch(75% 0.18 70deg)));--ui-_color: var(--ui-mark-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_padding-x: var(--ui-mark-padding-x, var(--ui-space-quarter, 0.125rem));--ui-_padding-y: var(--ui-mark-padding-y, 0);--ui-_radius: var(--ui-mark-radius, var(--ui-radius-sm, 0.25rem))}}
+@layer components.styles{.ui-mark{padding:var(--ui-_padding-y) var(--ui-_padding-x);color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}}
 @layer utilities{.ui-m-0{margin:0}.ui-m-1{margin:var(--ui-space-1)}.ui-m-2{margin:var(--ui-space-2)}.ui-m-3{margin:var(--ui-space-3)}.ui-m-4{margin:var(--ui-space-4)}.ui-m-6{margin:var(--ui-space-6)}.ui-m-8{margin:var(--ui-space-8)}.ui-mt-0{margin-block-start:0}.ui-mt-1{margin-block-start:var(--ui-space-1)}.ui-mt-2{margin-block-start:var(--ui-space-2)}.ui-mt-3{margin-block-start:var(--ui-space-3)}.ui-mt-4{margin-block-start:var(--ui-space-4)}.ui-mt-6{margin-block-start:var(--ui-space-6)}.ui-mt-8{margin-block-start:var(--ui-space-8)}.ui-me-0{margin-inline-end:0}.ui-me-1{margin-inline-end:var(--ui-space-1)}.ui-me-2{margin-inline-end:var(--ui-space-2)}.ui-me-3{margin-inline-end:var(--ui-space-3)}.ui-me-4{margin-inline-end:var(--ui-space-4)}.ui-me-6{margin-inline-end:var(--ui-space-6)}.ui-me-8{margin-inline-end:var(--ui-space-8)}.ui-mb-0{margin-block-end:0}.ui-mb-1{margin-block-end:var(--ui-space-1)}.ui-mb-2{margin-block-end:var(--ui-space-2)}.ui-mb-3{margin-block-end:var(--ui-space-3)}.ui-mb-4{margin-block-end:var(--ui-space-4)}.ui-mb-6{margin-block-end:var(--ui-space-6)}.ui-mb-8{margin-block-end:var(--ui-space-8)}.ui-ms-0{margin-inline-start:0}.ui-ms-1{margin-inline-start:var(--ui-space-1)}.ui-ms-2{margin-inline-start:var(--ui-space-2)}.ui-ms-3{margin-inline-start:var(--ui-space-3)}.ui-ms-4{margin-inline-start:var(--ui-space-4)}.ui-ms-6{margin-inline-start:var(--ui-space-6)}.ui-ms-8{margin-inline-start:var(--ui-space-8)}.ui-mx-0{margin-inline:0}.ui-mx-1{margin-inline:var(--ui-space-1)}.ui-mx-2{margin-inline:var(--ui-space-2)}.ui-mx-3{margin-inline:var(--ui-space-3)}.ui-mx-4{margin-inline:var(--ui-space-4)}.ui-mx-auto{margin-inline:auto}.ui-my-0{margin-block:0}.ui-my-1{margin-block:var(--ui-space-1)}.ui-my-2{margin-block:var(--ui-space-2)}.ui-my-3{margin-block:var(--ui-space-3)}.ui-my-4{margin-block:var(--ui-space-4)}.ui-p-0{padding:0}.ui-p-1{padding:var(--ui-space-1)}.ui-p-2{padding:var(--ui-space-2)}.ui-p-3{padding:var(--ui-space-3)}.ui-p-4{padding:var(--ui-space-4)}.ui-p-6{padding:var(--ui-space-6)}.ui-p-8{padding:var(--ui-space-8)}.ui-pt-0{padding-block-start:0}.ui-pt-1{padding-block-start:var(--ui-space-1)}.ui-pt-2{padding-block-start:var(--ui-space-2)}.ui-pt-3{padding-block-start:var(--ui-space-3)}.ui-pt-4{padding-block-start:var(--ui-space-4)}.ui-pt-6{padding-block-start:var(--ui-space-6)}.ui-pt-8{padding-block-start:var(--ui-space-8)}.ui-pe-0{padding-inline-end:0}.ui-pe-1{padding-inline-end:var(--ui-space-1)}.ui-pe-2{padding-inline-end:var(--ui-space-2)}.ui-pe-3{padding-inline-end:var(--ui-space-3)}.ui-pe-4{padding-inline-end:var(--ui-space-4)}.ui-pe-6{padding-inline-end:var(--ui-space-6)}.ui-pe-8{padding-inline-end:var(--ui-space-8)}.ui-pb-0{padding-block-end:0}.ui-pb-1{padding-block-end:var(--ui-space-1)}.ui-pb-2{padding-block-end:var(--ui-space-2)}.ui-pb-3{padding-block-end:var(--ui-space-3)}.ui-pb-4{padding-block-end:var(--ui-space-4)}.ui-pb-6{padding-block-end:var(--ui-space-6)}.ui-pb-8{padding-block-end:var(--ui-space-8)}.ui-ps-0{padding-inline-start:0}.ui-ps-1{padding-inline-start:var(--ui-space-1)}.ui-ps-2{padding-inline-start:var(--ui-space-2)}.ui-ps-3{padding-inline-start:var(--ui-space-3)}.ui-ps-4{padding-inline-start:var(--ui-space-4)}.ui-ps-6{padding-inline-start:var(--ui-space-6)}.ui-ps-8{padding-inline-start:var(--ui-space-8)}.ui-px-0{padding-inline:0}.ui-px-1{padding-inline:var(--ui-space-1)}.ui-px-2{padding-inline:var(--ui-space-2)}.ui-px-3{padding-inline:var(--ui-space-3)}.ui-px-4{padding-inline:var(--ui-space-4)}.ui-py-0{padding-block:0}.ui-py-1{padding-block:var(--ui-space-1)}.ui-py-2{padding-block:var(--ui-space-2)}.ui-py-3{padding-block:var(--ui-space-3)}.ui-py-4{padding-block:var(--ui-space-4)}.ui-gap-0{gap:0}.ui-gap-1{gap:var(--ui-space-1)}.ui-gap-2{gap:var(--ui-space-2)}.ui-gap-3{gap:var(--ui-space-3)}.ui-gap-4{gap:var(--ui-space-4)}.ui-gap-6{gap:var(--ui-space-6)}.ui-gap-8{gap:var(--ui-space-8)}}
 @layer utilities{.ui-block{display:block}.ui-inline-block{display:inline-block}.ui-inline{display:inline}.ui-flex{display:flex}.ui-inline-flex{display:inline-flex}.ui-grid{display:grid}.ui-inline-grid{display:inline-grid}.ui-hidden{display:none}.ui-flex-row{flex-direction:row}.ui-flex-row-reverse{flex-direction:row-reverse}.ui-flex-col{flex-direction:column}.ui-flex-col-reverse{flex-direction:column-reverse}.ui-flex-wrap{flex-wrap:wrap}.ui-flex-nowrap{flex-wrap:nowrap}.ui-flex-wrap-reverse{flex-wrap:wrap-reverse}.ui-flex-1{flex:1 1 0%}.ui-flex-auto{flex:1 1 auto}.ui-flex-initial{flex:0 1 auto}.ui-flex-none{flex:none}.ui-grow{flex-grow:1}.ui-grow-0{flex-grow:0}.ui-shrink{flex-shrink:1}.ui-shrink-0{flex-shrink:0}.ui-justify-start{justify-content:flex-start}.ui-justify-end{justify-content:flex-end}.ui-justify-center{justify-content:center}.ui-justify-between{justify-content:space-between}.ui-justify-around{justify-content:space-around}.ui-justify-evenly{justify-content:space-evenly}.ui-items-start{align-items:flex-start}.ui-items-end{align-items:flex-end}.ui-items-center{align-items:center}.ui-items-baseline{align-items:baseline}.ui-items-stretch{align-items:stretch}.ui-self-auto{align-self:auto}.ui-self-start{align-self:flex-start}.ui-self-end{align-self:flex-end}.ui-self-center{align-self:center}.ui-self-stretch{align-self:stretch}.ui-visible{visibility:visible}.ui-invisible{visibility:hidden}.ui-sr-only{position:absolute;block-size:1px;inline-size:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border-width:0;clip-path:inset(50%)}}
 @layer utilities{.ui-text-start{text-align:start}.ui-text-center{text-align:center}.ui-text-end{text-align:end}.ui-text-justify{text-align:justify}.ui-font-normal{font-weight:var(--ui-weight-normal)}.ui-font-medium{font-weight:var(--ui-weight-medium)}.ui-font-semibold{font-weight:var(--ui-weight-semibold)}.ui-font-bold{font-weight:var(--ui-weight-bold)}.ui-text-xs{font-size:var(--ui-font-size-xs);line-height:var(--ui-leading-xs)}.ui-text-sm{font-size:var(--ui-font-size-sm);line-height:var(--ui-leading-sm)}.ui-text-md{font-size:var(--ui-font-size-md);line-height:var(--ui-leading-md)}.ui-text-lg{font-size:var(--ui-font-size-lg);line-height:var(--ui-leading-lg)}.ui-text-xl{font-size:var(--ui-font-size-xl);line-height:var(--ui-leading-xl)}.ui-text-2xl{font-size:var(--ui-font-size-2xl);line-height:var(--ui-leading-2xl)}.ui-text-3xl{font-size:var(--ui-font-size-3xl);line-height:var(--ui-leading-3xl)}.ui-text-4xl{font-size:var(--ui-font-size-4xl);line-height:var(--ui-leading-4xl)}.ui-text-lead{font-size:var(--ui-lead-size);font-weight:var(--ui-lead-weight);line-height:var(--ui-lead-line-height);letter-spacing:var(--ui-lead-tracking)}.ui-text-eyebrow{font-size:var(--ui-eyebrow-size);font-weight:var(--ui-eyebrow-weight);line-height:var(--ui-eyebrow-line-height);letter-spacing:var(--ui-eyebrow-tracking);text-transform:uppercase}.ui-text-caption{font-size:var(--ui-caption-size);font-weight:var(--ui-caption-weight);line-height:var(--ui-caption-line-height);letter-spacing:var(--ui-caption-tracking)}.ui-text-body-sm{font-size:var(--ui-body-sm-size);font-weight:var(--ui-body-sm-weight);line-height:var(--ui-body-sm-line-height);letter-spacing:var(--ui-body-sm-tracking)}.ui-font-sans{font-family:var(--ui-font-sans)}.ui-font-mono{font-family:var(--ui-font-mono)}.ui-underline{text-decoration:underline}.ui-line-through{text-decoration:line-through}.ui-no-underline{text-decoration:none}.ui-uppercase{text-transform:uppercase}.ui-lowercase{text-transform:lowercase}.ui-capitalize{text-transform:capitalize}.ui-normal-case{text-transform:none}.ui-text-primary{color:var(--ui-color-primary)}.ui-text-muted{color:var(--ui-color-text-muted)}.ui-text-success{color:var(--ui-color-success)}.ui-text-warning{color:var(--ui-color-warning)}.ui-text-danger{color:var(--ui-color-danger)}.ui-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-whitespace-normal{white-space:normal}.ui-whitespace-nowrap{white-space:nowrap}.ui-whitespace-pre{white-space:pre}.ui-whitespace-pre-wrap{white-space:pre-wrap}.ui-prose{max-inline-size:65ch}.ui-prose-sm{max-inline-size:45ch}.ui-prose-lg{max-inline-size:75ch}.ui-tracking-display{letter-spacing:var(--ui-tracking-display)}.ui-tracking-body{letter-spacing:var(--ui-tracking-body)}.ui-tracking-caps{letter-spacing:var(--ui-tracking-caps)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teseor/css",
-  "version": "1.2.4",
+  "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/aspect-ratio/aspect-ratio.api.json

@@ -0,0 +1,16 @@
+{
+  "name": "aspect-ratio",
+  "element": "div",
+  "modifiers": {
+    "ratio": {
+      "values": ["square", "video", "photo", "wide", "portrait"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-aspect-ratio",
+      "description": "Custom aspect ratio",
+      "default": "1 / 1"
+    }
+  ]
+}

package/src/03-layout/aspect-ratio/aspect-ratio.docs.json

@@ -0,0 +1,193 @@
+{
+  "id": "aspect-ratio",
+  "type": "primitive",
+  "title": "Aspect Ratio",
+  "description": "Constrains a container to a specific aspect ratio. Media children fill the container automatically.",
+  "api": "aspect-ratio.api.json",
+  "sections": [
+    {
+      "title": "Presets",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-cluster ui-cluster--md",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-aspect-ratio ui-aspect-ratio--square",
+                  "style": {
+                    "inline-size": "160px",
+                    "background": "var(--ui-color-bg-muted)"
+                  },
+                  "children": [
+                    {
+                      "tag": "span",
+                      "text": "square",
+                      "style": {
+                        "padding": "var(--ui-space-2)"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-aspect-ratio ui-aspect-ratio--video",
+                  "style": {
+                    "inline-size": "160px",
+                    "background": "var(--ui-color-bg-muted)"
+                  },
+                  "children": [
+                    {
+                      "tag": "span",
+                      "text": "video",
+                      "style": {
+                        "padding": "var(--ui-space-2)"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-aspect-ratio ui-aspect-ratio--photo",
+                  "style": {
+                    "inline-size": "160px",
+                    "background": "var(--ui-color-bg-muted)"
+                  },
+                  "children": [
+                    {
+                      "tag": "span",
+                      "text": "photo",
+                      "style": {
+                        "padding": "var(--ui-space-2)"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-aspect-ratio ui-aspect-ratio--wide",
+                  "style": {
+                    "inline-size": "160px",
+                    "background": "var(--ui-color-bg-muted)"
+                  },
+                  "children": [
+                    {
+                      "tag": "span",
+                      "text": "wide",
+                      "style": {
+                        "padding": "var(--ui-space-2)"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-aspect-ratio ui-aspect-ratio--portrait",
+                  "style": {
+                    "inline-size": "160px",
+                    "background": "var(--ui-color-bg-muted)"
+                  },
+                  "children": [
+                    {
+                      "tag": "span",
+                      "text": "portrait",
+                      "style": {
+                        "padding": "var(--ui-space-2)"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "With Media",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-cluster ui-cluster--md",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-aspect-ratio ui-aspect-ratio--video",
+                  "style": {
+                    "inline-size": "240px"
+                  },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "text": "img (video)",
+                      "style": {
+                        "inline-size": "100%",
+                        "block-size": "100%",
+                        "background": "var(--ui-color-primary)",
+                        "color": "var(--ui-color-on-primary)",
+                        "display": "grid",
+                        "place-items": "center"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-aspect-ratio ui-aspect-ratio--square",
+                  "style": {
+                    "inline-size": "240px"
+                  },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "text": "img (square)",
+                      "style": {
+                        "inline-size": "100%",
+                        "block-size": "100%",
+                        "background": "var(--ui-color-primary)",
+                        "color": "var(--ui-color-on-primary)",
+                        "display": "grid",
+                        "place-items": "center"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Custom Ratio",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-aspect-ratio",
+              "style": {
+                "--ui-aspect-ratio": "2.35 / 1",
+                "inline-size": "320px",
+                "background": "var(--ui-color-bg-muted)"
+              },
+              "children": [
+                {
+                  "tag": "span",
+                  "text": "2.35:1 (cinemascope)",
+                  "style": {
+                    "padding": "var(--ui-space-2)"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/03-layout/aspect-ratio/aspect-ratio.visual.spec.ts

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

package/src/03-layout/aspect-ratio/index.scss

@@ -0,0 +1,23 @@
+@layer primitives {
+  .aspect-ratio {
+    aspect-ratio: var(--aspect-ratio, 1 / 1);
+
+    overflow: hidden;
+  }
+
+  // Media children fill the container
+  .aspect-ratio > img,
+  .aspect-ratio > video,
+  .aspect-ratio > iframe {
+    block-size: 100%;
+    inline-size: 100%;
+    object-fit: cover;
+  }
+
+  // Preset ratios — functional names, not math
+  .aspect-ratio--square { --aspect-ratio: 1 / 1; }
+  .aspect-ratio--video { --aspect-ratio: 16 / 9; }
+  .aspect-ratio--photo { --aspect-ratio: 4 / 3; }
+  .aspect-ratio--wide { --aspect-ratio: 21 / 9; }
+  .aspect-ratio--portrait { --aspect-ratio: 3 / 4; }
+}

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>"
+        }
+      ]
+    }
+  ]
+}