@teseor/css 1.5.0 → 1.7.0

package/dist/index.css

@@ -76,6 +76,8 @@
 @layer components.styles{.ui-toast-viewport{display:flex;flex-direction:column;gap:var(--ui-_gap);position:fixed;z-index:var(--ui-z-toast, 1000);max-inline-size:var(--ui-_max-width);padding:var(--ui-_padding);pointer-events:none;list-style:none}.ui-toast-viewport--top-end{inset-block-start:0;inset-inline-end:0}.ui-toast-viewport--top-start{inset-block-start:0;inset-inline-start:0}.ui-toast-viewport--bottom-end{inset-block-end:0;inset-inline-end:0}.ui-toast-viewport--bottom-start{inset-block-end:0;inset-inline-start:0}.ui-toast-viewport--top-center{inset-block-start:0;inset-inline-start:50%;transform:translateX(-50%)}.ui-toast-viewport--bottom-center{inset-block-end:0;inset-inline-start:50%;transform:translateX(-50%)}.ui-toast{display:flex;align-items:flex-start;gap:var(--ui-_gap);padding:var(--ui-_padding);background:var(--ui-_bg);border-radius:var(--ui-_radius);outline:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);box-shadow:var(--ui-_shadow);pointer-events:auto;outline-offset:calc(var(--ui-border-width-sm, 0.0625rem)*-1)}.ui-toast__icon{flex-shrink:0}.ui-toast__content{flex:1;min-inline-size:0}.ui-toast__title{margin:0;font-weight:var(--ui-weight-medium, 500);line-height:var(--ui-row-1, 1rem)}.ui-toast__description{margin:0;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-toast__action{flex-shrink:0}.ui-toast__close{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--ui-row-1, 1rem);inline-size:var(--ui-row-1, 1rem);padding:0;color:var(--ui-color-text-muted, hsl(220, 10%, 45%));background:none;border:none;cursor:pointer}.ui-toast__close:hover{color:var(--ui-color-text, hsl(220, 10%, 10%))}.ui-toast[data-state=open]{animation:toast-slide-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out)}.ui-toast[data-state=closed]{animation:toast-slide-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in)}@keyframes toast-slide-in{from{opacity:0;transform:translateX(100%)}}@keyframes toast-slide-out{to{opacity:0;transform:translateX(100%)}}}
 @layer components.tokens{.ui-checkbox{--ui-_size: var(--ui-checkbox-size, calc(0.5rem * 2));--ui-_radius: var(--ui-checkbox-radius, var(--ui-radius-sm, 0.25rem));--ui-_bg: var(--ui-checkbox-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_bg-checked: var(--ui-checkbox-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_border-color: var(--ui-checkbox-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-checkbox-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_check-color: var(--ui-checkbox-check-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.ui-checkbox--lg{--ui-_size: var(--ui-checkbox-size-lg, calc(0.5rem * 3))}.ui-checkbox--error{--ui-_border-color: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_border-color-focus: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}}
 @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-checkbox-group{--ui-_spacing: var(--ui-checkbox-group-spacing, var(--ui-space-1, 0.5rem));--ui-_legend-size: var(--ui-checkbox-group-legend-size, var(--ui-font-size-sm, 0.875rem));--ui-_legend-weight: var(--ui-checkbox-group-legend-weight, var(--ui-weight-medium, 500));--ui-_legend-color: var(--ui-checkbox-group-legend-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_legend-spacing: var(--ui-checkbox-group-legend-spacing, var(--ui-space-1, 0.5rem));--ui-_item-gap: var(--ui-checkbox-group-item-gap, var(--ui-space-1, 0.5rem))}.ui-checkbox-group--compact{--ui-_spacing: var(--ui-checkbox-group-spacing-compact, 0);--ui-_legend-spacing: var(--ui-checkbox-group-legend-spacing-compact, 0);--ui-_item-gap: var(--ui-checkbox-group-item-gap-compact, 0)}.ui-checkbox-group--error{--ui-_legend-color: var(--ui-checkbox-group-error-color, var(--ui-color-danger, oklch(60% 0.22 25deg)))}}
+@layer components.styles{.ui-checkbox-group{display:flex;flex-direction:column;gap:var(--ui-_legend-spacing);min-inline-size:0;padding:0;margin:0;border:none}.ui-checkbox-group__legend{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-checkbox-group__items{display:flex;flex-direction:column;gap:var(--ui-_spacing)}.ui-checkbox-group__item{display:flex;align-items:center;gap:var(--ui-_item-gap);line-height:var(--ui-row-1, 1rem);cursor:pointer}.ui-checkbox-group__item:has(:disabled){opacity:.5;cursor:not-allowed}.ui-checkbox-group--horizontal>.ui-checkbox-group__items{flex-direction:row;flex-wrap:wrap;gap:var(--ui-space-2, 1rem)}.ui-checkbox-group:disabled,.ui-checkbox-group[aria-disabled=true]{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))}}
@@ -90,20 +92,34 @@
 @layer components.styles{.ui-input{display:inline-flex;align-items:center;block-size:var(--ui-_height);padding-inline:var(--ui-_padding-x);font-family:inherit;font-size:var(--ui-_font-size);line-height:1;color:var(--ui-_text);background:var(--ui-_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);border-radius:var(--ui-_radius);transition: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-input::placeholder{color:var(--ui-_placeholder)}.ui-input:hover:not(:disabled,:focus){border-color:var(--ui-color-border-strong, hsl(220, 10%, 80%))}.ui-input:focus,.ui-input--focus{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-input:disabled,.ui-input--disabled{opacity:.5;cursor:not-allowed}.ui-input:read-only{background:var(--ui-color-bg-subtle, hsl(220, 10%, 96%))}.ui-input--block{inline-size:100%}.ui-input-group{display:inline-flex;align-items:stretch;position:relative}.ui-input-group .ui-input{flex:1}.ui-input-group--has-prefix .ui-input{padding-inline-start:calc(var(--ui-_height) + var(--ui-space-half, 0.25rem))}.ui-input-group--has-suffix .ui-input{padding-inline-end:calc(var(--ui-_height) + var(--ui-space-half, 0.25rem))}.ui-input-group__addon{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;inline-size:var(--ui-_height, 2rem);color:var(--ui-color-text-muted, hsl(220, 10%, 45%));pointer-events:none}.ui-input-group__addon--start{inset-inline-start:0}.ui-input-group__addon--end{inset-inline-end:0}.ui-input-group__addon--interactive{cursor:pointer;pointer-events:auto}}
 @layer components.tokens{.ui-label{--ui-_font-size: var(--ui-label-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_color: var(--ui-label-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_required-color: var(--ui-label-required-color, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.ui-label--lg{--ui-_font-size: var(--ui-label-font-size-lg, var(--ui-font-size-md, 1rem))}}
 @layer components.styles{.ui-label{display:inline-flex;align-items:baseline;gap:0;font-size:var(--ui-_font-size);font-weight:var(--ui-weight-medium, 500);line-height:var(--ui-leading-tight-sm, var(--ui-row-1));color:var(--ui-_color);cursor:pointer}.ui-label[aria-disabled=true]{opacity:.5;cursor:not-allowed}.ui-label__required{color:var(--ui-_required-color)}.ui-label__optional{font-weight:var(--ui-weight-normal, 400);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}}
+@layer components.tokens{.ui-number-input{--ui-_height: var(--ui-number-input-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-number-input-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-number-input-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-number-input-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-number-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-number-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-number-input-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_text: var(--ui-number-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_button-color: var(--ui-number-input-button-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_button-bg: var(--ui-number-input-button-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_button-hover-bg: var(--ui-number-input-button-hover-bg, var(--ui-color-border, hsl(220, 10%, 90%)))}.ui-number-input--sm{--ui-_height: var(--ui-number-input-height-sm, calc(1rem * 1.5));--ui-_font-size: var(--ui-number-input-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-number-input--lg{--ui-_height: var(--ui-number-input-height-lg, calc(1rem * 2.5));--ui-_padding-x: var(--ui-number-input-padding-x-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-number-input-font-size-lg, var(--ui-font-size-md, 1rem))}}
+@layer components.styles{.ui-number-input{display:inline-flex;align-items:center;block-size:var(--ui-_height);background:var(--ui-_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);border-radius:var(--ui-_radius);transition: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-number-input:focus-within{border-color:var(--ui-_border-color-focus);box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg))}.ui-number-input--block{inline-size:100%}.ui-number-input--disabled,.ui-number-input:has(.ui-number-input__field:disabled){opacity:.5;cursor:not-allowed}.ui-number-input__field{flex:1;block-size:100%;min-inline-size:0;padding:0 var(--ui-_padding-x);font-family:inherit;font-size:var(--ui-_font-size);line-height:1;text-align:center;color:var(--ui-_text);background:rgba(0,0,0,0);border:none;outline:none}.ui-number-input__field::-webkit-outer-spin-button,.ui-number-input__field::-webkit-inner-spin-button{margin:0;appearance:none}.ui-number-input__field[type=number]{appearance:textfield}.ui-number-input__decrement,.ui-number-input__increment{display:flex;flex-shrink:0;align-items:center;justify-content:center;block-size:100%;inline-size:var(--ui-_height);padding:0;margin:0;color:var(--ui-_button-color);background:var(--ui-_button-bg);border:none;cursor:pointer;transition:background var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.ui-number-input__decrement:hover:not(:disabled),.ui-number-input__increment:hover:not(:disabled){background:var(--ui-_button-hover-bg)}.ui-number-input__decrement:focus-visible,.ui-number-input__increment:focus-visible{outline:2px solid var(--ui-color-focus, oklch(75% 0.15 250deg));outline-offset:-2px}.ui-number-input__decrement:disabled,.ui-number-input__increment:disabled{cursor:not-allowed}.ui-number-input__decrement svg,.ui-number-input__increment svg{block-size:var(--ui-size-sm, 0.75rem);inline-size:var(--ui-size-sm, 0.75rem);fill:none;stroke:currentcolor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ui-number-input__decrement{border-start-start-radius:calc(var(--ui-_radius) - var(--ui-border-width-sm, 0.0625rem));border-end-start-radius:calc(var(--ui-_radius) - var(--ui-border-width-sm, 0.0625rem));border-inline-end:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color)}.ui-number-input__increment{border-start-end-radius:calc(var(--ui-_radius) - var(--ui-border-width-sm, 0.0625rem));border-end-end-radius:calc(var(--ui-_radius) - var(--ui-border-width-sm, 0.0625rem));border-inline-start:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color)}}
+@layer components.tokens{.ui-password-input{--ui-_height: var(--ui-password-input-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-password-input-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-password-input-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-password-input-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-password-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-password-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-password-input-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_text: var(--ui-password-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_placeholder: var(--ui-password-input-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_toggle-color: var(--ui-password-input-toggle-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_toggle-hover-bg: var(--ui-password-input-toggle-hover-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)))}.ui-password-input--sm{--ui-_height: var(--ui-password-input-height-sm, calc(1rem * 1.5));--ui-_font-size: var(--ui-password-input-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-password-input--lg{--ui-_height: var(--ui-password-input-height-lg, calc(1rem * 2.5));--ui-_padding-x: var(--ui-password-input-padding-x-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-password-input-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-password-input--error{--ui-_border-color: var(--ui-password-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_border-color-focus: var(--ui-password-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.ui-password-input--success{--ui-_border-color: var(--ui-password-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));--ui-_border-color-focus: var(--ui-password-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)))}}
+@layer components.styles{.ui-password-input{display:inline-flex;align-items:center;block-size:var(--ui-_height);background:var(--ui-_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);border-radius:var(--ui-_radius);transition: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-password-input:focus-within,.ui-password-input--focus{border-color:var(--ui-_border-color-focus);box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg))}.ui-password-input--block{inline-size:100%}.ui-password-input--disabled,.ui-password-input:has(.ui-password-input__field:disabled){opacity:.5;cursor:not-allowed}.ui-password-input__field{flex:1;block-size:100%;min-inline-size:0;padding:0;padding-inline-start:var(--ui-_padding-x);font-family:inherit;font-size:var(--ui-_font-size);line-height:1;color:var(--ui-_text);background:rgba(0,0,0,0);border:none;outline:none}.ui-password-input__field::placeholder{color:var(--ui-_placeholder)}.ui-password-input__toggle{display:flex;flex-shrink:0;align-items:center;justify-content:center;block-size:calc(var(--ui-_height) - var(--ui-space-half, 0.25rem)*2);inline-size:calc(var(--ui-_height) - var(--ui-space-half, 0.25rem)*2);margin-inline-end:calc(var(--ui-space-half, 0.25rem));color:var(--ui-_toggle-color);background:rgba(0,0,0,0);border:none;border-radius:var(--ui-radius-sm, 0.25rem);cursor:pointer;transition:background var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.ui-password-input__toggle:hover{background:var(--ui-_toggle-hover-bg)}.ui-password-input__toggle:focus-visible{outline:2px solid var(--ui-color-focus, oklch(75% 0.15 250deg));outline-offset:-2px}.ui-password-input__toggle svg{block-size:var(--ui-size-md, 1rem);inline-size:var(--ui-size-md, 1rem);fill:none;stroke:currentcolor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}}
 @layer components.tokens{.ui-radio{--ui-_size: var(--ui-radio-size, calc(0.5rem * 2));--ui-_bg: var(--ui-radio-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_bg-checked: var(--ui-radio-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_border-color: var(--ui-radio-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-radio-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_dot-color: var(--ui-radio-dot-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.ui-radio--lg{--ui-_size: var(--ui-radio-size-lg, calc(0.5rem * 3))}.ui-radio--error{--ui-_border-color: var(--ui-radio-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_border-color-focus: var(--ui-radio-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}}
 @layer components.styles{.ui-radio{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:50%;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-radio::before{content:"";block-size:50%;inline-size:50%;background-color:var(--ui-_dot-color);border-radius:50%;opacity:0;transform:scale(0);transition:opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.ui-radio:hover:not(:disabled){border-color:var(--ui-_border-color-focus)}.ui-radio: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-radio:checked{background:var(--ui-_bg-checked);border-color:var(--ui-_bg-checked)}.ui-radio:checked::before{opacity:1;transform:scale(1)}.ui-radio:disabled{opacity:.5;cursor:not-allowed}}
+@layer components.tokens{.ui-radio-group{--ui-_spacing: var(--ui-radio-group-spacing, var(--ui-space-1, 0.5rem));--ui-_legend-size: var(--ui-radio-group-legend-size, var(--ui-font-size-sm, 0.875rem));--ui-_legend-weight: var(--ui-radio-group-legend-weight, var(--ui-weight-medium, 500));--ui-_legend-color: var(--ui-radio-group-legend-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_legend-spacing: var(--ui-radio-group-legend-spacing, var(--ui-space-1, 0.5rem));--ui-_item-gap: var(--ui-radio-group-item-gap, var(--ui-space-1, 0.5rem))}.ui-radio-group--compact{--ui-_spacing: var(--ui-radio-group-spacing-compact, 0);--ui-_legend-spacing: var(--ui-radio-group-legend-spacing-compact, 0);--ui-_item-gap: var(--ui-radio-group-item-gap-compact, 0)}.ui-radio-group--error{--ui-_legend-color: var(--ui-radio-group-error-color, var(--ui-color-danger, oklch(60% 0.22 25deg)))}}
+@layer components.styles{.ui-radio-group{display:flex;flex-direction:column;gap:var(--ui-_legend-spacing);min-inline-size:0;padding:0;margin:0;border:none}.ui-radio-group__legend{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-radio-group__items{display:flex;flex-direction:column;gap:var(--ui-_spacing)}.ui-radio-group__item{display:flex;align-items:center;gap:var(--ui-_item-gap);line-height:var(--ui-row-1, 1rem);cursor:pointer}.ui-radio-group__item:has(:disabled){opacity:.5;cursor:not-allowed}.ui-radio-group--horizontal>.ui-radio-group__items{flex-direction:row;flex-wrap:wrap;gap:var(--ui-space-2, 1rem)}.ui-radio-group:disabled,.ui-radio-group[aria-disabled=true]{opacity:.5;cursor:not-allowed}}
+@layer components.tokens{.ui-search-input{--ui-_height: var(--ui-search-input-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-search-input-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-search-input-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-search-input-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-search-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-search-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-search-input-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_text: var(--ui-search-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_placeholder: var(--ui-search-input-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_icon-color: var(--ui-search-input-icon-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_icon-size: var(--ui-search-input-icon-size, var(--ui-size-md, 1rem));--ui-_clear-color: var(--ui-search-input-clear-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_clear-hover-bg: var(--ui-search-input-clear-hover-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)))}.ui-search-input--sm{--ui-_height: var(--ui-search-input-height-sm, calc(1rem * 1.5));--ui-_font-size: var(--ui-search-input-font-size-sm, var(--ui-font-size-xs, 0.75rem));--ui-_icon-size: var(--ui-search-input-icon-size-sm, var(--ui-size-sm, 0.75rem))}.ui-search-input--lg{--ui-_height: var(--ui-search-input-height-lg, calc(1rem * 2.5));--ui-_padding-x: var(--ui-search-input-padding-x-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-search-input-font-size-lg, var(--ui-font-size-md, 1rem));--ui-_icon-size: var(--ui-search-input-icon-size-lg, var(--ui-size-lg, 1.25rem))}}
+@layer components.styles{.ui-search-input{display:inline-flex;align-items:center;block-size:var(--ui-_height);background:var(--ui-_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);border-radius:var(--ui-_radius);transition: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-search-input:focus-within,.ui-search-input--focus{border-color:var(--ui-_border-color-focus);box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg))}.ui-search-input--block{inline-size:100%}.ui-search-input--disabled,.ui-search-input:has(.ui-search-input__field:disabled){opacity:.5;cursor:not-allowed}.ui-search-input__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;inline-size:var(--ui-_height);color:var(--ui-_icon-color);pointer-events:none}.ui-search-input__icon svg{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}.ui-search-input__field{flex:1;block-size:100%;min-inline-size:0;padding:0;padding-inline-end:var(--ui-_padding-x);font-family:inherit;font-size:var(--ui-_font-size);line-height:1;color:var(--ui-_text);background:rgba(0,0,0,0);border:none;outline:none}.ui-search-input__field::placeholder{color:var(--ui-_placeholder)}.ui-search-input__field::-webkit-search-cancel-button,.ui-search-input__field::-webkit-search-decoration{appearance:none}.ui-search-input--has-clear .ui-search-input__field{padding-inline-end:0}.ui-search-input__clear{display:flex;flex-shrink:0;align-items:center;justify-content:center;block-size:calc(var(--ui-_height) - var(--ui-space-half, 0.25rem)*2);inline-size:calc(var(--ui-_height) - var(--ui-space-half, 0.25rem)*2);margin-inline-end:calc(var(--ui-space-half, 0.25rem));color:var(--ui-_clear-color);background:rgba(0,0,0,0);border:none;border-radius:var(--ui-radius-sm, 0.25rem);cursor:pointer;transition:background var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.ui-search-input__clear:hover{background:var(--ui-_clear-hover-bg)}.ui-search-input__clear:focus-visible{outline:2px solid var(--ui-color-focus, oklch(75% 0.15 250deg));outline-offset:-2px}.ui-search-input__clear svg{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-select{--ui-_height: var(--ui-select-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-select-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-select-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-select-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-select-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-select-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-select-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_text: var(--ui-select-text, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_icon-color: var(--ui-select-icon-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)))}.ui-select--sm{--ui-_height: var(--ui-select-height-sm, calc(1rem * 1.5));--ui-_font-size: var(--ui-select-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-select--lg{--ui-_height: var(--ui-select-height-lg, calc(1rem * 2.5));--ui-_padding-x: var(--ui-select-padding-x-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-select-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-select--filled{--ui-_bg: var(--ui-select-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_border-color: transparent}.ui-select--ghost{--ui-_bg: transparent;--ui-_border-color: transparent}.ui-select--error{--ui-_border-color: var(--ui-select-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_border-color-focus: var(--ui-select-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.ui-select--success{--ui-_border-color: var(--ui-select-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));--ui-_border-color-focus: var(--ui-select-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)))}}
 @layer components.styles{.ui-select{display:inline-block;block-size:var(--ui-_height);padding-inline-start:var(--ui-_padding-x);padding-inline-end:calc(var(--ui-_height) - var(--ui-space-half, 0.25rem));font-family:inherit;font-size:var(--ui-_font-size);line-height:1;color:var(--ui-_text);background-color:var(--ui-_bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);border-radius:var(--ui-_radius);cursor:pointer;appearance:none;transition:border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);background-repeat:no-repeat;background-position:right var(--ui-space-half, 0.25rem) center;background-size:calc(var(--ui-_height)*.5)}.ui-select:hover:not(:disabled,:focus){border-color:var(--ui-color-border-strong, hsl(220, 10%, 80%))}.ui-select:focus,.ui-select--focus{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-select:disabled,.ui-select--disabled{opacity:.5;cursor:not-allowed}.ui-select--block{inline-size:100%}.ui-select:invalid,.ui-select--placeholder{color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}}
+@layer components.tokens{.ui-slider{--ui-_height: var(--ui-slider-height, var(--ui-row-2, 2rem));--ui-_track-height: var(--ui-slider-track-height, 0.5rem);--ui-_track-bg: var(--ui-slider-track-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));--ui-_track-fill: var(--ui-slider-track-fill, var(--ui-color-primary));--ui-_track-radius: var(--ui-slider-track-radius, var(--ui-radius-full, 9999px));--ui-_thumb-size: var(--ui-slider-thumb-size, calc(0.5rem * 2.5));--ui-_thumb-bg: var(--ui-slider-thumb-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_thumb-border-color: var(--ui-slider-thumb-border-color, var(--ui-color-primary));--ui-_thumb-border-width: var(--ui-slider-thumb-border-width, var(--ui-border-width-md, 0.125rem));--ui-_thumb-radius: var(--ui-slider-thumb-radius, var(--ui-radius-full, 9999px));--ui-_thumb-shadow: var(--ui-slider-thumb-shadow, 0 1px 3px rgb(0 0 0 / 0.2));--ui-_focus-ring: var(--ui-slider-focus-ring, var(--ui-color-focus, oklch(75% 0.15 250deg)))}.ui-slider--sm{--ui-_height: var(--ui-slider-height-sm, calc(1rem * 1.5));--ui-_track-height: calc(0.5rem * 0.5);--ui-_thumb-size: calc(0.5rem * 2)}.ui-slider--lg{--ui-_height: var(--ui-slider-height-lg, calc(1rem * 2.5));--ui-_track-height: calc(0.5rem * 1.5);--ui-_thumb-size: calc(0.5rem * 3)}.ui-slider--success{--ui-_track-fill: var(--ui-color-success);--ui-_thumb-border-color: var(--ui-color-success)}.ui-slider--warning{--ui-_track-fill: var(--ui-color-warning);--ui-_thumb-border-color: var(--ui-color-warning)}.ui-slider--danger{--ui-_track-fill: var(--ui-color-danger);--ui-_thumb-border-color: var(--ui-color-danger)}}
+@layer components.styles{.ui-slider{display:inline-flex;align-items:center;block-size:var(--ui-_height);inline-size:100%;padding:0;margin:0;background:rgba(0,0,0,0);cursor:pointer;appearance:none}.ui-slider::-webkit-slider-runnable-track{block-size:var(--ui-_track-height);background:var(--ui-_track-bg);border-radius:var(--ui-_track-radius)}.ui-slider::-moz-range-track{block-size:var(--ui-_track-height);background:var(--ui-_track-bg);border:none;border-radius:var(--ui-_track-radius)}.ui-slider::-moz-range-progress{block-size:var(--ui-_track-height);background:var(--ui-_track-fill);border-radius:var(--ui-_track-radius)}.ui-slider::-webkit-slider-thumb{block-size:var(--ui-_thumb-size);inline-size:var(--ui-_thumb-size);margin-block-start:calc((var(--ui-_track-height) - var(--ui-_thumb-size))/2);background:var(--ui-_thumb-bg);border:var(--ui-_thumb-border-width) solid var(--ui-_thumb-border-color);border-radius:var(--ui-_thumb-radius);box-shadow:var(--ui-_thumb-shadow);appearance:none;transition:box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.ui-slider::-moz-range-thumb{block-size:var(--ui-_thumb-size);inline-size:var(--ui-_thumb-size);background:var(--ui-_thumb-bg);border:var(--ui-_thumb-border-width) solid var(--ui-_thumb-border-color);border-radius:var(--ui-_thumb-radius);box-shadow:var(--ui-_thumb-shadow);transition:box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.ui-slider:focus-visible{outline:none}.ui-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-_focus-ring)}.ui-slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-_focus-ring)}.ui-slider:hover:not(:disabled)::-webkit-slider-thumb{transform:scale(1.1)}.ui-slider:hover:not(:disabled)::-moz-range-thumb{transform:scale(1.1)}.ui-slider:disabled{opacity:.5;cursor:not-allowed}}
 @layer components.tokens{.ui-textarea{--ui-_min-height: var(--ui-textarea-min-height, calc(1rem * 4));--ui-_padding-x: var(--ui-textarea-padding-x, var(--ui-space-1, 0.5rem));--ui-_padding-y: var(--ui-textarea-padding-y, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-textarea-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-textarea-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-textarea-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-textarea-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-textarea-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_text: var(--ui-textarea-text, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_placeholder: var(--ui-textarea-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)))}.ui-textarea--sm{--ui-_min-height: var(--ui-textarea-min-height-sm, calc(1rem * 3));--ui-_font-size: var(--ui-textarea-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-textarea--lg{--ui-_min-height: var(--ui-textarea-min-height-lg, calc(1rem * 6));--ui-_padding-x: var(--ui-textarea-padding-x-lg, var(--ui-space-2, 1rem));--ui-_padding-y: var(--ui-textarea-padding-y-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-textarea-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-textarea--filled{--ui-_bg: var(--ui-textarea-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_border-color: transparent}.ui-textarea--ghost{--ui-_bg: transparent;--ui-_border-color: transparent}.ui-textarea--error{--ui-_border-color: var(--ui-textarea-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_border-color-focus: var(--ui-textarea-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.ui-textarea--success{--ui-_border-color: var(--ui-textarea-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));--ui-_border-color-focus: var(--ui-textarea-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)))}}
 @layer components.styles{.ui-textarea{display:block;box-sizing:border-box;inline-size:100%;min-block-size:var(--ui-_min-height);padding-block:var(--ui-_padding-y);padding-inline:var(--ui-_padding-x);font-family:inherit;font-size:var(--ui-_font-size);line-height:var(--ui-row-1, 1rem);color:var(--ui-_text);background:var(--ui-_bg);border:none;border-radius:var(--ui-_radius);outline:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);transition:border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);outline-offset:calc(var(--ui-border-width-sm, 0.0625rem)*-1);resize:vertical}.ui-textarea::placeholder{color:var(--ui-_placeholder)}.ui-textarea:hover:not(:disabled,:focus){outline-color:var(--ui-color-border-strong, hsl(220, 10%, 80%))}.ui-textarea:focus,.ui-textarea--focus{outline-color:var(--ui-_border-color-focus);box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg))}.ui-textarea:disabled,.ui-textarea--disabled{opacity:.5;cursor:not-allowed;resize:none}.ui-textarea:read-only{background:var(--ui-color-bg-subtle, hsl(220, 10%, 96%));resize:none}.ui-textarea--resize-none{resize:none}.ui-textarea--resize-horizontal{resize:horizontal}.ui-textarea--resize-both{resize:both}}
 @layer components.tokens{.ui-toggle{--ui-_track-width: var(--ui-toggle-track-width, calc(0.5rem * 5));--ui-_track-height: var(--ui-toggle-track-height, calc(0.5rem * 3));--ui-_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));--ui-_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary));--ui-_track-radius: var(--ui-toggle-track-radius, calc(0.5rem * 1.5));--ui-_thumb-size: var(--ui-toggle-thumb-size, calc(0.5rem * 2.5));--ui-_thumb-bg: var(--ui-toggle-thumb-bg, white);--ui-_thumb-offset: var(--ui-toggle-thumb-offset, calc(0.5rem / 4))}.ui-toggle--sm{--ui-_track-width: calc(0.5rem * 4);--ui-_track-height: calc(0.5rem * 2);--ui-_track-radius: 0.5rem;--ui-_thumb-size: calc(0.5rem * 1.5)}.ui-toggle--lg{--ui-_track-width: calc(0.5rem * 6);--ui-_track-height: calc(0.5rem * 4);--ui-_track-radius: calc(0.5rem * 2);--ui-_thumb-size: calc(0.5rem * 3.5)}}
 @layer components.styles{.ui-toggle{display:inline-flex;flex-shrink:0;align-items:center;position:relative;block-size:var(--ui-_track-height);inline-size:var(--ui-_track-width);background:var(--ui-_track-bg);border-radius:var(--ui-_track-radius);cursor:pointer;transition:background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.ui-toggle__input{position:absolute;inset:0;block-size:100%;inline-size:100%;margin:0;opacity:0;cursor:pointer}.ui-toggle__track{position:absolute;inset:0;background:var(--ui-_track-bg);border-radius:var(--ui-_track-radius);transition:background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.ui-toggle__thumb{position:absolute;inset-block-start:var(--ui-_thumb-offset);inset-inline-start:var(--ui-_thumb-offset);block-size:var(--ui-_thumb-size);inline-size:var(--ui-_thumb-size);background:var(--ui-_thumb-bg);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.ui-toggle__input:checked~.ui-toggle__track{background:var(--ui-_track-bg-checked)}.ui-toggle__input:checked~.ui-toggle__thumb{transform:translateX(calc(var(--ui-_track-width) - var(--ui-_thumb-size) - var(--ui-_thumb-offset) * 2))}.ui-toggle__input:focus-visible~.ui-toggle__track{outline:2px solid var(--ui-color-focus, var(--ui-color-primary));outline-offset:calc(0.5rem/4)}.ui-toggle__input:disabled~.ui-toggle__track,.ui-toggle__input:disabled~.ui-toggle__thumb{opacity:.5;cursor:not-allowed}.ui-toggle:has(.ui-toggle__input:disabled){cursor:not-allowed}}
 @layer components.tokens{.ui-divider{--ui-_color: var(--ui-divider-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));--ui-_line-size: var(--ui-divider-line-size, 1px);--ui-_height: var(--ui-divider-height, 0.5rem);--ui-_gap: var(--ui-divider-gap, calc(0.5rem * 2))}}
 @layer components.styles{.ui-divider{display:flex;align-items:center;block-size:var(--ui-_height);margin:var(--ui-_gap) 0;font-size:var(--ui-font-size-sm, 0.875rem);line-height:1;color:var(--ui-color-text-muted)}.ui-divider::before,.ui-divider::after{content:"";flex:1;block-size:var(--ui-_line-size);background:var(--ui-_color)}.ui-divider:not(:empty){--ui-_height: var(--ui-row-1, 1rem)}.ui-divider:not(:empty)::before{margin-inline-end:calc(0.5rem*2)}.ui-divider:not(:empty)::after{margin-inline-start:calc(0.5rem*2)}.ui-divider:empty::after{display:none}.ui-divider--vertical{flex-direction:column;align-self:stretch;margin:0 var(--ui-_gap);writing-mode:vertical-rl}.ui-divider--vertical::before,.ui-divider--vertical::after{flex:1;block-size:auto;inline-size:var(--ui-_size)}.ui-divider--start::before{display:none}.ui-divider--start:not(:empty)::after{margin-inline-start:calc(0.5rem*2)}.ui-divider--end::after{display:none}.ui-divider--end:not(:empty)::before{margin-inline-end:calc(0.5rem*2)}.ui-divider--dashed::before,.ui-divider--dashed::after{background:repeating-linear-gradient(90deg, var(--ui-_color) 0, var(--ui-_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem)}.ui-divider--vertical.ui-divider--dashed::before,.ui-divider--vertical.ui-divider--dashed::after{background:repeating-linear-gradient(180deg, var(--ui-_color) 0, var(--ui-_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem)}}
+@layer components.tokens{.ui-scroll-area{--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, 150ms) var(--ui-ease-default, ease)}.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)}}
 @layer components.styles{.ui-spacer{flex:var(--ui-_size)}}
 @layer components.tokens{.ui-breadcrumb{--ui-_height: var(--ui-breadcrumb-height, var(--ui-row-1, 1rem));--ui-_gap: var(--ui-breadcrumb-gap, calc(0.5rem * 1));--ui-_separator-color: var(--ui-breadcrumb-separator-color, var(--ui-color-text-muted));--ui-_link-color: var(--ui-breadcrumb-link-color, var(--ui-color-text-muted));--ui-_current-color: var(--ui-breadcrumb-current-color, var(--ui-color-text))}}
 @layer components.styles{.ui-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-_gap);block-size:var(--ui-_height);padding:0;margin:0;font-size:var(--ui-font-size-sm, 0.875rem);line-height:1;list-style:none}.ui-breadcrumb__item{display:flex;align-items:center;gap:var(--ui-_gap);block-size:var(--ui-_height)}.ui-breadcrumb__item:not(:last-child)::after{content:var(--ui-breadcrumb-separator, "/");color:var(--ui-_separator-color)}.ui-breadcrumb__link{text-decoration:none;color:var(--ui-_link-color);transition:color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.ui-breadcrumb__link:hover{text-decoration:underline;color:var(--ui-color-primary)}.ui-breadcrumb__item:last-child .ui-breadcrumb__link,.ui-breadcrumb__current{color:var(--ui-_current-color);pointer-events:none}.ui-breadcrumb__item--hidden{display:none}.ui-breadcrumb__ellipsis{color:var(--ui-_separator-color)}}
+@layer components.tokens{.ui-dropdown-menu{--ui-_z: var(--ui-dropdown-menu-z, 200);--ui-_panel-offset: var(--ui-dropdown-menu-panel-offset, var(--ui-space-1, 0.5rem));--ui-_panel-min-width: var(--ui-dropdown-menu-panel-min-width, auto)}}
+@layer components.styles{.ui-dropdown-menu{display:inline-block;position:relative}.ui-dropdown-menu__trigger{display:inline-flex;align-items:center;gap:var(--ui-space-0, 0.25rem)}.ui-dropdown-menu__trigger-icon{display:inline-flex;font-size:.6em;transition:transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.ui-dropdown-menu--open .ui-dropdown-menu__trigger-icon{transform:rotate(180deg)}.ui-dropdown-menu__panel{position:absolute;inset-block-start:calc(100% + var(--ui-_panel-offset));inset-inline-start:0;z-index:var(--ui-_z);min-inline-size:var(--ui-_panel-min-width);opacity:0;pointer-events:none;transform:translateY(calc(0.5rem * -1));transition:opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.ui-dropdown-menu--open .ui-dropdown-menu__panel{opacity:1;pointer-events:auto;transform:translateY(0)}.ui-dropdown-menu--top .ui-dropdown-menu__panel{inset-block-start:auto;inset-block-end:calc(100% + var(--ui-_panel-offset));transform:translateY(0.5rem)}.ui-dropdown-menu--top.ui-dropdown-menu--open .ui-dropdown-menu__panel{transform:translateY(0)}.ui-dropdown-menu--align-end .ui-dropdown-menu__panel{inset-inline-start:auto;inset-inline-end:0}.ui-dropdown-menu--full-width .ui-dropdown-menu__panel{min-inline-size:100%}}
 @layer components.tokens{.ui-menu{--ui-_min-width: var(--ui-menu-min-width, calc(0.5rem * 16));--ui-_max-height: var(--ui-menu-max-height, calc(0.5rem * 40));--ui-_padding: var(--ui-menu-padding, calc(0.5rem * 1));--ui-_radius: var(--ui-menu-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-menu-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-menu-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg));--ui-_item-padding: var(--ui-menu-item-padding, calc(0.5rem * 1) calc(0.5rem * 2));--ui-_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, 0.25rem));--ui-_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)))}}
 @layer components.styles{.ui-menu{min-inline-size:var(--ui-_min-width);max-block-size:var(--ui-_max-height);padding:var(--ui-_padding);overflow-y:auto;background:var(--ui-_bg);border-radius:var(--ui-_radius);outline:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);box-shadow:var(--ui-_shadow);outline-offset:calc(var(--ui-border-width-sm, 0.0625rem)*-1)}.ui-menu__group{padding:0;margin:0;list-style:none}.ui-menu__label{padding:var(--ui-_item-padding);font-size:var(--ui-font-size-xs, 0.75rem);font-weight:var(--ui-weight-medium, 500);line-height:var(--ui-row-1, 1rem);letter-spacing:.05em;text-transform:uppercase;color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}.ui-menu__item{display:flex;align-items:center;gap:calc(0.5rem*1);padding:var(--ui-_item-padding);font-size:var(--ui-font-size-sm, 0.875rem);line-height:var(--ui-row-1, 1rem);text-decoration:none;color:var(--ui-color-text, hsl(220, 10%, 10%));background:rgba(0,0,0,0);border:none;border-radius:var(--ui-_item-radius);cursor:pointer;transition:background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.ui-menu__item:hover,.ui-menu__item:focus-visible{background:var(--ui-_item-bg-hover);outline:none}.ui-menu__item--danger{color:var(--ui-color-danger, oklch(60% 0.22 25deg))}.ui-menu__item--danger:hover,.ui-menu__item--danger:focus-visible{color:var(--ui-color-danger, oklch(60% 0.22 25deg))}.ui-menu__item--disabled,.ui-menu__item[aria-disabled=true]{opacity:.5;pointer-events:none}.ui-menu__item-icon{flex-shrink:0;block-size:calc(0.5rem*2);inline-size:calc(0.5rem*2)}.ui-menu__item-shortcut{margin-inline-start:auto;font-size:var(--ui-font-size-xs, 0.75rem);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}.ui-menu__separator{display:flex;align-items:center;block-size:calc(0.5rem*2);margin:0}.ui-menu__separator::before{content:"";flex:1;block-size:var(--ui-border-width-sm, 1px);background:var(--ui-color-border, hsl(220, 10%, 90%))}.ui-menu__item--check,.ui-menu__item--radio{position:relative;padding-inline-start:calc(0.5rem*4)}.ui-menu__item-indicator{display:flex;align-items:center;justify-content:center;position:absolute;inset-inline-start:calc(0.5rem*1);block-size:calc(0.5rem*2);inline-size:calc(0.5rem*2)}}
 @layer components.tokens{.ui-nav{--ui-_gap: var(--ui-nav-gap, var(--ui-space-1, 0.5rem));--ui-_item-height: var(--ui-nav-item-height, var(--ui-row-2, 2rem));--ui-_item-padding-x: var(--ui-nav-item-padding-x, var(--ui-space-2, 1rem));--ui-_item-font-size: var(--ui-nav-item-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_item-font-weight: var(--ui-nav-item-font-weight, var(--ui-weight-medium, 500));--ui-_item-color: var(--ui-nav-item-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_item-color-hover: var(--ui-nav-item-color-hover, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_item-radius: var(--ui-nav-item-radius, var(--ui-radius-sm, 0.25rem));--ui-_border-color: var(--ui-nav-border-color, var(--ui-color-border, hsl(220, 10%, 90%)))}.ui-nav--pills{--ui-_item-bg-hover: var(--ui-nav-item-bg-hover, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_item-bg-active: var(--ui-nav-item-bg-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}}

package/package.json

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

package/src/04-components/forms/checkbox-group/checkbox-group.api.json

@@ -0,0 +1,54 @@
+{
+  "name": "checkbox-group",
+  "element": "fieldset",
+  "modifiers": {
+    "horizontal": {
+      "type": "boolean"
+    },
+    "compact": {
+      "type": "boolean"
+    },
+    "error": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "legend": {},
+    "items": {},
+    "item": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-checkbox-group-spacing",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-checkbox-group-spacing-compact",
+      "default": "0"
+    },
+    {
+      "name": "--ui-checkbox-group-legend-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-checkbox-group-legend-weight",
+      "default": "var(--ui-weight-medium)"
+    },
+    {
+      "name": "--ui-checkbox-group-legend-color",
+      "default": "var(--ui-color-text)"
+    },
+    {
+      "name": "--ui-checkbox-group-legend-spacing",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-checkbox-group-item-gap",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-checkbox-group-error-color",
+      "default": "var(--ui-color-danger)"
+    }
+  ]
+}

package/src/04-components/forms/checkbox-group/checkbox-group.docs.json

@@ -0,0 +1,338 @@
+{
+  "id": "checkbox-group",
+  "type": "component",
+  "title": "Checkbox Group",
+  "description": "Groups related checkboxes with a legend and consistent spacing. Built on native fieldset semantics.",
+  "api": "./checkbox-group.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "fieldset",
+              "class": "ui-checkbox-group",
+              "children": [
+                {
+                  "tag": "legend",
+                  "class": "ui-checkbox-group__legend",
+                  "text": "Notifications"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-checkbox-group__items",
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox",
+                          "attrs": { "type": "checkbox", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Email" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
+                        { "tag": "span", "text": "SMS" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
+                        { "tag": "span", "text": "Push" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset class=\"ui-checkbox-group\">\n  <legend class=\"ui-checkbox-group__legend\">Notifications</legend>\n  <div class=\"ui-checkbox-group__items\">\n    <label class=\"ui-checkbox-group__item\">\n      <input type=\"checkbox\" class=\"ui-checkbox\" checked>\n      <span>Email</span>\n    </label>\n    ...\n  </div>\n</fieldset>"
+        }
+      ]
+    },
+    {
+      "title": "Horizontal",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "fieldset",
+              "class": "ui-checkbox-group ui-checkbox-group--horizontal",
+              "children": [
+                {
+                  "tag": "legend",
+                  "class": "ui-checkbox-group__legend",
+                  "text": "Interests"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-checkbox-group__items",
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox",
+                          "attrs": { "type": "checkbox", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Design" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
+                        { "tag": "span", "text": "Engineering" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox",
+                          "attrs": { "type": "checkbox", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Product" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
+                        { "tag": "span", "text": "Marketing" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset class=\"ui-checkbox-group ui-checkbox-group--horizontal\">\n  <legend class=\"ui-checkbox-group__legend\">Interests</legend>\n  ...\n</fieldset>"
+        }
+      ]
+    },
+    {
+      "title": "Compact",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "fieldset",
+              "class": "ui-checkbox-group ui-checkbox-group--compact",
+              "children": [
+                {
+                  "tag": "legend",
+                  "class": "ui-checkbox-group__legend",
+                  "text": "Features"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-checkbox-group__items",
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox",
+                          "attrs": { "type": "checkbox", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Dark mode" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox",
+                          "attrs": { "type": "checkbox", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Notifications" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
+                        { "tag": "span", "text": "Analytics" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset class=\"ui-checkbox-group ui-checkbox-group--compact\">\n  ...\n</fieldset>"
+        }
+      ]
+    },
+    {
+      "title": "Error State",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "fieldset",
+              "class": "ui-checkbox-group ui-checkbox-group--error",
+              "children": [
+                {
+                  "tag": "legend",
+                  "class": "ui-checkbox-group__legend",
+                  "text": "Terms"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-checkbox-group__items",
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox ui-checkbox--error",
+                          "attrs": { "type": "checkbox" }
+                        },
+                        { "tag": "span", "text": "I accept the terms of service" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox ui-checkbox--error",
+                          "attrs": { "type": "checkbox" }
+                        },
+                        { "tag": "span", "text": "I accept the privacy policy" }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-form-error",
+                  "text": "You must accept all terms to continue"
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset class=\"ui-checkbox-group ui-checkbox-group--error\">\n  <legend class=\"ui-checkbox-group__legend\">Terms</legend>\n  <div class=\"ui-checkbox-group__items\">\n    <label class=\"ui-checkbox-group__item\">\n      <input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--error\">\n      <span>I accept the terms of service</span>\n    </label>\n    ...\n  </div>\n  <span class=\"ui-form-error\">You must accept all terms to continue</span>\n</fieldset>"
+        }
+      ]
+    },
+    {
+      "title": "Disabled",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "fieldset",
+              "class": "ui-checkbox-group",
+              "attrs": { "disabled": "" },
+              "children": [
+                {
+                  "tag": "legend",
+                  "class": "ui-checkbox-group__legend",
+                  "text": "Permissions (locked)"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-checkbox-group__items",
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox",
+                          "attrs": { "type": "checkbox", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Read" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox",
+                          "attrs": { "type": "checkbox", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Write" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
+                        { "tag": "span", "text": "Admin" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset class=\"ui-checkbox-group\" disabled>\n  ...\n</fieldset>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-checkbox-group-spacing",
+      "default": "var(--ui-space-1)",
+      "description": "Gap between checkbox items"
+    },
+    {
+      "token": "--ui-checkbox-group-legend-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Legend font size"
+    },
+    {
+      "token": "--ui-checkbox-group-legend-weight",
+      "default": "var(--ui-weight-medium)",
+      "description": "Legend font weight"
+    },
+    {
+      "token": "--ui-checkbox-group-legend-color",
+      "default": "var(--ui-color-text)",
+      "description": "Legend text color"
+    },
+    {
+      "token": "--ui-checkbox-group-item-gap",
+      "default": "var(--ui-space-1)",
+      "description": "Gap between checkbox and label text"
+    },
+    {
+      "token": "--ui-checkbox-group-error-color",
+      "default": "var(--ui-color-danger)",
+      "description": "Legend color in error state"
+    }
+  ]
+}

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

package/src/04-components/forms/checkbox-group/index.scss

@@ -0,0 +1,84 @@
+@use '../../../00-config/tokens/variables' as t;
+
+// @component checkbox-group
+// @element fieldset
+
+@layer components.tokens {
+  .checkbox-group {
+    --_spacing: var(--ui-checkbox-group-spacing, var(--ui-space-1, #{t.$space-1}));
+    --_legend-size: var(--ui-checkbox-group-legend-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_legend-weight: var(--ui-checkbox-group-legend-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_legend-color: var(--ui-checkbox-group-legend-color, var(--ui-color-text, #{t.$color-text}));
+    --_legend-spacing: var(--ui-checkbox-group-legend-spacing, var(--ui-space-1, #{t.$space-1}));
+    --_item-gap: var(--ui-checkbox-group-item-gap, var(--ui-space-1, #{t.$space-1}));
+  }
+
+  .checkbox-group--compact {
+    --_spacing: var(--ui-checkbox-group-spacing-compact, 0);
+    --_legend-spacing: var(--ui-checkbox-group-legend-spacing-compact, 0);
+    --_item-gap: var(--ui-checkbox-group-item-gap-compact, 0);
+  }
+
+  // @modifier state
+  .checkbox-group--error {
+    --_legend-color: var(--ui-checkbox-group-error-color, var(--ui-color-danger, #{t.$color-danger}));
+  }
+}
+
+@layer components.styles {
+  .checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--_legend-spacing);
+
+    min-inline-size: 0;
+    padding: 0;
+    margin: 0;
+
+    border: none;
+  }
+
+  .checkbox-group__legend {
+    padding: 0;
+
+    font-size: var(--_legend-size);
+    font-weight: var(--_legend-weight);
+    line-height: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$leading-tight-sm}));
+    color: var(--_legend-color);
+  }
+
+  .checkbox-group__items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--_spacing);
+  }
+
+  .checkbox-group__item {
+    display: flex;
+    align-items: center;
+    gap: var(--_item-gap);
+
+    line-height: var(--ui-row-1, #{t.$row-1});
+
+    cursor: pointer;
+  }
+
+  .checkbox-group__item:has(:disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  // Horizontal layout
+  .checkbox-group--horizontal > .checkbox-group__items {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--ui-space-2, #{t.$space-2});
+  }
+
+  // Disabled group
+  .checkbox-group:disabled,
+  .checkbox-group[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}