vanilla-breeze 0.1.3 → 0.2.0

package/dist/cdn/components/empathy-map.js

@@ -1,4 +1,4 @@
-var m=`
+var _=`
   :host {
     display: block;
     font-family: var(--_font-sans);
@@ -12,11 +12,20 @@ var m=`
     --_muted:  var(--empathy-map-muted, var(--color-text-muted, #666666));
     --_text:   var(--empathy-map-text, var(--color-text, #1a1a1a));
     --_radius: var(--empathy-map-radius, var(--radius-xl, 1rem));
-    --_accent: var(--empathy-map-accent, var(--color-interactive, #0066cc));
-    --_says:   var(--empathy-map-says, #3b82f6);
-    --_thinks: var(--empathy-map-thinks, #8b5cf6);
-    --_does:   var(--empathy-map-does, #f59e0b);
-    --_feels:  var(--empathy-map-feels, #ef4444);
+    --_accent: var(--empathy-map-accent, var(--color-interactive, var(--color-primary, #0066cc)));
+    --_link:   var(--empathy-map-link, var(--color-interactive, var(--color-primary, #6366f1)));
+    --_primary: var(--empathy-map-primary, var(--color-primary, #6366f1));
+    --_accent-bar: var(--empathy-map-accent-bar, var(--color-accent, #8b5cf6));
+    --_says:   var(--empathy-map-says, var(--color-info, #3b82f6));
+    --_thinks: var(--empathy-map-thinks, var(--color-accent, #8b5cf6));
+    --_does:   var(--empathy-map-does, var(--color-warning, #f59e0b));
+    --_feels:  var(--empathy-map-feels, var(--color-error, #ef4444));
+    --_says-bg:   color-mix(in oklch, var(--_says)   16%, var(--_card));
+    --_thinks-bg: color-mix(in oklch, var(--_thinks) 16%, var(--_card));
+    --_does-bg:   color-mix(in oklch, var(--_does)   16%, var(--_card));
+    --_feels-bg:  color-mix(in oklch, var(--_feels)  16%, var(--_card));
+    --_chip-type-bg: color-mix(in oklch, var(--_accent-bar) 18%, var(--_card));
+    --_chip-type-fg: var(--_accent-bar);
     --_font-sans:    var(--empathy-map-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
     --_font-xs:      var(--empathy-map-font-xs, var(--font-size-xs, 0.75rem));
     --_font-sm:      var(--empathy-map-font-sm, var(--font-size-sm, 0.875rem));
@@ -58,7 +67,7 @@ var m=`
     inset-block: 0;
     inset-inline-start: 0;
     width: 4px;
-    background: linear-gradient(135deg, #6366f1, #8b5cf6);
+    background: linear-gradient(135deg, var(--_primary), var(--_accent-bar));
   }
 
   .empathy-map__header-top {
@@ -90,12 +99,8 @@ var m=`
   }
 
   .chip--type {
-    color: #6366f1;
-    background: #ede9fe;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .chip--type { color: #a78bfa; background: #2e1065; }
+    color: var(--_chip-type-fg);
+    background: var(--_chip-type-bg);
   }
 
   /* \u2500\u2500 Persona ref \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -116,7 +121,7 @@ var m=`
     flex-shrink: 0;
   }
 
-  a.persona-ref:hover { color: #6366f1; text-decoration: underline; }
+  a.persona-ref:hover { color: var(--_link); text-decoration: underline; }
 
   /* \u2500\u2500 Title & summary (slotted content) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
   .empathy-map__title-wrap {
@@ -205,17 +210,10 @@ var m=`
     height: 16px;
   }
 
-  .quadrant--says   .quadrant__icon { background: #dbeafe; color: var(--_says); }
-  .quadrant--thinks .quadrant__icon { background: #ede9fe; color: var(--_thinks); }
-  .quadrant--does   .quadrant__icon { background: #fef3c7; color: var(--_does); }
-  .quadrant--feels  .quadrant__icon { background: #fee2e2; color: var(--_feels); }
-
-  @media (prefers-color-scheme: dark) {
-    .quadrant--says   .quadrant__icon { background: #1e3a5f; }
-    .quadrant--thinks .quadrant__icon { background: #2e1065; }
-    .quadrant--does   .quadrant__icon { background: #451a03; }
-    .quadrant--feels  .quadrant__icon { background: #450a0a; }
-  }
+  .quadrant--says   .quadrant__icon { background: var(--_says-bg);   color: var(--_says); }
+  .quadrant--thinks .quadrant__icon { background: var(--_thinks-bg); color: var(--_thinks); }
+  .quadrant--does   .quadrant__icon { background: var(--_does-bg);   color: var(--_does); }
+  .quadrant--feels  .quadrant__icon { background: var(--_feels-bg);  color: var(--_feels); }
 
   .quadrant__label {
     font-size: 13px;
@@ -492,7 +490,7 @@ var m=`
   @media print {
     .empathy-map {
       break-inside: avoid;
-      border-color: #ccc;
+      border-color: var(--_border);
     }
 
     .quadrant__edit-btn,
@@ -511,9 +509,9 @@ var m=`
 
   /* \u2500\u2500 Utility \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
   .state-msg        { padding: var(--_space-l); font-size: var(--_font-sm); color: var(--_muted); font-style: italic; }
-  .state-msg--error { color: #dc2626; }
-  code { font-family: Monaco, Menlo, monospace; font-size: 0.88em; }
-`;var k=window.matchMedia("(prefers-reduced-motion: reduce)");var v=new Map;function y(i,t,e={}){let a=e.priority??10,n={impl:t,bundle:e.bundle,contract:e.contract,priority:a},r=v.get(i);if(customElements.get(i)){if(!r||r.priority>=a){r&&r.priority===a&&r.impl!==t&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${r.bundle}" (priority ${r.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${i}> defined by "${r.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(r&&r.priority>=a){r.priority===a&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${r.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}v.set(i,n),customElements.define(i,t)}function c(i){return String(i).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function p(i){return`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${i}</svg>`}var l={user:'<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',pencil:'<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',check:'<path d="M20 6 9 17l-5-5"/>',target:'<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',alertTriangle:'<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',messageCircle:'<path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/>',lightbulb:'<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>',wrench:'<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/>',heart:'<path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/>',mapPin:'<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/>',checkCircle:'<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/>',x:'<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',download:'<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>',send:'<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/>'},h={says:{label:"Says",icon:l.messageCircle,color:"#3b82f6"},thinks:{label:"Thinks",icon:l.lightbulb,color:"#8b5cf6"},does:{label:"Does",icon:l.wrench,color:"#f59e0b"},feels:{label:"Feels",icon:l.heart,color:"#ef4444"}},x={delighted:{emoji:"\u{1F604}",score:.95,color:"#16a34a"},satisfied:{emoji:"\u{1F60A}",score:.8,color:"#22c55e"},hopeful:{emoji:"\u{1F642}",score:.68,color:"#84cc16"},curious:{emoji:"\u{1F914}",score:.55,color:"#eab308"},neutral:{emoji:"\u{1F610}",score:.5,color:"#94a3b8"},uncertain:{emoji:"\u{1F615}",score:.4,color:"#f97316"},confused:{emoji:"\u{1F635}",score:.3,color:"#fb923c"},frustrated:{emoji:"\u{1F624}",score:.18,color:"#ef4444"},angry:{emoji:"\u{1F620}",score:.05,color:"#dc2626"}};var _=["says","thinks","does","feels"],f=class extends HTMLElement{static get observedAttributes(){return["persona","persona-id","src","editable","compact"]}#t=new Map;constructor(){super(),this.attachShadow({mode:"open"}),this.__quadrants=null,this.__goals=null,this.__painPoints=null,this._editingQuadrants=new Set}get quadrants(){return this.__quadrants}set quadrants(t){this.__quadrants=t,this.isConnected&&this._render()}get goals(){return this.__goals}set goals(t){this.__goals=t,this.isConnected&&this._render()}get painPoints(){return this.__painPoints}set painPoints(t){this.__painPoints=t,this.isConnected&&this._render()}#e(){for(let t of this.children){let e=t.getAttribute("slot");e&&this.#t.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#t.get(t)||""}connectedCallback(){this.#e(),this.setAttribute("data-upgraded",""),this.hasAttribute("src")?this._loadSrc(this.getAttribute("src")):this._render()}disconnectedCallback(){this.removeAttribute("data-upgraded")}attributeChangedCallback(t){this.isConnected&&(t==="src"?this._loadSrc(this.getAttribute("src")):this._render())}editQuadrant(t){_.includes(t)&&this.hasAttribute("editable")&&this._openEdit(t)}closeQuadrant(t){_.includes(t)&&this._closeEdit(t)}async _loadSrc(t){if(t){this.shadowRoot.innerHTML=`<style>${m}</style><div class="state-msg">Loading\u2026</div>`;try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let a=await e.json();if(a.persona&&this.setAttribute("persona",a.persona),a.personaId&&this.setAttribute("persona-id",a.personaId),a.title&&!this.querySelector('[slot="title"]')){let n=document.createElement("h2");n.slot="title",n.textContent=a.title,this.appendChild(n)}if(a.summary&&!this.querySelector('[slot="summary"]')){let n=document.createElement("p");n.slot="summary",n.textContent=a.summary,this.appendChild(n)}this.__quadrants=a.quadrants||null,this.__goals=a.goals||null,this.__painPoints=a.painPoints||null,this._render()}catch(e){this.shadowRoot.innerHTML=`<style>${m}</style><div class="state-msg state-msg--error">Could not load empathy map: ${c(e.message)}</div>`}}}_render(){let t=this._resolve("persona")||"",e=this._resolve("persona-id")||"",a=this.hasAttribute("compact"),n=this.hasAttribute("editable"),r=!!this.querySelector('[slot="title"]')||this.#t.has("title"),s=!!this.querySelector('[slot="summary"]')||this.#t.has("summary"),d=this.__goals?.length||this.querySelector('[slot="goals"]'),o=this.__painPoints?.length||this.querySelector('[slot="pain-points"]');this.shadowRoot.innerHTML=`<style>${m}</style>
+  .state-msg--error { color: var(--color-error-text, var(--color-error, #dc2626)); }
+  code { font-family: var(--font-mono, Monaco, Menlo, monospace); font-size: 0.88em; }
+`;var E=window.matchMedia("(prefers-reduced-motion: reduce)");var g=new Map;function y(o,t,e={}){let a=e.priority??10,r={impl:t,bundle:e.bundle,contract:e.contract,priority:a},n=g.get(o);if(customElements.get(o)){if(!n||n.priority>=a){n&&n.priority===a&&n.impl!==t&&console.warn(`[VB Bundle] Tag <${o}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${o}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=a){n.priority===a&&console.warn(`[VB Bundle] Tag <${o}> already registered by "${n.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}g.set(o,r),customElements.define(o,t)}var k=0;function x(o,t,e="vb-vt"){if(!o?.isConnected||typeof document>"u"||!("startViewTransition"in document)||matchMedia("(prefers-reduced-motion: reduce)").matches)return t(),null;let a=`${e}-${++k}`;o.style.viewTransitionName=a;let r=document.startViewTransition(t);return r.finished.finally(()=>{o.style.viewTransitionName===a&&(o.style.viewTransitionName="")}),r}function c(o){return String(o).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function p(o){return`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${o}</svg>`}var l={user:'<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',pencil:'<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',check:'<path d="M20 6 9 17l-5-5"/>',target:'<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',alertTriangle:'<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',messageCircle:'<path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/>',lightbulb:'<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>',wrench:'<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/>',heart:'<path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/>',mapPin:'<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/>',checkCircle:'<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/>',x:'<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',download:'<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>',send:'<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/>'},f={says:{label:"Says",icon:l.messageCircle,color:"#3b82f6"},thinks:{label:"Thinks",icon:l.lightbulb,color:"#8b5cf6"},does:{label:"Does",icon:l.wrench,color:"#f59e0b"},feels:{label:"Feels",icon:l.heart,color:"#ef4444"}},q={delighted:{emoji:"\u{1F604}",score:.95,color:"#16a34a"},satisfied:{emoji:"\u{1F60A}",score:.8,color:"#22c55e"},hopeful:{emoji:"\u{1F642}",score:.68,color:"#84cc16"},curious:{emoji:"\u{1F914}",score:.55,color:"#eab308"},neutral:{emoji:"\u{1F610}",score:.5,color:"#94a3b8"},uncertain:{emoji:"\u{1F615}",score:.4,color:"#f97316"},confused:{emoji:"\u{1F635}",score:.3,color:"#fb923c"},frustrated:{emoji:"\u{1F624}",score:.18,color:"#ef4444"},angry:{emoji:"\u{1F620}",score:.05,color:"#dc2626"}};var b=["says","thinks","does","feels"],v=class extends HTMLElement{static get observedAttributes(){return["persona","persona-id","src","editable","compact"]}#t=new Map;constructor(){super(),this.attachShadow({mode:"open"}),this.__quadrants=null,this.__goals=null,this.__painPoints=null,this._editingQuadrants=new Set}get quadrants(){return this.__quadrants}set quadrants(t){this.__quadrants=t,this.isConnected&&this._render()}get goals(){return this.__goals}set goals(t){this.__goals=t,this.isConnected&&this._render()}get painPoints(){return this.__painPoints}set painPoints(t){this.__painPoints=t,this.isConnected&&this._render()}#e(){for(let t of this.children){let e=t.getAttribute("slot");e&&this.#t.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#t.get(t)||""}connectedCallback(){this.#e(),this.setAttribute("data-upgraded",""),this.hasAttribute("src")?this._loadSrc(this.getAttribute("src")):this._render()}disconnectedCallback(){this.removeAttribute("data-upgraded")}attributeChangedCallback(t){this.isConnected&&(t==="src"?this._loadSrc(this.getAttribute("src")):this._render())}get data(){let t=this.querySelector('[slot="title"]'),e=this.querySelector('[slot="summary"]');return{persona:this.getAttribute("persona")||void 0,personaId:this.getAttribute("persona-id")||void 0,title:t?.textContent?.trim()||void 0,summary:e?.textContent?.trim()||void 0,quadrants:this.__quadrants||void 0,goals:this.__goals||void 0,painPoints:this.__painPoints||void 0}}set data(t){if(!(!t||typeof t!="object")){if(t.persona&&this.setAttribute("persona",String(t.persona)),t.personaId&&this.setAttribute("persona-id",String(t.personaId)),t.title&&!this.querySelector('[slot="title"]')){let e=document.createElement("h2");e.slot="title",e.textContent=t.title,this.appendChild(e)}if(t.summary&&!this.querySelector('[slot="summary"]')){let e=document.createElement("p");e.slot="summary",e.textContent=t.summary,this.appendChild(e)}t.quadrants!=null&&(this.__quadrants=t.quadrants),t.goals!=null&&(this.__goals=t.goals),t.painPoints!=null&&(this.__painPoints=t.painPoints),this.isConnected&&this._render(),this.dispatchEvent(new CustomEvent("empathy-map:data-changed",{detail:{data:this.data,source:"property"},bubbles:!0,composed:!0}))}}editQuadrant(t){b.includes(t)&&this.hasAttribute("editable")&&this._openEdit(t)}closeQuadrant(t){b.includes(t)&&this._closeEdit(t)}async _loadSrc(t){if(!(!t||!this.shadowRoot)){this.shadowRoot.innerHTML=`<style>${_}</style><div class="state-msg">Loading\u2026</div>`;try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let a=await e.json();if(a.persona&&this.setAttribute("persona",a.persona),a.personaId&&this.setAttribute("persona-id",a.personaId),a.title&&!this.querySelector('[slot="title"]')){let r=document.createElement("h2");r.slot="title",r.textContent=a.title,this.appendChild(r)}if(a.summary&&!this.querySelector('[slot="summary"]')){let r=document.createElement("p");r.slot="summary",r.textContent=a.summary,this.appendChild(r)}this.__quadrants=a.quadrants||null,this.__goals=a.goals||null,this.__painPoints=a.painPoints||null,this._render()}catch(e){if(!this.shadowRoot)return;let a=e instanceof Error?e.message:String(e);this.shadowRoot.innerHTML=`<style>${_}</style><div class="state-msg state-msg--error">Could not load empathy map: ${c(a)}</div>`}}}_render(){let t=this._resolve("persona")||"",e=this._resolve("persona-id")||"",a=this.hasAttribute("compact"),r=this.hasAttribute("editable"),n=!!this.querySelector('[slot="title"]')||this.#t.has("title"),i=!!this.querySelector('[slot="summary"]')||this.#t.has("summary"),d=this.__goals?.length||this.querySelector('[slot="goals"]'),s=this.__painPoints?.length||this.querySelector('[slot="pain-points"]'),m=`<style>${_}</style>
       <article class="empathy-map${a?" empathy-map--compact":""}">
 
         <header class="empathy-map__header">
@@ -529,23 +527,23 @@ var m=`
           <div class="empathy-map__title-wrap">
             <slot name="title"><h2 class="empathy-map__title">Empathy Map</h2></slot>
           </div>
-          ${s?'<div class="empathy-map__summary-wrap"><slot name="summary"></slot></div>':""}
+          ${i?'<div class="empathy-map__summary-wrap"><slot name="summary"></slot></div>':""}
         </header>
 
         <div class="empathy-map__grid">
-          ${_.map(u=>this._renderQuadrant(u,n)).join("")}
+          ${b.map(h=>this._renderQuadrant(h,r)).join("")}
         </div>
 
-        ${d||o?`
+        ${d||s?`
           <footer class="empathy-map__footer">
             ${this._renderSummaryRow("goals",p(l.target),"Goals")}
             ${this._renderSummaryRow("pain-points",p(l.alertTriangle),"Pain Points")}
           </footer>
         `:""}
 
-      </article>`,n&&this._bindEditListeners(),this.dispatchEvent(new CustomEvent("empathy-map:ready",{bubbles:!0,composed:!0,detail:{title:this.querySelector('[slot="title"]')?.textContent?.trim()||"Empathy Map",persona:t}}))}_renderQuadrant(t,e){let a=h[t],n=this.__quadrants?.[t],r=this._editingQuadrants.has(t),s=n&&n.length?t==="feels"?n.map(o=>this._renderEmotion(o)).join(""):n.map(o=>`<p>${c(o)}</p>`).join(""):`<slot name="${t}"><p class="placeholder">Add ${a.label.toLowerCase()} items\u2026</p></slot>`,d=n?.length?n.join(`
+      </article>`,u=()=>{this.shadowRoot&&(this.shadowRoot.innerHTML=m,r&&this._bindEditListeners())};this.shadowRoot?.querySelector("article")?x(this,u,"em-vt"):u(),this.dispatchEvent(new CustomEvent("empathy-map:ready",{bubbles:!0,composed:!0,detail:{title:this.querySelector('[slot="title"]')?.textContent?.trim()||"Empathy Map",persona:t}}))}_renderQuadrant(t,e){let a=f[t],r=this.__quadrants?.[t],n=this._editingQuadrants.has(t),i=r&&r.length?t==="feels"?r.map(s=>this._renderEmotion(s)).join(""):r.map(s=>`<p>${c(s)}</p>`).join(""):`<slot name="${t}"><p class="placeholder">Add ${a.label.toLowerCase()} items\u2026</p></slot>`,d=r?.length?r.join(`
 `):"";return`
-      <section class="quadrant quadrant--${t}"${r?" data-editing":""}>
+      <section class="quadrant quadrant--${t}"${n?" data-editing":""}>
         <div class="quadrant__inner">
           <div class="quadrant__header">
             <div class="quadrant__icon" aria-hidden="true">${p(a.icon)}</div>
@@ -554,13 +552,13 @@ var m=`
               aria-label="Edit ${a.label}" title="Edit ${a.label}">${p(l.pencil)}</button>`:""}
           </div>
           <div class="quadrant__faces">
-            <div class="quadrant__face quadrant__face--front"${r?" inert":""}>
+            <div class="quadrant__face quadrant__face--front"${n?" inert":""}>
               <div class="quadrant__content">
-                ${s}
+                ${i}
               </div>
             </div>
             ${e?`
-              <div class="quadrant__face quadrant__face--back"${r?"":" inert"}>
+              <div class="quadrant__face quadrant__face--back"${n?"":" inert"}>
                 <textarea class="quadrant__editor" data-quadrant="${t}"
                   placeholder="One item per line\u2026"
                   aria-label="Edit ${a.label} items">${c(d)}</textarea>
@@ -570,15 +568,15 @@ var m=`
             `:""}
           </div>
         </div>
-      </section>`}_renderEmotion(t){let e=t.toLowerCase().trim(),a=x[e];return a?`<span class="emotion-tag" style="--ec:${a.color}"><span role="img" aria-label="${c(t)}">${a.emoji}</span> ${c(t)}</span>`:`<p>${c(t)}</p>`}_renderSummaryRow(t,e,a){let r=(t==="pain-points"?"painPoints":t)==="painPoints"?this.__painPoints:this.__goals,s=r?.length?r.map(d=>`<p>${c(d)}</p>`).join(""):`<slot name="${t}"><p class="placeholder">No ${a.toLowerCase()} specified.</p></slot>`;return`
+      </section>`}_renderEmotion(t){let e=t.toLowerCase().trim(),a=q[e];return a?`<span class="emotion-tag" style="--ec:${a.color}"><span role="img" aria-label="${c(t)}">${a.emoji}</span> ${c(t)}</span>`:`<p>${c(t)}</p>`}_renderSummaryRow(t,e,a){let n=(t==="pain-points"?"painPoints":t)==="painPoints"?this.__painPoints:this.__goals,i=n?.length?n.map(d=>`<p>${c(d)}</p>`).join(""):`<slot name="${t}"><p class="placeholder">No ${a.toLowerCase()} specified.</p></slot>`;return`
       <div class="summary-row">
         <span class="summary-row__icon" aria-hidden="true">${e}</span>
         <div class="summary-row__body">
           <div class="summary-row__label">${a}</div>
-          <div class="summary-row__content">${s}</div>
+          <div class="summary-row__content">${i}</div>
         </div>
-      </div>`}_bindEditListeners(){let t=this.shadowRoot;t.querySelectorAll(".quadrant__edit-btn").forEach(e=>{e.addEventListener("click",()=>{this._openEdit(e.dataset.quadrant)})}),t.querySelectorAll(".quadrant__done-btn").forEach(e=>{e.addEventListener("click",()=>{this._closeEdit(e.dataset.quadrant)})}),t.querySelectorAll(".quadrant__editor").forEach(e=>{e.addEventListener("keydown",a=>{a.key==="Escape"&&(a.preventDefault(),this._closeEdit(e.dataset.quadrant))})})}_openEdit(t){this._editingQuadrants.add(t);let e=this.shadowRoot.querySelector(`.quadrant--${t}`);if(!e)return;e.setAttribute("data-editing","");let a=e.querySelector(".quadrant__face--front"),n=e.querySelector(".quadrant__face--back");a&&a.setAttribute("inert",""),n&&n.removeAttribute("inert");let r=e.querySelector(".quadrant__editor");if(r){let s=this.__quadrants?.[t];if(s?.length)r.value=s.join(`
-`);else{let d=e.querySelector(`slot[name="${t}"]`);if(d){let o=d.assignedElements();if(o.length){let u=[];o.forEach(b=>{let g=b.querySelectorAll("li");g.length?g.forEach(q=>u.push(q.textContent.trim())):u.push(b.textContent.trim())}),r.value=u.filter(Boolean).join(`
-`)}}}r.focus()}}_closeEdit(t){let e=this.shadowRoot.querySelector(`.quadrant--${t}`);if(!e)return;let a=e.querySelector(".quadrant__editor");if(a){let s=a.value.split(`
-`).map(o=>o.trim()).filter(Boolean);this.__quadrants||(this.__quadrants={}),this.__quadrants[t]=s;let d=e.querySelector(".quadrant__content");if(d)if(s.length)d.innerHTML=t==="feels"?s.map(o=>this._renderEmotion(o)).join(""):s.map(o=>`<p>${c(o)}</p>`).join("");else{let o=h[t];d.innerHTML=`<p class="placeholder">Add ${o.label.toLowerCase()} items\u2026</p>`}}this._editingQuadrants.delete(t),e.removeAttribute("data-editing");let n=e.querySelector(".quadrant__face--front"),r=e.querySelector(".quadrant__face--back");n&&n.removeAttribute("inert"),r&&r.setAttribute("inert",""),this.dispatchEvent(new CustomEvent("empathy-map:update",{bubbles:!0,composed:!0,detail:{quadrant:t,items:this.__quadrants?.[t]||[]}}))}};y("empathy-map",f);export{f as EmpathyMap};
+      </div>`}_bindEditListeners(){let t=this.shadowRoot;t&&(t.querySelectorAll(".quadrant__edit-btn").forEach(e=>{e.addEventListener("click",()=>{let a=e.dataset.quadrant;a&&this._openEdit(a)})}),t.querySelectorAll(".quadrant__done-btn").forEach(e=>{e.addEventListener("click",()=>{let a=e.dataset.quadrant;a&&this._closeEdit(a)})}),t.querySelectorAll(".quadrant__editor").forEach(e=>{let a=e;a.addEventListener("keydown",r=>{let n=r;if(n.key==="Escape"){n.preventDefault();let i=a.dataset.quadrant;i&&this._closeEdit(i)}})}))}_openEdit(t){this._editingQuadrants.add(t);let e=this.shadowRoot?.querySelector(`.quadrant--${t}`);if(!e)return;e.setAttribute("data-editing","");let a=e.querySelector(".quadrant__face--front"),r=e.querySelector(".quadrant__face--back");a&&a.setAttribute("inert",""),r&&r.removeAttribute("inert");let n=e.querySelector(".quadrant__editor");if(n){let i=this.__quadrants?.[t];if(i?.length)n.value=i.join(`
+`);else{let d=e.querySelector(`slot[name="${t}"]`);if(d){let s=d.assignedElements();if(s.length){let m=[];s.forEach(u=>{let h=u.querySelectorAll("li");h.length?h.forEach(w=>m.push(w.textContent?.trim()??"")):m.push(u.textContent?.trim()??"")}),n.value=m.filter(Boolean).join(`
+`)}}}n.focus()}}_closeEdit(t){let e=this.shadowRoot?.querySelector(`.quadrant--${t}`);if(!e)return;let a=e.querySelector(".quadrant__editor");if(a){let i=a.value.split(`
+`).map(s=>s.trim()).filter(Boolean);this.__quadrants||(this.__quadrants={}),this.__quadrants[t]=i;let d=e.querySelector(".quadrant__content");if(d)if(i.length)d.innerHTML=t==="feels"?i.map(s=>this._renderEmotion(s)).join(""):i.map(s=>`<p>${c(s)}</p>`).join("");else{let s=f[t];d.innerHTML=`<p class="placeholder">Add ${s.label.toLowerCase()} items\u2026</p>`}}this._editingQuadrants.delete(t),e.removeAttribute("data-editing");let r=e.querySelector(".quadrant__face--front"),n=e.querySelector(".quadrant__face--back");r&&r.removeAttribute("inert"),n&&n.setAttribute("inert",""),this.dispatchEvent(new CustomEvent("empathy-map:update",{bubbles:!0,composed:!0,detail:{quadrant:t,items:this.__quadrants?.[t]||[]}}))}};y("empathy-map",v);export{v as EmpathyMap};
 //# sourceMappingURL=empathy-map.js.map

package/dist/cdn/components/flow-diagram.js

@@ -1,2 +1,2 @@
-var E=window.matchMedia("(prefers-reduced-motion: reduce)");var p=new Map;function b(c,t,n={}){let e=n.priority??10,s={impl:t,bundle:n.bundle,contract:n.contract,priority:e},i=p.get(c);if(customElements.get(c)){if(!i||i.priority>=e){i&&i.priority===e&&i.impl!==t&&console.warn(`[VB Bundle] Tag <${c}> already registered by "${i.bundle}" (priority ${i.priority}). Skipping "${n.bundle}".`);return}console.warn(`[VB Bundle] Tag <${c}> defined by "${i.bundle}" cannot be replaced (customElements.define is permanent). "${n.bundle}" has higher priority but arrived late.`);return}if(i&&i.priority>=e){i.priority===e&&console.warn(`[VB Bundle] Tag <${c}> already registered by "${i.bundle}". Skipping "${n.bundle}" (first wins at equal priority).`);return}p.set(c,s),customElements.define(c,t)}var f=class extends HTMLElement{#t=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0})))}disconnectedCallback(){for(let t of this.#t)t();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,n,e,s){t.addEventListener(n,e,s),this.#t.push(()=>t.removeEventListener(n,e,s))}setup(){}teardown(){}};var m=class extends f{static get observedAttributes(){return["src","title","compact"]}#t=null;#n=null;#e=null;#s=0;setup(){let t=this.querySelector(":scope > ol");if(!t)return!1;let n=this.#i(t);if(n.length===0)return!1;t.style.display="none",t.setAttribute("aria-hidden","true");let e=this.getAttribute("title");e&&(this.#n=document.createElement("h2"),this.#n.className="fd-title",this.#n.textContent=e,this.insertBefore(this.#n,t)),this.#t=document.createElement("div"),this.#t.className="fd-container",this.#t.setAttribute("role","img"),this.#t.setAttribute("aria-label",`Flow diagram${e?": "+e:""}`),this.#s=0,this.#o(n,this.#t);let s=document.createElement("div");s.className="fd-summary",s.textContent=`${this.#s} step${this.#s!==1?"s":""}`,this.#t.appendChild(s),this.insertBefore(this.#t,t),this.#e=document.createElement("div"),this.#e.className="fd-live",this.#e.setAttribute("role","status"),this.#e.setAttribute("aria-live","polite"),this.#e.setAttribute("aria-atomic","true"),this.appendChild(this.#e),this.listen(this.#t,"click",i=>{let o=i.target.closest(".fd-node-shape");if(!o)return;let a=o.closest(".fd-node")?.dataset.type||"action",d=o.textContent?.trim()||"";this.#l(`Selected: ${d}`),this.dispatchEvent(new CustomEvent("flow-diagram:select",{bubbles:!0,detail:{type:a,text:d}}))}),this.dispatchEvent(new CustomEvent("flow-diagram:ready",{bubbles:!0,detail:{nodeCount:this.#s}}))}teardown(){this.#n&&(this.#n.remove(),this.#n=null),this.#t&&(this.#t.remove(),this.#t=null),this.#e&&(this.#e.remove(),this.#e=null);let t=this.querySelector("ol");t&&(t.style.display="",t.removeAttribute("aria-hidden")),this.#s=0}attributeChangedCallback(t,n,e){n===e||!this.isConnected||(t==="src"?this._loadSrc(e):this.hasAttribute("data-upgraded")&&(this.teardown(),this.removeAttribute("data-upgraded"),this.setup()))}#i(t){let n=[];for(let e of t.querySelectorAll(":scope > li")){let s=this.#c(e);s&&n.push(s)}return n}#c(t){let n=t.dataset.type||"action",e=t.dataset.annotation||"",s=[],i=t.querySelectorAll(":scope > ol > li[data-branch]");if(i.length>0)for(let r of i){let a=r.dataset.branch||"",d=r.querySelector(":scope > ol"),l=d?this.#i(d):[];s.push({label:a,steps:l})}let o="";for(let r of t.childNodes)(r.nodeType===Node.TEXT_NODE||r.nodeType===Node.ELEMENT_NODE&&r.tagName!=="OL")&&(o+=r.textContent);return o=o.trim(),{type:n,text:o,annotation:e,branches:s}}#o(t,n){for(let e=0;e<t.length;e++){let s=t[e];e>0&&n.appendChild(this.#r());let i=this.#d(s);if(n.appendChild(i),s.branches.length>0){let o=document.createElement("div");o.className="fd-branches",o.setAttribute("data-branch-count",String(s.branches.length));let r=document.createElement("div");r.className="fd-split-line",r.setAttribute("aria-hidden","true"),o.appendChild(r);let a=document.createElement("div");a.className="fd-branch-columns";let d=(50/s.branches.length).toFixed(2);a.style.setProperty("--fd-inset",`${d}%`);for(let l of s.branches){let h=document.createElement("div");h.className="fd-branch",h.appendChild(this.#r());let u=document.createElement("span");u.className="fd-branch-label",u.textContent=l.label,u.setAttribute("data-branch",l.label.toLowerCase()),h.appendChild(u),this.#o(l.steps,h),a.appendChild(h)}o.appendChild(a),n.appendChild(o)}}}#d(t){this.#s++;let n=document.createElement("div");n.className="fd-node",n.dataset.type=t.type;let e=document.createElement("div");if(e.className="fd-node-shape",e.setAttribute("tabindex","0"),e.setAttribute("role","img"),e.setAttribute("aria-label",`${t.type}: ${t.text}`),e.textContent=t.text,n.appendChild(e),t.annotation){let s=document.createElement("div");s.className="fd-annotation",s.textContent=t.annotation,n.appendChild(s)}return n}#r(t){let n=document.createElement("div");n.className="fd-connector",n.setAttribute("aria-hidden","true");let e=document.createElement("div");if(e.className="fd-connector-line",n.appendChild(e),t){let i=document.createElement("span");i.className="fd-connector-label",i.textContent=t,n.appendChild(i)}let s=document.createElement("div");return s.className="fd-connector-arrow",n.appendChild(s),n}async _loadSrc(t){if(t)try{let n=await fetch(t);if(!n.ok)throw new Error(`HTTP ${n.status}`);let e=await n.json();for(;this.firstChild;)this.firstChild.remove();e.title&&this.setAttribute("title",e.title);let s=document.createElement("ol");this.#a(e.steps||[],s),this.appendChild(s),this.teardown(),this.removeAttribute("data-upgraded"),this.setup()}catch(n){console.warn(`[flow-diagram] Failed to load src="${t}":`,n)}}#a(t,n){for(let e of t){let s=document.createElement("li");if(e.type&&(s.dataset.type=e.type),e.annotation&&(s.dataset.annotation=e.annotation),s.textContent=e.text||"",e.branches&&e.branches.length>0){let i=document.createElement("ol");for(let o of e.branches){let r=document.createElement("li");r.dataset.branch=o.label||"";let a=document.createElement("ol");this.#a(o.steps||[],a),r.appendChild(a),i.appendChild(r)}s.appendChild(i)}n.appendChild(s)}}#l(t){this.#e&&(this.#e.textContent="",requestAnimationFrame(()=>{this.#e&&(this.#e.textContent=t)}))}};b("flow-diagram",m);export{m as FlowDiagram};
+var y=window.matchMedia("(prefers-reduced-motion: reduce)");var p=new Map;function b(c,e,s={}){let t=s.priority??10,n={impl:e,bundle:s.bundle,contract:s.contract,priority:t},i=p.get(c);if(customElements.get(c)){if(!i||i.priority>=t){i&&i.priority===t&&i.impl!==e&&console.warn(`[VB Bundle] Tag <${c}> already registered by "${i.bundle}" (priority ${i.priority}). Skipping "${s.bundle}".`);return}console.warn(`[VB Bundle] Tag <${c}> defined by "${i.bundle}" cannot be replaced (customElements.define is permanent). "${s.bundle}" has higher priority but arrived late.`);return}if(i&&i.priority>=t){i.priority===t&&console.warn(`[VB Bundle] Tag <${c}> already registered by "${i.bundle}". Skipping "${s.bundle}" (first wins at equal priority).`);return}p.set(c,n),customElements.define(c,e)}var m=class extends HTMLElement{#t=[];#s;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let e of this.#t)e();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,s,t,n){e.addEventListener(s,t,n),this.#t.push(()=>e.removeEventListener(s,t,n))}setup(){}teardown(){}setState(e,s){this.#s||(this.#s=this.attachInternals());let t=this.#s.states;try{s?t.add(e):t.delete(e)}catch{let n=`--${e}`;s?t.add(n):t.delete(n)}}_adoptInternals(e){this.#s||(this.#s=e)}};var f=class c extends m{static get observedAttributes(){return["src","title","compact"]}#t=null;#s=null;#e=null;#n=0;#i=[];setup(){let e=this.querySelector(":scope > ol");if(!e)return!1;let s=this.#a(e);if(s.length===0)return!1;this.#i=s,e.style.display="none",e.setAttribute("aria-hidden","true");let t=this.getAttribute("title");t&&(this.#s=document.createElement("h2"),this.#s.className="fd-title",this.#s.textContent=t,this.insertBefore(this.#s,e)),this.#t=document.createElement("div"),this.#t.className="fd-container",this.#t.setAttribute("role","img"),this.#t.setAttribute("aria-label",`Flow diagram${t?": "+t:""}`),this.#n=0,this.#o(s,this.#t);let n=document.createElement("div");return n.className="fd-summary",n.textContent=`${this.#n} step${this.#n!==1?"s":""}`,this.#t.appendChild(n),this.insertBefore(this.#t,e),this.#e=document.createElement("div"),this.#e.className="fd-live",this.#e.setAttribute("role","status"),this.#e.setAttribute("aria-live","polite"),this.#e.setAttribute("aria-atomic","true"),this.appendChild(this.#e),this.listen(this.#t,"click",i=>{let o=i.target.closest(".fd-node-shape");if(!o)return;let a=o.closest(".fd-node")?.dataset.type||"action",l=o.textContent?.trim()||"";this.#m(`Selected: ${l}`),this.dispatchEvent(new CustomEvent("flow-diagram:select",{bubbles:!0,detail:{type:a,text:l}}))}),this.dispatchEvent(new CustomEvent("flow-diagram:ready",{bubbles:!0,detail:{nodeCount:this.#n}})),!0}teardown(){this.#s&&(this.#s.remove(),this.#s=null),this.#t&&(this.#t.remove(),this.#t=null),this.#e&&(this.#e.remove(),this.#e=null);let e=this.querySelector("ol");e&&(e.style.display="",e.removeAttribute("aria-hidden")),this.#n=0}static#d=0;attributeChangedCallback(e,s,t){s===t||!this.isConnected||(e==="src"?this._loadSrc(t):this.hasAttribute("data-upgraded")&&this.#r())}#r(){let e=()=>{this.teardown(),this.removeAttribute("data-upgraded"),this.setup()};if(this.hasAttribute("data-upgraded")&&"startViewTransition"in document&&!matchMedia("(prefers-reduced-motion: reduce)").matches){let s=`fd-vt-${++c.#d}`;this.style.viewTransitionName=s,document.startViewTransition(e).finished.finally(()=>{this.style.viewTransitionName=""})}else e()}get steps(){return this.#i}set steps(e){let s=Array.isArray(e)?e:[];this.#i=s,this.#s&&(this.#s.remove(),this.#s=null),this.#t&&(this.#t.remove(),this.#t=null),this.#e&&(this.#e.remove(),this.#e=null);let t=this.querySelector(":scope > ol");if(t||(t=document.createElement("ol"),t.style.display="none",t.setAttribute("aria-hidden","true"),this.appendChild(t)),s.length===0){this.dispatchEvent(new CustomEvent("flow-diagram:steps-changed",{detail:{steps:s,source:"property"},bubbles:!0}));return}let n=this.getAttribute("title");n&&(this.#s=document.createElement("h2"),this.#s.className="fd-title",this.#s.textContent=n,this.insertBefore(this.#s,t)),this.#t=document.createElement("div"),this.#t.className="fd-container",this.#t.setAttribute("role","img"),this.#t.setAttribute("aria-label",`Flow diagram${n?": "+n:""}`),this.#n=0,this.#o(s,this.#t);let i=document.createElement("div");i.className="fd-summary",i.textContent=`${this.#n} step${this.#n!==1?"s":""}`,this.#t.appendChild(i),this.insertBefore(this.#t,t),this.#e=document.createElement("div"),this.#e.className="fd-live",this.#e.setAttribute("role","status"),this.#e.setAttribute("aria-live","polite"),this.#e.setAttribute("aria-atomic","true"),this.appendChild(this.#e),this.dispatchEvent(new CustomEvent("flow-diagram:steps-changed",{detail:{steps:s,source:"property"},bubbles:!0}))}#a(e){let s=[];for(let t of e.querySelectorAll(":scope > li")){let n=this.#h(t);n&&s.push(n)}return s}#h(e){let s=e.dataset.type||"action",t=e.dataset.annotation||"",n=[],i=e.querySelectorAll(":scope > ol > li[data-branch]");if(i.length>0)for(let r of i){let a=r.dataset.branch||"",l=r.querySelector(":scope > ol"),d=l?this.#a(l):[];n.push({label:a,steps:d})}let o="";for(let r of e.childNodes)(r.nodeType===Node.TEXT_NODE||r.nodeType===Node.ELEMENT_NODE&&r.tagName!=="OL")&&(o+=r.textContent);return o=o.trim(),{type:s,text:o,annotation:t,branches:n}}#o(e,s){for(let t=0;t<e.length;t++){let n=e[t];t>0&&s.appendChild(this.#c());let i=this.#u(n);if(s.appendChild(i),n.branches.length>0){let o=document.createElement("div");o.className="fd-branches",o.setAttribute("data-branch-count",String(n.branches.length));let r=document.createElement("div");r.className="fd-split-line",r.setAttribute("aria-hidden","true"),o.appendChild(r);let a=document.createElement("div");a.className="fd-branch-columns";let l=(50/n.branches.length).toFixed(2);a.style.setProperty("--fd-inset",`${l}%`);for(let d of n.branches){let h=document.createElement("div");h.className="fd-branch",h.appendChild(this.#c());let u=document.createElement("span");u.className="fd-branch-label",u.textContent=d.label,u.setAttribute("data-branch",d.label.toLowerCase()),h.appendChild(u),this.#o(d.steps,h),a.appendChild(h)}o.appendChild(a),s.appendChild(o)}}}#u(e){this.#n++;let s=document.createElement("div");s.className="fd-node",s.dataset.type=e.type;let t=document.createElement("div");if(t.className="fd-node-shape",t.setAttribute("tabindex","0"),t.setAttribute("role","img"),t.setAttribute("aria-label",`${e.type}: ${e.text}`),t.textContent=e.text,s.appendChild(t),e.annotation){let n=document.createElement("div");n.className="fd-annotation",n.textContent=e.annotation,s.appendChild(n)}return s}#c(e){let s=document.createElement("div");s.className="fd-connector",s.setAttribute("aria-hidden","true");let t=document.createElement("div");if(t.className="fd-connector-line",s.appendChild(t),e){let i=document.createElement("span");i.className="fd-connector-label",i.textContent=e,s.appendChild(i)}let n=document.createElement("div");return n.className="fd-connector-arrow",s.appendChild(n),s}async _loadSrc(e){if(e)try{let s=await fetch(e);if(!s.ok)throw new Error(`HTTP ${s.status}`);let t=await s.json();for(;this.firstChild;)this.firstChild.remove();t.title&&this.setAttribute("title",t.title);let n=document.createElement("ol");this.#l(t.steps||[],n),this.appendChild(n),this.#r()}catch(s){console.warn(`[flow-diagram] Failed to load src="${e}":`,s)}}#l(e,s){for(let t of e){let n=document.createElement("li");if(t.type&&(n.dataset.type=t.type),t.annotation&&(n.dataset.annotation=t.annotation),n.textContent=t.text||"",t.branches&&t.branches.length>0){let i=document.createElement("ol");for(let o of t.branches){let r=document.createElement("li");r.dataset.branch=o.label||"";let a=document.createElement("ol");this.#l(o.steps||[],a),r.appendChild(a),i.appendChild(r)}n.appendChild(i)}s.appendChild(n)}}#m(e){this.#e&&(this.#e.textContent="",requestAnimationFrame(()=>{this.#e&&(this.#e.textContent=e)}))}};b("flow-diagram",f);export{f as FlowDiagram};
 //# sourceMappingURL=flow-diagram.js.map

package/dist/cdn/components/font-pairer.js

@@ -1,108 +1,108 @@
-var D=window.matchMedia("(prefers-reduced-motion: reduce)");var w=new Map;function x(t,e,i={}){let o=i.priority??10,r={impl:e,bundle:i.bundle,contract:i.contract,priority:o},s=w.get(t);if(customElements.get(t)){if(!s||s.priority>=o){s&&s.priority===o&&s.impl!==e&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${i.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${i.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=o){s.priority===o&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}". Skipping "${i.bundle}" (first wins at equal priority).`);return}w.set(t,r),customElements.define(t,e)}var p=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0})))}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,i,o,r){e.addEventListener(i,o,r),this.#e.push(()=>e.removeEventListener(i,o,r))}setup(){}teardown(){}};var f=[{name:"Playfair Display",category:"serif",weights:"400;600;700;900",style:"elegant"},{name:"Merriweather",category:"serif",weights:"300;400;700;900",style:"readable"},{name:"Lora",category:"serif",weights:"400;500;600;700",style:"elegant"},{name:"Source Serif 4",category:"serif",weights:"300;400;600;700",style:"neutral"},{name:"Libre Baskerville",category:"serif",weights:"400;700",style:"classic"},{name:"Crimson Text",category:"serif",weights:"400;600;700",style:"classic"},{name:"DM Serif Display",category:"serif",weights:"400",style:"bold"},{name:"Cormorant Garamond",category:"serif",weights:"300;400;500;600;700",style:"elegant"},{name:"Inter",category:"sans-serif",weights:"300;400;500;600;700",style:"neutral"},{name:"Open Sans",category:"sans-serif",weights:"300;400;600;700",style:"friendly"},{name:"Roboto",category:"sans-serif",weights:"300;400;500;700",style:"neutral"},{name:"Lato",category:"sans-serif",weights:"300;400;700;900",style:"warm"},{name:"Nunito",category:"sans-serif",weights:"300;400;600;700",style:"friendly"},{name:"Work Sans",category:"sans-serif",weights:"300;400;500;600;700",style:"geometric"},{name:"DM Sans",category:"sans-serif",weights:"400;500;700",style:"geometric"},{name:"Plus Jakarta Sans",category:"sans-serif",weights:"300;400;500;600;700",style:"modern"},{name:"Space Grotesk",category:"sans-serif",weights:"300;400;500;600;700",style:"technical"},{name:"Manrope",category:"sans-serif",weights:"300;400;500;600;700",style:"geometric"},{name:"IBM Plex Sans",category:"sans-serif",weights:"300;400;500;600",style:"technical"},{name:"Outfit",category:"sans-serif",weights:"300;400;500;600;700",style:"modern"},{name:"Bebas Neue",category:"display",weights:"400",style:"bold"},{name:"Abril Fatface",category:"display",weights:"400",style:"elegant"},{name:"Oswald",category:"display",weights:"300;400;500;600;700",style:"condensed"},{name:"Sora",category:"display",weights:"300;400;500;600;700",style:"modern"},{name:"Fraunces",category:"display",weights:"300;400;500;600;700;900",style:"elegant"},{name:"JetBrains Mono",category:"monospace",weights:"400;500;600;700",style:"technical"},{name:"Fira Code",category:"monospace",weights:"300;400;500;600;700",style:"technical"},{name:"IBM Plex Mono",category:"monospace",weights:"400;500;600",style:"technical"},{name:"Source Code Pro",category:"monospace",weights:"300;400;500;600;700",style:"neutral"}],z=[["Playfair Display","Inter"],["DM Serif Display","DM Sans"],["Fraunces","Plus Jakarta Sans"],["Lora","Open Sans"],["Merriweather","Roboto"],["Oswald","Lato"],["Cormorant Garamond","Work Sans"],["Sora","Inter"],["Abril Fatface","Nunito"],["Source Serif 4","Source Code Pro"],["Space Grotesk","IBM Plex Sans"],["Outfit","Manrope"]];function g(t,e="400;700"){return`https://fonts.googleapis.com/css2?family=${t.replace(/\s+/g,"+")}:wght@${e}&display=swap`}async function k(t,e="400;700"){let i=`gf-${t.replace(/\s+/g,"-").toLowerCase()}`;if(document.getElementById(i)){await document.fonts.ready;return}let o=document.createElement("link");o.id=i,o.rel="stylesheet",o.href=g(t,e),document.head.appendChild(o),await document.fonts.ready}var n=(t,e,i,o="")=>`${o} contenteditable="plaintext-only" spellcheck="false" class="fp-editable" data-role="${i}"`,u={combined:{label:"Combined",render:(t,e)=>`
-      <p style="font-family:${t.display};font-size:var(--font-size-3xl,2rem);font-weight:800;margin:0;line-height:1.15"
-        ${n(t.display,"p","heading")}>${e.heading}</p>
-      <h3 style="font-family:${t.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0"
-        ${n(t.heading,"h3","subheading")}>${e.subheading}</h3>
-      <p style="font-family:${t.body};font-size:var(--font-size-md,1rem);line-height:1.65;margin:0;color:var(--color-text-muted,#666)"
-        ${n(t.body,"p","body")}>${e.body}</p>
-      <pre style="font-family:${t.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code ${n(t.code,"code","code")}>${e.code}</code></pre>`},article:{label:"Article",render:(t,e)=>`
-      <small style="font-family:${t.body};font-size:var(--font-size-xs,0.75rem);text-transform:uppercase;letter-spacing:0.08em;color:var(--color-interactive,oklch(55% .2 260));font-weight:600"
-        ${n(t.body,"small","eyebrow")}>${e.eyebrow}</small>
-      <h2 style="font-family:${t.heading};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0;line-height:1.2"
-        ${n(t.heading,"h2","heading")}>${e.heading}</h2>
-      <p style="font-family:${t.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0"
-        ${n(t.body,"p","byline")}>${e.byline}</p>
-      <p style="font-family:${t.body};line-height:1.7;margin:0" ${n(t.body,"p","body")}>${e.body}</p>
-      <h3 style="font-family:${t.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0"
-        ${n(t.heading,"h3","subheading")}>${e.subheading}</h3>
-      <p style="font-family:${t.body};line-height:1.7;margin:0" ${n(t.body,"p","body2")}>${e.body2}</p>
-      <blockquote style="font-family:${t.display};font-style:italic;font-size:var(--font-size-lg,1.125rem);border-inline-start:3px solid var(--color-interactive,oklch(55% .2 260));padding-inline-start:var(--size-m,1rem);margin:0;color:var(--color-text-muted,#666)"
-        ${n(t.display,"blockquote","quote")}>${e.quote}</blockquote>
-      <pre style="font-family:${t.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code ${n(t.code,"code","code")}>${e.code}</code></pre>`},"long-article":{label:"Long Article",render:(t,e)=>`
-      <small style="font-family:${t.body};font-size:var(--font-size-xs,0.75rem);text-transform:uppercase;letter-spacing:0.08em;color:var(--color-interactive,oklch(55% .2 260));font-weight:600">${e.eyebrow}</small>
-      <h1 style="font-family:${t.display};font-size:var(--font-size-3xl,2rem);font-weight:800;margin:0;line-height:1.15">${e.heading}</h1>
-      <p style="font-family:${t.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0">${e.byline}</p>
-      <p style="font-family:${t.body};font-size:var(--font-size-lg,1.125rem);line-height:1.6;margin:0;color:var(--color-text-muted,#666)">${e.lead}</p>
-      <h2 style="font-family:${t.heading};font-size:var(--font-size-xl,1.375rem);font-weight:700;margin:0">${e.subheading}</h2>
-      <p style="font-family:${t.body};line-height:1.7;margin:0">${e.body}</p>
-      <p style="font-family:${t.body};line-height:1.7;margin:0">${e.body2}</p>
-      <blockquote style="font-family:${t.display};font-style:italic;font-size:var(--font-size-lg,1.125rem);border-inline-start:3px solid var(--color-interactive,oklch(55% .2 260));padding-inline-start:var(--size-m,1rem);margin:0;color:var(--color-text-muted,#666)">${e.quote}</blockquote>
-      <h2 style="font-family:${t.heading};font-size:var(--font-size-xl,1.375rem);font-weight:700;margin:0">Implementation Details</h2>
-      <p style="font-family:${t.body};line-height:1.7;margin:0">Design tokens form the atomic layer of any visual system. Colors, spacing, typography, and motion are expressed as named variables that cascade through every component. When a token changes, every surface that references it updates automatically \u2014 no find-and-replace, no missed instances.</p>
-      <pre style="font-family:${t.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code>${e.code}</code></pre>
-      <h3 style="font-family:${t.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0">Key Takeaways</h3>
-      <ul style="font-family:${t.body};line-height:1.7;margin:0;padding-inline-start:1.5rem">
+var W=window.matchMedia("(prefers-reduced-motion: reduce)");var S=new Map;function k(e,t,o={}){let i=o.priority??10,s={impl:t,bundle:o.bundle,contract:o.contract,priority:i},n=S.get(e);if(customElements.get(e)){if(!n||n.priority>=i){n&&n.priority===i&&n.impl!==t&&console.warn(`[VB Bundle] Tag <${e}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${o.bundle}".`);return}console.warn(`[VB Bundle] Tag <${e}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${o.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=i){n.priority===i&&console.warn(`[VB Bundle] Tag <${e}> already registered by "${n.bundle}". Skipping "${o.bundle}" (first wins at equal priority).`);return}S.set(e,s),customElements.define(e,t)}var y=class extends HTMLElement{#e=[];#t;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let t of this.#e)t();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,o,i,s){t.addEventListener(o,i,s),this.#e.push(()=>t.removeEventListener(o,i,s))}setup(){}teardown(){}setState(t,o){this.#t||(this.#t=this.attachInternals());let i=this.#t.states;try{o?i.add(t):i.delete(t)}catch{let s=`--${t}`;o?i.add(s):i.delete(s)}}_adoptInternals(t){this.#t||(this.#t=t)}};var b="[data-copy], [data-copy-target], [data-paste-target]",U="Copied to clipboard",j="Pasted from clipboard",g=new WeakMap;async function h(e,t={}){if(e==null||e==="")return!1;let{button:o,announceMessage:i=U,duration:s=1500}=t;try{await navigator.clipboard.writeText(e)}catch{return!1}return T({button:o,duration:s,announceMessage:i,eventDetail:{text:e}}),!0}function T({button:e,duration:t,announceMessage:o,eventDetail:i,state:s="copied",eventName:n="copy"}){if(e){e.dataset.state=s;let a=g.get(e);a&&clearTimeout(a),g.set(e,setTimeout(()=>{delete e.dataset.state,g.delete(e)},t)),e.dispatchEvent(new CustomEvent(n,{bubbles:!0,detail:i}))}R(o,e??document.body)}async function _(e,t={}){let{button:o,announceMessage:i=j,duration:s=1500}=t,n;try{n=await navigator.clipboard.readText()}catch{return null}return e&&("value"in e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement)?e.value=n:e.textContent=n,e.dispatchEvent(new Event("input",{bubbles:!0}))),T({button:o,duration:s,announceMessage:i,eventDetail:{text:n},state:"pasted",eventName:"paste"}),n}function C(e=document){e.querySelectorAll(b).forEach(v)}function v(e){e.hasAttribute("data-copy-init")||(e.setAttribute("data-copy-init",""),e.addEventListener("click",()=>{if(e.dataset.pasteTarget){let o=document.querySelector(e.dataset.pasteTarget);if(!o)return;_(o,{button:e});return}let t=G(e);t&&h(t,{button:e})}))}function G(e){if(e.dataset.copy)return e.dataset.copy;if(e.dataset.copyTarget){let t=document.querySelector(e.dataset.copyTarget);if(!t)return"";let o=e.dataset.copyAttr;return o?t.getAttribute(o)??"":t.textContent??""}return""}function R(e,t){let o=document.createElement("div");o.setAttribute("role","status"),o.setAttribute("aria-live","polite"),o.className="visually-hidden",o.textContent=e,t.appendChild(o),setTimeout(()=>o.remove(),1e3)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>C()):C();var H=new MutationObserver(e=>{for(let t of e)for(let o of t.addedNodes){if(o.nodeType!==Node.ELEMENT_NODE)continue;let i=o;i.matches(b)&&v(i),i.querySelectorAll(b).forEach(s=>v(s))}});H.observe(document.documentElement,{childList:!0,subtree:!0});var m=[{name:"Playfair Display",category:"serif",weights:"400;600;700;900",style:"elegant"},{name:"Merriweather",category:"serif",weights:"300;400;700;900",style:"readable"},{name:"Lora",category:"serif",weights:"400;500;600;700",style:"elegant"},{name:"Source Serif 4",category:"serif",weights:"300;400;600;700",style:"neutral"},{name:"Libre Baskerville",category:"serif",weights:"400;700",style:"classic"},{name:"Crimson Text",category:"serif",weights:"400;600;700",style:"classic"},{name:"DM Serif Display",category:"serif",weights:"400",style:"bold"},{name:"Cormorant Garamond",category:"serif",weights:"300;400;500;600;700",style:"elegant"},{name:"Inter",category:"sans-serif",weights:"300;400;500;600;700",style:"neutral"},{name:"Open Sans",category:"sans-serif",weights:"300;400;600;700",style:"friendly"},{name:"Roboto",category:"sans-serif",weights:"300;400;500;700",style:"neutral"},{name:"Lato",category:"sans-serif",weights:"300;400;700;900",style:"warm"},{name:"Nunito",category:"sans-serif",weights:"300;400;600;700",style:"friendly"},{name:"Work Sans",category:"sans-serif",weights:"300;400;500;600;700",style:"geometric"},{name:"DM Sans",category:"sans-serif",weights:"400;500;700",style:"geometric"},{name:"Plus Jakarta Sans",category:"sans-serif",weights:"300;400;500;600;700",style:"modern"},{name:"Space Grotesk",category:"sans-serif",weights:"300;400;500;600;700",style:"technical"},{name:"Manrope",category:"sans-serif",weights:"300;400;500;600;700",style:"geometric"},{name:"IBM Plex Sans",category:"sans-serif",weights:"300;400;500;600",style:"technical"},{name:"Outfit",category:"sans-serif",weights:"300;400;500;600;700",style:"modern"},{name:"Bebas Neue",category:"display",weights:"400",style:"bold"},{name:"Abril Fatface",category:"display",weights:"400",style:"elegant"},{name:"Oswald",category:"display",weights:"300;400;500;600;700",style:"condensed"},{name:"Sora",category:"display",weights:"300;400;500;600;700",style:"modern"},{name:"Fraunces",category:"display",weights:"300;400;500;600;700;900",style:"elegant"},{name:"JetBrains Mono",category:"monospace",weights:"400;500;600;700",style:"technical"},{name:"Fira Code",category:"monospace",weights:"300;400;500;600;700",style:"technical"},{name:"IBM Plex Mono",category:"monospace",weights:"400;500;600",style:"technical"},{name:"Source Code Pro",category:"monospace",weights:"300;400;500;600;700",style:"neutral"}],A=[["Playfair Display","Inter"],["DM Serif Display","DM Sans"],["Fraunces","Plus Jakarta Sans"],["Lora","Open Sans"],["Merriweather","Roboto"],["Oswald","Lato"],["Cormorant Garamond","Work Sans"],["Sora","Inter"],["Abril Fatface","Nunito"],["Source Serif 4","Source Code Pro"],["Space Grotesk","IBM Plex Sans"],["Outfit","Manrope"]];function $(e,t="400;700"){return`https://fonts.googleapis.com/css2?family=${e.replace(/\s+/g,"+")}:wght@${t}&display=swap`}async function M(e,t="400;700"){let o=`gf-${e.replace(/\s+/g,"-").toLowerCase()}`;if(document.getElementById(o)){await document.fonts.ready;return}let i=document.createElement("link");i.id=o,i.rel="stylesheet",i.href=$(e,t),document.head.appendChild(i),await document.fonts.ready}var r=(e,t,o,i="")=>`${i} contenteditable="plaintext-only" spellcheck="false" class="fp-editable" data-role="${o}"`,w={combined:{label:"Combined",render:(e,t)=>`
+      <p style="font-family:${e.display};font-size:var(--font-size-3xl,2rem);font-weight:800;margin:0;line-height:1.15"
+        ${r(e.display,"p","heading")}>${t.heading}</p>
+      <h3 style="font-family:${e.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0"
+        ${r(e.heading,"h3","subheading")}>${t.subheading}</h3>
+      <p style="font-family:${e.body};font-size:var(--font-size-md,1rem);line-height:1.65;margin:0;color:var(--color-text-muted,#666)"
+        ${r(e.body,"p","body")}>${t.body}</p>
+      <pre style="font-family:${e.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code ${r(e.code,"code","code")}>${t.code}</code></pre>`},article:{label:"Article",render:(e,t)=>`
+      <small style="font-family:${e.body};font-size:var(--font-size-xs,0.75rem);text-transform:uppercase;letter-spacing:0.08em;color:var(--color-interactive,oklch(55% .2 260));font-weight:600"
+        ${r(e.body,"small","eyebrow")}>${t.eyebrow}</small>
+      <h2 style="font-family:${e.heading};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0;line-height:1.2"
+        ${r(e.heading,"h2","heading")}>${t.heading}</h2>
+      <p style="font-family:${e.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0"
+        ${r(e.body,"p","byline")}>${t.byline}</p>
+      <p style="font-family:${e.body};line-height:1.7;margin:0" ${r(e.body,"p","body")}>${t.body}</p>
+      <h3 style="font-family:${e.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0"
+        ${r(e.heading,"h3","subheading")}>${t.subheading}</h3>
+      <p style="font-family:${e.body};line-height:1.7;margin:0" ${r(e.body,"p","body2")}>${t.body2}</p>
+      <blockquote style="font-family:${e.display};font-style:italic;font-size:var(--font-size-lg,1.125rem);border-inline-start:3px solid var(--color-interactive,oklch(55% .2 260));padding-inline-start:var(--size-m,1rem);margin:0;color:var(--color-text-muted,#666)"
+        ${r(e.display,"blockquote","quote")}>${t.quote}</blockquote>
+      <pre style="font-family:${e.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code ${r(e.code,"code","code")}>${t.code}</code></pre>`},"long-article":{label:"Long Article",render:(e,t)=>`
+      <small style="font-family:${e.body};font-size:var(--font-size-xs,0.75rem);text-transform:uppercase;letter-spacing:0.08em;color:var(--color-interactive,oklch(55% .2 260));font-weight:600">${t.eyebrow}</small>
+      <h1 style="font-family:${e.display};font-size:var(--font-size-3xl,2rem);font-weight:800;margin:0;line-height:1.15">${t.heading}</h1>
+      <p style="font-family:${e.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0">${t.byline}</p>
+      <p style="font-family:${e.body};font-size:var(--font-size-lg,1.125rem);line-height:1.6;margin:0;color:var(--color-text-muted,#666)">${t.lead}</p>
+      <h2 style="font-family:${e.heading};font-size:var(--font-size-xl,1.375rem);font-weight:700;margin:0">${t.subheading}</h2>
+      <p style="font-family:${e.body};line-height:1.7;margin:0">${t.body}</p>
+      <p style="font-family:${e.body};line-height:1.7;margin:0">${t.body2}</p>
+      <blockquote style="font-family:${e.display};font-style:italic;font-size:var(--font-size-lg,1.125rem);border-inline-start:3px solid var(--color-interactive,oklch(55% .2 260));padding-inline-start:var(--size-m,1rem);margin:0;color:var(--color-text-muted,#666)">${t.quote}</blockquote>
+      <h2 style="font-family:${e.heading};font-size:var(--font-size-xl,1.375rem);font-weight:700;margin:0">Implementation Details</h2>
+      <p style="font-family:${e.body};line-height:1.7;margin:0">Design tokens form the atomic layer of any visual system. Colors, spacing, typography, and motion are expressed as named variables that cascade through every component. When a token changes, every surface that references it updates automatically \u2014 no find-and-replace, no missed instances.</p>
+      <pre style="font-family:${e.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code>${t.code}</code></pre>
+      <h3 style="font-family:${e.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0">Key Takeaways</h3>
+      <ul style="font-family:${e.body};line-height:1.7;margin:0;padding-inline-start:1.5rem">
         <li>Typography sets the emotional tone before a single word is read</li>
         <li>Pair contrast with harmony \u2014 serif headings with sans-serif body</li>
         <li>Test at real content lengths, not just sample sentences</li>
         <li>Code fonts need clear distinction between similar glyphs</li>
-      </ul>`},card:{label:"Card UI",render:(t,e)=>`
+      </ul>`},card:{label:"Card UI",render:(e,t)=>`
       <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--size-m,1rem)">
         <div style="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);padding:var(--size-m,1rem);display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)">
-          <h4 style="font-family:${t.heading};font-weight:600;margin:0" ${n(t.heading,"h4","cardTitle")}>Premium Plan</h4>
-          <p style="font-family:${t.display};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0">$49<small style="font-size:0.5em;font-weight:400">/mo</small></p>
-          <p style="font-family:${t.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0" ${n(t.body,"p","cardBody")}>Everything you need to build faster.</p>
-          <code style="font-family:${t.code};font-size:var(--font-size-xs,0.75rem);background:var(--color-surface-sunken,#eee);padding:0.2rem 0.4rem;border-radius:0.25rem" ${n(t.code,"code","cardCode")}>npm install acme</code>
+          <h4 style="font-family:${e.heading};font-weight:600;margin:0" ${r(e.heading,"h4","cardTitle")}>Premium Plan</h4>
+          <p style="font-family:${e.display};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0">$49<small style="font-size:0.5em;font-weight:400">/mo</small></p>
+          <p style="font-family:${e.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0" ${r(e.body,"p","cardBody")}>Everything you need to build faster.</p>
+          <code style="font-family:${e.code};font-size:var(--font-size-xs,0.75rem);background:var(--color-surface-sunken,#eee);padding:0.2rem 0.4rem;border-radius:0.25rem" ${r(e.code,"code","cardCode")}>npm install acme</code>
         </div>
         <div style="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);padding:var(--size-m,1rem);display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)">
-          <h4 style="font-family:${t.heading};font-weight:600;margin:0">Enterprise</h4>
-          <p style="font-family:${t.display};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0">Custom</p>
-          <p style="font-family:${t.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0">Dedicated support and SLA guarantees.</p>
-          <code style="font-family:${t.code};font-size:var(--font-size-xs,0.75rem);background:var(--color-surface-sunken,#eee);padding:0.2rem 0.4rem;border-radius:0.25rem">contact@acme.dev</code>
+          <h4 style="font-family:${e.heading};font-weight:600;margin:0">Enterprise</h4>
+          <p style="font-family:${e.display};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0">Custom</p>
+          <p style="font-family:${e.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0">Dedicated support and SLA guarantees.</p>
+          <code style="font-family:${e.code};font-size:var(--font-size-xs,0.75rem);background:var(--color-surface-sunken,#eee);padding:0.2rem 0.4rem;border-radius:0.25rem">contact@acme.dev</code>
         </div>
-      </div>`},hero:{label:"Hero",render:(t,e)=>`
+      </div>`},hero:{label:"Hero",render:(e,t)=>`
       <div style="text-align:center;padding:var(--size-xl,2rem) 0">
-        <p style="font-family:${t.body};font-size:var(--font-size-xs,0.75rem);text-transform:uppercase;letter-spacing:0.1em;color:var(--color-interactive,oklch(55% .2 260));font-weight:600;margin:0 0 var(--size-xs,0.5rem)"
-          ${n(t.body,"p","eyebrow")}>${e.eyebrow}</p>
-        <h1 style="font-family:${t.display};font-size:clamp(2rem,5vw,3rem);font-weight:800;margin:0;line-height:1.1"
-          ${n(t.display,"h1","heading")}>${e.heading}</h1>
-        <p style="font-family:${t.body};font-size:var(--font-size-lg,1.125rem);color:var(--color-text-muted,#666);margin:var(--size-s,0.75rem) auto 0;max-width:40ch"
-          ${n(t.body,"p","body")}>${e.body}</p>
-      </div>`}},b=class extends p{static observedAttributes=["heading-font","body-font","code-font","display-font","sample","show-export","show-suggestions","preview"];#e={heading:"",body:"",code:"",display:""};#t="combined";#i={heading:"The Art of Typography",subheading:"Building visual harmony through font pairing",body:"Good typography is invisible \u2014 it lets the content speak without distraction. The best font pairings create harmony between heading impact and body readability. Every typeface carries personality: serif fonts convey trust and tradition, while sans-serif fonts feel modern and clean.",body2:"Choosing the right pairing is about contrast and complement. A bold display font for headlines needs a quiet, readable body font to balance it. Monospace fonts ground technical content in precision. The interplay between these roles defines your brand voice.",code:`const theme = {
+        <p style="font-family:${e.body};font-size:var(--font-size-xs,0.75rem);text-transform:uppercase;letter-spacing:0.1em;color:var(--color-interactive,oklch(55% .2 260));font-weight:600;margin:0 0 var(--size-xs,0.5rem)"
+          ${r(e.body,"p","eyebrow")}>${t.eyebrow}</p>
+        <h1 style="font-family:${e.display};font-size:clamp(2rem,5vw,3rem);font-weight:800;margin:0;line-height:1.1"
+          ${r(e.display,"h1","heading")}>${t.heading}</h1>
+        <p style="font-family:${e.body};font-size:var(--font-size-lg,1.125rem);color:var(--color-text-muted,#666);margin:var(--size-s,0.75rem) auto 0;max-width:40ch"
+          ${r(e.body,"p","body")}>${t.body}</p>
+      </div>`}},x=class extends y{static observedAttributes=["heading-font","body-font","code-font","display-font","sample","show-export","show-suggestions","preview"];#e={heading:"",body:"",code:"",display:""};#t="combined";#i={heading:"The Art of Typography",subheading:"Building visual harmony through font pairing",body:"Good typography is invisible \u2014 it lets the content speak without distraction. The best font pairings create harmony between heading impact and body readability. Every typeface carries personality: serif fonts convey trust and tradition, while sans-serif fonts feel modern and clean.",body2:"Choosing the right pairing is about contrast and complement. A bold display font for headlines needs a quiet, readable body font to balance it. Monospace fonts ground technical content in precision. The interplay between these roles defines your brand voice.",code:`const theme = {
   heading: "Playfair Display",
   body: "Inter",
   tokens: { size: 16, scale: 1.25 }
-};`,eyebrow:"Design Systems",byline:"By Jamie Chen \xB7 April 14, 2026 \xB7 8 min read",lead:"How native CSS features and design tokens are replacing the complex tooling we thought we needed.",quote:'"Good typography is invisible \u2014 it lets the content breathe."'};setup(){this.#e.heading=this.getAttribute("heading-font")||"Playfair Display",this.#e.body=this.getAttribute("body-font")||"Inter",this.#e.code=this.getAttribute("code-font")||"JetBrains Mono",this.#e.display=this.getAttribute("display-font")||this.#e.heading,this.#t=this.getAttribute("preview")||"combined",this.#s(),this.#o()}attributeChangedCallback(e,i,o){i===o||!this.isConnected||(e==="heading-font"&&(this.#e.heading=o||"Playfair Display"),e==="body-font"&&(this.#e.body=o||"Inter"),e==="code-font"&&(this.#e.code=o||"JetBrains Mono"),e==="display-font"&&(this.#e.display=o||this.#e.heading),e==="preview"&&(this.#t=o||"combined"),this.#s(),this.#o())}async#o(){let e=Object.values(this.#e).filter(Boolean).map(i=>{let o=f.find(r=>r.name===i);return k(i,o?.weights||"400;700")});await Promise.all(e),this.#f()}#s(){let e=this.hasAttribute("show-export"),i=this.hasAttribute("show-suggestions"),o="var(--size-m, 1rem)",r="var(--size-s, 0.75rem)",s="var(--size-xs, 0.5rem)",a="var(--radius-m, 0.5rem)",c="var(--color-border, #ddd)",h="var(--color-surface, #fff)",$="var(--color-surface-raised, #f5f5f5)",m="var(--color-text-muted, #666)",S="var(--font-size-sm, 0.875rem)",l="var(--font-size-xs, 0.75rem)",E=`font:inherit;font-size:${S};padding:0.35rem 0.5rem;border:1px solid ${c};border-radius:4px;background:${h}`,C=[{key:"heading",label:"Heading"},{key:"body",label:"Body"},{key:"code",label:"Code"},{key:"display",label:"Display"}].map(d=>`
-      <label style="display:flex;flex-direction:column;gap:3px;flex:1;min-width:9rem;font-size:${l};font-weight:600;color:${m};text-transform:uppercase;letter-spacing:0.04em">
+};`,eyebrow:"Design Systems",byline:"By Jamie Chen \xB7 April 14, 2026 \xB7 8 min read",lead:"How native CSS features and design tokens are replacing the complex tooling we thought we needed.",quote:'"Good typography is invisible \u2014 it lets the content breathe."'};setup(){this.#e.heading=this.getAttribute("heading-font")||"Playfair Display",this.#e.body=this.getAttribute("body-font")||"Inter",this.#e.code=this.getAttribute("code-font")||"JetBrains Mono",this.#e.display=this.getAttribute("display-font")||this.#e.heading,this.#t=this.getAttribute("preview")||"combined",this.#n(),this.#o()}attributeChangedCallback(t,o,i){o===i||!this.isConnected||(t==="heading-font"&&(this.#e.heading=i||"Playfair Display"),t==="body-font"&&(this.#e.body=i||"Inter"),t==="code-font"&&(this.#e.code=i||"JetBrains Mono"),t==="display-font"&&(this.#e.display=i||this.#e.heading),t==="preview"&&(this.#t=i||"combined"),this.#n(),this.#o())}async#o(){let t=Object.values(this.#e).filter(Boolean).map(o=>{let i=m.find(s=>s.name===o);return M(o,i?.weights||"400;700")});await Promise.all(t),this.#p()}#n(){let t=this.hasAttribute("show-export"),o=this.hasAttribute("show-suggestions"),i="var(--size-m, 1rem)",s="var(--size-s, 0.75rem)",n="var(--size-xs, 0.5rem)",a="var(--radius-m, 0.5rem)",c="var(--color-border, #ddd)",u="var(--color-surface, #fff)",z="var(--color-surface-raised, #f5f5f5)",f="var(--color-text-muted, #666)",N="var(--font-size-sm, 0.875rem)",l="var(--font-size-xs, 0.75rem)",D=`font:inherit;font-size:${N};padding:0.35rem 0.5rem;border:1px solid ${c};border-radius:4px;background:${u}`,L=[{key:"heading",label:"Heading"},{key:"body",label:"Body"},{key:"code",label:"Code"},{key:"display",label:"Display"}].map(d=>`
+      <label style="display:flex;flex-direction:column;gap:3px;flex:1;min-width:9rem;font-size:${l};font-weight:600;color:${f};text-transform:uppercase;letter-spacing:0.04em">
         ${d.label}
-        <select class="fp-select" data-role="${d.key}" style="${E}">
-          ${this.#c(this.#e[d.key])}
+        <select class="fp-select" data-role="${d.key}" style="${D}">
+          ${this.#d(this.#e[d.key])}
         </select>
       </label>
-    `).join(""),M=Object.entries(u).map(([d,{label:y}])=>`<button type="button" class="fp-tab" data-mode="${d}"
-        style="all:unset;cursor:pointer;font-size:${l};padding:0.3rem 0.75rem;border-radius:999px;${d===this.#t?"background:var(--color-interactive,oklch(55% .2 260));color:white":`border:1px solid ${c}`}">${y}</button>`).join(""),A={heading:`'${this.#e.heading}', serif`,body:`'${this.#e.body}', sans-serif`,code:`'${this.#e.code}', monospace`,display:`'${this.#e.display}', serif`},T=u[this.#t]?.render(A,this.#i)||"",L=z.map(([d,y])=>`<button type="button" class="fp-suggestion" data-h="${d}" data-b="${y}"
+    `).join(""),O=Object.entries(w).map(([d,{label:p}])=>`<button type="button" class="fp-tab" data-mode="${d}"
+        style="all:unset;cursor:pointer;font-size:${l};padding:0.3rem 0.75rem;border-radius:999px;${d===this.#t?"background:var(--color-interactive,oklch(55% .2 260));color:white":`border:1px solid ${c}`}">${p}</button>`).join(""),I={heading:`'${this.#e.heading}', serif`,body:`'${this.#e.body}', sans-serif`,code:`'${this.#e.code}', monospace`,display:`'${this.#e.display}', serif`},q=w[this.#t]?.render(I,this.#i)||"",P=A.map(([d,p])=>`<button type="button" class="fp-suggestion" data-h="${d}" data-b="${p}"
         style="all:unset;cursor:pointer;font-size:${l};padding:0.3rem 0.5rem;border:1px solid ${c};border-radius:4px;white-space:nowrap;text-align:left;line-height:1.3"
-        title="${d} + ${y}"><strong>${d}</strong><br><span style="color:${m}">${y}</span></button>`).join(""),q=this.#r(),P=`<details class="fp-code-details" style="border:1px solid ${c};border-radius:${a};overflow:hidden"${e?" open":""}>
-      <summary style="padding:${s} ${r};cursor:pointer;font-size:${l};font-weight:600;color:${m};text-transform:uppercase;letter-spacing:0.04em;background:${$}">Code</summary>
-      <div style="padding:${r}">
-        <pre style="font-family:var(--font-mono,monospace);font-size:${l};margin:0;white-space:pre-wrap;word-break:break-all" class="fp-css-output">${q}</pre>
-        <div style="display:flex;gap:${s};margin-block-start:${r}">
+        title="${d} + ${p}"><strong>${d}</strong><br><span style="color:${f}">${p}</span></button>`).join(""),B=this.#s(),F=`<details class="fp-code-details" style="border:1px solid ${c};border-radius:${a};overflow:hidden"${t?" open":""}>
+      <summary style="padding:${n} ${s};cursor:pointer;font-size:${l};font-weight:600;color:${f};text-transform:uppercase;letter-spacing:0.04em;background:${z}">Code</summary>
+      <div style="padding:${s}">
+        <pre style="font-family:var(--font-mono,monospace);font-size:${l};margin:0;white-space:pre-wrap;word-break:break-all" class="fp-css-output">${B}</pre>
+        <div style="display:flex;gap:${n};margin-block-start:${s}">
           <button type="button" class="fp-copy-css"
-            style="all:unset;cursor:pointer;font-size:${l};padding:0.3rem 0.65rem;border:1px solid ${c};border-radius:4px;background:${h}">Copy CSS</button>
+            style="all:unset;cursor:pointer;font-size:${l};padding:0.3rem 0.65rem;border:1px solid ${c};border-radius:4px;background:${u}">Copy CSS</button>
           <button type="button" class="fp-copy-import"
-            style="all:unset;cursor:pointer;font-size:${l};padding:0.3rem 0.65rem;border:1px solid ${c};border-radius:4px;background:${h}">Copy @import</button>
+            style="all:unset;cursor:pointer;font-size:${l};padding:0.3rem 0.65rem;border:1px solid ${c};border-radius:4px;background:${u}">Copy @import</button>
         </div>
       </div>
-    </details>`,v=`<div style="display:flex;flex-direction:column;gap:${o};flex:1;min-width:0">
-      <div style="display:flex;flex-wrap:wrap;gap:${s}">${C}</div>
+    </details>`,E=`<div style="display:flex;flex-direction:column;gap:${i};flex:1;min-width:0">
+      <div style="display:flex;flex-wrap:wrap;gap:${n}">${L}</div>
       <div style="display:flex;flex-wrap:wrap;gap:0.375rem;align-items:center">
-        <span style="font-size:${l};font-weight:600;color:${m};text-transform:uppercase;letter-spacing:0.04em;margin-inline-end:${s}">Examples</span>
-        ${M}
+        <span style="font-size:${l};font-weight:600;color:${f};text-transform:uppercase;letter-spacing:0.04em;margin-inline-end:${n}">Examples</span>
+        ${O}
       </div>
-      <div style="display:flex;flex-direction:column;gap:${s}">
-        <span style="font-size:${l};font-weight:600;color:${m};text-transform:uppercase;letter-spacing:0.04em">Preview</span>
-        <div class="fp-preview" style="padding:var(--size-l,1.5rem);background:${$};border-radius:${a};border:1px solid ${c};display:flex;flex-direction:column;gap:${r};max-height:24rem;overflow-y:auto">
-          ${T}
+      <div style="display:flex;flex-direction:column;gap:${n}">
+        <span style="font-size:${l};font-weight:600;color:${f};text-transform:uppercase;letter-spacing:0.04em">Preview</span>
+        <div class="fp-preview" style="padding:var(--size-l,1.5rem);background:${z};border-radius:${a};border:1px solid ${c};display:flex;flex-direction:column;gap:${s};max-height:24rem;overflow-y:auto">
+          ${q}
         </div>
       </div>
-      ${P}
-    </div>`;i?this.innerHTML=`<div style="display:flex;gap:${o};flex-wrap:wrap">
-        ${v}
-        <aside style="flex:0 0 11rem;display:flex;flex-direction:column;gap:${s}">
-          <span style="font-size:${l};font-weight:600;color:${m};text-transform:uppercase;letter-spacing:0.04em">Pairings</span>
-          <div style="display:flex;flex-direction:column;gap:0.25rem">${L}</div>
+      ${F}
+    </div>`;o?this.innerHTML=`<div style="display:flex;gap:${i};flex-wrap:wrap">
+        ${E}
+        <aside style="flex:0 0 11rem;display:flex;flex-direction:column;gap:${n}">
+          <span style="font-size:${l};font-weight:600;color:${f};text-transform:uppercase;letter-spacing:0.04em">Pairings</span>
+          <div style="display:flex;flex-direction:column;gap:0.25rem">${P}</div>
         </aside>
-      </div>`:this.innerHTML=v,this.#y()}#c(e){return["serif","sans-serif","display","monospace"].map(o=>{let s=f.filter(a=>a.category===o).map(a=>`<option value="${a.name}"${a.name===e?" selected":""}>${a.name}</option>`).join("");return`<optgroup label="${o}">${s}</optgroup>`}).join("")}#r(){let e=[],i={heading:"serif",body:"sans-serif",code:"monospace",display:"serif"};for(let[o,r]of Object.entries(i)){let s=this.#e[o];if(!s)continue;let a=f.find(c=>c.name===s);e.push(`--font-${o}: "${s}", ${a?.category||r};`)}return e.join(`
-`)}#m(){let e=new Set,i=[];for(let o of Object.values(this.#e)){if(!o||e.has(o))continue;e.add(o);let r=f.find(s=>s.name===o);i.push(`@import url('${g(o,r?.weights||"400;700")}');`)}return i.join(`
-`)}#y(){this.querySelectorAll(".fp-select").forEach(e=>{e.addEventListener("change",i=>{this.#e[i.target.dataset.role]=i.target.value,this.#o(),this.#n(),this.#a(),this.#d()})}),this.querySelectorAll(".fp-tab").forEach(e=>{e.addEventListener("click",()=>{this.#t=e.dataset.mode,this.#s(),this.#o()})}),this.querySelectorAll(".fp-suggestion").forEach(e=>{e.addEventListener("click",()=>{this.#e.heading=e.dataset.h,this.#e.body=e.dataset.b,this.#e.display=e.dataset.h,this.#s(),this.#o(),this.#d()})}),this.querySelectorAll(".fp-editable").forEach(e=>{e.addEventListener("blur",()=>{let i=e.dataset.role;i&&e.textContent.trim()&&(this.#i[i]=e.textContent.trim())})}),this.querySelector(".fp-copy-css")?.addEventListener("click",e=>{navigator.clipboard?.writeText(this.#r()),this.#l(e.target)}),this.querySelector(".fp-copy-import")?.addEventListener("click",e=>{navigator.clipboard?.writeText(this.#m()),this.#l(e.target)})}#n(){let e=this.querySelector(".fp-preview");if(!e)return;let i={heading:`'${this.#e.heading}', serif`,body:`'${this.#e.body}', sans-serif`,code:`'${this.#e.code}', monospace`,display:`'${this.#e.display}', serif`};e.innerHTML=u[this.#t]?.render(i,this.#i)||"",e.querySelectorAll(".fp-editable").forEach(o=>{o.addEventListener("blur",()=>{let r=o.dataset.role;r&&o.textContent.trim()&&(this.#i[r]=o.textContent.trim())})})}#f(){this.#n(),this.#a()}#a(){let e=this.querySelector(".fp-css-output");e&&(e.textContent=this.#r())}#l(e){let i=e.textContent;e.textContent="Copied!",setTimeout(()=>{e.textContent=i},1500)}#d(){this.dispatchEvent(new CustomEvent("font-pairer:change",{bubbles:!0,detail:{...this.#e}}))}};x("font-pairer",b);export{b as FontPairer};
+      </div>`:this.innerHTML=E,this.#f()}#d(t){return["serif","sans-serif","display","monospace"].map(i=>{let n=m.filter(a=>a.category===i).map(a=>`<option value="${a.name}"${a.name===t?" selected":""}>${a.name}</option>`).join("");return`<optgroup label="${i}">${n}</optgroup>`}).join("")}#s(){let t=[],o={heading:"serif",body:"sans-serif",code:"monospace",display:"serif"};for(let[i,s]of Object.entries(o)){let n=this.#e[i];if(!n)continue;let a=m.find(c=>c.name===n);t.push(`--font-${i}: "${n}", ${a?.category||s};`)}return t.join(`
+`)}#c(){let t=new Set,o=[];for(let i of Object.values(this.#e)){if(!i||t.has(i))continue;t.add(i);let s=m.find(n=>n.name===i);o.push(`@import url('${$(i,s?.weights||"400;700")}');`)}return o.join(`
+`)}#f(){this.querySelectorAll(".fp-select").forEach(t=>{t.addEventListener("change",o=>{let i=o.target;this.#e[i.dataset.role]=i.value,this.#o(),this.#r(),this.#a(),this.#l()})}),this.querySelectorAll(".fp-tab").forEach(t=>{t.addEventListener("click",()=>{let o=t;this.#t=o.dataset.mode||"combined",this.#n(),this.#o()})}),this.querySelectorAll(".fp-suggestion").forEach(t=>{t.addEventListener("click",()=>{let o=t;this.#e.heading=o.dataset.h||"",this.#e.body=o.dataset.b||"",this.#e.display=o.dataset.h||"",this.#n(),this.#o(),this.#l()})}),this.querySelectorAll(".fp-editable").forEach(t=>{let o=t;o.addEventListener("blur",()=>{let i=o.dataset.role;i&&o.textContent.trim()&&(this.#i[i]=o.textContent.trim())})}),this.querySelector(".fp-copy-css")?.addEventListener("click",t=>{h(this.#s(),{button:t.target,announceMessage:"CSS copied"})}),this.querySelector(".fp-copy-import")?.addEventListener("click",t=>{h(this.#c(),{button:t.target,announceMessage:"@import statement copied"})})}#r(){let t=this.querySelector(".fp-preview");if(!t)return;let o={heading:`'${this.#e.heading}', serif`,body:`'${this.#e.body}', sans-serif`,code:`'${this.#e.code}', monospace`,display:`'${this.#e.display}', serif`};t.innerHTML=w[this.#t]?.render(o,this.#i)||"",t.querySelectorAll(".fp-editable").forEach(i=>{let s=i;s.addEventListener("blur",()=>{let n=s.dataset.role;n&&s.textContent.trim()&&(this.#i[n]=s.textContent.trim())})})}#p(){this.#r(),this.#a()}#a(){let t=this.querySelector(".fp-css-output");t&&(t.textContent=this.#s())}#l(){this.dispatchEvent(new CustomEvent("font-pairer:change",{bubbles:!0,detail:{...this.#e}}))}};k("font-pairer",x);export{x as FontPairer};
 //# sourceMappingURL=font-pairer.js.map