nene-lang-ui 0.0.0-stage → 0.1.2

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,72 @@
-# 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 部品集。ボタン・入力欄・ダイアログ・メニューなど 20 の部品がそろっている。ライトとダークの両方に対応し、色は 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` |
+| `Ui.Menu` | `<Menu />` | `id`、`label`、`items`（`Item { label, onClick, icon, tone }` のリスト）、`variant` |
+| `Ui.Popover` | `<Popover>…</Popover>` | `id`、`label`、`variant`。中身は自由 |
+| `Ui.Accordion` | `<Accordion>…</Accordion>` | `title`、`open`（最初から開くか）、`group`（同じ group は 1 つだけ開く） |
+| `Ui.Tooltip` | `<Tooltip>…</Tooltip>` | `text` |
+
+- 色の種類 `tone` は、どの部品でも `Ui.Theme` の `Primary` `Neutral` `Success` `Warning` `Danger`。
+- 大きさ `size` は、レイアウトタグと同じ `S` `M` `L`。
+- アプリが知る必要のある状態（入力した値、選んだタブ、Dialog を開いているか）は model に持つ。
+- Menu・Popover・Accordion・Tooltip の開け閉めはブラウザが受け持つので、model に何も足さなくてよい。Menu と Popover の `id` は、ページの中で重ならない名前にする。
+
+## 色と形を変える
+
+部品の見た目は、部品の外から `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.2",
+  "description": "Nene の公式 UI 部品集。ボタン・入力欄・ダイアログなど",
+  "type": "module",
+  "nene": {
+    "source": "src"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "nene-lang": "^0.1.2"
+  },
+  "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/Accordion.nn

@@ -0,0 +1,43 @@
+-- 見出しを押すと開け閉めできる枠。開け閉めはブラウザが受け持つので、model に何も足さなくてよい
+--
+--   <Accordion title="よくある質問">…</Accordion>
+--   <Accordion title="支払い" group="faq">…</Accordion>   -- 同じ group のものは、1 つだけが開く
+module Ui.Accordion (AccordionProps, accordion) where
+
+import qualified Ui.Icon as Icon
+
+
+type AccordionProps =
+  { title :: String
+  , open  :: Bool   = False    -- 最初から開いておくか
+  , group :: String = ""
+  }
+
+
+accordion :: AccordionProps -> [Html msg] -> Html msg
+accordion props children =
+  <details class={css.accordion} open={props.open} name={props.group}>
+    <summary class={css.summary}>
+      <Row gap={S} align={Center}>
+        <span class={css.title}>{props.title}</span>
+        <Spacer />
+        <span class={css.chevron}><Icon name={Icon.chevronDown} /></span>
+      </Row>
+    </summary>
+    <div class={css.body}>{children}</div>
+  </details>
+
+
+style
+  .accordion { border-bottom: 1px solid var(--border); }
+  .summary {
+    padding: 12px 4px;
+    list-style: none;
+    cursor: pointer;
+  }
+  .summary::-webkit-details-marker { display: none; }
+  .summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 4px; }
+  .title { font-weight: 600; }
+  .chevron { display: inline-flex; color: var(--muted); transition: transform .2s; }
+  .accordion[open] .chevron { transform: rotate(180deg); }
+  .body { padding: 0 4px 16px; color: var(--muted); }

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); } }