vanilla-breeze 0.1.3 → 0.2.0

package/dist/cdn/packs/design-system.full.js

@@ -1,63 +1,63 @@
-var Ft=window.matchMedia("(prefers-reduced-motion: reduce)");var K=new Map;function h(n,t,e={}){let s=e.priority??10,o={impl:t,bundle:e.bundle,contract:e.contract,priority:s},r=K.get(n);if(customElements.get(n)){if(!r||r.priority>=s){r&&r.priority===s&&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>=s){r.priority===s&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${r.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}K.set(n,o),customElements.define(n,t)}var m=class extends HTMLElement{#t=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0})))}disconnectedCallback(){for(let t of this.#t)t();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,s,o){t.addEventListener(e,s,o),this.#t.push(()=>t.removeEventListener(e,s,o))}setup(){}teardown(){}};var C=class extends m{static observedAttributes=["colors","names","layout","show-values","show-names","size","editable"];#t=[];setup(){this.#e()}attributeChangedCallback(){this.isConnected&&this.#e()}#e(){let t=this.getAttribute("colors")||"",e=this.getAttribute("names")||"",s=this.getAttribute("layout")||"inline",o=this.getAttribute("size")||"md",r=this.hasAttribute("show-values"),i=this.hasAttribute("show-names")||e.length>0,a=this.hasAttribute("editable"),l=this.#c(t);this.#t=l.slice();let c=e?e.split(",").map(b=>b.trim()):[],p={sm:48,md:80,lg:120}[o]||80,d="display:flex;flex-wrap:wrap;gap:var(--size-xs,0.5rem)";s==="grid"?d=`display:grid;grid-template-columns:repeat(auto-fill,minmax(${p}px,1fr));gap:var(--size-xs,0.5rem)`:s==="list"&&(d="display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)");let x=l.map((b,y)=>{let g=c[y]||"",$=this.#l(b),_=s==="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:${p}px`,W=s==="list"?36:p,J=`background:${b};color:${$};width:${W}px;height:${W}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`;if(a){let ut=this.#a(b);return`<div class="swatch-wrap" role="listitem" style="${_}">
-          <label class="color-box color-box-edit" style="${J};cursor:pointer" data-index="${y}" title="Click to edit${g?": "+g:""}" aria-label="${g||"Color "+(y+1)}: ${b}. Click to edit.">
-            <input type="color" class="color-input" value="${ut}" data-index="${y}" style="position:absolute;inset:0;opacity:0;cursor:pointer;inline-size:100%;block-size:100%" aria-label="${g||"Color "+(y+1)} picker">
-            <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;pointer-events:none">${this.#i(b)}</span>
+var $e=window.matchMedia("(prefers-reduced-motion: reduce)");var rt=new Map;function h(r,t,e={}){let s=e.priority??10,o={impl:t,bundle:e.bundle,contract:e.contract,priority:s},n=rt.get(r);if(customElements.get(r)){if(!n||n.priority>=s){n&&n.priority===s&&n.impl!==t&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${r}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=s){n.priority===s&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${n.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}rt.set(r,o),customElements.define(r,t)}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 t of this.#t)t();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,s,o){t.addEventListener(e,s,o),this.#t.push(()=>t.removeEventListener(e,s,o))}setup(){}teardown(){}setState(t,e){this.#e||(this.#e=this.attachInternals());let s=this.#e.states;try{e?s.add(t):s.delete(t)}catch{let o=`--${t}`;e?s.add(o):s.delete(o)}}_adoptInternals(t){this.#e||(this.#e=t)}};var O="[data-copy], [data-copy-target], [data-paste-target]",zt="Copied to clipboard",Et="Pasted from clipboard",N=new WeakMap;async function k(r,t={}){if(r==null||r==="")return!1;let{button:e,announceMessage:s=zt,duration:o=1500}=t;try{await navigator.clipboard.writeText(r)}catch{return!1}return it({button:e,duration:o,announceMessage:s,eventDetail:{text:r}}),!0}function it({button:r,duration:t,announceMessage:e,eventDetail:s,state:o="copied",eventName:n="copy"}){if(r){r.dataset.state=o;let i=N.get(r);i&&clearTimeout(i),N.set(r,setTimeout(()=>{delete r.dataset.state,N.delete(r)},t)),r.dispatchEvent(new CustomEvent(n,{bubbles:!0,detail:s}))}Mt(e,r??document.body)}async function Ct(r,t={}){let{button:e,announceMessage:s=Et,duration:o=1500}=t,n;try{n=await navigator.clipboard.readText()}catch{return null}return r&&("value"in r&&(r instanceof HTMLInputElement||r instanceof HTMLTextAreaElement||r instanceof HTMLSelectElement)?r.value=n:r.textContent=n,r.dispatchEvent(new Event("input",{bubbles:!0}))),it({button:e,duration:o,announceMessage:s,eventDetail:{text:n},state:"pasted",eventName:"paste"}),n}function nt(r=document){r.querySelectorAll(O).forEach(q)}function q(r){r.hasAttribute("data-copy-init")||(r.setAttribute("data-copy-init",""),r.addEventListener("click",()=>{if(r.dataset.pasteTarget){let e=document.querySelector(r.dataset.pasteTarget);if(!e)return;Ct(e,{button:r});return}let t=Tt(r);t&&k(t,{button:r})}))}function Tt(r){if(r.dataset.copy)return r.dataset.copy;if(r.dataset.copyTarget){let t=document.querySelector(r.dataset.copyTarget);if(!t)return"";let e=r.dataset.copyAttr;return e?t.getAttribute(e)??"":t.textContent??""}return""}function Mt(r,t){let e=document.createElement("div");e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),e.className="visually-hidden",e.textContent=r,t.appendChild(e),setTimeout(()=>e.remove(),1e3)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>nt()):nt();var Lt=new MutationObserver(r=>{for(let t of r)for(let e of t.addedNodes){if(e.nodeType!==Node.ELEMENT_NODE)continue;let s=e;s.matches(O)&&q(s),s.querySelectorAll(O).forEach(o=>q(o))}});Lt.observe(document.documentElement,{childList:!0,subtree:!0});var B=class extends m{static observedAttributes=["colors","names","layout","show-values","show-names","size","editable"];#t=[];setup(){this.#e()}attributeChangedCallback(){this.isConnected&&this.#e()}#e(){let t=this.getAttribute("colors")||"",e=this.getAttribute("names")||"",s=this.getAttribute("layout")||"inline",o=this.getAttribute("size")||"md",n=this.hasAttribute("show-values"),i=this.hasAttribute("show-names")||e.length>0,a=this.hasAttribute("editable"),l=this.#c(t);this.#t=l.slice();let c=e?e.split(",").map(b=>b.trim()):[],d={sm:48,md:80,lg:120}[o]||80,u="display:flex;flex-wrap:wrap;gap:var(--size-xs,0.5rem)";s==="grid"?u=`display:grid;grid-template-columns:repeat(auto-fill,minmax(${d}px,1fr));gap:var(--size-xs,0.5rem)`:s==="list"&&(u="display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)");let $=l.map((b,y)=>{let g=c[y]||"",w=this.#l(b),et=s==="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:${d}px`,st=s==="list"?36:d,ot=`background:${b};color:${w};width:${st}px;height:${st}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`;if(a){let At=this.#a(b);return`<div class="swatch-wrap" role="listitem" style="${et}">
+          <label class="color-box color-box-edit" style="${ot};cursor:pointer" data-index="${y}" title="Click to edit${g?": "+g:""}" aria-label="${g||"Color "+(y+1)}: ${b}. Click to edit.">
+            <input type="color" class="color-input" value="${At}" data-index="${y}" style="position:absolute;inset:0;opacity:0;cursor:pointer;inline-size:100%;block-size:100%" aria-label="${g||"Color "+(y+1)} picker">
+            <span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${n?"1":"0"};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease;pointer-events:none">${this.#i(b)}</span>
           </label>
           ${i&&g?`<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">${g}</span>`:""}
-        </div>`}return`<div class="swatch-wrap" role="listitem" style="${_}">
+        </div>`}return`<div class="swatch-wrap" role="listitem" style="${et}">
         <button type="button" class="color-box" data-index="${y}"
-          style="${J}"
+          style="${ot}"
           title="Click to copy${g?": "+g:""}"
           aria-label="${g||"Color "+(y+1)}: ${b}">
-          <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">${this.#i(b)}</span>
+          <span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${n?"1":"0"};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease">${this.#i(b)}</span>
         </button>
         ${i&&g?`<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">${g}</span>`:""}
-      </div>`}).join("");this.innerHTML=`<div class="palette ${s}" role="list" aria-label="Color palette" style="${d}">${x}</div>`,a?this.#r(c):(this.#o(l,c),this.#s(l,c,r))}#s(t,e,s){this.querySelectorAll(".color-box").forEach(o=>{s||(o.addEventListener("pointerenter",()=>{let r=o.querySelector(".color-value");r&&(r.style.opacity="1")}),o.addEventListener("pointerleave",()=>{let r=o.querySelector(".color-value");r&&(r.style.opacity="0")})),o.addEventListener("click",()=>{let r=Number(o.dataset.index),i=t[r],a=e[r]||"";navigator.clipboard?.writeText(i),this.dispatchEvent(new CustomEvent("color-palette:select",{bubbles:!0,detail:{color:i,name:a,index:r}})),o.style.outline="3px solid currentColor",o.style.outlineOffset="2px",setTimeout(()=>{o.style.outline="",o.style.outlineOffset=""},600)})})}#r(t){this.querySelectorAll(".color-input").forEach(e=>{e.addEventListener("input",()=>{let s=Number(e.dataset.index),o=e.value;this.#t[s]=o;let r=e.parentElement;if(r){r.style.background=o,r.style.color=this.#l(o);let i=r.querySelector(".color-value");i&&(i.textContent=this.#i(o)),r.title=`Click to edit${t[s]?": "+t[s]:""} (${o})`,r.setAttribute("aria-label",`${t[s]||"Color "+(s+1)}: ${o}. Click to edit.`)}this.setAttribute("colors",this.#t.join(",")),this.dispatchEvent(new CustomEvent("color-palette:change",{bubbles:!0,detail:{color:o,name:t[s]||"",index:s,colors:this.#t.slice()}}))})})}get colors(){return this.#t.slice()}#o(t,e){this.querySelectorAll(".color-box").forEach(s=>{let o=Number(s.dataset.index),r=t[o];if(!r||!r.includes("var("))return;let i=getComputedStyle(s).backgroundColor,a=this.#n(i)||i;t[o]=a,this.#t[o]=a;let l=s.querySelector(".color-value");l&&(l.textContent=a),s.style.color=this.#l(a);let c=e[o]||"";s.title=`Click to copy${c?": "+c:""} (${a})`,s.setAttribute("aria-label",`${c||"Color "+(o+1)}: ${a}`)})}#n(t){let e=t.match(/rgba?\(\s*([\d.]+),?\s*([\d.]+),?\s*([\d.]+)/);if(!e)return null;let[,s,o,r]=e,i=a=>Math.round(Number(a)).toString(16).padStart(2,"0");return`#${i(s)}${i(o)}${i(r)}`}#a(t){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(o=>o+o).join("")).toLowerCase();if(typeof document>"u")return"#000000";let e=document.createElement("span");e.style.color=t,e.style.display="none",document.body.appendChild(e);let s=getComputedStyle(e).color;return e.remove(),this.#n(s)||"#000000"}#i(t){if(t.startsWith("#"))return t;let e=t.match(/oklch\(\s*([\d.]+)%?\s+([\d.]+)\s+([\d.]+)/);return e?`${e[1]}% .${e[2].replace("0.","")}`:t.length>12?t.slice(0,12)+"\u2026":t}#c(t){if(!t)return[];let e=[],s=0,o="";for(let r of t)r==="("?s++:r===")"&&s--,r===","&&s===0?(e.push(o.trim()),o=""):o+=r;return o.trim()&&e.push(o.trim()),e}#l(t){let e=t.match(/oklch\(\s*([\d.]+)%?\s/);if(e){let s=parseFloat(e[1]);return(s>1?s/100:s)>.6?"#000":"#fff"}if(t.startsWith("#")){let s=t.replace("#",""),o=parseInt(s.substring(0,2),16)/255,r=parseInt(s.substring(2,4),16)/255,i=parseInt(s.substring(4,6),16)/255;return .2126*o+.7152*r+.0722*i>.4?"#000":"#fff"}return"#000"}};h("color-palette",C);var mt=["system-ui","Georgia","Inter, sans-serif",'"JetBrains Mono", monospace',"Verdana","Cambria","ui-serif"],T=class extends m{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 t=this.getAttribute("font-family")||"system-ui",e=this.getAttribute("label")||t.replace(/['"]/g,"").split(",")[0],s=this.getAttribute("sample")||"The quick brown fox jumps over the lazy dog",o=this.hasAttribute("show-scale"),r=this.hasAttribute("show-weights"),i=this.hasAttribute("show-characters"),l=(this.getAttribute("weights")||"300,400,500,600,700").split(",").map(d=>d.trim()),c="",p=this.hasAttribute("editable")?`<input type="text" class="specimen-font-input" value="${t.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:${t};font-size:var(--font-size-sm,0.875rem)">
+      </div>`}).join("");this.innerHTML=`<div class="palette ${s}" role="list" aria-label="Color palette" style="${u}">${$}</div>`,a?this.#r(c):(this.#o(l,c),this.#s(l,c,n))}#s(t,e,s){this.querySelectorAll(".color-box").forEach(o=>{let n=o;s||(n.addEventListener("pointerenter",()=>{let i=n.querySelector(".color-value");i&&(i.style.opacity="1")}),n.addEventListener("pointerleave",()=>{let i=n.querySelector(".color-value");i&&(i.style.opacity="0")})),n.addEventListener("click",()=>{let i=Number(n.dataset.index),a=t[i],l=e[i]||"";k(a,{button:n,announceMessage:"Color copied"}),this.dispatchEvent(new CustomEvent("color-palette:select",{bubbles:!0,detail:{color:a,name:l,index:i}})),n.style.outline="3px solid currentColor",n.style.outlineOffset="2px",setTimeout(()=>{n.style.outline="",n.style.outlineOffset=""},600)})})}#r(t){this.querySelectorAll(".color-input").forEach(e=>{e.addEventListener("input",()=>{let s=Number(e.dataset.index),o=e.value;this.#t[s]=o;let n=e.parentElement;if(n){n.style.background=o,n.style.color=this.#l(o);let i=n.querySelector(".color-value");i&&(i.textContent=this.#i(o)),n.title=`Click to edit${t[s]?": "+t[s]:""} (${o})`,n.setAttribute("aria-label",`${t[s]||"Color "+(s+1)}: ${o}. Click to edit.`)}this.setAttribute("colors",this.#t.join(",")),this.dispatchEvent(new CustomEvent("color-palette:change",{bubbles:!0,detail:{color:o,name:t[s]||"",index:s,colors:this.#t.slice()}}))})})}get colors(){return this.#t.slice()}#o(t,e){this.querySelectorAll(".color-box").forEach(s=>{let o=Number(s.dataset.index),n=t[o];if(!n||!n.includes("var("))return;let i=getComputedStyle(s).backgroundColor,a=this.#n(i)||i;t[o]=a,this.#t[o]=a;let l=s.querySelector(".color-value");l&&(l.textContent=a),s.style.color=this.#l(a);let c=e[o]||"";s.title=`Click to copy${c?": "+c:""} (${a})`,s.setAttribute("aria-label",`${c||"Color "+(o+1)}: ${a}`)})}#n(t){let e=t.match(/rgba?\(\s*([\d.]+),?\s*([\d.]+),?\s*([\d.]+)/);if(!e)return null;let[,s,o,n]=e,i=a=>Math.round(Number(a)).toString(16).padStart(2,"0");return`#${i(s)}${i(o)}${i(n)}`}#a(t){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(o=>o+o).join("")).toLowerCase();if(typeof document>"u")return"#000000";let e=document.createElement("span");e.style.color=t,e.style.display="none",document.body.appendChild(e);let s=getComputedStyle(e).color;return e.remove(),this.#n(s)||"#000000"}#i(t){if(t.startsWith("#"))return t;let e=t.match(/oklch\(\s*([\d.]+)%?\s+([\d.]+)\s+([\d.]+)/);return e?`${e[1]}% .${e[2].replace("0.","")}`:t.length>12?t.slice(0,12)+"\u2026":t}#c(t){if(!t)return[];let e=[],s=0,o="";for(let n of t)n==="("?s++:n===")"&&s--,n===","&&s===0?(e.push(o.trim()),o=""):o+=n;return o.trim()&&e.push(o.trim()),e}#l(t){let e=t.match(/oklch\(\s*([\d.]+)%?\s/);if(e){let s=parseFloat(e[1]);return(s>1?s/100:s)>.6?"#000":"#fff"}if(t.startsWith("#")){let s=t.replace("#",""),o=parseInt(s.substring(0,2),16)/255,n=parseInt(s.substring(2,4),16)/255,i=parseInt(s.substring(4,6),16)/255;return .2126*o+.7152*n+.0722*i>.4?"#000":"#fff"}return"#000"}};h("color-palette",B);var Nt=["system-ui","Georgia","Inter, sans-serif",'"JetBrains Mono", monospace',"Verdana","Cambria","ui-serif"],R=class extends m{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 t=this.getAttribute("font-family")||"system-ui",e=this.getAttribute("label")||t.replace(/['"]/g,"").split(",")[0],s=this.getAttribute("sample")||"The quick brown fox jumps over the lazy dog",o=this.hasAttribute("show-scale"),n=this.hasAttribute("show-weights"),i=this.hasAttribute("show-characters"),l=(this.getAttribute("weights")||"300,400,500,600,700").split(",").map(u=>u.trim()),c="",d=this.hasAttribute("editable")?`<input type="text" class="specimen-font-input" value="${t.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:${t};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">
-            ${mt.map(d=>`<button type="button" class="specimen-quick-btn" data-font="${d.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">${d.split(",")[0].replace(/["']/g,"")}</button>`).join("")}
+            ${Nt.map(u=>`<button type="button" class="specimen-quick-btn" data-font="${u.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">${u.split(",")[0].replace(/["']/g,"")}</button>`).join("")}
           </span>`:`<span class="specimen-label">${e}</span>`;if(c+=`<div class="specimen-header" style="font-family:${t}">
-      ${p}
+      ${d}
       <p class="specimen-sample" contenteditable="plaintext-only" spellcheck="false">${s}</p>
     </div>`,i&&(c+=`<div class="specimen-chars" style="font-family:${t}">
-        <div class="char-row"><span class="char-label">Upper</span>${"ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").map(d=>`<span>${d}</span>`).join("")}</div>
-        <div class="char-row"><span class="char-label">Lower</span>${"abcdefghijklmnopqrstuvwxyz".split("").map(d=>`<span>${d}</span>`).join("")}</div>
-        <div class="char-row"><span class="char-label">Digits</span>${"0123456789".split("").map(d=>`<span>${d}</span>`).join("")}</div>
-        <div class="char-row"><span class="char-label">Punct</span>${"!@#$%^&*()_+-=[]{}|;:,.<>?".split("").map(d=>`<span>${d==="<"?"&lt;":d===">"?"&gt;":d==="&"?"&amp;":d}</span>`).join("")}</div>
-      </div>`),r){c+='<div class="specimen-weights">';for(let d of l)c+=`<div class="weight-sample" style="font-family:${t};font-weight:${d}">
-          <span class="weight-label">${d}</span>
+        <div class="char-row"><span class="char-label">Upper</span>${"ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").map(u=>`<span>${u}</span>`).join("")}</div>
+        <div class="char-row"><span class="char-label">Lower</span>${"abcdefghijklmnopqrstuvwxyz".split("").map(u=>`<span>${u}</span>`).join("")}</div>
+        <div class="char-row"><span class="char-label">Digits</span>${"0123456789".split("").map(u=>`<span>${u}</span>`).join("")}</div>
+        <div class="char-row"><span class="char-label">Punct</span>${"!@#$%^&*()_+-=[]{}|;:,.<>?".split("").map(u=>`<span>${u==="<"?"&lt;":u===">"?"&gt;":u==="&"?"&amp;":u}</span>`).join("")}</div>
+      </div>`),n){c+='<div class="specimen-weights">';for(let u of l)c+=`<div class="weight-sample" style="font-family:${t};font-weight:${u}">
+          <span class="weight-label">${u}</span>
           <span class="weight-text">Aa</span>
-        </div>`;c+="</div>"}if(o){let d=[{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}];c+='<div class="specimen-scale">';for(let x of d)c+=`<div class="scale-step" style="font-family:${t};font-size:${x.rem}rem">
-          <span class="scale-label">${x.name}</span>
+        </div>`;c+="</div>"}if(o){let u=[{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}];c+='<div class="specimen-scale">';for(let $ of u)c+=`<div class="scale-step" style="font-family:${t};font-size:${$.rem}rem">
+          <span class="scale-label">${$.name}</span>
           <span class="scale-text">${s.substring(0,30)}</span>
-        </div>`;c+="</div>"}this.innerHTML=c}#e(){if(!this.hasAttribute("editable"))return;let t=this.querySelector(".specimen-font-input");t&&this.listen(t,"input",()=>this.#s(t.value)),this.querySelectorAll(".specimen-quick-btn").forEach(e=>{this.listen(e,"click",()=>{let s=e.getAttribute("data-font")||"";t&&(t.value=s),this.#s(s)})})}#s(t){let e=this.#r(),s=this.getAttribute("token")||"font-family-base";e&&e.style.setProperty(`--${s}`,t),this.setAttribute("font-family",t),this.dispatchEvent(new CustomEvent("type-specimen:change",{bubbles:!0,detail:{fontFamily:t,token:s,target:this.getAttribute("target")||":root"}}))}#r(){let t=this.getAttribute("target")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}};h("type-specimen",T);var M=class extends m{static observedAttributes=["tokens","prefix","show-values","label","editable","target"];setup(){this.#t(),this.#e()}attributeChangedCallback(){this.isConnected&&(this.#t(),this.#e())}#t(){let t=this.getAttribute("tokens")||"3xs,2xs,xs,s,m,l,xl,2xl,3xl",e=this.getAttribute("prefix")||"--size-",s=this.getAttribute("show-values")!=="false",o=this.getAttribute("label")||"",r=this.hasAttribute("editable"),i=t.split(",").map(l=>l.trim()),a="";o&&(a+=`<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)">${o}</div>`),a+=`<div role="list" aria-label="${o||"Spacing scale"}" style="display:flex;flex-direction:column;gap:0.25rem">`;for(let l of i){let c=`${e}${l}`,u=r?`<input type="text" class="scale-edit" data-token="${l}" aria-label="${l} 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">`:s?'<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>':"";a+=`<div role="listitem" style="display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:0.75rem;min-block-size:1.75rem">
+        </div>`;c+="</div>"}this.innerHTML=c}#e(){if(!this.hasAttribute("editable"))return;let t=this.querySelector(".specimen-font-input");t&&this.listen(t,"input",()=>this.#s(t.value)),this.querySelectorAll(".specimen-quick-btn").forEach(e=>{this.listen(e,"click",()=>{let s=e.getAttribute("data-font")||"";t&&(t.value=s),this.#s(s)})})}#s(t){let e=this.#r(),s=this.getAttribute("token")||"font-family-base";e&&e.style.setProperty(`--${s}`,t),this.setAttribute("font-family",t),this.dispatchEvent(new CustomEvent("type-specimen:change",{bubbles:!0,detail:{fontFamily:t,token:s,target:this.getAttribute("target")||":root"}}))}#r(){let t=this.getAttribute("target")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}};h("type-specimen",R);var F=class extends m{static observedAttributes=["tokens","prefix","show-values","label","editable","target"];setup(){this.#t(),this.#e()}attributeChangedCallback(){this.isConnected&&(this.#t(),this.#e())}#t(){let t=this.getAttribute("tokens")||"3xs,2xs,xs,s,m,l,xl,2xl,3xl",e=this.getAttribute("prefix")||"--size-",s=this.getAttribute("show-values")!=="false",o=this.getAttribute("label")||"",n=this.hasAttribute("editable"),i=t.split(",").map(l=>l.trim()),a="";o&&(a+=`<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)">${o}</div>`),a+=`<div role="list" aria-label="${o||"Spacing scale"}" style="display:flex;flex-direction:column;gap:0.25rem">`;for(let l of i){let c=`${e}${l}`,p=n?`<input type="text" class="scale-edit" data-token="${l}" aria-label="${l} 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">`:s?'<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>':"";a+=`<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">${l}</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>
-        ${u}
-      </div>`}a+="</div>",this.innerHTML=a,requestAnimationFrame(()=>{if(r){let l=getComputedStyle(this);this.querySelectorAll(".scale-edit").forEach(c=>{let u=c.getAttribute("data-token"),p=l.getPropertyValue(`${e}${u}`).trim();c.value=p||""})}else s&&this.querySelectorAll(".scale-bar").forEach(l=>{let c=l.getBoundingClientRect().width,u=l.nextElementSibling;u&&(u.textContent=`${Math.round(c*100)/100}px`)})})}#e(){if(!this.hasAttribute("editable"))return;let t=this.getAttribute("prefix")||"--size-";this.querySelectorAll(".scale-edit").forEach(e=>{this.listen(e,"change",()=>this.#s(e,t)),this.listen(e,"keydown",s=>{s.key==="Enter"&&this.#s(e,t)})})}#s(t,e){let s=t.getAttribute("data-token"),o=t.value.trim();if(!s||!o)return;let r=this.#r(),i=`${e}${s}`;r&&r.style.setProperty(i,o),this.dispatchEvent(new CustomEvent("spacing-specimen:change",{bubbles:!0,detail:{name:s,value:o,token:i,target:this.getAttribute("target")||":root"}}))}#r(){let t=this.getAttribute("target")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}};h("spacing-specimen",M);var X={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:pt,radius:ft,border:ht,color:bt,size:gt,icon:yt},L=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 t=this.getAttribute("type")||"shadow",e=X[t]||X.shadow,s=this.getAttribute("prefix")||e.prefix,o=this.getAttribute("tokens")||e.tokens,r=this.getAttribute("show-values")!=="false",i=this.getAttribute("label")||"",a=o.split(",").map(p=>p.trim()),l=Y[t]||Y.shadow,c="";i&&(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)">${i}</p>`),c+=l(a,s,r,this),this.innerHTML=c;let u=this.hasAttribute("editable")&&t!=="icon";r&&t!=="icon"?requestAnimationFrame(()=>{this.#o(t,s,a),u&&this.#e(t,s)}):u&&requestAnimationFrame(()=>this.#e(t,s))}#e(t,e){let s=getComputedStyle(this);this.querySelectorAll("[data-token-value]").forEach(o=>{let r=o.dataset.tokenValue,i=s.getPropertyValue(`${e}${r}`).trim(),a=document.createElement("input");a.type=t==="color"&&/^#[0-9a-f]{3,8}$/i.test(i)?"color":"text",a.value=i||"",a.className="ts-edit",a.setAttribute("data-token",r),a.setAttribute("aria-label",`${r} value`),a.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:${t==="color"?"3rem":"100%"};${t==="color"?"block-size:1.5rem;padding:0;":"max-inline-size:8rem;"}`,o.replaceWith(a),this.listen(a,"change",()=>this.#s(a,e)),this.listen(a,"keydown",l=>{l.key==="Enter"&&this.#s(a,e)})})}#s(t,e){let s=t.getAttribute("data-token"),o=t.value.trim();if(!s||!o)return;let r=this.#r(),i=`${e}${s}`;r&&r.style.setProperty(i,o),this.dispatchEvent(new CustomEvent("token-specimen:change",{bubbles:!0,detail:{name:s,value:o,token:i,target:this.getAttribute("target")||":root"}}))}#r(){let t=this.getAttribute("target")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}#o(t,e,s){let o=getComputedStyle(this);this.querySelectorAll("[data-token-value]").forEach(r=>{let i=r.dataset.tokenValue,a=o.getPropertyValue(`${e}${i}`).trim();if(t==="radius"||t==="size"){let l=this.querySelector(`[data-token-sample="${i}"]`);if(l){let c=t==="radius"?"borderRadius":"width",u=t==="size"?l.getBoundingClientRect().width:null;r.textContent=u!=null?`${Math.round(u*100)/100}px`:a||"\u2014"}}else r.textContent=a||"\u2014"})}};function pt(n,t,e){let s='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem;align-items:end">';for(let o of n)s+=`<div role="listitem" style="text-align:center">
+        ${p}
+      </div>`}a+="</div>",this.innerHTML=a,requestAnimationFrame(()=>{if(n){let l=getComputedStyle(this);this.querySelectorAll(".scale-edit").forEach(c=>{let p=c,d=p.getAttribute("data-token"),u=l.getPropertyValue(`${e}${d}`).trim();p.value=u||""})}else s&&this.querySelectorAll(".scale-bar").forEach(l=>{let c=l.getBoundingClientRect().width,p=l.nextElementSibling;p&&(p.textContent=`${Math.round(c*100)/100}px`)})})}#e(){if(!this.hasAttribute("editable"))return;let t=this.getAttribute("prefix")||"--size-";this.querySelectorAll(".scale-edit").forEach(e=>{this.listen(e,"change",()=>this.#s(e,t)),this.listen(e,"keydown",s=>{s.key==="Enter"&&this.#s(e,t)})})}#s(t,e){let s=t.getAttribute("data-token"),o=t.value.trim();if(!s||!o)return;let n=this.#r(),i=`${e}${s}`;n&&n.style.setProperty(i,o),this.dispatchEvent(new CustomEvent("spacing-specimen:change",{bubbles:!0,detail:{name:s,value:o,token:i,target:this.getAttribute("target")||":root"}}))}#r(){let t=this.getAttribute("target")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}};h("spacing-specimen",F);var at={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"}},lt={shadow:Ot,radius:qt,border:Bt,color:Rt,size:Ft,icon:Dt},D=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 t=this.getAttribute("type")||"shadow",e=at[t]||at.shadow,s=this.getAttribute("prefix")||e.prefix,o=this.getAttribute("tokens")||e.tokens,n=this.getAttribute("show-values")!=="false",i=this.getAttribute("label")||"",a=o.split(",").map(d=>d.trim()),l=lt[t]||lt.shadow,c="";i&&(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)">${i}</p>`),c+=l(a,s,n,this),this.innerHTML=c;let p=this.hasAttribute("editable")&&t!=="icon";n&&t!=="icon"?requestAnimationFrame(()=>{this.#o(t,s,a),p&&this.#e(t,s)}):p&&requestAnimationFrame(()=>this.#e(t,s))}#e(t,e){let s=getComputedStyle(this);this.querySelectorAll("[data-token-value]").forEach(o=>{let n=o,i=n.dataset.tokenValue,a=s.getPropertyValue(`${e}${i}`).trim(),l=document.createElement("input");l.type=t==="color"&&/^#[0-9a-f]{3,8}$/i.test(a)?"color":"text",l.value=a||"",l.className="ts-edit",l.setAttribute("data-token",i||""),l.setAttribute("aria-label",`${i} value`),l.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:${t==="color"?"3rem":"100%"};${t==="color"?"block-size:1.5rem;padding:0;":"max-inline-size:8rem;"}`,n.replaceWith(l),this.listen(l,"change",()=>this.#s(l,e)),this.listen(l,"keydown",c=>{c.key==="Enter"&&this.#s(l,e)})})}#s(t,e){let s=t.getAttribute("data-token"),o=t.value.trim();if(!s||!o)return;let n=this.#r(),i=`${e}${s}`;n&&n.style.setProperty(i,o),this.dispatchEvent(new CustomEvent("token-specimen:change",{bubbles:!0,detail:{name:s,value:o,token:i,target:this.getAttribute("target")||":root"}}))}#r(){let t=this.getAttribute("target")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}#o(t,e,s){let o=getComputedStyle(this);this.querySelectorAll("[data-token-value]").forEach(n=>{let i=n,a=i.dataset.tokenValue,l=o.getPropertyValue(`${e}${a}`).trim();if(t==="radius"||t==="size"){let c=this.querySelector(`[data-token-sample="${a}"]`);if(c){let p=t==="radius"?"borderRadius":"width",d=t==="size"?c.getBoundingClientRect().width:null;i.textContent=d!=null?`${Math.round(d*100)/100}px`:l||"\u2014"}}else i.textContent=l||"\u2014"})}};function Ot(r,t,e){let s='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem;align-items:end">';for(let o of r)s+=`<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(${t}${o})" 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">${o}</p>
       ${e?`<p data-token-value="${o}" 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 s+="</div>",s}function ft(n,t,e){let s='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem;align-items:end">';for(let o of n)s+=`<div role="listitem" style="text-align:center">
+    </div>`;return s+="</div>",s}function qt(r,t,e){let s='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem;align-items:end">';for(let o of r)s+=`<div role="listitem" style="text-align:center">
       <div data-token-sample="${o}" style="width:4.5rem;height:4.5rem;background:var(--color-primary,oklch(55% 0.2 260));border-radius:var(${t}${o});display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.75rem;font-family:var(--font-mono,monospace)" aria-hidden="true">${o}</div>
       ${e?`<p data-token-value="${o}" 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 s+="</div>",s}function ht(n,t,e){let s='<div role="list" style="display:flex;flex-direction:column;gap:0.75rem">';for(let o of n)s+=`<div role="listitem" style="display:grid;grid-template-columns:4rem 1fr auto;align-items:center;gap:0.75rem">
+    </div>`;return s+="</div>",s}function Bt(r,t,e){let s='<div role="list" style="display:flex;flex-direction:column;gap:0.75rem">';for(let o of r)s+=`<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">${o}</span>
       <div style="border-block-start:var(${t}${o}) solid var(--color-text,#333);min-inline-size:4rem" aria-hidden="true"></div>
       ${e?`<span data-token-value="${o}" 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 s+="</div>",s}function bt(n,t,e){let s='<div role="list" style="display:flex;flex-wrap:wrap;gap:0.75rem">';for(let o of n)s+=`<div role="listitem" style="text-align:center">
+    </div>`;return s+="</div>",s}function Rt(r,t,e){let s='<div role="list" style="display:flex;flex-wrap:wrap;gap:0.75rem">';for(let o of r)s+=`<div role="listitem" style="text-align:center">
       <div style="width:4rem;height:3rem;background:var(${t}${o});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">${o}</p>
       ${e?`<p data-token-value="${o}" 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 s+="</div>",s}function gt(n,t,e){let s='<div role="list" style="display:flex;flex-direction:column;gap:0.25rem">';for(let o of n)s+=`<div role="listitem" style="display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:0.75rem;min-block-size:1.75rem">
+    </div>`;return s+="</div>",s}function Ft(r,t,e){let s='<div role="list" style="display:flex;flex-direction:column;gap:0.25rem">';for(let o of r)s+=`<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 data-token-sample="${o}" style="display:block;block-size:var(--size-m,1rem);min-inline-size:2px;inline-size:var(${t}${o});background:var(--color-interactive,oklch(55% 0.2 260));border-radius:var(--radius-s,0.25rem)" aria-hidden="true"></div>
       ${e?`<span data-token-value="${o}" 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 s+="</div>",s}function yt(n,t,e,s){let o=s?.getAttribute("size")||"md",r=s?.getAttribute("icon-set")||"",i=r?` set="${r}"`:"",a='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem">';for(let l of n)a+=`<div role="listitem" style="display:flex;flex-direction:column;align-items:center;gap:0.375rem;min-inline-size:4.5rem">
+    </div>`;return s+="</div>",s}function Dt(r,t,e,s){let o=s?.getAttribute("size")||"md",n=s?.getAttribute("icon-set")||"",i=n?` set="${n}"`:"",a='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem">';for(let l of r)a+=`<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="${l}" size="${o}"${i}></icon-wc>
       </span>
       ${e?`<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">${l}</code>`:""}
-    </div>`;return a+="</div>",a}h("token-specimen",L);var vt={button:()=>`
+    </div>`;return a+="</div>",a}h("token-specimen",D);var jt={button:()=>`
     <layout-cluster data-layout-gap="s">
       <button>Primary</button>
       <button class="secondary">Secondary</button>
@@ -97,71 +97,79 @@ var Ft=window.matchMedia("(prefers-reduced-motion: reduce)");var K=new Map;funct
       <progress value="100" max="100">100%</progress>
     </layout-stack>`,range:()=>`
     <input type="range" min="0" max="100" value="50" aria-label="Sample range"/>`,textarea:()=>`
-    <textarea rows="3" placeholder="Textarea sample" aria-label="Sample textarea" style="width:100%"></textarea>`},q=class extends m{static observedAttributes=["components","label","compact"];setup(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}#t(){let t=this.getAttribute("components")||"button,input,select,checkbox,radio,badge,progress",e=this.getAttribute("label")||"",s=this.hasAttribute("compact"),o=t.split(",").map(a=>a.trim()),r=s?"0.75rem":"1.25rem",i="";e&&(i+=`<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)">${e}</p>`),i+=`<section style="display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:${r}">`;for(let a of o){let l=vt[a];l&&(i+=`<article style="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);padding:var(--size-m,1rem);background:var(--color-surface,#fff)">
+    <textarea rows="3" placeholder="Textarea sample" aria-label="Sample textarea" style="width:100%"></textarea>`},j=class extends m{static observedAttributes=["components","label","compact"];setup(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}#t(){let t=this.getAttribute("components")||"button,input,select,checkbox,radio,badge,progress",e=this.getAttribute("label")||"",s=this.hasAttribute("compact"),o=t.split(",").map(a=>a.trim()),n=s?"0.75rem":"1.25rem",i="";e&&(i+=`<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)">${e}</p>`),i+=`<section style="display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:${n}">`;for(let a of o){let l=jt[a];l&&(i+=`<article style="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);padding:var(--size-m,1rem);background:var(--color-surface,#fff)">
         <p style="font-size:0.625rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted,#999);margin-block-end:var(--size-s,0.5rem);font-family:var(--font-sans,system-ui)">${a}</p>
         ${l()}
-      </article>`)}i+="</section>",this.innerHTML=i}};h("component-sampler",q);function xt(n,t,e){t/=100,e/=100;let s=i=>(i+n/30)%12,o=t*Math.min(e,1-e),r=i=>e-o*Math.max(-1,Math.min(s(i)-3,9-s(i),1));return{r:Math.round(r(0)*255),g:Math.round(r(8)*255),b:Math.round(r(4)*255)}}function $t(n,t,e){n/=255,t/=255,e/=255;let s=Math.max(n,t,e),o=Math.min(n,t,e),r=(s+o)/2,i=0,a=0;if(s!==o){let l=s-o;switch(a=r>.5?l/(2-s-o):l/(s+o),s){case n:i=((t-e)/l+(t<e?6:0))/6;break;case t:i=((e-n)/l+2)/6;break;case e:i=((n-t)/l+4)/6;break}}return{h:Math.round(i*360),s:Math.round(a*100),l:Math.round(r*100)}}function A(n){n=n.replace(/^#/,""),n.length===3&&(n=n[0]+n[0]+n[1]+n[1]+n[2]+n[2]);let t=parseInt(n,16);return{r:t>>16&255,g:t>>8&255,b:t&255}}function S(n,t,e){return"#"+[n,t,e].map(s=>Math.max(0,Math.min(255,Math.round(s))).toString(16).padStart(2,"0")).join("")}function G(n){let{r:t,g:e,b:s}=A(n);return $t(t,e,s)}function f(n,t,e){let{r:s,g:o,b:r}=xt(n,t,e);return S(s,o,r)}var B=n=>n<=.04045?n/12.92:Math.pow((n+.055)/1.055,2.4),R=n=>n<=.0031308?12.92*n:1.055*Math.pow(n,1/2.4)-.055,O=n=>n<0?0:n>1?1:n;function w(n){let{r:t,g:e,b:s}=A(n),o=B(t/255),r=B(e/255),i=B(s/255),a=.4122214708*o+.5363325363*r+.0514459929*i,l=.2119034982*o+.6806995451*r+.1073969566*i,c=.0883024619*o+.2817188376*r+.6299787005*i,u=Math.cbrt(a),p=Math.cbrt(l),d=Math.cbrt(c),x=.2104542553*u+.793617785*p-.0040720468*d,b=1.9779984951*u-2.428592205*p+.4505937099*d,y=.0259040371*u+.7827717662*p-.808675766*d,g=Math.sqrt(b*b+y*y),$=Math.atan2(y,b)*180/Math.PI;return $<0&&($+=360),{l:x,c:g,h:$}}function z(n,t,e){let s=e*Math.PI/180,o=t*Math.cos(s),r=t*Math.sin(s),i=n+.3963377774*o+.2158037573*r,a=n-.1055613458*o-.0638541728*r,l=n-.0894841775*o-1.291485548*r,c=i*i*i,u=a*a*a,p=l*l*l,d=4.0767416621*c-3.3077115913*u+.2309699292*p,x=-1.2684380046*c+2.6097574011*u-.3413193965*p,b=-.0041960863*c-.7034186147*u+1.707614701*p,y=O(R(d)),g=O(R(x)),$=O(R(b));return S(Math.round(y*255),Math.round(g*255),Math.round($*255))}function N(n,t){if(!n)return null;let e=String(n).trim();if(/^#[0-9a-f]{6}$/i.test(e))return e.toLowerCase();if(/^#[0-9a-f]{3}$/i.test(e))return("#"+e.slice(1).split("").map(i=>i+i).join("")).toLowerCase();if(typeof document>"u")return null;let s=t||document.createElement("span");t||(s.style.display="none",document.body.appendChild(s)),s.style.color="",s.style.color=e;let o=getComputedStyle(s).color;t||s.remove();let r=o.match(/rgba?\(\s*([0-9.]+)[\s,]+([0-9.]+)[\s,]+([0-9.]+)/);return r?S(Math.round(+r[1]),Math.round(+r[2]),Math.round(+r[3])):null}function Q({l:n,c:t,h:e}){return`oklch(${(n*100).toFixed(1)}% ${t.toFixed(3)} ${e.toFixed(1)})`}function j(n){let{r:t,g:e,b:s}=A(n),o=r=>{let i=r/255;return i<=.03928?i/12.92:Math.pow((i+.055)/1.055,2.4)};return .2126*o(t)+.7152*o(e)+.0722*o(s)}function Z(n,t){let e=j(n),s=j(t),o=Math.max(e,s),r=Math.min(e,s);return(o+.05)/(r+.05)}function tt(n){return n>=7?"AAA":n>=4.5?"AA":"Fail"}function V(n){return j(n)>.4?"#000000":"#ffffff"}var v=n=>(n%360+360)%360;function kt(n,t,e){return{colors:[f(n,t,e),f(v(n+180),t,e)],names:["Base","Complement"]}}function wt(n,t,e){return{colors:[f(v(n-30),t,e),f(n,t,e),f(v(n+30),t,e)],names:["Analog A","Base","Analog B"]}}function zt(n,t,e){return{colors:[f(n,t,e),f(v(n+120),t,e),f(v(n+240),t,e)],names:["Base","Triad A","Triad B"]}}function At(n,t,e){return{colors:[f(n,t,e),f(v(n+150),t,e),f(v(n+210),t,e)],names:["Base","Split A","Split B"]}}function St(n,t,e){return{colors:[f(n,t,e),f(v(n+90),t,e),f(v(n+180),t,e),f(v(n+270),t,e)],names:["Base","Tetrad A","Tetrad B","Tetrad C"]}}var Et=[{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 Ct(n,t,e){let s=[],o=[];for(let r of Et){let i=r.l>85||r.l<20?Math.max(t*.6,5):t;s.push(f(n,Math.round(i),r.l)),o.push(r.label)}return{colors:s,names:o}}var et={complementary:kt,analogous:wt,triadic:zt,"split-complementary":At,tetradic:St,monochromatic:Ct};function st(n,t){let{h:e,s,l:o}=G(n);return(et[t]||et.complementary)(e,s,o)}var E=["primary","secondary","accent"],nt=["success","warning","error","info"],Tt=[...E,...nt],ot={primary:"Primary",secondary:"Secondary",accent:"Accent",success:"Success",warning:"Warning",error:"Error",info:"Info"},Mt={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)"}},F="var(--font-mono, monospace)",H="var(--color-text-muted, #666)",D="var(--color-border, #ddd)",rt="var(--color-surface, #fff)",Lt="var(--color-text, #222)",k="var(--radius-s, 0.25rem)",qt="var(--radius-m, 0.5rem)",P=class extends m{static observedAttributes=["colors","roles","show-export","label"];#t=[];#e=[];#s=null;#r=null;#o=null;setup(){this.#o=document.createElement("span"),this.#o.style.cssText="position:absolute;visibility:hidden;pointer-events:none",this.append(this.#o),this.#s=this.querySelector("color-palette, palette-generator"),this.#a(),this.#n(),this.#c(),this.#l("init"),this.#$(),this.#p(),this.#m("init")}attributeChangedCallback(t){!this.isConnected||!this.hasAttribute("data-upgraded")||(t==="roles"&&this.#a(),t==="colors"&&this.#n(),this.#c(),this.#l("attribute"),this.#p(),this.#m("attribute"))}teardown(){this.#o?.remove(),this.#o=null}#n(){let t=this.querySelector("color-palette");if(t){if(typeof t.colors<"u"&&t.colors.length){this.#t=t.colors.slice();return}let r=(t.getAttribute("colors")||"").split(",").map(i=>i.trim()).filter(Boolean);if(r.length){this.#t=r;return}}let e=this.querySelector("palette-generator");if(e){let o=e.getAttribute("seed")||e.querySelector('input[type="color"]')?.value||"",r=e.getAttribute("harmony")||"complementary";if(o)try{let{colors:i}=st(o,r);this.#t=i.slice();return}catch{}}let s=this.getAttribute("colors")||"";this.#t=s.split(",").map(o=>o.trim()).filter(Boolean)}#a(){let e=(this.getAttribute("roles")||E.join(",")).split(",").map(s=>s.trim().toLowerCase()).filter(s=>Tt.includes(s));this.#e=e.length?e:[...E]}#i(){let t={};for(let e=0;e<this.#e.length;e++)t[this.#e[e]]=this.#t[e]||this.#t[this.#t.length-1]||"#888888";return t}#c(){let t=this.querySelector(":scope > .sp-shell");t&&t.remove();let e=this.getAttribute("label"),s=this.hasAttribute("show-export"),o=document.createElement("div");if(o.className="sp-shell",o.style.cssText="display:flex;flex-direction:column;gap:var(--size-m,1rem);margin-block-start:var(--size-s,0.75rem)",e){let i=document.createElement("p");i.style.cssText="font-weight:600;margin:0",i.textContent=e,o.append(i)}let r=document.createElement("section");r.className="sp-previews",r.setAttribute("aria-label","Role previews"),r.style.cssText="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(22rem,100%),1fr));gap:var(--size-m,1rem)",o.append(r),this.#r=r,s&&o.insertAdjacentHTML("beforeend",this.#x()),this.append(o)}#l(t){if(!this.#r)return;let e=this.#i();this.#r.innerHTML=this.#e.map(s=>this.#g(s,e[s])).join("")}#g(t,e){let s=ot[t]||t,r=nt.includes(t)?this.#v(t,e):this.#y(t,e),i=`display:flex;flex-direction:column;gap:var(--size-s,0.75rem);padding:var(--size-m,1rem);border:1px solid ${D};border-radius:${qt};background:${rt};min-inline-size:0`;return`<article class="sp-card" data-role="${t}" aria-label="${s} role preview" style="${i}">
+      </article>`)}i+="</section>",this.innerHTML=i}};h("component-sampler",j);function It(r,t,e){t/=100,e/=100;let s=i=>(i+r/30)%12,o=t*Math.min(e,1-e),n=i=>e-o*Math.max(-1,Math.min(s(i)-3,9-s(i),1));return{r:Math.round(n(0)*255),g:Math.round(n(8)*255),b:Math.round(n(4)*255)}}function Vt(r,t,e){r/=255,t/=255,e/=255;let s=Math.max(r,t,e),o=Math.min(r,t,e),n=(s+o)/2,i=0,a=0;if(s!==o){let l=s-o;switch(a=n>.5?l/(2-s-o):l/(s+o),s){case r:i=((t-e)/l+(t<e?6:0))/6;break;case t:i=((e-r)/l+2)/6;break;case e:i=((r-t)/l+4)/6;break}}return{h:Math.round(i*360),s:Math.round(a*100),l:Math.round(n*100)}}function C(r){r=r.replace(/^#/,""),r.length===3&&(r=r[0]+r[0]+r[1]+r[1]+r[2]+r[2]);let t=parseInt(r,16);return{r:t>>16&255,g:t>>8&255,b:t&255}}function T(r,t,e){return"#"+[r,t,e].map(s=>Math.max(0,Math.min(255,Math.round(s))).toString(16).padStart(2,"0")).join("")}function ct(r){let{r:t,g:e,b:s}=C(r);return Vt(t,e,s)}function f(r,t,e){let{r:s,g:o,b:n}=It(r,t,e);return T(s,o,n)}var I=r=>r<=.04045?r/12.92:Math.pow((r+.055)/1.055,2.4),V=r=>r<=.0031308?12.92*r:1.055*Math.pow(r,1/2.4)-.055,H=r=>r<0?0:r>1?1:r;function A(r){let{r:t,g:e,b:s}=C(r),o=I(t/255),n=I(e/255),i=I(s/255),a=.4122214708*o+.5363325363*n+.0514459929*i,l=.2119034982*o+.6806995451*n+.1073969566*i,c=.0883024619*o+.2817188376*n+.6299787005*i,p=Math.cbrt(a),d=Math.cbrt(l),u=Math.cbrt(c),$=.2104542553*p+.793617785*d-.0040720468*u,b=1.9779984951*p-2.428592205*d+.4505937099*u,y=.0259040371*p+.7827717662*d-.808675766*u,g=Math.sqrt(b*b+y*y),w=Math.atan2(y,b)*180/Math.PI;return w<0&&(w+=360),{l:$,c:g,h:w}}function z(r,t,e){let s=e*Math.PI/180,o=t*Math.cos(s),n=t*Math.sin(s),i=r+.3963377774*o+.2158037573*n,a=r-.1055613458*o-.0638541728*n,l=r-.0894841775*o-1.291485548*n,c=i*i*i,p=a*a*a,d=l*l*l,u=4.0767416621*c-3.3077115913*p+.2309699292*d,$=-1.2684380046*c+2.6097574011*p-.3413193965*d,b=-.0041960863*c-.7034186147*p+1.707614701*d,y=H(V(u)),g=H(V($)),w=H(V(b));return T(Math.round(y*255),Math.round(g*255),Math.round(w*255))}function U(r,t){if(!r)return null;let e=String(r).trim();if(/^#[0-9a-f]{6}$/i.test(e))return e.toLowerCase();if(/^#[0-9a-f]{3}$/i.test(e))return("#"+e.slice(1).split("").map(i=>i+i).join("")).toLowerCase();if(typeof document>"u")return null;let s=t||document.createElement("span");t||(s.style.display="none",document.body.appendChild(s)),s.style.color="",s.style.color=e;let o=getComputedStyle(s).color;t||s.remove();let n=o.match(/rgba?\(\s*([0-9.]+)[\s,]+([0-9.]+)[\s,]+([0-9.]+)/);return n?T(Math.round(+n[1]),Math.round(+n[2]),Math.round(+n[3])):null}function ut({l:r,c:t,h:e}){return`oklch(${(r*100).toFixed(1)}% ${t.toFixed(3)} ${e.toFixed(1)})`}function _(r){let{r:t,g:e,b:s}=C(r),o=n=>{let i=n/255;return i<=.03928?i/12.92:Math.pow((i+.055)/1.055,2.4)};return .2126*o(t)+.7152*o(e)+.0722*o(s)}function pt(r,t){let e=_(r),s=_(t),o=Math.max(e,s),n=Math.min(e,s);return(o+.05)/(n+.05)}function dt(r){return r>=7?"AAA":r>=4.5?"AA":"Fail"}function P(r){return _(r)>.4?"#000000":"#ffffff"}var v=r=>(r%360+360)%360;function Ht(r,t,e){return{colors:[f(r,t,e),f(v(r+180),t,e)],names:["Base","Complement"]}}function _t(r,t,e){return{colors:[f(v(r-30),t,e),f(r,t,e),f(v(r+30),t,e)],names:["Analog A","Base","Analog B"]}}function Ut(r,t,e){return{colors:[f(r,t,e),f(v(r+120),t,e),f(v(r+240),t,e)],names:["Base","Triad A","Triad B"]}}function Pt(r,t,e){return{colors:[f(r,t,e),f(v(r+150),t,e),f(v(r+210),t,e)],names:["Base","Split A","Split B"]}}function Wt(r,t,e){return{colors:[f(r,t,e),f(v(r+90),t,e),f(v(r+180),t,e),f(v(r+270),t,e)],names:["Base","Tetrad A","Tetrad B","Tetrad C"]}}var Jt=[{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 Xt(r,t,e){let s=[],o=[];for(let n of Jt){let i=n.l>85||n.l<20?Math.max(t*.6,5):t;s.push(f(r,Math.round(i),n.l)),o.push(n.label)}return{colors:s,names:o}}var mt={complementary:Ht,analogous:_t,triadic:Ut,"split-complementary":Pt,tetradic:Wt,monochromatic:Xt};function ft(r,t){let{h:e,s,l:o}=ct(r);return(mt[t]||mt.complementary)(e,s,o)}var M=["primary","secondary","accent"],gt=["success","warning","error","info"],Gt=[...M,...gt],ht={primary:"Primary",secondary:"Secondary",accent:"Accent",success:"Success",warning:"Warning",error:"Error",info:"Info"},Yt={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)"}},W="var(--font-mono, monospace)",J="var(--color-text-muted, #666)",X="var(--color-border, #ddd)",bt="var(--color-surface, #fff)",Kt="var(--color-text, #222)",S="var(--radius-s, 0.25rem)",Qt="var(--radius-m, 0.5rem)",G=class extends m{static observedAttributes=["colors","roles","show-export","label"];#t=[];#e=[];#s=null;#r=null;#o=null;setup(){this.#o=document.createElement("span"),this.#o.style.cssText="position:absolute;visibility:hidden;pointer-events:none",this.append(this.#o),this.#s=this.querySelector("color-palette, palette-generator"),this.#a(),this.#n(),this.#c(),this.#l("init"),this.#x(),this.#m(),this.#d("init")}attributeChangedCallback(t){!this.isConnected||!this.hasAttribute("data-upgraded")||(t==="roles"&&this.#a(),t==="colors"&&this.#n(),this.#c(),this.#l("attribute"),this.#m(),this.#d("attribute"))}teardown(){this.#o?.remove(),this.#o=null}#n(){let t=this.querySelector("color-palette");if(t){if(typeof t.colors<"u"&&t.colors.length){this.#t=t.colors.slice();return}let n=(t.getAttribute("colors")||"").split(",").map(i=>i.trim()).filter(Boolean);if(n.length){this.#t=n;return}}let e=this.querySelector("palette-generator");if(e){let o=e.getAttribute("seed")||e.querySelector('input[type="color"]')?.value||"",n=e.getAttribute("harmony")||"complementary";if(o)try{let{colors:i}=ft(o,n);this.#t=i.slice();return}catch{}}let s=this.getAttribute("colors")||"";this.#t=s.split(",").map(o=>o.trim()).filter(Boolean)}#a(){let e=(this.getAttribute("roles")||M.join(",")).split(",").map(s=>s.trim().toLowerCase()).filter(s=>Gt.includes(s));this.#e=e.length?e:[...M]}#i(){let t={};for(let e=0;e<this.#e.length;e++)t[this.#e[e]]=this.#t[e]||this.#t[this.#t.length-1]||"#888888";return t}#c(){let t=this.querySelector(":scope > .sp-shell");t&&t.remove();let e=this.getAttribute("label"),s=this.hasAttribute("show-export"),o=document.createElement("div");if(o.className="sp-shell",o.style.cssText="display:flex;flex-direction:column;gap:var(--size-m,1rem);margin-block-start:var(--size-s,0.75rem)",e){let i=document.createElement("p");i.style.cssText="font-weight:600;margin:0",i.textContent=e,o.append(i)}let n=document.createElement("section");n.className="sp-previews",n.setAttribute("aria-label","Role previews"),n.style.cssText="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(22rem,100%),1fr));gap:var(--size-m,1rem)",o.append(n),this.#r=n,s&&o.insertAdjacentHTML("beforeend",this.#v()),this.append(o)}#l(t){if(!this.#r)return;let e=this.#i();this.#r.innerHTML=this.#e.map(s=>this.#b(s,e[s])).join("")}#b(t,e){let s=ht[t]||t,n=gt.includes(t)?this.#y(t,e):this.#g(t,e),i=`display:flex;flex-direction:column;gap:var(--size-s,0.75rem);padding:var(--size-m,1rem);border:1px solid ${X};border-radius:${Qt};background:${bt};min-inline-size:0`;return`<article class="sp-card" data-role="${t}" aria-label="${s} 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:${F};font-size:var(--font-size-sm,0.875rem);font-weight:600">${t}</code>
-          <span style="display:block;font-size:var(--font-size-xs,0.75rem);color:${H}">${s}</span>
+          <code style="font-family:${W};font-size:var(--font-size-sm,0.875rem);font-weight:600">${t}</code>
+          <span style="display:block;font-size:var(--font-size-xs,0.75rem);color:${J}">${s}</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:${k};border:1px solid oklch(0% 0 0 / 0.15);background:${e}"></span>
-          <code style="font-family:${F};font-size:var(--font-size-xs,0.75rem);color:${H}">${e}</code>
+          <span class="sp-swatch" style="display:inline-block;inline-size:1.75rem;block-size:1.75rem;border-radius:${S};border:1px solid oklch(0% 0 0 / 0.15);background:${e}"></span>
+          <code style="font-family:${W};font-size:var(--font-size-xs,0.75rem);color:${J}">${e}</code>
         </div>
       </header>
-      <div class="sp-samples" style="display:flex;flex-wrap:wrap;gap:var(--size-s,0.75rem);align-items:flex-start">${r}</div>
-    </article>`}#y(t,e){let s=this.#k(t,e),o=this.#f(),r=this.#w(t,e),i=this.#S(e);return[this.#d({render:`<button type="button" tabindex="-1" style="all:unset;display:inline-block;padding:0.375rem 0.875rem;border-radius:${k};background:${e};color:${s};font-family:inherit;font-size:var(--font-size-sm,0.875rem);font-weight:600;cursor:default">Button</button>`,fg:s,bg:e,caption:"On role"}),this.#d({render:`<span style="color:${e};background:${o};padding:0.25rem 0.5rem;border-radius:${k};font-size:var(--font-size-sm,0.875rem);font-weight:500;text-decoration:underline">Linked text</span>`,fg:e,bg:o||"#ffffff",caption:"On surface"}),this.#d({render:`<span style="display:inline-block;padding:0.125rem 0.5rem;border-radius:999px;background:${r};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:r,caption:"Subtle"})].join("")}#v(t,e){let s=this.#f(),o=this.#z(t,e),r=this.#A(t,e),i=V(e);return[this.#d({render:`<div style="display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;border-radius:${k};background:${o};color:${r};border:1px solid ${e};font-size:var(--font-size-sm,0.875rem);max-inline-size:100%">
+      <div class="sp-samples" style="display:flex;flex-wrap:wrap;gap:var(--size-s,0.75rem);align-items:flex-start">${n}</div>
+    </article>`}#g(t,e){let s=this.#$(t,e),o=this.#f(),n=this.#k(t,e),i=this.#A(e);return[this.#u({render:`<button type="button" tabindex="-1" style="all:unset;display:inline-block;padding:0.375rem 0.875rem;border-radius:${S};background:${e};color:${s};font-family:inherit;font-size:var(--font-size-sm,0.875rem);font-weight:600;cursor:default">Button</button>`,fg:s,bg:e,caption:"On role"}),this.#u({render:`<span style="color:${e};background:${o};padding:0.25rem 0.5rem;border-radius:${S};font-size:var(--font-size-sm,0.875rem);font-weight:500;text-decoration:underline">Linked text</span>`,fg:e,bg:o||"#ffffff",caption:"On surface"}),this.#u({render:`<span style="display:inline-block;padding:0.125rem 0.5rem;border-radius:999px;background:${n};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:n,caption:"Subtle"})].join("")}#y(t,e){let s=this.#f(),o=this.#w(t,e),n=this.#S(t,e),i=P(e);return[this.#u({render:`<div style="display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;border-radius:${S};background:${o};color:${n};border:1px solid ${e};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:${e};flex-shrink:0"></span>
-          <span><strong>${ot[t]||t}</strong> \u2014 message text</span>
-        </div>`,fg:r,bg:o,caption:"Alert"}),this.#d({render:`<span style="display:inline-block;padding:0.125rem 0.5rem;border-radius:999px;background:${e};color:${i};font-size:var(--font-size-xs,0.75rem);font-weight:700;letter-spacing:0.04em;text-transform:uppercase">${t}</span>`,fg:i,bg:e,caption:"Badge"}),this.#d({render:`<span style="color:${e};background:${s};padding:0.25rem 0.5rem;border-radius:${k};font-size:var(--font-size-sm,0.875rem);font-weight:600">Inline status</span>`,fg:e,bg:s||"#ffffff",caption:"On surface"})].join("")}#d({render:t,fg:e,bg:s,caption:o}){let r=N(e,this.#o)||"#000000",i=N(s,this.#o)||"#ffffff",a=Z(r,i),l=tt(a).toLowerCase(),c=Mt[l],u=`display:inline-flex;align-items:center;gap:0.25rem;padding:0.125rem 0.375rem;border-radius:${k};font-family:${F};font-size:var(--font-size-xs,0.75rem);background:${c.bg};color:${c.fg}`;return`<div style="display:flex;flex-direction:column;gap:0.25rem;align-items:flex-start;min-inline-size:0;max-inline-size:100%">
+          <span><strong>${ht[t]||t}</strong> \u2014 message text</span>
+        </div>`,fg:n,bg:o,caption:"Alert"}),this.#u({render:`<span style="display:inline-block;padding:0.125rem 0.5rem;border-radius:999px;background:${e};color:${i};font-size:var(--font-size-xs,0.75rem);font-weight:700;letter-spacing:0.04em;text-transform:uppercase">${t}</span>`,fg:i,bg:e,caption:"Badge"}),this.#u({render:`<span style="color:${e};background:${s};padding:0.25rem 0.5rem;border-radius:${S};font-size:var(--font-size-sm,0.875rem);font-weight:600">Inline status</span>`,fg:e,bg:s||"#ffffff",caption:"On surface"})].join("")}#u({render:t,fg:e,bg:s,caption:o}){let n=U(e,this.#o||void 0)||"#000000",i=U(s,this.#o||void 0)||"#ffffff",a=pt(n,i),l=dt(a).toLowerCase(),c=Yt[l],p=`display:inline-flex;align-items:center;gap:0.25rem;padding:0.125rem 0.375rem;border-radius:${S};font-family:${W};font-size:var(--font-size-xs,0.75rem);background:${c.bg};color:${c.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%">${t}</div>
-      <div style="display:flex;align-items:center;gap:0.375rem;font-size:var(--font-size-xs,0.75rem);color:${H}">
-        <span style="${u}" title="${o}: ${a.toFixed(2)}:1">${a.toFixed(2)} <small>${l.toUpperCase()}</small></span>
+      <div style="display:flex;align-items:center;gap:0.375rem;font-size:var(--font-size-xs,0.75rem);color:${J}">
+        <span style="${p}" title="${o}: ${a.toFixed(2)}:1">${a.toFixed(2)} <small>${l.toUpperCase()}</small></span>
         <span>${o}</span>
       </div>
-    </div>`}#x(){let t=`display:flex;gap:var(--size-2xs,0.375rem);padding-block-start:var(--size-xs,0.5rem);border-block-start:1px solid ${D}`,e=`padding:0.375rem 0.875rem;border:1px solid ${D};border-radius:${k};background:${rt};color:${Lt};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="${t}">
+    </div>`}#v(){let t=`display:flex;gap:var(--size-2xs,0.375rem);padding-block-start:var(--size-xs,0.5rem);border-block-start:1px solid ${X}`,e=`padding:0.375rem 0.875rem;border:1px solid ${X};border-radius:${S};background:${bt};color:${Kt};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="${t}">
       <button type="button" class="sp-copy-css" style="${e}">Copy Theme CSS</button>
       <button type="button" class="sp-copy-json" style="${e}">Copy JSON</button>
-    </div>`}#$(){let t=this.querySelector("color-palette");t&&this.listen(t,"color-palette:change",()=>{this.#n(),this.#l("palette"),this.#m("palette")});let e=this.querySelector("palette-generator");e&&this.listen(e,"palette-generator:generate",()=>{this.#n(),this.#l("palette"),this.#m("palette")})}#p(){let t=this.querySelector(".sp-copy-css"),e=this.querySelector(".sp-copy-json");t&&this.listen(t,"click",()=>{navigator.clipboard?.writeText(this.#h()),this.#b(t,"Copy Theme CSS")}),e&&this.listen(e,"click",()=>{navigator.clipboard?.writeText(JSON.stringify(this.#i(),null,2)),this.#b(e,"Copy JSON")})}#u(){return getComputedStyle(this)}#f(){return this.#u().getPropertyValue("--color-surface").trim()||"#ffffff"}#k(t,e){return this.#u().getPropertyValue(`--color-text-on-${t}`).trim()||V(e)}#w(t,e){let s=this.#u().getPropertyValue(`--color-${t}-subtle`).trim();if(s)return s;let{h:o}=w(e);return z(.95,.03,o)}#z(t,e){let s=this.#u().getPropertyValue(`--color-${t}-subtle`).trim();if(s)return s;let{h:o}=w(e);return z(.94,.05,o)}#A(t,e){let s=this.#u().getPropertyValue(`--color-${t}-text`).trim();if(s)return s;let{h:o}=w(e);return z(.3,.14,o)}#S(t){let{l:e,c:s,h:o}=w(t);return z(Math.max(.2,e-.25),s,o)}#h(){let t=this.#i(),e=[],s=[];for(let r of this.#e){let i=t[r];if(!i)continue;let{l:a,c:l,h:c}=w(i);E.includes(r)?e.push(`  --hue-${r}: ${c.toFixed(1)};`,`  --lightness-${r}: ${(a*100).toFixed(1)}%;`,`  --chroma-${r}: ${l.toFixed(3)};`):s.push(`  --color-${r}: ${Q({l:a,c:l,h:c})};`)}let o=[];return e.length&&o.push("  /* Brand seeds */",...e),s.length&&(e.length&&o.push(""),o.push("  /* Status colors */",...s)),`:root {
+    </div>`}#x(){let t=this.querySelector("color-palette");t&&this.listen(t,"color-palette:change",()=>{this.#n(),this.#l("palette"),this.#d("palette")});let e=this.querySelector("palette-generator");e&&this.listen(e,"palette-generator:generate",()=>{this.#n(),this.#l("palette"),this.#d("palette")})}#m(){let t=this.querySelector(".sp-copy-css"),e=this.querySelector(".sp-copy-json");t&&this.listen(t,"click",()=>{k(this.#h(),{button:t,announceMessage:"Theme CSS copied"})}),e&&this.listen(e,"click",()=>{k(JSON.stringify(this.#i(),null,2),{button:e,announceMessage:"JSON copied"})})}#p(){return getComputedStyle(this)}#f(){return this.#p().getPropertyValue("--color-surface").trim()||"#ffffff"}#$(t,e){return this.#p().getPropertyValue(`--color-text-on-${t}`).trim()||P(e)}#k(t,e){let s=this.#p().getPropertyValue(`--color-${t}-subtle`).trim();if(s)return s;let{h:o}=A(e);return z(.95,.03,o)}#w(t,e){let s=this.#p().getPropertyValue(`--color-${t}-subtle`).trim();if(s)return s;let{h:o}=A(e);return z(.94,.05,o)}#S(t,e){let s=this.#p().getPropertyValue(`--color-${t}-text`).trim();if(s)return s;let{h:o}=A(e);return z(.3,.14,o)}#A(t){let{l:e,c:s,h:o}=A(t);return z(Math.max(.2,e-.25),s,o)}#h(){let t=this.#i(),e=[],s=[];for(let n of this.#e){let i=t[n];if(!i)continue;let{l:a,c:l,h:c}=A(i);M.includes(n)?e.push(`  --hue-${n}: ${c.toFixed(1)};`,`  --lightness-${n}: ${(a*100).toFixed(1)}%;`,`  --chroma-${n}: ${l.toFixed(3)};`):s.push(`  --color-${n}: ${ut({l:a,c:l,h:c})};`)}let o=[];return e.length&&o.push("  /* Brand seeds */",...e),s.length&&(e.length&&o.push(""),o.push("  /* Status colors */",...s)),`:root {
 ${o.join(`
 `)}
 }
-`}#b(t,e){t.textContent="Copied!",setTimeout(()=>{t.textContent=e},1500)}#m(t){this.dispatchEvent(new CustomEvent("semantic-palette:change",{bubbles:!0,detail:{mapping:this.#i(),tokens:this.#h(),source:t}}))}};h("semantic-palette",P);var Bt="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",Rt="instant,fast,normal,slow,slower",it="ms-keyframes",Ot=`
+`}#d(t){this.dispatchEvent(new CustomEvent("semantic-palette:change",{bubbles:!0,detail:{mapping:this.#i(),tokens:this.#h(),source:t}}))}};h("semantic-palette",G);var Zt="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",te="instant,fast,normal,slow,slower",yt="ms-keyframes",ee=`
 @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 jt(){if(typeof document>"u"||document.getElementById(it))return;let n=document.createElement("style");n.id=it,n.textContent=Ot,document.head.append(n)}var at="var(--font-mono, monospace)",lt="var(--color-text-muted, #666)",ct="var(--color-interactive, oklch(55% 0.2 260))",dt="var(--color-surface-sunken, #f1f1f1)",I=class extends m{static observedAttributes=["type","tokens","prefix","duration","show-values","label"];setup(){jt(),this.#t()}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&this.#t()}#t(){let t=this.getAttribute("type")||"easing",e=this.getAttribute("duration")||"1.2s",s=this.getAttribute("show-values")!=="false",o=this.getAttribute("label")||"",r="";o&&(r+=`<p style="font-weight:600;margin:0 0 var(--size-s,0.75rem)">${o}</p>`),(t==="easing"||t==="both")&&(r+=this.#n(e,s)),(t==="duration"||t==="both")&&(t==="both"&&(r+='<div aria-hidden="true" style="block-size:var(--size-m,1rem)"></div>'),r+=this.#a(s)),this.innerHTML=r,s&&requestAnimationFrame(()=>this.#i())}#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:${at};font-size:var(--font-size-sm,0.875rem);color:${lt};text-align:end`}#r(){return`font-family:${at};font-size:var(--font-size-xs,0.75rem);color:${lt};font-variant-numeric:tabular-nums;white-space:nowrap`}#o(){return"list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--size-2xs,0.375rem)"}#n(t,e){let s=(this.getAttribute("tokens")||Bt).split(",").map(l=>l.trim()),o=this.getAttribute("prefix")||"--ease-",r=`position:relative;display:block;block-size:0.5rem;background:${dt};border-radius:999px`,i=`position:absolute;inset-block-start:50%;inset-inline-start:0;inline-size:1rem;block-size:1rem;background:${ct};border-radius:50%;transform:translateY(-50%)`,a=s.map(l=>{let c=`${o}${l}`;return`<li class="ms-row ms-row-ease" role="listitem" style="${this.#e()}">
+`;function se(){if(typeof document>"u"||document.getElementById(yt))return;let r=document.createElement("style");r.id=yt,r.textContent=ee,document.head.append(r)}var vt="var(--font-mono, monospace)",xt="var(--color-text-muted, #666)",$t="var(--color-interactive, oklch(55% 0.2 260))",kt="var(--color-surface-sunken, #f1f1f1)",Y=class extends m{static observedAttributes=["type","tokens","prefix","duration","show-values","label"];setup(){se(),this.#t()}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&this.#t()}#t(){let t=this.getAttribute("type")||"easing",e=this.getAttribute("duration")||"1.2s",s=this.getAttribute("show-values")!=="false",o=this.getAttribute("label")||"",n="";o&&(n+=`<p style="font-weight:600;margin:0 0 var(--size-s,0.75rem)">${o}</p>`),(t==="easing"||t==="both")&&(n+=this.#n(e,s)),(t==="duration"||t==="both")&&(t==="both"&&(n+='<div aria-hidden="true" style="block-size:var(--size-m,1rem)"></div>'),n+=this.#a(s)),this.innerHTML=n,s&&requestAnimationFrame(()=>this.#i())}#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:${vt};font-size:var(--font-size-sm,0.875rem);color:${xt};text-align:end`}#r(){return`font-family:${vt};font-size:var(--font-size-xs,0.75rem);color:${xt};font-variant-numeric:tabular-nums;white-space:nowrap`}#o(){return"list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--size-2xs,0.375rem)"}#n(t,e){let s=(this.getAttribute("tokens")||Zt).split(",").map(l=>l.trim()),o=this.getAttribute("prefix")||"--ease-",n=`position:relative;display:block;block-size:0.5rem;background:${kt};border-radius:999px`,i=`position:absolute;inset-block-start:50%;inset-inline-start:0;inline-size:1rem;block-size:1rem;background:${$t};border-radius:50%;transform:translateY(-50%)`,a=s.map(l=>{let c=`${o}${l}`;return`<li class="ms-row ms-row-ease" role="listitem" style="${this.#e()}">
         <span style="${this.#s()}">${l}</span>
-        <span style="${r}" aria-hidden="true">
+        <span style="${n}" aria-hidden="true">
           <span class="ms-dot" style="${i};animation: ms-slide ${t} var(${c}) infinite alternate"></span>
         </span>
         ${e?`<span class="ms-value" data-var="${c}" style="${this.#r()}"></span>`:""}
-      </li>`}).join("");return`<ul class="ms-list" role="list" aria-label="Easing scale" style="${this.#o()}">${a}</ul>`}#a(t){let e=(this.getAttribute("tokens")||Rt).split(",").map(a=>a.trim()),s=this.getAttribute("prefix")||"--duration-",o=`position:relative;display:block;block-size:0.5rem;background:${dt};border-radius:999px;overflow:hidden`,r=`position:absolute;inset-block:0;inset-inline-start:0;inline-size:100%;background:${ct};transform-origin:left center;animation-name:ms-fill;animation-iteration-count:infinite;animation-timing-function:linear`,i=e.map(a=>{let l=`${s}${a}`;return`<li class="ms-row ms-row-dur" role="listitem" style="${this.#e()}">
+      </li>`}).join("");return`<ul class="ms-list" role="list" aria-label="Easing scale" style="${this.#o()}">${a}</ul>`}#a(t){let e=(this.getAttribute("tokens")||te).split(",").map(a=>a.trim()),s=this.getAttribute("prefix")||"--duration-",o=`position:relative;display:block;block-size:0.5rem;background:${kt};border-radius:999px;overflow:hidden`,n=`position:absolute;inset-block:0;inset-inline-start:0;inline-size:100%;background:${$t};transform-origin:left center;animation-name:ms-fill;animation-iteration-count:infinite;animation-timing-function:linear`,i=e.map(a=>{let l=`${s}${a}`;return`<li class="ms-row ms-row-dur" role="listitem" style="${this.#e()}">
         <span style="${this.#s()}">${a}</span>
         <span style="${o}" aria-hidden="true">
-          <span class="ms-bar-fill" style="${r};animation-duration: var(${l})"></span>
+          <span class="ms-bar-fill" style="${n};animation-duration: var(${l})"></span>
         </span>
         ${t?`<span class="ms-value" data-var="${l}" style="${this.#r()}"></span>`:""}
-      </li>`}).join("");return`<ul class="ms-list" role="list" aria-label="Duration scale" style="${this.#o()}">${i}</ul>`}#i(){this.querySelectorAll(".ms-value").forEach(t=>{let e=t.getAttribute("data-var");if(!e)return;let s=getComputedStyle(this).getPropertyValue(e).trim();t.textContent=s||"\u2014"})}};h("motion-specimen",I);var Nt="--color-,--hue-,--lightness-,--chroma-,--font-,--size-,--radius-,--shadow-,--border-width-,--ease-,--duration-",Vt=["type-specimen:change","spacing-specimen:change","token-specimen:change","semantic-palette:change"],U=class extends m{static observedAttributes=["scope","selector","include","format","label","live"];setup(){this.#o(),this.#n(),this.#a(),this.#c()}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&(this.#o(),this.#n(),this.#a(),this.#c())}#t(){let t=this.getAttribute("scope")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}#e(){return(this.getAttribute("include")||Nt).split(",").map(e=>e.trim()).filter(Boolean)}#s(){let t=this.#t();if(!t)return[];let e=this.#e(),s=t.style,o=[];for(let r=0;r<s.length;r++){let i=s.item(r);if(!i.startsWith("--")||!e.some(l=>i.startsWith(l)))continue;let a=s.getPropertyValue(i).trim();a&&o.push([i,a])}return o}#r(t){if((this.getAttribute("format")||"css")==="json"){let r=Object.fromEntries(t);return JSON.stringify(r,null,2)}let s=this.getAttribute("selector")||":root";if(!t.length)return`${s} {
+      </li>`}).join("");return`<ul class="ms-list" role="list" aria-label="Duration scale" style="${this.#o()}">${i}</ul>`}#i(){this.querySelectorAll(".ms-value").forEach(t=>{let e=t.getAttribute("data-var");if(!e)return;let s=getComputedStyle(this).getPropertyValue(e).trim();t.textContent=s||"\u2014"})}};h("motion-specimen",Y);var x="com.vanilla-breeze",oe="2025.10";function wt(r,t={}){let e={},s=[],o=!1;for(let[i,a]of r){let l=String(a).trim(),c=re(i);if(!c){s.push(i);continue}c.path[0]==="color"&&c.path[1]==="seeds"&&(o=!0);let p=ne(i,l,c);ye(e,c.path,c.name,p)}let n={spec:oe};return t.vbVersion&&(n.vbVersion=t.vbVersion),o&&(n.seedDerivation=!0),s.length&&(n.unmapped=s),e.$extensions={[x]:n},e}function re(r){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:s,type:o,keep:n}of t)if(r.startsWith(e)){let i=n?r.slice(2):r.slice(e.length);return{path:s,type:o,name:i}}return null}function ne(r,t,e){switch(e.type){case"color":return ie(t);case"fontFamily":return{$type:"fontFamily",$value:pe(t)};case"fontWeight":return{$type:"fontWeight",$value:Z(t)};case"number":return ce(t);case"dimension":return ue(t);case"duration":return{$type:"duration",$value:de(t)};case"cubicBezier":return me(t);case"shadow":return fe(t);default:return{$value:t}}}function ie(r){let t=ge(r);if(t)return{$root:{$type:"color",$value:E(t.light)??K(t.light)},light:{$type:"color",$value:E(t.light)??K(t.light)},dark:{$type:"color",$value:E(t.dark)??K(t.dark)},$extensions:{[x]:{lightDark:r}}};if(/\bfrom\b/.test(r)&&/^oklch\(/i.test(r))return{$type:"color",$value:{colorSpace:"srgb",components:[0,0,0]},$extensions:{[x]:{expression:r}}};let e=E(r);return e?{$type:"color",$value:e}:{$type:"color",$value:{colorSpace:"srgb",components:[0,0,0]},$extensions:{[x]:{literal:r}}}}function K(r){return{colorSpace:"srgb",components:[0,0,0],$vbLiteral:r}}function E(r){let t=String(r).trim(),e=t.match(/^oklch\(\s*([^)]+)\)\s*$/i);if(e){let[s,o]=le(e[1]),n=s.trim().split(/\s+/);if(n.length<3)return null;let i=L(n[0]),a=Z(n[1]),l=Z(n[2]);if([i,a,l].some(Number.isNaN))return null;let c={colorSpace:"oklch",components:[ae(n[0],i),a,l]};return o!=null&&(c.alpha=o),c}if(e=t.match(/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i),e){let s=e[1],o,n,i,a;s.length===3||s.length===4?(o=parseInt(s[0]+s[0],16)/255,n=parseInt(s[1]+s[1],16)/255,i=parseInt(s[2]+s[2],16)/255,s.length===4&&(a=parseInt(s[3]+s[3],16)/255)):(o=parseInt(s.slice(0,2),16)/255,n=parseInt(s.slice(2,4),16)/255,i=parseInt(s.slice(4,6),16)/255,s.length===8&&(a=parseInt(s.slice(6,8),16)/255));let l={colorSpace:"srgb",components:[o,n,i],hex:"#"+(s.length<=4?s.slice(0,3).split("").map(c=>c+c).join(""):s.slice(0,6)).toLowerCase()};return a!=null&&(l.alpha=a),l}if(e=t.match(/^rgba?\(\s*([^)]+)\)\s*$/i),e){let s=e[1].split(/\s*,\s*|\s+/).filter(Boolean);if(s.length<3)return null;let o=Q(s[0]),n=Q(s[1]),i=Q(s[2]),a={colorSpace:"srgb",components:[o,n,i]};return s[3]!=null&&(a.alpha=L(s[3])),a}return null}function ae(r,t){return typeof r=="string"&&r.endsWith("%")?t/100:t}function le(r){let t=r.indexOf("/");if(t<0)return[r,null];let e=r.slice(0,t),s=L(r.slice(t+1).trim());return[e,s]}function Q(r){let t=r.trim();return t.endsWith("%")?parseFloat(t)/100:parseFloat(t)/255}function ce(r){let e={$type:"number",$value:L(r)};return typeof r=="string"&&r.trim().endsWith("%")&&(e.$extensions={[x]:{unit:"%"}}),e}function ue(r){let t=String(r).trim(),e=t.match(/^(-?[\d.]+)(px|rem|em|%)?$/);if(!e)return{$type:"dimension",$value:{value:0,unit:"px"},$extensions:{[x]:{literal:t}}};let s=parseFloat(e[1]),o=e[2]||"px",i={$type:"dimension",$value:{value:s,unit:o==="px"||o==="rem"?o:"rem"}};return o!=="px"&&o!=="rem"&&(i.$extensions={[x]:{unit:o}}),i}function Z(r){return parseFloat(String(r).trim())}function L(r){let t=String(r).trim();return t.endsWith("%"),parseFloat(t)}function pe(r){let t=[],e="",s=null;for(let n of String(r))if(s){if(n===s){s=null;continue}e+=n}else if(n==='"'||n==="'")s=n;else if(n===","){let i=e.trim();i&&t.push(i),e=""}else e+=n;let o=e.trim();return o&&t.push(o),t}function de(r){let t=String(r).trim(),e=t.match(/^(-?[\d.]+)(ms|s)$/);return e?{value:parseFloat(e[1]),unit:e[2]}:{value:parseFloat(t),unit:"ms"}}function me(r){let t=String(r).match(/^cubic-bezier\(\s*([^)]+)\)\s*$/i);if(!t)return{$type:"cubicBezier",$value:[0,0,1,1],$extensions:{[x]:{literal:r}}};let e=t[1].split(",").map(s=>parseFloat(s.trim()));return e.length!==4||e.some(Number.isNaN)?{$type:"cubicBezier",$value:[0,0,1,1],$extensions:{[x]:{literal:r}}}:{$type:"cubicBezier",$value:e}}function fe(r){let e=St(String(r)).map(he);return e.some(s=>s==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:{[x]:{literal:r}}}:e.length===1?{$type:"shadow",$value:e[0]}:{$type:"shadow",$value:e}}function he(r){let t=r.trim(),e=t.match(/(#[0-9a-f]{3,8}|rgba?\([^)]+\)|oklch\([^)]+\))$/i);if(!e)return null;let s=E(e[0]);if(!s)return null;let n=t.slice(0,e.index).trim().split(/\s+/).filter(Boolean);if(n.length<3)return null;let i=l=>be(n[l]),a={offsetX:i(0),offsetY:i(1),blur:i(2),color:s};return n[3]&&(a.spread=i(3)),a}function be(r){let t=r.match(/^(-?[\d.]+)(px|rem|em)?$/);if(!t)return{value:0,unit:"px"};let e=parseFloat(t[1]),s=t[2]||"px";return{value:e,unit:s==="px"||s==="rem"?s:"rem"}}function St(r){let t=[],e="",s=0;for(let o of r)o==="("?s++:o===")"&&s--,o===","&&s===0?(t.push(e),e=""):e+=o;return e.trim()&&t.push(e),t}function ge(r){let t=String(r).match(/^light-dark\(\s*([\s\S]+)\s*\)\s*$/i);if(!t)return null;let e=St(t[1]);return e.length!==2?null:{light:e[0].trim(),dark:e[1].trim()}}function ye(r,t,e,s){let o=r;for(let n of t)(!o[n]||typeof o[n]!="object")&&(o[n]={}),o=o[n];o[e]=s}var ve="--color-,--hue-,--lightness-,--chroma-,--font-,--size-,--radius-,--shadow-,--border-width-,--ease-,--duration-,--line-height-,--letter-spacing-",xe=["type-specimen:change","spacing-specimen:change","token-specimen:change","semantic-palette:change"],tt=class extends m{static observedAttributes=["scope","selector","include","format","label","live"];setup(){this.#o(),this.#n(),this.#a(),this.#c()}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&(this.#o(),this.#n(),this.#a(),this.#c())}#t(){let t=this.getAttribute("scope")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}#e(){return(this.getAttribute("include")||ve).split(",").map(e=>e.trim()).filter(Boolean)}#s(){let t=this.#t();if(!t)return[];let e=this.#e(),s=t.style,o=[];for(let n=0;n<s.length;n++){let i=s.item(n);if(!i.startsWith("--")||!e.some(l=>i.startsWith(l)))continue;let a=s.getPropertyValue(i).trim();a&&o.push([i,a])}return o}#r(t){let e=this.getAttribute("format")||"css";if(e==="json"){let n=Object.fromEntries(t);return JSON.stringify(n,null,2)}if(e==="dtcg"){let n=this.getAttribute("vb-version")||void 0;return JSON.stringify(wt(t,{vbVersion:n}),null,2)}let s=this.getAttribute("selector")||":root";if(!t.length)return`${s} {
   /* No theme overrides detected yet. Edit a specimen to populate. */
 }
-`;let o=t.map(([r,i])=>`  ${r}: ${i};`).join(`
+`;let o=t.map(([n,i])=>`  ${n}: ${i};`).join(`
 `);return`${s} {
 ${o}
 }
-`}#o(){let t=this.getAttribute("label")||"",e=t?`<p style="font-weight:600;margin:0 0 var(--size-xs,0.5rem)">${t}</p>`:"",s="display:flex;gap:var(--size-2xs,0.375rem);margin-block-end:var(--size-xs,0.5rem)",o="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="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";this.innerHTML=`
+`}#o(){let t=this.getAttribute("label")||"",e=t?`<p style="font-weight:600;margin:0 0 var(--size-xs,0.5rem)">${t}</p>`:"",s="display:flex;gap:var(--size-2xs,0.375rem);margin-block-end:var(--size-xs,0.5rem);align-items:center;flex-wrap:wrap",o="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: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="${s}">
+        <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="${n}" 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="${o}" aria-label="Refresh">Refresh</button>
         <button type="button" class="te-copy" style="${o}">Copy</button>
         <button type="button" class="te-download" style="${o}">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="${r}"></textarea>
-    `}#n(){let t=this.#s(),e=this.#r(t),s=this.querySelector(".te-output"),o=this.querySelector(".te-count");s&&(s.value=e),o&&(o.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)}}))}#a(){let t=this.querySelector(".te-refresh"),e=this.querySelector(".te-copy"),s=this.querySelector(".te-download");t&&this.listen(t,"click",()=>this.#n()),e&&this.listen(e,"click",()=>{let o=this.querySelector(".te-output");if(!o)return;navigator.clipboard?.writeText(o.value);let r=e.textContent;e.textContent="Copied!",setTimeout(()=>{e.textContent=r},1500)}),s&&this.listen(s,"click",()=>this.#i())}#i(){let t=this.querySelector(".te-output");if(!t)return;let e=this.getAttribute("format")||"css",s=e==="json"?"json":"css",o=new Blob([t.value],{type:e==="json"?"application/json":"text/css"}),r=URL.createObjectURL(o),i=document.createElement("a");i.href=r,i.download=`theme.${s}`,i.click(),URL.revokeObjectURL(r)}#c(){if(this.hasAttribute("live"))for(let t of Vt)this.listen(document,t,()=>this.#n())}};h("theme-export",U);
+      <textarea class="te-output" readonly aria-label="Theme output" style="${i}"></textarea>
+    `}#n(){let t=this.#s(),e=this.#r(t),s=this.querySelector(".te-output"),o=this.querySelector(".te-count");s&&(s.value=e),o&&(o.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)}}))}#a(){let t=this.querySelector(".te-refresh"),e=this.querySelector(".te-copy"),s=this.querySelector(".te-download"),o=this.querySelector(".te-format");o&&this.listen(o,"change",()=>{this.setAttribute("format",o.value)}),t&&this.listen(t,"click",()=>this.#n()),e&&this.listen(e,"click",()=>{let n=this.querySelector(".te-output");n&&k(n.value,{button:e,announceMessage:"Theme copied"})}),s&&this.listen(s,"click",()=>this.#i())}#i(){let t=this.querySelector(".te-output");if(!t)return;let e=this.getAttribute("format")||"css",s="css",o="text/css",n="theme.css";e==="json"?(s="json",o="application/json",n="theme.json"):e==="dtcg"&&(s="tokens.json",o="application/design-tokens+json",n="theme.tokens.json");let i=new Blob([t.value],{type:o}),a=URL.createObjectURL(i),l=document.createElement("a");l.href=a,l.download=n,l.click(),URL.revokeObjectURL(a)}#c(){if(this.hasAttribute("live"))for(let t of xe)this.listen(document,t,()=>this.#n())}};h("theme-export",tt);
 //# sourceMappingURL=design-system.full.js.map

package/dist/cdn/packs/effects.full.js

@@ -1,2 +1,2 @@
-var k=window.matchMedia("(prefers-reduced-motion: reduce)");function v(){return k.matches||document.documentElement.hasAttribute("data-motion-reduced")}var E=0,f={_effects:new Map,_triggers:new Map,_transitions:new Map,_instances:new WeakMap,_triggerCleanups:new WeakMap,_transitionCleanups:new WeakMap,_observer:null,effect(t,e){this._effects.set(t,e),document.querySelectorAll("[data-effect]").forEach(r=>{(r.getAttribute("data-effect")||"").split(/\s+/).includes(t)&&this._initEffect(r,t)})},trigger(t,e){this._triggers.set(t,e)},transition(t,e){this._transitions.set(t,e)},uid(t){return t.id?t.id:(t._vbUid||(E++,t._vbUid=`vb-${E}`),t._vbUid)},theme(t,e){this._themes=this._themes||new Map,this._themes.set(t,e)},applyTheme(t,e=document.documentElement){let r=this._themes?.get(t);if(r)for(let[i,n]of Object.entries(r))e.style.setProperty(i,n)},swap(t){return document.startViewTransition?document.startViewTransition(t):t()},observe(t=document){if(t.querySelectorAll("[data-effect]").forEach(r=>this._processElement(r)),t.querySelectorAll("[data-stagger]").forEach(r=>this._processStagger(r)),t.querySelectorAll("[data-transition]").forEach(r=>this._processTransition(r)),this._observer)return;this._observer=new MutationObserver(r=>{for(let i of r){if(i.type==="childList"){for(let n of i.addedNodes)n.nodeType===Node.ELEMENT_NODE&&this._processTree(n);for(let n of i.removedNodes)n.nodeType===Node.ELEMENT_NODE&&this._cleanupTree(n)}if(i.type==="attributes"){let n=i.target;i.attributeName==="data-effect"&&this._reconcileEffects(n),i.attributeName==="data-trigger"&&this._reconcileTrigger(n),i.attributeName==="data-stagger"&&this._processStagger(n),i.attributeName==="data-transition"&&this._processTransition(n)}}});let e=t===document?document.body:t;this._observer.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-effect","data-trigger","data-stagger","data-transition"]})},disconnect(){this._observer&&(this._observer.disconnect(),this._observer=null)},params(t){let e=getComputedStyle(t);return{get(r){return e.getPropertyValue(`--vb-${r}`).trim()},getNumber(r,i=0){let n=e.getPropertyValue(`--vb-${r}`).trim();return n?parseFloat(n):i},getTime(r,i=0){let n=e.getPropertyValue(`--vb-${r}`).trim();if(!n)return i;let s=parseFloat(n);return Number.isFinite(s)?/s\s*$/.test(n)&&!/ms\s*$/.test(n)?s*1e3:s:i},hasClass(r){return t.classList.contains(r)}}},emit(t,e,r={}){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:r}))},prefersReducedMotion:v,_processTree(t){t.hasAttribute?.("data-effect")&&this._processElement(t),t.hasAttribute?.("data-stagger")&&this._processStagger(t),t.hasAttribute?.("data-transition")&&this._processTransition(t),t.querySelectorAll?.("[data-effect]").forEach(e=>this._processElement(e)),t.querySelectorAll?.("[data-stagger]").forEach(e=>this._processStagger(e)),t.querySelectorAll?.("[data-transition]").forEach(e=>this._processTransition(e))},_cleanupTree(t){t.hasAttribute?.("data-effect")&&this._cleanupElement(t),t.hasAttribute?.("data-transition")&&this._cleanupTransition(t),t.querySelectorAll?.("[data-effect]").forEach(e=>this._cleanupElement(e)),t.querySelectorAll?.("[data-transition]").forEach(e=>this._cleanupTransition(e))},_processElement(t){if(t.hasAttribute("data-effect-processed"))return;t.setAttribute("data-effect-processed","");let e=t.getAttribute("data-effect")?.split(/\s+/).filter(Boolean)||[];for(let r of e)this._initEffect(t,r);this._wireTrigger(t,e)},_initEffect(t,e){let r=this._effects.get(e);if(!r)return;let i=this._instances.get(t);if(i?.has(e))return;v();let n=r(t);n&&(i||(i=new Map,this._instances.set(t,i)),typeof n=="function"?i.set(e,{cleanup:n}):i.set(e,n))},_wireTrigger(t,e){let r=t.getAttribute("data-trigger");if(!r){this._activateEffects(t);return}let i=r.split(/\s+/).filter(Boolean);for(let n of i){let s=n.indexOf(":"),o=s>-1?n.slice(0,s):n,a=s>-1?n.slice(s+1):null,u=this._triggers.get(o);if(!u)continue;let c=u(t,()=>this._activateEffects(t),a);if(c){let d=this._triggerCleanups.get(t);if(d){let l=d;this._triggerCleanups.set(t,()=>{l(),c()})}else this._triggerCleanups.set(t,c)}}},_activateEffects(t){t.setAttribute("data-effect-active","");let e=this._instances.get(t);if(e)for(let[,r]of e)r.activate&&r.activate()},_cleanupElement(t){let e=this._instances.get(t);if(e){for(let[,i]of e)i.cleanup&&i.cleanup();this._instances.delete(t)}let r=this._triggerCleanups.get(t);r&&(r(),this._triggerCleanups.delete(t))},_reconcileEffects(t){let e=t.getAttribute("data-effect")?.split(/\s+/).filter(Boolean)||[],r=this._instances.get(t);if(r)for(let[i,n]of r)e.includes(i)||(n.cleanup&&n.cleanup(),r.delete(i));for(let i of e)r?.has(i)||this._initEffect(t,i);t.hasAttribute("data-effect-processed")||(t.setAttribute("data-effect-processed",""),this._wireTrigger(t,e))},_reconcileTrigger(t){let e=this._triggerCleanups.get(t);e&&(e(),this._triggerCleanups.delete(t));let r=t.getAttribute("data-effect")?.split(/\s+/).filter(Boolean)||[];this._wireTrigger(t,r)},_processStagger(t){let e=t.children;for(let r=0;r<e.length;r++)e[r].style.setProperty("--vb-stagger-index",String(r))},_processTransition(t){if(t.hasAttribute("data-transition-processed"))return;t.setAttribute("data-transition-processed","");let e=t.getAttribute("data-transition");if(!e)return;let r=this._transitions.get(e);if(r){let i=r(t);i&&this._transitionCleanups.set(t,i)}else t.style.viewTransitionName=`${e}-${this.uid(t)}`},_cleanupTransition(t){let e=this._transitionCleanups.get(t);e&&(e(),this._transitionCleanups.delete(t)),t.style.viewTransitionName=""}};typeof window<"u"&&(window.VB=f);f.effect("glitch",t=>{t.hasAttribute("data-effect-glitch-init")||(t.setAttribute("data-effect-glitch-init",""),t.setAttribute("data-glitch-text",t.textContent))});function S(t,e,r,i){let n=0;function s(){n<=e.length?(t.firstChild.textContent=e.slice(0,n),n++,setTimeout(s,r)):i&&i()}s()}function L(t,e,r){let i=t.firstChild.textContent,n=i.length;function s(){n>=0?(t.firstChild.textContent=i.slice(0,n),n--,setTimeout(s,e/2)):r&&r()}s()}function M(t){let e=t.getAttribute("data-typewriter-text"),r=f.params(t),i=r.getTime("typewriter-speed",50),n=r.getTime("typewriter-delay",0),o=t.classList.contains("loop")?2e3:null;t.textContent="";let a=document.createTextNode("");if(t.appendChild(a),!t.classList.contains("no-cursor")){let d=document.createElement("span");d.className="vb-typewriter-cursor",d.textContent="|",d.setAttribute("aria-hidden","true"),t.appendChild(d)}function c(){S(t,e,i,()=>{o!==null&&setTimeout(()=>{L(t,i,()=>{setTimeout(c,400)})},o)})}setTimeout(c,n)}f.effect("typewriter",t=>{if(t.hasAttribute("data-effect-typewriter-init"))return;t.setAttribute("data-effect-typewriter-init","");let e=t.textContent.trim();if(t.setAttribute("data-typewriter-text",e),t.setAttribute("aria-label",e),!f.prefersReducedMotion())return t.textContent="",{activate(){M(t)},cleanup(){}}});var A="!<>-_\\/[]{}=+*^?#";function _(t){return t[Math.floor(Math.random()*t.length)]}function $(t){let e=t.getAttribute("data-scramble-text"),r=f.params(t),i=r.getTime("scramble-duration",1500),n=r.get("scramble-chars")||A,s=r.getTime("scramble-speed",30),o=e.length,a=0,u=Math.ceil(i/s);function c(){let d=a/u,l=Math.floor(d*o),h="";for(let p=0;p<o;p++)p<l?h+=e[p]:e[p]===" "?h+=" ":h+=_(n);t.textContent=h,a++,a<=u?setTimeout(c,s):t.textContent=e}c()}f.effect("scramble",t=>{if(t.hasAttribute("data-effect-scramble-init"))return;t.setAttribute("data-effect-scramble-init","");let e=t.textContent.trim();if(t.setAttribute("data-scramble-text",e),t.setAttribute("aria-label",e),f.prefersReducedMotion())return;let r=f.params(t).get("scramble-chars")||A;return t.textContent=e.replace(/\S/g,()=>_(r)),{activate(){$(t)},cleanup(){}}});function V(t){let e=t.textContent;t.setAttribute("aria-label",e),t.innerHTML="",e.split(/(\s+)/).forEach((i,n)=>{if(/^\s+$/.test(i)){t.appendChild(document.createTextNode(i));return}let s=document.createElement("span");s.className="vb-blur-chunk",s.textContent=i,s.style.setProperty("--i",String(Math.floor(n/2))),s.setAttribute("aria-hidden","true"),t.appendChild(s)})}function q(t){let e=t.textContent;t.setAttribute("aria-label",e);let r=e.split(/\s+/).filter(Boolean),i=[],n="",s=t.offsetWidth,o=document.createElement("span");o.style.visibility="hidden",o.style.position="absolute",o.style.font=getComputedStyle(t).font,document.body.appendChild(o),r.forEach(a=>{let u=n?n+" "+a:a;o.textContent=u,o.offsetWidth>s&&n?(i.push(n),n=a):n=u}),n&&i.push(n),document.body.removeChild(o),i.length===0&&i.push(e),t.innerHTML="",i.forEach((a,u)=>{let c=document.createElement("span");c.className="vb-blur-chunk",c.textContent=a,c.style.setProperty("--i",String(u)),c.setAttribute("aria-hidden","true"),t.appendChild(c),u<i.length-1&&t.appendChild(document.createTextNode(" "))})}f.effect("blur-reveal",t=>{if(t.hasAttribute("data-effect-blur-reveal-init")||(t.setAttribute("data-effect-blur-reveal-init",""),f.prefersReducedMotion()))return;let e=t.classList.contains("line")?"line":"word",r=f.params(t).get("blur-reveal-delay")||"80ms";return t.style.setProperty("--blur-delay",r),e==="line"?q(t):V(t),{activate(){t.setAttribute("data-effect-active","")},cleanup(){}}});f.effect("animate-image",t=>{if(t.hasAttribute("data-effect-animate-image-init"))return;t.setAttribute("data-effect-animate-image-init","");let e=t,r=document.createElement("div");if(r.className="animate-image-wrapper",!e.parentNode)return;e.parentNode.insertBefore(r,e),r.appendChild(e);let i=document.createElement("button");i.type="button",i.className="animate-image-toggle",i.setAttribute("aria-label","Pause animation"),r.appendChild(i);let n=e.src,s=null,o=!1;function a(){let l=document.createElement("canvas");l.width=e.naturalWidth||e.width,l.height=e.naturalHeight||e.height;let h=l.getContext("2d");if(h){h.drawImage(e,0,0);try{s=l.toDataURL("image/png")}catch{s=null}}}function u(){o||(o=!0,e.setAttribute("data-animate-image-paused",""),i.setAttribute("aria-label","Play animation"),i.classList.add("paused"),s&&(e.src=s))}function c(){o&&(o=!1,e.removeAttribute("data-animate-image-paused"),i.setAttribute("aria-label","Pause animation"),i.classList.remove("paused"),e.src=n)}i.addEventListener("click",()=>o?c():u()),e.complete&&e.naturalWidth?a():e.addEventListener("load",a,{once:!0});let d=window.matchMedia("(prefers-reduced-motion: reduce)");return(d.matches||document.documentElement.dataset.motionReduced!==void 0)&&(e.complete?(a(),u()):e.addEventListener("load",()=>{a(),u()},{once:!0})),d.addEventListener("change",l=>{l.matches&&u()}),e.hasAttribute("data-animate-image-paused")&&(e.complete?(a(),o=!1,u()):e.addEventListener("load",()=>{a(),o=!1,u()},{once:!0})),{cleanup(){r.parentNode&&(r.parentNode.insertBefore(e,r),r.remove())}}});function C(){return document.documentElement.lang||navigator.language||"en"}function F(t){return t===1?1:1-Math.pow(2,-10*t)}function B(t){let e=t.indexOf(".");return e===-1?0:t.length-e-1}function R(t,e){let r=t.getAttribute("data-locale")||C(),i=t.getAttribute("data-format-number");if(i!=null){let n={minimumFractionDigits:e,maximumFractionDigits:e};switch(i){case"currency":n.style="currency",n.currency=t.getAttribute("data-currency")||"USD";break;case"percent":n.style="percent";break;case"compact":n.notation="compact";break}try{return new Intl.NumberFormat(r,n)}catch{return null}}try{return new Intl.NumberFormat(r,{minimumFractionDigits:e,maximumFractionDigits:e})}catch{return null}}function O(t){let e=t.getAttribute("value");if(e==null)return;let r=Number(e);if(isNaN(r))return;let i=f.params(t),n=i.getNumber("ticker-start",0),s=i.getTime("ticker-duration",1e3),o=i.get("ticker-decimals")?parseInt(i.get("ticker-decimals"),10):B(e),a=R(t,o),u=r-n;if(u===0)return;let c=null;function d(l){c||(c=l);let h=l-c,p=Math.min(h/s,1),m=F(p),y=n+u*m;t.textContent=a?a.format(y):y.toFixed(o),p<1?requestAnimationFrame(d):(t.textContent=a?a.format(r):r.toFixed(o),t.hasAttribute("data-format-number")&&t.setAttribute("data-format-number-init",""))}requestAnimationFrame(d)}f.effect("ticker",t=>{if(!t.hasAttribute("data-effect-ticker-init")&&(t.setAttribute("data-effect-ticker-init",""),!f.prefersReducedMotion()))return{activate(){O(t)},cleanup(){}}});var X=window.matchMedia("(prefers-reduced-motion: reduce)");var w=new Map;function x(t,e,r={}){let i=r.priority??10,n={impl:e,bundle:r.bundle,contract:r.contract,priority:i},s=w.get(t);if(customElements.get(t)){if(!s||s.priority>=i){s&&s.priority===i&&s.impl!==e&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${r.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${r.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=i){s.priority===i&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}". Skipping "${r.bundle}" (first wins at equal priority).`);return}w.set(t,n),customElements.define(t,e)}var g=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0})))}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,r,i,n){e.addEventListener(r,i,n),this.#e.push(()=>e.removeEventListener(r,i,n))}setup(){}teardown(){}};var b=class extends g{static formAssociated=!0;#e;#s;#t;constructor(){super(),this.#e=this.attachInternals()}setup(){this.#a()}#a(){if(this.querySelector("fieldset"))return;let e=Number(this.getAttribute("value")||0);this.#s=e;let r=Number(this.getAttribute("max")||5),i=this.getAttribute("label")||"Rating",n=this.hasAttribute("allow-half"),s=this.hasAttribute("readonly"),o=this.getAttribute("icon"),u=`_sr_${this.getAttribute("name")||`star-rating-${crypto.randomUUID().slice(0,8)}`}`;s?this.#c(e,r,i,o):this.#o(e,r,i,u,n,o),this.#r(e),this.#i()}#o(e,r,i,n,s,o){let a=document.createElement("fieldset");a.setAttribute("data-rating",""),s&&a.setAttribute("data-rating-half",""),a.setAttribute("data-effect","rating");let u=document.createElement("legend");if(u.textContent=i,a.appendChild(u),s)for(let c=1;c<=r;c++){let d=c-.5,l=document.createElement("label");l.setAttribute("data-half","left");let h=document.createElement("input");h.type="radio",h.name=n,h.value=String(d),h.setAttribute("aria-label",`${d} ${d===1?"star":"stars"}`),e===d&&(h.checked=!0),l.appendChild(h),l.append(this.#n(o)),a.appendChild(l);let p=document.createElement("label");p.setAttribute("data-half","right");let m=document.createElement("input");m.type="radio",m.name=n,m.value=String(c),m.setAttribute("aria-label",`${c} ${c===1?"star":"stars"}`),e===c&&(m.checked=!0),p.appendChild(m),p.append(this.#n(o)),a.appendChild(p)}else for(let c=1;c<=r;c++){let d=document.createElement("label"),l=document.createElement("input");l.type="radio",l.name=n,l.value=String(c),l.setAttribute("aria-label",`${c} ${c===1?"star":"stars"}`),e===c&&(l.checked=!0),d.appendChild(l),d.append(this.#n(o)),a.appendChild(d)}this.appendChild(a),this.#t=a,a.addEventListener("rating:change",c=>{this.#r(c.detail.value),this.#i()}),a.addEventListener("change",c=>{let d=c.target;d.type==="radio"&&d.checked&&(this.#r(Number(d.value)),this.#i())})}#c(e,r,i,n){let s=document.createElement("fieldset");s.setAttribute("data-rating",""),s.setAttribute("data-rating-readonly",""),s.setAttribute("role","img"),s.setAttribute("aria-label",`${i}: ${e} out of ${r}`);let o=document.createElement("legend");o.textContent=i,s.appendChild(o);let a=Math.floor(e),u=e-a;for(let c=1;c<=r;c++){let d=document.createElement("span");if(d.setAttribute("aria-hidden","true"),c<=a)d.classList.add("star-filled");else if(c===a+1&&u>0){d.classList.add("star-partial"),d.style.setProperty("--_star-fill",`${u*100}%`);let l=document.createElement("span");l.classList.add("star-partial-fill"),l.append(this.#n(n)),d.appendChild(l)}else d.classList.add("star-empty");d.append(this.#n(n)),s.appendChild(d)}this.appendChild(s),this.#t=s}#n(e){if(e){let r=document.createElement("icon-wc");return r.setAttribute("name",e),r}return document.createTextNode("\u2605")}#r(e){let r=Number(e);r>0?this.#e.setFormValue(String(r)):this.#e.setFormValue(null)}#i(){this.hasAttribute("required")?this.#t?.querySelector('input[type="radio"]:checked')?this.#e.setValidity({}):this.#e.setValidity({valueMissing:!0},"Please select a rating",this.#t||this):this.#e.setValidity({})}formResetCallback(){if(this.#t){if(this.#t.querySelectorAll('input[type="radio"]').forEach(e=>{e.checked=!1}),this.#s>0){let e=this.#t.querySelector(`input[value="${this.#s}"]`);e&&(e.checked=!0)}this.#r(this.#s),this.#i()}}formStateRestoreCallback(e){if(!e||!this.#t)return;let r=this.#t.querySelector(`input[value="${e}"]`);r&&(r.checked=!0,this.#r(Number(e)),this.#i())}get value(){if(!this.#t)return Number(this.getAttribute("value")||0);let e=this.#t.querySelector('input[type="radio"]:checked');return e?Number(e.value):0}set value(e){if(!this.#t)return;this.#t.querySelectorAll('input[type="radio"]').forEach(i=>{i.checked=!1});let r=Number(e);if(r>0){let i=this.#t.querySelector(`input[value="${r}"]`);i&&(i.checked=!0)}this.#r(r),this.#i()}};x("star-rating",b);var P=1e3;function N(t){let e=document.createElement("div");e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),Object.assign(e.style,{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0,0,0,0)",whiteSpace:"nowrap",border:"0"}),e.textContent=t,document.body.appendChild(e),setTimeout(()=>e.remove(),P)}function T(t,e){t.dispatchEvent(new CustomEvent("rating:change",{bubbles:!0,detail:{value:e}}))}function D(t){let e=t.querySelector('input[type="radio"]:checked');return e?e.value:"0"}f.effect("rating",t=>{if(t.hasAttribute("data-effect-rating-init")||(t.setAttribute("data-effect-rating-init",""),t.hasAttribute("data-rating-readonly")))return;let e=D(t),r=!1;function i(o){let a=o.target.closest("label");if(!a)return;let u=a.querySelector('input[type="radio"]');u&&(r=u.checked&&u.value===e)}function n(o){if(!r)return;r=!1;let a=o.target.closest("label");if(!a)return;let u=a.querySelector('input[type="radio"]');u&&(u.checked=!1,e="0",T(t,0),N("Rating cleared"))}function s(o){o.target.type==="radio"&&(r||(e=o.target.value,T(t,Number(o.target.value)),N(`Rating: ${o.target.value} ${Number(o.target.value)===1?"star":"stars"}`)))}return t.addEventListener("mousedown",i),t.addEventListener("click",n),t.addEventListener("change",s),{cleanup(){t.removeEventListener("mousedown",i),t.removeEventListener("click",n),t.removeEventListener("change",s)}}});
+var S=window.matchMedia("(prefers-reduced-motion: reduce)");function y(){return S.matches||document.documentElement.hasAttribute("data-motion-reduced")}var E=0,T=new Map([["vb-fade-in","entrance"],["vb-slide-up","entrance"],["vb-pop","entrance"],["vb-slide-in-ltr","entrance"],["vb-slide-in-rtl","entrance"],["vb-fade-slide-up","entrance"],["vb-shadow-lift","entrance"],["vb-fade-out","exit"],["vb-collapse","exit"],["vb-slide-out-ltr","exit"],["vb-slide-out-rtl","exit"],["vb-shake","attention"],["vb-pulse","attention"],["vb-bounce","attention"],["vb-blink","attention"],["vb-neon-pulse","decoration"],["vb-3d-shift","decoration"],["vb-outline-glow-pulse","decoration"],["vb-rainbow","decoration"],["vb-gradient-flow","decoration"],["vb-shimmer","decoration"],["vb-shimmer-gradient","decoration"],["vb-glow","decoration"],["vb-float","decoration"]]),f={_effects:new Map,_triggers:new Map,_transitions:new Map,_instances:new WeakMap,_triggerCleanups:new WeakMap,_transitionCleanups:new WeakMap,_keyframePhase:T,_observer:null,_animationEndHandler:null,effect(t,e){this._effects.set(t,e),document.querySelectorAll("[data-effect]").forEach(n=>{(n.getAttribute("data-effect")||"").split(/\s+/).includes(t)&&this._initEffect(n,t)})},trigger(t,e){this._triggers.set(t,e)},transition(t,e){this._transitions.set(t,e)},uid(t){return t.id?t.id:(t._vbUid||(E++,t._vbUid=`vb-${E}`),t._vbUid)},theme(t,e){this._themes=this._themes||new Map,this._themes.set(t,e)},applyTheme(t,e=document.documentElement){let n=this._themes?.get(t);if(n)for(let[i,r]of Object.entries(n))e.style.setProperty(i,r)},swap(t){if(!document.startViewTransition){t(),queueMicrotask(()=>this._dispatchVtDone(document.body));return}let e=document.startViewTransition(t);return e.updateCallbackDone.then(()=>{this._dispatchVtDone(document.body)}).catch(()=>{}),e},_dispatchVtDone(t){t.querySelectorAll('[data-trigger~="vt"]').forEach(e=>{this.emit(e,"vb:vt-update-done",{})})},activate(t){this._activateEffects(t)},deactivate(t){t.hasAttribute("data-effect-active")&&(t.removeAttribute("data-effect-active"),this.emit(t,"vb:phase-change",{active:!1}))},onPhaseEnd(t,e,n){let i=r=>{r.detail?.phase===e&&n(r.detail)};return t.addEventListener("vb:effect-phase-end",i),()=>t.removeEventListener("vb:effect-phase-end",i)},registerKeyframe(t,e){this._keyframePhase.set(t,e)},observe(t=document){if(t.querySelectorAll("[data-effect]").forEach(n=>this._processElement(n)),t.querySelectorAll("[data-stagger]").forEach(n=>this._processStagger(n)),t.querySelectorAll("[data-transition]").forEach(n=>this._processTransition(n)),this._observer)return;this._observer=new MutationObserver(n=>{for(let i of n){if(i.type==="childList"){for(let r of i.addedNodes)r.nodeType===Node.ELEMENT_NODE&&this._processTree(r);for(let r of i.removedNodes)r.nodeType===Node.ELEMENT_NODE&&this._cleanupTree(r)}if(i.type==="attributes"){let r=i.target;i.attributeName==="data-effect"&&this._reconcileEffects(r),i.attributeName==="data-trigger"&&this._reconcileTrigger(r),i.attributeName==="data-stagger"&&this._processStagger(r),i.attributeName==="data-transition"&&this._processTransition(r)}}});let e=t===document?document.body:t;this._observer.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-effect","data-trigger","data-stagger","data-transition"]}),this._animationEndHandler||(this._animationEndHandler=n=>{let i=n.target;if(!(i instanceof Element)||!i.hasAttribute("data-effect"))return;let r=this._keyframePhase.get(n.animationName);r&&this.emit(i,"vb:effect-phase-end",{phase:r,animationName:n.animationName})},document.addEventListener("animationend",this._animationEndHandler))},disconnect(){this._observer&&(this._observer.disconnect(),this._observer=null),this._animationEndHandler&&(document.removeEventListener("animationend",this._animationEndHandler),this._animationEndHandler=null)},params(t){let e=getComputedStyle(t);return{get(n){return e.getPropertyValue(`--vb-${n}`).trim()},getNumber(n,i=0){let r=e.getPropertyValue(`--vb-${n}`).trim();return r?parseFloat(r):i},getTime(n,i=0){let r=e.getPropertyValue(`--vb-${n}`).trim();if(!r)return i;let a=parseFloat(r);return Number.isFinite(a)?/s\s*$/.test(r)&&!/ms\s*$/.test(r)?a*1e3:a:i},hasClass(n){return t.classList.contains(n)}}},emit(t,e,n={}){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:n}))},prefersReducedMotion:y,_processTree(t){t.hasAttribute?.("data-effect")&&this._processElement(t),t.hasAttribute?.("data-stagger")&&this._processStagger(t),t.hasAttribute?.("data-transition")&&this._processTransition(t),t.querySelectorAll?.("[data-effect]").forEach(e=>this._processElement(e)),t.querySelectorAll?.("[data-stagger]").forEach(e=>this._processStagger(e)),t.querySelectorAll?.("[data-transition]").forEach(e=>this._processTransition(e))},_cleanupTree(t){t.hasAttribute?.("data-effect")&&this._cleanupElement(t),t.hasAttribute?.("data-transition")&&this._cleanupTransition(t),t.querySelectorAll?.("[data-effect]").forEach(e=>this._cleanupElement(e)),t.querySelectorAll?.("[data-transition]").forEach(e=>this._cleanupTransition(e))},_processElement(t){if(t.hasAttribute("data-effect-processed"))return;t.setAttribute("data-effect-processed","");let e=t.getAttribute("data-effect")?.split(/\s+/).filter(Boolean)||[];for(let n of e)this._initEffect(t,n);this._wireTrigger(t,e)},_initEffect(t,e){let n=this._effects.get(e);if(!n)return;let i=this._instances.get(t);if(i?.has(e))return;y();let r=n(t);r&&(i||(i=new Map,this._instances.set(t,i)),typeof r=="function"?i.set(e,{cleanup:r}):i.set(e,r))},_wireTrigger(t,e){let n=t.getAttribute("data-trigger");if(!n){this._activateEffects(t);return}let i=n.split(/\s+/).filter(Boolean);for(let r of i){let a=r.indexOf(":"),s=a>-1?r.slice(0,a):r,o=a>-1?r.slice(a+1):null,u=this._triggers.get(s);if(!u)continue;let c=u(t,()=>this._activateEffects(t),o);if(c){let d=this._triggerCleanups.get(t);if(d){let l=d;this._triggerCleanups.set(t,()=>{l(),c()})}else this._triggerCleanups.set(t,c)}}},_activateEffects(t){t.setAttribute("data-effect-active",""),this.emit(t,"vb:phase-change",{active:!0});let e=this._instances.get(t);if(e)for(let[,n]of e)n.activate&&n.activate()},_cleanupElement(t){let e=this._instances.get(t);if(e){for(let[,i]of e)i.cleanup&&i.cleanup();this._instances.delete(t)}let n=this._triggerCleanups.get(t);n&&(n(),this._triggerCleanups.delete(t))},_reconcileEffects(t){let e=t.getAttribute("data-effect")?.split(/\s+/).filter(Boolean)||[],n=this._instances.get(t);if(n)for(let[i,r]of n)e.includes(i)||(r.cleanup&&r.cleanup(),n.delete(i));for(let i of e)n?.has(i)||this._initEffect(t,i);t.hasAttribute("data-effect-processed")||(t.setAttribute("data-effect-processed",""),this._wireTrigger(t,e))},_reconcileTrigger(t){let e=this._triggerCleanups.get(t);e&&(e(),this._triggerCleanups.delete(t));let n=t.getAttribute("data-effect")?.split(/\s+/).filter(Boolean)||[];this._wireTrigger(t,n)},_processStagger(t){let e=t.getAttribute("data-stagger")||"",n=t.children,i=n.length,r;if(e==="reverse")r=Array.from({length:i},(a,s)=>i-1-s);else if(e==="random"){let a=this._hashString(this.uid(t));r=Array.from({length:i},(o,u)=>u);let s=a;for(let o=i-1;o>0;o--){s^=s<<13,s^=s>>>17,s^=s<<5;let u=Math.abs(s)%(o+1);[r[o],r[u]]=[r[u],r[o]]}}else if(e==="grid"){let a=[];for(let s=0;s<i;s++){let o=getComputedStyle(n[s]),u=parseInt(o.gridRowStart,10),c=parseInt(o.gridColumnStart,10);a.push({i:s,dist:Number.isFinite(u)&&Number.isFinite(c)?u-1+(c-1):s})}a.sort((s,o)=>s.dist-o.dist),r=new Array(i),a.forEach((s,o)=>{r[s.i]=o})}else r=Array.from({length:i},(a,s)=>s);for(let a=0;a<i;a++)n[a].style.setProperty("--vb-stagger-index",String(r[a]))},_hashString(t){let e=5381;for(let n=0;n<t.length;n++)e=(e<<5)+e^t.charCodeAt(n);return e|0},_processTransition(t){if(t.hasAttribute("data-transition-processed"))return;t.setAttribute("data-transition-processed","");let e=t.getAttribute("data-transition");if(!e)return;let n=e.indexOf(":"),i=n>-1?e.slice(0,n):e,r=n>-1?e.slice(n+1):null,a=this._transitions.get(i);if(a){let s=a(t,r);s&&this._transitionCleanups.set(t,s)}else t.style.viewTransitionName=`${e}-${this.uid(t)}`},_cleanupTransition(t){let e=this._transitionCleanups.get(t);e&&(e(),this._transitionCleanups.delete(t)),t.style.viewTransitionName=""}};typeof window<"u"&&(window.VB=f);f.effect("glitch",t=>{t.hasAttribute("data-effect-glitch-init")||(t.setAttribute("data-effect-glitch-init",""),t.setAttribute("data-glitch-text",t.textContent))});function L(t,e,n,i){let r=0;function a(){r<=e.length?(t.firstChild.textContent=e.slice(0,r),r++,setTimeout(a,n)):i&&i()}a()}function M(t,e,n){let i=t.firstChild.textContent,r=i.length;function a(){r>=0?(t.firstChild.textContent=i.slice(0,r),r--,setTimeout(a,e/2)):n&&n()}a()}function $(t){let e=t.getAttribute("data-typewriter-text"),n=f.params(t),i=n.getTime("typewriter-speed",50),r=n.getTime("typewriter-delay",0),s=t.classList.contains("loop")?2e3:null;t.textContent="";let o=document.createTextNode("");if(t.appendChild(o),!t.classList.contains("no-cursor")){let d=document.createElement("span");d.className="vb-typewriter-cursor",d.textContent="|",d.setAttribute("aria-hidden","true"),t.appendChild(d)}function c(){L(t,e,i,()=>{s!==null&&setTimeout(()=>{M(t,i,()=>{setTimeout(c,400)})},s)})}setTimeout(c,r)}f.effect("typewriter",t=>{if(t.hasAttribute("data-effect-typewriter-init"))return;t.setAttribute("data-effect-typewriter-init","");let e=t.textContent.trim();if(t.setAttribute("data-typewriter-text",e),t.setAttribute("aria-label",e),!f.prefersReducedMotion())return t.textContent="",{activate(){$(t)},cleanup(){}}});var A="!<>-_\\/[]{}=+*^?#";function _(t){return t[Math.floor(Math.random()*t.length)]}function V(t){let e=t.getAttribute("data-scramble-text"),n=f.params(t),i=n.getTime("scramble-duration",1500),r=n.get("scramble-chars")||A,a=n.getTime("scramble-speed",30),s=e.length,o=0,u=Math.ceil(i/a);function c(){let d=o/u,l=Math.floor(d*s),h="";for(let p=0;p<s;p++)p<l?h+=e[p]:e[p]===" "?h+=" ":h+=_(r);t.textContent=h,o++,o<=u?setTimeout(c,a):t.textContent=e}c()}f.effect("scramble",t=>{if(t.hasAttribute("data-effect-scramble-init"))return;t.setAttribute("data-effect-scramble-init","");let e=t.textContent.trim();if(t.setAttribute("data-scramble-text",e),t.setAttribute("aria-label",e),f.prefersReducedMotion())return;let n=f.params(t).get("scramble-chars")||A;return t.textContent=e.replace(/\S/g,()=>_(n)),{activate(){V(t)},cleanup(){}}});function q(t){let e=t.textContent;t.setAttribute("aria-label",e),t.innerHTML="",e.split(/(\s+)/).forEach((i,r)=>{if(/^\s+$/.test(i)){t.appendChild(document.createTextNode(i));return}let a=document.createElement("span");a.className="vb-blur-chunk",a.textContent=i,a.style.setProperty("--i",String(Math.floor(r/2))),a.setAttribute("aria-hidden","true"),t.appendChild(a)})}function F(t){let e=t.textContent;t.setAttribute("aria-label",e);let n=e.split(/\s+/).filter(Boolean),i=[],r="",a=t.offsetWidth,s=document.createElement("span");s.style.visibility="hidden",s.style.position="absolute",s.style.font=getComputedStyle(t).font,document.body.appendChild(s),n.forEach(o=>{let u=r?r+" "+o:o;s.textContent=u,s.offsetWidth>a&&r?(i.push(r),r=o):r=u}),r&&i.push(r),document.body.removeChild(s),i.length===0&&i.push(e),t.innerHTML="",i.forEach((o,u)=>{let c=document.createElement("span");c.className="vb-blur-chunk",c.textContent=o,c.style.setProperty("--i",String(u)),c.setAttribute("aria-hidden","true"),t.appendChild(c),u<i.length-1&&t.appendChild(document.createTextNode(" "))})}f.effect("blur-reveal",t=>{if(t.hasAttribute("data-effect-blur-reveal-init")||(t.setAttribute("data-effect-blur-reveal-init",""),f.prefersReducedMotion()))return;let e=t.classList.contains("line")?"line":"word",n=f.params(t).get("blur-reveal-delay")||"80ms";return t.style.setProperty("--blur-delay",n),e==="line"?F(t):q(t),{activate(){t.setAttribute("data-effect-active","")},cleanup(){}}});f.effect("animate-image",t=>{if(t.hasAttribute("data-effect-animate-image-init"))return;t.setAttribute("data-effect-animate-image-init","");let e=t,n=document.createElement("div");if(n.className="animate-image-wrapper",!e.parentNode)return;e.parentNode.insertBefore(n,e),n.appendChild(e);let i=document.createElement("button");i.type="button",i.className="animate-image-toggle",i.setAttribute("aria-label","Pause animation"),n.appendChild(i);let r=e.src,a=null,s=!1;function o(){let l=document.createElement("canvas");l.width=e.naturalWidth||e.width,l.height=e.naturalHeight||e.height;let h=l.getContext("2d");if(h){h.drawImage(e,0,0);try{a=l.toDataURL("image/png")}catch{a=null}}}function u(){s||(s=!0,e.setAttribute("data-animate-image-paused",""),i.setAttribute("aria-label","Play animation"),i.classList.add("paused"),a&&(e.src=a))}function c(){s&&(s=!1,e.removeAttribute("data-animate-image-paused"),i.setAttribute("aria-label","Pause animation"),i.classList.remove("paused"),e.src=r)}i.addEventListener("click",()=>s?c():u()),e.complete&&e.naturalWidth?o():e.addEventListener("load",o,{once:!0});let d=window.matchMedia("(prefers-reduced-motion: reduce)");return(d.matches||document.documentElement.dataset.motionReduced!==void 0)&&(e.complete?(o(),u()):e.addEventListener("load",()=>{o(),u()},{once:!0})),d.addEventListener("change",l=>{l.matches&&u()}),e.hasAttribute("data-animate-image-paused")&&(e.complete?(o(),s=!1,u()):e.addEventListener("load",()=>{o(),s=!1,u()},{once:!0})),{cleanup(){n.parentNode&&(n.parentNode.insertBefore(e,n),n.remove())}}});function C(){return document.documentElement.lang||navigator.language||"en"}function B(t){return t===1?1:1-Math.pow(2,-10*t)}function P(t){let e=t.indexOf(".");return e===-1?0:t.length-e-1}function R(t,e){let n=t.getAttribute("data-locale")||C(),i=t.getAttribute("data-format-number");if(i!=null){let r={minimumFractionDigits:e,maximumFractionDigits:e};switch(i){case"currency":r.style="currency",r.currency=t.getAttribute("data-currency")||"USD";break;case"percent":r.style="percent";break;case"compact":r.notation="compact";break}try{return new Intl.NumberFormat(n,r)}catch{return null}}try{return new Intl.NumberFormat(n,{minimumFractionDigits:e,maximumFractionDigits:e})}catch{return null}}function D(t){let e=t.getAttribute("value");if(e==null)return;let n=Number(e);if(isNaN(n))return;let i=f.params(t),r=i.getNumber("ticker-start",0),a=i.getTime("ticker-duration",1e3),s=i.get("ticker-decimals")?parseInt(i.get("ticker-decimals"),10):P(e),o=R(t,s),u=n-r;if(u===0)return;let c=null;function d(l){c||(c=l);let h=l-c,p=Math.min(h/a,1),m=B(p),v=r+u*m;t.textContent=o?o.format(v):v.toFixed(s),p<1?requestAnimationFrame(d):(t.textContent=o?o.format(n):n.toFixed(s),t.hasAttribute("data-format-number")&&t.setAttribute("data-format-number-init",""))}requestAnimationFrame(d)}f.effect("ticker",t=>{if(!t.hasAttribute("data-effect-ticker-init")&&(t.setAttribute("data-effect-ticker-init",""),!f.prefersReducedMotion()))return{activate(){D(t)},cleanup(){}}});var X=window.matchMedia("(prefers-reduced-motion: reduce)");var w=new Map;function x(t,e,n={}){let i=n.priority??10,r={impl:e,bundle:n.bundle,contract:n.contract,priority:i},a=w.get(t);if(customElements.get(t)){if(!a||a.priority>=i){a&&a.priority===i&&a.impl!==e&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${a.bundle}" (priority ${a.priority}). Skipping "${n.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${a.bundle}" cannot be replaced (customElements.define is permanent). "${n.bundle}" has higher priority but arrived late.`);return}if(a&&a.priority>=i){a.priority===i&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${a.bundle}". Skipping "${n.bundle}" (first wins at equal priority).`);return}w.set(t,r),customElements.define(t,e)}var b=class extends HTMLElement{#e=[];#n;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,i,r){e.addEventListener(n,i,r),this.#e.push(()=>e.removeEventListener(n,i,r))}setup(){}teardown(){}setState(e,n){this.#n||(this.#n=this.attachInternals());let i=this.#n.states;try{n?i.add(e):i.delete(e)}catch{let r=`--${e}`;n?i.add(r):i.delete(r)}}_adoptInternals(e){this.#n||(this.#n=e)}};var g=class extends b{static formAssociated=!0;#e;#n;#t;constructor(){super(),this.#e=this.attachInternals(),this._adoptInternals(this.#e)}setup(){this.#s()}#s(){if(this.querySelector("fieldset"))return;let e=Number(this.getAttribute("value")||0);this.#n=e;let n=Number(this.getAttribute("max")||5),i=this.getAttribute("label")||"Rating",r=this.hasAttribute("allow-half"),a=this.hasAttribute("readonly"),s=this.getAttribute("icon"),u=`_sr_${this.getAttribute("name")||`star-rating-${crypto.randomUUID().slice(0,8)}`}`;a?this.#c(e,n,i,s):this.#o(e,n,i,u,r,s),this.#i(e),this.#r()}#o(e,n,i,r,a,s){let o=document.createElement("fieldset");o.setAttribute("data-rating",""),a&&o.setAttribute("data-rating-half",""),o.setAttribute("data-effect","rating");let u=document.createElement("legend");if(u.textContent=i,o.appendChild(u),a)for(let c=1;c<=n;c++){let d=c-.5,l=document.createElement("label");l.setAttribute("data-half","left");let h=document.createElement("input");h.type="radio",h.name=r,h.value=String(d),h.setAttribute("aria-label",`${d} ${d===1?"star":"stars"}`),e===d&&(h.checked=!0),l.appendChild(h),l.append(this.#a(s)),o.appendChild(l);let p=document.createElement("label");p.setAttribute("data-half","right");let m=document.createElement("input");m.type="radio",m.name=r,m.value=String(c),m.setAttribute("aria-label",`${c} ${c===1?"star":"stars"}`),e===c&&(m.checked=!0),p.appendChild(m),p.append(this.#a(s)),o.appendChild(p)}else for(let c=1;c<=n;c++){let d=document.createElement("label"),l=document.createElement("input");l.type="radio",l.name=r,l.value=String(c),l.setAttribute("aria-label",`${c} ${c===1?"star":"stars"}`),e===c&&(l.checked=!0),d.appendChild(l),d.append(this.#a(s)),o.appendChild(d)}this.appendChild(o),this.#t=o,o.addEventListener("rating:change",c=>{this.#i(c.detail.value),this.#r()}),o.addEventListener("change",c=>{let d=c.target;d.type==="radio"&&d.checked&&(this.#i(Number(d.value)),this.#r())})}#c(e,n,i,r){let a=document.createElement("fieldset");a.setAttribute("data-rating",""),a.setAttribute("data-rating-readonly",""),a.setAttribute("role","img"),a.setAttribute("aria-label",`${i}: ${e} out of ${n}`);let s=document.createElement("legend");s.textContent=i,a.appendChild(s);let o=Math.floor(e),u=e-o;for(let c=1;c<=n;c++){let d=document.createElement("span");if(d.setAttribute("aria-hidden","true"),c<=o)d.classList.add("star-filled");else if(c===o+1&&u>0){d.classList.add("star-partial"),d.style.setProperty("--_star-fill",`${u*100}%`);let l=document.createElement("span");l.classList.add("star-partial-fill"),l.append(this.#a(r)),d.appendChild(l)}else d.classList.add("star-empty");d.append(this.#a(r)),a.appendChild(d)}this.appendChild(a),this.#t=a}#a(e){if(e){let n=document.createElement("icon-wc");return n.setAttribute("name",e),n}return document.createTextNode("\u2605")}#i(e){let n=Number(e);n>0?this.#e.setFormValue(String(n)):this.#e.setFormValue(null)}#r(){this.hasAttribute("required")?this.#t?.querySelector('input[type="radio"]:checked')?this.#e.setValidity({}):this.#e.setValidity({valueMissing:!0},"Please select a rating",this.#t||this):this.#e.setValidity({})}formResetCallback(){if(this.#t){if(this.#t.querySelectorAll('input[type="radio"]').forEach(e=>{e.checked=!1}),this.#n>0){let e=this.#t.querySelector(`input[value="${this.#n}"]`);e&&(e.checked=!0)}this.#i(this.#n),this.#r()}}formStateRestoreCallback(e){if(!e||!this.#t)return;let n=this.#t.querySelector(`input[value="${e}"]`);n&&(n.checked=!0,this.#i(Number(e)),this.#r())}get value(){if(!this.#t)return Number(this.getAttribute("value")||0);let e=this.#t.querySelector('input[type="radio"]:checked');return e?Number(e.value):0}set value(e){if(!this.#t)return;let n=Number(e),i=this.#t.querySelector('input[type="radio"]:checked');if((i?Number(i.value):0)!==n){if(this.#t.querySelectorAll('input[type="radio"]').forEach(a=>{a.checked=!1}),n>0){let a=this.#t.querySelector(`input[value="${n}"]`);a&&(a.checked=!0)}this.#i(n),this.#r()}}};x("star-rating",g);var O=1e3;function N(t){let e=document.createElement("div");e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),Object.assign(e.style,{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0,0,0,0)",whiteSpace:"nowrap",border:"0"}),e.textContent=t,document.body.appendChild(e),setTimeout(()=>e.remove(),O)}function k(t,e){t.dispatchEvent(new CustomEvent("rating:change",{bubbles:!0,detail:{value:e}}))}function I(t){let e=t.querySelector('input[type="radio"]:checked');return e?e.value:"0"}f.effect("rating",t=>{if(t.hasAttribute("data-effect-rating-init")||(t.setAttribute("data-effect-rating-init",""),t.hasAttribute("data-rating-readonly")))return;let e=I(t),n=!1;function i(s){let o=s.target.closest("label");if(!o)return;let u=o.querySelector('input[type="radio"]');u&&(n=u.checked&&u.value===e)}function r(s){if(!n)return;n=!1;let o=s.target.closest("label");if(!o)return;let u=o.querySelector('input[type="radio"]');u&&(u.checked=!1,e="0",k(t,0),N("Rating cleared"))}function a(s){s.target.type==="radio"&&(n||(e=s.target.value,k(t,Number(s.target.value)),N(`Rating: ${s.target.value} ${Number(s.target.value)===1?"star":"stars"}`)))}return t.addEventListener("mousedown",i),t.addEventListener("click",r),t.addEventListener("change",a),{cleanup(){t.removeEventListener("mousedown",i),t.removeEventListener("click",r),t.removeEventListener("change",a)}}});
 //# sourceMappingURL=effects.full.js.map

package/dist/cdn/packs/icons.effects.js

@@ -1,2 +1,2 @@
-var i=["pulse","beat","bounce","wiggle","breathe"],d=[35,30,20,5,10];function c(e,r="pulse"){!e||!i.includes(r)||(delete e.dataset.vbAttract,e.offsetWidth,e.dataset.vbAttract=r,e.addEventListener("animationend",()=>{r!=="breathe"&&delete e.dataset.vbAttract},{once:!0}))}function l(e){let r=v(i,d);c(e,r)}function u(e=45e3){let r,n=()=>{clearTimeout(r),r=setTimeout(()=>{let t=[...document.querySelectorAll(".vb-icon:not([data-vb-attract])")];if(t.length){let o=t[Math.floor(Math.random()*t.length)];l(o)}},e)},a=["mousemove","keydown","scroll","touchstart"];return a.forEach(t=>document.addEventListener(t,n,{passive:!0})),n(),{stop(){clearTimeout(r),a.forEach(t=>document.removeEventListener(t,n))}}}function s(){let e=document.querySelectorAll('[data-vb-attract-on="visible"]');if(e.length){let n=new IntersectionObserver(a=>{for(let t of a)if(t.isIntersecting){let o=t.target.dataset.vbAttract||"pulse";c(t.target,o),n.unobserve(t.target)}},{threshold:.5});e.forEach(a=>n.observe(a))}document.querySelectorAll('[data-vb-attract-on="hover"]').forEach(n=>{n.addEventListener("mouseenter",()=>{let a=n.dataset.vbAttract||"pulse";c(n,a)})});let r=document.querySelectorAll('[data-vb-attract-on="error"]');if(r.length){let n=new MutationObserver(a=>{for(let t of a)if(t.attributeName==="aria-invalid"&&t.target.getAttribute("aria-invalid")==="true"){let o=t.target.parentElement?.querySelector('[data-vb-attract-on="error"]');o&&c(o,o.dataset.vbAttract||"wiggle")}});r.forEach(a=>{let t=a.closest("label, fieldset, [data-field]")?.querySelector("input, select, textarea");t&&n.observe(t,{attributes:!0,attributeFilter:["aria-invalid"]})})}}function v(e,r){let n=r.reduce((t,o)=>t+o,0),a=Math.random()*n;for(let t=0;t<e.length;t++)if(a-=r[t],a<=0)return e[t];return e[e.length-1]}document.body?.hasAttribute("data-vb-whimsy")&&u();document.readyState==="loading"?document.addEventListener("DOMContentLoaded",s):s();export{c as attract,l as attractRandom,u as enableWhimsy};
+var d=["pulse","beat","bounce","wiggle","breathe"],l=[35,30,20,5,10];function s(e,a="pulse"){!e||!d.includes(a)||(delete e.dataset.vbAttract,e.offsetWidth,e.dataset.vbAttract=a,e.addEventListener("animationend",()=>{a!=="breathe"&&delete e.dataset.vbAttract},{once:!0}))}function u(e){let a=b(d,l);s(e,a)}function v(e=45e3){let a,n=()=>{clearTimeout(a),a=setTimeout(()=>{let t=[...document.querySelectorAll(".vb-icon:not([data-vb-attract])")];if(t.length){let o=t[Math.floor(Math.random()*t.length)];u(o)}},e)},r=["mousemove","keydown","scroll","touchstart"];return r.forEach(t=>document.addEventListener(t,n,{passive:!0})),n(),{stop(){clearTimeout(a),r.forEach(t=>document.removeEventListener(t,n))}}}function i(){let e=document.querySelectorAll('[data-vb-attract-on="visible"]');if(e.length){let n=new IntersectionObserver(r=>{for(let t of r)if(t.isIntersecting){let o=t.target,c=o.dataset.vbAttract||"pulse";s(o,c),n.unobserve(o)}},{threshold:.5});e.forEach(r=>n.observe(r))}document.querySelectorAll('[data-vb-attract-on="hover"]').forEach(n=>{let r=n;r.addEventListener("mouseenter",()=>{let t=r.dataset.vbAttract||"pulse";s(r,t)})});let a=document.querySelectorAll('[data-vb-attract-on="error"]');if(a.length){let n=new MutationObserver(r=>{for(let t of r){let o=t.target;if(t.attributeName==="aria-invalid"&&o.getAttribute("aria-invalid")==="true"){let c=o.parentElement?.querySelector('[data-vb-attract-on="error"]');c&&s(c,c.dataset.vbAttract||"wiggle")}}});a.forEach(r=>{let t=r.closest("label, fieldset, [data-field]")?.querySelector("input, select, textarea");t&&n.observe(t,{attributes:!0,attributeFilter:["aria-invalid"]})})}}function b(e,a){let n=a.reduce((t,o)=>t+o,0),r=Math.random()*n;for(let t=0;t<e.length;t++)if(r-=a[t],r<=0)return e[t];return e[e.length-1]}document.body?.hasAttribute("data-vb-whimsy")&&v();document.readyState==="loading"?document.addEventListener("DOMContentLoaded",i):i();export{s as attract,u as attractRandom,v as enableWhimsy};
 //# sourceMappingURL=icons.effects.js.map