# Components: Overlays

> Plainkit 0.28.0. Generated by scripts/build-skills.mjs from Generated/*.razor, blazor/mappings, generated.manifest.json and core/dist/elements/api.json. Do not edit: change the source and run the generator.

Every component renders its element with the parameters you set as attributes. An attribute that is not a parameter (`id`, `class`, `data-*`, `aria-*`, ...) is put on the element as it is, and a `class` is added to the component's own (`ExtraClass` on a component that lists it). Names are `Pk` plus the tag in PascalCase.

## `PkBadgePopover`

`<pk-badge-popover>`: **Badge popover** (Overlays). A status pill that is a button: it opens a panel of details (heading, body, optional actions) anchored under it, and on a phone the panel spans the viewport inside the gutters. Escape, an outside press or focus leaving closes it.

**Parameters**

| Parameter | Type | Enum values | Sets | Description |
|---|---|---|---|---|
| `Variant` | `BadgeVariant` | `Accent` `Muted` `Ok` `Warn` `Danger` `Outline` | attribute `variant` | Colour, as pk-badge. |
| `Heading` | `string?` |  | attribute `heading` | Panel title; it also names the panel for assistive technology. |
| `Label` | `string?` |  | attribute `label` | Accessible name of the panel when there is no heading (falls back to the pill text). |
| `Placement` | `string?` |  | attribute `placement` | Preferred side of the panel on a wide screen. |
| `Open` | `bool` |  | attribute `open` | Whether the panel is shown. |
| `OpenChanged` | `EventCallback<bool>` |  | two-way pair of `Open` | Raised when Open changes (two-way binding: `@bind-Open`). |
| `ChildContent` | `RenderFragment?` |  | default slot | The pill text (for example a count and a noun: "5 failing"). |
| `DetailsContent` | `RenderFragment?` |  | slot `details` | The panel body. |
| `ActionsContent` | `RenderFragment?` |  | slot `actions` | Buttons at the foot of the panel; hidden when empty. A slotted element with data-close closes the panel. |
| `OnOpen` | `EventCallback` |  | event `pk-open` | The panel opened. |
| `OnClose` | `EventCallback<PkCloseEventArgs>` |  | event `pk-close` | The panel is closing (escape, outside, blur, toggle, action); cancelable. |

Two-way binding: `@bind-Open`.

When you set a named fragment (`DetailsContent`, `ActionsContent`), write the body as an explicit `<ChildContent>` tag too: Razor does not allow an implicit body next to a named fragment.

**Event args**

| Event | Args class | Fields |
|---|---|---|
| `pk-close` | `PkCloseEventArgs` | Reason: string? |

Element details (parts, CSS custom properties, methods, accessibility): `pk-badge-popover` in the `plainkit-sdk` skill.

## `PkCardMenu`

`<pk-card-menu>`: **Card menu** (Overlays). The "..." (or settings) button of a card header that opens a menu of secondary actions. A pk-dropdown opened by an icon-only button, so the keyboard, the focus return and the placement are the dropdown's; put it in the actions slot of a pk-card with pk-menu-item children. With no pk-menu-item it draws nothing (its actions depend on state and none applies).

**Parameters**

| Parameter | Type | Enum values | Sets | Description |
|---|---|---|---|---|
| `Label` | `string?` |  | attribute `label` | The accessible name of the button, which is also its tooltip. Name what the menu acts on when a page has several ("Orders actions"). |
| `IconName` | `string?` |  | attribute `icon-name` | The icon of the button: more (the default), settings, or any other name of the icon sprite. |
| `Placement` | `string?` |  | attribute `placement` | Which side the menu opens on. The default aligns it with the button at the end of the header. |
| `Open` | `bool` |  | attribute `open` | Whether the menu is shown. |
| `OpenChanged` | `EventCallback<bool>` |  | two-way pair of `Open` | Raised when Open changes (two-way binding: `@bind-Open`). |
| `ChildContent` | `RenderFragment?` |  | default slot | pk-menu-item children (give each a value to tell them apart in pk-select, or an href). |
| `OnSelect` | `EventCallback<PkSelectEventArgs>` |  | event `pk-select` | An item was chosen (the pk-dropdown's event, which reaches this element). |
| `OnOpen` | `EventCallback` |  | event `pk-open` | Opened. |
| `OnClose` | `EventCallback<PkCloseEventArgs>` |  | event `pk-close` | Closed. |

Two-way binding: `@bind-Open`.

**Event args**

| Event | Args class | Fields |
|---|---|---|
| `pk-close` | `PkCloseEventArgs` | Reason: string? |
| `pk-select` | `PkSelectEventArgs` | Item: JsonElement?, Value: string?, Checked: bool?, Id: string?, Selected: string[]?, Scope: string?, Query: JsonElement? |

Element details (parts, CSS custom properties, methods, accessibility): `pk-card-menu` in the `plainkit-sdk` skill.

## `PkCommandPalette`

`<pk-command-palette>`: **Command palette** (Overlays). A keyboard-first launcher: Ctrl/Cmd+K opens a dialog with a search field over grouped commands, fuzzy-matched with highlights, recents when the field is empty, arrows and Enter to run.

**Parameters**

| Parameter | Type | Enum values | Sets | Description |
|---|---|---|---|---|
| `Open` | `bool` |  | attribute `open` | Whether it is shown |
| `OpenChanged` | `EventCallback<bool>` |  | two-way pair of `Open` | Raised when Open changes (two-way binding: `@bind-Open`). |
| `Placeholder` | `string?` |  | attribute `placeholder` | The placeholder setting |
| `RecentsKey` | `string?` |  | attribute `recents-key` | Browser storage key; empty disables recents. |
| `NoShortcut` | `bool` |  | attribute `no-shortcut` | Do not bind Ctrl/Cmd+K on the page. |
| `Label` | `string?` |  | attribute `label` | Accessible name of the dialog. |
| `Items` | `IReadOnlyList<PkCommandPaletteItem>?` |  |  | The commands the palette lists and searches: { id, label, group?, hint?, keywords?, href?, shortcut? }. A property of the element (it has no attribute), set after the render; OnSelect reports the chosen Id (PkSelectEventArgs.Id) and Item. |
| `OnOpen` | `EventCallback` |  | event `pk-open` | It opened (the shortcut, show(), or open set by the host). |
| `OnClose` | `EventCallback<PkCloseEventArgs>` |  | event `pk-close` | A close was asked for (Escape, backdrop, the shortcut, hide()) or a command was chosen (reason "select", already closed). Cancelable except for "select": preventDefault keeps it open. |
| `OnSelect` | `EventCallback<PkSelectEventArgs>` |  | event `pk-select` | A command was chosen (id is the item's id); navigates to href when it has one and the event is not cancelled. |

Two-way binding: `@bind-Open`.

**Event args**

| Event | Args class | Fields |
|---|---|---|
| `pk-close` | `PkCloseEventArgs` | Reason: string? |
| `pk-select` | `PkSelectEventArgs` | Item: JsonElement?, Value: string?, Checked: bool?, Id: string?, Selected: string[]?, Scope: string?, Query: JsonElement? |

Element details (parts, CSS custom properties, methods, accessibility): `pk-command-palette` in the `plainkit-sdk` skill.

## `PkContextMenu`

`<pk-context-menu>`: **Context menu** (Overlays). A menu opened at the pointer by right click, by Shift+F10 or the Menu key, or by a touch long press, over the region it wraps.

**Parameters**

| Parameter | Type | Enum values | Sets | Description |
|---|---|---|---|---|
| `Open` | `bool` |  | attribute `open` | Whether the menu is shown. |
| `OpenChanged` | `EventCallback<bool>` |  | two-way pair of `Open` | Raised when Open changes (two-way binding: `@bind-Open`). |
| `Disabled` | `bool` |  | attribute `disabled` | Leave the browser menu alone. |
| `ChildContent` | `RenderFragment?` |  | default slot | The region the menu belongs to. |
| `MenuContent` | `RenderFragment?` |  | slot `menu` | pk-menu-item children. |
| `OnSelect` | `EventCallback<PkSelectEventArgs>` |  | event `pk-select` | An item was chosen. |
| `OnOpen` | `EventCallback<PkOpenEventArgs>` |  | event `pk-open` | It opened at the pointer position. target is the element that was right-clicked, long-pressed or Shift+F10'd. context is the value of its nearest ancestor's data-pk-context attribute (for example a pk-table row id), unset when none is present; only context reaches Blazor, since a DOM element cannot cross JS interop. |
| `OnClose` | `EventCallback<PkCloseEventArgs>` |  | event `pk-close` | A close was asked for (Escape, outside press, choosing an item). Cancelable: preventDefault keeps it open. |

Two-way binding: `@bind-Open`.

When you set a named fragment (`MenuContent`), write the body as an explicit `<ChildContent>` tag too: Razor does not allow an implicit body next to a named fragment.

**Event args**

| Event | Args class | Fields |
|---|---|---|
| `pk-close` | `PkCloseEventArgs` | Reason: string? |
| `pk-open` | `PkOpenEventArgs` | X: double?, Y: double?, Target: JsonElement?, Context: string?, Src: string?, Alt: string?, Caption: string?, Reason: string? |
| `pk-select` | `PkSelectEventArgs` | Item: JsonElement?, Value: string?, Checked: bool?, Id: string?, Selected: string[]?, Scope: string?, Query: JsonElement? |

Element details (parts, CSS custom properties, methods, accessibility): `pk-context-menu` in the `plainkit-sdk` skill.

## `PkDialog`

`<pk-dialog>`: **Dialog** (Overlays). A native modal dialog in five sizes with a scrolling body, full screen on a phone; plus confirm, alert and prompt patterns that return a promise. The backdrop never closes it: every dialog offers its own Cancel or Close. Declarative openers: data-open="#id", data-toggle and data-close work without any script (installed when the element connects).

**Parameters**

| Parameter | Type | Enum values | Sets | Description |
|---|---|---|---|---|
| `IsOpen` | `bool` |  | attribute `open` | Whether it is shown |
| `IsOpenChanged` | `EventCallback<bool>` |  | two-way pair of `IsOpen` | Raised when IsOpen changes (two-way binding: `@bind-IsOpen`). |
| `Title` | `string?` |  | attribute `heading` | The heading setting |
| `HeaderContent` | `RenderFragment?` |  | slot `header` | Custom header. |
| `ChildContent` | `RenderFragment?` |  | default slot | Body. |
| `FooterContent` | `RenderFragment?` |  | slot `footer` | Actions. |
| `OnClose` | `EventCallback<PkCloseEventArgs>` |  | event `pk-close` | escape, close button or method. |
| `ShowCloseButton` | `bool` |  | attribute `hide-close` | Hide the header close button (the dialog offers its own Cancel in the footer). False hides the header close button (the opposite of hideClose); give the dialog its own Cancel or Close. |
| `CloseButtonLabel` | `string?` |  | attribute `close-label` | The accessible name of the close (x) button; set it for another language or wording. |
| `Size` | `PkDialogSize?` | `Sm` `Md` `Lg` `Xl` `Fullscreen` | attribute `size` | The size setting |
| `MaxWidthPx` | `int` |  | attribute `max-width` | Card width in pixels before the viewport clamp; 0 keeps the size preset. On a phone every dialog is full screen, so max-width applies from the tablet up. |
| `Scrollable` | `bool` |  | attribute `scrollable` | The body scrolls inside a bounded dialog. The body scrolls between the header and the footer when its content is taller than the dialog (a long table); below 640px it always does. |
| `Tint` | `PkDialogTint` | `None` `Product` `Archived` | attribute `tint` | A tinted card: product (green) or archived (red); a pale wash in the light theme and a dark wash in the dark theme. |
| `OnOpen` | `EventCallback` |  |  | pk-open |

Two-way binding: `@bind-IsOpen`.

When you set a named fragment (`HeaderContent`, `FooterContent`), write the body as an explicit `<ChildContent>` tag too: Razor does not allow an implicit body next to a named fragment.

**Event args**

| Event | Args class | Fields |
|---|---|---|
| `pk-close` | `PkCloseEventArgs` | Reason: string? |

**Not available as parameters** (they do not exist; do not use them)

| Parameter | Why |
|---|---|
| `FooterAlignEnd` | wrapper behaviour, not a property of the element (The footer is always end-aligned; there is nothing to switch.) |
| `OverFlyout` | wrapper behaviour, not a property of the element (Not needed: a native dialog is in the top layer, above any flyout.) |

Element details (parts, CSS custom properties, methods, accessibility): `pk-dialog` in the `plainkit-sdk` skill.

## `PkDrawer`

`<pk-drawer>`: **Drawer** (Overlays). A panel that slides in from the left, right or bottom over a dimmed page, on a native modal dialog: backdrop, focus trap and Escape come with it. A bottom sheet has a grab handle and swipe-to-close on touch. Declarative openers: data-open="#id", data-toggle and data-close work without any script (installed when the element connects).

**Parameters**

| Parameter | Type | Enum values | Sets | Description |
|---|---|---|---|---|
| `Side` | `DrawerSide?` | `Left` `Right` `Bottom` | attribute `side` | Edge it slides from. |
| `IsOpen` | `bool` |  | attribute `open` | Whether it is shown |
| `IsOpenChanged` | `EventCallback<bool>` |  | two-way pair of `IsOpen` | Raised when IsOpen changes (two-way binding: `@bind-IsOpen`). |
| `Title` | `string?` |  | attribute `heading` | Title; also the accessible name. |
| `ChildContent` | `RenderFragment?` |  | default slot | Body. |
| `FooterContent` | `RenderFragment?` |  | slot `footer` | Actions. |
| `ActionsContent` | `RenderFragment?` |  | slot `actions` | Actions strip under the header (Save, Cancel). |
| `OnClose` | `EventCallback<PkCloseEventArgs>` |  | event `pk-close` | escape, backdrop, close button, swipe or method. |
| `Persistent` | `bool` |  | attribute `persistent` | The backdrop does not close it. |
| `CloseButtonLabel` | `string?` |  | attribute `close-label` | The accessible name of the close (x) button; set it for another language or wording. |
| `Wide` | `bool` |  | attribute `wide` | A wider panel (up to 70% of the viewport). |
| `Docked` | `bool` |  | attribute `docked` | A non-modal inspector: it sits inside the nearest positioned ancestor instead of the viewport, has no backdrop and no focus trap, and the page behind stays usable. Escape still asks to close. |
| `HeaderContent` | `RenderFragment?` |  | slot `header` | Custom header content. |
| `OnOpen` | `EventCallback` |  |  | pk-open |

Two-way binding: `@bind-IsOpen`.

When you set a named fragment (`FooterContent`, `ActionsContent`, `HeaderContent`), write the body as an explicit `<ChildContent>` tag too: Razor does not allow an implicit body next to a named fragment.

**Event args**

| Event | Args class | Fields |
|---|---|---|
| `pk-close` | `PkCloseEventArgs` | Reason: string? |

**Not available as parameters** (they do not exist; do not use them)

| Parameter | Why |
|---|---|
| `Backdrop` | wrapper behaviour, not a property of the element (The element has no backdrop switch; the backdrop-less inspector is the docked prop, which is the Docked parameter.) |
| `IsLoading` | wrapper behaviour, not a property of the element (The element has no loading state. Wrapping the body in pk-loading-overlay from the component would change the shape of the markup when it toggles and remount the body; wrap ChildContent in PkLoadingOverlay yourself.) |
| `PhoneCards` | wrapper behaviour, not a property of the element (Re-decided (#1386): stays out. The SDK has no phone card layout for a drawer, so there is nothing to map.) |

Element details (parts, CSS custom properties, methods, accessibility): `pk-drawer` in the `plainkit-sdk` skill.

## `PkDropdown`

`<pk-dropdown>`: **Dropdown menu** (Overlays). A menu opened from a trigger: buttons or links, headers, dividers, checkable items and submenus, with full keyboard support (arrows, Home, End, typeahead, Right/Left for submenus, Escape).

**Parameters**

| Parameter | Type | Enum values | Sets | Description |
|---|---|---|---|---|
| `Open` | `bool` |  | attribute `open` | Whether the menu is shown. |
| `OpenChanged` | `EventCallback<bool>` |  | two-way pair of `Open` | Raised when Open changes (two-way binding: `@bind-Open`). |
| `Placement` | `string?` |  | attribute `placement` | Preferred side. |
| `KeepOpen` | `bool` |  | attribute `keep-open` | Stay open after an item is chosen (multi-select filters). |
| `HideEmpty` | `bool` |  | attribute `hide-empty` | Draws no trigger while the menu has no item to choose (only headers and dividers, or nothing): a menu of state-dependent actions disappears instead of opening empty. |
| `Mega` | `bool` |  | attribute `mega` | A wide panel whose items flow into columns (navbar mega menu). |
| `TriggerContent` | `RenderFragment?` |  | slot `trigger` | The button that opens it. |
| `ChildContent` | `RenderFragment?` |  | default slot | pk-menu-item children. |
| `OnSelect` | `EventCallback<PkSelectEventArgs>` |  | event `pk-select` | An item was chosen. |
| `OnOpen` | `EventCallback` |  | event `pk-open` | Opened. |
| `OnClose` | `EventCallback<PkCloseEventArgs>` |  | event `pk-close` | Closed. |

Two-way binding: `@bind-Open`.

When you set a named fragment (`TriggerContent`), write the body as an explicit `<ChildContent>` tag too: Razor does not allow an implicit body next to a named fragment.

**Event args**

| Event | Args class | Fields |
|---|---|---|
| `pk-close` | `PkCloseEventArgs` | Reason: string? |
| `pk-select` | `PkSelectEventArgs` | Item: JsonElement?, Value: string?, Checked: bool?, Id: string?, Selected: string[]?, Scope: string?, Query: JsonElement? |

Element details (parts, CSS custom properties, methods, accessibility): `pk-dropdown` in the `plainkit-sdk` skill.

## `PkLightbox`

`<pk-lightbox>`: **Lightbox** (Overlays). A full-screen image viewer on a native dialog: caption, counter, previous and next with arrow keys and swipe, neighbours preloaded, only safe image sources.

**Parameters**

| Parameter | Type | Enum values | Sets | Description |
|---|---|---|---|---|
| `Index` | `int` |  | attribute `index` | The index setting |
| `IndexChanged` | `EventCallback<int>` |  | two-way pair of `Index` | Raised when Index changes (two-way binding: `@bind-Index`). |
| `Label` | `string?` |  | attribute `label` | Accessible name |
| `Items` | `IReadOnlyList<PkLightboxItem>?` |  |  | The images to view: { src, alt, caption }. A property of the element (it has no attribute), set after the render. |
| `Open` | `bool` |  | attribute `open` | Whether it is shown |
| `OpenChanged` | `EventCallback<bool>` |  | two-way pair of `Open` | Raised when Open changes (two-way binding: `@bind-Open`). |
| `ChildContent` | `RenderFragment?` |  | default slot | The trigger. |
| `OnChange` | `EventCallback<PkChangeEventArgs>` |  | event `pk-change` | Another image is shown. |
| `OnClose` | `EventCallback<PkCloseEventArgs>` |  | event `pk-close` | pk-close |
| `OnOpen` | `EventCallback` |  |  | It opened. |

Two-way binding: `@bind-Index`, `@bind-Open`.

**Event args**

| Event | Args class | Fields |
|---|---|---|
| `pk-change` | `PkChangeEventArgs` | Checked: bool?, Index: double?, Value: string?, Label: string?, Previous: string? |
| `pk-close` | `PkCloseEventArgs` | Reason: string? |

Element details (parts, CSS custom properties, methods, accessibility): `pk-lightbox` in the `plainkit-sdk` skill.

## `PkMenuItem`

`<pk-menu-item>`: **Menu item** (Overlays). One row of a dropdown or context menu: a plain item, a checkbox, a radio, a section header or a divider; optional prefix and suffix (shortcut) and a nested submenu.

**Parameters**

| Parameter | Type | Enum values | Sets | Description |
|---|---|---|---|---|
| `Type` | `MenuitemType` | `Item` `Checkbox` `Radio` `Header` `Divider` | attribute `type` | What the row is. |
| `Checked` | `bool` |  | attribute `checked` | Checkbox and radio state. |
| `CheckedChanged` | `EventCallback<bool>` |  | two-way pair of `Checked` | Raised when Checked changes (two-way binding: `@bind-Checked`). |
| `Disabled` | `bool` |  | attribute `disabled` | Skipped by keyboard, not activatable. |
| `Danger` | `bool` |  | attribute `danger` | Destructive styling. |
| `Warning` | `bool` |  | attribute `warning` | Warning styling: a consequential action that is not destructive (danger wins when both are set). |
| `Value` | `string?` |  | attribute `value` | Reported in pk-select; defaults to the label. |
| `Href` | `string?` |  | attribute `href` | Renders as a link. |
| `Open` | `bool` |  | attribute `open` | A submenu is open. The item opens and closes it itself (pointer, Enter, Space or Right opens; Left or Escape inside it closes) and raises pk-submenu-toggle; a change the host makes raises nothing. |
| `OpenChanged` | `EventCallback<bool>` |  | two-way pair of `Open` | Raised when Open changes (two-way binding: `@bind-Open`). |
| `Description` | `string?` |  | attribute `description` | Plain text under the label: muted, smaller, wrapping inside the menu width, and the item's accessible description (not its name or typeahead text). Keep it to one short sentence, such as the consequence of the action; the description slot takes markup instead. |
| `ChildContent` | `RenderFragment?` |  | default slot | Label. |
| `PrefixContent` | `RenderFragment?` |  | slot `prefix` | Icon before the label, in a fixed cell like pk-nav-item's icon slot. |
| `SuffixContent` | `RenderFragment?` |  | slot `suffix` | Shortcut after it. |
| `BadgeContent` | `RenderFragment?` |  | slot `badge` | A count or status pill at the end of the row, styled like pk-nav-item's badge slot. |
| `DescriptionContent` | `RenderFragment?` |  | slot `description` | A secondary line under the label (one short sentence); it takes the place of the description attribute and, like it, is the item's accessible description. |
| `SubmenuContent` | `RenderFragment?` |  | slot `submenu` | Nested pk-menu-item children. |
| `OnSelect` | `EventCallback<PkSelectEventArgs>` |  | event `pk-select` | Chosen (bubbles to the dropdown). |

Two-way binding: `@bind-Checked`, `@bind-Open`.

When you set a named fragment (`PrefixContent`, `SuffixContent`, `BadgeContent`, `DescriptionContent`, `SubmenuContent`), write the body as an explicit `<ChildContent>` tag too: Razor does not allow an implicit body next to a named fragment.

**Event args**

| Event | Args class | Fields |
|---|---|---|
| `pk-select` | `PkSelectEventArgs` | Item: JsonElement?, Value: string?, Checked: bool?, Id: string?, Selected: string[]?, Scope: string?, Query: JsonElement? |
| `pk-submenu-toggle` | `PkSubmenuToggleEventArgs` | Open: bool? |

Element details (parts, CSS custom properties, methods, accessibility): `pk-menu-item` in the `plainkit-sdk` skill.

## `PkPopover`

`<pk-popover>`: **Popover** (Overlays). A small non-modal panel anchored to its trigger with a heading, body and actions; opens on click or hover, flips and shifts to stay on screen, closes on Escape, an outside press or focus leaving. variant="confirm" asks a yes/no question beside the control that was pressed. Declarative openers: data-open="#id", data-toggle and data-close work without any script (installed when the element connects).

**Parameters**

| Parameter | Type | Enum values | Sets | Description |
|---|---|---|---|---|
| `Open` | `bool` |  | attribute `open` | Whether the panel is shown. |
| `OpenChanged` | `EventCallback<bool>` |  | two-way pair of `Open` | Raised when Open changes (two-way binding: `@bind-Open`). |
| `Placement` | `string?` |  | attribute `placement` | Preferred side. |
| `Trigger` | `PopoverTrigger` | `Click` `Hover` `Manual` | attribute `trigger` | What opens it. |
| `Heading` | `string?` |  | attribute `heading` | Panel title. |
| `Label` | `string?` |  | attribute `label` | Accessible name when there is no heading. |
| `Variant` | `PopoverVariant` | `Default` `Confirm` | attribute `variant` | confirm adds Cancel and Confirm buttons. |
| `Message` | `string?` |  | attribute `message` | Body text for the confirm variant. |
| `ConfirmLabel` | `string?` |  | attribute `confirm-label` | Confirm button text. |
| `CancelLabel` | `string?` |  | attribute `cancel-label` | Cancel button text. |
| `Danger` | `bool` |  | attribute `danger` | Styles Confirm as destructive. |
| `TriggerContent` | `RenderFragment?` |  | slot `trigger` | The control that opens it. |
| `ChildContent` | `RenderFragment?` |  | default slot | Panel body. |
| `OnOpen` | `EventCallback` |  | event `pk-open` | Panel opened. |
| `OnClose` | `EventCallback<PkCloseEventArgs>` |  | event `pk-close` | Panel closed (escape, outside, cancel, confirm, toggle). |
| `OnConfirm` | `EventCallback` |  | event `pk-confirm` | Confirm pressed (variant confirm). |

Two-way binding: `@bind-Open`.

When you set a named fragment (`TriggerContent`), write the body as an explicit `<ChildContent>` tag too: Razor does not allow an implicit body next to a named fragment.

**Event args**

| Event | Args class | Fields |
|---|---|---|
| `pk-close` | `PkCloseEventArgs` | Reason: string? |

Element details (parts, CSS custom properties, methods, accessibility): `pk-popover` in the `plainkit-sdk` skill.

## `PkTooltip`

`<pk-tooltip>`: **Tooltip** (Overlays). A short label for the control it wraps, shown on hover, on keyboard focus and on a touch long press. Placed beside the target and flipped when it would leave the screen.

**Parameters**

| Parameter | Type | Enum values | Sets | Description |
|---|---|---|---|---|
| `Text` | `string?` |  | attribute `text` | The label. |
| `Label` | `string?` |  | attribute `label` | Accessible name of the built-in info button. |
| `TooltipContent` | `RenderFragment?` |  | slot `content` | Rich tip content in place of text. |
| `LinksContent` | `RenderFragment?` |  | slot `links` | Links shown under the panel text (a doc link, a more link). |
| `ChildContent` | `RenderFragment?` |  | default slot | The element the tip describes. |
| `Placement` | `PkTooltipPlacement` | `Top` `Bottom` `Left` `Right` | attribute `placement` | Preferred side; flips when it does not fit. |
| `HoverDelay` | `int` |  | attribute `delay` | Mouse hover delay; focus is immediate. |
| `Help` | `bool` |  | attribute `help` | Draws its own info button as the target (the default slot then holds text that follows it). |
| `Enrich` | `bool` |  | attribute `enrich` | Underlines the wrapped value with a dotted line to show it has context. |
| `Title` | `string?` |  | attribute `heading` | A bold heading inside the panel. |
| `OnShow` | `EventCallback` |  |  | The tip appeared. |
| `OnHide` | `EventCallback` |  |  | The tip went away. |

When you set a named fragment (`TooltipContent`, `LinksContent`), write the body as an explicit `<ChildContent>` tag too: Razor does not allow an implicit body next to a named fragment.

**Not available as parameters** (they do not exist; do not use them)

| Parameter | Why |
|---|---|
| `DocLink` | wrapper behaviour, not a property of the element (The element has no link props: links are your own anchors in the links slot (LinksContent), where you choose the text and target.) |
| `ExternalLink` | wrapper behaviour, not a property of the element (As DocLink.) |
| `LoadAsync` | wrapper behaviour, not a property of the element (Re-decided after the lifecycle events (#1380): stays out. Needs component state and an async load run on the first pk-show, and a hand-written component would break the thin wrapper. Use OnShow (the pk-show event) to start your own load, and set the content from your handler.) |
| `OnClick` | wrapper behaviour, not a property of the element (The element has no click event; put a click handler on the element you wrap.) |

Element details (parts, CSS custom properties, methods, accessibility): `pk-tooltip` in the `plainkit-sdk` skill.

## `PkTray`

`<pk-tray>`: **Tray** (Overlays). A persistent, non-modal tool panel pinned to a viewport edge (bottom, top, start or end) with a floating launcher and a small, medium or large size choice. No backdrop, no focus trap: the page behind stays usable. Opens from its launcher or a keyboard chord (hotkey), closes from Close, Escape inside it or the chord. Choose pk-drawer for a modal panel, pk-dock for panels arranged inside a page, and pk-tray for a tool panel over a page.

**Parameters**

| Parameter | Type | Enum values | Sets | Description |
|---|---|---|---|---|
| `Open` | `bool` |  | attribute `open` | Whether the panel is shown. The element writes it when the user opens or closes it (launcher, Close, Escape inside the panel, the hotkey); show(), hide() and toggle() change it silently. |
| `OpenChanged` | `EventCallback<bool>` |  | two-way pair of `Open` | Raised when Open changes (two-way binding: `@bind-Open`). |
| `Size` | `TraySize` | `Small` `Medium` `Large` | attribute `size` | How much of the viewport the panel takes: its height at the bottom and top edges (25, 40 and 65 percent of the viewport height), its width at the start and end edges. |
| `SizeChanged` | `EventCallback<TraySize>` |  | two-way pair of `Size` | Raised when Size changes (two-way binding: `@bind-Size`). |
| `Sizes` | `bool` |  | attribute `sizes` | Draw the built-in size choice (Small, Medium, Large) in the header. Off lets the page provide its own and set size. |
| `Label` | `string?` |  | attribute `label` | The panel's accessible name (a complementary landmark), also its header title. Required. |
| `LauncherLabel` | `string?` |  | attribute `launcher-label` | The floating launcher's text. Required unless the launcher slot supplies a name. |
| `LauncherVariant` | `TrayLauncherVariant` | `Default` `Icon` | attribute `launcher-variant` | icon turns the launcher into a bare circle around one icon (put a pk-icon in the launcher slot; launcher-label stays its accessible name): no border, transparent while the tray is closed, filled while it is open, a padding of --pk-tray-launcher-padding. On a phone it keeps the 44px touch target. default is the labelled secondary button. |
| `Hotkey` | `string?` |  | attribute `hotkey` | A chord that toggles the tray from anywhere on the page, such as Ctrl+` or Ctrl+Shift+D (Cmd counts as Ctrl). Empty turns it off. The launcher's title and aria-keyshortcuts name it. |
| `Edge` | `TrayEdge` | `Bottom` `Top` `Start` `End` | attribute `edge` | The viewport edge the panel is pinned to. start and end are the inline edges (left and right in a left-to-right page, swapped in a right-to-left one). |
| `ChildContent` | `RenderFragment?` |  | default slot | The panel content. It scrolls inside the panel, and its last row stays clear of the launcher. |
| `TrailingContent` | `RenderFragment?` |  | slot `trailing` | Extra controls in the header, beside the size choice and Close. |
| `LauncherContent` | `RenderFragment?` |  | slot `launcher` | Replaces the launcher's text (an icon plus words, for example). |
| `OnOpen` | `EventCallback<PkOpenEventArgs>` |  | event `pk-open` | The user opened the tray: launcher or hotkey. |
| `OnClose` | `EventCallback<PkCloseEventArgs>` |  | event `pk-close` | The user asked to close it: close, escape, launcher or hotkey. Cancelable: preventDefault keeps it open. |
| `OnSizeChange` | `EventCallback<PkSizeChangeEventArgs>` |  | event `pk-size-change` | The user picked another size in the built-in choice. |

Two-way binding: `@bind-Open`, `@bind-Size`.

When you set a named fragment (`TrailingContent`, `LauncherContent`), write the body as an explicit `<ChildContent>` tag too: Razor does not allow an implicit body next to a named fragment.

**Event args**

| Event | Args class | Fields |
|---|---|---|
| `pk-close` | `PkCloseEventArgs` | Reason: string? |
| `pk-open` | `PkOpenEventArgs` | X: double?, Y: double?, Target: JsonElement?, Context: string?, Src: string?, Alt: string?, Caption: string?, Reason: string? |
| `pk-size-change` | `PkSizeChangeEventArgs` | Size: string? |

Element details (parts, CSS custom properties, methods, accessibility): `pk-tray` in the `plainkit-sdk` skill.