# Elements: index

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

139 elements by group. Open the file named in a group heading for a tag's props, slots, events, parts, CSS properties, methods and examples.

Every element also takes the usual HTML global attributes (`id`, `class`, `slot`, `hidden`, `aria-*`, `data-*`). Never use a `style` attribute (the CSP blocks it): use props, parts and CSS custom properties.

Reading the tables: a prop is set as an attribute in kebab-case or as a property in camelCase (the same name unless a property is shown), and a boolean is present or absent; a `json` prop is a JSON attribute, or set the property. A slot is used as `slot="name"` on a child. Events are for `addEventListener`; `pk-*` events are CustomEvents whose `detail` is shown. Parts are styled with `::part(name)`; CSS custom properties are set on the element or a parent, from a stylesheet. "Writes to host nodes" lists attributes and props the element sets on nodes it does not own.

## Actions (`elements-actions.md`)

| Tag | What it is |
|---|---|
| `pk-button` | A button in five variants and three sizes, with busy, icon-only, toggle and disclosure forms. |
| `pk-button-group` | Buttons fused into one bar, horizontal, vertical or full width; with mode="single" its toggle buttons behave as one choice, which makes it the SDK's segmented control (a… |
| `pk-split-button` | A main action beside a caret that opens a menu of related actions, so the common case is one click and the variants stay reachable. |

## Data display (`elements-data-display.md`)

| Tag | What it is |
|---|---|
| `pk-avatar` | A person or entity as an image or initials, with sizes, shapes, a stable colour per name and an online, away or busy status dot. |
| `pk-avatar-group` | Overlapping avatars with a +N tile for the overflow. |
| `pk-badge` | A count or short label in a pill, or a status dot with a label; counts cap at a maximum (99+). |
| `pk-chart` | Bar, line, donut, stacked-bar and sparkline charts in pure SVG, drawn from a slotted data table (which stays as the accessible fallback) or from a data property. |
| `pk-code-block` | A block of code with an optional label bar, line numbers, a wrap toggle and a copy button. |
| `pk-code-view` | A read-only, line-numbered listing for code or text: sticky gutter numbers a selection leaves out, highlighted lines, coloured segments, sideways scrolling. |
| `pk-data-table` | A paged, searchable, sortable table that owns its data flow: a pk-table (manual), a pk-table-filters search/filter panel and a pk-pagination footer, with the query, the… |
| `pk-field-list` | A titled description list: term and value pairs as slotted dt and dd, or a data-driven items property, beside each other, stacked or run in; with dividers and a dense mo… |
| `pk-frame` | A sandboxed iframe (an inline srcdoc document or a same-site src) with named width presets and a light/dark theme hand-off. |
| `pk-gallery` | The SDK gallery inside your page: every control, element, layout and template with live samples, narrowed by attributes to just what you want to show. |
| `pk-heat-map` | A weighted treemap: a fixed-height area filled with boxes whose area is each item's value and whose colour is its status (neutral, info, success, warning, danger). |
| `pk-icon` | A symbol from the SDK sprite, drawn in the surrounding text colour and size. |
| `pk-image-gallery` | A grid of square thumbnails with one marked primary (a badge and an accent frame). |
| `pk-list-group` | A bordered list of rows: plain, actionable (links and buttons), with badges at the end, or a checklist. |
| `pk-local-time` | A UTC instant written in the reader's own locale and time zone, as a date, a time, both, or relative to now (3 hours ago). |
| `pk-log` | A streaming log viewer: monospace rows in a scroller that sticks to the newest row until the user scrolls up, with a button to jump back, and a cap that drops the oldest… |
| `pk-markdown` | A read-only view of Markdown text, drawn with the toolkit's own parser and renderer (the one behind pk-markdown-editor's preview): DOM calls only, so raw HTML is shown a… |
| `pk-media` | An image or video in a fixed aspect-ratio box with an optional figure caption and lightbox-ready behaviour. |
| `pk-quote` | A testimonial or pull quote: your own blockquote, with a caption for the portrait, name, role and rating. |
| `pk-specimen` | A design-token sample for spacing, size, radius, shadow and layer tokens, drawn at its resolved value with the token name and value as text. |
| `pk-stat` | A headline number with a label, an optional change indicator (arrow, sign and a spoken form), a sparkline and a tone. |
| `pk-swatch` | A colour or design-token sample with its resolved value and a WCAG AA contrast label against a comparison colour. |
| `pk-table` | A data table. |
| `pk-table-filters` | A debounced global search box plus a Filters trigger (with an active-count badge) that opens a panel around your own filter fields, so a data table or list gets consiste… |
| `pk-tag` | A neutral label that can carry a remove button. |
| `pk-timeline` | A vertical activity feed of timeline items joined by a line. |
| `pk-timeline-item` | One event on a timeline: a marker, a heading, a time and a body. |

## Feedback & status (`elements-feedback.md`)

| Tag | Also known as | What it is |
|---|---|---|
| `pk-alert` |  | A persistent message in a kind (info, success, warning, danger): optional heading, actions, a dismiss button, a full-bleed banner variant for the top of a page, and a pl… |
| `pk-empty-state` |  | What a list shows when it has no rows: an optional icon, a title, a description and the actions that fill it. |
| `pk-hint` |  | An inline explanation that opens in the flow of the page: no tooltip, no hover-only content. |
| `pk-loading-overlay` |  | Covers a region (or the whole viewport with fullscreen) with a spinner and a label while busy, and makes what it covers inert so it cannot be clicked or tabbed into. |
| `pk-progress` |  | A determinate or indeterminate progress bar on the native progress element, with sizes, colours, stripes, a label, a value readout and automatic warning colours. |
| `pk-skeleton` |  | A placeholder shape (line, paragraph, circle, block) that holds the layout while content loads. |
| `pk-spinner` |  | A busy indicator: a ring, three dots or an indeterminate bar, in three sizes, with an overlay mode for a loading panel. |
| `pk-toast` |  | One transient message: kind, optional title, message, an action slot and a dismiss button; pauses its timer on hover and focus. |
| `pk-toast-stack` | toast | The live region that holds toasts at one screen position, shows at most three at once and queues the rest; PkToast.show(message, options) creates one per position on dem… |

## Forms (`elements-form-controls.md`)

| Tag | What it is |
|---|---|
| `pk-calendar` | A small month grid to pick or show a date, with marks, minimum and maximum, and full keyboard control. |
| `pk-checkbox` | A checkbox drawn from tokens, with an indeterminate state and select-all groups: a master checkbox mirrors every checkbox of its group. |
| `pk-colour-input` | The native colour picker beside an editable hex field that stay in step; the field accepts #abc, abc and #aabbcc and is normalised to #rrggbb. |
| `pk-combobox` | An autocomplete (type to filter a list) or, with mode="select", a custom select. |
| `pk-date-range-picker` | A start and an end date with quick ranges (last 7 days, this month), a minimum and maximum, and an inline error when the end is before the start. |
| `pk-dropzone` | A drop target over a real file input: drag files in or click, with type, size and count checks, a list of accepted files with Remove, and a reason for each rejection. |
| `pk-input` | The single-line control: text, email, url, tel, search, password, number and the date and time types, with an optional clear button, password reveal, number stepper, mon… |
| `pk-lookup-picker` | A select-style field for a long list (customers, products, users) that does not fit pk-combobox: its popup holds a searchable, pageable pk-data-table, so the reader tell… |
| `pk-markdown-editor` | A field for writing Markdown: a real textarea whose value is the Markdown text, a formatting toolbar (bold, italic, heading, quote, bulleted and numbered lists, link) an… |
| `pk-otp-input` | A one-time code or PIN as a row of cells: typing advances, Backspace steps back, a pasted or autofilled code spreads across the cells, and completion is an event. |
| `pk-property-grid` | A property inspector: fields in collapsible groups (text, number, unit, range, colour, select, switch), each a labelled real control, with per-property validation and a… |
| `pk-radio-group` | One choice from a few options, as radios or as a segmented bar. |
| `pk-range` | A slider, or with dual a minimum and maximum slider, drawn from tokens with a live value output. |
| `pk-rating` | A whole-star rating input (radios underneath), and a compact read-only display form. |
| `pk-select` | The browser select in the same skin as the text input. |
| `pk-select-menu` | A single-choice listbox popup that reads native option children, so it degrades to nothing worse than a list; form-associated, keyboard driven with typeahead. |
| `pk-switch` | An on/off toggle that takes part in a form: it submits its value when on and resets with the form. |
| `pk-tag-input` | Free-text tags typed into one control: Enter or a separator adds, paste splits, Backspace in an empty field removes the last, duplicates and a maximum are handled. |
| `pk-textarea` | A multi-line control that can grow with its content up to a cap. |
| `pk-unit-input` | A number and a unit select in one field for lengths such as 1.5rem or 24px; the value is the two joined, and a value with a unit outside the list keeps its unit. |

## Form layout (`elements-form-layout.md`)

| Tag | What it is |
|---|---|
| `pk-field` | The label, help, error, warning and counter around a form control, with the wiring between them. |
| `pk-field-group` | A form drawn from a list of field specs: each entry becomes a pk-field with the right control (pk-input of every scalar type, pk-textarea, pk-select, pk-checkbox, pk-swi… |
| `pk-field-row` | A wrapping row of fields that share the width: each field grows from a 120px minimum, a wide field takes a row of its own. |
| `pk-form` | Wraps a form and shows the browser's constraint validation well: messages in each field, a summary with links, focus on the first problem, and live re-checking. |
| `pk-form-actions` | The bar of buttons under a form, aligned start, end or between, and sticky to the bottom of a long form. |
| `pk-form-section` | A titled section of a form: heading and description beside a responsive grid of fields (stacked at 1024px and below). |
| `pk-record-form` | The page layout of a create-or-edit record around your own form: a toolbar (Cancel, your actions, Delete, Save), optional tabs, an error alert, the form in a pk-form (a… |

## Containers (`elements-layout.md`)

| Tag | Also known as | What it is |
|---|---|---|
| `pk-accordion` |  | A stack of collapsible sections; exclusive mode keeps one open. |
| `pk-accordion-item` |  | A collapsible section on a native details element. |
| `pk-app-frame` |  | The app frame from data: header (brand, module picker, search, settings), side nav, breadcrumbs, page and footer. |
| `pk-app-shell` |  | The page frame: nav column, header, one scrolling body and footer. |
| `pk-canvas` | canvas, workspace canvas, pan zoom, artboard | A pan and zoom ground for design tools: slotted content sits in a world you drag, pinch or Ctrl+wheel around, over an optional grid. |
| `pk-card` |  | A titled panel with optional media, header actions and footer. |
| `pk-cluster` |  | A wrapping row (or column) of controls with a fixed gap: the layout primitive for button rows, chip lists and toolbars. |
| `pk-container` |  | A max-width, padded content region, optionally scrolling on its own. |
| `pk-cta-band` |  | A full-width call-to-action surface: your own heading, a line of text and one or two actions. |
| `pk-dashboard-page` |  | A dashboard of widgets, each a pk-card holding a pk-stat, a pk-chart or a pk-table, optionally grouped into tabs and headed sections, with an optional filter bar. |
| `pk-design-surface` |  | A scrolling ground that frames a page being edited at full, tablet or phone width, draws selection, drop-target, hidden and empty marks around the page's nodes, and plac… |
| `pk-detail-layout` |  | A record-detail page's body: main content and a sticky sidebar of summary cards, Below a container width (not the viewport) it collapses to one column; sidebarFirst puts… |
| `pk-divider` |  | A rule between content, horizontal or vertical, with an optional label. |
| `pk-doc-page` |  | A page of long-form documents: a filterable side nav of items, an article with a title, summary and body, a table of contents and a previous/next pager. |
| `pk-dock` |  | A workspace of panels laid out as a tree of resizable splits and tab groups. |
| `pk-fill-column` |  | A column in a parent of fixed height: the fixed slot keeps its height, the rest fills and scrolls. |
| `pk-grid` |  | Equal-width responsive columns: as many columns of at least min as fit, one column on a phone. |
| `pk-heading` |  | A real h1 to h6 heading in the shadow tree, with a visual size decoupled from the level: the semantic counterpart of pk-text's look-only h1 to h6 variants, for a strict… |
| `pk-kanban` |  | A board of pk-kanban-column children, each holding pk-sortable-item cards (usually a pk-card inside). |
| `pk-kanban-column` |  | One column of a pk-kanban: a title with a card count, the cards, and a message when it has none. |
| `pk-label-sheet` |  | A grid of fixed physical cells for labels, bin tags and entry cards: set the cell size in mm, in or pt, a gap and the cells per row; each child is one cell and is never… |
| `pk-list` |  | A plain ordered or unordered prose list: bullets, numbers or checkmarks on items the host writes as plain elements, never a raw ul, ol or li. |
| `pk-list-page` |  | A filterable, sortable, paginated list of records: a pk-data-table (the one implementation of the query, load and states: a manual pk-table, a pk-table-filters search/fi… |
| `pk-master-detail-page` |  | Static slotted mode (for server-rendered, JavaScript-optional sites): write your own list as a child in slot="list" (a pk-side-nav of links, a plain list) and the record… |
| `pk-not-found-page` |  | The "this page doesn't exist" or "you don't have access" screen for a whole page, built on the same shared state markup as pk-states-page's empty state. |
| `pk-note-page` |  | A static informational page: a heading and a block of prose in a card. |
| `pk-page-header` |  | The top of a page, a section or a record: a breadcrumb row, a title bar with actions, and a note line. |
| `pk-page-shell` |  | The frame of one page: a pk-page-header (breadcrumb, title, actions, a docked tab strip) above one content region. |
| `pk-print-page` |  | A page whose document is the only thing that prints: a statement, a sheet of labels, a count sheet. |
| `pk-record-page` |  | One record shown and edited on a page: the fields read as a pk-field-list, or as a validated pk-form (a pk-field-group per section card) in edit mode, beside sidebar car… |
| `pk-settings-page` |  | A sectioned settings form with a sticky Save/Discard bar that appears once a field differs from its last saved value. |
| `pk-sortable` |  | A pointer, touch and keyboard reorder list. |
| `pk-sortable-item` |  | One row of a pk-sortable: drag its handle (pointer or touch) to reorder, or focus the row and press Alt+Up/Alt+Down. |
| `pk-splitter` |  | Two panes with a draggable separator between them: resize by pointer or arrow keys, side by side or stacked, with a minimum and maximum size. |
| `pk-stack` |  | A vertical stack of children with an even gap: the layout primitive for form sections, card bodies and page columns. |
| `pk-states-page` |  | The loading, empty, error and forbidden content a page shows in place of its own, one at a time: the page-type building block for "nothing to show yet". |
| `pk-text` |  | A themed paragraph, or a run of text inside a line, on the type scale and colour tokens: the text counterpart of pk-stack and pk-cluster. |
| `pk-tool-page` |  | A page that takes input, runs one action and shows the outcome: input fields, a Run button, and a stat, table, code block or line of text once it finishes. |
| `pk-toolbar` |  | A row with a lead (title and note) on the left and actions on the right. |
| `pk-wizard-page` |  | A multi-step flow on a page: a pk-stepper for progress, one step's fields at a time as a validated pk-form (or your own content through mountStep), and Back, Next and Su… |
| `pk-workspace` |  | A tool page in panes: a nav pane, a main pane and an optional docked aside, each scrolling on its own. |
| `pk-workspace-page` |  | A page of side-by-side panes (a nav, a main pane and an optional aside) that each scroll on their own, built on pk-workspace: on a phone one pane shows at a time behind… |

## Navigation (`elements-navigation.md`)

| Tag | What it is |
|---|---|
| `pk-app-bar-search` | A search field for a shell's header row: a pill that fills the space it is given, results in a panel below it; a bare (borderless, plain-variant) icon button (--pk-butto… |
| `pk-back-to-top` | A floating button that appears once the reader is well down the page and scrolls the page (or a named scroller) back to the top, smoothly unless reduced motion is on. |
| `pk-breadcrumb` | The path to the current page as a trail of links with chevrons; the middle collapses behind a "..." button when the trail is long, sooner on a phone. |
| `pk-link` | A router-aware text link: a real anchor in prose or a nav row, with href for an ordinary address or to for an app route the app router handles without a full page load. |
| `pk-nav-item` | A row of a side nav: a link, or a branch that folds its children; icon, badge, active bar and disabled state. |
| `pk-navbar` | The top navigation: brand, links, dropdown and mega menus, right-aligned actions, sticky option, and a hamburger that folds the links below 1024px. |
| `pk-pager` | Page-level previous and next links between sibling pages, with an optional centre note ("Step 2 of 5"); table pagination is a separate control. |
| `pk-pagination` | Page navigation: numbered with ellipses, a range summary, a page-size select, a simple previous and next form, or load more. |
| `pk-scroll-progress` | A thin bar at the top of the screen that fills as the page (or a named scroller) is read. |
| `pk-side-nav` | The app’s side navigation: brand, filter box, nested groups with arrow-key tree navigation, collapse to an icon rail (tooltips on rows, branches open as flyouts), persis… |
| `pk-skip-link` | The first focusable element on a page: invisible until it takes focus, then a button that jumps past the navigation to the main content. |
| `pk-step` | One step of a stepper: a marker (number, tick or !), a title, an optional description and the connector to the next step. |
| `pk-stepper` | A wizard header: numbered steps with done, current, upcoming and error states, horizontal or vertical, optionally clickable (linear: you can go back, not skip ahead). |
| `pk-tab` | One tab of an pk-tabs. |
| `pk-tab-panel` | The content of one tab; shown while its tab is selected. |
| `pk-tabs` | A tab strip with optional panels. |
| `pk-toc` | An anchor list of the headings inside a target element with scroll-spy: the heading in view is marked as you read; works with the window or an inner scroller such as the… |
| `pk-tree` | An expandable hierarchy of tree items with roving focus, single selection and type-ahead, following the WAI-ARIA tree pattern. |
| `pk-tree-item` | One node of a tree: a toggle, a label and nested child items. |

## Overlays (`elements-overlays.md`)

| Tag | Also known as | What it is |
|---|---|---|
| `pk-badge-popover` |  | 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 g… |
| `pk-card-menu` | card actions menu, more menu, kebab menu | The "..." (or settings) button of a card header that opens a menu of secondary actions. |
| `pk-command-palette` |  | 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 an… |
| `pk-context-menu` |  | 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. |
| `pk-dialog` | modal | 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. |
| `pk-drawer` | popup | 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. |
| `pk-dropdown` | dropdown menu | 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… |
| `pk-lightbox` |  | 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. |
| `pk-menu-item` |  | 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. |
| `pk-popover` |  | 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 outsi… |
| `pk-tooltip` |  | A short label for the control it wraps, shown on hover, on keyboard focus and on a touch long press. |
| `pk-tray` | tool dock, bottom panel, dev tools, console panel | 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. |