@ds-mo/ui 2.13.1 → 2.15.0

package/dist/types/components/Text/text-utils.d.ts

@@ -0,0 +1,4 @@
+import type { TextVariant } from './text-types';
+/** `text-body-medium` → `ds-text--body-medium` */
+export declare function textVariantClass(variant: TextVariant): string;
+//# sourceMappingURL=text-utils.d.ts.map

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -1,3 +1,4 @@
+import '../Text/Text';
 export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
 export type TooltipAlign = 'start' | 'center' | 'end';
 export type TooltipSize = 'md' | 'sm' | 'xs';

package/dist/types/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 {
@@ -793,7 +793,7 @@ export namespace Components {
          */
         "activateTool": (id: PanelToolsToolId) => Promise<void>;
         /**
-          * Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`.
+          * Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`.
           * @default ''
          */
         "activeTool": PanelToolsToolId | '';
@@ -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'
          */
@@ -2677,7 +2686,7 @@ declare namespace LocalJSX {
     }
     interface DsPanelTools {
         /**
-          * Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`.
+          * Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`.
           * @default ''
          */
         "activeTool"?: PanelToolsToolId | '';
@@ -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/dist/types/utils/control-text.d.ts

@@ -0,0 +1,6 @@
+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 declare const CONTROL_TEXT_VARIANT: Record<ControlDensitySize, TextVariant>;
+//# sourceMappingURL=control-text.d.ts.map

package/dist/types/utils/index.d.ts

@@ -9,4 +9,6 @@ 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';
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "2.13.1",
+  "version": "2.15.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -69,7 +69,7 @@
     "pretest": "node scripts/generate-icon-catalog.mjs",
     "build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/write-build-stamp.mjs && node scripts/build-lib-exports.mjs",
     "verify:pack": "node scripts/verify-npm-pack.mjs && node scripts/verify-nav-import.mjs",
-    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/panel-tools.test.ts tests/shell-shortcuts.test.ts tests/shell-gradient-presets.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/shell-chrome-metrics.test.ts tests/shell-chrome-layer.test.ts tests/chrome-transition.test.ts tests/bar-nav-overflow-hysteresis.test.ts tests/badge-gradient-ring.test.ts tests/scroll-edge-fade.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.test.ts tests/menu-placement.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts tests/icon-cache.test.ts tests/icon-svg.test.ts",
+    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/panel-tools.test.ts tests/text.test.ts tests/shell-shortcuts.test.ts tests/shell-gradient-presets.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/shell-chrome-metrics.test.ts tests/shell-chrome-layer.test.ts tests/chrome-transition.test.ts tests/bar-nav-overflow-hysteresis.test.ts tests/badge-gradient-ring.test.ts tests/scroll-edge-fade.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.test.ts tests/menu-placement.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts tests/icon-cache.test.ts tests/icon-svg.test.ts",
     "test:e2e": "npm run build && playwright test",
     "test:e2e:install": "playwright install chromium",
     "build:docs": "stencil build --docs",

package/src/angular/proxies.ts

@@ -1058,14 +1058,14 @@ export declare interface DsTag extends Components.DsTag {}
 
 
 @ProxyCmp({
-  inputs: ['align', 'as', 'color', 'decoration', 'fontFeature', 'for', 'italic', 'lineTruncation', 'variant', 'wrap']
+  inputs: ['align', 'as', 'color', 'decoration', 'emphasis', 'fontFeature', 'for', 'italic', 'lineTruncation', 'textId', 'variant', 'wrap']
 })
 @Component({
   selector: 'ds-text',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['align', 'as', 'color', 'decoration', 'fontFeature', 'for', 'italic', 'lineTruncation', 'variant', 'wrap'],
+  inputs: ['align', 'as', 'color', 'decoration', 'emphasis', 'fontFeature', 'for', 'italic', 'lineTruncation', 'textId', 'variant', 'wrap'],
   standalone: false
 })
 export class DsText {

package/src/wc/components/Badge/Badge.tsx

@@ -166,14 +166,12 @@ export class Badge {
         aria-label={ariaLabel}
         style={this.ringHostStyle(ring)}
       >
-        <span
-          class={{
-            'badge__mark': true,
-            'text-caption-emphasis': !isDot,
-          }}
-          aria-hidden="true"
-        >
-          {!isDot && display}
+        <span class="badge__mark" aria-hidden="true">
+          {!isDot && (
+            <ds-text as="span" variant="text-caption" emphasis color="inherit">
+              {display}
+            </ds-text>
+          )}
         </span>
       </Host>
     );

package/src/wc/components/Banner/Banner.tsx

@@ -121,7 +121,11 @@ export class Banner {
             </div>
           )}
           <div class="banner-body">
-            <span class="text-body-medium banner-message">{this.message}</span>
+            <span class="banner-message">
+              <ds-text as="span" variant="text-body-medium" color="inherit">
+                {this.message}
+              </ds-text>
+            </span>
             {this.showDismiss && (
               <button
                 type="button"

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

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

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

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
-import { controlWidthClass, type ControlWidth } from '../../utils/control-width';
+import { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';
 
 export type ButtonFilledIntent =
   | 'neutral'
@@ -20,13 +20,6 @@ export type ButtonFilledSize = 'md' | 'sm' | 'xs';
 
 export type ButtonFilledWidth = ControlWidth;
 
-/** Emphasis text per control-density size (buttons use emphasis, unlike Tag). */
-const TEXT_VARIANT: Record<ButtonFilledSize, string> = {
-  md: 'text-body-medium-emphasis',
-  sm: 'text-body-small-emphasis',
-  xs: 'text-caption-emphasis',
-};
-
 /**
  * `ds-icon` size prop matching control-density icon metrics
  * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).
@@ -110,7 +103,7 @@ export class ButtonFilled {
   }
 
   render() {
-    const textVariant = TEXT_VARIANT[this.size];
+    const textVariant = CONTROL_TEXT_VARIANT[this.size];
     const iconSize = ICON_SIZE[this.size];
 
     const cls: Record<string, boolean> = {
@@ -161,8 +154,10 @@ export class ButtonFilled {
             </span>
           )}
           {this.showLabel && (
-            <span class={{ 'button-filled__label': true, [textVariant]: true, 'ds-interaction-fill__content': true }}>
-              {this.label}
+            <span class="button-filled__label ds-interaction-fill__content">
+              <ds-text as="span" variant={textVariant} emphasis color="inherit">
+                {this.label}
+              </ds-text>
             </span>
           )}
         </button>

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

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
-import { controlWidthClass, type ControlWidth } from '../../utils/control-width';
+import { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';
 
 export type ButtonUnfilledOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';
 
@@ -11,13 +11,6 @@ export type ButtonUnfilledSize = 'md' | 'sm' | 'xs';
 
 export type ButtonUnfilledWidth = ControlWidth;
 
-/** Emphasis text per control-density size (buttons use emphasis, unlike Tag). */
-const TEXT_VARIANT: Record<ButtonUnfilledSize, string> = {
-  md: 'text-body-medium-emphasis',
-  sm: 'text-body-small-emphasis',
-  xs: 'text-caption-emphasis',
-};
-
 /**
  * `ds-icon` size prop matching control-density icon metrics
  * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).
@@ -148,7 +141,7 @@ export class ButtonUnfilled {
   render() {
     const bg = this.background;
     const contrast = this.effectiveContrast();
-    const textVariant = TEXT_VARIANT[this.size];
+    const textVariant = CONTROL_TEXT_VARIANT[this.size];
     const iconSize = ICON_SIZE[this.size];
 
     const cls: Record<string, boolean> = {
@@ -219,8 +212,10 @@ export class ButtonUnfilled {
             </span>
           )}
           {this.showLabel && (
-            <span class={{ 'button-unfilled__label': true, [textVariant]: true, 'ds-interaction-fill__content': true }}>
-              {this.label}
+            <span class="button-unfilled__label ds-interaction-fill__content">
+              <ds-text as="span" variant={textVariant} emphasis color="inherit">
+                {this.label}
+              </ds-text>
             </span>
           )}
         </button>

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

@@ -57,14 +57,16 @@ export class Card {
       >
         <header class="card__header">
           <div class="card__title-wrap">
-            <ds-text
-              class="card__title"
-              variant="text-title-small"
-              color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}
-              as="h2"
-            >
-              {this.heading}
-            </ds-text>
+            <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>
           <div class="card__actions">
             <slot name="actions" />

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

@@ -51,8 +51,10 @@ export class Checkbox {
             </span>
           )}
         </span>
-        <span id={this.labelId} class="text-body-medium checkbox__label">
-          {this.label}
+        <span class="checkbox__label">
+          <ds-text as="span" variant="text-body-medium" textId={this.labelId}>
+            {this.label}
+          </ds-text>
         </span>
       </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,8 +82,10 @@ export class Chip {
         style={maxWidthStyle}
         aria-disabled={this.isInactive || undefined}
       >
-        <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>
         {this.removable && (
           <button

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

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

@@ -358,7 +358,11 @@ export class Menu {
             >
               {section.header && (
                 <div class="section-header ds-control--md" aria-hidden="true">
-                  <span class="text-body-small-emphasis section-label">{section.header}</span>
+                  <span class="section-label">
+                    <ds-text as="span" variant="text-body-small" emphasis color="inherit">
+                      {section.header}
+                    </ds-text>
+                  </span>
                 </div>
               )}
               {isMenuGradientPickerSection(section) ? (
@@ -398,11 +402,17 @@ 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'}>
-                        {item.label}
+                      <span class="menu-item__label">
+                        <ds-text as="span" variant="text-body-medium" emphasis={!!item.isSelected} color="inherit">
+                          {item.label}
+                        </ds-text>
                       </span>
                       {item.subtext && (
-                        <span class="text-body-small menu-item__subtext">{item.subtext}</span>
+                        <span class="menu-item__subtext">
+                          <ds-text as="span" variant="text-body-small" color="inherit">
+                            {item.subtext}
+                          </ds-text>
+                        </span>
                       )}
                     </div>
                     {item.showToggle && (

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

@@ -179,10 +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">
-                  {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>
               )}
             </div>

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

@@ -63,7 +63,7 @@ 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>
+                <ds-text as="span" variant="text-body-small" color="tertiary">…</ds-text>
               </span>
             ) : (
               <button
@@ -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

@@ -517,7 +517,7 @@ export class PanelNav {
       >
         <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">
+            <ds-text as="span" variant="text-body-medium" emphasis color="inherit">
               {userName}
             </ds-text>
           </span>
@@ -529,7 +529,7 @@ export class PanelNav {
           <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">
+              <ds-text as="span" variant="text-caption" emphasis color="inherit">
                 {userInitial}
               </ds-text>
             </span>
@@ -557,7 +557,8 @@ export class PanelNav {
         <span class="panel-nav__item-label-text">
           <ds-text
             as="span"
-            variant={isActive ? 'text-body-medium-emphasis' : 'text-body-medium'}
+            variant="text-body-medium"
+            emphasis={isActive}
             color="inherit"
           >
             {item.label}
@@ -668,7 +669,7 @@ export class PanelNav {
                   {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">
+                        <ds-text as="span" variant="text-caption" emphasis color="inherit">
                           {group.label}
                         </ds-text>
                       </span>