@teseor/css 1.11.0 → 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}}@media(prefers-contrast: more){:root{--ui-color-border: var(--ui-color-neutral-400);--ui-color-border-strong: var(--ui-color-neutral-600);--ui-color-text-muted: var(--ui-color-neutral-600);--ui-color-bg-subtle: var(--ui-color-neutral-200)}[data-theme=dark]{--ui-color-border: var(--ui-color-neutral-400);--ui-color-border-strong: var(--ui-color-neutral-300);--ui-color-text-muted: var(--ui-color-neutral-300);--ui-color-bg-subtle: 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{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%)))}}
@@ -163,6 +163,7 @@
 @view-transition{navigation:auto}
 @layer utilities{@keyframes vt-fade-in{from{opacity:0}}@keyframes vt-fade-out{to{opacity:0}}@keyframes vt-slide-in-up{from{opacity:0;transform:translateY(1.25rem)}}@keyframes vt-slide-out-up{to{opacity:0;transform:translateY(-1.25rem)}}@keyframes vt-slide-in-down{from{opacity:0;transform:translateY(-1.25rem)}}@keyframes vt-slide-out-down{to{opacity:0;transform:translateY(1.25rem)}}@keyframes vt-slide-in-start{from{opacity:0;transform:translateX(-1.25rem)}}@keyframes vt-slide-out-start{to{opacity:0;transform:translateX(-1.25rem)}}@keyframes vt-slide-in-end{from{opacity:0;transform:translateX(1.25rem)}}@keyframes vt-slide-out-end{to{opacity:0;transform:translateX(1.25rem)}}@keyframes vt-scale-in{from{opacity:0;transform:scale(0.95)}}@keyframes vt-scale-out{to{opacity:0;transform:scale(1.05)}}.ui-transition-name-sidebar{view-transition-name:sidebar}.ui-transition-name-main{view-transition-name:main}.ui-transition-name-header{view-transition-name:header}.ui-transition-name-hero{view-transition-name:hero}.ui-transition-name-card{view-transition-name:card}.ui-transition-name-modal{view-transition-name:modal}.ui-transition-name-slide-up{view-transition-name:slide-up}.ui-transition-name-slide-down{view-transition-name:slide-down}.ui-transition-name-slide-start{view-transition-name:slide-start}.ui-transition-name-slide-end{view-transition-name:slide-end}.ui-transition-name-scale{view-transition-name:scale}.ui-transition-name-fade{view-transition-name:fade}.ui-transition-name-none{view-transition-name:none}::view-transition-old(sidebar),::view-transition-new(sidebar),::view-transition-old(header),::view-transition-new(header){animation:none}::view-transition-old(root),::view-transition-new(root){animation-duration:var(--ui-duration-base);animation-timing-function:var(--ui-ease-default)}::view-transition-old(fade){animation:vt-fade-out var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(fade){animation:vt-fade-in var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-up),::view-transition-old(main){animation:vt-slide-out-up var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-up),::view-transition-new(main){animation:vt-slide-in-up var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-down){animation:vt-slide-out-down var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-down){animation:vt-slide-in-down var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-start){animation:vt-slide-out-start var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-start){animation:vt-slide-in-start var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-end){animation:vt-slide-out-end var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-end){animation:vt-slide-in-end var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(scale),::view-transition-old(modal),::view-transition-old(card){animation:vt-scale-out var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(scale),::view-transition-new(modal),::view-transition-new(card){animation:vt-scale-in var(--ui-duration-base) var(--ui-ease-out)}::view-transition-group(hero){animation-duration:var(--ui-duration-slow);animation-timing-function:var(--ui-ease-in-out)}@media(prefers-reduced-motion: reduce){::view-transition-old(*),::view-transition-new(*),::view-transition-group(*){animation-duration:0s !important}}}
 @layer utilities{.ui-snap-x{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}.ui-snap-y{overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain}.ui-snap-x-proximity{overflow-x:auto;scroll-snap-type:x proximity}.ui-snap-y-proximity{overflow-y:auto;scroll-snap-type:y proximity}.ui-snap-none{scroll-snap-type:none}.ui-snap-start{scroll-snap-align:start}.ui-snap-center{scroll-snap-align:center}.ui-snap-end{scroll-snap-align:end}.ui-snap-always{scroll-snap-stop:always}.ui-snap-p-1{scroll-padding:var(--ui-space-1)}.ui-snap-p-2{scroll-padding:var(--ui-space-2)}.ui-snap-p-4{scroll-padding:var(--ui-space-4)}}
+@layer utilities{.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.11.0",
+  "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>"
         }
       ]
     },

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

@@ -5,6 +5,9 @@
   "modifiers": {
     "horizontal": {
       "type": "boolean"
+    },
+    "responsive": {
+      "type": "boolean"
     }
   },
   "elements": {