+ A custom component that triggers a vertical navigation menu upon right-clicking (mouse/desktop)
+ or long-pressing (touch/mobile) its children. It is built on top of <le-popover>
+ and <le-navigation>.
+
+ Right-click inside the dashed area below to trigger the context menu. By default, the menu positions itself next to the mouse click. +
+ +
+ On touch interfaces, long-pressing triggers the menu. The backdrop property dims the screen and lifts the active item above the backdrop overlay, matching native mobile UI patterns.
+
+ You can customize what happens to the menu when the user scrolls the page. Use the page-scroll-behavior property:
+
menu-close (default) — Closes the context menu automatically when page scrolling is detected.fixed-menu — The context menu remains open and moves relative to the scrolling page/trigger.blocked — Blocks scroll interactions on the document body entirely while the menu is open.
+ When you specify a layout position other than mouse, the menu aligns itself relative to the trigger element's bounding box. You can configure both position (top, bottom, left, right) and align (start, center, end):
+
@open+ Controls the visibility of the menu. Reflects as an attribute. Can be toggled programmatically. +
+booleanfalse@disabled
+ When present or set to true, blocks right-click and touch long-press triggers.
+
booleanfalse@items+ An array of menu options to display. Supports nested icons, actions, selection states (checkmarks), and disabling. Passed as a JSON string in HTML or an array in frameworks. +
+LeOption[] | string[]@backdrop+ Whether to show a dimming overlay behind the menu, lifting the active trigger item above the backdrop overlay. +
+booleanfalse@page-scroll-behavior+ Determines how the menu reacts when the page is scrolled: +
+menu-close (default) — Closes the context menu automatically when page scrolling is detected.fixed-menu — The context menu remains open and smoothly scrolls/moves along with the page.blocked — Blocks scroll interactions on the document body entirely while the menu is open.@position+ Placement direction relative to the trigger container. +
+mouse (default) — Dynamic placement following the click coordinate. Falls back to bottom alignment on touch devices.top, bottom, left, right — Align next to the specified side of the trigger boundary box.@align
+ Alignment relative to the target boundary: start (default), center, or end.
+
+ The trigger content. Any DOM nodes placed in this slot will act as the right-click/long-press trigger zone. +
+ +leContextMenuSelect+ Fired when a menu navigation item is selected. +
+leContextMenuClose+ Fired when the context menu is closed. +
+Right-click on desktop or long-press on mobile to show context menus. Supports checkmarks and backdrop elevation.
+Hover on desktop or long-press on touch devices. Uses top-layer popover behavior with viewport-aware positioning.
diff --git a/packages/core/src/themes/index.css b/packages/core/src/themes/index.css index 0699902..e86355c 100644 --- a/packages/core/src/themes/index.css +++ b/packages/core/src/themes/index.css @@ -21,3 +21,10 @@ .header-is-shrunk .hidden-on-shrink { display: none; } + +/* Shared backdrop utility class */ +.le-backdrop-background { + background: var(--le-color-backdrop, rgba(0, 0, 0, 0.5)); + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); +} diff --git a/packages/core/src/utils/constants.ts b/packages/core/src/utils/constants.ts new file mode 100644 index 0000000..4ecc873 --- /dev/null +++ b/packages/core/src/utils/constants.ts @@ -0,0 +1,13 @@ +/** + * Global constants for touch and pointer interactions. + */ + +/** + * Duration in milliseconds a user must hold down a touch pointer before it is recognized as a long-press. + */ +export const LONG_PRESS_DURATION = 500; + +/** + * Distance in pixels a user's touch pointer can move before cancelling a long-press. + */ +export const LONG_PRESS_MOVE_THRESHOLD = 10;