@ds-mo/ui 2.12.0 → 2.13.1

package/dist/components/p-DusYu-if.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["buttonFilledCss","TEXT_VARIANT","md","sm","xs","ICON_SIZE","ButtonFilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","label","icon","intent","contrast","isInactive","type","buttonEl","handleClick","event","dsClick","emit","setFocus","focus","showIcon","showLabel","accessibleName","ariaLabel","undefined","render","textVariant","iconSize","cls","h","Host","key","class","tabIndex","ref","el","disabled","onClick","name","color"],"sources":["src/wc/components/ButtonFilled/ButtonFilled.css?tag=ds-button-filled&encapsulation=scoped","src/wc/components/ButtonFilled/ButtonFilled.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n\n:host {\n  display: inline-flex;\n  flex: 0 0 auto;\n  outline: none;\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n/* Icon-only: fixed square from density height. */\n:host(.button-filled-host--icon) {\n  width: var(--ds-control-height, var(--dimension-size-400));\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-width: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n.button-filled {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  background-color: var(--ds-button-filled-bg);\n  color: var(--ds-button-filled-fg);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition:\n    background-color var(--effect-motion-short-2),\n    color var(--effect-motion-short-2),\n    transform var(--effect-motion-short-2);\n  /* Hover/press: `.ds-interaction-fill` + contrast → `--on-*` (token overlay, not color-mix). */\n}\n\n.button-filled--icon {\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n.button-filled:active:not(:disabled):not(.ds-control-inactive) {\n  transform: scale(var(--dimension-scale-subtle));\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.button-filled__icon-wrap {\n  position: relative;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-filled__label {\n  position: relative;\n  z-index: 2;\n  line-height: 0;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n/* ── Intent + contrast (bold default) ─────────────────────────────────────── */\n\n.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-bold-neutral);\n  --ds-button-filled-fg: var(--color-foreground-faint-neutral);\n}\n\n.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-bold-ai);\n  --ds-button-filled-fg: var(--color-foreground-faint-ai);\n}\n\n.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-bold-negative);\n  --ds-button-filled-fg: var(--color-foreground-faint-negative);\n}\n\n.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-bold-warning);\n  --ds-button-filled-fg: var(--color-foreground-faint-warning);\n}\n\n.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-bold-caution);\n  --ds-button-filled-fg: var(--color-foreground-faint-caution);\n}\n\n.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-bold-positive);\n  --ds-button-filled-fg: var(--color-foreground-faint-positive);\n}\n\n.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-bold-guide);\n  --ds-button-filled-fg: var(--color-foreground-faint-guide);\n}\n\n.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-bold-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-faint-walkthrough);\n}\n\n/* strong → medium fg */\n.button-filled--contrast-strong.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-strong-neutral);\n  --ds-button-filled-fg: var(--color-foreground-medium-neutral);\n}\n\n.button-filled--contrast-strong.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-strong-brand);\n  --ds-button-filled-fg: var(--color-foreground-medium-brand);\n}\n\n.button-filled--contrast-strong.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-strong-ai);\n  --ds-button-filled-fg: var(--color-foreground-medium-ai);\n}\n\n.button-filled--contrast-strong.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-strong-negative);\n  --ds-button-filled-fg: var(--color-foreground-medium-negative);\n}\n\n.button-filled--contrast-strong.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-strong-warning);\n  --ds-button-filled-fg: var(--color-foreground-medium-warning);\n}\n\n.button-filled--contrast-strong.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-strong-caution);\n  --ds-button-filled-fg: var(--color-foreground-medium-caution);\n}\n\n.button-filled--contrast-strong.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-strong-positive);\n  --ds-button-filled-fg: var(--color-foreground-medium-positive);\n}\n\n.button-filled--contrast-strong.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-strong-guide);\n  --ds-button-filled-fg: var(--color-foreground-medium-guide);\n}\n\n.button-filled--contrast-strong.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-strong-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-medium-walkthrough);\n}\n\n/* medium → strong fg */\n.button-filled--contrast-medium.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-medium-neutral);\n  --ds-button-filled-fg: var(--color-foreground-strong-neutral);\n}\n\n.button-filled--contrast-medium.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-medium-brand);\n  --ds-button-filled-fg: var(--color-foreground-strong-brand);\n}\n\n.button-filled--contrast-medium.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-medium-ai);\n  --ds-button-filled-fg: var(--color-foreground-strong-ai);\n}\n\n.button-filled--contrast-medium.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-medium-negative);\n  --ds-button-filled-fg: var(--color-foreground-strong-negative);\n}\n\n.button-filled--contrast-medium.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-medium-warning);\n  --ds-button-filled-fg: var(--color-foreground-strong-warning);\n}\n\n.button-filled--contrast-medium.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-medium-caution);\n  --ds-button-filled-fg: var(--color-foreground-strong-caution);\n}\n\n.button-filled--contrast-medium.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-medium-positive);\n  --ds-button-filled-fg: var(--color-foreground-strong-positive);\n}\n\n.button-filled--contrast-medium.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-medium-guide);\n  --ds-button-filled-fg: var(--color-foreground-strong-guide);\n}\n\n.button-filled--contrast-medium.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-medium-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-strong-walkthrough);\n}\n\n/* faint → bold fg */\n.button-filled--contrast-faint.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-faint-neutral);\n  --ds-button-filled-fg: var(--color-foreground-bold-neutral);\n}\n\n.button-filled--contrast-faint.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-faint-brand);\n  --ds-button-filled-fg: var(--color-foreground-bold-brand);\n}\n\n.button-filled--contrast-faint.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-faint-ai);\n  --ds-button-filled-fg: var(--color-foreground-bold-ai);\n}\n\n.button-filled--contrast-faint.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-faint-negative);\n  --ds-button-filled-fg: var(--color-foreground-bold-negative);\n}\n\n.button-filled--contrast-faint.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-faint-warning);\n  --ds-button-filled-fg: var(--color-foreground-bold-warning);\n}\n\n.button-filled--contrast-faint.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-faint-caution);\n  --ds-button-filled-fg: var(--color-foreground-bold-caution);\n}\n\n.button-filled--contrast-faint.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-faint-positive);\n  --ds-button-filled-fg: var(--color-foreground-bold-positive);\n}\n\n.button-filled--contrast-faint.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-faint-guide);\n  --ds-button-filled-fg: var(--color-foreground-bold-guide);\n}\n\n.button-filled--contrast-faint.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-faint-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-bold-walkthrough);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\n\nexport type ButtonFilledIntent =\n  | 'neutral'\n  | 'brand'\n  | 'ai'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | 'positive'\n  | 'guide'\n  | 'walkthrough';\n\nexport type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';\n\nexport type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonFilledSize = 'md' | 'sm' | 'xs';\n\n/** Emphasis text per control-density size (buttons use emphasis, unlike Tag). */\nconst TEXT_VARIANT: Record<ButtonFilledSize, string> = {\n  md: 'text-body-medium-emphasis',\n  sm: 'text-body-small-emphasis',\n  xs: 'text-caption-emphasis',\n};\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonFilledSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-button-filled',\n  styleUrl: 'ButtonFilled.css',\n  scoped: true,\n})\nexport class ButtonFilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonFilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonFilledSize = 'md';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /** Semantic colour intent. */\n  @Prop() intent: ButtonFilledIntent = 'brand';\n\n  /**\n   * Background fill weight. Foreground uses the paired contrast token:\n   * bold → faint, strong → medium, medium → strong, faint → bold.\n   */\n  @Prop() contrast: ButtonFilledContrast = 'bold';\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive) return;\n    this.dsClick.emit(event);\n  };\n\n  private get showIcon(): boolean {\n    return this.variant === 'icon' || this.variant === 'icon-label';\n  }\n\n  private get showLabel(): boolean {\n    return this.variant === 'label' || this.variant === 'icon-label';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.showLabel && this.label) return undefined;\n    if (this.variant === 'icon') return this.icon || 'action';\n    return this.label || 'action';\n  }\n\n  render() {\n    const textVariant = TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const cls: Record<string, boolean> = {\n      'button-filled': true,\n      'ds-focus-ring-inset': true,\n      'ds-interaction-fill': !this.isInactive,\n      /* Bold is the default filled contrast — on-bold interaction tokens. */\n      'ds-interaction-fill--on-bold': this.contrast === 'bold',\n      'ds-interaction-fill--on-strong': this.contrast === 'strong',\n      'ds-interaction-fill--on-medium': this.contrast === 'medium',\n      /* faint → default app interaction tokens (no --on-*). */\n      'ds-control-inactive': this.isInactive,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'button-filled--icon': this.variant === 'icon',\n      'button-filled--label': this.variant === 'label',\n      'button-filled--icon-label': this.variant === 'icon-label',\n      [`button-filled--intent-${this.intent}`]: true,\n      [`button-filled--contrast-${this.contrast}`]: this.contrast !== 'bold',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-filled-host': true,\n          'button-filled-host--icon': this.variant === 'icon',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          aria-label={this.accessibleName}\n          onClick={this.handleClick}\n        >\n          {this.showIcon && (\n            <span class=\"button-filled__icon-wrap ds-interaction-fill__content\">\n              <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n          {this.showLabel && (\n            <span class={{ 'button-filled__label': true, [textVariant]: true, 'ds-interaction-fill__content': true }}>\n              {this.label}\n            </span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAkB,IAAM,g3dCoB9B,MAAMC,EAAiD,CACrDC,GAAI,4BACJC,GAAI,2BACJC,GAAI,yBAON,MAAMC,EAA0D,CAC9DH,GAAI,KACJC,GAAI,KACJC,GAAI,M,MAQOE,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,2EAYUC,KAAAC,QAA+B,QAG/BD,KAAAE,KAAyB,KAGzBF,KAAAG,MAAgB,GAGhBH,KAAAI,KAAe,GAGfJ,KAAAK,OAA6B,QAM7BL,KAAAM,SAAiC,OAGjCN,KAAAO,WAAsB,MAGtBP,KAAAQ,KAAsC,SAMtCR,KAAAS,SAAqC,KAOrCT,KAAAU,YAAeC,IACrB,GAAIX,KAAKO,WAAY,OACrBP,KAAKY,QAAQC,KAAKF,EAAM,CA6E3B,CAnFC,cAAMG,GACJd,KAAKS,UAAUM,O,CAQjB,YAAYC,GACV,OAAOhB,KAAKC,UAAY,QAAUD,KAAKC,UAAY,Y,CAGrD,aAAYgB,GACV,OAAOjB,KAAKC,UAAY,SAAWD,KAAKC,UAAY,Y,CAGtD,kBAAYiB,GACV,GAAIlB,KAAKmB,UAAW,OAAOnB,KAAKmB,UAChC,GAAInB,KAAKiB,WAAajB,KAAKG,MAAO,OAAOiB,UACzC,GAAIpB,KAAKC,UAAY,OAAQ,OAAOD,KAAKI,MAAQ,SACjD,OAAOJ,KAAKG,OAAS,Q,CAGvB,MAAAkB,GACE,MAAMC,EAAchC,EAAaU,KAAKE,MACtC,MAAMqB,EAAW7B,EAAUM,KAAKE,MAEhC,MAAMsB,EAA+B,CACnC,gBAAiB,KACjB,sBAAuB,KACvB,uBAAwBxB,KAAKO,WAE7B,+BAAgCP,KAAKM,WAAa,OAClD,iCAAkCN,KAAKM,WAAa,SACpD,iCAAkCN,KAAKM,WAAa,SAEpD,sBAAuBN,KAAKO,WAC5B,iBAAkBP,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,sBAAuBF,KAAKC,UAAY,OACxC,uBAAwBD,KAAKC,UAAY,QACzC,4BAA6BD,KAAKC,UAAY,aAC9C,CAAC,yBAAyBD,KAAKK,UAAW,KAC1C,CAAC,2BAA2BL,KAAKM,YAAaN,KAAKM,WAAa,QAGlE,OACEmB,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,qBAAsB,KACtB,2BAA4B5B,KAAKC,UAAY,OAC7C,iBAAkBD,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,MAElC2B,UAAU,GAEVJ,EAAA,UAAAE,IAAA,2CACEG,IAAKC,IACH/B,KAAKS,SAAWsB,GAAM,IAAI,EAE5BvB,KAAMR,KAAKQ,KACXoB,MAAOJ,EACPQ,SAAUhC,KAAKO,WAAU,aACbP,KAAKkB,eACjBe,QAASjC,KAAKU,aAEbV,KAAKgB,UACJS,EAAA,QAAAE,IAAA,2CAAMC,MAAM,yDACVH,EAAA,WAAAE,IAAA,2CAASO,KAAMlC,KAAKI,KAAMF,KAAMqB,EAAUY,MAAM,aAGnDnC,KAAKiB,WACJQ,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAE,uBAAwB,KAAMN,CAACA,GAAc,KAAM,+BAAgC,OAC/FtB,KAAKG,Q","ignoreList":[]}

package/dist/components/p-UbKTMQjv.js

@@ -1,2 +0,0 @@
-import{p as t,H as i,h as s,a as o,t as n}from"./index.js";import{a as e,T as r}from"./p-B9dHCgY-.js";import{r as a}from"./p-BWUTr_XN.js";import{r as h}from"./p-C1cBr-Ri.js";const l=()=>`.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-label.sc-ds-tooltip{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}.key-hint.sc-ds-tooltip{width:var(--ds-control-icon, var(--dimension-size-200));height:var(--ds-control-icon, var(--dimension-size-200));flex-shrink:0;display:flex;align-items:center;justify-content:center;border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}`;const d={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const c={md:"var(--typography-lineheight-md)",sm:"var(--typography-lineheight-sm)",xs:"var(--typography-lineheight-xs)"};const p={md:r.size400,sm:r.size300,xs:r.size200};let u=0;let m=0;let f=null;const g=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=e.space050;this.alignOffset=0;this.delay=r.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++m}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.skipEnterAnimation=false;this.isOpen=false;this.mouseEnterHandler=()=>this.show();this.mouseLeaveHandler=()=>this.hide();this.focusHandler=()=>this.show();this.blurHandler=t=>{const i=t.relatedTarget;if(i&&this.anchor?.contains(i))return;this.hide()}}componentDidLoad(){this.bindAnchor()}disconnectedCallback(){if(f===this)f=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.popupEl||!this.isOpen)return;this.renderPopupContent();this.calculatePosition()}get viewportPadPx(){return a(r.space050,r.space050)}get sideOffsetPx(){return a(this.sideOffset,r.space050)}get alignOffsetPx(){return a(this.alignOffset,0)}get hoverDelayMs(){return h(this.delay,r.animationDelayMedium3)}get instantReopenMs(){return h(r.animationDurationMedium1,r.animationDurationMedium1)}get fadeOutMs(){return h(r.motionShort3,r.animationDurationShort3)}get tooltipFallbackWidthPx(){return a(r.tooltipFallbackWidth,r.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=p[this.size];return a(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const i=t?.assignedElements?.()??[];const s=i[0]??this.el.firstElementChild;if(!s)return;this.anchor=s;s.setAttribute("aria-describedby",this.tooltipId);s.addEventListener("mouseenter",this.mouseEnterHandler);s.addEventListener("mouseleave",this.mouseLeaveHandler);s.addEventListener("focusin",this.focusHandler);s.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.anchor.removeAttribute("aria-describedby");this.anchor.removeEventListener("mouseenter",this.mouseEnterHandler);this.anchor.removeEventListener("mouseleave",this.mouseLeaveHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}destroyPopup(){if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}hideInstant(){this.clearTimers();u=Date.now();if(f===this)f=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){this.clearTimers();let t=Date.now()-u<this.instantReopenMs;if(f&&f!==this){f.hideInstant();t=true}f=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;u=Date.now();if(f===this)f=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.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.calculatePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=d[this.size];const i=c[this.size];const s=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const o="sc-ds-tooltip";const n=this.shortcutKey&&this.shortcutKeyPosition==="start"?`<div class="key-hint ${o}" aria-hidden="true"><span class="text-caption-emphasis ${o}">${v(this.shortcutKey)}</span></div>`:"";const e=this.shortcutKey&&this.shortcutKeyPosition==="end"?`<div class="key-hint ${o}" aria-hidden="true"><span class="text-caption-emphasis ${o}">${v(this.shortcutKey)}</span></div>`:"";this.popupEl.innerHTML=`<div class="tooltip-inner ${s} ${o}">`+n+`<span class="tooltip-label ${t} ${o}" style="line-height:${i}">${v(this.label)}</span>`+e+`</div>`}calculatePosition(){if(!this.anchor||!this.popupEl)return;const t=this.popupEl;const i=this.anchor.getBoundingClientRect();const s=t.offsetWidth||this.tooltipFallbackWidthPx;const o=t.offsetHeight||this.tooltipFallbackHeightPx;const n=this.sideOffsetPx;const e=this.alignOffsetPx;const r=this.viewportPadPx;let a=0,h=0;switch(this.side){case"top":h=i.top-o-n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-s+e:i.left+i.width/2-s/2+e;break;case"bottom":h=i.bottom+n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-s+e:i.left+i.width/2-s/2+e;break;case"left":a=i.left-s-n;h=this.align==="start"?i.top+e:this.align==="end"?i.bottom-o+e:i.top+i.height/2-o/2+e;break;case"right":a=i.right+n;h=this.align==="start"?i.top+e:this.align==="end"?i.bottom-o+e:i.top+i.height/2-o/2+e;break}const l=Math.min(Math.max(a,r),window.innerWidth-s-r);const d=Math.min(Math.max(h,r),window.innerHeight-o-r);t.style.transform=`translate(${Math.round(l)}px, ${Math.round(d)}px)`}render(){return s(o,{key:"79bab42905e30fc47fae51aa12ade59b49d4aa40",style:{display:"contents"}},s("slot",{key:"48c3aacd94c434a6471b583b38c5f9b0f1cec821"}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return l()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function v(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function b(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),g)}break}}))}b();export{g as T,b as d};
-//# sourceMappingURL=p-UbKTMQjv.js.map

package/dist/components/p-UbKTMQjv.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tooltipCss","TEXT_VARIANT","md","sm","xs","LINE_HEIGHT","FALLBACK_HEIGHT","TOKEN_DEFAULTS","size400","size300","size200","lastDismissedAt","tooltipIdCounter","activeTooltip","Tooltip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","side","align","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","delay","animationDelayMedium3","shortcutKeyPosition","tooltipId","delayTimer","closeTimer","anchor","popupEl","skipEnterAnimation","isOpen","mouseEnterHandler","show","mouseLeaveHandler","hide","focusHandler","blurHandler","e","next","relatedTarget","contains","componentDidLoad","bindAnchor","disconnectedCallback","unbindAnchor","clearTimers","destroyPopup","onContentOrPositionChange","renderPopupContent","calculatePosition","viewportPadPx","resolveCssLengthPx","sideOffsetPx","alignOffsetPx","hoverDelayMs","resolveCssTimeMs","instantReopenMs","animationDurationMedium1","fadeOutMs","motionShort3","animationDurationShort3","tooltipFallbackWidthPx","tooltipFallbackWidth","tooltipFallbackHeightPx","token","slot","el","querySelector","slotted","assignedElements","child","firstElementChild","setAttribute","addEventListener","removeAttribute","removeEventListener","clearTimeout","remove","hideInstant","Date","now","instant","mountPopup","setTimeout","classList","add","tip","document","createElement","id","className","Object","assign","style","position","left","top","zIndex","pointerEvents","body","appendChild","toggle","textVariant","lineHeight","density","sc","startKey","shortcutKey","escapeHtml","endKey","innerHTML","label","a","getBoundingClientRect","tw","offsetWidth","th","offsetHeight","vpPad","x","y","right","width","bottom","height","nextX","Math","min","max","window","innerWidth","nextY","innerHeight","transform","round","render","h","Host","key","display","value","replace"],"sources":["src/wc/components/Tooltip/Tooltip.css?tag=ds-tooltip&encapsulation=scoped","src/wc/components/Tooltip/Tooltip.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n.tooltip-popup {\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n\n/* Warm handoff between nearby triggers — no enter fade (avoids 20–100ms lag). */\n.tooltip-popup--instant {\n  animation: none;\n  opacity: 1;\n}\n\n.tooltip-popup--closing {\n  animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n/* Density: md / sm / xs via `.ds-control--*` on `.tooltip-inner`. */\n.tooltip-inner {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  display: flex;\n  align-items: center;\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n.tooltip-label {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  color: var(--color-foreground-primary);\n}\n\n.key-hint {\n  width: var(--ds-control-icon, var(--dimension-size-200));\n  height: var(--ds-control-icon, var(--dimension-size-200));\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n  border-bottom-width: var(--dimension-stroke-width-025);\n  border-radius: var(--dimension-radius-025);\n  color: var(--color-foreground-primary);\n}\n\n@keyframes tooltipFadeIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes tooltipFadeOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssLengthPx, resolveCssTimeMs, TOKEN_CSS_LENGTHS, TOKEN_DEFAULTS } from '../../utils';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\nexport type TooltipSize = 'md' | 'sm' | 'xs';\n\n/** Body text per control-density size (regular weight — not emphasis). */\nconst TEXT_VARIANT: Record<TooltipSize, string> = {\n  md: 'text-body-medium',\n  sm: 'text-body-small',\n  xs: 'text-caption',\n};\n\nconst LINE_HEIGHT: Record<TooltipSize, string> = {\n  md: 'var(--typography-lineheight-md)',\n  sm: 'var(--typography-lineheight-sm)',\n  xs: 'var(--typography-lineheight-xs)',\n};\n\nconst FALLBACK_HEIGHT: Record<TooltipSize, string> = {\n  md: TOKEN_DEFAULTS.size400,\n  sm: TOKEN_DEFAULTS.size300,\n  xs: TOKEN_DEFAULTS.size200,\n};\n\nlet lastDismissedAt = 0;\nlet tooltipIdCounter = 0;\n/** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */\nlet activeTooltip: Tooltip | null = null;\n\n/**\n * Imperative body portal for the popup.\n * Stencil must not own the portaled node — moving a VDOM child to `document.body`\n * causes recreate → re-portal → @State loops that freeze the page.\n */\n@Component({\n  tag: 'ds-tooltip',\n  styleUrl: 'Tooltip.css',\n  scoped: true,\n})\nexport class Tooltip {\n  @Element() el!: HTMLElement;\n\n  @Prop() label!: string;\n\n  /** Control density (height, padding, type). */\n  @Prop() size: TooltipSize = 'md';\n\n  @Prop() side: TooltipSide = 'top';\n  @Prop() align: TooltipAlign = 'center';\n  /** Gap between anchor and tooltip — number (px) or TokoMo length. */\n  @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n  /** Cross-axis offset — number (px) or TokoMo length. */\n  @Prop() alignOffset: number | string = 0;\n  /**\n   * Hover show delay before the tooltip appears.\n   * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the\n   * initial hover/focus show only — after a recent dismiss, reopen is instant.\n   * Prefer the default; override only for denser chrome or rare/destructive actions.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium3;\n  @Prop() shortcutKey: string | undefined;\n  @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';\n\n  private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private anchor: HTMLElement | null = null;\n  private popupEl: HTMLElement | null = null;\n  private skipEnterAnimation = false;\n  private isOpen = false;\n  private mouseEnterHandler: () => void = () => this.show();\n  private mouseLeaveHandler: () => void = () => this.hide();\n  /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */\n  private focusHandler: () => void = () => this.show();\n  private blurHandler: (e: FocusEvent) => void = (e) => {\n    const next = e.relatedTarget as Node | null;\n    if (next && this.anchor?.contains(next)) return;\n    this.hide();\n  };\n\n  componentDidLoad() {\n    this.bindAnchor();\n  }\n\n  disconnectedCallback() {\n    if (activeTooltip === this) activeTooltip = null;\n    this.unbindAnchor();\n    this.clearTimers();\n    this.destroyPopup();\n  }\n\n  @Watch('label')\n  @Watch('size')\n  @Watch('side')\n  @Watch('align')\n  @Watch('sideOffset')\n  @Watch('alignOffset')\n  @Watch('shortcutKey')\n  @Watch('shortcutKeyPosition')\n  onContentOrPositionChange() {\n    if (!this.popupEl || !this.isOpen) return;\n    this.renderPopupContent();\n    this.calculatePosition();\n  }\n\n  private get viewportPadPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n  }\n\n  private get sideOffsetPx(): number {\n    return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n  }\n\n  private get alignOffsetPx(): number {\n    return resolveCssLengthPx(this.alignOffset, 0);\n  }\n\n  private get hoverDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium3);\n  }\n\n  private get instantReopenMs(): number {\n    return resolveCssTimeMs(\n      TOKEN_DEFAULTS.animationDurationMedium1,\n      TOKEN_DEFAULTS.animationDurationMedium1,\n    );\n  }\n\n  private get fadeOutMs(): number {\n    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private get tooltipFallbackWidthPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);\n  }\n\n  private get tooltipFallbackHeightPx(): number {\n    const token = FALLBACK_HEIGHT[this.size];\n    return resolveCssLengthPx(token, token);\n  }\n\n  private bindAnchor() {\n    const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n    const slotted = slot?.assignedElements?.() ?? [];\n    const child = (slotted[0] ?? this.el.firstElementChild) as HTMLElement | null;\n    if (!child) return;\n    this.anchor = child;\n    child.setAttribute('aria-describedby', this.tooltipId);\n    child.addEventListener('mouseenter', this.mouseEnterHandler);\n    child.addEventListener('mouseleave', this.mouseLeaveHandler);\n    child.addEventListener('focusin', this.focusHandler);\n    child.addEventListener('focusout', this.blurHandler);\n  }\n\n  private unbindAnchor() {\n    if (!this.anchor) return;\n    this.anchor.removeAttribute('aria-describedby');\n    this.anchor.removeEventListener('mouseenter', this.mouseEnterHandler);\n    this.anchor.removeEventListener('mouseleave', this.mouseLeaveHandler);\n    this.anchor.removeEventListener('focusin', this.focusHandler);\n    this.anchor.removeEventListener('focusout', this.blurHandler);\n    this.anchor = null;\n  }\n\n  private clearTimers() {\n    if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; }\n    if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n  }\n\n  private destroyPopup() {\n    if (!this.popupEl) return;\n    this.popupEl.remove();\n    this.popupEl = null;\n  }\n\n  /** Drop the open tip immediately (warm handoff to another tooltip). */\n  private hideInstant() {\n    this.clearTimers();\n    lastDismissedAt = Date.now();\n    if (activeTooltip === this) activeTooltip = null;\n    this.destroyPopup();\n    this.isOpen = false;\n    this.skipEnterAnimation = false;\n  }\n\n  private show() {\n    this.clearTimers();\n    let instant = Date.now() - lastDismissedAt < this.instantReopenMs;\n    if (activeTooltip && activeTooltip !== this) {\n      activeTooltip.hideInstant();\n      instant = true;\n    }\n    activeTooltip = this;\n    this.skipEnterAnimation = instant;\n    if (instant) {\n      this.mountPopup();\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      this.mountPopup();\n    }, this.hoverDelayMs);\n  }\n\n  private hide() {\n    this.clearTimers();\n    if (!this.popupEl && !this.isOpen) return;\n    lastDismissedAt = Date.now();\n    if (activeTooltip === this) activeTooltip = null;\n    if (!this.popupEl) {\n      this.isOpen = false;\n      return;\n    }\n    this.popupEl.classList.remove('tooltip-popup--instant');\n    this.popupEl.classList.add('tooltip-popup--closing');\n    this.closeTimer = setTimeout(() => {\n      this.closeTimer = null;\n      this.destroyPopup();\n      this.isOpen = false;\n      this.skipEnterAnimation = false;\n    }, this.fadeOutMs);\n  }\n\n  private mountPopup() {\n    if (!this.popupEl) {\n      const tip = document.createElement('div');\n      tip.id = this.tooltipId;\n      tip.setAttribute('role', 'tooltip');\n      // `sc-ds-tooltip` is required for Stencil scoped CSS to match outside the host.\n      tip.className = 'tooltip-popup sc-ds-tooltip';\n      Object.assign(tip.style, {\n        position: 'fixed',\n        left: '0',\n        top: '0',\n        zIndex: 'var(--dimension-z-index-tooltip)',\n        pointerEvents: 'none',\n      });\n      document.body.appendChild(tip);\n      this.popupEl = tip;\n    }\n\n    this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);\n    this.popupEl.classList.remove('tooltip-popup--closing');\n    this.renderPopupContent();\n    this.calculatePosition();\n    this.isOpen = true;\n  }\n\n  private renderPopupContent() {\n    if (!this.popupEl) return;\n    const textVariant = TEXT_VARIANT[this.size];\n    const lineHeight = LINE_HEIGHT[this.size];\n    const density =\n      this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';\n    // Every node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.\n    const sc = 'sc-ds-tooltip';\n\n    const startKey =\n      this.shortcutKey && this.shortcutKeyPosition === 'start'\n        ? `<div class=\"key-hint ${sc}\" aria-hidden=\"true\"><span class=\"text-caption-emphasis ${sc}\">${escapeHtml(this.shortcutKey)}</span></div>`\n        : '';\n    const endKey =\n      this.shortcutKey && this.shortcutKeyPosition === 'end'\n        ? `<div class=\"key-hint ${sc}\" aria-hidden=\"true\"><span class=\"text-caption-emphasis ${sc}\">${escapeHtml(this.shortcutKey)}</span></div>`\n        : '';\n\n    this.popupEl.innerHTML =\n      `<div class=\"tooltip-inner ${density} ${sc}\">` +\n      startKey +\n      `<span class=\"tooltip-label ${textVariant} ${sc}\" style=\"line-height:${lineHeight}\">${escapeHtml(this.label)}</span>` +\n      endKey +\n      `</div>`;\n  }\n\n  private calculatePosition() {\n    if (!this.anchor || !this.popupEl) return;\n    const tip = this.popupEl;\n    const a = this.anchor.getBoundingClientRect();\n    const tw = tip.offsetWidth || this.tooltipFallbackWidthPx;\n    const th = tip.offsetHeight || this.tooltipFallbackHeightPx;\n    const sideOffset = this.sideOffsetPx;\n    const alignOffset = this.alignOffsetPx;\n    const vpPad = this.viewportPadPx;\n    let x = 0, y = 0;\n\n    switch (this.side) {\n      case 'top':\n        y = a.top - th - sideOffset;\n        x = this.align === 'start' ? a.left + alignOffset\n          : this.align === 'end' ? a.right - tw + alignOffset\n          : a.left + a.width / 2 - tw / 2 + alignOffset;\n        break;\n      case 'bottom':\n        y = a.bottom + sideOffset;\n        x = this.align === 'start' ? a.left + alignOffset\n          : this.align === 'end' ? a.right - tw + alignOffset\n          : a.left + a.width / 2 - tw / 2 + alignOffset;\n        break;\n      case 'left':\n        x = a.left - tw - sideOffset;\n        y = this.align === 'start' ? a.top + alignOffset\n          : this.align === 'end' ? a.bottom - th + alignOffset\n          : a.top + a.height / 2 - th / 2 + alignOffset;\n        break;\n      case 'right':\n        x = a.right + sideOffset;\n        y = this.align === 'start' ? a.top + alignOffset\n          : this.align === 'end' ? a.bottom - th + alignOffset\n          : a.top + a.height / 2 - th / 2 + alignOffset;\n        break;\n    }\n\n    const nextX = Math.min(Math.max(x, vpPad), window.innerWidth - tw - vpPad);\n    const nextY = Math.min(Math.max(y, vpPad), window.innerHeight - th - vpPad);\n    tip.style.transform = `translate(${Math.round(nextX)}px, ${Math.round(nextY)}px)`;\n  }\n\n  render() {\n    return (\n      <Host style={{ display: 'contents' }}>\n        <slot />\n      </Host>\n    );\n  }\n}\n\nfunction escapeHtml(value: string): string {\n  return value\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#39;');\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,22 +0,0 @@
-export type CardDataVizWidth = 'sm' | 'md' | 'lg';
-/**
- * Copied from CardSetting as a starting scaffold — header edit affordance removed for now
- * (data-viz widgets don't have an obvious "edit" action the way settings fields do); revisit
- * once the data-viz card's real header actions (menu, caption, footer stat) are designed.
- */
-export declare class CardDataViz {
-    el: HTMLElement;
-    /** Widget heading shown in the card header. */
-    heading: string;
-    /** Card width token. */
-    cardWidth: CardDataVizWidth;
-    private hasChartSlot;
-    private hasLegendSlot;
-    componentWillRender(): void;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
-    private handleChartHover;
-    private handleLegendHover;
-    render(): any;
-}
-//# sourceMappingURL=CardDataViz.d.ts.map

package/dist/types/components/CardDataViz/index.d.ts

@@ -1,2 +0,0 @@
-export type { CardDataVizWidth } from './CardDataViz';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,7 +0,0 @@
-export type HeaderBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';
-export declare class Header {
-    heading: string | undefined;
-    background: HeaderBackground;
-    render(): any;
-}
-//# sourceMappingURL=Header.d.ts.map

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

@@ -1,27 +0,0 @@
-export type ScrollbarVariant = 'default' | 'thick';
-export declare class Scrollbar {
-    el: HTMLElement;
-    variant: ScrollbarVariant;
-    showTrackOnHover: boolean;
-    private thumbHeight;
-    private thumbTop;
-    private thumbWidth;
-    private thumbLeft;
-    private isDragging;
-    private isDraggingH;
-    private isPointerInside;
-    private contentEl;
-    private resizeObserver;
-    private scrollHandler;
-    private dragStartY;
-    private dragStartScrollTop;
-    private dragStartX;
-    private dragStartScrollLeft;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
-    private updateThumb;
-    private handleThumbMouseDown;
-    private handleThumbHMouseDown;
-    render(): any;
-}
-//# sourceMappingURL=Scrollbar.d.ts.map

package/src/react/ds-card-data-viz.ts

@@ -1,26 +0,0 @@
-'use client';
-
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-
-/* eslint-disable */
-
-import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsCardDataViz as DsCardDataVizElement, defineCustomElement as defineDsCardDataViz } from "@ds-mo/ui/dist/components/ds-card-data-viz.js";
-
-export type DsCardDataVizEvents = NonNullable<unknown>;
-
-export const DsCardDataViz: StencilReactComponent<DsCardDataVizElement, DsCardDataVizEvents, Components.DsCardDataViz> = /*@__PURE__*/ createComponent<DsCardDataVizElement, DsCardDataVizEvents, Components.DsCardDataViz>({
-    tagName: 'ds-card-data-viz',
-    elementClass: DsCardDataVizElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as DsCardDataVizEvents,
-    defineCustomElement: defineDsCardDataViz
-});

package/src/react/ds-scrollbar.ts

@@ -1,26 +0,0 @@
-'use client';
-
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-
-/* eslint-disable */
-
-import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsScrollbar as DsScrollbarElement, defineCustomElement as defineDsScrollbar } from "@ds-mo/ui/dist/components/ds-scrollbar.js";
-
-export type DsScrollbarEvents = NonNullable<unknown>;
-
-export const DsScrollbar: StencilReactComponent<DsScrollbarElement, DsScrollbarEvents, Components.DsScrollbar> = /*@__PURE__*/ createComponent<DsScrollbarElement, DsScrollbarEvents, Components.DsScrollbar>({
-    tagName: 'ds-scrollbar',
-    elementClass: DsScrollbarElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as DsScrollbarEvents,
-    defineCustomElement: defineDsScrollbar
-});

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

@@ -1 +0,0 @@
-export type { CardDataVizWidth } from './CardDataViz';

package/src/wc/components/Header/Header.tsx

@@ -1,33 +0,0 @@
-import { Component, Prop, h, Host } from '@stencil/core';
-
-export type HeaderBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';
-
-@Component({
-  tag: 'ds-header',
-  styleUrl: 'Header.css',
-  scoped: true,
-})
-export class Header {
-  @Prop() heading: string | undefined;
-  @Prop() background: HeaderBackground = 'secondary';
-
-  render() {
-    return (
-      <Host
-        class={{ header: true, [`bg-${this.background}`]: true }}
-        role="banner"
-      >
-        <div class="left">
-          <slot name="left" />
-          {this.heading && <span class="title text-title-small">{this.heading}</span>}
-        </div>
-        <div class="center">
-          <slot name="center" />
-        </div>
-        <div class="right">
-          <slot name="right" />
-        </div>
-      </Host>
-    );
-  }
-}

package/src/wc/components/Scrollbar/Scrollbar.tsx

@@ -1,189 +0,0 @@
-import { Component, Prop, State, Element, h, Host } from '@stencil/core';
-
-export type ScrollbarVariant = 'default' | 'thick';
-
-@Component({
-  tag: 'ds-scrollbar',
-  styleUrl: 'Scrollbar.css',
-  scoped: true,
-})
-export class Scrollbar {
-  @Element() el!: HTMLElement;
-
-  @Prop() variant: ScrollbarVariant = 'default';
-  @Prop() showTrackOnHover: boolean = true;
-
-  @State() private thumbHeight: number = 0;
-  @State() private thumbTop: number = 0;
-  @State() private thumbWidth: number = 0;
-  @State() private thumbLeft: number = 0;
-  @State() private isDragging: boolean = false;
-  @State() private isDraggingH: boolean = false;
-  @State() private isPointerInside: boolean = false;
-
-  private contentEl: HTMLElement | null = null;
-  private resizeObserver: ResizeObserver | null = null;
-  private scrollHandler: (() => void) | null = null;
-
-  // Drag state (not reactive — no re-render needed)
-  private dragStartY = 0;
-  private dragStartScrollTop = 0;
-  private dragStartX = 0;
-  private dragStartScrollLeft = 0;
-
-  componentDidLoad() {
-    this.contentEl = this.el.querySelector('.scrollbar-content') as HTMLElement | null;
-    if (!this.contentEl) return;
-
-    this.scrollHandler = () => this.updateThumb();
-    this.contentEl.addEventListener('scroll', this.scrollHandler);
-
-    this.resizeObserver = new ResizeObserver(() => this.updateThumb());
-    this.resizeObserver.observe(this.contentEl);
-    window.addEventListener('resize', this.scrollHandler);
-
-    this.updateThumb();
-  }
-
-  disconnectedCallback() {
-    if (this.contentEl && this.scrollHandler) {
-      this.contentEl.removeEventListener('scroll', this.scrollHandler);
-    }
-    if (this.scrollHandler) {
-      window.removeEventListener('resize', this.scrollHandler);
-    }
-    this.resizeObserver?.disconnect();
-  }
-
-  private updateThumb() {
-    const container = this.el.querySelector('.scrollbar-container') as HTMLElement | null;
-    const content = this.contentEl;
-    if (!container || !content) return;
-
-    const cH = container.clientHeight;
-    const cW = container.clientWidth;
-    const sH = content.scrollHeight;
-    const sW = content.scrollWidth;
-    const st = content.scrollTop;
-    const sl = content.scrollLeft;
-
-    if (sH <= cH) {
-      this.thumbHeight = 0;
-    } else {
-      const h = Math.max(20, cH * (cH / sH));
-      this.thumbHeight = h;
-      this.thumbTop = (st / (sH - cH)) * (cH - h);
-    }
-
-    if (sW <= cW) {
-      this.thumbWidth = 0;
-    } else {
-      const w = Math.max(20, cW * (cW / sW));
-      this.thumbWidth = w;
-      this.thumbLeft = (sl / (sW - cW)) * (cW - w);
-    }
-  }
-
-  private handleThumbMouseDown(e: MouseEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-    const content = this.contentEl;
-    if (!content) return;
-
-    this.isDragging = true;
-    this.dragStartY = e.clientY;
-    this.dragStartScrollTop = content.scrollTop;
-
-    const container = this.el.querySelector('.scrollbar-container') as HTMLElement;
-
-    const onMove = (ev: MouseEvent) => {
-      const deltaY = ev.clientY - this.dragStartY;
-      const scrollable = content.scrollHeight - container.clientHeight;
-      const ratio = scrollable / (container.clientHeight - this.thumbHeight);
-      content.scrollTop = Math.max(0, Math.min(scrollable, this.dragStartScrollTop + deltaY * ratio));
-    };
-    const onUp = () => {
-      this.isDragging = false;
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-    };
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-  }
-
-  private handleThumbHMouseDown(e: MouseEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-    const content = this.contentEl;
-    if (!content) return;
-
-    this.isDraggingH = true;
-    this.dragStartX = e.clientX;
-    this.dragStartScrollLeft = content.scrollLeft;
-
-    const container = this.el.querySelector('.scrollbar-container') as HTMLElement;
-
-    const onMove = (ev: MouseEvent) => {
-      const deltaX = ev.clientX - this.dragStartX;
-      const scrollable = content.scrollWidth - container.clientWidth;
-      const ratio = scrollable / (container.clientWidth - this.thumbWidth);
-      content.scrollLeft = Math.max(0, Math.min(scrollable, this.dragStartScrollLeft + deltaX * ratio));
-    };
-    const onUp = () => {
-      this.isDraggingH = false;
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-    };
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-  }
-
-  render() {
-    const showThumb  = this.thumbHeight > 0;
-    const showThumbH = this.thumbWidth > 0;
-    const isScrollable = showThumb || showThumbH;
-    const showTrack = this.showTrackOnHover && (this.isPointerInside || this.isDragging || this.isDraggingH);
-
-    return (
-      <Host style={{ display: 'contents' }}>
-        <div
-          class={{
-            'scrollbar-container': true,
-            'scrollbar-container--thick': this.variant === 'thick',
-          }}
-          data-show-track={showTrack ? 'true' : 'false'}
-          data-dragging={this.isDragging || this.isDraggingH}
-          onMouseEnter={() => { if (this.showTrackOnHover) this.isPointerInside = true; }}
-          onMouseLeave={() => { this.isPointerInside = false; }}
-        >
-          <div
-            class="scrollbar-content"
-            tabIndex={isScrollable ? 0 : undefined}
-          >
-            <slot />
-          </div>
-
-          {showThumb && (
-            <div class="scrollbar-track" aria-hidden="true">
-              <div
-                class="scrollbar-thumb"
-                style={{ height: `${this.thumbHeight}px`, top: `${this.thumbTop}px` }}
-                onMouseDown={(e: MouseEvent) => this.handleThumbMouseDown(e)}
-              />
-            </div>
-          )}
-
-          {showThumbH && (
-            <div class="scrollbar-track-h" aria-hidden="true">
-              <div
-                class="scrollbar-thumb-h"
-                style={{ width: `${this.thumbWidth}px`, left: `${this.thumbLeft}px` }}
-                onMouseDown={(e: MouseEvent) => this.handleThumbHMouseDown(e)}
-              />
-            </div>
-          )}
-        </div>
-      </Host>
-    );
-  }
-}