@teseor/css 1.2.4 → 1.3.0

package/dist/index.css

@@ -26,10 +26,11 @@
 @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 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%))}}
@@ -44,6 +45,8 @@
 @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)))}}
@@ -82,6 +85,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 +109,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.3.0",
   "description": "CSS library - reset, primitives, components, utilities",
   "license": "MIT",
   "author": "letanure",

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/index.scss

@@ -9,3 +9,4 @@
 @forward './sidebar-nav';
 @forward './main';
 @forward './container';
+@forward './aspect-ratio';

package/src/04-components/actions/button-group/button-group.visual.spec.ts

@@ -7,8 +7,7 @@ const DOCS_PATH = resolve(__dirname, 'button-group.docs.json');
 test.describe('button-group visual regression', () => {
   test('all variations', async ({ page }) => {
     await setupVisualTestFromDocs(page, DOCS_PATH);
-    // TODO: fix grid rhythm - negative margins cause off-grid heights (#178)
-    // await validateGridRhythm(page, 'button-group');
+    await validateGridRhythm(page, 'button-group');
     await saveForLostPixel(page, 'button-group');
     await expect(page.locator('body')).toHaveScreenshot('button-group.visual.png');
   });

package/src/04-components/actions/button-group/index.scss

@@ -59,7 +59,9 @@
   }
 
   .button-group--vertical > .button + .button {
-    margin-block-start: calc(#{t.$unit} / -8);
+    // Remove top border instead of negative margin to stay on 8px grid
+    border-block-start-width: 0;
+
     margin-inline-start: 0;
   }
 

package/src/04-components/data-display/stat/index.scss

@@ -0,0 +1,47 @@
+@use '../../../00-config/tokens/variables' as t;
+
+@layer components.tokens {
+  .stat {
+    --_gap: var(--ui-stat-gap, var(--ui-space-1, #{t.$space-1}));
+  }
+
+  .stat__value {
+    --_font-size: var(--ui-stat-value-font-size, var(--ui-font-size-3xl, #{t.$font-size-3xl}));
+    --_font-weight: var(--ui-stat-value-font-weight, var(--ui-weight-bold, #{t.$weight-bold}));
+    --_line-height: var(--ui-stat-value-line-height, var(--ui-leading-3xl, #{t.$leading-3xl}));
+    --_color: var(--ui-stat-value-color, var(--ui-color-text, #{t.$color-text}));
+  }
+
+  .stat__label {
+    --_font-size: var(--ui-stat-label-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_color: var(--ui-stat-label-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_line-height: var(--ui-stat-label-line-height, var(--ui-leading-sm, #{t.$leading-sm}));
+  }
+
+  .stat--sm .stat__value {
+    --_font-size: var(--ui-font-size-xl, #{t.$font-size-xl});
+    --_line-height: var(--ui-leading-xl, #{t.$leading-xl});
+  }
+}
+
+@layer components.styles {
+  .stat {
+    display: flex;
+    flex-direction: column;
+    gap: var(--_gap);
+  }
+
+  .stat__value {
+    font-size: var(--_font-size);
+    font-weight: var(--_font-weight);
+    line-height: var(--_line-height);
+    letter-spacing: var(--ui-tracking-display, #{t.$tracking-display});
+    color: var(--_color);
+  }
+
+  .stat__label {
+    font-size: var(--_font-size);
+    line-height: var(--_line-height);
+    color: var(--_color);
+  }
+}

package/src/04-components/data-display/stat/stat.api.json

@@ -0,0 +1,18 @@
+{
+  "name": "stat",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["sm"]
+    }
+  },
+  "subElements": ["value", "label"],
+  "cssVars": [
+    { "name": "--ui-stat-gap", "default": "var(--ui-space-1)" },
+    { "name": "--ui-stat-value-font-size", "default": "var(--ui-font-size-3xl)" },
+    { "name": "--ui-stat-value-font-weight", "default": "var(--ui-weight-bold)" },
+    { "name": "--ui-stat-value-color", "default": "var(--ui-color-text)" },
+    { "name": "--ui-stat-label-font-size", "default": "var(--ui-font-size-sm)" },
+    { "name": "--ui-stat-label-color", "default": "var(--ui-color-text-muted)" }
+  ]
+}

package/src/04-components/data-display/stat/stat.docs.json

@@ -0,0 +1,114 @@
+{
+  "id": "stat",
+  "type": "component",
+  "title": "Stat",
+  "description": "Statistic display with prominent value and descriptive label.",
+  "api": "./stat.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-stat",
+              "children": [
+                { "tag": "span", "class": "ui-stat__value", "text": "2,847" },
+                { "tag": "span", "class": "ui-stat__label", "text": "Total users" }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Multiple stats",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-cluster ui-cluster--lg",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-stat",
+                  "children": [
+                    { "tag": "span", "class": "ui-stat__value", "text": "12.5k" },
+                    { "tag": "span", "class": "ui-stat__label", "text": "Revenue" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-stat",
+                  "children": [
+                    { "tag": "span", "class": "ui-stat__value", "text": "573" },
+                    { "tag": "span", "class": "ui-stat__label", "text": "Orders" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-stat",
+                  "children": [
+                    { "tag": "span", "class": "ui-stat__value", "text": "98%" },
+                    { "tag": "span", "class": "ui-stat__label", "text": "Satisfaction" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Small",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-stat ui-stat--sm",
+              "children": [
+                { "tag": "span", "class": "ui-stat__value", "text": "42" },
+                { "tag": "span", "class": "ui-stat__label", "text": "Active now" }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-stat-gap",
+      "default": "var(--ui-space-1)",
+      "description": "Gap between value and label"
+    },
+    {
+      "token": "--ui-stat-value-font-size",
+      "default": "var(--ui-font-size-3xl)",
+      "description": "Value font size"
+    },
+    {
+      "token": "--ui-stat-value-font-weight",
+      "default": "var(--ui-weight-bold)",
+      "description": "Value font weight"
+    },
+    {
+      "token": "--ui-stat-value-color",
+      "default": "var(--ui-color-text)",
+      "description": "Value text color"
+    },
+    {
+      "token": "--ui-stat-label-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Label font size"
+    },
+    {
+      "token": "--ui-stat-label-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Label text color"
+    }
+  ]
+}

package/src/04-components/data-display/stat/stat.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, 'stat.docs.json');
+
+test.describe('stat visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'stat');
+    await saveForLostPixel(page, 'stat');
+    await expect(page.locator('body')).toHaveScreenshot('stat.visual.png');
+  });
+});