Crate hypersig_ui

Expand description

Accessible components for hypersig, styled after shadcn/ui.

Each component is a function or a small builder that returns an El, styled with hypersig::style from the tokens in token. A page adds global and theme once, and the components follow the visitor’s light or dark preference.

The behavior a screen reader and a keyboard depend on comes from the browser where the browser has it, and from the WAI-ARIA Authoring Practices where it does not:

Component	Built on
`button`, `submit_button`, `icon_button`	`<button>`, with the icon button’s name required
`TextField`	`<label>`, `<input>` or `<textarea>`, `aria-describedby`, `aria-invalid`, a live error
`NumberField`	the same, on `<input type="number">` with typed `min`, `max`, and `step`
`checkbox`, `switch`	`<input type="checkbox">`, the switch with `role="switch"`
`radio_group`	`<fieldset>`, `<legend>`, and radios that share a name
`select_field`	`<label>` and `<select>`, with a `base-select` picker where supported
`TextField::in_form`, `select_field_in_form`, `radio_group_in_form`, `checkbox_in_form`, `switch_in_form`	the control above bound to a field of a `Form`, with its message tied by `aria-describedby` and `aria-invalid`
`Slider`	`<input type="range">` over a drawn track and thumb
`Listbox`	the listbox pattern, with roving focus
`Combobox`	the combobox pattern with list autocomplete and `aria-activedescendant`
`Tabs`	the tabs pattern, with roving focus
`Chart`	an `<svg>` hidden from assistive technology, beside a visually hidden `<table>` of the same rows
`DonutChart`	the same, with each row an arc of a ring
`DataTable`	`<table>` with `<th scope="col">` and `aria-sort`, and a tri-state checkbox for selecting rows
`ServerTable`	the same `<table>`, whose rows an action sends one page at a time
`Accordion`	`<details>` and `<summary>`
`Dialog`	`<dialog>` opened by invoker commands, centered or along an edge as a sheet
`NavList`, `Breadcrumb`, `pagination`	`<nav>` holding a list of links, with `aria-current` on the link to the page shown
`Menu`	the menu button pattern on a `popover`
`Tooltip`	the tooltip pattern on a `popover="hint"`
`Toaster`	a landmark region holding an `aria-live` list
`progress`	`role="progressbar"`

The ids that tie a label to its control, or a tab to its panel, are derived from the signal the component is bound to. A dialog, a menu, a tooltip, and a combobox take names in a const handle, as a NodeRef does, because the runtime or the browser finds their elements by id.

use hypersig::{Page, Signals};
use hypersig_ui::{ButtonSize, ButtonVariant, TextField, button, card, card_content};
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
struct Signup {
    name: String,
}

let html = Page::new("Sign up", Signup { name: String::new() })
    .global(hypersig_ui::global())
    .theme(hypersig_ui::theme())
    .child(
        card().child(
            card_content()
                .child(TextField::new("Name", Signup::name()))
                .child(button(ButtonVariant::Default, ButtonSize::Default).text("Continue")),
        ),
    )
    .render();
assert!(html.contains(r#"for="ui-name-input""#));

Modules§

token: The design tokens the components read their colors and radius from.

Structs§

Accordion: A stack of sections, each a native <details> whose <summary> opens and closes it.
Breadcrumb: A trail of links to the pages above the current one, ending at it.
Chart: A chart of the rows of a list signal, drawn as bars, lines, or areas.
Column: One column of a DataTable or a ServerTable whose rows are T.
Combobox: A combobox on a page whose signals are S: a text field with a list of options that the text filters.
ComboboxState: The signals a Combobox keeps: the text, whether its list is open, which option the arrow keys reached, and whether the pointer is on the list.
DataTable: A table of the rows of a list signal, sorted, filtered, and paged in the browser.
Dialog: A modal dialog on a page whose signals are S.
DonutChart: A donut chart of the rows of a list signal, each an arc as long as its share of the total.
Listbox: A list named label whose selected option is the signal selected.
Menu: A menu of actions on a page whose signals are S, opened by a button.
MenuItem: One action in a Menu.
NavList: A list of links to the sections of an application, marking the one the page is in.
NumberField: A number field bound to an i32 or f64 signal, with its label and, where given, a description and an error message tied to it.
PaginationText: The words pagination names its parts with.
ServerTable: A table whose rows the server filters, sorts, and pages, one page at a time.
Slider: A slider labeled label that sets the i32 signal value.
TableState: The signals a DataTable or ServerTable keeps: filter text, page, and sort.
TableText: The words a DataTable or ServerTable shows or names its controls with.
Tabs: A tab list named label whose selection is the signal selected, with one panel per tab.
TextField: A text field bound to a String signal, with its label and, where given, a description and an error message tied to it.
Toast: One notice in a Toaster: a title, an optional description, and an id.
Toaster: The corner of the page that shows the toasts in the list toasts.
Tooltip: A tooltip on a page whose signals are S, describing the button it is attached to.

Enums§

AlertVariant: The look and the urgency of an alert.
Autocomplete: What a TextField holds, as autocomplete names it for the browser and for WCAG 1.3.5.
BadgeVariant: The look of a badge.
ButtonSize: The height and padding of a button.
ButtonVariant: The look of a button.
InputKind: The type of a single-line TextField, which picks the on-screen keyboard and what the browser checks.
InputMode: The on-screen keyboard a TextField asks for, as inputmode names it.
Level: The level of a heading, which follows the headings around it.
Side: The edge of the viewport a Dialog::sheet sits along.
SortOrder: The direction a TableState sorts its column in.
ToastVariant: How a Toast is drawn.

Traits§

Numeric: A number type a NumberField can be bound to: i32 or f64.

Functions§

alert: A bordered box for a message, holding an alert_title and an alert_description.
alert_description: The text under the title of an alert.
alert_title: The first line of an alert.
badge: A <span> that shows a short label, such as a status, as a badge.
button: A <button type="button"> of variant and size.
button_style: The style of a button of variant and size, for an element that is not a <button>, such as a link that leads to a form.
card: A <div> with a border, a shadow, and token::card behind it.
card_content: The body of a card.
card_description: A line under the title of a card, in token::muted_foreground.
card_footer: The bottom of a card, laying its children out in a row.
card_header: The top of a card, holding its title and description.
card_title: The title of a card, as a heading of level.
checkbox: A checkbox labeled text, bound to checked.
checkbox_in_form: A checkbox labeled text, bound to field of form.
dark: The dark values of the tokens for one element and those inside it.
dialog_footer: The row of buttons at the bottom of a dialog, aligned to the end.
global: The rules every page with these components needs: a reset, the font, and the page colors.
icon_button: A square button that shows only an icon, named by label.
light: The light values of the tokens for one element and those inside it.
pagination: Links to the pages of a list of count pages, on page current.
progress: A bar filled up to percent, a value from 0 to 100, named by label.
radio_group: A group of radio buttons with title in its <legend>, one per option, that sets selected to the option’s value.
radio_group_in_form: A group of radio buttons with title in its <legend>, bound to field of form.
select_field: A select labeled title, offering options, that sets selected to the chosen option’s value.
select_field_in_form: A select labeled title, offering options, bound to field of form.
separator: A one-pixel line in token::border that runs along orientation.
skeleton: A pulsing block in token::accent that stands in for content still loading, hidden from assistive technology.
submit_button: A <button type="submit"> of variant and size, which submits the form around it.
switch: An on and off switch labeled text, bound to on.
switch_in_form: An on and off switch labeled text, bound to field of form.
theme: The dark values of the tokens for a visitor whose system prefers dark.