@teseor/css 1.14.0 → 1.14.2

package/dist/index.css

@@ -11,7 +11,7 @@
 @layer tokens{:root{color-scheme:light dark;--ui-color-text: light-dark(var(--ui-color-neutral-900), var(--ui-color-neutral-100));--ui-color-text-muted: light-dark(var(--ui-color-neutral-500), var(--ui-color-neutral-400));--ui-color-text-inverse: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));--ui-color-bg: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));--ui-color-bg-subtle: light-dark(var(--ui-color-neutral-100), var(--ui-color-neutral-800));--ui-color-bg-muted: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));--ui-color-border: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));--ui-color-border-strong: light-dark(var(--ui-color-neutral-300), var(--ui-color-neutral-600));--ui-color-interactive: var(--ui-color-primary);--ui-color-interactive-hover: var(--ui-color-primary-dark);--ui-color-focus: var(--ui-color-primary-light);--ui-opacity-disabled: 0.5;--ui-opacity-loading: 0.7;--ui-overlay-bg: rgb(0 0 0 / 0.5);--ui-overlay-bg-light: rgb(255 255 255 / 0.7);--ui-overlay-bg-blur: rgb(0 0 0 / 0.3);--ui-overlay-bg-subtle: rgb(0 0 0 / 0.1)}}
 @layer themes{[data-theme=light]{color-scheme:light}[data-theme=dark]{color-scheme:dark}@media(forced-colors: active){:root{--ui-color-focus: Highlight}}@media(prefers-contrast: more){:root{--ui-color-border: light-dark(var(--ui-color-neutral-400), var(--ui-color-neutral-400));--ui-color-border-strong: light-dark(var(--ui-color-neutral-600), var(--ui-color-neutral-300));--ui-color-text-muted: light-dark(var(--ui-color-neutral-600), var(--ui-color-neutral-300));--ui-color-bg-subtle: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700))}}@media(prefers-contrast: less){:root{--ui-color-border: var(--ui-color-neutral-150);--ui-color-border-strong: var(--ui-color-neutral-200)}}}
 @layer tokens{:root{--ui-spacing-xs: var(--ui-space-1);--ui-spacing-sm: var(--ui-space-2);--ui-spacing-md: var(--ui-space-4);--ui-spacing-lg: var(--ui-space-6);--ui-spacing-xl: var(--ui-space-8);--ui-spacing-gutter: var(--ui-space-4);--ui-spacing-section: var(--ui-space-8)}}
-:root{--ui-input-height: var(--ui-row-2);--ui-input-padding-x: var(--ui-space-2);--ui-input-padding-y: var(--ui-space-1);--ui-input-radius: var(--ui-radius-md);--ui-input-border-width: var(--ui-border-width-sm);--ui-input-bg: var(--ui-color-bg);--ui-input-border: var(--ui-color-border);--ui-input-border-focus: var(--ui-color-interactive);--ui-input-text: var(--ui-color-text);--ui-input-placeholder: var(--ui-color-text-muted)}
+@layer tokens{:root{--ui-input-height: var(--ui-row-2);--ui-input-padding-x: var(--ui-space-2);--ui-input-padding-y: var(--ui-space-1);--ui-input-radius: var(--ui-radius-md);--ui-input-border-width: var(--ui-border-width-sm);--ui-input-bg: var(--ui-color-bg);--ui-input-border: var(--ui-color-border);--ui-input-border-focus: var(--ui-color-interactive);--ui-input-text: var(--ui-color-text);--ui-input-placeholder: var(--ui-color-text-muted)}}
 @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)}}}
@@ -37,8 +37,8 @@
 @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-close-button{--ui-_duration-base: var(--ui-duration-base, 150ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_color-text: var(--ui-color-text, hsl(220, 10%, 10%));--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_color-focus: var(--ui-color-focus, oklch(75% 0.15 250deg));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_size: var(--ui-close-button-size, var(--ui-row-2, 2rem));--ui-_icon-size: var(--ui-close-button-icon-size, var(--ui-size-md, 1rem));--ui-_color: var(--ui-close-button-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_bg: var(--ui-close-button-bg, transparent);--ui-_hover-bg: var(--ui-close-button-hover-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_radius: var(--ui-close-button-radius, var(--ui-radius-md, 0.5rem))}.ui-close-button--sm{--ui-_size: var(--ui-close-button-size-sm, calc(0.5rem * 3));--ui-_icon-size: var(--ui-close-button-icon-size-sm, var(--ui-size-sm, 0.75rem))}.ui-close-button--lg{--ui-_size: var(--ui-close-button-size-lg, var(--ui-row-3, 3rem));--ui-_icon-size: var(--ui-close-button-icon-size-lg, var(--ui-size-lg, 1.25rem))}.ui-close-button--subtle{--ui-_color: var(--ui-close-button-subtle-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_hover-bg: var(--ui-close-button-subtle-hover-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)))}}
 @layer components.styles{.ui-close-button{display:inline-flex;align-items:center;justify-content:center;block-size:var(--ui-_size);inline-size:var(--ui-_size);padding:0;margin:0;font:inherit;color:var(--ui-_color);background:var(--ui-_bg);border:none;border-radius:var(--ui-_radius);cursor:pointer;appearance:none;transition:background-color var(--ui-_duration-base) var(--ui-_ease-default),color var(--ui-_duration-base) var(--ui-_ease-default)}.ui-close-button:hover,.ui-close-button--hover{color:var(--ui-_color-text);background:var(--ui-_hover-bg)}.ui-close-button:focus-visible,.ui-close-button--focus{outline:var(--ui-_border-width-md) solid var(--ui-_color-focus);outline-offset:var(--ui-_border-width-md)}.ui-close-button:active,.ui-close-button--active{transform:scale(0.92)}.ui-close-button:disabled{opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-close-button:disabled:hover{color:var(--ui-_color);background:var(--ui-_bg);transform:none}.ui-close-button__icon{flex-shrink:0;block-size:var(--ui-_icon-size);inline-size:var(--ui-_icon-size);fill:none;stroke:currentcolor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}}
-@layer components.tokens{.ui-divider{--ui-_font-size-sm: var(--ui-font-size-sm, 0.875rem);--ui-_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--ui-_color: var(--ui-divider-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_line-size: var(--ui-divider-line-size, 0.0625rem);--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);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-divider{--ui-_font-size-sm: var(--ui-font-size-sm, 0.875rem);--ui-_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--ui-_color: var(--ui-divider-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_line-size: var(--ui-divider-line-size, 0.0625rem);--ui-_height: var(--ui-divider-height, 0.5rem);--ui-_gap: var(--ui-divider-gap, calc(0.5rem * 2))}.ui-divider:not(:empty){--ui-_height: var(--ui-row-1, 1rem)}}
+@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);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)::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-scroll-area{--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_max-height: var(--ui-scroll-area-max-height, calc(1rem * 10));--ui-_scrollbar-size: var(--ui-scroll-area-scrollbar-size, calc(0.5rem * 1));--ui-_thumb-color: var(--ui-scroll-area-thumb-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_thumb-hover-color: var(--ui-scroll-area-thumb-hover-color, var(--ui-color-neutral-400, hsl(220, 10%, 60%)));--ui-_track-color: var(--ui-scroll-area-track-color, transparent);--ui-_thumb-radius: var(--ui-scroll-area-thumb-radius, var(--ui-radius-full, 9999px))}.ui-scroll-area--sm{--ui-_max-height: var(--ui-scroll-area-max-height-sm, calc(1rem * 5))}.ui-scroll-area--lg{--ui-_max-height: var(--ui-scroll-area-max-height-lg, calc(1rem * 15))}.ui-scroll-area--xl{--ui-_max-height: var(--ui-scroll-area-max-height-xl, calc(1rem * 20))}.ui-scroll-area--thin{--ui-_scrollbar-size: var(--ui-scroll-area-scrollbar-size-thin, calc(0.5rem * 0.5))}}
 @layer components.styles{.ui-scroll-area{overflow:hidden}.ui-scroll-area__viewport{max-block-size:var(--ui-_max-height);overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ui-_thumb-color) var(--ui-_track-color)}.ui-scroll-area__viewport::-webkit-scrollbar{block-size:var(--ui-_scrollbar-size);inline-size:var(--ui-_scrollbar-size)}.ui-scroll-area__viewport::-webkit-scrollbar-track{background:var(--ui-_track-color)}.ui-scroll-area__viewport::-webkit-scrollbar-thumb{background:var(--ui-_thumb-color);border-radius:var(--ui-_thumb-radius)}.ui-scroll-area__viewport::-webkit-scrollbar-thumb:hover{background:var(--ui-_thumb-hover-color)}.ui-scroll-area--horizontal>.ui-scroll-area__viewport{max-block-size:none;overflow-x:auto;overflow-y:hidden}.ui-scroll-area--both>.ui-scroll-area__viewport{overflow-x:auto;overflow-y:auto}.ui-scroll-area--auto-hide>.ui-scroll-area__viewport::-webkit-scrollbar-thumb{background:rgba(0,0,0,0);transition:background var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-scroll-area--auto-hide>.ui-scroll-area__viewport:hover::-webkit-scrollbar-thumb{background:var(--ui-_thumb-color)}}
 @layer components.tokens{.ui-spacer{--ui-_size: var(--ui-spacer-size, 1)}}
@@ -47,8 +47,8 @@
 @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);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) solid var(--ui-_color-bg)}.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-_color: var(--ui-badge-color, 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--lg{--ui-_height: var(--ui-badge-height-lg, calc(var(--ui-row, 1rem) * 1.5));--ui-_padding-x: var(--ui-badge-padding-x-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-badge-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-badge--primary{--ui-_accent: var(--ui-color-primary, oklch(55% 0.22 250deg));--ui-_color: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}.ui-badge--success{--ui-_accent: var(--ui-color-success, oklch(60% 0.18 145deg));--ui-_color: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}.ui-badge--warning{--ui-_accent: var(--ui-color-warning, oklch(75% 0.18 70deg));--ui-_color: var(--ui-color-text, hsl(220, 10%, 10%))}.ui-badge--danger{--ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));--ui-_color: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}}
 @layer components.styles{.ui-badge{display:inline-flex;align-items:center;justify-content:center;block-size:var(--ui-_height);padding-inline:var(--ui-_padding-x);font-size:var(--ui-_font-size);font-weight:var(--ui-_font-weight);line-height:1;white-space:nowrap;color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}}
-@layer components.tokens{.ui-card{--ui-_row-1: var(--ui-row-1, 1rem);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_padding: var(--ui-card-padding, var(--ui-space-4, 2rem));--ui-_border-width: var(--ui-card-border-width, var(--ui-border-width-sm, 0.0625rem));--ui-_bg: var(--ui-card-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-card-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_radius: var(--ui-card-radius, var(--ui-radius-md, 0.5rem))}.ui-card--subtle{--ui-_bg: var(--ui-card-bg-subtle, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)))}.ui-card--muted{--ui-_bg: var(--ui-card-bg-muted, var(--ui-color-bg-muted, hsl(220, 10%, 90%)))}.ui-card--sm{--ui-_padding: var(--ui-card-padding-sm, var(--ui-space-2, 1rem))}.ui-card--lg{--ui-_padding: var(--ui-card-padding-lg, var(--ui-space-6, 3rem))}.ui-card--interactive{cursor:pointer}.ui-card--flush{--ui-_padding: 0;--ui-_border-width: 0}}
-@layer components.styles{.ui-card{padding:calc(var(--ui-_padding) - var(--ui-_border-width));line-height:var(--ui-_row-1);background:var(--ui-_bg);border:var(--ui-_border-width) solid var(--ui-_border-color);border-radius:var(--ui-_radius)}.ui-card--responsive{display:flex;flex-direction:column}@container (inline-size >= 30rem){.ui-card--responsive{flex-direction:row}}.ui-card--responsive>.ui-card__media{inline-size:100%}@container (inline-size >= 30rem){.ui-card--responsive>.ui-card__media{flex:0 0 auto;inline-size:40%}}.ui-card--responsive>.ui-card__body{flex:1 1 auto}.ui-card--interactive{transition:background-color var(--ui-_duration-fast) var(--ui-_ease-default),border-color var(--ui-_duration-fast) var(--ui-_ease-default),box-shadow var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-card--interactive:hover{--ui-_bg: var(--ui-card-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--ui-_border-color: var(--ui-card-border-color-hover, var(--ui-color-border-strong, hsl(220, 10%, 80%)))}.ui-card--interactive:active{--ui-_bg: var(--ui-card-bg-active, var(--ui-color-bg-muted, hsl(220, 10%, 90%)))}}
+@layer components.tokens{.ui-card{--ui-_row-1: var(--ui-row-1, 1rem);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_padding: var(--ui-card-padding, var(--ui-space-4, 2rem));--ui-_border-width: var(--ui-card-border-width, var(--ui-border-width-sm, 0.0625rem));--ui-_bg: var(--ui-card-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-card-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_radius: var(--ui-card-radius, var(--ui-radius-md, 0.5rem))}.ui-card--subtle{--ui-_bg: var(--ui-card-bg-subtle, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)))}.ui-card--muted{--ui-_bg: var(--ui-card-bg-muted, var(--ui-color-bg-muted, hsl(220, 10%, 90%)))}.ui-card--sm{--ui-_padding: var(--ui-card-padding-sm, var(--ui-space-2, 1rem))}.ui-card--lg{--ui-_padding: var(--ui-card-padding-lg, var(--ui-space-6, 3rem))}.ui-card--flush{--ui-_padding: 0;--ui-_border-width: 0}.ui-card--interactive:hover{--ui-_bg: var(--ui-card-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--ui-_border-color: var(--ui-card-border-color-hover, var(--ui-color-border-strong, hsl(220, 10%, 80%)))}.ui-card--interactive:active{--ui-_bg: var(--ui-card-bg-active, var(--ui-color-bg-muted, hsl(220, 10%, 90%)))}}
+@layer components.styles{.ui-card{padding:calc(var(--ui-_padding) - var(--ui-_border-width));line-height:var(--ui-_row-1);background:var(--ui-_bg);border:var(--ui-_border-width) solid var(--ui-_border-color);border-radius:var(--ui-_radius)}.ui-card--responsive{display:flex;flex-direction:column}@container (inline-size >= 30rem){.ui-card--responsive{flex-direction:row}}.ui-card--responsive>.ui-card__media{inline-size:100%}@container (inline-size >= 30rem){.ui-card--responsive>.ui-card__media{flex:0 0 auto;inline-size:40%}}.ui-card--responsive>.ui-card__body{flex:1 1 auto}.ui-card--interactive{cursor:pointer;transition:background-color var(--ui-_duration-fast) var(--ui-_ease-default),border-color var(--ui-_duration-fast) var(--ui-_ease-default),box-shadow var(--ui-_duration-fast) var(--ui-_ease-default)}}
 @layer components.tokens{.ui-data-list{--ui-_row-1: var(--ui-row-1, 1rem);--ui-_font-size-sm: var(--ui-font-size-sm, 0.875rem);--ui-_weight-medium: var(--ui-weight-medium, 500);--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_color-border: var(--ui-color-border, hsl(220, 10%, 90%));--ui-_color-bg-subtle: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));--ui-_radius-sm: var(--ui-radius-sm, 0.25rem);--ui-_font-size-lg: var(--ui-font-size-lg, 1.25rem);--ui-_gap: var(--ui-data-list-gap, calc(0.5rem * 2));--ui-_item-gap: var(--ui-data-list-item-gap, calc(0.5rem * 1));--ui-_label-color: var(--ui-data-list-label-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_value-color: var(--ui-data-list-value-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-data-list--sm{--ui-_gap: calc(0.5rem * 1);--ui-_item-gap: 0}.ui-data-list--lg{--ui-_gap: calc(0.5rem * 3);--ui-_item-gap: calc(0.5rem * 1)}}
 @layer components.styles{.ui-data-list{display:flex;flex-direction:column;gap:var(--ui-_gap);margin:0;line-height:var(--ui-_row-1)}.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);font-weight:var(--ui-_weight-medium);line-height:var(--ui-_row-1);color:var(--ui-_label-color)}.ui-data-list__value{margin:0;line-height:var(--ui-_row-1);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));border-block-end:var(--ui-_border-width-sm) solid var(--ui-_color-border)}.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);border-radius:var(--ui-_radius-sm)}.ui-data-list--sm{font-size:var(--ui-_font-size-sm)}.ui-data-list--lg{font-size:var(--ui-_font-size-lg)}}
 @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)}}
@@ -70,8 +70,8 @@
 @layer components.tokens{.ui-alert{--ui-_weight-medium: var(--ui-weight-medium, 500);--ui-_row-1: var(--ui-row-1, 1rem);--ui-_font-size-sm: var(--ui-font-size-sm, 0.875rem);--ui-_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--ui-_color-text: var(--ui-color-text, hsl(220, 10%, 10%));--ui-_accent: var(--ui-alert-accent, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_padding: var(--ui-alert-padding, var(--ui-space-2, 1rem));--ui-_border-width: var(--ui-alert-border-width, var(--ui-border-width-sm, 0.0625rem));--ui-_gap: var(--ui-alert-gap, var(--ui-space-1, 0.5rem));--ui-_radius: var(--ui-alert-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: color-mix(in oklch, var(--ui-_accent) 8%, white);--ui-_border-color: var(--ui-_accent);--ui-_color: var(--ui-alert-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_font-size: var(--ui-alert-font-size, inherit);--ui-_padding-end: 0;--ui-_icon-color: var(--ui-_accent)}.ui-alert--info{--ui-_accent: var(--ui-color-primary, oklch(55% 0.22 250deg))}.ui-alert--success{--ui-_accent: var(--ui-color-success, oklch(60% 0.18 145deg))}.ui-alert--warning{--ui-_accent: var(--ui-color-warning, oklch(75% 0.18 70deg))}.ui-alert--danger{--ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg))}.ui-alert--sm{--ui-_padding: var(--ui-alert-padding-sm, var(--ui-space-1, 0.5rem));--ui-_gap: var(--ui-alert-gap-sm, calc(0.5rem * 0.5));--ui-_font-size: var(--ui-alert-font-size-sm, var(--ui-font-size-sm, 0.875rem))}.ui-alert--lg{--ui-_padding: var(--ui-alert-padding-lg, var(--ui-space-4, 2rem));--ui-_gap: var(--ui-alert-gap-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-alert-font-size-lg, var(--ui-font-size-lg, 1.25rem))}.ui-alert--dismissible{--ui-_padding-end: var(--ui-alert-padding-end, calc(0.5rem * 5))}}
 @layer components.styles{.ui-alert{display:flex;align-items:flex-start;gap:var(--ui-_gap);padding:calc(var(--ui-_padding) - var(--ui-_border-width));padding-inline:var(--ui-_padding);padding-inline-end:calc(var(--ui-_padding) + var(--ui-_padding-end));font-size:var(--ui-_font-size);color:var(--ui-_color);background:var(--ui-_bg);border:var(--ui-_border-width) solid var(--ui-_border-color);border-radius:var(--ui-_radius);border-inline-start-width:calc(0.5rem*.5)}.ui-alert__icon{flex-shrink:0;color:var(--ui-_icon-color)}.ui-alert__content{flex:1;min-inline-size:0}.ui-alert__title{margin:0;font-weight:var(--ui-_weight-medium);line-height:var(--ui-_row-1)}.ui-alert__description{margin:0;margin-block-start:calc(0.5rem*1);font-size:var(--ui-_font-size-sm);line-height:var(--ui-_row-1);color:var(--ui-_color-text-muted)}.ui-alert__close{flex-shrink:0;align-self:flex-start;padding:0;color:var(--ui-_color-text-muted);background:none;border:none;cursor:pointer}.ui-alert__close:hover{color:var(--ui-_color-text)}}
 @property --ui-progress-value{syntax:"<percentage>";inherits:false;initial-value:0%}
-@layer components.tokens{.ui-progress{--ui-_duration-normal: var(--ui-duration-normal, 200ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_height: var(--ui-progress-height, calc(0.5rem * 1));--ui-_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, rgba(0, 0, 0, 0.1)));--ui-_fill: var(--ui-progress-fill, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_radius: var(--ui-progress-radius, var(--ui-radius-full, 9999px))}.ui-progress--sm{--ui-_height: calc(0.5rem * 1)}.ui-progress--lg{--ui-_height: calc(0.5rem * 2)}}
-@layer components.styles{.ui-progress{position:relative;block-size:var(--ui-_height);overflow:hidden;background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-progress__bar{block-size:100%;inline-size:var(--ui-progress-value, auto);background:var(--ui-_fill);border-radius:var(--ui-_radius);transition:inline-size var(--ui-_duration-normal) var(--ui-_ease-default),--ui-progress-value var(--ui-_duration-normal) var(--ui-_ease-default)}.ui-progress--indeterminate .ui-progress__bar{inline-size:30%;animation:progress-indeterminate 1.5s infinite ease-in-out}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}.ui-progress--striped .ui-progress__bar{background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-size:0.5rem 0.5rem}.ui-progress--animated .ui-progress__bar{animation:progress-stripes 1s linear infinite}@keyframes progress-stripes{from{background-position:0.5rem 0}to{background-position:0 0}}@media(prefers-reduced-motion: reduce){.ui-progress--indeterminate .ui-progress__bar{animation:none}.ui-progress--animated .ui-progress__bar{animation:none}}.ui-progress--success{--ui-_fill: var(--ui-color-success, oklch(60% 0.18 145deg))}.ui-progress--warning{--ui-_fill: var(--ui-color-warning, oklch(75% 0.18 70deg))}.ui-progress--danger{--ui-_fill: var(--ui-color-danger, oklch(60% 0.22 25deg))}}
+@layer components.tokens{.ui-progress{--ui-_duration-normal: var(--ui-duration-normal, 200ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_height: var(--ui-progress-height, calc(0.5rem * 1));--ui-_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, rgba(0, 0, 0, 0.1)));--ui-_fill: var(--ui-progress-fill, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_radius: var(--ui-progress-radius, var(--ui-radius-full, 9999px))}.ui-progress--sm{--ui-_height: calc(0.5rem * 1)}.ui-progress--lg{--ui-_height: calc(0.5rem * 2)}.ui-progress--success{--ui-_fill: var(--ui-color-success, oklch(60% 0.18 145deg))}.ui-progress--warning{--ui-_fill: var(--ui-color-warning, oklch(75% 0.18 70deg))}.ui-progress--danger{--ui-_fill: var(--ui-color-danger, oklch(60% 0.22 25deg))}}
+@layer components.styles{.ui-progress{position:relative;block-size:var(--ui-_height);overflow:hidden;background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-progress__bar{block-size:100%;inline-size:var(--ui-progress-value, auto);background:var(--ui-_fill);border-radius:var(--ui-_radius);transition:inline-size var(--ui-_duration-normal) var(--ui-_ease-default),--ui-progress-value var(--ui-_duration-normal) var(--ui-_ease-default)}.ui-progress--indeterminate .ui-progress__bar{inline-size:30%;animation:progress-indeterminate 1.5s infinite ease-in-out}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}.ui-progress--striped .ui-progress__bar{background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-size:0.5rem 0.5rem}.ui-progress--animated .ui-progress__bar{animation:progress-stripes 1s linear infinite}@keyframes progress-stripes{from{background-position:0.5rem 0}to{background-position:0 0}}@media(prefers-reduced-motion: reduce){.ui-progress--indeterminate .ui-progress__bar{animation:none}.ui-progress--animated .ui-progress__bar{animation:none}}}
 @property --ui-progress-circle-value{syntax:"<number>";inherits:false;initial-value:0}
 @layer components.tokens{.ui-progress-circle{--ui-_duration-slow: var(--ui-duration-slow, 250ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_size: var(--ui-progress-circle-size, calc(var(--ui-unit, 0.5rem) * 6));--ui-_stroke-width: var(--ui-progress-circle-stroke-width, 8);--ui-_fill-color: var(--ui-progress-circle-fill-color, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_track-color: var(--ui-progress-circle-track-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_value: var(--ui-progress-circle-value, 0);--ui-_circumference: 282.743}.ui-progress-circle--sm{--ui-_size: var(--ui-progress-circle-size-sm, calc(var(--ui-unit, 0.5rem) * 4))}.ui-progress-circle--lg{--ui-_size: var(--ui-progress-circle-size-lg, calc(var(--ui-unit, 0.5rem) * 8))}.ui-progress-circle--xl{--ui-_size: var(--ui-progress-circle-size-xl, calc(var(--ui-unit, 0.5rem) * 12))}.ui-progress-circle--success{--ui-_fill-color: var(--ui-color-success, oklch(60% 0.18 145deg))}.ui-progress-circle--warning{--ui-_fill-color: var(--ui-color-warning, oklch(75% 0.18 70deg))}.ui-progress-circle--danger{--ui-_fill-color: var(--ui-color-danger, oklch(60% 0.22 25deg))}}
 @layer components.styles{.ui-progress-circle{display:inline-block;flex-shrink:0;block-size:var(--ui-_size);inline-size:var(--ui-_size);vertical-align:middle;transform:rotate(-90deg)}.ui-progress-circle__track{fill:none;stroke:var(--ui-_track-color);stroke-width:var(--ui-_stroke-width)}.ui-progress-circle__fill{fill:none;stroke:var(--ui-_fill-color);stroke-width:var(--ui-_stroke-width);stroke-linecap:round;stroke-dasharray:var(--ui-_circumference);stroke-dashoffset:calc(var(--ui-_circumference)*(1 - var(--ui-_value)/100));transition:stroke-dashoffset var(--ui-_duration-slow) var(--ui-_ease-default),--ui-progress-circle-value var(--ui-_duration-slow) var(--ui-_ease-default)}.ui-progress-circle--indeterminate{animation:progress-circle-rotate 1.4s linear infinite}.ui-progress-circle--indeterminate .ui-progress-circle__fill{stroke-dashoffset:calc(var(--ui-_circumference)*.25);transition:none}@keyframes progress-circle-rotate{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}@media(prefers-reduced-motion: reduce){.ui-progress-circle--indeterminate{animation:none}}}
@@ -89,8 +89,8 @@
 @layer components.styles{.ui-field{display:flex;flex-direction:column;gap:var(--ui-_gap)}.ui-field__control{display:flex;flex-direction:column}.ui-field--horizontal{flex-direction:row;flex-wrap:wrap;align-items:flex-start}.ui-field--horizontal>.ui-field__label{flex:0 0 auto;min-inline-size:calc(0.5rem*15);padding-block-start:calc(0.5rem*1)}.ui-field--horizontal>.ui-field__control{flex:1 1 0;min-inline-size:calc(0.5rem*20)}.ui-field--responsive{flex-direction:column}@container (inline-size >= 30rem){.ui-field--responsive{flex-direction:row;flex-wrap:wrap;align-items:flex-start}}@container (inline-size >= 30rem){.ui-field--responsive>.ui-field__label{flex:0 0 auto;min-inline-size:calc(0.5rem*15);padding-block-start:calc(0.5rem*1)}}@container (inline-size >= 30rem){.ui-field--responsive>.ui-field__control{flex:1 1 0;min-inline-size:calc(0.5rem*20)}}}
 @layer components.tokens{.ui-fieldset{--ui-_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, 1rem));--ui-_space-half: var(--ui-space-half, 0.25rem);--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_spacing: var(--ui-fieldset-spacing, var(--ui-space-2, 1rem));--ui-_border-color: var(--ui-fieldset-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_border-width: var(--ui-fieldset-border-width, var(--ui-border-width-sm, 0.0625rem));--ui-_border-radius: var(--ui-fieldset-border-radius, var(--ui-radius-md, 0.5rem));--ui-_padding: var(--ui-fieldset-padding, var(--ui-space-2, 1rem));--ui-_legend-size: var(--ui-fieldset-legend-size, var(--ui-font-size-sm, 0.875rem));--ui-_legend-weight: var(--ui-fieldset-legend-weight, var(--ui-weight-medium, 500));--ui-_legend-color: var(--ui-fieldset-legend-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-fieldset--compact{--ui-_spacing: var(--ui-fieldset-spacing-compact, var(--ui-space-1, 0.5rem));--ui-_padding: var(--ui-fieldset-padding-compact, var(--ui-space-1, 0.5rem))}}
 @layer components.styles{.ui-fieldset{display:flex;flex-direction:column;gap:var(--ui-_spacing);min-inline-size:0;padding:0;margin:0;border:none}.ui-fieldset__legend{inline-size:100%;padding:0;font-size:var(--ui-_legend-size);font-weight:var(--ui-_legend-weight);line-height:var(--ui-_leading-tight-sm);color:var(--ui-_legend-color)}.ui-fieldset--bordered{padding:var(--ui-_padding);padding-block-end:calc(var(--ui-_padding) - var(--ui-_border-width));border:var(--ui-_border-width) solid var(--ui-_border-color);border-radius:var(--ui-_border-radius)}.ui-fieldset--bordered>.ui-fieldset__legend{inline-size:auto;padding-inline:var(--ui-_space-half);margin-inline-start:calc(-1*var(--ui-_space-half))}.ui-fieldset:disabled,.ui-fieldset[aria-disabled=true]{opacity:var(--ui-_opacity-disabled);cursor:not-allowed}}
-@layer components.tokens{.ui-form{--ui-_spacing: var(--ui-form-spacing, var(--ui-space-3, calc(0.5rem * 3)));--ui-_actions-gap: var(--ui-form-actions-gap, var(--ui-space-2, calc(0.5rem * 2)));--ui-_section-spacing: var(--ui-form-section-spacing, var(--ui-space-4, calc(0.5rem * 4)))}}
-@layer components.styles{.ui-form{display:flex;flex-direction:column;gap:var(--ui-_spacing)}.ui-form__section{display:flex;flex-direction:column;gap:var(--ui-_spacing);padding:0;margin:0;border:0}.ui-form__section+.ui-form__section{padding-block-start:var(--ui-_section-spacing)}.ui-form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-_actions-gap)}.ui-form--compact{--ui-_spacing: var(--ui-form-spacing-compact, var(--ui-space-2, calc(0.5rem * 2)));--ui-_section-spacing: var(--ui-form-section-spacing-compact, var(--ui-space-3, calc(0.5rem * 3)))}.ui-form--inline{flex-direction:row;flex-wrap:wrap;align-items:flex-end}.ui-form--inline>.ui-form__actions{align-items:flex-end}}
+@layer components.tokens{.ui-form{--ui-_spacing: var(--ui-form-spacing, var(--ui-space-3, calc(0.5rem * 3)));--ui-_actions-gap: var(--ui-form-actions-gap, var(--ui-space-2, calc(0.5rem * 2)));--ui-_section-spacing: var(--ui-form-section-spacing, var(--ui-space-4, calc(0.5rem * 4)))}.ui-form--compact{--ui-_spacing: var(--ui-form-spacing-compact, var(--ui-space-2, calc(0.5rem * 2)));--ui-_section-spacing: var(--ui-form-section-spacing-compact, var(--ui-space-3, calc(0.5rem * 3)))}}
+@layer components.styles{.ui-form{display:flex;flex-direction:column;gap:var(--ui-_spacing)}.ui-form__section{display:flex;flex-direction:column;gap:var(--ui-_spacing);padding:0;margin:0;border:0}.ui-form__section+.ui-form__section{padding-block-start:var(--ui-_section-spacing)}.ui-form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-_actions-gap)}.ui-form--inline{flex-direction:row;flex-wrap:wrap;align-items:flex-end}.ui-form--inline>.ui-form__actions{align-items:flex-end}}
 @layer components.tokens{.ui-form-error{--ui-_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, 1rem));--ui-_color: var(--ui-form-error-color, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_size: var(--ui-form-error-size, var(--ui-font-size-sm, 0.875rem));--ui-_gap: var(--ui-form-error-gap, 0)}}
 @layer components.styles{.ui-form-error{display:flex;align-items:flex-start;gap:var(--ui-_gap);margin-block-start:var(--ui-_gap);font-size:var(--ui-_size);line-height:var(--ui-_leading-tight-sm);color:var(--ui-_color)}.ui-form-error__icon{flex-shrink:0}}
 @layer components.tokens{.ui-form-helper{--ui-_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, 1rem));--ui-_color: var(--ui-form-helper-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_size: var(--ui-form-helper-size, var(--ui-font-size-sm, 0.875rem));--ui-_gap: var(--ui-form-helper-gap, 0)}}

package/package.json

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

package/src/base/index.scss

@@ -1,2 +1,2 @@
-@forward "./root/root";
+@forward "./root";
 @forward "./typography/typography";

package/src/base/{root/root.scss → root.scss}

@@ -1,4 +1,4 @@
-@use '../../config/tokens/variables' as t;
+@use '../config/tokens/variables' as t;
 
 @layer base {
   .root {

package/src/components/content/divider/index.scss

@@ -16,6 +16,11 @@
     // @desc Gap between children
     --_gap: var(--ui-divider-gap, calc(#{t.$unit} * 2));
   }
+
+  // With text label - taller to accommodate text
+  .divider:not(:empty) {
+    --_height: var(--ui-row-1, #{t.$row});
+  }
 }
 
 @layer components.styles {
@@ -43,11 +48,6 @@
     background: var(--_color);
   }
 
-  // With text label - taller to accommodate text
-  .divider:not(:empty) {
-    --_height: var(--ui-row-1, #{t.$row});
-  }
-
   .divider:not(:empty)::before {
     margin-inline-end: calc(#{t.$unit} * 2);
   }

package/src/components/data-display/card/card.api.json

@@ -9,10 +9,10 @@
     "size": {
       "values": ["sm", "lg"]
     },
-    "interactive": {
+    "flush": {
       "type": "boolean"
     },
-    "flush": {
+    "interactive": {
       "type": "boolean"
     },
     "responsive": {
@@ -68,6 +68,21 @@
       "name": "--ui-card-padding-lg",
       "default": "var(--ui-space-6)",
       "description": "Padding on all sides at large size"
+    },
+    {
+      "name": "--ui-card-bg-hover",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Bg hover"
+    },
+    {
+      "name": "--ui-card-border-color-hover",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color hover"
+    },
+    {
+      "name": "--ui-card-bg-active",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Bg active"
     }
   ]
 }

package/src/components/data-display/card/index.scss

@@ -32,16 +32,26 @@
   // @desc Padding on all sides at large size
   .card--lg { --_padding: var(--ui-card-padding-lg, var(--ui-space-6, #{t.$space-6})); }
 
-  // @modifier boolean interactive
-  .card--interactive {
-    cursor: pointer;
-  }
-
   // @modifier boolean flush
   .card--flush {
     --_padding: 0;
     --_border-width: 0;
   }
+
+  // @modifier boolean interactive
+  .card--interactive {
+    &:hover {
+      // @desc Bg hover
+      --_bg: var(--ui-card-bg-hover, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+      // @desc Border color hover
+      --_border-color: var(--ui-card-border-color-hover, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    }
+
+    &:active {
+      // @desc Bg active
+      --_bg: var(--ui-card-bg-active, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    }
+  }
 }
 
 @layer components.styles {
@@ -85,21 +95,11 @@
   }
 
   .card--interactive {
+    cursor: pointer;
+
     transition:
       background-color var(--_duration-fast) var(--_ease-default),
       border-color var(--_duration-fast) var(--_ease-default),
       box-shadow var(--_duration-fast) var(--_ease-default);
-
-    &:hover {
-      // @desc Bg hover
-      --_bg: var(--ui-card-bg-hover, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
-      // @desc Border color hover
-      --_border-color: var(--ui-card-border-color-hover, var(--ui-color-border-strong, #{t.$color-border-strong}));
-    }
-
-    &:active {
-      // @desc Bg active
-      --_bg: var(--ui-card-bg-active, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
-    }
   }
 }

package/src/components/feedback/progress/index.scss

@@ -36,6 +36,20 @@
   .progress--lg {
     --_height: calc(#{t.$unit} * 2);
   }
+
+  // Color variants
+  // @modifier variant
+  .progress--success {
+    --_fill: var(--ui-color-success, #{t.$color-success});
+  }
+
+  .progress--warning {
+    --_fill: var(--ui-color-warning, #{t.$color-warning});
+  }
+
+  .progress--danger {
+    --_fill: var(--ui-color-danger, #{t.$color-danger});
+  }
 }
 
 @layer components.styles {
@@ -122,18 +136,4 @@
       animation: none;
     }
   }
-
-  // Color variants
-  // @modifier variant
-  .progress--success {
-    --_fill: var(--ui-color-success, #{t.$color-success});
-  }
-
-  .progress--warning {
-    --_fill: var(--ui-color-warning, #{t.$color-warning});
-  }
-
-  .progress--danger {
-    --_fill: var(--ui-color-danger, #{t.$color-danger});
-  }
 }

package/src/components/feedback/progress/progress.api.json

@@ -6,6 +6,9 @@
     "size": {
       "values": ["sm", "lg"]
     },
+    "variant": {
+      "values": ["success", "warning", "danger"]
+    },
     "indeterminate": {
       "type": "boolean"
     },
@@ -14,9 +17,6 @@
     },
     "animated": {
       "type": "boolean"
-    },
-    "variant": {
-      "values": ["success", "warning", "danger"]
     }
   },
   "elements": {

package/src/components/forms/form/form.api.json

@@ -37,6 +37,16 @@
       "name": "--ui-form-section-spacing",
       "default": "var(--ui-space-4)",
       "description": "Section spacing"
+    },
+    {
+      "name": "--ui-form-spacing-compact",
+      "default": "var(--ui-space-2)",
+      "description": "Spacing compact"
+    },
+    {
+      "name": "--ui-form-section-spacing-compact",
+      "default": "var(--ui-space-3)",
+      "description": "Section spacing compact"
     }
   ]
 }

package/src/components/forms/form/index.scss

@@ -15,6 +15,15 @@
     // @desc Section spacing
     --_section-spacing: var(--ui-form-section-spacing, var(--ui-space-4, calc(#{t.$unit} * 4)));
   }
+
+  // Compact variant - tighter spacing
+  // @modifier boolean compact
+  .form--compact {
+    // @desc Spacing compact
+    --_spacing: var(--ui-form-spacing-compact, var(--ui-space-2, calc(#{t.$unit} * 2)));
+    // @desc Section spacing compact
+    --_section-spacing: var(--ui-form-section-spacing-compact, var(--ui-space-3, calc(#{t.$unit} * 3)));
+  }
 }
 
 @layer components.styles {
@@ -49,15 +58,6 @@
     gap: var(--_actions-gap);
   }
 
-  // Compact variant - tighter spacing
-  // @modifier boolean compact
-  .form--compact {
-    // @desc Spacing compact
-    --_spacing: var(--ui-form-spacing-compact, var(--ui-space-2, calc(#{t.$unit} * 2)));
-    // @desc Section spacing compact
-    --_section-spacing: var(--ui-form-section-spacing-compact, var(--ui-space-3, calc(#{t.$unit} * 3)));
-  }
-
   // Inline variant - horizontal layout for short forms (search, filters)
   // @modifier boolean inline
   .form--inline {

package/src/config/tokens/_variables.scss

@@ -3,9 +3,12 @@
 // SCSS Variables - Source of truth for fallback values
 // These are the computed values that CSS custom properties resolve to.
 // Import this file in components that need standalone fallbacks.
+// Section order mirrors config/tokens/index.scss import order.
 
-// Grid - all derived from $unit
-$unit: 0.5rem; // 8px
+// ==========================================================================
+// 1. Grid — all derived from $unit
+// ==========================================================================
+$unit: 0.5rem; // 8px (matches --ui-unit: 8px)
 $row: $unit * 2; // 16px
 $row-1: $row;
 $row-2: $row * 2; // 32px
@@ -14,7 +17,41 @@ $row-4: $row * 4;
 $row-5: $row * 5;
 $row-6: $row * 6;
 
-// Spacing - derived from $unit
+// ==========================================================================
+// 2. Colors — OKLCH for perceptual uniformity
+// ==========================================================================
+
+// Theming hue — used in HSL fallbacks for shadows, debug overlays
+$hue-primary: 220;
+
+// Base palette
+$color-primary: oklch(55% 0.22 250);
+$color-success: oklch(60% 0.18 145);
+$color-warning: oklch(75% 0.18 70);
+$color-danger: oklch(60% 0.22 25);
+$color-neutral: oklch(50% 0.02 250);
+
+// Neutral scale — HSL approximation of color-mix(in oklch, ...) results.
+// CSS tokens use oklch color-mix(); these HSL values are static SCSS
+// fallbacks for when custom properties are unavailable.
+$color-neutral-50: hsl(220 10% 98%);
+$color-neutral-100: hsl(220 10% 96%);
+$color-neutral-200: hsl(220 10% 90%);
+$color-neutral-300: hsl(220 10% 80%);
+$color-neutral-400: hsl(220 10% 60%);
+$color-neutral-500: hsl(220 10% 45%);
+$color-neutral-600: hsl(220 10% 35%);
+$color-neutral-700: hsl(220 10% 25%);
+$color-neutral-800: hsl(220 10% 15%);
+$color-neutral-900: hsl(220 10% 10%);
+
+// Primary shades (CSS uses color-mix)
+$color-primary-light: oklch(75% 0.15 250);
+$color-primary-dark: oklch(40% 0.18 250);
+
+// ==========================================================================
+// 3. Spacing — derived from $unit
+// ==========================================================================
 $space-px: $unit * 0.125; // 1px - hairline
 $space-quarter: $unit * 0.25; // 2px - micro spacing
 $space-0: $unit * 0.5; // 4px
@@ -39,11 +76,15 @@ $sizes: (
   @return map.get($sizes, $name);
 }
 
-// Typography - Font families (system stack, consumers override via CSS tokens)
+// ==========================================================================
+// 4. Typography
+// ==========================================================================
+
+// Font families (system stack, consumers override via CSS tokens)
 $font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
 $font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
 
-// Typography - Font sizes (1.2 modular scale)
+// Font sizes (1.2 modular scale)
 $font-size-xs: 0.75rem; // 12px
 $font-size-sm: 0.875rem; // 14px
 $font-size-md: 1rem; // 16px (base)
@@ -53,13 +94,13 @@ $font-size-2xl: 1.75rem; // 28px
 $font-size-3xl: 2rem; // 32px
 $font-size-4xl: 2.5rem; // 40px
 
-// Typography - Tight line heights (for compact UI elements)
+// Tight line heights (compact UI elements)
 $leading-tight-xs: $row;
 $leading-tight-sm: $row;
 $leading-tight-md: $unit * 3;
 $leading-tight-lg: $unit * 3;
 
-// Typography - Line heights (for body text)
+// Normal line heights (body text)
 $leading-xs: $row;
 $leading-sm: $unit * 3;
 $leading-md: $unit * 3;
@@ -69,54 +110,68 @@ $leading-2xl: $row-2;
 $leading-3xl: $unit * 5;
 $leading-4xl: $unit * 6;
 
-// Typography - Font weights
+// Font weights
 $weight-normal: 400;
 $weight-medium: 500;
 $weight-semibold: 600;
 $weight-bold: 700;
 
-// Typography - Letter spacing
+// Letter spacing
 $tracking-display: -0.02em;
 $tracking-body: 0;
 $tracking-caps: 0.08em;
 
-
-// Radius - derived from $unit (0.5rem = 8px)
+// ==========================================================================
+// 5. Radius — derived from $unit
+// ==========================================================================
 $radius-sm: $unit * 0.5; // 4px
 $radius-md: $unit; // 8px
 $radius-lg: $unit * 2; // 16px
 $radius-full: 9999px;
 
-// Borders - derived from $unit (0.5rem = 8px)
+// ==========================================================================
+// 6. Borders — derived from $unit
+// ==========================================================================
 $border-width-sm: $unit * 0.125; // 1px
 $border-width-md: $unit * 0.25; // 2px
 $border-width-lg: $unit * 0.5; // 4px
 
-// Base colors - OKLCH for perceptual uniformity
-// These are fallback values; CSS custom properties take precedence
-$color-primary: oklch(55% 0.22 250);
-$color-success: oklch(60% 0.18 145);
-$color-warning: oklch(75% 0.18 70);
-$color-danger: oklch(60% 0.22 25);
-$color-neutral: oklch(50% 0.02 250);
+// ==========================================================================
+// 7. Shadows — static hue fallback
+// ==========================================================================
+$shadow-sm: 0 1px 2px hsl(220 10% 20% / 0.05);
+$shadow-md: 0 4px 6px hsl(220 10% 20% / 0.1);
+$shadow-lg: 0 10px 15px hsl(220 10% 20% / 0.15);
 
-// Neutral scale - approximated from color-mix in oklch
-$color-neutral-50: hsl(220 10% 98%);
-$color-neutral-100: hsl(220 10% 96%);
-$color-neutral-200: hsl(220 10% 90%);
-$color-neutral-300: hsl(220 10% 80%);
-$color-neutral-400: hsl(220 10% 60%);
-$color-neutral-500: hsl(220 10% 45%);
-$color-neutral-600: hsl(220 10% 35%);
-$color-neutral-700: hsl(220 10% 25%);
-$color-neutral-800: hsl(220 10% 15%);
-$color-neutral-900: hsl(220 10% 10%);
+// ==========================================================================
+// 8. Z-index scale
+// ==========================================================================
+$z-base: 0;
+$z-sticky: 100;
+$z-dropdown: 200;
+$z-overlay: 300;
+$z-modal: 400;
+$z-popover: 500;
+$z-tooltip: 600;
+$z-toast: 700;
+$z-drawer: 800;
+$z-debug: 9999;
 
-// Primary shades - fallbacks (CSS uses color-mix)
-$color-primary-light: oklch(75% 0.15 250);
-$color-primary-dark: oklch(40% 0.18 250);
+// ==========================================================================
+// 9. Motion
+// ==========================================================================
+$duration-instant: 50ms;
+$duration-fast: 100ms;
+$duration-base: 150ms;
+$duration-normal: 200ms;
+$duration-slow: 250ms;
+$duration-slower: 400ms;
 
-// Semantic colors (light theme defaults)
+$ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+
+// ==========================================================================
+// 10. Semantic colors (light theme defaults)
+// ==========================================================================
 $color-text: $color-neutral-900;
 $color-text-muted: $color-neutral-500;
 $color-text-inverse: $color-neutral-50;
@@ -133,37 +188,6 @@ $color-interactive-hover: $color-primary-dark;
 
 $color-focus: $color-primary-light;
 
-// Motion - duration scale (matches config/tokens/motion)
-$duration-instant: 50ms;
-$duration-fast: 100ms;
-$duration-base: 150ms;
-$duration-normal: 200ms;
-$duration-slow: 250ms;
-$duration-slower: 400ms;
-
-// Motion - easing (matches config/tokens/motion)
-$ease-default: cubic-bezier(0.4, 0, 0.2, 1);
-
-// Shadows (matches config/tokens/shadows, static hue fallback)
-$shadow-sm: 0 1px 2px hsl(220 10% 20% / 0.05);
-$shadow-md: 0 4px 6px hsl(220 10% 20% / 0.1);
-$shadow-lg: 0 10px 15px hsl(220 10% 20% / 0.15);
-
-// Z-index scale (matches config/tokens/zindex)
-$z-base: 0;
-$z-sticky: 100;
-$z-dropdown: 200;
-$z-overlay: 300;
-$z-modal: 400;
-$z-popover: 500;
-$z-tooltip: 600;
-$z-toast: 700;
-$z-drawer: 800;
-$z-debug: 9999;
-
-// Theming
-$hue-primary: 220;
-
 // State opacity
 $opacity-disabled: 0.5;
 $opacity-loading: 0.7;
@@ -174,17 +198,32 @@ $overlay-bg-light: rgb(255 255 255 / 0.7);
 $overlay-bg-blur: rgb(0 0 0 / 0.3);
 $overlay-bg-subtle: rgb(0 0 0 / 0.1);
 
-// Component defaults - icons
+// ==========================================================================
+// 11. Semantic spacing
+// ==========================================================================
+$spacing-xs: $space-1;
+$spacing-sm: $space-2;
+$spacing-md: $space-4;
+$spacing-lg: $space-6;
+$spacing-xl: $space-8;
+$spacing-gutter: $space-4;
+$spacing-section: $space-8;
+
+// ==========================================================================
+// 12. Component defaults
+// ==========================================================================
+
+// Icons
 $icon-stroke: 2;
 $icon-stroke-thin: 1;
 $icon-stroke-thick: 2.5;
 
-// Component defaults - feedback
+// Feedback
 $spinner-duration: 750ms;
 $progress-circle-stroke-width: 8;
 $skeleton-shimmer: rgb(255 255 255 / 0.5);
 
-// Component defaults - misc
+// Misc
 $slider-thumb-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
 $toast-viewport-max-width: 420px;
 $spacer-size: 1;