@teseor/css 1.13.0 → 1.14.1

package/dist/index.css

@@ -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)}}
@@ -69,10 +69,12 @@
 @layer components.styles{.ui-disclosure{box-sizing:border-box;border-radius:var(--ui-_radius);outline:var(--ui-_border-width) solid var(--ui-_border-color);outline-offset:calc(var(--ui-_border-width)*-1)}.ui-disclosure:not([open]){block-size:var(--ui-_trigger-height)}.ui-disclosure__trigger{display:flex;align-items:center;justify-content:space-between;gap:calc(0.5rem*2);block-size:var(--ui-_trigger-height);inline-size:100%;padding-inline:var(--ui-_padding-x);font-weight:var(--ui-_weight-medium);line-height:1;text-align:start;cursor:pointer;list-style:none}.ui-disclosure__trigger::-webkit-details-marker{display:none}.ui-disclosure__trigger::marker{display:none}.ui-disclosure__trigger:hover{background:var(--ui-_color-bg-subtle)}.ui-disclosure__icon{flex-shrink:0;transition:transform var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-disclosure[open] .ui-disclosure__icon{transform:rotate(180deg)}.ui-disclosure__content{padding:0 var(--ui-_padding-x) var(--ui-_padding-y)}.ui-disclosure--animate .ui-disclosure__content{animation:disclosure-open var(--ui-_duration-normal) var(--ui-_ease-default)}@keyframes disclosure-open{from{opacity:0;transform:translateY(calc(0.5rem * -1))}to{opacity:1;transform:translateY(0)}}.ui-disclosure--borderless{border:none;border-radius:0}.ui-disclosure--flush .ui-disclosure__trigger{padding-inline:0}.ui-disclosure--flush .ui-disclosure__content{padding-inline:0}@media(prefers-reduced-motion: reduce){.ui-disclosure--animate .ui-disclosure__content{animation:none}.ui-disclosure__icon{transition:none}}}
 @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)}}
-@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%;background:var(--ui-_fill);border-radius:var(--ui-_radius);transition:inline-size 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))}}
+@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)}.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--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}}}
+@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}}}
 @layer components.tokens{.ui-skeleton{--ui-_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, rgba(0, 0, 0, 0.1)));--ui-_shimmer: var(--ui-skeleton-shimmer, rgba(255, 255, 255, 0.5));--ui-_radius: var(--ui-skeleton-radius, var(--ui-radius-sm, calc(0.5rem / 2)))}}
 @layer components.styles{.ui-skeleton{display:block;position:relative;overflow:hidden;background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent 0%, var(--ui-_shimmer) 50%, transparent 100%);animation:skeleton-shimmer 1.5s infinite;transform:translateX(-100%)}@keyframes skeleton-shimmer{100%{transform:translateX(100%)}}.ui-skeleton--text{block-size:calc(0.5rem*2);inline-size:100%}.ui-skeleton--heading{block-size:calc(0.5rem*3);inline-size:60%}.ui-skeleton--circle{block-size:calc(0.5rem*5);inline-size:calc(0.5rem*5);border-radius:50%}.ui-skeleton--rect{block-size:calc(0.5rem*20);inline-size:100%}.ui-skeleton--static::after{animation:none}.ui-skeleton--pulse{animation:skeleton-pulse 1.5s infinite ease-in-out}.ui-skeleton--pulse::after{display:none}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion: reduce){.ui-skeleton::after{animation:none}.ui-skeleton--pulse{animation:none}}}
 @layer components.tokens{.ui-spinner{--ui-_size: var(--ui-spinner-size, calc(var(--ui-unit, 0.5rem) * 4));--ui-_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md, 0.125rem));--ui-_color: var(--ui-spinner-color, currentcolor);--ui-_track-color: var(--ui-spinner-track-color, transparent);--ui-_duration: var(--ui-spinner-duration, 750ms)}.ui-spinner--xs{--ui-_size: var(--ui-spinner-size-xs, calc(var(--ui-unit, 0.5rem) * 2));--ui-_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm, 0.0625rem))}.ui-spinner--sm{--ui-_size: var(--ui-spinner-size-sm, calc(var(--ui-unit, 0.5rem) * 3));--ui-_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md, 0.125rem))}.ui-spinner--lg{--ui-_size: var(--ui-spinner-size-lg, calc(var(--ui-unit, 0.5rem) * 5));--ui-_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md, 0.125rem))}.ui-spinner--xl{--ui-_size: var(--ui-spinner-size-xl, calc(var(--ui-unit, 0.5rem) * 6));--ui-_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg, 0.25rem))}}
@@ -87,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)}}
@@ -138,7 +140,7 @@
 @layer components.tokens{.ui-popover{--ui-_row-1: var(--ui-row-1, 1rem);--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_font-size-md: var(--ui-font-size-md, 1rem);--ui-_weight-semibold: var(--ui-weight-semibold, 600);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_bg: var(--ui-popover-bg, var(--ui-color-bg, white));--ui-_border-color: var(--ui-popover-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_radius: var(--ui-popover-radius, var(--ui-radius-md, calc(0.5rem * 1)));--ui-_shadow: var(--ui-popover-shadow, 0 calc(0.5rem / 2) calc(0.5rem * 2) rgb(0 0 0 / 0.15));--ui-_padding: var(--ui-popover-padding, calc(0.5rem * 2));--ui-_max-width: var(--ui-popover-max-width, calc(0.5rem * 40));--ui-_z: var(--ui-popover-z, var(--ui-z-popover, 500));--ui-_arrow-size: var(--ui-popover-arrow-size, calc(0.5rem))}}
 @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);background:var(--ui-_bg);border-radius:var(--ui-_radius);outline:var(--ui-_border-width-sm) solid var(--ui-_border-color);box-shadow:var(--ui-_shadow);outline-offset:calc(var(--ui-_border-width-sm)*-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)*-1) 0 var(--ui-_border-color)}.ui-popover__title{margin:0;font-size:var(--ui-_font-size-md);font-weight:var(--ui-_weight-semibold)}.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) var(--ui-_ease-default)}}
 @layer components.tokens{.ui-tooltip{--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_bg: var(--ui-tooltip-bg, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_color: var(--ui-tooltip-color, var(--ui-color-bg, hsl(220, 10%, 98%)));--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-_font-size: var(--ui-tooltip-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_z: var(--ui-tooltip-z, var(--ui-z-tooltip, 600));--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-_font-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) var(--ui-_ease-default)}}
+@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-_font-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) var(--ui-_ease-default)}@supports(anchor-name: --tooltip){.ui-tooltip--anchored{position:fixed;position-anchor:--tooltip;inset:auto;inset-area:block-start center;position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline;margin-block-end:var(--ui-_arrow-size)}.ui-tooltip--anchored::after{content:none}.ui-tooltip-anchor{anchor-name:--tooltip}}}
 @layer components.tokens{.ui-blockquote{--ui-_space-1: var(--ui-space-1, 0.5rem);--ui-_font-size-sm: var(--ui-font-size-sm, 0.875rem);--ui-_leading-sm: var(--ui-leading-sm, 1.5rem);--ui-_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--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);font-size:var(--ui-_font-size-sm);font-style:normal;line-height:var(--ui-_leading-sm);color:var(--ui-_color-text-muted)}}
 @layer components.tokens{.ui-code{--ui-_font-mono: var(--ui-font-mono, ui-monospace, sfmono-regular, SF Mono, menlo, consolas, Liberation Mono, monospace);--ui-_leading-tight-sm: var(--ui-leading-tight-sm, 1rem);--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--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%)))}}
@@ -163,6 +165,7 @@
 @view-transition{navigation:auto}
 @layer utilities{@keyframes vt-fade-in{from{opacity:0}}@keyframes vt-fade-out{to{opacity:0}}@keyframes vt-slide-in-up{from{opacity:0;transform:translateY(1.25rem)}}@keyframes vt-slide-out-up{to{opacity:0;transform:translateY(-1.25rem)}}@keyframes vt-slide-in-down{from{opacity:0;transform:translateY(-1.25rem)}}@keyframes vt-slide-out-down{to{opacity:0;transform:translateY(1.25rem)}}@keyframes vt-slide-in-start{from{opacity:0;transform:translateX(-1.25rem)}}@keyframes vt-slide-out-start{to{opacity:0;transform:translateX(-1.25rem)}}@keyframes vt-slide-in-end{from{opacity:0;transform:translateX(1.25rem)}}@keyframes vt-slide-out-end{to{opacity:0;transform:translateX(1.25rem)}}@keyframes vt-scale-in{from{opacity:0;transform:scale(0.95)}}@keyframes vt-scale-out{to{opacity:0;transform:scale(1.05)}}.ui-transition-name-sidebar{view-transition-name:sidebar}.ui-transition-name-main{view-transition-name:main}.ui-transition-name-header{view-transition-name:header}.ui-transition-name-hero{view-transition-name:hero}.ui-transition-name-card{view-transition-name:card}.ui-transition-name-modal{view-transition-name:modal}.ui-transition-name-slide-up{view-transition-name:slide-up}.ui-transition-name-slide-down{view-transition-name:slide-down}.ui-transition-name-slide-start{view-transition-name:slide-start}.ui-transition-name-slide-end{view-transition-name:slide-end}.ui-transition-name-scale{view-transition-name:scale}.ui-transition-name-fade{view-transition-name:fade}.ui-transition-name-none{view-transition-name:none}::view-transition-old(sidebar),::view-transition-new(sidebar),::view-transition-old(header),::view-transition-new(header){animation:none}::view-transition-old(root),::view-transition-new(root){animation-duration:var(--ui-duration-base);animation-timing-function:var(--ui-ease-default)}::view-transition-old(fade){animation:vt-fade-out var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(fade){animation:vt-fade-in var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-up),::view-transition-old(main){animation:vt-slide-out-up var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-up),::view-transition-new(main){animation:vt-slide-in-up var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-down){animation:vt-slide-out-down var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-down){animation:vt-slide-in-down var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-start){animation:vt-slide-out-start var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-start){animation:vt-slide-in-start var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-end){animation:vt-slide-out-end var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-end){animation:vt-slide-in-end var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(scale),::view-transition-old(modal),::view-transition-old(card){animation:vt-scale-out var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(scale),::view-transition-new(modal),::view-transition-new(card){animation:vt-scale-in var(--ui-duration-base) var(--ui-ease-out)}::view-transition-group(hero){animation-duration:var(--ui-duration-slow);animation-timing-function:var(--ui-ease-in-out)}@media(prefers-reduced-motion: reduce){::view-transition-old(*),::view-transition-new(*),::view-transition-group(*){animation-duration:0s !important}}}
 @layer utilities{.ui-snap-x{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}.ui-snap-y{overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain}.ui-snap-x-proximity{overflow-x:auto;scroll-snap-type:x proximity}.ui-snap-y-proximity{overflow-y:auto;scroll-snap-type:y proximity}.ui-snap-none{scroll-snap-type:none}.ui-snap-start{scroll-snap-align:start}.ui-snap-center{scroll-snap-align:center}.ui-snap-end{scroll-snap-align:end}.ui-snap-always{scroll-snap-stop:always}.ui-snap-p-1{scroll-padding:var(--ui-space-1)}.ui-snap-p-2{scroll-padding:var(--ui-space-2)}.ui-snap-p-4{scroll-padding:var(--ui-space-4)}}
+@layer utilities{@supports(animation-timeline: scroll()){.ui-scroll-progress{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:var(--ui-z-toast, 700);block-size:var(--ui-scroll-progress-height, var(--ui-space-half, 0.25rem));inline-size:100%;background:var(--ui-scroll-progress-bg, var(--ui-color-primary));transform-origin:inline-start;scale:0 1;animation:scroll-progress-fill auto linear;animation-timeline:scroll()}@keyframes scroll-progress-fill{to{scale:1 1}}.ui-view-fade{animation:view-fade-in auto linear both;animation-timeline:view();animation-range:entry 0% entry 100%}@keyframes view-fade-in{from{opacity:0}to{opacity:1}}.ui-view-slide-up{animation:view-slide-up-in auto linear both;animation-timeline:view();animation-range:entry 0% entry 100%}@keyframes view-slide-up-in{from{opacity:0;transform:translateY(var(--ui-space-4, 2rem))}to{opacity:1;transform:translateY(0)}}.ui-view-slide-start{animation:view-slide-start-in auto linear both;animation-timeline:view();animation-range:entry 0% entry 100%}@keyframes view-slide-start-in{from{opacity:0;transform:translateX(calc(var(--ui-space-4, 2rem) * -1))}to{opacity:1;transform:translateX(0)}}.ui-view-scale{animation:view-scale-in auto linear both;animation-timeline:view();animation-range:entry 0% entry 100%}@keyframes view-scale-in{from{opacity:0;scale:.9}to{opacity:1;scale:1}}@media(prefers-reduced-motion: reduce){.ui-scroll-progress,.ui-view-fade,.ui-view-slide-up,.ui-view-slide-start,.ui-view-scale{opacity:1;transform:none;scale:1 1;animation:none}}}}
 @layer utilities{.ui-container-inline{container-type:inline-size}.ui-container-size{container-type:size}.ui-container-normal{container-type:normal}}
 .ui-debug-grid,.ui-debug-grid-rows,.ui-debug-baseline{position:relative}
 .ui-debug-grid{--ui-debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.15)}

package/package.json

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

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

@@ -5,6 +5,15 @@
 // Progress - progress bar indicator
 // Shows completion status of a task
 
+// Register --ui-progress-value as typed property so browsers can
+// interpolate percentage values — enables smooth CSS-only transitions
+// when value changes via JS (no inline width needed)
+@property --ui-progress-value {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
 @layer components.tokens {
   .progress {
     --_duration-normal: var(--ui-duration-normal, #{t.$duration-normal});
@@ -27,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 {
@@ -42,11 +65,16 @@
 
   .progress__bar {
     block-size: 100%;
+    // Typed --ui-progress-value enables CSS-only transitions;
+    // falls back to inline style width for older browsers
+    inline-size: var(--ui-progress-value, auto);
 
     background: var(--_fill);
     border-radius: var(--_radius);
 
-    transition: inline-size var(--_duration-normal) var(--_ease-default);
+    transition:
+      inline-size var(--_duration-normal) var(--_ease-default),
+      --ui-progress-value var(--_duration-normal) var(--_ease-default);
   }
 
   // Indeterminate state - animated stripe
@@ -108,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/feedback/progress/progress.docs.json

@@ -230,6 +230,59 @@
           "code": "<div class=\"ui-progress ui-progress--indeterminate\"\n     role=\"progressbar\" aria-label=\"Loading\">\n  <div class=\"ui-progress__bar\"></div>\n</div>"
         }
       ]
+    },
+    {
+      "title": "Typed Custom Property",
+      "description": "Set value via --ui-progress-value instead of inline width. The @property registration enables smooth CSS transitions when JS updates the value.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "display: flex; flex-direction: column; gap: var(--ui-space-2);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-progress",
+                  "attrs": {
+                    "role": "progressbar",
+                    "aria-valuenow": "25",
+                    "aria-valuemin": "0",
+                    "aria-valuemax": "100"
+                  },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-progress__bar",
+                      "style": { "--ui-progress-value": "25%" }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-progress",
+                  "attrs": {
+                    "role": "progressbar",
+                    "aria-valuenow": "75",
+                    "aria-valuemin": "0",
+                    "aria-valuemax": "100"
+                  },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-progress__bar",
+                      "style": { "--ui-progress-value": "75%" }
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<!-- CSS-only smooth transitions via @property -->\n<div class=\"ui-progress\" role=\"progressbar\" aria-valuenow=\"75\">\n  <div class=\"ui-progress__bar\"\n       style=\"--ui-progress-value: 75%;\"></div>\n</div>\n\n<!-- Update from JS: el.style.setProperty('--ui-progress-value', '90%') -->"
+        }
+      ]
     }
   ],
   "customization": [
@@ -252,6 +305,11 @@
       "token": "--ui-progress-radius",
       "default": "var(--ui-radius-full)",
       "description": "Border radius"
+    },
+    {
+      "token": "--ui-progress-value",
+      "default": "0%",
+      "description": "Progress value as percentage (typed via @property for smooth transitions)"
     }
   ]
 }

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

@@ -5,6 +5,14 @@
 // Progress Circle - circular progress indicator
 // Uses SVG circles with stroke-dasharray/dashoffset driven by --ui-progress-circle-value
 
+// Register typed property so browsers can interpolate the value
+// — enables smooth stroke-dashoffset transitions via CSS alone
+@property --ui-progress-circle-value {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0;
+}
+
 @layer components.tokens {
   .progress-circle {
     --_duration-slow: var(--ui-duration-slow, #{t.$duration-slow});
@@ -78,7 +86,9 @@
     stroke-dasharray: var(--_circumference);
     stroke-dashoffset: calc(var(--_circumference) * (1 - var(--_value) / 100));
 
-    transition: stroke-dashoffset var(--_duration-slow) var(--_ease-default);
+    transition:
+      stroke-dashoffset var(--_duration-slow) var(--_ease-default),
+      --ui-progress-circle-value var(--_duration-slow) var(--_ease-default);
   }
 
   // Indeterminate - rotating partial arc

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

@@ -114,4 +114,29 @@
   .tooltip--animate {
     transition: opacity var(--_duration-fast) var(--_ease-default);
   }
+
+  // Anchor-positioned tooltip (progressive enhancement)
+  // Browser auto-positions relative to anchor element, no JS needed
+  // @modifier boolean anchored
+  @supports (anchor-name: --tooltip) {
+    .tooltip--anchored {
+      position: fixed;
+      position-anchor: --tooltip;
+      inset: auto;
+      inset-area: block-start center;
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+
+      margin-block-end: var(--_arrow-size);
+    }
+
+    // Hide CSS arrows — browser handles positioning
+    .tooltip--anchored::after {
+      content: none;
+    }
+
+    // Anchor source: place on trigger element
+    .tooltip-anchor {
+      anchor-name: --tooltip;
+    }
+  }
 }

package/src/components/overlays/tooltip/tooltip.api.json

@@ -11,6 +11,9 @@
     },
     "animate": {
       "type": "boolean"
+    },
+    "anchored": {
+      "type": "boolean"
     }
   },
   "cssVars": [

package/src/components/overlays/tooltip/tooltip.docs.json

@@ -64,6 +64,36 @@
           "code": "<span class=\"ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible\">\n  Animated tooltip\n</span>"
         }
       ]
+    },
+    {
+      "title": "Anchor Positioned",
+      "description": "Browser-native positioning via CSS Anchor Positioning. No JS needed for placement. Wrapped in @supports — falls back to manual positioning in unsupported browsers.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; padding: var(--ui-space-4); display: flex; gap: var(--ui-space-4);"
+              },
+              "children": [
+                {
+                  "tag": "button",
+                  "class": "ui-button",
+                  "attrs": { "style": "anchor-name: --tooltip;" },
+                  "text": "Hover me"
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-tooltip ui-tooltip--anchored ui-tooltip--visible",
+                  "text": "Anchored tooltip"
+                }
+              ]
+            }
+          ],
+          "code": "<!-- Add anchor-name: --tooltip to trigger -->\n<button class=\"ui-button\" style=\"anchor-name: --tooltip\">Hover me</button>\n<span class=\"ui-tooltip ui-tooltip--anchored ui-tooltip--visible\">\n  Anchored tooltip\n</span>\n\n<!-- Or use the helper class -->\n<button class=\"ui-button\" style=\"anchor-name: --tooltip\">Trigger</button>"
+        }
+      ]
     }
   ],
   "customization": [

package/src/utilities/index.scss

@@ -5,4 +5,5 @@
 @forward "./visually-hidden/index";
 @forward "./view-transition/index";
 @forward "./scroll-snap/index";
+@forward "./scroll-animation/index";
 @forward "./container/index";