@ds-mo/ui 2.14.0 → 3.0.0

package/src/wc/components/Checkbox/Checkbox.tsx

@@ -51,9 +51,9 @@ export class Checkbox {
             </span>
           )}
         </span>
-        <span id={this.labelId} class="text-body-medium checkbox__label">
+        <ds-text class="checkbox__label" as="span" variant="text-body-medium" textId={this.labelId}>
           {this.label}
-        </span>
+        </ds-text>
       </Host>
     );
   }

package/src/wc/components/Chip/Chip.tsx

@@ -1,4 +1,5 @@
 import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
+import { CONTROL_TEXT_VARIANT } from '../../utils';
 
 /**
  * Semantic chip state — replaces Tag’s intent × contrast matrix.
@@ -11,13 +12,6 @@ export type ChipState = 'default' | 'active' | 'error' | 'caution';
 export type ChipSize = 'md' | 'sm' | 'xs';
 export type ChipBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
 
-/** Text variant per control-density recipe (md / sm / xs). */
-const TEXT_VARIANT: Record<ChipSize, string> = {
-  md: 'text-body-medium',
-  sm: 'text-body-small',
-  xs: 'text-caption',
-};
-
 /** Dismiss `ds-icon` size — same iconography metrics as Tag’s leading icon. */
 const ICON_SIZE: Record<ChipSize, 'md' | 'sm' | 'xs'> = {
   md: 'md',
@@ -58,7 +52,7 @@ export class Chip {
   };
 
   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
@@ -88,9 +82,9 @@ export class Chip {
         style={maxWidthStyle}
         aria-disabled={this.isInactive || undefined}
       >
-        <span class={{ 'tag__label': true, [textVariant]: true }}>
+        <ds-text class="tag__label" as="span" variant={textVariant} color="inherit">
           {this.label}
-        </span>
+        </ds-text>
         {this.removable && (
           <button
             type="button"

package/src/wc/components/EmptyState/EmptyState.tsx

@@ -21,11 +21,9 @@ export class EmptyState {
   render() {
     return (
       <Host>
-        <div class="empty-state">
-          <p class="text-body-medium" style={{ color: 'var(--color-foreground-secondary)' }}>
-            {this.message || DEFAULT_MESSAGES[this.type]}
-          </p>
-        </div>
+        <ds-text class="empty-state" as="p" variant="text-body-medium" color="secondary">
+          {this.message || DEFAULT_MESSAGES[this.type]}
+        </ds-text>
       </Host>
     );
   }

package/src/wc/components/Field/Field.tsx

@@ -19,7 +19,9 @@ export class Field {
     return (
       <Host>
         <div class="field">
-          <label class="text-body-small-emphasis field__label" htmlFor={id}>{this.label}</label>
+          <ds-text as="label" variant="text-body-small" emphasis for={id}>
+            {this.label}
+          </ds-text>
           <slot />
         </div>
       </Host>

package/src/wc/components/Input/Input.tsx

@@ -67,7 +67,7 @@ export class Input {
               placeholder={this.placeholder}
               disabled={this.isInactive}
               autoFocus={this.autoFocus}
-              class="native-input"
+              class="native-input ds-text--body-medium ds-text--regular"
               aria-label={this.ariaLabel}
               aria-labelledby={this.ariaLabelledby}
               aria-describedby={describedBy}
@@ -90,9 +90,16 @@ export class Input {
           </div>
         </div>
         {showError && (
-          <div id={this.errorId} role="alert" class="error-text">
+          <ds-text
+            class="error-text"
+            as="div"
+            variant="text-body-small"
+            color="negative"
+            textId={this.errorId}
+            role="alert"
+          >
             {this.errorMessage}
-          </div>
+          </ds-text>
         )}
       </Host>
     );

package/src/wc/components/Loader/Loader.tsx

@@ -1,5 +1,8 @@
-import { Component, Prop, h } from '@stencil/core';
-import { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';
+import { Component, Prop, h, Host } from '@stencil/core';
+import type { IconColor, IconSize } from '../Icon/Icon';
+
+export type LoaderSize = IconSize;
+export type LoaderColor = IconColor;
 
 @Component({
   tag: 'ds-loader',
@@ -7,8 +10,10 @@ import { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';
   shadow: true,
 })
 export class Loader {
-  /** Render size — number (px) or TokoMo length (`var(--dimension-iconography-md)`, etc.). */
-  @Prop() size: number | string = TOKEN_DEFAULTS.iconographyMd;
+  /** Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px. */
+  @Prop() size: LoaderSize = 'md';
+  /** Semantic foreground color token, or a raw CSS var reference. Same tokens as `ds-icon`. */
+  @Prop() 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
@@ -16,37 +21,79 @@ export class Loader {
    */
   @Prop() label: string | undefined;
 
-  private get sizePx(): number {
-    return resolveCssLengthPx(this.size, TOKEN_DEFAULTS.iconographyMd);
-  }
-
   render() {
-    const px = `${this.sizePx}px`;
-    const svg = (
-      <svg
-        style={{ width: px, height: px }}
-        viewBox="0 0 16 16"
-        fill="none"
-        class="spinner"
-        aria-hidden="true"
-      >
-        <circle
-          cx="8" cy="8" r="5"
-          stroke="currentColor"
-          stroke-width="1"
-          stroke-linecap="round"
-          stroke-dasharray="23.6 7.9"
-        />
-      </svg>
+    const isCustomColor = typeof this.color === 'string' && this.color.startsWith('var(--');
+
+    const cls: Record<string, boolean> = {
+      loader: true,
+      [`loader--size-${this.size}`]: true,
+      [`loader--color-${this.color}`]: !!this.color && !isCustomColor && this.color !== 'inherit',
+      'loader--color-inherit': this.color === 'inherit',
+    };
+
+    const style = isCustomColor ? { color: this.color as string } : undefined;
+
+    const spinner = (
+      <span class={cls} style={style} aria-hidden="true">
+        <svg class="loader__svg" viewBox="0 0 16 16" fill="none" focusable="false">
+          <path
+            opacity="0.1"
+            d="M3 8C3 5.23858 5.23858 3 8 3V2C4.68629 2 2 4.68629 2 8C2 9.99456 2.97323 11.7618 4.47072 12.8528L5.05894 12.044C3.81102 11.1348 3 9.66213 3 8Z"
+            fill="currentColor"
+          />
+          <path
+            opacity="0.2"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M5.05892 12.0438C5.88425 12.6451 6.90069 12.9998 7.99998 12.9998C9.66211 12.9998 11.1348 12.1888 12.0439 10.9409L12.8527 11.5291C11.7618 13.0266 9.99454 13.9998 7.99998 13.9998C6.68083 13.9998 5.46111 13.5741 4.4707 12.8526L5.05892 12.0438Z"
+            fill="currentColor"
+          />
+          <path
+            opacity="0.4"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12.0435 10.9408C12.6447 10.1155 12.9995 9.09906 12.9995 7.99976C12.9995 7.45884 12.9136 6.93798 12.7547 6.45007L13.7057 6.14014C13.8964 6.72562 13.9995 7.35065 13.9995 7.99976C13.9995 9.31891 13.5738 10.5386 12.8523 11.529L12.0435 10.9408Z"
+            fill="currentColor"
+          />
+          <path
+            opacity="0.6"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12.7555 6.45152C12.4263 5.43958 11.7831 4.56933 10.9409 3.95577L11.5291 3.14697C12.5398 3.88325 13.3116 4.92755 13.7067 6.14188L12.7555 6.45152Z"
+            fill="currentColor"
+          />
+          <path
+            opacity="0.8"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M10.941 3.95583C10.5307 3.65688 10.0731 3.41886 9.58154 3.25509L9.89786 2.30615C10.4877 2.50267 11.0368 2.78829 11.5293 3.14704L10.941 3.95583Z"
+            fill="currentColor"
+          />
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M9.89788 2.30636C9.3014 2.10762 8.66327 2 8 2V3C8.55272 3 9.0845 3.08968 9.58157 3.2553L9.89788 2.30636Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
     );
 
-    if (!this.label) return svg;
+    if (!this.label) {
+      return (
+        <Host style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
+          {spinner}
+        </Host>
+      );
+    }
 
     return (
-      <span role="status" aria-live="polite" class="status">
-        {svg}
-        <span class="visually-hidden">{this.label}</span>
-      </span>
+      <Host style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
+        <span role="status" aria-live="polite" class="status">
+          {spinner}
+          <span class="visually-hidden">{this.label}</span>
+        </span>
+      </Host>
     );
   }
 }

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

@@ -1 +1 @@
-export type {} from './Loader';
+export type { LoaderSize, LoaderColor } from './Loader';

package/src/wc/components/Menu/Menu.tsx

@@ -357,9 +357,16 @@ export class Menu {
               aria-label={section.header}
             >
               {section.header && (
-                <div class="section-header ds-control--md" aria-hidden="true">
-                  <span class="text-body-small-emphasis section-label">{section.header}</span>
-                </div>
+                <ds-text
+                  class="section-header ds-control--md"
+                  as="span"
+                  variant="text-body-small"
+                  emphasis
+                  color="inherit"
+                  aria-hidden="true"
+                >
+                  {section.header}
+                </ds-text>
               )}
               {isMenuGradientPickerSection(section) ? (
                 <ds-shell-gradient-picker
@@ -398,11 +405,19 @@ export class Menu {
                     onFocus={() => { this.focusedIndex = idx; }}
                   >
                     <div class="menu-item__content ds-interaction-fill__content">
-                      <span class={item.isSelected ? 'text-body-medium-emphasis menu-item__label' : 'text-body-medium menu-item__label'}>
+                      <ds-text
+                        class="menu-item__label"
+                        as="span"
+                        variant="text-body-medium"
+                        emphasis={!!item.isSelected}
+                        color="inherit"
+                      >
                         {item.label}
-                      </span>
+                      </ds-text>
                       {item.subtext && (
-                        <span class="text-body-small menu-item__subtext">{item.subtext}</span>
+                        <ds-text class="menu-item__subtext" as="span" variant="text-body-small" color="inherit">
+                          {item.subtext}
+                        </ds-text>
                       )}
                     </div>
                     {item.showToggle && (

package/src/wc/components/Modal/Modal.tsx

@@ -179,11 +179,24 @@ export class Modal {
             style={{ width: `min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))` }}
           >
             <div class="modal-header">
-              <h2 id={this.titleId} class="text-title-small modal-title">{this.heading}</h2>
+              <ds-text
+                as="h2"
+                variant="text-title-small"
+                textId={this.titleId}
+              >
+                {this.heading}
+              </ds-text>
               {this.subtitle && (
-                <div id={this.subtitleId} class="modal-subtitle text-body-medium">
+                <ds-text
+                  class="modal-subtitle"
+                  as="div"
+                  variant="text-body-medium"
+                  color="secondary"
+                  wrap="balance"
+                  textId={this.subtitleId}
+                >
                   {this.subtitle}
-                </div>
+                </ds-text>
               )}
             </div>
             <div class="modal-body">

package/src/wc/components/Pagination/Pagination.tsx

@@ -62,9 +62,9 @@ export class Pagination {
 
           {pages.map((item, i) =>
             item === 'ellipsis' ? (
-              <span key={`e${i}`} class="ellipsis">
-                <span class="text-body-small" style={{ color: 'var(--color-foreground-tertiary)' }}>…</span>
-              </span>
+              <ds-text key={`e${i}`} class="ellipsis" as="span" variant="text-body-small" color="tertiary">
+                …
+              </ds-text>
             ) : (
               <button
                 key={item}
@@ -74,9 +74,9 @@ export class Pagination {
                 aria-current={item === this.page ? 'page' : undefined}
                 disabled={this.isInactive}
               >
-                <span class={item === this.page ? 'text-body-small-emphasis' : 'text-body-small'}>
+                <ds-text as="span" variant="text-body-small" emphasis={item === this.page}>
                   {item}
-                </span>
+                </ds-text>
               </button>
             )
           )}

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

@@ -515,24 +515,24 @@ 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 color="inherit">
+              {userInitial}
+            </ds-text>
           </span>
         </span>
       </button>
@@ -553,17 +553,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={isActive ? 'text-body-medium-emphasis' : 'text-body-medium'}
-            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"
@@ -666,13 +664,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 panel-nav__item-label-text"
+                      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,14 +290,22 @@ 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>
+                <ds-text
+                  class="panel-tools__title"
+                  as="span"
+                  variant="text-body-medium"
+                  emphasis
+                  color="inherit"
+                  wrap="nowrap"
+                >
+                  {headerLabel}
+                </ds-text>
               </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')}
                 >
@@ -307,7 +315,6 @@ export class PanelTools {
                   class={{
                     'panel-tools__view': true,
                     'panel-tools__view--active': this.isViewActive('messages'),
-                    'text-body-medium': true,
                   }}
                   hidden={!this.isViewActive('messages')}
                 >
@@ -317,7 +324,6 @@ export class PanelTools {
                   class={{
                     'panel-tools__view': true,
                     'panel-tools__view--active': this.isViewActive('stacks'),
-                    'text-body-medium': true,
                   }}
                   hidden={!this.isViewActive('stacks')}
                 >
@@ -327,7 +333,6 @@ export class PanelTools {
                   class={{
                     'panel-tools__view': true,
                     'panel-tools__view--active': this.isViewActive('activity'),
-                    'text-body-medium': true,
                   }}
                   hidden={!this.isViewActive('activity')}
                 >
@@ -337,7 +342,6 @@ export class PanelTools {
                   class={{
                     'panel-tools__view': true,
                     'panel-tools__view--active': this.isViewActive('agents'),
-                    'text-body-medium': true,
                   }}
                   hidden={!this.isViewActive('agents')}
                 >
@@ -347,7 +351,6 @@ export class PanelTools {
                   class={{
                     'panel-tools__view': true,
                     'panel-tools__view--active': this.isViewActive('help'),
-                    'text-body-medium': true,
                   }}
                   hidden={!this.isViewActive('help')}
                 >

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

@@ -118,7 +118,9 @@ 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>
+              <ds-text class="radio-label" as="span" variant="text-body-medium">
+                {opt.label}
+              </ds-text>
             </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,15 +247,15 @@ export class Select {
           aria-labelledby={this.ariaLabelledby}
           onClick={() => this.toggle({ focusVisible: false })}
         >
-          <span
-            class={{
-              'trigger__label': true,
-              [textVariant]: true,
-              'ds-interaction-fill__content': true,
-            }}
+          <ds-text
+            class="trigger__label ds-interaction-fill__content"
+            as="span"
+            variant={textVariant}
+            color="inherit"
+            lineTruncation={1}
           >
             {label}
-          </span>
+          </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/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"