polymorph-ui-components-mcp 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/docs/Accordion.md +45 -0
- package/build/docs/Avatar.md +80 -0
- package/build/docs/Badge.md +58 -0
- package/build/docs/Banner.md +134 -0
- package/build/docs/Book.md +111 -0
- package/build/docs/Browser.md +92 -0
- package/build/docs/Button.md +154 -0
- package/build/docs/CHANGELOG.md +0 -0
- package/build/docs/Calendar.md +129 -0
- package/build/docs/Carousel.md +73 -0
- package/build/docs/CheckListItem.md +76 -0
- package/build/docs/Checkbox.md +84 -0
- package/build/docs/Choicebox.md +71 -0
- package/build/docs/ColorPicker.md +83 -0
- package/build/docs/Combobox.md +336 -0
- package/build/docs/CommandMenu.md +208 -0
- package/build/docs/ContextMenu.md +132 -0
- package/build/docs/GUIDELINES.md +380 -0
- package/build/docs/Gauge.md +46 -0
- package/build/docs/GridItem.md +78 -0
- package/build/docs/Icon.md +66 -0
- package/build/docs/IconStack.md +68 -0
- package/build/docs/Img.md +56 -0
- package/build/docs/Input.md +151 -0
- package/build/docs/InputButton.md +246 -0
- package/build/docs/KeyboardInput.md +104 -0
- package/build/docs/ListItem.md +156 -0
- package/build/docs/Loader.md +55 -0
- package/build/docs/LoadingDots.md +45 -0
- package/build/docs/Menu.md +139 -0
- package/build/docs/Modal.md +221 -0
- package/build/docs/ModalAnimation.md +29 -0
- package/build/docs/OverlayAnimation.md +21 -0
- package/build/docs/Pagination.md +102 -0
- package/build/docs/Phone.md +82 -0
- package/build/docs/Pill.md +122 -0
- package/build/docs/Progress.md +53 -0
- package/build/docs/Radio.md +75 -0
- package/build/docs/RelativeTime.md +76 -0
- package/build/docs/Scroller.md +194 -0
- package/build/docs/Select.md +177 -0
- package/build/docs/Sheet.md +133 -0
- package/build/docs/Shimmer.md +76 -0
- package/build/docs/Slider.md +68 -0
- package/build/docs/Snippet.md +99 -0
- package/build/docs/SplitButton.md +157 -0
- package/build/docs/SplitInput.md +157 -0
- package/build/docs/Step.md +52 -0
- package/build/docs/Stepper.md +85 -0
- package/build/docs/Table.md +252 -0
- package/build/docs/Tabs.md +117 -0
- package/build/docs/ThemeSwitcher.md +125 -0
- package/build/docs/Toast.md +140 -0
- package/build/docs/Toggle.md +70 -0
- package/build/docs/Toolbar.md +100 -0
- package/build/docs/Tooltip.md +86 -0
- package/build/docs/_index.json +218 -0
- package/build/docs/templates/changelog.hbs +36 -0
- package/build/index.d.ts +2 -0
- package/build/index.js +163 -0
- package/build/index.js.map +1 -0
- package/build/services/registry.d.ts +11 -0
- package/build/types.d.ts +4 -0
- package/package.json +34 -0
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
# CommandMenu
|
|
2
|
+
|
|
3
|
+
A full-screen action palette triggered by keyboard shortcut (Cmd+K / Ctrl+K). Displays a search input with filterable commands grouped by category. Supports keyboard navigation (ArrowUp/Down, Enter, Escape), shortcut badges, disabled items, custom icons via Snippet, and click-outside-to-close. The overlay locks body scroll while open.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { CommandMenu } from 'polymorph-ui-components';
|
|
10
|
+
|
|
11
|
+
let open = $state(false);
|
|
12
|
+
const commands = [
|
|
13
|
+
{ label: 'Go to Dashboard', value: 'dashboard', group: 'Navigation', shortcut: 'Cmd+D' },
|
|
14
|
+
{ label: 'Search Users', value: 'search-users', group: 'Navigation', shortcut: 'Cmd+U' },
|
|
15
|
+
{ label: 'Create New Item', value: 'create', group: 'Actions', shortcut: 'Cmd+N' },
|
|
16
|
+
{ label: 'Export Data', value: 'export', group: 'Actions' },
|
|
17
|
+
{ label: 'Settings', value: 'settings', group: 'General', shortcut: 'Cmd+,' }
|
|
18
|
+
];
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<CommandMenu
|
|
22
|
+
items={commands}
|
|
23
|
+
bind:open
|
|
24
|
+
placeholder="Type a command or search..."
|
|
25
|
+
onselect={(item) => console.log('Selected:', item.value)}
|
|
26
|
+
/>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Props
|
|
30
|
+
|
|
31
|
+
| Prop | Type | Required | Default | Description |
|
|
32
|
+
| ----------- | --------------- | -------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
33
|
+
| items | `CommandItem[]` | Yes | - | Array of command items to display. Each item has a label, value, and optional group, icon, shortcut, and disabled fields. Items are filtered by search query matching against the label. |
|
|
34
|
+
| open | `boolean` | No | `false` | Controls visibility of the command menu. Bindable. Set to true to show, false to hide. Automatically toggled by Cmd+K / Ctrl+K keyboard shortcut. |
|
|
35
|
+
| placeholder | `string` | No | `'Search commands...'` | Placeholder text shown in the search input when no query is entered. |
|
|
36
|
+
| emptyText | `string` | No | `'No results found.'` | Text displayed when the search query matches no items. |
|
|
37
|
+
| testId | `string` | No | `-` | Value for `data-pw` on the overlay container for Playwright testing. Child elements get suffixed testIds (e.g., `{testId}-input`, `{testId}-item-{value}`). |
|
|
38
|
+
| classes | `string` | No | `-` | CSS class string applied to the component's top-level element. Useful for theming — define classes with CSS variable overrides and pass them to create variant styles. |
|
|
39
|
+
|
|
40
|
+
## Snippets
|
|
41
|
+
|
|
42
|
+
Svelte 5 Snippet props -- pass content blocks to the component.
|
|
43
|
+
|
|
44
|
+
| Snippet | Type | Description |
|
|
45
|
+
| ---------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
46
|
+
| itemIcon | `Snippet<[CommandItem]>` | Custom icon renderer for each command item. Receives the CommandItem as an argument. When provided, takes precedence over the item's `icon` URL string. |
|
|
47
|
+
| searchIcon | `Snippet` | Custom icon for the search input. |
|
|
48
|
+
|
|
49
|
+
## Events
|
|
50
|
+
|
|
51
|
+
| Event | Type | Description |
|
|
52
|
+
| -------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
53
|
+
| onselect | `(item: CommandItem) => void` | Fires when the user selects a command item via click or Enter key. Receives the full CommandItem object. The menu automatically closes after selection. |
|
|
54
|
+
| onclose | `() => void` | Fires when the menu closes for any reason: Escape key, overlay click, Cmd+K toggle, or after item selection. |
|
|
55
|
+
|
|
56
|
+
## Keyboard Interactions
|
|
57
|
+
|
|
58
|
+
| Key | Action |
|
|
59
|
+
| -------------- | ------------------------------------------------------ |
|
|
60
|
+
| Cmd+K / Ctrl+K | Toggle the command menu open/closed (global listener). |
|
|
61
|
+
| ArrowDown | Move highlight to next non-disabled item. |
|
|
62
|
+
| ArrowUp | Move highlight to previous non-disabled item. |
|
|
63
|
+
| Enter | Select the currently highlighted item. |
|
|
64
|
+
| Escape | Close the command menu. |
|
|
65
|
+
|
|
66
|
+
## CSS Variables
|
|
67
|
+
|
|
68
|
+
Override these custom properties to theme the component.
|
|
69
|
+
|
|
70
|
+
### Overlay
|
|
71
|
+
|
|
72
|
+
| Variable | Default | CSS Property | Description |
|
|
73
|
+
| ------------------------------------ | -------------------- | ---------------- | -------------------------------------------------------------- |
|
|
74
|
+
| `--command-menu-overlay-background` | `rgba(0, 0, 0, 0.5)` | background-color | Background color of the full-screen overlay behind the dialog. |
|
|
75
|
+
| `--command-menu-overlay-align` | `flex-start` | align-items | Vertical alignment of the dialog within the overlay. |
|
|
76
|
+
| `--command-menu-overlay-padding-top` | `20vh` | padding-top | Top padding that positions the dialog vertically from the top. |
|
|
77
|
+
| `--command-menu-z-index` | `50` | z-index | Stacking order of the overlay. |
|
|
78
|
+
|
|
79
|
+
### Dialog
|
|
80
|
+
|
|
81
|
+
| Variable | Default | CSS Property | Description |
|
|
82
|
+
| ------------------------------ | -------------------------------- | ---------------- | ---------------------------------------------------- |
|
|
83
|
+
| `--command-menu-background` | `#ffffff` | background-color | Background color of the command menu dialog panel. |
|
|
84
|
+
| `--command-menu-border-radius` | `8px` | border-radius | Corner rounding of the dialog panel. |
|
|
85
|
+
| `--command-menu-box-shadow` | `0 16px 70px rgba(0, 0, 0, 0.2)` | box-shadow | Shadow of the dialog panel. |
|
|
86
|
+
| `--command-menu-width` | `560px` | width | Width of the dialog panel. |
|
|
87
|
+
| `--command-menu-max-width` | `90vw` | max-width | Maximum width of the dialog panel. |
|
|
88
|
+
| `--command-menu-max-height` | `60vh` | max-height | Maximum height of the dialog panel before scrolling. |
|
|
89
|
+
| `--command-menu-border` | `1px solid currentColor` | border | Border of the dialog panel. |
|
|
90
|
+
|
|
91
|
+
### Search Input
|
|
92
|
+
|
|
93
|
+
| Variable | Default | CSS Property | Description |
|
|
94
|
+
| ---------------------------------------- | ----------- | ------------- | ----------------------------------------------- |
|
|
95
|
+
| `--command-menu-input-wrapper-padding` | `12px 16px` | padding | Padding around the search input area. |
|
|
96
|
+
| `--command-menu-input-wrapper-gap` | `10px` | gap | Gap between search icon and input field. |
|
|
97
|
+
| `--command-menu-search-icon-size` | `20px` | width, height | Size of the search magnifying glass icon. |
|
|
98
|
+
| `--command-menu-search-icon-color` | `currentColor` | color | Color of the search icon. |
|
|
99
|
+
| `--command-menu-input-font-size` | `16px` | font-size | Font size of the search input text. |
|
|
100
|
+
| `--command-menu-input-font-family` | `inherit` | font-family | Font family of the search input text. |
|
|
101
|
+
| `--command-menu-input-font-weight` | `400` | font-weight | Font weight of the search input text. |
|
|
102
|
+
| `--command-menu-input-color` | `currentColor` | color | Text color of the search input. |
|
|
103
|
+
| `--command-menu-input-caret-color` | `currentColor` | caret-color | Color of the blinking text cursor in the input. |
|
|
104
|
+
| `--command-menu-input-placeholder-color` | `currentColor` | color | Color of the placeholder text. |
|
|
105
|
+
|
|
106
|
+
### Separator
|
|
107
|
+
|
|
108
|
+
| Variable | Default | CSS Property | Description |
|
|
109
|
+
| --------------------------------- | --------- | ---------------- | ------------------------------------------------------- |
|
|
110
|
+
| `--command-menu-separator-height` | `1px` | height | Height of the line between search input and items list. |
|
|
111
|
+
| `--command-menu-separator-color` | `#e4e4e7` | background-color | Color of the separator line. |
|
|
112
|
+
|
|
113
|
+
### Item List
|
|
114
|
+
|
|
115
|
+
| Variable | Default | CSS Property | Description |
|
|
116
|
+
| -------------------------------- | ------- | --------------- | ---------------------------------------------- |
|
|
117
|
+
| `--command-menu-list-padding` | `8px` | padding | Padding inside the scrollable items container. |
|
|
118
|
+
| `--command-menu-scrollbar-width` | `thin` | scrollbar-width | Width of the scrollbar in the items list. |
|
|
119
|
+
|
|
120
|
+
### Empty State
|
|
121
|
+
|
|
122
|
+
| Variable | Default | CSS Property | Description |
|
|
123
|
+
| --------------------------------- | ----------- | ------------ | -------------------------------------- |
|
|
124
|
+
| `--command-menu-empty-padding` | `32px 16px` | padding | Padding of the empty state message. |
|
|
125
|
+
| `--command-menu-empty-color` | `currentColor` | color | Text color of the empty state message. |
|
|
126
|
+
| `--command-menu-empty-font-size` | `14px` | font-size | Font size of the empty state message. |
|
|
127
|
+
| `--command-menu-empty-font-style` | `normal` | font-style | Font style of the empty state message. |
|
|
128
|
+
|
|
129
|
+
### Group Heading
|
|
130
|
+
|
|
131
|
+
| Variable | Default | CSS Property | Description |
|
|
132
|
+
| --------------------------------------------- | -------------- | -------------- | ----------------------------------------------- |
|
|
133
|
+
| `--command-menu-group-heading-padding` | `8px 12px 4px` | padding | Padding of each group heading label. |
|
|
134
|
+
| `--command-menu-group-heading-font-size` | `12px` | font-size | Font size of group heading labels. |
|
|
135
|
+
| `--command-menu-group-heading-font-weight` | `600` | font-weight | Font weight of group heading labels. |
|
|
136
|
+
| `--command-menu-group-heading-color` | `currentColor` | color | Text color of group heading labels. |
|
|
137
|
+
| `--command-menu-group-heading-text-transform` | `uppercase` | text-transform | Text transform applied to group heading labels. |
|
|
138
|
+
| `--command-menu-group-heading-letter-spacing` | `0.05em` | letter-spacing | Letter spacing of group heading labels. |
|
|
139
|
+
|
|
140
|
+
### Items
|
|
141
|
+
|
|
142
|
+
| Variable | Default | CSS Property | Description |
|
|
143
|
+
| --------------------------------------- | ----------- | ---------------- | ------------------------------------------------------------ |
|
|
144
|
+
| `--command-menu-item-padding` | `10px 12px` | padding | Padding inside each command item row. |
|
|
145
|
+
| `--command-menu-item-border-radius` | `6px` | border-radius | Corner rounding of each command item row. |
|
|
146
|
+
| `--command-menu-item-gap` | `10px` | gap | Gap between icon, label, and shortcut within an item. |
|
|
147
|
+
| `--command-menu-item-font-size` | `14px` | font-size | Font size of command item labels. |
|
|
148
|
+
| `--command-menu-item-color` | `currentColor` | color | Text color of command items in their default state. |
|
|
149
|
+
| `--command-menu-item-active-background` | `#f4f4f5` | background-color | Background color of the currently highlighted/active item. |
|
|
150
|
+
| `--command-menu-item-active-color` | `currentColor` | color | Text color of the currently highlighted/active item. |
|
|
151
|
+
| `--command-menu-item-disabled-opacity` | `0.4` | opacity | Opacity of disabled command items. |
|
|
152
|
+
| `--command-menu-item-icon-size` | `20px` | width, height | Size of item icon images (when using icon URL, not Snippet). |
|
|
153
|
+
|
|
154
|
+
### Keyboard Shortcut Badges
|
|
155
|
+
|
|
156
|
+
| Variable | Default | CSS Property | Description |
|
|
157
|
+
| ---------------------------------- | ------------------- | ---------------- | ----------------------------------------------------------------------- |
|
|
158
|
+
| `--command-menu-shortcut-gap` | `4px` | gap | Gap between multiple shortcut key badges. |
|
|
159
|
+
| `--command-menu-kbd-min-width` | `24px` | min-width | Minimum width of each keyboard shortcut badge. |
|
|
160
|
+
| `--command-menu-kbd-height` | `22px` | height | Height of each keyboard shortcut badge. |
|
|
161
|
+
| `--command-menu-kbd-padding` | `0 6px` | padding | Padding inside each keyboard shortcut badge. |
|
|
162
|
+
| `--command-menu-kbd-border-radius` | `4px` | border-radius | Corner rounding of keyboard shortcut badges. |
|
|
163
|
+
| `--command-menu-kbd-background` | `transparent` | background-color | Background color of keyboard shortcut badges. |
|
|
164
|
+
| `--command-menu-kbd-border` | `1px solid currentColor` | border | Border of keyboard shortcut badges. |
|
|
165
|
+
| `--command-menu-kbd-color` | `currentColor` | color | Text color of keyboard shortcut badges. |
|
|
166
|
+
| `--command-menu-kbd-font-size` | `12px` | font-size | Font size of keyboard shortcut badge text. |
|
|
167
|
+
| `--command-menu-kbd-font-family` | `inherit` | font-family | Font family of keyboard shortcut badge text. |
|
|
168
|
+
| `--command-menu-kbd-font-weight` | `500` | font-weight | Font weight of keyboard shortcut badge text. |
|
|
169
|
+
| `--command-menu-kbd-box-shadow` | `0 1px 0 currentColor` | box-shadow | Box shadow of keyboard shortcut badges (gives a raised key appearance). |
|
|
170
|
+
|
|
171
|
+
## Type Reference
|
|
172
|
+
|
|
173
|
+
Custom types used by this component's props and events:
|
|
174
|
+
|
|
175
|
+
### CommandItem
|
|
176
|
+
|
|
177
|
+
```typescript
|
|
178
|
+
type CommandItem = {
|
|
179
|
+
label: string;
|
|
180
|
+
value: string;
|
|
181
|
+
group?: string;
|
|
182
|
+
icon?: string;
|
|
183
|
+
shortcut?: string;
|
|
184
|
+
disabled?: boolean;
|
|
185
|
+
};
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
## Internal Dependencies
|
|
189
|
+
|
|
190
|
+
This component uses the following library components internally:
|
|
191
|
+
|
|
192
|
+
- Img (for item icon rendering)
|
|
193
|
+
|
|
194
|
+
## Web Component
|
|
195
|
+
|
|
196
|
+
Tag: `<pui-command-menu>`
|
|
197
|
+
|
|
198
|
+
```html
|
|
199
|
+
<pui-command-menu open placeholder="Type a command..."></pui-command-menu>
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
### Slots
|
|
203
|
+
|
|
204
|
+
| Slot Name | Maps to Snippet | Description |
|
|
205
|
+
| ------------- | --------------- | --------------------------------- |
|
|
206
|
+
| `search-icon` | `searchIcon` | Custom icon for the search input. |
|
|
207
|
+
|
|
208
|
+
> **Note:** The `items` prop is an array and `itemIcon` is a parameterized Snippet — set them via JavaScript properties.
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
# ContextMenu
|
|
2
|
+
|
|
3
|
+
A right-click contextual action menu that appears at the cursor position. Wraps a trigger area via a `children` snippet; right-clicking (or long-pressing on touch) anywhere inside that area opens a floating menu with a list of context-specific actions. Supports full keyboard navigation (ArrowUp/Down to move focus, Enter/Space to select, Escape to close, Home/End to jump), separator lines between groups, danger-styled items for destructive actions, disabled items, optional per-item icons, keyboard shortcut display, and viewport-aware positioning so the menu never overflows off screen. The browser's native context menu is suppressed within the trigger area.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```svelte
|
|
8
|
+
<script>
|
|
9
|
+
import { ContextMenu } from 'polymorph-ui-components';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<ContextMenu
|
|
13
|
+
items={[
|
|
14
|
+
{ label: 'Cut', value: 'cut', shortcut: 'Ctrl+X' },
|
|
15
|
+
{ label: 'Copy', value: 'copy', shortcut: 'Ctrl+C' },
|
|
16
|
+
{ label: 'Paste', value: 'paste', shortcut: 'Ctrl+V' },
|
|
17
|
+
{ label: '', value: 'sep-1', separator: true },
|
|
18
|
+
{ label: 'Delete', value: 'delete', danger: true }
|
|
19
|
+
]}
|
|
20
|
+
onselect={(item) => console.log(item.value)}
|
|
21
|
+
>
|
|
22
|
+
<div
|
|
23
|
+
style="width: 300px; height: 200px; border: 1px dashed #ccc; display: grid; place-items: center;"
|
|
24
|
+
>
|
|
25
|
+
Right-click here
|
|
26
|
+
</div>
|
|
27
|
+
</ContextMenu>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Props
|
|
31
|
+
|
|
32
|
+
| Prop | Type | Required | Default | Description |
|
|
33
|
+
| --------- | ------------------- | -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
34
|
+
| items | `ContextMenuItem[]` | Yes | `-` | Array of context menu items to display. Each item defines a label, value, and optional icon, shortcut, disabled, danger, or separator flags. See ContextMenuItem type below. |
|
|
35
|
+
| open | `boolean` | No | `false` | Bindable. Controls whether the context menu is visible. Set to true to open programmatically; bind to react to open/close state changes. |
|
|
36
|
+
| maxHeight | `string` | No | `'240px'` | Maximum height of the dropdown before it scrolls. Accepts any CSS length value (e.g., '300px', '50vh'). |
|
|
37
|
+
| testId | `string` | No | `-` | Value for the data-pw attribute on the container, used for end-to-end testing selectors. Individual items get `{testId}-item-{value}`. |
|
|
38
|
+
| classes | `string` | No | `-` | CSS class string applied to the component's top-level element. Useful for theming — define classes with CSS variable overrides and pass them to create variant styles. |
|
|
39
|
+
|
|
40
|
+
## Snippets
|
|
41
|
+
|
|
42
|
+
Svelte 5 Snippet props -- pass content blocks to the component.
|
|
43
|
+
|
|
44
|
+
| Snippet | Type | Description |
|
|
45
|
+
| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
46
|
+
| children | `Snippet` | The trigger area that activates the context menu on right-click. The context menu appears at the cursor position when right-clicking anywhere inside this content. |
|
|
47
|
+
|
|
48
|
+
## Events
|
|
49
|
+
|
|
50
|
+
| Event | Type | Description |
|
|
51
|
+
| -------- | --------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
|
|
52
|
+
| onselect | `(item: ContextMenuItem) => void` | Fires when a non-disabled menu item is selected (via click, Enter, or Space). Receives the full ContextMenuItem object. |
|
|
53
|
+
| onopen | `() => void` | Fires when the context menu opens, triggered by a right-click inside the trigger area. |
|
|
54
|
+
| onclose | `() => void` | Fires when the context menu closes, whether by selecting an item, pressing Escape, or clicking outside. |
|
|
55
|
+
|
|
56
|
+
## CSS Variables
|
|
57
|
+
|
|
58
|
+
Override these custom properties to theme the component.
|
|
59
|
+
|
|
60
|
+
| Variable | Default | CSS Property | Description |
|
|
61
|
+
| --------------------------------------------------- | ------------------------------------------------ | ---------------- | --------------------------------------------------------------- |
|
|
62
|
+
| `--context-menu-container-display` | `contents` | display | Display mode of the wrapper element around the trigger content. |
|
|
63
|
+
| `--context-menu-z-index` | `1000` | z-index | Stacking order of the context menu dropdown. |
|
|
64
|
+
| `--context-menu-background-color` | `#ffffff` | background-color | Background color of the dropdown panel. |
|
|
65
|
+
| `--context-menu-border` | `1px solid currentColor` | border | Border around the dropdown panel. |
|
|
66
|
+
| `--context-menu-border-radius` | `8px` | border-radius | Corner rounding of the dropdown panel. |
|
|
67
|
+
| `--context-menu-box-shadow` | `0px 4px 16px rgba(0, 0, 0, 0.12)` | box-shadow | Shadow of the dropdown panel. |
|
|
68
|
+
| `--context-menu-min-width` | `160px` | min-width | Minimum width of the dropdown panel. |
|
|
69
|
+
| `--context-menu-padding` | `4px 0` | padding | Inner padding of the dropdown panel. |
|
|
70
|
+
| `--context-menu-font-family` | `inherit` | font-family | Font family for all context menu text. |
|
|
71
|
+
| `--context-menu-font-size` | `14px` | font-size | Base font size for menu items. |
|
|
72
|
+
| `--context-menu-item-padding` | `8px 12px` | padding | Inner padding of each menu item. |
|
|
73
|
+
| `--context-menu-item-color` | `currentColor` | color | Text color of menu items. |
|
|
74
|
+
| `--context-menu-item-background-color` | `transparent` | background-color | Background color of menu items in their default state. |
|
|
75
|
+
| `--context-menu-item-gap` | `8px` | gap | Gap between icon and label within a menu item. |
|
|
76
|
+
| `--context-menu-item-white-space` | `nowrap` | white-space | White-space behavior for menu item text. |
|
|
77
|
+
| `--context-menu-item-hover-background-color` | `#f4f4f5` | background-color | Background color of a menu item on hover. |
|
|
78
|
+
| `--context-menu-item-hover-color` | `var(--context-menu-item-color, currentColor)` | color | Text color of a menu item on hover. |
|
|
79
|
+
| `--context-menu-item-focus-background-color` | `#f4f4f5` | background-color | Background color of a menu item when focused via keyboard. |
|
|
80
|
+
| `--context-menu-item-focus-outline` | `none` | outline | Focus outline of a menu item when focused via keyboard. |
|
|
81
|
+
| `--context-menu-item-danger-color` | `currentColor` | color | Text color for danger-flagged items (destructive actions). |
|
|
82
|
+
| `--context-menu-item-danger-hover-background-color` | `#f4f4f5` | background-color | Background color for danger items on hover. |
|
|
83
|
+
| `--context-menu-item-danger-hover-color` | `var(--context-menu-item-danger-color, currentColor)` | color | Text color for danger items on hover. |
|
|
84
|
+
| `--context-menu-item-danger-focus-background-color` | `#f4f4f5` | background-color | Background color for danger items when focused via keyboard. |
|
|
85
|
+
| `--context-menu-item-disabled-opacity` | `0.4` | opacity | Opacity of disabled menu items. |
|
|
86
|
+
| `--context-menu-item-disabled-cursor` | `not-allowed` | cursor | Cursor shown when hovering disabled items. |
|
|
87
|
+
| `--context-menu-separator-height` | `1px` | height | Height of the separator line between item groups. |
|
|
88
|
+
| `--context-menu-separator-color` | `#e4e4e7` | background-color | Color of the separator line. |
|
|
89
|
+
| `--context-menu-separator-margin` | `4px 0` | margin | Vertical spacing around the separator line. |
|
|
90
|
+
| `--context-menu-item-icon-height` | `16px` | height | Height of per-item icons. |
|
|
91
|
+
| `--context-menu-item-icon-width` | `16px` | width | Width of per-item icons. |
|
|
92
|
+
| `--context-menu-item-font-weight` | `400` | font-weight | Font weight of menu item labels. |
|
|
93
|
+
| `--context-menu-item-line-height` | `1.4` | line-height | Line height of menu item labels. |
|
|
94
|
+
| `--context-menu-item-shortcut-color` | `currentColor` | color | Text color of the keyboard shortcut hint. |
|
|
95
|
+
| `--context-menu-item-shortcut-font-size` | `12px` | font-size | Font size of the keyboard shortcut hint. |
|
|
96
|
+
| `--context-menu-item-shortcut-font-weight` | `400` | font-weight | Font weight of the keyboard shortcut hint. |
|
|
97
|
+
| `--context-menu-item-shortcut-margin-left` | `16px` | margin-left | Space between the item label and the keyboard shortcut hint. |
|
|
98
|
+
| `--context-menu-max-height` | `240px` | max-height | Maximum height of the context menu dropdown before scrolling. Also controlled by the `maxHeight` prop via inline style. |
|
|
99
|
+
|
|
100
|
+
## Type Reference
|
|
101
|
+
|
|
102
|
+
Custom types used by this component's props and events:
|
|
103
|
+
|
|
104
|
+
### ContextMenuItem
|
|
105
|
+
|
|
106
|
+
```typescript
|
|
107
|
+
type ContextMenuItem = {
|
|
108
|
+
label: string; // Display text for the menu item
|
|
109
|
+
value: string; // Unique identifier used in onselect callback and test IDs
|
|
110
|
+
icon?: string; // URL/src for an icon image displayed before the label
|
|
111
|
+
shortcut?: string; // Keyboard shortcut hint displayed right-aligned (e.g., "Ctrl+C")
|
|
112
|
+
disabled?: boolean; // When true, item is dimmed and non-interactive
|
|
113
|
+
danger?: boolean; // When true, item text is styled in a destructive/red color
|
|
114
|
+
separator?: boolean; // When true, renders a horizontal line instead of a clickable item
|
|
115
|
+
};
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
## Web Component
|
|
119
|
+
|
|
120
|
+
Tag: `<pui-context-menu>`
|
|
121
|
+
|
|
122
|
+
```html
|
|
123
|
+
<pui-context-menu>
|
|
124
|
+
<button>Right-click me</button>
|
|
125
|
+
</pui-context-menu>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Slots
|
|
129
|
+
|
|
130
|
+
| Slot Name | Maps to Snippet | Description |
|
|
131
|
+
| ----------- | --------------- | --------------------------------------------------------------- |
|
|
132
|
+
| _(default)_ | `children` | The trigger element that opens the context menu on right-click. |
|