API reference — BMX Web Components

`<bmx-accordion>`

Properties

Property	Attribute	Type	Default	Description
`appearance`	`appearance`	`BmxAccordionAppearance`	`'bordered'`	How the accordion is drawn.
`collapsible`	`collapsible`	`boolean`	`true`	Whether the open panel may be closed again, leaving none. Only asked when one panel may be open. False is the right shape for a wizard, where something must always be showing; true is the right shape for a list of questions, where closing the answer you have read is the obvious thing to try.
`expanded`	property only	`string[]`	`[]`	Which panels are open, by value. Mutable, so pressing a heading updates it. Seeded from whichever items were written with `open` when the accordion first reads its children, and made legal on the way in: values naming nothing are dropped, and several open items in a single-open accordion keep the first in document order. Accepts a comma-separated or JSON string as well, because an attribute is the only channel some templates have. See `src/core/markup.ts`.
`headingLevel`	`heading-level`	`number`	`3`	The `aria-level` every item's heading is given.
`multiple`	`multiple`	`boolean`	`false`	Whether more than one panel may be open. The default is one at a time, which is what makes it an accordion rather than a list of disclosures - and what a long page of sections usually wants, because it keeps the headings within reach of each other.

Events

Event	Detail	Description
`bmxChange`	`BmxAccordionChangeDetail`	Fired when a panel opens or closes.

Methods

Method	Signature	Description
`closeAll`	`closeAll() => Promise<void>`	Close every panel. Ignored when one must always be showing.
`closePanel`	`closePanel(value: string) => Promise<void>`	Close a panel by value.
`openAll`	`openAll() => Promise<void>`	Open every panel. Ignored unless several may be open.
`openPanel`	`openPanel(value: string) => Promise<void>`	Open a panel by value, closing another if only one may be open.

Slots

Slot	Description
`(default)`	`bmx-accordion-item` elements.

CSS shadow parts

Part	Description
`base`	The container.

CSS custom properties

Property	Description
`--bmx-accordion-background`	Background behind the sections.
`--bmx-accordion-border-color`	Colour of the rules between sections.
`--bmx-accordion-gap`	Space between sections in the separated appearance.
`--bmx-accordion-radius`	Corner radius of the container, or of each section when separated.

`<bmx-accordion-item>`

Properties

Property	Attribute	Type	Default	Description
`badge`	`badge`	`string`	—	A short count or status, rendered after the heading text.
`disabled`	`disabled`	`boolean`	`false`	Whether it can be opened.
`heading`	`heading`	`string`	—	The heading's text.
`headingLevel`	`heading-level`	`number`	`3`	The heading level this section sits at, as `aria-level`. Set by `bmx-accordion` from its own `heading-level` so a whole accordion is consistent; set it here when using an item on its own.
`icon`	`icon`	`string`	—	An inline SVG string, rendered before the heading text.
`open`	`open`	`boolean`	`false`	Whether the panel is showing. Mutable, so pressing the heading changes it. Inside a `bmx-accordion` the accordion owns this - it is the thing that knows whether another panel has to close first - and writes it on every item.
`value`	`value`	`string`	—	What this item is identified by in the accordion's `expanded` and in events. Falls back to the heading and then to its position, so a set of items written with headings alone still reports something distinguishable.

Events

Event	Detail	Description
`bmxToggle`	`BmxAccordionToggleDetail`	Fired when the item opens or closes.

Methods

Method	Signature	Description
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focus this item's heading button.
`toggle`	`toggle() => Promise<void>`	Open or close it, as pressing the heading would.

Slots

Slot	Description
`(default)`	The panel's content.
`heading`	Rich heading content, in place of the `heading` property.

CSS shadow parts

Part	Description
`badge`	The badge after it.
`content`	The clipping box inside the panel. Its padding is on an inner element, so that a closed panel collapses to nothing.
`header`	The element carrying `role="heading"`.
`icon`	The icon before the heading text.
`marker`	The chevron that turns.
`region`	The panel.
`trigger`	The button inside it.

CSS custom properties

Property	Description
`--bmx-accordion-heading-font-size`	Size of the heading text.
`--bmx-accordion-heading-weight`	Weight of the heading text.
`--bmx-accordion-hover`	Background of a heading under the pointer.
`--bmx-accordion-marker-size`	Size of the chevron.
`--bmx-accordion-padding-block`	Space inside the heading, down.
`--bmx-accordion-padding-inline`	Space inside the heading and the panel, across.

`<bmx-annotation-studio>`

Properties

Property	Attribute	Type	Default	Description
`activeClass`	`active-class`	`string`	—	The class new shapes get. Default: the first. Two-way.
`allowAdd`	`allow-add`	`boolean`	`false`	Lets the reader add image files (shown with `blob:` addresses; `bmxAddImages` hands the files to the page).
`fillOpacity`	`fill-opacity`	`number`	`0.22`	How strongly shapes are filled, 0 to 1.
`image`	`image`	`string`	—	The id of the image shown. Default: the first. Two-way.
`label`	`label`	`string`	—	The studio's accessible name.
`minConfidence`	`min-confidence`	`number`	`0`	Predictions with a confidence below this (0 to 1) are not shown. Two-way.
`mode`	`mode`	`'annotate' \| 'review'`	`'annotate'`	Labelling, or reviewing (shapes read-only, with approve and reject).
`project`	`project`	`BmxAnnotationProject \| string`	`{ classes: [], images: [] }`	The project: classes, image attributes and images with their annotations (object or JSON). Two-way.
`queue`	`queue`	`boolean`	`true`	Show the list of images.
`readonly`	`readonly`	`boolean`	`false`	Shows everything without letting it change.
`showLabels`	`show-labels`	`boolean`	`true`	Show class names on the shapes. Two-way.
`strings`	`strings`	`Partial<BmxAnnotationStudioStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`tool`	`tool`	`BmxAnnotationTool`	`'select'`	The tool in use. Two-way.
`user`	`user`	`string`	—	The name new annotations and review notes are signed with.

Events

Event	Detail	Description
`bmxAddImages`	`BmxAnnotationAddImagesDetail`	Fired when the reader adds image files: keep the files, and replace their `blob:` addresses with your own.
`bmxChange`	`BmxAnnotationChangeDetail`	Fired after every change, with the whole project.
`bmxImageChange`	`BmxAnnotationImageDetail`	Fired when another image is shown.

Methods

Method	Signature	Description
`addAnnotation`	`addAnnotation(annotation: Partial<BmxAnnotation>, image?: string) => Promise<BmxAnnotation \| null>`	Adds an annotation (as JSON) to an image (default: the one shown). Resolves with it, or null when it cannot be read.
`addImages`	`addImages(images: Partial<BmxAnnotationImage>[]) => Promise<BmxAnnotationImage[]>`	Adds images to the end of the queue.
`check`	`check(image?: string) => Promise<BmxAnnotationProblem[]>`	What needs fixing in the project (or one image).
`deleteAnnotation`	`deleteAnnotation(id: string) => Promise<boolean>`	Deletes an annotation.
`exportAs`	`exportAs(format: BmxAnnotationFormat, options?: BmxAnnotationExportOptions) => Promise<BmxAnnotationExport>`	The project in a format, as files by path, with what had to be left out.
`exportZip`	`exportZip(format: BmxAnnotationFormat, options?: BmxAnnotationExportOptions) => Promise<{ zip: Uint8Array; warnings: string[]; }>`	The project in a format, as one ZIP file.
`fit`	`fit() => Promise<void>`	Fits the image to the view.
`getProject`	`getProject() => Promise<BmxAnnotationProject>`	The project as it stands.
`importCoco`	`importCoco(json: unknown) => Promise<string[]>`	Reads COCO JSON: its classes and images join the project's (images matched by file name), its annotations replace theirs.
`importVoc`	`importVoc(files: Record<string, string>) => Promise<string[]>`	Reads Pascal VOC XML files (by path, as text).
`importYolo`	`importYolo(files: Record<string, string>, options?: { task?: BmxYoloTask; }) => Promise<string[]>`	Reads YOLO label files (by path, as text) onto the project's images, matched by name.
`next`	`next() => Promise<void>`	Shows the next image (in the current status filter).
`previous`	`previous() => Promise<void>`	Shows the previous image.
`redo`	`redo() => Promise<boolean>`	Redoes the last undone change.
`selectAnnotation`	`selectAnnotation(id: string \| null) => Promise<void>`	Selects an annotation on the image shown, or clears the selection with null.
`selectImage`	`selectImage(image: string \| number) => Promise<boolean>`	Shows an image by id or position.
`setProject`	`setProject(project: BmxAnnotationProject \| string, options?: { keepHistory?: boolean; }) => Promise<void>`	Replaces the project. `keepHistory` keeps undo.
`setStatus`	`setStatus(status: BmxAnnotationStatus, options?: { image?: string; note?: string; }) => Promise<void>`	Sets an image's status (default: the one shown), with an optional review note.
`undo`	`undo() => Promise<boolean>`	Undoes the last change.
`updateAnnotation`	`updateAnnotation(id: string, patch: Partial<BmxAnnotation>) => Promise<boolean>`	Changes an annotation (on any image).
`zoomTo`	`zoomTo(level: number) => Promise<void>`	Zooms to a level (1 = one image pixel per screen pixel), around the view's centre.

CSS shadow parts

Part	Description
`panel`	The classes, the selected annotation and the image's details.
`queue`	The list of images.
`stage`	The image and its shapes.
`toolbar`	The tools, zoom, image and export controls.

CSS custom properties

Property	Description
`--bmx-annotation-studio-handle`	The fill of the handles of the selected shape.
`--bmx-annotation-studio-height`	The height of the queue, image and panel.
`--bmx-annotation-studio-panel-width`	The width of the panel of classes and details.
`--bmx-annotation-studio-queue-width`	The width of the list of images.
`--bmx-annotation-studio-stage-background`	What shows around and behind the image.
`--bmx-annotation-studio-stroke-width`	The width of shape outlines on screen, at any zoom.

`<bmx-api-explorer>`

Properties

Property	Attribute	Type	Default	Description
`credentials`	property only	`BmxApiCredentials`	`{}`	Credentials to start with, by security scheme id (from script). Mutable: the reader's changes are written back.
`fetcher`	property only	`BmxApiFetcher`	—	Sends requests instead of `fetch` (from script).
`headingLevel`	`heading-level`	`number`	`2`	The level of the operation's heading (1 to 5); sections are one below.
`label`	`label`	`string`	—	The element's accessible name. Default: the API's title.
`languages`	`languages`	`BmxApiLanguage[] \| string`	`[...LANGUAGES]`	The code sample languages offered, in order: `curl`, `javascript`, `csharp`, `python`.
`mock`	`mock`	`boolean`	`false`	Answer from the description's examples instead of sending anything.
`requestHeaders`	`request-headers`	`Record<string, string> \| string`	—	Headers every request carries, as an object or JSON (a tenant id, a trace header).
`revealSecrets`	`reveal-secrets`	`boolean`	`false`	Show credentials in code samples instead of placeholders.
`selected`	`selected`	`string`	`''`	The chosen operation: `GET /orders/{id}` or an operationId. Empty shows the overview. Mutable.
`server`	`server`	`string`	`''`	The chosen server (its URL as the description writes it, or its index). Mutable.
`spec`	`spec`	`Record<string, unknown> \| string`	—	The API description: an object, or JSON or YAML text.
`specUrl`	`spec-url`	`string`	—	Where to fetch the description from (JSON or YAML), when `spec` is not set.
`strings`	`strings`	`Partial<BmxApiExplorerStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`timeout`	`timeout`	`number`	`30000`	Milliseconds before a request is given up.
`tryIt`	`try-it`	`boolean`	`true`	Show the Send button and the editable fields. False makes it read-only documentation.

Events

Event	Detail	Description
`bmxAuthChange`	`BmxApiAuthDetail`	Fired when the reader changes the credentials.
`bmxLoad`	`BmxApiLoadDetail`	Fired when the description has been read.
`bmxRequest`	`BmxApiRequestDetail`	Fired before a request is sent. Cancel it to send the request yourself.
`bmxResponse`	`BmxApiResponseDetail`	Fired when a response arrives, or the request fails.
`bmxSelect`	`BmxApiSelectDetail`	Fired when the reader chooses an operation.

Methods

Method	Signature	Description
`clearCredentials`	`clearCredentials() => Promise<void>`	Forgets every credential.
`getRequest`	`getRequest() => Promise<BmxApiRequest \| undefined>`	The request the chosen operation would send now.
`getSnippet`	`getSnippet(language?: BmxApiLanguage) => Promise<string>`	A code sample of the chosen operation's request (credentials as placeholders unless `reveal-secrets`).
`getSpec`	`getSpec() => Promise<BmxApiSpec \| null>`	The description as read (null until it is).
`selectOperation`	`selectOperation(id: string) => Promise<boolean>`	Chooses an operation by key or operationId; empty shows the overview. Resolves whether it was found.
`send`	`send() => Promise<BmxApiResponseData \| undefined>`	Sends the chosen operation's request as filled in. Resolves with the response (undefined when it failed or was cancelled).
`setCredentials`	`setCredentials(credentials: BmxApiCredentials) => Promise<void>`	Sets the credentials (merged with those set).
`setFocus`	`setFocus() => Promise<void>`	Focuses the list of operations.
`setValue`	`setValue(param: string, value: string, operation?: string) => Promise<void>`	Sets a parameter's value for an operation (default: the chosen one), by `in:name` (`query:limit`).

CSS shadow parts

Part	Description
`code`	A code sample.
`detail`	The chosen operation, or the overview.
`method`	A method badge (GET, POST...).
`nav`	The list of operations.
`operation`	One operation in the list; also `operation-selected`.
`response`	The response panel.
`section`	A section of the detail (parameters, body, responses, code).
`send`	The Send button.
`sidebar`	The column with the server, authorization and operations.

CSS custom properties

Property	Description
`--bmx-api-explorer-background`	The detail pane's background.
`--bmx-api-explorer-code-background`	The background of code samples and response bodies.
`--bmx-api-explorer-code-font-size`	The font size of code.
`--bmx-api-explorer-height`	The element's height (each column scrolls inside it); `auto` lets it grow with the page.
`--bmx-api-explorer-radius`	Corner radius of the element and its panels.
`--bmx-api-explorer-sidebar-background`	The operations column's background.
`--bmx-api-explorer-sidebar-width`	The operations column's width.

`<bmx-audio-editor>`

Properties

Property	Attribute	Type	Default	Description
`label`	`label`	`string`	—	An accessible name.
`noFiles`	`no-files`	`boolean`	`false`	Hide the Open buttons (when the page supplies the audio).
`panel`	`panel`	`BmxAudioEditorPanel`	`'edit'`	The side panel shown. Mutable.
`project`	`project`	`BmxAudioProject \| Record<string, unknown> \| string`	—	The project: tracks, clips, markers and redactions, or JSON. The audio itself is added with `addAudio`. Mutable: edits replace it.
`readonly`	`readonly`	`boolean`	`false`	Listen, select, measure and export, but not change.
`src`	`src`	`string`	—	A recording to open as a one-track project.
`strings`	`strings`	`Partial<BmxAudioEditorStrings> \| string`	—	Replacement words, for translation (an object or JSON).
`transcript`	property only	`unknown`	—	Word timings for finding personal data: any of the transcript shapes `readWords` reads, or WebVTT / SRT text.

Events

Event	Detail	Description
`bmxChange`	`BmxAudioChangeDetail`	The project changed.
`bmxError`	`{ message: string; }`	Something could not be read or played.
`bmxExport`	`BmxAudioExportDetail`	An export was made. Cancel to keep it from downloading.
`bmxLoad`	`BmxAudioLoadDetail`	A recording was read.
`bmxPlayState`	`BmxAudioPlayDetail`	Playback started or stopped.
`bmxSelectionChange`	`BmxAudioSelectionDetail`	The selection or the chosen clips changed.

Methods

Method	Signature	Description
`addAudio`	`addAudio(input: Blob \| ArrayBuffer \| string \| BmxAudio, options?: BmxAudioAddOptions) => Promise<string>`	Add a recording: a File or Blob, bytes, a URL, or samples (`{ sampleRate, channels: Float32Array[] }`). It goes on a new track as one clip unless `sourceOnly` - use that to supply the audio for clips a project already refers to by `id`. Returns the source id.
`applyRedactions`	`applyRedactions(items: readonly { start: number; end: number; label?: string; }[], mode?: BmxRedactionMode) => Promise<void>`	Bleep (or silence) ranges - findings, or any `{ start, end, label }`.
`exportWav`	`exportWav(options?: { bits?: 16 \| 24 \| 32; start?: number; end?: number; download?: boolean; }) => Promise<Blob>`	The mix as a WAV file (a Blob), markers included as cue points.
`findRedactions`	`findRedactions(options?: { kinds?: (BmxPiiKind \| "dtmf")[]; }) => Promise<BmxRedactionCandidate[]>`	Find what to redact: personal data in the transcript and keypad tones in the audio. `kinds` narrows the search (default: everything but long numbers).
`findSilence`	`findSilence(options?: { threshold?: number; minDuration?: number; }) => Promise<[number, number][]>`	Find the silent stretches of the mix; they are listed in the Levels panel, to remove or mark.
`getProject`	`getProject() => Promise<BmxAudioProject>`	The project as it stands.
`getSelection`	`getSelection() => Promise<BmxAudioSelectionDetail \| undefined>`
`getSource`	`getSource(id: string) => Promise<BmxAudio \| undefined>`	The audio for a source id, if loaded.
`getTime`	`getTime() => Promise<number>`	The playhead's time.
`measureLoudness`	`measureLoudness() => Promise<BmxLoudness>`	Measure the mix's loudness (integrated LUFS, range, peak).
`normalizeLoudness`	`normalizeLoudness(target?: string \| { lufs?: number; peak?: number; }) => Promise<number>`	Bring the mix to a loudness target - `streaming` (-14 LUFS), `podcast` (-16), `speech` (-19), `broadcast` (-23) or `{ lufs, peak }` - without its peak passing -1 dBFS (or the `peak` given). Returns the gain applied, in dB.
`pause`	`pause() => Promise<void>`
`play`	`play(from?: number) => Promise<void>`	Start playing (from a time, or the playhead).
`redo`	`redo() => Promise<void>`
`removeRanges`	`removeRanges(ranges: readonly (readonly [number, number])[]) => Promise<void>`	Remove stretches of time from every track and close the gaps - what `findSilence` found, say.
`renderMix`	`renderMix(options?: { start?: number; end?: number; sampleRate?: number; channels?: 1 \| 2; redact?: boolean; }) => Promise<BmxAudio>`	Render the mix (or part of it): what is heard, redactions applied.
`seek`	`seek(time: number) => Promise<void>`	Move the playhead.
`select`	`select(start: number, end: number, tracks?: string[]) => Promise<void>`	Select a time range on some tracks (all by default); `end` <= `start` clears the selection.
`undo`	`undo() => Promise<void>`

CSS shadow parts

Part	Description
`panel`	The side panel.
`timeline`	The tracks.
`toolbar`	The toolbar.

CSS custom properties

Property	Description
`--bmx-audio-editor-clip`	A clip's background.
`--bmx-audio-editor-clip-chosen`	A chosen clip's background.
`--bmx-audio-editor-fade`	Fade curves and handles.
`--bmx-audio-editor-grid`	Ruler ticks.
`--bmx-audio-editor-head-width`	The track heads' width.
`--bmx-audio-editor-height`	The timeline's maximum height before it scrolls.
`--bmx-audio-editor-marker`	Markers.
`--bmx-audio-editor-panel-width`	The side panel's width.
`--bmx-audio-editor-playhead`	The playhead.
`--bmx-audio-editor-radius`	The element's corner radius.
`--bmx-audio-editor-redaction`	Redacted ranges.
`--bmx-audio-editor-ruler-text`	Ruler labels.
`--bmx-audio-editor-selection`	The selection.
`--bmx-audio-editor-wave`	The waveform.
`--bmx-audio-editor-wave-chosen`	The waveform of a chosen clip.

`<bmx-avatar>`

Properties

Property	Attribute	Type	Default	Description
`alt`	`alt`	`string`	—	What the image is announced as, when it should not be the name. Rarely needed: an avatar is a picture of the person named beside it, so the name is the right text almost always.
`decorative`	`decorative`	`boolean`	`false`	Hide the avatar from assistive technology. Set it when the person's name is already written beside the picture, which is most lists. See the note above - this is the one decision here that the component genuinely cannot make for the consumer.
`loading`	`loading`	`'lazy' \| 'eager'`	`'lazy'`	Whether the browser may defer loading the photograph.
`name`	`name`	`string`	—	The person's name. The initials, the tint and the announcement all come from it.
`seed`	`seed`	`string`	—	What the tint is derived from, when it should not be the display name. A user id is the better seed in any application where people can rename themselves: `name` changes when somebody marries and their colour changes with it, which is exactly the thing a derived colour was supposed to stop.
`shape`	`shape`	`BmxAvatarShape`	`'circle'`	A circle, or a rounded square.
`src`	`src`	`string`	—	A photograph. Falls back to the initials if it fails to load.

Slots

Slot	Description
`(default)`	A custom fallback, used in place of the anonymous glyph.
`badge`	A `bmx-badge` pinned to the corner: presence, a count, a state.

CSS shadow parts

Part	Description
`badge`	The corner the badge slot sits in.
`icon`	The anonymous glyph, when there is not even a name.
`image`	The photograph.
`initials`	The letters drawn when there is no photograph.

CSS custom properties

Property	Description
`--bmx-avatar-color`	The fallback background, overriding the derived tint.
`--bmx-avatar-font-size`	The initials, relative to the avatar by default.
`--bmx-avatar-font-weight`	How heavy the initials are.
`--bmx-avatar-radius`	The corner radius in `square` shape.
`--bmx-avatar-ring`	The ring drawn round the edge. `none` removes it.
`--bmx-avatar-size`	The diameter, or the side of the square.
`--bmx-avatar-text`	The colour of the initials and the glyph.
`--bmx-avatar-tone-0`	The first tint of the derived palette.
`--bmx-avatar-tone-1`	The second.
`--bmx-avatar-tone-2`	The third.
`--bmx-avatar-tone-3`	The fourth.
`--bmx-avatar-tone-4`	The fifth.
`--bmx-avatar-tone-5`	The sixth.
`--bmx-avatar-tone-6`	The seventh.
`--bmx-avatar-tone-7`	The eighth.

`<bmx-avatar-group>`

Properties

Property	Attribute	Type	Default	Description
`decorative`	`decorative`	`boolean`	`false`	Hide the whole stack from assistive technology, when the names are listed beside it.
`items`	property only	`BmxAvatarEntry[]`	`[]`	The people, as data. Read through `src/core/markup.ts`, so an `items='[{"name":"Ada"}]'` attribute written by a server-side template is the list it looks like rather than a string the component tries to map over.
`label`	`label`	`string`	—	What the stack is: "Assigned to", "Attending", "Editors".
`max`	`max`	`number`	—	The most faces to draw before the rest become a counter. Never hides exactly one.
`moreLabel`	`more-label`	`string`	—	The counter's accessible name, when the composed one is not wanted.

Slots

Slot	Description
`(default)`	`bmx-avatar` elements.

CSS shadow parts

Part	Description
`group`	The row.
`more`	The counter.

CSS custom properties

Property	Description
`--bmx-avatar-group-more-background`	The fill of the counter.
`--bmx-avatar-group-more-color`	The text on it.
`--bmx-avatar-group-overlap`	How far each avatar sits over the one before it.
`--bmx-avatar-group-ring`	The ring that separates one avatar from the next.

`<bmx-badge>`

Properties

Property	Attribute	Type	Default	Description
`dot`	`dot`	`boolean`	`false`	Draw a mark with no number in it. Then `label` is not optional: a dot with nothing to say is a decoration, and this component makes it one - `aria-hidden`, out of the tree entirely.
`for`	`for`	`string`	—	The `id` of the control this badge belongs to. The badge writes `aria-describedby` on it, so the count is announced as part of that control rather than as a loose number beside it. The control must be in the same document or shadow root as the badge, which is what an ID reference means everywhere in the platform.
`label`	`label`	`string`	—	What is being counted: `unread messages`, `items in your basket`. It reaches the announcement and never the bubble. Without it a screen reader is given a bare number, which is the accessible equivalent of a red dot with no explanation.
`max`	`max`	`number`	`99`	The largest count drawn in full. Past it the bubble shows `99+`, and the exact number is still announced.
`placement`	`placement`	`BmxBadgePlacement`	`'top-end'`	Where the bubble sits over slotted content.
`showZero`	`show-zero`	`boolean`	`false`	Draw a count of zero instead of nothing.
`tone`	`tone`	`BmxBadgeTone`	`'neutral'`	What the badge is reporting. Meaning, not colour: the colours are custom properties.
`value`	`value`	`number \| string`	—	The count, or a short word. A string of digits is treated as the count it is, because `value="3"` from a Razor page or an htmx swap is the commonest way this is ever set.

Slots

Slot	Description
`(default)`	Something for the bubble to sit on. Not a focusable control - see above.

CSS shadow parts

Part	Description
`anchor`	The box the slotted content sits in.
`badge`	The bubble.

CSS custom properties

Property	Description
`--bmx-badge-background`	The bubble's fill, overriding the tone.
`--bmx-badge-border`	The ring that separates the bubble from what it sits on.
`--bmx-badge-color`	The text on it.
`--bmx-badge-dot-size`	The diameter of the `dot` form.
`--bmx-badge-font-size`	The digits.
`--bmx-badge-font-weight`	How heavy they are.
`--bmx-badge-height`	The bubble's height, and its diameter when it holds one digit.
`--bmx-badge-offset`	How far the bubble hangs off the corner of slotted content.
`--bmx-badge-padding-inline`	The room either side of a longer count or a word.
`--bmx-badge-radius`	The corner radius. A pill by default.
`--bmx-badge-tone-danger`	The fill for `tone="danger"`.
`--bmx-badge-tone-info`	The fill for `tone="info"`.
`--bmx-badge-tone-neutral`	The fill for `tone="neutral"`.
`--bmx-badge-tone-success`	The fill for `tone="success"`.
`--bmx-badge-tone-warning`	The fill for `tone="warning"`.
`--bmx-badge-tone-warning-text`	The text on the warning fill, which is dark rather than white.

`<bmx-barcode>`

Properties

Property	Attribute	Type	Default	Description
`barHeight`	`bar-height`	`number`	`64`	How tall the bars of a linear barcode are, in CSS pixels.
`checkDigit`	`check-digit`	`boolean`	`false`	ITF only: add a check digit.
`columns`	`columns`	`number`	—	PDF417 only: how many data columns, 1 to 30. Default: chosen so the code is about three times as wide as tall.
`compact`	`compact`	`boolean`	`false`	PDF417 only: the compact (truncated) form, narrower, for where space is short.
`errorCorrection`	`error-correction`	`BmxQrErrorCorrection`	`'M'`	QR only: how much damage the code survives - `L`, `M`, `Q` or `H`.
`errorLevel`	`error-level`	`number`	—	PDF417 only: the error correction level, 0 to 8. Default: the level the standard recommends for the amount of data.
`fileName`	`file-name`	`string`	`'barcode'`	The file name `download` offers.
`label`	`label`	`string`	—	The accessible name. Default: the kind of code and its value.
`moduleWidth`	`module-width`	`number`	—	How wide one module (the narrowest bar, or one square) is, in CSS pixels. Default 2 for bars and PDF417, 4 for squares.
`rowHeight`	`row-height`	`number`	`3`	PDF417 only: the height of a row, in modules (2 to 10).
`showText`	`show-text`	`boolean`	`true`	Print the value under a linear barcode.
`type`	`type`	`BmxBarcodeSymbology`	`'code128'`	Which kind of barcode: `code128`, `gs1-128` (fields written `(01)09501101530003(10)AB12`), `code39`, `ean13`, `ean8`, `upca`, `itf`, `datamatrix`, `qr` or `pdf417`.
`value`	`value`	`string`	`''`	What the barcode holds.

Events

Event	Detail	Description
`bmxBarcodeError`	`BmxBarcodeErrorDetail`	Fired when the value cannot be drawn as the chosen kind of barcode.

Methods

Method	Signature	Description
`download`	`download(format?: BmxBarcodeFileFormat, name?: string) => Promise<void>`	Offers the barcode to the reader as a file.
`toPng`	`toPng(scale?: number) => Promise<Blob \| null>`	The barcode as a PNG at `scale` times its size on screen. Null when there is nothing drawn.
`toSvg`	`toSvg() => Promise<string \| null>`	The barcode as a standalone SVG document, in the colours it is shown in. Null when there is nothing drawn.

CSS shadow parts

Part	Description
`error`	Why the value could not be drawn.
`frame`	The box around the symbol, with the quiet zone inside it.
`svg`	The drawn symbol.

CSS custom properties

Property	Description
`--bmx-barcode-background`	The ground and quiet zone. Default white in every theme.
`--bmx-barcode-color`	The bars. Default black in every theme, because scanners read dark on light.
`--bmx-barcode-font`	The font of the printed value.
`--bmx-barcode-padding`	Space between the frame's edge and the quiet zone.
`--bmx-barcode-radius`	The frame's corner radius.

`<bmx-barcode-scanner>`

Properties

Property	Attribute	Type	Default	Description
`camera`	`camera`	`boolean`	`true`	Offer the camera and picture buttons where the browser can read barcodes.
`description`	`description`	`string`	—
`disabled`	`disabled`	`boolean`	`false`
`errorText`	`error-text`	`string`	—	An error supplied by the page: an unknown product, for example.
`formats`	`formats`	`string[] \| string`	—	Which kinds of code to look for: names as `bmx-barcode` uses them (`qr, ean13, code128`...), or the browser's own. Default: every kind it knows.
`hideLabel`	`hide-label`	`boolean`	`false`
`label`	`label`	`string`	—
`messages`	property only	`BmxFieldMessages`	—
`name`	`name`	`string`	—	The field's name in the form.
`placeholder`	`placeholder`	`string`	—
`readonly`	`readonly`	`boolean`	`false`
`required`	`required`	`boolean`	`false`
`strings`	`strings`	`Partial<BmxBarcodeScannerStrings> \| string`	—	Replacements for any of the scanner's own wording (an object, or its JSON).
`submitOnEnter`	`submit-on-enter`	`boolean`	`false`	Let Enter (which hand-held scanners press after a code) send the form. Off by default, so a scan does not submit half a form.
`validateOn`	`validate-on`	`BmxValidateOn`	`'blur'`
`value`	`value`	`string`	`''`	The value: scanned or typed.

Events

Event	Detail	Description
`bmxBarcodeScan`	`BmxBarcodeScanDetail`	Fired when a code is read by the camera or from a picture, or entered and confirmed with Enter.
`bmxChange`	`BmxBarcodeScannerChangeDetail`	Fired when the value changes.
`bmxValidityChange`	`BmxBarcodeScannerValidityDetail`

Methods

Method	Signature	Description
`canScan`	`canScan() => Promise<boolean>`	Whether this browser can read barcodes from the camera or a picture.
`checkValidity`	`checkValidity() => Promise<boolean>`
`reportValidity`	`reportValidity() => Promise<boolean>`
`scanImage`	`scanImage(source: Blob \| ImageBitmap \| HTMLImageElement \| HTMLCanvasElement) => Promise<BmxBarcodeScanDetail \| null>`	Reads a code from a picture: a `Blob` or `File`, an `<img>`, a canvas or an `ImageBitmap`. Resolves to what was found, or null.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`
`startCamera`	`startCamera() => Promise<void>`	Turn the camera on and look for a code. Resolves once it is running (or has failed).
`stopCamera`	`stopCamera() => Promise<void>`	Turn the camera off.

Slots

Slot	Description
`description`	Rich help text, in place of the `description` property.
`label`	Rich label content, in place of the `label` property.

CSS shadow parts

Part	Description
`buttons`	The camera and picture buttons.
`description`	The help text.
`error`	The error message.
`input`	The text field.
`label`	The label.
`viewfinder`	The camera picture.

CSS custom properties

Property	Description
`--bmx-barcode-scanner-aim`	The colour of the aiming frame over the camera picture.
`--bmx-barcode-scanner-label-font-size`	The label's font size.
`--bmx-barcode-scanner-support-font-size`	Font size of the description, status and error.
`--bmx-barcode-scanner-viewfinder-height`	The height of the camera picture. Default 15rem.

`<bmx-breadcrumb>`

Properties

Property	Attribute	Type	Default	Description
`collapse`	`collapse`	`'auto' \| 'never'`	`'auto'`	Whether crumbs that do not fit collapse behind a button.
`label`	`label`	`string`	`'Breadcrumb'`	The trail's accessible name. It names the landmark, so it is what a screen-reader user hears when they jump between the navigation regions of a page. "Breadcrumb" is right for the only one on a page and wrong for the second.
`markCurrent`	`mark-current`	`boolean`	`true`	Whether the last crumb is marked as the page you are on. The single most useful thing this component does for a screen reader: without `aria-current="page"` a trail is a row of links, and the one saying where you are is indistinguishable from the ones saying where you could go.
`menuLabel`	`menu-label`	`string`	`'Show the rest of the path'`	The overflow button's accessible name.
`separator`	`separator`	`string`	`'/'`	What is drawn between two crumbs. Text rather than an image, because a separator is punctuation: it has to match the typeface around it, and a customer whose house style uses `>` or `»` or a middle dot has to be able to say so without forking anything. It reaches the crumbs as `--bmx-breadcrumb-separator-content`, so a stylesheet can change it for one trail without touching the markup.

Events

Event	Detail	Description
`bmxSelect`	`BmxBreadcrumbSelectDetail`	Fired when a crumb is chosen from the overflow menu.

Methods

Method	Signature	Description
`refresh`	`refresh() => Promise<void>`	Re-measure now. Rarely needed: a resize and a change of children are watched.

Slots

Slot	Description
`(default)`	The crumbs, in order, root first.

CSS shadow parts

Part	Description
`base`	The `<nav>`.
`list`	The list inside it.
`menu`	The overflow menu's surface.
`separator`	The mark drawn before the trigger.
`trigger`	The button the collapsed crumbs hide behind.

CSS custom properties

Property	Description
`--bmx-breadcrumb-gap`	Space between a separator and the crumb either side of it.
`--bmx-breadcrumb-separator-content`	The mark drawn between two crumbs. Set from the `separator` property; override it for a house style.
`--bmx-breadcrumb-trigger-color`	The overflow button's colour.
`--bmx-breadcrumb-trigger-radius`	The overflow button's corner radius.

`<bmx-breadcrumb-item>`

Properties

Property	Attribute	Type	Default	Description
`current`	`current`	`boolean`	`false`	Whether this is the page being looked at. Draws as text and marks it.
`href`	`href`	`string`	—	Where the crumb goes. Leave it off for the page you are on, or to wrap your own link.
`label`	`label`	`string`	—	What the overflow menu calls this crumb. Defaults to its text.
`rel`	`rel`	`string`	—	The link's `rel`. `noreferrer` is added to anything opening in a new tab that has not said otherwise, because `target="_blank"` without it hands the opened page a `window.opener` it can navigate - the same hardening `bmx-button` does in anchor mode, and for the same reason.
`target`	`target`	`string`	—	The link's target, when there is a link.

Methods

Method	Signature	Description
`activate`	`activate() => Promise<void>`	Follow this crumb, as though it had been clicked. What the parent calls when the crumb is chosen from the overflow menu. The click lands on the real link, so a router that intercepted it still intercepts it and a handler the author attached still runs - there is no second navigation path to keep in step with the first.
`getLabel`	`getLabel() => Promise<string>`	The crumb's name, for the parent's overflow menu.

Slots

Slot	Description
`(default)`	The crumb's label.
`prefix`	An icon before the label.

CSS shadow parts

Part	Description
`base`	The link, or the text that stands in for it.
`label`	The label text.
`prefix`	The icon slot's wrapper.
`separator`	The mark drawn before the crumb.

CSS custom properties

Property	Description
`--bmx-breadcrumb-color`	A link crumb's colour.
`--bmx-breadcrumb-color-hover`	A link crumb's colour under the pointer.
`--bmx-breadcrumb-current-color`	The colour of the crumb you are on.
`--bmx-breadcrumb-gap`	Space between a separator and the crumb either side of it.
`--bmx-breadcrumb-radius`	The corner radius of a crumb's focus ring and hover shape.
`--bmx-breadcrumb-separator-color`	The separator's colour.
`--bmx-breadcrumb-separator-content`	The mark drawn before a crumb. Set by the parent's `separator` property; override it for a house style.

`<bmx-button>`

Properties

Property	Attribute	Type	Default	Description
`action`	property only	`(event: BmxButtonActivateDetail) => unknown \| Promise<unknown>`	—	An async handler that drives the busy state. A property, not an attribute. Set it and the button becomes busy for the lifetime of the returned promise, refuses re-entry while it runs, and clears itself on both resolve and reject - which is the half everyone forgets, leaving a spinner on screen after a failed save.
`autoFocus`	`auto-focus`	`boolean`	`false`	Take focus on first render.
`badge`	`badge`	`string \| number`	—	A small counter or status badge rendered on the button's trailing corner.
`confirm`	`confirm`	`string`	—	Turn the button into a two-step confirmation. The first activation arms it and swaps the label for this text; the second fires. Cheaper than a modal for a destructive action on a row, and - unlike `window.confirm` - it does not steal focus or block the main thread.
`confirmTimeout`	`confirm-timeout`	`number`	`3000`	How long an armed button waits before disarming, in ms. Floored at 1000.
`controls`	`controls`	`string`	—	`aria-controls`: the id of the element this button controls.
`cooldown`	`cooldown`	`number`	`0`	Minimum gap between two activations, in ms. Guards against double-submit.
`describedBy`	`described-by`	`string`	—	`aria-describedby`: the id of an element that explains this button.
`disabled`	`disabled`	`boolean`	`false`	Disable the button.
`download`	`download`	`string`	—	Anchor download attribute.
`expanded`	`expanded`	`boolean`	—	`aria-expanded`, for a disclosure or menu trigger.
`focusableWhenDisabled`	`focusable-when-disabled`	`boolean`	`false`	Keep a disabled button focusable, marking it `aria-disabled` instead. WCAG 2.2 prefers this for controls inside a toolbar or a group: a natively disabled control vanishes from the Tab order, so a keyboard user never learns it exists, let alone why it is unavailable. Pair it with `describedBy` pointing at the explanation.
`fullWidth`	`full-width`	`boolean`	`false`	Stretch to the width of the container.
`haspopup`	`haspopup`	`'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog' \| 'true'`	—	`aria-haspopup`, for a button that opens a menu, dialog or listbox.
`hideLabelBelow`	`hide-label-below`	`BmxBreakpoint`	—	Drop the visible label below this breakpoint, keeping the icon. The responsive escape hatch for toolbars: a row of five labelled actions that would wrap on a phone becomes a row of five icons instead. The label stays in the accessibility tree, so nothing is lost to a screen reader.
`hold`	`hold`	`number`	`0`	Require the button to be held for this many milliseconds. For the genuinely irreversible action. A progress track fills as the user holds, which makes the requirement discoverable rather than mysterious. Works from the keyboard too: hold Enter or Space.
`href`	`href`	`string`	—	Render as an anchor. Sets link keyboard semantics: Enter activates, Space does not.
`iconOnly`	`icon-only`	`boolean`	`false`	Render as icon-only. Usually inferred - a button with slotted icons and no label is icon-only without being told - but settable for the case where the label exists and should be visually hidden while remaining the accessible name.
`justify`	`justify`	`BmxJustify`	`'center'`	How content is packed when the button is wider than its content.
`label`	`label`	`string`	—	The accessible name. Required when the button is icon-only. When a visible label is present this overrides it for assistive technology, which is occasionally what you want ("Delete" on screen, "Delete invoice INV-2451" announced).
`loading`	`loading`	`boolean`	`false`	Show the busy state and block activation.
`loadingLabel`	`loading-label`	`'replace' \| 'keep'`	`'keep'`	Whether the busy state replaces the label or sits beside it.
`loadingText`	`loading-text`	`string`	`'Working…'`	Label announced and optionally shown while busy.
`name`	`name`	`string`	—	Submitted name, when this button is a form's submitter.
`pressed`	`pressed`	`boolean`	`false`	The toggle state. Ignored unless `toggle` is set.
`rel`	`rel`	`string`	—	Anchor rel. Merged with the automatic `noopener noreferrer` for `_blank`.
`ripple`	`ripple`	`BmxRipple`	`'none'`	The effect painted from the point of activation. `wave` is the familiar Material ripple; `rings` sends concentric rings outward; `spiral` unwinds an Archimedean spiral; `burst` fires spokes; `glow` blooms softly; `sweep` runs a highlight across the control; `echo` pulses a ring out past its edge. Tune any of them per button, or globally, without touching the component: `css bmx-button { --bmx-effect-duration: 900ms; --bmx-effect-color: #fff; --bmx-effect-opacity: 0.5; --bmx-effect-easing: cubic-bezier(0.16, 1, 0.3, 1); }` Off by default: a flourish should be opted into, and a page where every button animates is a page where none of them mean anything. Suppressed entirely under `prefers-reduced-motion`, and never rendered to assistive technology - it is decoration, and decoration only.
`rovingTabindex`	`roving-tabindex`	`number`	—	The tabindex applied to the rendered control. Managed by a parent `bmx-button-group` (or any other composite that implements a roving tabindex) and not normally set by hand. It exists as a property because the focusable element lives inside this component's shadow root, where a parent cannot reach it - and a composite widget that cannot take its children out of the tab order cannot implement the WAI-ARIA keyboard pattern at all.
`shape`	`shape`	`BmxShape`	`'rounded'`	Corner treatment. `circle` is intended for icon-only buttons.
`size`	`size`	`BmxSize`	`'md'`	Size step.
`target`	`target`	`'_self' \| '_blank' \| '_parent' \| '_top'`	—	Anchor target. `rel` is hardened automatically for `_blank`.
`toggle`	`toggle`	`boolean`	`false`	Behave as a toggle, exposing `aria-pressed`.
`tone`	`tone`	`BmxTone`	`'primary'`	Semantic colour role.
`type`	`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type. Ignored in link mode.
`value`	`value`	`string`	—	Submitted value, paired with `name`.
`variant`	`variant`	`BmxButtonVariant`	`'solid'`	Visual treatment.

Events

Event	Detail	Description
`bmxActivate`	`BmxButtonActivateDetail`	Fired when the button actually activates - after every guard has passed. The native `click` event still fires and still bubbles, so existing code keeps working; it is simply suppressed when a guard blocks or arms the button, which is the behaviour a consumer expects from `confirm` without having to write anything.
`bmxBusyChange`	`boolean`	Fired when the busy state changes, in either direction.
`bmxConfirmArm`	`void`	Fired when a confirming button arms itself, awaiting a second activation.
`bmxConfirmCancel`	`void`	Fired when an armed button disarms without activating.
`bmxHoldProgress`	`number`	Fired repeatedly while a press-and-hold is in progress, with a 0-1 fraction.
`bmxPressedChange`	`boolean`	Fired when the toggle state changes.

Methods

Method	Signature	Description
`activate`	`activate() => Promise<boolean>`	Activate the button programmatically, bypassing pointer and keyboard. Guards still apply: a programmatic activation of a confirming button arms it exactly as a click would. Anything else would make `confirm` a decoration rather than a guarantee.
`removeFocus`	`removeFocus() => Promise<void>`	Remove focus from the button.
`reset`	`reset() => Promise<void>`	Disarm a confirming button without activating it.
`setBusy`	`setBusy(value: boolean) => Promise<void>`	Set the busy state by hand, for a flow the `action` property cannot express.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Move focus to the button.

Slots

Slot	Description
`(default)`	The button's label.
`end`	Content after the label, typically an icon or chevron.
`loading`	Replaces the built-in spinner while busy.
`start`	Content before the label, typically an icon.

CSS shadow parts

Part	Description
`badge`	The counter badge.
`base`	The rendered `<button>` or `<a>`.
`end`	The trailing slot wrapper.
`hold`	The press-and-hold progress track.
`label`	The label wrapper.
`ripple`	A ripple instance.
`spinner`	The busy indicator.
`start`	The leading slot wrapper.

CSS custom properties

Property	Description
`--bmx-button-border-width`	Border width, for the outline variant.
`--bmx-button-font-size`	Label font size.
`--bmx-button-font-weight`	Label font weight.
`--bmx-button-gap`	Space between the icon and the label.
`--bmx-button-height`	The control's height. Defaults to the size step's height times the density scale.
`--bmx-button-icon-padding`	Horizontal padding of an icon-only button. Defaults to none.
`--bmx-button-icon-size`	Size of a slotted icon.
`--bmx-button-icon-width`	Width of an icon-only button. Defaults to its height, making it square.
`--bmx-button-padding-inline`	Horizontal padding.
`--bmx-button-radius`	Corner radius. Accepts the full four-value form, which is how a button group rounds only its outer corners.
`--bmx-effect-color`	What the click effect paints in. Defaults to the button's own text colour.
`--bmx-effect-duration`	How long the click effect runs.
`--bmx-effect-easing`	The click effect's timing curve.
`--bmx-effect-opacity`	The click effect's strength at its peak.

`<bmx-button-group>`

Properties

Property	Attribute	Type	Default	Description
`attached`	`attached`	`boolean`	`false`	Join the buttons into one continuous control, sharing their borders.
`disabled`	`disabled`	`boolean`	`false`	Disable every child. Children may still be disabled individually.
`fullWidth`	`full-width`	`boolean`	`false`	Stretch the group, and its children equally, to the container width.
`label`	`label`	`string`	—	The group's accessible name. Not optional in practice: a toolbar announced as "group" with no name tells a screen reader user only that something has been grouped. Pass what the group is for - "Text alignment", "View mode".
`orientation`	`orientation`	`BmxOrientation`	`'horizontal'`	Layout direction. Also decides which arrow keys move focus.
`selection`	`selection`	`BmxButtonGroupSelection`	`'none'`	How many items may be selected.
`shape`	`shape`	`BmxShape`	—	Applied to every child that has not set its own.
`size`	`size`	`BmxSize`	—	Applied to every child that has not set its own.
`tone`	`tone`	`BmxTone`	—	Applied to every child that has not set its own.
`value`	`value`	`string \| null`	`null`	The selected value, in `single` mode. Two-way: the group writes back to it.
`values`	property only	`string[]`	`[]`	The selected values, in `multiple` mode. Two-way. Accepts a comma-separated or JSON string as well, because an attribute is the only channel some templates have. See `src/core/markup.ts`.
`variant`	`variant`	`BmxButtonVariant`	—	Applied to every child that has not set its own.
`wrap`	`wrap`	`boolean`	`false`	Allow the group to wrap onto more than one line.
`wrapFocus`	`wrap-focus`	`boolean`	`true`	Whether arrowing past the last item returns to the first.

Events

Event	Detail	Description
`bmxChange`	`BmxButtonGroupChangeDetail`	Fired when the selection changes. Not fired in `selection="none"`.

Methods

Method	Signature	Description
`refresh`	`refresh() => Promise<void>`	Re-read the children. Call after adding or removing items imperatively.
`setFocus`	`setFocus() => Promise<void>`	Move focus to the group's active item.

Slots

Slot	Description
`(default)`	`bmx-button` elements, or any focusable controls.

CSS shadow parts

Part	Description
`base`	The group container.

CSS custom properties

Property	Description
`--bmx-button-group-gap`	Space between items when the group is not attached.

`<bmx-calendar>`

Properties

Property	Attribute	Type	Default	Description
`agendaDays`	`agenda-days`	`number`	`30`	How many days the agenda covers.
`date`	`date`	`string`	—	The month or the day the view opens on, as `YYYY-MM-DD`. Assignable, so a page can drive the calendar from its own controls.
`dayEnd`	`day-end`	`string`	`'20:00'`	The last hour those views draw, as `HH:MM`.
`dayStart`	`day-start`	`string`	`'07:00'`	The first hour the week and day views draw, as `HH:MM`. A window rather than a whole day, because a diary that draws midnight to midnight spends two thirds of its height on hours nobody has meetings in. Events outside it are not dropped - they are clipped to the edge and drawn open, so the reader can see there is more.
`dragStep`	`drag-step`	`number`	`15`	The smallest move a drag makes, in minutes. Fifteen, because a diary is booked in quarter hours and a drag that lands on 09:37 is a drag the reader has to correct. A month view ignores it: the unit there is a day.
`dropFilter`	property only	`(detail: BmxCalendarChangeDetail) => boolean`	—	Whether a drop may land here, asked continuously while the drag moves. A page can always refuse a change afterwards by ignoring `bmxEventChange` - that is the one-way flow, and it works from every stack including the ones that can only write attributes. This is the other half: a rule the reader can see before they let go, so a block that may not go on a Sunday is drawn refused and announced as refused while it is still in their hand, rather than snapping back a moment after they thought they had put it somewhere. It is a function, so it is assigned from script - the React, Vue and Angular wrappers set properties and this arrives with them. A Razor or Blazor page that can only write attributes uses the event instead, and `src/core/markup.ts` refuses a string here rather than evaluating one. `js diary.dropFilter = ({ start }) => !start.endsWith('-13');`
`editable`	`editable`	`boolean`	`false`	Whether the reader may move and resize events. Off by default, because most calendars on most pages are a picture of a diary rather than a diary you can rearrange, and a component that let a reader drag a meeting the server will refuse has told them a lie. It is not `draggable`: that is a global HTML attribute with a meaning of its own, and a `@Prop()` of that name would fight the platform for it.
`events`	property only	`BmxCalendarEvent[]`	`[]`	The events. Read through `src/core/markup.ts`, so a JSON attribute written by a Razor page, a Blazor component or an htmx swap is the list it looks like rather than a string this component tries to map over.
`firstDayOfWeek`	`first-day-of-week`	`number`	—	Which day a week starts on, 0 for Sunday. Falls back to the locale's.
`label`	`label`	`string`	—	What this diary is. Announced as the grid's name.
`locale`	`locale`	`string`	—	The locale for month and weekday names. Falls back to the document's.
`maxPerDay`	`max-per-day`	`number`	`3`	The most events to draw in one month cell before the rest collapse.
`view`	`view`	`BmxCalendarFace`	`'month'`	Which face to draw.
`workingDays`	`working-days`	`number[] \| string`	`[]`	Which weekdays are working days, 0 for Sunday. Read through `src/core/markup.ts` as a comma-separated list, because `working-days="1,2,3,4,5"` is what a template can write.

Events

Event	Detail	Description
`bmxChange`	`{ readonly date: string; readonly view: BmxCalendarFace; }`	The view or the month changed.
`bmxDaySelect`	`BmxCalendarDayDetail`	A day was chosen.
`bmxEventChange`	`BmxCalendarChangeDetail`	An event was dropped somewhere new. Emitted once, on the drop - never while the pointer is moving. The component does not touch `events`: the page reassigns it and the calendar redraws, which is the one-way flow every other component here uses and the only shape that works from React, from Blazor and from a plain page at the same time. A page that ignores this event has a calendar whose blocks always snap back, which is the honest behaviour for a page that has not agreed to the change.
`bmxSelect`	`BmxCalendarEventDetail`	An event was chosen.

Methods

Method	Signature	Description
`next`	`next() => Promise<void>`	Move to the next month, or the next span of agenda days.
`previous`	`previous() => Promise<void>`	Move back.
`today`	`today() => Promise<void>`	Return to today.

Slots

Slot	Description
`empty`	Shown when there is nothing in view at all.

CSS shadow parts

Part	Description
`agenda`	The agenda list.
`agenda-day`	One day of it.
`allday`	One day's cell in the all-day strip.
`bar`	A multi-day event drawn across the week.
`column`	One day's column of timed events.
`day`	One day cell.
`daynumber`	The number inside it.
`entry`	One timed event inside a cell.
`grid`	The month grid.
`grip`
`header`	The bar with the month name and its controls.
`hour`	One hour rule across a column.
`live`
`more`	The "+2 more" control.
`now`	The line marking the current time.
`timegrid`	The week or day time grid.
`title`
`weekday`	One weekday heading.

CSS custom properties

Property	Description
`--bmx-calendar-bar-background`	The fill of a multi-day bar.
`--bmx-calendar-bar-color`	Its text.
`--bmx-calendar-bar-height`	How tall one bar is.
`--bmx-calendar-border`	The lines between days.
`--bmx-calendar-day-min-height`	How tall a day cell is at its shortest.
`--bmx-calendar-entry-background`	The fill of a timed event in a cell.
`--bmx-calendar-entry-color`	Its text.
`--bmx-calendar-focus-ring`	The focus indicator.
`--bmx-calendar-gutter`	How wide the hour rail down the side is.
`--bmx-calendar-hour-line`	The rule drawn across each hour.
`--bmx-calendar-hours-height`	How tall the whole time column is.
`--bmx-calendar-nonworking-background`	The fill behind a day outside working days.
`--bmx-calendar-now-color`	The line marking the current time.
`--bmx-calendar-outside-opacity`	How faint a day from a neighbouring month is.
`--bmx-calendar-radius`	The corner radius of the whole grid.
`--bmx-calendar-today-color`	The mark on today.
`--bmx-calendar-weekday-color`	The column headings.

`<bmx-caption-editor>`

Properties

Property	Attribute	Type	Default	Description
`crossorigin`	`crossorigin`	`'anonymous' \| 'use-credentials'`	—	How the media is requested from another site. The waveform needs the site to allow it.
`cues`	`cues`	`readonly BmxCue[] \| string`	—	The captions: an array of cues, its JSON, or WebVTT or SRT text. Kept up to date as they are edited.
`fileName`	`file-name`	`string`	`'captions'`	The name files are saved under, without the extension.
`follow`	`follow`	`boolean`	`true`	Keep the playhead in view on the timeline, and the playing caption in the list, while the media plays.
`kind`	`kind`	`'video' \| 'audio'`	`'video'`	`video` shows the picture; `audio` keeps only the transport and the waveform.
`label`	`label`	`string`	—	The editor's accessible name.
`language`	`language`	`string`	—	The captions' language, for spelling and the text's `lang`.
`peaks`	property only	`unknown`	—	A waveform made elsewhere (`audiowaveform` JSON, or `{ rate, data }`), for media too long to read in the page.
`poster`	`poster`	`string`	—	A picture shown before the video plays.
`readonly`	`readonly`	`boolean`	`false`	Look but do not change.
`rules`	`rules`	`BmxCaptionPreset \| Partial<BmxCaptionRules> \| string`	`'streaming'`	The rules captions are checked against: a preset (`streaming`, `broadcast`, `education`, `relaxed`) or limits (an object or its JSON).
`speakers`	`speakers`	`readonly string[] \| string`	—	Speakers offered in the speaker field, besides those already in the captions (an array, or a comma-separated list).
`src`	`src`	`string`	—	The video or audio the captions are for.
`strings`	`strings`	`Partial<BmxCaptionEditorStrings> \| string`	—	Replacements for any of the wording (an object, or its JSON).
`zoom`	`zoom`	`number`	`100`	Pixels a second on the timeline.

Events

Event	Detail	Description
`bmxChange`	`BmxCaptionEditorChangeDetail`	Fired when the captions change, with the whole list and why.
`bmxMediaError`	`BmxCaptionEditorMediaErrorDetail`	Fired when the media cannot be played or its sound read.
`bmxSelect`	`BmxCaptionEditorSelectDetail`	Fired when another caption is chosen.

Methods

Method	Signature	Description
`addCue`	`addCue(cue?: Partial<BmxCue>) => Promise<BmxCue \| null>`	Adds a caption, at the playhead when no times are given. Returns it (null when read-only).
`check`	`check() => Promise<BmxCaptionProblem[]>`	Every problem against the rules.
`deleteCue`	`deleteCue(id?: string) => Promise<void>`	Deletes a caption (the chosen one when no id is given).
`download`	`download(format?: BmxCaptionFormat) => Promise<void>`	Saves the captions as a file in a format.
`exportAs`	`exportAs(format?: BmxCaptionFormat) => Promise<string>`	The captions as text in a format.
`fix`	`fix(kinds?: BmxCaptionProblemKind[]) => Promise<number>`	Fixes what can be fixed without a person (all kinds, or those given). Returns how many captions changed.
`getCues`	`getCues() => Promise<BmxCue[]>`	The captions, sorted, as copies.
`getPeaks`	`getPeaks() => Promise<BmxPeaks \| null>`	The waveform, once read.
`importText`	`importText(text: string, format?: BmxCaptionFormat) => Promise<number>`	Reads captions from text in any of the formats (by its content unless `format` is given), replacing what is there. Returns how many were read.
`mergeWithNext`	`mergeWithNext(id?: string) => Promise<void>`	Merges a caption (the chosen one) with the one after it.
`pause`	`pause() => Promise<void>`	Pauses the media.
`play`	`play() => Promise<void>`	Plays the media.
`redo`	`redo() => Promise<void>`	Puts back what `undo` took.
`seek`	`seek(time: number) => Promise<void>`	Moves the playhead.
`selectCue`	`selectCue(id: string \| null, options?: { seek?: boolean; }) => Promise<void>`	Chooses a caption by id (or none), and moves the playhead to it.
`setCues`	`setCues(cues: readonly BmxCue[] \| string, options?: { keepHistory?: boolean; }) => Promise<void>`	Replaces the captions (cues, their JSON, or WebVTT, SRT or a transcript as text). Undo goes back to what was there.
`shift`	`shift(seconds: number, fromId?: string) => Promise<void>`	Moves captions by a number of seconds: all of them, or from a caption on.
`splitAt`	`splitAt(time?: number, id?: string) => Promise<void>`	Splits a caption (the chosen one) at a time (the playhead).
`sync`	`sync(from: [number, number], to: [number, number]) => Promise<void>`	Re-times every caption so that time `from[0]` becomes `to[0]` and `from[1]` becomes `to[1]`.
`timeTranscript`	`timeTranscript(text: string) => Promise<number>`	Cuts plain text into captions and spreads them over the speech in the media (or at reading speed when there is no waveform).
`undo`	`undo() => Promise<void>`	Takes back the last change.

CSS shadow parts

Part	Description
`list`	The list of captions.
`panel`	The panel for the chosen caption.
`preview`	The media with the captions over it.
`timeline`	The waveform and caption blocks.
`toolbar`	The tools along the top.

CSS custom properties

Property	Description
`--bmx-caption-editor-block`	A caption block's fill on the timeline.
`--bmx-caption-editor-block-chosen`	The chosen caption's block.
`--bmx-caption-editor-height`	The list's height.
`--bmx-caption-editor-playhead`	The playhead.
`--bmx-caption-editor-preview-width`	The media's width beside the panel.
`--bmx-caption-editor-radius`	Corner radius of the frame.
`--bmx-caption-editor-ruler`	The time ruler's colour.
`--bmx-caption-editor-timeline-height`	The timeline's height.
`--bmx-caption-editor-wave`	The waveform's colour.

`<bmx-carousel>`

Properties

Property	Attribute	Type	Default	Description
`autoplay`	`autoplay`	`boolean`	`false`	Move on its own. Never under `prefers-reduced-motion` - see above.
`hideControls`	`hide-controls`	`boolean`	`false`	Hide the previous and next controls, when the page provides its own.
`hideIndicator`	`hide-indicator`	`boolean`	`false`	Hide the dots or tablist.
`index`	`index`	`number`	`0`	The slide showing now, counting from 0. Assignable.
`interval`	`interval`	`number`	`5000`	How long each slide is shown, in milliseconds.
`label`	`label`	`string`	—	What this carousel is. A carousel with no name is announced as "carousel" and nothing else, which tells a reader that something is here and not what.
`loop`	`loop`	`boolean`	`false`	Whether the end wraps round to the beginning. Off by default: a carousel that silently returns to the first slide is one a reader cannot tell they have finished, and "have I seen all of these?" is the question this pattern is worst at answering.
`orientation`	`orientation`	`BmxOrientation`	`'horizontal'`	Which way it travels.
`perView`	`per-view`	`number`	`1`	How many slides are on screen at once.
`slideLabels`	`slide-labels`	`string[] \| string`	`[]`	A name for each slide. Used for the tab labels in `tabs` mode and for each slide's own accessible name in either. Without them a slide is announced as "3 of 12", which is a position rather than a description - true, and less than the author knows. Read through `src/core/markup.ts`, so a comma-separated or JSON attribute from a server-rendered template is the list it looks like.
`step`	`step`	`number`	—	How many slides one press of previous or next moves. Defaults to a full view.
`tabs`	`tabs`	`boolean`	`false`	Draw the picker as a real tablist rather than as an indicator. Only when each slide genuinely is a named destination. See the note above: the wrong one of these is a lie to a screen reader.

Events

Event	Detail	Description
`bmxAutoplayChange`	`BmxCarouselAutoplayDetail`	The clock started or stopped, and why.
`bmxChange`	`BmxCarouselChangeDetail`	The slide changed.

Methods

Method	Signature	Description
`goTo`	`goTo(index: number) => Promise<void>`	Go to a slide by its index.
`next`	`next() => Promise<void>`	Move to the next slide.
`pause`	`pause() => Promise<void>`	Stop the clock until `play()` or the pause control says otherwise.
`play`	`play() => Promise<void>`	Start the clock, if anything else will let it run.
`previous`	`previous() => Promise<void>`	Move to the previous slide.

Slots

Slot	Description
`(default)`	The slides. Anything at all; this component has no opinion about them.

CSS shadow parts

Part	Description
`dot`	One dot.
`frame`
`indicator`	The dots, or the tablist in `tabs` mode.
`next`	The control that steps forward.
`pause`	The autoplay control.
`previous`	The control that steps back.
`status`	The live region.
`viewport`	The scrolling container.

CSS custom properties

Property	Description
`--bmx-carousel-control-background`	Their fill.
`--bmx-carousel-control-border`	Their outline.
`--bmx-carousel-control-color`	Their glyph.
`--bmx-carousel-control-size`	The diameter of the previous and next controls.
`--bmx-carousel-dot-color`	A dot that is not current.
`--bmx-carousel-dot-current-color`	The current one.
`--bmx-carousel-dot-gap`	The space between dots.
`--bmx-carousel-dot-size`	The diameter of one dot.
`--bmx-carousel-focus-ring`	The focus indicator.
`--bmx-carousel-gap`	The space between slides.
`--bmx-carousel-per-view`	How many slides fit across. Set from the `per-view` property.
`--bmx-carousel-radius`	The corner radius of the viewport.
`--bmx-carousel-tab-padding`	The room inside a tab, in `tabs` mode.

`<bmx-chart>`

Properties

Property	Attribute	Type	Default	Description
`animated`	`animated`	`boolean`	`true`	Draw the marks in when the data arrives. Off when the reader asks for less motion.
`annotations`	`annotations`	`readonly BmxChartAnnotation[] \| string`	—	Lines and bands across the plot: `[{ value, label }]`, `[{ type: 'band', axis: 'x', from, to }]`. JSON in markup.
`bins`	`bins`	`number`	—	A histogram's number of bins. Default: Sturges' rule.
`data`	`data`	`BmxChartData \| readonly Record<string, unknown>[] \| string`	—	The numbers: `{ categories, series: [{ name, values }] }`, series of `points` (`x` a number or a date), `tree`, `nodes` and `links`, or a gauge's `value`. Or an array of records, with `xField` and `yFields`. JSON in markup.
`dataLabels`	`data-labels`	`boolean`	`false`	Write the values on the bars, points and slices.
`depth`	`depth`	`number`	`2`	A treemap's levels shown at once. Default 2.
`description`	`description`	`string`	—	A line under the title, also read with the chart.
`format`	`format`	`BmxChartNumberFormat \| string`	—	How values are written unless a series says otherwise: `percent`, `currency:EUR`, `decimal:2`, `compact`, or `{ style, currency, decimals, prefix, suffix }`.
`innerRadius`	`inner-radius`	`number`	`0.6`	A doughnut's hole, as a share of its radius. Default 0.6.
`label`	`label`	`string`	—	A title over the chart, and its accessible name.
`legend`	`legend`	`'bottom' \| 'top' \| 'end' \| 'none'`	`'bottom'`	Where the legend goes: `bottom` (default), `top`, `end` or `none`.
`locale`	`locale`	`string`	—	A BCP 47 locale for numbers and dates. Default: the page's `lang`.
`patterns`	`patterns`	`boolean`	`false`	Fill each series with a pattern as well as a colour, so they can be told apart without colour.
`renderer`	`renderer`	`'auto' \| 'svg' \| 'canvas'`	`'auto'`	`auto` (default: a canvas past a few thousand points), `svg` or `canvas`.
`seriesField`	`series-field`	`string`	—	With records: a column whose values each become a series (of the first of `yFields`).
`stack`	`stack`	`'none' \| 'normal' \| 'percent'`	`'none'`	Stack columns, bars and areas: `none` (default), `normal`, or `percent` (each to a hundred per cent).
`strings`	`strings`	`Partial<BmxChartStrings> \| string`	—	Words the chart shows or says, to translate or reword: any of `BmxChartStrings`. JSON in markup.
`timeZone`	`time-zone`	`string`	—	The IANA time zone a time axis is read in. Default: the reader's.
`toolbar`	`toolbar`	`boolean`	`false`	Show buttons over the chart: switch to the data table, download PNG, SVG or CSV.
`tooltip`	`tooltip`	`'auto' \| 'item' \| 'axis' \| 'none'`	`'auto'`	`auto` (default: one value for points and bars, every series at once on a line or area), `item`, `axis` or `none`.
`type`	`type`	`BmxChartType`	`'column'`	What kind of chart. Default `column`.
`xAxis`	`x-axis`	`BmxChartAxisOptions \| string`	—	The x axis: `{ title, type, min, max, grid, hidden }`. JSON in markup.
`xField`	`x-field`	`string`	—	With records: the column along the x axis.
`y2Axis`	`y-2-axis`	`BmxChartAxisOptions \| string`	—	The second value axis, on the far side, for series with `axis: 'y2'`.
`yAxis`	`y-axis`	`BmxChartAxisOptions \| string`	—	The value axis: `{ title, min, max, log, zero, grid, hidden }`. JSON in markup.
`yFields`	`y-fields`	`readonly string[] \| string`	—	With records: the columns to chart, each a series (a list, or comma-separated in markup).
`zoom`	`zoom`	`boolean`	`false`	Drag across the plot to zoom in on that stretch of the x axis (lines, areas, columns, scatter, candles). Ctrl and the wheel zoom too.

Events

Event	Detail	Description
`bmxChartDrill`	`BmxChartDrillDetail`	A treemap was drilled into, or back out.
`bmxChartLegendToggle`	`BmxChartLegendToggleDetail`	A series or category was switched on or off.
`bmxChartSelect`	`BmxChartSelectDetail`	A mark was chosen.
`bmxChartZoom`	`BmxChartZoomDetail`	The x axis was zoomed, or the zoom reset.

Methods

Method	Signature	Description
`download`	`download(format?: "png" \| "svg" \| "csv", filename?: string) => Promise<void>`	Saves the chart as `png`, `svg` or `csv`, under `filename` (default: the label).
`drillDown`	`drillDown(path: readonly string[]) => Promise<void>`	Drills a treemap to a path of names (`[]` for the top).
`getTable`	`getTable() => Promise<BmxChartTable>`	The numbers as a table: `{ headers, rows, total }`.
`resetZoom`	`resetZoom() => Promise<void>`	Shows the whole x axis again.
`setFocus`	`setFocus() => Promise<void>`	Moves focus to the chart.
`setSeriesVisible`	`setSeriesVisible(index: number, visible: boolean) => Promise<void>`	Shows or hides a series, as its legend entry does.
`setZoom`	`setZoom(from: number \| string \| Date, to: number \| string \| Date) => Promise<void>`	Zooms the x axis to `from`-`to`, in data units (a category's index, a number, or an instant or ISO date).
`toCSV`	`toCSV() => Promise<string>`	The numbers as CSV.
`toPNG`	`toPNG(scale?: number) => Promise<Blob>`	The chart as a PNG, `scale` times its size on screen (default 2).
`toSVG`	`toSVG() => Promise<string>`	The chart as a standalone SVG document, its colours and fonts written in, with its title and legend.

CSS shadow parts

Part	Description
`breadcrumb`	a treemap's path when drilled in.
`caption`	its title.
`chart`	the whole chart.
`description`	the line under the title.
`legend`	the series.
`legend-item`	one series or category, a button that shows or hides it.
`plot`	the drawing.
`table`	the data table, when it is shown.
`toolbar`	the buttons above the plot.
`tooltip`	the values under the pointer.

CSS custom properties

Property	Description
`--bmx-chart-area-opacity`	How solid an area is. Default 0.22.
`--bmx-chart-background`	Behind the chart.
`--bmx-chart-color-0`	The first series (or slice). Colours 0 to 9 are used in turn.
`--bmx-chart-color-1`	The second series.
`--bmx-chart-color-2`	The third series.
`--bmx-chart-color-3`	The fourth series.
`--bmx-chart-color-4`	The fifth series.
`--bmx-chart-color-5`	The sixth series.
`--bmx-chart-color-6`	The seventh series.
`--bmx-chart-color-7`	The eighth series.
`--bmx-chart-color-8`	The ninth series.
`--bmx-chart-color-9`	The tenth series.
`--bmx-chart-down`	A falling candle, and a waterfall's decrease.
`--bmx-chart-grid`	The grid lines.
`--bmx-chart-heat-high`	A heatmap's highest value.
`--bmx-chart-heat-low`	A heatmap's lowest value.
`--bmx-chart-height`	How tall the drawing is. Default 20rem.
`--bmx-chart-up`	A rising candle, and a waterfall's increase.

`<bmx-chat>`

Properties

Property	Attribute	Type	Default	Description
`accept`	`accept`	`string`	—	The files allowed, as an `<input type="file">` `accept` ("image/*,.pdf").
`allowImages`	`allow-images`	`boolean`	`false`	Show images an answer's Markdown points to. Off by default, so an answer cannot load anything.
`assistantAvatar`	`assistant-avatar`	`string`	—	The assistant's picture. Default: a mark drawn by the library.
`assistantName`	`assistant-name`	`string`	—	The assistant's name.
`attachments`	`attachments`	`boolean`	`false`	Let the reader send files.
`busy`	`busy`	`boolean`	`false`	A reply is being written. Set by the chat while its handler runs; set it yourself when writing replies without one.
`description`	`description`	`string`	—	A line under the title.
`disabled`	`disabled`	`boolean`	`false`	Show the text box, but disabled.
`feedback`	`feedback`	`boolean`	`true`	Offer good and poor buttons on answers.
`handler`	property only	`BmxChatHandler`	—	Writes each reply: given the conversation and a signal, returns text, a stream, or a fetch response.
`heading`	`heading`	`string`	—	A title shown before the first message ("How can I help?").
`label`	`label`	`string`	—	What the conversation is, for screen readers.
`locale`	`locale`	`string`	—	A BCP 47 locale for times and dates. Default: the page's `lang`.
`maxAttachmentSize`	`max-attachment-size`	`number`	`20 * 1024 * 1024`	The largest file, in bytes. Default 20 MB.
`maxAttachments`	`max-attachments`	`number`	`5`	At most this many files per message.
`maxLength`	`max-length`	`number`	—	At most this many characters in a message.
`messages`	`messages`	`readonly BmxChatMessage[] \| string`	`[]`	The conversation. JSON in markup. Updated as messages are sent and answered.
`placeholder`	`placeholder`	`string`	—	Shown in the text box while it is empty.
`readonly`	`readonly`	`boolean`	`false`	Show the conversation without the text box.
`sendOnEnter`	`send-on-enter`	`boolean`	`true`	Enter sends (Shift+Enter is a new line). Off: Ctrl+Enter or Cmd+Enter sends.
`strings`	`strings`	`Partial<BmxChatStrings> \| string`	—	Words the chat shows or says: any of `BmxChatStrings`. JSON in markup.
`suggestions`	`suggestions`	`readonly string[] \| string`	—	Messages the reader can send with one click: a list, or comma-separated in markup.
`userAvatar`	`user-avatar`	`string`	—	The reader's picture.
`userName`	`user-name`	`string`	—	The reader's name, on their own messages.
`voice`	`voice`	`boolean`	`false`	Offer a microphone button that writes what is said, using the browser's speech recognition (some browsers send the audio to their maker's service).

Events

Event	Detail	Description
`bmxChatError`	`BmxChatErrorDetail`	A reply failed.
`bmxChatFeedback`	`BmxChatFeedbackDetail`	The reader rated an answer.
`bmxChatMessagesChange`	`BmxChatMessagesDetail`	The conversation changed. `messages` is the whole new list.
`bmxChatReply`	`BmxChatMessageDetail`	A reply was finished.
`bmxChatRetry`	`BmxChatMessageDetail`	The reader asked for an answer again (with no handler, write it yourself).
`bmxChatSend`	`BmxChatSendDetail`	The reader sent a message (cancelable).
`bmxChatStop`	`BmxChatMessageDetail \| null`	The reader pressed Stop.

Methods

Method	Signature	Description
`addMessage`	`addMessage(message: Partial<BmxChatMessage>) => Promise<string>`	Adds a message (any role) and returns its id.
`appendToMessage`	`appendToMessage(id: string, text: string) => Promise<void>`	Adds text to the end of a message, as a reply streams in.
`clear`	`clear() => Promise<void>`	Empties the conversation.
`download`	`download(format?: "md" \| "txt" \| "json", filename?: string) => Promise<void>`	Saves the conversation as `md`, `txt` or `json`.
`finishReply`	`finishReply(id: string, status?: "done" \| "error" \| "stopped", error?: string) => Promise<void>`	Ends a reply started with `startReply`.
`getMessages`	`getMessages() => Promise<readonly BmxChatMessage[]>`	The conversation.
`scrollToLatest`	`scrollToLatest() => Promise<void>`	Scrolls to the latest message.
`send`	`send(text: string, files?: readonly File[]) => Promise<void>`	Sends a message as the reader, as if typed. Resolves when its reply (if any) is done.
`setFocus`	`setFocus() => Promise<void>`	Moves focus to the text box.
`startReply`	`startReply(message?: Partial<BmxChatMessage>) => Promise<string>`	Starts a reply written by the application (with no handler): returns its id, and marks the chat busy.
`stop`	`stop() => Promise<void>`	Stops the reply being written.
`toMarkdown`	`toMarkdown() => Promise<string>`	The conversation as Markdown.
`toText`	`toText() => Promise<string>`	The conversation as plain text.
`updateMessage`	`updateMessage(id: string, patch: Partial<BmxChatMessage>) => Promise<void>`	Changes a message.

CSS shadow parts

Part	Description
`avatar`	an author's picture or initials.
`bubble`	a message's text.
`composer`	where the reader writes.
`empty`	what shows before the first message.
`input`	the text box.
`log`	the conversation.
`message`	one message.
`send`	the send (and stop) button.
`suggestions`	the suggested messages.

CSS custom properties

Property	Description
`--bmx-chat-background`	Behind the conversation.
`--bmx-chat-bubble`	Everyone else's messages.
`--bmx-chat-height`	How tall the chat is. Default 32rem.
`--bmx-chat-max-width`	The widest a message grows. Default 46rem.
`--bmx-chat-user-bubble`	The reader's own messages.
`--bmx-chat-user-text`	Text on the reader's messages.

`<bmx-checkbox>`

Properties

Property	Attribute	Type	Default	Description
`autoFocus`	`auto-focus`	`boolean`	`false`	Focus the box once it has rendered.
`checked`	`checked`	`boolean`	`false`	Whether the box is ticked. Two-way: the component writes back to it.
`description`	`description`	`string`	—	Help text below the row.
`disabled`	`disabled`	`boolean`	`false`	Disable the box.
`errorText`	`error-text`	`string`	—	An error supplied by the consumer - a server response, typically.
`fullWidth`	`full-width`	`boolean`	`false`	Stretch to the width of the container, pushing the caption away from the box.
`hideLabel`	`hide-label`	`boolean`	`false`	Hide the caption visually while keeping it as the accessible name.
`indeterminate`	`indeterminate`	`boolean`	`false`	The mixed state. Visual and semantic only - `aria-checked="mixed"` and a dash in place of the tick. It never submits, and any user interaction clears it.
`label`	`label`	`string`	—	The caption. Required unless the `label` slot is used.
`labelPlacement`	`label-placement`	`BmxCheckboxLabelPlacement`	`'end'`	Which side of the box the caption sits on. Logical, so RTL flips it.
`messages`	property only	`BmxFieldMessages`	—	Replacements for the default wording, by reason. Accepts the JSON spelling of the object as well, for templates that can only write attributes. See `src/core/markup.ts`.
`name`	`name`	`string`	—	The field's name in the form it belongs to.
`required`	`required`	`boolean`	`false`	Require the box to be ticked before its form will submit.
`shape`	`shape`	`BmxShape`	`'rounded'`	Corner treatment of the box. `pill` and `circle` both round it fully.
`size`	`size`	`BmxSize`	`'md'`	Size step. Scales the box, the caption and the supporting text together.
`tone`	`tone`	`BmxTone`	`'primary'`	Semantic colour role for the ticked state and the focus ring.
`validateOn`	`validate-on`	`BmxValidateOn`	`'blur'`	When the field is willing to reveal a problem.
`value`	`value`	`string`	`'on'`	What the form receives when the box is ticked. Matches the native default.

Events

Event	Detail	Description
`bmxBlur`	`void`	Fired when the box loses focus.
`bmxChange`	`BmxCheckboxChangeDetail`	Fired when the ticked state changes, by user action or by `toggle()`.
`bmxFocus`	`void`	Fired when the box gains focus.
`bmxValidityChange`	`BmxCheckboxValidityDetail`	Fired whenever the resolved validity changes.

Methods

Method	Signature	Description
`checkValidity`	`checkValidity() => Promise<boolean>`	Validate now and return whether the box passed, without revealing anything.
`removeFocus`	`removeFocus() => Promise<void>`	Remove focus from the box.
`reportValidity`	`reportValidity() => Promise<boolean>`	Validate, reveal any problem, and focus the box if it has one.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focus the box.
`toggle`	`toggle() => Promise<void>`	Move to the next state, as a click would. Including from indeterminate, which resolves to ticked. Does nothing while the box is disabled, so a consumer's "toggle all" cannot quietly change a value the user has been told they may not change.

Slots

Slot	Description
`description`	Rich help text, in place of the `description` property.
`label`	Rich caption content, in place of the `label` property.

CSS shadow parts

Part	Description
`base`	The row holding the box and its caption.
`box`	The wrapper around the control and the drawn mark.
`control`	The native checkbox.
`description`	The help text.
`error`	The error message.
`label`	The caption.
`mark`	The drawn box and tick.

CSS custom properties

Property	Description
`--bmx-checkbox-background`	The box's background when unticked.
`--bmx-checkbox-border-color`	The box's border colour when unticked.
`--bmx-checkbox-border-width`	Border width of the box in its unticked state.
`--bmx-checkbox-checked-background`	The box's background when ticked or mixed. Defaults to the tone's solid colour.
`--bmx-checkbox-duration`	How long the tick takes to draw. Zero under reduced motion.
`--bmx-checkbox-font-size`	The caption's font size.
`--bmx-checkbox-gap`	Space between the box and its caption.
`--bmx-checkbox-mark-color`	The tick and dash colour.
`--bmx-checkbox-radius`	Corner radius of the box.
`--bmx-checkbox-size`	The drawn box's width and height. The clickable target stays at least 24px regardless.
`--bmx-checkbox-support-font-size`	Font size of the description and error message.

`<bmx-chip>`

Properties

Property	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean`	`false`	Whether the chip is inert. A disabled chip keeps its place in the row and takes no focus.
`href`	`href`	`string`	—	Turns the chip into a link.
`label`	`label`	`string`	—	The chip's text, when it is not being slotted in. Useful from a template that builds chips from data, and it is what the remove button's accessible name is composed from.
`rel`	`rel`	`string`	—	The link's `rel`. Left to the consumer rather than forced: `noopener` is right for almost every `target="_blank"` and a component that adds it silently is a component that has decided something on the consumer's behalf.
`removable`	`removable`	`boolean`	`false`	Whether the chip offers a remove button.
`removeLabel`	`remove-label`	`string`	—	The remove button's accessible name. Composed from the chip's text by default - "Remove Ada Lovelace" - because a row of eight buttons all called "Remove" tells a screen-reader user which action they are on and nothing about which of the eight.
`rovingTabindex`	`roving-tabindex`	`number`	`0`	The tabindex of the chip's focusable element. Set by a parent that implements a roving tabindex - `bmx-chip-set` does - and not normally set by hand. It exists as a property because the element that really takes the focus is inside this component's shadow root, where a `tabindex` on the host cannot reach it.
`selectable`	`selectable`	`boolean`	`false`	Whether the chip can be turned on and off.
`selected`	`selected`	`boolean`	`false`	Whether it is currently on.
`target`	`target`	`string`	—	The link's target, when `href` is set.
`value`	`value`	`string`	—	What this chip stands for, reported on both of its events.

Events

Event	Detail	Description
`bmxChange`	`BmxChipChangeDetail`	The chip was turned on or off.
`bmxRemove`	`BmxChipRemoveDetail`	The remove button was pressed. A request, not a notification: the chip does not take itself out of the document, because the list it belongs to is the consumer's data and a component that deleted from it would be guessing. Cancelable, so a confirmation can stop it - `bmx-chip-set`, which does own its data, honours the cancellation.

Methods

Method	Signature	Description
`isFocusable`	`isFocusable() => Promise<boolean>`	Whether anything in this chip can take the focus.
`setFocus`	`setFocus() => Promise<void>`	Focus the chip. Whatever the chip's focusable element happens to be - the body when it is a toggle or a link, the remove button when it is not. Every focusable control in this library exposes this, and a parent looking for one tests for the method rather than for a tag name: a `bmx-chip` is not a `button`.

Slots

Slot	Description
`(default)`	The chip's text.
`start`	An avatar or an icon, before the text.

CSS shadow parts

Part	Description
`chip`	The chip's body: the span, button or anchor.
`label`	The text.
`remove`	The remove button.
`remove-icon`	The cross inside it.

CSS custom properties

Property	Description
`--bmx-chip-background`	The fill when the chip is off.
`--bmx-chip-border`	The chip's outline.
`--bmx-chip-color`	The text colour when the chip is off.
`--bmx-chip-disabled-opacity`	How faint a disabled chip is.
`--bmx-chip-focus-ring`	The focus indicator.
`--bmx-chip-font-size`	The text.
`--bmx-chip-font-weight`	How heavy it is.
`--bmx-chip-gap`	The space between an avatar, the text and the cross.
`--bmx-chip-height`	The chip's height.
`--bmx-chip-hover-background`	The fill under the pointer, on an interactive chip.
`--bmx-chip-padding-inline`	The room either side of the text.
`--bmx-chip-radius`	The corner radius. A pill by default.
`--bmx-chip-remove-color`	The cross.
`--bmx-chip-remove-hover-background`	The disc behind the cross under the pointer.
`--bmx-chip-remove-size`	The cross's hit area.
`--bmx-chip-selected-background`	The fill when the chip is on.
`--bmx-chip-selected-border`	The outline when it is on.
`--bmx-chip-selected-color`	The text colour when it is on.

`<bmx-chip-set>`

Properties

Property	Attribute	Type	Default	Description
`expandable`	`expandable`	`boolean`	`true`	Whether pressing the counter shows the rest.
`items`	property only	`BmxChipEntry[]`	`[]`	The chips, as data. Read through `src/core/markup.ts`, so `items='[{"label":"Open"}]'` written as an attribute by a Razor page, a Blazor component or an htmx swap is the list it looks like rather than a string the component tries to map over.
`label`	`label`	`string`	—	What the group is called. A row of chips with no name is announced as a group of buttons with no indication of what they filter. It is the one property here worth calling near-mandatory.
`max`	`max`	`number`	—	The most chips to draw before the rest collapse into a counter. A limit that would hide exactly one chip hides none: the counter takes the same room and says less. See `src/core/collection.ts`.
`moreLabel`	`more-label`	`string`	—	The counter's accessible name, when the composed one is not wanted.
`orientation`	`orientation`	`BmxOrientation`	`'horizontal'`	Which arrow keys move between chips.
`removable`	`removable`	`boolean`	`false`	Whether chips drawn from `items` offer a remove button.
`selectable`	`selectable`	`boolean`	`false`	Whether chips drawn from `items` can be turned on and off.
`wrap`	`wrap`	`boolean`	`true`	Whether the row wraps onto a second line rather than scrolling.

Events

Event	Detail	Description
`bmxChange`	`BmxChipSetChangeDetail`	The selection changed. Carries the whole selection, not just the chip that moved.
`bmxRemove`	`BmxChipSetRemoveDetail`	A chip drawn from `items` asked to be removed. Cancelable. Uncancelled, the set takes the entry out of `items` itself and moves the focus; prevented, nothing happens and the focus stays where it was. Chips the consumer slotted in emit their own `bmxRemove` and this one is not raised for them - the event already reached whoever wrote the chip.

Methods

Method	Signature	Description
`setFocus`	`setFocus() => Promise<void>`	Focus the set's active chip, or the set itself when it is empty.

Slots

Slot	Description
`(default)`	`bmx-chip` elements.

CSS shadow parts

Part	Description
`more`	The counter chip.
`set`	The row.

CSS custom properties

Property	Description
`--bmx-chip-set-focus-ring`	The indicator on the set itself, which is focusable only when empty.
`--bmx-chip-set-gap`	The space between chips.
`--bmx-chip-set-more-background`	The background of the overflow "+n" chip.
`--bmx-chip-set-more-color`	Its text.
`--bmx-chip-set-row-gap`	The space between rows, when the set wraps.

`<bmx-code-diff>`

Properties

Property	Attribute	Type	Default	Description
`actions`	`actions`	`'none' \| 'revert' \| 'accept' \| 'both'`	`'none'`	Buttons on each change: `revert` (put the original back), `accept` (take it into the original), `both`, or `none`.
`context`	`context`	`number`	`3`	Unchanged lines shown around each change; the rest fold away. -1 shows everything.
`ignoreCase`	`ignore-case`	`boolean`	`false`	Letters compare without their case.
`ignoreWhitespace`	`ignore-whitespace`	`BmxCodeWhitespace`	`'none'`	Whitespace that is not a difference: `none`, `trailing` (at line ends) or `all`.
`label`	`label`	`string`	—	What the differences are of, said by screen readers.
`language`	`language`	`string`	—	The language to colour: a name, an extension or a file name. From a patch's file names when not set.
`lineNumbers`	`line-numbers`	`boolean`	`true`	Show line numbers.
`modified`	`modified`	`string`	`''`	The second text. Changed by `revert`.
`modifiedLabel`	`modified-label`	`string`	—
`original`	`original`	`string`	`''`	The first text. Changed by `accept`.
`originalLabel`	`original-label`	`string`	—	What the first and second texts are called: file names, `Yesterday`, `Proposed`.
`patch`	`patch`	`string`	—	A unified diff (a patch) to show instead of two texts. Several files are shown one after another.
`strings`	`strings`	`Partial<BmxCodeDiffStrings> \| string`	—	Words it shows or says: any of `BmxCodeDiffStrings`. JSON in markup.
`toolbar`	`toolbar`	`boolean`	`true`	Show the toolbar: counts, labels, the next and previous change, and the view switch.
`view`	`view`	`'split' \| 'unified' \| 'auto'`	`'auto'`	`split` (side by side), `unified` (one column), or `auto`: side by side when there is room.
`wordDiff`	`word-diff`	`boolean`	`true`	Mark the words that changed within changed lines.
`wrap`	`wrap`	`boolean`	`true`	Wrap long lines; otherwise each side scrolls across.

Events

Event	Detail	Description
`bmxCodeDiffChange`	`BmxCodeDiffChangeDetail`	A change was reverted or accepted with its buttons.
`bmxCodeDiffCompute`	`BmxCodeDiffStatsDetail`	The differences were worked out (again).

Methods

Method	Signature	Description
`acceptChange`	`acceptChange(index: number) => Promise<boolean>`	Take one change into the original text.
`expandAll`	`expandAll() => Promise<void>`	Open every folded stretch of unchanged lines.
`getChanges`	`getChanges() => Promise<BmxCodeDiffChange[]>`	Every change, lines from 1.
`getStats`	`getStats() => Promise<BmxCodeDiffStatsDetail>`	How many lines were added and removed, in how many changes.
`goToChange`	`goToChange(index: number) => Promise<void>`	Scroll to a change by index, from 0.
`nextChange`	`nextChange() => Promise<number>`	Scroll to the next change (wrapping round). Returns its index, from 0, or -1 when there are none.
`previousChange`	`previousChange() => Promise<number>`
`revertChange`	`revertChange(index: number) => Promise<boolean>`	Revert one change (put the original's lines back in the modified text).
`setFocus`	`setFocus() => Promise<void>`
`toPatch`	`toPatch(options?: { context?: number; originalName?: string; modifiedName?: string; }) => Promise<string>`	The differences as a unified diff (a patch), with `context` lines around each change.

CSS shadow parts

Part	Description
`body`	the scrolling lines.
`frame`	the border and background.
`toolbar`	the counts, the labels and the buttons above the lines.

CSS custom properties

Property	Description
`--bmx-code-diff-added`	The background of added lines.
`--bmx-code-diff-added-word`	The background of added words.
`--bmx-code-diff-font`	The typeface of the lines. Default the library's monospace.
`--bmx-code-diff-font-size`	The size of the lines. Default 0.8125rem.
`--bmx-code-diff-height`	The greatest height before the lines scroll. Default 32rem.
`--bmx-code-diff-removed`	The background of removed lines.
`--bmx-code-diff-removed-word`	The background of removed words.

`<bmx-code-editor>`

Properties

Property	Attribute	Type	Default	Description
`autoClose`	`auto-close`	`boolean`	`true`	Close brackets and quotes as they are opened.
`autocomplete`	`autocomplete`	`boolean`	`true`	Suggest words as they are typed (and on Ctrl+Space).
`completions`	property only	`(context: BmxCodeCompletionContext) => readonly BmxCodeCompletion[] \| Promise<readonly BmxCodeCompletion[]>`	—	Your own suggestions: `(context) => items`, or a promise of them. Added to the language's words and the text's own.
`diagnostics`	`diagnostics`	`readonly BmxCodeDiagnostic[] \| string`	—	Problems to underline, from a linter or a server of your own. JSON in markup.
`disabled`	`disabled`	`boolean`	`false`	Neither editable nor posted with its form.
`firstLineNumber`	`first-line-number`	`number`	`1`	The number of the first line (for showing part of a file).
`folding`	`folding`	`boolean`	`true`	Let sections fold away (brackets, indentation, tags, headings).
`formatter`	property only	`(text: string, language: string) => string \| Promise<string>`	—	Formats the text for Shift+Alt+F and `format()`: `(text, language) => text`, or a promise of it. JSON is formatted without one.
`highlightActiveLine`	`highlight-active-line`	`boolean`	`true`	Shade the line the caret is on.
`indentSize`	`indent-size`	`number`	—	How many spaces one indent step is (when indenting with spaces). Read from the text when not set.
`indentWith`	`indent-with`	`'spaces' \| 'tabs'`	—	Indent with `spaces` or `tabs`. Read from the text when not set.
`label`	`label`	`string`	—	What the editor holds, said by screen readers.
`language`	`language`	`string`	`'plain'`	The language to colour, indent and comment: a name, an extension or a file name (`typescript`, `ts`, `report.sql`). Plain text when unknown.
`lineNumbers`	`line-numbers`	`boolean`	`true`	Show line numbers.
`maxLines`	`max-lines`	`number`	—	At most this many lines tall before it scrolls.
`minLines`	`min-lines`	`number`	—	At least this many lines tall (with `maxLines`, the editor grows with its text).
`name`	`name`	`string`	—	The name the text is posted under with its form.
`placeholder`	`placeholder`	`string`	—	Shown while the editor is empty.
`readonly`	`readonly`	`boolean`	`false`	Shown and searchable, but not editable.
`required`	`required`	`boolean`	`false`	The form will not submit while the editor is empty.
`statusBar`	`status-bar`	`boolean`	`false`	Show the caret's line and column, the indent, the language and the line ending below the text.
`strings`	`strings`	`Partial<BmxCodeEditorStrings> \| string`	—	Words the editor shows or says: any of `BmxCodeEditorStrings`. JSON in markup.
`tabSize`	`tab-size`	`number`	`4`	How wide a tab is drawn, in characters.
`validate`	`validate`	`boolean`	`true`	Check JSON as it is typed and underline the first mistake.
`value`	`value`	`string`	`''`	The text. Set it to load one; it is kept current shortly after typing stops (`getValue()` is always current).
`wrap`	`wrap`	`boolean`	`false`	Wrap long lines at the editor's width.

Events

Event	Detail	Description
`bmxCodeChange`	`{ readonly value: string; }`	The text changed and the editor lost focus, as a field's `change` does.
`bmxCodeInput`	`BmxCodeEditorInputDetail`	The text changed. `detail.value` is the whole text, worked out when read.
`bmxCodeSave`	`{ readonly value: string; }`	Ctrl+S (Cmd+S) was pressed. The browser's own save is prevented.
`bmxCodeSelectionChange`	`BmxCodeEditorSelectionDetail`	The carets or selections moved.

Methods

Method	Signature	Description
`execute`	`execute(command: BmxCodeEditorCommand) => Promise<boolean>`	Run a command by name, as its key would. Returns whether it did anything.
`find`	`find(query: string, options?: { matchCase?: boolean; wholeWord?: boolean; regex?: boolean; }) => Promise<number>`	Find text (opening the find bar), select the first match after the caret, and return how many there are.
`fold`	`fold(line: number) => Promise<boolean>`	Fold the section starting at (or around) a line, from 1.
`foldAll`	`foldAll() => Promise<void>`
`format`	`format() => Promise<boolean>`	Format the whole text with `formatter` (or, for JSON, without one). Returns whether it changed.
`getDiagnostics`	`getDiagnostics() => Promise<BmxCodeDiagnostic[]>`	The problems underlined now: yours and JSON's own.
`getLanguage`	`getLanguage() => Promise<{ name: string; label: string; }>`	The language in use, by name and label.
`getLanguages`	`getLanguages() => Promise<{ name: string; label: string; aliases: string[]; }[]>`	Every language the editor and the diff colour: names, labels and the other names that choose them.
`getLine`	`getLine(line: number) => Promise<string>`	One line's text (from 1).
`getLineCount`	`getLineCount() => Promise<number>`
`getSelectedText`	`getSelectedText() => Promise<string>`	The text of the primary selection.
`getSelections`	`getSelections() => Promise<BmxCodeEditorSelection[]>`	Every selection (or caret), lines and columns from 1. The primary one is first.
`getValue`	`getValue() => Promise<string>`	The whole text, with the line endings it came with.
`goToLine`	`goToLine(line: number, column?: number) => Promise<void>`	Move the caret to a line (from 1), and column, and bring it into view.
`offsetAt`	`offsetAt(position: BmxCodeEditorPosition) => Promise<number>`	A line and column as a character offset into the text.
`positionAt`	`positionAt(offset: number) => Promise<BmxCodeEditorPosition>`	A character offset into the text as a line and column.
`redo`	`redo() => Promise<boolean>`
`registerLanguage`	`registerLanguage(language: BmxCodeLanguage) => Promise<void>`	Add a language of your own (or replace a built-in one of the same name), for every code editor and code diff on the page. Its `tokenize` reads one line and the state the line before ended in, and returns the line's tokens and the state it ends in.
`replaceAll`	`replaceAll(query: string, replacement: string, options?: { matchCase?: boolean; wholeWord?: boolean; regex?: boolean; }) => Promise<number>`	Replace every match of a query; returns how many were replaced.
`replaceRange`	`replaceRange(text: string, from: BmxCodeEditorPosition, to?: BmxCodeEditorPosition) => Promise<void>`	Replace the text between two places (or insert at one) without moving the carets more than the edit does.
`replaceSelection`	`replaceSelection(text: string) => Promise<void>`	Type text at every caret (replacing any selection), as if pasted.
`setFocus`	`setFocus() => Promise<void>`
`setSelection`	`setSelection(anchor: BmxCodeEditorPosition, head?: BmxCodeEditorPosition) => Promise<void>`	Select from `anchor` to `head` (or put the caret at `anchor`), and scroll it into view.
`setSelections`	`setSelections(selections: readonly BmxCodeEditorSelection[]) => Promise<void>`	Put a caret (or selection) at each of these.
`setValue`	`setValue(text: string, options?: { keepHistory?: boolean; }) => Promise<void>`	Replace the whole text. With `keepHistory`, the replacement can be undone; otherwise history starts again.
`undo`	`undo() => Promise<boolean>`
`unfold`	`unfold(line: number) => Promise<boolean>`	Unfold the section starting at (or around) a line, from 1.
`unfoldAll`	`unfoldAll() => Promise<void>`

CSS shadow parts

Part	Description
`content`	the text area.
`find`	the find and replace bar.
`frame`	the editor's border and background.
`gutter`	the line numbers and fold markers.
`status`	the status bar.
`suggestions`	the list of suggestions.

CSS custom properties

Property	Description
`--bmx-code-editor-active-line`	The shade on the caret's line.
`--bmx-code-editor-background`	Behind the text.
`--bmx-code-editor-caret`	The caret's colour.
`--bmx-code-editor-font`	The typeface. A fixed-width one; default the library's monospace.
`--bmx-code-editor-font-size`	The text size. Default 0.8125rem.
`--bmx-code-editor-gutter-background`	Behind the line numbers.
`--bmx-code-editor-height`	The editor's height (unless `max-lines` sizes it to its text). Default 20rem.
`--bmx-code-editor-line-height`	The line height, as a multiple of the text size. Default 1.55.
`--bmx-code-editor-selection`	The selection's colour.

`<bmx-color-picker>`

Properties

Property	Attribute	Type	Default	Description
`alpha`	`alpha`	`boolean`	`false`	Allow opacity: an opacity track, and a value that carries it.
`clearable`	`clearable`	`boolean`	`false`	Show a button that clears the colour.
`contrastLevel`	`contrast-level`	`BmxContrastLevel`	`'AA'`	The WCAG level to meet.
`contrastRole`	`contrast-role`	`'foreground' \| 'background'`	`'foreground'`	Whether the chosen colour is the `foreground` against `contrast-with`, or the `background` behind it.
`contrastUse`	`contrast-use`	`BmxContrastUse`	`'text'`	What the colour is used for, which sets the ratio it needs: `text` (4.5:1 / 7:1), `large-text` (3:1 / 4.5:1), `graphics` (3:1).
`contrastWith`	`contrast-with`	`string`	—	A colour to check contrast against: any colour, or a custom property. Leave empty for no check.
`description`	`description`	`string`	—	Help text below the field.
`disabled`	`disabled`	`boolean`	`false`	Disable the picker.
`errorText`	`error-text`	`string`	—	An error supplied by the page.
`eyedropper`	`eyedropper`	`boolean`	`true`	Offer the screen eyedropper, where the browser has one.
`format`	`format`	`BmxColorFormat`	`'hex'`	How the value is written: `hex`, `rgb`, `hsl` or `oklch`. Mutable: the reader can switch it in the panel.
`formats`	`formats`	`BmxColorFormat[] \| string`	`['hex', 'rgb', 'hsl', 'oklch']`	The formats offered in the panel, as an array, JSON or a comma-separated list. Empty hides the switcher.
`fullWidth`	`full-width`	`boolean`	`false`	Stretch to the width of the container.
`hideInputs`	`hide-inputs`	`boolean`	`false`	Leave out the format buttons and channel boxes.
`hideLabel`	`hide-label`	`boolean`	`false`	Hide the label visually while keeping it as the accessible name.
`label`	`label`	`string`	—	The field's label.
`maxRecent`	`max-recent`	`number`	`8`	The longest the recent list grows. 0 keeps none and hides the list.
`mode`	`mode`	`'popup' \| 'inline'`	`'popup'`	`popup`: a field that opens a floating panel. `inline`: the panel drawn in place.
`name`	`name`	`string`	—	The field's name in the form it belongs to.
`placeholder`	`placeholder`	`string`	—	The text box's placeholder (popup mode).
`placement`	`placement`	`BmxPlacement`	`'bottom-start'`	Where the floating panel opens against the field.
`readonly`	`readonly`	`boolean`	`false`	Show the colour without allowing changes.
`recent`	`recent`	`string[] \| string`	`[]`	Recent colours, newest first. Mutable: a newly chosen colour is put first.
`required`	`required`	`boolean`	`false`	A colour must be chosen.
`strings`	`strings`	`Partial<BmxColorPickerStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`swatches`	`swatches`	`(BmxColorSwatch \| string)[] \| string`	`[]`	Colours offered as swatches: strings or `{ value, label, group }`, as an array, JSON or a comma-separated list.
`uppercase`	`uppercase`	`boolean`	`false`	Hex digits in upper case.
`value`	`value`	`string`	`''`	The colour, written in `format`. Empty for none. Two-way.

Events

Event	Detail	Description
`bmxChange`	`BmxColorChangeDetail`	Fired when a change is complete: a drag released, a key pressed, a swatch chosen, a value typed.
`bmxInput`	`BmxColorChangeDetail`	Fired continuously while the colour changes - during a drag, on each step.
`bmxOpenChange`	`boolean`	Fired when the floating panel opens or closes.
`bmxRecentChange`	`BmxColorRecentDetail`	Fired when a colour is added to the recent list.

Methods

Method	Signature	Description
`checkContrastWith`	`checkContrastWith(color?: string) => Promise<BmxContrastResult \| null>`	The WCAG contrast of the current colour against another (default: `contrast-with`), or `null`.
`getColor`	`getColor() => Promise<BmxColorInfo \| null>`	The current colour written every way, or `null` when there is none.
`hide`	`hide() => Promise<void>`	Close the floating panel.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focus the text box (popup mode) or the square (inline).
`show`	`show() => Promise<void>`	Open the floating panel (popup mode).

Slots

Slot	Description
`description`	Rich help text, in place of the `description` property.
`label`	Rich label content, in place of the `label` property.

CSS shadow parts

Part	Description
`alpha`	The opacity track.
`area`	The saturation and brightness square.
`area-thumb`	Its handle.
`channel`	One channel box.
`channels`	The row of channel boxes.
`clear`	The clear button.
`contrast`	The contrast check.
`description`	The help text.
`eyedropper`	The eyedropper button.
`field`	The box around the swatch button and the text (popup mode).
`fix`	The button that fixes the contrast.
`formats`	The format buttons.
`hue`	The hue track.
`input`	The text box (popup mode).
`label`	The label element.
`panel`	The panel: floating in popup mode, in place inline.
`preview`	The before and after chips.
`swatch`	One swatch; also `swatch-selected`.
`swatches`	A list of swatches (also the recent list).
`thumb`	A track's handle.
`trigger`	The button that opens the panel, showing the colour.

CSS custom properties

Property	Description
`--bmx-color-picker-area-height`	The height of the saturation and brightness square.
`--bmx-color-picker-height`	The field's height.
`--bmx-color-picker-label-font-size`	The label's font size.
`--bmx-color-picker-panel-background`	The panel's background.
`--bmx-color-picker-panel-shadow`	The floating panel's shadow.
`--bmx-color-picker-panel-width`	The panel's width.
`--bmx-color-picker-radius`	Corner radius of the field and the panel.
`--bmx-color-picker-support-font-size`	Font size of the description and error message.
`--bmx-color-picker-swatch-size`	The size of a swatch.

`<bmx-combobox>`

Properties

Property	Attribute	Type	Default	Description
`allowCustom`	`allow-custom`	`boolean`	`false`	Whether a value the user typed but did not choose is allowed. Off by default, which is the "searchable select": type to find, leave with something from the list. On, the typed text becomes the value - which is what makes this a tag input when combined with `multiple`.
`appearance`	`appearance`	`BmxComboboxAppearance`	`'outline'`	Visual treatment.
`autoFocus`	`auto-focus`	`boolean`	`false`	Focus the field once it has rendered.
`clearable`	`clearable`	`boolean`	`false`	Show a clear button once something is chosen.
`description`	`description`	`string`	—	Help text below the field.
`disabled`	`disabled`	`boolean`	`false`	Disable the field.
`emptyText`	`empty-text`	`string`	`'No matches'`	What the list says when nothing matches.
`errorText`	`error-text`	`string`	—	An error supplied by the consumer - a server response, typically.
`fullWidth`	`full-width`	`boolean`	`false`	Stretch to the width of the container.
`hideLabel`	`hide-label`	`boolean`	`false`	Hide the label visually while keeping it as the accessible name.
`label`	`label`	`string`	—	The field's label. Required unless the `label` slot is used.
`loading`	`loading`	`boolean`	`false`	Show a busy state while a consumer fetches results.
`loadingText`	`loading-text`	`string`	`'Searching…'`	What the list says while `loading` is set.
`matcher`	property only	`BmxOptionMatcher`	—	A consumer's own matcher, in place of the default.
`maxTags`	`max-tags`	`number`	`3`	How many tags to show before the rest collapse into a count.
`maxVisibleRows`	`max-visible-rows`	`number`	`8`	How many rows the open list shows before it scrolls.
`messages`	property only	`BmxFieldMessages`	—	Replacements for the default wording, by reason. Accepts the JSON spelling of the object as well, for templates that can only write attributes. See `src/core/markup.ts`.
`multiple`	`multiple`	`boolean`	`false`	Allow more than one choice, shown as tags.
`name`	`name`	`string`	—	The field's name in the form it belongs to.
`options`	property only	`BmxListboxOption[]`	`[]`	The options. A property, because it is an array. Accepts the JSON spelling of the list as well, because an attribute is the only channel some templates have. See `src/core/markup.ts`.
`placeholder`	`placeholder`	`string`	`'Type to search…'`	Placeholder text. Never a substitute for a label.
`placement`	`placement`	`BmxPlacement`	`'bottom-start'`	Which side the list opens on when there is room.
`readonly`	`readonly`	`boolean`	`false`	Make the field read-only. It still submits and is still focusable.
`required`	`required`	`boolean`	`false`	Require a choice before the form will submit.
`serverFilter`	`server-filter`	`boolean`	`false`	Filter elsewhere. See the note on the class.
`shape`	`shape`	`BmxShape`	`'rounded'`	Corner treatment. `circle` is not meaningful here and behaves as `pill`.
`showChevron`	`show-chevron`	`boolean`	`true`	Show the disclosure arrow, which opens the unfiltered list.
`size`	`size`	`BmxSize`	`'md'`	Size step.
`tone`	`tone`	`BmxTone`	`'primary'`	Semantic colour role, used for the focus ring and the chosen option.
`validateOn`	`validate-on`	`BmxValidateOn`	`'blur'`	When the field is willing to reveal a problem.
`value`	`value`	`string \| null`	`null`	The chosen value in single mode. Two-way.
`values`	property only	`string[]`	`[]`	The chosen values in `multiple` mode. Two-way. Accepts a comma-separated or JSON string as well, because an attribute is the only channel some templates have. See `src/core/markup.ts`.
`virtualThreshold`	`virtual-threshold`	`number`	`100`	The row count above which the list is windowed.

Events

Event	Detail	Description
`bmxBlur`	`void`	Fired when the field loses focus.
`bmxChange`	`BmxComboboxChangeDetail`	Fired when the selection changes.
`bmxFilter`	`BmxComboboxFilterDetail`	Fired on every edit, with what the user has typed.
`bmxFocus`	`void`	Fired when the field gains focus.
`bmxOpenChange`	`boolean`	Fired when the list opens or closes.
`bmxValidityChange`	`BmxComboboxValidityDetail`	Fired whenever the resolved validity changes.

Methods

Method	Signature	Description
`checkValidity`	`checkValidity() => Promise<boolean>`	Validate now and return whether the field passed, without revealing anything.
`clear`	`clear() => Promise<void>`	Empty the selection and the text.
`closeList`	`closeList() => Promise<void>`	Close the list without committing.
`getQuery`	`getQuery() => Promise<string>`	What the user has typed.
`getSelectedOptions`	`getSelectedOptions() => Promise<BmxListboxOption[]>`	The options behind the current selection.
`openList`	`openList() => Promise<void>`	Open the list, unfiltered.
`removeFocus`	`removeFocus() => Promise<void>`	Remove focus from the field.
`reportValidity`	`reportValidity() => Promise<boolean>`	Validate, reveal any problem, and focus the field if it has one.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focus the field.

Slots

Slot	Description
`(default)`	`bmx-option` elements, when options are written rather than passed.
`description`	Rich help text, in place of the `description` property.
`label`	Rich label content, in place of the `label` property.

CSS shadow parts

Part	Description
`chevron`	The disclosure arrow.
`clear`	The clear button.
`control`	The text input carrying `role="combobox"`.
`description`	The help text.
`empty`	The message shown when nothing matches.
`error`	The error message.
`field`	The bordered box.
`group`	A group heading.
`label`	The label element.
`listbox`	The floating surface.
`option`	One option row.
`tag`	One chosen value in `multiple` mode.
`tag-remove`	A tag's remove button.

CSS custom properties

Property	Description
`--bmx-combobox-background`	The field's background. Set by `appearance`.
`--bmx-combobox-border-color`	The field's border colour at rest.
`--bmx-combobox-border-width`	Border width of the field.
`--bmx-combobox-font-size`	The text's font size.
`--bmx-combobox-gap`	Space between the tags, the input and the chevron.
`--bmx-combobox-group-height`	A group heading's height.
`--bmx-combobox-height`	The field's height.
`--bmx-combobox-label-font-size`	The label's font size.
`--bmx-combobox-list-background`	The floating list's background.
`--bmx-combobox-list-shadow`	The list's shadow.
`--bmx-combobox-option-active-background`	The background of the option the keyboard is on.
`--bmx-combobox-option-height`	A row's height in the open list.
`--bmx-combobox-option-selected-background`	The chosen option's background.
`--bmx-combobox-padding-inline`	Horizontal padding inside the field.
`--bmx-combobox-placeholder-color`	Placeholder colour. Dimmer than a value, and still AA against the field.
`--bmx-combobox-radius`	Corner radius of the field and the list.
`--bmx-combobox-stack-gap`	Space between the label, the field and the supporting text.
`--bmx-combobox-support-font-size`	Font size of the description and error message.

`<bmx-command-palette>`

Properties

Property	Attribute	Type	Default	Description
`closeOnBackdrop`	`close-on-backdrop`	`boolean`	`true`	Whether a press on the scrim closes it (dialog mode).
`commands`	`commands`	`BmxCommand[] \| string`	`[]`	The commands, as objects or JSON.
`filter`	property only	`(command: BmxCommand, query: string) => number \| null \| undefined`	—	A score for each command against the query, replacing the built-in matching; null leaves it out.
`globalShortcuts`	`global-shortcuts`	`boolean`	`false`	Run a command from its `shortcut` wherever focus is on the page, while the palette is closed.
`hideHints`	`hide-hints`	`boolean`	`false`	Leave out the keyboard hints along the foot.
`hotkey`	`hotkey`	`string`	`'mod+k'`	The keys that open it (dialog mode) or focus it (inline): `mod` is Command on Apple systems and Control elsewhere. Several separated by commas; empty for none.
`label`	`label`	`string`	—	The palette's accessible name. Default: "Command palette".
`maxRecent`	`max-recent`	`number`	`5`	The longest the recent list grows. 0 keeps none.
`maxResults`	`max-results`	`number`	`100`	The most results listed at once, across groups. Results from `providers` are listed beyond it.
`mode`	`mode`	`'dialog' \| 'inline'`	`'dialog'`	`dialog`: a modal over the page, opened by the hotkey. `inline`: drawn in place, always showing.
`open`	`open`	`boolean`	`false`	Whether it is showing (dialog mode). Mutable: the reader opens and closes it.
`placeholder`	`placeholder`	`string`	—	The search box's placeholder.
`providers`	property only	`BmxCommandProvider[]`	`[]`	Sources searched as the reader types (from script).
`recent`	`recent`	`string[] \| string`	`[]`	Recent command ids, newest first. Mutable: running a command puts it first.
`strings`	`strings`	`Partial<BmxCommandPaletteStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.

Events

Event	Detail	Description
`bmxCommand`	`BmxCommandRunDetail`	Fired before a command runs. Cancel it to run the command yourself; the palette still closes.
`bmxOpenChange`	`boolean`	Fired when the palette opens or closes.
`bmxQueryChange`	`BmxCommandQueryDetail`	Fired as the query or the page changes.
`bmxRecentChange`	`BmxCommandRecentDetail`	Fired when running a command changes the recent list.

Methods

Method	Signature	Description
`back`	`back() => Promise<boolean>`	Back one page. Resolves whether there was one to go back from.
`closePalette`	`closePalette() => Promise<void>`	Closes the palette.
`openPage`	`openPage(id: string) => Promise<boolean>`	Opens the page of a top-level command that has `children`, by id. Resolves whether it did.
`openPalette`	`openPalette(query?: string) => Promise<void>`	Opens the palette, optionally with a query typed in. In inline mode, focuses it.
`setQuery`	`setQuery(query: string) => Promise<void>`	Types a query into the box.
`togglePalette`	`togglePalette() => Promise<void>`	Opens it when closed, closes it when open.

Slots

Slot	Description
`empty`	Shown instead of "No results".
`footer`	Replaces the keyboard hints along the foot.

CSS shadow parts

Part	Description
`badge`	A result's tag.
`crumb`	A chosen command on the way to the current page.
`description`	A result's second line.
`dialog`	The native dialog, which is also the scrim (dialog mode).
`empty`	The "No results" message.
`footer`	The hints along the foot.
`heading`	A group's heading.
`icon`	A result's icon.
`input`	The search box.
`label`	A result's label.
`list`	The list of results.
`match`	The letters of a label that matched.
`option`	One result; also `option-active` and `option-disabled`.
`panel`	The box everything sits in.
`search`	The row with the search box.
`shortcut`	A result's keys.
`spinner`

CSS custom properties

Property	Description
`--bmx-command-palette-active`	The background of the chosen result.
`--bmx-command-palette-list-height`	The tallest the list grows before it scrolls.
`--bmx-command-palette-match`	The colour of the letters that matched.
`--bmx-command-palette-radius`	Corner radius of the panel.
`--bmx-command-palette-scrim`	The colour laid over the page behind it.
`--bmx-command-palette-top`	Space above the panel in dialog mode.
`--bmx-command-palette-width`	The panel's width.

`<bmx-configurator>`

Properties

Property	Attribute	Type	Default	Description
`autoResolve`	`auto-resolve`	`boolean`	`false`	Choosing an unavailable option makes the other changes it needs at once, rather than asking first.
`currency`	`currency`	`string`	—	ISO 4217. Default: the model's, then USD.
`discount`	`discount`	`number`	`0`	The seller's discount in percent, held to the model's most. Two-way.
`hidePrices`	`hide-prices`	`boolean`	`false`	Hide the prices (configure only).
`label`	`label`	`string`	—	The configurator's accessible name. Default: the model's name.
`layout`	`layout`	`'steps' \| 'single'`	—	Sections as steps one at a time, or every group on one page. Default: steps when groups name sections.
`locale`	`locale`	`string`	—	A BCP 47 locale for numbers and money. Default: the page's `lang`, then the reader's.
`mode`	`mode`	`BmxConfiguratorMode`	`'buyer'`	A buyer sees prices; a seller also sees the discount, approval and the bill of materials.
`model`	`model`	`BmxConfigModel \| string`	`{ groups: [] }`	The product model: groups, options, rules and pricing (object or JSON).
`name`	`name`	`string`	—	The field's name in a form; the form receives `{ selection, quantity, discount }` as JSON.
`quantity`	`quantity`	`number`	`1`	How many are being configured. Two-way.
`readonly`	`readonly`	`boolean`	`false`	Shows the configuration without letting it change.
`strings`	`strings`	`Partial<BmxConfiguratorStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`submitLabel`	`submit-label`	`string`	—	Shows a submit button with this text; `bmxSubmit` carries the quote.
`value`	`value`	`BmxConfigSelection \| string`	`{}`	What the buyer chose, by group id (object or JSON). Two-way.

Events

Event	Detail	Description
`bmxChange`	`BmxConfiguratorChangeDetail`	Fired after every change, with the selection, every answer, the quote and what else changed.
`bmxSubmit`	`{ quote: BmxConfigQuote; selection: BmxConfigSelection; }`	Fired by the submit button, with the quote.

Methods

Method	Signature	Description
`check`	`check() => Promise<BmxConfigProblem[]>`	Problems with the model: ids, options, defaults, rule formulas, and whether anything can be configured.
`focusGroup`	`focusGroup(group: string) => Promise<boolean>`	Shows a group (opening its step) and moves focus to it.
`getBomCsv`	`getBomCsv() => Promise<string>`	The bill of materials as CSV.
`getQuote`	`getQuote() => Promise<BmxConfigQuote>`	The quote as it stands: answers, price lines, totals, bill of materials, approval and what is missing.
`getResolution`	`getResolution() => Promise<BmxConfigResolution>`	Every group's answer, where each came from, what is available and what is missing.
`getSelection`	`getSelection() => Promise<BmxConfigSelection>`	What the buyer chose (the answers given, not those defaulted or set by rule).
`propose`	`propose(group: string, value: BmxConfigValue) => Promise<{ selection: BmxConfigSelection; changes: BmxConfigChange[]; } \| null>`	What choosing a value would change, without choosing it; null when no configuration has it.
`redo`	`redo() => Promise<boolean>`	Redoes the last undone change.
`reset`	`reset() => Promise<void>`	Back to the selection, quantity and discount the configurator started with.
`select`	`select(group: string, value: BmxConfigValue, options?: { force?: boolean; }) => Promise<{ chosen: boolean; changes: BmxConfigChange[]; }>`	Chooses as the buyer would. When the value is unavailable, the other changes it needs are made too (`force`, the default here) or only reported. Resolves with whether it was chosen and what else changed.
`setSelection`	`setSelection(selection: BmxConfigSelection, options?: { quantity?: number; discount?: number; }) => Promise<void>`	Replaces the selection (and optionally the quantity and discount).
`undo`	`undo() => Promise<boolean>`	Undoes the last change.

CSS shadow parts

Part	Description
`group`	A group of choices.
`header`	The product's name and description.
`option`	An option; also `option-unavailable`, `option-chosen`.
`steps`	The list of sections.
`submit`	The submit button.
`summary`	The summary, prices and actions.

CSS custom properties

Property	Description
`--bmx-configurator-card-width`	The narrowest an option card is drawn.
`--bmx-configurator-chosen`	The colour that marks a chosen option.
`--bmx-configurator-sticky-top`	How far from the top of the page the summary stays when scrolling.
`--bmx-configurator-summary-width`	The width of the summary beside the choices.

`<bmx-dashboard>`

Properties

Property	Attribute	Type	Default	Description
`autosave`	`autosave`	`string`	—	A name to keep the reader's layout under in this browser, and restore it from next time (over `layout`; `setLayout()` replaces it).
`columns`	`columns`	`number`	`12`	Columns of the grid at full width.
`compact`	`compact`	`BmxDashboardCompact`	`'vertical'`	How tiles close up after a change: `vertical` (float up, default) or `none`.
`editable`	`editable`	`boolean`	`false`	The reader can move and resize tiles.
`gap`	`gap`	`number`	`12`	The space between tiles, in pixels.
`label`	`label`	`string`	—	The dashboard's accessible name.
`layout`	`layout`	`BmxDashboardItem[] \| string`	`[]`	Every tile's place and size: `[{ id, x, y, w, h, minW, minH, maxW, maxH, locked }]`, as a property or JSON. Changes write back here.
`maximizable`	`maximizable`	`boolean`	`true`	Tiles with a title have a button to fill the dashboard.
`minColumnWidth`	`min-column-width`	`number`	`64`	The narrowest a column may be, in pixels: below it the grid has fewer columns and the tiles follow.
`removable`	`removable`	`boolean`	`false`	With `editable`, tiles have a button to remove them.
`rowHeight`	`row-height`	`number`	`80`	How tall a row is, in pixels.
`stackBelow`	`stack-below`	`number`	`560`	Below this width, in pixels, the tiles stack in one column.
`strings`	`strings`	`Partial<BmxDashboardStrings> \| string`	—	Replacements for the dashboard's wording, as a property or JSON.

Events

Event	Detail	Description
`bmxDashboardChange`	`BmxDashboardChangeDetail`	The layout changed.
`bmxDashboardExpand`	`BmxDashboardExpandDetail`	A tile was expanded to fill the dashboard, or restored.
`bmxDashboardRemove`	`BmxDashboardRemoveDetail`	The reader is removing a tile. Cancel it to keep the tile.

Methods

Method	Signature	Description
`addTile`	`addTile(element: HTMLElement, place?: Partial<Omit<BmxDashboardItem, "id">>) => Promise<string>`	Adds an element as a tile, at a place or the first free one. Gives the tile's id.
`expandTile`	`expandTile(id: string \| null) => Promise<void>`	Makes a tile fill the dashboard, or (with null) restores it.
`getLayout`	`getLayout() => Promise<BmxDashboardItem[]>`	Every tile's place and size.
`removeTile`	`removeTile(id: string) => Promise<boolean>`	Removes a tile and its element. Whether it was removed (`bmxDashboardRemove` can be cancelled).
`setLayout`	`setLayout(layout: BmxDashboardItem[] \| string) => Promise<void>`	Replaces the layout.

CSS shadow parts

Part	Description
`grid`	the area the tiles sit in.
`resize-handle`	the corner a tile is resized by.
`tile`	a tile.
`tile-body`	what a tile holds.
`tile-header`	a tile's title and buttons.

CSS custom properties

Property	Description
`--bmx-dashboard-accent`	The drop place and the resize corner.
`--bmx-dashboard-tile-background`	Behind a tile.
`--bmx-dashboard-tile-border`	A tile's edge.
`--bmx-dashboard-tile-padding`	The space inside a tile's body.
`--bmx-dashboard-tile-radius`	A tile's corners.
`--bmx-dashboard-tile-shadow`	A tile's shadow.

`<bmx-data-grid>`

Properties

Property	Attribute	Type	Default	Description
`allowPivot`	`allow-pivot`	`boolean`	`false`	A Pivot button in the toolbar, so the reader can pivot the rows themselves.
`appearance`	`appearance`	`BmxGridAppearance`	`'modern'`	The look: `modern`, `striped`, `bordered`, `minimal`, `glass` or `cards`.
`blockSize`	`block-size`	`number`	`100`	Rows fetched per request from `dataProvider`.
`cardBreakpoint`	`card-breakpoint`	`number`	`600`	The width in pixels below which `presentation="auto"` shows cards.
`cardFields`	`card-fields`	`string \| string[]`	—	The fields a card shows, separated by spaces; the first is the card's title. Default: the first six columns shown.
`checkboxes`	`checkboxes`	`boolean`	`false`	Show a checkbox column for choosing rows.
`columnMenu`	`column-menu`	`boolean`	`true`	Each heading's menu: sort, filter, group, pin, hide.
`columns`	`columns`	`BmxGridColumn[] \| string`	`[]`	The columns: `{ field, title?, type?, ... }`, or JSON in the attribute. Read from the data when empty.
`contextMenu`	`context-menu`	`boolean`	`true`	The menu on a right-click, Shift+F10 or the menu key over a cell.
`contextMenuItems`	property only	`BmxGridMenuItem[] \| ((context: BmxGridMenuContext) => BmxGridMenuItem[])`	—	Your own commands for that menu, after the grid's: a list of `{ id, label, icon?, disabled?, separator? }`, or a function of the cell and rows that returns one. The choice arrives as `bmxGridMenuAction`.
`dataProvider`	property only	`BmxGridDataProvider`	—	Rows from your server, a block at a time: called with `{ start, count, sort, filters, search, signal }`, answers `{ rows, total }`. The sort, filters and search are then the server's to apply. Set from script.
`density`	`density`	`BmxGridDensity`	`'standard'`	Row height: `compact`, `standard` or `comfortable`.
`detailGrid`	`detail-grid`	`BmxGridDetailGrid \| string`	—	A grid of a row's own rows in its panel: `{ field, columns, readonly? }`, or JSON.
`detailHeight`	`detail-height`	`number`	`260`	The height of a row's detail panel, in pixels.
`detailRenderer`	property only	`(row: BmxGridRow, container: HTMLElement) => string \| Node \| void`	—	Fills the panel under a row opened with its expander: return text or a node, or fill `container` yourself. Set from script.
`emptyText`	`empty-text`	`string`	—	What to say when there are no rows.
`enterMoves`	`enter-moves`	`'down' \| 'right' \| 'none'`	`'down'`	Where Enter goes after an edit: `down`, `right` or `none`.
`fileName`	`file-name`	`string`	`'data'`	The name exported files are saved under.
`fillHandle`	`fill-handle`	`boolean`	`true`	Drag the corner of the chosen cells to fill on down or across, as a spreadsheet does.
`filterRow`	`filter-row`	`boolean`	`false`	Show a row of filters under the headings.
`filters`	`filters`	`BmxGridFilter[] \| string`	`[]`	Column filters: `[{ field, op, value }]`, or JSON.
`flashChanges`	`flash-changes`	`boolean`	`true`	Flash cells that `updateRows` changes.
`footer`	`footer`	`boolean`	`true`	Show the totals row, when any column has an `aggregate`.
`formatRules`	`format-rules`	`BmxGridFormatRule[] \| string`	`[]`	Conditional formatting as data: `[{ field, when: { op, value }, style: { tone, bold } }]`, or JSON.
`formulaEngine`	`formula-engine`	`string`	—	A `bmx-formula-engine` (its id, or a selector) whose workbook holds the grid's sheet, so formulas on the page and in the grid can use each other: `=Rates!B2` here, `=SUM(Data[Amount])` there. Default: a workbook of the grid's own.
`frozenRows`	`frozen-rows`	`number`	`0`	Rows kept at the top whatever the scroll: the first this many lines.
`groupBy`	`group-by`	`string \| string[]`	`''`	Fields to group by, outermost first: `"region status"` or a list.
`groupPanel`	`group-panel`	`boolean`	`true`	Show the bar that headings are dragged to, to group by them.
`groupsExpanded`	`groups-expanded`	`boolean`	`true`	Groups start open.
`label`	`label`	`string`	—	The accessible name. Default: "Data".
`liveSrc`	`live-src`	`string`	—	A WebSocket (`ws:`, `wss:`) or server-sent events URL whose messages update rows.
`liveType`	`live-type`	`'auto' \| 'websocket' \| 'sse'`	`'auto'`	What `liveSrc` is. `auto` goes by the URL's scheme.
`loading`	`loading`	`boolean`	`false`	Show a loading bar. Set while your own data is on its way.
`locale`	`locale`	`string`	—	A BCP 47 locale for numbers, money and dates. Default: the page's `lang`, then the reader's.
`page`	`page`	`number`	`1`	The page on show, from 1.
`pageSize`	`page-size`	`number`	`50`	Rows on a page.
`pagination`	`pagination`	`boolean`	`false`	Show rows a page at a time, with a pager, instead of one long scroll.
`parentField`	`parent-field`	`string`	—	Tree data, flat: the field holding each row's parent's key (by `rowKey`).
`pinnedRows`	`pinned-rows`	`unknown[] \| string`	`[]`	Rows pinned at the top, by key: they stay in view as the rest scroll.
`pivot`	`pivot`	`BmxGridPivot \| string`	—	Pivot the rows: `{ rows: [...], columns: [...], values: [{ field, aggregate }] }`, or JSON. Empty for the rows as they are.
`presentation`	`presentation`	`'auto' \| 'table' \| 'cards'`	`'auto'`	`table`, `cards` (one card per row, for small screens), or `auto`: cards when the grid is narrower than `cardBreakpoint`.
`rangeSelection`	`range-selection`	`boolean`	`true`	Choose rectangles of cells with Shift and the mouse: to copy, paste over, clear and total.
`readonly`	`readonly`	`boolean`	`false`	Nothing can be edited, added or removed. The grid is editable by default.
`requestInit`	property only	`RequestInit`	—	Options for fetching `src`: headers, credentials.
`rowFilter`	property only	`(row: Record<string, unknown>) => boolean`	—	A test of the page's own that a row must pass to be shown, applied with the column filters and the search: a `bmx-query-builder`'s `toPredicate()`, or any function. Set from script. Not used when rows come from a server (`dataSource`), which applies its own conditions.
`rowKey`	`row-key`	`string`	`'id'`	The field that identifies a row, for selection, updates and changes. Rows without it are known by themselves.
`rowNumbers`	`row-numbers`	`boolean`	`false`	Show a column of row numbers.
`rowReorder`	`row-reorder`	`boolean`	`false`	Rows are moved by dragging their handle, or with Alt+Shift and the up and down arrows.
`rowSelection`	`row-selection`	`'none' \| 'single' \| 'multiple'`	`'multiple'`	How rows are chosen: `none`, `single` or `multiple`.
`rows`	`rows`	`BmxGridRow[] \| string`	`[]`	The rows: an array of objects, or JSON in the attribute. Edits are written into these objects.
`search`	`search`	`string`	`''`	The quick search: rows with every word, in any column.
`sheetName`	`sheet-name`	`string`	`'Data'`	The name of the grid's sheet in its workbook, and of the table its rows make (`Data[Amount]`).
`sort`	`sort`	`string \| BmxGridSort[]`	`''`	Sort keys: `"region total:desc"`, or `[{ field, direction }]`.
`spreadsheet`	`spreadsheet`	`boolean`	`false`	Spreadsheet mode: columns get letters and rows numbers, as on a worksheet - the titles are row 1, so the first row is row 2 - and any editable cell takes a formula typed with `=`: `=B2C2`, `=SUM(D2:D20)`, `=[@Price]1.2`. The row keeps the formula; the grid shows, sorts, filters, totals and exports its value, and the Excel export carries the formulas. Clicking cells while a formula is typed puts references in, each outlined in its colour. A `bmx-formula-bar` given the grid as its `engine` edits the active cell.
`src`	`src`	`string`	—	A URL to load the rows from: JSON, JSON lines, CSV or TSV.
`stateKey`	`state-key`	`string`	—	A name to keep the reader's view under in this browser: sort, filters, columns, grouping.
`statusBar`	`status-bar`	`boolean`	`true`	Show the counts, the changes and the totals of the chosen cells under the grid.
`timeZone`	`time-zone`	`string`	—	An IANA zone for times, or `utc`. Default: the reader's.
`toolbar`	`toolbar`	`boolean`	`true`	Show the toolbar: search, columns, grouping, export, undo.
`treeColumn`	`tree-column`	`string`	—	The column that shows the tree's branches. Default: the first column of data.
`treeExpanded`	`tree-expanded`	`boolean`	`false`	Tree rows start open.
`treeField`	`tree-field`	`string`	—	Tree data, nested: the field holding each row's children.

Events

Event	Detail	Description
`bmxGridActiveCellChange`	`BmxGridActiveCellDetail`	The active cell moved.
`bmxGridCellAction`	`BmxGridCellActionDetail`	A cell's button was pressed.
`bmxGridCellChange`	`BmxGridCellChangeDetail`	A cell is about to change: by an edit, a paste, a clear, undo or redo. Cancelable.
`bmxGridCellPress`	`BmxGridCellPressDetail`	Spreadsheet mode: a cell was pressed, or dragged on from. Cancel it to take the press - a formula bar does, to put references in its formula.
`bmxGridColumnChange`	`BmxGridColumnChangeDetail`	Columns were resized, moved, pinned, hidden or shown.
`bmxGridConnection`	`BmxGridConnectionDetail`	The live connection opened, dropped, is being tried again, or closed.
`bmxGridContextMenu`	`BmxGridMenuContext`	The context menu is about to open. Cancel to show your own instead.
`bmxGridDataChange`	`BmxGridDataChangeDetail`	The data changed. One event per gesture: a paste of a hundred cells is one.
`bmxGridDetailEvent`	`BmxGridDetailEventDetail`	Something happened in a detail panel's grid: its event, carried out.
`bmxGridDetailToggle`	`BmxGridDetailToggleDetail`	A row's detail panel opened or closed.
`bmxGridEditStart`	`BmxGridEditStartDetail`	An edit is about to start. Cancelable.
`bmxGridFilterChange`	`BmxGridFilterChangeDetail`	The filters or the search changed.
`bmxGridGroupChange`	`BmxGridGroupChangeDetail`	The grouping changed.
`bmxGridLoad`	`BmxGridLoadDetail`	Rows arrived from `src`, a file or the provider, or loading failed.
`bmxGridMenuAction`	`BmxGridMenuActionDetail`	A command of your own was chosen from the context menu.
`bmxGridPageChange`	`BmxGridPageChangeDetail`	The page on show changed.
`bmxGridPivotChange`	`BmxGridPivotChangeDetail`	The pivot changed.
`bmxGridRowActivate`	`BmxGridRowActivateDetail`	A row was opened.
`bmxGridRowMove`	`BmxGridRowMoveDetail`	A row is about to move. Cancelable.
`bmxGridRowsRemove`	`BmxGridRowsRemoveDetail`	Rows are about to be removed. Cancelable.
`bmxGridSelectionChange`	`BmxGridSelectionChangeDetail`	The chosen rows changed.
`bmxGridSortChange`	`BmxGridSortChangeDetail`	The sort changed.
`bmxGridStateChange`	`BmxGridStateChangeDetail`	The view changed: sort, filters, search, columns, grouping.
`bmxGridTreeToggle`	`BmxGridTreeToggleDetail`	A tree row opened or closed.

Methods

Method	Signature	Description
`acceptChanges`	`acceptChanges(options?: { clearHistory?: boolean; }) => Promise<void>`	Treats the data as it is now as saved: nothing counts as changed any more. Undo and redo still work across the save, and whatever they change is then reported by `getChanges` for saving again; `clearHistory` forgets them as well.
`addRow`	`addRow(row?: BmxGridRow, index?: number, edit?: boolean) => Promise<BmxGridRow \| null>`	Adds a row (an empty one by default) at a position among all rows, and returns it. With `edit`, it is scrolled to and its first editable cell opened.
`applyLiveMessage`	`applyLiveMessage(message: unknown) => Promise<void>`	Applies one message as if it had come from `liveSrc`: for a feed of your own (SignalR, socket.io, a worker) in the same shape - an array of rows, or `{ op: 'upsert' \| 'remove' \| 'replace', rows \| row \| keys }` - as an object or its JSON text.
`autosizeColumns`	`autosizeColumns(fields?: readonly string[]) => Promise<void>`	Fits columns to their contents: these fields, or all.
`clearFilters`	`clearFilters() => Promise<void>`	Clears every filter and the search.
`clearSelection`	`clearSelection() => Promise<void>`	Chooses no rows.
`collapseAll`	`collapseAll() => Promise<void>`	Closes every group, or every tree row.
`connectLive`	`connectLive(url?: string, type?: "auto" \| "websocket" \| "sse") => Promise<void>`	Connects to a live source (default `liveSrc`) whose messages update rows.
`disconnectLive`	`disconnectLive() => Promise<void>`	Closes the live connection.
`download`	`download(format?: BmxGridExportFormat, options?: BmxGridExportOptions) => Promise<void>`	Exports and saves the file, named by `fileName`.
`editCell`	`editCell(rowOrKey: BmxGridRow \| unknown, field: string) => Promise<boolean>`	Starts editing a cell. False when it cannot be edited.
`expandAll`	`expandAll() => Promise<void>`	Opens every group, or every tree row.
`exportData`	`exportData(format?: BmxGridExportFormat, options?: BmxGridExportOptions) => Promise<Blob>`	The rows on show as a file: `xlsx`, `csv`, `tsv` or `json`.
`getCellAddress`	`getCellAddress(rowOrKey?: BmxGridRow \| unknown, field?: string) => Promise<string \| null>`	A cell's sheet address (`Data!B3`), or the active cell's when no row is given. Null without formulas.
`getChanges`	`getChanges() => Promise<BmxGridChanges>`	What was added, changed and removed since the rows were loaded or the changes last accepted.
`getFormulaWorkbook`	`getFormulaWorkbook() => Promise<BmxFormulaWorkbook \| null>`	The formula workbook the grid's sheet is on, while it has formulas (spreadsheet mode or formula columns): the grid's own, or the `formulaEngine`'s. Null otherwise.
`getPrintHtml`	`getPrintHtml() => Promise<string>`	The printable document `print()` uses, as HTML: for a print preview of your own, or a PDF made on a server.
`getRows`	`getRows() => Promise<BmxGridRow[]>`	Every row, in the order given.
`getSelectedRows`	`getSelectedRows() => Promise<BmxGridRow[]>`	The chosen rows.
`getShownRows`	`getShownRows() => Promise<BmxGridRow[]>`	The rows kept by the filters and search, in the order shown.
`getState`	`getState() => Promise<BmxGridState>`	Everything the reader has changed about the view, to save and give back to `setState`.
`goToCell`	`goToCell(address: string) => Promise<boolean>`	Moves the active cell to a sheet address (`B3`, `Data!B3`) and shows it. False when the row is filtered out or the column hidden.
`goToPage`	`goToPage(page: number) => Promise<void>`	Shows a page, from 1, when `pagination` is on.
`load`	`load(source: string \| URL \| Blob) => Promise<void>`	Loads rows from a URL, a File or Blob (a chosen or dropped file), or text: JSON, JSON lines, CSV or TSV. Replaces the rows; columns are read from the data when none were given.
`moveRow`	`moveRow(rowOrKey: BmxGridRow \| unknown, before: BmxGridRow \| unknown \| null) => Promise<boolean>`	Moves a row to before another (objects or keys), or to the end with null, as dragging its handle does. False when rows cannot move now.
`openFile`	`openFile() => Promise<void>`	Opens the browser's file picker to load a CSV, TSV or JSON file.
`pinColumn`	`pinColumn(field: string, side: "start" \| "end" \| null) => Promise<void>`	Pins a column to the start or end, or unpins it with null.
`print`	`print() => Promise<void>`	Opens the print dialog for the rows on show: the columns shown, every row the filters keep, groups open, headings on every page.
`redo`	`redo() => Promise<boolean>`	Does again what was undone.
`refresh`	`refresh() => Promise<void>`	Runs the sort, filters and grouping again: after changing rows in place. For a server source, asks again.
`removeRows`	`removeRows(rows: readonly (BmxGridRow \| unknown)[]) => Promise<number>`	Removes rows, by the row objects or their keys. Returns how many went.
`revertChanges`	`revertChanges() => Promise<void>`	Puts back every change since the rows were loaded or the changes last accepted.
`scrollToRow`	`scrollToRow(rowOrKey: BmxGridRow \| unknown, field?: string) => Promise<boolean>`	Scrolls to a row (the object, its key, or its position among the rows on show) and makes it active.
`selectAll`	`selectAll() => Promise<void>`	Chooses every row the filters keep.
`selectRows`	`selectRows(rows: readonly (BmxGridRow \| unknown)[], add?: boolean) => Promise<void>`	Chooses rows, by the row objects or their keys; `add` keeps those already chosen.
`setCellText`	`setCellText(address: string, text: string) => Promise<boolean>`	Sets a cell, given by its sheet address, from text as a reader types it: read and checked as the cell's editor would, kept for undo and reported by the usual events. In spreadsheet mode, `=` starts a formula. False when the text is refused or there is no such editable cell.
`setCellValue`	`setCellValue(rowOrKey: BmxGridRow \| unknown, field: string, value: unknown) => Promise<boolean>`	Sets one cell, as an edit would: validated, cancelable, undoable. False when refused.
`setColumnHidden`	`setColumnHidden(field: string, hidden: boolean) => Promise<void>`	Shows or hides a column.
`setColumnWidth`	`setColumnWidth(field: string, width: number) => Promise<void>`	Sets a column's width in pixels, as dragging its edge does.
`setFilter`	`setFilter(field: string, filter: Omit<BmxGridFilter, "field"> \| null) => Promise<void>`	Sets a column's filter, or clears it with null.
`setFocus`	`setFocus() => Promise<void>`	Moves focus into the grid.
`setGroupBy`	`setGroupBy(fields: readonly string[]) => Promise<void>`	Groups by these fields, outermost first; an empty list stops grouping.
`setPivot`	`setPivot(pivot: BmxGridPivot \| null) => Promise<void>`	Pivots the rows, or shows them as they are with null.
`setState`	`setState(state: BmxGridState \| string) => Promise<boolean>`	Restores a view saved by `getState` (an object or its JSON). False when it could not be read.
`showReferences`	`showReferences(references?: readonly BmxGridReference[]) => Promise<void>`	Outlines references in spreadsheet mode, each in its colour - what a formula bar editing the grid's cells shows. An empty list clears them.
`sortBy`	`sortBy(field: string, direction?: "asc" \| "desc" \| null, add?: boolean) => Promise<void>`	Sorts by a column: `asc`, `desc`, or null to stop. `add` keeps the other sort keys.
`stopEdit`	`stopEdit(cancel?: boolean) => Promise<void>`	Closes the editor: commits the value, or with `cancel` keeps the old one.
`toggleDetail`	`toggleDetail(rowOrKey: BmxGridRow \| unknown, open?: boolean) => Promise<boolean>`	Shows or hides a row's detail panel; toggles without `open`.
`toggleRow`	`toggleRow(rowOrKey: BmxGridRow \| unknown, open?: boolean) => Promise<boolean>`	Opens or closes a tree row (the object or its key); toggles without `open`. False when it has no rows inside.
`undo`	`undo() => Promise<boolean>`	Undoes the last change. False when there is nothing to undo.
`updateRows`	`updateRows(rows: readonly BmxGridRow[]) => Promise<{ updated: number; added: number; }>`	Updates rows from newer copies, matched by `rowKey`: changed values are written in and flash (green up, red down for numbers). Rows with a new key are added at the end. For live data - prices, statuses, counters.

Slots

Slot	Description
`(default)`	a `<table>` to read the columns and rows from.
`empty`	what to show when there are no rows.
`toolbar-end`	your own controls at the end of the toolbar.
`toolbar-start`	your own controls at the start of the toolbar.

CSS shadow parts

Part	Description
`clear-filters`
`context-menu`
`edit-error`
`empty`
`error`
`frame`
`grid`
`group-chip`
`group-panel`
`live-badge`
`loading`
`menu`
`menu-item`
`pager`
`pager-button`
`pager-size`
`pivot-panel`
`search`
`search-input`
`status`
`tool-button`
`toolbar`

CSS custom properties

Property	Description
`--bmx-data-grid-active`	The ring around the active cell.
`--bmx-data-grid-background`	Behind the rows.
`--bmx-data-grid-card-background`	A card, when rows are shown as cards. @part toolbar - the bar of tools above the grid. @part tool-button - a tool. @part search - the quick search. @part search-input - its field. @part group-panel - the bar headings are dragged to, to group by them. @part group-chip - a field the rows are grouped by. @part frame - the box around the grid. @part grid - the scrolling grid. @part header-row - the headings. @part header-band-row - the row of bands over grouped headings. @part header-band - one band. @part header-cell - one heading. @part header-menu - a heading's menu button. @part resizer - the edge dragged to resize a column. @part filter-row - the row of filters under the headings. @part filter-input - one filter. @part filter-button - a filter by a list of values. @part cell - a cell. Also `cell-<type>` (`cell-currency`, `cell-status`), `cell-active`, `cell-dirty` and `cell-<tone>` from `cellTone`. @part group-row - a group's heading. @part group-count - the number of rows in a group. @part footer-row - the totals. @part footer-cell - one total. @part badge - a status, badge, priority or choice. Also `badge-<tone>`. @part chip - a tag. @part bar - a progress bar, meter or data bar. @part rating - the stars. @part avatar - a person's picture or initials. @part image - a picture. @part swatch - a colour. @part timeline - a timespan's track. @part link - a link. @part checkbox - a checkbox. @part switch - a switch. @part cell-button - a cell's button. @part action - a row action. @part match - a search match. @part editor - the field a cell is edited in. @part edit-error - why an edit was refused. @part menu - a pop-up: a column's menu, the columns, export, row height, the context menu, the pivot panel. @part context-menu - the menu on a right-click over a cell. @part pivot-panel - the panel that pivots the rows. @part detail - a row's detail panel. @part card - a row shown as a card. @part fill-handle - the square at the corner of the chosen cells, dragged to fill. @part row-drop - where a dragged row would land. @part pager - the page controls. @part pager-button - one of them. @part pager-size - the rows-per-page choice. @part live-badge - the state of the live connection. @part menu-item - one of its commands. @part status - the counts under the grid. @part clear-filters - the button that clears every filter. @part empty - what is shown when there are no rows. @part error - what is shown when the rows could not be loaded. @part loading - the loading bar. @part column-letter - a column's letter in spreadsheet mode.
`--bmx-data-grid-cell-padding`	Space either side of a cell's content.
`--bmx-data-grid-detail-background`	Around a row's detail panel.
`--bmx-data-grid-font-size`	The cells' text size.
`--bmx-data-grid-footer-background`	The totals row.
`--bmx-data-grid-group-background`	A group's heading row.
`--bmx-data-grid-header-background`	Behind the headings.
`--bmx-data-grid-header-height`	The headings' height.
`--bmx-data-grid-header-text`	The headings' text.
`--bmx-data-grid-height`	How tall the grid is, toolbar and status included.
`--bmx-data-grid-line`	The lines between rows and columns.
`--bmx-data-grid-pinned-background`	A row pinned to the top.
`--bmx-data-grid-radius`	The corners of the grid.
`--bmx-data-grid-range`	The chosen cells.
`--bmx-data-grid-row-alternate`	Every other row, in the striped look.
`--bmx-data-grid-row-background`	A row.
`--bmx-data-grid-row-height`	Each row's height. Set it to override the density.
`--bmx-data-grid-row-hover`	A row under the pointer.
`--bmx-data-grid-row-selected`	A chosen row.
`--bmx-data-grid-scrollbar-thumb`	The scrollbars' thumbs.
`--bmx-data-grid-scrollbar-track`	The scrollbars' tracks.
`--bmx-data-grid-tree-indent`	How far each level of a tree is indented.

`<bmx-data-importer>`

Properties

Property	Attribute	Type	Default	Description
`accept`	`accept`	`string`	`'.csv,.tsv,.txt,.xlsx,.json,text/csv,text/plain,application/json,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'`	The file types offered by the file picker.
`allowSkip`	`allow-skip`	`boolean`	`true`	May the reader import while rows still have problems, leaving those rows out.
`dateOrder`	`date-order`	`'auto' \| BmxImportDateOrder`	`'auto'`	How dates written with numbers are read: `auto` decides per column from its values, then the locale.
`fields`	`fields`	`BmxImportField[] \| string`	`[]`	The fields the page wants, as objects or JSON. Empty: every column is a field, named by its heading.
`importHandler`	property only	`BmxImportHandler`	—	The page's own import, awaited before `bmxImportComplete`.
`label`	`label`	`string`	—	The importer's accessible name. Default: "Import data".
`locale`	`locale`	`string`	—	The locale for detecting date order. Default: the page's.
`maxFileSize`	`max-file-size`	`number`	`50 * 1024 * 1024`	The largest file read, in bytes. Default 50 MB.
`maxRows`	`max-rows`	`number`	`1000000`	The most rows read. Default 1,000,000.
`strings`	`strings`	`Partial<BmxDataImporterStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.

Events

Event	Detail	Description
`bmxImportComplete`	`BmxImportCompleteDetail`	Fired when the rows have been imported.
`bmxImportError`	`BmxImportErrorDetail`	Fired when a file cannot be read or the import fails.
`bmxImportFile`	`BmxImportFileDetail`	Fired before a file is read. Cancel it to refuse the file.

Methods

Method	Signature	Description
`getProblems`	`getProblems() => Promise<{ line: number; field: string; message: string; }[]>`	The problems as they stand in review.
`getRows`	`getRows() => Promise<Record<string, unknown>[]>`	The rows as they stand in review, as records.
`loadFile`	`loadFile(file: Blob, name?: string) => Promise<boolean>`	Reads a file, as if dropped. Resolves whether it was read.
`loadRows`	`loadRows(rows: unknown[], name?: string) => Promise<boolean>`	Takes rows already in hand: an array of records, or of arrays (the first may be the heading row).
`loadText`	`loadText(text: string, name?: string) => Promise<boolean>`	Reads text: CSV, TSV or JSON. Resolves whether it was read.
`reset`	`reset() => Promise<void>`	Back to the start, forgetting the file.

CSS shadow parts

Part	Description
`cell`	A review cell; also `cell-problem`.
`done`	The finished message.
`drop`	The drop area.
`footer`	The row of Back and the next action.
`grid`	The review grid.
`mapping`	The table matching fields to columns.
`steps`	The list of steps.
`summary`	The counts above the review grid.

CSS custom properties

Property	Description
`--bmx-data-importer-cell-width`	The width of each field's column in review.
`--bmx-data-importer-height`	The height of the review grid.
`--bmx-data-importer-line-width`	The width of the row-number column in review.
`--bmx-data-importer-problem`	The colour that marks a problem.

`<bmx-data-mapper>`

Properties

Property	Attribute	Type	Default	Description
`autoMapThreshold`	`auto-map-threshold`	`number`	`0.6`	How alike names must be (0 to 1) for auto-map to match them.
`hideLabel`	`hide-label`	`boolean`	`false`	Hide the label visually while keeping it as the accessible name.
`label`	`label`	`string`	—	The name of the element for assistive technology, and its visible label.
`map`	`map`	`BmxDataMap \| string`	`{ source: { fields: [] }, target: { fields: [] }, mappings: [] }`	The map: source and target shapes, mappings, list mappings and lookup tables (object or JSON). Two-way.
`readonly`	`readonly`	`boolean`	`false`	Show the map without letting it change.
`sample`	property only	`unknown`	—	Sample source data for the preview: one record, or an array of records (or JSON).
`strings`	`strings`	`Partial<BmxDataMapperStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.

Events

Event	Detail	Description
`bmxChange`	`BmxDataMapperChangeDetail`	Fired after the map changes.
`bmxSelect`	`{ readonly target: string; readonly mapping?: BmxMapperMapping \| undefined; }`	Fired when a target field is selected.

Methods

Method	Signature	Description
`autoMap`	`autoMap() => Promise<BmxMapperSuggestion[]>`	Maps unmapped target fields by name. Returns what was added.
`check`	`check() => Promise<BmxMapperProblem[]>`	The map's problems.
`getMap`	`getMap() => Promise<BmxDataMap>`	The map as it is now.
`redo`	`redo() => Promise<boolean>`
`run`	`run(record?: unknown) => Promise<BmxMapperResult>`	Runs the map over one record (default: the current sample record).
`runAll`	`runAll(records?: unknown[]) => Promise<{ output: Record<string, unknown>[]; issues: BmxMapperIssue[]; }>`	Runs the map over many records (default: the whole sample).
`selectTarget`	`selectTarget(path: string) => Promise<boolean>`	Selects a target field and shows its mapping.
`setMap`	`setMap(map: BmxDataMap \| string, options?: { keepHistory?: boolean; }) => Promise<void>`	Replaces the map. `keepHistory` lets the reader undo back to the previous one.
`setSourceFromSample`	`setSourceFromSample(sample: unknown) => Promise<void>`	Sets the source fields from sample data (one record or several), keeping mappings that still fit.
`setSourceFromSchema`	`setSourceFromSchema(schema: unknown) => Promise<void>`	Sets the source fields from a JSON Schema.
`setTargetFromSample`	`setTargetFromSample(sample: unknown) => Promise<void>`	Sets the target fields from sample data.
`setTargetFromSchema`	`setTargetFromSchema(schema: unknown) => Promise<void>`	Sets the target fields from a JSON Schema.
`undo`	`undo() => Promise<boolean>`

Slots

Slot	Description
`label`	Rich label content, in place of the `label` property.

CSS shadow parts

Part	Description
`inspector`	The tabs under the fields.
`label`	The label.
`row`	A field row; also `row-selected`, `row-mapped`, `row-problem`, `row-picked`.
`source`	The source fields' panel.
`target`	The target fields' panel.
`toolbar`	The bar above the fields.
`wires`	The connector lines.

CSS custom properties

Property	Description
`--bmx-data-mapper-gutter`	The space between the trees where the lines run.
`--bmx-data-mapper-height`	The height of the field trees.
`--bmx-data-mapper-indent`	How far each level is indented.
`--bmx-data-mapper-radius`	Corner radius of the frame.
`--bmx-data-mapper-row-height`	One field row.
`--bmx-data-mapper-wire`	A mapping's line.
`--bmx-data-mapper-wire-array`	A list-to-list line.
`--bmx-data-mapper-wire-formula`	A line into a formula.

`<bmx-data-profiler>`

Properties

Property	Attribute	Type	Default	Description
`baseline`	property only	`unknown`	—	An earlier extract to compare with, in any of the same forms. Mutable: a file opened with "Compare with…" sets it.
`column`	`column`	`string`	—	The column showing in the Columns view. Mutable.
`data`	property only	`unknown`	—	The data: CSV or TSV text, JSON text, an array of records or of arrays, or `{ columns, rows }`.
`label`	`label`	`string`	—	The profiler's accessible name.
`name`	`name`	`string`	—	The dataset's name, shown at the top and used for exported files.
`noFiles`	`no-files`	`boolean`	`false`	Hide the file buttons (the page gives the data).
`options`	property only	`BmxProfileOptions`	—	Profiling options: thresholds, the date order, the sample for correlations.
`rules`	`rules`	`readonly BmxProfileRule[] \| Record<string, unknown> \| string`	—	The rules to check: an array, `{ rules }` or JSON. Mutable: edits replace it.
`strings`	`strings`	`Partial<BmxDataProfilerStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`view`	`view`	`BmxDataProfilerView`	`'overview'`	The view showing. Mutable.

Events

Event	Detail	Description
`bmxColumnSelect`	`{ readonly column: string; }`	Fired when the Columns view shows another column.
`bmxDrift`	`BmxDataProfilerDriftDetail`	Fired when the data is compared with the baseline.
`bmxError`	`{ readonly message: string; }`	Fired when data or a file cannot be read.
`bmxExport`	`BmxDataProfilerExportDetail`	Fired when an export is made from the Export menu. Cancel it to keep it from downloading.
`bmxProfile`	`BmxDataProfilerProfileDetail`	Fired when a profile is made.
`bmxRulesChange`	`BmxDataProfilerRulesChangeDetail`	Fired when the rules are edited, with all of them.
`bmxRulesRun`	`BmxDataProfilerRulesDetail`	Fired when the rules are checked.

Methods

Method	Signature	Description
`exportReport`	`exportReport() => Promise<string>`	The report as one HTML page (with the rules and the drift, when there are any).
`getDrift`	`getDrift() => Promise<BmxProfileDrift \| undefined>`	The latest comparison with the baseline.
`getProfile`	`getProfile() => Promise<BmxProfile \| undefined>`	The latest profile.
`getRuleRun`	`getRuleRun() => Promise<BmxProfileRuleRun \| undefined>`	The latest rules check.
`loadFile`	`loadFile(file: Blob & { name?: string; }, as?: "data" \| "baseline") => Promise<void>`	Reads a file (CSV, TSV, TXT, JSON or XLSX) as the data, or as the baseline.
`refresh`	`refresh() => Promise<void>`	Profiles the data again.
`showColumn`	`showColumn(name: string) => Promise<void>`	Shows a column in the Columns view.
`suggest`	`suggest(apply?: boolean) => Promise<BmxProfileRule[]>`	Rules the data meets now, from its profile. They replace the rules when `apply` is true.

CSS shadow parts

Part	Description
`header`	The title and the tools.
`panel`	The view showing.
`tabs`	The views.

CSS custom properties

Property	Description
`--bmx-data-profiler-bar`	Bars of the charts.
`--bmx-data-profiler-baseline`	Baseline bars in the drift view.
`--bmx-data-profiler-height`	The profiler's height; the view scrolls inside it. Default: auto (as tall as its content).
`--bmx-data-profiler-negative`	Negative correlations in the heatmap.
`--bmx-data-profiler-positive`	Positive correlations in the heatmap.
`--bmx-data-profiler-radius`	Corner radius of the profiler.

`<bmx-date-picker>`

Properties

Property	Attribute	Type	Default	Description
`appearance`	`appearance`	`BmxDatePickerAppearance`	`'outline'`	Visual treatment.
`autoFocus`	`auto-focus`	`boolean`	`false`	Focus the field once it has rendered.
`description`	`description`	`string`	—	Help text below the field.
`disabled`	`disabled`	`boolean`	`false`	Disable the field.
`disabledDates`	`disabled-dates`	`string[] \| string`	`[]`	Individual dates that cannot be chosen, as `YYYY-MM-DD`. Accepts a comma-separated or JSON string as well - a bank-holiday list written by a server-side template is the case this exists for. See the note on `disabledDaysOfWeek` for why the type says `\| string`.
`disabledDaysOfWeek`	`disabled-days-of-week`	`number[] \| string`	`[]`	Days of the week that can never be chosen. Sunday is 0. Accepts a comma-separated or JSON string as well. The `\| string` in the type is not decoration: without it Stencil observes this prop under its own camelCase name, which the HTML parser lowercases, so `disabled-days-of-week` would not exist as an attribute at all. See `src/core/markup.ts`.
`errorText`	`error-text`	`string`	—	An error supplied by the consumer.
`firstDayOfWeek`	`first-day-of-week`	`number`	—	Override the first day of the week. Sunday is 0.
`fullWidth`	`full-width`	`boolean`	`false`	Stretch to the width of the container.
`hideLabel`	`hide-label`	`boolean`	`false`	Hide the label visually while keeping it as the accessible name.
`isDateUnavailable`	property only	`(iso: string) => boolean`	—	A consumer's own rule, asked after the others.
`label`	`label`	`string`	—	The field's label. Required unless the `label` slot is used.
`locale`	`locale`	`string`	—	The locale to write dates in. Defaults to the document's.
`max`	`max`	`string`	—	The latest date that may be chosen, as `YYYY-MM-DD`.
`messages`	property only	`BmxFieldMessages`	—	Replacements for the default wording, by reason. Accepts the JSON spelling of the object as well, for templates that can only write attributes. See `src/core/markup.ts`.
`min`	`min`	`string`	—	The earliest date that may be chosen, as `YYYY-MM-DD`.
`name`	`name`	`string`	—	The field's name in the form it belongs to.
`placement`	`placement`	`BmxPlacement`	`'bottom-start'`	Which side the calendar opens on when there is room.
`presets`	property only	`BmxDatePreset[]`	`[]`	Named shortcuts, shown beside the calendar. Accepts the JSON spelling of the list as well, because an attribute is the only channel some templates have. See `src/core/markup.ts`.
`range`	`range`	`boolean`	`false`	Choose two dates rather than one.
`readonly`	`readonly`	`boolean`	`false`	Make the field read-only. It still submits and is still focusable.
`required`	`required`	`boolean`	`false`	Require a date before the form will submit.
`shape`	`shape`	`BmxShape`	`'rounded'`	Corner treatment.
`size`	`size`	`BmxSize`	`'md'`	Size step.
`tone`	`tone`	`BmxTone`	`'primary'`	Semantic colour role.
`validateOn`	`validate-on`	`BmxValidateOn`	`'blur'`	When the field is willing to reveal a problem.
`value`	`value`	`string \| null`	`null`	The chosen date as `YYYY-MM-DD`. Two-way: the component writes back to it.
`values`	property only	`string[]`	`[]`	Both ends in `range` mode, as `YYYY-MM-DD`. Two-way. Accepts a comma-separated or JSON string as well, because an attribute is the only channel some templates have. See `src/core/markup.ts`.
`withTime`	`with-time`	`boolean`	`false`	Add a time field under the calendar. The value becomes `YYYY-MM-DDTHH:mm`.

Events

Event	Detail	Description
`bmxChange`	`BmxDatePickerChangeDetail`	Fired when the chosen date changes.
`bmxOpenChange`	`boolean`	Fired when the calendar opens or closes.
`bmxValidityChange`	`BmxDatePickerValidityDetail`	Fired whenever the resolved validity changes.

Methods

Method	Signature	Description
`checkValidity`	`checkValidity() => Promise<boolean>`	Validate now and return whether the field passed, without revealing anything.
`clear`	`clear() => Promise<void>`	Empty the selection.
`closeCalendar`	`closeCalendar() => Promise<void>`	Close the calendar.
`openCalendar`	`openCalendar() => Promise<void>`	Open the calendar.
`removeFocus`	`removeFocus() => Promise<void>`	Remove focus from the field.
`reportValidity`	`reportValidity() => Promise<boolean>`	Validate, reveal any problem, and focus the field if it has one.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focus the field.

Slots

Slot	Description
`(default)`	The default slot
`description`	Rich help text, in place of the `description` property.
`label`	Rich label content, in place of the `label` property.

CSS shadow parts

Part	Description
`calendar`	The floating surface.
`control`	The text input carrying `role="combobox"`.
`day`	One day cell.
`description`	The help text.
`error`	The error message.
`field`	The bordered box.
`grid`	The `role="grid"` of days.
`header`	The month name and the paging buttons.
`label`	The label element.
`preset`	One named shortcut.
`time`	The time field, with `with-time`.
`trigger`	The button that opens the calendar.

CSS custom properties

Property	Description
`--bmx-date-background`	The field's background. Set by `appearance`.
`--bmx-date-border-color`	The field's border colour at rest.
`--bmx-date-border-width`	Border width of the field.
`--bmx-date-calendar-background`	The floating calendar's background.
`--bmx-date-calendar-shadow`	The calendar's shadow.
`--bmx-date-cell-radius`	Corner radius of a day.
`--bmx-date-cell-size`	The width and height of one day.
`--bmx-date-font-size`	The typed date's font size.
`--bmx-date-height`	The field's height.
`--bmx-date-label-font-size`	The label's font size.
`--bmx-date-padding-inline`	Horizontal padding inside the field.
`--bmx-date-radius`	Corner radius of the field and the calendar.
`--bmx-date-range-background`	The days between the two ends of a range.
`--bmx-date-selected-background`	A chosen day. Defaults to the tone's solid colour.
`--bmx-date-support-font-size`	Font size of the description and error message.
`--bmx-date-today-color`	The marker under today's date.

`<bmx-decision-table>`

Properties

Property	Attribute	Type	Default	Description
`label`	`label`	`string`	—	The table's accessible name. Default: its name, or "Decision table".
`panel`	`panel`	`BmxDecisionTablePanel`	`'try'`	The panel shown under the grid, or `none` to hide the panels.
`readonly`	`readonly`	`boolean`	`false`	Shows the rules without letting them be changed. Try it, Check and Tests still work.
`strings`	`strings`	`Partial<BmxDecisionTableStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`table`	`table`	`BmxDecisionTableData \| string`	`{ inputs: [], outputs: [], rules: [] }`	The decision table, as an object or JSON.

Events

Event	Detail	Description
`bmxDecisionChange`	`BmxDecisionChangeDetail`	Fired after every change, with the whole table.
`bmxDecisionEvaluate`	`BmxDecisionEvaluateDetail`	Fired when Try it works the table out.

Methods

Method	Signature	Description
`check`	`check() => Promise<{ problems: BmxDecisionProblem[]; analysis: BmxDecisionAnalysis; }>`	Problems with the cells, and the gaps, overlaps and rules that never fire.
`evaluate`	`evaluate(context: Record<string, unknown>, options?: BmxDecisionEvaluateOptions) => Promise<BmxDecisionResult>`	Works the table out for a context: values by input key, and whatever else formulas read.
`evaluateMany`	`evaluateMany(contexts: Record<string, unknown>[]) => Promise<BmxDecisionResult[]>`	Works the table out for many contexts at once.
`explain`	`explain(context: Record<string, unknown>) => Promise<string[]>`	Why the table answers what it does for a context, in sentences.
`exportDmn`	`exportDmn() => Promise<string>`	The table as DMN 1.3 XML.
`getTable`	`getTable() => Promise<BmxDecisionTableData>`	The table as it stands.
`importDmn`	`importDmn(xml: string) => Promise<string[]>`	Reads a DMN file's first decision table into the element. Resolves with what could not be carried across.
`redo`	`redo() => Promise<boolean>`	Redoes the last undone change.
`runTests`	`runTests() => Promise<BmxDecisionTestResult[]>`	Runs the table's test cases.
`tryValuesOf`	`tryValuesOf(context: Record<string, unknown>) => Promise<BmxDecisionResult>`	Fills Try it with values and shows the answer.
`undo`	`undo() => Promise<boolean>`	Undoes the last change. Resolves whether there was one.

CSS shadow parts

Part	Description
`cell`	A rule's cell; also `cell-problem`.
`dialog`	The column editor.
`grid`	The rules grid.
`panels`	The Try it, Check and Tests area.
`toolbar`	The row of name, hit policy and actions.

CSS custom properties

Property	Description
`--bmx-decision-table-cell-width`	The narrowest a rule cell is drawn.
`--bmx-decision-table-fired`	The colour that marks the rule that fired.
`--bmx-decision-table-input`	The tint of the input columns' headings.
`--bmx-decision-table-max-height`	The tallest the rules grid grows before it scrolls.
`--bmx-decision-table-output`	The tint of the output columns' headings.
`--bmx-decision-table-problem`	The colour that marks a problem.

`<bmx-diagram>`

Properties

Property	Attribute	Type	Default	Description
`connector`	`connector`	`BmxDiagramRoute`	`'orthogonal'`	How new connectors are drawn.
`diagram`	`diagram`	`Partial<BmxDiagramData> \| string`	—	The diagram: nodes, edges and lanes. JSON in markup. Kept up to date as it is edited.
`grid`	`grid`	`number`	`20`	The grid spacing; 0 hides it.
`label`	`label`	`string`	—	What the diagram is, for screen readers.
`mermaid`	`mermaid`	`string`	—	A Mermaid flowchart to start from, when `diagram` is empty.
`readonly`	`readonly`	`boolean`	`false`	Show the diagram to read, pan and zoom, without editing.
`shapes`	`shapes`	`readonly BmxDiagramShapeCategory[] \| string`	`['flowchart', 'basic', 'bpmn', 'network']`	The shape groups in the palette, in order: any of flowchart, basic, bpmn, network.
`snap`	`snap`	`boolean`	`true`	Shapes snap to the grid as they move.
`strings`	`strings`	`Partial<BmxDiagramStrings> \| string`	—	Words the designer shows or says: any of `BmxDiagramStrings`. JSON in markup.
`toolbar`	`toolbar`	`boolean`	`true`	Show the command bar.
`validateConnection`	property only	`BmxDiagramConnectionCheck`	—	Decides whether two nodes may be connected.

Events

Event	Detail	Description
`bmxDiagramChange`	`BmxDiagramChangeDetail`	The diagram changed. `ops` turn the previous diagram into this one.
`bmxDiagramNodeClick`	`BmxDiagramNodeDetail`	A shape was opened: clicked in a read-only diagram, or Enter on it.
`bmxDiagramSelect`	`BmxDiagramSelectDetail`	The selection changed.

Methods

Method	Signature	Description
`addEdge`	`addEdge(edge: Partial<BmxDiagramEdge> & { from: BmxDiagramEnd \| string; to: BmxDiagramEnd \| string; }) => Promise<string \| null>`	Connects two nodes. Resolves with the connector's id, or null if refused.
`addNode`	`addNode(node: Partial<BmxDiagramNode>) => Promise<string>`	Adds a node. Give at least `shape`; it is placed in view if `x` and `y` are left out. Resolves with its id.
`applyOps`	`applyOps(ops: readonly BmxDiagramOp[]) => Promise<void>`	Applies changes made somewhere else - operations from another copy's `bmxDiagramChange`. They are not added to this copy's undo, and raise no change event here.
`arrange`	`arrange(direction?: BmxDiagramDirection) => Promise<void>`	Arranges the diagram in layers, top to bottom (`TB`) or left to right (`LR`). Lanes keep their nodes.
`clear`	`clear() => Promise<void>`	Removes everything. Undo can bring it back.
`download`	`download(format?: BmxDiagramExportFormat, name?: string) => Promise<void>`	Saves the diagram as a file: svg, png, json or mermaid (.mmd).
`fit`	`fit() => Promise<void>`	Zooms and scrolls to show the whole diagram.
`getDiagram`	`getDiagram() => Promise<BmxDiagramData>`	The diagram, as JSON-ready data.
`getSelection`	`getSelection() => Promise<string[]>`	The ids selected.
`loadMermaid`	`loadMermaid(source: string, append?: boolean) => Promise<readonly string[]>`	Reads a Mermaid flowchart. With `append`, it goes beside what is there; otherwise it replaces it. Resolves with any lines that could not be read.
`redo`	`redo() => Promise<void>`
`removeItems`	`removeItems(ids: readonly string[]) => Promise<void>`	Removes nodes, connectors or lanes by id. A node's connectors go with it.
`reveal`	`reveal(id: string) => Promise<void>`	Brings a node into view and selects it.
`setDiagram`	`setDiagram(diagram: Partial<BmxDiagramData> \| string) => Promise<void>`	Replaces the diagram. Undo can step back from it.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`
`setSelection`	`setSelection(ids: readonly string[]) => Promise<void>`	Selects by id.
`toBlob`	`toBlob(type?: "png" \| "svg", scale?: number) => Promise<Blob>`	The diagram as a PNG or SVG file. `scale` multiplies the PNG's size (default 2).
`toMermaid`	`toMermaid() => Promise<string>`	The diagram as a Mermaid flowchart.
`toSvg`	`toSvg() => Promise<string>`	The diagram as a standalone SVG document.
`undo`	`undo() => Promise<void>`
`updateItem`	`updateItem(id: string, patch: Record<string, unknown>) => Promise<void>`	Changes a node, a connector or a lane by id.
`zoomTo`	`zoomTo(zoom: number) => Promise<void>`	Sets the zoom (1 is actual size), about the middle of the view.

CSS shadow parts

Part	Description
`outline`	the diagram as a list.
`palette`	the shapes to drag in.
`panel`	the properties of what is selected.
`stage`	the drawing area.
`toolbar`	the row of commands.

CSS custom properties

Property	Description
`--bmx-diagram-background`	Behind the drawing.
`--bmx-diagram-grid`	The grid's dots.
`--bmx-diagram-height`	How tall the designer is. Default 40rem.
`--bmx-diagram-line`	Connectors.
`--bmx-diagram-selection`	Selection outlines, handles and guides.

`<bmx-dialog>`

Properties

Property	Attribute	Type	Default	Description
`closeLabel`	`close-label`	`string`	`'Close'`	The close button's accessible name.
`closeOnBackdrop`	`close-on-backdrop`	`boolean`	`true`	Whether a press on the scrim dismisses it.
`closeOnEscape`	`close-on-escape`	`boolean`	`true`	Whether Escape dismisses it.
`dismissible`	`dismissible`	`boolean`	`true`	Whether the user may dismiss it. False removes the close button and refuses both Escape and the backdrop - for a dialog that must be answered rather than escaped. It does not restrain the application: `closeDialog()` always works, and a modal that survived its own submit button would be a support call.
`heading`	`heading`	`string`	—	The visible title. Also the dialog's accessible name.
`hideClose`	`hide-close`	`boolean`	`false`	Hide the close button while still allowing Escape and the backdrop.
`initialFocus`	`initial-focus`	`string \| HTMLElement`	—	What is focused when it opens, as a CSS selector or an element. Left alone, focus goes to the panel, so the dialog is announced from its name and its content rather than from whichever control happens to be first. Name something here when a particular field is obviously the point of the dialog - and note that an `autofocus` attribute on your own content wins over both, because that attribute is exactly what it is for.
`label`	`label`	`string`	—	The accessible name, for a design with no visible title.
`open`	`open`	`boolean`	`false`	Whether the dialog is showing. Mutable, so the component can close itself when the user dismisses it. A consumer driving it may treat it as controlled and watch `bmxOpenChange`.
`returnFocus`	`return-focus`	`boolean`	`true`	Whether closing returns focus to whatever opened it.
`size`	`size`	`BmxDialogSize`	`'md'`	The panel's width step. `full` fills the viewport.

Events

Event	Detail	Description
`bmxClose`	`BmxDialogCloseDetail`	Fired once it has finished closing, with why it closed.
`bmxOpenChange`	`boolean`	Fired when the dialog opens or closes.

Methods

Method	Signature	Description
`closeDialog`	`closeDialog() => Promise<void>`	Close the dialog. Always permitted, whatever `dismissible` says - that property restrains the user, not the application.
`openDialog`	`openDialog() => Promise<void>`	Open the dialog.

Slots

Slot	Description
`(default)`	The dialog's content.
`footer`	The row of actions along the bottom.
`heading`	Replaces the plain-text `heading`.

CSS shadow parts

Part	Description
`body`	The scrolling content area.
`close`	The close button.
`dialog`	The native element, which is also the scrim.
`footer`	The row of actions.
`header`	The bar across the top.
`heading`	The title within it.
`panel`	The box the content sits in.

CSS custom properties

Property	Description
`--bmx-dialog-inset`	Space kept between the panel and the viewport's edges.
`--bmx-dialog-padding`	Space inside the panel's header, body and footer.
`--bmx-dialog-radius`	Corner radius of the panel.
`--bmx-dialog-scrim`	The colour laid over the page behind it.
`--bmx-dialog-width`	The panel's width at the current size step.

`<bmx-dock-layout>`

Properties

Property	Attribute	Type	Default	Description
`compactBelow`	`compact-below`	`number`	`600`	Below this width (px) the workspace is shown as one tab list of every open panel. 0 never does.
`label`	`label`	`string`	—	The workspace's accessible name. Default: "Workspace".
`layout`	`layout`	`BmxDockArrangement \| Record<string, unknown> \| unknown[] \| string`	`''`	The arrangement: the object `bmxChange` gives, JSON, or the shorthand (`{ row: [...] }`, `{ column: [...] }`, `{ stack: ['a', 'b'], size: 30 }`, a panel id for a group of one, an array for a row). Mutable: every change is written back as the full object. Panels the layout does not name join the first group.
`locked`	`locked`	`boolean`	`false`	No dragging, closing, floating or folding; the groups can still be resized and their tabs chosen.
`persistKey`	`persist-key`	`string`	—	A name to keep the layout under in the browser's local storage, so it survives a reload. Nothing is stored without it. A stored layout wins over the first one the page sets after loading, which becomes the layout `resetLayout` goes back to.
`strings`	`strings`	`Partial<BmxDockLayoutStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.

Events

Event	Detail	Description
`bmxActivate`	`BmxDockActivateDetail`	Fired when a panel becomes the one showing in its group.
`bmxChange`	`BmxDockChangeDetail`	Fired when the layout changes, with the whole new layout.
`bmxClose`	`BmxDockCloseDetail`	Fired before the user closes a panel. Cancel it to keep the panel open.

Methods

Method	Signature	Description
`autoHide`	`autoHide(panel: string, edge?: BmxDockSide) => Promise<void>`	Folds the group holding a panel to an edge (the nearest, if none is given).
`closePanel`	`closePanel(panel: string) => Promise<void>`	Closes a panel (no `bmxClose` event: the page asked).
`floatPanel`	`floatPanel(panel: string, rect?: Partial<BmxDockRect>) => Promise<void>`	Takes a panel out into a floating window (at `rect`, in pixels from the workspace's top-left corner, if given).
`getLayout`	`getLayout() => Promise<BmxDockArrangement>`	The layout as it is now: plain JSON, to store and hand back through `layout` or `setLayout`.
`getPanels`	`getPanels() => Promise<BmxDockPanelInfo[]>`	The panels the page has, with the titles and settings read from their attributes.
`maximise`	`maximise(panel?: string) => Promise<void>`	Fills the workspace with the group holding a panel; no panel restores.
`movePanel`	`movePanel(panel: string, target: BmxDockTarget) => Promise<void>`	Moves a panel into a group (`{ stack, position: 'center', index }`) or beside one, or to an edge of the workspace (no `stack`).
`openPanel`	`openPanel(panel: string, target?: BmxDockTarget) => Promise<void>`	Shows a panel: brings it to the front of its group, slides out its folded group, or reopens it where it was.
`resetLayout`	`resetLayout() => Promise<void>`	Goes back to the layout the page last set through `layout` (its default), whatever the user or storage changed since.
`restore`	`restore() => Promise<void>`	Puts a maximised group back among the others.
`setFocus`	`setFocus(panel?: string) => Promise<void>`	Puts keyboard focus on a panel's tab (default: the first group's showing panel).
`setLayout`	`setLayout(layout: BmxDockArrangement \| Record<string, unknown> \| unknown[] \| string) => Promise<void>`	Replaces the layout (the full form or the shorthand). `resetLayout` still goes back to the first one.

Slots

Slot	Description
`empty`	Shown when every panel is closed.

CSS shadow parts

Part	Description
`group`	A group of tabbed panels; also `group-floating`, `group-flyout`.
`splitter`	The bar between two groups.
`strip`	An edge strip of auto-hidden panels.
`tab`	A panel's tab; also `tab-active`.
`window`	A floating window.

CSS custom properties

Property	Description
`--bmx-dock-layout-accent`	The active tab's marker, the drop preview and the guides.
`--bmx-dock-layout-background`	Behind the groups (the gaps between them).
`--bmx-dock-layout-gap`	The width of a splitter.
`--bmx-dock-layout-group-background`	A group's body.
`--bmx-dock-layout-header-background`	A group's tab row.
`--bmx-dock-layout-height`	The workspace's height.
`--bmx-dock-layout-radius`	Corner radius of the groups and windows.
`--bmx-dock-layout-tab-height`	The height of a tab row.

`<bmx-document-compare>`

Properties

Property	Attribute	Type	Default	Description
`allowOpen`	`allow-open`	`boolean`	`false`	Shows Open buttons and drop areas for the two files.
`context`	`context`	`number`	`2`	Unchanged paragraphs shown around each change; the rest fold away. -1 shows everything.
`decisions`	property only	`Record<string, BmxCompareDecision>`	`{}`	The decisions by change id. Two-way.
`detectMoves`	`detect-moves`	`boolean`	`true`	Find paragraphs that moved.
`format`	`format`	`'auto' \| 'text' \| 'markdown' \| 'html'`	`'auto'`	How `original` and `revised` text is read. `auto`: HTML when it starts with a tag, otherwise text.
`ignoreCase`	`ignore-case`	`boolean`	`false`	Treat upper and lower case as the same.
`ignoreFormatting`	`ignore-formatting`	`boolean`	`false`	Do not report formatting changes.
`ignoreWhitespace`	`ignore-whitespace`	`boolean`	`true`	Treat runs of spaces as one.
`label`	`label`	`string`	—	The comparison's accessible name.
`original`	`original`	`string \| BmxCompareDocument`	—	The original document: text, HTML or Markdown (see `format`), or a document object (or JSON). Files and bytes go through `load()`.
`originalLabel`	`original-label`	`string`	—	The original's name. Default: its file name, or "Original".
`panel`	`panel`	`'changes' \| 'none'`	`'changes'`	The list of changes beside the comparison.
`pending`	`pending`	`BmxComparePending`	`'accept'`	In the clean copy, what happens to changes nobody has decided: kept (`accept`) or left out (`reject`).
`review`	`review`	`boolean`	`true`	Lets the reader accept and reject changes.
`revised`	`revised`	`string \| BmxCompareDocument`	—	The revised document, as `original`.
`revisedLabel`	`revised-label`	`string`	—	The revised document's name. Default: its file name, or "Revised".
`strings`	`strings`	`Partial<BmxDocumentCompareStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`view`	`view`	`BmxCompareView`	`'side-by-side'`	Side by side or inline. Narrow screens show inline. Two-way.

Events

Event	Detail	Description
`bmxCompare`	`BmxCompareDoneDetail`	Fired after each comparison, with the counts.
`bmxDecision`	`BmxCompareDecisionDetail`	Fired when changes are accepted or rejected (or a decision is cleared).
`bmxError`	`BmxCompareErrorDetail`	Fired when a file cannot be read.

Methods

Method	Signature	Description
`accept`	`accept(id: string \| "all") => Promise<void>`	Accepts a change, or every change with `all`.
`expandAll`	`expandAll() => Promise<void>`	Shows every unchanged paragraph.
`getChanges`	`getChanges() => Promise<BmxCompareChange[]>`	The changes, with their ids, kinds, places and text.
`getChangesCsv`	`getChangesCsv() => Promise<string>`	The change report as CSV.
`getMergedHtml`	`getMergedHtml() => Promise<string>`	The clean copy, as the decisions leave it, as a standalone HTML page.
`getMergedText`	`getMergedText() => Promise<string>`	The clean copy, as the decisions leave it, as text.
`getRedlineHtml`	`getRedlineHtml(options?: BmxCompareRedlineOptions) => Promise<string>`	The redline as a standalone HTML page: insertions, deletions, moves and formatting marked; decided changes shown as decided.
`getResult`	`getResult() => Promise<BmxCompareResult \| null>`	The comparison, or null until both documents are loaded.
`goTo`	`goTo(id: string) => Promise<boolean>`	Moves to a change, showing and scrolling to it.
`load`	`load(side: BmxCompareSide, input: BmxCompareInput, options?: { format?: BmxCompareFormat; name?: string; password?: string; }) => Promise<BmxCompareDocument>`	Reads a file or text into one side: Word (.docx), PDF, HTML, Markdown or text, by `format` or the file's name and contents.
`next`	`next() => Promise<void>`	Moves to the next change.
`previous`	`previous() => Promise<void>`	Moves to the previous change.
`reject`	`reject(id: string \| "all") => Promise<void>`	Rejects a change, or every change with `all`.
`undecide`	`undecide(id: string \| "all") => Promise<void>`	Clears a decision, or every decision with `all`.

CSS shadow parts

Part	Description
`changes`	The list of changes.
`delete`	Deleted text.
`document`	The comparison.
`insert`	Inserted text.
`row`	A paragraph of the comparison; also `row-changed`.
`toolbar`	The row of documents, view, options, navigation and export.

CSS custom properties

Property	Description
`--bmx-document-compare-delete`	The colour of deleted text.
`--bmx-document-compare-delete-background`	The background of deleted text.
`--bmx-document-compare-font`	The font of the documents' text.
`--bmx-document-compare-insert`	The colour of inserted text.
`--bmx-document-compare-insert-background`	The background of inserted text.
`--bmx-document-compare-max-height`	The tallest the comparison grows before it scrolls.
`--bmx-document-compare-move`	The colour that marks moved paragraphs and formatting changes.
`--bmx-document-compare-panel-width`	The width of the list of changes.

`<bmx-document-signer>`

Properties

Property	Attribute	Type	Default	Description
`certificate`	`certificate`	`boolean`	`true`	Add the signing certificate to the signed PDF.
`certificatePageSize`	`certificate-page-size`	`'a4' \| 'letter' \| 'first'`	`'a4'`	The certificate's page size.
`dateFormat`	`date-format`	`string`	`'d MMMM yyyy'`	How date fields are written unless a field says otherwise.
`envelope`	`envelope`	`Partial<BmxEnvelope> \| string`	—	The envelope: signers, fields, values and log (an object, or its JSON). Kept up to date.
`fileName`	`file-name`	`string`	—	The name downloads are saved under, without the extension. Unset: the document's.
`label`	`label`	`string`	—	The element's accessible name.
`mode`	`mode`	`BmxDocumentSignerMode`	`'prepare'`	Prepare fields, sign, or only look.
`penWidth`	`pen-width`	`number`	`3`	The pen width signatures are drawn with.
`requireConsent`	`require-consent`	`boolean`	`true`	Ask signers to agree to sign electronically before they finish.
`signer`	`signer`	`string`	—	Who is signing (a signer's id). Unset: the first whose turn it is.
`src`	`src`	`string`	—	The PDF to open, by URL (same-origin credentials). Script can pass bytes or a Blob to `open`.
`strings`	`strings`	`Partial<BmxDocumentSignerStrings> \| string`	—	Replacements for any of the wording (an object, or its JSON).
`zone`	`zone`	`string`	—	The time zone dates are written in (an IANA name; UTC when unset).

Events

Event	Detail	Description
`bmxChange`	`BmxDocumentSignerChangeDetail`	Fired when the envelope changes: signers or fields edited, sent, filled in, finished, declined.
`bmxComplete`	`BmxDocumentSignerDoneDetail`	Fired when the last signer finishes.
`bmxDecline`	`BmxDocumentSignerDoneDetail`	Fired when a signer declines.
`bmxError`	`BmxDocumentSignerErrorDetail`	Fired when a document cannot be opened or stamped, or the envelope belongs to another file.
`bmxLoad`	`BmxDocumentSignerLoadDetail`	Fired when a document has opened.
`bmxSignerComplete`	`BmxDocumentSignerDoneDetail`	Fired when a signer finishes.

Methods

Method	Signature	Description
`addField`	`addField(field: Partial<BmxEnvelopeField> & { type: BmxEnvelopeFieldType; page: number; x: number; y: number; signer: string; }) => Promise<BmxEnvelopeField \| BmxEnvelopeRefusal>`	Places a field while preparing (sizes default to the type's).
`addSigner`	`addSigner(signer: Partial<BmxEnvelopeSigner> & { name: string; }) => Promise<BmxEnvelopeSigner \| null>`	Adds a signer while preparing.
`decline`	`decline(reason?: string) => Promise<BmxEnvelopeRefusal \| null>`	Declines for the current signer.
`download`	`download(kind?: "pdf" \| "audit") => Promise<void>`	Saves the signed PDF or the audit trail.
`exportAudit`	`exportAudit() => Promise<string>`	The envelope and the original file's fingerprint, as JSON.
`exportPdf`	`exportPdf() => Promise<Blob \| null>`	The signed PDF: values stamped on the original and the certificate added.
`finish`	`finish(consent?: boolean) => Promise<BmxEnvelopeRefusal \| null>`	Finishes for the current signer (with consent given here when asked for). Resolves with why it was refused, or null.
`getEnvelope`	`getEnvelope() => Promise<BmxEnvelope>`	The envelope as it is now.
`goToField`	`goToField(id: string) => Promise<void>`	Moves to a field and focuses it.
`open`	`open(source: Uint8Array \| ArrayBuffer \| Blob \| string, name?: string) => Promise<number>`	Opens a PDF: bytes, a Blob or File, or a URL. Resolves with the number of pages.
`redo`	`redo() => Promise<void>`	Puts back what `undo` took.
`removeField`	`removeField(id: string) => Promise<void>`	Removes a field while preparing.
`send`	`send() => Promise<BmxEnvelopeRefusal \| null>`	Sends the envelope for signing. Resolves with why it was refused, or null.
`setEnvelope`	`setEnvelope(envelope: Partial<BmxEnvelope> \| string) => Promise<void>`	Replaces the envelope.
`setValue`	`setValue(fieldId: string, value: BmxEnvelopeValue \| undefined) => Promise<BmxEnvelopeRefusal \| null>`	Fills in a field for the signer whose turn it is. Resolves with why it was refused, or null.
`undo`	`undo() => Promise<void>`	Takes back the last change while preparing.

CSS shadow parts

Part	Description
`dialog`	The signature dialog.
`field`	Each field on a page.
`pages`	The pages.
`sidebar`	Signers, fields and actions.
`toolbar`	The tools along the top.

CSS custom properties

Property	Description
`--bmx-document-signer-height`	The height of the pages area (and the sidebar beside it).
`--bmx-document-signer-ink`	The colour signatures are drawn in on screen.
`--bmx-document-signer-radius`	Corner radius of the frame.
`--bmx-document-signer-sidebar-width`	The sidebar's width beside the pages.
`--bmx-document-signer-signer-0`	The first signer's colour, unless they name their own. Colours 0 to 7 are used in turn.
`--bmx-document-signer-signer-1`	The second signer's colour.
`--bmx-document-signer-signer-2`	The third signer's colour.
`--bmx-document-signer-signer-3`	The fourth signer's colour.
`--bmx-document-signer-signer-4`	The fifth signer's colour.
`--bmx-document-signer-signer-5`	The sixth signer's colour.
`--bmx-document-signer-signer-6`	The seventh signer's colour.
`--bmx-document-signer-signer-7`	The eighth signer's colour.

`<bmx-drawer>`

Properties

Property	Attribute	Type	Default	Description
`closeLabel`	`close-label`	`string`	`'Close'`	The close button's accessible name.
`closeOnBackdrop`	`close-on-backdrop`	`boolean`	`true`	Whether a press on the scrim dismisses it.
`closeOnEscape`	`close-on-escape`	`boolean`	`true`	Whether Escape dismisses it.
`dismissible`	`dismissible`	`boolean`	`true`	Whether the user may dismiss it. Never restrains `closeDrawer()`.
`edge`	`edge`	`BmxDrawerEdge`	`'end'`	Which edge it slides in from. `start` and `end` mirror under RTL.
`heading`	`heading`	`string`	—	The visible title. Also the drawer's accessible name.
`hideClose`	`hide-close`	`boolean`	`false`	Hide the close button while still allowing Escape and the backdrop.
`initialFocus`	`initial-focus`	`string \| HTMLElement`	—	What is focused when it opens, as a CSS selector or an element.
`label`	`label`	`string`	—	The accessible name, for a design with no visible title.
`open`	`open`	`boolean`	`false`	Whether the drawer is showing. Mutable, so it can close itself.
`returnFocus`	`return-focus`	`boolean`	`true`	Whether closing returns focus to whatever opened it.
`size`	`size`	`BmxDialogSize`	`'md'`	How much of the screen it takes. The panel's width on `start` and `end`, its height on `top` and `bottom`. `full` covers the viewport, which is what a navigation drawer on a phone usually wants.

Events

Event	Detail	Description
`bmxClose`	`BmxDialogCloseDetail`	Fired once it has finished closing, with why it closed.
`bmxOpenChange`	`boolean`	Fired when the drawer opens or closes.

Methods

Method	Signature	Description
`closeDrawer`	`closeDrawer() => Promise<void>`	Close the drawer. Always permitted, whatever `dismissible` says.
`openDrawer`	`openDrawer() => Promise<void>`	Open the drawer.

Slots

Slot	Description
`(default)`	The drawer's content.
`footer`	The row of actions along the bottom.
`heading`	Replaces the plain-text `heading`.

CSS shadow parts

Part	Description
`body`	The scrolling content area.
`close`	The close button.
`dialog`	The native element, which is also the scrim.
`footer`	The row of actions.
`header`	The bar across the top.
`heading`	The title within it.
`panel`	The box the content sits in.

CSS custom properties

Property	Description
`--bmx-dialog-padding`	Space inside the panel's header, body and footer.
`--bmx-dialog-scrim`	The colour laid over the page behind it.
`--bmx-drawer-size`	The panel's width on a side edge, its height on a top or bottom one.

`<bmx-driver-tree>`

Properties

Property	Attribute	Type	Default	Description
`compare`	`compare`	`string`	—	What each value is compared with: `plan`, `actual`, a scenario's id, or empty for nothing. Left unset, anything but the plan is compared with the plan. Mutable.
`editable`	`editable`	`boolean`	`false`	Drivers can be added, changed and deleted.
`label`	`label`	`string`	—	The accessible name. Default: the model's title.
`model`	`model`	`BmxDriverModel \| Record<string, unknown> \| string`	—	The model: `{ title, root, currency, nodes, scenarios, actuals }`, or JSON. Mutable: edits replace it.
`scenario`	`scenario`	`string`	`'plan'`	What is shown: `plan`, `actual`, or a scenario's id. Mutable.
`selected`	`selected`	`string`	—	The chosen driver. Mutable.
`strings`	`strings`	`Partial<BmxDriverTreeStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`view`	`view`	`BmxDriverTreeView`	`'tree'`	The view. Mutable.

Events

Event	Detail	Description
`bmxChange`	`BmxDriverChangeDetail`	Fired when the model is edited, with all of it.
`bmxExport`	`BmxDriverExportDetail`	Fired when an export is made from the Export menu. Cancel it to keep it from downloading.
`bmxSelect`	`BmxDriverSelectDetail`	Fired when another driver is chosen.
`bmxValuesChange`	`BmxDriverValuesDetail`	Fired when the inputs change, with every driver's value.

Methods

Method	Signature	Description
`getModel`	`getModel() => Promise<BmxDriverModel>`	The model as it stands.
`getValues`	`getValues(scenario?: string) => Promise<Record<string, number>>`	Every driver's value: for the scenario showing (with the what-if), or for another.
`goalSeek`	`goalSeek(target: string, goal: number, input: string, apply?: boolean) => Promise<BmxDriverGoalSeek>`	Finds the value of `input` that makes `target` reach `goal`; with `apply`, sets it.
`resetInputs`	`resetInputs() => Promise<void>`	Clears the what-if.
`saveScenario`	`saveScenario(name: string, id?: string) => Promise<string>`	Saves the current inputs as a scenario (new, or replacing one with the same id); returns its id.
`select`	`select(id: string) => Promise<void>`	Chooses a driver.
`setInputs`	`setInputs(values: Record<string, number>) => Promise<void>`	Sets inputs on top of the scenario showing (a what-if).

CSS shadow parts

Part	Description
`card`	A driver's card.
`panel`	The details of the chosen driver.
`toolbar`	The tools.
`tree`	The tree view.

CSS custom properties

Property	Description
`--bmx-driver-tree-accent`	Inputs, the chosen driver and the base line.
`--bmx-driver-tree-bad`	Changes that are bad news.
`--bmx-driver-tree-good`	Changes that are good news.
`--bmx-driver-tree-height`	The height of the tree view.
`--bmx-driver-tree-panel-width`	The width of the details panel.
`--bmx-driver-tree-radius`	Corner radius of the element.

`<bmx-email-designer>`

Properties

Property	Attribute	Type	Default	Description
`fields`	`fields`	`BmxEmailField[] \| string`	—	Merge fields to offer, as an array or JSON: `{ name, label, sample }`. When given, others are flagged.
`imageHandler`	property only	`(file: File) => Promise<string>`	—	Stores an image file and resolves to its address. When set, image blocks offer an upload.
`label`	`label`	`string`	—	The design's name, shown in the toolbar and given to assistive technology.
`previewData`	`preview-data`	`Record<string, string> \| string`	—	Values for the preview's merge fields, over the fields' samples.
`readonly`	`readonly`	`boolean`	`false`	Look but do not change.
`strings`	`strings`	`Partial<BmxEmailDesignerStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`value`	`value`	`BmxEmailDocument \| string`	—	The design, as an object or JSON. Two-way: edits set it and fire `bmxChange`.

Events

Event	Detail	Description
`bmxChange`	`BmxEmailChangeDetail`	The design changed.

Methods

Method	Signature	Description
`addBlock`	`addBlock(type: BmxEmailBlockType) => Promise<string \| null>`	Adds a block after the selected one (or a row, if nothing is selected). Returns its id.
`addRow`	`addRow(layout?: string) => Promise<string \| null>`	Adds a row of columns (`'1'`, `'1-1'`, `'1-2'`, `'2-1'`, `'1-1-1'`) after the selected row. Returns its id.
`check`	`check() => Promise<BmxEmailProblem[]>`	What to fix before sending.
`getDocument`	`getDocument() => Promise<BmxEmailDocument>`	The design.
`getHtml`	`getHtml(options?: BmxEmailExportOptions) => Promise<string>`	The HTML to send. Merge fields stay as written unless `data` is given.
`getText`	`getText(options?: BmxEmailExportOptions) => Promise<string>`	The plain-text part to send with the HTML.
`redo`	`redo() => Promise<void>`
`select`	`select(id: string \| null) => Promise<void>`	Selects a row or block by id (or nothing).
`setDocument`	`setDocument(doc: BmxEmailDocument \| string) => Promise<void>`	Replaces the design (checked and cleaned as `value` is). Undo history starts again.
`undo`	`undo() => Promise<void>`

CSS shadow parts

Part	Description
`canvas`	The email as it is designed.
`inspector`	The settings panel.
`palette`	The Add list.
`toolbar`	The bar of commands.

CSS custom properties

Property	Description
`--bmx-email-designer-drop`	The line showing where a dragged block will go.
`--bmx-email-designer-height`	The height of the panes.
`--bmx-email-designer-inspector-width`	The settings panel's width.
`--bmx-email-designer-outline`	The outline of the selected row or block.
`--bmx-email-designer-palette-width`	The Add list's width.
`--bmx-email-designer-radius`	Corner radius of the frame.

`<bmx-file-manager>`

Properties

Property	Attribute	Type	Default	Description
`accept`	`accept`	`string`	—	File types the upload accepts (`image/*,.pdf`).
`files`	`files`	`BmxMemoryFileEntry[] \| string`	—	Files the page holds, instead of a provider: `[{ path, size, modified, type, content }]`, as a property or JSON.
`foldersFirst`	`folders-first`	`boolean`	`true`	Folders before files.
`headers`	`headers`	`Record<string, string> \| string`	—	Headers sent to `url` with every request (a token, say), as a property or JSON.
`label`	`label`	`string`	—	What the file manager shows: its accessible name.
`locale`	`locale`	`string`	—	A BCP 47 locale for dates and sizes. Default: the page's `lang`.
`maxFileSize`	`max-file-size`	`number`	—	The largest file the upload accepts, in bytes.
`path`	`path`	`string`	`'/'`	The folder shown. Changes write back here.
`provider`	property only	`BmxFileProvider`	—	Where the files are: an object with `list(path)` and whichever of `createFolder`, `rename`, `remove`, `move`, `copy`, `upload`, `read` and `search` it supports. Stands over `url` and `files`.
`readonly`	`readonly`	`boolean`	`false`	Nothing can be changed: browse, preview and download only.
`rootLabel`	`root-label`	`string`	—	What the root is called in the path and the tree.
`selectable`	`selectable`	`'single' \| 'multiple'`	`'multiple'`	`single` or `multiple` (default).
`showHidden`	`show-hidden`	`boolean`	`false`	Show hidden entries (marked `hidden`, or named with a leading dot).
`showPreview`	`show-preview`	`boolean`	`true`	Show the preview pane. Changes write back here.
`showTree`	`show-tree`	`boolean`	`true`	Show the folder tree.
`sortBy`	`sort-by`	`BmxFileSortKey`	`'name'`	The column the listing is sorted by: `name`, `modified`, `size` or `type`. Changes write back here.
`sortDescending`	`sort-descending`	`boolean`	`false`	Sort from the highest down. Changes write back here.
`strings`	`strings`	`Partial<BmxFileManagerStrings> \| string`	—	Replacements for the wording, as a property or JSON.
`url`	`url`	`string`	—	A server of the page's own, speaking this convention (with `url` = `/api/files`): `GET /api/files?path=/a` lists; `GET .../content?path=` reads; `GET .../search?q=&path=` searches; `POST .../folder {parent,name}`, `.../rename {path,name}`, `.../delete {paths}`, `.../move {paths,target}`, `.../copy {paths,target}`; `POST .../upload?path=` multipart, field `file`. A failure's JSON `message` is shown.
`view`	`view`	`'details' \| 'tiles'`	`'details'`	`details` (default) or `tiles`. Changes write back here.
`withCredentials`	`with-credentials`	`boolean`	`false`	Send cookies to `url` on another origin.

Events

Event	Detail	Description
`bmxFileManagerAction`	`BmxFileManagerActionDetail`	An action is about to happen. Cancelable: the page can refuse it, or do it its own way.
`bmxFileManagerChange`	`BmxFileManagerActionDetail`	An action was done.
`bmxFileManagerError`	`BmxFileManagerErrorDetail`	The provider failed.
`bmxFileManagerNavigate`	`BmxFileManagerNavigateDetail`	The folder shown is about to change. Cancelable.
`bmxFileManagerOpen`	`BmxFileManagerOpenDetail`	A file was opened. Cancelable: by default it is shown in the preview pane.
`bmxFileManagerSelect`	`BmxFileManagerSelectDetail`	The selection changed.

Methods

Method	Signature	Description
`copyItems`	`copyItems(paths: string[], target: string) => Promise<void>`	Copies entries into a folder.
`createFolder`	`createFolder(name?: string) => Promise<void>`	Makes a folder in the folder shown (named, or "New folder" ready to be renamed).
`deleteItems`	`deleteItems(paths: string[]) => Promise<void>`	Deletes entries, without asking (the page asks, when it calls this).
`downloadItem`	`downloadItem(path: string) => Promise<void>`	Downloads a file.
`getSelection`	`getSelection() => Promise<BmxFileEntry[]>`	The selected entries.
`moveItems`	`moveItems(paths: string[], target: string) => Promise<void>`	Moves entries into a folder.
`navigate`	`navigate(path: string) => Promise<void>`	Shows a folder.
`refresh`	`refresh() => Promise<void>`	Lists the folder shown again.
`renameItem`	`renameItem(path: string, name: string) => Promise<void>`	Renames an entry of the folder shown.
`select`	`select(paths: string[]) => Promise<void>`	Selects entries of the folder shown, by path.
`uploadItems`	`uploadItems(files: File[] \| FileList, target?: string) => Promise<void>`	Uploads files into a folder (the one shown, by default), with the upload panel's progress.

CSS shadow parts

Part	Description
`list`	the listing.
`preview`	the preview pane.
`status`	the line saying how many items there are.
`toolbar`	the buttons, path and search.
`tree`	the folder tree.

CSS custom properties

Property	Description
`--bmx-file-manager-folder`	The colour of folders.
`--bmx-file-manager-height`	How tall the file manager is. Default: 32rem.
`--bmx-file-manager-preview-width`	The width of the preview pane. Default: 16rem.
`--bmx-file-manager-tree-width`	The width of the folder tree. Default: 13rem.

`<bmx-filter-panel>`

Properties

Property	Attribute	Type	Default	Description
`collapseBelow`	`collapse-below`	`number`	`640`	Below this window width (px), the panel layout folds behind a button. 0 never folds.
`counts`	`counts`	`BmxFilterCounts \| string`	—	A server's option counts, by facet id and option value.
`deferred`	`deferred`	`boolean`	`false`	Wait for "Show results" instead of filtering at every change.
`facets`	`facets`	`BmxFacet[] \| string`	`[]`	The facets, as objects or JSON.
`headingLevel`	`heading-level`	`number`	`2`	The level of the panel's heading (2 to 6); facet headings are one below.
`items`	`items`	`unknown[] \| string`	—	The records to filter (from script, or JSON). Without them the panel takes `counts` and `result-count` from the page.
`label`	`label`	`string`	—	The panel's heading. Default: "Filters".
`layout`	`layout`	`'panel' \| 'bar'`	`'panel'`	`panel`: a column of collapsible facets (a sidebar). `bar`: a row of buttons opening each facet in a popup.
`locale`	`locale`	`string`	—	The locale for numbers and dates. Default: the nearest `lang` attribute.
`now`	`now`	`number \| string`	—	Today, for the date presets (milliseconds or ISO). Default: the clock.
`query`	`query`	`string`	`''`	The keywords. Mutable.
`resultCount`	`result-count`	`number`	—	How many results there are, when the page filters on a server.
`saveViews`	`save-views`	`boolean`	`false`	Offer "Save view" and the list of saved views.
`searchFields`	`search-fields`	`string[] \| string`	—	The record fields the keywords search (dot paths). Default: every top-level text and number field.
`searchable`	`searchable`	`boolean`	`false`	Show a keyword box.
`strings`	`strings`	`Partial<BmxFilterPanelStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`urlPrefix`	`url-prefix`	`string`	`''`	A prefix for the names written to the address bar, to keep them apart from the page's own.
`urlSync`	`url-sync`	`boolean`	`false`	Keep the address bar's query string in step (`history.replaceState`), and read it on load.
`value`	`value`	`BmxFilterValue \| string`	`{}`	What is chosen, as an object, JSON or a query string. Mutable: the reader's choices are written back as an object.
`views`	`views`	`BmxFilterView[] \| string`	`[]`	Saved views. Mutable: saving and deleting are written back.

Events

Event	Detail	Description
`bmxFilterChange`	`BmxFilterChangeDetail`	Fired when the filters change (deferred: when they are applied).
`bmxViewsChange`	`BmxFilterViewsDetail`	Fired when a view is saved or deleted.

Methods

Method	Signature	Description
`apply`	`apply() => Promise<void>`	Applies the filters in deferred mode.
`clear`	`clear(facet?: string) => Promise<void>`	Clears one facet, or everything (keywords too) when no facet is named.
`expand`	`expand(facet: string, open?: boolean) => Promise<void>`	Opens (or closes) a facet's section.
`getFiltered`	`getFiltered() => Promise<unknown[]>`	The records that pass (with `items`).
`getValue`	`getValue() => Promise<BmxFilterValue>`	What is chosen (applied), as an object.
`setFocus`	`setFocus() => Promise<void>`	Focuses the first control.
`setValue`	`setValue(value: BmxFilterValue \| string) => Promise<void>`	Chooses filters: an object, JSON or a query string. Fires `bmxFilterChange`.
`toQueryString`	`toQueryString() => Promise<string>`	The value as query-string pairs (`brand=Contoso&price=100..500`).

CSS shadow parts

Part	Description
`bar`	The row of facet buttons (bar layout).
`chip`	One chosen filter.
`chips`	The row of chosen filters.
`count`	The number of results.
`facet`	One facet's section.
`facet-body`	A facet's controls.
`facet-header`	A facet's heading button.
`footer`	The Apply and Reset buttons (deferred).
`header`	The heading row.
`histogram`	A range's histogram.
`option`	One option.
`panel`	The panel (panel layout).
`popup`	A facet's popup (bar layout).
`search`	The keyword box.

CSS custom properties

Property	Description
`--bmx-filter-panel-accent`	The colour of chosen options, the slider and the histogram.
`--bmx-filter-panel-background`	The panel's background.
`--bmx-filter-panel-histogram-color`	The histogram's bars outside the chosen range.
`--bmx-filter-panel-option-height`	The height of one option row.
`--bmx-filter-panel-popup-width`	A facet's popup width (bar layout).
`--bmx-filter-panel-radius`	Corner radius of the panel, the popups and the controls.

`<bmx-floor-plan>`

Properties

Property	Attribute	Type	Default	Description
`availability`	`availability`	`Record<string, BmxSpaceState \| BmxSpaceAvailability> \| BmxSpaceAvailability[] \| string`	`{}`	Live states: `{ id: state \| { state, holder, note } }`, an array of `{ id, state, ... }`, or JSON.
`colorBy`	`color-by`	`'state' \| 'zone' \| 'kind'`	`'state'`	What colours a space: its state, its zone, or its kind.
`display`	`display`	`'map' \| 'list' \| 'both'`	`'both'`	What is shown: the map, the list, or both side by side. Mutable.
`filter`	`filter`	`BmxFloorFilter \| string`	`{}`	The filter, as an object or JSON: `{ kinds, amenities, minCapacity, availableOnly, zone, query }`. Mutable: the toolbar changes it.
`floor`	`floor`	`string`	—	The floor shown, by id. Default: the first. Mutable.
`hideLegend`	`hide-legend`	`boolean`	`false`	Leave out the key to the states.
`hideToolbar`	`hide-toolbar`	`boolean`	`false`	Leave out the toolbar.
`labels`	`labels`	`'auto' \| 'always' \| 'never'`	`'auto'`	When names are written on the plan: when there is room, always, or never.
`maxSelection`	`max-selection`	`number`	—	The most that can be chosen in `multiple` mode.
`mode`	`mode`	`'view' \| 'edit'`	`'view'`	`view` to look and choose, `edit` to draw and change the plan.
`plan`	`plan`	`BmxFloorPlanData \| string`	`{ version: 1, floors: [] }`	The plan: `{ floors: [...] }`, a single floor, or JSON. Mutable: edits write it back.
`selectionMode`	`selection-mode`	`'none' \| 'single' \| 'multiple'`	`'single'`	How many spaces can be chosen: none, one, or several.
`snapTo`	`snap-to`	`number`	`0`	Grid step for drawing and moving in edit mode, in plan units. 0 for none.
`spaceColor`	property only	`BmxFloorSpaceColor`	—	Colours a space, in place of the built-in colours (from script).
`strings`	`strings`	`Partial<BmxFloorPlanStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`value`	`value`	`string[] \| string`	`[]`	The chosen space ids. Mutable.

Events

Event	Detail	Description
`bmxBook`	`BmxFloorSelectionDetail`	Fired when the reader presses Book: book these.
`bmxFloorChange`	`{ floor: string; }`	Fired when the floor shown changes.
`bmxPlanChange`	`BmxFloorPlanChangeDetail`	Fired after every edit (edit mode): save the plan.
`bmxSelectionChange`	`BmxFloorSelectionDetail`	Fired after the chosen spaces change.
`bmxSpaceFocus`	`{ space: BmxFloorSpace \| null; }`	Fired when a space gets keyboard focus or is pointed at.
`bmxSpaceSelect`	`BmxFloorSpaceSelectDetail`	Fired before a space is chosen or let go. Cancel it to refuse.

Methods

Method	Signature	Description
`clearSelection`	`clearSelection() => Promise<void>`	Clear the choice.
`exportJson`	`exportJson() => Promise<string>`	The plan as JSON.
`exportSvg`	`exportSvg() => Promise<string>`	The floor shown, as a standalone SVG drawing with states and names (for printing or a report).
`fit`	`fit() => Promise<void>`	Show the whole floor.
`getPlan`	`getPlan() => Promise<BmxFloorPlanData>`	The plan, as it stands (with edits).
`importSvg`	`importSvg(svg: string, options?: BmxFloorImportOptions) => Promise<number>`	Bring in an SVG drawing as a floor's background, turning its marked shapes into spaces. Resolves how many spaces were added, or -1 if the text was not SVG.
`redo`	`redo() => Promise<boolean>`	Redo the last undone edit.
`select`	`select(ids: string[]) => Promise<void>`	Choose spaces (replacing the choice), ignoring any that cannot be chosen.
`setAvailability`	`setAvailability(entries: Record<string, BmxSpaceState \| BmxSpaceAvailability> \| BmxSpaceAvailability[] \| string, merge?: boolean) => Promise<void>`	Replace the live states, or merge them into the ones there (`merge`).
`undo`	`undo() => Promise<boolean>`	Undo the last edit. Resolves whether there was one.
`zoomBy`	`zoomBy(factor: number) => Promise<void>`	Zoom by a factor (above 1 closer) about the centre.
`zoomToSpace`	`zoomToSpace(id: string) => Promise<boolean>`	Show a space - changing floor if it is on another - and make it the one in focus. Resolves whether it was found.

Slots

Slot	Description
`header`	Above the plan, beside the floor tabs (a date picker, say).

CSS shadow parts

Part	Description
`details`	The card for the space in focus.
`legend`	The key to the states.
`list`	The list of spaces.
`map`	The box the plan is drawn in.
`space`	A space; also `space-selected` and `space-active`.
`toolbar`	The row of floor tabs, filters and view buttons.
`tools`	The editing tools.

CSS custom properties

Property	Description
`--bmx-floor-plan-available`	The colour of an available space.
`--bmx-floor-plan-booked`	The colour of a booked space.
`--bmx-floor-plan-floor`	The floor's background.
`--bmx-floor-plan-height`	The height of the map.
`--bmx-floor-plan-mine`	The colour of the reader's own space.
`--bmx-floor-plan-occupied`	The colour of a space in use.
`--bmx-floor-plan-reserved`	The colour of a reserved space.
`--bmx-floor-plan-selected`	The ring around a chosen space.
`--bmx-floor-plan-side-width`	The width of the details and list column.
`--bmx-floor-plan-unavailable`	The colour of a space that cannot be booked.

`<bmx-form>`

Properties

Property	Attribute	Type	Default	Description
`action`	`action`	`string`	—	A URL to send the answers to. Without one, the page handles `bmxFormSubmit`.
`autosave`	`autosave`	`string`	—	A name to keep a draft of the answers under in this browser, filled back in next time.
`disabled`	`disabled`	`boolean`	`false`	Turns every field off.
`functions`	property only	`Record<string, BmxFormFunction>`	—	Functions for expressions, by name: `{ VAT: (n) => n * 0.2 }`. A property.
`hideActions`	`hide-actions`	`boolean`	`false`	Leaves out the buttons, for a page that drives the form from script.
`label`	`label`	`string`	—	The form's accessible name, when it has no title.
`locale`	`locale`	`string`	—	The language numbers and dates are shown in. The reader's, by default.
`method`	`method`	`string`	`'POST'`	The method `action` is sent with.
`name`	`name`	`string`	—	With a name, the answers go into an enclosing `<form>` as JSON under it.
`page`	`page`	`number`	`0`	The page on show, from 0.
`readonly`	`readonly`	`boolean`	`false`	Shows the answers as text rather than as fields.
`requestInit`	`request-init`	`RequestInit \| string`	—	Options for the request to `action` and to `optionsUrl` (headers, credentials), as a property or JSON.
`schema`	`schema`	`BmxFormSchema \| string`	—	The form: `{ title, fields }` or `{ title, pages }`, as a property or JSON.
`src`	`src`	`string`	—	A URL to read the schema from as JSON.
`strings`	`strings`	`Partial<BmxFormStrings> \| string`	—	Replacements for the form's own wording, as a property or JSON.
`validateOn`	`validate-on`	`'blur' \| 'input' \| 'submit'`	`'blur'`	When a field shows its problem: once it is left (`blur`), as it is typed in (`input`), or only when the form is sent (`submit`).
`validators`	property only	`Record<string, BmxFormValidator>`	—	The page's own checks, by field (`email`, or `lines.qty` for a column of rows). A property.
`value`	`value`	`Record<string, unknown> \| string`	`{}`	The answers, as a property or JSON. Changes write back here.

Events

Event	Detail	Description
`bmxFormChange`	`BmxFormChangeDetail`	An answer changed.
`bmxFormInvalid`	`BmxFormInvalidDetail`	The form was sent, or a page left, with problems.
`bmxFormPageChange`	`BmxFormPageChangeDetail`	Another page is on show.
`bmxFormReset`	`void`	The form was emptied back to its defaults.
`bmxFormSubmit`	`BmxFormSubmitDetail`	The form is valid and about to be sent. Cancel it to send the answers yourself.
`bmxFormSubmitError`	`BmxFormSubmitErrorDetail`	`action` refused the answers, or could not be reached.
`bmxFormSubmitted`	`BmxFormSubmittedDetail`	`action` accepted the answers.

Methods

Method	Signature	Description
`clearErrors`	`clearErrors() => Promise<void>`	Clears the messages set by `setErrors`.
`focusField`	`focusField(path: string) => Promise<void>`	Moves focus to a field, by path, going to its page first.
`getData`	`getData(all?: boolean) => Promise<Record<string, unknown>>`	The answers: by default as they would be sent (hidden ones left out); with `all`, every answer kept.
`getSummary`	`getSummary() => Promise<BmxFormSummaryItem[]>`	The answers as a reader checks them: each field on show with its answer as text.
`getValue`	`getValue(path: string) => Promise<unknown>`	One answer, by path (`email`, `lines[0].qty`).
`goToPage`	`goToPage(page: number) => Promise<void>`	Goes to a page, from 0, without checking the one on show.
`load`	`load(url: string) => Promise<void>`	Reads the schema from a URL.
`next`	`next() => Promise<boolean>`	Checks the page on show and goes to the next one; false if the page has problems.
`previous`	`previous() => Promise<void>`	Goes back a page.
`reportValidity`	`reportValidity() => Promise<boolean>`	Checks the whole form and shows its problems; true when there are none.
`reset`	`reset() => Promise<void>`	Empties the form back to its defaults, on its first page.
`setData`	`setData(data: Record<string, unknown>, merge?: boolean) => Promise<void>`	Replaces the answers, or with `merge` adds to them.
`setErrors`	`setErrors(errors: Record<string, string>) => Promise<void>`	Shows messages against fields, by path - a server's answer, typically. They clear as each field is changed.
`setValue`	`setValue(path: string, value: unknown) => Promise<void>`	Sets one answer, by path, as though it had been typed.
`submit`	`submit() => Promise<boolean>`	Checks the form and, when it passes, sends it: `bmxFormSubmit`, then `action` if there is one.
`toFormData`	`toFormData() => Promise<FormData>`	The answers to send, as FormData (`lines[0][qty]`), files included.
`validate`	`validate(page?: number) => Promise<BmxFormError[]>`	The problems, without showing them: the whole form's, or one page's. Waits for the page's own validators.

CSS shadow parts

Part	Description
`actions`	the buttons under the form.
`content`	text from the schema.
`error`	a message under a field the form draws itself.
`error-summary`	the list of problems shown when the form is sent.
`field`	the cell around one field.
`form`	the form itself.
`header`	the title and description.
`notice`	the "restored" notice and the sending error.
`output`	a worked-out value.
`page`	the fields of the page on show.
`progress`	the steps of a form in pages.
`repeat`	a repeating section.
`review`	the answers on the "check your answers" step.
`row`	one row of a repeating section.
`row-label`	a row's label.
`section`	a section.
`signature`	a signature box.
`step`	one step. Also `step-current`, `step-done`.
`success`	what shows once the form is sent.

CSS custom properties

Property	Description
`--bmx-form-accent`	The progress steps and links.
`--bmx-form-border`	Lines around sections, rows and the summary.
`--bmx-form-error-color`	Messages the form draws itself, and the summary's edge.
`--bmx-form-gap`	The space between fields.
`--bmx-form-max-width`	The widest the form grows.
`--bmx-form-output-background`	Behind a worked-out value.
`--bmx-form-radius`	Corners of sections, rows and boxes.
`--bmx-form-section-background`	Behind a section and a repeating row.

`<bmx-form-designer>`

Properties

Property	Attribute	Type	Default	Description
`functions`	property only	`Record<string, BmxFormFunction>`	—	Functions the form's expressions may call, so the designer knows them and the preview runs them. A property.
`label`	`label`	`string`	—	The designer's accessible name.
`locale`	`locale`	`string`	—	The language the preview shows numbers and dates in.
`readonly`	`readonly`	`boolean`	`false`	Shows the form without letting it be changed.
`schema`	`schema`	`BmxFormSchema \| string`	`{}`	The form being designed, as a property or JSON. Changes write back here.
`strings`	`strings`	`Partial<BmxFormDesignerStrings> \| string`	—	Replacements for the designer's own wording, as a property or JSON.
`templates`	`templates`	`boolean`	`true`	Offers the templates in the toolbar.
`view`	`view`	`BmxFormDesignerView`	`'design'`	`design`, `preview` or `json`.

Events

Event	Detail	Description
`bmxFormDesignerChange`	`BmxFormDesignerChangeDetail`	The form changed.
`bmxFormDesignerSelect`	`BmxFormDesignerSelectDetail`	Another field was chosen.

Methods

Method	Signature	Description
`addField`	`addField(type: BmxFormFieldType, path?: number[]) => Promise<number[]>`	Adds a field of a type: after the chosen field, or at a place (`[page, index]`).
`downloadJSON`	`downloadJSON(fileName?: string) => Promise<void>`	Saves the form as a JSON file through the browser's download.
`getProblems`	`getProblems() => Promise<BmxFormDesignProblem[]>`	What is wrong with the form.
`getSchema`	`getSchema() => Promise<BmxFormSchema>`	The form as it now is.
`loadTemplate`	`loadTemplate(id: string) => Promise<boolean>`	Replaces the form with a template, by id: `blank`, `contact`, `registration`, `order` or `survey`.
`redo`	`redo() => Promise<boolean>`
`removeField`	`removeField(path?: number[]) => Promise<void>`	Removes a field (the chosen one, by default).
`selectField`	`selectField(path: number[] \| null) => Promise<void>`	Chooses a field, by place, or none.
`setFocus`	`setFocus() => Promise<void>`	Moves focus to the chosen field, or the first.
`setSchema`	`setSchema(schema: BmxFormSchema) => Promise<void>`	Replaces the form (an undo step).
`undo`	`undo() => Promise<boolean>`

CSS shadow parts

Part	Description
`canvas`	the page being designed.
`card`	one field on the canvas. Also `card-selected`, `card-problem`.
`drop-marker`	where a dragged field will land.
`inspector`	the properties panel.
`json`	the JSON view.
`page-tabs`	the pages of a form in steps.
`palette`	the list of field types.
`palette-item`	one type in it.
`preview`	the preview of the form.
`toolbar`	the bar across the top.

CSS custom properties

Property	Description
`--bmx-form-designer-accent`	The chosen card, the drop marker and active tabs.
`--bmx-form-designer-border`	Lines between the panels and around cards.
`--bmx-form-designer-canvas-background`	Behind the page being designed.
`--bmx-form-designer-height`	How tall the designer is.
`--bmx-form-designer-panel-background`	The palette and properties panels.
`--bmx-form-designer-paper-background`	The page itself.

`<bmx-formula-bar>`

Properties

Property	Attribute	Type	Default	Description
`actions`	`actions`	`boolean`	`true`	Show the cancel, enter and insert-function buttons.
`allowInvalid`	`allow-invalid`	`boolean`	`false`	Enter formulas even when they do not read (the cell then shows #NAME?). By default Enter refuses them.
`autocomplete`	`autocomplete`	`boolean`	`true`	Suggest functions, names and table columns while typing.
`cell`	`cell`	`string`	—	The cell it edits in the engine: `B4` or `Sheet2!B4`.
`disabled`	`disabled`	`boolean`	`false`
`engine`	`engine`	`BmxFormulaBarEngine`	—	The engine to edit: a `bmx-formula-engine` or a grid in spreadsheet mode (its id, a selector or the element), or a `BmxFormulaWorkbook`.
`expanded`	`expanded`	`boolean`	`false`	Show the formula over several lines (it also grows on its own to `maxRows`).
`hints`	`hints`	`boolean`	`true`	Show the arguments of the function being typed.
`label`	`label`	`string`	—	Its accessible name.
`locale`	`locale`	`string`	—	A BCP 47 locale for the separators, when not bound to an engine.
`maxRows`	`max-rows`	`number`	`6`	The most lines the bar grows to before it scrolls.
`nameBox`	`name-box`	`boolean`	`true`	Show the name box.
`placeholder`	`placeholder`	`string`	—
`readonly`	`readonly`	`boolean`	`false`
`referenceColors`	`reference-colors`	`boolean`	`true`	Draw each reference in its own colour.
`strings`	`strings`	`Partial<BmxFormulaBarStrings> \| string`	—	Every word it shows, as a property or JSON.
`value`	`value`	`string`	`''`	The text, when not bound to an engine (or the bound cell's formula, read back).

Events

Event	Detail	Description
`bmxFormulaCancel`	`{ value: string; }`
`bmxFormulaCommit`	`BmxFormulaCommitDetail`
`bmxFormulaInput`	`BmxFormulaInputDetail`
`bmxFormulaNavigate`	`BmxFormulaNavigateDetail`
`bmxFormulaReferences`	`BmxFormulaReferencesDetail`

Methods

Method	Signature	Description
`cancel`	`cancel() => Promise<void>`	Abandons the edit and shows the cell's (or value's) text again.
`commit`	`commit(move?: "down" \| "right" \| "none") => Promise<void>`	Enters the formula: writes it to the bound cell, or sets `value`, and fires `bmxFormulaCommit`.
`getValue`	`getValue() => Promise<string>`	The text being edited (or shown).
`insertReference`	`insertReference(address: string) => Promise<void>`	Inserts a reference at the caret - or replaces the reference the caret is on - as a grid does when cells are clicked while a formula is being typed.
`insertText`	`insertText(text: string) => Promise<void>`	Inserts text at the caret, replacing any selection.
`openFunctionPicker`	`openFunctionPicker() => Promise<void>`	Opens the function picker.
`setFocus`	`setFocus() => Promise<void>`	Moves focus into the editor.

CSS shadow parts

Part	Description
`actions`	the cancel, enter and function buttons.
`bar`	the whole bar.
`editor`	the editing area.
`hint`	the argument hint.
`input`	the text area typed into.
`name-box`	the name box.
`picker`	the function picker dialog.
`problem`	the line saying what is wrong with the formula.
`suggestions`	the autocomplete list.

CSS custom properties

Property	Description
`--bmx-formula-bar-background`	Behind the bar.
`--bmx-formula-bar-border`	The bar's border colour.
`--bmx-formula-bar-font`	The editor's font. Default: the monospace token.
`--bmx-formula-bar-font-size`	The editor's font size.
`--bmx-formula-bar-name-width`	The name box's width. Default 7rem.
`--bmx-formula-bar-radius`	The bar's corners.
`--bmx-formula-error`	The colour of error values and of a fault's underline.
`--bmx-formula-function`	The colour of function names.
`--bmx-formula-number`	The colour of numbers.
`--bmx-formula-ref-1`	The colour of the first reference in a formula (and so on to 8).
`--bmx-formula-ref-2`	The second reference's colour.
`--bmx-formula-ref-3`	The third reference's colour.
`--bmx-formula-ref-4`	The fourth reference's colour.
`--bmx-formula-ref-5`	The fifth reference's colour.
`--bmx-formula-ref-6`	The sixth reference's colour.
`--bmx-formula-ref-7`	The seventh reference's colour.
`--bmx-formula-ref-8`	The eighth reference's colour.
`--bmx-formula-string`	The colour of text in quotes.

`<bmx-formula-engine>`

Properties

Property	Attribute	Type	Default	Description
`bind`	`bind`	`string`	—	Wires up `data-bmx-cell` and `data-bmx-formula` elements inside the element this selector finds (or `document`). Elements naming another engine with `data-bmx-engine` are left to it.
`calculation`	`calculation`	`'automatic' \| 'manual'`	`'automatic'`	`automatic` recalculates on every change; `manual` waits for `recalculate()`.
`dateSystem`	`date-system`	`1900 \| 1904`	`1900`	The date system: 1900 (default) or 1904.
`functions`	property only	`Record<string, BmxFormulaCustomFunction>`	—	Functions of your own, by name. Set from script: a function cannot travel in an attribute.
`iterative`	`iterative`	`boolean`	`false`	Iterate circular references until they settle, rather than reporting #CYCLE!.
`locale`	`locale`	`string`	—	A BCP 47 locale: decides the formula separators, how typed numbers and dates are read, and month names.
`maxChange`	`max-change`	`number`	`0.001`	With `iterative`: stop when no value moves by more than this.
`maxIterations`	`max-iterations`	`number`	`100`	With `iterative`: the most rounds of iteration.
`names`	`names`	`BmxFormulaNameData[] \| string`	—	Named ranges and named formulas: `[{ name, formula, sheet? }]`.
`requestInit`	`request-init`	`RequestInit \| string`	—	Options for the `src` request (headers, credentials), as a property or JSON.
`sheets`	`sheets`	`BmxFormulaSheetData[] \| string`	—	The sheets: `[{ name, cells, records?, formats? }]`, as a property or JSON.
`src`	`src`	`string`	—	A URL to load the workbook from: JSON in the shape `toJSON` writes, or an Excel file (.xlsx). Your server, your data.
`tables`	`tables`	`BmxFormulaTableData[] \| string`	—	Tables for structured references: `[{ name, sheet, range }]`.
`undoLimit`	`undo-limit`	`number`	`100`	How many changes `undo()` can step back through.
`workbook`	property only	`BmxFormulaWorkbook \| BmxFormulaRemoteWorkbook \| null`	`null`	The workbook: the full calculation API, synchronously. Read it to work with the engine from script, or assign a `BmxFormulaWorkbook` of your own to have the element (and anything bound to it) use that instead. With `worker`, it is a `BmxFormulaRemoteWorkbook`: reads answer at once from its mirror, changes answer with promises.
`worker`	`worker`	`string \| Worker`	—	Calculates on a Web Worker: the URL of a module worker script that calls `serveFormulaWorker()` from `bmx-formulas.mjs` (two lines; see that module), or a `Worker` set from script, which the element then owns. The page stays responsive while the worker loads and recalculates, and values are read from a mirror kept here, so bound elements and formula bars work as before. Functions of your own are given to the worker, not `functions`. A `Worker` given here stays the page's to end.

Events

Event	Detail	Description
`bmxFormulaChange`	`BmxFormulaChangeEvent`	Recalculation finished: the cells that changed, and what the calculation did.
`bmxFormulaError`	`BmxFormulaEngineErrorDetail`	The workbook could not be loaded or read.
`bmxFormulaReady`	`BmxFormulaReadyDetail`	The workbook is loaded and calculated.

Methods

Method	Signature	Description
`createWorkbook`	`createWorkbook(data?: BmxFormulaWorkbookData, options?: BmxFormulaWorkbookOptions) => Promise<BmxFormulaWorkbook>`	A new, independent workbook (not bound to this element): for calculations that need no element of their own.
`defineName`	`defineName(name: string, formula: string, sheet?: string) => Promise<void>`	Defines or redefines a name.
`downloadXlsx`	`downloadXlsx(fileName?: string) => Promise<void>`	Saves the workbook as an Excel file through the browser's download.
`enterText`	`enterText(address: string, text: string) => Promise<void>`	Sets a cell from text as a person types it: numbers, dates and percentages are read in the engine's locale.
`evaluate`	`evaluate(formula: string) => Promise<BmxFormulaValue \| BmxFormulaValue[][]>`	Works out a formula without storing it.
`getText`	`getText(address: string, format?: string) => Promise<string>`	A cell's value as text, in its number format or the one given.
`getValue`	`getValue(address: string) => Promise<BmxFormulaValue>`	The value of a cell. An error value arrives as a `BmxFormulaError` with its `code` and `message`.
`getValues`	`getValues(range: string) => Promise<BmxFormulaValue[][]>`	The values of a range as rows.
`getWorkbook`	`getWorkbook() => Promise<BmxFormulaWorkbook \| BmxFormulaRemoteWorkbook \| null>`	The workbook itself, for the full API (also the `workbook` property).
`load`	`load(url: string) => Promise<void>`	Loads the workbook from a URL: JSON in the shape `toJSON` writes, or an Excel file (.xlsx), told apart by the response's content type or the URL's extension.
`loadXlsx`	`loadXlsx(source: Blob \| ArrayBuffer \| Uint8Array \| string) => Promise<void>`	Loads an Excel file (.xlsx): from a `File` a reader chose, a `Blob`, its bytes, or a URL. Cells, formulas, number formats, names, tables, the date system and iterative calculation come across.
`recalculate`	`recalculate() => Promise<BmxFormulaTelemetry \| null>`	Recalculates every formula (in manual mode, runs what is waiting).
`redo`	`redo() => Promise<boolean>`
`registerFunction`	`registerFunction(name: string, def: BmxFormulaCustomFunction) => Promise<void>`	Adds a function of your own: `engine.registerFunction('VAT', { fn: x => x * 0.2 })`.
`setCell`	`setCell(address: string, input: BmxFormulaInput) => Promise<void>`	Sets one cell: a value, or text starting with `=` for a formula.
`setCells`	`setCells(entries: Record<string, BmxFormulaInput>) => Promise<void>`	Sets several cells, recalculating once: `{ "A1": 1, "B1": "=A1*2" }`.
`setData`	`setData(data: BmxFormulaWorkbookData) => Promise<void>`	Replaces the workbook with JSON.
`toJSON`	`toJSON(values?: boolean) => Promise<BmxFormulaWorkbookData>`	The whole workbook as JSON; with `values`, each sheet's calculated values as well.
`toXlsx`	`toXlsx() => Promise<Blob>`	The workbook as an Excel file: formulas, their values, number formats, names and tables.
`undo`	`undo() => Promise<boolean>`

`<bmx-gallery>`

Properties

Property	Attribute	Type	Default	Description
`actions`	`actions`	`readonly BmxGalleryAction[] \| string`	`[]`	Buttons added to the viewer's toolbar; a click fires `bmxAction`.
`captions`	`captions`	`'hover' \| 'below' \| 'none'`	`'hover'`	Where thumbnails show their titles: over the picture on hover and focus, under it always, or not at all.
`cellAspect`	`cell-aspect`	`number`	`1`	A grid cell's shape, width over height.
`download`	`download`	`boolean`	`false`	The viewer offers a download of each picture.
`fit`	`fit`	`'cover' \| 'contain'`	`'cover'`	How a picture sits in its grid cell: filling it (cropped) or wholly inside it.
`gap`	`gap`	`number`	`8`	The space between thumbnails, in pixels.
`groupBy`	`group-by`	`BmxGalleryGroupBy`	`'none'`	Headings by the items' `group`, or by the day, month or year of their `date`.
`hasMore`	`has-more`	`boolean`	`false`	More items can be loaded: `bmxLoadMore` fires as the reader nears the end.
`itemSize`	`item-size`	`number`	`220`	The size aimed for, in pixels: the row height for `justified`, the column width for `grid` and `masonry`. Mutable.
`items`	`items`	`readonly (Partial<BmxGalleryItem> \| string)[] \| string`	`[]`	The pictures: objects (`src`, `thumb`, `width`, `height`, `alt`, `title`, `caption`, `date`, `tags`, `type`, `before`, `poster`...) or plain addresses, or JSON of either.
`label`	`label`	`string`	—	The gallery's accessible name. Default: "Gallery".
`layout`	`layout`	`BmxGalleryLayout`	`'justified'`	How the thumbnails are arranged. Mutable: the toolbar changes it.
`loop`	`loop`	`boolean`	`true`	The viewer goes from the last picture round to the first.
`query`	`query`	`string`	`''`	Shows only items matching these words (`#tag` for a tag). Mutable: the search box changes it.
`selectable`	`selectable`	`boolean`	`false`	Pictures can be selected: click with Ctrl or Shift, the toolbar's Select, or Space.
`selection`	property only	`string[]`	`[]`	The ids selected. Mutable.
`slideshowInterval`	`slideshow-interval`	`number`	`5`	Seconds between pictures in the slideshow.
`sort`	`sort`	`BmxGallerySort`	`'none'`	The order shown. Mutable.
`strings`	`strings`	`Partial<BmxGalleryStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`toolbar`	`toolbar`	`boolean`	`false`	Show the toolbar: search, layout, thumbnail size, sort and (with `selectable`) selection.

Events

Event	Detail	Description
`bmxAction`	`BmxGalleryActionDetail`	Fired when one of `actions` is used in the viewer.
`bmxChange`	`BmxGalleryChangeDetail`	Fired when the toolbar changes the layout, the size, the search or the order.
`bmxClose`	`BmxGalleryItemDetail`	Fired when the viewer closes.
`bmxLoadMore`	`void`	Fired as the reader nears the end while `has-more` is set: append the next items to `items`.
`bmxOpen`	`BmxGalleryOpenDetail`	Fired before an item opens in the viewer. Cancel to show it some other way.
`bmxSelectionChange`	`BmxGallerySelectionDetail`	Fired when the selection changes.
`bmxView`	`BmxGalleryItemDetail`	Fired when the viewer moves to another item.

Methods

Method	Signature	Description
`clearSelection`	`clearSelection() => Promise<void>`	Clears the selection.
`close`	`close() => Promise<void>`	Closes the viewer.
`getItems`	`getItems() => Promise<BmxGalleryItem[]>`	The items in the order shown, after the search.
`next`	`next() => Promise<void>`	The viewer's next item.
`open`	`open(item: string \| number) => Promise<void>`	Opens an item (by id, or its place in the order shown) in the viewer.
`previous`	`previous() => Promise<void>`	The viewer's previous item.
`scrollToItem`	`scrollToItem(id: string, focus?: boolean) => Promise<void>`	Scrolls an item into view (and gives it focus with `focus`).
`selectAll`	`selectAll() => Promise<void>`	Selects every item shown (after the search).
`setFocus`	`setFocus() => Promise<void>`	Puts keyboard focus on the current thumbnail.

Slots

Slot	Description
`empty`	Shown when there are no items at all.

CSS shadow parts

Part	Description
`heading`	A group's heading.
`item`	A thumbnail; also `item-selected`.
`toolbar`	The search, layout, size and sort controls.
`viewer`	The viewer dialog.

CSS custom properties

Property	Description
`--bmx-gallery-accent`	The selection ring and check, and the focus of a thumbnail.
`--bmx-gallery-height`	The gallery's height (it scrolls inside it); `auto` lets it grow with its content.
`--bmx-gallery-placeholder`	The colour a thumbnail shows while it loads (an item's `color` overrides it).
`--bmx-gallery-radius`	Corner radius of a thumbnail.
`--bmx-gallery-viewer-background`	The viewer's background.
`--bmx-gallery-viewer-color`	The viewer's text and icons.
`--bmx-gallery-viewer-panel`	The viewer's bars and its details panel.

`<bmx-gantt>`

Properties

Property	Attribute	Type	Default	Description
`applyChanges`	`apply-changes`	`boolean`	`true`	Whether an edit is applied by the chart itself. On by default, so a plain page works with no script; turn it off to own the lists entirely.
`canChange`	property only	`(detail: BmxGanttTaskChangeDetail) => boolean`	—	Whether a change may be made, asked while a drag moves and before any edit is applied. A function, so it is set from script. `js gantt.canChange = ({ edits }) => edits.every(e => !e.edit.start?.endsWith('-25'));`
`columns`	`columns`	`(BmxGanttColumn \| BmxGanttColumnKey)[] \| string`	`[...DEFAULT_COLUMNS]`	The task-list columns, in order: `columns="wbs,name,start,duration"`, or objects with a `label` and `width` from script.
`editable`	`editable`	`boolean`	`false`	Lets the reader drag bars, draw links and edit cells.
`firstDayOfWeek`	`first-day-of-week`	`number`	`1`	The first day of the week in the headers, 0 for Sunday.
`gridWidth`	`grid-width`	`number`	`460`	Width of the task list in pixels. The reader can drag the divider.
`holidays`	`holidays`	`string[] \| string`	`[]`	Dates that are not worked, `YYYY-MM-DD`: `holidays="2026-12-25,2026-12-28"`.
`label`	`label`	`string`	—	What the plan is called. Without one it is announced as "Project plan".
`links`	`links`	`BmxTaskLink[] \| string`	`[]`	The links between tasks.
`locale`	`locale`	`string`	—	The locale dates are written in. Defaults to the page's.
`projectStart`	`project-start`	`string`	—	The first day work can happen, `YYYY-MM-DD`. Defaults to the earliest task start.
`rowHeight`	`row-height`	`number`	`36`	Row height in pixels. A layout input: the timeline and the list are placed from it.
`showBaselines`	`show-baselines`	`boolean`	`false`	Draws each task's baseline under its bar.
`showCriticalPath`	`show-critical-path`	`boolean`	`true`	Draws the critical path in the critical colour.
`showLinks`	`show-links`	`boolean`	`true`	Draws the links.
`showToday`	`show-today`	`boolean`	`true`	Draws a line at today.
`tasks`	`tasks`	`BmxTask[] \| string`	`[]`	The tasks, as a flat list with parent references.
`today`	`today`	`string`	—	Which day is today, `YYYY-MM-DD`. Defaults to the reader's date.
`toolbar`	`toolbar`	`boolean`	`true`	Shows the zoom and "today" buttons above the chart.
`workingDays`	`working-days`	`number[] \| string`	`[1, 2, 3, 4, 5]`	Days of the week that are worked, 0 for Sunday: `working-days="1,2,3,4,5"`.
`zoom`	`zoom`	`BmxGanttZoom`	`'week'`	How much time the timeline shows: `day`, `week`, `month`, `quarter` or `year`.

Events

Event	Detail	Description
`bmxLinkChange`	`BmxGanttLinkChangeDetail`	Links are about to change. Cancelable.
`bmxSchedule`	`BmxGanttScheduleDetail`	The plan was scheduled, with anything in it that could not be used.
`bmxSelect`	`BmxGanttSelectDetail`	A task was chosen.
`bmxTaskChange`	`BmxGanttTaskChangeDetail`	Tasks are about to change. Cancelable.
`bmxToggle`	`BmxGanttToggleDetail`	A summary task was opened or closed.
`bmxZoomChange`	`{ readonly zoom: BmxGanttZoom; }`	The zoom changed.

Methods

Method	Signature	Description
`collapseAll`	`collapseAll() => Promise<void>`	Closes every summary.
`expandAll`	`expandAll() => Promise<void>`	Opens every summary.
`exportPng`	`exportPng() => Promise<Blob \| null>`	The whole plan as a PNG image, at twice the pixel density for print.
`exportSvg`	`exportSvg() => Promise<string>`	The whole plan - every row, open or not - as a standalone SVG document.
`getSchedule`	`getSchedule() => Promise<BmxSchedule>`	The plan as scheduled: dates, float, the critical path and any problems.
`print`	`print() => Promise<void>`	Prints the whole plan. The chart on screen shows only what is in view, so printing the page would print a window of it; this prints every row.
`scrollToTask`	`scrollToTask(id: string) => Promise<void>`	Scrolls a task into view in both panes, opening its summaries, and focuses its row.
`scrollToToday`	`scrollToToday() => Promise<void>`	Scrolls the timeline to today.
`toggle`	`toggle(id: string, expanded?: boolean) => Promise<void>`	Opens or closes one summary.
`zoomIn`	`zoomIn() => Promise<void>`	Shows less time, in more detail.
`zoomOut`	`zoomOut() => Promise<void>`	Shows more time, in less detail.
`zoomToFit`	`zoomToFit() => Promise<void>`	Picks the finest zoom that shows the whole plan without scrolling sideways.

Slots

Slot	Description
`empty`	what to draw when there are no tasks.
`toolbar-end`	extra controls after the built-in zoom buttons.

CSS shadow parts

Part	Description
`bar-label`
`baseline`
`cell-editor`
`chart`
`empty`
`frame`
`grid`
`grid-body`
`grid-header`
`link-draft`
`link-handle`
`link-remove`
`links`
`non-working`
`plot`
`progress`
`progress-handle`
`resize-handle`
`row-band`
`side-label`
`splitter`
`tick`
`tick-major`
`timeline-body`
`timeline-header`
`today`
`toggle`
`toolbar`
`toolbar-button`
`zoom-name`

CSS custom properties

Property	Description
`--bmx-gantt-bar-background`	A task bar's unfinished part.
`--bmx-gantt-bar-color`	Text on a bar.
`--bmx-gantt-bar-height`	How much of the row a bar fills, as a length.
`--bmx-gantt-bar-progress`	A task bar's finished part.
`--bmx-gantt-bar-radius`	A task bar's corners.
`--bmx-gantt-baseline-color`	The baseline under a bar.
`--bmx-gantt-border`	The lines between rows, columns and header ticks.
`--bmx-gantt-critical-background`	A critical bar's unfinished part.
`--bmx-gantt-critical-progress`	A critical bar's finished part, and critical links.
`--bmx-gantt-grid-width`	Width of the task list. Written by the component from `grid-width`.
`--bmx-gantt-header-background`	The header rows' fill.
`--bmx-gantt-header-color`	The header text.
`--bmx-gantt-height`	How tall the chart is, header included.
`--bmx-gantt-link-color`	The links between bars.
`--bmx-gantt-non-working-background`	Weekends and holidays behind the bars.
`--bmx-gantt-row-height`	Height of a row. Written by the component from `row-height`.
`--bmx-gantt-row-hover`	A row under the pointer.
`--bmx-gantt-row-selected`	The chosen row, in the list and across the timeline.
`--bmx-gantt-summary-color`	A summary bar and a milestone.
`--bmx-gantt-today-color`	The line at today. @part toolbar - the zoom and "today" buttons. @part toolbar-button - one of them. @part zoom-name - the current zoom's name. @part frame - the task list, the divider and the timeline together. @part grid - the task list (`role="treegrid"`). @part grid-header - the list's header row. @part grid-body - the list's scrolling body. @part column-header - one heading. Also `column-header-<key>`. @part row - one task's row. Also `row-summary`, `row-selected`. @part cell - one cell. Also `cell-<key>`. @part cell-editor - the input while a cell is edited. @part toggle - the arrow that opens a summary. @part name - a task's name in the list. Also `name-milestone`. @part splitter - the divider between the list and the timeline. @part chart - the timeline side. @part timeline-header - the two rows of dates. @part tick - one date in them. Also `tick-major`, `tick-minor`, `tick-non-working`, `tick-today`. @part timeline-body - the scrolling timeline. @part plot - the drawing surface inside it. @part non-working - a shaded weekend or holiday. @part row-band - a row's stripe across the timeline. @part bar - one bar. Also `bar-task`, `bar-summary`, `bar-milestone`, `bar-critical`, `bar-<category>`. @part track - a task bar's unfinished part. @part summary-track - a summary bar. @part progress - a task bar's finished part. @part bar-label - a task's name on its bar. @part side-label - a task's name beside a bar too short to hold it. @part baseline - the baseline under a bar. @part resize-handle - the grip on a bar's end, when `editable`. @part progress-handle - the grip at the end of the finished part. @part link-handle - the dot a link is drawn from. @part links - the SVG layer of links. @part link - one link. Also `link-critical`. @part link-draft - the link being drawn. @part link-remove - the button that removes the chosen link. @part today - the line at today. @part empty - what is drawn when there are no tasks.

`<bmx-gauge>`

Properties

Property	Attribute	Type	Default	Description
`animated`	`animated`	`boolean`	`true`	The value moves to each new value rather than jumping (never with reduced motion).
`colorByRange`	`color-by-range`	`boolean`	`true`	The value's bar takes the colour of the band it is in.
`compare`	`compare`	`number`	—	An earlier value: the change from it is shown and read.
`compareLabel`	`compare-label`	`string`	—	What the earlier value was ("last month"), shown after the change.
`disabled`	`disabled`	`boolean`	`false`	Turns an interactive gauge off.
`endAngle`	`end-angle`	`number`	—	Where a dial ends, in degrees.
`format`	`format`	`BmxChartNumberFormat \| string`	—	How values are written: `currency:EUR`, `decimal:1`, `compact`, `percent` (0.25 is 25%), or the object.
`indicator`	`indicator`	`'bar' \| 'needle'`	`'bar'`	How the value is shown on a dial: `bar` (default) or `needle`.
`interactive`	`interactive`	`boolean`	`false`	The reader sets the value: by dragging, or with the keyboard.
`label`	`label`	`string`	—	What the gauge measures: the caption and its accessible name.
`locale`	`locale`	`string`	—	A BCP 47 locale for numbers. Default: the page's `lang`.
`majorTicks`	`major-ticks`	`number`	`5`	About how many numbered ticks.
`max`	`max`	`number`	`100`	The top of the scale.
`min`	`min`	`number`	`0`	The bottom of the scale.
`minorTicks`	`minor-ticks`	`number`	`4`	Small ticks between numbered ones.
`name`	`name`	`string`	—	With a name, an interactive gauge's value goes into an enclosing `<form>`.
`ranges`	`ranges`	`BmxGaugeRange[] \| string`	—	Bands of the scale: `0-60:success, 60-85:warning:Busy, 85-:danger`, or `[{ from, to, color, label }]`.
`showValue`	`show-value`	`boolean`	`true`	Show the value written out.
`startAngle`	`start-angle`	`number`	—	Where a dial starts, in degrees from twelve o'clock (clockwise). The type's own, by default.
`step`	`step`	`number`	`1`	The steps an interactive value moves in.
`strings`	`strings`	`Partial<BmxGaugeStrings> \| string`	—	Words it is read with, to translate: any of `BmxGaugeStrings`. JSON in markup.
`target`	`target`	`number`	—	Where the value should be: a mark on the scale.
`thickness`	`thickness`	`number`	`0.16`	How thick a dial's arc is, as a share of its radius (0.04 to 0.5).
`ticks`	`ticks`	`boolean`	`true`	Show the scale's ticks and their numbers.
`type`	`type`	`BmxGaugeType`	`'radial'`	`radial` (270 degrees, default), `semi`, `ring`, `linear`, `vertical` or `bullet`.
`unit`	`unit`	`string`	—	Written after every number: `%` on a 0-100 scale, `°C`, `rpm`.
`value`	`value`	`number`	`0`	The value. Set by the reader when `interactive`.

Events

Event	Detail	Description
`bmxGaugeChange`	`BmxGaugeChangeDetail`	The reader set a value.
`bmxGaugeInput`	`BmxGaugeChangeDetail`	The reader is moving the value.

Methods

Method	Signature	Description
`setValue`	`setValue(value: number) => Promise<void>`	Sets the value as the reader would, with the events.

CSS shadow parts

Part	Description
`gauge`	the drawing.
`label`	the caption.
`value`	the value written out.

CSS custom properties

Property	Description
`--bmx-gauge-bar-height`	How tall a linear or bullet gauge's drawing is. Default 3.25rem.
`--bmx-gauge-bullet-color`	A bullet graph's bar.
`--bmx-gauge-color`	The value's bar and needle, outside any band.
`--bmx-gauge-size`	How wide a dial is. Default: the width it is given, up to 16rem.
`--bmx-gauge-target`	The target mark.
`--bmx-gauge-text`	The value and the numbers.
`--bmx-gauge-track`	The scale behind the value.
`--bmx-gauge-vertical-height`	How tall a vertical gauge is. Default 14rem.

`<bmx-graph>`

Properties

Property	Attribute	Type	Default	Description
`colorBy`	`color-by`	`string`	`'auto'`	How nodes are coloured: `auto` (by `group` when nodes have one), `none`, `community`, `component`, or a field (text fields by category, numbers low to high).
`combine`	`combine`	`string`	—	Combine nodes that share a value of this field into one; the reader opens them again.
`directed`	`directed`	`boolean`	`false`	Links have a direction: arrowheads, a hierarchy follows them, and measures count in and out.
`direction`	`direction`	`BmxGraphDirection`	`'down'`	Which way a hierarchy grows: `down` (default), `up`, `right` or `left`.
`format`	`format`	`BmxChartNumberFormat \| string`	—	How numbers are written: `percent`, `currency:EUR`, `decimal:1`, `compact`, or the object.
`highlight`	`highlight`	`'hover' \| 'none'`	`'hover'`	Light up a node's neighbours when it is pointed at or reached by the keyboard: `hover` (default) or `none`.
`label`	`label`	`string`	—	What the graph shows: its accessible name.
`labelField`	`label-field`	`string`	`'label'`	The field of a node holding its name.
`labels`	`labels`	`'auto' \| 'all' \| 'none'`	`'auto'`	Node names: `auto` (as there is room, and always for what is chosen), `all`, or `none`.
`layout`	`layout`	`BmxGraphLayout`	`'force'`	`force` (default), `hierarchy`, `radial`, `circular`, `grid`, or `preset` (each node's own `x` and `y`).
`legend`	`legend`	`'bottom' \| 'none'`	`'bottom'`	Where the legend goes: `bottom` (default) or `none`.
`linkDistance`	`link-distance`	`number`	`70`	How long links want to be, for the force layout.
`linkLabels`	`link-labels`	`'auto' \| 'all' \| 'none'`	`'auto'`	Link labels: `auto` (when zoomed in, and on a path), `all`, or `none`.
`links`	`links`	`BmxGraphLink[] \| string`	—	The links: `[{ source, target, label, weight, … }]` (`from` and `to` also work), as a property or JSON.
`locale`	`locale`	`string`	—	A BCP 47 locale for numbers and times. Default: the page's `lang`.
`maxNodeSize`	`max-node-size`	`number`	`26`	The radius of the largest node when sized by a value.
`maxZoom`	`max-zoom`	`number`	`8`	How far in the reader can zoom.
`nodeSize`	`node-size`	`number`	`8`	The radius of a node, in pixels at zoom 1.
`nodes`	`nodes`	`BmxGraphNode[] \| { nodes?: unknown; links?: unknown } \| string`	—	The nodes: `[{ id, label, group, … }]`, as a property or JSON. May also be `{ nodes, links }`.
`pinOnDrag`	`pin-on-drag`	`boolean`	`true`	A node dragged by the reader stays where it is put.
`root`	`root`	`string`	—	The node a radial or hierarchy layout starts from. Default: the most linked node of each piece.
`selectable`	`selectable`	`'none' \| 'single' \| 'multiple'`	`'single'`	Nodes the reader can select: `none`, `single` (default) or `multiple` (Ctrl or Shift, and the lasso).
`selected`	`selected`	`string[] \| string`	`[]`	The selected nodes' ids. Changes write back here.
`sizeBy`	`size-by`	`string`	`'none'`	How nodes are sized: `none` (each node's `size`, or the same), `degree`, `in-degree`, `out-degree`, `pagerank`, `betweenness`, or a number field.
`strings`	`strings`	`Partial<BmxGraphStrings> \| string`	—	Replacements for the graph's wording, as a property or JSON.
`tableView`	`table-view`	`boolean`	`true`	Offer the table view.
`timeBar`	`time-bar`	`boolean`	`false`	Show the time bar (when nodes or links have times): a histogram to choose a range on, and a play button.
`timeField`	`time-field`	`string`	`'time'`	The field holding when a node or link exists.
`timeRange`	`time-range`	`[number, number] \| string \| null`	—	Only what exists in this range: `[from, to]` in milliseconds, or `"2026-01-01,2026-06-30"`. Changes write back here.
`timeZone`	`time-zone`	`string`	—	The time zone times are written in. Default: the reader's.
`tooltipFields`	`tooltip-fields`	`string[] \| string`	—	Fields of a node shown under its name in the tooltip and the table: `"email,role"` or a list.
`zoomable`	`zoomable`	`boolean`	`true`	The reader can pan and zoom.

Events

Event	Detail	Description
`bmxGraphExpand`	`BmxGraphExpandDetail`	A node is being expanded or folded. Cancelable; for `load`, add the node's neighbours with `addData()`.
`bmxGraphItemClick`	`BmxGraphItemDetail`	A node, combined node or link was clicked, or chosen with the keyboard.
`bmxGraphLayoutChange`	`BmxGraphLayoutDetail`	Nodes moved: while a layout runs (a few times a second) and once when it comes to rest.
`bmxGraphSelect`	`BmxGraphSelectDetail`	Nodes were selected or unselected.
`bmxGraphTimeChange`	`BmxGraphTimeDetail`	The time range changed.
`bmxGraphViewChange`	`BmxGraphViewDetail`	The view was panned or zoomed.

Methods

Method	Signature	Description
`addData`	`addData(data: { nodes?: unknown; links?: unknown; }) => Promise<void>`	Adds nodes and links (`{ nodes, links }`), placed beside the nodes they link to. A repeated node id updates that node.
`centerOn`	`centerOn(target: string \| [number, number], zoom?: number) => Promise<void>`	Centres the view on a node or a point `[x, y]`, at a zoom if given.
`clearPath`	`clearPath() => Promise<void>`	Stops showing a path, and what `find()` lit up.
`clearSelection`	`clearSelection() => Promise<void>`	Clears the selection.
`collapse`	`collapse(id: string) => Promise<void>`	Collapses a node: folds its leaves away, or closes the combined node it belongs to.
`expand`	`expand(id: string) => Promise<void>`	Expands a node: opens a combined node, unfolds leaves, or asks the page for neighbours (`bmxGraphExpand`).
`find`	`find(text: string, fields?: string[]) => Promise<string[]>`	Lights up the nodes whose name (or any field given) contains the text, dimming the rest; returns their ids. Empty text clears it.
`findPath`	`findPath(from: string, to: string, options?: { weighted?: boolean; }) => Promise<BmxGraphPathResult \| null>`	Finds and shows the shortest path between two nodes; null when there is none. `weighted` counts link weights as lengths; with `directed`, links are followed only forwards.
`fit`	`fit(ids?: string[] \| null) => Promise<void>`	Fits nodes into the view: all of them, or the ones given.
`getMetrics`	`getMetrics() => Promise<BmxGraphNodeMetrics[]>`	Measures for every node: degree (in and out), PageRank, betweenness, community and component.
`getPositions`	`getPositions() => Promise<Record<string, [number, number]>>`	Every node's place, in the graph's units: `{ id: [x, y] }`.
`getView`	`getView() => Promise<BmxGraphViewDetail>`	The zoom and the middle of the view.
`paintOverview`	`paintOverview(canvas: HTMLCanvasElement, width: number, height: number) => Promise<BmxGraphOverviewFrame \| null>`	Draws the whole graph small into a canvas, for `bmx-graph-overview`; returns how the canvas maps onto the graph.
`pin`	`pin(ids: string[]) => Promise<void>`	Keeps nodes where they are.
`relayout`	`relayout() => Promise<void>`	Lays the graph out again from the start.
`removeNodes`	`removeNodes(ids: string[]) => Promise<void>`	Takes nodes out, with their links.
`toJson`	`toJson() => Promise<{ nodes: BmxGraphNode[]; links: BmxGraphLink[]; }>`	The nodes (with their places) and links, as data.
`toPng`	`toPng(scale?: number) => Promise<Blob \| null>`	The graph as it is drawn, as a PNG, at `scale` times the screen's pixels.
`toSvg`	`toSvg() => Promise<string>`	The graph as it is drawn, as a standalone SVG document.
`unpin`	`unpin(ids?: string[]) => Promise<void>`	Lets pinned nodes move again: the ones given, or all of them.
`whenSettled`	`whenSettled() => Promise<void>`	Resolves when the layout has come to rest.

CSS shadow parts

Part	Description
`controls`	the zoom, lasso and table buttons.
`legend`	the legend.
`stage`	the drawing.
`table`	the table view.
`time-bar`	the time bar.
`tooltip`	the name and details under the pointer.

CSS custom properties

Property	Description
`--bmx-graph-background`	Behind the graph.
`--bmx-graph-color-0`	The first category. Colours 0 to 9 are used in turn.
`--bmx-graph-color-1`	Category 2.
`--bmx-graph-color-2`	Category 3.
`--bmx-graph-color-3`	Category 4.
`--bmx-graph-color-4`	Category 5.
`--bmx-graph-color-5`	Category 6.
`--bmx-graph-color-6`	Category 7.
`--bmx-graph-color-7`	Category 8.
`--bmx-graph-color-8`	Category 9.
`--bmx-graph-color-9`	Category 10.
`--bmx-graph-height`	How tall the graph is. Default: 30rem.
`--bmx-graph-high`	The highest value.
`--bmx-graph-label`	Node and link names.
`--bmx-graph-link`	A link.
`--bmx-graph-low`	The lowest value, when colouring by a number.
`--bmx-graph-node`	A node with no colouring.
`--bmx-graph-path`	A path found between two nodes.
`--bmx-graph-selected`	The ring round a selected node, and the lasso.

`<bmx-graph-overview>`

Properties

Property	Attribute	Type	Default	Description
`for`	`for`	`string`	—	The id of the `bmx-graph` to show. Default: the only graph beside the overview.
`label`	`label`	`string`	`'Overview of the graph'`	Its accessible name.

CSS shadow parts

Part	Description
`canvas`	the picture of the graph.
`view`	the box showing the part in view.

CSS custom properties

Property	Description
`--bmx-graph-overview-height`	How tall it is. Default: 8rem.
`--bmx-graph-overview-view`	The box showing the part in view.
`--bmx-graph-overview-width`	How wide the overview is. Default: 12rem.

`<bmx-image-editor>`

Properties

Property	Attribute	Type	Default	Description
`actions`	`actions`	`readonly BmxImageAction[] \| string`	`'reset,download'`	The buttons in the footer: any of reset, cancel, apply, download. `editFile` adds cancel and apply while it waits.
`aspect`	`aspect`	`string`	—	The crop shape at the start ("1:1"). With `lock-aspect`, the only one.
`aspectRatios`	`aspect-ratios`	`readonly string[] \| string`	`'free,original,1:1,4:5,3:2,4:3,16:9'`	The crop shapes offered: "free", "original", or ratios such as "16:9".
`background`	`background`	`string`	`'#ffffff'`	Painted behind transparent parts when saving as JPEG.
`cropShape`	`crop-shape`	`'rect' \| 'circle'`	`'rect'`	Show the crop as a circle, and save the picture round (transparent outside it in PNG and WebP).
`disabled`	`disabled`	`boolean`	`false`
`edits`	`edits`	`Partial<BmxImageEdits> \| string`	—	Edits to apply to the picture when it opens (JSON in markup). Kept up to date as the picture is edited.
`fileName`	`file-name`	`string`	—	The saved file's name. Default: the original's, with the new format's extension.
`fontFamily`	`font-family`	`string`	`'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'`	The font text marks are drawn in, as CSS `font-family`.
`label`	`label`	`string`	—	What the editor is, for screen readers.
`lockAspect`	`lock-aspect`	`boolean`	`false`	Keep the crop to `aspect` and offer no other shape: an avatar, a banner.
`maxHeight`	`max-height`	`number`	—	The tallest the saved picture may be.
`maxPixels`	`max-pixels`	`number`	`16_777_216`	The most pixels the saved picture may have. Default 16.7 million, the most some phones can draw.
`maxWidth`	`max-width`	`number`	—	The widest the saved picture may be.
`name`	`name`	`string`	—	The form field name. The edited picture is submitted as a file.
`palette`	`palette`	`readonly string[] \| string`	`['#e03131', '#f08c00', '#ffd43b', '#2f9e44', '#1971c2', '#7048e8', '#111111', '#ffffff']`	Colours offered for marks: a list, or comma-separated in markup.
`quality`	`quality`	`number`	`0.9`	Quality for JPEG and WebP, from 0 to 1.
`required`	`required`	`boolean`	`false`	A picture must be opened before the form can be sent.
`src`	`src`	`string`	—	The picture to open: a URL (a picture from another site must allow CORS), a data URL or an object URL. Or call `loadImage` with a file.
`strings`	`strings`	`Partial<BmxImageEditorStrings> \| string`	—	Words the editor shows or says: any of `BmxImageEditorStrings`. JSON in markup.
`tool`	`tool`	`BmxImageTool`	—	The tool open at the start.
`tools`	`tools`	`readonly BmxImageTool[] \| string`	`['crop', 'adjust', 'filter', 'annotate', 'redact', 'resize']`	The tools offered, in order: any of crop, adjust, filter, annotate, redact, resize. A list, or comma-separated in markup.
`type`	`type`	`string`	—	The format saved: image/jpeg, image/png or image/webp. Default: the original's, or PNG.

Events

Event	Detail	Description
`bmxImageApply`	`BmxImageFileDetail`	The reader pressed Done: the finished file.
`bmxImageCancel`	`void`	The reader pressed Cancel.
`bmxImageEdit`	`BmxImageEditDetail`	The edits changed.
`bmxImageError`	`BmxImageErrorDetail`	A picture could not be opened or saved.
`bmxImageExport`	`BmxImageFileDetail`	The picture was saved: downloaded, or made into a file or blob.
`bmxImageLoad`	`BmxImageLoadDetail`	A picture opened. `metadata` says what it carried besides pixels.
`bmxImageToolChange`	`BmxImageToolDetail`	The reader chose another tool.

Methods

Method	Signature	Description
`cleanFile`	`cleanFile(file: Blob, name?: string) => Promise<File>`	Takes the location, camera and other details out of any JPEG, PNG or WebP file, without changing a pixel or compressing it again. Needs no picture open.
`clear`	`clear() => Promise<void>`	Closes the picture.
`download`	`download(name?: string, options?: BmxImageExportOptions) => Promise<void>`	Saves the edited picture to the reader's downloads.
`editFile`	`editFile(file: Blob, name?: string) => Promise<File \| null>`	Opens a file to edit and waits: resolves with the edited file when the reader presses Done, or null when they press Cancel. For an upload field: `upload.prepareFile = file => editor.editFile(file)`.
`flip`	`flip(axis?: "horizontal" \| "vertical") => Promise<void>`	Mirrors the picture.
`getEdits`	`getEdits() => Promise<BmxImageEdits>`	The edits, as JSON-ready data.
`getMetadata`	`getMetadata() => Promise<BmxImageMetadata \| null>`	What the open picture carried besides pixels (location, camera, owner), or null.
`loadImage`	`loadImage(source: BmxImageSource, name?: string) => Promise<void>`	Opens a picture: a file, a blob, a URL, an `<img>`, a canvas, an `ImageBitmap` or `ImageData`. Resolves when it is shown.
`redo`	`redo() => Promise<void>`
`reset`	`reset() => Promise<void>`	Back to the picture as it opened. Undo can step back from it.
`rotate`	`rotate(direction?: "left" \| "right") => Promise<void>`	Turns the picture a quarter.
`setEdits`	`setEdits(edits: Partial<BmxImageEdits> \| string) => Promise<void>`	Replaces the edits, from data or JSON. Undo can step back from it.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`
`setTool`	`setTool(tool: BmxImageTool) => Promise<void>`	Opens a tool.
`toBlob`	`toBlob(options?: BmxImageExportOptions) => Promise<Blob>`	The edited picture as a Blob.
`toDataURL`	`toDataURL(options?: BmxImageExportOptions) => Promise<string>`	The edited picture as a data URL.
`toFile`	`toFile(name?: string, options?: BmxImageExportOptions) => Promise<File>`	The edited picture as a File.
`undo`	`undo() => Promise<void>`

CSS shadow parts

Part	Description
`empty`	what shows before a picture is opened.
`footer`	the size, the privacy note and the actions.
`panel`	the current tool's settings.
`stage`	the area the picture is shown in.
`toolbar`	the row of tools and commands.

CSS custom properties

Property	Description
`--bmx-image-editor-crop`	The crop's edge and handles.
`--bmx-image-editor-height`	How tall the editor is. Default 36rem.
`--bmx-image-editor-selection`	The outline and handles of the selected mark.
`--bmx-image-editor-shade`	Over the part the crop leaves out.
`--bmx-image-editor-stage`	Behind the picture.

`<bmx-infinite-canvas>`

Properties

Property	Attribute	Type	Default	Description
`changeBatch`	`change-batch`	`number`	`0`	Gather changes for this many milliseconds into one `bmxCanvasStateChange`. 0 sends each at once.
`channel`	`channel`	`string`	—	Share this board with every other canvas in the same browser that has the same `channel` - other tabs and windows of the site - with no server. For users on other machines, pass a relay to `joinRoom()`.
`clientId`	`client-id`	`string`	—	This copy's id in a shared session: part of every change it makes. Read once, when the element loads.
`cursorThrottle`	`cursor-throttle`	`number`	`50`	`bmxCursorMove` at most this often.
`edgeRoute`	`edge-route`	`BmxCanvasRoute`	`'curved'`	How new connectors run.
`edges`	`edges`	`BmxCanvasEdge[] \| string`	`[]`	The connectors. Setting the list makes the board hold exactly these.
`fitOnLoad`	`fit-on-load`	`boolean`	`true`	Frame the board when it loads.
`follow`	`follow`	`string`	—	Follow another user's view: their peer id. Panning or zooming yourself stops following.
`grid`	`grid`	`'dots' \| 'lines' \| 'none'`	`'dots'`	The background grid.
`gridSize`	`grid-size`	`number`	`24`	Grid spacing in world units.
`guides`	`guides`	`boolean`	`true`	Line dragged items up with their neighbours, and show guides.
`label`	`label`	`string`	—	The accessible name. Default: "Canvas".
`lodThreshold`	`lod-threshold`	`number`	`500`	More items in view than this and the board is painted rather than built from DOM.
`lodZoom`	`lod-zoom`	`number`	`0.4`	Below this zoom the board is painted rather than built from DOM.
`maxImageBytes`	`max-image-bytes`	`number`	`2_000_000`	Images dropped or pasted larger than this, in bytes, are refused unless `uploadImage` is set.
`maxZoom`	`max-zoom`	`number`	`8`
`minZoom`	`min-zoom`	`number`	`0.05`
`minimap`	`minimap`	`boolean`	`true`	Show the minimap.
`moveThrottle`	`move-throttle`	`number`	`50`	`bmxNodeMove` at most this often during a drag, in milliseconds.
`nodes`	`nodes`	`BmxCanvasNode[] \| string`	`[]`	The nodes. Setting the list makes the board hold exactly these, with the fewest changes; JSON in markup.
`noteColor`	`note-color`	`string`	`'yellow'`	The colour of new notes and shapes: `yellow orange pink violet blue teal green grey`, or any CSS colour.
`peers`	`peers`	`BmxCanvasPeer[] \| string`	`[]`	Other users on the board.
`penColor`	`pen-color`	`string`	`''`	The pen's colour: a palette name or any CSS colour. Empty draws in the theme's text colour.
`penWidth`	`pen-width`	`number`	`3`	The pen's width in world units. The highlighter is five times as wide.
`readonly`	`readonly`	`boolean`	`false`	View only: pan, zoom and select, but change nothing.
`shapeKind`	`shape-kind`	`BmxCanvasShapeKind`	`'rounded'`	The outline the shape tool draws.
`snapToGrid`	`snap-to-grid`	`boolean`	`false`	Snap moved, resized and new items to the grid. Alt held while dragging turns it off.
`tool`	`tool`	`BmxCanvasTool`	`'select'`	What the pointer does.
`toolbar`	`toolbar`	`boolean`	`true`	Show the toolbar.
`uploadImage`	property only	`(file: File) => Promise<string>`	—	Turns a dropped or pasted image file into an address the node will show, such as the URL of your upload. Without it, images are kept in the board as data URLs. Set from script; markup cannot hold a function.
`userColor`	`user-color`	`string`	—	Your colour, shown to the others in a room: any CSS colour.
`userName`	`user-name`	`string`	—	Your name, shown to the others in a room.
`viewportThrottle`	`viewport-throttle`	`number`	`100`	`bmxViewportChange` at most this often.
`wheel`	`wheel`	`'auto' \| 'pan' \| 'zoom'`	`'auto'`	What the mouse wheel does: `auto` zooms with a wheel and pans with a trackpad; Ctrl or Cmd always zooms.
`zoomControls`	`zoom-controls`	`boolean`	`true`	Show the zoom buttons.

Events

Event	Detail	Description
`bmxCanvasStateChange`	`BmxCanvasStateChangeDetail`	The board changed here: send `detail.ops` to the other copies.
`bmxCursorMove`	`BmxCanvasCursorDetail`	The pointer moved over the board, or left it.
`bmxFileDrop`	`BmxCanvasFileDropDetail`	Files were dropped or pasted. Cancel it to handle them yourself; otherwise images are added.
`bmxNodeActivate`	`BmxCanvasActivateDetail`	A node with nothing to edit - an image, embedded content - was opened.
`bmxNodeMove`	`BmxCanvasNodeMoveDetail`	Nodes are being dragged or resized.
`bmxPeersChange`	`BmxCanvasPeersChangeDetail`	The users in the room changed.
`bmxSelectionChange`	`BmxCanvasSelectionDetail`	The selection changed.
`bmxToolChange`	`BmxCanvasToolDetail`	The tool changed.
`bmxViewportChange`	`BmxCanvasViewportDetail`	The view moved or zoomed.

Methods

Method	Signature	Description
`addEdges`	`addEdges(edges: readonly Partial<BmxCanvasEdge>[] \| Partial<BmxCanvasEdge>) => Promise<BmxCanvasEdge[]>`
`addImage`	`addImage(file: Blob, at?: BmxCanvasPoint) => Promise<BmxCanvasNode \| null>`	Adds an image from a file or blob, centred on a world point or the view.
`addNodes`	`addNodes(nodes: readonly Partial<BmxCanvasNode>[] \| Partial<BmxCanvasNode>) => Promise<BmxCanvasNode[]>`	Adds nodes; returns them as stored, with ids given to those without.
`align`	`align(how: BmxCanvasAlign, ids?: readonly string[]) => Promise<void>`	Lines nodes up: the selection when none are given.
`applyRemote`	`applyRemote(ops: readonly BmxCanvasOp[] \| BmxCanvasOp) => Promise<number>`	Applies changes from another copy of the board, as `bmxCanvasStateChange` or `bmxNodeMove` gave them there. Returns how many took effect.
`bringToFront`	`bringToFront(ids?: readonly string[]) => Promise<void>`	Brings nodes to the front: the selection when none are given.
`centerOn`	`centerOn(id: string, animate?: boolean) => Promise<boolean>`	Brings a node to the centre of the view, zooming in if it is too small to read.
`distribute`	`distribute(axis: "horizontal" \| "vertical", ids?: readonly string[]) => Promise<void>`	Spaces three or more nodes evenly: the selection when none are given.
`exportJson`	`exportJson(options?: BmxCanvasExportOptions) => Promise<string>`	The board as JSON text: the snapshot.
`exportPng`	`exportPng(options?: BmxCanvasExportOptions) => Promise<Blob>`	The board, or the selection, as a PNG image. Images from other sites appear only if they allow it (CORS).
`exportSvg`	`exportSvg(options?: BmxCanvasExportOptions) => Promise<string>`	The board, or the selection, as an SVG document.
`find`	`find(text: string) => Promise<string[]>`	The nodes whose text contains `text`, in reading order.
`followPeer`	`followPeer(id: string \| null) => Promise<void>`	Follows another user's view, by their peer id; null stops.
`getNode`	`getNode(id: string) => Promise<BmxCanvasNode \| null>`	A copy of one node.
`getSelection`	`getSelection() => Promise<BmxCanvasSelectionDetail>`
`getSnapshot`	`getSnapshot() => Promise<BmxCanvasSnapshot>`	The board as plain data, to save.
`getSyncState`	`getSyncState() => Promise<BmxCanvasSyncState>`	The board with every change's stamp: what a client joining late merges with `mergeSyncState()`.
`getViewport`	`getViewport() => Promise<BmxCanvasViewportDetail>`
`group`	`group(ids?: readonly string[]) => Promise<string \| null>`	Groups nodes, so they are selected and moved together: the selection when none are given. Returns the group id.
`insertTemplate`	`insertTemplate(name: BmxCanvasTemplate) => Promise<string[]>`	Adds a ready-made board - `retro`, `kanban`, `swot`, `flowchart` or `mindmap` - where the view is, and shows it. Returns the new ids.
`joinRoom`	`joinRoom(room: BmxCanvasTransport \| string) => Promise<boolean>`	Shares the board through a room: a channel name, for the other tabs of this browser, or a transport - `{ send(text), subscribe(listener) }` - over a relay that forwards each message to the others. Changes, drags, pointers, selections and views are exchanged, and a copy that joins late is brought up to date. Returns false if the transport is not available.
`leaveRoom`	`leaveRoom() => Promise<void>`	Leaves the room, telling the others.
`loadSnapshot`	`loadSnapshot(snapshot: BmxCanvasSnapshot) => Promise<void>`	Replaces the board. Sends nothing and clears the undo history.
`mergeSyncState`	`mergeSyncState(state: BmxCanvasSyncState) => Promise<boolean>`	Merges another copy's sync state. Returns whether anything changed.
`redo`	`redo() => Promise<boolean>`
`removeEdges`	`removeEdges(ids: readonly string[] \| string) => Promise<void>`
`removeNodes`	`removeNodes(ids: readonly string[] \| string) => Promise<void>`	Removes nodes, and the connectors that end on them.
`rotate`	`rotate(degrees: number, ids?: readonly string[]) => Promise<void>`	Turns nodes by `degrees`, clockwise, about the centre of the box around them: the selection when none are given. Frames and locked nodes stay as they are. To set a node's angle outright, update its `rotation`.
`screenToWorld`	`screenToWorld(clientX: number, clientY: number) => Promise<BmxCanvasPoint>`	A point in the page (`clientX`, `clientY`) in world units.
`select`	`select(ids: readonly string[] \| string) => Promise<void>`	Selects nodes and connectors by id; an empty list clears the selection.
`sendToBack`	`sendToBack(ids?: readonly string[]) => Promise<void>`	Sends nodes to the back: the selection when none are given.
`setFocus`	`setFocus() => Promise<void>`	Focuses the board.
`setViewport`	`setViewport(viewport: Partial<BmxCanvasCamera>, animate?: boolean) => Promise<void>`	Moves the view: `x` and `y` are the world point for the top-left corner.
`tidy`	`tidy(ids?: readonly string[]) => Promise<void>`	Lays nodes out in a tidy grid: the selection when none are given.
`undo`	`undo() => Promise<boolean>`
`ungroup`	`ungroup(ids?: readonly string[]) => Promise<void>`	Takes nodes out of their groups: the selection when none are given.
`updateEdges`	`updateEdges(updates: readonly (Partial<BmxCanvasEdge> & { id: string; })[] \| (Partial<BmxCanvasEdge> & { id: string; })) => Promise<void>`
`updateNodes`	`updateNodes(updates: readonly (Partial<BmxCanvasNode> & { id: string; })[] \| (Partial<BmxCanvasNode> & { id: string; })) => Promise<void>`	Changes nodes: each entry names the node by `id` and carries the fields to change.
`vote`	`vote(id: string, delta?: number) => Promise<{ total: number; mine: number; } \| null>`	Adds this user's vote to a node, or takes one away with a negative `delta`.
`worldToScreen`	`worldToScreen(x: number, y: number) => Promise<BmxCanvasPoint>`	A world point as a point in the page.
`zoomIn`	`zoomIn() => Promise<void>`
`zoomOut`	`zoomOut() => Promise<void>`
`zoomTo`	`zoomTo(zoom: number, animate?: boolean) => Promise<void>`	Zooms about the centre of the view.
`zoomToFit`	`zoomToFit(ids?: readonly string[], animate?: boolean) => Promise<void>`	Frames the whole board, or the nodes given.

Slots

Slot	Description
`(named)`	an `html` node's content: give the element the node's `slot` name.
`toolbar-end`	extra controls at the end of the toolbar.

CSS shadow parts

Part	Description
`arrange-select`
`context-bar`
`context-button`
`drawbar`
`edge-end`
`edges`
`far-layer`
`following`
`handle`
`minimap`
`port`
`search`
`search-count`
`search-input`
`selection`
`shape-select`
`swatch`
`templates-item`
`templates-menu`
`tool`
`toolbar`
`turn-handle`
`viewport`
`world`
`zoom-button`
`zoom-controls`

CSS custom properties

Property	Description
`--bmx-infinite-canvas-background`	Behind the board.
`--bmx-infinite-canvas-blue`	The blue note.
`--bmx-infinite-canvas-blue-ink`	Blue lines.
`--bmx-infinite-canvas-edge`	Connectors without a colour of their own.
`--bmx-infinite-canvas-frame`	Inside a frame.
`--bmx-infinite-canvas-green`	The green note.
`--bmx-infinite-canvas-green-ink`	Green lines.
`--bmx-infinite-canvas-grey`	The grey note.
`--bmx-infinite-canvas-grey-ink`	Grey lines.
`--bmx-infinite-canvas-grid`	The grid's dots or lines.
`--bmx-infinite-canvas-height`	How tall the canvas is.
`--bmx-infinite-canvas-laser`	The laser pointer's trail. @part viewport - the board: pan, zoom and everything drawn on it. @part world - the layer that moves and zooms. @part edges - the connectors. @part far-layer - the painted board, zoomed far out. @part selection - the box around the selection. @part handle - a resize handle. @part port - a dot to drag a connector from. @part edge-end - an end of the selected connector, to drag onto another item. @part toolbar - the tools. @part tool - one tool button. @part context-bar - the bar over the selection. @part context-button - one of its buttons. @part swatch - a colour in it. @part shape-select - its shape list. @part zoom-controls - the zoom buttons. @part zoom-button - one of them. @part minimap - the overview in the corner. @part drawbar - the pen, highlighter, eraser and ink colours, while drawing. @part templates-menu - the list of templates. @part templates-item - one template in it. @part arrange-select - the Arrange list over a selection of several items. @part search - the find bar. @part search-input - its field. @part search-count - "2 of 5". @part following - the note saying whose view is being followed.
`--bmx-infinite-canvas-note-text`	Text on notes and coloured shapes, which keep their paper colours on dark themes.
`--bmx-infinite-canvas-orange`	The orange note.
`--bmx-infinite-canvas-orange-ink`	Orange lines.
`--bmx-infinite-canvas-pink`	The pink note.
`--bmx-infinite-canvas-pink-ink`	Pink lines.
`--bmx-infinite-canvas-selection`	Selection outlines, handles and guides.
`--bmx-infinite-canvas-teal`	The teal note.
`--bmx-infinite-canvas-teal-ink`	Teal lines.
`--bmx-infinite-canvas-violet`	The violet note.
`--bmx-infinite-canvas-violet-ink`	Violet lines.
`--bmx-infinite-canvas-yellow`	The yellow note. Also -orange, -pink, -violet, -blue, -teal, -green and -grey.
`--bmx-infinite-canvas-yellow-ink`	Lines and text in yellow: a shape's outline, a connector. Also -orange-ink and so on.

`<bmx-input>`

Properties

Property	Attribute	Type	Default	Description
`appearance`	`appearance`	`BmxInputAppearance`	`'outline'`	Visual treatment.
`autoFocus`	`auto-focus`	`boolean`	`false`	Focus the field once it has rendered.
`autocomplete`	`autocomplete`	`string`	—	Autocomplete hint. Worth setting: it is what makes a form fillable.
`clearable`	`clearable`	`boolean`	`false`	Show a clear button once the field has content.
`counter`	`counter`	`boolean`	`false`	Show a character counter. Pairs with `maxLength`.
`description`	`description`	`string`	—	Help text below the field. Always visible, unlike a placeholder.
`disabled`	`disabled`	`boolean`	`false`	Disable the field.
`enterkeyhint`	`enterkeyhint`	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	—	What the on-screen keyboard's action key should say.
`errorText`	`error-text`	`string`	—	An error supplied by the consumer - a server response, typically.
`fullWidth`	`full-width`	`boolean`	`false`	Stretch to the width of the container.
`hideLabel`	`hide-label`	`boolean`	`false`	Hide the label visually while keeping it for assistive technology. For a field whose purpose is obvious from context - a search box beside a search button. Not a licence to drop labels: the accessible name still has to exist, which is why this hides rather than removes.
`inputmode`	`inputmode`	`'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`	—	On-screen keyboard hint.
`label`	`label`	`string`	—	The field's label. Required unless the `label` slot is used.
`mask`	`mask`	`string`	—	A mask pattern. `#` accepts a digit, `A` a letter, `*` either; every other character is a literal the mask supplies. Prefix a token with a backslash to use it as a literal. `##/##/####`, `+44 #### ######`, `\####` for a hash and three digits.
`maskEager`	`mask-eager`	`boolean`	`true`	Show the mask's separators as the user reaches them. On by default, so typing the second digit of a date shows `12/`. Turn it off for a field whose partially-filled value is stored rather than only displayed.
`maskFormat`	property only	`(raw: string) => string`	—	Render the raw value for display, in place of a pattern. For anything whose separators move as the value grows - currency, a locale-aware number. It may insert and remove characters freely but must not transform them: `1234` may become `£1,234.00`, and must not become `ONE THOUSAND`. A transforming formatter still produces the right text, but the caret can then only be placed at the end of it.
`maskParse`	property only	`(display: string) => string`	—	The inverse of `maskFormat`.
`max`	`max`	`string \| number`	—	Maximum, for the numeric and date types.
`maxLength`	`max-length`	`number`	—	Maximum length, in characters rather than UTF-16 code units. Enforced here rather than by the native attribute - see the note on the class. Also drives the counter's limit when `counter` is set.
`messages`	property only	`BmxFieldMessages`	—	Replacements for the default wording, by reason. Accepts the JSON spelling of the object as well, for templates that can only write attributes. See `src/core/markup.ts`.
`min`	`min`	`string \| number`	—	Minimum, for the numeric and date types.
`minLength`	`min-length`	`number`	—	Minimum length. Counted against `rawValue` when the field is masked.
`name`	`name`	`string`	—	The field's name in the form it belongs to.
`passwordToggle`	`password-toggle`	`boolean`	`false`	Show a button that reveals the password. Only for `type="password"`.
`pattern`	`pattern`	`string`	—	A regular expression the value must match, as the native attribute takes it.
`placeholder`	`placeholder`	`string`	—	Placeholder text. Never a substitute for a label.
`readonly`	`readonly`	`boolean`	`false`	Make the field read-only. It still submits and is still focusable.
`required`	`required`	`boolean`	`false`	Require a value.
`shape`	`shape`	`BmxShape`	`'rounded'`	Corner treatment. `circle` is not meaningful here and behaves as `pill`.
`size`	`size`	`BmxSize`	`'md'`	Size step.
`spellcheck`	`spellcheck`	`boolean`	`false`	Spellchecking. Off by default for the identifiers most fields hold.
`step`	`step`	`string \| number`	—	Granularity, for the numeric and date types.
`submitValue`	`submit-value`	`BmxInputSubmitValue`	`'raw'`	Which value the form receives. See the note on the class.
`tone`	`tone`	`BmxTone`	`'primary'`	Semantic colour role, used for the focus ring. An error overrides it.
`type`	`type`	`BmxInputType`	`'text'`	The input type.
`validateOn`	`validate-on`	`BmxValidateOn`	`'blur'`	When the field is willing to reveal a problem.
`validator`	property only	`BmxInputValidator`	—	A consumer's own check, run once the value is structurally whole.
`value`	`value`	`string`	`''`	What the field displays, mask and all. Assigning to it runs the mask, so setting `01011990` on a date-masked field leaves `01/01/1990` behind. Read `rawValue` for the significant characters.

Events

Event	Detail	Description
`bmxBlur`	`void`	Fired when the field loses focus.
`bmxChange`	`BmxInputChangeDetail`	Fired when the field is committed - on blur, or on Enter.
`bmxClear`	`void`	Fired when the clear button is used, or `clear()` is called.
`bmxFocus`	`void`	Fired when the field gains focus.
`bmxInput`	`BmxInputChangeDetail`	Fired on every edit.
`bmxValidityChange`	`BmxInputValidityDetail`	Fired whenever the resolved validity changes.

Methods

Method	Signature	Description
`checkValidity`	`checkValidity() => Promise<boolean>`	Validate now and return whether the field passed. Silent: it does not reveal a message the user has not earned yet. Use `reportValidity` to both check and show.
`clear`	`clear() => Promise<void>`	Empty the field.
`getRawValue`	`getRawValue() => Promise<string>`	The significant characters, with the mask's literals removed.
`removeFocus`	`removeFocus() => Promise<void>`	Remove focus from the field.
`reportValidity`	`reportValidity() => Promise<boolean>`	Validate, reveal any problem, and focus the field if it has one.
`selectAll`	`selectAll() => Promise<void>`	Select the field's contents.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focus the field.

Slots

Slot	Description
`description`	Rich help text, in place of the `description` property.
`label`	Rich label content, in place of the `label` property.
`prefix`	Content inside the field, before the input. An icon or a unit.
`suffix`	Content inside the field, after the input.

CSS shadow parts

Part	Description
`clear`	The clear button.
`control`	The native input.
`counter`	The character counter.
`description`	The help text.
`error`	The error message.
`field`	The bordered box holding the prefix, input and suffix.
`label`	The label element.
`prefix`	The leading slot wrapper.
`spinner`
`suffix`	The trailing slot wrapper.
`toggle`	The password visibility toggle.

CSS custom properties

Property	Description
`--bmx-input-background`	The field's background. Set by `appearance`; override for a one-off.
`--bmx-input-border-color`	The field's border colour in its resting state.
`--bmx-input-border-width`	Border width of the field.
`--bmx-input-font-size`	The value's font size.
`--bmx-input-gap`	Space between the prefix, the input and the suffix.
`--bmx-input-height`	The control's height. Defaults to the size step's height times the density scale.
`--bmx-input-icon-size`	Size of a slotted prefix or suffix icon, and of the clear and reveal buttons.
`--bmx-input-label-font-size`	The label's font size.
`--bmx-input-padding-inline`	Horizontal padding inside the field.
`--bmx-input-placeholder-color`	Placeholder colour. Deliberately dimmer than the value, and still AA against the field.
`--bmx-input-radius`	Corner radius of the field.
`--bmx-input-stack-gap`	Space between the label, the field and the supporting text.
`--bmx-input-support-font-size`	Font size of the description, error and counter.

`<bmx-json-editor>`

Properties

Property	Attribute	Type	Default	Description
`arrayKey`	`array-key`	`string`	—	A property that identifies array items (such as `id`), so changes match items by it rather than by place.
`compareWith`	property only	`unknown`	—	Another version of the document (value or JSON text) for the Changes view and the marks in the tree.
`description`	`description`	`string`	—	Help text below the editor.
`disabled`	`disabled`	`boolean`	`false`	Disable the editor.
`errorText`	`error-text`	`string`	—	An error supplied by the page.
`expandDepth`	`expand-depth`	`number`	`2`	How many levels of the tree start open.
`hideLabel`	`hide-label`	`boolean`	`false`	Hide the label visually while keeping it as the accessible name.
`hideStatus`	`hide-status`	`boolean`	`false`	Hide the status bar.
`hideToolbar`	`hide-toolbar`	`boolean`	`false`	Hide the toolbar.
`indent`	`indent`	`number`	`2`	Spaces per level in the text (0 writes one line).
`label`	`label`	`string`	—	The field's label: names the whole control.
`name`	`name`	`string`	—	The field's name in a form: it receives the document as text.
`readonly`	`readonly`	`boolean`	`false`	Allow reading, searching and copying, but not changing.
`schema`	`schema`	`BmxJsonSchema \| string`	—	A JSON Schema (object or JSON text) the document is checked against.
`schemaMessages`	`schema-messages`	`Record<string, string> \| string`	—	Schema messages in place of the English ones, by keyword (`required`, `type`, ...), as an object or JSON.
`search`	`search`	`string`	`''`	What the search box holds. Two-way.
`sortKeys`	`sort-keys`	`boolean`	`false`	Sort object keys when writing the text.
`strings`	`strings`	`Partial<BmxJsonEditorStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`value`	property only	`unknown`	`{}`	The document: any JavaScript value that is JSON, or JSON text. Two-way: written back in the kind it was given.
`view`	`view`	`BmxJsonEditorView`	`'tree'`	The view shown. Two-way.
`views`	`views`	`BmxJsonEditorView[] \| string`	—	The views offered, as an array, JSON or a comma list. Default: tree, text, table, and changes when `compare-with` is set.

Events

Event	Detail	Description
`bmxChange`	`BmxJsonChangeDetail`	Fired after the document changes.
`bmxEdit`	`BmxJsonEditDetail`	Fired before an edit. Cancel it to refuse the edit.
`bmxSelect`	`BmxJsonSelectDetail`	Fired when the selected row changes.

Methods

Method	Signature	Description
`collapseAll`	`collapseAll() => Promise<void>`	Closes every container but the root.
`expandAll`	`expandAll(depth?: number) => Promise<void>`	Opens every container (up to 5,000), or down to `depth` levels.
`getChanges`	`getChanges() => Promise<BmxJsonChange[]>`	The changes from `compare-with` to the current document.
`getSelection`	`getSelection() => Promise<BmxJsonSelectDetail>`	The selected place and its value.
`getText`	`getText(indent?: number) => Promise<string>`	The document as text; `indent` defaults to the element's.
`getValue`	`getValue() => Promise<BmxJsonValue>`	The document as a value (the last one that could be read, if the text has a mistake).
`redo`	`redo() => Promise<boolean>`	Redoes the last undone edit.
`select`	`select(path: BmxJsonPath \| string) => Promise<boolean>`	Selects a place - a path array, a JSON Pointer or `orders[3].total` - opening its ancestors and scrolling to it. Returns false when there is nothing there.
`setFocus`	`setFocus() => Promise<void>`	Moves focus into the current view.
`setValue`	`setValue(value: unknown, options?: { keepHistory?: boolean; }) => Promise<void>`	Replaces the document. `keepHistory` lets the reader undo back to the previous one.
`undo`	`undo() => Promise<boolean>`	Undoes the last edit.
`validate`	`validate() => Promise<BmxJsonSchemaProblem[]>`	Schema problems in the current document.

Slots

Slot	Description
`description`	Rich help text, in place of the `description` property.
`label`	Rich label content, in place of the `label` property.

CSS shadow parts

Part	Description
`changes`	The list of changes.
`description`	The help text under the field.
`key`	A key in a row.
`label`	The label element.
`menu`	The actions menu.
`problems`	The problems panel.
`row`	A tree row; also `row-selected`, `row-problem`, `row-added`, `row-changed`.
`status`	The bar under the views.
`table`	The table view.
`toolbar`	The bar of views, search and commands.
`tree`	The tree.
`value`	A value in a row.

CSS custom properties

Property	Description
`--bmx-json-editor-background`	The views' background.
`--bmx-json-editor-height`	The height of the views' scrolling area.
`--bmx-json-editor-indent`	How far each level of the tree is indented.
`--bmx-json-editor-key-color`	Keys in the tree.
`--bmx-json-editor-label-font-size`	The label's font size.
`--bmx-json-editor-literal-color`	true, false and null.
`--bmx-json-editor-number-color`	Number values.
`--bmx-json-editor-radius`	Corner radius of the frame.
`--bmx-json-editor-row-height`	The height of one tree or table row.
`--bmx-json-editor-selected-background`	The selected row.
`--bmx-json-editor-string-color`	String values.
`--bmx-json-editor-support-font-size`	Font size of the description and error message.

`<bmx-label-designer>`

Properties

Property	Attribute	Type	Default	Description
`copies`	`copies`	`number`	`1`	Copies of each record. Mutable.
`gridSize`	`grid-size`	`number`	—	The grid, in the template's unit. Default 1 mm, 0.05 in or 4 pt.
`label`	`label`	`string`	—	The designer's accessible name. Default: the template's name.
`mode`	`mode`	`'design' \| 'preview'`	`'design'`	`design` to edit, `preview` to see the sheets as they will print. Mutable.
`readonly`	`readonly`	`boolean`	`false`	Look and print only: no editing.
`records`	`records`	`readonly BmxLabelRecord[] \| string`	—	The data to print: an array of records, or CSV (or JSON) text.
`skip`	`skip`	`number`	`0`	Labels already used on the first sheet, so a part-used sheet can be finished. Mutable.
`snap`	`snap`	`boolean`	`true`	Snap to the grid and to other elements while dragging. Mutable.
`stocks`	property only	`readonly Record<string, unknown>[]`	—	Label stocks of your own, besides the built-in sheets and rolls.
`strings`	`strings`	`Partial<BmxLabelDesignerStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`template`	`template`	`BmxLabelTemplate \| Record<string, unknown> \| string`	—	The template: an object or JSON. Mutable: it is replaced as the label is edited.

Events

Event	Detail	Description
`bmxChange`	`BmxLabelChangeDetail`	Fired when the template is edited, with the whole of it.
`bmxExport`	`BmxLabelExportDetail`	Fired when an export is made from the Export menu. Cancel it to stop the download and use `data` yourself.
`bmxRecordChange`	`BmxLabelRecordDetail`	Fired when another record is shown.
`bmxSelectionChange`	`BmxLabelSelectionDetail`	Fired when the selected elements change.

Methods

Method	Signature	Description
`addElement`	`addElement(type: BmxLabelElementType, properties?: Record<string, unknown>) => Promise<string>`	Adds an element (`text`, `barcode`, `image`, `box`, `ellipse`, `line`) with any of its properties; returns its id.
`exportPdf`	`exportPdf(options?: BmxLabelExportOptions) => Promise<Blob>`	The job as a PDF: on the template's sheets or roll, or one label per page.
`exportPng`	`exportPng() => Promise<Blob>`	The label showing as a PNG at the printer's resolution.
`exportSvg`	`exportSvg() => Promise<string>`	The label showing as SVG, pictures included.
`exportZpl`	`exportZpl(options?: BmxLabelExportOptions) => Promise<string>`	The job as ZPL for a thermal printer: one format per label, pictures as black and white dots.
`getTemplate`	`getTemplate() => Promise<BmxLabelTemplate>`	The template as it stands.
`loadData`	`loadData(text: string) => Promise<number>`	Loads CSV or JSON text as the data; returns how many records it has.
`print`	`print(options?: BmxLabelExportOptions) => Promise<void>`	Prints the job from the browser: the pages exactly as the sheet preview shows them, at their real size.
`redo`	`redo() => Promise<void>`
`selectElements`	`selectElements(ids: string[]) => Promise<void>`	Selects elements by id.
`showRecord`	`showRecord(index: number) => Promise<void>`	Shows a record (0-based).
`undo`	`undo() => Promise<void>`

CSS shadow parts

Part	Description
`canvas`	The scrolling area the label sits in.
`label`	The label itself.
`panel`	The Properties, Layers and Data tabs.
`status`	The status line along the bottom.
`toolbar`	The tools along the top.

CSS custom properties

Property	Description
`--bmx-label-designer-accent`	Selection, handles and guides.
`--bmx-label-designer-desk`	The background around the label.
`--bmx-label-designer-height`	The designer's height (on a wide screen; narrow, it grows to fit).
`--bmx-label-designer-panel-width`	The width of the side panel.
`--bmx-label-designer-radius`	Corner radius of the designer.

`<bmx-lineage-graph>`

Properties

Property	Attribute	Type	Default	Description
`allowOpen`	`allow-open`	`boolean`	`true`	Offer the "Open lineage" button.
`data`	property only	`unknown`	`''`	The lineage: OpenLineage events (an array, `{ events }` or JSON lines), a dbt manifest, or `{ nodes, edges }` - text or parsed. Mutable (opening a file sets it).
`downstreamDepth`	`downstream-depth`	`number`	`2`	Hops shown downstream of the focus (0 = all). Mutable.
`fileName`	`file-name`	`string`	`'lineage'`	The name downloads are given (without the extension).
`focusAsset`	`focus-asset`	`string`	`''`	Show only this asset and its neighbourhood (`upstream-depth`, `downstream-depth`). Mutable.
`highlight`	`highlight`	`string`	`''`	A classification to highlight wherever it lands ("PII"); empty for none. Mutable.
`label`	`label`	`string`	—	The element's accessible name. Default: "Lineage graph".
`maxColumns`	`max-columns`	`number`	`8`	At most this many columns a box shows before "+n more".
`selected`	`selected`	`string`	`''`	The chosen asset's id. Mutable.
`selectedColumn`	`selected-column`	`string`	`''`	The chosen column of the chosen asset (traced both ways). Mutable.
`showColumns`	`show-columns`	`boolean`	`true`	Show columns in the boxes. Mutable.
`strings`	`strings`	`Partial<BmxLineageGraphStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`upstreamDepth`	`upstream-depth`	`number`	`2`	Hops shown upstream of the focus (0 = all). Mutable.
`view`	`view`	`BmxLineageView`	`'graph'`	The view shown. Mutable.

Events

Event	Detail	Description
`bmxLoad`	`BmxLineageLoadDetail`	Fired when lineage has been read.
`bmxSelect`	`BmxLineageSelectDetail`	Fired when an asset or a column is chosen.

Methods

Method	Signature	Description
`download`	`download(format?: BmxLineageExportFormat, fileName?: string) => Promise<void>`	Saves an export as a file.
`exportCsv`	`exportCsv(kind?: "lineage" \| "impact") => Promise<string>`	Column lineage as CSV (`lineage`), or the impact report of the chosen asset or column (`impact`).
`exportSvg`	`exportSvg() => Promise<string>`	The graph as shown, as a stand-alone SVG picture.
`fit`	`fit() => Promise<void>`	Fits the graph to the view.
`focusOn`	`focusOn(node?: string, upstream?: number, downstream?: number) => Promise<void>`	Shows only an asset and the hops either side (0 = all); no id shows everything.
`getGraph`	`getGraph() => Promise<BmxLineageData>`	The lineage as read (nodes and merged edges).
`getImpact`	`getImpact(node?: string, column?: string) => Promise<BmxImpact \| undefined>`	What a change to an asset, or one column of it, affects downstream (default the chosen one).
`getProblems`	`getProblems() => Promise<BmxLineageProblem[]>`	Problems in the lineage itself: cycles, missing or unexplained columns, isolated assets.
`search`	`search(query: string) => Promise<BmxLineageMatch[]>`	Assets and columns matching the text.
`selectAsset`	`selectAsset(node: string, column?: string) => Promise<void>`	Chooses an asset (and a column of it, to trace) and brings it into view.
`traceColumn`	`traceColumn(node: string, column: string, direction?: "up" \| "down") => Promise<{ column: string; hops: number; }[]>`	The columns a column is made from (`up`) or feeds (`down`), as `node::column` with hops.

CSS shadow parts

Part	Description
`asset`	An asset's box; also `asset-selected`.
`details`	The details panel.
`table`	A table (impact, assets).
`tabs`	The row of views.
`viewport`	The area the graph is drawn in.

CSS custom properties

Property	Description
`--bmx-lineage-graph-background`	The graph's background.
`--bmx-lineage-graph-details-width`	The details panel's width.
`--bmx-lineage-graph-downstream`	The colour of what it feeds.
`--bmx-lineage-graph-height`	The graph's height.
`--bmx-lineage-graph-radius`	Corner radius of the element.
`--bmx-lineage-graph-upstream`	The colour of what the chosen asset comes from.

`<bmx-log-stream>`

Properties

Property	Attribute	Type	Default	Description
`bookmarks`	property only	`number[]`	`[]`	Bookmarked line numbers.
`bookmarksOnly`	`bookmarks-only`	`boolean`	`false`	Show only the bookmarked entries.
`caseSensitive`	`case-sensitive`	`boolean`	`false`	Match the search's letter case.
`columns`	`columns`	`string`	`''`	Lay the lines out as columns: `auto`, or field names separated by spaces. `@time`, `@level` and `@message` are the line's own. Empty shows whole lines.
`context`	`context`	`number`	`0`	Entries to show either side of each match.
`dropFiles`	`drop-files`	`boolean`	`true`	Open a file dropped on the viewer.
`fieldsPanel`	`fields-panel`	`boolean`	`false`	Show the fields panel: each field's commonest values, to filter by.
`fileName`	`file-name`	`string`	—	The name exported files are saved under.
`follow`	`follow`	`boolean`	`false`	Keep the newest line in view as lines arrive. Scrolling up turns it off.
`format`	`format`	`BmxLogFormat`	`'auto'`	The format of the lines. `auto` reads it from the first lines.
`label`	`label`	`string`	—	The accessible name. Default: "Log".
`levels`	`levels`	`string \| readonly string[]`	`''`	Levels to show, separated by spaces: `warn error fatal`; `none` for lines with no level. Empty shows all.
`lineNumbers`	`line-numbers`	`boolean`	`true`	Show line numbers.
`liveSrc`	`live-src`	`string`	—	A WebSocket (`ws:`, `wss:`) or server-sent events URL to follow live.
`liveType`	`live-type`	`'auto' \| 'websocket' \| 'sse'`	`'auto'`	What `liveSrc` is. `auto` goes by the URL's scheme.
`maxLines`	`max-lines`	`number`	`0`	Keep at most this many lines, dropping the oldest: for live logs. 0 keeps all.
`pattern`	`pattern`	`string`	—	For `format="pattern"`: a regular expression with named groups; `level`, `time` and `message` are understood.
`query`	`query`	`string`	`''`	The search: words, "phrases", /regex/, field:value, -exclusions, OR.
`redact`	`redact`	`boolean \| string`	`false`	Mask personal data and secrets: `true` for every rule, or rule names: `email ip card jwt bearer aws-key secret`.
`redactRules`	property only	`readonly BmxLogRedactRule[]`	—	Masking rules of your own: `{ name, pattern, flags?, mask? }`.
`regex`	`regex`	`boolean`	`false`	Treat the search as one regular expression.
`requestInit`	property only	`RequestInit`	—	Options for fetching `src`: headers, credentials.
`src`	`src`	`string`	—	A URL to read the log from, streamed as it downloads. A `.gz` file is decompressed.
`timeFrom`	`time-from`	`string \| number`	—	Show entries from this time on: an ISO date or milliseconds since 1970. Set by the timeline.
`timeTo`	`time-to`	`string \| number`	—	Show entries before this time. Set by the timeline.
`timeZone`	`time-zone`	`'utc' \| 'local'`	`'utc'`	Show times in UTC or in the reader's own time zone.
`timeline`	`timeline`	`boolean`	`true`	Show the timeline over the lines, when they carry times.
`toolbar`	`toolbar`	`boolean`	`true`	Show the toolbar.
`wholeWord`	`whole-word`	`boolean`	`false`	Match the search's words only as whole words.
`wrap`	`wrap`	`boolean`	`false`	Wrap long lines instead of scrolling sideways.

Events

Event	Detail	Description
`bmxLogBookmark`	`BmxLogBookmarkDetail`	A bookmark was added or removed.
`bmxLogConnection`	`BmxLogConnectionDetail`	A live connection opened, dropped, is being tried again, or closed.
`bmxLogFilter`	`BmxLogFilterDetail`	The lines on show changed.
`bmxLogLoad`	`BmxLogLoadDetail`	Text arrived, or the load finished or failed.
`bmxLogSelect`	`BmxLogSelectDetail`	A line was chosen: clicked, or reached by the keyboard.
`bmxLogStateChange`	`BmxLogStateChangeDetail`	The search, levels, time range, bookmarks, columns or chosen line changed.

Methods

Method	Signature	Description
`appendLog`	`appendLog(text: string \| readonly string[]) => Promise<number>`	Adds text or lines, as from a live source. Text without a final line break waits for the rest.
`clear`	`clear() => Promise<void>`	Forgets every line.
`connect`	`connect(url: string, options?: BmxLogConnectOptions) => Promise<void>`	Follows a live source: a WebSocket (`ws:`, `wss:`) or a server-sent events URL. Each message is one or more lines. The connection is opened again when it drops; `bmxLogConnection` reports each change.
`disconnect`	`disconnect() => Promise<void>`	Closes the live connection. The lines already received stay.
`download`	`download(format?: BmxLogExportFormat, fileName?: string) => Promise<void>`	Saves the lines on show, under `fileName` or `log`.
`exportAs`	`exportAs(format?: BmxLogExportFormat) => Promise<Blob>`	The lines on show as a file: `text`, `csv` or `json`, masked as on screen.
`findNext`	`findNext() => Promise<number \| null>`	Moves to the next match. Resolves to its line number, or null when there is none.
`findPrevious`	`findPrevious() => Promise<number \| null>`	Moves to the previous match.
`getLine`	`getLine(lineNumber: number) => Promise<(BmxLogLine & { fields: Record<string, unknown> \| null; }) \| null>`	A line by its number, or null when it is not held.
`getState`	`getState() => Promise<string>`	What the reader is looking at, as a short URL-safe string: the search, levels, context, time range, bookmarks, columns and the chosen line. Keep it in a link and give it to `setState()` to open the same view.
`getStats`	`getStats() => Promise<BmxLogStats>`	Counts: lines held and shown, matches, characters, and entries per level.
`load`	`load(source: BmxLogSource) => Promise<void>`	Reads a log, replacing what is shown: a File or Blob (a dropped or chosen file), a URL, a Response, or a stream. Gzip is recognised and decompressed.
`scrollToLine`	`scrollToLine(lineNumber: number) => Promise<boolean>`	Scrolls to a line by its number, selects it, and says whether it is on show.
`setState`	`setState(state: string) => Promise<boolean>`	Opens a view saved by `getState()`. Call it once the log is loaded, so the chosen line can be found. False when the string is not a saved view.

Slots

Slot	Description
`empty`	what to show when there are no lines.
`toolbar-end`	extra controls at the end of the toolbar.

CSS shadow parts

Part	Description
`body`
`button`
`cell`
`columns-head`
`context`
`details`
`drop-zone`
`empty`
`error`
`export-list`
`export-option`
`field`
`field-value`
`fields`
`fields-panel`
`fold`
`latest`
`level`
`level-chip`
`level-chip-bookmarks`
`level-chip-none`
`line-number`
`match`
`match-count`
`option`
`query-error`
`raw`
`search`
`search-input`
`status`
`text`
`timeline`
`timeline-chart`
`toolbar`
`viewport`

CSS custom properties

Property	Description
`--bmx-log-stream-active`	The chosen line.
`--bmx-log-stream-ansi-0`	Terminal black. -1 to -7 are red, green, yellow, blue, magenta, cyan and white; -8 to -15 their bright forms.
`--bmx-log-stream-ansi-1`	Terminal red.
`--bmx-log-stream-ansi-10`	Terminal bright green.
`--bmx-log-stream-ansi-11`	Terminal bright yellow.
`--bmx-log-stream-ansi-12`	Terminal bright blue.
`--bmx-log-stream-ansi-13`	Terminal bright magenta.
`--bmx-log-stream-ansi-14`	Terminal bright cyan.
`--bmx-log-stream-ansi-15`	Terminal bright white. @part toolbar - the controls above the lines. @part button - a toolbar button. @part search - the search group. @part search-input - the search field. @part option - the match case, whole word and regular expression toggles. @part match-count - "3 of 12". @part query-error - what is wrong with the search. @part context - the context control. @part export-list - the list of file types under Export. @part export-option - one of them. @part level-chip - a level's toggle. Also `level-chip-error` and so on, and `level-chip-bookmarks`. @part timeline - the timeline over the lines. @part timeline-chart - its bars, which choose a stretch of time. @part fields-panel - the fields panel. @part field - one field in it. @part field-value - one of its values, which filters by it. @part columns-head - the column titles, in the column layout. @part cell - one column of a line. @part body - the lines and what lies over them. @part viewport - the scrolling list of lines. @part line-number - a line's number. @part level - a line's level mark. @part fold - the button that folds an entry's following lines. @part text - a line's text. @part match - a search match. @part latest - the "new lines" button while not following. @part drop-zone - shown while a file is dragged over. @part details - the chosen line's fields and text. @part fields - its fields. @part raw - its text. @part status - the counts under the lines. @part empty - what is shown when there are no lines. @part error - the message when a log could not be read.
`--bmx-log-stream-ansi-2`	Terminal green.
`--bmx-log-stream-ansi-3`	Terminal yellow.
`--bmx-log-stream-ansi-4`	Terminal blue.
`--bmx-log-stream-ansi-5`	Terminal magenta.
`--bmx-log-stream-ansi-6`	Terminal cyan.
`--bmx-log-stream-ansi-7`	Terminal white.
`--bmx-log-stream-ansi-8`	Terminal bright black.
`--bmx-log-stream-ansi-9`	Terminal bright red.
`--bmx-log-stream-background`	Behind the lines.
`--bmx-log-stream-debug`	The debug level's colour.
`--bmx-log-stream-error`	The error level's colour.
`--bmx-log-stream-fatal`	The fatal level's colour.
`--bmx-log-stream-font`	The lines' font. A monospace font.
`--bmx-log-stream-font-size`	The lines' size.
`--bmx-log-stream-height`	How tall the viewer is.
`--bmx-log-stream-info`	The info level's colour.
`--bmx-log-stream-match`	A search match.
`--bmx-log-stream-text`	The lines' text.
`--bmx-log-stream-trace`	The trace level's colour. Also -debug, -info, -warn, -error, -fatal.
`--bmx-log-stream-warn`	The warning level's colour.

`<bmx-map>`

Properties

Property	Attribute	Type	Default	Description
`antarctica`	`antarctica`	`boolean`	`false`	Draw Antarctica (the built-in world).
`cluster`	`cluster`	`boolean`	`false`	Group markers that crowd together; a group opens when it is chosen.
`data`	`data`	`BmxMapDatum[] \| Record<string, unknown> \| string`	—	Values for regions: `[{ id, value, label, color }]`, or `{ "GBR": 67.7, "FR": 68.2 }`, as a property or JSON.
`fitTo`	`fit-to`	`string`	`'all'`	What the view starts on: `all` (default), `data` (the regions with values and the markers), or ids: `"GBR,FRA,DEU"`.
`format`	`format`	`BmxChartNumberFormat \| string`	—	How values are written: `percent`, `currency:EUR`, `decimal:1`, `compact`, or the object.
`graticule`	`graticule`	`boolean`	`false`	Draw lines of latitude and longitude.
`idField`	`id-field`	`string`	`'id'`	The field of a record holding the region's id.
`idProperty`	`id-property`	`string`	—	The property holding a region's id in your shapes.
`label`	`label`	`string`	—	What the map shows: its accessible name.
`labels`	`labels`	`'none' \| 'auto' \| 'all'`	`'none'`	Names on the map: `none` (default), `auto` (regions large enough at the zoom, and markers), or `all`.
`legend`	`legend`	`'bottom' \| 'none'`	`'bottom'`	Where the legend goes: `bottom` (default) or `none`.
`legendTitle`	`legend-title`	`string`	—	A heading for the legend.
`lines`	`lines`	`BmxMapLine[] \| string`	—	Routes: `[{ from, to, label }]`, each end `[longitude, latitude]` or an id.
`locale`	`locale`	`string`	—	A BCP 47 locale for numbers. Default: the page's `lang`.
`markers`	`markers`	`BmxMapMarker[] \| string`	—	Places: `[{ lon, lat, value, label, color }]`, as a property or JSON.
`maxZoom`	`max-zoom`	`number`	`12`	How far in the reader can zoom.
`mid`	`mid`	`number`	`0`	The middle of a `diverging` scale.
`nameProperty`	`name-property`	`string`	—	The property holding a region's name in your shapes.
`projection`	`projection`	`BmxMapProjection`	`'equal-earth'`	`equal-earth` (default), `natural-earth`, `mercator` or `equirectangular`.
`regions`	property only	`unknown`	—	Shapes of your own: GeoJSON or TopoJSON, as a property or JSON. The world's countries, by default.
`scale`	`scale`	`BmxMapScaleKind`	`'quantize'`	How values become colours: `quantize` (equal steps, default), `quantile`, `threshold`, `diverging` or `category`.
`selectable`	`selectable`	`'none' \| 'single' \| 'multiple'`	`'none'`	Regions the reader can select: `none` (default), `single` or `multiple`.
`selected`	property only	`string[]`	`[]`	The selected regions' ids. Changes write back here.
`src`	`src`	`string`	—	A URL to read shapes from (GeoJSON or TopoJSON), on the page's own server.
`steps`	`steps`	`number`	`5`	How many classes, for quantize, quantile and diverging.
`strings`	`strings`	`Partial<BmxMapStrings> \| string`	—	Replacements for the map's wording, as a property or JSON.
`tableView`	`table-view`	`boolean`	`true`	Offer the table view.
`thresholds`	`thresholds`	`number[] \| string`	—	The breaks of a `threshold` scale: `[10, 50, 100]` or `"10,50,100"`.
`topologyObject`	`topology-object`	`string`	—	The TopoJSON object to draw, when there are several.
`unit`	`unit`	`string`	—	Written after every value: `t`, `%`.
`valueField`	`value-field`	`string`	`'value'`	The field of a record holding its value.
`zoomable`	`zoomable`	`boolean`	`true`	The reader can pan and zoom.

Events

Event	Detail	Description
`bmxMapItemClick`	`BmxMapItemDetail`	A region, marker or group was clicked or chosen with the keyboard.
`bmxMapSelect`	`BmxMapSelectDetail`	Regions were selected or unselected.
`bmxMapViewChange`	`BmxMapViewDetail`	The view was panned or zoomed.

Methods

Method	Signature	Description
`centerOn`	`centerOn(center: BmxMapPoint, zoom?: number) => Promise<void>`	Centres the view on a place, at a zoom (the current one by default).
`clearSelection`	`clearSelection() => Promise<void>`	Unselects every region.
`getView`	`getView() => Promise<BmxMapViewDetail>`	The view: how far in, and the middle as `[longitude, latitude]`.
`toSvg`	`toSvg() => Promise<string>`	The map as a standalone SVG document, its colours written in.
`zoomTo`	`zoomTo(target: string[] \| "data" \| null) => Promise<void>`	Shows regions (ids), the regions with data and the markers (`data`), or the whole map (`null`).

CSS shadow parts

Part	Description
`controls`	the zoom and table buttons.
`legend`	the legend.
`map`	the drawing.
`marker`	a marker.
`region`	a region's shape.
`table`	the table view.
`tooltip`	the name and value under the pointer.

CSS custom properties

Property	Description
`--bmx-map-border`	The lines between regions.
`--bmx-map-color-0`	The first category. Colours 0 to 9 are used in turn.
`--bmx-map-color-1`	Category 2.
`--bmx-map-color-2`	Category 3.
`--bmx-map-color-3`	Category 4.
`--bmx-map-color-4`	Category 5.
`--bmx-map-color-5`	Category 6.
`--bmx-map-color-6`	Category 7.
`--bmx-map-color-7`	Category 8.
`--bmx-map-color-8`	Category 9.
`--bmx-map-color-9`	Category 10.
`--bmx-map-height`	How tall the map is. Default: as tall as the projection needs at the width.
`--bmx-map-high`	The highest class.
`--bmx-map-land`	A region with no value.
`--bmx-map-low`	The lowest class of a choropleth.
`--bmx-map-marker`	A marker.
`--bmx-map-mid`	The middle of a diverging scale.
`--bmx-map-negative`	The low end of a diverging scale.
`--bmx-map-ocean`	Behind the land (with `graticule`, inside the map's outline).
`--bmx-map-route`	A route.
`--bmx-map-selected`	A selected region's outline.

`<bmx-media-player>`

Properties

Property	Attribute	Type	Default	Description
`allowBookmarks`	`allow-bookmarks`	`boolean`	`true`	Offer bookmarks: the B key, a button, and a tab beside the transcript.
`autoplay`	`autoplay`	`boolean`	`false`	Start playing as soon as possible. Browsers allow this only for muted media, or after the reader has used the page.
`bookmarks`	`bookmarks`	`readonly BmxMediaBookmark[] \| string`	—	The viewer's bookmarks (an array, or its JSON). Kept up to date; save them from `bmxBookmarksChange`.
`captionStyle`	`caption-style`	`BmxCaptionStyle \| string`	—	How captions look (an object, or its JSON).
`captionTrack`	`caption-track`	`string`	—	The captions or subtitles shown, by label or language; `off` for none. Unset, the default track (or none).
`controls`	`controls`	`'auto' \| 'always'`	`'auto'`	Hide the controls of a playing video when the pointer is still: `auto`, or `always` show them.
`crossorigin`	`crossorigin`	`'anonymous' \| 'use-credentials'`	—	How media and track files are requested from another site: `anonymous` or `use-credentials`.
`describe`	`describe`	`boolean`	`false`	Read description tracks out to screen readers as they come up.
`fileName`	`file-name`	`string`	`'transcript'`	The file name the transcript downloads as, without its extension.
`kind`	`kind`	`'video' \| 'audio'`	`'video'`	`video` shows a picture; `audio` is a compact bar with the transcript below.
`label`	`label`	`string`	—	The player's accessible name, and the title of an audio player.
`loop`	`loop`	`boolean`	`false`	Start again at the end.
`muted`	`muted`	`boolean`	`false`	Sound off.
`poster`	`poster`	`string`	—	A picture shown before a video plays, or beside an audio player.
`preload`	`preload`	`'none' \| 'metadata' \| 'auto'`	`'metadata'`	How much to load before play is pressed.
`rate`	`rate`	`number`	`1`	Playback speed.
`rates`	`rates`	`readonly number[] \| string`	—	The speeds offered (an array, or a comma-separated list).
`seekStep`	`seek-step`	`number`	`10`	Seconds J, L and the skip buttons move.
`sources`	`sources`	`readonly BmxMediaSource[] \| string`	—	Files the media can be played from, best first (an array, or its JSON). Labelled ones are offered as qualities.
`src`	`src`	`string`	—	The media file. Use `sources` instead for a choice of quality or format.
`startTime`	`start-time`	`number`	`0`	Seconds into the media to start from.
`strings`	`strings`	`Partial<BmxMediaPlayerStrings> \| string`	—	Replacements for any of the wording (an object, or its JSON).
`tracks`	`tracks`	`readonly BmxMediaTrack[] \| string`	—	Captions, subtitles, chapters, thumbnails and descriptions (an array, or its JSON). `<track>` children are read too.
`transcript`	`transcript`	`BmxTranscriptLayout`	`'off'`	The transcript panel: `off`, `auto` (beside when there is room, else below), `side` or `below`.
`volume`	`volume`	`number`	`1`	Loudness, 0 to 1.

Events

Event	Detail	Description
`bmxBookmarksChange`	`BmxMediaBookmarksDetail`	Fired when a bookmark is added, its note edited, or removed.
`bmxCaptionStyleChange`	`BmxCaptionStyle`	Fired when the reader changes the caption style in the settings, so the page can remember it.
`bmxChapterChange`	`BmxMediaChapterDetail`	Fired when playback moves into another chapter.
`bmxCueChange`	`BmxMediaCueDetail`	Fired when the captions showing change.
`bmxEnded`	`BmxMediaTimeDetail`	Fired at the end of the media.
`bmxMediaError`	`BmxMediaErrorDetail`	Fired when the media or a track cannot be loaded or played.
`bmxPause`	`BmxMediaTimeDetail`	Fired when playback pauses (including at the end).
`bmxPlay`	`BmxMediaTimeDetail`	Fired when playback starts or resumes.
`bmxRateChange`	`{ rate: number; }`	Fired when the speed changes.
`bmxTimeUpdate`	`BmxMediaTimeDetail`	Fired as playback moves, about four times a second, and after a seek.
`bmxVolumeChange`	`BmxMediaVolumeDetail`	Fired when the volume or mute changes.

Methods

Method	Signature	Description
`addBookmark`	`addBookmark(note?: string, time?: number) => Promise<BmxMediaBookmark>`	Adds a bookmark at a time (now, when omitted). Returns it.
`clearLoop`	`clearLoop() => Promise<void>`	Stops repeating a section.
`downloadTranscript`	`downloadTranscript(format?: BmxCaptionFormat) => Promise<void>`	Saves the transcript as a file.
`enterFullscreen`	`enterFullscreen() => Promise<void>`	Full screen, for the player only.
`exitFullscreen`	`exitFullscreen() => Promise<void>`	Leaves full screen.
`find`	`find(query: string) => Promise<number>`	Searches the transcript, opening it, and returns the number of matches.
`getBookmarks`	`getBookmarks() => Promise<BmxMediaBookmark[]>`	The bookmarks, in time order.
`getChapters`	`getChapters() => Promise<BmxChapter[]>`	The chapters, from the chapters track.
`getCues`	`getCues(kind?: BmxMediaTrackKind) => Promise<BmxCue[]>`	The cues of the captions showing (or of the first captions track), sorted.
`getMedia`	`getMedia() => Promise<HTMLMediaElement \| null>`	The media element, for anything this element does not offer (media sessions, audio processing).
`getTranscript`	`getTranscript(format?: BmxCaptionFormat) => Promise<string>`	The transcript (or captions) as text, in a format: `txt`, `vtt`, `srt` or `json`.
`pause`	`pause() => Promise<void>`	Pauses playback.
`play`	`play() => Promise<void>`	Starts or resumes playback. Resolves when it has started (or the browser refused).
`removeBookmark`	`removeBookmark(id: string) => Promise<void>`	Removes a bookmark by id.
`seek`	`seek(time: number) => Promise<void>`	Moves to a time, in seconds.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focuses the play button.
`setLoop`	`setLoop(from: number, to: number) => Promise<void>`	Repeats the section between two times until `clearLoop`.
`skip`	`skip(seconds: number) => Promise<void>`	Moves by a number of seconds, back when negative.
`toggle`	`toggle() => Promise<void>`	Plays when paused, pauses when playing.
`togglePictureInPicture`	`togglePictureInPicture() => Promise<void>`	Picture in picture on or off (video, where the browser offers it).

Slots

Slot	Description
`label`	Rich content for the title shown above an audio player, in place of `label`.

CSS shadow parts

Part	Description
`captions`	The captions over the picture.
`controls`	The control bar.
`player`	The player: picture and controls.
`settings`	The settings panel.
`stage`	The picture (video only).
`timeline`	The seek bar.
`transcript`	The transcript and bookmarks panel.

CSS custom properties

Property	Description
`--bmx-media-player-accent`	The played part of the timeline, the volume and the current transcript line.
`--bmx-media-player-aspect-ratio`	The picture's shape before the video has loaded.
`--bmx-media-player-background`	Behind the picture (letterboxing).
`--bmx-media-player-caption-font`	The captions' typeface.
`--bmx-media-player-caption-size`	The captions' size at 100%.
`--bmx-media-player-control-color`	Icons and text over the picture.
`--bmx-media-player-panel-height`	The transcript's height below the player.
`--bmx-media-player-panel-width`	The transcript's width beside the player.
`--bmx-media-player-radius`	Corner radius of the player and the panel.

`<bmx-menu>`

Properties

Property	Attribute	Type	Default	Description
`anchor`	`anchor`	`string \| HTMLElement`	—	What the root surface is placed against. Defaults to the trigger. Separate from `trigger` because the two answer different questions. A `bmx-split-button` wires the ARIA to its chevron half and anchors the menu to both halves, so that `bottom-start` lines up with the primary action's leading edge rather than hanging a wide menu off a narrow button.
`context`	`context`	`string \| HTMLElement`	—	Right-clicking inside this element opens the menu at the pointer.
`items`	property only	`BmxMenuEntry[]`	`[]`	The menu's entries. An array, or the JSON spelling of one. Anything with a wrapper - React, Angular, Vue - assigns the array; markup that can only write attributes (Razor, Blazor's markup, a server-side template, an htmx swap) writes the JSON, and it is read once into the list it describes. Mutable for that reason alone: everything below reads a list.
`label`	`label`	`string`	`'Menu'`	The menu's accessible name.
`menuId`	`menu-id`	`string`	—	The id given to the root surface. Only needed by a component that owns its own trigger and has to point that trigger's `aria-controls` at a surface it does not render itself. Left alone, the menu generates one.
`open`	`open`	`boolean`	`false`	Whether the menu is showing. Mutable, so the component can close itself when something is chosen. A consumer driving it may treat it as controlled and watch `bmxOpenChange`.
`placement`	`placement`	`BmxPlacement`	`'bottom-start'`	Which side the root opens on when there is room.
`returnFocus`	`return-focus`	`boolean`	`true`	Whether closing returns focus to whatever opened the menu.
`returnFocusTo`	`return-focus-to`	`string \| HTMLElement`	—	Where focus goes when the menu closes, as a CSS selector or an element. Defaults to the trigger, and failing that the anchor - which is right for every menu that opens itself. It is the composition case that needs this: `bmx-split-button` anchors the menu to both of its halves so the list lines up with the primary action's leading edge, but focus belongs on the chevron the user actually pressed. A selector is resolved against the menu's own root, so a composing component can name something inside its own shadow tree without waiting for a ref to exist.
`trigger`	`trigger`	`string \| HTMLElement`	—	The element that opens this menu, as a CSS selector or an element. Given one, the menu takes over its ARIA and its keyboard entirely. Omit it when the composing component already owns a trigger of its own.

Events

Event	Detail	Description
`bmxOpenChange`	`boolean`	Fired when the menu opens or closes.
`bmxSelect`	`BmxMenuSelectDetail`	Fired when an item is chosen.

Methods

Method	Signature	Description
`closeMenu`	`closeMenu() => Promise<void>`	Close the menu. Focus returns to whatever opened it.
`openAt`	`openAt(x: number, y: number) => Promise<void>`	Open the menu at a point in the viewport, as a context menu.
`openMenu`	`openMenu(atEnd?: boolean) => Promise<void>`	Open the menu against its anchor and move focus into it.

Slots

Slot	Description
`(default)`	The default slot

CSS shadow parts

Part	Description
`item`	A menu item.
`menu`	The root surface.
`separator`	A divider between items.
`submenu`	A cascaded surface. Also matches `menu` for styling.

CSS custom properties

Property	Description
`--bmx-menu-item-padding`	Space inside an item.
`--bmx-menu-max-height`	Tallest a surface grows before it scrolls.
`--bmx-menu-max-width`	Largest width a surface takes before its labels wrap.
`--bmx-menu-min-width`	Smallest width a surface takes. Default 12rem.
`--bmx-menu-padding`	Space between a surface's edge and its items.
`--bmx-menu-radius`	Corner radius of a surface.

`<bmx-menu-item>`

Properties

Property	Attribute	Type	Default	Description
`checked`	`checked`	`boolean`	`false`	The state of a `checkbox` or `radio` item.
`danger`	`danger`	`boolean`	`false`	Paint it in the danger tone.
`description`	`description`	`string`	—	Secondary text, under the label.
`disabled`	`disabled`	`boolean`	`false`	Whether it can be chosen.
`group`	`group`	`string`	—	Which radio set this belongs to. Radio items sharing one are exclusive.
`kind`	`kind`	`'action' \| 'checkbox' \| 'radio'`	`'action'`	What kind of control this is: an action, or something that carries a state.
`label`	`label`	`string`	—	What the user reads. Falls back to the element's own text.
`separator`	`separator`	`boolean`	`false`	Draw a divider instead of an item. Every other property is ignored.
`shortcut`	`shortcut`	`string`	—	A keyboard hint, right-aligned. Display only - the menu does not bind it.
`value`	`value`	`string`	—	Reported in the menu's selection event. Falls back to the label.

Slots

Slot	Description
`(default)`	The item's label, when the `label` property is not set. Nested `bmx-menu-item` elements here become the item's submenu.

`<bmx-mind-map>`

Properties

Property	Attribute	Type	Default	Description
`fileName`	`file-name`	`string`	`'mind-map'`	The name downloads are given (without the extension).
`label`	`label`	`string`	—	The element's accessible name. Default: "Mind map".
`layout`	`layout`	`BmxMindLayout`	`'both'`	How the topics are placed. Mutable.
`map`	`map`	`BmxMindNode \| string`	`''`	The map: an object (`text`, `children`), JSON, OPML or an indented outline. Mutable: changes are written back as an object. Setting it starts undo afresh.
`maxNodeWidth`	`max-node-width`	`number`	`240`	The widest a topic grows before its text wraps (px, scaled by depth).
`readonly`	`readonly`	`boolean`	`false`	Look but do not change.
`selected`	`selected`	`string`	`''`	The chosen topic's id. Mutable.
`showDetails`	`show-details`	`boolean`	`false`	Show the details panel for the chosen topic. Mutable.
`strings`	`strings`	`Partial<BmxMindMapStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`view`	`view`	`'map' \| 'split' \| 'outline'`	`'map'`	`map`, the map with the `outline` beside it (`split`), or only the outline. Mutable.

Events

Event	Detail	Description
`bmxChange`	`BmxMindChangeDetail`	Fired when the map changes, with the whole new tree.
`bmxLinkClick`	`BmxMindLinkDetail`	Fired before a topic's link opens. Cancel to open it yourself.
`bmxSelect`	`BmxMindSelectDetail`	Fired when a topic is chosen.

Methods

Method	Signature	Description
`addNode`	`addNode(text: string, parentId?: string) => Promise<string>`	Adds a topic under `parentId` (default: the chosen topic, else the centre). Resolves with its id.
`download`	`download(format?: BmxMindExportFormat, fileName?: string) => Promise<void>`	Downloads the map in a format.
`editNode`	`editNode(id?: string) => Promise<void>`	Starts editing a topic's text.
`exportAs`	`exportAs(format: BmxMindExportFormat) => Promise<string \| Blob>`	The map in a format: text for all but `png`, which is a Blob.
`find`	`find(query: string) => Promise<string[]>`	Finds topics by their text and notes; the first match is chosen. Resolves with every match's id.
`fit`	`fit() => Promise<void>`	Scales and centres the map to fit the view.
`fold`	`fold(id: string, collapsed?: boolean) => Promise<void>`	Folds or unfolds a topic (toggles when `collapsed` is not given).
`foldAll`	`foldAll(keepDepth?: number) => Promise<void>`	Folds everything below `keepDepth` (1 keeps the main branches open).
`getMap`	`getMap() => Promise<BmxMindNode>`	The map as it is now.
`redo`	`redo() => Promise<boolean>`	Redoes the last undone change.
`removeNode`	`removeNode(id: string) => Promise<void>`	Deletes a topic and its branch (not the centre).
`selectNode`	`selectNode(id: string) => Promise<void>`	Chooses a topic (unfolding the way to it) and brings it into view.
`setFocus`	`setFocus() => Promise<void>`	Focuses the chosen topic (or the centre).
`setMap`	`setMap(map: BmxMindNode \| string) => Promise<void>`	Replaces the map (object, JSON, OPML or outline). Undo goes back to the map before.
`undo`	`undo() => Promise<boolean>`	Undoes the last change. Resolves whether there was one.
`unfoldAll`	`unfoldAll() => Promise<void>`	Unfolds every topic.
`updateNode`	`updateNode(id: string, patch: Partial<Omit<BmxMindNode, "id" \| "children">>) => Promise<void>`	Changes a topic's text, note, link, icon or colour.
`zoomTo`	`zoomTo(scale: number) => Promise<void>`	Zooms to a scale (0.2 to 3), about the middle of the view.

CSS shadow parts

Part	Description
`details`	The details panel.
`edge`	A branch line.
`node`	A topic; also `node-root`, `node-selected`.
`outline`	The outline text box.
`toolbar`	The row of tools.
`viewport`	The area the map is drawn in.

CSS custom properties

Property	Description
`--bmx-mind-map-background`	The map's background.
`--bmx-mind-map-branch-1`	Branch colour 1 (and 2 to 8).
`--bmx-mind-map-details-width`	The details panel's width.
`--bmx-mind-map-height`	The element's height.
`--bmx-mind-map-node-background`	A topic's background.
`--bmx-mind-map-radius`	Corner radius of the element.
`--bmx-mind-map-root-background`	The central topic's background.
`--bmx-mind-map-root-color`	The central topic's text colour.

`<bmx-model-viewer>`

Properties

Property	Attribute	Type	Default	Description
`allowOpen`	`allow-open`	`boolean`	`false`	Offer an Open button, and open model files dropped on the view.
`annotations`	`annotations`	`BmxModelAnnotation[] \| string`	`[]`	Notes pinned to the model, as an array or JSON. Two-way: `bmxChange` reports edits.
`explode`	`explode`	`number`	`0`	How far apart the parts are pulled, 0 to 1. Two-way.
`format`	`format`	`BmxModelFormat`	—	The format, when the address does not end in `.stl`, `.obj`, `.gltf` or `.glb`.
`label`	`label`	`string`	—	The model's name for assistive technology and the toolbar. Default: its file name.
`panel`	`panel`	`boolean`	`true`	Show the side panel (parts, notes, measurements). Two-way (the toolbar's panel button).
`projection`	`projection`	`'perspective' \| 'orthographic'`	`'perspective'`	Two-way.
`readonly`	`readonly`	`boolean`	`false`	Notes can be read but not added, changed or removed.
`renderMode`	`render-mode`	`BmxModelRenderMode`	`'shaded'`	How surfaces are drawn. Two-way.
`section`	`section`	`'none' \| 'x' \| 'y' \| 'z'`	`'none'`	A section through the model across this axis, or none. Two-way.
`sectionFlip`	`section-flip`	`boolean`	`false`	Keep the other side of the cut. Two-way.
`sectionPosition`	`section-position`	`number`	`0.5`	Where the cut is, from 0 (one end of the model) to 1 (the other). Two-way.
`src`	`src`	`string`	—	The model's address. Files it refers to (a glTF's `.bin` and textures, an OBJ's `.mtl`) are fetched beside it.
`strings`	`strings`	`Partial<BmxModelViewerStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`toolbar`	`toolbar`	`boolean`	`true`	Show the toolbar.
`units`	`units`	`string`	`''`	The unit lengths are in, shown after measurements and sizes (`mm`, `in`).
`upAxis`	`up-axis`	`'auto' \| 'y' \| 'z'`	`'auto'`	Which way is up in the file. `auto`: Z for STL (as most CAD exports it), Y otherwise.

Events

Event	Detail	Description
`bmxChange`	`{ readonly annotations: BmxModelAnnotation[]; }`	The notes changed: added, edited or removed.
`bmxError`	`{ readonly message: string; }`	A model could not be read.
`bmxLoad`	`BmxModelLoadDetail`	A model was read and shown.
`bmxMeasure`	`BmxModelMeasureDetail`	A measurement was taken.
`bmxSelect`	`{ readonly part: string \| null; readonly name: string; }`	The selected part changed (`part` is null when nothing is selected).

Methods

Method	Signature	Description
`clearMeasurements`	`clearMeasurements() => Promise<void>`	Removes every measurement.
`fit`	`fit(part?: string) => Promise<void>`	Fits the camera to the whole model, or to one part.
`getCamera`	`getCamera() => Promise<BmxModelCamera>`
`getParts`	`getParts() => Promise<BmxModelPartInfo[]>`	The model's parts, in tree order.
`isolate`	`isolate(part: string) => Promise<void>`	Shows one part alone.
`load`	`load(data: ArrayBuffer \| Uint8Array \| string \| Blob \| readonly File[], options?: BmxModelLoadOptions) => Promise<void>`	Shows a model from its data: bytes, text, a `File` or `Blob`, or several files at once (a glTF with its `.bin` and textures, an OBJ with its `.mtl`), the main one found by its extension.
`screenshot`	`screenshot(options?: { type?: "image/png" \| "image/jpeg" \| "image/webp"; quality?: number; background?: boolean; }) => Promise<Blob \| null>`	A picture of the view, as drawn now (without the notes' pins).
`select`	`select(part: string \| null) => Promise<void>`	Selects a part (highlighted, and reported by `bmxSelect`), or nothing.
`setCamera`	`setCamera(camera: Partial<BmxModelCamera>) => Promise<void>`	Moves the camera (a saved view, for example). Parts left out keep their values.
`setPartVisible`	`setPartVisible(part: string, visible: boolean) => Promise<void>`	Shows or hides a part and everything in it.
`setView`	`setView(view: BmxModelView) => Promise<void>`	Looks from a standard direction, keeping what is looked at.
`showAll`	`showAll() => Promise<void>`	Shows every part.

CSS shadow parts

Part	Description
`panel`	The side panel (parts, notes, measurements).
`pin`	A note's pin on the model.
`stage`	The area the model is drawn in.
`status`	The line under the view.
`toolbar`	The bar of commands.

CSS custom properties

Property	Description
`--bmx-model-viewer-background`	Behind the model.
`--bmx-model-viewer-cap`	The inside of a section cut.
`--bmx-model-viewer-edge`	Edge lines.
`--bmx-model-viewer-height`	The height of the view.
`--bmx-model-viewer-highlight`	The selected part's tint, and its edges.
`--bmx-model-viewer-measure`	Measurement lines and points.
`--bmx-model-viewer-panel-width`	The side panel's width.
`--bmx-model-viewer-pin`	A note's pin.
`--bmx-model-viewer-radius`	Corner radius of the frame.
`--bmx-model-viewer-surface`	The colour a saved picture is laid on.

`<bmx-notification-center>`

Properties

Property	Attribute	Type	Default	Description
`headingLevel`	`heading-level`	`number`	`2`	The level of the panel's heading (2 to 6); the day headings are one below.
`hideSettings`	`hide-settings`	`boolean`	`false`	Leave out the settings page.
`label`	`label`	`string`	—	The panel's heading, and the bell's name. Default: "Notifications".
`locale`	`locale`	`string`	—	The locale for times and dates. Default: the nearest `lang` attribute.
`max`	`max`	`number`	`200`	The most notifications kept; older ones beyond it are dropped (pinned ones never are).
`maxBadge`	`max-badge`	`number`	`99`	The bell shows "99+" past this.
`mode`	`mode`	`'popup' \| 'inline'`	`'popup'`	`popup`: a bell that opens the panel. `inline`: the panel drawn in place.
`notifications`	`notifications`	`BmxNotification[] \| string`	`[]`	The notifications, as objects or JSON. Mutable: the reader's changes are written back.
`now`	`now`	`number \| string`	—	The time it is now, for the grouping and the "5 min ago" times (milliseconds or ISO). Default: the clock, followed every half minute.
`open`	`open`	`boolean`	`false`	Whether the panel is open (popup mode). Mutable: the reader opens and closes it.
`placement`	`placement`	`BmxPlacement`	`'bottom-end'`	Where the panel opens against the bell.
`searchable`	`searchable`	`boolean`	`false`	Show a search box over the list.
`sources`	`sources`	`BmxNotificationSource[] \| string`	`[]`	The sources (channels), as objects, JSON or a comma list of ids. Mutable: muting is written back.
`stack`	`stack`	`boolean`	`true`	Stack notifications that share a `group` on the same day. Mutable: the settings page changes it.
`strings`	`strings`	`Partial<BmxNotificationCenterStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`tab`	`tab`	`BmxNotificationTab`	`'all'`	The tab showing. Mutable.

Events

Event	Detail	Description
`bmxAction`	`BmxNotificationActionDetail`	Fired when an action button is pressed. Cancel it to leave the notification unread.
`bmxChange`	`BmxNotificationChangeDetail`	Fired when the list changes, with the whole new list.
`bmxNotificationClick`	`BmxNotificationClickDetail`	Fired when a notification is chosen. Cancel it to handle the choice yourself.
`bmxOpenChange`	`boolean`	Fired when the panel opens or closes.
`bmxPreferencesChange`	`BmxNotificationPreferencesDetail`	Fired when the reader mutes or unmutes a source or turns stacking on or off.

Methods

Method	Signature	Description
`add`	`add(notifications: BmxNotification \| BmxNotification[]) => Promise<string[]>`	Adds notifications (or replaces those with the same id) and announces the new unread ones. Resolves with their ids.
`clear`	`clear() => Promise<void>`	Removes every notification.
`getNotifications`	`getNotifications() => Promise<BmxNotification[]>`	The current list, as the element holds it.
`getUnreadCount`	`getUnreadCount() => Promise<number>`	How many are unread (not snoozed, not muted).
`hide`	`hide() => Promise<void>`	Closes the panel (popup mode).
`markAllRead`	`markAllRead() => Promise<string[]>`	Marks every notification that is showing as read. Resolves with their ids.
`markRead`	`markRead(ids: string \| string[], read?: boolean) => Promise<void>`	Marks notifications read (or unread with `read` false).
`removeNotifications`	`removeNotifications(ids: string \| string[]) => Promise<void>`	Removes notifications.
`setFocus`	`setFocus() => Promise<void>`	Focuses the bell (popup mode) or the list (inline mode).
`show`	`show() => Promise<void>`	Opens the panel (popup mode).
`snooze`	`snooze(id: string, until: BmxSnoozeOption \| number \| string \| Date \| null) => Promise<void>`	Snoozes one: until an instant (milliseconds, `Date`, ISO) or for `hour`, `three-hours`, `tomorrow` or `next-week`. Null wakes it.
`toggle`	`toggle() => Promise<void>`	Opens the panel when closed, closes it when open.

Slots

Slot	Description
`empty`	Shown instead of "You are all caught up".
`footer`	Along the foot of the panel: "See all", a link to a settings page.

CSS shadow parts

Part	Description
`action`	An action button.
`avatar`	A notification's picture or initials.
`badge`	The unread count on the bell.
`bell`	The bell button (popup mode).
`body`	A notification's text.
`empty`	The empty message.
`feed`	The list of notifications.
`footer`	The foot of the panel.
`header`	The panel's heading row.
`item`	One notification; also `item-unread`.
`meta`	The source and time line.
`panel`	The panel.
`search`	The search box.
`section`	A day heading.
`sources`	The source filter.
`tabs`	The All / Unread / Snoozed tabs.
`title`	A notification's title.
`tools`	The read, pin, snooze and dismiss buttons.

CSS custom properties

Property	Description
`--bmx-notification-center-avatar-size`	The size of a notification's picture.
`--bmx-notification-center-background`	The panel's background.
`--bmx-notification-center-badge-background`	The unread count's background.
`--bmx-notification-center-bell-size`	The bell button's size.
`--bmx-notification-center-height`	The tallest the panel grows (popup mode); the list scrolls inside it.
`--bmx-notification-center-radius`	Corner radius of the panel.
`--bmx-notification-center-shadow`	The floating panel's shadow.
`--bmx-notification-center-unread-background`	The background of an unread notification.
`--bmx-notification-center-width`	The panel's width (popup mode).

`<bmx-option>`

Properties

Property	Attribute	Type	Default	Description
`description`	`description`	`string`	—	Secondary text, under the label.
`disabled`	`disabled`	`boolean`	`false`	Whether it can be chosen.
`group`	`group`	`string`	—	The heading this option sits under. A heading appears whenever this changes from one option to the next, so the document order is the display order and nothing is regrouped on the author's behalf.
`label`	`label`	`string`	—	What the user reads. Falls back to the element's own text.
`value`	`value`	`string`	—	What the form receives when this option is chosen. Must be unique in its list.

Slots

Slot	Description
`(default)`	The option's label, when the `label` property is not set.

`<bmx-org-chart>`

Properties

Property	Attribute	Type	Default	Description
`initialDepth`	`initial-depth`	`number`	—	How many generations to open on first render. A chart that opens with eleven hundred boxes on it has answered no question anybody had. Left unset, everything is open except the nodes that said `collapsed` themselves.
`label`	`label`	`string`	—	What the tree is called. Without one it is announced as "Organisation chart".
`levelGap`	`level-gap`	`number`	`56`	The gap between one generation and the next, in pixels.
`nodeHeight`	`node-height`	`number`	`72`	The least a box may be, in pixels. A floor rather than a height: the real height is measured, because a consumer's font, padding or a job title that wraps to two lines all change it and a layout that used this number regardless would draw the boxes overlapping.
`nodeWidth`	`node-width`	`number`	`176`	How wide a box is, in pixels. A layout input rather than a styling one, and the distinction matters because this library does not take `@Prop()`s for looks. The arithmetic cannot run without a number, and it cannot read one out of a custom property - `getComputedStyle` hands those back unresolved, exactly as written. So the number comes in here and the component writes it into the CSS, which keeps the box that is drawn and the box that was laid out the same box by construction. Everything about how a node looks is still CSS: see the parts below.
`nodes`	`nodes`	`BmxOrgNode[] \| string`	`[]`	The people, as a flat list. Read through `src/core/markup.ts`, so `nodes='[{...}]'` written in a Razor page, a Blazor component or plain HTML works exactly as an assignment from React does.
`orientation`	`orientation`	`BmxOrgOrientation`	`'vertical'`	Which way the generations run.
`siblingGap`	`sibling-gap`	`number`	`24`	The gap between two boxes side by side, in pixels.

Events

Event	Detail	Description
`bmxSelect`	`BmxOrgChartSelectDetail`	A node was chosen - clicked, or Enter or Space on it.
`bmxToggle`	`BmxOrgChartToggleDetail`	A branch was opened or closed.

Methods

Method	Signature	Description
`collapseAll`	`collapseAll() => Promise<void>`	Close every branch that has anything in it.
`expandAll`	`expandAll() => Promise<void>`	Open every branch.
`focusNode`	`focusNode(id: string) => Promise<void>`	Put the tab stop on a node, and the focus with it.
`toggle`	`toggle(id: string, expanded?: boolean) => Promise<void>`	Open or close one branch by id.

Slots

Slot	Description
`empty`	what to draw when there are no nodes at all.

CSS shadow parts

Part	Description
`canvas`
`empty`
`node-count`
`node-detail`
`node-handle`
`node-label`
`tree`
`wire`
`wires`

CSS custom properties

Property	Description
`--bmx-org-node-background`	The box's fill.
`--bmx-org-node-border`	Its border.
`--bmx-org-node-color`	Its text.
`--bmx-org-node-height`	The least a box may be. From `node-height`.
`--bmx-org-node-radius`	Its corner radius.
`--bmx-org-node-width`	How wide a box is. Written by the component from `node-width`, so the box drawn and the box laid out are the same box.
`--bmx-org-wire-color`	The connectors.
`--bmx-org-wire-width`	How thick they are. @part canvas - the whole drawing area. @part wires - the SVG layer of connectors. @part wire - one connector. @part tree - the `role="tree"` that holds the boxes. @part node - one box. Also `node-branch` or `node-leaf`, and `node-<category>`. @part node-label - the name inside it. @part node-detail - the second line. @part node-handle - the plus or minus that opens the branch. @part node-count - the `+6` on a closed branch. @part empty - what is drawn when there is nothing to chart.

`<bmx-pagination>`

Properties

Property	Attribute	Type	Default	Description
`boundaries`	`boundaries`	`number`	`1`	How many pages to pin at each end.
`compact`	`compact`	`boolean`	`false`	Draw only the previous and next buttons, with the page as text between. What a narrow screen wants. It is a property rather than a media query because the component cannot know how much room the page has given it - a container query in the consumer's stylesheet can set it, and often should.
`disabled`	`disabled`	`boolean`	`false`	Nothing can be pressed. The current page is still readable.
`firstLabel`	`first-label`	`string`	`'First page'`	The labels on the four movement buttons, and on the size control.
`label`	`label`	`string`	`'Pagination'`	The navigation landmark's accessible name.
`lastLabel`	`last-label`	`string`	`'Last page'`
`nextLabel`	`next-label`	`string`	`'Next page'`
`page`	`page`	`number`	`1`	The page being looked at, counting from 1.
`pageSize`	`page-size`	`number`	`20`	How many rows a page holds.
`pageSizes`	`page-sizes`	`number[] \| string`	`[]`	The page sizes a reader may choose between. An empty list - the default - draws no size control at all. Given some, the control appears, and changing it keeps the row you are looking at on screen rather than the page number: at twenty per page, page 4 is rows 61 to 80, and at fifty per page those rows are on page 2. Landing on page 4 of the new pagination would show rows 151 to 200, which you have never seen. Accepts a comma-separated or JSON string as well, because an attribute is the only channel some templates have. See `src/core/markup.ts`.
`pages`	`pages`	`number`	—	How many pages there are. Set this when your API tells you a page count and nothing else. When `totalItems` is given, that wins - it is the more precise fact, and it is what the summary and the page-size control need.
`previousLabel`	`previous-label`	`string`	`'Previous page'`
`showEdges`	`show-edges`	`boolean`	`false`	Whether to draw the jump-to-first and jump-to-last buttons.
`showSummary`	`show-summary`	`boolean`	`false`	Whether to draw the "21-40 of 813" summary. Needs `totalItems`.
`siblings`	`siblings`	`number`	`1`	How many pages to show either side of the current one.
`sizeLabel`	`size-label`	`string`	`'Rows per page'`
`totalItems`	`total-items`	`number`	—	How many rows there are altogether.

Events

Event	Detail	Description
`bmxChange`	`BmxPaginationChangeDetail`	Fired when the reader asks for a different page, or a different page size.

Methods

Method	Signature	Description
`goTo`	`goTo(page: number) => Promise<void>`	Go to a page. Clamped, and silent if it is the page already showing.
`next`	`next() => Promise<void>`	Go forward one page, if there is one.
`previous`	`previous() => Promise<void>`	Go back one page, if there is one.

CSS shadow parts

Part	Description
`base`	The `<nav>`.
`current`	The page button for the page you are on. Carries `part="page"` as well.
`first`	The button that jumps to page one.
`gap`	An ellipsis.
`last`	The button that jumps to the final page.
`list`	The row of controls.
`next`	The button that goes forward one page.
`page`	One page button.
`previous`	The button that goes back one page.
`size`	The rows-per-page control.
`summary`	The "21-40 of 813" text.

CSS custom properties

Property	Description
`--bmx-pagination-background-hover`	A button's background under the pointer.
`--bmx-pagination-border-color`	The border on a page button.
`--bmx-pagination-color`	A page number's colour.
`--bmx-pagination-current-background`	The background behind it.
`--bmx-pagination-current-color`	The colour of the page you are on.
`--bmx-pagination-gap`	Space between one control and the next.
`--bmx-pagination-radius`	A button's corner radius.
`--bmx-pagination-size`	The height and minimum width of a page button.
`--bmx-pagination-summary-color`	The "21-40 of 813" text.

`<bmx-panorama-viewer>`

Properties

Property	Attribute	Type	Default	Description
`autoRotate`	`auto-rotate`	`number`	`0`	Degrees a second the view turns by itself when left alone; 0 never. Off when the reader prefers reduced motion, unless they turn it on.
`autoRotateDelay`	`auto-rotate-delay`	`number`	`4`	Seconds of stillness before turning by itself starts again.
`controls`	`controls`	`boolean`	`true`	Show the tools.
`editable`	`editable`	`boolean`	`false`	Hotspots can be added, moved, edited and deleted; changes arrive in `bmxChange`.
`label`	`label`	`string`	—	The viewer's accessible name. Default: the tour's title, else "360° view".
`maxFov`	`max-fov`	`number`	`120`
`minFov`	`min-fov`	`number`	`30`	The narrowest and widest the view zooms, in degrees.
`scene`	`scene`	`string`	`''`	The scene showing. Mutable.
`showMap`	`show-map`	`boolean`	`true`	Show the floor plan (when the tour has one). Mutable.
`showScenes`	`show-scenes`	`boolean`	`true`	Show the strip of scenes (when there is more than one). Mutable.
`src`	`src`	`string`	—	One equirectangular picture: the quick way to show a single panorama.
`strings`	`strings`	`Partial<BmxPanoramaViewerStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`tour`	`tour`	`BmxPanoTour \| Record<string, unknown> \| unknown[] \| string`	—	A tour: `{ title, start, scenes, map }`, an array of scenes, or JSON of either. Each scene: `id`, `title`, `src`, `preview`, `thumb`, `yaw`, `pitch`, `fov`, `north`, `haov`, `vaov`, `vOffset`, `hotspots`, `map: { x, y }`.

Events

Event	Detail	Description
`bmxChange`	`BmxPanoChangeDetail`	Fired when an `editable` tour changes, with the whole tour.
`bmxError`	`BmxPanoLoadDetail`	Fired when a scene's picture cannot be loaded.
`bmxHotspotClick`	`BmxPanoHotspotDetail`	Fired when a hotspot is chosen. Cancel to handle it yourself.
`bmxLoad`	`BmxPanoLoadDetail`	Fired when a scene's full picture has loaded.
`bmxSceneChange`	`BmxPanoSceneChangeDetail`	Fired when another scene shows.
`bmxViewChange`	`BmxPanoViewChangeDetail`	Fired as the view turns or zooms, at most five times a second, and when it comes to rest.

Methods

Method	Signature	Description
`capture`	`capture(type?: string, quality?: number) => Promise<Blob \| null>`	A picture of the current view (PNG unless another type is asked for).
`getTour`	`getTour() => Promise<BmxPanoTour>`	The tour as it is now (with any edits).
`getView`	`getView() => Promise<BmxPanoView>`	Where the reader is looking now.
`goToScene`	`goToScene(id: string, view?: Partial<BmxPanoView>) => Promise<void>`	Goes to another scene, facing `view` (else its own starting view).
`lookAt`	`lookAt(yaw: number, pitch?: number, fov?: number) => Promise<void>`	Turns to face a yaw and pitch (and zooms to `fov`, if given).
`setFocus`	`setFocus() => Promise<void>`	Puts keyboard focus on the view.
`setView`	`setView(view: Partial<BmxPanoView>, animate?: boolean) => Promise<void>`	Turns to a view (animated unless `animate` is false).

CSS shadow parts

Part	Description
`hotspot`	A hotspot; also `hotspot-scene`, `hotspot-info`, `hotspot-link`.
`map`	The floor plan.
`scenes`	The strip of scenes.
`toolbar`	The tools.
`viewport`	The view itself.

CSS custom properties

Property	Description
`--bmx-panorama-viewer-accent`	Hotspots, the plan's "you are here" and pressed tools.
`--bmx-panorama-viewer-glass`	The background of the floating controls.
`--bmx-panorama-viewer-height`	The viewer's height.
`--bmx-panorama-viewer-on-glass`	Text and icons on the floating controls.
`--bmx-panorama-viewer-radius`	Corner radius of the viewer.

`<bmx-pdf-viewer>`

Properties

Property	Attribute	Type	Default	Description
`allowDownload`	`allow-download`	`boolean`	`true`	Offers Download in the toolbar.
`allowPrint`	`allow-print`	`boolean`	`true`	Offers Print in the toolbar.
`annotations`	`annotations`	`boolean`	`true`	Shows the document's comments, highlights, shapes and stamps.
`fileName`	`file-name`	`string`	—	The name a download is saved under. Defaults to the name in `src`, then the document's title.
`forms`	`forms`	`boolean`	`true`	Shows the document's form fields and their values.
`label`	`label`	`string`	—	The viewer's accessible name. Defaults to the document's title.
`page`	`page`	`number`	`1`	The page in view, 1-based. Mutable: scrolling updates it.
`password`	`password`	`string`	—	The password to open a protected document with, when the page knows it. Script only.
`requestInit`	property only	`RequestInit`	—	Options for fetching `src` - headers, credentials. Script only.
`rotation`	`rotation`	`number`	`0`	Extra rotation for every page, clockwise: 0, 90, 180 or 270.
`sidebar`	`sidebar`	`'pages' \| 'outline' \| 'none'`	`'none'`	The side panel: `pages` (thumbnails), `outline`, or `none`.
`src`	`src`	`string`	—	The document's URL. A `data:` or `blob:` URL works too.
`strings`	`strings`	`Partial<BmxPdfViewerStrings> \| string`	—	Words the viewer shows, for translation: an object, or JSON text.
`toolbar`	`toolbar`	`boolean`	`true`	Shows the toolbar.
`zoom`	`zoom`	`string \| number`	`'page-width'`	`page-width`, `whole-page`, or a scale: `1` is actual size, `1.5` is 150%.

Events

Event	Detail	Description
`bmxPageChange`	`BmxPdfPageDetail`	The page in view changed.
`bmxPdfError`	`BmxPdfErrorDetail`	A document could not be opened, or is waiting for its password.
`bmxPdfLinkClick`	`BmxPdfLinkDetail`	The reader followed a link out of the document. Cancel it to handle the link yourself.
`bmxPdfLoad`	`BmxPdfLoadDetail`	A document opened.

Methods

Method	Signature	Description
`download`	`download(fileName?: string) => Promise<void>`	Saves the document as it was opened, under `fileName`.
`find`	`find(text: string) => Promise<number>`	Finds text in the document and shows the first match. Resolves to the number of matches.
`getInfo`	`getInfo() => Promise<BmxPdfInfo \| null>`	What the document says about itself, or null with no document open.
`getOutline`	`getOutline() => Promise<BmxPdfOutlineItem[]>`	The document's outline (bookmarks), as a tree.
`getText`	`getText(page: number) => Promise<string>`	The text of a page, 1-based, in reading order.
`goToPage`	`goToPage(page: number) => Promise<void>`	Scrolls to a page, 1-based.
`load`	`load(source: BmxPdfSource, password?: string) => Promise<number>`	Opens a document from a URL, a `File` or `Blob`, or bytes. Resolves to its page count, or 0 while it waits for its password; rejects when it cannot be opened.
`print`	`print() => Promise<void>`	Prints the document: every page, at its own paper size.
`rotate`	`rotate(degrees?: number) => Promise<void>`	Turns every page clockwise by a quarter turn, or by `degrees`.
`zoomIn`	`zoomIn() => Promise<void>`	Zooms in a step.
`zoomOut`	`zoomOut() => Promise<void>`	Zooms out a step.

Slots

Slot	Description
`empty`	What to show when there is no document.
`toolbar-end`	Extra controls at the end of the toolbar.

CSS shadow parts

Part	Description
`body`
`button`
`empty`
`error`
`find`
`find-count`
`find-input`
`link`
`note`
`note-button`
`note-close`
`outline`
`outline-item`
`outline-toggle`
`page`
`page-input`
`password`
`password-button`
`password-input`
`sidebar`
`sidebar-tab`
`status`
`text-layer`
`thumbnail`
`thumbnails`
`toolbar`
`viewport`
`zoom`

CSS custom properties

Property	Description
`--bmx-pdf-viewer-canvas`	The area behind the pages.
`--bmx-pdf-viewer-height`	How tall the viewer is.
`--bmx-pdf-viewer-link-hover`	The wash over a link under the pointer.
`--bmx-pdf-viewer-match`	A search match on the page.
`--bmx-pdf-viewer-match-current`	The match being shown.
`--bmx-pdf-viewer-note`	The colour of a comment's badge. @part toolbar - the row of controls. @part button - a toolbar button. @part page-input - the page number field. @part zoom - the zoom list. @part find - the search group. @part find-input - the search field. @part find-count - "3/12" beside it. @part body - the side panel and the pages. @part sidebar - the side panel. @part sidebar-tab - its Pages and Outline buttons. @part thumbnails - the list of page thumbnails. @part thumbnail - one of them. @part outline - the outline. @part outline-item - one entry in it. @part outline-toggle - the button that opens or closes an entry's children. @part viewport - the scrolling area that holds the pages. @part page - one page. Pages are paper: white in every theme. @part text-layer - the page's text over its picture, transparent until selected. @part match - a search match. Also `match-current`. @part link - a link on the page. @part note-button - a comment's button: a sticky note, or the badge on a commented mark. @part note - a comment's popup. @part note-close - its close button. @part password - the form that asks for a protected document's password. @part password-input - its field. @part password-button - its button. @part status - the "Opening" and "Preparing to print" notice. @part empty - what is shown when there is no document. @part error - the message when the document could not be opened.
`--bmx-pdf-viewer-page-shadow`	The shadow under each page.
`--bmx-pdf-viewer-selection`	Selected text on a page.
`--bmx-pdf-viewer-sidebar-width`	How wide the side panel is.

`<bmx-permission-matrix>`

Properties

Property	Attribute	Type	Default	Description
`actions`	`actions`	`BmxPermissionAction[] \| string`	`[]`	The actions, as objects or JSON: `{ id, label, description }`.
`conflict`	`conflict`	`BmxPermissionConflict`	`'deny-overrides'`	How disagreeing inherited roles are settled.
`defaultEffect`	`default-effect`	`BmxPermissionEffect`	`'deny'`	The answer when nothing decides.
`hideToolbar`	`hide-toolbar`	`boolean`	`false`	Leave out the toolbar.
`label`	`label`	`string`	—	The matrix's accessible name. Default: "Permissions".
`readonly`	`readonly`	`boolean`	`false`	No editing: the matrix only shows and explains.
`resources`	`resources`	`BmxPermissionResource[] \| string`	`[]`	The resources, as objects or JSON: `{ id, label, description, parent, actions }`.
`roles`	`roles`	`BmxPermissionRole[] \| string`	`[]`	The roles, as objects or JSON: `{ id, label, description, inherits }`.
`strings`	`strings`	`Partial<BmxPermissionMatrixStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`value`	`value`	`BmxPermissionGrant[] \| string`	`[]`	The saved grants, as objects or JSON: `{ role, resource, action, effect }`. Setting it discards unsaved changes.
`visibleRoles`	`visible-roles`	`string[] \| string`	`[]`	The roles shown as columns, by id; all when empty.

Events

Event	Detail	Description
`bmxPermissionChange`	`BmxPermissionChangeDetail`	Fired before cells change, from a click, a key, the toolbar or `setGrant`. Cancel it to refuse.
`bmxPermissionSave`	`BmxPermissionSaveDetail`	Fired when Save is pressed. Cancel it to keep the changes pending (to save them yourself later, call `commit()`).

Methods

Method	Signature	Description
`collapseAll`	`collapseAll() => Promise<void>`	Closes every resource that has children.
`commit`	`commit() => Promise<void>`	Makes the current grants the saved state, without an event (after saving them yourself).
`discard`	`discard() => Promise<void>`	Back to the saved state.
`expandAll`	`expandAll() => Promise<void>`	Opens every resource.
`explain`	`explain(role: string, resource: string, action: string) => Promise<BmxPermissionExplanation>`	The effective answer for a cell, and why.
`exportCsv`	`exportCsv() => Promise<string>`	The effective matrix as CSV (roles' actions across, resources down).
`getChanges`	`getChanges() => Promise<BmxPermissionChange[]>`	What differs from the saved state.
`getValue`	`getValue() => Promise<BmxPermissionGrant[]>`	Every explicit grant as it stands, unsaved changes included.
`redo`	`redo() => Promise<boolean>`	Redoes the last undone change. Resolves whether there was one.
`save`	`save() => Promise<boolean>`	Asks to save: fires `bmxPermissionSave`; unless it is cancelled, the current grants become the saved state.
`setGrant`	`setGrant(role: string, resource: string, action: string, effect: BmxPermissionEffect \| null) => Promise<boolean>`	Sets one cell: `allow`, `deny`, or null to inherit. Resolves whether it changed.
`undo`	`undo() => Promise<boolean>`	Undoes the last change. Resolves whether there was one.

CSS shadow parts

Part	Description
`action-header`	An action's header.
`cell`	One cell; also `cell-allow`, `cell-deny`, `cell-explicit`, `cell-changed`, `cell-selected`.
`explain`	The line saying why the focused cell is what it is.
`grid`	The scrolling matrix.
`header`	The two header rows.
`resource`	A resource's name cell.
`review`	The list of unsaved changes.
`role-header`	A role's header, over its actions.
`row`	One resource's row.
`toolbar`	The row of filter, edit and save controls.

CSS custom properties

Property	Description
`--bmx-permission-matrix-allow`	The colour of an allowed cell.
`--bmx-permission-matrix-cell-width`	The width of each action column.
`--bmx-permission-matrix-deny`	The colour of a denied cell.
`--bmx-permission-matrix-height`	The matrix's height; it scrolls inside it.
`--bmx-permission-matrix-indent`	How far each level of the resource tree is indented.
`--bmx-permission-matrix-name-width`	The width of the resource column.
`--bmx-permission-matrix-row-height`	The height of each row.

`<bmx-pert-chart>`

Properties

Property	Attribute	Type	Default	Description
`columnGap`	`column-gap`	`number`	`64`	Space between columns, in pixels.
`holidays`	`holidays`	`string[] \| string`	`[]`	Dates that are not worked, `YYYY-MM-DD`.
`label`	`label`	`string`	—	What the chart is called. Without one it is announced as "Task network".
`links`	`links`	`BmxTaskLink[] \| string`	`[]`	The links between tasks.
`locale`	`locale`	`string`	—	The locale dates are written in. Defaults to the page's.
`nodeHeight`	`node-height`	`number`	`92`	How tall a box is, in pixels.
`nodeWidth`	`node-width`	`number`	`188`	How wide a box is, in pixels. A layout input; its looks are CSS.
`projectStart`	`project-start`	`string`	—	The first day work can happen, `YYYY-MM-DD`.
`rowGap`	`row-gap`	`number`	`28`	Space between rows, in pixels.
`scale`	`scale`	`number`	`1`	How large the chart is drawn, from 0.25 to 2.
`showCriticalPath`	`show-critical-path`	`boolean`	`true`	Draws the critical path in the critical colour.
`tasks`	`tasks`	`BmxTask[] \| string`	`[]`	The tasks, as a flat list with parent references - the same list `bmx-gantt` takes.
`workingDays`	`working-days`	`number[] \| string`	`[1, 2, 3, 4, 5]`	Days of the week that are worked, 0 for Sunday.

Events

Event	Detail	Description
`bmxSelect`	`BmxPertSelectDetail`	A task was chosen.

Methods

Method	Signature	Description
`exportSvg`	`exportSvg() => Promise<string>`	The network as a standalone SVG document.
`focusTask`	`focusTask(id: string) => Promise<void>`	Scrolls a task's box into view and focuses it.
`getSchedule`	`getSchedule() => Promise<BmxSchedule>`	The plan as scheduled.
`zoomIn`	`zoomIn() => Promise<void>`	Draws the chart larger.
`zoomOut`	`zoomOut() => Promise<void>`	Draws the chart smaller.
`zoomToFit`	`zoomToFit() => Promise<void>`	Scales the chart to fit its box.

Slots

Slot	Description
`empty`	what to draw when there are no tasks.

CSS shadow parts

Part	Description
`canvas`
`empty`
`network`
`node-early`
`node-late`
`node-name`
`node-title`
`node-wbs`
`viewport`
`wires`

CSS custom properties

Property	Description
`--bmx-pert-band-color`	The date rows at the top and bottom of a box.
`--bmx-pert-critical-color`	A critical box's border and a critical arrow.
`--bmx-pert-height`	How tall the chart's scrolling area is.
`--bmx-pert-node-background`	A box's fill.
`--bmx-pert-node-border`	Its border.
`--bmx-pert-node-color`	Its text.
`--bmx-pert-node-height`	How tall a box is. From `node-height`.
`--bmx-pert-node-radius`	Its corners.
`--bmx-pert-node-width`	How wide a box is. Written by the component from `node-width`.
`--bmx-pert-wire-color`	The arrows.
`--bmx-pert-wire-width`	How thick they are. @part viewport - the scrolling area. @part canvas - the drawing, scaled by `scale`. @part wires - the SVG layer of arrows. @part wire - one arrow. Also `wire-critical`. @part network - the `role="list"` that holds the boxes. @part node - one box. Also `node-critical`, `node-milestone`, `node-selected` and `node-<category>`. @part node-early - the top row: earliest start, length, earliest finish. @part node-title - the outline number and name. @part node-wbs - the outline number. @part node-name - the name. @part node-late - the bottom row: latest start, float, latest finish. @part empty - what is drawn when there are no tasks.

`<bmx-pivot-chart>`

Properties

Property	Attribute	Type	Default	Description
`data`	`data`	`BmxPivotChartData \| string`	—	The numbers to chart, without a pivot: `{ categories, series: [{ name, values }] }`, or JSON.
`for`	`for`	`string \| HTMLElement`	—	The pivot grid it charts: its id, a CSS selector, or the element.
`label`	`label`	`string`	—	A title over the chart, and its accessible name.
`legend`	`legend`	`'bottom' \| 'end' \| 'none'`	`'bottom'`	Where the legend goes: `bottom`, `end` or `none`.
`locale`	`locale`	`string`	—	A BCP 47 locale for numbers. Default: the page's `lang`.
`maxCategories`	`max-categories`	`number`	`40`	At most this many categories.
`maxSeries`	`max-series`	`number`	`10`	At most this many series.
`stacked`	`stacked`	`boolean`	`false`	Stack the series (columns, bars and areas).
`type`	`type`	`BmxPivotChartType`	`'column'`	`column` (default), `bar`, `line`, `area`, `pie` or `doughnut`.
`withTotals`	`with-totals`	`boolean`	`false`	Chart subtotals and grand totals too.

Events

Event	Detail	Description
`bmxChartSelect`	`BmxPivotChartSelectDetail`	A bar, point or slice was clicked, or Enter was pressed on it.

Methods

Method	Signature	Description
`refreshChart`	`refreshChart() => Promise<void>`	Draws again from the pivot.

CSS shadow parts

Part	Description
`caption`	its title.
`chart`	the whole chart.
`legend`	the series.
`legend-item`	one series, a button that shows or hides it.
`plot`	the drawing.
`tooltip`	the value under the pointer.

CSS custom properties

Property	Description
`--bmx-pivot-chart-area-opacity`	How solid an area is. Default 0.22.
`--bmx-pivot-chart-background`	Behind the chart.
`--bmx-pivot-chart-color-0`	The first series (or slice). Colours 0 to 9 are used in turn.
`--bmx-pivot-chart-color-1`	The second series.
`--bmx-pivot-chart-color-2`	The third series.
`--bmx-pivot-chart-color-3`	The fourth series.
`--bmx-pivot-chart-color-4`	The fifth series.
`--bmx-pivot-chart-color-5`	The sixth series.
`--bmx-pivot-chart-color-6`	The seventh series.
`--bmx-pivot-chart-color-7`	The eighth series.
`--bmx-pivot-chart-color-8`	The ninth series.
`--bmx-pivot-chart-color-9`	The tenth series.
`--bmx-pivot-chart-grid`	The value axis lines.
`--bmx-pivot-chart-height`	How tall the drawing is. Default 20rem.

`<bmx-pivot-grid>`

Properties

Property	Attribute	Type	Default	Description
`appearance`	`appearance`	`'modern' \| 'striped' \| 'bordered' \| 'minimal' \| 'glass'`	`'modern'`	The look: `modern`, `striped`, `bordered`, `minimal` or `glass`.
`columnSubtotals`	`column-subtotals`	`boolean`	`true`	A total column after each open column member's columns.
`data`	`data`	`BmxPivotRecord[] \| string`	`[]`	The records: an array of objects, or JSON in the attribute.
`dataProvider`	property only	`(request: BmxPivotServerRequest) => Promise<BmxPivotServerResponse> \| BmxPivotServerResponse`	—	Totals from your own server instead of from `data`: called with the layout (levels, values, filters), it answers every cell, subtotals and grand totals included. Declare the fields with `fields`. Set from script.
`deferUpdates`	`defer-updates`	`boolean`	`false`	Changes in the field list wait for its Update button.
`density`	`density`	`'compact' \| 'standard' \| 'comfortable'`	`'standard'`	Line height: `compact`, `standard` or `comfortable`.
`drillPanel`	`drill-panel`	`boolean`	`true`	Show the records behind a cell in a panel when it is drilled through, unless `bmxPivotDrillThrough` is cancelled.
`drillProvider`	property only	`(request: BmxPivotServerDrillRequest) => Promise<BmxPivotRecord[]> \| BmxPivotRecord[]`	—	The records behind a cell from your server, for drill-through when totals come from `dataProvider`. Set from script.
`emptyCell`	`empty-cell`	`string`	`''`	What an empty cell shows.
`expandDepth`	`expand-depth`	`number`	—	How many levels start open. Default: all of them.
`fieldList`	`field-list`	`'auto' \| 'open' \| 'closed' \| 'none'`	`'auto'`	The field list: `auto` (open when the grid is wide enough), `open`, `closed`, or `none` for no field list at all.
`fields`	`fields`	`BmxPivotFieldDef[] \| string`	`[]`	The fields: `{ field, title?, type?, format?, dateParts?, bin?, order?, folder?, hidden? }`, or JSON. Fields not listed are read from the records.
`fileName`	`file-name`	`string`	`'pivot'`	The name exported files are saved under.
`formatRules`	`format-rules`	`BmxPivotFormatRule[] \| string`	`[]`	Conditional formatting, as data: `[{ type: 'bars' \| 'scale' \| 'icons' \| 'highlight', value?, scope?, when?, tone?, textTone?, bold?, tones?, icons?, reverse? }]`, or JSON. The reader can add them from a value's menu.
`grandTotals`	`grand-totals`	`'both' \| 'rows' \| 'columns' \| 'none'`	`'both'`	Grand totals: a last row and a last column (`both`), the row only (`rows`), the column only (`columns`), or `none`.
`hierarchies`	`hierarchies`	`BmxPivotHierarchy[] \| string`	`[]`	Groups of levels offered as one item in the field list: `{ name, title?, levels }`, or JSON.
`label`	`label`	`string`	—	The accessible name. Default: "Pivot".
`layout`	`layout`	`BmxPivotLayout \| string`	`{}`	What goes where: `{ rows, columns, filters, values, valuesOn, settings }`, or JSON.
`loading`	`loading`	`boolean`	`false`	Show a loading bar: set while your own data is on its way.
`locale`	`locale`	`string`	—	A BCP 47 locale for numbers, dates, member names and sorting. Default: the page's `lang`, then the reader's.
`lockLayout`	`lock-layout`	`boolean`	`false`	The reader may sort, filter, open and close, but not move fields or change values.
`memberProvider`	property only	`(level: string) => Promise<readonly { key: string; label?: string }[]> \| readonly { key: string; label?: string }[]`	—	A level's members from your server, for filters and slicers when totals come from `dataProvider`. Set from script.
`requestInit`	property only	`RequestInit`	—	Options for fetching `src`: headers, credentials.
`rowLayout`	`row-layout`	`'compact' \| 'tabular'`	`'compact'`	Row headings in one indented column (`compact`) or one column per level (`tabular`).
`src`	`src`	`string`	—	A URL to load the records from: JSON, JSON lines, CSV or TSV.
`stateKey`	`state-key`	`string`	—	A name to keep the reader's workspace under in this browser: layout, open members, widths.
`strings`	`strings`	`Partial<BmxPivotGridStrings> \| string`	—	Every word the grid shows, for another language: any of them, or JSON.
`subtotals`	`subtotals`	`'top' \| 'bottom' \| 'none'`	`'top'`	Where an open row member's total goes: on its own line (`top`), after its members (`bottom`), or nowhere.
`timeZone`	`time-zone`	`'local' \| 'utc'`	`'local'`	How a moment with a time of day becomes a day: in the reader's zone (`local`) or `utc`. A bare date is always its own day.
`toolbar`	`toolbar`	`boolean`	`true`	Show the toolbar.
`worker`	`worker`	`'auto' \| 'always' \| 'never'`	`'auto'`	Total on a background thread: `auto` (from `worker-threshold` records), `always`, or `never`.
`workerThreshold`	`worker-threshold`	`number`	`50000`	Records from which `auto` uses a background thread.

Events

Event	Detail	Description
`bmxPivotCellClick`	`BmxPivotCellDetail`	A cell was clicked.
`bmxPivotDrillThrough`	`BmxPivotDrillThroughDetail`	A cell was double-clicked or Enter pressed on it: the records behind it. Cancelable.
`bmxPivotError`	`BmxPivotErrorDetail`	The records could not be loaded or totalled.
`bmxPivotLayoutChange`	`BmxPivotLayoutChangeDetail`	The layout changed.
`bmxPivotStateChange`	`BmxPivotStateChangeDetail`	Something the reader can save changed: the layout, what is open, a width.
`bmxPivotToggle`	`BmxPivotToggleDetail`	A member was opened or closed.
`bmxPivotUpdate`	`BmxPivotUpdateDetail`	New totals are on show - with the numbers arranged for a chart.

Methods

Method	Signature	Description
`appendData`	`appendData(records: BmxPivotRecord[]) => Promise<void>`	Adds records after those held, and totals again shortly after: call it with each chunk as a large set arrives. Columns already read are extended rather than read again.
`collapseAll`	`collapseAll(axis?: BmxPivotAxisName) => Promise<void>`	Closes every member, on one axis or both.
`download`	`download(format?: "xlsx" \| "csv", options?: { records?: boolean; fileName?: string; }) => Promise<void>`	Saves what is on show as a file: `xlsx` or `csv`.
`drillThrough`	`drillThrough(rowPath: string[], columnPath: string[], limit?: number) => Promise<BmxPivotRecord[]>`	The records behind a total, by the member paths of its row and column. At most `limit`.
`expandAll`	`expandAll(axis?: BmxPivotAxisName) => Promise<void>`	Opens every member, on one axis or both.
`expandToLevel`	`expandToLevel(axis: BmxPivotAxisName \| "both", depth: number) => Promise<void>`	Opens the levels above `depth` and closes the rest: 1 shows the outermost level's members, open.
`exportData`	`exportData(format?: "xlsx" \| "csv" \| "html", options?: { records?: boolean; }) => Promise<Blob>`	What is on show as a file: `xlsx` (the pivot as a styled sheet, headings merged, rows as an outline, conditional formats kept; with `records: true` the records behind it as a second sheet), `csv`, or `html` for printing.
`getCellValue`	`getCellValue(rowPath: string[], columnPath: string[], valueId?: string) => Promise<number \| null>`	A total by the member paths of its row and column; the first value when none is named.
`getChartData`	`getChartData(options?: { maxCategories?: number; maxSeries?: number; withTotals?: boolean; }) => Promise<BmxPivotChartData>`	The totals on show arranged for a chart: a category per row, a series per column and value.
`getLayout`	`getLayout() => Promise<BmxPivotLayout>`	The layout, as JSON can carry it.
`getLevelTitle`	`getLevelTitle(level: string) => Promise<string>`	A level's name: "Region", or "Order date (Year)"; the key itself when there is no such level.
`getMembers`	`getMembers(level: string) => Promise<{ key: string; label: string; count: number \| null; selected: boolean; }[]>`	A level's members in order, each with how many records it has under every other filter (null when totals come from a server) and whether the level's own filter keeps it. What `bmx-pivot-slicer` shows.
`getPrintHtml`	`getPrintHtml() => Promise<string>`	What is on show as a page to print: headings repeated on every page.
`getState`	`getState() => Promise<BmxPivotState>`	Everything the reader can change - layout, open members, widths, view - as JSON.
`getText`	`getText() => Promise<string>`	What is on show as text: tab-separated, headings first.
`load`	`load(source: string \| URL \| Blob) => Promise<void>`	Loads records from a URL, a File or Blob, or text: JSON, JSON lines, CSV or TSV.
`print`	`print() => Promise<void>`	Prints what is on show.
`redo`	`redo() => Promise<boolean>`	Steps the layout forward again.
`refresh`	`refresh() => Promise<void>`	Totals again from the records: after changing records in place.
`setData`	`setData(records: BmxPivotRecord[]) => Promise<void>`	Replaces the records.
`setLayout`	`setLayout(layout: BmxPivotLayout \| string) => Promise<void>`	Replaces the layout. The reader can undo it.
`setMemberFilter`	`setMemberFilter(level: string, keys: string[] \| null) => Promise<void>`	Keeps only these members of a level (their keys), whether or not the level is placed; null keeps them all.
`setState`	`setState(state: BmxPivotState \| string) => Promise<boolean>`	Restores what `getState` gave. Returns false when it was not state at all.
`settled`	`settled() => Promise<void>`	Resolves once the totals for everything set so far are on show.
`showFieldList`	`showFieldList(open?: boolean) => Promise<void>`	Opens or closes the field list.
`toggleMember`	`toggleMember(axis: BmxPivotAxisName, path: string[], open?: boolean) => Promise<boolean>`	Opens or closes a member by its path of keys. Returns whether anything changed.
`undo`	`undo() => Promise<boolean>`	Steps the layout back.

Slots

Slot	Description
`toolbar-end`	your own controls at the end of the toolbar.
`toolbar-start`	your own controls at the start of the toolbar.

CSS shadow parts

Part	Description
`add-calculated`	the button that adds a calculated value.
`chip`	a field placed in an area.
`drag-ghost`	the label that follows the pointer while a field is dragged.
`drill-panel`	the panel of records behind a cell.
`empty`	what is shown before any field is placed, or when no record matches.
`error`	what is shown when the records could not be loaded or totalled.
`field`	a field in the list.
`field-list`	the field list.
`field-search`	its search field.
`grid`	the scrolling grid.
`loading`	the bar shown while totals are worked out.
`matrix`	the area holding the grid.
`member-search`	the search in a member filter.
`menu`	a pop-up: a field's menu, a value's menu, a filter, a formula.
`menu-item`	one of its commands.
`status`	the record count and timing in the toolbar.
`tool-button`	a tool. The field list's tool is also `fields-button`.
`toolbar`	the bar of tools above the grid.
`update-button`	the field list's Update button, when updates are deferred.
`zone`	one of the four areas: Filters, Columns, Rows, Values.

CSS custom properties

Property	Description
`--bmx-pivot-grid-active`	The ring around the active cell.
`--bmx-pivot-grid-background`	Behind the cells.
`--bmx-pivot-grid-bar-opacity`	How strong a data bar is, 0-100%. Default 34%.
`--bmx-pivot-grid-cell-padding`	Space either side of a cell's content.
`--bmx-pivot-grid-chip-background`	A field placed in an area.
`--bmx-pivot-grid-font-size`	The cells' text size.
`--bmx-pivot-grid-grand-background`	A grand total.
`--bmx-pivot-grid-header-background`	Behind the headings.
`--bmx-pivot-grid-header-height`	Each heading row's height.
`--bmx-pivot-grid-header-text`	The headings' text.
`--bmx-pivot-grid-height`	How tall the grid is, toolbar included.
`--bmx-pivot-grid-indent`	How far each row level is indented, in the compact form.
`--bmx-pivot-grid-line`	The lines between cells.
`--bmx-pivot-grid-negative`	The text of a negative total.
`--bmx-pivot-grid-panel-background`	Behind the field list.
`--bmx-pivot-grid-panel-width`	The field list's width.
`--bmx-pivot-grid-radius`	The corners of the grid.
`--bmx-pivot-grid-range`	The chosen cells.
`--bmx-pivot-grid-row-alternate`	Every other line, in the striped look.
`--bmx-pivot-grid-row-height`	Each line's height. Set it to override the density.
`--bmx-pivot-grid-row-hover`	A line under the pointer.
`--bmx-pivot-grid-scrollbar-thumb`	The scrollbars' thumbs.
`--bmx-pivot-grid-scrollbar-track`	The scrollbars' tracks.
`--bmx-pivot-grid-subtotal-background`	A subtotal.

`<bmx-pivot-slicer>`

Properties

Property	Attribute	Type	Default	Description
`columns`	`columns`	`number`	`2`	Columns, for the `grid` layout.
`field`	`field`	`string`	`''`	The level it filters: a field (`region`) or a part of a date field (`orderDate:year`).
`for`	`for`	`string \| HTMLElement`	—	The pivot grid it filters: its id, a CSS selector, or the element.
`hideEmpty`	`hide-empty`	`boolean`	`false`	Hide members with no records under the pivot's other filters, rather than dimming them.
`label`	`label`	`string`	—	Its heading. Default: the field's name from the pivot.
`layout`	`layout`	`'buttons' \| 'grid' \| 'list'`	`'buttons'`	`buttons` (default, wrapping), `grid` (in `columns` columns) or `list` (one per line).
`multiple`	`multiple`	`boolean`	`true`	Choose several members (default), or one at a time.
`search`	`search`	`'auto' \| 'always' \| 'never'`	`'auto'`	A search box: from 12 members (`auto`), `always` or `never`.
`showCounts`	`show-counts`	`boolean`	`true`	Show how many records each member has.

Events

Event	Detail	Description
`bmxSlicerChange`	`BmxPivotSlicerChangeDetail`	The choice changed.

Methods

Method	Signature	Description
`clear`	`clear() => Promise<void>`	Shows every member again.
`getSelected`	`getSelected() => Promise<string[] \| null>`	The member keys kept, or null when all are.
`refreshMembers`	`refreshMembers() => Promise<void>`	Reads the members again from the pivot.
`select`	`select(keys: string[] \| null) => Promise<void>`	Keeps only these members (their keys); an empty list or null keeps them all.

CSS shadow parts

Part	Description
`clear`	the button that shows every member again.
`count`	how many records a member has.
`head`	its heading row.
`option`	one member. Also `option-selected` when it is chosen.
`options`	the members.
`search`	the search field.
`slicer`	the whole slicer.
`title`	its heading.

CSS custom properties

Property	Description
`--bmx-pivot-slicer-background`	Behind the slicer.
`--bmx-pivot-slicer-max-height`	How tall the list may grow before it scrolls. Default 16rem.
`--bmx-pivot-slicer-option-background`	A member.
`--bmx-pivot-slicer-radius`	The slicer's corners.
`--bmx-pivot-slicer-selected-background`	A chosen member.
`--bmx-pivot-slicer-selected-text`	A chosen member's text.
`--bmx-pivot-slicer-width`	How wide the slicer is. Default 14rem.

`<bmx-planning-grid>`

Properties

Property	Attribute	Type	Default	Description
`compare`	`compare`	`string`	—	Another version to compare every cell with. Two-way.
`currency`	`currency`	`string`	—	ISO 4217 code for currency rows. Default: the plan's, then USD.
`label`	`label`	`string`	—	The grid's accessible name. Default: the plan's name, or "Plan".
`locale`	`locale`	`string`	—	A BCP 47 locale for numbers and money. Default: the page's `lang`, then the reader's.
`negative`	`negative`	`BmxPlanNegative`	`'minus'`	How negative numbers are shown.
`panel`	`panel`	`BmxPlanningGridPanel`	`'details'`	The panel beside the grid.
`plan`	`plan`	`BmxPlanData \| string`	`{ periods: [], rows: [], versions: [], values: {} }`	The plan: periods, rows, versions, values, holds, comments and sign-off (object or JSON). Two-way.
`readonly`	`readonly`	`boolean`	`false`	Shows the plan without letting it be changed.
`scale`	`scale`	`BmxPlanScale`	`'units'`	Numbers shown in units, thousands or millions; typed numbers are read in the same scale. Two-way.
`spreadMethod`	`spread-method`	`BmxPlanSpreadMethod`	`'proportional'`	How a total typed into a group row or a total column is spread.
`strings`	`strings`	`Partial<BmxPlanningGridStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`totals`	`totals`	`BmxPlanTotals`	`'both'`	Which totals are shown: group (quarter) totals, the grand total, both or none.
`user`	`user`	`string`	—	The name new comments are signed with.
`version`	`version`	`string`	—	The version shown and edited. Default: the first. Two-way.

Events

Event	Detail	Description
`bmxChange`	`BmxPlanChangeDetail`	Fired after every change to the plan, with the whole plan and the cells that changed.
`bmxSelect`	`BmxPlanSelectDetail`	Fired when the active cell moves.

Methods

Method	Signature	Description
`acceptChanges`	`acceptChanges() => Promise<void>`	Marks the current numbers as saved: `getChanges()` starts again from here.
`addComment`	`addComment(row: string, column: string, text: string, version?: string) => Promise<void>`	Adds a comment to a cell; column is a period id, a group's name or `total`.
`applyWhatIf`	`applyWhatIf() => Promise<void>`	Keeps the what-if's changes as one change to the plan.
`calculate`	`calculate(version?: string) => Promise<{ rows: Record<string, (number \| null)[]>; errors: Record<string, (string \| null)[]>; }>`	The plan worked out for a version: every row's period values, and totals by `result.total(row, from, to)`.
`check`	`check() => Promise<BmxPlanProblem[]>`	Problems with the plan's ids, parents and formulas.
`collapseAll`	`collapseAll() => Promise<void>`	Shows only the top rows.
`discardWhatIf`	`discardWhatIf() => Promise<void>`	Throws the what-if's changes away.
`expandAll`	`expandAll() => Promise<void>`	Shows every row.
`getChanges`	`getChanges() => Promise<BmxPlanChange[]>`	Every cell changed since the plan was loaded or `acceptChanges()` was last called.
`getCsv`	`getCsv(version?: string) => Promise<string>`	The plan as CSV: every row, the periods and totals, unformatted numbers, for one version.
`getPlan`	`getPlan() => Promise<BmxPlanData>`	The plan as it stands (without an unapplied what-if).
`getValue`	`getValue(row: string, column: string, version?: string) => Promise<number \| null>`	One number: a period's, a group's (by its name) or the year's (`total`). Default version: the one shown.
`hold`	`hold(row: string, period: string, held?: boolean, version?: string) => Promise<void>`	Holds or releases a period cell, so spreading leaves it as it is.
`redo`	`redo() => Promise<boolean>`	Redoes the last undone change.
`selectCell`	`selectCell(row: string, column: string) => Promise<boolean>`	Makes a cell the active one and scrolls it into view (without moving focus); column is a period id, a group's name or `total`.
`setPlan`	`setPlan(plan: BmxPlanData \| string, options?: { keepHistory?: boolean; }) => Promise<void>`	Replaces the plan. `keepHistory` keeps undo.
`setStatus`	`setStatus(row: string, status: BmxPlanStatus) => Promise<void>`	Sets a row's sign-off. Submitted and approved rows, and the rows below them, cannot be edited.
`setValue`	`setValue(row: string, column: string, value: number \| string \| null, version?: string) => Promise<boolean>`	Sets a number as if typed: a period cell takes it; a group row or a total spreads it. Resolves whether anything changed.
`spread`	`spread(row: string, column: string, total: number, options?: { method?: BmxPlanSpreadMethod; profile?: string; version?: string; }) => Promise<BmxPlanSpreadResult>`	Spreads a total over the cells below a row in a column (period, group name or `total`).
`startWhatIf`	`startWhatIf() => Promise<void>`	Starts a what-if: changes are tried out and shown against the plan until applied or discarded.
`undo`	`undo() => Promise<boolean>`	Undoes the last change. Resolves whether there was one.

CSS shadow parts

Part	Description
`cell`	A number cell; also `cell-input`, `cell-total`, `cell-held`, `cell-actual`, `cell-error`.
`details`	The cell details panel.
`dialog`	The spread dialog.
`grid`	The scrolling grid.
`row`	A row of the grid.
`toolbar`	The row of version, comparison and actions.

CSS custom properties

Property	Description
`--bmx-planning-grid-actual`	The background of cells holding actuals.
`--bmx-planning-grid-cell-width`	The width of each number column.
`--bmx-planning-grid-favourable`	The colour of good-news differences.
`--bmx-planning-grid-head-width`	The width of the row headings column.
`--bmx-planning-grid-held`	The colour that marks a held cell.
`--bmx-planning-grid-input`	The background of cells that can be typed into.
`--bmx-planning-grid-max-height`	The tallest the grid grows before it scrolls.
`--bmx-planning-grid-total`	The background of totals and group rows.
`--bmx-planning-grid-unfavourable`	The colour of bad-news differences.

`<bmx-popover>`

Properties

Property	Attribute	Type	Default	Description
`closeLabel`	`close-label`	`string`	`'Close'`	The close button's accessible name.
`closeOnFocusLeave`	`close-on-focus-leave`	`boolean`	`true`	Whether it closes when focus leaves it. On, and it is what makes a non-modal panel behave: one that stays open behind the user's focus is a panel covering whatever they Tab to next. Turn it off for a panel that deliberately outlives the interaction - a pinned inspector - and give the user another way out.
`disabled`	`disabled`	`boolean`	`false`	Nothing opens it.
`distance`	`distance`	`number`	`8`	Gap between the trigger and the panel, in pixels.
`for`	`for`	`string \| HTMLElement`	—	What opens it: a selector, or the element itself. Left off, it is the element immediately before this one. The trigger's `aria-haspopup`, `aria-expanded` and `aria-controls` are wired for you, and a press toggles the panel - so the whole widget is one attribute and no script, exactly as `bmx-menu`'s `trigger` is.
`label`	`label`	`string`	—	The panel's accessible name. A dialog without one is announced as "dialog" and nothing else. When there is a `header` slot its text is used instead, which is usually what an author meant.
`open`	`open`	`boolean`	`false`	Whether it is open.
`placement`	`placement`	`BmxPlacement`	`'bottom-start'`	Where it prefers to sit. It flips when there is no room.
`returnFocus`	`return-focus`	`boolean`	`true`	Whether closing returns focus to the trigger.

Events

Event	Detail	Description
`bmxToggle`	`BmxPopoverToggleDetail`	Fired when it opens or closes, saying which and why.

Methods

Method	Signature	Description
`closePopover`	`closePopover() => Promise<void>`	Close it.
`openPopover`	`openPopover() => Promise<void>`	Open it. Named for the component, not for the platform's `showPopover`.

Slots

Slot	Description
`(default)`	The panel's content.
`footer`	Actions along the bottom.
`header`	A heading. Names the dialog when `label` is not given.

CSS shadow parts

Part	Description
`arrow`	The pointer drawn against the trigger.
`close`	The close button.
`content`	The body.
`footer`	The actions row.
`header`	The heading row.
`surface`	The floating panel.

CSS custom properties

Property	Description
`--bmx-popover-arrow-size`	The pointer's size. Set it to 0 for no pointer at all.
`--bmx-popover-background`	The panel's background.
`--bmx-popover-border-color`	Its border.
`--bmx-popover-color`	Its text colour.
`--bmx-popover-gap`	Space between the header, the body and the footer.
`--bmx-popover-inline-size`	How wide the panel is.
`--bmx-popover-max-block-size`	How tall it may grow before the body scrolls.
`--bmx-popover-padding`	Space inside the body.
`--bmx-popover-radius`	Its corner radius.
`--bmx-popover-shadow`	The shadow under it.

`<bmx-process-explorer>`

Properties

Property	Attribute	Type	Default	Description
`activityCoverage`	`activity-coverage`	`number`	`100`	The share of all events the activities kept cover, 1-100 (the busiest first). Mutable.
`allowOpen`	`allow-open`	`boolean`	`true`	Offer the "Open a log" button.
`columns`	`columns`	`BmxProcessColumns \| string`	—	Which columns hold the case, activity, time, end and resource (found from the header when not given). Object or JSON.
`direction`	`direction`	`BmxProcessDirection`	`'down'`	Which way the map flows. Mutable.
`fileName`	`file-name`	`string`	`'process'`	The name downloads are given (without the extension).
`filters`	`filters`	`BmxProcessFilters \| string`	`{}`	The filters applied (object or JSON). Mutable.
`label`	`label`	`string`	—	The element's accessible name. Default: "Process explorer".
`log`	`log`	`readonly Record<string, unknown>[] \| string`	`''`	The event log: an array of records, or CSV, XES or JSON text.
`metric`	`metric`	`BmxProcessMetric`	`'frequency'`	What the map shows: how often (`frequency`) or how long (`duration`). Mutable.
`pathCoverage`	`path-coverage`	`number`	`100`	The share of the path traffic drawn, 1-100 (the busiest first). Mutable.
`reference`	`reference`	`BmxProcessReference \| readonly string[] \| string`	—	The way cases are meant to go, to check them against: `A → B → C`, an array, or `{ path, optional }` (object or JSON).
`strings`	`strings`	`Partial<BmxProcessExplorerStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`view`	`view`	`BmxProcessView`	`'map'`	The view shown. Mutable.

Events

Event	Detail	Description
`bmxFilterChange`	`BmxProcessFilterDetail`	Fired when the filters change.
`bmxLoad`	`BmxProcessLoadDetail`	Fired when a log has been read.
`bmxSelect`	`BmxProcessSelectDetail`	Fired when an activity, path, variant or case is chosen.

Methods

Method	Signature	Description
`clearFilters`	`clearFilters() => Promise<void>`	Removes every filter.
`download`	`download(format?: BmxProcessExportFormat, fileName?: string) => Promise<void>`	Saves an export as a file.
`exportCsv`	`exportCsv(kind?: "cases" \| "variants") => Promise<string>`	The cases (with conformance, when there is a reference) or the variants, as CSV.
`exportSvg`	`exportSvg() => Promise<string>`	The map as a stand-alone SVG document.
`fit`	`fit() => Promise<void>`	Fits the map to the view.
`getCases`	`getCases() => Promise<BmxProcessCase[]>`	The cases the filters leave.
`getConformance`	`getConformance() => Promise<BmxConformanceSummary \| undefined>`	The conformance of the cases the filters leave (needs `reference`).
`getMap`	`getMap() => Promise<BmxProcessMap>`	The map (activities and paths) as drawn.
`getSummary`	`getSummary() => Promise<BmxProcessSummary>`	The figures for the cases the filters leave.
`getVariants`	`getVariants() => Promise<BmxProcessVariant[]>`	The variants of the cases the filters leave, most frequent first.
`pause`	`pause() => Promise<void>`	Pauses the replay.
`play`	`play() => Promise<void>`	Starts the replay (from the start when it has finished).
`seek`	`seek(time: number) => Promise<void>`	Moves the replay to a moment (milliseconds).
`selectActivity`	`selectActivity(name: string) => Promise<void>`	Chooses an activity on the map and shows its figures.
`setFilters`	`setFilters(filters: BmxProcessFilters) => Promise<void>`	Replaces the filters.

CSS shadow parts

Part	Description
`details`	The details panel beside the map.
`edge`	A path on the map.
`node`	An activity on the map; also `node-selected`.
`stats`	The figures across the top.
`table`	A table (variants, cases, statistics).
`tabs`	The row of views.
`viewport`	The area the map is drawn in.

CSS custom properties

Property	Description
`--bmx-process-explorer-background`	The map's background.
`--bmx-process-explorer-details-width`	The details panel's width.
`--bmx-process-explorer-height`	The map's height.
`--bmx-process-explorer-path`	The colour of paths.
`--bmx-process-explorer-radius`	Corner radius of the element.
`--bmx-process-explorer-token`	The colour of replay tokens.

`<bmx-progress>`

Properties

Property	Attribute	Type	Default	Description
`announceEvery`	`announce-every`	`number`	`20`	How often to announce progress, in per cent. `0` never announces. Twenty is five utterances for a whole operation: enough to know it is moving, few enough to ignore. Lower it for something slow and important; set it to 0 when the same progress is already being reported somewhere else on the page, because two live regions describing one operation is worse than either alone.
`buffer`	`buffer`	`number`	—	A second, fainter value on the same track. For the two-speed cases: how much of a video has buffered against how much has played, how much of an upload has been accepted against how much has been sent. It is drawn and never announced - a screen-reader user being read two numbers for one operation learns less, not more.
`label`	`label`	`string`	—	The accessible name. Say what is progressing, not that something is.
`max`	`max`	`number`	`100`	The top of the range.
`min`	`min`	`number`	`0`	The bottom of the range.
`shape`	`shape`	`BmxProgressShape`	`'bar'`	A bar or a ring.
`showValue`	`show-value`	`boolean`	`false`	Whether to draw the value beside the bar, or inside the ring.
`size`	`size`	`BmxSize`	`'md'`	The size step.
`thickness`	`thickness`	`number`	`4`	The ring's stroke, in units of its 48-unit viewBox. A property rather than a custom property, and the one place this library bends its own rule that looks belong in CSS. The arc is drawn as a dash pattern round a circle, and both the circle's radius and the length of that dash are computed from this number - so a thickness the component could not read would be a ring whose arc ended in the wrong place, or one clipped by its own viewBox on all four sides. `getComputedStyle` cannot hand back an unregistered custom property resolved - it returns the declared text, `var()` and all - so reading it is not an option either. The ring's size is CSS, where it belongs: `--bmx-progress-ring-size`, and the viewBox scales to it.
`tone`	`tone`	`BmxTone`	`'primary'`	The semantic colour.
`value`	`value`	`number`	—	How far through it is. Leave it off for an indeterminate indicator. That is a state rather than a gap: plenty of work has no measurable end, and saying so is better than inventing a number that creeps to 90% and stops.
`valueText`	`value-text`	`string`	—	What to say instead of the percentage. "3 of 10 files" is a better thing to hear than "30%", and it is what `aria-valuetext` is for. It replaces the announcement and the drawn value both, so the two cannot disagree.

CSS shadow parts

Part	Description
`buffer`	The secondary fill, when there is a `buffer`.
`fill`	The filled part.
`ring`	The `<svg>`, in ring shape.
`ring-fill`	The arc itself.
`ring-track`	The circle behind the arc.
`track`	The groove the fill runs in, and the element carrying the role.
`value`	The percentage, when `show-value` is set.

CSS custom properties

Property	Description
`--bmx-progress-buffer`	The second, fainter fill.
`--bmx-progress-duration`	One cycle of the indeterminate animation.
`--bmx-progress-fill`	The filled part. Follows the tone by default.
`--bmx-progress-radius`	The bar's end caps. Half the thickness is a pill; 0 is square.
`--bmx-progress-ring-size`	How large the ring is drawn. Its viewBox scales to whatever this says.
`--bmx-progress-track`	The groove behind it.
`--bmx-progress-track-size`	How thick the bar is. The size step sets it; this overrides that.
`--bmx-progress-value-color`	The percentage's text colour.
`--bmx-progress-value-size`	The percentage's text size.

`<bmx-property-grid>`

Properties

Property	Attribute	Type	Default	Description
`hideDescription`	`hide-description`	`boolean`	`false`	Leave out the description pane.
`hideToolbar`	`hide-toolbar`	`boolean`	`false`	Leave out the toolbar.
`label`	`label`	`string`	—	The grid's accessible name. Default: "Properties".
`object`	property only	`unknown`	—	The object to edit. Ignored when `objects` is set.
`objects`	property only	`unknown[]`	—	Several objects to edit together.
`readonly`	`readonly`	`boolean`	`false`	No editing.
`schema`	`schema`	`BmxPropertyDescriptor[] \| string`	`[]`	The properties, as descriptors or JSON. Read from the object when empty.
`showAdvanced`	`show-advanced`	`boolean`	`false`	Show properties marked `advanced`.
`strings`	`strings`	`Partial<BmxPropertyGridStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`view`	`view`	`'categorized' \| 'alphabetical'`	`'categorized'`	Grouped by category, or one list A to Z. Mutable: the toolbar switches it.

Events

Event	Detail	Description
`bmxPropertyChange`	`BmxPropertyChangeDetail`	Fired before a value changes. Cancel it to refuse the change.
`bmxPropertyChanged`	`BmxPropertyChangeDetail`	Fired after a value has changed in the objects (edits, reset, undo, redo).
`bmxPropertyFocus`	`BmxPropertyFocusDetail`	Fired when another property is focused.

Methods

Method	Signature	Description
`collapseAll`	`collapseAll() => Promise<void>`	Closes every category, object and array.
`expandAll`	`expandAll() => Promise<void>`	Opens every category, object and array.
`focusProperty`	`focusProperty(path: string) => Promise<boolean>`	Focuses a property's row by dotted path, opening what holds it. Resolves whether it was found.
`getValue`	`getValue(path: string) => Promise<unknown>`	The value at a dotted path; undefined when the objects disagree.
`redo`	`redo() => Promise<boolean>`	Redoes the last undone change. Resolves whether there was one.
`refresh`	`refresh() => Promise<void>`	Re-reads the objects, after they were changed elsewhere.
`setValue`	`setValue(path: string, value: unknown) => Promise<boolean>`	Sets a value at a dotted path, through the checks and events. Resolves whether it was taken.
`undo`	`undo() => Promise<boolean>`	Undoes the last change. Resolves whether there was one.
`validate`	`validate() => Promise<BmxPropertyProblem[]>`	Every value that breaks its descriptor.

CSS shadow parts

Part	Description
`category`	A category row.
`description`	The pane under the grid.
`editor`	The editor in a value cell.
`grid`	The rows.
`name`	A property's name.
`row`	A property row.
`toolbar`	The view switch and search.
`value`	A property's value cell.

CSS custom properties

Property	Description
`--bmx-property-grid-category`	The background of a category row.
`--bmx-property-grid-height`	The grid's height; the rows scroll inside it.
`--bmx-property-grid-indent`	How far each nested level is indented.
`--bmx-property-grid-name-width`	The width of the name column.
`--bmx-property-grid-row-height`	The least height of a row.

`<bmx-qr-code>`

Properties

Property	Attribute	Type	Default	Description
`errorCorrection`	`error-correction`	`BmxQrErrorCorrection`	`'M'`	How much damage the code survives: `L` (7%), `M` (15%), `Q` (25%) or `H` (30%). Raised to `H` when there is a logo.
`fileName`	`file-name`	`string`	`'qr-code'`	The file name `download` offers.
`label`	`label`	`string`	—	The accessible name. Default: "QR code: " and the value.
`logo`	`logo`	`string`	—	A picture for the middle of the code. From another site, it must allow cross-origin use for `toPng` to include it.
`logoSize`	`logo-size`	`number`	`0.22`	How wide the logo is, as a fraction of the code (0.1 to 0.3).
`margin`	`margin`	`number`	`4`	The quiet zone around the code, in modules. Scanners want 4; less only on a plain light ground.
`moduleStyle`	`module-style`	`BmxQrModuleStyle`	`'square'`	`square`, `rounded` or `dots`.
`showValue`	`show-value`	`boolean`	`false`	Print the value under the code.
`size`	`size`	`number`	`160`	The width and height, in CSS pixels, quiet zone included.
`value`	`value`	`string`	`''`	What the code holds: a link, or any text.

Events

Event	Detail	Description
`bmxQrCodeError`	`BmxQrCodeErrorDetail`	Fired when the value cannot be made into a QR code (it is too long).

Methods

Method	Signature	Description
`download`	`download(format?: BmxBarcodeFileFormat, name?: string) => Promise<void>`	Offers the code to the reader as a file.
`toPng`	`toPng(scale?: number) => Promise<Blob \| null>`	The code as a PNG at `scale` times its size on screen. Null when there is nothing drawn, or when a logo from another site does not allow it.
`toSvg`	`toSvg() => Promise<string \| null>`	The code as a standalone SVG document, in the colours it is shown in, logo included. Null when there is nothing drawn.

CSS shadow parts

Part	Description
`error`	Why the value could not be drawn.
`frame`	The box around the code.
`svg`	The drawn code.
`value`	The printed value, with `show-value`.

CSS custom properties

Property	Description
`--bmx-qr-code-background`	The ground and quiet zone. Default white in every theme.
`--bmx-qr-code-color`	The modules. Default black in every theme, because cameras read dark on light.
`--bmx-qr-code-radius`	The frame's corner radius.

`<bmx-query-builder>`

Properties

Property	Attribute	Type	Default	Description
`allowClone`	`allow-clone`	`boolean`	`true`	Offers a button to copy a rule or a group.
`allowDisable`	`allow-disable`	`boolean`	`true`	Offers a button to switch a rule or a group off without removing it.
`allowDrag`	`allow-drag`	`boolean`	`true`	Rules and groups can be moved by dragging and with the arrow keys.
`allowGroups`	`allow-groups`	`boolean`	`true`	Offers groups inside groups.
`allowNot`	`allow-not`	`boolean`	`true`	Offers NOT on groups.
`combinators`	`combinators`	`string`	`'and or'`	The joins offered: `and or` (default), `and` or `or`.
`disabled`	`disabled`	`boolean`	`false`	Turns every control off.
`fields`	`fields`	`BmxQueryField[] \| string`	`[]`	The fields rules can test: `[{ name, label, type, options }]`, as a property or JSON.
`ignoreCase`	`ignore-case`	`boolean`	`true`	Text compares without case, in every conversion.
`label`	`label`	`string`	—	The builder's accessible name.
`locale`	`locale`	`string`	—	The language numbers and dates are written in. The reader's, by default.
`maxDepth`	`max-depth`	`number`	`5`	The most levels of groups, the outer one included.
`name`	`name`	`string`	—	With a name, the query goes into an enclosing `<form>` as JSON under it.
`operators`	property only	`BmxQueryOperator[]`	—	Operators of the page's own, or conversions for built-in ones. A property.
`preview`	`preview`	`string`	`''`	Outputs to show under the builder, in tabs: `sql mongo odata jsonlogic json text`. None, by default.
`readonly`	`readonly`	`boolean`	`false`	Shows the query as sentences rather than as controls.
`required`	`required`	`boolean`	`false`	An enclosing form will not send without at least one finished rule.
`searchThreshold`	`search-threshold`	`number`	`12`	With more fields or choices than this, the pickers can be typed into to search.
`sqlDialect`	`sql-dialect`	`BmxQuerySqlDialect`	`'ansi'`	The SQL the preview shows and `toSql` writes by default.
`strings`	`strings`	`Partial<BmxQueryBuilderStrings> \| string`	—	Replacements for the builder's wording, as a property or JSON.
`validateOn`	`validate-on`	`'blur' \| 'change' \| 'submit'`	`'blur'`	When a rule shows its problem: once its value is left (`blur`), as it changes (`change`), or only on `validate()` and form sending (`submit`).
`value`	`value`	`BmxQueryGroup \| string \| null`	`null`	The query, as a property or JSON. Changes write back here, with ids. Queries from jQuery QueryBuilder and react-querybuilder are read too.

Events

Event	Detail	Description
`bmxQueryChange`	`BmxQueryChangeDetail`	The query changed.

Methods

Method	Signature	Description
`addGroupTo`	`addGroupTo(groupId?: string, group?: Partial<BmxQueryGroup>) => Promise<string>`	Adds a group to a group (the outer one by default) and gives its id.
`addRuleTo`	`addRuleTo(groupId?: string, rule?: Partial<BmxQueryRule>) => Promise<string>`	Adds a rule to a group (the outer one by default) and gives its id.
`clear`	`clear() => Promise<void>`	Removes every rule.
`getQuery`	`getQuery(keepIds?: boolean) => Promise<BmxQueryGroup>`	The query as JSON: with ids (default), or without.
`removeItem`	`removeItem(id: string) => Promise<void>`	Removes a rule or a group.
`setFocus`	`setFocus() => Promise<void>`	Puts focus on the first control.
`setQuery`	`setQuery(query: unknown) => Promise<void>`	Replaces the query. Queries from jQuery QueryBuilder and react-querybuilder are read too.
`toJsonLogic`	`toJsonLogic(options?: BmxQueryConvertOptions) => Promise<unknown>`	The query as JsonLogic.
`toMongo`	`toMongo(options?: BmxQueryMongoOptions) => Promise<Record<string, unknown>>`	The query as a MongoDB filter.
`toOData`	`toOData(options?: BmxQueryODataOptions) => Promise<string>`	The query as an OData `$filter` expression.
`toPredicate`	`toPredicate(options?: BmxQueryConvertOptions) => Promise<(record: unknown) => boolean>`	A function that says whether a record matches: `rows.filter(await qb.toPredicate())`.
`toSql`	`toSql(options?: BmxQuerySqlOptions) => Promise<BmxQuerySql>`	The query as a parameterised SQL condition, in `sql-dialect` unless the options say otherwise.
`toText`	`toText(options?: BmxQueryTextOptions) => Promise<string>`	The query as a sentence.
`validate`	`validate() => Promise<BmxQueryError[]>`	Every problem, shown on the rules. An empty list when the query is valid.

CSS shadow parts

Part	Description
`builder`	the outer box.
`code`	the output itself.
`error`
`group`	a group of rules.
`group-header`	a group's join, NOT and buttons.
`handle`	the grip a rule or group is moved by.
`items`	the list of a group's rules and groups.
`preview`	the output panel.
`rule`	a rule's row.

CSS custom properties

Property	Description
`--bmx-query-builder-accent`	The chosen join, the rail and the drop marker.
`--bmx-query-builder-background`	Behind the outer group.
`--bmx-query-builder-border`	Lines around groups and the preview.
`--bmx-query-builder-code-background`	Behind the preview's output.
`--bmx-query-builder-group-background`	Behind a group inside another.
`--bmx-query-builder-not-color`	A group's NOT when it is on.
`--bmx-query-builder-or-accent`	The rail and join of an OR group.
`--bmx-query-builder-radius`	Corners of groups and rules.
`--bmx-query-builder-rule-background`	Behind a rule's row.

`<bmx-radio>`

Properties

Property	Attribute	Type	Default	Description
`checked`	`checked`	`boolean`	`false`	Whether this is the chosen option. Written by the group. Setting it by hand selects the option visually without telling the group, which is how two options end up looking chosen - set the group's `value` instead.
`disabled`	`disabled`	`boolean`	`false`	Disable this option. The group skips it when arrowing.
`label`	`label`	`string`	—	The option's caption. Use the default slot for rich content.
`rovingTabindex`	`roving-tabindex`	`number`	`-1`	This option's place in the group's single tab stop. Set by the group and not normally set by hand. Unlike `bmx-button`'s property of the same name, the focusable element here is the host, so this is rendered straight onto it - but the name is the same because the job is: a composite widget that cannot take its children out of the tab order cannot implement the WAI-ARIA keyboard pattern at all.
`size`	`size`	`BmxSize`	`'md'`	Size step. The group sets it on every option that has not set its own.
`tone`	`tone`	`BmxTone`	`'primary'`	Semantic colour role. The group sets it on every option that has not set its own.
`value`	`value`	`string`	—	The value this option contributes when it is chosen. Required in practice: it is what the group writes into its own `value` and what the form receives. An option without one falls back to its position, which works and is not what anybody wants in a submitted payload.

Methods

Method	Signature	Description
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focus the option. Called by the group when the arrow keys move.

Slots

Slot	Description
`(default)`	The option's caption, in place of the `label` property.

CSS shadow parts

Part	Description
`base`	The row holding the dot and the caption.
`box`	The wrapper around the drawn dot.
`label`	The caption.
`mark`	The drawn circle and dot.

CSS custom properties

Property	Description
`--bmx-radio-accent`	The colour of the selected ring and dot. Defaults to the tone's solid colour.
`--bmx-radio-background`	The circle's background when unselected.
`--bmx-radio-border-color`	The circle's border colour when unselected.
`--bmx-radio-border-width`	Border width of the circle when unselected.
`--bmx-radio-duration`	How long the dot takes to appear. Zero under reduced motion.
`--bmx-radio-font-size`	The caption's font size.
`--bmx-radio-gap`	Space between the circle and its caption.
`--bmx-radio-size`	The drawn circle's diameter. The clickable target stays at least 24px regardless.

`<bmx-radio-group>`

Properties

Property	Attribute	Type	Default	Description
`description`	`description`	`string`	—	Help text below the options.
`disabled`	`disabled`	`boolean`	`false`	Disable every option in the group. Options may still be disabled individually.
`errorText`	`error-text`	`string`	—	An error supplied by the consumer - a server response, typically.
`fullWidth`	`full-width`	`boolean`	`false`	Stretch to the width of the container.
`hideLabel`	`hide-label`	`boolean`	`false`	Hide the caption visually while keeping it as the accessible name.
`label`	`label`	`string`	—	The group's caption - the question the options answer. Not optional in practice: a radiogroup announced with no name tells a screen reader user only that some options have been grouped, and the options themselves rarely make sense without the question.
`messages`	property only	`BmxFieldMessages`	—	Replacements for the default wording, by reason. Accepts the JSON spelling of the object as well, for templates that can only write attributes. See `src/core/markup.ts`.
`name`	`name`	`string`	—	The field's name in the form it belongs to.
`orientation`	`orientation`	`BmxOrientation`	`'vertical'`	Layout direction. Both axes move the selection either way; this is visual.
`required`	`required`	`boolean`	`false`	Require an answer before the form will submit.
`size`	`size`	`BmxSize`	`'md'`	Applied to every option that has not set its own.
`tone`	`tone`	`BmxTone`	`'primary'`	Applied to every option that has not set its own.
`validateOn`	`validate-on`	`BmxValidateOn`	`'blur'`	When the group is willing to reveal a problem.
`value`	`value`	`string \| null`	`null`	The chosen option's value. Two-way: the group writes back to it.
`wrapFocus`	`wrap-focus`	`boolean`	`true`	Whether arrowing past the last option returns to the first.

Events

Event	Detail	Description
`bmxChange`	`BmxRadioGroupChangeDetail`	Fired when the chosen option changes.
`bmxValidityChange`	`BmxRadioGroupValidityDetail`	Fired whenever the resolved validity changes.

Methods

Method	Signature	Description
`checkValidity`	`checkValidity() => Promise<boolean>`	Validate now and return whether the group passed, without revealing anything.
`refresh`	`refresh() => Promise<void>`	Re-read the options. Call after adding or removing them imperatively.
`reportValidity`	`reportValidity() => Promise<boolean>`	Validate, reveal any problem, and focus the group if it has one.
`setFocus`	`setFocus() => Promise<void>`	Move focus to the group - onto the chosen option, or the first available one.

Slots

Slot	Description
`(default)`	`bmx-radio` elements.
`description`	Rich help text, in place of the `description` property.
`label`	Rich caption content, in place of the `label` property.

CSS shadow parts

Part	Description
`base`	The element carrying `role="radiogroup"`.
`description`	The help text.
`error`	The error message.
`label`	The group's caption.

CSS custom properties

Property	Description
`--bmx-radio-group-gap`	Space between the options.
`--bmx-radio-group-label-font-size`	The question's font size.
`--bmx-radio-group-stack-gap`	Space between the question, the options and the supporting text.
`--bmx-radio-group-support-font-size`	Font size of the description and error message.

`<bmx-rating>`

Properties

Property	Attribute	Type	Default	Description
`allowHalf`	`allow-half`	`boolean`	`false`	Let the user pick halves. Doubles the answers, not the icons.
`autoFocus`	`auto-focus`	`boolean`	`false`	Focus the field once it has rendered.
`clearable`	`clearable`	`boolean`	`false`	Let the user take the rating back off. Off by default: a rating is usually being asked for rather than offered. With it on, clicking the current value again clears it, and so does arrowing back off the lowest star - which is the only way to undo a rating from the keyboard, since there is no "none of these" to arrow onto.
`description`	`description`	`string`	—	Help text below the field.
`disabled`	`disabled`	`boolean`	`false`	Disable the field.
`emptyText`	`empty-text`	`string`	`'No rating'`	What an unrated field is announced as.
`errorText`	`error-text`	`string`	—	An error supplied by the consumer - a server response, typically.
`format`	property only	`BmxRatingFormatter`	—	Your own wording for the announcement and the caption. One function for both, so a rating cannot end up showing "Good" and announcing "4".
`hideLabel`	`hide-label`	`boolean`	`false`	Hide the label visually while keeping it for assistive technology.
`icon`	`icon`	`BmxRatingIcon`	`'star'`	Which glyph.
`iconPath`	`icon-path`	`string`	—	Your own glyph, as a path in a 24x24 box. Overrides `icon`.
`label`	`label`	`string`	—	The field's label. Required unless the `label` slot is used.
`max`	`max`	`number`	`5`	How many icons.
`messages`	property only	`BmxFieldMessages`	—	Replacements for the default wording, by reason. Accepts the JSON spelling of the object as well, for templates that can only write attributes. See `src/core/markup.ts`.
`name`	`name`	`string`	—	The field's name in the form it belongs to.
`readonly`	`readonly`	`boolean`	`false`	Show the rating without letting it be changed. Renders as an image.
`required`	`required`	`boolean`	`false`	Require a rating.
`showValue`	`show-value`	`boolean`	`false`	Show the value beside the icons.
`size`	`size`	`BmxSize`	`'md'`	Size step.
`tone`	`tone`	`BmxTone`	`'warning'`	Semantic colour role. `warning` by default, alone in this library, because that is the amber a five-star rating is drawn in everywhere. A rating in the primary blue is not a rating anybody recognises, and defaulting to consistency here would cost more than it bought.
`unit`	`unit`	`string`	`'star'`	The noun in the announcement. Pluralised by adding an `s`.
`validateOn`	`validate-on`	`BmxValidateOn`	`'blur'`	When the field is willing to reveal a problem.
`value`	`value`	`number`	`0`	The rating. Zero means no rating, which is not the same as one star.

Events

Event	Detail	Description
`bmxChange`	`BmxRatingChangeDetail`	Fired when the value is committed.
`bmxInput`	`BmxRatingChangeDetail`	Fired as the value changes during a drag.
`bmxValidityChange`	`BmxRatingValidityDetail`	Fired whenever the resolved validity changes.

Methods

Method	Signature	Description
`checkValidity`	`checkValidity() => Promise<boolean>`	Validate now and return whether the field passed, without revealing it.
`clear`	`clear() => Promise<void>`	Take the rating off, whatever `clearable` says.
`removeFocus`	`removeFocus() => Promise<void>`	Remove focus from the field.
`reportValidity`	`reportValidity() => Promise<boolean>`	Validate, reveal any problem, and focus the field if it has one.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focus the field.

Slots

Slot	Description
`description`	Rich help text, in place of the `description` property.
`label`	Rich label content, in place of the `label` property.

CSS shadow parts

Part	Description
`description`	The help text.
`error`	The error message.
`field`	The row of icons.
`icon`	One icon.
`label`	The label element.
`value`	The value caption, when `showValue` is on.

CSS custom properties

Property	Description
`--bmx-rating-color`	The filled colour. Follows `tone` unless overridden.
`--bmx-rating-empty-color`	The unfilled colour.
`--bmx-rating-gap`	Space between icons.
`--bmx-rating-hover-color`	The filled colour while the pointer is over the row.
`--bmx-rating-label-font-size`	The label's font size.
`--bmx-rating-size`	The height and width of one icon.
`--bmx-rating-stack-gap`	Space between the label, the row and the supporting text.
`--bmx-rating-support-font-size`	Font size of the description, error and value caption.

`<bmx-reconciliation>`

Properties

Property	Attribute	Type	Default	Description
`allowSelfApproval`	`allow-self-approval`	`boolean`	`false`	Let the preparer approve their own reconciliation.
`confirmThreshold`	`confirm-threshold`	`number`	`0.9`	The confidence (0 to 1) the "confirm all at" button uses.
`data`	`data`	`Partial<BmxReconData> \| string`	—	The two sides, matches, rules, sign-off and audit trail (an object, or its JSON). Kept up to date.
`dateOrder`	`date-order`	`'dmy' \| 'mdy' \| 'ymd'`	`'dmy'`	How dates in imported CSV are written when not YYYY-MM-DD.
`fileName`	`file-name`	`string`	`'reconciliation'`	The name exported files are saved under, without the extension.
`label`	`label`	`string`	—	The element's accessible name, and its heading.
`locale`	`locale`	`string`	—	The language for numbers and dates (the page's when unset).
`pageSize`	`page-size`	`number`	`100`	Rows shown at first in each list; more on request.
`readonly`	`readonly`	`boolean`	`false`	Look but do not change.
`strings`	`strings`	`Partial<BmxReconciliationStrings> \| string`	—	Replacements for any of the wording (an object, or its JSON).
`tab`	`tab`	`BmxReconTab`	`'work'`	The view shown.
`user`	`user`	`string`	—	Who is working, for the audit trail and sign-off.

Events

Event	Detail	Description
`bmxChange`	`BmxReconChangeDetail`	Fired when anything changes: a run, a match, a confirmation, an import, sign-off, rules, undo.
`bmxSelectionChange`	`BmxReconSelectionDetail`	Fired when the items chosen change.

Methods

Method	Signature	Description
`approve`	`approve(note?: string) => Promise<string \| null>`	Approves a submitted reconciliation. Resolves with why it was refused, or null.
`confirmMatches`	`confirmMatches(which: string[] \| { minConfidence: number; }) => Promise<number>`	Confirms proposed matches: those named, or every one at or above a confidence.
`download`	`download(kind?: "matches" \| "unmatched" \| "adjustments" \| "json") => Promise<void>`	Saves an export as a file.
`exportCsv`	`exportCsv(kind?: "matches" \| "proposed" \| "unmatched" \| "adjustments") => Promise<string>`	Matches, open items or adjustments as CSV.
`getData`	`getData() => Promise<BmxReconData>`	The reconciliation as it is now.
`getSelected`	`getSelected() => Promise<BmxReconSelectionDetail>`	The items chosen and their difference.
`getSummary`	`getSummary() => Promise<BmxReconSummary>`	The figures.
`importCsv`	`importCsv(side: BmxReconSide, text: string, options?: { dateOrder?: "dmy" \| "mdy" \| "ymd"; }) => Promise<BmxReconImportResult>`	Adds items to a side from a CSV export.
`matchItems`	`matchItems(left: string[], right: string[], adjustment?: BmxReconAdjustment, note?: string) => Promise<BmxReconRefusal \| null>`	Matches items by hand. Resolves with why it was refused, or null.
`redo`	`redo() => Promise<void>`	Puts back what `undo` took.
`reopen`	`reopen(note?: string) => Promise<string \| null>`	Sends a submitted reconciliation back, or reopens an approved one.
`runRules`	`runRules(ruleIds?: string[]) => Promise<{ proposed: number; confirmed: number; }>`	Runs the matching rules (all enabled ones, or those named).
`setData`	`setData(data: Partial<BmxReconData> \| string) => Promise<void>`	Replaces the reconciliation. Undo goes back to what was there.
`setSelection`	`setSelection(left: string[], right: string[]) => Promise<void>`	Chooses items, as if ticked.
`submitForApproval`	`submitForApproval() => Promise<string \| null>`	Sends the reconciliation for approval. Resolves with why it was refused, or null.
`suggest`	`suggest(side: BmxReconSide, itemId: string, limit?: number) => Promise<BmxReconSuggestion[]>`	What an item might go with on the other side.
`undo`	`undo() => Promise<void>`	Takes back the last change.
`unmatch`	`unmatch(matchId: string) => Promise<void>`	Rejects a proposed match, or undoes a confirmed one.

CSS shadow parts

Part	Description
`header`	The title, status, figures and actions.
`list`	Each side's table of items.
`review`	The matches waiting for review.
`selection`	The bar for the items chosen.
`tabs`	The tab list.

CSS custom properties

Property	Description
`--bmx-reconciliation-list-height`	The most a side's table, or a list of matches, grows before it scrolls.
`--bmx-reconciliation-negative`	The colour of amounts below zero.
`--bmx-reconciliation-radius`	Corner radius of the frame.

`<bmx-recurrence-editor>`

Properties

Property	Attribute	Type	Default	Description
`allowSkip`	`allow-skip`	`boolean`	`true`	Let the reader skip occurrences from the list.
`cronDialect`	`cron-dialect`	`BmxCronDialect`	`'unix'`	The cron dialect written and read: Unix (five fields) or Quartz (seven, with `L`, `#` and `W`).
`describe`	property only	`BmxRecurrenceDescribe`	—	Replaces the summary in words.
`description`	`description`	`string`	—	Help text below the control.
`disabled`	`disabled`	`boolean`	`false`	Disable the control.
`errorText`	`error-text`	`string`	—	An error supplied by the page.
`exceptions`	`exceptions`	`string[] \| string`	`[]`	Dates skipped (`EXDATE`), `YYYY-MM-DD`, as an array, JSON or a comma list. Two-way.
`formValue`	`form-value`	`'value' \| 'icalendar'`	`'value'`	What the form receives under `name`: the value, or the whole series as iCalendar lines.
`frequencies`	`frequencies`	`BmxRecurrenceRepeat[] \| string`	—	The choices offered for Repeat, as an array, JSON or a comma list of `none`, `daily`, `weekly`, `monthly`, `yearly`.
`hideLabel`	`hide-label`	`boolean`	`false`	Hide the label visually while keeping it as the accessible name.
`label`	`label`	`string`	—	The field's label: names the whole control.
`locale`	`locale`	`string`	—	The language for day and month names and dates. Default: the page's.
`name`	`name`	`string`	—	The field's name in a form.
`preview`	`preview`	`number`	`5`	How many next occurrences to list; 0 hides the list.
`readonly`	`readonly`	`boolean`	`false`	Show the rule without letting it change.
`required`	`required`	`boolean`	`false`	It must repeat: "does not repeat" is not a valid answer.
`showEnd`	`show-end`	`boolean`	`true`	Show the end choices.
`showRule`	`show-rule`	`boolean`	`false`	Show the iCalendar rule and cron text, with copying and editing as text.
`showStart`	`show-start`	`boolean`	`true`	Show the start date and time.
`start`	`start`	`string`	—	The first occurrence, as wall-clock time in `time-zone`: `2026-10-12T09:00`, or a date alone (09:00). Default: today at 09:00. Two-way.
`strings`	`strings`	`Partial<BmxRecurrenceEditorStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`timeZone`	`time-zone`	`string`	—	The series' IANA time zone, such as `Europe/London`. Default: the reader's own.
`value`	`value`	`string`	`''`	The rule: iCalendar text such as `FREQ=WEEKLY;BYDAY=MO` (with or without `RRULE:`), or a cron expression when `value-format="cron"`. '' does not repeat. Two-way.
`valueFormat`	`value-format`	`'rrule' \| 'cron'`	`'rrule'`	What `value` holds: an iCalendar rule, or a cron expression.
`weekStart`	`week-start`	`number`	—	The first day of the week, 0 for Sunday. Default: the locale's.

Events

Event	Detail	Description
`bmxChange`	`BmxRecurrenceDetail`	Fired after the reader changes the rule, the start or the skipped dates.

Methods

Method	Signature	Description
`getOccurrences`	`getOccurrences(count?: number, from?: string \| number) => Promise<BmxRecurrenceOccurrenceDetail[]>`	The next occurrences from `from` (an ISO instant or milliseconds; default now), skipped ones included and marked.
`getRule`	`getRule() => Promise<BmxRecurrenceDetail>`	The rule in every form: value, iCalendar rule, cron, words, start, zone, skipped dates and iCalendar lines.
`setFocus`	`setFocus() => Promise<void>`	Moves focus to the Repeat choice.
`toICalendar`	`toICalendar() => Promise<string>`	`DTSTART`, `RRULE` and `EXDATE` lines, joined with CRLF, for an iCalendar `VEVENT`.

Slots

Slot	Description
`description`	Rich help text, in place of the `description` property.
`label`	Rich label content, in place of the `label` property.

CSS shadow parts

Part	Description
`day`	A day-of-the-week button; also `day-pressed`.
`description`	The help text under the field.
`label`	The label element.
`occurrence`	One of them; also `occurrence-skipped`.
`output`	The rule and cron text.
`panel`	The box holding the choices.
`preview`	The list of next occurrences.
`row`	One row of choices.
`summary`	The rule in words.

CSS custom properties

Property	Description
`--bmx-recurrence-editor-background`	The panel's background.
`--bmx-recurrence-editor-day-size`	Size of a day-of-the-week button.
`--bmx-recurrence-editor-label-font-size`	The label's font size.
`--bmx-recurrence-editor-label-width`	Width of the row labels (Repeat, Starts, Ends).
`--bmx-recurrence-editor-radius`	Corner radius of the panel.
`--bmx-recurrence-editor-support-font-size`	Font size of the description and error message.

`<bmx-report-designer>`

Properties

Property	Attribute	Type	Default	Description
`data`	`data`	`readonly Record<string, unknown>[] \| string`	`[]`	Sample rows: an array of objects, or JSON text. They give the field list and the preview its data.
`dataUrl`	`data-url`	`string`	—	A URL to fetch the sample rows from, as a JSON array. Takes the place of `data`.
`fields`	`fields`	`readonly BmxReportFieldSpec[] \| string`	`[]`	The fields to offer, when there is no data to find them in: names, or `{ name, type }` with type `number`, `text`, `date` or `boolean`. JSON text works too.
`fileName`	`file-name`	`string`	—	The name the JSON is saved under. Defaults to the report's title.
`gallery`	`gallery`	`boolean`	`true`	Offers the template gallery, and opens it when there is no report.
`gridSize`	`grid-size`	`number`	`4`	The grid spacing in points. Items snap to it.
`label`	`label`	`string`	—	The designer's accessible name.
`locale`	`locale`	`string`	—	The locale for sample values and the preview. Defaults to the report's language.
`mode`	`mode`	`'design' \| 'preview' \| 'json'`	`'design'`	`design`, `preview` (the report run in a viewer) or `json` (the definition as text).
`report`	`report`	`BmxReport \| string \| null`	`null`	The report being designed: an object, or JSON text. The designer writes each edit back to it.
`requestInit`	property only	`RequestInit`	—	Options for the fetch - headers, credentials. Script only.
`showGrid`	`show-grid`	`boolean`	`true`	Draws the grid on the bands.
`snap`	`snap`	`boolean`	`true`	Items snap to the grid and to each other while they are dragged. Hold Alt to place freely.
`zoom`	`zoom`	`number \| string`	`'page-width'`	The design surface's scale: `page-width` fits the page to the surface; `1` is actual size, `1.5` is 150%.

Events

Event	Detail	Description
`bmxReportChange`	`BmxReportChangeDetail`	Every change to the report: an edit, undo or redo, a template, or JSON applied.
`bmxReportSave`	`BmxReportSaveDetail`	Save was pressed. Cancel it to store the report yourself; otherwise the JSON downloads.
`bmxSelectionChange`	`BmxReportSelectionDetail`	The selection changed.

Methods

Method	Signature	Description
`downloadJson`	`downloadJson(fileName?: string) => Promise<void>`	Saves the report as a JSON file.
`getJson`	`getJson() => Promise<string>`	The report as JSON text.
`getReport`	`getReport() => Promise<BmxReport>`	The report as it is now.
`newReport`	`newReport(template?: string, title?: string) => Promise<BmxReport>`	Replaces the report with one built from a template in the gallery: `blank`, `list`, `grouped`, `summary`, `letter`.
`redo`	`redo() => Promise<boolean>`	Redoes the last edit undone.
`select`	`select(ids: readonly string[]) => Promise<void>`	Selects items by id.
`undo`	`undo() => Promise<boolean>`	Undoes the last edit. Resolves to whether there was one.

Slots

Slot	Description
`toolbar-end`	extra controls at the end of the toolbar.

CSS shadow parts

Part	Description
`builder`
`button`
`card`
`completions`
`data-field`
`empty`
`field`
`field-error`
`gallery`
`insert-panel`
`json`
`main`
`mode`
`preview`
`problems`
`properties-panel`
`properties-title`
`status-bar`
`surface`
`template`
`tool`
`toolbar`
`zoom`

CSS custom properties

Property	Description
`--bmx-report-designer-desk`	The area around the page.
`--bmx-report-designer-guide`	The lines drawn while an item snaps. @part toolbar - the row of controls. @part mode - the Design, Preview and JSON buttons. @part button - a button. @part zoom - the zoom list. @part main - the panels and the design surface. @part insert-panel - the toolbox, field list and outline. @part tool - a toolbox entry. @part data-field - a field in the field list. @part surface - the scrolling design surface. @part empty - what the surface shows when the report has no bands. @part properties-panel - the properties of the selection. @part properties-title - its heading. @part field - a labelled property. @part field-error - an expression's error under its field. @part completions - the suggestion list under an expression field. @part card - a group, sort key, field, parameter or condition in the properties. @part status-bar - the problems count, selection and zoom at the foot. @part problems - the list of problems. @part preview - the report viewer in Preview. @part json - the JSON view. @part builder - the expression builder dialog. @part gallery - the template gallery dialog. @part template - a template in it.
`--bmx-report-designer-height`	How tall the designer is.
`--bmx-report-designer-insert-width`	How wide the insert panel is.
`--bmx-report-designer-properties-width`	How wide the properties panel is.
`--bmx-report-designer-selection`	The outline and handles of the selection.

`<bmx-report-viewer>`

Properties

Property	Attribute	Type	Default	Description
`data`	`data`	`readonly Record<string, unknown>[] \| string`	`[]`	The rows: an array of objects, or JSON text.
`dataUrl`	`data-url`	`string`	—	A URL to fetch the rows from, as a JSON array. Takes the place of `data`.
`drillData`	property only	`(report: string, parameters: Readonly<Record<string, unknown>>, signal: AbortSignal) => readonly unknown[] \| undefined \| null \| Promise<readonly unknown[] \| undefined \| null>`	—	Rows for a drill-through, when it needs other rows than the viewer's: called with the report's name and the parameters it opens with. Return the rows, or nothing to use the viewer's own. Script only.
`exports`	`exports`	`readonly BmxReportFormat[] \| string`	`['pdf', 'xlsx', 'csv', 'html']`	The exports the toolbar offers, in order: any of `pdf`, `xlsx`, `csv`, `html`. A space-separated list in markup.
`fileName`	`file-name`	`string`	—	The name the PDF is saved under. Defaults to the report's title.
`label`	`label`	`string`	—	The viewer's accessible name. Defaults to the report's title.
`locale`	`locale`	`string`	—	The locale for numbers and dates. Defaults to the report's language, then the page's.
`parameters`	`parameters`	`Record<string, unknown> \| string`	`{}`	Parameter values: an object, or JSON text. The reader can change them in the parameters panel.
`report`	`report`	`BmxReport \| string \| null`	`null`	The report definition: an object, or JSON text.
`reportUrl`	`report-url`	`string`	—	A URL to fetch the report definition from. Used when `report` is not set.
`reports`	property only	`Readonly<Record<string, BmxReport \| string \| BmxReportSource>>`	—	Reports a drill-through can open, by name: definitions, or URLs to fetch them from, or `{ report, data }` for a report with rows of its own. A name that is not here is fetched as a URL. Script only.
`requestInit`	property only	`RequestInit`	—	Options for both fetches - headers, credentials. Script only.
`sidebar`	`sidebar`	`'pages' \| 'contents' \| 'none'`	`'none'`	The side panel: `pages` (thumbnails), `contents`, or `none`.
`toolbar`	`toolbar`	`boolean`	`true`	Shows the toolbar.
`zoom`	`zoom`	`string \| number`	`'page-width'`	`page-width`, `whole-page`, or a scale: `1` is actual size, `1.5` is 150%.

Events

Event	Detail	Description
`bmxPageChange`	`BmxReportPageDetail`	The page in view changed.
`bmxParametersChange`	`BmxReportParametersDetail`	The reader applied new parameter values.
`bmxReportDrill`	`BmxReportDrillDetail`	The reader opened a drill-through. Cancel it to open the report yourself.
`bmxReportRender`	`BmxReportRenderDetail`	The report has been laid out, or could not run for want of parameters.
`bmxReportSort`	`BmxReportSortDetail`	The reader sorted the report by clicking a column heading.

Methods

Method	Signature	Description
`back`	`back() => Promise<boolean>`	Goes back from a drill-through to the report it was opened from. Resolves to whether there was one.
`download`	`download(format?: BmxReportFormat, fileName?: string) => Promise<void>`	Saves the report as a file, under `fileName` or the report's title.
`downloadPdf`	`downloadPdf(fileName?: string) => Promise<void>`	Saves the report as a PDF, under `fileName` or the report's title.
`exportAs`	`exportAs(format?: BmxReportFormat) => Promise<Blob>`	The report as a file: `pdf`, `xlsx` (its data), `csv` (its data) or `html` (its pages).
`exportPdf`	`exportPdf() => Promise<Blob>`	The report as a PDF file.
`find`	`find(text: string) => Promise<number>`	Finds text in the report and shows the first match. Resolves to the number of matches.
`getDocument`	`getDocument() => Promise<BmxReportDocument \| null>`	The laid-out report: its pages, bookmarks and problems.
`goToPage`	`goToPage(page: number) => Promise<void>`	Scrolls to a page, 1-based.
`print`	`print() => Promise<void>`	Prints the report: every page, at its own paper size.
`refresh`	`refresh() => Promise<void>`	Lays the report out again - after the data behind a URL has changed, say.
`zoomIn`	`zoomIn() => Promise<void>`	Zooms in a step.
`zoomOut`	`zoomOut() => Promise<void>`	Zooms out a step.

Slots

Slot	Description
`empty`	what to show when there is no report.
`toolbar-end`	extra controls at the end of the toolbar.

CSS shadow parts

Part	Description
`back-button`
`body`
`bookmark`
`button`
`contents`
`drill`
`empty`
`error`
`export-list`
`export-option`
`find`
`find-count`
`find-input`
`page`
`page-input`
`parameter`
`parameters`
`parameters-hint`
`run-button`
`sidebar`
`sidebar-tab`
`sort`
`status`
`thumbnail`
`thumbnails`
`toggle`
`toolbar`
`viewport`
`zoom`

CSS custom properties

Property	Description
`--bmx-report-viewer-canvas`	The area behind the pages.
`--bmx-report-viewer-control`	The colour of a group's toggle and a heading's sort arrow on the page.
`--bmx-report-viewer-control-hover`	The wash over a sortable heading or a drill-through under the pointer. @part toolbar - the row of controls. @part button - a toolbar button. The Back button is also `back-button`. @part export-list - the list of file types under the Export button. @part export-option - one of them. @part page-input - the page number field. @part zoom - the zoom list. @part find - the search group. @part find-input - the search field. @part find-count - "3/12" beside it. @part parameters - the parameters panel. @part parameters-hint - the note that required values are missing. @part parameter - one parameter's field. @part run-button - the button that runs the report. @part body - the side panel and the pages. @part sidebar - the side panel. @part sidebar-tab - its Pages and Contents buttons. @part thumbnails - the list of page thumbnails. @part thumbnail - one of them. @part contents - the contents list. @part bookmark - one entry in it. @part viewport - the scrolling area that holds the pages. @part page - one page. Pages are always white: they are paper. @part match - a search match. Also `match-current`. @part toggle - the button beside a group's heading that shows or hides its details. @part sort - a heading that sorts the report when clicked. @part drill - a value that opens another report when clicked. @part status - the "Preparing report" notice. @part empty - what is shown when there is no report. @part error - the message when the report could not be loaded.
`--bmx-report-viewer-height`	How tall the viewer is.
`--bmx-report-viewer-match`	A search match on the page.
`--bmx-report-viewer-match-current`	The match being shown.
`--bmx-report-viewer-page-shadow`	The shadow under each page.
`--bmx-report-viewer-sidebar-width`	How wide the side panel is.

`<bmx-review-layer>`

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	Commenting is on: a click on the content starts a thread there. Mutable.
`hidePins`	`hide-pins`	`boolean`	`false`	Hide every pin (the list still works).
`hideToolbar`	`hide-toolbar`	`boolean`	`false`	Leave out the bar above the content.
`hotkey`	`hotkey`	`string`	`'mod+alt+m'`	The keys that comment on what has focus. Empty for none.
`locale`	`locale`	`string`	—	The language for times ("5 minutes ago"). Default: the page's.
`moderator`	`moderator`	`boolean`	`false`	Let the user resolve, reopen and delete anyone's threads and comments, not only their own. Resolving and reopening are open to everyone regardless.
`panel`	`panel`	`boolean`	`false`	The list of every thread is showing. Mutable.
`people`	`people`	`BmxReviewPerson[] \| string`	`[]`	The people who can be
`readonly`	`readonly`	`boolean`	`false`	Read the threads only: no new threads, replies or changes.
`searchPeople`	property only	`BmxReviewPeopleSearch`	—	Looks people up as the reader types an
`showResolved`	`show-resolved`	`boolean`	`false`	Show resolved threads' pins too. Mutable.
`sort`	`sort`	`BmxReviewSort`	`'number'`	How the list is ordered.
`strings`	`strings`	`Partial<BmxReviewLayerStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`threads`	`threads`	`BmxReviewThread[] \| string`	`[]`	The threads, as an array, a `{ version, threads }` document, or JSON. Mutable: every change writes it back.
`user`	`user`	`BmxReviewPerson \| string`	—	Who is commenting: `{ id, name, avatar, color }` or JSON. Without it the threads can be read but not added to.

Events

Event	Detail	Description
`bmxActiveChange`	`{ active: boolean; }`	Fired when commenting is turned on or off.
`bmxChange`	`BmxReviewChangeDetail`	Fired after any change, with every thread: save these.
`bmxCommentAdd`	`BmxReviewCommentDetail`	Fired before a reply is added. Cancel it to refuse.
`bmxCommentDelete`	`BmxReviewCommentDetail`	Fired before a comment is deleted. Cancel it to refuse.
`bmxCommentEdit`	`BmxReviewCommentDetail`	Fired before a comment is changed. Cancel it to refuse.
`bmxMention`	`BmxReviewMentionDetail`	Fired when a new or edited comment mentions people it did not before: notify them.
`bmxThreadCreate`	`BmxReviewThreadDetail`	Fired before a thread is started. Cancel it to refuse.
`bmxThreadDelete`	`BmxReviewThreadDetail`	Fired before a thread is deleted. Cancel it to refuse.
`bmxThreadSelect`	`{ thread: BmxReviewThread \| null; }`	Fired when a thread is opened or closed.
`bmxThreadStatus`	`BmxReviewThreadDetail & { status: BmxReviewStatus; }`	Fired before a thread is resolved or reopened. Cancel it to refuse.

Methods

Method	Signature	Description
`addThread`	`addThread(target: Element \| string, text: string, x?: number, y?: number) => Promise<BmxReviewThread \| null>`	Start a thread on an element inside the layer (an element or a selector), at a point in it (fractions; default the middle), with its first comment. Resolves the thread, or `null` if it was refused.
`closeThread`	`closeThread() => Promise<void>`	Close the open thread's card.
`deleteThread`	`deleteThread(id: string) => Promise<boolean>`	Delete a thread. Resolves whether it was deleted.
`exportJson`	`exportJson() => Promise<string>`	Every thread as JSON (`{ version: 1, threads }`).
`getThreads`	`getThreads() => Promise<BmxReviewThread[]>`	Every thread.
`importJson`	`importJson(json: string \| unknown, mode?: "replace" \| "merge") => Promise<number>`	Load threads from JSON or an array: `replace` (default) or `merge` (by id; incoming wins). Resolves how many were read.
`openThread`	`openThread(id: string) => Promise<boolean>`	Open a thread's card, scrolling its element into view. Resolves whether it was found.
`refreshPins`	`refreshPins() => Promise<void>`	Re-measure where every pin goes (after the page changed in a way the layer could not see).
`reopenThread`	`reopenThread(id: string) => Promise<boolean>`	Reopen a thread. Resolves whether it changed.
`resolveThread`	`resolveThread(id: string) => Promise<boolean>`	Resolve a thread. Resolves whether it changed.

Slots

Slot	Description
`(default)`	The content being reviewed.

CSS shadow parts

Part	Description
`card`	The thread card next to a pin.
`comment`	One comment in the card.
`composer`	A comment box.
`content`	The box around the content, which the pins sit over.
`mentions`	The people list under a comment box.
`panel`	The list of every thread.
`pin`	A pin; also `pin-resolved`, `pin-selected` and `pin-new`.
`pin-new`
`thread`	One thread in the list.
`toolbar`	The bar above the content.

CSS custom properties

Property	Description
`--bmx-review-layer-card-width`	The width of a thread card.
`--bmx-review-layer-mention`	The background of a mention in a comment.
`--bmx-review-layer-panel-width`	The width of the list of threads.
`--bmx-review-layer-pin`	The colour of an open pin (a person's own colour wins).
`--bmx-review-layer-pin-size`	The size of a pin.

`<bmx-rich-text-editor>`

Properties

Property	Attribute	Type	Default	Description
`author`	`author`	`string`	`'You'`	The name tracked changes and comments are written under.
`comments`	`comments`	`readonly BmxRteComment[] \| string`	`[]`	The comments on the document. JSON in markup. Updated as comments are added, answered and resolved.
`disabled`	`disabled`	`boolean`	`false`	Neither editable nor posted with its form.
`fullscreen`	`fullscreen`	`boolean`	`false`	Show the editor over the whole window.
`hideChanges`	`hide-changes`	`boolean`	`false`	Show tracked deletions struck through (default) or hide them, showing the text as it would read.
`imageHandler`	property only	`(file: File) => Promise<string>`	—	Stores an image the reader adds and returns its URL. Default: the image is kept in the document as data.
`images`	`images`	`boolean`	`true`	Allow images.
`label`	`label`	`string`	—	What the editor is for, said by screen readers.
`markdownShortcuts`	`markdown-shortcuts`	`boolean`	`true`	Turn `#` , `-` , `1.` , `>` , `[]` , ``` and `bold` into formatting as they are typed.
`maxLength`	`max-length`	`number`	—	At most this many characters of text.
`mentionSource`	property only	`(query: string) => readonly BmxRteMentionItem[] \| Promise<readonly BmxRteMentionItem[]>`	—	Finds people to
`mentions`	`mentions`	`readonly BmxRteMentionItem[] \| string`	—	People (or anything) to
`name`	`name`	`string`	—	The name the value is posted under with its form.
`placeholder`	`placeholder`	`string`	—	Shown while the document is empty.
`readonly`	`readonly`	`boolean`	`false`	Shown but not editable.
`required`	`required`	`boolean`	`false`	The form will not submit while the document is empty.
`spellcheck`	`spellcheck`	`boolean`	`true`	Underline misspellings, as the browser does.
`statusBar`	`status-bar`	`boolean`	`true`	Show the word count and the review buttons under the document.
`strings`	`strings`	`Partial<BmxRteStrings> \| string`	—	Words the editor shows or says: any of `BmxRteStrings`. JSON in markup.
`toolbar`	`toolbar`	`string \| readonly string[]`	`'full'`	The toolbar: `full` (default), `basic`, `minimal`, or a list of items (`bold,italic,\|,link`).
`toolbarMode`	`toolbar-mode`	`'top' \| 'bubble' \| 'both' \| 'none'`	`'top'`	Where the toolbar is: `top` (default), `bubble` (over a selection), `both` or `none`.
`tracking`	`tracking`	`boolean`	`false`	Record typing and deleting as changes to accept or reject.
`value`	`value`	`string`	`''`	The document as HTML. Set it to load one; read it (or listen for `bmxRteInput`) for what was written.

Events

Event	Detail	Description
`bmxRteChange`	`BmxRteValueDetail`	The document changed and the editor lost focus, as a field's `change` does.
`bmxRteCommentsChange`	`BmxRteCommentsDetail`	A comment was added, answered, resolved, reopened or deleted. `comments` is the whole new list.
`bmxRteInput`	`BmxRteValueDetail`	The document changed (typing, a command, a paste).
`bmxRteMention`	`BmxRteMentionDetail`	Someone was
`bmxRteSelectionChange`	`BmxRteFormats`	The formats at the caret changed.
`bmxRteTrackedChange`	`BmxRteChangesDetail`	The tracked changes changed.

Methods

Method	Signature	Description
`acceptChange`	`acceptChange(id?: string) => Promise<number>`	Accepts one tracked change by id, or all of them.
`addCommentToSelection`	`addCommentToSelection(text: string) => Promise<string \| null>`	Adds a comment to the selected text. Returns its id, or null with nothing selected.
`clear`	`clear() => Promise<void>`	Empties the document.
`execCommand`	`execCommand(name: string, value?: string) => Promise<void>`	Runs a command, as its toolbar button does: `bold`, `italic`, `underline`, `strike`, `code`, `p`, `h1`-`h6`, `quote`, `codeBlock`, `bulletList`, `orderedList`, `checklist`, `alignLeft`, `alignCenter`, `alignRight`, `alignJustify`, `indent`, `outdent`, `textColor` and `highlight` (with a colour), `unlink`, `rule`, `clear`, `undo`, `redo`, `find`, `track`, `source`, `fullscreen` and the table commands.
`getChanges`	`getChanges() => Promise<readonly BmxRteChange[]>`	Every tracked change.
`getStats`	`getStats() => Promise<{ words: number; characters: number; }>`	Words and characters.
`insertHTML`	`insertHTML(html: string) => Promise<void>`	Inserts HTML (sanitised) at the caret, or at the end when the editor has none.
`insertTableAt`	`insertTableAt(cols?: number, rows?: number) => Promise<void>`	Inserts a table of `cols` by `rows` (the first row a header).
`insertText`	`insertText(text: string) => Promise<void>`	Inserts text at the caret.
`loadHTML`	`loadHTML(html: string, keepHistory?: boolean) => Promise<void>`	Loads HTML (sanitised). With `keepHistory`, the change can be undone.
`loadMarkdown`	`loadMarkdown(markdown: string, keepHistory?: boolean) => Promise<void>`	Loads Markdown.
`redo`	`redo() => Promise<void>`	Redoes what was undone.
`rejectChange`	`rejectChange(id?: string) => Promise<number>`	Rejects one tracked change by id, or all of them.
`replaceAll`	`replaceAll(query: string, replacement: string, matchCase?: boolean) => Promise<number>`	Replaces every match of `query` with `replacement`. Returns how many.
`setFocus`	`setFocus() => Promise<void>`	Moves focus into the document.
`setLink`	`setLink(href: string, newTab?: boolean) => Promise<void>`	Adds a link to the selection, or changes the one at the caret.
`toDocumentJSON`	`toDocumentJSON() => Promise<BmxRteJsonNode>`	The document as a tree of blocks, marks and text.
`toHTML`	`toHTML() => Promise<string>`	The document as sanitised HTML (the same as `value`).
`toMarkdown`	`toMarkdown() => Promise<string>`	The document as Markdown (GitHub's dialect).
`toText`	`toText() => Promise<string>`	The text, as a reader sees it, with tracked deletions left out.
`undo`	`undo() => Promise<void>`	Undoes the last change.

Slots

Slot	Description
`surface`	(managed by the editor) the editing surface.

CSS shadow parts

Part	Description
`bubble`	the toolbar over a selection.
`button`	a toolbar button.
`comments`	the comments panel.
`find`	the find and replace bar.
`frame`	the editor's border and background.
`popover`	a menu or form opened from the toolbar.
`source`	the HTML source view.
`status`	the status bar.
`toolbar`	the toolbar.

CSS custom properties

Property	Description
`--bmx-rich-text-editor-background`	Behind the document.
`--bmx-rich-text-editor-font`	The document's typeface. Default the library's.
`--bmx-rich-text-editor-font-size`	The document's text size. Default 1rem.
`--bmx-rich-text-editor-max-height`	The document's greatest height before it scrolls. Default none.
`--bmx-rich-text-editor-min-height`	The document's least height. Default 10rem.
`--bmx-rich-text-editor-toolbar-background`	Behind the toolbar.

`<bmx-risk-matrix>`

Properties

Property	Attribute	Type	Default	Description
`arrows`	`arrows`	`BmxRiskArrows`	`'none'`	Arrows on the grid: `none`, `treatment` (inherent to residual to target) or `movement` (since the last review).
`display`	`display`	`'risks' \| 'counts'`	`'risks'`	Cells show the risks themselves, or how many there are.
`fileName`	`file-name`	`string`	`'risk-register'`	The name exported files are saved under, without the extension.
`label`	`label`	`string`	—	The element's accessible name.
`model`	`model`	`Partial<BmxRiskModel> \| string`	—	The register, its scales, bands and appetite (an object, or its JSON). Kept up to date as risks are re-scored.
`readonly`	`readonly`	`boolean`	`false`	Look but do not change.
`selected`	`selected`	`string`	—	The chosen risk's id.
`showRegister`	`show-register`	`boolean`	`true`	Show the register under the grid.
`strings`	`strings`	`Partial<BmxRiskMatrixStrings> \| string`	—	Replacements for any of the wording (an object, or its JSON).
`today`	`today`	`string`	—	Today, as YYYY-MM-DD, for overdue reviews. Unset: the computer's date.
`view`	`view`	`Exclude<BmxRiskView, 'previous'>`	`'residual'`	Which scores the grid shows.

Events

Event	Detail	Description
`bmxCellSelect`	`BmxRiskCellDetail`	Fired when a cell is chosen (Enter, or a click on it).
`bmxChange`	`BmxRiskChangeDetail`	Fired when risks are re-scored or edited, a review is recorded, or a change is undone.
`bmxSelect`	`BmxRiskSelectDetail`	Fired when another risk is chosen.

Methods

Method	Signature	Description
`check`	`check() => Promise<BmxRiskProblem[]>`	What needs attention: overdue reviews, risks above appetite, scores that went the wrong way, no owner.
`download`	`download(format?: "csv" \| "svg" \| "json") => Promise<void>`	Saves the register or the heat map as a file.
`exportCsv`	`exportCsv(onlyShown?: boolean) => Promise<string>`	The register as CSV (only the risks shown, when asked).
`exportJson`	`exportJson() => Promise<string>`	The register and its scales as JSON.
`exportSvg`	`exportSvg(title?: string) => Promise<string>`	The heat map as a stand-alone SVG document.
`getModel`	`getModel() => Promise<BmxRiskModel>`	The register as it is now.
`getRisk`	`getRisk(id: string) => Promise<BmxRisk \| null>`	One risk, by id.
`getSummary`	`getSummary(view?: BmxRiskView, onlyShown?: boolean) => Promise<BmxRiskSummary>`	The figures for the risks shown (or all of them) in a view.
`markReviewed`	`markReviewed() => Promise<void>`	Records a review: every risk's residual score becomes its last-review score.
`moveRisk`	`moveRisk(id: string, likelihood: number, impact: number, view?: Exclude<BmxRiskView, "previous">) => Promise<void>`	Moves a risk to a cell in a view (the current one when not given).
`redo`	`redo() => Promise<void>`	Puts back what `undo` took.
`selectCell`	`selectCell(likelihood: number \| null, impact?: number) => Promise<void>`	Chooses a cell and shows its risks in the register (or clears that, with null).
`selectRisk`	`selectRisk(id: string \| null) => Promise<void>`	Chooses a risk (or none).
`setModel`	`setModel(model: Partial<BmxRiskModel> \| string, options?: { keepHistory?: boolean; }) => Promise<void>`	Replaces the register. Undo goes back to what was there, unless `keepHistory` is false.
`undo`	`undo() => Promise<void>`	Takes back the last change.
`updateRisk`	`updateRisk(id: string, patch: Partial<BmxRisk>) => Promise<void>`	Changes a risk's fields (not its id).

CSS shadow parts

Part	Description
`matrix`	The heat map.
`panel`	The chosen risk's details.
`register`	The register table.
`summary`	The band legend and figures.
`toolbar`	The tools along the top.

CSS custom properties

Property	Description
`--bmx-risk-matrix-appetite`	The appetite line's colour.
`--bmx-risk-matrix-band-1`	The lowest band's colour (and -2 to -6 for the next ones up), unless a band names its own.
`--bmx-risk-matrix-cell-ratio`	A cell's width over its height.
`--bmx-risk-matrix-panel-width`	The details panel's width beside the grid.
`--bmx-risk-matrix-radius`	Corner radius of the frame.

`<bmx-scheduler>`

Properties

Property	Attribute	Type	Default	Description
`conflicts`	`conflicts`	`'allow' \| 'warn' \| 'prevent'`	`'warn'`	Clashes: `allow` (not shown), `warn` (shown and announced) or `prevent` (refused).
`currentTime`	`current-time`	`string`	—	The moment taken as now (ISO), for repeatable pages and tests. Default: the clock.
`date`	`date`	`string`	—	A date in the range on show (`2026-10-05`). Default: today.
`dayEnd`	`day-end`	`string`	`'24:00'`	See `day-start`.
`dayStart`	`day-start`	`string`	`'00:00'`	The part of each day drawn in the day and week views: `07:00` to `20:00`, say.
`dayWidth`	`day-width`	`number`	`56`	Pixels per day in the month view.
`defaultDuration`	`default-duration`	`number`	`60`	Minutes a booking lasts when made by a double-click, or given without an end.
`editor`	`editor`	`boolean`	`true`	Whether double-click and Enter open the built-in editor.
`events`	`events`	`BmxSchedulerEvent[] \| string`	`[]`	Bookings: `[{ id, title, start, end?, resourceId \| resourceIds, recurrence?, ... }]`, as a property or JSON. Changes write back here.
`firstDayOfWeek`	`first-day-of-week`	`number`	—	0 for Sunday to 6 for Saturday. Default: the locale's.
`groupBy`	`group-by`	`string`	`'group'`	The resource field resources are grouped by; empty for no groups.
`holidays`	`holidays`	`string[] \| string`	`[]`	Dates no one works (`2026-12-25`): a list, or text separated by commas.
`hourWidth`	`hour-width`	`number`	—	Pixels per hour in the day and week views. Default: 72 for a day, 16 for a week.
`label`	`label`	`string`	—	An accessible name for the scheduler.
`locale`	`locale`	`string`	—	A BCP 47 locale for dates and times. Default: the page's.
`outsideHours`	`outside-hours`	`'allow' \| 'warn' \| 'prevent'`	`'allow'`	Bookings outside working hours: `allow`, `warn` or `prevent`.
`readonly`	`readonly`	`boolean`	`false`	No making, moving, resizing or deleting.
`recurrenceEdits`	`recurrence-edits`	`'ask' \| 'occurrence' \| 'series'`	`'ask'`	Changing one occurrence of a series: `ask`, or always the `occurrence` or the `series`.
`requestInit`	`request-init`	`RequestInit \| string`	—	Options for the `src` request (headers, credentials), as a property or JSON.
`resourceWidth`	`resource-width`	`number`	`220`	The width of the resource column, in pixels.
`resources`	`resources`	`BmxSchedulerResource[] \| string`	`[]`	Things that can be booked: `[{ id, name, group?, maxConcurrent?, workingHours?, timeZone?, unavailable? }]`, as a property or JSON.
`responsive`	`responsive`	`boolean`	`true`	A narrow scheduler (under 640 pixels) shows the agenda.
`rowHeight`	`row-height`	`number`	`44`	The least a row is high, in pixels. Rows grow to hold overlapping bookings.
`showUtilisation`	`show-utilisation`	`boolean`	`true`	Whether each resource shows its utilisation.
`slotMinutes`	`slot-minutes`	`number`	`15`	The step bookings snap to, in minutes.
`src`	`src`	`string`	—	A URL to load `{ resources, events }` from as JSON, or bookings from an .ics file.
`strings`	`strings`	`Partial<BmxSchedulerStrings> \| string`	—	Words to show instead of the English ones, as a property or JSON.
`timeZone`	`time-zone`	`string`	—	The zone everything is drawn in (IANA name: `Europe/London`). Default: the reader's.
`view`	`view`	`BmxSchedulerView`	`'week'`	`day`, `week`, `month` or `agenda`.
`workWeek`	`work-week`	`boolean`	`false`	The week view shows only working days (those in `working-hours`).
`workingHours`	`working-hours`	`string \| BmxSchedulerWorkingSpan[]`	`'Mon-Fri 09:00-17:00'`	When resources work, unless they say otherwise: text like `Mon-Fri 09:00-17:00`, or spans.

Events

Event	Detail	Description
`bmxSchedulerChange`	`BmxSchedulerChangeDetail`	Bookings changed: the whole new list.
`bmxSchedulerEventActivate`	`BmxSchedulerActivateDetail`	A booking was opened. Cancel it to show your own editor.
`bmxSchedulerEventChange`	`BmxSchedulerEventChangeDetail`	A booking is about to change. Cancel it to refuse the change.
`bmxSchedulerEventCreate`	`BmxSchedulerCreateDetail`	A reader asked for a new booking. Cancel it to make your own.
`bmxSchedulerRangeChange`	`BmxSchedulerRangeChangeDetail`	The range on show changed.
`bmxSchedulerSelect`	`BmxSchedulerSelectDetail`	The chosen booking changed.

Methods

Method	Signature	Description
`addEvent`	`addEvent(event: BmxSchedulerEvent) => Promise<boolean>`	Adds a booking. False when it is refused (by a cancelled `bmxSchedulerEventChange` or a clash under `conflicts="prevent"`).
`downloadICS`	`downloadICS(fileName?: string) => Promise<void>`	Saves every booking as an .ics file through the browser's download.
`findSlot`	`findSlot(request: Omit<BmxSchedulerSlotRequest, "from" \| "to"> & { from?: string \| number \| Date; to?: string \| number \| Date; }) => Promise<{ start: string; end: string; resourceIds: string[]; } \| null>`	The earliest time resources are free for a booking: all of them, or any one with `match: 'any'`, in working hours unless `workingHoursOnly` is false. Times come back as ISO instants. Null when there is none in the next 90 days (or before `to`).
`getConflicts`	`getConflicts(from?: string \| number \| Date, to?: string \| number \| Date) => Promise<BmxSchedulerConflict[]>`	The clashes between two times (default: the range on show).
`getEvents`	`getEvents() => Promise<BmxSchedulerEvent[]>`	Every booking, as the page would save it.
`getOccurrences`	`getOccurrences(from?: string \| number \| Date, to?: string \| number \| Date) => Promise<BmxSchedulerOccurrence[]>`	The bookings between two times (default: the range on show), series expanded into occurrences.
`getUtilisation`	`getUtilisation(from?: string \| number \| Date, to?: string \| number \| Date) => Promise<BmxSchedulerUtilisation[]>`	Each resource's utilisation between two times (default: the range on show).
`goToDate`	`goToDate(date: string \| Date) => Promise<void>`	Shows the range around a date.
`load`	`load(url: string) => Promise<void>`	Loads `{ resources, events }` as JSON, or bookings from an .ics file, from a URL.
`loadICS`	`loadICS(source: string \| Blob, merge?: boolean) => Promise<number>`	Reads bookings from an .ics file (its text or a File), replacing them, or adding with `merge`.
`next`	`next() => Promise<void>`	The next range.
`openEditor`	`openEditor(id?: string) => Promise<void>`	Opens the editor on a booking (by id), or on a new one.
`previous`	`previous() => Promise<void>`	The previous range.
`redo`	`redo() => Promise<boolean>`
`removeEvent`	`removeEvent(id: string) => Promise<boolean>`	Removes a booking (a whole series, for a repeating one).
`scrollToTime`	`scrollToTime(time: string \| number \| Date) => Promise<void>`	Scrolls the timeline to a time (`09:00` on the range's first day, or an instant).
`setFocus`	`setFocus() => Promise<void>`	Moves focus to the chosen booking, or the first one on show.
`toICS`	`toICS(name?: string) => Promise<string>`	Every booking as an iCalendar (.ics) file's text.
`today`	`today() => Promise<void>`	The range with today in it, scrolled to now.
`undo`	`undo() => Promise<boolean>`
`updateEvent`	`updateEvent(id: string, changes: Partial<BmxSchedulerEvent>) => Promise<boolean>`	Changes a booking's fields. False when there is no such booking or the change is refused.

CSS shadow parts

Part	Description
`agenda`	the agenda list.
`blocked`	time a resource is unavailable.
`dialog`	the editor, the "which occurrences" question and the time finder.
`event`	a booking. Also `event-selected`, `event-clash`, `event-tentative`, `event-cancelled`, `event-recurring`.
`ghost`	a booking being dragged, or the time being dragged over to make one.
`group`	a group's row. Also `group-collapsed`.
`handle`	a booking's resize grip.
`header`	the dates and hours across the top.
`lane`	a row's timeline.
`non-working`	time outside working hours.
`now`	the line at the current time.
`range-label`	the dates on show.
`resource`	a resource's cell at the start of its row.
`row`	a resource's row.
`scroller`	the scrolling timeline.
`status`	the status bar under the timeline.
`tick`	one date or hour in it. Also `tick-today`.
`tick-hour`
`toolbar`	the navigation, view and tool buttons.
`toolbar-button`	one of them.
`utilisation`	a resource's utilisation bar.

CSS custom properties

Property	Description
`--bmx-scheduler-blocked-color`	The stripes over time a resource is unavailable.
`--bmx-scheduler-border`	The lines between rows, days and hours.
`--bmx-scheduler-clash-color`	The outline and mark of a clash.
`--bmx-scheduler-event-background`	A booking without a colour of its own.
`--bmx-scheduler-event-color`	Text on a booking.
`--bmx-scheduler-event-radius`	A booking's corners.
`--bmx-scheduler-header-background`	The dates and hours across the top, and the resource column's heading.
`--bmx-scheduler-height`	How tall the timeline is (the toolbar and status bar add to it).
`--bmx-scheduler-non-working-background`	Time outside working hours.
`--bmx-scheduler-now-color`	The line at the current time.
`--bmx-scheduler-resource-background`	The resource column.
`--bmx-scheduler-today-background`	Today's column in the header.

`<bmx-select>`

Properties

Property	Attribute	Type	Default	Description
`appearance`	`appearance`	`BmxSelectAppearance`	`'outline'`	Visual treatment of the closed control.
`autoFocus`	`auto-focus`	`boolean`	`false`	Focus the control once it has rendered.
`clearable`	`clearable`	`boolean`	`false`	Show a clear button once something is chosen.
`closeOnSelect`	`close-on-select`	`boolean`	—	Close the list after a choice. Defaults to true for single, false for multiple.
`description`	`description`	`string`	—	Help text below the field.
`disabled`	`disabled`	`boolean`	`false`	Disable the control.
`emptyText`	`empty-text`	`string`	`'No options'`	What the list says when it has nothing in it.
`errorText`	`error-text`	`string`	—	An error supplied by the consumer - a server response, typically.
`fullWidth`	`full-width`	`boolean`	`false`	Stretch to the width of the container.
`hideLabel`	`hide-label`	`boolean`	`false`	Hide the label visually while keeping it as the accessible name.
`label`	`label`	`string`	—	The field's label. Required unless the `label` slot is used.
`maxTags`	`max-tags`	`number`	`3`	How many tags to show before the rest collapse into a count. A closed control that grows to four lines because somebody chose eight things pushes the rest of the form down the page every time it is used.
`maxVisibleRows`	`max-visible-rows`	`number`	`8`	How many rows the open list shows before it scrolls.
`messages`	property only	`BmxFieldMessages`	—	Replacements for the default wording, by reason. Accepts the JSON spelling of the object as well, for templates that can only write attributes. See `src/core/markup.ts`.
`multiple`	`multiple`	`boolean`	`false`	Allow more than one choice. Changes what the closed control shows to tags.
`name`	`name`	`string`	—	The field's name in the form it belongs to.
`options`	property only	`BmxListboxOption[]`	`[]`	The options. A property, because it is an array. See the note on the class. Accepts the JSON spelling of the list as well, because an attribute is the only channel some templates have. See `src/core/markup.ts`.
`placeholder`	`placeholder`	`string`	`'Select…'`	Text shown when nothing is chosen. Never a substitute for a label.
`placement`	`placement`	`BmxPlacement`	`'bottom-start'`	Which side the list opens on when there is room.
`required`	`required`	`boolean`	`false`	Require a choice before the form will submit.
`shape`	`shape`	`BmxShape`	`'rounded'`	Corner treatment. `circle` is not meaningful here and behaves as `pill`.
`size`	`size`	`BmxSize`	`'md'`	Size step.
`tone`	`tone`	`BmxTone`	`'primary'`	Semantic colour role, used for the focus ring and the chosen option.
`validateOn`	`validate-on`	`BmxValidateOn`	`'blur'`	When the field is willing to reveal a problem.
`value`	`value`	`string \| null`	`null`	The chosen value in single mode. Two-way: the component writes back to it.
`values`	property only	`string[]`	`[]`	The chosen values in `multiple` mode. Two-way. Accepts a comma-separated or JSON string as well, because an attribute is the only channel some templates have. See `src/core/markup.ts`.
`virtualThreshold`	`virtual-threshold`	`number`	`100`	The row count above which the list is windowed. Below it, rows are rendered in full and may be any height. Above it, the two height custom properties decide the geometry - see the note on the class. Set it to 0 to always window, or to `Infinity` never to.

Events

Event	Detail	Description
`bmxBlur`	`void`	Fired when the control loses focus.
`bmxChange`	`BmxSelectChangeDetail`	Fired when the selection changes.
`bmxFocus`	`void`	Fired when the control gains focus.
`bmxOpenChange`	`boolean`	Fired when the list opens or closes.
`bmxValidityChange`	`BmxSelectValidityDetail`	Fired whenever the resolved validity changes.

Methods

Method	Signature	Description
`checkValidity`	`checkValidity() => Promise<boolean>`	Validate now and return whether the field passed, without revealing anything.
`clear`	`clear() => Promise<void>`	Empty the selection.
`closeList`	`closeList() => Promise<void>`	Close the list. Focus returns to the control.
`getSelectedOptions`	`getSelectedOptions() => Promise<BmxListboxOption[]>`	The options behind the current selection, in the list's order.
`openList`	`openList() => Promise<void>`	Open the list.
`removeFocus`	`removeFocus() => Promise<void>`	Remove focus from the control.
`reportValidity`	`reportValidity() => Promise<boolean>`	Validate, reveal any problem, and focus the field if it has one.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focus the control.

Slots

Slot	Description
`(default)`	`bmx-option` elements, when options are written rather than passed.
`description`	Rich help text, in place of the `description` property.
`label`	Rich label content, in place of the `label` property.

CSS shadow parts

Part	Description
`chevron`	The disclosure arrow.
`clear`	The clear button.
`control`	The trigger carrying `role="combobox"`.
`description`	The help text.
`empty`	The message shown when there are no options.
`error`	The error message.
`field`	The bordered box that is the closed control.
`group`	A group heading.
`label`	The label element.
`listbox`	The floating surface.
`option`	One option row.
`tag`	One chosen value in `multiple` mode.
`tag-remove`	A tag's remove button.
`value`	The chosen label, or the placeholder.

CSS custom properties

Property	Description
`--bmx-select-background`	The control's background. Set by `appearance`.
`--bmx-select-border-color`	The control's border colour at rest.
`--bmx-select-border-width`	Border width of the control.
`--bmx-select-font-size`	The value's font size.
`--bmx-select-gap`	Space between the value, the tags and the chevron.
`--bmx-select-group-height`	A group heading's height. Load-bearing in the same way.
`--bmx-select-height`	The closed control's height.
`--bmx-select-label-font-size`	The label's font size.
`--bmx-select-list-background`	The floating list's background.
`--bmx-select-list-shadow`	The list's shadow, which is what lifts it off the page.
`--bmx-select-option-active-background`	The background of the option the keyboard is on.
`--bmx-select-option-height`	A row's height. Load-bearing above the virtualisation threshold — see the note above.
`--bmx-select-option-selected-background`	The chosen option's background.
`--bmx-select-padding-inline`	Horizontal padding inside the control.
`--bmx-select-placeholder-color`	Placeholder colour. Dimmer than a value, and still AA against the control.
`--bmx-select-radius`	Corner radius of the control and the list.
`--bmx-select-stack-gap`	Space between the label, the control and the supporting text.
`--bmx-select-support-font-size`	Font size of the description and error message.

`<bmx-shift-roster>`

Properties

Property	Attribute	Type	Default	Description
`fileName`	`file-name`	`string`	`'roster'`	The name exported files are saved under, without the extension.
`label`	`label`	`string`	—	The element's accessible name.
`locale`	`locale`	`string`	—	The language for dates and money (the page's when unset).
`readonly`	`readonly`	`boolean`	`false`	Look but do not change.
`roster`	`roster`	`Partial<BmxRoster> \| string`	—	The roster: dates, people, shifts, assignments, needs and rules (an object, or its JSON). Kept up to date.
`strings`	`strings`	`Partial<BmxShiftRosterStrings> \| string`	—	Replacements for any of the wording (an object, or its JSON).
`today`	`today`	`string`	—	Today, as YYYY-MM-DD (marked in the grid, and where "This week" goes). Unset: the computer's date.

Events

Event	Detail	Description
`bmxAutoFill`	`BmxShiftRosterFillDetail`	Fired when auto-fill has run, with what it added and what it could not cover.
`bmxCellSelect`	`BmxShiftRosterCellDetail`	Fired when another cell is chosen.
`bmxChange`	`BmxShiftRosterChangeDetail`	Fired when the roster changes.

Methods

Method	Signature	Description
`assign`	`assign(person: string, date: string, shift: string \| null) => Promise<void>`	Puts a person on a shift on a day (null takes them off).
`autoFill`	`autoFill(options?: BmxRosterFillOptions) => Promise<BmxRosterFillResult>`	Fills short cover, keeping every rule, and returns what it added and could not cover.
`check`	`check() => Promise<BmxRosterProblem[]>`	Every problem on the roster.
`download`	`download(kind?: "grid" \| "long" \| "json") => Promise<void>`	Saves the roster as CSV or JSON.
`exportCsv`	`exportCsv(layout?: "grid" \| "long") => Promise<string>`	The roster as CSV: a grid of shift codes, or a list of shifts.
`getCoverage`	`getCoverage() => Promise<BmxRosterCoverageDay[]>`	Cover for each day.
`getRoster`	`getRoster() => Promise<BmxRoster>`	The roster as it is now.
`getTotals`	`getTotals() => Promise<ReturnType<typeof rosterTotals>>`	Hours and cost per person and in total.
`redo`	`redo() => Promise<void>`	Puts back what `undo` took.
`selectCell`	`selectCell(person: string, date: string) => Promise<void>`	Chooses a cell (and focuses it).
`setLocked`	`setLocked(person: string, date: string, locked: boolean) => Promise<void>`	Locks or unlocks a person's shift on a day.
`setPeriod`	`setPeriod(start: string, days?: number) => Promise<void>`	Shows another period: its first day, and how many days.
`setRoster`	`setRoster(roster: Partial<BmxRoster> \| string) => Promise<void>`	Replaces the roster. Undo goes back to what was there.
`swap`	`swap(a: { person: string; date: string; }, b: { person: string; date: string; }) => Promise<void>`	Swaps (or moves) the shifts of two cells.
`undo`	`undo() => Promise<void>`	Takes back the last change.

CSS shadow parts

Part	Description
`cell`	Each day cell.
`details`	The panel under the grid.
`grid`	The roster grid.
`toolbar`	The tools along the top.

CSS custom properties

Property	Description
`--bmx-shift-roster-height`	The most height the grid takes before it scrolls.
`--bmx-shift-roster-radius`	Corner radius of the frame.
`--bmx-shift-roster-shift-0`	The first shift's colour, unless it names its own. Colours 0 to 7 are used in turn.
`--bmx-shift-roster-shift-1`	The second shift's colour.
`--bmx-shift-roster-shift-2`	The third shift's colour.
`--bmx-shift-roster-shift-3`	The fourth shift's colour.
`--bmx-shift-roster-shift-4`	The fifth shift's colour.
`--bmx-shift-roster-shift-5`	The sixth shift's colour.
`--bmx-shift-roster-shift-6`	The seventh shift's colour.
`--bmx-shift-roster-shift-7`	The eighth shift's colour.
`--bmx-shift-roster-weekend`	Background of weekend columns.

`<bmx-signature-pad>`

Properties

Property	Attribute	Type	Default	Description
`allowTyping`	`allow-typing`	`boolean`	`true`	Offer typing a name as well as drawing.
`description`	`description`	`string`	—
`disabled`	`disabled`	`boolean`	`false`
`errorText`	`error-text`	`string`	—	An error supplied by the page.
`fileName`	`file-name`	`string`	`'signature'`	The file name `download` offers.
`format`	`format`	`BmxSignatureFormat`	`'png'`	What the value is: `png` (a data URL), `svg` (an SVG document) or `json` (the strokes).
`hideLabel`	`hide-label`	`boolean`	`false`
`label`	`label`	`string`	—
`messages`	property only	`BmxFieldMessages`	—	Replacements for the default wording, by reason.
`mode`	`mode`	`BmxSignatureMode`	`'draw'`	Drawing or typing.
`name`	`name`	`string`	—	The field's name in the form.
`penWidth`	`pen-width`	`number`	`3`	The widest line, in CSS pixels. Fast strokes thin to about a third of it.
`readonly`	`readonly`	`boolean`	`false`	Show the signature without letting it change.
`required`	`required`	`boolean`	`false`	A signature is needed before the form can be sent.
`scale`	`scale`	`number`	`2`	How many times the screen size saved images are.
`strings`	`strings`	`Partial<BmxSignaturePadStrings> \| string`	—	Replacements for any of the pad's own wording (an object, or its JSON).
`trim`	`trim`	`boolean`	`true`	Crop saved images to the ink, with a little room around it.
`validateOn`	`validate-on`	`BmxValidateOn`	`'submit'`	When a missing signature is pointed out.
`value`	`value`	`string`	`''`	The signature, in `format`. Setting it to JSON strokes draws them; an empty string clears the pad.

Events

Event	Detail	Description
`bmxChange`	`BmxSignatureChangeDetail`	Fired when the signature changes: a stroke ends, the pad is cleared, a change is undone, or the typed name changes.
`bmxValidityChange`	`BmxSignatureValidityDetail`	Fired whenever the resolved validity changes.

Methods

Method	Signature	Description
`checkValidity`	`checkValidity() => Promise<boolean>`	Validate now and return whether the field passed, without revealing it.
`clear`	`clear() => Promise<void>`	Wipe the pad (or the typed name, in Type mode). Drawn strokes can be brought back with `undo`.
`download`	`download(format?: "png" \| "svg", name?: string) => Promise<void>`	Offers the signature to the reader as a file.
`fromJSON`	`fromJSON(data: BmxSignatureData \| string) => Promise<void>`	Draws saved strokes. Accepts the object from `toJSON` or its JSON text.
`isEmpty`	`isEmpty() => Promise<boolean>`	Whether nothing has been drawn or typed.
`redo`	`redo() => Promise<void>`	Put back what `undo` took.
`reportValidity`	`reportValidity() => Promise<boolean>`	Validate, reveal any problem, and focus the field if it has one.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focus the first control: the typed name in Type mode, else the first tool.
`toDataURL`	`toDataURL(type?: "image/png" \| "image/jpeg", scale?: number) => Promise<string>`	The signature as a data URL: PNG with a see-through ground, or JPEG on the paper colour. Empty string when empty.
`toJSON`	`toJSON() => Promise<BmxSignatureData>`	The strokes (or the typed name), to store and give back to `fromJSON` later.
`toPng`	`toPng(scale?: number) => Promise<Blob \| null>`	The signature as a PNG, `scale` times its size on screen. Null when empty.
`toSvg`	`toSvg() => Promise<string \| null>`	The signature as an SVG document, trimmed to the ink when `trim` is on. Null when empty.
`undo`	`undo() => Promise<void>`	Take back the last stroke (or the last clear).

Slots

Slot	Description
`description`	Rich help text, in place of the `description` property.
`label`	Rich label content, in place of the `label` property.

CSS shadow parts

Part	Description
`description`	The help text.
`error`	The error message.
`input`	The text field in Type mode.
`label`	The label.
`pad`	The paper.
`toolbar`	The buttons.

CSS custom properties

Property	Description
`--bmx-signature-pad-background`	The paper. Default white, in every theme.
`--bmx-signature-pad-font`	The handwriting fonts a typed name is shown in.
`--bmx-signature-pad-height`	The height of the paper. Default 11rem.
`--bmx-signature-pad-ink`	The ink colour. Default a blue-black, in every theme.
`--bmx-signature-pad-label-font-size`	The label's font size.
`--bmx-signature-pad-line`	The signing line and its cross.
`--bmx-signature-pad-support-font-size`	Font size of the description and error.

`<bmx-skeleton>`

Properties

Property	Attribute	Type	Default	Description
`animation`	`animation`	`'shimmer' \| 'pulse' \| 'none'`	`'shimmer'`	The idle animation. `shimmer` is a highlight travelling across the shape; `pulse` fades it in and out; `none` is a still grey box. Under `prefers-reduced-motion` all three are the still box - unlike an indeterminate progress bar, a skeleton that stops moving still says exactly what it said before, because the information is in the shape rather than in the motion.
`label`	`label`	`string`	—	A polite announcement that content is loading. Put it on one skeleton per region and leave it off the rest. See above.
`lastLine`	`last-line`	`number`	`62`	How wide the last line is, as a percentage. Shorter than the others by default, because the last line of a paragraph is - and a block of identical bars reads as a table rather than as text.
`lines`	`lines`	`number`	`1`	How many lines to draw, in `text` shape.
`shape`	`shape`	`BmxSkeletonShape`	`'text'`	What it stands in for: lines of text, a block, or an avatar.

CSS shadow parts

Part	Description
`line`	Each bar in a text skeleton.
`shape`	The single box or circle, in the other two shapes.

CSS custom properties

Property	Description
`--bmx-skeleton-color`	The grey the shapes are drawn in.
`--bmx-skeleton-duration`	One cycle of the animation.
`--bmx-skeleton-gap`	The space between lines.
`--bmx-skeleton-highlight`	The band that travels across them in `shimmer`.
`--bmx-skeleton-line-height`	How thick one line of the text shape is.
`--bmx-skeleton-radius`	The corner radius of a line or a block.
`--bmx-skeleton-size`	The circle's diameter, and the block's height when no height is given.

`<bmx-slider>`

Properties

Property	Attribute	Type	Default	Description
`autoFocus`	`auto-focus`	`boolean`	`false`	Focus the first thumb once it has rendered.
`description`	`description`	`string`	—	Help text below the track.
`disabled`	`disabled`	`boolean`	`false`	Disable the slider.
`errorText`	`error-text`	`string`	—	An error supplied by the consumer.
`format`	property only	`BmxSliderFormatter`	—	Turns a value into what the user reads. Used for the bubble, the tick labels and `aria-valuetext` together, so the three can never disagree - a price slider that shows "£1,200" and announces "1200" is announcing a number rather than a price.
`fullWidth`	`full-width`	`boolean`	`false`	Stretch to the width of the container.
`hideLabel`	`hide-label`	`boolean`	`false`	Hide the label visually while keeping it as the accessible name.
`label`	`label`	`string`	—	The field's label. Required unless the `label` slot is used.
`largeStep`	`large-step`	`number`	—	How far Page Up and Page Down travel. Defaults to a tenth of the range.
`max`	`max`	`number`	`100`	The highest value.
`min`	`min`	`number`	`0`	The lowest value.
`minDistance`	`min-distance`	`number`	`0`	The smallest gap the two thumbs may be apart.
`name`	`name`	`string`	—	The field's name in the form it belongs to.
`orientation`	`orientation`	`BmxOrientation`	`'horizontal'`	Which way the track runs. A vertical track runs upwards.
`range`	`range`	`boolean`	`false`	Two thumbs rather than one.
`readonly`	`readonly`	`boolean`	`false`	Make the slider read-only. It still submits and is still focusable.
`showValue`	`show-value`	`BmxSliderValueDisplay`	`'auto'`	When the value is shown above the thumb.
`size`	`size`	`BmxSize`	`'md'`	Size step. Scales the track, the thumbs and the text together.
`step`	`step`	`number`	`1`	The interval between reachable values, counted from `min`.
`tickLabels`	`tick-labels`	`boolean`	`false`	Label the ticks with their values.
`ticks`	`ticks`	`number`	`0`	Draw a tick every N steps. `0` draws none. A tick per step on a long scale is thousands of elements nobody can see, so anything over a hundred draws none either.
`tone`	`tone`	`BmxTone`	`'primary'`	Semantic colour role for the fill, the thumbs and the focus ring.
`value`	`value`	`number`	`0`	The value, in single mode. Two-way: the component writes back to it.
`values`	property only	`number[]`	`[]`	The two ends, in `range` mode. Two-way. Accepts a comma-separated or JSON string as well, because an attribute is the only channel some templates have. See `src/core/markup.ts`.

Events

Event	Detail	Description
`bmxChange`	`BmxSliderChangeDetail`	Fired when a movement finishes - on pointer release, or on each key press.
`bmxInput`	`BmxSliderChangeDetail`	Fired continuously while a thumb moves.

Methods

Method	Signature	Description
`getValues`	`getValues() => Promise<number[]>`	Every thumb's value, low to high.
`removeFocus`	`removeFocus() => Promise<void>`	Remove focus from whichever thumb has it.
`setFocus`	`setFocus(index?: number, options?: FocusOptions) => Promise<void>`	Focus a thumb. The first one, unless another is named.

Slots

Slot	Description
`(default)`	The default slot
`description`	Rich help text, in place of the `description` property.
`label`	Rich label content, in place of the `label` property.

CSS shadow parts

Part	Description
`bubble`	The value shown above the thumb.
`description`	The help text.
`fill`	The part of the track between the ends of the selection.
`label`	The label element.
`thumb`	A draggable thumb.
`tick`	One tick mark.
`tick-label`	One tick's text.
`track`	The full-length track.

CSS custom properties

Property	Description
`--bmx-slider-duration`	How long the thumb takes to settle after a keystroke. Zero while dragging, and under reduced motion.
`--bmx-slider-fill-color`	The selected part. Defaults to the tone's solid colour.
`--bmx-slider-font-size`	The tick labels and the value bubble.
`--bmx-slider-length`	A vertical slider's length. A horizontal one is sized by `inline-size` on the host.
`--bmx-slider-radius`	Corner radius of the track and the fill.
`--bmx-slider-thumb-border-color`	The thumb's ring. Defaults to the tone's solid colour.
`--bmx-slider-thumb-border-width`	The ring around the thumb.
`--bmx-slider-thumb-color`	The thumb's fill.
`--bmx-slider-thumb-shadow`	The thumb's shadow, which is what lifts it off the track.
`--bmx-slider-thumb-size`	The thumb's diameter.
`--bmx-slider-tick-color`	The tick marks.
`--bmx-slider-track-color`	The unfilled part of the track.
`--bmx-slider-track-size`	The track's thickness.

`<bmx-sparkline>`

Properties

Property	Attribute	Type	Default	Description
`band`	`band`	`readonly number[] \| string`	—	A shaded band of normal values: `[low, high]`, or `"low,high"`.
`format`	`format`	`BmxChartNumberFormat \| string`	—	How values are written: `percent`, `currency:EUR`, `decimal:1`, `compact`, or the object.
`label`	`label`	`string`	—	What the values are, read before the description ("Revenue, last six months").
`labels`	`labels`	`readonly string[] \| string`	—	Names for the values, read by the pointer ("Jan,Feb,Mar").
`locale`	`locale`	`string`	—	A BCP 47 locale for numbers. Default: the page's `lang`.
`markers`	`markers`	`'none' \| 'last' \| 'minmax' \| 'all'`	`'last'`	Dots on `none`, the `last` value (default), the `minmax` and last, or `all`.
`max`	`max`	`number`	—	The top of the scale. Default: the highest value.
`min`	`min`	`number`	—	The bottom of the scale. Default: the lowest value.
`strings`	`strings`	`Partial<BmxSparklineStrings> \| string`	—	Words it is read with, to translate: any of `BmxSparklineStrings`. JSON in markup.
`target`	`target`	`number`	—	A bullet's target.
`type`	`type`	`BmxSparklineType`	`'line'`	`line` (default), `area`, `column`, `winloss` or `bullet`.
`values`	`values`	`readonly (number \| null)[] \| string`	—	The values, oldest first: a list, or comma-separated in markup. An empty entry is a gap.

CSS shadow parts

Part	Description
`sparkline`	the drawing.
`tooltip`	the value under the pointer.

CSS custom properties

Property	Description
`--bmx-sparkline-band`	The band of normal values.
`--bmx-sparkline-color`	The line, area and columns.
`--bmx-sparkline-height`	How tall it is. Default 1.4em.
`--bmx-sparkline-high`	The highest value's marker.
`--bmx-sparkline-low`	The lowest value's marker.
`--bmx-sparkline-negative`	Columns below zero, and losses.
`--bmx-sparkline-width`	How wide it is. Default 6em.

`<bmx-split-button>`

Properties

Property	Attribute	Type	Default	Description
`action`	property only	`(event: unknown) => unknown \| Promise<unknown>`	—	An async handler for the primary action, driving its busy state.
`disabled`	`disabled`	`boolean`	`false`	Disable both halves.
`items`	property only	`BmxMenuEntry[]`	`[]`	The menu's entries. A property, because it is an array. Accepts the JSON spelling of the list as well, because an attribute is the only channel some templates have. See `src/core/markup.ts`.
`label`	`label`	`string`	—	The primary action's accessible name, when it has no visible label.
`loading`	`loading`	`boolean`	`false`	Show the primary action as busy.
`menuLabel`	`menu-label`	`string`	`'More actions'`	The trigger's accessible name.
`placement`	`placement`	`'bottom-start' \| 'bottom-end' \| 'top-start' \| 'top-end'`	`'bottom-start'`	Which side the menu opens on when there is room.
`shape`	`shape`	`BmxShape`	`'rounded'`	Corner treatment of the outer edges.
`size`	`size`	`BmxSize`	`'md'`	Size step.
`tone`	`tone`	`BmxTone`	`'primary'`	Semantic colour role.
`variant`	`variant`	`BmxButtonVariant`	`'solid'`	Visual treatment, applied to both halves.

Events

Event	Detail	Description
`bmxActivate`	`void`	Fired when the primary action is activated.
`bmxOpenChange`	`boolean`	Fired when the menu opens or closes.
`bmxSelect`	`BmxSplitButtonSelectDetail`	Fired when a menu item is chosen.

Methods

Method	Signature	Description
`closeMenuNow`	`closeMenuNow() => Promise<void>`	Close the menu. Focus returns to the trigger.
`openMenu`	`openMenu() => Promise<void>`	Open the menu and move focus into it.

Slots

Slot	Description
`(default)`	The primary action's label.
`start`	An icon for the primary action.

CSS shadow parts

Part	Description
`action`	The primary action button.
`base`	The container.
`item`	A menu item.
`menu`	The menu surface.
`separator`	A divider between items.
`trigger`	The menu trigger button.

CSS custom properties

Property	Description
`--bmx-button-radius`	Corner radius of the outer edges. The shared edge between the two halves is always square.
`--bmx-effect-duration`	Passed through to both halves' click effects.

`<bmx-splitter>`

Properties

Property	Attribute	Type	Default	Description
`collapseAt`	`collapse-at`	`number`	—	How far past its minimum a pane must be dragged before it folds away. Off by default, and deliberately: a pane that vanishes when a drag overshoots - and can only be brought back by finding a divider now flush against an edge - is a worse control than one that simply stops. Set it, and the pane collapses; `Enter` on the divider then folds and unfolds it, restoring the size it had rather than a default.
`collapsible`	`collapsible`	`'none' \| 'start' \| 'end' \| 'both'`	`'none'`	Which pane may collapse.
`disabled`	`disabled`	`boolean`	`false`	The divider cannot be moved.
`endMax`	`end-max`	`string \| number`	—	The most it will take.
`endMin`	`end-min`	`string \| number`	`0`	The least room the second pane will take.
`label`	`label`	`string`	`'Resize panes'`	The divider's accessible name.
`largeStep`	`large-step`	`number`	—	How far Shift and an arrow key move it. Defaults to five steps.
`orientation`	`orientation`	`BmxSplitOrientation`	`'horizontal'`	Which way the panes are stacked. `vertical` puts the first pane on top.
`position`	`position`	`string \| number`	`'50%'`	How much room the first pane gets: a length, a percentage, or a number of pixels. Reflected as it moves, so a page that wants to remember where a reader put the divider can read it off the element and write it back next time.
`snap`	`snap`	`(string \| number)[] \| string`	`''`	Positions the divider is pulled towards, as lengths or percentages. A comma-separated or JSON attribute, or an array in JavaScript. `50%` alone is a middle the divider settles into; a list gives it several. See `src/core/markup.ts` for the attribute spellings.
`snapTolerance`	`snap-tolerance`	`number`	`12`	How near a snap point the divider must be to be pulled onto it.
`startMax`	`start-max`	`string \| number`	—	The most it will take.
`startMin`	`start-min`	`string \| number`	`0`	The least room the first pane will take.
`step`	`step`	`number`	`16`	How far one arrow key press moves the divider.

Events

Event	Detail	Description
`bmxChange`	`BmxSplitterChangeDetail`	Fired when the divider is let go, or moved by a key.
`bmxInput`	`BmxSplitterChangeDetail`	Fired continuously while the divider is being dragged.

Methods

Method	Signature	Description
`collapse`	`collapse(pane?: "start" \| "end") => Promise<void>`	Fold a pane away.
`expand`	`expand() => Promise<void>`	Bring a folded pane back to the size it had.
`setPosition`	`setPosition(position: string \| number) => Promise<void>`	Put the divider somewhere. Clamped, and snapped.

Slots

Slot	Description
`end`	The second pane.
`start`	The first pane: the left one, or the top one, and the right one under RTL.

CSS shadow parts

Part	Description
`base`	The container the two panes divide.
`divider`	The bar between them.
`end`	The second pane.
`handle`	The grip drawn on the divider.
`start`	The first pane.

CSS custom properties

Property	Description
`--bmx-splitter-color`	The divider's colour.
`--bmx-splitter-color-hover`	Its colour under the pointer, and while it is being dragged.
`--bmx-splitter-handle-color`	The grip's colour.
`--bmx-splitter-handle-size`	The length of the grip drawn on it.
`--bmx-splitter-hit-area`	How far either side of the divider the pointer still grabs it.
`--bmx-splitter-size`	The divider's thickness. Also its measured gutter, so a change here changes the arithmetic.

`<bmx-spreadsheet>`

Properties

Property	Attribute	Type	Default	Description
`data`	`data`	`BmxSpreadsheetData \| string`	—	The spreadsheet: `{ sheets, names, tables, looks, activeSheet }`, as a property or JSON.
`fileName`	`file-name`	`string`	`'spreadsheet'`	The file name downloads are saved under, without its extension.
`formulaBar`	`formula-bar`	`boolean`	`true`	Show the formula bar.
`functions`	property only	`Record<string, BmxFormulaCustomFunction>`	—	Functions of your own, by name, for formulas. Set from script.
`headings`	`headings`	`boolean`	`true`	Show the row and column headings.
`label`	`label`	`string`	—	The accessible name of the sheet grid.
`locale`	`locale`	`string`	—	A BCP 47 locale: decides formula separators, how typed numbers and dates are read, and month names.
`readonly`	`readonly`	`boolean`	`false`	Nothing can be changed; cells can still be chosen, copied and searched.
`requestInit`	`request-init`	`RequestInit \| string`	—	Options for the `src` request (headers, credentials), as a property or JSON.
`sheetTabs`	`sheet-tabs`	`boolean`	`true`	Show the sheet tabs.
`src`	`src`	`string`	—	A URL to open: an Excel file (.xlsx), a CSV or tab-separated file, or JSON in the shape `getData()` returns. Your server, your file.
`statusBar`	`status-bar`	`boolean`	`true`	Show the status bar (sum, average and count of the selection).
`strings`	`strings`	`Partial<BmxSpreadsheetStrings> \| string`	—	The words it shows, to translate or change them.
`toolbar`	`toolbar`	`boolean`	`true`	Show the formatting toolbar.

Events

Event	Detail	Description
`bmxSpreadsheetCellEdit`	`BmxSpreadsheetCellEditDetail`	A typed entry is about to go into a cell; cancel to refuse it.
`bmxSpreadsheetChange`	`BmxSpreadsheetChangeDetail`	Values, looks, rows or sheets changed.
`bmxSpreadsheetError`	`BmxSpreadsheetErrorDetail`	Opening a file or `src` failed.
`bmxSpreadsheetLoad`	`{ readonly sheets: readonly string[]; }`	A file or `src` was opened.
`bmxSpreadsheetSelectionChange`	`BmxSpreadsheetSelectionDetail`	The selection or the active cell changed.
`bmxSpreadsheetSheetChange`	`BmxSpreadsheetSheetDetail`	Another sheet was brought to the front.

Methods

Method	Signature	Description
`activateSheet`	`activateSheet(name: string) => Promise<void>`	Brings a sheet to the front.
`addConditionalFormat`	`addConditionalFormat(rule: BmxSpreadsheetRule, sheet?: string) => Promise<string>`	Adds a conditional format; returns its id.
`addSheet`	`addSheet(name?: string) => Promise<string>`	Adds a sheet (after the active one); returns its name.
`addValidation`	`addValidation(validation: BmxSpreadsheetValidation, sheet?: string) => Promise<string>`	Adds data validation to a range; returns its id.
`autoFitColumns`	`autoFitColumns(columns?: string) => Promise<void>`	Fits columns to their contents (all used columns by default).
`deleteColumns`	`deleteColumns(from: string \| number, count?: number) => Promise<void>`	Deletes columns from a column (a letter, or 1-based).
`deleteRows`	`deleteRows(from: number, count?: number) => Promise<void>`	Deletes rows from a row (1-based).
`downloadCSV`	`downloadCSV(sheet?: string, name?: string) => Promise<void>`	Saves a sheet as a CSV file.
`downloadXlsx`	`downloadXlsx(name?: string) => Promise<void>`	Saves the spreadsheet as an Excel file.
`find`	`find(query: string, options?: BmxSpreadsheetFindOptions) => Promise<BmxSpreadsheetFound[]>`	Finds cells by their text (or formulas).
`freezePanes`	`freezePanes(rows: number, columns?: number) => Promise<void>`	Keeps rows and columns in view while the rest scrolls; 0 and 0 unfreezes.
`getActiveSheet`	`getActiveSheet() => Promise<string>`	The sheet in front.
`getCellAddress`	`getCellAddress() => Promise<string>`	The active cell with its sheet: `Sheet1!B4`.
`getConditionalFormats`	`getConditionalFormats(sheet?: string) => Promise<BmxSpreadsheetRule[]>`
`getData`	`getData() => Promise<BmxSpreadsheetData>`	The whole spreadsheet as JSON: sheets, cells, formulas, formats, names, tables and looks.
`getFormulaWorkbook`	`getFormulaWorkbook() => Promise<BmxFormulaWorkbook>`	The workbook, for a `bmx-formula-bar` bound to this spreadsheet.
`getModel`	`getModel() => Promise<BmxSpreadsheetModel>`	The model: the workbook and every sheet's look.
`getSelection`	`getSelection() => Promise<BmxSpreadsheetSelectionDetail>`	The active cell and the selected ranges.
`getStyle`	`getStyle(address: string) => Promise<BmxSpreadsheetCellStyle>`	A cell's style (its column's, row's and own together).
`getText`	`getText(address: string) => Promise<string>`	A cell's value as shown.
`getValue`	`getValue(address: string) => Promise<BmxFormulaValue>`	A cell's value.
`getWorkbook`	`getWorkbook() => Promise<BmxFormulaWorkbook>`	The workbook behind the cells: the formula engine's full API.
`goToCell`	`goToCell(address: string) => Promise<boolean>`	Makes a cell (or range) the active one and shows it.
`insertColumns`	`insertColumns(before: string \| number, count?: number) => Promise<void>`	Inserts columns before a column (a letter, or 1-based).
`insertRows`	`insertRows(before: number, count?: number) => Promise<void>`	Inserts rows before a row (1-based).
`load`	`load(file: Blob \| File \| string) => Promise<void>`	Opens a file (an Excel, CSV or JSON file, as a File, Blob or URL).
`loadCSV`	`loadCSV(text: string, at?: string) => Promise<void>`	Reads CSV (or tab-separated) text into a sheet from a cell, as typed.
`mergeCells`	`mergeCells(range: string, mode?: "all" \| "across" \| "center") => Promise<void>`	Merges a range: `all`, `across` (each row) or `center` (and centres it).
`recalculate`	`recalculate() => Promise<void>`	Recalculates every formula.
`redoChange`	`redoChange() => Promise<boolean>`
`removeConditionalFormat`	`removeConditionalFormat(id: string, sheet?: string) => Promise<void>`
`removeSheet`	`removeSheet(name: string) => Promise<void>`
`removeValidation`	`removeValidation(idOrRange: string, sheet?: string) => Promise<void>`
`renameSheet`	`renameSheet(from: string, to: string) => Promise<void>`
`replace`	`replace(query: string, replacement: string, options?: BmxSpreadsheetFindOptions) => Promise<number>`	Replaces text in what cells hold; returns how many cells changed.
`select`	`select(range: string) => Promise<void>`	Selects a cell or range (on its sheet), and scrolls it into view.
`setBorders`	`setBorders(range: string, which: BmxSpreadsheetBorderSet, border?: BmxSpreadsheetBorder) => Promise<void>`	Draws borders: `all`, `outer`, `inner`, `top`, `bottom`, `left`, `right`, `horizontal`, `vertical` or `none`.
`setCell`	`setCell(address: string, text: string \| number \| boolean \| null) => Promise<void>`	Sets a cell from text, as typed: `=` starts a formula. Not checked against validation; use `setCellText` for that.
`setCellText`	`setCellText(address: string, text: string) => Promise<boolean>`	Sets a cell from typed text through the spreadsheet's checks: data validation and `bmxSpreadsheetCellEdit`. Resolves false when refused.
`setCells`	`setCells(cells: Record<string, string \| number \| boolean \| null>) => Promise<void>`	Sets several cells at once, as one undo step: `{ "A1": "Total", "B1": "=SUM(B2:B9)" }`.
`setColumnWidth`	`setColumnWidth(columns: string, width: number) => Promise<void>`	Sets column widths in CSS pixels: `setColumnWidth('B:D', 120)`.
`setData`	`setData(data: BmxSpreadsheetData) => Promise<void>`	Replaces the whole spreadsheet.
`setFilter`	`setFilter(range: string \| null, columns?: Record<string, BmxSpreadsheetFilterColumn>) => Promise<void>`	Turns the filter on over a range (its first row the headings), or off with null.
`setFocus`	`setFocus() => Promise<void>`	Moves focus to the sheet.
`setNote`	`setNote(address: string, text: string \| null) => Promise<void>`	Sets a cell's note (null removes it).
`setNumberFormat`	`setNumberFormat(range: string, code: string \| null) => Promise<void>`	Sets a range's number format (`#,##0.00`, `dd/mm/yyyy`, `0%`); null or 'General' removes it.
`setRowHeight`	`setRowHeight(rows: string \| number, height: number) => Promise<void>`	Sets row heights in CSS pixels: `setRowHeight('1:3', 32)`.
`setStyle`	`setStyle(range: string, style: BmxSpreadsheetStyleChange) => Promise<void>`	Lays a style over a range: `{ bold: true, fill: '#fff3bf' }`; `null` removes a property.
`showReferences`	`showReferences(references: readonly { range: string; color?: string; }[]) => Promise<void>`	Outlines ranges in colours, as a formula bar does for the formula being typed.
`sort`	`sort(range: string, by: readonly { column: string; descending?: boolean; }[], header?: boolean) => Promise<void>`	Sorts a range's rows by columns (letters): `sort('A1:D20', [{ column: 'C', descending: true }], true)`.
`toCSV`	`toCSV(sheet?: string, delimiter?: string) => Promise<string>`	A sheet (the active one by default) as CSV, values as shown. Text that another spreadsheet would read as a formula is written with a `'` first.
`toXlsx`	`toXlsx() => Promise<Uint8Array>`	The spreadsheet as an Excel file (.xlsx): values, formulas, formats and looks.
`undoChange`	`undoChange() => Promise<boolean>`
`unmergeCells`	`unmergeCells(range: string) => Promise<void>`

CSS shadow parts

Part	Description
`formula-bar`	the formula bar row.
`frame`	the whole spreadsheet.
`grid`	the scrolling sheet.
`status`	the status bar.
`tabs`	the sheet tabs.
`toolbar`	the formatting toolbar.

CSS custom properties

Property	Description
`--bmx-spreadsheet-cell-font-size`	The text size of cells with no size of their own. Default 13px.
`--bmx-spreadsheet-gridlines`	The colour of the grid lines.
`--bmx-spreadsheet-header-background`	Behind the row and column headings.
`--bmx-spreadsheet-height`	How tall the spreadsheet is. Default 36rem.
`--bmx-spreadsheet-selection`	The selection's outline and the active cell's border.

`<bmx-step>`

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	Whether this is the step showing. Set by `bmx-stepper`.
`description`	`description`	`string`	—	A short line under the label.
`disabled`	`disabled`	`boolean`	`false`	The step cannot be chosen.
`errorText`	`error-text`	`string`	—	What is wrong, shown under the label while the step is in error.
`icon`	`icon`	`string`	—	An inline SVG string, shown in the step's marker instead of its number.
`label`	`label`	`string`	—	The step's name in the step list.
`optional`	`optional`	`boolean`	`false`	The step may be left without being completed.
`state`	`state`	`'done' \| 'error'`	—	A state set by the page: `done` shows it completed, `error` shows it needs attention.
`value`	`value`	`string`	—	What the step is called in the stepper's `value` and events. Default: its label, then its position.

Slots

Slot	Description
`(default)`	The step's content.

CSS shadow parts

Part	Description
`base`	The box around the content.

CSS custom properties

Property	Description
`--bmx-step-display`	How the current step lays its content out. Block by default.

`<bmx-stepper>`

Properties

Property	Attribute	Type	Default	Description
`beforeChange`	property only	`BmxStepGuard`	—	The page's own check before a step is left forward, or finished.
`hideControls`	`hide-controls`	`boolean`	`false`	Leave out the Back and Next buttons, for a page that moves the steps itself.
`label`	`label`	`string`	—	The step list's accessible name. Default: "Progress".
`linear`	`linear`	`boolean`	`true`	Steps in order: a step can be reached once every required step before it is completed. `false` lets any step be chosen.
`noValidate`	`no-validate`	`boolean`	`false`	Do not check the forms and fields in a step before leaving it forward.
`orientation`	`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	The step list across the top (`horizontal`) or down the side (`vertical`).
`strings`	`strings`	`Partial<BmxStepperStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`value`	`value`	`string`	—	The current step, by value. Mutable: moving updates it.

Events

Event	Detail	Description
`bmxComplete`	`BmxStepperCompleteDetail`	Fired when Finish completes the last step.
`bmxStepChange`	`BmxStepChangeDetail`	Fired before the current step changes. Cancel it to stay.
`bmxStepChanged`	`BmxStepChangeDetail`	Fired after the current step has changed.

Methods

Method	Signature	Description
`finish`	`finish() => Promise<boolean>`	Completes the last step, after its checks, and fires `bmxComplete`. Resolves whether it finished.
`getCompleted`	`getCompleted() => Promise<string[]>`	The values of the completed steps, in order.
`goTo`	`goTo(step: string \| number) => Promise<boolean>`	Moves to a step by value or position, if it can be reached. Resolves whether it moved.
`next`	`next() => Promise<boolean>`	Moves to the next step, after its checks. Resolves whether it moved.
`previous`	`previous() => Promise<boolean>`	Moves to the step before. Resolves whether it moved.
`reset`	`reset() => Promise<void>`	Back to the first step, with nothing completed.
`setCompleted`	`setCompleted(step: string, completed?: boolean) => Promise<void>`	Marks a step as completed (true) or not (false).
`setError`	`setError(step: string, message: string \| null) => Promise<void>`	Shows a step as needing attention, with a message; null clears it.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focuses the current step in the step list.

Slots

Slot	Description
`(default)`	`bmx-step` elements.

CSS shadow parts

Part	Description
`actions`	The row of Back and Next.
`back`	The Back button.
`compact`	The "Step 2 of 5" heading shown when narrow.
`content`	The current step's content.
`description`	A step's description.
`label`	A step's label.
`marker`	The circle with the step's number, tick or warning.
`message`	Why a step could not be left.
`next`	The Next (or Finish) button.
`step`	One step's button; also `step-current`, `step-done`, `step-error`, `step-disabled` by state.
`steps`	The step list.

CSS custom properties

Property	Description
`--bmx-stepper-gap`	Space between the step list and the content.
`--bmx-stepper-line`	The colour of the line joining the steps.
`--bmx-stepper-line-done`	The colour of the line after a completed step.
`--bmx-stepper-marker-size`	The diameter of a step's numbered circle.
`--bmx-stepper-side-width`	The width of the step list in the vertical layout.

`<bmx-switch>`

Properties

Property	Attribute	Type	Default	Description
`autoFocus`	`auto-focus`	`boolean`	`false`	Focus the switch once it has rendered.
`checked`	`checked`	`boolean`	`false`	Whether the switch is on. Two-way: the component writes back to it.
`checkedText`	`checked-text`	`string`	—	Text shown beside the track while the switch is on - "On", typically. Decoration, not the accessible state: `role="switch"` already announces on and off, so this text is hidden from assistive technology rather than read out a second time in whatever words the consumer chose. Named for `checked` rather than for "on" because Stencil rejects a property whose name begins with `on` followed by a capital - it reads it as an event handler somebody has mistakenly declared as a property, which is a good rule that happens to catch `onText`.
`description`	`description`	`string`	—	Help text below the row.
`disabled`	`disabled`	`boolean`	`false`	Disable the switch.
`errorText`	`error-text`	`string`	—	An error supplied by the consumer.
`fullWidth`	`full-width`	`boolean`	`false`	Stretch to the width of the container, pushing the caption away from the track.
`hideLabel`	`hide-label`	`boolean`	`false`	Hide the caption visually while keeping it as the accessible name.
`label`	`label`	`string`	—	The caption. Required unless the `label` slot is used.
`labelPlacement`	`label-placement`	`BmxSwitchLabelPlacement`	`'end'`	Which side of the track the caption sits on. Logical, so RTL flips it.
`messages`	property only	`BmxFieldMessages`	—	Replacements for the default wording, by reason. Accepts the JSON spelling of the object as well, for templates that can only write attributes. See `src/core/markup.ts`.
`name`	`name`	`string`	—	The field's name in the form it belongs to.
`required`	`required`	`boolean`	`false`	Require the switch to be on before its form will submit.
`size`	`size`	`BmxSize`	`'md'`	Size step. Scales the track, the caption and the supporting text together.
`tone`	`tone`	`BmxTone`	`'primary'`	Semantic colour role for the on state and the focus ring.
`uncheckedText`	`unchecked-text`	`string`	—	Text shown beside the track while the switch is off - "Off", typically.
`validateOn`	`validate-on`	`BmxValidateOn`	`'blur'`	When the field is willing to reveal a problem.
`value`	`value`	`string`	`'on'`	What the form receives when the switch is on.

Events

Event	Detail	Description
`bmxBlur`	`void`	Fired when the switch loses focus.
`bmxChange`	`BmxSwitchChangeDetail`	Fired when the switch moves, by user action or by `toggle()`.
`bmxFocus`	`void`	Fired when the switch gains focus.
`bmxValidityChange`	`BmxSwitchValidityDetail`	Fired whenever the resolved validity changes.

Methods

Method	Signature	Description
`checkValidity`	`checkValidity() => Promise<boolean>`	Validate now and return whether the switch passed, without revealing anything.
`removeFocus`	`removeFocus() => Promise<void>`	Remove focus from the switch.
`reportValidity`	`reportValidity() => Promise<boolean>`	Validate, reveal any problem, and focus the switch if it has one.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focus the switch.
`toggle`	`toggle() => Promise<void>`	Move the switch, as a click would. Does nothing while it is disabled.

Slots

Slot	Description
`description`	Rich help text, in place of the `description` property.
`label`	Rich caption content, in place of the `label` property.

CSS shadow parts

Part	Description
`base`	The row holding the track, the state text and the caption.
`box`	The wrapper around the control and the drawn track.
`control`	The native checkbox carrying `role="switch"`.
`description`	The help text.
`error`	The error message.
`label`	The caption.
`state`	The on/off text, when `checked-text` or `unchecked-text` is set.
`thumb`	The part of the track that moves.
`track`	The drawn track.

CSS custom properties

Property	Description
`--bmx-switch-background`	The track's background when off.
`--bmx-switch-checked-background`	The track's background when on. Defaults to the tone's solid colour.
`--bmx-switch-duration`	How long the thumb takes to travel. Zero under reduced motion.
`--bmx-switch-font-size`	The caption's font size.
`--bmx-switch-gap`	Space between the track, the state text and the caption.
`--bmx-switch-height`	The track's height. The clickable target stays at least 24px regardless.
`--bmx-switch-padding`	Space between the thumb and the inside of the track.
`--bmx-switch-support-font-size`	Font size of the description and error message.
`--bmx-switch-thumb-color`	The thumb's colour.
`--bmx-switch-thumb-shadow`	The thumb's shadow, which is what lifts it off the track.
`--bmx-switch-width`	The track's width.

`<bmx-tab-panel>`

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	Whether this is the panel currently showing. Set by `bmx-tabs`, and reflected so a stylesheet can reach it. It is the parent's to write: a panel that made itself active would leave the strip showing a different tab as selected.
`badge`	`badge`	`string`	—	A short count or status, rendered after the label on the tab.
`disabled`	`disabled`	`boolean`	`false`	Whether the tab can be chosen.
`icon`	`icon`	`string`	—	An inline SVG string, rendered before the label on the tab.
`label`	`label`	`string`	—	The text on this panel's tab.
`value`	`value`	`string`	—	What this panel is identified by in `value` and in the event. Optional: it falls back to the label and then to the panel's position, so a set of panels written with labels alone still switches, and still reports something a consumer can distinguish.

Slots

Slot	Description
`(default)`	The panel's content.

CSS shadow parts

Part	Description
`base`	The panel itself.

CSS custom properties

Property	Description
`--bmx-tab-panel-display`	How an active panel lays its content out. Block by default.

`<bmx-tabs>`

Properties

Property	Attribute	Type	Default	Description
`activation`	`activation`	`BmxPanelActivation`	`'auto'`	Whether the arrows choose as they move, or only move.
`appearance`	`appearance`	`BmxTabsAppearance`	`'underline'`	How the strip is drawn.
`label`	`label`	`string`	`'Tabs'`	The tab list's accessible name.
`orientation`	`orientation`	`BmxOrientation`	`'horizontal'`	Which way the strip runs. Vertical moves on Up and Down instead.
`size`	`size`	`BmxSize`	`'md'`	Size step, applied to the tabs.
`stretch`	`stretch`	`boolean`	`false`	Whether the tabs share the strip's width equally.
`value`	`value`	`string`	—	The panel showing, by value. Mutable, so pressing a tab updates it. A consumer driving it may treat it as controlled and watch `bmxChange`. A value naming a panel that does not exist - or one that has been removed, or disabled - falls back to the first panel that can be shown rather than leaving the component blank.

Events

Event	Detail	Description
`bmxChange`	`BmxTabsChangeDetail`	Fired when a different panel is chosen.

Methods

Method	Signature	Description
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focus the selected tab.
`showPanel`	`showPanel(value: string) => Promise<void>`	Show a panel by value. Ignored if nothing has that value, or it is disabled.

Slots

Slot	Description
`(default)`	`bmx-tab-panel` elements.

CSS shadow parts

Part	Description
`panels`	The region the panels are shown in.
`tab`	One tab. The selected one also matches `tab-selected`.
`tab-badge`	The badge within a tab.
`tab-icon`	The icon within a tab.
`tab-label`	The label within a tab.
`tab-selected`	The selected tab.
`tablist`	The strip of tabs.

CSS custom properties

Property	Description
`--bmx-tab-color`	A tab's text colour when it is not selected.
`--bmx-tab-indicator-size`	Thickness of the line marking the selected tab.
`--bmx-tab-padding-block`	Space inside a tab, down.
`--bmx-tab-padding-inline`	Space inside a tab, across.
`--bmx-tab-radius`	Corner radius of a tab, in the pill and enclosed appearances.
`--bmx-tab-selected-color`	A tab's text colour when it is.
`--bmx-tabs-gap`	Space between one tab and the next.
`--bmx-tabs-panel-padding`	Space between the strip and the panel below it.

`<bmx-task-board>`

Properties

Property	Attribute	Type	Default	Description
`applyChanges`	`apply-changes`	`boolean`	`true`	Whether a move is applied by the board itself. Off to own the list entirely.
`canMove`	property only	`(detail: BmxTaskBoardMoveDetail) => boolean`	—	Whether a move may be made, asked while a card is carried. A function, set from script.
`columns`	`columns`	`(string \| BmxBoardColumn)[] \| string`	`[]`	The columns, as `status` values in order: `columns="To do,In progress,Done"`, or objects with a `label` and a `limit` from script. Left empty, the statuses the tasks use are the columns.
`editable`	`editable`	`boolean`	`false`	Lets the reader move cards.
`holidays`	`holidays`	`string[] \| string`	`[]`	Dates that are not worked, `YYYY-MM-DD`.
`label`	`label`	`string`	—	What the board is called. Without one it is announced as "Task board".
`laneBy`	`lane-by`	`BmxBoardLaneBy`	`'none'`	What the rows of the board are: `none`, `assignee`, `category` or `parent` (the phase).
`links`	`links`	`BmxTaskLink[] \| string`	`[]`	The links between tasks, which decide each card's dates and whether it is critical.
`locale`	`locale`	`string`	—	The locale dates are written in. Defaults to the page's.
`projectStart`	`project-start`	`string`	—	The first day work can happen, `YYYY-MM-DD`.
`showDates`	`show-dates`	`boolean`	`true`	Shows each card's dates.
`strictLimits`	`strict-limits`	`boolean`	`false`	Refuses a card to a column that is at its limit.
`tasks`	`tasks`	`BmxTask[] \| string`	`[]`	The tasks - the same list `bmx-gantt` takes. Summaries are not cards.
`workingDays`	`working-days`	`number[] \| string`	`[1, 2, 3, 4, 5]`	Days of the week that are worked, 0 for Sunday.

Events

Event	Detail	Description
`bmxCardMove`	`BmxTaskBoardMoveDetail`	A card is about to move. Cancelable.
`bmxSelect`	`BmxTaskBoardSelectDetail`	A card was chosen.

Methods

Method	Signature	Description
`focusCard`	`focusCard(id: string) => Promise<void>`	Focuses a card.
`getSchedule`	`getSchedule() => Promise<BmxSchedule>`	The plan as scheduled.
`moveCard`	`moveCard(id: string, column: string, lane?: string, index?: number) => Promise<boolean>`	Moves a card from script, as if the reader had; returns whether it moved.

Slots

Slot	Description
`empty`	what to draw when there are no tasks.

CSS shadow parts

Part	Description
`board`
`card-assignee`
`card-category`
`card-critical-badge`
`card-dates`
`card-ghost`
`card-name`
`card-progress`
`card-wbs`
`column-count`
`empty`
`lane`
`lane-header`
`placeholder`

CSS custom properties

Property	Description
`--bmx-board-card-background`	A card's fill.
`--bmx-board-card-border`	Its border.
`--bmx-board-card-color`	Its text.
`--bmx-board-card-radius`	Its corners.
`--bmx-board-card-shadow`	Its shadow.
`--bmx-board-column-background`	A column's fill.
`--bmx-board-column-width`	The narrowest a column may be.
`--bmx-board-columns`	How many columns there are. Written by the component.
`--bmx-board-critical-color`	The mark on a critical card.
`--bmx-board-header-color`	Column and lane headings.
`--bmx-board-over-color`	A column's count once it passes its limit.
`--bmx-board-progress-color`	The progress meter.
`--bmx-board-target-color`	The outline of the cell a card would land in. @part board - the whole board (`role="region"`). @part column-header - a column's heading. Also `column-header-over`. @part column-count - its count, against its limit when it has one. @part lane - one row of the board. @part lane-header - a lane's heading. @part cell - one lane-and-column cell (`role="list"`). Also `cell-target`. @part card - one card. Also `card-critical`, `card-carried` and `card-<category>`. @part card-wbs - the outline number. @part card-category - the category chip. @part card-critical-badge - the "Critical" chip. @part card-name - the task's name. @part card-dates - its dates. @part card-assignee - the assignee's initials. @part card-progress - the progress meter. @part placeholder - where a dragged card would land. @part card-ghost - the copy that follows the pointer. @part empty - what is drawn when there are no tasks.

`<bmx-terminal>`

Properties

Property	Attribute	Type	Default	Description
`appearance`	`appearance`	`'dark' \| 'light'`	`'dark'`	The colour scheme: dark or light. Every colour is a custom property and can be themed.
`bell`	`bell`	`'visual' \| 'none'`	`'visual'`	What a bell (BEL) does: flash the terminal, or nothing. `bmxBell` fires either way.
`cols`	`cols`	`number`	—	Fixed columns. Default: as many as fit the element's width.
`convertEol`	`convert-eol`	`boolean`	`false`	Treat `\n` as a new line (carriage return and line feed), for plain text that is not from a terminal program.
`copyOnSelect`	`copy-on-select`	`boolean`	`false`	Copy the selection as soon as it is made.
`cursorBlink`	`cursor-blink`	`boolean`	`true`	Blink the cursor (never with reduced motion).
`cursorStyle`	`cursor-style`	`BmxTerminalCursorShape`	`'block'`	The cursor's shape, until a program asks for another.
`fontSize`	`font-size`	`number`	`14`	Text size in pixels. Two-way (the toolbar's larger and smaller buttons change it).
`hideLabel`	`hide-label`	`boolean`	`true`	Hide the label visually while keeping it as the accessible name.
`label`	`label`	`string`	—	The terminal's name for assistive technology, and the toolbar's title until a program sets one.
`lineHeight`	`line-height`	`number`	`1.25`	Line height as a multiple of the text size.
`readonly`	`readonly`	`boolean`	`false`	Show output only; nothing typed is sent.
`rows`	`rows`	`number`	—	Fixed rows. Default: as many as fit the element's height (`--bmx-terminal-height`).
`screenReaderMode`	`screen-reader-mode`	`boolean`	`false`	Read new output aloud as it arrives (throttled).
`scrollback`	`scrollback`	`number`	`5000`	Lines kept above the screen.
`strings`	`strings`	`Partial<BmxTerminalStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`tabMovesFocus`	`tab-moves-focus`	`boolean`	`false`	Let Tab and Shift+Tab move focus out of the terminal instead of going to the program. Two-way (Ctrl+Shift+M).
`toolbar`	`toolbar`	`boolean`	`true`	Show the toolbar (title, search, copy, paste, clear, text size).

Events

Event	Detail	Description
`bmxBell`	`void`	A program rang the bell.
`bmxData`	`BmxTerminalDataDetail`	Input for the program: keys, pastes, mouse and focus reports, and replies to its requests.
`bmxLinkActivate`	`BmxTerminalLinkDetail`	A link is being opened. Cancel it to open it yourself, or not at all.
`bmxResize`	`BmxTerminalResizeDetail`	The size in cells changed: tell the program (a pseudo-terminal resize).
`bmxTitleChange`	`{ readonly title: string; }`	A program set the window title.

Methods

Method	Signature	Description
`clear`	`clear() => Promise<void>`	Clears the screen and the scrollback, keeping the line the cursor is on.
`clearSelection`	`clearSelection() => Promise<void>`	Clears the selection.
`find`	`find(query: string, options?: BmxTerminalSearchOptions) => Promise<number>`	Searches the output and selects the first match from the bottom; returns how many there are.
`findNext`	`findNext() => Promise<boolean>`
`findPrevious`	`findPrevious() => Promise<boolean>`
`fit`	`fit() => Promise<BmxTerminalResizeDetail>`	Fits the columns and rows to the element's box now; returns the size.
`getDimensions`	`getDimensions() => Promise<BmxTerminalResizeDetail & { cellWidth: number; cellHeight: number; }>`	The size in cells.
`getModes`	`getModes() => Promise<BmxTerminalModes>`	The modes the program has set: cursor keys, bracketed paste, mouse reporting, the alternate screen.
`getSelection`	`getSelection() => Promise<string>`	The selected text, or ''.
`getText`	`getText(options?: { screenOnly?: boolean; }) => Promise<string>`	The output as plain text, wrapped lines joined: the scrollback and the screen, or the screen alone.
`paste`	`paste(text: string) => Promise<void>`	Sends text as if it were pasted (bracketed when the program asked for that).
`reset`	`reset() => Promise<void>`	Back to how it started: screen, scrollback, modes and colours.
`resize`	`resize(cols: number, rows: number) => Promise<void>`	Sets a fixed size in cells: the same as setting `cols` and `rows`.
`scrollLines`	`scrollLines(n: number) => Promise<void>`	Scrolls by `n` lines (negative is up).
`scrollToBottom`	`scrollToBottom() => Promise<void>`
`scrollToTop`	`scrollToTop() => Promise<void>`
`selectAll`	`selectAll() => Promise<void>`	Selects everything drawn.
`setFocus`	`setFocus() => Promise<void>`	Moves focus to the terminal.
`write`	`write(data: string \| Uint8Array \| ArrayBuffer) => Promise<void>`	Output from the program: text, or UTF-8 bytes (decoded as a stream, so a character split across writes is kept whole).
`writeln`	`writeln(text?: string) => Promise<void>`	Writes a line of text and a new line.

Slots

Slot	Description
`label`	Rich label content, in place of the `label` property.

CSS shadow parts

Part	Description
`cursor`	The cursor.
`label`	The label.
`search`	The search bar.
`toolbar`	The bar above the output.
`viewport`	The scrolling output.

CSS custom properties

Property	Description
`--bmx-terminal-ansi-0`	Black (and 1 red, 2 green, 3 yellow, 4 blue, 5 magenta, 6 cyan, 7 white; 8 to 15 the bright ones).
`--bmx-terminal-background`	Behind the text.
`--bmx-terminal-cursor`	The cursor's colour.
`--bmx-terminal-font-family`	The typeface; a fixed-width one.
`--bmx-terminal-foreground`	The default text colour.
`--bmx-terminal-height`	The output's height, when `rows` is not set.
`--bmx-terminal-match`	A search match's background.
`--bmx-terminal-match-current`	The current search match's background.
`--bmx-terminal-padding`	Space around the text.
`--bmx-terminal-radius`	Corner radius of the frame.
`--bmx-terminal-selection`	The selection's background.
`--bmx-terminal-toolbar-background`	The toolbar and search bar.

`<bmx-textarea>`

Properties

Property	Attribute	Type	Default	Description
`appearance`	`appearance`	`BmxTextareaAppearance`	`'outline'`	Visual treatment.
`autoFocus`	`auto-focus`	`boolean`	`false`	Focus the field once it has rendered.
`autocomplete`	`autocomplete`	`string`	—	Autocomplete hint.
`autosize`	`autosize`	`boolean`	`true`	Grow with the content. On by default, because the alternative is the behaviour everybody immediately writes JavaScript to replace. Turn it off for a fixed box the user resizes themselves.
`counter`	`counter`	`boolean`	`false`	Show a character counter. Pairs with `maxLength`.
`description`	`description`	`string`	—	Help text below the field.
`disabled`	`disabled`	`boolean`	`false`	Disable the field.
`errorText`	`error-text`	`string`	—	An error supplied by the consumer - a server response, typically.
`fullWidth`	`full-width`	`boolean`	`true`	Stretch to the width of the container. On by default: text wants room.
`hideLabel`	`hide-label`	`boolean`	`false`	Hide the label visually while keeping it for assistive technology.
`label`	`label`	`string`	—	The field's label. Required unless the `label` slot is used.
`maxLength`	`max-length`	`number`	—	Maximum length, in characters rather than UTF-16 code units. Enforced here rather than by the native attribute, which counts code units and would cut a user off at fifty emoji on a limit of a hundred while the counter still read fifty. Also drives the counter's limit.
`maxRows`	`max-rows`	`number`	—	Never taller than this many rows. Beyond it the control scrolls.
`messages`	property only	`BmxFieldMessages`	—	Replacements for the default wording, by reason. Accepts the JSON spelling of the object as well, for templates that can only write attributes. See `src/core/markup.ts`.
`minLength`	`min-length`	`number`	—	Minimum length, in characters.
`minRows`	`min-rows`	`number`	`3`	Never shorter than this many rows.
`name`	`name`	`string`	—	The field's name in the form it belongs to.
`placeholder`	`placeholder`	`string`	—	Placeholder text. Never a substitute for a label.
`readonly`	`readonly`	`boolean`	`false`	Make the field read-only. It still submits and is still focusable.
`required`	`required`	`boolean`	`false`	Require a value.
`resize`	`resize`	`BmxTextareaResize`	`'vertical'`	The control's own resize handle. `vertical` by default rather than `both`: a textarea dragged wider than its container is the fastest way to break a form layout, and it is the one direction autosizing does not already handle. Forced to `none` while `autosize` is on, since the two fight over the same property.
`shape`	`shape`	`BmxShape`	`'rounded'`	Corner treatment. `pill` and `circle` are not meaningful on a block.
`size`	`size`	`BmxSize`	`'md'`	Size step.
`spellcheck`	`spellcheck`	`boolean`	`true`	Spellchecking. On by default here, unlike `bmx-input`: this holds prose.
`tone`	`tone`	`BmxTone`	`'primary'`	Semantic colour role, used for the focus ring. An error overrides it.
`validateOn`	`validate-on`	`BmxValidateOn`	`'blur'`	When the field is willing to reveal a problem.
`validator`	property only	`BmxAsyncCheck`	—	A consumer's own check, run once the value is structurally whole.
`value`	`value`	`string`	`''`	The text in the control.
`wrap`	`wrap`	`'hard' \| 'soft' \| 'off'`	`'soft'`	Wrapping behaviour, as the native attribute takes it.

Events

Event	Detail	Description
`bmxBlur`	`void`	Fired when the field loses focus.
`bmxChange`	`BmxTextareaChangeDetail`	Fired when the field is committed - on blur.
`bmxFocus`	`void`	Fired when the field gains focus.
`bmxInput`	`BmxTextareaChangeDetail`	Fired on every edit.
`bmxValidityChange`	`BmxTextareaValidityDetail`	Fired whenever the resolved validity changes.

Methods

Method	Signature	Description
`checkValidity`	`checkValidity() => Promise<boolean>`	Validate now and return whether the field passed, without revealing it.
`clear`	`clear() => Promise<void>`	Empty the field.
`refreshSize`	`refreshSize() => Promise<void>`	Recompute the height now. For a value written around the component.
`removeFocus`	`removeFocus() => Promise<void>`	Remove focus from the field.
`reportValidity`	`reportValidity() => Promise<boolean>`	Validate, reveal any problem, and focus the field if it has one.
`selectAll`	`selectAll() => Promise<void>`	Select the field's contents.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focus the field.

Slots

Slot	Description
`description`	Rich help text, in place of the `description` property.
`label`	Rich label content, in place of the `label` property.

CSS shadow parts

Part	Description
`control`	The native textarea.
`counter`	The character counter.
`description`	The help text.
`error`	The error message.
`field`	The bordered box holding the textarea.
`label`	The label element.
`spinner`

CSS custom properties

Property	Description
`--bmx-textarea-background`	The field's background. Set by `appearance`; override for a one-off.
`--bmx-textarea-border-color`	The field's border colour in its resting state.
`--bmx-textarea-border-width`	Border width of the field.
`--bmx-textarea-font-size`	The value's font size.
`--bmx-textarea-label-font-size`	The label's font size.
`--bmx-textarea-line-height`	Line height of the text. Also the row unit that minRows and maxRows count.
`--bmx-textarea-padding-block`	Vertical padding inside the field.
`--bmx-textarea-padding-inline`	Horizontal padding inside the field.
`--bmx-textarea-placeholder-color`	Placeholder colour. Dimmer than the value, and still AA against the field.
`--bmx-textarea-radius`	Corner radius of the field.
`--bmx-textarea-stack-gap`	Space between the label, the field and the supporting text.
`--bmx-textarea-support-font-size`	Font size of the description, error and counter.

`<bmx-timeline>`

Properties

Property	Attribute	Type	Default	Description
`cluster`	`cluster`	`boolean`	`true`	Rows too crowded to stack gather their items into clusters.
`editable`	`editable`	`boolean`	`false`	The reader may move, resize, add (double-click) and delete items. An item with `editable: false` stays put.
`end`	`end`	`number \| string \| Date`	—	The end of the window in view.
`groups`	`groups`	`BmxTimelineGroup[] \| string`	—	The rows: `[{ id, content, parent, collapsed }]`, as a property or JSON. Without groups, everything is in one row.
`items`	`items`	`BmxTimelineItem[] \| string`	—	The items: `[{ id, content, start, end, group, type, color, title }]`, as a property or JSON.
`label`	`label`	`string`	—	What the timeline shows: its accessible name.
`locale`	`locale`	`string`	—	A BCP 47 locale for times. Default: the page's `lang`.
`markers`	`markers`	`BmxTimelineMarker[] \| string`	—	Lines at moments: `[{ time, label, color }]`, as a property or JSON.
`max`	`max`	`number \| string \| Date`	—	The latest time the reader may move to.
`maxLanes`	`max-lanes`	`number`	`6`	The most lanes a row stacks into before it clusters.
`min`	`min`	`number \| string \| Date`	—	The earliest time the reader may move to.
`selectable`	`selectable`	`'none' \| 'single' \| 'multiple'`	`'single'`	Items the reader can select: `none`, `single` (default) or `multiple`.
`selected`	`selected`	`string[] \| string`	`[]`	The selected items' ids. Changes write back here.
`showNow`	`show-now`	`boolean`	`true`	Show a line at the current time.
`snap`	`snap`	`'auto' \| 'none'`	`'auto'`	While moving and resizing, times snap to the axis's step (`auto`), or not (`none`). Alt held does not snap.
`stack`	`stack`	`boolean`	`true`	Overlapping items are stacked; otherwise they overlap.
`start`	`start`	`number \| string \| Date`	—	The start of the window in view: a time as items take it. Default: the items' extent.
`strings`	`strings`	`Partial<BmxTimelineStrings> \| string`	—	Replacements for the timeline's wording, as a property or JSON.
`tableView`	`table-view`	`boolean`	`true`	Offer the table view.
`timeZone`	`time-zone`	`string`	—	The time zone times are read and shown in (an IANA name). Default: the reader's.
`zoomMax`	`zoom-max`	`number`	`3.15576e14`	The widest window, in milliseconds (default ten thousand years).
`zoomMin`	`zoom-min`	`number`	`10`	The narrowest window, in milliseconds.

Events

Event	Detail	Description
`bmxTimelineChange`	`BmxTimelineChangeDetail`	An item was added, moved, resized or removed by the reader. Cancelable: cancelling undoes it.
`bmxTimelineGroupToggle`	`BmxTimelineGroupDetail`	A group was opened or closed.
`bmxTimelineItemClick`	`BmxTimelineItemDetail`	An item was clicked, or chosen with the keyboard.
`bmxTimelineRangeChange`	`BmxTimelineRangeDetail`	The window in view moved or zoomed.
`bmxTimelineSelect`	`BmxTimelineSelectDetail`	Items were selected or unselected.

Methods

Method	Signature	Description
`addItem`	`addItem(item: BmxTimelineItem) => Promise<void>`	Adds an item (or replaces the one with its id).
`fit`	`fit(ids?: string[]) => Promise<void>`	Shows every item (or the ones given).
`focusItem`	`focusItem(id: string, select?: boolean) => Promise<void>`	Brings an item into view and makes it the current one (and selects it when `select`).
`getDensity`	`getDensity(bins?: number, start?: number, end?: number) => Promise<number[]>`	How many items overlap each of `bins` equal steps from `start` to `end` (the items' extent by default).
`getExtent`	`getExtent() => Promise<BmxTimelineRangeDetail \| null>`	The earliest start and latest end of the items, or null when there are none.
`getItems`	`getItems() => Promise<BmxTimelineItem[]>`	Every item as it now is, with the reader's changes, in the shapes the page gave.
`getWindow`	`getWindow() => Promise<BmxTimelineRangeDetail>`	The window in view, in milliseconds.
`moveTo`	`moveTo(time: unknown, animate?: boolean) => Promise<void>`	Centres the view on a time, keeping the zoom.
`removeItem`	`removeItem(id: string) => Promise<void>`	Takes an item out.
`setGroupCollapsed`	`setGroupCollapsed(id: string, collapsed: boolean) => Promise<void>`	Opens or closes a group (`collapsed` true closes it).
`setWindow`	`setWindow(start: unknown, end: unknown, animate?: boolean) => Promise<void>`	Moves the view to a window of time. `animate` eases there.
`updateItem`	`updateItem(id: string, changes: Partial<BmxTimelineItem>) => Promise<void>`	Changes an item's fields.

CSS shadow parts

Part	Description
`axis`	the time axis.
`cluster`	a cluster of items.
`controls`	the zoom, fit, now and table buttons.
`item`	an item.
`labels`	the group names.
`marker`	a marker line.
`now`	the line at the current time.
`table`	the table view.

CSS custom properties

Property	Description
`--bmx-timeline-background`	A background span's colour.
`--bmx-timeline-height`	How tall the rows' area is. Default: as tall as the rows, up to the maximum.
`--bmx-timeline-item`	An item's colour (each item's own `color` stands over it).
`--bmx-timeline-label-width`	The width of the group names. Default: 11rem.
`--bmx-timeline-marker`	A marker line.
`--bmx-timeline-max-height`	The most the rows' area grows to before it scrolls. Default: 26rem.
`--bmx-timeline-now`	The line at the current time.

`<bmx-timeline-navigator>`

Properties

Property	Attribute	Type	Default	Description
`bins`	`bins`	`number`	`80`	How many bars the histogram has.
`endLabel`	`end-label`	`string`	`'End of the range in view'`	The end of the window in words, for its slider.
`for`	`for`	`string`	—	The id of the `bmx-timeline` to steer. Default: the only timeline beside the navigator.
`label`	`label`	`string`	`'Time range in view'`	Its accessible name.
`startLabel`	`start-label`	`string`	`'Start of the range in view'`	The start of the window in words, for its slider.

CSS shadow parts

Part	Description
`handle`	an edge of the window.
`histogram`	the bars counting items along the strip.
`window`	the part in view.

CSS custom properties

Property	Description
`--bmx-timeline-navigator-height`	How tall the strip is. Default: 3rem.

`<bmx-timeseries>`

Properties

Property	Attribute	Type	Default	Description
`anomalies`	`anomalies`	`boolean`	`false`	Mark anomalies: points far from the points around them.
`anomalyThreshold`	`anomaly-threshold`	`number`	`4`	How many standard deviations from that mean is an anomaly.
`anomalyWindow`	`anomaly-window`	`number`	`60`	How many neighbouring points (half each side) an anomaly is judged against.
`compare`	`compare`	`BmxTsCompare`	`'off'`	Draw the same window from earlier behind each series.
`decimation`	`decimation`	`'auto' \| 'lttb' \| 'none'`	`'auto'`	How lines are thinned: `auto` (per pixel column, exact extremes), `lttb` (smoother) or `none` (every point).
`end`	`end`	`number \| string`	—	The end of the window shown. Unset: the end of the data.
`events`	`events`	`Partial<BmxTsEvent>[] \| string`	—	Moments and spans to mark: `{ time, end?, label, tone?, description? }`.
`fileName`	`file-name`	`string`	`'timeseries'`	The name exported files are saved under, without the extension.
`follow`	`follow`	`boolean`	`false`	Keep the window's end at the newest point as data is appended.
`label`	`label`	`string`	—	The element's accessible name.
`locale`	`locale`	`string`	—	The language for numbers and dates (the page's when unset).
`maxPoints`	`max-points`	`number`	`0`	The most points each series keeps (oldest dropped first); 0 keeps everything.
`panes`	`panes`	`Partial<BmxTsPane>[] \| string`	—	The panes, top to bottom (any a series names are added).
`presets`	`presets`	`string`	`'1h,1d,7d,30d,all'`	The quick ranges offered, comma-separated: `15m`, `1h`, `1d`, `7d`, `3mo`, `1y`, `all`.
`series`	`series`	`BmxTsSeriesInput[] \| string`	—	The series: definitions with their points (columns, typed arrays, pairs or objects), or JSON.
`showOverview`	`show-overview`	`boolean`	`true`	Show the overview under the chart.
`showStats`	`show-stats`	`boolean`	`true`	Show the figures table under the chart.
`start`	`start`	`number \| string`	—	The start of the window shown (epoch ms or ISO). Unset: the start of the data.
`strings`	`strings`	`Partial<BmxTimeseriesStrings> \| string`	—	Replacements for any of the wording (an object, or its JSON).
`thresholds`	`thresholds`	`Partial<BmxTsThreshold>[] \| string`	—	Lines and bands at values: `{ value, to?, pane?, label?, tone?, axis? }`.
`zone`	`zone`	`string`	—	The time zone times are shown in (an IANA name; the reader's own when unset).

Events

Event	Detail	Description
`bmxCursorMove`	`BmxTsCursorDetail`	Fired when the cursor moves, with every series' reading.
`bmxEventSelect`	`BmxTsEventDetail`	Fired when an event's flag is chosen (or the choice cleared).
`bmxRangeChange`	`BmxTsRangeDetail`	Fired when the window moves or zooms.
`bmxSeriesToggle`	`BmxTsToggleDetail`	Fired when a series is shown or hidden.

Methods

Method	Signature	Description
`appendPoints`	`appendPoints(id: string, times: ArrayLike<number \| string> \| ArrayLike<unknown>, values?: ArrayLike<number \| string \| null>) => Promise<number>`	Adds points to a series: two columns, or `[time, value]` pairs. Returns how many were added.
`download`	`download(kind?: "png" \| "csv" \| "csv-averaged") => Promise<void>`	Saves a picture or CSV.
`exportCsv`	`exportCsv(options?: { start?: number; end?: number; interval?: number; aggregate?: BmxTsAggregate; all?: boolean; }) => Promise<string>`	The visible series as CSV: every point in the window, or averaged (or otherwise summed up) every `interval` ms.
`exportPng`	`exportPng() => Promise<Blob \| null>`	The chart as a PNG picture, with its title and legend.
`getAnomalies`	`getAnomalies(id: string) => Promise<BmxTsSpan[]>`	A series' anomalies, with the element's settings.
`getPointCount`	`getPointCount() => Promise<{ total: number; series: Record<string, number>; }>`	How many points each series holds, and in all.
`getRange`	`getRange() => Promise<{ start: number; end: number; }>`	The window shown.
`getReadings`	`getReadings(time: number \| string) => Promise<BmxTsReading[]>`	Every visible series' reading nearest a time.
`getStats`	`getStats(id: string, start?: number \| string, end?: number \| string) => Promise<BmxTsStats \| null>`	Figures for a series over a range (the window when unset).
`resetZoom`	`resetZoom() => Promise<void>`	Shows all the data.
`setCursor`	`setCursor(time: number \| string \| null) => Promise<void>`	Puts the cursor at a time, or takes it away with null.
`setRange`	`setRange(start: number \| string, end: number \| string) => Promise<void>`	Shows a window (epoch ms or ISO).
`setSeriesData`	`setSeriesData(id: string, times: ArrayLike<number \| string>, values: ArrayLike<number \| string \| null>) => Promise<void>`	Replaces a series' points.
`zoom`	`zoom(factor: number, around?: number) => Promise<void>`	Zooms by a factor (2 shows half as much) around a time (the middle when unset).

CSS shadow parts

Part	Description
`legend`	The series list.
`overview`	The overview and its window.
`plot`	The chart.
`stats`	The figures table.
`toolbar`	The tools along the top.

CSS custom properties

Property	Description
`--bmx-timeseries-color-0`	The first series, unless it names its own colour. Colours 0 to 9 are used in turn.
`--bmx-timeseries-color-1`	The second series.
`--bmx-timeseries-color-2`	The third series.
`--bmx-timeseries-color-3`	The fourth series.
`--bmx-timeseries-color-4`	The fifth series.
`--bmx-timeseries-color-5`	The sixth series.
`--bmx-timeseries-color-6`	The seventh series.
`--bmx-timeseries-color-7`	The eighth series.
`--bmx-timeseries-color-8`	The ninth series.
`--bmx-timeseries-color-9`	The tenth series.
`--bmx-timeseries-cursor`	The cursor line.
`--bmx-timeseries-grid`	Grid lines and frames.
`--bmx-timeseries-height`	The chart's height (all panes and the time axis).
`--bmx-timeseries-overview-height`	The overview's height.
`--bmx-timeseries-radius`	Corner radius of the frame.

`<bmx-toast>`

Properties

Property	Attribute	Type	Default	Description
`closeLabel`	`close-label`	`string`	`'Dismiss'`	The dismiss button's accessible name.
`closeOnAction`	`close-on-action`	`boolean`	`true`	Whether pressing the action closes the toast.
`dismissible`	`dismissible`	`boolean`	`true`	Whether to draw the dismiss button.
`duration`	`duration`	`number`	—	How long it stays, in milliseconds. Zero or less keeps it until dismissed. Left unset it is five seconds, ten for a toast carrying an action - which has to be read, decided on and then reached - and sticky for an `alert`.
`heading`	`heading`	`string`	—	A short bold line above the message.
`hideIcon`	`hide-icon`	`boolean`	`false`	Whether the tone's own glyph is drawn when nothing fills the icon slot.
`limit`	`limit`	`number`	`3`	How many toasts this corner shows at once. A property of the corner rather than of this toast, carried here because there is no region element for a consumer to configure. The value on whichever toast is opening is the one that applies, which is harmless in practice: an application sets these once, in the helper that creates its toasts, so every toast in a corner carries the same pair.
`open`	`open`	`boolean`	`false`	Whether the toast is asking to be on screen. Asking, rather than being: a corner already showing its limit holds this one back until a slot frees, and `open` stays true throughout - it is what the consumer asked for, and the component reports what actually happened through `bmxOpenChange`.
`position`	`position`	`BmxToastPosition`	`'bottom-end'`	Which corner it appears in. `start` and `end` mirror under RTL.
`priority`	`priority`	`BmxToastPriority`	`'status'`	How it is announced: politely, or by interrupting. `alert` is for the cases where not knowing is worse than being interrupted. It also makes the toast sticky by default.
`queueLimit`	`queue-limit`	`number`	`8`	How many may wait behind them before the oldest waiting one is dropped.
`tone`	`tone`	`BmxTone`	`'neutral'`	The semantic colour. Chosen by meaning, not by colour.

Events

Event	Detail	Description
`bmxAction`	`void`	Fired when the action was pressed, before the toast starts to leave.
`bmxClose`	`BmxToastCloseDetail`	Fired once it has finished leaving, with why it went.
`bmxOpenChange`	`boolean`	Fired when the toast reaches the screen, and when it has left it.

Methods

Method	Signature	Description
`hide`	`hide() => Promise<void>`	Hide it, whatever it is currently doing.
`show`	`show() => Promise<void>`	Show it.

Slots

Slot	Description
`(default)`	The message.
`action`	One control: Undo, Retry, View.
`heading`	A short bold line above it.
`icon`	Replaces the tone's own glyph.

CSS shadow parts

Part	Description
`action`	The wrapper around the action slot.
`close`	The dismiss button.
`content`	Heading and message together.
`heading`	The bold line.
`icon`	The glyph beside the message.
`message`	The message itself.
`surface`	The box, and the live region.

CSS custom properties

Property	Description
`--bmx-toast-accent`	The bar down the leading edge, and the icon's colour. Follows the tone by default.
`--bmx-toast-background`	The box's background.
`--bmx-toast-border-color`	Its border. Carries the shape under forced colours.
`--bmx-toast-color`	Its text colour.
`--bmx-toast-font-size`	The message's text size.
`--bmx-toast-gap`	Space between the icon, the message and the action.
`--bmx-toast-inline-size`	The box's width. It is a fixed width rather than a maximum, so a stack of them has one edge.
`--bmx-toast-inset`	How far the stack sits from the edges of the viewport.
`--bmx-toast-padding-block`	Space above and below the content.
`--bmx-toast-padding-inline`	Space either side of it.
`--bmx-toast-radius`	The corner radius.
`--bmx-toast-shadow`	The shadow under the box.
`--bmx-toast-z-index`	Only used on a browser with no top layer, where the stack has to be given one by hand.

`<bmx-toolbar>`

Properties

Property	Attribute	Type	Default	Description
`collapse`	`collapse`	`'auto' \| 'never'`	`'auto'`	Whether items that do not fit move into a menu. `never` leaves the bar to overflow however the page's CSS says it should - which is the right answer when the toolbar is inside something that already scrolls.
`label`	`label`	`string`	`'Toolbar'`	The toolbar's accessible name.
`menuLabel`	`menu-label`	`string`	`'More'`	The overflow button's accessible name.
`orientation`	`orientation`	`BmxOrientation`	`'horizontal'`	Which way the bar runs.
`wrapFocus`	`wrap-focus`	`boolean`	`true`	Whether the arrows wrap from one end of the bar to the other.

Events

Event	Detail	Description
`bmxSelect`	`BmxToolbarSelectDetail`	Fired when an item is chosen from the overflow menu.

Methods

Method	Signature	Description
`refresh`	`refresh() => Promise<void>`	Re-measure now. Rarely needed: a resize and a change of children are watched.
`setFocus`	`setFocus() => Promise<void>`	Focus the toolbar, landing on whichever item holds its tab stop.

Slots

Slot	Description
`(default)`	The toolbar's controls, and `<hr>` elements as dividers.

CSS shadow parts

Part	Description
`base`	The bar.
`menu`	The overflow menu's surface.
`trigger`	The overflow button.

CSS custom properties

Property	Description
`--bmx-toolbar-background`	The bar's background.
`--bmx-toolbar-border-color`	The bar's border, and the dividers on it.
`--bmx-toolbar-gap`	Space between one item and the next.
`--bmx-toolbar-padding`	Space inside the bar.
`--bmx-toolbar-radius`	Corner radius of the bar.
`--bmx-toolbar-separator-inset`	How far a divider stops short of the bar's edges.

`<bmx-tooltip>`

Properties

Property	Attribute	Type	Default	Description
`closeDelay`	`close-delay`	`number`	`150`	How long it stays after the last thing letting go. The bridge the pointer crosses.
`content`	`content`	`string`	—	The text. Use the default slot instead when it needs markup.
`disabled`	`disabled`	`boolean`	`false`	Nothing opens it, and the description stays on the anchor.
`distance`	`distance`	`number`	`8`	Gap between the anchor and the box, in pixels.
`for`	`for`	`string \| HTMLElement`	—	What it describes: a selector, or the element itself. Left off, the anchor is the element immediately before this one, which is what the markup above already reads like. A selector is resolved against this component's own root first, so a tooltip inside somebody else's shadow tree can still name its anchor.
`hoverable`	`hoverable`	`boolean`	`true`	Whether the pointer may move into the tooltip without closing it. On, because SC 1.4.13 requires it. Turning it off makes a long tooltip unreadable to anyone who cannot read it in one glance.
`open`	`open`	`boolean`	`false`	Whether it is on screen. Settable, for a tour or a validation hint.
`openDelay`	`open-delay`	`number`	`400`	How long the pointer rests before it opens, in milliseconds.
`placement`	`placement`	`BmxPlacement`	`'top'`	Where it prefers to sit. It flips when there is no room.
`trigger`	`trigger`	`BmxHoverTrigger`	`'both'`	How it may be opened.

Events

Event	Detail	Description
`bmxOpenChange`	`boolean`	Fired when it opens or closes, with `true` or `false`.

Methods

Method	Signature	Description
`hideTooltip`	`hideTooltip() => Promise<void>`	Hide it now.
`showTooltip`	`showTooltip() => Promise<void>`	Show it now, whatever the delays say.

Slots

Slot	Description
`(default)`	The tooltip's content, when it is more than the `content` property.

CSS shadow parts

Part	Description
`arrow`	The pointer drawn against the anchor.
`surface`	The floating box.

CSS custom properties

Property	Description
`--bmx-tooltip-arrow-size`	The pointer's size. Set it to 0 for no pointer at all.
`--bmx-tooltip-background`	The box's background.
`--bmx-tooltip-border-color`	Its border. Carries the shape under forced colours.
`--bmx-tooltip-color`	Its text colour.
`--bmx-tooltip-font-size`	The text size.
`--bmx-tooltip-max-inline-size`	How wide it may grow before wrapping. A tooltip that runs the width of the window is unreadable.
`--bmx-tooltip-padding-block`	Space above and below the text.
`--bmx-tooltip-padding-inline`	Space either side of it.
`--bmx-tooltip-radius`	Its corner radius.
`--bmx-tooltip-shadow`	The shadow under the box.

`<bmx-tour>`

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	Whether the tour is running. Setting it starts or ends the tour.
`backdrop`	`backdrop`	`boolean`	`true`	Dim the page around the target. `false` leaves the whole page in view and usable.
`beforeChange`	property only	`BmxTourGuard`	—	The page's own check before a step is left forward.
`closeOnBackdrop`	`close-on-backdrop`	`boolean`	`false`	A press on the dimmed page ends the tour.
`dismissible`	`dismissible`	`boolean`	`true`	The reader may leave the tour early: the close button, Skip and Escape.
`label`	`label`	`string`	—	The card's accessible name when a step has no heading.
`missingTarget`	`missing-target`	`'center' \| 'skip'`	`'center'`	A step whose target is not on the page: `center` shows its card in the middle of the window, `skip` passes over it.
`showProgress`	`show-progress`	`boolean`	`true`	Show "2 of 5" and the progress dots.
`spotlightPadding`	`spotlight-padding`	`number`	`8`	Space between the target and the edge of the cut-out, in pixels.
`spotlightRadius`	`spotlight-radius`	`number`	`8`	Corner radius of the cut-out, in pixels.
`strings`	`strings`	`Partial<BmxTourStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`value`	`value`	`string`	—	The current step, by value. Mutable: moving updates it.

Events

Event	Detail	Description
`bmxTourEnd`	`BmxTourEndDetail`	Fired when the tour ends, with how.
`bmxTourStart`	`{ value: string; index: number; }`	Fired when the tour starts.
`bmxTourStepChange`	`BmxTourStepChangeDetail`	Fired before the current step changes. Cancel it to stay.
`bmxTourStepChanged`	`BmxTourStepChangeDetail`	Fired after the current step has changed and its card is showing.

Methods

Method	Signature	Description
`goTo`	`goTo(step: string \| number) => Promise<boolean>`	Moves to a step by value or position. Resolves whether it moved.
`next`	`next() => Promise<boolean>`	Moves to the next step, after the page's checks; ends the tour from the last. Resolves whether it moved.
`previous`	`previous() => Promise<boolean>`	Moves to the step before. Resolves whether it moved.
`start`	`start(at?: string \| number) => Promise<boolean>`	Starts the tour, at the first step or at one given by value or position. Resolves whether it started.
`stop`	`stop() => Promise<void>`	Ends the tour.

Slots

Slot	Description
`(default)`	`bmx-tour-step` elements.

CSS shadow parts

Part	Description
`arrow`	The card's arrow, on the side facing the target.
`back`	The Back button.
`body`	The step's words.
`card`	The card.
`close`	The close button.
`dots`	The progress dots.
`footer`	The row of progress and buttons.
`heading`	The card's heading.
`layer`	The full-window layer holding the scrim and the card.
`next`	The Next (or Done) button.
`progress`	"2 of 5".
`scrim`	The dimmed page, with the cut-out.
`skip`	The "Skip tour" button.
`spotlight`	The ring around the cut-out.

CSS custom properties

Property	Description
`--bmx-tour-radius`	Corner radius of the card.
`--bmx-tour-ring`	The colour of the ring around the target.
`--bmx-tour-scrim`	The colour laid over the page around the target.
`--bmx-tour-width`	The card's width.

`<bmx-tour-step>`

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	Whether this is the step showing. Set by `bmx-tour`.
`advanceOn`	`advance-on`	`string`	—	An event on the target that moves the tour on, e.g. `click` or `change`.
`disabled`	`disabled`	`boolean`	`false`	Leave the step out.
`heading`	`heading`	`string`	—	The card's heading; also its accessible name.
`interactive`	`interactive`	`boolean`	`false`	The target can be used while the step is showing: the cut-out lets the pointer through.
`next`	`next`	`string`	—	The step to go to after this one, by value, instead of the next in order.
`placement`	`placement`	`BmxPlacement \| 'auto'`	`'auto'`	Where the card sits against the target. `auto` picks the side with the most room.
`spotlight`	`spotlight`	`boolean`	`true`	Dim the page around the target on this step.
`target`	`target`	`string \| HTMLElement`	—	What the step points at: a CSS selector, or (from script) an element.
`value`	`value`	`string`	—	What the step is called in the tour's `value` and events. Default: its heading, then its position.
`waitFor`	`wait-for`	`number`	`0`	How long to wait, in milliseconds, for a target that is not on the page yet.

Slots

Slot	Description
`(default)`	The step's words, and anything else the card should hold.

CSS shadow parts

Part	Description
`base`	The box around the content.

`<bmx-trace-viewer>`

Properties

Property	Attribute	Type	Default	Description
`allowOpen`	`allow-open`	`boolean`	`true`	Offer the "Open a trace" button.
`baseline`	property only	`unknown`	`''`	A trace (or traces) to compare against - a known-good run of the same request - in any of the same formats.
`compareWith`	`compare-with`	`string`	`''`	The trace the Compare view compares with (its id; default the baseline, or the next trace). Mutable.
`criticalPath`	`critical-path`	`boolean`	`true`	Mark the critical path. Mutable.
`data`	property only	`unknown`	`''`	The traces: OTLP JSON, Zipkin v2 JSON or Jaeger JSON - text or parsed - or JSON lines. Mutable (opening a file sets it).
`errorsOnly`	`errors-only`	`boolean`	`false`	Show only spans that failed (with what called them). Mutable.
`fileName`	`file-name`	`string`	`'trace'`	The name downloads are given (without the extension).
`label`	`label`	`string`	—	The element's accessible name. Default: "Trace viewer".
`selected`	`selected`	`string`	`''`	The chosen span's id. Mutable.
`strings`	`strings`	`Partial<BmxTraceViewerStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`traceId`	`trace-id`	`string`	`''`	The trace shown (its id; default the first). Mutable.
`view`	`view`	`BmxTraceView`	`'timeline'`	The view shown. Mutable.

Events

Event	Detail	Description
`bmxLoad`	`BmxTraceLoadDetail`	Fired when traces have been read.
`bmxSelect`	`BmxTraceSelectDetail`	Fired when a span is chosen.
`bmxTraceChange`	`BmxTraceChangeDetail`	Fired when another trace is shown.

Methods

Method	Signature	Description
`collapseAll`	`collapseAll() => Promise<void>`	Folds every span that has children (the roots stay open).
`compare`	`compare(otherTraceId?: string) => Promise<ReturnType<typeof compareTraces> \| undefined>`	The trace shown compared with another (default the Compare view's choice).
`download`	`download(format?: BmxTraceExportFormat, fileName?: string) => Promise<void>`	Saves an export as a file.
`expandAll`	`expandAll() => Promise<void>`	Unfolds every span.
`exportCsv`	`exportCsv() => Promise<string>`	The trace shown's spans as CSV.
`exportOtlp`	`exportOtlp(all?: boolean) => Promise<string>`	The trace shown as OTLP JSON (all traces read, with `all`).
`exportSvg`	`exportSvg(kind?: "waterfall" \| "map") => Promise<string>`	The timeline or the service map as a stand-alone SVG picture.
`find`	`find(query: string) => Promise<string[]>`	Spans matching the text (name, service, id, attributes, events), in tree order.
`getCriticalPath`	`getCriticalPath() => Promise<BmxCriticalSegment[]>`	The critical path of the trace shown, in time order.
`getTrace`	`getTrace(traceId?: string) => Promise<BmxTrace \| undefined>`	A trace (default the one shown), with its tree, self times and critical path.
`getTraces`	`getTraces() => Promise<BmxTraceSummary[]>`	The traces read, newest first (with the baseline's last).
`resetZoom`	`resetZoom() => Promise<void>`	Shows the whole trace again.
`selectSpan`	`selectSpan(spanId: string) => Promise<void>`	Chooses a span (unfolding the way to it) and scrolls it into view.
`setTrace`	`setTrace(traceId: string) => Promise<void>`	Shows a trace.
`zoomTo`	`zoomTo(from: number, to: number) => Promise<void>`	Zooms the timeline to a stretch of the trace (microseconds from its start).

CSS shadow parts

Part	Description
`bar`	A span's bar.
`details`	The span details panel.
`header`	The trace's figures across the top.
`row`	A span's row in the timeline; also `row-selected`.
`table`	A table (services, operations, comparison).
`tabs`	The row of views.

CSS custom properties

Property	Description
`--bmx-trace-viewer-critical`	The critical-path mark.
`--bmx-trace-viewer-details-width`	The details panel's width.
`--bmx-trace-viewer-height`	The height of the timeline's list and the flame graph.
`--bmx-trace-viewer-names`	The width of the names column.
`--bmx-trace-viewer-radius`	Corner radius of the element.
`--bmx-trace-viewer-service-1`	Service colour 1 (and 2 to 10).

`<bmx-transfer-list>`

Properties

Property	Attribute	Type	Default	Description
`description`	`description`	`string`	—	Help text below the lists.
`disabled`	`disabled`	`boolean`	`false`	Disable the control.
`dragAndDrop`	`drag-and-drop`	`boolean`	`true`	Allow dragging items between and within the lists.
`errorText`	`error-text`	`string`	—	An error supplied by the page.
`filter`	property only	`BmxTransferFilter`	—	Replaces the built-in filter matching.
`grouped`	`grouped`	`boolean`	`true`	Show group headings (in the available list, and in the chosen list when it is not `orderable`).
`hideLabel`	`hide-label`	`boolean`	`false`	Hide the label visually while keeping it as the accessible name.
`items`	`items`	`(BmxTransferItem \| string)[] \| string`	`[]`	Every item: objects `{ value, label, description, group, keywords, disabled, locked, data }` or strings, as an array or JSON.
`label`	`label`	`string`	—	The field's label: names the whole control.
`max`	`max`	`number`	—	The most that can be chosen.
`min`	`min`	`number`	—	The fewest that must be chosen for the form to be valid.
`name`	`name`	`string`	—	The field's name: the form receives one entry per chosen value.
`orderable`	`orderable`	`boolean`	`true`	The chosen list can be put in order: buttons, Alt+arrows and dragging. When false it follows the items' own order.
`readonly`	`readonly`	`boolean`	`false`	Allow selecting and reading, but not moving.
`required`	`required`	`boolean`	`false`	At least one must be chosen.
`searchable`	`searchable`	`boolean`	`true`	A filter box above each list.
`showDescriptions`	`show-descriptions`	`boolean`	`true`	Show items' second lines.
`sourceLabel`	`source-label`	`string`	—	The available list's heading. Default: "Available".
`strings`	`strings`	`Partial<BmxTransferListStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`targetLabel`	`target-label`	`string`	—	The chosen list's heading. Default: "Chosen".
`value`	`value`	`string[] \| string`	`[]`	The chosen values, in order. Two-way. An array, JSON or a comma-separated list.

Events

Event	Detail	Description
`bmxChange`	`BmxTransferChangeDetail`	Fired after the chosen list changes.
`bmxSelectionChange`	`BmxTransferSelectionDetail`	Fired when the selection in either list changes.
`bmxTransfer`	`BmxTransferDetail`	Fired before items move. Cancel it to refuse the move.

Methods

Method	Signature	Description
`clearSelection`	`clearSelection(side?: BmxTransferSide) => Promise<void>`	Clear the selection in one list, or both.
`getItems`	`getItems(side: BmxTransferSide, shownOnly?: boolean) => Promise<BmxTransferItem[]>`	The items in a list, as shown (filtered) or all of them.
`getValue`	`getValue() => Promise<string[]>`	The chosen values, in order.
`moveAll`	`moveAll(from?: BmxTransferSide) => Promise<string[]>`	Move everything shown in a list across.
`moveToSource`	`moveToSource(values?: string[]) => Promise<string[]>`	Move values (default: the selection) back out of the chosen list. Resolves the values that moved.
`moveToTarget`	`moveToTarget(values?: string[]) => Promise<string[]>`	Move values (default: the selection) into the chosen list. Resolves the values that moved.
`select`	`select(side: BmxTransferSide, values: string[]) => Promise<void>`	Select values in a list (replacing the selection).
`setFilter`	`setFilter(side: BmxTransferSide, query: string) => Promise<void>`	Set the filter text of a list.
`setFocus`	`setFocus(side?: BmxTransferSide) => Promise<void>`	Focus a list.

Slots

Slot	Description
`description`	Rich help text, in place of the `description` property.
`label`	Rich label content, in place of the `label` property.

CSS shadow parts

Part	Description
`description`	An item's second line, and the help text under the field.
`empty`	The message in an empty list.
`filter`	A filter box.
`group`	A group heading in a list.
`header`	A list's heading row.
`label`	The label element.
`list`	A listbox.
`move`	One of them.
`moves`	The buttons between the lists.
`order`	The buttons that reorder the chosen list.
`pane`	One list with its heading and filter; also `pane-source` and `pane-target`.
`row`	An item; also `row-selected` and `row-active`.

CSS custom properties

Property	Description
`--bmx-transfer-list-height`	The height of each list's scrolling area.
`--bmx-transfer-list-label-font-size`	The label's font size.
`--bmx-transfer-list-pane-background`	A pane's background.
`--bmx-transfer-list-radius`	Corner radius of the panes.
`--bmx-transfer-list-row-height`	The height of one row (taller when items have descriptions).
`--bmx-transfer-list-selected-background`	A selected row.
`--bmx-transfer-list-support-font-size`	Font size of the description and error message.

`<bmx-upload>`

Properties

Property	Attribute	Type	Default	Description
`accept`	`accept`	`string`	—	What the field takes, in the spelling a native file input accepts.
`appearance`	`appearance`	`BmxUploadAppearance`	`'outline'`	Visual treatment.
`autoUpload`	`auto-upload`	`boolean`	`true`	Start uploading as soon as files are added.
`browseText`	`browse-text`	`string`	—	The picker button's text.
`chunkSize`	`chunk-size`	`number`	`0`	Bytes per request. Zero sends each file in one. Chunking exists for the file that is too big to survive one request - a proxy's body limit, a timeout, a connection that drops at four minutes. The protocol the built-in uploader speaks is a convention, not a standard; see `upload-transport.ts`, and replace `uploader` if yours differs.
`concurrency`	`concurrency`	`number`	`3`	How many files may be in flight at once.
`description`	`description`	`string`	—	Help text below the field.
`disabled`	`disabled`	`boolean`	`false`	Disable the field.
`errorText`	`error-text`	`string`	—	An error supplied by the consumer - a server response, typically.
`fieldName`	`field-name`	`string`	`'file'`	The form field each file is sent under by the built-in uploader.
`fullWidth`	`full-width`	`boolean`	`true`	Stretch to the width of the container. On by default: a list wants room.
`headers`	property only	`Record<string, string>`	—	Extra request headers for the built-in uploader. Accepts the JSON spelling of the object as well, for templates that can only write attributes. See `src/core/markup.ts`.
`hideLabel`	`hide-label`	`boolean`	`false`	Hide the label visually while keeping it for assistive technology.
`hint`	`hint`	`string`	—	Replace the generated line describing what the field accepts. The default is composed from `accept`, `maxSize` and `maxFiles`, so a field that changes its own limits cannot end up describing the old ones.
`label`	`label`	`string`	—	The field's label. Required unless the `label` slot is used.
`maxFiles`	`max-files`	`number`	—	How many files may be queued at once.
`maxSize`	`max-size`	`number`	—	Largest file allowed, in bytes.
`messages`	property only	`BmxFieldMessages`	—	Replacements for the default validity wording, by reason. Accepts the JSON spelling of the object as well, for templates that can only write attributes. See `src/core/markup.ts`.
`method`	`method`	`string`	`'POST'`	HTTP method for the built-in uploader.
`minSize`	`min-size`	`number`	—	Smallest file allowed, in bytes. Catches the empty placeholder file.
`multiple`	`multiple`	`boolean`	`false`	Accept more than one file. Off by default, as on `<input type="file">`. A single-file field replaces its file when a new one is chosen rather than refusing it.
`name`	`name`	`string`	—	The field's name in the form it belongs to.
`prepareFile`	property only	`BmxUploadPrepare`	—	Prepares each file before it joins the queue, one at a time: return the file, a changed copy, or null to leave it out. Size and type limits are checked on what it returns. A picture editor fits here: `upload.prepareFile = file => editor.editFile(file)`.
`promptText`	`prompt-text`	`string`	`'Drag and drop files here'`	The line inside the drop zone.
`readonly`	`readonly`	`boolean`	`false`	Show the files without letting the user add or remove any.
`refusalMessages`	`refusal-messages`	`Partial<Record<BmxUploadRejection, string>> \| string`	—	Replacements for the wording of a refusal. `{name}` becomes the file name. Accepts the JSON spelling as well. The `\| string` in the type is what makes `refusal-messages` exist as an attribute - see the note on `bmx-date-picker`'s `disabledDaysOfWeek`, and `src/core/markup.ts`.
`required`	`required`	`boolean`	`false`	Require at least one file.
`shape`	`shape`	`BmxShape`	`'rounded'`	Corner treatment.
`size`	`size`	`BmxSize`	`'md'`	Size step.
`submitValue`	`submit-value`	`BmxUploadSubmitValue`	`'auto'`	What the field contributes to its form.
`tone`	`tone`	`BmxTone`	`'primary'`	Semantic colour role, used for the focus ring and the bars.
`uploader`	property only	`BmxUploader`	—	Your own transport, in place of the built-in one.
`url`	`url`	`string`	—	Endpoint for the built-in uploader. Leave unset to hold files for the form.
`validateOn`	`validate-on`	`BmxValidateOn`	`'blur'`	When the field is willing to reveal a problem.
`withCredentials`	`with-credentials`	`boolean`	`false`	Send credentials on a cross-origin upload.

Events

Event	Detail	Description
`bmxChange`	`BmxUploadChangeDetail`	Fired whenever the set of files changes.
`bmxRefuse`	`BmxUploadRefusedDetail`	Fired when files are turned away, with the reason for each.
`bmxUploadEnd`	`BmxUploadEndDetail`	Fired once when nothing is left to upload.
`bmxUploadError`	`BmxUploadFileDetail`	Fired when a file could not be uploaded.
`bmxUploadProgress`	`BmxUploadProgressDetail`	Fired as bytes move.
`bmxUploadStart`	`BmxUploadFileDetail`	Fired as each file is handed to the uploader.
`bmxUploadSuccess`	`BmxUploadFileDetail`	Fired when a file has been uploaded.
`bmxValidityChange`	`BmxUploadValidityDetail`	Fired whenever the resolved validity changes.

Methods

Method	Signature	Description
`addFiles`	`addFiles(files: File[] \| FileList) => Promise<void>`	Add files without going through the picker or a drop.
`cancelFile`	`cancelFile(id: string) => Promise<void>`	Stop a file that is uploading, or take a queued one out of the running.
`checkValidity`	`checkValidity() => Promise<boolean>`	Validate now and return whether the field passed, without revealing it.
`clear`	`clear() => Promise<void>`	Empty the queue, stopping anything in flight.
`getFiles`	`getFiles() => Promise<File[]>`	The files the field is holding, in queue order.
`getItems`	`getItems() => Promise<BmxUploadItem<File>[]>`	The queue itself - each file with its state, progress and any error.
`openPicker`	`openPicker() => Promise<void>`	Open the platform's file picker, as the button does.
`removeFile`	`removeFile(id: string) => Promise<void>`	Remove a file from the queue entirely.
`reportValidity`	`reportValidity() => Promise<boolean>`	Validate, reveal any problem, and focus the field if it has one.
`retryFile`	`retryFile(id: string) => Promise<void>`	Put a failed or cancelled file back in the queue and start it again.
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focus the field's picker button.
`start`	`start() => Promise<void>`	Begin uploading. Only needed when `autoUpload` is off.

Slots

Slot	Description
`description`	Rich help text, in place of the `description` property.
`label`	Rich label content, in place of the `label` property.
`prompt`	Replaces the wording inside the drop zone.

CSS shadow parts

Part	Description
`browse`	The button that opens the file picker.
`cancel`	A row's cancel button.
`description`	The help text.
`error`	The error message.
`field`	The drop zone.
`file`	One file's row.
`file-meta`	A file's size and state.
`file-name`	A file's name.
`hint`	The line describing what the field accepts.
`label`	The label element.
`list`	The list of files.
`notices`	The live region holding refusal messages.
`overall`	The progress bar across the whole queue.
`progress`	A file's progress bar.
`remove`	A row's remove button.
`retry`	A row's retry button.

CSS custom properties

Property	Description
`--bmx-upload-background`	The zone's background.
`--bmx-upload-bar-height`	Thickness of the progress bars.
`--bmx-upload-bar-track`	The unfilled part of a progress bar.
`--bmx-upload-border-color`	The zone's border colour in its resting state.
`--bmx-upload-border-width`	Border width of the drop zone.
`--bmx-upload-drop-background`	The zone's background while a drag is over it.
`--bmx-upload-font-size`	Base font size for the zone and the file list.
`--bmx-upload-label-font-size`	The label's font size.
`--bmx-upload-list-max-block-size`	Height at which the file list starts scrolling.
`--bmx-upload-padding-block`	Vertical padding inside the drop zone.
`--bmx-upload-padding-inline`	Horizontal padding inside the drop zone.
`--bmx-upload-radius`	Corner radius of the zone and the file rows.
`--bmx-upload-row-background`	Background of a file row.
`--bmx-upload-stack-gap`	Space between the label, the zone, the list and the supporting text.
`--bmx-upload-support-font-size`	Font size of the description, error, hint and file meta.

`<bmx-workflow-designer>`

Properties

Property	Attribute	Type	Default	Description
`definition`	`definition`	`BmxWorkflowDefinition \| string`	`''`	The workflow, as an object or JSON. Mutable: edits write it back.
`mode`	`mode`	`'design' \| 'simulate'`	`'design'`	`design` to draw and edit; `simulate` to run it. Mutable.
`readonly`	`readonly`	`boolean`	`false`	Show the workflow without allowing changes (simulating still works).
`strings`	`strings`	`Partial<BmxWorkflowDesignerStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.

Events

Event	Detail	Description
`bmxWorkflowChange`	`BmxWorkflowDesignerChangeDetail`	Fired after every change: save the definition.
`bmxWorkflowSelect`	`BmxWorkflowSelection`	Fired when the selection changes.
`bmxWorkflowSimulate`	`{ instance: BmxWorkflowInstance \| null; events: BmxWorkflowEmitted[]; }`	Fired as the simulator moves.

Methods

Method	Signature	Description
`autoLayout`	`autoLayout() => Promise<void>`	Lay every state out again, by distance from the start and by lane.
`bumpRevision`	`bumpRevision() => Promise<BmxWorkflowDefinition>`	Raise the revision by one (when the page publishes it). Resolves the definition.
`exportJson`	`exportJson() => Promise<string>`	The workflow as JSON.
`exportMermaid`	`exportMermaid() => Promise<string>`	The workflow as a Mermaid state diagram.
`fitView`	`fitView() => Promise<void>`	Show the whole workflow.
`getDefinition`	`getDefinition() => Promise<BmxWorkflowDefinition>`	The workflow as it stands.
`redo`	`redo() => Promise<boolean>`	Redo the last undone change.
`select`	`select(id: string \| null) => Promise<void>`	Select a state or transition by id (null for none).
`undo`	`undo() => Promise<boolean>`	Undo the last change.
`validate`	`validate() => Promise<BmxWorkflowProblem[]>`	Everything wrong with the workflow now.

CSS shadow parts

Part	Description
`canvas`	The box the workflow is drawn in.
`lane`	A swimlane.
`panel`	The properties or simulator panel.
`problems`	The problems list.
`state`	A state; also `state-selected` and `state-current` (simulating).
`toolbar`	The bar of tools.
`transition`	A transition.

CSS custom properties

Property	Description
`--bmx-workflow-designer-approval`	The colour of approval states.
`--bmx-workflow-designer-canvas`	The canvas background.
`--bmx-workflow-designer-current`	The colour that marks where a simulation is.
`--bmx-workflow-designer-decision`	The colour of decisions.
`--bmx-workflow-designer-end`	The colour of end states.
`--bmx-workflow-designer-height`	The height of the canvas.
`--bmx-workflow-designer-panel-width`	The width of the properties panel.
`--bmx-workflow-designer-start`	The colour of start states.
`--bmx-workflow-designer-task`	The colour of task states.
`--bmx-workflow-designer-wait`	The colour of wait states.

`<bmx-workflow-engine>`

Properties

Property	Attribute	Type	Default	Description
`actor`	`actor`	`BmxWorkflowActor \| string`	—	Who is acting: `{ id, name, roles }`, or JSON. Without one, every action is open (an administrator).
`autoEscalate`	`auto-escalate`	`boolean`	`false`	Move overdue steps to their escalation state, checked each minute.
`definition`	`definition`	`BmxWorkflowDefinition \| string`	`''`	The workflow definition, as an object or JSON.
`editableValues`	`editable-values`	`boolean`	`false`	Let the person change the workflow's values before acting.
`instance`	`instance`	`BmxWorkflowInstance \| string`	—	The instance being run, as an object or JSON. Mutable: every step writes the new instance.
`locale`	`locale`	`string`	—	The language for times. Default: the page's.
`strings`	`strings`	`Partial<BmxWorkflowEngineStrings> \| string`	—	Words to show instead of the English ones, as an object or JSON.
`view`	`view`	`'card' \| 'none'`	`'card'`	`card` shows the task card; `none` runs with nothing shown.

Events

Event	Detail	Description
`bmxWorkflowAction`	`BmxWorkflowActionDetail`	Fired before an action is taken from the card or `fire`. Cancel it to refuse.
`bmxWorkflowChange`	`BmxWorkflowChangeDetail`	Fired after the instance moves: save the instance.
`bmxWorkflowComplete`	`{ instance: BmxWorkflowInstance; }`	Fired when the instance reaches an end state.
`bmxWorkflowEmit`	`BmxWorkflowEmitted & { instance: BmxWorkflowInstance; }`	Fired for each event the definition hands to the page (its `emit` actions).
`bmxWorkflowError`	`{ code: string; error: string; }`	Fired when something cannot be done (a refused action, a broken definition).

Methods

Method	Signature	Description
`available`	`available() => Promise<BmxWorkflowTransition[]>`	The actions open to the actor now.
`cancel`	`cancel(comment?: string) => Promise<void>`	Stop the instance.
`escalate`	`escalate() => Promise<boolean>`	Move the instance to its escalation state if its step is overdue. Resolves whether it moved.
`fire`	`fire(transition: string, options?: { comment?: string; variables?: Record<string, unknown>; }) => Promise<BmxWorkflowResult>`	Take an action (transition id or name), with a comment and values. Resolves the result.
`getEngine`	`getEngine() => Promise<Engine>`	The engine for the definition: the same object `bmx-workflow.mjs` makes, for anything not on the element.
`getInstance`	`getInstance() => Promise<BmxWorkflowInstance \| null>`	The instance now, or `null`.
`getTimer`	`getTimer() => Promise<BmxWorkflowTimer \| null>`	The current step's time limit, or `null`.
`options`	`options() => Promise<BmxWorkflowOption[]>`	Every action from the current state, open or closed, with why.
`start`	`start(variables?: Record<string, unknown>) => Promise<BmxWorkflowResult>`	Start a new instance with values (and the definition's defaults). Resolves the result.

CSS shadow parts

Part	Description
`action`	One action button.
`actions`	The action buttons.
`card`	The task card.
`comment`	The comment box.
`details`	The values the workflow carries.
`header`	The state's name and status.
`history`	The history list.

CSS custom properties

Property	Description
`--bmx-workflow-engine-background`	The card's background.
`--bmx-workflow-engine-width`	The card's width.