vanilla-breeze 0.1.1 → 0.1.2

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

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

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

@@ -0,0 +1,3 @@
+var $=window.matchMedia("(prefers-reduced-motion: reduce)");var p=new Map;function f(o,e,t={}){let s=t.priority??10,r={impl:e,bundle:t.bundle,contract:t.contract,priority:s},n=p.get(o);if(customElements.get(o)){if(!n||n.priority>=s){n&&n.priority===s&&n.impl!==e&&console.warn(`[VB Bundle] Tag <${o}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${t.bundle}".`);return}console.warn(`[VB Bundle] Tag <${o}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${t.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=s){n.priority===s&&console.warn(`[VB Bundle] Tag <${o}> already registered by "${n.bundle}". Skipping "${t.bundle}" (first wins at equal priority).`);return}p.set(o,r),customElements.define(o,e)}var a=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,t,s,r){e.addEventListener(t,s,r),this.#e.push(()=>e.removeEventListener(t,s,r))}setup(){}teardown(){}};var d=class extends a{setup(){let e=this.getAttribute("data-lens-src")||this.getAttribute("src");e?this.#e(e).catch(()=>{}):this.#n()}async#e(e){let t;try{let r=await fetch(e);if(!r.ok)throw new Error(`status ${r.status}`);t=await r.json()}catch(r){this.#o(`Could not load ${e}: ${r.message}`);return}let s=Array.isArray(t)?t:t.pages||[];this.#r(s),this.#n()}#r(e){let t={name:"root",children:new Map,pages:[]};for(let r of e){let n=r.topic?r.topic.split(".").filter(Boolean):["Uncategorized"],c=t;for(let i of n)c.children.has(i)||c.children.set(i,{name:i,children:new Map,pages:[]}),c=c.children.get(i);c.pages.push(r)}let s=this.hasAttribute("expand-all");this.innerHTML=`<h2 class="topic-map-heading">Topics <small>(${e.length} pages)</small></h2>`+this.#t(t,"",s,0)}#t(e,t,s,r){let n=[];for(let[c,i]of[...e.children.entries()].sort()){let u=t?`${t}.${c}`:c,b=g(i),y=s||r<1?" open":"";if(n.push(`<details${y} data-topic-node="${m(u)}">`),n.push(`<summary><span class="topic-name">${h(c)}</span> <span class="topic-count">${b.length}</span></summary>`),i.pages.length){n.push('<ul class="topic-pages">');for(let l of i.pages)n.push(`<li><a href="${m(l.url)}">${h(l.title||l.url)}</a></li>`);n.push("</ul>")}i.children.size&&n.push(this.#t(i,u,s,r+1)),n.push("</details>")}return n.join(`
+`)}#o(e){if(this.children.length>0)return;let t=document.createElement("p");t.setAttribute("data-topic-map-error",""),t.textContent=e,this.append(t)}#n(){}};function g(o){let e=[...o.pages];for(let t of o.children.values())e.push(...g(t));return e}function h(o){return String(o??"").replace(/[&<>]/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;"})[e])}function m(o){return String(o??"").replace(/[&<>"]/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[e])}f("topic-map",d);export{d as TopicMap};
+//# sourceMappingURL=topic-map.js.map

package/dist/cdn/components/trust-filter.js

@@ -0,0 +1,4 @@
+var m=window.matchMedia("(prefers-reduced-motion: reduce)");var d=new Map;function f(r,n,e={}){let t=e.priority??10,o={impl:n,bundle:e.bundle,contract:e.contract,priority:t},s=d.get(r);if(customElements.get(r)){if(!s||s.priority>=t){s&&s.priority===t&&s.impl!==n&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${r}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=t){s.priority===t&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${s.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}d.set(r,o),customElements.define(r,n)}var c=class extends HTMLElement{#t=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let n of this.#t)n();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(n,e,t,o){n.addEventListener(e,t,o),this.#t.push(()=>n.removeEventListener(e,t,o))}setup(){}teardown(){}};var u=class extends c{#t=[];#e={provenance:new Set,review:new Set,status:new Set,signed:new Set};setup(){let n=this.getAttribute("data-lens-src")||this.getAttribute("src");if(!n){this.#r("No data source \u2014 set data-lens-src or src to a pages.json URL.");return}this.#o(n).catch(()=>{})}async#o(n){let e;try{let t=await fetch(n);if(!t.ok)throw new Error(`status ${t.status}`);e=await t.json()}catch(t){this.#r(`Could not load ${n}: ${t.message}`);return}this.#t=Array.isArray(e)?e:e.pages||[],this.#i(),this.#n()}#i(){let n=[{key:"provenance",label:"How was it made",values:this.#s("provenance")},{key:"review",label:"Review",values:this.#s("review")},{key:"status",label:"Status",values:this.#s("status")},{key:"signed",label:"Signed",values:["yes","no"]}],e=['<form data-trust-filter-controls aria-label="Filter pages">'];for(let t of n)if(t.values.length!==0){e.push(`<fieldset data-dim="${t.key}"><legend>${a(t.label)}</legend>`);for(let o of t.values){let s=`tf-${t.key}-${h(o)}`;e.push(`<label for="${s}"><input type="checkbox" id="${s}" data-dim="${l(t.key)}" value="${l(o)}"> <span>${a(p(o))}</span></label>`)}e.push("</fieldset>")}e.push('<button type="reset" class="ghost">Clear all</button>'),e.push("</form>"),e.push('<output data-trust-filter-results aria-live="polite"></output>'),this.innerHTML=e.join(`
+`),this.querySelector("form").addEventListener("change",t=>{if(t.target.matches('input[type="checkbox"]')){let o=t.target.getAttribute("data-dim"),s=t.target.value,i=this.#e[o];t.target.checked?i.add(s):i.delete(s),this.#n()}}),this.querySelector("form").addEventListener("reset",()=>{for(let t of Object.values(this.#e))t.clear();setTimeout(()=>this.#n(),0)})}#s(n){let e=new Set;for(let t of this.#t){let o=t[n];if(o)if(n==="provenance")for(let s of String(o).split(/\s+/).filter(Boolean))e.add(s);else e.add(o)}return[...e].sort()}#a(n){if(this.#e.provenance.size&&!(n.provenance||"").split(/\s+/).filter(Boolean).some(t=>this.#e.provenance.has(t))||this.#e.review.size&&!this.#e.review.has(n.review)||this.#e.status.size&&!this.#e.status.has(n.status))return!1;if(this.#e.signed.size){let e=this.#e.signed,t=!!n.signed;if(e.has("yes")&&!t||e.has("no")&&t)return!1;e.has("yes")&&e.has("no")}return!0}#n(){let n=this.querySelector("[data-trust-filter-results]");if(!n)return;let e=this.#t.filter(s=>this.#a(s)),t=[];if(t.push(`<p class="trust-filter-count">${e.length} of ${this.#t.length} pages</p>`),e.length){t.push('<ul class="trust-filter-list">');for(let s of e){let i=[s.provenance?`<span class="trust-filter-prov" data-provenance="${l(s.provenance)}">${a(s.provenance)}</span>`:"",s.review&&s.review!=="unreviewed"?`<span>${a(s.review)}</span>`:"",s.status&&s.status!=="published"?`<span>${a(s.status)}</span>`:"",s.signed?'<span class="trust-filter-signed">signed</span>':""].filter(Boolean).join(" \xB7 ");t.push(`<li><a href="${l(s.url)}">${a(s.title||s.url)}</a>${i?`<small>${i}</small>`:""}</li>`)}t.push("</ul>")}n.innerHTML=t.join(`
+`);let o={};for(let[s,i]of Object.entries(this.#e))o[s]=[...i];this.dispatchEvent(new CustomEvent("trust-filter:change",{detail:{selected:o,count:e.length},bubbles:!0}))}#r(n){let e=document.createElement("p");e.setAttribute("data-trust-filter-error",""),e.textContent=n,this.innerHTML="",this.append(e)}};function a(r){return String(r??"").replace(/[&<>]/g,n=>({"&":"&amp;","<":"&lt;",">":"&gt;"})[n])}function l(r){return String(r??"").replace(/[&<>"]/g,n=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[n])}function h(r){return String(r).toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,"")}function p(r){return String(r).replace(/-/g," ").replace(/\b\w/g,n=>n.toUpperCase())}f("trust-filter",u);export{u as TrustFilter};
+//# sourceMappingURL=trust-filter.js.map

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

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

package/dist/cdn/components/watch-wc.js

@@ -0,0 +1,3 @@
+var mt=Object.defineProperty;var O=(n,t)=>()=>(n&&(t=n(n=0)),t);var gt=(n,t)=>{for(var e in t)mt(n,e,{get:t[e],enumerable:!0})};function yt(){let n=globalThis.localStorage;if(!n)throw new Error("VBStore: localStorage is not available in this environment");return{async getRaw(t){return n.getItem(t)},async setRaw(t,e){n.setItem(t,e)},async removeRaw(t){n.removeItem(t)},async keys(t){let e=[];for(let i=0;i<n.length;i++){let o=n.key(i);o&&o.startsWith(t)&&e.push(o)}return e}}}function m(){return L||(L=yt()),L}function M(n,t){if(typeof n!="string"||!n)throw new TypeError("VBStore: namespace must be a non-empty string");if(typeof t!="string"||!t)throw new TypeError("VBStore: key must be a non-empty string");return`vb:${n}:${t}`}function Q(n){if(typeof n!="string"||!n)throw new TypeError("VBStore: namespace must be a non-empty string");return`vb:${n}:`}function Z(n){try{let t=JSON.parse(n);if(t&&typeof t=="object"&&typeof t.timestamp=="number")return t}catch{}return null}var L,y,H=O(()=>{L=null;y={configure(n={}){L=n.backend??null},async set(n,t,e){let i={data:e,timestamp:Date.now()};await m().setRaw(M(n,t),JSON.stringify(i))},async get(n,t,e){let i=await m().getRaw(M(n,t));if(i==null)return null;let o=Z(i);return!o||e?.maxAge!=null&&Date.now()-o.timestamp>e.maxAge?null:o.data},async remove(n,t){await m().removeRaw(M(n,t))},async list(n){let t=Q(n),e=await m().keys(t),i=[];for(let o of e){let s=await m().getRaw(o);if(s==null)continue;let r=Z(s);r&&i.push({key:o.slice(t.length),data:r.data,timestamp:r.timestamp})}return i},async clear(n){let t=Q(n),e=await m().keys(t);for(let i of e)await m().removeRaw(i)},async clearAll(){let n=await m().keys("vb:");for(let t of n)await m().removeRaw(t)},async setMany(n,t){for(let[e,i]of t)await y.set(n,e,i)}}});function bt(n,t){if(!t)return n;let e=n??new URLSearchParams;for(let[i,o]of Object.entries(t))o!=null&&e.set(i,String(o));return e}async function wt(n){if((n.headers.get("content-type")??"").includes("application/json"))try{return await n.json()}catch{return null}try{return await n.text()}catch{return null}}function tt(n){return n.endsWith("/")?n.slice(0,-1):n}var p,S,C,et=O(()=>{p={baseUrl:"/go",headers:{},services:{}},S=class extends Error{constructor(t,e,i,o){super(`VBService(${i}): ${t} ${o}`),this.name="VBServiceError",this.status=t,this.body=e,this.role=i,this.path=o}};C=class n{static configure(t={}){p={baseUrl:t.baseUrl??p.baseUrl,headers:{...p.headers,...t.headers??{}},services:{...p.services,...t.services??{}}}}static resolve(t){if(!t||typeof t!="string")throw new TypeError("VBService: role must be a non-empty string");return p.services[t]?tt(p.services[t]):p.baseUrl?`${tt(p.baseUrl)}/${t}`:`/go/${t}`}static _reset(){p={baseUrl:"/go",headers:{},services:{}}}constructor(t){if(!t||typeof t!="string")throw new TypeError("VBService: role must be a non-empty string");this.role=t}async get(t,e){return this.#t("GET",t,{params:e})}async post(t,e){return this.#t("POST",t,{body:e})}async patch(t,e){return this.#t("PATCH",t,{body:e})}async delete(t){return this.#t("DELETE",t,{})}async#t(t,e,i){let o=n.resolve(this.role),s=e?e.startsWith("/")?e:`/${e}`:"",r=new URL(`${o}${s}`,globalThis.location?.origin??"http://localhost"),d=bt(r.searchParams,i.params);d&&(r.search=d.toString());let a={method:t,headers:{...p.headers}};i.body!==void 0&&(a.body=JSON.stringify(i.body),a.headers["content-type"]="application/json");let c=r.toString(),l=await fetch(c,a),f=await wt(l);if(!l.ok)throw new S(l.status,f,this.role,`${s||"/"}`);return f}}});function $(n){let t=2166136261;for(let e=0;e<n.length;e++)t^=n.charCodeAt(e),t=Math.imul(t,16777619);return(t>>>0).toString(36)}function St(){return"hn-"+crypto.randomUUID().slice(0,8)}function rt(n,t){return getComputedStyle(n).getPropertyValue(`--highlight-${t}`).trim()}function Ct(n){if(E){k++;return}E=new CSSStyleSheet;let t=n.map(e=>`::highlight(hn-${e}) { background-color: var(--highlight-${e}); text-decoration-line: underline; text-decoration-color: var(--highlight-${e}); text-underline-offset: 2px; }`).join(`
+`);E.replaceSync(t),document.adoptedStyleSheets=[...document.adoptedStyleSheets,E],k=1}function At(){k--,k<=0&&E&&(document.adoptedStyleSheets=document.adoptedStyleSheets.filter(n=>n!==E),E=null,k=0)}function kt(){return h||(h=document.createElement("div"),h.className="hn-toolbar",h.setAttribute("role","toolbar"),h.setAttribute("aria-label","Highlight tools"),h.setAttribute("popover","auto"),h.hidden=!0,document.body.appendChild(h),h.addEventListener("toggle",n=>{n.newState==="closed"&&(h.hidden=!0,R=null)}),h)}function I(n,t,e){let i=kt();i.innerHTML="",R=t;let o=t.colors,s=t.element,r=e?.color,d=document.createElement("div");if(d.className="hn-swatches",d.setAttribute("role","group"),d.setAttribute("aria-label","Highlight colors"),o.forEach((a,c)=>{let l=document.createElement("button");l.type="button",l.className="hn-swatch",l.dataset.color=a,l.setAttribute("aria-label",`Highlight ${a}${r===a?" (current)":""}`),l.setAttribute("tabindex",c===0?"0":"-1");let f=rt(s,a);f&&(l.style.backgroundColor=f),r===a&&l.setAttribute("aria-pressed","true"),l.addEventListener("click",()=>{e?t._changeColor(e.id,a):t._createFromSelection(a),A()}),d.appendChild(l)}),i.appendChild(d),e){let a=document.createElement("span");a.className="hn-separator",a.setAttribute("aria-hidden","true"),i.appendChild(a);let c=document.createElement("button");c.type="button",c.className="hn-action",c.textContent=e.note?"Edit Note":"Add Note",c.addEventListener("click",()=>{at(t,e),A()}),i.appendChild(c);let l=document.createElement("button");l.type="button",l.className="hn-action hn-action-remove",l.textContent="Remove",l.addEventListener("click",()=>{t.removeHighlight(e.id),A()}),i.appendChild(l)}d.addEventListener("keydown",a=>{let c=[...d.querySelectorAll("button")],l=c.indexOf(document.activeElement);if(l<0)return;let f=-1;if(a.key==="ArrowRight"||a.key==="ArrowDown")a.preventDefault(),f=(l+1)%c.length;else if(a.key==="ArrowLeft"||a.key==="ArrowUp")a.preventDefault(),f=(l-1+c.length)%c.length;else if(a.key==="Escape"){A();return}f>=0&&(c[l].setAttribute("tabindex","-1"),c[f].setAttribute("tabindex","0"),c[f].focus())}),i.hidden=!1;try{i.showPopover()}catch{}xt(n),requestAnimationFrame(()=>{let a=i.querySelector(".hn-swatch");a&&a.focus()})}function at(n,t){v();let e=n.element,i=w(e,t.startOffset,t.endOffset);if(!i)return;u=document.createElement("div"),u.className="hn-note-panel",u.setAttribute("role","dialog"),u.setAttribute("aria-label","Private note");let o=document.createElement("header");o.className="hn-note-header",o.innerHTML="<small>PRIVATE NOTE</small>",u.appendChild(o);let s=document.createElement("blockquote");s.className="hn-note-quote",s.textContent=t.text.length>80?t.text.slice(0,80)+"\u2026":t.text,u.appendChild(s);let r=document.createElement("textarea");r.className="hn-note-textarea",r.placeholder="Add a note\u2026",r.value=t.note||"",r.rows=3,r.setAttribute("aria-label","Note for highlighted text"),u.appendChild(r);let d=document.createElement("footer");d.className="hn-note-actions";let a=document.createElement("button");a.type="button",a.className="hn-action hn-action-save",a.textContent="Save",a.addEventListener("click",()=>{n._updateNote(t.id,r.value.trim()),v()});let c=document.createElement("button");c.type="button",c.className="hn-action",c.textContent="Cancel",c.addEventListener("click",()=>v()),d.append(a,c),u.appendChild(d),r.addEventListener("keydown",g=>{g.key==="Escape"&&(g.preventDefault(),v()),g.key==="Enter"&&(g.metaKey||g.ctrlKey)&&(g.preventDefault(),n._updateNote(t.id,r.value.trim()),v())}),e.style.position="relative",e.appendChild(u);let l=i.getClientRects()[0],f=e.getBoundingClientRect();if(l){let g=l.top-f.top;u.style.top=`${g}px`}requestAnimationFrame(()=>{r.focus(),document.addEventListener("pointerdown",ct)})}function ct(n){u&&!u.contains(n.target)&&v()}function v(){u&&(document.removeEventListener("pointerdown",ct),u.remove(),u=null)}function xt(n){h&&requestAnimationFrame(()=>{let t=h.getBoundingClientRect(),e=t.width||200,i=t.height||40,o=n.top-i-it,s=n.left+n.width/2-e/2;o<P&&(o=n.bottom+it);let r=window.innerWidth-e-P;s=Math.max(P,Math.min(s,r)),h.style.top=`${o}px`,h.style.left=`${s}px`})}function A(){if(h){try{h.hidePopover()}catch{}h.hidden=!0,R=null}}function q(n){b||(b=document.createElement("div"),b.setAttribute("aria-live","polite"),b.setAttribute("aria-atomic","true"),b.className="hn-sr-only",document.body.appendChild(b)),b.textContent="",requestAnimationFrame(()=>{b.textContent=n})}function ot(n,t,e){let i=document.createTreeWalker(n,NodeFilter.SHOW_TEXT),o=0;for(;i.nextNode();){if(i.currentNode===t)return o+e;o+=(i.currentNode.textContent??"").length}return-1}function w(n,t,e){let i=document.createTreeWalker(n,NodeFilter.SHOW_TEXT),o=0,s=null,r=0,d=null,a=0;for(;i.nextNode();){let c=i.currentNode,l=(c.textContent??"").length;if(!s&&o+l>t&&(s=c,r=t-o),o+l>=e){d=c,a=e-o;break}o+=l}if(!s||!d)return null;try{let c=document.createRange();return c.setStart(s,Math.min(r,(s.textContent??"").length)),c.setEnd(d,Math.min(a,(d.textContent??"").length)),c}catch{return null}}function _(n){if(D.has(n))return D.get(n);let t=new F(n);return D.set(n,t),t}function st(n=document){n.querySelectorAll(W).forEach(t=>{t.hasAttribute("data-highlights-init")||_(t)})}var W,nt,vt,it,P,Et,E,k,h,R,u,b,F,D,Nt,lt=O(()=>{H();W="[data-highlights]",nt="highlights",vt=["yellow","green","blue","pink"],it=8,P=8,Et=typeof CSS<"u"&&"highlights"in CSS;E=null,k=0;h=null,R=null;u=null;b=null;F=class{#t;#s;#n;#r;#e=[];#c=!Et;#l;#d;#h=!1;#u=[];constructor(t){this.#t=t,this.#r=t.hasAttribute("data-highlights-readonly");let e=t.dataset.highlights;this.#s=e&&e!==""?e:location.pathname;let i=t.dataset.highlightsColors;this.#n=i?i.split(",").map(o=>o.trim()).filter(Boolean):[...vt],this.#c||Ct(this.#n),this.#o(),this.#r||(this.#l=this.#m.bind(this),this.#d=this.#g.bind(this),t.addEventListener("pointerup",this.#l),t.addEventListener("click",this.#d)),t.setAttribute("data-highlights-init",""),this.#b().then(()=>{this.#h||this.#o()})}get colors(){return[...this.#n]}get element(){return this.#t}getHighlights(){return this.#e.map(t=>({...t}))}removeHighlight(t){let e=this.#e.findIndex(i=>i.id===t);e<0||(this.#e.splice(e,1),this.#i(),this.#o(),this.#a("highlights:removed",{id:t}),q("Highlight removed"))}clearAll(){this.#e=[],this.#i(),this.#o()}exportHighlights(){return JSON.stringify({version:1,highlights:this.#e})}importHighlights(t){try{let e=typeof t=="string"?JSON.parse(t):t;if(!e.highlights||!Array.isArray(e.highlights))return;this.#e=e.highlights,this.#i(),this.#o()}catch{}}destroy(){if(!this.#h){if(this.#h=!0,this.#l&&this.#t.removeEventListener("pointerup",this.#l),this.#d&&this.#t.removeEventListener("click",this.#d),this.#c)this.#t.querySelectorAll("mark[data-hn-id]").forEach(t=>{let e=t.parentNode;for(;t.firstChild;)e.insertBefore(t.firstChild,t);e.removeChild(t),e.normalize()});else{for(let t of this.#n)CSS.highlights.delete(`hn-${t}`);At()}this.#f(),this.#t.removeAttribute("data-highlights-init"),R===this&&A(),v()}}#m(){requestAnimationFrame(()=>{if(this.#h||this.#t.hasAttribute("data-selection-menu"))return;let t=window.getSelection();if(!t||t.isCollapsed||!t.toString().trim())return;let e=t.getRangeAt(0);if(!this.#t.contains(e.commonAncestorContainer))return;let i=e.getBoundingClientRect();I(i,this,null)})}#g(t){if(this.#t.hasAttribute("data-selection-menu"))return;let e=t.target.closest?.(".hn-margin-annotation");if(e){let o=e.dataset.hnId,s=this.#e.find(r=>r.id===o);if(s){at(this,s);return}}let i=t.target.closest?.("mark[data-hn-id]");if(i){let o=i.dataset.hnId,s=this.#e.find(r=>r.id===o);if(s){this.#a("highlights:clicked",{id:o});let r=i.getBoundingClientRect();I(r,this,s);return}}if(!this.#c){let o=this.#y(t.clientX,t.clientY);if(o){this.#a("highlights:clicked",{id:o.id});let s=w(this.#t,o.startOffset,o.endOffset);s&&I(s.getBoundingClientRect(),this,o)}}}#y(t,e){for(let i of this.#e){let o=w(this.#t,i.startOffset,i.endOffset);if(!o)continue;let s=o.getClientRects();for(let r of s)if(t>=r.left&&t<=r.right&&e>=r.top&&e<=r.bottom)return i}return null}_createFromSelection(t){let e=window.getSelection();if(!e||e.isCollapsed)return;let i=e.getRangeAt(0);if(!this.#t.contains(i.commonAncestorContainer))return;let o=ot(this.#t,i.startContainer,i.startOffset),s=ot(this.#t,i.endContainer,i.endOffset);if(o<0||s<0||o>=s)return;let r=e.toString().trim(),d={id:St(),startOffset:o,endOffset:s,text:r,color:t,note:"",created:Date.now()};this.#e.push(d),this.#i(),this.#o(),e.removeAllRanges(),this.#a("highlights:added",{id:d.id,text:r,color:t,note:""}),q("Highlight added")}_changeColor(t,e){let i=this.#e.find(o=>o.id===t);i&&(i.color=e,this.#i(),this.#o())}_updateNote(t,e){let i=this.#e.find(o=>o.id===t);i&&(i.note=e,this.#i(),this.#p(),this.#a("highlights:note-changed",{id:t,note:e}),q("Note saved"))}async#b(){let t=await y.get(nt,this.#s);if(!t||!Array.isArray(t.highlights))return;let e=$(this.#t.textContent);t.contentHash&&t.contentHash!==e?(this.#e=t.highlights.filter(i=>{let o=w(this.#t,i.startOffset,i.endOffset);return o?o.toString().trim()===i.text:!1}),this.#i()):this.#e=t.highlights}#i(){let t={version:1,contentHash:$(this.#t.textContent),highlights:this.#e};y.set(nt,this.#s,t).catch(()=>{})}#o(){this.#c?this.#v():this.#w(),this.#p()}#w(){let t=new Map;for(let e of this.#n)t.set(e,[]);for(let e of this.#e){let i=w(this.#t,e.startOffset,e.endOffset);i&&t.has(e.color)&&t.get(e.color).push(i)}for(let[e,i]of t){let o=`hn-${e}`;i.length===0?CSS.highlights.delete(o):CSS.highlights.set(o,new Highlight(...i))}}#v(){this.#t.querySelectorAll("mark[data-hn-id]").forEach(e=>{let i=e.parentNode;for(;e.firstChild;)i.insertBefore(e.firstChild,e);i.removeChild(e)}),this.#t.normalize();let t=[...this.#e].sort((e,i)=>i.startOffset-e.startOffset);for(let e of t){let i=w(this.#t,e.startOffset,e.endOffset);if(!i)continue;let o=rt(this.#t,e.color),s=document.createElement("mark");s.dataset.hnId=e.id,s.dataset.hnColor=e.color,o&&(s.style.backgroundColor=o,s.style.textDecorationColor=o);try{i.surroundContents(s)}catch{let r=i.extractContents();s.appendChild(r),i.insertNode(s)}}}#f(){for(let t of this.#u)t.remove();this.#u=[]}#p(){if(this.#f(),this.#e.length===0)return;getComputedStyle(this.#t).position==="static"&&(this.#t.style.position="relative");for(let e of this.#e){let i=w(this.#t,e.startOffset,e.endOffset);if(!i)continue;let o=i.getClientRects();if(o.length===0)continue;let s=o[0],r=this.#t.getBoundingClientRect(),d=s.top-r.top,a=document.createElement("span");a.className="hn-margin-annotation",a.dataset.hnId=e.id,a.setAttribute("aria-hidden","true"),a.style.top=`${d}px`,e.note?(a.innerHTML='<span class="hn-note-indicator">*</span> You highlighted',a.classList.add("hn-has-note")):a.textContent="You highlighted",this.#t.appendChild(a),this.#u.push(a)}}#a(t,e={}){this.#t.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0}))}},D=new WeakMap;document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>st()):st();Nt=new MutationObserver(n=>{for(let t of n)for(let e of t.addedNodes){if(e.nodeType!==Node.ELEMENT_NODE)continue;let i=e;i.matches(W)&&_(i),i.querySelectorAll(W).forEach(o=>{o.hasAttribute("data-highlights-init")||_(o)})}});Nt.observe(document.documentElement,{childList:!0,subtree:!0})});var ut={};gt(ut,{currentHash:()=>z,initPageWatch:()=>X,readWatch:()=>B,removeWatch:()=>ht,writeWatch:()=>x});function dt(){return typeof window<"u"&&window.vbPageWatch?.serverSync===!0?!0:document.querySelector('meta[name="vb-page-watch-server"]')?.getAttribute("content")==="true"}async function Ot(n){if(!dt())return null;try{let t=new C("notify"),e={url:n.url,type:"page-watch",notify:["panel"]},i=await t.post("/subscribe",e);return typeof i?.id=="string"?i.id:null}catch(t){let e=t instanceof S?`${t.status}`:String(t);return console.warn("[page-watch] server subscribe failed; client-only watch in effect.",e),null}}async function Tt(n){if(!(!n||!dt()))try{await new C("notify").delete(`/subscribe/${encodeURIComponent(n)}`)}catch(t){let e=t instanceof S?`${t.status}`:String(t);console.warn("[page-watch] server unsubscribe failed; local state already cleared.",e)}}function Lt(){return document.querySelector("main")||document.querySelector("article")||document.body}function N(){return location.pathname||"/"}function z(){let n=Lt();return n?$(n.textContent||""):""}function $t(){return document.title||N()}async function B(){return await y.get(G,N())}async function x(n){await y.set(G,N(),n)}async function ht(){await y.remove(G,N())}function U(n,t){n.setAttribute("aria-pressed",t?"true":"false"),n.dataset.watching="",t||delete n.dataset.watching;let e=n.querySelector("icon-wc");e&&e.setAttribute("name",t?"bookmark-check":"bookmark");let i=[...n.childNodes].find(o=>o.nodeType===Node.TEXT_NODE&&(o.textContent||"").trim());i&&!n.hasAttribute("data-watch-label-locked")&&(i.textContent=t?"Watching":"Watch for updates"),n.setAttribute("title",t?"Stop watching this page":"Watch this page for content updates")}async function j(n){if(n.hasAttribute("data-watch-page-init"))return;n.setAttribute("data-watch-page-init",""),n.setAttribute("type",n.getAttribute("type")||"button");let t=await B();U(n,!!t),n.addEventListener("click",async e=>{e.preventDefault();let i=await B();if(i)await ht(),U(n,!1),n.dispatchEvent(new CustomEvent("page-watch:remove",{bubbles:!0,composed:!0,detail:{url:i.url,subscriptionId:i.subscriptionId}})),Tt(i.subscriptionId);else{let o={url:N(),title:$t(),contentHash:z(),watchedAt:new Date().toISOString(),lastChecked:new Date().toISOString(),lastChanged:null,subscriptionId:null};await x(o),U(n,!0),n.dispatchEvent(new CustomEvent("page-watch:add",{bubbles:!0,composed:!0,detail:{entry:o}}));let s=await Ot(o);s&&await x({...o,subscriptionId:s})}})}async function Rt(){let n=await B();if(!n)return;let t=z(),e=new Date().toISOString(),i=n.contentHash,o={...n,lastChecked:e};if(t&&t!==i){o.contentHash=t,o.lastChanged=e,await x(o);let s={id:`page-watch:${n.url}:${t}`,type:"watch",title:`Updated: ${n.title}`,body:"Content changed since your last visit.",url:n.url,date:e,read:!1,dismissed:!1,priority:"normal"};document.dispatchEvent(new CustomEvent("notification-wc:new",{bubbles:!0,composed:!0,detail:{notification:s}}))}else await x(o)}function X(n=document){for(let t of n.querySelectorAll(V))j(t);Rt()}var V,G,Bt,ft=O(()=>{H();et();lt();V="[data-watch-page]",G="watches";document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>X()):X();Bt=new MutationObserver(n=>{for(let t of n)for(let e of t.addedNodes){if(e.nodeType!==Node.ELEMENT_NODE)continue;let i=e;i.matches?.(V)&&j(i),i.querySelectorAll?.(V).forEach(o=>j(o))}});Bt.observe(document.documentElement,{childList:!0,subtree:!0})});var Pt=window.matchMedia("(prefers-reduced-motion: reduce)");var K=new Map;function Y(n,t,e={}){let i=e.priority??10,o={impl:t,bundle:e.bundle,contract:e.contract,priority:i},s=K.get(n);if(customElements.get(n)){if(!s||s.priority>=i){s&&s.priority===i&&s.impl!==t&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${n}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=i){s.priority===i&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${s.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}K.set(n,o),customElements.define(n,t)}var T=class extends HTMLElement{#t=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let t of this.#t)t();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,i,o){t.addEventListener(e,i,o),this.#t.push(()=>t.removeEventListener(e,i,o))}setup(){}teardown(){}};var pt="Watch for updates",Mt="Watching",J=class extends T{#t=null;setup(){if(this.hasAttribute("server-sync")){let e=window;e.vbPageWatch={...e.vbPageWatch??{},serverSync:!0}}let t=this.#s();this.dataset.variant=t;for(let e of Array.from(this.children))e.hasAttribute?.("data-watch-page")&&e.remove();this.#t=this.#n(t),this.appendChild(this.#t),this.listen(document,"page-watch:add",this.#r),this.listen(document,"page-watch:remove",this.#r)}teardown(){this.#t&&(this.#t.remove(),this.#t=null)}#s(){let t=this.getAttribute("variant");return t==="compact"||t==="button"?t:"icon"}#n(t){let e=document.createElement("button");e.type="button",e.setAttribute("data-watch-page",""),e.className="ghost",e.setAttribute("aria-label","Watch this page for updates");let i=t==="icon"?"sm":"xs",o=this.getAttribute("label")??pt;return t==="icon"?e.innerHTML=`<icon-wc name="bookmark" size="${i}"></icon-wc>`:(e.innerHTML=`<icon-wc name="bookmark" size="${i}"></icon-wc><span>${this.#e(o)}</span>`,e.setAttribute("data-watch-label-locked","")),e}#r=async()=>{if(this.#t)try{let{readWatch:t}=await Promise.resolve().then(()=>(ft(),ut)),i=!!await t();this.#t.setAttribute("aria-pressed",i?"true":"false");let o=this.#t.querySelector("icon-wc");o&&o.setAttribute("name",i?"bookmark-check":"bookmark");let s=this.#t.querySelector("span");if(s&&this.#s()!=="icon"){let r=this.getAttribute("label");s.textContent=r||(i?Mt:pt)}this.#t.setAttribute("title",i?"Stop watching this page":"Watch this page for content updates")}catch{}};#e(t){let e=document.createElement("div");return e.textContent=t,e.innerHTML}};Y("watch-wc",J);export{J as WatchWc};
+//# sourceMappingURL=watch-wc.js.map

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

@@ -1,49 +1,63 @@
-var R=window.matchMedia("(prefers-reduced-motion: reduce)");var z=new Map;function f(i,t,o={}){let e=o.priority??10,s={impl:t,bundle:o.bundle,contract:o.contract,priority:e},a=z.get(i);if(customElements.get(i)){if(!a||a.priority>=e){a&&a.priority===e&&a.impl!==t&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${a.bundle}" (priority ${a.priority}). Skipping "${o.bundle}".`);return}console.warn(`[VB Bundle] Tag <${i}> defined by "${a.bundle}" cannot be replaced (customElements.define is permanent). "${o.bundle}" has higher priority but arrived late.`);return}if(a&&a.priority>=e){a.priority===e&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${a.bundle}". Skipping "${o.bundle}" (first wins at equal priority).`);return}z.set(i,s),customElements.define(i,t)}var u=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let t of this.#e)t();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,o,e,s){t.addEventListener(o,e,s),this.#e.push(()=>t.removeEventListener(o,e,s))}setup(){}teardown(){}};var g=class extends u{static observedAttributes=["colors","names","layout","show-values","show-names","size"];setup(){this.#e()}attributeChangedCallback(){this.isConnected&&this.#e()}#e(){let t=this.getAttribute("colors")||"",o=this.getAttribute("names")||"",e=this.getAttribute("layout")||"inline",s=this.getAttribute("size")||"md",a=this.hasAttribute("show-values"),n=this.hasAttribute("show-names")||o.length>0,l=this.#s(t),m=o?o.split(",").map(d=>d.trim()):[],r={sm:48,md:80,lg:120}[s]||80,b="display:flex;flex-wrap:wrap;gap:var(--size-xs,0.5rem)";e==="grid"?b=`display:grid;grid-template-columns:repeat(auto-fill,minmax(${r}px,1fr));gap:var(--size-xs,0.5rem)`:e==="list"&&(b="display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)");let C=l.map((d,p)=>{let h=m[p]||"",y=this.#o(d),S=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:${r}px`,k=e==="list"?36:r;return`<div class="swatch-wrap" role="listitem" style="${S}">
-        <button type="button" class="color-box" data-index="${p}"
-          style="background:${d};color:${y};width:${k}px;height:${k}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${h?": "+h:""}"
-          aria-label="${h||"Color "+(p+1)}: ${d}">
-          <span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${a?"1":"0"};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease">${this.#t(d)}</span>
+var Ft=window.matchMedia("(prefers-reduced-motion: reduce)");var K=new Map;function h(n,t,e={}){let s=e.priority??10,o={impl:t,bundle:e.bundle,contract:e.contract,priority:s},r=K.get(n);if(customElements.get(n)){if(!r||r.priority>=s){r&&r.priority===s&&r.impl!==t&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${r.bundle}" (priority ${r.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${n}> defined by "${r.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(r&&r.priority>=s){r.priority===s&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${r.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}K.set(n,o),customElements.define(n,t)}var u=class extends HTMLElement{#t=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let t of this.#t)t();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,s,o){t.addEventListener(e,s,o),this.#t.push(()=>t.removeEventListener(e,s,o))}setup(){}teardown(){}};var C=class extends u{static observedAttributes=["colors","names","layout","show-values","show-names","size","editable"];#t=[];setup(){this.#e()}attributeChangedCallback(){this.isConnected&&this.#e()}#e(){let t=this.getAttribute("colors")||"",e=this.getAttribute("names")||"",s=this.getAttribute("layout")||"inline",o=this.getAttribute("size")||"md",r=this.hasAttribute("show-values"),i=this.hasAttribute("show-names")||e.length>0,a=this.hasAttribute("editable"),l=this.#c(t);this.#t=l.slice();let c=e?e.split(",").map(b=>b.trim()):[],p={sm:48,md:80,lg:120}[o]||80,d="display:flex;flex-wrap:wrap;gap:var(--size-xs,0.5rem)";s==="grid"?d=`display:grid;grid-template-columns:repeat(auto-fill,minmax(${p}px,1fr));gap:var(--size-xs,0.5rem)`:s==="list"&&(d="display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)");let x=l.map((b,y)=>{let g=c[y]||"",$=this.#l(b),_=s==="list"?"display:flex;flex-direction:row;align-items:center;gap:0.75rem":`display:flex;flex-direction:column;align-items:center;gap:0.25rem;max-inline-size:${p}px`,W=s==="list"?36:p,J=`background:${b};color:${$};width:${W}px;height:${W}px;border:1px solid oklch(0% 0 0/0.15);border-radius:var(--radius-s,0.25rem);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:var(--font-mono,monospace);position:relative;overflow:hidden;flex-shrink:0`;if(a){let mt=this.#a(b);return`<div class="swatch-wrap" role="listitem" style="${_}">
+          <label class="color-box color-box-edit" style="${J};cursor:pointer" data-index="${y}" title="Click to edit${g?": "+g:""}" aria-label="${g||"Color "+(y+1)}: ${b}. Click to edit.">
+            <input type="color" class="color-input" value="${mt}" data-index="${y}" style="position:absolute;inset:0;opacity:0;cursor:pointer;inline-size:100%;block-size:100%" aria-label="${g||"Color "+(y+1)} picker">
+            <span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${r?"1":"0"};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease;pointer-events:none">${this.#i(b)}</span>
+          </label>
+          ${i&&g?`<span style="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666);text-align:center;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${g}</span>`:""}
+        </div>`}return`<div class="swatch-wrap" role="listitem" style="${_}">
+        <button type="button" class="color-box" data-index="${y}"
+          style="${J}"
+          title="Click to copy${g?": "+g:""}"
+          aria-label="${g||"Color "+(y+1)}: ${b}">
+          <span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${r?"1":"0"};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease">${this.#i(b)}</span>
         </button>
-        ${n&&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 ${e}" role="list" aria-label="Color palette" style="${b}">${C}</div>`,this.querySelectorAll(".color-box").forEach(d=>{a||(d.addEventListener("pointerenter",()=>{let p=d.querySelector(".color-value");p&&(p.style.opacity="1")}),d.addEventListener("pointerleave",()=>{let p=d.querySelector(".color-value");p&&(p.style.opacity="0")})),d.addEventListener("click",()=>{let p=Number(d.dataset.index),h=l[p],y=m[p]||"";navigator.clipboard?.writeText(h),this.dispatchEvent(new CustomEvent("color-palette:select",{bubbles:!0,detail:{color:h,name:y,index:p}})),d.style.outline="3px solid currentColor",d.style.outlineOffset="2px",setTimeout(()=>{d.style.outline="",d.style.outlineOffset=""},600)})})}#t(t){if(t.startsWith("#"))return t;let o=t.match(/oklch\(\s*([\d.]+)%?\s+([\d.]+)\s+([\d.]+)/);return o?`${o[1]}% .${o[2].replace("0.","")}`:t.length>12?t.slice(0,12)+"\u2026":t}#s(t){if(!t)return[];let o=[],e=0,s="";for(let a of t)a==="("?e++:a===")"&&e--,a===","&&e===0?(o.push(s.trim()),s=""):s+=a;return s.trim()&&o.push(s.trim()),o}#o(t){let o=t.match(/oklch\(\s*([\d.]+)%?\s/);if(o){let e=parseFloat(o[1]);return(e>1?e/100:e)>.6?"#000":"#fff"}if(t.startsWith("#")){let e=t.replace("#",""),s=parseInt(e.substring(0,2),16)/255,a=parseInt(e.substring(2,4),16)/255,n=parseInt(e.substring(4,6),16)/255;return .2126*s+.7152*a+.0722*n>.4?"#000":"#fff"}return"#000"}};f("color-palette",g);var v=class extends u{static observedAttributes=["font-family","label","sample","show-scale","show-weights","show-characters","weights"];setup(){this.#e()}attributeChangedCallback(){this.isConnected&&this.#e()}#e(){let t=this.getAttribute("font-family")||"system-ui",o=this.getAttribute("label")||t.replace(/['"]/g,"").split(",")[0],e=this.getAttribute("sample")||"The quick brown fox jumps over the lazy dog",s=this.hasAttribute("show-scale"),a=this.hasAttribute("show-weights"),n=this.hasAttribute("show-characters"),m=(this.getAttribute("weights")||"300,400,500,600,700").split(",").map(r=>r.trim()),c="";if(c+=`<div class="specimen-header" style="font-family:${t}">
-      <span class="specimen-label">${o}</span>
-      <p class="specimen-sample" contenteditable="plaintext-only" spellcheck="false">${e}</p>
-    </div>`,n&&(c+=`<div class="specimen-chars" style="font-family:${t}">
-        <div class="char-row"><span class="char-label">Upper</span>${"ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").map(r=>`<span>${r}</span>`).join("")}</div>
-        <div class="char-row"><span class="char-label">Lower</span>${"abcdefghijklmnopqrstuvwxyz".split("").map(r=>`<span>${r}</span>`).join("")}</div>
-        <div class="char-row"><span class="char-label">Digits</span>${"0123456789".split("").map(r=>`<span>${r}</span>`).join("")}</div>
-        <div class="char-row"><span class="char-label">Punct</span>${"!@#$%^&*()_+-=[]{}|;:,.<>?".split("").map(r=>`<span>${r==="<"?"&lt;":r===">"?"&gt;":r==="&"?"&amp;":r}</span>`).join("")}</div>
-      </div>`),a){c+='<div class="specimen-weights">';for(let r of m)c+=`<div class="weight-sample" style="font-family:${t};font-weight:${r}">
-          <span class="weight-label">${r}</span>
+        ${i&&g?`<span style="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666);text-align:center;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${g}</span>`:""}
+      </div>`}).join("");this.innerHTML=`<div class="palette ${s}" role="list" aria-label="Color palette" style="${d}">${x}</div>`,a?this.#r(c):(this.#o(l,c),this.#s(l,c,r))}#s(t,e,s){this.querySelectorAll(".color-box").forEach(o=>{s||(o.addEventListener("pointerenter",()=>{let r=o.querySelector(".color-value");r&&(r.style.opacity="1")}),o.addEventListener("pointerleave",()=>{let r=o.querySelector(".color-value");r&&(r.style.opacity="0")})),o.addEventListener("click",()=>{let r=Number(o.dataset.index),i=t[r],a=e[r]||"";navigator.clipboard?.writeText(i),this.dispatchEvent(new CustomEvent("color-palette:select",{bubbles:!0,detail:{color:i,name:a,index:r}})),o.style.outline="3px solid currentColor",o.style.outlineOffset="2px",setTimeout(()=>{o.style.outline="",o.style.outlineOffset=""},600)})})}#r(t){this.querySelectorAll(".color-input").forEach(e=>{e.addEventListener("input",()=>{let s=Number(e.dataset.index),o=e.value;this.#t[s]=o;let r=e.parentElement;if(r){r.style.background=o,r.style.color=this.#l(o);let i=r.querySelector(".color-value");i&&(i.textContent=this.#i(o)),r.title=`Click to edit${t[s]?": "+t[s]:""} (${o})`,r.setAttribute("aria-label",`${t[s]||"Color "+(s+1)}: ${o}. Click to edit.`)}this.setAttribute("colors",this.#t.join(",")),this.dispatchEvent(new CustomEvent("color-palette:change",{bubbles:!0,detail:{color:o,name:t[s]||"",index:s,colors:this.#t.slice()}}))})})}get colors(){return this.#t.slice()}#o(t,e){this.querySelectorAll(".color-box").forEach(s=>{let o=Number(s.dataset.index),r=t[o];if(!r||!r.includes("var("))return;let i=getComputedStyle(s).backgroundColor,a=this.#n(i)||i;t[o]=a,this.#t[o]=a;let l=s.querySelector(".color-value");l&&(l.textContent=a),s.style.color=this.#l(a);let c=e[o]||"";s.title=`Click to copy${c?": "+c:""} (${a})`,s.setAttribute("aria-label",`${c||"Color "+(o+1)}: ${a}`)})}#n(t){let e=t.match(/rgba?\(\s*([\d.]+),?\s*([\d.]+),?\s*([\d.]+)/);if(!e)return null;let[,s,o,r]=e,i=a=>Math.round(Number(a)).toString(16).padStart(2,"0");return`#${i(s)}${i(o)}${i(r)}`}#a(t){if(/^#[0-9a-f]{6}$/i.test(t))return t.toLowerCase();if(/^#[0-9a-f]{3}$/i.test(t))return("#"+t.slice(1).split("").map(o=>o+o).join("")).toLowerCase();if(typeof document>"u")return"#000000";let e=document.createElement("span");e.style.color=t,e.style.display="none",document.body.appendChild(e);let s=getComputedStyle(e).color;return e.remove(),this.#n(s)||"#000000"}#i(t){if(t.startsWith("#"))return t;let e=t.match(/oklch\(\s*([\d.]+)%?\s+([\d.]+)\s+([\d.]+)/);return e?`${e[1]}% .${e[2].replace("0.","")}`:t.length>12?t.slice(0,12)+"\u2026":t}#c(t){if(!t)return[];let e=[],s=0,o="";for(let r of t)r==="("?s++:r===")"&&s--,r===","&&s===0?(e.push(o.trim()),o=""):o+=r;return o.trim()&&e.push(o.trim()),e}#l(t){let e=t.match(/oklch\(\s*([\d.]+)%?\s/);if(e){let s=parseFloat(e[1]);return(s>1?s/100:s)>.6?"#000":"#fff"}if(t.startsWith("#")){let s=t.replace("#",""),o=parseInt(s.substring(0,2),16)/255,r=parseInt(s.substring(2,4),16)/255,i=parseInt(s.substring(4,6),16)/255;return .2126*o+.7152*r+.0722*i>.4?"#000":"#fff"}return"#000"}};h("color-palette",C);var ut=["system-ui","Georgia","Inter, sans-serif",'"JetBrains Mono", monospace',"Verdana","Cambria","ui-serif"],T=class extends u{static observedAttributes=["font-family","label","sample","show-scale","show-weights","show-characters","weights","editable","target","token"];setup(){this.#t(),this.#e()}attributeChangedCallback(){this.isConnected&&(this.#t(),this.#e())}#t(){let t=this.getAttribute("font-family")||"system-ui",e=this.getAttribute("label")||t.replace(/['"]/g,"").split(",")[0],s=this.getAttribute("sample")||"The quick brown fox jumps over the lazy dog",o=this.hasAttribute("show-scale"),r=this.hasAttribute("show-weights"),i=this.hasAttribute("show-characters"),l=(this.getAttribute("weights")||"300,400,500,600,700").split(",").map(d=>d.trim()),c="",p=this.hasAttribute("editable")?`<input type="text" class="specimen-font-input" value="${t.replace(/"/g,"&quot;")}" aria-label="Font family" style="font:inherit;padding:0.25rem 0.5rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);min-inline-size:18rem;max-inline-size:100%;font-family:${t};font-size:var(--font-size-sm,0.875rem)">
+          <span class="specimen-quick" style="display:inline-flex;flex-wrap:wrap;gap:0.25rem;margin-inline-start:0.5rem">
+            ${ut.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}">
+      ${p}
+      <p class="specimen-sample" contenteditable="plaintext-only" spellcheck="false">${s}</p>
+    </div>`,i&&(c+=`<div class="specimen-chars" style="font-family:${t}">
+        <div class="char-row"><span class="char-label">Upper</span>${"ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").map(d=>`<span>${d}</span>`).join("")}</div>
+        <div class="char-row"><span class="char-label">Lower</span>${"abcdefghijklmnopqrstuvwxyz".split("").map(d=>`<span>${d}</span>`).join("")}</div>
+        <div class="char-row"><span class="char-label">Digits</span>${"0123456789".split("").map(d=>`<span>${d}</span>`).join("")}</div>
+        <div class="char-row"><span class="char-label">Punct</span>${"!@#$%^&*()_+-=[]{}|;:,.<>?".split("").map(d=>`<span>${d==="<"?"&lt;":d===">"?"&gt;":d==="&"?"&amp;":d}</span>`).join("")}</div>
+      </div>`),r){c+='<div class="specimen-weights">';for(let d of l)c+=`<div class="weight-sample" style="font-family:${t};font-weight:${d}">
+          <span class="weight-label">${d}</span>
           <span class="weight-text">Aa</span>
-        </div>`;c+="</div>"}if(s){let r=[{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 b of r)c+=`<div class="scale-step" style="font-family:${t};font-size:${b.rem}rem">
-          <span class="scale-label">${b.name}</span>
-          <span class="scale-text">${e.substring(0,30)}</span>
-        </div>`;c+="</div>"}this.innerHTML=c}};f("type-specimen",v);var x=class extends u{static observedAttributes=["tokens","prefix","show-values","label"];setup(){this.#e()}attributeChangedCallback(){this.isConnected&&this.#e()}#e(){let t=this.getAttribute("tokens")||"3xs,2xs,xs,s,m,l,xl,2xl,3xl",o=this.getAttribute("prefix")||"--size-",e=this.getAttribute("show-values")!=="false",s=this.getAttribute("label")||"",a=t.split(",").map(l=>l.trim()),n="";s&&(n+=`<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)">${s}</div>`),n+=`<div role="list" aria-label="${s||"Spacing scale"}" style="display:flex;flex-direction:column;gap:0.25rem">`;for(let l of a){let m=`${o}${l}`;n+=`<div role="listitem" style="display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:0.75rem;min-block-size:1.75rem">
+        </div>`;c+="</div>"}if(o){let d=[{name:"xs",rem:.75},{name:"sm",rem:.875},{name:"md",rem:1},{name:"lg",rem:1.125},{name:"xl",rem:1.25},{name:"2xl",rem:1.5},{name:"3xl",rem:1.875},{name:"4xl",rem:2.25},{name:"5xl",rem:3}];c+='<div class="specimen-scale">';for(let x of d)c+=`<div class="scale-step" style="font-family:${t};font-size:${x.rem}rem">
+          <span class="scale-label">${x.name}</span>
+          <span class="scale-text">${s.substring(0,30)}</span>
+        </div>`;c+="</div>"}this.innerHTML=c}#e(){if(!this.hasAttribute("editable"))return;let t=this.querySelector(".specimen-font-input");t&&this.listen(t,"input",()=>this.#s(t.value)),this.querySelectorAll(".specimen-quick-btn").forEach(e=>{this.listen(e,"click",()=>{let s=e.getAttribute("data-font")||"";t&&(t.value=s),this.#s(s)})})}#s(t){let e=this.#r(),s=this.getAttribute("token")||"font-family-base";e&&e.style.setProperty(`--${s}`,t),this.setAttribute("font-family",t),this.dispatchEvent(new CustomEvent("type-specimen:change",{bubbles:!0,detail:{fontFamily:t,token:s,target:this.getAttribute("target")||":root"}}))}#r(){let t=this.getAttribute("target")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}};h("type-specimen",T);var M=class extends u{static observedAttributes=["tokens","prefix","show-values","label","editable","target"];setup(){this.#t(),this.#e()}attributeChangedCallback(){this.isConnected&&(this.#t(),this.#e())}#t(){let t=this.getAttribute("tokens")||"3xs,2xs,xs,s,m,l,xl,2xl,3xl",e=this.getAttribute("prefix")||"--size-",s=this.getAttribute("show-values")!=="false",o=this.getAttribute("label")||"",r=this.hasAttribute("editable"),i=t.split(",").map(l=>l.trim()),a="";o&&(a+=`<div style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted,#666);margin-block-end:0.75rem;font-family:var(--font-sans,system-ui)">${o}</div>`),a+=`<div role="list" aria-label="${o||"Spacing scale"}" style="display:flex;flex-direction:column;gap:0.25rem">`;for(let l of i){let c=`${e}${l}`,m=r?`<input type="text" class="scale-edit" data-token="${l}" aria-label="${l} value" style="font-family:var(--font-mono,monospace);font-size:0.75rem;padding:0.125rem 0.375rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#222);inline-size:6rem;text-align:end">`:s?'<span class="scale-value" style="font-family:var(--font-mono,monospace);font-size:0.75rem;color:var(--color-text-muted,#666);font-variant-numeric:tabular-nums;min-inline-size:3.5rem;text-align:end"></span>':"";a+=`<div role="listitem" style="display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:0.75rem;min-block-size:1.75rem">
         <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(${m});background:var(--color-interactive,oklch(55% 0.2 260));border-radius:var(--radius-s,0.25rem)" aria-hidden="true"></div>
-        ${e?'<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>':""}
-      </div>`}n+="</div>",this.innerHTML=n,e&&requestAnimationFrame(()=>{this.querySelectorAll(".scale-bar").forEach(l=>{let m=l.getBoundingClientRect().width,c=l.nextElementSibling;c&&(c.textContent=`${Math.round(m*100)/100}px`)})})}};f("spacing-specimen",x);var A={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"}},E={shadow:M,radius:L,border:T,color:q,size:B},w=class extends u{static observedAttributes=["type","tokens","prefix","show-values","label"];setup(){this.#e()}attributeChangedCallback(){this.isConnected&&this.#e()}#e(){let t=this.getAttribute("type")||"shadow",o=A[t]||A.shadow,e=this.getAttribute("prefix")||o.prefix,s=this.getAttribute("tokens")||o.tokens,a=this.getAttribute("show-values")!=="false",n=this.getAttribute("label")||"",l=s.split(",").map(r=>r.trim()),m=E[t]||E.shadow,c="";n&&(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)">${n}</p>`),c+=m(l,e,a),this.innerHTML=c,a&&requestAnimationFrame(()=>this.#t(t,e,l))}#t(t,o,e){let s=getComputedStyle(this);this.querySelectorAll("[data-token-value]").forEach(a=>{let n=a.dataset.tokenValue,l=s.getPropertyValue(`${o}${n}`).trim();if(t==="radius"||t==="size"){let m=this.querySelector(`[data-token-sample="${n}"]`);if(m){let c=t==="radius"?"borderRadius":"width",r=t==="size"?m.getBoundingClientRect().width:null;a.textContent=r!=null?`${Math.round(r*100)/100}px`:l||"\u2014"}}else a.textContent=l||"\u2014"})}};function M(i,t,o){let e='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem;align-items:end">';for(let s of i)e+=`<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}${s})" 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">${s}</p>
-      ${o?`<p data-token-value="${s}" 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 e+="</div>",e}function L(i,t,o){let e='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem;align-items:end">';for(let s of i)e+=`<div role="listitem" style="text-align:center">
-      <div data-token-sample="${s}" style="width:4.5rem;height:4.5rem;background:var(--color-primary,oklch(55% 0.2 260));border-radius:var(${t}${s});display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.75rem;font-family:var(--font-mono,monospace)" aria-hidden="true">${s}</div>
-      ${o?`<p data-token-value="${s}" 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 e+="</div>",e}function T(i,t,o){let e='<div role="list" style="display:flex;flex-direction:column;gap:0.75rem">';for(let s of i)e+=`<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">${s}</span>
-      <div style="border-block-start:var(${t}${s}) solid var(--color-text,#333);min-inline-size:4rem" aria-hidden="true"></div>
-      ${o?`<span data-token-value="${s}" 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 e+="</div>",e}function q(i,t,o){let e='<div role="list" style="display:flex;flex-wrap:wrap;gap:0.75rem">';for(let s of i)e+=`<div role="listitem" style="text-align:center">
-      <div style="width:4rem;height:3rem;background:var(${t}${s});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">${s}</p>
-      ${o?`<p data-token-value="${s}" 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 e+="</div>",e}function B(i,t,o){let e='<div role="list" style="display:flex;flex-direction:column;gap:0.25rem">';for(let s of i)e+=`<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">${s}</span>
-      <div data-token-sample="${s}" style="display:block;block-size:var(--size-m,1rem);min-inline-size:2px;inline-size:var(${t}${s});background:var(--color-interactive,oklch(55% 0.2 260));border-radius:var(--radius-s,0.25rem)" aria-hidden="true"></div>
-      ${o?`<span data-token-value="${s}" 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 e+="</div>",e}f("token-specimen",w);var N={button:()=>`
+        <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>
+        ${m}
+      </div>`}a+="</div>",this.innerHTML=a,requestAnimationFrame(()=>{if(r){let l=getComputedStyle(this);this.querySelectorAll(".scale-edit").forEach(c=>{let m=c.getAttribute("data-token"),p=l.getPropertyValue(`${e}${m}`).trim();c.value=p||""})}else s&&this.querySelectorAll(".scale-bar").forEach(l=>{let c=l.getBoundingClientRect().width,m=l.nextElementSibling;m&&(m.textContent=`${Math.round(c*100)/100}px`)})})}#e(){if(!this.hasAttribute("editable"))return;let t=this.getAttribute("prefix")||"--size-";this.querySelectorAll(".scale-edit").forEach(e=>{this.listen(e,"change",()=>this.#s(e,t)),this.listen(e,"keydown",s=>{s.key==="Enter"&&this.#s(e,t)})})}#s(t,e){let s=t.getAttribute("data-token"),o=t.value.trim();if(!s||!o)return;let r=this.#r(),i=`${e}${s}`;r&&r.style.setProperty(i,o),this.dispatchEvent(new CustomEvent("spacing-specimen:change",{bubbles:!0,detail:{name:s,value:o,token:i,target:this.getAttribute("target")||":root"}}))}#r(){let t=this.getAttribute("target")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}};h("spacing-specimen",M);var X={shadow:{prefix:"--shadow-",tokens:"xs,s,m,l,xl,2xl"},radius:{prefix:"--radius-",tokens:"xs,s,m,l,xl,2xl,full"},border:{prefix:"--border-width-",tokens:"thin,medium,thick"},color:{prefix:"--color-",tokens:"primary,secondary,accent,success,warning,error,info"},size:{prefix:"--size-",tokens:"3xs,2xs,xs,s,m,l,xl,2xl,3xl"},icon:{prefix:"",tokens:"home,search,settings,user,bell,heart,star,check,x,chevron-right,menu,trash"}},Y={shadow:pt,radius:ft,border:ht,color:bt,size:gt,icon:yt},L=class extends u{static observedAttributes=["type","tokens","prefix","show-values","label","size","icon-set","editable","target"];setup(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}#t(){let t=this.getAttribute("type")||"shadow",e=X[t]||X.shadow,s=this.getAttribute("prefix")||e.prefix,o=this.getAttribute("tokens")||e.tokens,r=this.getAttribute("show-values")!=="false",i=this.getAttribute("label")||"",a=o.split(",").map(p=>p.trim()),l=Y[t]||Y.shadow,c="";i&&(c+=`<p style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted,#666);margin-block-end:0.75rem;font-family:var(--font-sans,system-ui)">${i}</p>`),c+=l(a,s,r,this),this.innerHTML=c;let m=this.hasAttribute("editable")&&t!=="icon";r&&t!=="icon"?requestAnimationFrame(()=>{this.#o(t,s,a),m&&this.#e(t,s)}):m&&requestAnimationFrame(()=>this.#e(t,s))}#e(t,e){let s=getComputedStyle(this);this.querySelectorAll("[data-token-value]").forEach(o=>{let r=o.dataset.tokenValue,i=s.getPropertyValue(`${e}${r}`).trim(),a=document.createElement("input");a.type=t==="color"&&/^#[0-9a-f]{3,8}$/i.test(i)?"color":"text",a.value=i||"",a.className="ts-edit",a.setAttribute("data-token",r),a.setAttribute("aria-label",`${r} value`),a.style.cssText=`font-family:var(--font-mono,monospace);font-size:0.625rem;padding:0.125rem 0.25rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#222);inline-size:${t==="color"?"3rem":"100%"};${t==="color"?"block-size:1.5rem;padding:0;":"max-inline-size:8rem;"}`,o.replaceWith(a),this.listen(a,"change",()=>this.#s(a,e)),this.listen(a,"keydown",l=>{l.key==="Enter"&&this.#s(a,e)})})}#s(t,e){let s=t.getAttribute("data-token"),o=t.value.trim();if(!s||!o)return;let r=this.#r(),i=`${e}${s}`;r&&r.style.setProperty(i,o),this.dispatchEvent(new CustomEvent("token-specimen:change",{bubbles:!0,detail:{name:s,value:o,token:i,target:this.getAttribute("target")||":root"}}))}#r(){let t=this.getAttribute("target")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}#o(t,e,s){let o=getComputedStyle(this);this.querySelectorAll("[data-token-value]").forEach(r=>{let i=r.dataset.tokenValue,a=o.getPropertyValue(`${e}${i}`).trim();if(t==="radius"||t==="size"){let l=this.querySelector(`[data-token-sample="${i}"]`);if(l){let c=t==="radius"?"borderRadius":"width",m=t==="size"?l.getBoundingClientRect().width:null;r.textContent=m!=null?`${Math.round(m*100)/100}px`:a||"\u2014"}}else r.textContent=a||"\u2014"})}};function pt(n,t,e){let s='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem;align-items:end">';for(let o of n)s+=`<div role="listitem" style="text-align:center">
+      <div style="width:7rem;height:5rem;background:var(--color-surface,#fff);border-radius:var(--radius-m,0.5rem);box-shadow:var(${t}${o})" aria-hidden="true"></div>
+      <p style="font-family:var(--font-mono,monospace);font-size:0.75rem;color:var(--color-text-muted,#666);margin-block-start:0.5rem">${o}</p>
+      ${e?`<p data-token-value="${o}" style="font-family:var(--font-mono,monospace);font-size:0.625rem;color:var(--color-text-muted,#999);max-width:7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></p>`:""}
+    </div>`;return s+="</div>",s}function ft(n,t,e){let s='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem;align-items:end">';for(let o of n)s+=`<div role="listitem" style="text-align:center">
+      <div data-token-sample="${o}" style="width:4.5rem;height:4.5rem;background:var(--color-primary,oklch(55% 0.2 260));border-radius:var(${t}${o});display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.75rem;font-family:var(--font-mono,monospace)" aria-hidden="true">${o}</div>
+      ${e?`<p data-token-value="${o}" style="font-family:var(--font-mono,monospace);font-size:0.625rem;color:var(--color-text-muted,#999);margin-block-start:0.25rem"></p>`:""}
+    </div>`;return s+="</div>",s}function ht(n,t,e){let s='<div role="list" style="display:flex;flex-direction:column;gap:0.75rem">';for(let o of n)s+=`<div role="listitem" style="display:grid;grid-template-columns:4rem 1fr auto;align-items:center;gap:0.75rem">
+      <span style="font-family:var(--font-mono,monospace);font-size:0.875rem;color:var(--color-text-muted,#666);text-align:end">${o}</span>
+      <div style="border-block-start:var(${t}${o}) solid var(--color-text,#333);min-inline-size:4rem" aria-hidden="true"></div>
+      ${e?`<span data-token-value="${o}" style="font-family:var(--font-mono,monospace);font-size:0.75rem;color:var(--color-text-muted,#666);font-variant-numeric:tabular-nums"></span>`:""}
+    </div>`;return s+="</div>",s}function bt(n,t,e){let s='<div role="list" style="display:flex;flex-wrap:wrap;gap:0.75rem">';for(let o of n)s+=`<div role="listitem" style="text-align:center">
+      <div style="width:4rem;height:3rem;background:var(${t}${o});border-radius:var(--radius-s,0.25rem);border:1px solid var(--color-border,#ddd)" aria-hidden="true"></div>
+      <p style="font-family:var(--font-mono,monospace);font-size:0.625rem;color:var(--color-text-muted,#666);margin-block-start:0.25rem">${o}</p>
+      ${e?`<p data-token-value="${o}" style="font-family:var(--font-mono,monospace);font-size:0.5625rem;color:var(--color-text-muted,#999);max-width:4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></p>`:""}
+    </div>`;return s+="</div>",s}function gt(n,t,e){let s='<div role="list" style="display:flex;flex-direction:column;gap:0.25rem">';for(let o of n)s+=`<div role="listitem" style="display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:0.75rem;min-block-size:1.75rem">
+      <span style="font-family:var(--font-mono,monospace);font-size:0.875rem;color:var(--color-text-muted,#666);text-align:end">${o}</span>
+      <div data-token-sample="${o}" style="display:block;block-size:var(--size-m,1rem);min-inline-size:2px;inline-size:var(${t}${o});background:var(--color-interactive,oklch(55% 0.2 260));border-radius:var(--radius-s,0.25rem)" aria-hidden="true"></div>
+      ${e?`<span data-token-value="${o}" style="font-family:var(--font-mono,monospace);font-size:0.75rem;color:var(--color-text-muted,#666);font-variant-numeric:tabular-nums;min-inline-size:3.5rem;text-align:end"></span>`:""}
+    </div>`;return s+="</div>",s}function yt(n,t,e,s){let o=s?.getAttribute("size")||"md",r=s?.getAttribute("icon-set")||"",i=r?` set="${r}"`:"",a='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem">';for(let l of n)a+=`<div role="listitem" style="display:flex;flex-direction:column;align-items:center;gap:0.375rem;min-inline-size:4.5rem">
+      <span style="display:inline-flex;align-items:center;justify-content:center;padding:var(--size-s,0.75rem);background:var(--color-surface-raised,#f5f5f5);border-radius:var(--radius-s,0.25rem);border:1px solid var(--color-border,#ddd);color:var(--color-text,#222)">
+        <icon-wc name="${l}" size="${o}"${i}></icon-wc>
+      </span>
+      ${e?`<code style="font-family:var(--font-mono,monospace);font-size:0.625rem;color:var(--color-text-muted,#666);max-inline-size:5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${l}</code>`:""}
+    </div>`;return a+="</div>",a}h("token-specimen",L);var vt={button:()=>`
     <layout-cluster data-layout-gap="s">
       <button>Primary</button>
       <button class="secondary">Secondary</button>
@@ -83,8 +97,71 @@ var R=window.matchMedia("(prefers-reduced-motion: reduce)");var z=new Map;functi
       <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>`},$=class extends u{static observedAttributes=["components","label","compact"];setup(){this.#e()}attributeChangedCallback(){this.isConnected&&this.#e()}#e(){let t=this.getAttribute("components")||"button,input,select,checkbox,radio,badge,progress",o=this.getAttribute("label")||"",e=this.hasAttribute("compact"),s=t.split(",").map(l=>l.trim()),a=e?"0.75rem":"1.25rem",n="";o&&(n+=`<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)">${o}</p>`),n+=`<section style="display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:${a}">`;for(let l of s){let m=N[l];m&&(n+=`<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)">${l}</p>
-        ${m()}
-      </article>`)}n+="</section>",this.innerHTML=n}};f("component-sampler",$);
+    <textarea rows="3" placeholder="Textarea sample" aria-label="Sample textarea" style="width:100%"></textarea>`},q=class extends u{static observedAttributes=["components","label","compact"];setup(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}#t(){let t=this.getAttribute("components")||"button,input,select,checkbox,radio,badge,progress",e=this.getAttribute("label")||"",s=this.hasAttribute("compact"),o=t.split(",").map(a=>a.trim()),r=s?"0.75rem":"1.25rem",i="";e&&(i+=`<p style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted,#666);margin-block-end:0.75rem;font-family:var(--font-sans,system-ui)">${e}</p>`),i+=`<section style="display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:${r}">`;for(let a of o){let l=vt[a];l&&(i+=`<article style="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);padding:var(--size-m,1rem);background:var(--color-surface,#fff)">
+        <p style="font-size:0.625rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted,#999);margin-block-end:var(--size-s,0.5rem);font-family:var(--font-sans,system-ui)">${a}</p>
+        ${l()}
+      </article>`)}i+="</section>",this.innerHTML=i}};h("component-sampler",q);function xt(n,t,e){t/=100,e/=100;let s=i=>(i+n/30)%12,o=t*Math.min(e,1-e),r=i=>e-o*Math.max(-1,Math.min(s(i)-3,9-s(i),1));return{r:Math.round(r(0)*255),g:Math.round(r(8)*255),b:Math.round(r(4)*255)}}function $t(n,t,e){n/=255,t/=255,e/=255;let s=Math.max(n,t,e),o=Math.min(n,t,e),r=(s+o)/2,i=0,a=0;if(s!==o){let l=s-o;switch(a=r>.5?l/(2-s-o):l/(s+o),s){case n:i=((t-e)/l+(t<e?6:0))/6;break;case t:i=((e-n)/l+2)/6;break;case e:i=((n-t)/l+4)/6;break}}return{h:Math.round(i*360),s:Math.round(a*100),l:Math.round(r*100)}}function A(n){n=n.replace(/^#/,""),n.length===3&&(n=n[0]+n[0]+n[1]+n[1]+n[2]+n[2]);let t=parseInt(n,16);return{r:t>>16&255,g:t>>8&255,b:t&255}}function S(n,t,e){return"#"+[n,t,e].map(s=>Math.max(0,Math.min(255,Math.round(s))).toString(16).padStart(2,"0")).join("")}function G(n){let{r:t,g:e,b:s}=A(n);return $t(t,e,s)}function f(n,t,e){let{r:s,g:o,b:r}=xt(n,t,e);return S(s,o,r)}var B=n=>n<=.04045?n/12.92:Math.pow((n+.055)/1.055,2.4),R=n=>n<=.0031308?12.92*n:1.055*Math.pow(n,1/2.4)-.055,O=n=>n<0?0:n>1?1:n;function w(n){let{r:t,g:e,b:s}=A(n),o=B(t/255),r=B(e/255),i=B(s/255),a=.4122214708*o+.5363325363*r+.0514459929*i,l=.2119034982*o+.6806995451*r+.1073969566*i,c=.0883024619*o+.2817188376*r+.6299787005*i,m=Math.cbrt(a),p=Math.cbrt(l),d=Math.cbrt(c),x=.2104542553*m+.793617785*p-.0040720468*d,b=1.9779984951*m-2.428592205*p+.4505937099*d,y=.0259040371*m+.7827717662*p-.808675766*d,g=Math.sqrt(b*b+y*y),$=Math.atan2(y,b)*180/Math.PI;return $<0&&($+=360),{l:x,c:g,h:$}}function z(n,t,e){let s=e*Math.PI/180,o=t*Math.cos(s),r=t*Math.sin(s),i=n+.3963377774*o+.2158037573*r,a=n-.1055613458*o-.0638541728*r,l=n-.0894841775*o-1.291485548*r,c=i*i*i,m=a*a*a,p=l*l*l,d=4.0767416621*c-3.3077115913*m+.2309699292*p,x=-1.2684380046*c+2.6097574011*m-.3413193965*p,b=-.0041960863*c-.7034186147*m+1.707614701*p,y=O(R(d)),g=O(R(x)),$=O(R(b));return S(Math.round(y*255),Math.round(g*255),Math.round($*255))}function N(n,t){if(!n)return null;let e=String(n).trim();if(/^#[0-9a-f]{6}$/i.test(e))return e.toLowerCase();if(/^#[0-9a-f]{3}$/i.test(e))return("#"+e.slice(1).split("").map(i=>i+i).join("")).toLowerCase();if(typeof document>"u")return null;let s=t||document.createElement("span");t||(s.style.display="none",document.body.appendChild(s)),s.style.color="",s.style.color=e;let o=getComputedStyle(s).color;t||s.remove();let r=o.match(/rgba?\(\s*([0-9.]+)[\s,]+([0-9.]+)[\s,]+([0-9.]+)/);return r?S(Math.round(+r[1]),Math.round(+r[2]),Math.round(+r[3])):null}function Q({l:n,c:t,h:e}){return`oklch(${(n*100).toFixed(1)}% ${t.toFixed(3)} ${e.toFixed(1)})`}function j(n){let{r:t,g:e,b:s}=A(n),o=r=>{let i=r/255;return i<=.03928?i/12.92:Math.pow((i+.055)/1.055,2.4)};return .2126*o(t)+.7152*o(e)+.0722*o(s)}function Z(n,t){let e=j(n),s=j(t),o=Math.max(e,s),r=Math.min(e,s);return(o+.05)/(r+.05)}function tt(n){return n>=7?"AAA":n>=4.5?"AA":"Fail"}function V(n){return j(n)>.4?"#000000":"#ffffff"}var v=n=>(n%360+360)%360;function kt(n,t,e){return{colors:[f(n,t,e),f(v(n+180),t,e)],names:["Base","Complement"]}}function wt(n,t,e){return{colors:[f(v(n-30),t,e),f(n,t,e),f(v(n+30),t,e)],names:["Analog A","Base","Analog B"]}}function zt(n,t,e){return{colors:[f(n,t,e),f(v(n+120),t,e),f(v(n+240),t,e)],names:["Base","Triad A","Triad B"]}}function At(n,t,e){return{colors:[f(n,t,e),f(v(n+150),t,e),f(v(n+210),t,e)],names:["Base","Split A","Split B"]}}function St(n,t,e){return{colors:[f(n,t,e),f(v(n+90),t,e),f(v(n+180),t,e),f(v(n+270),t,e)],names:["Base","Tetrad A","Tetrad B","Tetrad C"]}}var Et=[{label:"50",l:96},{label:"100",l:90},{label:"200",l:80},{label:"300",l:70},{label:"400",l:60},{label:"500",l:50},{label:"600",l:40},{label:"700",l:30},{label:"800",l:22},{label:"900",l:15},{label:"950",l:10}];function Ct(n,t,e){let s=[],o=[];for(let r of Et){let i=r.l>85||r.l<20?Math.max(t*.6,5):t;s.push(f(n,Math.round(i),r.l)),o.push(r.label)}return{colors:s,names:o}}var et={complementary:kt,analogous:wt,triadic:zt,"split-complementary":At,tetradic:St,monochromatic:Ct};function st(n,t){let{h:e,s,l:o}=G(n);return(et[t]||et.complementary)(e,s,o)}var E=["primary","secondary","accent"],nt=["success","warning","error","info"],Tt=[...E,...nt],ot={primary:"Primary",secondary:"Secondary",accent:"Accent",success:"Success",warning:"Warning",error:"Error",info:"Info"},Mt={aaa:{bg:"oklch(92% 0.08 145)",fg:"oklch(30% 0.12 145)"},aa:{bg:"oklch(94% 0.08 90)",fg:"oklch(35% 0.12 70)"},fail:{bg:"oklch(92% 0.08 25)",fg:"oklch(35% 0.15 25)"}},F="var(--font-mono, monospace)",H="var(--color-text-muted, #666)",D="var(--color-border, #ddd)",rt="var(--color-surface, #fff)",Lt="var(--color-text, #222)",k="var(--radius-s, 0.25rem)",qt="var(--radius-m, 0.5rem)",P=class extends u{static observedAttributes=["colors","roles","show-export","label"];#t=[];#e=[];#s=null;#r=null;#o=null;setup(){this.#o=document.createElement("span"),this.#o.style.cssText="position:absolute;visibility:hidden;pointer-events:none",this.append(this.#o),this.#s=this.querySelector("color-palette, palette-generator"),this.#a(),this.#n(),this.#c(),this.#l("init"),this.#$(),this.#p(),this.#u("init")}attributeChangedCallback(t){!this.isConnected||!this.hasAttribute("data-upgraded")||(t==="roles"&&this.#a(),t==="colors"&&this.#n(),this.#c(),this.#l("attribute"),this.#p(),this.#u("attribute"))}teardown(){this.#o?.remove(),this.#o=null}#n(){let t=this.querySelector("color-palette");if(t){if(typeof t.colors<"u"&&t.colors.length){this.#t=t.colors.slice();return}let r=(t.getAttribute("colors")||"").split(",").map(i=>i.trim()).filter(Boolean);if(r.length){this.#t=r;return}}let e=this.querySelector("palette-generator");if(e){let o=e.getAttribute("seed")||e.querySelector('input[type="color"]')?.value||"",r=e.getAttribute("harmony")||"complementary";if(o)try{let{colors:i}=st(o,r);this.#t=i.slice();return}catch{}}let s=this.getAttribute("colors")||"";this.#t=s.split(",").map(o=>o.trim()).filter(Boolean)}#a(){let e=(this.getAttribute("roles")||E.join(",")).split(",").map(s=>s.trim().toLowerCase()).filter(s=>Tt.includes(s));this.#e=e.length?e:[...E]}#i(){let t={};for(let e=0;e<this.#e.length;e++)t[this.#e[e]]=this.#t[e]||this.#t[this.#t.length-1]||"#888888";return t}#c(){let t=this.querySelector(":scope > .sp-shell");t&&t.remove();let e=this.getAttribute("label"),s=this.hasAttribute("show-export"),o=document.createElement("div");if(o.className="sp-shell",o.style.cssText="display:flex;flex-direction:column;gap:var(--size-m,1rem);margin-block-start:var(--size-s,0.75rem)",e){let i=document.createElement("p");i.style.cssText="font-weight:600;margin:0",i.textContent=e,o.append(i)}let r=document.createElement("section");r.className="sp-previews",r.setAttribute("aria-label","Role previews"),r.style.cssText="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(22rem,100%),1fr));gap:var(--size-m,1rem)",o.append(r),this.#r=r,s&&o.insertAdjacentHTML("beforeend",this.#x()),this.append(o)}#l(t){if(!this.#r)return;let e=this.#i();this.#r.innerHTML=this.#e.map(s=>this.#g(s,e[s])).join("")}#g(t,e){let s=ot[t]||t,r=nt.includes(t)?this.#v(t,e):this.#y(t,e),i=`display:flex;flex-direction:column;gap:var(--size-s,0.75rem);padding:var(--size-m,1rem);border:1px solid ${D};border-radius:${qt};background:${rt};min-inline-size:0`;return`<article class="sp-card" data-role="${t}" aria-label="${s} role preview" style="${i}">
+      <header style="display:flex;align-items:center;justify-content:space-between;gap:var(--size-s,0.75rem)">
+        <div>
+          <code style="font-family:${F};font-size:var(--font-size-sm,0.875rem);font-weight:600">${t}</code>
+          <span style="display:block;font-size:var(--font-size-xs,0.75rem);color:${H}">${s}</span>
+        </div>
+        <div style="display:flex;align-items:center;gap:0.5rem">
+          <span class="sp-swatch" style="display:inline-block;inline-size:1.75rem;block-size:1.75rem;border-radius:${k};border:1px solid oklch(0% 0 0 / 0.15);background:${e}"></span>
+          <code style="font-family:${F};font-size:var(--font-size-xs,0.75rem);color:${H}">${e}</code>
+        </div>
+      </header>
+      <div class="sp-samples" style="display:flex;flex-wrap:wrap;gap:var(--size-s,0.75rem);align-items:flex-start">${r}</div>
+    </article>`}#y(t,e){let s=this.#k(t,e),o=this.#f(),r=this.#w(t,e),i=this.#S(e);return[this.#d({render:`<button type="button" tabindex="-1" style="all:unset;display:inline-block;padding:0.375rem 0.875rem;border-radius:${k};background:${e};color:${s};font-family:inherit;font-size:var(--font-size-sm,0.875rem);font-weight:600;cursor:default">Button</button>`,fg:s,bg:e,caption:"On role"}),this.#d({render:`<span style="color:${e};background:${o};padding:0.25rem 0.5rem;border-radius:${k};font-size:var(--font-size-sm,0.875rem);font-weight:500;text-decoration:underline">Linked text</span>`,fg:e,bg:o||"#ffffff",caption:"On surface"}),this.#d({render:`<span style="display:inline-block;padding:0.125rem 0.5rem;border-radius:999px;background:${r};color:${i};font-size:var(--font-size-xs,0.75rem);font-weight:600;letter-spacing:0.04em;text-transform:uppercase">Badge</span>`,fg:i,bg:r,caption:"Subtle"})].join("")}#v(t,e){let s=this.#f(),o=this.#z(t,e),r=this.#A(t,e),i=V(e);return[this.#d({render:`<div style="display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;border-radius:${k};background:${o};color:${r};border:1px solid ${e};font-size:var(--font-size-sm,0.875rem);max-inline-size:100%">
+          <span style="display:inline-block;inline-size:0.5rem;block-size:0.5rem;border-radius:50%;background:${e};flex-shrink:0"></span>
+          <span><strong>${ot[t]||t}</strong> \u2014 message text</span>
+        </div>`,fg:r,bg:o,caption:"Alert"}),this.#d({render:`<span style="display:inline-block;padding:0.125rem 0.5rem;border-radius:999px;background:${e};color:${i};font-size:var(--font-size-xs,0.75rem);font-weight:700;letter-spacing:0.04em;text-transform:uppercase">${t}</span>`,fg:i,bg:e,caption:"Badge"}),this.#d({render:`<span style="color:${e};background:${s};padding:0.25rem 0.5rem;border-radius:${k};font-size:var(--font-size-sm,0.875rem);font-weight:600">Inline status</span>`,fg:e,bg:s||"#ffffff",caption:"On surface"})].join("")}#d({render:t,fg:e,bg:s,caption:o}){let r=N(e,this.#o)||"#000000",i=N(s,this.#o)||"#ffffff",a=Z(r,i),l=tt(a).toLowerCase(),c=Mt[l],m=`display:inline-flex;align-items:center;gap:0.25rem;padding:0.125rem 0.375rem;border-radius:${k};font-family:${F};font-size:var(--font-size-xs,0.75rem);background:${c.bg};color:${c.fg}`;return`<div style="display:flex;flex-direction:column;gap:0.25rem;align-items:flex-start;min-inline-size:0;max-inline-size:100%">
+      <div style="max-inline-size:100%">${t}</div>
+      <div style="display:flex;align-items:center;gap:0.375rem;font-size:var(--font-size-xs,0.75rem);color:${H}">
+        <span style="${m}" title="${o}: ${a.toFixed(2)}:1">${a.toFixed(2)} <small>${l.toUpperCase()}</small></span>
+        <span>${o}</span>
+      </div>
+    </div>`}#x(){let t=`display:flex;gap:var(--size-2xs,0.375rem);padding-block-start:var(--size-xs,0.5rem);border-block-start:1px solid ${D}`,e=`padding:0.375rem 0.875rem;border:1px solid ${D};border-radius:${k};background:${rt};color:${Lt};cursor:pointer;font:inherit;font-size:var(--font-size-sm,0.875rem)`;return`<div class="sp-export" role="toolbar" aria-label="Export semantic palette" style="${t}">
+      <button type="button" class="sp-copy-css" style="${e}">Copy Theme CSS</button>
+      <button type="button" class="sp-copy-json" style="${e}">Copy JSON</button>
+    </div>`}#$(){let t=this.querySelector("color-palette");t&&this.listen(t,"color-palette:change",()=>{this.#n(),this.#l("palette"),this.#u("palette")});let e=this.querySelector("palette-generator");e&&this.listen(e,"palette-generator:generate",()=>{this.#n(),this.#l("palette"),this.#u("palette")})}#p(){let t=this.querySelector(".sp-copy-css"),e=this.querySelector(".sp-copy-json");t&&this.listen(t,"click",()=>{navigator.clipboard?.writeText(this.#h()),this.#b(t,"Copy Theme CSS")}),e&&this.listen(e,"click",()=>{navigator.clipboard?.writeText(JSON.stringify(this.#i(),null,2)),this.#b(e,"Copy JSON")})}#m(){return getComputedStyle(this)}#f(){return this.#m().getPropertyValue("--color-surface").trim()||"#ffffff"}#k(t,e){return this.#m().getPropertyValue(`--color-text-on-${t}`).trim()||V(e)}#w(t,e){let s=this.#m().getPropertyValue(`--color-${t}-subtle`).trim();if(s)return s;let{h:o}=w(e);return z(.95,.03,o)}#z(t,e){let s=this.#m().getPropertyValue(`--color-${t}-subtle`).trim();if(s)return s;let{h:o}=w(e);return z(.94,.05,o)}#A(t,e){let s=this.#m().getPropertyValue(`--color-${t}-text`).trim();if(s)return s;let{h:o}=w(e);return z(.3,.14,o)}#S(t){let{l:e,c:s,h:o}=w(t);return z(Math.max(.2,e-.25),s,o)}#h(){let t=this.#i(),e=[],s=[];for(let r of this.#e){let i=t[r];if(!i)continue;let{l:a,c:l,h:c}=w(i);E.includes(r)?e.push(`  --hue-${r}: ${c.toFixed(1)};`,`  --lightness-${r}: ${(a*100).toFixed(1)}%;`,`  --chroma-${r}: ${l.toFixed(3)};`):s.push(`  --color-${r}: ${Q({l:a,c:l,h:c})};`)}let o=[];return e.length&&o.push("  /* Brand seeds */",...e),s.length&&(e.length&&o.push(""),o.push("  /* Status colors */",...s)),`:root {
+${o.join(`
+`)}
+}
+`}#b(t,e){t.textContent="Copied!",setTimeout(()=>{t.textContent=e},1500)}#u(t){this.dispatchEvent(new CustomEvent("semantic-palette:change",{bubbles:!0,detail:{mapping:this.#i(),tokens:this.#h(),source:t}}))}};h("semantic-palette",P);var Bt="1,2,3,4,5,in-1,in-2,in-3,out-1,out-2,out-3,out-4,out-5,elastic-1,elastic-2,squish-1,squish-2",Rt="instant,fast,normal,slow,slower",it="ms-keyframes",Ot=`
+@keyframes ms-slide { from { inset-inline-start: 0 } to { inset-inline-start: calc(100% - 1rem) } }
+@keyframes ms-fill { 0% { transform: scaleX(0) } 60% { transform: scaleX(1) } 100% { transform: scaleX(1); opacity: 0.3 } }
+@media (prefers-reduced-motion: reduce) {
+  motion-specimen .ms-dot { animation: none !important; inset-inline-start: calc(50% - 0.5rem) !important }
+  motion-specimen .ms-bar-fill { animation: none !important; transform: scaleX(0.6) !important; opacity: 0.6 !important }
+}
+`;function jt(){if(typeof document>"u"||document.getElementById(it))return;let n=document.createElement("style");n.id=it,n.textContent=Ot,document.head.append(n)}var at="var(--font-mono, monospace)",lt="var(--color-text-muted, #666)",ct="var(--color-interactive, oklch(55% 0.2 260))",dt="var(--color-surface-sunken, #f1f1f1)",I=class extends u{static observedAttributes=["type","tokens","prefix","duration","show-values","label"];setup(){jt(),this.#t()}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&this.#t()}#t(){let t=this.getAttribute("type")||"easing",e=this.getAttribute("duration")||"1.2s",s=this.getAttribute("show-values")!=="false",o=this.getAttribute("label")||"",r="";o&&(r+=`<p style="font-weight:600;margin:0 0 var(--size-s,0.75rem)">${o}</p>`),(t==="easing"||t==="both")&&(r+=this.#n(e,s)),(t==="duration"||t==="both")&&(t==="both"&&(r+='<div aria-hidden="true" style="block-size:var(--size-m,1rem)"></div>'),r+=this.#a(s)),this.innerHTML=r,s&&requestAnimationFrame(()=>this.#i())}#e(){return"display:grid;grid-template-columns:5rem 1fr auto;align-items:center;gap:var(--size-s,0.75rem);min-block-size:1.75rem"}#s(){return`font-family:${at};font-size:var(--font-size-sm,0.875rem);color:${lt};text-align:end`}#r(){return`font-family:${at};font-size:var(--font-size-xs,0.75rem);color:${lt};font-variant-numeric:tabular-nums;white-space:nowrap`}#o(){return"list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--size-2xs,0.375rem)"}#n(t,e){let s=(this.getAttribute("tokens")||Bt).split(",").map(l=>l.trim()),o=this.getAttribute("prefix")||"--ease-",r=`position:relative;display:block;block-size:0.5rem;background:${dt};border-radius:999px`,i=`position:absolute;inset-block-start:50%;inset-inline-start:0;inline-size:1rem;block-size:1rem;background:${ct};border-radius:50%;transform:translateY(-50%)`,a=s.map(l=>{let c=`${o}${l}`;return`<li class="ms-row ms-row-ease" role="listitem" style="${this.#e()}">
+        <span style="${this.#s()}">${l}</span>
+        <span style="${r}" aria-hidden="true">
+          <span class="ms-dot" style="${i};animation: ms-slide ${t} var(${c}) infinite alternate"></span>
+        </span>
+        ${e?`<span class="ms-value" data-var="${c}" style="${this.#r()}"></span>`:""}
+      </li>`}).join("");return`<ul class="ms-list" role="list" aria-label="Easing scale" style="${this.#o()}">${a}</ul>`}#a(t){let e=(this.getAttribute("tokens")||Rt).split(",").map(a=>a.trim()),s=this.getAttribute("prefix")||"--duration-",o=`position:relative;display:block;block-size:0.5rem;background:${dt};border-radius:999px;overflow:hidden`,r=`position:absolute;inset-block:0;inset-inline-start:0;inline-size:100%;background:${ct};transform-origin:left center;animation-name:ms-fill;animation-iteration-count:infinite;animation-timing-function:linear`,i=e.map(a=>{let l=`${s}${a}`;return`<li class="ms-row ms-row-dur" role="listitem" style="${this.#e()}">
+        <span style="${this.#s()}">${a}</span>
+        <span style="${o}" aria-hidden="true">
+          <span class="ms-bar-fill" style="${r};animation-duration: var(${l})"></span>
+        </span>
+        ${t?`<span class="ms-value" data-var="${l}" style="${this.#r()}"></span>`:""}
+      </li>`}).join("");return`<ul class="ms-list" role="list" aria-label="Duration scale" style="${this.#o()}">${i}</ul>`}#i(){this.querySelectorAll(".ms-value").forEach(t=>{let e=t.getAttribute("data-var");if(!e)return;let s=getComputedStyle(this).getPropertyValue(e).trim();t.textContent=s||"\u2014"})}};h("motion-specimen",I);var Nt="--color-,--hue-,--lightness-,--chroma-,--font-,--size-,--radius-,--shadow-,--border-width-,--ease-,--duration-",Vt=["type-specimen:change","spacing-specimen:change","token-specimen:change","semantic-palette:change"],U=class extends u{static observedAttributes=["scope","selector","include","format","label","live"];setup(){this.#o(),this.#n(),this.#a(),this.#c()}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&(this.#o(),this.#n(),this.#a(),this.#c())}#t(){let t=this.getAttribute("scope")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}#e(){return(this.getAttribute("include")||Nt).split(",").map(e=>e.trim()).filter(Boolean)}#s(){let t=this.#t();if(!t)return[];let e=this.#e(),s=t.style,o=[];for(let r=0;r<s.length;r++){let i=s.item(r);if(!i.startsWith("--")||!e.some(l=>i.startsWith(l)))continue;let a=s.getPropertyValue(i).trim();a&&o.push([i,a])}return o}#r(t){if((this.getAttribute("format")||"css")==="json"){let r=Object.fromEntries(t);return JSON.stringify(r,null,2)}let s=this.getAttribute("selector")||":root";if(!t.length)return`${s} {
+  /* No theme overrides detected yet. Edit a specimen to populate. */
+}
+`;let o=t.map(([r,i])=>`  ${r}: ${i};`).join(`
+`);return`${s} {
+${o}
+}
+`}#o(){let t=this.getAttribute("label")||"",e=t?`<p style="font-weight:600;margin:0 0 var(--size-xs,0.5rem)">${t}</p>`:"",s="display:flex;gap:var(--size-2xs,0.375rem);margin-block-end:var(--size-xs,0.5rem)",o="padding:0.375rem 0.75rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#222);cursor:pointer;font:inherit;font-size:var(--font-size-xs,0.75rem)",r="inline-size:100%;block-size:16rem;padding:var(--size-s,0.75rem);border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface-sunken,#f8f8f8);color:var(--color-text,#222);font-family:var(--font-mono,monospace);font-size:var(--font-size-xs,0.75rem);white-space:pre;overflow:auto;tab-size:2;resize:vertical;box-sizing:border-box";this.innerHTML=`
+      ${e}
+      <div class="te-toolbar" style="${s}">
+        <button type="button" class="te-refresh" style="${o}" aria-label="Refresh">Refresh</button>
+        <button type="button" class="te-copy" style="${o}">Copy</button>
+        <button type="button" class="te-download" style="${o}">Download</button>
+        <span class="te-count" style="align-self:center;font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666);margin-inline-start:auto"></span>
+      </div>
+      <textarea class="te-output" readonly aria-label="Theme output" style="${r}"></textarea>
+    `}#n(){let t=this.#s(),e=this.#r(t),s=this.querySelector(".te-output"),o=this.querySelector(".te-count");s&&(s.value=e),o&&(o.textContent=`${t.length} token${t.length===1?"":"s"}`),this.dispatchEvent(new CustomEvent("theme-export:change",{bubbles:!0,detail:{output:e,format:this.getAttribute("format")||"css",tokens:Object.fromEntries(t)}}))}#a(){let t=this.querySelector(".te-refresh"),e=this.querySelector(".te-copy"),s=this.querySelector(".te-download");t&&this.listen(t,"click",()=>this.#n()),e&&this.listen(e,"click",()=>{let o=this.querySelector(".te-output");if(!o)return;navigator.clipboard?.writeText(o.value);let r=e.textContent;e.textContent="Copied!",setTimeout(()=>{e.textContent=r},1500)}),s&&this.listen(s,"click",()=>this.#i())}#i(){let t=this.querySelector(".te-output");if(!t)return;let e=this.getAttribute("format")||"css",s=e==="json"?"json":"css",o=new Blob([t.value],{type:e==="json"?"application/json":"text/css"}),r=URL.createObjectURL(o),i=document.createElement("a");i.href=r,i.download=`theme.${s}`,i.click(),URL.revokeObjectURL(r)}#c(){if(this.hasAttribute("live"))for(let t of Vt)this.listen(document,t,()=>this.#n())}};h("theme-export",U);
 //# sourceMappingURL=design-system.full.js.map