インストール

hypersig_ui は、shadcn/ui に似た見た目を持ち、振る舞いはブラウザのネイティブ要素と WAI-ARIA Authoring Practices に従うコンポーネント集です。

クレートを追加する

次のように hypersig と並べて追加します。

Cargo.toml

[dependencies]
hypersig = "0.2"
hypersig_ui = "0.2"

ページにテーマを入れる

hypersig_ui::global() と hypersig_ui::theme() を、ページに 1 回ずつ追加します。global はフォントとページの色を含む小さなリセットです。theme は、システムの設定がダークモードの訪問者に対して、色のトークンをダークの値に切り替えます。

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""#));

コンポーネントの作り

どのコンポーネントも El<S> を返す関数か小さなビルダーなので、ほかの要素と同じようにハンドラ、スタイル、子要素を受け取ります。
スクリーンリーダーやキーボードでの操作に要る振る舞いは、ブラウザに備わっていればブラウザのものを使います。ネイティブの <button>、<input>、<select>、<details>、<dialog>、popover です。ブラウザに備わっていない振る舞いは、コンポーネントが WAI-ARIA Authoring Practices に従って作り、キーボード操作は El::roving_focus と El::active_descendant で扱います。
ラベルとコントロール、タブとパネルを結び付ける id は、コンポーネントが束縛するシグナルから作られます。ダイアログ、メニュー、ツールチップ、コンボボックスは名前を const のハンドルに持ち、部品どうしでそのハンドルを共有します。id に使えない名前はコンパイルエラーになります。
色は shadcn/ui の zinc テーマに合わせ、WCAG 2.2 AA を満たすために 3 つの値を変えています。コントロールの境界線は 3:1 以上のコントラストを持ち、補足のテキストは muted の背景色の上でも 4.5:1 を保ち、フォーカスは forced-colors モードでも描かれる実線の outline です。

各ページのデモはこの静的サイトの中のフレームで動くので、シグナルだけを使います。リポジトリにある例 ui は全コンポーネントをサーバー付きで 1 ページに並べたもので、その E2E テストはキーボードでコンポーネントを操作します。