@riebeckite/plugin-lightbox 0.0.27 → 0.0.28

package/README.md

@@ -53,6 +53,9 @@ the app calls on page initialization.
 - Returns a cleanup function that removes listeners, the dialog, and any
   wrapped images
 
+Themes can set `--rr-lightbox-image-border-radius` on the `rr-lightbox` root
+to style the displayed image without selecting its descendants.
+
 ## Options
 
 | Option | Type | Default | Description |

package/README_ja.md

@@ -27,6 +27,9 @@ export default defineConfig({
 - `initLightbox` は `Escape`、背景クリック、閉じるボタンでダイアログを閉じ、開く前のフォーカスを戻します。
 - 開いている間は `html[data-lightbox-open="true"]` を設定するため、CSS でスクロールを止められます。
 
+Theme は `rr-lightbox` の root に `--rr-lightbox-image-border-radius` を指定すると、
+子要素を選択せずに表示中の画像を調整できます。
+
 ## オプション
 
 | オプション | 型 | 既定値 | 内容 |
@@ -40,11 +43,11 @@ export default defineConfig({
 
 ## 公開 API
 
-- `lightboxPlugin(options?)` — プラグインファクトリ
-- `rehypeLightbox(options?)` — Rehype 変換
-- `initLightbox(root?, options?)` — ブラウザ初期化関数
-- `initLightboxFromOptions(options?)` — プラグインのクライアントスクリプトが呼ぶ、オプションを先に取る初期化関数
-- `LightboxOptions`、`LightboxInitOptions` — 型
+- `lightboxPlugin(options?)`：プラグインファクトリ
+- `rehypeLightbox(options?)`：Rehype 変換
+- `initLightbox(root?, options?)`：ブラウザ初期化関数
+- `initLightboxFromOptions(options?)`：プラグインのクライアントスクリプトが呼ぶ、オプションを先に取る初期化関数
+- `LightboxOptions`、`LightboxInitOptions`：型
 
 ## 関連資料
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-lightbox",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,7 +21,7 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.27"
+    "@riebeckite/core": "0.0.28"
   },
   "publishConfig": {
     "access": "public"

package/style.css

@@ -17,6 +17,7 @@
 }
 
 .rr-lightbox {
+  --rr-lightbox-image-border-radius: 0;
   position: fixed;
   inset: 0;
   z-index: 1000;
@@ -41,6 +42,7 @@
   max-height: calc(100vh - 120px);
   object-fit: contain;
   border: 1px solid var(--rb-color-surface, #ffffff);
+  border-radius: var(--rr-lightbox-image-border-radius);
 }
 
 .rr-lightbox__caption {