nene-lang-ui 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 kimuracoki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,67 @@
-# Temporary Holding Version
+# nene-lang-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[Nene](https://github.com/kimuracoki/nene) の公式 UI 部品集。ボタン・入力欄・ダイアログなど、アプリを作るのに必要な部品がそろっている。ライトとダークの両方に対応し、色は CSS 変数で変えられる。
+
+`nene new` で作ったプロジェクトには、はじめから入っている。あとから入れるときは:
+
+```sh
+npm install nene-lang-ui
+```
+
+```haskell
+import Ui.Button (Variant(..))
+import qualified Ui.Icon as Icon
+import Ui.Theme (Tone(..))
+
+<Button onClick={Save}>保存</Button>
+<Button variant={Outlined} tone={Danger} startIcon={Just Icon.delete} onClick={Remove}>削除</Button>
+```
+
+全部の部品を使った見本は、Nene のリポジトリの [examples/Showcase.nn](https://github.com/kimuracoki/nene/blob/main/examples/Showcase.nn)。
+
+## 部品
+
+| モジュール | タグ | 主な属性 |
+| --- | --- | --- |
+| `Ui.Button` | `<Button>…</Button>` | `onClick`、`variant`（`Filled` `Outlined` `Plain`）、`tone`、`size`、`startIcon` `endIcon`、`disabled`、`fullWidth` |
+| `Ui.IconButton` | `<IconButton />` | `icon`、`label`（読み上げとツールチップ）、`onClick`、`variant`、`tone`、`size` |
+| `Ui.Icon` | `<Icon />` | `name`。`Icon.add` `Icon.close` `Icon.search` など 30 種類 |
+| `Ui.TextField` | `<TextField />` | `value`、`onInput`、`label`、`placeholder`、`helper`、`error`、`kind`（`PlainText` `Email` `Password` `Number` `Search` `Tel`） |
+| `Ui.Select` | `<Select />` | `value`、`options`（値と表示の組のリスト）、`onChange`、`label` |
+| `Ui.Checkbox` | `<Checkbox />` | `checked`、`onCheck`、`label` |
+| `Ui.Switch` | `<Switch />` | `checked`、`onCheck`、`label` |
+| `Ui.Card` | `<Card>…</Card>` | `title`、`padding`（`None` 〜 `XL`） |
+| `Ui.Chip` | `<Chip>…</Chip>` | `tone`、`selected`、`onClick`（`Just msg` で押せるチップになる） |
+| `Ui.Dialog` | `<Dialog>…</Dialog>` | `open`、`onClose`、`title` |
+| `Ui.Tabs` | `<Tabs />` | `labels`、`selected`（0 から）、`onSelect` |
+| `Ui.Alert` | `<Alert>…</Alert>` | `tone`、`title` |
+| `Ui.Progress` | `<Progress />` | `value`（`Just 0.4`。`Nothing` なら動き続ける）、`tone` |
+| `Ui.Spinner` | `<Spinner />` | `size`、`label` |
+| `Ui.Avatar` | `<Avatar />` | `name`（頭文字を出す）、`src`、`size` |
+| `Ui.Badge` | `<Badge>…</Badge>` | `count`（0 なら出さない）、`max`、`tone` |
+
+- 色の種類 `tone` は、どの部品でも `Ui.Theme` の `Primary` `Neutral` `Success` `Warning` `Danger`。
+- 大きさ `size` は、レイアウトタグと同じ `S` `M` `L`。
+- 開いているか・選んでいるかなどの状態は、ほかの値と同じく model に持つ。
+
+## 色と形を変える
+
+部品の見た目は、部品の外から `class` で上書きできない（Nene の規則）。変えられるのは CSS 変数だけで、アプリの入口のファイルの `style` ブロックに書く。
+
+```css
+style
+  :root {
+    --primary: #e11d48;
+    --radius: 6px;
+  }
+```
+
+| 変数 | 意味 |
+| --- | --- |
+| `--primary` `--neutral` `--success` `--warning` `--danger` | 色の種類ごとの色 |
+| `--on-tone` | 色の上に載せる文字の色 |
+| `--text` `--muted` | 文字の色、控えめな文字の色 |
+| `--surface` `--background` `--border` | 面、背景、枠線の色 |
+| `--radius` `--shadow` | 角の丸み、影 |
+
+既定の値は `light-dark()` でライトとダークの両方を持つ（[src/Ui/Theme.nn](src/Ui/Theme.nn)）。ダークにしないときは `:root { color-scheme: light; }`。

package/package.json

@@ -1,6 +1,37 @@
 {
   "name": "nene-lang-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Nene の公式 UI 部品集。ボタン・入力欄・ダイアログなど",
+  "type": "module",
+  "nene": {
+    "source": "src"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "nene-lang": "^0.1.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependenciesMeta": {
+    "nene-lang": {
+      "optional": true
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kimuracoki/nene.git",
+    "directory": "ui"
+  },
+  "homepage": "https://github.com/kimuracoki/nene/tree/main/ui#readme",
+  "license": "MIT",
+  "author": "kimuracoki",
+  "keywords": [
+    "nene",
+    "ui",
+    "components"
+  ]
+}

package/src/Ui/Alert.nn

@@ -0,0 +1,53 @@
+-- 知らせる枠。色の種類に合ったアイコンが付く
+--
+--   <Alert tone={Success} title="保存しました">次回からこの設定で開きます。</Alert>
+module Ui.Alert (AlertProps, alert) where
+
+import qualified Ui.Icon as Icon
+import Ui.Theme (Tone(..), toneVars)
+
+
+type AlertProps =
+  { tone  :: Tone   = Primary
+  , title :: String = ""
+  }
+
+
+alert :: AlertProps -> [Html msg] -> Html msg
+alert props children =
+  <div class={css.alert} vars={colors} role="status">
+    <Row gap={S}>
+      <span class={css.mark}><Icon name={symbol props.tone} /></span>
+      <Column gap={XS}>
+        <Heading text={props.title} />
+        <div class={css.body}>{children}</div>
+      </Column>
+    </Row>
+  </div>
+  where
+    colors = toneVars props.tone
+
+
+heading :: { text :: String } -> Html msg
+heading { text = "" } = <></>
+heading { text }      = <strong class={css.title}>{text}</strong>
+
+
+symbol :: Tone -> Icon.Icon
+symbol Primary = Icon.info
+symbol Neutral = Icon.info
+symbol Success = Icon.success
+symbol Warning = Icon.warning
+symbol Danger  = Icon.error
+
+
+style
+  .alert {
+    padding: 12px 16px;
+    border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
+    border-radius: var(--radius);
+    background: color-mix(in srgb, var(--tone) 8%, var(--surface));
+  }
+  .mark { color: var(--tone); line-height: 1.5; }
+  .title { color: var(--tone); }
+  .body { font-size: .9375rem; }

package/src/Ui/Avatar.nn

@@ -0,0 +1,49 @@
+-- 人を表す丸い印。画像がなければ名前の頭文字を出す
+--
+--   <Avatar name="Ada Lovelace" />
+--   <Avatar name="Ada Lovelace" src={Just user.photo} size={L} />
+module Ui.Avatar (AvatarProps, avatar) where
+
+
+type AvatarProps =
+  { name :: String
+  , src  :: Maybe String = Nothing
+  , size :: Size         = M
+  }
+
+
+avatar :: AvatarProps -> Html msg
+avatar props = <Face photo={props.src} />
+  where
+    look = classes [css.avatar, sizeClass props.size]
+    face { photo = Just url } = <img class={look} src={url} alt={props.name} />
+    face { photo = Nothing }  = <span class={look} title={props.name} aria-label={props.name}>{initials props.name}</span>
+
+
+-- "Ada Lovelace" は "AL"、"木村" は "木"
+initials :: String -> String
+initials name = String.toUpper (String.join "" (map (String.slice 0 1) (take 2 (words name))))
+
+
+sizeClass :: Size -> Class
+sizeClass XS = css.small
+sizeClass S  = css.small
+sizeClass L  = css.large
+sizeClass XL = css.large
+sizeClass _  = css.medium
+
+
+style
+  .avatar {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    border-radius: 50%;
+    object-fit: cover;
+    background: color-mix(in srgb, var(--primary) 18%, var(--surface));
+    color: var(--primary);
+    font-weight: 700;
+  }
+  .small  { width: 28px; height: 28px; font-size: .75rem; }
+  .medium { width: 40px; height: 40px; font-size: .9375rem; }
+  .large  { width: 64px; height: 64px; font-size: 1.375rem; }

package/src/Ui/Badge.nn

@@ -0,0 +1,50 @@
+-- 子要素の右上に数を重ねる。count が 0 のときは出さない
+--
+--   <Badge count={model.unread}>
+--     <IconButton icon={Icon.mail} label="メール" onClick={OpenMail} />
+--   </Badge>
+module Ui.Badge (BadgeProps, badge) where
+
+import Ui.Theme (Tone(..), toneVars)
+
+
+type BadgeProps =
+  { count :: Int
+  , max   :: Int  = 99     -- これを超えたら 99+ と出す
+  , tone  :: Tone = Danger
+  }
+
+
+badge :: BadgeProps -> [Html msg] -> Html msg
+badge props children =
+  <span class={css.anchor}>
+    {children}
+    <Count n={props.count} />
+  </span>
+  where
+    colors = toneVars props.tone
+    count { n = 0 } = <></>
+    count { n }     = <span class={css.badge} vars={colors}>{label n}</span>
+    label n
+      | n > props.max = show props.max ++ "+"
+      | otherwise     = show n
+
+
+style
+  .anchor { position: relative; display: inline-flex; }
+  .badge {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border: 2px solid var(--surface);
+    border-radius: 999px;
+    background: var(--tone);
+    color: var(--on-tone);
+    font-size: .6875rem;
+    font-weight: 700;
+    line-height: 14px;
+    text-align: center;
+  }

package/src/Ui/Button.nn

@@ -0,0 +1,97 @@
+-- ボタン
+--
+--   <Button onClick={Save}>保存</Button>
+--   <Button variant={Outlined} tone={Danger} startIcon={Just Icon.delete} onClick={Remove}>削除</Button>
+module Ui.Button (ButtonProps, Variant(..), button) where
+
+import qualified Ui.Icon as Icon
+import Ui.Theme (Tone(..), toneVars)
+
+
+data Variant = Filled | Outlined | Plain
+
+type ButtonProps msg =
+  { onClick   :: msg
+  , variant   :: Variant         = Filled
+  , tone      :: Tone            = Primary
+  , size      :: Size            = M
+  , startIcon :: Maybe Icon.Icon = Nothing
+  , endIcon   :: Maybe Icon.Icon = Nothing
+  , disabled  :: Bool            = False
+  , fullWidth :: Bool            = False
+  }
+
+
+button :: ButtonProps msg -> [Html msg] -> Html msg
+button props children =
+  <button class={look} vars={colors} type="button" disabled={props.disabled} onClick={props.onClick}>
+    <Row gap={S} align={Center} justify={Center}>
+      <Slot icon={props.startIcon} />
+      {children}
+      <Slot icon={props.endIcon} />
+    </Row>
+  </button>
+  where
+    colors = toneVars props.tone
+    look = classes [css.button, variantClass props.variant, sizeClass props.size, width]
+    width
+      | props.fullWidth = css.full
+      | otherwise       = classes []
+
+
+slot :: { icon :: Maybe Icon.Icon } -> Html msg
+slot { icon = Just i }  = <Icon name={i} />
+slot { icon = Nothing } = <></>
+
+
+variantClass :: Variant -> Class
+variantClass Filled   = css.filled
+variantClass Outlined = css.outlined
+variantClass Plain    = css.plain
+
+sizeClass :: Size -> Class
+sizeClass XS = css.small
+sizeClass S  = css.small
+sizeClass L  = css.large
+sizeClass XL = css.large
+sizeClass _  = css.medium
+
+
+style
+  .button {
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    font-weight: 600;
+    line-height: 1.2;
+    white-space: nowrap;
+    transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s;
+  }
+  .button:focus-visible { outline: 3px solid color-mix(in srgb, var(--tone) 35%, transparent); outline-offset: 1px; }
+  .button:active:not(:disabled) { transform: translateY(1px); }
+  .button:disabled { opacity: .45; cursor: not-allowed; }
+  .small  { padding: 6px 12px; font-size: .8125rem; }
+  .medium { padding: 9px 16px; font-size: .9375rem; }
+  .large  { padding: 12px 22px; font-size: 1.0625rem; }
+  .full   { width: 100%; }
+
+  .filled {
+    background: var(--tone);
+    color: var(--on-tone);
+  }
+  .filled:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--tone) 88%, var(--text));
+    box-shadow: 0 4px 14px color-mix(in srgb, var(--tone) 30%, transparent);
+  }
+  .outlined {
+    border-color: color-mix(in srgb, var(--tone) 55%, transparent);
+    background: none;
+    color: var(--tone);
+  }
+  .plain {
+    background: none;
+    color: var(--tone);
+  }
+  .outlined:hover:not(:disabled),
+  .plain:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--tone) 10%, transparent);
+  }

package/src/Ui/Card.nn

@@ -0,0 +1,48 @@
+-- 内容をまとめる面。title を書くと見出しが付く
+--
+--   <Card title="プロフィール">…</Card>
+--   <Card padding={None}>…</Card>       -- 中身を端まで広げる（リストなど）
+module Ui.Card (CardProps, card) where
+
+
+type CardProps =
+  { title   :: String = ""
+  , padding :: Size   = L
+  }
+
+
+card :: CardProps -> [Html msg] -> Html msg
+card props children =
+  <section class={css.card} vars={space}>
+    <Column gap={M}>
+      <Heading text={props.title} />
+      {children}
+    </Column>
+  </section>
+  where
+    space = { cardPadding = spacing props.padding }
+
+
+heading :: { text :: String } -> Html msg
+heading { text = "" } = <></>
+heading { text }      = <h2 class={css.title}>{text}</h2>
+
+
+spacing :: Size -> String
+spacing None = "0"
+spacing XS   = "var(--space-xs)"
+spacing S    = "var(--space-s)"
+spacing M    = "var(--space-m)"
+spacing L    = "var(--space-l)"
+spacing XL   = "var(--space-xl)"
+
+
+style
+  .card {
+    padding: var(--card-padding);
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) + 4px);
+    background: var(--surface);
+    box-shadow: var(--shadow);
+  }
+  .title { font-size: 1.0625rem; font-weight: 700; }

package/src/Ui/Checkbox.nn

@@ -0,0 +1,34 @@
+-- チェックボックス
+--
+--   <Checkbox label="利用規約に同意する" checked={model.agreed} onCheck={Agreed} />
+module Ui.Checkbox (CheckboxProps, checkbox) where
+
+
+type CheckboxProps msg =
+  { checked  :: Bool
+  , onCheck  :: Bool -> msg
+  , label    :: String = ""
+  , disabled :: Bool   = False
+  }
+
+
+checkbox :: CheckboxProps msg -> Html msg
+checkbox props =
+  <label class={css.option}>
+    <Row gap={S} align={Center}>
+      <input class={css.box} type="checkbox" checked={props.checked} disabled={props.disabled} onCheck={props.onCheck} />
+      <span>{props.label}</span>
+    </Row>
+  </label>
+
+
+style
+  .option { cursor: pointer; user-select: none; }
+  .box {
+    width: 18px;
+    height: 18px;
+    margin: 0;
+    accent-color: var(--primary);
+    cursor: pointer;
+  }
+  .box:disabled, .box:disabled + span { opacity: .5; cursor: not-allowed; }

package/src/Ui/Chip.nn

@@ -0,0 +1,53 @@
+-- 小さなラベル。onClick を渡すと押せるチップ（絞り込みなど）になる
+--
+--   <Chip tone={Success}>完了</Chip>
+--   <Chip selected={isAll} onClick={Just (SetFilter All)}>すべて</Chip>
+module Ui.Chip (ChipProps, chip) where
+
+import Ui.Theme (Tone(..), toneVars)
+
+
+type ChipProps msg =
+  { onClick  :: Maybe msg = Nothing
+  , selected :: Bool      = False
+  , tone     :: Tone      = Neutral
+  }
+
+
+chip :: ChipProps msg -> [Html msg] -> Html msg
+chip props children = <Body action={props.onClick}>{children}</Body>
+  where
+    -- 押せるチップはボタンに、押せないチップはただの文字にする
+    body { action = Just msg } kids = <button class={look} vars={colors} type="button" aria-pressed={pressed} onClick={msg}>{kids}</button>
+    body { action = Nothing } kids  = <span class={look} vars={colors}>{kids}</span>
+
+    colors = toneVars props.tone
+    look
+      | props.selected = classes [css.chip, css.selected]
+      | otherwise      = css.chip
+    pressed
+      | props.selected = "true"
+      | otherwise      = "false"
+
+
+style
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 12px;
+    border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--tone) 10%, transparent);
+    color: var(--tone);
+    font-size: .8125rem;
+    font-weight: 600;
+    line-height: 1.5;
+  }
+  button.chip { transition: background-color .15s; }
+  button.chip:hover { background: color-mix(in srgb, var(--tone) 18%, transparent); }
+  .selected, button.selected:hover {
+    border-color: var(--tone);
+    background: var(--tone);
+    color: var(--on-tone);
+  }

package/src/Ui/Dialog.nn

@@ -0,0 +1,73 @@
+-- 画面の上に重ねて出す対話の枠。開いているかどうかは model に持つ
+--
+--   <Dialog open={model.confirming} title="削除しますか？" onClose={Cancel}>
+--     <p>この操作は取り消せません。</p>
+--     <Row gap={S} justify={End}>
+--       <Button variant={Plain} tone={Neutral} onClick={Cancel}>やめる</Button>
+--       <Button tone={Danger} onClick={Confirm}>削除</Button>
+--     </Row>
+--   </Dialog>
+--
+-- 背景を押すか、右上のボタンで onClose が届く。Esc で閉じるには Keyboard.onKeyDown を購読する
+module Ui.Dialog (DialogProps, dialog) where
+
+import qualified Ui.Icon as Icon
+import Ui.IconButton
+
+
+type DialogProps msg =
+  { open    :: Bool
+  , onClose :: msg
+  , title   :: String = ""
+  }
+
+
+dialog :: DialogProps msg -> [Html msg] -> Html msg
+dialog props children = <Body visible={props.open} />
+  where
+    body { visible = True } =
+      <div class={css.overlay}>
+        <div class={css.backdrop} onClick={props.onClose} />
+        <section class={css.panel} role="dialog" aria-modal="true" aria-label={props.title}>
+          <Column gap={M}>
+            <Row gap={S} align={Center}>
+              <h2 class={css.title}>{props.title}</h2>
+              <Spacer />
+              <IconButton icon={Icon.close} label="閉じる" size={S} onClick={props.onClose} />
+            </Row>
+            {children}
+          </Column>
+        </section>
+      </div>
+    body { visible = False } = <></>
+
+
+style
+  .overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    display: grid;
+    place-items: center;
+    padding: 16px;
+  }
+  .backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgb(10 10 20 / .45);
+    animation: fade .15s ease-out;
+  }
+  .panel {
+    position: relative;
+    width: min(480px, 100%);
+    max-height: calc(100vh - 32px);
+    overflow: auto;
+    padding: 20px 24px 24px;
+    border-radius: calc(var(--radius) + 6px);
+    background: var(--surface);
+    box-shadow: 0 24px 64px rgb(0 0 0 / .25);
+    animation: rise .18s ease-out;
+  }
+  .title { font-size: 1.125rem; font-weight: 700; }
+  @keyframes fade { from { opacity: 0; } }
+  @keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.98); } }

package/src/Ui/Icon.nn

@@ -0,0 +1,90 @@
+-- アイコン。Icon.close のような値で選ぶので、名前を打ち間違えるとコンパイルエラーになる
+--
+--   import qualified Ui.Icon as Icon
+--   <Icon name={Icon.search} />
+--
+-- 色は文字の色（currentColor）、大きさは文字の大きさに合わせる
+module Ui.Icon (Icon, icon, add, remove, close, check, chevronDown, chevronUp, chevronLeft, chevronRight, arrowLeft, arrowRight, search, menu, more, edit, delete, star, starFilled, heart, home, user, settings, info, success, warning, error, mail, calendar, upload, download, link) where
+
+
+data Icon = Icon Class
+
+
+icon :: { name :: Icon } -> Html msg
+icon { name = Icon glyph } = <span class={look} aria-hidden="true" />
+  where
+    look = classes [css.icon, glyph]
+
+
+add          = Icon css.add   -- 足す
+remove       = Icon css.remove   -- 減らす
+close        = Icon css.close   -- 閉じる
+check        = Icon css.check   -- チェック
+chevronDown  = Icon css.chevronDown   -- 下向きの矢じり
+chevronUp    = Icon css.chevronUp   -- 上向きの矢じり
+chevronLeft  = Icon css.chevronLeft   -- 左向きの矢じり
+chevronRight = Icon css.chevronRight   -- 右向きの矢じり
+arrowLeft    = Icon css.arrowLeft   -- 左矢印
+arrowRight   = Icon css.arrowRight   -- 右矢印
+search       = Icon css.search   -- 検索
+menu         = Icon css.menu   -- メニュー
+more         = Icon css.more   -- その他
+edit         = Icon css.edit   -- 編集
+delete       = Icon css.delete   -- 削除
+star         = Icon css.star   -- 星
+starFilled   = Icon css.starFilled   -- 塗りつぶした星
+heart        = Icon css.heart   -- ハート
+home         = Icon css.home   -- ホーム
+user         = Icon css.user   -- 人
+settings     = Icon css.settings   -- 設定
+info         = Icon css.info   -- お知らせ
+success      = Icon css.success   -- 成功
+warning      = Icon css.warning   -- 注意
+error        = Icon css.error   -- エラー
+mail         = Icon css.mail   -- メール
+calendar     = Icon css.calendar   -- カレンダー
+upload       = Icon css.upload   -- アップロード
+download     = Icon css.download   -- ダウンロード
+link         = Icon css.link   -- リンク
+
+
+style
+  .icon {
+    display: inline-block;
+    flex: none;
+    width: 1.25em;
+    height: 1.25em;
+    background: currentColor;
+    -webkit-mask: var(--glyph) center / contain no-repeat;
+    mask: var(--glyph) center / contain no-repeat;
+  }
+  .add { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
+  .remove { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
+  .close { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
+  .check { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
+  .chevron-down { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
+  .chevron-up { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E"); }
+  .chevron-left { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
+  .chevron-right { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
+  .arrow-left { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E"); }
+  .arrow-right { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E"); }
+  .search { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
+  .menu { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E"); }
+  .more { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3C/svg%3E"); }
+  .edit { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }
+  .delete { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
+  .star { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1Z'/%3E%3C/svg%3E"); }
+  .star-filled { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='black' d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1Z'/%3E%3C/svg%3E"); }
+  .heart { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7Z'/%3E%3C/svg%3E"); }
+  .home { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E"); }
+  .user { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
+  .settings { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 17h16'/%3E%3Ccircle cx='9' cy='7' r='2.5' fill='white'/%3E%3Ccircle cx='15' cy='17' r='2.5' fill='white'/%3E%3C/svg%3E"); }
+  .info { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
+  .success { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
+  .warning { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0ZM12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
+  .error { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E"); }
+  .mail { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
+  .calendar { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
+  .upload { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E"); }
+  .download { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }
+  .link { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); }

package/src/Ui/IconButton.nn

@@ -0,0 +1,63 @@
+-- アイコンだけのボタン。label は画面には出ず、読み上げとツールチップに使う
+--
+--   <IconButton icon={Icon.close} label="閉じる" onClick={Close} />
+module Ui.IconButton (IconButtonProps, iconButton) where
+
+import Ui.Button (Variant(..))
+import qualified Ui.Icon as Icon
+import Ui.Theme (Tone(..), toneVars)
+
+
+type IconButtonProps msg =
+  { icon     :: Icon.Icon
+  , label    :: String
+  , onClick  :: msg
+  , variant  :: Variant = Plain
+  , tone     :: Tone    = Neutral
+  , size     :: Size    = M
+  , disabled :: Bool    = False
+  }
+
+
+iconButton :: IconButtonProps msg -> Html msg
+iconButton props =
+  <button class={look} vars={colors} type="button" title={props.label} aria-label={props.label} disabled={props.disabled} onClick={props.onClick}>
+    <Icon name={props.icon} />
+  </button>
+  where
+    colors = toneVars props.tone
+    look = classes [css.iconButton, variantClass props.variant, sizeClass props.size]
+
+
+variantClass :: Variant -> Class
+variantClass Filled   = css.filled
+variantClass Outlined = css.outlined
+variantClass Plain    = css.plain
+
+sizeClass :: Size -> Class
+sizeClass XS = css.small
+sizeClass S  = css.small
+sizeClass L  = css.large
+sizeClass XL = css.large
+sizeClass _  = css.medium
+
+
+style
+  .icon-button {
+    display: inline-grid;
+    place-items: center;
+    border: 1px solid transparent;
+    border-radius: 999px;
+    transition: background-color .15s, color .15s;
+  }
+  .icon-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--tone) 35%, transparent); }
+  .icon-button:disabled { opacity: .45; cursor: not-allowed; }
+  .small  { width: 30px; height: 30px; font-size: .8125rem; }
+  .medium { width: 38px; height: 38px; font-size: .9375rem; }
+  .large  { width: 48px; height: 48px; font-size: 1.125rem; }
+  .filled { background: var(--tone); color: var(--on-tone); }
+  .filled:hover:not(:disabled) { background: color-mix(in srgb, var(--tone) 88%, var(--text)); }
+  .outlined { border-color: var(--border); background: none; color: var(--tone); }
+  .plain { background: none; color: var(--tone); }
+  .outlined:hover:not(:disabled),
+  .plain:hover:not(:disabled) { background: color-mix(in srgb, var(--tone) 12%, transparent); }

package/src/Ui/Progress.nn

@@ -0,0 +1,62 @@
+-- 進み具合のバー。value は 0 から 1。Nothing なら終わりの見えない処理として動き続ける
+--
+--   <Progress value={Just 0.4} />
+module Ui.Progress (ProgressProps, progress) where
+
+import Ui.Theme (Tone(..), toneVars)
+
+
+type ProgressProps =
+  { value :: Maybe Float = Nothing
+  , tone  :: Tone        = Primary
+  }
+
+
+progress :: ProgressProps -> Html msg
+progress props = <Bar value={props.value} />
+  where
+    colors = toneVars props.tone
+    bar { value = Just v } =
+      <div class={css.track} vars={colors} role="progressbar" aria-valuenow={percent}>
+        <div class={css.fill} vars={filled} />
+      </div>
+      where
+        percent = show (round (clamp v * 100.0))
+        filled  = { progress = percent ++ "%" }
+    bar { value = Nothing } =
+      <div class={css.track} vars={colors} role="progressbar">
+        <div class={css.moving} />
+      </div>
+
+
+clamp :: Float -> Float
+clamp v = max 0.0 (min 1.0 v)
+
+
+style
+  .track {
+    position: relative;
+    height: 6px;
+    overflow: hidden;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--tone) 15%, transparent);
+  }
+  .fill {
+    width: var(--progress);
+    height: 100%;
+    border-radius: inherit;
+    background: var(--tone);
+    transition: width .3s;
+  }
+  .moving {
+    position: absolute;
+    width: 40%;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--tone);
+    animation: slide 1.2s ease-in-out infinite;
+  }
+  @keyframes slide {
+    from { left: -40%; }
+    to { left: 100%; }
+  }

package/src/Ui/Select.nn

@@ -0,0 +1,56 @@
+-- 選択肢から 1 つを選ぶ。options は（値, 表示する文字）の組
+--
+--   <Select label="並び順" value={model.order} options={orders} onChange={OrderChanged} />
+--     where
+--       orders = [("new", "新しい順"), ("old", "古い順")]
+module Ui.Select (SelectProps, select) where
+
+
+type SelectProps msg =
+  { value    :: String
+  , options  :: [(String, String)]
+  , onChange :: String -> msg
+  , label    :: String = ""
+  , disabled :: Bool   = False
+  }
+
+
+select :: SelectProps msg -> Html msg
+select props =
+  <label class={css.field}>
+    <Column gap={XS}>
+      <Caption text={props.label} />
+      <select class={css.box} disabled={props.disabled} onChange={props.onChange}>
+        {map choice props.options}
+      </select>
+    </Column>
+  </label>
+  where
+    choice (value, text) = <option value={value} selected={chosen}>{text}</option>
+      where
+        chosen = value == props.value
+
+
+caption :: { text :: String } -> Html msg
+caption { text = "" } = <></>
+caption { text }      = <span class={css.caption}>{text}</span>
+
+
+style
+  .field { display: block; }
+  .caption { font-size: .8125rem; font-weight: 600; }
+  .box {
+    width: 100%;
+    padding: 9px 36px 9px 12px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat;
+    appearance: none;
+    cursor: pointer;
+  }
+  .box:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
+  }
+  .box:disabled { opacity: .55; cursor: not-allowed; }

package/src/Ui/Spinner.nn

@@ -0,0 +1,39 @@
+-- 読み込み中を表す回転する印
+--
+--   <Spinner />
+module Ui.Spinner (SpinnerProps, spinner) where
+
+
+type SpinnerProps =
+  { size  :: Size   = M
+  , label :: String = "読み込み中"
+  }
+
+
+spinner :: SpinnerProps -> Html msg
+spinner props = <span class={look} role="status" aria-label={props.label} />
+  where
+    look = classes [css.spinner, sizeClass props.size]
+
+
+sizeClass :: Size -> Class
+sizeClass XS = css.small
+sizeClass S  = css.small
+sizeClass L  = css.large
+sizeClass XL = css.large
+sizeClass _  = css.medium
+
+
+style
+  .spinner {
+    display: inline-block;
+    flex: none;
+    border: 2px solid color-mix(in srgb, var(--primary) 20%, transparent);
+    border-top-color: var(--primary);
+    border-radius: 50%;
+    animation: spin .7s linear infinite;
+  }
+  .small  { width: 16px; height: 16px; }
+  .medium { width: 24px; height: 24px; }
+  .large  { width: 40px; height: 40px; border-width: 3px; }
+  @keyframes spin { to { transform: rotate(360deg); } }

package/src/Ui/Switch.nn

@@ -0,0 +1,54 @@
+-- オンとオフを切り替えるスイッチ
+--
+--   <Switch label="通知を受け取る" checked={model.notify} onCheck={NotifyChanged} />
+module Ui.Switch (SwitchProps, switch) where
+
+
+type SwitchProps msg =
+  { checked  :: Bool
+  , onCheck  :: Bool -> msg
+  , label    :: String = ""
+  , disabled :: Bool   = False
+  }
+
+
+switch :: SwitchProps msg -> Html msg
+switch props =
+  <label class={css.option}>
+    <Row gap={S} align={Center}>
+      <input class={css.track} type="checkbox" role="switch" checked={props.checked} disabled={props.disabled} onCheck={props.onCheck} />
+      <span>{props.label}</span>
+    </Row>
+  </label>
+
+
+style
+  .option { cursor: pointer; user-select: none; }
+  .track {
+    appearance: none;
+    position: relative;
+    flex: none;
+    width: 40px;
+    height: 22px;
+    margin: 0;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--neutral) 40%, transparent);
+    cursor: pointer;
+    transition: background-color .2s;
+  }
+  .track::after {
+    content: "";
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: white;
+    box-shadow: 0 1px 2px rgb(0 0 0 / .25);
+    transition: transform .2s;
+  }
+  .track:checked { background: var(--primary); }
+  .track:checked::after { transform: translateX(18px); }
+  .track:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); }
+  .track:disabled { opacity: .5; cursor: not-allowed; }

package/src/Ui/Tabs.nn

@@ -0,0 +1,50 @@
+-- タブ。どれを選んでいるかは model に持つ（0 から数える）
+--
+--   <Tabs labels={sections} selected={model.tab} onSelect={TabChanged} />
+--     where
+--       sections = ["概要", "設定", "履歴"]
+module Ui.Tabs (TabsProps, tabs) where
+
+
+type TabsProps msg =
+  { labels   :: [String]
+  , selected :: Int
+  , onSelect :: Int -> msg
+  }
+
+
+tabs :: TabsProps msg -> Html msg
+tabs props =
+  <div class={css.tabs} role="tablist">
+    <Row>{List.indexedMap tab props.labels}</Row>
+  </div>
+  where
+    tab i label = <button class={look} type="button" role="tab" aria-selected={state} onClick={choose}>{label}</button>
+      where
+        active = i == props.selected
+        choose = props.onSelect i
+        look
+          | active    = classes [css.tab, css.active]
+          | otherwise = css.tab
+        state
+          | active    = "true"
+          | otherwise = "false"
+
+
+style
+  .tabs { border-bottom: 1px solid var(--border); }
+  .tab {
+    margin-bottom: -1px;
+    padding: 10px 16px;
+    border: none;
+    border-bottom: 2px solid transparent;
+    background: none;
+    color: var(--muted);
+    font-weight: 600;
+    transition: color .15s, border-color .15s;
+  }
+  .tab:hover { color: var(--text); }
+  .active, .active:hover {
+    border-bottom-color: var(--primary);
+    color: var(--primary);
+  }

package/src/Ui/TextField.nn

@@ -0,0 +1,80 @@
+-- 1 行の入力欄。ラベル・説明・エラーを添えられる
+--
+--   <TextField label="メール" kind={Email} value={model.email} onInput={EmailChanged} error={model.emailError} />
+module Ui.TextField (TextFieldProps, InputKind(..), textField) where
+
+
+data InputKind = PlainText | Email | Password | Number | Search | Tel
+
+type TextFieldProps msg =
+  { value       :: String
+  , onInput     :: String -> msg
+  , label       :: String       = ""
+  , placeholder :: String       = ""
+  , helper      :: String       = ""          -- 欄の下に出す説明
+  , error       :: Maybe String = Nothing     -- Just なら赤くして、説明の代わりに出す
+  , kind        :: InputKind    = PlainText
+  , disabled    :: Bool         = False
+  }
+
+
+textField :: TextFieldProps msg -> Html msg
+textField props =
+  <label class={css.field}>
+    <Column gap={XS}>
+      <Caption text={props.label} />
+      <input class={box} type={inputType props.kind} value={props.value} placeholder={props.placeholder} disabled={props.disabled} aria-invalid={invalid} onInput={props.onInput} />
+      <Note helper={props.helper} error={props.error} />
+    </Column>
+  </label>
+  where
+    box
+      | props.error /= Nothing = classes [css.box, css.invalid]
+      | otherwise              = css.box
+    invalid
+      | props.error /= Nothing = "true"
+      | otherwise              = "false"
+
+
+caption :: { text :: String } -> Html msg
+caption { text = "" } = <></>
+caption { text }      = <span class={css.caption}>{text}</span>
+
+note :: { helper :: String, error :: Maybe String } -> Html msg
+note { error = Just message } = <span class={css.error}>{message}</span>
+note { helper = "" }          = <></>
+note { helper }               = <span class={css.helper}>{helper}</span>
+
+
+inputType :: InputKind -> String
+inputType PlainText = "text"
+inputType Email     = "email"
+inputType Password  = "password"
+inputType Number    = "number"
+inputType Search    = "search"
+inputType Tel       = "tel"
+
+
+style
+  .field { display: block; flex: 1; }
+  .caption { font-size: .8125rem; font-weight: 600; color: var(--text); }
+  .box {
+    width: 100%;
+    padding: 9px 12px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--surface);
+    transition: border-color .15s, box-shadow .15s;
+  }
+  .box:hover:not(:disabled) { border-color: color-mix(in srgb, var(--text) 30%, var(--border)); }
+  .box:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
+  }
+  .box:disabled { opacity: .55; cursor: not-allowed; }
+  .invalid, .invalid:focus { border-color: var(--danger); }
+  .invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
+  .helper, .error { font-size: .8125rem; }
+  .helper { color: var(--muted); }
+  .error { color: var(--danger); }

package/src/Ui/Theme.nn

@@ -0,0 +1,41 @@
+-- 色と形の決まり（CSS 変数）と、部品に共通の色の種類（Tone）
+--
+-- 色を変えるときは、アプリの入口のファイルの style ブロックで :root の変数を上書きする:
+--
+--   style
+--     :root { --primary: #e11d48; --radius: 6px; }
+--
+-- ライトとダークの両方の色を light-dark() で持つ。ダークにしないときは :root { color-scheme: light; }
+module Ui.Theme (Tone(..), toneVars) where
+
+
+-- 部品の色の種類。どの部品でも同じものを使う
+data Tone = Primary | Neutral | Success | Warning | Danger
+
+
+-- 部品の style ブロックで var(--tone) として使う
+toneVars :: Tone -> { tone :: String }
+toneVars Primary = { tone = "var(--primary)" }
+toneVars Neutral = { tone = "var(--neutral)" }
+toneVars Success = { tone = "var(--success)" }
+toneVars Warning = { tone = "var(--warning)" }
+toneVars Danger  = { tone = "var(--danger)" }
+
+
+style
+  :root {
+    color-scheme: light dark;
+    --primary: light-dark(#5b5bd6, #8b8bf5);
+    --neutral: light-dark(#5f6372, #a4a8b5);
+    --success: light-dark(#18864b, #3dd68c);
+    --warning: light-dark(#b45309, #f5b14c);
+    --danger: light-dark(#d03a3a, #ff6b6b);
+    --on-tone: light-dark(#ffffff, #111216);
+    --text: light-dark(#1d1e24, #ecedf2);
+    --muted: light-dark(#6b6f7d, #9a9eab);
+    --surface: light-dark(#ffffff, #1b1c22);
+    --background: light-dark(#f6f6f9, #111216);
+    --border: light-dark(#dfe0e6, #2e3039);
+    --radius: 10px;
+    --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 4px 16px rgb(0 0 0 / .06);
+  }