vanilla-breeze 0.3.0 → 0.3.1

package/dist/cdn/components/color-palette.js

@@ -1,16 +0,0 @@
-var U=window.matchMedia("(prefers-reduced-motion: reduce)");var C=new Map;function A(o,t,e={}){let s=e.priority??10,i={impl:t,bundle:e.bundle,contract:e.contract,priority:s},n=C.get(o);if(customElements.get(o)){if(!n||n.priority>=s){n&&n.priority===s&&n.impl!==t&&console.warn(`[VB Bundle] Tag <${o}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${o}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=s){n.priority===s&&console.warn(`[VB Bundle] Tag <${o}> already registered by "${n.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}C.set(o,i),customElements.define(o,t)}var f=class extends HTMLElement{#e=[];#t;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let t of this.#e)t();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,s,i){t.addEventListener(e,s,i),this.#e.push(()=>t.removeEventListener(e,s,i))}setup(){}teardown(){}setState(t,e){this.#t||(this.#t=this.attachInternals());let s=this.#t.states;try{e?s.add(t):s.delete(t)}catch{let i=`--${t}`;e?s.add(i):s.delete(i)}}_adoptInternals(t){this.#t||(this.#t=t)}};var b="[data-copy], [data-copy-target], [data-paste-target]",L="Copied to clipboard",O="Pasted from clipboard",y=new WeakMap;async function v(o,t={}){if(o==null||o==="")return!1;let{button:e,announceMessage:s=L,duration:i=1500}=t;try{await navigator.clipboard.writeText(o)}catch{return!1}return k({button:e,duration:i,announceMessage:s,eventDetail:{text:o}}),!0}function k({button:o,duration:t,announceMessage:e,eventDetail:s,state:i="copied",eventName:n="copy"}){if(o){o.dataset.state=i;let r=y.get(o);r&&clearTimeout(r),y.set(o,setTimeout(()=>{delete o.dataset.state,y.delete(o)},t)),o.dispatchEvent(new CustomEvent(n,{bubbles:!0,detail:s}))}q(e,o??document.body)}async function z(o,t={}){let{button:e,announceMessage:s=O,duration:i=1500}=t,n;try{n=await navigator.clipboard.readText()}catch{return null}return o&&("value"in o&&(o instanceof HTMLInputElement||o instanceof HTMLTextAreaElement||o instanceof HTMLSelectElement)?o.value=n:o.textContent=n,o.dispatchEvent(new Event("input",{bubbles:!0}))),k({button:e,duration:i,announceMessage:s,eventDetail:{text:n},state:"pasted",eventName:"paste"}),n}function T(o=document){o.querySelectorAll(b).forEach(x)}function x(o){o.hasAttribute("data-copy-init")||(o.setAttribute("data-copy-init",""),o.addEventListener("click",()=>{if(o.dataset.pasteTarget){let e=document.querySelector(o.dataset.pasteTarget);if(!e)return;z(e,{button:o});return}let t=D(o);t&&v(t,{button:o})}))}function D(o){if(o.dataset.copy)return o.dataset.copy;if(o.dataset.copyTarget){let t=document.querySelector(o.dataset.copyTarget);if(!t)return"";let e=o.dataset.copyAttr;return e?t.getAttribute(e)??"":t.textContent??""}return""}function q(o,t){let e=document.createElement("div");e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),e.className="visually-hidden",e.textContent=o,t.appendChild(e),setTimeout(()=>e.remove(),1e3)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>T()):T();var I=new MutationObserver(o=>{for(let t of o)for(let e of t.addedNodes){if(e.nodeType!==Node.ELEMENT_NODE)continue;let s=e;s.matches(b)&&x(s),s.querySelectorAll(b).forEach(i=>x(i))}});I.observe(document.documentElement,{childList:!0,subtree:!0});var g=class extends f{static observedAttributes=["colors","names","layout","show-values","show-names","size","editable"];#e=[];setup(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}#t(){let t=this.getAttribute("colors")||"",e=this.getAttribute("names")||"",s=this.getAttribute("layout")||"inline",i=this.getAttribute("size")||"md",n=this.hasAttribute("show-values"),r=this.hasAttribute("show-names")||e.length>0,a=this.hasAttribute("editable"),c=this.#c(t);this.#e=c.slice();let u=e?e.split(",").map(d=>d.trim()):[],h={sm:48,md:80,lg:120}[i]||80,m="display:flex;flex-wrap:wrap;gap:var(--size-xs,0.5rem)";s==="grid"?m=`display:grid;grid-template-columns:repeat(auto-fill,minmax(${h}px,1fr));gap:var(--size-xs,0.5rem)`:s==="list"&&(m="display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)");let N=c.map((d,p)=>{let l=u[p]||"",S=this.#n(d),E=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:${h}px`,$=s==="list"?36:h,w=`background:${d};color:${S};width:${$}px;height:${$}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 M=this.#l(d);return`<div class="swatch-wrap" role="listitem" style="${E}">
-          <label class="color-box color-box-edit" style="${w};cursor:pointer" data-index="${p}" title="Click to edit${l?": "+l:""}" aria-label="${l||"Color "+(p+1)}: ${d}. Click to edit.">
-            <input type="color" class="color-input" value="${M}" data-index="${p}" style="position:absolute;inset:0;opacity:0;cursor:pointer;inline-size:100%;block-size:100%" aria-label="${l||"Color "+(p+1)} picker">
-            <span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${n?"1":"0"};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease;pointer-events:none">${this.#s(d)}</span>
-          </label>
-          ${r&&l?`<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">${l}</span>`:""}
-        </div>`}return`<div class="swatch-wrap" role="listitem" style="${E}">
-        <button type="button" class="color-box" data-index="${p}"
-          style="${w}"
-          title="Click to copy${l?": "+l:""}"
-          aria-label="${l||"Color "+(p+1)}: ${d}">
-          <span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${n?"1":"0"};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease">${this.#s(d)}</span>
-        </button>
-        ${r&&l?`<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">${l}</span>`:""}
-      </div>`}).join("");this.innerHTML=`<div class="palette ${s}" role="list" aria-label="Color palette" style="${m}">${N}</div>`,a?this.#r(u):(this.#a(c,u),this.#i(c,u,n))}#i(t,e,s){this.querySelectorAll(".color-box").forEach(i=>{let n=i;s||(n.addEventListener("pointerenter",()=>{let r=n.querySelector(".color-value");r&&(r.style.opacity="1")}),n.addEventListener("pointerleave",()=>{let r=n.querySelector(".color-value");r&&(r.style.opacity="0")})),n.addEventListener("click",()=>{let r=Number(n.dataset.index),a=t[r],c=e[r]||"";v(a,{button:n,announceMessage:"Color copied"}),this.dispatchEvent(new CustomEvent("color-palette:select",{bubbles:!0,detail:{color:a,name:c,index:r}})),n.style.outline="3px solid currentColor",n.style.outlineOffset="2px",setTimeout(()=>{n.style.outline="",n.style.outlineOffset=""},600)})})}#r(t){this.querySelectorAll(".color-input").forEach(e=>{e.addEventListener("input",()=>{let s=Number(e.dataset.index),i=e.value;this.#e[s]=i;let n=e.parentElement;if(n){n.style.background=i,n.style.color=this.#n(i);let r=n.querySelector(".color-value");r&&(r.textContent=this.#s(i)),n.title=`Click to edit${t[s]?": "+t[s]:""} (${i})`,n.setAttribute("aria-label",`${t[s]||"Color "+(s+1)}: ${i}. Click to edit.`)}this.setAttribute("colors",this.#e.join(",")),this.dispatchEvent(new CustomEvent("color-palette:change",{bubbles:!0,detail:{color:i,name:t[s]||"",index:s,colors:this.#e.slice()}}))})})}get colors(){return this.#e.slice()}#a(t,e){this.querySelectorAll(".color-box").forEach(s=>{let i=Number(s.dataset.index),n=t[i];if(!n||!n.includes("var("))return;let r=getComputedStyle(s).backgroundColor,a=this.#o(r)||r;t[i]=a,this.#e[i]=a;let c=s.querySelector(".color-value");c&&(c.textContent=a),s.style.color=this.#n(a);let u=e[i]||"";s.title=`Click to copy${u?": "+u:""} (${a})`,s.setAttribute("aria-label",`${u||"Color "+(i+1)}: ${a}`)})}#o(t){let e=t.match(/rgba?\(\s*([\d.]+),?\s*([\d.]+),?\s*([\d.]+)/);if(!e)return null;let[,s,i,n]=e,r=a=>Math.round(Number(a)).toString(16).padStart(2,"0");return`#${r(s)}${r(i)}${r(n)}`}#l(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(i=>i+i).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.#o(s)||"#000000"}#s(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,i="";for(let n of t)n==="("?s++:n===")"&&s--,n===","&&s===0?(e.push(i.trim()),i=""):i+=n;return i.trim()&&e.push(i.trim()),e}#n(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("#",""),i=parseInt(s.substring(0,2),16)/255,n=parseInt(s.substring(2,4),16)/255,r=parseInt(s.substring(4,6),16)/255;return .2126*i+.7152*n+.0722*r>.4?"#000":"#fff"}return"#000"}};A("color-palette",g);export{g as ColorPalette};
-//# sourceMappingURL=color-palette.js.map

package/dist/cdn/components/component-sampler.js

@@ -1,45 +0,0 @@
-var m=window.matchMedia("(prefers-reduced-motion: reduce)");var u=new Map;function p(r,e,t={}){let a=t.priority??10,n={impl:e,bundle:t.bundle,contract:t.contract,priority:a},o=u.get(r);if(customElements.get(r)){if(!o||o.priority>=a){o&&o.priority===a&&o.impl!==e&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${o.bundle}" (priority ${o.priority}). Skipping "${t.bundle}".`);return}console.warn(`[VB Bundle] Tag <${r}> defined by "${o.bundle}" cannot be replaced (customElements.define is permanent). "${t.bundle}" has higher priority but arrived late.`);return}if(o&&o.priority>=a){o.priority===a&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${o.bundle}". Skipping "${t.bundle}" (first wins at equal priority).`);return}u.set(r,n),customElements.define(r,e)}var i=class extends HTMLElement{#e=[];#t;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,t,a,n){e.addEventListener(t,a,n),this.#e.push(()=>e.removeEventListener(t,a,n))}setup(){}teardown(){}setState(e,t){this.#t||(this.#t=this.attachInternals());let a=this.#t.states;try{t?a.add(e):a.delete(e)}catch{let n=`--${e}`;t?a.add(n):a.delete(n)}}_adoptInternals(e){this.#t||(this.#t=e)}};var b={button:()=>`
-    <layout-cluster data-layout-gap="s">
-      <button>Primary</button>
-      <button class="secondary">Secondary</button>
-      <button disabled>Disabled</button>
-    </layout-cluster>`,input:()=>`
-    <layout-stack data-layout-gap="xs">
-      <input type="text" placeholder="Text input" aria-label="Sample text input"/>
-      <input type="email" placeholder="email@example.com" aria-label="Sample email"/>
-      <input type="text" value="Read only" readonly aria-label="Read-only input"/>
-    </layout-stack>`,select:()=>`
-    <select aria-label="Sample select">
-      <option>Choose an option</option>
-      <option>Option A</option>
-      <option>Option B</option>
-      <option>Option C</option>
-    </select>`,checkbox:()=>`
-    <layout-stack data-layout-gap="xs">
-      <label><input type="checkbox" checked="checked"/> Checked option</label>
-      <label><input type="checkbox"/> Unchecked option</label>
-      <label><input type="checkbox" disabled/> Disabled option</label>
-    </layout-stack>`,radio:()=>`
-    <layout-stack data-layout-gap="xs">
-      <label><input type="radio" name="sampler-radio" checked="checked"/> Selected</label>
-      <label><input type="radio" name="sampler-radio"/> Unselected</label>
-      <label><input type="radio" name="sampler-radio" disabled/> Disabled</label>
-    </layout-stack>`,badge:()=>`
-    <layout-cluster data-layout-gap="xs">
-      <layout-badge>Default</layout-badge>
-      <layout-badge data-color="success">Success</layout-badge>
-      <layout-badge data-color="warning">Warning</layout-badge>
-      <layout-badge data-color="danger">Danger</layout-badge>
-      <layout-badge data-color="info">Info</layout-badge>
-    </layout-cluster>`,progress:()=>`
-    <layout-stack data-layout-gap="xs">
-      <progress value="33" max="100">33%</progress>
-      <progress value="66" max="100">66%</progress>
-      <progress value="100" max="100">100%</progress>
-    </layout-stack>`,range:()=>`
-    <input type="range" min="0" max="100" value="50" aria-label="Sample range"/>`,textarea:()=>`
-    <textarea rows="3" placeholder="Textarea sample" aria-label="Sample textarea" style="width:100%"></textarea>`},c=class extends i{static observedAttributes=["components","label","compact"];setup(){this.#e()}attributeChangedCallback(){this.isConnected&&this.#e()}#e(){let e=this.getAttribute("components")||"button,input,select,checkbox,radio,badge,progress",t=this.getAttribute("label")||"",a=this.hasAttribute("compact"),n=e.split(",").map(l=>l.trim()),o=a?"0.75rem":"1.25rem",s="";t&&(s+=`<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)">${t}</p>`),s+=`<section style="display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:${o}">`;for(let l of n){let d=b[l];d&&(s+=`<article style="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);padding:var(--size-m,1rem);background:var(--color-surface,#fff)">
-        <p style="font-size:0.625rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted,#999);margin-block-end:var(--size-s,0.5rem);font-family:var(--font-sans,system-ui)">${l}</p>
-        ${d()}
-      </article>`)}s+="</section>",this.innerHTML=s}};p("component-sampler",c);
-//# sourceMappingURL=component-sampler.js.map