@ds-mo/ui 2.14.0 → 2.15.0

package/src/wc/components/TabGroup/TabGroup.tsx

@@ -180,9 +180,10 @@ export class TabGroup {
                 <span class={{
                   tab__label: true,
                   'tab__label--dot': !!tab.dot,
-                  [isSelected ? 'text-body-small-emphasis' : 'text-body-small']: true,
                 }}>
-                  {tab.label}
+                  <ds-text as="span" variant="text-body-small" emphasis={isSelected} color="inherit">
+                    {tab.label}
+                  </ds-text>
                   {tab.dot && (
                     <ds-badge
                       class="tab__dot"

package/src/wc/components/TabGroupNav/TabGroupNav.tsx

@@ -323,9 +323,10 @@ export class TabGroupNav {
                 <span class={{
                   tab__label: true,
                   'tab__label--dot': !!tab.dot,
-                  [isSelected ? 'text-body-medium-emphasis' : 'text-body-medium']: true,
                 }}>
-                  {tab.label}
+                  <ds-text as="span" variant="text-body-medium" emphasis={isSelected} color="inherit">
+                    {tab.label}
+                  </ds-text>
                   {tab.dot && (
                     <ds-badge
                       class="tab__dot"

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' ? '↑' : '↓'}
@@ -182,9 +182,9 @@ 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)' }}>
+                  <ds-text as="p" variant="text-body-medium" color="secondary">
                     {this.emptyMessage}
-                  </p>
+                  </ds-text>
                 </div>
               )}
 
@@ -220,8 +220,10 @@ export class Table {
                         }}
                         role="cell"
                       >
-                        <span class="text-body-medium cell-value">
-                          {String(getCellValue(col, row) ?? '')}
+                        <span class="cell-value">
+                          <ds-text as="span" variant="text-body-medium">
+                            {String(getCellValue(col, row) ?? '')}
+                          </ds-text>
                         </span>
                       </div>
                     ))}
@@ -243,11 +245,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 +259,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,8 +54,10 @@ export class Tag {
         <span class="tag__icon-slot" data-icon-size={iconSize}>
           <slot name="icon" />
         </span>
-        <span class={{ 'tag__label': true, [textVariant]: true }}>
-          {this.label}
+        <span class="tag__label">
+          <ds-text as="span" variant={textVariant} color="inherit">
+            {this.label}
+          </ds-text>
         </span>
       </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 { 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,37 @@ 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,
+      [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,6 +84,7 @@ 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' }}>

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,6 @@
+import type { TextVariant } from './text-types';
+
+/** `text-body-medium` → `ds-text--body-medium` */
+export function textVariantClass(variant: TextVariant): string {
+  return `ds-text--${variant.replace(/^text-/, '')}`;
+}

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,28 @@ 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;
+  text: string;
+}): DsTextEl {
+  const el = document.createElement('ds-text') as DsTextEl;
+  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`
@@ -263,28 +281,36 @@ 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');
+
+    const labelWrap = document.createElement('span');
+    labelWrap.className = `tooltip-label ${sc}`;
+    labelWrap.appendChild(createDsText({ variant: textVariant, text: this.label }));
+    inner.appendChild(labelWrap);
+
+    appendShortcut('end');
+
+    this.popupEl.replaceChildren(inner);
   }
 
   private calculatePosition() {
@@ -338,12 +364,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

@@ -126,7 +126,7 @@ export class TooltipDataViz {
             </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)">
+            <ds-text as="span" variant="text-body-medium" emphasis color="var(--color-foreground-on-translucent-background-primary)">
               {this.value}
             </ds-text>
           </span>

package/src/wc/components.d.ts

@@ -37,7 +37,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";
@@ -71,7 +71,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 {
@@ -1069,6 +1069,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 +1090,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'
          */
@@ -2975,6 +2984,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 +3005,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'
          */
@@ -3367,6 +3385,7 @@ declare namespace LocalJSX {
     }
     interface DsTextAttributes {
         "variant": TextVariant;
+        "emphasis": boolean;
         "color": TextColor | undefined;
         "decoration": TextDecoration | undefined;
         "italic": boolean;
@@ -3376,6 +3395,7 @@ declare namespace LocalJSX {
         "fontFeature": TextFontFeature;
         "as": TextElement;
         "for": string | undefined;
+        "textId": string | undefined;
     }
     interface DsToggleAttributes {
         "checked": boolean;

package/src/wc/utils/control-density.css

@@ -3,7 +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, and radius.
+ * `--ds-control-*` vars for height, padding, icon box, label inset, gap, radius,
+ * and line-height (for wrappers around `ds-text`).
  *
  * 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).
@@ -19,6 +20,8 @@
   --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),
@@ -29,6 +32,7 @@
   --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),
@@ -39,4 +43,5 @@
   --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);
 }

package/src/wc/utils/control-text.ts

@@ -0,0 +1,11 @@
+import type { TextVariant } from '../components/Text/text-types';
+
+/** Control-density sizes shared by buttons, tags, chips, select, tooltip. */
+export type ControlDensitySize = 'md' | 'sm' | 'xs';
+
+/** Body/caption variant per control-density size (emphasis is separate). */
+export const CONTROL_TEXT_VARIANT: Record<ControlDensitySize, TextVariant> = {
+  md: 'text-body-medium',
+  sm: 'text-body-small',
+  xs: 'text-caption',
+};

package/src/wc/utils/index.ts

@@ -23,3 +23,5 @@ 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 { ControlDensitySize } from './control-text';

package/dist/components/p-1m8r0wFg.js

@@ -1,2 +0,0 @@
-import{p as o,H as r,c as t,h as s,a as n,t as a}from"./index.js";import{g as i,i as e}from"./p-BQq26pt9.js";import{d}from"./p-EK1hOP19.js";const c=()=>`.sc-ds-tab-group-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-tab-group-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-tab-group-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-tab-group-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-tab-group-nav-h,.ds-control-inactive.sc-ds-tab-group-nav{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-tab-group-nav-h{display:block}.tab-list.sc-ds-tab-group-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group-nav{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group-nav:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group-nav:active::after{background:var(--_pressed-bg);transition:none}.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-primary)}.tab-list--vertical.sc-ds-tab-group-nav .tab.sc-ds-tab-group-nav{justify-content:flex-start}.tab__label.sc-ds-tab-group-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group-nav{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.on-bold.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group-nav{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);--ds-focus-ring-color:var(--color-always-dark-interaction-focus);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group-nav{color:var(--color-always-dark-foreground-primary)}.on-navigation.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot:var(--color-navigation-foreground-brand);--_dot-ring:var(--color-navigation-background);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.on-navigation.tab--selected.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-primary)}.tab-list--on-navigation.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{background-color:var(--color-navigation-border-tertiary)}.tab-divider.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group-nav{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const l=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsRovingExit=t(this,"dsRovingExit");this.value="";this.tabs=[];this.orientation="horizontal";this.selectionFollowsFocus=true;this.rovingEnabled=true;this.focusedTabId=""}get selectableTabs(){return i(this.tabs)}componentWillLoad(){this.syncFocusedTabId(this.value)}onValueChange(o,r){if(!this.selectionFollowsFocus){if(r===undefined||o!==this.focusedTabId){this.syncFocusedTabId(o)}return}if(r===undefined||o===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const t=r.getAttribute("data-tab-id");if(t===o)return;const s=this.el.querySelector(`[data-tab-id="${o}"]`);if(s){s.focus({preventScroll:true})}else{r.blur()}}))}onTabsChange(){if(!this.selectableTabs.some((o=>o.id===this.focusedTabId))){this.syncFocusedTabId(this.value)}}async focusTab(o){this.focusedTabId=o;const r=this.el.querySelector(`[data-tab-id="${o}"]`);r?.focus({preventScroll:true})}async focusLastTab(){const o=this.selectableTabs;const r=[...o].reverse().find((o=>!o.isInactive));if(r)await this.focusTab(r.id)}async focusFirstTab(){const o=this.selectableTabs.find((o=>!o.isInactive));if(o)await this.focusTab(o.id)}syncFocusedTabId(o){const r=this.selectableTabs;if(r.some((r=>r.id===o&&!r.isInactive))){this.focusedTabId=o;return}const t=r.find((o=>!o.isInactive));this.focusedTabId=t?.id??""}selectTab(o,r){this.value=o;this.focusedTabId=o;this.dsChange.emit(o);if(r?.focus!==false){void this.focusTab(o)}}getFocusedIndex(){return this.selectableTabs.findIndex((o=>o.id===this.focusedTabId))}findEnabledLinear(o,r){const t=this.selectableTabs;for(let s=o+r;s>=0&&s<t.length;s+=r){if(!t[s]?.isInactive)return s}return null}findEnabled(o,r){const t=this.selectableTabs;const s=t.length;for(let n=0;n<s;n++){const a=(o+r*(n+1)+s*(n+1))%s;if(!t[a]?.isInactive)return a}return o}moveFocusToIndex(o){const r=this.selectableTabs[o];if(!r)return;this.focusedTabId=r.id;void this.focusTab(r.id)}activateFocusedTab(o){if(o.key!=="Enter"&&o.key!==" ")return;const r=this.selectableTabs.find((o=>o.id===this.focusedTabId));if(!r||r.isInactive)return;o.preventDefault();this.selectTab(r.id,{focus:true})}handleKeyDown(o){const r=this.selectableTabs;if(!r.length)return;if(!this.selectionFollowsFocus){if(o.key==="Enter"||o.key===" "){this.activateFocusedTab(o);return}}const t=this.selectionFollowsFocus?r.findIndex((o=>o.id===this.value)):this.getFocusedIndex();if(t<0)return;const s=this.orientation==="vertical";let n=null;let a=null;if(!s){if(o.key==="ArrowRight"){if(this.selectionFollowsFocus){n=this.findEnabled(t,1)}else{const o=this.findEnabledLinear(t,1);if(o===null)a="end";else n=o}}else if(o.key==="ArrowLeft"){if(this.selectionFollowsFocus){n=this.findEnabled(t,-1)}else{const o=this.findEnabledLinear(t,-1);if(o===null)a="start";else n=o}}}else{if(o.key==="ArrowDown"){if(this.selectionFollowsFocus){n=this.findEnabled(t,1)}else{const o=this.findEnabledLinear(t,1);if(o===null)a="end";else n=o}}else if(o.key==="ArrowUp"){if(this.selectionFollowsFocus){n=this.findEnabled(t,-1)}else{const o=this.findEnabledLinear(t,-1);if(o===null)a="start";else n=o}}}if(o.key==="Home"){const o=r.findIndex((o=>!o.isInactive));n=o===-1?null:o}else if(o.key==="End"){const o=[...r].reverse().findIndex((o=>!o.isInactive));n=o===-1?null:r.length-1-o}if(a){o.preventDefault();this.dsRovingExit.emit(a);return}if(n!==null&&n!==t){o.preventDefault();const t=r[n];if(this.selectionFollowsFocus){this.selectTab(t.id)}else{this.moveFocusToIndex(n)}}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";if(this.background==="navigation")return"on-navigation";return`on-${this.background}`}tabIndexForTab(o){if(!this.rovingEnabled)return-1;if(this.selectionFollowsFocus){return o.id===this.value?0:-1}return o.id===this.focusedTabId?0:-1}render(){const o=this.getBgClass();const r=this.orientation==="vertical";const t=this.background==="navigation";return s(n,{key:"78efd00569e0f71d8a3cecc991d3ced1b369353f",class:"tab-group-nav-host"},s("div",{key:"d810f8b9d3a081271c52747a751ca5ad0347f8dd",role:"tablist",class:{"tab-list":true,"tab-list--vertical":r,"tab-list--on-navigation":t},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":r?"vertical":undefined},this.tabs.map(((t,n)=>{if(e(t)){return s("div",{key:`divider-${n}`,class:{"tab-divider":true,"tab-divider--vertical":r},"aria-hidden":"true"},s("div",{class:"tab-divider__line"}))}const a=t.id===this.value;return s("button",{key:t.id,type:"button",role:"tab","data-tab-id":t.id,class:{tab:true,"tab--selected":a,"ds-focus-ring-inset":true,"ds-control-inactive":!!t.isInactive,[o]:!!o},"aria-selected":a,"aria-disabled":t.isInactive||undefined,"aria-controls":t.panelId??undefined,disabled:t.isInactive,tabIndex:this.tabIndexForTab(t),onClick:()=>!t.isInactive&&this.selectTab(t.id),onFocus:()=>{if(!this.selectionFollowsFocus){this.focusedTabId=t.id}}},s("span",{class:{tab__label:true,"tab__label--dot":!!t.dot,[a?"text-body-medium-emphasis":"text-body-medium"]:true}},t.label,t.dot&&s("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}}static get style(){return c()}},[2,"ds-tab-group-nav",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1],selectionFollowsFocus:[4,"selection-follows-focus"],rovingEnabled:[4,"roving-enabled"],focusedTabId:[32],focusTab:[64],focusLastTab:[64],focusFirstTab:[64]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group-nav","ds-badge"];o.forEach((o=>{switch(o){case"ds-tab-group-nav":if(!customElements.get(a(o))){customElements.define(a(o),l)}break;case"ds-badge":if(!customElements.get(a(o))){d()}break}}))}u();export{l as T,u as d};
-//# sourceMappingURL=p-1m8r0wFg.js.map