ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
1 lines • 33.4 kB
JavaScript
var ranui_tab=(function(e){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var t=typeof document>`u`,n=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}},r=0,i=1,a=2,o=null,s=null,c=0,l=new Set,u=!1;function d(e,t){let n=t?.equals??Object.is,r={value:e,observers:new Set};return[()=>(te(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,a);c===0&&ne()}}]}function f(e){let t=h(e,!0);return ee(t),v(t),()=>b(t)}function p(e){let t={owned:[],cleanups:[],owner:s},n=s,r=o;s=t,o=null;try{return e(()=>re(t))}finally{s=n,o=r}}function m(e){s&&s.cleanups.push(e)}function h(e,t,n){return{fn:e,sources:new Set,isEffect:t,running:!1,disposed:!1,state:a,observers:new Set,value:void 0,equals:n??Object.is,owned:[],cleanups:[],owner:s}}function ee(e){s&&s.owned.push(e)}function te(e){o&&(o.sources.add(e),e.observers.add(o))}function g(e,t){if(e.disposed||e.state>=t)return;let n=e.state===r;if(e.state=t,e.isEffect)l.add(e);else if(n)for(let t of e.observers)g(t,i)}function ne(){if(!(c>0||u)){u=!0;try{for(;l.size>0;){let e=[...l];l.clear();for(let t of e)t.disposed||_(t)}}finally{u=!1}}}function _(e){if(!(e.disposed||e.state===r)){if(e.state===i)for(let t of e.sources)`fn`in t&&_(t);e.state===a&&v(e),e.state=r}}function v(e){if(e.running)throw Error(`ranui reactivity: cyclic dependency detected (a computation triggered itself).`);y(e);let t=o,n=s;o=e,s=e,e.running=!0,e.state=r;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,a)}}finally{e.running=!1,o=t,s=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 re(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 x=(e=8)=>Math.random().toString(36).substring(2,e+2);Object.freeze({});var S=e=>typeof e==`function`,C=12e4,ae=`__ranuts_bridge__`,oe=`default`,w=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)}},se=class{targetWindow;targetOrigin;messageHandlers;pendingRequests;channel;senderId;available;constructor(e,t=`*`,n=oe){this.targetOrigin=t,this.channel=n,this.senderId=x(12),this.messageHandlers=new Map,this.pendingRequests=new Map,this.available=typeof window<`u`,this.available?(this.targetWindow=e??window,w.add(this)):this.targetWindow=void 0}post(e,t){let n={...t,__bridge:ae,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(S(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=x(10);return new Promise((r,i)=>{let a=setTimeout(()=>{this.pendingRequests.has(n)&&(this.pendingRequests.delete(n),i(Error(`Request timeout`)))},C),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=()=>{w.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 se(n,t,r);if(e||=x(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 ce=/["'&<>]/;function D(e){let t=``+e,n=ce.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=`"`;break;case 38:r=`&`;break;case 39:r=`'`;break;case 60:r=`<`;break;case 62:r=`>`;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 O=new Map,le=new Map,ue=`data-adopted-style`,de=`data-adopted-sheet`,k=(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}},fe=(e,t,n=ue)=>{if(typeof document<`u`&&t&&!k(e,t,O)&&!e.querySelector(`style[${n}]`)){let r=document.createElement(`style`);r.setAttribute(n,``),r.textContent=t,e.appendChild(r)}},pe=(e,t,n=de)=>{if(typeof document<`u`&&t&&!k(e,t,le)&&!Array.from(e.querySelectorAll(`style[${n}]`)).some(e=>e.textContent===t)){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 A=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})(A),function(e){let t=[];for(let[n,r]of e)t.push(n);return t}(A);function j(e){return D(e)}var me=e=>typeof e!=`string`&&`tagName`in e&&`childrenList`in e,he=`.#[`;function M(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&&!he.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=M(n);return r!==null&&r.every(t=>N(e,t))},F=(e,t,n)=>{for(let r of e)me(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`?D(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}="${j(t)}"`).join(``),r=Array.from(this.inlineStyles.entries()).map(([e,t])=>`${e}:${t}`).join(`;`),i=r?` style="${j(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`?D(e):(e instanceof I,e.serialize())).join(``):a+=D(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>${D(e)}</style>`).join(``)}${this.childrenList.map(e=>typeof e==`string`?D(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`?t?e:document.createTextNode(e):e,ge=(e,n)=>{if(t){U(e,[n()]);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}};f(()=>{let e=n();o();let t=document.createDocumentFragment();a=p(n=>(U(t,[e]),n)),i.parentNode?.insertBefore(t,i)}),m(()=>a?.())},_e=`__ranFor`,ve=e=>typeof e==`object`&&!!e&&e[_e]===!0,ye=(e,t,n)=>{let[r,i]=d(t),a=null,o=p(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},be=(e,n)=>{if(t){(n.each()??[]).forEach((t,r)=>{let i=V(n.render(t,()=>r));i!=null&&e.appendChild(i)});return}let r=document.createComment(``);e.appendChild(r);let i=new Map;m(()=>{for(let e of i.values())e.dispose();i.clear()}),f(()=>{let e=n.each()??[],t=new Map,a=[];e.forEach((e,r)=>{let o=n.key(e,r);if(t.has(o))return;let s=i.get(o);s?(i.delete(o),s.index(r)):s=ye(e,r,n.render),t.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=t})},xe=`__ranIndex`,Se=e=>typeof e==`object`&&!!e&&e[xe]===!0,Ce=(e,t,n)=>{let[r,i]=d(e),a=null,o=p(e=>{let i=V(n(r,t));return a=typeof i==`string`?document.createTextNode(i):i,e});return{node:a,setItem:i,dispose:o}},we=(e,n)=>{if(t){(n.each()??[]).forEach((t,r)=>{let i=V(n.render(()=>t,r));i!=null&&e.appendChild(i)});return}let r=document.createComment(``);e.appendChild(r);let i=[];m(()=>{for(let e of i)e.dispose();i=[]}),f(()=>{let e=n.each()??[];for(let t=0;t<e.length;t++)t<i.length?i[t].setItem(e[t]):i.push(Ce(e[t],t,n.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(ve(t)){be(e,t);return}if(Se(t)){we(e,t);return}if(typeof t==`function`){ge(e,t);return}let n=V(t);n!=null&&e.appendChild(n)})},Te=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,n){let r=n??(Te.has(e)?`http://www.w3.org/2000/svg`:void 0);this.el=t?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`?f(()=>t(e())):t(e)}class(e){return this.bind(e,e=>{t?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(t){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 Ee(this.el,t,e)}build(){return this.el}serialize(){if(t)return this.el.serialize();let e=document.createElement(`div`);return e.appendChild(this.el.cloneNode(!0)),e.innerHTML}},Ee=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(t)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 n=document.createElement(`style`);return n.textContent=e,this.root.appendChild(n),this}done(){return{host:this.hostEl,shadow:this.root}}serialize(){return t?this.root.serialize():this.root.innerHTML}},G=e=>new W(e),K=()=>G(`div`),De=()=>G(`slot`),Oe=[!1,`false`,null,void 0],q=e=>{let t=e.hasAttribute(`disabled`),n=e.getAttribute(`disabled`);return!!(t&&!Oe.includes(n))},ke=new Map;function Ae(e,n){t?(ke.set(e,n),n.prototype._ssrTag=e):customElements.get(e)||customElements.define(e,n)}var je=typeof document<`u`?HTMLElement:L,Me=`data-ranui`,Ne=`data-ranui-sheet`,Pe=(e,t)=>fe(e,t,Me),Fe=(e,t)=>pe(e,t,Ne),J=new WeakMap,Y=`@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}`,X=new Map,Ie=e=>{let t=X.get(e);if(t!==void 0)return t;let n=e?`${e}\n${Y}`:Y;return X.set(e,n),n},Le=(e,t=``,n={mode:`closed`})=>{let r=e.shadowRoot||J.get(e)||e.attachShadow(n);return J.set(e,r),Pe(r,Ie(t)),r},Z=(e,t)=>{if(e.current===null)throw Error(`ranui: ${t} is missing its .ref() on the builder`);return e.current},Q=(e,t,n=``)=>e.getAttribute(t)??n,Re=(e,t,n,r={})=>{if(r.removeEmpty&&!n){e.removeAttribute(t);return}e.setAttribute(t,n??``)},ze=(e,t,n,r,i)=>{if(n!==`sheet`||r===i)return;let a=e.getAttribute(`sheet`)||``;a&&Fe(t,a)},Be=`.ran-tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:var(--ran-tab-panel-padding,var(--ran-space-3,12px));text-align:start;flex-shrink:0;overflow:auto}.ran-tab-header{scroll-behavior:smooth;position:relative;overflow:hidden}.ran-tab-header-nav{flex-flow:row;justify-content:flex-start;align-items:center;display:flex}.ran-tab-header-nav::-webkit-scrollbar{display:none}.ran-tab-header-nav-item{flex-shrink:0}.ran-tab-header-nav .active{color:var(--ran-tab-active-color,var(--ran-color-primary,#006bff))}.ran-tab-header-line{width:0;margin-top:var(--ran-tab-line-margin-top,-2px);height:var(--ran-tab-line-height,2px);border-radius:var(--ran-tab-line-border-radius,2px);background:var(--ran-tab-line-color,var(--ran-color-primary,#006bff));transition:var(--ran-tab-line-transition,left .2s, width .2s, transform .2s);position:absolute}.ran-tab-content{box-sizing:border-box;margin-top:var(--ran-tab-content-margin-top,var(--ran-space-2,8px));border:var(--ran-tab-content-border,1px solid var(--ran-color-border,#eaeaea));border-radius:var(--ran-tab-content-border-radius,var(--ran-radius-md,12px));background:var(--ran-tab-content-background,var(--ran-color-bg-elevated,#fff));overflow:hidden}.ran-tab-content-wrap{width:100%;height:100%;transition:var(--ran-tab-content-transition,transform .2s);align-items:flex-start;display:flex}:host([type=line]) .ran-tab-header-nav-item{border:1px solid #0000}:host([type=line]) .ran-tab-header-nav .active{color:var(--ran-tab-line-color,var(--ran-color-primary,#006bff));border:1px solid #0000;border-color:var(--ran-tab-border-color,var(--ran-color-border,#0003)) var(--ran-tab-border-color,var(--ran-color-border,#0003)) transparent;border-radius:var(--ran-tab-border-radius,var(--ran-radius-sm,.25em)) var(--ran-tab-border-radius,var(--ran-radius-sm,.25em)) 0 0}:host([type=line]) .ran-tab-header-line{visibility:hidden;transition:none}:host([type=line]) .ran-tab-header-line:after,:host([type=line]) .ran-tab-header-line:before{content:"";visibility:visible;background:var(--ran-tab-border-color,var(--ran-color-border,#0003));width:9999px;height:1px;position:absolute;bottom:0}:host([type=line]) .ran-tab-header-line:after{left:100%}:host([type=line]) .ran-tab-header-line:before{right:100%}:host([align=center]) .ran-tab-header-nav{justify-content:center}:host([align=center]) .ran-tab-header-line{left:50%}:host([align=end]) .ran-tab-header-nav{justify-content:flex-end}`,Ve=0,$=class extends je{static get observedAttributes(){return[`active`,`type`,`align`,`effect`,`sheet`]}_events=new n;_container;_header;_nav;_line;_content;_wrap;_slot;_shadowDom;_tabsId;tabHeaderKeyMapIndex;_navResizeObserver;constructor(){super(),this._tabsId=++Ve,this._shadowDom=Le(this,Be),this.tabHeaderKeyMapIndex={};let e=z(),t=z(),n=z(),r=z(),i=z(),a=z(),o=K().class(`ran-tab`).part(`tabs`).children(K().class(`ran-tab-header`).ref(e).part(`header`).children(K().class(`ran-tab-header-nav`).ref(t).part(`nav`),K().class(`ran-tab-header-line`).ref(n).part(`indicator`)),K().class(`ran-tab-content`).ref(r).part(`content`).children(K().class(`ran-tab-content-wrap`).ref(i).part(`content-wrap`).children(De().ref(a)))).build();this._shadowDom.appendChild(o),this._container=o,this._header=Z(e,`header`),this._nav=Z(t,`header nav`),this._line=Z(n,`header line`),this._content=Z(r,`content`),this._wrap=Z(i,`content wrap`),this._slot=Z(a,`slot`),this._nav.setAttribute(`role`,`tablist`)}get align(){return Q(this,`align`,`start`)}set align(e){this.setAttribute(`align`,e)}get type(){return Q(this,`type`,`flat`)}set type(e){this.setAttribute(`type`,e)}get active(){return this.getAttribute(`active`)}set active(e){e?(this.setAttribute(`active`,e),this.setTabLine(e),this.setTabContent(e),this.syncTabsAria()):this.removeAttribute(`active`)}get effect(){return this.getAttribute(`effect`)}set effect(e){!e||e===`false`?this.removeAttribute(`effect`):this.setAttribute(`effect`,e)}get sheet(){return Q(this,`sheet`)}set sheet(e){Re(this,`sheet`,e)}handlerExternalCss=()=>{ze(this,this._shadowDom,`sheet`,null,this.sheet)};initTabHeaderKeyMapIndex=(e,t)=>{if(this.tabHeaderKeyMapIndex[e])throw Error(`tab 组件的 key 值存在重复，或者某个 tab 组件缺少 key 属性`);this.tabHeaderKeyMapIndex[e]=t};createTabHeader(e,t){let n=e.getAttribute(`label`)||``,r=e.getAttribute(`icon`)||``,i=e.getAttribute(`iconSize`)||``,a=e.getAttribute(`r-key`)||`${t}`,o=e.getAttribute(`type`)||`text`;this.initTabHeaderKeyMapIndex(a,t);let s=G(`r-button`).class(`tab-header-nav-item`).attr(`type`,o).attr(`r-key`,a).text(n);return r&&s.attr(`icon`,r),i&&s.attr(`iconSize`,i),q(e)&&s.attr(`disabled`,``),this.effect&&(e.setAttribute(`effect`,this.effect),this._line.style.setProperty(`display`,`none`)),e.setAttribute(`r-key`,a),s.build()}initTabLineAlignCenter=()=>{let{length:e}=this._nav.children,t=0;for(let n=0;n<e;n++){let{width:e=0}=this._nav.children[n].getBoundingClientRect();t+=e}this._line.style.setProperty(`left`,`calc(50% - ${t/2}px)`)};initTabLineAlignEnd=()=>{let{length:e}=this._nav.children,t=0;for(let n=0;n<e;n++){let{width:e=0}=this._nav.children[n].getBoundingClientRect();t+=e}this._line.style.setProperty(`left`,`calc(100% - ${t}px)`)};setTabLine=e=>{if(e){let t=this.tabHeaderKeyMapIndex[e],{width:n=0}=this._nav.children[t].getBoundingClientRect();this._line.style.setProperty(`width`,`${n}px`);let r=0;for(let e=0;e<t;e++){let{width:t=0}=this._nav.children[e].getBoundingClientRect();r+=t}this._line.style.setProperty(`transform`,`translateX(${r}px)`)}};_onNavResize=()=>{this.active&&this.setTabLine(this.active)};_attachNavResizeObserver=()=>{this._navResizeObserver||typeof ResizeObserver>`u`||(this._navResizeObserver=new ResizeObserver(this._onNavResize),this._navResizeObserver.observe(this._nav))};setTabContent=e=>{if(e){let t=this.tabHeaderKeyMapIndex[e];this._wrap.style.setProperty(`transform`,`translateX(${t*-100}%)`)}};clickTabHead=e=>{let t=e.currentTarget??e.target,n=t.getAttribute(`r-key`);!q(t)&&n&&this.activateKey(n)};activateKey=e=>{this.setAttribute(`active`,e),this.setTabLine(e),this.setTabContent(e),this._nav.querySelectorAll(`.active`).forEach(e=>e.classList.remove(`active`));let t=this.tabHeaderKeyMapIndex[e];this._nav.children[t]?.classList.add(`active`),this.syncTabsAria()};tabFocusable=e=>e._btn??e;tabIdFor=e=>`ran-tab-${this._tabsId}-${e}`;panelIdFor=e=>`ran-tabpanel-${this._tabsId}-${e}`;syncTabsAria=()=>{let e=this.active,t=this._slot?.assignedElements?.()??[];[...this._nav.children].forEach((n,r)=>{let i=n.getAttribute(`r-key`)??`${r}`,a=i===e,o=q(n),s=this.tabFocusable(n);s.setAttribute(`role`,`tab`),s.id=this.tabIdFor(i),s.setAttribute(`aria-controls`,this.panelIdFor(i)),s.setAttribute(`aria-selected`,a?`true`:`false`),s.tabIndex=a&&!o?0:-1;let c=t[r];c&&(c.setAttribute(`role`,`tabpanel`),c.id=this.panelIdFor(i),c.setAttribute(`aria-labelledby`,this.tabIdFor(i)),c.setAttribute(`tabindex`,a?`0`:`-1`),a?c.removeAttribute(`aria-hidden`):c.setAttribute(`aria-hidden`,`true`))})};onNavKeydown=e=>{if(![`ArrowRight`,`ArrowLeft`,`ArrowDown`,`ArrowUp`,`Home`,`End`].includes(e.key))return;let t=[...this._nav.children].filter(e=>!q(e));if(!t.length)return;let n=e.target?.closest?.(`.tab-header-nav-item`)??e.target,r=t.findIndex(e=>e===n);r<0&&(r=t.findIndex(e=>e.getAttribute(`r-key`)===this.active)),r<0&&(r=0);let i=r;e.key===`ArrowRight`||e.key===`ArrowDown`?i=(r+1)%t.length:e.key===`ArrowLeft`||e.key===`ArrowUp`?i=(r-1+t.length)%t.length:e.key===`Home`?i=0:e.key===`End`&&(i=t.length-1),e.preventDefault();let a=t[i].getAttribute(`r-key`);a&&(this.activateKey(a),this.tabFocusable(t[i]).focus())};updateAttribute=(e,t,n=``)=>{let r=this.tabHeaderKeyMapIndex[e];e&&n&&this._nav.children[r]?this._nav.children[r]?.setAttribute(t,n):this._nav.children[r]?.removeAttribute(t)};initActive=()=>{let e=[...this._nav.children],t=e.filter(e=>!q(e)),n;if(this.active!=null&&(n=t.find(e=>e.getAttribute(`r-key`)===this.active),n?.setAttribute(`r-key`,this.active)),n||=t.shift(),!n)return;let r=e.findIndex(e=>e===n),i=n?.getAttribute(`r-key`)||`${r}`;i!=null&&(this.setAttribute(`active`,`${i}`),n.classList.add(`active`),this.setTabContent(i),setTimeout(()=>{this.setTabLine(i)},200))};listenSlotChange=()=>{this._slot.assignedElements().forEach((e,t)=>{let n=this.createTabHeader(e,t);this._nav.appendChild(n),n.addEventListener(`click`,this.clickTabHead)}),this.initActive(),this.syncTabsAria(),this.align&&(this.align===`center`&&this.initTabLineAlignCenter(),this.align===`end`&&this.initTabLineAlignEnd())};connectedCallback(){this.handlerExternalCss(),this._events.on(this._slot,`slotchange`,this.listenSlotChange),this._events.on(this._nav,`keydown`,this.onNavKeydown),this._attachNavResizeObserver()}disconnectedCallback(){this._events.abort(),this._navResizeObserver?.disconnect(),this._navResizeObserver=void 0}attributeChangedCallback(e,t,n){t!==n&&(this.dispatchEvent(new CustomEvent(`change`,{detail:{active:this.active}})),e===`align`&&(n===`center`&&this.initTabLineAlignCenter(),n===`end`&&this.initTabLineAlignEnd()),e===`effect`&&[...this._nav.children].forEach(e=>{!this.effect||this.effect===`false`?e.removeAttribute(`effect`):e.setAttribute(`effect`,n)}),e===`active`&&this.setAttribute(e,n),e===`sheet`&&this.handlerExternalCss())}};return Ae(`r-tabs`,$),e.Tabs=$,e.default=$,e})({});