@digiko-npm/designsystem 0.4.0 → 0.7.1

package/dist/designsystem.css

@@ -1,4 +1,4 @@
-/* @ds/designsystem v0.4.0 */
+/* @ds/designsystem v0.7.0 */
 /* ==========================================================================
    @digiko-npm/designsystem
 
@@ -14,6 +14,9 @@
    Your values always win. Nothing breaks.
    ========================================================================== */
 
+@layer tokens, base, components, utilities;
+
+@layer tokens {
 /* ==========================================================================
    Design Tokens — All tokens in one import
 
@@ -40,7 +43,13 @@
   --ds-color-surface-hover: #fafafa;
   --ds-color-surface-active: #f4f4f5;
 
-  /* --- Text — zinc hierarchy --- */
+  /* --- Text — zinc hierarchy ---
+     Contrast ratios on --ds-color-bg (#fafafa):
+     --text:           #09090b → ~19.3:1 ✅ WCAG AAA
+     --text-secondary: #52525b → ~7.6:1  ✅ WCAG AAA
+     --text-tertiary:  #a1a1aa → ~2.5:1  ⚠ Decorative/non-essential only (does not meet 4.5:1)
+     --text-disabled:  #d4d4d8 → ~1.5:1  ⚠ Disabled state (exempt per WCAG 1.4.3)
+     --- */
   --ds-color-text: #09090b;
   --ds-color-text-secondary: #52525b;
   --ds-color-text-tertiary: #a1a1aa;
@@ -87,18 +96,24 @@
 }
 
 /* Dark theme */
-[data-theme="dark"], .dark {
+[data-theme="dark"] {
   /* --- Backgrounds — deep, refined zinc-900 palette --- */
   --ds-color-bg: #09090b;
   --ds-color-bg-subtle: #0f0f11;
-  --ds-color-bg-muted: #27272a;
-  --ds-color-bg-elevated: #18181b;
+  --ds-color-bg-muted: #18181b;
+  --ds-color-bg-elevated: #27272a;
 
   --ds-color-surface: #0f0f11;
   --ds-color-surface-hover: #18181b;
   --ds-color-surface-active: #27272a;
 
-  /* --- Text --- */
+  /* --- Text ---
+     Contrast ratios on --ds-color-bg (#09090b):
+     --text:           #fafafa → ~19.3:1 ✅ WCAG AAA
+     --text-secondary: #a1a1aa → ~7.6:1  ✅ WCAG AAA
+     --text-tertiary:  #71717a → ~3.8:1  ⚠ Decorative/non-essential only (does not meet 4.5:1)
+     --text-disabled:  #3f3f46 → ~2.0:1  ⚠ Disabled state (exempt per WCAG 1.4.3)
+     --- */
   --ds-color-text: #fafafa;
   --ds-color-text-secondary: #a1a1aa;
   --ds-color-text-tertiary: #71717a;
@@ -185,7 +200,7 @@
 }
 
 /* Dark overrides for status/accent (brighter for contrast) */
-[data-theme="dark"], .dark {
+[data-theme="dark"] {
   --ds-color-success: #4ade80;
   --ds-color-success-subtle: rgba(74, 222, 128, 0.1);
   --ds-color-success-border: rgba(74, 222, 128, 0.2);
@@ -275,6 +290,13 @@
    Generous whitespace, responsive sections.
    ========================================================================== */
 
+/* Breakpoints (reference only — CSS cannot use vars in @media)
+   --ds-breakpoint-sm:  640px
+   --ds-breakpoint-md:  768px
+   --ds-breakpoint-lg:  1024px
+   --ds-breakpoint-xl:  1280px
+*/
+
 :root {
   /* --- Spacing Scale --- */
   --ds-space-0: 0;
@@ -395,6 +417,8 @@
 }
 
 
+}
+@layer base {
 /* ==========================================================================
    Base: Reset
    Clean, modern, antialiased.
@@ -538,7 +562,7 @@ p {
 }
 
 .ds-prose p + p {
-  margin-top: var(--ds-space-4);
+  margin-block-start: var(--ds-space-4);
 }
 
 small {
@@ -595,7 +619,7 @@ strong, b {
 @media (min-width: 768px) {
   .ds-hero-title { font-size: var(--ds-text-6xl); }
 }
-@media (min-width: 1024px) {
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
   .ds-hero-title { font-size: var(--ds-text-7xl); }
 }
 
@@ -624,8 +648,8 @@ pre code {
 }
 
 blockquote {
-  padding-left: var(--ds-space-4);
-  border-left: 2px solid var(--ds-color-border-hover);
+  padding-inline-start: var(--ds-space-4);
+  border-inline-start: 2px solid var(--ds-color-border-hover);
   color: var(--ds-color-text-secondary);
 }
 
@@ -648,9 +672,9 @@ hr {
 }
 
 .ds-prose ul, .ds-prose ol {
-  padding-left: var(--ds-space-6);
-  margin-top: var(--ds-space-2);
-  margin-bottom: var(--ds-space-2);
+  padding-inline-start: var(--ds-space-6);
+  margin-block-start: var(--ds-space-2);
+  margin-block-end: var(--ds-space-2);
 }
 .ds-prose ul { list-style-type: disc; }
 .ds-prose ol { list-style-type: decimal; }
@@ -660,7 +684,7 @@ hr {
   color: var(--ds-color-text-secondary);
 }
 .ds-prose li + li {
-  margin-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
 }
 
 /* Tabular figures for numbers */
@@ -678,10 +702,19 @@ hr {
 }
 
 
+}
+@layer components {
 /* === Core === */
 /* ==========================================================================
    Component: Button
    Inverted primary, rounded-full CTAs, refined sizing.
+
+   ARIA requirements (consumer responsibility):
+   - Use <button> or <a role="button"> elements
+   - Disabled: add aria-disabled="true" (supported by DS styles)
+   - Loading: add aria-busy="true" when --loading is applied
+   - Icon-only: add aria-label="[action]" for screen readers
+   - Button groups: wrap in role="group" with aria-label
    ========================================================================== */
 
 .ds-btn {
@@ -713,6 +746,7 @@ hr {
 .ds-btn:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 .ds-btn:disabled,
@@ -845,7 +879,7 @@ hr {
 .ds-btn-group .ds-btn { border-radius: 0; }
 .ds-btn-group .ds-btn:first-child { border-radius: var(--ds-radius-lg) 0 0 var(--ds-radius-lg); }
 .ds-btn-group .ds-btn:last-child { border-radius: 0 var(--ds-radius-lg) var(--ds-radius-lg) 0; }
-.ds-btn-group .ds-btn + .ds-btn { margin-left: -1px; }
+.ds-btn-group .ds-btn + .ds-btn { margin-inline-start: -1px; }
 
 /* --- Loading spinner --- */
 .ds-btn--loading {
@@ -859,7 +893,7 @@ hr {
   width: 1em;
   height: 1em;
   border: 2px solid currentColor;
-  border-right-color: transparent;
+  border-inline-end-color: transparent;
   border-radius: var(--ds-radius-full);
   animation: ds-btn-spin 0.6s linear infinite;
   color: var(--ds-color-on-inverted);
@@ -915,7 +949,7 @@ hr {
 
 .ds-card__header {
   padding: var(--ds-space-5);
-  border-bottom: 1px solid var(--ds-color-border);
+  border-block-end: 1px solid var(--ds-color-border);
 }
 
 .ds-card__header h3,
@@ -930,7 +964,7 @@ hr {
 .ds-card__description {
   font-size: var(--ds-text-sm);
   color: var(--ds-color-text-tertiary);
-  margin-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
 }
 
 .ds-card__body {
@@ -939,7 +973,7 @@ hr {
 
 .ds-card__footer {
   padding: var(--ds-space-4) var(--ds-space-5);
-  border-top: 1px solid var(--ds-color-border);
+  border-block-start: 1px solid var(--ds-color-border);
   display: flex;
   align-items: center;
   gap: var(--ds-space-2);
@@ -963,10 +997,16 @@ hr {
 }
 
 /* Flush — no internal dividers */
-.ds-card--flush .ds-card__header { border-bottom: none; }
-.ds-card--flush .ds-card__footer { border-top: none; }
+.ds-card--flush .ds-card__header { border-block-end: none; }
+.ds-card--flush .ds-card__footer { border-block-start: none; }
+
+/* Stat card — extracted to stat-card.css */
+
+/* ==========================================================================
+   Component: Stat Card
+   Compact metric display with label, value, detail, and optional icon.
+   ========================================================================== */
 
-/* Stat card (like StatCard component) */
 .ds-stat-card {
   background-color: var(--ds-color-surface);
   border: 1px solid var(--ds-color-border);
@@ -984,13 +1024,13 @@ hr {
   font-weight: var(--ds-font-display-weight);
   font-size: var(--ds-text-2xl);
   color: var(--ds-color-text);
-  margin-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
 }
 
 .ds-stat-card__detail {
   font-size: var(--ds-text-xs);
   color: var(--ds-color-text-tertiary);
-  margin-top: var(--ds-space-0-5);
+  margin-block-start: var(--ds-space-0-5);
 }
 
 .ds-stat-card__icon {
@@ -1007,6 +1047,13 @@ hr {
 /* ==========================================================================
    Component: Form Inputs
    Surface bg, clean borders, focus ring.
+
+   ARIA requirements (consumer responsibility):
+   - Input: associate with <label for="id"> or aria-label
+   - Error state: add aria-invalid="true" + aria-describedby pointing to error msg
+   - Required: add aria-required="true" or HTML required attribute
+   - Input group: icon is decorative (pointer-events: none), no ARIA needed
+   - Checkbox/radio: use native <input type="checkbox|radio"> inside <label>
    ========================================================================== */
 
 .ds-label {
@@ -1014,7 +1061,7 @@ hr {
   font-size: var(--ds-text-sm);
   font-weight: var(--ds-weight-medium);
   color: var(--ds-color-text-secondary);
-  margin-bottom: var(--ds-space-1-5);
+  margin-block-end: var(--ds-space-1-5);
 }
 
 .ds-input,
@@ -1061,6 +1108,7 @@ hr {
 .ds-select:focus-visible {
   border-color: var(--ds-ring-color);
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 .ds-input::placeholder,
@@ -1120,7 +1168,7 @@ hr {
 }
 
 .ds-select--lg {
-  padding-right: var(--ds-space-8);
+  padding-inline-end: var(--ds-space-8);
 }
 
 /* Textarea */
@@ -1137,7 +1185,7 @@ hr {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right var(--ds-space-3) center;
-  padding-right: var(--ds-space-8);
+  padding-inline-end: var(--ds-space-8);
 }
 
 /* --- Layout Modifiers ---
@@ -1176,35 +1224,35 @@ hr {
 /* --- Input Group: icon-right ---
    Move icon to the right side, flip input padding. */
 .ds-input-group--icon-right .ds-input-group__icon {
-  left: auto;
-  right: var(--ds-space-3);
+  inset-inline-start: auto;
+  inset-inline-end: var(--ds-space-3);
 }
 .ds-input-group--icon-right .ds-input {
-  padding-left: var(--ds-space-4);
-  padding-right: calc(var(--ds-space-3) + 1rem + var(--ds-space-2));
+  padding-inline-start: var(--ds-space-4);
+  padding-inline-end: calc(var(--ds-space-3) + 1rem + var(--ds-space-2));
 }
 
 /* Help text */
 .ds-help {
   font-size: var(--ds-text-xs);
   color: var(--ds-color-text-tertiary);
-  margin-top: var(--ds-space-1-5);
+  margin-block-start: var(--ds-space-1-5);
 }
 .ds-help--error { color: var(--ds-color-error); }
 
 /* Form Group (legacy — prefer ds-form) */
-.ds-form-group { margin-bottom: var(--ds-space-4); }
+.ds-form-group { margin-block-end: var(--ds-space-4); }
 
 /* --- Form Stack ---
    Vertical form layout: comfortable spacing between fields (24px),
    extra breathing room before the action area (32px).
    Use ds-form__actions on the button/submit wrapper. */
 .ds-form > * + * {
-  margin-top: var(--ds-space-6);
+  margin-block-start: var(--ds-space-6);
 }
 
 .ds-form__actions {
-  margin-top: var(--ds-space-8);
+  margin-block-start: var(--ds-space-8);
 }
 
 /* --- Input Group ---
@@ -1216,8 +1264,8 @@ hr {
 
 .ds-input-group__icon {
   position: absolute;
-  left: var(--ds-space-3);
-  top: 50%;
+  inset-inline-start: var(--ds-space-3);
+  inset-block-start: 50%;
   transform: translateY(-50%);
   display: flex;
   align-items: center;
@@ -1227,7 +1275,7 @@ hr {
 }
 
 .ds-input-group .ds-input {
-  padding-left: calc(var(--ds-space-3) + 1rem + var(--ds-space-2));
+  padding-inline-start: calc(var(--ds-space-3) + 1rem + var(--ds-space-2));
 }
 
 /* Checkbox / Radio */
@@ -1243,8 +1291,88 @@ hr {
 .ds-checkbox input,
 .ds-radio input {
   accent-color: var(--ds-color-interactive);
-  width: 0.875rem;
-  height: 0.875rem;
+  width: 1rem;
+  height: 1rem;
+  min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+  min-height: 1.5rem;
+}
+
+/* ==========================================================================
+   Component: Field
+   Unified wrapper for form fields — label + input + hint + error.
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Container
+   --------------------------------------------------------------------------- */
+
+.ds-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-1-5);
+}
+
+/* ---------------------------------------------------------------------------
+   Label
+   --------------------------------------------------------------------------- */
+
+.ds-field__label {
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text);
+  line-height: var(--ds-leading-normal);
+}
+
+/* Required asterisk */
+.ds-field--required .ds-field__label::after {
+  content: " *";
+  color: var(--ds-color-error);
+}
+
+/* ---------------------------------------------------------------------------
+   Hint (help text below input)
+   --------------------------------------------------------------------------- */
+
+.ds-field__hint {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  line-height: var(--ds-leading-normal);
+}
+
+/* ---------------------------------------------------------------------------
+   Error message
+   --------------------------------------------------------------------------- */
+
+.ds-field__error {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-error);
+  line-height: var(--ds-leading-normal);
+}
+
+/* ---------------------------------------------------------------------------
+   Modifier: Horizontal layout (label left, input right)
+   --------------------------------------------------------------------------- */
+
+.ds-field--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--ds-space-4);
+}
+
+.ds-field--horizontal .ds-field__label {
+  flex-shrink: 0;
+  min-width: 8rem;
+  padding-block-start: var(--ds-space-2);
+}
+
+/* ---------------------------------------------------------------------------
+   Modifier: Disabled
+   --------------------------------------------------------------------------- */
+
+.ds-field--disabled {
+  opacity: var(--ds-opacity-disabled);
+  pointer-events: none;
 }
 
 /* ==========================================================================
@@ -1331,20 +1459,27 @@ hr {
 /* ==========================================================================
    Component: Navigation
    Fixed glass header, backdrop-blur, h-16. Clean links.
+
+   ARIA requirements (consumer responsibility):
+   - Nav: <nav aria-label="Main navigation"> (or aria-label="Sidebar")
+   - Active link: aria-current="page" on the current page link
+   - Mobile menu: toggle aria-expanded on hamburger button
+   - Mobile menu button: aria-label="Open menu" / "Close menu"
+   - Skip nav: add ds-skip-link before nav to skip to main content
    ========================================================================== */
 
 .ds-nav {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   z-index: var(--ds-z-sticky);
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 4rem;
   background-color: var(--ds-color-nav-bg);
-  border-bottom: 1px solid var(--ds-color-nav-border);
+  border-block-end: 1px solid var(--ds-color-nav-border);
   backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
   -webkit-backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
 }
@@ -1392,6 +1527,7 @@ hr {
 .ds-nav__link:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 .ds-nav__link--active {
@@ -1426,13 +1562,14 @@ hr {
 .ds-nav__icon-btn:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 /* --- Mobile nav overlay --- */
 .ds-nav__mobile {
   overflow: hidden;
   max-height: 0;
-  border-bottom: 0 solid var(--ds-color-nav-border);
+  border-block-end: 0 solid var(--ds-color-nav-border);
   background-color: var(--ds-color-nav-bg);
   backdrop-filter: blur(var(--ds-blur-lg));
   transition: all var(--ds-duration-slow) var(--ds-ease-out-expo);
@@ -1440,7 +1577,7 @@ hr {
 
 .ds-nav__mobile--open {
   max-height: 16rem;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
 }
 
 .ds-nav__mobile-links {
@@ -1463,12 +1600,12 @@ hr {
   width: 16rem;
   padding: var(--ds-space-5);
   background-color: var(--ds-color-surface);
-  border-right: 1px solid var(--ds-color-border);
+  border-inline-end: 1px solid var(--ds-color-border);
   height: 100%;
 }
 
 .ds-sidebar__section {
-  margin-bottom: var(--ds-space-6);
+  margin-block-end: var(--ds-space-6);
 }
 
 .ds-sidebar__title {
@@ -1477,7 +1614,7 @@ hr {
   text-transform: uppercase;
   letter-spacing: var(--ds-tracking-wide);
   color: var(--ds-color-text-tertiary);
-  margin-bottom: var(--ds-space-3);
+  margin-block-end: var(--ds-space-3);
 }
 
 .ds-sidebar__link {
@@ -1492,7 +1629,7 @@ hr {
   transition: all var(--ds-duration-normal) var(--ds-ease-default);
 }
 .ds-sidebar__link + .ds-sidebar__link {
-  margin-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
 }
 
 @media (hover: hover) {
@@ -1505,6 +1642,7 @@ hr {
 .ds-sidebar__link:focus-visible {
   outline: none;
   box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 .ds-sidebar__link--active {
@@ -1515,6 +1653,14 @@ hr {
 /* ==========================================================================
    Component: Modal
    Backdrop blur, shadow-2xl, rounded-xl. Smooth scale transition.
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="dialog", aria-modal="true", aria-labelledby="[title-id]"
+   - Close button: aria-label="Close"
+   - Focus: trap focus inside modal when open
+   - Keyboard: Escape closes modal
+   - On open: move focus to first focusable element or close button
+   - On close: return focus to the element that triggered the modal
    ========================================================================== */
 
 .ds-modal {
@@ -1566,7 +1712,7 @@ hr {
   align-items: flex-start;
   justify-content: space-between;
   padding: var(--ds-space-4) var(--ds-space-5);
-  border-bottom: 1px solid var(--ds-color-border);
+  border-block-end: 1px solid var(--ds-color-border);
 }
 
 .ds-modal__header h3 {
@@ -1579,7 +1725,7 @@ hr {
 .ds-modal__header p {
   font-size: var(--ds-text-sm);
   color: var(--ds-color-text-tertiary);
-  margin-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
 }
 
 .ds-modal__close {
@@ -1599,6 +1745,7 @@ hr {
 .ds-modal__close:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 .ds-modal__body {
@@ -1613,15 +1760,39 @@ hr {
   justify-content: flex-end;
   gap: var(--ds-space-2);
   padding: var(--ds-space-4) var(--ds-space-5);
-  border-top: 1px solid var(--ds-color-border);
+  border-block-start: 1px solid var(--ds-color-border);
 }
 
 /* Size variants */
 .ds-modal--md .ds-modal__content { max-width: var(--ds-container-md); }
 .ds-modal--lg .ds-modal__content { max-width: var(--ds-container-lg); }
 
+/* Fullscreen on mobile */
+@media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
+  .ds-modal--fullscreen-mobile .ds-modal__content {
+    max-width: none;
+    max-height: none;
+    width: 100%;
+    height: 100dvh;
+    margin: 0;
+    border-radius: 0;
+    border: none;
+    box-shadow: none;
+  }
+
+  .ds-modal--fullscreen-mobile {
+    padding: 0;
+  }
+}
+
 /* ==========================================================================
    Component: Toast
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="status", aria-live="polite" (or role="alert" for errors)
+   - Close button: aria-label="Dismiss notification"
+   - Auto-dismiss: provide enough time (minimum 5s), or let user control
+   - Toast region: wrap container in aria-label="Notifications"
    ========================================================================== */
 
 .ds-toast-container {
@@ -1634,10 +1805,10 @@ hr {
   pointer-events: none;
 }
 
-.ds-toast-container--top-right    { top: 0; right: 0; }
-.ds-toast-container--bottom-right { bottom: 0; right: 0; }
+.ds-toast-container--top-right    { inset-block-start: 0; inset-inline-end: 0; }
+.ds-toast-container--bottom-right { inset-block-end: 0; inset-inline-end: 0; }
 .ds-toast-container--bottom-center {
-  bottom: 0; left: 50%;
+  inset-block-end: 0; inset-inline-start: 50%;
   transform: translateX(-50%);
   align-items: center;
 }
@@ -1657,10 +1828,10 @@ hr {
   animation: ds-toast-in var(--ds-duration-slow) var(--ds-ease-out-expo) forwards;
 }
 
-.ds-toast--info    { border-left: var(--ds-accent-border-width) solid var(--ds-color-info); }
-.ds-toast--success { border-left: var(--ds-accent-border-width) solid var(--ds-color-success); }
-.ds-toast--warning { border-left: var(--ds-accent-border-width) solid var(--ds-color-warning); }
-.ds-toast--error   { border-left: var(--ds-accent-border-width) solid var(--ds-color-error); }
+.ds-toast--info    { border-inline-start: var(--ds-accent-border-width) solid var(--ds-color-info); }
+.ds-toast--success { border-inline-start: var(--ds-accent-border-width) solid var(--ds-color-success); }
+.ds-toast--warning { border-inline-start: var(--ds-accent-border-width) solid var(--ds-color-warning); }
+.ds-toast--error   { border-inline-start: var(--ds-accent-border-width) solid var(--ds-color-error); }
 
 .ds-toast__message {
   flex: 1;
@@ -1677,9 +1848,15 @@ hr {
 .ds-toast__close:hover {
   color: var(--ds-color-text);
 }
+.ds-toast__close {
+  min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+  min-height: 1.5rem;
+}
+
 .ds-toast__close:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 @keyframes ds-toast-in {
@@ -1706,7 +1883,7 @@ hr {
 
 .ds-table {
   width: 100%;
-  text-align: left;
+  text-align: start;
   font-size: var(--ds-text-sm);
 }
 
@@ -1717,13 +1894,13 @@ hr {
   color: var(--ds-color-text-tertiary);
   text-transform: uppercase;
   letter-spacing: var(--ds-tracking-wide);
-  border-bottom: 1px solid var(--ds-color-border);
+  border-block-end: 1px solid var(--ds-color-border);
 }
 
 .ds-table td {
   padding: var(--ds-space-3) var(--ds-space-4);
   color: var(--ds-color-text);
-  border-bottom: 1px solid var(--ds-color-border-subtle);
+  border-block-end: 1px solid var(--ds-color-border-subtle);
 }
 
 .ds-table tbody tr {
@@ -1754,20 +1931,27 @@ hr {
 /* ==========================================================================
    Component: Tabs
    Horizontal/vertical tab navigation with pill, small, and full-width variants.
+
+   ARIA requirements (consumer responsibility):
+   - Tab list: role="tablist", aria-label="[description]"
+   - Tab: role="tab", aria-selected="true|false", aria-controls="[panel-id]"
+   - Tab panel: role="tabpanel", id matching aria-controls, aria-labelledby="[tab-id]"
+   - Keyboard: ArrowLeft/Right (horizontal) or ArrowUp/Down (vertical) to navigate
+   - Active tab: only the active tab should be in tab order (tabindex="0"), others tabindex="-1"
    ========================================================================== */
 
 .ds-tabs {
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  border-bottom: 1px solid var(--ds-color-border);
+  border-block-end: 1px solid var(--ds-color-border);
   gap: var(--ds-space-0);
 }
 
 /* --- Pill variant --- */
 
 .ds-tabs--pills {
-  border-bottom: none;
+  border-block-end: none;
   gap: var(--ds-space-1);
   background-color: var(--ds-color-bg-elevated);
   border-radius: var(--ds-radius-lg);
@@ -1775,7 +1959,7 @@ hr {
 }
 
 .ds-tabs--pills .ds-tab {
-  border-bottom: none;
+  border-block-end: none;
   border-radius: var(--ds-radius-md);
   padding: var(--ds-space-1-5) var(--ds-space-3);
 }
@@ -1788,28 +1972,28 @@ hr {
   background-color: var(--ds-color-surface);
   color: var(--ds-color-text);
   box-shadow: var(--ds-shadow-sm);
-  border-bottom: none;
+  border-block-end: none;
 }
 
 /* --- Vertical variant --- */
 
 .ds-tabs--vertical {
   flex-direction: column;
-  border-bottom: none;
-  border-right: 1px solid var(--ds-color-border);
+  border-block-end: none;
+  border-inline-end: 1px solid var(--ds-color-border);
   gap: var(--ds-space-0-5);
 }
 
 .ds-tabs--vertical .ds-tab {
-  border-bottom: none;
-  border-right: 2px solid transparent;
+  border-block-end: none;
+  border-inline-end: 2px solid transparent;
   padding: var(--ds-space-2) var(--ds-space-4);
-  text-align: left;
+  text-align: start;
 }
 
 .ds-tabs--vertical .ds-tab--active {
-  border-bottom: none;
-  border-right-color: var(--ds-color-interactive);
+  border-block-end: none;
+  border-inline-end-color: var(--ds-color-interactive);
   color: var(--ds-color-text);
 }
 
@@ -1844,14 +2028,14 @@ hr {
   line-height: var(--ds-leading-snug);
   color: var(--ds-color-text-secondary);
   cursor: pointer;
-  border-bottom: 2px solid transparent;
+  border-block-end: 2px solid transparent;
   background: none;
-  border-top: none;
-  border-left: none;
-  border-right: none;
+  border-block-start: none;
+  border-inline-start: none;
+  border-inline-end: none;
   white-space: nowrap;
   transition: all var(--ds-duration-fast) var(--ds-ease-default);
-  margin-bottom: -1px;
+  margin-block-end: -1px;
 }
 
 .ds-tab:hover {
@@ -1862,11 +2046,12 @@ hr {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
   border-radius: var(--ds-radius-sm);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 .ds-tab--active {
   color: var(--ds-color-text);
-  border-bottom-color: var(--ds-color-interactive);
+  border-block-end-color: var(--ds-color-interactive);
 }
 
 .ds-tab:disabled,
@@ -1912,12 +2097,17 @@ hr {
 /* --- Tab Panel --- */
 
 .ds-tab-panel {
-  padding-top: var(--ds-space-5);
+  padding-block-start: var(--ds-space-5);
 }
 
 /* ==========================================================================
    Component: Alert
    Contextual feedback banners with semantic variants and dismissibility.
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="alert" (for important messages) or role="status"
+   - Dismissible: close button needs aria-label="Dismiss"
+   - For non-urgent info, use role="status" instead of role="alert"
    ========================================================================== */
 
 .ds-alert {
@@ -1929,7 +2119,7 @@ hr {
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-lg);
   background-color: var(--ds-color-surface);
-  border-left: var(--ds-accent-border-width) solid var(--ds-color-border);
+  border-inline-start: var(--ds-accent-border-width) solid var(--ds-color-border);
 }
 
 /* --- Semantic Variants --- */
@@ -1937,25 +2127,25 @@ hr {
 .ds-alert--info {
   background-color: var(--ds-color-info-subtle);
   border-color: var(--ds-color-info-border);
-  border-left-color: var(--ds-color-info);
+  border-inline-start-color: var(--ds-color-info);
 }
 
 .ds-alert--success {
   background-color: var(--ds-color-success-subtle);
   border-color: var(--ds-color-success-border);
-  border-left-color: var(--ds-color-success);
+  border-inline-start-color: var(--ds-color-success);
 }
 
 .ds-alert--warning {
   background-color: var(--ds-color-warning-subtle);
   border-color: var(--ds-color-warning-border);
-  border-left-color: var(--ds-color-warning);
+  border-inline-start-color: var(--ds-color-warning);
 }
 
 .ds-alert--error {
   background-color: var(--ds-color-error-subtle);
   border-color: var(--ds-color-error-border);
-  border-left-color: var(--ds-color-error);
+  border-inline-start-color: var(--ds-color-error);
 }
 
 /* --- Icon --- */
@@ -1994,11 +2184,11 @@ hr {
   font-size: var(--ds-text-sm);
   line-height: var(--ds-leading-normal);
   color: var(--ds-color-text-secondary);
-  margin-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
 }
 
 .ds-alert__title + .ds-alert__description {
-  margin-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
 }
 
 /* --- Close Button --- */
@@ -2026,6 +2216,7 @@ hr {
 .ds-alert__close:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 /* --- Compact Variant --- */
@@ -2039,31 +2230,31 @@ hr {
 
 .ds-alert--banner {
   border-radius: var(--ds-radius-none);
-  border-left: none;
-  border-right: none;
-  border-top: 1px solid var(--ds-color-border);
-  border-bottom: 1px solid var(--ds-color-border);
+  border-inline-start: none;
+  border-inline-end: none;
+  border-block-start: 1px solid var(--ds-color-border);
+  border-block-end: 1px solid var(--ds-color-border);
   width: 100%;
 }
 
 .ds-alert--banner.ds-alert--info {
-  border-top-color: var(--ds-color-info-border);
-  border-bottom-color: var(--ds-color-info-border);
+  border-block-start-color: var(--ds-color-info-border);
+  border-block-end-color: var(--ds-color-info-border);
 }
 
 .ds-alert--banner.ds-alert--success {
-  border-top-color: var(--ds-color-success-border);
-  border-bottom-color: var(--ds-color-success-border);
+  border-block-start-color: var(--ds-color-success-border);
+  border-block-end-color: var(--ds-color-success-border);
 }
 
 .ds-alert--banner.ds-alert--warning {
-  border-top-color: var(--ds-color-warning-border);
-  border-bottom-color: var(--ds-color-warning-border);
+  border-block-start-color: var(--ds-color-warning-border);
+  border-block-end-color: var(--ds-color-warning-border);
 }
 
 .ds-alert--banner.ds-alert--error {
-  border-top-color: var(--ds-color-error-border);
-  border-bottom-color: var(--ds-color-error-border);
+  border-block-start-color: var(--ds-color-error-border);
+  border-block-end-color: var(--ds-color-error-border);
 }
 
 /* ==========================================================================
@@ -2082,7 +2273,7 @@ hr {
 
 .ds-divider--vertical {
   border-top: none;
-  border-left: 1px solid var(--ds-color-border);
+  border-inline-start: 1px solid var(--ds-color-border);
   display: inline-block;
   width: auto;
   height: auto;
@@ -2136,6 +2327,14 @@ hr {
 /* ==========================================================================
    Component: Dropdown
    Floating menu with surface bg, scale transition, keyboard-friendly items.
+
+   ARIA requirements (consumer responsibility):
+   - Trigger: aria-haspopup="true", aria-expanded="true|false"
+   - Menu: role="menu"
+   - Items: role="menuitem"
+   - Keyboard: ArrowUp/Down to navigate, Enter to select, Escape to close
+   - On open: move focus to first menu item
+   - On close: return focus to trigger
    ========================================================================== */
 
 .ds-dropdown {
@@ -2152,8 +2351,8 @@ hr {
 
 .ds-dropdown__menu {
   position: absolute;
-  top: calc(100% + var(--ds-space-1));
-  left: 0;
+  inset-block-start: calc(100% + var(--ds-space-1));
+  inset-inline-start: 0;
   z-index: var(--ds-z-dropdown);
   min-width: 12rem;
   padding-block: var(--ds-space-1-5);
@@ -2183,14 +2382,14 @@ hr {
 /* --- Alignment variants --- */
 
 .ds-dropdown__menu--right {
-  left: auto;
-  right: 0;
+  inset-inline-start: auto;
+  inset-inline-end: 0;
   transform-origin: top right;
 }
 
 .ds-dropdown__menu--up {
-  top: auto;
-  bottom: calc(100% + var(--ds-space-1));
+  inset-block-start: auto;
+  inset-block-end: calc(100% + var(--ds-space-1));
   transform-origin: bottom left;
 }
 
@@ -2228,6 +2427,7 @@ hr {
 .ds-dropdown__item:focus-visible {
   outline: none;
   box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 .ds-dropdown__item--active {
@@ -2257,7 +2457,7 @@ hr {
 }
 
 .ds-dropdown__item-shortcut {
-  margin-left: auto;
+  margin-inline-start: auto;
   font-size: var(--ds-text-xs);
   color: var(--ds-color-text-tertiary);
 }
@@ -2267,7 +2467,7 @@ hr {
 .ds-dropdown__divider {
   margin-block: var(--ds-space-1);
   border: 0;
-  border-top: 1px solid var(--ds-color-border);
+  border-block-start: 1px solid var(--ds-color-border);
 }
 
 /* --- Section header --- */
@@ -2286,6 +2486,12 @@ hr {
    Component: Tooltip
    Inverted bubble with arrow, positioned via modifier classes.
    Default placement: top.
+
+   ARIA requirements (consumer responsibility):
+   - Tooltip content: role="tooltip", id="[tooltip-id]"
+   - Trigger element: aria-describedby="[tooltip-id]"
+   - Keyboard: tooltip should show on focus as well as hover (CSS handles this via :hover)
+   - For focus support: also add :focus-within show logic if trigger is focusable
    ========================================================================== */
 
 .ds-tooltip {
@@ -2346,8 +2552,8 @@ hr {
 
 .ds-tooltip .ds-tooltip__content,
 .ds-tooltip--top .ds-tooltip__content {
-  bottom: calc(100% + var(--ds-offset-md));
-  left: 50%;
+  inset-block-end: calc(100% + var(--ds-offset-md));
+  inset-inline-start: 50%;
   transform: translateX(-50%) translateY(4px);
 }
 
@@ -2359,8 +2565,8 @@ hr {
 /* Arrow — points down */
 .ds-tooltip .ds-tooltip__content::after,
 .ds-tooltip--top .ds-tooltip__content::after {
-  top: 100%;
-  left: 50%;
+  inset-block-start: 100%;
+  inset-inline-start: 50%;
   transform: translateX(-50%);
   border-top-color: var(--ds-color-inverted);
 }
@@ -2370,9 +2576,9 @@ hr {
    ============================================= */
 
 .ds-tooltip--bottom .ds-tooltip__content {
-  top: calc(100% + var(--ds-offset-md));
-  bottom: auto;
-  left: 50%;
+  inset-block-start: calc(100% + var(--ds-offset-md));
+  inset-block-end: auto;
+  inset-inline-start: 50%;
   transform: translateX(-50%) translateY(-4px);
 }
 
@@ -2382,9 +2588,9 @@ hr {
 
 /* Arrow — points up */
 .ds-tooltip--bottom .ds-tooltip__content::after {
-  bottom: 100%;
-  top: auto;
-  left: 50%;
+  inset-block-end: 100%;
+  inset-block-start: auto;
+  inset-inline-start: 50%;
   transform: translateX(-50%);
   border-top-color: transparent;
   border-bottom-color: var(--ds-color-inverted);
@@ -2395,10 +2601,10 @@ hr {
    ============================================= */
 
 .ds-tooltip--left .ds-tooltip__content {
-  right: calc(100% + var(--ds-offset-md));
-  left: auto;
-  bottom: auto;
-  top: 50%;
+  inset-inline-end: calc(100% + var(--ds-offset-md));
+  inset-inline-start: auto;
+  inset-block-end: auto;
+  inset-block-start: 50%;
   transform: translateY(-50%) translateX(4px);
 }
 
@@ -2408,13 +2614,13 @@ hr {
 
 /* Arrow — points right */
 .ds-tooltip--left .ds-tooltip__content::after {
-  left: 100%;
-  top: 50%;
-  bottom: auto;
-  right: auto;
+  inset-inline-start: 100%;
+  inset-block-start: 50%;
+  inset-block-end: auto;
+  inset-inline-end: auto;
   transform: translateY(-50%);
   border-top-color: transparent;
-  border-left-color: var(--ds-color-inverted);
+  border-inline-start-color: var(--ds-color-inverted);
 }
 
 /* =============================================
@@ -2422,10 +2628,10 @@ hr {
    ============================================= */
 
 .ds-tooltip--right .ds-tooltip__content {
-  left: calc(100% + var(--ds-offset-md));
-  right: auto;
-  bottom: auto;
-  top: 50%;
+  inset-inline-start: calc(100% + var(--ds-offset-md));
+  inset-inline-end: auto;
+  inset-block-end: auto;
+  inset-block-start: 50%;
   transform: translateY(-50%) translateX(-4px);
 }
 
@@ -2435,13 +2641,13 @@ hr {
 
 /* Arrow — points left */
 .ds-tooltip--right .ds-tooltip__content::after {
-  right: 100%;
-  left: auto;
-  top: 50%;
-  bottom: auto;
+  inset-inline-end: 100%;
+  inset-inline-start: auto;
+  inset-block-start: 50%;
+  inset-block-end: auto;
   transform: translateY(-50%);
   border-top-color: transparent;
-  border-right-color: var(--ds-color-inverted);
+  border-inline-end-color: var(--ds-color-inverted);
 }
 
 /* ==========================================================================
@@ -2453,8 +2659,8 @@ hr {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: var(--ds-size-3);
+  height: var(--ds-size-3);
   border-radius: var(--ds-radius-full);
   background-color: var(--ds-color-bg-elevated);
   color: var(--ds-color-text-secondary);
@@ -2476,32 +2682,32 @@ hr {
 /* --- Sizes --- */
 
 .ds-avatar--xs {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--ds-size-1);
+  height: var(--ds-size-1);
   font-size: var(--ds-text-xs);
 }
 
 .ds-avatar--sm {
-  width: 2rem;
-  height: 2rem;
+  width: var(--ds-size-2);
+  height: var(--ds-size-2);
   font-size: var(--ds-text-xs);
 }
 
 .ds-avatar--md {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: var(--ds-size-3);
+  height: var(--ds-size-3);
   font-size: var(--ds-text-sm);
 }
 
 .ds-avatar--lg {
-  width: 3rem;
-  height: 3rem;
+  width: var(--ds-size-4);
+  height: var(--ds-size-4);
   font-size: var(--ds-text-base);
 }
 
 .ds-avatar--xl {
-  width: 4rem;
-  height: 4rem;
+  width: var(--ds-space-16);
+  height: var(--ds-space-16);
   font-size: var(--ds-text-lg);
 }
 
@@ -2523,19 +2729,19 @@ hr {
 }
 
 .ds-avatar-group > .ds-avatar + .ds-avatar {
-  margin-left: -0.5rem;
+  margin-inline-start: -0.5rem;
 }
 
 .ds-avatar-group--sm > .ds-avatar + .ds-avatar {
-  margin-left: -0.375rem;
+  margin-inline-start: -0.375rem;
 }
 
 /* --- Status indicator --- */
 
 .ds-avatar__status {
   position: absolute;
-  bottom: 0;
-  right: 0;
+  inset-block-end: 0;
+  inset-inline-end: 0;
   width: 0.625rem;
   height: 0.625rem;
   border-radius: var(--ds-radius-full);
@@ -2572,28 +2778,28 @@ hr {
   height: 1rem;
   width: 100%;
   border-radius: var(--ds-radius-sm);
-  margin-bottom: var(--ds-space-2);
+  margin-block-end: var(--ds-space-2);
 }
 
 .ds-skeleton--text-sm {
   height: 0.75rem;
   width: 100%;
   border-radius: var(--ds-radius-sm);
-  margin-bottom: var(--ds-space-2);
+  margin-block-end: var(--ds-space-2);
 }
 
 .ds-skeleton--text-lg {
   height: 1.5rem;
   width: 100%;
   border-radius: var(--ds-radius-sm);
-  margin-bottom: var(--ds-space-2);
+  margin-block-end: var(--ds-space-2);
 }
 
 .ds-skeleton--heading {
   height: 2rem;
   width: 60%;
   border-radius: var(--ds-radius-md);
-  margin-bottom: var(--ds-space-3);
+  margin-block-end: var(--ds-space-3);
 }
 
 /* --- Shape variants --- */
@@ -2674,7 +2880,7 @@ hr {
   width: 3rem;
   height: 3rem;
   color: var(--ds-color-text-tertiary);
-  margin-bottom: var(--ds-space-2);
+  margin-block-end: var(--ds-space-2);
 }
 
 .ds-empty-state__title {
@@ -2699,7 +2905,7 @@ hr {
   align-items: center;
   justify-content: center;
   gap: var(--ds-space-3);
-  margin-top: var(--ds-space-2);
+  margin-block-start: var(--ds-space-2);
 }
 
 /* --- Compact variant --- */
@@ -2728,7 +2934,7 @@ hr {
 /* --- Left-aligned variant --- */
 .ds-empty-state--left {
   align-items: flex-start;
-  text-align: left;
+  text-align: start;
 }
 
 
@@ -2801,8 +3007,8 @@ hr {
 .ds-datepicker__panel {
   position: absolute;
   z-index: var(--ds-z-dropdown);
-  top: calc(100% + var(--ds-offset-sm));
-  left: 0;
+  inset-block-start: calc(100% + var(--ds-offset-sm));
+  inset-inline-start: 0;
   background-color: var(--ds-color-surface);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl);
@@ -2830,7 +3036,7 @@ hr {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--ds-space-2);
+  margin-block-end: var(--ds-space-2);
 }
 
 .ds-datepicker__title {
@@ -2868,7 +3074,7 @@ hr {
 .ds-datepicker__weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  margin-bottom: var(--ds-space-1);
+  margin-block-end: var(--ds-space-1);
 }
 
 .ds-datepicker__weekday {
@@ -2941,9 +3147,9 @@ hr {
 .ds-datepicker__footer {
   display: flex;
   justify-content: center;
-  margin-top: var(--ds-space-2);
-  padding-top: var(--ds-space-2);
-  border-top: 1px solid var(--ds-color-border);
+  margin-block-start: var(--ds-space-2);
+  padding-block-start: var(--ds-space-2);
+  border-block-start: 1px solid var(--ds-color-border);
 }
 
 .ds-datepicker__today {
@@ -3025,8 +3231,8 @@ hr {
 }
 
 .ds-datepicker--compact .ds-datepicker__footer {
-  margin-top: var(--ds-space-1);
-  padding-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
+  padding-block-start: var(--ds-space-1);
 }
 
 /* ==========================================================================
@@ -3035,6 +3241,12 @@ hr {
    A toggle (switch) control for binary on/off states.
    Supports aria-checked attribute and modifier-class driven states.
 
+   ARIA requirements (consumer responsibility):
+   - Element: <button role="switch" aria-checked="false|true">
+   - Label: pair with visible label via aria-labelledby or wrap in <label>
+   - Keyboard: Space toggles state (native <button> handles this)
+   - State: update aria-checked on toggle
+
    Usage:
      <button class="ds-toggle" role="switch" aria-checked="false"></button>
 
@@ -3071,8 +3283,8 @@ hr {
 .ds-toggle::after {
   content: "";
   position: absolute;
-  left: 2px;
-  top: 50%;
+  inset-inline-start: 2px;
+  inset-block-start: 50%;
   width: 1.25rem;
   height: 1.25rem;
   border-radius: var(--ds-radius-full);
@@ -3116,6 +3328,7 @@ hr {
 .ds-toggle:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3136,6 +3349,7 @@ hr {
 .ds-toggle--sm {
   width: 2rem;
   height: 1.125rem;
+  min-height: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
 }
 
 .ds-toggle--sm::after {
@@ -3170,6 +3384,12 @@ hr {
    ==========================================================================
    A horizontal breadcrumb trail for hierarchical navigation.
 
+   ARIA requirements (consumer responsibility):
+   - Container: <nav aria-label="Breadcrumb">
+   - Current page: aria-current="page" on the last item
+   - Links: use <a> elements for navigation
+   - Separator: decorative (generated via CSS ::after, not in DOM)
+
    Usage:
      <nav class="ds-breadcrumb" aria-label="Breadcrumb">
        <span class="ds-breadcrumb__item">
@@ -3237,6 +3457,7 @@ hr {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
   border-radius: var(--ds-radius-sm);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3266,6 +3487,13 @@ hr {
    ==========================================================================
    A row of page-number controls for navigating multi-page content.
 
+   ARIA requirements (consumer responsibility):
+   - Container: <nav aria-label="Pagination">
+   - Active page: aria-current="page"
+   - Prev/Next: aria-label="Previous page" / "Next page"
+   - Disabled: aria-disabled="true" on disabled prev/next buttons
+   - Page items: aria-label="Page [N]" (optional, number is visible)
+
    Usage:
      <nav class="ds-pagination" aria-label="Pagination">
        <button class="ds-pagination__prev" aria-label="Previous page">&lsaquo;</button>
@@ -3322,6 +3550,7 @@ hr {
 .ds-pagination__item:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3381,6 +3610,7 @@ hr {
 .ds-pagination__next:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 .ds-pagination__prev:disabled,
@@ -3433,6 +3663,11 @@ hr {
    ==========================================================================
    Interactive, optionally removable tag for categorisation and filtering.
 
+   ARIA requirements (consumer responsibility):
+   - Remove button: add aria-label="Remove [tag name]"
+   - Selectable tags (as <button>): use aria-pressed="true|false"
+   - Tag list: wrap in role="list" with aria-label
+
    Usage:
      <span class="ds-tag">Default</span>
      <span class="ds-tag ds-tag--success">Approved</span>
@@ -3473,6 +3708,7 @@ hr {
 button.ds-tag:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3520,7 +3756,7 @@ button.ds-tag:focus-visible {
    --------------------------------------------------------------------------- */
 
 .ds-tag--removable {
-  padding-right: var(--ds-space-1);
+  padding-inline-end: var(--ds-space-1);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3533,6 +3769,8 @@ button.ds-tag:focus-visible {
   justify-content: center;
   width: 1rem;
   height: 1rem;
+  min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+  min-height: 1.5rem;
   padding: 0;
   border: none;
   border-radius: var(--ds-radius-full);
@@ -3578,7 +3816,7 @@ button.ds-tag:focus-visible {
 }
 
 .ds-tag--sm.ds-tag--removable {
-  padding-right: var(--ds-space-0-5, 0.125rem);
+  padding-inline-end: var(--ds-space-0-5, 0.125rem);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3591,7 +3829,7 @@ button.ds-tag:focus-visible {
 }
 
 .ds-tag--lg.ds-tag--removable {
-  padding-right: var(--ds-space-1-5, 0.375rem);
+  padding-inline-end: var(--ds-space-1-5, 0.375rem);
 }
 
 /* ==========================================================================
@@ -3600,6 +3838,12 @@ button.ds-tag:focus-visible {
    A vertically stacked set of collapsible sections. Supports CSS-only
    open/close via the `.ds-accordion__item--open` modifier.
 
+   ARIA requirements (consumer responsibility):
+   - Trigger: <button> with aria-expanded="true|false"
+   - Trigger: aria-controls="[content-panel-id]"
+   - Content panel: id matching aria-controls, role="region", aria-labelledby="[trigger-id]"
+   - Keyboard: Enter/Space toggles section (native <button> handles this)
+
    Variants:
      --flush      – borderless, full-bleed style
      --separated  – visually detached items with individual borders
@@ -3607,8 +3851,8 @@ button.ds-tag:focus-visible {
    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">
+         <button class="ds-accordion__trigger" aria-expanded="true" aria-controls="panel-1">Section</button>
+         <div class="ds-accordion__content" id="panel-1" role="region">
            <div class="ds-accordion__body">…</div>
          </div>
        </div>
@@ -3630,11 +3874,11 @@ button.ds-tag:focus-visible {
    --------------------------------------------------------------------------- */
 
 .ds-accordion__item {
-  border-top: 1px solid var(--ds-color-border);
+  border-block-start: 1px solid var(--ds-color-border);
 }
 
 .ds-accordion__item:first-child {
-  border-top: 0;
+  border-block-start: 0;
 }
 
 /* ---------------------------------------------------------------------------
@@ -3648,7 +3892,7 @@ button.ds-tag:focus-visible {
   align-items: center;
   width: 100%;
   padding: var(--ds-space-4);
-  text-align: left;
+  text-align: start;
   font-family: var(--ds-font-sans);
   font-size: var(--ds-text-sm);
   font-weight: var(--ds-weight-medium);
@@ -3665,11 +3909,11 @@ button.ds-tag:focus-visible {
   display: inline-block;
   width: 0.5rem;
   height: 0.5rem;
-  border-right: 2px solid var(--ds-color-text-secondary);
-  border-bottom: 2px solid var(--ds-color-text-secondary);
+  border-inline-end: 2px solid var(--ds-color-text-secondary);
+  border-block-end: 2px solid var(--ds-color-text-secondary);
   transform: rotate(45deg);
   flex-shrink: 0;
-  margin-left: var(--ds-space-3);
+  margin-inline-start: var(--ds-space-3);
   transition: transform var(--ds-duration-fast) var(--ds-ease-default);
 }
 
@@ -3679,6 +3923,7 @@ button.ds-tag:focus-visible {
 .ds-accordion__trigger:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 /* Open state – rotate chevron */
@@ -3708,7 +3953,7 @@ button.ds-tag:focus-visible {
 
 .ds-accordion__body {
   padding: var(--ds-space-4);
-  padding-top: 0;
+  padding-block-start: 0;
   font-size: var(--ds-text-sm);
   color: var(--ds-color-text-secondary);
   line-height: var(--ds-leading-relaxed);
@@ -3724,12 +3969,12 @@ button.ds-tag:focus-visible {
 }
 
 .ds-accordion--flush .ds-accordion__item {
-  border-top: 0;
-  border-bottom: 1px solid var(--ds-color-border);
+  border-block-start: 0;
+  border-block-end: 1px solid var(--ds-color-border);
 }
 
 .ds-accordion--flush .ds-accordion__item:last-child {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 
 /* ==========================================================================
@@ -3745,12 +3990,12 @@ button.ds-tag:focus-visible {
 .ds-accordion--separated .ds-accordion__item {
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl);
-  margin-bottom: var(--ds-space-3);
+  margin-block-end: var(--ds-space-3);
   overflow: hidden;
 }
 
 .ds-accordion--separated .ds-accordion__item:last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 /* ==========================================================================
@@ -3760,13 +4005,21 @@ button.ds-tag:focus-visible {
    Default direction is right; use `--left` or `--bottom` modifiers
    to change the slide origin.
 
+   ARIA requirements (consumer responsibility):
+   - Container: role="dialog", aria-modal="true", aria-labelledby="[title-id]"
+   - Close button: aria-label="Close"
+   - Focus: trap focus inside drawer when open
+   - Keyboard: Escape closes drawer
+   - On open: move focus to first focusable element or close button
+   - On close: return focus to the element that triggered the drawer
+
    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 ds-drawer--right ds-drawer--open" role="dialog" aria-modal="true">
        <div class="ds-drawer__content">
          <div class="ds-drawer__header">
            <h3>Title</h3>
@@ -3819,12 +4072,12 @@ button.ds-tag:focus-visible {
 
 .ds-drawer__content,
 .ds-drawer--right .ds-drawer__content {
-  top: 0;
-  right: 0;
-  bottom: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
   width: 24rem;
   max-width: 90vw;
-  border-left: 1px solid var(--ds-color-border);
+  border-inline-start: 1px solid var(--ds-color-border);
   transform: translateX(100%);
 }
 
@@ -3838,14 +4091,14 @@ button.ds-tag:focus-visible {
  * ========================================================================== */
 
 .ds-drawer--left .ds-drawer__content {
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: auto;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-end: auto;
   width: 24rem;
   max-width: 90vw;
-  border-left: 0;
-  border-right: 1px solid var(--ds-color-border);
+  border-inline-start: 0;
+  border-inline-end: 1px solid var(--ds-color-border);
   transform: translateX(-100%);
 }
 
@@ -3858,14 +4111,14 @@ button.ds-tag:focus-visible {
  * ========================================================================== */
 
 .ds-drawer--bottom .ds-drawer__content {
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: auto;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  inset-block-start: auto;
   width: auto;
   max-height: 90dvh;
-  border-left: 0;
-  border-top: 1px solid var(--ds-color-border);
+  border-inline-start: 0;
+  border-block-start: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
   transform: translateY(100%);
 }
@@ -3901,7 +4154,7 @@ button.ds-tag:focus-visible {
   justify-content: space-between;
   align-items: flex-start;
   padding: var(--ds-space-4) var(--ds-space-5);
-  border-bottom: 1px solid var(--ds-color-border);
+  border-block-end: 1px solid var(--ds-color-border);
 }
 
 .ds-drawer__header h3 {
@@ -3943,6 +4196,7 @@ button.ds-tag:focus-visible {
 .ds-drawer__close:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 /* ==========================================================================
@@ -3961,7 +4215,7 @@ button.ds-tag:focus-visible {
 
 .ds-drawer__footer {
   padding: var(--ds-space-4) var(--ds-space-5);
-  border-top: 1px solid var(--ds-color-border);
+  border-block-start: 1px solid var(--ds-color-border);
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -4013,7 +4267,7 @@ button.ds-tag:focus-visible {
   justify-content: space-between;
   font-size: var(--ds-text-xs);
   color: var(--ds-color-text-tertiary);
-  margin-bottom: var(--ds-space-1-5);
+  margin-block-end: var(--ds-space-1-5);
 }
 
 /* Track */
@@ -4178,7 +4432,7 @@ button.ds-tag:focus-visible {
   height: 2rem;
   min-width: auto;
   margin-inline: 0;
-  margin-left: calc(1rem - 1px); /* center under the 2 rem indicator */
+  margin-inline-start: calc(1rem - 1px); /* center under the 2 rem indicator */
   margin-block: var(--ds-space-1);
   background-color: var(--ds-color-border-subtle);
 }
@@ -4190,6 +4444,12 @@ button.ds-tag:focus-visible {
 /* ==========================================================================
    Component: Drop Zone
    Dashed-border upload area with icon, label, hint, and progress states.
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="button" if clickable, tabindex="0" for keyboard access
+   - Label: aria-label="Upload files" or visible label via aria-labelledby
+   - Drag state: announce via aria-live="polite" region
+   - Progress: use aria-busy="true" during upload, aria-valuenow for progress
    ==========================================================================
 
    Usage:
@@ -4231,6 +4491,7 @@ button.ds-tag:focus-visible {
 .ds-drop-zone:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 :root:not(.dark) .ds-drop-zone {
@@ -4267,7 +4528,7 @@ button.ds-tag:focus-visible {
 }
 
 .ds-drop-zone:hover .ds-drop-zone__icon {
-  color: var(--ds-color-text-primary);
+  color: var(--ds-color-text);
 }
 
 /* ---------------------------------------------------------------------------
@@ -4277,13 +4538,13 @@ button.ds-tag:focus-visible {
 .ds-drop-zone__label {
   font-size: var(--ds-text-sm);
   font-weight: var(--ds-weight-medium);
-  color: var(--ds-color-text-primary);
+  color: var(--ds-color-text);
 }
 
 .ds-drop-zone__hint {
   font-size: var(--ds-text-xs);
   color: var(--ds-color-text-tertiary);
-  margin-top: calc(-1 * var(--ds-space-1));
+  margin-block-start: calc(-1 * var(--ds-space-1));
 }
 
 /* ---------------------------------------------------------------------------
@@ -4329,6 +4590,14 @@ button.ds-tag:focus-visible {
    Replaces native <select> with styled dropdown panel.
    Desktop: absolute positioned panel below trigger.
    Mobile: fullscreen overlay with header + search.
+
+   ARIA requirements (consumer responsibility):
+   - Trigger: role="combobox", aria-expanded="true|false", aria-haspopup="listbox"
+   - Trigger: aria-controls="[panel-list-id]", aria-labelledby="[label-id]"
+   - Panel list: role="listbox", id matching aria-controls
+   - Option: role="option", aria-selected="true|false"
+   - Multi-select: add aria-multiselectable="true" on listbox
+   - Keyboard: ArrowUp/Down to navigate, Enter/Space to select, Escape to close
    ========================================================================== */
 
 /* --- Wrapper --- */
@@ -4355,7 +4624,7 @@ button.ds-tag:focus-visible {
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-lg);
   cursor: pointer;
-  text-align: left;
+  text-align: start;
   transition: all var(--ds-duration-fast) var(--ds-ease-default);
 }
 
@@ -4367,6 +4636,7 @@ button.ds-tag:focus-visible {
   border-color: var(--ds-color-border-active);
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 .ds-custom-select__trigger--open {
@@ -4396,7 +4666,7 @@ button.ds-tag:focus-visible {
   flex-shrink: 0;
   width: 1rem;
   height: 1rem;
-  margin-left: var(--ds-space-2);
+  margin-inline-start: var(--ds-space-2);
   color: var(--ds-color-text-tertiary);
   transition: transform var(--ds-duration-fast) var(--ds-ease-default);
 }
@@ -4471,13 +4741,13 @@ button.ds-tag:focus-visible {
 .ds-custom-select__search {
   position: relative;
   padding: var(--ds-space-2) var(--ds-space-3);
-  border-bottom: 1px solid var(--ds-color-border);
+  border-block-end: 1px solid var(--ds-color-border);
 }
 
 .ds-custom-select__search-icon {
   position: absolute;
-  left: calc(var(--ds-space-3) + var(--ds-space-2-5));
-  top: 50%;
+  inset-inline-start: calc(var(--ds-space-3) + var(--ds-space-2-5));
+  inset-block-start: 50%;
   transform: translateY(-50%);
   width: 1rem;
   height: 1rem;
@@ -4581,7 +4851,7 @@ button.ds-tag:focus-visible {
   .ds-custom-select__panel {
     position: fixed;
     inset: 0;
-    top: auto;
+    inset-block-start: auto;
     z-index: var(--ds-z-modal);
     max-height: 85dvh;
     border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
@@ -4605,7 +4875,7 @@ button.ds-tag:focus-visible {
     align-items: center;
     justify-content: space-between;
     padding: var(--ds-space-4) var(--ds-space-4);
-    border-bottom: 1px solid var(--ds-color-border);
+    border-block-end: 1px solid var(--ds-color-border);
   }
 
   .ds-custom-select__header-title {
@@ -4645,690 +4915,1981 @@ button.ds-tag:focus-visible {
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .ds-custom-select__panel {
-    animation: none;
-    opacity: 1;
-    transform: scale(1);
-  }
-  .ds-custom-select__backdrop { animation: none; opacity: 1; }
-}
-
 /* ==========================================================================
-   Component: Sortable
-   Optional drag-to-reorder styles for table rows or list items.
-   Provides grip handle, dragging states, and drop zone indicators.
-   Works with native HTML5 Drag API or any JS drag library.
+   Multi-select mode
    ========================================================================== */
 
-/* --- Grip handle: visible on row hover, grab cursor --- */
-.ds-sortable__handle {
+/* --- Multi trigger: tags inside trigger --- */
+
+.ds-custom-select--multi .ds-custom-select__trigger {
+  height: auto;
+  min-height: var(--ds-size-3);
+  flex-wrap: wrap;
+  padding: var(--ds-space-1) var(--ds-space-4) var(--ds-space-1) var(--ds-space-2);
+  gap: var(--ds-space-1);
+}
+
+/* --- Tags container --- */
+
+.ds-custom-select__tags {
   display: flex;
+  flex-wrap: wrap;
+  gap: var(--ds-space-1);
+  flex: 1;
+  min-width: 0;
+}
+
+/* --- Single tag (based on ds-tag styling) --- */
+
+.ds-custom-select__tag {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  padding: var(--ds-space-1);
-  color: var(--ds-color-text-tertiary);
-  cursor: grab;
-  border-radius: var(--ds-radius-sm);
-  opacity: 0;
-  transition:
-    opacity var(--ds-duration-fast) var(--ds-ease-default),
-    color var(--ds-duration-fast) var(--ds-ease-default);
+  gap: var(--ds-space-1);
+  padding: var(--ds-space-0-5) var(--ds-space-1) var(--ds-space-0-5) var(--ds-space-2);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  font-family: var(--ds-font-sans);
+  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);
+  color: var(--ds-color-text-secondary);
+  white-space: nowrap;
 }
 
-.ds-sortable__handle:active {
-  cursor: grabbing;
+.ds-custom-select__tag-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+  min-height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--ds-radius-full);
+  background: transparent;
+  color: currentColor;
+  font-size: inherit;
+  line-height: var(--ds-leading-none);
+  opacity: 0.6;
+  cursor: pointer;
+  transition: opacity var(--ds-duration-fast) var(--ds-ease-out);
+  -webkit-appearance: none;
+  appearance: none;
 }
 
-/* Show handle on row hover */
-tr:hover .ds-sortable__handle,
-.ds-sortable-row:hover .ds-sortable__handle,
-.ds-sortable__handle:focus-visible {
+.ds-custom-select__tag-remove:hover {
   opacity: 1;
 }
 
-.ds-sortable__handle:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+/* --- Multi option: checkbox style indicator --- */
+
+.ds-custom-select--multi .ds-custom-select__option-check {
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-sm);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    border-color var(--ds-duration-fast) var(--ds-ease-default);
 }
 
-tr:hover .ds-sortable__handle,
-.ds-sortable-row:hover .ds-sortable__handle {
-  color: var(--ds-color-text-secondary);
+.ds-custom-select--multi .ds-custom-select__option--selected .ds-custom-select__option-check {
+  background-color: var(--ds-color-interactive);
+  border-color: var(--ds-color-interactive);
+  color: var(--ds-color-on-inverted);
 }
 
-/* --- Dragging state: applied to the row being dragged --- */
-.ds-sortable--dragging {
-  opacity: 0.5;
-  background-color: var(--ds-color-surface);
+/* --- Multi size variants --- */
+
+.ds-custom-select--xs.ds-custom-select--multi .ds-custom-select__trigger {
+  min-height: var(--ds-size-1);
+  padding: var(--ds-space-0-5) var(--ds-space-1-5) var(--ds-space-0-5) var(--ds-space-1);
 }
 
-/* --- Drop target: applied to the row being hovered over --- */
-.ds-sortable--over {
-  box-shadow: inset 0 -2px 0 var(--ds-color-interactive);
+.ds-custom-select--sm.ds-custom-select--multi .ds-custom-select__trigger {
+  min-height: var(--ds-size-2);
+  padding: var(--ds-space-0-5) var(--ds-space-2) var(--ds-space-0-5) var(--ds-space-1-5);
 }
 
-/* --- Always-visible handle variant --- */
-.ds-sortable__handle--visible {
-  opacity: 1;
+.ds-custom-select--lg.ds-custom-select--multi .ds-custom-select__trigger {
+  min-height: var(--ds-size-4);
+  padding: var(--ds-space-1) var(--ds-space-4) var(--ds-space-1) var(--ds-space-2);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .ds-custom-select__panel {
+    animation: none;
+    opacity: 1;
+    transform: scale(1);
+  }
+  .ds-custom-select__backdrop { animation: none; opacity: 1; }
+}
 
-/* === 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.
+   Component: Collapsible
+   Single collapsible section — a simplified, standalone accordion item.
 
-   Usage:
-     <div class="ds-popover ds-popover--open">
-       <button>Trigger</button>
-       <div class="ds-popover__content">...</div>
-     </div>
+   ARIA requirements (consumer responsibility):
+   - Trigger: <button> with aria-expanded="true|false"
+   - Trigger: aria-controls="[content-panel-id]"
+   - Content: id matching aria-controls
+   ========================================================================== */
 
-   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)
+/* ---------------------------------------------------------------------------
+   Container
+   --------------------------------------------------------------------------- */
+
+.ds-collapsible {
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  overflow: hidden;
+}
+
+/* ---------------------------------------------------------------------------
+   Trigger (button)
+   --------------------------------------------------------------------------- */
+
+.ds-collapsible__trigger {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: var(--ds-space-4);
+  text-align: start;
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-collapsible__trigger:hover {
+  background-color: var(--ds-color-overlay);
+}
+
+.ds-collapsible__trigger:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
+}
+
+/* ---------------------------------------------------------------------------
+   Chevron icon (CSS border-arrow)
+   --------------------------------------------------------------------------- */
+
+.ds-collapsible__icon {
+  flex-shrink: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-inline-end: 2px solid var(--ds-color-text-secondary);
+  border-block-end: 2px solid var(--ds-color-text-secondary);
+  transform: rotate(45deg);
+  margin-inline-start: var(--ds-space-3);
+  transition: transform var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-collapsible--open .ds-collapsible__icon {
+  transform: rotate(225deg);
+}
+
+/* ---------------------------------------------------------------------------
+   Collapsible content
+   --------------------------------------------------------------------------- */
+
+.ds-collapsible__content {
+  max-height: 0;
+  overflow: hidden;
+  transition:
+    max-height var(--ds-duration-normal) var(--ds-ease-default),
+    padding var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+.ds-collapsible--open .ds-collapsible__content {
+  max-height: 80rem;
+}
+
+/* ---------------------------------------------------------------------------
+   Inner body
+   --------------------------------------------------------------------------- */
+
+.ds-collapsible__body {
+  padding: var(--ds-space-4);
+  padding-block-start: 0;
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  line-height: var(--ds-leading-relaxed);
+}
+
+/* ---------------------------------------------------------------------------
+   Variant: Flush (no border, no radius)
+   --------------------------------------------------------------------------- */
+
+.ds-collapsible--flush {
+  border: 0;
+  border-radius: 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Variant: Ghost (no border, transparent bg)
+   --------------------------------------------------------------------------- */
+
+.ds-collapsible--ghost {
+  border: 0;
+  background: transparent;
+}
+
+/* ==========================================================================
+   Component: Description List
+   Key-value pairs display with horizontal and vertical layouts.
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Container
+   --------------------------------------------------------------------------- */
+
+.ds-description-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Item
+   --------------------------------------------------------------------------- */
+
+.ds-description-list__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-1);
+  padding: var(--ds-space-3) 0;
+}
+
+.ds-description-list__item:first-child {
+  padding-block-start: 0;
+}
+
+.ds-description-list__item:last-child {
+  padding-block-end: 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Term (key)
+   --------------------------------------------------------------------------- */
+
+.ds-description-list__term {
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-secondary);
+  line-height: var(--ds-leading-normal);
+}
+
+/* ---------------------------------------------------------------------------
+   Detail (value)
+   --------------------------------------------------------------------------- */
+
+.ds-description-list__detail {
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text);
+  line-height: var(--ds-leading-normal);
+}
+
+/* ---------------------------------------------------------------------------
+   Variant: Horizontal (term and detail on same row)
+   --------------------------------------------------------------------------- */
+
+.ds-description-list--horizontal .ds-description-list__item {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--ds-space-4);
+}
+
+.ds-description-list--horizontal .ds-description-list__term {
+  flex-shrink: 0;
+  min-width: 10rem;
+}
+
+.ds-description-list--horizontal .ds-description-list__detail {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Variant: Bordered (separator between items)
+   --------------------------------------------------------------------------- */
+
+.ds-description-list--bordered .ds-description-list__item {
+  border-block-end: 1px solid var(--ds-color-border);
+}
+
+.ds-description-list--bordered .ds-description-list__item:last-child {
+  border-block-end: 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Variant: Striped (alternating background)
+   --------------------------------------------------------------------------- */
+
+.ds-description-list--striped .ds-description-list__item:nth-child(odd) {
+  background-color: var(--ds-color-bg-subtle);
+  padding-inline: var(--ds-space-3);
+  border-radius: var(--ds-radius-md);
+}
+
+/* ==========================================================================
+   Component: Result
+   Feedback page for success, error, 404, empty, etc.
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Container
+   --------------------------------------------------------------------------- */
+
+.ds-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: var(--ds-space-12) var(--ds-space-6);
+  max-width: 28rem;
+  margin-inline: auto;
+}
+
+/* ---------------------------------------------------------------------------
+   Icon
+   --------------------------------------------------------------------------- */
+
+.ds-result__icon {
+  width: 3rem;
+  height: 3rem;
+  margin-block-end: var(--ds-space-4);
+  color: var(--ds-color-text-secondary);
+}
+
+/* ---------------------------------------------------------------------------
+   Title
+   --------------------------------------------------------------------------- */
+
+.ds-result__title {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-weight-semibold);
+  font-size: var(--ds-text-xl);
+  color: var(--ds-color-text);
+  line-height: var(--ds-leading-tight);
+}
+
+/* ---------------------------------------------------------------------------
+   Description
+   --------------------------------------------------------------------------- */
+
+.ds-result__description {
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  line-height: var(--ds-leading-relaxed);
+  margin-block-start: var(--ds-space-2);
+}
+
+/* ---------------------------------------------------------------------------
+   Actions
+   --------------------------------------------------------------------------- */
+
+.ds-result__actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ds-space-3);
+  margin-block-start: var(--ds-space-6);
+}
+
+/* ---------------------------------------------------------------------------
+   Semantic variants — icon color
+   --------------------------------------------------------------------------- */
+
+.ds-result--success .ds-result__icon {
+  color: var(--ds-color-success);
+}
+
+.ds-result--warning .ds-result__icon {
+  color: var(--ds-color-warning);
+}
+
+.ds-result--error .ds-result__icon {
+  color: var(--ds-color-error);
+}
+
+.ds-result--info .ds-result__icon {
+  color: var(--ds-color-info);
+}
+
+/* ==========================================================================
+   Component: Sortable
+   Optional drag-to-reorder styles for table rows or list items.
+   Provides grip handle, dragging states, and drop zone indicators.
+   Works with native HTML5 Drag API or any JS drag library.
+
+   ARIA requirements (consumer responsibility):
+   - Handle: aria-label="Reorder [item]", role="button"
+   - Draggable row: aria-grabbed="true|false" (when using HTML5 DnD)
+   - Drop target: aria-dropeffect="move"
+   - Keyboard: handle should support ArrowUp/Down + Enter to move items
+   ========================================================================== */
+
+/* --- Grip handle: visible on row hover, grab cursor --- */
+.ds-sortable__handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+  min-height: 1.5rem;
+  padding: var(--ds-space-1);
+  color: var(--ds-color-text-tertiary);
+  cursor: grab;
+  border-radius: var(--ds-radius-sm);
+  opacity: 0;
+  transition:
+    opacity var(--ds-duration-fast) var(--ds-ease-default),
+    color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-sortable__handle:active {
+  cursor: grabbing;
+}
+
+/* Show handle on row hover */
+tr:hover .ds-sortable__handle,
+.ds-sortable-row:hover .ds-sortable__handle,
+.ds-sortable__handle:focus-visible {
+  opacity: 1;
+}
+
+.ds-sortable__handle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  border-radius: var(--ds-radius-sm);
+  scroll-margin-block: var(--ds-space-16, 4rem);
+}
+
+tr:hover .ds-sortable__handle,
+.ds-sortable-row:hover .ds-sortable__handle {
+  color: var(--ds-color-text-secondary);
+}
+
+/* --- Dragging state: applied to the row being dragged --- */
+.ds-sortable--dragging {
+  opacity: 0.5;
+  background-color: var(--ds-color-surface);
+}
+
+/* --- Drop target: applied to the row being hovered over --- */
+.ds-sortable--over {
+  box-shadow: inset 0 -2px 0 var(--ds-color-interactive);
+}
+
+/* --- Always-visible handle variant --- */
+.ds-sortable__handle--visible {
+  opacity: 1;
+}
+
+
+/* === 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)
    ========================================================================== */
 
-.ds-popover {
-  position: relative;
-  display: inline-flex;
+.ds-popover {
+  position: relative;
+  display: inline-flex;
+}
+
+.ds-popover__content {
+  position: absolute;
+  z-index: var(--ds-z-dropdown);
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  box-shadow: var(--ds-shadow-lg);
+  padding: var(--ds-space-4);
+  min-width: 16rem;
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(0.96);
+  transition:
+    opacity var(--ds-duration-fast) var(--ds-ease),
+    visibility var(--ds-duration-fast) var(--ds-ease),
+    transform var(--ds-duration-fast) var(--ds-ease-out-expo);
+}
+
+/* Open state */
+.ds-popover--open .ds-popover__content {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+}
+
+/* Placement: bottom (default) */
+.ds-popover__content,
+.ds-popover--bottom .ds-popover__content {
+  inset-block-start: calc(100% + var(--ds-offset-md));
+  inset-inline-start: 50%;
+  transform: translateX(-50%) scale(0.96);
+}
+
+.ds-popover--open .ds-popover__content,
+.ds-popover--bottom.ds-popover--open .ds-popover__content {
+  transform: translateX(-50%) scale(1);
+}
+
+/* Placement: top */
+.ds-popover--top .ds-popover__content {
+  inset-block-end: calc(100% + var(--ds-offset-md));
+  inset-block-start: auto;
+  inset-inline-start: 50%;
+  transform: translateX(-50%) scale(0.96);
+}
+
+.ds-popover--top.ds-popover--open .ds-popover__content {
+  transform: translateX(-50%) scale(1);
+}
+
+/* Placement: left */
+.ds-popover--left .ds-popover__content {
+  inset-inline-end: calc(100% + var(--ds-offset-md));
+  inset-block-start: 50%;
+  inset-inline-start: auto;
+  transform: translateY(-50%) scale(0.96);
+}
+
+.ds-popover--left.ds-popover--open .ds-popover__content {
+  transform: translateY(-50%) scale(1);
+}
+
+/* Placement: right */
+.ds-popover--right .ds-popover__content {
+  inset-inline-start: calc(100% + var(--ds-offset-md));
+  inset-block-start: 50%;
+  transform: translateY(-50%) scale(0.96);
+}
+
+.ds-popover--right.ds-popover--open .ds-popover__content {
+  transform: translateY(-50%) scale(1);
+}
+
+/* Size: small */
+.ds-popover__content--sm {
+  min-width: 12rem;
+  padding: var(--ds-space-3);
+}
+
+/* Size: large */
+.ds-popover__content--lg {
+  min-width: 24rem;
+}
+
+/* ==========================================================================
+   Slider
+   ==========================================================================
+   Range slider input component with customizable thumb and track styling.
+   Supports labels, value display, size variants, and disabled state.
+
+   ARIA requirements (consumer responsibility):
+   - Use native <input type="range"> (inherits slider role)
+   - Add aria-label or aria-labelledby for context
+   - Add aria-valuemin, aria-valuemax, aria-valuenow if using custom slider
+   - Add aria-valuetext for human-readable value (e.g., "50%")
+
+   Usage:
+     <div class="ds-slider">
+       <input type="range" min="0" max="100" value="50" aria-label="Volume" />
+       <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%;
+  position: relative;
+}
+
+.ds-slider input[type="range"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 0.375rem;
+  background-color: var(--ds-color-bg-muted);
+  border-radius: var(--ds-radius-full);
+  outline: none;
+  cursor: pointer;
+}
+
+/* Webkit thumb */
+.ds-slider input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+  height: 1.5rem;
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-color-inverted);
+  border: 2px solid var(--ds-color-surface);
+  box-shadow: var(--ds-shadow-sm);
+  cursor: pointer;
+  transition: transform var(--ds-duration-fast) var(--ds-ease);
+}
+
+/* Firefox thumb */
+.ds-slider input[type="range"]::-moz-range-thumb {
+  width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+  height: 1.5rem;
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-color-inverted);
+  border: 2px solid var(--ds-color-surface);
+  box-shadow: var(--ds-shadow-sm);
+  cursor: pointer;
+  transition: transform var(--ds-duration-fast) var(--ds-ease);
+}
+
+/* Hover: scale up thumb */
+.ds-slider input[type="range"]:hover::-webkit-slider-thumb {
+  transform: scale(1.1);
+}
+
+.ds-slider input[type="range"]:hover::-moz-range-thumb {
+  transform: scale(1.1);
+}
+
+/* Focus ring */
+.ds-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: 0;
+  scroll-margin-block: var(--ds-space-16, 4rem);
+}
+
+.ds-slider input[type="range"]:focus-visible::-moz-range-thumb {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: 0;
+}
+
+/* Labels row */
+.ds-slider__labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  margin-block-start: var(--ds-space-1);
+}
+
+/* Current value display */
+.ds-slider__value {
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text);
+}
+
+/* Size: small */
+.ds-slider--sm input[type="range"] {
+  height: 0.25rem;
+}
+
+.ds-slider--sm input[type="range"]::-webkit-slider-thumb {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ds-slider--sm input[type="range"]::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Disabled state */
+.ds-slider--disabled {
+  opacity: var(--ds-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.ds-slider--disabled input[type="range"] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ==========================================================================
+   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;
+  padding-inline-start: var(--ds-space-8);
+}
+
+/* Vertical line */
+.ds-timeline::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0.9rem;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  width: 2px;
+  background-color: var(--ds-color-border);
+}
+
+/* Item */
+.ds-timeline__item {
+  position: relative;
+  padding-block-end: var(--ds-space-6);
+}
+
+.ds-timeline__item:last-child {
+  padding-block-end: 0;
+}
+
+/* Dot */
+.ds-timeline__dot {
+  position: absolute;
+  inset-inline-start: calc(-1 * var(--ds-space-8) + 0.5rem);
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-color-bg-elevated);
+  border: 2px solid var(--ds-color-border);
+  z-index: 1;
+}
+
+/* Dot state: completed */
+.ds-timeline__item--completed .ds-timeline__dot {
+  background-color: var(--ds-color-success);
+  border-color: var(--ds-color-success);
+}
+
+/* Dot state: current */
+.ds-timeline__item--current .ds-timeline__dot {
+  background-color: var(--ds-color-inverted);
+  border-color: var(--ds-color-inverted);
+}
+
+/* Dot state: error */
+.ds-timeline__item--error .ds-timeline__dot {
+  background-color: var(--ds-color-error);
+  border-color: var(--ds-color-error);
+}
+
+/* Content area */
+.ds-timeline__content {
+  /* no additional layout needed; flows naturally after the dot */
+}
+
+/* Title */
+.ds-timeline__title {
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text);
+}
+
+/* Description */
+.ds-timeline__description {
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  margin-block-start: var(--ds-space-1);
+}
+
+/* Timestamp */
+.ds-timeline__time {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  margin-block-start: var(--ds-space-0-5);
+}
+
+/* Compact variant */
+.ds-timeline--compact {
+  padding-inline-start: var(--ds-space-6);
+}
+
+.ds-timeline--compact::before {
+  inset-inline-start: 0.6rem;
+}
+
+.ds-timeline--compact .ds-timeline__item {
+  padding-block-end: var(--ds-space-4);
+}
+
+.ds-timeline--compact .ds-timeline__item:last-child {
+  padding-block-end: 0;
+}
+
+.ds-timeline--compact .ds-timeline__dot {
+  inset-inline-start: calc(-1 * var(--ds-space-6) + 0.25rem);
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* ==========================================================================
+   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;
+  align-items: center;
+  gap: var(--ds-space-1);
+  padding: var(--ds-space-0-5) var(--ds-space-1-5);
+  font-family: var(--ds-font-mono);
+  font-size: var(--ds-text-xs);
+  background-color: var(--ds-color-bg-elevated);
+  border: 1px solid var(--ds-color-border);
+  border-block-end-width: 2px;
+  border-radius: var(--ds-radius-sm);
+  color: var(--ds-color-text-secondary);
+  line-height: 1;
+  vertical-align: baseline;
+}
+
+/* Large variant */
+.ds-kbd--lg {
+  font-size: var(--ds-text-sm);
+  padding: var(--ds-space-1) var(--ds-space-2);
+}
+
+/* Key group (for combos like Cmd + K) */
+.ds-kbd-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+}
+
+/* Separator between keys */
+.ds-kbd-group__separator {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+}
+
+/* ==========================================================================
+   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.
+
+   ARIA requirements (consumer responsibility):
+   - Input: role="combobox", aria-expanded="true", aria-controls="[list-id]"
+   - Input: aria-activedescendant="[active-item-id]" for keyboard nav
+   - List: role="listbox", id matching aria-controls
+   - Items: role="option", id for aria-activedescendant
+   - Groups: role="group", aria-labelledby="[heading-id]"
+   - Overlay: role="dialog", aria-modal="true", aria-label="Command palette"
+   - Keyboard: ArrowUp/Down to navigate, Enter to select, Escape to close
+
+   Usage:
+     <div class="ds-command ds-command--open" role="dialog" aria-modal="true" aria-label="Command palette">
+       <div class="ds-command__content">
+         <div class="ds-command__input-wrapper">
+           <span class="ds-command__input-icon">...</span>
+           <input class="ds-command__input" role="combobox" placeholder="Search..." />
+         </div>
+         <div class="ds-command__list" role="listbox">
+           <div class="ds-command__group">
+             <div class="ds-command__group-heading">Results</div>
+             <div class="ds-command__item ds-command__item--active" role="option">
+               <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 {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-modal);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-block-start: 20vh;
+  background-color: var(--ds-color-overlay);
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--ds-duration-fast) var(--ds-ease),
+    visibility var(--ds-duration-fast) var(--ds-ease);
 }
 
-.ds-popover__content {
-  position: absolute;
-  z-index: var(--ds-z-dropdown);
+/* Open state */
+.ds-command--open {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Content panel */
+.ds-command__content {
   background-color: var(--ds-color-surface);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl);
   box-shadow: var(--ds-shadow-lg);
-  padding: var(--ds-space-4);
-  min-width: 16rem;
-  opacity: 0;
-  visibility: hidden;
-  transform: scale(0.96);
+  width: 100%;
+  max-width: 32rem;
+  overflow: hidden;
+  transform: scale(0.96) translateY(-8px);
   transition:
-    opacity var(--ds-duration-fast) var(--ds-ease),
-    visibility var(--ds-duration-fast) var(--ds-ease),
     transform var(--ds-duration-fast) var(--ds-ease-out-expo);
 }
 
-/* Open state */
-.ds-popover--open .ds-popover__content {
-  opacity: 1;
-  visibility: visible;
-  transform: scale(1);
+.ds-command--open .ds-command__content {
+  transform: scale(1) translateY(0);
 }
 
-/* Placement: bottom (default) */
-.ds-popover__content,
-.ds-popover--bottom .ds-popover__content {
-  top: calc(100% + var(--ds-offset-md));
-  left: 50%;
-  transform: translateX(-50%) scale(0.96);
+/* Input wrapper */
+.ds-command__input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+  padding: var(--ds-space-3) var(--ds-space-4);
+  border-block-end: 1px solid var(--ds-color-border);
 }
 
-.ds-popover--open .ds-popover__content,
-.ds-popover--bottom.ds-popover--open .ds-popover__content {
-  transform: translateX(-50%) scale(1);
+/* Search icon */
+.ds-command__input-icon {
+  color: var(--ds-color-text-tertiary);
+  flex-shrink: 0;
 }
 
-/* Placement: top */
-.ds-popover--top .ds-popover__content {
-  bottom: calc(100% + var(--ds-offset-md));
-  top: auto;
-  left: 50%;
-  transform: translateX(-50%) scale(0.96);
+/* Search input */
+.ds-command__input {
+  flex: 1;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  font-size: var(--ds-text-base);
+  color: var(--ds-color-text);
+  font-family: var(--ds-font-sans);
 }
 
-.ds-popover--top.ds-popover--open .ds-popover__content {
-  transform: translateX(-50%) scale(1);
+.ds-command__input::placeholder {
+  color: var(--ds-color-text-tertiary);
 }
 
-/* Placement: left */
-.ds-popover--left .ds-popover__content {
-  right: calc(100% + var(--ds-offset-md));
-  top: 50%;
-  left: auto;
-  transform: translateY(-50%) scale(0.96);
+/* Results list */
+.ds-command__list {
+  max-height: 20rem;
+  overflow-y: auto;
+  padding: var(--ds-space-2);
 }
 
-.ds-popover--left.ds-popover--open .ds-popover__content {
-  transform: translateY(-50%) scale(1);
+/* Group of results */
+.ds-command__group {
+  /* structural grouping — no additional visual styles needed */
 }
 
-/* Placement: right */
-.ds-popover--right .ds-popover__content {
-  left: calc(100% + var(--ds-offset-md));
-  top: 50%;
-  transform: translateY(-50%) scale(0.96);
+/* Group heading */
+.ds-command__group-heading {
+  font-size: var(--ds-text-xs);
+  text-transform: uppercase;
+  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);
+}
+
+/* Individual item */
+.ds-command__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+  padding: var(--ds-space-2-5) var(--ds-space-3);
+  border-radius: var(--ds-radius-lg);
+  cursor: pointer;
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease),
+    color var(--ds-duration-fast) var(--ds-ease);
+}
+
+/* Item hover & active states */
+.ds-command__item:hover,
+.ds-command__item--active {
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+}
+.ds-command__item:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
+}
+
+/* Item icon */
+.ds-command__item-icon {
+  flex-shrink: 0;
+  color: var(--ds-color-text-tertiary);
+}
+
+/* Item label */
+.ds-command__item-label {
+  flex: 1;
+}
+
+/* Item shortcut hint */
+.ds-command__item-shortcut {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  flex-shrink: 0;
+}
+
+/* Empty state */
+.ds-command__empty {
+  padding: var(--ds-space-8);
+  text-align: center;
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-tertiary);
+}
+
+/* Footer */
+.ds-command__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-4);
+  padding: var(--ds-space-2) var(--ds-space-3);
+  border-block-start: 1px solid var(--ds-color-border);
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+}
+
+/* ==========================================================================
+   Component: Search
+   Inline search bar with dropdown results, keyboard navigation, and
+   responsive mobile expansion. Distinct from ds-command (modal overlay).
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="search" on wrapper or parent <form>
+   - Input: role="combobox", aria-expanded="true|false", aria-controls="[list-id]"
+   - Dropdown: role="listbox" with id matching aria-controls
+   - Results: role="option", aria-selected="true" on active result
+   - Clear button: aria-label="Clear search"
+   - Keyboard: ArrowUp/Down to navigate, Enter to select, Escape to close
+
+   Usage:
+     <div class="ds-search" role="search">
+       <span class="ds-search__icon">...</span>
+       <input class="ds-search__input" placeholder="Search..." />
+       <kbd class="ds-search__shortcut">Ctrl+K</kbd>
+       <button class="ds-search__clear" aria-label="Clear search">...</button>
+     </div>
+
+   Modifiers:
+     .ds-search--mobile-expanded  — Fullscreen bar on mobile
+     .ds-search__dropdown--mobile — Fullscreen dropdown on mobile
+
+   Mobile:
+     .ds-search-mobile-trigger    — Icon button shown on mobile (hidden desktop)
+     .ds-search__close            — Close button inside expanded mobile bar
+   ========================================================================== */
+
+.ds-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  width: 100%;
+  padding: var(--ds-space-2) var(--ds-space-2-5);
+  background: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-lg);
+  transition:
+    border-color var(--ds-duration-fast) var(--ds-ease-default),
+    box-shadow var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-search:focus-within {
+  border-color: var(--ds-color-border-active);
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+
+/* Icon */
+.ds-search__icon {
+  color: var(--ds-color-text-tertiary);
+  flex-shrink: 0;
+}
+
+/* Input */
+.ds-search__input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--ds-color-text);
+  font-size: var(--ds-text-base);
+  font-family: inherit;
+  line-height: 1.25;
+}
+
+.ds-search__input::placeholder {
+  color: var(--ds-color-text-tertiary);
+}
+
+/* Keyboard shortcut hint */
+.ds-search__shortcut {
+  flex-shrink: 0;
+  padding: 0.125rem 0.375rem;
+  font-size: var(--ds-text-2xs);
+  font-family: inherit;
+  line-height: 1;
+  color: var(--ds-color-text-tertiary);
+  background: var(--ds-color-bg-elevated);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-sm);
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Clear button */
+.ds-search__clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+  min-height: 1.5rem;
+  border: none;
+  border-radius: var(--ds-radius-sm);
+  background: transparent;
+  color: var(--ds-color-text-tertiary);
+  cursor: pointer;
+  transition:
+    color var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-search__clear:hover {
+  background: var(--ds-color-surface-hover);
+  color: var(--ds-color-text-secondary);
+}
+
+/* Dropdown results panel */
+.ds-search__dropdown {
+  position: fixed;
+  max-height: min(22rem, calc(100dvh - 5rem));
+  overflow-y: auto;
+  background: var(--ds-color-bg-elevated);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-lg);
+  box-shadow: var(--ds-shadow-lg);
+  z-index: var(--ds-z-tooltip);
+  padding: var(--ds-space-1) 0;
 }
 
-.ds-popover--right.ds-popover--open .ds-popover__content {
-  transform: translateY(-50%) scale(1);
+/* Result groups */
+.ds-search__group {
+  padding: var(--ds-space-1) 0;
 }
 
-/* Size: small */
-.ds-popover__content--sm {
-  min-width: 12rem;
-  padding: var(--ds-space-3);
+.ds-search__group + .ds-search__group {
+  border-block-start: 1px solid var(--ds-color-border);
 }
 
-/* Size: large */
-.ds-popover__content--lg {
-  min-width: 24rem;
+.ds-search__group-label {
+  display: block;
+  padding: var(--ds-space-1) var(--ds-space-3);
+  font-size: var(--ds-text-2xs);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
-/* ==========================================================================
-   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 {
+/* Individual result */
+.ds-search__result {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-2);
   width: 100%;
-  position: relative;
+  padding: var(--ds-space-2-5) var(--ds-space-3);
+  border: none;
+  background: transparent;
+  color: var(--ds-color-text);
+  font-size: var(--ds-text-sm);
+  font-family: inherit;
+  text-align: start;
+  cursor: pointer;
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
 }
 
-.ds-slider input[type="range"] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  width: 100%;
-  height: 0.375rem;
-  background-color: var(--ds-color-bg-muted);
-  border-radius: var(--ds-radius-full);
-  outline: none;
-  cursor: pointer;
+.ds-search__result:hover,
+.ds-search__result--active {
+  background: var(--ds-color-surface-hover);
 }
 
-/* Webkit thumb */
-.ds-slider input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: var(--ds-radius-full);
-  background-color: var(--ds-color-inverted);
-  border: 2px solid var(--ds-color-surface);
-  box-shadow: var(--ds-shadow-sm);
-  cursor: pointer;
-  transition: transform var(--ds-duration-fast) var(--ds-ease);
+.ds-search__result:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
-/* Firefox thumb */
-.ds-slider input[type="range"]::-moz-range-thumb {
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: var(--ds-radius-full);
-  background-color: var(--ds-color-inverted);
-  border: 2px solid var(--ds-color-surface);
-  box-shadow: var(--ds-shadow-sm);
-  cursor: pointer;
-  transition: transform var(--ds-duration-fast) var(--ds-ease);
+.ds-search__result-icon {
+  color: var(--ds-color-text-tertiary);
+  flex-shrink: 0;
 }
 
-/* Hover: scale up thumb */
-.ds-slider input[type="range"]:hover::-webkit-slider-thumb {
-  transform: scale(1.1);
+.ds-search__result-db-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--ds-radius-md);
+  flex-shrink: 0;
 }
 
-.ds-slider input[type="range"]:hover::-moz-range-thumb {
-  transform: scale(1.1);
+.ds-search__result-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
 }
 
-/* Focus ring */
-.ds-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: 0;
+.ds-search__result-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  line-height: var(--ds-leading-snug);
 }
 
-.ds-slider input[type="range"]:focus-visible::-moz-range-thumb {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: 0;
+.ds-search__result-meta {
+  font-size: var(--ds-text-2xs);
+  line-height: var(--ds-leading-snug);
+  color: var(--ds-color-text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-/* Labels row */
-.ds-slider__labels {
+/* Empty state */
+.ds-search__empty {
   display: flex;
-  justify-content: space-between;
-  font-size: var(--ds-text-xs);
+  align-items: center;
+  justify-content: center;
+  padding: var(--ds-space-4) var(--ds-space-2);
   color: var(--ds-color-text-tertiary);
-  margin-top: var(--ds-space-1);
+  font-size: var(--ds-text-sm);
 }
 
-/* Current value display */
-.ds-slider__value {
-  font-size: var(--ds-text-sm);
-  font-weight: var(--ds-weight-medium);
+/* Mobile trigger (hidden on desktop) */
+.ds-search-mobile-trigger {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: none;
+  border-radius: var(--ds-radius-md);
+  background: transparent;
   color: var(--ds-color-text);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
 }
 
-/* Size: small */
-.ds-slider--sm input[type="range"] {
-  height: 0.25rem;
+@media (hover: hover) {
+  .ds-search-mobile-trigger:hover {
+    background-color: var(--ds-color-surface-hover);
+  }
 }
 
-.ds-slider--sm input[type="range"]::-webkit-slider-thumb {
-  width: 1rem;
-  height: 1rem;
+/* Close button (mobile expanded) */
+.ds-search__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: none;
+  border-radius: var(--ds-radius-md);
+  background: transparent;
+  color: var(--ds-color-text);
+  cursor: pointer;
+  flex-shrink: 0;
 }
 
-.ds-slider--sm input[type="range"]::-moz-range-thumb {
-  width: 1rem;
-  height: 1rem;
-}
+/* Responsive: mobile */
+@media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
+  .ds-search__shortcut { display: none; }
+  .ds-search-mobile-trigger { display: flex; }
+  .ds-search { display: none; }
 
-/* Disabled state */
-.ds-slider--disabled {
-  opacity: var(--ds-opacity-disabled);
-  cursor: not-allowed;
-}
+  .ds-search--mobile-expanded {
+    display: flex;
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    height: var(--ds-search-bar-height, 3.5rem);
+    z-index: var(--ds-z-dropdown);
+    border: none;
+    border-block-end: 1px solid var(--ds-color-border);
+    border-radius: 0;
+    padding: 0 var(--ds-space-3);
+    background: var(--ds-color-nav-bg);
+    backdrop-filter: blur(20px) saturate(1.5);
+    -webkit-backdrop-filter: blur(20px) saturate(1.5);
+  }
 
-.ds-slider--disabled input[type="range"] {
-  cursor: not-allowed;
-  pointer-events: none;
+  .ds-search__dropdown--mobile {
+    inset-inline-start: 0 !important;
+    inset-inline-end: 0;
+    width: auto !important;
+    border-radius: 0;
+    border-inline-start: none;
+    border-inline-end: none;
+    max-height: calc(100dvh - var(--ds-search-bar-height, 3.5rem));
+    background: var(--ds-color-surface);
+    backdrop-filter: blur(20px) saturate(1.5);
+    -webkit-backdrop-filter: blur(20px) saturate(1.5);
+  }
 }
 
 /* ==========================================================================
-   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.
+   Component: Toolbar
+   Fixed bar with rows of actions: toolbar buttons, filter chips, segmented
+   controls, and scrollable groups. Common in data-heavy UIs below a header.
 
    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 class="ds-toolbar">
+       <div class="ds-toolbar__row">
+         <div class="ds-toolbar__group">...</div>
+         <div class="ds-toolbar__spacer"></div>
+         <div class="ds-toolbar__group">
+           <button class="ds-toolbar__btn ds-toolbar__btn--active">
+             <span>Filter</span>
+             <span class="ds-toolbar__badge">3</span>
+           </button>
+           <button class="ds-toolbar__btn">Sort</button>
          </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-toolbar__row--scroll      — Horizontally scrollable row
+     .ds-toolbar__btn--active      — Active/toggled button
+     .ds-toolbar__group--scroll    — Scrollable group within a row
+
+   Segmented control:
+     <div class="ds-toolbar__segmented">
+       <button class="ds-toolbar__segmented-btn ds-toolbar__segmented-btn--active">Past</button>
+       <button class="ds-toolbar__segmented-btn">Future</button>
+     </div>
    ========================================================================== */
 
-.ds-timeline {
-  position: relative;
-  padding-left: var(--ds-space-8);
+/* Row container */
+.ds-toolbar__row {
+  display: flex;
+  align-items: center;
+  height: var(--ds-toolbar-row-height, 2.5rem);
+  gap: var(--ds-space-3);
+  padding-inline: var(--ds-space-4);
 }
 
-/* Vertical line */
-.ds-timeline::before {
-  content: "";
-  position: absolute;
-  left: 0.9rem;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background-color: var(--ds-color-border);
+.ds-toolbar__row--scroll {
+  overflow-x: auto;
+  scrollbar-width: none;
 }
 
-/* Item */
-.ds-timeline__item {
-  position: relative;
-  padding-bottom: var(--ds-space-6);
+.ds-toolbar__row--scroll::-webkit-scrollbar { display: none; }
+
+/* Group (flex row of items) */
+.ds-toolbar__group {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
-.ds-timeline__item:last-child {
-  padding-bottom: 0;
+.ds-toolbar__group--scroll {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
 }
 
-/* Dot */
-.ds-timeline__dot {
-  position: absolute;
-  left: calc(-1 * var(--ds-space-8) + 0.5rem);
-  width: 1rem;
-  height: 1rem;
-  border-radius: var(--ds-radius-full);
-  background-color: var(--ds-color-bg-elevated);
-  border: 2px solid var(--ds-color-border);
-  z-index: 1;
+.ds-toolbar__group--scroll::-webkit-scrollbar { display: none; }
+
+/* Spacer */
+.ds-toolbar__spacer {
+  flex: 1 1 0;
 }
 
-/* Dot state: completed */
-.ds-timeline__item--completed .ds-timeline__dot {
-  background-color: var(--ds-color-success);
-  border-color: var(--ds-color-success);
+/* Toolbar button */
+.ds-toolbar__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1-5);
+  padding: var(--ds-space-1) var(--ds-space-2-5);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  font-family: inherit;
+  color: var(--ds-color-text-tertiary);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--ds-radius-md);
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    color var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    border-color var(--ds-duration-fast) var(--ds-ease-default);
 }
 
-/* Dot state: current */
-.ds-timeline__item--current .ds-timeline__dot {
-  background-color: var(--ds-color-inverted);
-  border-color: var(--ds-color-inverted);
+.ds-toolbar__btn:hover {
+  color: var(--ds-color-text-secondary);
+  background: var(--ds-color-surface-hover);
+}
+
+.ds-toolbar__btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+
+.ds-toolbar__btn--active {
+  color: var(--ds-color-text);
+  background: var(--ds-color-surface);
+  border-color: var(--ds-color-border);
 }
 
-/* Dot state: error */
-.ds-timeline__item--error .ds-timeline__dot {
-  background-color: var(--ds-color-error);
-  border-color: var(--ds-color-error);
+/* Badge (count indicator inside button) */
+.ds-toolbar__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--ds-color-on-inverted);
+  background: var(--ds-color-interactive);
+  border-radius: var(--ds-radius-full);
 }
 
-/* Content area */
-.ds-timeline__content {
-  /* no additional layout needed; flows naturally after the dot */
+/* Eye toggle (visibility) */
+.ds-toolbar__eye {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity var(--ds-duration-fast) var(--ds-ease-default);
 }
 
-/* Title */
-.ds-timeline__title {
-  font-size: var(--ds-text-sm);
-  font-weight: var(--ds-weight-medium);
-  color: var(--ds-color-text);
+.ds-toolbar__eye:hover {
+  opacity: 1;
 }
 
-/* Description */
-.ds-timeline__description {
-  font-size: var(--ds-text-sm);
-  color: var(--ds-color-text-secondary);
-  margin-top: var(--ds-space-1);
+/* Segmented control */
+.ds-toolbar__segmented {
+  flex-shrink: 0;
+  display: flex;
+  background: var(--ds-color-surface);
+  border-radius: var(--ds-radius-md);
+  padding: 2px;
 }
 
-/* Timestamp */
-.ds-timeline__time {
+.ds-toolbar__segmented-btn {
+  padding: var(--ds-space-1) var(--ds-space-3);
   font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
   color: var(--ds-color-text-tertiary);
-  margin-top: var(--ds-space-0-5);
+  border: none;
+  border-radius: var(--ds-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  transition:
+    color var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default);
 }
 
-/* Compact variant */
-.ds-timeline--compact {
-  padding-left: var(--ds-space-6);
+.ds-toolbar__segmented-btn:hover {
+  color: var(--ds-color-text-secondary);
 }
 
-.ds-timeline--compact::before {
-  left: 0.6rem;
+.ds-toolbar__segmented-btn--active {
+  background: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
 }
 
-.ds-timeline--compact .ds-timeline__item {
-  padding-bottom: var(--ds-space-4);
-}
+/* Responsive: mobile */
+@media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
+  .ds-toolbar__row {
+    padding-inline: var(--ds-space-3);
+    gap: var(--ds-space-2);
+  }
 
-.ds-timeline--compact .ds-timeline__item:last-child {
-  padding-bottom: 0;
-}
+  .ds-toolbar__btn-label { display: none; }
 
-.ds-timeline--compact .ds-timeline__dot {
-  left: calc(-1 * var(--ds-space-6) + 0.25rem);
-  width: 0.75rem;
-  height: 0.75rem;
+  .ds-toolbar__btn {
+    padding: var(--ds-space-2);
+    min-width: var(--ds-size-2);
+    min-height: var(--ds-size-2);
+    justify-content: center;
+  }
+
+  .ds-toolbar__badge {
+    font-size: 0.5rem;
+    min-width: 0.875rem;
+    height: 0.875rem;
+  }
 }
 
 /* ==========================================================================
-   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".
+   Component: Chip
+   Interactive filter/sort chips with optional remove button. Distinct from
+   ds-tag (which is a static label). Chips represent active filter state.
 
-   Usage:
-     <kbd class="ds-kbd">Esc</kbd>
+   ARIA requirements (consumer responsibility):
+   - Remove button: add aria-label="Remove [filter name]"
+   - Logic chip (AND/OR): use aria-pressed="true|false" on <button>
+   - Chip group: wrap in role="group" with aria-label="Active filters"
 
-     <span class="ds-kbd-group">
-       <kbd class="ds-kbd">Cmd</kbd>
-       <span class="ds-kbd-group__separator">+</span>
-       <kbd class="ds-kbd">K</kbd>
+   Usage:
+     <span class="ds-chip">
+       Status: Active
+       <button class="ds-chip__remove" aria-label="Remove Status filter">×</button>
      </span>
+     <button class="ds-chip ds-chip--logic">AND</button>
+     <span class="ds-chip ds-chip--sort">Date ↑</span>
 
    Modifiers:
-     .ds-kbd--lg  — Larger key display
+     .ds-chip--logic  — AND/OR toggle chip (clickable, no bg)
+     .ds-chip--sort   — Sort indicator (dashed border)
    ========================================================================== */
 
-.ds-kbd {
+.ds-chip {
   display: inline-flex;
   align-items: center;
   gap: var(--ds-space-1);
-  padding: var(--ds-space-0-5) var(--ds-space-1-5);
-  font-family: var(--ds-font-mono);
+  padding: var(--ds-space-0-5) var(--ds-space-2);
   font-size: var(--ds-text-xs);
-  background-color: var(--ds-color-bg-elevated);
-  border: 1px solid var(--ds-color-border);
-  border-bottom-width: 2px;
-  border-radius: var(--ds-radius-sm);
+  font-family: inherit;
   color: var(--ds-color-text-secondary);
-  line-height: 1;
-  vertical-align: baseline;
+  background: var(--ds-color-bg-elevated);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-full);
+  white-space: nowrap;
 }
 
-/* Large variant */
-.ds-kbd--lg {
-  font-size: var(--ds-text-sm);
-  padding: var(--ds-space-1) var(--ds-space-2);
+/* Logic chip (AND/OR toggle) */
+.ds-chip--logic {
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--ds-color-text-tertiary);
+  background: transparent;
+  border-color: var(--ds-color-border);
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
 }
 
-/* Key group (for combos like Cmd + K) */
-.ds-kbd-group {
+.ds-chip--logic:hover {
+  background: var(--ds-color-overlay-hover);
+}
+
+/* Sort chip (dashed border) */
+.ds-chip--sort {
+  border-style: dashed;
+}
+
+/* Remove button */
+.ds-chip__remove {
   display: inline-flex;
   align-items: center;
-  gap: var(--ds-space-1);
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+  min-height: 1.5rem;
+  border: none;
+  border-radius: var(--ds-radius-full);
+  background: transparent;
+  color: var(--ds-color-text-tertiary);
+  cursor: pointer;
+  transition:
+    color var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default);
 }
 
-/* Separator between keys */
-.ds-kbd-group__separator {
-  font-size: var(--ds-text-xs);
-  color: var(--ds-color-text-tertiary);
+.ds-chip__remove:hover {
+  color: var(--ds-color-text);
+  background: var(--ds-color-overlay-hover);
 }
 
 /* ==========================================================================
-   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.
+   Component: Icon Button
+   Standalone icon button for actions, toolbar items, and table rows.
+   A minimal interactive element that wraps a single icon.
+
+   ARIA requirements (consumer responsibility):
+   - Always add aria-label="[action]" (e.g., aria-label="Delete")
+   - Disabled: add aria-disabled="true"
+   - Toggle: use aria-pressed="true|false" for toggle icon buttons
 
    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>
+     <button class="ds-icon-btn" aria-label="Delete">
+       <svg>...</svg>
+     </button>
+     <button class="ds-icon-btn ds-icon-btn--sm" aria-label="Edit">...</button>
+     <button class="ds-icon-btn ds-icon-btn--danger" aria-label="Remove">...</button>
+
+   Sizes:
+     .ds-icon-btn--xs  — 24px (var(--ds-size-1))
+     .ds-icon-btn--sm  — 28px
+     (default)         — 32px (var(--ds-size-2))
+     .ds-icon-btn--lg  — 40px (var(--ds-size-3))
 
    Modifiers:
-     .ds-command--open  — Shows the command palette
+     .ds-icon-btn--danger  — Error color on hover
+     .ds-icon-btn--ghost   — No background change, color-only transition
    ========================================================================== */
 
-/* Overlay */
-.ds-command {
-  position: fixed;
-  inset: 0;
-  z-index: var(--ds-z-modal);
-  display: flex;
-  align-items: flex-start;
+.ds-icon-btn {
+  display: inline-flex;
+  align-items: center;
   justify-content: center;
-  padding-top: 20vh;
-  background-color: var(--ds-color-overlay);
-  opacity: 0;
-  visibility: hidden;
+  width: var(--ds-size-2);
+  height: var(--ds-size-2);
+  padding: var(--ds-space-1-5);
+  border: none;
+  border-radius: var(--ds-radius-lg);
+  background: transparent;
+  color: var(--ds-color-text-tertiary);
+  cursor: pointer;
+  flex-shrink: 0;
   transition:
-    opacity var(--ds-duration-fast) var(--ds-ease),
-    visibility var(--ds-duration-fast) var(--ds-ease);
+    color var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default);
 }
 
-/* Open state */
-.ds-command--open {
-  opacity: 1;
-  visibility: visible;
+.ds-icon-btn:hover {
+  background-color: var(--ds-color-surface-hover);
+  color: var(--ds-color-text-secondary);
 }
 
-/* Content panel */
-.ds-command__content {
-  background-color: var(--ds-color-surface);
-  border: 1px solid var(--ds-color-border);
-  border-radius: var(--ds-radius-xl);
-  box-shadow: var(--ds-shadow-lg);
-  width: 100%;
-  max-width: 32rem;
-  overflow: hidden;
-  transform: scale(0.96) translateY(-8px);
-  transition:
-    transform var(--ds-duration-fast) var(--ds-ease-out-expo);
+.ds-icon-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
-.ds-command--open .ds-command__content {
-  transform: scale(1) translateY(0);
+.ds-icon-btn:disabled,
+.ds-icon-btn[aria-disabled="true"] {
+  opacity: var(--ds-opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
-/* Input wrapper */
-.ds-command__input-wrapper {
-  display: flex;
-  align-items: center;
-  gap: var(--ds-space-3);
-  padding: var(--ds-space-3) var(--ds-space-4);
-  border-bottom: 1px solid var(--ds-color-border);
+/* Sizes */
+.ds-icon-btn--xs {
+  width: var(--ds-size-1);
+  height: var(--ds-size-1);
+  padding: var(--ds-space-0-5);
+  border-radius: var(--ds-radius-md);
 }
 
-/* Search icon */
-.ds-command__input-icon {
-  color: var(--ds-color-text-tertiary);
-  flex-shrink: 0;
+.ds-icon-btn--sm {
+  width: var(--ds-size-2);
+  height: var(--ds-size-2);
+  padding: var(--ds-space-1-5);
+  border-radius: var(--ds-radius-md);
 }
 
-/* Search input */
-.ds-command__input {
+.ds-icon-btn--lg {
+  width: var(--ds-size-3);
+  height: var(--ds-size-3);
+  padding: var(--ds-space-2);
+}
+
+/* Danger variant */
+.ds-icon-btn--danger:hover {
+  color: var(--ds-color-error);
+  background-color: color-mix(in srgb, var(--ds-color-error) 10%, transparent);
+}
+
+/* Ghost variant (color only, no bg) */
+.ds-icon-btn--ghost {
+  padding: 0;
+  width: auto;
+  height: auto;
+}
+
+.ds-icon-btn--ghost:hover {
+  background: transparent;
+  color: var(--ds-color-text);
+}
+
+/* ==========================================================================
+   Component: Bottom Nav
+   Mobile bottom navigation bar. Hidden on desktop, shown on mobile.
+   Fixed to bottom with safe-area insets for notched devices.
+
+   ARIA requirements (consumer responsibility):
+   - Container: <nav aria-label="Bottom navigation">
+   - Active item: aria-current="page" on the current tab
+   - Badge: aria-label on badge parent (e.g., "Home, 3 notifications")
+   - Create button: aria-label="Create new"
+
+   Usage:
+     <nav class="ds-bottom-nav" aria-label="Bottom navigation">
+       <a href="/" class="ds-bottom-nav__item ds-bottom-nav__item--active" aria-current="page">
+         <span class="ds-bottom-nav__icon">
+           <svg>...</svg>
+           <span class="ds-bottom-nav__badge">3</span>
+         </span>
+         <span class="ds-bottom-nav__label">Home</span>
+       </a>
+       <button class="ds-bottom-nav__item ds-bottom-nav__item--create" aria-label="Create new">
+         <span class="ds-bottom-nav__create-icon">+</span>
+         <span class="ds-bottom-nav__label">New</span>
+       </button>
+     </nav>
+
+   Modifiers:
+     .ds-bottom-nav__item--active  — Active/current tab
+     .ds-bottom-nav__item--create  — Elevated center action button
+   ========================================================================== */
+
+.ds-bottom-nav {
+  display: none;
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  z-index: var(--ds-z-dropdown);
+  background: var(--ds-color-surface);
+  border-block-start: 1px solid var(--ds-color-border);
+  padding-block-end: env(safe-area-inset-bottom, 0px);
+}
+
+@media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
+  .ds-bottom-nav {
+    display: flex;
+    justify-content: space-around;
+    align-items: stretch;
+  }
+}
+
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
+  .ds-bottom-nav { display: none !important; }
+}
+
+/* Nav item */
+.ds-bottom-nav__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ds-space-1);
   flex: 1;
-  background-color: transparent;
+  padding: var(--ds-space-2) 0;
+  color: var(--ds-color-text-tertiary);
+  text-decoration: none;
   border: none;
-  outline: none;
-  font-size: var(--ds-text-base);
-  color: var(--ds-color-text);
-  font-family: var(--ds-font-sans);
+  background: none;
+  cursor: pointer;
+  font: inherit;
+  transition: color var(--ds-duration-fast) var(--ds-ease-default);
+  -webkit-tap-highlight-color: transparent;
 }
 
-.ds-command__input::placeholder {
-  color: var(--ds-color-text-tertiary);
+.ds-bottom-nav__item--active {
+  color: var(--ds-color-text);
 }
 
-/* Results list */
-.ds-command__list {
-  max-height: 20rem;
-  overflow-y: auto;
-  padding: var(--ds-space-2);
+/* Icon wrapper */
+.ds-bottom-nav__icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-/* Group of results */
-.ds-command__group {
-  /* structural grouping — no additional visual styles needed */
+/* Notification badge */
+.ds-bottom-nav__badge {
+  position: absolute;
+  inset-block-start: calc(-1 * var(--ds-space-1));
+  inset-inline-end: calc(-1 * var(--ds-space-2));
+  min-width: var(--ds-space-4);
+  height: var(--ds-space-4);
+  padding: 0 var(--ds-space-1);
+  border-radius: var(--ds-radius-full);
+  background: var(--ds-color-error);
+  color: var(--ds-color-on-inverted);
+  font-size: var(--ds-text-2xs);
+  font-weight: var(--ds-weight-semibold);
+  line-height: var(--ds-space-4);
+  text-align: center;
 }
 
-/* Group heading */
-.ds-command__group-heading {
-  font-size: var(--ds-text-xs);
-  text-transform: uppercase;
-  letter-spacing: var(--ds-tracking-wide);
-  color: var(--ds-color-text-tertiary);
-  padding: var(--ds-space-2) var(--ds-space-3);
+/* Label */
+.ds-bottom-nav__label {
+  font-size: var(--ds-text-2xs);
   font-weight: var(--ds-weight-medium);
+  letter-spacing: var(--ds-tracking-wide);
 }
 
-/* Individual item */
-.ds-command__item {
+/* Create button — elevated center icon */
+.ds-bottom-nav__create-icon {
   display: flex;
   align-items: center;
-  gap: var(--ds-space-3);
-  padding: var(--ds-space-2-5) var(--ds-space-3);
-  border-radius: var(--ds-radius-lg);
-  cursor: pointer;
-  font-size: var(--ds-text-sm);
-  color: var(--ds-color-text-secondary);
-  transition:
-    background-color var(--ds-duration-fast) var(--ds-ease),
-    color var(--ds-duration-fast) var(--ds-ease);
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: var(--ds-radius-full);
+  background: var(--ds-color-text);
+  color: var(--ds-color-bg-base);
 }
 
-/* Item hover & active states */
-.ds-command__item:hover,
-.ds-command__item--active {
-  background-color: var(--ds-color-bg-elevated);
-  color: var(--ds-color-text);
+.ds-bottom-nav__item--create {
+  color: var(--ds-color-text-tertiary);
 }
-.ds-command__item:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+
+/* ==========================================================================
+   Component: Spinner
+   CSS-only loading spinner using border animation.
+
+   Usage:
+     <span class="ds-spinner"></span>
+     <span class="ds-spinner ds-spinner--sm"></span>
+     <span class="ds-spinner ds-spinner--muted"></span>
+
+   Sizes:
+     .ds-spinner--sm  — 1.25rem (20px)
+     (default)        — 1.5rem (24px)
+     .ds-spinner--lg  — 2rem (32px)
+
+   Variants:
+     (default)          — Border + interactive top
+     .ds-spinner--muted — Inverted colors (for dark backgrounds)
+     .ds-spinner--light — Light colors (for inverted/colored backgrounds)
+   ========================================================================== */
+
+.ds-spinner {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--ds-color-border);
+  border-top-color: var(--ds-color-interactive);
+  border-radius: var(--ds-radius-full);
+  animation: ds-spin 0.8s linear infinite;
 }
 
-/* Item icon */
-.ds-command__item-icon {
-  flex-shrink: 0;
-  color: var(--ds-color-text-tertiary);
+@keyframes ds-spin {
+  to { transform: rotate(360deg); }
 }
 
-/* Item label */
-.ds-command__item-label {
-  flex: 1;
+/* Sizes */
+.ds-spinner--sm {
+  width: 1rem;
+  height: 1rem;
 }
 
-/* Item shortcut hint */
-.ds-command__item-shortcut {
-  font-size: var(--ds-text-xs);
-  color: var(--ds-color-text-tertiary);
-  flex-shrink: 0;
+.ds-spinner--md {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
-/* Empty state */
-.ds-command__empty {
-  padding: var(--ds-space-8);
-  text-align: center;
-  font-size: var(--ds-text-sm);
-  color: var(--ds-color-text-tertiary);
+.ds-spinner--lg {
+  width: 2rem;
+  height: 2rem;
 }
 
-/* Footer */
-.ds-command__footer {
-  display: flex;
-  align-items: center;
-  gap: var(--ds-space-4);
-  padding: var(--ds-space-2) var(--ds-space-3);
-  border-top: 1px solid var(--ds-color-border);
-  font-size: var(--ds-text-xs);
-  color: var(--ds-color-text-tertiary);
+/* Color variants */
+.ds-spinner--muted {
+  border-color: var(--ds-color-inverted);
+  border-top-color: transparent;
 }
 
+.ds-spinner--light {
+  border-color: var(--ds-color-on-inverted);
+  border-top-color: transparent;
+}
 
+
+}
+@layer utilities {
 /* ==========================================================================
    Utilities: Layout
    Container with clamp padding, generous responsive grid.
@@ -5409,7 +6970,7 @@ tr:hover .ds-sortable__handle,
   .ds-md\:flex-row { flex-direction: row; }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
   .ds-lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
   .ds-lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
   .ds-lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@@ -5448,7 +7009,7 @@ tr:hover .ds-sortable__handle,
 .ds-relative { position: relative; }
 .ds-absolute { position: absolute; }
 .ds-fixed    { position: fixed; }
-.ds-sticky   { position: sticky; top: 0; }
+.ds-sticky   { position: sticky; inset-block-start: 0; }
 
 /* --- Overflow --- */
 .ds-overflow-hidden { overflow: hidden; }
@@ -5464,14 +7025,14 @@ tr:hover .ds-sortable__handle,
 /* --- Stack (vertical spacing) ---
    :where() lowers specificity so ds-mt-* can override individual children. */
 :where(.ds-stack) > * + * {
-  margin-top: var(--ds-space-4);
+  margin-block-start: var(--ds-space-4);
 }
 
-:where(.ds-stack--sm) > * + *  { margin-top: var(--ds-space-2); }
-:where(.ds-stack--lg) > * + *  { margin-top: var(--ds-space-8); }
-:where(.ds-stack--xl) > * + *  { margin-top: var(--ds-space-12); }
-:where(.ds-stack--2xl) > * + * { margin-top: var(--ds-space-16); }
-:where(.ds-stack--3xl) > * + * { margin-top: var(--ds-space-24); }
+:where(.ds-stack--sm) > * + *  { margin-block-start: var(--ds-space-2); }
+:where(.ds-stack--lg) > * + *  { margin-block-start: var(--ds-space-8); }
+:where(.ds-stack--xl) > * + *  { margin-block-start: var(--ds-space-12); }
+:where(.ds-stack--2xl) > * + * { margin-block-start: var(--ds-space-16); }
+:where(.ds-stack--3xl) > * + * { margin-block-start: var(--ds-space-24); }
 
 /* --- Center content --- */
 .ds-center {
@@ -5524,22 +7085,22 @@ tr:hover .ds-sortable__handle,
 
 /* --- Inset / Position Values --- */
 .ds-inset-0    { inset: 0; }
-.ds-inset-x-0  { left: 0; right: 0; }
-.ds-inset-y-0  { top: 0; bottom: 0; }
-.ds-top-0      { top: 0; }
-.ds-top-full   { top: 100%; }
-.ds-right-0    { right: 0; }
-.ds-bottom-0   { bottom: 0; }
-.ds-bottom-full { bottom: 100%; }
-.ds-left-0     { left: 0; }
-.ds-top-2    { top: var(--ds-space-2); }
-.ds-right-2  { right: var(--ds-space-2); }
-.ds-left-2   { left: var(--ds-space-2); }
-.ds-top-3    { top: var(--ds-space-3); }
-.ds-right-3  { right: var(--ds-space-3); }
-.ds-left-3   { left: var(--ds-space-3); }
-.ds-top-1\/2 { top: 50%; }
-.ds-left-1\/2 { left: 50%; }
+.ds-inset-x-0  { inset-inline-start: 0; inset-inline-end: 0; }
+.ds-inset-y-0  { inset-block-start: 0; inset-block-end: 0; }
+.ds-top-0      { inset-block-start: 0; }
+.ds-top-full   { inset-block-start: 100%; }
+.ds-right-0    { inset-inline-end: 0; }
+.ds-bottom-0   { inset-block-end: 0; }
+.ds-bottom-full { inset-block-end: 100%; }
+.ds-left-0     { inset-inline-start: 0; }
+.ds-top-2    { inset-block-start: var(--ds-space-2); }
+.ds-right-2  { inset-inline-end: var(--ds-space-2); }
+.ds-left-2   { inset-inline-start: var(--ds-space-2); }
+.ds-top-3    { inset-block-start: var(--ds-space-3); }
+.ds-right-3  { inset-inline-end: var(--ds-space-3); }
+.ds-left-3   { inset-inline-start: var(--ds-space-3); }
+.ds-top-1\/2 { inset-block-start: 50%; }
+.ds-left-1\/2 { inset-inline-start: 50%; }
 
 /* --- Object Fit --- */
 .ds-object-cover   { object-fit: cover; }
@@ -5557,7 +7118,7 @@ tr:hover .ds-sortable__handle,
   .ds-sm\:table-cell { display: table-cell; }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
   .ds-lg\:hidden { display: none; }
   .ds-lg\:block  { display: block; }
   .ds-lg\:flex   { display: flex; }
@@ -5568,7 +7129,7 @@ tr:hover .ds-sortable__handle,
   .ds-sm\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
   .ds-lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
   .ds-lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
 }
@@ -5620,15 +7181,15 @@ tr:hover .ds-sortable__handle,
 .ds-py-20 { padding-block: var(--ds-space-20); }
 .ds-py-24 { padding-block: var(--ds-space-24); }
 
-.ds-pt-2  { padding-top: var(--ds-space-2); }
-.ds-pt-4  { padding-top: var(--ds-space-4); }
-.ds-pt-6  { padding-top: var(--ds-space-6); }
-.ds-pt-8  { padding-top: var(--ds-space-8); }
-.ds-pt-12 { padding-top: var(--ds-space-12); }
-.ds-pt-16 { padding-top: var(--ds-space-16); }
+.ds-pt-2  { padding-block-start: var(--ds-space-2); }
+.ds-pt-4  { padding-block-start: var(--ds-space-4); }
+.ds-pt-6  { padding-block-start: var(--ds-space-6); }
+.ds-pt-8  { padding-block-start: var(--ds-space-8); }
+.ds-pt-12 { padding-block-start: var(--ds-space-12); }
+.ds-pt-16 { padding-block-start: var(--ds-space-16); }
 
-.ds-pb-4  { padding-bottom: var(--ds-space-4); }
-.ds-pb-8  { padding-bottom: var(--ds-space-8); }
+.ds-pb-4  { padding-block-end: var(--ds-space-4); }
+.ds-pb-8  { padding-block-end: var(--ds-space-8); }
 
 /* --- Margin --- */
 .ds-m-0    { margin: var(--ds-space-0); }
@@ -5644,33 +7205,33 @@ tr:hover .ds-sortable__handle,
 .ds-my-6  { margin-block: var(--ds-space-6); }
 .ds-my-8  { margin-block: var(--ds-space-8); }
 
-.ds-mt-0  { margin-top: var(--ds-space-0); }
-.ds-mt-1  { margin-top: var(--ds-space-1); }
-.ds-mt-2  { margin-top: var(--ds-space-2); }
-.ds-mt-4  { margin-top: var(--ds-space-4); }
-.ds-mt-6  { margin-top: var(--ds-space-6); }
-.ds-mt-8  { margin-top: var(--ds-space-8); }
-
-.ds-mb-0  { margin-bottom: var(--ds-space-0); }
-.ds-mb-1  { margin-bottom: var(--ds-space-1); }
-.ds-mb-2  { margin-bottom: var(--ds-space-2); }
-.ds-mb-4  { margin-bottom: var(--ds-space-4); }
-.ds-mb-6  { margin-bottom: var(--ds-space-6); }
-.ds-mb-8  { margin-bottom: var(--ds-space-8); }
-
-.ds-mt-auto { margin-top: auto; }
-.ds-mb-auto { margin-bottom: auto; }
-.ds-ml-auto { margin-left: auto; }
-.ds-mr-auto { margin-right: auto; }
-.ds-ml-2    { margin-left: var(--ds-space-2); }
-.ds-ml-4    { margin-left: var(--ds-space-4); }
-.ds-mr-2    { margin-right: var(--ds-space-2); }
-.ds-mr-4    { margin-right: var(--ds-space-4); }
-
-.ds-mt-0\.5 { margin-top: var(--ds-space-0-5); }
-.ds-mt-3    { margin-top: var(--ds-space-3); }
-.ds-mb-0\.5 { margin-bottom: var(--ds-space-0-5); }
-.ds-mb-3    { margin-bottom: var(--ds-space-3); }
+.ds-mt-0  { margin-block-start: var(--ds-space-0); }
+.ds-mt-1  { margin-block-start: var(--ds-space-1); }
+.ds-mt-2  { margin-block-start: var(--ds-space-2); }
+.ds-mt-4  { margin-block-start: var(--ds-space-4); }
+.ds-mt-6  { margin-block-start: var(--ds-space-6); }
+.ds-mt-8  { margin-block-start: var(--ds-space-8); }
+
+.ds-mb-0  { margin-block-end: var(--ds-space-0); }
+.ds-mb-1  { margin-block-end: var(--ds-space-1); }
+.ds-mb-2  { margin-block-end: var(--ds-space-2); }
+.ds-mb-4  { margin-block-end: var(--ds-space-4); }
+.ds-mb-6  { margin-block-end: var(--ds-space-6); }
+.ds-mb-8  { margin-block-end: var(--ds-space-8); }
+
+.ds-mt-auto { margin-block-start: auto; }
+.ds-mb-auto { margin-block-end: auto; }
+.ds-ml-auto { margin-inline-start: auto; }
+.ds-mr-auto { margin-inline-end: auto; }
+.ds-ml-2    { margin-inline-start: var(--ds-space-2); }
+.ds-ml-4    { margin-inline-start: var(--ds-space-4); }
+.ds-mr-2    { margin-inline-end: var(--ds-space-2); }
+.ds-mr-4    { margin-inline-end: var(--ds-space-4); }
+
+.ds-mt-0\.5 { margin-block-start: var(--ds-space-0-5); }
+.ds-mt-3    { margin-block-start: var(--ds-space-3); }
+.ds-mb-0\.5 { margin-block-end: var(--ds-space-0-5); }
+.ds-mb-3    { margin-block-end: var(--ds-space-3); }
 
 /* --- Padding (granular) --- */
 .ds-p-0\.5 { padding: var(--ds-space-0-5); }
@@ -5683,29 +7244,29 @@ tr:hover .ds-sortable__handle,
 .ds-py-1    { padding-block: var(--ds-space-1); }
 .ds-py-1\.5 { padding-block: var(--ds-space-1-5); }
 
-.ds-pb-2   { padding-bottom: var(--ds-space-2); }
-.ds-pb-6   { padding-bottom: var(--ds-space-6); }
+.ds-pb-2   { padding-block-end: var(--ds-space-2); }
+.ds-pb-6   { padding-block-end: var(--ds-space-6); }
 
-.ds-pl-2   { padding-left: var(--ds-space-2); }
-.ds-pl-3   { padding-left: var(--ds-space-3); }
-.ds-pl-4   { padding-left: var(--ds-space-4); }
-.ds-pr-2   { padding-right: var(--ds-space-2); }
-.ds-pr-3   { padding-right: var(--ds-space-3); }
-.ds-pr-4   { padding-right: var(--ds-space-4); }
-.ds-pr-7   { padding-right: 1.75rem; }
-.ds-pr-10  { padding-right: var(--ds-space-10); }
+.ds-pl-2   { padding-inline-start: var(--ds-space-2); }
+.ds-pl-3   { padding-inline-start: var(--ds-space-3); }
+.ds-pl-4   { padding-inline-start: var(--ds-space-4); }
+.ds-pr-2   { padding-inline-end: var(--ds-space-2); }
+.ds-pr-3   { padding-inline-end: var(--ds-space-3); }
+.ds-pr-4   { padding-inline-end: var(--ds-space-4); }
+.ds-pr-7   { padding-inline-end: 1.75rem; }
+.ds-pr-10  { padding-inline-end: var(--ds-space-10); }
 
 /* --- Gap (fractional) --- */
 .ds-gap-0\.5 { gap: var(--ds-space-0-5); }
 .ds-gap-1\.5 { gap: var(--ds-space-1-5); }
 
 /* --- Space-Y (owl selector) --- */
-.ds-space-y-1 > * + * { margin-top: var(--ds-space-1); }
-.ds-space-y-2 > * + * { margin-top: var(--ds-space-2); }
-.ds-space-y-3 > * + * { margin-top: var(--ds-space-3); }
-.ds-space-y-4 > * + * { margin-top: var(--ds-space-4); }
-.ds-space-y-6 > * + * { margin-top: var(--ds-space-6); }
-.ds-space-y-8 > * + * { margin-top: var(--ds-space-8); }
+.ds-space-y-1 > * + * { margin-block-start: var(--ds-space-1); }
+.ds-space-y-2 > * + * { margin-block-start: var(--ds-space-2); }
+.ds-space-y-3 > * + * { margin-block-start: var(--ds-space-3); }
+.ds-space-y-4 > * + * { margin-block-start: var(--ds-space-4); }
+.ds-space-y-6 > * + * { margin-block-start: var(--ds-space-6); }
+.ds-space-y-8 > * + * { margin-block-start: var(--ds-space-8); }
 
 /* --- Responsive: Padding --- */
 @media (min-width: 768px) {
@@ -5717,7 +7278,7 @@ tr:hover .ds-sortable__handle,
   .ds-md\:py-16 { padding-block: var(--ds-space-16); }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
   .ds-lg\:px-6 { padding-inline: var(--ds-space-6); }
   .ds-lg\:px-8 { padding-inline: var(--ds-space-8); }
   .ds-lg\:py-16 { padding-block: var(--ds-space-16); }
@@ -5755,7 +7316,7 @@ tr:hover .ds-sortable__handle,
   .ds-md\:text-4xl { font-size: var(--ds-text-4xl); }
   .ds-md\:text-6xl { font-size: var(--ds-text-6xl); }
 }
-@media (min-width: 1024px) {
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
   .ds-lg\:text-xl  { font-size: var(--ds-text-xl); }
   .ds-lg\:text-2xl { font-size: var(--ds-text-2xl); }
   .ds-lg\:text-3xl { font-size: var(--ds-text-3xl); }
@@ -5772,9 +7333,9 @@ tr:hover .ds-sortable__handle,
 .ds-font-bold     { font-weight: var(--ds-weight-bold); }
 
 /* --- Text Alignment --- */
-.ds-text-left   { text-align: left; }
+.ds-text-left   { text-align: start; }
 .ds-text-center { text-align: center; }
-.ds-text-right  { text-align: right; }
+.ds-text-right  { text-align: end; }
 .ds-text-balance { text-wrap: balance; }
 
 /* --- Text Color --- */
@@ -5891,10 +7452,10 @@ tr:hover .ds-sortable__handle,
 
 /* --- Border --- */
 .ds-border      { border: 1px solid var(--ds-color-border); }
-.ds-border-t    { border-top: 1px solid var(--ds-color-border); }
-.ds-border-b    { border-bottom: 1px solid var(--ds-color-border); }
-.ds-border-l    { border-left: 1px solid var(--ds-color-border); }
-.ds-border-r    { border-right: 1px solid var(--ds-color-border); }
+.ds-border-t    { border-block-start: 1px solid var(--ds-color-border); }
+.ds-border-b    { border-block-end: 1px solid var(--ds-color-border); }
+.ds-border-l    { border-inline-start: 1px solid var(--ds-color-border); }
+.ds-border-r    { border-inline-end: 1px solid var(--ds-color-border); }
 .ds-border-none { border: none; }
 
 /* --- Border Color --- */
@@ -5906,7 +7467,7 @@ tr:hover .ds-sortable__handle,
 .ds-border-nav         { border-color: var(--ds-color-nav-border); }
 
 /* --- Divide --- */
-.ds-divide-y > * + * { border-top: 1px solid var(--ds-color-border); }
+.ds-divide-y > * + * { border-block-start: 1px solid var(--ds-color-border); }
 
 /* --- Border Radius --- */
 .ds-rounded-none { border-radius: var(--ds-radius-none); }
@@ -6050,4 +7611,225 @@ tr:hover .ds-sortable__handle,
   border-width: 0;
 }
 
+/* ==========================================================================
+   Utilities: Interactive
+   Hover states, reveal patterns, focus rings, and cursor utilities.
+   ========================================================================== */
+
+/* --- Hover Row (background elevation on hover) --- */
+.ds-hover-row {
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-hover-row:hover {
+  background-color: var(--ds-color-bg-elevated);
+}
+
+/* Subtle variant (semi-transparent) */
+.ds-hover-row--subtle {
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-hover-row--subtle:hover {
+  background-color: color-mix(in srgb, var(--ds-color-bg-elevated) 50%, transparent);
+}
+
+/* --- Group Reveal (children appear on parent hover) --- */
+.ds-reveal {
+  opacity: 0;
+  transition: opacity var(--ds-duration-fast) var(--ds-ease-default);
+}
+.group:hover > .ds-reveal,
+.group:hover .ds-reveal {
+  opacity: 1;
+}
+
+/* --- Editable Cell (pointer + bg on hover) --- */
+.ds-editable {
+  cursor: pointer;
+  border-radius: var(--ds-radius-default);
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-editable:hover {
+  background-color: var(--ds-color-surface-hover);
+}
+
+/* --- Hover Border --- */
+.ds-hover-border {
+  transition: border-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-hover-border:hover {
+  border-color: var(--ds-color-border-hover);
+}
+
+/* --- Hover Zoom (scale on hover) --- */
+.ds-hover-zoom {
+  transition: transform var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-hover-zoom:hover {
+  transform: scale(1.05);
+}
+
+/* --- Opacity Hover (dim → full on hover) --- */
+.ds-opacity-hover {
+  opacity: 0.5;
+  transition: opacity var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-opacity-hover:hover {
+  opacity: 1;
+}
+
+/* --- Focus Ring (inset ring for custom inputs) --- */
+.ds-focus-ring:focus {
+  border-color: var(--ds-color-border-active);
+  box-shadow: inset 0 0 0 1px var(--ds-color-border-active);
+  outline: none;
+}
+
+/* --- Ring States --- */
+.ds-ring-active {
+  box-shadow: 0 0 0 2px var(--ds-color-border-active);
+}
+
+.ds-ring-selected {
+  box-shadow: 0 0 0 2px var(--ds-color-interactive), 0 0 0 3px var(--ds-color-surface);
+}
+
+/* --- Semi-transparent Backgrounds --- */
+.ds-bg-elevated-50 {
+  background-color: color-mix(in srgb, var(--ds-color-bg-elevated) 50%, transparent);
+}
+
+.ds-bg-base-50 {
+  background-color: color-mix(in srgb, var(--ds-color-bg-base) 50%, transparent);
+}
+
+/* --- Hover Color Variants --- */
+.ds-hover-text-error:hover {
+  color: var(--ds-color-error);
+}
+
+.ds-hover-bg-error:hover {
+  background-color: color-mix(in srgb, var(--ds-color-error) 10%, transparent);
+}
+
+/* --- Cursor Utilities --- */
+.ds-cursor-grab {
+  cursor: grab;
+}
+.ds-cursor-grab:active {
+  cursor: grabbing;
+}
+
+/* --- Grip Icon (secondary → primary on group hover) --- */
+.ds-grip {
+  color: var(--ds-color-text-secondary);
+  transition: color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.group:hover .ds-grip {
+  color: var(--ds-color-text);
+}
+
+/* ==========================================================================
+   Utilities: Accessibility
+   Screen-reader helpers, skip links, focus utilities, and motion control.
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Screen Reader Only — visually hidden, available to assistive technology
+   --------------------------------------------------------------------------- */
+
+.ds-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Not Screen Reader Only — reset ds-sr-only when needed (e.g., responsive)
+   --------------------------------------------------------------------------- */
+
+.ds-not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+/* ---------------------------------------------------------------------------
+   Focus Visible Only — invisible by default, shown on keyboard focus
+   --------------------------------------------------------------------------- */
+
+.ds-focus-visible-only {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ds-focus-visible-only:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ---------------------------------------------------------------------------
+   Skip Link — skip to main content, visible only on focus
+   --------------------------------------------------------------------------- */
+
+.ds-skip-link {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.ds-skip-link:focus-visible {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--ds-z-tooltip, 200);
+  width: auto;
+  height: auto;
+  padding: var(--ds-space-3) var(--ds-space-5);
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+  background-color: var(--ds-color-inverted);
+  color: var(--ds-color-on-inverted);
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  border-radius: 0 0 var(--ds-radius-lg) 0;
+  box-shadow: var(--ds-shadow-lg);
+  text-decoration: none;
+  outline: none;
+}
+
+/* ---------------------------------------------------------------------------
+   Reduce Motion — force reduced motion on a specific element
+   --------------------------------------------------------------------------- */
+
+.ds-reduce-motion,
+.ds-reduce-motion *,
+.ds-reduce-motion *::before,
+.ds-reduce-motion *::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+  scroll-behavior: auto !important;
+}
+
 
+}