@riebeckite/plugin-sidenotes 0.0.5 → 0.0.7

package/README.md

@@ -117,4 +117,8 @@ Stable hooks follow the `rr-sidenotes` convention: `rr-sidenotes__toggle`,
 - The footnote definitions section is hidden on desktop; margins must have
   room for the notes, and themes can restyle `.rr-sidenotes__note` freely.
 - Notes inside tables or deeply nested inline markup are placed after the
-  nearest block ancestor, so their vertical position is approximate.
+  nearest block ancestor, so their vertical position is approximate.
+
+## See also
+
+- [Plugin guide](../../../docs/en/plugin-system.md)

package/README_ja.md

@@ -121,4 +121,8 @@ import "@riebeckite/plugin-sidenotes/style.css";
 - デスクトップでは脚注定義セクションを非表示にします。ノートを置くための
   余白が必要です。テーマは `.rr-sidenotes__note` を自由に再スタイルできます。
 - テーブル内や深く入れ子になったインライン要素の中の注は、最も近いブロック
-  要素の後ろに置かれるため、縦位置はおおよその位置になります。
+  要素の後ろに置かれるため、縦位置はおおよその位置になります。
+
+## ????
+
+- [?????????](../../../docs/ja/plugin-system.md)

package/package.json

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

package/style.css

@@ -1,127 +1,127 @@
-/*
- * @riebeckite/plugin-sidenotes
- *
- * Tufte-style side notes. The same `.rr-sidenotes__note` element is a static
- * margin note on desktop (>= 48rem) and the popover source on mobile
- * (< 48rem). Plugin CSS intentionally loads before theme CSS, so a theme can
- * restyle these hooks without editing the plugin.
- */
-
-.rr-sidenotes__toggle {
-  color: var(--rb-color-accent, #3f5f87);
-  font-size: 0.75em;
-  line-height: 1.2;
-  text-decoration: underline;
-  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
-  text-underline-offset: 0.2em;
-}
-
-.rr-sidenotes__toggle:focus-visible {
-  outline: 2px solid var(--rb-color-accent, #3f5f87);
-  outline-offset: 2px;
-}
-
-.rr-sidenotes__note {
-  --rr-sidenotes-ink: var(--rb-color-ink, #202020);
-  --rr-sidenotes-muted: var(--rb-color-muted, #6b6b6b);
-  --rr-sidenotes-rule: color-mix(
-    in srgb,
-    var(--rr-sidenotes-ink) 18%,
-    transparent
-  );
-
-  color: var(--rr-sidenotes-ink);
-  font-size: 0.8125rem;
-  line-height: 1.55;
-}
-
-.rr-sidenotes__index {
-  display: inline-block;
-  margin-right: 0.4em;
-  color: var(--rr-sidenotes-muted);
-  font-size: 0.75em;
-  font-weight: 600;
-}
-
-.rr-sidenotes__body p {
-  margin: 0 0 0.5em;
-}
-
-.rr-sidenotes__body p:last-child {
-  margin-bottom: 0;
-}
-
-.rr-sidenotes__footnotes {
-  font-size: 0.875rem;
-  color: var(--rr-sidenotes-ink);
-}
-
-/* Mobile: notes are hidden and become tap-open popovers. */
-@media (max-width: 48rem) {
-  .rr-sidenotes__note {
-    position: fixed;
-    z-index: 60;
-    bottom: var(--rb-space-2, 1rem);
-    left: var(--rb-space-2, 1rem);
-    right: var(--rb-space-2, 1rem);
-    display: none;
-    max-height: min(60vh, 24rem);
-    overflow: auto;
-    padding: var(--rb-space-3, 1.5rem);
-    background: var(--rb-color-surface, #ffffff);
-    border: var(--rb-rule-width, 1px) solid var(--rr-sidenotes-rule);
-    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.18);
-  }
-
-  /* Right-edge panel variant driven by `popoverAlignment: "end"`. */
-  .rr-sidenotes__note--popover-end {
-    top: 50%;
-    bottom: auto;
-    left: auto;
-    width: min(20rem, calc(100vw - 2 * var(--rb-space-2, 1rem)));
-    transform: translateY(-50%);
-  }
-
-  .rr-sidenotes__note--open {
-    display: block;
-  }
-}
-
-/* Desktop: static margin notes beside their paragraph anchor. */
-@media (min-width: 48rem) {
-  :is(
-    p,
-    li,
-    dd,
-    dt,
-    td,
-    th,
-    figcaption,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    blockquote
-  ):has(.rr-sidenotes__ref) {
-    position: relative;
-  }
-
-  .rr-sidenotes__note {
-    position: absolute;
-    top: 0;
-    left: 100%;
-    width: var(--rr-sidenotes-width, 16rem);
-    max-width: calc(100vw - 100% - 1rem);
-    margin-left: var(--rb-space-3, 1.5rem);
-    padding-left: var(--rb-space-2, 1rem);
-    border-left: calc(var(--rb-rule-width, 1px) * 2) solid
-      var(--rr-sidenotes-rule);
-  }
-
-  /* Margin notes are always visible, so the trailing definitions are hidden. */
-  .rr-sidenotes__footnotes {
-    display: none;
-  }
-}
+/*
+ * @riebeckite/plugin-sidenotes
+ *
+ * Tufte-style side notes. The same `.rr-sidenotes__note` element is a static
+ * margin note on desktop (>= 48rem) and the popover source on mobile
+ * (< 48rem). Plugin CSS intentionally loads before theme CSS, so a theme can
+ * restyle these hooks without editing the plugin.
+ */
+
+.rr-sidenotes__toggle {
+  color: var(--rb-color-accent, #3f5f87);
+  font-size: 0.75em;
+  line-height: 1.2;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
+  text-underline-offset: 0.2em;
+}
+
+.rr-sidenotes__toggle:focus-visible {
+  outline: 2px solid var(--rb-color-accent, #3f5f87);
+  outline-offset: 2px;
+}
+
+.rr-sidenotes__note {
+  --rr-sidenotes-ink: var(--rb-color-ink, #202020);
+  --rr-sidenotes-muted: var(--rb-color-muted, #6b6b6b);
+  --rr-sidenotes-rule: color-mix(
+    in srgb,
+    var(--rr-sidenotes-ink) 18%,
+    transparent
+  );
+
+  color: var(--rr-sidenotes-ink);
+  font-size: 0.8125rem;
+  line-height: 1.55;
+}
+
+.rr-sidenotes__index {
+  display: inline-block;
+  margin-right: 0.4em;
+  color: var(--rr-sidenotes-muted);
+  font-size: 0.75em;
+  font-weight: 600;
+}
+
+.rr-sidenotes__body p {
+  margin: 0 0 0.5em;
+}
+
+.rr-sidenotes__body p:last-child {
+  margin-bottom: 0;
+}
+
+.rr-sidenotes__footnotes {
+  font-size: 0.875rem;
+  color: var(--rr-sidenotes-ink);
+}
+
+/* Mobile: notes are hidden and become tap-open popovers. */
+@media (max-width: 48rem) {
+  .rr-sidenotes__note {
+    position: fixed;
+    z-index: 60;
+    bottom: var(--rb-space-2, 1rem);
+    left: var(--rb-space-2, 1rem);
+    right: var(--rb-space-2, 1rem);
+    display: none;
+    max-height: min(60vh, 24rem);
+    overflow: auto;
+    padding: var(--rb-space-3, 1.5rem);
+    background: var(--rb-color-surface, #ffffff);
+    border: var(--rb-rule-width, 1px) solid var(--rr-sidenotes-rule);
+    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.18);
+  }
+
+  /* Right-edge panel variant driven by `popoverAlignment: "end"`. */
+  .rr-sidenotes__note--popover-end {
+    top: 50%;
+    bottom: auto;
+    left: auto;
+    width: min(20rem, calc(100vw - 2 * var(--rb-space-2, 1rem)));
+    transform: translateY(-50%);
+  }
+
+  .rr-sidenotes__note--open {
+    display: block;
+  }
+}
+
+/* Desktop: static margin notes beside their paragraph anchor. */
+@media (min-width: 48rem) {
+  :is(
+    p,
+    li,
+    dd,
+    dt,
+    td,
+    th,
+    figcaption,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    blockquote
+  ):has(.rr-sidenotes__ref) {
+    position: relative;
+  }
+
+  .rr-sidenotes__note {
+    position: absolute;
+    top: 0;
+    left: 100%;
+    width: var(--rr-sidenotes-width, 16rem);
+    max-width: calc(100vw - 100% - 1rem);
+    margin-left: var(--rb-space-3, 1.5rem);
+    padding-left: var(--rb-space-2, 1rem);
+    border-left: calc(var(--rb-rule-width, 1px) * 2) solid
+      var(--rr-sidenotes-rule);
+  }
+
+  /* Margin notes are always visible, so the trailing definitions are hidden. */
+  .rr-sidenotes__footnotes {
+    display: none;
+  }
+}