@barmark/render 0.1.0 → 0.2.1

package/CHANGELOG.md

@@ -6,6 +6,59 @@ 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
+chosen on barmark.dev. The chart looks different, so check pages that
+style it. Requires `barmark` 0.2.0 or later.
+
+### Changed
+
+- **Chords are 16px by default** (`--barmark-size` was `1.25rem`, now `1rem`),
+  and no label is under 12px: the meta line, headings, bar numbers, lyrics,
+  repeat counts, triplet marks and diagnostics are all larger in proportion.
+- **Bar numbers sit flush left** in a fixed gutter, on their row's chord
+  baseline. Section headings, lyrics, note lines and mid-chart changes
+  start at the first bar line, so a `3/4` never sits among the numbers.
+- **Chords start at the left** of their share of the bar instead of centred,
+  and no bar is narrower than a bar holding D7sus4.
+- **A change written mid-chart names itself** and marks where it takes
+  effect: "→ Time 3/4 · Tempo ♩ = 120", with a rule, not a lone "3/4".
+- **`###` note lines are italic** at weight 400 (Edwin has no bold, so 600 was
+  faked), and lyrics and note lines use Georgia, which has a true italic.
+- **A single ringed note** has room inside its ring and sits on the chord
+  baseline (it was 1px low).
+
+### Added
+
+- **A `text` property on `<barmark-chart>`** for live editing: set it and the
+  chart redraws, batched with attribute changes. While it is a string it
+  wins over `src` (no fetch) and the script child; `null` returns to them.
+  Text set before the element is defined is kept.
+- **`--barmark-text-font` and `--barmark-label-font`**: the fonts for lyrics
+  and note lines, and for the meta line, mid-chart changes, headings and
+  diagnostics.
+- **`--barmark-directive` and `--barmark-note`**: the colours of mid-chart
+  changes and of note lines.
+
 ## [0.1.0] - 2026-10-31
 
 The first release: barmark charts as an evenly spaced bar grid, as HTML
@@ -64,5 +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.1.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/README.md

@@ -43,12 +43,25 @@ themselves.
 </barmark-chart>
 ```
 
-The element renders from its `src` URL, or from a child
+The element renders from its `text` property, its `src` URL, or a child
 `<script type="text/barmark">` (indentation is removed), and renders again
-whenever either changes; it fetches a `src` once, and renders once
-however many attributes change together. A chart rendered on the server
-by `renderChart` keeps its music until it has a source of its own, and
-still follows `theme` and `bar-numbers`.
+whenever one changes; it fetches a `src` once, and renders once however
+many properties and attributes change together. A chart rendered on the
+server by `renderChart` keeps its music until it has a source of its own,
+and still follows `theme` and `bar-numbers`.
+
+For a live editor, set `text`:
+
+```js
+const chart = document.querySelector("barmark-chart");
+editor.addEventListener("input", () => { chart.text = editor.value; });
+```
+
+While `text` is a string it wins over `src` and the script child, and no
+fetch happens; set it to `null` to go back to them. Any string is safe:
+the chart escapes it, and problems show as diagnostics, never errors.
+There is no `text` attribute: chart text belongs in the property or the
+script child.
 
 The element registers the font itself, from the `fonts/` folder beside its
 own module. If your bundler moves that file, register it yourself before
@@ -64,6 +77,7 @@ the element loads, with `<style data-barmark-font>` holding
 | `rehearsalLetters` | `rehearsal-letters` (`rehearsalLetters`) | `false` | boxed A, B, C… on each section as played |
 | `diagnostics` | | `false` | list the chart's errors and warnings below it |
 | `fontUrl` | | none | emit Edwin's `@font-face` rule before the chart |
+| (the `text` argument) | (`text`) | `null` | the chart to draw; wins over `src` and the script child |
 
 ## Styling on purpose
 
@@ -71,18 +85,23 @@ Set these custom properties on the element or anything above it:
 
 | Property | What it sets |
 |---|---|
-| `--barmark-font` | the chart's typeface |
-| `--barmark-size` | the base size everything scales from (default `1.25rem`) |
+| `--barmark-font` | the chords' typeface |
+| `--barmark-text-font` | lyrics and `###` note lines (default Georgia) |
+| `--barmark-label-font` | the meta line, mid-chart changes, headings and diagnostics (default the system sans) |
+| `--barmark-size` | the chord size everything scales from (default `1rem`) |
 | `--barmark-ink` | chords and text |
 | `--barmark-paper` | the background |
 | `--barmark-muted` | holds, bar numbers, braces, meta lines |
 | `--barmark-rule` | bar lines |
 | `--barmark-accent` | errors |
+| `--barmark-directive` | mid-chart changes (default the muted colour) |
+| `--barmark-note` | `###` note lines (default the ink colour) |
 
 ```css
 barmark-chart {
-	--barmark-size: 1rem;
+	--barmark-size: 0.9rem;
 	--barmark-paper: transparent;
+	--barmark-text-font: "Noto Serif", Georgia, serif;
 }
 barmark-chart::part(heading) {
 	color: teal;
@@ -121,6 +140,12 @@ another serif.
 
 ## What it draws
 
+Bar numbers sit in a gutter at the left edge; section headings, lyrics,
+note lines and mid-chart changes start at the first bar line. Chords start
+at the left of their share of the bar. A change written mid-chart names
+itself: `time: 3/4, tempo: 120` draws as "→ Time 3/4 · Tempo ♩ = 120".
+At the default size chords are 16px and no label is under 12px.
+
 Chords appear in their canonical form whatever the author typed (`Cø`
 shows as Cm⁷(♭5)). `%` is drawn as the bar it copies; a replayed section
 is drawn in full with its own bar numbers, and its own lyrics replace the

package/dist/element.d.ts

@@ -4,6 +4,13 @@ type Attributes = {
     hasAttribute(name: string): boolean;
 };
 export declare function optionsFromAttributes(el: Attributes): RenderOptions;
+export type ChartSource = "text" | "src" | "script" | "none";
+/** What a chart draws: its `text` while that is a string, else `src`, else its script child. */
+export declare function chartSource(from: {
+    text: string | null;
+    src: string;
+    script: boolean;
+}): ChartSource;
 /** Chart text from a script element: blank edges and common indentation removed. */
 export declare function inlineChartText(text: string): string;
 export {};

package/dist/element.js

@@ -1,8 +1,8 @@
 /**
- * `<barmark-chart>`: renders itself from a `src` URL or from a child
- * `<script type="text/barmark">`, and again whenever either changes. A
- * shadow root rendered on the server is reused. Importing this module
- * registers the element (once) and the font (once per document).
+ * `<barmark-chart>`: renders itself from its `text` property, a `src` URL
+ * or a child `<script type="text/barmark">`, and again whenever one
+ * changes. A shadow root rendered on the server is reused. Importing this
+ * module registers the element (once) and the font (once per document).
  */
 import { FONT_FAMILY, fontFaceCss } from "./font.js";
 import { loadErrorContent, shadowContent, THEMES } from "./html.js";
@@ -14,6 +14,14 @@ export function optionsFromAttributes(el) {
         rehearsalLetters: el.hasAttribute("rehearsal-letters"),
     };
 }
+/** What a chart draws: its `text` while that is a string, else `src`, else its script child. */
+export function chartSource(from) {
+    if (from.text !== null)
+        return "text";
+    if (from.src)
+        return "src";
+    return from.script ? "script" : "none";
+}
 /** Chart text from a script element: blank edges and common indentation removed. */
 export function inlineChartText(text) {
     const lines = text.replace(/^\s*\n|\n\s*$/g, "").split("\n");
@@ -43,7 +51,14 @@ function defineElement() {
         #scheduled = false;
         /** The text fetched for `src`, kept so a change of options does not fetch again. */
         #fetched = null;
+        #text = null;
         connectedCallback() {
+            // Text set before the element was defined landed on the instance: route it through the setter.
+            if (Object.hasOwn(this, "text")) {
+                const text = this.text ?? null;
+                delete this.text;
+                this.text = text;
+            }
             registerFont(this.ownerDocument);
             this.#observer.observe(this, { childList: true, subtree: true, characterData: true });
             this.#schedule();
@@ -55,6 +70,15 @@ function defineElement() {
             if (this.isConnected)
                 this.#schedule();
         }
+        /** Chart text to draw; while it is a string it wins over `src` and a script child. */
+        get text() {
+            return this.#text;
+        }
+        set text(v) {
+            this.#text = v === null || v === undefined ? null : String(v);
+            if (this.isConnected)
+                this.#schedule();
+        }
         get src() {
             return this.getAttribute("src") ?? "";
         }
@@ -95,27 +119,30 @@ function defineElement() {
         async #render() {
             const script = this.querySelector('script[type="text/barmark"]');
             const options = optionsFromAttributes(this);
+            const source = chartSource({ text: this.#text, src: this.src, script: script !== null });
             // With no source of its own, a server-rendered chart keeps its music and takes the options it can.
-            if (!this.src && !script)
+            if (source === "none")
                 return this.#restyle(options);
             const render = ++this.#renders;
-            const content = await this.#content(script, options);
+            const content = await this.#content(source, script, options);
             if (render !== this.#renders)
                 return;
             (this.shadowRoot ?? this.attachShadow({ mode: "open" })).innerHTML = content;
         }
-        async #content(script, options) {
-            if (!this.src)
+        async #content(source, script, options) {
+            if (source === "text")
+                return shadowContent(this.#text ?? "", options);
+            if (source !== "src")
                 return shadowContent(inlineChartText(script?.textContent ?? ""), options);
             try {
-                return shadowContent(await this.#text(this.src), options);
+                return shadowContent(await this.#fetch(this.src), options);
             }
             catch (e) {
                 this.#fetched = null;
                 return loadErrorContent(`Could not load ${this.src}: ${e.message}`, options);
             }
         }
-        #text(src) {
+        #fetch(src) {
             if (this.#fetched?.src !== src)
                 this.#fetched = { src, text: fetchText(src) };
             return this.#fetched.text;

package/dist/html.js

@@ -3,9 +3,18 @@ import { escapeHtml } from "./escape.js";
 import { fontFaceCss } from "./font.js";
 import { layoutChart } from "./model.js";
 import { speakBar } from "./speech.js";
-import { FIT_STEPS, stylesheet } from "./styles.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. */
@@ -32,16 +41,16 @@ function headerHtml(model) {
         return "";
     return `<header class="bm-header">${title}${meta ? `<p class="bm-meta" part="meta">${meta}</p>` : ""}</header>`;
 }
-/** "D major · 4/4 · ♩ = 145 · swing", escaped. */
-function metaText(d) {
+/** "D major · 4/4 · ♩ = 145 · swing", escaped; labelled, "Key D major · Time 4/4 · …". */
+function metaText(d, labelled = false) {
     return [
-        d.key ? `${glyphs(d.key.tonic)} ${d.key.mode}` : "",
-        d.time ? `${d.time.n}/${d.time.d}` : "",
-        d.tempo ? `♩ = ${d.tempo}` : "",
-        d.feel ?? "",
+        ["Key", d.key ? `${glyphs(d.key.tonic)} ${d.key.mode}` : ""],
+        ["Time", d.time ? `${d.time.n}/${d.time.d}` : ""],
+        ["Tempo", d.tempo ? `♩ = ${d.tempo}` : ""],
+        ["Feel", d.feel ?? ""],
     ]
-        .filter(Boolean)
-        .map(escapeHtml)
+        .filter(([, value]) => value)
+        .map(([label, value]) => escapeHtml(labelled ? `${label} ${value}` : (value ?? "")))
         .join(" · ");
 }
 function blockHtml(block, settings) {
@@ -66,8 +75,8 @@ function fitWidth(block) {
 }
 /** Em per bar: padding, plus each slot's text and the gap after it. */
 const cellWidth = (cell) => cell.kind === "fermata"
-    ? 2.6
-    : Math.max(2.6, 1.5 + (cell.meter ? 0.8 : 0) + cell.slots.reduce((w, s) => w + slotWidth(s), 0));
+    ? MIN_BAR
+    : Math.max(MIN_BAR, 1.5 + (cell.meter ? 0.8 : 0) + cell.slots.reduce((w, s) => w + slotWidth(s), 0));
 /** Roughly: 0.65em a baseline character, 0.4em a superscript one, 0.6em between slots. */
 function slotWidth(slot) {
     if (slot.kind === "group")
@@ -104,7 +113,8 @@ function itemHtml(item, columns, settings) {
         case "text":
             return `<p class="bm-text${item.note ? " bm-note" : ""}" part="text">${escapeHtml(item.text)}</p>`;
         case "directive":
-            return `<p class="bm-directive" part="meta">${metaText(item.set)}</p>`;
+            // Mid-chart, a change names itself: "→ Time 3/4", never a lone "3/4".
+            return `<p class="bm-directive" part="meta"><span class="bm-change" aria-hidden="true">→</span><span>${metaText(item.set, true)}</span></p>`;
         case "error":
             return errorHtml(item.source, item.messages);
     }

package/dist/styles.d.ts

@@ -1,8 +1,4 @@
-/**
- * The chart's styles. Everything is sized in em from `--barmark-size`, so
- * text size and zoom scale the chart; colours come from the palettes below
- * unless the page sets the `--barmark-*` custom properties.
- */
+export declare const MIN_BAR = 4.68;
 export type Palette = {
     ink: string;
     paper: string;

package/dist/styles.js

@@ -1,4 +1,47 @@
 import { FONT_FAMILY } from "./font.js";
+/**
+ * The chart's styles. Everything is sized in em from `--barmark-size`, so
+ * text size and zoom scale the chart; colours come from the palettes below
+ * unless the page sets the `--barmark-*` custom properties.
+ */
+/**
+ * Text sizes as fractions of the chord size, `--barmark-size` (1rem unless
+ * the page sets it). Chosen on barmark.dev, 2026-11-01: at the default size
+ * nothing a reader needs is under 12px. The superscript is a fraction of its
+ * chord and the octave of its note name; everything else of the chord size.
+ */
+const SIZES = {
+    title: 1.16,
+    meta: 1,
+    directive: 0.97,
+    heading: 0.77,
+    text: 0.9,
+    noChord: 1.03,
+    noteNames: 0.9,
+    superscript: 0.84,
+    octave: 0.79,
+    tuplet: 0.84,
+    repeat: 0.97,
+    diagnostics: 0.97,
+    barNumber: 0.84,
+    meter: 0.77,
+    cut: 0.77,
+};
+/** Lengths, in chord sizes: the bar-number gutter, the narrowest bar (a D7sus4 bar), the gap under a heading. */
+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`;
+/** A length in chord sizes, in the em of text at `size`. */
+const at = (size, length) => em(length / size);
 /** Both pass WCAG AA on their paper (tests/contrast.test.ts). */
 export const PALETTES = {
     light: { ink: "#1d1d1f", paper: "#fffdf8", muted: "#6a6052", rule: "#4a4a4a", accent: "#9a4a12" },
@@ -10,12 +53,17 @@ const colours = (p) => Object.keys(p)
     .map((k) => `--bm-${k}:var(--barmark-${k},${p[k]});`)
     .join("");
 const SANS = `system-ui,-apple-system,"Segoe UI",sans-serif`;
+/** The meta line, directives, headings and diagnostics. */
+const LABEL = `var(--barmark-label-font,${SANS})`;
+/** Lyrics and note lines: a serif every system has, with a true italic (Edwin has none). */
+const TEXT = "var(--barmark-text-font,Georgia,serif)";
+const CHART_FONT = `var(--barmark-font,"${FONT_FAMILY}","Edwin",Georgia,serif)`;
 const css = `
 :host{all:initial;display:block}
 .bm-chart{${colours(PALETTES.light)}
 	container:bm/inline-size;
-	font-family:var(--barmark-font,"${FONT_FAMILY}","Edwin",Georgia,serif);
-	font-size:var(--barmark-size,1.25rem);
+	font-family:${CHART_FONT};
+	font-size:var(--barmark-size,1rem);
 	line-height:1.3;color:var(--bm-ink);background:var(--bm-paper);
 	padding:1em 1.2em;box-sizing:border-box;text-align:start}
 .bm-chart *{box-sizing:border-box}
@@ -24,55 +72,62 @@ const css = `
 @media print{.bm-chart[data-theme]{${colours(PALETTES.light)}color-scheme:light}}
 .bm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .bm-header{margin-bottom:.8em}
-.bm-title{font-size:1.5em;font-weight:normal;margin:0 0 .15em}
-.bm-meta,.bm-directive{font-family:${SANS};font-size:.62em;color:var(--bm-muted);margin:0}
-.bm-directive{grid-column:1/-1;margin:.9em 0 .3em}
+.bm-title{font-size:${em(SIZES.title)};font-weight:normal;margin:0 0 .15em}
+.bm-meta{font-family:${LABEL};font-size:${em(SIZES.meta)};color:var(--bm-muted);margin:0}
+.bm-directive{grid-column:1/-1;display:flex;align-items:baseline;gap:.4em;margin:.9em 0 .3em ${at(SIZES.directive, GUTTER)};font-family:${LABEL};font-size:${em(SIZES.directive)};color:var(--barmark-directive,var(--bm-muted))}
+.bm-directive::after{content:"";flex:1;align-self:center;margin-left:.4em;border-top:.06em solid var(--bm-rule);opacity:.6}
 .bm-section{margin-top:.9em}
-.bm-heading{display:flex;align-items:center;gap:.5em;margin:0 0 .4em;font:600 .6em/1 ${SANS};letter-spacing:.08em;text-transform:uppercase;color:var(--bm-ink)}
+.bm-heading{display:flex;align-items:center;gap:.5em;margin:0 0 ${at(SIZES.heading, HEADING_GAP)} ${at(SIZES.heading, GUTTER)};font:600 ${em(SIZES.heading)}/1 ${LABEL};letter-spacing:.08em;text-transform:uppercase;color:var(--bm-ink)}
 .bm-rehearsal{border:.12em solid currentColor;padding:.15em .35em;border-radius:.15em;letter-spacing:0}
 .bm-times{font:italic 1.2em/1 Georgia,serif;text-transform:none;letter-spacing:0;color:var(--bm-muted)}
-.bm-grid{display:grid;grid-template-columns:auto repeat(var(--bm-cols),auto) auto;width:max-content;max-width:100%}
+.bm-grid{display:grid;grid-template-columns:${em(GUTTER)} repeat(var(--bm-cols),auto) auto;width:max-content;max-width:100%}
 .bm-chart[data-bar-numbers="off"] .bm-grid{grid-template-columns:repeat(var(--bm-cols),auto) auto}
 .bm-row{display:contents}
-.bm-bar-number{font:.5em/1 ${SANS};color:var(--bm-muted);padding:1.6em .8em 0 0;text-align:end}
-.bm-bar{position:relative;display:flex;align-items:baseline;min-width:2.6em;min-height:2.2em;padding:.65em .7em .25em;border-right:.075em solid var(--bm-rule)}
+.bm-bar-number{display:flex;flex:none;align-items:baseline;width:${at(SIZES.barNumber, GUTTER)};padding-top:${at(SIZES.barNumber, 0.65)};font:${em(SIZES.barNumber)}/1 ${SANS};color:var(--bm-muted)}
+.bm-bar-number::before{content:"\\200b";font:${em(1 / SIZES.barNumber)}/1.3 ${CHART_FONT}}
+.bm-chart[data-bar-numbers="off"] :is(.bm-heading,.bm-text,.bm-directive){margin-left:0}
+.bm-bar{position:relative;display:flex;align-items:baseline;min-width:${em(MIN_BAR)};min-height:2.2em;padding:.65em .7em .25em;border-right:.075em solid var(--bm-rule)}
 .bm-row>div.bm-bar:first-of-type{border-left:.075em solid var(--bm-rule)}
 .bm-row>div.bm-bar[data-repeat-start]{border-left:.25em double var(--bm-rule)}
 .bm-row>div.bm-bar[data-repeat-end]{border-right:.25em double var(--bm-rule)}
-.bm-bar-body{display:flex;flex:1;align-items:baseline;justify-content:space-around;gap:.6em}
+.bm-bar-body{display:flex;flex:1;align-items:baseline;gap:.6em}
+.bm-bar-body>:not(.bm-meter,.bm-cut){flex:1 1 0;min-width:max-content}
 .bm-repeat{display:flex;align-items:center;padding-left:.4em;white-space:nowrap}
-.bm-repeat .bm-times{font-size:.75em}
+.bm-repeat .bm-times{font-size:${em(SIZES.repeat)}}
 .bm-chord{white-space:nowrap}
-.bm-chord sup{font-size:.62em;vertical-align:.55em;line-height:0}
-.bm-chord sub{font-size:.6em;line-height:0}
+.bm-chord sup{font-size:${em(SIZES.superscript)};vertical-align:.55em;line-height:0}
+.bm-chord sub{font-size:${em(SIZES.octave)};line-height:0}
 .bm-hold,.bm-unknown,.bm-brace{color:var(--bm-muted)}
-.bm-nc{font-size:.72em;letter-spacing:.06em}
+.bm-nc{font-size:${em(SIZES.noChord)};letter-spacing:.06em}
 .bm-silence{display:inline-block;width:.9em;height:.32em;background:var(--bm-ink);vertical-align:.25em}
-.bm-ring{display:inline-block;min-width:1.4em;padding:0 .3em;border:.07em solid currentColor;border-radius:1em;text-align:center}
+.bm-ring,.bm-notes{font-size:${em(SIZES.noteNames)}}
+.bm-ring{display:inline-block;min-width:1.4em;padding:${em(RING.y)} ${em(RING.x)};margin:${em(-(RING.y + RING.border))} 0;border:${em(RING.border)} solid currentColor;border-radius:1em;text-align:center}
 .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 .55em/1 Georgia,serif;color:var(--bm-muted);background:var(--bm-paper);padding:0 .3em}
-.bm-meter{display:inline-flex;flex-direction:column;align-items:center;align-self:center;font:700 .5em/.95 ${SANS};color:var(--bm-muted)}
+.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}
-.bm-cut{position:absolute;top:.3em;right:.45em;font:.42em/1 ${SANS};color:var(--bm-muted)}
-.bm-text{grid-column:1/-1;margin:.2em 0 .5em;font-size:.8em}
-.bm-note{font-size:.7em;font-weight:600}
+.bm-cut{position:absolute;top:.3em;right:.45em;font:${em(SIZES.cut)}/1 ${SANS};color:var(--bm-muted)}
+.bm-text{grid-column:1/-1;margin:.2em 0 .5em ${at(SIZES.text, GUTTER)};font-family:${TEXT};font-size:${em(SIZES.text)}}
+.bm-note{font-style:italic;color:var(--barmark-note,var(--bm-ink))}
 .bm-error{grid-column:1/-1;margin:.3em 0}
 .bm-error code{font:.7em/1.4 ui-monospace,Menlo,Consolas,monospace;text-decoration:underline wavy var(--bm-accent);text-decoration-thickness:.08em;text-underline-offset:.25em;white-space:pre-wrap}
-.bm-diagnostics{margin:1em 0 0;padding-left:1.2em;font:.55em/1.5 ${SANS};color:var(--bm-muted)}
+.bm-diagnostics{margin:1em 0 0;padding-left:1.2em;font:${em(SIZES.diagnostics)}/1.5 ${LABEL};color:var(--bm-muted)}
 .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}
 }
 ${FIT_STEPS.map((w) => {
     const g = `.bm-grid[data-fit="${w}"]`;
-    return `@container bm (max-width:${w}em){${g}{display:block}${g}>.bm-row{display:flex;flex-wrap:wrap}${g} .bm-empty{display:none}${g} .bm-bar{flex:0 1 auto;max-width:100%;border-left:.075em solid var(--bm-rule);margin-left:-.075em}${g} :is(.bm-bar-body,.bm-group,.bm-notes){flex-wrap:wrap}}`;
+    return `@container bm (max-width:${w}em){${g}{display:block}${g}>.bm-row{display:flex;flex-wrap:wrap}${g} .bm-empty{display:none}${g} .bm-bar{flex:0 1 auto;max-width:100%;border-left:.075em solid var(--bm-rule);margin-left:-.075em}${g} :is(.bm-bar-body,.bm-group,.bm-notes){flex-wrap:wrap}${g} .bm-bar-body>*{flex:1 1 auto;min-width:auto}}`;
 }).join("\n")}
 `;
 /** Collapse the readable source above: whitespace around punctuation and between rules. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@barmark/render",
-	"version": "0.1.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",