@hidemikimura/chit-ui 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,91 @@
+# 変更履歴
+
+[Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) にならい、新しい版を上に置きます。
+バージョンは [Semantic Versioning](https://semver.org/lang/ja/) に従いますが、0.x の間は
+マイナー更新に破壊的変更が入ることがあります。
+
+## 0.3.0 — 2026-09-20
+
+### 追加
+
+- **応答待ちのローディング**。`loading` プロパティで、送信から返事までの間の表示を出せます。
+  見た目は `open.loading.style`（`'spinner'`（既定）/ `'dots'` / `'text'`）と `text` で
+  決められます。
+  相手が機械のとき「入力中」は実態と違うため、スピナーや文言を選べるようにしました。
+- `open.loading.auto` を `true` にすると、`chat-submit` から相手側の発言が届くまで自動で
+  表示します。`timeout` を過ぎたら自分で引っ込みます。
+- CSS パーツ `loading` `loading-text`、ラベル `loading`（ja / en）。`loading` は属性にも
+  反映されるので、ページ側の CSS から `chit-ui[loading]` で拾えます。
+- **ドラッグで動かせるようになりました**。`closed.draggable` でランチャーを、
+  `open.draggable` でパネル（取っ手はタイトルバー）を動かせます。どちらも既定は無効です。
+  矢印キー（Shift で大きく）でも動かせ、画面の外には出られません。
+- 閉じた状態と開いた状態は一緒に動きます。ドラッグが動かすのは位置そのものではなく
+  「テーマの位置からのずれ」で、これをウィジェット全体でひとつだけ持つためです。ランチャーを
+  動かしてから開けばパネルも同じだけずれ、その逆も同じです。
+- 動かすと `chat-move`（`detail: { target, position, offset, displacement }`）が出ます。
+  ずれは `dragOffset` プロパティで読み書きでき、保存しておけば代入するだけで復元できます。
+  `resetPosition()` でテーマの位置に戻ります。ラベル `move`（ja / en）。
+
+### 変更
+
+- `loading` と `typing` を排他にしました。片方を `true` にすると、もう片方が `false` に
+  なります。どちらも会話の同じ「間」を指しているので、2 つ並べないためです。
+- パネルの最大サイズをオフセットの 2 倍からの引き算ではなく、角から反対側の端までの余白で
+  計算するようにしました。以前の式は左右（上下）の余白が等しい前提だったため、ドラッグで
+  動かすとパネルが縮んでいきました。画面内に収める判定も、実測の大きさではなくテーマが
+  指定した大きさで行うようにしています（実測だと、縮んだ分だけさらに押し込めてしまうため）。
+- 入力中インジケーターの行の高さをフォント任せ（`normal`）ではなく `1.5` と明示しました。
+  ローディングと同じ大きさに揃えるためで、環境によって 1〜2px 変わります。
+
+## 0.2.0 — 2026-09-19
+
+### 追加
+
+- **吹き出しのしっぽ**。`open.bubble = { radius, tail }` で角丸としっぽ（`'none'` /
+  `'top'` / `'bottom'`）を指定できます。しっぽは根元を吹き出しの内側に潜り込ませて描くので、
+  角丸をいくつにしても継ぎ目が見えません。入力中インジケーターにも同じしっぽが付きます。
+- **付属テーマ**。`@hidemikimura/chit-ui/themes.js` から `greenTheme` を読み込めます
+  （緑系メッセンジャー風、しっぽ付き）。ただの `Theme` オブジェクトなので、スプレッドで
+  好きに上書きできます。単一バンドルからは `window.ChitUI.greenTheme` です。
+- **発言者の名前とアイコン**。`open.speaker.assistant` / `.user` に `name` と `avatar` を
+  書くと、その側の発言すべてに出ます。発言ごとの `name` / `avatar` が優先され、発言に `null`
+  を書くとテーマの指定を打ち消せます（続けての発言でアイコンを省く用途）。
+- **タイトルバーのホームボタン**。`open.header.home: true` で閉じるボタンの手前に出ます。
+  押すと `chat-home` を発火するだけで、会話の巻き戻しは利用者側で行います。`home()` から
+  同じ合図を出せます。
+- **タイトルバーの表示切り替え**。`open.header.visible: false` でタイトルバーごと消せます。
+  LIFF のように外側がタイトルを持つ画面で、タイトルが二重になるのを避けるためのものです。
+  `title` は表示されなくても `role="dialog"` の読み上げ名としては使われます。
+- **添付ボタン**。`open.input.attach: true` で入力欄の左に出ます。`accept`（既定
+  `image/*,video/*`）と `multiple` はファイル選択にそのまま渡ります。選ばれたファイルは
+  `chat-attach` で受け取り、アップロードや表示は利用者側で行います。`openAttach()` から
+  同じダイアログを開けます。
+- CSS カスタムプロパティ `--chit-bubble-radius`。
+- CSS パーツ `header-title` `home-button` `attach-button` `attach-input`。
+- ラベル `home` / `attach`（ja / en）。
+
+### 変更
+
+- 発言者アイコンの位置を行の下揃えから上揃えに変えました。名前の行（名前がなければ吹き出しの
+  1 行目）に並びます。下揃えだと時刻の横に来てしまい、何を示すアイコンか読み取りにくいためです。
+- タイトルバーの画像と見出しを `[part~='header-title']` でひとまとめにしました。以前は
+  `logo` を指定すると画像が左端、タイトルが中央に離れて表示されていました。
+- 長いタイトルは省略記号で切り詰めます。閉じるボタンが押し出されなくなりました。
+
+### 削除
+
+- `open.header.avatar`。型にはありましたが何も描画していませんでした。タイトルバーの画像は
+  `open.header.logo` ひとつです。
+
+## 0.1.0 — 2026-09-18
+
+最初の公開版。
+
+- 3 つの状態（閉じた状態 / 開いた状態 / 非表示）と遷移アニメーション、`chat-*` イベント。
+- 状態ごとのテーマ（色・画像・アニメーション・大きさ）。閉じた状態は PC とスマホで分けられます。
+- 発言の中身は `text` / `html` / `template` / `element` / `component` の 5 形式。`component`
+  では LitElement を継承したコンポーネントをそのまま渡せます。
+- どんな HTML を入れてもレイアウトが崩れないための封じ込め CSS。
+- 入力欄（IME 対応、自動伸縮、文字数カウンタ）、ストリーミング表示、入力中インジケーター、
+  スクロール追従。
+- npm パッケージ（ESM）と単一バンドル（ESM / IIFE）の両方。

package/README.md

@@ -52,6 +52,12 @@ npm install @hidemikimura/chit-ui lit
 import '@hidemikimura/chit-ui';        // <chit-ui> を登録する
 ```
 
+付属テーマは別のエントリから読み込みます（ウィジェット本体は付いてきません）。
+
+```js
+import { greenTheme } from '@hidemikimura/chit-ui/themes.js';
+```
+
 タグ名を自分で決めたい場合は、登録しないエントリを使います。
 
 ```js
@@ -97,7 +103,7 @@ chat.messages = [
 | 中身 | ○ | `text` / `html` / `template` / `element` / `component` のいずれか 1 つ |
 | `props` | | `component` に渡すプロパティ |
 | `time` | | ISO 文字列または `Date`。`formatTime` で表示を差し替えられます |
-| `name` / `avatar` | | 発言者名とアバター画像 URL |
+| `name` / `avatar` | | 発言者名とアイコン画像 URL。テーマの `open.speaker` より優先され、`null` でその発言だけ打ち消せます |
 | `status` | | `sending` / `sent` / `error` |
 | `streaming` | | `true` の間はカーソルを出し、スクロールを追従させます |
 | `meta` | | ライブラリは触りません。イベントでそのまま返ってきます |
@@ -206,6 +212,7 @@ chat.theme = {
   open: {
     width: 380, height: 600,
     colors: { accent: '#2563eb', userBubble: '#2563eb' },
+    bubble: { radius: 14, tail: 'none' },   // 吹き出しの角丸としっぽ
     header: { title: 'サポート' },
   },
 };
@@ -218,6 +225,285 @@ chat.theme = {
 - スマホ幅では `open` は常に全画面です（`width` / `height` は無視されます）
 - 実行中に差し替えると即座に反映されます（ダークモードの切り替えなど）
 
+### 付属テーマ
+
+見た目を一から決めたくないときは、ライブラリ同梱のプリセットをそのまま渡せます。
+
+```js
+import { greenTheme } from '@hidemikimura/chit-ui/themes.js';
+
+chat.theme = greenTheme;
+```
+
+`greenTheme` は淡いブルーグレーの会話背景に、相手は白・自分は黄緑の吹き出し、しっぽは
+上向き、という緑系メッセンジャーの配色です。特定のサービスのロゴや素材は含みません。
+配色は Chit UI 独自のもので、読む必要のある文字と背景の組み合わせはすべて WCAG AA
+（4.5:1）を満たしています。テストが全プリセットのコントラストを毎回検証します。
+
+プリセットはただの `Theme` オブジェクトなので、上から重ねて調整できます。
+
+```js
+chat.theme = { ...greenTheme, open: { ...greenTheme.open, width: 420 } };
+```
+
+`<script>` 1 本で使っている場合は、バンドルから同じ名前で取り出せます。
+
+```js
+const { greenTheme } = window.ChitUI;   // IIFE 版
+```
+
+### タイトルバー
+
+`open.header` にタイトル文字列とロゴ画像を渡せます。
+
+```js
+chat.theme = {
+  open: {
+    header: { title: 'ecx サポート', logo: '/logo.png' },
+  },
+};
+```
+
+画像とタイトルは左側にひとまとまりで並び、右側に閉じるボタンが残ります。長いタイトルは
+省略記号で切り詰められるので、閉じるボタンが押し出されることはありません。`title` は
+`role="dialog"` の読み上げ名にも使われます（未指定なら「チャット」/「Chat」）。ロゴは
+装飾扱い（`alt=""`）です。隣にタイトルがあり、画像に読み上げ名を重ねても冗長なためです。
+
+バー全体を自分で描くなら `header-title` スロット、ボタンを足すなら `header-actions`
+スロット、まるごと差し替えるなら `header` スロットを使ってください。
+
+#### タイトルバーを消す
+
+`header.visible` を `false` にすると、タイトルバーごと出しません。LINE の LIFF のように
+外側のアプリが既にタイトルを持っている画面で、タイトルが二重に並ぶのを避けるための設定です。
+
+```js
+chat.theme = { open: { header: { visible: false } } };
+```
+
+会話はパネルの上端から始まります。`title` を書いておけば、表示はされなくても
+`role="dialog"` の読み上げ名としては使われるので、外側のタイトルと別の名前を付けられます。
+
+閉じるボタンもバーごと消える点にご注意ください。Esc とランチャーのクリックでは閉じられますし、
+LIFF のように外側が閉じる手段を持っているなら問題になりません。自前の閉じるボタンを置くなら
+`footer` スロットか、発言の中のボタンから `chat.close()` を呼んでください。
+
+#### ホームボタン
+
+`header.home` を `true` にすると、閉じるボタンの手前にホームボタンが出ます。シナリオ型の
+チャットで、会話を最初からやり直す入口を想定しています。
+
+```js
+chat.theme = { open: { header: { title: 'ecx サポート', home: true } } };
+
+chat.addEventListener('chat-home', (event) => {
+  chat.messages = scenarioStart;      // 巻き戻すのは利用者側
+  chat.typing = false;
+});
+```
+
+押されても**ウィジェットは何も消しません**。`chat-home`（`detail: { trigger }`）を出すだけです。
+`messages` の持ち主は利用者側なので、どこまで巻き戻すか、確認を挟むか、パネルを閉じるかは
+そちらで決められます。コードから同じ合図を出すなら `chat.home()` です（`trigger` は `'api'`）。
+
+見た目を変えるなら `::part(home-button)`、別のアイコンにしたいなら `header-actions` スロットに
+自前のボタンを置いてください（その場合 `home: false` のままで構いません）。読み上げ名は
+ロケールに応じて「最初に戻る」/「Back to the start」になります。
+
+### ドラッグで動かす
+
+ランチャー（閉じた状態）と、開いた状態のパネルを、読み手が動かせるようにできます。
+どちらも既定は無効です。
+
+```js
+chat.theme = {
+  closed: { draggable: true },   // ランチャーをドラッグ
+  open:   { draggable: true },   // パネルをタイトルバーでドラッグ
+};
+```
+
+パネルの取っ手はタイトルバーです。バーの中のボタン（閉じる・ホーム）を押したときはドラッグに
+なりません。タイトルバーを消している（`header.visible: false`）ときは掴む場所がないので
+動かせません。スマホ幅ではパネルは全画面なので、パネルのドラッグは自動的に無効になります
+（ランチャーは動かせます）。
+
+矢印キーでも動かせます。ランチャーかタイトルバーにフォーカスして、矢印キーで 8px、
+Shift と一緒なら 32px ずつです。ポインタが使えない人でも同じことができるようにするためで、
+そのためタイトルバーは `draggable` のときだけフォーカスを受けます。
+
+画面の外には出られません。端から 8px のところで止まります。ウィンドウの大きさが変わったときも
+中に収まるように置き直します。
+
+#### 閉じた状態と開いた状態は一緒に動きます
+
+ドラッグが動かすのは「位置」ではなく「テーマの位置からどれだけずらしたか」（画面上の px）で、
+このずれをウィジェット全体でひとつだけ持っています。そのため、
+
+- ランチャーを動かしてから開くと、パネルも同じだけずれた位置に出ます
+- パネルを動かしてから閉じると、ランチャーも同じだけずれた位置に戻ります
+
+ランチャーとパネルは同じウィジェットの 2 つの姿なので、片方だけ元の場所に残るほうが不自然だと
+考えてこうしています。それぞれの角（`closed.position` / `open.position`）や余白の違いは
+そのまま保たれ、ずれだけが共有されます。
+
+#### 動かした位置を覚える
+
+ずれは `dragOffset` で読み書きできます。ページを開いている間だけ保持され、離したときに
+`chat-move` が出ます。保存と復元は利用者側の仕事です（`localStorage` に入れるかどうかは
+サイトの方針なので、ライブラリは決めません）。
+
+```js
+chat.addEventListener('chat-move', (event) => {
+  const { target, position, offset, displacement } = event.detail;
+  localStorage.setItem('chit-position', JSON.stringify(displacement));
+});
+
+// 復元はずれを戻すだけ（閉じた状態・開いた状態の両方に効きます）
+chat.dragOffset = JSON.parse(localStorage.getItem('chit-position') ?? 'null');
+```
+
+`displacement` が共有しているずれ、`offset` は実際に落ち着いた位置で、テーマと同じ意味
+（`position` が指す角からの距離）です。`target` はどちらを掴んで動かしたかです。
+`chat.resetPosition()`（= `chat.dragOffset = null`）でテーマの位置に戻ります。
+
+動かしている間の位置は要素のインラインスタイルとして書かれるので、テーマよりもページ側の CSS
+よりも優先されます。読み手が自分で動かした結果が、いちばん具体的な指定だからです。
+
+### 応答待ちのローディング
+
+送信してから返事が届くまでの間に出す表示です。`loading` プロパティで切り替えます。
+
+```js
+chat.loading = true;
+// …サーバーとやり取り…
+chat.loading = false;
+```
+
+`open.loading` で見た目を決めます。既定はスピナーです。入力中インジケーターと同じ三点ドットだと
+「誰かが書いている」という意味になってしまい、サーバーの応答待ちとは違うためです。相手が人間の
+オペレーターなら `'dots'` を選べます。
+
+```js
+chat.theme = {
+  open: {
+    loading: {
+      auto: true,                      // 送信から次の発言まで自動で出す（既定 false）
+      style: 'spinner',                // 'spinner'（既定）/ 'dots' / 'text'
+      text: '回答を作成しています',      // 省略すると読み上げ名だけに使われます
+      timeout: 8000,                   // ms。0（既定）なら自分で消します
+    },
+  },
+};
+```
+
+`auto: true` にすると、`chat-submit` が出た時点で表示し、相手側（`assistant` か `system`）の
+発言が `messages` に増えた時点で消します。自分の発言を積んでも消えません。ストリーミングの
+場合は空の吹き出しが現れた時点で消えます。送信をキャンセル（`preventDefault`）したときは
+そもそも出ません。`timeout` を過ぎたら黙って引っ込むので、通信が返ってこないまま残り続ける
+ことはありません。`chat.loading = false` でいつでも手で消せます。
+
+入力中インジケーター（`typing`）と同じ位置に出ます。**この 2 つは同時には立ちません。**
+`loading` を `true` にすると `typing` は `false` になり、その逆も同じです。どちらも会話の
+同じ「間」を指していて（片方は人が書いている、もう片方はサーバーがまだ答えていない）、
+2 つ並ぶと読み手に違いを考えさせてしまうためです。片方を `false` にしてももう片方は
+そのままです。同じタイミングで両方に `true` を入れた場合は、後から書いたほうが残ります。
+
+入力欄をロックするかどうかは別の話なので、必要なら `busy` も合わせて立ててください。
+`loading` は属性にも反映されるので、ページ側の CSS から `chit-ui[loading]` で拾えます。
+
+### 添付ボタン
+
+`open.input.attach` を `true` にすると、入力欄の左に添付ボタンが出ます。押すとファイル選択が
+開き、選ばれたファイルは `chat-attach` で渡ってきます。
+
+```js
+chat.theme = {
+  open: {
+    input: {
+      attach: true,
+      accept: 'image/*,video/*',   // 既定。file input にそのまま渡ります
+      multiple: false,             // 既定
+    },
+  },
+};
+
+chat.addEventListener('chat-attach', (event) => {
+  for (const file of event.detail.files) upload(file);   // 送るのは利用者側
+});
+```
+
+ウィジェットがやるのは選ばせるところまでです。アップロードもプレビューも発言の追加もしません。
+`messages` の持ち主は利用者側で、バイト列の送り先もライブラリは知らないためです。選択後は
+file input を空に戻すので、同じファイルを続けて選んでも毎回イベントが出ます。ダイアログを
+閉じただけのときは何も起きません。
+
+`busy` と `inputDisabled` の間はボタンも無効になります。コードから開くなら
+`chat.openAttach()`、見た目を変えるなら `::part(attach-button)` です。自前の添付フローが
+あるなら `attach: false` のまま `input-before` スロットに自分のボタンを置いてください。
+
+### 発言者の名前とアイコン
+
+`open.speaker` に書いておくと、その側の発言すべてに名前とアイコンが出ます。発言ごとに
+書く必要はありません。
+
+```js
+chat.theme = {
+  open: {
+    speaker: {
+      assistant: { name: 'サポート', avatar: '/support.png' },
+      user:      { name: null,       avatar: null },          // 既定（何も出さない）
+    },
+  },
+};
+```
+
+発言側の指定が勝ちます。担当者ごとに顔を変えるなら発言に書いてください。
+
+```js
+chat.messages = [
+  { id: 'a', role: 'assistant', text: 'お待たせしました', name: '田中', avatar: '/tanaka.png' },
+];
+```
+
+`null` を渡すとその発言だけテーマの指定を打ち消せます。同じ人が続けて話すときに、
+2 件目以降のアイコンを省く使い方ができます。このときアイコンの場所は空けたまま残るので、
+吹き出しの左端は揃います。
+
+```js
+chat.messages = [
+  { id: 'a', role: 'assistant', text: '承知しました' },
+  { id: 'b', role: 'assistant', text: '少々お待ちください', avatar: null, name: null },
+];
+```
+
+`system` の発言は中央寄せの連絡行なので、名前もアイコンも出ません。会話の参加者ではなく
+ウィジェットが会話について述べている行、という位置づけのためです。
+
+### 吹き出しのしっぽ
+
+`open.bubble` で吹き出しの角丸としっぽを決めます。
+
+```js
+chat.theme = { open: { bubble: { radius: 18, tail: 'top' } } };
+```
+
+| 値 | 意味 |
+| --- | --- |
+| `tail: 'none'`（既定） | しっぽなし。話し手側の角だけ小さく落とした形になります |
+| `tail: 'top'` | 吹き出しの上寄りに三角のしっぽを付けます |
+| `tail: 'bottom'` | 下寄りに付けます |
+
+しっぽは話し手の側（相手は左、自分は右）に、その吹き出しと同じ色の葉のような形で描かれます。
+根元は吹き出しの内側に潜り込ませてあるので、継ぎ目は吹き出しの地色に隠れます。角丸はどの角も
+そのままで、角丸の値をいくつにしても隙間は出ません。付く高さは角丸に合わせて少し下げてあり、
+縁がまっすぐになったところに根元が乗ります。入力中インジケーターにも同じしっぽが付きます。
+
+しっぽを出すと、話し手側の角を落とす既定の形はなくなります。ひとつの吹き出しに話し手を示す印が
+ふたつあると読みにくいためです。
+
+しっぽの形は `clip-path: path()` で描いています。これに対応していないブラウザでは、変な形が
+はみ出すよりはと考えて、しっぽを出さず既定の吹き出しのままにしています。
+
 ### 閉じた状態を自分で描く
 
 `closed.component` に `LitElement` を継承したコンポーネント（またはタグ名）を渡すと、
@@ -275,7 +561,7 @@ chit-ui {
 }
 ```
 
-公開しているカスタムプロパティは次の 32 個です。
+公開しているカスタムプロパティは次の 33 個です。
 
 色: `--chit-color-bg` `--chit-color-text` `--chit-color-accent` `--chit-color-border`
 `--chit-color-user-bg` `--chit-color-user-text` `--chit-color-assistant-bg`
@@ -287,6 +573,8 @@ chit-ui {
 `--chit-launcher-offset-y` `--chit-launcher-bg` `--chit-launcher-text`
 `--chit-launcher-shadow` `--chit-launcher-image`
 
+吹き出し: `--chit-bubble-radius`
+
 パネル: `--chit-panel-width` `--chit-panel-height` `--chit-panel-radius`
 `--chit-panel-offset-x` `--chit-panel-offset-y` `--chit-panel-shadow`
 `--chit-panel-bg-image`
@@ -305,7 +593,8 @@ chit-ui {
 | `state` | `'closed' \| 'open' \| 'hidden'` | `'closed'` | 現在の状態 |
 | `theme` | `Theme` | `{}` | テーマ（部分指定可） |
 | `messages` | `Message[]` | `[]` | 描画する発言 |
-| `typing` | `boolean \| { html }` | `false` | 相手が入力中の表示 |
+| `typing` | `boolean \| { html }` | `false` | 相手が入力中の表示。`loading` とは排他です |
+| `loading` | `boolean` | `false` | 応答待ちの表示。`typing` とは排他で、`open.loading.auto` なら自動で切り替わります |
 | `busy` | `boolean` | `false` | 送信中。入力をロックします |
 | `inputDisabled` / `inputHidden` | `boolean` | `false` | 入力欄の無効化 / 非表示 |
 | `value` | `string` | `''` | 入力欄の内容 |
@@ -319,6 +608,8 @@ chit-ui {
 | `locale` | `string` | `<html lang>` | ラベルと時刻の言語 |
 | `labels` | `Partial<Labels>` | なし | UI 文字列の上書き |
 
+`dragOffset`（`{ x, y } | null`）はドラッグで生じたずれです。読み書きできます。
+
 読み取り専用: `renderedState`、`device`（`'pc' \| 'mobile'`）、`hasUnseen`、`canSend`、
 `currentTheme`、`currentLabels`、`resolvedLocale`。
 
@@ -331,6 +622,9 @@ chit-ui {
 | `focusInput()` / `clearInput()` | 入力欄の操作 |
 | `scrollToBottom({ smooth })` | 最新の発言までスクロール。`smooth` 省略時はテーマの設定に従う |
 | `getMessageElement(id)` | その発言のコンテナ DOM（未描画なら `null`） |
+| `home()` | `chat-home` を発火します（ホームボタンと同じ合図） |
+| `openAttach()` | 添付のファイル選択を開きます（添付ボタンと同じ） |
+| `resetPosition()` | ドラッグで動かした位置を忘れ、テーマの位置に戻します |
 
 ## イベント
 
@@ -349,6 +643,9 @@ chit-ui {
 | `chat-message-click` | 発言の中がクリックされた | `{ message, target, originalEvent }` | ○ |
 | `chat-scroll-top` | 一覧が最上部に達した | `{}` | |
 | `chat-breakpoint-change` | PC / スマホの判定が変わった | `{ device }` | |
+| `chat-home` | ホームボタンが押された（または `home()`） | `{ trigger }` | |
+| `chat-attach` | 添付ファイルが選ばれた | `{ files }`（`File[]`） | |
+| `chat-move` | ドラッグまたは矢印キーで動かされた | `{ target, position, offset, displacement }` | |
 
 `trigger` は `'user'`（クリックや Esc）か `'api'`（メソッドやプロパティ代入）です。
 
@@ -381,10 +678,11 @@ chat.addEventListener('chat-message-click', (event) => {
 
 `::part()` で外部からスタイルを当てられます。
 
-`launcher` `launcher-icon` `launcher-label` `panel` `header` `header-heading` `header-logo`
+`launcher` `launcher-icon` `launcher-label` `panel` `header` `header-title` `header-heading` `header-logo`
+`home-button` `attach-button` `attach-input`
 `header-actions` `close-button` `messages` `messages-inner` `message` `message-user`
 `message-assistant` `message-system` `bubble` `message-content` `avatar` `name` `meta` `time`
-`status` `cursor` `typing` `to-latest` `composer` `input` `counter` `send-button` `spinner`
+`status` `cursor` `typing` `loading` `loading-text` `to-latest` `composer` `input` `counter` `send-button` `spinner`
 
 パーツ名・プロパティ名・イベント名・スロット名・CSS カスタムプロパティ名は公開 API として
 扱い、変更はメジャーバージョンでのみ行います。
@@ -403,6 +701,9 @@ chat.addEventListener('chat-message-click', (event) => {
 
 Chrome / Edge / Firefox / Safari の最新 2 バージョンと iOS Safari 16 以降。IE は非対応です。
 
+吹き出しのしっぽだけは `clip-path: path()` を使っています。対応していないブラウザでは
+しっぽを出さず、通常の吹き出しとして表示します（他の機能には影響しません）。
+
 ## 開発
 
 ```sh
@@ -422,18 +723,20 @@ IME の実挙動は合成イベントでは再現しきれないため、リリ
 - macOS Safari + 日本語 IME: 変換確定の Enter で誤送信しないこと
 - iOS Safari: パネルが全画面になり、キーボード表示中も入力欄が隠れないこと
 - Android Chrome: 変換中の Enter で誤送信しないこと
+- iOS Safari / Android Chrome: 添付ボタンからカメラとフォトライブラリが開けること
+  （`accept` はブラウザによって扱いが違うため）
 
-## 公開
+### 公開
 
 ```sh
 npm login
-npm run check
-npm publish
+npm run check      # typecheck + test + axe 監査
+npm publish        # prepublishOnly がビルドとテストを流し直します
 ```
 
-`package.json` の `publishConfig.access` が `public` なので、`--access public` を付ける必要は
-ありません。スコープ付きパッケージは既定で非公開扱いになり、その場合 npm の無料プランでは
-`402 Payment Required` になります。
+`publishConfig` に `access: public` を入れてあるので `--access public` は不要です。
+公開したら `git tag v0.2.0 && git push --tags` を忘れずに。変更点は
+[CHANGELOG.md](./CHANGELOG.md) にまとめています。
 
 ## ライセンス