@todovue/tv-demo 1.0.9 → 1.1.0

package/README.md

@@ -5,8 +5,15 @@
 A flexible, framework-agnostic Vue 3 component catalog for demos, documentation, and playgrounds. Compatible with both SPA and SSR (Nuxt 3), with automatic style injection and no DOM assumptions.
 
 [![npm](https://img.shields.io/npm/v/@todovue/tv-demo.svg)](https://www.npmjs.com/package/@todovue/tv-demo)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/8c4e2401-fefe-4f40-ae83-40681ecc36a5/deploy-status)](https://app.netlify.com/projects/tv-demo/deploys)
 [![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-demo.svg)](https://www.npmjs.com/package/@todovue/tv-demo)
+[![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-demo.svg)](https://www.npmjs.com/package/@todovue/tv-demo) 
 ![License](https://img.shields.io/github/license/TODOvue/tv-demo)
+![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-demo)
+![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-demo)
+![Node Version](https://img.shields.io/node/v/@todovue/tv-demo)
+![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-demo)
+![Stars](https://img.shields.io/github/stars/TODOvue/tv-demo?style=social)
 
 > Demo: https://tv-demo.netlify.app/
 
@@ -60,7 +67,7 @@ Import the CSS generated by the library in your main entry file:
 import { createApp } from 'vue'
 import App from './App.vue'
 
-import '@todovue/tv-demo/dist/tv-demo.css'
+import '@todovue/tv-demo/style.css'
 import { TvDemo } from '@todovue/tv-demo'
 
 const app = createApp(App)
@@ -73,7 +80,7 @@ Add the library's CSS to your Nuxt configuration:
 ```ts
 // nuxt.config.ts
 export default defineNuxtConfig({
-  css: ['@todovue/tv-demo/dist/tv-demo.css'],
+  css: ['@todovue/tv-demo/style.css'],
 })
 ```
 
@@ -138,7 +145,7 @@ import { TvDemo } from '@todovue/tv-demo'
 | variants       | Array   |               | Variations of the component                                         | `true`   |
 | hideBackground | Boolean | `false`       | Hide the background of the component demo                           | `false`  |
 | demoStyle      | Object  |               | Style of the component                                              | `false`  |
-| nameComponent  | String  | `null`        | Name of the component to display in the demo                        | `false`  |
+| componentName  | String  | `null`        | Name of the component to display in the demo                        | `false`  |
 | npmInstall     | String  | `null`        | Command to install the component (without `npm install`)            | `false`  |
 | sourceLink     | String  | `null`        | Link to the source code of the component                            | `false`  |
 | urlClone       | String  | `null`        | Link to clone the repository of the component (without `git clone`) | `false`  |

package/dist/ToastContainer-Cx0oFM8l.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),l=(o,n)=>{const t=o.__vccOpts||o;for(const[a,r]of n)t[a]=r;return t},d={class:"toast-content"},m={class:"toast-message"},p={__name:"ToastNotification",props:{id:{type:String,required:!0},message:{type:String,required:!0},type:{type:String,default:"success"},duration:{type:Number,default:3e3}},emits:["remove"],setup(o,{emit:n}){const t=o,a=n,r=e.ref(!1),c=e.ref(!1);e.onMounted(()=>{setTimeout(()=>{r.value=!0},10),setTimeout(()=>{s()},t.duration)});const s=()=>{c.value=!0,setTimeout(()=>{a("remove",t.id)},300)},u=()=>{switch(t.type){case"success":return"✓";case"error":return"✕";case"warning":return"⚠";case"info":return"ℹ";default:return"✓"}},i=()=>{switch(t.type){case"success":return"#22c55e";case"error":return"#ef4444";case"warning":return"#f59e0b";case"info":return"#3b82f6";default:return"#22c55e"}};return(y,k)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["toast-notification",[o.type,{visible:r.value,leaving:c.value}]])},[e.createElementVNode("div",{class:"toast-icon",style:e.normalizeStyle({backgroundColor:`${i()}20`,color:i()})},e.toDisplayString(u()),5),e.createElementVNode("div",d,[e.createElementVNode("p",m,e.toDisplayString(o.message),1)]),e.createElementVNode("button",{class:"toast-close",onClick:s,"aria-label":"Cerrar notificación"}," ✕ ")],2))}},f=l(p,[["__scopeId","data-v-84ed156b"]]),v={class:"toast-container"},g={__name:"ToastContainer",props:{toasts:{type:Array,required:!0}},emits:["removeToast"],setup(o,{emit:n}){const t=n,a=r=>{t("removeToast",r)};return(r,c)=>(e.openBlock(),e.createElementBlock("div",v,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.toasts,s=>(e.openBlock(),e.createBlock(f,{key:s.id,id:s.id,message:s.message,type:s.type,duration:s.duration,onRemove:a},null,8,["id","message","type","duration"]))),128))]))}},_=l(g,[["__scopeId","data-v-25add11c"]]);exports.default=_;

package/dist/ToastContainer-NkcFPXPf.js

@@ -0,0 +1,97 @@
+import { ref as d, onMounted as _, createElementBlock as u, openBlock as c, normalizeClass as v, createElementVNode as a, normalizeStyle as g, toDisplayString as m, Fragment as y, renderList as T, createBlock as b } from "vue";
+const p = (t, r) => {
+  const e = t.__vccOpts || t;
+  for (const [n, o] of r)
+    e[n] = o;
+  return e;
+}, h = { class: "toast-content" }, k = { class: "toast-message" }, C = {
+  __name: "ToastNotification",
+  props: {
+    id: { type: String, required: !0 },
+    message: { type: String, required: !0 },
+    type: { type: String, default: "success" },
+    duration: { type: Number, default: 3e3 }
+  },
+  emits: ["remove"],
+  setup(t, { emit: r }) {
+    const e = t, n = r, o = d(!1), i = d(!1);
+    _(() => {
+      setTimeout(() => {
+        o.value = !0;
+      }, 10), setTimeout(() => {
+        s();
+      }, e.duration);
+    });
+    const s = () => {
+      i.value = !0, setTimeout(() => {
+        n("remove", e.id);
+      }, 300);
+    }, f = () => {
+      switch (e.type) {
+        case "success":
+          return "✓";
+        case "error":
+          return "✕";
+        case "warning":
+          return "⚠";
+        case "info":
+          return "ℹ";
+        default:
+          return "✓";
+      }
+    }, l = () => {
+      switch (e.type) {
+        case "success":
+          return "#22c55e";
+        case "error":
+          return "#ef4444";
+        case "warning":
+          return "#f59e0b";
+        case "info":
+          return "#3b82f6";
+        default:
+          return "#22c55e";
+      }
+    };
+    return (I, N) => (c(), u("div", {
+      class: v(["toast-notification", [t.type, { visible: o.value, leaving: i.value }]])
+    }, [
+      a("div", {
+        class: "toast-icon",
+        style: g({ backgroundColor: `${l()}20`, color: l() })
+      }, m(f()), 5),
+      a("div", h, [
+        a("p", k, m(t.message), 1)
+      ]),
+      a("button", {
+        class: "toast-close",
+        onClick: s,
+        "aria-label": "Cerrar notificación"
+      }, " ✕ ")
+    ], 2));
+  }
+}, S = /* @__PURE__ */ p(C, [["__scopeId", "data-v-84ed156b"]]), w = { class: "toast-container" }, x = {
+  __name: "ToastContainer",
+  props: {
+    toasts: { type: Array, required: !0 }
+  },
+  emits: ["removeToast"],
+  setup(t, { emit: r }) {
+    const e = r, n = (o) => {
+      e("removeToast", o);
+    };
+    return (o, i) => (c(), u("div", w, [
+      (c(!0), u(y, null, T(t.toasts, (s) => (c(), b(S, {
+        key: s.id,
+        id: s.id,
+        message: s.message,
+        type: s.type,
+        duration: s.duration,
+        onRemove: n
+      }, null, 8, ["id", "message", "type", "duration"]))), 128))
+    ]));
+  }
+}, B = /* @__PURE__ */ p(x, [["__scopeId", "data-v-25add11c"]]);
+export {
+  B as default
+};

package/dist/tv-demo.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g=require("vue-highlight-code"),E=require("vue3-markdown-it"),h=t=>{const a=e.ref("dark"),u=e.ref(0),c=e.ref(!1),s=e.ref(""),d=e.ref(""),r=e.ref("demo");e.onMounted(()=>{const n=localStorage.getItem("theme");n&&(a.value=n)});const v=async()=>{try{const n=await fetch(t.readmePath);if(!n.ok)throw new Error("README.md not found");d.value=await n.text()}catch{d.value="⚠️ Documentation not found."}},m=()=>{a.value=a.value==="dark"?"light":"dark",localStorage.setItem("theme",a.value)},i=e.computed(()=>t.variants?.[u.value]||{}),f=e.computed(()=>{const n=a.value==="dark"?t.demoStyle?.dark:t.demoStyle?.light;return{body:{backgroundColor:n?.backgroundBody||"",color:n?.color||""},content:{backgroundColor:n?.backgroundContent||"",color:n?.color||""}}}),y=n=>{let o="";n==="npm"?o=`npm install ${t.isDevComponent?"-D ":""}${t.npmInstall}`:o=`git clone ${t.urlClone}`,navigator.clipboard.writeText(o).then(()=>{c.value=!0,s.value=`Copied to clipboard: ${o}`}).catch(l=>{c.value=!0,s.value=`Failed to copy: ${l}`}).finally(()=>{setTimeout(()=>{c.value=!1,s.value=""},2e3)})};return e.watchEffect(v),{customStyle:f,isCopy:c,messageCopy:s,readmeContent:d,selectedTab:r,selectedVariantIndex:u,theme:a,variant:i,setClickItem:y,toggleTheme:m}},V={class:"tv-demo-case"},p={class:"tv-demo-header"},N={class:"tv-demo-title"},B={class:"tv-demo-links"},b=["href"],D={key:1},S={key:3},T={class:"tv-demo-theme"},I={class:"switch"},$=["checked"],w={class:"tv-demo-tabs"},z={key:0,class:"tv-demo-content"},x=["value"],M={class:"tv-demo-description"},P={class:"tv-demo-component-content"},L={key:1,class:"tv-demo-content"},R={key:0,class:"markdown-body"},F={key:1},k={__name:"TvDemo",props:{demoStyle:{type:Object,default:()=>({body:{},content:{}})},hideBackground:Boolean,component:Object,variants:Array,nameComponent:{type:String,default:"Component Demo"},sourceLink:{type:String,default:null},urlClone:{type:String,default:null},npmInstall:{type:String,default:null},isDevComponent:{type:Boolean,default:!1},version:{type:String,default:"0.0.0"},readmePath:{type:String,default:"/README.md"}},setup(t){const a=t,{customStyle:u,isCopy:c,messageCopy:s,readmeContent:d,selectedTab:r,selectedVariantIndex:v,theme:m,variant:i,setClickItem:f,toggleTheme:y}=h(a);return(n,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{class:e.normalizeClass(`${e.unref(m)}-mode tv-demo`),style:e.normalizeStyle(e.unref(u).body)},[e.createElementVNode("div",{class:e.normalizeClass(["tv-demo-body",{[`${e.unref(m)}-mode`]:!t.hideBackground}]),style:e.normalizeStyle(e.unref(u).content)},[e.createElementVNode("div",V,[e.createElementVNode("div",p,[e.createElementVNode("div",null,[e.createElementVNode("h1",N,[e.createTextVNode(e.toDisplayString(t.nameComponent)+" ",1),e.createElementVNode("span",null,"v"+e.toDisplayString(t.version),1)]),e.createElementVNode("div",B,[t.sourceLink||t.npmInstall||t.urlClone?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.sourceLink?(e.openBlock(),e.createElementBlock("a",{key:0,href:t.sourceLink,target:"_blank",class:"tv-demo-links-item"}," 📂 Source ",8,b)):e.createCommentVNode("",!0),t.sourceLink&&(t.npmInstall||t.urlClone)?(e.openBlock(),e.createElementBlock("span",D," | ")):e.createCommentVNode("",!0),t.npmInstall?(e.openBlock(),e.createElementBlock("div",{key:2,class:"tv-demo-links-item",onClick:o[0]||(o[0]=l=>e.unref(f)("npm"))}," 📦 NPM Command ")):e.createCommentVNode("",!0),t.npmInstall&&t.urlClone?(e.openBlock(),e.createElementBlock("span",S," | ")):e.createCommentVNode("",!0),t.urlClone?(e.openBlock(),e.createElementBlock("div",{key:4,class:"tv-demo-links-item",onClick:o[1]||(o[1]=l=>e.unref(f)("clone"))}," 📝 Clone Component ")):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",null,[e.createElementVNode("div",T,[o[7]||(o[7]=e.createElementVNode("span",{style:{"font-size":"0.9rem",opacity:"0.8"}},"Theme",-1)),e.createElementVNode("label",I,[e.createElementVNode("input",{type:"checkbox",checked:e.unref(m)==="dark",onChange:o[2]||(o[2]=(...l)=>e.unref(y)&&e.unref(y)(...l))},null,40,$),o[6]||(o[6]=e.createElementVNode("span",{class:"slider round"},null,-1))])])])]),e.createElementVNode("div",w,[e.createElementVNode("button",{class:e.normalizeClass({active:e.unref(r)==="demo"}),onClick:o[3]||(o[3]=l=>r.value="demo")},"📌 Demo",2),e.createElementVNode("button",{class:e.normalizeClass({active:e.unref(r)==="docs"}),onClick:o[4]||(o[4]=l=>r.value="docs")},"📖 Documentation",2)]),e.unref(r)==="demo"?(e.openBlock(),e.createElementBlock("div",z,[o[8]||(o[8]=e.createElementVNode("h3",null,"Variations:",-1)),t.variants.length>1?e.withDirectives((e.openBlock(),e.createElementBlock("select",{key:0,class:"tv-demo-select","onUpdate:modelValue":o[5]||(o[5]=l=>e.isRef(v)?v.value=l:null)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.variants,(l,C)=>(e.openBlock(),e.createElementBlock("option",{key:l.title,value:C},e.toDisplayString(l.title),9,x))),128))],512)),[[e.vModelSelect,e.unref(v)]]):e.createCommentVNode("",!0),e.createElementVNode("span",M,e.toDisplayString(e.unref(i).description),1),e.createElementVNode("div",P,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.component),e.normalizeProps(e.guardReactiveProps(e.unref(i).propsData)),null,16))]),o[9]||(o[9]=e.createElementVNode("h3",null,"Code:",-1)),(e.openBlock(),e.createBlock(e.unref(g.HighCode),{class:"tv-demo-code",codeValue:e.unref(i).html,theme:e.unref(m),lang:"html",codeLines:"",key:e.unref(i).title,height:"auto"},null,8,["codeValue","theme"])),e.unref(c)?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(t.hideBackground?"tv-demo-copy no-background":"tv-demo-copy")},e.toDisplayString(e.unref(s)),3)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.unref(r)==="docs"?(e.openBlock(),e.createElementBlock("div",L,[o[10]||(o[10]=e.createElementVNode("h2",null,"📖 Documentation",-1)),e.unref(d)?(e.openBlock(),e.createElementBlock("div",R,[e.createVNode(e.unref(E),{source:e.unref(d),html:""},null,8,["source"])])):(e.openBlock(),e.createElementBlock("div",F,"No documentation available."))])):e.createCommentVNode("",!0)])],6)],6),o[11]||(o[11]=e.createElementVNode("footer",{class:"tv-demo-footer"},[e.createElementVNode("p",{class:"tv-demo-footer-text"},[e.createTextVNode(" Design by "),e.createElementVNode("a",{href:"https://cris-dev.com/",target:"_blank",rel:"noopener noreferrer",class:"tv-demo-footer-link"}," Cristhian Daza "),e.createElementVNode("span",{class:"tv-demo-footer-heart"},"💙")])],-1))],64))}};k.install=t=>{t.component("TvDemo",k)};const j={install(t){t.component("TvDemo",k)}};exports.TvDemo=k;exports.TvDemoPlugin=j;exports.default=k;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),Q=require("vue-highlight-code"),G=require("vue3-markdown-it"),b=72,R=6,Y=(n,u)=>n?.id??n?.title??`variant-${u}`,J=(n={})=>`${n.title??""} ${n.description??""}`.toLowerCase(),W=n=>{const u=e.ref("dark"),y=e.ref([]),g=e.ref(""),$=e.ref("demo"),k=e.ref(""),r=e.ref(null),c=e.ref(null),f=e.ref(360),N=e.ref(0);let v=null,h=!1;const p=e.computed(()=>(n.variants||[]).map((t,a)=>({variant:t,index:a,key:Y(t,a),searchableText:J(t)}))),z=e.computed(()=>p.value.length),s=e.computed(()=>{const t=k.value.trim().toLowerCase();return t?p.value.filter(a=>a.searchableText.includes(t)):p.value}),M=e.computed(()=>s.value.length),m=e.computed(()=>!!k.value.trim()&&s.value.length===0),i=()=>{f.value=c.value?.clientHeight||f.value},D=()=>{h&&(window.removeEventListener("resize",i),h=!1)};e.watch(()=>c.value,t=>{if(v&&(v.disconnect(),v=null),!t){D();return}e.nextTick(()=>{i(),typeof ResizeObserver<"u"?(v=new ResizeObserver(a=>{const d=a?.[0];d&&(f.value=d.contentRect.height)}),v.observe(t)):h||(window.addEventListener("resize",i),h=!0)})}),e.onMounted(()=>{const t=localStorage.getItem("theme");t&&(u.value=t),e.nextTick(i)}),e.onBeforeUnmount(()=>{v&&(v.disconnect(),v=null),D()});const T=async()=>{try{const t=await fetch(n.readmePath);if(!t.ok)throw new Error("README.md not found");g.value=await t.text()}catch{g.value="⚠️ Documentation not found."}},x=()=>{u.value=u.value==="dark"?"light":"dark",localStorage.setItem("theme",u.value)};e.watch(()=>p.value,t=>{if(!t.length){r.value=null;return}t.some(a=>a.key===r.value)||(r.value=t[0].key)},{immediate:!0}),e.watch(()=>s.value,t=>{if(!t.length){r.value=null;return}t.some(a=>a.key===r.value)||(r.value=t[0].key)});const C=t=>{c.value&&(c.value.scrollTop=t,N.value=t)};e.watch(k,()=>{C(0)});const V=e.computed(()=>s.value.findIndex(t=>t.key===r.value)),E=e.computed(()=>Math.max(1,Math.ceil(f.value/b))),B=e.computed(()=>Math.max(0,Math.floor(N.value/b)-R)),o=e.computed(()=>Math.min(s.value.length,B.value+E.value+R*2)),l=e.computed(()=>s.value.slice(B.value,o.value)),L=e.computed(()=>B.value*b),A=e.computed(()=>Math.max(0,(s.value.length-o.value)*b)),O=()=>{if(!c.value)return;const t=V.value;if(t<0)return;const a=B.value+2,d=o.value-3;if(t<a)C(Math.max(0,t*b));else if(t>d){const S=Math.max(0,t-E.value+1);C(S*b)}};e.watch(r,O);const H=e.computed(()=>m.value?{}:(s.value.find(a=>a.key===r.value)||p.value.find(a=>a.key===r.value)||s.value[0]||p.value[0])?.variant||{}),K=t=>{N.value=t.target.scrollTop},P=t=>{const a=s.value;if(!a.length)return;const d=V.value<0?0:V.value,S=Math.min(a.length-1,Math.max(0,d+t));r.value=a[S].key},_=t=>{switch(t.key){case"ArrowDown":t.preventDefault(),P(1);break;case"ArrowUp":t.preventDefault(),P(-1);break;case"Home":t.preventDefault(),s.value.length&&(r.value=s.value[0].key);break;case"End":t.preventDefault(),s.value.length&&(r.value=s.value[s.value.length-1].key);break}},F=t=>{r.value=t},j=e.computed(()=>{const t=u.value==="dark"?n.demoStyle?.dark:n.demoStyle?.light;return{body:{backgroundColor:t?.backgroundBody||"",color:t?.color||""},content:{backgroundColor:t?.backgroundContent||"",color:t?.color||""}}}),q=t=>{let a="";t==="npm"?a=`npm install ${n.isDevComponent?"-D ":""}${n.npmInstall}`:a=`git clone ${n.urlClone}`,navigator.clipboard.writeText(a).then(()=>{I(`Copied to clipboard: ${a}`,"success",3e3)}).catch(d=>{I(`Failed to copy: ${d}`,"error",3e3)})},I=(t,a="success",d=3e3)=>{const S=`toast-${Date.now()}-${Math.random().toString(36).substr(2,9)}`;y.value.push({id:S,message:t,type:a,duration:d})},U=t=>{const a=y.value.findIndex(d=>d.id===t);a>-1&&y.value.splice(a,1)};return e.watchEffect(T),{customStyle:j,toasts:y,readmeContent:g,selectedTab:$,searchQuery:k,selectedVariantKey:r,totalVariantsCount:z,filteredVariantsCount:M,variantsListRef:c,virtualizedVariants:l,virtualPaddingTop:L,virtualPaddingBottom:A,emptySearchState:m,theme:u,variant:H,addToast:I,removeToast:U,selectVariant:F,setClickItem:q,toggleTheme:x,handleVariantsScroll:K,handleVariantsKeydown:_}},X={class:"tv-demo-case"},Z={class:"tv-demo-header"},ee={class:"tv-demo-links"},te=["href"],oe={key:1},ne={key:3},ae={class:"tv-demo-theme"},le={class:"switch"},re=["checked"],se={class:"tv-demo-tabs"},ce={key:0,class:"tv-demo-layout"},ie={class:"tv-demo-sidebar-header"},de={class:"tv-demo-sidebar-meta"},me=["aria-activedescendant"],ue=["id","aria-selected","onClick"],ve={class:"tv-demo-variant-card-content"},fe={class:"tv-demo-variant-card-title"},pe={class:"tv-demo-variant-card-description"},ke={key:1,class:"tv-demo-empty-state"},he={class:"tv-demo-content","aria-live":"polite"},ye={class:"tv-demo-content-header"},ge={class:"tv-demo-description"},Ve={class:"tv-demo-component-content"},Ee={key:1,class:"tv-demo-empty-component"},be={key:1,class:"tv-demo-empty-code"},Ne={key:1,class:"tv-demo-content"},Ce={key:0,class:"markdown-body"},Be={key:1},Se={class:"tv-demo-footer-content"},we={class:"tv-demo-footer-main"},De={class:"tv-demo-footer-brand"},Te={class:"tv-demo-footer-brand-text"},xe={class:"tv-demo-footer-brand-version"},$e={class:"tv-demo-footer-bottom"},ze={class:"tv-demo-footer-copyright"},w={__name:"TvDemo",props:{demoStyle:{type:Object,default:()=>({body:{},content:{}})},hideBackground:Boolean,component:Object,variants:Array,componentName:{type:String,default:"Component Demo"},sourceLink:{type:String,default:null},urlClone:{type:String,default:null},npmInstall:{type:String,default:null},isDevComponent:{type:Boolean,default:!1},version:{type:String,default:"0.0.0"},readmePath:{type:String,default:"/README.md"}},setup(n){const u=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./ToastContainer-Cx0oFM8l.cjs"))),y=n,{customStyle:g,toasts:$,readmeContent:k,selectedTab:r,searchQuery:c,selectedVariantKey:f,totalVariantsCount:N,filteredVariantsCount:v,variantsListRef:h,virtualizedVariants:p,virtualPaddingTop:z,virtualPaddingBottom:s,emptySearchState:M,theme:m,variant:i,removeToast:D,setClickItem:T,toggleTheme:x,selectVariant:C,handleVariantsScroll:V,handleVariantsKeydown:E}=W(y);return(B,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{class:e.normalizeClass(`${e.unref(m)}-mode tv-demo`),style:e.normalizeStyle(e.unref(g).body)},[e.createElementVNode("div",{class:e.normalizeClass(["tv-demo-body",{[`${e.unref(m)}-mode`]:!n.hideBackground}]),style:e.normalizeStyle(e.unref(g).content)},[e.createElementVNode("div",X,[e.createElementVNode("div",Z,[e.createElementVNode("div",null,[e.createElementVNode("div",ee,[n.sourceLink||n.npmInstall||n.urlClone?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[n.sourceLink?(e.openBlock(),e.createElementBlock("a",{key:0,href:n.sourceLink,target:"_blank",class:"tv-demo-links-item"}," 📂 Source ",8,te)):e.createCommentVNode("",!0),n.sourceLink&&(n.npmInstall||n.urlClone)?(e.openBlock(),e.createElementBlock("span",oe," | ")):e.createCommentVNode("",!0),n.npmInstall?(e.openBlock(),e.createElementBlock("div",{key:2,class:"tv-demo-links-item",onClick:o[0]||(o[0]=l=>e.unref(T)("npm"))}," 📦 NPM Command ")):e.createCommentVNode("",!0),n.npmInstall&&n.urlClone?(e.openBlock(),e.createElementBlock("span",ne," | ")):e.createCommentVNode("",!0),n.urlClone?(e.openBlock(),e.createElementBlock("div",{key:4,class:"tv-demo-links-item",onClick:o[1]||(o[1]=l=>e.unref(T)("clone"))}," 📝 Clone Component ")):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",null,[e.createElementVNode("div",ae,[o[13]||(o[13]=e.createElementVNode("span",{style:{"font-size":"0.9rem",opacity:"0.8"}},"Theme",-1)),e.createElementVNode("label",le,[e.createElementVNode("input",{type:"checkbox",checked:e.unref(m)==="dark",onChange:o[2]||(o[2]=(...l)=>e.unref(x)&&e.unref(x)(...l))},null,40,re),o[12]||(o[12]=e.createElementVNode("span",{class:"slider round"},null,-1))])])])]),e.createElementVNode("div",se,[e.createElementVNode("button",{class:e.normalizeClass({active:e.unref(r)==="demo"}),onClick:o[3]||(o[3]=l=>r.value="demo")},"📌 Demo",2),e.createElementVNode("button",{class:e.normalizeClass({active:e.unref(r)==="docs"}),onClick:o[4]||(o[4]=l=>r.value="docs")},"📖 Documentation",2)]),e.unref(r)==="demo"?(e.openBlock(),e.createElementBlock("div",ce,[e.createElementVNode("aside",{class:e.normalizeClass(["tv-demo-sidebar",`${e.unref(m)}-mode`])},[e.createElementVNode("div",ie,[e.createElementVNode("div",null,[e.createElementVNode("p",de,e.toDisplayString(e.unref(v))+" / "+e.toDisplayString(e.unref(N))+" variants",1),o[14]||(o[14]=e.createElementVNode("h3",null,"Variants",-1))]),e.createElementVNode("button",{class:"tv-demo-sidebar-collapse","aria-label":"Scroll to top",onClick:o[5]||(o[5]=l=>e.unref(h)?.scrollTo({top:0,behavior:"smooth"}))}," ⬆️ ")]),e.createElementVNode("label",{class:e.normalizeClass(["tv-demo-search",`${e.unref(m)}-mode`])},[o[15]||(o[15]=e.createElementVNode("span",{class:"tv-demo-search-icon"},"🔍",-1)),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":o[6]||(o[6]=l=>e.isRef(c)?c.value=l:null),type:"search",placeholder:"Search variants...",class:"tv-demo-search-input","aria-label":"Search variants",onKeydown:o[7]||(o[7]=e.withKeys(e.withModifiers(l=>e.unref(E)(l),["prevent"]),["down"]))},null,544),[[e.vModelText,e.unref(c)]]),e.unref(c)?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"tv-demo-search-clear","aria-label":"Clear search",onClick:o[8]||(o[8]=l=>c.value="")},"✕")):e.createCommentVNode("",!0)],2),e.createElementVNode("div",{class:e.normalizeClass(["tv-demo-variants",`${e.unref(m)}-mode`]),role:"listbox",tabindex:"0","aria-label":"Available variants","aria-activedescendant":e.unref(f)?`variant-${e.unref(f)}`:null,onKeydown:o[10]||(o[10]=(...l)=>e.unref(E)&&e.unref(E)(...l)),ref_key:"variantsListRef",ref:h,onScroll:o[11]||(o[11]=(...l)=>e.unref(V)&&e.unref(V)(...l))},[e.createElementVNode("div",{style:e.normalizeStyle({paddingTop:`${e.unref(z)}px`,paddingBottom:`${e.unref(s)}px`})},[e.unref(M)?(e.openBlock(),e.createElementBlock("div",ke,[e.createElementVNode("p",null,'No matches for "'+e.toDisplayString(e.unref(c))+'".',1),e.createElementVNode("button",{class:"tv-demo-reset",type:"button",onClick:o[9]||(o[9]=l=>c.value="")},"Clear filter")])):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(e.unref(p),l=>(e.openBlock(),e.createElementBlock("button",{key:l.key,id:`variant-${l.key}`,type:"button",class:e.normalizeClass(["tv-demo-variant-card",{active:l.key===e.unref(f)}]),role:"option","aria-selected":l.key===e.unref(f),onClick:L=>e.unref(C)(l.key)},[e.createElementVNode("span",ve,[e.createElementVNode("span",fe,e.toDisplayString(l.variant.title),1),e.createElementVNode("span",pe,e.toDisplayString(l.variant.description),1)]),o[16]||(o[16]=e.createElementVNode("span",{class:"tv-demo-variant-card-icon"},"→",-1))],10,ue))),128))],4)],42,me)],2),e.createElementVNode("section",he,[e.createElementVNode("div",ye,[e.createElementVNode("div",null,[o[17]||(o[17]=e.createElementVNode("p",{class:"tv-demo-content-label"},"Preview",-1)),e.createElementVNode("h3",null,e.toDisplayString(e.unref(i).title||"Select a variant"),1)])]),e.createElementVNode("p",ge,e.toDisplayString(e.unref(i).description||"Select a variant from the list to view its details."),1),e.createElementVNode("div",Ve,[e.unref(i)&&n.component?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.component),e.normalizeProps(e.mergeProps({key:0},e.unref(i).propsData)),null,16)):(e.openBlock(),e.createElementBlock("p",Ee,"No component to render."))]),o[18]||(o[18]=e.createElementVNode("h3",null,"Code:",-1)),e.unref(i)?.html?(e.openBlock(),e.createBlock(e.unref(Q.HighCode),{class:"tv-demo-code",codeValue:e.unref(i).html,theme:e.unref(m),lang:"html",codeLines:"",key:e.unref(i).title,height:"auto"},null,8,["codeValue","theme"])):(e.openBlock(),e.createElementBlock("p",be,"No snippet available."))])])):e.createCommentVNode("",!0),e.unref(r)==="docs"?(e.openBlock(),e.createElementBlock("div",Ne,[e.unref(k)?(e.openBlock(),e.createElementBlock("div",Ce,[e.createVNode(e.unref(G),{source:e.unref(k),html:""},null,8,["source"])])):(e.openBlock(),e.createElementBlock("div",Be,"No documentation available."))])):e.createCommentVNode("",!0)])],6)],6),e.createElementVNode("footer",{class:e.normalizeClass(["tv-demo-footer",`${e.unref(m)}-mode`])},[e.createElementVNode("div",Se,[e.createElementVNode("div",we,[e.createElementVNode("div",De,[o[19]||(o[19]=e.createElementVNode("span",{class:"tv-demo-footer-logo"},[e.createElementVNode("img",{src:"https://firebasestorage.googleapis.com/v0/b/todovue-blog.appspot.com/o/icono_git.png?alt=media&token=86270c30-8235-4424-b72b-7a585f228685",alt:""})],-1)),e.createElementVNode("span",Te,e.toDisplayString(n.componentName),1),e.createElementVNode("span",xe,"v"+e.toDisplayString(n.version),1)]),o[20]||(o[20]=e.createStaticVNode('<div class="tv-demo-footer-info"><p class="tv-demo-footer-text"> Designed &amp; Developed by <a href="https://cris-dev.com/" target="_blank" rel="noopener noreferrer" class="tv-demo-footer-link"> cris-dev.com </a></p><div class="tv-demo-footer-divider"></div><p class="tv-demo-footer-text"> Made with <span class="tv-demo-footer-heart">💙</span> using Vue.js </p></div>',1))]),e.createElementVNode("div",$e,[e.createElementVNode("p",ze," © "+e.toDisplayString(new Date().getFullYear())+" TODOvue. All rights reserved. ",1)])])],2),e.createVNode(e.unref(u),{toasts:e.unref($),onRemoveToast:e.unref(D)},null,8,["toasts","onRemoveToast"])],64))}};w.install=n=>{n.component("TvDemo",w)};const Me={install(n){n.component("TvDemo",w)}};exports.TvDemo=w;exports.TvDemoPlugin=Me;exports.default=w;

package/dist/tv-demo.css

@@ -1 +1 @@
-@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Kanit:wght@600&family=Lato:wght@300&display=swap";.markdown-body{--base-size-4: .25rem;--base-size-8: .5rem;--base-size-16: 1rem;--base-size-24: 1.5rem;--base-size-40: 2.5rem;--base-text-weight-normal: 400;--base-text-weight-medium: 500;--base-text-weight-semibold: 600;--fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;--fgColor-accent: Highlight}@media(prefers-color-scheme:dark){.markdown-body,[data-theme=dark]{color-scheme:dark;--focus-outlineColor: #1f6feb;--fgColor-default: #f0f6fc;--fgColor-muted: #9198a1;--fgColor-accent: #4493f8;--fgColor-success: #3fb950;--fgColor-attention: #d29922;--fgColor-danger: #f85149;--fgColor-done: #ab7df8;--bgColor-default: #0d1117;--bgColor-muted: #151b23;--bgColor-neutral-muted: #656c7633;--bgColor-attention-muted: #bb800926;--borderColor-default: #3d444d;--borderColor-muted: #3d444db3;--borderColor-neutral-muted: #3d444db3;--borderColor-accent-emphasis: #1f6feb;--borderColor-success-emphasis: #238636;--borderColor-attention-emphasis: #9e6a03;--borderColor-danger-emphasis: #da3633;--borderColor-done-emphasis: #8957e5;--color-prettylights-syntax-comment: #9198a1;--color-prettylights-syntax-constant: #79c0ff;--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;--color-prettylights-syntax-entity: #d2a8ff;--color-prettylights-syntax-storage-modifier-import: #f0f6fc;--color-prettylights-syntax-entity-tag: #7ee787;--color-prettylights-syntax-keyword: #ff7b72;--color-prettylights-syntax-string: #a5d6ff;--color-prettylights-syntax-variable: #ffa657;--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;--color-prettylights-syntax-brackethighlighter-angle: #9198a1;--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;--color-prettylights-syntax-invalid-illegal-bg: #8e1519;--color-prettylights-syntax-carriage-return-text: #f0f6fc;--color-prettylights-syntax-carriage-return-bg: #b62324;--color-prettylights-syntax-string-regexp: #7ee787;--color-prettylights-syntax-markup-list: #f2cc60;--color-prettylights-syntax-markup-heading: #1f6feb;--color-prettylights-syntax-markup-italic: #f0f6fc;--color-prettylights-syntax-markup-bold: #f0f6fc;--color-prettylights-syntax-markup-deleted-text: #ffdcd7;--color-prettylights-syntax-markup-deleted-bg: #67060c;--color-prettylights-syntax-markup-inserted-text: #aff5b4;--color-prettylights-syntax-markup-inserted-bg: #033a16;--color-prettylights-syntax-markup-changed-text: #ffdfb6;--color-prettylights-syntax-markup-changed-bg: #5a1e02;--color-prettylights-syntax-markup-ignored-text: #f0f6fc;--color-prettylights-syntax-markup-ignored-bg: #1158c7;--color-prettylights-syntax-meta-diff-range: #d2a8ff;--color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d}}@media(prefers-color-scheme:light){.markdown-body,[data-theme=light]{color-scheme:light;--focus-outlineColor: #0969da;--fgColor-default: #1f2328;--fgColor-muted: #59636e;--fgColor-accent: #0969da;--fgColor-success: #1a7f37;--fgColor-attention: #9a6700;--fgColor-danger: #d1242f;--fgColor-done: #8250df;--bgColor-default: #ffffff;--bgColor-muted: #f6f8fa;--bgColor-neutral-muted: #818b981f;--bgColor-attention-muted: #fff8c5;--borderColor-default: #d1d9e0;--borderColor-muted: #d1d9e0b3;--borderColor-neutral-muted: #d1d9e0b3;--borderColor-accent-emphasis: #0969da;--borderColor-success-emphasis: #1a7f37;--borderColor-attention-emphasis: #9a6700;--borderColor-danger-emphasis: #cf222e;--borderColor-done-emphasis: #8250df;--color-prettylights-syntax-comment: #59636e;--color-prettylights-syntax-constant: #0550ae;--color-prettylights-syntax-constant-other-reference-link: #0a3069;--color-prettylights-syntax-entity: #6639ba;--color-prettylights-syntax-storage-modifier-import: #1f2328;--color-prettylights-syntax-entity-tag: #0550ae;--color-prettylights-syntax-keyword: #cf222e;--color-prettylights-syntax-string: #0a3069;--color-prettylights-syntax-variable: #953800;--color-prettylights-syntax-brackethighlighter-unmatched: #82071e;--color-prettylights-syntax-brackethighlighter-angle: #59636e;--color-prettylights-syntax-invalid-illegal-text: #f6f8fa;--color-prettylights-syntax-invalid-illegal-bg: #82071e;--color-prettylights-syntax-carriage-return-text: #f6f8fa;--color-prettylights-syntax-carriage-return-bg: #cf222e;--color-prettylights-syntax-string-regexp: #116329;--color-prettylights-syntax-markup-list: #3b2300;--color-prettylights-syntax-markup-heading: #0550ae;--color-prettylights-syntax-markup-italic: #1f2328;--color-prettylights-syntax-markup-bold: #1f2328;--color-prettylights-syntax-markup-deleted-text: #82071e;--color-prettylights-syntax-markup-deleted-bg: #ffebe9;--color-prettylights-syntax-markup-inserted-text: #116329;--color-prettylights-syntax-markup-inserted-bg: #dafbe1;--color-prettylights-syntax-markup-changed-text: #953800;--color-prettylights-syntax-markup-changed-bg: #ffd8b5;--color-prettylights-syntax-markup-ignored-text: #d1d9e0;--color-prettylights-syntax-markup-ignored-bg: #0550ae;--color-prettylights-syntax-meta-diff-range: #8250df;--color-prettylights-syntax-sublimelinter-gutter-mark: #818b98}}.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0;color:var(--fgColor-default);background-color:var(--bgColor-default);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";font-size:16px;line-height:1.5;word-wrap:break-word}.markdown-body .octicon{display:inline-block;fill:currentColor;vertical-align:text-bottom}.markdown-body h1:hover .anchor .octicon-link:before,.markdown-body h2:hover .anchor .octicon-link:before,.markdown-body h3:hover .anchor .octicon-link:before,.markdown-body h4:hover .anchor .octicon-link:before,.markdown-body h5:hover .anchor .octicon-link:before,.markdown-body h6:hover .anchor .octicon-link:before{width:16px;height:16px;content:" ";display:inline-block;background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>")}.markdown-body details,.markdown-body figcaption,.markdown-body figure{display:block}.markdown-body summary{display:list-item}.markdown-body [hidden]{display:none!important}.markdown-body a{background-color:transparent;color:var(--fgColor-accent);text-decoration:none}.markdown-body abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.markdown-body b,.markdown-body strong{font-weight:var(--base-text-weight-semibold, 600)}.markdown-body dfn{font-style:italic}.markdown-body h1{margin:.67em 0;font-weight:var(--base-text-weight-semibold, 600);padding-bottom:.3em;font-size:2em;border-bottom:1px solid var(--borderColor-muted)}.markdown-body mark{background-color:var(--bgColor-attention-muted);color:var(--fgColor-default)}.markdown-body small{font-size:90%}.markdown-body sub,.markdown-body sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.markdown-body sub{bottom:-.25em}.markdown-body sup{top:-.5em}.markdown-body img{border-style:none;max-width:100%;box-sizing:content-box}.markdown-body code,.markdown-body kbd,.markdown-body pre,.markdown-body samp{font-family:monospace;font-size:1em}.markdown-body figure{margin:1em var(--base-size-40)}.markdown-body hr{box-sizing:content-box;overflow:hidden;background:transparent;border-bottom:1px solid var(--borderColor-muted);height:.25em;padding:0;margin:var(--base-size-24) 0;background-color:var(--borderColor-default);border:0}.markdown-body input{font:inherit;margin:0;overflow:visible;font-family:inherit;font-size:inherit;line-height:inherit}.markdown-body [type=button],.markdown-body [type=reset],.markdown-body [type=submit]{-webkit-appearance:button;appearance:button}.markdown-body [type=checkbox],.markdown-body [type=radio]{box-sizing:border-box;padding:0}.markdown-body [type=number]::-webkit-inner-spin-button,.markdown-body [type=number]::-webkit-outer-spin-button{height:auto}.markdown-body [type=search]::-webkit-search-cancel-button,.markdown-body [type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.markdown-body ::-webkit-input-placeholder{color:inherit;opacity:.54}.markdown-body ::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}.markdown-body a:hover{text-decoration:underline}.markdown-body ::placeholder{color:var(--fgColor-muted);opacity:1}.markdown-body hr:before{display:table;content:""}.markdown-body hr:after{display:table;clear:both;content:""}.markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;font-variant:tabular-nums}.markdown-body td,.markdown-body th{padding:0}.markdown-body details summary{cursor:pointer}.markdown-body a:focus,.markdown-body [role=button]:focus,.markdown-body input[type=radio]:focus,.markdown-body input[type=checkbox]:focus{outline:2px solid var(--focus-outlineColor);outline-offset:-2px;box-shadow:none}.markdown-body a:focus:not(:focus-visible),.markdown-body [role=button]:focus:not(:focus-visible),.markdown-body input[type=radio]:focus:not(:focus-visible),.markdown-body input[type=checkbox]:focus:not(:focus-visible){outline:solid 1px transparent}.markdown-body a:focus-visible,.markdown-body [role=button]:focus-visible,.markdown-body input[type=radio]:focus-visible,.markdown-body input[type=checkbox]:focus-visible{outline:2px solid var(--focus-outlineColor);outline-offset:-2px;box-shadow:none}.markdown-body a:not([class]):focus,.markdown-body a:not([class]):focus-visible,.markdown-body input[type=radio]:focus,.markdown-body input[type=radio]:focus-visible,.markdown-body input[type=checkbox]:focus,.markdown-body input[type=checkbox]:focus-visible{outline-offset:0}.markdown-body kbd{display:inline-block;padding:var(--base-size-4);font:11px var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);line-height:10px;color:var(--fgColor-default);vertical-align:middle;background-color:var(--bgColor-muted);border:solid 1px var(--borderColor-neutral-muted);border-bottom-color:var(--borderColor-neutral-muted);border-radius:6px;box-shadow:inset 0 -1px 0 var(--borderColor-neutral-muted)}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin-top:var(--base-size-24);margin-bottom:var(--base-size-16);font-weight:var(--base-text-weight-semibold, 600);line-height:1.25}.markdown-body h2{font-weight:var(--base-text-weight-semibold, 600);padding-bottom:.3em;font-size:1.5em;border-bottom:1px solid var(--borderColor-muted)}.markdown-body h3{font-weight:var(--base-text-weight-semibold, 600);font-size:1.25em}.markdown-body h4{font-weight:var(--base-text-weight-semibold, 600);font-size:1em}.markdown-body h5{font-weight:var(--base-text-weight-semibold, 600);font-size:.875em}.markdown-body h6{font-weight:var(--base-text-weight-semibold, 600);font-size:.85em;color:var(--fgColor-muted)}.markdown-body p{margin-top:0;margin-bottom:10px}.markdown-body blockquote{margin:0;padding:0 1em;color:var(--fgColor-muted);border-left:.25em solid var(--borderColor-default)}.markdown-body ul,.markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ul ul ol,.markdown-body ul ol ol,.markdown-body ol ul ol,.markdown-body ol ol ol{list-style-type:lower-alpha}.markdown-body dd{margin-left:0}.markdown-body tt,.markdown-body code,.markdown-body samp{font-family:var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);font-size:12px}.markdown-body pre{margin-top:0;margin-bottom:0;font-family:var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);font-size:12px;word-wrap:normal}.markdown-body .octicon{display:inline-block;overflow:visible!important;vertical-align:text-bottom;fill:currentColor}.markdown-body input::-webkit-outer-spin-button,.markdown-body input::-webkit-inner-spin-button{margin:0;appearance:none}.markdown-body .mr-2{margin-right:var(--base-size-8, 8px)!important}.markdown-body:before{display:table;content:""}.markdown-body:after{display:table;clear:both;content:""}.markdown-body>*:first-child{margin-top:0!important}.markdown-body>*:last-child{margin-bottom:0!important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body .absent{color:var(--fgColor-danger)}.markdown-body .anchor{float:left;padding-right:var(--base-size-4);margin-left:-20px;line-height:1}.markdown-body .anchor:focus{outline:none}.markdown-body p,.markdown-body blockquote,.markdown-body ul,.markdown-body ol,.markdown-body dl,.markdown-body table,.markdown-body pre,.markdown-body details{margin-top:0;margin-bottom:var(--base-size-16)}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body h1 .octicon-link,.markdown-body h2 .octicon-link,.markdown-body h3 .octicon-link,.markdown-body h4 .octicon-link,.markdown-body h5 .octicon-link,.markdown-body h6 .octicon-link{color:var(--fgColor-default);vertical-align:middle;visibility:hidden}.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{text-decoration:none}.markdown-body h1:hover .anchor .octicon-link,.markdown-body h2:hover .anchor .octicon-link,.markdown-body h3:hover .anchor .octicon-link,.markdown-body h4:hover .anchor .octicon-link,.markdown-body h5:hover .anchor .octicon-link,.markdown-body h6:hover .anchor .octicon-link{visibility:visible}.markdown-body h1 tt,.markdown-body h1 code,.markdown-body h2 tt,.markdown-body h2 code,.markdown-body h3 tt,.markdown-body h3 code,.markdown-body h4 tt,.markdown-body h4 code,.markdown-body h5 tt,.markdown-body h5 code,.markdown-body h6 tt,.markdown-body h6 code{padding:0 .2em;font-size:inherit}.markdown-body summary h1,.markdown-body summary h2,.markdown-body summary h3,.markdown-body summary h4,.markdown-body summary h5,.markdown-body summary h6{display:inline-block}.markdown-body summary h1 .anchor,.markdown-body summary h2 .anchor,.markdown-body summary h3 .anchor,.markdown-body summary h4 .anchor,.markdown-body summary h5 .anchor,.markdown-body summary h6 .anchor{margin-left:-40px}.markdown-body summary h1,.markdown-body summary h2{padding-bottom:0;border-bottom:0}.markdown-body ul.no-list,.markdown-body ol.no-list{padding:0;list-style-type:none}.markdown-body ol[type="a s"]{list-style-type:lower-alpha}.markdown-body ol[type="A s"]{list-style-type:upper-alpha}.markdown-body ol[type="i s"]{list-style-type:lower-roman}.markdown-body ol[type="I s"]{list-style-type:upper-roman}.markdown-body ol[type="1"]{list-style-type:decimal}.markdown-body div>ol:not([type]){list-style-type:decimal}.markdown-body ul ul,.markdown-body ul ol,.markdown-body ol ol,.markdown-body ol ul{margin-top:0;margin-bottom:0}.markdown-body li>p{margin-top:var(--base-size-16)}.markdown-body li+li{margin-top:.25em}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:var(--base-size-16);font-size:1em;font-style:italic;font-weight:var(--base-text-weight-semibold, 600)}.markdown-body dl dd{padding:0 var(--base-size-16);margin-bottom:var(--base-size-16)}.markdown-body table th{font-weight:var(--base-text-weight-semibold, 600)}.markdown-body table th,.markdown-body table td{padding:6px 13px;border:1px solid var(--borderColor-default)}.markdown-body table td>:last-child{margin-bottom:0}.markdown-body table tr{background-color:var(--bgColor-default);border-top:1px solid var(--borderColor-muted)}.markdown-body table tr:nth-child(2n){background-color:var(--bgColor-muted)}.markdown-body table img{background-color:transparent}.markdown-body img[align=right]{padding-left:20px}.markdown-body img[align=left]{padding-right:20px}.markdown-body .emoji{max-width:none;vertical-align:text-top;background-color:transparent}.markdown-body span.frame{display:block;overflow:hidden}.markdown-body span.frame>span{display:block;float:left;width:auto;padding:7px;margin:13px 0 0;overflow:hidden;border:1px solid var(--borderColor-default)}.markdown-body span.frame span img{display:block;float:left}.markdown-body span.frame span span{display:block;padding:5px 0 0;clear:both;color:var(--fgColor-default)}.markdown-body span.align-center{display:block;overflow:hidden;clear:both}.markdown-body span.align-center>span{display:block;margin:13px auto 0;overflow:hidden;text-align:center}.markdown-body span.align-center span img{margin:0 auto;text-align:center}.markdown-body span.align-right{display:block;overflow:hidden;clear:both}.markdown-body span.align-right>span{display:block;margin:13px 0 0;overflow:hidden;text-align:right}.markdown-body span.align-right span img{margin:0;text-align:right}.markdown-body span.float-left{display:block;float:left;margin-right:13px;overflow:hidden}.markdown-body span.float-left span{margin:13px 0 0}.markdown-body span.float-right{display:block;float:right;margin-left:13px;overflow:hidden}.markdown-body span.float-right>span{display:block;margin:13px auto 0;overflow:hidden;text-align:right}.markdown-body code,.markdown-body tt{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;background-color:var(--bgColor-neutral-muted);border-radius:6px}.markdown-body code br,.markdown-body tt br{display:none}.markdown-body del code{text-decoration:inherit}.markdown-body samp{font-size:85%}.markdown-body pre code{font-size:100%}.markdown-body pre>code{padding:0;margin:0;word-break:normal;white-space:pre;background:transparent;border:0}.markdown-body .highlight{margin-bottom:var(--base-size-16)}.markdown-body .highlight pre{margin-bottom:0;word-break:normal}.markdown-body .highlight pre,.markdown-body pre{padding:var(--base-size-16);overflow:auto;font-size:85%;line-height:1.45;color:var(--fgColor-default);background-color:var(--bgColor-muted);border-radius:6px}.markdown-body pre code,.markdown-body pre tt{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.markdown-body .csv-data td,.markdown-body .csv-data th{padding:5px;overflow:hidden;font-size:12px;line-height:1;text-align:left;white-space:nowrap}.markdown-body .csv-data .blob-num{padding:10px var(--base-size-8) 9px;text-align:right;background:var(--bgColor-default);border:0}.markdown-body .csv-data tr{border-top:0}.markdown-body .csv-data th{font-weight:var(--base-text-weight-semibold, 600);background:var(--bgColor-muted);border-top:0}.markdown-body [data-footnote-ref]:before{content:"["}.markdown-body [data-footnote-ref]:after{content:"]"}.markdown-body .footnotes{font-size:12px;color:var(--fgColor-muted);border-top:1px solid var(--borderColor-default)}.markdown-body .footnotes ol{padding-left:var(--base-size-16)}.markdown-body .footnotes ol ul{display:inline-block;padding-left:var(--base-size-16);margin-top:var(--base-size-16)}.markdown-body .footnotes li{position:relative}.markdown-body .footnotes li:target:before{position:absolute;top:calc(var(--base-size-8)*-1);right:calc(var(--base-size-8)*-1);bottom:calc(var(--base-size-8)*-1);left:calc(var(--base-size-24)*-1);pointer-events:none;content:"";border:2px solid var(--borderColor-accent-emphasis);border-radius:6px}.markdown-body .footnotes li:target{color:var(--fgColor-default)}.markdown-body .footnotes .data-footnote-backref g-emoji{font-family:monospace}.markdown-body body:has(:modal){padding-right:var(--dialog-scrollgutter)!important}.markdown-body .pl-c{color:var(--color-prettylights-syntax-comment)}.markdown-body .pl-c1,.markdown-body .pl-s .pl-v{color:var(--color-prettylights-syntax-constant)}.markdown-body .pl-e,.markdown-body .pl-en{color:var(--color-prettylights-syntax-entity)}.markdown-body .pl-smi,.markdown-body .pl-s .pl-s1{color:var(--color-prettylights-syntax-storage-modifier-import)}.markdown-body .pl-ent{color:var(--color-prettylights-syntax-entity-tag)}.markdown-body .pl-k{color:var(--color-prettylights-syntax-keyword)}.markdown-body .pl-s,.markdown-body .pl-pds,.markdown-body .pl-s .pl-pse .pl-s1,.markdown-body .pl-sr,.markdown-body .pl-sr .pl-cce,.markdown-body .pl-sr .pl-sre,.markdown-body .pl-sr .pl-sra{color:var(--color-prettylights-syntax-string)}.markdown-body .pl-v,.markdown-body .pl-smw{color:var(--color-prettylights-syntax-variable)}.markdown-body .pl-bu{color:var(--color-prettylights-syntax-brackethighlighter-unmatched)}.markdown-body .pl-ii{color:var(--color-prettylights-syntax-invalid-illegal-text);background-color:var(--color-prettylights-syntax-invalid-illegal-bg)}.markdown-body .pl-c2{color:var(--color-prettylights-syntax-carriage-return-text);background-color:var(--color-prettylights-syntax-carriage-return-bg)}.markdown-body .pl-sr .pl-cce{font-weight:700;color:var(--color-prettylights-syntax-string-regexp)}.markdown-body .pl-ml{color:var(--color-prettylights-syntax-markup-list)}.markdown-body .pl-mh,.markdown-body .pl-mh .pl-en,.markdown-body .pl-ms{font-weight:700;color:var(--color-prettylights-syntax-markup-heading)}.markdown-body .pl-mi{font-style:italic;color:var(--color-prettylights-syntax-markup-italic)}.markdown-body .pl-mb{font-weight:700;color:var(--color-prettylights-syntax-markup-bold)}.markdown-body .pl-md{color:var(--color-prettylights-syntax-markup-deleted-text);background-color:var(--color-prettylights-syntax-markup-deleted-bg)}.markdown-body .pl-mi1{color:var(--color-prettylights-syntax-markup-inserted-text);background-color:var(--color-prettylights-syntax-markup-inserted-bg)}.markdown-body .pl-mc{color:var(--color-prettylights-syntax-markup-changed-text);background-color:var(--color-prettylights-syntax-markup-changed-bg)}.markdown-body .pl-mi2{color:var(--color-prettylights-syntax-markup-ignored-text);background-color:var(--color-prettylights-syntax-markup-ignored-bg)}.markdown-body .pl-mdr{font-weight:700;color:var(--color-prettylights-syntax-meta-diff-range)}.markdown-body .pl-ba{color:var(--color-prettylights-syntax-brackethighlighter-angle)}.markdown-body .pl-sg{color:var(--color-prettylights-syntax-sublimelinter-gutter-mark)}.markdown-body .pl-corl{text-decoration:underline;color:var(--color-prettylights-syntax-constant-other-reference-link)}.markdown-body [role=button]:focus:not(:focus-visible),.markdown-body [role=tabpanel][tabindex="0"]:focus:not(:focus-visible),.markdown-body button:focus:not(:focus-visible),.markdown-body summary:focus:not(:focus-visible),.markdown-body a:focus:not(:focus-visible){outline:none;box-shadow:none}.markdown-body [tabindex="0"]:focus:not(:focus-visible),.markdown-body details-dialog:focus:not(:focus-visible){outline:none}.markdown-body g-emoji{display:inline-block;min-width:1ch;font-family:"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-size:1em;font-style:normal!important;font-weight:var(--base-text-weight-normal, 400);line-height:1;vertical-align:-.075em}.markdown-body g-emoji img{width:1em;height:1em}.markdown-body .task-list-item{list-style-type:none}.markdown-body .task-list-item label{font-weight:var(--base-text-weight-normal, 400)}.markdown-body .task-list-item.enabled label{cursor:pointer}.markdown-body .task-list-item+.task-list-item{margin-top:var(--base-size-4)}.markdown-body .task-list-item .handle{display:none}.markdown-body .task-list-item-checkbox{margin:0 .2em .25em -1.4em;vertical-align:middle}.markdown-body ul:dir(rtl) .task-list-item-checkbox{margin:0 -1.6em .25em .2em}.markdown-body ol:dir(rtl) .task-list-item-checkbox{margin:0 -1.6em .25em .2em}.markdown-body .contains-task-list:hover .task-list-item-convert-container,.markdown-body .contains-task-list:focus-within .task-list-item-convert-container{display:block;width:auto;height:24px;overflow:visible;clip:auto}.markdown-body ::-webkit-calendar-picker-indicator{filter:invert(50%)}.markdown-body .markdown-alert{padding:var(--base-size-8) var(--base-size-16);margin-bottom:var(--base-size-16);color:inherit;border-left:.25em solid var(--borderColor-default)}.markdown-body .markdown-alert>:first-child{margin-top:0}.markdown-body .markdown-alert>:last-child{margin-bottom:0}.markdown-body .markdown-alert .markdown-alert-title{display:flex;font-weight:var(--base-text-weight-medium, 500);align-items:center;line-height:1}.markdown-body .markdown-alert.markdown-alert-note{border-left-color:var(--borderColor-accent-emphasis)}.markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title{color:var(--fgColor-accent)}.markdown-body .markdown-alert.markdown-alert-important{border-left-color:var(--borderColor-done-emphasis)}.markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title{color:var(--fgColor-done)}.markdown-body .markdown-alert.markdown-alert-warning{border-left-color:var(--borderColor-attention-emphasis)}.markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title{color:var(--fgColor-attention)}.markdown-body .markdown-alert.markdown-alert-tip{border-left-color:var(--borderColor-success-emphasis)}.markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title{color:var(--fgColor-success)}.markdown-body .markdown-alert.markdown-alert-caution{border-left-color:var(--borderColor-danger-emphasis)}.markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title{color:var(--fgColor-danger)}.markdown-body>*:first-child>.heading-element:first-child{margin-top:0!important}.markdown-body .highlight pre:has(+.zeroclipboard-container){min-height:52px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Lato,sans-serif;font-size:1rem}h1,h2,h3,h4,h5,h6{font-family:Kanit,sans-serif;font-size:2rem}.dark-mode,.dark-mode body{background-color:#7a7d7d;color:#f4faff}.dark-mode .tv-search-results::-webkit-scrollbar-thumb{background-color:#0e131f}.dark-mode .tv-search-results::-webkit-scrollbar-thumb:hover{background-color:#000}.light-mode,.light-mode body{background-color:#e0e1e1;color:#000b14}.light-mode .tv-search-results::-webkit-scrollbar-thumb{background-color:#b9c4df}.light-mode .tv-search-results::-webkit-scrollbar-thumb:hover{background-color:#96a7cf}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background-color:#f1f9f9}::-webkit-scrollbar-thumb{background-color:#b9c4df}::-webkit-scrollbar-thumb:hover{background-color:#96a7cf}@keyframes slideInRight{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(400px)}}.markdown-body{padding:50px 25px;border-radius:8px;color:#fff;font-size:16px}.markdown-body h1,.markdown-body h2,.markdown-body h3{color:#3b82f6}.markdown-body pre{background:#282c34;padding:10px;border-radius:5px;overflow-x:auto}.tv-demo-tabs{display:flex;margin-bottom:10px}.tv-demo-tabs button{border:none;padding:10px 15px;cursor:pointer;font-size:1rem;border-radius:5px 5px 0 0;margin-right:5px}.tv-demo *{box-sizing:border-box;margin:0;padding:0}.tv-demo-content{padding:20px;border:1px solid #4a4a4a;border-radius:0 5px 5px}.tv-demo-content .tv-demo-description{font-size:1.1rem}.tv-demo-content .tv-demo-component-content{display:flex;margin:0 auto;padding:20px;justify-content:center}a,.tv-demo-links-item{text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:3px;cursor:pointer;font-size:1.1rem}.dark-mode .tv-demo-select{background-color:#b9c4df;color:#0e131f;border:1px solid #B9C4DF}.dark-mode .tv-demo-option{background:#b9c4df}.dark-mode .no-background{background-color:#0e131f;color:#b9c4df;box-shadow:0 0 10px #0e131f}.dark-mode .tv-demo-tabs button{background-color:#b9c4df;color:#000b14}.dark-mode .tv-demo-tabs button.active{background:#8598c7;font-weight:700}.dark-mode .tv-demo-tabs button:hover{background:#96a7cf}.light-mode .tv-demo-select{background-color:#0e131f;color:#b9c4df;border:1px solid #0E131F}.light-mode .tv-demo-option{background:#0e131f}.light-mode .no-background{background-color:#b9c4df;color:#0e131f;box-shadow:0 0 10px #b9c4df}.light-mode .tv-demo-tabs button{background-color:#0e131f;color:#f4faff}.light-mode .tv-demo-tabs button.active{background:#000;font-weight:700}.light-mode .tv-demo-tabs button:hover{background:#000}.tv-demo-body{margin:0 auto;min-height:100vh;width:80%}.tv-demo-body.dark-mode{background-color:#0e131f}.tv-demo-body.dark-mode .tv-demo-select{background-color:#b9c4df;color:#0e131f;border:1px solid #B9C4DF}.tv-demo-body.dark-mode .tv-demo-option{background:#b9c4df}.tv-demo-body.dark-mode .tv-demo-copy{background-color:#b9c4df;color:#0e131f;box-shadow:0 0 10px #b9c4df}.tv-demo-body.dark-mode .tv-demo-links-item{color:#b9c4df}.tv-demo-body.light-mode{background-color:#b9c4df}.tv-demo-body.light-mode .tv-demo-select{background-color:#0e131f;color:#b9c4df;border:1px solid #0E131F}.tv-demo-body.light-mode .tv-demo-option{background:#0e131f}.tv-demo-body.light-mode .tv-demo-copy{background-color:#0e131f;color:#b9c4df;box-shadow:0 0 10px #0e131f}.tv-demo-body.light-mode .tv-demo-links-item{color:#0e131f}.tv-demo-body .tv-demo-theme{display:flex;align-items:center;gap:10px;min-height:100%;padding:0 20px;width:100%}.tv-demo-body .tv-demo-links{display:flex;gap:10px;align-content:center;align-items:center}.tv-demo-body .tv-demo-links a{color:inherit}.tv-demo-body .tv-demo-copy{border-radius:8px;font-size:14px;padding:12px 20px;position:fixed;top:20px;right:20px;width:auto;max-width:400px;z-index:9999;display:flex;align-items:center;gap:10px;font-weight:500;box-shadow:0 4px 12px #00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);animation:slideInRight .3s ease-out,fadeOut .3s ease-in 1.7s forwards}.tv-demo-body .tv-demo-copy:before{content:"✓";display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#22c55e33;color:#22c55e;font-weight:700;font-size:16px}.tv-demo-body .tv-demo-header{padding:40px 0;display:flex;justify-content:space-between}.tv-demo-body .tv-demo-case{padding:0 20px 20px;position:relative}.tv-demo-body .tv-demo-case-demo .demo{margin-bottom:20px}.tv-demo-body .tv-demo-case-demo h3{font-size:22px;padding-top:20px}.tv-demo-body .tv-demo-case-demo h1{font-size:2.2rem;font-weight:700}.tv-demo-body .tv-demo-case-demo h1 span{font-size:1rem;font-weight:300}.tv-demo-body .tv-demo-select{border-radius:4px;cursor:pointer;font-size:16px;height:40px;margin-bottom:20px;margin-top:5px;padding:0 10px;width:100%}.tv-demo-body .tv-demo-select-theme{width:150px}.tv-demo-body .tv-demo-option{font-size:16px}.tv-demo-body .tv-demo-component{align-items:center;display:flex;height:100%;justify-content:center;margin-top:5px;width:100%}.tv-demo-body .tv-demo-no-component{color:inherit;font-size:1.5rem;font-weight:500;text-align:center}.tv-demo-body .tv-demo-code{margin-top:5px;width:100%!important;height:auto!important;padding:20px 0}.tv-demo-footer{padding:10px 0;border-top:1px solid rgba(255,255,255,.08);text-align:center;font-family:inherit;opacity:.85;transition:opacity .2s ease-in-out}.tv-demo-footer:hover{opacity:1}.tv-demo-footer-text{font-size:.95rem;color:#000b14;display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}.tv-demo-footer-link{color:#0e131f;text-decoration:underline;display:inline-flex;align-items:center;gap:4px;font-weight:600;transition:color .25s ease-in-out}.tv-demo-footer-link:hover{color:var(--tv-primary-hover, #a4c8ff)}.tv-demo-footer-icon{width:16px;height:16px}.tv-demo-footer-heart{font-size:1.1rem;margin-left:3px;animation:pulse 1.8s infinite ease-in-out}@keyframes pulse{0%,to{transform:scale(1);opacity:.75}50%{transform:scale(1.25);opacity:1}}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#2196f3}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}@media(max-width:768px){.tv-demo-case{padding:10px!important}.tv-demo-body{width:90%}.tv-demo-header{flex-direction:column;align-items:flex-start;gap:10px;padding:0}.tv-demo-header .tv-demo-theme{width:100%;padding-left:0;padding-right:0}.tv-demo-header .tv-demo-select-theme{width:100%}}@media(max-width:640px){.tv-demo-case{padding:0!important}.tv-demo-body{width:100%}}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#272822;color:#ddd}.hljs-tag,.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-strong,.hljs-number,.hljs-name{color:#f92672}.hljs-code{color:#66d9ef}.hljs-attribute,.hljs-attr,.hljs-symbol,.hljs-regexp,.hljs-link{color:#bf79db}.hljs-string,.hljs-bullet,.hljs-subst,.hljs-title,.hljs-section,.hljs-emphasis,.hljs-type,.hljs-built_in,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-addition,.hljs-variable,.hljs-template-tag,.hljs-template-variable{color:#a6e22e}.hljs-title.class_,.hljs-class .hljs-title{color:#fff}.hljs-comment,.hljs-quote,.hljs-deletion,.hljs-meta{color:#75715e}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-doctag,.hljs-title,.hljs-section,.hljs-type,.hljs-selector-id{font-weight:700}.cb[data-v-3c0bc7c1]{position:absolute;cursor:pointer;transition:.3s opacity linear;opacity:.5;height:30px;width:80px;right:0}.cb:hover .cb_tooltip[data-v-3c0bc7c1]{display:block}.cb[data-v-3c0bc7c1]:hover{opacity:1}.cb_tooltip[data-v-3c0bc7c1]{font-family:sans-serif;display:none;position:absolute;left:-96px;font-size:12px;color:#fff;width:80px;height:30px;line-height:30px;background:#000c;box-sizing:border-box;text-align:center;border-radius:4px}.cb_copy[data-v-3c0bc7c1]{position:absolute;font-family:sans-serif;display:block;font-size:12px;color:#fff;width:80px;height:30px;line-height:30px;background:#000c;box-sizing:border-box;text-align:center;border-radius:4px}.cb textarea[data-v-3c0bc7c1]{-webkit-user-select:none;user-select:none;position:absolute;padding:0;width:0;height:0;background:transparent;resize:none;opacity:0;border-color:#0000}.TL[data-v-b98f7724]{display:flex;align-items:center;justify-content:center;width:40px;height:30px;position:relative}.TL_word[data-v-b98f7724]{width:20px;height:20px;text-align:center;color:#aaa;font-size:16px}.code[data-v-f4a493be]{display:flex;flex-direction:column;font-size:0;position:relative;text-align:left;overflow:hidden}.code_header[data-v-f4a493be]{min-height:14px;position:relative}.code_area[data-v-f4a493be]{position:relative;overflow:hidden;padding-left:20px;margin:auto 0;display:flex}.code_area textarea[data-v-f4a493be]{overflow-y:hidden;box-sizing:border-box;caret-color:#7f7f7f;-webkit-text-fill-color:transparent;white-space:pre;word-wrap:normal;border:0;position:absolute;z-index:1000;top:0;left:0;width:100%;height:100%;background:none;border:none;outline:none;resize:none;padding:0 20px 20px;line-height:1.3;overflow:overlay;font-family:Consolas,Monaco,monospace}.code_area textarea[data-v-f4a493be]::-webkit-scrollbar-track{background-color:#eee}.code_area textarea[data-v-f4a493be]::-webkit-scrollbar-thumb{background:#afabab}.code_area textarea[data-v-f4a493be]::-webkit-scrollbar{width:8px;height:8px}.code_area textarea[data-v-f4a493be]::-webkit-scrollbar-corner{background-color:#eee}.code_area_link[data-v-f4a493be]{position:absolute}.code_area.change_hight[data-v-f4a493be]{height:calc(100% - 30px)}.code_area.srollbar_style[data-v-f4a493be]::-webkit-scrollbar-track{background-color:#eee}.code_area.srollbar_style[data-v-f4a493be]::-webkit-scrollbar-thumb{background:#afabab}.code_area.srollbar_style[data-v-f4a493be]::-webkit-scrollbar{width:8px;height:8px}.code_area.srollbar_style[data-v-f4a493be]::-webkit-scrollbar-corner{background-color:#eee}.code_area pre[data-v-f4a493be]{position:relative;margin:0;height:100%;overflow:hidden}.code_header[data-v-f4a493be]{position:relative;display:flex;justify-content:flex-start;width:100%}.code pre code[data-v-f4a493be]{font-family:Consolas,Monaco,monospace;line-height:1.3;position:relative;overflow-x:visible;border-radius:0;box-sizing:border-box;display:block;border:none;margin:0}.wrapper-content[data-v-f4a493be]::-webkit-scrollbar-track{background-color:#eee;border-radius:5px}.wrapper-content[data-v-f4a493be]::-webkit-scrollbar-thumb{background:#afabab;border-radius:5px}.wrapper-content[data-v-f4a493be]::-webkit-scrollbar{width:6px}.code_area_lines[data-v-f4a493be]{display:flex;flex-direction:column;width:10px;align-items:center;position:absolute;transform:translate(-18px)}.code_area_lines_item[data-v-f4a493be]{height:24px;width:10px;font-size:12px;color:#adb5bd;text-align:center;display:flex;justify-content:center;align-items:center;opacity:.6}.code_area_lines_item.dark[data-v-f4a493be]{color:#adb5bd}.code_area_lines_item.light[data-v-f4a493be]{color:#212529}.atom_one_dark.hljs,.atom_one_dark .hljs{color:#abb2bf;background:#282c34}.atom_one_dark .hljs-comment,.atom_one_dark .hljs-quote{color:#5c6370;font-style:italic}.atom_one_dark .hljs-doctag,.atom_one_dark .hljs-keyword,.atom_one_dark .hljs-formula{color:#c678dd}.atom_one_dark .hljs-section,.atom_one_dark .hljs-name,.atom_one_dark .hljs-selector-tag,.atom_one_dark .hljs-deletion,.atom_one_dark .hljs-subst{color:#e06c75}.atom_one_dark .hljs-literal{color:#56b6c2}.atom_one_dark .hljs-string,.atom_one_dark .hljs-regexp,.atom_one_dark .hljs-addition,.atom_one_dark .hljs-attribute,.atom_one_dark .hljs-meta .hljs-string{color:#98c379}.atom_one_dark .hljs-attr,.atom_one_dark .hljs-variable,.atom_one_dark .hljs-template-variable,.atom_one_dark .hljs-type,.atom_one_dark .hljs-selector-class,.atom_one_dark .hljs-selector-attr,.atom_one_dark .hljs-selector-pseudo,.atom_one_dark .hljs-number{color:#d19a66}.atom_one_dark .hljs-symbol,.atom_one_dark .hljs-bullet,.atom_one_dark .hljs-link,.atom_one_dark .hljs-meta,.atom_one_dark .hljs-selector-id,.atom_one_dark .hljs-title{color:#61aeee}.atom_one_dark .hljs-built_in,.atom_one_dark .hljs-title .class_,.atom_one_dark .hljs-class .hljs-title{color:#e6c07b}.atom_one_dark .hljs-emphasis{font-style:italic}.atom_one_dark .hljs-strong{font-weight:700}.atom_one_dark .hljs-link{text-decoration:underline}.atom_one_light.hljs,.atom_one_light .hljs{color:#383a42;background:#edf2f4}.atom_one_light .hljs-comment,.atom_one_light .hljs-quote{color:#a0a1a7;font-style:italic}.atom_one_light .hljs-doctag,.atom_one_light .hljs-keyword,.atom_one_light .hljs-formula{color:#a626a4}.atom_one_light .hljs-section,.atom_one_light .hljs-name,.atom_one_light .hljs-selector-tag,.atom_one_light .hljs-deletion,.atom_one_light .hljs-subst{color:#e45649}.atom_one_light .hljs-literal{color:#0184bb}.atom_one_light .hljs-string,.atom_one_light .hljs-regexp,.atom_one_light .hljs-addition,.atom_one_light .hljs-attribute,.atom_one_light .hljs-meta .hljs-string{color:#50a14f}.atom_one_light .hljs-attr,.atom_one_light .hljs-variable,.atom_one_light .hljs-template-variable,.atom_one_light .hljs-type,.atom_one_light .hljs-selector-class,.atom_one_light .hljs-selector-attr,.atom_one_light .hljs-selector-pseudo,.atom_one_light .hljs-number{color:#986801}.atom_one_light .hljs-symbol,.atom_one_light .hljs-bullet,.atom_one_light .hljs-link,.atom_one_light .hljs-meta,.atom_one_light .hljs-selector-id,.atom_one_light .hljs-title{color:#4078f2}.atom_one_light .hljs-built_in,.atom_one_light .hljs-title .class_,.atom_one_light .hljs-class .hljs-title{color:#c18401}.atom_one_light .hljs-emphasis{font-style:italic}.atom_one_light .hljs-strong{font-weight:700}.atom_one_light .hljs-link{text-decoration:underline}
+@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Kanit:wght@600&family=Lato:wght@300&display=swap";.markdown-body{--base-size-4: .25rem;--base-size-8: .5rem;--base-size-16: 1rem;--base-size-24: 1.5rem;--base-size-40: 2.5rem;--base-text-weight-normal: 400;--base-text-weight-medium: 500;--base-text-weight-semibold: 600;--fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;--fgColor-accent: Highlight}@media(prefers-color-scheme:dark){.markdown-body,[data-theme=dark]{color-scheme:dark;--focus-outlineColor: #1f6feb;--fgColor-default: #f0f6fc;--fgColor-muted: #9198a1;--fgColor-accent: #4493f8;--fgColor-success: #3fb950;--fgColor-attention: #d29922;--fgColor-danger: #f85149;--fgColor-done: #ab7df8;--bgColor-default: #0d1117;--bgColor-muted: #151b23;--bgColor-neutral-muted: #656c7633;--bgColor-attention-muted: #bb800926;--borderColor-default: #3d444d;--borderColor-muted: #3d444db3;--borderColor-neutral-muted: #3d444db3;--borderColor-accent-emphasis: #1f6feb;--borderColor-success-emphasis: #238636;--borderColor-attention-emphasis: #9e6a03;--borderColor-danger-emphasis: #da3633;--borderColor-done-emphasis: #8957e5;--color-prettylights-syntax-comment: #9198a1;--color-prettylights-syntax-constant: #79c0ff;--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;--color-prettylights-syntax-entity: #d2a8ff;--color-prettylights-syntax-storage-modifier-import: #f0f6fc;--color-prettylights-syntax-entity-tag: #7ee787;--color-prettylights-syntax-keyword: #ff7b72;--color-prettylights-syntax-string: #a5d6ff;--color-prettylights-syntax-variable: #ffa657;--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;--color-prettylights-syntax-brackethighlighter-angle: #9198a1;--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;--color-prettylights-syntax-invalid-illegal-bg: #8e1519;--color-prettylights-syntax-carriage-return-text: #f0f6fc;--color-prettylights-syntax-carriage-return-bg: #b62324;--color-prettylights-syntax-string-regexp: #7ee787;--color-prettylights-syntax-markup-list: #f2cc60;--color-prettylights-syntax-markup-heading: #1f6feb;--color-prettylights-syntax-markup-italic: #f0f6fc;--color-prettylights-syntax-markup-bold: #f0f6fc;--color-prettylights-syntax-markup-deleted-text: #ffdcd7;--color-prettylights-syntax-markup-deleted-bg: #67060c;--color-prettylights-syntax-markup-inserted-text: #aff5b4;--color-prettylights-syntax-markup-inserted-bg: #033a16;--color-prettylights-syntax-markup-changed-text: #ffdfb6;--color-prettylights-syntax-markup-changed-bg: #5a1e02;--color-prettylights-syntax-markup-ignored-text: #f0f6fc;--color-prettylights-syntax-markup-ignored-bg: #1158c7;--color-prettylights-syntax-meta-diff-range: #d2a8ff;--color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d}}@media(prefers-color-scheme:light){.markdown-body,[data-theme=light]{color-scheme:light;--focus-outlineColor: #0969da;--fgColor-default: #1f2328;--fgColor-muted: #59636e;--fgColor-accent: #0969da;--fgColor-success: #1a7f37;--fgColor-attention: #9a6700;--fgColor-danger: #d1242f;--fgColor-done: #8250df;--bgColor-default: #ffffff;--bgColor-muted: #f6f8fa;--bgColor-neutral-muted: #818b981f;--bgColor-attention-muted: #fff8c5;--borderColor-default: #d1d9e0;--borderColor-muted: #d1d9e0b3;--borderColor-neutral-muted: #d1d9e0b3;--borderColor-accent-emphasis: #0969da;--borderColor-success-emphasis: #1a7f37;--borderColor-attention-emphasis: #9a6700;--borderColor-danger-emphasis: #cf222e;--borderColor-done-emphasis: #8250df;--color-prettylights-syntax-comment: #59636e;--color-prettylights-syntax-constant: #0550ae;--color-prettylights-syntax-constant-other-reference-link: #0a3069;--color-prettylights-syntax-entity: #6639ba;--color-prettylights-syntax-storage-modifier-import: #1f2328;--color-prettylights-syntax-entity-tag: #0550ae;--color-prettylights-syntax-keyword: #cf222e;--color-prettylights-syntax-string: #0a3069;--color-prettylights-syntax-variable: #953800;--color-prettylights-syntax-brackethighlighter-unmatched: #82071e;--color-prettylights-syntax-brackethighlighter-angle: #59636e;--color-prettylights-syntax-invalid-illegal-text: #f6f8fa;--color-prettylights-syntax-invalid-illegal-bg: #82071e;--color-prettylights-syntax-carriage-return-text: #f6f8fa;--color-prettylights-syntax-carriage-return-bg: #cf222e;--color-prettylights-syntax-string-regexp: #116329;--color-prettylights-syntax-markup-list: #3b2300;--color-prettylights-syntax-markup-heading: #0550ae;--color-prettylights-syntax-markup-italic: #1f2328;--color-prettylights-syntax-markup-bold: #1f2328;--color-prettylights-syntax-markup-deleted-text: #82071e;--color-prettylights-syntax-markup-deleted-bg: #ffebe9;--color-prettylights-syntax-markup-inserted-text: #116329;--color-prettylights-syntax-markup-inserted-bg: #dafbe1;--color-prettylights-syntax-markup-changed-text: #953800;--color-prettylights-syntax-markup-changed-bg: #ffd8b5;--color-prettylights-syntax-markup-ignored-text: #d1d9e0;--color-prettylights-syntax-markup-ignored-bg: #0550ae;--color-prettylights-syntax-meta-diff-range: #8250df;--color-prettylights-syntax-sublimelinter-gutter-mark: #818b98}}.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0;color:var(--fgColor-default);background-color:var(--bgColor-default);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";font-size:16px;line-height:1.5;word-wrap:break-word}.markdown-body .octicon{display:inline-block;fill:currentColor;vertical-align:text-bottom}.markdown-body h1:hover .anchor .octicon-link:before,.markdown-body h2:hover .anchor .octicon-link:before,.markdown-body h3:hover .anchor .octicon-link:before,.markdown-body h4:hover .anchor .octicon-link:before,.markdown-body h5:hover .anchor .octicon-link:before,.markdown-body h6:hover .anchor .octicon-link:before{width:16px;height:16px;content:" ";display:inline-block;background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>")}.markdown-body details,.markdown-body figcaption,.markdown-body figure{display:block}.markdown-body summary{display:list-item}.markdown-body [hidden]{display:none!important}.markdown-body a{background-color:transparent;color:var(--fgColor-accent);text-decoration:none}.markdown-body abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.markdown-body b,.markdown-body strong{font-weight:var(--base-text-weight-semibold, 600)}.markdown-body dfn{font-style:italic}.markdown-body h1{margin:.67em 0;font-weight:var(--base-text-weight-semibold, 600);padding-bottom:.3em;font-size:2em;border-bottom:1px solid var(--borderColor-muted)}.markdown-body mark{background-color:var(--bgColor-attention-muted);color:var(--fgColor-default)}.markdown-body small{font-size:90%}.markdown-body sub,.markdown-body sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.markdown-body sub{bottom:-.25em}.markdown-body sup{top:-.5em}.markdown-body img{border-style:none;max-width:100%;box-sizing:content-box}.markdown-body code,.markdown-body kbd,.markdown-body pre,.markdown-body samp{font-family:monospace;font-size:1em}.markdown-body figure{margin:1em var(--base-size-40)}.markdown-body hr{box-sizing:content-box;overflow:hidden;background:transparent;border-bottom:1px solid var(--borderColor-muted);height:.25em;padding:0;margin:var(--base-size-24) 0;background-color:var(--borderColor-default);border:0}.markdown-body input{font:inherit;margin:0;overflow:visible;font-family:inherit;font-size:inherit;line-height:inherit}.markdown-body [type=button],.markdown-body [type=reset],.markdown-body [type=submit]{-webkit-appearance:button;appearance:button}.markdown-body [type=checkbox],.markdown-body [type=radio]{box-sizing:border-box;padding:0}.markdown-body [type=number]::-webkit-inner-spin-button,.markdown-body [type=number]::-webkit-outer-spin-button{height:auto}.markdown-body [type=search]::-webkit-search-cancel-button,.markdown-body [type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.markdown-body ::-webkit-input-placeholder{color:inherit;opacity:.54}.markdown-body ::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}.markdown-body a:hover{text-decoration:underline}.markdown-body ::placeholder{color:var(--fgColor-muted);opacity:1}.markdown-body hr:before{display:table;content:""}.markdown-body hr:after{display:table;clear:both;content:""}.markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;font-variant:tabular-nums}.markdown-body td,.markdown-body th{padding:0}.markdown-body details summary{cursor:pointer}.markdown-body a:focus,.markdown-body [role=button]:focus,.markdown-body input[type=radio]:focus,.markdown-body input[type=checkbox]:focus{outline:2px solid var(--focus-outlineColor);outline-offset:-2px;box-shadow:none}.markdown-body a:focus:not(:focus-visible),.markdown-body [role=button]:focus:not(:focus-visible),.markdown-body input[type=radio]:focus:not(:focus-visible),.markdown-body input[type=checkbox]:focus:not(:focus-visible){outline:solid 1px transparent}.markdown-body a:focus-visible,.markdown-body [role=button]:focus-visible,.markdown-body input[type=radio]:focus-visible,.markdown-body input[type=checkbox]:focus-visible{outline:2px solid var(--focus-outlineColor);outline-offset:-2px;box-shadow:none}.markdown-body a:not([class]):focus,.markdown-body a:not([class]):focus-visible,.markdown-body input[type=radio]:focus,.markdown-body input[type=radio]:focus-visible,.markdown-body input[type=checkbox]:focus,.markdown-body input[type=checkbox]:focus-visible{outline-offset:0}.markdown-body kbd{display:inline-block;padding:var(--base-size-4);font:11px var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);line-height:10px;color:var(--fgColor-default);vertical-align:middle;background-color:var(--bgColor-muted);border:solid 1px var(--borderColor-neutral-muted);border-bottom-color:var(--borderColor-neutral-muted);border-radius:6px;box-shadow:inset 0 -1px 0 var(--borderColor-neutral-muted)}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin-top:var(--base-size-24);margin-bottom:var(--base-size-16);font-weight:var(--base-text-weight-semibold, 600);line-height:1.25}.markdown-body h2{font-weight:var(--base-text-weight-semibold, 600);padding-bottom:.3em;font-size:1.5em;border-bottom:1px solid var(--borderColor-muted)}.markdown-body h3{font-weight:var(--base-text-weight-semibold, 600);font-size:1.25em}.markdown-body h4{font-weight:var(--base-text-weight-semibold, 600);font-size:1em}.markdown-body h5{font-weight:var(--base-text-weight-semibold, 600);font-size:.875em}.markdown-body h6{font-weight:var(--base-text-weight-semibold, 600);font-size:.85em;color:var(--fgColor-muted)}.markdown-body p{margin-top:0;margin-bottom:10px}.markdown-body blockquote{margin:0;padding:0 1em;color:var(--fgColor-muted);border-left:.25em solid var(--borderColor-default)}.markdown-body ul,.markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ul ul ol,.markdown-body ul ol ol,.markdown-body ol ul ol,.markdown-body ol ol ol{list-style-type:lower-alpha}.markdown-body dd{margin-left:0}.markdown-body tt,.markdown-body code,.markdown-body samp{font-family:var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);font-size:12px}.markdown-body pre{margin-top:0;margin-bottom:0;font-family:var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);font-size:12px;word-wrap:normal}.markdown-body .octicon{display:inline-block;overflow:visible!important;vertical-align:text-bottom;fill:currentColor}.markdown-body input::-webkit-outer-spin-button,.markdown-body input::-webkit-inner-spin-button{margin:0;appearance:none}.markdown-body .mr-2{margin-right:var(--base-size-8, 8px)!important}.markdown-body:before{display:table;content:""}.markdown-body:after{display:table;clear:both;content:""}.markdown-body>*:first-child{margin-top:0!important}.markdown-body>*:last-child{margin-bottom:0!important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body .absent{color:var(--fgColor-danger)}.markdown-body .anchor{float:left;padding-right:var(--base-size-4);margin-left:-20px;line-height:1}.markdown-body .anchor:focus{outline:none}.markdown-body p,.markdown-body blockquote,.markdown-body ul,.markdown-body ol,.markdown-body dl,.markdown-body table,.markdown-body pre,.markdown-body details{margin-top:0;margin-bottom:var(--base-size-16)}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body h1 .octicon-link,.markdown-body h2 .octicon-link,.markdown-body h3 .octicon-link,.markdown-body h4 .octicon-link,.markdown-body h5 .octicon-link,.markdown-body h6 .octicon-link{color:var(--fgColor-default);vertical-align:middle;visibility:hidden}.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{text-decoration:none}.markdown-body h1:hover .anchor .octicon-link,.markdown-body h2:hover .anchor .octicon-link,.markdown-body h3:hover .anchor .octicon-link,.markdown-body h4:hover .anchor .octicon-link,.markdown-body h5:hover .anchor .octicon-link,.markdown-body h6:hover .anchor .octicon-link{visibility:visible}.markdown-body h1 tt,.markdown-body h1 code,.markdown-body h2 tt,.markdown-body h2 code,.markdown-body h3 tt,.markdown-body h3 code,.markdown-body h4 tt,.markdown-body h4 code,.markdown-body h5 tt,.markdown-body h5 code,.markdown-body h6 tt,.markdown-body h6 code{padding:0 .2em;font-size:inherit}.markdown-body summary h1,.markdown-body summary h2,.markdown-body summary h3,.markdown-body summary h4,.markdown-body summary h5,.markdown-body summary h6{display:inline-block}.markdown-body summary h1 .anchor,.markdown-body summary h2 .anchor,.markdown-body summary h3 .anchor,.markdown-body summary h4 .anchor,.markdown-body summary h5 .anchor,.markdown-body summary h6 .anchor{margin-left:-40px}.markdown-body summary h1,.markdown-body summary h2{padding-bottom:0;border-bottom:0}.markdown-body ul.no-list,.markdown-body ol.no-list{padding:0;list-style-type:none}.markdown-body ol[type="a s"]{list-style-type:lower-alpha}.markdown-body ol[type="A s"]{list-style-type:upper-alpha}.markdown-body ol[type="i s"]{list-style-type:lower-roman}.markdown-body ol[type="I s"]{list-style-type:upper-roman}.markdown-body ol[type="1"]{list-style-type:decimal}.markdown-body div>ol:not([type]){list-style-type:decimal}.markdown-body ul ul,.markdown-body ul ol,.markdown-body ol ol,.markdown-body ol ul{margin-top:0;margin-bottom:0}.markdown-body li>p{margin-top:var(--base-size-16)}.markdown-body li+li{margin-top:.25em}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:var(--base-size-16);font-size:1em;font-style:italic;font-weight:var(--base-text-weight-semibold, 600)}.markdown-body dl dd{padding:0 var(--base-size-16);margin-bottom:var(--base-size-16)}.markdown-body table th{font-weight:var(--base-text-weight-semibold, 600)}.markdown-body table th,.markdown-body table td{padding:6px 13px;border:1px solid var(--borderColor-default)}.markdown-body table td>:last-child{margin-bottom:0}.markdown-body table tr{background-color:var(--bgColor-default);border-top:1px solid var(--borderColor-muted)}.markdown-body table tr:nth-child(2n){background-color:var(--bgColor-muted)}.markdown-body table img{background-color:transparent}.markdown-body img[align=right]{padding-left:20px}.markdown-body img[align=left]{padding-right:20px}.markdown-body .emoji{max-width:none;vertical-align:text-top;background-color:transparent}.markdown-body span.frame{display:block;overflow:hidden}.markdown-body span.frame>span{display:block;float:left;width:auto;padding:7px;margin:13px 0 0;overflow:hidden;border:1px solid var(--borderColor-default)}.markdown-body span.frame span img{display:block;float:left}.markdown-body span.frame span span{display:block;padding:5px 0 0;clear:both;color:var(--fgColor-default)}.markdown-body span.align-center{display:block;overflow:hidden;clear:both}.markdown-body span.align-center>span{display:block;margin:13px auto 0;overflow:hidden;text-align:center}.markdown-body span.align-center span img{margin:0 auto;text-align:center}.markdown-body span.align-right{display:block;overflow:hidden;clear:both}.markdown-body span.align-right>span{display:block;margin:13px 0 0;overflow:hidden;text-align:right}.markdown-body span.align-right span img{margin:0;text-align:right}.markdown-body span.float-left{display:block;float:left;margin-right:13px;overflow:hidden}.markdown-body span.float-left span{margin:13px 0 0}.markdown-body span.float-right{display:block;float:right;margin-left:13px;overflow:hidden}.markdown-body span.float-right>span{display:block;margin:13px auto 0;overflow:hidden;text-align:right}.markdown-body code,.markdown-body tt{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;background-color:var(--bgColor-neutral-muted);border-radius:6px}.markdown-body code br,.markdown-body tt br{display:none}.markdown-body del code{text-decoration:inherit}.markdown-body samp{font-size:85%}.markdown-body pre code{font-size:100%}.markdown-body pre>code{padding:0;margin:0;word-break:normal;white-space:pre;background:transparent;border:0}.markdown-body .highlight{margin-bottom:var(--base-size-16)}.markdown-body .highlight pre{margin-bottom:0;word-break:normal}.markdown-body .highlight pre,.markdown-body pre{padding:var(--base-size-16);overflow:auto;font-size:85%;line-height:1.45;color:var(--fgColor-default);background-color:var(--bgColor-muted);border-radius:6px}.markdown-body pre code,.markdown-body pre tt{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.markdown-body .csv-data td,.markdown-body .csv-data th{padding:5px;overflow:hidden;font-size:12px;line-height:1;text-align:left;white-space:nowrap}.markdown-body .csv-data .blob-num{padding:10px var(--base-size-8) 9px;text-align:right;background:var(--bgColor-default);border:0}.markdown-body .csv-data tr{border-top:0}.markdown-body .csv-data th{font-weight:var(--base-text-weight-semibold, 600);background:var(--bgColor-muted);border-top:0}.markdown-body [data-footnote-ref]:before{content:"["}.markdown-body [data-footnote-ref]:after{content:"]"}.markdown-body .footnotes{font-size:12px;color:var(--fgColor-muted);border-top:1px solid var(--borderColor-default)}.markdown-body .footnotes ol{padding-left:var(--base-size-16)}.markdown-body .footnotes ol ul{display:inline-block;padding-left:var(--base-size-16);margin-top:var(--base-size-16)}.markdown-body .footnotes li{position:relative}.markdown-body .footnotes li:target:before{position:absolute;top:calc(var(--base-size-8)*-1);right:calc(var(--base-size-8)*-1);bottom:calc(var(--base-size-8)*-1);left:calc(var(--base-size-24)*-1);pointer-events:none;content:"";border:2px solid var(--borderColor-accent-emphasis);border-radius:6px}.markdown-body .footnotes li:target{color:var(--fgColor-default)}.markdown-body .footnotes .data-footnote-backref g-emoji{font-family:monospace}.markdown-body body:has(:modal){padding-right:var(--dialog-scrollgutter)!important}.markdown-body .pl-c{color:var(--color-prettylights-syntax-comment)}.markdown-body .pl-c1,.markdown-body .pl-s .pl-v{color:var(--color-prettylights-syntax-constant)}.markdown-body .pl-e,.markdown-body .pl-en{color:var(--color-prettylights-syntax-entity)}.markdown-body .pl-smi,.markdown-body .pl-s .pl-s1{color:var(--color-prettylights-syntax-storage-modifier-import)}.markdown-body .pl-ent{color:var(--color-prettylights-syntax-entity-tag)}.markdown-body .pl-k{color:var(--color-prettylights-syntax-keyword)}.markdown-body .pl-s,.markdown-body .pl-pds,.markdown-body .pl-s .pl-pse .pl-s1,.markdown-body .pl-sr,.markdown-body .pl-sr .pl-cce,.markdown-body .pl-sr .pl-sre,.markdown-body .pl-sr .pl-sra{color:var(--color-prettylights-syntax-string)}.markdown-body .pl-v,.markdown-body .pl-smw{color:var(--color-prettylights-syntax-variable)}.markdown-body .pl-bu{color:var(--color-prettylights-syntax-brackethighlighter-unmatched)}.markdown-body .pl-ii{color:var(--color-prettylights-syntax-invalid-illegal-text);background-color:var(--color-prettylights-syntax-invalid-illegal-bg)}.markdown-body .pl-c2{color:var(--color-prettylights-syntax-carriage-return-text);background-color:var(--color-prettylights-syntax-carriage-return-bg)}.markdown-body .pl-sr .pl-cce{font-weight:700;color:var(--color-prettylights-syntax-string-regexp)}.markdown-body .pl-ml{color:var(--color-prettylights-syntax-markup-list)}.markdown-body .pl-mh,.markdown-body .pl-mh .pl-en,.markdown-body .pl-ms{font-weight:700;color:var(--color-prettylights-syntax-markup-heading)}.markdown-body .pl-mi{font-style:italic;color:var(--color-prettylights-syntax-markup-italic)}.markdown-body .pl-mb{font-weight:700;color:var(--color-prettylights-syntax-markup-bold)}.markdown-body .pl-md{color:var(--color-prettylights-syntax-markup-deleted-text);background-color:var(--color-prettylights-syntax-markup-deleted-bg)}.markdown-body .pl-mi1{color:var(--color-prettylights-syntax-markup-inserted-text);background-color:var(--color-prettylights-syntax-markup-inserted-bg)}.markdown-body .pl-mc{color:var(--color-prettylights-syntax-markup-changed-text);background-color:var(--color-prettylights-syntax-markup-changed-bg)}.markdown-body .pl-mi2{color:var(--color-prettylights-syntax-markup-ignored-text);background-color:var(--color-prettylights-syntax-markup-ignored-bg)}.markdown-body .pl-mdr{font-weight:700;color:var(--color-prettylights-syntax-meta-diff-range)}.markdown-body .pl-ba{color:var(--color-prettylights-syntax-brackethighlighter-angle)}.markdown-body .pl-sg{color:var(--color-prettylights-syntax-sublimelinter-gutter-mark)}.markdown-body .pl-corl{text-decoration:underline;color:var(--color-prettylights-syntax-constant-other-reference-link)}.markdown-body [role=button]:focus:not(:focus-visible),.markdown-body [role=tabpanel][tabindex="0"]:focus:not(:focus-visible),.markdown-body button:focus:not(:focus-visible),.markdown-body summary:focus:not(:focus-visible),.markdown-body a:focus:not(:focus-visible){outline:none;box-shadow:none}.markdown-body [tabindex="0"]:focus:not(:focus-visible),.markdown-body details-dialog:focus:not(:focus-visible){outline:none}.markdown-body g-emoji{display:inline-block;min-width:1ch;font-family:"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-size:1em;font-style:normal!important;font-weight:var(--base-text-weight-normal, 400);line-height:1;vertical-align:-.075em}.markdown-body g-emoji img{width:1em;height:1em}.markdown-body .task-list-item{list-style-type:none}.markdown-body .task-list-item label{font-weight:var(--base-text-weight-normal, 400)}.markdown-body .task-list-item.enabled label{cursor:pointer}.markdown-body .task-list-item+.task-list-item{margin-top:var(--base-size-4)}.markdown-body .task-list-item .handle{display:none}.markdown-body .task-list-item-checkbox{margin:0 .2em .25em -1.4em;vertical-align:middle}.markdown-body ul:dir(rtl) .task-list-item-checkbox{margin:0 -1.6em .25em .2em}.markdown-body ol:dir(rtl) .task-list-item-checkbox{margin:0 -1.6em .25em .2em}.markdown-body .contains-task-list:hover .task-list-item-convert-container,.markdown-body .contains-task-list:focus-within .task-list-item-convert-container{display:block;width:auto;height:24px;overflow:visible;clip:auto}.markdown-body ::-webkit-calendar-picker-indicator{filter:invert(50%)}.markdown-body .markdown-alert{padding:var(--base-size-8) var(--base-size-16);margin-bottom:var(--base-size-16);color:inherit;border-left:.25em solid var(--borderColor-default)}.markdown-body .markdown-alert>:first-child{margin-top:0}.markdown-body .markdown-alert>:last-child{margin-bottom:0}.markdown-body .markdown-alert .markdown-alert-title{display:flex;font-weight:var(--base-text-weight-medium, 500);align-items:center;line-height:1}.markdown-body .markdown-alert.markdown-alert-note{border-left-color:var(--borderColor-accent-emphasis)}.markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title{color:var(--fgColor-accent)}.markdown-body .markdown-alert.markdown-alert-important{border-left-color:var(--borderColor-done-emphasis)}.markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title{color:var(--fgColor-done)}.markdown-body .markdown-alert.markdown-alert-warning{border-left-color:var(--borderColor-attention-emphasis)}.markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title{color:var(--fgColor-attention)}.markdown-body .markdown-alert.markdown-alert-tip{border-left-color:var(--borderColor-success-emphasis)}.markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title{color:var(--fgColor-success)}.markdown-body .markdown-alert.markdown-alert-caution{border-left-color:var(--borderColor-danger-emphasis)}.markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title{color:var(--fgColor-danger)}.markdown-body>*:first-child>.heading-element:first-child{margin-top:0!important}.markdown-body .highlight pre:has(+.zeroclipboard-container){min-height:52px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Lato,sans-serif;font-size:1rem}h1,h2,h3,h4,h5,h6{font-family:Kanit,sans-serif;font-size:2rem}.dark-mode,.dark-mode body{background-color:#7a7d7d;color:#f4faff}.dark-mode .tv-search-results::-webkit-scrollbar-thumb{background-color:#0e131f}.dark-mode .tv-search-results::-webkit-scrollbar-thumb:hover{background-color:#000}.light-mode,.light-mode body{background-color:#e0e1e1;color:#000b14}.light-mode .tv-search-results::-webkit-scrollbar-thumb{background-color:#b9c4df}.light-mode .tv-search-results::-webkit-scrollbar-thumb:hover{background-color:#96a7cf}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background-color:#f1f9f9}::-webkit-scrollbar-thumb{background-color:#b9c4df}::-webkit-scrollbar-thumb:hover{background-color:#96a7cf}@keyframes slideInRight{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(400px)}}.markdown-body{padding:40px 30px!important;border-radius:16px;color:#fff;font-size:16px;line-height:1.8;font-family:Lato,sans-serif}.markdown-body h1,.markdown-body h2,.markdown-body h3{background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:Kanit,sans-serif;margin-top:2em;margin-bottom:1em;font-weight:700}.markdown-body h1{font-size:2.5rem;border-bottom:3px solid transparent;border-image:linear-gradient(90deg,#3b82f6,#8b5cf6) 1;padding-bottom:.5em}.markdown-body h2{font-size:2rem}.markdown-body h3{font-size:1.6rem}.markdown-body pre{background:linear-gradient(135deg,#1e293b,#0f172a);padding:20px;border-radius:12px;overflow-x:auto;box-shadow:0 8px 24px #0000004d,inset 0 1px #ffffff0d;border:2px solid rgba(59,130,246,.2)}.markdown-body code{background:linear-gradient(135deg,#3b82f626,#8b5cf626);padding:4px 8px;border-radius:6px;font-size:.9em;border:1px solid rgba(59,130,246,.3)}.markdown-body p{margin-bottom:1.2em}.tv-demo-tabs{display:flex;margin-bottom:10px;gap:8px}.tv-demo-tabs button{border:none;padding:12px 20px;cursor:pointer;font-size:1rem;border-radius:8px 8px 0 0;transition:all .3s cubic-bezier(.4,0,.2,1);font-weight:500;letter-spacing:.3px;position:relative}.tv-demo-tabs button:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#3b82f6,#60a5fa);opacity:0;transition:opacity .3s ease}.tv-demo-tabs button.active:after{opacity:1}.tv-demo-tabs button:active{transform:translateY(1px)}.tv-demo *{box-sizing:border-box;margin:0;padding:0}.tv-demo-content{padding:20px;border:1px solid #4a4a4a;border-radius:0 5px 5px;min-width:0;max-width:100%;overflow:hidden}.tv-demo-content .tv-demo-description{font-size:1.1rem}.tv-demo-content .tv-demo-component-content{display:flex;margin:0 auto;padding:20px;justify-content:center;width:100%;max-width:100%;overflow:hidden}.tv-demo-content>*{max-width:100%}a,.tv-demo-links-item{text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:1rem;padding:10px 20px;border-radius:8px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;letter-spacing:.3px}a:before,.tv-demo-links-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}a:hover:before,.tv-demo-links-item:hover:before{left:100%}a:active,.tv-demo-links-item:active{transform:translateY(1px)}.dark-mode .tv-demo-select{background-color:#b9c4df;color:#0e131f;border:1px solid #B9C4DF}.dark-mode .tv-demo-option{background:#b9c4df}.dark-mode .no-background{background-color:#0e131f;color:#b9c4df;box-shadow:0 0 10px #0e131f}.dark-mode .tv-demo-tabs button{background-color:#b9c4df;color:#000b14}.dark-mode .tv-demo-tabs button.active{background:#8598c7;font-weight:700}.dark-mode .tv-demo-tabs button:hover{background:#96a7cf}.dark-mode .tv-demo-links-item,.dark-mode a.tv-demo-links-item{color:#60a5fa;border-color:#3b82f680}.dark-mode .tv-demo-links-item:hover,.dark-mode a.tv-demo-links-item:hover{background:#3b82f640;border-color:#3b82f680;box-shadow:0 4px 16px #3b82f633;transform:translateY(-2px)}.light-mode .tv-demo-select{background-color:#0e131f;color:#b9c4df;border:1px solid #0E131F}.light-mode .tv-demo-option{background:#0e131f}.light-mode .no-background{background-color:#b9c4df;color:#0e131f;box-shadow:0 0 10px #b9c4df}.light-mode .tv-demo-tabs button{background-color:#0e131f;color:#f4faff}.light-mode .tv-demo-tabs button.active{background:#000;font-weight:700}.light-mode .tv-demo-tabs button:hover{background:#000}.light-mode .tv-demo-links-item,.light-mode a.tv-demo-links-item{color:#1e40af;border-color:#1e40af66}.light-mode .tv-demo-links-item:hover,.light-mode a.tv-demo-links-item:hover{background:#1e40af2e;border-color:#1e40af66;box-shadow:0 4px 16px #1e40af26;transform:translateY(-2px)}.tv-demo-body{margin:0 auto;min-height:100vh;width:80%}.tv-demo-body.dark-mode{background-color:#0e131f}.tv-demo-body.dark-mode .tv-demo-select{background-color:#b9c4df;color:#0e131f;border:1px solid #B9C4DF}.tv-demo-body.dark-mode .tv-demo-option{background:#b9c4df}.tv-demo-body.dark-mode .tv-demo-links-item{color:#b9c4df}.tv-demo-body.light-mode{background-color:#b9c4df}.tv-demo-body.light-mode .tv-demo-select{background-color:#0e131f;color:#b9c4df;border:1px solid #0E131F}.tv-demo-body.light-mode .tv-demo-option{background:#0e131f}.tv-demo-body.light-mode .tv-demo-links-item{color:#0e131f}.tv-demo-body .tv-demo-theme{display:flex;align-items:center;gap:10px;min-height:100%;padding:0 20px;width:100%}.tv-demo-body .tv-demo-links{display:flex;gap:12px;align-content:center;align-items:center;flex-wrap:wrap}.tv-demo-body .tv-demo-links a{color:inherit}.tv-demo-body .tv-demo-links>span{opacity:.3;font-weight:300}.tv-demo-body .tv-demo-header{padding:25px 0;display:flex;justify-content:space-between}.tv-demo-body .tv-demo-case{padding:0 40px 40px;position:relative}.tv-demo-body .tv-demo-case-demo .demo{margin-bottom:20px}.tv-demo-body .tv-demo-case-demo h3{font-size:1.4rem;padding-top:20px;font-family:Kanit,sans-serif;font-weight:600}.tv-demo-body .tv-demo-case-demo h1{font-size:2.5rem;font-weight:700;font-family:Kanit,sans-serif;background:linear-gradient(135deg,#3b82f6,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tv-demo-body .tv-demo-case-demo h1 span{font-size:1rem;font-weight:300}.tv-demo-body .tv-demo-select{border-radius:8px;cursor:pointer;font-size:16px;height:44px;margin-bottom:20px;margin-top:10px;padding:0 16px;width:100%;border:2px solid transparent;transition:all .3s ease;font-weight:500;outline:none;box-shadow:0 2px 8px #0000001a}.tv-demo-body .tv-demo-select:hover{border-color:#3b82f64d;box-shadow:0 4px 12px #00000026}.tv-demo-body .tv-demo-select:focus{border-color:#3b82f680;box-shadow:0 0 0 3px #3b82f61a,0 4px 12px #00000026}.tv-demo-body .tv-demo-select-theme{width:150px}.tv-demo-body .tv-demo-option{font-size:16px}.tv-demo-body .tv-demo-component{align-items:center;display:flex;height:100%;justify-content:center;margin-top:5px;width:100%}.tv-demo-body .tv-demo-no-component{color:inherit;font-size:1.5rem;font-weight:500;text-align:center}.tv-demo-body .tv-demo-code{margin-top:5px;width:100%!important;height:auto!important;padding:20px 0}.tv-demo-footer{position:relative;padding:0;font-family:Lato,sans-serif;transition:all .3s ease;overflow:hidden}.tv-demo-footer:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(59,130,246,.5) 50%,transparent 100%)}.tv-demo-footer.dark-mode{background:linear-gradient(135deg,#111726,#0e131f,#13192a);color:#f4faff}.tv-demo-footer.dark-mode .tv-demo-footer-text,.tv-demo-footer.dark-mode .tv-demo-footer-copyright{color:#8eccff}.tv-demo-footer.dark-mode .tv-demo-footer-link{color:#3b82f6}.tv-demo-footer.dark-mode .tv-demo-footer-link:hover{color:#60a5fa;text-shadow:0 0 8px rgba(59,130,246,.3)}.tv-demo-footer.dark-mode .tv-demo-footer-brand-text{color:#f4faff;text-shadow:0 0 20px rgba(59,130,246,.3)}.tv-demo-footer.dark-mode .tv-demo-footer-divider{background:#ffffff1a}.tv-demo-footer.light-mode{background:linear-gradient(135deg,#cbd3e7,#b9c4df,#c4cde4);color:#000b14}.tv-demo-footer.light-mode .tv-demo-footer-text,.tv-demo-footer.light-mode .tv-demo-footer-copyright{color:#002747}.tv-demo-footer.light-mode .tv-demo-footer-link{color:#1e40af}.tv-demo-footer.light-mode .tv-demo-footer-link:hover{color:#3b82f6;text-shadow:0 0 8px rgba(30,64,175,.2)}.tv-demo-footer.light-mode .tv-demo-footer-brand-text{color:#000b14;text-shadow:0 0 20px rgba(30,64,175,.2)}.tv-demo-footer.light-mode .tv-demo-footer-divider{background:#0000001a}.tv-demo-footer-content{margin:0 auto;padding:40px 20px 20px}.tv-demo-footer-main{display:flex;flex-direction:column;align-items:center;gap:30px;margin-bottom:30px}.tv-demo-footer-brand{display:flex;align-items:center;gap:12px;font-family:Kanit,sans-serif;font-size:1.8rem;font-weight:700}.tv-demo-footer-logo{max-width:25px;animation:float 3s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(59,130,246,.3))}.tv-demo-footer-logo img{width:100%}.tv-demo-footer-brand-text{letter-spacing:.5px;background:linear-gradient(135deg,#3b82f6,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tv-demo-footer-brand-version{letter-spacing:.3px;font-size:1rem;-webkit-background-clip:text;background-clip:text}.tv-demo-footer-info{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap}.tv-demo-footer-text{font-size:1rem;display:flex;align-items:center;gap:8px;margin:0;opacity:.85;transition:all .3s ease;font-weight:400}.tv-demo-footer-text:hover{opacity:1;transform:translateY(-2px)}.tv-demo-footer-divider{width:1px;height:20px;opacity:.3}.tv-demo-footer-link{text-decoration:none!important;font-weight:600!important;position:relative;transition:all .3s ease;padding:0 0 2px!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transform:none!important;letter-spacing:normal!important;display:inline!important;gap:0!important;overflow:visible!important}.tv-demo-footer-link:before{display:none!important}.tv-demo-footer-link:after{content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background:currentColor;transition:width .3s ease}.tv-demo-footer-link:hover{transform:none!important;box-shadow:none!important;background:transparent!important}.tv-demo-footer-link:hover:after{width:100%}.tv-demo-footer-heart{font-size:1.2rem;display:inline-block;animation:pulse 2s infinite ease-in-out;filter:drop-shadow(0 0 4px rgba(59,130,246,.4))}.tv-demo-footer-bottom{padding-top:20px;border-top:1px solid rgba(255,255,255,.05);text-align:center}.tv-demo-footer-copyright{font-size:.85rem;margin:0;opacity:.6;font-weight:300;letter-spacing:.3px}@keyframes float{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-5px) rotate(-2deg)}50%{transform:translateY(-10px) rotate(0)}75%{transform:translateY(-5px) rotate(2deg)}}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.8}}.switch{position:relative;display:inline-block;width:60px;height:32px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:linear-gradient(135deg,#cbd5e1,#94a3b8);transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:inset 0 2px 4px #0000001a,0 2px 8px #00000026}.slider:before{position:absolute;content:"";height:24px;width:24px;left:4px;bottom:4px;background:linear-gradient(135deg,#fff,#f8fafc);transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0003,0 1px 3px #0000001a}input:checked+.slider{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:inset 0 2px 4px #0000001a,0 2px 12px #3b82f666}input:focus+.slider{box-shadow:inset 0 2px 4px #0000001a,0 0 0 3px #3b82f633,0 2px 8px #00000026}input:checked+.slider:before{transform:translate(28px);box-shadow:0 2px 8px #00000040,0 1px 3px #00000026}.slider:hover{box-shadow:inset 0 2px 4px #0000001a,0 4px 12px #0003}input:checked+.slider:hover{box-shadow:inset 0 2px 4px #0000001a,0 4px 16px #3b82f680}.slider.round{border-radius:32px}.slider.round:before{border-radius:50%}.tv-demo-layout{display:grid;grid-template-columns:320px 1fr;gap:20px;margin-top:20px;width:100%;max-width:100%}.tv-demo-sidebar{display:flex;flex-direction:column;border-radius:16px;padding:20px;border:1px solid rgba(255,255,255,.08);background:#00000040;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);height:100%}.tv-demo-sidebar.light-mode{border-color:#00000014;background:#fff9}.tv-demo-sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.tv-demo-sidebar-header h3{margin:0;font-size:1.3rem}.tv-demo-sidebar-meta{font-size:.85rem;opacity:.7;margin-bottom:4px}.tv-demo-sidebar-collapse{background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;font-size:.9rem;padding:6px 8px}.tv-demo-sidebar-collapse:hover{border-color:#fff9}.light-mode .tv-demo-sidebar-collapse{border-color:#00000026}.light-mode .tv-demo-sidebar-collapse:hover{border-color:#00000073}.tv-demo-search{display:flex;align-items:center;gap:8px;border-radius:999px;padding:6px 12px;border:1px solid rgba(255,255,255,.2);margin-bottom:16px;background:#ffffff0d}.tv-demo-search.light-mode{border-color:#0000001a;background:#00000008}.tv-demo-search-icon{font-size:.85rem}.tv-demo-search-input{background:transparent;border:none;flex:1;font-size:.9rem;outline:none;color:inherit}.tv-demo-search-clear{background:transparent;border:none;cursor:pointer;font-size:.85rem;opacity:.7}.tv-demo-variants{position:relative;flex:1;overflow:auto;border-radius:12px;padding:4px;border:1px solid rgba(255,255,255,.08);background:#ffffff05}.tv-demo-variants.light-mode{border-color:#00000014;background:#00000003}.tv-demo-variant-card{width:100%;display:flex;justify-content:space-between;gap:12px;border:none;background:#0000004d;color:inherit;padding:14px;border-radius:12px;text-align:left;cursor:pointer;margin-bottom:8px;transition:transform .2s ease,box-shadow .2s ease}.tv-demo-variant-card:hover{transform:translate(4px);box-shadow:0 10px 20px #0000004d}.tv-demo-variant-card.active{outline:2px solid rgba(59,130,246,.7);background:#3b82f626}.light-mode .tv-demo-variant-card{background:#fffc}.light-mode .tv-demo-variant-card.active{background:#3b82f61f}.tv-demo-variant-card-content{flex:1}.tv-demo-variant-card-title{display:block;font-weight:600;margin-bottom:4px}.tv-demo-variant-card-description{font-size:.85rem;opacity:.75}.tv-demo-variant-card-icon{opacity:.7}.tv-demo-empty-state{text-align:center;padding:20px;opacity:.8}.tv-demo-reset{margin-top:12px;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:transparent;color:inherit;cursor:pointer}.tv-demo-empty-component,.tv-demo-empty-code{text-align:center;padding:20px;opacity:.8}@media(max-width:1024px){.tv-demo-layout{grid-template-columns:1fr}.tv-demo-sidebar{max-height:none}}@media(max-width:768px){.tv-demo-layout{grid-template-columns:1fr}}@media(max-width:768px){.tv-demo-case{padding:10px!important}.tv-demo-body{width:90%}.tv-demo-header{flex-direction:column;align-items:flex-start;gap:10px;padding:0}.tv-demo-header .tv-demo-theme{width:100%;padding-left:0;padding-right:0}.tv-demo-header .tv-demo-select-theme{width:100%}.tv-demo-footer-content{padding:30px 15px 15px}.tv-demo-footer-brand{font-size:1.5rem;gap:10px}.tv-demo-footer-logo{font-size:2rem}.tv-demo-footer-info{gap:15px;flex-direction:column;text-align:center}.tv-demo-footer-text{font-size:.9rem}.tv-demo-footer-divider{display:none}}@media(max-width:640px){.tv-demo-case{padding:15px!important}.tv-demo-body{width:100%;border-radius:0}.tv-demo-content{padding:15px;border-radius:0 8px 8px}.tv-demo-content .tv-demo-component-content{padding:15px;margin:15px auto}.tv-demo-tabs{gap:4px}.tv-demo-tabs button{padding:8px 12px;font-size:.85rem}.tv-demo-footer-brand{font-size:1.3rem}.tv-demo-footer-logo{max-width:18px}.tv-demo-footer-text{font-size:.85rem;gap:6px}.tv-demo-footer-copyright{font-size:.75rem}.tv-demo-footer-brand-version{font-size:.85rem}a,.tv-demo-links-item{padding:5px 10px;font-size:.85rem;gap:4px}.markdown-body{padding:20px 15px;font-size:14px}.markdown-body h1{font-size:1.8rem}.markdown-body h2{font-size:1.5rem}.markdown-body h3{font-size:1.2rem}}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#272822;color:#ddd}.hljs-tag,.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-strong,.hljs-number,.hljs-name{color:#f92672}.hljs-code{color:#66d9ef}.hljs-attribute,.hljs-attr,.hljs-symbol,.hljs-regexp,.hljs-link{color:#bf79db}.hljs-string,.hljs-bullet,.hljs-subst,.hljs-title,.hljs-section,.hljs-emphasis,.hljs-type,.hljs-built_in,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-addition,.hljs-variable,.hljs-template-tag,.hljs-template-variable{color:#a6e22e}.hljs-title.class_,.hljs-class .hljs-title{color:#fff}.hljs-comment,.hljs-quote,.hljs-deletion,.hljs-meta{color:#75715e}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-doctag,.hljs-title,.hljs-section,.hljs-type,.hljs-selector-id{font-weight:700}.cb[data-v-3c0bc7c1]{position:absolute;cursor:pointer;transition:.3s opacity linear;opacity:.5;height:30px;width:80px;right:0}.cb:hover .cb_tooltip[data-v-3c0bc7c1]{display:block}.cb[data-v-3c0bc7c1]:hover{opacity:1}.cb_tooltip[data-v-3c0bc7c1]{font-family:sans-serif;display:none;position:absolute;left:-96px;font-size:12px;color:#fff;width:80px;height:30px;line-height:30px;background:#000c;box-sizing:border-box;text-align:center;border-radius:4px}.cb_copy[data-v-3c0bc7c1]{position:absolute;font-family:sans-serif;display:block;font-size:12px;color:#fff;width:80px;height:30px;line-height:30px;background:#000c;box-sizing:border-box;text-align:center;border-radius:4px}.cb textarea[data-v-3c0bc7c1]{-webkit-user-select:none;user-select:none;position:absolute;padding:0;width:0;height:0;background:transparent;resize:none;opacity:0;border-color:#0000}.TL[data-v-b98f7724]{display:flex;align-items:center;justify-content:center;width:40px;height:30px;position:relative}.TL_word[data-v-b98f7724]{width:20px;height:20px;text-align:center;color:#aaa;font-size:16px}.code[data-v-f4a493be]{display:flex;flex-direction:column;font-size:0;position:relative;text-align:left;overflow:hidden}.code_header[data-v-f4a493be]{min-height:14px;position:relative}.code_area[data-v-f4a493be]{position:relative;overflow:hidden;padding-left:20px;margin:auto 0;display:flex}.code_area textarea[data-v-f4a493be]{overflow-y:hidden;box-sizing:border-box;caret-color:#7f7f7f;-webkit-text-fill-color:transparent;white-space:pre;word-wrap:normal;border:0;position:absolute;z-index:1000;top:0;left:0;width:100%;height:100%;background:none;border:none;outline:none;resize:none;padding:0 20px 20px;line-height:1.3;overflow:overlay;font-family:Consolas,Monaco,monospace}.code_area textarea[data-v-f4a493be]::-webkit-scrollbar-track{background-color:#eee}.code_area textarea[data-v-f4a493be]::-webkit-scrollbar-thumb{background:#afabab}.code_area textarea[data-v-f4a493be]::-webkit-scrollbar{width:8px;height:8px}.code_area textarea[data-v-f4a493be]::-webkit-scrollbar-corner{background-color:#eee}.code_area_link[data-v-f4a493be]{position:absolute}.code_area.change_hight[data-v-f4a493be]{height:calc(100% - 30px)}.code_area.srollbar_style[data-v-f4a493be]::-webkit-scrollbar-track{background-color:#eee}.code_area.srollbar_style[data-v-f4a493be]::-webkit-scrollbar-thumb{background:#afabab}.code_area.srollbar_style[data-v-f4a493be]::-webkit-scrollbar{width:8px;height:8px}.code_area.srollbar_style[data-v-f4a493be]::-webkit-scrollbar-corner{background-color:#eee}.code_area pre[data-v-f4a493be]{position:relative;margin:0;height:100%;overflow:hidden}.code_header[data-v-f4a493be]{position:relative;display:flex;justify-content:flex-start;width:100%}.code pre code[data-v-f4a493be]{font-family:Consolas,Monaco,monospace;line-height:1.3;position:relative;overflow-x:visible;border-radius:0;box-sizing:border-box;display:block;border:none;margin:0}.wrapper-content[data-v-f4a493be]::-webkit-scrollbar-track{background-color:#eee;border-radius:5px}.wrapper-content[data-v-f4a493be]::-webkit-scrollbar-thumb{background:#afabab;border-radius:5px}.wrapper-content[data-v-f4a493be]::-webkit-scrollbar{width:6px}.code_area_lines[data-v-f4a493be]{display:flex;flex-direction:column;width:10px;align-items:center;position:absolute;transform:translate(-18px)}.code_area_lines_item[data-v-f4a493be]{height:24px;width:10px;font-size:12px;color:#adb5bd;text-align:center;display:flex;justify-content:center;align-items:center;opacity:.6}.code_area_lines_item.dark[data-v-f4a493be]{color:#adb5bd}.code_area_lines_item.light[data-v-f4a493be]{color:#212529}.atom_one_dark.hljs,.atom_one_dark .hljs{color:#abb2bf;background:#282c34}.atom_one_dark .hljs-comment,.atom_one_dark .hljs-quote{color:#5c6370;font-style:italic}.atom_one_dark .hljs-doctag,.atom_one_dark .hljs-keyword,.atom_one_dark .hljs-formula{color:#c678dd}.atom_one_dark .hljs-section,.atom_one_dark .hljs-name,.atom_one_dark .hljs-selector-tag,.atom_one_dark .hljs-deletion,.atom_one_dark .hljs-subst{color:#e06c75}.atom_one_dark .hljs-literal{color:#56b6c2}.atom_one_dark .hljs-string,.atom_one_dark .hljs-regexp,.atom_one_dark .hljs-addition,.atom_one_dark .hljs-attribute,.atom_one_dark .hljs-meta .hljs-string{color:#98c379}.atom_one_dark .hljs-attr,.atom_one_dark .hljs-variable,.atom_one_dark .hljs-template-variable,.atom_one_dark .hljs-type,.atom_one_dark .hljs-selector-class,.atom_one_dark .hljs-selector-attr,.atom_one_dark .hljs-selector-pseudo,.atom_one_dark .hljs-number{color:#d19a66}.atom_one_dark .hljs-symbol,.atom_one_dark .hljs-bullet,.atom_one_dark .hljs-link,.atom_one_dark .hljs-meta,.atom_one_dark .hljs-selector-id,.atom_one_dark .hljs-title{color:#61aeee}.atom_one_dark .hljs-built_in,.atom_one_dark .hljs-title .class_,.atom_one_dark .hljs-class .hljs-title{color:#e6c07b}.atom_one_dark .hljs-emphasis{font-style:italic}.atom_one_dark .hljs-strong{font-weight:700}.atom_one_dark .hljs-link{text-decoration:underline}.atom_one_light.hljs,.atom_one_light .hljs{color:#383a42;background:#edf2f4}.atom_one_light .hljs-comment,.atom_one_light .hljs-quote{color:#a0a1a7;font-style:italic}.atom_one_light .hljs-doctag,.atom_one_light .hljs-keyword,.atom_one_light .hljs-formula{color:#a626a4}.atom_one_light .hljs-section,.atom_one_light .hljs-name,.atom_one_light .hljs-selector-tag,.atom_one_light .hljs-deletion,.atom_one_light .hljs-subst{color:#e45649}.atom_one_light .hljs-literal{color:#0184bb}.atom_one_light .hljs-string,.atom_one_light .hljs-regexp,.atom_one_light .hljs-addition,.atom_one_light .hljs-attribute,.atom_one_light .hljs-meta .hljs-string{color:#50a14f}.atom_one_light .hljs-attr,.atom_one_light .hljs-variable,.atom_one_light .hljs-template-variable,.atom_one_light .hljs-type,.atom_one_light .hljs-selector-class,.atom_one_light .hljs-selector-attr,.atom_one_light .hljs-selector-pseudo,.atom_one_light .hljs-number{color:#986801}.atom_one_light .hljs-symbol,.atom_one_light .hljs-bullet,.atom_one_light .hljs-link,.atom_one_light .hljs-meta,.atom_one_light .hljs-selector-id,.atom_one_light .hljs-title{color:#4078f2}.atom_one_light .hljs-built_in,.atom_one_light .hljs-title .class_,.atom_one_light .hljs-class .hljs-title{color:#c18401}.atom_one_light .hljs-emphasis{font-style:italic}.atom_one_light .hljs-strong{font-weight:700}.atom_one_light .hljs-link{text-decoration:underline}@keyframes slideInRight-84ed156b{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOutRight-84ed156b{0%{transform:translate(0);opacity:1}to{transform:translate(400px);opacity:0}}.toast-notification[data-v-84ed156b]{display:flex;align-items:center;gap:12px;min-width:320px;max-width:450px;padding:14px 16px;margin-bottom:12px;border-radius:12px;box-shadow:0 10px 30px #0003,0 0 0 1px #ffffff1a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:linear-gradient(135deg,#1e1e1ef2,#141414f2);border:1px solid rgba(255,255,255,.08);opacity:0;transform:translate(400px);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.toast-notification[data-v-84ed156b]:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:currentColor}.toast-notification.visible[data-v-84ed156b]{animation:slideInRight-84ed156b .3s ease-out forwards}.toast-notification.leaving[data-v-84ed156b]{animation:slideOutRight-84ed156b .3s ease-in forwards}.toast-notification.success[data-v-84ed156b]:before{background:#22c55e}.toast-notification.error[data-v-84ed156b]:before{background:#ef4444}.toast-notification.warning[data-v-84ed156b]:before{background:#f59e0b}.toast-notification.info[data-v-84ed156b]:before{background:#3b82f6}.toast-icon[data-v-84ed156b]{display:flex;align-items:center;justify-content:center;min-width:28px;width:28px;height:28px;border-radius:50%;font-weight:700;font-size:14px;flex-shrink:0}.toast-content[data-v-84ed156b]{flex:1;min-width:0}.toast-message[data-v-84ed156b]{margin:0;font-size:14px;font-weight:500;color:#fff;line-height:1.4;word-wrap:break-word;overflow-wrap:break-word}.toast-close[data-v-84ed156b]{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:#ffffff1a;color:#fff9;border-radius:6px;cursor:pointer;font-size:12px;font-weight:700;transition:all .2s ease;flex-shrink:0}.toast-close[data-v-84ed156b]:hover{background:#ffffff26;color:#ffffffe6;transform:scale(1.1)}.toast-close[data-v-84ed156b]:active{transform:scale(.95)}.light-mode .toast-notification[data-v-84ed156b]{background:linear-gradient(135deg,#fffffffa,#f5f5f5fa);border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 30px #00000026,0 0 0 1px #0000000d}.light-mode .toast-notification .toast-message[data-v-84ed156b]{color:#1f2937}.light-mode .toast-notification .toast-close[data-v-84ed156b]{background:#0000000d;color:#00000080}.light-mode .toast-notification .toast-close[data-v-84ed156b]:hover{background:#0000001a;color:#000c}.toast-container[data-v-25add11c]{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;pointer-events:none}.toast-container[data-v-25add11c]>*{pointer-events:auto}@media(max-width:640px){.toast-container[data-v-25add11c]{top:10px;right:10px;left:10px;align-items:center}}

package/dist/tv-demo.es.js

@@ -1,75 +1,212 @@
-import { ref as h, onMounted as B, computed as I, watchEffect as E, createElementBlock as s, openBlock as l, Fragment as S, createElementVNode as o, normalizeStyle as V, normalizeClass as C, unref as n, createCommentVNode as i, createTextVNode as $, toDisplayString as b, withDirectives as L, createBlock as w, isRef as M, renderList as N, vModelSelect as P, resolveDynamicComponent as z, normalizeProps as R, guardReactiveProps as A, createVNode as j } from "vue";
-import { HighCode as F } from "vue-highlight-code";
-import O from "vue3-markdown-it";
-const H = (e) => {
-  const r = h("dark"), f = h(0), m = h(!1), u = h(""), v = h(""), c = h("demo");
-  B(() => {
-    const a = localStorage.getItem("theme");
-    a && (r.value = a);
+import { ref as g, computed as u, watch as z, nextTick as Y, onMounted as le, onBeforeUnmount as ie, watchEffect as re, defineAsyncComponent as de, createElementBlock as c, openBlock as r, Fragment as F, createElementVNode as o, createVNode as q, normalizeStyle as U, normalizeClass as C, unref as t, createCommentVNode as w, toDisplayString as k, withDirectives as ce, withKeys as ve, withModifiers as ue, isRef as me, vModelText as he, renderList as fe, createBlock as J, resolveDynamicComponent as pe, normalizeProps as ye, mergeProps as ke, createStaticVNode as be } from "vue";
+import { HighCode as ge } from "vue-highlight-code";
+import Ce from "vue3-markdown-it";
+const M = 72, W = 6, we = (a, p) => a?.id ?? a?.title ?? `variant-${p}`, Se = (a = {}) => `${a.title ?? ""} ${a.description ?? ""}`.toLowerCase(), Te = (a) => {
+  const p = g("dark"), V = g([]), D = g(""), O = g("demo"), T = g(""), i = g(null), v = g(null), b = g(360), E = g(0);
+  let y = null, x = !1;
+  const S = u(
+    () => (a.variants || []).map((e, s) => ({
+      variant: e,
+      index: s,
+      key: we(e, s),
+      searchableText: Se(e)
+    }))
+  ), K = u(() => S.value.length), d = u(() => {
+    const e = T.value.trim().toLowerCase();
+    return e ? S.value.filter((s) => s.searchableText.includes(e)) : S.value;
+  }), H = u(() => d.value.length), f = u(
+    () => !!T.value.trim() && d.value.length === 0
+  ), m = () => {
+    b.value = v.value?.clientHeight || b.value;
+  }, N = () => {
+    x && (window.removeEventListener("resize", m), x = !1);
+  };
+  z(
+    () => v.value,
+    (e) => {
+      if (y && (y.disconnect(), y = null), !e) {
+        N();
+        return;
+      }
+      Y(() => {
+        m(), typeof ResizeObserver < "u" ? (y = new ResizeObserver((s) => {
+          const h = s?.[0];
+          h && (b.value = h.contentRect.height);
+        }), y.observe(e)) : x || (window.addEventListener("resize", m), x = !0);
+      });
+    }
+  ), le(() => {
+    const e = localStorage.getItem("theme");
+    e && (p.value = e), Y(m);
+  }), ie(() => {
+    y && (y.disconnect(), y = null), N();
   });
-  const g = async () => {
+  const A = async () => {
     try {
-      const a = await fetch(e.readmePath);
-      if (!a.ok) throw new Error("README.md not found");
-      v.value = await a.text();
+      const e = await fetch(a.readmePath);
+      if (!e.ok) throw new Error("README.md not found");
+      D.value = await e.text();
     } catch {
-      v.value = "⚠️ Documentation not found.";
+      D.value = "⚠️ Documentation not found.";
+    }
+  }, P = () => {
+    p.value = p.value === "dark" ? "light" : "dark", localStorage.setItem("theme", p.value);
+  };
+  z(
+    () => S.value,
+    (e) => {
+      if (!e.length) {
+        i.value = null;
+        return;
+      }
+      e.some((s) => s.key === i.value) || (i.value = e[0].key);
+    },
+    { immediate: !0 }
+  ), z(
+    () => d.value,
+    (e) => {
+      if (!e.length) {
+        i.value = null;
+        return;
+      }
+      e.some((s) => s.key === i.value) || (i.value = e[0].key);
     }
-  }, k = () => {
-    r.value = r.value === "dark" ? "light" : "dark", localStorage.setItem("theme", r.value);
-  }, y = I(() => e.variants?.[f.value] || {}), p = I(() => {
-    const a = r.value === "dark" ? e.demoStyle?.dark : e.demoStyle?.light;
+  );
+  const L = (e) => {
+    v.value && (v.value.scrollTop = e, E.value = e);
+  };
+  z(T, () => {
+    L(0);
+  });
+  const $ = u(
+    () => d.value.findIndex((e) => e.key === i.value)
+  ), I = u(() => Math.max(1, Math.ceil(b.value / M))), R = u(
+    () => Math.max(0, Math.floor(E.value / M) - W)
+  ), n = u(
+    () => Math.min(
+      d.value.length,
+      R.value + I.value + W * 2
+    )
+  ), l = u(
+    () => d.value.slice(R.value, n.value)
+  ), Q = u(() => R.value * M), X = u(
+    () => Math.max(0, (d.value.length - n.value) * M)
+  );
+  z(i, () => {
+    if (!v.value) return;
+    const e = $.value;
+    if (e < 0) return;
+    const s = R.value + 2, h = n.value - 3;
+    if (e < s)
+      L(Math.max(0, e * M));
+    else if (e > h) {
+      const B = Math.max(0, e - I.value + 1);
+      L(B * M);
+    }
+  });
+  const Z = u(() => f.value ? {} : (d.value.find((s) => s.key === i.value) || S.value.find((s) => s.key === i.value) || d.value[0] || S.value[0])?.variant || {}), ee = (e) => {
+    E.value = e.target.scrollTop;
+  }, G = (e) => {
+    const s = d.value;
+    if (!s.length) return;
+    const h = $.value < 0 ? 0 : $.value, B = Math.min(s.length - 1, Math.max(0, h + e));
+    i.value = s[B].key;
+  }, te = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), G(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault(), G(-1);
+        break;
+      case "Home":
+        e.preventDefault(), d.value.length && (i.value = d.value[0].key);
+        break;
+      case "End":
+        e.preventDefault(), d.value.length && (i.value = d.value[d.value.length - 1].key);
+        break;
+    }
+  }, oe = (e) => {
+    i.value = e;
+  }, ne = u(() => {
+    const e = p.value === "dark" ? a.demoStyle?.dark : a.demoStyle?.light;
     return {
       body: {
-        backgroundColor: a?.backgroundBody || "",
-        color: a?.color || ""
+        backgroundColor: e?.backgroundBody || "",
+        color: e?.color || ""
       },
       content: {
-        backgroundColor: a?.backgroundContent || "",
-        color: a?.color || ""
+        backgroundColor: e?.backgroundContent || "",
+        color: e?.color || ""
       }
     };
-  }), D = (a) => {
-    let t = "";
-    a === "npm" ? t = `npm install ${e.isDevComponent ? "-D " : ""}${e.npmInstall}` : t = `git clone ${e.urlClone}`, navigator.clipboard.writeText(t).then(() => {
-      m.value = !0, u.value = `Copied to clipboard: ${t}`;
-    }).catch((d) => {
-      m.value = !0, u.value = `Failed to copy: ${d}`;
-    }).finally(() => {
-      setTimeout(() => {
-        m.value = !1, u.value = "";
-      }, 2e3);
+  }), ae = (e) => {
+    let s = "";
+    e === "npm" ? s = `npm install ${a.isDevComponent ? "-D " : ""}${a.npmInstall}` : s = `git clone ${a.urlClone}`, navigator.clipboard.writeText(s).then(() => {
+      _(`Copied to clipboard: ${s}`, "success", 3e3);
+    }).catch((h) => {
+      _(`Failed to copy: ${h}`, "error", 3e3);
     });
+  }, _ = (e, s = "success", h = 3e3) => {
+    const B = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    V.value.push({ id: B, message: e, type: s, duration: h });
+  }, se = (e) => {
+    const s = V.value.findIndex((h) => h.id === e);
+    s > -1 && V.value.splice(s, 1);
   };
-  return E(g), {
-    customStyle: p,
-    isCopy: m,
-    messageCopy: u,
-    readmeContent: v,
-    selectedTab: c,
-    selectedVariantIndex: f,
-    theme: r,
-    variant: y,
-    setClickItem: D,
-    toggleTheme: k
+  return re(A), {
+    customStyle: ne,
+    toasts: V,
+    readmeContent: D,
+    selectedTab: O,
+    searchQuery: T,
+    selectedVariantKey: i,
+    totalVariantsCount: K,
+    filteredVariantsCount: H,
+    variantsListRef: v,
+    virtualizedVariants: l,
+    virtualPaddingTop: Q,
+    virtualPaddingBottom: X,
+    emptySearchState: f,
+    theme: p,
+    variant: Z,
+    addToast: _,
+    removeToast: se,
+    selectVariant: oe,
+    setClickItem: ae,
+    toggleTheme: P,
+    handleVariantsScroll: ee,
+    handleVariantsKeydown: te
   };
-}, U = { class: "tv-demo-case" }, q = { class: "tv-demo-header" }, G = { class: "tv-demo-title" }, J = { class: "tv-demo-links" }, K = ["href"], Q = { key: 1 }, W = { key: 3 }, X = { class: "tv-demo-theme" }, Y = { class: "switch" }, Z = ["checked"], _ = { class: "tv-demo-tabs" }, ee = {
+}, xe = { class: "tv-demo-case" }, Ve = { class: "tv-demo-header" }, De = { class: "tv-demo-links" }, $e = ["href"], Ie = { key: 1 }, Me = { key: 3 }, Ee = { class: "tv-demo-theme" }, Le = { class: "switch" }, Re = ["checked"], Be = { class: "tv-demo-tabs" }, ze = {
   key: 0,
-  class: "tv-demo-content"
-}, te = ["value"], oe = { class: "tv-demo-description" }, ne = { class: "tv-demo-component-content" }, le = {
+  class: "tv-demo-layout"
+}, Ne = { class: "tv-demo-sidebar-header" }, Ae = { class: "tv-demo-sidebar-meta" }, Pe = ["aria-activedescendant"], Oe = ["id", "aria-selected", "onClick"], Ke = { class: "tv-demo-variant-card-content" }, He = { class: "tv-demo-variant-card-title" }, _e = { class: "tv-demo-variant-card-description" }, Fe = {
+  key: 1,
+  class: "tv-demo-empty-state"
+}, Ue = {
+  class: "tv-demo-content",
+  "aria-live": "polite"
+}, je = { class: "tv-demo-content-header" }, Qe = { class: "tv-demo-description" }, Ge = { class: "tv-demo-component-content" }, Ye = {
+  key: 1,
+  class: "tv-demo-empty-component"
+}, qe = {
+  key: 1,
+  class: "tv-demo-empty-code"
+}, Je = {
   key: 1,
   class: "tv-demo-content"
-}, se = {
+}, We = {
   key: 0,
   class: "markdown-body"
-}, ae = { key: 1 }, T = {
+}, Xe = { key: 1 }, Ze = { class: "tv-demo-footer-content" }, et = { class: "tv-demo-footer-main" }, tt = { class: "tv-demo-footer-brand" }, ot = { class: "tv-demo-footer-brand-text" }, nt = { class: "tv-demo-footer-brand-version" }, at = { class: "tv-demo-footer-bottom" }, st = { class: "tv-demo-footer-copyright" }, j = {
   __name: "TvDemo",
   props: {
     demoStyle: { type: Object, default: () => ({ body: {}, content: {} }) },
     hideBackground: Boolean,
     component: Object,
     variants: Array,
-    nameComponent: { type: String, default: "Component Demo" },
+    componentName: { type: String, default: "Component Demo" },
     sourceLink: { type: String, default: null },
     urlClone: { type: String, default: null },
     npmInstall: { type: String, default: null },
@@ -77,152 +214,244 @@ const H = (e) => {
     version: { type: String, default: "0.0.0" },
     readmePath: { type: String, default: "/README.md" }
   },
-  setup(e) {
-    const r = e, {
-      customStyle: f,
-      isCopy: m,
-      messageCopy: u,
-      readmeContent: v,
-      selectedTab: c,
-      selectedVariantIndex: g,
-      theme: k,
-      variant: y,
-      setClickItem: p,
-      toggleTheme: D
-    } = H(r);
-    return (a, t) => (l(), s(S, null, [
+  setup(a) {
+    const p = de(
+      /* webpackChunkName: "toastContainer" */
+      () => import("./ToastContainer-NkcFPXPf.js")
+    ), V = a, {
+      customStyle: D,
+      toasts: O,
+      readmeContent: T,
+      selectedTab: i,
+      searchQuery: v,
+      selectedVariantKey: b,
+      totalVariantsCount: E,
+      filteredVariantsCount: y,
+      variantsListRef: x,
+      virtualizedVariants: S,
+      virtualPaddingTop: K,
+      virtualPaddingBottom: d,
+      emptySearchState: H,
+      theme: f,
+      variant: m,
+      removeToast: N,
+      setClickItem: A,
+      toggleTheme: P,
+      selectVariant: L,
+      handleVariantsScroll: $,
+      handleVariantsKeydown: I
+    } = Te(V);
+    return (R, n) => (r(), c(F, null, [
       o("div", {
-        class: C(`${n(k)}-mode tv-demo`),
-        style: V(n(f).body)
+        class: C(`${t(f)}-mode tv-demo`),
+        style: U(t(D).body)
       }, [
         o("div", {
-          class: C(["tv-demo-body", { [`${n(k)}-mode`]: !e.hideBackground }]),
-          style: V(n(f).content)
+          class: C(["tv-demo-body", { [`${t(f)}-mode`]: !a.hideBackground }]),
+          style: U(t(D).content)
         }, [
-          o("div", U, [
-            o("div", q, [
+          o("div", xe, [
+            o("div", Ve, [
               o("div", null, [
-                o("h1", G, [
-                  $(b(e.nameComponent) + " ", 1),
-                  o("span", null, "v" + b(e.version), 1)
-                ]),
-                o("div", J, [
-                  e.sourceLink || e.npmInstall || e.urlClone ? (l(), s(S, { key: 0 }, [
-                    e.sourceLink ? (l(), s("a", {
+                o("div", De, [
+                  a.sourceLink || a.npmInstall || a.urlClone ? (r(), c(F, { key: 0 }, [
+                    a.sourceLink ? (r(), c("a", {
                       key: 0,
-                      href: e.sourceLink,
+                      href: a.sourceLink,
                       target: "_blank",
                       class: "tv-demo-links-item"
-                    }, " 📂 Source ", 8, K)) : i("", !0),
-                    e.sourceLink && (e.npmInstall || e.urlClone) ? (l(), s("span", Q, " | ")) : i("", !0),
-                    e.npmInstall ? (l(), s("div", {
+                    }, " 📂 Source ", 8, $e)) : w("", !0),
+                    a.sourceLink && (a.npmInstall || a.urlClone) ? (r(), c("span", Ie, " | ")) : w("", !0),
+                    a.npmInstall ? (r(), c("div", {
                       key: 2,
                       class: "tv-demo-links-item",
-                      onClick: t[0] || (t[0] = (d) => n(p)("npm"))
-                    }, " 📦 NPM Command ")) : i("", !0),
-                    e.npmInstall && e.urlClone ? (l(), s("span", W, " | ")) : i("", !0),
-                    e.urlClone ? (l(), s("div", {
+                      onClick: n[0] || (n[0] = (l) => t(A)("npm"))
+                    }, " 📦 NPM Command ")) : w("", !0),
+                    a.npmInstall && a.urlClone ? (r(), c("span", Me, " | ")) : w("", !0),
+                    a.urlClone ? (r(), c("div", {
                       key: 4,
                       class: "tv-demo-links-item",
-                      onClick: t[1] || (t[1] = (d) => n(p)("clone"))
-                    }, " 📝 Clone Component ")) : i("", !0)
-                  ], 64)) : i("", !0)
+                      onClick: n[1] || (n[1] = (l) => t(A)("clone"))
+                    }, " 📝 Clone Component ")) : w("", !0)
+                  ], 64)) : w("", !0)
                 ])
               ]),
               o("div", null, [
-                o("div", X, [
-                  t[7] || (t[7] = o("span", { style: { "font-size": "0.9rem", opacity: "0.8" } }, "Theme", -1)),
-                  o("label", Y, [
+                o("div", Ee, [
+                  n[13] || (n[13] = o("span", { style: { "font-size": "0.9rem", opacity: "0.8" } }, "Theme", -1)),
+                  o("label", Le, [
                     o("input", {
                       type: "checkbox",
-                      checked: n(k) === "dark",
-                      onChange: t[2] || (t[2] = (...d) => n(D) && n(D)(...d))
-                    }, null, 40, Z),
-                    t[6] || (t[6] = o("span", { class: "slider round" }, null, -1))
+                      checked: t(f) === "dark",
+                      onChange: n[2] || (n[2] = (...l) => t(P) && t(P)(...l))
+                    }, null, 40, Re),
+                    n[12] || (n[12] = o("span", { class: "slider round" }, null, -1))
                   ])
                 ])
               ])
             ]),
-            o("div", _, [
+            o("div", Be, [
               o("button", {
-                class: C({ active: n(c) === "demo" }),
-                onClick: t[3] || (t[3] = (d) => c.value = "demo")
+                class: C({ active: t(i) === "demo" }),
+                onClick: n[3] || (n[3] = (l) => i.value = "demo")
               }, "📌 Demo", 2),
               o("button", {
-                class: C({ active: n(c) === "docs" }),
-                onClick: t[4] || (t[4] = (d) => c.value = "docs")
+                class: C({ active: t(i) === "docs" }),
+                onClick: n[4] || (n[4] = (l) => i.value = "docs")
               }, "📖 Documentation", 2)
             ]),
-            n(c) === "demo" ? (l(), s("div", ee, [
-              t[8] || (t[8] = o("h3", null, "Variations:", -1)),
-              e.variants.length > 1 ? L((l(), s("select", {
-                key: 0,
-                class: "tv-demo-select",
-                "onUpdate:modelValue": t[5] || (t[5] = (d) => M(g) ? g.value = d : null)
+            t(i) === "demo" ? (r(), c("div", ze, [
+              o("aside", {
+                class: C(["tv-demo-sidebar", `${t(f)}-mode`])
               }, [
-                (l(!0), s(S, null, N(e.variants, (d, x) => (l(), s("option", {
-                  key: d.title,
-                  value: x
-                }, b(d.title), 9, te))), 128))
-              ], 512)), [
-                [P, n(g)]
-              ]) : i("", !0),
-              o("span", oe, b(n(y).description), 1),
-              o("div", ne, [
-                (l(), w(z(e.component), R(A(n(y).propsData)), null, 16))
-              ]),
-              t[9] || (t[9] = o("h3", null, "Code:", -1)),
-              (l(), w(n(F), {
-                class: "tv-demo-code",
-                codeValue: n(y).html,
-                theme: n(k),
-                lang: "html",
-                codeLines: "",
-                key: n(y).title,
-                height: "auto"
-              }, null, 8, ["codeValue", "theme"])),
-              n(m) ? (l(), s("div", {
-                key: 1,
-                class: C(e.hideBackground ? "tv-demo-copy no-background" : "tv-demo-copy")
-              }, b(n(u)), 3)) : i("", !0)
-            ])) : i("", !0),
-            n(c) === "docs" ? (l(), s("div", le, [
-              t[10] || (t[10] = o("h2", null, "📖 Documentation", -1)),
-              n(v) ? (l(), s("div", se, [
-                j(n(O), {
-                  source: n(v),
+                o("div", Ne, [
+                  o("div", null, [
+                    o("p", Ae, k(t(y)) + " / " + k(t(E)) + " variants", 1),
+                    n[14] || (n[14] = o("h3", null, "Variants", -1))
+                  ]),
+                  o("button", {
+                    class: "tv-demo-sidebar-collapse",
+                    "aria-label": "Scroll to top",
+                    onClick: n[5] || (n[5] = (l) => t(x)?.scrollTo({ top: 0, behavior: "smooth" }))
+                  }, " ⬆️ ")
+                ]),
+                o("label", {
+                  class: C(["tv-demo-search", `${t(f)}-mode`])
+                }, [
+                  n[15] || (n[15] = o("span", { class: "tv-demo-search-icon" }, "🔍", -1)),
+                  ce(o("input", {
+                    "onUpdate:modelValue": n[6] || (n[6] = (l) => me(v) ? v.value = l : null),
+                    type: "search",
+                    placeholder: "Search variants...",
+                    class: "tv-demo-search-input",
+                    "aria-label": "Search variants",
+                    onKeydown: n[7] || (n[7] = ve(ue((l) => t(I)(l), ["prevent"]), ["down"]))
+                  }, null, 544), [
+                    [he, t(v)]
+                  ]),
+                  t(v) ? (r(), c("button", {
+                    key: 0,
+                    type: "button",
+                    class: "tv-demo-search-clear",
+                    "aria-label": "Clear search",
+                    onClick: n[8] || (n[8] = (l) => v.value = "")
+                  }, "✕")) : w("", !0)
+                ], 2),
+                o("div", {
+                  class: C([
+                    "tv-demo-variants",
+                    `${t(f)}-mode`
+                  ]),
+                  role: "listbox",
+                  tabindex: "0",
+                  "aria-label": "Available variants",
+                  "aria-activedescendant": t(b) ? `variant-${t(b)}` : null,
+                  onKeydown: n[10] || (n[10] = (...l) => t(I) && t(I)(...l)),
+                  ref_key: "variantsListRef",
+                  ref: x,
+                  onScroll: n[11] || (n[11] = (...l) => t($) && t($)(...l))
+                }, [
+                  o("div", {
+                    style: U({ paddingTop: `${t(K)}px`, paddingBottom: `${t(d)}px` })
+                  }, [
+                    t(H) ? (r(), c("div", Fe, [
+                      o("p", null, 'No matches for "' + k(t(v)) + '".', 1),
+                      o("button", {
+                        class: "tv-demo-reset",
+                        type: "button",
+                        onClick: n[9] || (n[9] = (l) => v.value = "")
+                      }, "Clear filter")
+                    ])) : (r(!0), c(F, { key: 0 }, fe(t(S), (l) => (r(), c("button", {
+                      key: l.key,
+                      id: `variant-${l.key}`,
+                      type: "button",
+                      class: C(["tv-demo-variant-card", { active: l.key === t(b) }]),
+                      role: "option",
+                      "aria-selected": l.key === t(b),
+                      onClick: (Q) => t(L)(l.key)
+                    }, [
+                      o("span", Ke, [
+                        o("span", He, k(l.variant.title), 1),
+                        o("span", _e, k(l.variant.description), 1)
+                      ]),
+                      n[16] || (n[16] = o("span", { class: "tv-demo-variant-card-icon" }, "→", -1))
+                    ], 10, Oe))), 128))
+                  ], 4)
+                ], 42, Pe)
+              ], 2),
+              o("section", Ue, [
+                o("div", je, [
+                  o("div", null, [
+                    n[17] || (n[17] = o("p", { class: "tv-demo-content-label" }, "Preview", -1)),
+                    o("h3", null, k(t(m).title || "Select a variant"), 1)
+                  ])
+                ]),
+                o("p", Qe, k(t(m).description || "Select a variant from the list to view its details."), 1),
+                o("div", Ge, [
+                  t(m) && a.component ? (r(), J(pe(a.component), ye(ke({ key: 0 }, t(m).propsData)), null, 16)) : (r(), c("p", Ye, "No component to render."))
+                ]),
+                n[18] || (n[18] = o("h3", null, "Code:", -1)),
+                t(m)?.html ? (r(), J(t(ge), {
+                  class: "tv-demo-code",
+                  codeValue: t(m).html,
+                  theme: t(f),
+                  lang: "html",
+                  codeLines: "",
+                  key: t(m).title,
+                  height: "auto"
+                }, null, 8, ["codeValue", "theme"])) : (r(), c("p", qe, "No snippet available."))
+              ])
+            ])) : w("", !0),
+            t(i) === "docs" ? (r(), c("div", Je, [
+              t(T) ? (r(), c("div", We, [
+                q(t(Ce), {
+                  source: t(T),
                   html: ""
                 }, null, 8, ["source"])
-              ])) : (l(), s("div", ae, "No documentation available."))
-            ])) : i("", !0)
+              ])) : (r(), c("div", Xe, "No documentation available."))
+            ])) : w("", !0)
           ])
         ], 6)
       ], 6),
-      t[11] || (t[11] = o("footer", { class: "tv-demo-footer" }, [
-        o("p", { class: "tv-demo-footer-text" }, [
-          $(" Design by "),
-          o("a", {
-            href: "https://cris-dev.com/",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            class: "tv-demo-footer-link"
-          }, " Cristhian Daza "),
-          o("span", { class: "tv-demo-footer-heart" }, "💙")
+      o("footer", {
+        class: C(["tv-demo-footer", `${t(f)}-mode`])
+      }, [
+        o("div", Ze, [
+          o("div", et, [
+            o("div", tt, [
+              n[19] || (n[19] = o("span", { class: "tv-demo-footer-logo" }, [
+                o("img", {
+                  src: "https://firebasestorage.googleapis.com/v0/b/todovue-blog.appspot.com/o/icono_git.png?alt=media&token=86270c30-8235-4424-b72b-7a585f228685",
+                  alt: ""
+                })
+              ], -1)),
+              o("span", ot, k(a.componentName), 1),
+              o("span", nt, "v" + k(a.version), 1)
+            ]),
+            n[20] || (n[20] = be('<div class="tv-demo-footer-info"><p class="tv-demo-footer-text"> Designed &amp; Developed by <a href="https://cris-dev.com/" target="_blank" rel="noopener noreferrer" class="tv-demo-footer-link"> cris-dev.com </a></p><div class="tv-demo-footer-divider"></div><p class="tv-demo-footer-text"> Made with <span class="tv-demo-footer-heart">💙</span> using Vue.js </p></div>', 1))
+          ]),
+          o("div", at, [
+            o("p", st, " © " + k((/* @__PURE__ */ new Date()).getFullYear()) + " TODOvue. All rights reserved. ", 1)
+          ])
         ])
-      ], -1))
+      ], 2),
+      q(t(p), {
+        toasts: t(O),
+        onRemoveToast: t(N)
+      }, null, 8, ["toasts", "onRemoveToast"])
     ], 64));
   }
 };
-T.install = (e) => {
-  e.component("TvDemo", T);
+j.install = (a) => {
+  a.component("TvDemo", j);
 };
-const ce = {
-  install(e) {
-    e.component("TvDemo", T);
+const ct = {
+  install(a) {
+    a.component("TvDemo", j);
   }
 };
 export {
-  T as TvDemo,
-  ce as TvDemoPlugin,
-  T as default
+  j as TvDemo,
+  ct as TvDemoPlugin,
+  j as default
 };

package/package.json

@@ -4,7 +4,7 @@
   "author": "Cristhian Daza",
   "description": "This is a default demo display for TODOvue components. Use this area to showcase the component's usage, props, variants, and live behavior in isolation.",
   "license": "MIT",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -29,7 +29,8 @@
     ".": {
       "import": "./dist/tv-demo.es.js",
       "require": "./dist/tv-demo.cjs.js"
-    }
+    },
+    "./style.css": "./dist/tv-demo.css"
   },
   "main": "dist/tv-demo.cjs.js",
   "module": "dist/tv-demo.es.js",