@teseor/css 1.4.0 → 1.5.0

package/dist/index.css

@@ -36,6 +36,8 @@
 @layer components.styles{.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-1, 0.5rem);block-size:var(--ui-_height);padding-inline:var(--ui-_padding-x);margin:0;font-family:var(--ui-font-sans, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);font-size:var(--ui-_font-size);font-weight:var(--ui-_font-weight);line-height:1;text-decoration:none;white-space:nowrap;color:var(--ui-_text);background:var(--ui-_bg);border:var(--ui-_border, none);border-radius:var(--ui-_radius);cursor:pointer;transition:background-color var(--ui-duration-base) var(--ui-ease-default),color var(--ui-duration-base) var(--ui-ease-default),transform var(--ui-duration-fast) var(--ui-ease-default)}.ui-button:hover,.ui-button--hover{color:var(--ui-_text-hover, var(--ui-_text));background:var(--ui-_bg-hover)}.ui-button:focus-visible,.ui-button--focus{outline:var(--ui-border-width-md, 0.125rem) solid var(--ui-color-focus, oklch(75% 0.15 250deg));outline-offset:var(--ui-border-width-md, 0.125rem)}.ui-button:active,.ui-button--active{transform:scale(0.98)}.ui-button:disabled{opacity:.5;cursor:not-allowed}.ui-button:disabled:hover{background:var(--ui-_bg);transform:none}.ui-button--icon{inline-size:var(--ui-_height)}.ui-button--block{inline-size:100%}.ui-button--link{text-decoration:underline;text-underline-offset:var(--ui-space-quarter)}.ui-button--link:hover{text-decoration-thickness:var(--ui-space-quarter)}.ui-button__icon{flex-shrink:0;block-size:1em;inline-size:1em}.ui-button__icon--start{order:-1}.ui-button__icon--end{order:1}.ui-button--loading{position:relative;opacity:.7;pointer-events:none}.ui-button--loading::after{content:"";position:absolute;block-size:1em;inline-size:1em;border:2px solid currentcolor;border-radius:50%;animation:button-spin .6s linear infinite;border-inline-end-color:rgba(0,0,0,0)}@keyframes button-spin{to{transform:rotate(360deg)}}}
 @layer components.tokens{.ui-button-group{--ui-_radius: var(--ui-button-group-radius, var(--ui-radius-md, calc(0.5rem / 2)))}}
 @layer components.styles{.ui-button-group{display:inline-flex}.ui-button-group>.ui-button:not(:first-child,:last-child){border-radius:0}.ui-button-group>.ui-button:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.ui-button-group>.ui-button:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.ui-button-group>.ui-button+.ui-button{margin-inline-start:calc(0.5rem/-8)}.ui-button-group>.ui-button:focus-visible{z-index:1}.ui-button-group--vertical{flex-direction:column}.ui-button-group--vertical>.ui-button:not(:first-child,:last-child){border-radius:0}.ui-button-group--vertical>.ui-button:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0}.ui-button-group--vertical>.ui-button:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0}.ui-button-group--vertical>.ui-button+.ui-button{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-_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, 150ms) var(--ui-ease-default, ease),color var(--ui-duration-base, 150ms) var(--ui-ease-default, ease)}.ui-close-button:hover,.ui-close-button--hover{color:var(--ui-color-text, hsl(220, 10%, 10%));background:var(--ui-_hover-bg)}.ui-close-button:focus-visible,.ui-close-button--focus{outline:var(--ui-border-width-md, 0.125rem) solid var(--ui-color-focus, oklch(75% 0.15 250deg));outline-offset:var(--ui-border-width-md, 0.125rem)}.ui-close-button:active,.ui-close-button--active{transform:scale(0.92)}.ui-close-button:disabled{opacity:.5;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-avatar{--ui-_size: var(--ui-avatar-size, calc(0.5rem * 5));--ui-_bg: var(--ui-avatar-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--ui-_color: var(--ui-avatar-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_font-size: var(--ui-avatar-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-avatar-radius, 50%)}.ui-avatar--xs{--ui-_size: var(--ui-avatar-size-xs, calc(0.5rem * 3));--ui-_font-size: var(--ui-avatar-font-size-xs, var(--ui-font-size-xs, 0.75rem))}.ui-avatar--sm{--ui-_size: var(--ui-avatar-size-sm, calc(0.5rem * 4));--ui-_font-size: var(--ui-avatar-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-avatar--lg{--ui-_size: var(--ui-avatar-size-lg, calc(0.5rem * 6));--ui-_font-size: var(--ui-avatar-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-avatar--xl{--ui-_size: var(--ui-avatar-size-xl, calc(0.5rem * 8));--ui-_font-size: var(--ui-avatar-font-size-xl, var(--ui-font-size-lg, 1.25rem))}.ui-avatar--square{--ui-_radius: var(--ui-avatar-radius-square, var(--ui-radius-md, 0.5rem))}}
 @layer components.styles{.ui-avatar{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;position:relative;block-size:var(--ui-_size);inline-size:var(--ui-_size);overflow:hidden;font-size:var(--ui-_font-size);font-weight:var(--ui-weight-medium, 500);line-height:1;text-transform:uppercase;color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-avatar__image{position:absolute;inset:0;block-size:100%;inline-size:100%;object-fit:cover;border-radius:inherit}.ui-avatar__fallback{display:flex;align-items:center;justify-content:center;block-size:100%;inline-size:100%;user-select:none}.ui-avatar-group{display:flex;flex-direction:row-reverse;justify-content:flex-end}.ui-avatar-group>.ui-avatar{margin-inline-start:calc(var(--ui-_size)*-0.25);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-bg, hsl(220, 10%, 98%))}.ui-avatar-group>.ui-avatar:last-child{margin-inline-start:0}}
 @layer components.tokens{.ui-badge{--ui-_accent: var(--ui-badge-accent, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_height: var(--ui-badge-height, calc(var(--ui-row, 1rem) * 1.25));--ui-_padding-x: var(--ui-badge-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-badge-font-size, var(--ui-font-size-xs, 0.75rem));--ui-_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, 500));--ui-_radius: var(--ui-badge-radius, var(--ui-radius-full, 9999px));--ui-_bg: var(--ui-_accent);--ui-_text: var(--ui-badge-text, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-badge--sm{--ui-_height: var(--ui-badge-height-sm, var(--ui-row, 1rem));--ui-_padding-x: var(--ui-badge-padding-x-sm, var(--ui-space-0, 0.25rem));--ui-_font-size: var(--ui-badge-font-size-sm, calc(var(--ui-font-size-xs, 0.75rem) * 0.85))}.ui-badge--primary{--ui-_accent: var(--ui-color-primary, oklch(55% 0.22 250deg));--ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}.ui-badge--success{--ui-_accent: var(--ui-color-success, oklch(60% 0.18 145deg));--ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}.ui-badge--warning{--ui-_accent: var(--ui-color-warning, oklch(75% 0.18 70deg));--ui-_text: var(--ui-color-text, hsl(220, 10%, 10%))}.ui-badge--danger{--ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));--ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}}
@@ -46,6 +48,8 @@
 @layer components.styles{.ui-data-list{display:flex;flex-direction:column;gap:var(--ui-_gap);margin:0;line-height:var(--ui-row-1, 1rem)}.ui-data-list__item{display:flex;flex-direction:column;gap:var(--ui-_item-gap)}.ui-data-list__label{font-size:var(--ui-font-size-sm, 0.875rem);font-weight:var(--ui-weight-medium, 500);line-height:var(--ui-row-1, 1rem);color:var(--ui-_label-color)}.ui-data-list__value{margin:0;line-height:var(--ui-row-1, 1rem);color:var(--ui-_value-color)}.ui-data-list--horizontal .ui-data-list__item{flex-direction:row;align-items:baseline;justify-content:space-between;gap:calc(0.5rem*2)}.ui-data-list--horizontal .ui-data-list__label{flex-shrink:0}.ui-data-list--horizontal .ui-data-list__value{text-align:end}.ui-data-list--divided .ui-data-list__item{padding-block-end:calc(var(--ui-_gap) - var(--ui-border-width-sm, 0.0625rem));border-block-end:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-border, hsl(220, 10%, 90%))}.ui-data-list--divided .ui-data-list__item:last-child{padding-block-end:0;border-block-end:none}.ui-data-list--striped .ui-data-list__item:nth-child(odd){padding:calc(0.5rem*1);background:var(--ui-color-bg-subtle, hsl(220, 10%, 96%));border-radius:var(--ui-radius-sm, 0.25rem)}.ui-data-list--sm{--ui-_gap: calc(0.5rem * 1);--ui-_item-gap: 0;font-size:var(--ui-font-size-sm, 0.875rem)}.ui-data-list--lg{--ui-_gap: calc(0.5rem * 3);--ui-_item-gap: calc(0.5rem * 1);font-size:var(--ui-font-size-lg, 1.25rem)}}
 @layer components.tokens{.ui-icon{--ui-_size: var(--ui-icon-size, var(--ui-ctx-size, 1rem));--ui-_stroke: var(--ui-icon-stroke, 2)}.ui-icon--xs{--ui-_size: var(--ui-icon-size-xs, var(--ui-size-xs, 0.5rem))}.ui-icon--sm{--ui-_size: var(--ui-icon-size-sm, var(--ui-size-sm, 0.75rem))}.ui-icon--md{--ui-_size: var(--ui-icon-size-md, var(--ui-size-md, 1rem))}.ui-icon--lg{--ui-_size: var(--ui-icon-size-lg, var(--ui-size-lg, 1.25rem))}.ui-icon--xl{--ui-_size: var(--ui-icon-size-xl, var(--ui-size-xl, 1.5rem))}.ui-icon--stroke-thin{--ui-_stroke: var(--ui-icon-stroke-thin, 1)}.ui-icon--stroke-thick{--ui-_stroke: var(--ui-icon-stroke-thick, 2.5)}}
 @layer components.styles{.ui-icon{display:inline-block;flex-shrink:0;block-size:var(--ui-_size);inline-size:var(--ui-_size);vertical-align:middle;color:currentcolor;fill:none;stroke:currentcolor;stroke-width:var(--ui-_stroke);stroke-linecap:round;stroke-linejoin:round}.ui-icon--filled{fill:currentcolor;stroke:none}.ui-icon--spin{animation:icon-spin 1s linear infinite}@keyframes icon-spin{to{transform:rotate(360deg)}}}
+@layer components.tokens{.ui-image{--ui-_size: var(--ui-image-size, auto);--ui-_radius: var(--ui-image-radius, 0);--ui-_object-fit: var(--ui-image-object-fit, cover);--ui-_bg: var(--ui-image-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_caption-color: var(--ui-image-caption-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_caption-font-size: var(--ui-image-caption-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_caption-spacing: var(--ui-image-caption-spacing, var(--ui-space-1))}.ui-image--sm{--ui-_size: var(--ui-image-size-sm, calc(0.5rem * 12))}.ui-image--md{--ui-_size: var(--ui-image-size-md, calc(0.5rem * 24))}.ui-image--lg{--ui-_size: var(--ui-image-size-lg, calc(0.5rem * 40))}.ui-image--xl{--ui-_size: var(--ui-image-size-xl, calc(0.5rem * 60))}.ui-image--full{--ui-_size: 100%}.ui-image--rounded{--ui-_radius: var(--ui-image-radius-rounded, var(--ui-radius-lg, 1rem))}.ui-image--circle{--ui-_radius: var(--ui-image-radius-circle, 50%)}.ui-image--cover{--ui-_object-fit: cover}.ui-image--contain{--ui-_object-fit: contain}}
+@layer components.styles{.ui-image{display:inline-block;max-inline-size:100%;padding:0;margin:0}.ui-image__img{display:block;block-size:var(--ui-_size);inline-size:var(--ui-_size);max-inline-size:100%;object-fit:var(--ui-_object-fit);background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-image__img:not([src]),.ui-image__img[src=""]{aspect-ratio:1/1;min-block-size:calc(0.5rem*8);min-inline-size:calc(0.5rem*8)}.ui-image__caption{margin-block-start:var(--ui-_caption-spacing);font-size:var(--ui-_caption-font-size);line-height:var(--ui-row-1, 1rem);color:var(--ui-_caption-color)}.ui-image--circle .ui-image__img{aspect-ratio:1/1}}
 @layer components.tokens{.ui-stat{--ui-_gap: var(--ui-stat-gap, var(--ui-space-1, 0.5rem))}.ui-stat__value{--ui-_font-size: var(--ui-stat-value-font-size, var(--ui-font-size-3xl, 2rem));--ui-_font-weight: var(--ui-stat-value-font-weight, var(--ui-weight-bold, 700));--ui-_line-height: var(--ui-stat-value-line-height, var(--ui-leading-3xl, 2.5rem));--ui-_color: var(--ui-stat-value-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-stat__label{--ui-_font-size: var(--ui-stat-label-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_color: var(--ui-stat-label-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_line-height: var(--ui-stat-label-line-height, var(--ui-leading-sm, 1.5rem))}.ui-stat--sm .ui-stat__value{--ui-_font-size: var(--ui-font-size-xl, 1.5rem);--ui-_line-height: var(--ui-leading-xl, 2rem)}}
 @layer components.styles{.ui-stat{display:flex;flex-direction:column;gap:var(--ui-_gap)}.ui-stat__value{font-size:var(--ui-_font-size);font-weight:var(--ui-_font-weight);line-height:var(--ui-_line-height);letter-spacing:var(--ui-tracking-display, -0.02em);color:var(--ui-_color)}.ui-stat__label{font-size:var(--ui-_font-size);line-height:var(--ui-_line-height);color:var(--ui-_color)}}
 @layer components.tokens{.ui-status{--ui-_size: var(--ui-status-size, calc(0.5rem * 1));--ui-_color: var(--ui-status-color, var(--ui-color-text-muted));--ui-_gap: var(--ui-status-gap, calc(0.5rem * 1))}.ui-status--success{--ui-_color: var(--ui-color-success)}.ui-status--warning{--ui-_color: var(--ui-color-warning)}.ui-status--danger{--ui-_color: var(--ui-color-danger)}.ui-status--info{--ui-_color: var(--ui-color-primary)}}
@@ -62,6 +66,8 @@
 @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);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, 500);line-height:var(--ui-row-1, 1rem)}.ui-alert__description{margin:0;margin-block-start:calc(0.5rem*1);font-size:var(--ui-font-size-sm, 0.875rem);line-height:var(--ui-row-1, 1rem);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}.ui-alert__close{flex-shrink:0;align-self:flex-start;padding:0;color:var(--ui-color-text-muted, hsl(220, 10%, 45%));background:none;border:none;cursor:pointer}.ui-alert__close:hover{color:var(--ui-color-text, hsl(220, 10%, 10%))}}
 @layer components.tokens{.ui-progress{--ui-_height: var(--ui-progress-height, calc(0.5rem * 1));--ui-_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));--ui-_fill: var(--ui-progress-fill, var(--ui-color-primary));--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, 200ms) var(--ui-ease-default, ease)}.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}}.ui-progress--success{--ui-_fill: var(--ui-color-success)}.ui-progress--warning{--ui-_fill: var(--ui-color-warning)}.ui-progress--danger{--ui-_fill: var(--ui-color-danger)}}
+@layer components.tokens{.ui-progress-circle{--ui-_size: var(--ui-progress-circle-size, calc(var(--ui-unit) * 6));--ui-_stroke-width: var(--ui-progress-circle-stroke-width, 8);--ui-_fill-color: var(--ui-progress-circle-fill-color, var(--ui-color-primary));--ui-_track-color: var(--ui-progress-circle-track-color, var(--ui-color-border));--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) * 4))}.ui-progress-circle--lg{--ui-_size: var(--ui-progress-circle-size-lg, calc(var(--ui-unit) * 8))}.ui-progress-circle--xl{--ui-_size: var(--ui-progress-circle-size-xl, calc(var(--ui-unit) * 12))}.ui-progress-circle--success{--ui-_fill-color: var(--ui-color-success)}.ui-progress-circle--warning{--ui-_fill-color: var(--ui-color-warning)}.ui-progress-circle--danger{--ui-_fill-color: var(--ui-color-danger)}}
+@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, 300ms) var(--ui-ease-default, ease)}.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)}}}
 @layer components.tokens{.ui-skeleton{--ui-_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));--ui-_shimmer: var(--ui-skeleton-shimmer, rgb(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}}}
 @layer components.tokens{.ui-spinner{--ui-_size: var(--ui-spinner-size, calc(var(--ui-unit) * 4));--ui-_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md));--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) * 2));--ui-_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm))}.ui-spinner--sm{--ui-_size: var(--ui-spinner-size-sm, calc(var(--ui-unit) * 3));--ui-_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md))}.ui-spinner--lg{--ui-_size: var(--ui-spinner-size-lg, calc(var(--ui-unit) * 5));--ui-_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md))}.ui-spinner--xl{--ui-_size: var(--ui-spinner-size-xl, calc(var(--ui-unit) * 6));--ui-_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg))}}
@@ -72,6 +78,10 @@
 @layer components.styles{.ui-checkbox{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--ui-_size);inline-size:var(--ui-_size);margin:0;vertical-align:middle;background:var(--ui-_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);border-radius:var(--ui-_radius);cursor:pointer;appearance:none;transition:background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.ui-checkbox::before{content:"";block-size:65%;inline-size:65%;background-color:var(--ui-_check-color);opacity:0;clip-path:polygon(20% 55%, 40% 75%, 80% 25%, 85% 30%, 40% 85%, 15% 60%);transition:opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.ui-checkbox:hover:not(:disabled){border-color:var(--ui-_border-color-focus)}.ui-checkbox:focus-visible{border-color:var(--ui-_border-color-focus);outline:none;box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg))}.ui-checkbox:checked{background:var(--ui-_bg-checked);border-color:var(--ui-_bg-checked)}.ui-checkbox:checked::before{opacity:1}.ui-checkbox:indeterminate{background:var(--ui-_bg-checked);border-color:var(--ui-_bg-checked)}.ui-checkbox:indeterminate::before{opacity:1;clip-path:polygon(15% 45%, 85% 45%, 85% 55%, 15% 55%)}.ui-checkbox:disabled{opacity:.5;cursor:not-allowed}}
 @layer components.tokens{.ui-field{--ui-_gap: var(--ui-field-gap, 0)}}
 @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)}}
+@layer components.tokens{.ui-fieldset{--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, var(--ui-row-1, 1rem));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, 0.25rem);margin-inline-start:calc(-1*var(--ui-space-half, 0.25rem))}.ui-fieldset:disabled,.ui-fieldset[aria-disabled=true]{opacity:.5;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-error{--ui-_color: var(--ui-form-error-color, var(--ui-color-danger));--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, var(--ui-row-1));color:var(--ui-_color)}.ui-form-error__icon{flex-shrink:0}}
 @layer components.tokens{.ui-form-helper{--ui-_color: var(--ui-form-helper-color, var(--ui-color-text-muted));--ui-_size: var(--ui-form-helper-size, var(--ui-font-size-sm, 0.875rem));--ui-_gap: var(--ui-form-helper-gap, 0)}}
@@ -118,12 +128,16 @@
 @layer components.styles{.ui-blockquote{padding-inline-start:var(--ui-_padding-inline);margin:0;font-size:var(--ui-_font-size);font-style:italic;line-height:var(--ui-_line-height);color:var(--ui-_color);border-inline-start:var(--ui-_border-width) solid var(--ui-_border-color)}.ui-blockquote__cite{display:block;margin-block-start:var(--ui-space-1, 0.5rem);font-size:var(--ui-font-size-sm, 0.875rem);font-style:normal;line-height:var(--ui-leading-sm, 1.5rem);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}}
 @layer components.tokens{.ui-code{--ui-_font-size: var(--ui-code-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_bg: var(--ui-code-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_padding-x: var(--ui-code-padding-x, var(--ui-space-1, 0.5rem));--ui-_padding-y: var(--ui-code-padding-y, var(--ui-space-0, 0.25rem));--ui-_radius: var(--ui-code-radius, var(--ui-radius-sm, 0.25rem))}.ui-code--sm{--ui-_font-size: var(--ui-font-size-xs, 0.75rem)}.ui-code-block{--ui-_font-size: var(--ui-code-font-size-block, var(--ui-font-size-sm, 0.875rem));--ui-_bg: var(--ui-code-bg-block, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_padding: var(--ui-code-padding-block, var(--ui-space-3, 1.5rem));--ui-_radius: var(--ui-code-radius-block, var(--ui-radius-md, 0.5rem));--ui-_border-color: var(--ui-code-border-color-block, var(--ui-color-border, hsl(220, 10%, 90%)))}}
 @layer components.styles{.ui-code{padding:var(--ui-_padding-y) var(--ui-_padding-x);font-family:var(--ui-font-mono, ui-monospace, sfmono-regular, SF Mono, menlo, consolas, Liberation Mono, monospace);font-size:var(--ui-_font-size);line-height:var(--ui-leading-tight-sm, 1rem);background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-code-block{display:block;padding:calc(var(--ui-_padding) - var(--ui-border-width-sm, 0.0625rem));overflow-x:auto;font-family:var(--ui-font-mono, ui-monospace, sfmono-regular, SF Mono, menlo, consolas, Liberation Mono, monospace);font-size:var(--ui-_font-size);line-height:var(--ui-leading-tight-sm, 1rem);white-space:pre;background:var(--ui-_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);border-radius:var(--ui-_radius)}.ui-code-block code{padding:0;font-size:inherit;background:none}}
+@layer components.tokens{.ui-code-block{--ui-_bg: var(--ui-code-block-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_color: var(--ui-code-block-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_border-color: var(--ui-code-block-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_padding: var(--ui-code-block-padding, var(--ui-space-3, 1.5rem));--ui-_font-size: var(--ui-code-block-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_line-height: var(--ui-code-block-line-height, var(--ui-leading-tight-sm, 1rem));--ui-_radius: var(--ui-code-block-radius, var(--ui-radius-md, 0.5rem))}.ui-code-block--compact{--ui-_padding: var(--ui-code-block-padding-compact, var(--ui-space-1, 0.5rem))}.ui-code-block--line-numbers{--ui-_line-number-color: var(--ui-code-block-line-number-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_line-number-border-color: var(--ui-code-block-line-number-border-color, var(--ui-color-border, hsl(220, 10%, 90%)))}}
+@layer components.styles{.ui-code-block{display:block;padding:calc(var(--ui-_padding) - var(--ui-border-width-sm, 0.0625rem));overflow-x:auto;font-family:var(--ui-font-mono, ui-monospace, sfmono-regular, SF Mono, menlo, consolas, Liberation Mono, monospace);font-size:var(--ui-_font-size);line-height:var(--ui-_line-height);white-space:pre;color:var(--ui-_color);background:var(--ui-_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);border-radius:var(--ui-_radius)}.ui-code-block__code{padding:0;font:inherit;color:inherit;background:none;border:none}.ui-code-block--line-numbers{counter-reset:line-number;padding-inline-start:0}.ui-code-block--line-numbers .ui-code-block__line{display:block}.ui-code-block--line-numbers .ui-code-block__line-number{display:inline-block;counter-increment:line-number;box-sizing:border-box;min-inline-size:var(--ui-space-4, 2rem);padding-inline-end:var(--ui-space-2, 1rem);margin-inline-end:var(--ui-space-2, 1rem);font-variant-numeric:tabular-nums;text-align:end;color:var(--ui-_line-number-color);border-inline-end:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_line-number-border-color);user-select:none}.ui-code-block--line-numbers .ui-code-block__line-number::before{content:counter(line-number)}}
 @layer components.tokens{.ui-heading{--ui-_font-size: var(--ui-heading-font-size, var(--ui-font-size-xl, 1.5rem));--ui-_line-height: var(--ui-heading-line-height, var(--ui-leading-xl, 2rem));--ui-_weight: var(--ui-heading-weight, var(--ui-weight-bold, 700));--ui-_color: var(--ui-heading-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-heading--4xl{--ui-_font-size: var(--ui-heading-font-size-4xl, var(--ui-font-size-4xl, 2.5rem));--ui-_line-height: var(--ui-heading-line-height-4xl, var(--ui-leading-4xl, 3rem))}.ui-heading--3xl{--ui-_font-size: var(--ui-heading-font-size-3xl, var(--ui-font-size-3xl, 2rem));--ui-_line-height: var(--ui-heading-line-height-3xl, var(--ui-leading-3xl, 2.5rem))}.ui-heading--2xl{--ui-_font-size: var(--ui-heading-font-size-2xl, var(--ui-font-size-2xl, 1.75rem));--ui-_line-height: var(--ui-heading-line-height-2xl, var(--ui-leading-2xl, 2rem))}.ui-heading--xl{--ui-_font-size: var(--ui-heading-font-size-xl, var(--ui-font-size-xl, 1.5rem));--ui-_line-height: var(--ui-heading-line-height-xl, var(--ui-leading-xl, 2rem))}.ui-heading--lg{--ui-_font-size: var(--ui-heading-font-size-lg, var(--ui-font-size-lg, 1.25rem));--ui-_line-height: var(--ui-heading-line-height-lg, var(--ui-leading-lg, 2rem))}.ui-heading--md{--ui-_font-size: var(--ui-heading-font-size-md, var(--ui-font-size-md, 1rem));--ui-_line-height: var(--ui-heading-line-height-md, var(--ui-leading-tight-md, 1.5rem))}.ui-heading--sm{--ui-_font-size: var(--ui-heading-font-size-sm, var(--ui-font-size-sm, 0.875rem));--ui-_line-height: var(--ui-heading-line-height-sm, var(--ui-leading-tight-sm, 1rem))}}
 @layer components.styles{.ui-heading{margin:0;font-size:var(--ui-_font-size);font-weight:var(--ui-_weight);line-height:var(--ui-_line-height);color:var(--ui-_color)}}
 @layer components.tokens{.ui-kbd{--ui-_font-size: var(--ui-kbd-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_font-family: var(--ui-kbd-font-family, var(--ui-font-mono, ui-monospace, sfmono-regular, SF Mono, menlo, consolas, Liberation Mono, monospace));--ui-_padding-x: var(--ui-kbd-padding-x, var(--ui-space-0, 0.25rem));--ui-_padding-y: var(--ui-kbd-padding-y, var(--ui-space-0, 0.25rem));--ui-_bg: var(--ui-kbd-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--ui-_border-color: var(--ui-kbd-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_radius: var(--ui-kbd-radius, var(--ui-radius-sm, 0.25rem));--ui-_color: var(--ui-kbd-color, var(--ui-color-text, hsl(220, 10%, 10%)))}}
 @layer components.styles{.ui-kbd{display:inline-flex;align-items:center;padding:var(--ui-_padding-y) var(--ui-_padding-x);font-family:var(--ui-_font-family);font-size:var(--ui-_font-size);line-height:1;color:var(--ui-_color);background:var(--ui-_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);border-radius:var(--ui-_radius);box-shadow:0 var(--ui-space-quarter, 0.125rem) 0 var(--ui-_border-color)}}
 @layer components.tokens{.ui-link{--ui-_color: var(--ui-link-color, var(--ui-color-primary));--ui-_color-hover: var(--ui-link-color-hover, var(--ui-color-primary-hover, color-mix(in srgb, var(--ui-_color) 85%, black)));--ui-_color-visited: var(--ui-link-color-visited, var(--ui-_color));--ui-_decoration: var(--ui-link-decoration, underline);--ui-_decoration-hover: var(--ui-link-decoration-hover, underline)}.ui-link--muted{--ui-_color: var(--ui-link-color-muted, var(--ui-color-text-muted));--ui-_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text))}.ui-link--subtle{--ui-_decoration: none;--ui-_decoration-hover: underline}}
 @layer components.styles{.ui-link{text-decoration:var(--ui-_decoration);color:var(--ui-_color);cursor:pointer;transition:color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);text-underline-offset:calc(0.5rem/4)}.ui-link:hover{text-decoration:var(--ui-_decoration-hover);color:var(--ui-_color-hover)}.ui-link:focus-visible{border-radius:calc(0.5rem/4);outline:2px solid var(--ui-color-focus, var(--ui-color-primary));outline-offset:calc(0.5rem/4)}.ui-link:visited{color:var(--ui-_color-visited)}.ui-link--disabled,.ui-link[aria-disabled=true]{color:var(--ui-color-text-muted);opacity:.6;cursor:not-allowed;pointer-events:none}.ui-link--external::after{content:"↗";display:inline-block;margin-inline-start:calc(0.5rem/4);font-size:.75em}}
+@layer components.tokens{.ui-list{--ui-_spacing: var(--ui-list-spacing, 0.5rem);--ui-_marker-color: var(--ui-list-marker-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_indent: var(--ui-list-indent, var(--ui-space-3, 1.5rem));--ui-_line-height: var(--ui-list-line-height, var(--ui-leading-md, 1.5rem))}.ui-list--compact{--ui-_spacing: 0}.ui-list--loose{--ui-_spacing: calc(0.5rem * 2)}}
+@layer components.styles{.ui-list{display:flex;flex-direction:column;gap:var(--ui-_spacing);padding-inline-start:var(--ui-_indent);margin:0;line-height:var(--ui-_line-height)}.ui-list::marker,.ui-list li::marker{color:var(--ui-_marker-color)}.ui-list--unstyled{padding-inline-start:0;list-style:none}.ui-list--inline{flex-direction:row;flex-wrap:wrap;padding-inline-start:0;list-style:none}.ui-list .ui-list{margin-block-start:var(--ui-_spacing)}.ui-list__item{line-height:var(--ui-_line-height)}}
 @layer components.tokens{.ui-mark{--ui-_bg: var(--ui-mark-bg, var(--ui-color-warning, oklch(75% 0.18 70deg)));--ui-_color: var(--ui-mark-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_padding-x: var(--ui-mark-padding-x, var(--ui-space-quarter, 0.125rem));--ui-_padding-y: var(--ui-mark-padding-y, 0);--ui-_radius: var(--ui-mark-radius, var(--ui-radius-sm, 0.25rem))}}
 @layer components.styles{.ui-mark{padding:var(--ui-_padding-y) var(--ui-_padding-x);color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}}
 @layer utilities{.ui-m-0{margin:0}.ui-m-1{margin:var(--ui-space-1)}.ui-m-2{margin:var(--ui-space-2)}.ui-m-3{margin:var(--ui-space-3)}.ui-m-4{margin:var(--ui-space-4)}.ui-m-6{margin:var(--ui-space-6)}.ui-m-8{margin:var(--ui-space-8)}.ui-mt-0{margin-block-start:0}.ui-mt-1{margin-block-start:var(--ui-space-1)}.ui-mt-2{margin-block-start:var(--ui-space-2)}.ui-mt-3{margin-block-start:var(--ui-space-3)}.ui-mt-4{margin-block-start:var(--ui-space-4)}.ui-mt-6{margin-block-start:var(--ui-space-6)}.ui-mt-8{margin-block-start:var(--ui-space-8)}.ui-me-0{margin-inline-end:0}.ui-me-1{margin-inline-end:var(--ui-space-1)}.ui-me-2{margin-inline-end:var(--ui-space-2)}.ui-me-3{margin-inline-end:var(--ui-space-3)}.ui-me-4{margin-inline-end:var(--ui-space-4)}.ui-me-6{margin-inline-end:var(--ui-space-6)}.ui-me-8{margin-inline-end:var(--ui-space-8)}.ui-mb-0{margin-block-end:0}.ui-mb-1{margin-block-end:var(--ui-space-1)}.ui-mb-2{margin-block-end:var(--ui-space-2)}.ui-mb-3{margin-block-end:var(--ui-space-3)}.ui-mb-4{margin-block-end:var(--ui-space-4)}.ui-mb-6{margin-block-end:var(--ui-space-6)}.ui-mb-8{margin-block-end:var(--ui-space-8)}.ui-ms-0{margin-inline-start:0}.ui-ms-1{margin-inline-start:var(--ui-space-1)}.ui-ms-2{margin-inline-start:var(--ui-space-2)}.ui-ms-3{margin-inline-start:var(--ui-space-3)}.ui-ms-4{margin-inline-start:var(--ui-space-4)}.ui-ms-6{margin-inline-start:var(--ui-space-6)}.ui-ms-8{margin-inline-start:var(--ui-space-8)}.ui-mx-0{margin-inline:0}.ui-mx-1{margin-inline:var(--ui-space-1)}.ui-mx-2{margin-inline:var(--ui-space-2)}.ui-mx-3{margin-inline:var(--ui-space-3)}.ui-mx-4{margin-inline:var(--ui-space-4)}.ui-mx-auto{margin-inline:auto}.ui-my-0{margin-block:0}.ui-my-1{margin-block:var(--ui-space-1)}.ui-my-2{margin-block:var(--ui-space-2)}.ui-my-3{margin-block:var(--ui-space-3)}.ui-my-4{margin-block:var(--ui-space-4)}.ui-p-0{padding:0}.ui-p-1{padding:var(--ui-space-1)}.ui-p-2{padding:var(--ui-space-2)}.ui-p-3{padding:var(--ui-space-3)}.ui-p-4{padding:var(--ui-space-4)}.ui-p-6{padding:var(--ui-space-6)}.ui-p-8{padding:var(--ui-space-8)}.ui-pt-0{padding-block-start:0}.ui-pt-1{padding-block-start:var(--ui-space-1)}.ui-pt-2{padding-block-start:var(--ui-space-2)}.ui-pt-3{padding-block-start:var(--ui-space-3)}.ui-pt-4{padding-block-start:var(--ui-space-4)}.ui-pt-6{padding-block-start:var(--ui-space-6)}.ui-pt-8{padding-block-start:var(--ui-space-8)}.ui-pe-0{padding-inline-end:0}.ui-pe-1{padding-inline-end:var(--ui-space-1)}.ui-pe-2{padding-inline-end:var(--ui-space-2)}.ui-pe-3{padding-inline-end:var(--ui-space-3)}.ui-pe-4{padding-inline-end:var(--ui-space-4)}.ui-pe-6{padding-inline-end:var(--ui-space-6)}.ui-pe-8{padding-inline-end:var(--ui-space-8)}.ui-pb-0{padding-block-end:0}.ui-pb-1{padding-block-end:var(--ui-space-1)}.ui-pb-2{padding-block-end:var(--ui-space-2)}.ui-pb-3{padding-block-end:var(--ui-space-3)}.ui-pb-4{padding-block-end:var(--ui-space-4)}.ui-pb-6{padding-block-end:var(--ui-space-6)}.ui-pb-8{padding-block-end:var(--ui-space-8)}.ui-ps-0{padding-inline-start:0}.ui-ps-1{padding-inline-start:var(--ui-space-1)}.ui-ps-2{padding-inline-start:var(--ui-space-2)}.ui-ps-3{padding-inline-start:var(--ui-space-3)}.ui-ps-4{padding-inline-start:var(--ui-space-4)}.ui-ps-6{padding-inline-start:var(--ui-space-6)}.ui-ps-8{padding-inline-start:var(--ui-space-8)}.ui-px-0{padding-inline:0}.ui-px-1{padding-inline:var(--ui-space-1)}.ui-px-2{padding-inline:var(--ui-space-2)}.ui-px-3{padding-inline:var(--ui-space-3)}.ui-px-4{padding-inline:var(--ui-space-4)}.ui-py-0{padding-block:0}.ui-py-1{padding-block:var(--ui-space-1)}.ui-py-2{padding-block:var(--ui-space-2)}.ui-py-3{padding-block:var(--ui-space-3)}.ui-py-4{padding-block:var(--ui-space-4)}.ui-gap-0{gap:0}.ui-gap-1{gap:var(--ui-space-1)}.ui-gap-2{gap:var(--ui-space-2)}.ui-gap-3{gap:var(--ui-space-3)}.ui-gap-4{gap:var(--ui-space-4)}.ui-gap-6{gap:var(--ui-space-6)}.ui-gap-8{gap:var(--ui-space-8)}}

package/package.json

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

package/src/04-components/actions/close-button/close-button.api.json

@@ -0,0 +1,71 @@
+{
+  "name": "close-button",
+  "element": "button",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "subtle": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "icon": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-close-button-size",
+      "description": "Overall button size (width and height)",
+      "default": "var(--ui-row-2)"
+    },
+    {
+      "name": "--ui-close-button-icon-size",
+      "description": "Size of the X icon",
+      "default": "var(--ui-size-md)"
+    },
+    {
+      "name": "--ui-close-button-color",
+      "description": "Icon color",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-close-button-bg",
+      "description": "Background color",
+      "default": "transparent"
+    },
+    {
+      "name": "--ui-close-button-hover-bg",
+      "description": "Background color on hover",
+      "default": "var(--ui-color-bg-muted)"
+    },
+    {
+      "name": "--ui-close-button-radius",
+      "description": "Border radius",
+      "default": "var(--ui-radius-md)"
+    },
+    {
+      "name": "--ui-close-button-size-sm",
+      "default": "calc(var(--ui-unit) * 3)"
+    },
+    {
+      "name": "--ui-close-button-icon-size-sm",
+      "default": "var(--ui-size-sm)"
+    },
+    {
+      "name": "--ui-close-button-size-lg",
+      "default": "var(--ui-row-3)"
+    },
+    {
+      "name": "--ui-close-button-icon-size-lg",
+      "default": "var(--ui-size-lg)"
+    },
+    {
+      "name": "--ui-close-button-subtle-color",
+      "default": "var(--ui-color-border-strong)"
+    },
+    {
+      "name": "--ui-close-button-subtle-hover-bg",
+      "default": "var(--ui-color-bg-subtle)"
+    }
+  ]
+}

package/src/04-components/actions/close-button/close-button.docs.json

@@ -0,0 +1,264 @@
+{
+  "id": "close-button",
+  "type": "component",
+  "title": "Close Button",
+  "description": "Dismiss button for closing modals, alerts, drawers, and other dismissible elements.",
+  "api": "./close-button.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "button",
+              "class": "ui-close-button",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": {
+                    "viewBox": "0 0 24 24",
+                    "xmlns": "http://www.w3.org/2000/svg"
+                  },
+                  "children": [
+                    {
+                      "tag": "line",
+                      "attrs": {
+                        "x1": "18",
+                        "y1": "6",
+                        "x2": "6",
+                        "y2": "18"
+                      }
+                    },
+                    {
+                      "tag": "line",
+                      "attrs": {
+                        "x1": "6",
+                        "y1": "6",
+                        "x2": "18",
+                        "y2": "18"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<button class=\"ui-close-button\" type=\"button\" aria-label=\"Close\">\n  <svg class=\"ui-close-button__icon\" viewBox=\"0 0 24 24\">\n    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n  </svg>\n</button>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "button",
+              "class": "ui-close-button ui-close-button--sm",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "button",
+              "class": "ui-close-button",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "button",
+              "class": "ui-close-button ui-close-button--lg",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<button class=\"ui-close-button ui-close-button--sm\" aria-label=\"Close\">...</button>\n<button class=\"ui-close-button\" aria-label=\"Close\">...</button>\n<button class=\"ui-close-button ui-close-button--lg\" aria-label=\"Close\">...</button>"
+        }
+      ]
+    },
+    {
+      "title": "Subtle",
+      "description": "Lower visual prominence for secondary dismiss actions.",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "button",
+              "class": "ui-close-button ui-close-button--subtle",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "button",
+              "class": "ui-close-button ui-close-button--subtle ui-close-button--sm",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<button class=\"ui-close-button ui-close-button--subtle\" aria-label=\"Close\">...</button>"
+        }
+      ]
+    },
+    {
+      "title": "States",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "button",
+              "class": "ui-close-button",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "button",
+              "class": "ui-close-button ui-close-button--hover",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "button",
+              "class": "ui-close-button ui-close-button--focus",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "button",
+              "class": "ui-close-button",
+              "attrs": { "type": "button", "aria-label": "Close", "disabled": "" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<button class=\"ui-close-button\" aria-label=\"Close\">...</button>\n<button class=\"ui-close-button ui-close-button--hover\">...</button>\n<button class=\"ui-close-button ui-close-button--focus\">...</button>\n<button class=\"ui-close-button\" disabled>...</button>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-close-button-size",
+      "default": "var(--ui-row-2)",
+      "description": "Overall button dimensions"
+    },
+    {
+      "token": "--ui-close-button-icon-size",
+      "default": "var(--ui-size-md)",
+      "description": "X icon dimensions"
+    },
+    {
+      "token": "--ui-close-button-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Icon color"
+    },
+    {
+      "token": "--ui-close-button-bg",
+      "default": "transparent",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-close-button-hover-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Hover background"
+    },
+    {
+      "token": "--ui-close-button-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    }
+  ]
+}

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

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

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

@@ -0,0 +1,101 @@
+@use '../../../00-config/tokens/variables' as t;
+
+// @component close-button
+// @element button
+
+@layer components.tokens {
+  .close-button {
+    --_size: var(--ui-close-button-size, var(--ui-row-2, #{t.$row-2}));
+    --_icon-size: var(--ui-close-button-icon-size, var(--ui-size-md, #{t.size(md)}));
+    --_color: var(--ui-close-button-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_bg: var(--ui-close-button-bg, transparent);
+    --_hover-bg: var(--ui-close-button-hover-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_radius: var(--ui-close-button-radius, var(--ui-radius-md, #{t.$radius-md}));
+  }
+
+  // @modifier size
+  .close-button--sm {
+    --_size: var(--ui-close-button-size-sm, calc(#{t.$unit} * 3));
+    --_icon-size: var(--ui-close-button-icon-size-sm, var(--ui-size-sm, #{t.size(sm)}));
+  }
+
+  .close-button--lg {
+    --_size: var(--ui-close-button-size-lg, var(--ui-row-3, #{t.$row-3}));
+    --_icon-size: var(--ui-close-button-icon-size-lg, var(--ui-size-lg, #{t.size(lg)}));
+  }
+
+  // @modifier boolean subtle
+  .close-button--subtle {
+    --_color: var(--ui-close-button-subtle-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    --_hover-bg: var(--ui-close-button-subtle-hover-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+  }
+}
+
+@layer components.styles {
+  .close-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    block-size: var(--_size);
+    inline-size: var(--_size);
+    padding: 0;
+    margin: 0;
+
+    font: inherit;
+    color: var(--_color);
+
+    background: var(--_bg);
+    border: none;
+    border-radius: var(--_radius);
+    cursor: pointer;
+    appearance: none;
+
+    transition:
+      background-color var(--ui-duration-base, 150ms) var(--ui-ease-default, ease),
+      color var(--ui-duration-base, 150ms) var(--ui-ease-default, ease);
+
+    &:hover,
+    &--hover {
+      color: var(--ui-color-text, #{t.$color-text});
+
+      background: var(--_hover-bg);
+    }
+
+    &:focus-visible,
+    &--focus {
+      outline: var(--ui-border-width-md, #{t.$border-width-md}) solid var(--ui-color-focus, #{t.$color-focus});
+      outline-offset: var(--ui-border-width-md, #{t.$border-width-md});
+    }
+
+    &:active,
+    &--active {
+      transform: scale(0.92);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        color: var(--_color);
+
+        background: var(--_bg);
+        transform: none;
+      }
+    }
+  }
+
+  .close-button__icon {
+    flex-shrink: 0;
+
+    block-size: var(--_icon-size);
+    inline-size: var(--_icon-size);
+
+    fill: none;
+    stroke: currentcolor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}