@ds-mo/ui 2.14.0 → 3.0.0

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

@@ -150,9 +150,9 @@ export class Table {
                       }}
                       style={col.minWidth ? { minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth as string } : undefined}
                     >
-                      <span class="text-body-small-emphasis" style={{ color: 'var(--color-foreground-secondary)' }}>
+                      <ds-text as="span" variant="text-body-small" emphasis color="secondary">
                         {col.header}
-                      </span>
+                      </ds-text>
                       {isSorted && (
                         <span class="sort-indicator" aria-hidden="true">
                           {sort.direction === 'asc' ? '↑' : '↓'}
@@ -181,11 +181,15 @@ export class Table {
 
               {/* Empty state */}
               {isEmpty && (
-                <div class="empty-row" style={{ gridColumn: '1 / -1' }}>
-                  <p class="text-body-medium" style={{ margin: '0', color: 'var(--color-foreground-secondary)' }}>
-                    {this.emptyMessage}
-                  </p>
-                </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,19 +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="text-body-medium cell-value">
-                          {String(getCellValue(col, row) ?? '')}
-                        </span>
-                      </div>
+                        {String(getCellValue(col, row) ?? '')}
+                      </ds-text>
                     ))}
                   </div>
                 );
@@ -243,11 +248,11 @@ export class Table {
                   this.dsPageChange.emit({ pageIndex: this.pageIndex });
                 }}
               >
-                <span class="text-body-small">Previous</span>
+                <ds-text as="span" variant="text-body-small">Previous</ds-text>
               </button>
-              <span class="text-body-small" style={{ color: 'var(--color-foreground-secondary)' }}>
+              <ds-text as="span" variant="text-body-small" color="secondary">
                 Page {this.pageIndex! + 1} of {totalPages}
-              </span>
+              </ds-text>
               <button
                 type="button"
                 class="page-button"
@@ -257,7 +262,7 @@ export class Table {
                   this.dsPageChange.emit({ pageIndex: this.pageIndex });
                 }}
               >
-                <span class="text-body-small">Next</span>
+                <ds-text as="span" variant="text-body-small">Next</ds-text>
               </button>
             </div>
           )}

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

@@ -1,16 +1,10 @@
 import { Component, Prop, h, Host } from '@stencil/core';
+import { CONTROL_TEXT_VARIANT } from '../../utils';
 
 export type TagIntent   = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
 export type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';
 export type TagSize     = 'md' | 'sm' | 'xs';
 
-/** Text variant per control-density recipe (md / sm / xs). */
-const TEXT_VARIANT: Record<TagSize, string> = {
-  md: 'text-body-medium',
-  sm: 'text-body-small',
-  xs: 'text-caption',
-};
-
 /**
  * `ds-icon` size prop matching control-density icon metrics
  * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).
@@ -35,7 +29,7 @@ export class Tag {
   @Prop() maxWidth: string | number | undefined;
 
   render() {
-    const textVariant = TEXT_VARIANT[this.size];
+    const textVariant = CONTROL_TEXT_VARIANT[this.size];
     const iconSize = ICON_SIZE[this.size];
 
     const maxWidthStyle = this.maxWidth != null
@@ -60,9 +54,9 @@ export class Tag {
         <span class="tag__icon-slot" data-icon-size={iconSize}>
           <slot name="icon" />
         </span>
-        <span class={{ 'tag__label': true, [textVariant]: true }}>
+        <ds-text class="tag__label" as="span" variant={textVariant} color="inherit">
           {this.label}
-        </span>
+        </ds-text>
       </Host>
     );
   }

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

@@ -1,32 +1,15 @@
 import { Component, Prop, h, Host } from '@stencil/core';
-
-export type TextVariant =
-  | 'text-display-medium'
-  | 'text-display-small'
-  | 'text-title-large'
-  | 'text-title-medium'
-  | 'text-title-small'
-  | 'text-body-large'
-  | 'text-body-large-emphasis'
-  | 'text-body-medium'
-  | 'text-body-medium-emphasis'
-  | 'text-body-small'
-  | 'text-body-small-emphasis'
-  | 'text-caption'
-  | 'text-caption-emphasis';
-
-export type TextColorToken =
-  | 'primary' | 'secondary' | 'tertiary'
-  | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai'
-  | 'on-strong' | 'on-bold' | 'inherit';
-
-export type TextColor = TextColorToken | `var(--${string})`;
-export type TextDecoration = 'none' | 'underline' | 'dotted-underline';
-export type TextAlign = 'left' | 'center' | 'right';
-export type LineTruncation = 1 | 2 | 3 | 4 | 5 | 'none';
-export type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';
-export type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type TextFontFeature = 'normal' | 'tabular-nums';
+import { textDisplayClass, textVariantClass } from './text-utils';
+import type {
+  TextAlign,
+  TextColor,
+  TextDecoration,
+  TextElement,
+  TextFontFeature,
+  TextVariant,
+  LineTruncation,
+  TextWrap,
+} from './text-types';
 
 @Component({
   tag: 'ds-text',
@@ -35,6 +18,12 @@ export type TextFontFeature = 'normal' | 'tabular-nums';
 })
 export class Text {
   @Prop() variant: TextVariant = 'text-body-medium';
+  /**
+   * Heavier weight + tighter letter-spacing for the variant.
+   * `false` (default): regular weight (caption stays medium).
+   * `true`: display bold, title/caption semibold, body medium.
+   */
+  @Prop() emphasis: boolean = false;
   @Prop() color: TextColor | undefined;
   @Prop() decoration: TextDecoration | undefined;
   @Prop() italic: boolean = false;
@@ -45,6 +34,8 @@ export class Text {
   @Prop() as: TextElement = 'p';
   /** Maps to `for` attribute on <label> elements. */
   @Prop() for: string | undefined;
+  /** Forwarded to the inner element (e.g. aria-labelledby targets). */
+  @Prop() textId: string | undefined;
 
   render() {
     // Polymorphic element: TSX treats a variable tag as a component, so a
@@ -54,35 +45,38 @@ export class Text {
     const isCustomColor = (c: TextColor) => typeof c === 'string' && c.startsWith('var(--');
 
     const cls: Record<string, boolean> = {
-      [this.variant]: true,
-      'text': true,
-      'text--nowrap': this.wrap === 'nowrap',
-      'text--balance': this.wrap === 'balance',
-      'text--pretty': this.wrap === 'pretty',
-      'text--truncate-1': this.lineTruncation === 1 && this.wrap !== 'nowrap',
-      'text--truncate-2': this.lineTruncation === 2 && this.wrap !== 'nowrap',
-      'text--truncate-3': this.lineTruncation === 3 && this.wrap !== 'nowrap',
-      'text--truncate-4': this.lineTruncation === 4 && this.wrap !== 'nowrap',
-      'text--truncate-5': this.lineTruncation === 5 && this.wrap !== 'nowrap',
-      'text--color-primary':   this.color === 'primary',
-      'text--color-secondary': this.color === 'secondary',
-      'text--color-tertiary':  this.color === 'tertiary',
-      'text--color-brand':     this.color === 'brand',
-      'text--color-negative':  this.color === 'negative',
-      'text--color-positive':  this.color === 'positive',
-      'text--color-warning':   this.color === 'warning',
-      'text--color-caution':   this.color === 'caution',
-      'text--color-ai':        this.color === 'ai',
-      'text--color-on-strong': this.color === 'on-strong',
-      'text--color-on-bold':   this.color === 'on-bold',
-      'text--color-inherit':   this.color === 'inherit',
-      'text--decoration-underline':        this.decoration === 'underline',
-      'text--decoration-dotted-underline': this.decoration === 'dotted-underline',
-      'text--italic': this.italic,
-      'text--align-left':   this.align === 'left',
-      'text--align-center': this.align === 'center',
-      'text--align-right':  this.align === 'right',
-      'text--font-feature-tabular-nums': this.fontFeature === 'tabular-nums',
+      'ds-text': true,
+      [textDisplayClass(this.as)]: true,
+      [textVariantClass(this.variant)]: true,
+      'ds-text--emphasis': this.emphasis,
+      'ds-text--regular': !this.emphasis,
+      'ds-text--nowrap': this.wrap === 'nowrap',
+      'ds-text--balance': this.wrap === 'balance',
+      'ds-text--pretty': this.wrap === 'pretty',
+      'ds-text--truncate-1': this.lineTruncation === 1 && this.wrap !== 'nowrap',
+      'ds-text--truncate-2': this.lineTruncation === 2 && this.wrap !== 'nowrap',
+      'ds-text--truncate-3': this.lineTruncation === 3 && this.wrap !== 'nowrap',
+      'ds-text--truncate-4': this.lineTruncation === 4 && this.wrap !== 'nowrap',
+      'ds-text--truncate-5': this.lineTruncation === 5 && this.wrap !== 'nowrap',
+      'ds-text--color-primary':   this.color === 'primary',
+      'ds-text--color-secondary': this.color === 'secondary',
+      'ds-text--color-tertiary':  this.color === 'tertiary',
+      'ds-text--color-brand':     this.color === 'brand',
+      'ds-text--color-negative':  this.color === 'negative',
+      'ds-text--color-positive':  this.color === 'positive',
+      'ds-text--color-warning':   this.color === 'warning',
+      'ds-text--color-caution':   this.color === 'caution',
+      'ds-text--color-ai':        this.color === 'ai',
+      'ds-text--color-on-strong': this.color === 'on-strong',
+      'ds-text--color-on-bold':   this.color === 'on-bold',
+      'ds-text--color-inherit':   this.color === 'inherit',
+      'ds-text--decoration-underline':        this.decoration === 'underline',
+      'ds-text--decoration-dotted-underline': this.decoration === 'dotted-underline',
+      'ds-text--italic': this.italic,
+      'ds-text--align-left':   this.align === 'left',
+      'ds-text--align-center': this.align === 'center',
+      'ds-text--align-right':  this.align === 'right',
+      'ds-text--font-feature-tabular-nums': this.fontFeature === 'tabular-nums',
     };
 
     const style = this.color && isCustomColor(this.color)
@@ -91,10 +85,11 @@ export class Text {
 
     const extraProps: Record<string, string> = {};
     if (this.as === 'label' && this.for) extraProps['for'] = this.for;
+    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/index.ts

@@ -1 +1,12 @@
-export type { TextVariant, TextColor, TextColorToken, TextDecoration, TextAlign, LineTruncation, TextWrap, TextElement } from './Text';
+export type {
+  TextVariant,
+  TextColor,
+  TextColorToken,
+  TextDecoration,
+  TextAlign,
+  LineTruncation,
+  TextWrap,
+  TextElement,
+  TextFontFeature,
+} from './text-types';
+export { textVariantClass } from './text-utils';

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

@@ -0,0 +1,23 @@
+export type TextVariant =
+  | 'text-display-medium'
+  | 'text-display-small'
+  | 'text-title-large'
+  | 'text-title-medium'
+  | 'text-title-small'
+  | 'text-body-large'
+  | 'text-body-medium'
+  | 'text-body-small'
+  | 'text-caption';
+
+export type TextColorToken =
+  | 'primary' | 'secondary' | 'tertiary'
+  | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai'
+  | 'on-strong' | 'on-bold' | 'inherit';
+
+export type TextColor = TextColorToken | `var(--${string})`;
+export type TextDecoration = 'none' | 'underline' | 'dotted-underline';
+export type TextAlign = 'left' | 'center' | 'right';
+export type LineTruncation = 1 | 2 | 3 | 4 | 5 | 'none';
+export type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';
+export type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type TextFontFeature = 'normal' | 'tabular-nums';

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

@@ -0,0 +1,13 @@
+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

@@ -1,23 +1,19 @@
 import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';
-import { resolveCssLengthPx, resolveCssTimeMs, TOKEN_CSS_LENGTHS, TOKEN_DEFAULTS } from '../../utils';
+import {
+  CONTROL_TEXT_VARIANT,
+  resolveCssLengthPx,
+  resolveCssTimeMs,
+  TOKEN_CSS_LENGTHS,
+  TOKEN_DEFAULTS,
+} from '../../utils';
+import type { TextVariant } from '../Text/text-types';
+// Side-effect: register `ds-text` — the portal builds it via createElement, not JSX.
+import '../Text/Text';
 
 export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
 export type TooltipAlign = 'start' | 'center' | 'end';
 export type TooltipSize = 'md' | 'sm' | 'xs';
 
-/** Body text per control-density size (regular weight — not emphasis). */
-const TEXT_VARIANT: Record<TooltipSize, string> = {
-  md: 'text-body-medium',
-  sm: 'text-body-small',
-  xs: 'text-caption',
-};
-
-const LINE_HEIGHT: Record<TooltipSize, string> = {
-  md: 'var(--typography-lineheight-md)',
-  sm: 'var(--typography-lineheight-sm)',
-  xs: 'var(--typography-lineheight-xs)',
-};
-
 const FALLBACK_HEIGHT: Record<TooltipSize, string> = {
   md: TOKEN_DEFAULTS.size400,
   sm: TOKEN_DEFAULTS.size300,
@@ -29,6 +25,30 @@ let tooltipIdCounter = 0;
 /** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */
 let activeTooltip: Tooltip | null = null;
 
+type DsTextEl = HTMLElement & {
+  as: string;
+  variant: TextVariant;
+  emphasis: boolean;
+  color: string;
+};
+
+function createDsText(opts: {
+  variant: TextVariant;
+  emphasis?: boolean;
+  color?: string;
+  className?: string;
+  text: string;
+}): DsTextEl {
+  const el = document.createElement('ds-text') as DsTextEl;
+  if (opts.className) el.className = opts.className;
+  el.as = 'span';
+  el.variant = opts.variant;
+  el.emphasis = opts.emphasis ?? false;
+  el.color = opts.color ?? 'inherit';
+  el.textContent = opts.text;
+  return el;
+}
+
 /**
  * Imperative body portal for the popup.
  * Stencil must not own the portaled node — moving a VDOM child to `document.body`
@@ -204,6 +224,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) {
@@ -263,28 +284,39 @@ export class Tooltip {
 
   private renderPopupContent() {
     if (!this.popupEl) return;
-    const textVariant = TEXT_VARIANT[this.size];
-    const lineHeight = LINE_HEIGHT[this.size];
+    const textVariant = CONTROL_TEXT_VARIANT[this.size];
     const density =
       this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';
-    // Every node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.
+    // Every layout node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.
     const sc = 'sc-ds-tooltip';
 
-    const startKey =
-      this.shortcutKey && this.shortcutKeyPosition === 'start'
-        ? `<div class="key-hint ${sc}" aria-hidden="true"><span class="text-caption-emphasis ${sc}">${escapeHtml(this.shortcutKey)}</span></div>`
-        : '';
-    const endKey =
-      this.shortcutKey && this.shortcutKeyPosition === 'end'
-        ? `<div class="key-hint ${sc}" aria-hidden="true"><span class="text-caption-emphasis ${sc}">${escapeHtml(this.shortcutKey)}</span></div>`
-        : '';
-
-    this.popupEl.innerHTML =
-      `<div class="tooltip-inner ${density} ${sc}">` +
-      startKey +
-      `<span class="tooltip-label ${textVariant} ${sc}" style="line-height:${lineHeight}">${escapeHtml(this.label)}</span>` +
-      endKey +
-      `</div>`;
+    const inner = document.createElement('div');
+    inner.className = `tooltip-inner ${density} ${sc}`;
+
+    const appendShortcut = (position: 'start' | 'end') => {
+      if (!this.shortcutKey || this.shortcutKeyPosition !== position) return;
+      const hint = document.createElement('div');
+      hint.className = `key-hint ${sc}`;
+      hint.setAttribute('aria-hidden', 'true');
+      hint.appendChild(
+        createDsText({ variant: 'text-caption', emphasis: true, text: this.shortcutKey }),
+      );
+      inner.appendChild(hint);
+    };
+
+    appendShortcut('start');
+
+    inner.appendChild(
+      createDsText({
+        className: `tooltip-label ${sc}`,
+        variant: textVariant,
+        text: this.label,
+      }),
+    );
+
+    appendShortcut('end');
+
+    this.popupEl.replaceChildren(inner);
   }
 
   private calculatePosition() {
@@ -338,12 +370,3 @@ export class Tooltip {
     );
   }
 }
-
-function escapeHtml(value: string): string {
-  return value
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
-}

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>
     );