@epam/ai-dial-ui-kit 0.15.0-dev.50 → 0.15.0-dev.52

package/dist/components/New/InteractiveTooltip/InteractiveTooltip.js

@@ -1,100 +1,104 @@
-import { jsx as n, jsxs as j, Fragment as w } from "react/jsx-runtime";
-import { useFloatingNodeId as H, useFloating as U, autoUpdate as G, offset as K, flip as Y, shift as k, useHover as q, safePolygon as z, useFocus as B, useDismiss as J, useInteractions as Q, useMergeRefs as u, FloatingPortal as W, FloatingFocusManager as X } from "@floating-ui/react";
-import { useState as Z, useRef as $, useMemo as d, isValidElement as ee, cloneElement as oe } from "react";
-import { useThemeScope as te } from "../ThemeScope/ThemeScope.js";
-import { useIsMobileScreen as se } from "../../../hooks/use-is-mobile-screen.js";
-import { TooltipPlacement as ne } from "../../../types/tooltip.js";
-import { mergeClasses as g } from "../../../utils/merge-classes.js";
-import { INTERACTIVE_TOOLTIP_GAP as le, INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY as ae, interactiveTooltipClassName as re } from "./constants.js";
-import { DIAL_KIT_CLASS as ie } from "../../../constants/public-class-names.js";
-const Re = ({
-  content: a,
-  placement: T = ne.Right,
+import { jsx as i, jsxs as U, Fragment as G } from "react/jsx-runtime";
+import { useFloatingNodeId as K, useFloating as Y, autoUpdate as q, offset as z, flip as B, shift as J, useHover as Q, safePolygon as W, useFocus as X, useClick as Z, useDismiss as $, useInteractions as ee, useMergeRefs as u, FloatingPortal as oe, FloatingFocusManager as te } from "@floating-ui/react";
+import { useState as se, useRef as ne, useMemo as d, isValidElement as ie, cloneElement as le } from "react";
+import { useThemeScope as re } from "../ThemeScope/ThemeScope.js";
+import { useIsMobileScreen as ae } from "../../../hooks/use-is-mobile-screen.js";
+import { InteractiveTooltipTrigger as T, TooltipPlacement as ce } from "../../../types/tooltip.js";
+import { mergeClasses as I } from "../../../utils/merge-classes.js";
+import { INTERACTIVE_TOOLTIP_GAP as fe, INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY as pe, interactiveTooltipClassName as me } from "./constants.js";
+import { DIAL_KIT_CLASS as ge } from "../../../constants/public-class-names.js";
+const Ee = ({
+  content: r,
+  placement: R = ce.Right,
   children: e,
-  asChild: I = !1,
-  hideTooltip: R = !1,
-  initialOpen: F = !1,
+  asChild: C = !1,
+  hideTooltip: F = !1,
+  initialOpen: h = !1,
+  trigger: v = T.Hover,
   open: t,
-  onOpenChange: h,
-  triggerClassName: r,
-  contentClassName: E
+  onOpenChange: E,
+  triggerClassName: a,
+  contentClassName: P
 }) => {
-  const P = se(), C = te(), [v, N] = Z(F), i = t ?? v, O = (m) => {
-    h?.(m), t == null && N(m);
-  }, _ = H(), { refs: s, floatingStyles: S, context: o } = U({
-    nodeId: _,
-    placement: T,
-    open: i,
-    onOpenChange: O,
-    whileElementsMounted: G,
+  const N = ae(), s = v === T.Click, O = re(), [_, S] = se(h), c = t ?? _, A = (g) => {
+    E?.(g), t == null && S(g);
+  }, M = K(), { refs: n, floatingStyles: b, context: o } = Y({
+    nodeId: M,
+    placement: R,
+    open: c,
+    onOpenChange: A,
+    whileElementsMounted: q,
     middleware: [
-      K(le),
+      z(fe),
       /* No `fallbackAxisSideDirection`: a panel placed to the right should
        flip to the left when it does not fit, not drop to the perpendicular
        top/bottom axis, which reads as the panel landing in the wrong place.*/
-      Y({ padding: 5 }),
-      k({ padding: 5 })
+      B({ padding: 5 }),
+      J({ padding: 5 })
     ]
-  }), A = q(o, {
-    enabled: t == null,
+  }), L = Q(o, {
+    enabled: t == null && !s,
     /* Lets the pointer cross the gap between the trigger and the panel
        without closing it, so it can actually be reached and used. */
-    handleClose: z(),
-    delay: { open: ae, close: 0 }
-  }), M = B(o, { enabled: t == null }), L = J(o), { getReferenceProps: c, getFloatingProps: V } = Q([
-    A,
-    M,
-    L
-  ]), b = $(null), x = u(
-    d(() => [s.setFloating, b], [s.setFloating])
-  ), f = I && ee(e), l = f ? e.props?.ref : null, p = u(
+    handleClose: W(),
+    delay: { open: pe, close: 0 }
+  }), V = X(o, {
+    enabled: t == null && !s
+  }), k = Z(o, { enabled: s }), x = $(o), { getReferenceProps: f, getFloatingProps: y } = ee([
+    L,
+    V,
+    k,
+    x
+  ]), D = ne(null), H = u(
+    d(() => [n.setFloating, D], [n.setFloating])
+  ), p = C && ie(e), l = p ? e.props?.ref : null, m = u(
     d(
-      () => [s.setReference, ...l ? [l] : []],
-      [s.setReference, l]
+      () => [n.setReference, ...l ? [l] : []],
+      [n.setReference, l]
     )
-  ), y = !R && !P && !!a, D = f ? oe(
+  ), j = !F && (s || !N) && !!r, w = p ? le(
     e,
-    c({
+    f({
       ...e.props,
-      ref: p,
-      className: g(
+      ref: m,
+      className: I(
         e.props.className,
-        r
+        a
       ) || void 0
     })
-  ) : /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ i(
     "span",
     {
-      ref: p,
-      ...c(),
-      className: r ?? "text-start",
+      ref: m,
+      ...f(),
+      className: a ?? "text-start",
       children: e
     }
   );
-  return /* @__PURE__ */ j(w, { children: [
-    D,
-    i && y && /* @__PURE__ */ n(W, { id: "interactive-tooltip-portal", children: /* @__PURE__ */ n(
-      X,
+  return /* @__PURE__ */ U(G, { children: [
+    w,
+    c && j && /* @__PURE__ */ i(oe, { id: "interactive-tooltip-portal", children: /* @__PURE__ */ i(
+      te,
       {
         context: o,
         modal: !1,
         initialFocus: -1,
         returnFocus: !1,
         order: ["reference", "content"],
-        children: /* @__PURE__ */ n(
+        children: /* @__PURE__ */ i(
           "div",
           {
-            ref: x,
+            ref: H,
             "data-placement": o.placement,
-            style: S,
-            ...V(),
-            className: g(
-              re,
-              C,
-              E,
-              ie.interactiveTooltip
+            style: b,
+            ...y(),
+            className: I(
+              me,
+              O,
+              P,
+              ge.interactiveTooltip
             ),
-            children: a
+            children: r
           }
         )
       }
@@ -102,5 +106,5 @@ const Re = ({
   ] });
 };
 export {
-  Re as InteractiveTooltip
+  Ee as InteractiveTooltip
 };

package/dist/components/New/Slider/Slider.js

@@ -1,54 +1,66 @@
-import { jsxs as n, jsx as e, Fragment as k } from "react/jsx-runtime";
-import { useId as Z, useCallback as q } from "react";
-import { mergeClasses as a } from "../../../utils/merge-classes.js";
+import { jsxs as n, jsx as e, Fragment as j } from "react/jsx-runtime";
+import { useId as Y, useState as P, useCallback as b } from "react";
+import { ElementSize as ee } from "../../../types/size.js";
+import { mergeClasses as s } from "../../../utils/merge-classes.js";
 import { resolveAccessibleName as D } from "../../../utils/accessible-name.js";
-import { ErrorText as J, CaptionText as K } from "../CaptionText/CaptionText.js";
-import { Label as O } from "../Label/Label.js";
-import { getTickPercents as Q } from "./utils.js";
-const R = 12, W = (t) => (t.toString().split(".")[1] ?? "").length, F = (t) => `calc(${t}% + ${(0.5 - t / 100) * R}px)`, X = (t, r) => t && r ? "grid-cols-[auto_minmax(0,1fr)_auto]" : t ? "grid-cols-[auto_minmax(0,1fr)]" : r ? "grid-cols-[minmax(0,1fr)_auto]" : "grid-cols-[minmax(0,1fr)]", le = ({
-  id: t,
-  value: r,
-  min: m = 0,
-  max: g = 1,
-  step: h = 0.1,
-  disabled: i,
-  labelProps: s,
-  labels: l,
-  formatValue: x,
-  showValue: v = !1,
-  showTooltip: S = !1,
-  showTicks: j = !1,
-  leftContent: N,
-  rightContent: y,
-  caption: b,
-  error: c,
-  onChange: w,
-  containerClassName: z,
-  trackClassName: B,
-  fillClassName: E,
-  className: L,
-  ...I
+import { ErrorText as te, CaptionText as ne } from "../CaptionText/CaptionText.js";
+import { Label as re } from "../Label/Label.js";
+import { NumberInput as le } from "../NumberInput/NumberInput.js";
+import { getTickPercents as ae, getStepPrecision as ie, snapToStep as se } from "./utils.js";
+const oe = 12, L = (r) => `calc(${r}% + ${(0.5 - r / 100) * oe}px)`, ce = (r, t) => r && t ? "grid-cols-[auto_minmax(0,1fr)_auto]" : r ? "grid-cols-[auto_minmax(0,1fr)]" : t ? "grid-cols-[minmax(0,1fr)_auto]" : "grid-cols-[minmax(0,1fr)]", Ne = ({
+  id: r,
+  value: t,
+  min: o = 0,
+  max: m = 1,
+  step: c = 0.1,
+  disabled: l,
+  labelProps: d,
+  labels: a,
+  formatValue: p,
+  showValue: y = !1,
+  showTooltip: A = !1,
+  showTicks: G = !1,
+  leftContent: I,
+  rightContent: S,
+  showValueInput: w = !1,
+  valueInputAriaLabel: H,
+  caption: C,
+  error: u,
+  onChange: f,
+  containerClassName: U,
+  trackClassName: V,
+  fillClassName: Z,
+  className: q,
+  ...T
 }) => {
-  const A = Z(), o = t ?? A, C = b && !c ? `${o}-caption` : void 0, T = c ? `${o}-error` : void 0, f = g - m, G = f > 0 ? Math.min(100, Math.max(0, (r - m) / f * 100)) : 0, _ = F(G), H = j && !i ? Q(f, h) : [], M = S && !i, u = N != null, $ = y != null, p = x ? x(r) : r.toFixed(W(h)), U = q(
-    (d) => {
-      w?.(Number(d.target.value));
+  const J = Y(), h = r ?? J, F = C && !u ? `${h}-caption` : void 0, _ = u ? `${h}-error` : void 0, x = m - o, K = x > 0 ? Math.min(100, Math.max(0, (t - o) / x * 100)) : 0, z = L(K), O = G && !l ? ae(x, c) : [], B = A && !l, g = I != null, M = w || S != null, $ = ie(c), [Q, k] = P(null), v = p ? p(t) : t.toFixed($), R = b(
+    (i) => {
+      f?.(Number(i.target.value));
     },
-    [w]
-  );
-  return /* @__PURE__ */ n("div", { className: a("flex flex-col gap-2", z), children: [
-    (s || v) && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
-      s && /* @__PURE__ */ e(O, { ...s, htmlFor: o }),
-      v && // The input already reports its value to assistive tech, so this is
+    [f]
+  ), W = b(
+    (i) => {
+      const N = i == null ? "" : String(i);
+      k(N);
+      const E = Number(N);
+      N !== "" && Number.isFinite(E) && f?.(se(E, o, m, c));
+    },
+    [m, o, f, c]
+  ), X = b(() => k(null), []);
+  return /* @__PURE__ */ n("div", { className: s("flex flex-col gap-2", U), children: [
+    (d || y) && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+      d && /* @__PURE__ */ e(re, { ...d, htmlFor: h }),
+      y && // The input already reports its value to assistive tech, so this is
       // a visual echo rather than a second announcement.
       /* @__PURE__ */ e(
         "span",
         {
           "aria-hidden": "true",
-          className: a(
+          className: s(
             "dial-small-text ml-auto",
-            i ? "text-control-disable-primary" : "text-primary"
+            l ? "text-control-disable-primary" : "text-primary"
           ),
-          children: p
+          children: v
         }
       )
     ] }),
@@ -56,55 +68,55 @@ const R = 12, W = (t) => (t.toString().split(".")[1] ?? "").length, F = (t) => `
       /* @__PURE__ */ n(
         "div",
         {
-          className: a(
+          className: s(
             "grid items-center gap-x-3 gap-y-1",
-            X(u, $),
+            ce(g, M),
             // Room for the value bubble, which hangs above the track row.
-            M && "mt-7"
+            B && "mt-7"
           ),
           children: [
-            u && /* @__PURE__ */ e("div", { className: "flex items-center", children: N }),
+            g && /* @__PURE__ */ e("div", { className: "flex items-center", children: I }),
             /* @__PURE__ */ n("div", { className: "relative flex h-6 items-center", children: [
               /* @__PURE__ */ e(
                 "div",
                 {
-                  className: a(
+                  className: s(
                     "pointer-events-none absolute inset-x-0 h-1 rounded-full",
-                    i ? "bg-control-disable-primary" : "bg-control-accent-muted",
-                    B
+                    l ? "bg-control-disable-primary" : "bg-control-accent-muted",
+                    V
                   )
                 }
               ),
-              H.map((d) => /* @__PURE__ */ e(
+              O.map((i) => /* @__PURE__ */ e(
                 "span",
                 {
                   "aria-hidden": "true",
-                  className: "pointer-events-none absolute size-0.5 -translate-x-1/2 rounded-full bg-control-neutral-default",
-                  style: { left: F(d) }
+                  className: "pointer-events-none absolute size-0.5 -translate-x-1/2 rounded-full border border-accent-focus",
+                  style: { left: L(i) }
                 },
-                d
+                i
               )),
               /* @__PURE__ */ e(
                 "div",
                 {
-                  className: a(
+                  className: s(
                     "pointer-events-none absolute left-0 h-1 rounded-full",
-                    i ? "bg-control-disable-secondary" : "bg-control-accent",
-                    E
+                    l ? "bg-control-disable-secondary" : "bg-control-accent",
+                    Z
                   ),
-                  style: { width: _ }
+                  style: { width: z }
                 }
               ),
-              M && // A visual echo like `showValue`: the input already announces
+              B && // A visual echo like `showValue`: the input already announces
               // its value, so the bubble stays out of the accessibility tree.
               /* @__PURE__ */ n(
                 "span",
                 {
                   "aria-hidden": "true",
                   className: "pointer-events-none absolute bottom-full mb-0.5 flex -translate-x-1/2 flex-col items-center",
-                  style: { left: _ },
+                  style: { left: z },
                   children: [
-                    /* @__PURE__ */ e("span", { className: "whitespace-nowrap rounded-md bg-control-inverted px-2 py-0.5 dial-small-text text-control-inverted shadow-xs", children: p }),
+                    /* @__PURE__ */ e("span", { className: "whitespace-nowrap rounded-md bg-control-inverted px-2 py-0.5 dial-small-text text-control-inverted shadow-xs", children: v }),
                     /* @__PURE__ */ e(
                       "svg",
                       {
@@ -121,53 +133,70 @@ const R = 12, W = (t) => (t.toString().split(".")[1] ?? "").length, F = (t) => `
               /* @__PURE__ */ e(
                 "input",
                 {
-                  ...I,
+                  ...T,
                   type: "range",
-                  id: o,
-                  value: r,
-                  min: m,
-                  max: g,
-                  step: h,
-                  disabled: i,
-                  onChange: U,
+                  id: h,
+                  value: t,
+                  min: o,
+                  max: m,
+                  step: c,
+                  disabled: l,
+                  onChange: R,
                   "aria-label": D(
-                    typeof s?.label != "string" ? I["aria-label"] : void 0
+                    typeof d?.label != "string" ? T["aria-label"] : void 0
                   ),
-                  "aria-valuetext": x ? p : void 0,
-                  "aria-describedby": T ?? C,
-                  className: a(
+                  "aria-valuetext": p ? v : void 0,
+                  "aria-describedby": _ ?? F,
+                  className: s(
                     "dial-kit-slider absolute inset-0 h-full w-full",
-                    L
+                    q
                   )
                 }
               )
             ] }),
-            $ && /* @__PURE__ */ e("div", { className: "flex items-center", children: y }),
-            l && /* @__PURE__ */ e(
+            M && /* @__PURE__ */ e("div", { className: "flex items-center", children: w ? /* @__PURE__ */ e(
+              le,
+              {
+                "aria-label": D(
+                  H ?? (typeof d?.label == "string" ? d.label : void 0)
+                ),
+                value: Q ?? t.toFixed($),
+                min: o,
+                max: m,
+                step: c,
+                disabled: l,
+                size: ee.Small,
+                containerClassName: "w-12",
+                className: "text-center",
+                onChange: W,
+                onBlur: X
+              }
+            ) : S }),
+            a && /* @__PURE__ */ e(
               "div",
               {
-                className: a(
+                className: s(
                   "dial-tiny-text flex text-secondary",
-                  u && "col-start-2"
+                  g && "col-start-2"
                 ),
-                children: l.length === 3 ? /* @__PURE__ */ n(k, { children: [
-                  /* @__PURE__ */ e("span", { children: l[0] }),
-                  /* @__PURE__ */ e("span", { className: "flex-1 text-center", children: l[1] }),
-                  /* @__PURE__ */ e("span", { children: l[2] })
-                ] }) : /* @__PURE__ */ n(k, { children: [
-                  /* @__PURE__ */ e("span", { children: l[0] }),
-                  /* @__PURE__ */ e("span", { className: "ml-auto", children: l[1] })
+                children: a.length === 3 ? /* @__PURE__ */ n(j, { children: [
+                  /* @__PURE__ */ e("span", { children: a[0] }),
+                  /* @__PURE__ */ e("span", { className: "flex-1 text-center", children: a[1] }),
+                  /* @__PURE__ */ e("span", { children: a[2] })
+                ] }) : /* @__PURE__ */ n(j, { children: [
+                  /* @__PURE__ */ e("span", { children: a[0] }),
+                  /* @__PURE__ */ e("span", { className: "ml-auto", children: a[1] })
                 ] })
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ e(J, { id: T, text: c }),
-      !c && /* @__PURE__ */ e(K, { id: C, text: b })
+      /* @__PURE__ */ e(te, { id: _, text: u }),
+      !u && /* @__PURE__ */ e(ne, { id: F, text: C })
     ] })
   ] });
 };
 export {
-  le as Slider
+  Ne as Slider
 };

package/dist/components/New/Slider/utils.js

@@ -1,12 +1,20 @@
-const e = (r, t) => {
-  if (r <= 0 || t <= 0)
+const u = (t, n) => {
+  if (t <= 0 || n <= 0)
     return [];
-  const o = Math.floor(r / t + 1e-9);
+  const r = Math.floor(t / n + 1e-9);
   return Array.from(
-    { length: o + 1 },
-    (n, c) => c * t / r * 100
+    { length: r },
+    (o, e) => (e + 1) * n / t * 100
   );
+}, s = (t) => (t.toString().split(".")[1] ?? "").length, a = (t, n, r, o) => {
+  const e = Math.min(r, Math.max(n, t));
+  if (o <= 0)
+    return e;
+  const c = Math.round(Number(((e - n) / o).toFixed(9))), i = n + c * o;
+  return Number(Math.min(r, i).toFixed(s(o)));
 };
 export {
-  e as getTickPercents
+  s as getStepPrecision,
+  u as getTickPercents,
+  a as snapToStep
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0-dev.50",
-  "generatedAt": "2026-10-07T22:13:33.462Z",
+  "version": "0.15.0-dev.52",
+  "generatedAt": "2026-10-08T09:40:33.410Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -4159,7 +4159,7 @@
       "name": "AutocompleteTagInput",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A tag input that suggests values while typing and also accepts its own.\naliases: Autocomplete|Combobox|TagAutocomplete|ChipAutocomplete|MultiValueAutocomplete\nDesign system 2.0\n\nTyping opens a list of the `suggestions` that match the text (by label, value\nor description) and are not already tags, capped at `maxSuggestions`, with the\nfirst one highlighted. Enter or comma adds the highlighted suggestion, or the\ntyped text when nothing matches; clicking a suggestion adds it too. The arrow\nkeys move the highlight and wrap at the ends; Escape and leaving the field\nclose the list without adding what was typed. Backspace on an empty input\nremoves the last tag, and duplicate tags are ignored. Entered text is not\nvalidated — say what format is expected through `caption`.\n\nReach for  when there is nothing to suggest, and for a\nmultiple `Select` when only listed values are allowed.\n\nThe input follows the ARIA combobox pattern: it keeps focus while the list is\nopen, and the highlighted suggestion is announced through\n`aria-activedescendant`. The tags are a list named by `tagListLabel`, and each\nremove button is named after its tag.\n\nWorks controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).",
+      "description": "A tag input that suggests values while typing and also accepts its own.\naliases: Autocomplete|Combobox|TagAutocomplete|ChipAutocomplete|MultiValueAutocomplete\nDesign system 2.0\n\nTyping opens a list of the `suggestions` that match the text (by label, value\nor description) and are not already tags, capped at `maxSuggestions`, with the\nfirst one highlighted. Enter or comma adds the highlighted suggestion, or the\ntyped text when nothing matches; clicking a suggestion adds it too. The arrow\nkeys move the highlight and wrap at the ends; Escape and leaving the field\nclose the list without adding what was typed. Backspace on an empty input\nremoves the last tag, and duplicate tags are ignored. Entered text is not\nvalidated — say what format is expected through `caption`.\n\nWith `openOnFocus`, focusing or clicking the input opens the list of every\nsuggestion that is not yet a tag, uncapped by `maxSuggestions`, with nothing\nhighlighted, so Enter adds nothing the user did not choose. Picking one keeps\nthe list open for the next pick; typing filters it as usual.\n\nReach for  when there is nothing to suggest, and for a\nmultiple `Select` when only listed values are allowed.\n\nThe input follows the ARIA combobox pattern: it keeps focus while the list is\nopen, and the highlighted suggestion is announced through\n`aria-activedescendant`. The tags are a list named by `tagListLabel`, and each\nremove button is named after its tag.\n\nWorks controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).",
       "props": [
         {
           "name": "id",
@@ -4192,6 +4192,13 @@
           "defaultValue": "DEFAULT_MAX_SUGGESTIONS",
           "description": "How many matching suggestions the list shows at most."
         },
+        {
+          "name": "openOnFocus",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Opens the full list of suggestions that are not yet tags on focus or click, and keeps it open after a pick."
+        },
         {
           "name": "size",
           "type": "ElementSize",
@@ -4415,6 +4422,19 @@
           "required": false,
           "description": "Content after the track, vertically centred on it"
         },
+        {
+          "name": "showValueInput",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Renders a compact (24px), synced `NumberInput` after the track (clamped to `min`/`max`, snapped to `step`); replaces `rightContent`"
+        },
+        {
+          "name": "valueInputAriaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name of the value input; defaults to a string `labelProps.label`"
+        },
         {
           "name": "caption",
           "type": "string",
@@ -4555,7 +4575,7 @@
       "name": "InteractiveTooltip",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A hover panel that, unlike , can hold its own interactive\ncontent.\naliases: HoverCard|InfoPopover\nDesign system 2.0\n\nOpens next to the trigger on hover or focus, the way a tooltip does, but\nstays open while the pointer moves into the panel so its content — links,\nbuttons, anything — can be hovered and clicked. It carries no `role`, since\nARIA's `tooltip` role forbids focusable content and this is meant to hold\nsome; a panel with meaningfully interactive content should still be\nreachable without a mouse (Tab from the trigger reaches it), but a purely\ndecorative one is fine to leave out of the tab order entirely.\n\nRenders nothing on a mobile screen, where there is no hover to reveal it —\nso, as with , a control must never depend on this panel alone\nto be understood or operated.",
+      "description": "A hover panel that, unlike , can hold its own interactive\ncontent.\naliases: HoverCard|InfoPopover\nDesign system 2.0\n\nOpens next to the trigger on hover or focus, the way a tooltip does, but\nstays open while the pointer moves into the panel so its content — links,\nbuttons, anything — can be hovered and clicked. It carries no `role`, since\nARIA's `tooltip` role forbids focusable content and this is meant to hold\nsome; a panel with meaningfully interactive content should still be\nreachable without a mouse (Tab from the trigger reaches it), but a purely\ndecorative one is fine to leave out of the tab order entirely.\n\nRenders nothing on a mobile screen, where there is no hover to reveal it —\nso, as with , a control must never depend on this panel alone\nto be understood or operated. A trigger whose only job is to reveal the\npanel, such as an info chip, sets `trigger={InteractiveTooltipTrigger.Click}`\ninstead: the panel then opens on click or tap, works on every screen size,\nand no longer reacts to hover or focus. Do not use it on a trigger that has\nan action of its own, since the same tap would run both.",
       "props": [
         {
           "name": "content",
@@ -4597,6 +4617,12 @@
           "defaultValue": "false",
           "description": "Whether the panel starts open (uncontrolled only)"
         },
+        {
+          "name": "trigger",
+          "type": "InteractiveTooltipTrigger",
+          "required": false,
+          "description": "What opens the panel: hover or focus, or a click or tap that keeps it open until dismissed"
+        },
         {
           "name": "open",
           "type": "boolean",
@@ -12131,6 +12157,21 @@
       ],
       "sourceFile": "components/New/Tooltip/TooltipContext.tsx"
     },
+    {
+      "name": "InteractiveTooltipTrigger",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Hover",
+          "value": "'hover'"
+        },
+        {
+          "name": "Click",
+          "value": "'click'"
+        }
+      ],
+      "sourceFile": "types/tooltip.ts"
+    },
     {
       "name": "TooltipPlacement",
       "kind": "enum",