@digiko-npm/designsystem 0.2.2 → 0.2.3

package/dist/designsystem.css

@@ -169,9 +169,13 @@
   --ds-color-accent-green: #16a34a;
   --ds-color-accent-orange: #d97706;
   --ds-color-accent-blue-subtle: rgba(37, 99, 235, 0.1);
+  --ds-color-accent-blue-border: rgba(37, 99, 235, 0.2);
   --ds-color-accent-purple-subtle: rgba(124, 58, 237, 0.1);
+  --ds-color-accent-purple-border: rgba(124, 58, 237, 0.2);
   --ds-color-accent-green-subtle: rgba(22, 163, 74, 0.1);
+  --ds-color-accent-green-border: rgba(22, 163, 74, 0.2);
   --ds-color-accent-orange-subtle: rgba(217, 119, 6, 0.1);
+  --ds-color-accent-orange-border: rgba(217, 119, 6, 0.2);
 }
 
 /* Dark overrides for status/accent (brighter for contrast) */
@@ -197,9 +201,13 @@
   --ds-color-accent-green: #4ade80;
   --ds-color-accent-orange: #fbbf24;
   --ds-color-accent-blue-subtle: rgba(96, 165, 250, 0.1);
+  --ds-color-accent-blue-border: rgba(96, 165, 250, 0.2);
   --ds-color-accent-purple-subtle: rgba(167, 139, 250, 0.1);
+  --ds-color-accent-purple-border: rgba(167, 139, 250, 0.2);
   --ds-color-accent-green-subtle: rgba(74, 222, 128, 0.1);
+  --ds-color-accent-green-border: rgba(74, 222, 128, 0.2);
   --ds-color-accent-orange-subtle: rgba(251, 191, 36, 0.1);
+  --ds-color-accent-orange-border: rgba(251, 191, 36, 0.2);
 }
 
 /* ==========================================================================
@@ -220,6 +228,7 @@
   --ds-font-display-weight: 400;
 
   /* --- Font Sizes --- */
+  --ds-text-2xs: 0.625rem;    /* 10px */
   --ds-text-xs: 0.75rem;      /* 12px */
   --ds-text-sm: 0.875rem;     /* 14px */
   --ds-text-base: 1rem;       /* 16px */
@@ -279,6 +288,20 @@
   --ds-space-24: 6rem;       /* 96px */
   --ds-space-32: 8rem;       /* 128px */
 
+  /* --- Component Height Scale ---
+       Inline components at the same size tier share the same height.
+       Button SM + Input SM = both 32px. Always.
+       Based on Radix Themes convention (multiples of 8).
+
+       --ds-size-1: 24px — xs (btn--xs, input--xs)
+       --ds-size-2: 32px — sm (btn--sm, input--sm)
+       --ds-size-3: 40px — md (btn, input — default)
+       --ds-size-4: 48px — lg (btn--lg, input--lg) */
+  --ds-size-1: 1.5rem;
+  --ds-size-2: 2rem;
+  --ds-size-3: 2.5rem;
+  --ds-size-4: 3rem;
+
   /* --- Section Padding (responsive, generous) --- */
   --ds-section-padding: clamp(80px, 12vw, 160px);
 
@@ -510,6 +533,12 @@ strong, b {
   color: var(--ds-color-text-secondary);
 }
 
+/* UI heading — body font for functional/interface headings (labels, settings, admin) */
+.ds-heading-ui {
+  font-family: var(--ds-font-sans);
+  font-weight: var(--ds-weight-medium);
+}
+
 /* Section title style */
 .ds-section-title {
   font-family: var(--ds-font-display);
@@ -632,8 +661,9 @@ hr {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  height: var(--ds-size-3);
   gap: var(--ds-space-2);
-  padding: var(--ds-space-2) var(--ds-space-4);
+  padding: 0 var(--ds-space-4);
   font-family: var(--ds-font-sans);
   font-size: var(--ds-text-sm);
   font-weight: var(--ds-weight-medium);
@@ -642,7 +672,7 @@ hr {
   border-radius: var(--ds-radius-lg);
   border: 1px solid transparent;
   cursor: pointer;
-  transition: all var(--ds-duration-fast) ease;
+  transition: all var(--ds-duration-fast) var(--ds-ease-default);
 
   /* Default: inverted (dark bg in light mode, light bg in dark mode) */
   background-color: var(--ds-color-inverted);
@@ -706,7 +736,7 @@ hr {
 }
 .ds-btn--danger:hover {
   background-color: var(--ds-color-error);
-  color: #fff;
+  color: var(--ds-color-on-inverted);
   opacity: 1;
 }
 
@@ -717,21 +747,31 @@ hr {
 }
 .ds-btn--success:hover {
   background-color: var(--ds-color-success);
-  color: #fff;
+  color: var(--ds-color-on-inverted);
   opacity: 1;
 }
 
 /* --- Sizes --- */
 
+.ds-btn--xs {
+  height: var(--ds-size-1);
+  padding: 0 var(--ds-space-2);
+  font-size: var(--ds-text-xs);
+  gap: var(--ds-space-1);
+  border-radius: var(--ds-radius-md);
+}
+
 .ds-btn--sm {
-  padding: var(--ds-space-1-5) var(--ds-space-3);
+  height: var(--ds-size-2);
+  padding: 0 var(--ds-space-3);
   font-size: var(--ds-text-sm);
   gap: var(--ds-space-1-5);
   border-radius: var(--ds-radius-md);
 }
 
 .ds-btn--lg {
-  padding: var(--ds-space-3) var(--ds-space-6);
+  height: var(--ds-size-4);
+  padding: 0 var(--ds-space-6);
   font-size: var(--ds-text-base);
   border-radius: var(--ds-radius-lg);
 }
@@ -739,11 +779,15 @@ hr {
 /* --- Pill (rounded-full, like hero CTAs) --- */
 .ds-btn--pill {
   border-radius: var(--ds-radius-full);
-  padding: var(--ds-space-3) var(--ds-space-6);
+  padding: 0 var(--ds-space-6);
+}
+
+.ds-btn--pill.ds-btn--xs {
+  padding: 0 var(--ds-space-3);
 }
 
 .ds-btn--pill.ds-btn--sm {
-  padding: var(--ds-space-2) var(--ds-space-5);
+  padding: 0 var(--ds-space-5);
 }
 
 /* --- Full Width --- */
@@ -752,14 +796,19 @@ hr {
 /* --- Icon Only --- */
 .ds-btn--icon {
   padding: 0;
-  width: 2.25rem;
-  height: 2.25rem;
+  width: var(--ds-size-3);
+  height: var(--ds-size-3);
   border-radius: var(--ds-radius-md);
 }
 
+.ds-btn--icon.ds-btn--xs {
+  width: var(--ds-size-1);
+  height: var(--ds-size-1);
+}
+
 .ds-btn--icon.ds-btn--sm {
-  width: 2rem;
-  height: 2rem;
+  width: var(--ds-size-2);
+  height: var(--ds-size-2);
 }
 
 /* --- Button Group --- */
@@ -931,7 +980,7 @@ hr {
 .ds-textarea,
 .ds-select {
   width: 100%;
-  padding: var(--ds-space-2-5) var(--ds-space-4);
+  padding: 0 var(--ds-space-4);
   font-family: var(--ds-font-sans);
   font-size: var(--ds-text-sm);
   line-height: var(--ds-leading-normal);
@@ -939,7 +988,12 @@ hr {
   background-color: var(--ds-color-surface);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-lg);
-  transition: all var(--ds-duration-fast) ease;
+  transition: all var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-input,
+.ds-select {
+  height: var(--ds-size-3);
 }
 
 .ds-input:hover,
@@ -976,14 +1030,23 @@ hr {
 }
 
 /* Sizes */
+.ds-input--xs {
+  height: var(--ds-size-1);
+  padding: 0 var(--ds-space-1-5);
+  font-size: var(--ds-text-xs);
+  border-radius: var(--ds-radius-sm);
+}
+
 .ds-input--sm {
-  padding: var(--ds-space-1) var(--ds-space-2);
+  height: var(--ds-size-2);
+  padding: 0 var(--ds-space-2);
   font-size: var(--ds-text-xs);
   border-radius: var(--ds-radius-md);
 }
 
 .ds-input--lg {
-  padding: var(--ds-space-3) var(--ds-space-4);
+  height: var(--ds-size-4);
+  padding: 0 var(--ds-space-4);
   font-size: var(--ds-text-base);
 }
 
@@ -991,6 +1054,7 @@ hr {
 .ds-textarea {
   min-height: 6rem;
   padding: var(--ds-space-2-5) var(--ds-space-4);
+  height: auto;
   resize: vertical;
 }
 
@@ -1079,13 +1143,13 @@ hr {
 .ds-badge--info {
   background-color: var(--ds-color-accent-blue-subtle);
   color: var(--ds-color-accent-blue);
-  border-color: rgba(37, 99, 235, 0.2);
+  border-color: var(--ds-color-accent-blue-border);
 }
 
 .ds-badge--purple {
   background-color: var(--ds-color-accent-purple-subtle);
   color: var(--ds-color-accent-purple);
-  border-color: rgba(124, 58, 237, 0.2);
+  border-color: var(--ds-color-accent-purple-border);
 }
 
 /* Outline (no bg) */
@@ -1107,7 +1171,7 @@ hr {
 /* Uppercase badge (like "NEW", "BETA") */
 .ds-badge--upper {
   text-transform: uppercase;
-  font-size: 10px;
+  font-size: var(--ds-text-2xs);
   font-weight: var(--ds-weight-semibold);
   letter-spacing: var(--ds-tracking-wide);
 }
@@ -1302,7 +1366,7 @@ hr {
   background-color: var(--ds-color-surface);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl);
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--ds-shadow-lg);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -1422,7 +1486,7 @@ hr {
   color: var(--ds-color-text-tertiary);
   padding: var(--ds-space-1);
   border-radius: var(--ds-radius-sm);
-  transition: color var(--ds-duration-fast) ease;
+  transition: color var(--ds-duration-fast) var(--ds-ease-default);
 }
 .ds-toast__close:hover {
   color: var(--ds-color-text);
@@ -1591,7 +1655,7 @@ hr {
   border-left: none;
   border-right: none;
   white-space: nowrap;
-  transition: all var(--ds-duration-fast) ease;
+  transition: all var(--ds-duration-fast) var(--ds-ease-default);
   margin-bottom: -1px;
 }
 
@@ -1757,7 +1821,7 @@ hr {
   color: var(--ds-color-text-tertiary);
   border-radius: var(--ds-radius-sm);
   cursor: pointer;
-  transition: color var(--ds-duration-fast) ease;
+  transition: color var(--ds-duration-fast) var(--ds-ease-default);
 }
 
 .ds-alert__close:hover {
@@ -2502,7 +2566,7 @@ hr {
   width: 1.25rem;
   height: 1.25rem;
   border-radius: var(--ds-radius-full);
-  background-color: #fff;
+  background-color: var(--ds-color-surface);
   box-shadow: var(--ds-shadow-sm);
   transform: translateY(-50%);
   transition: transform var(--ds-duration-normal) var(--ds-ease-out);
@@ -2540,8 +2604,8 @@ hr {
    --------------------------------------------------------------------------- */
 
 .ds-toggle:focus-visible {
-  outline: 2px solid var(--ds-color-interactive);
-  outline-offset: 2px;
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
 }
 
 /* ---------------------------------------------------------------------------
@@ -2660,8 +2724,8 @@ hr {
 }
 
 .ds-breadcrumb__link:focus-visible {
-  outline: 2px solid var(--ds-color-interactive);
-  outline-offset: 2px;
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
   border-radius: var(--ds-radius-sm);
 }
 
@@ -2746,8 +2810,8 @@ hr {
 }
 
 .ds-pagination__item:focus-visible {
-  outline: 2px solid var(--ds-color-interactive);
-  outline-offset: 2px;
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
 }
 
 /* ---------------------------------------------------------------------------
@@ -2805,8 +2869,8 @@ hr {
 
 .ds-pagination__prev:focus-visible,
 .ds-pagination__next:focus-visible {
-  outline: 2px solid var(--ds-color-interactive);
-  outline-offset: 2px;
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
 }
 
 .ds-pagination__prev:disabled,
@@ -2880,7 +2944,7 @@ hr {
   font-size: var(--ds-text-xs);
   font-weight: var(--ds-weight-medium);
   font-family: var(--ds-font-sans);
-  line-height: 1;
+  line-height: var(--ds-leading-none);
   border-radius: var(--ds-radius-full);
   background-color: var(--ds-color-bg-elevated);
   border: 1px solid var(--ds-color-border);
@@ -2959,7 +3023,7 @@ hr {
   background: transparent;
   color: currentColor;
   font-size: inherit;
-  line-height: 1;
+  line-height: var(--ds-leading-none);
   opacity: 0.6;
   cursor: pointer;
   transition:
@@ -2975,8 +3039,8 @@ hr {
 }
 
 .ds-tag__remove:focus-visible {
-  outline: 2px solid var(--ds-color-interactive);
-  outline-offset: 1px;
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
   opacity: 1;
 }
 
@@ -2994,7 +3058,7 @@ hr {
 
 .ds-tag--sm {
   padding: var(--ds-space-0-5, 0.125rem) var(--ds-space-2, 0.5rem);
-  font-size: 0.625rem;
+  font-size: var(--ds-text-2xs);
 }
 
 .ds-tag--sm.ds-tag--removable {
@@ -3015,29 +3079,29 @@ hr {
 }
 
 /* ==========================================================================
- * Accordion / Collapse
- * ==========================================================================
- *
- * A vertically stacked set of collapsible sections. Supports CSS-only
- * open/close via the `.ds-accordion__item--open` modifier.
- *
- * Variants:
- *   --flush      – borderless, full-bleed style
- *   --separated  – visually detached items with individual borders
- *
- * Markup:
- *   <div class="ds-accordion">
- *     <div class="ds-accordion__item ds-accordion__item--open">
- *       <button class="ds-accordion__trigger">Section</button>
- *       <div class="ds-accordion__content">
- *         <div class="ds-accordion__body">…</div>
- *       </div>
- *     </div>
- *   </div>
- * ========================================================================== */
+   Accordion / Collapse
+   ==========================================================================
+   A vertically stacked set of collapsible sections. Supports CSS-only
+   open/close via the `.ds-accordion__item--open` modifier.
+
+   Variants:
+     --flush      – borderless, full-bleed style
+     --separated  – visually detached items with individual borders
 
-/* Container
- * -------------------------------------------------------------------------- */
+   Usage:
+     <div class="ds-accordion">
+       <div class="ds-accordion__item ds-accordion__item--open">
+         <button class="ds-accordion__trigger">Section</button>
+         <div class="ds-accordion__content">
+           <div class="ds-accordion__body">…</div>
+         </div>
+       </div>
+     </div>
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Container
+   --------------------------------------------------------------------------- */
 
 .ds-accordion {
   border: 1px solid var(--ds-color-border);
@@ -3045,8 +3109,9 @@ hr {
   overflow: hidden;
 }
 
-/* Item
- * -------------------------------------------------------------------------- */
+/* ---------------------------------------------------------------------------
+   Item
+   --------------------------------------------------------------------------- */
 
 .ds-accordion__item {
   border-top: 1px solid var(--ds-color-border);
@@ -3056,8 +3121,9 @@ hr {
   border-top: 0;
 }
 
-/* Trigger (button)
- * -------------------------------------------------------------------------- */
+/* ---------------------------------------------------------------------------
+   Trigger (button)
+   --------------------------------------------------------------------------- */
 
 .ds-accordion__trigger {
   display: flex;
@@ -3100,8 +3166,9 @@ hr {
   transform: rotate(225deg);
 }
 
-/* Collapsible content wrapper
- * -------------------------------------------------------------------------- */
+/* ---------------------------------------------------------------------------
+   Collapsible content wrapper
+   --------------------------------------------------------------------------- */
 
 .ds-accordion__content {
   max-height: 0;
@@ -3115,15 +3182,16 @@ hr {
   max-height: 80rem;
 }
 
-/* Inner body (visible content)
- * -------------------------------------------------------------------------- */
+/* ---------------------------------------------------------------------------
+   Inner body (visible content)
+   --------------------------------------------------------------------------- */
 
 .ds-accordion__body {
   padding: var(--ds-space-4);
   padding-top: 0;
   font-size: var(--ds-text-sm);
   color: var(--ds-color-text-secondary);
-  line-height: 1.625;
+  line-height: var(--ds-leading-relaxed);
 }
 
 /* ==========================================================================
@@ -3166,33 +3234,33 @@ hr {
 }
 
 /* ==========================================================================
- * Drawer / Sheet
- * ==========================================================================
- *
- * A sliding overlay panel anchored to the edge of the viewport.
- * Default direction is right; use `--left` or `--bottom` modifiers
- * to change the slide origin.
- *
- * Sizes:
- *   --sm   18 rem
- *   (default)  24 rem
- *   --lg   36 rem
- *
- * Markup:
- *   <div class="ds-drawer ds-drawer--right ds-drawer--open">
- *     <div class="ds-drawer__content">
- *       <div class="ds-drawer__header">
- *         <h3>Title</h3>
- *         <button class="ds-drawer__close" aria-label="Close">&times;</button>
- *       </div>
- *       <div class="ds-drawer__body">…</div>
- *       <div class="ds-drawer__footer">…</div>
- *     </div>
- *   </div>
- * ========================================================================== */
+   Drawer / Sheet
+   ==========================================================================
+   A sliding overlay panel anchored to the edge of the viewport.
+   Default direction is right; use `--left` or `--bottom` modifiers
+   to change the slide origin.
+
+   Sizes:
+     --sm        18 rem
+     (default)   24 rem
+     --lg        36 rem
+
+   Usage:
+     <div class="ds-drawer ds-drawer--right ds-drawer--open">
+       <div class="ds-drawer__content">
+         <div class="ds-drawer__header">
+           <h3>Title</h3>
+           <button class="ds-drawer__close" aria-label="Close">&times;</button>
+         </div>
+         <div class="ds-drawer__body">…</div>
+         <div class="ds-drawer__footer">…</div>
+       </div>
+     </div>
+   ========================================================================== */
 
-/* Overlay backdrop
- * -------------------------------------------------------------------------- */
+/* ---------------------------------------------------------------------------
+   Overlay backdrop
+   --------------------------------------------------------------------------- */
 
 .ds-drawer {
   position: fixed;
@@ -3211,8 +3279,9 @@ hr {
   visibility: visible;
 }
 
-/* Sliding panel
- * -------------------------------------------------------------------------- */
+/* ---------------------------------------------------------------------------
+   Sliding panel
+   --------------------------------------------------------------------------- */
 
 .ds-drawer__content {
   position: fixed;
@@ -3339,7 +3408,7 @@ hr {
   background-color: transparent;
   color: var(--ds-color-text-tertiary);
   font-size: var(--ds-text-lg);
-  line-height: 1;
+  line-height: var(--ds-leading-none);
   cursor: pointer;
   flex-shrink: 0;
   transition:
@@ -3376,44 +3445,43 @@ hr {
 }
 
 /* ==========================================================================
- * Progress Bar & Step Indicator
- * ==========================================================================
- *
- * Two related components for communicating progress:
- *
- * 1. **Progress bar** — a horizontal fill bar with optional label row.
- *    Sizes: --sm, (default), --lg
- *    Statuses: --success, --warning, --error, --info
- *
- * 2. **Step indicator** — a numbered sequence of steps with connectors.
- *    States: --completed, --current, --error
- *    Layout: horizontal (default), --vertical
- *
- * Progress bar markup:
- *   <div class="ds-progress__label">
- *     <span>Uploading…</span><span>64 %</span>
- *   </div>
- *   <div class="ds-progress">
- *     <div class="ds-progress__bar" style="width: 64%"></div>
- *   </div>
- *
- * Step indicator markup:
- *   <div class="ds-steps">
- *     <div class="ds-step ds-step--completed">
- *       <div class="ds-step__indicator">1</div>
- *       <div class="ds-step__content">
- *         <span class="ds-step__title">Account</span>
- *         <span class="ds-step__description">Create your account</span>
- *       </div>
- *     </div>
- *     <div class="ds-step__connector"></div>
- *     <div class="ds-step ds-step--current">…</div>
- *   </div>
- * ========================================================================== */
+   Progress Bar & Step Indicator
+   ==========================================================================
+   Two related components for communicating progress:
+
+   1. Progress bar — a horizontal fill bar with optional label row.
+      Sizes: --sm, (default), --lg
+      Statuses: --success, --warning, --error, --info
+
+   2. Step indicator — a numbered sequence of steps with connectors.
+      States: --completed, --current, --error
+      Layout: horizontal (default), --vertical
+
+   Progress bar usage:
+     <div class="ds-progress__label">
+       <span>Uploading…</span><span>64 %</span>
+     </div>
+     <div class="ds-progress">
+       <div class="ds-progress__bar" style="width: 64%"></div>
+     </div>
+
+   Step indicator usage:
+     <div class="ds-steps">
+       <div class="ds-step ds-step--completed">
+         <div class="ds-step__indicator">1</div>
+         <div class="ds-step__content">
+           <span class="ds-step__title">Account</span>
+           <span class="ds-step__description">Create your account</span>
+         </div>
+       </div>
+       <div class="ds-step__connector"></div>
+       <div class="ds-step ds-step--current">…</div>
+     </div>
+   ========================================================================== */
 
 /* ==========================================================================
- * Progress Bar
- * ========================================================================== */
+   Progress Bar
+   ========================================================================== */
 
 /* Label row (sits above the bar) */
 .ds-progress__label {
@@ -3442,8 +3510,9 @@ hr {
   transition: width var(--ds-duration-normal) var(--ds-ease-default);
 }
 
-/* Sizes
- * -------------------------------------------------------------------------- */
+/* ---------------------------------------------------------------------------
+   Sizes
+   --------------------------------------------------------------------------- */
 
 .ds-progress--sm {
   height: 0.25rem;
@@ -3453,8 +3522,9 @@ hr {
   height: 0.75rem;
 }
 
-/* Status colours
- * -------------------------------------------------------------------------- */
+/* ---------------------------------------------------------------------------
+   Status colours
+   --------------------------------------------------------------------------- */
 
 .ds-progress--success .ds-progress__bar {
   background-color: var(--ds-color-success);
@@ -3473,8 +3543,8 @@ hr {
 }
 
 /* ==========================================================================
- * Step Indicator
- * ========================================================================== */
+   Step Indicator
+   ========================================================================== */
 
 /* Steps container (horizontal by default) */
 .ds-steps {
@@ -3490,8 +3560,9 @@ hr {
   align-items: flex-start;
 }
 
-/* Single step
- * -------------------------------------------------------------------------- */
+/* ---------------------------------------------------------------------------
+   Single step
+   --------------------------------------------------------------------------- */
 
 .ds-step {
   display: flex;
@@ -3538,8 +3609,9 @@ hr {
   color: var(--ds-color-error);
 }
 
-/* Step content
- * -------------------------------------------------------------------------- */
+/* ---------------------------------------------------------------------------
+   Step content
+   --------------------------------------------------------------------------- */
 
 .ds-step__content {
   display: flex;
@@ -3557,8 +3629,9 @@ hr {
   color: var(--ds-color-text-tertiary);
 }
 
-/* Connector (line between steps)
- * -------------------------------------------------------------------------- */
+/* ---------------------------------------------------------------------------
+   Connector (line between steps)
+   --------------------------------------------------------------------------- */
 
 /* Horizontal connector */
 .ds-step__connector {
@@ -3593,28 +3666,27 @@ hr {
 
 /* === Tier 3 — Advanced === */
 /* ==========================================================================
- * Popover
- * ==========================================================================
- *
- * Flexible popover component for displaying complex content anchored to a
- * trigger element. Supports four placement directions (top, bottom, left,
- * right) and multiple size variants. Default placement is bottom.
- *
- * Usage:
- *   <div class="ds-popover ds-popover--open">
- *     <button>Trigger</button>
- *     <div class="ds-popover__content">...</div>
- *   </div>
- *
- * Modifiers:
- *   .ds-popover--open         — Shows the popover content
- *   .ds-popover--top          — Places content above the trigger
- *   .ds-popover--bottom       — Places content below the trigger (default)
- *   .ds-popover--left         — Places content to the left of the trigger
- *   .ds-popover--right        — Places content to the right of the trigger
- *   .ds-popover__content--sm  — Smaller popover (12rem min-width)
- *   .ds-popover__content--lg  — Larger popover (24rem min-width)
- * ========================================================================== */
+   Popover
+   ==========================================================================
+   Flexible popover component for displaying complex content anchored to a
+   trigger element. Supports four placement directions (top, bottom, left,
+   right) and multiple size variants. Default placement is bottom.
+
+   Usage:
+     <div class="ds-popover ds-popover--open">
+       <button>Trigger</button>
+       <div class="ds-popover__content">...</div>
+     </div>
+
+   Modifiers:
+     .ds-popover--open         — Shows the popover content
+     .ds-popover--top          — Places content above the trigger
+     .ds-popover--bottom       — Places content below the trigger (default)
+     .ds-popover--left         — Places content to the left of the trigger
+     .ds-popover--right        — Places content to the right of the trigger
+     .ds-popover__content--sm  — Smaller popover (12rem min-width)
+     .ds-popover__content--lg  — Larger popover (24rem min-width)
+   ========================================================================== */
 
 .ds-popover {
   position: relative;
@@ -3706,25 +3778,24 @@ hr {
 }
 
 /* ==========================================================================
- * Slider
- * ==========================================================================
- *
- * Range slider input component with customizable thumb and track styling.
- * Supports labels, value display, size variants, and disabled state.
- *
- * Usage:
- *   <div class="ds-slider">
- *     <input type="range" min="0" max="100" value="50" />
- *     <div class="ds-slider__labels">
- *       <span>0</span>
- *       <span>100</span>
- *     </div>
- *   </div>
- *
- * Modifiers:
- *   .ds-slider--sm        — Smaller track and thumb
- *   .ds-slider--disabled  — Reduced opacity, no interaction
- * ========================================================================== */
+   Slider
+   ==========================================================================
+   Range slider input component with customizable thumb and track styling.
+   Supports labels, value display, size variants, and disabled state.
+
+   Usage:
+     <div class="ds-slider">
+       <input type="range" min="0" max="100" value="50" />
+       <div class="ds-slider__labels">
+         <span>0</span>
+         <span>100</span>
+       </div>
+     </div>
+
+   Modifiers:
+     .ds-slider--sm        — Smaller track and thumb
+     .ds-slider--disabled  — Reduced opacity, no interaction
+   ========================================================================== */
 
 .ds-slider {
   width: 100%;
@@ -3832,31 +3903,30 @@ hr {
 }
 
 /* ==========================================================================
- * Timeline
- * ==========================================================================
- *
- * Vertical timeline component for roadmaps, activity feeds, and step-based
- * flows. Each item has a dot indicator on a vertical line with support for
- * completed, current, and error states.
- *
- * Usage:
- *   <div class="ds-timeline">
- *     <div class="ds-timeline__item ds-timeline__item--completed">
- *       <div class="ds-timeline__dot"></div>
- *       <div class="ds-timeline__content">
- *         <div class="ds-timeline__title">Step one</div>
- *         <div class="ds-timeline__description">Details here.</div>
- *         <div class="ds-timeline__time">2 hours ago</div>
- *       </div>
- *     </div>
- *   </div>
- *
- * Modifiers:
- *   .ds-timeline__item--completed  — Green dot (success)
- *   .ds-timeline__item--current    — Inverted dot (active)
- *   .ds-timeline__item--error      — Red dot (error)
- *   .ds-timeline--compact          — Tighter spacing, smaller dots
- * ========================================================================== */
+   Timeline
+   ==========================================================================
+   Vertical timeline component for roadmaps, activity feeds, and step-based
+   flows. Each item has a dot indicator on a vertical line with support for
+   completed, current, and error states.
+
+   Usage:
+     <div class="ds-timeline">
+       <div class="ds-timeline__item ds-timeline__item--completed">
+         <div class="ds-timeline__dot"></div>
+         <div class="ds-timeline__content">
+           <div class="ds-timeline__title">Step one</div>
+           <div class="ds-timeline__description">Details here.</div>
+           <div class="ds-timeline__time">2 hours ago</div>
+         </div>
+       </div>
+     </div>
+
+   Modifiers:
+     .ds-timeline__item--completed  — Green dot (success)
+     .ds-timeline__item--current    — Inverted dot (active)
+     .ds-timeline__item--error      — Red dot (error)
+     .ds-timeline--compact          — Tighter spacing, smaller dots
+   ========================================================================== */
 
 .ds-timeline {
   position: relative;
@@ -3964,25 +4034,24 @@ hr {
 }
 
 /* ==========================================================================
- * Kbd
- * ==========================================================================
- *
- * Keyboard shortcut display component with a raised 3D key appearance.
- * Use individually or group multiple keys with ds-kbd-group for combos
- * like "Cmd + K".
- *
- * Usage:
- *   <kbd class="ds-kbd">Esc</kbd>
- *
- *   <span class="ds-kbd-group">
- *     <kbd class="ds-kbd">Cmd</kbd>
- *     <span class="ds-kbd-group__separator">+</span>
- *     <kbd class="ds-kbd">K</kbd>
- *   </span>
- *
- * Modifiers:
- *   .ds-kbd--lg  — Larger key display
- * ========================================================================== */
+   Kbd
+   ==========================================================================
+   Keyboard shortcut display component with a raised 3D key appearance.
+   Use individually or group multiple keys with ds-kbd-group for combos
+   like "Cmd + K".
+
+   Usage:
+     <kbd class="ds-kbd">Esc</kbd>
+
+     <span class="ds-kbd-group">
+       <kbd class="ds-kbd">Cmd</kbd>
+       <span class="ds-kbd-group__separator">+</span>
+       <kbd class="ds-kbd">K</kbd>
+     </span>
+
+   Modifiers:
+     .ds-kbd--lg  — Larger key display
+   ========================================================================== */
 
 .ds-kbd {
   display: inline-flex;
@@ -4020,38 +4089,37 @@ hr {
 }
 
 /* ==========================================================================
- * Command
- * ==========================================================================
- *
- * Command palette / search overlay following the Cmd+K pattern. Provides a
- * full-screen overlay with a centered search dialog, grouped results,
- * keyboard-navigable items, and a footer with shortcut hints.
- *
- * Usage:
- *   <div class="ds-command ds-command--open">
- *     <div class="ds-command__content">
- *       <div class="ds-command__input-wrapper">
- *         <span class="ds-command__input-icon">...</span>
- *         <input class="ds-command__input" placeholder="Search..." />
- *       </div>
- *       <div class="ds-command__list">
- *         <div class="ds-command__group">
- *           <div class="ds-command__group-heading">Results</div>
- *           <div class="ds-command__item ds-command__item--active">
- *             <span class="ds-command__item-icon">...</span>
- *             <span class="ds-command__item-label">Item</span>
- *             <span class="ds-command__item-shortcut">Ctrl+N</span>
- *           </div>
- *         </div>
- *         <div class="ds-command__empty">No results found.</div>
- *       </div>
- *       <div class="ds-command__footer">...</div>
- *     </div>
- *   </div>
- *
- * Modifiers:
- *   .ds-command--open  — Shows the command palette
- * ========================================================================== */
+   Command Palette
+   ==========================================================================
+   Command palette / search overlay following the Cmd+K pattern. Provides a
+   full-screen overlay with a centered search dialog, grouped results,
+   keyboard-navigable items, and a footer with shortcut hints.
+
+   Usage:
+     <div class="ds-command ds-command--open">
+       <div class="ds-command__content">
+         <div class="ds-command__input-wrapper">
+           <span class="ds-command__input-icon">...</span>
+           <input class="ds-command__input" placeholder="Search..." />
+         </div>
+         <div class="ds-command__list">
+           <div class="ds-command__group">
+             <div class="ds-command__group-heading">Results</div>
+             <div class="ds-command__item ds-command__item--active">
+               <span class="ds-command__item-icon">...</span>
+               <span class="ds-command__item-label">Item</span>
+               <span class="ds-command__item-shortcut">Ctrl+N</span>
+             </div>
+           </div>
+           <div class="ds-command__empty">No results found.</div>
+         </div>
+         <div class="ds-command__footer">...</div>
+       </div>
+     </div>
+
+   Modifiers:
+     .ds-command--open  — Shows the command palette
+   ========================================================================== */
 
 /* Overlay */
 .ds-command {
@@ -4140,7 +4208,7 @@ hr {
 .ds-command__group-heading {
   font-size: var(--ds-text-xs);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: var(--ds-tracking-wide);
   color: var(--ds-color-text-tertiary);
   padding: var(--ds-space-2) var(--ds-space-3);
   font-weight: var(--ds-weight-medium);