@ds-mo/ui 2.13.1 → 2.15.0

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

@@ -1,6 +1,7 @@
 import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';
 import type { ChromeTransitionDetail } from '../../nav/chrome-transition';
 import {
+  PANEL_TOOLS_FOOTER_TOOL_ID,
   PANEL_TOOLS_LABELS,
   PANEL_TOOLS_PRIMARY_TOOL_ID,
   type PanelToolsItem,
@@ -19,7 +20,7 @@ export class PanelTools {
   /** When false, only the icon rail is shown. */
   @Prop({ mutable: true, reflect: true }) open: boolean = false;
 
-  /** Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`. */
+  /** Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`. */
   @Prop({ mutable: true, attribute: 'active-tool', reflect: true })
   activeTool: PanelToolsToolId | '' = '';
 
@@ -62,8 +63,15 @@ export class PanelTools {
   private get orderedRailItems(): PanelToolsItem[] {
     const railItems = this.railItems;
     const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);
-    const bodyItems = railItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);
-    return headerItem ? [headerItem, ...bodyItems] : bodyItems;
+    const footerItem = railItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);
+    const bodyItems = railItems.filter(
+      item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID,
+    );
+    const ordered: PanelToolsItem[] = [];
+    if (headerItem) ordered.push(headerItem);
+    ordered.push(...bodyItems);
+    if (footerItem) ordered.push(footerItem);
+    return ordered;
   }
 
   disconnectedCallback() {
@@ -230,7 +238,13 @@ export class PanelTools {
     const headerLabel = this.headerLabel();
     const orderedRailItems = this.orderedRailItems;
     const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);
-    const bodyItems = orderedRailItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);
+    const footerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);
+    const bodyItems = orderedRailItems.filter(
+      item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID,
+    );
+    const footerIndex = footerItem
+      ? (headerItem ? 1 : 0) + bodyItems.length
+      : -1;
     const showDrawerChrome = this.isDrawerPresent();
     const drawerResting = panelToolsDrawerResting(this.open, this.motion);
 
@@ -259,6 +273,11 @@ export class PanelTools {
                 this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx),
               )}
             </div>
+            {footerItem ? (
+              <div class="panel-tools__rail-footer">
+                {this.renderRailAction(footerItem, footerIndex)}
+              </div>
+            ) : null}
           </nav>
 
           <div
@@ -271,14 +290,17 @@ export class PanelTools {
           >
             <div class="panel-tools__drawer-surface">
               <header class="panel-tools__header">
-                <span class="panel-tools__title text-body-medium-emphasis">{headerLabel}</span>
+                <span class="panel-tools__title">
+                  <ds-text as="span" variant="text-body-medium" emphasis color="inherit" wrap="nowrap">
+                    {headerLabel}
+                  </ds-text>
+                </span>
               </header>
               <div class="panel-tools__body">
                 <div
                   class={{
                     'panel-tools__view': true,
                     'panel-tools__view--active': this.isViewActive('search'),
-                    'text-body-medium': true,
                   }}
                   hidden={!this.isViewActive('search')}
                 >
@@ -288,7 +310,6 @@ export class PanelTools {
                   class={{
                     'panel-tools__view': true,
                     'panel-tools__view--active': this.isViewActive('messages'),
-                    'text-body-medium': true,
                   }}
                   hidden={!this.isViewActive('messages')}
                 >
@@ -298,7 +319,6 @@ export class PanelTools {
                   class={{
                     'panel-tools__view': true,
                     'panel-tools__view--active': this.isViewActive('stacks'),
-                    'text-body-medium': true,
                   }}
                   hidden={!this.isViewActive('stacks')}
                 >
@@ -308,7 +328,6 @@ export class PanelTools {
                   class={{
                     'panel-tools__view': true,
                     'panel-tools__view--active': this.isViewActive('activity'),
-                    'text-body-medium': true,
                   }}
                   hidden={!this.isViewActive('activity')}
                 >
@@ -318,12 +337,20 @@ export class PanelTools {
                   class={{
                     'panel-tools__view': true,
                     'panel-tools__view--active': this.isViewActive('agents'),
-                    'text-body-medium': true,
                   }}
                   hidden={!this.isViewActive('agents')}
                 >
                   <slot name="agents" />
                 </div>
+                <div
+                  class={{
+                    'panel-tools__view': true,
+                    'panel-tools__view--active': this.isViewActive('help'),
+                  }}
+                  hidden={!this.isViewActive('help')}
+                >
+                  <slot name="help" />
+                </div>
               </div>
             </div>
           </div>

package/src/wc/components/PanelTools/index.ts

@@ -1,5 +1,6 @@
 export type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';
 export {
+  PANEL_TOOLS_FOOTER_TOOL_ID,
   PANEL_TOOLS_LABELS,
   PANEL_TOOLS_PRIMARY_TOOL_ID,
   PANEL_TOOLS_TOOL_IDS,

package/src/wc/components/PanelTools/panel-tools-types.ts

@@ -1,5 +1,11 @@
 /** Tool ids for the `ds-panel-tools` rail and drawer views. */
-export type PanelToolsToolId = 'search' | 'agents' | 'messages' | 'stacks' | 'activity';
+export type PanelToolsToolId =
+  | 'search'
+  | 'agents'
+  | 'messages'
+  | 'stacks'
+  | 'activity'
+  | 'help';
 
 export const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [
   'search',
@@ -7,17 +13,22 @@ export const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [
   'messages',
   'stacks',
   'activity',
+  'help',
 ];
 
 /** Rail header slot — mirrors panel-nav M logo row. */
 export const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';
 
+/** Rail footer slot — flush to the bottom of the tools column. */
+export const PANEL_TOOLS_FOOTER_TOOL_ID: PanelToolsToolId = 'help';
+
 export const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {
   search: 'Search',
   messages: 'Messages',
   stacks: 'Stacks',
   activity: 'Activity',
   agents: 'Agents',
+  help: 'Help & Support',
 };
 
 export interface PanelToolsItem {

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

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

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

@@ -1,6 +1,11 @@
 import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';
-import { controlWidthClass, type ControlWidth } from '../../utils/control-width';
-import { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';
+import {
+  controlWidthClass,
+  CONTROL_TEXT_VARIANT,
+  resolveCssLengthPx,
+  TOKEN_DEFAULTS,
+  type ControlWidth,
+} from '../../utils';
 import type { MenuItemData } from '../Menu/menu-types';
 
 export interface SelectOption {
@@ -12,13 +17,6 @@ export type SelectSize = 'md' | 'sm' | 'xs';
 
 export type SelectWidth = ControlWidth;
 
-/** Regular (non-emphasis) type per density — selects stay visually lighter than buttons. */
-const TEXT_VARIANT: Record<SelectSize, string> = {
-  md: 'text-body-medium',
-  sm: 'text-body-small',
-  xs: 'text-caption',
-};
-
 /** `ds-icon` size matching control-density icon metrics. */
 const ICON_SIZE: Record<SelectSize, 'md' | 'sm' | 'xs'> = {
   md: 'md',
@@ -207,7 +205,7 @@ export class Select {
     const showPlaceholder = !this.hasSelection;
     const hasValue = !showPlaceholder;
     const label = showPlaceholder ? this.placeholder : this.selectedLabel;
-    const textVariant = TEXT_VARIANT[this.size];
+    const textVariant = CONTROL_TEXT_VARIANT[this.size];
     const iconSize = ICON_SIZE[this.size];
     const density = `ds-control--${this.size}`;
     // Selected fill when a value is set (or while open), gated by `activeFill`.
@@ -249,14 +247,10 @@ export class Select {
           aria-labelledby={this.ariaLabelledby}
           onClick={() => this.toggle({ focusVisible: false })}
         >
-          <span
-            class={{
-              'trigger__label': true,
-              [textVariant]: true,
-              'ds-interaction-fill__content': true,
-            }}
-          >
-            {label}
+          <span class="trigger__label ds-interaction-fill__content">
+            <ds-text as="span" variant={textVariant} color="inherit" lineTruncation={1}>
+              {label}
+            </ds-text>
           </span>
           <span class="trigger__chevron ds-interaction-fill__content" aria-hidden="true">
             <ds-icon name="ChevronDown" size={iconSize} color="inherit" />

package/src/wc/components/Slider/Slider.tsx

@@ -38,8 +38,12 @@ export class Slider {
     return (
       <Host class="field">
         <div class="label-row">
-          <label class="text-body-small-emphasis" htmlFor={finalId}>{this.label}</label>
-          <span class="text-body-small-emphasis">{this.value}</span>
+          <ds-text as="label" variant="text-body-small" emphasis for={finalId}>
+            {this.label}
+          </ds-text>
+          <ds-text as="span" variant="text-body-small" emphasis>
+            {this.value}
+          </ds-text>
         </div>
         <div
           class={{

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-/, '')}`;
+}