@cube-dev/ui-kit 0.0.0-canary-0d52ee0 → 0.0.0-canary-57b4f47

package/dist/components/actions/Menu/MenuTrigger.js

@@ -1,11 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import { SlotProvider } from "../../../utils/react/Slots.js";
 import { useEventBus } from "../../../utils/react/useEventBus.js";
 import { MenuContext } from "./context.js";
 import { generateRandomId } from "../../../utils/random.js";
 import { _Tray } from "../../overlays/Modal/Tray.js";
 import { _Popover } from "../../overlays/Modal/Popover.js";
-import { Fragment, forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
+import { Fragment, forwardRef, useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { DismissButton, useMenuTrigger, useOverlayPosition } from "react-aria";
 import { useDOMRef, useIsMobileDevice } from "@react-spectrum/utils";
@@ -20,7 +20,7 @@ function MenuTrigger(props, ref) {
 	const menuTriggerRef = props.targetRef || domRef || triggerRef;
 	const menuRef = useRef(null);
 	const wasOpenRef = useRef(false);
-	const { children, shouldFlip = true, closeOnSelect, trigger = "press", isDisabled, isDummy, mobileType = "popover" } = props;
+	const { children, shouldFlip = true, closeOnSelect, trigger = "press", isDisabled, isDummy } = props;
 	const menuId = useMemo(() => generateRandomId(), []);
 	const { emit, on } = useEventBus();
 	if (!Array.isArray(children) || children.length > 2) throw new Error("MenuTrigger must have exactly 2 children");
@@ -58,15 +58,14 @@ function MenuTrigger(props, ref) {
 	if (typeof menuTrigger === "function") menuTrigger = menuTrigger(state);
 	const { menuTriggerProps, menuProps } = useMenuTrigger({ isDisabled }, state, menuTriggerRef);
 	let initialPlacement = props.placement ?? "bottom start";
-	const isMobileDevice = useIsMobileDevice();
-	const isTray = mobileType === "tray" && isMobileDevice;
+	const isMobile = useIsMobileDevice();
 	const { overlayProps: positionProps, placement } = useOverlayPosition({
 		targetRef: menuTriggerRef,
 		overlayRef: menuPopoverRef,
 		scrollRef: menuRef,
 		placement: initialPlacement,
 		shouldFlip,
-		isOpen: state.isOpen && !isTray,
+		isOpen: state.isOpen && !isMobile,
 		onClose: state.close,
 		containerPadding: props.containerPadding,
 		offset: props.offset ?? 8,
@@ -78,13 +77,13 @@ function MenuTrigger(props, ref) {
 		onClose: state.close,
 		closeOnSelect,
 		autoFocus: state.focusStrategy ?? "first",
-		style: isTray ? {
+		style: isMobile ? {
 			width: "100%",
 			maxHeight: "inherit"
 		} : void 0,
 		mods: {
-			popover: !isTray,
-			tray: isTray
+			popover: !isMobile,
+			tray: isMobile
 		},
 		isClosing: !state.isOpen
 	};
@@ -93,22 +92,9 @@ function MenuTrigger(props, ref) {
 		menu,
 		/* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close })
 	] });
-	const stateIsOpenRef = useRef(state.isOpen);
-	useEffect(() => {
-		stateIsOpenRef.current = state.isOpen;
-	}, [state.isOpen]);
-	const shouldCloseOnInteractOutside = useCallback((el) => {
-		if (!stateIsOpenRef.current) return false;
-		const menuTriggerEl = el.closest("[data-popover-trigger]");
-		if (!menuTriggerEl) return true;
-		if (isDummy && (menuTriggerEl === menuTriggerRef.current || menuTriggerRef.current?.contains(el))) return true;
-		if (menuTriggerEl === menuTriggerRef.current) return true;
-		return false;
-	}, [isDummy, menuTriggerRef]);
 	let overlay;
-	if (isTray) overlay = /* @__PURE__ */ jsx(_Tray, {
+	if (isMobile) overlay = /* @__PURE__ */ jsx(_Tray, {
 		isOpen: state.isOpen,
-		shouldCloseOnInteractOutside,
 		onClose: state.close,
 		children: contents
 	});
@@ -119,7 +105,13 @@ function MenuTrigger(props, ref) {
 		isOpen: state.isOpen,
 		style: positionProps.style,
 		placement,
-		shouldCloseOnInteractOutside,
+		shouldCloseOnInteractOutside: (el) => {
+			const menuTriggerEl = el.closest("[data-popover-trigger]");
+			if (!menuTriggerEl) return true;
+			if (isDummy && (menuTriggerEl === menuTriggerRef.current || menuTriggerRef.current?.contains(el))) return true;
+			if (menuTriggerEl === menuTriggerRef.current) return true;
+			return false;
+		},
 		onClose: state.close,
 		children: contents
 	});

package/dist/components/actions/Menu/MenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.js","names":["Tray","Popover"],"sources":["../../../../src/components/actions/Menu/MenuTrigger.tsx"],"sourcesContent":["import { PressResponder } from '@react-aria/interactions';\nimport { useDOMRef, useIsMobileDevice } from '@react-spectrum/utils';\nimport { DOMRef } from '@react-types/shared';\nimport {\n  forwardRef,\n  Fragment,\n  ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  AriaMenuTriggerProps,\n  DismissButton,\n  Placement,\n  PositionProps,\n  useMenuTrigger,\n  useOverlayPosition,\n} from 'react-aria';\nimport { MenuTriggerState, useMenuTriggerState } from 'react-stately';\n\nimport { generateRandomId } from '../../../utils/random';\nimport { SlotProvider } from '../../../utils/react';\nimport { useEventBus } from '../../../utils/react/useEventBus';\nimport { Popover, Tray } from '../../overlays/Modal';\n\nimport { MenuContext, MenuContextValue } from './context';\n\nexport type { AriaMenuTriggerProps };\n\nexport type CubeMenuTriggerProps = AriaMenuTriggerProps &\n  PositionProps & {\n    isDisabled?: boolean;\n    children: [\n      ReactElement | ((state: MenuTriggerState) => ReactElement),\n      ReactElement,\n    ];\n\n    closeOnSelect?: boolean;\n    isDummy?: boolean;\n    /**\n     * Overlay variant to use on mobile screens. Defaults to `'popover'`, which\n     * keeps the desktop overlay even on small viewports. Pass `'tray'` to opt\n     * into the bottom-sheet `Tray` overlay on mobile (the previous implicit\n     * default). Mirrors the `mobileType` API on `DialogTrigger`.\n     */\n    mobileType?: 'popover' | 'tray';\n  };\n\nfunction MenuTrigger(props: CubeMenuTriggerProps, ref: DOMRef<HTMLElement>) {\n  const menuPopoverRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLElement>(null);\n  const domRef = useDOMRef(ref);\n  const menuTriggerRef = props.targetRef || domRef || triggerRef;\n  const menuRef = useRef<HTMLUListElement>(null);\n  const wasOpenRef = useRef(false);\n  const {\n    children,\n    shouldFlip = true,\n    closeOnSelect,\n    trigger = 'press',\n    isDisabled,\n    isDummy,\n    mobileType = 'popover',\n  } = props;\n\n  // Generate a unique ID for this menu instance\n  const menuId = useMemo(() => generateRandomId(), []);\n\n  // Get event bus for menu synchronization\n  const { emit, on } = useEventBus();\n\n  if (!Array.isArray(children) || children.length > 2) {\n    throw new Error('MenuTrigger must have exactly 2 children');\n  }\n\n  let [menuTrigger, menu] = children;\n  const state: MenuTriggerState = useMenuTriggerState(props);\n\n  // Listen for other menus opening and close this one if needed\n  useEffect(() => {\n    const unsubscribe = on('popover:open', (data: { menuId: string }) => {\n      // If another menu is opening and this menu is open, close this one\n      if (data.menuId !== menuId && state.isOpen && !isDummy) {\n        state.close();\n      }\n    });\n\n    return unsubscribe;\n  }, [on, menuId, state]);\n\n  // Emit event when this menu opens\n  useEffect(() => {\n    if (state.isOpen && !isDummy) {\n      emit('popover:open', { menuId });\n    }\n  }, [state.isOpen, emit, menuId, isDummy]);\n\n  // Restore focus manually when the menu closes\n  useEffect(() => {\n    if (!state.isOpen && wasOpenRef.current && !isDummy) {\n      wasOpenRef.current = false;\n      // Use setTimeout to ensure focus restoration happens after any animations\n      setTimeout(() => {\n        menuTriggerRef.current?.focus();\n      }, 0);\n    } else if (state.isOpen) {\n      wasOpenRef.current = true;\n    }\n  }, [state.isOpen, menuTriggerRef, isDummy]);\n\n  if (typeof menuTrigger === 'function') {\n    menuTrigger = (menuTrigger as CubeMenuTriggerProps['children'][0])(state);\n  }\n\n  const { menuTriggerProps, menuProps } = useMenuTrigger(\n    { isDisabled },\n    state,\n    menuTriggerRef,\n  );\n\n  let initialPlacement: Placement = props.placement ?? 'bottom start';\n\n  // Tray rendering is now opt-in via `mobileType=\"tray\"` (matches DialogTrigger).\n  // Without that opt-in, MenuTrigger always renders a Popover so that environments\n  // like jsdom (where `window.screen.width === 0` makes useIsMobileDevice() true)\n  // don't accidentally swap in the tray overlay.\n  const isMobileDevice = useIsMobileDevice();\n  const isTray = mobileType === 'tray' && isMobileDevice;\n  const { overlayProps: positionProps, placement } = useOverlayPosition({\n    targetRef: menuTriggerRef,\n    overlayRef: menuPopoverRef,\n    scrollRef: menuRef,\n    placement: initialPlacement,\n    shouldFlip: shouldFlip,\n    isOpen: state.isOpen && !isTray,\n    onClose: state.close,\n    containerPadding: props.containerPadding,\n    offset: props.offset ?? 8,\n    crossOffset: props.crossOffset ?? 0,\n  });\n\n  const menuContext = {\n    ...menuProps,\n    ref: menuRef,\n    onClose: state.close,\n    closeOnSelect,\n    autoFocus: (state.focusStrategy as any) ?? 'first',\n    style: isTray\n      ? {\n          width: '100%',\n          maxHeight: 'inherit',\n        }\n      : undefined,\n    mods: {\n      popover: !isTray,\n      tray: isTray,\n    },\n    isClosing: !state.isOpen,\n  } as MenuContextValue;\n\n  const contents = (\n    <>\n      <DismissButton onDismiss={state.close} />\n      {menu}\n      <DismissButton onDismiss={state.close} />\n    </>\n  );\n\n  // Shared between the Popover and Tray branches so both react-aria `useOverlay`\n  // calls see the same predicate. Without this, the Tray branch falls back to\n  // unconditional dismiss-on-outside-interaction, which `useOverlay` translates\n  // into stopPropagation/preventDefault in the capture phase — that swallows\n  // clicks on sibling triggers (see Menu rapid-open test).\n  //\n  // We capture `state.isOpen` via a ref so the callback identity stays stable\n  // across re-renders (it's passed to react-aria `useOverlay` whose listener\n  // setup keys off the ref equality). The ref is read at click time so a menu\n  // that is logically closed (`state.close()` already ran) but still mounted\n  // inside the `Popover` exit transition does not block sibling-trigger clicks.\n  const stateIsOpenRef = useRef(state.isOpen);\n  useEffect(() => {\n    stateIsOpenRef.current = state.isOpen;\n  }, [state.isOpen]);\n  const shouldCloseOnInteractOutside = useCallback(\n    (el: Element) => {\n      // While `Popover` is animating out, useOverlay's `useInteractOutside`\n      // capture-phase listener is still attached (jsdom 29+ uses\n      // pointerdown/click capture). Without this guard, clicks on a sibling\n      // trigger get stopPropagation()'d during the 350ms exit window and the\n      // sibling's `onClick` never runs — breaking rapid-open and \"open menu\n      // again with new props\" flows.\n      if (!stateIsOpenRef.current) return false;\n\n      const menuTriggerEl = el.closest('[data-popover-trigger]');\n      if (!menuTriggerEl) return true;\n      if (\n        isDummy &&\n        (menuTriggerEl === menuTriggerRef.current ||\n          menuTriggerRef.current?.contains(el))\n      ) {\n        return true;\n      }\n      if (menuTriggerEl === menuTriggerRef.current) return true;\n      return false;\n    },\n    [isDummy, menuTriggerRef],\n  );\n\n  let overlay;\n  if (isTray) {\n    overlay = (\n      <Tray\n        isOpen={state.isOpen}\n        shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n        onClose={state.close}\n      >\n        {contents}\n      </Tray>\n    );\n  } else {\n    overlay = (\n      <Popover\n        ref={menuPopoverRef}\n        hideArrow\n        isNonModal\n        isOpen={state.isOpen}\n        style={positionProps.style}\n        placement={placement}\n        shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n        onClose={state.close}\n      >\n        {contents}\n      </Popover>\n    );\n  }\n\n  return (\n    <Fragment>\n      <SlotProvider\n        slots={{ actionButton: { holdAffordance: trigger === 'longPress' } }}\n      >\n        {!isDummy ? (\n          <PressResponder\n            {...menuTriggerProps}\n            ref={menuTriggerRef}\n            data-popover-trigger\n            isPressed={state.isOpen}\n          >\n            {menuTrigger}\n          </PressResponder>\n        ) : null}\n      </SlotProvider>\n      <MenuContext.Provider value={menuContext}>{overlay}</MenuContext.Provider>\n    </Fragment>\n  );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nlet _MenuTrigger = forwardRef(MenuTrigger);\n\n_MenuTrigger.displayName = 'MenuTrigger';\n\nexport { _MenuTrigger as MenuTrigger };\n"],"mappings":"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"}
+{"version":3,"file":"MenuTrigger.js","names":["Tray","Popover"],"sources":["../../../../src/components/actions/Menu/MenuTrigger.tsx"],"sourcesContent":["import { PressResponder } from '@react-aria/interactions';\nimport { useDOMRef, useIsMobileDevice } from '@react-spectrum/utils';\nimport { DOMRef } from '@react-types/shared';\nimport {\n  forwardRef,\n  Fragment,\n  ReactElement,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  AriaMenuTriggerProps,\n  DismissButton,\n  Placement,\n  PositionProps,\n  useMenuTrigger,\n  useOverlayPosition,\n} from 'react-aria';\nimport { MenuTriggerState, useMenuTriggerState } from 'react-stately';\n\nimport { generateRandomId } from '../../../utils/random';\nimport { SlotProvider } from '../../../utils/react';\nimport { useEventBus } from '../../../utils/react/useEventBus';\nimport { Popover, Tray } from '../../overlays/Modal';\n\nimport { MenuContext, MenuContextValue } from './context';\n\nexport type { AriaMenuTriggerProps };\n\nexport type CubeMenuTriggerProps = AriaMenuTriggerProps &\n  PositionProps & {\n    isDisabled?: boolean;\n    children: [\n      ReactElement | ((state: MenuTriggerState) => ReactElement),\n      ReactElement,\n    ];\n\n    closeOnSelect?: boolean;\n    isDummy?: boolean;\n  };\n\nfunction MenuTrigger(props: CubeMenuTriggerProps, ref: DOMRef<HTMLElement>) {\n  const menuPopoverRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLElement>(null);\n  const domRef = useDOMRef(ref);\n  const menuTriggerRef = props.targetRef || domRef || triggerRef;\n  const menuRef = useRef<HTMLUListElement>(null);\n  const wasOpenRef = useRef(false);\n  const {\n    children,\n    shouldFlip = true,\n    closeOnSelect,\n    trigger = 'press',\n    isDisabled,\n    isDummy,\n  } = props;\n\n  // Generate a unique ID for this menu instance\n  const menuId = useMemo(() => generateRandomId(), []);\n\n  // Get event bus for menu synchronization\n  const { emit, on } = useEventBus();\n\n  if (!Array.isArray(children) || children.length > 2) {\n    throw new Error('MenuTrigger must have exactly 2 children');\n  }\n\n  let [menuTrigger, menu] = children;\n  const state: MenuTriggerState = useMenuTriggerState(props);\n\n  // Listen for other menus opening and close this one if needed\n  useEffect(() => {\n    const unsubscribe = on('popover:open', (data: { menuId: string }) => {\n      // If another menu is opening and this menu is open, close this one\n      if (data.menuId !== menuId && state.isOpen && !isDummy) {\n        state.close();\n      }\n    });\n\n    return unsubscribe;\n  }, [on, menuId, state]);\n\n  // Emit event when this menu opens\n  useEffect(() => {\n    if (state.isOpen && !isDummy) {\n      emit('popover:open', { menuId });\n    }\n  }, [state.isOpen, emit, menuId, isDummy]);\n\n  // Restore focus manually when the menu closes\n  useEffect(() => {\n    if (!state.isOpen && wasOpenRef.current && !isDummy) {\n      wasOpenRef.current = false;\n      // Use setTimeout to ensure focus restoration happens after any animations\n      setTimeout(() => {\n        menuTriggerRef.current?.focus();\n      }, 0);\n    } else if (state.isOpen) {\n      wasOpenRef.current = true;\n    }\n  }, [state.isOpen, menuTriggerRef, isDummy]);\n\n  if (typeof menuTrigger === 'function') {\n    menuTrigger = (menuTrigger as CubeMenuTriggerProps['children'][0])(state);\n  }\n\n  const { menuTriggerProps, menuProps } = useMenuTrigger(\n    { isDisabled },\n    state,\n    menuTriggerRef,\n  );\n\n  let initialPlacement: Placement = props.placement ?? 'bottom start';\n\n  const isMobile = useIsMobileDevice();\n  const { overlayProps: positionProps, placement } = useOverlayPosition({\n    targetRef: menuTriggerRef,\n    overlayRef: menuPopoverRef,\n    scrollRef: menuRef,\n    placement: initialPlacement,\n    shouldFlip: shouldFlip,\n    isOpen: state.isOpen && !isMobile,\n    onClose: state.close,\n    containerPadding: props.containerPadding,\n    offset: props.offset ?? 8,\n    crossOffset: props.crossOffset ?? 0,\n  });\n\n  const menuContext = {\n    ...menuProps,\n    ref: menuRef,\n    onClose: state.close,\n    closeOnSelect,\n    autoFocus: (state.focusStrategy as any) ?? 'first',\n    style: isMobile\n      ? {\n          width: '100%',\n          maxHeight: 'inherit',\n        }\n      : undefined,\n    mods: {\n      popover: !isMobile,\n      tray: isMobile,\n    },\n    isClosing: !state.isOpen,\n  } as MenuContextValue;\n\n  const contents = (\n    <>\n      <DismissButton onDismiss={state.close} />\n      {menu}\n      <DismissButton onDismiss={state.close} />\n    </>\n  );\n\n  // On small screen devices, the menu is rendered in a tray, otherwise a popover.\n  let overlay;\n  if (isMobile) {\n    overlay = (\n      <Tray isOpen={state.isOpen} onClose={state.close}>\n        {contents}\n      </Tray>\n    );\n  } else {\n    overlay = (\n      <Popover\n        ref={menuPopoverRef}\n        hideArrow\n        isNonModal\n        isOpen={state.isOpen}\n        style={positionProps.style}\n        placement={placement}\n        shouldCloseOnInteractOutside={(el) => {\n          const menuTriggerEl = el.closest('[data-popover-trigger]');\n          // If no menu trigger was clicked, allow closing\n          if (!menuTriggerEl) return true;\n          // For dummy triggers (like useAnchoredMenu), check if the clicked element\n          // is the target element or its descendant\n          if (\n            isDummy &&\n            (menuTriggerEl === menuTriggerRef.current ||\n              menuTriggerRef.current?.contains(el))\n          ) {\n            return true;\n          }\n          // If the same trigger that opened this menu was clicked, allow closing\n          if (menuTriggerEl === menuTriggerRef.current) return true;\n          // Otherwise, don't close (let event mechanism handle it)\n          return false;\n        }}\n        onClose={state.close}\n      >\n        {contents}\n      </Popover>\n    );\n  }\n\n  return (\n    <Fragment>\n      <SlotProvider\n        slots={{ actionButton: { holdAffordance: trigger === 'longPress' } }}\n      >\n        {!isDummy ? (\n          <PressResponder\n            {...menuTriggerProps}\n            ref={menuTriggerRef}\n            data-popover-trigger\n            isPressed={state.isOpen}\n          >\n            {menuTrigger}\n          </PressResponder>\n        ) : null}\n      </SlotProvider>\n      <MenuContext.Provider value={menuContext}>{overlay}</MenuContext.Provider>\n    </Fragment>\n  );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nlet _MenuTrigger = forwardRef(MenuTrigger);\n\n_MenuTrigger.displayName = 'MenuTrigger';\n\nexport { _MenuTrigger as MenuTrigger };\n"],"mappings":"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"}

package/dist/components/actions/Menu/SubMenuTrigger.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import { useEventBus } from "../../../utils/react/useEventBus.js";
 import { MenuContext, useMenuContext } from "./context.js";
 import { SubmenuTriggerContext } from "./SubmenuTriggerContext.js";

package/dist/components/actions/Menu/SubmenuTriggerContext.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import React from "react";
 
 //#region src/components/actions/Menu/SubmenuTriggerContext.tsx

package/dist/components/actions/Menu/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import React, { useContext } from "react";
 
 //#region src/components/actions/Menu/context.ts

package/dist/components/actions/Menu/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import { DEFAULT_NEUTRAL_STYLES } from "../../../data/item-themes.js";
 import { Space } from "../../layout/Space.js";
 import { DEFAULT_BUTTON_STYLES } from "../Button/Button.js";
@@ -10,7 +10,7 @@ const StyledMenuWrapper = tasty({
 	styles: {
 		display: "grid",
 		gridRows: "max-content 1sf max-content",
-		fill: "#white",
+		fill: "#surface",
 		margin: 0,
 		padding: 0,
 		border: true,
@@ -21,7 +21,7 @@ const StyledMenuWrapper = tasty({
 		},
 		shadow: {
 			"": "",
-			"popover | tray": "0px 5px 15px #dark.05"
+			"popover | tray": "$shadow"
 		},
 		height: {
 			"": "initial",
@@ -120,7 +120,7 @@ const StyledSection = tasty({
 		margin: "0",
 		padding: "0",
 		listStyle: "none",
-		fill: "#white"
+		fill: "#surface"
 	}
 });
 const StyledItem = tasty({
@@ -151,7 +151,7 @@ const StyledItem = tasty({
 		color: {
 			"": "#dark-02",
 			"selected | pressed": "#dark",
-			disabled: "#dark-04"
+			disabled: "#disabled-text"
 		},
 		cursor: {
 			"": "default",

package/dist/components/actions/Menu/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":[],"sources":["../../../../src/components/actions/Menu/styled.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { DEFAULT_NEUTRAL_STYLES } from '../../../data/item-themes';\nimport { Space } from '../../layout/Space';\nimport { DEFAULT_BUTTON_STYLES } from '../Button/Button';\n\nexport const StyledMenuWrapper = tasty({\n  qa: 'Menu',\n  styles: {\n    display: 'grid',\n    gridRows: 'max-content 1sf max-content',\n    fill: '#white',\n    margin: 0,\n    padding: 0,\n    border: true,\n    radius: '(1cr + 1bw)',\n    width: {\n      '': 'auto',\n      popover: 'max-content',\n    },\n    shadow: {\n      '': '',\n      'popover | tray': '0px 5px 15px #dark.05',\n    },\n    height: {\n      '': 'initial',\n      popover: 'initial max-content (50vh - 4x)',\n      tray: 'initial max-content (100vh - 4x)',\n    },\n    boxSizing: 'border-box',\n  },\n});\n\nexport const StyledMenu = tasty({\n  as: 'ul',\n  qa: 'MenuList',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    gap: {\n      '': '1bw',\n      sections: false,\n    },\n    boxSizing: 'border-box',\n    margin: 0,\n    padding: {\n      '': '0.5x',\n      section: 0, // section menu\n    },\n    overflow: {\n      '': 'auto',\n      section: '',\n    },\n    scrollbar: 'styled',\n  },\n});\n\nexport const StyledDivider = tasty({\n  qa: 'Divider',\n  as: 'li',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    margin: '.5x',\n    listStyle: 'none',\n    fill: '#border',\n    height: '1bw',\n    flexShrink: 0,\n  },\n});\n\nexport const StyledHeader = tasty(Space, {\n  qa: 'Header',\n  as: 'div',\n  role: 'heading',\n  'aria-level': 3,\n  styles: {\n    color: '#dark-02',\n    preset: 't3',\n    placeContent: 'space-between',\n    placeItems: 'center',\n    whiteSpace: 'nowrap',\n    padding: '.5x 1.5x',\n    height: 'min $size',\n    boxSizing: 'border-box',\n    border: 'bottom',\n    radius: '1cr top',\n\n    $size: {\n      '': '$size-md',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n    },\n  },\n});\n\nexport const StyledFooter = tasty(Space, {\n  qa: 'Footer',\n  as: 'div',\n  role: 'footer',\n  styles: {\n    color: '#dark-02',\n    preset: 't3',\n    placeContent: 'space-between',\n    placeItems: 'center',\n    whiteSpace: 'nowrap',\n    padding: '.5x 1.5x',\n    height: {\n      '': 'min $size-md',\n      'size=large': 'min $size-lg',\n    },\n    boxSizing: 'border-box',\n    border: 'top',\n    radius: '1cr bottom',\n  },\n});\n\nexport const StyledSection = tasty({\n  qa: 'Section',\n  as: 'li',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    margin: '0',\n    padding: '0',\n    listStyle: 'none',\n    fill: '#white',\n  },\n});\n\nexport const StyledItem = tasty({\n  qa: 'Item',\n  as: 'li',\n  styles: {\n    // Base button-like styles merged from Action/Button defaults\n    ...DEFAULT_BUTTON_STYLES,\n    ...DEFAULT_NEUTRAL_STYLES,\n\n    // Override specifics for menu context\n    display: 'flex',\n    flow: 'row',\n    justifyContent: 'stretch',\n    listStyle: 'none',\n    flexShrink: 0,\n    height: {\n      '': 'min $size-md',\n      'size=large': 'min $size-lg',\n    },\n    border: false,\n    boxSizing: 'border-box',\n    fill: {\n      '': '#clear',\n      focused: '#dark.03',\n      selected: '#dark.09',\n      'selected & focused': '#dark.12',\n      pressed: '#dark.09',\n      disabled: '#clear',\n    },\n    color: {\n      '': '#dark-02',\n      'selected | pressed': '#dark',\n      disabled: '#dark-04',\n    },\n    cursor: {\n      '': 'default',\n      disabled: 'not-allowed',\n    },\n    shadow: '#clear',\n    padding: {\n      '': '.5x 1x',\n      'selectionIcon & selectable & !selected': '.5x 1x .5x (1x + 3x)',\n    },\n    gap: '.75x',\n    outline: false,\n\n    Description: {\n      preset: 't4',\n      color: '#dark-03',\n    },\n  },\n});\n\nexport const StyledSectionHeading = tasty(Space, {\n  qa: 'SectionHeading',\n  as: 'div',\n  styles: {\n    color: '#dark-04',\n    preset: 'c2',\n    height: '3x',\n    placeContent: 'center space-between',\n    padding: {\n      '': '.5x .75x',\n      prefix: '0 .75x 0 .5x',\n    },\n\n    $size: {\n      '': '$size-md',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n    },\n  },\n});\n"],"mappings":";;;;;;;AAMA,MAAa,oBAAoB,MAAM;CACrC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,MAAM;EACN,QAAQ;EACR,SAAS;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;GACL,IAAI;GACJ,SAAS;GACV;EACD,QAAQ;GACN,IAAI;GACJ,kBAAkB;GACnB;EACD,QAAQ;GACN,IAAI;GACJ,SAAS;GACT,MAAM;GACP;EACD,WAAW;EACZ;CACF,CAAC;AAEF,MAAa,aAAa,MAAM;CAC9B,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,KAAK;GACH,IAAI;GACJ,UAAU;GACX;EACD,WAAW;EACX,QAAQ;EACR,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EACD,UAAU;GACR,IAAI;GACJ,SAAS;GACV;EACD,WAAW;EACZ;CACF,CAAC;AAEF,MAAa,gBAAgB,MAAM;CACjC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,QAAQ;EACR,WAAW;EACX,MAAM;EACN,QAAQ;EACR,YAAY;EACb;CACF,CAAC;AAEF,MAAa,eAAe,MAAM,OAAO;CACvC,IAAI;CACJ,IAAI;CACJ,MAAM;CACN,cAAc;CACd,QAAQ;EACN,OAAO;EACP,QAAQ;EACR,cAAc;EACd,YAAY;EACZ,YAAY;EACZ,SAAS;EACT,QAAQ;EACR,WAAW;EACX,QAAQ;EACR,QAAQ;EAER,OAAO;GACL,IAAI;GACJ,cAAc;GACd,eAAe;GACf,cAAc;GACf;EACF;CACF,CAAC;AAEF,MAAa,eAAe,MAAM,OAAO;CACvC,IAAI;CACJ,IAAI;CACJ,MAAM;CACN,QAAQ;EACN,OAAO;EACP,QAAQ;EACR,cAAc;EACd,YAAY;EACZ,YAAY;EACZ,SAAS;EACT,QAAQ;GACN,IAAI;GACJ,cAAc;GACf;EACD,WAAW;EACX,QAAQ;EACR,QAAQ;EACT;CACF,CAAC;AAEF,MAAa,gBAAgB,MAAM;CACjC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,QAAQ;EACR,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACF,CAAC;AAEF,MAAa,aAAa,MAAM;CAC9B,IAAI;CACJ,IAAI;CACJ,QAAQ;EAEN,GAAG;EACH,GAAG;EAGH,SAAS;EACT,MAAM;EACN,gBAAgB;EAChB,WAAW;EACX,YAAY;EACZ,QAAQ;GACN,IAAI;GACJ,cAAc;GACf;EACD,QAAQ;EACR,WAAW;EACX,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,UAAU;GACV,sBAAsB;GACtB,SAAS;GACT,UAAU;GACX;EACD,OAAO;GACL,IAAI;GACJ,sBAAsB;GACtB,UAAU;GACX;EACD,QAAQ;GACN,IAAI;GACJ,UAAU;GACX;EACD,QAAQ;EACR,SAAS;GACP,IAAI;GACJ,0CAA0C;GAC3C;EACD,KAAK;EACL,SAAS;EAET,aAAa;GACX,QAAQ;GACR,OAAO;GACR;EACF;CACF,CAAC;AAEF,MAAa,uBAAuB,MAAM,OAAO;CAC/C,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,cAAc;EACd,SAAS;GACP,IAAI;GACJ,QAAQ;GACT;EAED,OAAO;GACL,IAAI;GACJ,cAAc;GACd,eAAe;GACf,cAAc;GACf;EACF;CACF,CAAC"}
+{"version":3,"file":"styled.js","names":[],"sources":["../../../../src/components/actions/Menu/styled.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { DEFAULT_NEUTRAL_STYLES } from '../../../data/item-themes';\nimport { Space } from '../../layout/Space';\nimport { DEFAULT_BUTTON_STYLES } from '../Button/Button';\n\nexport const StyledMenuWrapper = tasty({\n  qa: 'Menu',\n  styles: {\n    display: 'grid',\n    gridRows: 'max-content 1sf max-content',\n    fill: '#surface',\n    margin: 0,\n    padding: 0,\n    border: true,\n    radius: '(1cr + 1bw)',\n    width: {\n      '': 'auto',\n      popover: 'max-content',\n    },\n    shadow: {\n      '': '',\n      // Use the design-system `$shadow` token (resolves to\n      // `0 .5x 2x #shadow-md`) so the popover shadow follows the\n      // scheme-aware Glaze `#shadow-md` color. The previous literal\n      // `0px 5px 15px #dark.05` baked in `#dark` (now aliased to the\n      // adaptive `#surface-text`) which inverts to a *light* shadow on\n      // dark surfaces.\n      'popover | tray': '$shadow',\n    },\n    height: {\n      '': 'initial',\n      popover: 'initial max-content (50vh - 4x)',\n      tray: 'initial max-content (100vh - 4x)',\n    },\n    boxSizing: 'border-box',\n  },\n});\n\nexport const StyledMenu = tasty({\n  as: 'ul',\n  qa: 'MenuList',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    gap: {\n      '': '1bw',\n      sections: false,\n    },\n    boxSizing: 'border-box',\n    margin: 0,\n    padding: {\n      '': '0.5x',\n      section: 0, // section menu\n    },\n    overflow: {\n      '': 'auto',\n      section: '',\n    },\n    scrollbar: 'styled',\n  },\n});\n\nexport const StyledDivider = tasty({\n  qa: 'Divider',\n  as: 'li',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    margin: '.5x',\n    listStyle: 'none',\n    fill: '#border',\n    height: '1bw',\n    flexShrink: 0,\n  },\n});\n\nexport const StyledHeader = tasty(Space, {\n  qa: 'Header',\n  as: 'div',\n  role: 'heading',\n  'aria-level': 3,\n  styles: {\n    color: '#dark-02',\n    preset: 't3',\n    placeContent: 'space-between',\n    placeItems: 'center',\n    whiteSpace: 'nowrap',\n    padding: '.5x 1.5x',\n    height: 'min $size',\n    boxSizing: 'border-box',\n    border: 'bottom',\n    radius: '1cr top',\n\n    $size: {\n      '': '$size-md',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n    },\n  },\n});\n\nexport const StyledFooter = tasty(Space, {\n  qa: 'Footer',\n  as: 'div',\n  role: 'footer',\n  styles: {\n    color: '#dark-02',\n    preset: 't3',\n    placeContent: 'space-between',\n    placeItems: 'center',\n    whiteSpace: 'nowrap',\n    padding: '.5x 1.5x',\n    height: {\n      '': 'min $size-md',\n      'size=large': 'min $size-lg',\n    },\n    boxSizing: 'border-box',\n    border: 'top',\n    radius: '1cr bottom',\n  },\n});\n\nexport const StyledSection = tasty({\n  qa: 'Section',\n  as: 'li',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    margin: '0',\n    padding: '0',\n    listStyle: 'none',\n    fill: '#surface',\n  },\n});\n\nexport const StyledItem = tasty({\n  qa: 'Item',\n  as: 'li',\n  styles: {\n    // Base button-like styles merged from Action/Button defaults\n    ...DEFAULT_BUTTON_STYLES,\n    ...DEFAULT_NEUTRAL_STYLES,\n\n    // Override specifics for menu context\n    display: 'flex',\n    flow: 'row',\n    justifyContent: 'stretch',\n    listStyle: 'none',\n    flexShrink: 0,\n    height: {\n      '': 'min $size-md',\n      'size=large': 'min $size-lg',\n    },\n    border: false,\n    boxSizing: 'border-box',\n    fill: {\n      '': '#clear',\n      focused: '#dark.03',\n      selected: '#dark.09',\n      'selected & focused': '#dark.12',\n      pressed: '#dark.09',\n      disabled: '#clear',\n    },\n    color: {\n      '': '#dark-02',\n      'selected | pressed': '#dark',\n      disabled: '#disabled-text',\n    },\n    cursor: {\n      '': 'default',\n      disabled: 'not-allowed',\n    },\n    shadow: '#clear',\n    padding: {\n      '': '.5x 1x',\n      'selectionIcon & selectable & !selected': '.5x 1x .5x (1x + 3x)',\n    },\n    gap: '.75x',\n    outline: false,\n\n    Description: {\n      preset: 't4',\n      color: '#dark-03',\n    },\n  },\n});\n\nexport const StyledSectionHeading = tasty(Space, {\n  qa: 'SectionHeading',\n  as: 'div',\n  styles: {\n    color: '#dark-04',\n    preset: 'c2',\n    height: '3x',\n    placeContent: 'center space-between',\n    padding: {\n      '': '.5x .75x',\n      prefix: '0 .75x 0 .5x',\n    },\n\n    $size: {\n      '': '$size-md',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n    },\n  },\n});\n"],"mappings":";;;;;;;AAMA,MAAa,oBAAoB,MAAM;CACrC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,MAAM;EACN,QAAQ;EACR,SAAS;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;GACL,IAAI;GACJ,SAAS;GACV;EACD,QAAQ;GACN,IAAI;GAOJ,kBAAkB;GACnB;EACD,QAAQ;GACN,IAAI;GACJ,SAAS;GACT,MAAM;GACP;EACD,WAAW;EACZ;CACF,CAAC;AAEF,MAAa,aAAa,MAAM;CAC9B,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,KAAK;GACH,IAAI;GACJ,UAAU;GACX;EACD,WAAW;EACX,QAAQ;EACR,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EACD,UAAU;GACR,IAAI;GACJ,SAAS;GACV;EACD,WAAW;EACZ;CACF,CAAC;AAEF,MAAa,gBAAgB,MAAM;CACjC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,QAAQ;EACR,WAAW;EACX,MAAM;EACN,QAAQ;EACR,YAAY;EACb;CACF,CAAC;AAEF,MAAa,eAAe,MAAM,OAAO;CACvC,IAAI;CACJ,IAAI;CACJ,MAAM;CACN,cAAc;CACd,QAAQ;EACN,OAAO;EACP,QAAQ;EACR,cAAc;EACd,YAAY;EACZ,YAAY;EACZ,SAAS;EACT,QAAQ;EACR,WAAW;EACX,QAAQ;EACR,QAAQ;EAER,OAAO;GACL,IAAI;GACJ,cAAc;GACd,eAAe;GACf,cAAc;GACf;EACF;CACF,CAAC;AAEF,MAAa,eAAe,MAAM,OAAO;CACvC,IAAI;CACJ,IAAI;CACJ,MAAM;CACN,QAAQ;EACN,OAAO;EACP,QAAQ;EACR,cAAc;EACd,YAAY;EACZ,YAAY;EACZ,SAAS;EACT,QAAQ;GACN,IAAI;GACJ,cAAc;GACf;EACD,WAAW;EACX,QAAQ;EACR,QAAQ;EACT;CACF,CAAC;AAEF,MAAa,gBAAgB,MAAM;CACjC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,QAAQ;EACR,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACF,CAAC;AAEF,MAAa,aAAa,MAAM;CAC9B,IAAI;CACJ,IAAI;CACJ,QAAQ;EAEN,GAAG;EACH,GAAG;EAGH,SAAS;EACT,MAAM;EACN,gBAAgB;EAChB,WAAW;EACX,YAAY;EACZ,QAAQ;GACN,IAAI;GACJ,cAAc;GACf;EACD,QAAQ;EACR,WAAW;EACX,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,UAAU;GACV,sBAAsB;GACtB,SAAS;GACT,UAAU;GACX;EACD,OAAO;GACL,IAAI;GACJ,sBAAsB;GACtB,UAAU;GACX;EACD,QAAQ;GACN,IAAI;GACJ,UAAU;GACX;EACD,QAAQ;EACR,SAAS;GACP,IAAI;GACJ,0CAA0C;GAC3C;EACD,KAAK;EACL,SAAS;EAET,aAAa;GACX,QAAQ;GACR,OAAO;GACR;EACF;CACF,CAAC;AAEF,MAAa,uBAAuB,MAAM,OAAO;CAC/C,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,cAAc;EACd,SAAS;GACP,IAAI;GACJ,QAAQ;GACT;EAED,OAAO;GACL,IAAI;GACJ,cAAc;GACd,eAAe;GACf,cAAc;GACf;EACF;CACF,CAAC"}

package/dist/components/actions/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import { ItemActionProvider, useItemActionContext } from "./ItemActionContext.js";
 import { openLink, parseTo, performClickHandler, useAction } from "./use-action.js";
 import { ItemAction } from "./ItemAction/ItemAction.js";

package/dist/components/actions/use-action.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../utils/react/mergeProps.js";
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useFocus as useFocus$1 } from "../../utils/react/interactions.js";

package/dist/components/actions/use-anchored-menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../utils/react/mergeProps.js";
 import { useEventBus } from "../../utils/react/useEventBus.js";
 import { useEvent } from "../../_internal/hooks/use-event.js";
@@ -35,21 +35,17 @@ function useAnchoredMenu(Component, defaultTriggerProps, defaultMenuProps) {
 	}, []);
 	const menuId = useMemo(() => generateRandomId(), []);
 	const { emit, on } = useEventBus();
-	const isOpenRef = useRef(isOpen);
-	useEffect(() => {
-		isOpenRef.current = isOpen;
-	}, [isOpen]);
 	useEffect(() => {
 		return on("popover:open", (data) => {
-			if (data.menuId !== menuId && isOpenRef.current) setIsOpen(false);
+			if (data.menuId !== menuId && isOpen) setIsOpen(false);
 		});
-	}, [on, menuId]);
-	const wasOpenForEmitRef = useRef(false);
+	}, [
+		on,
+		menuId,
+		isOpen
+	]);
 	useEffect(() => {
-		if (isOpen && !wasOpenForEmitRef.current) {
-			wasOpenForEmitRef.current = true;
-			emit("popover:open", { menuId });
-		} else if (!isOpen) wasOpenForEmitRef.current = false;
+		if (isOpen) emit("popover:open", { menuId });
 	}, [
 		isOpen,
 		emit,

package/dist/components/actions/use-anchored-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-anchored-menu.js","names":["MenuTrigger","mergeProps"],"sources":["../../../src/components/actions/use-anchored-menu.tsx"],"sourcesContent":["import { Pressable } from '@react-aria/interactions';\nimport {\n  ComponentProps,\n  ComponentType,\n  ReactElement,\n  RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { VisuallyHidden } from 'react-aria';\n\nimport { useEvent } from '../../_internal';\nimport { generateRandomId } from '../../utils/random';\nimport { mergeProps } from '../../utils/react';\nimport { useEventBus } from '../../utils/react/useEventBus';\n\nimport { MenuTrigger } from './Menu';\n\nexport interface UseAnchoredMenuReturn<P, T> {\n  /** Ref to attach to the anchor element for positioning the menu. */\n  anchorRef: RefObject<HTMLElement | null>;\n\n  /**\n   * Programmatically opens the menu with the provided props.\n   * @param props - Props to pass to the menu component\n   * @param triggerProps - Additional props for MenuTrigger (merged with defaultTriggerProps)\n   */\n  open(props?: P, triggerProps?: T): void;\n\n  /**\n   * Updates the props of the currently open menu.\n   * Props are merged if defaults are provided.\n   */\n  update(props: P, triggerProps?: T): void;\n\n  /** Closes the menu programmatically. */\n  close(): void;\n\n  /** Current open/closed state of the menu. */\n  isOpen: boolean;\n\n  /**\n   * JSX element that must be rendered in your component tree.\n   * Contains the MenuTrigger and positioning logic.\n   */\n  get rendered(): ReactElement | null;\n}\n\n/**\n * Generic hook to manage an anchored menu component.\n *\n * @param Component - A React component that represents the menu content (Menu or CommandMenu).\n * @param defaultTriggerProps - Default props to pass to the MenuTrigger.\n * @param defaultMenuProps - Default props to pass to the Menu component.\n * @returns An object with `anchorRef` to position the menu, `open` function to open the menu with provided props, `close` function to close the menu, and `rendered` JSX element to include in your component tree.\n */\nexport function useAnchoredMenu<P, T = ComponentProps<typeof MenuTrigger>>(\n  Component: ComponentType<P>,\n  defaultTriggerProps?: Omit<\n    ComponentProps<typeof MenuTrigger>,\n    'children' | 'isOpen' | 'onOpenChange' | 'targetRef'\n  >,\n  defaultMenuProps?: P,\n): UseAnchoredMenuReturn<P, T> {\n  const [isOpen, setIsOpen] = useState(false);\n  const [componentProps, setComponentProps] = useState<P | null>(null);\n  const [triggerProps, setTriggerProps] = useState<T | null>(null);\n  const anchorRef = useRef<HTMLElement>(null);\n  const setupRef = useRef(false);\n\n  useEffect(() => {\n    const el = anchorRef.current;\n    if (el) {\n      el.dataset.popoverTrigger = '';\n      return () => {\n        delete el.dataset.popoverTrigger;\n      };\n    }\n  }, []);\n\n  // Generate a unique ID for this menu instance\n  const menuId = useMemo(() => generateRandomId(), []);\n\n  // Get event bus for menu synchronization\n  const { emit, on } = useEventBus();\n\n  // Read isOpen through a ref so the listener subscription stays stable across\n  // open/close transitions. With isOpen in the deps the listener was being\n  // resubscribed mid-flight during rapid trigger switching, which let the\n  // wrong menu win the race.\n  const isOpenRef = useRef(isOpen);\n  useEffect(() => {\n    isOpenRef.current = isOpen;\n  }, [isOpen]);\n\n  // Listen for other menus opening and close this one if needed\n  useEffect(() => {\n    const unsubscribe = on('popover:open', (data: { menuId: string }) => {\n      if (data.menuId !== menuId && isOpenRef.current) {\n        setIsOpen(false);\n      }\n    });\n\n    return unsubscribe;\n  }, [on, menuId]);\n\n  // Emit event only on the false -> true transition. A re-render where isOpen\n  // is still true must not re-emit (otherwise it could trigger the listener\n  // above on a peer that just opened in the same render flush).\n  const wasOpenForEmitRef = useRef(false);\n  useEffect(() => {\n    if (isOpen && !wasOpenForEmitRef.current) {\n      wasOpenForEmitRef.current = true;\n      emit('popover:open', { menuId });\n    } else if (!isOpen) {\n      wasOpenForEmitRef.current = false;\n    }\n  }, [isOpen, emit, menuId]);\n\n  function setupCheck() {\n    if (!setupRef.current) {\n      throw new Error(\n        'useAnchoredMenu: MenuTrigger must be rendered. Use `rendered` property to include it in your component tree.',\n      );\n    }\n  }\n\n  // 'open' accepts props required by the Component and opens the menu\n  const open = useEvent((props: P = {} as P, triggerProps?: T) => {\n    setupCheck();\n\n    // Merge defaultMenuProps with provided props\n    const finalProps = defaultMenuProps\n      ? { ...defaultMenuProps, ...props }\n      : props;\n\n    setComponentProps(finalProps);\n    setTriggerProps(triggerProps ?? null);\n    setIsOpen(true);\n  });\n\n  const update = useEvent((props: P, triggerProps?: T) => {\n    setupCheck();\n\n    // Merge defaultMenuProps with provided props\n    const finalProps = defaultMenuProps\n      ? { ...defaultMenuProps, ...props }\n      : props;\n\n    setComponentProps(finalProps);\n    setTriggerProps(triggerProps ?? null);\n  });\n\n  const close = useEvent(() => {\n    setIsOpen(false);\n  });\n\n  // Render the menu only when componentProps is set\n  const renderedMenu = useMemo(() => {\n    if (!componentProps) return null;\n\n    return (\n      <MenuTrigger\n        isDummy\n        isOpen={isOpen}\n        targetRef={anchorRef}\n        placement=\"bottom start\"\n        onOpenChange={setIsOpen}\n        {...mergeProps(defaultTriggerProps, triggerProps || undefined)}\n      >\n        <VisuallyHidden>\n          <Pressable>\n            <button aria-label=\"context-menu\" />\n          </Pressable>\n        </VisuallyHidden>\n        <Component {...componentProps} />\n      </MenuTrigger>\n    );\n  }, [componentProps, triggerProps, isOpen, defaultTriggerProps]);\n\n  return {\n    anchorRef,\n    open,\n    update,\n    close,\n    isOpen,\n    get rendered() {\n      setupRef.current = true;\n\n      return renderedMenu;\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0DA,SAAgB,gBACd,WACA,qBAIA,kBAC6B;CAC7B,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,gBAAgB,qBAAqB,SAAmB,KAAK;CACpE,MAAM,CAAC,cAAc,mBAAmB,SAAmB,KAAK;CAChE,MAAM,YAAY,OAAoB,KAAK;CAC3C,MAAM,WAAW,OAAO,MAAM;AAE9B,iBAAgB;EACd,MAAM,KAAK,UAAU;AACrB,MAAI,IAAI;AACN,MAAG,QAAQ,iBAAiB;AAC5B,gBAAa;AACX,WAAO,GAAG,QAAQ;;;IAGrB,EAAE,CAAC;CAGN,MAAM,SAAS,cAAc,kBAAkB,EAAE,EAAE,CAAC;CAGpD,MAAM,EAAE,MAAM,OAAO,aAAa;CAMlC,MAAM,YAAY,OAAO,OAAO;AAChC,iBAAgB;AACd,YAAU,UAAU;IACnB,CAAC,OAAO,CAAC;AAGZ,iBAAgB;AAOd,SANoB,GAAG,iBAAiB,SAA6B;AACnE,OAAI,KAAK,WAAW,UAAU,UAAU,QACtC,WAAU,MAAM;IAElB;IAGD,CAAC,IAAI,OAAO,CAAC;CAKhB,MAAM,oBAAoB,OAAO,MAAM;AACvC,iBAAgB;AACd,MAAI,UAAU,CAAC,kBAAkB,SAAS;AACxC,qBAAkB,UAAU;AAC5B,QAAK,gBAAgB,EAAE,QAAQ,CAAC;aACvB,CAAC,OACV,mBAAkB,UAAU;IAE7B;EAAC;EAAQ;EAAM;EAAO,CAAC;CAE1B,SAAS,aAAa;AACpB,MAAI,CAAC,SAAS,QACZ,OAAM,IAAI,MACR,+GACD;;CAKL,MAAM,OAAO,UAAU,QAAW,EAAE,EAAO,iBAAqB;AAC9D,cAAY;AAOZ,oBAJmB,mBACf;GAAE,GAAG;GAAkB,GAAG;GAAO,GACjC,MAEyB;AAC7B,kBAAgB,gBAAgB,KAAK;AACrC,YAAU,KAAK;GACf;CAEF,MAAM,SAAS,UAAU,OAAU,iBAAqB;AACtD,cAAY;AAOZ,oBAJmB,mBACf;GAAE,GAAG;GAAkB,GAAG;GAAO,GACjC,MAEyB;AAC7B,kBAAgB,gBAAgB,KAAK;GACrC;CAEF,MAAM,QAAQ,eAAe;AAC3B,YAAU,MAAM;GAChB;CAGF,MAAM,eAAe,cAAc;AACjC,MAAI,CAAC,eAAgB,QAAO;AAE5B,SACE,qBAACA;GACC;GACQ;GACR,WAAW;GACX,WAAU;GACV,cAAc;GACd,GAAIC,aAAW,qBAAqB,gBAAgB,OAAU;cAE9D,oBAAC,4BACC,oBAAC,uBACC,oBAAC,YAAO,cAAW,iBAAiB,GAC1B,GACG,EACjB,oBAAC,aAAU,GAAI,iBAAkB;IACrB;IAEf;EAAC;EAAgB;EAAc;EAAQ;EAAoB,CAAC;AAE/D,QAAO;EACL;EACA;EACA;EACA;EACA;EACA,IAAI,WAAW;AACb,YAAS,UAAU;AAEnB,UAAO;;EAEV"}
+{"version":3,"file":"use-anchored-menu.js","names":["MenuTrigger","mergeProps"],"sources":["../../../src/components/actions/use-anchored-menu.tsx"],"sourcesContent":["import { Pressable } from '@react-aria/interactions';\nimport {\n  ComponentProps,\n  ComponentType,\n  ReactElement,\n  RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { VisuallyHidden } from 'react-aria';\n\nimport { useEvent } from '../../_internal';\nimport { generateRandomId } from '../../utils/random';\nimport { mergeProps } from '../../utils/react';\nimport { useEventBus } from '../../utils/react/useEventBus';\n\nimport { MenuTrigger } from './Menu';\n\nexport interface UseAnchoredMenuReturn<P, T> {\n  /** Ref to attach to the anchor element for positioning the menu. */\n  anchorRef: RefObject<HTMLElement | null>;\n\n  /**\n   * Programmatically opens the menu with the provided props.\n   * @param props - Props to pass to the menu component\n   * @param triggerProps - Additional props for MenuTrigger (merged with defaultTriggerProps)\n   */\n  open(props?: P, triggerProps?: T): void;\n\n  /**\n   * Updates the props of the currently open menu.\n   * Props are merged if defaults are provided.\n   */\n  update(props: P, triggerProps?: T): void;\n\n  /** Closes the menu programmatically. */\n  close(): void;\n\n  /** Current open/closed state of the menu. */\n  isOpen: boolean;\n\n  /**\n   * JSX element that must be rendered in your component tree.\n   * Contains the MenuTrigger and positioning logic.\n   */\n  get rendered(): ReactElement | null;\n}\n\n/**\n * Generic hook to manage an anchored menu component.\n *\n * @param Component - A React component that represents the menu content (Menu or CommandMenu).\n * @param defaultTriggerProps - Default props to pass to the MenuTrigger.\n * @param defaultMenuProps - Default props to pass to the Menu component.\n * @returns An object with `anchorRef` to position the menu, `open` function to open the menu with provided props, `close` function to close the menu, and `rendered` JSX element to include in your component tree.\n */\nexport function useAnchoredMenu<P, T = ComponentProps<typeof MenuTrigger>>(\n  Component: ComponentType<P>,\n  defaultTriggerProps?: Omit<\n    ComponentProps<typeof MenuTrigger>,\n    'children' | 'isOpen' | 'onOpenChange' | 'targetRef'\n  >,\n  defaultMenuProps?: P,\n): UseAnchoredMenuReturn<P, T> {\n  const [isOpen, setIsOpen] = useState(false);\n  const [componentProps, setComponentProps] = useState<P | null>(null);\n  const [triggerProps, setTriggerProps] = useState<T | null>(null);\n  const anchorRef = useRef<HTMLElement>(null);\n  const setupRef = useRef(false);\n\n  useEffect(() => {\n    const el = anchorRef.current;\n    if (el) {\n      el.dataset.popoverTrigger = '';\n      return () => {\n        delete el.dataset.popoverTrigger;\n      };\n    }\n  }, []);\n\n  // Generate a unique ID for this menu instance\n  const menuId = useMemo(() => generateRandomId(), []);\n\n  // Get event bus for menu synchronization\n  const { emit, on } = useEventBus();\n\n  // Listen for other menus opening and close this one if needed\n  useEffect(() => {\n    const unsubscribe = on('popover:open', (data: { menuId: string }) => {\n      // If another menu is opening and this menu is open, close this one\n      if (data.menuId !== menuId && isOpen) {\n        setIsOpen(false);\n      }\n    });\n\n    return unsubscribe;\n  }, [on, menuId, isOpen]);\n\n  // Emit event when this menu opens\n  useEffect(() => {\n    if (isOpen) {\n      emit('popover:open', { menuId });\n    }\n  }, [isOpen, emit, menuId]);\n\n  function setupCheck() {\n    if (!setupRef.current) {\n      throw new Error(\n        'useAnchoredMenu: MenuTrigger must be rendered. Use `rendered` property to include it in your component tree.',\n      );\n    }\n  }\n\n  // 'open' accepts props required by the Component and opens the menu\n  const open = useEvent((props: P = {} as P, triggerProps?: T) => {\n    setupCheck();\n\n    // Merge defaultMenuProps with provided props\n    const finalProps = defaultMenuProps\n      ? { ...defaultMenuProps, ...props }\n      : props;\n\n    setComponentProps(finalProps);\n    setTriggerProps(triggerProps ?? null);\n    setIsOpen(true);\n  });\n\n  const update = useEvent((props: P, triggerProps?: T) => {\n    setupCheck();\n\n    // Merge defaultMenuProps with provided props\n    const finalProps = defaultMenuProps\n      ? { ...defaultMenuProps, ...props }\n      : props;\n\n    setComponentProps(finalProps);\n    setTriggerProps(triggerProps ?? null);\n  });\n\n  const close = useEvent(() => {\n    setIsOpen(false);\n  });\n\n  // Render the menu only when componentProps is set\n  const renderedMenu = useMemo(() => {\n    if (!componentProps) return null;\n\n    return (\n      <MenuTrigger\n        isDummy\n        isOpen={isOpen}\n        targetRef={anchorRef}\n        placement=\"bottom start\"\n        onOpenChange={setIsOpen}\n        {...mergeProps(defaultTriggerProps, triggerProps || undefined)}\n      >\n        <VisuallyHidden>\n          <Pressable>\n            <button aria-label=\"context-menu\" />\n          </Pressable>\n        </VisuallyHidden>\n        <Component {...componentProps} />\n      </MenuTrigger>\n    );\n  }, [componentProps, triggerProps, isOpen, defaultTriggerProps]);\n\n  return {\n    anchorRef,\n    open,\n    update,\n    close,\n    isOpen,\n    get rendered() {\n      setupRef.current = true;\n\n      return renderedMenu;\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0DA,SAAgB,gBACd,WACA,qBAIA,kBAC6B;CAC7B,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,gBAAgB,qBAAqB,SAAmB,KAAK;CACpE,MAAM,CAAC,cAAc,mBAAmB,SAAmB,KAAK;CAChE,MAAM,YAAY,OAAoB,KAAK;CAC3C,MAAM,WAAW,OAAO,MAAM;AAE9B,iBAAgB;EACd,MAAM,KAAK,UAAU;AACrB,MAAI,IAAI;AACN,MAAG,QAAQ,iBAAiB;AAC5B,gBAAa;AACX,WAAO,GAAG,QAAQ;;;IAGrB,EAAE,CAAC;CAGN,MAAM,SAAS,cAAc,kBAAkB,EAAE,EAAE,CAAC;CAGpD,MAAM,EAAE,MAAM,OAAO,aAAa;AAGlC,iBAAgB;AAQd,SAPoB,GAAG,iBAAiB,SAA6B;AAEnE,OAAI,KAAK,WAAW,UAAU,OAC5B,WAAU,MAAM;IAElB;IAGD;EAAC;EAAI;EAAQ;EAAO,CAAC;AAGxB,iBAAgB;AACd,MAAI,OACF,MAAK,gBAAgB,EAAE,QAAQ,CAAC;IAEjC;EAAC;EAAQ;EAAM;EAAO,CAAC;CAE1B,SAAS,aAAa;AACpB,MAAI,CAAC,SAAS,QACZ,OAAM,IAAI,MACR,+GACD;;CAKL,MAAM,OAAO,UAAU,QAAW,EAAE,EAAO,iBAAqB;AAC9D,cAAY;AAOZ,oBAJmB,mBACf;GAAE,GAAG;GAAkB,GAAG;GAAO,GACjC,MAEyB;AAC7B,kBAAgB,gBAAgB,KAAK;AACrC,YAAU,KAAK;GACf;CAEF,MAAM,SAAS,UAAU,OAAU,iBAAqB;AACtD,cAAY;AAOZ,oBAJmB,mBACf;GAAE,GAAG;GAAkB,GAAG;GAAO,GACjC,MAEyB;AAC7B,kBAAgB,gBAAgB,KAAK;GACrC;CAEF,MAAM,QAAQ,eAAe;AAC3B,YAAU,MAAM;GAChB;CAGF,MAAM,eAAe,cAAc;AACjC,MAAI,CAAC,eAAgB,QAAO;AAE5B,SACE,qBAACA;GACC;GACQ;GACR,WAAW;GACX,WAAU;GACV,cAAc;GACd,GAAIC,aAAW,qBAAqB,gBAAgB,OAAU;cAE9D,oBAAC,4BACC,oBAAC,uBACC,oBAAC,YAAO,cAAW,iBAAiB,GAC1B,GACG,EACjB,oBAAC,aAAU,GAAI,iBAAkB;IACrB;IAEf;EAAC;EAAgB;EAAc;EAAQ;EAAoB,CAAC;AAE/D,QAAO;EACL;EACA;EACA;EACA;EACA;EACA,IAAI,WAAW;AACb,YAAS,UAAU;AAEnB,UAAO;;EAEV"}

package/dist/components/actions/use-context-menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../utils/react/mergeProps.js";
 import { useEventBus } from "../../utils/react/useEventBus.js";
 import { useEvent } from "../../_internal/hooks/use-event.js";
@@ -26,15 +26,6 @@ function useContextMenu(Component, defaultTriggerProps, defaultMenuProps) {
 	const targetRef = useRef(null);
 	const invisibleAnchorRef = useRef(null);
 	const setupRef = useRef(false);
-	useEffect(() => {
-		const el = targetRef.current;
-		if (el) {
-			el.dataset.popoverTrigger = "";
-			return () => {
-				delete el.dataset.popoverTrigger;
-			};
-		}
-	}, []);
 	const menuId = useMemo(() => generateRandomId(), []);
 	const { emit, on } = useEventBus();
 	useEffect(() => {

package/dist/components/actions/use-context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-context-menu.js","names":["MenuTrigger","mergeProps"],"sources":["../../../src/components/actions/use-context-menu.tsx"],"sourcesContent":["import { Pressable } from '@react-aria/interactions';\nimport {\n  ComponentProps,\n  ComponentType,\n  MouseEvent,\n  PointerEvent,\n  ReactElement,\n  RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { VisuallyHidden } from 'react-aria';\n\nimport { useEvent } from '../../_internal';\nimport { generateRandomId } from '../../utils/random';\nimport { mergeProps } from '../../utils/react';\nimport { useEventBus } from '../../utils/react/useEventBus';\n\nimport { MenuTrigger } from './Menu';\n\ntype NativeMouseEvent = globalThis.MouseEvent;\ntype NativePointerEvent = globalThis.PointerEvent;\n\nexport interface UseContextMenuReturn<\n  E extends HTMLElement = HTMLElement,\n  P extends object = {},\n  T = ComponentProps<typeof MenuTrigger>,\n> {\n  /** Container element that receives context menu events. Attach this ref to your target element. */\n  targetRef: RefObject<E | null>;\n\n  /**\n   * Programmatically opens the menu at the specified coordinates or element center.\n   * Runtime props are merged with defaultMenuProps (runtime props take precedence).\n   *\n   * @param props - Props to pass to the menu component (optional, defaults to defaultMenuProps)\n   * @param triggerProps - Additional props for MenuTrigger (merged with defaultTriggerProps)\n   * @param event - The pointer/mouse event containing coordinates for positioning (optional, centers on element if not provided)\n   */\n  open(\n    props?: P,\n    triggerProps?: T,\n    event?: NativeMouseEvent | NativePointerEvent | MouseEvent | PointerEvent,\n  ): void;\n\n  /**\n   * Updates the props of the currently open menu without repositioning.\n   * Props are merged with defaultMenuProps.\n   */\n  update(props: P, triggerProps?: T): void;\n\n  /** Closes the menu programmatically. */\n  close(): void;\n\n  /** Current open/closed state of the menu. */\n  isOpen: boolean;\n\n  /**\n   * JSX element that must be rendered in your component tree.\n   * Contains the MenuTrigger and positioning logic.\n   * IMPORTANT: Must be placed directly inside the target container (the element with targetRef).\n   */\n  get rendered(): ReactElement | null;\n}\n\n/**\n * Generic hook to manage a context menu component that opens at pointer coordinates.\n *\n * @param Component - A React component that represents the menu content (Menu or CommandMenu).\n * @param defaultTriggerProps - Default props to pass to the MenuTrigger.\n * @param defaultMenuProps - Default props to pass to the Menu component.\n * @returns An object with `targetRef` to attach to the container element, `open` function to open the menu at event coordinates, `close` function to close the menu, and `rendered` JSX element to include in your component tree.\n */\nexport function useContextMenu<\n  E extends HTMLElement = HTMLElement,\n  P extends object = {},\n  T = ComponentProps<typeof MenuTrigger>,\n>(\n  Component: ComponentType<P>,\n  defaultTriggerProps?: Omit<\n    ComponentProps<typeof MenuTrigger>,\n    'children' | 'isOpen' | 'onOpenChange' | 'targetRef'\n  >,\n  defaultMenuProps?: P,\n): UseContextMenuReturn<E, P, T> {\n  const [isOpen, setIsOpen] = useState(false);\n  const [componentProps, setComponentProps] = useState<P | null>(null);\n  const [triggerProps, setTriggerProps] = useState<T | null>(null);\n  const [anchorPosition, setAnchorPosition] = useState<{\n    x: number;\n    y: number;\n  } | null>(null);\n  const targetRef = useRef<E>(null);\n  const invisibleAnchorRef = useRef<HTMLSpanElement>(null);\n  const setupRef = useRef(false);\n\n  // Mark the container as a popover trigger so that other open menus' close-on-\n  // outside predicates treat clicks inside it (including programmatic\n  // open buttons rendered alongside a context-menu target) as a legitimate\n  // trigger interaction instead of a generic outside click. This mirrors the\n  // pattern in `useAnchoredMenu`.\n  useEffect(() => {\n    const el = targetRef.current;\n    if (el) {\n      el.dataset.popoverTrigger = '';\n      return () => {\n        delete el.dataset.popoverTrigger;\n      };\n    }\n  }, []);\n\n  // Generate a unique ID for this menu instance\n  const menuId = useMemo(() => generateRandomId(), []);\n\n  // Get event bus for menu synchronization\n  const { emit, on } = useEventBus();\n\n  // Listen for other menus opening and close this one if needed\n  useEffect(() => {\n    const unsubscribe = on('popover:open', (data: { menuId: string }) => {\n      // If another menu is opening and this menu is open, close this one\n      if (data.menuId !== menuId && isOpen) {\n        setIsOpen(false);\n        setAnchorPosition(null);\n      }\n    });\n\n    return unsubscribe;\n  }, [on, menuId, isOpen]);\n\n  // Emit event when this menu opens\n  useEffect(() => {\n    if (isOpen) {\n      emit('popover:open', { menuId });\n    }\n  }, [isOpen, emit, menuId]);\n\n  function setupCheck() {\n    if (!setupRef.current) {\n      throw new Error(\n        'useContextMenu: MenuTrigger must be rendered. Use `rendered` property to include it in your component tree.',\n      );\n    }\n  }\n\n  // Helper function to calculate position relative to targetRef, taking the\n  // element's scroll offset into account. Without the scroll offset the menu\n  // would be rendered at the wrong place inside scrollable containers.\n  const calculatePosition = (\n    event?: NativeMouseEvent | NativePointerEvent | MouseEvent | PointerEvent,\n  ) => {\n    const container = targetRef.current;\n\n    // If no event is provided, position at the center of the element\n    if (!event) {\n      if (!container) {\n        return { x: 0, y: 0 };\n      }\n\n      const containerRect = container.getBoundingClientRect();\n      const scrollLeft = container.scrollLeft;\n      const scrollTop = container.scrollTop;\n\n      const computed = window.getComputedStyle(container);\n      const borderLeft = parseFloat(computed.borderLeftWidth) || 0;\n      const borderTop = parseFloat(computed.borderTopWidth) || 0;\n\n      // Position at the center of the element's content area\n      const x = container.clientWidth / 2 + scrollLeft;\n      const y = container.clientHeight / 2 + scrollTop;\n\n      // Clamp to the full scroll size\n      const clampedX = Math.max(0, Math.min(x, container.scrollWidth));\n      const clampedY = Math.max(0, Math.min(y, container.scrollHeight));\n\n      return { x: clampedX, y: clampedY };\n    }\n\n    // If the target reference is missing, fall back to viewport coordinates.\n    if (!container) {\n      const { clientX = 0, clientY = 0 } = event;\n\n      return { x: clientX, y: clientY };\n    }\n\n    const containerRect = container.getBoundingClientRect();\n\n    // Get coordinates from the event (viewport-relative)\n    const { clientX, clientY } = event;\n\n    // Take the element's scroll offset into account so that the coordinates are\n    // relative to the **content** box, not the visible viewport of the\n    // element.\n    const scrollLeft = container.scrollLeft;\n    const scrollTop = container.scrollTop;\n\n    const computed = window.getComputedStyle(container);\n    const borderLeft = parseFloat(computed.borderLeftWidth) || 0;\n    const borderTop = parseFloat(computed.borderTopWidth) || 0;\n\n    const x = clientX - containerRect.left - borderLeft + scrollLeft;\n    const y = clientY - containerRect.top - borderTop + scrollTop;\n\n    // Clamp to the full scroll size so that the invisible anchor always stays\n    // inside the element regardless of the scroll position.\n    const clampedX = Math.max(0, Math.min(x, container.scrollWidth));\n    const clampedY = Math.max(0, Math.min(y, container.scrollHeight));\n\n    return { x: clampedX, y: clampedY };\n  };\n\n  // 'open' accepts props, trigger props, and optional event for positioning, then opens the menu\n  const open = useEvent(\n    (\n      props: P = {} as P,\n      triggerProps?: T,\n      event?: NativeMouseEvent | NativePointerEvent | MouseEvent | PointerEvent,\n    ) => {\n      setupCheck();\n\n      // Ensure the target element can serve as a positioning context for the\n      // invisible target element. If the consumer hasn't explicitly set\n      // `position: relative | absolute | fixed | sticky` we switch it to\n      // `relative` so that absolutely-positioned children are laid out correctly.\n      if (targetRef.current) {\n        const computedStyle = window.getComputedStyle(targetRef.current);\n\n        if (computedStyle.position === 'static') {\n          targetRef.current.style.position = 'relative';\n        }\n      }\n\n      // Prevent default context menu if it's a context menu event\n      if (\n        event &&\n        'preventDefault' in event &&\n        typeof event.preventDefault === 'function'\n      ) {\n        event.preventDefault();\n      }\n\n      const { x, y } = calculatePosition(event);\n      setAnchorPosition({ x, y });\n\n      // Merge defaultMenuProps with provided props\n      const finalProps = defaultMenuProps\n        ? { ...defaultMenuProps, ...props }\n        : props;\n\n      setComponentProps(finalProps);\n      setTriggerProps(triggerProps ?? null);\n      setIsOpen(true);\n    },\n  );\n\n  const update = useEvent((props: P, triggerProps?: T) => {\n    setupCheck();\n\n    // Merge defaultMenuProps with provided props\n    const finalProps = defaultMenuProps\n      ? { ...defaultMenuProps, ...props }\n      : props;\n\n    setComponentProps(finalProps as P);\n    setTriggerProps(triggerProps ?? null);\n  });\n\n  const close = useEvent(() => {\n    setIsOpen(false);\n    setAnchorPosition(null);\n  });\n\n  // Context menu event handler\n  const onContextMenu = useEvent(\n    (event: MouseEvent | PointerEvent | MouseEvent | PointerEvent) => {\n      event.preventDefault();\n      if (isOpen) {\n        const pos = calculatePosition(event);\n        setAnchorPosition(pos);\n      } else {\n        open(defaultMenuProps, undefined, event);\n      }\n    },\n  );\n\n  // Bind the onContextMenu event to targetRef\n  useEffect(() => {\n    const element = targetRef.current;\n    if (!element) return;\n\n    element.addEventListener('contextmenu', onContextMenu as any);\n\n    return () => {\n      element.removeEventListener('contextmenu', onContextMenu as any);\n    };\n  }, [onContextMenu]);\n\n  // Render the menu only when componentProps is set\n  const renderedMenu = useMemo(() => {\n    if (!componentProps || !anchorPosition) return null;\n\n    return (\n      <>\n        {/* Invisible anchor element positioned at click coordinates */}\n        <span\n          ref={invisibleAnchorRef}\n          style={{\n            position: 'absolute',\n            left: `${anchorPosition.x}px`,\n            top: `${anchorPosition.y}px`,\n            width: '0px',\n            height: '0px',\n            lineHeight: '0',\n            pointerEvents: 'none',\n            visibility: 'hidden',\n          }}\n        />\n        <MenuTrigger\n          isDummy\n          isOpen={isOpen}\n          targetRef={invisibleAnchorRef}\n          offset={0}\n          crossOffset={0}\n          placement={\n            (triggerProps as ComponentProps<typeof MenuTrigger>)?.placement ||\n            defaultTriggerProps?.placement ||\n            'bottom start'\n          }\n          onOpenChange={setIsOpen}\n          {...mergeProps(defaultTriggerProps, triggerProps || undefined)}\n        >\n          <VisuallyHidden>\n            <Pressable>\n              <button aria-label=\"Open context menu\" />\n            </Pressable>\n          </VisuallyHidden>\n          <Component {...componentProps} />\n        </MenuTrigger>\n      </>\n    );\n  }, [\n    componentProps,\n    triggerProps,\n    isOpen,\n    defaultTriggerProps,\n    anchorPosition,\n  ]);\n\n  return {\n    targetRef,\n    open,\n    update,\n    close,\n    isOpen,\n    get rendered() {\n      setupRef.current = true;\n\n      return renderedMenu;\n    },\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-context-menu.js","names":["MenuTrigger","mergeProps"],"sources":["../../../src/components/actions/use-context-menu.tsx"],"sourcesContent":["import { Pressable } from '@react-aria/interactions';\nimport {\n  ComponentProps,\n  ComponentType,\n  MouseEvent,\n  PointerEvent,\n  ReactElement,\n  RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { VisuallyHidden } from 'react-aria';\n\nimport { useEvent } from '../../_internal';\nimport { generateRandomId } from '../../utils/random';\nimport { mergeProps } from '../../utils/react';\nimport { useEventBus } from '../../utils/react/useEventBus';\n\nimport { MenuTrigger } from './Menu';\n\ntype NativeMouseEvent = globalThis.MouseEvent;\ntype NativePointerEvent = globalThis.PointerEvent;\n\nexport interface UseContextMenuReturn<\n  E extends HTMLElement = HTMLElement,\n  P extends object = {},\n  T = ComponentProps<typeof MenuTrigger>,\n> {\n  /** Container element that receives context menu events. Attach this ref to your target element. */\n  targetRef: RefObject<E | null>;\n\n  /**\n   * Programmatically opens the menu at the specified coordinates or element center.\n   * Runtime props are merged with defaultMenuProps (runtime props take precedence).\n   *\n   * @param props - Props to pass to the menu component (optional, defaults to defaultMenuProps)\n   * @param triggerProps - Additional props for MenuTrigger (merged with defaultTriggerProps)\n   * @param event - The pointer/mouse event containing coordinates for positioning (optional, centers on element if not provided)\n   */\n  open(\n    props?: P,\n    triggerProps?: T,\n    event?: NativeMouseEvent | NativePointerEvent | MouseEvent | PointerEvent,\n  ): void;\n\n  /**\n   * Updates the props of the currently open menu without repositioning.\n   * Props are merged with defaultMenuProps.\n   */\n  update(props: P, triggerProps?: T): void;\n\n  /** Closes the menu programmatically. */\n  close(): void;\n\n  /** Current open/closed state of the menu. */\n  isOpen: boolean;\n\n  /**\n   * JSX element that must be rendered in your component tree.\n   * Contains the MenuTrigger and positioning logic.\n   * IMPORTANT: Must be placed directly inside the target container (the element with targetRef).\n   */\n  get rendered(): ReactElement | null;\n}\n\n/**\n * Generic hook to manage a context menu component that opens at pointer coordinates.\n *\n * @param Component - A React component that represents the menu content (Menu or CommandMenu).\n * @param defaultTriggerProps - Default props to pass to the MenuTrigger.\n * @param defaultMenuProps - Default props to pass to the Menu component.\n * @returns An object with `targetRef` to attach to the container element, `open` function to open the menu at event coordinates, `close` function to close the menu, and `rendered` JSX element to include in your component tree.\n */\nexport function useContextMenu<\n  E extends HTMLElement = HTMLElement,\n  P extends object = {},\n  T = ComponentProps<typeof MenuTrigger>,\n>(\n  Component: ComponentType<P>,\n  defaultTriggerProps?: Omit<\n    ComponentProps<typeof MenuTrigger>,\n    'children' | 'isOpen' | 'onOpenChange' | 'targetRef'\n  >,\n  defaultMenuProps?: P,\n): UseContextMenuReturn<E, P, T> {\n  const [isOpen, setIsOpen] = useState(false);\n  const [componentProps, setComponentProps] = useState<P | null>(null);\n  const [triggerProps, setTriggerProps] = useState<T | null>(null);\n  const [anchorPosition, setAnchorPosition] = useState<{\n    x: number;\n    y: number;\n  } | null>(null);\n  const targetRef = useRef<E>(null);\n  const invisibleAnchorRef = useRef<HTMLSpanElement>(null);\n  const setupRef = useRef(false);\n\n  // Generate a unique ID for this menu instance\n  const menuId = useMemo(() => generateRandomId(), []);\n\n  // Get event bus for menu synchronization\n  const { emit, on } = useEventBus();\n\n  // Listen for other menus opening and close this one if needed\n  useEffect(() => {\n    const unsubscribe = on('popover:open', (data: { menuId: string }) => {\n      // If another menu is opening and this menu is open, close this one\n      if (data.menuId !== menuId && isOpen) {\n        setIsOpen(false);\n        setAnchorPosition(null);\n      }\n    });\n\n    return unsubscribe;\n  }, [on, menuId, isOpen]);\n\n  // Emit event when this menu opens\n  useEffect(() => {\n    if (isOpen) {\n      emit('popover:open', { menuId });\n    }\n  }, [isOpen, emit, menuId]);\n\n  function setupCheck() {\n    if (!setupRef.current) {\n      throw new Error(\n        'useContextMenu: MenuTrigger must be rendered. Use `rendered` property to include it in your component tree.',\n      );\n    }\n  }\n\n  // Helper function to calculate position relative to targetRef, taking the\n  // element's scroll offset into account. Without the scroll offset the menu\n  // would be rendered at the wrong place inside scrollable containers.\n  const calculatePosition = (\n    event?: NativeMouseEvent | NativePointerEvent | MouseEvent | PointerEvent,\n  ) => {\n    const container = targetRef.current;\n\n    // If no event is provided, position at the center of the element\n    if (!event) {\n      if (!container) {\n        return { x: 0, y: 0 };\n      }\n\n      const containerRect = container.getBoundingClientRect();\n      const scrollLeft = container.scrollLeft;\n      const scrollTop = container.scrollTop;\n\n      const computed = window.getComputedStyle(container);\n      const borderLeft = parseFloat(computed.borderLeftWidth) || 0;\n      const borderTop = parseFloat(computed.borderTopWidth) || 0;\n\n      // Position at the center of the element's content area\n      const x = container.clientWidth / 2 + scrollLeft;\n      const y = container.clientHeight / 2 + scrollTop;\n\n      // Clamp to the full scroll size\n      const clampedX = Math.max(0, Math.min(x, container.scrollWidth));\n      const clampedY = Math.max(0, Math.min(y, container.scrollHeight));\n\n      return { x: clampedX, y: clampedY };\n    }\n\n    // If the target reference is missing, fall back to viewport coordinates.\n    if (!container) {\n      const { clientX = 0, clientY = 0 } = event;\n\n      return { x: clientX, y: clientY };\n    }\n\n    const containerRect = container.getBoundingClientRect();\n\n    // Get coordinates from the event (viewport-relative)\n    const { clientX, clientY } = event;\n\n    // Take the element's scroll offset into account so that the coordinates are\n    // relative to the **content** box, not the visible viewport of the\n    // element.\n    const scrollLeft = container.scrollLeft;\n    const scrollTop = container.scrollTop;\n\n    const computed = window.getComputedStyle(container);\n    const borderLeft = parseFloat(computed.borderLeftWidth) || 0;\n    const borderTop = parseFloat(computed.borderTopWidth) || 0;\n\n    const x = clientX - containerRect.left - borderLeft + scrollLeft;\n    const y = clientY - containerRect.top - borderTop + scrollTop;\n\n    // Clamp to the full scroll size so that the invisible anchor always stays\n    // inside the element regardless of the scroll position.\n    const clampedX = Math.max(0, Math.min(x, container.scrollWidth));\n    const clampedY = Math.max(0, Math.min(y, container.scrollHeight));\n\n    return { x: clampedX, y: clampedY };\n  };\n\n  // 'open' accepts props, trigger props, and optional event for positioning, then opens the menu\n  const open = useEvent(\n    (\n      props: P = {} as P,\n      triggerProps?: T,\n      event?: NativeMouseEvent | NativePointerEvent | MouseEvent | PointerEvent,\n    ) => {\n      setupCheck();\n\n      // Ensure the target element can serve as a positioning context for the\n      // invisible target element. If the consumer hasn't explicitly set\n      // `position: relative | absolute | fixed | sticky` we switch it to\n      // `relative` so that absolutely-positioned children are laid out correctly.\n      if (targetRef.current) {\n        const computedStyle = window.getComputedStyle(targetRef.current);\n\n        if (computedStyle.position === 'static') {\n          targetRef.current.style.position = 'relative';\n        }\n      }\n\n      // Prevent default context menu if it's a context menu event\n      if (\n        event &&\n        'preventDefault' in event &&\n        typeof event.preventDefault === 'function'\n      ) {\n        event.preventDefault();\n      }\n\n      const { x, y } = calculatePosition(event);\n      setAnchorPosition({ x, y });\n\n      // Merge defaultMenuProps with provided props\n      const finalProps = defaultMenuProps\n        ? { ...defaultMenuProps, ...props }\n        : props;\n\n      setComponentProps(finalProps);\n      setTriggerProps(triggerProps ?? null);\n      setIsOpen(true);\n    },\n  );\n\n  const update = useEvent((props: P, triggerProps?: T) => {\n    setupCheck();\n\n    // Merge defaultMenuProps with provided props\n    const finalProps = defaultMenuProps\n      ? { ...defaultMenuProps, ...props }\n      : props;\n\n    setComponentProps(finalProps as P);\n    setTriggerProps(triggerProps ?? null);\n  });\n\n  const close = useEvent(() => {\n    setIsOpen(false);\n    setAnchorPosition(null);\n  });\n\n  // Context menu event handler\n  const onContextMenu = useEvent(\n    (event: MouseEvent | PointerEvent | MouseEvent | PointerEvent) => {\n      event.preventDefault();\n      if (isOpen) {\n        const pos = calculatePosition(event);\n        setAnchorPosition(pos);\n      } else {\n        open(defaultMenuProps, undefined, event);\n      }\n    },\n  );\n\n  // Bind the onContextMenu event to targetRef\n  useEffect(() => {\n    const element = targetRef.current;\n    if (!element) return;\n\n    element.addEventListener('contextmenu', onContextMenu as any);\n\n    return () => {\n      element.removeEventListener('contextmenu', onContextMenu as any);\n    };\n  }, [onContextMenu]);\n\n  // Render the menu only when componentProps is set\n  const renderedMenu = useMemo(() => {\n    if (!componentProps || !anchorPosition) return null;\n\n    return (\n      <>\n        {/* Invisible anchor element positioned at click coordinates */}\n        <span\n          ref={invisibleAnchorRef}\n          style={{\n            position: 'absolute',\n            left: `${anchorPosition.x}px`,\n            top: `${anchorPosition.y}px`,\n            width: '0px',\n            height: '0px',\n            lineHeight: '0',\n            pointerEvents: 'none',\n            visibility: 'hidden',\n          }}\n        />\n        <MenuTrigger\n          isDummy\n          isOpen={isOpen}\n          targetRef={invisibleAnchorRef}\n          offset={0}\n          crossOffset={0}\n          placement={\n            (triggerProps as ComponentProps<typeof MenuTrigger>)?.placement ||\n            defaultTriggerProps?.placement ||\n            'bottom start'\n          }\n          onOpenChange={setIsOpen}\n          {...mergeProps(defaultTriggerProps, triggerProps || undefined)}\n        >\n          <VisuallyHidden>\n            <Pressable>\n              <button aria-label=\"Open context menu\" />\n            </Pressable>\n          </VisuallyHidden>\n          <Component {...componentProps} />\n        </MenuTrigger>\n      </>\n    );\n  }, [\n    componentProps,\n    triggerProps,\n    isOpen,\n    defaultTriggerProps,\n    anchorPosition,\n  ]);\n\n  return {\n    targetRef,\n    open,\n    update,\n    close,\n    isOpen,\n    get rendered() {\n      setupRef.current = true;\n\n      return renderedMenu;\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/components/content/ActiveZone/ActiveZone.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";

package/dist/components/content/Alert/Alert.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import themes_default from "../../../data/themes.js";
 import { useAlert } from "./use-alert.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Alert/use-alert.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useDeprecationWarning } from "../../../_internal/hooks/use-deprecation-warning.js";
 import { CONTAINER_STYLES, TEXT_STYLES, filterBaseProps } from "@tenphi/tasty";

package/dist/components/content/Avatar/Avatar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { CONTAINER_STYLES, Element, filterBaseProps } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/Badge/Badge.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import themes_default from "../../../data/themes.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Card/Card.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
@@ -11,7 +11,7 @@ const CardElement = tasty({
 		display: "block",
 		flow: "column",
 		radius: "(1cr + 1bw)",
-		fill: "#white",
+		fill: "#surface",
 		border: "#border",
 		padding: "1.5x",
 		preset: "t3"

package/dist/components/content/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":[],"sources":["../../../../src/components/content/Card/Card.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../../utils/styles';\n\nconst CardElement = tasty({\n  role: 'region',\n  styles: {\n    display: 'block',\n    flow: 'column',\n    radius: '(1cr + 1bw)',\n    fill: '#white',\n    border: '#border',\n    padding: '1.5x',\n    preset: 't3',\n  },\n  styleProps: CONTAINER_STYLES,\n});\n\nexport interface CubeCardProps\n  extends Omit<AllBaseProps, 'title' | 'value' | 'placeholder' | 'text'>,\n    ContainerStyleProps {}\n\nexport const Card = forwardRef(function Card(props: CubeCardProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES);\n\n  return (\n    <CardElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAWA,MAAM,cAAc,MAAM;CACxB,MAAM;CACN,QAAQ;EACN,SAAS;EACT,MAAM;EACN,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,SAAS;EACT,QAAQ;EACT;CACD,YAAY;CACb,CAAC;AAMF,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,iBAAiB;AAErD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}
+{"version":3,"file":"Card.js","names":[],"sources":["../../../../src/components/content/Card/Card.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../../utils/styles';\n\nconst CardElement = tasty({\n  role: 'region',\n  styles: {\n    display: 'block',\n    flow: 'column',\n    radius: '(1cr + 1bw)',\n    fill: '#surface',\n    border: '#border',\n    padding: '1.5x',\n    preset: 't3',\n  },\n  styleProps: CONTAINER_STYLES,\n});\n\nexport interface CubeCardProps\n  extends Omit<AllBaseProps, 'title' | 'value' | 'placeholder' | 'text'>,\n    ContainerStyleProps {}\n\nexport const Card = forwardRef(function Card(props: CubeCardProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES);\n\n  return (\n    <CardElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAWA,MAAM,cAAc,MAAM;CACxB,MAAM;CACN,QAAQ;EACN,SAAS;EACT,MAAM;EACN,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,SAAS;EACT,QAAQ;EACT;CACD,YAAY;CACb,CAAC;AAMF,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,iBAAiB;AAErD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}

package/dist/components/content/Content.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { CONTAINER_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useTimer } from "../../../_internal/hooks/use-timer/use-timer.js";
 import { CopyIcon } from "../../../icons/CopyIcon.js";

package/dist/components/content/CopySnippet/CopySnippet.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import { _Tooltip } from "../../overlays/Tooltip/Tooltip.js";
 import { TooltipTrigger } from "../../overlays/Tooltip/TooltipTrigger.js";
 import { CopyIcon } from "../../../icons/CopyIcon.js";

package/dist/components/content/Disclosure/Disclosure.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d52ee0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
@@ -39,7 +39,7 @@ const DisclosureRoot = tasty({
 		},
 		fill: {
 			"": false,
-			"shape=card": "#white"
+			"shape=card": "#surface"
 		}
 	}
 });