@bitrise/bitkit-v2 0.3.462 → 0.3.463

package/dist/components/BitkitTooltip/BitkitTooltip.js

@@ -1,37 +1,29 @@
 import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
-import { rem } from "../../theme/themeUtils.js";
-import BitkitColorButton from "../BitkitColorButton/BitkitColorButton.js";
 import { Box } from "@chakra-ui/react/box";
 import { isValidElement, useContext, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@chakra-ui/react/portal";
 import { Tooltip } from "@chakra-ui/react/tooltip";
-import { Link } from "@chakra-ui/react/link";
 //#region lib/components/BitkitTooltip/BitkitTooltip.tsx
 /**
-* A hover/focus tooltip anchored to its child. `text` carries the message, `icon` appends a glyph
-* after it, and `learnMoreUrl`/`button` add a link and an action.
-*
-* Setting either of those two makes the tooltip *interactive*: it gains roomier padding and stays
-* open while the pointer travels into it, so the link and the button can actually be reached.
+* A hover/focus tooltip anchored to its child: `text` carries the message and `icon` appends a
+* glyph after it. Text only — a tooltip closes when focus leaves its trigger and ignores touch, so a
+* link or a button inside one couldn't be reached. For those use `BitkitToggletip`, which looks the
+* same and opens on click.
 *
 * The content renders in a portal, so it escapes any ancestor that traps stacking (`isolation`,
 * `transform`, a `z-index`ed positioned box) or clips overflow. Dialogs turn that off through
-* `BitkitPortalContext` so an interactive tooltip stays inside the focus trap; `disablePortal` is
-* the manual override.
+* `BitkitPortalContext`; `disablePortal` is the manual override.
 */
-var BitkitTooltip = ({ button, children, closeOnClick, disablePortal, disabled, icon: Icon, learnMoreTarget, learnMoreUrl, onOpenChange, open, openDelay, placement = "top", text, wrapTrigger }) => {
+var BitkitTooltip = ({ children, closeOnClick, disablePortal, disabled, icon: Icon, onOpenChange, open, openDelay, placement = "top", text, wrapTrigger }) => {
 	const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
-	const isInteractive = !!learnMoreUrl || !!button;
 	const triggerRef = useRef(null);
 	return /* @__PURE__ */ jsxs(Tooltip.Root, {
 		closeOnClick,
 		disabled,
-		interactive: isInteractive || void 0,
 		onOpenChange,
 		open,
 		openDelay,
-		paddingSize: isInteractive ? "lg" : void 0,
 		positioning: {
 			getAnchorElement: () => triggerRef.current,
 			placement,
@@ -60,37 +52,14 @@ var BitkitTooltip = ({ button, children, closeOnClick, disablePortal, disabled,
 			}) : children
 		}), /* @__PURE__ */ jsx(Portal, {
 			disabled: disablePortal || disablePortalFromContext,
-			children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsxs(Tooltip.Content, {
-				css: isInteractive && { minWidth: rem(240) },
-				children: [
-					/* @__PURE__ */ jsx(Tooltip.Arrow, { children: /* @__PURE__ */ jsx(Tooltip.ArrowTip, {}) }),
-					/* @__PURE__ */ jsxs(Box, {
-						display: "flex",
-						gap: "8",
-						children: [text, Icon && /* @__PURE__ */ jsx(Icon, {
-							flexShrink: "0",
-							size: "16"
-						})]
-					}),
-					isInteractive && /* @__PURE__ */ jsxs(Box, {
-						alignItems: "center",
-						display: "flex",
-						gap: "16",
-						marginBlockStart: "16",
-						children: [learnMoreUrl && /* @__PURE__ */ jsx(Link, {
-							color: "color/purple/highlight",
-							href: learnMoreUrl,
-							rel: learnMoreTarget === "_blank" ? "noopener noreferrer" : void 0,
-							target: learnMoreTarget,
-							children: "Learn more"
-						}), button && /* @__PURE__ */ jsx(BitkitColorButton, {
-							colorVariant: "white",
-							marginInlineStart: "auto",
-							...button
-						})]
-					})
-				]
-			}) })
+			children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsxs(Tooltip.Content, { children: [/* @__PURE__ */ jsx(Tooltip.Arrow, { children: /* @__PURE__ */ jsx(Tooltip.ArrowTip, {}) }), /* @__PURE__ */ jsxs(Box, {
+				display: "flex",
+				gap: "8",
+				children: [text, Icon && /* @__PURE__ */ jsx(Icon, {
+					flexShrink: "0",
+					size: "16"
+				})]
+			})] }) })
 		})]
 	});
 };

package/dist/components/BitkitTooltip/BitkitTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitTooltip.js","names":[],"sources":["../../../lib/components/BitkitTooltip/BitkitTooltip.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { isValidElement, type ReactNode, type Ref, useContext, useRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport BitkitColorButton, { type BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';\n\nexport type BitkitTooltipProps = {\n  /**\n   * Action button rendered at the end of the tooltip. Setting it makes the tooltip interactive, so\n   * the pointer can move into the tooltip without dismissing it. Defaults to the `white` colour\n   * variant, the one that reads on the tooltip's dark background.\n   */\n  button?: BitkitColorButtonProps;\n  /**\n   * The trigger the tooltip is anchored to. Rendered via `asChild`, so it must accept a ref —\n   * unless `wrapTrigger` puts a wrapper in between.\n   */\n  children: ReactNode;\n  /** Dismiss the tooltip when the trigger is clicked. */\n  closeOnClick?: TooltipRootProps['closeOnClick'];\n  /**\n   * Render the tooltip inline instead of in a portal. Only needed when it must stay inside its\n   * parent's DOM subtree — a dialog already sets this for you.\n   */\n  disablePortal?: boolean;\n  /** Render the trigger without a tooltip — for hints that only apply in some states. */\n  disabled?: TooltipRootProps['disabled'];\n  /**\n   * Icon rendered after `text`, at size 16. Use it for the affordance the tooltip describes — an\n   * `IconArrowNortheast` when the trigger opens something in a new tab, for instance.\n   */\n  icon?: BitkitIconComponent;\n  /** Target for the \"Learn more\" link. `_blank` also sets `rel=\"noopener noreferrer\"`. */\n  learnMoreTarget?: HTMLAnchorElement['target'];\n  /**\n   * Adds a \"Learn more\" link pointing here. Setting it makes the tooltip interactive, so the\n   * pointer can move into the tooltip to reach the link.\n   */\n  learnMoreUrl?: string;\n  /** Called when the tooltip opens or closes, including from hover and focus. */\n  onOpenChange?: TooltipRootProps['onOpenChange'];\n  /** Controlled open state. Leave unset to let hover and focus drive it. */\n  open?: TooltipRootProps['open'];\n  /** Delay in ms before an uncontrolled tooltip opens on hover. */\n  openDelay?: TooltipRootProps['openDelay'];\n  /** Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. */\n  placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n  /** The tooltip's text. Plain string only — use `icon`, `learnMoreUrl` and `button` for the rest. */\n  text: string;\n  /**\n   * Render the trigger inside a focusable wrapper instead of on the trigger itself. Only for triggers\n   * that cannot take focus — on a focusable one this adds a second, redundant tab stop for the same\n   * control. A disabled `<button>` dispatches no pointer events and is out of the tab order, so\n   * without a wrapper the tooltip never opens — in the one state whose explanation the user actually\n   * needs.\n   *\n   * Chakra v2's `Tooltip` had this built in as `shouldWrapChildren`, rendering a\n   * `<span display=\"inline-block\" tabIndex={0}>` that carried the trigger props. Ark's tooltip has no\n   * equivalent, and Chakra's own v2->v3 codemod replaces it with a bare `<span>` — which restores\n   * hover but silently drops the tab stop, so the tooltip stays unreachable by keyboard. This prop is\n   * that escape hatch, `tabIndex` included.\n   *\n   * The wrapper is a plain focusable span, so focusing it announces the trigger's label and the\n   * tooltip text, not the trigger's own state — a disabled button inside is not re-announced as\n   * disabled. Conveying that would mean keeping the trigger focusable with `aria-disabled` instead\n   * of the native attribute, which is a change to what `disabled` means, not a tooltip concern.\n   */\n  wrapTrigger?: boolean;\n};\n\n/**\n * A hover/focus tooltip anchored to its child. `text` carries the message, `icon` appends a glyph\n * after it, and `learnMoreUrl`/`button` add a link and an action.\n *\n * Setting either of those two makes the tooltip *interactive*: it gains roomier padding and stays\n * open while the pointer travels into it, so the link and the button can actually be reached.\n *\n * The content renders in a portal, so it escapes any ancestor that traps stacking (`isolation`,\n * `transform`, a `z-index`ed positioned box) or clips overflow. Dialogs turn that off through\n * `BitkitPortalContext` so an interactive tooltip stays inside the focus trap; `disablePortal` is\n * the manual override.\n */\nconst BitkitTooltip = ({\n  button,\n  children,\n  closeOnClick,\n  disablePortal,\n  disabled,\n  icon: Icon,\n  learnMoreTarget,\n  learnMoreUrl,\n  onOpenChange,\n  open,\n  openDelay,\n  placement = 'top',\n  text,\n  wrapTrigger,\n}: BitkitTooltipProps) => {\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n  const isInteractive = !!learnMoreUrl || !!button;\n\n  // Anchor positioning to the trigger node by ref rather than relying on Zag's\n  // id/data-scope lookup. When the trigger is also wrapped by another `asChild`\n  // trigger (e.g. Menu.Trigger), the outer trigger's id and data-scope/data-part\n  // overwrite ours on the shared node, so `getTriggerEl()` can't find it and the\n  // tooltip loses its anchor. `getAnchorElement` takes precedence over the id\n  // lookup, so this is safe in the standalone case too.\n  const triggerRef = useRef<HTMLElement>(null);\n\n  return (\n    <Tooltip.Root\n      closeOnClick={closeOnClick}\n      disabled={disabled}\n      interactive={isInteractive || undefined}\n      onOpenChange={onOpenChange}\n      open={open}\n      openDelay={openDelay}\n      paddingSize={isInteractive ? 'lg' : undefined}\n      positioning={{ getAnchorElement: () => triggerRef.current, placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n    >\n      <Tooltip.Trigger ref={triggerRef as Ref<HTMLButtonElement>} asChild>\n        {wrapTrigger || !isValidElement(children) ? (\n          // inline-flex so the wrapper shrink-wraps the trigger: a plain inline span adds descender\n          // space below it and shifts the alignment of whatever sits next to it.\n          <Box\n            as=\"span\"\n            display=\"inline-flex\"\n            tabIndex={0}\n            css={{\n              // The wrapper owns the tab stop, but the focus ring belongs on the trigger: an outline\n              // follows the border-radius of the element it is drawn on, and the wrapper has none —\n              // so leaving it here squares off a pill or a round trigger.\n              _focusVisible: {\n                outline: 'none',\n                '& > *': {\n                  outlineColor: 'var(--focus-ring-color)',\n                  outlineOffset: 'var(--focus-ring-offset, 2px)',\n                  outlineStyle: 'var(--focus-ring-style, solid)',\n                  outlineWidth: 'var(--focus-ring-width, 2px)',\n                },\n              },\n            }}\n          >\n            {children}\n          </Box>\n        ) : (\n          children\n        )}\n      </Tooltip.Trigger>\n      <Portal disabled={disablePortal || disablePortalFromContext}>\n        <Tooltip.Positioner>\n          <Tooltip.Content css={isInteractive && { minWidth: rem(240) }}>\n            <Tooltip.Arrow>\n              <Tooltip.ArrowTip />\n            </Tooltip.Arrow>\n            <Box display=\"flex\" gap=\"8\">\n              {text}\n              {Icon && <Icon flexShrink=\"0\" size=\"16\" />}\n            </Box>\n            {isInteractive && (\n              <Box alignItems=\"center\" display=\"flex\" gap=\"16\" marginBlockStart=\"16\">\n                {learnMoreUrl && (\n                  <Link\n                    color=\"color/purple/highlight\"\n                    href={learnMoreUrl}\n                    rel={learnMoreTarget === '_blank' ? 'noopener noreferrer' : undefined}\n                    target={learnMoreTarget}\n                  >\n                    Learn more\n                  </Link>\n                )}\n                {button && <BitkitColorButton colorVariant=\"white\" marginInlineStart=\"auto\" {...button} />}\n              </Box>\n            )}\n          </Tooltip.Content>\n        </Tooltip.Positioner>\n      </Portal>\n    </Tooltip.Root>\n  );\n};\n\nBitkitTooltip.displayName = 'BitkitTooltip';\n\nexport default BitkitTooltip;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuFA,IAAM,iBAAiB,EACrB,QACA,UACA,cACA,eACA,UACA,MAAM,MACN,iBACA,cACA,cACA,MACA,WACA,YAAY,OACZ,MACA,kBACwB;CACxB,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAClF,MAAM,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CAAC;CAQ1C,MAAM,aAAa,OAAoB,IAAI;CAE3C,OACE,qBAAC,QAAQ,MAAT;EACgB;EACJ;EACV,aAAa,iBAAiB,KAAA;EAChB;EACR;EACK;EACX,aAAa,gBAAgB,OAAO,KAAA;EACpC,aAAa;GAAE,wBAAwB,WAAW;GAAS;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAR9G,UAAA,CAUE,oBAAC,QAAQ,SAAT;GAAiB,KAAK;GAAsC,SAAA;GACzD,UAAA,eAAe,CAAC,eAAe,QAAQ,IAGtC,oBAAC,KAAD;IACE,IAAG;IACH,SAAQ;IACR,UAAU;IACV,KAAK,EAIH,eAAe;KACb,SAAS;KACT,SAAS;MACP,cAAc;MACd,eAAe;MACf,cAAc;MACd,cAAc;KAChB;IACF,EACF;IAEC;GACE,CAAA,IAEL;EAEa,CAAA,GACjB,oBAAC,QAAD;GAAQ,UAAU,iBAAiB;GACjC,UAAA,oBAAC,QAAQ,YAAT,EAAA,UACE,qBAAC,QAAQ,SAAT;IAAiB,KAAK,iBAAiB,EAAE,UAAU,IAAI,GAAG,EAAE;IAA5D,UAAA;KACE,oBAAC,QAAQ,OAAT,EAAA,UACE,oBAAC,QAAQ,UAAT,CAAmB,CAAA,EACN,CAAA;KACf,qBAAC,KAAD;MAAK,SAAQ;MAAO,KAAI;MAAxB,UAAA,CACG,MACA,QAAQ,oBAAC,MAAD;OAAM,YAAW;OAAI,MAAK;MAAM,CAAA,CACtC;;KACJ,iBACC,qBAAC,KAAD;MAAK,YAAW;MAAS,SAAQ;MAAO,KAAI;MAAK,kBAAiB;MAAlE,UAAA,CACG,gBACC,oBAAC,MAAD;OACE,OAAM;OACN,MAAM;OACN,KAAK,oBAAoB,WAAW,wBAAwB,KAAA;OAC5D,QAAQ;OACT,UAAA;MAEK,CAAA,GAEP,UAAU,oBAAC,mBAAD;OAAmB,cAAa;OAAQ,mBAAkB;OAAO,GAAI;MAAS,CAAA,CACtF;;IAEQ;GACC,CAAA,EAAA,CAAA;EACd,CAAA,CACI;;AAElB;AAEA,cAAc,cAAc"}
+{"version":3,"file":"BitkitTooltip.js","names":[],"sources":["../../../lib/components/BitkitTooltip/BitkitTooltip.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { isValidElement, type ReactNode, type Ref, useContext, useRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\n\nexport type BitkitTooltipProps = {\n  /**\n   * The trigger the tooltip is anchored to. Rendered via `asChild`, so it must accept a ref —\n   * unless `wrapTrigger` puts a wrapper in between.\n   */\n  children: ReactNode;\n  /** Dismiss the tooltip when the trigger is clicked. */\n  closeOnClick?: TooltipRootProps['closeOnClick'];\n  /**\n   * Render the tooltip inline instead of in a portal. Only needed when it must stay inside its\n   * parent's DOM subtree — a dialog already sets this for you.\n   */\n  disablePortal?: boolean;\n  /** Render the trigger without a tooltip — for hints that only apply in some states. */\n  disabled?: TooltipRootProps['disabled'];\n  /**\n   * Icon rendered after `text`, at size 16. Use it for the affordance the tooltip describes — an\n   * `IconArrowNortheast` when the trigger opens something in a new tab, for instance.\n   */\n  icon?: BitkitIconComponent;\n  /** Called when the tooltip opens or closes, including from hover and focus. */\n  onOpenChange?: TooltipRootProps['onOpenChange'];\n  /** Controlled open state. Leave unset to let hover and focus drive it. */\n  open?: TooltipRootProps['open'];\n  /** Delay in ms before an uncontrolled tooltip opens on hover. */\n  openDelay?: TooltipRootProps['openDelay'];\n  /** Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. */\n  placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n  /** The tooltip's text. Plain string only — use `icon` for a glyph after it. */\n  text: string;\n  /**\n   * Render the trigger inside a focusable wrapper instead of on the trigger itself. Only for triggers\n   * that cannot take focus — on a focusable one this adds a second, redundant tab stop for the same\n   * control. A disabled `<button>` dispatches no pointer events and is out of the tab order, so\n   * without a wrapper the tooltip never opens — in the one state whose explanation the user actually\n   * needs.\n   *\n   * Chakra v2's `Tooltip` had this built in as `shouldWrapChildren`, rendering a\n   * `<span display=\"inline-block\" tabIndex={0}>` that carried the trigger props. Ark's tooltip has no\n   * equivalent, and Chakra's own v2->v3 codemod replaces it with a bare `<span>` — which restores\n   * hover but silently drops the tab stop, so the tooltip stays unreachable by keyboard. This prop is\n   * that escape hatch, `tabIndex` included.\n   *\n   * The wrapper is a plain focusable span, so focusing it announces the trigger's label and the\n   * tooltip text, not the trigger's own state — a disabled button inside is not re-announced as\n   * disabled. Conveying that would mean keeping the trigger focusable with `aria-disabled` instead\n   * of the native attribute, which is a change to what `disabled` means, not a tooltip concern.\n   */\n  wrapTrigger?: boolean;\n};\n\n/**\n * A hover/focus tooltip anchored to its child: `text` carries the message and `icon` appends a\n * glyph after it. Text only — a tooltip closes when focus leaves its trigger and ignores touch, so a\n * link or a button inside one couldn't be reached. For those use `BitkitToggletip`, which looks the\n * same and opens on click.\n *\n * The content renders in a portal, so it escapes any ancestor that traps stacking (`isolation`,\n * `transform`, a `z-index`ed positioned box) or clips overflow. Dialogs turn that off through\n * `BitkitPortalContext`; `disablePortal` is the manual override.\n */\nconst BitkitTooltip = ({\n  children,\n  closeOnClick,\n  disablePortal,\n  disabled,\n  icon: Icon,\n  onOpenChange,\n  open,\n  openDelay,\n  placement = 'top',\n  text,\n  wrapTrigger,\n}: BitkitTooltipProps) => {\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n  // Anchor positioning to the trigger node by ref rather than relying on Zag's\n  // id/data-scope lookup. When the trigger is also wrapped by another `asChild`\n  // trigger (e.g. Menu.Trigger), the outer trigger's id and data-scope/data-part\n  // overwrite ours on the shared node, so `getTriggerEl()` can't find it and the\n  // tooltip loses its anchor. `getAnchorElement` takes precedence over the id\n  // lookup, so this is safe in the standalone case too.\n  const triggerRef = useRef<HTMLElement>(null);\n\n  return (\n    <Tooltip.Root\n      closeOnClick={closeOnClick}\n      disabled={disabled}\n      onOpenChange={onOpenChange}\n      open={open}\n      openDelay={openDelay}\n      positioning={{ getAnchorElement: () => triggerRef.current, placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n    >\n      <Tooltip.Trigger ref={triggerRef as Ref<HTMLButtonElement>} asChild>\n        {wrapTrigger || !isValidElement(children) ? (\n          // inline-flex so the wrapper shrink-wraps the trigger: a plain inline span adds descender\n          // space below it and shifts the alignment of whatever sits next to it.\n          <Box\n            as=\"span\"\n            display=\"inline-flex\"\n            tabIndex={0}\n            css={{\n              // The wrapper owns the tab stop, but the focus ring belongs on the trigger: an outline\n              // follows the border-radius of the element it is drawn on, and the wrapper has none —\n              // so leaving it here squares off a pill or a round trigger.\n              _focusVisible: {\n                outline: 'none',\n                '& > *': {\n                  outlineColor: 'var(--focus-ring-color)',\n                  outlineOffset: 'var(--focus-ring-offset, 2px)',\n                  outlineStyle: 'var(--focus-ring-style, solid)',\n                  outlineWidth: 'var(--focus-ring-width, 2px)',\n                },\n              },\n            }}\n          >\n            {children}\n          </Box>\n        ) : (\n          children\n        )}\n      </Tooltip.Trigger>\n      <Portal disabled={disablePortal || disablePortalFromContext}>\n        <Tooltip.Positioner>\n          <Tooltip.Content>\n            <Tooltip.Arrow>\n              <Tooltip.ArrowTip />\n            </Tooltip.Arrow>\n            <Box display=\"flex\" gap=\"8\">\n              {text}\n              {Icon && <Icon flexShrink=\"0\" size=\"16\" />}\n            </Box>\n          </Tooltip.Content>\n        </Tooltip.Positioner>\n      </Portal>\n    </Tooltip.Root>\n  );\n};\n\nBitkitTooltip.displayName = 'BitkitTooltip';\n\nexport default BitkitTooltip;\n"],"mappings":";;;;;;;;;;;;;;;;;AAqEA,IAAM,iBAAiB,EACrB,UACA,cACA,eACA,UACA,MAAM,MACN,cACA,MACA,WACA,YAAY,OACZ,MACA,kBACwB;CACxB,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAQlF,MAAM,aAAa,OAAoB,IAAI;CAE3C,OACE,qBAAC,QAAQ,MAAT;EACgB;EACJ;EACI;EACR;EACK;EACX,aAAa;GAAE,wBAAwB,WAAW;GAAS;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAN9G,UAAA,CAQE,oBAAC,QAAQ,SAAT;GAAiB,KAAK;GAAsC,SAAA;GACzD,UAAA,eAAe,CAAC,eAAe,QAAQ,IAGtC,oBAAC,KAAD;IACE,IAAG;IACH,SAAQ;IACR,UAAU;IACV,KAAK,EAIH,eAAe;KACb,SAAS;KACT,SAAS;MACP,cAAc;MACd,eAAe;MACf,cAAc;MACd,cAAc;KAChB;IACF,EACF;IAEC;GACE,CAAA,IAEL;EAEa,CAAA,GACjB,oBAAC,QAAD;GAAQ,UAAU,iBAAiB;GACjC,UAAA,oBAAC,QAAQ,YAAT,EAAA,UACE,qBAAC,QAAQ,SAAT,EAAA,UAAA,CACE,oBAAC,QAAQ,OAAT,EAAA,UACE,oBAAC,QAAQ,UAAT,CAAmB,CAAA,EACN,CAAA,GACf,qBAAC,KAAD;IAAK,SAAQ;IAAO,KAAI;IAAxB,UAAA,CACG,MACA,QAAQ,oBAAC,MAAD;KAAM,YAAW;KAAI,MAAK;IAAM,CAAA,CACtC;GACU,CAAA,CAAA,EAAA,CAAA,EACC,CAAA;EACd,CAAA,CACI;;AAElB;AAEA,cAAc,cAAc"}

package/dist/components/index.d.ts

@@ -90,6 +90,7 @@ export { default as BitkitTextArea, type BitkitTextAreaProps } from './BitkitTex
 export { default as BitkitTextInput, type BitkitTextInputProps } from './BitkitTextInput/BitkitTextInput';
 export { type BitkitToastProps, default as createBitkitToast, dismissBitkitToast } from './BitkitToast/BitkitToast';
 export { default as BitkitToggleButton, type BitkitToggleButtonProps } from './BitkitToggleButton/BitkitToggleButton';
+export { default as BitkitToggletip, type BitkitToggletipProps } from './BitkitToggletip/BitkitToggletip';
 export { default as BitkitTooltip, type BitkitTooltipProps } from './BitkitTooltip/BitkitTooltip';
 export { default as BitkitTour, type BitkitTourInstance, type BitkitTourOptions, type BitkitTourProps, type BitkitTourSecondaryAction, type BitkitTourStep, useBitkitTour, } from './BitkitTour/BitkitTour';
 export { default as BitkitTreeView, type BitkitTreeViewBranchProps, type BitkitTreeViewExpandedChangeDetails, type BitkitTreeViewLeafProps, type BitkitTreeViewNodeRenderProps, type BitkitTreeViewRootProps, type BitkitTreeViewSelectionChangeDetails, createTreeCollection, } from './BitkitTreeView/BitkitTreeView';

package/dist/main.js

@@ -320,6 +320,7 @@ import BitkitField from "./components/BitkitField/BitkitField.js";
 import BitkitCombobox_default from "./components/BitkitCombobox/BitkitCombobox.js";
 import BitkitDataWidget from "./components/BitkitDataWidget/BitkitDataWidget.js";
 import BitkitDatePicker from "./components/BitkitDatePicker/BitkitDatePicker.js";
+import BitkitToggletip from "./components/BitkitToggletip/BitkitToggletip.js";
 import BitkitDefinitionTooltip from "./components/BitkitDefinitionTooltip/BitkitDefinitionTooltip.js";
 import BitkitDialog_default from "./components/BitkitDialog/BitkitDialog.js";
 import BitkitFormDialog_default from "./components/BitkitDialog/BitkitFormDialog.js";
@@ -385,4 +386,4 @@ import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeVie
 import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFile, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPin, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepsDialog };
+export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitToggletip, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFile, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPin, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepsDialog };

package/dist/theme/common/TooltipAndToggletip.common.d.ts

@@ -0,0 +1,90 @@
+/**
+ * The dark bubble BitkitTooltip and BitkitToggletip share, so a hint looks the same whether it opens
+ * on hover (a tooltip, text only) or on click (a toggletip, which can hold a link or a button).
+ */
+export declare const base: {
+    readonly positioner: {
+        readonly fontFamily: "body";
+    };
+    readonly content: {
+        readonly '--tooltip-bg': "colors.background/contrast";
+        readonly backgroundColor: "var(--tooltip-bg)";
+        readonly maxWidth: `${number}rem`;
+        readonly color: "text/on-contrast";
+        readonly boxShadow: "elevation/tooltip";
+        readonly zIndex: "tooltip";
+        readonly transformOrigin: "var(--transform-origin)";
+        readonly _open: {
+            readonly animationStyle: "scale-fade-in";
+            readonly animationDuration: "fast";
+        };
+        readonly _closed: {
+            readonly animationStyle: "scale-fade-out";
+            readonly animationDuration: "fast";
+        };
+    };
+    readonly arrow: {
+        readonly '--arrow-size': `${number}rem`;
+        readonly '--arrow-background': "var(--tooltip-bg)";
+    };
+    readonly arrowTip: {
+        readonly borderTopWidth: "1";
+        readonly borderInlineStartWidth: "1";
+        readonly borderColor: "var(--tooltip-bg)";
+    };
+};
+export declare const variants: {
+    readonly variant: {
+        readonly dark: {
+            readonly content: {
+                readonly '--tooltip-bg': "colors.background/contrast";
+                readonly color: "text/on-contrast";
+            };
+        };
+        readonly light: {
+            readonly content: {
+                readonly '--tooltip-bg': "colors.background/tertiary";
+                readonly color: "text/primary";
+            };
+        };
+    };
+    readonly paddingSize: {
+        readonly sm: {
+            readonly content: {
+                readonly paddingInline: "8";
+                readonly paddingBlock: "4";
+                readonly borderRadius: "4";
+            };
+        };
+        readonly md: {
+            readonly content: {
+                readonly paddingInline: "12";
+                readonly paddingBlock: "8";
+                readonly borderRadius: "8";
+            };
+        };
+        readonly lg: {
+            readonly content: {
+                readonly padding: "16";
+                readonly borderRadius: "8";
+            };
+        };
+    };
+    readonly textStyle: {
+        readonly 'sm/regular': {
+            readonly content: {
+                readonly textStyle: "body/sm/regular";
+            };
+        };
+        readonly 'sm/semibold': {
+            readonly content: {
+                readonly textStyle: "body/sm/semibold";
+            };
+        };
+        readonly 'md/regular': {
+            readonly content: {
+                readonly textStyle: "body/md/regular";
+            };
+        };
+    };
+};

package/dist/theme/common/TooltipAndToggletip.common.js

@@ -0,0 +1,72 @@
+import { rem } from "../themeUtils.js";
+//#region lib/theme/common/TooltipAndToggletip.common.ts
+/**
+* The dark bubble BitkitTooltip and BitkitToggletip share, so a hint looks the same whether it opens
+* on hover (a tooltip, text only) or on click (a toggletip, which can hold a link or a button).
+*/
+var base = {
+	positioner: { fontFamily: "body" },
+	content: {
+		"--tooltip-bg": "colors.background/contrast",
+		backgroundColor: "var(--tooltip-bg)",
+		maxWidth: rem(320),
+		color: "text/on-contrast",
+		boxShadow: "elevation/tooltip",
+		zIndex: "tooltip",
+		transformOrigin: "var(--transform-origin)",
+		_open: {
+			animationStyle: "scale-fade-in",
+			animationDuration: "fast"
+		},
+		_closed: {
+			animationStyle: "scale-fade-out",
+			animationDuration: "fast"
+		}
+	},
+	arrow: {
+		"--arrow-size": rem(8),
+		"--arrow-background": "var(--tooltip-bg)"
+	},
+	arrowTip: {
+		borderTopWidth: "1",
+		borderInlineStartWidth: "1",
+		borderColor: "var(--tooltip-bg)"
+	}
+};
+var variants = {
+	variant: {
+		dark: { content: {
+			"--tooltip-bg": "colors.background/contrast",
+			color: "text/on-contrast"
+		} },
+		light: { content: {
+			"--tooltip-bg": "colors.background/tertiary",
+			color: "text/primary"
+		} }
+	},
+	paddingSize: {
+		sm: { content: {
+			paddingInline: "8",
+			paddingBlock: "4",
+			borderRadius: "4"
+		} },
+		md: { content: {
+			paddingInline: "12",
+			paddingBlock: "8",
+			borderRadius: "8"
+		} },
+		lg: { content: {
+			padding: "16",
+			borderRadius: "8"
+		} }
+	},
+	textStyle: {
+		"sm/regular": { content: { textStyle: "body/sm/regular" } },
+		"sm/semibold": { content: { textStyle: "body/sm/semibold" } },
+		"md/regular": { content: { textStyle: "body/md/regular" } }
+	}
+};
+//#endregion
+export { base, variants };
+
+//# sourceMappingURL=TooltipAndToggletip.common.js.map

package/dist/theme/common/TooltipAndToggletip.common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipAndToggletip.common.js","names":[],"sources":["../../../lib/theme/common/TooltipAndToggletip.common.ts"],"sourcesContent":["import { rem } from '../themeUtils';\n\n/**\n * The dark bubble BitkitTooltip and BitkitToggletip share, so a hint looks the same whether it opens\n * on hover (a tooltip, text only) or on click (a toggletip, which can hold a link or a button).\n */\nexport const base = {\n  positioner: {\n    fontFamily: 'body',\n  },\n  content: {\n    '--tooltip-bg': 'colors.background/contrast',\n    backgroundColor: 'var(--tooltip-bg)',\n    // Without a cap a tooltip grows to the width of its text, so a long one runs to the edge of\n    // the viewport. Every component that renders a tooltip therefore has to set this, and the one\n    // that forgot -- BitkitLabelTooltip -- had no cap at all. It belongs to the tooltip, not to\n    // each caller. BitkitOverflowTooltip overrides it: it exists to show text that was truncated,\n    // so it is allowed to be wider.\n    maxWidth: rem(320),\n    color: 'text/on-contrast',\n    boxShadow: 'elevation/tooltip',\n    zIndex: 'tooltip',\n    transformOrigin: 'var(--transform-origin)',\n    _open: {\n      animationStyle: 'scale-fade-in',\n      animationDuration: 'fast',\n    },\n    _closed: {\n      animationStyle: 'scale-fade-out',\n      animationDuration: 'fast',\n    },\n  },\n  arrow: {\n    '--arrow-size': rem(8),\n    '--arrow-background': 'var(--tooltip-bg)',\n  },\n  arrowTip: {\n    borderTopWidth: '1',\n    borderInlineStartWidth: '1',\n    borderColor: 'var(--tooltip-bg)',\n  },\n} as const;\n\nexport const variants = {\n  variant: {\n    dark: {\n      content: {\n        '--tooltip-bg': 'colors.background/contrast',\n        color: 'text/on-contrast',\n      },\n    },\n    light: {\n      content: {\n        '--tooltip-bg': 'colors.background/tertiary',\n        color: 'text/primary',\n      },\n    },\n  },\n  paddingSize: {\n    sm: {\n      content: {\n        paddingInline: '8',\n        paddingBlock: '4',\n        borderRadius: '4',\n      },\n    },\n    md: {\n      content: {\n        paddingInline: '12',\n        paddingBlock: '8',\n        borderRadius: '8',\n      },\n    },\n    lg: {\n      content: {\n        padding: '16',\n        borderRadius: '8',\n      },\n    },\n  },\n  textStyle: {\n    'sm/regular': {\n      content: {\n        textStyle: 'body/sm/regular',\n      },\n    },\n    'sm/semibold': {\n      content: {\n        textStyle: 'body/sm/semibold',\n      },\n    },\n    'md/regular': {\n      content: {\n        textStyle: 'body/md/regular',\n      },\n    },\n  },\n} as const;\n"],"mappings":";;;;;;AAMA,IAAa,OAAO;CAClB,YAAY,EACV,YAAY,OACd;CACA,SAAS;EACP,gBAAgB;EAChB,iBAAiB;EAMjB,UAAU,IAAI,GAAG;EACjB,OAAO;EACP,WAAW;EACX,QAAQ;EACR,iBAAiB;EACjB,OAAO;GACL,gBAAgB;GAChB,mBAAmB;EACrB;EACA,SAAS;GACP,gBAAgB;GAChB,mBAAmB;EACrB;CACF;CACA,OAAO;EACL,gBAAgB,IAAI,CAAC;EACrB,sBAAsB;CACxB;CACA,UAAU;EACR,gBAAgB;EAChB,wBAAwB;EACxB,aAAa;CACf;AACF;AAEA,IAAa,WAAW;CACtB,SAAS;EACP,MAAM,EACJ,SAAS;GACP,gBAAgB;GAChB,OAAO;EACT,EACF;EACA,OAAO,EACL,SAAS;GACP,gBAAgB;GAChB,OAAO;EACT,EACF;CACF;CACA,aAAa;EACX,IAAI,EACF,SAAS;GACP,eAAe;GACf,cAAc;GACd,cAAc;EAChB,EACF;EACA,IAAI,EACF,SAAS;GACP,eAAe;GACf,cAAc;GACd,cAAc;EAChB,EACF;EACA,IAAI,EACF,SAAS;GACP,SAAS;GACT,cAAc;EAChB,EACF;CACF;CACA,WAAW;EACT,cAAc,EACZ,SAAS,EACP,WAAW,kBACb,EACF;EACA,eAAe,EACb,SAAS,EACP,WAAW,mBACb,EACF;EACA,cAAc,EACZ,SAAS,EACP,WAAW,kBACb,EACF;CACF;AACF"}

package/dist/theme/slot-recipes/Toggletip.recipe.d.ts

@@ -0,0 +1,60 @@
+/**
+ * BitkitToggletip: the tooltip's bubble on a popover, so it opens on click and tap and its link and
+ * button take focus. Wider and roomier than a tooltip, since it carries an action row.
+ */
+declare const toggletipSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"anchor" | "content" | "body" | "footer" | "header" | "title" | "trigger" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "indicator" | "description", {
+    readonly variant: {
+        readonly dark: {
+            readonly content: {
+                readonly '--tooltip-bg': "colors.background/contrast";
+                readonly color: "text/on-contrast";
+            };
+        };
+        readonly light: {
+            readonly content: {
+                readonly '--tooltip-bg': "colors.background/tertiary";
+                readonly color: "text/primary";
+            };
+        };
+    };
+    readonly paddingSize: {
+        readonly sm: {
+            readonly content: {
+                readonly paddingInline: "8";
+                readonly paddingBlock: "4";
+                readonly borderRadius: "4";
+            };
+        };
+        readonly md: {
+            readonly content: {
+                readonly paddingInline: "12";
+                readonly paddingBlock: "8";
+                readonly borderRadius: "8";
+            };
+        };
+        readonly lg: {
+            readonly content: {
+                readonly padding: "16";
+                readonly borderRadius: "8";
+            };
+        };
+    };
+    readonly textStyle: {
+        readonly 'sm/regular': {
+            readonly content: {
+                readonly textStyle: "body/sm/regular";
+            };
+        };
+        readonly 'sm/semibold': {
+            readonly content: {
+                readonly textStyle: "body/sm/semibold";
+            };
+        };
+        readonly 'md/regular': {
+            readonly content: {
+                readonly textStyle: "body/md/regular";
+            };
+        };
+    };
+}>;
+export default toggletipSlotRecipe;

package/dist/theme/slot-recipes/Toggletip.recipe.js

@@ -0,0 +1,31 @@
+import { rem } from "../themeUtils.js";
+import { base, variants } from "../common/TooltipAndToggletip.common.js";
+import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
+import { popoverAnatomy } from "@chakra-ui/react/anatomy";
+//#region lib/theme/slot-recipes/Toggletip.recipe.ts
+/**
+* BitkitToggletip: the tooltip's bubble on a popover, so it opens on click and tap and its link and
+* button take focus. Wider and roomier than a tooltip, since it carries an action row.
+*/
+var toggletipSlotRecipe = defineSlotRecipe({
+	className: "toggletip",
+	slots: popoverAnatomy.keys(),
+	base: {
+		...base,
+		content: {
+			...base.content,
+			minWidth: rem(240),
+			focusVisibleRing: "outside"
+		}
+	},
+	variants,
+	defaultVariants: {
+		variant: "dark",
+		paddingSize: "lg",
+		textStyle: "md/regular"
+	}
+});
+//#endregion
+export { toggletipSlotRecipe as default };
+
+//# sourceMappingURL=Toggletip.recipe.js.map

package/dist/theme/slot-recipes/Toggletip.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggletip.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Toggletip.recipe.ts"],"sourcesContent":["import { popoverAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, variants } from '../common/TooltipAndToggletip.common';\nimport { rem } from '../themeUtils';\n\n/**\n * BitkitToggletip: the tooltip's bubble on a popover, so it opens on click and tap and its link and\n * button take focus. Wider and roomier than a tooltip, since it carries an action row.\n */\nconst toggletipSlotRecipe = defineSlotRecipe({\n  className: 'toggletip',\n  slots: popoverAnatomy.keys(),\n  base: {\n    ...base,\n    content: {\n      ...base.content,\n      minWidth: rem(240),\n      // Without a link or a button the content itself takes focus; the global ring skips tabindex=\"-1\".\n      focusVisibleRing: 'outside',\n    },\n  },\n  variants,\n  defaultVariants: {\n    variant: 'dark',\n    paddingSize: 'lg',\n    textStyle: 'md/regular',\n  },\n});\n\nexport default toggletipSlotRecipe;\n"],"mappings":";;;;;;;;;AAUA,IAAM,sBAAsB,iBAAiB;CAC3C,WAAW;CACX,OAAO,eAAe,KAAK;CAC3B,MAAM;EACJ,GAAG;EACH,SAAS;GACP,GAAG,KAAK;GACR,UAAU,IAAI,GAAG;GAEjB,kBAAkB;EACpB;CACF;CACA;CACA,iBAAiB;EACf,SAAS;EACT,aAAa;EACb,WAAW;CACb;AACF,CAAC"}

package/dist/theme/slot-recipes/Tooltip.recipe.d.ts

@@ -1,54 +1,54 @@
 declare const tooltipSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", {
-    variant: {
-        dark: {
-            content: {
-                '--tooltip-bg': "colors.background/contrast";
-                color: "text/on-contrast";
+    readonly variant: {
+        readonly dark: {
+            readonly content: {
+                readonly '--tooltip-bg': "colors.background/contrast";
+                readonly color: "text/on-contrast";
             };
         };
-        light: {
-            content: {
-                '--tooltip-bg': "colors.background/tertiary";
-                color: "text/primary";
+        readonly light: {
+            readonly content: {
+                readonly '--tooltip-bg': "colors.background/tertiary";
+                readonly color: "text/primary";
             };
         };
     };
-    paddingSize: {
-        sm: {
-            content: {
-                paddingInline: "8";
-                paddingBlock: "4";
-                borderRadius: "4";
+    readonly paddingSize: {
+        readonly sm: {
+            readonly content: {
+                readonly paddingInline: "8";
+                readonly paddingBlock: "4";
+                readonly borderRadius: "4";
             };
         };
-        md: {
-            content: {
-                paddingInline: "12";
-                paddingBlock: "8";
-                borderRadius: "8";
+        readonly md: {
+            readonly content: {
+                readonly paddingInline: "12";
+                readonly paddingBlock: "8";
+                readonly borderRadius: "8";
             };
         };
-        lg: {
-            content: {
-                padding: "16";
-                borderRadius: "8";
+        readonly lg: {
+            readonly content: {
+                readonly padding: "16";
+                readonly borderRadius: "8";
             };
         };
     };
-    textStyle: {
-        'sm/regular': {
-            content: {
-                textStyle: "body/sm/regular";
+    readonly textStyle: {
+        readonly 'sm/regular': {
+            readonly content: {
+                readonly textStyle: "body/sm/regular";
             };
         };
-        'sm/semibold': {
-            content: {
-                textStyle: "body/sm/semibold";
+        readonly 'sm/semibold': {
+            readonly content: {
+                readonly textStyle: "body/sm/semibold";
             };
         };
-        'md/regular': {
-            content: {
-                textStyle: "body/md/regular";
+        readonly 'md/regular': {
+            readonly content: {
+                readonly textStyle: "body/md/regular";
             };
         };
     };

package/dist/theme/slot-recipes/Tooltip.recipe.js

@@ -1,4 +1,4 @@
-import { rem } from "../themeUtils.js";
+import { base, variants } from "../common/TooltipAndToggletip.common.js";
 import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
 import { tooltipAnatomy } from "@chakra-ui/react/anatomy";
 //#region lib/theme/slot-recipes/Tooltip.recipe.ts
@@ -6,70 +6,13 @@ var tooltipSlotRecipe = defineSlotRecipe({
 	className: "tooltip",
 	slots: tooltipAnatomy.keys(),
 	base: {
+		...base,
 		positioner: {
-			fontFamily: "body",
+			...base.positioner,
 			pointerEvents: "none"
-		},
-		content: {
-			"--tooltip-bg": "colors.background/contrast",
-			backgroundColor: "var(--tooltip-bg)",
-			maxWidth: rem(320),
-			color: "text/on-contrast",
-			boxShadow: "elevation/tooltip",
-			zIndex: "tooltip",
-			transformOrigin: "var(--transform-origin)",
-			_open: {
-				animationStyle: "scale-fade-in",
-				animationDuration: "fast"
-			},
-			_closed: {
-				animationStyle: "scale-fade-out",
-				animationDuration: "fast"
-			}
-		},
-		arrow: {
-			"--arrow-size": rem(8),
-			"--arrow-background": "var(--tooltip-bg)"
-		},
-		arrowTip: {
-			borderTopWidth: "1",
-			borderInlineStartWidth: "1",
-			borderColor: "var(--tooltip-bg)"
-		}
-	},
-	variants: {
-		variant: {
-			dark: { content: {
-				"--tooltip-bg": "colors.background/contrast",
-				color: "text/on-contrast"
-			} },
-			light: { content: {
-				"--tooltip-bg": "colors.background/tertiary",
-				color: "text/primary"
-			} }
-		},
-		paddingSize: {
-			sm: { content: {
-				paddingInline: "8",
-				paddingBlock: "4",
-				borderRadius: "4"
-			} },
-			md: { content: {
-				paddingInline: "12",
-				paddingBlock: "8",
-				borderRadius: "8"
-			} },
-			lg: { content: {
-				padding: "16",
-				borderRadius: "8"
-			} }
-		},
-		textStyle: {
-			"sm/regular": { content: { textStyle: "body/sm/regular" } },
-			"sm/semibold": { content: { textStyle: "body/sm/semibold" } },
-			"md/regular": { content: { textStyle: "body/md/regular" } }
 		}
 	},
+	variants,
 	defaultVariants: {
 		variant: "dark",
 		paddingSize: "md",

package/dist/theme/slot-recipes/Tooltip.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Tooltip.recipe.ts"],"sourcesContent":["import { tooltipAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst tooltipSlotRecipe = defineSlotRecipe({\n  className: 'tooltip',\n  slots: tooltipAnatomy.keys(),\n  base: {\n    positioner: {\n      fontFamily: 'body',\n      pointerEvents: 'none',\n    },\n    content: {\n      '--tooltip-bg': 'colors.background/contrast',\n      backgroundColor: 'var(--tooltip-bg)',\n      // Without a cap a tooltip grows to the width of its text, so a long one runs to the edge of\n      // the viewport. Every component that renders a tooltip therefore has to set this, and the one\n      // that forgot -- BitkitLabelTooltip -- had no cap at all. It belongs to the tooltip, not to\n      // each caller. BitkitOverflowTooltip overrides it: it exists to show text that was truncated,\n      // so it is allowed to be wider.\n      maxWidth: rem(320),\n      color: 'text/on-contrast',\n      boxShadow: 'elevation/tooltip',\n      zIndex: 'tooltip',\n      transformOrigin: 'var(--transform-origin)',\n      _open: {\n        animationStyle: 'scale-fade-in',\n        animationDuration: 'fast',\n      },\n      _closed: {\n        animationStyle: 'scale-fade-out',\n        animationDuration: 'fast',\n      },\n    },\n    arrow: {\n      '--arrow-size': rem(8),\n      '--arrow-background': 'var(--tooltip-bg)',\n    },\n    arrowTip: {\n      borderTopWidth: '1',\n      borderInlineStartWidth: '1',\n      borderColor: 'var(--tooltip-bg)',\n    },\n  },\n  variants: {\n    variant: {\n      dark: {\n        content: {\n          '--tooltip-bg': 'colors.background/contrast',\n          color: 'text/on-contrast',\n        },\n      },\n      light: {\n        content: {\n          '--tooltip-bg': 'colors.background/tertiary',\n          color: 'text/primary',\n        },\n      },\n    },\n    paddingSize: {\n      sm: {\n        content: {\n          paddingInline: '8',\n          paddingBlock: '4',\n          borderRadius: '4',\n        },\n      },\n      md: {\n        content: {\n          paddingInline: '12',\n          paddingBlock: '8',\n          borderRadius: '8',\n        },\n      },\n      lg: {\n        content: {\n          padding: '16',\n          borderRadius: '8',\n        },\n      },\n    },\n    textStyle: {\n      'sm/regular': {\n        content: {\n          textStyle: 'body/sm/regular',\n        },\n      },\n      'sm/semibold': {\n        content: {\n          textStyle: 'body/sm/semibold',\n        },\n      },\n      'md/regular': {\n        content: {\n          textStyle: 'body/md/regular',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'dark',\n    paddingSize: 'md',\n    textStyle: 'md/regular',\n  },\n});\n\nexport default tooltipSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,oBAAoB,iBAAiB;CACzC,WAAW;CACX,OAAO,eAAe,KAAK;CAC3B,MAAM;EACJ,YAAY;GACV,YAAY;GACZ,eAAe;EACjB;EACA,SAAS;GACP,gBAAgB;GAChB,iBAAiB;GAMjB,UAAU,IAAI,GAAG;GACjB,OAAO;GACP,WAAW;GACX,QAAQ;GACR,iBAAiB;GACjB,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;GACA,SAAS;IACP,gBAAgB;IAChB,mBAAmB;GACrB;EACF;EACA,OAAO;GACL,gBAAgB,IAAI,CAAC;GACrB,sBAAsB;EACxB;EACA,UAAU;GACR,gBAAgB;GAChB,wBAAwB;GACxB,aAAa;EACf;CACF;CACA,UAAU;EACR,SAAS;GACP,MAAM,EACJ,SAAS;IACP,gBAAgB;IAChB,OAAO;GACT,EACF;GACA,OAAO,EACL,SAAS;IACP,gBAAgB;IAChB,OAAO;GACT,EACF;EACF;EACA,aAAa;GACX,IAAI,EACF,SAAS;IACP,eAAe;IACf,cAAc;IACd,cAAc;GAChB,EACF;GACA,IAAI,EACF,SAAS;IACP,eAAe;IACf,cAAc;IACd,cAAc;GAChB,EACF;GACA,IAAI,EACF,SAAS;IACP,SAAS;IACT,cAAc;GAChB,EACF;EACF;EACA,WAAW;GACT,cAAc,EACZ,SAAS,EACP,WAAW,kBACb,EACF;GACA,eAAe,EACb,SAAS,EACP,WAAW,mBACb,EACF;GACA,cAAc,EACZ,SAAS,EACP,WAAW,kBACb,EACF;EACF;CACF;CACA,iBAAiB;EACf,SAAS;EACT,aAAa;EACb,WAAW;CACb;AACF,CAAC"}
+{"version":3,"file":"Tooltip.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Tooltip.recipe.ts"],"sourcesContent":["import { tooltipAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, variants } from '../common/TooltipAndToggletip.common';\n\nconst tooltipSlotRecipe = defineSlotRecipe({\n  className: 'tooltip',\n  slots: tooltipAnatomy.keys(),\n  base: {\n    ...base,\n    positioner: {\n      ...base.positioner,\n      // A tooltip holds only text, so it never takes the pointer.\n      pointerEvents: 'none',\n    },\n  },\n  variants,\n  defaultVariants: {\n    variant: 'dark',\n    paddingSize: 'md',\n    textStyle: 'md/regular',\n  },\n});\n\nexport default tooltipSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,oBAAoB,iBAAiB;CACzC,WAAW;CACX,OAAO,eAAe,KAAK;CAC3B,MAAM;EACJ,GAAG;EACH,YAAY;GACV,GAAG,KAAK;GAER,eAAe;EACjB;CACF;CACA;CACA,iBAAiB;EACf,SAAS;EACT,aAAa;EACb,WAAW;CACb;AACF,CAAC"}