feat(renderer): add quality name as CSS part; tune cursive maj7 triangle position

The chord-quality span now carries the quality key as a second part value
(e.g. part="chord-quality maj7"), making each quality independently
targetable in CSS with [part~="maj7"] without touching the preset HTML.

Two CSS variables in [data-typeface="cursive"] control the triangle's
vertical alignment and left margin; they default to browser-native
superscript behaviour so sans and serif are unaffected.

Author: nelstrom

packages/grigson/src/element.test.ts

@@ -126,7 +126,7 @@ describe('GrigsonChart', () => {
     expect(shadowRoot.querySelector('[part~="barline"]')).not.toBeNull();
     expect(shadowRoot.querySelector('[part="chord"]')).not.toBeNull();
     expect(shadowRoot.querySelector('[part="chord-root"]')).not.toBeNull();
-    expect(shadowRoot.querySelector('[part="chord-quality"]')).not.toBeNull();
+    expect(shadowRoot.querySelector('[part~="chord-quality"]')).not.toBeNull();
   });
 
   it('renders front matter with part attributes', async () => {
@@ -543,7 +543,7 @@ describe('GrigsonHtmlRenderer', () => {
     expect(result.querySelector('[part~="barline"]')).not.toBeNull();
     expect(result.querySelector('[part="chord"]')).not.toBeNull();
     expect(result.querySelector('[part="chord-root"]')).not.toBeNull();
-    expect(result.querySelector('[part="chord-quality"]')).not.toBeNull();
+    expect(result.querySelector('[part~="chord-quality"]')).not.toBeNull();
   });
 
   it('renderChart() includes frontmatter parts when the song has front matter', () => {

packages/grigson/src/renderers/html.ts

@@ -448,7 +448,7 @@ function renderChordInner(
   const rawQuality = preset[chord.quality as keyof NotationPreset] ?? '';
   const qualitySymbol = rawQuality ? wrapQualityAccidentals(rawQuality, mode) : '';
   const qualityHtml = qualitySymbol
-    ? `<span part="chord-quality" aria-hidden="true">${qualitySymbol}</span>`
+    ? `<span part="chord-quality ${chord.quality}" aria-hidden="true">${qualitySymbol}</span>`
     : '';
   return rootHtml + qualityHtml;
 }

packages/grigson/src/renderers/renderer-css.ts

@@ -73,6 +73,8 @@ export function getRendererStyles(typeface: string = 'sans'): string {
         --grigson-barline-font-size: 2em;
         --grigson-barline-glyph-offset: 0.23em;
         --grigson-chord-offset: 0.1em;
+        --grigson-maj7-triangle-valign: 0.7em;
+        --grigson-maj7-triangle-margin: 0.15em;
       }
 
       [data-typeface="serif"] {
@@ -221,6 +223,15 @@ export function getRendererStyles(typeface: string = 'sans'): string {
         margin-right: 0.05em;
       }
 
+      [part~="maj7"] sup {
+        vertical-align: var(--grigson-maj7-triangle-valign, super);
+        line-height: 0;
+      }
+
+      [part~="maj7"] {
+        margin-left: var(--grigson-maj7-triangle-margin, 0em);
+      }
+
       [part="quality-accidental"][data-glyph="unicode"] {
         font-size: 1em;
         vertical-align: 0.15em;