@digiko-npm/designsystem 0.5.0 → 0.7.2

package/dist/designsystem.css

@@ -1,4 +1,4 @@
-/* @ds/designsystem v0.4.0 */
+/* @ds/designsystem v0.7.1 */
 /* ==========================================================================
    @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: #1c1c20;
 
   --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,9 +1642,11 @@ 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 {
+.ds-sidebar__link--active,
+.ds-sidebar__link--active:hover {
   color: var(--ds-color-text);
   background-color: var(--ds-color-bg-elevated);
 }
@@ -1515,6 +1654,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 +1713,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 +1726,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 +1746,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,7 +1761,7 @@ 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 */
@@ -1621,7 +1769,7 @@ hr {
 .ds-modal--lg .ds-modal__content { max-width: var(--ds-container-lg); }
 
 /* Fullscreen on mobile */
-@media (max-width: 1023px) {
+@media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
   .ds-modal--fullscreen-mobile .ds-modal__content {
     max-width: none;
     max-height: none;
@@ -1640,6 +1788,12 @@ hr {
 
 /* ==========================================================================
    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 {
@@ -1652,10 +1806,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;
 }
@@ -1675,10 +1829,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;
@@ -1695,9 +1849,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 {
@@ -1724,7 +1884,7 @@ hr {
 
 .ds-table {
   width: 100%;
-  text-align: left;
+  text-align: start;
   font-size: var(--ds-text-sm);
 }
 
@@ -1735,13 +1895,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 {
@@ -1772,20 +1932,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);
@@ -1793,7 +1960,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);
 }
@@ -1806,28 +1973,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);
 }
 
@@ -1862,14 +2029,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 {
@@ -1880,11 +2047,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,
@@ -1930,12 +2098,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 {
@@ -1947,7 +2120,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 --- */
@@ -1955,25 +2128,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 --- */
@@ -2012,11 +2185,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 --- */
@@ -2044,6 +2217,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 --- */
@@ -2057,31 +2231,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);
 }
 
 /* ==========================================================================
@@ -2100,7 +2274,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;
@@ -2154,6 +2328,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 {
@@ -2170,8 +2352,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);
@@ -2201,14 +2383,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;
 }
 
@@ -2246,6 +2428,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 {
@@ -2275,7 +2458,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);
 }
@@ -2285,7 +2468,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 --- */
@@ -2304,6 +2487,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 {
@@ -2364,8 +2553,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);
 }
 
@@ -2377,8 +2566,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);
 }
@@ -2388,9 +2577,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);
 }
 
@@ -2400,9 +2589,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);
@@ -2413,10 +2602,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);
 }
 
@@ -2426,13 +2615,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);
 }
 
 /* =============================================
@@ -2440,10 +2629,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);
 }
 
@@ -2453,13 +2642,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);
 }
 
 /* ==========================================================================
@@ -2471,8 +2660,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);
@@ -2494,32 +2683,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);
 }
 
@@ -2541,19 +2730,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);
@@ -2590,28 +2779,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 --- */
@@ -2692,7 +2881,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 {
@@ -2717,7 +2906,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 --- */
@@ -2746,7 +2935,7 @@ hr {
 /* --- Left-aligned variant --- */
 .ds-empty-state--left {
   align-items: flex-start;
-  text-align: left;
+  text-align: start;
 }
 
 
@@ -2819,8 +3008,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);
@@ -2848,7 +3037,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 {
@@ -2886,7 +3075,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 {
@@ -2959,9 +3148,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 {
@@ -3043,8 +3232,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);
 }
 
 /* ==========================================================================
@@ -3053,6 +3242,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>
 
@@ -3089,8 +3284,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);
@@ -3134,6 +3329,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);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3154,6 +3350,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 {
@@ -3188,6 +3385,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">
@@ -3255,6 +3458,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);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3284,6 +3488,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>
@@ -3340,6 +3551,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);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3399,6 +3611,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,
@@ -3451,6 +3664,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>
@@ -3491,6 +3709,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);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3538,7 +3757,7 @@ button.ds-tag:focus-visible {
    --------------------------------------------------------------------------- */
 
 .ds-tag--removable {
-  padding-right: var(--ds-space-1);
+  padding-inline-end: var(--ds-space-1);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3551,6 +3770,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);
@@ -3596,7 +3817,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);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3609,7 +3830,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);
 }
 
 /* ==========================================================================
@@ -3618,6 +3839,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
@@ -3625,8 +3852,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>
@@ -3648,11 +3875,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;
 }
 
 /* ---------------------------------------------------------------------------
@@ -3666,7 +3893,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);
@@ -3683,11 +3910,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);
 }
 
@@ -3697,6 +3924,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 */
@@ -3726,7 +3954,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);
@@ -3742,12 +3970,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;
 }
 
 /* ==========================================================================
@@ -3763,12 +3991,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;
 }
 
 /* ==========================================================================
@@ -3778,13 +4006,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>
@@ -3837,12 +4073,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%);
 }
 
@@ -3856,14 +4092,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%);
 }
 
@@ -3876,14 +4112,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%);
 }
@@ -3919,7 +4155,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 {
@@ -3961,6 +4197,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);
 }
 
 /* ==========================================================================
@@ -3979,7 +4216,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;
@@ -4031,7 +4268,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 */
@@ -4196,7 +4433,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);
 }
@@ -4208,6 +4445,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:
@@ -4249,6 +4492,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 {
@@ -4285,7 +4529,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);
 }
 
 /* ---------------------------------------------------------------------------
@@ -4295,13 +4539,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));
 }
 
 /* ---------------------------------------------------------------------------
@@ -4347,6 +4591,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 --- */
@@ -4373,7 +4625,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);
 }
 
@@ -4385,6 +4637,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 {
@@ -4414,7 +4667,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);
 }
@@ -4489,13 +4742,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;
@@ -4599,7 +4852,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;
@@ -4623,7 +4876,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 {
@@ -4663,105 +4916,522 @@ 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.
-
-   Usage:
-     <div class="ds-popover ds-popover--open">
-       <button>Trigger</button>
-       <div class="ds-popover__content">...</div>
-     </div>
+   Component: Collapsible
+   Single collapsible section — a simplified, standalone accordion item.
 
-   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)
+   ARIA requirements (consumer responsibility):
+   - Trigger: <button> with aria-expanded="true|false"
+   - Trigger: aria-controls="[content-panel-id]"
+   - Content: id matching aria-controls
    ========================================================================== */
 
-.ds-popover {
-  position: relative;
-  display: inline-flex;
-}
-
+/* ---------------------------------------------------------------------------
+   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__content {
   position: absolute;
   z-index: var(--ds-z-dropdown);
@@ -4790,8 +5460,8 @@ tr:hover .ds-sortable__handle,
 /* Placement: bottom (default) */
 .ds-popover__content,
 .ds-popover--bottom .ds-popover__content {
-  top: calc(100% + var(--ds-offset-md));
-  left: 50%;
+  inset-block-start: calc(100% + var(--ds-offset-md));
+  inset-inline-start: 50%;
   transform: translateX(-50%) scale(0.96);
 }
 
@@ -4802,9 +5472,9 @@ tr:hover .ds-sortable__handle,
 
 /* Placement: top */
 .ds-popover--top .ds-popover__content {
-  bottom: calc(100% + var(--ds-offset-md));
-  top: auto;
-  left: 50%;
+  inset-block-end: calc(100% + var(--ds-offset-md));
+  inset-block-start: auto;
+  inset-inline-start: 50%;
   transform: translateX(-50%) scale(0.96);
 }
 
@@ -4814,9 +5484,9 @@ tr:hover .ds-sortable__handle,
 
 /* Placement: left */
 .ds-popover--left .ds-popover__content {
-  right: calc(100% + var(--ds-offset-md));
-  top: 50%;
-  left: auto;
+  inset-inline-end: calc(100% + var(--ds-offset-md));
+  inset-block-start: 50%;
+  inset-inline-start: auto;
   transform: translateY(-50%) scale(0.96);
 }
 
@@ -4826,8 +5496,8 @@ tr:hover .ds-sortable__handle,
 
 /* Placement: right */
 .ds-popover--right .ds-popover__content {
-  left: calc(100% + var(--ds-offset-md));
-  top: 50%;
+  inset-inline-start: calc(100% + var(--ds-offset-md));
+  inset-block-start: 50%;
   transform: translateY(-50%) scale(0.96);
 }
 
@@ -4852,9 +5522,15 @@ tr:hover .ds-sortable__handle,
    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" />
+       <input type="range" min="0" max="100" value="50" aria-label="Volume" />
        <div class="ds-slider__labels">
          <span>0</span>
          <span>100</span>
@@ -4887,8 +5563,8 @@ tr:hover .ds-sortable__handle,
 .ds-slider input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 1.25rem;
-  height: 1.25rem;
+  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);
@@ -4899,8 +5575,8 @@ tr:hover .ds-sortable__handle,
 
 /* Firefox thumb */
 .ds-slider input[type="range"]::-moz-range-thumb {
-  width: 1.25rem;
-  height: 1.25rem;
+  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);
@@ -4922,6 +5598,7 @@ tr:hover .ds-sortable__handle,
 .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 {
@@ -4935,7 +5612,7 @@ tr:hover .ds-sortable__handle,
   justify-content: space-between;
   font-size: var(--ds-text-xs);
   color: var(--ds-color-text-tertiary);
-  margin-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
 }
 
 /* Current value display */
@@ -4999,16 +5676,16 @@ tr:hover .ds-sortable__handle,
 
 .ds-timeline {
   position: relative;
-  padding-left: var(--ds-space-8);
+  padding-inline-start: var(--ds-space-8);
 }
 
 /* Vertical line */
 .ds-timeline::before {
   content: "";
   position: absolute;
-  left: 0.9rem;
-  top: 0;
-  bottom: 0;
+  inset-inline-start: 0.9rem;
+  inset-block-start: 0;
+  inset-block-end: 0;
   width: 2px;
   background-color: var(--ds-color-border);
 }
@@ -5016,17 +5693,17 @@ tr:hover .ds-sortable__handle,
 /* Item */
 .ds-timeline__item {
   position: relative;
-  padding-bottom: var(--ds-space-6);
+  padding-block-end: var(--ds-space-6);
 }
 
 .ds-timeline__item:last-child {
-  padding-bottom: 0;
+  padding-block-end: 0;
 }
 
 /* Dot */
 .ds-timeline__dot {
   position: absolute;
-  left: calc(-1 * var(--ds-space-8) + 0.5rem);
+  inset-inline-start: calc(-1 * var(--ds-space-8) + 0.5rem);
   width: 1rem;
   height: 1rem;
   border-radius: var(--ds-radius-full);
@@ -5069,35 +5746,35 @@ tr:hover .ds-sortable__handle,
 .ds-timeline__description {
   font-size: var(--ds-text-sm);
   color: var(--ds-color-text-secondary);
-  margin-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
 }
 
 /* Timestamp */
 .ds-timeline__time {
   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);
 }
 
 /* Compact variant */
 .ds-timeline--compact {
-  padding-left: var(--ds-space-6);
+  padding-inline-start: var(--ds-space-6);
 }
 
 .ds-timeline--compact::before {
-  left: 0.6rem;
+  inset-inline-start: 0.6rem;
 }
 
 .ds-timeline--compact .ds-timeline__item {
-  padding-bottom: var(--ds-space-4);
+  padding-block-end: var(--ds-space-4);
 }
 
 .ds-timeline--compact .ds-timeline__item:last-child {
-  padding-bottom: 0;
+  padding-block-end: 0;
 }
 
 .ds-timeline--compact .ds-timeline__dot {
-  left: calc(-1 * var(--ds-space-6) + 0.25rem);
+  inset-inline-start: calc(-1 * var(--ds-space-6) + 0.25rem);
   width: 0.75rem;
   height: 0.75rem;
 }
@@ -5131,7 +5808,7 @@ tr:hover .ds-sortable__handle,
   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-block-end-width: 2px;
   border-radius: var(--ds-radius-sm);
   color: var(--ds-color-text-secondary);
   line-height: 1;
@@ -5164,17 +5841,26 @@ tr:hover .ds-sortable__handle,
    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">
+     <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" placeholder="Search..." />
+           <input class="ds-command__input" role="combobox" placeholder="Search..." />
          </div>
-         <div class="ds-command__list">
+         <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">
+             <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>
@@ -5198,7 +5884,7 @@ tr:hover .ds-sortable__handle,
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  padding-top: 20vh;
+  padding-block-start: 20vh;
   background-color: var(--ds-color-overlay);
   opacity: 0;
   visibility: hidden;
@@ -5237,7 +5923,7 @@ tr:hover .ds-sortable__handle,
   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);
+  border-block-end: 1px solid var(--ds-color-border);
 }
 
 /* Search icon */
@@ -5307,6 +5993,7 @@ tr:hover .ds-sortable__handle,
 .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 */
@@ -5341,7 +6028,7 @@ tr:hover .ds-sortable__handle,
   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);
+  border-block-start: 1px solid var(--ds-color-border);
   font-size: var(--ds-text-xs);
   color: var(--ds-color-text-tertiary);
 }
@@ -5351,25 +6038,20 @@ tr:hover .ds-sortable__handle,
    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">
+     <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">...</button>
-     </div>
-     <div class="ds-search__dropdown">
-       <div class="ds-search__group">
-         <span class="ds-search__group-label">Pages</span>
-         <button class="ds-search__result ds-search__result--active">
-           <span class="ds-search__result-icon">...</span>
-           <div class="ds-search__result-content">
-             <span class="ds-search__result-title">Page name</span>
-             <span class="ds-search__result-meta">Database</span>
-           </div>
-         </button>
-       </div>
-       <div class="ds-search__empty">No results found.</div>
+       <button class="ds-search__clear" aria-label="Clear search">...</button>
      </div>
 
    Modifiers:
@@ -5447,6 +6129,8 @@ tr:hover .ds-sortable__handle,
   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;
@@ -5481,7 +6165,7 @@ tr:hover .ds-sortable__handle,
 }
 
 .ds-search__group + .ds-search__group {
-  border-top: 1px solid var(--ds-color-border);
+  border-block-start: 1px solid var(--ds-color-border);
 }
 
 .ds-search__group-label {
@@ -5506,7 +6190,7 @@ tr:hover .ds-sortable__handle,
   color: var(--ds-color-text);
   font-size: var(--ds-text-sm);
   font-family: inherit;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
 }
@@ -5519,6 +6203,7 @@ tr:hover .ds-sortable__handle,
 .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);
 }
 
 .ds-search__result-icon {
@@ -5607,7 +6292,7 @@ tr:hover .ds-sortable__handle,
 }
 
 /* Responsive: mobile */
-@media (max-width: 1023px) {
+@media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
   .ds-search__shortcut { display: none; }
   .ds-search-mobile-trigger { display: flex; }
   .ds-search { display: none; }
@@ -5615,13 +6300,13 @@ tr:hover .ds-sortable__handle,
   .ds-search--mobile-expanded {
     display: flex;
     position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
+    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-bottom: 1px solid var(--ds-color-border);
+    border-block-end: 1px solid var(--ds-color-border);
     border-radius: 0;
     padding: 0 var(--ds-space-3);
     background: var(--ds-color-nav-bg);
@@ -5630,12 +6315,12 @@ tr:hover .ds-sortable__handle,
   }
 
   .ds-search__dropdown--mobile {
-    left: 0 !important;
-    right: 0;
+    inset-inline-start: 0 !important;
+    inset-inline-end: 0;
     width: auto !important;
     border-radius: 0;
-    border-left: none;
-    border-right: none;
+    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);
@@ -5811,7 +6496,7 @@ tr:hover .ds-sortable__handle,
 }
 
 /* Responsive: mobile */
-@media (max-width: 1023px) {
+@media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
   .ds-toolbar__row {
     padding-inline: var(--ds-space-3);
     gap: var(--ds-space-2);
@@ -5838,10 +6523,15 @@ tr:hover .ds-sortable__handle,
    Interactive filter/sort chips with optional remove button. Distinct from
    ds-tag (which is a static label). Chips represent active filter state.
 
+   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"
+
    Usage:
      <span class="ds-chip">
        Status: Active
-       <button class="ds-chip__remove">×</button>
+       <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>
@@ -5876,7 +6566,7 @@ tr:hover .ds-sortable__handle,
 }
 
 .ds-chip--logic:hover {
-  background: var(--ds-color-surface-hover);
+  background: var(--ds-color-overlay-hover);
 }
 
 /* Sort chip (dashed border) */
@@ -5891,6 +6581,8 @@ tr:hover .ds-sortable__handle,
   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;
@@ -5903,7 +6595,7 @@ tr:hover .ds-sortable__handle,
 
 .ds-chip__remove:hover {
   color: var(--ds-color-text);
-  background: var(--ds-color-surface-hover);
+  background: var(--ds-color-overlay-hover);
 }
 
 /* ==========================================================================
@@ -5911,12 +6603,17 @@ tr:hover .ds-sortable__handle,
    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:
-     <button class="ds-icon-btn">
+     <button class="ds-icon-btn" aria-label="Delete">
        <svg>...</svg>
      </button>
-     <button class="ds-icon-btn ds-icon-btn--sm">...</button>
-     <button class="ds-icon-btn ds-icon-btn--danger">...</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))
@@ -5955,6 +6652,7 @@ tr:hover .ds-sortable__handle,
 .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-icon-btn:disabled,
@@ -5973,9 +6671,9 @@ tr:hover .ds-sortable__handle,
 }
 
 .ds-icon-btn--sm {
-  width: 1.75rem;
-  height: 1.75rem;
-  padding: var(--ds-space-1);
+  width: var(--ds-size-2);
+  height: var(--ds-size-2);
+  padding: var(--ds-space-1-5);
   border-radius: var(--ds-radius-md);
 }
 
@@ -6008,16 +6706,22 @@ tr:hover .ds-sortable__handle,
    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">
-       <a href="/" class="ds-bottom-nav__item ds-bottom-nav__item--active">
+     <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">
+       <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>
@@ -6031,16 +6735,16 @@ tr:hover .ds-sortable__handle,
 .ds-bottom-nav {
   display: none;
   position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   z-index: var(--ds-z-dropdown);
   background: var(--ds-color-surface);
-  border-top: 1px solid var(--ds-color-border);
-  padding-bottom: env(safe-area-inset-bottom, 0px);
+  border-block-start: 1px solid var(--ds-color-border);
+  padding-block-end: env(safe-area-inset-bottom, 0px);
 }
 
-@media (max-width: 1023px) {
+@media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
   .ds-bottom-nav {
     display: flex;
     justify-content: space-around;
@@ -6048,7 +6752,7 @@ tr:hover .ds-sortable__handle,
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
   .ds-bottom-nav { display: none !important; }
 }
 
@@ -6086,25 +6790,25 @@ tr:hover .ds-sortable__handle,
 /* Notification badge */
 .ds-bottom-nav__badge {
   position: absolute;
-  top: -4px;
-  right: -8px;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
+  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: #fff;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 16px;
+  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;
 }
 
 /* Label */
 .ds-bottom-nav__label {
-  font-size: 10px;
+  font-size: var(--ds-text-2xs);
   font-weight: var(--ds-weight-medium);
-  letter-spacing: 0.02em;
+  letter-spacing: var(--ds-tracking-wide);
 }
 
 /* Create button — elevated center icon */
@@ -6185,6 +6889,8 @@ tr:hover .ds-sortable__handle,
 }
 
 
+}
+@layer utilities {
 /* ==========================================================================
    Utilities: Layout
    Container with clamp padding, generous responsive grid.
@@ -6265,7 +6971,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); }
@@ -6304,7 +7010,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; }
@@ -6320,14 +7026,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 {
@@ -6380,22 +7086,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; }
@@ -6413,7 +7119,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; }
@@ -6424,7 +7130,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); }
 }
@@ -6476,15 +7182,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); }
@@ -6500,33 +7206,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); }
@@ -6539,29 +7245,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) {
@@ -6573,7 +7279,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); }
@@ -6611,7 +7317,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); }
@@ -6628,9 +7334,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 --- */
@@ -6747,10 +7453,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 --- */
@@ -6762,7 +7468,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); }
@@ -7023,4 +7729,108 @@ tr:hover .ds-sortable__handle,
   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;
+}
+
+
+}