@riebeckite/plugin-color-mode 0.0.31 → 0.0.33

package/README.md

@@ -9,6 +9,10 @@ needs no JavaScript in the theme itself.
 
 [日本語](./README_ja.md)
 
+## Live example
+
+The color-mode control in the site header is this plugin's UI. Switch it between light, dark, and system: the page updates immediately and the choice is stored for the next visit.
+
 ## Overview
 
 Themes derive their palette from three CSS states (see
@@ -26,7 +30,7 @@ The plugin is a thin runtime switch over that contract:
 - `initColorMode` — the client entry that binds the buttons, persists the
   choice in `localStorage` and keeps the document in sync.
 
-`colorModePlugin()` itself only registers the stylesheet and the client entry;
+`colorMode()` itself only registers the stylesheet and the client entry;
 everything else is delivered through the two components you render in your site
 shell.
 
@@ -34,15 +38,15 @@ shell.
 
 ```ts
 import { defineConfig } from "@riebeckite/core";
-import { colorModePlugin } from "@riebeckite/plugin-color-mode";
+import { colorMode } from "@riebeckite/plugin-color-mode";
 
 export default defineConfig({
   // ...
-  plugins: [colorModePlugin()],
+  plugins: [colorMode()],
 });
 ```
 
-`colorModePlugin()` bundles `style.css` and declares `initColorMode` as a client
+`colorMode()` bundles `style.css` and declares `initColorMode` as a client
 entry.
 
 ### Render the components
@@ -159,7 +163,7 @@ diagrams) can follow mode changes in the future.
 
 ## Exports
 
-- `colorModePlugin()` — plugin factory
+- `colorMode()` — plugin factory
 - `ColorModeToggle` — the switch component
 - `ColorModeScript` — the before-paint inline script component
 - `initColorMode` — browser init (also exported by `@riebeckite/plugin-color-mode/client`)

package/README_ja.md

@@ -6,35 +6,39 @@ Riebeckite サイト向けのライト / ダーク / システム連動のカラ
 
 [English](./README.md)
 
+## 実行例
+
+サイトヘッダーにあるカラーモードのコントロールが、このプラグインの UI です。ライト・ダーク・システムを切り替えるとページが即座に変わり、選択は次回の訪問のために保存されます。
+
 ## 概要
 
-[theme-system.md](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/reference/theme-api.ja.md) テーマの配色は、次の 3 つの CSS 状態で決まります。
+[テーマシステム](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/reference/theme-api.ja.md) のテーマは、次の 3 つの CSS 状態から配色を決めます。
 
 - `:root`：ライト
 - `:root[data-theme="dark"]`：ダーク
 - `@media (prefers-color-scheme: dark) { :root:not([data-theme]) }`：OS に追随（system）
 
-プラグインは、この 3 つの CSS 状態を切り替えるだけの薄い実行時スイッチで、次の 3 つを提供します。
+このプラグインは、その取り決めを切り替えるだけの薄い実行時スイッチで、次の 3 つを提供します。
 
-- `ColorModeScript`：`<head>` に置く 1 行のインラインスクリプト**。最初の描画の前に**保存済みモードを適用し、テーマのちらつき（FOUC）を防ぎます。
-- `ColorModeToggle`：ライト / ダーク / システムのセグメント型コントロール。
-- `initColorMode`：クライアントエントリ。ボタンの結線、`localStorage` への保存、ドキュメントの状態同期を行います。
+- `ColorModeScript`：`<head>` に置く 1 行のインラインスクリプトです。**最初の描画の前に**保存済みのモードを適用し、テーマのちらつき（FOUC）を防ぎます。
+- `ColorModeToggle`：ライト / ダーク / システムを選ぶセグメントコントロール。
+- `initColorMode`：クライアントエントリー。ボタンの結線、`localStorage` への保存、ドキュメントの状態同期を行います。
 
-`colorModePlugin()` はスタイルシートとクライアントエントリの登録だけを行います。UI はサイトシェルで描画する 2 つのコンポーネントから届きます。
+`colorMode()` はスタイルシートとクライアントエントリーの登録だけを行います。UI は、サイトシェルで描画する 2 つのコンポーネントが担います。
 
 ## 使い方
 
 ```ts
 import { defineConfig } from "@riebeckite/core";
-import { colorModePlugin } from "@riebeckite/plugin-color-mode";
+import { colorMode } from "@riebeckite/plugin-color-mode";
 
 export default defineConfig({
   // ...
-  plugins: [colorModePlugin()],
+  plugins: [colorMode()],
 });
 ```
 
-`colorModePlugin()` は `style.css` をバンドルし、`initColorMode` をクライアントエントリとして宣言します。
+`colorMode()` は `style.css` をバンドルし、`initColorMode` をクライアントエントリとして宣言します。
 
 ### コンポーネントの描画
 
@@ -61,7 +65,7 @@ return (
 
 `<ColorModeScript />` は CSS が適用される前にモードが確定するよう、スタイルシートより先に `<head>` へ置いてください。`<ColorModeToggle />` はヘッダーやナビバーなど任意の場所に配置できます。
 
-### Props
+### 受け取る props
 
 `ColorModeScript`
 
@@ -76,7 +80,7 @@ return (
 | `storageKey` | 保存先の localStorage キー。既定値は `riebeckite-color-mode`。 |
 | `modes` | 表示するモード（順序付き）。既定値は `["light", "dark", "system"]`。 |
 | `labels` | モードごとの `aria-label` 上書き: `{ light?, dark?, system? }`。 |
-| `label` | グループの先頭に置く可視非表示の `<legend>` として使われます。既定値は `"Color mode"`。 |
+| `label` | グループ名に使う文言。視覚的に隠した `<legend>` として描画されます。既定値は `"Color mode"`。 |
 
 ストレージキーを変更する場合は、両コンポーネントで同じ値を指定してください。
 
@@ -98,12 +102,12 @@ return (
 
 スタイルシートは `--rb-color-*` トークンを使うため、アクティブなテーマに追従します。ルートは `display: none` で、`initColorMode`（またはインラインスクリプト）が `<html>` に `data-rb-color-mode="ready"` を付けるまで非表示です。JavaScript が無効なページではコントロールそのものが現れません。
 
-Theme は `rr-color-mode` の root に `--rr-color-mode-border-radius` を指定すると、子要素を
-選択せずにコンテナとボタンで共有する角丸を変更できます。
+テーマは `rr-color-mode` のルート要素に `--rr-color-mode-border-radius` を指定すると、
+子要素を選択せずにコンテナとボタンで共有する角丸を変更できます。
 
 ## アクセシビリティ
 
-- コンテナは `<fieldset>` で、グループ名は可視非表示の `<legend>`（`label` props）が提供します。
+- コンテナは `<fieldset>` で、グループ名は視覚的に隠した `<legend>` が提供します。文言は `label` プロップで指定します。
 - 各ボタンは `type="button"` でモード名の `aria-label` を持ち、アクティブなボタンには実行時設定の `aria-pressed="true"` が付きます。
 - アイコンは装飾（`aria-hidden`）。ラベルはボタンから提供されます。
 - `prefers-reduced-motion` ではトランジションを無効化します。
@@ -127,12 +131,12 @@ document.addEventListener("riebeckite:color-mode", (event) => {
 - `localStorage` へのアクセスは `try/catch` で保護しています。ストレージが使えない環境でも、そのページでは切替が機能します（永続化のみされません）。
 - 1 ページに複数のトグルを置く場合は、同じ `storageKey` を共有してください。
 
-## Exports
+## エクスポート
 
-- `colorModePlugin()`：プラグインファクトリ
+- `colorMode()`：プラグインファクトリ
 - `ColorModeToggle`：切替コンポーネント
 - `ColorModeScript`：描画前インラインスクリプトのコンポーネント
-- `initColorMode`：ブラウザ初期化関数（`@riebeckite/plugin-color-mode/client` からも export）
+- `initColorMode`：ブラウザ初期化関数（`@riebeckite/plugin-color-mode/client` からもエクスポート）
 - 定数: `COLOR_MODES` / `COLOR_MODE_STORAGE_KEY` / `COLOR_MODE_EVENT` ほか
 - 型: `ColorMode`
 

package/dist/components/color-mode-toggle.d.ts

@@ -8,10 +8,11 @@ export type ColorModeToggleProps = {
     readonly labels?: Readonly<Partial<Record<ColorMode, string>>>;
     /** Group label, used as the `<legend>`. */
     readonly label?: string;
+    readonly placement?: "inline" | "floating";
 };
 /**
  * Server-rendered control to switch between light, dark and system color
  * modes. The active state is applied by `initColorMode` at runtime; until the
  * client runs the control is hidden by the stylesheet.
  */
-export default function ColorModeToggle({ storageKey, modes, labels, label, }: ColorModeToggleProps): import("hono/jsx/jsx-dev-runtime").JSX.Element;
+export default function ColorModeToggle({ storageKey, modes, labels, label, placement, }: ColorModeToggleProps): import("hono/jsx/jsx-dev-runtime").JSX.Element;

package/dist/index.d.ts

@@ -6,4 +6,4 @@ export { initColorMode } from "./src/init.js";
  * Registers the color-mode plugin: bundles the toggle stylesheet and declares
  * `initColorMode` as the browser entry point that wires up toggling at runtime.
  */
-export declare function colorModePlugin(): import("@riebeckite/core").RiebeckitePlugin<unknown>;
+export declare function colorMode(): import("@riebeckite/core").RiebeckitePlugin<unknown>;

package/dist/index.js

@@ -36,12 +36,13 @@ function ColorModeToggle({
   storageKey = COLOR_MODE_STORAGE_KEY,
   modes = COLOR_MODES,
   labels = {},
-  label = "Color mode"
+  label = "Color mode",
+  placement = "inline"
 }) {
   return /* @__PURE__ */ jsxs(
     "fieldset",
     {
-      class: "rr-color-mode",
+      class: placement === "inline" ? "rr-color-mode" : `rr-color-mode rr-color-mode--${placement}`,
       "data-color-mode-root": true,
       "data-color-mode-storage-key": storageKey,
       children: [
@@ -180,7 +181,7 @@ function parseColorMode(value) {
 }
 
 // index.ts
-function colorModePlugin() {
+function colorMode() {
   return definePlugin({
     name: "color-mode",
     assets: [
@@ -190,7 +191,9 @@ function colorModePlugin() {
       createClientEntry(
         "color-mode",
         "@riebeckite/plugin-color-mode/client",
-        "initColorMode"
+        "initColorMode",
+        void 0,
+        "app"
       )
     ]
   });
@@ -205,6 +208,6 @@ export {
   COLOR_MODE_STORAGE_KEY_ATTRIBUTE,
   ColorModeScript,
   ColorModeToggle,
-  colorModePlugin,
+  colorMode,
   initColorMode
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-color-mode",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,8 +21,8 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "hono": "^4.12.25",
-    "@riebeckite/core": "0.0.31"
+    "@riebeckite/core": "0.0.33",
+    "hono": "^4.12.25"
   },
   "publishConfig": {
     "access": "public"

package/style.css

@@ -4,6 +4,8 @@
     --rr-color-mode-muted: var(--rb-color-muted);
     --rr-color-mode-surface: var(--rb-color-surface);
     --rr-color-mode-surface-hover: var(--rb-color-surface-hover);
+    --rr-color-mode-selected: var(--rb-color-selected);
+    --rr-color-mode-focus: var(--rb-color-focus);
     --rr-color-mode-border: var(--rb-color-border);
     --rr-color-mode-border-radius: 999px;
 
@@ -17,6 +19,16 @@
     border-radius: var(--rr-color-mode-border-radius);
   }
 
+  .rr-color-mode--floating {
+    position: fixed;
+    inset-inline-start: 1.5rem;
+    inset-block-end: 1.5rem;
+    z-index: 50;
+    background: var(--rr-color-mode-surface);
+    box-shadow: 0 2px 12px
+      color-mix(in oklab, var(--rb-color-ink) 18%, transparent);
+  }
+
   /* The legend names the group for assistive technology only. */
   .rr-color-mode__legend {
     position: absolute;
@@ -60,10 +72,15 @@
 
   .rr-color-mode__button[aria-pressed="true"] {
     color: var(--rr-color-mode-ink);
-    background: var(--rr-color-mode-surface);
+    background: var(--rr-color-mode-selected);
     box-shadow: inset 0 0 0 1px var(--rr-color-mode-border);
   }
 
+  .rr-color-mode__button:focus-visible {
+    outline: 2px solid var(--rr-color-mode-focus);
+    outline-offset: 2px;
+  }
+
   .rr-color-mode__icon {
     display: block;
     width: 1rem;