@profpowell/vb-design-system 0.1.0

package/dist/vb-design-system.min.js

@@ -0,0 +1,513 @@
+var ks=window.matchMedia("(prefers-reduced-motion: reduce)");var jt=new Map;function f(r,t,e={}){let s=e.priority??10,o={impl:t,bundle:e.bundle,contract:e.contract,priority:s},n=jt.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}jt.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 X="[data-copy], [data-copy-target], [data-paste-target]",ue="Copied to clipboard",me="Pasted from clipboard",K=new WeakMap;async function w(r,t={}){if(r==null||r==="")return!1;let{button:e,announceMessage:s=ue,duration:o=1500}=t;try{await navigator.clipboard.writeText(r)}catch{return!1}return Ot({button:e,duration:o,announceMessage:s,eventDetail:{text:r}}),!0}function Ot({button:r,duration:t,announceMessage:e,eventDetail:s,state:o="copied",eventName:n="copy"}){if(r){r.dataset.state=o;let i=K.get(r);i&&clearTimeout(i),K.set(r,setTimeout(()=>{delete r.dataset.state,K.delete(r)},t)),r.dispatchEvent(new CustomEvent(n,{bubbles:!0,detail:s}))}ge(e,r??document.body)}async function he(r,t={}){let{button:e,announceMessage:s=me,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}))),Ot({button:e,duration:o,announceMessage:s,eventDetail:{text:n},state:"pasted",eventName:"paste"}),n}function Bt(r=document){r.querySelectorAll(X).forEach(Y)}function Y(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;he(e,{button:r});return}let t=fe(r);t&&w(t,{button:r})}))}function fe(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 ge(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",()=>Bt()):Bt();var ye=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(X)&&Y(s),s.querySelectorAll(X).forEach(o=>Y(o))}});ye.observe(document.documentElement,{childList:!0,subtree:!0});var Q=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.#l(t);this.#t=l.slice();let c=e?e.split(",").map(v=>v.trim()):[],u={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(${u}px,1fr));gap:var(--size-xs,0.5rem)`:s==="list"&&(d="display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)");let y=l.map((v,b)=>{let h=c[b]||"",C=this.#c(v),A=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:${u}px`,L=s==="list"?36:u,z=`background:${v};color:${C};width:${L}px;height:${L}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 S=this.#a(v);return`<div class="swatch-wrap" role="listitem" style="${A}">
+          <label class="color-box color-box-edit" style="${z};cursor:pointer" data-index="${b}" title="Click to edit${h?": "+h:""}" aria-label="${h||"Color "+(b+1)}: ${v}. Click to edit.">
+            <input type="color" class="color-input" value="${S}" data-index="${b}" style="position:absolute;inset:0;opacity:0;cursor:pointer;inline-size:100%;block-size:100%" aria-label="${h||"Color "+(b+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.#n(v)}</span>
+          </label>
+          ${i&&h?`<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">${h}</span>`:""}
+        </div>`}return`<div class="swatch-wrap" role="listitem" style="${A}">
+        <button type="button" class="color-box" data-index="${b}"
+          style="${z}"
+          title="Click to copy${h?": "+h:""}"
+          aria-label="${h||"Color "+(b+1)}: ${v}">
+          <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.#n(v)}</span>
+        </button>
+        ${i&&h?`<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">${h}</span>`:""}
+      </div>`}).join("");this.innerHTML=`<div class="palette ${s}" role="list" aria-label="Color palette" style="${d}">${y}</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]||"";w(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.#c(o);let i=n.querySelector(".color-value");i&&(i.textContent=this.#n(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.#i(i)||i;t[o]=a,this.#t[o]=a;let l=s.querySelector(".color-value");l&&(l.textContent=a),s.style.color=this.#c(a);let c=e[o]||"";s.title=`Click to copy${c?": "+c:""} (${a})`,s.setAttribute("aria-label",`${c||"Color "+(o+1)}: ${a}`)})}#i(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.#i(s)||"#000000"}#n(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}#l(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}#c(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"}};f("color-palette",Q);function be(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 ve(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 j(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 P(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 Ft(r){let{r:t,g:e,b:s}=j(r);return ve(t,e,s)}function k(r,t,e){let{r:s,g:o,b:n}=be(r,t,e);return P(s,o,n)}var T=r=>(r%360+360)%360;function xe(r,t,e){return{colors:[k(r,t,e),k(T(r+180),t,e)],names:["Base","Complement"]}}function $e(r,t,e){return{colors:[k(T(r-30),t,e),k(r,t,e),k(T(r+30),t,e)],names:["Analog A","Base","Analog B"]}}function we(r,t,e){return{colors:[k(r,t,e),k(T(r+120),t,e),k(T(r+240),t,e)],names:["Base","Triad A","Triad B"]}}function ke(r,t,e){return{colors:[k(r,t,e),k(T(r+150),t,e),k(T(r+210),t,e)],names:["Base","Split A","Split B"]}}function ze(r,t,e){return{colors:[k(r,t,e),k(T(r+90),t,e),k(T(r+180),t,e),k(T(r+270),t,e)],names:["Base","Tetrad A","Tetrad B","Tetrad C"]}}var Se=[{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 Ce(r,t,e){let s=[],o=[];for(let n of Se){let i=n.l>85||n.l<20?Math.max(t*.6,5):t;s.push(k(r,Math.round(i),n.l)),o.push(n.label)}return{colors:s,names:o}}var It={complementary:xe,analogous:$e,triadic:we,"split-complementary":ke,tetradic:ze,monochromatic:Ce};function _(r,t){let{h:e,s,l:o}=Ft(r);return(It[t]||It.complementary)(e,s,o)}var Z=class extends m{static observedAttributes=["seed","harmony","include-seed","show-export","layout","size","show-values","show-names"];#t=null;#e="";#s=[];#r=[];setup(){this.#t=this.querySelector("color-picker")||this.querySelector('input[type="color"]'),this.#e=this.#o(),this.#e&&(this.#i(),this.#n(),this.#d())}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&(this.#e=this.#o(),this.#e&&this.#i())}#o(){if(this.#t){let t=this.#t;if(t.tagName==="COLOR-PICKER"){let e=t.value;return e&&e!=="#000000"?e:t.querySelector('input[type="color"]')?.value||e||""}return t.value||""}return this.getAttribute("seed")||""}#i(){let t=this.getAttribute("harmony")||"complementary",e=this.getAttribute("layout")||"inline",s=this.getAttribute("size")||"md",o=this.hasAttribute("show-values"),n=this.hasAttribute("show-names"),i=this.hasAttribute("show-export"),{colors:a,names:l}=_(this.#e,t);this.#s=a,this.#r=l;let p={sm:48,md:80,lg:120}[s]||80,u="display:flex;flex-wrap:wrap;gap:var(--size-xs,0.5rem)";e==="grid"?u=`display:grid;grid-template-columns:repeat(auto-fill,minmax(${p}px,1fr));gap:var(--size-xs,0.5rem)`:e==="list"&&(u="display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)");let d=a.map((h,C)=>{let A=l[C]||"",L=this.#c(h),z=e==="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`,S=e==="list"?36:p,H=h.length>12?h.slice(0,12)+"\u2026":h;return`<div class="swatch-wrap" role="listitem" style="${z}">
+        <button type="button" class="color-box" data-index="${C}"
+          style="background:${h};color:${L};width:${S}px;height:${S}px;border:1px solid oklch(0% 0 0/0.15);border-radius:var(--radius-s,0.25rem);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:var(--font-mono,monospace);position:relative;overflow:hidden;flex-shrink:0"
+          title="Click to copy${A?": "+A:""}"
+          aria-label="${A||"Color "+(C+1)}: ${h}">
+          <span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${o?"1":"0"};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease">${H}</span>
+        </button>
+        ${n&&A?`<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">${A}</span>`:""}
+      </div>`}).join(""),y="";i&&(y=`<div class="pg-export" role="toolbar" aria-label="Export palette" style="display:flex;gap:0.5rem;margin-block-start:var(--size-xs,0.5rem)">
+        <button type="button" class="pg-copy-hex" style="padding:0.25rem 0.75rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#333);cursor:pointer;font-size:var(--font-size-xs,0.75rem);font-family:inherit">Copy Hex</button>
+        <button type="button" class="pg-copy-css" style="padding:0.25rem 0.75rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#333);cursor:pointer;font-size:var(--font-size-xs,0.75rem);font-family:inherit">Copy CSS</button>
+      </div>`);let v=this.#t;for(let h of[...this.children])h!==v&&(h.classList?.contains("pg-seed-label")||h.remove());if(v&&!this.querySelector(".pg-seed-label")){let h=document.createElement("span");h.className="pg-seed-label",h.textContent="Seed Color",v.before(h)}let b=document.createElement("div");if(b.className=`palette ${e}`,b.setAttribute("role","list"),b.setAttribute("aria-label","Color palette"),b.style.cssText=u,b.innerHTML=d,v?v.after(b):this.prepend(b),y){let h=document.createElement("div");h.innerHTML=y,h.firstElementChild&&this.append(h.firstElementChild)}this.#a(b,a,l,o),i&&this.#l()}#a(t,e,s,o){t.querySelectorAll(".color-box").forEach(n=>{let i=n;o||(i.addEventListener("pointerenter",()=>{let a=i.querySelector(".color-value");a&&(a.style.opacity="1")}),i.addEventListener("pointerleave",()=>{let a=i.querySelector(".color-value");a&&(a.style.opacity="0")})),i.addEventListener("click",()=>{let a=Number(i.dataset.index),l=e[a],c=s[a]||"";w(l,{button:i,announceMessage:"Color copied"}),this.dispatchEvent(new CustomEvent("color-palette:select",{bubbles:!0,detail:{color:l,name:c,index:a}})),i.style.outline="3px solid currentColor",i.style.outlineOffset="2px",setTimeout(()=>{i.style.outline="",i.style.outlineOffset=""},600)})})}#n(){let t=this.#t;t&&(t.tagName==="COLOR-PICKER"?this.listen(t,"color-picker:change",e=>{this.#e=e.detail.hex,this.#i(),this.#d()}):this.listen(t,"input",()=>{this.#e=t.value,this.#i(),this.#d()}))}#l(){let t=this.querySelector(".pg-copy-hex"),e=this.querySelector(".pg-copy-css");t&&t.addEventListener("click",()=>{w(this.#s.join(", "),{button:t,announceMessage:"Hex values copied"})}),e&&e.addEventListener("click",()=>{let s=this.getAttribute("harmony")||"complementary",o=this.#p(s);w(o,{button:e,announceMessage:"CSS variables copied"})})}#c(t){if(t.startsWith("#")){let{r:e,g:s,b:o}=j(t);return .2126*(e/255)+.7152*(s/255)+.0722*(o/255)>.4?"#000":"#fff"}return"#000"}#p(t){return t==="monochromatic"?this.#s.map((e,s)=>`--color-seed-${this.#r[s]||s+1}: ${e};`).join(`
+`):this.#s.map((e,s)=>`--palette-${this.#r[s]?this.#r[s].toLowerCase().replace(/\s+/g,"-"):`${s+1}`}: ${e};`).join(`
+`)}#d(){let t=this.getAttribute("harmony")||"complementary";this.dispatchEvent(new CustomEvent("palette-generator:generate",{bubbles:!0,detail:{colors:[...this.#s],harmony:t,seed:this.#e}}))}};f("palette-generator",Z);var Ae=["system-ui","Georgia","Inter, sans-serif",'"JetBrains Mono", monospace',"Verdana","Cambria","ui-serif"],tt=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(d=>d.trim()),c="",u=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">
+            ${Ae.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("")}
+          </span>`:`<span class="specimen-label">${e}</span>`;if(c+=`<div class="specimen-header" style="font-family:${t}">
+      ${u}
+      <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>`),n){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>
+          <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 y of d)c+=`<div class="scale-step" style="font-family:${t};font-size:${y.rem}rem">
+          <span class="scale-label">${y.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}}};f("type-specimen",tt);var et=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>
+        ${p}
+      </div>`}a+="</div>",this.innerHTML=a,requestAnimationFrame(()=>{if(n){let l=getComputedStyle(this);this.querySelectorAll(".scale-edit").forEach(c=>{let p=c,u=p.getAttribute("data-token"),d=l.getPropertyValue(`${e}${u}`).trim();p.value=d||""})}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}}};f("spacing-specimen",et);var Rt={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"}},Dt={shadow:Ee,radius:Te,border:Me,color:Le,size:qe,icon:Ne},st=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=Rt[t]||Rt.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(u=>u.trim()),l=Dt[t]||Dt.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",u=t==="size"?c.getBoundingClientRect().width:null;i.textContent=u!=null?`${Math.round(u*100)/100}px`:l||"\u2014"}}else i.textContent=l||"\u2014"})}};function Ee(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 Te(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 Me(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 Le(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 qe(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 Ne(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}f("token-specimen",st);var je={button:()=>`
+    <layout-cluster data-layout-gap="s">
+      <button>Primary</button>
+      <button class="secondary">Secondary</button>
+      <button disabled>Disabled</button>
+    </layout-cluster>`,input:()=>`
+    <layout-stack data-layout-gap="xs">
+      <input type="text" placeholder="Text input" aria-label="Sample text input"/>
+      <input type="email" placeholder="email@example.com" aria-label="Sample email"/>
+      <input type="text" value="Read only" readonly aria-label="Read-only input"/>
+    </layout-stack>`,select:()=>`
+    <select aria-label="Sample select">
+      <option>Choose an option</option>
+      <option>Option A</option>
+      <option>Option B</option>
+      <option>Option C</option>
+    </select>`,checkbox:()=>`
+    <layout-stack data-layout-gap="xs">
+      <label><input type="checkbox" checked="checked"/> Checked option</label>
+      <label><input type="checkbox"/> Unchecked option</label>
+      <label><input type="checkbox" disabled/> Disabled option</label>
+    </layout-stack>`,radio:()=>`
+    <layout-stack data-layout-gap="xs">
+      <label><input type="radio" name="sampler-radio" checked="checked"/> Selected</label>
+      <label><input type="radio" name="sampler-radio"/> Unselected</label>
+      <label><input type="radio" name="sampler-radio" disabled/> Disabled</label>
+    </layout-stack>`,badge:()=>`
+    <layout-cluster data-layout-gap="xs">
+      <layout-badge>Default</layout-badge>
+      <layout-badge data-color="success">Success</layout-badge>
+      <layout-badge data-color="warning">Warning</layout-badge>
+      <layout-badge data-color="danger">Danger</layout-badge>
+      <layout-badge data-color="info">Info</layout-badge>
+    </layout-cluster>`,progress:()=>`
+    <layout-stack data-layout-gap="xs">
+      <progress value="33" max="100">33%</progress>
+      <progress value="66" max="100">66%</progress>
+      <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>`},rt=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=je[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}};f("component-sampler",rt);var ot=r=>r<=.04045?r/12.92:Math.pow((r+.055)/1.055,2.4),nt=r=>r<=.0031308?12.92*r:1.055*Math.pow(r,1/2.4)-.055,it=r=>r<0?0:r>1?1:r;function B(r){let{r:t,g:e,b:s}=j(r),o=ot(t/255),n=ot(e/255),i=ot(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),u=Math.cbrt(l),d=Math.cbrt(c),y=.2104542553*p+.793617785*u-.0040720468*d,v=1.9779984951*p-2.428592205*u+.4505937099*d,b=.0259040371*p+.7827717662*u-.808675766*d,h=Math.sqrt(v*v+b*b),C=Math.atan2(b,v)*180/Math.PI;return C<0&&(C+=360),{l:y,c:h,h:C}}function I(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,u=l*l*l,d=4.0767416621*c-3.3077115913*p+.2309699292*u,y=-1.2684380046*c+2.6097574011*p-.3413193965*u,v=-.0041960863*c-.7034186147*p+1.707614701*u,b=it(nt(d)),h=it(nt(y)),C=it(nt(v));return P(Math.round(b*255),Math.round(h*255),Math.round(C*255))}function lt(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?P(Math.round(+n[1]),Math.round(+n[2]),Math.round(+n[3])):null}function Ht({l:r,c:t,h:e}){return`oklch(${(r*100).toFixed(1)}% ${t.toFixed(3)} ${e.toFixed(1)})`}function at(r){let{r:t,g:e,b:s}=j(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=at(r),s=at(t),o=Math.max(e,s),n=Math.min(e,s);return(o+.05)/(n+.05)}function _t(r){return r>=7?"AAA":r>=4.5?"AA":"Fail"}function ct(r){return at(r)>.4?"#000000":"#ffffff"}var V=["primary","secondary","accent"],Wt=["success","warning","error","info"],Be=[...V,...Wt],Vt={primary:"Primary",secondary:"Secondary",accent:"Accent",success:"Success",warning:"Warning",error:"Error",info:"Info"},Oe={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)"}},dt="var(--font-mono, monospace)",pt="var(--color-text-muted, #666)",ut="var(--color-border, #ddd)",Ut="var(--color-surface, #fff)",Fe="var(--color-text, #222)",q="var(--radius-s, 0.25rem)",Ie="var(--radius-m, 0.5rem)",mt=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.#i(),this.#l(),this.#c("init"),this.#x(),this.#g(),this.#f("init")}attributeChangedCallback(t){!this.isConnected||!this.hasAttribute("data-upgraded")||(t==="roles"&&this.#a(),t==="colors"&&this.#i(),this.#l(),this.#c("attribute"),this.#g(),this.#f("attribute"))}teardown(){this.#o?.remove(),this.#o=null}#i(){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}=_(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")||V.join(",")).split(",").map(s=>s.trim().toLowerCase()).filter(s=>Be.includes(s));this.#e=e.length?e:[...V]}#n(){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}#l(){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)}#c(t){if(!this.#r)return;let e=this.#n();this.#r.innerHTML=this.#e.map(s=>this.#p(s,e[s])).join("")}#p(t,e){let s=Vt[t]||t,n=Wt.includes(t)?this.#h(t,e):this.#d(t,e),i=`display:flex;flex-direction:column;gap:var(--size-s,0.75rem);padding:var(--size-m,1rem);border:1px solid ${ut};border-radius:${Ie};background:${Ut};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:${dt};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:${pt}">${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:${q};border:1px solid oklch(0% 0 0 / 0.15);background:${e}"></span>
+          <code style="font-family:${dt};font-size:var(--font-size-xs,0.75rem);color:${pt}">${e}</code>
+        </div>
+      </header>
+      <div class="sp-samples" style="display:flex;flex-wrap:wrap;gap:var(--size-s,0.75rem);align-items:flex-start">${n}</div>
+    </article>`}#d(t,e){let s=this.#$(t,e),o=this.#y(),n=this.#w(t,e),i=this.#S(e);return[this.#u({render:`<button type="button" tabindex="-1" style="all:unset;display:inline-block;padding:0.375rem 0.875rem;border-radius:${q};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:${q};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("")}#h(t,e){let s=this.#y(),o=this.#k(t,e),n=this.#z(t,e),i=ct(e);return[this.#u({render:`<div style="display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;border-radius:${q};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>${Vt[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:${q};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=lt(e,this.#o||void 0)||"#000000",i=lt(s,this.#o||void 0)||"#ffffff",a=Pt(n,i),l=_t(a).toLowerCase(),c=Oe[l],p=`display:inline-flex;align-items:center;gap:0.25rem;padding:0.125rem 0.375rem;border-radius:${q};font-family:${dt};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:${pt}">
+        <span style="${p}" title="${o}: ${a.toFixed(2)}:1">${a.toFixed(2)} <small>${l.toUpperCase()}</small></span>
+        <span>${o}</span>
+      </div>
+    </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 ${ut}`,e=`padding:0.375rem 0.875rem;border:1px solid ${ut};border-radius:${q};background:${Ut};color:${Fe};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>`}#x(){let t=this.querySelector("color-palette");t&&this.listen(t,"color-palette:change",()=>{this.#i(),this.#c("palette"),this.#f("palette")});let e=this.querySelector("palette-generator");e&&this.listen(e,"palette-generator:generate",()=>{this.#i(),this.#c("palette"),this.#f("palette")})}#g(){let t=this.querySelector(".sp-copy-css"),e=this.querySelector(".sp-copy-json");t&&this.listen(t,"click",()=>{w(this.#b(),{button:t,announceMessage:"Theme CSS copied"})}),e&&this.listen(e,"click",()=>{w(JSON.stringify(this.#n(),null,2),{button:e,announceMessage:"JSON copied"})})}#m(){return getComputedStyle(this)}#y(){return this.#m().getPropertyValue("--color-surface").trim()||"#ffffff"}#$(t,e){return this.#m().getPropertyValue(`--color-text-on-${t}`).trim()||ct(e)}#w(t,e){let s=this.#m().getPropertyValue(`--color-${t}-subtle`).trim();if(s)return s;let{h:o}=B(e);return I(.95,.03,o)}#k(t,e){let s=this.#m().getPropertyValue(`--color-${t}-subtle`).trim();if(s)return s;let{h:o}=B(e);return I(.94,.05,o)}#z(t,e){let s=this.#m().getPropertyValue(`--color-${t}-text`).trim();if(s)return s;let{h:o}=B(e);return I(.3,.14,o)}#S(t){let{l:e,c:s,h:o}=B(t);return I(Math.max(.2,e-.25),s,o)}#b(){let t=this.#n(),e=[],s=[];for(let n of this.#e){let i=t[n];if(!i)continue;let{l:a,c:l,h:c}=B(i);V.includes(n)?e.push(`  --hue-${n}: ${c.toFixed(1)};`,`  --lightness-${n}: ${(a*100).toFixed(1)}%;`,`  --chroma-${n}: ${l.toFixed(3)};`):s.push(`  --color-${n}: ${Ht({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(`
+`)}
+}
+`}#f(t){this.dispatchEvent(new CustomEvent("semantic-palette:change",{bubbles:!0,detail:{mapping:this.#n(),tokens:this.#b(),source:t}}))}};f("semantic-palette",mt);var Re="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",De="instant,fast,normal,slow,slower",Gt="ms-keyframes",He=`
+@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 Pe(){if(typeof document>"u"||document.getElementById(Gt))return;let r=document.createElement("style");r.id=Gt,r.textContent=He,document.head.append(r)}var Jt="var(--font-mono, monospace)",Kt="var(--color-text-muted, #666)",Xt="var(--color-interactive, oklch(55% 0.2 260))",Yt="var(--color-surface-sunken, #f1f1f1)",ht=class extends m{static observedAttributes=["type","tokens","prefix","duration","show-values","label"];setup(){Pe(),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.#i(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.#n())}#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:${Jt};font-size:var(--font-size-sm,0.875rem);color:${Kt};text-align:end`}#r(){return`font-family:${Jt};font-size:var(--font-size-xs,0.75rem);color:${Kt};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)"}#i(t,e){let s=(this.getAttribute("tokens")||Re).split(",").map(l=>l.trim()),o=this.getAttribute("prefix")||"--ease-",n=`position:relative;display:block;block-size:0.5rem;background:${Yt};border-radius:999px`,i=`position:absolute;inset-block-start:50%;inset-inline-start:0;inline-size:1rem;block-size:1rem;background:${Xt};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="${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")||De).split(",").map(a=>a.trim()),s=this.getAttribute("prefix")||"--duration-",o=`position:relative;display:block;block-size:0.5rem;background:${Yt};border-radius:999px;overflow:hidden`,n=`position:absolute;inset-block:0;inset-inline-start:0;inline-size:100%;background:${Xt};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="${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>`}#n(){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"})}};f("motion-specimen",ht);var M="com.vanilla-breeze",_e="2025.10";function Qt(r,t={}){let e={},s=[],o=!1;for(let[i,a]of r){let l=String(a).trim(),c=Ve(i);if(!c){s.push(i);continue}c.path[0]==="color"&&c.path[1]==="seeds"&&(o=!0);let p=Ue(i,l,c);os(e,c.path,c.name,p)}let n={spec:_e};return t.vbVersion&&(n.vbVersion=t.vbVersion),o&&(n.seedDerivation=!0),s.length&&(n.unmapped=s),e.$extensions={[M]:n},e}function Ve(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 Ue(r,t,e){switch(e.type){case"color":return We(t);case"fontFamily":return{$type:"fontFamily",$value:Ye(t)};case"fontWeight":return{$type:"fontWeight",$value:yt(t)};case"number":return Ke(t);case"dimension":return Xe(t);case"duration":return{$type:"duration",$value:Qe(t)};case"cubicBezier":return Ze(t);case"shadow":return ts(t);default:return{$value:t}}}function We(r){let t=rs(r);if(t)return{$root:{$type:"color",$value:R(t.light)??ft(t.light)},light:{$type:"color",$value:R(t.light)??ft(t.light)},dark:{$type:"color",$value:R(t.dark)??ft(t.dark)},$extensions:{[M]:{lightDark:r}}};if(/\bfrom\b/.test(r)&&/^oklch\(/i.test(r))return{$type:"color",$value:{colorSpace:"srgb",components:[0,0,0]},$extensions:{[M]:{expression:r}}};let e=R(r);return e?{$type:"color",$value:e}:{$type:"color",$value:{colorSpace:"srgb",components:[0,0,0]},$extensions:{[M]:{literal:r}}}}function ft(r){return{colorSpace:"srgb",components:[0,0,0],$vbLiteral:r}}function R(r){let t=String(r).trim(),e=t.match(/^oklch\(\s*([^)]+)\)\s*$/i);if(e){let[s,o]=Je(e[1]),n=s.trim().split(/\s+/);if(n.length<3)return null;let i=U(n[0]),a=yt(n[1]),l=yt(n[2]);if([i,a,l].some(Number.isNaN))return null;let c={colorSpace:"oklch",components:[Ge(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=gt(s[0]),n=gt(s[1]),i=gt(s[2]),a={colorSpace:"srgb",components:[o,n,i]};return s[3]!=null&&(a.alpha=U(s[3])),a}return null}function Ge(r,t){return typeof r=="string"&&r.endsWith("%")?t/100:t}function Je(r){let t=r.indexOf("/");if(t<0)return[r,null];let e=r.slice(0,t),s=U(r.slice(t+1).trim());return[e,s]}function gt(r){let t=r.trim();return t.endsWith("%")?parseFloat(t)/100:parseFloat(t)/255}function Ke(r){let e={$type:"number",$value:U(r)};return typeof r=="string"&&r.trim().endsWith("%")&&(e.$extensions={[M]:{unit:"%"}}),e}function Xe(r){let t=String(r).trim(),e=t.match(/^(-?[\d.]+)(px|rem|em|%)?$/);if(!e)return{$type:"dimension",$value:{value:0,unit:"px"},$extensions:{[M]:{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={[M]:{unit:o}}),i}function yt(r){return parseFloat(String(r).trim())}function U(r){let t=String(r).trim();return t.endsWith("%"),parseFloat(t)}function Ye(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 Qe(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 Ze(r){let t=String(r).match(/^cubic-bezier\(\s*([^)]+)\)\s*$/i);if(!t)return{$type:"cubicBezier",$value:[0,0,1,1],$extensions:{[M]:{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:{[M]:{literal:r}}}:{$type:"cubicBezier",$value:e}}function ts(r){let e=Zt(String(r)).map(es);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:{[M]:{literal:r}}}:e.length===1?{$type:"shadow",$value:e[0]}:{$type:"shadow",$value:e}}function es(r){let t=r.trim(),e=t.match(/(#[0-9a-f]{3,8}|rgba?\([^)]+\)|oklch\([^)]+\))$/i);if(!e)return null;let s=R(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=>ss(n[l]),a={offsetX:i(0),offsetY:i(1),blur:i(2),color:s};return n[3]&&(a.spread=i(3)),a}function ss(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 Zt(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 rs(r){let t=String(r).match(/^light-dark\(\s*([\s\S]+)\s*\)\s*$/i);if(!t)return null;let e=Zt(t[1]);return e.length!==2?null:{light:e[0].trim(),dark:e[1].trim()}}function os(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 ns="--color-,--hue-,--lightness-,--chroma-,--font-,--size-,--radius-,--shadow-,--border-width-,--ease-,--duration-,--line-height-,--letter-spacing-",is=["type-specimen:change","spacing-specimen:change","token-specimen:change","semantic-palette:change"],bt=class extends m{static observedAttributes=["scope","selector","include","format","label","live"];setup(){this.#o(),this.#i(),this.#a(),this.#l()}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&(this.#o(),this.#i(),this.#a(),this.#l())}#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")||ns).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(Qt(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(([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);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="${i}"></textarea>
+    `}#i(){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.#i()),e&&this.listen(e,"click",()=>{let n=this.querySelector(".te-output");n&&w(n.value,{button:e,announceMessage:"Theme copied"})}),s&&this.listen(s,"click",()=>this.#n())}#n(){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)}#l(){if(this.hasAttribute("live"))for(let t of is)this.listen(document,t,()=>this.#i())}};f("theme-export",bt);function te(r){let t=String(r||"").trim();if(!t)return null;let e=t.match(/^#([0-9a-f]{3,8})$/i);if(e){let s=e[1];if(s.length===3)return[parseInt(s[0]+s[0],16),parseInt(s[1]+s[1],16),parseInt(s[2]+s[2],16)];if(s.length===4)return[parseInt(s[0]+s[0],16),parseInt(s[1]+s[1],16),parseInt(s[2]+s[2],16)];if(s.length===6)return[parseInt(s.slice(0,2),16),parseInt(s.slice(2,4),16),parseInt(s.slice(4,6),16)];if(s.length===8)return[parseInt(s.slice(0,2),16),parseInt(s.slice(2,4),16),parseInt(s.slice(4,6),16)]}if(e=t.match(/^rgba?\s*\(\s*([0-9.]+)[\s,]+([0-9.]+)[\s,]+([0-9.]+)/i),e)return[Math.round(+e[1]),Math.round(+e[2]),Math.round(+e[3])];if(typeof document<"u"){let s=document.createElement("span");s.style.color=t,s.style.display="none",document.body.appendChild(s);let o=getComputedStyle(s).color;s.remove();let n=o.match(/^rgba?\s*\(\s*([0-9.]+)[\s,]+([0-9.]+)[\s,]+([0-9.]+)/i);if(n)return[Math.round(+n[1]),Math.round(+n[2]),Math.round(+n[3])]}return null}function vt(r){let t=r/255;return t<=.03928?t/12.92:Math.pow((t+.055)/1.055,2.4)}function ee([r,t,e]){return .2126*vt(r)+.7152*vt(t)+.0722*vt(e)}function as(r,t){let e=te(r),s=te(t);if(!e||!s)return null;let o=ee(e),n=ee(s),i=Math.max(o,n),a=Math.min(o,n);return(i+.05)/(a+.05)}function ls(r){return r==null?{aaNormal:!1,aaLarge:!1,aaaNormal:!1,aaaLarge:!1}:{aaNormal:r>=4.5,aaLarge:r>=3,aaaNormal:r>=7,aaaLarge:r>=4.5}}var xt=class extends m{static observedAttributes=["type"];setup(){(this.getAttribute("type")||"contrast")==="checklist"?this.#s():this.#t()}attributeChangedCallback(t,e,s){!this.isConnected||e===s||this.setup()}#t(){let t=[...this.querySelectorAll(":scope > button[data-fg][data-bg]")].map(n=>({fg:n.dataset.fg,bg:n.dataset.bg,label:n.dataset.label||n.textContent.trim()||`${n.dataset.fg} on ${n.dataset.bg}`})),e=document.createElement("table");e.className="as-contrast-table";let s=document.createElement("thead");s.innerHTML=`
+      <tr>
+        <th scope="col">Pair</th>
+        <th scope="col">Sample</th>
+        <th scope="col">Ratio</th>
+        <th scope="col">AA</th>
+        <th scope="col">AA Large</th>
+        <th scope="col">AAA</th>
+        <th scope="col">AAA Large</th>
+      </tr>`,e.appendChild(s);let o=document.createElement("tbody");if(t.length===0){let n=document.createElement("tr"),i=document.createElement("td");i.colSpan=7,i.className="as-empty",i.textContent='No color pairs authored. Add <button data-fg="\u2026" data-bg="\u2026">Label</button> children.',n.appendChild(i),o.appendChild(n)}else for(let n of t)o.appendChild(this.#e(n));e.appendChild(o),this.replaceChildren(e)}#e({fg:t,bg:e,label:s}){let o=as(t,e),n=ls(o),i=o==null?"?":`${o.toFixed(2)}:1`,a=document.createElement("tr"),l=document.createElement("th");l.scope="row",l.className="as-pair-label",l.innerHTML=`<span class="as-swatch" style="background:${e};border-color:${t}"></span><span>${cs(s)}</span>`,a.appendChild(l);let c=document.createElement("td");c.className="as-pair-sample",c.style.background=e,c.style.color=t,c.textContent="Aa Bb 123",a.appendChild(c);let p=document.createElement("td");p.className="as-pair-ratio",p.textContent=i,a.appendChild(p);for(let u of["aaNormal","aaLarge","aaaNormal","aaaLarge"]){let d=document.createElement("td"),y=n[u];d.className=`as-badge ${y?"as-pass":"as-fail"}`,d.textContent=y?"\u2713":"\u2717",d.setAttribute("aria-label",y?"Pass":"Fail"),a.appendChild(d)}return a}#s(){let t=this.querySelector(":scope > ul, :scope > ol");if(t){t.classList.add("as-checklist");for(let e of t.querySelectorAll(":scope > li"))this.#r(e)}}#r(t){if(t.dataset.decorated==="")return;t.dataset.decorated="";let e=t.dataset.status||"na";t.classList.add(`as-status-${e}`);let s=document.createElement("span");s.className="as-checklist-icon",s.setAttribute("aria-hidden","true"),s.textContent={pass:"\u2713",fail:"\u2717",warn:"!",na:"\u2013"}[e]||"\u2013";let o={pass:"Pass",fail:"Fail",warn:"Warning",na:"Not applicable"}[e]||"Not applicable",n=document.createElement("span");n.className="as-sr-only",n.textContent=`${o}: `,t.prepend(s,n)}};function cs(r){return String(r).replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[t])}f("accessibility-specimen",xt);var $t=class extends m{static observedAttributes=["tokens","prefix","label","data-observe"];setup(){this.#t(),this.#e()}attributeChangedCallback(){this.isConnected&&(this.#s(),this.#t(),this.#e())}teardown(){this.#s()}#t(){let t=this.getAttribute("tokens")||"sm,md,lg,xl",e=this.getAttribute("prefix")||"--bp-",s=this.getAttribute("label")||"",o=t.split(",").map(u=>u.trim()).filter(Boolean),n=getComputedStyle(document.documentElement),i=o.map(u=>{let d=n.getPropertyValue(`${e}${u}`).trim(),y=this.#i(d);return{name:u,raw:d,px:y}}).filter(u=>u.px>0).sort((u,d)=>u.px-d.px);this.#a=i,this.#n=i.length?i[i.length-1].px*1.15:1;let a=s?`<header class="bps-label">${s}</header>`:"",l=`
+      <output class="bps-readout" aria-live="polite">
+        <span class="bps-width">\u2014</span>
+        <span class="bps-active" data-active="">\u2014</span>
+      </output>
+    `,c=`
+      <figure class="bps-ruler" aria-hidden="true">
+        <span class="bps-cursor" data-cursor></span>
+        ${i.map(u=>`
+          <span class="bps-stop" style="--bps-pos:${u.px/this.#n*100}%" data-bp="${u.name}">
+            <span class="bps-tick"></span>
+            <span class="bps-stop-label">${u.name}<br><small>${Math.round(u.px)}px</small></span>
+          </span>
+        `).join("")}
+      </figure>
+    `,p=`
+      <dl class="bps-list">
+        ${i.map(u=>`
+          <div class="bps-row" data-bp="${u.name}">
+            <dt>${u.name}</dt>
+            <dd><code>${u.raw}</code> \u2014 ${Math.round(u.px)}px and up</dd>
+          </div>
+        `).join("")}
+      </dl>
+    `;this.innerHTML=`${a}${l}${c}${p}`,this.#c=this.querySelector(".bps-width"),this.#p=this.querySelector(".bps-active"),this.#d=this.querySelector("[data-cursor]")}#e(){let t=this.getAttribute("data-observe");if(t){let s=document.querySelector(t);if(!s)return;this.#l=new ResizeObserver(()=>this.#r(s.clientWidth)),this.#l.observe(s),this.#r(s.clientWidth);return}let e=()=>this.#r(window.innerWidth);e(),this.listen(window,"resize",e,{passive:!0})}#s(){this.#l&&(this.#l.disconnect(),this.#l=null)}#r(t){if(!this.#c||!this.#p)return;this.#c.textContent=`${Math.round(t)}px`;let e=this.#o(t);if(this.#p.textContent=e?e.name:"base",this.#p.dataset.active=e?e.name:"",this.#d){let s=Math.min(100,t/this.#n*100);this.#d.style.setProperty("--bps-pos",`${s}%`)}this.querySelectorAll("[data-bp]").forEach(s=>{let o=e&&s.getAttribute("data-bp")===e.name;s.toggleAttribute("data-current",!!o)})}#o(t){let e=null;for(let s of this.#a)t>=s.px&&(e=s);return e}#i(t){if(!t)return 0;let e=parseFloat(t);if(Number.isNaN(e))return 0;if(t.endsWith("rem")||t.endsWith("em")){let s=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return e*s}return e}#a=[];#n=1;#l=null;#c=null;#p=null;#d=null};f("breakpoint-specimen",$t);var ds=[{name:"layout-stack",desc:"Vertical stack with consistent gap between children.",snippet:`<layout-stack data-layout-gap="m">
+  <p>One</p>
+  <p>Two</p>
+  <p>Three</p>
+</layout-stack>`,render:()=>g("layout-stack",{"data-layout-gap":"s"},[x("One"),x("Two"),x("Three")])},{name:"layout-cluster",desc:"Horizontal cluster that wraps; for tag rows, button groups.",snippet:`<layout-cluster data-layout-gap="s">
+  <button>One</button> <button>Two</button> <button>Three</button>
+</layout-cluster>`,render:()=>g("layout-cluster",{"data-layout-gap":"s"},[W("One"),W("Two"),W("Three"),W("Four")])},{name:"layout-grid",desc:"Auto-fit responsive grid; columns flow based on min-item-size.",snippet:`<layout-grid data-layout-min="12rem">
+  <div>1</div> <div>2</div> <div>3</div> <div>4</div>
+</layout-grid>`,render:()=>g("layout-grid",{"data-layout-min":"6rem","data-layout-gap":"s"},[x("1"),x("2"),x("3"),x("4"),x("5"),x("6")])},{name:"layout-center",desc:"Center a block horizontally with optional max-width.",snippet:`<layout-center data-layout-max="readable">
+  <p>Centered prose.</p>
+</layout-center>`,render:()=>g("layout-center",{"data-layout-max":"narrow",style:"border: 1px dashed var(--color-border); padding: var(--size-2xs)"},[x("Centered")])},{name:"layout-cover",desc:"Vertical cover layout: optional header + main area + optional footer, with main filling available space.",snippet:`<layout-cover style="block-size: 12rem">
+  <header>Top</header>
+  <main>Center</main>
+  <footer>Bottom</footer>
+</layout-cover>`,render:()=>g("layout-cover",{style:"block-size: 9rem; border: 1px dashed var(--color-border); padding: var(--size-2xs)"},[g("header",{},[x("Top")]),g("main",{},[x("Center","main")]),g("footer",{},[x("Bottom")])])},{name:"layout-imposter",desc:"Absolute centering \u2014 child sits in the dead center of the parent.",snippet:`<div style="position:relative; block-size:8rem">
+  <layout-imposter><span>Centered</span></layout-imposter>
+</div>`,render:()=>g("div",{style:"position:relative; block-size: 6rem; border: 1px dashed var(--color-border)"},[g("layout-imposter",{},[x("Imposter")])])},{name:"layout-columns",desc:"Multi-column text layout (CSS columns); good for newspapery prose.",snippet:`<layout-columns data-layout-columns="3">
+  <p>Long prose flows across columns\u2026</p>
+</layout-columns>`,render:()=>g("layout-columns",{"data-layout-columns":"3"},[g("p",{style:"margin: 0; font-size: 0.85em"},["One two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen."])])},{name:"layout-card",desc:"Stack of header + body + actions with card chrome (border + padding).",snippet:`<layout-card>
+  <h3>Title</h3>
+  <p>Body text.</p>
+  <div data-layout-card-actions><button>OK</button></div>
+</layout-card>`,render:()=>g("layout-card",{},[g("h3",{style:"margin: 0; font-size: 0.9em"},["Card title"]),g("p",{style:"margin: 0; font-size: 0.85em"},["Card body content."])])},{name:"layout-canvas",desc:"Full-bleed canvas section that breaks the centered max-width.",snippet:`<layout-canvas>
+  <p>Edge-to-edge content.</p>
+</layout-canvas>`,render:()=>g("layout-canvas",{style:"background: var(--color-surface-sunken, oklch(94% 0 0)); padding: var(--size-2xs)"},[x("Full-bleed")])},{name:"layout-badge",desc:"Tiny inline badge / pill for inline labels.",snippet:"<layout-badge>NEW</layout-badge>",render:()=>g("layout-cluster",{"data-layout-gap":"xs"},[g("layout-badge",{},["NEW"]),g("layout-badge",{},["BETA"]),g("layout-badge",{},["v2.0"])])},{name:"layout-reel",desc:"Horizontal scrollable reel with snap points.",snippet:`<layout-reel>
+  <article>1</article> <article>2</article> <article>3</article>
+</layout-reel>`,render:()=>g("layout-reel",{},[x("1","reel"),x("2","reel"),x("3","reel"),x("4","reel"),x("5","reel"),x("6","reel")])},{name:"layout-sidebar",desc:"Sidebar + main split that collapses to a stack on narrow viewports.",snippet:`<layout-sidebar>
+  <aside>Side</aside>
+  <main>Main</main>
+</layout-sidebar>`,render:()=>g("layout-sidebar",{},[g("aside",{style:"background: var(--color-surface-sunken, oklch(94% 0 0)); padding: var(--size-2xs)"},["Side"]),g("main",{},[x("Main")])])},{name:"layout-switcher",desc:"Container that switches from a row to a stack at a configurable threshold.",snippet:`<layout-switcher data-layout-threshold="30rem">
+  <div>One</div> <div>Two</div>
+</layout-switcher>`,render:()=>g("layout-switcher",{"data-layout-threshold":"20rem"},[x("One"),x("Two")])},{name:"layout-text",desc:"Constrains line length to a readable measure (~60ch).",snippet:`<layout-text>
+  <p>Constrained-measure prose for comfortable reading.</p>
+</layout-text>`,render:()=>g("layout-text",{},[g("p",{style:"margin: 0; font-size: 0.85em"},["This paragraph is constrained to a comfortable reading measure (~60ch) regardless of the parent width."])])}];function g(r,t={},e=[]){let s=document.createElement(r);for(let[o,n]of Object.entries(t))n!=null&&(o==="style"?s.setAttribute("style",n):s.setAttribute(o,n===!0?"":String(n)));for(let o of e)typeof o=="string"?s.appendChild(document.createTextNode(o)):o&&s.appendChild(o);return s}function x(r,t){return g("div",{class:`ls-box${t?` ls-box-${t}`:""}`},[r])}function W(r){return g("span",{class:"ls-chip"},[r])}var wt=class extends m{setup(){let t=this.getAttribute("data-only"),e=t?new Set(t.split(",").map(o=>o.trim())):null,s=ds.filter(o=>!e||e.has(o.name)||e.has(o.name.replace(/^layout-/,"")));this.replaceChildren();for(let o of s)this.appendChild(this.#t(o))}#t(t){let e=g("section",{class:"ls-entry"}),s=g("header",{class:"ls-entry-head"},[g("h3",{class:"ls-entry-name"},[t.name]),g("p",{class:"ls-entry-desc"},[t.desc])]),o=g("div",{class:"ls-live"});o.appendChild(t.render());let n=g("pre",{class:"ls-snippet"},[g("code",{},[t.snippet])]);return e.append(s,o,n),e}};f("layout-specimen",wt);var D=[{name:"Playfair Display",category:"serif",weights:"400;600;700;900",style:"elegant"},{name:"Merriweather",category:"serif",weights:"300;400;700;900",style:"readable"},{name:"Lora",category:"serif",weights:"400;500;600;700",style:"elegant"},{name:"Source Serif 4",category:"serif",weights:"300;400;600;700",style:"neutral"},{name:"Libre Baskerville",category:"serif",weights:"400;700",style:"classic"},{name:"Crimson Text",category:"serif",weights:"400;600;700",style:"classic"},{name:"DM Serif Display",category:"serif",weights:"400",style:"bold"},{name:"Cormorant Garamond",category:"serif",weights:"300;400;500;600;700",style:"elegant"},{name:"Inter",category:"sans-serif",weights:"300;400;500;600;700",style:"neutral"},{name:"Open Sans",category:"sans-serif",weights:"300;400;600;700",style:"friendly"},{name:"Roboto",category:"sans-serif",weights:"300;400;500;700",style:"neutral"},{name:"Lato",category:"sans-serif",weights:"300;400;700;900",style:"warm"},{name:"Nunito",category:"sans-serif",weights:"300;400;600;700",style:"friendly"},{name:"Work Sans",category:"sans-serif",weights:"300;400;500;600;700",style:"geometric"},{name:"DM Sans",category:"sans-serif",weights:"400;500;700",style:"geometric"},{name:"Plus Jakarta Sans",category:"sans-serif",weights:"300;400;500;600;700",style:"modern"},{name:"Space Grotesk",category:"sans-serif",weights:"300;400;500;600;700",style:"technical"},{name:"Manrope",category:"sans-serif",weights:"300;400;500;600;700",style:"geometric"},{name:"IBM Plex Sans",category:"sans-serif",weights:"300;400;500;600",style:"technical"},{name:"Outfit",category:"sans-serif",weights:"300;400;500;600;700",style:"modern"},{name:"Bebas Neue",category:"display",weights:"400",style:"bold"},{name:"Abril Fatface",category:"display",weights:"400",style:"elegant"},{name:"Oswald",category:"display",weights:"300;400;500;600;700",style:"condensed"},{name:"Sora",category:"display",weights:"300;400;500;600;700",style:"modern"},{name:"Fraunces",category:"display",weights:"300;400;500;600;700;900",style:"elegant"},{name:"JetBrains Mono",category:"monospace",weights:"400;500;600;700",style:"technical"},{name:"Fira Code",category:"monospace",weights:"300;400;500;600;700",style:"technical"},{name:"IBM Plex Mono",category:"monospace",weights:"400;500;600",style:"technical"},{name:"Source Code Pro",category:"monospace",weights:"300;400;500;600;700",style:"neutral"}],se=[["Playfair Display","Inter"],["DM Serif Display","DM Sans"],["Fraunces","Plus Jakarta Sans"],["Lora","Open Sans"],["Merriweather","Roboto"],["Oswald","Lato"],["Cormorant Garamond","Work Sans"],["Sora","Inter"],["Abril Fatface","Nunito"],["Source Serif 4","Source Code Pro"],["Space Grotesk","IBM Plex Sans"],["Outfit","Manrope"]];function kt(r,t="400;700"){return`https://fonts.googleapis.com/css2?family=${r.replace(/\s+/g,"+")}:wght@${t}&display=swap`}async function re(r,t="400;700"){let e=`gf-${r.replace(/\s+/g,"-").toLowerCase()}`;if(document.getElementById(e)){await document.fonts.ready;return}let s=document.createElement("link");s.id=e,s.rel="stylesheet",s.href=kt(r,t),document.head.appendChild(s),await document.fonts.ready}var $=(r,t,e,s="")=>`${s} contenteditable="plaintext-only" spellcheck="false" class="fp-editable" data-role="${e}"`,zt={combined:{label:"Combined",render:(r,t)=>`
+      <p style="font-family:${r.display};font-size:var(--font-size-3xl,2rem);font-weight:800;margin:0;line-height:1.15"
+        ${$(r.display,"p","heading")}>${t.heading}</p>
+      <h3 style="font-family:${r.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0"
+        ${$(r.heading,"h3","subheading")}>${t.subheading}</h3>
+      <p style="font-family:${r.body};font-size:var(--font-size-md,1rem);line-height:1.65;margin:0;color:var(--color-text-muted,#666)"
+        ${$(r.body,"p","body")}>${t.body}</p>
+      <pre style="font-family:${r.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code ${$(r.code,"code","code")}>${t.code}</code></pre>`},article:{label:"Article",render:(r,t)=>`
+      <small style="font-family:${r.body};font-size:var(--font-size-xs,0.75rem);text-transform:uppercase;letter-spacing:0.08em;color:var(--color-interactive,oklch(55% .2 260));font-weight:600"
+        ${$(r.body,"small","eyebrow")}>${t.eyebrow}</small>
+      <h2 style="font-family:${r.heading};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0;line-height:1.2"
+        ${$(r.heading,"h2","heading")}>${t.heading}</h2>
+      <p style="font-family:${r.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0"
+        ${$(r.body,"p","byline")}>${t.byline}</p>
+      <p style="font-family:${r.body};line-height:1.7;margin:0" ${$(r.body,"p","body")}>${t.body}</p>
+      <h3 style="font-family:${r.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0"
+        ${$(r.heading,"h3","subheading")}>${t.subheading}</h3>
+      <p style="font-family:${r.body};line-height:1.7;margin:0" ${$(r.body,"p","body2")}>${t.body2}</p>
+      <blockquote style="font-family:${r.display};font-style:italic;font-size:var(--font-size-lg,1.125rem);border-inline-start:3px solid var(--color-interactive,oklch(55% .2 260));padding-inline-start:var(--size-m,1rem);margin:0;color:var(--color-text-muted,#666)"
+        ${$(r.display,"blockquote","quote")}>${t.quote}</blockquote>
+      <pre style="font-family:${r.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code ${$(r.code,"code","code")}>${t.code}</code></pre>`},"long-article":{label:"Long Article",render:(r,t)=>`
+      <small style="font-family:${r.body};font-size:var(--font-size-xs,0.75rem);text-transform:uppercase;letter-spacing:0.08em;color:var(--color-interactive,oklch(55% .2 260));font-weight:600">${t.eyebrow}</small>
+      <h1 style="font-family:${r.display};font-size:var(--font-size-3xl,2rem);font-weight:800;margin:0;line-height:1.15">${t.heading}</h1>
+      <p style="font-family:${r.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0">${t.byline}</p>
+      <p style="font-family:${r.body};font-size:var(--font-size-lg,1.125rem);line-height:1.6;margin:0;color:var(--color-text-muted,#666)">${t.lead}</p>
+      <h2 style="font-family:${r.heading};font-size:var(--font-size-xl,1.375rem);font-weight:700;margin:0">${t.subheading}</h2>
+      <p style="font-family:${r.body};line-height:1.7;margin:0">${t.body}</p>
+      <p style="font-family:${r.body};line-height:1.7;margin:0">${t.body2}</p>
+      <blockquote style="font-family:${r.display};font-style:italic;font-size:var(--font-size-lg,1.125rem);border-inline-start:3px solid var(--color-interactive,oklch(55% .2 260));padding-inline-start:var(--size-m,1rem);margin:0;color:var(--color-text-muted,#666)">${t.quote}</blockquote>
+      <h2 style="font-family:${r.heading};font-size:var(--font-size-xl,1.375rem);font-weight:700;margin:0">Implementation Details</h2>
+      <p style="font-family:${r.body};line-height:1.7;margin:0">Design tokens form the atomic layer of any visual system. Colors, spacing, typography, and motion are expressed as named variables that cascade through every component. When a token changes, every surface that references it updates automatically \u2014 no find-and-replace, no missed instances.</p>
+      <pre style="font-family:${r.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code>${t.code}</code></pre>
+      <h3 style="font-family:${r.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0">Key Takeaways</h3>
+      <ul style="font-family:${r.body};line-height:1.7;margin:0;padding-inline-start:1.5rem">
+        <li>Typography sets the emotional tone before a single word is read</li>
+        <li>Pair contrast with harmony \u2014 serif headings with sans-serif body</li>
+        <li>Test at real content lengths, not just sample sentences</li>
+        <li>Code fonts need clear distinction between similar glyphs</li>
+      </ul>`},card:{label:"Card UI",render:(r,t)=>`
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--size-m,1rem)">
+        <div style="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);padding:var(--size-m,1rem);display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)">
+          <h4 style="font-family:${r.heading};font-weight:600;margin:0" ${$(r.heading,"h4","cardTitle")}>Premium Plan</h4>
+          <p style="font-family:${r.display};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0">$49<small style="font-size:0.5em;font-weight:400">/mo</small></p>
+          <p style="font-family:${r.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0" ${$(r.body,"p","cardBody")}>Everything you need to build faster.</p>
+          <code style="font-family:${r.code};font-size:var(--font-size-xs,0.75rem);background:var(--color-surface-sunken,#eee);padding:0.2rem 0.4rem;border-radius:0.25rem" ${$(r.code,"code","cardCode")}>npm install acme</code>
+        </div>
+        <div style="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);padding:var(--size-m,1rem);display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)">
+          <h4 style="font-family:${r.heading};font-weight:600;margin:0">Enterprise</h4>
+          <p style="font-family:${r.display};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0">Custom</p>
+          <p style="font-family:${r.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0">Dedicated support and SLA guarantees.</p>
+          <code style="font-family:${r.code};font-size:var(--font-size-xs,0.75rem);background:var(--color-surface-sunken,#eee);padding:0.2rem 0.4rem;border-radius:0.25rem">contact@acme.dev</code>
+        </div>
+      </div>`},hero:{label:"Hero",render:(r,t)=>`
+      <div style="text-align:center;padding:var(--size-xl,2rem) 0">
+        <p style="font-family:${r.body};font-size:var(--font-size-xs,0.75rem);text-transform:uppercase;letter-spacing:0.1em;color:var(--color-interactive,oklch(55% .2 260));font-weight:600;margin:0 0 var(--size-xs,0.5rem)"
+          ${$(r.body,"p","eyebrow")}>${t.eyebrow}</p>
+        <h1 style="font-family:${r.display};font-size:clamp(2rem,5vw,3rem);font-weight:800;margin:0;line-height:1.1"
+          ${$(r.display,"h1","heading")}>${t.heading}</h1>
+        <p style="font-family:${r.body};font-size:var(--font-size-lg,1.125rem);color:var(--color-text-muted,#666);margin:var(--size-s,0.75rem) auto 0;max-width:40ch"
+          ${$(r.body,"p","body")}>${t.body}</p>
+      </div>`}},St=class extends m{static observedAttributes=["heading-font","body-font","code-font","display-font","sample","show-export","show-suggestions","preview"];#t={heading:"",body:"",code:"",display:""};#e="combined";#s={heading:"The Art of Typography",subheading:"Building visual harmony through font pairing",body:"Good typography is invisible \u2014 it lets the content speak without distraction. The best font pairings create harmony between heading impact and body readability. Every typeface carries personality: serif fonts convey trust and tradition, while sans-serif fonts feel modern and clean.",body2:"Choosing the right pairing is about contrast and complement. A bold display font for headlines needs a quiet, readable body font to balance it. Monospace fonts ground technical content in precision. The interplay between these roles defines your brand voice.",code:`const theme = {
+  heading: "Playfair Display",
+  body: "Inter",
+  tokens: { size: 16, scale: 1.25 }
+};`,eyebrow:"Design Systems",byline:"By Jamie Chen \xB7 April 14, 2026 \xB7 8 min read",lead:"How native CSS features and design tokens are replacing the complex tooling we thought we needed.",quote:'"Good typography is invisible \u2014 it lets the content breathe."'};setup(){this.#t.heading=this.getAttribute("heading-font")||"Playfair Display",this.#t.body=this.getAttribute("body-font")||"Inter",this.#t.code=this.getAttribute("code-font")||"JetBrains Mono",this.#t.display=this.getAttribute("display-font")||this.#t.heading,this.#e=this.getAttribute("preview")||"combined",this.#o(),this.#r()}attributeChangedCallback(t,e,s){e===s||!this.isConnected||(t==="heading-font"&&(this.#t.heading=s||"Playfair Display"),t==="body-font"&&(this.#t.body=s||"Inter"),t==="code-font"&&(this.#t.code=s||"JetBrains Mono"),t==="display-font"&&(this.#t.display=s||this.#t.heading),t==="preview"&&(this.#e=s||"combined"),this.#o(),this.#r())}async#r(){let t=Object.values(this.#t).filter(Boolean).map(e=>{let s=D.find(o=>o.name===e);return re(e,s?.weights||"400;700")});await Promise.all(t),this.#p()}#o(){let t=this.hasAttribute("show-export"),e=this.hasAttribute("show-suggestions"),s="var(--size-m, 1rem)",o="var(--size-s, 0.75rem)",n="var(--size-xs, 0.5rem)",i="var(--radius-m, 0.5rem)",a="var(--color-border, #ddd)",l="var(--color-surface, #fff)",c="var(--color-surface-raised, #f5f5f5)",p="var(--color-text-muted, #666)",u="var(--font-size-sm, 0.875rem)",d="var(--font-size-xs, 0.75rem)",y=`font:inherit;font-size:${u};padding:0.35rem 0.5rem;border:1px solid ${a};border-radius:4px;background:${l}`,b=[{key:"heading",label:"Heading"},{key:"body",label:"Body"},{key:"code",label:"Code"},{key:"display",label:"Display"}].map(E=>`
+      <label style="display:flex;flex-direction:column;gap:3px;flex:1;min-width:9rem;font-size:${d};font-weight:600;color:${p};text-transform:uppercase;letter-spacing:0.04em">
+        ${E.label}
+        <select class="fp-select" data-role="${E.key}" style="${y}">
+          ${this.#i(this.#t[E.key])}
+        </select>
+      </label>
+    `).join(""),h=Object.entries(zt).map(([E,{label:F}])=>`<button type="button" class="fp-tab" data-mode="${E}"
+        style="all:unset;cursor:pointer;font-size:${d};padding:0.3rem 0.75rem;border-radius:999px;${E===this.#e?"background:var(--color-interactive,oklch(55% .2 260));color:white":`border:1px solid ${a}`}">${F}</button>`).join(""),C={heading:`'${this.#t.heading}', serif`,body:`'${this.#t.body}', sans-serif`,code:`'${this.#t.code}', monospace`,display:`'${this.#t.display}', serif`},A=zt[this.#e]?.render(C,this.#s)||"",L=se.map(([E,F])=>`<button type="button" class="fp-suggestion" data-h="${E}" data-b="${F}"
+        style="all:unset;cursor:pointer;font-size:${d};padding:0.3rem 0.5rem;border:1px solid ${a};border-radius:4px;white-space:nowrap;text-align:left;line-height:1.3"
+        title="${E} + ${F}"><strong>${E}</strong><br><span style="color:${p}">${F}</span></button>`).join(""),z=this.#a(),S=`<details class="fp-code-details" style="border:1px solid ${a};border-radius:${i};overflow:hidden"${t?" open":""}>
+      <summary style="padding:${n} ${o};cursor:pointer;font-size:${d};font-weight:600;color:${p};text-transform:uppercase;letter-spacing:0.04em;background:${c}">Code</summary>
+      <div style="padding:${o}">
+        <pre style="font-family:var(--font-mono,monospace);font-size:${d};margin:0;white-space:pre-wrap;word-break:break-all" class="fp-css-output">${z}</pre>
+        <div style="display:flex;gap:${n};margin-block-start:${o}">
+          <button type="button" class="fp-copy-css"
+            style="all:unset;cursor:pointer;font-size:${d};padding:0.3rem 0.65rem;border:1px solid ${a};border-radius:4px;background:${l}">Copy CSS</button>
+          <button type="button" class="fp-copy-import"
+            style="all:unset;cursor:pointer;font-size:${d};padding:0.3rem 0.65rem;border:1px solid ${a};border-radius:4px;background:${l}">Copy @import</button>
+        </div>
+      </div>
+    </details>`,H=`<div style="display:flex;flex-direction:column;gap:${s};flex:1;min-width:0">
+      <div style="display:flex;flex-wrap:wrap;gap:${n}">${b}</div>
+      <div style="display:flex;flex-wrap:wrap;gap:0.375rem;align-items:center">
+        <span style="font-size:${d};font-weight:600;color:${p};text-transform:uppercase;letter-spacing:0.04em;margin-inline-end:${n}">Examples</span>
+        ${h}
+      </div>
+      <div style="display:flex;flex-direction:column;gap:${n}">
+        <span style="font-size:${d};font-weight:600;color:${p};text-transform:uppercase;letter-spacing:0.04em">Preview</span>
+        <div class="fp-preview" style="padding:var(--size-l,1.5rem);background:${c};border-radius:${i};border:1px solid ${a};display:flex;flex-direction:column;gap:${o};max-height:24rem;overflow-y:auto">
+          ${A}
+        </div>
+      </div>
+      ${S}
+    </div>`;e?this.innerHTML=`<div style="display:flex;gap:${s};flex-wrap:wrap">
+        ${H}
+        <aside style="flex:0 0 11rem;display:flex;flex-direction:column;gap:${n}">
+          <span style="font-size:${d};font-weight:600;color:${p};text-transform:uppercase;letter-spacing:0.04em">Pairings</span>
+          <div style="display:flex;flex-direction:column;gap:0.25rem">${L}</div>
+        </aside>
+      </div>`:this.innerHTML=H,this.#l()}#i(t){return["serif","sans-serif","display","monospace"].map(s=>{let n=D.filter(i=>i.category===s).map(i=>`<option value="${i.name}"${i.name===t?" selected":""}>${i.name}</option>`).join("");return`<optgroup label="${s}">${n}</optgroup>`}).join("")}#a(){let t=[],e={heading:"serif",body:"sans-serif",code:"monospace",display:"serif"};for(let[s,o]of Object.entries(e)){let n=this.#t[s];if(!n)continue;let i=D.find(a=>a.name===n);t.push(`--font-${s}: "${n}", ${i?.category||o};`)}return t.join(`
+`)}#n(){let t=new Set,e=[];for(let s of Object.values(this.#t)){if(!s||t.has(s))continue;t.add(s);let o=D.find(n=>n.name===s);e.push(`@import url('${kt(s,o?.weights||"400;700")}');`)}return e.join(`
+`)}#l(){this.querySelectorAll(".fp-select").forEach(t=>{t.addEventListener("change",e=>{let s=e.target;this.#t[s.dataset.role]=s.value,this.#r(),this.#c(),this.#d(),this.#h()})}),this.querySelectorAll(".fp-tab").forEach(t=>{t.addEventListener("click",()=>{let e=t;this.#e=e.dataset.mode||"combined",this.#o(),this.#r()})}),this.querySelectorAll(".fp-suggestion").forEach(t=>{t.addEventListener("click",()=>{let e=t;this.#t.heading=e.dataset.h||"",this.#t.body=e.dataset.b||"",this.#t.display=e.dataset.h||"",this.#o(),this.#r(),this.#h()})}),this.querySelectorAll(".fp-editable").forEach(t=>{let e=t;e.addEventListener("blur",()=>{let s=e.dataset.role;s&&e.textContent.trim()&&(this.#s[s]=e.textContent.trim())})}),this.querySelector(".fp-copy-css")?.addEventListener("click",t=>{w(this.#a(),{button:t.target,announceMessage:"CSS copied"})}),this.querySelector(".fp-copy-import")?.addEventListener("click",t=>{w(this.#n(),{button:t.target,announceMessage:"@import statement copied"})})}#c(){let t=this.querySelector(".fp-preview");if(!t)return;let e={heading:`'${this.#t.heading}', serif`,body:`'${this.#t.body}', sans-serif`,code:`'${this.#t.code}', monospace`,display:`'${this.#t.display}', serif`};t.innerHTML=zt[this.#e]?.render(e,this.#s)||"",t.querySelectorAll(".fp-editable").forEach(s=>{let o=s;o.addEventListener("blur",()=>{let n=o.dataset.role;n&&o.textContent.trim()&&(this.#s[n]=o.textContent.trim())})})}#p(){this.#c(),this.#d()}#d(){let t=this.querySelector(".fp-css-output");t&&(t.textContent=this.#a())}#h(){this.dispatchEvent(new CustomEvent("font-pairer:change",{bubbles:!0,detail:{...this.#t}}))}};f("font-pairer",St);function ne(r,{type:t="linear",angle:e=90,interpolation:s="oklab"}={}){if(r.length<2)return"transparent";let n=[...r].sort((a,l)=>a.position-l.position).map(a=>`${a.color} ${a.position}%`).join(", "),i=s!=="srgb"?` in ${s}`:"";return t==="radial"?`radial-gradient(circle${i}, ${n})`:`linear-gradient(${e}deg${i}, ${n})`}function Ct(r){if(!r)return oe();let t=r.split(",").map(e=>e.trim()).filter(Boolean);return t.length<2?oe():t.map((e,s)=>({color:e,position:Math.round(s/(t.length-1)*100)}))}function oe(){return[{color:"#6366f1",position:0},{color:"#ec4899",position:100}]}var At=class extends m{static observedAttributes=["colors","type","angle","interpolation","show-export","show-controls"];#t=[];#e="linear";#s=90;#r="oklab";setup(){return this.#t=Ct(this.getAttribute("colors")??""),this.#e=this.getAttribute("type")||"linear",this.#s=Number(this.getAttribute("angle"))||90,this.#r=this.getAttribute("interpolation")||"oklab",this.#o(),!0}attributeChangedCallback(t,e,s){e===s||!this.isConnected||(t==="colors"&&(this.#t=Ct(s)),t==="type"&&(this.#e=s||"linear"),t==="angle"&&(this.#s=Number(s)||90),t==="interpolation"&&(this.#r=s||"oklab"),this.#o())}get css(){return ne(this.#t,{type:this.#e,angle:this.#s,interpolation:this.#r})}#o(){let t=this.hasAttribute("show-export"),e=this.getAttribute("show-controls")!=="false",s=this.css,o="var(--size-m, 1rem)",n="var(--size-s, 0.75rem)",i="var(--size-xs, 0.5rem)",a="var(--radius-m, 0.5rem)",l="var(--color-border, #ddd)",c="var(--color-surface, #fff)",p="var(--color-text-muted, #666)",u="var(--font-mono, monospace)",d="var(--font-size-sm, 0.875rem)",y="var(--font-size-xs, 0.75rem)",v=`<div class="gb-preview" style="height:4rem;border-radius:${a};background:${s};border:1px solid ${l}"></div>`,b=`font:inherit;font-size:${d};padding:0.25rem 0.5rem;border:1px solid ${l};border-radius:4px;background:${c}`,h="";e&&(h=`<div style="display:flex;flex-direction:column;gap:${n};font-size:${d}">
+        <div style="display:flex;flex-wrap:wrap;gap:${o};align-items:center">
+          <label style="display:flex;align-items:center;gap:${i}">
+            Type
+            <select class="gb-type" style="${b}">
+              <option value="linear"${this.#e==="linear"?" selected":""}>Linear</option>
+              <option value="radial"${this.#e==="radial"?" selected":""}>Radial</option>
+            </select>
+          </label>
+          <label style="display:flex;align-items:center;gap:${i}${this.#e==="radial"?";opacity:0.4;pointer-events:none":""}">
+            Angle
+            <input type="range" class="gb-angle" min="0" max="360" value="${this.#s}" style="width:8rem;accent-color:var(--color-interactive,oklch(55% .2 260))">
+            <span class="gb-angle-value" style="min-width:2.5em;font-family:${u};font-size:${y}">${this.#s}\xB0</span>
+          </label>
+        </div>
+        <label style="display:inline-flex;align-items:center;gap:${i}">
+          Color Space
+          <select class="gb-space" style="${b}">
+            <option value="oklab"${this.#r==="oklab"?" selected":""}>oklab</option>
+            <option value="oklch"${this.#r==="oklch"?" selected":""}>oklch</option>
+            <option value="srgb"${this.#r==="srgb"?" selected":""}>sRGB</option>
+          </select>
+        </label>
+      </div>`);let A=[...this.#t].map((z,S)=>({...z,origIndex:S})).sort((z,S)=>z.position-S.position).map(z=>{let S=z.origIndex;return`<div style="display:flex;align-items:center;gap:0.375rem" data-stop="${S}">
+        <input type="color" value="${z.color}" class="gb-stop-color" data-i="${S}"
+          style="width:1.75rem;height:1.75rem;padding:0;border:1px solid ${l};border-radius:4px;cursor:pointer;flex-shrink:0">
+        <input type="range" min="0" max="100" value="${z.position}" class="gb-stop-pos-range" data-i="${S}"
+          style="flex:1;min-width:3rem;max-width:8rem;accent-color:${z.color}">
+        <span style="font-family:${u};font-size:${y};min-width:2.5em;text-align:right" class="gb-stop-pos-label" data-i="${S}">${z.position}%</span>
+        ${this.#t.length>2?`<button type="button" class="gb-remove" data-i="${S}"
+          style="all:unset;cursor:pointer;font-size:1rem;color:${p};padding:0 0.25rem" title="Remove stop">&times;</button>`:""}
+      </div>`}).join(""),L=`<button type="button" class="gb-add"
+      style="all:unset;cursor:pointer;font-size:${d};color:var(--color-interactive,oklch(55% .2 260));font-weight:600">+ Add Stop</button>`;this.innerHTML=`
+      <div style="display:flex;flex-direction:column;gap:${o}">
+        ${v}
+        ${h}
+        <div style="display:flex;flex-direction:column;gap:${i}">
+          <span style="font-size:${y};font-weight:600;color:${p};text-transform:uppercase;letter-spacing:0.05em">Color Stops</span>
+          ${A}
+          ${L}
+        </div>
+        <div style="display:flex;flex-direction:column;gap:${i}">
+          <span style="font-size:${y};font-weight:600;color:${p};text-transform:uppercase;letter-spacing:0.05em">Code</span>
+          <div style="display:flex;align-items:start;gap:${i}">
+            <div style="flex:1;font-family:${u};font-size:${y};padding:${n};background:var(--color-surface-raised,#f5f5f5);border-radius:${a};word-break:break-all;color:var(--color-text,#222)" class="gb-css-output">${s}</div>
+            ${t?`<button type="button" class="gb-copy"
+              style="all:unset;cursor:pointer;font-size:${y};padding:0.35rem 0.75rem;border:1px solid ${l};border-radius:4px;background:${c};white-space:nowrap;flex-shrink:0">Copy CSS</button>`:""}
+          </div>
+        </div>
+      </div>
+    `,this.#i()}#i(){this.querySelector(".gb-type")?.addEventListener("change",s=>{let o=s.target;this.#e=o.value,this.#o(),this.#n()});let t=this.querySelector(".gb-angle"),e=this.querySelector(".gb-angle-value");t?.addEventListener("input",s=>{let o=s.target;this.#s=Number(o.value),e&&(e.textContent=`${this.#s}\xB0`);let n=this.querySelector(".gb-preview");n&&(n.style.background=this.css),this.#n()}),this.querySelector(".gb-space")?.addEventListener("change",s=>{let o=s.target;this.#r=o.value,this.#o(),this.#n()}),this.querySelectorAll(".gb-stop-color").forEach(s=>{s.addEventListener("input",o=>{let n=o.target,i=Number(n.dataset.i);this.#t[i].color=n.value,this.#a(),this.#n()})}),this.querySelectorAll(".gb-stop-pos-range").forEach(s=>{s.addEventListener("input",o=>{let n=o.target,i=Number(n.dataset.i),a=Math.max(0,Math.min(100,Number(n.value)||0));this.#t[i].position=a;let l=this.querySelector(`.gb-stop-pos-label[data-i="${i}"]`);l&&(l.textContent=`${a}%`),this.#a(),this.#n()})}),this.querySelectorAll(".gb-remove").forEach(s=>{s.addEventListener("click",o=>{let n=o.target,i=Number(n.dataset.i);this.#t.splice(i,1),this.#o(),this.#n()})}),this.querySelector(".gb-add")?.addEventListener("click",()=>{let s=this.#t[this.#t.length-1],o=this.#t[this.#t.length-2],n=Math.round((o.position+s.position)/2);this.#t.splice(this.#t.length-1,0,{color:"#888888",position:n}),this.#o(),this.#n()}),this.querySelector(".gb-copy")?.addEventListener("click",s=>{let o=s.target;o&&w(this.css,{button:o,announceMessage:"Gradient CSS copied"})})}#a(){let t=this.css,e=this.querySelector(".gb-preview");e&&(e.style.background=t);let s=this.querySelector(".gb-css-output");s&&(s.textContent=t)}#n(){this.dispatchEvent(new CustomEvent("gradient-builder:change",{bubbles:!0,detail:{css:this.css,stops:[...this.#t],type:this.#e,angle:this.#s,interpolation:this.#r}}))}};f("gradient-builder",At);var ae="com.vanilla-breeze";function J(r){let t=[],e=[],s=r&&typeof r=="object"?r:{};return le(s,[],void 0,s,t,e),{tokens:t,ignored:e,stats:{applied:t.length,ignored:e.length}}}function le(r,t,e,s,o,n){if(!r||typeof r!="object")return;if("$value"in r){us(r,t,e??r.$type,s,o,n);return}if(ps(r)){hs(r,t,e??r.$type??"color",s,o,n);return}let i=r.$type??e;for(let[a,l]of Object.entries(r))a.startsWith("$")||le(l,[...t,a],i,s,o,n)}function ps(r){return["$root","light","dark"].some(e=>r[e]&&typeof r[e]=="object"&&"$value"in r[e])}function Et(r){let[t,e,...s]=r;switch(t){case"color":{if(e==="seeds")return s.length?`--${s.join("-")}`:null;let o=[e,...s].filter(Boolean).join("-");return o?`--color-${o}`:null}case"typography":{let o=s.join("-")||e,n=s.length?s.join("-"):"";switch(e){case"family":return n?`--font-${n}`:null;case"size":return n?`--font-size-${n}`:null;case"weight":return n?`--font-weight-${n}`:null;case"lineHeight":return n?`--line-height-${n}`:null;case"letterSpacing":return n?`--letter-spacing-${n}`:null;default:return null}let i=o}case"spacing":return[e,...s].filter(Boolean).length?`--size-${[e,...s].filter(Boolean).join("-")}`:null;case"border":{let o=s.join("-")||"";return e==="radius"?o?`--radius-${o}`:null:e==="width"&&o?`--border-width-${o}`:null}case"motion":{let o=s.join("-")||"";return e==="duration"?o?`--duration-${o}`:null:e==="easing"&&o?`--ease-${o}`:null}case"effect":{let o=s.join("-")||"";return e==="shadow"&&o?`--shadow-${o}`:null}default:return null}}function us(r,t,e,s,o,n){if((e==="typography"||r.$type==="typography")&&r.$value&&typeof r.$value=="object"&&!Array.isArray(r.$value)&&t[0]==="typography"){xs(r,t,o);return}let i=Et(t);if(!i){n.push(t.join("."));return}let a=e??ms(t),l=r.$extensions&&r.$extensions[ae]||{};if(l.expression){o.push([i,l.expression]);return}if(l.lightDark){o.push([i,l.lightDark]);return}let c=G(r.$value,a,l,s);if(c==null){n.push(t.join("."));return}o.push([i,c])}function ms(r){let[t,e]=r;if(t==="color")return"color";if(t==="spacing"||t==="border"&&(e==="radius"||e==="width"))return"dimension";if(t==="motion"&&e==="duration")return"duration";if(t==="motion"&&e==="easing")return"cubicBezier";if(t==="effect"&&e==="shadow")return"shadow";if(t==="typography"){if(e==="family")return"fontFamily";if(e==="size")return"dimension";if(e==="weight")return"fontWeight";if(e==="lineHeight")return"number";if(e==="letterSpacing")return"dimension"}}function hs(r,t,e,s,o,n){let i=Et(t);if(!i){n.push(t.join("."));return}let a=r.$extensions&&r.$extensions[ae]||{};if(a.lightDark){o.push([i,a.lightDark]);return}let l=r.light?.$value?G(r.light.$value,e,{},s):null,c=r.dark?.$value?G(r.dark.$value,e,{},s):null,p=r.$root?.$value?G(r.$root.$value,e,{},s):null;if(l&&c){o.push([i,`light-dark(${l}, ${c})`]);return}if(p){o.push([i,p]);return}if(l){o.push([i,l]);return}if(c){o.push([i,c]);return}n.push(t.join("."))}function G(r,t,e,s){if(typeof r=="string"&&/^\{[^}]+\}$/.test(r)){let o=r.slice(1,-1).split("."),n=Et(o);return n?`var(${n})`:r}switch(t){case"color":return ce(r,e);case"fontFamily":return de(r);case"fontWeight":return String(r);case"number":return ys(r,e);case"dimension":return N(r,e);case"duration":return bs(r);case"cubicBezier":return Array.isArray(r)?`cubic-bezier(${r.join(", ")})`:null;case"shadow":return vs(r);default:return typeof r=="string"||typeof r=="number"?String(r):null}}function ce(r,t){if(!r||typeof r!="object")return null;if(r.hex)return r.hex;if(r.colorSpace==="oklch"){let[e,s,o]=r.components||[0,0,0],n=r.alpha!=null?` / ${r.alpha}`:"";return`oklch(${e} ${s} ${o}${n})`}if(r.colorSpace==="srgb"){let[e,s,o]=r.components||[0,0,0],n=r.alpha;return n!=null?`rgba(${Math.round(e*255)}, ${Math.round(s*255)}, ${Math.round(o*255)}, ${n})`:fs(e,s,o)}return null}function fs(r,t,e){let s=o=>Math.round(o*255).toString(16).padStart(2,"0");return`#${s(r)}${s(t)}${s(e)}`}var gs=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","math","emoji","fangsong","-apple-system","BlinkMacSystemFont"]);function de(r){return typeof r=="string"?r:Array.isArray(r)?r.map(t=>gs.has(t)||t.startsWith('"')||t.startsWith("'")?t:`"${t}"`).join(", "):null}function ys(r,t){return t.unit==="%"?`${r}%`:String(r)}function N(r,t){if(!r||typeof r!="object")return null;let e=t.unit||r.unit||"px";return`${r.value}${e}`}function bs(r){return!r||typeof r!="object"?null:`${r.value}${r.unit||"ms"}`}function vs(r){return Array.isArray(r)?r.map(ie).filter(Boolean).join(", "):ie(r)}function ie(r){if(!r)return null;let t=N(r.offsetX,{})??"0px",e=N(r.offsetY,{})??"0px",s=N(r.blur,{})??"0px",o=r.spread?" "+N(r.spread,{}):"",n=ce(r.color,{})??"#000";return`${t} ${e} ${s}${o} ${n}`}function xs(r,t,e){let s=r.$value,o=t[t.length-1];s.fontFamily!=null&&e.push([`--font-${o}`,de(s.fontFamily)]),s.fontSize!=null&&e.push([`--font-size-${o}`,N(s.fontSize,{})]),s.fontWeight!=null&&e.push([`--font-weight-${o}`,String(s.fontWeight)]),s.lineHeight!=null&&e.push([`--line-height-${o}`,String(s.lineHeight)]),s.letterSpacing!=null&&e.push([`--letter-spacing-${o}`,N(s.letterSpacing,{})])}var Tt=class extends m{static observedAttributes=["target","placeholder"];setup(){this.#e(),this.#r()}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&(this.#e(),this.#r())}#t(){let t=this.getAttribute("target")||"#preview";try{return document.querySelector(t)}catch{return null}}#e(){let t=this.getAttribute("placeholder")||"Paste DTCG tokens.json here\u2026",e="padding:0.375rem 0.75rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#222);cursor:pointer;font:inherit;font-size:var(--font-size-xs,0.75rem)",s="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)",o="inline-size:100%;block-size:10rem;padding:var(--size-s,0.75rem);border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface-sunken,#f8f8f8);color:var(--color-text,#222);font-family:var(--font-mono,monospace);font-size:var(--font-size-xs,0.75rem);white-space:pre;overflow:auto;tab-size:2;resize:vertical;box-sizing:border-box",n="display:flex;flex-wrap:wrap;gap:var(--size-2xs,0.375rem);align-items:center;margin-block-end:var(--size-s,0.5rem)",i="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666)";this.innerHTML=`
+      <div class="ti-modes" role="tablist" aria-label="Import source" style="${n}">
+        <button type="button" class="ti-mode" data-mode="paste" style="${e}" role="tab" aria-selected="true">Paste</button>
+        <button type="button" class="ti-mode" data-mode="file"  style="${e}" role="tab" aria-selected="false">File</button>
+        <button type="button" class="ti-mode" data-mode="url"   style="${e}" role="tab" aria-selected="false">URL</button>
+        <span style="${i};margin-inline-start:auto" class="ti-target"></span>
+      </div>
+
+      <div class="ti-pane ti-pane-paste" role="tabpanel">
+        <textarea class="ti-paste" aria-label="DTCG JSON" placeholder="${t}" style="${o}"></textarea>
+        <div style="${n};margin-block-start:var(--size-2xs,0.375rem)">
+          <button type="button" class="ti-apply-paste" style="${e}">Apply</button>
+        </div>
+      </div>
+
+      <div class="ti-pane ti-pane-file" role="tabpanel" hidden>
+        <label style="display:flex;flex-direction:column;gap:var(--size-2xs,0.375rem);${i}">
+          <span>DTCG file (.tokens.json or .json)</span>
+          <input class="ti-file" type="file" accept=".json,.tokens,.tokens.json,application/json,application/design-tokens+json" style="${s}">
+        </label>
+      </div>
+
+      <div class="ti-pane ti-pane-url" role="tabpanel" hidden>
+        <label style="display:flex;flex-direction:column;gap:var(--size-2xs,0.375rem);${i}">
+          <span>DTCG URL (CORS-permitted host)</span>
+          <input class="ti-url" type="url" placeholder="https://example.com/theme.tokens.json" style="${s}">
+        </label>
+        <div style="${n};margin-block-start:var(--size-2xs,0.375rem)">
+          <button type="button" class="ti-apply-url" style="${e}">Fetch &amp; apply</button>
+        </div>
+      </div>
+
+      <output class="ti-result" style="display:block;margin-block-start:var(--size-s,0.5rem);${i}"></output>
+
+      <details class="ti-ignored" style="margin-block-start:var(--size-2xs,0.375rem)" hidden>
+        <summary style="${i};cursor:pointer">Ignored tokens</summary>
+        <ul class="ti-ignored-list" style="margin:var(--size-2xs,0.375rem) 0 0;padding-inline-start:1.25rem;${i}"></ul>
+      </details>
+
+      <div style="${n};margin-block-start:var(--size-s,0.5rem)">
+        <button type="button" class="ti-reset" style="${e}">Reset preview scope</button>
+      </div>
+    `,this.#s()}#s(){let t=this.querySelector(".ti-target");if(!t)return;let e=this.getAttribute("target")||"#preview",s=this.#t();t.textContent=s?`Target: ${e}`:`Target ${e} not found`}#r(){for(let n of this.querySelectorAll(".ti-mode"))this.listen(n,"click",()=>this.#o(n.dataset.mode||"paste"));let t=this.querySelector(".ti-apply-paste");t&&this.listen(t,"click",()=>this.#i());let e=this.querySelector(".ti-file");e&&this.listen(e,"change",()=>this.#a(e));let s=this.querySelector(".ti-apply-url");s&&this.listen(s,"click",()=>this.#n());let o=this.querySelector(".ti-reset");o&&this.listen(o,"click",()=>this.#c())}#o(t){for(let e of this.querySelectorAll(".ti-mode")){let s=e,o=s.dataset.mode===t;s.setAttribute("aria-selected",String(o))}for(let e of this.querySelectorAll(".ti-pane")){let s=e;s.hidden=!s.classList.contains(`ti-pane-${t}`)}}#i(){let t=this.querySelector(".ti-paste");t&&this.#l(t.value,"paste")}async#a(t){let e=t.files?.[0];if(e)try{let s=await e.text();this.#l(s,"file")}catch(s){this.#d(s,"file")}}async#n(){let e=this.querySelector(".ti-url")?.value?.trim();if(e)try{let s=await fetch(e,{mode:"cors"});if(!s.ok)throw new Error(`Fetch failed: ${s.status} ${s.statusText}`);let o=await s.text();this.#l(o,"url")}catch(s){this.#d(s,"url")}}#l(t,e){let s;try{s=JSON.parse(t)}catch(i){this.#d(i,"parse");return}let o=J(s),n=this.#t();if(!n){this.#d(new Error(`Target ${this.getAttribute("target")||"#preview"} not found`),"apply");return}for(let[i,a]of o.tokens)n.style.setProperty(i,a);this.#p(o,e),this.dispatchEvent(new CustomEvent("theme-import:applied",{bubbles:!0,detail:{tokens:o.tokens,applied:o.stats.applied,ignored:o.ignored,source:e}}))}#c(){let t=this.#t();if(!t)return;let e=t.style,s=[];for(let i=0;i<e.length;i++){let a=e.item(i);a.startsWith("--")&&s.push(a)}for(let i of s)e.removeProperty(i);let o=this.querySelector(".ti-result");o&&(o.textContent=`Cleared ${s.length} custom properties from ${this.getAttribute("target")||"#preview"}.`);let n=this.querySelector(".ti-ignored");n&&(n.hidden=!0)}#p(t,e){let s=this.querySelector(".ti-result");s&&(s.textContent=`Applied ${t.stats.applied} token${t.stats.applied===1?"":"s"} from ${e}${t.stats.ignored?` \xB7 ${t.stats.ignored} ignored`:""}.`);let o=this.querySelector(".ti-ignored"),n=this.querySelector(".ti-ignored-list");if(o&&n){let i=o;t.ignored.length===0?(i.hidden=!0,n.innerHTML=""):(i.hidden=!1,n.innerHTML=t.ignored.map(a=>`<li>${$s(a)}</li>`).join(""))}}#d(t,e){let s=this.querySelector(".ti-result");s&&(s.textContent=`Error (${e}): ${t&&t.message?t.message:String(t)}`),this.dispatchEvent(new CustomEvent("theme-import:error",{bubbles:!0,detail:{error:t,phase:e}}))}};function $s(r){return String(r).replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[t])}f("theme-import",Tt);var Mt=class extends m{static observedAttributes=["target","catalog-base"];#t=null;#e="";setup(){this.#o(),this.#a()}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&(this.#o(),this.#a())}#s(){let t=this.getAttribute("target")||"#preview";try{return document.querySelector(t)}catch{return null}}#r(){let t=this.getAttribute("catalog-base");return t?t.replace(/\/$/,""):typeof window<"u"&&window.__VB_CATALOG_BASE?String(window.__VB_CATALOG_BASE).replace(/\/$/,""):"/cdn/themes/catalog"}#o(){let t="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);background:var(--color-surface,#fff);padding:var(--size-m,1rem);display:flex;flex-direction:column;gap:var(--size-2xs,0.375rem);min-block-size:0",e="display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:var(--size-s,0.75rem)",s="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666)",o="margin:0;font-size:var(--font-size-md,1rem);font-weight:600;color:var(--color-text,#222)",n="align-self:flex-start;padding:0.375rem 0.75rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-primary,#0066cc);color:var(--color-text-on-primary,#fff);cursor:pointer;font:inherit;font-size:var(--font-size-xs,0.75rem)",i=`display:inline-block;padding:0.125rem 0.375rem;border-radius:0.25rem;background:var(--color-surface-raised,#f3f3f3);${s};margin-inline-end:0.25rem`;this.innerHTML=`
+      <div class="tc-head" style="display:flex;align-items:baseline;gap:var(--size-s,0.75rem);margin-block-end:var(--size-s,0.75rem);flex-wrap:wrap">
+        <strong style="font-size:var(--font-size-sm,0.875rem)">Start from a known system</strong>
+        <span class="tc-target" style="${s}"></span>
+      </div>
+      <div class="tc-grid" style="${e}" role="list"></div>
+      <output class="tc-result" style="display:block;margin-block-start:var(--size-s,0.75rem);${s}"></output>
+      <p class="tc-attribution" style="margin-block-start:var(--size-2xs,0.375rem);${s}" hidden></p>
+      <details class="tc-ignored" style="margin-block-start:var(--size-2xs,0.375rem)" hidden>
+        <summary style="${s};cursor:pointer">Ignored tokens</summary>
+        <ul class="tc-ignored-list" style="margin:var(--size-2xs,0.375rem) 0 0;padding-inline-start:1.25rem;${s}"></ul>
+      </details>
+      <style>
+        :host ._card { ${t} }
+        :host ._title { ${o} }
+        :host ._btn { ${n} }
+        :host ._tag { ${i} }
+      </style>
+    `,this.#i()}#i(){let t=this.querySelector(".tc-target");if(!t)return;let e=this.getAttribute("target")||"#preview",s=this.#s();t.textContent=s?`Target: ${e}`:`Target ${e} not found`}async#a(){let t=this.querySelector(".tc-grid");if(t)try{let e=await fetch(`${this.#r()}/manifest.json`);if(!e.ok)throw new Error(`Catalog manifest fetch failed: ${e.status}`);let s=await e.json();this.#t=s.entries||[],this.#n()}catch(e){t.innerHTML="";let s=this.querySelector(".tc-result");s&&(s.textContent=`Couldn't load catalog manifest: ${e&&e.message?e.message:String(e)}`)}}#n(){let t=this.querySelector(".tc-grid");if(!t||!this.#t)return;let e="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);background:var(--color-surface,#fff);padding:var(--size-m,1rem);display:flex;flex-direction:column;gap:var(--size-2xs,0.375rem)",s="margin:0;font-size:var(--font-size-md,1rem);font-weight:600;color:var(--color-text,#222)",o="align-self:flex-start;margin-block-start:auto;padding:0.375rem 0.75rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-primary,#0066cc);color:var(--color-text-on-primary,#fff);cursor:pointer;font:inherit;font-size:var(--font-size-xs,0.75rem)",n="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666)",i=`display:inline-block;padding:0.125rem 0.375rem;border-radius:0.25rem;background:var(--color-surface-raised,#f3f3f3);${n};margin-inline-end:0.25rem`;t.innerHTML="";for(let a of this.#t){let l=document.createElement("article");l.setAttribute("role","listitem"),l.setAttribute("data-id",a.id),l.style.cssText=e,l.innerHTML=`
+        <h3 style="${s}">${O(a.name)}</h3>
+        <p style="${n};margin:0">${O(a.summary||"")}</p>
+        <p style="${n};margin:0">License: ${O(a.license)}</p>
+        <p style="margin:0">${(a.tags||[]).map(p=>`<span style="${i}">${O(p)}</span>`).join("")}</p>
+        <button type="button" class="tc-apply" style="${o}" data-id="${pe(a.id)}" aria-label="Apply ${pe(a.name)} tokens">
+          Apply
+        </button>
+      `;let c=l.querySelector("button.tc-apply");c&&this.listen(c,"click",()=>this.#l(a)),t.appendChild(l)}}async#l(t){let e=this.#s();if(!e){this.#p(t.id,new Error(`Target ${this.getAttribute("target")||"#preview"} not found`),"apply");return}try{let s=await fetch(`${this.#r()}/${t.file}`);if(!s.ok)throw new Error(`Fetch failed: ${s.status}`);let o=await s.json(),n=J(o);for(let[i,a]of n.tokens)e.style.setProperty(i,a);this.#c(t,n),this.#e=t.id,this.dispatchEvent(new CustomEvent("theme-catalog:applied",{bubbles:!0,detail:{id:t.id,applied:n.stats.applied,ignored:n.ignored,tokens:n.tokens,source:"catalog"}}))}catch(s){this.#p(t.id,s,"fetch-or-apply")}}#c(t,e){let s=this.querySelector(".tc-result");s&&(s.textContent=`Applied ${e.stats.applied} token${e.stats.applied===1?"":"s"} from ${t.name}${e.stats.ignored?` \xB7 ${e.stats.ignored} ignored`:""}.`);let o=this.querySelector(".tc-attribution");o&&(o.hidden=!1,o.textContent=t.attribution);let n=this.querySelector(".tc-ignored"),i=this.querySelector(".tc-ignored-list");n&&i&&(e.ignored.length===0?(n.hidden=!0,i.innerHTML=""):(n.hidden=!1,i.innerHTML=e.ignored.map(a=>`<li>${O(a)}</li>`).join("")))}#p(t,e,s){let o=this.querySelector(".tc-result");o&&(o.textContent=`Error (${s}): ${e&&e.message?e.message:String(e)}`),this.dispatchEvent(new CustomEvent("theme-catalog:error",{bubbles:!0,detail:{id:t,error:e,phase:s}}))}};function O(r){return String(r).replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[t])}function pe(r){return O(r)}f("theme-catalog",Mt);var Lt=class extends m{static observedAttributes=["src","name","data-sizes"];setup(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}#t(){let t=this.getAttribute("src")||"",e=this.getAttribute("name")||"Brand",s=(this.getAttribute("data-sizes")||"s m l xl").trim().split(/\s+/),o=i=>i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),n=i=>`<brand-mark${t?` src="${o(t)}"`:""} wordmark${i?` data-size="${i}"`:""}>${o(e)}</brand-mark>`;this.innerHTML=`
+      <section class="brand-specimen">
+        <div class="bs-surfaces">
+          <figure data-surface="light">${n("l")}<figcaption>On light</figcaption></figure>
+          <figure data-surface="dark">${n("l")}<figcaption>On dark</figcaption></figure>
+        </div>
+        <div class="bs-scale" data-scale>
+          ${s.map(i=>`<span>${n(i)}<small>${i}</small></span>`).join("")}
+        </div>
+        <div class="bs-clearspace"><span class="bs-clear-box">${n("l")}</span>
+          <figcaption>Clear space</figcaption></div>
+      </section>`}};f("brand-specimen",Lt);var ws=()=>document.documentElement.dataset.iconPath||"/cdn/icons",qt=class extends m{static observedAttributes=["set","names"];#t=null;setup(){this.#s(),this.#e()}attributeChangedCallback(){this.isConnected&&(this.#s(),this.#e())}disconnectedCallback(){this.#t?.disconnect(),this.#t=null,super.disconnectedCallback?.()}get set(){return this.getAttribute("set")||"lucide"}async#e(){let t=this.getAttribute("names"),e=t?t.split(/[\s,]+/).filter(Boolean):null;if(!e)try{e=await(await fetch(`${ws()}/${this.set}.json`)).json()}catch{e=[]}this.#r(e)}#s(){this.innerHTML=`
+      <div class="icon-set">
+        <label class="icon-set__search">
+          <span class="visually-hidden">Filter icons</span>
+          <input type="search" placeholder="Filter ${this.set} icons\u2026">
+        </label>
+        <ul class="icon-set__grid" data-layout="grid" role="list"></ul>
+      </div>`;let t=this.querySelector("input");this.listen(t,"input",e=>this.#o(e.target.value))}#r(t){let e=this.querySelector(".icon-set__grid");if(!e)return;let s=n=>String(n).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");e.innerHTML=t.map(n=>`
+      <li data-icon-name="${s(n)}">
+        <button type="button" title="Copy \u201C${s(n)}\u201D" data-copy="${s(n)}">
+          <span class="icon-set__icon" data-name="${s(n)}"></span>
+          <span>${s(n)}</span>
+        </button>
+      </li>`).join(""),this.listen(e,"click",n=>{let i=n.target.closest("[data-copy]");i&&navigator.clipboard?.writeText(i.dataset.copy??"")});let o=this.set;this.#t?.disconnect(),this.#t=new IntersectionObserver((n,i)=>{for(let a of n){if(!a.isIntersecting)continue;let l=a.target;if(i.unobserve(l),l.firstElementChild)continue;let c=document.createElement("i");c.setAttribute("data-icon",l.dataset.name??""),c.setAttribute("data-icon-set",o),c.setAttribute("aria-hidden","true"),l.appendChild(c)}},{rootMargin:"400px"});for(let n of e.querySelectorAll(".icon-set__icon"))this.#t.observe(n)}#o(t){let e=t.trim().toLowerCase();for(let s of this.querySelectorAll("[data-icon-name]"))s.hidden=!!e&&!(s.dataset.iconName??"").toLowerCase().includes(e)}};f("icon-set",qt);var Nt=class extends m{static observedAttributes=["set","names","data-sizes"];setup(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}get set(){return this.getAttribute("set")||"lucide"}get names(){return(this.getAttribute("names")||"").split(/[\s,]+/).filter(Boolean)}get sizes(){return(this.getAttribute("data-sizes")||"1rem 1.5rem 2rem").trim().split(/\s+/)}#t(){let{set:t,names:e,sizes:s}=this,o=i=>String(i).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),n=i=>s.map(a=>`
+        <td><i data-icon="${o(i)}" data-icon-set="${t}" style="font-size:${a}" aria-hidden="true"></i></td>`).join("");this.innerHTML=`
+      <table class="icon-specimen">
+        <thead>
+          <tr>
+            <th scope="col">Icon</th>
+            ${s.map(i=>`<th scope="col">${i}</th>`).join("")}
+          </tr>
+        </thead>
+        <tbody>
+          ${e.map(i=>`<tr><th scope="row"><code>${i}</code></th>${n(i)}</tr>`).join("")}
+        </tbody>
+      </table>`}};f("icon-specimen",Nt);