@ds-mo/ui 2.14.0 → 2.15.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["BADGE_GRADIENT_POSITION_VAR","isShellGradientActive","from","shell","closest","hasAttribute","badgeCss","SURFACE_RING","default","primary","secondary","medium","bold","strong","navigation","Badge","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","count","max","surface","gradientBackground","isSelected","gradientLayoutVersion","gradientObserver","gradientWindowListener","componentDidLoad","enableShellGradientRingIfNeeded","disconnectedCallback","unbindGradientRingSync","gradientBackgroundChanged","bindGradientRingSync","el","update","window","addEventListener","ResizeObserver","observe","bar","panel","removeEventListener","disconnect","ringHostStyle","ring","style","render","isDot","h","Host","display","String","ariaLabel","label","background","class","badge","badge__mark"],"sources":["src/wc/nav/badge-gradient-ring.ts","src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n  element: HTMLElement;\n  chromeHost: HTMLElement;\n  positionVar: string;\n}\n\n/** Whether the badge sits under `ds-app-shell[gradient]`. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n  // Explicit <HTMLElement>: the inferred HTMLDsAppShellElement type only\n  // resolves where @stencil/core types are installed — consumers importing\n  // `@ds-mo/ui/nav` (raw TS) compile this without them.\n  const shell = from.closest<HTMLElement>('ds-app-shell');\n  return shell?.hasAttribute('gradient') === true;\n}\n\n/** Bar or panel chrome surface that owns the shell gradient stack. */\nexport function findGradientSurface(from: HTMLElement): GradientSurface | null {\n  const barHost = from.closest('ds-bar-nav') as HTMLElement | null;\n  if (barHost) {\n    const root = barHost.shadowRoot ?? barHost;\n    const element = root.querySelector('.bar-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: barHost,\n        positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,\n      };\n    }\n  }\n\n  const panelHost = from.closest('ds-panel-nav') as HTMLElement | null;\n  if (panelHost) {\n    const root = panelHost.shadowRoot ?? panelHost;\n    const element = root.querySelector('.panel-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: panelHost,\n        positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,\n      };\n    }\n  }\n\n  return null;\n}\n\ninterface ParsedPosition {\n  x: number;\n  y: number;\n}\n\n/** Parse a two-value CSS background-position (e.g. `-200px 0`). */\nexport function parseCssBackgroundPosition(value: string): ParsedPosition {\n  const trimmed = value.trim();\n  if (!trimmed) return { x: 0, y: 0 };\n\n  const parts = trimmed.split(/\\s+/);\n  const x = parseLength(parts[0] ?? '0');\n  const y = parseLength(parts[1] ?? '0');\n  return { x, y };\n}\n\nfunction parseLength(token: string): number {\n  const px = token.match(/^(-?[\\d.]+)px$/);\n  if (px) return Number(px[1]);\n  return 0;\n}\n\n/**\n * Background position for a badge ring so the shell gradient aligns with nav chrome.\n * Uses badge center relative to the painted chrome surface.\n */\nexport function badgeGradientPosition(\n  badgeHost: HTMLElement,\n  surface: GradientSurface,\n  shellPosition: string,\n): string {\n  const badgeRect = badgeHost.getBoundingClientRect();\n  const surfaceRect = surface.element.getBoundingClientRect();\n  const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;\n  const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;\n  const { x, y } = parseCssBackgroundPosition(shellPosition);\n\n  return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;\n}\n\n/** Resolve shell gradient position from chrome host custom properties. */\nexport function readShellGradientPosition(surface: GradientSurface): string {\n  const styles = getComputedStyle(surface.chromeHost);\n  return styles.getPropertyValue(surface.positionVar).trim() || '0 0';\n}\n\n/** Stamp `--_badge-gradient-position` on the badge host (fixed viewport chrome). */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n  if (!isShellGradientActive(badgeHost)) {\n    badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n    return;\n  }\n\n  badgeHost.style.setProperty(BADGE_GRADIENT_POSITION_VAR, '0 0');\n}\n",":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0;\n  border-radius: var(--dimension-radius-half);\n  font-size: var(--typography-fontsize-xs);\n  line-height: 1;\n}\n\n:host(.badge--selected) {\n  --_badge-bg: var(--color-foreground-primary);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n  position: relative;\n  z-index: 0;\n  box-shadow: none;\n  isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--_badge-ring-width));\n  border-radius: inherit;\n  box-sizing: border-box;\n  padding: var(--_badge-ring-width);\n  pointer-events: none;\n  /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  /* stylelint-enable color-no-hex */\n  mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n  z-index: -2;\n  background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n  z-index: -1;\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: 0 0;\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n}\n","import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';\nimport {\n  BADGE_GRADIENT_POSITION_VAR,\n  isShellGradientActive,\n} from '../../nav/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'navigation'\n  | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n  default: 'var(--color-background-secondary)',\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  medium: 'var(--color-background-medium-neutral)',\n  bold: 'var(--color-background-bold-neutral)',\n  strong: 'var(--color-background-strong-neutral)',\n  navigation: 'var(--color-navigation-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n  tag: 'ds-badge',\n  styleUrl: 'Badge.css',\n  scoped: true,\n})\nexport class Badge {\n  @Element() el!: HTMLElement;\n\n  /** Render as a compact counter or notification dot. */\n  @Prop() variant: BadgeVariant = 'counter';\n\n  /** Count shown for counter badges. Count 0 hides the badge. */\n  @Prop() count: number = 0;\n\n  /** Highest count shown before compacting to \"+\". */\n  @Prop() max: number = 9;\n\n  /** Surface context for the ring around dots. */\n  @Prop() surface: BadgeSurface = 'default';\n\n  /** Direct ring background override for component-local surfaces. */\n  @Prop() background: string | undefined;\n\n  /**\n   * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n   * `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`;\n   * set `gradient-background` to opt in/out explicitly.\n   *\n   * The attribute must NOT start with `on` — Stencil's setAccessor routes any\n   * unknown `on*` member down the event-listener path during attribute\n   * reflection, calling addEventListener with a non-listener and throwing.\n   */\n  @Prop({ attribute: 'gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n  /** Deprecated alias for selected counter styling. Prefer context-specific color in the parent. */\n  @Prop() isSelected: boolean = false;\n\n  /** Accessible label. Defaults to the count as a string. */\n  @Prop() label: string | undefined;\n\n  /** Bumps on resize/layout so render recomputes gradient ring position. */\n  @State() private gradientLayoutVersion = 0;\n\n  private gradientObserver: ResizeObserver | null = null;\n  private gradientWindowListener: (() => void) | null = null;\n\n  componentDidLoad() {\n    this.enableShellGradientRingIfNeeded();\n  }\n\n  disconnectedCallback() {\n    this.unbindGradientRingSync();\n  }\n\n  @Watch('gradientBackground')\n  gradientBackgroundChanged() {\n    this.bindGradientRingSync();\n  }\n\n  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n  private enableShellGradientRingIfNeeded() {\n    if (!this.gradientBackground && isShellGradientActive(this.el)) {\n      this.gradientBackground = true;\n    }\n\n    if (this.gradientBackground) {\n      this.bindGradientRingSync();\n    }\n  }\n\n  private bindGradientRingSync() {\n    this.unbindGradientRingSync();\n\n    if (!this.gradientBackground) return;\n\n    const update = () => {\n      this.gradientLayoutVersion += 1;\n    };\n    update();\n\n    this.gradientWindowListener = update;\n    window.addEventListener('resize', update);\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this.gradientObserver = new ResizeObserver(update);\n      this.gradientObserver.observe(this.el);\n\n      const shell = this.el.closest('ds-app-shell');\n      if (shell) this.gradientObserver.observe(shell);\n\n      const bar = this.el.closest('ds-bar-nav');\n      if (bar) this.gradientObserver.observe(bar);\n\n      const panel = this.el.closest('ds-panel-nav');\n      if (panel) this.gradientObserver.observe(panel);\n    }\n  }\n\n  private unbindGradientRingSync() {\n    if (this.gradientWindowListener) {\n      window.removeEventListener('resize', this.gradientWindowListener);\n      this.gradientWindowListener = null;\n    }\n\n    this.gradientObserver?.disconnect();\n    this.gradientObserver = null;\n  }\n\n  private ringHostStyle(ring: string): Record<string, string> {\n    void this.gradientLayoutVersion;\n\n    const style: Record<string, string> = { '--_badge-ring': ring };\n    if (!this.gradientBackground || !isShellGradientActive(this.el)) return style;\n\n    /* Shell chrome wash uses background-attachment: fixed at viewport origin. */\n    style[BADGE_GRADIENT_POSITION_VAR] = '0 0';\n    return style;\n  }\n\n  render() {\n    const isDot = this.variant === 'dot';\n\n    if (!isDot && this.count === 0) return <Host style={{ display: 'none' }} />;\n\n    const display = this.count > this.max ? '+' : String(this.count);\n    const ariaLabel = this.label ?? (isDot ? 'Notification' : String(this.count));\n    const ring = this.background ?? SURFACE_RING[this.surface];\n\n    return (\n      <Host\n        class={{\n          badge: true,\n          'badge--counter': !isDot,\n          'badge--dot': isDot,\n          'badge--selected': this.isSelected,\n          'badge--on-gradient-background': this.gradientBackground,\n        }}\n        aria-label={ariaLabel}\n        style={this.ringHostStyle(ring)}\n      >\n        <span\n          class={{\n            'badge__mark': true,\n            'text-caption-emphasis': !isDot,\n          }}\n          aria-hidden=\"true\"\n        >\n          {!isDot && display}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAMO,MAAMA,EAA8B,6BASrC,SAAUC,EAAsBC,GAIpC,MAAMC,EAAQD,EAAKE,QAAqB,gBACxC,OAAOD,GAAOE,aAAa,cAAgB,IAC7C,CCrBA,MAAMC,EAAW,IAAM,ymECiBvB,MAAMC,EAA6C,CACjDC,QAAS,oCACTC,QAAS,kCACTC,UAAW,oCACXC,OAAQ,yCACRC,KAAM,uCACNC,OAAQ,yCACRC,WAAY,qCACZ,cAAe,uC,MAQJC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CASUC,KAAAC,QAAwB,UAGxBD,KAAAE,MAAgB,EAGhBF,KAAAG,IAAc,EAGdH,KAAAI,QAAwB,UAc2BJ,KAAAK,mBAA8B,MAGjFL,KAAAM,WAAsB,MAMbN,KAAAO,sBAAwB,EAEjCP,KAAAQ,iBAA0C,KAC1CR,KAAAS,uBAA8C,IA4GvD,CA1GC,gBAAAC,GACEV,KAAKW,iC,CAGP,oBAAAC,GACEZ,KAAKa,wB,CAIP,yBAAAC,GACEd,KAAKe,sB,CAIC,+BAAAJ,GACN,IAAKX,KAAKK,oBAAsBxB,EAAsBmB,KAAKgB,IAAK,CAC9DhB,KAAKK,mBAAqB,I,CAG5B,GAAIL,KAAKK,mBAAoB,CAC3BL,KAAKe,sB,EAID,oBAAAA,GACNf,KAAKa,yBAEL,IAAKb,KAAKK,mBAAoB,OAE9B,MAAMY,EAAS,KACbjB,KAAKO,uBAAyB,CAAC,EAEjCU,IAEAjB,KAAKS,uBAAyBQ,EAC9BC,OAAOC,iBAAiB,SAAUF,GAElC,UAAWG,iBAAmB,YAAa,CACzCpB,KAAKQ,iBAAmB,IAAIY,eAAeH,GAC3CjB,KAAKQ,iBAAiBa,QAAQrB,KAAKgB,IAEnC,MAAMjC,EAAQiB,KAAKgB,GAAGhC,QAAQ,gBAC9B,GAAID,EAAOiB,KAAKQ,iBAAiBa,QAAQtC,GAEzC,MAAMuC,EAAMtB,KAAKgB,GAAGhC,QAAQ,cAC5B,GAAIsC,EAAKtB,KAAKQ,iBAAiBa,QAAQC,GAEvC,MAAMC,EAAQvB,KAAKgB,GAAGhC,QAAQ,gBAC9B,GAAIuC,EAAOvB,KAAKQ,iBAAiBa,QAAQE,E,EAIrC,sBAAAV,GACN,GAAIb,KAAKS,uBAAwB,CAC/BS,OAAOM,oBAAoB,SAAUxB,KAAKS,wBAC1CT,KAAKS,uBAAyB,I,CAGhCT,KAAKQ,kBAAkBiB,aACvBzB,KAAKQ,iBAAmB,I,CAGlB,aAAAkB,CAAcC,GAGpB,MAAMC,EAAgC,CAAE,gBAAiBD,GACzD,IAAK3B,KAAKK,qBAAuBxB,EAAsBmB,KAAKgB,IAAK,OAAOY,EAGxEA,EAAMhD,GAA+B,MACrC,OAAOgD,C,CAGT,MAAAC,GACE,MAAMC,EAAQ9B,KAAKC,UAAY,MAE/B,IAAK6B,GAAS9B,KAAKE,QAAU,EAAG,OAAO6B,EAACC,EAAI,CAACJ,MAAO,CAAEK,QAAS,UAE/D,MAAMA,EAAUjC,KAAKE,MAAQF,KAAKG,IAAM,IAAM+B,OAAOlC,KAAKE,OAC1D,MAAMiC,EAAYnC,KAAKoC,QAAUN,EAAQ,eAAiBI,OAAOlC,KAAKE,QACtE,MAAMyB,EAAO3B,KAAKqC,YAAclD,EAAaa,KAAKI,SAElD,OACE2B,EAACC,EAAI,CACHM,MAAO,CACLC,MAAO,KACP,kBAAmBT,EACnB,aAAcA,EACd,kBAAmB9B,KAAKM,WACxB,gCAAiCN,KAAKK,oBACvC,aACW8B,EACZP,MAAO5B,KAAK0B,cAAcC,IAE1BI,EAAA,QACEO,MAAO,CACLE,YAAe,KACf,yBAA0BV,GAC3B,cACW,SAEVA,GAASG,G","ignoreList":[]}

package/dist/components/p-XNHSe8Mg.js

@@ -1,2 +0,0 @@
-import{p as t,H as i,h as o,a as s,t as a}from"./index.js";import{d as e}from"./p-CtwNUCnp.js";import{T as n}from"./p-B_g8X0eh.js";import{r as d}from"./p-C1cBr-Ri.js";const r=()=>`.ds-control--md.sc-ds-tooltip-data-viz-h,.ds-control--md.sc-ds-tooltip-data-viz{--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-data-viz-h,.ds-control--sm.sc-ds-tooltip-data-viz{--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-data-viz-h,.ds-control--xs.sc-ds-tooltip-data-viz{--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)}.sc-ds-tooltip-data-viz-h{position:absolute;z-index:var(--dimension-z-index-tooltip);display:block;box-sizing:border-box;background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md));border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;opacity:0}.tooltip-data-viz--visible.sc-ds-tooltip-data-viz-h{animation:tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards}.tooltip-data-viz__item.sc-ds-tooltip-data-viz{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--dimension-space-025);padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-data-viz__label.sc-ds-tooltip-data-viz,.tooltip-data-viz__value.sc-ds-tooltip-data-viz{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));line-height:var(--typography-lineheight-md)}@keyframes tooltip-data-viz-fade-in{from{opacity:0}to{opacity:1}}`;const l=12;const c=8;const p=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.value="";this.label="";this.x=0;this.y=0;this.delay=n.animationDelayInstant;this.side="right";this.align="bottom";this.visible=false;this.delayTimer=null}componentDidLoad(){this.scheduleShow();this.calculatePlacement()}disconnectedCallback(){this.clearDelayTimer()}onAnchorChange(){requestAnimationFrame((()=>this.calculatePlacement()))}onDelayChange(){if(!this.visible)this.scheduleShow()}get showDelayMs(){return d(this.delay,n.animationDelayInstant)}clearDelayTimer(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}}scheduleShow(){this.clearDelayTimer();this.visible=false;const t=this.showDelayMs;if(t<=0){this.visible=true;return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;this.visible=true;requestAnimationFrame((()=>this.calculatePlacement()))}),t)}calculatePlacement(){const t=this.el.getBoundingClientRect();if(!t.width||!t.height)return;const i=t.right>window.innerWidth-c?"left":"right";const o=t.bottom>window.innerHeight-c?"top":"bottom";if(i!==this.side)this.side=i;if(o!==this.align)this.align=o}render(){const t=this.side==="right"?`${l}px`:`calc(-100% - ${l}px)`;const i=this.align==="bottom"?`${l}px`:`calc(-100% - ${l}px)`;return o(s,{key:"413424c88116e81fdb8a1ced4e418f0879f5df3f",class:{"tooltip-data-viz":true,"tooltip-data-viz--visible":this.visible},style:{left:`${this.x}px`,top:`${this.y}px`,transform:`translate(${t}, ${i})`}},o("div",{key:"e5fec7e435be1bdaf470d78275def92daf9e8e46",class:"tooltip-data-viz__item ds-control--md"},o("span",{key:"7f0b0dc4b11f173955718507ef241bd08c29c03d",class:"tooltip-data-viz__label"},o("ds-text",{key:"0b7393cce704ae6b7446419a75b86511f6d5483f",as:"span",variant:"text-body-medium",color:"var(--color-foreground-on-translucent-background-secondary)"},this.label)),o("span",{key:"b2e4ca42a348fda68ab33b6aaea712809adcd979",class:"tooltip-data-viz__value"},o("ds-text",{key:"5b89b7ee01693aa5f13958f5f9468029fb29e75d",as:"span",variant:"text-body-medium-emphasis",color:"var(--color-foreground-on-translucent-background-primary)"},this.value))))}get el(){return this}static get watchers(){return{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}}static get style(){return r()}},[2,"ds-tooltip-data-viz",{value:[8],label:[1],x:[2],y:[2],delay:[8],side:[32],align:[32],visible:[32]},undefined,{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip-data-viz","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip-data-viz":if(!customElements.get(a(t))){customElements.define(a(t),p)}break;case"ds-text":if(!customElements.get(a(t))){e()}break}}))}h();export{p as T,h as d};
-//# sourceMappingURL=p-XNHSe8Mg.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["tooltipDataVizCss","CURSOR_OFFSET_PX","VIEWPORT_PAD_PX","TooltipDataViz","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","label","x","y","delay","TOKEN_DEFAULTS","animationDelayInstant","side","align","visible","delayTimer","componentDidLoad","scheduleShow","calculatePlacement","disconnectedCallback","clearDelayTimer","onAnchorChange","requestAnimationFrame","onDelayChange","showDelayMs","resolveCssTimeMs","clearTimeout","ms","setTimeout","rect","el","getBoundingClientRect","width","height","nextSide","right","window","innerWidth","nextAlign","bottom","innerHeight","render","translateX","translateY","h","Host","key","class","style","left","top","transform","as","variant","color"],"sources":["src/wc/components/TooltipDataViz/TooltipDataViz.css?tag=ds-tooltip-data-viz&encapsulation=scoped","src/wc/components/TooltipDataViz/TooltipDataViz.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n/* No padding here — the item div below owns all the spacing, so there's exactly one padding\n   box instead of stacking the host's padding on top of the item's. */\n:host {\n  position: absolute;\n  z-index: var(--dimension-z-index-tooltip);\n  display: block;\n  box-sizing: border-box;\n  background-color: var(--color-background-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\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  opacity: 0;\n}\n\n:host(.tooltip-data-viz--visible) {\n  animation: tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards;\n}\n\n/* Density: md control recipe (height / pad / label inset) — non-interactive, no interaction-fill. */\n.tooltip-data-viz__item {\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(--dimension-space-025);\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n/* <ds-text>'s host is `display: contents` — padding/line-height on it would no-op, so this\n   wrapper owns both: label inset around the text, and line-height matching text-body-medium\n   so the wrapper hugs its actual content instead of inheriting the browser default. */\n.tooltip-data-viz__label,\n.tooltip-data-viz__value {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  line-height: var(--typography-lineheight-md);\n}\n\n@keyframes tooltip-data-viz-fade-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n","import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipDataVizSide = 'left' | 'right';\nexport type TooltipDataVizAlign = 'top' | 'bottom';\n\n/**\n * Positioned value/label callout for chart hover interactions (donut slice, bar,\n * line point, ...). Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\n * charts hover-highlight data that lives inside an SVG, so the chart itself computes\n * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n *\n * Renders `position: absolute` — place inside a `position: relative` chart wrapper,\n * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\n * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge\n * keeps it on-screen.\n *\n * Mount (or remount) when a hover session starts so `delay` applies once per hover;\n * keep the instance mounted while the cursor moves so tracking stays instant.\n */\n@Component({\n  tag: 'ds-tooltip-data-viz',\n  styleUrl: 'TooltipDataViz.css',\n  scoped: true,\n})\nexport class TooltipDataViz {\n  @Element() el!: HTMLElement;\n\n  @Prop() value: string | number = '';\n  @Prop() label: string = '';\n  /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */\n  @Prop() x: number = 0;\n  @Prop() y: number = 0;\n\n  /**\n   * Show delay after mount before the callout appears.\n   * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\n   * immediate feedback while scrubbing; prefer the default. Mount once per\n   * hover session so any non-zero delay runs once, then track `x`/`y` instantly.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;\n\n  @State() private side: TooltipDataVizSide = 'right';\n  @State() private align: TooltipDataVizAlign = 'bottom';\n  @State() private visible: boolean = false;\n\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    this.scheduleShow();\n    this.calculatePlacement();\n  }\n\n  disconnectedCallback() {\n    this.clearDelayTimer();\n  }\n\n  @Watch('x')\n  @Watch('y')\n  onAnchorChange() {\n    requestAnimationFrame(() => this.calculatePlacement());\n  }\n\n  @Watch('delay')\n  onDelayChange() {\n    if (!this.visible) this.scheduleShow();\n  }\n\n  private get showDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);\n  }\n\n  private clearDelayTimer() {\n    if (this.delayTimer) {\n      clearTimeout(this.delayTimer);\n      this.delayTimer = null;\n    }\n  }\n\n  private scheduleShow() {\n    this.clearDelayTimer();\n    this.visible = false;\n    const ms = this.showDelayMs;\n    if (ms <= 0) {\n      this.visible = true;\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      this.visible = true;\n      requestAnimationFrame(() => this.calculatePlacement());\n    }, ms);\n  }\n\n  private calculatePlacement() {\n    const rect = this.el.getBoundingClientRect();\n    if (!rect.width || !rect.height) return;\n\n    const nextSide: TooltipDataVizSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n    const nextAlign: TooltipDataVizAlign = rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n    if (nextSide !== this.side) this.side = nextSide;\n    if (nextAlign !== this.align) this.align = nextAlign;\n  }\n\n  render() {\n    const translateX = this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const translateY = this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n\n    return (\n      <Host\n        class={{\n          'tooltip-data-viz': true,\n          'tooltip-data-viz--visible': this.visible,\n        }}\n        style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}\n      >\n        <div class=\"tooltip-data-viz__item ds-control--md\">\n          <span class=\"tooltip-data-viz__label\">\n            <ds-text as=\"span\" variant=\"text-body-medium\" color=\"var(--color-foreground-on-translucent-background-secondary)\">\n              {this.label}\n            </ds-text>\n          </span>\n          <span class=\"tooltip-data-viz__value\">\n            <ds-text as=\"span\" variant=\"text-body-medium-emphasis\" color=\"var(--color-foreground-on-translucent-background-primary)\">\n              {this.value}\n            </ds-text>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uKAAA,MAAMA,EAAoB,IAAM,orECGhC,MAAMC,EAAmB,GACzB,MAAMC,EAAkB,E,MAwBXC,EAAcC,EAAA,MAAAD,UAAAE,EAL3B,WAAAC,CAAAC,G,4CAQUC,KAAAC,MAAyB,GACzBD,KAAAE,MAAgB,GAEhBF,KAAAG,EAAY,EACZH,KAAAI,EAAY,EASZJ,KAAAK,MAAyBC,EAAeC,sBAE/BP,KAAAQ,KAA2B,QAC3BR,KAAAS,MAA6B,SAC7BT,KAAAU,QAAmB,MAE5BV,KAAAW,WAAmD,IAsF5D,CApFC,gBAAAC,GACEZ,KAAKa,eACLb,KAAKc,oB,CAGP,oBAAAC,GACEf,KAAKgB,iB,CAKP,cAAAC,GACEC,uBAAsB,IAAMlB,KAAKc,sB,CAInC,aAAAK,GACE,IAAKnB,KAAKU,QAASV,KAAKa,c,CAG1B,eAAYO,GACV,OAAOC,EAAiBrB,KAAKK,MAAOC,EAAeC,sB,CAG7C,eAAAS,GACN,GAAIhB,KAAKW,WAAY,CACnBW,aAAatB,KAAKW,YAClBX,KAAKW,WAAa,I,EAId,YAAAE,GACNb,KAAKgB,kBACLhB,KAAKU,QAAU,MACf,MAAMa,EAAKvB,KAAKoB,YAChB,GAAIG,GAAM,EAAG,CACXvB,KAAKU,QAAU,KACf,M,CAEFV,KAAKW,WAAaa,YAAW,KAC3BxB,KAAKW,WAAa,KAClBX,KAAKU,QAAU,KACfQ,uBAAsB,IAAMlB,KAAKc,sBAAqB,GACrDS,E,CAGG,kBAAAT,GACN,MAAMW,EAAOzB,KAAK0B,GAAGC,wBACrB,IAAKF,EAAKG,QAAUH,EAAKI,OAAQ,OAEjC,MAAMC,EAA+BL,EAAKM,MAAQC,OAAOC,WAAavC,EAAkB,OAAS,QACjG,MAAMwC,EAAiCT,EAAKU,OAASH,OAAOI,YAAc1C,EAAkB,MAAQ,SAEpG,GAAIoC,IAAa9B,KAAKQ,KAAMR,KAAKQ,KAAOsB,EACxC,GAAII,IAAclC,KAAKS,MAAOT,KAAKS,MAAQyB,C,CAG7C,MAAAG,GACE,MAAMC,EAAatC,KAAKQ,OAAS,QAAU,GAAGf,MAAuB,gBAAgBA,OACrF,MAAM8C,EAAavC,KAAKS,QAAU,SAAW,GAAGhB,MAAuB,gBAAgBA,OAEvF,OACE+C,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,mBAAoB,KACpB,4BAA6B3C,KAAKU,SAEpCkC,MAAO,CAAEC,KAAM,GAAG7C,KAAKG,MAAO2C,IAAK,GAAG9C,KAAKI,MAAO2C,UAAW,aAAaT,MAAeC,OAEzFC,EAAA,OAAAE,IAAA,2CAAKC,MAAM,yCACTH,EAAA,QAAAE,IAAA,2CAAMC,MAAM,2BACVH,EAAA,WAAAE,IAAA,2CAASM,GAAG,OAAOC,QAAQ,mBAAmBC,MAAM,+DACjDlD,KAAKE,QAGVsC,EAAA,QAAAE,IAAA,2CAAMC,MAAM,2BACVH,EAAA,WAAAE,IAAA,2CAASM,GAAG,OAAOC,QAAQ,4BAA4BC,MAAM,6DAC1DlD,KAAKC,S","ignoreList":[]}