@teseor/css 2.2.2 → 2.3.1

package/package.json

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

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

@@ -18,7 +18,7 @@
     },
     {
       "name": "--ui-badge-height",
-      "default": "calc(var(--ui-row) * 1.25)",
+      "default": "calc(var(--ui-row) * 1.5)",
       "description": "Overall height"
     },
     {
@@ -63,7 +63,7 @@
     },
     {
       "name": "--ui-badge-height-lg",
-      "default": "calc(var(--ui-row) * 1.5)",
+      "default": "var(--ui-row-2)",
       "description": "Overall height at large size"
     },
     {

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

@@ -10,7 +10,7 @@
     --_accent: var(--ui-badge-accent, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
 
     // @desc Overall height
-    --_height: var(--ui-badge-height, calc(var(--ui-row, #{t.$row}) * 1.25));
+    --_height: var(--ui-badge-height, calc(var(--ui-row, #{t.$row}) * 1.5));
     // @desc Horizontal padding
     --_padding-x: var(--ui-badge-padding-x, var(--ui-space-1, #{t.$space-1}));
     // @desc Font size
@@ -36,7 +36,7 @@
 
   .badge--lg {
     // @desc Overall height at large size
-    --_height: var(--ui-badge-height-lg, calc(var(--ui-row, #{t.$row}) * 1.5));
+    --_height: var(--ui-badge-height-lg, var(--ui-row-2, #{t.$row-2}));
     // @desc Horizontal padding at large size
     --_padding-x: var(--ui-badge-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
     // @desc Font size at large size

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

@@ -8,7 +8,6 @@
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_unit: var(--ui-unit, #{t.$unit});
     --_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
     --_font-size: var(--ui-table-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
@@ -63,11 +62,11 @@
   // @modifier boolean striped
     &--striped {
       tbody tr:nth-child(odd) {
-        background: var(--_color-bg-subtle);
+        background: var(--_color-bg-muted);
       }
 
       th {
-        background: var(--_color-bg-muted);
+        background: var(--_header-bg);
       }
     }
   }

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

@@ -56,7 +56,7 @@
     },
     {
       "name": "--ui-tag-height-sm",
-      "default": "calc(var(--ui-unit) * 2.5)",
+      "default": "calc(var(--ui-unit) * 2)",
       "description": "Overall height at small size"
     },
     {
@@ -71,7 +71,7 @@
     },
     {
       "name": "--ui-tag-height-lg",
-      "default": "calc(var(--ui-unit) * 3.5)",
+      "default": "calc(var(--ui-unit) * 4)",
       "description": "Overall height at large size"
     },
     {

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

@@ -28,7 +28,7 @@
   // @modifier size
   .tag--sm {
     // @desc Overall height at small size
-    --_height: var(--ui-tag-height-sm, calc(#{t.$unit} * 2.5));
+    --_height: var(--ui-tag-height-sm, calc(#{t.$unit} * 2));
     // @desc Horizontal padding at small size
     --_padding-x: var(--ui-tag-padding-x-sm, calc(#{t.$unit} * 1));
     // @desc Font size at small size
@@ -37,7 +37,7 @@
 
   .tag--lg {
     // @desc Overall height at large size
-    --_height: var(--ui-tag-height-lg, calc(#{t.$unit} * 3.5));
+    --_height: var(--ui-tag-height-lg, calc(#{t.$unit} * 4));
     // @desc Horizontal padding at large size
     --_padding-x: var(--ui-tag-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
     // @desc Font size at large size

package/src/components/feedback/progress/api.json

@@ -30,7 +30,7 @@
     },
     {
       "name": "--ui-progress-bg",
-      "default": "var(--ui-color-bg-subtle)",
+      "default": "var(--ui-color-bg-inset)",
       "description": "Background color"
     },
     {

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

@@ -21,7 +21,7 @@
     // @desc Overall height
     --_height: var(--ui-progress-height, calc(#{t.$unit} * 1));
     // @desc Background color
-    --_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_bg: var(--ui-progress-bg, var(--ui-color-bg-inset, #{t.$color-bg-inset}));
     // @desc Fill
     --_fill: var(--ui-progress-fill, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Corner radius

package/src/components/feedback/skeleton/api.json

@@ -13,7 +13,7 @@
   "cssVars": [
     {
       "name": "--ui-skeleton-bg",
-      "default": "var(--ui-color-bg-subtle)",
+      "default": "var(--ui-color-bg-inset)",
       "description": "Background color"
     },
     {

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

@@ -20,7 +20,7 @@ description: Loading placeholder with shimmer animation for content loading stat
 </div>
 
 <!-- @card_skeleton -->
-<div class="ui-card" style="width: 300px;">
+<div class="ui-card" style="width: 304px;">
   <div class="ui-skeleton ui-skeleton--rect"></div>
   <div style="padding: var(--ui-space-2); display: flex; flex-direction: column; gap: var(--ui-space-1);">
     <div class="ui-skeleton ui-skeleton--heading"></div>

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

@@ -8,7 +8,7 @@
 @layer components.tokens {
   .skeleton {
     // @desc Background color
-    --_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_bg: var(--ui-skeleton-bg, var(--ui-color-bg-inset, #{t.$color-bg-inset}));
     // @desc Shimmer
     --_shimmer: var(--ui-skeleton-shimmer, #{t.$skeleton-shimmer});
     // @desc Corner radius

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

@@ -23,7 +23,7 @@
     },
     {
       "name": "--ui-slider-track-bg",
-      "default": "var(--ui-color-bg-subtle)",
+      "default": "var(--ui-color-bg-inset)",
       "description": "Track background"
     },
     {
@@ -71,6 +71,11 @@
       "default": "var(--ui-color-focus)",
       "description": "Focus ring"
     },
+    {
+      "name": "--ui-slider-fill-pct",
+      "default": "50%",
+      "description": "Fill percentage (set via JS for Webkit track fill)"
+    },
     {
       "name": "--ui-slider-height-sm",
       "default": "calc(var(--ui-row) * 1.5)",

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

@@ -14,7 +14,7 @@
     // @desc Track height
     --_track-height: var(--ui-slider-track-height, var(--ui-unit, #{t.$unit}));
     // @desc Track background
-    --_track-bg: var(--ui-slider-track-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_track-bg: var(--ui-slider-track-bg, var(--ui-color-bg-inset, #{t.$color-bg-inset}));
     // @desc Track fill
     --_track-fill: var(--ui-slider-track-fill, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Track corner radius
@@ -33,6 +33,8 @@
     --_thumb-shadow: var(--ui-slider-thumb-shadow, #{t.$slider-thumb-shadow});
     // @desc Focus ring
     --_focus-ring: var(--ui-slider-focus-ring, var(--ui-color-focus, #{t.$color-focus}));
+    // @desc Fill percentage (set via JS for Webkit track fill)
+    --_fill-pct: var(--ui-slider-fill-pct, 50%);
   }
 
   // @modifier size
@@ -81,11 +83,11 @@
     cursor: pointer;
     appearance: none;
 
-    // Webkit track
+    // Webkit track — gradient simulates fill (no ::-webkit-range-progress)
     &::-webkit-slider-runnable-track {
       block-size: var(--_track-height);
 
-      background: var(--_track-bg);
+      background: linear-gradient(to right, var(--_track-fill) var(--_fill-pct, 50%), var(--_track-bg) var(--_fill-pct, 50%));
       border-radius: var(--_track-radius);
     }
 

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

@@ -25,7 +25,7 @@
     },
     {
       "name": "--ui-toggle-track-bg",
-      "default": "var(--ui-color-bg-subtle)",
+      "default": "var(--ui-color-bg-inset)",
       "description": "Track background"
     },
     {

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

@@ -15,7 +15,7 @@
     // @desc Track height
     --_track-height: var(--ui-toggle-track-height, calc(#{t.$unit} * 3));
     // @desc Track background
-    --_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-inset, #{t.$color-bg-inset}));
     // @desc Track bg checked
     --_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Track corner radius

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

@@ -25,7 +25,7 @@ description: Structured modal with header, body, and footer sections. Use with m
 <!-- @borderless -->
 <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;">
+    <div class="ui-modal__content ui-dialog ui-dialog--borderless" style="max-height: 184px;">
       <header class="ui-dialog__header">
         <h2 class="ui-dialog__title">{{ t('simple_dialog', 'Simple Dialog') }}</h2>
       </header>

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

@@ -4,7 +4,7 @@ title: Drawer
 
 <!-- @default_end -->
 <!-- Slides in from the end (right in LTR) -->
-<div class="demo-container demo-container--overflow" style="--demo-h: 300px">
+<div class="demo-container demo-container--overflow" style="--demo-h: 304px">
   <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">
@@ -57,28 +57,28 @@ title: Drawer
 </div>
 
 <!-- @sizes | column -->
-<div class="demo-container demo-container--overflow" style="--demo-h: 150px">
+<div class="demo-container demo-container--overflow" style="--demo-h: 152px">
   <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 class="demo-container demo-container--overflow" style="--demo-h: 150px">
+<div class="demo-container demo-container--overflow" style="--demo-h: 152px">
   <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 class="demo-container demo-container--overflow" style="--demo-h: 150px">
+<div class="demo-container demo-container--overflow" style="--demo-h: 152px">
   <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 class="demo-container demo-container--overflow" style="--demo-h: 150px">
+<div class="demo-container demo-container--overflow" style="--demo-h: 152px">
   <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>

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

@@ -52,7 +52,7 @@ description: Container for modal dialogs. Use with overlay for backdrop effect.
 <!-- @with_scrollable_content -->
 <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__content" style="max-height: 152px;">
       <div class="ui-modal__body">
         <p>{{ t('line_1', 'Line 1') }}</p>
         <p>{{ t('line_2', 'Line 2') }}</p>

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

@@ -11,47 +11,47 @@ weight: 2
   <div class="demo-playground">
     <div class="demo-playground__row">
       <label>scale</label>
-      <input type="range" min="0.75" max="1.25" step="0.025" value="1" data-token="--ui-scale" data-suffix="">
+      <input class="ui-slider ui-slider--sm" type="range" min="0.75" max="1.25" step="0.025" value="1" data-token="--ui-scale" data-suffix="">
       <output>1</output>
     </div>
     <div class="demo-playground__row">
       <label>primary hue</label>
-      <input type="range" min="0" max="360" step="1" value="250" data-token="--ui-color-primary" data-template="oklch(55% 0.22 {value})" data-suffix="">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="360" step="1" value="250" data-token="--ui-color-primary" data-template="oklch(55% 0.22 {value})" data-suffix="">
       <output>250</output>
     </div>
     <div class="demo-playground__row">
       <label>success hue</label>
-      <input type="range" min="0" max="360" step="1" value="145" data-token="--ui-color-success" data-template="oklch(60% 0.18 {value})" data-suffix="">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="360" step="1" value="145" data-token="--ui-color-success" data-template="oklch(60% 0.18 {value})" data-suffix="">
       <output>145</output>
     </div>
     <div class="demo-playground__row">
       <label>warning hue</label>
-      <input type="range" min="0" max="360" step="1" value="70" data-token="--ui-color-warning" data-template="oklch(75% 0.18 {value})" data-suffix="">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="360" step="1" value="70" data-token="--ui-color-warning" data-template="oklch(75% 0.18 {value})" data-suffix="">
       <output>70</output>
     </div>
     <div class="demo-playground__row">
       <label>danger hue</label>
-      <input type="range" min="0" max="360" step="1" value="25" data-token="--ui-color-danger" data-template="oklch(60% 0.22 {value})" data-suffix="">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="360" step="1" value="25" data-token="--ui-color-danger" data-template="oklch(60% 0.22 {value})" data-suffix="">
       <output>25</output>
     </div>
     <div class="demo-playground__row">
       <label>neutral hue</label>
-      <input type="range" min="0" max="360" step="1" value="250" data-token="--ui-color-neutral" data-param="hue" data-template="oklch(50% {chroma} {hue})" data-suffix="">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="360" step="1" value="250" data-token="--ui-color-neutral" data-param="hue" data-template="oklch(50% {chroma} {hue})" data-suffix="">
       <output>250</output>
     </div>
     <div class="demo-playground__row">
       <label>neutral chroma</label>
-      <input type="range" min="0" max="0.08" step="0.005" value="0.02" data-token="--ui-color-neutral" data-param="chroma" data-template="oklch(50% {chroma} {hue})" data-suffix="">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="0.08" step="0.005" value="0.02" data-token="--ui-color-neutral" data-param="chroma" data-template="oklch(50% {chroma} {hue})" data-suffix="">
       <output>0.02</output>
     </div>
     <div class="demo-playground__row">
       <label>font size</label>
-      <input type="range" min="0.75" max="1.25" step="0.05" value="1" data-token="--ui-font-size-base" data-suffix="rem">
+      <input class="ui-slider ui-slider--sm" type="range" min="0.75" max="1.25" step="0.05" value="1" data-token="--ui-font-size-base" data-suffix="rem">
       <output>1rem</output>
     </div>
     <div class="demo-playground__row">
       <label>font family</label>
-      <select data-token="--ui-font-sans">
+      <select class="ui-select ui-select--sm" data-token="--ui-font-sans">
         <option value="system-ui, -apple-system, sans-serif">System</option>
         <option value="'Georgia', 'Times New Roman', serif">Serif</option>
         <option value="ui-monospace, sfmono-regular, monospace">Mono</option>
@@ -59,19 +59,28 @@ weight: 2
       </select>
       <output></output>
     </div>
+    <div class="demo-playground__row">
+      <label>mono font</label>
+      <select class="ui-select ui-select--sm" data-token="--ui-font-mono">
+        <option value="ui-monospace, sfmono-regular, monospace">System</option>
+        <option value="'Courier New', courier, monospace">Courier</option>
+        <option value="'Fira Code', ui-monospace, monospace">Fira Code</option>
+      </select>
+      <output></output>
+    </div>
     <div class="demo-playground__row">
       <label>radius</label>
-      <input type="range" min="0" max="24" step="1" value="8" data-token="--ui-radius-base" data-suffix="px">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="24" step="1" value="8" data-token="--ui-radius-base" data-suffix="px">
       <output>8px</output>
     </div>
     <div class="demo-playground__row">
       <label>shadow strength</label>
-      <input type="range" min="0" max="40" step="1" value="20" data-token="--ui-shadow-strength" data-suffix="%">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="40" step="1" value="20" data-token="--ui-shadow-strength" data-suffix="%">
       <output>20%</output>
     </div>
     <div class="demo-playground__row">
       <label>border width</label>
-      <input type="range" min="0" max="4" step="0.5" value="1" data-token="--ui-border-width-base" data-suffix="px">
+      <input class="ui-slider ui-slider--sm" type="range" min="0" max="4" step="0.5" value="1" data-token="--ui-border-width-base" data-suffix="px">
       <output>1px</output>
     </div>
     <div class="ui-row ui-row--xs">
@@ -111,6 +120,18 @@ weight: 2
         <span class="ui-tag">{{ t('tag', 'Tag') }}</span>
       </div>
     </div>
+    <div class="ui-row ui-row--xs">
+      <input class="ui-slider" type="range" min="0" max="100" value="60">
+      <div class="ui-toggle">
+        <input class="ui-toggle__input" type="checkbox" checked>
+        <span class="ui-toggle__track"></span>
+        <span class="ui-toggle__thumb"></span>
+      </div>
+    </div>
+    <div class="ui-progress" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-value: 65%">
+      <div class="ui-progress__bar"></div>
+    </div>
+    <code class="ui-code">{{ t('mono_preview', 'const theme = "custom"') }}</code>
     <div class="ui-column ui-column--xs">
       <div class="ui-alert ui-alert--info">{{ t('alert_info', 'Info alert') }}</div>
       <div class="ui-alert ui-alert--success">{{ t('alert_success', 'Success alert') }}</div>

package/src/config/tokens/_variables.scss

@@ -211,6 +211,7 @@ $color-text-inverse: $color-neutral-50;
 $color-bg: $color-neutral-50;
 $color-bg-subtle: $color-neutral-100;
 $color-bg-muted: $color-neutral-200;
+$color-bg-inset: $color-neutral-300;
 
 $color-border: $color-neutral-200;
 $color-border-strong: $color-neutral-300;

package/src/config/tokens/semantic-colors.scss

@@ -9,6 +9,7 @@
     --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-bg-inset: light-dark(var(--ui-color-neutral-300), var(--ui-color-neutral-600));
 
     --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));

package/src/debug/index.scss

@@ -7,7 +7,7 @@
 }
 
 .debug-grid {
-  --debug-color: color-mix(in oklch, var(--ui-color-primary, #{t.$color-primary}) 15%, transparent);
+  --debug-color: color-mix(in oklch, var(--ui-color-primary, #{t.$color-primary}) 20%, transparent);
 }
 
 .debug-grid::after {
@@ -28,10 +28,10 @@
   background-position: 0 0;
 }
 
-// Stronger grid at row intervals
+// Stronger grid at row intervals — green to contrast with blue unit grid
 .debug-grid-rows {
-  --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-color: color-mix(in oklch, var(--ui-color-success, #{t.$color-success}) 15%, transparent);
+  --debug-color-strong: color-mix(in oklch, var(--ui-color-success, #{t.$color-success}) 30%, transparent);
 }
 
 .debug-grid-rows::after {
@@ -53,9 +53,9 @@
   background-position: 0 0;
 }
 
-// Baseline grid only (horizontal lines)
+// Baseline grid only (horizontal lines) — red to contrast with blue/green grids
 .debug-baseline {
-  --debug-color: color-mix(in oklch, var(--ui-color-danger, #{t.$color-danger}) 20%, transparent);
+  --debug-color: color-mix(in oklch, var(--ui-color-danger, #{t.$color-danger}) 25%, transparent);
 }
 
 .debug-baseline::after {

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

@@ -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') }}" class="demo-box" style="--demo-h: 300px">
+<nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" class="demo-box" style="--demo-h: 304px">
   <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') }}" class="demo-box" style="--demo-h: 180px">
+<nav class="ui-sidebar-nav" aria-label="{{ t('navigation', 'Navigation') }}" class="demo-box" style="--demo-h: 184px">
   <div class="ui-sidebar-nav__content">
     <ul class="ui-sidebar-nav__group-items">
       <li>