@ds-mo/ui 2.11.1 → 2.12.0

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

@@ -15,7 +15,7 @@ export class Slider {
   @Prop() max: number = 100;
   @Prop() step: number = 1;
   @Prop() label!: string;
-  @Prop() inactive: boolean = false;
+  @Prop() isInactive: boolean = false;
   @Prop() valueText: string | undefined;
   /** Associates with an external <label>. Defaults to an auto-generated ID. */
   @Prop() inputId: string | undefined;
@@ -42,7 +42,11 @@ export class Slider {
           <span class="text-body-small-emphasis">{this.value}</span>
         </div>
         <div
-          class={{ track: true, 'track--inactive': this.inactive, 'track--at-min': pct === 0 }}
+          class={{
+            track: true,
+            'ds-control-inactive': this.isInactive,
+            'track--at-min': pct === 0,
+          }}
           style={{ '--slider-pct': String(pct) } as Record<string, string>}
         >
           <div class="track-inner">
@@ -56,7 +60,7 @@ export class Slider {
             max={this.max}
             step={this.step}
             value={this.value}
-            disabled={this.inactive}
+            disabled={this.isInactive}
             class="range-input"
             aria-valuetext={this.valueText}
             onInput={this.handleInput}

package/src/wc/components/TabGroup/TabGroup.tsx

@@ -64,7 +64,7 @@ export class TabGroup {
   }
 
   /**
-   * Find the next non-disabled tab index relative to `from`, stepping by `step`.
+   * Find the next non-inactive tab index relative to `from`, stepping by `step`.
    * Returns `from` unchanged if no other enabled tab exists.
    */
   private findEnabled(from: number, step: 1 | -1): number {
@@ -72,7 +72,7 @@ export class TabGroup {
     const len = tabs.length;
     for (let n = 0; n < len; n++) {
       const i = (from + step * (n + 1) + len * (n + 1)) % len;
-      if (!tabs[i]?.disabled) return i;
+      if (!tabs[i]?.isInactive) return i;
     }
     return from;
   }
@@ -102,10 +102,10 @@ export class TabGroup {
     }
 
     if (e.key === 'Home') {
-      const first = tabs.findIndex(t => !t.disabled);
+      const first = tabs.findIndex(t => !t.isInactive);
       nextIdx = first === -1 ? null : first;
     } else if (e.key === 'End') {
-      const lastEnabled = [...tabs].reverse().findIndex(t => !t.disabled);
+      const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);
       nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;
     }
 
@@ -162,14 +162,20 @@ export class TabGroup {
                   tab: true,
                   'tab--selected': isSelected,
                   'ds-focus-ring-inset': true,
+                  'ds-interaction-fill': !tab.isInactive,
+                  'ds-interaction-fill--on-medium': bgClass === 'on-medium',
+                  'ds-interaction-fill--on-bold': bgClass === 'on-bold',
+                  'ds-interaction-fill--on-strong': bgClass === 'on-strong',
+                  'ds-interaction-fill--on-always-dark': bgClass === 'on-always-dark',
+                  'ds-control-inactive': !!tab.isInactive,
                   [bgClass]: !!bgClass,
                 }}
                 aria-selected={isSelected}
-                aria-disabled={tab.disabled || undefined}
+                aria-disabled={tab.isInactive || undefined}
                 aria-controls={tab.panelId ?? undefined}
-                disabled={tab.disabled}
+                disabled={tab.isInactive}
                 tabIndex={isSelected ? 0 : -1}
-                onClick={() => !tab.disabled && this.selectTab(tab.id)}
+                onClick={() => !tab.isInactive && this.selectTab(tab.id)}
               >
                 <span class={{
                   tab__label: true,

package/src/wc/components/TabGroup/tab-item-utils.ts

@@ -5,7 +5,8 @@ export interface TabItemDivider {
 export interface TabItemTab {
   id: string;
   label: string;
-  disabled?: boolean;
+  /** Disables the tab (same meaning as control `isInactive`). */
+  isInactive?: boolean;
   /** id of the tabpanel this tab controls */
   panelId?: string;
   /** Show a notification dot (brand) on the tab — no count, matching panel-nav. */

package/src/wc/components/TabGroupNav/TabGroupNav.tsx

@@ -91,23 +91,23 @@ export class TabGroupNav {
   @Method()
   async focusLastTab() {
     const tabs = this.selectableTabs;
-    const last = [...tabs].reverse().find(tab => !tab.disabled);
+    const last = [...tabs].reverse().find(tab => !tab.isInactive);
     if (last) await this.focusTab(last.id);
   }
 
   @Method()
   async focusFirstTab() {
-    const first = this.selectableTabs.find(tab => !tab.disabled);
+    const first = this.selectableTabs.find(tab => !tab.isInactive);
     if (first) await this.focusTab(first.id);
   }
 
   private syncFocusedTabId(preferred: string) {
     const tabs = this.selectableTabs;
-    if (tabs.some(tab => tab.id === preferred && !tab.disabled)) {
+    if (tabs.some(tab => tab.id === preferred && !tab.isInactive)) {
       this.focusedTabId = preferred;
       return;
     }
-    const first = tabs.find(tab => !tab.disabled);
+    const first = tabs.find(tab => !tab.isInactive);
     this.focusedTabId = first?.id ?? '';
   }
 
@@ -127,13 +127,13 @@ export class TabGroupNav {
   private findEnabledLinear(from: number, step: 1 | -1): number | null {
     const tabs = this.selectableTabs;
     for (let i = from + step; i >= 0 && i < tabs.length; i += step) {
-      if (!tabs[i]?.disabled) return i;
+      if (!tabs[i]?.isInactive) return i;
     }
     return null;
   }
 
   /**
-   * Find the next non-disabled tab index relative to `from`, stepping by `step`.
+   * Find the next non-inactive tab index relative to `from`, stepping by `step`.
    * Returns `from` unchanged if no other enabled tab exists.
    */
   private findEnabled(from: number, step: 1 | -1): number {
@@ -141,7 +141,7 @@ export class TabGroupNav {
     const len = tabs.length;
     for (let n = 0; n < len; n++) {
       const i = (from + step * (n + 1) + len * (n + 1)) % len;
-      if (!tabs[i]?.disabled) return i;
+      if (!tabs[i]?.isInactive) return i;
     }
     return from;
   }
@@ -156,7 +156,7 @@ export class TabGroupNav {
   private activateFocusedTab(e: KeyboardEvent) {
     if (e.key !== 'Enter' && e.key !== ' ') return;
     const tab = this.selectableTabs.find(item => item.id === this.focusedTabId);
-    if (!tab || tab.disabled) return;
+    if (!tab || tab.isInactive) return;
     e.preventDefault();
     this.selectTab(tab.id, { focus: true });
   }
@@ -221,10 +221,10 @@ export class TabGroupNav {
     }
 
     if (e.key === 'Home') {
-      const first = tabs.findIndex(t => !t.disabled);
+      const first = tabs.findIndex(t => !t.isInactive);
       nextIdx = first === -1 ? null : first;
     } else if (e.key === 'End') {
-      const lastEnabled = [...tabs].reverse().findIndex(t => !t.disabled);
+      const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);
       nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;
     }
 
@@ -305,14 +305,15 @@ export class TabGroupNav {
                   tab: true,
                   'tab--selected': isSelected,
                   'ds-focus-ring-inset': true,
+                  'ds-control-inactive': !!tab.isInactive,
                   [bgClass]: !!bgClass,
                 }}
                 aria-selected={isSelected}
-                aria-disabled={tab.disabled || undefined}
+                aria-disabled={tab.isInactive || undefined}
                 aria-controls={tab.panelId ?? undefined}
-                disabled={tab.disabled}
+                disabled={tab.isInactive}
                 tabIndex={this.tabIndexForTab(tab)}
-                onClick={() => !tab.disabled && this.selectTab(tab.id)}
+                onClick={() => !tab.isInactive && this.selectTab(tab.id)}
                 onFocus={() => {
                   if (!this.selectionFollowsFocus) {
                     this.focusedTabId = tab.id;

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

@@ -1,17 +1,25 @@
 import { Component, Prop, h, Host } from '@stencil/core';
 
-export type TagIntent     = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
-export type TagContrast   = 'strong' | 'bold' | 'medium' | 'faint';
-export type TagElevation  = 'none' | 'flat' | 'elevated';
-export type TagSize       = 'md' | 'sm' | 'xs';
+export type TagIntent   = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
+export type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';
+export type TagSize     = 'md' | 'sm' | 'xs';
 
+/** Text variant per control-density recipe (md / sm / xs). */
 const TEXT_VARIANT: Record<TagSize, string> = {
   md: 'text-body-medium',
   sm: 'text-body-small',
   xs: 'text-caption',
 };
 
-const ICON_SIZE: Record<TagSize, number> = { md: 20, sm: 16, xs: 12 };
+/**
+ * `ds-icon` size prop matching control-density icon metrics
+ * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).
+ */
+const ICON_SIZE: Record<TagSize, 'md' | 'sm' | 'xs'> = {
+  md: 'md',
+  sm: 'sm',
+  xs: 'xs',
+};
 
 @Component({
   tag: 'ds-tag',
@@ -22,13 +30,11 @@ export class Tag {
   @Prop() label!: string;
   @Prop() intent: TagIntent = 'neutral';
   @Prop() contrast: TagContrast = 'faint';
-  @Prop() elevation: TagElevation = 'none';
   @Prop() size: TagSize = 'md';
   @Prop() rounded: boolean = false;
   @Prop() maxWidth: string | number | undefined;
 
   render() {
-    const sz = this.size.toUpperCase() as 'MD' | 'SM' | 'XS';
     const textVariant = TEXT_VARIANT[this.size];
     const iconSize = ICON_SIZE[this.size];
 
@@ -36,29 +42,24 @@ export class Tag {
       ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }
       : undefined;
 
-    const hostCls: Record<string, boolean> = {
-      'tag': true,
-      [`tag--intent-${this.intent}`]: true,
-      [`tag--contrast-${this.contrast}`]: true,
-      [`tag--elevation-${this.elevation}`]: true,
-      [`tag--size-${this.size}`]: true,
-      'tag--rounded': this.rounded,
-      'tag--rounded-no-icon-left': this.rounded, // consumer overrides via slot presence hack
-      'tag--rounded-no-remove-right': this.rounded,
-      [`tag--icon-left-${sz}`]: false, // toggled by slotchange
-      [`tag--icon-right-${sz}`]: false,
-    };
-
     return (
       <Host
-        class={hostCls}
+        class={{
+          'tag': true,
+          [`tag--intent-${this.intent}`]: true,
+          [`tag--contrast-${this.contrast}`]: true,
+          [`tag--size-${this.size}`]: true,
+          'ds-control--md': this.size === 'md',
+          'ds-control--sm': this.size === 'sm',
+          'ds-control--xs': this.size === 'xs',
+          'tag--rounded': this.rounded,
+        }}
         style={maxWidthStyle}
       >
-        {/* Leading icon slot — consumer provides an icon element */}
-        <span class="tag__icon-slot" style={{ fontSize: `${iconSize}px`, lineHeight: '0' }}>
+        {/* Leading icon — consumer provides ds-icon (or any SVG); prefer size matching tag size. */}
+        <span class="tag__icon-slot" data-icon-size={iconSize}>
           <slot name="icon" />
         </span>
-        {/* Label */}
         <span class={{ 'tag__label': true, [textVariant]: true }}>
           {this.label}
         </span>

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

@@ -1 +1 @@
-export type { TagIntent, TagContrast, TagElevation, TagSize } from './Tag';
+export type { TagIntent, TagContrast, TagSize } from './Tag';

package/src/wc/components/Toggle/Toggle.tsx

@@ -7,18 +7,18 @@ import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
 })
 export class Toggle {
   @Prop({ mutable: true }) checked: boolean = false;
-  @Prop() inactive: boolean = false;
+  @Prop() isInactive: boolean = false;
 
   @Event() dsChange!: EventEmitter<boolean>;
 
   private handleClick = () => {
-    if (this.inactive) return;
+    if (this.isInactive) return;
     this.checked = !this.checked;
     this.dsChange.emit(this.checked);
   };
 
   private handleKeyDown = (e: KeyboardEvent) => {
-    if (this.inactive) return;
+    if (this.isInactive) return;
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       this.handleClick();
@@ -30,9 +30,9 @@ export class Toggle {
       <Host
         role="switch"
         aria-checked={String(this.checked)}
-        aria-disabled={this.inactive || undefined}
-        tabIndex={this.inactive ? -1 : 0}
-        class={{ toggle: true, checked: this.checked, inactive: this.inactive }}
+        aria-disabled={this.isInactive || undefined}
+        tabIndex={this.isInactive ? -1 : 0}
+        class={{ toggle: true, checked: this.checked, 'ds-control-inactive': this.isInactive }}
         onClick={this.handleClick}
         onKeyDown={this.handleKeyDown}
       >

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

@@ -1,12 +1,39 @@
-import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';
+import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';
 import { resolveCssLengthPx, resolveCssTimeMs, TOKEN_CSS_LENGTHS, TOKEN_DEFAULTS } from '../../utils';
 
 export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
 export type TooltipAlign = 'start' | 'center' | 'end';
+export type TooltipSize = 'md' | 'sm' | 'xs';
+
+/** Body text per control-density size (regular weight — not emphasis). */
+const TEXT_VARIANT: Record<TooltipSize, string> = {
+  md: 'text-body-medium',
+  sm: 'text-body-small',
+  xs: 'text-caption',
+};
+
+const LINE_HEIGHT: Record<TooltipSize, string> = {
+  md: 'var(--typography-lineheight-md)',
+  sm: 'var(--typography-lineheight-sm)',
+  xs: 'var(--typography-lineheight-xs)',
+};
+
+const FALLBACK_HEIGHT: Record<TooltipSize, string> = {
+  md: TOKEN_DEFAULTS.size400,
+  sm: TOKEN_DEFAULTS.size300,
+  xs: TOKEN_DEFAULTS.size200,
+};
 
 let lastDismissedAt = 0;
 let tooltipIdCounter = 0;
+/** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */
+let activeTooltip: Tooltip | null = null;
 
+/**
+ * Imperative body portal for the popup.
+ * Stencil must not own the portaled node — moving a VDOM child to `document.body`
+ * causes recreate → re-portal → @State loops that freeze the page.
+ */
 @Component({
   tag: 'ds-tooltip',
   styleUrl: 'Tooltip.css',
@@ -16,47 +43,67 @@ export class Tooltip {
   @Element() el!: HTMLElement;
 
   @Prop() label!: string;
+
+  /** Control density (height, padding, type). */
+  @Prop() size: TooltipSize = 'md';
+
   @Prop() side: TooltipSide = 'top';
   @Prop() align: TooltipAlign = 'center';
   /** Gap between anchor and tooltip — number (px) or TokoMo length. */
   @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;
   /** Cross-axis offset — number (px) or TokoMo length. */
   @Prop() alignOffset: number | string = 0;
-  /** Show delay — number (ms) or TokoMo time token / `var(--effect-animation-delay-*)`. */
-  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium1;
+  /**
+   * Hover show delay before the tooltip appears.
+   * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)
+   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the
+   * initial hover/focus show only — after a recent dismiss, reopen is instant.
+   * Prefer the default; override only for denser chrome or rare/destructive actions.
+   */
+  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium3;
   @Prop() shortcutKey: string | undefined;
   @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';
 
-  @State() private visible: boolean = false;
-  @State() private closing: boolean = false;
-  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };
-
   private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;
   private delayTimer: ReturnType<typeof setTimeout> | null = null;
   private closeTimer: ReturnType<typeof setTimeout> | null = null;
   private anchor: HTMLElement | null = null;
-  private tooltipEl: HTMLElement | null = null;
+  private popupEl: HTMLElement | null = null;
+  private skipEnterAnimation = false;
+  private isOpen = false;
   private mouseEnterHandler: () => void = () => this.show();
   private mouseLeaveHandler: () => void = () => this.hide();
+  /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */
   private focusHandler: () => void = () => this.show();
-  private blurHandler: () => void = () => this.hide();
+  private blurHandler: (e: FocusEvent) => void = (e) => {
+    const next = e.relatedTarget as Node | null;
+    if (next && this.anchor?.contains(next)) return;
+    this.hide();
+  };
 
   componentDidLoad() {
     this.bindAnchor();
   }
 
   disconnectedCallback() {
+    if (activeTooltip === this) activeTooltip = null;
     this.unbindAnchor();
     this.clearTimers();
+    this.destroyPopup();
   }
 
   @Watch('label')
+  @Watch('size')
   @Watch('side')
   @Watch('align')
   @Watch('sideOffset')
   @Watch('alignOffset')
-  onPositionPropsChange() {
-    if (this.visible) this.calculatePosition();
+  @Watch('shortcutKey')
+  @Watch('shortcutKeyPosition')
+  onContentOrPositionChange() {
+    if (!this.popupEl || !this.isOpen) return;
+    this.renderPopupContent();
+    this.calculatePosition();
   }
 
   private get viewportPadPx(): number {
@@ -72,7 +119,7 @@ export class Tooltip {
   }
 
   private get hoverDelayMs(): number {
-    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium1);
+    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium3);
   }
 
   private get instantReopenMs(): number {
@@ -91,7 +138,8 @@ export class Tooltip {
   }
 
   private get tooltipFallbackHeightPx(): number {
-    return resolveCssLengthPx(TOKEN_DEFAULTS.size300, TOKEN_DEFAULTS.size300);
+    const token = FALLBACK_HEIGHT[this.size];
+    return resolveCssLengthPx(token, token);
   }
 
   private bindAnchor() {
@@ -103,8 +151,8 @@ export class Tooltip {
     child.setAttribute('aria-describedby', this.tooltipId);
     child.addEventListener('mouseenter', this.mouseEnterHandler);
     child.addEventListener('mouseleave', this.mouseLeaveHandler);
-    child.addEventListener('focus', this.focusHandler);
-    child.addEventListener('blur', this.blurHandler);
+    child.addEventListener('focusin', this.focusHandler);
+    child.addEventListener('focusout', this.blurHandler);
   }
 
   private unbindAnchor() {
@@ -112,8 +160,8 @@ export class Tooltip {
     this.anchor.removeAttribute('aria-describedby');
     this.anchor.removeEventListener('mouseenter', this.mouseEnterHandler);
     this.anchor.removeEventListener('mouseleave', this.mouseLeaveHandler);
-    this.anchor.removeEventListener('focus', this.focusHandler);
-    this.anchor.removeEventListener('blur', this.blurHandler);
+    this.anchor.removeEventListener('focusin', this.focusHandler);
+    this.anchor.removeEventListener('focusout', this.blurHandler);
     this.anchor = null;
   }
 
@@ -122,39 +170,114 @@ export class Tooltip {
     if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }
   }
 
+  private destroyPopup() {
+    if (!this.popupEl) return;
+    this.popupEl.remove();
+    this.popupEl = null;
+  }
+
+  /** Drop the open tip immediately (warm handoff to another tooltip). */
+  private hideInstant() {
+    this.clearTimers();
+    lastDismissedAt = Date.now();
+    if (activeTooltip === this) activeTooltip = null;
+    this.destroyPopup();
+    this.isOpen = false;
+    this.skipEnterAnimation = false;
+  }
+
   private show() {
     this.clearTimers();
-    const instant = Date.now() - lastDismissedAt < this.instantReopenMs;
+    let instant = Date.now() - lastDismissedAt < this.instantReopenMs;
+    if (activeTooltip && activeTooltip !== this) {
+      activeTooltip.hideInstant();
+      instant = true;
+    }
+    activeTooltip = this;
+    this.skipEnterAnimation = instant;
     if (instant) {
-      this.closing = false;
-      this.visible = true;
-      requestAnimationFrame(() => this.calculatePosition());
+      this.mountPopup();
       return;
     }
     this.delayTimer = setTimeout(() => {
       this.delayTimer = null;
-      this.closing = false;
-      this.visible = true;
-      requestAnimationFrame(() => this.calculatePosition());
+      this.mountPopup();
     }, this.hoverDelayMs);
   }
 
   private hide() {
     this.clearTimers();
-    if (!this.visible) return;
+    if (!this.popupEl && !this.isOpen) return;
     lastDismissedAt = Date.now();
-    this.closing = true;
+    if (activeTooltip === this) activeTooltip = null;
+    if (!this.popupEl) {
+      this.isOpen = false;
+      return;
+    }
+    this.popupEl.classList.remove('tooltip-popup--instant');
+    this.popupEl.classList.add('tooltip-popup--closing');
     this.closeTimer = setTimeout(() => {
       this.closeTimer = null;
-      this.visible = false;
-      this.closing = false;
+      this.destroyPopup();
+      this.isOpen = false;
+      this.skipEnterAnimation = false;
     }, this.fadeOutMs);
   }
 
+  private mountPopup() {
+    if (!this.popupEl) {
+      const tip = document.createElement('div');
+      tip.id = this.tooltipId;
+      tip.setAttribute('role', 'tooltip');
+      // `sc-ds-tooltip` is required for Stencil scoped CSS to match outside the host.
+      tip.className = 'tooltip-popup sc-ds-tooltip';
+      Object.assign(tip.style, {
+        position: 'fixed',
+        left: '0',
+        top: '0',
+        zIndex: 'var(--dimension-z-index-tooltip)',
+        pointerEvents: 'none',
+      });
+      document.body.appendChild(tip);
+      this.popupEl = tip;
+    }
+
+    this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);
+    this.popupEl.classList.remove('tooltip-popup--closing');
+    this.renderPopupContent();
+    this.calculatePosition();
+    this.isOpen = true;
+  }
+
+  private renderPopupContent() {
+    if (!this.popupEl) return;
+    const textVariant = TEXT_VARIANT[this.size];
+    const lineHeight = LINE_HEIGHT[this.size];
+    const density =
+      this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';
+    // Every node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.
+    const sc = 'sc-ds-tooltip';
+
+    const startKey =
+      this.shortcutKey && this.shortcutKeyPosition === 'start'
+        ? `<div class="key-hint ${sc}" aria-hidden="true"><span class="text-caption-emphasis ${sc}">${escapeHtml(this.shortcutKey)}</span></div>`
+        : '';
+    const endKey =
+      this.shortcutKey && this.shortcutKeyPosition === 'end'
+        ? `<div class="key-hint ${sc}" aria-hidden="true"><span class="text-caption-emphasis ${sc}">${escapeHtml(this.shortcutKey)}</span></div>`
+        : '';
+
+    this.popupEl.innerHTML =
+      `<div class="tooltip-inner ${density} ${sc}">` +
+      startKey +
+      `<span class="tooltip-label ${textVariant} ${sc}" style="line-height:${lineHeight}">${escapeHtml(this.label)}</span>` +
+      endKey +
+      `</div>`;
+  }
+
   private calculatePosition() {
-    if (!this.anchor) return;
-    const tip = this.el.querySelector('.tooltip-popup') as HTMLElement | null;
-    if (!tip) return;
+    if (!this.anchor || !this.popupEl) return;
+    const tip = this.popupEl;
     const a = this.anchor.getBoundingClientRect();
     const tw = tip.offsetWidth || this.tooltipFallbackWidthPx;
     const th = tip.offsetHeight || this.tooltipFallbackHeightPx;
@@ -190,46 +313,25 @@ export class Tooltip {
         break;
     }
 
-    this.pos = {
-      x: Math.min(Math.max(x, vpPad), window.innerWidth - tw - vpPad),
-      y: Math.min(Math.max(y, vpPad), window.innerHeight - th - vpPad),
-    };
+    const nextX = Math.min(Math.max(x, vpPad), window.innerWidth - tw - vpPad);
+    const nextY = Math.min(Math.max(y, vpPad), window.innerHeight - th - vpPad);
+    tip.style.transform = `translate(${Math.round(nextX)}px, ${Math.round(nextY)}px)`;
   }
 
   render() {
     return (
       <Host style={{ display: 'contents' }}>
         <slot />
-        {(this.visible || this.closing) && (
-          <div
-            id={this.tooltipId}
-            class={{ 'tooltip-popup': true, 'tooltip-popup--closing': this.closing }}
-            role="tooltip"
-            style={{
-              position: 'fixed',
-              left: '0',
-              top: '0',
-              transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,
-              zIndex: '10000',
-              pointerEvents: 'none',
-            }}
-          >
-            <div class="tooltip-inner">
-              {this.shortcutKey && this.shortcutKeyPosition === 'start' && (
-                <div class="key-hint" aria-hidden="true">
-                  <span class="text-caption-emphasis">{this.shortcutKey}</span>
-                </div>
-              )}
-              <span class="text-body-small">{this.label}</span>
-              {this.shortcutKey && this.shortcutKeyPosition === 'end' && (
-                <div class="key-hint" aria-hidden="true">
-                  <span class="text-caption-emphasis">{this.shortcutKey}</span>
-                </div>
-              )}
-            </div>
-          </div>
-        )}
       </Host>
     );
   }
 }
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}