vanilla-breeze 0.3.0 → 0.4.0

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

@@ -1,108 +0,0 @@
-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:(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:${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:${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:(e,t)=>`
-      <div style="text-align:center;padding:var(--size-xl,2rem) 0">
-        <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.#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="${D}">
-          ${this.#d(this.#e[d.key])}
-        </select>
-      </label>
-    `).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} + ${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:${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:${u}">Copy @import</button>
-        </div>
-      </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:${f};text-transform:uppercase;letter-spacing:0.04em;margin-inline-end:${n}">Examples</span>
-        ${O}
-      </div>
-      <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>
-      ${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=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

package/dist/cdn/components/gantt-chart.js

@@ -1,2 +0,0 @@
-var q=window.matchMedia("(prefers-reduced-motion: reduce)");var S=new Map;function N(c,t,n={}){let e=n.priority??10,a={impl:t,bundle:n.bundle,contract:n.contract,priority:e},s=S.get(c);if(customElements.get(c)){if(!s||s.priority>=e){s&&s.priority===e&&s.impl!==t&&console.warn(`[VB Bundle] Tag <${c}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${n.bundle}".`);return}console.warn(`[VB Bundle] Tag <${c}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${n.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=e){s.priority===e&&console.warn(`[VB Bundle] Tag <${c}> already registered by "${s.bundle}". Skipping "${n.bundle}" (first wins at equal priority).`);return}S.set(c,a),customElements.define(c,t)}var C=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,n,e,a){t.addEventListener(n,e,a),this.#e.push(()=>t.removeEventListener(n,e,a))}setup(){}teardown(){}setState(t,n){this.#t||(this.#t=this.attachInternals());let e=this.#t.states;try{n?e.add(t):e.delete(t)}catch{let a=`--${t}`;n?e.add(a):e.delete(a)}}_adoptInternals(t){this.#t||(this.#t=t)}};var y=864e5,k=y*7,A=y*30,T=y*91,D=y*365;function E(c){return typeof c=="number"?c:new Date(c).getTime()}function I(c){return c<=k*3?t=>t.toLocaleDateString(void 0,{month:"short",day:"numeric"}):c<=A*3?t=>t.toLocaleDateString(void 0,{month:"short",day:"numeric"}):c<=D?t=>t.toLocaleDateString(void 0,{month:"short",year:"2-digit"}):t=>t.toLocaleDateString(void 0,{year:"numeric"})}function L(c){return c<=k*3?"day":c<=A*3?"week":c<=D?"month":"quarter"}function x(c){return String(c).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}var v=class c extends C{static get observedAttributes(){return["src","title","view","show-today","show-progress","show-dependencies","compact"]}#e=null;#t=null;#a=null;#i=[];#s=0;#r=0;#n=0;setup(){let t=this.querySelector(":scope > table");return!t||(this.#i=this.#h(t),this.#i.length===0)?!1:(this.#s=Math.min(...this.#i.map(n=>n.start)),this.#r=Math.max(...this.#i.map(n=>n.end)),this.#n=this.#r-this.#s,this.#n<=0&&(this.#n=y),this.#d(t),this.dispatchEvent(new CustomEvent("gantt-chart:ready",{bubbles:!0,detail:{taskCount:this.#i.length,dateRange:{start:new Date(this.#s).toISOString(),end:new Date(this.#r).toISOString()}}})),!0)}teardown(){this.#a&&(this.#a.remove(),this.#a=null),this.#e&&(this.#e.remove(),this.#e=null),this.#t&&(this.#t.remove(),this.#t=null);let t=this.querySelector("table.gc-sr-only");t&&t.classList.remove("gc-sr-only"),this.#i=[]}static#u=0;attributeChangedCallback(t,n,e){n===e||!this.isConnected||(t==="src"?this._loadSrc(e):this.hasAttribute("data-upgraded")&&this.#o())}#o(){let t=()=>{this.teardown(),this.removeAttribute("data-upgraded"),this.setup()};if(this.hasAttribute("data-upgraded")&&"startViewTransition"in document&&!matchMedia("(prefers-reduced-motion: reduce)").matches){let n=`gc-vt-${++c.#u}`;this.style.viewTransitionName=n,document.startViewTransition(t).finished.finally(()=>{this.style.viewTransitionName=""})}else t()}get tasks(){return this.#i}set tasks(t){let n=(t||[]).map((e,a)=>({id:e.id??`gc-task-${a}`,name:e.name??`Task ${a+1}`,start:typeof e.start=="number"?e.start:E(e.start),end:typeof e.end=="number"?e.end:e.end!=null?E(e.end):typeof e.start=="number"?e.start:E(e.start),progress:e.progress??0,group:e.group??null,depends:Array.isArray(e.depends)?e.depends:e.depends?String(e.depends).split(",").map(s=>s.trim()):[],status:e.status??null,assignee:e.assignee??null,milestone:!!e.milestone,color:e.color??null,storyIds:e.storyIds??[],itemIds:e.itemIds??[]}));if((this.#e||this.#a||this.#t)&&(this.#a&&(this.#a.remove(),this.#a=null),this.#e&&(this.#e.remove(),this.#e=null),this.#t&&(this.#t.remove(),this.#t=null)),this.#i=n,n.length>0){this.#s=Math.min(...n.map(a=>a.start)),this.#r=Math.max(...n.map(a=>a.end)),this.#n=this.#r-this.#s,this.#n<=0&&(this.#n=y);let e=this.querySelector(":scope > table");e||(e=document.createElement("table"),e.classList.add("gc-sr-only"),this.appendChild(e)),this.#d(e)}this.dispatchEvent(new CustomEvent("gantt-chart:tasks-changed",{detail:{tasks:n,source:"property"},bubbles:!0}))}#h(t){let n=t.querySelectorAll("tbody tr"),e=[];for(let a=0;a<n.length;a++){let s=n[a],o=s.querySelectorAll("time[datetime]");if(o.length<2&&!s.hasAttribute("data-milestone"))continue;let l=o[0]?.getAttribute("datetime"),i=o.length>1?o[1].getAttribute("datetime"):l;if(!l)continue;let r=s.querySelector("progress"),h=r?r.value/(r.max||100):0,g=s.cells[0]?.textContent?.trim()||`Task ${a+1}`;e.push({id:s.dataset.taskId||`gc-task-${a}`,name:g,start:E(l),end:E(i),progress:h,group:s.dataset.group||null,depends:s.dataset.depends?s.dataset.depends.split(",").map(d=>d.trim()):[],status:s.dataset.status||null,assignee:s.dataset.assignee||null,milestone:s.hasAttribute("data-milestone"),color:s.dataset.color||null,storyIds:s.dataset.storyIds?s.dataset.storyIds.split(",").map(d=>d.trim()):[],itemIds:s.dataset.itemIds?s.dataset.itemIds.split(",").map(d=>d.trim()):[]})}return e}#d(t){let n=this.getAttribute("title"),e=this.hasAttribute("show-today"),a=this.hasAttribute("show-progress"),s=this.hasAttribute("show-dependencies");n&&(this.#a=document.createElement("h2"),this.#a.className="gc-title",this.#a.textContent=n,this.insertBefore(this.#a,t)),this.#e=document.createElement("div"),this.#e.className="gc-container",this.#e.setAttribute("role","region"),this.#e.setAttribute("aria-label",`Gantt chart${n?": "+n:""}`);let o=this.#m();this.#e.appendChild(o);let l=document.createElement("div");l.className="gc-body";let i=document.createElement("div");i.className="gc-task-list";let r=document.createElement("div");r.className="gc-bars";let h=this.#p();r.appendChild(h);let g=this.#f();for(let[d,f]of g){if(g.size>1&&d){let u=document.createElement("div");u.className="gc-group-header";let m=document.createElement("span");m.className="gc-group-label",m.textContent=d,u.appendChild(m),i.appendChild(u);let p=document.createElement("div");p.className="gc-group-spacer",r.appendChild(p)}for(let u of f){let m=document.createElement("div");m.className="gc-task-row",m.setAttribute("data-task-id",u.id);let p=document.createElement("span");p.className="gc-task-name",p.textContent=u.name,m.appendChild(p);let w=document.createElement("span");w.className="gc-task-dates",w.textContent=`${new Date(u.start).toLocaleDateString()} to ${new Date(u.end).toLocaleDateString()}`,m.appendChild(w),i.appendChild(m);let b=document.createElement("div");b.className="gc-bar-row",u.milestone?b.appendChild(this.#b(u)):b.appendChild(this.#g(u,a)),r.appendChild(b)}}if(e){let d=this.#y();d&&r.appendChild(d)}s&&requestAnimationFrame(()=>{let d=this.#w(r);d&&r.appendChild(d)}),l.appendChild(i),l.appendChild(r),this.#e.appendChild(l),this.insertBefore(this.#e,t),t.classList.add("gc-sr-only"),this.#t=document.createElement("div"),this.#t.className="gc-sr-only",this.#t.setAttribute("role","status"),this.#t.setAttribute("aria-live","polite"),this.#t.setAttribute("aria-atomic","true"),this.appendChild(this.#t),this.listen(this.#e,"click",d=>{let f=d.target.closest(".gc-bar, .gc-milestone");if(!f)return;let u=f.dataset.taskId,m=this.#i.find(p=>p.id===u);m&&(this.#E(`Selected: ${m.name}`),this.dispatchEvent(new CustomEvent("gantt-chart:task-click",{bubbles:!0,detail:{task:m}})))}),this.listen(this.#e,"keydown",d=>{let f=d;if(f.key==="Enter"||f.key===" "){let u=f.target.closest(".gc-bar, .gc-milestone");u&&(f.preventDefault(),u.click())}})}#m(){let t=document.createElement("div");t.className="gc-timeline-header";let n=document.createElement("div");n.className="gc-timeline-spacer",t.appendChild(n);let e=document.createElement("div");e.className="gc-timeline-dates";let a=this.#c();for(let{position:s,text:o}of a){let l=document.createElement("span");l.className="gc-date-label",l.style.left=`${s}%`,l.textContent=o,e.appendChild(l)}return t.appendChild(e),t}#c(){let t=this.getAttribute("view")||"auto",n=t==="auto"?L(this.#n):t,e=I(this.#n),a=[],s;switch(n){case"day":s=y;break;case"week":s=k;break;case"month":s=A;break;case"quarter":s=T;break;default:s=A}let o=new Date(this.#s);if(n==="week"){let r=o.getDay(),h=r===0?1:r===1?0:8-r;o.setDate(o.getDate()+h)}else if(n==="month")o.setDate(1),o.getTime()<this.#s&&o.setMonth(o.getMonth()+1);else if(n==="quarter"){let r=o.getMonth(),h=Math.ceil((r+1)/3)*3;o.setMonth(h),o.setDate(1)}let l=o.getTime();l>this.#s+s*.5&&a.push({position:0,text:e(new Date(this.#s))});let i=l;for(;i<=this.#r;){let r=(i-this.#s)/this.#n*100;if(r>=0&&r<=100&&a.push({position:r,text:e(new Date(i))}),n==="month"){let h=new Date(i);h.setMonth(h.getMonth()+1),i=h.getTime()}else if(n==="quarter"){let h=new Date(i);h.setMonth(h.getMonth()+3),i=h.getTime()}else i+=s}return a}#p(){let t=document.createElement("div");t.className="gc-grid-lines";let n=this.#c();for(let{position:e}of n){if(e<=0)continue;let a=document.createElement("div");a.className="gc-grid-line",a.style.left=`${e}%`,t.appendChild(a)}return t}#f(){let t=new Map;for(let n of this.#i){let e=n.group||"";t.has(e)||t.set(e,[]),t.get(e)?.push(n)}return t}#g(t,n){let e=(t.start-this.#s)/this.#n*100,a=(t.end-t.start)/this.#n*100,s=document.createElement("div");if(s.className="gc-bar",s.setAttribute("data-task-id",t.id),s.setAttribute("role","img"),s.setAttribute("tabindex","0"),s.setAttribute("aria-label",`${x(t.name)}: ${new Date(t.start).toLocaleDateString()} to ${new Date(t.end).toLocaleDateString()}`+(t.progress>0?`, ${Math.round(t.progress*100)}% complete`:"")),s.style.left=`${e}%`,s.style.width=`${Math.max(a,.5)}%`,t.status&&s.setAttribute("data-status",t.status),t.color&&s.style.setProperty("--gc-bar-color",t.color),n&&t.progress>0){let o=document.createElement("div");o.className="gc-bar-fill",o.style.width=`${Math.round(t.progress*100)}%`,s.appendChild(o)}if(a>8){let o=document.createElement("span");o.className="gc-bar-label",o.textContent=t.name,s.appendChild(o)}return s}#b(t){let n=(t.start-this.#s)/this.#n*100,e=document.createElement("div");return e.className="gc-milestone",e.setAttribute("data-task-id",t.id),e.setAttribute("role","img"),e.setAttribute("tabindex","0"),e.setAttribute("aria-label",`Milestone: ${x(t.name)}, ${new Date(t.start).toLocaleDateString()}`),e.style.left=`${n}%`,t.status&&e.setAttribute("data-status",t.status),t.color&&e.style.setProperty("--gc-bar-color",t.color),e}#y(){let t=Date.now();if(t<this.#s||t>this.#r)return null;let n=(t-this.#s)/this.#n*100,e=document.createElement("div");e.className="gc-today-line",e.style.left=`${n}%`;let a=document.createElement("span");return a.className="gc-today-label",a.textContent="Today",e.appendChild(a),e}#w(t){if(!this.#i.some(i=>i.depends.length>0))return null;let e="http://www.w3.org/2000/svg",a=document.createElementNS(e,"svg");a.setAttribute("class","gc-deps"),a.style.width="100%",a.style.height="100%";let s=document.createElementNS(e,"defs"),o=document.createElementNS(e,"marker");o.setAttribute("id","gc-arrowhead"),o.setAttribute("markerWidth","8"),o.setAttribute("markerHeight","6"),o.setAttribute("refX","8"),o.setAttribute("refY","3"),o.setAttribute("orient","auto");let l=document.createElementNS(e,"polygon");l.setAttribute("points","0 0, 8 3, 0 6"),l.setAttribute("fill","var(--color-text-muted, #666666)"),o.appendChild(l),s.appendChild(o),a.appendChild(s);for(let i of this.#i)for(let r of i.depends){let h=this.#i.find(M=>M.id===r);if(!h)continue;let g=(h.end-this.#s)/this.#n*100,d=(i.start-this.#s)/this.#n*100,f=this.#l(h.id,t),u=this.#l(i.id,t);if(f===-1||u===-1)continue;let m=36,p=f*m+m/2,w=u*m+m/2,b=document.createElementNS(e,"path"),$=g+(d-g)/2;b.setAttribute("d",`M ${g}% ${p} C ${$}% ${p}, ${$}% ${w}, ${d}% ${w}`),b.setAttribute("class","gc-dep-line"),a.appendChild(b)}return a}#l(t,n){let e=n.querySelectorAll(".gc-bar-row");for(let a=0;a<e.length;a++){let s=e[a].querySelector("[data-task-id]");if(s&&s.dataset.taskId===t)return a}return-1}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();let a=document.createElement("table"),s=document.createElement("thead"),o=document.createElement("tr");for(let i of["Task","Start","End","Progress"]){let r=document.createElement("th");r.textContent=i,o.appendChild(r)}s.appendChild(o),a.appendChild(s);let l=document.createElement("tbody");for(let i of e.tasks||[]){let r=document.createElement("tr");i.id&&(r.dataset.taskId=i.id),i.group&&(r.dataset.group=i.group),i.depends&&(r.dataset.depends=Array.isArray(i.depends)?i.depends.join(","):i.depends),i.status&&(r.dataset.status=i.status),i.assignee&&(r.dataset.assignee=i.assignee),i.milestone&&r.setAttribute("data-milestone",""),i.color&&(r.dataset.color=i.color),i.storyIds&&(r.dataset.storyIds=Array.isArray(i.storyIds)?i.storyIds.join(","):i.storyIds),i.itemIds&&(r.dataset.itemIds=Array.isArray(i.itemIds)?i.itemIds.join(","):i.itemIds);let h=document.createElement("td");h.textContent=i.name||"",r.appendChild(h);let g=document.createElement("td"),d=document.createElement("time");d.setAttribute("datetime",i.start),d.textContent=new Date(i.start).toLocaleDateString(void 0,{month:"short",day:"numeric"}),g.appendChild(d),r.appendChild(g);let f=document.createElement("td"),u=document.createElement("time");u.setAttribute("datetime",i.end||i.start),u.textContent=new Date(i.end||i.start).toLocaleDateString(void 0,{month:"short",day:"numeric"}),f.appendChild(u),r.appendChild(f);let m=document.createElement("td"),p=document.createElement("progress");p.value=i.progress||0,p.max=100,p.textContent=`${i.progress||0}%`,m.appendChild(p),r.appendChild(m),l.appendChild(r)}a.appendChild(l),this.appendChild(a),e.title&&this.setAttribute("title",e.title),this.#o()}catch(n){console.warn(`[gantt-chart] Failed to load src="${t}":`,n)}}#E(t){this.#t&&(this.#t.textContent="",requestAnimationFrame(()=>{this.#t&&(this.#t.textContent=t)}))}};N("gantt-chart",v);export{v as GanttChart};
-//# sourceMappingURL=gantt-chart.js.map

package/dist/cdn/components/gradient-builder.js

@@ -1,52 +0,0 @@
-var F=window.matchMedia("(prefers-reduced-motion: reduce)");var C=new Map;function k(t,s,o={}){let e=o.priority??10,n={impl:s,bundle:o.bundle,contract:o.contract,priority:e},i=C.get(t);if(customElements.get(t)){if(!i||i.priority>=e){i&&i.priority===e&&i.impl!==s&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${i.bundle}" (priority ${i.priority}). Skipping "${o.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${i.bundle}" cannot be replaced (customElements.define is permanent). "${o.bundle}" has higher priority but arrived late.`);return}if(i&&i.priority>=e){i.priority===e&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${i.bundle}". Skipping "${o.bundle}" (first wins at equal priority).`);return}C.set(t,n),customElements.define(t,s)}var p=class extends HTMLElement{#t=[];#e;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 s of this.#t)s();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(s,o,e,n){s.addEventListener(o,e,n),this.#t.push(()=>s.removeEventListener(o,e,n))}setup(){}teardown(){}setState(s,o){this.#e||(this.#e=this.attachInternals());let e=this.#e.states;try{o?e.add(s):e.delete(s)}catch{let n=`--${s}`;o?e.add(n):e.delete(n)}}_adoptInternals(s){this.#e||(this.#e=s)}};var g="[data-copy], [data-copy-target], [data-paste-target]",D="Copied to clipboard",I="Pasted from clipboard",m=new WeakMap;async function v(t,s={}){if(t==null||t==="")return!1;let{button:o,announceMessage:e=D,duration:n=1500}=s;try{await navigator.clipboard.writeText(t)}catch{return!1}return N({button:o,duration:n,announceMessage:e,eventDetail:{text:t}}),!0}function N({button:t,duration:s,announceMessage:o,eventDetail:e,state:n="copied",eventName:i="copy"}){if(t){t.dataset.state=n;let r=m.get(t);r&&clearTimeout(r),m.set(t,setTimeout(()=>{delete t.dataset.state,m.delete(t)},s)),t.dispatchEvent(new CustomEvent(i,{bubbles:!0,detail:e}))}_(o,t??document.body)}async function z(t,s={}){let{button:o,announceMessage:e=I,duration:n=1500}=s,i;try{i=await navigator.clipboard.readText()}catch{return null}return t&&("value"in t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement)?t.value=i:t.textContent=i,t.dispatchEvent(new Event("input",{bubbles:!0}))),N({button:o,duration:n,announceMessage:e,eventDetail:{text:i},state:"pasted",eventName:"paste"}),i}function A(t=document){t.querySelectorAll(g).forEach(y)}function y(t){t.hasAttribute("data-copy-init")||(t.setAttribute("data-copy-init",""),t.addEventListener("click",()=>{if(t.dataset.pasteTarget){let o=document.querySelector(t.dataset.pasteTarget);if(!o)return;z(o,{button:t});return}let s=B(t);s&&v(s,{button:t})}))}function B(t){if(t.dataset.copy)return t.dataset.copy;if(t.dataset.copyTarget){let s=document.querySelector(t.dataset.copyTarget);if(!s)return"";let o=t.dataset.copyAttr;return o?s.getAttribute(o)??"":s.textContent??""}return""}function _(t,s){let o=document.createElement("div");o.setAttribute("role","status"),o.setAttribute("aria-live","polite"),o.className="visually-hidden",o.textContent=t,s.appendChild(o),setTimeout(()=>o.remove(),1e3)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>A()):A();var R=new MutationObserver(t=>{for(let s of t)for(let o of s.addedNodes){if(o.nodeType!==Node.ELEMENT_NODE)continue;let e=o;e.matches(g)&&y(e),e.querySelectorAll(g).forEach(n=>y(n))}});R.observe(document.documentElement,{childList:!0,subtree:!0});function M(t,{type:s="linear",angle:o=90,interpolation:e="oklab"}={}){if(t.length<2)return"transparent";let i=[...t].sort((a,l)=>a.position-l.position).map(a=>`${a.color} ${a.position}%`).join(", "),r=e!=="srgb"?` in ${e}`:"";return s==="radial"?`radial-gradient(circle${r}, ${i})`:`linear-gradient(${o}deg${r}, ${i})`}function $(t){if(!t)return T();let s=t.split(",").map(o=>o.trim()).filter(Boolean);return s.length<2?T():s.map((o,e)=>({color:o,position:Math.round(e/(s.length-1)*100)}))}function T(){return[{color:"#6366f1",position:0},{color:"#ec4899",position:100}]}var x=class extends p{static observedAttributes=["colors","type","angle","interpolation","show-export","show-controls"];#t=[];#e="linear";#o=90;#s="oklab";setup(){return this.#t=$(this.getAttribute("colors")??""),this.#e=this.getAttribute("type")||"linear",this.#o=Number(this.getAttribute("angle"))||90,this.#s=this.getAttribute("interpolation")||"oklab",this.#n(),!0}attributeChangedCallback(s,o,e){o===e||!this.isConnected||(s==="colors"&&(this.#t=$(e)),s==="type"&&(this.#e=e||"linear"),s==="angle"&&(this.#o=Number(e)||90),s==="interpolation"&&(this.#s=e||"oklab"),this.#n())}get css(){return M(this.#t,{type:this.#e,angle:this.#o,interpolation:this.#s})}#n(){let s=this.hasAttribute("show-export"),o=this.getAttribute("show-controls")!=="false",e=this.css,n="var(--size-m, 1rem)",i="var(--size-s, 0.75rem)",r="var(--size-xs, 0.5rem)",a="var(--radius-m, 0.5rem)",l="var(--color-border, #ddd)",E="var(--color-surface, #fff)",f="var(--color-text-muted, #666)",h="var(--font-mono, monospace)",b="var(--font-size-sm, 0.875rem)",u="var(--font-size-xs, 0.75rem)",L=`<div class="gb-preview" style="height:4rem;border-radius:${a};background:${e};border:1px solid ${l}"></div>`,w=`font:inherit;font-size:${b};padding:0.25rem 0.5rem;border:1px solid ${l};border-radius:4px;background:${E}`,S="";o&&(S=`<div style="display:flex;flex-direction:column;gap:${i};font-size:${b}">
-        <div style="display:flex;flex-wrap:wrap;gap:${n};align-items:center">
-          <label style="display:flex;align-items:center;gap:${r}">
-            Type
-            <select class="gb-type" style="${w}">
-              <option value="linear"${this.#e==="linear"?" selected":""}>Linear</option>
-              <option value="radial"${this.#e==="radial"?" selected":""}>Radial</option>
-            </select>
-          </label>
-          <label style="display:flex;align-items:center;gap:${r}${this.#e==="radial"?";opacity:0.4;pointer-events:none":""}">
-            Angle
-            <input type="range" class="gb-angle" min="0" max="360" value="${this.#o}" style="width:8rem;accent-color:var(--color-interactive,oklch(55% .2 260))">
-            <span class="gb-angle-value" style="min-width:2.5em;font-family:${h};font-size:${u}">${this.#o}\xB0</span>
-          </label>
-        </div>
-        <label style="display:inline-flex;align-items:center;gap:${r}">
-          Color Space
-          <select class="gb-space" style="${w}">
-            <option value="oklab"${this.#s==="oklab"?" selected":""}>oklab</option>
-            <option value="oklch"${this.#s==="oklch"?" selected":""}>oklch</option>
-            <option value="srgb"${this.#s==="srgb"?" selected":""}>sRGB</option>
-          </select>
-        </label>
-      </div>`);let q=[...this.#t].map((c,d)=>({...c,origIndex:d})).sort((c,d)=>c.position-d.position).map(c=>{let d=c.origIndex;return`<div style="display:flex;align-items:center;gap:0.375rem" data-stop="${d}">
-        <input type="color" value="${c.color}" class="gb-stop-color" data-i="${d}"
-          style="width:1.75rem;height:1.75rem;padding:0;border:1px solid ${l};border-radius:4px;cursor:pointer;flex-shrink:0">
-        <input type="range" min="0" max="100" value="${c.position}" class="gb-stop-pos-range" data-i="${d}"
-          style="flex:1;min-width:3rem;max-width:8rem;accent-color:${c.color}">
-        <span style="font-family:${h};font-size:${u};min-width:2.5em;text-align:right" class="gb-stop-pos-label" data-i="${d}">${c.position}%</span>
-        ${this.#t.length>2?`<button type="button" class="gb-remove" data-i="${d}"
-          style="all:unset;cursor:pointer;font-size:1rem;color:${f};padding:0 0.25rem" title="Remove stop">&times;</button>`:""}
-      </div>`}).join(""),O=`<button type="button" class="gb-add"
-      style="all:unset;cursor:pointer;font-size:${b};color:var(--color-interactive,oklch(55% .2 260));font-weight:600">+ Add Stop</button>`;this.innerHTML=`
-      <div style="display:flex;flex-direction:column;gap:${n}">
-        ${L}
-        ${S}
-        <div style="display:flex;flex-direction:column;gap:${r}">
-          <span style="font-size:${u};font-weight:600;color:${f};text-transform:uppercase;letter-spacing:0.05em">Color Stops</span>
-          ${q}
-          ${O}
-        </div>
-        <div style="display:flex;flex-direction:column;gap:${r}">
-          <span style="font-size:${u};font-weight:600;color:${f};text-transform:uppercase;letter-spacing:0.05em">Code</span>
-          <div style="display:flex;align-items:start;gap:${r}">
-            <div style="flex:1;font-family:${h};font-size:${u};padding:${i};background:var(--color-surface-raised,#f5f5f5);border-radius:${a};word-break:break-all;color:var(--color-text,#222)" class="gb-css-output">${e}</div>
-            ${s?`<button type="button" class="gb-copy"
-              style="all:unset;cursor:pointer;font-size:${u};padding:0.35rem 0.75rem;border:1px solid ${l};border-radius:4px;background:${E};white-space:nowrap;flex-shrink:0">Copy CSS</button>`:""}
-          </div>
-        </div>
-      </div>
-    `,this.#a()}#a(){this.querySelector(".gb-type")?.addEventListener("change",e=>{let n=e.target;this.#e=n.value,this.#n(),this.#i()});let s=this.querySelector(".gb-angle"),o=this.querySelector(".gb-angle-value");s?.addEventListener("input",e=>{let n=e.target;this.#o=Number(n.value),o&&(o.textContent=`${this.#o}\xB0`);let i=this.querySelector(".gb-preview");i&&(i.style.background=this.css),this.#i()}),this.querySelector(".gb-space")?.addEventListener("change",e=>{let n=e.target;this.#s=n.value,this.#n(),this.#i()}),this.querySelectorAll(".gb-stop-color").forEach(e=>{e.addEventListener("input",n=>{let i=n.target,r=Number(i.dataset.i);this.#t[r].color=i.value,this.#r(),this.#i()})}),this.querySelectorAll(".gb-stop-pos-range").forEach(e=>{e.addEventListener("input",n=>{let i=n.target,r=Number(i.dataset.i),a=Math.max(0,Math.min(100,Number(i.value)||0));this.#t[r].position=a;let l=this.querySelector(`.gb-stop-pos-label[data-i="${r}"]`);l&&(l.textContent=`${a}%`),this.#r(),this.#i()})}),this.querySelectorAll(".gb-remove").forEach(e=>{e.addEventListener("click",n=>{let i=n.target,r=Number(i.dataset.i);this.#t.splice(r,1),this.#n(),this.#i()})}),this.querySelector(".gb-add")?.addEventListener("click",()=>{let e=this.#t[this.#t.length-1],n=this.#t[this.#t.length-2],i=Math.round((n.position+e.position)/2);this.#t.splice(this.#t.length-1,0,{color:"#888888",position:i}),this.#n(),this.#i()}),this.querySelector(".gb-copy")?.addEventListener("click",e=>{let n=e.target;n&&v(this.css,{button:n,announceMessage:"Gradient CSS copied"})})}#r(){let s=this.css,o=this.querySelector(".gb-preview");o&&(o.style.background=s);let e=this.querySelector(".gb-css-output");e&&(e.textContent=s)}#i(){this.dispatchEvent(new CustomEvent("gradient-builder:change",{bubbles:!0,detail:{css:this.css,stops:[...this.#t],type:this.#e,angle:this.#o,interpolation:this.#s}}))}};k("gradient-builder",x);export{x as GradientBuilder};
-//# sourceMappingURL=gradient-builder.js.map

package/dist/cdn/components/impact-effort.js

@@ -1,2 +0,0 @@
-var S=window.matchMedia("(prefers-reduced-motion: reduce)");var y=new Map;function w(n,r,i={}){let e=i.priority??10,a={impl:r,bundle:i.bundle,contract:i.contract,priority:e},t=y.get(n);if(customElements.get(n)){if(!t||t.priority>=e){t&&t.priority===e&&t.impl!==r&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${t.bundle}" (priority ${t.priority}). Skipping "${i.bundle}".`);return}console.warn(`[VB Bundle] Tag <${n}> defined by "${t.bundle}" cannot be replaced (customElements.define is permanent). "${i.bundle}" has higher priority but arrived late.`);return}if(t&&t.priority>=e){t.priority===e&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${t.bundle}". Skipping "${i.bundle}" (first wins at equal priority).`);return}y.set(n,a),customElements.define(n,r)}var g=class extends HTMLElement{#i=[];#e;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 r of this.#i)r();this.#i=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(r,i,e,a){r.addEventListener(i,e,a),this.#i.push(()=>r.removeEventListener(i,e,a))}setup(){}teardown(){}setState(r,i){this.#e||(this.#e=this.attachInternals());let e=this.#e.states;try{i?e.add(r):e.delete(r)}catch{let a=`--${r}`;i?e.add(a):e.delete(a)}}_adoptInternals(r){this.#e||(this.#e=r)}};var C=0;function v(n,r,i="vb-vt"){if(!n?.isConnected||typeof document>"u"||!("startViewTransition"in document)||matchMedia("(prefers-reduced-motion: reduce)").matches)return r(),null;let e=`${i}-${++C}`;n.style.viewTransitionName=e;let a=document.startViewTransition(r);return a.finished.finally(()=>{n.style.viewTransitionName===e&&(n.style.viewTransitionName="")}),a}function q({newItems:n,nodes:r,keyOf:i,renderItem:e,containerFor:a}){let t=[],u=[],f=[],m=new Set;for(let s of n)m.add(i(s));for(let[s,c]of[...r])m.has(s)||(c.remove(),r.delete(s),f.push(s));let o=new Map;for(let s of n){let c=i(s),d=r.get(c)||null,l=a(s,d);o.has(l)||o.set(l,[]),o.get(l)?.push({item:s,key:c,existing:d})}for(let[s,c]of o)for(let d=0;d<c.length;d++){let{item:l,key:h,existing:b}=c[d],p=b;p?(p.parentElement!==s||s.children[d]!==p)&&u.push(h):(p=e(l),r.set(h,p),t.push(h));let E=s.children[d];E!==p&&s.insertBefore(p,E||null)}return{added:t,moved:u,removed:f}}var A=class n extends g{static QUADRANTS=["quick-wins","big-bets","fill-ins","money-pit"];static LABELS={"quick-wins":"Quick Wins","big-bets":"Big Bets","fill-ins":"Fill-Ins","money-pit":"Money Pit"};static DESCRIPTIONS={"quick-wins":"High impact \xB7 Low effort","big-bets":"High impact \xB7 High effort","fill-ins":"Low impact \xB7 Low effort","money-pit":"Low impact \xB7 High effort"};static#i=0;static get observedAttributes(){return["src","compact","title"]}#e=null;#t={};#r=null;#a="";#s=null;setup(){this.#a=`ie-${++n.#i}`;let r=[...this.querySelectorAll(":scope > [data-quadrant], :scope > [draggable]")],i=document.createElement("div");i.className="ie-wrapper";let e=document.createElement("div");e.className="ie-y-label",e.setAttribute("aria-hidden","true"),e.textContent="Impact \u2191";let a=document.createElement("div");a.style.cssText="display:flex;flex-direction:column;flex:1;min-width:0;";let t=document.createElement("div");t.className="ie-grid",t.setAttribute("role","region"),t.setAttribute("aria-label","Impact-Effort prioritization matrix");let u=document.createElement("div");u.className="ie-x-label",u.setAttribute("aria-hidden","true"),u.textContent="Effort \u2192";for(let s of n.QUADRANTS){let c=document.createElement("section");c.className="ie-quadrant",c.dataset.quadrantZone=s,c.setAttribute("aria-label",`${n.LABELS[s]}: ${n.DESCRIPTIONS[s]}`);let d=document.createElement("header");d.className="ie-quadrant-label",d.innerHTML=`${n.LABELS[s]}<br><span class="ie-quadrant-desc">${n.DESCRIPTIONS[s]}</span>`;let l=document.createElement("drag-surface");l.setAttribute("group",this.#a),l.setAttribute("aria-label",n.LABELS[s]),l.setAttribute("data-layout","stack"),l.setAttribute("data-layout-gap","xs"),c.appendChild(d),c.appendChild(l),t.appendChild(c),this.#t[s]=l}r.forEach((s,c)=>{let d=s,l=d.getAttribute("data-quadrant")||"quick-wins",h=this.#t[l]||this.#t["quick-wins"];d.hasAttribute("draggable")||d.setAttribute("draggable","true"),d.hasAttribute("data-id")||(d.dataset.id=`ie-item-${c}`),h.appendChild(d)});let f=document.createElement("div");f.className="ie-live-region",f.setAttribute("role","status"),f.setAttribute("aria-live","polite"),f.setAttribute("aria-atomic","true");let m=this.getAttribute("title");if(m){let s=document.createElement("h3");s.className="ie-title",s.textContent=m,this.prepend(s)}a.appendChild(t),a.appendChild(u),i.appendChild(e),i.appendChild(a),this.appendChild(i),this.appendChild(f),this.#e=t,this.#r=f,this.#s=i,this.listen(this,"drag-surface:transfer",s=>{let{item:c,fromSurface:d,toSurface:l}=s.detail,h=this.#d(d),b=this.#d(l);!h||!b||(c.setAttribute("data-quadrant",b),this.#l(`Moved ${this.#f(c)} to ${n.LABELS[b]}`),this.dispatchEvent(new CustomEvent("impact-effort:move",{bubbles:!0,detail:{itemId:c.dataset.id,from:h,to:b,item:c}})))});let o=this.getAttribute("src");o&&this.#c(o),this.#u()}teardown(){this.#s&&(this.#s.remove(),this.#s=null),this.#r&&(this.#r.remove(),this.#r=null),this.#e=null,this.#t={},this.#o.clear(),this.#n=[]}#n=[];#o=new Map;get items(){if(this.#n.length)return this.#n;let r=[];for(let[i,e]of Object.entries(this.#t))for(let a of e.querySelectorAll(':scope > [draggable="true"]'))r.push({id:a.getAttribute("data-id")||void 0,quadrant:i,text:a.textContent?.trim()||void 0});return r}set items(r){if(!this.#e)return;let i=Array.isArray(r)?r:[];q({newItems:i,nodes:this.#o,keyOf:e=>e.id??`${e.quadrant}:${e.text}`,renderItem:e=>{let a=this;if(typeof a.renderItem=="function"){let u=a.renderItem(e);if(u instanceof Element)return u.hasAttribute("draggable")||u.setAttribute("draggable","true"),u.hasAttribute("data-id")||u.setAttribute("data-id",String(e.id??"")),u}let t=document.createElement("article");return t.className="ie-card",t.setAttribute("draggable","true"),e.id&&t.setAttribute("data-id",String(e.id)),t.textContent=e.text||e.id||"",t},containerFor:e=>this.#t[e.quadrant]||this.#t["quick-wins"]}),this.#n=i,this.dispatchEvent(new CustomEvent("impact-effort:items-changed",{detail:{items:i,source:"property"},bubbles:!0}))}attributeChangedCallback(r,i,e){this.hasAttribute("data-upgraded")&&r==="src"&&e&&e!==i&&this.#c(e)}async#c(r){try{let i=await fetch(r);if(!i.ok)throw new Error(`HTTP ${i.status}`);let e=await i.json();if(!Array.isArray(e))return;let a=()=>{for(let t of n.QUADRANTS){let u=this.#t[t];if(u)for(let f of[...u.querySelectorAll("[draggable]")])f.remove()}e.forEach((t,u)=>{let f=t.quadrant||"quick-wins",m=t.id||`ie-item-${u}`,o;t.persona||t.action||t.storyId?(o=document.createElement("user-story"),o.setAttribute("detail","minimal"),t.storyId&&o.setAttribute("story-id",t.storyId),t.persona&&o.setAttribute("persona",t.persona),t.action&&o.setAttribute("action",t.action),t.benefit&&o.setAttribute("benefit",t.benefit),t.priority&&o.setAttribute("priority",t.priority),t.status&&o.setAttribute("status",t.status),t.points&&o.setAttribute("points",String(t.points))):(o=document.createElement("article"),o.textContent=t.label||t.text||""),o.setAttribute("draggable","true"),o.dataset.id=m,o.dataset.quadrant=f,(this.#t[f]||this.#t["quick-wins"]).appendChild(o)})};this.hasAttribute("data-upgraded")&&this.#e?v(this,a,"ie-vt"):a(),this.#u()}catch(i){console.warn(`[impact-effort] Failed to load src="${r}":`,i)}}#d(r){for(let[i,e]of Object.entries(this.#t))if(e===r)return i;return null}#l(r){let i=this.#r;i&&(i.textContent="",requestAnimationFrame(()=>{i.textContent=r}))}#f(r){return r.dataset.id||r.textContent.trim().slice(0,40)}#u(){let r={};for(let i of n.QUADRANTS){let e=this.#t[i];r[i]=e?e.querySelectorAll('[draggable="true"]').length:0}this.dispatchEvent(new CustomEvent("impact-effort:ready",{bubbles:!0,detail:{quadrantCounts:r}}))}};w("impact-effort",A);export{A as ImpactEffort};
-//# sourceMappingURL=impact-effort.js.map

package/dist/cdn/components/iron-triangle.js

@@ -1,2 +0,0 @@
-var E=class extends HTMLElement{#i=[];#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.#i)t();this.#i=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,i,r){t.addEventListener(e,i,r),this.#i.push(()=>t.removeEventListener(e,i,r))}setup(){}teardown(){}setState(t,e){this.#t||(this.#t=this.attachInternals());let i=this.#t.states;try{e?i.add(t):i.delete(t)}catch{let r=`--${t}`;e?i.add(r):i.delete(r)}}_adoptInternals(t){this.#t||(this.#t=t)}};var X=window.matchMedia("(prefers-reduced-motion: reduce)");var $=new Map;function C(n,t,e={}){let i=e.priority??10,r={impl:t,bundle:e.bundle,contract:e.contract,priority:i},s=$.get(n);if(customElements.get(n)){if(!s||s.priority>=i){s&&s.priority===i&&s.impl!==t&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${n}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=i){s.priority===i&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${s.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}$.set(n,r),customElements.define(n,t)}function N(n,t,e){let i=g(n?.sprintCount)>0?g(n.sprintCount)*(g(n.sprintWeeks)||1):g(n?.sprintWeeks),r=g(t?.teamFTE),s=L(g(e),0,1);return!(i>0)||!(r>0)||!(s>0)?0:Math.ceil(i*r*s)}function D(n){let t=2166136261;for(let e=0;e<n.length;e++)t^=n.charCodeAt(e),t=Math.imul(t,16777619);return(t>>>0).toString(36)}function x(n){return n===null||typeof n!="object"?JSON.stringify(n):Array.isArray(n)?"["+n.map(x).join(",")+"]":"{"+Object.keys(n).sort().map(e=>JSON.stringify(e)+":"+x(n[e])).join(",")+"}"}function T({time:n,cost:t,scope:e}){return D(x({time:n||{},cost:t||{},scope:e||{}}))}function g(n){if(n===""||n==null)return 0;let t=Number(n);return Number.isFinite(t)?t:0}function L(n,t,e){return Math.max(t,Math.min(e,n))}function P({time:n={},cost:t={},scope:e={}}={}){return{t:f(n.sprintCount,1)*f(n.sprintWeeks,1),c:f(t.teamFTE,0)*f(t.hoursPerWeek,40),s:f(e.mustHaveCount,0)+.5*f(e.shouldHaveCount,0)}}function O(n){let t=[n.t,n.c,n.s].filter(r=>r>0);if(t.length===0)return{time:1,cost:1,scope:1};let e=Math.max(...t),i=r=>r<=0?.55:.55+(1.45-.55)*(r/e);return{time:i(n.t),cost:i(n.c),scope:i(n.s)}}function k(n,t=80){let e={scope:-Math.PI/2,time:5*Math.PI/6,cost:Math.PI/6},i=O(P(n)),r=s=>({x:Math.cos(e[s])*t*i[s],y:Math.sin(e[s])*t*i[s],factor:i[s]});return{scope:r("scope"),time:r("time"),cost:r("cost")}}function H(n={}){let t=f(n.sprintCount,0),e=f(n.sprintWeeks,0);if(t>0&&e>0){let i=t*e;return t>1?`${i} weeks (${t} \xD7 ${e}wk)`:`${i} week${i===1?"":"s"}`}return e>0?`${e} week${e===1?"":"s"}`:n.deadline?`until ${n.deadline}`:"TBD"}function _(n={}){let t=Number(n.teamFTE),e=n.budgetTier,i=[];return Number.isFinite(t)&&t>0&&i.push(`${t} FTE`),e&&e!=="unset"&&i.push(e),i.length>0?i.join(" \xB7 "):"TBD"}function B(n={}){let t=f(n.mustHaveCount,0),e=f(n.shouldHaveCount,0);return t>0&&e>0?`${t} must \xB7 ${e} should`:t>0?`${t} must-have`:e>0?`${e} should-have`:"TBD"}function M(n){return typeof n=="string"&&n.trim().length>0?n:"TBD \u2014 click to set"}var l="http://www.w3.org/2000/svg",I={scope:{dx:0,dy:-22,anchor:"middle"},time:{dx:-10,dy:14,anchor:"end"},cost:{dx:10,dy:14,anchor:"start"}},j={scope:{dx:0,dy:-8,anchor:"middle"},time:{dx:-10,dy:28,anchor:"end"},cost:{dx:10,dy:28,anchor:"start"}},W={scope:{name:"Scope",unit:"# features / story points"},time:{name:"Time",unit:"hours / days / weeks"},cost:{name:"Cost",unit:"FTE / $"}};function F({value:n={},vertices:t,capacityPoints:e=0,capacitySource:i="formula",qualitySummary:r=""}={}){let s=t||k(n),o=document.createElementNS(l,"svg");o.setAttribute("viewBox","-220 -170 440 340"),o.setAttribute("role","group"),o.setAttribute("aria-label",`Project shape: ${e||0} capacity points. Click each corner to edit, or the center to open the quality compass.`);let c=document.createElementNS(l,"polygon");c.setAttribute("class","triangle"),c.setAttribute("points",[`${h(s.scope.x)},${h(s.scope.y)}`,`${h(s.time.x)},${h(s.time.y)}`,`${h(s.cost.x)},${h(s.cost.y)}`].join(" ")),o.append(c);let a=document.createElementNS(l,"g");a.setAttribute("class","center"),a.setAttribute("data-target","quality"),a.setAttribute("tabindex","0"),a.setAttribute("role","button"),a.setAttribute("aria-label",`Quality \u2014 ${M(r)}. Activate to open the NFR compass.`);let u=document.createElementNS(l,"circle");u.setAttribute("class","capacity-backdrop"),u.setAttribute("cx","0"),u.setAttribute("cy","4"),u.setAttribute("r","32"),a.append(u);let p=document.createElementNS(l,"rect");p.setAttribute("class","hit"),p.setAttribute("x","-36"),p.setAttribute("y","-30"),p.setAttribute("width","72"),p.setAttribute("height","68"),p.setAttribute("rx","34"),a.append(p);let m=document.createElementNS(l,"text");m.setAttribute("class","quality-label"),m.setAttribute("x","0"),m.setAttribute("y","-15"),m.setAttribute("text-anchor","middle"),m.textContent="Quality",a.append(m);let y=document.createElementNS(l,"text");y.setAttribute("class","capacity"),y.setAttribute("x","0"),y.setAttribute("y","7"),y.setAttribute("text-anchor","middle"),y.setAttribute("dominant-baseline","middle"),y.textContent=e>0?String(e):"\u2014",a.append(y);let d=document.createElementNS(l,"text");d.setAttribute("class","capacity-unit"),d.setAttribute("x","0"),d.setAttribute("y","26"),d.setAttribute("text-anchor","middle"),d.textContent=i==="manual"?"pts (manual)":"pts",a.append(d);let b=document.createElementNS(l,"title");b.textContent=M(r),a.append(b),o.append(a);for(let S of["scope","time","cost"])o.append(R(S,s[S],n));return o}function R(n,t,e){let i=I[n],r=j[n],s=W[n],o=n==="scope"?B(e.scope):n==="cost"?_(e.cost):H(e.time),c=document.createElementNS(l,"g");c.setAttribute("class","vertex"),c.setAttribute("data-axis",n),c.setAttribute("tabindex","0"),c.setAttribute("role","button"),c.setAttribute("aria-label",`${s.name} \u2014 ${o}. Activate to edit.`);let a=document.createElementNS(l,"rect");a.setAttribute("class","hit");let u=160,p=50,m;i.anchor==="end"?m=t.x-u+6:i.anchor==="start"?m=t.x-6:m=t.x-u/2;let y=n==="scope"?t.y-p+6:t.y-6;a.setAttribute("x",String(h(m))),a.setAttribute("y",String(h(y))),a.setAttribute("width",String(u)),a.setAttribute("height",String(p)),a.setAttribute("rx","6"),c.append(a);let d=document.createElementNS(l,"text");d.setAttribute("class","vertex-name"),d.setAttribute("x",String(h(t.x+i.dx))),d.setAttribute("y",String(h(t.y+i.dy))),d.setAttribute("text-anchor",i.anchor),d.textContent=s.name,c.append(d);let b=document.createElementNS(l,"text");b.setAttribute("class","vertex-summary"),b.setAttribute("x",String(h(t.x+r.dx))),b.setAttribute("y",String(h(t.y+r.dy))),b.setAttribute("text-anchor",r.anchor),b.textContent=o,c.append(b);let S=document.createElementNS(l,"title");return S.textContent=`${s.name}: ${o} \u2014 ${s.unit}`,c.append(S),c}function f(n,t){if(n===""||n==null)return t;let e=Number(n);return Number.isFinite(e)&&e>0?e:t}function h(n){return Math.round(n*100)/100}var A=["time","cost","scope"],v={time:[{key:"sprintWeeks",label:"Sprint length (weeks)",type:"number",min:1,step:1,value:2,width:"6rem"},{key:"sprintCount",label:"Number of sprints",type:"number",min:1,step:1,value:3,width:"6rem"},{key:"hoursPerWeek",label:"Hours per week (per FTE)",type:"number",min:1,max:168,step:1,value:40,width:"6rem"},{key:"deadline",label:"Deadline (optional)",type:"date",width:"12rem"}],cost:[{key:"teamFTE",label:"Team size (FTE)",type:"number",min:0,step:.5,value:1,width:"6rem"},{key:"budgetTier",label:"Budget tier",type:"select",options:[["solo","Solo"],["small","Small (2-5)"],["medium","Medium (6-15)"],["large","Large (16+)"]],value:"solo",width:"14rem"},{key:"contractorBudget",label:"Contractor budget ($, optional)",type:"number",min:0,step:100,width:"10rem"}],scope:[{key:"mustHaveCount",label:"Must-have feature count",type:"number",min:0,step:1,width:"6rem"},{key:"shouldHaveCount",label:"Should-have feature count",type:"number",min:0,step:1,width:"6rem"},{key:"scopeNotes",label:"Notes",type:"textarea",rows:3,maxlength:2e3}]},q={scope:"Scope",time:"Time",cost:"Cost"},w=class extends E{static formAssociated=!0;static get observedAttributes(){return["data-focus-factor","data-min-capacity","data-quality-href","data-quality-summary","disabled","locked"]}#i;#t={time:{},cost:{},scope:{},capacityPoints:0,capacitySource:"formula",hash:""};#n=null;#o=[];#s="";#r={};constructor(){super(),this.#i=this.attachInternals(),this._adoptInternals(this.#i)}setup(){this.#s=this.getAttribute("data-quality-summary")||"",this.#p(),this.#a(),this.listen(this,"click",t=>this.#l(t)),this.listen(this,"keydown",t=>this.#d(t))}attributeChangedCallback(t){this.isConnected&&(t==="data-focus-factor"||t==="data-min-capacity"?this.#e({source:"attribute"}):t==="data-quality-summary"?(this.#s=this.getAttribute("data-quality-summary")||"",this.#a()):(t==="disabled"||t==="locked")&&this.#b())}get value(){return JSON.parse(JSON.stringify({...this.#t,revisionLog:this.#o}))}set value(t){if(!(!t||typeof t!="object")){for(let e of A)t[e]&&typeof t[e]=="object"&&(this.#t[e]={...t[e]});t.capacitySource==="manual"&&Number.isFinite(t.capacityPoints)?(this.#n=t.capacityPoints,this.#t.capacitySource="manual"):(this.#n=null,this.#t.capacitySource="formula"),Array.isArray(t.revisionLog)&&(this.#o=[...t.revisionLog]),this.#u(),this.#e({source:"property"})}}get capacityPoints(){return this.#t.capacityPoints}get capacitySource(){return this.#t.capacitySource}get hash(){return this.#t.hash}get revisionLog(){return JSON.parse(JSON.stringify(this.#o))}get qualitySummary(){return this.#s}set qualitySummary(t){this.#s=String(t??""),this.#a()}openEditor(t){if(!A.includes(t))return;let e=this.#h(t);typeof e.showModal=="function"?e.showModal():e.setAttribute("open","")}revise(t,e,i){if(!t||typeof i!="string"||i.length<10)throw new Error("iron-triangle: revise() requires field and a reason of at least 10 characters");let r=this.#g(t);this.#S(t,e);let s={field:t,from:r,to:e,reason:i};this.#o.push({revisedAt:new Date().toISOString(),changes:[s]}),this.dispatchEvent(new CustomEvent("iron-triangle:revise",{bubbles:!0,composed:!0,detail:s})),this.#u(),this.#e({source:"revise"})}setManual(t){let e=Math.max(1,Math.floor(Number(t)||0));this.#n=e;let i=this.#t.capacitySource;this.#t.capacitySource="manual",i!=="manual"&&this.dispatchEvent(new CustomEvent("iron-triangle:mode",{bubbles:!0,composed:!0,detail:{from:i,to:"manual"}})),this.setState("manual",!0),this.setState("formula",!1),this.#e({source:"manual"})}setFormula(){this.#n=null;let t=this.#t.capacitySource;this.#t.capacitySource="formula",t!=="formula"&&this.dispatchEvent(new CustomEvent("iron-triangle:mode",{bubbles:!0,composed:!0,detail:{from:t,to:"formula"}})),this.setState("manual",!1),this.setState("formula",!0),this.#e({source:"formula"})}recalc(){this.#e({source:"recalc"})}#l(t){let e=t.target.closest?.(".vertex[data-axis]");if(e&&this.contains(e)){t.preventDefault(),this.openEditor(e.dataset.axis);return}let i=t.target.closest?.('.center[data-target="quality"]');i&&this.contains(i)&&(t.preventDefault(),this.#c())}#d(t){if(t.key!=="Enter"&&t.key!==" ")return;let e=t.target.closest?.(".vertex[data-axis]");if(e&&this.contains(e)){t.preventDefault(),this.openEditor(e.dataset.axis);return}let i=t.target.closest?.('.center[data-target="quality"]');i&&this.contains(i)&&(t.preventDefault(),this.#c())}#c(){let t=new CustomEvent("iron-triangle:open-quality",{bubbles:!0,composed:!0,cancelable:!0,detail:{qualitySummary:this.#s,capacityPoints:this.#t.capacityPoints}});if(this.dispatchEvent(t)){let i=this.getAttribute("data-quality-href");i&&window.location.assign(i)}}#h(t){if(this.#r[t])return this.#r[t];let e=document.createElement("dialog");e.className=`iron-triangle-dialog iron-triangle-dialog--${t}`,e.setAttribute("aria-label",`${q[t]} \u2014 edit`);let i=document.createElement("form");i.method="dialog",i.setAttribute("data-layout","stack"),i.setAttribute("data-layout-gap","m");let r=document.createElement("h3");r.textContent=q[t],i.append(r);for(let a of v[t])i.append(J(t,a,this.#t[t]?.[a.key]));let s=document.createElement("div");s.setAttribute("data-layout","cluster"),s.setAttribute("data-layout-gap","s"),s.setAttribute("data-layout-justify","end");let o=document.createElement("button");o.type="button",o.value="cancel",o.textContent="Cancel",o.addEventListener("click",()=>e.close("cancel"));let c=document.createElement("button");return c.type="submit",c.value="save",c.textContent="Save",s.append(o,c),i.append(s),e.append(i),this.append(e),this.#r[t]=e,i.addEventListener("submit",a=>{a.preventDefault(),this.#m(t,i),e.close("save"),this.#e({source:"dialog",field:t})}),e}#m(t,e){let i={};for(let r of v[t]){let s=e.querySelector(`[name="${t}.${r.key}"]`);if(!s)continue;let o=s.type==="checkbox"?s.checked:s.value;if(!(o===""||o==null))if(r.type==="number"){let c=Number(o);Number.isFinite(c)&&(i[r.key]=c)}else i[r.key]=o}this.#t[t]=i}#u(){for(let t of A){let e=this.#r[t];if(e)for(let i of v[t]){let r=e.querySelector(`[name="${t}.${i.key}"]`);if(!r)continue;let s=this.#t[t]?.[i.key];r.value=s==null?"":String(s)}}}#p(){for(let t of A)for(let e of v[t])e.value!==void 0&&this.#t[t][e.key]===void 0&&(this.#t[t][e.key]=e.value);this.#e({source:"init"})}#e({source:t,field:e}={}){let i=Number(this.dataset.focusFactor??.6),r=Number(this.dataset.minCapacity??1),s;this.#t.capacitySource==="manual"&&this.#n!=null?s=this.#n:s=N(this.#t.time,this.#t.cost,i),Number.isFinite(r)&&s>0&&s<r&&(s=r),this.#t.capacityPoints=s,this.#t.hash=T(this.#t),this.#a(),this.#f(),this.#y(),this.dispatchEvent(new CustomEvent("iron-triangle:change",{bubbles:!0,composed:!0,detail:{...this.value,source:t,field:e}}))}#a(){let t=F({value:this.#t,vertices:k(this.#t),capacityPoints:this.#t.capacityPoints,capacitySource:this.#t.capacitySource,qualitySummary:this.#s}),e=this.querySelector(":scope > svg");e?e.replaceWith(t):this.prepend(t),this.dataset.capacityPoints=String(this.#t.capacityPoints),this.dataset.capacitySource=this.#t.capacitySource}#f(){this.setState("formula",this.#t.capacitySource==="formula"),this.setState("manual",this.#t.capacitySource==="manual"),this.setState("unbudgeted",!(this.#t.capacityPoints>0));let t=this.#t.time?.deadline,e=!1;if(t){let i=new Date(t).getTime();Number.isFinite(i)&&(e=i<Date.now())}this.setState("over-deadline",e)}#y(){try{this.#i.setFormValue(JSON.stringify(this.value))}catch{}}#b(){let t=this.hasAttribute("disabled")||this.hasAttribute("locked");for(let e of Object.values(this.#r))for(let i of e.querySelectorAll("input, select, textarea, button"))i.disabled=t}#g(t){if(t==="capacityPoints")return this.#t.capacityPoints;let[e,i]=t.split(".");return e&&i?this.#t[e]?.[i]:void 0}#S(t,e){if(t==="capacityPoints"){this.setManual(e);return}let[i,r]=t.split(".");!i||!r||(this.#t[i]||(this.#t[i]={}),this.#t[i][r]=e)}};function J(n,t,e){let i=document.createElement("form-field"),r=`${n}-${t.key}`,s=document.createElement("label");s.setAttribute("for",r),s.textContent=t.label,i.append(s);let o;if(t.type==="select"){o=document.createElement("select");for(let[c,a]of t.options){let u=document.createElement("option");u.value=c,u.textContent=a,(e===c||e==null&&t.value===c)&&(u.selected=!0),o.append(u)}}else t.type==="textarea"?(o=document.createElement("textarea"),t.rows&&(o.rows=t.rows),t.maxlength&&(o.maxLength=t.maxlength),e!=null&&(o.value=String(e))):(o=document.createElement("input"),o.type=t.type,t.min!=null&&(o.min=String(t.min)),t.max!=null&&(o.max=String(t.max)),t.step!=null&&(o.step=String(t.step)),e!=null?o.value=String(e):t.value!=null&&(o.value=String(t.value)));return o.id=r,o.name=`${n}.${t.key}`,t.width&&(o.style.inlineSize=t.width),i.append(o),i}C("iron-triangle",w);export{w as IronTriangle};
-//# sourceMappingURL=iron-triangle.js.map

package/dist/cdn/components/kanban-board.js

@@ -1,2 +0,0 @@
-var I=window.matchMedia("(prefers-reduced-motion: reduce)");var E=new Map;function k(u,t,e={}){let i=e.priority??10,o={impl:t,bundle:e.bundle,contract:e.contract,priority:i},n=E.get(u);if(customElements.get(u)){if(!n||n.priority>=i){n&&n.priority===i&&n.impl!==t&&console.warn(`[VB Bundle] Tag <${u}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${u}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=i){n.priority===i&&console.warn(`[VB Bundle] Tag <${u}> already registered by "${n.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}E.set(u,o),customElements.define(u,t)}var y=class extends HTMLElement{#i=[];#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.#i)t();this.#i=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,i,o){t.addEventListener(e,i,o),this.#i.push(()=>t.removeEventListener(e,i,o))}setup(){}teardown(){}setState(t,e){this.#t||(this.#t=this.attachInternals());let i=this.#t.states;try{e?i.add(t):i.delete(t)}catch{let o=`--${t}`;e?i.add(o):i.delete(o)}}_adoptInternals(t){this.#t||(this.#t=t)}};function v({newItems:u,nodes:t,keyOf:e,renderItem:i,containerFor:o}){let n=[],s=[],r=[],a=new Set;for(let l of u)a.add(e(l));for(let[l,c]of[...t])a.has(l)||(c.remove(),t.delete(l),r.push(l));let d=new Map;for(let l of u){let c=e(l),h=t.get(c)||null,f=o(l,h);d.has(f)||d.set(f,[]),d.get(f)?.push({item:l,key:c,existing:h})}for(let[l,c]of d)for(let h=0;h<c.length;h++){let{item:f,key:b,existing:w}=c[h],m=w;m?(m.parentElement!==l||l.children[h]!==m)&&s.push(b):(m=i(f),t.set(b,m),n.push(b));let p=l.children[h];p!==m&&l.insertBefore(m,p||null)}return{added:n,moved:s,removed:r}}function x(u){let t=u;return class extends t{static keyOf(e){return e.id}#i=[];#t=new Map;get items(){return this.#i}set items(e){let i=e||[],o=v({newItems:i,nodes:this.#t,keyOf:this.constructor.keyOf,renderItem:n=>this._renderItem(n),containerFor:(n,s)=>this._containerFor(n,s)});this.#i=i,this._postRender({...o,items:i}),this._emit("items-changed",{items:i},"api")}_renderItem(e){throw new Error(`${this.constructor.name}: must implement _renderItem(item)`)}_containerFor(e,i){return this}_postRender(e){}_emit(e,i,o="api"){this.dispatchEvent(new CustomEvent(`${this.localName}:${e}`,{detail:{...i,source:o},bubbles:!0}))}_nodeFor(e){return this.#t.get(e)||null}_seedCollection(e,i){this.#i=e,this.#t.clear();for(let[o,n]of i)this.#t.set(o,n)}_setItemsSilently(e){this.#i=e}}}var S=0;function A(u,t,e="vb-vt"){if(!u?.isConnected||typeof document>"u"||!("startViewTransition"in document)||matchMedia("(prefers-reduced-motion: reduce)").matches)return t(),null;let i=`${e}-${++S}`;u.style.viewTransitionName=i;let o=document.startViewTransition(t);return o.finished.finally(()=>{u.style.viewTransitionName===i&&(u.style.viewTransitionName="")}),o}var C=class u extends x(y){static get observedAttributes(){return["src","compact","title"]}static keyOf(t){return t.id??t.storyId}static#i=0;#t=null;#n={};#r={};#e=null;#l="";#s=[];#o=null;setup(){this.#l=`kb-${++u.#i}`;let t=[...this.querySelectorAll(":scope > section[data-column]")];this.#s=t.map(n=>{let s=n.getAttribute("data-column")||"",a=n.getAttribute("data-column-label")||""||this.#d(s),d=n.getAttribute("data-wip"),l=d?parseInt(d,10):null,c=n.getAttribute("data-column-color")||null,h=[...n.children];return{id:s,label:a,wip:l,color:c,children:h}});for(let n of t)n.remove();this.#t=document.createElement("div"),this.#t.className="kb-columns",this.#t.setAttribute("role","region"),this.#t.setAttribute("aria-label","Kanban board");let e=0;for(let n of this.#s){let s=document.createElement("section");s.className="kb-column",s.setAttribute("data-column-id",n.id),n.color&&s.setAttribute("data-column-tint",n.color);let r=document.createElement("header");r.className="kb-column-header";let a=document.createElement("h3");a.textContent=n.label;let d=document.createElement("output");if(d.className="kb-count",d.textContent=String(n.children.length),a.appendChild(d),n.wip!==null&&!isNaN(n.wip)){let c=document.createElement("span");c.className="kb-wip",c.textContent=`/ ${n.wip}`,c.setAttribute("aria-label",`WIP limit ${n.wip}`),a.appendChild(c)}r.appendChild(a),s.appendChild(r);let l=document.createElement("drag-surface");if(l.setAttribute("group",this.#l),l.setAttribute("aria-label",`${n.label} items`),l.setAttribute("data-layout","stack"),l.setAttribute("data-layout-gap","xs"),n.children.length>0){for(let c of n.children)c.hasAttribute("draggable")||c.setAttribute("draggable","true"),c.hasAttribute("data-id")||(c.dataset.id=`kb-item-${e}`),l.appendChild(c);e+=n.children.length}else{let c=document.createElement("p");c.className="kb-empty",c.textContent="No items",l.appendChild(c)}s.appendChild(l),this.#t.appendChild(s),this.#n[n.id]=l,this.#r[n.id]=s,n.wip!==null&&n.children.length>n.wip&&s.setAttribute("data-wip-exceeded","")}let i=this.getAttribute("title");if(i){let n=document.createElement("h2");n.className="kb-title",n.textContent=i,this.appendChild(n)}this.appendChild(this.#t),this.#e=document.createElement("div"),this.#e.className="kb-live-region",this.#e.setAttribute("role","status"),this.#e.setAttribute("aria-live","polite"),this.#e.setAttribute("aria-atomic","true"),this.appendChild(this.#e),this.listen(this,"drag-surface:reorder",n=>{let s=n.detail,r=n.target.closest("drag-surface"),a=this.#c(r);a&&(this.#a(a),this.#u("drag"),this.dispatchEvent(new CustomEvent("kanban-board:reorder",{bubbles:!0,detail:{itemId:s.itemId,column:a,oldIndex:s.oldIndex,newIndex:s.newIndex}})))}),this.listen(this,"drag-surface:transfer",n=>{let s=n.detail,r=s.fromSurface,a=s.toSurface,d=this.#c(r),l=this.#c(a);if(!d||!l)return;s.item&&s.item.setAttribute("data-column",l),this.#a(d),this.#a(l);let c=a.querySelector(".kb-empty");if(c&&c.remove(),r.querySelectorAll(':scope > [draggable="true"]').length===0&&!r.querySelector(".kb-empty")){let g=document.createElement("p");g.className="kb-empty",g.textContent="No items",r.appendChild(g)}let f=this.#g(s.item),b=this.#h(d),w=this.#h(l);this.#b(`${f} moved from ${b} to ${w}`),this.#u("drag"),this.dispatchEvent(new CustomEvent("kanban-board:transfer",{bubbles:!0,detail:{itemId:s.itemId,fromColumn:d,toColumn:l,newIndex:s.newIndex,item:s.item}}));let m=a.querySelectorAll(':scope > [draggable="true"]').length,p=this.#s.find(g=>g.id===l);p?.wip!==null&&p?.wip!==void 0&&m>p.wip&&this.dispatchEvent(new CustomEvent("kanban-board:wip-exceeded",{bubbles:!0,detail:{column:l,limit:p.wip,count:m}}))}),this.#m();let o=this.getAttribute("src");if(o){this._loadSrc(o);return}this.dispatchEvent(new CustomEvent("kanban-board:ready",{bubbles:!0,detail:{columnCount:this.#s.length,itemCount:e}}))}#m(){let t=[],e=new Map;for(let[i,o]of Object.entries(this.#n)){let n=o.querySelectorAll(':scope > [draggable="true"]');for(let s of n){let r=s.getAttribute("data-id");r&&(t.push({id:r,column:i}),e.set(r,s))}}this._seedCollection(t,e)}#u(t){let e=[],i=new Map;for(let o of this.items){let n=String(o.id??o.storyId??"");n&&i.set(n,o)}for(let[o,n]of Object.entries(this.#n)){let s=n.querySelectorAll(':scope > [draggable="true"]');for(let r of s){let a=r.getAttribute("data-id");if(!a)continue;let d=i.get(a);e.push(d?{...d,column:o}:{id:a,column:o})}}this._setItemsSilently(e),this._emit("items-changed",{items:e},t)}teardown(){let t=this.querySelector(".kb-title");t&&t.remove(),this.#t&&(this.#t.remove(),this.#t=null),this.#e&&(this.#e.remove(),this.#e=null),this.#n={},this.#r={},this.#s=[]}get columns(){return this.#s.map(t=>({id:t.id,label:t.label,wip:t.wip??void 0,color:t.color??void 0}))}set columns(t){let e=(t||[]).map(s=>({id:s.id,label:s.label||this.#d(s.id),wip:s.wip??null,color:s.color??null,children:[]})),i=this.#t;this.#n={},this.#r={},this.#s=e;let o=this.#p();this.#t=o;let n=()=>{i&&i.remove(),this.appendChild(o)};this.hasAttribute("data-upgraded")&&i?A(this,n,"kb-vt"):n()}get renderItem(){return this.#o}set renderItem(t){this.#o=typeof t=="function"?t:null}_renderItem(t){let e;if(this.#o){let i=this.#o(t);if(!(i instanceof Element))throw new Error("kanban-board: renderItem must return an Element");e=i}else e=this.#f(t);return e.hasAttribute("draggable")||e.setAttribute("draggable","true"),e.hasAttribute("data-id")||e.setAttribute("data-id",String(u.keyOf(t))),e}_containerFor(t,e){let i=this.#n[t.column];if(!i)throw new Error(`kanban-board: no column "${t.column}" \u2014 set .columns first or include item.column matching an existing column id`);let o=i.querySelector(":scope > .kb-empty");return o&&o.remove(),i}_postRender(){for(let t of Object.keys(this.#n)){this.#a(t);let e=this.#n[t],i=e.querySelectorAll(':scope > [draggable="true"]'),o=e.querySelector(":scope > .kb-empty");if(i.length===0&&!o){let n=document.createElement("p");n.className="kb-empty",n.textContent="No items",e.appendChild(n)}else i.length>0&&o&&o.remove()}}#f(t){let e=customElements.get("work-item")?"work-item":"article",i=document.createElement(e);return e==="work-item"?i.data={itemId:t.id??t.storyId,type:t.type,priority:t.priority,status:t.status,estimate:t.estimate!=null?String(t.estimate):void 0,assignee:t.assignee,title:t.title,description:t.description,checklist:t.checklist,notes:t.notes,detail:t.detail}:(i.className="kb-card",i.textContent=t.title||t.label||t.id),i}#p(){let t=document.createElement("div");t.className="kb-columns",t.setAttribute("role","region"),t.setAttribute("aria-label","Kanban board");for(let e of this.#s){let i=document.createElement("section");i.className="kb-column",i.setAttribute("data-column-id",e.id),e.color&&i.setAttribute("data-column-tint",e.color);let o=document.createElement("header");o.className="kb-column-header";let n=document.createElement("h3");n.textContent=e.label;let s=document.createElement("output");if(s.className="kb-count",s.textContent="0",n.appendChild(s),e.wip!=null&&!isNaN(e.wip)){let d=document.createElement("span");d.className="kb-wip",d.textContent=`/ ${e.wip}`,d.setAttribute("aria-label",`WIP limit ${e.wip}`),n.appendChild(d)}o.appendChild(n),i.appendChild(o);let r=document.createElement("drag-surface");r.setAttribute("group",this.#l),r.setAttribute("aria-label",`${e.label} items`),r.setAttribute("data-layout","stack"),r.setAttribute("data-layout-gap","xs");let a=document.createElement("p");a.className="kb-empty",a.textContent="No items",r.appendChild(a),i.appendChild(r),t.appendChild(i),this.#n[e.id]=r,this.#r[e.id]=i}return t}attributeChangedCallback(t,e,i){e===i||!this.isConnected||t==="src"&&this._loadSrc(i)}async _loadSrc(t){if(t)try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let i=await e.json();for(;this.firstChild;)this.firstChild.remove();for(let n of i.columns||[]){let s=document.createElement("section");s.setAttribute("data-column",n.id),n.label&&s.setAttribute("data-column-label",n.label),n.wip!=null&&s.setAttribute("data-wip",String(n.wip)),n.color&&s.setAttribute("data-column-color",n.color);for(let r of n.items||[]){let a;r.persona||r.action||r.storyId?(a=document.createElement("user-story"),a.setAttribute("detail",r.detail||"minimal"),r.storyId&&a.setAttribute("story-id",r.storyId),r.persona&&a.setAttribute("persona",r.persona),r.action&&a.setAttribute("action",r.action),r.benefit&&a.setAttribute("benefit",r.benefit),r.priority&&a.setAttribute("priority",r.priority),r.status&&a.setAttribute("status",r.status),r.points&&a.setAttribute("points",String(r.points))):(a=document.createElement("article"),a.className="kb-card",a.textContent=r.text||r.label||""),a.setAttribute("draggable","true"),a.dataset.id=r.id||r.storyId||"",s.appendChild(a)}this.appendChild(s)}let o=()=>{this.teardown(),this.removeAttribute("data-upgraded"),this.setup()};this.hasAttribute("data-upgraded")&&this.#t?A(this,o,"kb-vt"):o()}catch(e){console.warn(`[kanban-board] Failed to load src="${t}":`,e)}}#c(t){if(!t)return null;for(let[e,i]of Object.entries(this.#n))if(i===t)return e;return null}#a(t){let e=this.#n[t],i=this.#r[t];if(!e||!i)return;let o=e.querySelectorAll(':scope > [draggable="true"]').length,n=i.querySelector(".kb-count");n&&(n.textContent=String(o));let s=this.#s.find(r=>r.id===t);s?.wip!==null&&s?.wip!==void 0&&(o>s.wip?i.setAttribute("data-wip-exceeded",""):i.removeAttribute("data-wip-exceeded"))}#h(t){return this.#s.find(i=>i.id===t)?.label||this.#d(t)}#b(t){this.#e&&(this.#e.textContent="",requestAnimationFrame(()=>{this.#e&&(this.#e.textContent=t)}))}#g(t){return t.getAttribute("story-id")||t.getAttribute("data-id")||t.textContent?.trim().slice(0,40)||"item"}#d(t){return t.replace(/[-_]/g," ").replace(/\b\w/g,e=>e.toUpperCase())}};k("kanban-board",C);export{C as KanbanBoard};
-//# sourceMappingURL=kanban-board.js.map

package/dist/cdn/components/layout-specimen.js

@@ -1,35 +0,0 @@
-var m=window.matchMedia("(prefers-reduced-motion: reduce)");var u=new Map;function p(i,t,n={}){let r=n.priority??10,o={impl:t,bundle:n.bundle,contract:n.contract,priority:r},s=u.get(i);if(customElements.get(i)){if(!s||s.priority>=r){s&&s.priority===r&&s.impl!==t&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${n.bundle}".`);return}console.warn(`[VB Bundle] Tag <${i}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${n.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=r){s.priority===r&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${s.bundle}". Skipping "${n.bundle}" (first wins at equal priority).`);return}u.set(i,o),customElements.define(i,t)}var l=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,n,r,o){t.addEventListener(n,r,o),this.#e.push(()=>t.removeEventListener(n,r,o))}setup(){}teardown(){}setState(t,n){this.#t||(this.#t=this.attachInternals());let r=this.#t.states;try{n?r.add(t):r.delete(t)}catch{let o=`--${t}`;n?r.add(o):r.delete(o)}}_adoptInternals(t){this.#t||(this.#t=t)}};var y=[{name:"layout-stack",desc:"Vertical stack with consistent gap between children.",snippet:`<layout-stack data-layout-gap="m">
-  <p>One</p>
-  <p>Two</p>
-  <p>Three</p>
-</layout-stack>`,render:()=>e("layout-stack",{"data-layout-gap":"s"},[a("One"),a("Two"),a("Three")])},{name:"layout-cluster",desc:"Horizontal cluster that wraps; for tag rows, button groups.",snippet:`<layout-cluster data-layout-gap="s">
-  <button>One</button> <button>Two</button> <button>Three</button>
-</layout-cluster>`,render:()=>e("layout-cluster",{"data-layout-gap":"s"},[d("One"),d("Two"),d("Three"),d("Four")])},{name:"layout-grid",desc:"Auto-fit responsive grid; columns flow based on min-item-size.",snippet:`<layout-grid data-layout-min="12rem">
-  <div>1</div> <div>2</div> <div>3</div> <div>4</div>
-</layout-grid>`,render:()=>e("layout-grid",{"data-layout-min":"6rem","data-layout-gap":"s"},[a("1"),a("2"),a("3"),a("4"),a("5"),a("6")])},{name:"layout-center",desc:"Center a block horizontally with optional max-width.",snippet:`<layout-center data-layout-max="readable">
-  <p>Centered prose.</p>
-</layout-center>`,render:()=>e("layout-center",{"data-layout-max":"narrow",style:"border: 1px dashed var(--color-border); padding: var(--size-2xs)"},[a("Centered")])},{name:"layout-cover",desc:"Vertical cover layout: optional header + main area + optional footer, with main filling available space.",snippet:`<layout-cover style="block-size: 12rem">
-  <header>Top</header>
-  <main>Center</main>
-  <footer>Bottom</footer>
-</layout-cover>`,render:()=>e("layout-cover",{style:"block-size: 9rem; border: 1px dashed var(--color-border); padding: var(--size-2xs)"},[e("header",{},[a("Top")]),e("main",{},[a("Center","main")]),e("footer",{},[a("Bottom")])])},{name:"layout-imposter",desc:"Absolute centering \u2014 child sits in the dead center of the parent.",snippet:`<div style="position:relative; block-size:8rem">
-  <layout-imposter><span>Centered</span></layout-imposter>
-</div>`,render:()=>e("div",{style:"position:relative; block-size: 6rem; border: 1px dashed var(--color-border)"},[e("layout-imposter",{},[a("Imposter")])])},{name:"layout-columns",desc:"Multi-column text layout (CSS columns); good for newspapery prose.",snippet:`<layout-columns data-layout-columns="3">
-  <p>Long prose flows across columns\u2026</p>
-</layout-columns>`,render:()=>e("layout-columns",{"data-layout-columns":"3"},[e("p",{style:"margin: 0; font-size: 0.85em"},["One two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen."])])},{name:"layout-card",desc:"Stack of header + body + actions with card chrome (border + padding).",snippet:`<layout-card>
-  <h3>Title</h3>
-  <p>Body text.</p>
-  <div data-layout-card-actions><button>OK</button></div>
-</layout-card>`,render:()=>e("layout-card",{},[e("h3",{style:"margin: 0; font-size: 0.9em"},["Card title"]),e("p",{style:"margin: 0; font-size: 0.85em"},["Card body content."])])},{name:"layout-canvas",desc:"Full-bleed canvas section that breaks the centered max-width.",snippet:`<layout-canvas>
-  <p>Edge-to-edge content.</p>
-</layout-canvas>`,render:()=>e("layout-canvas",{style:"background: var(--color-surface-sunken, oklch(94% 0 0)); padding: var(--size-2xs)"},[a("Full-bleed")])},{name:"layout-badge",desc:"Tiny inline badge / pill for inline labels.",snippet:"<layout-badge>NEW</layout-badge>",render:()=>e("layout-cluster",{"data-layout-gap":"xs"},[e("layout-badge",{},["NEW"]),e("layout-badge",{},["BETA"]),e("layout-badge",{},["v2.0"])])},{name:"layout-reel",desc:"Horizontal scrollable reel with snap points.",snippet:`<layout-reel>
-  <article>1</article> <article>2</article> <article>3</article>
-</layout-reel>`,render:()=>e("layout-reel",{},[a("1","reel"),a("2","reel"),a("3","reel"),a("4","reel"),a("5","reel"),a("6","reel")])},{name:"layout-sidebar",desc:"Sidebar + main split that collapses to a stack on narrow viewports.",snippet:`<layout-sidebar>
-  <aside>Side</aside>
-  <main>Main</main>
-</layout-sidebar>`,render:()=>e("layout-sidebar",{},[e("aside",{style:"background: var(--color-surface-sunken, oklch(94% 0 0)); padding: var(--size-2xs)"},["Side"]),e("main",{},[a("Main")])])},{name:"layout-switcher",desc:"Container that switches from a row to a stack at a configurable threshold.",snippet:`<layout-switcher data-layout-threshold="30rem">
-  <div>One</div> <div>Two</div>
-</layout-switcher>`,render:()=>e("layout-switcher",{"data-layout-threshold":"20rem"},[a("One"),a("Two")])},{name:"layout-text",desc:"Constrains line length to a readable measure (~60ch).",snippet:`<layout-text>
-  <p>Constrained-measure prose for comfortable reading.</p>
-</layout-text>`,render:()=>e("layout-text",{},[e("p",{style:"margin: 0; font-size: 0.85em"},["This paragraph is constrained to a comfortable reading measure (~60ch) regardless of the parent width."])])}];function e(i,t={},n=[]){let r=document.createElement(i);for(let[o,s]of Object.entries(t))s!=null&&(o==="style"?r.setAttribute("style",s):r.setAttribute(o,s===!0?"":String(s)));for(let o of n)typeof o=="string"?r.appendChild(document.createTextNode(o)):o&&r.appendChild(o);return r}function a(i,t){return e("div",{class:`ls-box${t?` ls-box-${t}`:""}`},[i])}function d(i){return e("span",{class:"ls-chip"},[i])}var c=class extends l{setup(){let t=this.getAttribute("data-only"),n=t?new Set(t.split(",").map(o=>o.trim())):null,r=y.filter(o=>!n||n.has(o.name)||n.has(o.name.replace(/^layout-/,"")));this.replaceChildren();for(let o of r)this.appendChild(this.#e(o))}#e(t){let n=e("section",{class:"ls-entry"}),r=e("header",{class:"ls-entry-head"},[e("h3",{class:"ls-entry-name"},[t.name]),e("p",{class:"ls-entry-desc"},[t.desc])]),o=e("div",{class:"ls-live"});o.appendChild(t.render());let s=e("pre",{class:"ls-snippet"},[e("code",{},[t.snippet])]);return n.append(r,o,s),n}};p("layout-specimen",c);export{c as LayoutSpecimen};
-//# sourceMappingURL=layout-specimen.js.map

package/dist/cdn/components/motion-specimen.js

@@ -1,21 +0,0 @@
-var w=window.matchMedia("(prefers-reduced-motion: reduce)");var m=new Map;function f(r,e,n={}){let t=n.priority??10,i={impl:e,bundle:n.bundle,contract:n.contract,priority:t},s=m.get(r);if(customElements.get(r)){if(!s||s.priority>=t){s&&s.priority===t&&s.impl!==e&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${n.bundle}".`);return}console.warn(`[VB Bundle] Tag <${r}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${n.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=t){s.priority===t&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${s.bundle}". Skipping "${n.bundle}" (first wins at equal priority).`);return}m.set(r,i),customElements.define(r,e)}var l=class extends HTMLElement{#t=[];#e;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,n,t,i){e.addEventListener(n,t,i),this.#t.push(()=>e.removeEventListener(n,t,i))}setup(){}teardown(){}setState(e,n){this.#e||(this.#e=this.attachInternals());let t=this.#e.states;try{n?t.add(e):t.delete(e)}catch{let i=`--${e}`;n?t.add(i):t.delete(i)}}_adoptInternals(e){this.#e||(this.#e=e)}};var g="1,2,3,4,5,in-1,in-2,in-3,out-1,out-2,out-3,out-4,out-5,elastic-1,elastic-2,squish-1,squish-2",v="instant,fast,normal,slow,slower",p="ms-keyframes",E=`
-@keyframes ms-slide { from { inset-inline-start: 0 } to { inset-inline-start: calc(100% - 1rem) } }
-@keyframes ms-fill { 0% { transform: scaleX(0) } 60% { transform: scaleX(1) } 100% { transform: scaleX(1); opacity: 0.3 } }
-@media (prefers-reduced-motion: reduce) {
-  motion-specimen .ms-dot { animation: none !important; inset-inline-start: calc(50% - 0.5rem) !important }
-  motion-specimen .ms-bar-fill { animation: none !important; transform: scaleX(0.6) !important; opacity: 0.6 !important }
-}
-`;function k(){if(typeof document>"u"||document.getElementById(p))return;let r=document.createElement("style");r.id=p,r.textContent=E,document.head.append(r)}var h="var(--font-mono, monospace)",b="var(--color-text-muted, #666)",y="var(--color-interactive, oklch(55% 0.2 260))",$="var(--color-surface-sunken, #f1f1f1)",d=class extends l{static observedAttributes=["type","tokens","prefix","duration","show-values","label"];setup(){k(),this.#t()}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&this.#t()}#t(){let e=this.getAttribute("type")||"easing",n=this.getAttribute("duration")||"1.2s",t=this.getAttribute("show-values")!=="false",i=this.getAttribute("label")||"",s="";i&&(s+=`<p style="font-weight:600;margin:0 0 var(--size-s,0.75rem)">${i}</p>`),(e==="easing"||e==="both")&&(s+=this.#r(n,t)),(e==="duration"||e==="both")&&(e==="both"&&(s+='<div aria-hidden="true" style="block-size:var(--size-m,1rem)"></div>'),s+=this.#o(t)),this.innerHTML=s,t&&requestAnimationFrame(()=>this.#a())}#e(){return"display:grid;grid-template-columns:5rem 1fr auto;align-items:center;gap:var(--size-s,0.75rem);min-block-size:1.75rem"}#s(){return`font-family:${h};font-size:var(--font-size-sm,0.875rem);color:${b};text-align:end`}#n(){return`font-family:${h};font-size:var(--font-size-xs,0.75rem);color:${b};font-variant-numeric:tabular-nums;white-space:nowrap`}#i(){return"list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--size-2xs,0.375rem)"}#r(e,n){let t=(this.getAttribute("tokens")||g).split(",").map(o=>o.trim()),i=this.getAttribute("prefix")||"--ease-",s=`position:relative;display:block;block-size:0.5rem;background:${$};border-radius:999px`,c=`position:absolute;inset-block-start:50%;inset-inline-start:0;inline-size:1rem;block-size:1rem;background:${y};border-radius:50%;transform:translateY(-50%)`,a=t.map(o=>{let u=`${i}${o}`;return`<li class="ms-row ms-row-ease" role="listitem" style="${this.#e()}">
-        <span style="${this.#s()}">${o}</span>
-        <span style="${s}" aria-hidden="true">
-          <span class="ms-dot" style="${c};animation: ms-slide ${e} var(${u}) infinite alternate"></span>
-        </span>
-        ${n?`<span class="ms-value" data-var="${u}" style="${this.#n()}"></span>`:""}
-      </li>`}).join("");return`<ul class="ms-list" role="list" aria-label="Easing scale" style="${this.#i()}">${a}</ul>`}#o(e){let n=(this.getAttribute("tokens")||v).split(",").map(a=>a.trim()),t=this.getAttribute("prefix")||"--duration-",i=`position:relative;display:block;block-size:0.5rem;background:${$};border-radius:999px;overflow:hidden`,s=`position:absolute;inset-block:0;inset-inline-start:0;inline-size:100%;background:${y};transform-origin:left center;animation-name:ms-fill;animation-iteration-count:infinite;animation-timing-function:linear`,c=n.map(a=>{let o=`${t}${a}`;return`<li class="ms-row ms-row-dur" role="listitem" style="${this.#e()}">
-        <span style="${this.#s()}">${a}</span>
-        <span style="${i}" aria-hidden="true">
-          <span class="ms-bar-fill" style="${s};animation-duration: var(${o})"></span>
-        </span>
-        ${e?`<span class="ms-value" data-var="${o}" style="${this.#n()}"></span>`:""}
-      </li>`}).join("");return`<ul class="ms-list" role="list" aria-label="Duration scale" style="${this.#i()}">${c}</ul>`}#a(){this.querySelectorAll(".ms-value").forEach(e=>{let n=e.getAttribute("data-var");if(!n)return;let t=getComputedStyle(this).getPropertyValue(n).trim();e.textContent=t||"\u2014"})}};f("motion-specimen",d);
-//# sourceMappingURL=motion-specimen.js.map

package/dist/cdn/components/palette-generator.js

@@ -1,15 +0,0 @@
-var et=window.matchMedia("(prefers-reduced-motion: reduce)");var $=new Map;function k(t,e,n={}){let o=n.priority??10,r={impl:e,bundle:n.bundle,contract:n.contract,priority:o},s=$.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 "${n.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${n.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 "${n.bundle}" (first wins at equal priority).`);return}$.set(t,r),customElements.define(t,e)}var b=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 e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,n,o,r){e.addEventListener(n,o,r),this.#e.push(()=>e.removeEventListener(n,o,r))}setup(){}teardown(){}setState(e,n){this.#t||(this.#t=this.attachInternals());let o=this.#t.states;try{n?o.add(e):o.delete(e)}catch{let r=`--${e}`;n?o.add(r):o.delete(r)}}_adoptInternals(e){this.#t||(this.#t=e)}};var w="[data-copy], [data-copy-target], [data-paste-target]",z="Copied to clipboard",R="Pasted from clipboard",E=new WeakMap;async function h(t,e={}){if(t==null||t==="")return!1;let{button:n,announceMessage:o=z,duration:r=1500}=e;try{await navigator.clipboard.writeText(t)}catch{return!1}return L({button:n,duration:r,announceMessage:o,eventDetail:{text:t}}),!0}function L({button:t,duration:e,announceMessage:n,eventDetail:o,state:r="copied",eventName:s="copy"}){if(t){t.dataset.state=r;let i=E.get(t);i&&clearTimeout(i),E.set(t,setTimeout(()=>{delete t.dataset.state,E.delete(t)},e)),t.dispatchEvent(new CustomEvent(s,{bubbles:!0,detail:o}))}U(n,t??document.body)}async function P(t,e={}){let{button:n,announceMessage:o=R,duration:r=1500}=e,s;try{s=await navigator.clipboard.readText()}catch{return null}return t&&("value"in t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement)?t.value=s:t.textContent=s,t.dispatchEvent(new Event("input",{bubbles:!0}))),L({button:n,duration:r,announceMessage:o,eventDetail:{text:s},state:"pasted",eventName:"paste"}),s}function N(t=document){t.querySelectorAll(w).forEach(T)}function T(t){t.hasAttribute("data-copy-init")||(t.setAttribute("data-copy-init",""),t.addEventListener("click",()=>{if(t.dataset.pasteTarget){let n=document.querySelector(t.dataset.pasteTarget);if(!n)return;P(n,{button:t});return}let e=F(t);e&&h(e,{button:t})}))}function F(t){if(t.dataset.copy)return t.dataset.copy;if(t.dataset.copyTarget){let e=document.querySelector(t.dataset.copyTarget);if(!e)return"";let n=t.dataset.copyAttr;return n?e.getAttribute(n)??"":e.textContent??""}return""}function U(t,e){let n=document.createElement("div");n.setAttribute("role","status"),n.setAttribute("aria-live","polite"),n.className="visually-hidden",n.textContent=t,e.appendChild(n),setTimeout(()=>n.remove(),1e3)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>N()):N();var j=new MutationObserver(t=>{for(let e of t)for(let n of e.addedNodes){if(n.nodeType!==Node.ELEMENT_NODE)continue;let o=n;o.matches(w)&&T(o),o.querySelectorAll(w).forEach(r=>T(r))}});j.observe(document.documentElement,{childList:!0,subtree:!0});function V(t,e,n){e/=100,n/=100;let o=i=>(i+t/30)%12,r=e*Math.min(n,1-n),s=i=>n-r*Math.max(-1,Math.min(o(i)-3,9-o(i),1));return{r:Math.round(s(0)*255),g:Math.round(s(8)*255),b:Math.round(s(4)*255)}}function K(t,e,n){t/=255,e/=255,n/=255;let o=Math.max(t,e,n),r=Math.min(t,e,n),s=(o+r)/2,i=0,l=0;if(o!==r){let u=o-r;switch(l=s>.5?u/(2-o-r):u/(o+r),o){case t:i=((e-n)/u+(e<n?6:0))/6;break;case e:i=((n-t)/u+2)/6;break;case n:i=((t-e)/u+4)/6;break}}return{h:Math.round(i*360),s:Math.round(l*100),l:Math.round(s*100)}}function M(t){t=t.replace(/^#/,""),t.length===3&&(t=t[0]+t[0]+t[1]+t[1]+t[2]+t[2]);let e=parseInt(t,16);return{r:e>>16&255,g:e>>8&255,b:e&255}}function W(t,e,n){return"#"+[t,e,n].map(o=>Math.max(0,Math.min(255,Math.round(o))).toString(16).padStart(2,"0")).join("")}function O(t){let{r:e,g:n,b:o}=M(t);return K(e,n,o)}function c(t,e,n){let{r:o,g:r,b:s}=V(t,e,n);return W(o,r,s)}var d=t=>(t%360+360)%360;function G(t,e,n){return{colors:[c(t,e,n),c(d(t+180),e,n)],names:["Base","Complement"]}}function J(t,e,n){return{colors:[c(d(t-30),e,n),c(t,e,n),c(d(t+30),e,n)],names:["Analog A","Base","Analog B"]}}function Q(t,e,n){return{colors:[c(t,e,n),c(d(t+120),e,n),c(d(t+240),e,n)],names:["Base","Triad A","Triad B"]}}function X(t,e,n){return{colors:[c(t,e,n),c(d(t+150),e,n),c(d(t+210),e,n)],names:["Base","Split A","Split B"]}}function Y(t,e,n){return{colors:[c(t,e,n),c(d(t+90),e,n),c(d(t+180),e,n),c(d(t+270),e,n)],names:["Base","Tetrad A","Tetrad B","Tetrad C"]}}var Z=[{label:"50",l:96},{label:"100",l:90},{label:"200",l:80},{label:"300",l:70},{label:"400",l:60},{label:"500",l:50},{label:"600",l:40},{label:"700",l:30},{label:"800",l:22},{label:"900",l:15},{label:"950",l:10}];function tt(t,e,n){let o=[],r=[];for(let s of Z){let i=s.l>85||s.l<20?Math.max(e*.6,5):e;o.push(c(t,Math.round(i),s.l)),r.push(s.label)}return{colors:o,names:r}}var B={complementary:G,analogous:J,triadic:Q,"split-complementary":X,tetradic:Y,monochromatic:tt};function q(t,e){let{h:n,s:o,l:r}=O(t);return(B[e]||B.complementary)(n,o,r)}var C=class extends b{static observedAttributes=["seed","harmony","include-seed","show-export","layout","size","show-values","show-names"];#e=null;#t="";#n=[];#o=[];setup(){this.#e=this.querySelector("color-picker")||this.querySelector('input[type="color"]'),this.#t=this.#i(),this.#t&&(this.#r(),this.#c(),this.#s())}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&(this.#t=this.#i(),this.#t&&this.#r())}#i(){if(this.#e){let e=this.#e;if(e.tagName==="COLOR-PICKER"){let n=e.value;return n&&n!=="#000000"?n:e.querySelector('input[type="color"]')?.value||n||""}return e.value||""}return this.getAttribute("seed")||""}#r(){let e=this.getAttribute("harmony")||"complementary",n=this.getAttribute("layout")||"inline",o=this.getAttribute("size")||"md",r=this.hasAttribute("show-values"),s=this.hasAttribute("show-names"),i=this.hasAttribute("show-export"),{colors:l,names:u}=q(this.#t,e);this.#n=l,this.#o=u;let y={sm:48,md:80,lg:120}[o]||80,x="display:flex;flex-wrap:wrap;gap:var(--size-xs,0.5rem)";n==="grid"?x=`display:grid;grid-template-columns:repeat(auto-fill,minmax(${y}px,1fr));gap:var(--size-xs,0.5rem)`:n==="list"&&(x="display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)");let D=l.map((a,v)=>{let m=u[v]||"",H=this.#u(a),I=n==="list"?"display:flex;flex-direction:row;align-items:center;gap:0.75rem":`display:flex;flex-direction:column;align-items:center;gap:0.25rem;max-inline-size:${y}px`,A=n==="list"?36:y,_=a.length>12?a.slice(0,12)+"\u2026":a;return`<div class="swatch-wrap" role="listitem" style="${I}">
-        <button type="button" class="color-box" data-index="${v}"
-          style="background:${a};color:${H};width:${A}px;height:${A}px;border:1px solid oklch(0% 0 0/0.15);border-radius:var(--radius-s,0.25rem);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:var(--font-mono,monospace);position:relative;overflow:hidden;flex-shrink:0"
-          title="Click to copy${m?": "+m:""}"
-          aria-label="${m||"Color "+(v+1)}: ${a}">
-          <span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${r?"1":"0"};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease">${_}</span>
-        </button>
-        ${s&&m?`<span style="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666);text-align:center;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${m}</span>`:""}
-      </div>`}).join(""),g="";i&&(g=`<div class="pg-export" role="toolbar" aria-label="Export palette" style="display:flex;gap:0.5rem;margin-block-start:var(--size-xs,0.5rem)">
-        <button type="button" class="pg-copy-hex" style="padding:0.25rem 0.75rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#333);cursor:pointer;font-size:var(--font-size-xs,0.75rem);font-family:inherit">Copy Hex</button>
-        <button type="button" class="pg-copy-css" style="padding:0.25rem 0.75rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#333);cursor:pointer;font-size:var(--font-size-xs,0.75rem);font-family:inherit">Copy CSS</button>
-      </div>`);let f=this.#e;for(let a of[...this.children])a!==f&&(a.classList?.contains("pg-seed-label")||a.remove());if(f&&!this.querySelector(".pg-seed-label")){let a=document.createElement("span");a.className="pg-seed-label",a.textContent="Seed Color",f.before(a)}let p=document.createElement("div");if(p.className=`palette ${n}`,p.setAttribute("role","list"),p.setAttribute("aria-label","Color palette"),p.style.cssText=x,p.innerHTML=D,f?f.after(p):this.prepend(p),g){let a=document.createElement("div");a.innerHTML=g,a.firstElementChild&&this.append(a.firstElementChild)}this.#a(p,l,u,r),i&&this.#l()}#a(e,n,o,r){e.querySelectorAll(".color-box").forEach(s=>{let i=s;r||(i.addEventListener("pointerenter",()=>{let l=i.querySelector(".color-value");l&&(l.style.opacity="1")}),i.addEventListener("pointerleave",()=>{let l=i.querySelector(".color-value");l&&(l.style.opacity="0")})),i.addEventListener("click",()=>{let l=Number(i.dataset.index),u=n[l],S=o[l]||"";h(u,{button:i,announceMessage:"Color copied"}),this.dispatchEvent(new CustomEvent("color-palette:select",{bubbles:!0,detail:{color:u,name:S,index:l}})),i.style.outline="3px solid currentColor",i.style.outlineOffset="2px",setTimeout(()=>{i.style.outline="",i.style.outlineOffset=""},600)})})}#c(){let e=this.#e;e&&(e.tagName==="COLOR-PICKER"?this.listen(e,"color-picker:change",n=>{this.#t=n.detail.hex,this.#r(),this.#s()}):this.listen(e,"input",()=>{this.#t=e.value,this.#r(),this.#s()}))}#l(){let e=this.querySelector(".pg-copy-hex"),n=this.querySelector(".pg-copy-css");e&&e.addEventListener("click",()=>{h(this.#n.join(", "),{button:e,announceMessage:"Hex values copied"})}),n&&n.addEventListener("click",()=>{let o=this.getAttribute("harmony")||"complementary",r=this.#d(o);h(r,{button:n,announceMessage:"CSS variables copied"})})}#u(e){if(e.startsWith("#")){let{r:n,g:o,b:r}=M(e);return .2126*(n/255)+.7152*(o/255)+.0722*(r/255)>.4?"#000":"#fff"}return"#000"}#d(e){return e==="monochromatic"?this.#n.map((n,o)=>`--color-seed-${this.#o[o]||o+1}: ${n};`).join(`
-`):this.#n.map((n,o)=>`--palette-${this.#o[o]?this.#o[o].toLowerCase().replace(/\s+/g,"-"):`${o+1}`}: ${n};`).join(`
-`)}#s(){let e=this.getAttribute("harmony")||"complementary";this.dispatchEvent(new CustomEvent("palette-generator:generate",{bubbles:!0,detail:{colors:[...this.#n],harmony:e,seed:this.#t}}))}};k("palette-generator",C);
-//# sourceMappingURL=palette-generator.js.map

package/dist/cdn/components/product-roadmap.js

@@ -1,3 +0,0 @@
-var y=window.matchMedia("(prefers-reduced-motion: reduce)");var g=new Map;function b(c,t,r={}){let e=r.priority??10,n={impl:t,bundle:r.bundle,contract:r.contract,priority:e},s=g.get(c);if(customElements.get(c)){if(!s||s.priority>=e){s&&s.priority===e&&s.impl!==t&&console.warn(`[VB Bundle] Tag <${c}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${r.bundle}".`);return}console.warn(`[VB Bundle] Tag <${c}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${r.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=e){s.priority===e&&console.warn(`[VB Bundle] Tag <${c}> already registered by "${s.bundle}". Skipping "${r.bundle}" (first wins at equal priority).`);return}g.set(c,n),customElements.define(c,t)}var m=class extends HTMLElement{#r=[];#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 t of this.#r)t();this.#r=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,r,e,n){t.addEventListener(r,e,n),this.#r.push(()=>t.removeEventListener(r,e,n))}setup(){}teardown(){}setState(t,r){this.#s||(this.#s=this.attachInternals());let e=this.#s.states;try{r?e.add(t):e.delete(t)}catch{let n=`--${t}`;r?e.add(n):e.delete(n)}}_adoptInternals(t){this.#s||(this.#s=t)}};var f=class c extends m{setup(){let t=this.getAttribute("start"),r=this.getAttribute("end");if(!t||!r)return console.warn("product-roadmap: start and end attributes required"),!1;let e=c.#l(t,"start"),n=c.#l(r,"end");if(!e||!n||n<=e)return console.warn("product-roadmap: invalid start/end",t,r),!1;this.#t=e,this.#a=n,this.#m=n.getTime()-e.getTime(),this.#f=this.getAttribute("view")==="month"?"month":"quarter",this.#u=this.hasAttribute("editable");let s=[...this.querySelectorAll(":scope > section[data-lane]")];return s.length?(this.#o=s,this.#r(),!0):(console.warn("product-roadmap: no <section data-lane> children found"),!1)}attributeChangedCallback(){this.isConnected&&this.#o.length&&this.#r()}#r(){[...this.children].forEach(n=>{this.#o.includes(n)||n.remove()}),this.#o.forEach(n=>{n.hidden=!0});let t=document.createElement("div");t.className="rm-wrapper";let r=this.#s();t.appendChild(r);let e=document.createElement("div");e.className="rm-lanes";for(let n of this.#o){let s=n.getAttribute("data-lane")||"",i=document.createElement("section");i.className="rm-lane",i.dataset.lane=s;let o=document.createElement("header");o.className="rm-lane-label",o.textContent=s,i.appendChild(o);let d=document.createElement("div");d.className="rm-track",d.dataset.lane=s;let a=[...n.querySelectorAll(":scope > article[data-start][data-end]")];for(let h of a){let u=this.#y(h,s);u&&d.appendChild(u)}this.#u&&(d.addEventListener("dragover",this.#v),d.addEventListener("drop",this.#F)),i.appendChild(d),e.appendChild(i)}if(t.appendChild(e),this.hasAttribute("today-marker")&&this.#t&&this.#a){let n=new Date;if(n>=this.#t&&n<=this.#a){let s=document.createElement("div");s.className="rm-today",s.style.setProperty("--rm-x",this.#e(n).toFixed(4)),s.title=`Today: ${c.#d(n)}`,e.appendChild(s)}}this.appendChild(t),this.#C=t}#s(){let t=document.createElement("header");t.className="rm-axis";let r=this.#x();for(let e of r){let n=document.createElement("div");n.className="rm-tick",n.style.setProperty("--rm-x",e.startFraction.toFixed(4)),n.style.setProperty("--rm-w",(e.endFraction-e.startFraction).toFixed(4)),n.textContent=e.label,t.appendChild(n)}return t}#y(t,r){let e=c.#l(t.getAttribute("data-start"),"start"),n=c.#l(t.getAttribute("data-end"),"end");if(!e||!n||!this.#t||!this.#a)return null;let s=e<this.#t?this.#t:e,i=n>this.#a?this.#a:n;if(s>=i)return null;let o=this.#e(s),d=this.#e(i)-o,a=document.createElement("article");a.className="rm-bar",a.style.setProperty("--rm-x",o.toFixed(4)),a.style.setProperty("--rm-w",d.toFixed(4)),a.dataset.lane=r,a.dataset.start=c.#d(e),a.dataset.end=c.#d(n),t.dataset.status&&(a.dataset.status=t.dataset.status),t.id&&(a.dataset.sourceId=t.id),this.#u&&a.setAttribute("draggable","true");let h=t.querySelector("h1, h2, h3, h4, h5, h6"),u=document.createElement("span");if(u.className="rm-bar-title",u.textContent=h?h.textContent.trim():(t.textContent||"").trim().split(`
-`)[0],a.appendChild(u),a.setAttribute("aria-label",`${u.textContent} \u2014 ${a.dataset.start} to ${a.dataset.end} in ${r}`),a.addEventListener("click",p=>{this.#n||this.dispatchEvent(new CustomEvent("product-roadmap:select",{bubbles:!0,detail:{initiative:t,lane:r,start:a.dataset.start,end:a.dataset.end,status:a.dataset.status||null}}))}),this.#u){let p=document.createElement("span");p.className="rm-bar-handle",p.setAttribute("aria-label","Resize end date"),a.appendChild(p),p.addEventListener("pointerdown",l=>this.#w(l,a,t)),a.addEventListener("pointerdown",l=>{l.target!==p&&this.#E(l,a,t)}),a.addEventListener("dragstart",l=>{l.dataTransfer&&(l.dataTransfer.effectAllowed="move",l.dataTransfer.setData("text/plain",t.id||a.dataset.sourceId||"")),this.#c=t,this.#g=r}),a.addEventListener("dragend",()=>{this.#c=null,this.#g=null})}return a}#E(t,r,e){if(t.button!==0)return;t.preventDefault();let n=r.parentElement.getBoundingClientRect(),s=t.clientX,i=parseFloat(r.style.getPropertyValue("--rm-x"))||0,o=parseFloat(r.style.getPropertyValue("--rm-w"))||0;this.#n={kind:"move",bar:r,initiative:e,trackRect:n,startX:s,startFraction:i,widthFraction:o},r.setPointerCapture(t.pointerId),r.addEventListener("pointermove",this.#h),r.addEventListener("pointerup",this.#i),r.addEventListener("pointercancel",this.#i)}#w(t,r,e){if(t.button!==0)return;t.preventDefault(),t.stopPropagation();let n=r.parentElement.getBoundingClientRect(),s=t.clientX,i=parseFloat(r.style.getPropertyValue("--rm-x"))||0,o=parseFloat(r.style.getPropertyValue("--rm-w"))||0;this.#n={kind:"resize",bar:r,initiative:e,trackRect:n,startX:s,startFraction:i,widthFraction:o},r.setPointerCapture(t.pointerId),r.addEventListener("pointermove",this.#h),r.addEventListener("pointerup",this.#i),r.addEventListener("pointercancel",this.#i)}#h=t=>{if(!this.#n)return;let{kind:r,bar:e,trackRect:n,startX:s,startFraction:i,widthFraction:o}=this.#n,d=(t.clientX-s)/n.width;if(r==="move"){let a=Math.max(0,Math.min(1-o,i+d));e.style.setProperty("--rm-x",a.toFixed(4))}else if(r==="resize"){let a=Math.max(.02,Math.min(1-i,o+d));e.style.setProperty("--rm-w",a.toFixed(4))}};#i=t=>{if(!this.#n)return;let{kind:r,bar:e,initiative:n}=this.#n;e.releasePointerCapture(t.pointerId),e.removeEventListener("pointermove",this.#h),e.removeEventListener("pointerup",this.#i),e.removeEventListener("pointercancel",this.#i);let s=parseFloat(e.style.getPropertyValue("--rm-x"))||0,i=parseFloat(e.style.getPropertyValue("--rm-w"))||0,o=this.#p(this.#b(s)),d=this.#p(this.#b(s+i));e.dataset.start=c.#d(o),e.dataset.end=c.#d(d);let a=this.#e(o),h=this.#e(d)-a;e.style.setProperty("--rm-x",a.toFixed(4)),e.style.setProperty("--rm-w",h.toFixed(4)),n&&(n.setAttribute("data-start",e.dataset.start??""),n.setAttribute("data-end",e.dataset.end??"")),this.dispatchEvent(new CustomEvent(r==="move"?"product-roadmap:reschedule":"product-roadmap:resize",{bubbles:!0,detail:{initiative:n,lane:e.dataset.lane,start:e.dataset.start,end:e.dataset.end}})),setTimeout(()=>{this.#n=null},0)};#v=t=>{this.#c&&(t.preventDefault(),t.dataTransfer.dropEffect="move")};#F=t=>{if(!this.#c)return;t.preventDefault();let r=t.currentTarget.dataset.lane,e=this.#c,n=this.#g;if(r===n)return;let s=this.#o.find(i=>i.getAttribute("data-lane")===r);s&&s.appendChild(e),this.dispatchEvent(new CustomEvent("product-roadmap:move",{bubbles:!0,detail:{initiative:e,fromLane:n,toLane:r,start:e.getAttribute("data-start"),end:e.getAttribute("data-end")}})),this.#r()};#e(t){if(!this.#t)return 0;let r=t.getTime()-this.#t.getTime();return Math.max(0,Math.min(1,r/this.#m))}#b(t){let r=this.#t??new Date;return new Date(r.getTime()+t*this.#m)}#p(t){if(this.#f==="month")return new Date(t.getFullYear(),t.getMonth(),1);let r=t.getMonth(),e=Math.floor(r/3)*3;return new Date(t.getFullYear(),e,1)}#x(){let t=[],r=this.#t,e=this.#a;if(!r||!e)return t;if(this.#f==="quarter"){let n=this.#p(r);for(;n<e;){let s=new Date(n.getFullYear(),n.getMonth()+3,1),i=this.#e(n<r?r:n),o=this.#e(s>e?e:s),d=Math.floor(n.getMonth()/3)+1;t.push({startFraction:i,endFraction:o,label:`Q${d} ${n.getFullYear()}`}),n=s}}else{let n=new Date(r.getFullYear(),r.getMonth(),1);for(;n<e;){let s=new Date(n.getFullYear(),n.getMonth()+1,1),i=this.#e(n<r?r:n),o=this.#e(s>e?e:s),d=n.toLocaleString(void 0,{month:"short"});t.push({startFraction:i,endFraction:o,label:`${d} ${n.getFullYear()}`}),n=s}}return t}static#l(t,r){if(!t)return null;let e=String(t).match(/^(\d{4})-Q([1-4])$/i);if(e){let i=Number(e[1]),d=(Number(e[2])-1)*3;return r==="end"?new Date(i,d+3,0):new Date(i,d,1)}let n=String(t).match(/^(\d{4})-(\d{2})-(\d{2})/);if(n)return new Date(Number(n[1]),Number(n[2])-1,Number(n[3]));let s=new Date(t);return isNaN(s.getTime())?null:s}static#d(t){let r=String(t.getMonth()+1).padStart(2,"0"),e=String(t.getDate()).padStart(2,"0");return`${t.getFullYear()}-${r}-${e}`}#t=null;#a=null;#m=0;#f="quarter";#u=!1;#o=[];#C=null;#n=null;#c=null;#g=null};b("product-roadmap",f);export{f as Roadmap};
-//# sourceMappingURL=product-roadmap.js.map

package/dist/cdn/components/quadrant-grid.js

@@ -1,3 +0,0 @@
-var M=window.matchMedia("(prefers-reduced-motion: reduce)");var w=new Map;function S(c,e,t={}){let s=t.priority??10,r={impl:e,bundle:t.bundle,contract:t.contract,priority:s},a=w.get(c);if(customElements.get(c)){if(!a||a.priority>=s){a&&a.priority===s&&a.impl!==e&&console.warn(`[VB Bundle] Tag <${c}> already registered by "${a.bundle}" (priority ${a.priority}). Skipping "${t.bundle}".`);return}console.warn(`[VB Bundle] Tag <${c}> defined by "${a.bundle}" cannot be replaced (customElements.define is permanent). "${t.bundle}" has higher priority but arrived late.`);return}if(a&&a.priority>=s){a.priority===s&&console.warn(`[VB Bundle] Tag <${c}> already registered by "${a.bundle}". Skipping "${t.bundle}" (first wins at equal priority).`);return}w.set(c,r),customElements.define(c,e)}var x=class extends HTMLElement{#s=[];#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 e of this.#s)e();this.#s=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,t,s,r){e.addEventListener(t,s,r),this.#s.push(()=>e.removeEventListener(t,s,r))}setup(){}teardown(){}setState(e,t){this.#t||(this.#t=this.attachInternals());let s=this.#t.states;try{t?s.add(e):s.delete(e)}catch{let r=`--${e}`;t?s.add(r):s.delete(r)}}_adoptInternals(e){this.#t||(this.#t=e)}};var C=class c extends x{static#s=0;setup(){this.#l=`qg-${++c.#s}`;let e=this.getAttribute("x-label")||"",t=this.getAttribute("y-label")||"",s=this.getAttribute("x-low")||"Low",r=this.getAttribute("x-high")||"High",a=this.getAttribute("y-low")||"Low",u=this.getAttribute("y-high")||"High",p=[this.getAttribute("q1-label")||"Q1",this.getAttribute("q2-label")||"Q2",this.getAttribute("q3-label")||"Q3",this.getAttribute("q4-label")||"Q4"],m=this.hasAttribute("draggable"),y=[...this.querySelectorAll(":scope > [data-quadrant], :scope > [data-x][data-y]")],n=document.createElement("section");n.className="qg-wrapper",n.setAttribute("role","region"),n.setAttribute("aria-label",`${t} \xD7 ${e} quadrant grid`);let o=document.createElement("header");o.className="qg-y-label",o.setAttribute("aria-hidden","true"),o.textContent=`\u2191 ${t}`;let b=document.createElement("aside");b.className="qg-y-scale",b.setAttribute("aria-hidden","true"),b.innerHTML=`<span>${u}</span><span>${a}</span>`;let g=document.createElement("div");g.className="qg-grid";let d=document.createElement("aside");d.className="qg-x-scale",d.setAttribute("aria-hidden","true"),d.innerHTML=`<span>${s}</span><span>${r}</span>`;let E=document.createElement("footer");E.className="qg-x-label",E.setAttribute("aria-hidden","true"),E.textContent=`${e} \u2192`;for(let h=0;h<4;h++){let f=document.createElement("section");f.className="qg-quadrant",f.dataset.quadrantZone=String(h),f.setAttribute("aria-label",p[h]);let i=document.createElement("header");if(i.className="qg-quadrant-label",i.textContent=p[h],f.appendChild(i),m){let l=document.createElement("drag-surface");l.setAttribute("group",this.#l),l.setAttribute("aria-label",p[h]),l.setAttribute("data-layout","stack"),l.setAttribute("data-layout-gap","xs"),f.appendChild(l),this.#r[h]=l}else{let l=document.createElement("ul");l.className="qg-items",f.appendChild(l),this.#c[h]=l}g.appendChild(f),this.#d[h]=f}y.forEach((h,f)=>{let i=h,l=this.#g(i),$=m?this.#r[l]:this.#c[l];if(m&&(i.hasAttribute("draggable")||i.setAttribute("draggable","true")),i.hasAttribute("data-id")||(i.dataset.id=`qg-item-${f}`),i.hasAttribute("data-x")&&i.hasAttribute("data-y")){let q=parseFloat(i.getAttribute("data-x")??""),v=parseFloat(i.getAttribute("data-y")??"");if(Number.isFinite(q)&&Number.isFinite(v)){let L=l===0||l===3?(q-.5)*2:q*2,N=l===0||l===1?(v-.5)*2:v*2;if(i.style.setProperty("--qg-local-x",L.toFixed(4)),i.style.setProperty("--qg-local-y",N.toFixed(4)),i.classList.add("qg-pinned"),!i.style.getPropertyValue("--qg-pin-hue")){let F=i.dataset.id||(i.textContent||"").trim();i.style.setProperty("--qg-pin-hue",`${c.#p(F)}deg`)}}}if(m)$.appendChild(i);else{let q=document.createElement("li");q.appendChild(i),$.appendChild(q)}});let A=document.createElement("div");A.className="qg-live-region visually-hidden",A.setAttribute("role","status"),A.setAttribute("aria-live","polite"),n.appendChild(o),n.appendChild(b),n.appendChild(g),n.appendChild(d),n.appendChild(E),this.appendChild(n),this.appendChild(A),this.#q=g,this.#i=A,this.#u=p,m&&this.listen(this,"drag-surface:transfer",this.#b),this.#t()}#t(){if(typeof ResizeObserver>"u")return;let e=t=>{let s=t.offsetWidth,r=t.offsetHeight;s>0&&t.style.setProperty("--qg-pin-half-w",`${s/2}px`),r>0&&t.style.setProperty("--qg-pin-half-h",`${r/2}px`)};this.#n=new ResizeObserver(t=>{for(let s of t)e(s.target);this.#a()});for(let t of this.querySelectorAll(".qg-pinned"))this.#n.observe(t);this.#a()}#a(){this.#e||(this.#e=requestAnimationFrame(()=>{this.#e=0,this.#h()}))}#h(){for(let t of this.querySelectorAll(".qg-pinned")){let s=t;s.classList.remove("qg-clustered"),s.style.removeProperty("--qg-cluster-i"),s.style.removeProperty("--qg-cluster-n"),delete s.dataset.cluster,s.dataset.qgTabbed!==void 0&&(s.removeAttribute("tabindex"),delete s.dataset.qgTabbed)}let e=0;for(let t=0;t<4;t++){let s=this.#d[t];if(!s)continue;let r=[...s.querySelectorAll(".qg-pinned")];if(r.length<2)continue;let a=r.map(n=>n.getBoundingClientRect()),u=Array.from({length:r.length},(n,o)=>o),p=n=>u[n]===n?n:u[n]=p(u[n]),m=(n,o)=>{let b=p(n),g=p(o);b!==g&&(u[b]=g)};for(let n=0;n<r.length;n++)for(let o=n+1;o<r.length;o++)c.#f(a[n],a[o])&&m(n,o);let y=new Map;for(let n=0;n<r.length;n++){let o=p(n);y.has(o)||y.set(o,[]),y.get(o)?.push(n)}for(let n of y.values()){if(n.length<2)continue;let o=`c${++e}`;n.forEach((b,g)=>{let d=r[b];d.classList.add("qg-clustered"),d.dataset.cluster=o,d.style.setProperty("--qg-cluster-i",String(g)),d.style.setProperty("--qg-cluster-n",String(n.length)),!d.hasAttribute("tabindex")&&!d.matches("a, button, [contenteditable]")&&(d.setAttribute("tabindex","0"),d.dataset.qgTabbed="")})}}}teardown(){this.#n?.disconnect(),this.#n=null,this.#e&&cancelAnimationFrame(this.#e),this.#e=0}static#f(e,t){return!(e.right<=t.left||t.right<=e.left||e.bottom<=t.top||t.bottom<=e.top)}static#p(e){let t=5381;for(let s=0;s<e.length;s++)t=(t<<5)+t+e.charCodeAt(s)|0;return(t%360+360)%360}#b=e=>{let{item:t,fromSurface:s,toSurface:r}=e.detail,a=this.#o(s),u=this.#o(r);a==null||u==null||(t.setAttribute("data-quadrant",String(u)),this.#y(`Moved ${this.#m(t)} to ${this.#u[u]}`),this.dispatchEvent(new CustomEvent("quadrant-grid:move",{bubbles:!0,detail:{item:t,itemId:t.dataset.id,from:a,to:u}})))};#g(e){let t=parseInt(e.getAttribute("data-quadrant"),10);if(t>=0&&t<=3)return t;if(e.hasAttribute("data-x")&&e.hasAttribute("data-y")){let s=parseFloat(e.getAttribute("data-x")),r=parseFloat(e.getAttribute("data-y"));return c.quadrantFor(s,r)}return 0}static quadrantFor(e,t){let s=e>=.5,r=t>=.5;return r&&s?0:r&&!s?1:!r&&!s?2:3}#o(e){for(let t=0;t<4;t++)if(this.#r[t]===e)return t;return null}#m(e){return(e.textContent||"").trim().split(`
-`)[0]||"item"}#y(e){this.#i&&(this.#i.textContent=e)}#l="";#r={};#c={};#d={};#q=null;#i=null;#u=[];#n=null;#e=0};S("quadrant-grid",C);export{C as QuadrantGrid};
-//# sourceMappingURL=quadrant-grid.js.map