@cube-dev/ui-kit 0.193.2 → 0.194.1

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

@@ -1 +1 @@
-{"version":3,"file":"HotKeys.js","names":["BasePropsWithoutChildren","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","tasty","Children","forwardRef","Fragment","useKeySymbols","extractStyles","Space","Text","StyledHotKeys","qa","role","styles","display","flow","gap","placeSelf","KeyElement","as","placeContent","placeItems","radius","preset","boxSizing","width","height","textAlign","whiteSpace","padding","color","fill","border","CubeHotKeysProps","children","type","HotKeys","props","ref","$","_c","otherProps","t0","toArray","join","parsedKeys","T0","t1","t2","eventProps","labelable","t3","t4","keyGroup","groupIndex","map","key","keyIndex","_HotKeys","displayName"],"sources":["../../../../src/components/content/HotKeys/HotKeys.tsx"],"sourcesContent":["import {\n  BasePropsWithoutChildren,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { Children, forwardRef, Fragment } from 'react';\n\nimport { useKeySymbols } from '../../../utils/react/useKeySymbols';\nimport { extractStyles } from '../../../utils/styles';\nimport { Space } from '../../layout/Space';\nimport { Text } from '../Text';\n\nconst StyledHotKeys = tasty(Space, {\n  qa: 'HotKeys',\n  role: 'group',\n  'aria-label': 'Keyboard shortcuts',\n  styles: {\n    display: 'inline-flex',\n    flow: 'row',\n    gap: '1x',\n    placeSelf: 'center',\n  },\n});\n\nconst KeyElement = tasty({\n  as: 'kbd',\n  role: 'text',\n  styles: {\n    display: 'inline-flex',\n    placeContent: 'center',\n    placeItems: 'center start',\n    radius: '1r',\n    preset: 'tag',\n    boxSizing: 'border-box',\n    width: '2.5x max-content max-content',\n    height: 'min-content',\n    textAlign: 'left',\n    whiteSpace: 'nowrap',\n    padding: '0 (.5x - 1bw)',\n    color: {\n      '': '#dark.65',\n      'type=primary': '#white',\n      'type=inherit': '#current',\n    },\n    fill: {\n      '': '#dark.04',\n      'type=primary | type=inherit': '#clear',\n    },\n    border: {\n      '': true,\n      'type=primary': '#white',\n      'type=inherit': '#current',\n    },\n  },\n});\n\nexport interface CubeHotKeysProps\n  extends BasePropsWithoutChildren,\n    ContainerStyleProps {\n  /**\n   * Key combinations, such as `\"mod+k, ctrl+k\"`. An array of text, which\n   * `<Trans>` passes to a component slot, is joined into one string first.\n   */\n  children?: string | readonly (string | number)[];\n  type?: 'default' | 'primary' | 'inherit';\n}\n\nfunction HotKeys(props: CubeHotKeysProps, ref) {\n  const { children, type, ...otherProps } = props;\n  const parsedKeys = useKeySymbols(Children.toArray(children).join(''));\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  return (\n    <StyledHotKeys\n      qa=\"HotKeys\"\n      {...filterBaseProps(otherProps, { eventProps: true, labelable: true })}\n      ref={ref}\n      styles={styles}\n    >\n      {parsedKeys.map((keyGroup, groupIndex) => (\n        <Fragment key={groupIndex}>\n          {groupIndex > 0 && (\n            <Text color=\"#dark-03\" role=\"separator\" aria-hidden=\"true\">\n              or\n            </Text>\n          )}\n          <Space\n            flow=\"row\"\n            gap=\"0.25x\"\n            role=\"group\"\n            aria-label={`Key combination ${groupIndex + 1}`}\n          >\n            {keyGroup.map((key, keyIndex) => (\n              <KeyElement\n                key={keyIndex}\n                data-type={type}\n                as=\"kbd\"\n                role=\"text\"\n                aria-label={`Key ${key}`}\n              >\n                {key}\n              </KeyElement>\n            ))}\n          </Space>\n        </Fragment>\n      ))}\n    </StyledHotKeys>\n  );\n}\n\nconst _HotKeys = forwardRef(HotKeys);\n\n_HotKeys.displayName = 'HotKeys';\n\nexport { _HotKeys as HotKeys };\n"],"mappings":";;;;;;;;;;;AAcA,MAAMY,gBAAgBR,MAAMM,OAAO;CACjCG,IAAI;CACJC,MAAM;CACN,cAAc;CACdC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,KAAK;EACLC,WAAW;EACb;CACD,CAAC;AAEF,MAAMC,aAAahB,MAAM;CACvBiB,IAAI;CACJP,MAAM;CACNC,QAAQ;EACNC,SAAS;EACTM,cAAc;EACdC,YAAY;EACZC,QAAQ;EACRC,QAAQ;EACRC,WAAW;EACXC,OAAO;EACPC,QAAQ;EACRC,WAAW;EACXC,YAAY;EACZC,SAAS;EACTC,OAAO;GACL,IAAI;GACJ,gBAAgB;GAChB,gBAAgB;GACjB;EACDC,MAAM;GACJ,IAAI;GACJ,+BAA+B;GAChC;EACDC,QAAQ;GACN,IAAI;GACJ,gBAAgB;GAChB,gBAAgB;GAClB;EACF;CACD,CAAC;AAaF,SAAAI,QAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CACE,MAAA,EAAAN,UAAAC,MAAA,GAAAM,eAA0CJ;CAAM,IAAAK;AAAA,KAAAH,EAAA,OAAAL,UAAA;AACfQ,OAAAvC,SAAQwC,QAAST,SAAS,CAAAU,KAAM,GAAG;AAAAL,IAAA,KAAAL;AAAAK,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CAApE,MAAAM,aAAmBvC,cAAcoC,GAAoC;CACrE,MAAA7B,SAAeN,cAAckC,YAAY1C,iBAAiB;CAGvD,MAAA+C,KAAApC;CACI,MAAAqC,KAAA;CACC,MAAAC,KAAA/C,gBAAgBwC,YAAY;EAAAQ,YAAc;EAAIC,WAAa;EAAM,CAAC;CAAA,IAAAC;AAAA,KAAAZ,EAAA,OAAAM,cAAAN,EAAA,OAAAJ,MAAA;EAAA,IAAAiB;AAAA,MAAAb,EAAA,OAAAJ,MAAA;AAItDiB,SAAAC,UAAAC,eACd,qBAAC,uBACEA,aAAa,KACZ,oBAAC;IAAW,OAAA;IAAgB,MAAA;IAAwB,eAAA;cAAO;KAG7D,EACA,oBAAC;IACM,MAAA;IACD,KAAA;IACC,MAAA;IACO,cAAA,mBAAmBA,aAAa;cAE3CD,SAAQE,KAAKC,KAAAC,aACZ,oBAAC;KAEYtB,aAAAA;KACR,IAAA;KACE,MAAA;KACO,cAAA,OAAOqB;eAElBA;OANIC,SAQR,CAAA;KAEL,KAxBeH,WAyBhB;AAAAf,KAAA,KAAAJ;AAAAI,KAAA,KAAAa;QAAAA,MAAAb,EAAA;AA1BAY,OAAAN,WAAUU,IAAKH,GA0Bd;AAAAb,IAAA,KAAAM;AAAAN,IAAA,KAAAJ;AAAAI,IAAA,KAAAY;OAAAA,MAAAZ,EAAA;CAAA,IAAAa;AAAA,KAAAb,EAAA,OAAAO,MAAAP,EAAA,OAAAD,OAAAC,EAAA,OAAA1B,UAAA0B,EAAA,QAAAS,MAAAT,EAAA,QAAAY,IAAA;AAhCJC,OAAA,oBAAC;GACI,IAAAL;GAAS,GACRC;GACCV;GACGzB;aAEPsC;IA2Ba;AAAAZ,IAAA,KAAAO;AAAAP,IAAA,KAAAD;AAAAC,IAAA,KAAA1B;AAAA0B,IAAA,MAAAS;AAAAT,IAAA,MAAAY;AAAAZ,IAAA,MAAAa;OAAAA,MAAAb,EAAA;AAAA,QAjChBa;;AAqCJ,MAAMM,WAAWtD,WAAWgC,QAAQ;AAEpCsB,SAASC,cAAc"}
+{"version":3,"file":"HotKeys.js","names":["BasePropsWithoutChildren","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","tasty","Children","forwardRef","Fragment","useI18n","useKeySymbols","extractStyles","Space","Text","StyledHotKeys","qa","role","styles","display","flow","gap","placeSelf","KeyElement","as","placeContent","placeItems","radius","preset","boxSizing","width","height","textAlign","whiteSpace","padding","color","fill","border","CubeHotKeysProps","children","type","HotKeys","props","ref","$","_c","otherProps","t","t0","toArray","join","parsedKeys","T0","t1","t2","t3","eventProps","labelable","t4","t5","keyGroup","groupIndex","index","map","key","keyIndex","_HotKeys","displayName"],"sources":["../../../../src/components/content/HotKeys/HotKeys.tsx"],"sourcesContent":["import {\n  BasePropsWithoutChildren,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { Children, forwardRef, Fragment } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { useKeySymbols } from '../../../utils/react/useKeySymbols';\nimport { extractStyles } from '../../../utils/styles';\nimport { Space } from '../../layout/Space';\nimport { Text } from '../Text';\n\nconst StyledHotKeys = tasty(Space, {\n  qa: 'HotKeys',\n  role: 'group',\n  styles: {\n    display: 'inline-flex',\n    flow: 'row',\n    gap: '1x',\n    placeSelf: 'center',\n  },\n});\n\nconst KeyElement = tasty({\n  as: 'kbd',\n  role: 'text',\n  styles: {\n    display: 'inline-flex',\n    placeContent: 'center',\n    placeItems: 'center start',\n    radius: '1r',\n    preset: 'tag',\n    boxSizing: 'border-box',\n    width: '2.5x max-content max-content',\n    height: 'min-content',\n    textAlign: 'left',\n    whiteSpace: 'nowrap',\n    padding: '0 (.5x - 1bw)',\n    color: {\n      '': '#dark.65',\n      'type=primary': '#white',\n      'type=inherit': '#current',\n    },\n    fill: {\n      '': '#dark.04',\n      'type=primary | type=inherit': '#clear',\n    },\n    border: {\n      '': true,\n      'type=primary': '#white',\n      'type=inherit': '#current',\n    },\n  },\n});\n\nexport interface CubeHotKeysProps\n  extends BasePropsWithoutChildren,\n    ContainerStyleProps {\n  /**\n   * Key combinations, such as `\"mod+k, ctrl+k\"`. An array of text, which\n   * `<Trans>` passes to a component slot, is joined into one string first.\n   */\n  children?: string | readonly (string | number)[];\n  type?: 'default' | 'primary' | 'inherit';\n}\n\nfunction HotKeys(props: CubeHotKeysProps, ref) {\n  const { children, type, ...otherProps } = props;\n  const { t } = useI18n();\n  const parsedKeys = useKeySymbols(Children.toArray(children).join(''));\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  return (\n    <StyledHotKeys\n      qa=\"HotKeys\"\n      aria-label={t('hotKeys.ariaLabel', 'Keyboard shortcuts')}\n      {...filterBaseProps(otherProps, { eventProps: true, labelable: true })}\n      ref={ref}\n      styles={styles}\n    >\n      {parsedKeys.map((keyGroup, groupIndex) => (\n        <Fragment key={groupIndex}>\n          {groupIndex > 0 && (\n            <Text color=\"#dark-03\" role=\"separator\" aria-hidden=\"true\">\n              {t('hotKeys.or', 'or')}\n            </Text>\n          )}\n          <Space\n            flow=\"row\"\n            gap=\"0.25x\"\n            role=\"group\"\n            aria-label={t('hotKeys.combination', 'Key combination {{index}}', {\n              index: groupIndex + 1,\n            })}\n          >\n            {keyGroup.map((key, keyIndex) => (\n              <KeyElement\n                key={keyIndex}\n                data-type={type}\n                as=\"kbd\"\n                role=\"text\"\n                aria-label={t('hotKeys.key', 'Key {{key}}', { key })}\n              >\n                {key}\n              </KeyElement>\n            ))}\n          </Space>\n        </Fragment>\n      ))}\n    </StyledHotKeys>\n  );\n}\n\nconst _HotKeys = forwardRef(HotKeys);\n\n_HotKeys.displayName = 'HotKeys';\n\nexport { _HotKeys as HotKeys };\n"],"mappings":"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"}

package/dist/components/content/InfoBadge/InfoBadge.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { ItemBadge } from "../ItemBadge/ItemBadge.js";

package/dist/components/content/InlineInput/InlineInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/content/Item/Item.d.ts

@@ -1,17 +1,16 @@
 
 import { Props } from "../../../props.js";
 import { CubeTooltipProviderProps } from "../../overlays/Tooltip/TooltipProvider.js";
+import { CubeItemActionProps } from "../../actions/ItemAction/ItemAction.js";
 import { DynamicIcon } from "../../../utils/react/resolveIcon.js";
 import "../../../utils/react/index.js";
 import { CubeItemBadgeProps } from "../ItemBadge/ItemBadge.js";
 import "./index.js";
+import "../../actions/index.js";
 import { ItemVariant } from "../../../data/item-themes.js";
 import { TooltipFocusProps } from "../../overlays/Tooltip/split-trigger-props.js";
-import { CubeItemActionProps } from "../../actions/ItemAction/ItemAction.js";
-import "../../actions/index.js";
 import { BaseProps, ContainerStyleProps, Mods, Styles } from "@tenphi/tasty";
-import * as react from "react";
-import { ReactNode, Ref } from "react";
+import { ForwardRefExoticComponent, HTMLAttributes, ReactNode, Ref, RefAttributes } from "react";
 import { PositionProps } from "react-aria";
 import * as _react_types_shared0 from "@react-types/shared";
 
@@ -203,10 +202,11 @@ interface CubeItemProps extends BaseProps, ContainerStyleProps {
    */
   variant?: ItemVariant;
 }
-declare const _Item: react.ForwardRefExoticComponent<CubeItemProps & react.RefAttributes<HTMLElement>> & {
-  Action: react.ForwardRefExoticComponent<CubeItemActionProps & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
-  Badge: react.ForwardRefExoticComponent<CubeItemBadgeProps & react.RefAttributes<HTMLDivElement>>;
+declare const _Item: ForwardRefExoticComponent<CubeItemProps & RefAttributes<HTMLElement>> & {
+  Action: ForwardRefExoticComponent<CubeItemActionProps & RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+  Badge: ForwardRefExoticComponent<CubeItemBadgeProps & RefAttributes<HTMLDivElement>>;
 };
+/** @private Preserves Item layout around native menu targets. */
 //#endregion
 export { CubeItemProps, ItemMods, _Item };
 //# sourceMappingURL=Item.d.ts.map

package/dist/components/content/Item/Item.js

@@ -1,8 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
-import { getDisabledElementProps, omitActivationEventProps } from "../../../utils/react/disabledProps.js";
+/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
-import { resolveIcon } from "../../../utils/react/resolveIcon.js";
 import { highlightText } from "../highlightText.js";
+import { getDisabledElementProps, omitActivationEventProps } from "../../../utils/react/disabledProps.js";
+import { resolveIcon } from "../../../utils/react/resolveIcon.js";
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { useAutoTooltip } from "../use-auto-tooltip.js";
 import { ITEM_VARIANTS, resolveItemVariant } from "../../../data/item-themes.js";
@@ -12,10 +12,10 @@ import { ItemActionProvider } from "../../actions/ItemActionContext.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { ItemBadge } from "../ItemBadge/ItemBadge.js";
 import { IconSwitch } from "../../helpers/IconSwitch/IconSwitch.js";
-import { splitTooltipTriggerProps } from "../../overlays/Tooltip/split-trigger-props.js";
+import { mergeTooltipFocusProps, splitTooltipTriggerProps } from "../../overlays/Tooltip/split-trigger-props.js";
 import { _HotKeys } from "../HotKeys/HotKeys.js";
 import { c } from "react/compiler-runtime";
-import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, tasty, useGlobalStyles } from "@tenphi/tasty";
 import { forwardRef, isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -56,6 +56,7 @@ const ACTIONS_EVENT_HANDLERS = {
 const ItemElement = tasty({
 	as: "div",
 	styles: {
+		"@native-row": "menu-native-row",
 		"@interacted": "active | :hover | :focus | :focus-within | :has([data-pressed])",
 		display: "inline-grid",
 		flow: "column dense",
@@ -192,6 +193,10 @@ const ItemElement = tasty({
 		Label: {
 			$: ">",
 			margin: 0,
+			zIndex: {
+				"": void 0,
+				"@native-row": 1
+			},
 			gridArea: "label",
 			display: "block",
 			placeSelf: "center start",
@@ -236,6 +241,14 @@ const ItemElement = tasty({
 			placeItems: "center",
 			placeContent: "stretch",
 			gridArea: "prefix",
+			zIndex: {
+				"": void 0,
+				"@native-row": 1
+			},
+			pointerEvents: {
+				"": void 0,
+				"@native-row": "none"
+			},
 			padding: {
 				"": "0 $prefix-gap 0 $inline-padding",
 				"has-icon": "$prefix-gap right"
@@ -248,6 +261,14 @@ const ItemElement = tasty({
 			placeItems: "center",
 			placeContent: "stretch",
 			gridArea: "suffix",
+			zIndex: {
+				"": void 0,
+				"@native-row": 1
+			},
+			pointerEvents: {
+				"": void 0,
+				"@native-row": "none"
+			},
 			padding: {
 				"": "0 $inline-padding 0 $suffix-gap",
 				"has-right-icon | (has-actions & inside-wrapper)": "$suffix-gap left"
@@ -256,6 +277,14 @@ const ItemElement = tasty({
 		Actions: {
 			$: ">",
 			gridArea: "actions",
+			zIndex: {
+				"": void 0,
+				"@native-row": 1
+			},
+			pointerEvents: {
+				"": void 0,
+				"@native-row": "none"
+			},
 			display: "flex",
 			gap: "1bw",
 			placeItems: "center",
@@ -505,9 +534,32 @@ function useHotkeyClick(hotkeys, isDisabled, ref) {
 function highlightContent(content, highlight, caseSensitive, highlightStyles) {
 	return typeof content === "string" && highlight ? highlightText(content, highlight, caseSensitive, highlightStyles) : content;
 }
+const NativeItemLink = tasty({
+	as: "a",
+	styles: {
+		display: "block",
+		color: "inherit",
+		textDecoration: "none",
+		outline: 0,
+		zIndex: {
+			"": "auto",
+			"row-native-cell": 1
+		}
+	}
+});
+const NATIVE_ROW_TARGET_STYLES = {
+	position: "absolute",
+	inset: "($native-row-inset, 0)",
+	width: "($native-row-width, auto)",
+	height: "($native-row-height, auto)",
+	clipPath: "($native-row-clip, none)",
+	zIndex: 0
+};
+const NATIVE_ROW_CONTROL_SELECTOR = ":where([data-menu-native-row]) :where([data-element=Prefix],[data-element=Suffix],[data-element=Actions]) :where(a[href],button,input,select,textarea,label[for],label:has(button,input,select,textarea),[tabindex],[contenteditable=\"\"],[contenteditable=\"true\"],[contenteditable=\"plaintext-only\"],[role=\"button\"],[role=\"checkbox\"],[role=\"switch\"],[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"],[role=\"radio\"],[role=\"textbox\"],[role=\"combobox\"],[role=\"slider\"],[role=\"spinbutton\"],[role=\"link\"])";
+const NATIVE_ROW_CONTROL_STYLES = { pointerEvents: "auto" };
 const Item = (props, ref) => {
-	const $ = c(75);
-	const { children, size: t0, type: t1, theme: t2, mods, icon: iconProp, rightIcon: rightIconProp, prefix, suffix, description, descriptionPlacement, labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip: t3, isDisabled, disabled: nativeDisabledProp, style, loadingSlot: t4, isLoading: t5, actions, autoHideActions: t6, preserveActionsSpace: t7, disableActionsFocus: t8, shape, defaultTooltipPlacement: t9, level: t10, highlight, highlightCaseSensitive: t11, highlightStyles, insideWrapper: t12, showActions: t13, skipActionsWidthTransition: t14, hiddenContent, isDynamicLabel: t15, labelRef: labelRefProp, tokens, ...rest } = props;
+	const $ = c(78);
+	const { children, size: t0, type: t1, theme: t2, mods, icon: iconProp, rightIcon: rightIconProp, prefix, suffix, description, descriptionPlacement, labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip: t3, isDisabled, disabled: nativeDisabledProp, style, loadingSlot: t4, isLoading: t5, actions, autoHideActions: t6, preserveActionsSpace: t7, disableActionsFocus: t8, shape, defaultTooltipPlacement: t9, level: t10, highlight, highlightCaseSensitive: t11, highlightStyles, insideWrapper: t12, showActions: t13, skipActionsWidthTransition: t14, hiddenContent, isDynamicLabel: t15, labelRef: labelRefProp, nativeLinkProps, nativeMenuItemProps, nativeRowRef, nativeLabelReferenceId, onInlineFocus, onNativeLinkElement, onNativeElement, tokens, ...rest } = props;
 	const size = t0 === void 0 ? "medium" : t0;
 	const type = t1 === void 0 ? "item" : t1;
 	const theme = t2 === void 0 ? "default" : t2;
@@ -524,6 +576,7 @@ const Item = (props, ref) => {
 	const showActions = t13 === void 0 ? false : t13;
 	const skipActionsWidthTransition = t14 === void 0 ? false : t14;
 	const isDynamicLabel = t15 === void 0 ? false : t15;
+	useGlobalStyles(NATIVE_ROW_CONTROL_SELECTOR, nativeMenuItemProps ? NATIVE_ROW_CONTROL_STYLES : void 0);
 	const hasLabel = !!(children || labelProps);
 	const finalDescriptionPlacement = descriptionPlacement ?? ((type === "card" || type === "header") && hasLabel ? "block" : "inline");
 	const finalShape = shape ?? (type === "card" ? "card" : "button");
@@ -650,14 +703,15 @@ const Item = (props, ref) => {
 	const t24 = !!finalSuffix;
 	const t25 = !!actions;
 	const t26 = !!(actions && actions !== true);
-	const t27 = autoHideActions === true;
-	const t28 = preserveActionsSpace === true;
-	const t29 = showActions && insideWrapper;
-	const t30 = skipActionsWidthTransition && insideWrapper;
-	const t31 = showDescription ? finalDescriptionPlacement : "none";
-	let t32;
-	if ($[38] !== baseMods || $[39] !== hasCheckmark || $[40] !== hasLabel || $[41] !== iconSlot.hasSlot || $[42] !== insideWrapper || $[43] !== rightIconSlot.hasSlot || $[44] !== showDescription || $[45] !== t21 || $[46] !== t22 || $[47] !== t23 || $[48] !== t24 || $[49] !== t25 || $[50] !== t26 || $[51] !== t27 || $[52] !== t28 || $[53] !== t29 || $[54] !== t30 || $[55] !== t31) {
-		t32 = {
+	const t27 = !!nativeMenuItemProps;
+	const t28 = autoHideActions === true;
+	const t29 = preserveActionsSpace === true;
+	const t30 = showActions && insideWrapper;
+	const t31 = skipActionsWidthTransition && insideWrapper;
+	const t32 = showDescription ? finalDescriptionPlacement : "none";
+	let t33;
+	if ($[38] !== baseMods || $[39] !== hasCheckmark || $[40] !== hasLabel || $[41] !== iconSlot.hasSlot || $[42] !== insideWrapper || $[43] !== rightIconSlot.hasSlot || $[44] !== showDescription || $[45] !== t21 || $[46] !== t22 || $[47] !== t23 || $[48] !== t24 || $[49] !== t25 || $[50] !== t26 || $[51] !== t27 || $[52] !== t28 || $[53] !== t29 || $[54] !== t30 || $[55] !== t31 || $[56] !== t32) {
+		t33 = {
 			...baseMods,
 			"has-icon": iconSlot.hasSlot,
 			"has-start-content": t21,
@@ -669,13 +723,14 @@ const Item = (props, ref) => {
 			"has-description": showDescription,
 			"has-actions": t25,
 			"has-actions-content": t26,
-			"auto-hide-actions": t27,
-			"preserve-actions-space": t28,
+			"menu-native-row": t27,
+			"auto-hide-actions": t28,
+			"preserve-actions-space": t29,
 			"inside-wrapper": insideWrapper,
-			"actions-shown": t29,
-			"skip-actions-width-transition": t30,
+			"actions-shown": t30,
+			"skip-actions-width-transition": t31,
 			checkmark: hasCheckmark,
-			description: t31
+			description: t32
 		};
 		$[38] = baseMods;
 		$[39] = hasCheckmark;
@@ -696,62 +751,72 @@ const Item = (props, ref) => {
 		$[54] = t30;
 		$[55] = t31;
 		$[56] = t32;
-	} else t32 = $[56];
-	const finalMods = t32;
-	const t33 = descriptionProps?.ref;
-	const t34 = isDynamicLabel || !!actions || insideWrapper;
+		$[57] = t33;
+	} else t33 = $[57];
+	const finalMods = t33;
+	const t34 = finalMods["menu-native-row"];
 	let t35;
-	if ($[57] !== children || $[58] !== description || $[59] !== labelProps || $[60] !== labelRefProp || $[61] !== t33 || $[62] !== t34 || $[63] !== tooltip) {
-		t35 = {
+	if ($[58] !== t34) {
+		t35 = { "row-native-cell": t34 };
+		$[58] = t34;
+		$[59] = t35;
+	} else t35 = $[59];
+	const nativeCellMods = t35;
+	const t36 = descriptionProps?.ref;
+	const t37 = isDynamicLabel || !!actions || insideWrapper;
+	let t38;
+	if ($[60] !== children || $[61] !== description || $[62] !== labelProps || $[63] !== labelRefProp || $[64] !== t36 || $[65] !== t37 || $[66] !== tooltip) {
+		t38 = {
 			tooltip,
 			children,
 			description,
 			labelProps,
 			labelRef: labelRefProp,
-			descriptionRef: t33,
-			isDynamicLabel: t34
+			descriptionRef: t36,
+			isDynamicLabel: t37
 		};
-		$[57] = children;
-		$[58] = description;
-		$[59] = labelProps;
-		$[60] = labelRefProp;
-		$[61] = t33;
-		$[62] = t34;
-		$[63] = tooltip;
-		$[64] = t35;
-	} else t35 = $[64];
-	const { labelProps: finalLabelProps, labelRef, descriptionRef, renderWithTooltip, isTooltipActive } = useAutoTooltip(t35);
+		$[60] = children;
+		$[61] = description;
+		$[62] = labelProps;
+		$[63] = labelRefProp;
+		$[64] = t36;
+		$[65] = t37;
+		$[66] = tooltip;
+		$[67] = t38;
+	} else t38 = $[67];
+	const { labelProps: finalLabelProps, labelRef, descriptionRef, renderWithTooltip, isTooltipActive } = useAutoTooltip(t38);
 	const { isNativelyDisabled, isInert, inertProps } = getDisabledElementProps({
 		isDisabled: finalIsDisabled,
 		keepEvents: isTooltipActive,
 		as: rest.as
 	});
-	let t36;
-	if ($[65] !== children || $[66] !== highlight || $[67] !== highlightCaseSensitive || $[68] !== highlightStyles) {
-		t36 = highlightContent(children, highlight, highlightCaseSensitive, highlightStyles);
-		$[65] = children;
-		$[66] = highlight;
-		$[67] = highlightCaseSensitive;
-		$[68] = highlightStyles;
-		$[69] = t36;
-	} else t36 = $[69];
-	const processedChildren = t36;
-	let t37;
-	if ($[70] !== description || $[71] !== highlight || $[72] !== highlightCaseSensitive || $[73] !== highlightStyles) {
-		t37 = highlightContent(description, highlight, highlightCaseSensitive, highlightStyles);
-		$[70] = description;
-		$[71] = highlight;
-		$[72] = highlightCaseSensitive;
-		$[73] = highlightStyles;
-		$[74] = t37;
-	} else t37 = $[74];
-	const processedDescription = t37;
+	let t39;
+	if ($[68] !== children || $[69] !== highlight || $[70] !== highlightCaseSensitive || $[71] !== highlightStyles) {
+		t39 = highlightContent(children, highlight, highlightCaseSensitive, highlightStyles);
+		$[68] = children;
+		$[69] = highlight;
+		$[70] = highlightCaseSensitive;
+		$[71] = highlightStyles;
+		$[72] = t39;
+	} else t39 = $[72];
+	const processedChildren = t39;
+	let t40;
+	if ($[73] !== description || $[74] !== highlight || $[75] !== highlightCaseSensitive || $[76] !== highlightStyles) {
+		t40 = highlightContent(description, highlight, highlightCaseSensitive, highlightStyles);
+		$[73] = description;
+		$[74] = highlight;
+		$[75] = highlightCaseSensitive;
+		$[76] = highlightStyles;
+		$[77] = t40;
+	} else t40 = $[77];
+	const processedDescription = t40;
 	const renderItemElement = (tooltipTriggerProps, tooltipRef) => {
-		const { pointerProps: elementTooltipProps, focusProps: tooltipFocusProps } = typeof hiddenContent === "function" ? splitTooltipTriggerProps(tooltipTriggerProps) : {
+		const { pointerProps: elementTooltipProps, focusProps: tooltipFocusProps } = typeof hiddenContent === "function" || nativeMenuItemProps ? splitTooltipTriggerProps(tooltipTriggerProps) : {
 			pointerProps: tooltipTriggerProps,
 			focusProps: void 0
 		};
 		const handleRef = (element) => {
+			onNativeElement?.(element);
 			if (typeof ref === "function") ref(element);
 			else if (ref) ref.current = element;
 			if (tooltipRef) tooltipRef.current = element;
@@ -767,28 +832,96 @@ const Item = (props, ref) => {
 			tokens: finalTokens,
 			type: htmlType,
 			...mergeProps(isInert ? omitActivationEventProps(rest) : rest, elementTooltipProps || {}, inertProps),
+			...nativeMenuItemProps ? {
+				"aria-disabled": void 0,
+				"aria-selected": void 0
+			} : null,
 			style,
 			children: [
+				nativeMenuItemProps ? /* @__PURE__ */ jsx(NativeItemLink, {
+					...mergeTooltipFocusProps(mergeProps(nativeLinkProps, nativeMenuItemProps), tooltipFocusProps),
+					ref: nativeRowRef,
+					styles: NATIVE_ROW_TARGET_STYLES,
+					style: { margin: 0 },
+					"aria-hidden": nativeMenuItemProps["aria-hidden"],
+					"data-menu-native-link": "",
+					"data-menu-native-hit-area": ""
+				}) : null,
 				typeof hiddenContent === "function" ? hiddenContent(tooltipFocusProps ?? {}, isTooltipActive) : hiddenContent,
-				iconSlot.hasSlot && /* @__PURE__ */ jsx("div", {
+				iconSlot.hasSlot && (nativeLinkProps ? /* @__PURE__ */ jsx(NativeItemLink, {
+					mods: nativeCellMods,
 					"data-element": "Icon",
+					...nativeLinkProps,
+					"aria-hidden": true,
+					"data-menu-native-link": "",
 					children: /* @__PURE__ */ jsx(IconSwitch, {
 						noWrapper: true,
 						contentKey: iconSlot.key,
 						children: iconSlot.content
 					})
-				}),
+				}) : /* @__PURE__ */ jsx("div", {
+					"data-element": "Icon",
+					children: /* @__PURE__ */ jsx(IconSwitch, {
+						noWrapper: true,
+						contentKey: iconSlot.key,
+						children: iconSlot.content
+					})
+				})),
 				finalPrefix && /* @__PURE__ */ jsx("div", {
 					"data-element": "Prefix",
+					...nativeMenuItemProps ? ACTIONS_EVENT_HANDLERS : null,
 					children: finalPrefix
 				}),
-				children || labelProps ? /* @__PURE__ */ jsx(type === "header" || type === "card" ? `h${level}` : "div", {
-					"data-element": "Label",
-					...finalLabelProps,
-					ref: labelRef,
-					children: processedChildren
-				}) : null,
-				showDescription ? /* @__PURE__ */ jsx("div", {
+				children || labelProps ? (() => {
+					const LabelTag = type === "header" || type === "card" ? `h${level}` : "div";
+					if (nativeLinkProps && LabelTag !== "div") return /* @__PURE__ */ jsx(LabelTag, {
+						"data-element": "Label",
+						...finalLabelProps,
+						id: nativeLabelReferenceId ?? finalLabelProps.id,
+						"aria-labelledby": finalLabelProps["aria-labelledby"] ?? (nativeMenuItemProps && finalLabelProps["aria-label"] == null ? `${nativeLabelReferenceId}-content` : void 0),
+						ref: (element_0) => {
+							labelRef(element_0);
+						},
+						children: /* @__PURE__ */ jsx(NativeItemLink, {
+							mods: nativeCellMods,
+							...nativeLinkProps,
+							id: nativeMenuItemProps ? `${nativeLabelReferenceId}-content` : void 0,
+							"aria-hidden": nativeMenuItemProps ? true : void 0,
+							display: "inline",
+							"data-menu-native-link": "",
+							children: processedChildren
+						})
+					});
+					if (nativeLinkProps) return /* @__PURE__ */ jsx(NativeItemLink, {
+						mods: nativeCellMods,
+						"data-element": "Label",
+						...nativeLinkProps,
+						...finalLabelProps,
+						id: nativeLabelReferenceId ?? finalLabelProps.id,
+						"data-menu-native-link": "",
+						ref: (element_1) => {
+							labelRef(element_1);
+						},
+						children: processedChildren
+					});
+					return /* @__PURE__ */ jsx(LabelTag, {
+						"data-element": "Label",
+						...finalLabelProps,
+						ref: labelRef,
+						children: processedChildren
+					});
+				})() : null,
+				showDescription ? nativeLinkProps ? /* @__PURE__ */ jsx(NativeItemLink, {
+					mods: nativeCellMods,
+					"data-element": "Description",
+					...nativeLinkProps,
+					...descriptionProps,
+					"data-menu-native-link": "",
+					ref: (element_2) => {
+						descriptionRef(element_2);
+					},
+					children: processedDescription
+				}) : /* @__PURE__ */ jsx("div", {
 					"data-element": "Description",
 					...descriptionProps,
 					ref: descriptionRef,
@@ -796,6 +929,7 @@ const Item = (props, ref) => {
 				}) : null,
 				finalSuffix && /* @__PURE__ */ jsx("div", {
 					"data-element": "Suffix",
+					...nativeMenuItemProps ? ACTIONS_EVENT_HANDLERS : null,
 					children: finalSuffix
 				}),
 				rightIconSlot.hasSlot && /* @__PURE__ */ jsx("div", {
@@ -808,11 +942,13 @@ const Item = (props, ref) => {
 				}),
 				actions && /* @__PURE__ */ jsx("div", {
 					"data-element": "Actions",
+					onFocus: onInlineFocus,
 					...actions !== true ? ACTIONS_EVENT_HANDLERS : null,
 					children: actions !== true ? /* @__PURE__ */ jsx(ItemActionProvider, {
 						type,
 						theme,
 						disableActionsFocus,
+						menuItemAction: !!nativeMenuItemProps,
 						isDisabled: finalIsDisabled,
 						children: actions
 					}) : null
@@ -826,10 +962,12 @@ const _Item = Object.assign(forwardRef(Item), {
 	Action: ItemAction,
 	Badge: ItemBadge
 });
+/** @private Preserves Item layout around native menu targets. */
+const ItemWithNativeSlots = _Item;
 function _temp(key) {
 	return key !== "id";
 }
 
 //#endregion
-export { _Item };
+export { ItemWithNativeSlots, _Item };
 //# sourceMappingURL=Item.js.map