vanilla-breeze 0.1.0

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

@@ -0,0 +1,67 @@
+var u=new Map,f=null,p=null,O=null;function C(){if(typeof window<"u"&&window.__VB_THEME_BASE)return String(window.__VB_THEME_BASE).replace(/\/$/,"");if(O)return O;if(typeof document<"u"){let t=document.querySelectorAll('script[src*="vanilla-breeze"]');for(let e of t){let s=e.getAttribute("src");if(s){let r=s.lastIndexOf("/");if(r!==-1)return s.slice(0,r)}}}return"/cdn"}async function I(){if(f)return f;let t=C();try{let e=await fetch(`${t}/themes/manifest.json`);if(!e.ok)throw new Error(`HTTP ${e.status}`);f=await e.json()}catch{f={}}return f}var R=new Set(["default","a11y-high-contrast","a11y-large-text","a11y-dyslexia","modern","minimal","classic"]);async function k(t){if(!t||R.has(t))return;if(u.has(t))return u.get(t);if(typeof document<"u"&&document.querySelector(`link[data-vb-theme="${t}"]`)){u.set(t,Promise.resolve());return}let e=G(t);return u.set(t,e),e}async function j(){if(p)return p;let t=C();try{let e=await fetch(`${t}/packs/manifest.json`);if(!e.ok)throw new Error(`HTTP ${e.status}`);p=await e.json()}catch{try{let e=await fetch(`${t}/bundles/manifest.json`);if(!e.ok)throw new Error(`HTTP ${e.status}`);p=await e.json()}catch{p={}}}return p}async function G(t){let e=C();if((await j())[t])return q(t,e);let a=(await I())[t],n=a?a.file:`${t}.css`,c=`${e}/themes/${n}`;return new Promise((h,d)=>{let l=document.querySelector(`link[data-vb-theme-preload="${t}"]`);l&&l.remove();let o=document.createElement("link");o.rel="stylesheet",o.href=c,o.setAttribute("data-vb-theme",t),o.onload=()=>h(),o.onerror=()=>{o.remove(),u.delete(t),d(new Error(`Failed to load theme: ${t}`))},document.head.appendChild(o)})}function q(t,e){let s=`${e}/packs/${t}.full.css`,r=`${e}/packs/${t}.full.js`;return new Promise((a,n)=>{let c=document.createElement("link");c.rel="stylesheet",c.href=s,c.setAttribute("data-vb-theme",t),c.setAttribute("data-vb-pack",t),c.onload=()=>{import(r).catch(()=>{}),a()},c.onerror=()=>{c.remove(),u.delete(t),n(new Error(`Failed to load pack: ${t}`))},document.head.appendChild(c)})}var _=[{id:"auto",name:"Auto",icon:"monitor"},{id:"light",name:"Light",icon:"sun"},{id:"dark",name:"Dark",icon:"moon"}],E=[{id:"default",name:"Default",swatchBg:"#3b82f6",seeds:{}},{id:"ocean",name:"Ocean",swatchBg:"#0891b2",seeds:{"--hue-primary":200,"--hue-secondary":180,"--hue-accent":45,"--lightness-primary":"50%","--chroma-primary":.15,"--lightness-secondary":"45%","--chroma-secondary":.1,"--lightness-accent":"70%","--chroma-accent":.15},seedsDark:{"--lightness-primary":"60%","--chroma-primary":.12}},{id:"forest",name:"Forest",swatchBg:"#059669",seeds:{"--hue-primary":145,"--hue-secondary":90,"--hue-accent":30,"--lightness-primary":"45%","--chroma-primary":.15,"--lightness-secondary":"55%","--chroma-secondary":.12,"--lightness-accent":"65%","--chroma-accent":.16},seedsDark:{"--lightness-primary":"55%","--chroma-primary":.12}},{id:"sunset",name:"Sunset",swatchBg:"#ea580c",seeds:{"--hue-primary":25,"--hue-secondary":0,"--hue-accent":280,"--lightness-primary":"60%","--chroma-primary":.2,"--lightness-secondary":"55%","--chroma-secondary":.18,"--lightness-accent":"55%","--chroma-accent":.18},seedsDark:{"--lightness-primary":"65%","--chroma-primary":.16}},{id:"rose",name:"Rose",swatchBg:"#e11d48",seeds:{"--hue-primary":350,"--hue-secondary":330,"--hue-accent":200,"--lightness-primary":"55%","--chroma-primary":.18,"--lightness-secondary":"50%","--chroma-secondary":.14,"--lightness-accent":"60%","--chroma-accent":.12},seedsDark:{"--lightness-primary":"65%","--chroma-primary":.14}},{id:"lavender",name:"Lavender",swatchBg:"#a855f7",seeds:{"--hue-primary":280,"--hue-secondary":300,"--hue-accent":60,"--lightness-primary":"55%","--chroma-primary":.14,"--lightness-secondary":"50%","--chroma-secondary":.12,"--lightness-accent":"70%","--chroma-accent":.14},seedsDark:{"--lightness-primary":"65%","--chroma-primary":.12}},{id:"coral",name:"Coral",swatchBg:"#f97316",seeds:{"--hue-primary":15,"--hue-secondary":25,"--hue-accent":180,"--lightness-primary":"60%","--chroma-primary":.18,"--lightness-secondary":"55%","--chroma-secondary":.15,"--lightness-accent":"55%","--chroma-accent":.12},seedsDark:{"--lightness-primary":"65%","--chroma-primary":.15}},{id:"slate",name:"Slate",swatchBg:"#64748b",seeds:{"--hue-primary":220,"--hue-secondary":210,"--hue-accent":45,"--lightness-primary":"48%","--chroma-primary":.1,"--lightness-secondary":"45%","--chroma-secondary":.06,"--lightness-accent":"68%","--chroma-accent":.15},seedsDark:{"--lightness-primary":"60%","--chroma-primary":.08}},{id:"emerald",name:"Emerald",swatchBg:"#10b981",seeds:{"--hue-primary":160,"--hue-secondary":140,"--hue-accent":30,"--lightness-primary":"50%","--chroma-primary":.15,"--lightness-secondary":"48%","--chroma-secondary":.12,"--lightness-accent":"65%","--chroma-accent":.16},seedsDark:{"--lightness-primary":"60%","--chroma-primary":.12}},{id:"amber",name:"Amber",swatchBg:"#f59e0b",seeds:{"--hue-primary":45,"--hue-secondary":30,"--hue-accent":240,"--lightness-primary":"60%","--chroma-primary":.16,"--lightness-secondary":"55%","--chroma-secondary":.15,"--lightness-accent":"52%","--chroma-accent":.14},seedsDark:{"--lightness-primary":"68%","--chroma-primary":.14}},{id:"indigo",name:"Indigo",swatchBg:"#6366f1",seeds:{"--hue-primary":250,"--hue-secondary":270,"--hue-accent":35,"--lightness-primary":"48%","--chroma-primary":.18,"--lightness-secondary":"45%","--chroma-secondary":.14,"--lightness-accent":"68%","--chroma-accent":.16},seedsDark:{"--lightness-primary":"62%","--chroma-primary":.14}}],S=[{id:"modern",name:"Modern",hue:270,shape:"rounded",character:"Vibrant & elevated",swatchBg:"#6366f1",tier:"core"},{id:"minimal",name:"Minimal",hue:240,shape:"sharp",character:"Clean & flat",swatchBg:"#71717a",tier:"core"},{id:"classic",name:"Classic",hue:220,shape:"subtle",character:"Serif & elegant",swatchBg:"#92400e",tier:"core"}],A=[{id:"swiss",name:"Swiss",icon:"grid-3x3",character:"Precision grid",swatchBg:"#ff3e00",swatchFg:"white",tier:"showcase",category:"Design"},{id:"brutalist",name:"Brutalist",icon:"square",character:"Raw, industrial",swatchBg:"#1a1a1a",swatchFg:"#f5f5f5",tier:"showcase",category:"Design"},{id:"art-deco",name:"Art Deco",icon:"crown",character:"1920s luxury",swatchBg:"#1A1A1A",swatchFg:"#C9A84C",tier:"showcase",category:"Design"},{id:"editorial",name:"Editorial",icon:"newspaper",character:"Magazine elegance",swatchBg:"#1a1a1a",swatchFg:"#c9a227",tier:"showcase",category:"Content"},{id:"genai",name:"GenAI",icon:"sparkles",character:"AI aesthetic",swatchBg:"#1a0a2e",swatchFg:"#a855f7",tier:"showcase",category:"Modern"},{id:"glassmorphism",name:"Glass",icon:"glass-water",character:"Frosted surfaces",swatchBg:"#667eea",swatchFg:"#ffffff",tier:"showcase",category:"Modern"},{id:"startup",name:"Startup",icon:"rocket",character:"SaaS energy",swatchBg:"#4f46e5",swatchFg:"#ffffff",tier:"showcase",category:"Modern"},{id:"organic",name:"Organic",icon:"leaf",character:"Natural, handcrafted",swatchBg:"#2d5016",swatchFg:"#faf5e6",tier:"showcase",category:"Creative"},{id:"rough",name:"Rough",icon:"pencil",character:"Hand-drawn sketch",swatchBg:"#f5f0e8",swatchFg:"#3a3a3a",tier:"showcase",category:"Creative"},{id:"cyber",name:"Cyber",icon:"zap",character:"Neon futuristic",swatchBg:"#0a0a1a",swatchFg:"#00ff88",tier:"showcase",category:"Creative"},{id:"vaporwave",name:"Vaporwave",icon:"radio",character:"Neon dreamy",swatchBg:"#2b0040",swatchFg:"#ff6ad5",tier:"showcase",category:"Aesthetic"},{id:"neumorphism",name:"Neumorph",icon:"circle",character:"Soft embossed",swatchBg:"#e0e0e0",swatchFg:"#a0a0a0",tier:"showcase",category:"Aesthetic"},{id:"bauhaus",name:"Bauhaus",icon:"shapes",character:"Geometric",swatchBg:"#F1FAEE",swatchFg:"#E63946",tier:"showcase",category:"Aesthetic"},{id:"claymorphism",name:"Clay",icon:"circle-dot",character:"Puffy 3D",swatchBg:"#f0f0f5",swatchFg:"#FF6B9D",tier:"showcase",category:"Aesthetic"},{id:"alpha1999",name:"Alpha1999",icon:"orbit",character:"Space retro-fi",swatchBg:"#0a0a14",swatchFg:"#d4880f",tier:"showcase",category:"Signature"},{id:"super2026",name:"Super2026",icon:"triangle",character:"Supergraphic bold",swatchBg:"#f5f0e6",swatchFg:"#c23616",tier:"showcase",category:"Signature"},{id:"win9x",name:"Win9x",icon:"monitor",character:"Classic desktop",swatchBg:"#008080",swatchFg:"#c0c0c0",tier:"showcase",category:"OS Styles"},{id:"nes",name:"NES",icon:"joystick",character:"Console pixels",swatchBg:"#bcbcbc",swatchFg:"#e40521",tier:"showcase",category:"OS Styles"},{id:"8bit",name:"8-Bit",icon:"gamepad-2",character:"Retro pixel art",swatchBg:"#000080",swatchFg:"#ffff00",tier:"showcase",category:"OS Styles"},{id:"magna",name:"Magna",icon:"orbit",character:"Odyssey 2 retro",swatchBg:"#0d0b14",swatchFg:"#f97316",tier:"showcase",category:"OS Styles"}],M=[{id:"nord",name:"Nord",icon:"snowflake",character:"Arctic calm",swatchBg:"#2E3440",swatchFg:"#81A1C1",tier:"community",category:"Editor Palettes"},{id:"solarized",name:"Solarized",icon:"sun-dim",character:"Engineered precision",swatchBg:"#002B36",swatchFg:"#268BD2",tier:"community",category:"Editor Palettes"},{id:"dracula",name:"Dracula",icon:"moon-star",character:"Dark elegance",swatchBg:"#282A36",swatchFg:"#BD93F9",tier:"community",category:"Editor Palettes"},{id:"catppuccin-mocha",name:"Catppuccin",icon:"coffee",character:"Warm pastels",swatchBg:"#1E1E2E",swatchFg:"#CBA6F7",tier:"community",category:"Editor Palettes"},{id:"catppuccin-latte",name:"Ctp Latte",icon:"coffee",character:"Cozy daytime",swatchBg:"#eff1f5",swatchFg:"#8839ef",tier:"community",category:"Editor Palettes"},{id:"catppuccin-frappe",name:"Ctp Frapp\xE9",icon:"coffee",character:"Cool twilight",swatchBg:"#303446",swatchFg:"#ca9ee6",tier:"community",category:"Editor Palettes"},{id:"catppuccin-macchiato",name:"Ctp Macchiato",icon:"coffee",character:"Deep blue",swatchBg:"#24273a",swatchFg:"#c6a0f6",tier:"community",category:"Editor Palettes"},{id:"gruvbox",name:"Gruvbox",icon:"palette",character:"Retro warmth",swatchBg:"#282828",swatchFg:"#ebdbb2",tier:"community",category:"Editor Palettes"},{id:"tokyo-night",name:"Tokyo Night",icon:"moon",character:"Night-owl vibes",swatchBg:"#1a1b26",swatchFg:"#7aa2f7",tier:"community",category:"Editor Palettes"},{id:"rose-pine",name:"Ros\xE9 Pine",icon:"flower-2",character:"Muted elegance",swatchBg:"#191724",swatchFg:"#ebbcba",tier:"community",category:"Editor Palettes"},{id:"cottagecore",name:"Cottagecore",icon:"flower-2",character:"Pastoral",swatchBg:"#fdf8f0",swatchFg:"#7d8c6d",tier:"community",category:"Niche"},{id:"terminal",name:"Terminal",icon:"terminal",character:"Retro CRT",swatchBg:"#0d1117",swatchFg:"#00ff00",tier:"community",category:"Niche"},{id:"clinical",name:"Clinical",icon:"heart-pulse",character:"Sterile precision",swatchBg:"#ffffff",swatchFg:"#0077b6",tier:"community",category:"Industry"},{id:"financial",name:"Financial",icon:"landmark",character:"Navy + gold",swatchBg:"#1b2a4a",swatchFg:"#c9a84c",tier:"community",category:"Industry"},{id:"government",name:"Government",icon:"shield",character:"Official",swatchBg:"#002868",swatchFg:"#bf0a30",tier:"community",category:"Industry"},{id:"dawn",name:"Dawn",icon:"sunrise",character:"Golden morning",swatchBg:"#fef3e2",swatchFg:"#d4a574",tier:"community",category:"Mood/Time"},{id:"dusk",name:"Dusk",icon:"sunset",character:"Twilight",swatchBg:"#1a1b2e",swatchFg:"#e5a858",tier:"community",category:"Mood/Time"},{id:"midnight",name:"Midnight",icon:"moon",character:"Deep night",swatchBg:"#0d1117",swatchFg:"#58a6ff",tier:"community",category:"Mood/Time"},{id:"high-noon",name:"High Noon",icon:"sun",character:"Maximum bright",swatchBg:"#ffffff",swatchFg:"#e63946",tier:"community",category:"Mood/Time"}],L=[{id:"kawaii",name:"Kawaii",icon:"heart",character:"Cute aesthetic",swatchBg:"#ffb7c5",swatchFg:"#ff69b4",tier:"showcase",category:"Packs"},{id:"retro",name:"Retro",icon:"tv",character:"CRT terminal",swatchBg:"#0a0a14",swatchFg:"#00ff66",tier:"showcase",category:"Packs"},{id:"memphis",name:"Memphis",icon:"star",character:"Bold patterns",swatchBg:"#FFF8F0",swatchFg:"#d03040",tier:"showcase",category:"Packs"}];var U=[...A,...M],V=[...S,...A,...M,...L],g=t=>A.filter(e=>e.category===t),W=[{label:"Style",themes:S,tier:"core"},{label:"Design",themes:g("Design"),tier:"showcase"},{label:"Content",themes:g("Content"),tier:"showcase"},{label:"Modern",themes:g("Modern"),tier:"showcase"},{label:"Creative",themes:g("Creative"),tier:"showcase"},{label:"Aesthetic",themes:g("Aesthetic"),tier:"showcase"},{label:"Signature",themes:g("Signature"),tier:"showcase"},{label:"OS Styles",themes:g("OS Styles"),tier:"showcase"},{label:"Packs",themes:L,tier:"showcase"},{label:"More Themes",themes:M,tier:"community"}];var F="vb-theme",v={mode:"auto",brand:"default",accent:"default",borderStyle:"",iconSet:"",fluid:"",backdrop:"",backdropChrome:"",pageBgType:"",pageBgColor:"",pageBgGradStart:"",pageBgGradEnd:"",pageBgGradDir:""},H=["--hue-primary","--hue-secondary","--hue-accent","--lightness-primary","--chroma-primary","--lightness-secondary","--chroma-secondary","--lightness-accent","--chroma-accent"],y={_initPromise:null,async init(){return this._initPromise?this._initPromise:(this._initPromise=(async()=>{let t=this.load();try{await k(t.brand)}catch{t.brand="default"}return this.apply(t),this._watchSystemPreference(),t})(),this._initPromise)},load(){try{let t=localStorage.getItem(F);return t?{...v,...JSON.parse(t)}:{...v}}catch{return{...v}}},save(t){let s={...this.load(),...t};try{localStorage.setItem(F,JSON.stringify(s))}catch{}return s},apply({mode:t="auto",brand:e="default",borderStyle:s="",iconSet:r="",fluid:a="",backdrop:n="",backdropChrome:c="",pageBgType:h="",pageBgColor:d="",pageBgGradStart:l="",pageBgGradEnd:o="",pageBgGradDir:m=""}={}){let i=document.documentElement;i.dataset.mode=t==="auto"?this.getEffectiveMode():t;let x=(i.dataset.theme||"").split(" ").filter(B=>B.startsWith("a11y-")),$=e!=="default"?[e,...x]:[...x];$.length?i.dataset.theme=$.join(" "):delete i.dataset.theme;let w=s||this._readCSSHint("--theme-border-style");w&&w!=="clean"?i.dataset.borderStyle=w:delete i.dataset.borderStyle;let b=r||this._readCSSHint("--theme-icon-set");if(b&&b!=="lucide"?i.dataset.iconSet=b:delete i.dataset.iconSet,a?i.dataset.fluid=a:delete i.dataset.fluid,n?i.dataset.backdrop=n:delete i.dataset.backdrop,c&&c!=="card"?i.dataset.backdropChrome=c:delete i.dataset.backdropChrome,h==="color"&&d)i.style.setProperty("--page-bg-color",d),i.style.removeProperty("--page-bg-gradient");else if(h==="gradient"&&l&&o){let B=m||"to bottom";i.style.setProperty("--page-bg-gradient",`linear-gradient(${B}, ${l}, ${o})`),i.style.removeProperty("--page-bg-color")}else i.style.removeProperty("--page-bg-color"),i.style.removeProperty("--page-bg-gradient");let D=this.load().accent||"default";this._applyAccent(D),window.dispatchEvent(new CustomEvent("vb:theme-change",{detail:{mode:t,brand:e,accent:D,borderStyle:w,iconSet:b,fluid:a,backdrop:n,backdropChrome:c,pageBgType:h,effectiveMode:this.getEffectiveMode()}}))},setMode(t){let e=this.save({mode:t});this.apply(e)},async setBrand(t){try{await k(t)}catch(s){console.warn(`[VB] Theme "${t}" failed to load, using default`,s),t="default"}let e=this.save({brand:t});this.apply(e)},setAccent(t){let e=this.save({accent:t});this._applyAccent(t),window.dispatchEvent(new CustomEvent("vb:theme-change",{detail:{...this.getState()}}))},setBorderStyle(t){let e=this.save({borderStyle:t});this.apply(e)},setIconSet(t){let e=this.save({iconSet:t});this.apply(e)},setFluid(t){let e=this.save({fluid:t});this.apply(e)},setBackdrop(t){let e=this.save({backdrop:t});this.apply(e)},setBackdropChrome(t){let e=this.save({backdropChrome:t});this.apply(e)},setPageBg({type:t="",color:e="",gradStart:s="",gradEnd:r="",gradDir:a=""}={}){let n=this.save({pageBgType:t,pageBgColor:e,pageBgGradStart:s,pageBgGradEnd:r,pageBgGradDir:a});this.apply(n)},getEffectiveMode(){let{mode:t}=this.load();return t!=="auto"?t:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},getState(){let{mode:t,brand:e,accent:s,borderStyle:r,iconSet:a,fluid:n,backdrop:c,backdropChrome:h,pageBgType:d,pageBgColor:l,pageBgGradStart:o,pageBgGradEnd:m,pageBgGradDir:i}=this.load();return{mode:t,brand:e,accent:s,borderStyle:r,iconSet:a,fluid:n,backdrop:c,backdropChrome:h,pageBgType:d,pageBgColor:l,pageBgGradStart:o,pageBgGradEnd:m,pageBgGradDir:i,effectiveMode:this.getEffectiveMode()}},toggleMode(){let e=this.getEffectiveMode()==="dark"?"light":"dark";this.setMode(e)},reset(){try{localStorage.removeItem(F)}catch{}let t=document.documentElement;t.style.removeProperty("--page-bg-color"),t.style.removeProperty("--page-bg-gradient");for(let e of H)t.style.removeProperty(e);this.apply(v)},_readCSSHint(t){return getComputedStyle(document.documentElement).getPropertyValue(t).trim()},_applyAccent(t){let e=document.documentElement,s=E.find(r=>r.id===t);for(let r of H)e.style.removeProperty(r);if(!(!s||!s.seeds||Object.keys(s.seeds).length===0)){for(let[r,a]of Object.entries(s.seeds))e.style.setProperty(r,String(a));if(s.seedsDark&&this.getEffectiveMode()==="dark")for(let[r,a]of Object.entries(s.seedsDark))e.style.setProperty(r,String(a))}},_watchSystemPreference(){window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",()=>{let e=this.load();e.mode==="auto"&&this.apply(e)})}};var T=class t extends HTMLElement{static#l=200;#t;#e;#a=!1;#s=!1;#r=null;connectedCallback(){this.#s=this.getAttribute("data-variant")==="inline",this.#m(),this.#p(),this.#d(),window.addEventListener("vb:theme-change",this.#h)}disconnectedCallback(){window.removeEventListener("vb:theme-change",this.#h),document.removeEventListener("click",this.#n),document.removeEventListener("keydown",this.#o),this.#c()}#m(){this.#s||(this.#t=this.querySelector(":scope > [data-trigger]"),this.#t||(this.#t=this.querySelector(":scope > button")),this.#t||(this.#t=document.createElement("button"),this.#t.setAttribute("data-trigger",""),this.#t.innerHTML=`
+          <x-icon name="palette" label="Theme settings"></x-icon>
+        `,this.prepend(this.#t)),this.#t.setAttribute("aria-haspopup","dialog"),this.#t.setAttribute("aria-expanded","false")),this.#e=document.createElement("div"),this.#e.className="panel",this.#e.setAttribute("role","dialog"),this.#e.setAttribute("aria-label","Theme settings"),this.#s||(this.#e.id=`theme-panel-${crypto.randomUUID().slice(0,8)}`,this.#t.setAttribute("aria-controls",this.#e.id)),this.#e.innerHTML=this.#g(),this.appendChild(this.#e)}#g(){let{mode:e,brand:s,accent:r}=y.getState();return`
+      <fieldset class="section">
+        <legend>Color Mode</legend>
+        <div class="options" role="radiogroup" aria-label="Color mode">
+          ${_.map(a=>`
+            <label class="option">
+              <input
+                type="radio"
+                name="theme-mode"
+                value="${a.id}"
+                ${e===a.id?"checked":""}
+              />
+              <span class="option-content">
+                <x-icon name="${a.icon}"></x-icon>
+                <span>${a.name}</span>
+              </span>
+            </label>
+          `).join("")}
+        </div>
+      </fieldset>
+
+      <fieldset class="section">
+        <legend>Color Accent</legend>
+        <div class="options options--themes" role="radiogroup" aria-label="Color accent">
+          ${E.map(a=>`
+            <label class="option option--theme">
+              <input
+                type="radio"
+                name="theme-accent"
+                value="${a.id}"
+                ${r===a.id?"checked":""}
+              />
+              <span class="option-content">
+                <span class="swatch" style="--swatch-hue: ${a.seeds?.["--hue-primary"]||260}"></span>
+                <span>${a.name}</span>
+              </span>
+            </label>
+          `).join("")}
+        </div>
+      </fieldset>
+
+      <fieldset class="section">
+        <legend>Style</legend>
+        <div class="options options--themes" role="radiogroup" aria-label="Style">
+          ${S.map(a=>`
+            <label class="option option--theme">
+              <input
+                type="radio"
+                name="theme-brand"
+                value="${a.id}"
+                ${s===a.id?"checked":""}
+              />
+              <span class="option-content">
+                <span class="swatch-combo">
+                  <span class="swatch" style="--swatch-hue: ${a.hue}"></span>
+                  <span class="shape-indicator" data-shape="${a.shape}"></span>
+                </span>
+                <span>${a.name}</span>
+              </span>
+            </label>
+          `).join("")}
+        </div>
+      </fieldset>
+    `}#p(){this.#e.querySelectorAll('input[name="theme-mode"]').forEach(e=>{e.addEventListener("change",this.#y)}),this.#e.querySelectorAll('input[name="theme-accent"]').forEach(e=>{e.addEventListener("change",this.#f)}),this.#e.querySelectorAll('input[name="theme-brand"]').forEach(e=>{e.addEventListener("change",this.#w)}),this.#s||(this.#t.addEventListener("click",this.#u),document.addEventListener("click",this.#n),document.addEventListener("keydown",this.#o))}#u=e=>{e.stopPropagation(),this.toggle()};#n=e=>{this.#a&&!this.contains(e.target)&&this.close()};#o=e=>{e.key==="Escape"&&this.#a&&(e.preventDefault(),this.close(),this.#t?.focus())};#y=e=>{y.setMode(e.target.value),this.#i()};#f=e=>{y.setAccent(e.target.value),this.#i()};#w=e=>{y.setBrand(e.target.value),this.#i()};#i(){this.#s||(this.#c(),this.#r=setTimeout(()=>{this.close(),this.#t?.focus()},t.#l))}#c(){this.#r&&(clearTimeout(this.#r),this.#r=null)}#h=()=>{this.#d()};#d(){let{mode:e,brand:s,accent:r}=y.getState(),a=this.#e.querySelector(`input[name="theme-mode"][value="${e}"]`);a&&(a.checked=!0);let n=this.#e.querySelector(`input[name="theme-accent"][value="${r}"]`);n&&(n.checked=!0);let c=this.#e.querySelector(`input[name="theme-brand"][value="${s}"]`);c&&(c.checked=!0)}open(){this.#s||this.#a||(this.#a=!0,this.setAttribute("data-open",""),this.#t?.setAttribute("aria-expanded","true"),requestAnimationFrame(()=>{this.#b(),this.#e.querySelector('input[type="radio"]:checked')?.focus()}),this.dispatchEvent(new CustomEvent("theme-wc-open",{bubbles:!0})))}#b(){if(!this.#t||!this.#e)return;let e=this.#t.getBoundingClientRect(),s=this.#e.getBoundingClientRect(),r=window.visualViewport||{width:window.innerWidth,height:window.innerHeight},a=r.height,n=r.width,c=8,h=16,d=a-e.bottom-h,l=e.top-h,o=e.height+c;d<s.height&&l>d?(o=-s.height-c,this.#e.dataset.position="top"):delete this.#e.dataset.position;let m=0,i=e.left+s.width+h,P=e.left+m;i>n&&(m=n-i),P+m<h&&(m=h-e.left),this.#e.style.setProperty("--panel-top",`${o}px`),this.#e.style.setProperty("--panel-left",`${m}px`)}close(){this.#s||!this.#a||(this.#c(),this.#a=!1,this.removeAttribute("data-open"),this.#t?.setAttribute("aria-expanded","false"),this.dispatchEvent(new CustomEvent("theme-wc-close",{bubbles:!0})))}toggle(){this.#a?this.close():this.open()}get isOpen(){return this.#a}};customElements.define("theme-wc",T);export{T as ThemePicker};
+//# sourceMappingURL=theme-wc.js.map

package/dist/cdn/components/time-index.js

@@ -0,0 +1,12 @@
+var p=window.matchMedia("(prefers-reduced-motion: reduce)");var d=new Map;function u(i,e,n={}){let t=n.priority??10,o={impl:e,bundle:n.bundle,contract:n.contract,priority:t},r=d.get(i);if(customElements.get(i)){if(!r||r.priority>=t){r&&r.priority===t&&r.impl!==e&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${r.bundle}" (priority ${r.priority}). Skipping "${n.bundle}".`);return}console.warn(`[VB Bundle] Tag <${i}> defined by "${r.bundle}" cannot be replaced (customElements.define is permanent). "${n.bundle}" has higher priority but arrived late.`);return}if(r&&r.priority>=t){r.priority===t&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${r.bundle}". Skipping "${n.bundle}" (first wins at equal priority).`);return}d.set(i,o),customElements.define(i,e)}var a=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,n,t,o){e.addEventListener(n,t,o),this.#e.push(()=>e.removeEventListener(n,t,o))}setup(){}teardown(){}};function m(i){let e=(Date.now()-i.getTime())/1e3;if(e<0)return null;if(e<60)return"just now";if(e<3600){let t=Math.floor(e/60);return`${t} minute${t!==1?"s":""} ago`}if(e<86400){let t=Math.floor(e/3600);return`${t} hour${t!==1?"s":""} ago`}if(e<2592e3){let t=Math.floor(e/86400);return`${t} day${t!==1?"s":""} ago`}if(e<31536e3){let t=Math.floor(e/2592e3);return`${t} month${t!==1?"s":""} ago`}let n=Math.floor(e/31536e3);return`${n} year${n!==1?"s":""} ago`}function c(i=document){for(let e of i.querySelectorAll("time[data-relative]")){let n=e.getAttribute("datetime");if(!n)continue;let t=m(new Date(n));t&&(e.textContent=t)}}var f;function h(){c(),f||(f=setInterval(()=>c(),6e4))}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",h,{once:!0}):h();var l=class extends a{setup(){c(this),this.#e();let e=this.getAttribute("updates-src");e&&this.#i(e)}#e(){let e=document.createElement("nav");e.setAttribute("data-timeline-controls",""),e.setAttribute("aria-label","Timeline controls");let n=document.createElement("button");if(n.type="button",n.textContent="Oldest first",n.addEventListener("click",()=>{this.#n(),n.textContent=this.#t?"Latest first":"Oldest first"}),e.append(n),this.hasAttribute("versions")){let t=this.#o();if(t.length>0){let o=document.createElement("select");o.setAttribute("aria-label","Filter by version"),o.innerHTML='<option value="">All versions</option>'+t.map(r=>`<option value="${r}">${r}</option>`).join(""),o.addEventListener("change",()=>this.#r(o.value)),e.append(o)}}this.prepend(e)}#t=!1;#n(){this.#t=!this.#t;let e=this.querySelector(".changelog-entries")||this,n=[...e.children].filter(t=>t.tagName==="SECTION"||t.tagName==="ARTICLE");n.reverse();for(let t of n)e.append(t)}#o(){let e=this.querySelectorAll(".version-tag"),n=new Set;for(let t of e){let o=t.textContent.trim();o&&n.add(o)}return[...n]}#r(e){let n=this.querySelectorAll('section[id^="v"]');for(let t of n)t.hidden=e&&t.id!==e.replace(/\./g,"-").replace(/^v/,"v");if(!n.length){let t=this.querySelectorAll(".changelog-entries article");for(let o of t){let r=o.querySelector(".version-tag");o.hidden=e&&r?.textContent.trim()!==e}}}async#i(e){try{let n=await fetch(e);if(!n.ok)return;let t=await n.json();if(!Array.isArray(t)||!t.length)return;let o=document.createElement("section");o.setAttribute("aria-labelledby","recent-pages-heading"),o.innerHTML=`
+        <h2 id="recent-pages-heading">Recently Updated Pages</h2>
+        <ul class="recent-pages">
+          ${t.slice(0,10).map(s=>`
+            <li>
+              <a href="${s.href||s.url}">${s.title}</a>
+              <time datetime="${s.modified||s.date}" data-relative>${s.modified||s.date}</time>
+            </li>
+          `).join("")}
+        </ul>
+      `;let r=this.querySelector(".changelog-entries")||this.querySelector("[data-timeline-controls]");r?r.after(o):this.append(o),c(o)}catch{}}};u("time-index",l);export{l as TimeIndex};
+//# sourceMappingURL=time-index.js.map

package/dist/cdn/components/time-picker.js

@@ -0,0 +1,2 @@
+var E=window.matchMedia("(prefers-reduced-motion: reduce)");var b=new Map;function A(n,t,e={}){let i=e.priority??10,r={impl:t,bundle:e.bundle,contract:e.contract,priority:i},s=b.get(n);if(customElements.get(n)){if(!s||s.priority>=i){s&&s.priority===i&&s.impl!==t&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${n}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=i){s.priority===i&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${s.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}b.set(n,r),customElements.define(n,t)}var p=class extends HTMLElement{#c=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let t of this.#c)t();this.#c=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,i,r){t.addEventListener(e,i,r),this.#c.push(()=>t.removeEventListener(e,i,r))}setup(){}teardown(){}};function v(){try{let n=new Intl.DateTimeFormat(void 0,{hour:"numeric"}).resolvedOptions();return n.hourCycle==="h12"||n.hourCycle==="h11"?"12h":"24h"}catch{return"12h"}}function u(n){return String(n).padStart(2,"0")}function c(n){if(!n)return null;let t=n.split(":").map(Number);return{h:t[0]||0,m:t[1]||0,s:t[2]||0}}function d(n,t,e,i){return i?`${u(n)}:${u(t)}:${u(e)}`:`${u(n)}:${u(t)}`}function y(n,t,e,i,r){if(r==="12h"){let s=n>=12?"PM":"AM",h=n%12||12;return i?`${h}:${u(t)}:${u(e)} ${s}`:`${h}:${u(t)} ${s}`}return d(n,t,e,i)}function g(n){let t=n.trim();if(!t)return null;let e=t.match(/\s*(am|pm|a\.m\.|p\.m\.|a|p)\s*$/i),i=null,r=t;e&&(i=e[1].toLowerCase().replace(/\./g,"").startsWith("p")?"PM":"AM",r=t.slice(0,e.index).trim());let s=r.split(/[:.]/);if(s.length<1||s.length>3)return null;let h=Number(s[0]),l=s.length>1?Number(s[1]):0,o=s.length>2?Number(s[2]):0;if(isNaN(h)||isNaN(l)||isNaN(o)||l<0||l>59||o<0||o>59)return null;let a=h;if(i){if(a<1||a>12)return null;i==="AM"?a=a===12?0:a:a=a===12?12:a+12}else if(a<0||a>23)return null;return{h:a,m:l,s:o}}function x(n,t,e){return n>e?t:n<t?e:n}var f=class extends p{static formAssociated=!0;#c;#n;#e;#g;#d;#a;#r=[];#u;#h;#p;#t=0;#i=0;#s=0;#o="AM";#L=null;#q=null;#v=60;#S;#F=0;#l=!1;#M;constructor(){super(),this.#c=this.attachInternals()}setup(){if(this.#n=this.querySelector(':scope > input[type="time"]'),!this.#n)return!1;this.#v=Number(this.#n.getAttribute("step"))||60,this.#p=this.#v<60,this.#L=c(this.#n.getAttribute("min")),this.#q=c(this.#n.getAttribute("max")),this.#h=this.getAttribute("data-format")||v();let t=c(this.#n.value);t&&(this.#t=t.h,this.#i=t.m,this.#s=t.s),this.#S=this.#n.value,this.#h==="12h"&&(this.#o=this.#t>=12?"PM":"AM"),this.#n.setAttribute("tabindex","-1"),this.#n.setAttribute("aria-hidden","true"),this.#n.style.cssText="position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden;",this.#O(),this.#V(),this.#P(),this.#x(),this.#k(),this.#C(),this.listen(document,"click",this.#H),(this.#n.disabled||this.hasAttribute("disabled"))&&(this.setAttribute("data-disabled",""),this.#e.disabled=!0)}#O(){this.#g=document.createElement("div"),this.#g.className="time-trigger",this.#e=document.createElement("input"),this.#e.type="text",this.#e.className="time-input",this.#e.setAttribute("role","combobox"),this.#e.setAttribute("aria-haspopup","listbox"),this.#e.setAttribute("aria-expanded","false"),this.#e.setAttribute("autocomplete","off"),this.#e.setAttribute("placeholder","Type a time\u2026"),this.#g.appendChild(this.#e),this.#d=document.createElement("button"),this.#d.type="button",this.#d.className="time-trigger-icon",this.#d.setAttribute("aria-label","Toggle time spinner"),this.#d.setAttribute("tabindex","-1");let t=document.createElement("icon-wc");t.setAttribute("name","clock"),t.setAttribute("size","sm"),t.setAttribute("aria-hidden","true"),this.#d.appendChild(t),this.#g.appendChild(this.#d),this.appendChild(this.#g),this.listen(this.#d,"click",e=>{e.stopPropagation(),this.#l?this.#f():this.#T(),this.#e.focus()}),this.listen(this.#e,"focus",()=>this.#e.select()),this.listen(this.#e,"keydown",this.#I),this.listen(this.#e,"blur",this.#R)}#V(){this.#M=`tp-${Math.random().toString(36).slice(2,8)}`,this.#a=document.createElement("div"),this.#a.className="time-panel",this.#a.id=this.#M,this.#a.setAttribute("role","group"),this.#a.setAttribute("aria-label","Time spinners"),this.#e.setAttribute("aria-controls",this.#M);let t=this.#h==="12h"?1:0,e=this.#h==="12h"?12:23,i=this.#w("Hours",t,e,1);this.#a.appendChild(i.el),this.#r.push(i),this.#a.appendChild(this.#N());let r=this.#v>=60?Math.max(1,Math.round(this.#v/60)):1,s=this.#w("Minutes",0,59,r);if(this.#a.appendChild(s.el),this.#r.push(s),this.#p){this.#a.appendChild(this.#N());let h=this.#w("Seconds",0,59,this.#v);this.#a.appendChild(h.el),this.#r.push(h)}this.#h==="12h"&&(this.#u=document.createElement("button"),this.#u.type="button",this.#u.className="period-toggle",this.#u.setAttribute("aria-label","Toggle AM/PM"),this.#u.textContent=this.#o,this.#a.appendChild(this.#u),this.listen(this.#u,"click",()=>{this.#o=this.#o==="AM"?"PM":"AM",this.#u.textContent=this.#o,this.#t=this.#B(this.#$(),this.#o),this.#A()}),this.listen(this.#u,"keydown",h=>{h.key==="ArrowLeft"&&(h.preventDefault(),this.#E(this.#r.length-1)),h.key==="Escape"&&(h.preventDefault(),this.#f(),this.#e.focus())})),this.appendChild(this.#a)}#w(t,e,i,r){let s=document.createElement("div");s.className="time-spinner",s.setAttribute("role","spinbutton"),s.setAttribute("aria-label",t),s.setAttribute("aria-valuemin",String(e)),s.setAttribute("aria-valuemax",String(i)),s.setAttribute("tabindex","0");let h=document.createElement("button");h.type="button",h.className="time-inc",h.setAttribute("aria-hidden","true"),h.setAttribute("tabindex","-1"),h.innerHTML="&#x25B2;";let l=document.createElement("span");l.className="time-value";let o=document.createElement("button");o.type="button",o.className="time-dec",o.setAttribute("aria-hidden","true"),o.setAttribute("tabindex","-1"),o.innerHTML="&#x25BC;",s.appendChild(h),s.appendChild(l),s.appendChild(o);let a={el:s,valueEl:l,label:t,min:e,max:i,step:r};return this.listen(h,"click",()=>{this.#b(a,r)}),this.listen(o,"click",()=>{this.#b(a,-r)}),this.listen(s,"keydown",m=>{this.#j(m,a)}),this.listen(s,"focus",()=>{this.#F=this.#r.indexOf(a)}),a}#N(){let t=document.createElement("span");return t.className="time-sep",t.setAttribute("aria-hidden","true"),t.textContent=":",t}#T(){this.#l||(this.#l=!0,this.#a.setAttribute("data-open",""),this.#e.setAttribute("aria-expanded","true"))}#f(){this.#l&&(this.#l=!1,this.#a.removeAttribute("data-open"),this.#e.setAttribute("aria-expanded","false"))}#H=t=>{this.#l&&!this.contains(t.target)&&this.#f()};#I=t=>{switch(t.key){case"Enter":{t.preventDefault(),t.stopPropagation();let e=g(this.#e.value);e&&(this.#t=e.h,this.#i=e.m,this.#s=e.s,this.#h==="12h"&&(this.#o=this.#t>=12?"PM":"AM"),this.#A()),this.#x(),this.#l&&this.#f();return}case"ArrowDown":t.preventDefault(),t.stopPropagation(),this.#l||this.#T(),requestAnimationFrame(()=>this.#E(0));return;case"Escape":t.preventDefault(),t.stopPropagation(),this.#l&&this.#f(),this.#x();return;case"Tab":this.#l&&this.#f();return}};#R=t=>{if(t.relatedTarget&&this.contains(t.relatedTarget))return;let e=this.#e.value.trim();if(e){let i=g(e);i&&(this.#t=i.h,this.#i=i.m,this.#s=i.s,this.#h==="12h"&&(this.#o=this.#t>=12?"PM":"AM"),this.#k(),this.#C(),this.dispatchEvent(new CustomEvent("time-picker:change",{bubbles:!0,detail:{value:d(this.#t,this.#i,this.#s,this.#p),hours:this.#t,minutes:this.#i,seconds:this.#s}})))}this.#x(),this.#l&&this.#f(),this.#n.dispatchEvent(new Event("blur",{bubbles:!0}))};#j=(t,e)=>{let i=this.#r.indexOf(e);switch(t.key){case"ArrowUp":t.preventDefault(),this.#b(e,e.step);break;case"ArrowDown":t.preventDefault(),this.#b(e,-e.step);break;case"ArrowRight":t.preventDefault(),i<this.#r.length-1?this.#E(i+1):this.#u&&this.#u.focus();break;case"ArrowLeft":t.preventDefault(),i>0&&this.#E(i-1);break;case"PageUp":t.preventDefault(),this.#b(e,e.step*(e.label==="Hours"?1:10));break;case"PageDown":t.preventDefault(),this.#b(e,-e.step*(e.label==="Hours"?1:10));break;case"Home":t.preventDefault(),this.#y(e,e.min);break;case"End":t.preventDefault(),this.#y(e,e.max);break;case"Escape":t.preventDefault(),this.#f(),this.#e.focus();break;default:/^\d$/.test(t.key)&&(t.preventDefault(),this.#U(t.key,e))}};#m="";#D=0;#U(t,e){clearTimeout(this.#D),this.#m+=t;let i=Number(this.#m);if(this.#m.length>=2||i*10>e.max){let r=Math.min(Math.max(i,e.min),e.max);this.#y(e,r),this.#m=""}else this.#D=setTimeout(()=>{let r=Number(this.#m),s=Math.min(Math.max(r,e.min),e.max);this.#y(e,s),this.#m=""},800)}#b(t,e){let i;t.label==="Hours"?i=this.#h==="12h"?this.#$():this.#t:t.label==="Minutes"?i=this.#i:i=this.#s;let r=x(i+e,t.min,t.max);this.#y(t,r)}#y(t,e){t.label==="Hours"?this.#h==="12h"?this.#t=this.#B(e,this.#o):this.#t=e:t.label==="Minutes"?this.#i=e:this.#s=e,this.#A()}#A(){this.#P(),this.#x(),this.#k(),this.#C(),this.dispatchEvent(new CustomEvent("time-picker:change",{bubbles:!0,detail:{value:d(this.#t,this.#i,this.#s,this.#p),hours:this.#t,minutes:this.#i,seconds:this.#s}}))}#P(){let t=this.#h==="12h"?this.#$():this.#t;this.#r[0].valueEl.textContent=u(t),this.#r[0].el.setAttribute("aria-valuenow",String(t)),this.#r[0].el.setAttribute("aria-valuetext",this.#h==="12h"?`${t} ${this.#o}`:String(t)),this.#r[1].valueEl.textContent=u(this.#i),this.#r[1].el.setAttribute("aria-valuenow",String(this.#i)),this.#p&&this.#r[2]&&(this.#r[2].valueEl.textContent=u(this.#s),this.#r[2].el.setAttribute("aria-valuenow",String(this.#s))),this.#u&&(this.#u.textContent=this.#o)}#x(){this.#t!==void 0&&(this.#e.value=y(this.#t,this.#i,this.#s,this.#p,this.#h))}#k(){let t=d(this.#t,this.#i,this.#s,this.#p);this.#c.setFormValue(t),this.#n.value=t,this.#n.dispatchEvent(new Event("input",{bubbles:!0}))}#C(){if((this.hasAttribute("required")||this.#n.hasAttribute("required"))&&!this.#n.value){this.#c.setValidity({valueMissing:!0},"Please select a time",this.#e||this);return}this.#c.setValidity({})}#B(t,e){return e==="AM"?t===12?0:t:t===12?12:t+12}#$(){if(this.#h==="24h")return this.#t;let t=this.#t%12;return t===0?12:t}#E(t){this.#r[t]?.el.focus()}formResetCallback(){let t=c(this.#S);t?(this.#t=t.h,this.#i=t.m,this.#s=t.s):(this.#t=0,this.#i=0,this.#s=0),this.#h==="12h"&&(this.#o=this.#t>=12?"PM":"AM"),this.#A()}formStateRestoreCallback(t){if(!t)return;let e=c(t);e&&(this.#t=e.h,this.#i=e.m,this.#s=e.s,this.#h==="12h"&&(this.#o=this.#t>=12?"PM":"AM"),this.#A())}get value(){return d(this.#t,this.#i,this.#s,this.#p)}set value(t){let e=c(t);e&&(this.#t=e.h,this.#i=e.m,this.#s=e.s,this.#h==="12h"&&(this.#o=this.#t>=12?"PM":"AM"),this.#A())}};A("time-picker",f);export{f as TimePicker};
+//# sourceMappingURL=time-picker.js.map

package/dist/cdn/components/toast-msg.js

@@ -0,0 +1,7 @@
+var c=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,t,s,n){e.addEventListener(t,s,n),this.#e.push(()=>e.removeEventListener(t,s,n))}setup(){}teardown(){}};var b=window.matchMedia("(prefers-reduced-motion: reduce)");var l=new Map;function h(o,e,t={}){let s=t.priority??10,n={impl:e,bundle:t.bundle,contract:t.contract,priority:s},i=l.get(o);if(customElements.get(o)){if(!i||i.priority>=s){i&&i.priority===s&&i.impl!==e&&console.warn(`[VB Bundle] Tag <${o}> already registered by "${i.bundle}" (priority ${i.priority}). Skipping "${t.bundle}".`);return}console.warn(`[VB Bundle] Tag <${o}> defined by "${i.bundle}" cannot be replaced (customElements.define is permanent). "${t.bundle}" has higher priority but arrived late.`);return}if(i&&i.priority>=s){i.priority===s&&console.warn(`[VB Bundle] Tag <${o}> already registered by "${i.bundle}". Skipping "${t.bundle}" (first wins at equal priority).`);return}l.set(o,n),customElements.define(o,e)}var u=class extends c{#e=[];#t=[];static get observedAttributes(){return["position","max"]}setup(){this.setAttribute("role","region"),this.setAttribute("aria-label","Notifications"),this.setAttribute("aria-live","polite")}teardown(){this.#t.forEach(e=>{e._dismissTimer&&clearTimeout(e._dismissTimer)}),this.#e=[],this.#t=[]}show(e){let{message:t,variant:s="info",duration:n=this.#o(),dismissible:i=!0,action:r,onAction:a}=e,d=this.#r({message:t,variant:s,dismissible:i,action:r,onAction:a}),f=this.#a();return this.#t.length>=f?this.#e.push({toast:d,duration:n}):this.#s(d,n),d}#r({message:e,variant:t,dismissible:s,action:n,onAction:i}){let r=document.createElement("div");r.className="toast",r.setAttribute("role",t==="error"||t==="warning"?"alert":"status"),r.setAttribute("data-variant",t);let a={info:"&#9432;",success:"&#10003;",warning:"&#9888;",error:"&#10007;"};return r.innerHTML=`
+      <span class="icon" aria-hidden="true">${a[t]||a.info}</span>
+      <span class="message">${this.#n(e)}</span>
+      ${n?`<button type="button" class="action">${this.#n(n)}</button>`:""}
+      ${s?'<button type="button" class="close" aria-label="Dismiss">&#x2715;</button>':""}
+    `,s&&r.querySelector(".close")?.addEventListener("click",()=>{this.#i(r)}),n&&i&&r.querySelector(".action")?.addEventListener("click",()=>{i(),this.#i(r)}),r}#s(e,t){this.appendChild(e),this.#t.push(e),requestAnimationFrame(()=>{e.setAttribute("data-state","visible")}),t>0&&(e._dismissTimer=setTimeout(()=>{this.#i(e)},t)),this.dispatchEvent(new CustomEvent("toast-msg:show",{bubbles:!0,detail:{toast:e}}))}#i(e){if(!this.contains(e))return;e._dismissTimer&&clearTimeout(e._dismissTimer),e.setAttribute("data-state","hiding");let t=()=>{e.removeEventListener("animationend",t),e.remove();let s=this.#t.indexOf(e);if(s>-1&&this.#t.splice(s,1),this.#e.length>0){let{toast:n,duration:i}=this.#e.shift();this.#s(n,i)}this.dispatchEvent(new CustomEvent("toast-msg:hide",{bubbles:!0,detail:{toast:e}}))};e.addEventListener("animationend",t),setTimeout(()=>{this.contains(e)&&t()},300)}dismissAll(){this.#e=[],[...this.#t].forEach(e=>this.#i(e))}#o(){let e=this.getAttribute("duration");return e!==null?parseInt(e,10):5e3}#a(){let e=this.getAttribute("max");return e!==null?parseInt(e,10):5}#n(e){let t=document.createElement("div");return t.textContent=e,t.innerHTML}};h("toast-msg",u);export{u as ToastMsg};
+//# sourceMappingURL=toast-msg.js.map

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

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

package/dist/cdn/components/tool-tip.js

@@ -0,0 +1,2 @@
+var a=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let t of this.#e)t();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,o,n){t.addEventListener(e,o,n),this.#e.push(()=>t.removeEventListener(e,o,n))}setup(){}teardown(){}};var b=window.matchMedia("(prefers-reduced-motion: reduce)");var c=new Map;function d(r,t,e={}){let o=e.priority??10,n={impl:t,bundle:e.bundle,contract:e.contract,priority:o},i=c.get(r);if(customElements.get(r)){if(!i||i.priority>=o){i&&i.priority===o&&i.impl!==t&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${i.bundle}" (priority ${i.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${r}> defined by "${i.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(i&&i.priority>=o){i.priority===o&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${i.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}c.set(r,n),customElements.define(r,t)}var u=CSS.supports("anchor-name","--test"),f=new Set(["BUTTON","A","AREA"]);function p(r){return document.documentElement.hasAttribute("data-interest-polyfill")?!0:"interestForElement"in HTMLButtonElement.prototype?f.has(r.tagName):!1}var l=class extends a{#e;#t;#r;#s;#a=!u;#i=!1;#o=!1;#h;setup(){this.#i=this.getAttribute("variant")==="card",this.#i?this.#b():this.#m()}#m(){if(this.#e=this.querySelector(":scope > :not(template)"),!this.#e)return;this.#o=p(this.#e);let t=this.querySelector(":scope > template[data-tooltip]"),e=this.getAttribute("content"),o=this.#e.getAttribute("title");if(!t&&!e&&!o)return;o&&(this.#h=o,this.#e.removeAttribute("title")),this.#t=document.createElement("div"),this.#t.className="tooltip",this.#t.setAttribute("role","tooltip"),this.#t.setAttribute("popover","hint"),t?this.#t.innerHTML=t.innerHTML:this.#t.textContent=e||o,this.#t.id=`tooltip-${crypto.randomUUID().slice(0,8)}`;let n=this.getAttribute("position")||"top";this.#t.dataset.tooltipPosition=n;let i=document.createElement("span");if(i.className="tooltip-arrow",i.setAttribute("aria-hidden","true"),this.#t.appendChild(i),this.appendChild(this.#t),u){let s=`--tooltip-anchor-${this.#t.id}`;this.#e.style.anchorName=s,this.#t.style.positionAnchor=s,this.#t.setAttribute("data-anchor","")}this.#o?(this.#e.setAttribute("interestfor",this.#t.id),this.#e.hasAttribute("aria-describedby")||this.#e.setAttribute("aria-describedby",this.#t.id),this.#a&&this.listen(this.#t,"toggle",this.#l)):(this.#e.setAttribute("aria-describedby",this.#t.id),this.listen(this.#e,"mouseenter",this.#c),this.listen(this.#e,"mouseleave",this.#n),this.listen(this.#e,"focus",this.#d),this.listen(this.#e,"blur",this.#g),this.listen(this.#t,"mouseenter",this.#u),this.listen(this.#t,"mouseleave",this.#n))}#b(){this.#e=this.querySelector(":scope > [data-trigger]");let t=this.querySelector(":scope > [data-content]");!this.#e||!t||(this.#o=p(this.#e),this.#t=document.createElement("div"),this.#t.className="hover-card",this.#t.setAttribute("popover","manual"),this.#t.id=`hc-${crypto.randomUUID().slice(0,8)}`,this.#t.appendChild(t),t.removeAttribute("data-content"),t.hidden=!1,this.appendChild(this.#t),this.#o?(this.#e.setAttribute("interestfor",this.#t.id),this.listen(this.#t,"toggle",this.#l)):(this.listen(this.#e,"mouseenter",this.#c),this.listen(this.#e,"mouseleave",this.#n),this.listen(this.#e,"focus",this.#d),this.listen(this.#e,"blur",this.#n),this.listen(this.#t,"mouseenter",this.#u),this.listen(this.#t,"mouseleave",this.#n),this.listen(document,"keydown",this.#w)))}teardown(){this.#e&&(this.#o&&this.#e.removeAttribute("interestfor"),this.#h&&(this.#e.setAttribute("title",this.#h),this.#h=void 0)),this.#t&&(this.#t.remove(),this.#t=null),clearTimeout(this.#r),clearTimeout(this.#s)}#l=t=>{t.newState==="open"?(this.#i?this.#f():this.#a&&this.#p(),this.dispatchEvent(new CustomEvent("tool-tip:show",{bubbles:!0}))):this.dispatchEvent(new CustomEvent("tool-tip:hide",{bubbles:!0}))};#c=()=>{clearTimeout(this.#s);let t=this.#i?300:200,e=parseInt(this.getAttribute("delay")||String(t),10);this.#r=setTimeout(()=>this.show(),e)};#n=()=>{clearTimeout(this.#r);let t=this.#i?200:100;this.#s=setTimeout(()=>this.hide(),t)};#d=()=>{clearTimeout(this.#s),this.show()};#g=()=>{clearTimeout(this.#r),this.hide()};#u=()=>{clearTimeout(this.#s)};#w=t=>{t.key==="Escape"&&this.isVisible&&this.hide()};show(){!this.#t||this.isVisible||(this.#t.showPopover(),this.#i?this.#f():this.#a&&this.#p(),this.dispatchEvent(new CustomEvent("tool-tip:show",{bubbles:!0})))}hide(){!this.#t||!this.isVisible||(this.#t.hidePopover(),this.dispatchEvent(new CustomEvent("tool-tip:hide",{bubbles:!0})))}#p(){if(!this.#e||!this.#t)return;let t=this.#e.getBoundingClientRect(),e=this.#t.getBoundingClientRect(),o=this.getAttribute("position")||"top",n=8,i,s;switch(o){case"bottom":i=t.bottom+n,s=t.left+(t.width-e.width)/2;break;case"left":i=t.top+(t.height-e.height)/2,s=t.left-e.width-n;break;case"right":i=t.top+(t.height-e.height)/2,s=t.right+n;break;default:i=t.top-e.height-n,s=t.left+(t.width-e.width)/2;break}let h=8;s=Math.max(h,Math.min(s,window.innerWidth-e.width-h)),i=Math.max(h,Math.min(i,window.innerHeight-e.height-h)),this.#t.style.top=`${i}px`,this.#t.style.left=`${s}px`}#f(){if(!this.#e||!this.#t)return;let t=this.#e.getBoundingClientRect(),e=this.#t.getBoundingClientRect(),o=this.getAttribute("position")||"bottom",n=8,i=8,s,h;h=t.left+(t.width-e.width)/2,h=Math.max(i,Math.min(h,window.innerWidth-e.width-i)),o==="top"?(s=t.top-e.height-n,s<i&&(s=t.bottom+n)):(s=t.bottom+n,s+e.height>window.innerHeight-i&&(s=t.top-e.height-n)),this.#t.style.position="fixed",this.#t.style.top=`${s}px`,this.#t.style.left=`${h}px`}get isVisible(){return this.#t?.matches(":popover-open")??!1}};d("tool-tip",l);export{l as ToolTip};
+//# sourceMappingURL=tool-tip.js.map

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

@@ -0,0 +1,16 @@
+var b=window.matchMedia("(prefers-reduced-motion: reduce)");var p=new Map;function m(i,t,n={}){let a=n.priority??10,o={impl:t,bundle:n.bundle,contract:n.contract,priority:a},s=p.get(i);if(customElements.get(i)){if(!s||s.priority>=a){s&&s.priority===a&&s.impl!==t&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${n.bundle}".`);return}console.warn(`[VB Bundle] Tag <${i}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${n.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=a){s.priority===a&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${s.bundle}". Skipping "${n.bundle}" (first wins at equal priority).`);return}p.set(i,o),customElements.define(i,t)}var c=class extends HTMLElement{#e=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let t of this.#e)t();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,n,a,o){t.addEventListener(n,a,o),this.#e.push(()=>t.removeEventListener(n,a,o))}setup(){}teardown(){}};var l=class extends c{static observedAttributes=["font-family","label","sample","show-scale","show-weights","show-characters","weights"];setup(){this.#e()}attributeChangedCallback(){this.isConnected&&this.#e()}#e(){let t=this.getAttribute("font-family")||"system-ui",n=this.getAttribute("label")||t.replace(/['"]/g,"").split(",")[0],a=this.getAttribute("sample")||"The quick brown fox jumps over the lazy dog",o=this.hasAttribute("show-scale"),s=this.hasAttribute("show-weights"),u=this.hasAttribute("show-characters"),h=(this.getAttribute("weights")||"300,400,500,600,700").split(",").map(e=>e.trim()),r="";if(r+=`<div class="specimen-header" style="font-family:${t}">
+      <span class="specimen-label">${n}</span>
+      <p class="specimen-sample" contenteditable="plaintext-only" spellcheck="false">${a}</p>
+    </div>`,u&&(r+=`<div class="specimen-chars" style="font-family:${t}">
+        <div class="char-row"><span class="char-label">Upper</span>${"ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").map(e=>`<span>${e}</span>`).join("")}</div>
+        <div class="char-row"><span class="char-label">Lower</span>${"abcdefghijklmnopqrstuvwxyz".split("").map(e=>`<span>${e}</span>`).join("")}</div>
+        <div class="char-row"><span class="char-label">Digits</span>${"0123456789".split("").map(e=>`<span>${e}</span>`).join("")}</div>
+        <div class="char-row"><span class="char-label">Punct</span>${"!@#$%^&*()_+-=[]{}|;:,.<>?".split("").map(e=>`<span>${e==="<"?"&lt;":e===">"?"&gt;":e==="&"?"&amp;":e}</span>`).join("")}</div>
+      </div>`),s){r+='<div class="specimen-weights">';for(let e of h)r+=`<div class="weight-sample" style="font-family:${t};font-weight:${e}">
+          <span class="weight-label">${e}</span>
+          <span class="weight-text">Aa</span>
+        </div>`;r+="</div>"}if(o){let e=[{name:"xs",rem:.75},{name:"sm",rem:.875},{name:"md",rem:1},{name:"lg",rem:1.125},{name:"xl",rem:1.25},{name:"2xl",rem:1.5},{name:"3xl",rem:1.875},{name:"4xl",rem:2.25},{name:"5xl",rem:3}];r+='<div class="specimen-scale">';for(let d of e)r+=`<div class="scale-step" style="font-family:${t};font-size:${d.rem}rem">
+          <span class="scale-label">${d.name}</span>
+          <span class="scale-text">${a.substring(0,30)}</span>
+        </div>`;r+="</div>"}this.innerHTML=r}};m("type-specimen",l);
+//# sourceMappingURL=type-specimen.js.map