@teseor/css 1.10.1 → 1.12.0

package/dist/index.css

@@ -8,8 +8,8 @@
 @layer tokens{:root{--ui-shadow-sm: 0 1px 2px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.05);--ui-shadow-md: 0 4px 6px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.1);--ui-shadow-lg: 0 10px 15px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.15)}}
 @layer tokens{:root{--ui-z-base: 0;--ui-z-sticky: 100;--ui-z-dropdown: 200;--ui-z-overlay: 300;--ui-z-modal: 400;--ui-z-popover: 500;--ui-z-tooltip: 600;--ui-z-toast: 700;--ui-z-drawer: 800;--ui-z-debug: 9999}}
 @layer tokens{:root{--ui-duration-instant: 50ms;--ui-duration-fast: 100ms;--ui-duration-base: 150ms;--ui-duration-normal: 200ms;--ui-duration-slow: 250ms;--ui-duration-slower: 400ms;--ui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);--ui-ease-in: cubic-bezier(0.4, 0, 1, 1);--ui-ease-out: cubic-bezier(0, 0, 0.2, 1);--ui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)}@media(prefers-reduced-motion: reduce){:root{--ui-duration-instant: 0ms;--ui-duration-fast: 0ms;--ui-duration-base: 0ms;--ui-duration-normal: 0ms;--ui-duration-slow: 0ms;--ui-duration-slower: 0ms}}}
-@layer tokens{:root{--ui-color-text: var(--ui-color-neutral-900);--ui-color-text-muted: var(--ui-color-neutral-500);--ui-color-text-inverse: var(--ui-color-neutral-50);--ui-color-bg: var(--ui-color-neutral-50);--ui-color-bg-subtle: var(--ui-color-neutral-100);--ui-color-bg-muted: var(--ui-color-neutral-200);--ui-color-border: var(--ui-color-neutral-200);--ui-color-border-strong: var(--ui-color-neutral-300);--ui-color-interactive: var(--ui-color-primary);--ui-color-interactive-hover: var(--ui-color-primary-dark);--ui-color-focus: var(--ui-color-primary-light);--ui-opacity-disabled: 0.5;--ui-opacity-loading: 0.7;--ui-overlay-bg: rgb(0 0 0 / 0.5);--ui-overlay-bg-light: rgb(255 255 255 / 0.7);--ui-overlay-bg-blur: rgb(0 0 0 / 0.3);--ui-overlay-bg-subtle: rgb(0 0 0 / 0.1)}}
-@layer themes{[data-theme=dark]{--ui-color-text: var(--ui-color-neutral-100);--ui-color-text-muted: var(--ui-color-neutral-400);--ui-color-text-inverse: var(--ui-color-neutral-900);--ui-color-bg: var(--ui-color-neutral-900);--ui-color-bg-subtle: var(--ui-color-neutral-800);--ui-color-bg-muted: var(--ui-color-neutral-700);--ui-color-border: var(--ui-color-neutral-700);--ui-color-border-strong: var(--ui-color-neutral-600)}@media(prefers-color-scheme: dark){:root:not([data-theme]){--ui-color-text: var(--ui-color-neutral-100);--ui-color-text-muted: var(--ui-color-neutral-400);--ui-color-text-inverse: var(--ui-color-neutral-900);--ui-color-bg: var(--ui-color-neutral-900);--ui-color-bg-subtle: var(--ui-color-neutral-800);--ui-color-bg-muted: var(--ui-color-neutral-700);--ui-color-border: var(--ui-color-neutral-700);--ui-color-border-strong: var(--ui-color-neutral-600)}}@media(forced-colors: active){:root{--ui-color-focus: Highlight}}}
+@layer tokens{:root{color-scheme:light dark;--ui-color-text: light-dark(var(--ui-color-neutral-900), var(--ui-color-neutral-100));--ui-color-text-muted: light-dark(var(--ui-color-neutral-500), var(--ui-color-neutral-400));--ui-color-text-inverse: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));--ui-color-bg: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));--ui-color-bg-subtle: light-dark(var(--ui-color-neutral-100), var(--ui-color-neutral-800));--ui-color-bg-muted: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));--ui-color-border: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));--ui-color-border-strong: light-dark(var(--ui-color-neutral-300), var(--ui-color-neutral-600));--ui-color-interactive: var(--ui-color-primary);--ui-color-interactive-hover: var(--ui-color-primary-dark);--ui-color-focus: var(--ui-color-primary-light);--ui-opacity-disabled: 0.5;--ui-opacity-loading: 0.7;--ui-overlay-bg: rgb(0 0 0 / 0.5);--ui-overlay-bg-light: rgb(255 255 255 / 0.7);--ui-overlay-bg-blur: rgb(0 0 0 / 0.3);--ui-overlay-bg-subtle: rgb(0 0 0 / 0.1)}}
+@layer themes{[data-theme=light]{color-scheme:light}[data-theme=dark]{color-scheme:dark}@media(forced-colors: active){:root{--ui-color-focus: Highlight}}@media(prefers-contrast: more){:root{--ui-color-border: light-dark(var(--ui-color-neutral-400), var(--ui-color-neutral-400));--ui-color-border-strong: light-dark(var(--ui-color-neutral-600), var(--ui-color-neutral-300));--ui-color-text-muted: light-dark(var(--ui-color-neutral-600), var(--ui-color-neutral-300));--ui-color-bg-subtle: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700))}}@media(prefers-contrast: less){:root{--ui-color-border: var(--ui-color-neutral-150);--ui-color-border-strong: var(--ui-color-neutral-200)}}}
 @layer tokens{:root{--ui-spacing-xs: var(--ui-space-1);--ui-spacing-sm: var(--ui-space-2);--ui-spacing-md: var(--ui-space-4);--ui-spacing-lg: var(--ui-space-6);--ui-spacing-xl: var(--ui-space-8);--ui-spacing-gutter: var(--ui-space-4);--ui-spacing-section: var(--ui-space-8)}}
 :root{--ui-input-height: var(--ui-row-2);--ui-input-padding-x: var(--ui-space-2);--ui-input-padding-y: var(--ui-space-1);--ui-input-radius: var(--ui-radius-md);--ui-input-border-width: var(--ui-border-width-sm);--ui-input-bg: var(--ui-color-bg);--ui-input-border: var(--ui-color-border);--ui-input-border-focus: var(--ui-color-interactive);--ui-input-text: var(--ui-color-text);--ui-input-placeholder: var(--ui-color-text-muted)}
 @layer reset{*,*::before,*::after{box-sizing:border-box;margin:0}}
@@ -48,7 +48,7 @@
 @layer components.tokens{.ui-badge{--ui-_accent: var(--ui-badge-accent, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_height: var(--ui-badge-height, calc(var(--ui-row, 1rem) * 1.25));--ui-_padding-x: var(--ui-badge-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-badge-font-size, var(--ui-font-size-xs, 0.75rem));--ui-_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, 500));--ui-_radius: var(--ui-badge-radius, var(--ui-radius-full, 9999px));--ui-_bg: var(--ui-_accent);--ui-_color: var(--ui-badge-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-badge--sm{--ui-_height: var(--ui-badge-height-sm, var(--ui-row, 1rem));--ui-_padding-x: var(--ui-badge-padding-x-sm, var(--ui-space-0, 0.25rem));--ui-_font-size: var(--ui-badge-font-size-sm, calc(var(--ui-font-size-xs, 0.75rem) * 0.85))}.ui-badge--lg{--ui-_height: var(--ui-badge-height-lg, calc(var(--ui-row, 1rem) * 1.5));--ui-_padding-x: var(--ui-badge-padding-x-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-badge-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-badge--primary{--ui-_accent: var(--ui-color-primary, oklch(55% 0.22 250deg));--ui-_color: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}.ui-badge--success{--ui-_accent: var(--ui-color-success, oklch(60% 0.18 145deg));--ui-_color: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}.ui-badge--warning{--ui-_accent: var(--ui-color-warning, oklch(75% 0.18 70deg));--ui-_color: var(--ui-color-text, hsl(220, 10%, 10%))}.ui-badge--danger{--ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));--ui-_color: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}}
 @layer components.styles{.ui-badge{display:inline-flex;align-items:center;justify-content:center;block-size:var(--ui-_height);padding-inline:var(--ui-_padding-x);font-size:var(--ui-_font-size);font-weight:var(--ui-_font-weight);line-height:1;white-space:nowrap;color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}}
 @layer components.tokens{.ui-card{--ui-_row-1: var(--ui-row-1, 1rem);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_padding: var(--ui-card-padding, var(--ui-space-4, 2rem));--ui-_border-width: var(--ui-card-border-width, var(--ui-border-width-sm, 0.0625rem));--ui-_bg: var(--ui-card-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-card-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_radius: var(--ui-card-radius, var(--ui-radius-md, 0.5rem))}.ui-card--subtle{--ui-_bg: var(--ui-card-bg-subtle, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)))}.ui-card--muted{--ui-_bg: var(--ui-card-bg-muted, var(--ui-color-bg-muted, hsl(220, 10%, 90%)))}.ui-card--sm{--ui-_padding: var(--ui-card-padding-sm, var(--ui-space-2, 1rem))}.ui-card--lg{--ui-_padding: var(--ui-card-padding-lg, var(--ui-space-6, 3rem))}.ui-card--interactive{cursor:pointer}.ui-card--flush{--ui-_padding: 0;--ui-_border-width: 0}}
-@layer components.styles{.ui-card{padding:calc(var(--ui-_padding) - var(--ui-_border-width));line-height:var(--ui-_row-1);background:var(--ui-_bg);border:var(--ui-_border-width) solid var(--ui-_border-color);border-radius:var(--ui-_radius)}.ui-card--interactive{transition:background-color var(--ui-_duration-fast) var(--ui-_ease-default),border-color var(--ui-_duration-fast) var(--ui-_ease-default),box-shadow var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-card--interactive:hover{--ui-_bg: var(--ui-card-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--ui-_border-color: var(--ui-card-border-color-hover, var(--ui-color-border-strong, hsl(220, 10%, 80%)))}.ui-card--interactive:active{--ui-_bg: var(--ui-card-bg-active, var(--ui-color-bg-muted, hsl(220, 10%, 90%)))}}
+@layer components.styles{.ui-card{padding:calc(var(--ui-_padding) - var(--ui-_border-width));line-height:var(--ui-_row-1);background:var(--ui-_bg);border:var(--ui-_border-width) solid var(--ui-_border-color);border-radius:var(--ui-_radius)}.ui-card--responsive{display:flex;flex-direction:column}@container (inline-size >= 30rem){.ui-card--responsive{flex-direction:row}}.ui-card--responsive>.ui-card__media{inline-size:100%}@container (inline-size >= 30rem){.ui-card--responsive>.ui-card__media{flex:0 0 auto;inline-size:40%}}.ui-card--responsive>.ui-card__body{flex:1 1 auto}.ui-card--interactive{transition:background-color var(--ui-_duration-fast) var(--ui-_ease-default),border-color var(--ui-_duration-fast) var(--ui-_ease-default),box-shadow var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-card--interactive:hover{--ui-_bg: var(--ui-card-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--ui-_border-color: var(--ui-card-border-color-hover, var(--ui-color-border-strong, hsl(220, 10%, 80%)))}.ui-card--interactive:active{--ui-_bg: var(--ui-card-bg-active, var(--ui-color-bg-muted, hsl(220, 10%, 90%)))}}
 @layer components.tokens{.ui-data-list{--ui-_row-1: var(--ui-row-1, 1rem);--ui-_font-size-sm: var(--ui-font-size-sm, 0.875rem);--ui-_weight-medium: var(--ui-weight-medium, 500);--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_color-border: var(--ui-color-border, hsl(220, 10%, 90%));--ui-_color-bg-subtle: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));--ui-_radius-sm: var(--ui-radius-sm, 0.25rem);--ui-_font-size-lg: var(--ui-font-size-lg, 1.25rem);--ui-_gap: var(--ui-data-list-gap, calc(0.5rem * 2));--ui-_item-gap: var(--ui-data-list-item-gap, calc(0.5rem * 1));--ui-_label-color: var(--ui-data-list-label-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_value-color: var(--ui-data-list-value-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-data-list--sm{--ui-_gap: calc(0.5rem * 1);--ui-_item-gap: 0}.ui-data-list--lg{--ui-_gap: calc(0.5rem * 3);--ui-_item-gap: calc(0.5rem * 1)}}
 @layer components.styles{.ui-data-list{display:flex;flex-direction:column;gap:var(--ui-_gap);margin:0;line-height:var(--ui-_row-1)}.ui-data-list__item{display:flex;flex-direction:column;gap:var(--ui-_item-gap)}.ui-data-list__label{font-size:var(--ui-_font-size-sm);font-weight:var(--ui-_weight-medium);line-height:var(--ui-_row-1);color:var(--ui-_label-color)}.ui-data-list__value{margin:0;line-height:var(--ui-_row-1);color:var(--ui-_value-color)}.ui-data-list--horizontal .ui-data-list__item{flex-direction:row;align-items:baseline;justify-content:space-between;gap:calc(0.5rem*2)}.ui-data-list--horizontal .ui-data-list__label{flex-shrink:0}.ui-data-list--horizontal .ui-data-list__value{text-align:end}.ui-data-list--divided .ui-data-list__item{padding-block-end:calc(var(--ui-_gap) - var(--ui-_border-width-sm));border-block-end:var(--ui-_border-width-sm) solid var(--ui-_color-border)}.ui-data-list--divided .ui-data-list__item:last-child{padding-block-end:0;border-block-end:none}.ui-data-list--striped .ui-data-list__item:nth-child(odd){padding:calc(0.5rem*1);background:var(--ui-_color-bg-subtle);border-radius:var(--ui-_radius-sm)}.ui-data-list--sm{font-size:var(--ui-_font-size-sm)}.ui-data-list--lg{font-size:var(--ui-_font-size-lg)}}
 @layer components.tokens{.ui-icon{--ui-_size: var(--ui-icon-size, var(--ui-ctx-size, 1rem));--ui-_stroke: var(--ui-icon-stroke, 2)}.ui-icon--xs{--ui-_size: var(--ui-icon-size-xs, var(--ui-size-xs, 0.5rem))}.ui-icon--sm{--ui-_size: var(--ui-icon-size-sm, var(--ui-size-sm, 0.75rem))}.ui-icon--md{--ui-_size: var(--ui-icon-size-md, var(--ui-size-md, 1rem))}.ui-icon--lg{--ui-_size: var(--ui-icon-size-lg, var(--ui-size-lg, 1.25rem))}.ui-icon--xl{--ui-_size: var(--ui-icon-size-xl, var(--ui-size-xl, 1.5rem))}.ui-icon--stroke-thin{--ui-_stroke: var(--ui-icon-stroke-thin, 1)}.ui-icon--stroke-thick{--ui-_stroke: var(--ui-icon-stroke-thick, 2.5)}}
@@ -84,7 +84,7 @@
 @layer components.tokens{.ui-checkbox-group{--ui-_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, 1rem));--ui-_row-1: var(--ui-row-1, 1rem);--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_space-2: var(--ui-space-2, 1rem);--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);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);cursor:pointer}.ui-checkbox-group__item:has(:disabled){opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-checkbox-group--horizontal>.ui-checkbox-group__items{flex-direction:row;flex-wrap:wrap;gap:var(--ui-_space-2)}.ui-checkbox-group:disabled,.ui-checkbox-group[aria-disabled=true]{opacity:var(--ui-_opacity-disabled);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.styles{.ui-field{display:flex;flex-direction:column;gap:var(--ui-_gap)}.ui-field__control{display:flex;flex-direction:column}.ui-field--horizontal{flex-direction:row;flex-wrap:wrap;align-items:flex-start}.ui-field--horizontal>.ui-field__label{flex:0 0 auto;min-inline-size:calc(0.5rem*15);padding-block-start:calc(0.5rem*1)}.ui-field--horizontal>.ui-field__control{flex:1 1 0;min-inline-size:calc(0.5rem*20)}.ui-field--responsive{flex-direction:column}@container (inline-size >= 30rem){.ui-field--responsive{flex-direction:row;flex-wrap:wrap;align-items:flex-start}}@container (inline-size >= 30rem){.ui-field--responsive>.ui-field__label{flex:0 0 auto;min-inline-size:calc(0.5rem*15);padding-block-start:calc(0.5rem*1)}}@container (inline-size >= 30rem){.ui-field--responsive>.ui-field__control{flex:1 1 0;min-inline-size:calc(0.5rem*20)}}}
 @layer components.tokens{.ui-fieldset{--ui-_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, 1rem));--ui-_space-half: var(--ui-space-half, 0.25rem);--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_spacing: var(--ui-fieldset-spacing, var(--ui-space-2, 1rem));--ui-_border-color: var(--ui-fieldset-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_border-width: var(--ui-fieldset-border-width, var(--ui-border-width-sm, 0.0625rem));--ui-_border-radius: var(--ui-fieldset-border-radius, var(--ui-radius-md, 0.5rem));--ui-_padding: var(--ui-fieldset-padding, var(--ui-space-2, 1rem));--ui-_legend-size: var(--ui-fieldset-legend-size, var(--ui-font-size-sm, 0.875rem));--ui-_legend-weight: var(--ui-fieldset-legend-weight, var(--ui-weight-medium, 500));--ui-_legend-color: var(--ui-fieldset-legend-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-fieldset--compact{--ui-_spacing: var(--ui-fieldset-spacing-compact, var(--ui-space-1, 0.5rem));--ui-_padding: var(--ui-fieldset-padding-compact, var(--ui-space-1, 0.5rem))}}
 @layer components.styles{.ui-fieldset{display:flex;flex-direction:column;gap:var(--ui-_spacing);min-inline-size:0;padding:0;margin:0;border:none}.ui-fieldset__legend{inline-size:100%;padding:0;font-size:var(--ui-_legend-size);font-weight:var(--ui-_legend-weight);line-height:var(--ui-_leading-tight-sm);color:var(--ui-_legend-color)}.ui-fieldset--bordered{padding:var(--ui-_padding);padding-block-end:calc(var(--ui-_padding) - var(--ui-_border-width));border:var(--ui-_border-width) solid var(--ui-_border-color);border-radius:var(--ui-_border-radius)}.ui-fieldset--bordered>.ui-fieldset__legend{inline-size:auto;padding-inline:var(--ui-_space-half);margin-inline-start:calc(-1*var(--ui-_space-half))}.ui-fieldset:disabled,.ui-fieldset[aria-disabled=true]{opacity:var(--ui-_opacity-disabled);cursor:not-allowed}}
 @layer components.tokens{.ui-form{--ui-_spacing: var(--ui-form-spacing, var(--ui-space-3, calc(0.5rem * 3)));--ui-_actions-gap: var(--ui-form-actions-gap, var(--ui-space-2, calc(0.5rem * 2)));--ui-_section-spacing: var(--ui-form-section-spacing, var(--ui-space-4, calc(0.5rem * 4)))}}
@@ -112,7 +112,7 @@
 @layer components.tokens{.ui-slider{--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--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, rgba(0, 0, 0, 0.1)));--ui-_track-fill: var(--ui-slider-track-fill, var(--ui-color-primary, oklch(55% 0.22 250deg)));--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, oklch(55% 0.22 250deg)));--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 rgba(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, oklch(60% 0.18 145deg));--ui-_thumb-border-color: var(--ui-color-success, oklch(60% 0.18 145deg))}.ui-slider--warning{--ui-_track-fill: var(--ui-color-warning, oklch(75% 0.18 70deg));--ui-_thumb-border-color: var(--ui-color-warning, oklch(75% 0.18 70deg))}.ui-slider--danger{--ui-_track-fill: var(--ui-color-danger, oklch(60% 0.22 25deg));--ui-_thumb-border-color: var(--ui-color-danger, oklch(60% 0.22 25deg))}}
 @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) var(--ui-_ease-default),transform var(--ui-_duration-fast) var(--ui-_ease-default)}.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) var(--ui-_ease-default),transform var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-slider:focus-visible{outline:var(--ui-_border-width-md) solid rgba(0,0,0,0)}.ui-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 var(--ui-_border-width-md) var(--ui-_focus-ring)}.ui-slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 var(--ui-_border-width-md) 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:var(--ui-_opacity-disabled);cursor:not-allowed}}
 @layer components.tokens{.ui-textarea{--ui-_row-1: var(--ui-row-1, 1rem);--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_color-border-strong: var(--ui-color-border-strong, hsl(220, 10%, 80%));--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_color-focus: var(--ui-color-focus, oklch(75% 0.15 250deg));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_color-bg-subtle: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));--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-_color: var(--ui-textarea-color, 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);color:var(--ui-_color);background:var(--ui-_bg);border:none;border-radius:var(--ui-_radius);outline:var(--ui-_border-width-sm) solid var(--ui-_border-color);transition:border-color var(--ui-_duration-fast) var(--ui-_ease-default),box-shadow var(--ui-_duration-fast) var(--ui-_ease-default);outline-offset:calc(var(--ui-_border-width-sm)*-1);resize:vertical}.ui-textarea::placeholder{color:var(--ui-_placeholder)}.ui-textarea:hover:not(:disabled,:focus-visible){outline-color:var(--ui-_color-border-strong)}.ui-textarea:focus-visible,.ui-textarea--focus{outline-color:var(--ui-_border-color-focus);box-shadow:0 0 0 var(--ui-_border-width-md) var(--ui-_color-focus)}.ui-textarea:disabled,.ui-textarea--disabled{opacity:var(--ui-_opacity-disabled);cursor:not-allowed;resize:none}.ui-textarea:read-only{background:var(--ui-_color-bg-subtle);resize:none}.ui-textarea--resize-none{resize:none}.ui-textarea--resize-horizontal{resize:horizontal}.ui-textarea--resize-both{resize:both}}
+@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);color:var(--ui-_color);background:var(--ui-_bg);border:none;border-radius:var(--ui-_radius);outline:var(--ui-_border-width-sm) solid var(--ui-_border-color);transition:border-color var(--ui-_duration-fast) var(--ui-_ease-default),box-shadow var(--ui-_duration-fast) var(--ui-_ease-default);outline-offset:calc(var(--ui-_border-width-sm)*-1);resize:vertical}.ui-textarea::placeholder{color:var(--ui-_placeholder)}.ui-textarea:hover:not(:disabled,:focus-visible){outline-color:var(--ui-_color-border-strong)}.ui-textarea:focus-visible,.ui-textarea--focus{outline-color:var(--ui-_border-color-focus);box-shadow:0 0 0 var(--ui-_border-width-md) var(--ui-_color-focus)}.ui-textarea:disabled,.ui-textarea--disabled{opacity:var(--ui-_opacity-disabled);cursor:not-allowed;resize:none}.ui-textarea:read-only{background:var(--ui-_color-bg-subtle);resize:none}.ui-textarea--resize-none{resize:none}.ui-textarea--resize-horizontal{resize:horizontal}.ui-textarea--resize-both{resize:both}@supports(field-sizing: content){.ui-textarea--auto-size{field-sizing:content;resize:none}}}
 @layer components.tokens{.ui-toggle{--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_color-focus: var(--ui-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--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, rgba(0, 0, 0, 0.1)));--ui-_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));--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, var(--ui-color-bg, hsl(220, 10%, 98%)));--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) var(--ui-_ease-default)}.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) var(--ui-_ease-default)}.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) var(--ui-_ease-default)}.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);outline-offset:calc(0.5rem/4)}.ui-toggle__input:disabled~.ui-toggle__track,.ui-toggle__input:disabled~.ui-toggle__thumb{opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-toggle:has(.ui-toggle__input:disabled){cursor:not-allowed}}
 @layer components.tokens{.ui-breadcrumb{--ui-_font-size-sm: var(--ui-font-size-sm, 0.875rem);--ui-_breadcrumb-separator: var(--ui-breadcrumb-separator, "/");--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_color-primary: var(--ui-color-primary, oklch(55% 0.22 250deg));--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, hsl(220, 10%, 45%)));--ui-_link-color: var(--ui-breadcrumb-link-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_current-color: var(--ui-breadcrumb-current-color, var(--ui-color-text, hsl(220, 10%, 10%)))}}
@@ -146,7 +146,7 @@
 @layer components.tokens{.ui-code-block{--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_font-mono: var(--ui-font-mono, ui-monospace, sfmono-regular, SF Mono, menlo, consolas, Liberation Mono, monospace);--ui-_space-4: var(--ui-space-4, 2rem);--ui-_space-2: var(--ui-space-2, 1rem);--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));overflow-x:auto;font-family:var(--ui-_font-mono);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) 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);padding-inline-end:var(--ui-_space-2);margin-inline-end:var(--ui-_space-2);font-variant-numeric:tabular-nums;text-align:end;color:var(--ui-_line-number-color);border-inline-end:var(--ui-_border-width-sm) 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.styles{.ui-heading{margin:0;text-wrap:balance;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-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_space-quarter: var(--ui-space-quarter, 0.125rem);--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) solid var(--ui-_border-color);border-radius:var(--ui-_radius);box-shadow:0 var(--ui-_space-quarter) 0 var(--ui-_border-color)}}
 @layer components.tokens{.ui-link{--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_color-focus: var(--ui-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--ui-_color: var(--ui-link-color, var(--ui-color-primary, oklch(55% 0.22 250deg)));--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, hsl(220, 10%, 45%)));--ui-_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-link--subtle{--ui-_decoration: none;--ui-_decoration-hover: underline}}
@@ -157,11 +157,13 @@
 @layer components.styles{.ui-mark{padding:var(--ui-_padding-y) var(--ui-_padding-x);color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}}
 @layer utilities{.ui-m-0{margin:0}.ui-m-1{margin:var(--ui-space-1)}.ui-m-2{margin:var(--ui-space-2)}.ui-m-3{margin:var(--ui-space-3)}.ui-m-4{margin:var(--ui-space-4)}.ui-m-6{margin:var(--ui-space-6)}.ui-m-8{margin:var(--ui-space-8)}.ui-mt-0{margin-block-start:0}.ui-mt-1{margin-block-start:var(--ui-space-1)}.ui-mt-2{margin-block-start:var(--ui-space-2)}.ui-mt-3{margin-block-start:var(--ui-space-3)}.ui-mt-4{margin-block-start:var(--ui-space-4)}.ui-mt-6{margin-block-start:var(--ui-space-6)}.ui-mt-8{margin-block-start:var(--ui-space-8)}.ui-me-0{margin-inline-end:0}.ui-me-1{margin-inline-end:var(--ui-space-1)}.ui-me-2{margin-inline-end:var(--ui-space-2)}.ui-me-3{margin-inline-end:var(--ui-space-3)}.ui-me-4{margin-inline-end:var(--ui-space-4)}.ui-me-6{margin-inline-end:var(--ui-space-6)}.ui-me-8{margin-inline-end:var(--ui-space-8)}.ui-mb-0{margin-block-end:0}.ui-mb-1{margin-block-end:var(--ui-space-1)}.ui-mb-2{margin-block-end:var(--ui-space-2)}.ui-mb-3{margin-block-end:var(--ui-space-3)}.ui-mb-4{margin-block-end:var(--ui-space-4)}.ui-mb-6{margin-block-end:var(--ui-space-6)}.ui-mb-8{margin-block-end:var(--ui-space-8)}.ui-ms-0{margin-inline-start:0}.ui-ms-1{margin-inline-start:var(--ui-space-1)}.ui-ms-2{margin-inline-start:var(--ui-space-2)}.ui-ms-3{margin-inline-start:var(--ui-space-3)}.ui-ms-4{margin-inline-start:var(--ui-space-4)}.ui-ms-6{margin-inline-start:var(--ui-space-6)}.ui-ms-8{margin-inline-start:var(--ui-space-8)}.ui-mx-0{margin-inline:0}.ui-mx-1{margin-inline:var(--ui-space-1)}.ui-mx-2{margin-inline:var(--ui-space-2)}.ui-mx-3{margin-inline:var(--ui-space-3)}.ui-mx-4{margin-inline:var(--ui-space-4)}.ui-mx-auto{margin-inline:auto}.ui-my-0{margin-block:0}.ui-my-1{margin-block:var(--ui-space-1)}.ui-my-2{margin-block:var(--ui-space-2)}.ui-my-3{margin-block:var(--ui-space-3)}.ui-my-4{margin-block:var(--ui-space-4)}.ui-p-0{padding:0}.ui-p-1{padding:var(--ui-space-1)}.ui-p-2{padding:var(--ui-space-2)}.ui-p-3{padding:var(--ui-space-3)}.ui-p-4{padding:var(--ui-space-4)}.ui-p-6{padding:var(--ui-space-6)}.ui-p-8{padding:var(--ui-space-8)}.ui-pt-0{padding-block-start:0}.ui-pt-1{padding-block-start:var(--ui-space-1)}.ui-pt-2{padding-block-start:var(--ui-space-2)}.ui-pt-3{padding-block-start:var(--ui-space-3)}.ui-pt-4{padding-block-start:var(--ui-space-4)}.ui-pt-6{padding-block-start:var(--ui-space-6)}.ui-pt-8{padding-block-start:var(--ui-space-8)}.ui-pe-0{padding-inline-end:0}.ui-pe-1{padding-inline-end:var(--ui-space-1)}.ui-pe-2{padding-inline-end:var(--ui-space-2)}.ui-pe-3{padding-inline-end:var(--ui-space-3)}.ui-pe-4{padding-inline-end:var(--ui-space-4)}.ui-pe-6{padding-inline-end:var(--ui-space-6)}.ui-pe-8{padding-inline-end:var(--ui-space-8)}.ui-pb-0{padding-block-end:0}.ui-pb-1{padding-block-end:var(--ui-space-1)}.ui-pb-2{padding-block-end:var(--ui-space-2)}.ui-pb-3{padding-block-end:var(--ui-space-3)}.ui-pb-4{padding-block-end:var(--ui-space-4)}.ui-pb-6{padding-block-end:var(--ui-space-6)}.ui-pb-8{padding-block-end:var(--ui-space-8)}.ui-ps-0{padding-inline-start:0}.ui-ps-1{padding-inline-start:var(--ui-space-1)}.ui-ps-2{padding-inline-start:var(--ui-space-2)}.ui-ps-3{padding-inline-start:var(--ui-space-3)}.ui-ps-4{padding-inline-start:var(--ui-space-4)}.ui-ps-6{padding-inline-start:var(--ui-space-6)}.ui-ps-8{padding-inline-start:var(--ui-space-8)}.ui-px-0{padding-inline:0}.ui-px-1{padding-inline:var(--ui-space-1)}.ui-px-2{padding-inline:var(--ui-space-2)}.ui-px-3{padding-inline:var(--ui-space-3)}.ui-px-4{padding-inline:var(--ui-space-4)}.ui-py-0{padding-block:0}.ui-py-1{padding-block:var(--ui-space-1)}.ui-py-2{padding-block:var(--ui-space-2)}.ui-py-3{padding-block:var(--ui-space-3)}.ui-py-4{padding-block:var(--ui-space-4)}.ui-gap-0{gap:0}.ui-gap-1{gap:var(--ui-space-1)}.ui-gap-2{gap:var(--ui-space-2)}.ui-gap-3{gap:var(--ui-space-3)}.ui-gap-4{gap:var(--ui-space-4)}.ui-gap-6{gap:var(--ui-space-6)}.ui-gap-8{gap:var(--ui-space-8)}}
 @layer utilities{.ui-block{display:block}.ui-inline-block{display:inline-block}.ui-inline{display:inline}.ui-flex{display:flex}.ui-inline-flex{display:inline-flex}.ui-grid{display:grid}.ui-inline-grid{display:inline-grid}.ui-hidden{display:none}.ui-flex-row{flex-direction:row}.ui-flex-row-reverse{flex-direction:row-reverse}.ui-flex-col{flex-direction:column}.ui-flex-col-reverse{flex-direction:column-reverse}.ui-flex-wrap{flex-wrap:wrap}.ui-flex-nowrap{flex-wrap:nowrap}.ui-flex-wrap-reverse{flex-wrap:wrap-reverse}.ui-flex-1{flex:1 1 0%}.ui-flex-auto{flex:1 1 auto}.ui-flex-initial{flex:0 1 auto}.ui-flex-none{flex:none}.ui-grow{flex-grow:1}.ui-grow-0{flex-grow:0}.ui-shrink{flex-shrink:1}.ui-shrink-0{flex-shrink:0}.ui-justify-start{justify-content:flex-start}.ui-justify-end{justify-content:flex-end}.ui-justify-center{justify-content:center}.ui-justify-between{justify-content:space-between}.ui-justify-around{justify-content:space-around}.ui-justify-evenly{justify-content:space-evenly}.ui-items-start{align-items:flex-start}.ui-items-end{align-items:flex-end}.ui-items-center{align-items:center}.ui-items-baseline{align-items:baseline}.ui-items-stretch{align-items:stretch}.ui-self-auto{align-self:auto}.ui-self-start{align-self:flex-start}.ui-self-end{align-self:flex-end}.ui-self-center{align-self:center}.ui-self-stretch{align-self:stretch}.ui-visible{visibility:visible}.ui-invisible{visibility:hidden}.ui-sr-only{position:absolute;block-size:1px;inline-size:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border-width:0;clip-path:inset(50%)}}
-@layer utilities{.ui-text-start{text-align:start}.ui-text-center{text-align:center}.ui-text-end{text-align:end}.ui-text-justify{text-align:justify}.ui-font-normal{font-weight:var(--ui-weight-normal)}.ui-font-medium{font-weight:var(--ui-weight-medium)}.ui-font-semibold{font-weight:var(--ui-weight-semibold)}.ui-font-bold{font-weight:var(--ui-weight-bold)}.ui-text-xs{font-size:var(--ui-font-size-xs);line-height:var(--ui-leading-xs)}.ui-text-sm{font-size:var(--ui-font-size-sm);line-height:var(--ui-leading-sm)}.ui-text-md{font-size:var(--ui-font-size-md);line-height:var(--ui-leading-md)}.ui-text-lg{font-size:var(--ui-font-size-lg);line-height:var(--ui-leading-lg)}.ui-text-xl{font-size:var(--ui-font-size-xl);line-height:var(--ui-leading-xl)}.ui-text-2xl{font-size:var(--ui-font-size-2xl);line-height:var(--ui-leading-2xl)}.ui-text-3xl{font-size:var(--ui-font-size-3xl);line-height:var(--ui-leading-3xl)}.ui-text-4xl{font-size:var(--ui-font-size-4xl);line-height:var(--ui-leading-4xl)}.ui-text-lead{font-size:var(--ui-lead-size);font-weight:var(--ui-lead-weight);line-height:var(--ui-lead-line-height);letter-spacing:var(--ui-lead-tracking)}.ui-text-eyebrow{font-size:var(--ui-eyebrow-size);font-weight:var(--ui-eyebrow-weight);line-height:var(--ui-eyebrow-line-height);letter-spacing:var(--ui-eyebrow-tracking);text-transform:uppercase}.ui-text-caption{font-size:var(--ui-caption-size);font-weight:var(--ui-caption-weight);line-height:var(--ui-caption-line-height);letter-spacing:var(--ui-caption-tracking)}.ui-text-body-sm{font-size:var(--ui-body-sm-size);font-weight:var(--ui-body-sm-weight);line-height:var(--ui-body-sm-line-height);letter-spacing:var(--ui-body-sm-tracking)}.ui-font-sans{font-family:var(--ui-font-sans)}.ui-font-mono{font-family:var(--ui-font-mono)}.ui-underline{text-decoration:underline}.ui-line-through{text-decoration:line-through}.ui-no-underline{text-decoration:none}.ui-uppercase{text-transform:uppercase}.ui-lowercase{text-transform:lowercase}.ui-capitalize{text-transform:capitalize}.ui-normal-case{text-transform:none}.ui-text-primary{color:var(--ui-color-primary)}.ui-text-muted{color:var(--ui-color-text-muted)}.ui-text-success{color:var(--ui-color-success)}.ui-text-warning{color:var(--ui-color-warning)}.ui-text-danger{color:var(--ui-color-danger)}.ui-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-whitespace-normal{white-space:normal}.ui-whitespace-nowrap{white-space:nowrap}.ui-whitespace-pre{white-space:pre}.ui-whitespace-pre-wrap{white-space:pre-wrap}.ui-prose{max-inline-size:65ch}.ui-prose-sm{max-inline-size:45ch}.ui-prose-lg{max-inline-size:75ch}.ui-tracking-display{letter-spacing:var(--ui-tracking-display)}.ui-tracking-body{letter-spacing:var(--ui-tracking-body)}.ui-tracking-caps{letter-spacing:var(--ui-tracking-caps)}}
+@layer utilities{.ui-text-start{text-align:start}.ui-text-center{text-align:center}.ui-text-end{text-align:end}.ui-text-justify{text-align:justify}.ui-font-normal{font-weight:var(--ui-weight-normal)}.ui-font-medium{font-weight:var(--ui-weight-medium)}.ui-font-semibold{font-weight:var(--ui-weight-semibold)}.ui-font-bold{font-weight:var(--ui-weight-bold)}.ui-text-xs{font-size:var(--ui-font-size-xs);line-height:var(--ui-leading-xs)}.ui-text-sm{font-size:var(--ui-font-size-sm);line-height:var(--ui-leading-sm)}.ui-text-md{font-size:var(--ui-font-size-md);line-height:var(--ui-leading-md)}.ui-text-lg{font-size:var(--ui-font-size-lg);line-height:var(--ui-leading-lg)}.ui-text-xl{font-size:var(--ui-font-size-xl);line-height:var(--ui-leading-xl)}.ui-text-2xl{font-size:var(--ui-font-size-2xl);line-height:var(--ui-leading-2xl)}.ui-text-3xl{font-size:var(--ui-font-size-3xl);line-height:var(--ui-leading-3xl)}.ui-text-4xl{font-size:var(--ui-font-size-4xl);line-height:var(--ui-leading-4xl)}.ui-text-lead{font-size:var(--ui-lead-size);font-weight:var(--ui-lead-weight);line-height:var(--ui-lead-line-height);letter-spacing:var(--ui-lead-tracking)}.ui-text-eyebrow{font-size:var(--ui-eyebrow-size);font-weight:var(--ui-eyebrow-weight);line-height:var(--ui-eyebrow-line-height);letter-spacing:var(--ui-eyebrow-tracking);text-transform:uppercase}.ui-text-caption{font-size:var(--ui-caption-size);font-weight:var(--ui-caption-weight);line-height:var(--ui-caption-line-height);letter-spacing:var(--ui-caption-tracking)}.ui-text-body-sm{font-size:var(--ui-body-sm-size);font-weight:var(--ui-body-sm-weight);line-height:var(--ui-body-sm-line-height);letter-spacing:var(--ui-body-sm-tracking)}.ui-font-sans{font-family:var(--ui-font-sans)}.ui-font-mono{font-family:var(--ui-font-mono)}.ui-underline{text-decoration:underline}.ui-line-through{text-decoration:line-through}.ui-no-underline{text-decoration:none}.ui-uppercase{text-transform:uppercase}.ui-lowercase{text-transform:lowercase}.ui-capitalize{text-transform:capitalize}.ui-normal-case{text-transform:none}.ui-text-primary{color:var(--ui-color-primary)}.ui-text-muted{color:var(--ui-color-text-muted)}.ui-text-success{color:var(--ui-color-success)}.ui-text-warning{color:var(--ui-color-warning)}.ui-text-danger{color:var(--ui-color-danger)}.ui-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-whitespace-normal{white-space:normal}.ui-whitespace-nowrap{white-space:nowrap}.ui-whitespace-pre{white-space:pre}.ui-whitespace-pre-wrap{white-space:pre-wrap}.ui-text-balance{text-wrap:balance}.ui-text-pretty{text-wrap:pretty}.ui-text-nowrap{text-wrap:nowrap}.ui-truncate-2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.ui-truncate-3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.ui-truncate-4{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}.ui-prose{max-inline-size:65ch}.ui-prose-sm{max-inline-size:45ch}.ui-prose-lg{max-inline-size:75ch}.ui-tracking-display{letter-spacing:var(--ui-tracking-display)}.ui-tracking-body{letter-spacing:var(--ui-tracking-body)}.ui-tracking-caps{letter-spacing:var(--ui-tracking-caps)}}
 @layer utilities{.ui-border{border:var(--ui-border-width-sm) solid var(--ui-color-border)}.ui-border-0{border:none}.ui-rounded{border-radius:var(--ui-radius-md)}.ui-rounded-none{border-radius:0}.ui-rounded-sm{border-radius:var(--ui-radius-sm)}.ui-rounded-lg{border-radius:var(--ui-radius-lg)}.ui-rounded-full{border-radius:var(--ui-radius-full)}.ui-bg{background:var(--ui-color-bg)}.ui-bg-subtle{background:var(--ui-color-bg-subtle)}.ui-bg-muted{background:var(--ui-color-bg-muted)}.ui-bg-transparent{background:rgba(0,0,0,0)}}
 @layer utilities{.ui-visually-hidden{position:absolute;block-size:calc(0.5rem/8);inline-size:calc(0.5rem/8);padding:0;margin:calc(0.5rem/-8);overflow:hidden;white-space:nowrap;border:0;clip:rect(0 0 0 0);clip-path:inset(50%)}.ui-visually-hidden--focusable:focus-visible,.ui-visually-hidden--focusable:active{position:static;block-size:auto;inline-size:auto;margin:0;overflow:visible;white-space:normal;clip:auto;clip-path:none}}
 @view-transition{navigation:auto}
 @layer utilities{@keyframes vt-fade-in{from{opacity:0}}@keyframes vt-fade-out{to{opacity:0}}@keyframes vt-slide-in-up{from{opacity:0;transform:translateY(1.25rem)}}@keyframes vt-slide-out-up{to{opacity:0;transform:translateY(-1.25rem)}}@keyframes vt-slide-in-down{from{opacity:0;transform:translateY(-1.25rem)}}@keyframes vt-slide-out-down{to{opacity:0;transform:translateY(1.25rem)}}@keyframes vt-slide-in-start{from{opacity:0;transform:translateX(-1.25rem)}}@keyframes vt-slide-out-start{to{opacity:0;transform:translateX(-1.25rem)}}@keyframes vt-slide-in-end{from{opacity:0;transform:translateX(1.25rem)}}@keyframes vt-slide-out-end{to{opacity:0;transform:translateX(1.25rem)}}@keyframes vt-scale-in{from{opacity:0;transform:scale(0.95)}}@keyframes vt-scale-out{to{opacity:0;transform:scale(1.05)}}.ui-transition-name-sidebar{view-transition-name:sidebar}.ui-transition-name-main{view-transition-name:main}.ui-transition-name-header{view-transition-name:header}.ui-transition-name-hero{view-transition-name:hero}.ui-transition-name-card{view-transition-name:card}.ui-transition-name-modal{view-transition-name:modal}.ui-transition-name-slide-up{view-transition-name:slide-up}.ui-transition-name-slide-down{view-transition-name:slide-down}.ui-transition-name-slide-start{view-transition-name:slide-start}.ui-transition-name-slide-end{view-transition-name:slide-end}.ui-transition-name-scale{view-transition-name:scale}.ui-transition-name-fade{view-transition-name:fade}.ui-transition-name-none{view-transition-name:none}::view-transition-old(sidebar),::view-transition-new(sidebar),::view-transition-old(header),::view-transition-new(header){animation:none}::view-transition-old(root),::view-transition-new(root){animation-duration:var(--ui-duration-base);animation-timing-function:var(--ui-ease-default)}::view-transition-old(fade){animation:vt-fade-out var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(fade){animation:vt-fade-in var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-up),::view-transition-old(main){animation:vt-slide-out-up var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-up),::view-transition-new(main){animation:vt-slide-in-up var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-down){animation:vt-slide-out-down var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-down){animation:vt-slide-in-down var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-start){animation:vt-slide-out-start var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-start){animation:vt-slide-in-start var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-end){animation:vt-slide-out-end var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-end){animation:vt-slide-in-end var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(scale),::view-transition-old(modal),::view-transition-old(card){animation:vt-scale-out var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(scale),::view-transition-new(modal),::view-transition-new(card){animation:vt-scale-in var(--ui-duration-base) var(--ui-ease-out)}::view-transition-group(hero){animation-duration:var(--ui-duration-slow);animation-timing-function:var(--ui-ease-in-out)}@media(prefers-reduced-motion: reduce){::view-transition-old(*),::view-transition-new(*),::view-transition-group(*){animation-duration:0s !important}}}
+@layer utilities{.ui-snap-x{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}.ui-snap-y{overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain}.ui-snap-x-proximity{overflow-x:auto;scroll-snap-type:x proximity}.ui-snap-y-proximity{overflow-y:auto;scroll-snap-type:y proximity}.ui-snap-none{scroll-snap-type:none}.ui-snap-start{scroll-snap-align:start}.ui-snap-center{scroll-snap-align:center}.ui-snap-end{scroll-snap-align:end}.ui-snap-always{scroll-snap-stop:always}.ui-snap-p-1{scroll-padding:var(--ui-space-1)}.ui-snap-p-2{scroll-padding:var(--ui-space-2)}.ui-snap-p-4{scroll-padding:var(--ui-space-4)}}
+@layer utilities{.ui-container-inline{container-type:inline-size}.ui-container-size{container-type:size}.ui-container-normal{container-type:normal}}
 .ui-debug-grid,.ui-debug-grid-rows,.ui-debug-baseline{position:relative}
 .ui-debug-grid{--ui-debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.15)}
 .ui-debug-grid::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--ui-z-debug);block-size:100%;inline-size:100%;min-block-size:100vh;background-image:linear-gradient(to right, var(--ui-debug-color) 1px, transparent 1px),linear-gradient(to bottom, var(--ui-debug-color) 1px, transparent 1px);pointer-events:none;background-size:var(--ui-unit) var(--ui-unit);background-position:0 0}

package/package.json

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

package/src/components/content/scroll-area/index.scss

@@ -37,7 +37,7 @@
     --_max-height: var(--ui-scroll-area-max-height-xl, calc(#{t.$row} * 20));
   }
 
-  // @modifier thin scrollbar
+  // @modifier boolean thin
   .scroll-area--thin {
     // @desc Scrollbar size thin
     --_scrollbar-size: var(--ui-scroll-area-scrollbar-size-thin, calc(#{t.$unit} * 0.5));

package/src/components/content/scroll-area/scroll-area.api.json

@@ -7,7 +7,7 @@
       "values": ["sm", "lg", "xl"]
     },
     "thin": {
-      "values": ["scrollbar"]
+      "type": "boolean"
     },
     "direction": {
       "values": ["horizontal", "both"]

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

@@ -14,8 +14,15 @@
     },
     "flush": {
       "type": "boolean"
+    },
+    "responsive": {
+      "type": "boolean"
     }
   },
+  "elements": {
+    "media": {},
+    "body": {}
+  },
   "cssVars": [
     {
       "name": "--ui-card-padding",

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

@@ -9,7 +9,11 @@
       "examples": [
         {
           "items": [
-            { "tag": "div", "class": "ui-card", "text": "Default card with padding and border" }
+            {
+              "tag": "div",
+              "class": "ui-card",
+              "text": "Default card with padding and border"
+            }
           ],
           "code": "<div class=\"ui-card\">Content</div>"
         }
@@ -19,18 +23,39 @@
       "title": "Background Variants",
       "data": {
         "variants": [
-          { "mod": "", "label": "Default background" },
-          { "mod": "subtle", "label": "Subtle background" },
-          { "mod": "muted", "label": "Muted background" }
+          {
+            "mod": "",
+            "label": "Default background"
+          },
+          {
+            "mod": "subtle",
+            "label": "Subtle background"
+          },
+          {
+            "mod": "muted",
+            "label": "Muted background"
+          }
         ]
       },
       "examples": [
         {
           "layout": "column",
           "items": [
-            { "tag": "div", "class": "ui-card", "text": "Default background" },
-            { "tag": "div", "class": "ui-card ui-card--subtle", "text": "Subtle background" },
-            { "tag": "div", "class": "ui-card ui-card--muted", "text": "Muted background" }
+            {
+              "tag": "div",
+              "class": "ui-card",
+              "text": "Default background"
+            },
+            {
+              "tag": "div",
+              "class": "ui-card ui-card--subtle",
+              "text": "Subtle background"
+            },
+            {
+              "tag": "div",
+              "class": "ui-card ui-card--muted",
+              "text": "Muted background"
+            }
           ],
           "code": "{% for v in variants %}<div class=\"ui-card{% if v.mod %} ui-card--{{ v.mod }}{% endif %}\">{{ v.label }}</div>\n{% endfor %}"
         }
@@ -40,20 +65,48 @@
       "title": "Padding Variants",
       "data": {
         "sizes": [
-          { "mod": "sm", "label": "Small padding" },
-          { "mod": "", "label": "Default padding" },
-          { "mod": "lg", "label": "Large padding" },
-          { "mod": "flush", "label": "No padding (flush)" }
+          {
+            "mod": "sm",
+            "label": "Small padding"
+          },
+          {
+            "mod": "",
+            "label": "Default padding"
+          },
+          {
+            "mod": "lg",
+            "label": "Large padding"
+          },
+          {
+            "mod": "flush",
+            "label": "No padding (flush)"
+          }
         ]
       },
       "examples": [
         {
           "layout": "column",
           "items": [
-            { "tag": "div", "class": "ui-card ui-card--sm", "text": "Small padding" },
-            { "tag": "div", "class": "ui-card", "text": "Default padding" },
-            { "tag": "div", "class": "ui-card ui-card--lg", "text": "Large padding" },
-            { "tag": "div", "class": "ui-card ui-card--flush", "text": "No padding (flush)" }
+            {
+              "tag": "div",
+              "class": "ui-card ui-card--sm",
+              "text": "Small padding"
+            },
+            {
+              "tag": "div",
+              "class": "ui-card",
+              "text": "Default padding"
+            },
+            {
+              "tag": "div",
+              "class": "ui-card ui-card--lg",
+              "text": "Large padding"
+            },
+            {
+              "tag": "div",
+              "class": "ui-card ui-card--flush",
+              "text": "No padding (flush)"
+            }
           ],
           "code": "{% for s in sizes %}<div class=\"ui-card{% if s.mod %} ui-card--{{ s.mod }}{% endif %}\">{{ s.label }}</div>\n{% endfor %}"
         }
@@ -79,6 +132,51 @@
           "code": "<div class=\"ui-card ui-card--interactive\">Clickable card</div>"
         }
       ]
+    },
+    {
+      "title": "Responsive (Container Query)",
+      "description": "Switches to horizontal layout when container is wide enough. Requires a parent with container-type: inline-size (use ui-container-inline utility).",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-container-inline",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-card ui-card--responsive",
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-card__media",
+                      "style": {
+                        "background": "var(--ui-color-bg-muted)",
+                        "min-block-size": "6rem"
+                      }
+                    },
+                    {
+                      "tag": "div",
+                      "class": "ui-card__body",
+                      "children": [
+                        {
+                          "tag": "strong",
+                          "text": "Responsive Card"
+                        },
+                        {
+                          "tag": "p",
+                          "text": "Stacks vertically in narrow containers, switches to side-by-side at >= 30rem."
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-container-inline\">\n  <div class=\"ui-card ui-card--responsive\">\n    <div class=\"ui-card__media\">Image</div>\n    <div class=\"ui-card__body\">Content</div>\n  </div>\n</div>"
+        }
+      ]
     }
   ],
   "customization": [
@@ -107,7 +205,11 @@
       "default": "var(--ui-color-border)",
       "description": "Border color"
     },
-    { "token": "--ui-card-bg", "default": "var(--ui-color-bg)", "description": "Background color" },
+    {
+      "token": "--ui-card-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
     {
       "token": "--ui-card-bg-subtle",
       "default": "var(--ui-color-bg-subtle)",

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

@@ -57,6 +57,33 @@
     border-radius: var(--_radius);
   }
 
+  // @modifier boolean responsive
+  .card--responsive {
+    display: flex;
+    flex-direction: column;
+
+    // Horizontal layout when container is wide enough
+    @container (inline-size >= 30rem) {
+      flex-direction: row;
+    }
+  }
+
+  .card--responsive > .card__media {
+    // Vertical: full width
+    inline-size: 100%;
+
+    @container (inline-size >= 30rem) {
+      // Horizontal: fixed width, fill height
+      flex: 0 0 auto;
+
+      inline-size: 40%;
+    }
+  }
+
+  .card--responsive > .card__body {
+    flex: 1 1 auto;
+  }
+
   .card--interactive {
     transition:
       background-color var(--_duration-fast) var(--_ease-default),

package/src/components/feedback/skeleton/skeleton.docs.json

@@ -104,6 +104,22 @@
           "code": "<div class=\"ui-skeleton ui-skeleton--text ui-skeleton--pulse\"></div>"
         }
       ]
+    },
+    {
+      "title": "Static",
+      "description": "No animation, just a placeholder block.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-skeleton ui-skeleton--static",
+              "attrs": { "style": "width: 200px;" }
+            }
+          ],
+          "code": "<div class=\"ui-skeleton ui-skeleton--static\"></div>"
+        }
+      ]
     }
   ],
   "customization": [

package/src/components/feedback/toast/toast.docs.json

@@ -13,6 +13,11 @@
               "tag": "div",
               "class": "ui-toast",
               "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-toast__icon",
+                  "text": "i"
+                },
                 {
                   "tag": "div",
                   "class": "ui-toast__content",
@@ -231,6 +236,138 @@
             }
           ],
           "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-toast-viewport ui-toast-viewport--top-start",
+                  "attrs": { "style": "position:absolute" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-toast",
+                      "children": [
+                        {
+                          "tag": "div",
+                          "class": "ui-toast__content",
+                          "children": [
+                            { "tag": "p", "class": "ui-toast__title", "text": "Top Start" }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-toast-viewport ui-toast-viewport--top-center",
+                  "attrs": { "style": "position:absolute" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-toast",
+                      "children": [
+                        {
+                          "tag": "div",
+                          "class": "ui-toast__content",
+                          "children": [
+                            { "tag": "p", "class": "ui-toast__title", "text": "Top Center" }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-toast-viewport ui-toast-viewport--bottom-start",
+                  "attrs": { "style": "position:absolute" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-toast",
+                      "children": [
+                        {
+                          "tag": "div",
+                          "class": "ui-toast__content",
+                          "children": [
+                            { "tag": "p", "class": "ui-toast__title", "text": "Bottom Start" }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-toast-viewport ui-toast-viewport--bottom-center",
+                  "attrs": { "style": "position:absolute" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-toast",
+                      "children": [
+                        {
+                          "tag": "div",
+                          "class": "ui-toast__content",
+                          "children": [
+                            { "tag": "p", "class": "ui-toast__title", "text": "Bottom Center" }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
         }
       ]
     }

package/src/components/forms/checkbox/checkbox.docs.json

@@ -28,11 +28,6 @@
         {
           "layout": "row",
           "items": [
-            {
-              "tag": "input",
-              "class": "ui-checkbox ui-checkbox--sm",
-              "attrs": { "type": "checkbox", "checked": "" }
-            },
             {
               "tag": "input",
               "class": "ui-checkbox",
@@ -44,7 +39,7 @@
               "attrs": { "type": "checkbox", "checked": "" }
             }
           ],
-          "code": "<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--sm\" checked>\n<input type=\"checkbox\" class=\"ui-checkbox\" checked>\n<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--lg\" checked>"
+          "code": "<input type=\"checkbox\" class=\"ui-checkbox\" checked>\n<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--lg\" checked>"
         }
       ]
     },