@ds-mo/ui 2.15.0 → 3.0.0

package/src/wc/components/BarNav/BarNav.tsx

@@ -683,11 +683,16 @@ export class BarNav {
             )}
 
             {!hasTabs && this.heading && (
-              <span class="bar-nav__heading">
-                <ds-text as="span" variant="text-body-medium" emphasis color="inherit" wrap="nowrap">
-                  {this.heading}
-                </ds-text>
-              </span>
+              <ds-text
+                class="bar-nav__heading"
+                as="span"
+                variant="text-body-medium"
+                emphasis
+                color="inherit"
+                wrap="nowrap"
+              >
+                {this.heading}
+              </ds-text>
             )}
 
             {hasTabs && this.hasOverflowTabs && (

package/src/wc/components/ButtonFilled/ButtonFilled.tsx

@@ -154,11 +154,15 @@ export class ButtonFilled {
             </span>
           )}
           {this.showLabel && (
-            <span class="button-filled__label ds-interaction-fill__content">
-              <ds-text as="span" variant={textVariant} emphasis color="inherit">
-                {this.label}
-              </ds-text>
-            </span>
+            <ds-text
+              class="button-filled__label ds-interaction-fill__content"
+              as="span"
+              variant={textVariant}
+              emphasis
+              color="inherit"
+            >
+              {this.label}
+            </ds-text>
           )}
         </button>
       </Host>

package/src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx

@@ -212,11 +212,15 @@ export class ButtonUnfilled {
             </span>
           )}
           {this.showLabel && (
-            <span class="button-unfilled__label ds-interaction-fill__content">
-              <ds-text as="span" variant={textVariant} emphasis color="inherit">
-                {this.label}
-              </ds-text>
-            </span>
+            <ds-text
+              class="button-unfilled__label ds-interaction-fill__content"
+              as="span"
+              variant={textVariant}
+              emphasis
+              color="inherit"
+            >
+              {this.label}
+            </ds-text>
           )}
         </button>
       </Host>

package/src/wc/components/Card/Card.tsx

@@ -56,18 +56,15 @@ export class Card {
         }}
       >
         <header class="card__header">
-          <div class="card__title-wrap">
-            <span class="card__title">
-              <ds-text
-                variant="text-title-small"
-                emphasis
-                color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}
-                as="h2"
-              >
-                {this.heading}
-              </ds-text>
-            </span>
-          </div>
+          <ds-text
+            class="card__title-wrap card__title"
+            variant="text-title-small"
+            emphasis
+            color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}
+            as="h2"
+          >
+            {this.heading}
+          </ds-text>
           <div class="card__actions">
             <slot name="actions" />
           </div>

package/src/wc/components/ChartDonut/ChartDonut.tsx

@@ -12,12 +12,6 @@ const CENTER_TEXT_SAFE_WIDTH_RATIO = 0.82;
 /** Fallback when filling before the first ResizeObserver measurement (matches fill min). */
 const FILL_FALLBACK_PX = 128;
 
-type DonutTooltipState = {
-  datum: ChartDatum;
-  x: number;
-  y: number;
-};
-
 @Component({
   tag: 'ds-chart-donut',
   styleUrl: 'ChartDonut.css',
@@ -49,14 +43,12 @@ export class ChartDonut {
    * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling
    * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.
    * Falls back to this component's own pointer/focus hover when unset.
-   * External sync dims slices only — the data-viz tooltip is reserved for this
-   * component's own pointer/keyboard interaction.
+   * Slice hover dims peer slices and emits `dsSliceHover` for legend sync — no data-viz
+   * tooltip (the legend already surfaces label/value).
    */
   @Prop() activeLabel: string | null = null;
 
   @State() private hoveredLabel: string | null = null;
-  /** Own-hover tooltip (cursor-following). Cleared on leave; not driven by `activeLabel`. */
-  @State() private tooltip: DonutTooltipState | null = null;
   /** Center text, truncated with an ellipsis if it doesn't fit inside the inner circle. */
   @State() private displayedValueText: string = '';
   @State() private displayedCaptionText: string = '';
@@ -68,7 +60,6 @@ export class ChartDonut {
 
   private valueTextEl?: SVGTextElement;
   private captionTextEl?: SVGTextElement;
-  private wrapperEl?: HTMLDivElement;
   private resizeObserver: ResizeObserver | null = null;
 
   private get isFillMode(): boolean {
@@ -143,29 +134,9 @@ export class ChartDonut {
     this.resizeObserver = null;
   }
 
-  private handleHover(datum: ChartDatum | null, event?: MouseEvent) {
+  private handleHover(datum: ChartDatum | null) {
     this.hoveredLabel = datum?.label ?? null;
     this.dsSliceHover.emit(datum);
-    if (!datum) {
-      this.tooltip = null;
-      return;
-    }
-    this.updateTooltip(datum, event);
-  }
-
-  private handleSliceMove(datum: ChartDatum, event: MouseEvent) {
-    if (this.hoveredLabel !== datum.label) return;
-    this.updateTooltip(datum, event);
-  }
-
-  private updateTooltip(datum: ChartDatum, event?: MouseEvent) {
-    const wrapper = this.wrapperEl;
-    if (!wrapper) return;
-    const size = this.resolvedSize;
-    const rect = wrapper.getBoundingClientRect();
-    const x = event ? event.clientX - rect.left : size / 2;
-    const y = event ? event.clientY - rect.top : size / 2;
-    this.tooltip = { datum, x, y };
   }
 
   componentDidRender() {
@@ -238,7 +209,6 @@ export class ChartDonut {
     // Show the full text before the post-render truncation pass has measured it (avoids a blank first paint).
     const fullValueText = this.centerValue ?? formatCompactNumber(total);
     const fullCaptionText = this.centerCaption ?? '';
-    const tip = this.tooltip;
     const fill = this.isFillMode;
 
     return (
@@ -253,9 +223,6 @@ export class ChartDonut {
         <div
           class="chart-donut__wrapper"
           style={!fill ? { width: `${size}px`, height: `${size}px` } : undefined}
-          ref={el => {
-            this.wrapperEl = (el as HTMLDivElement) ?? undefined;
-          }}
         >
           <svg
             class="chart-donut__svg"
@@ -279,8 +246,7 @@ export class ChartDonut {
                       tabindex={0}
                       role="img"
                       aria-label={`${datum.label}: ${datum.value}`}
-                      onMouseEnter={(e: MouseEvent) => this.handleHover(datum, e)}
-                      onMouseMove={(e: MouseEvent) => this.handleSliceMove(datum, e)}
+                      onMouseEnter={() => this.handleHover(datum)}
                       onMouseLeave={() => this.handleHover(null)}
                       onFocus={() => this.handleHover(datum)}
                       onBlur={() => this.handleHover(null)}
@@ -316,15 +282,6 @@ export class ChartDonut {
               </text>
             )}
           </svg>
-          {tip && (
-            <ds-tooltip-data-viz
-              key={tip.datum.label}
-              label={tip.datum.label}
-              value={formatCompactNumber(tip.datum.value)}
-              x={tip.x}
-              y={tip.y}
-            />
-          )}
         </div>
       </Host>
     );

package/src/wc/components/ChartLegend/ChartLegend.tsx

@@ -87,24 +87,32 @@ export class ChartLegend {
                   <span class="chart-legend__swatch-box">
                     <span class="chart-legend__swatch" style={{ backgroundColor: item.color ?? categoryColor(i) }} />
                   </span>
-                  <span class="chart-legend__label" title={item.label}>
-                    <ds-text as="span" variant="text-body-medium" color="secondary">
-                      {item.label}
-                    </ds-text>
-                  </span>
+                  <ds-text
+                    class="chart-legend__label"
+                    as="span"
+                    variant="text-body-medium"
+                    color="secondary"
+                    lineTruncation={1}
+                    title={item.label}
+                  >
+                    {item.label}
+                  </ds-text>
                   {item.value != null && (
-                    <span class="chart-legend__value" title={String(item.value)}>
-                      <ds-text as="span" variant="text-body-medium" color="primary">
-                        {formatCompactNumber(item.value)}
-                      </ds-text>
-                    </span>
+                    <ds-text
+                      class="chart-legend__value"
+                      as="span"
+                      variant="text-body-medium"
+                      color="primary"
+                      lineTruncation={1}
+                      title={String(item.value)}
+                    >
+                      {formatCompactNumber(item.value)}
+                    </ds-text>
                   )}
                   {item.value != null && this.showPercentage && (
-                    <span class="chart-legend__percentage">
-                      <ds-text as="span" variant="text-body-medium" color="primary">
-                        {(total ? (item.value / total) * 100 : 0).toFixed(1)}%
-                      </ds-text>
-                    </span>
+                    <ds-text class="chart-legend__percentage" as="span" variant="text-body-medium" color="primary">
+                      {(total ? (item.value / total) * 100 : 0).toFixed(1)}%
+                    </ds-text>
                   )}
                 </RowTag>
               </li>

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

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

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

@@ -82,11 +82,9 @@ export class Chip {
         style={maxWidthStyle}
         aria-disabled={this.isInactive || undefined}
       >
-        <span class="tag__label">
-          <ds-text as="span" variant={textVariant} color="inherit">
-            {this.label}
-          </ds-text>
-        </span>
+        <ds-text class="tag__label" as="span" variant={textVariant} color="inherit">
+          {this.label}
+        </ds-text>
         {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">
-          <ds-text as="p" variant="text-body-medium" color="secondary">
-            {this.message || DEFAULT_MESSAGES[this.type]}
-          </ds-text>
-        </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/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,13 +357,16 @@ export class Menu {
               aria-label={section.header}
             >
               {section.header && (
-                <div class="section-header ds-control--md" aria-hidden="true">
-                  <span class="section-label">
-                    <ds-text as="span" variant="text-body-small" emphasis color="inherit">
-                      {section.header}
-                    </ds-text>
-                  </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
@@ -402,17 +405,19 @@ export class Menu {
                     onFocus={() => { this.focusedIndex = idx; }}
                   >
                     <div class="menu-item__content ds-interaction-fill__content">
-                      <span class="menu-item__label">
-                        <ds-text as="span" variant="text-body-medium" emphasis={!!item.isSelected} color="inherit">
-                          {item.label}
-                        </ds-text>
-                      </span>
+                      <ds-text
+                        class="menu-item__label"
+                        as="span"
+                        variant="text-body-medium"
+                        emphasis={!!item.isSelected}
+                        color="inherit"
+                      >
+                        {item.label}
+                      </ds-text>
                       {item.subtext && (
-                        <span class="menu-item__subtext">
-                          <ds-text as="span" variant="text-body-small" color="inherit">
-                            {item.subtext}
-                          </ds-text>
-                        </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

@@ -187,17 +187,16 @@ export class Modal {
                 {this.heading}
               </ds-text>
               {this.subtitle && (
-                <div class="modal-subtitle">
-                  <ds-text
-                    as="div"
-                    variant="text-body-medium"
-                    color="secondary"
-                    wrap="balance"
-                    textId={this.subtitleId}
-                  >
-                    {this.subtitle}
-                  </ds-text>
-                </div>
+                <ds-text
+                  class="modal-subtitle"
+                  as="div"
+                  variant="text-body-medium"
+                  color="secondary"
+                  wrap="balance"
+                  textId={this.subtitleId}
+                >
+                  {this.subtitle}
+                </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">
-                <ds-text as="span" variant="text-body-small" color="tertiary">…</ds-text>
-              </span>
+              <ds-text key={`e${i}`} class="ellipsis" as="span" variant="text-body-small" color="tertiary">
+                …
+              </ds-text>
             ) : (
               <button
                 key={item}

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,18 +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="text-body-medium"
-            emphasis={isActive}
-            color="inherit"
-          >
-            {item.label}
-          </ds-text>
-        </span>
-      </span>,
+      <ds-text
+        class="panel-nav__item-label panel-nav__item-label-text"
+        as="span"
+        variant="text-body-medium"
+        emphasis={isActive}
+        color="inherit"
+      >
+        {item.label}
+      </ds-text>,
       item.dot && (
         <ds-badge
           class="panel-nav__item-dot"
@@ -667,13 +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>