ranui/dist/iife/glass.iife.js

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

var ranui_glass=(function(e){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var t=`:host{display:var(--ran-glass-display,inline-block);position:var(--ran-glass-position,relative);border-radius:var(--ran-glass-radius,20px);isolation:isolate;-webkit-tap-highlight-color:transparent}.ran-glass-defs{pointer-events:none;width:0;height:0;position:absolute;overflow:hidden}.ran-glass{box-sizing:border-box;min-width:var(--ran-glass-min-width,0);min-height:var(--ran-glass-min-height,0);padding:var(--ran-glass-padding,0);border-radius:inherit;color:inherit;contain:layout paint;-webkit-backdrop-filter:blur(var(--ran-glass-blur,16px)) saturate(var(--ran-glass-saturate,180%)) brightness(var(--ran-glass-brightness,1.05)) var(--ran-glass-refraction,url(#ran-glass-filter));backdrop-filter:blur(var(--ran-glass-blur,16px)) saturate(var(--ran-glass-saturate,180%)) brightness(var(--ran-glass-brightness,1.05)) var(--ran-glass-refraction,url(#ran-glass-filter));background:var(--ran-glass-tint,#ffffff24);border:var(--ran-glass-border,1px solid #ffffff59);box-shadow:var(--ran-glass-shadow,inset 0 1px 1px #fff9, inset 0 0 0 1px #ffffff0f, inset 0 -20px 40px #ffffff0a, 0 24px 60px -18px #00000080);transition:var(--ran-glass-transition,transform var(--ran-motion-duration-base,.2s) var(--ran-motion-ease-spring,cubic-bezier(.34, 1.26, .5, 1)));position:relative;overflow:hidden}.ran-glass-specular{border-radius:inherit;pointer-events:none;opacity:var(--ran-glass-specular-opacity,1);background:var(--ran-glass-specular-background,linear-gradient(180deg, #ffffff47, transparent 34%), radial-gradient(120% 80% at 50% 0%, #ffffff2e, transparent 60%));position:absolute;inset:0}.ran-glass-rim{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.ran-glass-specular:after{content:"";border-radius:inherit;opacity:0;background:linear-gradient(105deg,#0000 42%,#fff6 50%,#0000 58%);position:absolute;inset:0;transform:translate(-130%)}:host([sheen]) .ran-glass-specular:after{opacity:.7;animation:ran-glass-sheen var(--ran-glass-sheen-duration,6s) ease-in-out infinite}@keyframes ran-glass-sheen{50%{transform:translate(130%)}}.ran-glass ::slotted(*){z-index:1;position:relative}:host([interactive]) .ran-glass{cursor:pointer}:host([interactive]:hover) .ran-glass{transform:translateY(-2px)}:host([interactive]:active) .ran-glass{transition-duration:var(--ran-motion-duration-fast,.15s);transform:translateY(0)scale(.98)}@media (prefers-reduced-motion:reduce){:host([sheen]) .ran-glass-specular:after{opacity:0;animation:none}.ran-glass{transition:none}}@media (prefers-reduced-transparency:reduce){.ran-glass{-webkit-backdrop-filter:none;background:var(--ran-glass-reduced-transparency-background,var(--ran-color-bg-elevated));box-shadow:var(--ran-glass-reduced-transparency-shadow,var(--ran-shadow-elevated))}.ran-glass-specular{display:none}}`,n=typeof document>`u`,r=class{ac=null;get signal(){return this.ac??=new AbortController,this.ac.signal}on(e,t,n,r){return e.addEventListener(t,n,{...r,signal:this.signal}),this}delegate(e,t,n,r,i){return e.addEventListener(n,n=>{let i=n.target?.closest(t);i&&e.contains(i)&&r(n,i)},{...i,signal:this.signal}),this}abort(){this.ac?.abort(),this.ac=null}},i=0,a=1,o=2,s=null,c=null,l=0,u=new Set,d=!1;function f(e,t){let n=t?.equals??Object.is,r={value:e,observers:new Set};return[()=>(ne(r),r.value),e=>{let t=typeof e==`function`?e(r.value):e;if(!n(r.value,t)){r.value=t;for(let e of r.observers)g(e,o);l===0&&re()}}]}function p(e){let t=ee(e,!0);return te(t),v(t),()=>b(t)}function m(e){let t={owned:[],cleanups:[],owner:c},n=c,r=s;c=t,s=null;try{return e(()=>x(t))}finally{c=n,s=r}}function h(e){c&&c.cleanups.push(e)}function ee(e,t,n){return{fn:e,sources:new Set,isEffect:t,running:!1,disposed:!1,state:o,observers:new Set,value:void 0,equals:n??Object.is,owned:[],cleanups:[],owner:c}}function te(e){c&&c.owned.push(e)}function ne(e){s&&(s.sources.add(e),e.observers.add(s))}function g(e,t){if(e.disposed||e.state>=t)return;let n=e.state===i;if(e.state=t,e.isEffect)u.add(e);else if(n)for(let t of e.observers)g(t,a)}function re(){if(!(l>0||d)){d=!0;try{for(;u.size>0;){let e=[...u];u.clear();for(let t of e)t.disposed||_(t)}}finally{d=!1}}}function _(e){if(!(e.disposed||e.state===i)){if(e.state===a)for(let t of e.sources)`fn`in t&&_(t);e.state===o&&v(e),e.state=i}}function v(e){if(e.running)throw Error(`ranui reactivity: cyclic dependency detected (a computation triggered itself).`);y(e);let t=s,n=c;s=e,c=e,e.running=!0,e.state=i;try{let t=e.fn();if(e.isEffect)typeof t==`function`&&e.cleanups.push(t);else{let n=e.value;if(e.value=t,e.observers.size>0&&!e.equals(n,t))for(let t of e.observers)g(t,o)}}finally{e.running=!1,s=t,c=n}}function y(e){for(let t of e.owned)b(t);e.owned.length=0;for(let t of e.cleanups)t();e.cleanups.length=0;for(let t of e.sources)t.observers.delete(e);e.sources.clear()}function b(e){e.disposed||(e.disposed=!0,y(e),e.observers.clear())}function x(e){for(let t of e.owned)b(t);e.owned.length=0;for(let t of e.cleanups)t();e.cleanups.length=0}var ie=class{_events=new Map;tap=(e,t)=>{this._events.get(e)&&e!==Symbol.for(`NEW_LISTENER`)&&this.call(Symbol.for(`NEW_LISTENER`),e);let n=this._events.get(e)||new Set;return typeof t==`function`?n.add({name:e,callback:t}):n.add(t),this._events.set(e,n),this};call=(e,...t)=>((this._events.get(e)||new Set).forEach(e=>{let{callback:n}=e;n(...t)}),this);callSync=async(e,...t)=>{let n=this._events.get(e)||new Set;for(let e of n){let{callback:n}=e;await n(...t)}return this};once=(e,t)=>{let n;if(typeof t==`function`)n={name:e,callback:(...r)=>{t(...r),this.off(e,n)},initialCallback:t};else{let{callback:r}=t;n={name:e,callback:(...t)=>{r(...t),this.off(e,n)},initialCallback:r}}return this.tap(e,n),this};off=(e,t)=>{let n=[...this._events.get(e)||new Set].filter(e=>{if(typeof t==`function`)return e.callback!==t&&e.initialCallback!==t;{let{callback:n}=t;return e.callback!==n&&e.initialCallback!==n}});return this._events.set(e,new Set(n)),this}};Math.PI/180,180/Math.PI,2*Math.PI;var S=(e=8)=>Math.random().toString(36).substring(2,e+2);Object.freeze({});var ae=e=>typeof e==`function`,oe=12e4,se=`__ranuts_bridge__`,ce=`default`,C=new class{bridges=new Set;attachedWindow=null;handleMessage=e=>{for(let t of Array.from(this.bridges))t.receive(e)};add(e){this.bridges.add(e),typeof window<`u`&&this.attachedWindow!==window&&(window.addEventListener(`message`,this.handleMessage),this.attachedWindow=window)}remove(e){this.bridges.delete(e),this.bridges.size===0&&this.attachedWindow&&(this.attachedWindow.removeEventListener(`message`,this.handleMessage),this.attachedWindow=null)}},w=class{targetWindow;targetOrigin;messageHandlers;pendingRequests;channel;senderId;available;constructor(e,t=`*`,n=ce){this.targetOrigin=t,this.channel=n,this.senderId=S(12),this.messageHandlers=new Map,this.pendingRequests=new Map,this.available=typeof window<`u`,this.available?(this.targetWindow=e??window,C.add(this)):this.targetWindow=void 0}post(e,t){let n={...t,__bridge:se,channel:this.channel,senderId:this.senderId};e.postMessage(n,this.targetOrigin)}receive=e=>{if(!this.available||this.targetOrigin!==`*`&&e.origin!==this.targetOrigin||e.source&&e.source!==this.targetWindow)return;let t=e.data;if(!t||typeof t!=`object`||t.__bridge!==`__ranuts_bridge__`||(t.channel??`default`)!==this.channel)return;let{type:n,payload:r,id:i,isResponse:a,isError:o,senderId:s}=t;if(a&&i){let e=this.pendingRequests.get(i);e&&(o?e.reject(Error(typeof r==`string`?r:`Bridge request failed`)):e.resolve(r),this.pendingRequests.delete(i));return}if(s&&s===this.senderId||typeof n!=`string`||!this.messageHandlers.has(n))return;let c=this.messageHandlers.get(n);if(ae(c)){let t=e.source??this.targetWindow;Promise.resolve(c(r)).then(e=>{i&&this.post(t,{type:n,payload:e,id:i,isResponse:!0})}).catch(e=>{i&&this.post(t,{type:n,payload:e instanceof Error?e.message:String(e),id:i,isResponse:!0,isError:!0})})}};on=(e,t)=>{this.messageHandlers.set(e,t)};off=e=>{this.messageHandlers.delete(e)};send=async(e,t)=>{if(!this.available)return Promise.reject(Error(`PostMessageBridge is unavailable outside a browser environment`));let n=S(10);return new Promise((r,i)=>{let a=setTimeout(()=>{this.pendingRequests.has(n)&&(this.pendingRequests.delete(n),i(Error(`Request timeout`)))},oe),o=e=>{clearTimeout(a),i(e)};this.pendingRequests.set(n,{resolve:e=>{clearTimeout(a),r(e)},reject:o});try{this.post(this.targetWindow,{type:e,payload:t,id:n})}catch(e){this.pendingRequests.delete(n),o(e instanceof Error?e:Error(`Failed to post message`))}})};broadcast=e=>{if(this.available)try{this.post(this.targetWindow,{type:e.type,payload:e.payload})}catch{}};destroy=()=>{C.remove(this),this.messageHandlers.clear(),this.pendingRequests.forEach(e=>{e.reject(Error(`Bridge destroyed`))}),this.pendingRequests.clear()}};(class e{static instance;bridges=new Map;constructor(){}static getInstance(){return e.instance||=new e,e.instance}connectClient=({id:e,targetOrigin:t,targetWindow:n,channel:r})=>{let i=new w(n,t,r);if(e||=S(10),this.bridges.has(e))throw Error(`Bridge ${e} already exists`);return this.bridges.set(e,i),{bridge:i,id:e}};getClient=e=>this.bridges.get(e);removeClient=e=>{let t=this.bridges.get(e);t&&(t.destroy(),this.bridges.delete(e))};removeAllClient=()=>{this.bridges.forEach(e=>{e.destroy()}),this.bridges.clear()};broadcast=e=>{this.bridges.forEach(t=>{t.broadcast(e)})};sendTo=(e,t,n)=>{let r=this.getClient(e);return r?r.send(t,n):Promise.reject(Error(`Bridge ${e} not found`))}}).getInstance(),new ie;var T=[1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411,3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298],E=class{highOrder;lowOrder;constructor(e,t){this.highOrder=e,this.lowOrder=t}};new E(T[0],3609767458),new E(T[1],602891725),new E(T[2],3964484399),new E(T[3],2173295548),new E(T[4],4081628472),new E(T[5],3053834265),new E(T[6],2937671579),new E(T[7],3664609560),new E(T[8],2734883394),new E(T[9],1164996542),new E(T[10],1323610764),new E(T[11],3590304994),new E(T[12],4068182383),new E(T[13],991336113),new E(T[14],633803317),new E(T[15],3479774868),new E(T[16],2666613458),new E(T[17],944711139),new E(T[18],2341262773),new E(T[19],2007800933),new E(T[20],1495990901),new E(T[21],1856431235),new E(T[22],3175218132),new E(T[23],2198950837),new E(T[24],3999719339),new E(T[25],766784016),new E(T[26],2566594879),new E(T[27],3203337956),new E(T[28],1034457026),new E(T[29],2466948901),new E(T[30],3758326383),new E(T[31],168717936),new E(T[32],1188179964),new E(T[33],1546045734),new E(T[34],1522805485),new E(T[35],2643833823),new E(T[36],2343527390),new E(T[37],1014477480),new E(T[38],1206759142),new E(T[39],344077627),new E(T[40],1290863460),new E(T[41],3158454273),new E(T[42],3505952657),new E(T[43],106217008),new E(T[44],3606008344),new E(T[45],1432725776),new E(T[46],1467031594),new E(T[47],851169720),new E(T[48],3100823752),new E(T[49],1363258195),new E(T[50],3750685593),new E(T[51],3785050280),new E(T[52],3318307427),new E(T[53],3812723403),new E(T[54],2003034995),new E(T[55],3602036899),new E(T[56],1575990012),new E(T[57],1125592928),new E(T[58],2716904306),new E(T[59],442776044),new E(T[60],593698344),new E(T[61],3733110249),new E(T[62],2999351573),new E(T[63],3815920427),new E(3391569614,3928383900),new E(3515267271,566280711),new E(3940187606,3454069534),new E(4118630271,4000239992),new E(116418474,1914138554),new E(174292421,2731055270),new E(289380356,3203993006),new E(460393269,320620315),new E(685471733,587496836),new E(852142971,1086792851),new E(1017036298,365543100),new E(1126000580,2618297676),new E(1288033470,3409855158),new E(1501505948,4234509866),new E(1607167915,987167468),new E(1816402316,1246189591),new E(0,1),new E(0,32898),new E(2147483648,32906),new E(2147483648,2147516416),new E(0,32907),new E(0,2147483649),new E(2147483648,2147516545),new E(2147483648,32777),new E(0,138),new E(0,136),new E(0,2147516425),new E(0,2147483658),new E(0,2147516555),new E(2147483648,139),new E(2147483648,32905),new E(2147483648,32771),new E(2147483648,32770),new E(2147483648,128),new E(0,32778),new E(2147483648,2147483658),new E(2147483648,2147516545),new E(2147483648,32896),new E(0,2147483649),new E(2147483648,2147516424);var D=/["'&<>]/;function O(e){let t=``+e,n=D.exec(t);if(!n)return t;let r,i=``,a=0,o=0;for(a=n.index;a<t.length;a++){switch(t.charCodeAt(a)){case 34:r=`&quot;`;break;case 38:r=`&amp;`;break;case 39:r=`&#39;`;break;case 60:r=`&lt;`;break;case 62:r=`&gt;`;break;default:continue}o!==a&&(i+=t.substring(o,a)),o=a+1,i+=r}return o===a?i:i+t.substring(o,a)}var k=new Map,A=`data-adopted-style`,le=(e,t,n)=>{if(typeof CSSStyleSheet>`u`)return!1;try{if(!n.has(t)){let e=new CSSStyleSheet;e.replaceSync(t),n.set(t,e)}let r=n.get(t);return e.adoptedStyleSheets.includes(r)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,r]),!0}catch{return!1}},ue=(e,t,n=A)=>{if(typeof document<`u`&&t&&!le(e,t,k)&&!e.querySelector(`style[${n}]`)){let r=document.createElement(`style`);r.setAttribute(n,``),r.textContent=t,e.appendChild(r)}};(()=>{let e=new Uint8Array(128);for(let t=0;t<78;t++)e[`abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-.,!?;:'"()[]{}`.charCodeAt(t)]=1;return e})();var j=new Map([[100,`Continue`],[101,`Switching Protocols`],[102,`Processing`],[103,`Early Hints`],[200,`OK`],[201,`Created`],[202,`Accepted`],[203,`Non-Authoritative Information`],[204,`No Content`],[205,`Reset Content`],[206,`Partial Content`],[207,`Multi-Status`],[208,`Already Reported`],[226,`IM Used`],[300,`Multiple Choices`],[301,`Moved Permanently`],[302,`Found`],[303,`See Other`],[304,`Not Modified`],[305,`Use Proxy`],[307,`Temporary Redirect`],[308,`Permanent Redirect`],[400,`Bad Request`],[401,`Unauthorized`],[402,`Payment Required`],[403,`Forbidden`],[404,`Not Found`],[405,`Method Not Allowed`],[406,`Not Acceptable`],[407,`Proxy Authentication Required`],[408,`Request Timeout`],[409,`Conflict`],[410,`Gone`],[411,`Length Required`],[412,`Precondition Failed`],[413,`Payload Too Large`],[414,`URI Too Long`],[415,`Unsupported Media Type`],[416,`Range Not Satisfiable`],[417,`Expectation Failed`],[418,`I'm a Teapot`],[421,`Misdirected Request`],[422,`Unprocessable Entity`],[423,`Locked`],[424,`Failed Dependency`],[425,`Too Early`],[426,`Upgrade Required`],[428,`Precondition Required`],[429,`Too Many Requests`],[431,`Request Header Fields Too Large`],[451,`Unavailable For Legal Reasons`],[500,`Internal Server Error`],[501,`Not Implemented`],[502,`Bad Gateway`],[503,`Service Unavailable`],[504,`Gateway Timeout`],[505,`HTTP Version Not Supported`],[506,`Variant Also Negotiates`],[507,`Insufficient Storage`],[508,`Loop Detected`],[509,`Bandwidth Limit Exceeded`],[510,`Not Extended`],[511,`Network Authentication Required`]]);(function(e){let t=new Map;for(let[n,r]of e)t.set(r.toLowerCase(),n);return t})(j),function(e){let t=[];for(let[n,r]of e)t.push(n);return t}(j);function M(e){return O(e)}var de=e=>typeof e!=`string`&&`tagName`in e&&`childrenList`in e,fe=`.#[`;function pe(e){let t=[],n=0,r=/^[a-zA-Z][\w-]*/.exec(e);for(r!==null&&(t.push(r[0]),n=r[0].length);n<e.length;){let r=e[n];if(r===`[`){let r=e.indexOf(`]`,n+1);if(r===-1)return null;t.push(e.slice(n,r+1)),n=r+1;continue}if(r!==`.`&&r!==`#`)return null;let i=n+1;for(;i<e.length&&!fe.includes(e[i]);)i+=1;if(i===n+1)return null;t.push(e.slice(n,i)),n=i}return t.length>0?t:null}var N=(e,t)=>{let n=t;if(n.startsWith(`.`))return e.classList.contains(n.slice(1));if(n.startsWith(`#`))return e.getAttribute(`id`)===n.slice(1);if(n.startsWith(`[`)&&n.endsWith(`]`)){let[t,r]=n.slice(1,-1).trim().split(`=`),i=(t||``).trim();if(!i)return!1;if(r==null)return e.hasAttribute(i);let a=r.trim().replace(/^['"]|['"]$/g,``);return e.getAttribute(i)===a}return e.tagName===n.toLowerCase()},P=(e,t)=>{let n=t.trim();if(!n)return!1;let r=pe(n);return r!==null&&r.every(t=>N(e,t))},F=(e,t,n)=>{for(let r of e)de(r)&&(P(r,t)&&n.push(r),F(r.childrenList,t,n))},I=class{childrenList=[];appendChild(e){return this.childrenList.push(e),e}serialize(){return this.childrenList.map(e=>typeof e==`string`?O(e):e.serialize()).join(``)}querySelector(e){let t=this.querySelectorAll(e);return t.length>0?t[0]:null}querySelectorAll(e){let t=[];return F(this.childrenList,e,t),t}},L=class{tagName;attributes=new Map;inlineStyles=new Map;childrenList=[];shadowRoot=null;textContent=null;content;eventListeners=new Map;style={setProperty:(e,t)=>{let n=e.startsWith(`--`)?e:e.replace(/([A-Z])/g,`-$1`).toLowerCase();this.inlineStyles.set(n,t)},removeProperty:e=>this.inlineStyles.delete(e)};classList={add:(...e)=>{let t=this.attributes.get(`class`)||``,n=new Set([...t.split(` `).filter(Boolean),...e]);this.attributes.set(`class`,Array.from(n).join(` `))},remove:(...e)=>{let t=(this.attributes.get(`class`)||``).split(` `).filter(t=>!e.includes(t));this.attributes.set(`class`,t.join(` `))},toggle:e=>{this.classList.contains(e)?this.classList.remove(e):this.classList.add(e)},contains:e=>(this.attributes.get(`class`)||``).split(` `).includes(e)};_innerHTML=``;get innerHTML(){return this._innerHTML}set innerHTML(e){this._innerHTML=e,this.tagName===`template`&&this.content&&(this.content.childrenList=[e])}constructor(e=`div`){this.tagName=e.toLowerCase(),this.tagName===`template`&&(this.content=new I)}get hidden(){return this.hasAttribute(`hidden`)}set hidden(e){e?this.setAttribute(`hidden`,``):this.removeAttribute(`hidden`)}setAttribute(e,t){this.attributes.set(e,t)}getAttribute(e){return this.attributes.get(e)||null}removeAttribute(e){this.attributes.delete(e)}hasAttribute(e){return this.attributes.has(e)}appendChild(e){return this.childrenList.push(e),e}attachShadow(e){return this.shadowRoot=new R(this,e),this.shadowRoot}querySelector(e){let t=this.querySelectorAll(e);return t.length>0?t[0]:null}querySelectorAll(e){let t=[];return F(this.childrenList,e,t),t}addEventListener(e,t){let n=this.eventListeners.get(e)||new Set;n.add(t),this.eventListeners.set(e,n)}removeEventListener(e,t){let n=this.eventListeners.get(e);n&&(n.delete(t),n.size===0&&this.eventListeners.delete(e))}dispatchEvent(e){let t=this.eventListeners.get(e.type);if(!t||t.size===0)return!0;for(let n of t)typeof n==`function`?n.call(this,e):n.handleEvent(e);return!e.defaultPrevented}serialize(e){typeof this._preSerialize==`function`&&this._preSerialize();let t=e||this._ssrTag||this.tagName,n=Array.from(this.attributes.entries()).map(([e,t])=>` ${e}="${M(t)}"`).join(``),r=Array.from(this.inlineStyles.entries()).map(([e,t])=>`${e}:${t}`).join(`;`),i=r?` style="${M(r)}"`:``,a=``;return this.shadowRoot&&(a+=this.shadowRoot.serialize()),this.textContent===null?this._innerHTML?a+=this._innerHTML:a+=this.childrenList.map(e=>typeof e==`string`?O(e):(e instanceof I,e.serialize())).join(``):a+=O(this.textContent),[`area`,`base`,`br`,`col`,`embed`,`hr`,`img`,`input`,`link`,`meta`,`param`,`source`,`track`,`wbr`].includes(t)&&!a?`<${t}${n}${i} />`:`<${t}${n}${i}>${a}</${t}>`}},R=class{host;options;childrenList=[];adoptedStyleSheets=[];constructor(e,t){this.host=e,this.options=t}appendChild(e){return this.childrenList.push(e),e}querySelector(e){let t=this.querySelectorAll(e);return t.length>0?t[0]:null}querySelectorAll(e){let t=[];return F(this.childrenList,e,t),t}serialize(){return`<template shadowrootmode="${this.options.mode}"${this.options.delegatesFocus?` shadowrootdelegatesfocus`:``}>${this.adoptedStyleSheets.map(e=>`<style>${O(e)}</style>`).join(``)}${this.childrenList.map(e=>typeof e==`string`?O(e):(e instanceof I,e.serialize())).join(``)}</template>`}},z=()=>({current:null}),B=e=>e.reduce((e,t)=>Array.isArray(t)?e.concat(B(t)):e.concat(t),[]),V=e=>e==null?null:e instanceof W?e.build():typeof e==`string`?n?e:document.createTextNode(e):e,me=(e,t)=>{if(n){U(e,[t()]);return}let r=document.createComment(``),i=document.createComment(``);e.appendChild(r),e.appendChild(i);let a=null,o=()=>{a?.(),a=null;let e=r.nextSibling;for(;e&&e!==i;){let t=e.nextSibling;e.parentNode?.removeChild(e),e=t}};p(()=>{let e=t();o();let n=document.createDocumentFragment();a=m(t=>(U(n,[e]),t)),i.parentNode?.insertBefore(n,i)}),h(()=>a?.())},he=`__ranFor`,ge=e=>typeof e==`object`&&!!e&&e[he]===!0,_e=(e,t,n)=>{let[r,i]=f(t),a=null,o=m(t=>{let i=V(n(e,r));return a=typeof i==`string`?document.createTextNode(i):i,t});return{node:a,index:i,dispose:o}},H=(e,t)=>{let n=e.parentNode;if(!n)return;let r=e;for(let e of t)r.nextSibling!==e&&n.insertBefore(e,r.nextSibling),r=e},ve=(e,t)=>{if(n){(t.each()??[]).forEach((n,r)=>{let i=V(t.render(n,()=>r));i!=null&&e.appendChild(i)});return}let r=document.createComment(``);e.appendChild(r);let i=new Map;h(()=>{for(let e of i.values())e.dispose();i.clear()}),p(()=>{let e=t.each()??[],n=new Map,a=[];e.forEach((e,r)=>{let o=t.key(e,r);if(n.has(o))return;let s=i.get(o);s?(i.delete(o),s.index(r)):s=_e(e,r,t.render),n.set(o,s),s.node&&a.push(s.node)});for(let e of i.values())e.node?.parentNode?.removeChild(e.node),e.dispose();H(r,a),i=n})},ye=`__ranIndex`,be=e=>typeof e==`object`&&!!e&&e[ye]===!0,xe=(e,t,n)=>{let[r,i]=f(e),a=null,o=m(e=>{let i=V(n(r,t));return a=typeof i==`string`?document.createTextNode(i):i,e});return{node:a,setItem:i,dispose:o}},Se=(e,t)=>{if(n){(t.each()??[]).forEach((n,r)=>{let i=V(t.render(()=>n,r));i!=null&&e.appendChild(i)});return}let r=document.createComment(``);e.appendChild(r);let i=[];h(()=>{for(let e of i)e.dispose();i=[]}),p(()=>{let e=t.each()??[];for(let n=0;n<e.length;n++)n<i.length?i[n].setItem(e[n]):i.push(xe(e[n],n,t.render));for(let t=i.length-1;t>=e.length;t--){let{node:e}=i[t];e?.parentNode?.removeChild(e),i[t].dispose(),i.pop()}H(r,i.map(e=>e.node).filter(e=>e!=null))})},U=(e,t)=>{B(t).forEach(t=>{if(ge(t)){ve(e,t);return}if(be(t)){Se(e,t);return}if(typeof t==`function`){me(e,t);return}let n=V(t);n!=null&&e.appendChild(n)})},Ce=new Set(`svg.circle.clipPath.defs.desc.ellipse.feBlend.feColorMatrix.feComposite.feDropShadow.feFlood.feGaussianBlur.feMerge.feMergeNode.feOffset.filter.foreignObject.g.image.line.linearGradient.marker.mask.path.pattern.polygon.polyline.radialGradient.rect.stop.switch.symbol.text.textPath.tspan.use`.split(`.`)),W=class{el;constructor(e,t){let r=t??(Ce.has(e)?`http://www.w3.org/2000/svg`:void 0);this.el=n?new L(e):r?document.createElementNS(r,e):document.createElement(e)}id(e){return this.el.setAttribute(`id`,e),this}bind(e,t){typeof e==`function`?p(()=>t(e())):t(e)}class(e){return this.bind(e,e=>{n?this.el.attributes.set(`class`,e):this.el.className=e}),this}addClass(...e){return e.forEach(e=>this.el.classList.add(e)),this}removeClass(...e){return e.forEach(e=>this.el.classList.remove(e)),this}attr(e,t){return this.bind(t,t=>this.el.setAttribute(e,t)),this}attrs(e){return Object.entries(e).forEach(([e,t])=>{t!=null&&this.el.setAttribute(e,String(t))}),this}boolAttr(e,t,n=``){return this.bind(t,t=>{t?this.el.setAttribute(e,n):this.el.removeAttribute(e)}),this}part(e){return this.attr(`part`,e)}data(e,t){return this.attr(`data-${e}`,t)}style(e,t){return typeof e==`string`?this.bind(t??``,t=>this.el.style.setProperty(e,t)):Object.entries(e).forEach(([e,t])=>this.el.style.setProperty(e,t)),this}cssVar(e,t){let n=e.startsWith(`--`)?e:`--${e}`;return this.style(n,t)}aria(e,t){return this.attr(`aria-${e}`,t)}role(e){return this.attr(`role`,e)}tabIndex(e){return this.attr(`tabindex`,String(e))}label(e){return this.aria(`label`,e)}labelledBy(e){return this.aria(`labelledby`,e)}describedBy(e){return this.aria(`describedby`,e)}ariaHidden(e=!0){return this.aria(`hidden`,String(e))}on(e,t,n){return this.el.addEventListener(e,t,n),this}listen(e,t,n,r){return e.on(this.el,t,n,r),this}delegate(e,t,n,r,i){return e.delegate(this.el,t,n,r,i),this}children(...e){return U(this.el,e),this}replaceChildren(...e){if(n){let e=this.el;e.childrenList=[]}else this.el.replaceChildren();return this.children(...e)}text(e){return this.bind(e,e=>{this.el.textContent=e}),this}ref(e){return e.current=this.el,this}shadow(e={mode:`closed`}){let t=this.el.attachShadow(e);return new we(this.el,t,e)}build(){return this.el}serialize(){if(n)return this.el.serialize();let e=document.createElement(`div`);return e.appendChild(this.el.cloneNode(!0)),e.innerHTML}},we=class{root;hostEl;options;constructor(e,t,n){this.hostEl=e,this.root=t,this.options=n}children(...e){return U(this.root,e),this}adoptSheet(...e){return this.root.adoptedStyleSheets=[...this.root.adoptedStyleSheets,...e],this}css(e){if(n)return this.root.adoptedStyleSheets.push(e),this;if(typeof CSSStyleSheet<`u`)try{let t=new CSSStyleSheet;return t.replaceSync(e),this.root.adoptedStyleSheets=[...this.root.adoptedStyleSheets,t],this}catch{}let t=document.createElement(`style`);return t.textContent=e,this.root.appendChild(t),this}done(){return{host:this.hostEl,shadow:this.root}}serialize(){return n?this.root.serialize():this.root.innerHTML}},G=e=>new W(e),K=()=>G(`div`),Te=()=>G(`slot`),Ee=new Map;function De(e,t){n?(Ee.set(e,t),t.prototype._ssrTag=e):customElements.get(e)||customElements.define(e,t)}var Oe=typeof document<`u`?HTMLElement:L,ke=`data-ranui`,Ae=(e,t)=>ue(e,t,ke),q=new WeakMap,J=`@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}`,Y=new Map,je=e=>{let t=Y.get(e);if(t!==void 0)return t;let n=e?`${e}\n${J}`:J;return Y.set(e,n),n},Me=(e,t=``,n={mode:`closed`})=>{let r=e.shadowRoot||q.get(e)||e.attachShadow(n);return q.set(e,r),Ae(r,je(t)),r},Ne=(e,t)=>{if(e.current===null)throw Error(`ranui: ${t} is missing its .ref() on the builder`);return e.current},X=(e,t,n=``)=>e.getAttribute(t)??n,Z=(e,t,n,r={})=>{if(r.removeEmpty&&!n){e.removeAttribute(t);return}e.setAttribute(t,n??``)};function Pe(e){return e.key===`Enter`||e.key===` `||e.key===`Spacebar`}var Fe=`
struct Uniforms {
  resolution: vec2<f32>,
  radius: f32,
  dpr: f32,
};
@group(0) @binding(0) var<uniform> u: Uniforms;

fn sdRoundRect(p: vec2<f32>, halfSize: vec2<f32>, r: f32) -> f32 {
  let q = abs(p) - halfSize + r;
  return length(max(q, vec2<f32>(0.0, 0.0))) + min(max(q.x, q.y), 0.0) - r;
}

@vertex
fn vs_main(@builtin(vertex_index) idx: u32) -> @builtin(position) vec4<f32> {
  // Same one-triangle-covers-the-viewport trick as the WebGL vertex shader —
  // clip space is identical between the two APIs, so this half needs no change.
  var pos = array<vec2<f32>, 3>(
    vec2<f32>(-1.0, -1.0),
    vec2<f32>(3.0, -1.0),
    vec2<f32>(-1.0, 3.0),
  );
  return vec4<f32>(pos[idx], 0.0, 1.0);
}

@fragment
fn fs_main(@builtin(position) fragCoord: vec4<f32>) -> @location(0) vec4<f32> {
  let halfSize = u.resolution * 0.5;
  // Unlike WebGL's gl_FragCoord (origin bottom-left, Y increasing upward),
  // WGSL's fragment-stage @builtin(position) already has origin top-left with
  // Y increasing downward — the same convention as CSS/screen space. No flip
  // needed here; contrast with rim.ts's GLSL, which flips explicitly to match
  // this same convention so the light vector means the same thing in both shaders.
  let p = fragCoord.xy - halfSize;
  let r = min(u.radius, min(halfSize.x, halfSize.y));
  let d = sdRoundRect(p, halfSize, r);

  let rimWidth = 6.0 * u.dpr;
  if (abs(d) > rimWidth * 1.5) {
    discard;
  }

  let eps = max(u.dpr, 1.0);
  let n = normalize(vec2<f32>(
    sdRoundRect(p + vec2<f32>(eps, 0.0), halfSize, r) - sdRoundRect(p - vec2<f32>(eps, 0.0), halfSize, r),
    sdRoundRect(p + vec2<f32>(0.0, eps), halfSize, r) - sdRoundRect(p - vec2<f32>(0.0, eps), halfSize, r),
  ));

  let light = normalize(vec2<f32>(-0.6, -0.8));
  let lit = clamp(dot(n, light), 0.0, 1.0);

  let rim = 1.0 - smoothstep(0.0, rimWidth, abs(d));
  let glow = rim * mix(0.15, 1.0, lit);

  // Chromatic fringe: same trick as the WebGL backend — split the rim mask
  // along the surface normal by a couple of device pixels per channel.
  let off = 1.4 * u.dpr;
  let dR = sdRoundRect(p + n * off, halfSize, r);
  let dB = sdRoundRect(p - n * off, halfSize, r);
  let rimR = 1.0 - smoothstep(0.0, rimWidth, abs(dR));
  let rimB = 1.0 - smoothstep(0.0, rimWidth, abs(dB));

  let color = vec3<f32>(mix(glow, rimR, 0.5), glow, mix(glow, rimB, 0.5));
  let alpha = clamp(glow * 0.85 + max(rimR, rimB) * 0.15, 0.0, 1.0);
  return vec4<f32>(color * alpha, alpha);
}
`;async function Ie(e){let t=navigator.gpu;if(!t)return null;try{let n=await(await t.requestAdapter())?.requestDevice();if(!n)return null;let r=e.getContext(`webgpu`);if(!r)return null;let i=t.getPreferredCanvasFormat();r.configure({device:n,format:i,alphaMode:`premultiplied`});let a=n.createShaderModule({code:Fe}),o=n.createRenderPipeline({layout:`auto`,vertex:{module:a,entryPoint:`vs_main`},fragment:{module:a,entryPoint:`fs_main`,targets:[{format:i,blend:{color:{srcFactor:`one`,dstFactor:`one-minus-src-alpha`,operation:`add`},alpha:{srcFactor:`one`,dstFactor:`one-minus-src-alpha`,operation:`add`}}}]},primitive:{topology:`triangle-list`}}),s=n.createBuffer({size:16,usage:72}),c=n.createBindGroup({layout:o.getBindGroupLayout(0),entries:[{binding:0,resource:{buffer:s}}]}),l=new Float32Array(4);return{draw(t,i,a,u){if(t<=0||i<=0)return;e.width=t,e.height=i,l.set([t,i,a*u,u]),n.queue.writeBuffer(s,0,l);let d=n.createCommandEncoder(),f=d.beginRenderPass({colorAttachments:[{view:r.getCurrentTexture().createView(),clearValue:{r:0,g:0,b:0,a:0},loadOp:`clear`,storeOp:`store`}]});f.setPipeline(o),f.setBindGroup(0,c),f.draw(3),f.end(),n.queue.submit([d.finish()])},destroy(){n.destroy()}}}catch{return null}}var Le=`
attribute vec2 a_position;
void main() {
  gl_Position = vec4(a_position, 0.0, 1.0);
}
`,Re=`
precision mediump float;
uniform vec2 u_resolution;
uniform float u_radius;
uniform float u_dpr;

float sdRoundRect(vec2 p, vec2 halfSize, float r) {
  vec2 q = abs(p) - halfSize + r;
  return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;
}

void main() {
  vec2 halfSize = u_resolution * 0.5;
  // gl_FragCoord is bottom-up; flip Y so "light from the top-left" reads as
  // top-left on screen, matching the CSS specular gradient's own highlight.
  vec2 p = vec2(gl_FragCoord.x, u_resolution.y - gl_FragCoord.y) - halfSize;
  float r = min(u_radius, min(halfSize.x, halfSize.y));
  float d = sdRoundRect(p, halfSize, r);

  float rimWidth = 6.0 * u_dpr;
  // Outside this band the pixel contributes nothing — skip the rest of the
  // shader for it rather than computing a zero-alpha result.
  if (abs(d) > rimWidth * 1.5) discard;

  float eps = max(u_dpr, 1.0);
  vec2 n = normalize(vec2(
    sdRoundRect(p + vec2(eps, 0.0), halfSize, r) - sdRoundRect(p - vec2(eps, 0.0), halfSize, r),
    sdRoundRect(p + vec2(0.0, eps), halfSize, r) - sdRoundRect(p - vec2(0.0, eps), halfSize, r)
  ));

  vec2 light = normalize(vec2(-0.6, -0.8));
  float lit = clamp(dot(n, light), 0.0, 1.0);

  float rim = 1.0 - smoothstep(0.0, rimWidth, abs(d));
  float glow = rim * mix(0.15, 1.0, lit);

  // Chromatic fringe: split the same rim mask along the surface normal by a
  // couple of device pixels per channel — a cheap stand-in for real light
  // dispersion, since there is no refracted backdrop image here to disperse.
  float off = 1.4 * u_dpr;
  float dR = sdRoundRect(p + n * off, halfSize, r);
  float dB = sdRoundRect(p - n * off, halfSize, r);
  float rimR = 1.0 - smoothstep(0.0, rimWidth, abs(dR));
  float rimB = 1.0 - smoothstep(0.0, rimWidth, abs(dB));

  vec3 color = vec3(mix(glow, rimR, 0.5), glow, mix(glow, rimB, 0.5));
  float alpha = clamp(glow * 0.85 + max(rimR, rimB) * 0.15, 0.0, 1.0);
  gl_FragColor = vec4(color * alpha, alpha);
}
`;function Q(e,t,n){let r=e.createShader(t);return r?(e.shaderSource(r,n),e.compileShader(r),e.getShaderParameter(r,e.COMPILE_STATUS)?r:(e.deleteShader(r),null)):null}function ze(e){let t=e.getContext(`webgl`,{alpha:!0,premultipliedAlpha:!0,antialias:!0});if(!t)return null;let n=Q(t,t.VERTEX_SHADER,Le),r=Q(t,t.FRAGMENT_SHADER,Re),i=t.createProgram();if(!n||!r||!i||(t.attachShader(i,n),t.attachShader(i,r),t.linkProgram(i),!t.getProgramParameter(i,t.LINK_STATUS)))return null;let a=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,a),t.bufferData(t.ARRAY_BUFFER,new Float32Array([-1,-1,3,-1,-1,3]),t.STATIC_DRAW);let o=t.getAttribLocation(i,`a_position`),s=t.getUniformLocation(i,`u_resolution`),c=t.getUniformLocation(i,`u_radius`),l=t.getUniformLocation(i,`u_dpr`);return t.useProgram(i),t.enableVertexAttribArray(o),t.vertexAttribPointer(o,2,t.FLOAT,!1,0,0),t.enable(t.BLEND),t.blendFunc(t.ONE,t.ONE_MINUS_SRC_ALPHA),{draw(n,r,i,a){n<=0||r<=0||(e.width=n,e.height=r,t.viewport(0,0,n,r),t.uniform2f(s,n,r),t.uniform1f(c,i*a),t.uniform1f(l,a),t.clearColor(0,0,0,0),t.clear(t.COLOR_BUFFER_BIT),t.drawArrays(t.TRIANGLES,0,3))},destroy(){t.getExtension(`WEBGL_lose_context`)?.loseContext()}}}var Be=2;function Ve(e){let t=20,n=!1,r=()=>{let t=document.createElement(`canvas`);return t.className=`ran-glass-rim`,t.setAttribute(`part`,`rim`),t.setAttribute(`aria-hidden`,`true`),e.appendChild(t),t},i=r(),a=ze(i),o=null,s=null,c=()=>{let t=e.getBoundingClientRect(),n=Math.min(typeof window<`u`&&window.devicePixelRatio||1,Be);return{width:Math.max(1,Math.round(t.width*n)),height:Math.max(1,Math.round(t.height*n)),dpr:n}},l=()=>{let{width:e,height:n,dpr:r}=c();(o??a)?.draw(e,n,t,r)},u=typeof ResizeObserver<`u`?new ResizeObserver(l):null;return u?.observe(e),l(),typeof navigator<`u`&&navigator.gpu&&(s=r(),s.style.display=`none`,Ie(s).then(e=>{if(n){e?.destroy();return}if(!e){s?.remove(),s=null;return}o=e,a?.destroy(),a=null,i.remove(),s.style.display=``,l()})),{setRadius(e){t=e,l()},destroy(){n=!0,u?.disconnect(),o?.destroy(),a?.destroy(),i.remove(),s?.remove()}}}var He=0,$=class e extends Oe{_shadowDom;_glass;_specular;_turb=null;_disp=null;_uid=`ran-glass-${He+=1}`;_events=new r;_tabIndexOwnedByComponent=!1;_rimRenderer=null;static get observedAttributes(){return[`blur`,`saturate`,`displace`,`frequency`,`radius`,`tint`,`interactive`,`rim`]}constructor(){super(),this._shadowDom=Me(this,t);let e=z();this._glass=K().class(`ran-glass`).attr(`part`,`glass`).children(K().class(`ran-glass-specular`).ref(e).attr(`part`,`specular`),Te()).build(),this._shadowDom.appendChild(this._glass),this._specular=Ne(e,`specular layer`)}get saturate(){return X(this,`saturate`)}set saturate(e){Z(this,`saturate`,e)}get displace(){return X(this,`displace`)}set displace(e){Z(this,`displace`,e)}get frequency(){return X(this,`frequency`)}set frequency(e){Z(this,`frequency`,e)}get radius(){return X(this,`radius`)}set radius(e){Z(this,`radius`,e)}get tint(){return X(this,`tint`)}set tint(e){Z(this,`tint`,e)}get sheen(){return this.hasAttribute(`sheen`)}set sheen(e){this.toggleAttribute(`sheen`,e)}get interactive(){return this.hasAttribute(`interactive`)}set interactive(e){this.toggleAttribute(`interactive`,e)}get rim(){return this.hasAttribute(`rim`)}set rim(e){this.toggleAttribute(`rim`,e)}_ensureFilter(){if(!(this._disp||typeof document>`u`)){if(!this._shadowDom.querySelector(`.ran-glass-defs`)){let e=document.createElement(`div`);e.className=`ran-glass-defs`,e.setAttribute(`aria-hidden`,`true`),e.innerHTML=`<svg><filter id="${this._uid}" x="-20%" y="-20%" width="140%" height="140%"><feTurbulence type="fractalNoise" baseFrequency="0.004 0.006" numOctaves="2" seed="7" result="n"/><feGaussianBlur in="n" stdDeviation="2" result="sn"/><feDisplacementMap in="SourceGraphic" in2="sn" scale="8" xChannelSelector="R" yChannelSelector="G"/></filter></svg>`,this._shadowDom.insertBefore(e,this._shadowDom.firstChild),this.style.setProperty(`--ran-glass-refraction`,`url(#${this._uid})`)}this._turb=this._shadowDom.querySelector(`feTurbulence`),this._disp=this._shadowDom.querySelector(`feDisplacementMap`)}}_ensureRim(){this._rimRenderer||typeof document>`u`||(this._rimRenderer=Ve(this._specular),this._rimRenderer.setRadius(Number(this.radius)||20))}_teardownRim(){this._rimRenderer?.destroy(),this._rimRenderer=null}_apply(e){let t=this.getAttribute(e);switch(e){case`blur`:this._setVar(`--ran-glass-blur`,t,`px`);break;case`saturate`:this._setVar(`--ran-glass-saturate`,t,`%`);break;case`radius`:this._setVar(`--ran-glass-radius`,t,`px`);break;case`tint`:this._setVar(`--ran-glass-tint`,t);break;case`displace`:this._ensureFilter(),this._disp&&t!=null&&this._disp.setAttribute(`scale`,t);break;case`frequency`:this._ensureFilter(),this._turb&&t!=null&&this._turb.setAttribute(`baseFrequency`,t)}}_setVar(e,t,n=``){if(t==null||t===``){this.style.removeProperty(e);return}let r=n&&/^-?\d*\.?\d+$/.test(t.trim());this.style.setProperty(e,r?`${t.trim()}${n}`:t)}_onKeydown=e=>{this.interactive&&Pe(e)&&(e.preventDefault(),this.click())};_syncInteractive(){this.interactive?(this.setAttribute(`role`,`button`),this.hasAttribute(`tabindex`)||(this.tabIndex=0,this._tabIndexOwnedByComponent=!0)):(this.removeAttribute(`role`),this._tabIndexOwnedByComponent&&=(this.removeAttribute(`tabindex`),!1))}connectedCallback(){this._ensureFilter(),e.observedAttributes.forEach(e=>this._apply(e)),this._syncInteractive(),this.rim&&this._ensureRim(),this._events.on(this,`keydown`,this._onKeydown)}disconnectedCallback(){this._events.abort()}attributeChangedCallback(e,t,n){if(t!==n){if(e===`interactive`){this._syncInteractive();return}if(e===`rim`){this.rim?this._ensureRim():this._teardownRim();return}this._apply(e),e===`radius`&&this.rim&&this._rimRenderer?.setRadius(Number(this.radius)||20)}}};return De(`r-glass`,$),e.Glass=$,e.default=$,e})({});