vanilla-breeze 0.1.1 → 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/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/carousel-wc.js +1 -1
- 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/font-pairer.js +108 -0
- package/dist/cdn/components/geo-map.js +7 -7
- package/dist/cdn/components/gradient-builder.js +52 -0
- package/dist/cdn/components/highlight-wc.js +3 -0
- package/dist/cdn/components/manifest.json +93 -21
- 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 +11 -11
- 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/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/watch-wc.js +3 -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 +8 -38
- 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.js +36 -36
- package/dist/cdn/themes/alpha1999.css +1 -1
- package/dist/cdn/themes/brutalist.css +1 -1
- package/dist/cdn/themes/claymorphism.css +1 -1
- package/dist/cdn/themes/genai.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 +12 -12
- package/dist/cdn/themes/nes.css +1 -1
- package/dist/cdn/themes/neumorphism.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/win9x.css +1 -1
- package/dist/cdn/vanilla-breeze-core.css +1 -1
- package/dist/cdn/vanilla-breeze-core.js +119 -47
- package/dist/cdn/vanilla-breeze-extras.js +154 -74
- package/dist/cdn/vanilla-breeze.css +1 -1
- package/dist/cdn/vanilla-breeze.js +605 -249
- 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,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 */
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"design-system": {
|
|
3
3
|
"fullJs": {
|
|
4
4
|
"file": "design-system.full.js",
|
|
5
|
-
"size":
|
|
5
|
+
"size": 47130
|
|
6
6
|
},
|
|
7
7
|
"fullCss": {
|
|
8
8
|
"file": "design-system.full.css",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"effects": {
|
|
13
13
|
"fullJs": {
|
|
14
14
|
"file": "effects.full.js",
|
|
15
|
-
"size":
|
|
15
|
+
"size": 18678
|
|
16
16
|
},
|
|
17
17
|
"fullCss": {
|
|
18
18
|
"file": "effects.full.css",
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
"kawaii": {
|
|
95
95
|
"themeCss": {
|
|
96
96
|
"file": "kawaii.theme.css",
|
|
97
|
-
"size":
|
|
97
|
+
"size": 3231
|
|
98
98
|
},
|
|
99
99
|
"effectsCss": {
|
|
100
100
|
"file": "kawaii.effects.css",
|
|
@@ -110,11 +110,11 @@
|
|
|
110
110
|
},
|
|
111
111
|
"fullCss": {
|
|
112
112
|
"file": "kawaii.full.css",
|
|
113
|
-
"size":
|
|
113
|
+
"size": 10602
|
|
114
114
|
},
|
|
115
115
|
"fullJs": {
|
|
116
116
|
"file": "kawaii.full.js",
|
|
117
|
-
"size":
|
|
117
|
+
"size": 7775
|
|
118
118
|
}
|
|
119
119
|
},
|
|
120
120
|
"memphis": {
|
|
@@ -157,44 +157,14 @@
|
|
|
157
157
|
"size": 300
|
|
158
158
|
}
|
|
159
159
|
},
|
|
160
|
-
"retro": {
|
|
161
|
-
"themeCss": {
|
|
162
|
-
"file": "retro.theme.css",
|
|
163
|
-
"size": 600
|
|
164
|
-
},
|
|
165
|
-
"effectsCss": {
|
|
166
|
-
"file": "retro.effects.css",
|
|
167
|
-
"size": 13163
|
|
168
|
-
},
|
|
169
|
-
"effectsJs": {
|
|
170
|
-
"file": "retro.effects.js",
|
|
171
|
-
"size": 8665
|
|
172
|
-
},
|
|
173
|
-
"componentsJs": {
|
|
174
|
-
"file": "retro.components.js",
|
|
175
|
-
"size": 45
|
|
176
|
-
},
|
|
177
|
-
"bundleJs": {
|
|
178
|
-
"file": "retro.bundle.js",
|
|
179
|
-
"size": 1173
|
|
180
|
-
},
|
|
181
|
-
"fullCss": {
|
|
182
|
-
"file": "retro.full.css",
|
|
183
|
-
"size": 13764
|
|
184
|
-
},
|
|
185
|
-
"fullJs": {
|
|
186
|
-
"file": "retro.full.js",
|
|
187
|
-
"size": 8519
|
|
188
|
-
}
|
|
189
|
-
},
|
|
190
160
|
"ui": {
|
|
191
161
|
"fullJs": {
|
|
192
162
|
"file": "ui.full.js",
|
|
193
|
-
"size":
|
|
163
|
+
"size": 41904
|
|
194
164
|
},
|
|
195
165
|
"fullCss": {
|
|
196
166
|
"file": "ui.full.css",
|
|
197
|
-
"size":
|
|
167
|
+
"size": 10749
|
|
198
168
|
},
|
|
199
169
|
"packJs": {
|
|
200
170
|
"file": "ui.pack.js",
|
|
@@ -204,7 +174,7 @@
|
|
|
204
174
|
"ux-planning": {
|
|
205
175
|
"fullJs": {
|
|
206
176
|
"file": "ux-planning.full.js",
|
|
207
|
-
"size":
|
|
177
|
+
"size": 212411
|
|
208
178
|
},
|
|
209
179
|
"fullCss": {
|
|
210
180
|
"file": "ux-planning.full.css",
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
theme-picker:not(:defined){display:block}theme-picker{display:inline-block;position:relative;&[variant=inline]{display:block}&[open] .panel{opacity:1;visibility:visible;transform:translateY(0);transition:opacity var(--motion-enter-duration) var(--ease-out),visibility var(--motion-enter-duration) var(--ease-out),transform var(--motion-enter-duration) var(--ease-out)}&[variant=inline] .panel{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0;background:transparent}}@scope(theme-picker){.panel{--panel-top: calc(100% + var(--size-xs));--panel-left: 0px;position:absolute;top:var(--panel-top);left:var(--panel-left);z-index:1000;min-inline-size:16rem;padding:var(--size-m);background:var(--color-surface-overlay);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-m);box-shadow:var(--shadow-m);opacity:0;visibility:hidden;transform:translateY(-.25rem);transition:opacity var(--motion-exit-duration) var(--ease-out),visibility var(--motion-exit-duration) var(--ease-out),transform var(--motion-exit-duration) var(--ease-out);&[data-position=top]{transform:translateY(.25rem)}}.section{margin:0;padding:0;border:none;border-radius:0}.section+.section{margin-block-start:var(--size-m);padding-block-start:var(--size-m);border-block-start:var(--border-width-thin) solid var(--color-border)}.section>legend{padding:0;padding-inline:0;margin-block-end:var(--size-s);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-muted)}.options{display:flex;gap:var(--size-xs)}.option{display:block;flex:1;min-inline-size:0;cursor:pointer;& input[type=radio]{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}&:hover .option-content{background:var(--color-hover-bg)}& input:focus-visible+.option-content{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}& input:checked+.option-content{border-color:var(--color-primary);background:var(--color-primary-subtle);color:var(--color-gray-900);& icon-wc{color:var(--color-primary)}}}.option-content{display:flex;flex-direction:column;align-items:center;gap:var(--size-2xs);padding:var(--size-s);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-s);font-size:var(--font-size-sm);text-align:center;transition:border-color var(--duration-fast) var(--ease-default),background-color var(--duration-fast) var(--ease-default);& icon-wc{font-size:1.25em;color:var(--color-text-muted)}}.options--sizing{display:grid;grid-template-columns:1fr 1fr}.option--sizing .option-content{flex-direction:row;align-items:start;gap:var(--size-xs);text-align:start;padding:var(--size-xs) var(--size-s);& icon-wc{flex-shrink:0;margin-block-start:.15em}}.option-text{display:flex;flex-direction:column;& small{font-size:var(--font-size-xs);color:var(--color-text-muted);line-height:1.3}}.option--sizing input:checked+.option-content .option-text small{color:var(--color-primary)}.options--swatch-grid{display:flex;flex-wrap:wrap;gap:var(--size-xs)}.swatch-cell{cursor:pointer;& input[type=radio]{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.swatch-visual{display:flex;align-items:center;justify-content:center;inline-size:2.5rem;block-size:2.5rem;border-radius:var(--radius-s);background:var(--swatch-bg);color:var(--swatch-fg, white);border:var(--border-width-thin) solid oklch(0 0 0 / .15);transition:transform var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default);& icon-wc{font-size:1rem}}&:hover .swatch-visual{transform:scale(1.1);border-color:var(--color-text-muted)}& input:focus-visible+.swatch-visual{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}& input:checked+.swatch-visual{outline:2px solid var(--color-primary);outline-offset:2px;border-color:transparent}&[aria-busy=true] .swatch-visual{opacity:.5;pointer-events:none}}.options--accent-dots{display:flex;flex-wrap:wrap;gap:var(--size-2xs);align-items:center}.accent-dot{cursor:pointer;& input[type=radio]{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}.accent-dot-visual{display:block;inline-size:1.5rem;block-size:1.5rem;border-radius:50%;border:2px solid oklch(0 0 0 / .1);transition:transform var(--duration-fast) var(--ease-default)}.accent-dot:hover .accent-dot-visual{transform:scale(1.15)}.accent-dot input:checked+.accent-dot-visual{outline:2px solid var(--color-primary);outline-offset:2px;border-color:transparent}.accent-dot input:focus-visible+.accent-dot-visual{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.compact-select{display:block;inline-size:100%;padding:var(--size-xs) var(--size-s);font:inherit;font-size:var(--font-size-sm);color:var(--color-text);background-color:var(--color-surface);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-s);cursor:pointer;&:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}}@supports (appearance: base-select){.compact-select:not([multiple]){display:flex;align-items:center}}.compact-segmented{display:flex;border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-s);overflow:hidden}.compact-seg{flex:1;cursor:pointer;& input[type=radio]{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}& span{display:block;padding:var(--size-2xs) var(--size-xs);text-align:center;font-size:var(--font-size-sm);transition:background-color var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default)}&:not(:last-child) span{border-inline-end:var(--border-width-thin) solid var(--color-border)}&:hover span{background:var(--color-surface-alt)}& input:checked+span{background:var(--color-primary);color:#fff}& input:focus-visible+span{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}}.compact-toggles{display:flex;flex-direction:column;gap:var(--size-xs)}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.theme-category{+.theme-category{margin-block-start:var(--size-s)}}.category-label{display:block;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-block-end:var(--size-2xs)}.section--more-themes{border-block-start:var(--border-width-thin) solid var(--color-border);&[open] .chevron{transform:rotate(180deg)}}.more-themes-toggle{display:flex;align-items:center;gap:var(--size-xs);padding:var(--size-s) 0;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-muted);cursor:pointer;list-style:none;&::-webkit-details-marker{display:none}&::marker{display:none}.chevron{margin-inline-start:auto;transition:transform var(--duration-fast) var(--ease-default)}&:hover{color:var(--color-text)}}.section--extensions{border-block-start:var(--border-width-thin) solid var(--color-border);&[open] .chevron{transform:rotate(180deg)}}.extensions-toggle{display:flex;align-items:center;gap:var(--size-xs);padding:var(--size-s) 0;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-muted);cursor:pointer;list-style:none;&::-webkit-details-marker{display:none}&::marker{display:none}.chevron{margin-inline-start:auto;transition:transform var(--duration-fast) var(--ease-default)}&:hover{color:var(--color-text)}}.extensions-content{display:flex;flex-direction:column;gap:var(--size-xs);padding-block-end:var(--size-xs)}.extension-toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--size-s);padding:var(--size-xs) var(--size-s);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-s);cursor:pointer;transition:background var(--duration-fast) var(--ease-default);&:hover{background:var(--color-surface-alt)}}.extension-info{display:flex;align-items:center;gap:var(--size-xs);& icon-wc{color:var(--color-text-muted);font-size:1rem}}.extension-name{font-size:var(--font-size-sm)}.section--a11y{border-block-start:var(--border-width-thin) solid var(--color-border)}.options--a11y{display:flex;flex-direction:column;gap:var(--size-xs)}.option--a11y{display:flex;flex:none;cursor:pointer;& input[type=checkbox]{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.option-content{display:flex;flex-direction:row;align-items:center;gap:var(--size-s);inline-size:100%;padding:var(--size-s);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-s);font-size:var(--font-size-sm);text-align:start;transition:border-color var(--duration-fast) var(--ease-default),background-color var(--duration-fast) var(--ease-default)}.option-content:before{content:"";display:block;inline-size:1rem;block-size:1rem;flex-shrink:0;border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-xs);background:var(--color-surface);transition:background var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default)}&:hover .option-content{background:var(--color-hover-bg)}& input:focus-visible+.option-content{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}& input:checked+.option-content{border-color:var(--color-primary);background:var(--color-primary-subtle);color:var(--color-gray-900)}& input:checked+.option-content:before{background:var(--color-primary);border-color:var(--color-primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-size:.75rem;background-repeat:no-repeat;background-position:center}& input:checked+.option-content icon-wc{color:var(--color-primary)}}}@media(prefers-reduced-motion:reduce){@scope(theme-picker){.panel{transition:none;transform:none}.option-content{transition:none}}}
|
|
1
|
+
theme-picker:not(:defined){display:block}theme-picker{display:inline-block;position:relative;&[variant=inline]{display:block}&[open] .panel{opacity:1;visibility:visible;transform:translateY(0);transition:opacity var(--motion-enter-duration) var(--ease-out),visibility var(--motion-enter-duration) var(--ease-out),transform var(--motion-enter-duration) var(--ease-out)}&[variant=inline] .panel{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0;background:transparent}}@scope(theme-picker){.panel{--panel-top: calc(100% + var(--size-xs));--panel-left: 0px;position:absolute;top:var(--panel-top);left:var(--panel-left);z-index:1000;min-inline-size:16rem;padding:var(--size-m);background:var(--color-surface-overlay);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-m);box-shadow:var(--shadow-m);opacity:0;visibility:hidden;transform:translateY(-.25rem);transition:opacity var(--motion-exit-duration) var(--ease-out),visibility var(--motion-exit-duration) var(--ease-out),transform var(--motion-exit-duration) var(--ease-out);&[data-position=top]{transform:translateY(.25rem)}}.section{margin:0;padding:0;border:none;border-radius:0}.section+.section{margin-block-start:var(--size-m);padding-block-start:var(--size-m);border-block-start:var(--border-width-thin) solid var(--color-border)}.section>legend{padding:0;padding-inline:0;margin-block-end:var(--size-s);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-muted)}.options{display:flex;gap:var(--size-xs)}.option{display:block;flex:1;min-inline-size:0;cursor:pointer;& input[type=radio]{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}&:hover .option-content{background:var(--color-hover-bg)}& input:focus-visible+.option-content{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}& input:checked+.option-content{border-color:var(--color-primary);background:var(--color-primary-subtle);color:var(--color-gray-900);& icon-wc{color:var(--color-primary)}}}.option-content{display:flex;flex-direction:column;align-items:center;gap:var(--size-2xs);padding:var(--size-s);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-s);font-size:var(--font-size-sm);text-align:center;transition:border-color var(--duration-fast) var(--ease-default),background-color var(--duration-fast) var(--ease-default);& icon-wc{font-size:1.25em;color:var(--color-text-muted)}}.options--sizing{display:grid;grid-template-columns:1fr 1fr}.option--sizing .option-content{flex-direction:row;align-items:start;gap:var(--size-xs);text-align:start;padding:var(--size-xs) var(--size-s);& icon-wc{flex-shrink:0;margin-block-start:.15em}}.option-text{display:flex;flex-direction:column;& small{font-size:var(--font-size-xs);color:var(--color-text-muted);line-height:1.3}}.option--sizing input:checked+.option-content .option-text small{color:var(--color-primary)}.options--swatch-grid{display:flex;flex-wrap:wrap;gap:var(--size-xs)}.swatch-cell{cursor:pointer;& input[type=radio]{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.swatch-visual{display:flex;align-items:center;justify-content:center;inline-size:2.5rem;block-size:2.5rem;border-radius:var(--radius-s);background:var(--swatch-bg);color:var(--swatch-fg, white);border:var(--border-width-thin) solid oklch(0 0 0 / .15);transition:transform var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default);& icon-wc{font-size:1rem}}&:hover .swatch-visual{transform:scale(1.1);border-color:var(--color-text-muted)}& input:focus-visible+.swatch-visual{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}& input:checked+.swatch-visual{outline:2px solid var(--color-primary);outline-offset:2px;border-color:transparent}&[aria-busy=true] .swatch-visual{opacity:.5;pointer-events:none}}.options--accent-dots{display:flex;flex-wrap:wrap;gap:var(--size-2xs);align-items:center}.accent-dot{cursor:pointer;& input[type=radio]{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}.accent-dot-visual{display:block;inline-size:1.5rem;block-size:1.5rem;border-radius:50%;border:2px solid oklch(0 0 0 / .1);transition:transform var(--duration-fast) var(--ease-default)}.accent-dot:hover .accent-dot-visual{transform:scale(1.15)}.accent-dot input:checked+.accent-dot-visual{outline:2px solid var(--color-primary);outline-offset:2px;border-color:transparent}.accent-dot input:focus-visible+.accent-dot-visual{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.compact-select{display:block;inline-size:100%;padding:var(--size-xs) var(--size-s);font:inherit;font-size:var(--font-size-sm);color:var(--color-text);background-color:var(--color-surface);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-s);cursor:pointer;&:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}}@supports (appearance: base-select){.compact-select:not([multiple]){display:flex;align-items:center}}.compact-segmented{display:flex;border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-s);overflow:hidden}.compact-seg{flex:1;cursor:pointer;& input[type=radio]{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}& span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:var(--size-2xs) var(--size-xs);min-block-size:2.5rem;text-align:center;font-size:var(--font-size-sm);line-height:1.2;transition:background-color var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default)}& span icon-wc{flex-shrink:0}&:not(:last-child) span{border-inline-end:var(--border-width-thin) solid var(--color-border)}&:hover span{background:var(--color-surface-alt)}& input:checked+span{background:var(--color-primary);color:#fff}& input:focus-visible+span{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}}.compact-toggles{display:flex;flex-direction:column;gap:var(--size-xs)}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.theme-category{+.theme-category{margin-block-start:var(--size-s)}}.category-label{display:block;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-block-end:var(--size-2xs)}.section--more-themes{border-block-start:var(--border-width-thin) solid var(--color-border);&[open] .chevron{transform:rotate(180deg)}}.more-themes-toggle{display:flex;align-items:center;gap:var(--size-xs);padding:var(--size-s) 0;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-muted);cursor:pointer;list-style:none;&::-webkit-details-marker{display:none}&::marker{display:none}.chevron{margin-inline-start:auto;transition:transform var(--duration-fast) var(--ease-default)}&:hover{color:var(--color-text)}}.section--extensions{border-block-start:var(--border-width-thin) solid var(--color-border);&[open] .chevron{transform:rotate(180deg)}}.extensions-toggle{display:flex;align-items:center;gap:var(--size-xs);padding:var(--size-s) 0;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-muted);cursor:pointer;list-style:none;&::-webkit-details-marker{display:none}&::marker{display:none}.chevron{margin-inline-start:auto;transition:transform var(--duration-fast) var(--ease-default)}&:hover{color:var(--color-text)}}.extensions-content{display:flex;flex-direction:column;gap:var(--size-xs);padding-block-end:var(--size-xs)}.extension-toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--size-s);padding:var(--size-xs) var(--size-s);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-s);cursor:pointer;transition:background var(--duration-fast) var(--ease-default);&:hover{background:var(--color-surface-alt)}}.extension-info{display:flex;align-items:center;gap:var(--size-xs);& icon-wc{color:var(--color-text-muted);font-size:1rem}}.extension-name{font-size:var(--font-size-sm)}.section--a11y{border-block-start:var(--border-width-thin) solid var(--color-border)}.options--a11y{display:flex;flex-direction:column;gap:var(--size-xs)}.option--a11y{display:flex;flex:none;cursor:pointer;& input[type=checkbox]{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.option-content{display:flex;flex-direction:row;align-items:center;gap:var(--size-s);inline-size:100%;padding:var(--size-s);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-s);font-size:var(--font-size-sm);text-align:start;transition:border-color var(--duration-fast) var(--ease-default),background-color var(--duration-fast) var(--ease-default)}.option-content:before{content:"";display:block;inline-size:1rem;block-size:1rem;flex-shrink:0;border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-xs);background:var(--color-surface);transition:background var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default)}&:hover .option-content{background:var(--color-hover-bg)}& input:focus-visible+.option-content{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}& input:checked+.option-content{border-color:var(--color-primary);background:var(--color-primary-subtle);color:var(--color-gray-900)}& input:checked+.option-content:before{background:var(--color-primary);border-color:var(--color-primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-size:.75rem;background-repeat:no-repeat;background-position:center}& input:checked+.option-content icon-wc{color:var(--color-primary)}}}@media(prefers-reduced-motion:reduce){@scope(theme-picker){.panel{transition:none;transform:none}.option-content{transition:none}}}
|
|
2
2
|
/*# sourceMappingURL=ui.full.css.map */
|