@ds-mo/ui 2.15.0 → 3.0.1

package/src/wc/components/PanelNav/PanelNav.tsx

@@ -515,24 +515,31 @@ export class PanelNav {
         onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getUserRovingIndex())}
         onFocus={() => { this.rovingIndex = this.getUserRovingIndex(); }}
       >
-        <span class="panel-nav__item-label panel-nav__footer-user-label">
-          <span class="panel-nav__item-label-text">
-            <ds-text as="span" variant="text-body-medium" emphasis color="inherit">
-              {userName}
-            </ds-text>
-          </span>
-        </span>
+        <ds-text
+          class="panel-nav__item-label panel-nav__footer-user-label panel-nav__item-label-text"
+          as="span"
+          variant="text-body-medium"
+          emphasis
+          color="inherit"
+        >
+          {userName}
+        </ds-text>
         <span class="panel-nav__item-icon panel-nav__footer-user-icon" aria-hidden="true">
           <span class="panel-nav__footer-icon-expanded">
             <ds-icon name="ChevronUpDown" size="md" color="inherit" />
           </span>
           <span class="panel-nav__footer-icon-collapsed">
             <ds-icon name="Circle" size="md" color="inherit" />
-            <span class="panel-nav__user-initial">
-              <ds-text as="span" variant="text-caption" emphasis color="inherit">
-                {userInitial}
-              </ds-text>
-            </span>
+            <ds-text
+              class="panel-nav__user-initial"
+              as="span"
+              variant="text-caption"
+              emphasis
+              align="center"
+              color="inherit"
+            >
+              {userInitial}
+            </ds-text>
           </span>
         </span>
       </button>
@@ -553,18 +560,15 @@ export class PanelNav {
       <span class="panel-nav__item-icon">
         <ds-icon name={item.icon} size="md" color="inherit" flag={item.flag} />
       </span>,
-      <span class="panel-nav__item-label">
-        <span class="panel-nav__item-label-text">
-          <ds-text
-            as="span"
-            variant="text-body-medium"
-            emphasis={isActive}
-            color="inherit"
-          >
-            {item.label}
-          </ds-text>
-        </span>
-      </span>,
+      <ds-text
+        class="panel-nav__item-label panel-nav__item-label-text"
+        as="span"
+        variant="text-body-medium"
+        emphasis={isActive}
+        color="inherit"
+      >
+        {item.label}
+      </ds-text>,
       item.dot && (
         <ds-badge
           class="panel-nav__item-dot"
@@ -667,13 +671,15 @@ export class PanelNav {
               return this.parsedGroups.map(group => (
                 <div class="panel-nav__group">
                   {group.label && (
-                    <span class="panel-nav__group-label">
-                      <span class="panel-nav__item-label-text">
-                        <ds-text as="span" variant="text-caption" emphasis color="inherit">
-                          {group.label}
-                        </ds-text>
-                      </span>
-                    </span>
+                    <ds-text
+                      class="panel-nav__group-label"
+                      as="span"
+                      variant="text-caption"
+                      emphasis
+                      color="inherit"
+                    >
+                      {group.label}
+                    </ds-text>
                   )}
                   {group.items.map(item => this.renderNavItem(item, flatIdx++, collapsed))}
                 </div>

package/src/wc/components/PanelTools/PanelTools.tsx

@@ -290,11 +290,16 @@ export class PanelTools {
           >
             <div class="panel-tools__drawer-surface">
               <header class="panel-tools__header">
-                <span class="panel-tools__title">
-                  <ds-text as="span" variant="text-body-medium" emphasis color="inherit" wrap="nowrap">
-                    {headerLabel}
-                  </ds-text>
-                </span>
+                <ds-text
+                  class="panel-tools__title"
+                  as="span"
+                  variant="text-body-medium"
+                  emphasis
+                  color="primary"
+                  wrap="nowrap"
+                >
+                  {headerLabel}
+                </ds-text>
               </header>
               <div class="panel-tools__body">
                 <div

package/src/wc/components/RadioGroup/RadioGroup.tsx

@@ -118,11 +118,9 @@ export class RadioGroup {
               <span class={{ circle: true, 'circle--checked': isChecked }}>
                 {isChecked && <span class="dot" />}
               </span>
-              <span class="radio-label">
-                <ds-text as="span" variant="text-body-medium">
-                  {opt.label}
-                </ds-text>
-              </span>
+              <ds-text class="radio-label" as="span" variant="text-body-medium">
+                {opt.label}
+              </ds-text>
             </div>
           );
         })}

package/src/wc/components/Select/Select.tsx

@@ -247,11 +247,15 @@ export class Select {
           aria-labelledby={this.ariaLabelledby}
           onClick={() => this.toggle({ focusVisible: false })}
         >
-          <span class="trigger__label ds-interaction-fill__content">
-            <ds-text as="span" variant={textVariant} color="inherit" lineTruncation={1}>
-              {label}
-            </ds-text>
-          </span>
+          <ds-text
+            class="trigger__label ds-interaction-fill__content"
+            as="span"
+            variant={textVariant}
+            color="inherit"
+            lineTruncation={1}
+          >
+            {label}
+          </ds-text>
           <span class="trigger__chevron ds-interaction-fill__content" aria-hidden="true">
             <ds-icon name="ChevronDown" size={iconSize} color="inherit" />
           </span>

package/src/wc/components/Table/Table.tsx

@@ -181,11 +181,15 @@ export class Table {
 
               {/* Empty state */}
               {isEmpty && (
-                <div class="empty-row" style={{ gridColumn: '1 / -1' }}>
-                  <ds-text as="p" variant="text-body-medium" color="secondary">
-                    {this.emptyMessage}
-                  </ds-text>
-                </div>
+                <ds-text
+                  class="empty-row"
+                  as="p"
+                  variant="text-body-medium"
+                  color="secondary"
+                  style={{ gridColumn: '1 / -1' }}
+                >
+                  {this.emptyMessage}
+                </ds-text>
               )}
 
               {/* Data rows */}
@@ -211,21 +215,20 @@ export class Table {
                     }}
                   >
                     {visibleCols.map(col => (
-                      <div
+                      <ds-text
                         key={col.id}
                         class={{
                           'cell': true,
                           'align-right': col.align === 'right',
                           'align-center': col.align === 'center',
                         }}
+                        as="span"
+                        variant="text-body-medium"
+                        lineTruncation={1}
                         role="cell"
                       >
-                        <span class="cell-value">
-                          <ds-text as="span" variant="text-body-medium">
-                            {String(getCellValue(col, row) ?? '')}
-                          </ds-text>
-                        </span>
-                      </div>
+                        {String(getCellValue(col, row) ?? '')}
+                      </ds-text>
                     ))}
                   </div>
                 );

package/src/wc/components/Tag/Tag.tsx

@@ -54,11 +54,9 @@ export class Tag {
         <span class="tag__icon-slot" data-icon-size={iconSize}>
           <slot name="icon" />
         </span>
-        <span class="tag__label">
-          <ds-text as="span" variant={textVariant} color="inherit">
-            {this.label}
-          </ds-text>
-        </span>
+        <ds-text class="tag__label" as="span" variant={textVariant} color="inherit">
+          {this.label}
+        </ds-text>
       </Host>
     );
   }

package/src/wc/components/Text/Text.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop, h, Host } from '@stencil/core';
-import { textVariantClass } from './text-utils';
+import { textDisplayClass, textVariantClass } from './text-utils';
 import type {
   TextAlign,
   TextColor,
@@ -20,7 +20,8 @@ export class Text {
   @Prop() variant: TextVariant = 'text-body-medium';
   /**
    * Heavier weight + tighter letter-spacing for the variant.
-   * `false` (default): regular weight (caption stays medium).
+   * `false` (default): one step below emphasis (display semibold, title/body
+   * medium, caption medium).
    * `true`: display bold, title/caption semibold, body medium.
    */
   @Prop() emphasis: boolean = false;
@@ -46,6 +47,7 @@ export class Text {
 
     const cls: Record<string, boolean> = {
       'ds-text': true,
+      [textDisplayClass(this.as)]: true,
       [textVariantClass(this.variant)]: true,
       'ds-text--emphasis': this.emphasis,
       'ds-text--regular': !this.emphasis,
@@ -87,8 +89,8 @@ export class Text {
     if (this.textId) extraProps['id'] = this.textId;
 
     return (
-      <Host style={{ display: 'contents' }}>
-        <Tag class={cls} style={style} {...extraProps}>
+      <Host class={cls} style={style}>
+        <Tag class="ds-text__element" {...extraProps}>
           <slot />
         </Tag>
       </Host>

package/src/wc/components/Text/text-utils.ts

@@ -1,6 +1,13 @@
-import type { TextVariant } from './text-types';
+import type { TextElement, TextVariant } from './text-types';
 
 /** `text-body-medium` → `ds-text--body-medium` */
 export function textVariantClass(variant: TextVariant): string {
   return `ds-text--${variant.replace(/^text-/, '')}`;
 }
+
+/** Inline semantics get a measurable inline box; paragraphs/headings get a block box. */
+export function textDisplayClass(element: TextElement): string {
+  return element === 'span' || element === 'label'
+    ? 'ds-text--inline-box'
+    : 'ds-text--block-box';
+}

package/src/wc/components/Tooltip/Tooltip.tsx

@@ -30,12 +30,14 @@ type DsTextEl = HTMLElement & {
   variant: TextVariant;
   emphasis: boolean;
   color: string;
+  wrap: string;
 };
 
 function createDsText(opts: {
   variant: TextVariant;
   emphasis?: boolean;
   color?: string;
+  wrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty';
   text: string;
 }): DsTextEl {
   const el = document.createElement('ds-text') as DsTextEl;
@@ -43,10 +45,24 @@ function createDsText(opts: {
   el.variant = opts.variant;
   el.emphasis = opts.emphasis ?? false;
   el.color = opts.color ?? 'inherit';
+  if (opts.wrap) el.wrap = opts.wrap;
   el.textContent = opts.text;
   return el;
 }
 
+/**
+ * Control-density label styles for portaled ds-text.
+ * Scoped CSS requires `sc-ds-tooltip` on the host, but Text's `<Host class>`
+ * overwrites imperative className — so these must be inline to stick.
+ */
+function styleTooltipLabel(el: HTMLElement) {
+  el.style.flexShrink = '0';
+  el.style.minWidth = 'max-content';
+  el.style.maxWidth = 'none';
+  el.style.padding = '0 var(--ds-control-label-inset, var(--dimension-space-025))';
+  el.style.color = 'var(--color-foreground-primary)';
+}
+
 /**
  * Imperative body portal for the popup.
  * Stencil must not own the portaled node — moving a VDOM child to `document.body`
@@ -91,6 +107,7 @@ export class Tooltip {
   private closeTimer: ReturnType<typeof setTimeout> | null = null;
   private anchor: HTMLElement | null = null;
   private popupEl: HTMLElement | null = null;
+  private positionObserver: ResizeObserver | null = null;
   private skipEnterAnimation = false;
   private isOpen = false;
   private mouseEnterHandler: () => void = () => this.show();
@@ -129,7 +146,7 @@ export class Tooltip {
     }
     if (!this.popupEl || !this.isOpen) return;
     this.renderPopupContent();
-    this.calculatePosition();
+    this.schedulePosition();
   }
 
   private get viewportPadPx(): number {
@@ -197,11 +214,39 @@ export class Tooltip {
   }
 
   private destroyPopup() {
+    this.positionObserver?.disconnect();
+    this.positionObserver = null;
     if (!this.popupEl) return;
     this.popupEl.remove();
     this.popupEl = null;
   }
 
+  /**
+   * Position after `ds-text` upgrades and lays out. Measuring synchronously in
+   * `mountPopup` reads a collapsed/fallback width and places left/right tips wrong.
+   */
+  private schedulePosition() {
+    if (!this.popupEl) return;
+
+    const reapplyLabelStyles = () => {
+      const label = this.popupEl?.querySelector(':scope > .tooltip-inner > ds-text');
+      if (label instanceof HTMLElement) styleTooltipLabel(label);
+    };
+
+    requestAnimationFrame(() => {
+      reapplyLabelStyles();
+      this.calculatePosition();
+      requestAnimationFrame(() => {
+        reapplyLabelStyles();
+        this.calculatePosition();
+      });
+    });
+
+    this.positionObserver?.disconnect();
+    this.positionObserver = new ResizeObserver(() => this.calculatePosition());
+    this.positionObserver.observe(this.popupEl);
+  }
+
   /** Drop the open tip immediately (warm handoff to another tooltip). */
   private hideInstant() {
     this.clearTimers();
@@ -222,6 +267,7 @@ export class Tooltip {
       activeTooltip.hideInstant();
       instant = true;
     }
+    // eslint-disable-next-line @typescript-eslint/no-this-alias -- module singleton tracks the active instance
     activeTooltip = this;
     this.skipEnterAnimation = instant;
     if (instant) {
@@ -275,7 +321,7 @@ export class Tooltip {
     this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);
     this.popupEl.classList.remove('tooltip-popup--closing');
     this.renderPopupContent();
-    this.calculatePosition();
+    this.schedulePosition();
     this.isOpen = true;
   }
 
@@ -303,10 +349,11 @@ export class Tooltip {
 
     appendShortcut('start');
 
-    const labelWrap = document.createElement('span');
-    labelWrap.className = `tooltip-label ${sc}`;
-    labelWrap.appendChild(createDsText({ variant: textVariant, text: this.label }));
-    inner.appendChild(labelWrap);
+    // ds-text is the layout box (metric-box + 2px control label-inset).
+    // Inline styles required — see styleTooltipLabel.
+    const label = createDsText({ variant: textVariant, wrap: 'nowrap', text: this.label });
+    styleTooltipLabel(label);
+    inner.appendChild(label);
 
     appendShortcut('end');
 

package/src/wc/components/TooltipDataViz/TooltipDataViz.tsx

@@ -8,8 +8,9 @@ export type TooltipDataVizSide = 'left' | 'right';
 export type TooltipDataVizAlign = 'top' | 'bottom';
 
 /**
- * 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`.
  *
@@ -120,16 +121,23 @@ export class TooltipDataViz {
         style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}
       >
         <div class="tooltip-data-viz__item ds-control--md">
-          <span class="tooltip-data-viz__label">
-            <ds-text as="span" variant="text-body-medium" color="var(--color-foreground-on-translucent-background-secondary)">
-              {this.label}
-            </ds-text>
-          </span>
-          <span class="tooltip-data-viz__value">
-            <ds-text as="span" variant="text-body-medium" emphasis color="var(--color-foreground-on-translucent-background-primary)">
-              {this.value}
-            </ds-text>
-          </span>
+          <ds-text
+            class="tooltip-data-viz__label"
+            as="span"
+            variant="text-body-medium"
+            color="var(--color-foreground-on-translucent-background-secondary)"
+          >
+            {this.label}
+          </ds-text>
+          <ds-text
+            class="tooltip-data-viz__value"
+            as="span"
+            variant="text-body-medium"
+            emphasis
+            color="var(--color-foreground-on-translucent-background-primary)"
+          >
+            {this.value}
+          </ds-text>
         </div>
       </Host>
     );

package/src/wc/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";
@@ -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";
@@ -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 {
         /**
@@ -1070,7 +1076,7 @@ export namespace Components {
         "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.
+          * Heavier weight + tighter letter-spacing for the variant. `false` (default): one step below emphasis (display semibold, title/body medium, caption medium). `true`: display bold, title/caption semibold, body medium.
           * @default false
          */
         "emphasis": boolean;
@@ -1156,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,
@@ -1851,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,
@@ -2255,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;
@@ -2511,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 {
         /**
@@ -2985,7 +2997,7 @@ declare namespace LocalJSX {
         "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.
+          * Heavier weight + tighter letter-spacing for the variant. `false` (default): one step below emphasis (display semibold, title/body medium, caption medium). `true`: display bold, title/caption semibold, body medium.
           * @default false
          */
         "emphasis"?: boolean;
@@ -3072,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,
@@ -3264,7 +3277,8 @@ declare namespace LocalJSX {
         "ariaDescribedby": string | undefined;
     }
     interface DsLoaderAttributes {
-        "size": string;
+        "size": LoaderSize;
+        "color": LoaderColor | undefined;
         "label": string | undefined;
     }
     interface DsMenuAttributes {
@@ -3537,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/src/wc/utils/control-density.css

@@ -3,8 +3,8 @@
  * (Tag, PanelNav items, BarNav tabs, Menu items, Chip, etc.).
  *
  * Apply `.ds-control--md|sm|xs` on the control (host or inner row). Then use the
- * `--ds-control-*` vars for height, padding, icon box, label inset, gap, radius,
- * and line-height (for wrappers around `ds-text`).
+ * `--ds-control-*` vars for height, padding, icon box, label inset, gap, and radius.
+ * Text line-height belongs exclusively to the selected `ds-text` variant.
  *
  * Both `:host(.ds-control--*)` and `.ds-control--*` are listed so Stencil scoped
  * components work whether the class is on the host (Tag) or an inner item (PanelNav).
@@ -20,8 +20,6 @@
   --ds-control-label-inset: var(--dimension-space-025);
   --ds-control-gap: var(--dimension-space-050);
   --ds-control-radius: var(--dimension-radius-025);
-  /* Matches text-body-medium line-height — wrappers around ds-text need this. */
-  --ds-control-line-height: var(--typography-lineheight-md);
 }
 
 :host(.ds-control--sm),
@@ -32,7 +30,6 @@
   --ds-control-label-inset: var(--dimension-space-025);
   --ds-control-gap: var(--dimension-space-025);
   --ds-control-radius: var(--dimension-radius-025);
-  --ds-control-line-height: var(--typography-lineheight-sm);
 }
 
 :host(.ds-control--xs),
@@ -43,5 +40,4 @@
   --ds-control-label-inset: var(--dimension-space-025);
   --ds-control-gap: var(--dimension-space-025);
   --ds-control-radius: var(--dimension-radius-025);
-  --ds-control-line-height: var(--typography-lineheight-xs);
 }