@ds-mo/ui 15.12.1 → 16.0.0

package/dist/mcp-data/registry/panel-tool-search.json

@@ -403,8 +403,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/panel-tools.json

@@ -518,8 +518,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: accessories, headers, items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/paper-texture.json

@@ -119,8 +119,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: config.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/radio-tile.json

@@ -370,8 +370,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: options.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/radio.json

@@ -461,8 +461,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: options.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/registry.json

@@ -12,8 +12,8 @@
     "themeSetup": "Set data-theme=\"dark\" on <html> for dark mode. Light is default.",
     "peerDependencies": {
       "required": [
-        "@ds-mo/tokens ^8.0.1",
-        "@ds-mo/icons ^8.1.2"
+        "@ds-mo/tokens ^9.0.0",
+        "@ds-mo/icons ^8.2.1"
       ],
       "optional": [],
       "frameworks": "None required for Custom Elements; generated React, Vue, and Angular adapters are included."

package/dist/mcp-data/registry/score.json

@@ -258,8 +258,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/scroll-overlay.json

@@ -166,8 +166,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/select-toggle.json

@@ -320,8 +320,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: options.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/select.json

@@ -1156,8 +1156,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: anchor, boundary, options, sections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/setting-row-checkbox.json

@@ -168,8 +168,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/setting-row-radio.json

@@ -186,8 +186,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/setting-row-toggle.json

@@ -222,8 +222,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/shell-app.json

@@ -692,8 +692,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: navigation, pageChrome, paperTexture, tools.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/shell-page.json

@@ -332,8 +332,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/shell-tools.json

@@ -457,8 +457,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: accessories, headers, items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/skeleton.json

@@ -409,8 +409,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/slider.json

@@ -696,8 +696,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: formatOptions, ticks, valueTexts.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/swatch-picker.json

@@ -227,8 +227,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: options, sections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/switch.json

@@ -378,8 +378,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/tab-group.json

@@ -352,8 +352,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: tabs.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/table.json

@@ -1674,8 +1674,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: cellRange, cellSpans, collapsedGroupIds, columns, customizeOptions, fieldOrder, grouping, groups, hiddenFieldIds, highlightFieldIds, highlightTerms, pagination, pinnedFieldIds, rows, selectedRowIds, sort.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/tag.json

@@ -435,8 +435,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/text.json

@@ -360,8 +360,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/textarea.json

@@ -675,8 +675,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/time-picker.json

@@ -262,8 +262,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/toast.json

@@ -335,8 +335,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: manager, swipeDirections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/tooltip-chart.json

@@ -254,8 +254,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -271,7 +271,7 @@
   "files": [
     {
       "path": "src/wc/components/TooltipChart/TooltipChart.css",
-      "content": "@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-translucent);\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",
+      "content": "@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",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/tooltip.json

@@ -386,8 +386,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/typing-indicator.json

@@ -108,8 +108,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.1",
-          "@ds-mo/icons ^8.1.2"
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "15.12.1",
+  "version": "16.0.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -133,8 +133,8 @@
   "peerDependencies": {
     "@angular/core": ">=19 <23",
     "@angular/forms": ">=19 <23",
-    "@ds-mo/icons": "^8.1.2",
-    "@ds-mo/tokens": "^8.0.1",
+    "@ds-mo/icons": "^8.2.1",
+    "@ds-mo/tokens": "^9.0.0",
     "@eslint/css": "^2.0.0",
     "eslint": "^10.7.0",
     "react": "^18 || ^19",
@@ -179,8 +179,8 @@
     "@csstools/css-syntax-patches-for-csstree": "^1.1.7",
     "@csstools/css-tokenizer": "^4.0.0",
     "@csstools/media-query-list-parser": "^5.0.0",
-    "@ds-mo/icons": "^8.1.2",
-    "@ds-mo/tokens": "^8.0.1",
+    "@ds-mo/icons": "^8.2.1",
+    "@ds-mo/tokens": "^9.0.0",
     "@eslint/css": "^2.0.0",
     "@eslint/js": "^10.0.1",
     "@fontsource-variable/inter": "^5.3.0",
@@ -204,7 +204,7 @@
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/sax": "^1.2.7",
-    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/browser-playwright": "^5.0.2",
     "ajv": "^8.20.0",
     "axe-core": "^4.12.1",
     "colord": "^2.9.4",
@@ -229,7 +229,7 @@
     "typescript": "~6.0.3",
     "typescript-eslint": "^8.63.0",
     "vite": "^8.1.4",
-    "vitest": "^4.1.11",
+    "vitest": "^5.0.2",
     "vue": "^3.5.41",
     "vue-router": "^5.2.0",
     "zod": "^4.4.3"

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

@@ -1 +0,0 @@
-{"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-translucent);\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":[]}