@d4gger/design-system 3.0.0 → 3.0.1

package/dist/styles.css

@@ -102,7 +102,7 @@ svg {
   --dsx-color-accent-11: #bfb1ff;
   --dsx-color-accent-12: #ded8ff;
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: rgba(40, 0, 93, 0.4);
+  --dsx-color-accent-surface: rgba(40, 0, 93, 0.2);
   --dsx-color-accent-indicator: #bfb1ff;
   --dsx-color-accent-track: #8553f6;
   --dsx-color-gray-1: #0c0d12;
@@ -279,7 +279,7 @@ svg {
   --dsx-color-accent-indicator: #bfb1ff;
   --dsx-color-accent-track: #8553f6;
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: rgba(40, 0, 93, 0.4);
+  --dsx-color-accent-surface: rgba(40, 0, 93, 0.2);
   --dsx-color-border-subtle: #333640;
   --dsx-color-border-strong: #565b70;
   --dsx-effect-shadow-1: 0 1px 2px rgba(8, 9, 12, 0.24);
@@ -306,7 +306,7 @@ svg {
   --dsx-sheet-width-sm: 320px;
   --dsx-sheet-width-lg: 480px;
   --dsx-chart-min-height: 240px;
-  --dsx-data-table-empty-height: 96px;
+  --dsx-data-table-empty-height: 192px;
   --dsx-sidebar-width: 272px;
   --dsx-sidebar-width-collapsed: 72px;
   --dsx-calendar-width: 320px;
@@ -538,7 +538,7 @@ svg {
   --dsx-color-accent-indicator: var(--dsx-color-accent-rift-11);
   --dsx-color-accent-track: var(--dsx-color-accent-rift-9);
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-rift-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-rift-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-rift-9) 64%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-rift-9) 28%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-rift-9) 40%, transparent);
@@ -566,7 +566,7 @@ svg {
   --dsx-color-accent-indicator: var(--dsx-color-accent-warp-11);
   --dsx-color-accent-track: var(--dsx-color-accent-warp-9);
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-warp-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-warp-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-warp-9) 64%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-warp-9) 28%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-warp-9) 40%, transparent);
@@ -594,7 +594,7 @@ svg {
   --dsx-color-accent-indicator: var(--dsx-color-accent-ray-11);
   --dsx-color-accent-track: var(--dsx-color-accent-ray-9);
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-ray-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-ray-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-ray-9) 64%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-ray-9) 28%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-ray-9) 40%, transparent);
@@ -622,7 +622,7 @@ svg {
   --dsx-color-accent-indicator: var(--dsx-color-accent-astral-11);
   --dsx-color-accent-track: var(--dsx-color-accent-astral-9);
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-astral-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-astral-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-astral-9) 64%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-astral-9) 28%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-astral-9) 40%, transparent);
@@ -650,7 +650,7 @@ svg {
   --dsx-color-accent-indicator: var(--dsx-color-accent-spark-11);
   --dsx-color-accent-track: var(--dsx-color-accent-spark-9);
   --dsx-color-accent-contrast: #0c0d12;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-spark-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-spark-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-spark-9) 64%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-spark-9) 28%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-spark-9) 40%, transparent);
@@ -672,7 +672,7 @@ svg {
   --dsx-color-accent-11: #5211ac;
   --dsx-color-accent-12: #28005d;
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: rgba(230, 226, 255, 0.4);
+  --dsx-color-accent-surface: rgba(230, 226, 255, 0.2);
   --dsx-color-accent-indicator: #28005d;
   --dsx-color-accent-track: #8553f6;
   --dsx-color-gray-1: #fbfbfc;
@@ -849,7 +849,7 @@ svg {
   --dsx-color-accent-indicator: #28005d;
   --dsx-color-accent-track: #8553f6;
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: rgba(230, 226, 255, 0.4);
+  --dsx-color-accent-surface: rgba(230, 226, 255, 0.2);
   --dsx-color-border-subtle: #c3c8d4;
   --dsx-color-border-strong: #8b90a3;
   --dsx-effect-shadow-1: 0 1px 2px rgba(44, 47, 61, 0.12);
@@ -894,7 +894,7 @@ svg {
   --dsx-color-accent-indicator: var(--dsx-color-accent-rift-12);
   --dsx-color-accent-track: var(--dsx-color-accent-rift-9);
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-rift-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-rift-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-rift-9) 56%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-rift-9) 24%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-rift-9) 36%, transparent);
@@ -923,7 +923,7 @@ svg {
   --dsx-color-accent-indicator: var(--dsx-color-accent-warp-12);
   --dsx-color-accent-track: var(--dsx-color-accent-warp-9);
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-warp-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-warp-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-warp-9) 56%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-warp-9) 24%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-warp-9) 36%, transparent);
@@ -952,7 +952,7 @@ svg {
   --dsx-color-accent-indicator: var(--dsx-color-accent-ray-12);
   --dsx-color-accent-track: var(--dsx-color-accent-ray-9);
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-ray-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-ray-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-ray-9) 56%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-ray-9) 24%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-ray-9) 36%, transparent);
@@ -981,7 +981,7 @@ svg {
   --dsx-color-accent-indicator: var(--dsx-color-accent-astral-12);
   --dsx-color-accent-track: var(--dsx-color-accent-astral-9);
   --dsx-color-accent-contrast: #ffffff;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-astral-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-astral-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-astral-9) 56%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-astral-9) 24%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-astral-9) 36%, transparent);
@@ -1010,7 +1010,7 @@ svg {
   --dsx-color-accent-indicator: var(--dsx-color-accent-spark-12);
   --dsx-color-accent-track: var(--dsx-color-accent-spark-9);
   --dsx-color-accent-contrast: #0c0d12;
-  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-spark-3) 40%, transparent);
+  --dsx-color-accent-surface: color-mix(in srgb, var(--dsx-color-accent-spark-3) 20%, transparent);
   --dsx-effect-ring-focus: color-mix(in srgb, var(--dsx-color-accent-spark-9) 56%, transparent);
   --dsx-effect-shadow-accent: color-mix(in srgb, var(--dsx-color-accent-spark-9) 24%, transparent);
   --dsx-effect-shadow-accent-strong: color-mix(in srgb, var(--dsx-color-accent-spark-9) 36%, transparent);
@@ -1168,6 +1168,12 @@ svg {
   --dsx-shadow-elevation-2: var(--dsx-effect-shadow-2);
   --dsx-shadow-elevation-3: var(--dsx-effect-shadow-3);
   --dsx-shadow-elevation-4: var(--dsx-effect-shadow-4);
+  /* Step 5 (Spotlight: toasts, dragged panels). Step 6 stays raw until an
+     occupant earns it — no elevation-6 alias by decision (B4 Q3). */
+  --dsx-shadow-elevation-5: var(--dsx-effect-shadow-5);
+  /* Menu-tier control point (B4 Q3): every menu-family content rides step 3
+     unless a component file reasserts it locally for cascade order. */
+  --dsx-menu-content-elevation: var(--dsx-shadow-elevation-3);
   --dsx-shadow-panel-shadow: var(--dsx-effect-shadow-3);
 
   /* ── Constructed shadows ────────────────────────────────────────────── */
@@ -2579,6 +2585,68 @@ textarea {
   border-radius: var(--dsx-rounded-full);
 }
 
+.dsx-banner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsx-space-xs);
+  padding: var(--dsx-space-lg);
+  border-radius: var(--dsx-rounded-lg);
+  background: var(--dsx-color-accent-surface);
+  box-sizing: border-box;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/* Fill: solid accent mass reusing Button primary's solved compliance —
+   accent-track background with accent-contrast text (near-black on spark,
+   white elsewhere, per the token). Wash stays the default hero. */
+
+.dsx-banner:where([data-variant='fill'], .dsx-banner-variant-fill) {
+  background: var(--dsx-color-accent-track);
+}
+
+.dsx-banner:where([data-variant='fill'], .dsx-banner-variant-fill) .dsx-banner__label,
+.dsx-banner:where([data-variant='fill'], .dsx-banner-variant-fill) .dsx-banner__value,
+.dsx-banner:where([data-variant='fill'], .dsx-banner-variant-fill) .dsx-banner__footnote {
+  color: var(--dsx-color-accent-contrast);
+}
+
+.dsx-banner__label {
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  line-height: var(--dsx-typography-label-small-line-height);
+  letter-spacing: var(--dsx-typography-label-small-letter-spacing);
+  font-variation-settings: var(--dsx-typography-label-small-font-variation-settings);
+  text-transform: var(--dsx-typography-label-small-text-transform);
+  text-decoration: var(--dsx-typography-label-small-text-decoration);
+  color: var(--dsx-color-on-surface-variant);
+}
+
+.dsx-banner__value {
+  font-family: var(--dsx-typography-display-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-display-medium-font-size);
+  font-weight: var(--dsx-typography-display-medium-font-weight);
+  line-height: var(--dsx-typography-display-medium-line-height);
+  letter-spacing: var(--dsx-typography-display-medium-letter-spacing);
+  font-variation-settings: var(--dsx-typography-display-medium-font-variation-settings);
+  text-transform: var(--dsx-typography-display-medium-text-transform);
+  text-decoration: var(--dsx-typography-display-medium-text-decoration);
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-banner__footnote {
+  font-family: var(--dsx-typography-body-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-body-small-font-size);
+  font-weight: var(--dsx-typography-body-small-font-weight);
+  line-height: var(--dsx-typography-body-small-line-height);
+  letter-spacing: var(--dsx-typography-body-small-letter-spacing);
+  font-variation-settings: var(--dsx-typography-body-small-font-variation-settings);
+  text-transform: var(--dsx-typography-body-small-text-transform);
+  text-decoration: var(--dsx-typography-body-small-text-decoration);
+  color: var(--dsx-color-on-surface-variant);
+}
+
 @keyframes dsx-base-button-loading-shimmer {
   0% {
     background-position: 200% 0;
@@ -3098,6 +3166,15 @@ textarea {
   border-color: color-mix(in srgb, var(--dsx-color-error-10), var(--dsx-color-error-11) 35%);
 }
 
+/* ---- halo: resting accent ring on every variant (primary has its own rule above) ---- */
+
+.dsx-button:where([data-variant='secondary'])[data-halo='true'],
+.dsx-button:where([data-variant='outline'])[data-halo='true'],
+.dsx-button:where([data-variant='ghost'])[data-halo='true'],
+.dsx-button:where([data-variant='destructive'])[data-halo='true'] {
+  box-shadow: var(--dsx-shadow-accent-ring);
+}
+
 .dsx-button[data-size='sm'] {
   min-height: var(--dsx-density-control-height-sm, var(--dsx-size-lg));
   padding-inline: var(--dsx-density-control-padding-inline-sm, var(--dsx-space-sm));
@@ -3341,6 +3418,9 @@ textarea {
 
 .dsx-card {
   display: flex;
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
   flex-direction: column;
   gap: var(--dsx-space-md);
   padding: var(--dsx-space-lg);
@@ -3419,25 +3499,43 @@ textarea {
 }
 
 .dsx-carousel {
+  --_carousel-nav-size: var(--dsx-size-lg);
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--dsx-space-md);
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-carousel__viewport {
+  --_carousel-gutter-start: 0;
+  --_carousel-gutter-end: 0;
   position: relative;
   width: 100%;
   overflow: hidden;
   border-radius: var(--dsx-rounded-xl);
 }
 
+.dsx-carousel__viewport:where(:not([data-orientation='vertical'])):has(> .dsx-carousel__nav--previous) {
+  --_carousel-gutter-start: calc(var(--_carousel-nav-size) + var(--dsx-space-md) + var(--dsx-space-xs));
+}
+
+.dsx-carousel__viewport:has(> .dsx-carousel__nav--next) {
+  --_carousel-gutter-end: calc(var(--_carousel-nav-size) + var(--dsx-space-md) + var(--dsx-space-xs));
+}
+
 .dsx-carousel__viewport[data-orientation='vertical'] {
+  --_carousel-gutter-start: 0;
   height: var(--dsx-carousel-vertical-height, 320px);
 }
 
+.dsx-carousel__viewport:where([data-orientation='vertical']):has(> .dsx-carousel__nav--previous) {
+  --_carousel-gutter-end: calc(var(--_carousel-nav-size) + var(--dsx-space-md) + var(--dsx-space-xs));
+}
+
 .dsx-carousel__track {
   display: flex;
   flex-direction: row;
@@ -3448,25 +3546,26 @@ textarea {
 
 .dsx-carousel__track--vertical {
   flex-direction: column;
+  height: 100%;
+}
+
+.dsx-carousel__slide {
+  flex: 0 0 100%;
+  min-width: 0;
+  min-height: 0;
 }
 
-/* Plain block, not a centering flex container: slide content (an image, a
-   colored panel, arbitrary consumer markup) must fill the full slide area.
-   A flex container with justify-content/align-items would shrink-wrap any
-   child to its own content size instead of the slide's 100% width.
+.dsx-carousel__track--vertical .dsx-carousel__item {
+  height: 100%;
+}
 
-   `padding-inline` added 2026-08-27 — real bug found live: `.dsx-carousel__nav` buttons are
-   absolutely positioned over the viewport (left/right: space-md), and item content had no
-   built-in clearance for them. Short centered content (a price) never reached the edges, so this
-   went unnoticed; a full sentence ("this tier isn't sold in <currency>") does, and sat directly
-   under the chevrons — "the chevrons of the carousel is colliding within the text." Reserving
-   space for the nav buttons here, once, means no consumer has to remember to pad their own item
-   content to avoid them. */
+/* Keep consumer content full width, reserving only the lanes occupied by controls. */
 
 .dsx-carousel__item {
+  box-sizing: border-box;
   flex: 0 0 100%;
   min-width: 0;
-  padding-inline: calc(var(--dsx-size-lg) + var(--dsx-space-md) + var(--dsx-space-xs));
+  padding-inline: var(--_carousel-gutter-start) var(--_carousel-gutter-end);
 }
 
 .dsx-carousel__item:has(+ .dsx-carousel__item) {
@@ -3480,8 +3579,9 @@ textarea {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--dsx-size-lg);
-  height: var(--dsx-size-lg);
+  box-sizing: border-box;
+  width: var(--_carousel-nav-size);
+  height: var(--_carousel-nav-size);
   padding: 0;
   border: var(--dsx-border-width-sm) solid var(--dsx-panel-border-color);
   border-radius: var(--dsx-rounded-full);
@@ -3495,16 +3595,45 @@ textarea {
   box-shadow: var(--dsx-shadow-elevation-2);
 }
 
-.dsx-carousel__nav:hover {
+.dsx-carousel__nav:hover:enabled {
   background: var(--dsx-color-surface-raised);
   border-color: var(--dsx-color-primary);
   color: var(--dsx-color-primary);
 }
 
-.dsx-carousel__nav:active {
+.dsx-carousel__nav:focus-visible,
+.dsx-carousel__indicator:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+}
+
+/* Preserve the circular paint while its entire 24px minimum box accepts input. */
+
+.dsx-carousel__nav::before {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--dsx-border-width-sm));
+}
+
+.dsx-carousel__nav:active:enabled {
   background: var(--dsx-effect-pressed-layer);
 }
 
+.dsx-carousel__nav:disabled {
+  cursor: default;
+  opacity: var(--dsx-opacity-disabled);
+}
+
+.dsx-carousel__viewport[data-orientation='vertical'] .dsx-carousel__nav--previous {
+  top: 25%;
+  left: auto;
+  right: var(--dsx-space-md);
+}
+
+.dsx-carousel__viewport[data-orientation='vertical'] .dsx-carousel__nav--next {
+  top: 75%;
+}
+
 .dsx-carousel__nav--previous {
   left: var(--dsx-space-md);
 }
@@ -3513,14 +3642,12 @@ textarea {
   right: var(--dsx-space-md);
 }
 
-.dsx-carousel[data-size='sm'] .dsx-carousel__nav {
-  width: var(--dsx-size-md);
-  height: var(--dsx-size-md);
+.dsx-carousel[data-size='sm'] {
+  --_carousel-nav-size: var(--dsx-size-md);
 }
 
-.dsx-carousel[data-size='lg'] .dsx-carousel__nav {
-  width: var(--dsx-size-xl);
-  height: var(--dsx-size-xl);
+.dsx-carousel[data-size='lg'] {
+  --_carousel-nav-size: var(--dsx-size-xl);
 }
 
 .dsx-carousel__indicators {
@@ -3536,26 +3663,48 @@ textarea {
    the stronger --dsx-color-outline token and bumped the dot itself up one size step. */
 
 .dsx-carousel__indicator {
-  width: var(--dsx-space-sm);
-  height: var(--dsx-space-sm);
+  position: relative;
+  width: var(--dsx-size-md);
+  height: var(--dsx-size-md);
   padding: 0;
   border: none;
+  border-radius: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.dsx-carousel__indicator::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--dsx-space-sm);
+  height: var(--dsx-space-sm);
   border-radius: var(--dsx-rounded-full);
   background: var(--dsx-color-outline);
-  cursor: pointer;
   transition: background var(--dsx-motion-duration-fast) var(--dsx-motion-easing-in-out),
               width var(--dsx-motion-duration-fast) var(--dsx-motion-easing-in-out);
 }
 
-.dsx-carousel__indicator--active {
+.dsx-carousel__indicator--active::before {
   background: var(--dsx-color-primary);
   width: var(--dsx-space-md);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .dsx-carousel__track,
+  .dsx-carousel__nav,
+  .dsx-carousel__indicator::before {
+    transition: none;
+  }
+}
+
 .dsx-checkbox {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  position: relative;
   width: var(--dsx-size-md);
   height: var(--dsx-size-md);
   border-radius: var(--dsx-rounded-sm);
@@ -3618,6 +3767,20 @@ textarea {
   box-shadow: var(--dsx-shadow-focus-ring);
 }
 
+/* Extended hit area — the visual box stays 20/24/32px per size, but the
+   pointer target grows to 44px (WCAG 2.5.8 minimum 24px, TMA touch 44px).
+   Absolutely positioned, so it never affects layout. */
+
+.dsx-checkbox::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: max(100% + 16px, 44px);
+  height: max(100% + 16px, 44px);
+}
+
 .dsx-checkbox[data-state='checked'],
 .dsx-checkbox[data-state='indeterminate'] {
   background: var(--dsx-color-accent-track);
@@ -3940,155 +4103,6 @@ textarea {
   }
 }
 
-/* data-group-radius, not data-radius (2026-08-26, real bug found live): data-radius is a
-   reserved document-theme attribute that PortalThemeBoundary walks up via closest-ancestor
-   lookup to mirror the app's global radius setting into portaled content (Select/Dialog/
-   Popover/etc). A component-local data-radius sitting between a portal trigger and <html>
-   gets picked up instead of the real value — confirmed live via a Select inside this
-   component whose dropdown opened at 9999px border-radius instead of the real global radius. */
-
-.dsx-control-group {
-  display: inline-flex;
-  align-items: center;
-  gap: 0;
-  isolation: isolate;
-  border: var(--dsx-border-width-sm) solid var(--dsx-color-outline-variant);
-  background: var(--dsx-color-surface);
-  padding: var(--dsx-space-xs);
-  min-width: max-content;
-}
-
-/* Real bug found live (2026-08-26, direct screenshot: an active ToggleGroup item's filled
-   background poked a hard square corner past this frame's rounded-full pill): this used to set
-   a bespoke `--dsx-control-group-item-radius` custom property that only this file ever read.
-   ButtonGroup, SegmentedControl, ToggleGroup, and baseInput all already share one established
-   convention for the same concept — `--dsx-grouped-radius` (declared globally in tokens.css,
-   defaulting to `--dsx-rounded-md`) — and ToggleGroup's own per-item corner rules (this file's
-   sibling, toggle-group.css) read exactly that token with that exact fallback. Because
-   ControlGroup never set it, every child silently fell back to `--dsx-rounded-md` (8px)
-   regardless of ControlGroup's own `radius` prop — invisible for a plain-bordered rest-state
-   corner, glaringly visible once an active item got a real fill (this session's ToggleGroup
-   contrast fix). Renamed to join the existing convention instead of inventing a second one. */
-
-.dsx-control-group[data-group-radius='full'] {
-  border-radius: var(--dsx-rounded-full);
-  --dsx-grouped-radius: var(--dsx-rounded-full);
-}
-
-.dsx-control-group[data-group-radius='md'] {
-  border-radius: var(--dsx-rounded-md);
-  --dsx-grouped-radius: var(--dsx-rounded-md);
-}
-
-/* Direct children keep their own border/shadow/background — ControlGroup only manages the two
-   outer corners (so a child's own rounded shape matches the frame's curve instead of poking a
-   square corner past it, the exact bug that motivated this component) and a 1px seam between
-   adjacent children. Not a border-collapse like InputGroup: children here are not assumed to
-   share one border width, since they're full DS components, not stacked form parts.
-   --dsx-grouped-radius (set on the root above, per data-radius) keeps these child
-   selectors at class+pseudo-class specificity instead of repeating the [data-radius] attribute
-   on every rule — the CSS selector policy caps specificity, this keeps both radius values
-   covered by two selectors instead of four.
-
-   Real bug found live (2026-08-26): a child composed from a component that renders
-   PortalThemeBoundary (Select, Dialog, Popover, DropdownMenu, ...) injects a `hidden`
-   `<span data-dsx-portal-probe>` as ITS OWN first DOM sibling, ahead of the component's visible
-   markup — confirmed via a Select child, whose actual `:first-child` in the DOM was that hidden
-   probe span, not the visible trigger button. `> *:first-child` landed the corner radius on the
-   invisible probe, leaving the real trigger's own default (non-full) radius untouched — the
-   "currency picker isn't rounded" bug. The probe is always exactly one hidden leading sibling
-   (never last), so `:first-child` alone still needs a fallback for "the element right after a
-   hidden first child"; `:last-child` needed no change since the probe is never last. */
-
-.dsx-control-group > *:first-child:not([hidden]),
-.dsx-control-group > [hidden]:first-child + * {
-  border-start-start-radius: var(--dsx-grouped-radius);
-  border-end-start-radius: var(--dsx-grouped-radius);
-}
-
-.dsx-control-group > *:last-child {
-  border-start-end-radius: var(--dsx-grouped-radius);
-  border-end-end-radius: var(--dsx-grouped-radius);
-}
-
-/* Real bug found live (2026-08-26, direct screenshot annotation pointing at the seam between
-   Select and ToggleGroup): the two rules above only ever touched each child's OUTER corners —
-   the INNER corners (Select's right edge, ToggleGroup's left edge, where they meet at the
-   divider) were left at that child's own component default (Select's own `--dsx-rounded-md`,
-   8px), not explicitly squared. Confirmed via computed style: Select's own `border-radius`
-   read `9999px 8px 8px 9999px` — the outer-left corner correctly matched the pill, but the
-   inner-right corner sat at a stray 8px instead of 0, reading as a mismatched notch right at
-   the seam. Every grouped-control convention in this DS (ButtonGroup, SegmentedControl) squares
-   the inner-facing corners explicitly rather than assuming a child's own default is already 0 —
-   this closes the same gap here.
-
-   ROOT CAUSE, not another patch (2026-08-26, same-day correction after the fix above still
-   broke, confirmed live via a screenshot of the currency dropdown OPEN): the very next rule
-   added here (a generic "middle child" `:not(:first-child):not(:last-child) { border-radius:
-   0 }`) was written for a hypothetical 3+-child ControlGroup that has never existed anywhere in
-   this codebase — the only real usage today is exactly two children (Select + ToggleGroup).
-   Because PortalThemeBoundary's hidden probe span sits at real DOM index 0, Select's own
-   trigger sits at DOM index 1 — neither `:first-child` nor `:last-child` — so the speculative
-   middle-child rule matched it by accident, tied in specificity with the correct
-   `[hidden]:first-child + *` rule above, and won by coming later in the file, forcing
-   `border-radius: 0` on ALL FOUR corners including the outer-left one this file exists to
-   round. Deleted rather than special-cased further: a selector with no real target is the
-   actual defect here, not something to keep patching around. If a genuine 3+-child ControlGroup
-   ever ships, its middle-child corner logic needs designing against that real DOM shape then —
-   not speculatively now, against a shape that doesn't exist and that the hidden-probe mechanic
-   actively defeats. */
-
-.dsx-control-group > *:first-child:not([hidden]),
-.dsx-control-group > [hidden]:first-child + * {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-
-.dsx-control-group > *:last-child {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-}
-
-/* The `:not([hidden])` on the preceding sibling keeps the divider off the first VISIBLE child
-   when a PortalThemeBoundary child (Select, Dialog, Popover, DropdownMenu, ...) injects a hidden
-   `<span data-dsx-portal-probe>` at real DOM index 0 (2026-08-27 "stray separator on the left
-   side" bug). A plain `* + *` matches "has a preceding sibling element" regardless of whether
-   that sibling is hidden, so it previously needed a separate `content: none` override for the
-   probe case. Folding the guard into the base selector removes that override and keeps the rule
-   under the `0,3,0` selector-policy specificity ceiling — a three-class guard plus `::before`
-   lands at `0,3,1`. */
-
-.dsx-control-group > *:not([hidden]) + * {
-  position: relative;
-}
-
-.dsx-control-group > *:not([hidden]) + *::before {
-  content: '';
-  position: absolute;
-  inset-inline-start: calc(-1 * var(--dsx-space-xs));
-  top: 50%;
-  transform: translateY(-50%);
-  width: var(--dsx-border-width-sm);
-  height: 60%;
-  background: var(--dsx-color-outline-variant);
-  pointer-events: none;
-}
-
-/* Lift a focused child above its neighbors so its focus ring is never clipped by the group's
-   own rounded corners or the seam divider. */
-
-.dsx-control-group > *:focus-within {
-  z-index: 1;
-}
-
-.dsx-control-group[data-size='sm'] {
-  padding: var(--dsx-space-1, 2px);
-}
-
-.dsx-control-group[data-size='lg'] {
-  padding: var(--dsx-space-sm);
-}
-
 .dsx-dropdown-menu__content,
 .dsx-context-menu__content,
 .dsx-menubar__content,
@@ -4098,8 +4112,20 @@ textarea {
   box-shadow: var(--dsx-menu-content-elevation, var(--dsx-shadow-elevation-3));
 }
 
-.dsx-combobox__content {
-  --dsx-menu-content-elevation: var(--dsx-shadow-elevation-2);
+/* Nested floating tier (shared globalization of the FilterBar round-3 fix):
+   menu-tier content nested inside a modal-tier host (Popover/Content,
+   Dialog/Content — hosts provide FloatingLayerHostContext, menu contents add
+   `dsx-menu__nested`) escalates one step above the host popup
+   (`modal + 2`, above the Popover tier at `modal + 1`). A flat bump of the
+   dropdown tier is rejected on purpose: a standalone page-level menu must stay
+   below the modal overlay (80) so an open Dialog still masks page content —
+   one static value cannot be both above 91 and below 80. Standalone menus
+   never carry this class, so their base tier is untouched. */
+
+.dsx-select__content.dsx-menu__nested,
+.dsx-combobox__content.dsx-menu__nested,
+.dsx-menu__content.dsx-menu__nested {
+  z-index: calc(var(--dsx-z-index-modal, 90) + 2);
 }
 
 .dsx-dropdown-menu__label,
@@ -4378,7 +4404,7 @@ textarea {
   gap: var(--dsx-space-sm);
   padding: var(--dsx-space-sm) var(--dsx-space-sm) var(--dsx-space-sm) calc(var(--dsx-space-lg) + var(--dsx-space-sm));
   border: 0;
-  border-radius: var(--dsx-rounded-md);
+  border-radius: 0;
   background: transparent;
   color: var(--dsx-color-on-surface);
   text-align: left;
@@ -4803,7 +4829,7 @@ textarea {
   gap: var(--dsx-space-sm);
   padding: var(--dsx-space-sm) var(--dsx-space-sm) var(--dsx-space-sm) calc(var(--dsx-space-lg) + var(--dsx-space-sm));
   border: 0;
-  border-radius: var(--dsx-rounded-md);
+  border-radius: 0;
   background: transparent;
   color: var(--dsx-color-on-surface);
   text-align: left;
@@ -4890,6 +4916,9 @@ textarea {
 
 .dsx-empty-state {
   display: flex;
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -4919,6 +4948,8 @@ textarea {
 
 .dsx-empty-state__header {
   display: flex;
+  min-width: 0;
+  max-width: 100%;
   flex-direction: column;
   gap: var(--dsx-space-sm);
 }
@@ -5174,6 +5205,8 @@ textarea {
 .dsx-marquee {
   overflow: hidden;
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
   position: relative;
   --dsx-marquee-edge-fade-width: var(--dsx-space-xl);
 }
@@ -5213,6 +5246,10 @@ textarea {
   animation-play-state: paused;
 }
 
+.dsx-marquee:focus-within .dsx-marquee__track {
+  animation-play-state: paused;
+}
+
 .dsx-marquee__content {
   display: flex;
   align-items: center;
@@ -5304,7 +5341,7 @@ textarea {
   gap: var(--dsx-space-sm);
   padding: var(--dsx-space-sm) var(--dsx-space-sm) var(--dsx-space-sm) calc(var(--dsx-space-lg) + var(--dsx-space-sm));
   border: 0;
-  border-radius: var(--dsx-rounded-md);
+  border-radius: 0;
   background: transparent;
   color: var(--dsx-color-on-surface);
   text-align: left;
@@ -5744,6 +5781,7 @@ textarea {
 }
 
 .dsx-radio-item {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5754,6 +5792,20 @@ textarea {
   background: var(--dsx-color-surface);
 }
 
+/* Extended hit area — the visual circle stays 20/24/32px per size, but the
+   pointer target grows to 44px (WCAG 2.5.8 minimum 24px, TMA touch 44px).
+   Absolutely positioned, so it never affects layout. */
+
+.dsx-radio-item::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: max(100% + 16px, 44px);
+  height: max(100% + 16px, 44px);
+}
+
 .dsx-radio-item--sm {
   width: var(--dsx-size-sm);
   height: var(--dsx-size-sm);
@@ -5764,6 +5816,11 @@ textarea {
   height: var(--dsx-size-md);
 }
 
+.dsx-radio-item--lg {
+  width: var(--dsx-size-lg);
+  height: var(--dsx-size-lg);
+}
+
 .dsx-radio-item:focus-visible {
   outline: none;
   box-shadow: var(--dsx-shadow-focus-ring);
@@ -6014,7 +6071,7 @@ textarea {
   gap: var(--dsx-space-sm);
   padding: var(--dsx-space-sm) calc(var(--dsx-space-lg) + var(--dsx-space-sm)) var(--dsx-space-sm) var(--dsx-space-sm);
   border: 0;
-  border-radius: var(--dsx-rounded-md);
+  border-radius: 0;
   background: transparent;
   color: var(--dsx-color-on-surface);
   text-align: left;
@@ -6571,6 +6628,7 @@ textarea {
 .dsx-rating[data-size='xl'] .dsx-rating__star { width: var(--dsx-size-lg); height: var(--dsx-size-lg); }
 
 .dsx-rating__item {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -6588,6 +6646,18 @@ textarea {
     box-shadow var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
 }
 
+/* Keep the small star unchanged while filling the gap with a 24px target. */
+
+.dsx-rating:where([data-size='sm']) .dsx-rating__item::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--dsx-size-md);
+  height: var(--dsx-size-md);
+  transform: translate(-50%, -50%);
+}
+
 .dsx-rating__item:hover:not([data-disabled]),
 .dsx-rating__item:focus-visible,
 .dsx-rating__item[data-state='checked'] {
@@ -7279,8 +7349,10 @@ textarea {
 
 .dsx-chart {
   position: relative;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
-  min-height: var(--dsx-chart-min-height);
+  min-height: var(--dsx-chart-min-height, 240px);
   aspect-ratio: var(--dsx-chart-aspect-ratio, 1.7778);
   color: var(--dsx-semantic-card-foreground);
   overflow: hidden;
@@ -7307,6 +7379,13 @@ textarea {
   gap: var(--dsx-space-xs);
   pointer-events: none;
   text-align: center;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.dsx-chart__center-label > * {
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-chart__empty {
@@ -8538,6 +8617,10 @@ textarea {
   backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
   border: var(--dsx-border-width-sm) solid var(--dsx-panel-border-color);
   border-radius: var(--dsx-rounded-lg);
+  /* Menu tier (B4 Q3): the merged Popover base paints step 4 here, which
+     outranks dialogs' peers — reassert step 3 in the component file, where it
+     wins by order. Same expression as baseMenu. */
+  box-shadow: var(--dsx-menu-content-elevation, var(--dsx-shadow-elevation-3));
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -8605,7 +8688,7 @@ textarea {
   justify-content: space-between;
   gap: var(--dsx-space-sm);
   padding: var(--dsx-space-sm) var(--dsx-space-md);
-  border-radius: var(--dsx-rounded-sm);
+  border-radius: 0;
   cursor: pointer;
   color: var(--dsx-color-on-surface);
   font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
@@ -8867,9 +8950,17 @@ textarea {
   --dsx-data-list-marker-size: 2.25em;
 }
 
+/* Unordered marker is a drawn dot, not a text glyph: a radial fill at a
+   fixed fraction of the marker box, so it scales with item size for free —
+   no compounding, no font-dependent glyph rendering. Ordered numerals stay
+   text (counter) at natural size. */
+
 .dsx-data-list[data-list-type='unordered'] > .dsx-data-list__item::before {
-  content: '\2022';
-  font-size: 1.1em;
+  content: '';
+  background: radial-gradient(circle closest-side, currentColor 100%, transparent 100%);
+  background-size: 32% 32%;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 .dsx-data-list[data-list-type='ordered'] > .dsx-data-list__item::before {
@@ -8880,8 +8971,10 @@ textarea {
 /* ── Item body — offset for marker breathing room ──────── */
 
 .dsx-data-list__item-body {
+  box-sizing: border-box;
   display: flex;
-  align-items: flex-start;
+  flex-wrap: wrap;
+  align-items: center;
   gap: var(--dsx-space-md);
   padding: var(--dsx-space-sm) var(--dsx-space-md);
   padding-inline-start: var(--dsx-space-2xl);
@@ -8896,6 +8989,7 @@ textarea {
 
 .dsx-data-list__media {
   flex-shrink: 0;
+  align-self: flex-start;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -8914,6 +9008,7 @@ textarea {
 }
 
 .dsx-data-list__item[data-size='xs'] > .dsx-data-list__item-body {
+  padding-block: var(--dsx-space-xs);
   min-height: var(--dsx-size-lg);
 }
 
@@ -8922,10 +9017,12 @@ textarea {
 }
 
 .dsx-data-list__item[data-size='md'] > .dsx-data-list__item-body {
+  padding-block: var(--dsx-space-md);
   min-height: var(--dsx-size-2xl);
 }
 
 .dsx-data-list__item[data-size='lg'] > .dsx-data-list__item-body {
+  padding-block: var(--dsx-space-lg);
   min-height: var(--dsx-size-3xl);
 }
 
@@ -8945,11 +9042,12 @@ textarea {
 .dsx-data-list__content {
   display: grid;
   gap: var(--dsx-space-xs);
-  flex: 1;
+  flex: 1 1 8rem;
   min-width: 0;
 }
 
 .dsx-data-list__text {
+  overflow-wrap: anywhere;
   color: var(--dsx-color-on-surface);
   font-family: var(--dsx-typography-label-large-font-family), sans-serif;
   font-size: var(--dsx-typography-label-large-font-size);
@@ -8959,6 +9057,7 @@ textarea {
 }
 
 .dsx-data-list__metadata {
+  overflow-wrap: anywhere;
   color: var(--dsx-color-on-surface-variant);
   font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
   font-size: var(--dsx-typography-body-medium-font-size);
@@ -9029,6 +9128,7 @@ textarea {
 
 .dsx-data-table {
   width: 100%;
+  min-width: 0;
   overflow: hidden;
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   border-radius: var(--dsx-rounded-lg);
@@ -9091,25 +9191,215 @@ textarea {
 /* ── Toolbar: shares container background, bottom separator ────────── */
 
 .dsx-data-table-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--dsx-space-md);
+  padding: var(--dsx-space-sm) var(--dsx-space-md);
   background: var(--dsx-color-surface);
   border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
 }
 
-/* ── Pagination: shares container background, top separator ────────── */
-
-.dsx-data-table-pagination {
-  background: var(--dsx-color-surface);
-  border-top: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+.dsx-data-table-toolbar__search {
+  flex: 1 1 12rem;
+  min-width: 0;
 }
 
-/* ── Empty state ───────────────────────────────────────────────────── */
+.dsx-data-table__toolbar-region {
+  display: grid;
+}
 
-.dsx-data-table__empty {
+.dsx-data-table-toolbar__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--dsx-space-sm);
+  min-width: 0;
+  max-width: 100%;
+}
+
+.dsx-data-table-toolbar__row-count {
+  display: flex;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-body-small-font-family);
+  font-size: var(--dsx-typography-body-small-font-size);
+  font-weight: var(--dsx-typography-body-small-font-weight);
+  white-space: nowrap;
+}
+
+.dsx-data-table__sort-button {
+  position: relative;
+  border-radius: var(--dsx-rounded-sm);
+  transition:
+    color var(--dsx-motion-duration-fast) var(--dsx-motion-easing-standard),
+    background-color var(--dsx-motion-duration-fast) var(--dsx-motion-easing-standard);
+}
+
+.dsx-data-table__sort-button::before {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  height: max(100%, var(--dsx-size-md));
+  transform: translateY(-50%);
+}
+
+.dsx-data-table__sort-button:hover {
+  background: var(--dsx-effect-hover-ghost);
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-data-table__sort-button:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+}
+
+.dsx-data-table__sort-indicator {
+  display: inline-grid;
+  place-items: center;
+  width: var(--dsx-size-sm);
+  height: var(--dsx-size-sm);
+  flex: 0 0 var(--dsx-size-sm);
+  color: var(--dsx-color-on-surface-variant);
+}
+
+.dsx-data-table__sort-indicator:where([data-direction='none']) {
+  opacity: 0.55;
+}
+
+.dsx-data-table__sort-indicator:where([data-direction='asc']),
+.dsx-data-table__sort-indicator:where([data-direction='desc']) {
+  color: var(--dsx-color-accent-indicator);
+}
+
+/* ── Pagination: shares container background, top separator ────────── */
+
+.dsx-data-table-pagination {
+  background: var(--dsx-color-surface);
+  border-top: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+}
+
+.dsx-data-table-pagination__info,
+.dsx-data-table-pagination__page-size {
+  display: flex;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+  color: var(--dsx-color-on-surface-variant);
+  font-size: var(--dsx-typography-label-small-font-size);
+  white-space: nowrap;
+}
+
+.dsx-data-table-pagination__navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  min-width: 0;
+  gap: var(--dsx-space-xs);
+}
+
+.dsx-data-table-pagination__page-size {
+  flex-wrap: wrap;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.dsx-data-table-pagination__navigation .dsx-pagination__list {
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+}
+
+.dsx-data-table-pagination__page-status {
+  color: var(--dsx-color-on-surface-variant);
+  font-size: var(--dsx-typography-label-small-font-size);
+  white-space: nowrap;
+}
+
+/* ── Bulk-selection action bar ─────────────────────────────────────── */
+
+.dsx-data-table__bulk-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--dsx-space-sm);
+  padding: var(--dsx-space-sm) var(--dsx-space-md);
+  background: var(--dsx-color-surface-raised);
+  color: var(--dsx-color-on-surface);
+  border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+}
+
+.dsx-data-table__bulk-bar-count {
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--dsx-size-md);
+  padding: 0 var(--dsx-space-sm);
+  border-radius: var(--dsx-rounded-md);
+  background: var(--dsx-color-accent-surface);
+  color: var(--dsx-color-accent-indicator);
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-large-font-weight);
+  white-space: nowrap;
+}
+
+.dsx-data-table__bulk-bar-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--dsx-space-xs);
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.dsx-data-table__bulk-bar-clear {
+  margin-inline-start: auto;
+}
+
+/* ── Pagination placement ──────────────────────────────────────────── */
+
+/* Bottom is the default (border-top separator). Top flips the border. */
+
+.dsx-data-table-pagination.dsx-data-table__pagination-top {
+  border-top: 0;
+  border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+}
+
+/* ── Empty state ───────────────────────────────────────────────────── */
+
+.dsx-data-table__empty {
   height: var(--dsx-data-table-empty-height);
   text-align: center;
+  vertical-align: middle;
   color: var(--dsx-color-on-surface-variant);
 }
 
+.dsx-data-table__empty-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+  padding: var(--dsx-space-lg) var(--dsx-space-md);
+}
+
+.dsx-data-table__empty-content strong {
+  color: var(--dsx-color-on-surface);
+  font-family: var(--dsx-typography-label-large-font-family);
+  font-size: var(--dsx-typography-label-large-font-size);
+  font-weight: var(--dsx-typography-label-large-font-weight);
+}
+
+.dsx-data-table__empty-content span {
+  font-family: var(--dsx-typography-body-small-font-family);
+  font-size: var(--dsx-typography-body-small-font-size);
+}
+
 /* ── Expanded detail row ───────────────────────────────────────────── */
 
 .dsx-data-table [data-expanded-detail='true'] {
@@ -9461,7 +9751,7 @@ textarea {
 }
 
 .dsx-floating-panel[data-dragging] {
-  box-shadow: var(--dsx-shadow-elevation-4);
+  box-shadow: var(--dsx-shadow-elevation-5); /* Spotlight while lifted (B4 Q3) */
   cursor: grabbing;
 }
 
@@ -9644,7 +9934,10 @@ textarea {
 }
 
 .dsx-item {
+  box-sizing: border-box;
   display: flex;
+  flex-wrap: wrap;
+  min-width: 0;
   align-items: center;
   gap: var(--dsx-space-md);
   padding: var(--dsx-space-sm) var(--dsx-space-md);
@@ -9663,6 +9956,7 @@ textarea {
 }
 
 .dsx-item--xs {
+  padding-block: var(--dsx-space-xs);
   min-height: var(--dsx-size-lg);
 }
 
@@ -9671,10 +9965,12 @@ textarea {
 }
 
 .dsx-item--md {
+  padding-block: var(--dsx-space-md);
   min-height: var(--dsx-size-2xl);
 }
 
 .dsx-item--lg {
+  padding-block: var(--dsx-space-lg);
   min-height: var(--dsx-size-3xl);
 }
 
@@ -9694,7 +9990,9 @@ textarea {
 .dsx-item__content {
   display: grid;
   gap: var(--dsx-space-xs);
-  flex: 1;
+  flex: 1 1 8rem;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
 .dsx-item__title {
@@ -9716,6 +10014,9 @@ textarea {
 
 .dsx-item__actions {
   display: inline-flex;
+  flex-wrap: wrap;
+  min-width: 0;
+  max-width: 100%;
   align-items: center;
   gap: var(--dsx-space-sm);
 }
@@ -10489,25 +10790,15 @@ textarea {
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
 }
 
-.dsx-qr-code svg {
+.dsx-qr-code svg,
+.dsx-qr-code:where(.dsx-qr-code-size-sm, .dsx-qr-code-size-md, .dsx-qr-code-size-lg) svg {
   display: block;
   border-radius: var(--dsx-rounded-sm);
 }
 
-.dsx-qr-code-size-sm svg {
-  width: var(--dsx-size-xs);
-  height: var(--dsx-size-xs);
-}
-
-.dsx-qr-code-size-md svg {
-  width: var(--dsx-size-md);
-  height: var(--dsx-size-md);
-}
-
-.dsx-qr-code-size-lg svg {
-  width: var(--dsx-size-xl);
-  height: var(--dsx-size-xl);
-}
+/* Painted size comes from the runtime sizeMap (sm: 128, md: 192, lg: 256px)
+   via the adapter's own width/height attributes — the CSS never constrains
+   the SVG, so the matrix always renders at a scannable size. */
 
 /* High-contrast mode: QR modules use high-contrast fg, background stays scannable. */
 
@@ -11918,7 +12209,7 @@ textarea {
   background-color: var(--dsx-color-surface);
   border-radius: var(--dsx-rounded-md);
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
-  box-shadow: var(--dsx-shadow-elevation-2);
+  box-shadow: var(--dsx-shadow-elevation-5); /* Spotlight (B4 Q3): below dialogs, above all menus */
 }
 
 [data-sonner-toast][data-type='success'],
@@ -12026,6 +12317,10 @@ textarea {
   border-bottom: 0;
 }
 
+.dsx-table__body tr {
+  transition: background-color var(--dsx-motion-duration-fast) var(--dsx-motion-easing-standard);
+}
+
 .dsx-table__body tr:hover {
   background: var(--dsx-effect-hover-ghost);
 }
@@ -12053,10 +12348,6 @@ textarea {
   font-weight: var(--dsx-typography-label-large-font-weight);
 }
 
-.dsx-table__row:hover {
-  background: var(--dsx-color-high-contrast-container);
-}
-
 .dsx-table__row:last-child .dsx-table__cell {
   border-bottom: 0;
 }
@@ -12085,7 +12376,14 @@ textarea {
 }
 
 .dsx-table[data-variant='ghost'] .dsx-table__row:hover {
-  background: var(--dsx-color-high-contrast-container);
+  background: var(--dsx-effect-hover-ghost);
+}
+
+/* ---- separator ---- */
+
+.dsx-table[data-separator='grid'] .dsx-table__head:not(:last-child),
+.dsx-table[data-separator='grid'] .dsx-table__cell:not(:last-child) {
+  border-right: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
 }
 
 /* ---- layout ---- */
@@ -12113,16 +12411,16 @@ textarea {
 
 /* ---- cell justify ---- */
 
-.dsx-table__cell[data-justify='start'] {
-  justify-content: flex-start;
+.dsx-table .dsx-table__cell[data-justify='start'] {
+  text-align: start;
 }
 
-.dsx-table__cell[data-justify='center'] {
-  justify-content: center;
+.dsx-table .dsx-table__cell[data-justify='center'] {
+  text-align: center;
 }
 
-.dsx-table__cell[data-justify='end'] {
-  justify-content: flex-end;
+.dsx-table .dsx-table__cell[data-justify='end'] {
+  text-align: end;
 }
 
 /* ---- cell width ---- */
@@ -12159,12 +12457,12 @@ textarea {
 /* ---- column header cell ---- */
 
 .dsx-table__column-header-cell {
-  cursor: pointer;
-  user-select: none;
+  cursor: default;
 }
 
 .dsx-table__column-header-cell[data-sortable='true'] {
   cursor: pointer;
+  user-select: none;
 }
 
 .dsx-table__column-header-cell[data-sorted='asc']::after,
@@ -12222,6 +12520,13 @@ textarea {
   display: inline-flex;
   align-items: center;
   width: fit-content;
+  /* Narrow-container rule: cap at the container and scroll internally —
+     same containment as the segmented-control/button/toggle-group family.
+     A 5-tab strip wider than a 320px viewport scrolls instead of bleeding
+     with unreachable tabs. No visual change at widths that fit. */
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
   border-bottom: var(--dsx-border-width-md, var(--dsx-border-width-sm)) solid var(--dsx-control-separator-color);
   gap: var(--dsx-space-xs);
 }
@@ -12239,6 +12544,9 @@ textarea {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  /* Never compress inside the scrolled list — labels would truncate
+     otherwise. No effect in roomy containers. */
+  flex-shrink: 0;
   padding: var(--dsx-space-sm) var(--dsx-space-md);
   border: 0;
   border-radius: var(--dsx-rounded-md);
@@ -12938,7 +13246,40 @@ textarea {
   background-color: var(--dsx-color-surface);
   border-radius: var(--dsx-rounded-md);
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
-  box-shadow: var(--dsx-shadow-elevation-2);
+  box-shadow: var(--dsx-shadow-elevation-5); /* Spotlight (B4 Q3): below dialogs, above all menus */
+}
+
+/* Predetermined slot placement for action-bearing toasts: without it all
+   four slots land as flex siblings in one row, so title + description sit
+   side by side and squeeze the action (destructive story). Text stacks in
+   column one, action pins center-right, close top-right — no consumer
+   wrapper needed. Action-less toasts keep the flex row above untouched. */
+
+.dsx-toast:has(.dsx-toast__action) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  grid-template-areas:
+    "title action close"
+    "description action close";
+  align-items: center;
+}
+
+.dsx-toast:has(.dsx-toast__action) .dsx-toast__title {
+  grid-area: title;
+}
+
+.dsx-toast:has(.dsx-toast__action) .dsx-toast__description {
+  grid-area: description;
+}
+
+.dsx-toast:has(.dsx-toast__action) .dsx-toast__action {
+  grid-area: action;
+  align-self: center;
+}
+
+.dsx-toast:has(.dsx-toast__action) .dsx-toast__close {
+  grid-area: close;
+  align-self: start;
 }
 
 .dsx-toast[data-variant='success'] {
@@ -13149,6 +13490,11 @@ textarea {
   align-items: stretch;
   gap: 0;
   isolation: isolate;
+  /* Narrow-container rule (TMA re-audit 2026-09-23): the fused frame cannot
+     wrap, so cap at the container and scroll instead of hard-clipping the
+     last item on 320px screens. */
+  max-width: 100%;
+  overflow-x: auto;
 }
 
 .dsx-toggle-group__item {
@@ -13724,6 +14070,11 @@ textarea {
   align-items: stretch;
   gap: 0;
   isolation: isolate;
+  /* Narrow-container rule (TMA re-audit 2026-09-23): the fused frame cannot
+     wrap, so cap at the container and scroll instead of hard-clipping the
+     last action on 320px screens. */
+  max-width: 100%;
+  overflow-x: auto;
 }
 
 .dsx-button-group > *,
@@ -13747,6 +14098,26 @@ textarea {
   margin-inline-start: calc(-1 * var(--dsx-border-width-sm));
 }
 
+/* ---- variant: default = fused cluster, children render borderless ---- */
+
+.dsx-button-group--default > * {
+  border-color: transparent;
+}
+
+/* ---- size: the group drives children min-height so sm/md/lg differ ---- */
+
+.dsx-button-group[data-size='sm'] > * {
+  min-height: var(--dsx-density-control-height-sm, var(--dsx-size-lg));
+}
+
+.dsx-button-group[data-size='md'] > * {
+  min-height: var(--dsx-density-control-height, var(--dsx-size-xl));
+}
+
+.dsx-button-group[data-size='lg'] > * {
+  min-height: var(--dsx-density-control-height-lg, var(--dsx-size-2xl));
+}
+
 .dsx-button-group > *:focus-visible {
   z-index: var(--dsx-z-index-elevated);
 }
@@ -13883,7 +14254,7 @@ textarea {
 
 .dsx-article-poll button { min-height: var(--dsx-size-lg); }
 
-.dsx-prose { width: 100%; max-width: 68ch; color: var(--dsx-color-on-surface); font-family: var(--dsx-typography-body-medium-font-family); line-height: 1.65; }
+.dsx-prose { width: 100%; min-width: 0; max-width: 68ch; overflow-wrap: anywhere; color: var(--dsx-color-on-surface); font-family: var(--dsx-typography-body-medium-font-family); line-height: 1.65; }
 
 .dsx-prose > :first-child { margin-block-start: 0; }
 
@@ -13911,7 +14282,9 @@ textarea {
 
 .dsx-prose th, .dsx-prose td { padding: var(--dsx-space-sm); border: var(--dsx-border-width-sm) solid var(--dsx-color-outline); text-align: start; white-space: nowrap; }
 
-.dsx-result { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--dsx-space-md); min-height: var(--dsx-empty-state-min-height); padding: var(--dsx-space-xl); text-align: center; color: var(--dsx-color-on-surface); }
+.dsx-result { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--dsx-space-md); min-width: 0; max-width: 100%; overflow-wrap: anywhere; min-height: var(--dsx-empty-state-min-height); padding: var(--dsx-space-xl); text-align: center; color: var(--dsx-color-on-surface); }
+
+.dsx-result > * { min-width: 0; max-width: 100%; }
 
 .dsx-result__icon { display: inline-flex; color: var(--_result-icon-color, var(--dsx-color-on-surface-variant)); }
 
@@ -14081,6 +14454,27 @@ textarea {
   min-width: var(--dsx-copy-field-action-min-width);
 }
 
+/* One frame: the action half inherits the field-shell outline token at rest
+   and hover, so the group reads as a single frame (the -1px join overlaps
+   the seam into the frame line). baseInput would glow it — pinned here.
+   Focus ring untouched. */
+
+.dsx-copy-field .dsx-copy-field__action,
+.dsx-copy-field__action:hover {
+  border-color: var(--dsx-boundary-control-color);
+}
+
+/* Read-only value half: no hover invitation */
+
+:where(.dsx-copy-field) .dsx-input-shell:hover {
+  border-color: var(--dsx-boundary-control-color);
+  background: var(--dsx-color-surface);
+}
+
+.dsx-copy-field__input:hover {
+  cursor: default;
+}
+
 .dsx-code-input {
   width: 100%;
 }
@@ -14943,6 +15337,15 @@ textarea {
   border-color: var(--dsx-color-secondary-container);
 }
 
+/* ---- halo: resting accent ring on every variant ---- */
+
+.dsx-icon-button:where([data-variant='secondary'])[data-halo='true'],
+.dsx-icon-button:where([data-variant='outline'])[data-halo='true'],
+.dsx-icon-button:where([data-variant='ghost'])[data-halo='true'],
+.dsx-icon-button:where([data-variant='destructive'])[data-halo='true'] {
+  box-shadow: var(--dsx-shadow-accent-ring);
+}
+
 .dsx-icon-button:where([data-variant='outline']):hover:not(:disabled):not([data-disabled='true']),
 .dsx-icon-button:where([data-variant='ghost']):hover:not(:disabled):not([data-disabled='true']) {
   color: var(--dsx-color-accent-indicator);
@@ -14955,17 +15358,37 @@ textarea {
   border-color: var(--dsx-color-error-10);
 }
 
-.dsx-icon-button[data-loading='true'] {
-  cursor: var(--dsx-cursor-wait, wait);
-}
+/* ---- pressed (after :hover — LVHA: :active must win while held) ---- */
 
-.dsx-icon-button__content {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition:
-    opacity var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease),
-    color var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
+.dsx-icon-button:where([data-variant='primary']):active:not(:disabled):not([data-disabled='true']),
+.dsx-icon-button:where([data-variant='primary'])[aria-pressed='true']:not(:disabled):not([data-disabled='true']) {
+  background: linear-gradient(var(--dsx-effect-pressed-primary), var(--dsx-effect-pressed-primary)), var(--dsx-color-accent-track);
+  color: var(--dsx-color-accent-contrast);
+}
+
+.dsx-icon-button:where([data-variant='primary'])[data-halo='true']:active:not(:disabled):not([data-disabled='true']),
+.dsx-icon-button:where([data-variant='primary'])[data-halo='true'][aria-pressed='true']:not(:disabled):not([data-disabled='true']) {
+  box-shadow: var(--dsx-shadow-accent-ring);
+}
+
+.dsx-icon-button:where([data-variant='secondary']):active:not(:disabled):not([data-disabled='true']),
+.dsx-icon-button:where([data-variant='secondary'])[aria-pressed='true']:not(:disabled):not([data-disabled='true']) {
+  background: linear-gradient(var(--dsx-effect-pressed-layer), var(--dsx-effect-pressed-layer)), var(--dsx-color-secondary);
+  color: var(--dsx-color-on-secondary);
+  border-color: var(--dsx-color-secondary);
+}
+
+.dsx-icon-button[data-loading='true'] {
+  cursor: var(--dsx-cursor-wait, wait);
+}
+
+.dsx-icon-button__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    opacity var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease),
+    color var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
 }
 
 .dsx-icon-button[data-loading='true'] .dsx-icon-button__content {
@@ -15161,6 +15584,8 @@ button.dsx-link--none {
 .dsx-pagination__list {
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
+  row-gap: var(--dsx-space-xs);
   gap: var(--dsx-space-xs);
   padding: var(--dsx-space-xs);
   border-radius: var(--dsx-rounded-lg);
@@ -15204,13 +15629,13 @@ button.dsx-link--none {
 }
 
 .dsx-pagination__link--active {
-  background: var(--dsx-color-accent-indicator);
+  background: var(--dsx-color-accent-track);
   color: var(--dsx-color-on-primary);
   font-weight: var(--dsx-typography-label-large-font-weight, 600);
 }
 
 .dsx-pagination__link--active:hover:not(:disabled):not([data-disabled]) {
-  background: var(--dsx-color-accent-indicator);
+  background: var(--dsx-color-accent-track);
   color: var(--dsx-color-on-primary);
 }
 
@@ -15247,19 +15672,27 @@ button.dsx-link--none {
   white-space: nowrap;
 }
 
+.dsx-pagination__status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-body-medium-font-size);
+  white-space: nowrap;
+}
+
 .dsx-pagination__page-size {
-  appearance: none;
   display: inline-flex;
   align-items: center;
+  min-width: 8rem;
   height: var(--dsx-size-lg);
   padding: 0 var(--dsx-space-sm);
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   border-radius: var(--dsx-rounded-md);
-  background: var(--dsx-color-surface);
   color: var(--dsx-color-on-surface);
   font-family: var(--dsx-typography-label-large-font-family), sans-serif;
   font-size: var(--dsx-typography-label-large-font-size);
-  cursor: pointer;
 }
 
 .dsx-pagination__page-size:focus-visible {
@@ -15267,6 +15700,32 @@ button.dsx-link--none {
   box-shadow: var(--dsx-shadow-focus-ring);
 }
 
+.dsx-pagination__page-input {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-body-medium-font-size);
+  white-space: nowrap;
+}
+
+.dsx-pagination__page-input input {
+  width: var(--dsx-size-3xl);
+  height: var(--dsx-size-lg);
+  padding: 0 var(--dsx-space-xs);
+  border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+  border-radius: var(--dsx-rounded-md);
+  background: var(--dsx-color-surface);
+  color: var(--dsx-color-on-surface);
+  text-align: center;
+}
+
+.dsx-pagination__page-input input:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+}
+
 .dsx-pagination__item {
   display: inline-flex;
   align-items: center;
@@ -15311,14 +15770,20 @@ button.dsx-link--none {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--dsx-space-md);
+  flex-wrap: wrap;
+  row-gap: var(--dsx-space-sm);
+  column-gap: var(--dsx-space-md);
+  min-width: 0;
 }
 
 .dsx-pagination-bar__controls {
   display: flex;
   align-items: center;
-  gap: var(--dsx-space-sm);
-  flex-shrink: 0;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  row-gap: var(--dsx-space-xs);
+  column-gap: var(--dsx-space-sm);
+  min-width: 0;
 }
 
 .dsx-password-input {
@@ -15449,7 +15914,29 @@ button.dsx-link--none {
   background-color: var(--dsx-color-surface-sunken);
   border: var(--dsx-boundary-control-width) solid transparent;
   border-radius: var(--dsx-grouped-radius, var(--dsx-rounded-md));
-  min-width: max-content;
+  /* Narrow-container rule (TMA slice-1 2026-09-23): same fused-frame
+     containment as button/toggle groups — min-width:max-content would override
+     the cap and hard-clip right segments in narrow FilterBars, so floor at 0,
+     cap at the container, and scroll. The sliding indicator measures live item
+     boxes, so scrolling shifts it along correctly. */
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+/* Fill opt-in (`fill` prop): the root spans the container and items share
+   the width equally. The indicator measures live boxes, so it tracks fill
+   widths with no change. For overflowing groups keep the default hug root
+   (scroll containment above) — fill is for few-item groups that fit. */
+
+.dsx-segmented-control:where(.dsx-segmented-control--fill, [data-fill='true']) {
+  width: 100%;
+  align-self: stretch;
+}
+
+.dsx-segmented-control:where(.dsx-segmented-control--fill, [data-fill='true']) .dsx-segmented-control__item {
+  flex: 1 1 0;
+  min-width: 0;
 }
 
 /* ---- Disabled root ---- */
@@ -15467,6 +15954,9 @@ button.dsx-link--none {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  /* Never compress inside the scrolled root — labels truncate ("Cl…"/"G…")
+     otherwise. No effect in roomy containers. */
+  flex-shrink: 0;
   gap: var(--dsx-space-xs);
   padding-inline: var(--dsx-space-md);
   border: 0;
@@ -15494,6 +15984,37 @@ button.dsx-link--none {
   margin-inline-start: calc(-1 * var(--dsx-boundary-control-width));
 }
 
+/* ---- Vertical orientation ---- */
+
+.dsx-segmented-control[data-orientation='vertical'] {
+  flex-direction: column;
+  min-width: 0;
+  /* Definite height: Firefox flex-shrinks auto-height column roots inside the
+     matrix row down toward one row; max-content is identical to auto everywhere
+     else and immune to the shrink. */
+  height: max-content;
+}
+
+.dsx-segmented-control[data-orientation='vertical'] .dsx-segmented-control__item + .dsx-segmented-control__item {
+  margin-inline-start: 0;
+  margin-block-start: calc(-1 * var(--dsx-boundary-control-width));
+}
+
+.dsx-segmented-control[data-orientation='vertical'] .dsx-segmented-control__indicator {
+  top: 0;
+  bottom: auto;
+  left: var(--dsx-space-2xs);
+  right: var(--dsx-space-2xs);
+  width: auto;
+  height: 0;
+  transition-property: transform, height;
+}
+
+.dsx-segmented-control[data-orientation='vertical'] .dsx-segmented-control__indicator::before {
+  inset-block: var(--dsx-space-2xs);
+  inset-inline: 0;
+}
+
 /* ---- Sliding indicator — Mantine-style measured pill ---- */
 
 .dsx-segmented-control__indicator {
@@ -15567,7 +16088,7 @@ button.dsx-link--none {
 }
 
 .dsx-segmented-control--sm .dsx-segmented-control__item {
-  min-height: var(--dsx-size-lg);
+  min-height: calc(var(--dsx-density-control-height-sm, var(--dsx-size-lg)) - 2 * var(--dsx-boundary-control-width));
   padding-inline: var(--dsx-space-sm);
   font-size: var(--dsx-typography-label-small-font-size);
   letter-spacing: var(--dsx-typography-label-small-letter-spacing);
@@ -15578,7 +16099,7 @@ button.dsx-link--none {
 }
 
 .dsx-segmented-control--md .dsx-segmented-control__item {
-  min-height: var(--dsx-size-xl);
+  min-height: calc(var(--dsx-density-control-height, var(--dsx-size-xl)) - 2 * var(--dsx-boundary-control-width));
   padding-inline: var(--dsx-space-md);
 }
 
@@ -15587,7 +16108,7 @@ button.dsx-link--none {
 }
 
 .dsx-segmented-control--lg .dsx-segmented-control__item {
-  min-height: var(--dsx-size-2xl);
+  min-height: calc(var(--dsx-density-control-height-lg, var(--dsx-size-2xl)) - 2 * var(--dsx-boundary-control-width));
   padding-inline: var(--dsx-space-lg);
   font-size: var(--dsx-typography-label-large-font-size);
   letter-spacing: var(--dsx-typography-label-large-letter-spacing);
@@ -15646,6 +16167,27 @@ button.dsx-link--none {
   padding-inline: 0;
 }
 
+/* ---- Vertical: icon-only targets also constrain the block axis (inline
+   sizing is inherited from the base icon-only rules above) ---- */
+
+.dsx-segmented-control--sm[data-orientation='vertical'] .dsx-segmented-control__item:where([data-icon-only]) {
+  block-size: var(--dsx-density-control-height-sm, var(--dsx-size-lg));
+  min-block-size: var(--dsx-density-control-height-sm, var(--dsx-size-lg));
+  padding-block: 0;
+}
+
+.dsx-segmented-control--md[data-orientation='vertical'] .dsx-segmented-control__item:where([data-icon-only]) {
+  block-size: var(--dsx-density-control-height, var(--dsx-size-xl));
+  min-block-size: var(--dsx-density-control-height, var(--dsx-size-xl));
+  padding-block: 0;
+}
+
+.dsx-segmented-control--lg[data-orientation='vertical'] .dsx-segmented-control__item:where([data-icon-only]) {
+  block-size: var(--dsx-density-control-height-lg, var(--dsx-size-2xl));
+  min-block-size: var(--dsx-density-control-height-lg, var(--dsx-size-2xl));
+  padding-block: 0;
+}
+
 .dsx-segmented-control__item:focus-visible {
   outline: none;
   box-shadow: var(--dsx-shadow-focus-ring);
@@ -16173,6 +16715,8 @@ button.dsx-link--none {
 
 .dsx-stat-card__footer {
   display: flex;
+  flex-wrap: wrap;
+  min-width: 0;
   align-items: center;
   gap: var(--dsx-space-xs);
 }
@@ -16202,6 +16746,9 @@ button.dsx-link--none {
 
 .dsx-metric {
   display: flex;
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
   flex-direction: column;
   gap: var(--dsx-space-xs);
   color: var(--dsx-color-on-surface);
@@ -16226,6 +16773,8 @@ button.dsx-link--none {
 
 .dsx-metric__delta {
   display: inline-flex;
+  flex-wrap: wrap;
+  min-width: 0;
   align-items: center;
   gap: var(--dsx-space-xs);
   color: var(--dsx-color-on-surface-variant);
@@ -16253,9 +16802,10 @@ button.dsx-link--none {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: var(--dsx-space-sm);
+  gap: var(--dsx-filter-bar-gap, var(--dsx-space-sm));
   width: 100%;
-  padding: var(--dsx-space-md);
+  min-width: 0;
+  padding: var(--dsx-filter-bar-padding, var(--dsx-space-md));
   border: var(--dsx-border-width-sm) solid var(--dsx-control-separator-color);
   border-radius: var(--dsx-rounded-lg);
   background: var(--dsx-color-surface-raised);
@@ -16266,7 +16816,15 @@ button.dsx-link--none {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: var(--dsx-space-sm);
+  gap: var(--dsx-filter-bar-gap, var(--dsx-space-sm));
+  /* Narrow-container rule (TMA slice-1 2026-09-23): as flex items of the bar
+     these rows default to min-width:auto (= widest child), so a 350px
+     SegmentedControl props a 272px bar open and the control's own
+     max-width:100% resolves against the overflowed row — a no-op. Floor at 0
+     and cap at 100% so the row shrinks to the bar and fused children engage
+     their internal scroll instead. */
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-filter-bar__control { display: inline-flex; border-radius: var(--dsx-rounded-md); }
@@ -16280,18 +16838,380 @@ button.dsx-link--none {
 .dsx-filter-bar__summary {
   min-width: 0;
   color: var(--dsx-color-on-surface-variant);
-  font-family: var(--dsx-typography-body-small-font-family), sans-serif;
-  font-size: var(--dsx-typography-body-small-font-size);
-  line-height: var(--dsx-typography-body-small-line-height);
+  font-family: var(--dsx-filter-bar-summary-font-family, var(--dsx-typography-body-small-font-family)), sans-serif;
+  font-size: var(--dsx-filter-bar-summary-font-size, var(--dsx-typography-body-small-font-size));
+  font-weight: var(--dsx-filter-bar-summary-font-weight, var(--dsx-typography-body-small-font-weight));
+  line-height: var(--dsx-filter-bar-summary-line-height, var(--dsx-typography-body-small-line-height));
 }
 
 .dsx-filter-bar__actions {
   margin-inline-start: auto;
+  flex: none;
+}
+
+.dsx-filter-bar__search {
+  display: inline-flex;
+  flex: 1 1 12rem;
+  min-width: min(10rem, 100%);
+  max-width: 100%;
+}
+
+.dsx-filter-bar__rules {
+  min-width: 0;
+  max-width: 100%;
+  gap: var(--dsx-filter-bar-gap, var(--dsx-space-sm));
+  min-height: var(--dsx-filter-bar-control-height, var(--dsx-density-control-height));
+}
+
+.dsx-filter-bar__rule {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.dsx-filter-bar__rule-label {
+  position: relative;
+  display: inline-flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  text-align: start;
+  gap: var(--dsx-space-xs);
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.dsx-filter-bar__rule-label > span {
+  min-width: 0;
+  max-width: 100%;
+}
+
+button.dsx-filter-bar__rule-label::before {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  height: max(100%, var(--dsx-size-md));
+  transform: translateY(-50%);
+}
+
+:where(.dsx-filter-bar__rule) > .dsx-pill__remove {
+  position: relative;
+  flex-shrink: 0;
+}
+
+:where(.dsx-filter-bar__rule) > .dsx-pill__remove::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: max(100%, var(--dsx-size-md));
+  height: max(100%, var(--dsx-size-md));
+  transform: translate(-50%, -50%);
+}
+
+span.dsx-filter-bar__rule-label {
+  cursor: default;
+}
+
+.dsx-filter-bar__rule-field {
+  font-weight: inherit;
+}
+
+.dsx-filter-bar__rule-operator {
+  color: var(--dsx-color-on-surface-variant);
+}
+
+.dsx-filter-bar__rule-value {
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-filter-bar__rule:where([data-active='true']) {
+  box-shadow: inset 0 0 0 var(--dsx-border-width-sm) var(--dsx-color-accent-indicator);
+}
+
+.dsx-filter-bar__builder {
+  display: grid;
+  gap: var(--dsx-space-md);
+  min-width: 16rem;
+}
+
+.dsx-filter-bar__builder-anchor {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+}
+
+.dsx-filter-bar__condition-editor {
+  display: grid;
+  gap: var(--dsx-space-md);
+  width: 100%;
+  padding: var(--dsx-space-md);
+  border: var(--dsx-border-width-sm) solid var(--dsx-control-separator-color);
+  border-radius: var(--dsx-rounded-md);
+  background: var(--dsx-color-surface);
+}
+
+.dsx-filter-bar__condition-editor-title {
+  color: var(--dsx-color-on-surface);
+  font-family: var(--dsx-typography-label-medium-font-family, var(--dsx-typography-label-small-font-family)), sans-serif;
+  font-size: var(--dsx-typography-label-medium-font-size, var(--dsx-typography-label-small-font-size));
+  font-weight: var(--dsx-typography-label-medium-font-weight, var(--dsx-typography-label-small-font-weight));
+  line-height: var(--dsx-typography-label-medium-line-height, var(--dsx-typography-label-small-line-height));
+}
+
+.dsx-filter-bar__condition-editor-body {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dsx-space-md);
+}
+
+.dsx-filter-bar__condition-editor-fields {
+  display: flex;
+  flex-direction: column;
+  flex: 0 1 12rem;
+  gap: var(--dsx-space-xs);
+}
+
+.dsx-filter-bar__condition-editor-config {
+  display: grid;
+  flex: 1 1 16rem;
+  gap: var(--dsx-space-sm);
+  align-content: start;
+  min-width: 0;
+}
+
+.dsx-filter-bar__condition-editor-field {
+  display: grid;
+  gap: var(--dsx-space-xs);
+}
+
+.dsx-filter-bar__condition-editor-label {
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  line-height: var(--dsx-typography-label-small-line-height);
+}
+
+.dsx-filter-bar__condition-editor-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--dsx-space-sm);
+}
+
+.dsx-filter-bar__condition-grip {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  color: var(--dsx-color-on-surface-variant);
+  cursor: grab;
 }
 
-.dsx-filter-bar[data-size='sm'] { padding: var(--dsx-space-sm); }
+.dsx-filter-bar__condition-rows-label,
+.dsx-filter-bar__condition-match-label {
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  line-height: var(--dsx-typography-label-small-line-height);
+}
 
-.dsx-filter-bar[data-size='lg'] { gap: var(--dsx-space-md); }
+.dsx-filter-bar__builder-field {
+  display: grid;
+  gap: var(--dsx-space-xs);
+}
+
+.dsx-filter-bar__builder-label {
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  line-height: var(--dsx-typography-label-small-line-height);
+}
+
+.dsx-filter-bar__builder-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--dsx-space-sm);
+}
+
+/* Builder selects ride the shared nested floating tier: the Builder popup is a
+   Popover host, so its option lists escalate automatically via
+   `dsx-menu__nested` (see `_internal/baseMenu.css`). The round-3 scoped
+   override (`.dsx-filter-bar__builder-select` at `modal + 2`) is retired. */
+
+.dsx-filter-bar__rule-count {
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  line-height: var(--dsx-typography-label-small-line-height);
+}
+
+.dsx-filter-bar__rules-overflow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+}
+
+.dsx-filter-bar__condition-group {
+  display: grid;
+  gap: var(--dsx-filter-bar-gap, var(--dsx-space-sm));
+  width: 100%;
+  padding: var(--dsx-space-sm);
+  border: var(--dsx-border-width-sm) solid var(--dsx-control-separator-color);
+  border-radius: var(--dsx-rounded-md);
+}
+
+.dsx-filter-bar__condition-group .dsx-filter-bar__condition-group {
+  width: auto;
+  margin-inline-start: var(--dsx-space-md);
+  padding-inline-start: var(--dsx-space-md);
+  border-inline-start: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+  background: transparent;
+}
+
+.dsx-filter-bar__condition-group[data-empty='true'] {
+  border-style: dashed;
+}
+
+.dsx-filter-bar__condition-empty {
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+}
+
+.dsx-filter-bar__rule-value[data-empty='true'] {
+  padding: 0 var(--dsx-space-xs);
+  border: var(--dsx-border-width-sm) dashed var(--dsx-color-on-surface-variant);
+  border-radius: var(--dsx-rounded-sm);
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+}
+
+.dsx-filter-bar__condition-combinator {
+  display: flex;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+}
+
+.dsx-filter-bar__condition-combinator-label {
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  line-height: var(--dsx-typography-label-small-line-height);
+}
+
+.dsx-filter-bar__condition-children {
+  display: grid;
+  gap: var(--dsx-space-sm);
+}
+
+.dsx-filter-bar__condition {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--dsx-space-sm);
+  width: 100%;
+}
+
+.dsx-filter-bar__condition-field {
+  flex: 0 1 10rem;
+  min-width: 0;
+}
+
+.dsx-filter-bar__condition-operator {
+  flex: 0 1 8rem;
+  min-width: 0;
+}
+
+.dsx-filter-bar__condition-value {
+  flex: 1 1 10rem;
+  min-width: 0;
+}
+
+.dsx-filter-bar__condition-gap {
+  display: flex;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+  width: 100%;
+}
+
+.dsx-filter-bar__condition-label {
+  display: inline-flex;
+  flex: 1 1 auto;
+  align-items: baseline;
+  justify-content: flex-start;
+  gap: var(--dsx-space-xs);
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+span.dsx-filter-bar__condition-label {
+  cursor: default;
+}
+
+.dsx-filter-bar__rule-value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dsx-filter-bar__condition-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--dsx-space-sm);
+}
+
+.dsx-filter-bar:where([data-size='sm']) {
+  --dsx-filter-bar-padding: var(--dsx-space-sm);
+  --dsx-filter-bar-gap: var(--dsx-space-xs);
+  --dsx-filter-bar-control-height: var(--dsx-density-control-height-sm);
+  --dsx-filter-bar-summary-font-family: var(--dsx-typography-label-small-font-family);
+  --dsx-filter-bar-summary-font-size: var(--dsx-typography-label-small-font-size);
+  --dsx-filter-bar-summary-font-weight: var(--dsx-typography-label-small-font-weight);
+  --dsx-filter-bar-summary-line-height: var(--dsx-typography-label-small-line-height);
+}
+
+.dsx-filter-bar:where([data-size='md']) {
+  --dsx-filter-bar-padding: var(--dsx-space-md);
+  --dsx-filter-bar-gap: var(--dsx-space-sm);
+  --dsx-filter-bar-control-height: var(--dsx-density-control-height);
+  --dsx-filter-bar-summary-font-family: var(--dsx-typography-body-small-font-family);
+  --dsx-filter-bar-summary-font-size: var(--dsx-typography-body-small-font-size);
+  --dsx-filter-bar-summary-font-weight: var(--dsx-typography-body-small-font-weight);
+  --dsx-filter-bar-summary-line-height: var(--dsx-typography-body-small-line-height);
+}
+
+.dsx-filter-bar:where([data-size='lg']) {
+  --dsx-filter-bar-padding: var(--dsx-space-lg);
+  --dsx-filter-bar-gap: var(--dsx-space-md);
+  --dsx-filter-bar-control-height: var(--dsx-density-control-height-lg);
+  --dsx-filter-bar-summary-font-family: var(--dsx-typography-body-medium-font-family);
+  --dsx-filter-bar-summary-font-size: var(--dsx-typography-body-medium-font-size);
+  --dsx-filter-bar-summary-font-weight: var(--dsx-typography-body-medium-font-weight);
+  --dsx-filter-bar-summary-line-height: var(--dsx-typography-body-medium-line-height);
+}
 
 .dsx-stepper {
   display: flex;
@@ -16608,6 +17528,8 @@ button.dsx-link--none {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-timeline--left {
@@ -16621,6 +17543,8 @@ button.dsx-link--none {
 .dsx-timeline__item {
   display: flex;
   position: relative;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-timeline--left .dsx-timeline__item {
@@ -16628,37 +17552,51 @@ button.dsx-link--none {
   gap: var(--dsx-space-lg);
 }
 
+/* Alternate variant: centered dot-column spine with parity-split content.
+   Shares Stepper's vertical rail engine (see stepper.css
+   `.dsx-stepper--vertical .dsx-stepper__item:not(:last-child)::after`): the
+   connector is item-local, anchored at the marker bottom (`top` = marker
+   size) and stretched to the item bottom (`bottom: 0`), centered on the dot
+   column via `calc(marker-size / 2 - rail-width / 2)`. Timeline keeps its own
+   Connector DOM node (Stepper draws via ::after and hides its Separator) and
+   its own rail width (`--dsx-border-width-sm`); the geometry recipe is shared,
+   the slot API and ARIA roles stay distinct. Keep in sync with stepper.css. */
+
 .dsx-timeline--alternate .dsx-timeline__item {
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  column-gap: var(--dsx-space-lg);
   width: 100%;
 }
 
-/* Zigzag: even items flip marker/content to the opposite side. This is a
-   per-item flip, not a shared centered spine — the connector position is
-   re-anchored to the marker's new (right) edge to match.
-   :nth-child()/[data-size] are wrapped in :where() so these rules tie the
-   file's pre-existing (0,3,0) ceiling on source order instead of exceeding
-   it — same technique as the V-2 card-selection fix. */
+/* Parity split: the 1fr tracks exist without any spacer element, so equal
+   fr shares keep the marker exactly on the centerline in both parities.
+   Odd items read content-left, even items read content-right. */
 
-.dsx-timeline--alternate .dsx-timeline__item:where(:nth-child(even)) {
-  flex-direction: row-reverse;
+.dsx-timeline--alternate .dsx-timeline__item:where(:nth-child(odd)) .dsx-timeline__content {
+  grid-column: 1;
+  grid-row: 1;
+  text-align: right;
 }
 
-.dsx-timeline--alternate .dsx-timeline__item:where(:nth-child(even)) .dsx-timeline__content {
-  text-align: right;
+.dsx-timeline--alternate .dsx-timeline__item:where(:nth-child(odd)) .dsx-timeline__marker {
+  grid-column: 2;
+  grid-row: 1;
 }
 
-.dsx-timeline--alternate .dsx-timeline__item:where(:nth-child(even)) .dsx-timeline__connector {
-  left: auto;
-  right: calc(var(--dsx-size-md) / 2 - var(--dsx-border-width-sm) / 2);
+.dsx-timeline--alternate .dsx-timeline__item:where(:nth-child(even)) .dsx-timeline__marker {
+  grid-column: 2;
+  grid-row: 1;
 }
 
-.dsx-timeline--alternate:where([data-size='sm']) .dsx-timeline__item:where(:nth-child(even)) .dsx-timeline__connector {
-  right: calc(var(--dsx-size-sm) / 2 - var(--dsx-border-width-sm) / 2);
+.dsx-timeline--alternate .dsx-timeline__item:where(:nth-child(even)) .dsx-timeline__content {
+  grid-column: 3;
+  grid-row: 1;
+  text-align: left;
 }
 
-.dsx-timeline--alternate:where([data-size='lg']) .dsx-timeline__item:where(:nth-child(even)) .dsx-timeline__connector {
-  right: calc(var(--dsx-size-lg) / 2 - var(--dsx-border-width-sm) / 2);
+.dsx-timeline--alternate .dsx-timeline__content {
+  min-width: 0;
 }
 
 .dsx-timeline__marker {
@@ -16699,6 +17637,20 @@ button.dsx-link--none {
   top: var(--dsx-size-lg);
 }
 
+/* Centered spine: the connector runs down the item's vertical centerline,
+   which is the marker center because both halves are equal flex: 1. `top`
+   still follows the marker size via the base size rules above — only the
+   horizontal anchor is overridden here. Specificity (0,3,0) ties the base
+   size rules, so this block must stay after them in source order. */
+
+.dsx-timeline--alternate[data-size='sm'] .dsx-timeline__connector,
+.dsx-timeline--alternate[data-size='md'] .dsx-timeline__connector,
+.dsx-timeline--alternate:not([data-size]) .dsx-timeline__connector,
+.dsx-timeline--alternate[data-size='lg'] .dsx-timeline__connector {
+  left: calc(50% - var(--dsx-border-width-sm) / 2);
+  right: auto;
+}
+
 .dsx-timeline__item--active .dsx-timeline__marker {
   border-color: var(--dsx-color-primary);
   background: var(--dsx-color-primary);
@@ -16728,11 +17680,17 @@ button.dsx-link--none {
   background: var(--dsx-color-primary);
 }
 
+.dsx-timeline__item--error .dsx-timeline__connector {
+  background: var(--dsx-color-error);
+}
+
 .dsx-timeline__content {
   display: flex;
   flex-direction: column;
   gap: var(--dsx-space-2xs);
   flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
   padding-bottom: var(--dsx-space-lg);
 }
 
@@ -16962,7 +17920,6 @@ button.dsx-link--none {
 .dsx-date-picker__trigger,
 .dsx-theme,
 .dsx-input-group,
-.dsx-control-group,
 .dsx-item,
 .dsx-kbd,
 .dsx-calendar,