@ds-mo/ui 15.12.0 → 16.0.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["tooltipChartCss","CURSOR_OFFSET_PX","VIEWPORT_PAD_PX","TooltipChart","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","label","x","y","delay","TOKEN_DEFAULTS","animationDelayInstant","side","align","visible","delayTimer","loaded","tasks","ConnectionTasks","el","isConnected","connectedCallback","scheduleShow","onAnchorChange","componentDidLoad","calculatePlacement","disconnectedCallback","clearDelayTimer","cancel","placementFrame","undefined","cancelFrame","frame","onDelayChange","showDelayMs","resolveCssTimeMs","clearTimeout","ms","setTimeout","guard","rect","getBoundingClientRect","width","height","nextSide","right","window","innerWidth","nextAlign","bottom","innerHeight","render","translateX","translateY","rows","items","usesSwatches","some","item","Boolean","color","h","Host","key","class","style","left","top","transform","heading","as","variant","CONTROL_SUPPORTING_TEXT_VARIANT","md","emphasis","map","index","CONTROL_TEXT_VARIANT"],"sources":["src/wc/components/TooltipChart/TooltipChart.css?tag=ds-tooltip-chart&encapsulation=scoped","src/wc/components/TooltipChart/TooltipChart.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: absolute;\n  z-index: var(--dimension-z-index-tooltip);\n  background-color: var(--color-translucent-background);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n  border-radius: var(--ds-radius-tooltip-menu);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n}\n\n:host(.tooltip-chart--visible) {\n  animation: tooltip-chart-fade-in var(--effect-motion-short-2) forwards;\n}\n\n.tooltip-chart__item {\n  width: 100%;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n.tooltip-chart__items {\n  display: contents;\n}\n\n.tooltip-chart__swatch-box {\n  pointer-events: none;\n}\n\n.tooltip-chart__swatch {\n  width: var(--dimension-size-100);\n  height: var(--dimension-size-100);\n  flex: none;\n  border-radius: var(--dimension-radius-half);\n  background: var(--ds-tooltip-chart-swatch);\n}\n\n.tooltip-chart__value {\n  margin-inline-start: auto;\n  text-align: end;\n}\n\n.tooltip-chart__label,\n.tooltip-chart__value {\n  flex: none;\n}\n\n@keyframes tooltip-chart-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.tooltip-chart--visible) {\n    animation: none;\n    opacity: 1;\n  }\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n","import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport {\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  resolveCssTimeMs,\n  TOKEN_DEFAULTS,\n} from '../../utils';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipChartSide = 'left' | 'right';\nexport type TooltipChartAlign = 'top' | 'bottom';\n\nexport interface TooltipChartItem {\n  label: string;\n  value: string | number;\n  color?: string;\n}\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point,\n * polar arc, …). A composition may suppress it when a visible legend already\n * surfaces the same value.\n * 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-chart',\n  styleUrl: 'TooltipChart.css',\n  scoped: true,\n})\nexport class TooltipChart {\n  @Element() el!: HTMLElement;\n\n  @Prop() value: string | number = '';\n  @Prop() label: string = '';\n  /** Optional heading for grouped chart focus. */\n  @Prop() heading?: string;\n  /** Multi-row content. When supplied, this replaces the legacy label/value row. */\n  @Prop() items?: TooltipChartItem[];\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: TooltipChartSide = 'right';\n  @State() private align: TooltipChartAlign = 'bottom';\n  @State() private visible: boolean = false;\n\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n  private loaded = false;\n  private placementFrame?: number;\n  private readonly tasks = new ConnectionTasks(() => this.el.isConnected);\n\n  connectedCallback() {\n    if (!this.loaded) return;\n    this.scheduleShow();\n    this.onAnchorChange();\n  }\n\n  componentDidLoad() {\n    this.loaded = true;\n    this.scheduleShow();\n    this.calculatePlacement();\n  }\n\n  disconnectedCallback() {\n    this.clearDelayTimer();\n    this.tasks.cancel();\n    this.placementFrame = undefined;\n    this.visible = false;\n  }\n\n  @Watch('x')\n  @Watch('y')\n  onAnchorChange() {\n    this.tasks.cancelFrame(this.placementFrame);\n    this.placementFrame = this.tasks.frame(() => {\n      this.placementFrame = undefined;\n      this.calculatePlacement();\n    });\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    if (!this.el.isConnected) return;\n    const ms = this.showDelayMs;\n    if (ms <= 0) {\n      this.visible = true;\n      return;\n    }\n    this.delayTimer = setTimeout(\n      this.tasks.guard(() => {\n        this.delayTimer = null;\n        this.visible = true;\n        this.onAnchorChange();\n      }),\n      ms\n    );\n  }\n\n  private calculatePlacement() {\n    if (!this.el.isConnected) return;\n    const rect = this.el.getBoundingClientRect();\n    if (!rect.width || !rect.height) return;\n\n    const nextSide: TooltipChartSide =\n      rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n    const nextAlign: TooltipChartAlign =\n      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 =\n      this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const translateY =\n      this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const rows = this.items ?? [{ label: this.label, value: this.value }];\n    const usesSwatches = rows.some(item => Boolean(item.color));\n\n    return (\n      <Host\n        class={{\n          'tooltip-chart': true,\n          'tooltip-chart--visible': this.visible,\n          'ds-chrome-column': true,\n          'ds-chrome-space--sm': true,\n        }}\n        style={{\n          left: `${this.x}px`,\n          top: `${this.y}px`,\n          transform: `translate(${translateX}, ${translateY})`,\n        }}\n      >\n        {this.heading && (\n          <ds-text\n            class=\"tooltip-chart__heading ds-control-section-heading ds-control--md\"\n            as=\"span\"\n            variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n            emphasis\n            color=\"var(--color-foreground-primary)\"\n          >\n            {this.heading}\n          </ds-text>\n        )}\n        <div class=\"tooltip-chart__items\">\n          {rows.map((item, index) => (\n            <div\n              class=\"tooltip-chart__item ds-control-frame ds-control--md\"\n              key={`${item.label}-${index}`}\n            >\n              {usesSwatches && (\n                <span class=\"tooltip-chart__swatch-box ds-control-icon-box\" aria-hidden=\"true\">\n                  {item.color && (\n                    <span\n                      class=\"tooltip-chart__swatch\"\n                      style={{ '--ds-tooltip-chart-swatch': item.color }}\n                    />\n                  )}\n                </span>\n              )}\n              <ds-text\n                class=\"tooltip-chart__label ds-control-label-box\"\n                as=\"span\"\n                variant={CONTROL_TEXT_VARIANT.md}\n                color=\"var(--color-foreground-secondary)\"\n              >\n                {item.label}\n              </ds-text>\n              <ds-text\n                class=\"tooltip-chart__value ds-control-label-box\"\n                as=\"span\"\n                variant={CONTROL_TEXT_VARIANT.md}\n                emphasis\n                color=\"var(--color-foreground-primary)\"\n              >\n                {item.value}\n              </ds-text>\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-09-29T08:58:27",
+  "timestamp": "2026-10-03T05:29:30",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -36597,6 +36597,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "collapseLabel",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "collapse-label",
+          "reflectToAttr": false,
+          "docs": "Follow the owning table or data toolbar's compact icon-only control presentation.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "controlAppearance",
           "type": "\"borderless\" | \"filled\" | \"outlined\"",