[
  {
    "id": "tm-action",
    "name": "アクションボタン",
    "category": "操作",
    "description": "実行前・処理中・完了を伝える。",
    "code": "<tm-action label=\"保存する\"></tm-action>",
    "api": "tm-action / busy / disabled",
    "source": "thinkmove-ui.js"
  },
  {
    "id": "tm-choice",
    "name": "選択スイッチ",
    "category": "操作",
    "description": "期間や表示方法を切り替える。",
    "code": "<tm-choice label=\"表示期間\" options='[\"月次\",\"四半期\",\"年次\"]'></tm-choice>",
    "api": "tm-change / value",
    "source": "thinkmove-ui.js"
  },
  {
    "id": "tm-tabs",
    "name": "タブ",
    "category": "操作",
    "description": "情報を分け、必要な内容へ移る。",
    "code": "<tm-tabs></tm-tabs>",
    "api": "tm-change / items",
    "source": "thinkmove-ui.js"
  },
  {
    "id": "tm-field",
    "name": "入力とエラー表示",
    "category": "入力",
    "description": "形式の間違いを、その場で伝える。",
    "code": "<tm-field label=\"メールアドレス\" required></tm-field>",
    "api": "tm-input / value / validate()",
    "source": "thinkmove-ui.js"
  },
  {
    "id": "tm-search",
    "name": "絞り込み検索",
    "category": "入力",
    "description": "入力に合わせて候補を絞る。",
    "code": "<tm-search items='[\"月次レポート\",\"SEO診断\"]'></tm-search>",
    "api": "tm-search / items",
    "source": "thinkmove-ui.js"
  },
  {
    "id": "tm-checklist",
    "name": "チェックリスト",
    "category": "入力",
    "description": "やることと完了したことを揃える。",
    "code": "<tm-checklist items='[\"目的の確認\",\"根拠の確認\"]'></tm-checklist>",
    "api": "tm-change / value",
    "source": "thinkmove-ui.js"
  },
  {
    "id": "tm-accordion",
    "name": "開閉する補足",
    "category": "説明",
    "description": "読みたい説明だけを開く。",
    "code": "<tm-accordion items='[{\"title\":\"使い方\",\"body\":\"補足説明です。\"}]'></tm-accordion>",
    "api": "items / native details",
    "source": "thinkmove-ui.js"
  },
  {
    "id": "tm-stepper",
    "name": "手順ナビゲーション",
    "category": "説明",
    "description": "今どこにいるかを、順序で伝える。",
    "code": "<tm-stepper steps='[\"確認\",\"準備\",\"実施\"]'></tm-stepper>",
    "api": "value (0-based) / steps",
    "source": "thinkmove-ui.js"
  },
  {
    "id": "tm-progress",
    "name": "進捗バー",
    "category": "説明",
    "description": "どこまで進んだかを量で示す。",
    "code": "<tm-progress label=\"準備の進捗\" value=\"25\"></tm-progress>",
    "api": "value (0–100) / label",
    "source": "thinkmove-ui.js"
  },
  {
    "id": "tm-notice",
    "name": "完了通知",
    "category": "確認",
    "description": "操作の結果を画面内で伝える。",
    "code": "<tm-notice id=\"notice\"></tm-notice>\n<script>\ncustomElements.whenDefined(\"tm-notice\").then(() => {\n  document.querySelector(\"#notice\").show(\"保存しました\");\n});\n</script>",
    "api": "show(message) / tm-dismiss",
    "source": "thinkmove-ui.js"
  },
  {
    "id": "tm-dialog",
    "name": "確認ダイアログ",
    "category": "確認",
    "description": "反映する前に、内容を確かめる。",
    "code": "<tm-dialog heading=\"変更を反映しますか？\"></tm-dialog>",
    "api": "show() / tm-confirm / Escape",
    "source": "thinkmove-ui.js"
  },
  {
    "id": "tm-metric",
    "name": "指標と比較",
    "category": "確認",
    "description": "数値と比較元を、ひとまとまりに。",
    "code": "<tm-metric label=\"完了した項目\" current=\"124\" previous=\"100\" unit=\"件\"></tm-metric>",
    "api": "current / previous / unit",
    "source": "thinkmove-ui.js"
  },
  {
    "id": "playful-toggle-liquid",
    "name": "オン・オフ",
    "category": "スイッチ",
    "code": "<playful-toggle variant=\"liquid\"></playful-toggle>",
    "source": "playful-toggle.js"
  },
  {
    "id": "playful-toggle-eclipse",
    "name": "ライト・ダーク",
    "category": "スイッチ",
    "code": "<playful-toggle variant=\"eclipse\"></playful-toggle>",
    "source": "playful-toggle.js"
  },
  {
    "id": "playful-toggle-orbit",
    "name": "個別・全体",
    "category": "スイッチ",
    "code": "<playful-toggle variant=\"orbit\"></playful-toggle>",
    "source": "playful-toggle.js"
  },
  {
    "id": "playful-toggle-shutter",
    "name": "詳細の開閉",
    "category": "スイッチ",
    "code": "<playful-toggle variant=\"shutter\"></playful-toggle>",
    "source": "playful-toggle.js"
  },
  {
    "id": "playful-toggle-magnetic",
    "name": "接続状態",
    "category": "スイッチ",
    "code": "<playful-toggle variant=\"magnetic\"></playful-toggle>",
    "source": "playful-toggle.js"
  },
  {
    "id": "playful-toggle-signal",
    "name": "音声状態",
    "category": "スイッチ",
    "code": "<playful-toggle variant=\"signal\"></playful-toggle>",
    "source": "playful-toggle.js"
  },
  {
    "id": "tm-object-elastic",
    "name": "Elastic intent",
    "category": "触れる作品",
    "description": "引く距離に合わせて球と接続部分が伸びる",
    "code": "<tm-object kind=\"elastic\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects.js"
  },
  {
    "id": "tm-object-magnetic",
    "name": "Shared gravity",
    "category": "触れる作品",
    "description": "二つの立体が近づき、角度を揃えて吸着する",
    "code": "<tm-object kind=\"magnetic\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects.js"
  },
  {
    "id": "tm-object-aperture",
    "name": "Open question",
    "category": "触れる作品",
    "description": "7枚の絞りが開いて奥の形が現れる",
    "code": "<tm-object kind=\"aperture\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects.js"
  },
  {
    "id": "tm-object-orbit",
    "name": "Another angle",
    "category": "触れる作品",
    "description": "立体の球面を左右に回して視点を切り替える",
    "code": "<tm-object kind=\"orbit\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects.js"
  },
  {
    "id": "tm-object-signal",
    "name": "Find the signal",
    "category": "触れる作品",
    "description": "小さな揺らぎが輪郭のある波形に変わる",
    "code": "<tm-object kind=\"signal\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects.js"
  },
  {
    "id": "tm-object-layers",
    "name": "Room to think",
    "category": "触れる作品",
    "description": "重なった3枚のカードが扇状に広がる",
    "code": "<tm-object kind=\"layers\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects.js"
  },
  {
    "id": "tm-object-bloom",
    "name": "Small beginnings",
    "category": "触れる作品",
    "description": "花びらが回転しながら広がり、一輪の花になる",
    "code": "<tm-object kind=\"bloom\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-extra.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-gears",
    "name": "Better together",
    "category": "触れる作品",
    "description": "歯数に合わせた比率で3つの歯車が連動する",
    "code": "<tm-object kind=\"gears\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-extra.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-paperplane",
    "name": "Let it fly",
    "category": "触れる作品",
    "description": "紙飛行機が曲線に沿って飛び、軌跡が残る",
    "code": "<tm-object kind=\"paperplane\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-extra.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-ripple",
    "name": "Quiet influence",
    "category": "触れる作品",
    "description": "一滴が落ち、水面に5重の波紋が広がる",
    "code": "<tm-object kind=\"ripple\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-extra.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-cradle",
    "name": "Pass it on",
    "category": "触れる作品",
    "description": "片側で持ち上げた振り子の動きを反対側へ渡す",
    "code": "<tm-object kind=\"cradle\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-extra.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-zipper",
    "name": "A little opening",
    "category": "触れる作品",
    "description": "ファスナーを開くと、奥の形と言葉が現れる",
    "code": "<tm-object kind=\"zipper\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-extra.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-prism",
    "name": "Hidden spectrum",
    "category": "触れる作品",
    "description": "プリズムに光が入り、異なる色の光が伸びる",
    "code": "<tm-object kind=\"prism\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-extra.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-hourglass",
    "name": "Time to settle",
    "category": "触れる作品",
    "description": "砂が上から下へ移り、砂時計の下側に積もる",
    "code": "<tm-object kind=\"hourglass\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-extra.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-constellation",
    "name": "Connect the little things",
    "category": "触れる作品",
    "description": "散らばった星をつなぎ、ひとつの星座にする",
    "code": "<tm-object kind=\"constellation\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-extra.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-marble",
    "name": "The scenic route",
    "category": "触れる作品",
    "description": "ビー玉が曲がりくねった溝に沿って進む",
    "code": "<tm-object kind=\"marble\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-extra.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-compass",
    "name": "Your own north",
    "category": "触れる作品",
    "description": "コンパスの針と目盛りが回り、北へ揃う",
    "code": "<tm-object kind=\"compass\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-extra.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-ribbon",
    "name": "A softer way",
    "category": "触れる作品",
    "description": "重なったリボンがほどけ、波打つ一本の帯になる",
    "code": "<tm-object kind=\"ribbon\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-extra.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-sprout",
    "name": "Give it a little room",
    "category": "触れる作品",
    "description": "芽が出る、その余白を。",
    "code": "<tm-object kind=\"sprout\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-world.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-bridge",
    "name": "Meet in the middle",
    "category": "触れる作品",
    "description": "あいだに、橋をかける。",
    "code": "<tm-object kind=\"bridge\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-world.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-book",
    "name": "A page ahead",
    "category": "触れる作品",
    "description": "ひらけば、続きがある。",
    "code": "<tm-object kind=\"book\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-world.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-lantern",
    "name": "A quiet light",
    "category": "触れる作品",
    "description": "気づきが、灯る。",
    "code": "<tm-object kind=\"lantern\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-world.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-balance",
    "name": "Find the balance",
    "category": "触れる作品",
    "description": "ちょうどいいを、探そう。",
    "code": "<tm-object kind=\"balance\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-world.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-pebbles",
    "name": "One thing at a time",
    "category": "触れる作品",
    "description": "ひとつずつ、積み重ねる。",
    "code": "<tm-object kind=\"pebbles\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-world.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-helix",
    "name": "Two ways, one thread",
    "category": "触れる作品",
    "description": "違いが、ひとつをつくる。",
    "code": "<tm-object kind=\"helix\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-world.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-key",
    "name": "A way in",
    "category": "触れる作品",
    "description": "きっかけを、回そう。",
    "code": "<tm-object kind=\"key\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-world.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-puzzle",
    "name": "A place for each",
    "category": "触れる作品",
    "description": "ぴったりくる、関わり方。",
    "code": "<tm-object kind=\"puzzle\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-world.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-balloon",
    "name": "A little lift",
    "category": "触れる作品",
    "description": "少し、軽くなってみる。",
    "code": "<tm-object kind=\"balloon\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-world.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-thread",
    "name": "Follow the thread",
    "category": "触れる作品",
    "description": "想いを、縫いつないで。",
    "code": "<tm-object kind=\"thread\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-world.js",
    "requires": [
      "kinetic-objects.js"
    ]
  },
  {
    "id": "tm-object-door",
    "name": "Beyond the familiar",
    "category": "触れる作品",
    "description": "その先を、のぞいてみる。",
    "code": "<tm-object kind=\"door\"></tm-object>",
    "api": "checked / reset() / change / drag / keyboard",
    "source": "kinetic-objects-world.js",
    "requires": [
      "kinetic-objects.js"
    ]
  }
]