@ds-mo/ui 2.15.0 → 3.0.0

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

@@ -290,11 +290,16 @@ export class PanelTools {
           >
             <div class="panel-tools__drawer-surface">
               <header class="panel-tools__header">
-                <span class="panel-tools__title">
-                  <ds-text as="span" variant="text-body-medium" emphasis color="inherit" wrap="nowrap">
-                    {headerLabel}
-                  </ds-text>
-                </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

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

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

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

@@ -247,11 +247,15 @@ export class Select {
           aria-labelledby={this.ariaLabelledby}
           onClick={() => this.toggle({ focusVisible: false })}
         >
-          <span class="trigger__label ds-interaction-fill__content">
-            <ds-text as="span" variant={textVariant} color="inherit" lineTruncation={1}>
-              {label}
-            </ds-text>
-          </span>
+          <ds-text
+            class="trigger__label ds-interaction-fill__content"
+            as="span"
+            variant={textVariant}
+            color="inherit"
+            lineTruncation={1}
+          >
+            {label}
+          </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/Table/Table.tsx

@@ -181,11 +181,15 @@ export class Table {
 
               {/* Empty state */}
               {isEmpty && (
-                <div class="empty-row" style={{ gridColumn: '1 / -1' }}>
-                  <ds-text as="p" variant="text-body-medium" color="secondary">
-                    {this.emptyMessage}
-                  </ds-text>
-                </div>
+                <ds-text
+                  class="empty-row"
+                  as="p"
+                  variant="text-body-medium"
+                  color="secondary"
+                  style={{ gridColumn: '1 / -1' }}
+                >
+                  {this.emptyMessage}
+                </ds-text>
               )}
 
               {/* Data rows */}
@@ -211,21 +215,20 @@ export class Table {
                     }}
                   >
                     {visibleCols.map(col => (
-                      <div
+                      <ds-text
                         key={col.id}
                         class={{
                           'cell': true,
                           'align-right': col.align === 'right',
                           'align-center': col.align === 'center',
                         }}
+                        as="span"
+                        variant="text-body-medium"
+                        lineTruncation={1}
                         role="cell"
                       >
-                        <span class="cell-value">
-                          <ds-text as="span" variant="text-body-medium">
-                            {String(getCellValue(col, row) ?? '')}
-                          </ds-text>
-                        </span>
-                      </div>
+                        {String(getCellValue(col, row) ?? '')}
+                      </ds-text>
                     ))}
                   </div>
                 );

package/src/wc/components/Tag/Tag.tsx

@@ -54,11 +54,9 @@ export class Tag {
         <span class="tag__icon-slot" data-icon-size={iconSize}>
           <slot name="icon" />
         </span>
-        <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>
       </Host>
     );
   }

package/src/wc/components/Text/Text.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop, h, Host } from '@stencil/core';
-import { textVariantClass } from './text-utils';
+import { textDisplayClass, textVariantClass } from './text-utils';
 import type {
   TextAlign,
   TextColor,
@@ -46,6 +46,7 @@ export class Text {
 
     const cls: Record<string, boolean> = {
       'ds-text': true,
+      [textDisplayClass(this.as)]: true,
       [textVariantClass(this.variant)]: true,
       'ds-text--emphasis': this.emphasis,
       'ds-text--regular': !this.emphasis,
@@ -87,8 +88,8 @@ export class Text {
     if (this.textId) extraProps['id'] = this.textId;
 
     return (
-      <Host style={{ display: 'contents' }}>
-        <Tag class={cls} style={style} {...extraProps}>
+      <Host class={cls} style={style}>
+        <Tag class="ds-text__element" {...extraProps}>
           <slot />
         </Tag>
       </Host>

package/src/wc/components/Text/text-utils.ts

@@ -1,6 +1,13 @@
-import type { TextVariant } from './text-types';
+import type { TextElement, TextVariant } from './text-types';
 
 /** `text-body-medium` → `ds-text--body-medium` */
 export function textVariantClass(variant: TextVariant): string {
   return `ds-text--${variant.replace(/^text-/, '')}`;
 }
+
+/** Inline semantics get a measurable inline box; paragraphs/headings get a block box. */
+export function textDisplayClass(element: TextElement): string {
+  return element === 'span' || element === 'label'
+    ? 'ds-text--inline-box'
+    : 'ds-text--block-box';
+}

package/src/wc/components/Tooltip/Tooltip.tsx

@@ -36,9 +36,11 @@ function createDsText(opts: {
   variant: TextVariant;
   emphasis?: boolean;
   color?: string;
+  className?: string;
   text: string;
 }): DsTextEl {
   const el = document.createElement('ds-text') as DsTextEl;
+  if (opts.className) el.className = opts.className;
   el.as = 'span';
   el.variant = opts.variant;
   el.emphasis = opts.emphasis ?? false;
@@ -222,6 +224,7 @@ export class Tooltip {
       activeTooltip.hideInstant();
       instant = true;
     }
+    // eslint-disable-next-line @typescript-eslint/no-this-alias -- module singleton tracks the active instance
     activeTooltip = this;
     this.skipEnterAnimation = instant;
     if (instant) {
@@ -303,10 +306,13 @@ export class Tooltip {
 
     appendShortcut('start');
 
-    const labelWrap = document.createElement('span');
-    labelWrap.className = `tooltip-label ${sc}`;
-    labelWrap.appendChild(createDsText({ variant: textVariant, text: this.label }));
-    inner.appendChild(labelWrap);
+    inner.appendChild(
+      createDsText({
+        className: `tooltip-label ${sc}`,
+        variant: textVariant,
+        text: this.label,
+      }),
+    );
 
     appendShortcut('end');
 

package/src/wc/components/TooltipDataViz/TooltipDataViz.tsx

@@ -8,8 +8,9 @@ export type TooltipDataVizSide = 'left' | 'right';
 export type TooltipDataVizAlign = 'top' | 'bottom';
 
 /**
- * Positioned value/label callout for chart hover interactions (donut slice, bar,
- * line point, ...). Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
+ * Positioned value/label callout for chart hover interactions (bar, line point, …).
+ * Donut charts skip this — legend sync already surfaces the hovered slice.
+ * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
  * charts hover-highlight data that lives inside an SVG, so the chart itself computes
  * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.
  *
@@ -120,16 +121,23 @@ export class TooltipDataViz {
         style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}
       >
         <div class="tooltip-data-viz__item ds-control--md">
-          <span class="tooltip-data-viz__label">
-            <ds-text as="span" variant="text-body-medium" color="var(--color-foreground-on-translucent-background-secondary)">
-              {this.label}
-            </ds-text>
-          </span>
-          <span class="tooltip-data-viz__value">
-            <ds-text as="span" variant="text-body-medium" emphasis color="var(--color-foreground-on-translucent-background-primary)">
-              {this.value}
-            </ds-text>
-          </span>
+          <ds-text
+            class="tooltip-data-viz__label"
+            as="span"
+            variant="text-body-medium"
+            color="var(--color-foreground-on-translucent-background-secondary)"
+          >
+            {this.label}
+          </ds-text>
+          <ds-text
+            class="tooltip-data-viz__value"
+            as="span"
+            variant="text-body-medium"
+            emphasis
+            color="var(--color-foreground-on-translucent-background-primary)"
+          >
+            {this.value}
+          </ds-text>
         </div>
       </Host>
     );

package/src/wc/components.d.ts

@@ -22,6 +22,7 @@ import { DividerInset, DividerLength, DividerOrientation, DividerSurface } from
 import { EmptyStateType } from "./components/EmptyState/EmptyState";
 import { IconColor, IconSize } from "./components/Icon/Icon";
 import { InputType } from "./components/Input/Input";
+import { LoaderColor, LoaderSize } from "./components/Loader/Loader";
 import { MenuItemData, MenuSection } from "./components/Menu/menu-types";
 import { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 import { ModalWidth } from "./components/Modal/Modal";
@@ -56,6 +57,7 @@ export { DividerInset, DividerLength, DividerOrientation, DividerSurface } from
 export { EmptyStateType } from "./components/EmptyState/EmptyState";
 export { IconColor, IconSize } from "./components/Icon/Icon";
 export { InputType } from "./components/Input/Input";
+export { LoaderColor, LoaderSize } from "./components/Loader/Loader";
 export { MenuItemData, MenuSection } from "./components/Menu/menu-types";
 export { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 export { ModalWidth } from "./components/Modal/Modal";
@@ -401,7 +403,7 @@ export namespace Components {
     }
     interface DsChartDonut {
         /**
-          * 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.
+          * 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. Slice hover dims peer slices and emits `dsSliceHover` for legend sync — no data-viz tooltip (the legend already surfaces label/value).
           * @default null
          */
         "activeLabel": string | null;
@@ -639,15 +641,19 @@ export namespace Components {
         "value": string;
     }
     interface DsLoader {
+        /**
+          * Semantic foreground color token, or a raw CSS var reference. Same tokens as `ds-icon`.
+         */
+        "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 conveys busy state via aria-busy.
          */
         "label": string | undefined;
         /**
-          * Render size — number (px) or TokoMo length (`var(--dimension-iconography-md)`, etc.).
-          * @default TOKEN_DEFAULTS.iconographyMd
+          * Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px.
+          * @default 'md'
          */
-        "size": number | string;
+        "size": LoaderSize;
     }
     interface DsMenu {
         /**
@@ -1156,8 +1162,9 @@ export namespace Components {
         "size": TooltipSize;
     }
     /**
-     * Positioned value/label callout for chart hover interactions (donut slice, bar,
-     * line point, ...). Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
+     * Positioned value/label callout for chart hover interactions (bar, line point, …).
+     * Donut charts skip this — legend sync already surfaces the hovered slice.
+     * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
      * charts hover-highlight data that lives inside an SVG, so the chart itself computes
      * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.
      * Renders `position: absolute` — place inside a `position: relative` chart wrapper,
@@ -1851,8 +1858,9 @@ declare global {
         new (): HTMLDsTooltipElement;
     };
     /**
-     * Positioned value/label callout for chart hover interactions (donut slice, bar,
-     * line point, ...). Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
+     * Positioned value/label callout for chart hover interactions (bar, line point, …).
+     * Donut charts skip this — legend sync already surfaces the hovered slice.
+     * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
      * charts hover-highlight data that lives inside an SVG, so the chart itself computes
      * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.
      * Renders `position: absolute` — place inside a `position: relative` chart wrapper,
@@ -2255,7 +2263,7 @@ declare namespace LocalJSX {
     }
     interface DsChartDonut {
         /**
-          * 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.
+          * 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. Slice hover dims peer slices and emits `dsSliceHover` for legend sync — no data-viz tooltip (the legend already surfaces label/value).
           * @default null
          */
         "activeLabel"?: string | null;
@@ -2511,15 +2519,19 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface DsLoader {
+        /**
+          * Semantic foreground color token, or a raw CSS var reference. Same tokens as `ds-icon`.
+         */
+        "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 conveys busy state via aria-busy.
          */
         "label"?: string | undefined;
         /**
-          * Render size — number (px) or TokoMo length (`var(--dimension-iconography-md)`, etc.).
-          * @default TOKEN_DEFAULTS.iconographyMd
+          * Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px.
+          * @default 'md'
          */
-        "size"?: number | string;
+        "size"?: LoaderSize;
     }
     interface DsMenu {
         /**
@@ -3072,8 +3084,9 @@ declare namespace LocalJSX {
         "size"?: TooltipSize;
     }
     /**
-     * Positioned value/label callout for chart hover interactions (donut slice, bar,
-     * line point, ...). Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
+     * Positioned value/label callout for chart hover interactions (bar, line point, …).
+     * Donut charts skip this — legend sync already surfaces the hovered slice.
+     * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
      * charts hover-highlight data that lives inside an SVG, so the chart itself computes
      * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.
      * Renders `position: absolute` — place inside a `position: relative` chart wrapper,
@@ -3264,7 +3277,8 @@ declare namespace LocalJSX {
         "ariaDescribedby": string | undefined;
     }
     interface DsLoaderAttributes {
-        "size": string;
+        "size": LoaderSize;
+        "color": LoaderColor | undefined;
         "label": string | undefined;
     }
     interface DsMenuAttributes {
@@ -3537,8 +3551,9 @@ declare module "@stencil/core" {
              */
             "ds-tooltip": LocalJSX.IntrinsicElements["ds-tooltip"] & JSXBase.HTMLAttributes<HTMLDsTooltipElement>;
             /**
-             * Positioned value/label callout for chart hover interactions (donut slice, bar,
-             * line point, ...). Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
+             * Positioned value/label callout for chart hover interactions (bar, line point, …).
+             * Donut charts skip this — legend sync already surfaces the hovered slice.
+             * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
              * charts hover-highlight data that lives inside an SVG, so the chart itself computes
              * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.
              * Renders `position: absolute` — place inside a `position: relative` chart wrapper,

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

@@ -3,8 +3,8 @@
  * (Tag, PanelNav items, BarNav tabs, Menu items, Chip, etc.).
  *
  * Apply `.ds-control--md|sm|xs` on the control (host or inner row). Then use the
- * `--ds-control-*` vars for height, padding, icon box, label inset, gap, radius,
- * and line-height (for wrappers around `ds-text`).
+ * `--ds-control-*` vars for height, padding, icon box, label inset, gap, and radius.
+ * Text line-height belongs exclusively to the selected `ds-text` variant.
  *
  * Both `:host(.ds-control--*)` and `.ds-control--*` are listed so Stencil scoped
  * components work whether the class is on the host (Tag) or an inner item (PanelNav).
@@ -20,8 +20,6 @@
   --ds-control-label-inset: var(--dimension-space-025);
   --ds-control-gap: var(--dimension-space-050);
   --ds-control-radius: var(--dimension-radius-025);
-  /* Matches text-body-medium line-height — wrappers around ds-text need this. */
-  --ds-control-line-height: var(--typography-lineheight-md);
 }
 
 :host(.ds-control--sm),
@@ -32,7 +30,6 @@
   --ds-control-label-inset: var(--dimension-space-025);
   --ds-control-gap: var(--dimension-space-025);
   --ds-control-radius: var(--dimension-radius-025);
-  --ds-control-line-height: var(--typography-lineheight-sm);
 }
 
 :host(.ds-control--xs),
@@ -43,5 +40,4 @@
   --ds-control-label-inset: var(--dimension-space-025);
   --ds-control-gap: var(--dimension-space-025);
   --ds-control-radius: var(--dimension-radius-025);
-  --ds-control-line-height: var(--typography-lineheight-xs);
 }

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

@@ -1,10 +1,10 @@
 import type { TextVariant } from '../components/Text/text-types';
 
-/** Control-density sizes shared by buttons, tags, chips, select, tooltip. */
-export type ControlDensitySize = 'md' | 'sm' | 'xs';
+/** Shared public control sizes. Typography is derived; it is not a separate density API. */
+export type ControlSize = 'md' | 'sm' | 'xs';
 
-/** Body/caption variant per control-density size (emphasis is separate). */
-export const CONTROL_TEXT_VARIANT: Record<ControlDensitySize, TextVariant> = {
+/** Complete text variant selected internally by each control size. */
+export const CONTROL_TEXT_VARIANT: Record<ControlSize, TextVariant> = {
   md: 'text-body-medium',
   sm: 'text-body-small',
   xs: 'text-caption',

package/src/wc/utils/index.ts

@@ -24,4 +24,4 @@ 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';
+export type { ControlSize } from './control-text';

package/src/wc/utils/interaction-fill.css

@@ -76,11 +76,11 @@
   box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);
 }
 
-/* Opt-in tertiary inset border (override color via `--ds-interaction-border-color`). */
+/* Opt-in secondary inset border (override color via `--ds-interaction-border-color`). */
 :host(.ds-interaction-fill--bordered),
 .ds-interaction-fill--bordered {
   --ds-interaction-border-width: var(--dimension-stroke-width-012);
-  --ds-interaction-border-color: var(--color-border-tertiary);
+  --ds-interaction-border-color: var(--color-border-secondary);
 }
 
 :host(.ds-interaction-fill--selected)::before,

package/src/wc/utils/typography.css

@@ -0,0 +1,146 @@
+/*
+ * Internal typography recipes shared by ds-text and native text surfaces that
+ * cannot render a custom element (for example, an <input> value).
+ *
+ * Each variant owns its font-size + line-height pairing. Never override one
+ * without the other from a consuming component.
+ */
+
+:host(.ds-text--display-medium),
+.ds-text--display-medium {
+  font-size: var(--typography-fontsize-3xl);
+  line-height: var(--typography-lineheight-3xl);
+}
+
+:host(.ds-text--display-small),
+.ds-text--display-small {
+  font-size: var(--typography-fontsize-2xl);
+  line-height: var(--typography-lineheight-2xl);
+}
+
+:host(.ds-text--title-large),
+.ds-text--title-large {
+  font-size: var(--typography-fontsize-xl);
+  line-height: var(--typography-lineheight-xl);
+}
+
+:host(.ds-text--title-medium),
+.ds-text--title-medium {
+  font-size: var(--typography-fontsize-lg);
+  line-height: var(--typography-lineheight-lg);
+}
+
+:host(.ds-text--title-small),
+.ds-text--title-small {
+  font-size: var(--typography-fontsize-md);
+  line-height: var(--typography-lineheight-md);
+}
+
+:host(.ds-text--body-large),
+.ds-text--body-large {
+  font-size: var(--typography-fontsize-lg);
+  line-height: var(--typography-lineheight-lg);
+}
+
+:host(.ds-text--body-medium),
+.ds-text--body-medium {
+  font-size: var(--typography-fontsize-md);
+  line-height: var(--typography-lineheight-md);
+}
+
+:host(.ds-text--body-small),
+.ds-text--body-small {
+  font-size: var(--typography-fontsize-sm);
+  line-height: var(--typography-lineheight-sm);
+}
+
+:host(.ds-text--caption),
+.ds-text--caption {
+  font-size: var(--typography-fontsize-xs);
+  line-height: var(--typography-lineheight-xs);
+  text-transform: uppercase;
+}
+
+:host(.ds-text--display-medium.ds-text--emphasis),
+:host(.ds-text--display-small.ds-text--emphasis),
+.ds-text--display-medium.ds-text--emphasis,
+.ds-text--display-small.ds-text--emphasis {
+  font-weight: var(--typography-weight-bold);
+  letter-spacing: var(--typography-letterspacing-negative-double);
+}
+
+:host(.ds-text--display-medium.ds-text--regular),
+:host(.ds-text--display-small.ds-text--regular),
+.ds-text--display-medium.ds-text--regular,
+.ds-text--display-small.ds-text--regular {
+  font-weight: var(--typography-weight-regular);
+  letter-spacing: var(--typography-letterspacing-negative);
+}
+
+:host(.ds-text--title-large.ds-text--emphasis),
+.ds-text--title-large.ds-text--emphasis {
+  font-weight: var(--typography-weight-semibold);
+  letter-spacing: var(--typography-letterspacing-negative-double);
+}
+
+:host(.ds-text--title-large.ds-text--regular),
+.ds-text--title-large.ds-text--regular {
+  font-weight: var(--typography-weight-regular);
+  letter-spacing: var(--typography-letterspacing-negative);
+}
+
+:host(.ds-text--title-medium.ds-text--emphasis),
+:host(.ds-text--title-small.ds-text--emphasis),
+.ds-text--title-medium.ds-text--emphasis,
+.ds-text--title-small.ds-text--emphasis {
+  font-weight: var(--typography-weight-semibold);
+  letter-spacing: var(--typography-letterspacing-negative);
+}
+
+:host(.ds-text--title-medium.ds-text--regular),
+:host(.ds-text--title-small.ds-text--regular),
+.ds-text--title-medium.ds-text--regular,
+.ds-text--title-small.ds-text--regular {
+  font-weight: var(--typography-weight-regular);
+  letter-spacing: var(--typography-letterspacing-negative-half);
+}
+
+:host(.ds-text--body-large.ds-text--emphasis),
+:host(.ds-text--body-medium.ds-text--emphasis),
+.ds-text--body-large.ds-text--emphasis,
+.ds-text--body-medium.ds-text--emphasis {
+  font-weight: var(--typography-weight-medium);
+  letter-spacing: var(--typography-letterspacing-negative);
+}
+
+:host(.ds-text--body-large.ds-text--regular),
+:host(.ds-text--body-medium.ds-text--regular),
+.ds-text--body-large.ds-text--regular,
+.ds-text--body-medium.ds-text--regular {
+  font-weight: var(--typography-weight-regular);
+  letter-spacing: var(--typography-letterspacing-negative-half);
+}
+
+:host(.ds-text--body-small.ds-text--emphasis),
+.ds-text--body-small.ds-text--emphasis {
+  font-weight: var(--typography-weight-medium);
+  letter-spacing: var(--typography-letterspacing-negative-half);
+}
+
+:host(.ds-text--body-small.ds-text--regular),
+.ds-text--body-small.ds-text--regular {
+  font-weight: var(--typography-weight-regular);
+  letter-spacing: var(--typography-letterspacing-none);
+}
+
+:host(.ds-text--caption.ds-text--emphasis),
+.ds-text--caption.ds-text--emphasis {
+  font-weight: var(--typography-weight-semibold);
+  letter-spacing: var(--typography-letterspacing-positive);
+}
+
+:host(.ds-text--caption.ds-text--regular),
+.ds-text--caption.ds-text--regular {
+  font-weight: var(--typography-weight-medium);
+  letter-spacing: var(--typography-letterspacing-positive);
+}