@teseor/css 1.15.7 → 1.16.0

package/src/config/guides/theming.docs.html

@@ -6,23 +6,23 @@ weight: 2
 ---
 
 <!-- @brand_colors -->
-<!-- Change the entire color palette by adjusting hue values -->
-<div class="theme-demo">
+<!-- Override --ui-color-primary to change the entire color palette. All shades (light, dark, subtle, hover) derive automatically via color-mix(). -->
+<div class="demo-theme">
   <button class="ui-button">{{ t('primary', 'Primary') }}</button>
   <button class="ui-button ui-button--secondary">{{ t('secondary', 'Secondary') }}</button>
   <button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
 </div>
-<div class="theme-demo theme-purple">
+<div class="demo-theme demo-theme--purple">
   <button class="ui-button">{{ t('primary', 'Primary') }}</button>
   <button class="ui-button ui-button--secondary">{{ t('secondary', 'Secondary') }}</button>
   <button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
 </div>
-<div class="theme-demo theme-teal">
+<div class="demo-theme demo-theme--teal">
   <button class="ui-button">{{ t('primary', 'Primary') }}</button>
   <button class="ui-button ui-button--secondary">{{ t('secondary', 'Secondary') }}</button>
   <button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
 </div>
-<div class="theme-demo theme-orange">
+<div class="demo-theme demo-theme--orange">
   <button class="ui-button">{{ t('primary', 'Primary') }}</button>
   <button class="ui-button ui-button--secondary">{{ t('secondary', 'Secondary') }}</button>
   <button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
@@ -30,17 +30,17 @@ weight: 2
 
 <!-- @dark_mode -->
 <!-- Dark mode uses the CSS light-dark() function. Tokens resolve automatically based on color-scheme. Override with data-theme attribute. -->
-<div class="theme-demo">
+<div class="demo-theme">
   <div class="ui-card">
     <p>{{ t('follows_os_color_scheme', 'Follows OS color scheme') }}</p>
   </div>
 </div>
-<div class="theme-demo" data-theme="light">
+<div class="demo-theme" data-theme="light">
   <div class="ui-card">
     <p>{{ t('always_light', 'Always light') }}</p>
   </div>
 </div>
-<div class="theme-demo" data-theme="dark">
+<div class="demo-theme" data-theme="dark">
   <div class="ui-card">
     <p>{{ t('always_dark', 'Always dark') }}</p>
   </div>
@@ -48,12 +48,12 @@ weight: 2
 
 <!-- @component_overrides -->
 <!-- Override specific component tokens -->
-<div class="theme-demo custom-buttons">
+<div class="demo-theme demo-buttons">
   <button class="ui-button ui-button--sm">{{ t('small', 'Small') }}</button>
   <button class="ui-button">{{ t('default', 'Default') }}</button>
   <button class="ui-button ui-button--lg">{{ t('large', 'Large') }}</button>
 </div>
-<div class="theme-demo custom-cards">
+<div class="demo-theme demo-cards">
   <div class="ui-card">
     <p>{{ t('card_with_custom_padding', 'Card with custom padding') }}</p>
   </div>
@@ -61,7 +61,7 @@ weight: 2
 
 <!-- @full_theme_example -->
 <!-- Complete theme customization -->
-<div class="theme-demo theme-corporate">
+<div class="demo-theme demo-theme--corporate">
   <button class="ui-button">{{ t('action', 'Action') }}</button>
   <div class="ui-card">
     <p>{{ t('corporate_theme_with_teal_accent_and_sharp_corners', 'Corporate theme with teal accent and sharp corners') }}</p>

package/src/config/tokens/_variables.scss

@@ -21,9 +21,6 @@ $row-6: $row * 6;
 // 2. Colors — OKLCH for perceptual uniformity
 // ==========================================================================
 
-// Theming hue — used in HSL fallbacks for shadows, debug overlays
-$hue-primary: 220;
-
 // Base palette
 $color-primary: oklch(55% 0.22 250);
 $color-success: oklch(60% 0.18 145);
@@ -31,6 +28,30 @@ $color-warning: oklch(75% 0.18 70);
 $color-danger: oklch(60% 0.22 25);
 $color-neutral: oklch(50% 0.02 250);
 
+// Primary shades (CSS uses color-mix)
+$color-primary-light: oklch(75% 0.15 250);
+$color-primary-dark: oklch(40% 0.18 250);
+$color-primary-subtle: oklch(95% 0.03 250);
+$color-primary-hover: oklch(48% 0.20 250);
+
+// Success shades (CSS uses color-mix)
+$color-success-light: oklch(80% 0.12 145);
+$color-success-dark: oklch(45% 0.15 145);
+$color-success-subtle: oklch(95% 0.03 145);
+$color-success-hover: oklch(52% 0.16 145);
+
+// Warning shades (CSS uses color-mix)
+$color-warning-light: oklch(88% 0.12 70);
+$color-warning-dark: oklch(58% 0.15 70);
+$color-warning-subtle: oklch(96% 0.03 70);
+$color-warning-hover: oklch(66% 0.16 70);
+
+// Danger shades (CSS uses color-mix)
+$color-danger-light: oklch(80% 0.14 25);
+$color-danger-dark: oklch(45% 0.18 25);
+$color-danger-subtle: oklch(95% 0.03 25);
+$color-danger-hover: oklch(52% 0.20 25);
+
 // Neutral scale — HSL approximation of color-mix(in oklch, ...) results.
 // CSS tokens use oklch color-mix(); these HSL values are static SCSS
 // fallbacks for when custom properties are unavailable.
@@ -45,10 +66,6 @@ $color-neutral-700: hsl(220 10% 25%);
 $color-neutral-800: hsl(220 10% 15%);
 $color-neutral-900: hsl(220 10% 10%);
 
-// Primary shades (CSS uses color-mix)
-$color-primary-light: oklch(75% 0.15 250);
-$color-primary-dark: oklch(40% 0.18 250);
-
 // ==========================================================================
 // 3. Spacing — derived from $unit
 // ==========================================================================
@@ -127,11 +144,12 @@ $font-size-relative-xs: 0.6em;
 $font-size-relative-sm: 0.75em;
 
 // ==========================================================================
-// 5. Radius — derived from $unit
+// 5. Radius — derived from $radius-base (which defaults to $unit)
 // ==========================================================================
-$radius-sm: $unit * 0.5; // 4px
-$radius-md: $unit; // 8px
-$radius-lg: $unit * 2; // 16px
+$radius-base: $unit; // 8px — theme knob
+$radius-sm: $radius-base * 0.5; // 4px
+$radius-md: $radius-base; // 8px
+$radius-lg: $radius-base * 2; // 16px
 $radius-full: 9999px;
 
 // ==========================================================================
@@ -143,7 +161,7 @@ $border-width-lg: $unit * 0.5; // 4px
 $focus-ring-offset: -$border-width-md;
 
 // ==========================================================================
-// 7. Shadows — static hue fallback
+// 7. Shadows — neutral-tinted
 // ==========================================================================
 $shadow-sm: 0 1px 2px hsl(220 10% 20% / 0.05);
 $shadow-md: 0 4px 6px hsl(220 10% 20% / 0.1);
@@ -205,17 +223,6 @@ $overlay-bg-blur: rgb(0 0 0 / 0.3);
 $overlay-bg-subtle: rgb(0 0 0 / 0.1);
 $stripe-highlight: rgb(255 255 255 / 0.15);
 
-// ==========================================================================
-// 11. Semantic spacing
-// ==========================================================================
-$spacing-xs: $space-1;
-$spacing-sm: $space-2;
-$spacing-md: $space-4;
-$spacing-lg: $space-6;
-$spacing-xl: $space-8;
-$spacing-gutter: $space-4;
-$spacing-section: $space-8;
-
 // ==========================================================================
 // 12. Component defaults
 // ==========================================================================

package/src/config/tokens/colors/index.scss

@@ -13,6 +13,24 @@
     --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);
 
+    // Success shades - auto-generated via color-mix
+    --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);
+
+    // Warning shades - auto-generated via color-mix
+    --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);
+
+    // Danger shades - auto-generated via color-mix
+    --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);
+
     // Neutral scale - auto-generated via color-mix
     --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);

package/src/config/tokens/docs.html

@@ -102,14 +102,3 @@ skipValidation: true
   --ui-color-focus: var(--ui-color-primary-light);
 }
 
-<!-- @semantic_spacing -->
-<!-- Named spacing aliases that map to the numeric spacing scale for consistent layout patterns. -->
-:root {
-  --ui-spacing-xs: var(--ui-space-1);     /* 8px */
-  --ui-spacing-sm: var(--ui-space-2);     /* 16px */
-  --ui-spacing-md: var(--ui-space-4);     /* 32px */
-  --ui-spacing-lg: var(--ui-space-6);     /* 48px */
-  --ui-spacing-xl: var(--ui-space-8);     /* 64px */
-  --ui-spacing-gutter: var(--ui-space-4); /* 32px */
-  --ui-spacing-section: var(--ui-space-8);/* 64px */
-}

package/src/config/tokens/index.scss

@@ -9,7 +9,6 @@
 @use './zindex' as *;
 @use './motion' as *;
 @use './semantic-colors' as *;
-@use './semantic-spacing' as *;
 
 // Component tokens
 @use './input' as *;

package/src/config/tokens/radius.scss

@@ -1,9 +1,10 @@
 @layer tokens {
   :root {
-    // Radius - derived from --unit (8px)
-    --ui-radius-sm: calc(var(--ui-unit) * 0.5); // 4px
-    --ui-radius-md: var(--ui-unit); // 8px
-    --ui-radius-lg: calc(var(--ui-unit) * 2); // 16px
+    // Override --ui-radius-base to control all border radii at once
+    --ui-radius-base: var(--ui-unit); // 8px — the single theme knob
+    --ui-radius-sm: calc(var(--ui-radius-base) * 0.5); // 4px
+    --ui-radius-md: var(--ui-radius-base); // 8px
+    --ui-radius-lg: calc(var(--ui-radius-base) * 2); // 16px
     --ui-radius-full: 9999px;
   }
 }

package/src/config/tokens/shadows.scss

@@ -1,7 +1,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);
+    // Shadows tinted by neutral color — changing --ui-color-neutral shifts shadow tone
+    --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);
   }
 }

package/src/debug/docs.html

@@ -6,15 +6,15 @@ skipValidation: true
 
 <!-- @grid_overlay -->
 <!-- Shows the 8px unit grid. Add the class to any container. -->
-<div class="ui-debug-grid" style="height: var(--ui-row-6); position: relative"></div>
+<div class="ui-debug-grid demo-box" style="--demo-h: var(--ui-row-6)"></div>
 
 <!-- @row_grid -->
 <!-- Shows both 8px unit lines and stronger row (16px) lines. -->
-<div class="ui-debug-grid-rows" style="height: var(--ui-row-6); position: relative"></div>
+<div class="ui-debug-grid-rows demo-box" style="--demo-h: var(--ui-row-6)"></div>
 
 <!-- @baseline -->
 <!-- Horizontal baseline grid for verifying text alignment. -->
-<div class="ui-debug-baseline" style="height: var(--ui-row-6); position: relative"></div>
+<div class="ui-debug-baseline demo-box" style="--demo-h: var(--ui-row-6)"></div>
 
 <!-- @outline -->
 <!-- Outlines all child elements to reveal layout boundaries. -->

package/src/debug/index.scss

@@ -7,8 +7,7 @@
 }
 
 .debug-grid {
-  // Fallback hue 220 (blue) when --ui-hue-primary not set
-  --debug-color: hsl(var(--ui-hue-primary, #{t.$hue-primary}) 80% 50% / 0.15);
+  --debug-color: color-mix(in oklch, var(--ui-color-primary, #{t.$color-primary}) 15%, transparent);
 }
 
 .debug-grid::after {
@@ -31,8 +30,8 @@
 
 // Stronger grid at row intervals
 .debug-grid-rows {
-  --debug-color: hsl(var(--ui-hue-primary, #{t.$hue-primary}) 80% 50% / 0.1);
-  --debug-color-strong: hsl(var(--ui-hue-primary, #{t.$hue-primary}) 80% 50% / 0.25);
+  --debug-color: color-mix(in oklch, var(--ui-color-primary, #{t.$color-primary}) 10%, transparent);
+  --debug-color-strong: color-mix(in oklch, var(--ui-color-primary, #{t.$color-primary}) 25%, transparent);
 }
 
 .debug-grid-rows::after {
@@ -56,7 +55,7 @@
 
 // Baseline grid only (horizontal lines)
 .debug-baseline {
-  --debug-color: hsl(var(--ui-hue-danger, 0) 80% 50% / 0.2);
+  --debug-color: color-mix(in oklch, var(--ui-color-danger, #{t.$color-danger}) 20%, transparent);
 }
 
 .debug-baseline::after {

package/src/layout/aspect-ratio/docs.html

@@ -5,29 +5,29 @@ description: Constrains a container to a specific aspect ratio. Media children f
 
 <!-- @presets -->
 <div class="ui-row ui-row--md">
-  <div class="ui-aspect-ratio ui-aspect-ratio--square" style="inline-size: 160px; background: var(--ui-color-bg-muted)">
+  <div class="ui-aspect-ratio ui-aspect-ratio--square demo-swatch">
     <span class="ui-p-2">{{ t('square', 'square') }}</span>
   </div>
-  <div class="ui-aspect-ratio ui-aspect-ratio--video" style="inline-size: 160px; background: var(--ui-color-bg-muted)">
+  <div class="ui-aspect-ratio ui-aspect-ratio--video demo-swatch">
     <span class="ui-p-2">{{ t('video', 'video') }}</span>
   </div>
-  <div class="ui-aspect-ratio ui-aspect-ratio--photo" style="inline-size: 160px; background: var(--ui-color-bg-muted)">
+  <div class="ui-aspect-ratio ui-aspect-ratio--photo demo-swatch">
     <span class="ui-p-2">{{ t('photo', 'photo') }}</span>
   </div>
-  <div class="ui-aspect-ratio ui-aspect-ratio--wide" style="inline-size: 160px; background: var(--ui-color-bg-muted)">
+  <div class="ui-aspect-ratio ui-aspect-ratio--wide demo-swatch">
     <span class="ui-p-2">{{ t('wide', 'wide') }}</span>
   </div>
-  <div class="ui-aspect-ratio ui-aspect-ratio--portrait" style="inline-size: 160px; background: var(--ui-color-bg-muted)">
+  <div class="ui-aspect-ratio ui-aspect-ratio--portrait demo-swatch">
     <span class="ui-p-2">{{ t('portrait', 'portrait') }}</span>
   </div>
 </div>
 
 <!-- @with_media -->
 <div class="ui-row ui-row--md">
-  <div class="ui-aspect-ratio ui-aspect-ratio--video" style="inline-size: 240px">
+  <div class="ui-aspect-ratio ui-aspect-ratio--video demo-swatch" style="--demo-w: 240px">
     <div style="inline-size: 100%; block-size: 100%; background: var(--ui-color-primary); color: var(--ui-color-on-primary); display: grid; place-items: center">{{ t('img_video', 'img (video)') }}</div>
   </div>
-  <div class="ui-aspect-ratio ui-aspect-ratio--square" style="inline-size: 240px">
+  <div class="ui-aspect-ratio ui-aspect-ratio--square demo-swatch" style="--demo-w: 240px">
     <div style="inline-size: 100%; block-size: 100%; background: var(--ui-color-primary); color: var(--ui-color-on-primary); display: grid; place-items: center">{{ t('img_square', 'img (square)') }}</div>
   </div>
 </div>

package/src/layout/center/docs.html

@@ -5,19 +5,19 @@ description: Centers content horizontally and vertically.
 
 <!-- @basic -->
 <!-- Centers children both horizontally and vertically using flexbox. -->
-<div class="ui-center" style="height: var(--ui-row-4); background: var(--ui-color-bg-muted)">
+<div class="ui-center demo-box ui-bg-muted" style="--demo-h: var(--ui-row-4)">
   <span>{{ t('centered_content', 'Centered content') }}</span>
 </div>
 
 <!-- @column_direction -->
 <!-- Stack centered children vertically. -->
-<div class="ui-center ui-center--column" style="height: var(--ui-row-6); background: var(--ui-color-bg-muted)">
+<div class="ui-center ui-center--column demo-box ui-bg-muted" style="--demo-h: var(--ui-row-6)">
   <span>{{ t('first_line', 'First line') }}</span>
   <span>{{ t('second_line', 'Second line') }}</span>
 </div>
 
 <!-- @full_page_center -->
 <!-- Center content within a full viewport area, useful for loading or empty states. -->
-<div class="ui-center" style="height: var(--ui-row-8); background: var(--ui-color-bg-muted)">
+<div class="ui-center demo-box ui-bg-muted" style="--demo-h: var(--ui-row-8)">
   <p>{{ t('no_results_found', 'No results found') }}</p>
 </div>

package/src/layout/footer/index.scss

@@ -6,7 +6,7 @@
   .footer {
     --_space-2: var(--ui-space-2);
     --_border-width-sm: var(--ui-border-width-sm);
-    --_hue-primary: var(--ui-hue-primary, #{t.$hue-primary});
+    --_shadow-color: color-mix(in oklch, var(--ui-color-neutral, #{t.$color-neutral}) 8%, transparent);
     // @desc Overall height
     --_height: var(--ui-footer-height, var(--ui-row-3));
     // @desc Background color
@@ -73,6 +73,6 @@
 
   // @modifier boolean raised
   .footer--raised {
-    box-shadow: 0 calc(var(--_border-width-sm) * -1) 6px hsl(var(--_hue-primary) 10% 20% / 0.08);
+    box-shadow: 0 calc(var(--_border-width-sm) * -1) 6px var(--_shadow-color);
   }
 }

package/src/layout/main/docs.html

@@ -5,7 +5,7 @@ description: Main content area that accounts for sidebar and topbar offsets in a
 
 <!-- @default -->
 <!-- Offsets content for a start-side sidebar and optional topbar. -->
-<div style="position: relative; height: var(--ui-row-4)">
+<div class="demo-box" style="--demo-h: var(--ui-row-4)">
   <main class="ui-main ui-bg-muted ui-p-2">
     <p>{{ t('main_content_area', 'Main content area') }}</p>
   </main>
@@ -13,7 +13,7 @@ description: Main content area that accounts for sidebar and topbar offsets in a
 
 <!-- @sidebar_end -->
 <!-- Offsets content for an end-side sidebar instead of start. -->
-<div style="position: relative; height: var(--ui-row-4)">
+<div class="demo-box" style="--demo-h: var(--ui-row-4)">
   <main class="ui-main ui-main--sidebar-end ui-bg-muted ui-p-2">
     <p>{{ t('content_with_end_sidebar', 'Content with end sidebar') }}</p>
   </main>
@@ -21,7 +21,7 @@ description: Main content area that accounts for sidebar and topbar offsets in a
 
 <!-- @full_width -->
 <!-- No sidebar offset. Use when there is no sidebar. -->
-<div style="position: relative; height: var(--ui-row-4)">
+<div class="demo-box" style="--demo-h: var(--ui-row-4)">
   <main class="ui-main ui-main--full ui-bg-muted ui-p-2">
     <p>{{ t('full_width_content', 'Full width content') }}</p>
   </main>

package/src/layout/nav-rail/docs.html

@@ -5,7 +5,7 @@ description: Narrow fixed vertical navigation rail for icon-based navigation wit
 
 <!-- @default -->
 <!-- Fixed narrow rail with icon items and bottom actions. -->
-<nav class="ui-nav-rail" style="position: relative; block-size: 320px">
+<nav class="ui-nav-rail demo-box" style="--demo-h: 320px">
   <div class="ui-nav-rail__items">
     <button class="ui-button ui-button--ghost ui-button--icon">{{ t('h', 'H') }}</button>
     <button class="ui-button ui-button--ghost ui-button--icon">{{ t('s', 'S') }}</button>

package/src/layout/sidebar/docs.html

@@ -10,13 +10,13 @@ description: Fixed-position sidebar for app layouts with adjustable widths and p
 </aside>
 
 <!-- @widths | column -->
-<aside class="ui-sidebar ui-sidebar--sm" style="position: relative; height: auto;">
+<aside class="ui-sidebar ui-sidebar--sm ui-relative">
   <p>{{ t('small_192px', 'Small (192px)') }}</p>
 </aside>
-<aside class="ui-sidebar ui-sidebar--md" style="position: relative; height: auto;">
+<aside class="ui-sidebar ui-sidebar--md ui-relative">
   <p>{{ t('medium_240px_default', 'Medium (240px, default)') }}</p>
 </aside>
-<aside class="ui-sidebar ui-sidebar--lg" style="position: relative; height: auto;">
+<aside class="ui-sidebar ui-sidebar--lg ui-relative">
   <p>{{ t('large_320px', 'Large (320px)') }}</p>
 </aside>
 

package/src/layout/sidebar-nav/docs.html

@@ -5,7 +5,7 @@ description: Navigation component for sidebars with support for groups, nested i
 
 <!-- @basic -->
 <!-- Simple navigation with grouped items. -->
-<nav class="ui-sidebar-nav" aria-label="{{ t('main_navigation', 'Main navigation') }}" style="block-size: 400px;">
+<nav class="ui-sidebar-nav" aria-label="{{ t('main_navigation', 'Main navigation') }}" class="demo-box" style="--demo-h: 400px">
   <div class="ui-sidebar-nav__header">
     <strong>{{ t('app_name', 'App Name') }}</strong>
   </div>
@@ -55,7 +55,7 @@ description: Navigation component for sidebars with support for groups, nested i
 
 <!-- @with_icons -->
 <!-- Navigation items with icons for visual clarity. -->
-<nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" style="block-size: 300px;">
+<nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" class="demo-box" style="--demo-h: 300px">
   <div class="ui-sidebar-nav__content">
     <ul class="ui-sidebar-nav__group-items">
       <li>
@@ -96,7 +96,7 @@ description: Navigation component for sidebars with support for groups, nested i
 
 <!-- @with_badges -->
 <!-- Navigation items with badges for counts or status indicators. -->
-<nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" style="block-size: 200px;">
+<nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" class="demo-box" style="--demo-h: 200px">
   <div class="ui-sidebar-nav__content">
     <ul class="ui-sidebar-nav__group-items">
       <li>
@@ -129,7 +129,7 @@ description: Navigation component for sidebars with support for groups, nested i
 
 <!-- @nested_items -->
 <!-- Navigation with nested/indented items for sub-sections. -->
-<nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" style="block-size: 280px;">
+<nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" class="demo-box" style="--demo-h: 280px">
   <div class="ui-sidebar-nav__content">
     <div class="ui-sidebar-nav__group">
       <span class="ui-sidebar-nav__group-label">{{ t('components', 'Components') }}</span>
@@ -169,7 +169,7 @@ description: Navigation component for sidebars with support for groups, nested i
 
 <!-- @collapsed -->
 <!-- Icon-only mode for compact sidebars. -->
-<nav class="ui-sidebar-nav ui-sidebar-nav--collapsed" aria-label="{{ t('navigation', 'Navigation') }}" style="block-size: 200px;">
+<nav class="ui-sidebar-nav ui-sidebar-nav--collapsed" aria-label="{{ t('navigation', 'Navigation') }}" class="demo-box" style="--demo-h: 200px">
   <div class="ui-sidebar-nav__content">
     <ul class="ui-sidebar-nav__group-items">
       <li>
@@ -209,7 +209,7 @@ description: Navigation component for sidebars with support for groups, nested i
 
 <!-- @disabled_items -->
 <!-- Non-interactive navigation items. -->
-<nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" style="block-size: 180px;">
+<nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" class="demo-box" style="--demo-h: 180px">
   <div class="ui-sidebar-nav__content">
     <ul class="ui-sidebar-nav__group-items">
       <li>

package/src/utilities/position/api.json

@@ -0,0 +1,6 @@
+{
+  "name": "position",
+  "type": "utility",
+  "utilities": ["relative", "absolute", "overflow-hidden", "inset-0"],
+  "cssVars": []
+}

package/src/utilities/position/docs.html

@@ -0,0 +1,29 @@
+---
+title: Position
+description: Position, overflow, and inset utilities for controlling element placement.
+---
+
+<!-- @position -->
+<!-- Set position type on any element. -->
+<div class="ui-relative ui-bg-muted ui-p-2" style="block-size: var(--ui-row-4)">
+  <div class="ui-absolute ui-top-0 ui-end-0 ui-bg-subtle ui-p-1">{{ t('absolute_top_end', 'Absolute top-end') }}</div>
+  <div class="ui-absolute ui-bottom-0 ui-start-0 ui-bg-subtle ui-p-1">{{ t('absolute_bottom_start', 'Absolute bottom-start') }}</div>
+</div>
+
+<!-- @inset | row -->
+<!-- Pin element to all edges or specific sides. -->
+<div class="ui-relative ui-bg-muted" style="block-size: var(--ui-row-4)">
+  <div class="ui-absolute ui-inset-0 ui-bg-subtle ui-p-2">{{ t('inset_0_fills_parent', 'inset-0 fills parent') }}</div>
+</div>
+<div class="ui-relative ui-bg-muted" style="block-size: var(--ui-row-4)">
+  <div class="ui-absolute ui-inset-block-0 ui-start-0 ui-bg-subtle ui-p-2">{{ t('inset_block_0_start_0', 'inset-block-0 + start-0') }}</div>
+</div>
+
+<!-- @overflow | row -->
+<!-- Control overflow behavior. -->
+<div class="ui-overflow-hidden ui-bg-muted ui-p-2" style="block-size: var(--ui-row-3)">
+  <p>{{ t('overflow_hidden_long_content', 'This content is clipped when it overflows the container boundary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.') }}</p>
+</div>
+<div class="ui-overflow-auto ui-bg-muted ui-p-2" style="block-size: var(--ui-row-3)">
+  <p>{{ t('overflow_auto_long_content', 'This content gets a scrollbar when it overflows. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.') }}</p>
+</div>

package/src/utilities/position/position.scss

@@ -0,0 +1,74 @@
+// Position, overflow, and inset utilities
+
+@layer utilities {
+  // Position
+  .relative {
+    position: relative;
+  }
+
+  .absolute {
+    position: absolute;
+  }
+
+  .fixed {
+    position: fixed;
+  }
+
+  .sticky {
+    position: sticky;
+  }
+
+  .static {
+    position: static;
+  }
+
+  // Inset (logical properties)
+  .inset-0 {
+    inset: 0;
+  }
+
+  .inset-block-0 {
+    inset-block: 0;
+  }
+
+  .inset-inline-0 {
+    inset-inline: 0;
+  }
+
+  .top-0 {
+    inset-block-start: 0;
+  }
+
+  .bottom-0 {
+    inset-block-end: 0;
+  }
+
+  .start-0 {
+    inset-inline-start: 0;
+  }
+
+  .end-0 {
+    inset-inline-end: 0;
+  }
+
+  // Overflow
+  .overflow-hidden {
+    overflow: hidden;
+  }
+
+  .overflow-auto {
+    overflow: auto;
+  }
+
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  .overflow-visible {
+    overflow: visible;
+  }
+}

package/src/utilities/scroll-animation/docs.html

@@ -6,7 +6,7 @@ description: Scroll-driven animation utilities for progress indicators and viewp
 <!-- @scroll_progress_indicator -->
 <!-- Fixed bar at the top of the viewport that fills as the user scrolls down. -->
 <div style="position: relative; block-size: 12rem; overflow-y: auto;">
-  <div class="ui-scroll-progress" style="position: absolute;"></div>
+  <div class="ui-scroll-progress ui-absolute"></div>
   <div style="block-size: 40rem; padding: var(--ui-space-2);">
     <p>{{ t('scroll_down_to_see_the_progress_bar_fill', 'Scroll down to see the progress bar fill.') }}</p>
   </div>