vanilla-breeze 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/components/adr-record.js +383 -0
- package/dist/cdn/components/adr-wc.js +403 -0
- package/dist/cdn/components/analytics-panel.js +34 -0
- package/dist/cdn/components/author-index.js +3 -0
- package/dist/cdn/components/brand-mark.js +2 -0
- package/dist/cdn/components/calendar-wc.js +2 -2
- package/dist/cdn/components/carousel-wc.js +1 -1
- package/dist/cdn/components/chart-wc.js +25 -25
- package/dist/cdn/components/color-palette.js +13 -7
- package/dist/cdn/components/comment-wc.js +2 -0
- package/dist/cdn/components/consent-banner.js +1 -1
- package/dist/cdn/components/content-lens.js +2 -0
- package/dist/cdn/components/day-view.js +2 -0
- package/dist/cdn/components/empathy-map.js +42 -25
- package/dist/cdn/components/flow-diagram.js +2 -0
- package/dist/cdn/components/font-pairer.js +108 -0
- package/dist/cdn/components/gantt-chart.js +2 -0
- package/dist/cdn/components/geo-map.js +7 -7
- package/dist/cdn/components/glossary-wc.js +2 -0
- package/dist/cdn/components/gradient-builder.js +52 -0
- package/dist/cdn/components/highlight-wc.js +3 -0
- package/dist/cdn/components/manifest.json +134 -26
- package/dist/cdn/components/markdown-viewer.js +3 -3
- package/dist/cdn/components/motion-specimen.js +21 -0
- package/dist/cdn/components/note-wc.js +3 -0
- package/dist/cdn/components/notification-wc.js +37 -0
- package/dist/cdn/components/page-info.js +55 -24
- package/dist/cdn/components/page-toc.js +1 -1
- package/dist/cdn/components/popularity-index.js +9 -0
- package/dist/cdn/components/print-page.js +1 -1
- package/dist/cdn/components/recently-visited.js +3 -0
- package/dist/cdn/components/review-surface.js +541 -0
- package/dist/cdn/components/selection-menu.js +2 -0
- package/dist/cdn/components/semantic-palette.js +30 -0
- package/dist/cdn/components/settings-panel.js +55 -51
- package/dist/cdn/components/share-wc.js +2 -2
- package/dist/cdn/components/site-map-wc.js +2 -0
- package/dist/cdn/components/spacing-specimen.js +5 -5
- package/dist/cdn/components/split-surface.js +1 -1
- package/dist/cdn/components/text-reader.js +2 -2
- package/dist/cdn/components/theme-export.js +18 -0
- package/dist/cdn/components/theme-picker.js +58 -58
- package/dist/cdn/components/token-specimen.js +25 -20
- package/dist/cdn/components/topic-map.js +3 -0
- package/dist/cdn/components/trust-filter.js +4 -0
- package/dist/cdn/components/type-specimen.js +16 -13
- package/dist/cdn/components/user-journey.js +48 -30
- package/dist/cdn/components/user-persona.js +17 -15
- package/dist/cdn/components/user-story.js +55 -22
- package/dist/cdn/components/watch-wc.js +3 -0
- package/dist/cdn/components/week-view.js +2 -0
- package/dist/cdn/components/work-item.js +446 -0
- package/dist/cdn/packs/design-system.full.js +124 -47
- package/dist/cdn/packs/effects.full.js +1 -1
- package/dist/cdn/packs/kawaii.full.css +1 -1
- package/dist/cdn/packs/kawaii.full.js +1 -1
- package/dist/cdn/packs/kawaii.theme.css +1 -1
- package/dist/cdn/packs/manifest.json +10 -40
- package/dist/cdn/packs/prototype.full.js +1 -1
- package/dist/cdn/packs/ui.full.css +1 -1
- package/dist/cdn/packs/ui.full.js +50 -50
- package/dist/cdn/packs/ux-planning.full.css +1 -1
- package/dist/cdn/packs/ux-planning.full.js +1546 -92
- package/dist/cdn/themes/8bit.css +1 -1
- package/dist/cdn/themes/alpha1999.css +1 -1
- package/dist/cdn/themes/bauhaus.css +1 -1
- package/dist/cdn/themes/brutalist.css +1 -1
- package/dist/cdn/themes/claymorphism.css +1 -1
- package/dist/cdn/themes/cottagecore.css +1 -1
- package/dist/cdn/themes/cyber.css +1 -1
- package/dist/cdn/themes/genai.css +1 -1
- package/dist/cdn/themes/glassmorphism.css +1 -1
- package/dist/cdn/themes/kawaii.css +1 -1
- package/dist/cdn/themes/magna.css +1 -1
- package/dist/cdn/themes/manifest.json +20 -20
- package/dist/cdn/themes/nes.css +1 -1
- package/dist/cdn/themes/neumorphism.css +1 -1
- package/dist/cdn/themes/organic.css +1 -1
- package/dist/cdn/themes/rough.css +1 -1
- package/dist/cdn/themes/startup.css +1 -1
- package/dist/cdn/themes/super2026.css +1 -1
- package/dist/cdn/themes/terminal.css +1 -1
- package/dist/cdn/themes/vaporwave.css +1 -1
- package/dist/cdn/themes/win9x.css +1 -1
- package/dist/cdn/vanilla-breeze-charts.js +25 -25
- package/dist/cdn/vanilla-breeze-core.css +1 -1
- package/dist/cdn/vanilla-breeze-core.js +119 -47
- package/dist/cdn/vanilla-breeze-dev.js +1 -1
- package/dist/cdn/vanilla-breeze-extras.js +154 -74
- package/dist/cdn/vanilla-breeze.css +1 -1
- package/dist/cdn/vanilla-breeze.js +1988 -248
- package/package.json +8 -6
- package/dist/cdn/packs/retro.bundle.js +0 -2
- package/dist/cdn/packs/retro.components.js +0 -1
- package/dist/cdn/packs/retro.effects.css +0 -2
- package/dist/cdn/packs/retro.effects.js +0 -16
- package/dist/cdn/packs/retro.full.css +0 -5
- package/dist/cdn/packs/retro.full.js +0 -16
- package/dist/cdn/packs/retro.theme.css +0 -2
|
@@ -1,49 +1,63 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
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="${_}">
|
|
2
|
+
<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.">
|
|
3
|
+
<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">
|
|
4
|
+
<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>
|
|
5
|
+
</label>
|
|
6
|
+
${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>`:""}
|
|
7
|
+
</div>`}return`<div class="swatch-wrap" role="listitem" style="${_}">
|
|
8
|
+
<button type="button" class="color-box" data-index="${y}"
|
|
9
|
+
style="${J}"
|
|
10
|
+
title="Click to copy${g?": "+g:""}"
|
|
11
|
+
aria-label="${g||"Color "+(y+1)}: ${b}">
|
|
12
|
+
<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>
|
|
7
13
|
</button>
|
|
8
|
-
${
|
|
9
|
-
</div>`}).join("");this.innerHTML=`<div class="palette ${
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<div class="char-row"><span class="char-label">
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
${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>`:""}
|
|
15
|
+
</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,""")}" 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)">
|
|
16
|
+
<span class="specimen-quick" style="display:inline-flex;flex-wrap:wrap;gap:0.25rem;margin-inline-start:0.5rem">
|
|
17
|
+
${ut.map(d=>`<button type="button" class="specimen-quick-btn" data-font="${d.replace(/"/g,""")}" 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("")}
|
|
18
|
+
</span>`:`<span class="specimen-label">${e}</span>`;if(c+=`<div class="specimen-header" style="font-family:${t}">
|
|
19
|
+
${p}
|
|
20
|
+
<p class="specimen-sample" contenteditable="plaintext-only" spellcheck="false">${s}</p>
|
|
21
|
+
</div>`,i&&(c+=`<div class="specimen-chars" style="font-family:${t}">
|
|
22
|
+
<div class="char-row"><span class="char-label">Upper</span>${"ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").map(d=>`<span>${d}</span>`).join("")}</div>
|
|
23
|
+
<div class="char-row"><span class="char-label">Lower</span>${"abcdefghijklmnopqrstuvwxyz".split("").map(d=>`<span>${d}</span>`).join("")}</div>
|
|
24
|
+
<div class="char-row"><span class="char-label">Digits</span>${"0123456789".split("").map(d=>`<span>${d}</span>`).join("")}</div>
|
|
25
|
+
<div class="char-row"><span class="char-label">Punct</span>${"!@#$%^&*()_+-=[]{}|;:,.<>?".split("").map(d=>`<span>${d==="<"?"<":d===">"?">":d==="&"?"&":d}</span>`).join("")}</div>
|
|
26
|
+
</div>`),r){c+='<div class="specimen-weights">';for(let d of l)c+=`<div class="weight-sample" style="font-family:${t};font-weight:${d}">
|
|
27
|
+
<span class="weight-label">${d}</span>
|
|
19
28
|
<span class="weight-text">Aa</span>
|
|
20
|
-
</div>`;c+="</div>"}if(
|
|
21
|
-
<span class="scale-label">${
|
|
22
|
-
<span class="scale-text">${
|
|
23
|
-
</div>`;c+="</div>"}this.innerHTML=c}};
|
|
29
|
+
</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">
|
|
30
|
+
<span class="scale-label">${x.name}</span>
|
|
31
|
+
<span class="scale-text">${s.substring(0,30)}</span>
|
|
32
|
+
</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">
|
|
24
33
|
<span style="font-family:var(--font-mono,monospace);font-size:0.875rem;color:var(--color-text-muted,#666);text-align:end">${l}</span>
|
|
25
|
-
<div class="scale-bar" style="display:block;block-size:var(--size-m,1rem);min-inline-size:2px;inline-size:var(${
|
|
26
|
-
${
|
|
27
|
-
</div>`}
|
|
28
|
-
<div style="width:7rem;height:5rem;background:var(--color-surface,#fff);border-radius:var(--radius-m,0.5rem);box-shadow:var(${t}${
|
|
29
|
-
<p style="font-family:var(--font-mono,monospace);font-size:0.75rem;color:var(--color-text-muted,#666);margin-block-start:0.5rem">${
|
|
30
|
-
${
|
|
31
|
-
</div>`;return
|
|
32
|
-
<div data-token-sample="${
|
|
33
|
-
${
|
|
34
|
-
</div>`;return
|
|
35
|
-
<span style="font-family:var(--font-mono,monospace);font-size:0.875rem;color:var(--color-text-muted,#666);text-align:end">${
|
|
36
|
-
<div style="border-block-start:var(${t}${
|
|
37
|
-
${
|
|
38
|
-
</div>`;return
|
|
39
|
-
<div style="width:4rem;height:3rem;background:var(${t}${
|
|
40
|
-
<p style="font-family:var(--font-mono,monospace);font-size:0.625rem;color:var(--color-text-muted,#666);margin-block-start:0.25rem">${
|
|
41
|
-
${
|
|
42
|
-
</div>`;return
|
|
43
|
-
<span style="font-family:var(--font-mono,monospace);font-size:0.875rem;color:var(--color-text-muted,#666);text-align:end">${
|
|
44
|
-
<div data-token-sample="${
|
|
45
|
-
${
|
|
46
|
-
</div>`;return
|
|
34
|
+
<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>
|
|
35
|
+
${m}
|
|
36
|
+
</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">
|
|
37
|
+
<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>
|
|
38
|
+
<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>
|
|
39
|
+
${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>`:""}
|
|
40
|
+
</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">
|
|
41
|
+
<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>
|
|
42
|
+
${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>`:""}
|
|
43
|
+
</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">
|
|
44
|
+
<span style="font-family:var(--font-mono,monospace);font-size:0.875rem;color:var(--color-text-muted,#666);text-align:end">${o}</span>
|
|
45
|
+
<div style="border-block-start:var(${t}${o}) solid var(--color-text,#333);min-inline-size:4rem" aria-hidden="true"></div>
|
|
46
|
+
${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>`:""}
|
|
47
|
+
</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">
|
|
48
|
+
<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>
|
|
49
|
+
<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>
|
|
50
|
+
${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>`:""}
|
|
51
|
+
</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">
|
|
52
|
+
<span style="font-family:var(--font-mono,monospace);font-size:0.875rem;color:var(--color-text-muted,#666);text-align:end">${o}</span>
|
|
53
|
+
<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>
|
|
54
|
+
${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>`:""}
|
|
55
|
+
</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">
|
|
56
|
+
<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)">
|
|
57
|
+
<icon-wc name="${l}" size="${o}"${i}></icon-wc>
|
|
58
|
+
</span>
|
|
59
|
+
${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>`:""}
|
|
60
|
+
</div>`;return a+="</div>",a}h("token-specimen",L);var vt={button:()=>`
|
|
47
61
|
<layout-cluster data-layout-gap="s">
|
|
48
62
|
<button>Primary</button>
|
|
49
63
|
<button class="secondary">Secondary</button>
|
|
@@ -83,8 +97,71 @@ var R=window.matchMedia("(prefers-reduced-motion: reduce)");var z=new Map;functi
|
|
|
83
97
|
<progress value="100" max="100">100%</progress>
|
|
84
98
|
</layout-stack>`,range:()=>`
|
|
85
99
|
<input type="range" min="0" max="100" value="50" aria-label="Sample range"/>`,textarea:()=>`
|
|
86
|
-
<textarea rows="3" placeholder="Textarea sample" aria-label="Sample textarea" style="width:100%"></textarea>`}
|
|
87
|
-
<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)">${
|
|
88
|
-
${
|
|
89
|
-
</article>`)}
|
|
100
|
+
<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)">
|
|
101
|
+
<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>
|
|
102
|
+
${l()}
|
|
103
|
+
</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}">
|
|
104
|
+
<header style="display:flex;align-items:center;justify-content:space-between;gap:var(--size-s,0.75rem)">
|
|
105
|
+
<div>
|
|
106
|
+
<code style="font-family:${F};font-size:var(--font-size-sm,0.875rem);font-weight:600">${t}</code>
|
|
107
|
+
<span style="display:block;font-size:var(--font-size-xs,0.75rem);color:${H}">${s}</span>
|
|
108
|
+
</div>
|
|
109
|
+
<div style="display:flex;align-items:center;gap:0.5rem">
|
|
110
|
+
<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>
|
|
111
|
+
<code style="font-family:${F};font-size:var(--font-size-xs,0.75rem);color:${H}">${e}</code>
|
|
112
|
+
</div>
|
|
113
|
+
</header>
|
|
114
|
+
<div class="sp-samples" style="display:flex;flex-wrap:wrap;gap:var(--size-s,0.75rem);align-items:flex-start">${r}</div>
|
|
115
|
+
</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%">
|
|
116
|
+
<span style="display:inline-block;inline-size:0.5rem;block-size:0.5rem;border-radius:50%;background:${e};flex-shrink:0"></span>
|
|
117
|
+
<span><strong>${ot[t]||t}</strong> \u2014 message text</span>
|
|
118
|
+
</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%">
|
|
119
|
+
<div style="max-inline-size:100%">${t}</div>
|
|
120
|
+
<div style="display:flex;align-items:center;gap:0.375rem;font-size:var(--font-size-xs,0.75rem);color:${H}">
|
|
121
|
+
<span style="${m}" title="${o}: ${a.toFixed(2)}:1">${a.toFixed(2)} <small>${l.toUpperCase()}</small></span>
|
|
122
|
+
<span>${o}</span>
|
|
123
|
+
</div>
|
|
124
|
+
</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}">
|
|
125
|
+
<button type="button" class="sp-copy-css" style="${e}">Copy Theme CSS</button>
|
|
126
|
+
<button type="button" class="sp-copy-json" style="${e}">Copy JSON</button>
|
|
127
|
+
</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 {
|
|
128
|
+
${o.join(`
|
|
129
|
+
`)}
|
|
130
|
+
}
|
|
131
|
+
`}#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=`
|
|
132
|
+
@keyframes ms-slide { from { inset-inline-start: 0 } to { inset-inline-start: calc(100% - 1rem) } }
|
|
133
|
+
@keyframes ms-fill { 0% { transform: scaleX(0) } 60% { transform: scaleX(1) } 100% { transform: scaleX(1); opacity: 0.3 } }
|
|
134
|
+
@media (prefers-reduced-motion: reduce) {
|
|
135
|
+
motion-specimen .ms-dot { animation: none !important; inset-inline-start: calc(50% - 0.5rem) !important }
|
|
136
|
+
motion-specimen .ms-bar-fill { animation: none !important; transform: scaleX(0.6) !important; opacity: 0.6 !important }
|
|
137
|
+
}
|
|
138
|
+
`;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()}">
|
|
139
|
+
<span style="${this.#s()}">${l}</span>
|
|
140
|
+
<span style="${r}" aria-hidden="true">
|
|
141
|
+
<span class="ms-dot" style="${i};animation: ms-slide ${t} var(${c}) infinite alternate"></span>
|
|
142
|
+
</span>
|
|
143
|
+
${e?`<span class="ms-value" data-var="${c}" style="${this.#r()}"></span>`:""}
|
|
144
|
+
</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()}">
|
|
145
|
+
<span style="${this.#s()}">${a}</span>
|
|
146
|
+
<span style="${o}" aria-hidden="true">
|
|
147
|
+
<span class="ms-bar-fill" style="${r};animation-duration: var(${l})"></span>
|
|
148
|
+
</span>
|
|
149
|
+
${t?`<span class="ms-value" data-var="${l}" style="${this.#r()}"></span>`:""}
|
|
150
|
+
</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} {
|
|
151
|
+
/* No theme overrides detected yet. Edit a specimen to populate. */
|
|
152
|
+
}
|
|
153
|
+
`;let o=t.map(([r,i])=>` ${r}: ${i};`).join(`
|
|
154
|
+
`);return`${s} {
|
|
155
|
+
${o}
|
|
156
|
+
}
|
|
157
|
+
`}#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=`
|
|
158
|
+
${e}
|
|
159
|
+
<div class="te-toolbar" style="${s}">
|
|
160
|
+
<button type="button" class="te-refresh" style="${o}" aria-label="Refresh">Refresh</button>
|
|
161
|
+
<button type="button" class="te-copy" style="${o}">Copy</button>
|
|
162
|
+
<button type="button" class="te-download" style="${o}">Download</button>
|
|
163
|
+
<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>
|
|
164
|
+
</div>
|
|
165
|
+
<textarea class="te-output" readonly aria-label="Theme output" style="${r}"></textarea>
|
|
166
|
+
`}#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);
|
|
90
167
|
//# sourceMappingURL=design-system.full.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var T=window.matchMedia("(prefers-reduced-motion: reduce)");function v(){return T.matches||document.documentElement.hasAttribute("data-motion-reduced")}var A=0,f={_effects:new Map,_triggers:new Map,_transitions:new Map,_instances:new WeakMap,_triggerCleanups:new WeakMap,_transitionCleanups:new WeakMap,_observer:null,effect(t,e){this._effects.set(t,e),document.querySelectorAll("[data-effect]").forEach(r=>{(r.getAttribute("data-effect")||"").split(/\s+/).includes(t)&&this._initEffect(r,t)})},trigger(t,e){this._triggers.set(t,e)},transition(t,e){this._transitions.set(t,e)},uid(t){return t.id?t.id:(t._vbUid||(A++,t._vbUid=`vb-${A}`),t._vbUid)},theme(t,e){this._themes=this._themes||new Map,this._themes.set(t,e)},applyTheme(t,e=document.documentElement){let r=this._themes?.get(t);if(r)for(let[i,n]of Object.entries(r))e.style.setProperty(i,n)},swap(t){return document.startViewTransition?document.startViewTransition(t):t()},observe(t=document){if(t.querySelectorAll("[data-effect]").forEach(r=>this._processElement(r)),t.querySelectorAll("[data-stagger]").forEach(r=>this._processStagger(r)),t.querySelectorAll("[data-transition]").forEach(r=>this._processTransition(r)),this._observer)return;this._observer=new MutationObserver(r=>{for(let i of r){if(i.type==="childList"){for(let n of i.addedNodes)n.nodeType===Node.ELEMENT_NODE&&this._processTree(n);for(let n of i.removedNodes)n.nodeType===Node.ELEMENT_NODE&&this._cleanupTree(n)}if(i.type==="attributes"){let n=i.target;i.attributeName==="data-effect"&&this._reconcileEffects(n),i.attributeName==="data-trigger"&&this._reconcileTrigger(n),i.attributeName==="data-stagger"&&this._processStagger(n),i.attributeName==="data-transition"&&this._processTransition(n)}}});let e=t===document?document.body:t;this._observer.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-effect","data-trigger","data-stagger","data-transition"]})},disconnect(){this._observer&&(this._observer.disconnect(),this._observer=null)},params(t){let e=getComputedStyle(t);return{get(r){return e.getPropertyValue(`--vb-${r}`).trim()},getNumber(r,i=0){let n=e.getPropertyValue(`--vb-${r}`).trim();return n?parseFloat(n):i},hasClass(r){return t.classList.contains(r)}}},emit(t,e,r={}){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:r}))},prefersReducedMotion:v,_processTree(t){t.hasAttribute?.("data-effect")&&this._processElement(t),t.hasAttribute?.("data-stagger")&&this._processStagger(t),t.hasAttribute?.("data-transition")&&this._processTransition(t),t.querySelectorAll?.("[data-effect]").forEach(e=>this._processElement(e)),t.querySelectorAll?.("[data-stagger]").forEach(e=>this._processStagger(e)),t.querySelectorAll?.("[data-transition]").forEach(e=>this._processTransition(e))},_cleanupTree(t){t.hasAttribute?.("data-effect")&&this._cleanupElement(t),t.hasAttribute?.("data-transition")&&this._cleanupTransition(t),t.querySelectorAll?.("[data-effect]").forEach(e=>this._cleanupElement(e)),t.querySelectorAll?.("[data-transition]").forEach(e=>this._cleanupTransition(e))},_processElement(t){if(t.hasAttribute("data-effect-processed"))return;t.setAttribute("data-effect-processed","");let e=t.getAttribute("data-effect")?.split(/\s+/).filter(Boolean)||[];for(let r of e)this._initEffect(t,r);this._wireTrigger(t,e)},_initEffect(t,e){let r=this._effects.get(e);if(!r)return;let i=this._instances.get(t);if(i?.has(e))return;v();let n=r(t);n&&(i||(i=new Map,this._instances.set(t,i)),typeof n=="function"?i.set(e,{cleanup:n}):i.set(e,n))},_wireTrigger(t,e){let r=t.getAttribute("data-trigger");if(!r){this._activateEffects(t);return}let i=r.split(/\s+/).filter(Boolean);for(let n of i){let s=n.indexOf(":"),o=s>-1?n.slice(0,s):n,a=s>-1?n.slice(s+1):null,u=this._triggers.get(o);if(!u)continue;let c=u(t,()=>this._activateEffects(t),a);if(c){let d=this._triggerCleanups.get(t);if(d){let l=d;this._triggerCleanups.set(t,()=>{l(),c()})}else this._triggerCleanups.set(t,c)}}},_activateEffects(t){t.setAttribute("data-effect-active","");let e=this._instances.get(t);if(e)for(let[,r]of e)r.activate&&r.activate()},_cleanupElement(t){let e=this._instances.get(t);if(e){for(let[,i]of e)i.cleanup&&i.cleanup();this._instances.delete(t)}let r=this._triggerCleanups.get(t);r&&(r(),this._triggerCleanups.delete(t))},_reconcileEffects(t){let e=t.getAttribute("data-effect")?.split(/\s+/).filter(Boolean)||[],r=this._instances.get(t);if(r)for(let[i,n]of r)e.includes(i)||(n.cleanup&&n.cleanup(),r.delete(i));for(let i of e)r?.has(i)||this._initEffect(t,i);t.hasAttribute("data-effect-processed")||(t.setAttribute("data-effect-processed",""),this._wireTrigger(t,e))},_reconcileTrigger(t){let e=this._triggerCleanups.get(t);e&&(e(),this._triggerCleanups.delete(t));let r=t.getAttribute("data-effect")?.split(/\s+/).filter(Boolean)||[];this._wireTrigger(t,r)},_processStagger(t){let e=t.children;for(let r=0;r<e.length;r++)e[r].style.setProperty("--vb-stagger-index",String(r))},_processTransition(t){if(t.hasAttribute("data-transition-processed"))return;t.setAttribute("data-transition-processed","");let e=t.getAttribute("data-transition");if(!e)return;let r=this._transitions.get(e);if(r){let i=r(t);i&&this._transitionCleanups.set(t,i)}else t.style.viewTransitionName=`${e}-${this.uid(t)}`},_cleanupTransition(t){let e=this._transitionCleanups.get(t);e&&(e(),this._transitionCleanups.delete(t)),t.style.viewTransitionName=""}};typeof window<"u"&&(window.VB=f);f.effect("glitch",t=>{t.hasAttribute("data-effect-glitch-init")||(t.setAttribute("data-effect-glitch-init",""),t.setAttribute("data-glitch-text",t.textContent))});function S(t,e,r,i){let n=0;function s(){n<=e.length?(t.firstChild.textContent=e.slice(0,n),n++,setTimeout(s,r)):i&&i()}s()}function L(t,e,r){let i=t.firstChild.textContent,n=i.length;function s(){n>=0?(t.firstChild.textContent=i.slice(0,n),n--,setTimeout(s,e/2)):r&&r()}s()}function M(t){let e=t.getAttribute("data-typewriter-text"),r=f.params(t),i=r.getNumber("typewriter-speed",50),n=r.getNumber("typewriter-delay",0),o=t.classList.contains("loop")?2e3:null;t.textContent="";let a=document.createTextNode("");if(t.appendChild(a),!t.classList.contains("no-cursor")){let d=document.createElement("span");d.className="vb-typewriter-cursor",d.textContent="|",d.setAttribute("aria-hidden","true"),t.appendChild(d)}function c(){S(t,e,i,()=>{o!==null&&setTimeout(()=>{L(t,i,()=>{setTimeout(c,400)})},o)})}setTimeout(c,n)}f.effect("typewriter",t=>{if(t.hasAttribute("data-effect-typewriter-init"))return;t.setAttribute("data-effect-typewriter-init","");let e=t.textContent.trim();if(t.setAttribute("data-typewriter-text",e),t.setAttribute("aria-label",e),!f.prefersReducedMotion())return t.textContent="",{activate(){M(t)},cleanup(){}}});var E="!<>-_\\/[]{}=+*^?#";function _(t){return t[Math.floor(Math.random()*t.length)]}function $(t){let e=t.getAttribute("data-scramble-text"),r=f.params(t),i=r.getNumber("scramble-duration",1500),n=r.get("scramble-chars")||E,s=r.getNumber("scramble-speed",30),o=e.length,a=0,u=Math.ceil(i/s);function c(){let d=a/u,l=Math.floor(d*o),h="";for(let p=0;p<o;p++)p<l?h+=e[p]:e[p]===" "?h+=" ":h+=_(n);t.textContent=h,a++,a<=u?setTimeout(c,s):t.textContent=e}c()}f.effect("scramble",t=>{if(t.hasAttribute("data-effect-scramble-init"))return;t.setAttribute("data-effect-scramble-init","");let e=t.textContent.trim();if(t.setAttribute("data-scramble-text",e),t.setAttribute("aria-label",e),f.prefersReducedMotion())return;let r=f.params(t).get("scramble-chars")||E;return t.textContent=e.replace(/\S/g,()=>_(r)),{activate(){$(t)},cleanup(){}}});function V(t){let e=t.textContent;t.setAttribute("aria-label",e),t.innerHTML="",e.split(/(\s+)/).forEach((i,n)=>{if(/^\s+$/.test(i)){t.appendChild(document.createTextNode(i));return}let s=document.createElement("span");s.className="vb-blur-chunk",s.textContent=i,s.style.setProperty("--i",String(Math.floor(n/2))),s.setAttribute("aria-hidden","true"),t.appendChild(s)})}function q(t){let e=t.textContent;t.setAttribute("aria-label",e);let r=e.split(/\s+/).filter(Boolean),i=[],n="",s=t.offsetWidth,o=document.createElement("span");o.style.visibility="hidden",o.style.position="absolute",o.style.font=getComputedStyle(t).font,document.body.appendChild(o),r.forEach(a=>{let u=n?n+" "+a:a;o.textContent=u,o.offsetWidth>s&&n?(i.push(n),n=a):n=u}),n&&i.push(n),document.body.removeChild(o),i.length===0&&i.push(e),t.innerHTML="",i.forEach((a,u)=>{let c=document.createElement("span");c.className="vb-blur-chunk",c.textContent=a,c.style.setProperty("--i",String(u)),c.setAttribute("aria-hidden","true"),t.appendChild(c),u<i.length-1&&t.appendChild(document.createTextNode(" "))})}f.effect("blur-reveal",t=>{if(t.hasAttribute("data-effect-blur-reveal-init")||(t.setAttribute("data-effect-blur-reveal-init",""),f.prefersReducedMotion()))return;let e=t.classList.contains("line")?"line":"word",r=f.params(t).get("blur-reveal-delay")||"80ms";return t.style.setProperty("--blur-delay",r),e==="line"?q(t):V(t),{activate(){t.setAttribute("data-effect-active","")},cleanup(){}}});f.effect("animate-image",t=>{if(t.hasAttribute("data-effect-animate-image-init"))return;t.setAttribute("data-effect-animate-image-init","");let e=t,r=document.createElement("div");if(r.className="animate-image-wrapper",!e.parentNode)return;e.parentNode.insertBefore(r,e),r.appendChild(e);let i=document.createElement("button");i.type="button",i.className="animate-image-toggle",i.setAttribute("aria-label","Pause animation"),r.appendChild(i);let n=e.src,s=null,o=!1;function a(){let l=document.createElement("canvas");l.width=e.naturalWidth||e.width,l.height=e.naturalHeight||e.height;let h=l.getContext("2d");if(h){h.drawImage(e,0,0);try{s=l.toDataURL("image/png")}catch{s=null}}}function u(){o||(o=!0,e.setAttribute("data-animate-image-paused",""),i.setAttribute("aria-label","Play animation"),i.classList.add("paused"),s&&(e.src=s))}function c(){o&&(o=!1,e.removeAttribute("data-animate-image-paused"),i.setAttribute("aria-label","Pause animation"),i.classList.remove("paused"),e.src=n)}i.addEventListener("click",()=>o?c():u()),e.complete&&e.naturalWidth?a():e.addEventListener("load",a,{once:!0});let d=window.matchMedia("(prefers-reduced-motion: reduce)");return(d.matches||document.documentElement.dataset.motionReduced!==void 0)&&(e.complete?(a(),u()):e.addEventListener("load",()=>{a(),u()},{once:!0})),d.addEventListener("change",l=>{l.matches&&u()}),e.hasAttribute("data-animate-image-paused")&&(e.complete?(a(),o=!1,u()):e.addEventListener("load",()=>{a(),o=!1,u()},{once:!0})),{cleanup(){r.parentNode&&(r.parentNode.insertBefore(e,r),r.remove())}}});function C(){return document.documentElement.lang||navigator.language||"en"}function B(t){return t===1?1:1-Math.pow(2,-10*t)}function F(t){let e=t.indexOf(".");return e===-1?0:t.length-e-1}function R(t,e){let r=t.getAttribute("data-locale")||C(),i=t.getAttribute("data-format-number");if(i!=null){let n={minimumFractionDigits:e,maximumFractionDigits:e};switch(i){case"currency":n.style="currency",n.currency=t.getAttribute("data-currency")||"USD";break;case"percent":n.style="percent";break;case"compact":n.notation="compact";break}try{return new Intl.NumberFormat(r,n)}catch{return null}}try{return new Intl.NumberFormat(r,{minimumFractionDigits:e,maximumFractionDigits:e})}catch{return null}}function O(t){let e=t.getAttribute("value");if(e==null)return;let r=Number(e);if(isNaN(r))return;let i=f.params(t),n=i.getNumber("ticker-start",0),s=i.getNumber("ticker-duration",1e3),o=i.get("ticker-decimals")?parseInt(i.get("ticker-decimals"),10):F(e),a=R(t,o),u=r-n;if(u===0)return;let c=null;function d(l){c||(c=l);let h=l-c,p=Math.min(h/s,1),m=B(p),y=n+u*m;t.textContent=a?a.format(y):y.toFixed(o),p<1?requestAnimationFrame(d):(t.textContent=a?a.format(r):r.toFixed(o),t.hasAttribute("data-format-number")&&t.setAttribute("data-format-number-init",""))}requestAnimationFrame(d)}f.effect("ticker",t=>{if(!t.hasAttribute("data-effect-ticker-init")&&(t.setAttribute("data-effect-ticker-init",""),!f.prefersReducedMotion()))return{activate(){O(t)},cleanup(){}}});var X=window.matchMedia("(prefers-reduced-motion: reduce)");var w=new Map;function x(t,e,r={}){let i=r.priority??10,n={impl:e,bundle:r.bundle,contract:r.contract,priority:i},s=w.get(t);if(customElements.get(t)){if(!s||s.priority>=i){s&&s.priority===i&&s.impl!==e&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${r.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${r.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=i){s.priority===i&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}". Skipping "${r.bundle}" (first wins at equal priority).`);return}w.set(t,n),customElements.define(t,e)}var g=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,r,i,n){e.addEventListener(r,i,n),this.#e.push(()=>e.removeEventListener(r,i,n))}setup(){}teardown(){}};var b=class extends g{static formAssociated=!0;#e;#s;#t;constructor(){super(),this.#e=this.attachInternals()}setup(){this.#a()}#a(){if(this.querySelector("fieldset"))return;let e=Number(this.getAttribute("value")||0);this.#s=e;let r=Number(this.getAttribute("max")||5),i=this.getAttribute("label")||"Rating",n=this.hasAttribute("allow-half"),s=this.hasAttribute("readonly"),o=this.getAttribute("icon"),u=`_sr_${this.getAttribute("name")||`star-rating-${crypto.randomUUID().slice(0,8)}`}`;s?this.#c(e,r,i,o):this.#o(e,r,i,u,n,o),this.#r(e),this.#i()}#o(e,r,i,n,s,o){let a=document.createElement("fieldset");a.setAttribute("data-rating",""),s&&a.setAttribute("data-rating-half",""),a.setAttribute("data-effect","rating");let u=document.createElement("legend");if(u.textContent=i,a.appendChild(u),s)for(let c=1;c<=r;c++){let d=c-.5,l=document.createElement("label");l.setAttribute("data-half","left");let h=document.createElement("input");h.type="radio",h.name=n,h.value=String(d),h.setAttribute("aria-label",`${d} ${d===1?"star":"stars"}`),e===d&&(h.checked=!0),l.appendChild(h),l.append(this.#n(o)),a.appendChild(l);let p=document.createElement("label");p.setAttribute("data-half","right");let m=document.createElement("input");m.type="radio",m.name=n,m.value=String(c),m.setAttribute("aria-label",`${c} ${c===1?"star":"stars"}`),e===c&&(m.checked=!0),p.appendChild(m),p.append(this.#n(o)),a.appendChild(p)}else for(let c=1;c<=r;c++){let d=document.createElement("label"),l=document.createElement("input");l.type="radio",l.name=n,l.value=String(c),l.setAttribute("aria-label",`${c} ${c===1?"star":"stars"}`),e===c&&(l.checked=!0),d.appendChild(l),d.append(this.#n(o)),a.appendChild(d)}this.appendChild(a),this.#t=a,a.addEventListener("rating:change",c=>{this.#r(c.detail.value),this.#i()}),a.addEventListener("change",c=>{let d=c.target;d.type==="radio"&&d.checked&&(this.#r(Number(d.value)),this.#i())})}#c(e,r,i,n){let s=document.createElement("fieldset");s.setAttribute("data-rating",""),s.setAttribute("data-rating-readonly",""),s.setAttribute("role","img"),s.setAttribute("aria-label",`${i}: ${e} out of ${r}`);let o=document.createElement("legend");o.textContent=i,s.appendChild(o);let a=Math.floor(e),u=e-a;for(let c=1;c<=r;c++){let d=document.createElement("span");if(d.setAttribute("aria-hidden","true"),c<=a)d.classList.add("star-filled");else if(c===a+1&&u>0){d.classList.add("star-partial"),d.style.setProperty("--_star-fill",`${u*100}%`);let l=document.createElement("span");l.classList.add("star-partial-fill"),l.append(this.#n(n)),d.appendChild(l)}else d.classList.add("star-empty");d.append(this.#n(n)),s.appendChild(d)}this.appendChild(s),this.#t=s}#n(e){if(e){let r=document.createElement("icon-wc");return r.setAttribute("name",e),r}return document.createTextNode("\u2605")}#r(e){let r=Number(e);r>0?this.#e.setFormValue(String(r)):this.#e.setFormValue(null)}#i(){this.hasAttribute("required")?this.#t?.querySelector('input[type="radio"]:checked')?this.#e.setValidity({}):this.#e.setValidity({valueMissing:!0},"Please select a rating",this.#t||this):this.#e.setValidity({})}formResetCallback(){if(this.#t){if(this.#t.querySelectorAll('input[type="radio"]').forEach(e=>{e.checked=!1}),this.#s>0){let e=this.#t.querySelector(`input[value="${this.#s}"]`);e&&(e.checked=!0)}this.#r(this.#s),this.#i()}}formStateRestoreCallback(e){if(!e||!this.#t)return;let r=this.#t.querySelector(`input[value="${e}"]`);r&&(r.checked=!0,this.#r(Number(e)),this.#i())}get value(){if(!this.#t)return Number(this.getAttribute("value")||0);let e=this.#t.querySelector('input[type="radio"]:checked');return e?Number(e.value):0}set value(e){if(!this.#t)return;this.#t.querySelectorAll('input[type="radio"]').forEach(i=>{i.checked=!1});let r=Number(e);if(r>0){let i=this.#t.querySelector(`input[value="${r}"]`);i&&(i.checked=!0)}this.#r(r),this.#i()}};x("star-rating",b);var P=1e3;function N(t){let e=document.createElement("div");e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),Object.assign(e.style,{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0,0,0,0)",whiteSpace:"nowrap",border:"0"}),e.textContent=t,document.body.appendChild(e),setTimeout(()=>e.remove(),P)}function k(t,e){t.dispatchEvent(new CustomEvent("rating:change",{bubbles:!0,detail:{value:e}}))}function D(t){let e=t.querySelector('input[type="radio"]:checked');return e?e.value:"0"}f.effect("rating",t=>{if(t.hasAttribute("data-effect-rating-init")||(t.setAttribute("data-effect-rating-init",""),t.hasAttribute("data-rating-readonly")))return;let e=D(t),r=!1;function i(o){let a=o.target.closest("label");if(!a)return;let u=a.querySelector('input[type="radio"]');u&&(r=u.checked&&u.value===e)}function n(o){if(!r)return;r=!1;let a=o.target.closest("label");if(!a)return;let u=a.querySelector('input[type="radio"]');u&&(u.checked=!1,e="0",k(t,0),N("Rating cleared"))}function s(o){o.target.type==="radio"&&(r||(e=o.target.value,k(t,Number(o.target.value)),N(`Rating: ${o.target.value} ${Number(o.target.value)===1?"star":"stars"}`)))}return t.addEventListener("mousedown",i),t.addEventListener("click",n),t.addEventListener("change",s),{cleanup(){t.removeEventListener("mousedown",i),t.removeEventListener("click",n),t.removeEventListener("change",s)}}});
|
|
1
|
+
var k=window.matchMedia("(prefers-reduced-motion: reduce)");function v(){return k.matches||document.documentElement.hasAttribute("data-motion-reduced")}var A=0,f={_effects:new Map,_triggers:new Map,_transitions:new Map,_instances:new WeakMap,_triggerCleanups:new WeakMap,_transitionCleanups:new WeakMap,_observer:null,effect(t,e){this._effects.set(t,e),document.querySelectorAll("[data-effect]").forEach(r=>{(r.getAttribute("data-effect")||"").split(/\s+/).includes(t)&&this._initEffect(r,t)})},trigger(t,e){this._triggers.set(t,e)},transition(t,e){this._transitions.set(t,e)},uid(t){return t.id?t.id:(t._vbUid||(A++,t._vbUid=`vb-${A}`),t._vbUid)},theme(t,e){this._themes=this._themes||new Map,this._themes.set(t,e)},applyTheme(t,e=document.documentElement){let r=this._themes?.get(t);if(r)for(let[i,n]of Object.entries(r))e.style.setProperty(i,n)},swap(t){return document.startViewTransition?document.startViewTransition(t):t()},observe(t=document){if(t.querySelectorAll("[data-effect]").forEach(r=>this._processElement(r)),t.querySelectorAll("[data-stagger]").forEach(r=>this._processStagger(r)),t.querySelectorAll("[data-transition]").forEach(r=>this._processTransition(r)),this._observer)return;this._observer=new MutationObserver(r=>{for(let i of r){if(i.type==="childList"){for(let n of i.addedNodes)n.nodeType===Node.ELEMENT_NODE&&this._processTree(n);for(let n of i.removedNodes)n.nodeType===Node.ELEMENT_NODE&&this._cleanupTree(n)}if(i.type==="attributes"){let n=i.target;i.attributeName==="data-effect"&&this._reconcileEffects(n),i.attributeName==="data-trigger"&&this._reconcileTrigger(n),i.attributeName==="data-stagger"&&this._processStagger(n),i.attributeName==="data-transition"&&this._processTransition(n)}}});let e=t===document?document.body:t;this._observer.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-effect","data-trigger","data-stagger","data-transition"]})},disconnect(){this._observer&&(this._observer.disconnect(),this._observer=null)},params(t){let e=getComputedStyle(t);return{get(r){return e.getPropertyValue(`--vb-${r}`).trim()},getNumber(r,i=0){let n=e.getPropertyValue(`--vb-${r}`).trim();return n?parseFloat(n):i},getTime(r,i=0){let n=e.getPropertyValue(`--vb-${r}`).trim();if(!n)return i;let s=parseFloat(n);return Number.isFinite(s)?/s\s*$/.test(n)&&!/ms\s*$/.test(n)?s*1e3:s:i},hasClass(r){return t.classList.contains(r)}}},emit(t,e,r={}){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:r}))},prefersReducedMotion:v,_processTree(t){t.hasAttribute?.("data-effect")&&this._processElement(t),t.hasAttribute?.("data-stagger")&&this._processStagger(t),t.hasAttribute?.("data-transition")&&this._processTransition(t),t.querySelectorAll?.("[data-effect]").forEach(e=>this._processElement(e)),t.querySelectorAll?.("[data-stagger]").forEach(e=>this._processStagger(e)),t.querySelectorAll?.("[data-transition]").forEach(e=>this._processTransition(e))},_cleanupTree(t){t.hasAttribute?.("data-effect")&&this._cleanupElement(t),t.hasAttribute?.("data-transition")&&this._cleanupTransition(t),t.querySelectorAll?.("[data-effect]").forEach(e=>this._cleanupElement(e)),t.querySelectorAll?.("[data-transition]").forEach(e=>this._cleanupTransition(e))},_processElement(t){if(t.hasAttribute("data-effect-processed"))return;t.setAttribute("data-effect-processed","");let e=t.getAttribute("data-effect")?.split(/\s+/).filter(Boolean)||[];for(let r of e)this._initEffect(t,r);this._wireTrigger(t,e)},_initEffect(t,e){let r=this._effects.get(e);if(!r)return;let i=this._instances.get(t);if(i?.has(e))return;v();let n=r(t);n&&(i||(i=new Map,this._instances.set(t,i)),typeof n=="function"?i.set(e,{cleanup:n}):i.set(e,n))},_wireTrigger(t,e){let r=t.getAttribute("data-trigger");if(!r){this._activateEffects(t);return}let i=r.split(/\s+/).filter(Boolean);for(let n of i){let s=n.indexOf(":"),o=s>-1?n.slice(0,s):n,a=s>-1?n.slice(s+1):null,u=this._triggers.get(o);if(!u)continue;let c=u(t,()=>this._activateEffects(t),a);if(c){let d=this._triggerCleanups.get(t);if(d){let l=d;this._triggerCleanups.set(t,()=>{l(),c()})}else this._triggerCleanups.set(t,c)}}},_activateEffects(t){t.setAttribute("data-effect-active","");let e=this._instances.get(t);if(e)for(let[,r]of e)r.activate&&r.activate()},_cleanupElement(t){let e=this._instances.get(t);if(e){for(let[,i]of e)i.cleanup&&i.cleanup();this._instances.delete(t)}let r=this._triggerCleanups.get(t);r&&(r(),this._triggerCleanups.delete(t))},_reconcileEffects(t){let e=t.getAttribute("data-effect")?.split(/\s+/).filter(Boolean)||[],r=this._instances.get(t);if(r)for(let[i,n]of r)e.includes(i)||(n.cleanup&&n.cleanup(),r.delete(i));for(let i of e)r?.has(i)||this._initEffect(t,i);t.hasAttribute("data-effect-processed")||(t.setAttribute("data-effect-processed",""),this._wireTrigger(t,e))},_reconcileTrigger(t){let e=this._triggerCleanups.get(t);e&&(e(),this._triggerCleanups.delete(t));let r=t.getAttribute("data-effect")?.split(/\s+/).filter(Boolean)||[];this._wireTrigger(t,r)},_processStagger(t){let e=t.children;for(let r=0;r<e.length;r++)e[r].style.setProperty("--vb-stagger-index",String(r))},_processTransition(t){if(t.hasAttribute("data-transition-processed"))return;t.setAttribute("data-transition-processed","");let e=t.getAttribute("data-transition");if(!e)return;let r=this._transitions.get(e);if(r){let i=r(t);i&&this._transitionCleanups.set(t,i)}else t.style.viewTransitionName=`${e}-${this.uid(t)}`},_cleanupTransition(t){let e=this._transitionCleanups.get(t);e&&(e(),this._transitionCleanups.delete(t)),t.style.viewTransitionName=""}};typeof window<"u"&&(window.VB=f);f.effect("glitch",t=>{t.hasAttribute("data-effect-glitch-init")||(t.setAttribute("data-effect-glitch-init",""),t.setAttribute("data-glitch-text",t.textContent))});function S(t,e,r,i){let n=0;function s(){n<=e.length?(t.firstChild.textContent=e.slice(0,n),n++,setTimeout(s,r)):i&&i()}s()}function L(t,e,r){let i=t.firstChild.textContent,n=i.length;function s(){n>=0?(t.firstChild.textContent=i.slice(0,n),n--,setTimeout(s,e/2)):r&&r()}s()}function M(t){let e=t.getAttribute("data-typewriter-text"),r=f.params(t),i=r.getTime("typewriter-speed",50),n=r.getTime("typewriter-delay",0),o=t.classList.contains("loop")?2e3:null;t.textContent="";let a=document.createTextNode("");if(t.appendChild(a),!t.classList.contains("no-cursor")){let d=document.createElement("span");d.className="vb-typewriter-cursor",d.textContent="|",d.setAttribute("aria-hidden","true"),t.appendChild(d)}function c(){S(t,e,i,()=>{o!==null&&setTimeout(()=>{L(t,i,()=>{setTimeout(c,400)})},o)})}setTimeout(c,n)}f.effect("typewriter",t=>{if(t.hasAttribute("data-effect-typewriter-init"))return;t.setAttribute("data-effect-typewriter-init","");let e=t.textContent.trim();if(t.setAttribute("data-typewriter-text",e),t.setAttribute("aria-label",e),!f.prefersReducedMotion())return t.textContent="",{activate(){M(t)},cleanup(){}}});var E="!<>-_\\/[]{}=+*^?#";function _(t){return t[Math.floor(Math.random()*t.length)]}function $(t){let e=t.getAttribute("data-scramble-text"),r=f.params(t),i=r.getTime("scramble-duration",1500),n=r.get("scramble-chars")||E,s=r.getTime("scramble-speed",30),o=e.length,a=0,u=Math.ceil(i/s);function c(){let d=a/u,l=Math.floor(d*o),h="";for(let p=0;p<o;p++)p<l?h+=e[p]:e[p]===" "?h+=" ":h+=_(n);t.textContent=h,a++,a<=u?setTimeout(c,s):t.textContent=e}c()}f.effect("scramble",t=>{if(t.hasAttribute("data-effect-scramble-init"))return;t.setAttribute("data-effect-scramble-init","");let e=t.textContent.trim();if(t.setAttribute("data-scramble-text",e),t.setAttribute("aria-label",e),f.prefersReducedMotion())return;let r=f.params(t).get("scramble-chars")||E;return t.textContent=e.replace(/\S/g,()=>_(r)),{activate(){$(t)},cleanup(){}}});function V(t){let e=t.textContent;t.setAttribute("aria-label",e),t.innerHTML="",e.split(/(\s+)/).forEach((i,n)=>{if(/^\s+$/.test(i)){t.appendChild(document.createTextNode(i));return}let s=document.createElement("span");s.className="vb-blur-chunk",s.textContent=i,s.style.setProperty("--i",String(Math.floor(n/2))),s.setAttribute("aria-hidden","true"),t.appendChild(s)})}function q(t){let e=t.textContent;t.setAttribute("aria-label",e);let r=e.split(/\s+/).filter(Boolean),i=[],n="",s=t.offsetWidth,o=document.createElement("span");o.style.visibility="hidden",o.style.position="absolute",o.style.font=getComputedStyle(t).font,document.body.appendChild(o),r.forEach(a=>{let u=n?n+" "+a:a;o.textContent=u,o.offsetWidth>s&&n?(i.push(n),n=a):n=u}),n&&i.push(n),document.body.removeChild(o),i.length===0&&i.push(e),t.innerHTML="",i.forEach((a,u)=>{let c=document.createElement("span");c.className="vb-blur-chunk",c.textContent=a,c.style.setProperty("--i",String(u)),c.setAttribute("aria-hidden","true"),t.appendChild(c),u<i.length-1&&t.appendChild(document.createTextNode(" "))})}f.effect("blur-reveal",t=>{if(t.hasAttribute("data-effect-blur-reveal-init")||(t.setAttribute("data-effect-blur-reveal-init",""),f.prefersReducedMotion()))return;let e=t.classList.contains("line")?"line":"word",r=f.params(t).get("blur-reveal-delay")||"80ms";return t.style.setProperty("--blur-delay",r),e==="line"?q(t):V(t),{activate(){t.setAttribute("data-effect-active","")},cleanup(){}}});f.effect("animate-image",t=>{if(t.hasAttribute("data-effect-animate-image-init"))return;t.setAttribute("data-effect-animate-image-init","");let e=t,r=document.createElement("div");if(r.className="animate-image-wrapper",!e.parentNode)return;e.parentNode.insertBefore(r,e),r.appendChild(e);let i=document.createElement("button");i.type="button",i.className="animate-image-toggle",i.setAttribute("aria-label","Pause animation"),r.appendChild(i);let n=e.src,s=null,o=!1;function a(){let l=document.createElement("canvas");l.width=e.naturalWidth||e.width,l.height=e.naturalHeight||e.height;let h=l.getContext("2d");if(h){h.drawImage(e,0,0);try{s=l.toDataURL("image/png")}catch{s=null}}}function u(){o||(o=!0,e.setAttribute("data-animate-image-paused",""),i.setAttribute("aria-label","Play animation"),i.classList.add("paused"),s&&(e.src=s))}function c(){o&&(o=!1,e.removeAttribute("data-animate-image-paused"),i.setAttribute("aria-label","Pause animation"),i.classList.remove("paused"),e.src=n)}i.addEventListener("click",()=>o?c():u()),e.complete&&e.naturalWidth?a():e.addEventListener("load",a,{once:!0});let d=window.matchMedia("(prefers-reduced-motion: reduce)");return(d.matches||document.documentElement.dataset.motionReduced!==void 0)&&(e.complete?(a(),u()):e.addEventListener("load",()=>{a(),u()},{once:!0})),d.addEventListener("change",l=>{l.matches&&u()}),e.hasAttribute("data-animate-image-paused")&&(e.complete?(a(),o=!1,u()):e.addEventListener("load",()=>{a(),o=!1,u()},{once:!0})),{cleanup(){r.parentNode&&(r.parentNode.insertBefore(e,r),r.remove())}}});function C(){return document.documentElement.lang||navigator.language||"en"}function F(t){return t===1?1:1-Math.pow(2,-10*t)}function B(t){let e=t.indexOf(".");return e===-1?0:t.length-e-1}function R(t,e){let r=t.getAttribute("data-locale")||C(),i=t.getAttribute("data-format-number");if(i!=null){let n={minimumFractionDigits:e,maximumFractionDigits:e};switch(i){case"currency":n.style="currency",n.currency=t.getAttribute("data-currency")||"USD";break;case"percent":n.style="percent";break;case"compact":n.notation="compact";break}try{return new Intl.NumberFormat(r,n)}catch{return null}}try{return new Intl.NumberFormat(r,{minimumFractionDigits:e,maximumFractionDigits:e})}catch{return null}}function O(t){let e=t.getAttribute("value");if(e==null)return;let r=Number(e);if(isNaN(r))return;let i=f.params(t),n=i.getNumber("ticker-start",0),s=i.getTime("ticker-duration",1e3),o=i.get("ticker-decimals")?parseInt(i.get("ticker-decimals"),10):B(e),a=R(t,o),u=r-n;if(u===0)return;let c=null;function d(l){c||(c=l);let h=l-c,p=Math.min(h/s,1),m=F(p),y=n+u*m;t.textContent=a?a.format(y):y.toFixed(o),p<1?requestAnimationFrame(d):(t.textContent=a?a.format(r):r.toFixed(o),t.hasAttribute("data-format-number")&&t.setAttribute("data-format-number-init",""))}requestAnimationFrame(d)}f.effect("ticker",t=>{if(!t.hasAttribute("data-effect-ticker-init")&&(t.setAttribute("data-effect-ticker-init",""),!f.prefersReducedMotion()))return{activate(){O(t)},cleanup(){}}});var X=window.matchMedia("(prefers-reduced-motion: reduce)");var w=new Map;function x(t,e,r={}){let i=r.priority??10,n={impl:e,bundle:r.bundle,contract:r.contract,priority:i},s=w.get(t);if(customElements.get(t)){if(!s||s.priority>=i){s&&s.priority===i&&s.impl!==e&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${r.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${r.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=i){s.priority===i&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${s.bundle}". Skipping "${r.bundle}" (first wins at equal priority).`);return}w.set(t,n),customElements.define(t,e)}var g=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,r,i,n){e.addEventListener(r,i,n),this.#e.push(()=>e.removeEventListener(r,i,n))}setup(){}teardown(){}};var b=class extends g{static formAssociated=!0;#e;#s;#t;constructor(){super(),this.#e=this.attachInternals()}setup(){this.#a()}#a(){if(this.querySelector("fieldset"))return;let e=Number(this.getAttribute("value")||0);this.#s=e;let r=Number(this.getAttribute("max")||5),i=this.getAttribute("label")||"Rating",n=this.hasAttribute("allow-half"),s=this.hasAttribute("readonly"),o=this.getAttribute("icon"),u=`_sr_${this.getAttribute("name")||`star-rating-${crypto.randomUUID().slice(0,8)}`}`;s?this.#c(e,r,i,o):this.#o(e,r,i,u,n,o),this.#r(e),this.#i()}#o(e,r,i,n,s,o){let a=document.createElement("fieldset");a.setAttribute("data-rating",""),s&&a.setAttribute("data-rating-half",""),a.setAttribute("data-effect","rating");let u=document.createElement("legend");if(u.textContent=i,a.appendChild(u),s)for(let c=1;c<=r;c++){let d=c-.5,l=document.createElement("label");l.setAttribute("data-half","left");let h=document.createElement("input");h.type="radio",h.name=n,h.value=String(d),h.setAttribute("aria-label",`${d} ${d===1?"star":"stars"}`),e===d&&(h.checked=!0),l.appendChild(h),l.append(this.#n(o)),a.appendChild(l);let p=document.createElement("label");p.setAttribute("data-half","right");let m=document.createElement("input");m.type="radio",m.name=n,m.value=String(c),m.setAttribute("aria-label",`${c} ${c===1?"star":"stars"}`),e===c&&(m.checked=!0),p.appendChild(m),p.append(this.#n(o)),a.appendChild(p)}else for(let c=1;c<=r;c++){let d=document.createElement("label"),l=document.createElement("input");l.type="radio",l.name=n,l.value=String(c),l.setAttribute("aria-label",`${c} ${c===1?"star":"stars"}`),e===c&&(l.checked=!0),d.appendChild(l),d.append(this.#n(o)),a.appendChild(d)}this.appendChild(a),this.#t=a,a.addEventListener("rating:change",c=>{this.#r(c.detail.value),this.#i()}),a.addEventListener("change",c=>{let d=c.target;d.type==="radio"&&d.checked&&(this.#r(Number(d.value)),this.#i())})}#c(e,r,i,n){let s=document.createElement("fieldset");s.setAttribute("data-rating",""),s.setAttribute("data-rating-readonly",""),s.setAttribute("role","img"),s.setAttribute("aria-label",`${i}: ${e} out of ${r}`);let o=document.createElement("legend");o.textContent=i,s.appendChild(o);let a=Math.floor(e),u=e-a;for(let c=1;c<=r;c++){let d=document.createElement("span");if(d.setAttribute("aria-hidden","true"),c<=a)d.classList.add("star-filled");else if(c===a+1&&u>0){d.classList.add("star-partial"),d.style.setProperty("--_star-fill",`${u*100}%`);let l=document.createElement("span");l.classList.add("star-partial-fill"),l.append(this.#n(n)),d.appendChild(l)}else d.classList.add("star-empty");d.append(this.#n(n)),s.appendChild(d)}this.appendChild(s),this.#t=s}#n(e){if(e){let r=document.createElement("icon-wc");return r.setAttribute("name",e),r}return document.createTextNode("\u2605")}#r(e){let r=Number(e);r>0?this.#e.setFormValue(String(r)):this.#e.setFormValue(null)}#i(){this.hasAttribute("required")?this.#t?.querySelector('input[type="radio"]:checked')?this.#e.setValidity({}):this.#e.setValidity({valueMissing:!0},"Please select a rating",this.#t||this):this.#e.setValidity({})}formResetCallback(){if(this.#t){if(this.#t.querySelectorAll('input[type="radio"]').forEach(e=>{e.checked=!1}),this.#s>0){let e=this.#t.querySelector(`input[value="${this.#s}"]`);e&&(e.checked=!0)}this.#r(this.#s),this.#i()}}formStateRestoreCallback(e){if(!e||!this.#t)return;let r=this.#t.querySelector(`input[value="${e}"]`);r&&(r.checked=!0,this.#r(Number(e)),this.#i())}get value(){if(!this.#t)return Number(this.getAttribute("value")||0);let e=this.#t.querySelector('input[type="radio"]:checked');return e?Number(e.value):0}set value(e){if(!this.#t)return;this.#t.querySelectorAll('input[type="radio"]').forEach(i=>{i.checked=!1});let r=Number(e);if(r>0){let i=this.#t.querySelector(`input[value="${r}"]`);i&&(i.checked=!0)}this.#r(r),this.#i()}};x("star-rating",b);var P=1e3;function N(t){let e=document.createElement("div");e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),Object.assign(e.style,{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0,0,0,0)",whiteSpace:"nowrap",border:"0"}),e.textContent=t,document.body.appendChild(e),setTimeout(()=>e.remove(),P)}function T(t,e){t.dispatchEvent(new CustomEvent("rating:change",{bubbles:!0,detail:{value:e}}))}function D(t){let e=t.querySelector('input[type="radio"]:checked');return e?e.value:"0"}f.effect("rating",t=>{if(t.hasAttribute("data-effect-rating-init")||(t.setAttribute("data-effect-rating-init",""),t.hasAttribute("data-rating-readonly")))return;let e=D(t),r=!1;function i(o){let a=o.target.closest("label");if(!a)return;let u=a.querySelector('input[type="radio"]');u&&(r=u.checked&&u.value===e)}function n(o){if(!r)return;r=!1;let a=o.target.closest("label");if(!a)return;let u=a.querySelector('input[type="radio"]');u&&(u.checked=!1,e="0",T(t,0),N("Rating cleared"))}function s(o){o.target.type==="radio"&&(r||(e=o.target.value,T(t,Number(o.target.value)),N(`Rating: ${o.target.value} ${Number(o.target.value)===1?"star":"stars"}`)))}return t.addEventListener("mousedown",i),t.addEventListener("click",n),t.addEventListener("change",s),{cleanup(){t.removeEventListener("mousedown",i),t.removeEventListener("click",n),t.removeEventListener("change",s)}}});
|
|
2
2
|
//# sourceMappingURL=effects.full.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@font-face{font-family:Cherry Bomb One;font-style:normal;font-weight:400;font-display:swap;src:url("./kawaii/fonts/CherryBombOne-Regular.woff2") format("woff2")}@font-face{font-family:Coiny;font-style:normal;font-weight:400;font-display:swap;src:url("./kawaii/fonts/Coiny-Regular.woff2") format("woff2")}@font-face{font-family:Nunito;font-style:normal;font-weight:400 700;font-display:swap;src:url(https://fonts.gstatic.com/s/nunito/v32/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@layer bundle-theme{[data-theme~=kawaii]{color-scheme:light;--theme-border-style: kawaii;--color-surface: oklch(98% .02 350);--color-surface-alt: oklch(95% .04 350);--color-surface-raised: oklch(100% 0 0);--color-surface-sunken: oklch(92% .05 350);--color-background: oklch(97% .03 350);--color-text: oklch(25% .08 330);--color-text-muted: oklch(40% .06 330);--color-text-subtle: oklch(50% .04 330);--color-primary: oklch(55% .18 350);--color-primary-hover: oklch(50% .2 350);--color-primary-subtle: oklch(95% .05 350);--color-accent: oklch(45% .12 180);--color-accent-hover: oklch(40% .14 180);--color-accent-subtle: oklch(95% .04 180);--_kawaii-lavender: oklch(55% .12 290);--_kawaii-peach: oklch(55% .12 60);--_kawaii-sky: oklch(50% .12 220);--color-border: oklch(90% .05 350);--color-border-muted: oklch(94% .03 350);--color-border-strong: oklch(75% .15 350);--color-interactive: var(--color-primary);--color-interactive-hover: var(--color-primary-hover);--font-sans: "Nunito", "Quicksand", "Varela Round", system-ui, sans-serif;--font-display: "Cherry Bomb One", "Nunito", cursive;--font-accent: "Coiny", "Nunito", cursive;--font-mono: "Fira Code", monospace;--line-height-normal: 1.6;--line-height-tight: 1.3;--radius-xs: .5rem;--radius-s: .75rem;--radius-m: 1rem;--radius-l: 1.5rem;--radius-xl: 2rem;--radius-2xl: 3rem;--radius-full: 9999px;--shadow-xs: 0 2px 4px oklch(75% .15 350 / .15);--shadow-sm: 0 4px 8px oklch(75% .15 350 / .2);--shadow-md: 0 6px 16px oklch(75% .15 350 / .25);--shadow-lg: 0 10px 24px oklch(75% .15 350 / .3);--shadow-xl: 0 16px 32px oklch(75% .15 350 / .35);--shadow-2xl: 0 24px 48px oklch(75% .15 350 / .4);--duration-instant: 50ms;--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s;--ease-default: cubic-bezier(.34, 1.56, .64, 1);--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--shape-depth: 8%;--shape-bevel: 16px}[data-theme~=kawaii][data-mode=dark]{color-scheme:dark;--color-surface: oklch(18% .04 290);--color-surface-alt: oklch(22% .05 290);--color-surface-raised: oklch(25% .04 290);--color-background: oklch(12% .04 290);--color-text: oklch(
|
|
1
|
+
@font-face{font-family:Cherry Bomb One;font-style:normal;font-weight:400;font-display:swap;src:url("./kawaii/fonts/CherryBombOne-Regular.woff2") format("woff2")}@font-face{font-family:Coiny;font-style:normal;font-weight:400;font-display:swap;src:url("./kawaii/fonts/Coiny-Regular.woff2") format("woff2")}@font-face{font-family:Nunito;font-style:normal;font-weight:400 700;font-display:swap;src:url(https://fonts.gstatic.com/s/nunito/v32/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@layer bundle-theme{[data-theme~=kawaii]{color-scheme:light;--theme-border-style: kawaii;--color-surface: oklch(98% .02 350);--color-surface-alt: oklch(95% .04 350);--color-surface-raised: oklch(100% 0 0);--color-surface-sunken: oklch(92% .05 350);--color-background: oklch(97% .03 350);--color-text: oklch(25% .08 330);--color-text-muted: oklch(40% .06 330);--color-text-subtle: oklch(50% .04 330);--color-primary: oklch(55% .18 350);--color-primary-hover: oklch(50% .2 350);--color-primary-subtle: oklch(95% .05 350);--color-accent: oklch(45% .12 180);--color-accent-hover: oklch(40% .14 180);--color-accent-subtle: oklch(95% .04 180);--_kawaii-lavender: oklch(55% .12 290);--_kawaii-peach: oklch(55% .12 60);--_kawaii-sky: oklch(50% .12 220);--color-border: oklch(90% .05 350);--color-border-muted: oklch(94% .03 350);--color-border-strong: oklch(75% .15 350);--color-interactive: var(--color-primary);--color-interactive-hover: var(--color-primary-hover);--font-sans: "Nunito", "Quicksand", "Varela Round", system-ui, sans-serif;--font-display: "Cherry Bomb One", "Nunito", cursive;--font-accent: "Coiny", "Nunito", cursive;--font-mono: "Fira Code", monospace;--line-height-normal: 1.6;--line-height-tight: 1.3;--radius-xs: .5rem;--radius-s: .75rem;--radius-m: 1rem;--radius-l: 1.5rem;--radius-xl: 2rem;--radius-2xl: 3rem;--radius-full: 9999px;--shadow-xs: 0 2px 4px oklch(75% .15 350 / .15);--shadow-sm: 0 4px 8px oklch(75% .15 350 / .2);--shadow-md: 0 6px 16px oklch(75% .15 350 / .25);--shadow-lg: 0 10px 24px oklch(75% .15 350 / .3);--shadow-xl: 0 16px 32px oklch(75% .15 350 / .35);--shadow-2xl: 0 24px 48px oklch(75% .15 350 / .4);--duration-instant: 50ms;--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s;--ease-default: cubic-bezier(.34, 1.56, .64, 1);--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--shape-depth: 8%;--shape-bevel: 16px}[data-theme~=kawaii][data-mode=dark]{color-scheme:dark;--color-surface: oklch(18% .04 290);--color-surface-alt: oklch(22% .05 290);--color-surface-raised: oklch(25% .04 290);--color-background: oklch(12% .04 290);--color-text: oklch(95% .01 350);--color-text-muted: oklch(80% .02 350);--color-text-subtle: oklch(65% .02 350);--color-hover-bg: oklch(25% .06 350);--color-surface-overlay: oklch(22% .05 290);--color-primary: oklch(75% .18 350);--color-accent: oklch(75% .15 180);--_kawaii-lavender: oklch(75% .12 290);--_kawaii-peach: oklch(75% .12 60);--_kawaii-sky: oklch(70% .12 220);--color-border: oklch(35% .05 290)}}
|
|
2
2
|
/*# sourceMappingURL=kawaii.theme.css.map */
|
|
3
3
|
|
|
4
4
|
@layer bundle-effects{@keyframes vb-kawaii-sparkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}@keyframes vb-kawaii-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes vb-kawaii-wiggle{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes vb-kawaii-float{0%,to{transform:translateY(0) rotate(0);opacity:1}25%{transform:translateY(-8px) rotate(5deg)}50%{transform:translateY(-3px) rotate(-3deg);opacity:.8}75%{transform:translateY(-10px) rotate(2deg)}}@keyframes vb-kawaii-starburst{0%{transform:rotate(0)}to{transform:rotate(360deg)}}[data-effect~=starburst]{position:relative;overflow:hidden;background:linear-gradient(180deg,#ccc6ff,oklch(90% .1 340) 40%,oklch(95% .06 60))}[data-effect~=starburst]:before{content:"";position:absolute;inset:-50%;width:200%;height:200%;background:repeating-conic-gradient(from 0deg,oklch(92% .05 300 / .4) 0deg 10deg,transparent 10deg 20deg);animation:vb-kawaii-starburst 60s linear infinite;pointer-events:none;z-index:0}[data-effect~=starburst]:after{content:"";position:absolute;bottom:0;left:0;right:0;height:40%;background:radial-gradient(ellipse 120px 80px at 10% 90%,oklch(95% .06 350 / .9) 0%,transparent 100%),radial-gradient(ellipse 160px 100px at 30% 85%,oklch(92% .08 290 / .85) 0%,transparent 100%),radial-gradient(ellipse 140px 90px at 55% 92%,oklch(95% .05 200 / .9) 0%,transparent 100%),radial-gradient(ellipse 180px 110px at 75% 80%,oklch(93% .07 350 / .85) 0%,transparent 100%),radial-gradient(ellipse 120px 80px at 95% 88%,oklch(94% .06 290 / .9) 0%,transparent 100%);pointer-events:none;z-index:1}[data-effect~=starburst]>*{position:relative;z-index:2}[data-effect~=sparkle]{position:relative;display:inline-block}[data-effect~=sparkle]:before,[data-effect~=sparkle]:after{position:absolute;font-size:.6em;pointer-events:none;animation:vb-kawaii-float 3s ease-in-out infinite}[data-effect~=sparkle]:before{content:"\2726";top:-.3em;right:-.5em;color:oklch(75% .18 60);animation-delay:0s}[data-effect~=sparkle]:after{content:"\2726";bottom:-.2em;left:-.4em;color:#9e8cf4;animation-delay:-1.5s;font-size:.4em}[data-effect~=bounce]{transition:transform .3s cubic-bezier(.68,-.55,.265,1.55)}[data-effect~=bounce]:hover{animation:vb-kawaii-bounce .6s ease-in-out}[data-effect~=wiggle]{display:inline-block;animation:vb-kawaii-wiggle 2s ease-in-out infinite}[data-effect~=wiggle][data-trigger~=hover]{animation:none}[data-effect~=wiggle][data-trigger~=hover]:hover{animation:vb-kawaii-wiggle .4s ease-in-out}[data-theme~=kawaii]{--kawaii-scallop-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' rx='24' fill='white'/%3E%3Ccircle cx='14' cy='0' r='10' fill='white'/%3E%3Ccircle cx='38' cy='0' r='10' fill='white'/%3E%3Ccircle cx='62' cy='0' r='10' fill='white'/%3E%3Ccircle cx='86' cy='0' r='10' fill='white'/%3E%3Ccircle cx='110' cy='0' r='10' fill='white'/%3E%3Ccircle cx='134' cy='0' r='10' fill='white'/%3E%3Ccircle cx='158' cy='0' r='10' fill='white'/%3E%3Ccircle cx='182' cy='0' r='10' fill='white'/%3E%3Ccircle cx='14' cy='200' r='10' fill='white'/%3E%3Ccircle cx='38' cy='200' r='10' fill='white'/%3E%3Ccircle cx='62' cy='200' r='10' fill='white'/%3E%3Ccircle cx='86' cy='200' r='10' fill='white'/%3E%3Ccircle cx='110' cy='200' r='10' fill='white'/%3E%3Ccircle cx='134' cy='200' r='10' fill='white'/%3E%3Ccircle cx='158' cy='200' r='10' fill='white'/%3E%3Ccircle cx='182' cy='200' r='10' fill='white'/%3E%3C/svg%3E")}[data-theme~=kawaii] :is(main,article) hr:not([data-ornament]):not(:is(.wave,.zigzag,.scallop,.diamonds,.dots)){border:none;height:2rem;background:transparent;position:relative;margin-block:2rem}[data-theme~=kawaii] :is(main,article) hr:not([data-ornament]):not(:is(.wave,.zigzag,.scallop,.diamonds,.dots)):before{content:"\2661\2726\2661\2726\2661";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--color-primary);font-size:1.25rem;letter-spacing:.5rem;animation:vb-kawaii-sparkle 2s ease-in-out infinite}[data-theme~=kawaii] :is(main,article) h1{color:var(--color-primary);font-family:var(--font-display, var(--font-sans))}[data-theme~=kawaii] :is(main,article) h1:before{content:"\273f"}[data-theme~=kawaii] :is(main,article) h1:after{content:" \273f"}[data-theme~=kawaii] :is(main,article) h2{color:var(--_kawaii-lavender, oklch(55% .12 290))}[data-theme~=kawaii] :is(main,article) h2:before{content:"\2605";animation:vb-kawaii-sparkle 1.5s ease-in-out infinite}[data-theme~=kawaii] :is(main,article) h3{color:var(--color-accent)}[data-theme~=kawaii] :is(main,article) button,[data-theme~=kawaii] :is(main,article) .button{border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-primary),var(--_kawaii-lavender, oklch(55% .12 290)));border:none;color:#fff;font-weight:700;box-shadow:var(--shadow-md);transition:all .3s cubic-bezier(.68,-.55,.265,1.55)}[data-theme~=kawaii] :is(main,article) button:hover,[data-theme~=kawaii] :is(main,article) .button:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-lg)}[data-theme~=kawaii] :is(main,article) a:not([class]){color:var(--color-primary);text-decoration:none;position:relative}[data-theme~=kawaii] :is(main,article) a:not([class]):after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--color-primary),var(--_kawaii-lavender, oklch(55% .12 290)),var(--color-accent));border-radius:var(--radius-full);transform:scaleX(0);transition:transform .3s cubic-bezier(.68,-.55,.265,1.55)}[data-theme~=kawaii] :is(main,article) a:not([class]):hover:after{transform:scaleX(1)}[data-theme~=kawaii] article :not(nav)>ul:not([class]){list-style:none}[data-theme~=kawaii] article :not(nav)>ul:not([class])>li:before{content:"\2661";color:var(--color-primary);margin-inline-end:.5rem}[data-theme~=kawaii] :is(main,article) blockquote:not([data-callout]){background:linear-gradient(135deg,var(--color-primary-subtle),oklch(95% .04 290));border:none;border-radius:var(--radius-xl);padding:1.5rem 2rem;position:relative;mask-image:var(--kawaii-scallop-mask);mask-size:cover;-webkit-mask-image:var(--kawaii-scallop-mask);-webkit-mask-size:cover}[data-theme~=kawaii] :is(main,article) blockquote:not([data-callout]):before{content:"\1f4ad";position:absolute;top:-1rem;left:1.5rem;font-size:2rem}[data-theme~=kawaii] ::selection{background:var(--color-primary);color:#fff}[data-theme~=kawaii] :is(main,article) code{background:var(--color-accent-subtle);color:oklch(35% .12 180);border-radius:var(--radius-s);padding:.125rem .375rem}@media(prefers-reduced-motion:reduce){[data-effect~=sparkle]:before,[data-effect~=sparkle]:after,[data-effect~=wiggle],[data-effect~=starburst]:before{animation:none}}:root[data-motion-reduced] [data-effect~=sparkle]:before,:root[data-motion-reduced] [data-effect~=sparkle]:after,:root[data-motion-reduced] [data-effect~=wiggle],:root[data-motion-reduced] [data-effect~=starburst]:before{animation:none}@media print{[data-effect~=starburst],[data-effect~=sparkle],[data-effect~=bounce],[data-effect~=wiggle]{animation:none!important;transform:none!important}[data-effect~=starburst]:before,[data-effect~=starburst]:after,[data-effect~=sparkle]:before,[data-effect~=sparkle]:after{display:none!important}}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var _=window.matchMedia("(prefers-reduced-motion: reduce)");function l(){return _.matches||document.documentElement.hasAttribute("data-motion-reduced")}var p=0,a={_effects:new Map,_triggers:new Map,_transitions:new Map,_instances:new WeakMap,_triggerCleanups:new WeakMap,_transitionCleanups:new WeakMap,_observer:null,effect(t,e){this._effects.set(t,e),document.querySelectorAll("[data-effect]").forEach(i=>{(i.getAttribute("data-effect")||"").split(/\s+/).includes(t)&&this._initEffect(i,t)})},trigger(t,e){this._triggers.set(t,e)},transition(t,e){this._transitions.set(t,e)},uid(t){return t.id?t.id:(t._vbUid||(p++,t._vbUid=`vb-${p}`),t._vbUid)},theme(t,e){this._themes=this._themes||new Map,this._themes.set(t,e)},applyTheme(t,e=document.documentElement){let i=this._themes?.get(t);if(i)for(let[s,r]of Object.entries(i))e.style.setProperty(s,r)},swap(t){return document.startViewTransition?document.startViewTransition(t):t()},observe(t=document){if(t.querySelectorAll("[data-effect]").forEach(i=>this._processElement(i)),t.querySelectorAll("[data-stagger]").forEach(i=>this._processStagger(i)),t.querySelectorAll("[data-transition]").forEach(i=>this._processTransition(i)),this._observer)return;this._observer=new MutationObserver(i=>{for(let s of i){if(s.type==="childList"){for(let r of s.addedNodes)r.nodeType===Node.ELEMENT_NODE&&this._processTree(r);for(let r of s.removedNodes)r.nodeType===Node.ELEMENT_NODE&&this._cleanupTree(r)}if(s.type==="attributes"){let r=s.target;s.attributeName==="data-effect"&&this._reconcileEffects(r),s.attributeName==="data-trigger"&&this._reconcileTrigger(r),s.attributeName==="data-stagger"&&this._processStagger(r),s.attributeName==="data-transition"&&this._processTransition(r)}}});let e=t===document?document.body:t;this._observer.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-effect","data-trigger","data-stagger","data-transition"]})},disconnect(){this._observer&&(this._observer.disconnect(),this._observer=null)},params(t){let e=getComputedStyle(t);return{get(i){return e.getPropertyValue(`--vb-${i}`).trim()},getNumber(i,s=0){let r=e.getPropertyValue(`--vb-${i}`).trim();return r?parseFloat(r):s},getTime(i,s=0){let r=e.getPropertyValue(`--vb-${i}`).trim();if(!r)return s;let n=parseFloat(r);return Number.isFinite(n)?/s\s*$/.test(r)&&!/ms\s*$/.test(r)?n*1e3:n:s},hasClass(i){return t.classList.contains(i)}}},emit(t,e,i={}){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:i}))},prefersReducedMotion:l,_processTree(t){t.hasAttribute?.("data-effect")&&this._processElement(t),t.hasAttribute?.("data-stagger")&&this._processStagger(t),t.hasAttribute?.("data-transition")&&this._processTransition(t),t.querySelectorAll?.("[data-effect]").forEach(e=>this._processElement(e)),t.querySelectorAll?.("[data-stagger]").forEach(e=>this._processStagger(e)),t.querySelectorAll?.("[data-transition]").forEach(e=>this._processTransition(e))},_cleanupTree(t){t.hasAttribute?.("data-effect")&&this._cleanupElement(t),t.hasAttribute?.("data-transition")&&this._cleanupTransition(t),t.querySelectorAll?.("[data-effect]").forEach(e=>this._cleanupElement(e)),t.querySelectorAll?.("[data-transition]").forEach(e=>this._cleanupTransition(e))},_processElement(t){if(t.hasAttribute("data-effect-processed"))return;t.setAttribute("data-effect-processed","");let e=t.getAttribute("data-effect")?.split(/\s+/).filter(Boolean)||[];for(let i of e)this._initEffect(t,i);this._wireTrigger(t,e)},_initEffect(t,e){let i=this._effects.get(e);if(!i)return;let s=this._instances.get(t);if(s?.has(e))return;l();let r=i(t);r&&(s||(s=new Map,this._instances.set(t,s)),typeof r=="function"?s.set(e,{cleanup:r}):s.set(e,r))},_wireTrigger(t,e){let i=t.getAttribute("data-trigger");if(!i){this._activateEffects(t);return}let s=i.split(/\s+/).filter(Boolean);for(let r of s){let n=r.indexOf(":"),h=n>-1?r.slice(0,n):r,g=n>-1?r.slice(n+1):null,u=this._triggers.get(h);if(!u)continue;let f=u(t,()=>this._activateEffects(t),g);if(f){let d=this._triggerCleanups.get(t);if(d){let m=d;this._triggerCleanups.set(t,()=>{m(),f()})}else this._triggerCleanups.set(t,f)}}},_activateEffects(t){t.setAttribute("data-effect-active","");let e=this._instances.get(t);if(e)for(let[,i]of e)i.activate&&i.activate()},_cleanupElement(t){let e=this._instances.get(t);if(e){for(let[,s]of e)s.cleanup&&s.cleanup();this._instances.delete(t)}let i=this._triggerCleanups.get(t);i&&(i(),this._triggerCleanups.delete(t))},_reconcileEffects(t){let e=t.getAttribute("data-effect")?.split(/\s+/).filter(Boolean)||[],i=this._instances.get(t);if(i)for(let[s,r]of i)e.includes(s)||(r.cleanup&&r.cleanup(),i.delete(s));for(let s of e)i?.has(s)||this._initEffect(t,s);t.hasAttribute("data-effect-processed")||(t.setAttribute("data-effect-processed",""),this._wireTrigger(t,e))},_reconcileTrigger(t){let e=this._triggerCleanups.get(t);e&&(e(),this._triggerCleanups.delete(t));let i=t.getAttribute("data-effect")?.split(/\s+/).filter(Boolean)||[];this._wireTrigger(t,i)},_processStagger(t){let e=t.children;for(let i=0;i<e.length;i++)e[i].style.setProperty("--vb-stagger-index",String(i))},_processTransition(t){if(t.hasAttribute("data-transition-processed"))return;t.setAttribute("data-transition-processed","");let e=t.getAttribute("data-transition");if(!e)return;let i=this._transitions.get(e);if(i){let s=i(t);s&&this._transitionCleanups.set(t,s)}else t.style.viewTransitionName=`${e}-${this.uid(t)}`},_cleanupTransition(t){let e=this._transitionCleanups.get(t);e&&(e(),this._transitionCleanups.delete(t)),t.style.viewTransitionName=""}};typeof window<"u"&&(window.VB=a);var o=["\u2726","\u2727","\u22C6","\u2661","\u2606"],c=["oklch(75% 0.18 350)","oklch(70% 0.15 290)","oklch(75% 0.12 60)","oklch(70% 0.12 220)","oklch(65% 0.15 180)"];a.effect("particles",t=>{if(t._sparkleInterval)return;if(a.prefersReducedMotion()){getComputedStyle(t).position==="static"&&(t.style.position="relative");for(let r=0;r<5;r++){let n=document.createElement("span");n.textContent=o[Math.floor(Math.random()*o.length)],n.setAttribute("aria-hidden","true"),n.style.cssText=`
|
|
2
2
|
position: absolute; pointer-events: none;
|
|
3
3
|
font-size: ${.5+Math.random()*.6}rem;
|
|
4
4
|
color: ${c[Math.floor(Math.random()*c.length)]};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@font-face{font-family:Cherry Bomb One;font-style:normal;font-weight:400;font-display:swap;src:url("./kawaii/fonts/CherryBombOne-Regular.woff2") format("woff2")}@font-face{font-family:Coiny;font-style:normal;font-weight:400;font-display:swap;src:url("./kawaii/fonts/Coiny-Regular.woff2") format("woff2")}@font-face{font-family:Nunito;font-style:normal;font-weight:400 700;font-display:swap;src:url(https://fonts.gstatic.com/s/nunito/v32/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@layer bundle-theme{[data-theme~=kawaii]{color-scheme:light;--theme-border-style: kawaii;--color-surface: oklch(98% .02 350);--color-surface-alt: oklch(95% .04 350);--color-surface-raised: oklch(100% 0 0);--color-surface-sunken: oklch(92% .05 350);--color-background: oklch(97% .03 350);--color-text: oklch(25% .08 330);--color-text-muted: oklch(40% .06 330);--color-text-subtle: oklch(50% .04 330);--color-primary: oklch(55% .18 350);--color-primary-hover: oklch(50% .2 350);--color-primary-subtle: oklch(95% .05 350);--color-accent: oklch(45% .12 180);--color-accent-hover: oklch(40% .14 180);--color-accent-subtle: oklch(95% .04 180);--_kawaii-lavender: oklch(55% .12 290);--_kawaii-peach: oklch(55% .12 60);--_kawaii-sky: oklch(50% .12 220);--color-border: oklch(90% .05 350);--color-border-muted: oklch(94% .03 350);--color-border-strong: oklch(75% .15 350);--color-interactive: var(--color-primary);--color-interactive-hover: var(--color-primary-hover);--font-sans: "Nunito", "Quicksand", "Varela Round", system-ui, sans-serif;--font-display: "Cherry Bomb One", "Nunito", cursive;--font-accent: "Coiny", "Nunito", cursive;--font-mono: "Fira Code", monospace;--line-height-normal: 1.6;--line-height-tight: 1.3;--radius-xs: .5rem;--radius-s: .75rem;--radius-m: 1rem;--radius-l: 1.5rem;--radius-xl: 2rem;--radius-2xl: 3rem;--radius-full: 9999px;--shadow-xs: 0 2px 4px oklch(75% .15 350 / .15);--shadow-sm: 0 4px 8px oklch(75% .15 350 / .2);--shadow-md: 0 6px 16px oklch(75% .15 350 / .25);--shadow-lg: 0 10px 24px oklch(75% .15 350 / .3);--shadow-xl: 0 16px 32px oklch(75% .15 350 / .35);--shadow-2xl: 0 24px 48px oklch(75% .15 350 / .4);--duration-instant: 50ms;--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s;--ease-default: cubic-bezier(.34, 1.56, .64, 1);--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--shape-depth: 8%;--shape-bevel: 16px}[data-theme~=kawaii][data-mode=dark]{color-scheme:dark;--color-surface: oklch(18% .04 290);--color-surface-alt: oklch(22% .05 290);--color-surface-raised: oklch(25% .04 290);--color-background: oklch(12% .04 290);--color-text: oklch(
|
|
1
|
+
@font-face{font-family:Cherry Bomb One;font-style:normal;font-weight:400;font-display:swap;src:url("./kawaii/fonts/CherryBombOne-Regular.woff2") format("woff2")}@font-face{font-family:Coiny;font-style:normal;font-weight:400;font-display:swap;src:url("./kawaii/fonts/Coiny-Regular.woff2") format("woff2")}@font-face{font-family:Nunito;font-style:normal;font-weight:400 700;font-display:swap;src:url(https://fonts.gstatic.com/s/nunito/v32/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@layer bundle-theme{[data-theme~=kawaii]{color-scheme:light;--theme-border-style: kawaii;--color-surface: oklch(98% .02 350);--color-surface-alt: oklch(95% .04 350);--color-surface-raised: oklch(100% 0 0);--color-surface-sunken: oklch(92% .05 350);--color-background: oklch(97% .03 350);--color-text: oklch(25% .08 330);--color-text-muted: oklch(40% .06 330);--color-text-subtle: oklch(50% .04 330);--color-primary: oklch(55% .18 350);--color-primary-hover: oklch(50% .2 350);--color-primary-subtle: oklch(95% .05 350);--color-accent: oklch(45% .12 180);--color-accent-hover: oklch(40% .14 180);--color-accent-subtle: oklch(95% .04 180);--_kawaii-lavender: oklch(55% .12 290);--_kawaii-peach: oklch(55% .12 60);--_kawaii-sky: oklch(50% .12 220);--color-border: oklch(90% .05 350);--color-border-muted: oklch(94% .03 350);--color-border-strong: oklch(75% .15 350);--color-interactive: var(--color-primary);--color-interactive-hover: var(--color-primary-hover);--font-sans: "Nunito", "Quicksand", "Varela Round", system-ui, sans-serif;--font-display: "Cherry Bomb One", "Nunito", cursive;--font-accent: "Coiny", "Nunito", cursive;--font-mono: "Fira Code", monospace;--line-height-normal: 1.6;--line-height-tight: 1.3;--radius-xs: .5rem;--radius-s: .75rem;--radius-m: 1rem;--radius-l: 1.5rem;--radius-xl: 2rem;--radius-2xl: 3rem;--radius-full: 9999px;--shadow-xs: 0 2px 4px oklch(75% .15 350 / .15);--shadow-sm: 0 4px 8px oklch(75% .15 350 / .2);--shadow-md: 0 6px 16px oklch(75% .15 350 / .25);--shadow-lg: 0 10px 24px oklch(75% .15 350 / .3);--shadow-xl: 0 16px 32px oklch(75% .15 350 / .35);--shadow-2xl: 0 24px 48px oklch(75% .15 350 / .4);--duration-instant: 50ms;--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s;--ease-default: cubic-bezier(.34, 1.56, .64, 1);--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--shape-depth: 8%;--shape-bevel: 16px}[data-theme~=kawaii][data-mode=dark]{color-scheme:dark;--color-surface: oklch(18% .04 290);--color-surface-alt: oklch(22% .05 290);--color-surface-raised: oklch(25% .04 290);--color-background: oklch(12% .04 290);--color-text: oklch(95% .01 350);--color-text-muted: oklch(80% .02 350);--color-text-subtle: oklch(65% .02 350);--color-hover-bg: oklch(25% .06 350);--color-surface-overlay: oklch(22% .05 290);--color-primary: oklch(75% .18 350);--color-accent: oklch(75% .15 180);--_kawaii-lavender: oklch(75% .12 290);--_kawaii-peach: oklch(75% .12 60);--_kawaii-sky: oklch(70% .12 220);--color-border: oklch(35% .05 290)}}
|
|
2
2
|
/*# sourceMappingURL=kawaii.theme.css.map */
|