@ds-mo/ui 2.14.0 → 3.0.0

package/dist/types/components.d.ts

@@ -22,6 +22,7 @@ import { DividerInset, DividerLength, DividerOrientation, DividerSurface } from
 import { EmptyStateType } from "./components/EmptyState/EmptyState";
 import { IconColor, IconSize } from "./components/Icon/Icon";
 import { InputType } from "./components/Input/Input";
+import { LoaderColor, LoaderSize } from "./components/Loader/Loader";
 import { MenuItemData, MenuSection } from "./components/Menu/menu-types";
 import { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 import { ModalWidth } from "./components/Modal/Modal";
@@ -37,7 +38,7 @@ import { TabBackground } from "./components/TabGroup/TabGroup";
 import { TabGroupNavBackground } from "./components/TabGroupNav/TabGroupNav";
 import { SortState, TableColumn } from "./components/Table/Table";
 import { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
-import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/Text";
+import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
 import { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
 export { NavChromeStyle } from "./nav/nav-chrome";
 export { ShellGradientPreset } from "./nav/shell-gradient-presets";
@@ -56,6 +57,7 @@ export { DividerInset, DividerLength, DividerOrientation, DividerSurface } from
 export { EmptyStateType } from "./components/EmptyState/EmptyState";
 export { IconColor, IconSize } from "./components/Icon/Icon";
 export { InputType } from "./components/Input/Input";
+export { LoaderColor, LoaderSize } from "./components/Loader/Loader";
 export { MenuItemData, MenuSection } from "./components/Menu/menu-types";
 export { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 export { ModalWidth } from "./components/Modal/Modal";
@@ -71,7 +73,7 @@ export { TabBackground } from "./components/TabGroup/TabGroup";
 export { TabGroupNavBackground } from "./components/TabGroupNav/TabGroupNav";
 export { SortState, TableColumn } from "./components/Table/Table";
 export { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
-export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/Text";
+export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
 export { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
 export namespace Components {
     interface DsAppShell {
@@ -401,7 +403,7 @@ export namespace Components {
     }
     interface DsChartDonut {
         /**
-          * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync. Falls back to this component's own pointer/focus hover when unset. External sync dims slices only — the data-viz tooltip is reserved for this component's own pointer/keyboard interaction.
+          * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync. Falls back to this component's own pointer/focus hover when unset. Slice hover dims peer slices and emits `dsSliceHover` for legend sync — no data-viz tooltip (the legend already surfaces label/value).
           * @default null
          */
         "activeLabel": string | null;
@@ -639,15 +641,19 @@ export namespace Components {
         "value": string;
     }
     interface DsLoader {
+        /**
+          * Semantic foreground color token, or a raw CSS var reference. Same tokens as `ds-icon`.
+         */
+        "color": LoaderColor | undefined;
         /**
           * Accessible label for standalone usage. Wraps the spinner in a live region and renders the label visually-hidden. Omit when the host element already conveys busy state via aria-busy.
          */
         "label": string | undefined;
         /**
-          * Render size — number (px) or TokoMo length (`var(--dimension-iconography-md)`, etc.).
-          * @default TOKEN_DEFAULTS.iconographyMd
+          * Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px.
+          * @default 'md'
          */
-        "size": number | string;
+        "size": LoaderSize;
     }
     interface DsMenu {
         /**
@@ -1069,6 +1075,11 @@ export namespace Components {
         "as": TextElement;
         "color": TextColor | undefined;
         "decoration": TextDecoration | undefined;
+        /**
+          * Heavier weight + tighter letter-spacing for the variant. `false` (default): regular weight (caption stays medium). `true`: display bold, title/caption semibold, body medium.
+          * @default false
+         */
+        "emphasis": boolean;
         /**
           * @default 'normal'
          */
@@ -1085,6 +1096,10 @@ export namespace Components {
           * @default 'none'
          */
         "lineTruncation": LineTruncation;
+        /**
+          * Forwarded to the inner element (e.g. aria-labelledby targets).
+         */
+        "textId": string | undefined;
         /**
           * @default 'text-body-medium'
          */
@@ -1147,8 +1162,9 @@ export namespace Components {
         "size": TooltipSize;
     }
     /**
-     * Positioned value/label callout for chart hover interactions (donut slice, bar,
-     * line point, ...). Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
+     * Positioned value/label callout for chart hover interactions (bar, line point, …).
+     * Donut charts skip this — legend sync already surfaces the hovered slice.
+     * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
      * charts hover-highlight data that lives inside an SVG, so the chart itself computes
      * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.
      * Renders `position: absolute` — place inside a `position: relative` chart wrapper,
@@ -1842,8 +1858,9 @@ declare global {
         new (): HTMLDsTooltipElement;
     };
     /**
-     * Positioned value/label callout for chart hover interactions (donut slice, bar,
-     * line point, ...). Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
+     * Positioned value/label callout for chart hover interactions (bar, line point, …).
+     * Donut charts skip this — legend sync already surfaces the hovered slice.
+     * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
      * charts hover-highlight data that lives inside an SVG, so the chart itself computes
      * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.
      * Renders `position: absolute` — place inside a `position: relative` chart wrapper,
@@ -2246,7 +2263,7 @@ declare namespace LocalJSX {
     }
     interface DsChartDonut {
         /**
-          * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync. Falls back to this component's own pointer/focus hover when unset. External sync dims slices only — the data-viz tooltip is reserved for this component's own pointer/keyboard interaction.
+          * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync. Falls back to this component's own pointer/focus hover when unset. Slice hover dims peer slices and emits `dsSliceHover` for legend sync — no data-viz tooltip (the legend already surfaces label/value).
           * @default null
          */
         "activeLabel"?: string | null;
@@ -2502,15 +2519,19 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface DsLoader {
+        /**
+          * Semantic foreground color token, or a raw CSS var reference. Same tokens as `ds-icon`.
+         */
+        "color"?: LoaderColor | undefined;
         /**
           * Accessible label for standalone usage. Wraps the spinner in a live region and renders the label visually-hidden. Omit when the host element already conveys busy state via aria-busy.
          */
         "label"?: string | undefined;
         /**
-          * Render size — number (px) or TokoMo length (`var(--dimension-iconography-md)`, etc.).
-          * @default TOKEN_DEFAULTS.iconographyMd
+          * Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px.
+          * @default 'md'
          */
-        "size"?: number | string;
+        "size"?: LoaderSize;
     }
     interface DsMenu {
         /**
@@ -2975,6 +2996,11 @@ declare namespace LocalJSX {
         "as"?: TextElement;
         "color"?: TextColor | undefined;
         "decoration"?: TextDecoration | undefined;
+        /**
+          * Heavier weight + tighter letter-spacing for the variant. `false` (default): regular weight (caption stays medium). `true`: display bold, title/caption semibold, body medium.
+          * @default false
+         */
+        "emphasis"?: boolean;
         /**
           * @default 'normal'
          */
@@ -2991,6 +3017,10 @@ declare namespace LocalJSX {
           * @default 'none'
          */
         "lineTruncation"?: LineTruncation;
+        /**
+          * Forwarded to the inner element (e.g. aria-labelledby targets).
+         */
+        "textId"?: string | undefined;
         /**
           * @default 'text-body-medium'
          */
@@ -3054,8 +3084,9 @@ declare namespace LocalJSX {
         "size"?: TooltipSize;
     }
     /**
-     * Positioned value/label callout for chart hover interactions (donut slice, bar,
-     * line point, ...). Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
+     * Positioned value/label callout for chart hover interactions (bar, line point, …).
+     * Donut charts skip this — legend sync already surfaces the hovered slice.
+     * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
      * charts hover-highlight data that lives inside an SVG, so the chart itself computes
      * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.
      * Renders `position: absolute` — place inside a `position: relative` chart wrapper,
@@ -3246,7 +3277,8 @@ declare namespace LocalJSX {
         "ariaDescribedby": string | undefined;
     }
     interface DsLoaderAttributes {
-        "size": string;
+        "size": LoaderSize;
+        "color": LoaderColor | undefined;
         "label": string | undefined;
     }
     interface DsMenuAttributes {
@@ -3367,6 +3399,7 @@ declare namespace LocalJSX {
     }
     interface DsTextAttributes {
         "variant": TextVariant;
+        "emphasis": boolean;
         "color": TextColor | undefined;
         "decoration": TextDecoration | undefined;
         "italic": boolean;
@@ -3376,6 +3409,7 @@ declare namespace LocalJSX {
         "fontFeature": TextFontFeature;
         "as": TextElement;
         "for": string | undefined;
+        "textId": string | undefined;
     }
     interface DsToggleAttributes {
         "checked": boolean;
@@ -3517,8 +3551,9 @@ declare module "@stencil/core" {
              */
             "ds-tooltip": LocalJSX.IntrinsicElements["ds-tooltip"] & JSXBase.HTMLAttributes<HTMLDsTooltipElement>;
             /**
-             * Positioned value/label callout for chart hover interactions (donut slice, bar,
-             * line point, ...). Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
+             * Positioned value/label callout for chart hover interactions (bar, line point, …).
+             * Donut charts skip this — legend sync already surfaces the hovered slice.
+             * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
              * charts hover-highlight data that lives inside an SVG, so the chart itself computes
              * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.
              * Renders `position: absolute` — place inside a `position: relative` chart wrapper,

package/dist/types/utils/control-text.d.ts

@@ -0,0 +1,6 @@
+import type { TextVariant } from '../components/Text/text-types';
+/** Shared public control sizes. Typography is derived; it is not a separate density API. */
+export type ControlSize = 'md' | 'sm' | 'xs';
+/** Complete text variant selected internally by each control size. */
+export declare const CONTROL_TEXT_VARIANT: Record<ControlSize, TextVariant>;
+//# sourceMappingURL=control-text.d.ts.map

package/dist/types/utils/index.d.ts

@@ -9,4 +9,6 @@ export { TOKEN_DEFAULTS, TOKEN_CSS_LENGTHS } from './token-defaults';
 export type { TokenDefaultKey } from './token-defaults';
 export { controlWidthClass } from './control-width';
 export type { ControlWidth } from './control-width';
+export { CONTROL_TEXT_VARIANT } from './control-text';
+export type { ControlSize } from './control-text';
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "2.14.0",
+  "version": "3.0.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -69,9 +69,9 @@
     "pretest": "node scripts/generate-icon-catalog.mjs",
     "build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/write-build-stamp.mjs && node scripts/build-lib-exports.mjs",
     "verify:pack": "node scripts/verify-npm-pack.mjs && node scripts/verify-nav-import.mjs",
-    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/panel-tools.test.ts tests/shell-shortcuts.test.ts tests/shell-gradient-presets.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/shell-chrome-metrics.test.ts tests/shell-chrome-layer.test.ts tests/chrome-transition.test.ts tests/bar-nav-overflow-hysteresis.test.ts tests/badge-gradient-ring.test.ts tests/scroll-edge-fade.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.test.ts tests/menu-placement.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts tests/icon-cache.test.ts tests/icon-svg.test.ts",
+    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/panel-tools.test.ts tests/text.test.ts tests/eslint-plugin-local.test.ts tests/shell-shortcuts.test.ts tests/shell-gradient-presets.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/shell-chrome-metrics.test.ts tests/shell-chrome-layer.test.ts tests/chrome-transition.test.ts tests/bar-nav-overflow-hysteresis.test.ts tests/badge-gradient-ring.test.ts tests/scroll-edge-fade.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.test.ts tests/menu-placement.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts tests/icon-cache.test.ts tests/icon-svg.test.ts",
     "test:e2e": "npm run build && playwright test",
-    "test:e2e:install": "playwright install chromium",
+    "test:e2e:install": "playwright install chromium firefox",
     "build:docs": "stencil build --docs",
     "dev": "node scripts/generate-icon-catalog.mjs && stencil build --watch",
     "storybook:ui": "node scripts/storybook-ui.mjs",
@@ -114,9 +114,9 @@
     "@stencil/angular-output-target": "^1.3.1",
     "@stencil/core": "^4.43.4",
     "@stencil/react-output-target": "^1.5.3",
-    "@storybook/addon-docs": "^10.4.2",
-    "@storybook/web-components": "^10.4.2",
-    "@storybook/web-components-vite": "^10.4.2",
+    "@storybook/addon-docs": "^10.5.0",
+    "@storybook/web-components": "^10.5.0",
+    "@storybook/web-components-vite": "^10.5.0",
     "@types/d3-array": "^3.2.2",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",
@@ -130,7 +130,7 @@
     "lit": "^3.3.3",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "storybook": "^10.4.2",
+    "storybook": "^10.5.0",
     "stylelint": "^17.14.0",
     "stylelint-config-standard": "^40.0.0",
     "tsx": "^4.20.3",

package/src/angular/proxies.ts

@@ -553,14 +553,14 @@ export declare interface DsInput extends Components.DsInput {
 
 
 @ProxyCmp({
-  inputs: ['label', 'size']
+  inputs: ['color', 'label', 'size']
 })
 @Component({
   selector: 'ds-loader',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['label', 'size'],
+  inputs: ['color', 'label', 'size'],
   standalone: false
 })
 export class DsLoader {
@@ -1058,14 +1058,14 @@ export declare interface DsTag extends Components.DsTag {}
 
 
 @ProxyCmp({
-  inputs: ['align', 'as', 'color', 'decoration', 'fontFeature', 'for', 'italic', 'lineTruncation', 'variant', 'wrap']
+  inputs: ['align', 'as', 'color', 'decoration', 'emphasis', 'fontFeature', 'for', 'italic', 'lineTruncation', 'textId', 'variant', 'wrap']
 })
 @Component({
   selector: 'ds-text',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['align', 'as', 'color', 'decoration', 'fontFeature', 'for', 'italic', 'lineTruncation', 'variant', 'wrap'],
+  inputs: ['align', 'as', 'color', 'decoration', 'emphasis', 'fontFeature', 'for', 'italic', 'lineTruncation', 'textId', 'variant', 'wrap'],
   standalone: false
 })
 export class DsText {

package/src/wc/components/Badge/Badge.tsx

@@ -166,14 +166,12 @@ export class Badge {
         aria-label={ariaLabel}
         style={this.ringHostStyle(ring)}
       >
-        <span
-          class={{
-            'badge__mark': true,
-            'text-caption-emphasis': !isDot,
-          }}
-          aria-hidden="true"
-        >
-          {!isDot && display}
+        <span class="badge__mark" aria-hidden="true">
+          {!isDot && (
+            <ds-text as="span" variant="text-caption" emphasis color="inherit">
+              {display}
+            </ds-text>
+          )}
         </span>
       </Host>
     );

package/src/wc/components/Banner/Banner.tsx

@@ -121,7 +121,9 @@ export class Banner {
             </div>
           )}
           <div class="banner-body">
-            <span class="text-body-medium banner-message">{this.message}</span>
+            <ds-text class="banner-message" as="div" variant="text-body-medium" color="inherit">
+              {this.message}
+            </ds-text>
             {this.showDismiss && (
               <button
                 type="button"

package/src/wc/components/BarNav/BarNav.tsx

@@ -683,7 +683,16 @@ export class BarNav {
             )}
 
             {!hasTabs && this.heading && (
-              <span class="bar-nav__heading text-body-medium-emphasis">{this.heading}</span>
+              <ds-text
+                class="bar-nav__heading"
+                as="span"
+                variant="text-body-medium"
+                emphasis
+                color="inherit"
+                wrap="nowrap"
+              >
+                {this.heading}
+              </ds-text>
             )}
 
             {hasTabs && this.hasOverflowTabs && (

package/src/wc/components/ButtonFilled/ButtonFilled.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
-import { controlWidthClass, type ControlWidth } from '../../utils/control-width';
+import { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';
 
 export type ButtonFilledIntent =
   | 'neutral'
@@ -20,13 +20,6 @@ export type ButtonFilledSize = 'md' | 'sm' | 'xs';
 
 export type ButtonFilledWidth = ControlWidth;
 
-/** Emphasis text per control-density size (buttons use emphasis, unlike Tag). */
-const TEXT_VARIANT: Record<ButtonFilledSize, string> = {
-  md: 'text-body-medium-emphasis',
-  sm: 'text-body-small-emphasis',
-  xs: 'text-caption-emphasis',
-};
-
 /**
  * `ds-icon` size prop matching control-density icon metrics
  * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).
@@ -110,7 +103,7 @@ export class ButtonFilled {
   }
 
   render() {
-    const textVariant = TEXT_VARIANT[this.size];
+    const textVariant = CONTROL_TEXT_VARIANT[this.size];
     const iconSize = ICON_SIZE[this.size];
 
     const cls: Record<string, boolean> = {
@@ -161,9 +154,15 @@ export class ButtonFilled {
             </span>
           )}
           {this.showLabel && (
-            <span class={{ 'button-filled__label': true, [textVariant]: true, 'ds-interaction-fill__content': true }}>
+            <ds-text
+              class="button-filled__label ds-interaction-fill__content"
+              as="span"
+              variant={textVariant}
+              emphasis
+              color="inherit"
+            >
               {this.label}
-            </span>
+            </ds-text>
           )}
         </button>
       </Host>

package/src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
-import { controlWidthClass, type ControlWidth } from '../../utils/control-width';
+import { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';
 
 export type ButtonUnfilledOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';
 
@@ -11,13 +11,6 @@ export type ButtonUnfilledSize = 'md' | 'sm' | 'xs';
 
 export type ButtonUnfilledWidth = ControlWidth;
 
-/** Emphasis text per control-density size (buttons use emphasis, unlike Tag). */
-const TEXT_VARIANT: Record<ButtonUnfilledSize, string> = {
-  md: 'text-body-medium-emphasis',
-  sm: 'text-body-small-emphasis',
-  xs: 'text-caption-emphasis',
-};
-
 /**
  * `ds-icon` size prop matching control-density icon metrics
  * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).
@@ -148,7 +141,7 @@ export class ButtonUnfilled {
   render() {
     const bg = this.background;
     const contrast = this.effectiveContrast();
-    const textVariant = TEXT_VARIANT[this.size];
+    const textVariant = CONTROL_TEXT_VARIANT[this.size];
     const iconSize = ICON_SIZE[this.size];
 
     const cls: Record<string, boolean> = {
@@ -219,9 +212,15 @@ export class ButtonUnfilled {
             </span>
           )}
           {this.showLabel && (
-            <span class={{ 'button-unfilled__label': true, [textVariant]: true, 'ds-interaction-fill__content': true }}>
+            <ds-text
+              class="button-unfilled__label ds-interaction-fill__content"
+              as="span"
+              variant={textVariant}
+              emphasis
+              color="inherit"
+            >
               {this.label}
-            </span>
+            </ds-text>
           )}
         </button>
       </Host>

package/src/wc/components/Card/Card.tsx

@@ -56,16 +56,15 @@ export class Card {
         }}
       >
         <header class="card__header">
-          <div class="card__title-wrap">
-            <ds-text
-              class="card__title"
-              variant="text-title-small"
-              color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}
-              as="h2"
-            >
-              {this.heading}
-            </ds-text>
-          </div>
+          <ds-text
+            class="card__title-wrap card__title"
+            variant="text-title-small"
+            emphasis
+            color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}
+            as="h2"
+          >
+            {this.heading}
+          </ds-text>
           <div class="card__actions">
             <slot name="actions" />
           </div>

package/src/wc/components/ChartDonut/ChartDonut.tsx

@@ -12,12 +12,6 @@ const CENTER_TEXT_SAFE_WIDTH_RATIO = 0.82;
 /** Fallback when filling before the first ResizeObserver measurement (matches fill min). */
 const FILL_FALLBACK_PX = 128;
 
-type DonutTooltipState = {
-  datum: ChartDatum;
-  x: number;
-  y: number;
-};
-
 @Component({
   tag: 'ds-chart-donut',
   styleUrl: 'ChartDonut.css',
@@ -49,14 +43,12 @@ export class ChartDonut {
    * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling
    * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.
    * Falls back to this component's own pointer/focus hover when unset.
-   * External sync dims slices only — the data-viz tooltip is reserved for this
-   * component's own pointer/keyboard interaction.
+   * Slice hover dims peer slices and emits `dsSliceHover` for legend sync — no data-viz
+   * tooltip (the legend already surfaces label/value).
    */
   @Prop() activeLabel: string | null = null;
 
   @State() private hoveredLabel: string | null = null;
-  /** Own-hover tooltip (cursor-following). Cleared on leave; not driven by `activeLabel`. */
-  @State() private tooltip: DonutTooltipState | null = null;
   /** Center text, truncated with an ellipsis if it doesn't fit inside the inner circle. */
   @State() private displayedValueText: string = '';
   @State() private displayedCaptionText: string = '';
@@ -68,7 +60,6 @@ export class ChartDonut {
 
   private valueTextEl?: SVGTextElement;
   private captionTextEl?: SVGTextElement;
-  private wrapperEl?: HTMLDivElement;
   private resizeObserver: ResizeObserver | null = null;
 
   private get isFillMode(): boolean {
@@ -143,29 +134,9 @@ export class ChartDonut {
     this.resizeObserver = null;
   }
 
-  private handleHover(datum: ChartDatum | null, event?: MouseEvent) {
+  private handleHover(datum: ChartDatum | null) {
     this.hoveredLabel = datum?.label ?? null;
     this.dsSliceHover.emit(datum);
-    if (!datum) {
-      this.tooltip = null;
-      return;
-    }
-    this.updateTooltip(datum, event);
-  }
-
-  private handleSliceMove(datum: ChartDatum, event: MouseEvent) {
-    if (this.hoveredLabel !== datum.label) return;
-    this.updateTooltip(datum, event);
-  }
-
-  private updateTooltip(datum: ChartDatum, event?: MouseEvent) {
-    const wrapper = this.wrapperEl;
-    if (!wrapper) return;
-    const size = this.resolvedSize;
-    const rect = wrapper.getBoundingClientRect();
-    const x = event ? event.clientX - rect.left : size / 2;
-    const y = event ? event.clientY - rect.top : size / 2;
-    this.tooltip = { datum, x, y };
   }
 
   componentDidRender() {
@@ -238,7 +209,6 @@ export class ChartDonut {
     // Show the full text before the post-render truncation pass has measured it (avoids a blank first paint).
     const fullValueText = this.centerValue ?? formatCompactNumber(total);
     const fullCaptionText = this.centerCaption ?? '';
-    const tip = this.tooltip;
     const fill = this.isFillMode;
 
     return (
@@ -253,9 +223,6 @@ export class ChartDonut {
         <div
           class="chart-donut__wrapper"
           style={!fill ? { width: `${size}px`, height: `${size}px` } : undefined}
-          ref={el => {
-            this.wrapperEl = (el as HTMLDivElement) ?? undefined;
-          }}
         >
           <svg
             class="chart-donut__svg"
@@ -279,8 +246,7 @@ export class ChartDonut {
                       tabindex={0}
                       role="img"
                       aria-label={`${datum.label}: ${datum.value}`}
-                      onMouseEnter={(e: MouseEvent) => this.handleHover(datum, e)}
-                      onMouseMove={(e: MouseEvent) => this.handleSliceMove(datum, e)}
+                      onMouseEnter={() => this.handleHover(datum)}
                       onMouseLeave={() => this.handleHover(null)}
                       onFocus={() => this.handleHover(datum)}
                       onBlur={() => this.handleHover(null)}
@@ -316,15 +282,6 @@ export class ChartDonut {
               </text>
             )}
           </svg>
-          {tip && (
-            <ds-tooltip-data-viz
-              key={tip.datum.label}
-              label={tip.datum.label}
-              value={formatCompactNumber(tip.datum.value)}
-              x={tip.x}
-              y={tip.y}
-            />
-          )}
         </div>
       </Host>
     );

package/src/wc/components/ChartLegend/ChartLegend.tsx

@@ -87,24 +87,32 @@ export class ChartLegend {
                   <span class="chart-legend__swatch-box">
                     <span class="chart-legend__swatch" style={{ backgroundColor: item.color ?? categoryColor(i) }} />
                   </span>
-                  <span class="chart-legend__label" title={item.label}>
-                    <ds-text as="span" variant="text-body-medium" color="secondary">
-                      {item.label}
-                    </ds-text>
-                  </span>
+                  <ds-text
+                    class="chart-legend__label"
+                    as="span"
+                    variant="text-body-medium"
+                    color="secondary"
+                    lineTruncation={1}
+                    title={item.label}
+                  >
+                    {item.label}
+                  </ds-text>
                   {item.value != null && (
-                    <span class="chart-legend__value" title={String(item.value)}>
-                      <ds-text as="span" variant="text-body-medium" color="primary">
-                        {formatCompactNumber(item.value)}
-                      </ds-text>
-                    </span>
+                    <ds-text
+                      class="chart-legend__value"
+                      as="span"
+                      variant="text-body-medium"
+                      color="primary"
+                      lineTruncation={1}
+                      title={String(item.value)}
+                    >
+                      {formatCompactNumber(item.value)}
+                    </ds-text>
                   )}
                   {item.value != null && this.showPercentage && (
-                    <span class="chart-legend__percentage">
-                      <ds-text as="span" variant="text-body-medium" color="primary">
-                        {(total ? (item.value / total) * 100 : 0).toFixed(1)}%
-                      </ds-text>
-                    </span>
+                    <ds-text class="chart-legend__percentage" as="span" variant="text-body-medium" color="primary">
+                      {(total ? (item.value / total) * 100 : 0).toFixed(1)}%
+                    </ds-text>
                   )}
                 </RowTag>
               </li>