@teseor/css 1.15.7 → 2.0.0

package/package.json

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

package/src/base/docs.html

@@ -13,7 +13,7 @@ skipValidation: true
 .ui-root {
   font-family: var(--ui-font-sans);
   font-size: var(--ui-font-size-md);
-  line-height: var(--ui-leading-md);
+  line-height: var(--ui-line-height-md);
   color: var(--ui-color-text);
   background: var(--ui-color-bg);
 }

package/src/base/root.scss

@@ -4,7 +4,7 @@
   .root {
     font-family: var(--ui-font-sans, #{t.$font-sans});
     font-size: var(--ui-font-size-md, #{t.$font-size-md});
-    line-height: var(--ui-leading-md, calc(#{t.$unit} * 3));
+    line-height: var(--ui-line-height-md, calc(#{t.$unit} * 3));
     color: var(--ui-color-text, #{t.$color-text});
 
     background: var(--ui-color-bg, #{t.$color-bg});

package/src/base/typography/typography.scss

@@ -62,7 +62,7 @@
   // Inline elements - line-height: 0 prevents affecting parent rhythm
   strong,
   b {
-    font-weight: var(--ui-weight-bold);
+    font-weight: var(--ui-font-weight-bold);
     line-height: 0;
   }
 
@@ -127,22 +127,22 @@
   @media (width < 45.625rem) {
     h1 {
       font-size: var(--ui-font-size-2xl); // 28px
-      line-height: var(--ui-leading-2xl); // 32px
+      line-height: var(--ui-line-height-2xl); // 32px
     }
 
     h2 {
       font-size: var(--ui-font-size-xl); // 24px
-      line-height: var(--ui-leading-xl); // 32px
+      line-height: var(--ui-line-height-xl); // 32px
     }
 
     h3 {
       font-size: var(--ui-font-size-lg); // 20px
-      line-height: var(--ui-leading-sm); // 24px
+      line-height: var(--ui-line-height-sm); // 24px
     }
 
     h4 {
       font-size: 1.125rem; // 18px
-      line-height: var(--ui-leading-sm); // 24px
+      line-height: var(--ui-line-height-sm); // 24px
     }
   }
 
@@ -155,7 +155,7 @@
 
     h2 {
       font-size: var(--ui-font-size-4xl); // 40px
-      line-height: var(--ui-leading-4xl); // 48px
+      line-height: var(--ui-line-height-4xl); // 48px
     }
   }
 }

package/src/components/actions/button/api.json

@@ -57,7 +57,7 @@
     },
     {
       "name": "--ui-button-font-weight",
-      "default": "var(--ui-weight-medium)",
+      "default": "var(--ui-font-weight-medium)",
       "description": "Font weight"
     },
     {

package/src/components/actions/button/index.scss

@@ -27,7 +27,7 @@
     // @desc Font size
     --_font-size: var(--ui-button-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Font weight
-    --_font-weight: var(--ui-button-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_font-weight: var(--ui-button-font-weight, var(--ui-font-weight-medium, #{t.$font-weight-medium}));
     // @desc Corner radius
     --_radius: var(--ui-button-radius, var(--ui-radius-md, #{t.$radius-md}));
     --_bg: var(--_accent);

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

@@ -6,7 +6,7 @@
 
 @layer components.tokens {
   .avatar {
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_color-bg: var(--ui-color-bg, #{t.$color-bg});
     // @desc Overall size

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

@@ -33,7 +33,7 @@
     },
     {
       "name": "--ui-badge-font-weight",
-      "default": "var(--ui-weight-medium)",
+      "default": "var(--ui-font-weight-medium)",
       "description": "Font weight"
     },
     {

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

@@ -16,7 +16,7 @@
     // @desc Font size
     --_font-size: var(--ui-badge-font-size, var(--ui-font-size-xs, #{t.$font-size-xs}));
     // @desc Font weight
-    --_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_font-weight: var(--ui-badge-font-weight, var(--ui-font-weight-medium, #{t.$font-weight-medium}));
     // @desc Corner radius
     --_radius: var(--ui-badge-radius, var(--ui-radius-full, #{t.$radius-full}));
     --_bg: var(--_accent);

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

@@ -9,7 +9,7 @@
   .data-list {
     --_row-1: var(--ui-row-1, #{t.$row});
     --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_color-border: var(--ui-color-border, #{t.$color-border});
     --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});

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

@@ -24,12 +24,12 @@
     },
     {
       "name": "--ui-stat-value-font-weight",
-      "default": "var(--ui-weight-bold)",
+      "default": "var(--ui-font-weight-bold)",
       "description": "Value display font weight"
     },
     {
       "name": "--ui-stat-value-line-height",
-      "default": "var(--ui-leading-3xl)",
+      "default": "var(--ui-line-height-3xl)",
       "description": "Value display line height"
     },
     {
@@ -49,7 +49,7 @@
     },
     {
       "name": "--ui-stat-label-line-height",
-      "default": "var(--ui-leading-sm)",
+      "default": "var(--ui-line-height-sm)",
       "description": "Label line height"
     }
   ]

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

@@ -4,7 +4,7 @@
 
 @layer components.tokens {
   .stat {
-    --_tracking-display: var(--ui-tracking-display, #{t.$tracking-display});
+    --_tracking-display: var(--ui-letter-spacing-display, #{t.$letter-spacing-display});
     // @desc Gap between children
     --_gap: var(--ui-stat-gap, var(--ui-space-1, #{t.$space-1}));
   }
@@ -13,9 +13,9 @@
     // @desc Value display font size
     --_font-size: var(--ui-stat-value-font-size, var(--ui-font-size-3xl, #{t.$font-size-3xl}));
     // @desc Value display font weight
-    --_font-weight: var(--ui-stat-value-font-weight, var(--ui-weight-bold, #{t.$weight-bold}));
+    --_font-weight: var(--ui-stat-value-font-weight, var(--ui-font-weight-bold, #{t.$font-weight-bold}));
     // @desc Value display line height
-    --_line-height: var(--ui-stat-value-line-height, var(--ui-leading-3xl, #{t.$leading-3xl}));
+    --_line-height: var(--ui-stat-value-line-height, var(--ui-line-height-3xl, #{t.$line-height-3xl}));
     // @desc Value display text color
     --_color: var(--ui-stat-value-color, var(--ui-color-text, #{t.$color-text}));
   }
@@ -26,13 +26,13 @@
     // @desc Label text color
     --_color: var(--ui-stat-label-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
     // @desc Label line height
-    --_line-height: var(--ui-stat-label-line-height, var(--ui-leading-sm, #{t.$leading-sm}));
+    --_line-height: var(--ui-stat-label-line-height, var(--ui-line-height-sm, #{t.$line-height-sm}));
   }
 
   // @modifier size
   .stat--sm .stat__value {
     --_font-size: var(--ui-font-size-xl, #{t.$font-size-xl});
-    --_line-height: var(--ui-leading-xl, #{t.$leading-xl});
+    --_line-height: var(--ui-line-height-xl, #{t.$line-height-xl});
   }
 }
 

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

@@ -7,7 +7,7 @@
   .table {
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_unit: var(--ui-unit, #{t.$unit});
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
     --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
     --_color-bg-muted: var(--ui-color-bg-muted, #{t.$color-bg-muted});
     // @desc Font size

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

@@ -6,7 +6,7 @@
 
 @layer components.tokens {
   .tag {
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
     --_opacity-loading: var(--ui-opacity-loading, #{t.$opacity-loading});
     // @desc Overall height

package/src/components/disclosure/disclosure/index.scss

@@ -7,7 +7,7 @@
 
 @layer components.tokens {
   .disclosure {
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
     --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
     --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
     --_ease-default: var(--ui-ease-default, ease);

package/src/components/feedback/alert/index.scss

@@ -5,7 +5,7 @@
 
 @layer components.tokens {
   .alert {
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
     --_row-1: var(--ui-row-1, #{t.$row});
     --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
     --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});

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

@@ -8,7 +8,7 @@
 
 @layer components.tokens {
   .toast-viewport {
-    --_z-toast: var(--ui-z-toast, #{t.$z-toast});
+    --_z-toast: var(--ui-z-index-toast, #{t.$z-index-toast});
     // @desc Viewport gap
     --_gap: var(--ui-toast-viewport-gap, calc(#{t.$unit} * 1));
     // @desc Viewport padding
@@ -19,7 +19,7 @@
 
   .toast {
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
     --_row-1: var(--ui-row-1, #{t.$row});
     --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
     --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});

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

@@ -31,7 +31,7 @@
     },
     {
       "name": "--ui-checkbox-group-legend-weight",
-      "default": "var(--ui-weight-medium)",
+      "default": "var(--ui-font-weight-medium)",
       "description": "Legend weight"
     },
     {

package/src/components/forms/checkbox-group/index.scss

@@ -5,7 +5,7 @@
 
 @layer components.tokens {
   .checkbox-group {
-    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$leading-tight-sm}));
+    --_leading-tight-sm: var(--ui-line-height-tight-sm, var(--ui-row-1, #{t.$line-height-tight-sm}));
     --_row-1: var(--ui-row-1, #{t.$row-1});
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
     --_space-2: var(--ui-space-2, #{t.$space-2});
@@ -14,7 +14,7 @@
     // @desc Legend size
     --_legend-size: var(--ui-checkbox-group-legend-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Legend weight
-    --_legend-weight: var(--ui-checkbox-group-legend-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_legend-weight: var(--ui-checkbox-group-legend-weight, var(--ui-font-weight-medium, #{t.$font-weight-medium}));
     // @desc Legend color
     --_legend-color: var(--ui-checkbox-group-legend-color, var(--ui-color-text, #{t.$color-text}));
     // @desc Legend spacing

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

@@ -46,7 +46,7 @@
     },
     {
       "name": "--ui-fieldset-legend-weight",
-      "default": "var(--ui-weight-medium)",
+      "default": "var(--ui-font-weight-medium)",
       "description": "Legend weight"
     },
     {

package/src/components/forms/fieldset/index.scss

@@ -7,7 +7,7 @@
 
 @layer components.tokens {
   .fieldset {
-    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$leading-tight-sm}));
+    --_leading-tight-sm: var(--ui-line-height-tight-sm, var(--ui-row-1, #{t.$line-height-tight-sm}));
     --_space-half: var(--ui-space-half, #{t.$space-0});
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
     // @desc Spacing
@@ -23,7 +23,7 @@
     // @desc Legend size
     --_legend-size: var(--ui-fieldset-legend-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Legend weight
-    --_legend-weight: var(--ui-fieldset-legend-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_legend-weight: var(--ui-fieldset-legend-weight, var(--ui-font-weight-medium, #{t.$font-weight-medium}));
     // @desc Legend color
     --_legend-color: var(--ui-fieldset-legend-color, var(--ui-color-text, #{t.$color-text}));
   }

package/src/components/forms/form-error/index.scss

@@ -7,7 +7,7 @@
 
 @layer components.tokens {
   .form-error {
-    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$row-1}));
+    --_leading-tight-sm: var(--ui-line-height-tight-sm, var(--ui-row-1, #{t.$row-1}));
     // @desc Text color
     --_color: var(--ui-form-error-color, var(--ui-color-danger, #{t.$color-danger}));
     // @desc Overall size

package/src/components/forms/form-helper/index.scss

@@ -7,7 +7,7 @@
 
 @layer components.tokens {
   .form-helper {
-    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$row-1}));
+    --_leading-tight-sm: var(--ui-line-height-tight-sm, var(--ui-row-1, #{t.$row-1}));
     // @desc Text color
     --_color: var(--ui-form-helper-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
     // @desc Overall size

package/src/components/forms/label/index.scss

@@ -5,10 +5,10 @@
 
 @layer components.tokens {
   .label {
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
-    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$row-1}));
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
+    --_leading-tight-sm: var(--ui-line-height-tight-sm, var(--ui-row-1, #{t.$row-1}));
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
-    --_weight-normal: var(--ui-weight-normal, #{t.$weight-normal});
+    --_weight-normal: var(--ui-font-weight-normal, #{t.$font-weight-normal});
     --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
     // @desc Font size
     --_font-size: var(--ui-label-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));

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

@@ -31,7 +31,7 @@
     },
     {
       "name": "--ui-radio-group-legend-weight",
-      "default": "var(--ui-weight-medium)",
+      "default": "var(--ui-font-weight-medium)",
       "description": "Legend weight"
     },
     {

package/src/components/forms/radio-group/index.scss

@@ -5,7 +5,7 @@
 
 @layer components.tokens {
   .radio-group {
-    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$leading-tight-sm}));
+    --_leading-tight-sm: var(--ui-line-height-tight-sm, var(--ui-row-1, #{t.$line-height-tight-sm}));
     --_row-1: var(--ui-row-1, #{t.$row-1});
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
     --_space-2: var(--ui-space-2, #{t.$space-2});
@@ -14,7 +14,7 @@
     // @desc Legend size
     --_legend-size: var(--ui-radio-group-legend-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Legend weight
-    --_legend-weight: var(--ui-radio-group-legend-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_legend-weight: var(--ui-radio-group-legend-weight, var(--ui-font-weight-medium, #{t.$font-weight-medium}));
     // @desc Legend color
     --_legend-color: var(--ui-radio-group-legend-color, var(--ui-color-text, #{t.$color-text}));
     // @desc Legend spacing

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

@@ -24,7 +24,7 @@
   "cssVars": [
     {
       "name": "--ui-dropdown-menu-z",
-      "default": "var(--ui-z-dropdown)",
+      "default": "var(--ui-z-index-dropdown)",
       "description": "Z-index stacking order"
     },
     {

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

@@ -10,7 +10,7 @@
     --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
     --_ease-default: var(--ui-ease-default, #{t.$ease-default});
     // @desc Z-index stacking order
-    --_z: var(--ui-dropdown-menu-z, #{t.$z-dropdown});
+    --_z: var(--ui-dropdown-menu-z, #{t.$z-index-dropdown});
     // @desc Panel offset from anchor
     --_panel-offset: var(--ui-dropdown-menu-panel-offset, var(--ui-space-1, #{t.$space-1}));
     // @desc Panel minimum width

package/src/components/navigation/menu/index.scss

@@ -9,7 +9,7 @@
   .menu {
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_font-size-xs: var(--ui-font-size-xs, #{t.$font-size-xs});
-    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_weight-medium: var(--ui-font-weight-medium, #{t.$font-weight-medium});
     --_row-1: var(--ui-row-1, #{t.$row});
     --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
     --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
@@ -69,7 +69,7 @@
     font-size: var(--_font-size-xs);
     font-weight: var(--_weight-medium);
     line-height: var(--_row-1);
-    letter-spacing: #{t.$tracking-wide};
+    letter-spacing: #{t.$letter-spacing-wide};
     text-transform: uppercase;
     color: var(--_color-text-muted);
   }