@teseor/css 1.15.7 → 2.0.0

package/src/config/tokens/typography.scss

@@ -23,35 +23,35 @@
     // ==========================================================================
 
     // Tight line-heights for compact UI elements
-    --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-line-height-tight-xs: var(--ui-row-1);
+    --ui-line-height-tight-sm: var(--ui-row-1);
+    --ui-line-height-tight-md: calc(var(--ui-unit) * 3);
+    --ui-line-height-tight-lg: calc(var(--ui-unit) * 3);
 
     // Normal line-heights for readable body text
-    --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-line-height-xs: var(--ui-row-1);
+    --ui-line-height-sm: calc(var(--ui-unit) * 3);
+    --ui-line-height-md: calc(var(--ui-unit) * 3);
+    --ui-line-height-lg: var(--ui-row-2);
+    --ui-line-height-xl: var(--ui-row-2);
+    --ui-line-height-2xl: var(--ui-row-2);
+    --ui-line-height-3xl: calc(var(--ui-unit) * 5);
+    --ui-line-height-4xl: calc(var(--ui-unit) * 6);
 
     // ==========================================================================
     // PRIMITIVE TOKENS - Font Weights
     // ==========================================================================
-    --ui-weight-normal: 400;
-    --ui-weight-medium: 500;
-    --ui-weight-semibold: 600;
-    --ui-weight-bold: 700;
+    --ui-font-weight-normal: 400;
+    --ui-font-weight-medium: 500;
+    --ui-font-weight-semibold: 600;
+    --ui-font-weight-bold: 700;
 
     // ==========================================================================
     // PRIMITIVE TOKENS - Letter Spacing
     // ==========================================================================
-    --ui-tracking-display: -0.02em;
-    --ui-tracking-body: 0;
-    --ui-tracking-caps: 0.08em;
+    --ui-letter-spacing-display: -0.02em;
+    --ui-letter-spacing-body: 0;
+    --ui-letter-spacing-caps: 0.08em;
 
     // ==========================================================================
     // SEMANTIC TOKENS - Text Roles
@@ -59,62 +59,62 @@
 
     // Heading 1
     --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-1-line-height: var(--ui-line-height-4xl);
+    --ui-heading-1-weight: var(--ui-font-weight-bold);
+    --ui-heading-1-tracking: var(--ui-letter-spacing-display);
 
     // Heading 2
     --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-line-height: var(--ui-line-height-3xl);
+    --ui-heading-2-weight: var(--ui-font-weight-bold);
     --ui-heading-2-tracking: -0.01em;
 
     // Heading 3
     --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-3-line-height: var(--ui-line-height-2xl);
+    --ui-heading-3-weight: var(--ui-font-weight-semibold);
+    --ui-heading-3-tracking: var(--ui-letter-spacing-body);
 
     // Heading 4
     --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-4-line-height: var(--ui-line-height-xl);
+    --ui-heading-4-weight: var(--ui-font-weight-semibold);
+    --ui-heading-4-tracking: var(--ui-letter-spacing-body);
 
     // Heading 5
     --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-heading-5-line-height: var(--ui-line-height-sm);
+    --ui-heading-5-weight: var(--ui-font-weight-medium);
+    --ui-heading-5-tracking: var(--ui-letter-spacing-body);
 
     // 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-line-height: var(--ui-line-height-md);
+    --ui-body-weight: var(--ui-font-weight-normal);
+    --ui-body-tracking: var(--ui-letter-spacing-body);
 
     // Body Small
     --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-body-sm-line-height: var(--ui-line-height-sm);
+    --ui-body-sm-weight: var(--ui-font-weight-normal);
+    --ui-body-sm-tracking: var(--ui-letter-spacing-body);
 
     // Caption
     --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-line-height: var(--ui-line-height-xs);
+    --ui-caption-weight: var(--ui-font-weight-normal);
     --ui-caption-tracking: 0.01em;
 
     // Lead
     --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-lead-line-height: var(--ui-line-height-lg);
+    --ui-lead-weight: var(--ui-font-weight-normal);
+    --ui-lead-tracking: var(--ui-letter-spacing-body);
 
     // Eyebrow
     --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);
+    --ui-eyebrow-line-height: var(--ui-line-height-xs);
+    --ui-eyebrow-weight: var(--ui-font-weight-semibold);
+    --ui-eyebrow-tracking: var(--ui-letter-spacing-caps);
   }
 }

package/src/config/tokens/zindex.scss

@@ -1,15 +1,15 @@
 @layer tokens {
   :root {
     // Z-index scale (gaps allow insertion)
-    --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;
+    --ui-z-index-base: 0;
+    --ui-z-index-sticky: 100;
+    --ui-z-index-dropdown: 200;
+    --ui-z-index-overlay: 300;
+    --ui-z-index-modal: 400;
+    --ui-z-index-popover: 500;
+    --ui-z-index-tooltip: 600;
+    --ui-z-index-toast: 700;
+    --ui-z-index-drawer: 800;
+    --ui-z-index-debug: 9999;
   }
 }

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 {
@@ -16,7 +15,7 @@
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
-  z-index: var(--ui-z-debug);
+  z-index: var(--ui-z-index-debug);
 
   block-size: 100%;
   inline-size: 100%;
@@ -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 {
@@ -40,7 +39,7 @@
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
-  z-index: var(--ui-z-debug);
+  z-index: var(--ui-z-index-debug);
 
   block-size: 100%;
   inline-size: 100%;
@@ -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 {
@@ -64,7 +63,7 @@
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
-  z-index: var(--ui-z-debug);
+  z-index: var(--ui-z-index-debug);
 
   block-size: 100%;
   inline-size: 100%;

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/api.json

@@ -44,7 +44,7 @@
     },
     {
       "name": "--ui-footer-z",
-      "default": "var(--ui-z-sticky)",
+      "default": "var(--ui-z-index-sticky)",
       "description": "Z-index stacking order"
     }
   ]

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
@@ -16,7 +16,7 @@
     // @desc Border color
     --_border-color: var(--ui-footer-border-color, var(--ui-color-border));
     // @desc Z-index stacking order
-    --_z: var(--ui-footer-z, var(--ui-z-sticky));
+    --_z: var(--ui-footer-z, var(--ui-z-index-sticky));
 
     display: flex;
     align-items: center;
@@ -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/api.json

@@ -34,7 +34,7 @@
     },
     {
       "name": "--ui-nav-rail-z",
-      "default": "var(--ui-z-sticky)",
+      "default": "var(--ui-z-index-sticky)",
       "description": "Z-index stacking order"
     }
   ]

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/nav-rail/index.scss

@@ -14,7 +14,7 @@
     // @desc Gap between children
     --_gap: var(--ui-nav-rail-gap, var(--ui-space-1));
     // @desc Z-index stacking order
-    --_z: var(--ui-nav-rail-z, var(--ui-z-sticky));
+    --_z: var(--ui-nav-rail-z, var(--ui-z-index-sticky));
 
     display: flex;
     flex-direction: column;

package/src/layout/page-header/index.scss

@@ -7,7 +7,7 @@
     --_space-1: var(--ui-space-1);
     --_space-2: var(--ui-space-2);
     --_border-width-sm: var(--ui-border-width-sm);
-    --_z-sticky: var(--ui-z-sticky);
+    --_z-sticky: var(--ui-z-index-sticky);
     --_color-bg: var(--ui-color-bg);
     // @desc Vertical padding
     --_padding-block: var(--ui-page-header-padding-block, var(--ui-space-3));

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/index.scss

@@ -3,7 +3,7 @@
 
 @layer primitives {
   .sidebar {
-    --_z-sticky: var(--ui-z-sticky);
+    --_z-sticky: var(--ui-z-index-sticky);
     --_unit: var(--ui-unit);
     --_color-bg-subtle: var(--ui-color-bg-subtle);
     --_border-width-sm: var(--ui-border-width-sm);

package/src/layout/sidebar-nav/api.json

@@ -76,7 +76,7 @@
     },
     {
       "name": "--ui-sidebar-nav-group-label-weight",
-      "default": "var(--ui-weight-bold)",
+      "default": "var(--ui-font-weight-bold)",
       "description": "Group label weight"
     },
     {
@@ -126,7 +126,7 @@
     },
     {
       "name": "--ui-sidebar-nav-item-active-weight",
-      "default": "var(--ui-weight-medium)",
+      "default": "var(--ui-font-weight-medium)",
       "description": "Item active weight"
     },
     {

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/layout/sidebar-nav/index.scss

@@ -12,7 +12,7 @@
     --_space-1: var(--ui-space-1);
     --_space-half: var(--ui-space-half);
     --_size-xs: var(--ui-size-xs);
-    --_weight-medium: var(--ui-weight-medium);
+    --_weight-medium: var(--ui-font-weight-medium);
     --_color-text-muted: var(--ui-color-text-muted);
     --_duration-fast: var(--ui-duration-fast);
     --_easing-default: var(--ui-easing-default);
@@ -83,7 +83,7 @@
     // @desc Group label color
     --_color: var(--ui-sidebar-nav-group-label-color, var(--ui-color-text-muted));
     // @desc Group label weight
-    --_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-weight-bold));
+    --_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-font-weight-bold));
 
     display: block;
 
@@ -92,7 +92,7 @@
 
     font-size: var(--_font-size);
     font-weight: var(--_weight);
-    letter-spacing: #{t.$tracking-wide};
+    letter-spacing: #{t.$letter-spacing-wide};
     text-transform: uppercase;
     color: var(--_color);
   }
@@ -191,7 +191,7 @@
     // @desc Item active color
     --_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary-hover));
     // @desc Item active weight
-    --_weight: var(--ui-sidebar-nav-item-active-weight, var(--ui-weight-medium));
+    --_weight: var(--ui-sidebar-nav-item-active-weight, var(--ui-font-weight-medium));
   }
 
   // Nested item indent

package/src/layout/topbar/api.json

@@ -44,7 +44,7 @@
     },
     {
       "name": "--ui-topbar-z",
-      "default": "var(--ui-z-sticky)",
+      "default": "var(--ui-z-index-sticky)",
       "description": "Z-index stacking order"
     }
   ]

package/src/layout/topbar/index.scss

@@ -15,7 +15,7 @@
     // @desc Border color
     --_border-color: var(--ui-topbar-border-color, var(--ui-color-border));
     // @desc Z-index stacking order
-    --_z: var(--ui-topbar-z, var(--ui-z-sticky));
+    --_z: var(--ui-topbar-z, var(--ui-z-index-sticky));
 
     display: flex;
     align-items: center;

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>