Elements and attributes

The view of a PlayerVox OverCrow widget is made of a closed set of elements. This page lists each one with its content, its attributes and the events it can send. The view explains the markup around them: expressions, if, for, components.

<box class="panel">
  <box class="header">
    <text class="title">{t("title")}</text>
    <text class="value">{latest(state.values)}</text>
  </box>
  <chart class="plot" kind="area" min="0" max="100">
    <series class="series" values={state.values}/>
  </chart>
</box>

Two box containers, two text elements bound to the state, and a chart with one series: PlayerVox OverCrow draws all of it, the chart included.

How to read an element

• Content is what the element may hold: flow is any element that can stand on its own in a container (all but span, option and series); inline is the content of a text; text is plain text; empty means the element is written <name …/>.
• Parents says where the element may be: any flow is any container.
• Keyboard focus: always for controls; when subscribed for an element that takes the focus only when the view listens to one of its events (on:activate…); never otherwise.
• Role is what assistive technology is told the element is.
• Events are the events the view may listen to with on:<event>.

A type such as "text ≤ 256 bytes" gives a limit.

Attributes of every element

Elements

box

Generic container; flex or grid layout comes from style. The root of the view is a box.

No attribute of its own.

scroll

Clipping container scrolled by the host with wheel, drag and keyboard.

list

Vertical scrolling list whose children are laid out and painted only when visible.

text

Block of wrapped text; its inline children flow with it (chat line with emotes).

span

Styled run of text inside text.

icon

Lucide icon tinted with color, sized by font-size unless width and height are set.

image

Raster image from the package, or an image handed by a service (an asset: handle); object-fit applies.

avatar

Round image with a text fallback while the image is missing or failed.

badge

Short pill of text.

No attribute of its own.

button

Activatable control; its children (icon, text) form its content.

toggle

On/off switch.

checkbox

Check control (checklists).

slider

Numeric range control; dragging is handled by the host.

select

Drop-down choice; the open list is drawn by the host.

option

Choice of a select; its text is the visible label.

field

Single-line text input edited by the host, input methods (IME) included.

textarea

Multi-line text input edited by the host, input methods (IME) included.

form

Groups named controls. With intent, submitting sends their values to a write service directly from the host; the widget's logic never supplies that content.

elapsed

Duration text advanced by the host from an anchor given by a service, so a running stopwatch needs no work from the logic. Styled like text; repainted only when the shown text changes, at most at 60 Hz, and never while hidden.

progress

Horizontal progress bar.

gauge

Ring or arc gauge.

chart

Line, area, bar or sparkline chart drawn by the host.

series

One data series of a chart, coloured with color.

separator

Thin rule between groups.

canvas

Surface painted by the host from the latest list of commands given to draw.

No attribute of its own.

popover

Floating panel anchored to an element, drawn above the content and clipped to the widget's frame (drop-downs, context menus).

Events

An event marked as a user action allows a protected service call while the logic handles it. The detail is what a handler receives; in a handler written as a call, it is named event:

    <list class="history" stick-to-end={state.following} item-height="20" label={heading(state)} on:stick={stuck(event.stuck)}>

The named keys of keydown are:

Enter, Escape, Backspace, Delete, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Home, End, PageUp, PageDown.

Any other key is one printable character.

Default sizes

The elements that PlayerVox OverCrow draws take these sizes, in logical pixels at 100 %, unless the style sets width or height. Any other element is sized by its content and by the style: a canvas has no size until the style gives it one.

.dots {
  height: 12px;
}