@teseor/css 1.15.7 → 1.16.0

package/dist/index.css

@@ -1,16 +1,15 @@
 @layer reset, tokens, base, primitives, components.styles, components.tokens, utilities, themes;
-@layer tokens{:root{--ui-color-primary: oklch(55% 0.22 250);--ui-color-success: oklch(60% 0.18 145);--ui-color-warning: oklch(75% 0.18 70);--ui-color-danger: oklch(60% 0.22 25);--ui-color-neutral: oklch(50% 0.02 250);--ui-color-primary-light: color-mix(in oklch, var(--ui-color-primary) 50%, white);--ui-color-primary-dark: color-mix(in oklch, var(--ui-color-primary) 75%, black);--ui-color-primary-subtle: color-mix(in oklch, var(--ui-color-primary) 12%, white);--ui-color-primary-hover: color-mix(in oklch, var(--ui-color-primary) 85%, black);--ui-color-neutral-50: color-mix(in oklch, var(--ui-color-neutral) 3%, white);--ui-color-neutral-100: color-mix(in oklch, var(--ui-color-neutral) 6%, white);--ui-color-neutral-200: color-mix(in oklch, var(--ui-color-neutral) 12%, white);--ui-color-neutral-300: color-mix(in oklch, var(--ui-color-neutral) 25%, white);--ui-color-neutral-400: color-mix(in oklch, var(--ui-color-neutral) 50%, white);--ui-color-neutral-500: var(--ui-color-neutral);--ui-color-neutral-600: color-mix(in oklch, var(--ui-color-neutral) 85%, black);--ui-color-neutral-700: color-mix(in oklch, var(--ui-color-neutral) 70%, black);--ui-color-neutral-800: color-mix(in oklch, var(--ui-color-neutral) 50%, black);--ui-color-neutral-900: color-mix(in oklch, var(--ui-color-neutral) 35%, black)}}
+@layer tokens{:root{--ui-color-primary: oklch(55% 0.22 250);--ui-color-success: oklch(60% 0.18 145);--ui-color-warning: oklch(75% 0.18 70);--ui-color-danger: oklch(60% 0.22 25);--ui-color-neutral: oklch(50% 0.02 250);--ui-color-primary-light: color-mix(in oklch, var(--ui-color-primary) 50%, white);--ui-color-primary-dark: color-mix(in oklch, var(--ui-color-primary) 75%, black);--ui-color-primary-subtle: color-mix(in oklch, var(--ui-color-primary) 12%, white);--ui-color-primary-hover: color-mix(in oklch, var(--ui-color-primary) 85%, black);--ui-color-success-light: color-mix(in oklch, var(--ui-color-success) 50%, white);--ui-color-success-dark: color-mix(in oklch, var(--ui-color-success) 75%, black);--ui-color-success-subtle: color-mix(in oklch, var(--ui-color-success) 12%, white);--ui-color-success-hover: color-mix(in oklch, var(--ui-color-success) 85%, black);--ui-color-warning-light: color-mix(in oklch, var(--ui-color-warning) 50%, white);--ui-color-warning-dark: color-mix(in oklch, var(--ui-color-warning) 75%, black);--ui-color-warning-subtle: color-mix(in oklch, var(--ui-color-warning) 12%, white);--ui-color-warning-hover: color-mix(in oklch, var(--ui-color-warning) 85%, black);--ui-color-danger-light: color-mix(in oklch, var(--ui-color-danger) 50%, white);--ui-color-danger-dark: color-mix(in oklch, var(--ui-color-danger) 75%, black);--ui-color-danger-subtle: color-mix(in oklch, var(--ui-color-danger) 12%, white);--ui-color-danger-hover: color-mix(in oklch, var(--ui-color-danger) 85%, black);--ui-color-neutral-50: color-mix(in oklch, var(--ui-color-neutral) 3%, white);--ui-color-neutral-100: color-mix(in oklch, var(--ui-color-neutral) 6%, white);--ui-color-neutral-200: color-mix(in oklch, var(--ui-color-neutral) 12%, white);--ui-color-neutral-300: color-mix(in oklch, var(--ui-color-neutral) 25%, white);--ui-color-neutral-400: color-mix(in oklch, var(--ui-color-neutral) 50%, white);--ui-color-neutral-500: var(--ui-color-neutral);--ui-color-neutral-600: color-mix(in oklch, var(--ui-color-neutral) 85%, black);--ui-color-neutral-700: color-mix(in oklch, var(--ui-color-neutral) 70%, black);--ui-color-neutral-800: color-mix(in oklch, var(--ui-color-neutral) 50%, black);--ui-color-neutral-900: color-mix(in oklch, var(--ui-color-neutral) 35%, black)}}
 @layer tokens{:root{--ui-space-px: calc(var(--ui-unit) * 0.125);--ui-space-quarter: calc(var(--ui-unit) * 0.25);--ui-space-half: calc(var(--ui-unit) * 0.5);--ui-space-0: calc(var(--ui-unit) * 0.5);--ui-space-1: var(--ui-unit);--ui-space-2: calc(var(--ui-unit) * 2);--ui-space-3: calc(var(--ui-unit) * 3);--ui-space-4: calc(var(--ui-unit) * 4);--ui-space-6: calc(var(--ui-unit) * 6);--ui-space-8: calc(var(--ui-unit) * 8)}}
 @layer tokens{:root{--ui-font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;--ui-font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;--ui-font-size-xs: 0.75rem;--ui-font-size-sm: 0.875rem;--ui-font-size-md: 1rem;--ui-font-size-lg: 1.25rem;--ui-font-size-xl: 1.5rem;--ui-font-size-2xl: 1.75rem;--ui-font-size-3xl: 2rem;--ui-font-size-4xl: 2.5rem;--ui-leading-tight-xs: var(--ui-row-1);--ui-leading-tight-sm: var(--ui-row-1);--ui-leading-tight-md: calc(var(--ui-unit) * 3);--ui-leading-tight-lg: calc(var(--ui-unit) * 3);--ui-leading-xs: var(--ui-row-1);--ui-leading-sm: calc(var(--ui-unit) * 3);--ui-leading-md: calc(var(--ui-unit) * 3);--ui-leading-lg: var(--ui-row-2);--ui-leading-xl: var(--ui-row-2);--ui-leading-2xl: var(--ui-row-2);--ui-leading-3xl: calc(var(--ui-unit) * 5);--ui-leading-4xl: calc(var(--ui-unit) * 6);--ui-weight-normal: 400;--ui-weight-medium: 500;--ui-weight-semibold: 600;--ui-weight-bold: 700;--ui-tracking-display: -0.02em;--ui-tracking-body: 0;--ui-tracking-caps: 0.08em;--ui-heading-1-size: var(--ui-font-size-4xl);--ui-heading-1-line-height: var(--ui-leading-4xl);--ui-heading-1-weight: var(--ui-weight-bold);--ui-heading-1-tracking: var(--ui-tracking-display);--ui-heading-2-size: var(--ui-font-size-3xl);--ui-heading-2-line-height: var(--ui-leading-3xl);--ui-heading-2-weight: var(--ui-weight-bold);--ui-heading-2-tracking: -0.01em;--ui-heading-3-size: var(--ui-font-size-2xl);--ui-heading-3-line-height: var(--ui-leading-2xl);--ui-heading-3-weight: var(--ui-weight-semibold);--ui-heading-3-tracking: var(--ui-tracking-body);--ui-heading-4-size: var(--ui-font-size-xl);--ui-heading-4-line-height: var(--ui-leading-xl);--ui-heading-4-weight: var(--ui-weight-semibold);--ui-heading-4-tracking: var(--ui-tracking-body);--ui-heading-5-size: var(--ui-font-size-lg);--ui-heading-5-line-height: var(--ui-leading-sm);--ui-heading-5-weight: var(--ui-weight-medium);--ui-heading-5-tracking: var(--ui-tracking-body);--ui-body-size: var(--ui-font-size-md);--ui-body-line-height: var(--ui-leading-md);--ui-body-weight: var(--ui-weight-normal);--ui-body-tracking: var(--ui-tracking-body);--ui-body-sm-size: var(--ui-font-size-sm);--ui-body-sm-line-height: var(--ui-leading-sm);--ui-body-sm-weight: var(--ui-weight-normal);--ui-body-sm-tracking: var(--ui-tracking-body);--ui-caption-size: var(--ui-font-size-xs);--ui-caption-line-height: var(--ui-leading-xs);--ui-caption-weight: var(--ui-weight-normal);--ui-caption-tracking: 0.01em;--ui-lead-size: var(--ui-font-size-lg);--ui-lead-line-height: var(--ui-leading-lg);--ui-lead-weight: var(--ui-weight-normal);--ui-lead-tracking: var(--ui-tracking-body);--ui-eyebrow-size: var(--ui-font-size-xs);--ui-eyebrow-line-height: var(--ui-leading-xs);--ui-eyebrow-weight: var(--ui-weight-semibold);--ui-eyebrow-tracking: var(--ui-tracking-caps)}}
 @layer tokens{:root{--ui-unit: 8px;--ui-row: calc(var(--ui-unit) * 2);--ui-row-1: var(--ui-row);--ui-row-2: calc(var(--ui-row) * 2);--ui-row-3: calc(var(--ui-row) * 3);--ui-row-4: calc(var(--ui-row) * 4);--ui-row-5: calc(var(--ui-row) * 5);--ui-row-6: calc(var(--ui-row) * 6)}}
-@layer tokens{:root{--ui-radius-sm: calc(var(--ui-unit) * 0.5);--ui-radius-md: var(--ui-unit);--ui-radius-lg: calc(var(--ui-unit) * 2);--ui-radius-full: 9999px}}
+@layer tokens{:root{--ui-radius-base: var(--ui-unit);--ui-radius-sm: calc(var(--ui-radius-base) * 0.5);--ui-radius-md: var(--ui-radius-base);--ui-radius-lg: calc(var(--ui-radius-base) * 2);--ui-radius-full: 9999px}}
 @layer tokens{:root{--ui-border-width-sm: calc(var(--ui-unit) * 0.125);--ui-border-width-md: calc(var(--ui-unit) * 0.25);--ui-border-width-lg: calc(var(--ui-unit) * 0.5)}}
-@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-shadow-sm: 0 1px 2px color-mix(in oklch, var(--ui-color-neutral) 20%, transparent);--ui-shadow-md: 0 4px 6px color-mix(in oklch, var(--ui-color-neutral) 15%, transparent);--ui-shadow-lg: 0 10px 15px color-mix(in oklch, var(--ui-color-neutral) 12%, transparent)}}
 @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{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)}}
 @layer tokens{: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}}
 @layer base{.ui-root{font-family:var(--ui-font-sans, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);font-size:var(--ui-font-size-md, 1rem);line-height:var(--ui-leading-md, calc(0.5rem * 3));color:var(--ui-color-text, hsl(220, 10%, 10%));background:var(--ui-color-bg, hsl(220, 10%, 98%))}}
@@ -22,7 +21,7 @@
 @layer primitives{.ui-column{--ui-_space-2: var(--ui-space-2);--ui-_space-1: var(--ui-space-1);--ui-_space-4: var(--ui-space-4);--ui-_space-6: var(--ui-space-6);--ui-_space-8: var(--ui-space-8);display:flex;flex-direction:column;gap:var(--ui-column-gap, var(--ui-_space-2))}.ui-column--xs{--ui-column-gap: var(--ui-_space-1)}.ui-column--sm{--ui-column-gap: var(--ui-_space-2)}.ui-column--md{--ui-column-gap: var(--ui-_space-4)}.ui-column--lg{--ui-column-gap: var(--ui-_space-6)}.ui-column--xl{--ui-column-gap: var(--ui-_space-8)}}
 @layer primitives{.ui-container{--ui-_unit: var(--ui-unit);--ui-_space-4: var(--ui-space-4);max-inline-size:var(--ui-container-width, calc(var(--ui-_unit) * 120));padding-inline:var(--ui-_space-4)}.ui-container--center{margin-inline:auto}.ui-container--sm{--ui-container-width: calc(var(--ui-_unit) * 80)}.ui-container--md{--ui-container-width: calc(var(--ui-_unit) * 100)}.ui-container--lg{--ui-container-width: calc(var(--ui-_unit) * 120)}.ui-container--xl{--ui-container-width: calc(var(--ui-_unit) * 160)}.ui-container--full{max-inline-size:none}}
 @layer primitives{.ui-content{--ui-_unit: var(--ui-unit);--ui-_padding-block: var(--ui-content-padding-block, var(--ui-space-4));--ui-_padding-inline: var(--ui-content-padding-inline, var(--ui-space-4));--ui-_gap: var(--ui-content-gap, var(--ui-space-3));display:flex;flex-direction:column;gap:var(--ui-_gap);padding-block:var(--ui-_padding-block);padding-inline:var(--ui-_padding-inline)}.ui-content--prose{max-inline-size:calc(var(--ui-_unit)*80)}.ui-content--flush{padding-block:0;padding-inline:0}}
-@layer primitives{.ui-footer{--ui-_space-2: var(--ui-space-2);--ui-_border-width-sm: var(--ui-border-width-sm);--ui-_hue-primary: var(--ui-hue-primary, 220);--ui-_height: var(--ui-footer-height, var(--ui-row-3));--ui-_bg: var(--ui-footer-bg, var(--ui-color-bg));--ui-_padding-inline: var(--ui-footer-padding-inline, var(--ui-space-3));--ui-_border-color: var(--ui-footer-border-color, var(--ui-color-border));--ui-_z: var(--ui-footer-z, var(--ui-z-sticky));display:flex;align-items:center;z-index:var(--ui-_z);block-size:var(--ui-_height);padding-inline:var(--ui-_padding-inline);background:var(--ui-_bg)}.ui-footer__start{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-_space-2)}.ui-footer__center{display:flex;flex:1;align-items:center;justify-content:center;gap:var(--ui-_space-2)}.ui-footer__end{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-_space-2)}.ui-footer--sticky{position:sticky;inset-block-end:0}.ui-footer--fixed{position:fixed;inset-block-end:0;inset-inline:0}.ui-footer--bordered{box-shadow:inset 0 var(--ui-_border-width-sm) 0 0 var(--ui-_border-color)}.ui-footer--raised{box-shadow:0 calc(var(--ui-_border-width-sm)*-1) 6px hsl(var(--ui-_hue-primary), 10%, 20%, 0.08)}}
+@layer primitives{.ui-footer{--ui-_space-2: var(--ui-space-2);--ui-_border-width-sm: var(--ui-border-width-sm);--ui-_shadow-color: color-mix(in oklch, var(--ui-color-neutral, oklch(50% 0.02 250deg)) 8%, transparent);--ui-_height: var(--ui-footer-height, var(--ui-row-3));--ui-_bg: var(--ui-footer-bg, var(--ui-color-bg));--ui-_padding-inline: var(--ui-footer-padding-inline, var(--ui-space-3));--ui-_border-color: var(--ui-footer-border-color, var(--ui-color-border));--ui-_z: var(--ui-footer-z, var(--ui-z-sticky));display:flex;align-items:center;z-index:var(--ui-_z);block-size:var(--ui-_height);padding-inline:var(--ui-_padding-inline);background:var(--ui-_bg)}.ui-footer__start{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-_space-2)}.ui-footer__center{display:flex;flex:1;align-items:center;justify-content:center;gap:var(--ui-_space-2)}.ui-footer__end{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-_space-2)}.ui-footer--sticky{position:sticky;inset-block-end:0}.ui-footer--fixed{position:fixed;inset-block-end:0;inset-inline:0}.ui-footer--bordered{box-shadow:inset 0 var(--ui-_border-width-sm) 0 0 var(--ui-_border-color)}.ui-footer--raised{box-shadow:0 calc(var(--ui-_border-width-sm)*-1) 6px var(--ui-_shadow-color)}}
 @layer primitives{.ui-grid{--ui-_space-4: var(--ui-space-4, 2rem);display:grid;gap:var(--ui-grid-gap, var(--ui-_space-4));grid-template-columns:repeat(var(--ui-grid-cols, 1), minmax(0, 1fr))}.ui-grid--2{--ui-grid-cols: 2}.ui-grid--3{--ui-grid-cols: 3}.ui-grid--4{--ui-grid-cols: 4}.ui-grid--auto{grid-template-columns:repeat(auto-fit, minmax(var(--ui-grid-min, 16rem), 1fr))}.ui-grid--subgrid{display:grid;grid-template-columns:subgrid}.ui-grid--subgrid-rows{display:grid;grid-template-rows:subgrid}.ui-grid--subgrid-both{display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}.ui-grid-col-span-2{grid-column:span 2}.ui-grid-col-span-3{grid-column:span 3}.ui-grid-col-span-4{grid-column:span 4}.ui-grid-col-span-full{grid-column:1/-1}.ui-grid-row-span-2{grid-row:span 2}.ui-grid-row-span-3{grid-row:span 3}.ui-grid-row-span-full{grid-row:1/-1}}
 @layer primitives{.ui-main{--ui-_unit: var(--ui-unit);padding-block-start:var(--ui-topbar-height, 0);margin-inline-start:var(--ui-sidebar-width, calc(var(--ui-_unit) * 30))}.ui-main--sidebar-end{margin-inline-start:0;margin-inline-end:var(--ui-sidebar-width, calc(var(--ui-_unit) * 30))}.ui-main--full{margin-inline-start:0;margin-inline-end:0}}
 @layer primitives{.ui-nav-rail{--ui-_space-2: var(--ui-space-2);--ui-_border-width-sm: var(--ui-border-width-sm);--ui-_width: var(--ui-nav-rail-width, var(--ui-row-4));--ui-_bg: var(--ui-nav-rail-bg, var(--ui-color-bg-subtle));--ui-_border-color: var(--ui-nav-rail-border-color, var(--ui-color-border));--ui-_gap: var(--ui-nav-rail-gap, var(--ui-space-1));--ui-_z: var(--ui-nav-rail-z, var(--ui-z-sticky));display:flex;flex-direction:column;align-items:center;position:fixed;inset-block:var(--ui-topbar-height, 0);inset-inline-start:0;z-index:var(--ui-_z);inline-size:var(--ui-_width);padding-block:var(--ui-_space-2);background:var(--ui-_bg);box-shadow:inset calc(var(--ui-_border-width-sm)*-1) 0 0 0 var(--ui-_border-color)}.ui-nav-rail__items{display:flex;flex:1;flex-direction:column;align-items:center;gap:var(--ui-_gap)}.ui-nav-rail__actions{display:flex;flex-direction:column;align-items:center;gap:var(--ui-_gap);margin-block-start:auto}.ui-nav-rail--end{inset-inline-start:auto;inset-inline-end:0;box-shadow:inset var(--ui-_border-width-sm) 0 0 0 var(--ui-_border-color)}}
@@ -168,10 +167,10 @@
 @layer utilities{@supports(animation-timeline: scroll()){.ui-scroll-progress{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:var(--ui-z-toast, 700);block-size:var(--ui-scroll-progress-height, var(--ui-space-half, 0.25rem));inline-size:100%;background:var(--ui-scroll-progress-bg, var(--ui-color-primary));transform-origin:inline-start;scale:0 1;animation:scroll-progress-fill auto linear;animation-timeline:scroll()}@keyframes scroll-progress-fill{to{scale:1 1}}.ui-view-fade{animation:view-fade-in auto linear both;animation-timeline:view();animation-range:entry 0% entry 100%}@keyframes view-fade-in{from{opacity:0}to{opacity:1}}.ui-view-slide-up{animation:view-slide-up-in auto linear both;animation-timeline:view();animation-range:entry 0% entry 100%}@keyframes view-slide-up-in{from{opacity:0;transform:translateY(var(--ui-space-4, 2rem))}to{opacity:1;transform:translateY(0)}}.ui-view-slide-start{animation:view-slide-start-in auto linear both;animation-timeline:view();animation-range:entry 0% entry 100%}@keyframes view-slide-start-in{from{opacity:0;transform:translateX(calc(var(--ui-space-4, 2rem) * -1))}to{opacity:1;transform:translateX(0)}}.ui-view-scale{animation:view-scale-in auto linear both;animation-timeline:view();animation-range:entry 0% entry 100%}@keyframes view-scale-in{from{opacity:0;scale:.9}to{opacity:1;scale:1}}@media(prefers-reduced-motion: reduce){.ui-scroll-progress,.ui-view-fade,.ui-view-slide-up,.ui-view-slide-start,.ui-view-scale{opacity:1;transform:none;scale:1 1;animation:none}}}}
 @layer utilities{.ui-container-inline{container-type:inline-size}.ui-container-size{container-type:size}.ui-container-normal{container-type:normal}}
 .ui-debug-grid,.ui-debug-grid-rows,.ui-debug-baseline{position:relative}
-.ui-debug-grid{--ui-debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.15)}
+.ui-debug-grid{--ui-debug-color: color-mix(in oklch, var(--ui-color-primary, oklch(55% 0.22 250deg)) 15%, transparent)}
 .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}
-.ui-debug-grid-rows{--ui-debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.1);--ui-debug-color-strong: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.25)}
+.ui-debug-grid-rows{--ui-debug-color: color-mix(in oklch, var(--ui-color-primary, oklch(55% 0.22 250deg)) 10%, transparent);--ui-debug-color-strong: color-mix(in oklch, var(--ui-color-primary, oklch(55% 0.22 250deg)) 25%, transparent)}
 .ui-debug-grid-rows::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),linear-gradient(to bottom, var(--ui-debug-color-strong) 1px, transparent 1px);pointer-events:none;background-size:var(--ui-unit) var(--ui-unit),var(--ui-unit) var(--ui-unit),var(--ui-unit) var(--ui-row);background-position:0 0}
-.ui-debug-baseline{--ui-debug-color: hsl(var(--ui-hue-danger, 0) 80% 50% / 0.2)}
+.ui-debug-baseline{--ui-debug-color: color-mix(in oklch, var(--ui-color-danger, oklch(60% 0.22 25deg)) 20%, transparent)}
 .ui-debug-baseline::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 bottom, var(--ui-debug-color) 1px, transparent 1px);pointer-events:none;background-size:100% var(--ui-unit)}
 .ui-debug-outline *{outline:1px solid rgba(255,0,0,.5)}

package/package.json

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

package/src/components/content/divider/docs.html

@@ -18,7 +18,7 @@ description: Visual separator between content sections. Supports horizontal/vert
 <div class="ui-divider ui-divider--dashed" role="separator"></div>
 
 <!-- @vertical -->
-<div style="display: flex; height: 64px; align-items: center;">
+<div class="ui-flex ui-items-center" style="block-size: 64px">
   <span>{{ t('left', 'Left') }}</span>
   <div class="ui-divider ui-divider--vertical" role="separator"></div>
   <span>{{ t('right', 'Right') }}</span>

package/src/components/content/scroll-area/docs.html

@@ -74,12 +74,12 @@ description: Scrollable container with styled scrollbar. Provides overflow contr
 <!-- @direction | column -->
 <div class="ui-scroll-area ui-scroll-area--horizontal">
   <div class="ui-scroll-area__viewport">
-    <p style="white-space: nowrap">{{ t('scrolls_horizontally_demo', 'This content scrolls horizontally when it overflows the container width. Resize the window to test.') }}</p>
+    <p class="ui-nowrap">{{ t('scrolls_horizontally_demo', 'This content scrolls horizontally when it overflows the container width. Resize the window to test.') }}</p>
   </div>
 </div>
 <div class="ui-scroll-area ui-scroll-area--both ui-scroll-area--sm">
   <div class="ui-scroll-area__viewport">
-    <p style="white-space: nowrap">{{ t('both_directions_line_1', 'Both directions - Line 1 with long content that overflows horizontally') }}</p>
+    <p class="ui-nowrap">{{ t('both_directions_line_1', 'Both directions - Line 1 with long content that overflows horizontally') }}</p>
     <p>{{ t('line_2', 'Line 2') }}</p>
     <p>{{ t('line_3', 'Line 3') }}</p>
     <p>{{ t('line_4', 'Line 4') }}</p>

package/src/components/data-display/status/docs.html

@@ -28,7 +28,7 @@ description: Visual status indicator with colored dot to show state.
 </div>
 
 <!-- @sizes -->
-<div style="display: flex; gap: var(--ui-space-4); align-items: center;">
+<div class="ui-flex ui-gap-4 ui-items-center">
   <span class="ui-status ui-status--success ui-status--sm">
     <span class="ui-status__dot"></span>
 {{ t('small', 'Small') }}
@@ -51,7 +51,7 @@ description: Visual status indicator with colored dot to show state.
 </span>
 
 <!-- @dot_only -->
-<div style="display: flex; gap: var(--ui-space-2);">
+<div class="ui-flex ui-gap-2">
   <span class="ui-status ui-status--success">
     <span class="ui-status__dot"></span>
   </span>

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

@@ -4,14 +4,14 @@ description: Loading placeholder with shimmer animation for content loading stat
 ---
 
 <!-- @text_lines -->
-<div style="display: flex; flex-direction: column; gap: var(--ui-space-1);">
+<div class="ui-flex ui-flex-col ui-gap-1">
   <div class="ui-skeleton ui-skeleton--text"></div>
   <div class="ui-skeleton ui-skeleton--text" style="width: 80%;"></div>
   <div class="ui-skeleton ui-skeleton--text" style="width: 60%;"></div>
 </div>
 
 <!-- @shapes -->
-<div style="display: flex; gap: var(--ui-space-2); align-items: flex-start;">
+<div class="ui-flex ui-gap-2 ui-items-start">
   <div class="ui-skeleton ui-skeleton--circle"></div>
   <div style="flex: 1; display: flex; flex-direction: column; gap: var(--ui-space-1);">
     <div class="ui-skeleton ui-skeleton--heading"></div>

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

@@ -50,8 +50,8 @@ title: Toast
 
 <!-- @viewport_positions | column -->
 <!-- Container positions for toast placement -->
-<div style="position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-toast-viewport ui-toast-viewport--top-end" style="position:absolute">
+<div class="demo-container">
+  <div class="ui-toast-viewport ui-toast-viewport--top-end ui-absolute">
     <div class="ui-toast">
       <div class="ui-toast__content">
         <p class="ui-toast__title">{{ t('top_end', 'Top End') }}</p>
@@ -59,8 +59,8 @@ title: Toast
     </div>
   </div>
 </div>
-<div style="position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-toast-viewport ui-toast-viewport--bottom-end" style="position:absolute">
+<div class="demo-container">
+  <div class="ui-toast-viewport ui-toast-viewport--bottom-end ui-absolute">
     <div class="ui-toast">
       <div class="ui-toast__content">
         <p class="ui-toast__title">{{ t('bottom_end', 'Bottom End') }}</p>
@@ -68,8 +68,8 @@ title: Toast
     </div>
   </div>
 </div>
-<div style="position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-toast-viewport ui-toast-viewport--top-start" style="position:absolute">
+<div class="demo-container">
+  <div class="ui-toast-viewport ui-toast-viewport--top-start ui-absolute">
     <div class="ui-toast">
       <div class="ui-toast__content">
         <p class="ui-toast__title">{{ t('top_start', 'Top Start') }}</p>
@@ -77,8 +77,8 @@ title: Toast
     </div>
   </div>
 </div>
-<div style="position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-toast-viewport ui-toast-viewport--top-center" style="position:absolute">
+<div class="demo-container">
+  <div class="ui-toast-viewport ui-toast-viewport--top-center ui-absolute">
     <div class="ui-toast">
       <div class="ui-toast__content">
         <p class="ui-toast__title">{{ t('top_center', 'Top Center') }}</p>
@@ -86,8 +86,8 @@ title: Toast
     </div>
   </div>
 </div>
-<div style="position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-toast-viewport ui-toast-viewport--bottom-start" style="position:absolute">
+<div class="demo-container">
+  <div class="ui-toast-viewport ui-toast-viewport--bottom-start ui-absolute">
     <div class="ui-toast">
       <div class="ui-toast__content">
         <p class="ui-toast__title">{{ t('bottom_start', 'Bottom Start') }}</p>
@@ -95,8 +95,8 @@ title: Toast
     </div>
   </div>
 </div>
-<div style="position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-toast-viewport ui-toast-viewport--bottom-center" style="position:absolute">
+<div class="demo-container">
+  <div class="ui-toast-viewport ui-toast-viewport--bottom-center ui-absolute">
     <div class="ui-toast">
       <div class="ui-toast__content">
         <p class="ui-toast__title">{{ t('bottom_center', 'Bottom Center') }}</p>

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

@@ -24,7 +24,7 @@ description: Native checkbox input with custom styling. Supports checked, indete
 <input class="ui-checkbox ui-checkbox--success" type="checkbox" checked></input>
 
 <!-- @with_label -->
-<label class="ui-row" style="gap: var(--ui-space-1); cursor: pointer;">
+<label class="ui-row " style="gap: var(--ui-space-1); cursor: pointer">
   <input class="ui-checkbox" type="checkbox"></input>
   <span>{{ t('accept_terms_and_conditions', 'Accept terms and conditions') }}</span>
 </label>

package/src/components/forms/radio/docs.html

@@ -24,24 +24,24 @@ description: Native radio button with custom styling. Use for mutually exclusive
 <input class="ui-radio ui-radio--success" type="radio" name="success2" checked></input>
 
 <!-- @with_label -->
-<label class="ui-row" style="gap: var(--ui-space-1); cursor: pointer;">
+<label class="ui-row " style="gap: var(--ui-space-1); cursor: pointer">
   <input class="ui-radio" type="radio" name="labeled"></input>
   <span>{{ t('option_one', 'Option one') }}</span>
 </label>
 
 <!-- @radio_group -->
-<fieldset style="border: none; padding: 0; margin: 0;">
+<fieldset class="" style="border: none; padding: 0; margin: 0">
   <legend style="font-weight: 600; margin-block-end: var(--ui-space-1);">{{ t('choose_an_option', 'Choose an option') }}</legend>
   <div class="ui-column" style="--column-gap: var(--ui-space-1);">
-    <label class="ui-row" style="gap: var(--ui-space-1); cursor: pointer;">
+    <label class="ui-row " style="gap: var(--ui-space-1); cursor: pointer">
       <input class="ui-radio" type="radio" name="group-demo" checked></input>
       <span>{{ t('option_a', 'Option A') }}</span>
     </label>
-    <label class="ui-row" style="gap: var(--ui-space-1); cursor: pointer;">
+    <label class="ui-row " style="gap: var(--ui-space-1); cursor: pointer">
       <input class="ui-radio" type="radio" name="group-demo"></input>
       <span>{{ t('option_b', 'Option B') }}</span>
     </label>
-    <label class="ui-row" style="gap: var(--ui-space-1); cursor: pointer;">
+    <label class="ui-row " style="gap: var(--ui-space-1); cursor: pointer">
       <input class="ui-radio" type="radio" name="group-demo"></input>
       <span>{{ t('option_c', 'Option C') }}</span>
     </label>

package/src/components/forms/toggle/docs.html

@@ -18,7 +18,7 @@ description: Switch control for boolean states. Uses checkbox semantics with rol
 </label>
 
 <!-- @sizes -->
-<div style="display: flex; gap: var(--ui-space-2); align-items: center;">
+<div class="ui-flex ui-gap-2 ui-items-center">
   <label class="ui-toggle ui-toggle--sm">
     <input class="ui-toggle__input" type="checkbox" role="switch"></input>
     <span class="ui-toggle__track"></span>
@@ -37,7 +37,7 @@ description: Switch control for boolean states. Uses checkbox semantics with rol
 </div>
 
 <!-- @disabled -->
-<div style="display: flex; gap: var(--ui-space-2);">
+<div class="ui-flex ui-gap-2">
   <label class="ui-toggle">
     <input class="ui-toggle__input" type="checkbox" role="switch" disabled></input>
     <span class="ui-toggle__track"></span>
@@ -51,7 +51,7 @@ description: Switch control for boolean states. Uses checkbox semantics with rol
 </div>
 
 <!-- @with_label -->
-<div style="display: flex; align-items: center; gap: var(--ui-space-2);">
+<div class="ui-flex ui-items-center ui-gap-2">
   <label class="ui-toggle">
     <input class="ui-toggle__input" type="checkbox" role="switch" id="notifications"></input>
     <span class="ui-toggle__track"></span>

package/src/components/navigation/dropdown-menu/docs.html

@@ -81,7 +81,7 @@ description: Trigger button with floating menu panel. Reuses the menu component
 </div>
 
 <!-- @align_end -->
-<div style="display: flex; justify-content: flex-end">
+<div class="ui-flex ui-justify-end">
   <div class="ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--align-end">
     <button class="ui-dropdown-menu__trigger ui-button ui-button--ghost" type="button">⋮</button>
     <div class="ui-dropdown-menu__panel" role="menu">

package/src/components/overlays/dialog/docs.html

@@ -4,8 +4,8 @@ description: Structured modal with header, body, and footer sections. Use with m
 ---
 
 <!-- @default -->
-<div style="position: relative; height: 240px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--visible" style="position: absolute;">
+<div class="demo-area" style="--demo-h: 240px">
+  <div class="ui-modal ui-modal--visible ui-absolute">
     <div class="ui-modal__content ui-dialog" style="max-height: 200px;">
       <header class="ui-dialog__header">
         <h2 class="ui-dialog__title">{{ t('dialog_title', 'Dialog Title') }}</h2>
@@ -23,8 +23,8 @@ description: Structured modal with header, body, and footer sections. Use with m
 </div>
 
 <!-- @borderless -->
-<div style="position: relative; height: 200px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--visible" style="position: absolute;">
+<div class="demo-area">
+  <div class="ui-modal ui-modal--visible ui-absolute">
     <div class="ui-modal__content ui-dialog ui-dialog--borderless" style="max-height: 180px;">
       <header class="ui-dialog__header">
         <h2 class="ui-dialog__title">{{ t('simple_dialog', 'Simple Dialog') }}</h2>
@@ -40,8 +40,8 @@ description: Structured modal with header, body, and footer sections. Use with m
 </div>
 
 <!-- @confirmation_dialog -->
-<div style="position: relative; height: 200px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--sm ui-modal--visible" style="position: absolute;">
+<div class="demo-area">
+  <div class="ui-modal ui-modal--sm ui-modal--visible ui-absolute">
     <div class="ui-modal__content ui-dialog">
       <header class="ui-dialog__header">
         <h2 class="ui-dialog__title">{{ t('delete_item', 'Delete Item?') }}</h2>

package/src/components/overlays/drawer/docs.html

@@ -4,9 +4,9 @@ title: Drawer
 
 <!-- @default_end -->
 <!-- Slides in from the end (right in LTR) -->
-<div style="position:relative;height:300px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-drawer-overlay" style="position:absolute"></div>
-  <div class="ui-drawer ui-drawer--end" style="position:absolute" data-state="open">
+<div class="demo-container demo-container--overflow" style="--demo-h: 300px">
+  <div class="ui-drawer-overlay ui-absolute"></div>
+  <div class="ui-drawer ui-drawer--end ui-absolute" data-state="open">
     <div class="ui-drawer__header">
       <div>
         <h2 class="ui-drawer__title">{{ t('drawer_title', 'Drawer Title') }}</h2>
@@ -25,8 +25,8 @@ title: Drawer
 </div>
 
 <!-- @positions | column -->
-<div style="position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-drawer ui-drawer--start ui-drawer--sm" style="position:absolute" data-state="open">
+<div class="demo-container demo-container--overflow">
+  <div class="ui-drawer ui-drawer--start ui-drawer--sm ui-absolute" data-state="open">
     <div class="ui-drawer__header">
       <h2 class="ui-drawer__title">{{ t('start', 'Start') }}</h2>
     </div>
@@ -35,8 +35,8 @@ title: Drawer
     </div>
   </div>
 </div>
-<div style="position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-drawer ui-drawer--top" style="position:absolute" data-state="open">
+<div class="demo-container demo-container--overflow">
+  <div class="ui-drawer ui-drawer--top ui-absolute" data-state="open">
     <div class="ui-drawer__header">
       <h2 class="ui-drawer__title">{{ t('top', 'Top') }}</h2>
     </div>
@@ -45,8 +45,8 @@ title: Drawer
     </div>
   </div>
 </div>
-<div style="position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-drawer ui-drawer--bottom" style="position:absolute" data-state="open">
+<div class="demo-container demo-container--overflow">
+  <div class="ui-drawer ui-drawer--bottom ui-absolute" data-state="open">
     <div class="ui-drawer__header">
       <h2 class="ui-drawer__title">{{ t('bottom', 'Bottom') }}</h2>
     </div>
@@ -57,29 +57,29 @@ title: Drawer
 </div>
 
 <!-- @sizes | column -->
-<div style="position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-drawer ui-drawer--end ui-drawer--sm" style="position:absolute" data-state="open">
+<div class="demo-container demo-container--overflow" style="--demo-h: 150px">
+  <div class="ui-drawer ui-drawer--end ui-drawer--sm ui-absolute" data-state="open">
     <div class="ui-drawer__body">
       <p>{{ t('small_drawer', 'Small drawer') }}</p>
     </div>
   </div>
 </div>
-<div style="position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-drawer ui-drawer--end" style="position:absolute" data-state="open">
+<div class="demo-container demo-container--overflow" style="--demo-h: 150px">
+  <div class="ui-drawer ui-drawer--end ui-absolute" data-state="open">
     <div class="ui-drawer__body">
       <p>{{ t('default_drawer', 'Default drawer') }}</p>
     </div>
   </div>
 </div>
-<div style="position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-drawer ui-drawer--end ui-drawer--lg" style="position:absolute" data-state="open">
+<div class="demo-container demo-container--overflow" style="--demo-h: 150px">
+  <div class="ui-drawer ui-drawer--end ui-drawer--lg ui-absolute" data-state="open">
     <div class="ui-drawer__body">
       <p>{{ t('large_drawer', 'Large drawer') }}</p>
     </div>
   </div>
 </div>
-<div style="position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
-  <div class="ui-drawer ui-drawer--end ui-drawer--full" style="position:absolute" data-state="open">
+<div class="demo-container demo-container--overflow" style="--demo-h: 150px">
+  <div class="ui-drawer ui-drawer--end ui-drawer--full ui-absolute" data-state="open">
     <div class="ui-drawer__body">
       <p>{{ t('full_size_drawer', 'Full-size drawer') }}</p>
     </div>

package/src/components/overlays/modal/docs.html

@@ -4,8 +4,8 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 ---
 
 <!-- @default -->
-<div style="position: relative; height: 200px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--visible" style="position: absolute;">
+<div class="demo-area">
+  <div class="ui-modal ui-modal--visible ui-absolute">
     <div class="ui-modal__content">
       <p>{{ t('modal_content_goes_here', 'Modal content goes here') }}</p>
     </div>
@@ -13,8 +13,8 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 </div>
 
 <!-- @sizes -->
-<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--sm ui-modal--visible" style="position: absolute;">
+<div class="demo-area" style="--demo-h: 120px">
+  <div class="ui-modal ui-modal--sm ui-modal--visible ui-absolute">
     <div class="ui-modal__content">
       <p>{{ t('small_modal', 'Small modal') }}</p>
     </div>
@@ -22,8 +22,8 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 </div>
 
 <!-- @large -->
-<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--lg ui-modal--visible" style="position: absolute;">
+<div class="demo-area" style="--demo-h: 120px">
+  <div class="ui-modal ui-modal--lg ui-modal--visible ui-absolute">
     <div class="ui-modal__content">
       <p>{{ t('large_modal', 'Large modal') }}</p>
     </div>
@@ -31,8 +31,8 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 </div>
 
 <!-- @full -->
-<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--full ui-modal--visible" style="position: absolute;">
+<div class="demo-area" style="--demo-h: 120px">
+  <div class="ui-modal ui-modal--full ui-modal--visible ui-absolute">
     <div class="ui-modal__content">
       <p>{{ t('full_screen_modal', 'Full-screen modal') }}</p>
     </div>
@@ -41,8 +41,8 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 
 <!-- @entering_animation -->
 <!-- Apply entering modifier for open transition. -->
-<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--visible ui-modal--entering" style="position: absolute;">
+<div class="demo-area" style="--demo-h: 120px">
+  <div class="ui-modal ui-modal--visible ui-modal--entering ui-absolute">
     <div class="ui-modal__content">
       <p>{{ t('entering_modal', 'Entering modal') }}</p>
     </div>
@@ -50,8 +50,8 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 </div>
 
 <!-- @with_scrollable_content -->
-<div style="position: relative; height: 200px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-modal ui-modal--visible" style="position: absolute;">
+<div class="demo-area">
+  <div class="ui-modal ui-modal--visible ui-absolute">
     <div class="ui-modal__content" style="max-height: 150px;">
       <div class="ui-modal__body">
         <p>{{ t('line_1', 'Line 1') }}</p>

package/src/components/overlays/overlay/docs.html

@@ -4,24 +4,24 @@ description: Full viewport backdrop for modals, dialogs, and drawers. Controls v
 ---
 
 <!-- @default -->
-<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-overlay" style="position: absolute;"></div>
+<div class="demo-area" style="--demo-h: 120px">
+  <div class="ui-overlay ui-absolute"></div>
   <p style="position: relative; padding: var(--ui-space-2);">{{ t('content_behind_overlay', 'Content behind overlay') }}</p>
 </div>
 
 <!-- @light_variant -->
-<div style="position: relative; height: 120px; background: var(--ui-color-text);">
-  <div class="ui-overlay ui-overlay--light" style="position: absolute;"></div>
+<div class="demo-area" style="--demo-h: 120px; background: var(--ui-color-text)">
+  <div class="ui-overlay ui-overlay--light ui-absolute"></div>
   <p style="position: relative; padding: var(--ui-space-2); color: white;">{{ t('dark_content_behind_light_overlay', 'Dark content behind light overlay') }}</p>
 </div>
 
 <!-- @blur_variant -->
-<div style="position: relative; height: 120px; background: linear-gradient(45deg, var(--ui-color-primary), var(--ui-color-success));">
-  <div class="ui-overlay ui-overlay--blur" style="position: absolute;"></div>
+<div class="demo-area" style="--demo-h: 120px; background: linear-gradient(45deg, var(--ui-color-primary), var(--ui-color-success))">
+  <div class="ui-overlay ui-overlay--blur ui-absolute"></div>
   <p style="position: relative; padding: var(--ui-space-2); color: white;">{{ t('blurred_backdrop', 'Blurred backdrop') }}</p>
 </div>
 
 <!-- @with_animation -->
-<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
-  <div class="ui-overlay ui-overlay--animate ui-overlay--visible" style="position: absolute;"></div>
+<div class="demo-area" style="--demo-h: 120px">
+  <div class="ui-overlay ui-overlay--animate ui-overlay--visible ui-absolute"></div>
 </div>

package/src/components/overlays/popover/docs.html

@@ -4,12 +4,12 @@ description: Floating panel for additional content. Larger than tooltip, can con
 ---
 
 <!-- @default -->
-<div class="ui-popover" style="position: relative;">
+<div class="ui-popover ui-relative">
   <p>{{ t('popover_content', 'Popover content goes here. Can contain multiple paragraphs and other elements.') }}</p>
 </div>
 
 <!-- @with_header -->
-<div class="ui-popover" style="position: relative;">
+<div class="ui-popover ui-relative">
   <header class="ui-popover__header">
     <h3 class="ui-popover__title">{{ t('popover_title', 'Popover Title') }}</h3>
   </header>
@@ -18,21 +18,21 @@ description: Floating panel for additional content. Larger than tooltip, can con
 
 <!-- @positions -->
 <div style="padding: var(--ui-space-4);">
-  <div class="ui-popover ui-popover--top" style="position: relative;">
+  <div class="ui-popover ui-popover--top ui-relative">
     <p>{{ t('top_arrow_down', 'Top (arrow down)') }}</p>
   </div>
 </div>
 <div style="padding: var(--ui-space-4);">
-  <div class="ui-popover ui-popover--bottom" style="position: relative;">
+  <div class="ui-popover ui-popover--bottom ui-relative">
     <p>{{ t('bottom_arrow_up', 'Bottom (arrow up)') }}</p>
   </div>
 </div>
 
 <!-- @visibility -->
 <!-- Control popover visibility and animation. -->
-<div class="ui-popover ui-popover--visible ui-popover--animate" style="position: relative;">
+<div class="ui-popover ui-popover--visible ui-popover--animate ui-relative">
   <p>{{ t('visible_and_animated', 'Visible and animated') }}</p>
 </div>
-<div class="ui-popover ui-popover--hidden" style="position: relative;">
+<div class="ui-popover ui-popover--hidden ui-relative">
   <p>{{ t('hidden_popover', 'Hidden popover') }}</p>
 </div>

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

@@ -4,23 +4,23 @@ description: Small informational popup for additional context. Position via JS.
 ---
 
 <!-- @positions -->
-<div style="display: flex; gap: var(--ui-space-4); padding: var(--ui-space-4); flex-wrap: wrap;">
-  <div style="position: relative;">
-    <span class="ui-tooltip ui-tooltip--top" style="position: relative;">{{ t('top', 'Top') }}</span>
+<div class="ui-flex ui-gap-4 ui-p-4 ui-flex-wrap">
+  <div class="ui-relative">
+    <span class="ui-tooltip ui-tooltip--top ui-relative">{{ t('top', 'Top') }}</span>
   </div>
-  <div style="position: relative;">
-    <span class="ui-tooltip ui-tooltip--bottom" style="position: relative;">{{ t('bottom', 'Bottom') }}</span>
+  <div class="ui-relative">
+    <span class="ui-tooltip ui-tooltip--bottom ui-relative">{{ t('bottom', 'Bottom') }}</span>
   </div>
-  <div style="position: relative;">
-    <span class="ui-tooltip ui-tooltip--start" style="position: relative;">{{ t('start', 'Start') }}</span>
+  <div class="ui-relative">
+    <span class="ui-tooltip ui-tooltip--start ui-relative">{{ t('start', 'Start') }}</span>
   </div>
-  <div style="position: relative;">
-    <span class="ui-tooltip ui-tooltip--end" style="position: relative;">{{ t('end', 'End') }}</span>
+  <div class="ui-relative">
+    <span class="ui-tooltip ui-tooltip--end ui-relative">{{ t('end', 'End') }}</span>
   </div>
 </div>
 
 <!-- @with_animation -->
-<span class="ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible" style="position: relative;">{{ t('animated_tooltip', 'Animated tooltip') }}</span>
+<span class="ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible ui-relative">{{ t('animated_tooltip', 'Animated tooltip') }}</span>
 
 <!-- @anchor_positioned -->
 <!-- Browser-native positioning via CSS Anchor Positioning. No JS needed for placement. Wrapped in @supports — falls back to manual positioning in unsupported browsers. -->

package/src/config/guides/getting-started.docs.html

@@ -40,6 +40,6 @@ import '@teseor/css/dist/index.css';
 
 <!-- @customize -->
 <!-- Override design tokens with CSS custom properties. No build step required. -->
-<div class="theme-demo" style="--ui-hue-primary: 270">
+<div class="demo-theme" style="--ui-color-primary: oklch(55% 0.22 290)">
   <button class="ui-button">{{ t('purple_brand', 'Purple brand') }}</button>
 </div>