vanilla-breeze 0.3.0 → 0.4.0

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

@@ -1,30 +0,0 @@
-var xt=window.matchMedia("(prefers-reduced-motion: reduce)");var q=new Map;function P(n,e,t={}){let o=t.priority??10,r={impl:e,bundle:t.bundle,contract:t.contract,priority:o},s=q.get(n);if(customElements.get(n)){if(!s||s.priority>=o){s&&s.priority===o&&s.impl!==e&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${t.bundle}".`);return}console.warn(`[VB Bundle] Tag <${n}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${t.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=o){s.priority===o&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${s.bundle}". Skipping "${t.bundle}" (first wins at equal priority).`);return}q.set(n,r),customElements.define(n,e)}var $=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,t,o,r){e.addEventListener(t,o,r),this.#t.push(()=>e.removeEventListener(t,o,r))}setup(){}teardown(){}setState(e,t){this.#e||(this.#e=this.attachInternals());let o=this.#e.states;try{t?o.add(e):o.delete(e)}catch{let r=`--${e}`;t?o.add(r):o.delete(r)}}_adoptInternals(e){this.#e||(this.#e=e)}};var C="[data-copy], [data-copy-target], [data-paste-target]",tt="Copied to clipboard",et="Pasted from clipboard",A=new WeakMap;async function M(n,e={}){if(n==null||n==="")return!1;let{button:t,announceMessage:o=tt,duration:r=1500}=e;try{await navigator.clipboard.writeText(n)}catch{return!1}return j({button:t,duration:r,announceMessage:o,eventDetail:{text:n}}),!0}function j({button:n,duration:e,announceMessage:t,eventDetail:o,state:r="copied",eventName:s="copy"}){if(n){n.dataset.state=r;let i=A.get(n);i&&clearTimeout(i),A.set(n,setTimeout(()=>{delete n.dataset.state,A.delete(n)},e)),n.dispatchEvent(new CustomEvent(s,{bubbles:!0,detail:o}))}rt(t,n??document.body)}async function nt(n,e={}){let{button:t,announceMessage:o=et,duration:r=1500}=e,s;try{s=await navigator.clipboard.readText()}catch{return null}return n&&("value"in n&&(n instanceof HTMLInputElement||n instanceof HTMLTextAreaElement||n instanceof HTMLSelectElement)?n.value=s:n.textContent=s,n.dispatchEvent(new Event("input",{bubbles:!0}))),j({button:t,duration:r,announceMessage:o,eventDetail:{text:s},state:"pasted",eventName:"paste"}),s}function U(n=document){n.querySelectorAll(C).forEach(O)}function O(n){n.hasAttribute("data-copy-init")||(n.setAttribute("data-copy-init",""),n.addEventListener("click",()=>{if(n.dataset.pasteTarget){let t=document.querySelector(n.dataset.pasteTarget);if(!t)return;nt(t,{button:n});return}let e=ot(n);e&&M(e,{button:n})}))}function ot(n){if(n.dataset.copy)return n.dataset.copy;if(n.dataset.copyTarget){let e=document.querySelector(n.dataset.copyTarget);if(!e)return"";let t=n.dataset.copyAttr;return t?e.getAttribute(t)??"":e.textContent??""}return""}function rt(n,e){let t=document.createElement("div");t.setAttribute("role","status"),t.setAttribute("aria-live","polite"),t.className="visually-hidden",t.textContent=n,e.appendChild(t),setTimeout(()=>t.remove(),1e3)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>U()):U();var st=new MutationObserver(n=>{for(let e of n)for(let t of e.addedNodes){if(t.nodeType!==Node.ELEMENT_NODE)continue;let o=t;o.matches(C)&&O(o),o.querySelectorAll(C).forEach(r=>O(r))}});st.observe(document.documentElement,{childList:!0,subtree:!0});function it(n,e,t){e/=100,t/=100;let o=i=>(i+n/30)%12,r=e*Math.min(t,1-t),s=i=>t-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 at(n,e,t){n/=255,e/=255,t/=255;let o=Math.max(n,e,t),r=Math.min(n,e,t),s=(o+r)/2,i=0,l=0;if(o!==r){let a=o-r;switch(l=s>.5?a/(2-o-r):a/(o+r),o){case n:i=((e-t)/a+(e<t?6:0))/6;break;case e:i=((t-n)/a+2)/6;break;case t:i=((n-e)/a+4)/6;break}}return{h:Math.round(i*360),s:Math.round(l*100),l:Math.round(s*100)}}function T(n){n=n.replace(/^#/,""),n.length===3&&(n=n[0]+n[0]+n[1]+n[1]+n[2]+n[2]);let e=parseInt(n,16);return{r:e>>16&255,g:e>>8&255,b:e&255}}function S(n,e,t){return"#"+[n,e,t].map(o=>Math.max(0,Math.min(255,Math.round(o))).toString(16).padStart(2,"0")).join("")}function V(n){let{r:e,g:t,b:o}=T(n);return at(e,t,o)}function c(n,e,t){let{r:o,g:r,b:s}=it(n,e,t);return S(o,r,s)}var L=n=>n<=.04045?n/12.92:Math.pow((n+.055)/1.055,2.4),z=n=>n<=.0031308?12.92*n:1.055*Math.pow(n,1/2.4)-.055,N=n=>n<0?0:n>1?1:n;function h(n){let{r:e,g:t,b:o}=T(n),r=L(e/255),s=L(t/255),i=L(o/255),l=.4122214708*r+.5363325363*s+.0514459929*i,a=.2119034982*r+.6806995451*s+.1073969566*i,u=.0883024619*r+.2817188376*s+.6299787005*i,p=Math.cbrt(l),f=Math.cbrt(a),b=Math.cbrt(u),w=.2104542553*p+.793617785*f-.0040720468*b,g=1.9779984951*p-2.428592205*f+.4505937099*b,y=.0259040371*p+.7827717662*f-.808675766*b,k=Math.sqrt(g*g+y*y),x=Math.atan2(y,g)*180/Math.PI;return x<0&&(x+=360),{l:w,c:k,h:x}}function v(n,e,t){let o=t*Math.PI/180,r=e*Math.cos(o),s=e*Math.sin(o),i=n+.3963377774*r+.2158037573*s,l=n-.1055613458*r-.0638541728*s,a=n-.0894841775*r-1.291485548*s,u=i*i*i,p=l*l*l,f=a*a*a,b=4.0767416621*u-3.3077115913*p+.2309699292*f,w=-1.2684380046*u+2.6097574011*p-.3413193965*f,g=-.0041960863*u-.7034186147*p+1.707614701*f,y=N(z(b)),k=N(z(w)),x=N(z(g));return S(Math.round(y*255),Math.round(k*255),Math.round(x*255))}function R(n,e){if(!n)return null;let t=String(n).trim();if(/^#[0-9a-f]{6}$/i.test(t))return t.toLowerCase();if(/^#[0-9a-f]{3}$/i.test(t))return("#"+t.slice(1).split("").map(i=>i+i).join("")).toLowerCase();if(typeof document>"u")return null;let o=e||document.createElement("span");e||(o.style.display="none",document.body.appendChild(o)),o.style.color="",o.style.color=t;let r=getComputedStyle(o).color;e||o.remove();let s=r.match(/rgba?\(\s*([0-9.]+)[\s,]+([0-9.]+)[\s,]+([0-9.]+)/);return s?S(Math.round(+s[1]),Math.round(+s[2]),Math.round(+s[3])):null}function J({l:n,c:e,h:t}){return`oklch(${(n*100).toFixed(1)}% ${e.toFixed(3)} ${t.toFixed(1)})`}function B(n){let{r:e,g:t,b:o}=T(n),r=s=>{let i=s/255;return i<=.03928?i/12.92:Math.pow((i+.055)/1.055,2.4)};return .2126*r(e)+.7152*r(t)+.0722*r(o)}function W(n,e){let t=B(n),o=B(e),r=Math.max(t,o),s=Math.min(t,o);return(r+.05)/(s+.05)}function X(n){return n>=7?"AAA":n>=4.5?"AA":"Fail"}function _(n){return B(n)>.4?"#000000":"#ffffff"}var d=n=>(n%360+360)%360;function ct(n,e,t){return{colors:[c(n,e,t),c(d(n+180),e,t)],names:["Base","Complement"]}}function lt(n,e,t){return{colors:[c(d(n-30),e,t),c(n,e,t),c(d(n+30),e,t)],names:["Analog A","Base","Analog B"]}}function ut(n,e,t){return{colors:[c(n,e,t),c(d(n+120),e,t),c(d(n+240),e,t)],names:["Base","Triad A","Triad B"]}}function dt(n,e,t){return{colors:[c(n,e,t),c(d(n+150),e,t),c(d(n+210),e,t)],names:["Base","Split A","Split B"]}}function pt(n,e,t){return{colors:[c(n,e,t),c(d(n+90),e,t),c(d(n+180),e,t),c(d(n+270),e,t)],names:["Base","Tetrad A","Tetrad B","Tetrad C"]}}var ft=[{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 mt(n,e,t){let o=[],r=[];for(let s of ft){let i=s.l>85||s.l<20?Math.max(e*.6,5):e;o.push(c(n,Math.round(i),s.l)),r.push(s.label)}return{colors:o,names:r}}var G={complementary:ct,analogous:lt,triadic:ut,"split-complementary":dt,tetradic:pt,monochromatic:mt};function K(n,e){let{h:t,s:o,l:r}=V(n);return(G[e]||G.complementary)(t,o,r)}var E=["primary","secondary","accent"],Z=["success","warning","error","info"],ht=[...E,...Z],Q={primary:"Primary",secondary:"Secondary",accent:"Accent",success:"Success",warning:"Warning",error:"Error",info:"Info"},bt={aaa:{bg:"oklch(92% 0.08 145)",fg:"oklch(30% 0.12 145)"},aa:{bg:"oklch(94% 0.08 90)",fg:"oklch(35% 0.12 70)"},fail:{bg:"oklch(92% 0.08 25)",fg:"oklch(35% 0.15 25)"}},H="var(--font-mono, monospace)",D="var(--color-text-muted, #666)",I="var(--color-border, #ddd)",Y="var(--color-surface, #fff)",gt="var(--color-text, #222)",m="var(--radius-s, 0.25rem)",yt="var(--radius-m, 0.5rem)",F=class extends ${static observedAttributes=["colors","roles","show-export","label"];#t=[];#e=[];#h=null;#l=null;#n=null;setup(){this.#n=document.createElement("span"),this.#n.style.cssText="position:absolute;visibility:hidden;pointer-events:none",this.append(this.#n),this.#h=this.querySelector("color-palette, palette-generator"),this.#u(),this.#s(),this.#d(),this.#a("init"),this.#v(),this.#p(),this.#c("init")}attributeChangedCallback(e){!this.isConnected||!this.hasAttribute("data-upgraded")||(e==="roles"&&this.#u(),e==="colors"&&this.#s(),this.#d(),this.#a("attribute"),this.#p(),this.#c("attribute"))}teardown(){this.#n?.remove(),this.#n=null}#s(){let e=this.querySelector("color-palette");if(e){if(typeof e.colors<"u"&&e.colors.length){this.#t=e.colors.slice();return}let s=(e.getAttribute("colors")||"").split(",").map(i=>i.trim()).filter(Boolean);if(s.length){this.#t=s;return}}let t=this.querySelector("palette-generator");if(t){let r=t.getAttribute("seed")||t.querySelector('input[type="color"]')?.value||"",s=t.getAttribute("harmony")||"complementary";if(r)try{let{colors:i}=K(r,s);this.#t=i.slice();return}catch{}}let o=this.getAttribute("colors")||"";this.#t=o.split(",").map(r=>r.trim()).filter(Boolean)}#u(){let t=(this.getAttribute("roles")||E.join(",")).split(",").map(o=>o.trim().toLowerCase()).filter(o=>ht.includes(o));this.#e=t.length?t:[...E]}#i(){let e={};for(let t=0;t<this.#e.length;t++)e[this.#e[t]]=this.#t[t]||this.#t[this.#t.length-1]||"#888888";return e}#d(){let e=this.querySelector(":scope > .sp-shell");e&&e.remove();let t=this.getAttribute("label"),o=this.hasAttribute("show-export"),r=document.createElement("div");if(r.className="sp-shell",r.style.cssText="display:flex;flex-direction:column;gap:var(--size-m,1rem);margin-block-start:var(--size-s,0.75rem)",t){let i=document.createElement("p");i.style.cssText="font-weight:600;margin:0",i.textContent=t,r.append(i)}let s=document.createElement("section");s.className="sp-previews",s.setAttribute("aria-label","Role previews"),s.style.cssText="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(22rem,100%),1fr));gap:var(--size-m,1rem)",r.append(s),this.#l=s,o&&r.insertAdjacentHTML("beforeend",this.#x()),this.append(r)}#a(e){if(!this.#l)return;let t=this.#i();this.#l.innerHTML=this.#e.map(o=>this.#b(o,t[o])).join("")}#b(e,t){let o=Q[e]||e,s=Z.includes(e)?this.#y(e,t):this.#g(e,t),i=`display:flex;flex-direction:column;gap:var(--size-s,0.75rem);padding:var(--size-m,1rem);border:1px solid ${I};border-radius:${yt};background:${Y};min-inline-size:0`;return`<article class="sp-card" data-role="${e}" aria-label="${o} role preview" style="${i}">
-      <header style="display:flex;align-items:center;justify-content:space-between;gap:var(--size-s,0.75rem)">
-        <div>
-          <code style="font-family:${H};font-size:var(--font-size-sm,0.875rem);font-weight:600">${e}</code>
-          <span style="display:block;font-size:var(--font-size-xs,0.75rem);color:${D}">${o}</span>
-        </div>
-        <div style="display:flex;align-items:center;gap:0.5rem">
-          <span class="sp-swatch" style="display:inline-block;inline-size:1.75rem;block-size:1.75rem;border-radius:${m};border:1px solid oklch(0% 0 0 / 0.15);background:${t}"></span>
-          <code style="font-family:${H};font-size:var(--font-size-xs,0.75rem);color:${D}">${t}</code>
-        </div>
-      </header>
-      <div class="sp-samples" style="display:flex;flex-wrap:wrap;gap:var(--size-s,0.75rem);align-items:flex-start">${s}</div>
-    </article>`}#g(e,t){let o=this.#$(e,t),r=this.#f(),s=this.#M(e,t),i=this.#E(t);return[this.#o({render:`<button type="button" tabindex="-1" style="all:unset;display:inline-block;padding:0.375rem 0.875rem;border-radius:${m};background:${t};color:${o};font-family:inherit;font-size:var(--font-size-sm,0.875rem);font-weight:600;cursor:default">Button</button>`,fg:o,bg:t,caption:"On role"}),this.#o({render:`<span style="color:${t};background:${r};padding:0.25rem 0.5rem;border-radius:${m};font-size:var(--font-size-sm,0.875rem);font-weight:500;text-decoration:underline">Linked text</span>`,fg:t,bg:r||"#ffffff",caption:"On surface"}),this.#o({render:`<span style="display:inline-block;padding:0.125rem 0.5rem;border-radius:999px;background:${s};color:${i};font-size:var(--font-size-xs,0.75rem);font-weight:600;letter-spacing:0.04em;text-transform:uppercase">Badge</span>`,fg:i,bg:s,caption:"Subtle"})].join("")}#y(e,t){let o=this.#f(),r=this.#T(e,t),s=this.#S(e,t),i=_(t);return[this.#o({render:`<div style="display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;border-radius:${m};background:${r};color:${s};border:1px solid ${t};font-size:var(--font-size-sm,0.875rem);max-inline-size:100%">
-          <span style="display:inline-block;inline-size:0.5rem;block-size:0.5rem;border-radius:50%;background:${t};flex-shrink:0"></span>
-          <span><strong>${Q[e]||e}</strong> \u2014 message text</span>
-        </div>`,fg:s,bg:r,caption:"Alert"}),this.#o({render:`<span style="display:inline-block;padding:0.125rem 0.5rem;border-radius:999px;background:${t};color:${i};font-size:var(--font-size-xs,0.75rem);font-weight:700;letter-spacing:0.04em;text-transform:uppercase">${e}</span>`,fg:i,bg:t,caption:"Badge"}),this.#o({render:`<span style="color:${t};background:${o};padding:0.25rem 0.5rem;border-radius:${m};font-size:var(--font-size-sm,0.875rem);font-weight:600">Inline status</span>`,fg:t,bg:o||"#ffffff",caption:"On surface"})].join("")}#o({render:e,fg:t,bg:o,caption:r}){let s=R(t,this.#n||void 0)||"#000000",i=R(o,this.#n||void 0)||"#ffffff",l=W(s,i),a=X(l).toLowerCase(),u=bt[a],p=`display:inline-flex;align-items:center;gap:0.25rem;padding:0.125rem 0.375rem;border-radius:${m};font-family:${H};font-size:var(--font-size-xs,0.75rem);background:${u.bg};color:${u.fg}`;return`<div style="display:flex;flex-direction:column;gap:0.25rem;align-items:flex-start;min-inline-size:0;max-inline-size:100%">
-      <div style="max-inline-size:100%">${e}</div>
-      <div style="display:flex;align-items:center;gap:0.375rem;font-size:var(--font-size-xs,0.75rem);color:${D}">
-        <span style="${p}" title="${r}: ${l.toFixed(2)}:1">${l.toFixed(2)} <small>${a.toUpperCase()}</small></span>
-        <span>${r}</span>
-      </div>
-    </div>`}#x(){let e=`display:flex;gap:var(--size-2xs,0.375rem);padding-block-start:var(--size-xs,0.5rem);border-block-start:1px solid ${I}`,t=`padding:0.375rem 0.875rem;border:1px solid ${I};border-radius:${m};background:${Y};color:${gt};cursor:pointer;font:inherit;font-size:var(--font-size-sm,0.875rem)`;return`<div class="sp-export" role="toolbar" aria-label="Export semantic palette" style="${e}">
-      <button type="button" class="sp-copy-css" style="${t}">Copy Theme CSS</button>
-      <button type="button" class="sp-copy-json" style="${t}">Copy JSON</button>
-    </div>`}#v(){let e=this.querySelector("color-palette");e&&this.listen(e,"color-palette:change",()=>{this.#s(),this.#a("palette"),this.#c("palette")});let t=this.querySelector("palette-generator");t&&this.listen(t,"palette-generator:generate",()=>{this.#s(),this.#a("palette"),this.#c("palette")})}#p(){let e=this.querySelector(".sp-copy-css"),t=this.querySelector(".sp-copy-json");e&&this.listen(e,"click",()=>{M(this.#m(),{button:e,announceMessage:"Theme CSS copied"})}),t&&this.listen(t,"click",()=>{M(JSON.stringify(this.#i(),null,2),{button:t,announceMessage:"JSON copied"})})}#r(){return getComputedStyle(this)}#f(){return this.#r().getPropertyValue("--color-surface").trim()||"#ffffff"}#$(e,t){return this.#r().getPropertyValue(`--color-text-on-${e}`).trim()||_(t)}#M(e,t){let o=this.#r().getPropertyValue(`--color-${e}-subtle`).trim();if(o)return o;let{h:r}=h(t);return v(.95,.03,r)}#T(e,t){let o=this.#r().getPropertyValue(`--color-${e}-subtle`).trim();if(o)return o;let{h:r}=h(t);return v(.94,.05,r)}#S(e,t){let o=this.#r().getPropertyValue(`--color-${e}-text`).trim();if(o)return o;let{h:r}=h(t);return v(.3,.14,r)}#E(e){let{l:t,c:o,h:r}=h(e);return v(Math.max(.2,t-.25),o,r)}#m(){let e=this.#i(),t=[],o=[];for(let s of this.#e){let i=e[s];if(!i)continue;let{l,c:a,h:u}=h(i);E.includes(s)?t.push(`  --hue-${s}: ${u.toFixed(1)};`,`  --lightness-${s}: ${(l*100).toFixed(1)}%;`,`  --chroma-${s}: ${a.toFixed(3)};`):o.push(`  --color-${s}: ${J({l,c:a,h:u})};`)}let r=[];return t.length&&r.push("  /* Brand seeds */",...t),o.length&&(t.length&&r.push(""),r.push("  /* Status colors */",...o)),`:root {
-${r.join(`
-`)}
-}
-`}#c(e){this.dispatchEvent(new CustomEvent("semantic-palette:change",{bubbles:!0,detail:{mapping:this.#i(),tokens:this.#m(),source:e}}))}};P("semantic-palette",F);
-//# sourceMappingURL=semantic-palette.js.map

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

@@ -1,6 +0,0 @@
-var y=window.matchMedia("(prefers-reduced-motion: reduce)");var m=new Map;function h(s,e,t={}){let r=t.priority??10,i={impl:e,bundle:t.bundle,contract:t.contract,priority:r},n=m.get(s);if(customElements.get(s)){if(!n||n.priority>=r){n&&n.priority===r&&n.impl!==e&&console.warn(`[VB Bundle] Tag <${s}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${t.bundle}".`);return}console.warn(`[VB Bundle] Tag <${s}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${t.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=r){n.priority===r&&console.warn(`[VB Bundle] Tag <${s}> already registered by "${n.bundle}". Skipping "${t.bundle}" (first wins at equal priority).`);return}m.set(s,i),customElements.define(s,e)}var u=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,t,r,i){e.addEventListener(t,r,i),this.#t.push(()=>e.removeEventListener(t,r,i))}setup(){}teardown(){}setState(e,t){this.#e||(this.#e=this.attachInternals());let r=this.#e.states;try{t?r.add(e):r.delete(e)}catch{let i=`--${e}`;t?r.add(i):r.delete(i)}}_adoptInternals(e){this.#e||(this.#e=e)}};var f=class extends u{static observedAttributes=["tokens","prefix","show-values","label","editable","target"];setup(){this.#t(),this.#e()}attributeChangedCallback(){this.isConnected&&(this.#t(),this.#e())}#t(){let e=this.getAttribute("tokens")||"3xs,2xs,xs,s,m,l,xl,2xl,3xl",t=this.getAttribute("prefix")||"--size-",r=this.getAttribute("show-values")!=="false",i=this.getAttribute("label")||"",n=this.hasAttribute("editable"),d=e.split(",").map(o=>o.trim()),l="";i&&(l+=`<div style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted,#666);margin-block-end:0.75rem;font-family:var(--font-sans,system-ui)">${i}</div>`),l+=`<div role="list" aria-label="${i||"Spacing scale"}" style="display:flex;flex-direction:column;gap:0.25rem">`;for(let o of d){let c=`${t}${o}`,a=n?`<input type="text" class="scale-edit" data-token="${o}" aria-label="${o} value" style="font-family:var(--font-mono,monospace);font-size:0.75rem;padding:0.125rem 0.375rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#222);inline-size:6rem;text-align:end">`:r?'<span class="scale-value" style="font-family:var(--font-mono,monospace);font-size:0.75rem;color:var(--color-text-muted,#666);font-variant-numeric:tabular-nums;min-inline-size:3.5rem;text-align:end"></span>':"";l+=`<div role="listitem" style="display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:0.75rem;min-block-size:1.75rem">
-        <span style="font-family:var(--font-mono,monospace);font-size:0.875rem;color:var(--color-text-muted,#666);text-align:end">${o}</span>
-        <div class="scale-bar" style="display:block;block-size:var(--size-m,1rem);min-inline-size:2px;inline-size:var(${c});background:var(--color-interactive,oklch(55% 0.2 260));border-radius:var(--radius-s,0.25rem)" aria-hidden="true"></div>
-        ${a}
-      </div>`}l+="</div>",this.innerHTML=l,requestAnimationFrame(()=>{if(n){let o=getComputedStyle(this);this.querySelectorAll(".scale-edit").forEach(c=>{let a=c,b=a.getAttribute("data-token"),p=o.getPropertyValue(`${t}${b}`).trim();a.value=p||""})}else r&&this.querySelectorAll(".scale-bar").forEach(o=>{let c=o.getBoundingClientRect().width,a=o.nextElementSibling;a&&(a.textContent=`${Math.round(c*100)/100}px`)})})}#e(){if(!this.hasAttribute("editable"))return;let e=this.getAttribute("prefix")||"--size-";this.querySelectorAll(".scale-edit").forEach(t=>{this.listen(t,"change",()=>this.#r(t,e)),this.listen(t,"keydown",r=>{r.key==="Enter"&&this.#r(t,e)})})}#r(e,t){let r=e.getAttribute("data-token"),i=e.value.trim();if(!r||!i)return;let n=this.#n(),d=`${t}${r}`;n&&n.style.setProperty(d,i),this.dispatchEvent(new CustomEvent("spacing-specimen:change",{bubbles:!0,detail:{name:r,value:i,token:d,target:this.getAttribute("target")||":root"}}))}#n(){let e=this.getAttribute("target")||":root";try{return e===":root"?document.documentElement:document.querySelector(e)}catch{return document.documentElement}}};h("spacing-specimen",f);
-//# sourceMappingURL=spacing-specimen.js.map

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

@@ -1,2 +0,0 @@
-var C=window.matchMedia("(prefers-reduced-motion: reduce)");var b=new Map;function y(c,e,s={}){let r=s.priority??10,a={impl:e,bundle:s.bundle,contract:s.contract,priority:r},t=b.get(c);if(customElements.get(c)){if(!t||t.priority>=r){t&&t.priority===r&&t.impl!==e&&console.warn(`[VB Bundle] Tag <${c}> already registered by "${t.bundle}" (priority ${t.priority}). Skipping "${s.bundle}".`);return}console.warn(`[VB Bundle] Tag <${c}> defined by "${t.bundle}" cannot be replaced (customElements.define is permanent). "${s.bundle}" has higher priority but arrived late.`);return}if(t&&t.priority>=r){t.priority===r&&console.warn(`[VB Bundle] Tag <${c}> already registered by "${t.bundle}". Skipping "${s.bundle}" (first wins at equal priority).`);return}b.set(c,a),customElements.define(c,e)}var h=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 e of this.#i)e();this.#i=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,s,r,a){e.addEventListener(s,r,a),this.#i.push(()=>e.removeEventListener(s,r,a))}setup(){}teardown(){}setState(e,s){this.#t||(this.#t=this.attachInternals());let r=this.#t.states;try{s?r.add(e):r.delete(e)}catch{let a=`--${e}`;s?r.add(a):r.delete(a)}}_adoptInternals(e){this.#t||(this.#t=e)}};var v=0;function m(c,e,s="vb-vt"){if(!c?.isConnected||typeof document>"u"||!("startViewTransition"in document)||matchMedia("(prefers-reduced-motion: reduce)").matches)return e(),null;let r=`${s}-${++v}`;c.style.viewTransitionName=r;let a=document.startViewTransition(e);return a.finished.finally(()=>{c.style.viewTransitionName===r&&(c.style.viewTransitionName="")}),a}var p=class c extends h{static get observedAttributes(){return["src","compact","title"]}static#i=0;#t=null;#s=null;#r={};#e=null;#c="";#n=[];setup(){this.#c=`sm-${++c.#i}`;let e=[...this.querySelectorAll(":scope > section[data-activity]")];this.#n=e.map(t=>{let n=t.getAttribute("data-activity")||"",o=t.getAttribute("data-activity-label")||""||this.#u(n),l=t.getAttribute("data-journey-phase")||null,d=[...t.children];return{id:n,label:o,journeyPhase:l,children:d}});for(let t of e)t.remove();this.#t=document.createElement("div"),this.#t.className="sm-scroll",this.#t.setAttribute("role","region"),this.#t.setAttribute("aria-label","Story map"),this.#t.setAttribute("tabindex","0"),this.#s=document.createElement("div"),this.#s.className="sm-columns";let s=0;for(let t of this.#n){let n=document.createElement("section");n.className="sm-column",n.setAttribute("data-activity-column",t.id);let i=document.createElement("header");i.className="sm-activity-header";let o=document.createElement("h3");o.textContent=t.label;let l=document.createElement("span");l.className="sm-activity-count",l.textContent=String(t.children.length),o.appendChild(l),i.appendChild(o),n.appendChild(i);let d=document.createElement("drag-surface");if(d.setAttribute("group",this.#c),d.setAttribute("aria-label",`${t.label} stories`),d.setAttribute("data-layout","stack"),d.setAttribute("data-layout-gap","xs"),t.children.length>0){for(let u of t.children)d.appendChild(u);s+=t.children.length}else{let u=document.createElement("p");u.className="sm-empty",u.textContent="No stories yet",d.appendChild(u)}n.appendChild(d),this.#s.appendChild(n),this.#r[t.id]=d}let r=this.getAttribute("title");if(r){let t=document.createElement("h2");t.className="sm-title",t.textContent=r,this.appendChild(t)}this.#t.appendChild(this.#s),this.appendChild(this.#t),this.#e=document.createElement("div"),this.#e.className="sm-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",t=>{let n=t.detail,i=t.target.closest("drag-surface"),o=this.#o(i);o&&(this.#a(o),this.dispatchEvent(new CustomEvent("story-map:reorder",{bubbles:!0,detail:{itemId:n.itemId,activity:o,oldIndex:n.oldIndex,newIndex:n.newIndex}})))}),this.listen(this,"drag-surface:transfer",t=>{let n=t.detail,i=n.fromSurface,o=n.toSurface,l=this.#o(i),d=this.#o(o);if(!l||!d)return;this.#a(l),this.#a(d);let u=o.querySelector(".sm-empty");if(u&&u.remove(),i.querySelectorAll(':scope > [draggable="true"]').length===0&&!i.querySelector(".sm-empty")){let f=document.createElement("p");f.className="sm-empty",f.textContent="No stories yet",i.appendChild(f)}let g=this.#l(n.item);this.#d(`${g} moved from ${l} to ${d}`),this.dispatchEvent(new CustomEvent("story-map:transfer",{bubbles:!0,detail:{itemId:n.itemId,fromActivity:l,toActivity:d,newIndex:n.newIndex}}))});let a=this.getAttribute("src");if(a){this._loadSrc(a);return}this.dispatchEvent(new CustomEvent("story-map:ready",{bubbles:!0,detail:{activityCount:this.#n.length,storyCount:s}}))}teardown(){this.#t&&(this.#t.remove(),this.#t=null),this.#e&&(this.#e.remove(),this.#e=null),this.#s=null,this.#r={},this.#n=[]}get activities(){return this.#n.map(e=>({id:e.id,label:e.label,journeyPhase:e.journeyPhase||void 0,stories:[...this.#r[e.id]?.querySelectorAll(':scope > [draggable="true"]')||[]].map(s=>({id:s.getAttribute("data-id")||void 0,storyId:s.getAttribute("story-id")||void 0,title:s.querySelector('[slot="title"]')?.textContent?.trim()||void 0}))}))}set activities(e){let s=Array.isArray(e)?e:[];for(;this.firstChild;)this.firstChild.remove();for(let a of s){let t=document.createElement("section");t.setAttribute("data-activity",a.id||""),a.label&&t.setAttribute("data-activity-label",a.label),a.journeyPhase&&t.setAttribute("data-journey-phase",a.journeyPhase);for(let n of a.stories||[]){let i,o=this;if(typeof o.renderStory=="function"){let l=o.renderStory(n);i=l instanceof Element?l:null}i||(customElements.get("user-story")?(i=document.createElement("user-story"),i.data=n):(i=document.createElement("article"),i.className="sm-card",i.textContent=n.title||n.id||"")),i.hasAttribute("draggable")||i.setAttribute("draggable","true"),n.id&&!i.hasAttribute("data-id")&&i.setAttribute("data-id",String(n.id)),t.appendChild(i)}this.appendChild(t)}let r=()=>{this.teardown(),this.removeAttribute("data-upgraded"),this.setup()};this.hasAttribute("data-upgraded")&&this.#t?m(this,r,"sm-vt"):r(),this.dispatchEvent(new CustomEvent("story-map:activities-changed",{detail:{activities:s,source:"property"},bubbles:!0}))}attributeChangedCallback(e,s,r){s===r||!this.isConnected||e==="src"&&this._loadSrc(r)}async _loadSrc(e){if(e)try{let s=await fetch(e);if(!s.ok)throw new Error(`HTTP ${s.status}`);let r=await s.json();for(;this.firstChild;)this.firstChild.remove();for(let t of r.activities||[]){let n=document.createElement("section");n.setAttribute("data-activity",t.id),n.setAttribute("data-activity-label",t.label||t.id),t.journeyPhase&&n.setAttribute("data-journey-phase",t.journeyPhase);for(let i of t.stories||[]){let o=document.createElement("user-story");o.setAttribute("draggable","true"),o.dataset.id=i.id||i.storyId,(i.storyId||i.id)&&o.setAttribute("story-id",i.storyId||i.id),i.title&&o.setAttribute("title",i.title),i.persona&&o.setAttribute("persona",i.persona),i.action&&o.setAttribute("action",i.action),i.benefit&&o.setAttribute("benefit",i.benefit),i.priority&&o.setAttribute("priority",i.priority),i.status&&o.setAttribute("status",i.status),i.points&&o.setAttribute("points",String(i.points)),o.setAttribute("detail",i.detail||"compact"),n.appendChild(o)}this.appendChild(n)}let a=()=>{this.teardown(),this.removeAttribute("data-upgraded"),this.setup()};this.hasAttribute("data-upgraded")&&this.#t?m(this,a,"sm-vt"):a()}catch(s){console.warn(`[story-map] Failed to load src="${e}":`,s)}}#o(e){if(!e)return null;for(let[s,r]of Object.entries(this.#r))if(r===e)return s;return null}#a(e){let s=this.#r[e];if(!s)return;let r=s.querySelectorAll(':scope > [draggable="true"]').length,a=s.closest("[data-activity-column]");if(!a)return;let t=a.querySelector(".sm-activity-count");t&&(t.textContent=String(r))}#d(e){this.#e&&(this.#e.textContent="",requestAnimationFrame(()=>{this.#e&&(this.#e.textContent=e)}))}#l(e){return e.getAttribute("story-id")||e.getAttribute("data-id")||e.textContent?.trim().slice(0,40)||"item"}#u(e){return e.replace(/[-_]/g," ").replace(/\b\w/g,s=>s.toUpperCase())}};y("story-map",p);export{p as StoryMap};
-//# sourceMappingURL=story-map.js.map

package/dist/cdn/components/theme-catalog.js

@@ -1,28 +0,0 @@
-var F=window.matchMedia("(prefers-reduced-motion: reduce)");var $=new Map;function y(t,r,e={}){let n=e.priority??10,i={impl:r,bundle:e.bundle,contract:e.contract,priority:n},s=$.get(t);if(customElements.get(t)){if(!s||s.priority>=n){s&&s.priority===n&&s.impl!==r&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=n){s.priority===n&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}$.set(t,i),customElements.define(t,r)}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 r of this.#t)r();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(r,e,n,i){r.addEventListener(e,n,i),this.#t.push(()=>r.removeEventListener(e,n,i))}setup(){}teardown(){}setState(r,e){this.#e||(this.#e=this.attachInternals());let n=this.#e.states;try{e?n.add(r):n.delete(r)}catch{let i=`--${r}`;e?n.add(i):n.delete(i)}}_adoptInternals(r){this.#e||(this.#e=r)}};var w="com.vanilla-breeze";function x(t){let r=[],e=[],n=t&&typeof t=="object"?t:{};return S(n,[],void 0,n,r,e),{tokens:r,ignored:e,stats:{applied:r.length,ignored:e.length}}}function S(t,r,e,n,i,s){if(!t||typeof t!="object")return;if("$value"in t){A(t,r,e??t.$type,n,i,s);return}if(k(t)){T(t,r,e??t.$type??"color",n,i,s);return}let o=t.$type??e;for(let[a,c]of Object.entries(t))a.startsWith("$")||S(c,[...r,a],o,n,i,s)}function k(t){return["$root","light","dark"].some(e=>t[e]&&typeof t[e]=="object"&&"$value"in t[e])}function m(t){let[r,e,...n]=t;switch(r){case"color":{if(e==="seeds")return n.length?`--${n.join("-")}`:null;let i=[e,...n].filter(Boolean).join("-");return i?`--color-${i}`:null}case"typography":{let i=n.join("-")||e,s=n.length?n.join("-"):"";switch(e){case"family":return s?`--font-${s}`:null;case"size":return s?`--font-size-${s}`:null;case"weight":return s?`--font-weight-${s}`:null;case"lineHeight":return s?`--line-height-${s}`:null;case"letterSpacing":return s?`--letter-spacing-${s}`:null;default:return null}let o=i}case"spacing":return[e,...n].filter(Boolean).length?`--size-${[e,...n].filter(Boolean).join("-")}`:null;case"border":{let i=n.join("-")||"";return e==="radius"?i?`--radius-${i}`:null:e==="width"&&i?`--border-width-${i}`:null}case"motion":{let i=n.join("-")||"";return e==="duration"?i?`--duration-${i}`:null:e==="easing"&&i?`--ease-${i}`:null}case"effect":{let i=n.join("-")||"";return e==="shadow"&&i?`--shadow-${i}`:null}default:return null}}function A(t,r,e,n,i,s){if((e==="typography"||t.$type==="typography")&&t.$value&&typeof t.$value=="object"&&!Array.isArray(t.$value)&&r[0]==="typography"){q(t,r,i);return}let o=m(r);if(!o){s.push(r.join("."));return}let a=e??j(r),c=t.$extensions&&t.$extensions[w]||{};if(c.expression){i.push([o,c.expression]);return}if(c.lightDark){i.push([o,c.lightDark]);return}let l=h(t.$value,a,c,n);if(l==null){s.push(r.join("."));return}i.push([o,l])}function j(t){let[r,e]=t;if(r==="color")return"color";if(r==="spacing"||r==="border"&&(e==="radius"||e==="width"))return"dimension";if(r==="motion"&&e==="duration")return"duration";if(r==="motion"&&e==="easing")return"cubicBezier";if(r==="effect"&&e==="shadow")return"shadow";if(r==="typography"){if(e==="family")return"fontFamily";if(e==="size")return"dimension";if(e==="weight")return"fontWeight";if(e==="lineHeight")return"number";if(e==="letterSpacing")return"dimension"}}function T(t,r,e,n,i,s){let o=m(r);if(!o){s.push(r.join("."));return}let a=t.$extensions&&t.$extensions[w]||{};if(a.lightDark){i.push([o,a.lightDark]);return}let c=t.light?.$value?h(t.light.$value,e,{},n):null,l=t.dark?.$value?h(t.dark.$value,e,{},n):null,f=t.$root?.$value?h(t.$root.$value,e,{},n):null;if(c&&l){i.push([o,`light-dark(${c}, ${l})`]);return}if(f){i.push([o,f]);return}if(c){i.push([o,c]);return}if(l){i.push([o,l]);return}s.push(r.join("."))}function h(t,r,e,n){if(typeof t=="string"&&/^\{[^}]+\}$/.test(t)){let i=t.slice(1,-1).split("."),s=m(i);return s?`var(${s})`:t}switch(r){case"color":return v(t,e);case"fontFamily":return E(t);case"fontWeight":return String(t);case"number":return B(t,e);case"dimension":return u(t,e);case"duration":return L(t);case"cubicBezier":return Array.isArray(t)?`cubic-bezier(${t.join(", ")})`:null;case"shadow":return _(t);default:return typeof t=="string"||typeof t=="number"?String(t):null}}function v(t,r){if(!t||typeof t!="object")return null;if(t.hex)return t.hex;if(t.colorSpace==="oklch"){let[e,n,i]=t.components||[0,0,0],s=t.alpha!=null?` / ${t.alpha}`:"";return`oklch(${e} ${n} ${i}${s})`}if(t.colorSpace==="srgb"){let[e,n,i]=t.components||[0,0,0],s=t.alpha;return s!=null?`rgba(${Math.round(e*255)}, ${Math.round(n*255)}, ${Math.round(i*255)}, ${s})`:C(e,n,i)}return null}function C(t,r,e){let n=i=>Math.round(i*255).toString(16).padStart(2,"0");return`#${n(t)}${n(r)}${n(e)}`}var M=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","math","emoji","fangsong","-apple-system","BlinkMacSystemFont"]);function E(t){return typeof t=="string"?t:Array.isArray(t)?t.map(r=>M.has(r)||r.startsWith('"')||r.startsWith("'")?r:`"${r}"`).join(", "):null}function B(t,r){return r.unit==="%"?`${t}%`:String(t)}function u(t,r){if(!t||typeof t!="object")return null;let e=r.unit||t.unit||"px";return`${t.value}${e}`}function L(t){return!t||typeof t!="object"?null:`${t.value}${t.unit||"ms"}`}function _(t){return Array.isArray(t)?t.map(b).filter(Boolean).join(", "):b(t)}function b(t){if(!t)return null;let r=u(t.offsetX,{})??"0px",e=u(t.offsetY,{})??"0px",n=u(t.blur,{})??"0px",i=t.spread?" "+u(t.spread,{}):"",s=v(t.color,{})??"#000";return`${r} ${e} ${n}${i} ${s}`}function q(t,r,e){let n=t.$value,i=r[r.length-1];n.fontFamily!=null&&e.push([`--font-${i}`,E(n.fontFamily)]),n.fontSize!=null&&e.push([`--font-size-${i}`,u(n.fontSize,{})]),n.fontWeight!=null&&e.push([`--font-weight-${i}`,String(n.fontWeight)]),n.lineHeight!=null&&e.push([`--line-height-${i}`,String(n.lineHeight)]),n.letterSpacing!=null&&e.push([`--letter-spacing-${i}`,u(n.letterSpacing,{})])}var g=class extends p{static observedAttributes=["target","catalog-base"];#t=null;#e="";setup(){this.#i(),this.#s()}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&(this.#i(),this.#s())}#r(){let r=this.getAttribute("target")||"#preview";try{return document.querySelector(r)}catch{return null}}#n(){let r=this.getAttribute("catalog-base");return r?r.replace(/\/$/,""):typeof window<"u"&&window.__VB_CATALOG_BASE?String(window.__VB_CATALOG_BASE).replace(/\/$/,""):"/cdn/themes/catalog"}#i(){let r="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);background:var(--color-surface,#fff);padding:var(--size-m,1rem);display:flex;flex-direction:column;gap:var(--size-2xs,0.375rem);min-block-size:0",e="display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:var(--size-s,0.75rem)",n="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666)",i="margin:0;font-size:var(--font-size-md,1rem);font-weight:600;color:var(--color-text,#222)",s="align-self:flex-start;padding:0.375rem 0.75rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-primary,#0066cc);color:var(--color-text-on-primary,#fff);cursor:pointer;font:inherit;font-size:var(--font-size-xs,0.75rem)",o=`display:inline-block;padding:0.125rem 0.375rem;border-radius:0.25rem;background:var(--color-surface-raised,#f3f3f3);${n};margin-inline-end:0.25rem`;this.innerHTML=`
-      <div class="tc-head" style="display:flex;align-items:baseline;gap:var(--size-s,0.75rem);margin-block-end:var(--size-s,0.75rem);flex-wrap:wrap">
-        <strong style="font-size:var(--font-size-sm,0.875rem)">Start from a known system</strong>
-        <span class="tc-target" style="${n}"></span>
-      </div>
-      <div class="tc-grid" style="${e}" role="list"></div>
-      <output class="tc-result" style="display:block;margin-block-start:var(--size-s,0.75rem);${n}"></output>
-      <p class="tc-attribution" style="margin-block-start:var(--size-2xs,0.375rem);${n}" hidden></p>
-      <details class="tc-ignored" style="margin-block-start:var(--size-2xs,0.375rem)" hidden>
-        <summary style="${n};cursor:pointer">Ignored tokens</summary>
-        <ul class="tc-ignored-list" style="margin:var(--size-2xs,0.375rem) 0 0;padding-inline-start:1.25rem;${n}"></ul>
-      </details>
-      <style>
-        :host ._card { ${r} }
-        :host ._title { ${i} }
-        :host ._btn { ${s} }
-        :host ._tag { ${o} }
-      </style>
-    `,this.#a()}#a(){let r=this.querySelector(".tc-target");if(!r)return;let e=this.getAttribute("target")||"#preview",n=this.#r();r.textContent=n?`Target: ${e}`:`Target ${e} not found`}async#s(){let r=this.querySelector(".tc-grid");if(r)try{let e=await fetch(`${this.#n()}/manifest.json`);if(!e.ok)throw new Error(`Catalog manifest fetch failed: ${e.status}`);let n=await e.json();this.#t=n.entries||[],this.#c()}catch(e){r.innerHTML="";let n=this.querySelector(".tc-result");n&&(n.textContent=`Couldn't load catalog manifest: ${e&&e.message?e.message:String(e)}`)}}#c(){let r=this.querySelector(".tc-grid");if(!r||!this.#t)return;let e="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);background:var(--color-surface,#fff);padding:var(--size-m,1rem);display:flex;flex-direction:column;gap:var(--size-2xs,0.375rem)",n="margin:0;font-size:var(--font-size-md,1rem);font-weight:600;color:var(--color-text,#222)",i="align-self:flex-start;margin-block-start:auto;padding:0.375rem 0.75rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-primary,#0066cc);color:var(--color-text-on-primary,#fff);cursor:pointer;font:inherit;font-size:var(--font-size-xs,0.75rem)",s="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666)",o=`display:inline-block;padding:0.125rem 0.375rem;border-radius:0.25rem;background:var(--color-surface-raised,#f3f3f3);${s};margin-inline-end:0.25rem`;r.innerHTML="";for(let a of this.#t){let c=document.createElement("article");c.setAttribute("role","listitem"),c.setAttribute("data-id",a.id),c.style.cssText=e,c.innerHTML=`
-        <h3 style="${n}">${d(a.name)}</h3>
-        <p style="${s};margin:0">${d(a.summary||"")}</p>
-        <p style="${s};margin:0">License: ${d(a.license)}</p>
-        <p style="margin:0">${(a.tags||[]).map(f=>`<span style="${o}">${d(f)}</span>`).join("")}</p>
-        <button type="button" class="tc-apply" style="${i}" data-id="${z(a.id)}" aria-label="Apply ${z(a.name)} tokens">
-          Apply
-        </button>
-      `;let l=c.querySelector("button.tc-apply");l&&this.listen(l,"click",()=>this.#l(a)),r.appendChild(c)}}async#l(r){let e=this.#r();if(!e){this.#o(r.id,new Error(`Target ${this.getAttribute("target")||"#preview"} not found`),"apply");return}try{let n=await fetch(`${this.#n()}/${r.file}`);if(!n.ok)throw new Error(`Fetch failed: ${n.status}`);let i=await n.json(),s=x(i);for(let[o,a]of s.tokens)e.style.setProperty(o,a);this.#u(r,s),this.#e=r.id,this.dispatchEvent(new CustomEvent("theme-catalog:applied",{bubbles:!0,detail:{id:r.id,applied:s.stats.applied,ignored:s.ignored,tokens:s.tokens,source:"catalog"}}))}catch(n){this.#o(r.id,n,"fetch-or-apply")}}#u(r,e){let n=this.querySelector(".tc-result");n&&(n.textContent=`Applied ${e.stats.applied} token${e.stats.applied===1?"":"s"} from ${r.name}${e.stats.ignored?` \xB7 ${e.stats.ignored} ignored`:""}.`);let i=this.querySelector(".tc-attribution");i&&(i.hidden=!1,i.textContent=r.attribution);let s=this.querySelector(".tc-ignored"),o=this.querySelector(".tc-ignored-list");s&&o&&(e.ignored.length===0?(s.hidden=!0,o.innerHTML=""):(s.hidden=!1,o.innerHTML=e.ignored.map(a=>`<li>${d(a)}</li>`).join("")))}#o(r,e,n){let i=this.querySelector(".tc-result");i&&(i.textContent=`Error (${n}): ${e&&e.message?e.message:String(e)}`),this.dispatchEvent(new CustomEvent("theme-catalog:error",{bubbles:!0,detail:{id:r,error:e,phase:n}}))}};function d(t){return String(t).replace(/[&<>"']/g,r=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[r])}function z(t){return d(t)}y("theme-catalog",g);export{g as ThemeCatalog};
-//# sourceMappingURL=theme-catalog.js.map

package/dist/cdn/components/theme-export.js

@@ -1,26 +0,0 @@
-var Z=window.matchMedia("(prefers-reduced-motion: reduce)");var E=new Map;function w(n,t,e={}){let o=e.priority??10,s={impl:t,bundle:e.bundle,contract:e.contract,priority:o},r=E.get(n);if(customElements.get(n)){if(!r||r.priority>=o){r&&r.priority===o&&r.impl!==t&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${r.bundle}" (priority ${r.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${n}> defined by "${r.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(r&&r.priority>=o){r.priority===o&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${r.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}E.set(n,s),customElements.define(n,t)}var d=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,e,o,s){t.addEventListener(e,o,s),this.#e.push(()=>t.removeEventListener(e,o,s))}setup(){}teardown(){}setState(t,e){this.#t||(this.#t=this.attachInternals());let o=this.#t.states;try{e?o.add(t):o.delete(t)}catch{let s=`--${t}`;e?o.add(s):o.delete(s)}}_adoptInternals(t){this.#t||(this.#t=t)}};var h="[data-copy], [data-copy-target], [data-paste-target]",A="Copied to clipboard",z="Pasted from clipboard",m=new WeakMap;async function y(n,t={}){if(n==null||n==="")return!1;let{button:e,announceMessage:o=A,duration:s=1500}=t;try{await navigator.clipboard.writeText(n)}catch{return!1}return k({button:e,duration:s,announceMessage:o,eventDetail:{text:n}}),!0}function k({button:n,duration:t,announceMessage:e,eventDetail:o,state:s="copied",eventName:r="copy"}){if(n){n.dataset.state=s;let i=m.get(n);i&&clearTimeout(i),m.set(n,setTimeout(()=>{delete n.dataset.state,m.delete(n)},t)),n.dispatchEvent(new CustomEvent(r,{bubbles:!0,detail:o}))}O(e,n??document.body)}async function L(n,t={}){let{button:e,announceMessage:o=z,duration:s=1500}=t,r;try{r=await navigator.clipboard.readText()}catch{return null}return n&&("value"in n&&(n instanceof HTMLInputElement||n instanceof HTMLTextAreaElement||n instanceof HTMLSelectElement)?n.value=r:n.textContent=r,n.dispatchEvent(new Event("input",{bubbles:!0}))),k({button:e,duration:s,announceMessage:o,eventDetail:{text:r},state:"pasted",eventName:"paste"}),r}function S(n=document){n.querySelectorAll(h).forEach(b)}function b(n){n.hasAttribute("data-copy-init")||(n.setAttribute("data-copy-init",""),n.addEventListener("click",()=>{if(n.dataset.pasteTarget){let e=document.querySelector(n.dataset.pasteTarget);if(!e)return;L(e,{button:n});return}let t=D(n);t&&y(t,{button:n})}))}function D(n){if(n.dataset.copy)return n.dataset.copy;if(n.dataset.copyTarget){let t=document.querySelector(n.dataset.copyTarget);if(!t)return"";let e=n.dataset.copyAttr;return e?t.getAttribute(e)??"":t.textContent??""}return""}function O(n,t){let e=document.createElement("div");e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),e.className="visually-hidden",e.textContent=n,t.appendChild(e),setTimeout(()=>e.remove(),1e3)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>S()):S();var M=new MutationObserver(n=>{for(let t of n)for(let e of t.addedNodes){if(e.nodeType!==Node.ELEMENT_NODE)continue;let o=e;o.matches(h)&&b(o),o.querySelectorAll(h).forEach(s=>b(s))}});M.observe(document.documentElement,{childList:!0,subtree:!0});var u="com.vanilla-breeze",F="2025.10";function T(n,t={}){let e={},o=[],s=!1;for(let[i,a]of n){let c=String(a).trim(),l=I(i);if(!l){o.push(i);continue}l.path[0]==="color"&&l.path[1]==="seeds"&&(s=!0);let C=B(i,c,l);Y(e,l.path,l.name,C)}let r={spec:F};return t.vbVersion&&(r.vbVersion=t.vbVersion),s&&(r.seedDerivation=!0),o.length&&(r.unmapped=o),e.$extensions={[u]:r},e}function I(n){let t=[{p:"--hue-",path:["color","seeds"],type:"number",keep:!0},{p:"--lightness-",path:["color","seeds"],type:"number",keep:!0},{p:"--chroma-",path:["color","seeds"],type:"number",keep:!0},{p:"--color-",path:["color"],type:"color"},{p:"--font-size-",path:["typography","size"],type:"dimension"},{p:"--font-weight-",path:["typography","weight"],type:"fontWeight"},{p:"--font-",path:["typography","family"],type:"fontFamily"},{p:"--line-height-",path:["typography","lineHeight"],type:"number"},{p:"--letter-spacing-",path:["typography","letterSpacing"],type:"dimension"},{p:"--size-",path:["spacing"],type:"dimension"},{p:"--radius-",path:["border","radius"],type:"dimension"},{p:"--border-width-",path:["border","width"],type:"dimension"},{p:"--duration-",path:["motion","duration"],type:"duration"},{p:"--ease-",path:["motion","easing"],type:"cubicBezier"},{p:"--shadow-",path:["effect","shadow"],type:"shadow"}];for(let{p:e,path:o,type:s,keep:r}of t)if(n.startsWith(e)){let i=r?n.slice(2):n.slice(e.length);return{path:o,type:s,name:i}}return null}function B(n,t,e){switch(e.type){case"color":return q(t);case"fontFamily":return{$type:"fontFamily",$value:P(t)};case"fontWeight":return{$type:"fontWeight",$value:$(t)};case"number":return R(t);case"dimension":return _(t);case"duration":return{$type:"duration",$value:V(t)};case"cubicBezier":return W(t);case"shadow":return H(t);default:return{$value:t}}}function q(n){let t=X(n);if(t)return{$root:{$type:"color",$value:p(t.light)??g(t.light)},light:{$type:"color",$value:p(t.light)??g(t.light)},dark:{$type:"color",$value:p(t.dark)??g(t.dark)},$extensions:{[u]:{lightDark:n}}};if(/\bfrom\b/.test(n)&&/^oklch\(/i.test(n))return{$type:"color",$value:{colorSpace:"srgb",components:[0,0,0]},$extensions:{[u]:{expression:n}}};let e=p(n);return e?{$type:"color",$value:e}:{$type:"color",$value:{colorSpace:"srgb",components:[0,0,0]},$extensions:{[u]:{literal:n}}}}function g(n){return{colorSpace:"srgb",components:[0,0,0],$vbLiteral:n}}function p(n){let t=String(n).trim(),e=t.match(/^oklch\(\s*([^)]+)\)\s*$/i);if(e){let[o,s]=j(e[1]),r=o.trim().split(/\s+/);if(r.length<3)return null;let i=f(r[0]),a=$(r[1]),c=$(r[2]);if([i,a,c].some(Number.isNaN))return null;let l={colorSpace:"oklch",components:[U(r[0],i),a,c]};return s!=null&&(l.alpha=s),l}if(e=t.match(/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i),e){let o=e[1],s,r,i,a;o.length===3||o.length===4?(s=parseInt(o[0]+o[0],16)/255,r=parseInt(o[1]+o[1],16)/255,i=parseInt(o[2]+o[2],16)/255,o.length===4&&(a=parseInt(o[3]+o[3],16)/255)):(s=parseInt(o.slice(0,2),16)/255,r=parseInt(o.slice(2,4),16)/255,i=parseInt(o.slice(4,6),16)/255,o.length===8&&(a=parseInt(o.slice(6,8),16)/255));let c={colorSpace:"srgb",components:[s,r,i],hex:"#"+(o.length<=4?o.slice(0,3).split("").map(l=>l+l).join(""):o.slice(0,6)).toLowerCase()};return a!=null&&(c.alpha=a),c}if(e=t.match(/^rgba?\(\s*([^)]+)\)\s*$/i),e){let o=e[1].split(/\s*,\s*|\s+/).filter(Boolean);if(o.length<3)return null;let s=v(o[0]),r=v(o[1]),i=v(o[2]),a={colorSpace:"srgb",components:[s,r,i]};return o[3]!=null&&(a.alpha=f(o[3])),a}return null}function U(n,t){return typeof n=="string"&&n.endsWith("%")?t/100:t}function j(n){let t=n.indexOf("/");if(t<0)return[n,null];let e=n.slice(0,t),o=f(n.slice(t+1).trim());return[e,o]}function v(n){let t=n.trim();return t.endsWith("%")?parseFloat(t)/100:parseFloat(t)/255}function R(n){let e={$type:"number",$value:f(n)};return typeof n=="string"&&n.trim().endsWith("%")&&(e.$extensions={[u]:{unit:"%"}}),e}function _(n){let t=String(n).trim(),e=t.match(/^(-?[\d.]+)(px|rem|em|%)?$/);if(!e)return{$type:"dimension",$value:{value:0,unit:"px"},$extensions:{[u]:{literal:t}}};let o=parseFloat(e[1]),s=e[2]||"px",i={$type:"dimension",$value:{value:o,unit:s==="px"||s==="rem"?s:"rem"}};return s!=="px"&&s!=="rem"&&(i.$extensions={[u]:{unit:s}}),i}function $(n){return parseFloat(String(n).trim())}function f(n){let t=String(n).trim();return t.endsWith("%"),parseFloat(t)}function P(n){let t=[],e="",o=null;for(let r of String(n))if(o){if(r===o){o=null;continue}e+=r}else if(r==='"'||r==="'")o=r;else if(r===","){let i=e.trim();i&&t.push(i),e=""}else e+=r;let s=e.trim();return s&&t.push(s),t}function V(n){let t=String(n).trim(),e=t.match(/^(-?[\d.]+)(ms|s)$/);return e?{value:parseFloat(e[1]),unit:e[2]}:{value:parseFloat(t),unit:"ms"}}function W(n){let t=String(n).match(/^cubic-bezier\(\s*([^)]+)\)\s*$/i);if(!t)return{$type:"cubicBezier",$value:[0,0,1,1],$extensions:{[u]:{literal:n}}};let e=t[1].split(",").map(o=>parseFloat(o.trim()));return e.length!==4||e.some(Number.isNaN)?{$type:"cubicBezier",$value:[0,0,1,1],$extensions:{[u]:{literal:n}}}:{$type:"cubicBezier",$value:e}}function H(n){let e=N(String(n)).map(G);return e.some(o=>o==null)?{$type:"shadow",$value:{offsetX:{value:0,unit:"px"},offsetY:{value:0,unit:"px"},blur:{value:0,unit:"px"},color:{colorSpace:"srgb",components:[0,0,0]}},$extensions:{[u]:{literal:n}}}:e.length===1?{$type:"shadow",$value:e[0]}:{$type:"shadow",$value:e}}function G(n){let t=n.trim(),e=t.match(/(#[0-9a-f]{3,8}|rgba?\([^)]+\)|oklch\([^)]+\))$/i);if(!e)return null;let o=p(e[0]);if(!o)return null;let r=t.slice(0,e.index).trim().split(/\s+/).filter(Boolean);if(r.length<3)return null;let i=c=>J(r[c]),a={offsetX:i(0),offsetY:i(1),blur:i(2),color:o};return r[3]&&(a.spread=i(3)),a}function J(n){let t=n.match(/^(-?[\d.]+)(px|rem|em)?$/);if(!t)return{value:0,unit:"px"};let e=parseFloat(t[1]),o=t[2]||"px";return{value:e,unit:o==="px"||o==="rem"?o:"rem"}}function N(n){let t=[],e="",o=0;for(let s of n)s==="("?o++:s===")"&&o--,s===","&&o===0?(t.push(e),e=""):e+=s;return e.trim()&&t.push(e),t}function X(n){let t=String(n).match(/^light-dark\(\s*([\s\S]+)\s*\)\s*$/i);if(!t)return null;let e=N(t[1]);return e.length!==2?null:{light:e[0].trim(),dark:e[1].trim()}}function Y(n,t,e,o){let s=n;for(let r of t)(!s[r]||typeof s[r]!="object")&&(s[r]={}),s=s[r];s[e]=o}var K="--color-,--hue-,--lightness-,--chroma-,--font-,--size-,--radius-,--shadow-,--border-width-,--ease-,--duration-,--line-height-,--letter-spacing-",Q=["type-specimen:change","spacing-specimen:change","token-specimen:change","semantic-palette:change"],x=class extends d{static observedAttributes=["scope","selector","include","format","label","live"];setup(){this.#o(),this.#n(),this.#r(),this.#s()}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&(this.#o(),this.#n(),this.#r(),this.#s())}#e(){let t=this.getAttribute("scope")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}#t(){return(this.getAttribute("include")||K).split(",").map(e=>e.trim()).filter(Boolean)}#i(){let t=this.#e();if(!t)return[];let e=this.#t(),o=t.style,s=[];for(let r=0;r<o.length;r++){let i=o.item(r);if(!i.startsWith("--")||!e.some(c=>i.startsWith(c)))continue;let a=o.getPropertyValue(i).trim();a&&s.push([i,a])}return s}#a(t){let e=this.getAttribute("format")||"css";if(e==="json"){let r=Object.fromEntries(t);return JSON.stringify(r,null,2)}if(e==="dtcg"){let r=this.getAttribute("vb-version")||void 0;return JSON.stringify(T(t,{vbVersion:r}),null,2)}let o=this.getAttribute("selector")||":root";if(!t.length)return`${o} {
-  /* No theme overrides detected yet. Edit a specimen to populate. */
-}
-`;let s=t.map(([r,i])=>`  ${r}: ${i};`).join(`
-`);return`${o} {
-${s}
-}
-`}#o(){let t=this.getAttribute("label")||"",e=t?`<p style="font-weight:600;margin:0 0 var(--size-xs,0.5rem)">${t}</p>`:"",o="display:flex;gap:var(--size-2xs,0.375rem);margin-block-end:var(--size-xs,0.5rem);align-items:center;flex-wrap:wrap",s="padding:0.375rem 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,#222);cursor:pointer;font:inherit;font-size:var(--font-size-xs,0.75rem)",r="padding:0.375rem 0.5rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#222);font:inherit;font-size:var(--font-size-xs,0.75rem)",i="inline-size:100%;block-size:16rem;padding:var(--size-s,0.75rem);border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface-sunken,#f8f8f8);color:var(--color-text,#222);font-family:var(--font-mono,monospace);font-size:var(--font-size-xs,0.75rem);white-space:pre;overflow:auto;tab-size:2;resize:vertical;box-sizing:border-box",a=this.getAttribute("format")||"css";this.innerHTML=`
-      ${e}
-      <div class="te-toolbar" style="${o}">
-        <label style="display:flex;gap:var(--size-2xs,0.375rem);align-items:center;font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666)">
-          Format
-          <select class="te-format" style="${r}" aria-label="Output format">
-            <option value="css"${a==="css"?" selected":""}>CSS</option>
-            <option value="json"${a==="json"?" selected":""}>JSON</option>
-            <option value="dtcg"${a==="dtcg"?" selected":""}>DTCG</option>
-          </select>
-        </label>
-        <button type="button" class="te-refresh" style="${s}" aria-label="Refresh">Refresh</button>
-        <button type="button" class="te-copy" style="${s}">Copy</button>
-        <button type="button" class="te-download" style="${s}">Download</button>
-        <span class="te-count" style="align-self:center;font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666);margin-inline-start:auto"></span>
-      </div>
-      <textarea class="te-output" readonly aria-label="Theme output" style="${i}"></textarea>
-    `}#n(){let t=this.#i(),e=this.#a(t),o=this.querySelector(".te-output"),s=this.querySelector(".te-count");o&&(o.value=e),s&&(s.textContent=`${t.length} token${t.length===1?"":"s"}`),this.dispatchEvent(new CustomEvent("theme-export:change",{bubbles:!0,detail:{output:e,format:this.getAttribute("format")||"css",tokens:Object.fromEntries(t)}}))}#r(){let t=this.querySelector(".te-refresh"),e=this.querySelector(".te-copy"),o=this.querySelector(".te-download"),s=this.querySelector(".te-format");s&&this.listen(s,"change",()=>{this.setAttribute("format",s.value)}),t&&this.listen(t,"click",()=>this.#n()),e&&this.listen(e,"click",()=>{let r=this.querySelector(".te-output");r&&y(r.value,{button:e,announceMessage:"Theme copied"})}),o&&this.listen(o,"click",()=>this.#c())}#c(){let t=this.querySelector(".te-output");if(!t)return;let e=this.getAttribute("format")||"css",o="css",s="text/css",r="theme.css";e==="json"?(o="json",s="application/json",r="theme.json"):e==="dtcg"&&(o="tokens.json",s="application/design-tokens+json",r="theme.tokens.json");let i=new Blob([t.value],{type:s}),a=URL.createObjectURL(i),c=document.createElement("a");c.href=a,c.download=r,c.click(),URL.revokeObjectURL(a)}#s(){if(this.hasAttribute("live"))for(let t of Q)this.listen(document,t,()=>this.#n())}};w("theme-export",x);
-//# sourceMappingURL=theme-export.js.map

package/dist/cdn/components/theme-import.js

@@ -1,44 +0,0 @@
-var B=window.matchMedia("(prefers-reduced-motion: reduce)");var y=new Map;function g(t,r,e={}){let n=e.priority??10,i={impl:r,bundle:e.bundle,contract:e.contract,priority:n},s=y.get(t);if(customElements.get(t)){if(!s||s.priority>=n){s&&s.priority===n&&s.impl!==r&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=n){s.priority===n&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}y.set(t,i),customElements.define(t,r)}var d=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 r of this.#e)r();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(r,e,n,i){r.addEventListener(e,n,i),this.#e.push(()=>r.removeEventListener(e,n,i))}setup(){}teardown(){}setState(r,e){this.#t||(this.#t=this.attachInternals());let n=this.#t.states;try{e?n.add(r):n.delete(r)}catch{let i=`--${r}`;e?n.add(i):n.delete(i)}}_adoptInternals(r){this.#t||(this.#t=r)}};var $="com.vanilla-breeze";function x(t){let r=[],e=[],n=t&&typeof t=="object"?t:{};return v(n,[],void 0,n,r,e),{tokens:r,ignored:e,stats:{applied:r.length,ignored:e.length}}}function v(t,r,e,n,i,s){if(!t||typeof t!="object")return;if("$value"in t){z(t,r,e??t.$type,n,i,s);return}if(k(t)){E(t,r,e??t.$type??"color",n,i,s);return}let o=t.$type??e;for(let[a,l]of Object.entries(t))a.startsWith("$")||v(l,[...r,a],o,n,i,s)}function k(t){return["$root","light","dark"].some(e=>t[e]&&typeof t[e]=="object"&&"$value"in t[e])}function p(t){let[r,e,...n]=t;switch(r){case"color":{if(e==="seeds")return n.length?`--${n.join("-")}`:null;let i=[e,...n].filter(Boolean).join("-");return i?`--color-${i}`:null}case"typography":{let i=n.join("-")||e,s=n.length?n.join("-"):"";switch(e){case"family":return s?`--font-${s}`:null;case"size":return s?`--font-size-${s}`:null;case"weight":return s?`--font-weight-${s}`:null;case"lineHeight":return s?`--line-height-${s}`:null;case"letterSpacing":return s?`--letter-spacing-${s}`:null;default:return null}let o=i}case"spacing":return[e,...n].filter(Boolean).length?`--size-${[e,...n].filter(Boolean).join("-")}`:null;case"border":{let i=n.join("-")||"";return e==="radius"?i?`--radius-${i}`:null:e==="width"&&i?`--border-width-${i}`:null}case"motion":{let i=n.join("-")||"";return e==="duration"?i?`--duration-${i}`:null:e==="easing"&&i?`--ease-${i}`:null}case"effect":{let i=n.join("-")||"";return e==="shadow"&&i?`--shadow-${i}`:null}default:return null}}function z(t,r,e,n,i,s){if((e==="typography"||t.$type==="typography")&&t.$value&&typeof t.$value=="object"&&!Array.isArray(t.$value)&&r[0]==="typography"){F(t,r,i);return}let o=p(r);if(!o){s.push(r.join("."));return}let a=e??j(r),l=t.$extensions&&t.$extensions[$]||{};if(l.expression){i.push([o,l.expression]);return}if(l.lightDark){i.push([o,l.lightDark]);return}let c=f(t.$value,a,l,n);if(c==null){s.push(r.join("."));return}i.push([o,c])}function j(t){let[r,e]=t;if(r==="color")return"color";if(r==="spacing"||r==="border"&&(e==="radius"||e==="width"))return"dimension";if(r==="motion"&&e==="duration")return"duration";if(r==="motion"&&e==="easing")return"cubicBezier";if(r==="effect"&&e==="shadow")return"shadow";if(r==="typography"){if(e==="family")return"fontFamily";if(e==="size")return"dimension";if(e==="weight")return"fontWeight";if(e==="lineHeight")return"number";if(e==="letterSpacing")return"dimension"}}function E(t,r,e,n,i,s){let o=p(r);if(!o){s.push(r.join("."));return}let a=t.$extensions&&t.$extensions[$]||{};if(a.lightDark){i.push([o,a.lightDark]);return}let l=t.light?.$value?f(t.light.$value,e,{},n):null,c=t.dark?.$value?f(t.dark.$value,e,{},n):null,m=t.$root?.$value?f(t.$root.$value,e,{},n):null;if(l&&c){i.push([o,`light-dark(${l}, ${c})`]);return}if(m){i.push([o,m]);return}if(l){i.push([o,l]);return}if(c){i.push([o,c]);return}s.push(r.join("."))}function f(t,r,e,n){if(typeof t=="string"&&/^\{[^}]+\}$/.test(t)){let i=t.slice(1,-1).split("."),s=p(i);return s?`var(${s})`:t}switch(r){case"color":return S(t,e);case"fontFamily":return w(t);case"fontWeight":return String(t);case"number":return C(t,e);case"dimension":return u(t,e);case"duration":return q(t);case"cubicBezier":return Array.isArray(t)?`cubic-bezier(${t.join(", ")})`:null;case"shadow":return M(t);default:return typeof t=="string"||typeof t=="number"?String(t):null}}function S(t,r){if(!t||typeof t!="object")return null;if(t.hex)return t.hex;if(t.colorSpace==="oklch"){let[e,n,i]=t.components||[0,0,0],s=t.alpha!=null?` / ${t.alpha}`:"";return`oklch(${e} ${n} ${i}${s})`}if(t.colorSpace==="srgb"){let[e,n,i]=t.components||[0,0,0],s=t.alpha;return s!=null?`rgba(${Math.round(e*255)}, ${Math.round(n*255)}, ${Math.round(i*255)}, ${s})`:T(e,n,i)}return null}function T(t,r,e){let n=i=>Math.round(i*255).toString(16).padStart(2,"0");return`#${n(t)}${n(r)}${n(e)}`}var A=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","math","emoji","fangsong","-apple-system","BlinkMacSystemFont"]);function w(t){return typeof t=="string"?t:Array.isArray(t)?t.map(r=>A.has(r)||r.startsWith('"')||r.startsWith("'")?r:`"${r}"`).join(", "):null}function C(t,r){return r.unit==="%"?`${t}%`:String(t)}function u(t,r){if(!t||typeof t!="object")return null;let e=r.unit||t.unit||"px";return`${t.value}${e}`}function q(t){return!t||typeof t!="object"?null:`${t.value}${t.unit||"ms"}`}function M(t){return Array.isArray(t)?t.map(b).filter(Boolean).join(", "):b(t)}function b(t){if(!t)return null;let r=u(t.offsetX,{})??"0px",e=u(t.offsetY,{})??"0px",n=u(t.blur,{})??"0px",i=t.spread?" "+u(t.spread,{}):"",s=S(t.color,{})??"#000";return`${r} ${e} ${n}${i} ${s}`}function F(t,r,e){let n=t.$value,i=r[r.length-1];n.fontFamily!=null&&e.push([`--font-${i}`,w(n.fontFamily)]),n.fontSize!=null&&e.push([`--font-size-${i}`,u(n.fontSize,{})]),n.fontWeight!=null&&e.push([`--font-weight-${i}`,String(n.fontWeight)]),n.lineHeight!=null&&e.push([`--line-height-${i}`,String(n.lineHeight)]),n.letterSpacing!=null&&e.push([`--letter-spacing-${i}`,u(n.letterSpacing,{})])}var h=class extends d{static observedAttributes=["target","placeholder"];setup(){this.#t(),this.#i()}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&(this.#t(),this.#i())}#e(){let r=this.getAttribute("target")||"#preview";try{return document.querySelector(r)}catch{return null}}#t(){let r=this.getAttribute("placeholder")||"Paste DTCG tokens.json here\u2026",e="padding:0.375rem 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,#222);cursor:pointer;font:inherit;font-size:var(--font-size-xs,0.75rem)",n="padding:0.375rem 0.5rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#222);font:inherit;font-size:var(--font-size-xs,0.75rem)",i="inline-size:100%;block-size:10rem;padding:var(--size-s,0.75rem);border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface-sunken,#f8f8f8);color:var(--color-text,#222);font-family:var(--font-mono,monospace);font-size:var(--font-size-xs,0.75rem);white-space:pre;overflow:auto;tab-size:2;resize:vertical;box-sizing:border-box",s="display:flex;flex-wrap:wrap;gap:var(--size-2xs,0.375rem);align-items:center;margin-block-end:var(--size-s,0.5rem)",o="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666)";this.innerHTML=`
-      <div class="ti-modes" role="tablist" aria-label="Import source" style="${s}">
-        <button type="button" class="ti-mode" data-mode="paste" style="${e}" role="tab" aria-selected="true">Paste</button>
-        <button type="button" class="ti-mode" data-mode="file"  style="${e}" role="tab" aria-selected="false">File</button>
-        <button type="button" class="ti-mode" data-mode="url"   style="${e}" role="tab" aria-selected="false">URL</button>
-        <span style="${o};margin-inline-start:auto" class="ti-target"></span>
-      </div>
-
-      <div class="ti-pane ti-pane-paste" role="tabpanel">
-        <textarea class="ti-paste" aria-label="DTCG JSON" placeholder="${r}" style="${i}"></textarea>
-        <div style="${s};margin-block-start:var(--size-2xs,0.375rem)">
-          <button type="button" class="ti-apply-paste" style="${e}">Apply</button>
-        </div>
-      </div>
-
-      <div class="ti-pane ti-pane-file" role="tabpanel" hidden>
-        <label style="display:flex;flex-direction:column;gap:var(--size-2xs,0.375rem);${o}">
-          <span>DTCG file (.tokens.json or .json)</span>
-          <input class="ti-file" type="file" accept=".json,.tokens,.tokens.json,application/json,application/design-tokens+json" style="${n}">
-        </label>
-      </div>
-
-      <div class="ti-pane ti-pane-url" role="tabpanel" hidden>
-        <label style="display:flex;flex-direction:column;gap:var(--size-2xs,0.375rem);${o}">
-          <span>DTCG URL (CORS-permitted host)</span>
-          <input class="ti-url" type="url" placeholder="https://example.com/theme.tokens.json" style="${n}">
-        </label>
-        <div style="${s};margin-block-start:var(--size-2xs,0.375rem)">
-          <button type="button" class="ti-apply-url" style="${e}">Fetch &amp; apply</button>
-        </div>
-      </div>
-
-      <output class="ti-result" style="display:block;margin-block-start:var(--size-s,0.5rem);${o}"></output>
-
-      <details class="ti-ignored" style="margin-block-start:var(--size-2xs,0.375rem)" hidden>
-        <summary style="${o};cursor:pointer">Ignored tokens</summary>
-        <ul class="ti-ignored-list" style="margin:var(--size-2xs,0.375rem) 0 0;padding-inline-start:1.25rem;${o}"></ul>
-      </details>
-
-      <div style="${s};margin-block-start:var(--size-s,0.5rem)">
-        <button type="button" class="ti-reset" style="${e}">Reset preview scope</button>
-      </div>
-    `,this.#s()}#s(){let r=this.querySelector(".ti-target");if(!r)return;let e=this.getAttribute("target")||"#preview",n=this.#e();r.textContent=n?`Target: ${e}`:`Target ${e} not found`}#i(){for(let s of this.querySelectorAll(".ti-mode"))this.listen(s,"click",()=>this.#o(s.dataset.mode||"paste"));let r=this.querySelector(".ti-apply-paste");r&&this.listen(r,"click",()=>this.#a());let e=this.querySelector(".ti-file");e&&this.listen(e,"change",()=>this.#l(e));let n=this.querySelector(".ti-apply-url");n&&this.listen(n,"click",()=>this.#c());let i=this.querySelector(".ti-reset");i&&this.listen(i,"click",()=>this.#u())}#o(r){for(let e of this.querySelectorAll(".ti-mode")){let n=e,i=n.dataset.mode===r;n.setAttribute("aria-selected",String(i))}for(let e of this.querySelectorAll(".ti-pane")){let n=e;n.hidden=!n.classList.contains(`ti-pane-${r}`)}}#a(){let r=this.querySelector(".ti-paste");r&&this.#n(r.value,"paste")}async#l(r){let e=r.files?.[0];if(e)try{let n=await e.text();this.#n(n,"file")}catch(n){this.#r(n,"file")}}async#c(){let e=this.querySelector(".ti-url")?.value?.trim();if(e)try{let n=await fetch(e,{mode:"cors"});if(!n.ok)throw new Error(`Fetch failed: ${n.status} ${n.statusText}`);let i=await n.text();this.#n(i,"url")}catch(n){this.#r(n,"url")}}#n(r,e){let n;try{n=JSON.parse(r)}catch(o){this.#r(o,"parse");return}let i=x(n),s=this.#e();if(!s){this.#r(new Error(`Target ${this.getAttribute("target")||"#preview"} not found`),"apply");return}for(let[o,a]of i.tokens)s.style.setProperty(o,a);this.#d(i,e),this.dispatchEvent(new CustomEvent("theme-import:applied",{bubbles:!0,detail:{tokens:i.tokens,applied:i.stats.applied,ignored:i.ignored,source:e}}))}#u(){let r=this.#e();if(!r)return;let e=r.style,n=[];for(let o=0;o<e.length;o++){let a=e.item(o);a.startsWith("--")&&n.push(a)}for(let o of n)e.removeProperty(o);let i=this.querySelector(".ti-result");i&&(i.textContent=`Cleared ${n.length} custom properties from ${this.getAttribute("target")||"#preview"}.`);let s=this.querySelector(".ti-ignored");s&&(s.hidden=!0)}#d(r,e){let n=this.querySelector(".ti-result");n&&(n.textContent=`Applied ${r.stats.applied} token${r.stats.applied===1?"":"s"} from ${e}${r.stats.ignored?` \xB7 ${r.stats.ignored} ignored`:""}.`);let i=this.querySelector(".ti-ignored"),s=this.querySelector(".ti-ignored-list");if(i&&s){let o=i;r.ignored.length===0?(o.hidden=!0,s.innerHTML=""):(o.hidden=!1,s.innerHTML=r.ignored.map(a=>`<li>${L(a)}</li>`).join(""))}}#r(r,e){let n=this.querySelector(".ti-result");n&&(n.textContent=`Error (${e}): ${r&&r.message?r.message:String(r)}`),this.dispatchEvent(new CustomEvent("theme-import:error",{bubbles:!0,detail:{error:r,phase:e}}))}};function L(t){return String(t).replace(/[&<>"']/g,r=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[r])}g("theme-import",h);export{h as ThemeImport};
-//# sourceMappingURL=theme-import.js.map

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

@@ -1,26 +0,0 @@
-var E=window.matchMedia("(prefers-reduced-motion: reduce)");var p=new Map;function h(i,e,o={}){let t=o.priority??10,r={impl:e,bundle:o.bundle,contract:o.contract,priority:t},n=p.get(i);if(customElements.get(i)){if(!n||n.priority>=t){n&&n.priority===t&&n.impl!==e&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${o.bundle}".`);return}console.warn(`[VB Bundle] Tag <${i}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${o.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=t){n.priority===t&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${n.bundle}". Skipping "${o.bundle}" (first wins at equal priority).`);return}p.set(i,r),customElements.define(i,e)}var m=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,o,t,r){e.addEventListener(o,t,r),this.#t.push(()=>e.removeEventListener(o,t,r))}setup(){}teardown(){}setState(e,o){this.#e||(this.#e=this.attachInternals());let t=this.#e.states;try{o?t.add(e):t.delete(e)}catch{let r=`--${e}`;o?t.add(r):t.delete(r)}}_adoptInternals(e){this.#e||(this.#e=e)}};var v={shadow:{prefix:"--shadow-",tokens:"xs,s,m,l,xl,2xl"},radius:{prefix:"--radius-",tokens:"xs,s,m,l,xl,2xl,full"},border:{prefix:"--border-width-",tokens:"thin,medium,thick"},color:{prefix:"--color-",tokens:"primary,secondary,accent,success,warning,error,info"},size:{prefix:"--size-",tokens:"3xs,2xs,xs,s,m,l,xl,2xl,3xl"},icon:{prefix:"",tokens:"home,search,settings,user,bell,heart,star,check,x,chevron-right,menu,trash"}},y={shadow:b,radius:g,border:x,color:$,size:k,icon:w},f=class extends m{static observedAttributes=["type","tokens","prefix","show-values","label","size","icon-set","editable","target"];setup(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}#t(){let e=this.getAttribute("type")||"shadow",o=v[e]||v.shadow,t=this.getAttribute("prefix")||o.prefix,r=this.getAttribute("tokens")||o.tokens,n=this.getAttribute("show-values")!=="false",a=this.getAttribute("label")||"",l=r.split(",").map(d=>d.trim()),s=y[e]||y.shadow,c="";a&&(c+=`<p style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted,#666);margin-block-end:0.75rem;font-family:var(--font-sans,system-ui)">${a}</p>`),c+=s(l,t,n,this),this.innerHTML=c;let u=this.hasAttribute("editable")&&e!=="icon";n&&e!=="icon"?requestAnimationFrame(()=>{this.#n(e,t,l),u&&this.#e(e,t)}):u&&requestAnimationFrame(()=>this.#e(e,t))}#e(e,o){let t=getComputedStyle(this);this.querySelectorAll("[data-token-value]").forEach(r=>{let n=r,a=n.dataset.tokenValue,l=t.getPropertyValue(`${o}${a}`).trim(),s=document.createElement("input");s.type=e==="color"&&/^#[0-9a-f]{3,8}$/i.test(l)?"color":"text",s.value=l||"",s.className="ts-edit",s.setAttribute("data-token",a||""),s.setAttribute("aria-label",`${a} value`),s.style.cssText=`font-family:var(--font-mono,monospace);font-size:0.625rem;padding:0.125rem 0.25rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#222);inline-size:${e==="color"?"3rem":"100%"};${e==="color"?"block-size:1.5rem;padding:0;":"max-inline-size:8rem;"}`,n.replaceWith(s),this.listen(s,"change",()=>this.#r(s,o)),this.listen(s,"keydown",c=>{c.key==="Enter"&&this.#r(s,o)})})}#r(e,o){let t=e.getAttribute("data-token"),r=e.value.trim();if(!t||!r)return;let n=this.#o(),a=`${o}${t}`;n&&n.style.setProperty(a,r),this.dispatchEvent(new CustomEvent("token-specimen:change",{bubbles:!0,detail:{name:t,value:r,token:a,target:this.getAttribute("target")||":root"}}))}#o(){let e=this.getAttribute("target")||":root";try{return e===":root"?document.documentElement:document.querySelector(e)}catch{return document.documentElement}}#n(e,o,t){let r=getComputedStyle(this);this.querySelectorAll("[data-token-value]").forEach(n=>{let a=n,l=a.dataset.tokenValue,s=r.getPropertyValue(`${o}${l}`).trim();if(e==="radius"||e==="size"){let c=this.querySelector(`[data-token-sample="${l}"]`);if(c){let u=e==="radius"?"borderRadius":"width",d=e==="size"?c.getBoundingClientRect().width:null;a.textContent=d!=null?`${Math.round(d*100)/100}px`:s||"\u2014"}}else a.textContent=s||"\u2014"})}};function b(i,e,o){let t='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem;align-items:end">';for(let r of i)t+=`<div role="listitem" style="text-align:center">
-      <div style="width:7rem;height:5rem;background:var(--color-surface,#fff);border-radius:var(--radius-m,0.5rem);box-shadow:var(${e}${r})" aria-hidden="true"></div>
-      <p style="font-family:var(--font-mono,monospace);font-size:0.75rem;color:var(--color-text-muted,#666);margin-block-start:0.5rem">${r}</p>
-      ${o?`<p data-token-value="${r}" style="font-family:var(--font-mono,monospace);font-size:0.625rem;color:var(--color-text-muted,#999);max-width:7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></p>`:""}
-    </div>`;return t+="</div>",t}function g(i,e,o){let t='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem;align-items:end">';for(let r of i)t+=`<div role="listitem" style="text-align:center">
-      <div data-token-sample="${r}" style="width:4.5rem;height:4.5rem;background:var(--color-primary,oklch(55% 0.2 260));border-radius:var(${e}${r});display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.75rem;font-family:var(--font-mono,monospace)" aria-hidden="true">${r}</div>
-      ${o?`<p data-token-value="${r}" style="font-family:var(--font-mono,monospace);font-size:0.625rem;color:var(--color-text-muted,#999);margin-block-start:0.25rem"></p>`:""}
-    </div>`;return t+="</div>",t}function x(i,e,o){let t='<div role="list" style="display:flex;flex-direction:column;gap:0.75rem">';for(let r of i)t+=`<div role="listitem" style="display:grid;grid-template-columns:4rem 1fr auto;align-items:center;gap:0.75rem">
-      <span style="font-family:var(--font-mono,monospace);font-size:0.875rem;color:var(--color-text-muted,#666);text-align:end">${r}</span>
-      <div style="border-block-start:var(${e}${r}) solid var(--color-text,#333);min-inline-size:4rem" aria-hidden="true"></div>
-      ${o?`<span data-token-value="${r}" style="font-family:var(--font-mono,monospace);font-size:0.75rem;color:var(--color-text-muted,#666);font-variant-numeric:tabular-nums"></span>`:""}
-    </div>`;return t+="</div>",t}function $(i,e,o){let t='<div role="list" style="display:flex;flex-wrap:wrap;gap:0.75rem">';for(let r of i)t+=`<div role="listitem" style="text-align:center">
-      <div style="width:4rem;height:3rem;background:var(${e}${r});border-radius:var(--radius-s,0.25rem);border:1px solid var(--color-border,#ddd)" aria-hidden="true"></div>
-      <p style="font-family:var(--font-mono,monospace);font-size:0.625rem;color:var(--color-text-muted,#666);margin-block-start:0.25rem">${r}</p>
-      ${o?`<p data-token-value="${r}" style="font-family:var(--font-mono,monospace);font-size:0.5625rem;color:var(--color-text-muted,#999);max-width:4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></p>`:""}
-    </div>`;return t+="</div>",t}function k(i,e,o){let t='<div role="list" style="display:flex;flex-direction:column;gap:0.25rem">';for(let r of i)t+=`<div role="listitem" style="display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:0.75rem;min-block-size:1.75rem">
-      <span style="font-family:var(--font-mono,monospace);font-size:0.875rem;color:var(--color-text-muted,#666);text-align:end">${r}</span>
-      <div data-token-sample="${r}" style="display:block;block-size:var(--size-m,1rem);min-inline-size:2px;inline-size:var(${e}${r});background:var(--color-interactive,oklch(55% 0.2 260));border-radius:var(--radius-s,0.25rem)" aria-hidden="true"></div>
-      ${o?`<span data-token-value="${r}" style="font-family:var(--font-mono,monospace);font-size:0.75rem;color:var(--color-text-muted,#666);font-variant-numeric:tabular-nums;min-inline-size:3.5rem;text-align:end"></span>`:""}
-    </div>`;return t+="</div>",t}function w(i,e,o,t){let r=t?.getAttribute("size")||"md",n=t?.getAttribute("icon-set")||"",a=n?` set="${n}"`:"",l='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem">';for(let s of i)l+=`<div role="listitem" style="display:flex;flex-direction:column;align-items:center;gap:0.375rem;min-inline-size:4.5rem">
-      <span style="display:inline-flex;align-items:center;justify-content:center;padding:var(--size-s,0.75rem);background:var(--color-surface-raised,#f5f5f5);border-radius:var(--radius-s,0.25rem);border:1px solid var(--color-border,#ddd);color:var(--color-text,#222)">
-        <icon-wc name="${s}" size="${r}"${a}></icon-wc>
-      </span>
-      ${o?`<code style="font-family:var(--font-mono,monospace);font-size:0.625rem;color:var(--color-text-muted,#666);max-inline-size:5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${s}</code>`:""}
-    </div>`;return l+="</div>",l}h("token-specimen",f);
-//# sourceMappingURL=token-specimen.js.map

package/dist/cdn/components/traceability-matrix.js

@@ -1,3 +0,0 @@
-var N=window.matchMedia("(prefers-reduced-motion: reduce)");var S=new Map;function q(s,t,n={}){let i=n.priority??10,o={impl:t,bundle:n.bundle,contract:n.contract,priority:i},r=S.get(s);if(customElements.get(s)){if(!r||r.priority>=i){r&&r.priority===i&&r.impl!==t&&console.warn(`[VB Bundle] Tag <${s}> already registered by "${r.bundle}" (priority ${r.priority}). Skipping "${n.bundle}".`);return}console.warn(`[VB Bundle] Tag <${s}> defined by "${r.bundle}" cannot be replaced (customElements.define is permanent). "${n.bundle}" has higher priority but arrived late.`);return}if(r&&r.priority>=i){r.priority===i&&console.warn(`[VB Bundle] Tag <${s}> already registered by "${r.bundle}". Skipping "${n.bundle}" (first wins at equal priority).`);return}S.set(s,o),customElements.define(s,t)}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 t of this.#e)t();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,n,i,o){t.addEventListener(n,i,o),this.#e.push(()=>t.removeEventListener(n,i,o))}setup(){}teardown(){}setState(t,n){this.#t||(this.#t=this.attachInternals());let i=this.#t.states;try{n?i.add(t):i.delete(t)}catch{let o=`--${t}`;n?i.add(o):i.delete(o)}}_adoptInternals(t){this.#t||(this.#t=t)}};var A=class s extends b{setup(){let t=this.getAttribute("rows"),n=this.getAttribute("cols"),i=this.getAttribute("link-attr");return!t||!n||!i?(console.warn("traceability-matrix: requires rows, cols, and link-attr attributes"),!1):(queueMicrotask(()=>this.#e(t,n,i)),!0)}#e(t,n,i){let o=[...document.querySelectorAll(t)].filter(e=>e!==this&&!this.contains(e)),r=[...document.querySelectorAll(n)].filter(e=>e!==this&&!this.contains(e));if(!o.length||!r.length){this.#l();return}let l=this.getAttribute("row-label")||"",c=this.getAttribute("cell-mark")||"\u2713",f=this.hasAttribute("flag-orphans"),k=[],g=new WeakMap,E=new WeakMap;for(let e of o){let a=s.#o(e.getAttribute(i));for(let h of a){let u=r.find(p=>p.id===h);u&&(k.push({rowEl:e,colEl:u}),g.set(e,(g.get(e)||0)+1),E.set(u,(E.get(u)||0)+1))}}let m=document.createElement("data-table"),w=document.createElement("table"),M=document.createElement("thead"),y=document.createElement("tr"),C=document.createElement("th");C.setAttribute("data-sort","string"),C.textContent=l,y.appendChild(C);for(let e of r){let a=document.createElement("th");a.setAttribute("data-sort","number"),a.textContent=s.#s(e),a.dataset.colId=e.id||"",f&&!E.get(e)&&(a.dataset.orphan=""),y.appendChild(a)}M.appendChild(y),w.appendChild(M);let v=document.createElement("tbody");for(let e of o){let a=document.createElement("tr");a.dataset.rowId=e.id||"",f&&!g.get(e)&&(a.dataset.orphan="");let h=document.createElement("th");h.scope="row",h.textContent=s.#s(e),a.appendChild(h);let u=s.#o(e.getAttribute(i));for(let p of r){let d=document.createElement("td"),$=u.includes(p.id);d.setAttribute("data-sort-value",$?"1":"0"),$?(d.dataset.linked="",d.textContent=c,d.setAttribute("aria-label","linked")):d.setAttribute("aria-label","not linked"),d.dataset.colId=p.id||"",a.appendChild(d)}v.appendChild(a)}w.appendChild(v),m.appendChild(w),[...this.children].forEach(e=>{e.tagName!=="TEMPLATE"&&e.remove()});let x=this.getAttribute("label");if(x){let e=document.createElement("header");e.className="tm-label",e.textContent=x,this.appendChild(e)}this.appendChild(m),this.#n=m,this.#i=new Map(o.map(e=>[e.id,e])),this.#r=new Map(r.map(e=>[e.id,e])),this.listen(m,"click",this.#t),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent("traceability-matrix:ready",{bubbles:!0,detail:{rowCount:o.length,colCount:r.length,linkCount:k.length}}))})}#t=t=>{let n=t.target.closest('td, th[scope="row"]');if(!n)return;let i=n.closest("tr");if(!i)return;let o=i.dataset.rowId,r=n.dataset.colId,l=o?this.#i.get(o):null,c=r?this.#r.get(r):null,f=n.hasAttribute("data-state-highlighted");if(this.#a(),f){this.dispatchEvent(new CustomEvent("traceability-matrix:highlight",{bubbles:!0,detail:{rowEl:l,colEl:c,on:!1}}));return}n.setAttribute("data-state-highlighted",""),l&&l.setAttribute("data-state-highlighted",""),c&&c!==l&&c.setAttribute("data-state-highlighted",""),i.setAttribute("data-state-highlighted",""),this.dispatchEvent(new CustomEvent("traceability-matrix:highlight",{bubbles:!0,detail:{rowEl:l,colEl:c,on:!0}}))};#a(){this.#n&&(this.#n.querySelectorAll("[data-state-highlighted]").forEach(t=>t.removeAttribute("data-state-highlighted")),document.querySelectorAll("[data-state-highlighted]").forEach(t=>{(this.#i.has(t.id)||this.#r.has(t.id))&&t.removeAttribute("data-state-highlighted")}))}#l(){[...this.children].forEach(n=>{n.tagName!=="TEMPLATE"&&n.remove()});let t=document.createElement("p");t.className="tm-empty",t.textContent="No matching elements found for this matrix.",this.appendChild(t)}static#o(t){return t?t.split(",").map(n=>n.trim()).filter(Boolean):[]}static#s(t){return t.getAttribute("data-matrix-label")||t.id||(t.textContent||"").trim().split(`
-`)[0].slice(0,60)||"(unnamed)"}#n=null;#i=new Map;#r=new Map};q("traceability-matrix",A);export{A as TraceabilityMatrix};
-//# sourceMappingURL=traceability-matrix.js.map

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

@@ -1,19 +0,0 @@
-var w=window.matchMedia("(prefers-reduced-motion: reduce)");var p=new Map;function u(r,e,s={}){let t=s.priority??10,a={impl:e,bundle:s.bundle,contract:s.contract,priority:t},n=p.get(r);if(customElements.get(r)){if(!n||n.priority>=t){n&&n.priority===t&&n.impl!==e&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${s.bundle}".`);return}console.warn(`[VB Bundle] Tag <${r}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${s.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=t){n.priority===t&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${n.bundle}". Skipping "${s.bundle}" (first wins at equal priority).`);return}p.set(r,a),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,s,t,a){e.addEventListener(s,t,a),this.#t.push(()=>e.removeEventListener(s,t,a))}setup(){}teardown(){}setState(e,s){this.#e||(this.#e=this.attachInternals());let t=this.#e.states;try{s?t.add(e):t.delete(e)}catch{let a=`--${e}`;s?t.add(a):t.delete(a)}}_adoptInternals(e){this.#e||(this.#e=e)}};var b=["system-ui","Georgia","Inter, sans-serif",'"JetBrains Mono", monospace',"Verdana","Cambria","ui-serif"],c=class extends l{static observedAttributes=["font-family","label","sample","show-scale","show-weights","show-characters","weights","editable","target","token"];setup(){this.#t(),this.#e()}attributeChangedCallback(){this.isConnected&&(this.#t(),this.#e())}#t(){let e=this.getAttribute("font-family")||"system-ui",s=this.getAttribute("label")||e.replace(/['"]/g,"").split(",")[0],t=this.getAttribute("sample")||"The quick brown fox jumps over the lazy dog",a=this.hasAttribute("show-scale"),n=this.hasAttribute("show-weights"),m=this.hasAttribute("show-characters"),h=(this.getAttribute("weights")||"300,400,500,600,700").split(",").map(i=>i.trim()),o="",f=this.hasAttribute("editable")?`<input type="text" class="specimen-font-input" value="${e.replace(/"/g,"&quot;")}" aria-label="Font family" style="font:inherit;padding:0.25rem 0.5rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);min-inline-size:18rem;max-inline-size:100%;font-family:${e};font-size:var(--font-size-sm,0.875rem)">
-          <span class="specimen-quick" style="display:inline-flex;flex-wrap:wrap;gap:0.25rem;margin-inline-start:0.5rem">
-            ${b.map(i=>`<button type="button" class="specimen-quick-btn" data-font="${i.replace(/"/g,"&quot;")}" style="font:inherit;font-size:var(--font-size-xs,0.75rem);padding:0.125rem 0.5rem;border:1px solid var(--color-border,#ccc);border-radius:999px;background:var(--color-surface,#fff);color:var(--color-text,#222);cursor:pointer">${i.split(",")[0].replace(/["']/g,"")}</button>`).join("")}
-          </span>`:`<span class="specimen-label">${s}</span>`;if(o+=`<div class="specimen-header" style="font-family:${e}">
-      ${f}
-      <p class="specimen-sample" contenteditable="plaintext-only" spellcheck="false">${t}</p>
-    </div>`,m&&(o+=`<div class="specimen-chars" style="font-family:${e}">
-        <div class="char-row"><span class="char-label">Upper</span>${"ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").map(i=>`<span>${i}</span>`).join("")}</div>
-        <div class="char-row"><span class="char-label">Lower</span>${"abcdefghijklmnopqrstuvwxyz".split("").map(i=>`<span>${i}</span>`).join("")}</div>
-        <div class="char-row"><span class="char-label">Digits</span>${"0123456789".split("").map(i=>`<span>${i}</span>`).join("")}</div>
-        <div class="char-row"><span class="char-label">Punct</span>${"!@#$%^&*()_+-=[]{}|;:,.<>?".split("").map(i=>`<span>${i==="<"?"&lt;":i===">"?"&gt;":i==="&"?"&amp;":i}</span>`).join("")}</div>
-      </div>`),n){o+='<div class="specimen-weights">';for(let i of h)o+=`<div class="weight-sample" style="font-family:${e};font-weight:${i}">
-          <span class="weight-label">${i}</span>
-          <span class="weight-text">Aa</span>
-        </div>`;o+="</div>"}if(a){let i=[{name:"xs",rem:.75},{name:"sm",rem:.875},{name:"md",rem:1},{name:"lg",rem:1.125},{name:"xl",rem:1.25},{name:"2xl",rem:1.5},{name:"3xl",rem:1.875},{name:"4xl",rem:2.25},{name:"5xl",rem:3}];o+='<div class="specimen-scale">';for(let d of i)o+=`<div class="scale-step" style="font-family:${e};font-size:${d.rem}rem">
-          <span class="scale-label">${d.name}</span>
-          <span class="scale-text">${t.substring(0,30)}</span>
-        </div>`;o+="</div>"}this.innerHTML=o}#e(){if(!this.hasAttribute("editable"))return;let e=this.querySelector(".specimen-font-input");e&&this.listen(e,"input",()=>this.#s(e.value)),this.querySelectorAll(".specimen-quick-btn").forEach(s=>{this.listen(s,"click",()=>{let t=s.getAttribute("data-font")||"";e&&(e.value=t),this.#s(t)})})}#s(e){let s=this.#i(),t=this.getAttribute("token")||"font-family-base";s&&s.style.setProperty(`--${t}`,e),this.setAttribute("font-family",e),this.dispatchEvent(new CustomEvent("type-specimen:change",{bubbles:!0,detail:{fontFamily:e,token:t,target:this.getAttribute("target")||":root"}}))}#i(){let e=this.getAttribute("target")||":root";try{return e===":root"?document.documentElement:document.querySelector(e)}catch{return document.documentElement}}};u("type-specimen",c);
-//# sourceMappingURL=type-specimen.js.map