@barmark/render 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -6,6 +6,24 @@ package uses [semantic versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## [0.2.1] - 2026-11-01
+
+Two fixes found while moving barmark.dev to the element. Depends on
+`barmark` ^0.3.0, which warns when a chart has no bar lines.
+
+### Fixed
+
+- **Triplet brackets work on any paper.** The bracket is drawn either
+  side of its number, leaving a gap, instead of under it with the number
+  painted over in the paper colour. A see-through `--barmark-paper` used
+  to show the number in a box.
+- **A chart from `renderChart` keeps its options when the element
+  loads.** The `<barmark-chart>` it wraps the chart in now carries them as
+  attributes (`theme`, `bar-numbers="off"`, `rehearsal-letters`). Before,
+  a page that rendered a dark chart on the server and imported
+  `@barmark/render/element` saw it switch to the system theme, and lose
+  its rehearsal letters once given new `text`.
+
 ## [0.2.0] - 2026-11-01
 
 Easier to read, and the bar numbers easier to scan. Every size below was
@@ -99,6 +117,7 @@ that needs no script or as the `<barmark-chart>` web component. Requires
   zoom without sideways scrolling, the element renders and re-renders, and
   a screen reader hears "bar 9: D". Run them with `bun run test:browser`.
 
-[Unreleased]: https://github.com/kevinpeckham/barmark/compare/render-v0.2.0...HEAD
+[Unreleased]: https://github.com/kevinpeckham/barmark/compare/render-v0.2.1...HEAD
+[0.2.1]: https://github.com/kevinpeckham/barmark/compare/render-v0.2.0...render-v0.2.1
 [0.2.0]: https://github.com/kevinpeckham/barmark/compare/render-v0.1.0...render-v0.2.0
 [0.1.0]: https://github.com/kevinpeckham/barmark/releases/tag/render-v0.1.0

package/dist/html.js

@@ -5,7 +5,16 @@ import { layoutChart } from "./model.js";
 import { speakBar } from "./speech.js";
 import { FIT_STEPS, MIN_BAR, stylesheet } from "./styles.js";
 export function renderChart(text, options = {}) {
-    return `${fontStyle(options)}<barmark-chart><template shadowrootmode="open">${shadowContent(text, options)}</template></barmark-chart>`;
+    return `${fontStyle(options)}<barmark-chart${elementAttributes(options)}><template shadowrootmode="open">${shadowContent(text, options)}</template></barmark-chart>`;
+}
+/** The options as the element's attributes, so it keeps them when it loads or takes new text. */
+function elementAttributes(options) {
+    const theme = themeOf(options);
+    return [
+        theme === "auto" ? "" : ` theme="${theme}"`,
+        options.barNumbers === false ? ' bar-numbers="off"' : "",
+        options.rehearsalLetters ? " rehearsal-letters" : "",
+    ].join("");
 }
 export const THEMES = ["auto", "light", "dark"];
 /** Only a known theme reaches the markup: hosts may pass any string through. */

package/dist/styles.js

@@ -31,6 +31,12 @@ const SIZES = {
 const GUTTER = 2.06;
 export const MIN_BAR = 4.68;
 const HEADING_GAP = 0.645;
+/**
+ * The triplet bracket, in chord sizes: its line sits this far below the top
+ * of the number, with hooks this long, drawn either side of the number so
+ * nothing is painted over it and any paper shows through.
+ */
+const BRACKET = { top: 0.6, hook: 0.3, line: 0.06 };
 /** The single note's ring, in its own em: padding, and the border it spills past. */
 const RING = { y: 0.21, x: 0.5, border: 0.07 };
 const em = (n) => `${Number(n.toFixed(3))}em`;
@@ -99,8 +105,10 @@ const css = `
 .bm-notes{display:inline-flex;gap:.3em;align-items:baseline}
 .bm-notes u{text-decoration-thickness:.08em;text-underline-offset:.15em}
 .bm-group{position:relative;display:inline-flex;gap:.45em;align-items:baseline}
-.bm-group::before{content:"";position:absolute;left:0;right:0;top:-.45em;height:.3em;border:.06em solid var(--bm-muted);border-bottom:none}
-.bm-tuplet{position:absolute;left:50%;top:-1.25em;transform:translateX(-50%);font:italic 600 ${em(SIZES.tuplet)}/1 Georgia,serif;color:var(--bm-muted);background:var(--bm-paper);padding:0 .3em}
+.bm-tuplet{position:absolute;left:0;right:0;top:-1.25em;display:flex;justify-content:center;font:italic 600 ${em(SIZES.tuplet)}/1 Georgia,serif;color:var(--bm-muted)}
+.bm-tuplet::before,.bm-tuplet::after{content:"";flex:1;align-self:flex-start;margin-top:${at(SIZES.tuplet, BRACKET.top)};height:${at(SIZES.tuplet, BRACKET.hook)};border:${at(SIZES.tuplet, BRACKET.line)} solid var(--bm-muted);border-bottom:none}
+.bm-tuplet::before{border-right:none;margin-right:.3em}
+.bm-tuplet::after{border-left:none;margin-left:.3em}
 .bm-meter{display:inline-flex;flex-direction:column;align-items:center;align-self:center;font:700 ${em(SIZES.meter)}/.95 ${SANS};color:var(--bm-muted)}
 .bm-fermata-glyph{display:block;color:var(--bm-ink)}
 .bm-bar[data-cut]{outline:.08em dashed var(--bm-muted);outline-offset:-.25em}
@@ -113,7 +121,7 @@ const css = `
 .bm-diagnostics .bm-error{color:var(--bm-accent)}
 @media (forced-colors:active){
 	.bm-bar,.bm-row>div.bm-bar:first-of-type,.bm-row>div.bm-bar[data-repeat-start],.bm-row>div.bm-bar[data-repeat-end]{border-color:CanvasText}
-	.bm-ring,.bm-group::before{border-color:CanvasText}
+	.bm-ring,.bm-tuplet::before,.bm-tuplet::after{border-color:CanvasText}
 	.bm-silence{background:CanvasText;forced-color-adjust:none}
 	.bm-bar[data-cut]{outline-color:CanvasText}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@barmark/render",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"description": "Render barmark chord charts as a clean, accessible bar grid: HTML with Declarative Shadow DOM, or the <barmark-chart> web component.",
 	"type": "module",
 	"exports": {
@@ -47,7 +47,7 @@
 		"url": "https://github.com/kevinpeckham/barmark/issues"
 	},
 	"dependencies": {
-		"barmark": "^0.2.0"
+		"barmark": "^0.3.0"
 	},
 	"scripts": {
 		"build": "rm -rf dist && tsc -p tsconfig.build.json",