@natachah/vanilla-frontend 1.0.0 → 1.0.2

package/public/assets/javascript_cookie.md.D_3Ic9ld.js

@@ -0,0 +1,2 @@
+/* empty css                                                                                */import{P as s,I as o,f as h,b as e,j as i,k as n,i as l}from"./chunks/framework.CzIb_Ns1.js";const d={id:"cookie",tabindex:"-1"},m=JSON.parse('{"title":"Cookie","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/cookie.md","filePath":"javascript/cookie.md"}'),r={name:"javascript/cookie.md"},u=Object.assign(r,{setup(k){return(p,t)=>{const a=s("Badge");return o(),h("div",null,[e("h1",d,[t[0]||(t[0]=i("Cookie ",-1)),n(a,{type:"warning",text:"JS"}),t[1]||(t[1]=i()),t[2]||(t[2]=e("a",{class:"header-anchor",href:"#cookie","aria-label":"Permalink to “Cookie”"},"​",-1))]),t[3]||(t[3]=l(`<p>The cookies component make you able to save some data as a cookie.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Cookie </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_cookie&quot;</span></span></code></pre></div><h2 id="javascript" tabindex="-1">Javascript <a class="header-anchor" href="#javascript" aria-label="Permalink to “Javascript”">​</a></h2><p>This component is only in javascript, to use it you must import the javascript file and create a <code>new Cookie</code> object.</p><p>You can customize the name of the cookie when initiate the component.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Cookie </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/utilities/_cookie&quot;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Cookie</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;name_of_the_cookie&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h3 id="methods" tabindex="-1">Methods <a class="header-anchor" href="#methods" aria-label="Permalink to “Methods”">​</a></h3><table tabindex="0"><thead><tr><th>Method</th><th>Description</th></tr></thead><tbody><tr><td>value</td><td>This GET method will return the full cookie value</td></tr><tr><td>set(value)</td><td>This method will save a value as a cookie, the value must be an Object</td></tr><tr><td>has(key)</td><td>This method will check if the cookie has a certain key</td></tr><tr><td>get(key)</td><td>This method will get a key/value saved inside the cookie</td></tr><tr><td>delete()</td><td>This method will delete the cookie</td></tr></tbody></table>`,8))])}}});export{m as __pageData,u as default};

package/public/assets/javascript_cookie.md.D_3Ic9ld.lean.js

@@ -0,0 +1 @@
+/* empty css                                                                                */import{P as s,I as o,f as h,b as e,j as i,k as n,i as l}from"./chunks/framework.CzIb_Ns1.js";const d={id:"cookie",tabindex:"-1"},m=JSON.parse('{"title":"Cookie","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/cookie.md","filePath":"javascript/cookie.md"}'),r={name:"javascript/cookie.md"},u=Object.assign(r,{setup(k){return(p,t)=>{const a=s("Badge");return o(),h("div",null,[e("h1",d,[t[0]||(t[0]=i("Cookie ",-1)),n(a,{type:"warning",text:"JS"}),t[1]||(t[1]=i()),t[2]||(t[2]=e("a",{class:"header-anchor",href:"#cookie","aria-label":"Permalink to “Cookie”"},"​",-1))]),t[3]||(t[3]=l("",8))])}}});export{m as __pageData,u as default};

package/public/assets/{javascript_drawer.md.BCJX3fL-.js → javascript_drawer.md.CWRu0B-m.js}

@@ -1,4 +1,4 @@
-import{C as l}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as h,o as p,c as k,j as i,a,J as t,ai as n,w as r}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const d={id:"drawer",tabindex:"-1"},b=JSON.parse('{"title":"Drawer","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/drawer.md","filePath":"javascript/drawer.md"}'),o={name:"javascript/drawer.md"},F=Object.assign(o,{setup(E){return(g,s)=>{const e=h("Badge");return p(),k("div",null,[i("h1",d,[s[0]||(s[0]=a("Drawer ",-1)),t(e,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#drawer","aria-label":"Permalink to “Drawer”"},"​",-1))]),s[4]||(s[4]=n('<p>The drawer component make you able to toggle a drawer with a button and resize window.</p><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/drawer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”">​</a></h2><p>You can use the classes <code>.drawer</code>, <code>.drawer-button</code> and the id <code>#backdrop</code> to quickly design the drawer with some nice animations.</p>',4)),t(l,{height:"200px"},{default:r(()=>[...s[3]||(s[3]=[i("div",{id:"backdrop"},null,-1),i("button",{class:"drawer-button","aria-expanded":"false","aria-pressed":"false","aria-controls":"drawer","aria-label":"Toggle the drawer"}," Menu ",-1),i("div",{id:"drawer",class:"drawer",hidden:""}," My awsome drawer ! ",-1)])]),_:1}),s[5]||(s[5]=n(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="css properties" for="tab-17">css properties</label><input type="radio" name="group-15" id="tab-18"><label data-title="js" for="tab-18">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;backdrop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as l}from"./chunks/ComponentPreview.CkvDvzXt.js";import{P as h,I as p,f as k,b as i,j as a,k as t,i as n,ag as r}from"./chunks/framework.CzIb_Ns1.js";/* empty css                                                                                */const d={id:"drawer",tabindex:"-1"},b=JSON.parse('{"title":"Drawer","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/drawer.md","filePath":"javascript/drawer.md"}'),o={name:"javascript/drawer.md"},F=Object.assign(o,{setup(E){return(g,s)=>{const e=h("Badge");return p(),k("div",null,[i("h1",d,[s[0]||(s[0]=a("Drawer ",-1)),t(e,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#drawer","aria-label":"Permalink to “Drawer”"},"​",-1))]),s[4]||(s[4]=n('<p>The drawer component make you able to toggle a drawer with a button and resize window.</p><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/drawer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”">​</a></h2><p>You can use the classes <code>.drawer</code>, <code>.drawer-button</code> and the id <code>#backdrop</code> to quickly design the drawer with some nice animations.</p>',4)),t(l,{height:"200px"},{default:r(()=>[...s[3]||(s[3]=[i("div",{id:"backdrop"},null,-1),i("button",{class:"drawer-button","aria-expanded":"false","aria-pressed":"false","aria-controls":"drawer","aria-label":"Toggle the drawer"}," Menu ",-1),i("div",{id:"drawer",class:"drawer",hidden:""}," My awsome drawer ! ",-1)])]),_:1}),s[5]||(s[5]=n(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="css properties" for="tab-17">css properties</label><input type="radio" name="group-15" id="tab-18"><label data-title="js" for="tab-18">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;backdrop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;drawer-button&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-expanded</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-pressed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;drawer&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Toggle the drawer&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    Menu</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/javascript_drawer.md.CWRu0B-m.lean.js

@@ -0,0 +1 @@
+import{C as l}from"./chunks/ComponentPreview.CkvDvzXt.js";import{P as h,I as p,f as k,b as i,j as a,k as t,i as n,ag as r}from"./chunks/framework.CzIb_Ns1.js";/* empty css                                                                                */const d={id:"drawer",tabindex:"-1"},b=JSON.parse('{"title":"Drawer","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/drawer.md","filePath":"javascript/drawer.md"}'),o={name:"javascript/drawer.md"},F=Object.assign(o,{setup(E){return(g,s)=>{const e=h("Badge");return p(),k("div",null,[i("h1",d,[s[0]||(s[0]=a("Drawer ",-1)),t(e,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#drawer","aria-label":"Permalink to “Drawer”"},"​",-1))]),s[4]||(s[4]=n("",4)),t(l,{height:"200px"},{default:r(()=>[...s[3]||(s[3]=[i("div",{id:"backdrop"},null,-1),i("button",{class:"drawer-button","aria-expanded":"false","aria-pressed":"false","aria-controls":"drawer","aria-label":"Toggle the drawer"}," Menu ",-1),i("div",{id:"drawer",class:"drawer",hidden:""}," My awsome drawer ! ",-1)])]),_:1}),s[5]||(s[5]=n("",10))])}}});export{b as __pageData,F as default};

package/public/assets/{javascript_form.md.Cwf_gxLI.js → javascript_form.md.D-qLhbu6.js}

@@ -1,4 +1,4 @@
-import{C as l}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as k,o as p,c as d,j as s,a as n,J as a,ai as t,w as h}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const E={id:"form",tabindex:"-1"},c=JSON.parse('{"title":"Form","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/form.md","filePath":"javascript/form.md"}'),r={name:"javascript/form.md"},m=Object.assign(r,{setup(o){return(g,i)=>{const e=k("Badge");return p(),d("div",null,[s("h1",E,[i[0]||(i[0]=n("Form ",-1)),a(e,{type:"warning",text:"JS"}),i[1]||(i[1]=n()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#form","aria-label":"Permalink to “Form”"},"​",-1))]),i[5]||(i[5]=t('<div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> FormHelper </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/utilities/_form-helper&quot;</span></span></code></pre></div><h2 id="password-visibility" tabindex="-1">Password visibility <a class="header-anchor" href="#password-visibility" aria-label="Permalink to “Password visibility”">​</a></h2><p>You can toggle the visibility of a password field.</p><p>The <code>&lt;button&gt;</code> must have an <code>aria-controls=&quot;IdOfTheInput&quot;</code> and an <code>aria-pressed</code> attributes.</p><p>This helper gonna change the type of the input, and it will toggle the <code>aria-pressed</code> attribute of the <code>&lt;button&gt;</code>.</p>',5)),a(l,null,{default:h(()=>[...i[3]||(i[3]=[s("fieldset",null,[s("legend",null,"Password"),s("div",{class:"group"},[s("input",{id:"myPassword",type:"password",name:"password",value:"123456"}),s("button",{id:"demoPassword","aria-controls":"myPassword","aria-pressed":"false","aria-label":"Expandable the visibility of the password"}," Show ")])],-1)])]),_:1}),i[6]||(i[6]=t(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-18" id="tab-19" checked><label data-title="html" for="tab-19">html</label><input type="radio" name="group-18" id="tab-20"><label data-title="js" for="tab-20">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as l}from"./chunks/ComponentPreview.CkvDvzXt.js";import{P as k,I as p,f as d,b as s,j as n,k as a,i as t,ag as h}from"./chunks/framework.CzIb_Ns1.js";/* empty css                                                                                */const E={id:"form",tabindex:"-1"},c=JSON.parse('{"title":"Form","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/form.md","filePath":"javascript/form.md"}'),r={name:"javascript/form.md"},m=Object.assign(r,{setup(o){return(g,i)=>{const e=k("Badge");return p(),d("div",null,[s("h1",E,[i[0]||(i[0]=n("Form ",-1)),a(e,{type:"warning",text:"JS"}),i[1]||(i[1]=n()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#form","aria-label":"Permalink to “Form”"},"​",-1))]),i[5]||(i[5]=t('<div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> FormHelper </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/utilities/_form-helper&quot;</span></span></code></pre></div><h2 id="password-visibility" tabindex="-1">Password visibility <a class="header-anchor" href="#password-visibility" aria-label="Permalink to “Password visibility”">​</a></h2><p>You can toggle the visibility of a password field.</p><p>The <code>&lt;button&gt;</code> must have an <code>aria-controls=&quot;IdOfTheInput&quot;</code> and an <code>aria-pressed</code> attributes.</p><p>This helper gonna change the type of the input, and it will toggle the <code>aria-pressed</code> attribute of the <code>&lt;button&gt;</code>.</p>',5)),a(l,null,{default:h(()=>[...i[3]||(i[3]=[s("fieldset",null,[s("legend",null,"Password"),s("div",{class:"group"},[s("input",{id:"myPassword",type:"password",name:"password",value:"123456"}),s("button",{id:"demoPassword","aria-controls":"myPassword","aria-pressed":"false","aria-label":"Expandable the visibility of the password"}," Show ")])],-1)])]),_:1}),i[6]||(i[6]=t(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-18" id="tab-19" checked><label data-title="html" for="tab-19">html</label><input type="radio" name="group-18" id="tab-20"><label data-title="js" for="tab-20">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fieldset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Password&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;group&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;myPassword&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;password&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;password&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;123456&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/{javascript_form.md.Cwf_gxLI.lean.js → javascript_form.md.D-qLhbu6.lean.js}

@@ -1,2 +1,2 @@
-import{C as l}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as k,o as p,c as d,j as s,a as n,J as a,ai as t,w as h}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const E={id:"form",tabindex:"-1"},c=JSON.parse('{"title":"Form","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/form.md","filePath":"javascript/form.md"}'),r={name:"javascript/form.md"},m=Object.assign(r,{setup(o){return(g,i)=>{const e=k("Badge");return p(),d("div",null,[s("h1",E,[i[0]||(i[0]=n("Form ",-1)),a(e,{type:"warning",text:"JS"}),i[1]||(i[1]=n()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#form","aria-label":"Permalink to “Form”"},"​",-1))]),i[5]||(i[5]=t("",5)),a(l,null,{default:h(()=>[...i[3]||(i[3]=[s("fieldset",null,[s("legend",null,"Password"),s("div",{class:"group"},[s("input",{id:"myPassword",type:"password",name:"password",value:"123456"}),s("button",{id:"demoPassword","aria-controls":"myPassword","aria-pressed":"false","aria-label":"Expandable the visibility of the password"}," Show ")])],-1)])]),_:1}),i[6]||(i[6]=t("",4)),a(l,null,{default:h(()=>[...i[4]||(i[4]=[s("button",{id:"toggleFormButton","aria-controls":"toggleFormContent","aria-expanded":"true","aria-pressed":"true"},"Toggle",-1),s("div",{id:"toggleFormContent"},[s("input",{name:"test",type:"text",value:"Some input",required:""}),s("textarea",null,`                            Some textarea
+import{C as l}from"./chunks/ComponentPreview.CkvDvzXt.js";import{P as k,I as p,f as d,b as s,j as n,k as a,i as t,ag as h}from"./chunks/framework.CzIb_Ns1.js";/* empty css                                                                                */const E={id:"form",tabindex:"-1"},c=JSON.parse('{"title":"Form","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/form.md","filePath":"javascript/form.md"}'),r={name:"javascript/form.md"},m=Object.assign(r,{setup(o){return(g,i)=>{const e=k("Badge");return p(),d("div",null,[s("h1",E,[i[0]||(i[0]=n("Form ",-1)),a(e,{type:"warning",text:"JS"}),i[1]||(i[1]=n()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#form","aria-label":"Permalink to “Form”"},"​",-1))]),i[5]||(i[5]=t("",5)),a(l,null,{default:h(()=>[...i[3]||(i[3]=[s("fieldset",null,[s("legend",null,"Password"),s("div",{class:"group"},[s("input",{id:"myPassword",type:"password",name:"password",value:"123456"}),s("button",{id:"demoPassword","aria-controls":"myPassword","aria-pressed":"false","aria-label":"Expandable the visibility of the password"}," Show ")])],-1)])]),_:1}),i[6]||(i[6]=t("",4)),a(l,null,{default:h(()=>[...i[4]||(i[4]=[s("button",{id:"toggleFormButton","aria-controls":"toggleFormContent","aria-expanded":"true","aria-pressed":"true"},"Toggle",-1),s("div",{id:"toggleFormContent"},[s("input",{name:"test",type:"text",value:"Some input",required:""}),s("textarea",null,`                            Some textarea
     `),s("select",null,[s("option",{value:"null"},"--"),s("option",{value:"1",selected:""},"Lorem"),s("option",{value:"2"},"Perferendis"),s("option",{value:"3"},"Officiis")]),s("input",{type:"checkbox",checked:""})],-1)])]),_:1}),i[7]||(i[7]=t("",5))])}}});export{c as __pageData,m as default};

package/public/assets/{javascript_scroll.md.BrJijWbF.js → javascript_scroll.md.C44cHQBa.js}

@@ -1,4 +1,4 @@
-import{C as n}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as h,o as p,c as r,j as i,a as t,J as a,ai as e,w as o}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const k={id:"scroll",tabindex:"-1"},y=JSON.parse('{"title":"Scroll","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/scroll.md","filePath":"javascript/scroll.md"}'),d={name:"javascript/scroll.md"},b=Object.assign(d,{setup(E){return(g,s)=>{const l=h("Badge");return p(),r("div",null,[i("h1",k,[s[0]||(s[0]=t("Scroll ",-1)),a(l,{type:"warning",text:"JS"}),s[1]||(s[1]=t()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#scroll","aria-label":"Permalink to “Scroll”"},"​",-1))]),s[4]||(s[4]=e('<div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Scroll </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_scroll&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”">​</a></h2><p>The scroll component make you able to add some <code>&lt;button&gt;</code> to go on the top or bottom of an element.</p><p>It also make you able to spy on a <code>&lt;nav&gt;</code> to automatically set the <code>current</code> attribute on links when scrolling.</p>',4)),a(n,null,{default:o(()=>[...s[3]||(s[3]=[i("nav",{id:"demoScrollNav"},[i("ul",{class:"list"},[i("li",null,[i("a",{role:"button",href:"#target1","aria-current":"location"},"One")]),i("li",null,[i("a",{role:"button",href:"#target2"},"Two")]),i("li",null,[i("a",{role:"button",href:"#target3"},"Three")]),i("li",null,[i("button",{"data-scroll-bottom":"demoScrollSpy"},"Scroll to the bottom")]),i("li",null,[i("button",{"data-scroll-top":"demoScrollSpy"},"Scroll to the top")])])],-1),i("div",{id:"demoScrollSpy",style:{height:"150px","overflow-y":"scroll",position:"relative"}},[i("div",null,[i("p",{id:"target1"},"1) Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt?"),i("p",{id:"target2"},"2) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas."),i("p",{id:"target3"},"3) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.")])],-1)])]),_:1}),s[5]||(s[5]=e(`<div class="warning custom-block"><p class="custom-block-title custom-block-title-default">WARNING</p><p>To work on the <code>&lt;body&gt;</code>, you must passed the <code>document.documentElement</code> as parameter.</p></div><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-20" id="tab-21" checked><label data-title="html" for="tab-21">html</label><input type="radio" name="group-20" id="tab-22"><label data-title="js" for="tab-22">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demoScrollNav&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as n}from"./chunks/ComponentPreview.CkvDvzXt.js";import{P as h,I as p,f as r,b as i,j as t,k as a,i as e,ag as o}from"./chunks/framework.CzIb_Ns1.js";/* empty css                                                                                */const k={id:"scroll",tabindex:"-1"},y=JSON.parse('{"title":"Scroll","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/scroll.md","filePath":"javascript/scroll.md"}'),d={name:"javascript/scroll.md"},b=Object.assign(d,{setup(E){return(g,s)=>{const l=h("Badge");return p(),r("div",null,[i("h1",k,[s[0]||(s[0]=t("Scroll ",-1)),a(l,{type:"warning",text:"JS"}),s[1]||(s[1]=t()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#scroll","aria-label":"Permalink to “Scroll”"},"​",-1))]),s[4]||(s[4]=e('<div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Scroll </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_scroll&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”">​</a></h2><p>The scroll component make you able to add some <code>&lt;button&gt;</code> to go on the top or bottom of an element.</p><p>It also make you able to spy on a <code>&lt;nav&gt;</code> to automatically set the <code>current</code> attribute on links when scrolling.</p>',4)),a(n,null,{default:o(()=>[...s[3]||(s[3]=[i("nav",{id:"demoScrollNav"},[i("ul",{class:"list"},[i("li",null,[i("a",{role:"button",href:"#target1","aria-current":"location"},"One")]),i("li",null,[i("a",{role:"button",href:"#target2"},"Two")]),i("li",null,[i("a",{role:"button",href:"#target3"},"Three")]),i("li",null,[i("button",{"data-scroll-bottom":"demoScrollSpy"},"Scroll to the bottom")]),i("li",null,[i("button",{"data-scroll-top":"demoScrollSpy"},"Scroll to the top")])])],-1),i("div",{id:"demoScrollSpy",style:{height:"150px","overflow-y":"scroll",position:"relative"}},[i("div",null,[i("p",{id:"target1"},"1) Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt?"),i("p",{id:"target2"},"2) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas."),i("p",{id:"target3"},"3) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.")])],-1)])]),_:1}),s[5]||(s[5]=e(`<div class="warning custom-block"><p class="custom-block-title custom-block-title-default">WARNING</p><p>To work on the <code>&lt;body&gt;</code>, you must passed the <code>document.documentElement</code> as parameter.</p></div><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-20" id="tab-21" checked><label data-title="html" for="tab-21">html</label><input type="radio" name="group-20" id="tab-22"><label data-title="js" for="tab-22">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demoScrollNav&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;list&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;button&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#target1&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-current</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;location&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;One&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;button&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#target2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Two&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/{javascript_scroll.md.BrJijWbF.lean.js → javascript_scroll.md.C44cHQBa.lean.js}

@@ -1 +1 @@
-import{C as n}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as h,o as p,c as r,j as i,a as t,J as a,ai as e,w as o}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const k={id:"scroll",tabindex:"-1"},y=JSON.parse('{"title":"Scroll","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/scroll.md","filePath":"javascript/scroll.md"}'),d={name:"javascript/scroll.md"},b=Object.assign(d,{setup(E){return(g,s)=>{const l=h("Badge");return p(),r("div",null,[i("h1",k,[s[0]||(s[0]=t("Scroll ",-1)),a(l,{type:"warning",text:"JS"}),s[1]||(s[1]=t()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#scroll","aria-label":"Permalink to “Scroll”"},"​",-1))]),s[4]||(s[4]=e("",4)),a(n,null,{default:o(()=>[...s[3]||(s[3]=[i("nav",{id:"demoScrollNav"},[i("ul",{class:"list"},[i("li",null,[i("a",{role:"button",href:"#target1","aria-current":"location"},"One")]),i("li",null,[i("a",{role:"button",href:"#target2"},"Two")]),i("li",null,[i("a",{role:"button",href:"#target3"},"Three")]),i("li",null,[i("button",{"data-scroll-bottom":"demoScrollSpy"},"Scroll to the bottom")]),i("li",null,[i("button",{"data-scroll-top":"demoScrollSpy"},"Scroll to the top")])])],-1),i("div",{id:"demoScrollSpy",style:{height:"150px","overflow-y":"scroll",position:"relative"}},[i("div",null,[i("p",{id:"target1"},"1) Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt?"),i("p",{id:"target2"},"2) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas."),i("p",{id:"target3"},"3) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.")])],-1)])]),_:1}),s[5]||(s[5]=e("",8))])}}});export{y as __pageData,b as default};
+import{C as n}from"./chunks/ComponentPreview.CkvDvzXt.js";import{P as h,I as p,f as r,b as i,j as t,k as a,i as e,ag as o}from"./chunks/framework.CzIb_Ns1.js";/* empty css                                                                                */const k={id:"scroll",tabindex:"-1"},y=JSON.parse('{"title":"Scroll","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/scroll.md","filePath":"javascript/scroll.md"}'),d={name:"javascript/scroll.md"},b=Object.assign(d,{setup(E){return(g,s)=>{const l=h("Badge");return p(),r("div",null,[i("h1",k,[s[0]||(s[0]=t("Scroll ",-1)),a(l,{type:"warning",text:"JS"}),s[1]||(s[1]=t()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#scroll","aria-label":"Permalink to “Scroll”"},"​",-1))]),s[4]||(s[4]=e("",4)),a(n,null,{default:o(()=>[...s[3]||(s[3]=[i("nav",{id:"demoScrollNav"},[i("ul",{class:"list"},[i("li",null,[i("a",{role:"button",href:"#target1","aria-current":"location"},"One")]),i("li",null,[i("a",{role:"button",href:"#target2"},"Two")]),i("li",null,[i("a",{role:"button",href:"#target3"},"Three")]),i("li",null,[i("button",{"data-scroll-bottom":"demoScrollSpy"},"Scroll to the bottom")]),i("li",null,[i("button",{"data-scroll-top":"demoScrollSpy"},"Scroll to the top")])])],-1),i("div",{id:"demoScrollSpy",style:{height:"150px","overflow-y":"scroll",position:"relative"}},[i("div",null,[i("p",{id:"target1"},"1) Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt?"),i("p",{id:"target2"},"2) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas."),i("p",{id:"target3"},"3) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.")])],-1)])]),_:1}),s[5]||(s[5]=e("",8))])}}});export{y as __pageData,b as default};

package/public/assets/{javascript_slider.md.DDO8wC4u.js → javascript_slider.md.BoBh8ko0.js}

@@ -1,4 +1,4 @@
-import{C as n}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as k,o as e,c as p,j as s,a,J as t,ai as h,w as d}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const r={id:"slider",tabindex:"-1"},u=JSON.parse('{"title":"Slider","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/slider.md","filePath":"javascript/slider.md"}'),E={name:"javascript/slider.md"},b=Object.assign(E,{setup(o){return(g,i)=>{const l=k("Badge");return e(),p("div",null,[s("h1",r,[i[0]||(i[0]=a("Slider ",-1)),t(l,{type:"warning",text:"JS"}),i[1]||(i[1]=a()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#slider","aria-label":"Permalink to “Slider”"},"​",-1))]),i[4]||(i[4]=h('<div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/slider&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”">​</a></h2><p>The slider is using the a <code>&lt;div&gt;</code> tag with the class <code>.slider.</code></p><p>Each slide must be a <code>&lt;div&gt;</code> with <code>role=&quot;tabpanel&quot;</code> and <code>aria-hidden=&quot;true&quot;</code> attributes.</p>',4)),t(n,null,{default:d(()=>[...i[3]||(i[3]=[s("div",{id:"slider",class:"slider"},[s("div",{id:"slide1",role:"tabpanel","aria-hidden":"false"},[s("img",{src:"https://picsum.photos/id/1/300",alt:"Image 1"})]),s("div",{id:"slide2",role:"tabpanel","aria-hidden":"true"},[s("img",{src:"https://picsum.photos/id/2/300",alt:"Image 2"})]),s("div",{id:"slide3",role:"tabpanel","aria-hidden":"true"},[s("img",{src:"https://picsum.photos/id/3/300",alt:"Image 3"})])],-1),s("button",{"aria-controls":"slider","data-slider-prev":""},"previous",-1),s("div",{"aria-controls":"slider",role:"tablist"},[s("button",{role:"tab","aria-controls":"slide1","aria-selected":"true"},"1"),s("button",{role:"tab","aria-controls":"slide2","aria-selected":"false"},"2"),s("button",{role:"tab","aria-controls":"slide3","aria-selected":"false"},"3")],-1),s("button",{"aria-controls":"slider","data-slider-next":""},"next",-1)])]),_:1}),i[5]||(i[5]=h(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="css properties" for="tab-17">css properties</label><input type="radio" name="group-15" id="tab-18"><label data-title="js" for="tab-18">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slider&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as n}from"./chunks/ComponentPreview.CkvDvzXt.js";import{P as k,I as e,f as p,b as s,j as a,k as t,i as h,ag as d}from"./chunks/framework.CzIb_Ns1.js";/* empty css                                                                                */const r={id:"slider",tabindex:"-1"},u=JSON.parse('{"title":"Slider","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/slider.md","filePath":"javascript/slider.md"}'),E={name:"javascript/slider.md"},b=Object.assign(E,{setup(o){return(g,i)=>{const l=k("Badge");return e(),p("div",null,[s("h1",r,[i[0]||(i[0]=a("Slider ",-1)),t(l,{type:"warning",text:"JS"}),i[1]||(i[1]=a()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#slider","aria-label":"Permalink to “Slider”"},"​",-1))]),i[4]||(i[4]=h('<div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/components/slider&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”">​</a></h2><p>The slider is using the a <code>&lt;div&gt;</code> tag with the class <code>.slider.</code></p><p>Each slide must be a <code>&lt;div&gt;</code> with <code>role=&quot;tabpanel&quot;</code> and <code>aria-hidden=&quot;true&quot;</code> attributes.</p>',4)),t(n,null,{default:d(()=>[...i[3]||(i[3]=[s("div",{id:"slider",class:"slider"},[s("div",{id:"slide1",role:"tabpanel","aria-hidden":"false"},[s("img",{src:"https://picsum.photos/id/1/300",alt:"Image 1"})]),s("div",{id:"slide2",role:"tabpanel","aria-hidden":"true"},[s("img",{src:"https://picsum.photos/id/2/300",alt:"Image 2"})]),s("div",{id:"slide3",role:"tabpanel","aria-hidden":"true"},[s("img",{src:"https://picsum.photos/id/3/300",alt:"Image 3"})])],-1),s("button",{"aria-controls":"slider","data-slider-prev":""},"previous",-1),s("div",{"aria-controls":"slider",role:"tablist"},[s("button",{role:"tab","aria-controls":"slide1","aria-selected":"true"},"1"),s("button",{role:"tab","aria-controls":"slide2","aria-selected":"false"},"2"),s("button",{role:"tab","aria-controls":"slide3","aria-selected":"false"},"3")],-1),s("button",{"aria-controls":"slider","data-slider-next":""},"next",-1)])]),_:1}),i[5]||(i[5]=h(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="css properties" for="tab-17">css properties</label><input type="radio" name="group-15" id="tab-18"><label data-title="js" for="tab-18">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slider&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slide1&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tabpanel&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://picsum.photos/id/1/300&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> alt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Image 1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slide2&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tabpanel&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://picsum.photos/id/2/300&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> alt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Image 2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slide3&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tabpanel&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://picsum.photos/id/3/300&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> alt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Image 3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/javascript_slider.md.BoBh8ko0.lean.js

@@ -0,0 +1 @@
+import{C as n}from"./chunks/ComponentPreview.CkvDvzXt.js";import{P as k,I as e,f as p,b as s,j as a,k as t,i as h,ag as d}from"./chunks/framework.CzIb_Ns1.js";/* empty css                                                                                */const r={id:"slider",tabindex:"-1"},u=JSON.parse('{"title":"Slider","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/slider.md","filePath":"javascript/slider.md"}'),E={name:"javascript/slider.md"},b=Object.assign(E,{setup(o){return(g,i)=>{const l=k("Badge");return e(),p("div",null,[s("h1",r,[i[0]||(i[0]=a("Slider ",-1)),t(l,{type:"warning",text:"JS"}),i[1]||(i[1]=a()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#slider","aria-label":"Permalink to “Slider”"},"​",-1))]),i[4]||(i[4]=h("",4)),t(n,null,{default:d(()=>[...i[3]||(i[3]=[s("div",{id:"slider",class:"slider"},[s("div",{id:"slide1",role:"tabpanel","aria-hidden":"false"},[s("img",{src:"https://picsum.photos/id/1/300",alt:"Image 1"})]),s("div",{id:"slide2",role:"tabpanel","aria-hidden":"true"},[s("img",{src:"https://picsum.photos/id/2/300",alt:"Image 2"})]),s("div",{id:"slide3",role:"tabpanel","aria-hidden":"true"},[s("img",{src:"https://picsum.photos/id/3/300",alt:"Image 3"})])],-1),s("button",{"aria-controls":"slider","data-slider-prev":""},"previous",-1),s("div",{"aria-controls":"slider",role:"tablist"},[s("button",{role:"tab","aria-controls":"slide1","aria-selected":"true"},"1"),s("button",{role:"tab","aria-controls":"slide2","aria-selected":"false"},"2"),s("button",{role:"tab","aria-controls":"slide3","aria-selected":"false"},"3")],-1),s("button",{"aria-controls":"slider","data-slider-next":""},"next",-1)])]),_:1}),i[5]||(i[5]=h("",20))])}}});export{u as __pageData,b as default};

package/public/assets/{javascript_sortable.md.BKyem7yw.js → javascript_sortable.md.DherROA3.js}

@@ -1,4 +1,4 @@
-import{C as h}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as k,o as p,c as d,j as i,a,J as t,ai as l,w as n}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const E={id:"sortable",tabindex:"-1"},F=JSON.parse('{"title":"Sortable","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/sortable.md","filePath":"javascript/sortable.md"}'),r={name:"javascript/sortable.md"},u=Object.assign(r,{setup(g){return(o,s)=>{const e=k("Badge");return p(),d("div",null,[i("h1",E,[s[0]||(s[0]=a("Sortable ",-1)),t(e,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#sortable","aria-label":"Permalink to “Sortable”"},"​",-1))]),s[5]||(s[5]=l('<div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Sortable </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_sortable&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”">​</a></h2><p>The sortable component make you able to change the order of a list..</p><p>The list can be an <code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code>, <code>&lt;div&gt;</code> or <code>&lt;tbody&gt;</code> tag.</p><p>Each children must have a <code>draggable=&quot;false&quot;</code> attribute. The attribute will be changed when drag start.</p>',5)),t(h,null,{default:n(()=>[...s[3]||(s[3]=[i("ul",{d:"mySortableList",class:"demo-sortable"},[i("li",{draggable:"false"},"Lorem, ipsum."),i("li",{draggable:"false"},"Impedit, quod!"),i("li",{draggable:"false"},"Repudiandae, rerum."),i("li",{draggable:"false"},"Ab, doloremque!"),i("li",{draggable:"false"},"Totam, consectetur."),i("li",{draggable:"false"},"Laborum, cum!")],-1)])]),_:1}),s[6]||(s[6]=l(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-18" id="tab-19" checked><label data-title="html" for="tab-19">html</label><input type="radio" name="group-18" id="tab-20"><label data-title="js" for="tab-20">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mySortableList&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demo-sortable&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as h}from"./chunks/ComponentPreview.CkvDvzXt.js";import{P as k,I as p,f as d,b as i,j as a,k as t,i as l,ag as n}from"./chunks/framework.CzIb_Ns1.js";/* empty css                                                                                */const E={id:"sortable",tabindex:"-1"},F=JSON.parse('{"title":"Sortable","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/sortable.md","filePath":"javascript/sortable.md"}'),r={name:"javascript/sortable.md"},u=Object.assign(r,{setup(g){return(o,s)=>{const e=k("Badge");return p(),d("div",null,[i("h1",E,[s[0]||(s[0]=a("Sortable ",-1)),t(e,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#sortable","aria-label":"Permalink to “Sortable”"},"​",-1))]),s[5]||(s[5]=l('<div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Sortable </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_sortable&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”">​</a></h2><p>The sortable component make you able to change the order of a list..</p><p>The list can be an <code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code>, <code>&lt;div&gt;</code> or <code>&lt;tbody&gt;</code> tag.</p><p>Each children must have a <code>draggable=&quot;false&quot;</code> attribute. The attribute will be changed when drag start.</p>',5)),t(h,null,{default:n(()=>[...s[3]||(s[3]=[i("ul",{d:"mySortableList",class:"demo-sortable"},[i("li",{draggable:"false"},"Lorem, ipsum."),i("li",{draggable:"false"},"Impedit, quod!"),i("li",{draggable:"false"},"Repudiandae, rerum."),i("li",{draggable:"false"},"Ab, doloremque!"),i("li",{draggable:"false"},"Totam, consectetur."),i("li",{draggable:"false"},"Laborum, cum!")],-1)])]),_:1}),s[6]||(s[6]=l(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-18" id="tab-19" checked><label data-title="html" for="tab-19">html</label><input type="radio" name="group-18" id="tab-20"><label data-title="js" for="tab-20">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mySortableList&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demo-sortable&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> draggable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Lorem, ipsum.&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> draggable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Impedit, quod!&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> draggable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Repudiandae, rerum.&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/javascript_sortable.md.DherROA3.lean.js

@@ -0,0 +1 @@
+import{C as h}from"./chunks/ComponentPreview.CkvDvzXt.js";import{P as k,I as p,f as d,b as i,j as a,k as t,i as l,ag as n}from"./chunks/framework.CzIb_Ns1.js";/* empty css                                                                                */const E={id:"sortable",tabindex:"-1"},F=JSON.parse('{"title":"Sortable","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/sortable.md","filePath":"javascript/sortable.md"}'),r={name:"javascript/sortable.md"},u=Object.assign(r,{setup(g){return(o,s)=>{const e=k("Badge");return p(),d("div",null,[i("h1",E,[s[0]||(s[0]=a("Sortable ",-1)),t(e,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#sortable","aria-label":"Permalink to “Sortable”"},"​",-1))]),s[5]||(s[5]=l("",5)),t(h,null,{default:n(()=>[...s[3]||(s[3]=[i("ul",{d:"mySortableList",class:"demo-sortable"},[i("li",{draggable:"false"},"Lorem, ipsum."),i("li",{draggable:"false"},"Impedit, quod!"),i("li",{draggable:"false"},"Repudiandae, rerum."),i("li",{draggable:"false"},"Ab, doloremque!"),i("li",{draggable:"false"},"Totam, consectetur."),i("li",{draggable:"false"},"Laborum, cum!")],-1)])]),_:1}),s[6]||(s[6]=l("",4)),t(h,null,{default:n(()=>[...s[4]||(s[4]=[i("ul",{id:"mySortableListWithHandle",class:"demo-sortable"},[i("li",{draggable:"false"},[i("b",{"data-handle":"sortable"}," Handle "),a(" Lorem, ipsum. ")]),i("li",{draggable:"false"},[i("b",{"data-handle":"sortable"}," Handle "),a(" Impedit, quod! ")]),i("li",{draggable:"false"},[i("b",{"data-handle":"sortable"}," Handle "),a(" Repudiandae, rerum. ")])],-1)])]),_:1}),s[7]||(s[7]=l("",7))])}}});export{F as __pageData,u as default};

package/public/assets/{javascript_tabpanel.md.D9M-_xE0.js → javascript_tabpanel.md.ZRDCRbR4.js}

@@ -1,4 +1,4 @@
-import{C as h}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as e,o as k,c as p,j as i,a,J as t,ai as n,w as E}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const d={id:"tabpanel",tabindex:"-1"},c=JSON.parse('{"title":"Tabpanel","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/tabpanel.md","filePath":"javascript/tabpanel.md"}'),r={name:"javascript/tabpanel.md"},u=Object.assign(r,{setup(g){return(o,s)=>{const l=e("Badge");return k(),p("div",null,[i("h1",d,[s[0]||(s[0]=a("Tabpanel ",-1)),t(l,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#tabpanel","aria-label":"Permalink to “Tabpanel”"},"​",-1))]),s[4]||(s[4]=n('<div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Tabpanel </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_tabpanel&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”">​</a></h2><p>The tabpanel component make you able to make some elements visible by some <code>&lt;button&gt;</code>.</p><p>The button must have an <code>aria-controls=&quot;IdOfElement&quot;</code>, an <code>aria-expanded</code> and a <code>aria-pressed</code> attributes.</p>',4)),t(h,null,{default:E(()=>[...s[3]||(s[3]=[i("div",{id:"myPanel"},[i("div",{role:"tablist","aria-label":"My demo tabpanel"},[i("button",{id:"tab-1",role:"tab","aria-controls":"one"},"One"),i("button",{id:"tab-2",role:"tab","aria-controls":"two"},"Two")]),i("div",{id:"one",role:"tabpanel","aria-labelledby":"tab-1"}," This is the first panel "),i("div",{id:"two",role:"tabpanel","aria-labelledby":"tab-2"}," This is the seconde panel ")],-1)])]),_:1}),s[5]||(s[5]=n(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="js" for="tab-17">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;myPanel&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as h}from"./chunks/ComponentPreview.CkvDvzXt.js";import{P as e,I as k,f as p,b as i,j as a,k as t,i as n,ag as E}from"./chunks/framework.CzIb_Ns1.js";/* empty css                                                                                */const d={id:"tabpanel",tabindex:"-1"},c=JSON.parse('{"title":"Tabpanel","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/tabpanel.md","filePath":"javascript/tabpanel.md"}'),r={name:"javascript/tabpanel.md"},u=Object.assign(r,{setup(g){return(o,s)=>{const l=e("Badge");return k(),p("div",null,[i("h1",d,[s[0]||(s[0]=a("Tabpanel ",-1)),t(l,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#tabpanel","aria-label":"Permalink to “Tabpanel”"},"​",-1))]),s[4]||(s[4]=n('<div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Tabpanel </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_tabpanel&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”">​</a></h2><p>The tabpanel component make you able to make some elements visible by some <code>&lt;button&gt;</code>.</p><p>The button must have an <code>aria-controls=&quot;IdOfElement&quot;</code>, an <code>aria-expanded</code> and a <code>aria-pressed</code> attributes.</p>',4)),t(h,null,{default:E(()=>[...s[3]||(s[3]=[i("div",{id:"myPanel"},[i("div",{role:"tablist","aria-label":"My demo tabpanel"},[i("button",{id:"tab-1",role:"tab","aria-controls":"one"},"One"),i("button",{id:"tab-2",role:"tab","aria-controls":"two"},"Two")]),i("div",{id:"one",role:"tabpanel","aria-labelledby":"tab-1"}," This is the first panel "),i("div",{id:"two",role:"tabpanel","aria-labelledby":"tab-2"}," This is the seconde panel ")],-1)])]),_:1}),s[5]||(s[5]=n(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="js" for="tab-17">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;myPanel&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tablist&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;My demo tabpanel&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tab-1&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tab&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;one&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;One&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tab-2&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tab&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;two&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Two&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/javascript_tabpanel.md.ZRDCRbR4.lean.js

@@ -0,0 +1 @@
+import{C as h}from"./chunks/ComponentPreview.CkvDvzXt.js";import{P as e,I as k,f as p,b as i,j as a,k as t,i as n,ag as E}from"./chunks/framework.CzIb_Ns1.js";/* empty css                                                                                */const d={id:"tabpanel",tabindex:"-1"},c=JSON.parse('{"title":"Tabpanel","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/tabpanel.md","filePath":"javascript/tabpanel.md"}'),r={name:"javascript/tabpanel.md"},u=Object.assign(r,{setup(g){return(o,s)=>{const l=e("Badge");return k(),p("div",null,[i("h1",d,[s[0]||(s[0]=a("Tabpanel ",-1)),t(l,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#tabpanel","aria-label":"Permalink to “Tabpanel”"},"​",-1))]),s[4]||(s[4]=n("",4)),t(h,null,{default:E(()=>[...s[3]||(s[3]=[i("div",{id:"myPanel"},[i("div",{role:"tablist","aria-label":"My demo tabpanel"},[i("button",{id:"tab-1",role:"tab","aria-controls":"one"},"One"),i("button",{id:"tab-2",role:"tab","aria-controls":"two"},"Two")]),i("div",{id:"one",role:"tabpanel","aria-labelledby":"tab-1"}," This is the first panel "),i("div",{id:"two",role:"tabpanel","aria-labelledby":"tab-2"}," This is the seconde panel ")],-1)])]),_:1}),s[5]||(s[5]=n("",5))])}}});export{c as __pageData,u as default};

package/public/assets/{javascript_toggle.md.C8582WNC.js → javascript_toggle.md.xDX51dR9.js}

@@ -1,4 +1,4 @@
-import{C as h}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as e,o as p,c as E,j as s,a as k,J as a,ai as t,w as l}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const d={id:"toggle",tabindex:"-1"},u=JSON.parse('{"title":"Toggle","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/toggle.md","filePath":"javascript/toggle.md"}'),g={name:"javascript/toggle.md"},B=Object.assign(g,{setup(r){return(o,i)=>{const n=e("Badge");return p(),E("div",null,[s("h1",d,[i[0]||(i[0]=k("Toggle ",-1)),a(n,{type:"warning",text:"JS"}),i[1]||(i[1]=k()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#toggle","aria-label":"Permalink to “Toggle”"},"​",-1))]),i[8]||(i[8]=t('<div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Toggle </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_toggle&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”">​</a></h2><p>The toggle component make you able to show/hide some elements by a <code>&lt;button&gt;</code>.</p><p>The button must have an <code>aria-controls=&quot;IdOfElement&quot;</code>, an <code>aria-expanded</code> and a <code>aria-pressed</code> attributes.</p>',4)),a(h,{height:"200px"},{default:l(()=>[...i[3]||(i[3]=[s("button",{id:"toggle",class:"demo-toggle","aria-controls":"collapse","aria-expanded":"false","aria-pressed":"false"},"Toggle",-1),s("div",{id:"collapse",tabindex:"0",hidden:""}," Hello there ! ",-1)])]),_:1}),i[9]||(i[9]=t(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="js" for="tab-17">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;toggle&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demo-toggle&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;collapse&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-expanded</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-pressed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Toggle&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as h}from"./chunks/ComponentPreview.CkvDvzXt.js";import{P as e,I as p,f as E,b as s,j as k,k as a,i as t,ag as l}from"./chunks/framework.CzIb_Ns1.js";/* empty css                                                                                */const d={id:"toggle",tabindex:"-1"},u=JSON.parse('{"title":"Toggle","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/toggle.md","filePath":"javascript/toggle.md"}'),g={name:"javascript/toggle.md"},B=Object.assign(g,{setup(r){return(o,i)=>{const n=e("Badge");return p(),E("div",null,[s("h1",d,[i[0]||(i[0]=k("Toggle ",-1)),a(n,{type:"warning",text:"JS"}),i[1]||(i[1]=k()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#toggle","aria-label":"Permalink to “Toggle”"},"​",-1))]),i[8]||(i[8]=t('<div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Toggle </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_toggle&quot;</span></span></code></pre></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”">​</a></h2><p>The toggle component make you able to show/hide some elements by a <code>&lt;button&gt;</code>.</p><p>The button must have an <code>aria-controls=&quot;IdOfElement&quot;</code>, an <code>aria-expanded</code> and a <code>aria-pressed</code> attributes.</p>',4)),a(h,{height:"200px"},{default:l(()=>[...i[3]||(i[3]=[s("button",{id:"toggle",class:"demo-toggle","aria-controls":"collapse","aria-expanded":"false","aria-pressed":"false"},"Toggle",-1),s("div",{id:"collapse",tabindex:"0",hidden:""}," Hello there ! ",-1)])]),_:1}),i[9]||(i[9]=t(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="js" for="tab-17">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;toggle&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demo-toggle&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;collapse&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-expanded</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-pressed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Toggle&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;collapse&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tabindex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;0&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    Hello there !</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Toggle </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_toggle&quot;</span></span>

package/public/assets/{javascript_toggle.md.C8582WNC.lean.js → javascript_toggle.md.xDX51dR9.lean.js}

@@ -1 +1 @@
-import{C as h}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as e,o as p,c as E,j as s,a as k,J as a,ai as t,w as l}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const d={id:"toggle",tabindex:"-1"},u=JSON.parse('{"title":"Toggle","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/toggle.md","filePath":"javascript/toggle.md"}'),g={name:"javascript/toggle.md"},B=Object.assign(g,{setup(r){return(o,i)=>{const n=e("Badge");return p(),E("div",null,[s("h1",d,[i[0]||(i[0]=k("Toggle ",-1)),a(n,{type:"warning",text:"JS"}),i[1]||(i[1]=k()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#toggle","aria-label":"Permalink to “Toggle”"},"​",-1))]),i[8]||(i[8]=t("",4)),a(h,{height:"200px"},{default:l(()=>[...i[3]||(i[3]=[s("button",{id:"toggle",class:"demo-toggle","aria-controls":"collapse","aria-expanded":"false","aria-pressed":"false"},"Toggle",-1),s("div",{id:"collapse",tabindex:"0",hidden:""}," Hello there ! ",-1)])]),_:1}),i[9]||(i[9]=t("",5)),a(h,{height:"200px"},{default:l(()=>[...i[4]||(i[4]=[s("fieldset",null,[s("legend",null,"Toggles"),s("input",{class:"demo-toggle",id:"cA",type:"checkbox","aria-controls":"checkboxA","aria-expanded":"false"}),s("label",{for:"cA"},"Toggle A"),s("input",{class:"demo-toggle",id:"cB",type:"checkbox","aria-controls":"checkboxB","aria-expanded":"false"}),s("label",{for:"cB"},"Toggle B")],-1),s("div",{id:"checkboxA",hidden:""},"Hello there, I'm A !",-1),s("div",{id:"checkboxB",hidden:""},"Hello there, I'm B !",-1)])]),_:1}),i[10]||(i[10]=t("",3)),a(h,{height:"200px"},{default:l(()=>[...i[5]||(i[5]=[s("fieldset",null,[s("legend",null,"Toggles"),s("input",{id:"rA",class:"demo-toggle",type:"radio",name:"radio","aria-controls":"radioA","aria-expanded":"false",value:"a"}),s("label",{for:"rA"},"Toggle A"),s("input",{id:"rB",class:"demo-toggle",type:"radio",name:"radio","aria-controls":"radioB","aria-expanded":"false",value:"b"}),s("label",{for:"rB"},"Toggle B"),s("input",{id:"rC",class:"demo-toggle",type:"radio",name:"radio",value:"c"}),s("label",{for:"rC"},"Toggle C")],-1),s("div",{id:"radioA",hidden:""},"Hello there, I'm A !",-1),s("div",{id:"radioB",hidden:""},"Hello there, I'm B !",-1)])]),_:1}),i[11]||(i[11]=t("",3)),a(h,null,{default:l(()=>[...i[6]||(i[6]=[s("input",{id:"switch",class:"demo-toggle",type:"checkbox",role:"switch","aria-controls":"switchA switchB","aria-expanded":"true"},null,-1),s("label",{for:"switch"},"Switch",-1),s("div",{id:"switchA","data-toggle-when":"true",hidden:""},"This is TRUE",-1),s("div",{id:"switchB","data-toggle-when":"false"},"This is FALSE",-1)])]),_:1}),i[12]||(i[12]=t("",3)),a(h,{height:"200px"},{default:l(()=>[...i[7]||(i[7]=[s("select",{class:"demo-toggle",name:"select","aria-controls":"selectA selectB selectG selectNot","aria-expanded":"false"},[s("option",{value:"null"},"--"),s("option",{value:"A"},"aaa"),s("option",{value:"B"},"bbb"),s("optgroup",{label:"mygroup"},[s("option",{value:"C"},"ccc"),s("option",{value:"D"},"ddd")])],-1),s("div",{id:"selectA","data-toggle-when":"A",hidden:""},"Hello there, I'm A !",-1),s("div",{id:"selectB","data-toggle-when":"B",hidden:""},"Hello there, I'm B !",-1),s("div",{id:"selectG","data-toggle-when":"mygroup",hidden:""},"Hello there, I'm GROUP for C or D !",-1),s("div",{id:"selectNot","data-toggle-when-not":"A",hidden:""},"Hello there, I'm present if not A !",-1)])]),_:1}),i[13]||(i[13]=t("",5))])}}});export{u as __pageData,B as default};
+import{C as h}from"./chunks/ComponentPreview.CkvDvzXt.js";import{P as e,I as p,f as E,b as s,j as k,k as a,i as t,ag as l}from"./chunks/framework.CzIb_Ns1.js";/* empty css                                                                                */const d={id:"toggle",tabindex:"-1"},u=JSON.parse('{"title":"Toggle","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/toggle.md","filePath":"javascript/toggle.md"}'),g={name:"javascript/toggle.md"},B=Object.assign(g,{setup(r){return(o,i)=>{const n=e("Badge");return p(),E("div",null,[s("h1",d,[i[0]||(i[0]=k("Toggle ",-1)),a(n,{type:"warning",text:"JS"}),i[1]||(i[1]=k()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#toggle","aria-label":"Permalink to “Toggle”"},"​",-1))]),i[8]||(i[8]=t("",4)),a(h,{height:"200px"},{default:l(()=>[...i[3]||(i[3]=[s("button",{id:"toggle",class:"demo-toggle","aria-controls":"collapse","aria-expanded":"false","aria-pressed":"false"},"Toggle",-1),s("div",{id:"collapse",tabindex:"0",hidden:""}," Hello there ! ",-1)])]),_:1}),i[9]||(i[9]=t("",5)),a(h,{height:"200px"},{default:l(()=>[...i[4]||(i[4]=[s("fieldset",null,[s("legend",null,"Toggles"),s("input",{class:"demo-toggle",id:"cA",type:"checkbox","aria-controls":"checkboxA","aria-expanded":"false"}),s("label",{for:"cA"},"Toggle A"),s("input",{class:"demo-toggle",id:"cB",type:"checkbox","aria-controls":"checkboxB","aria-expanded":"false"}),s("label",{for:"cB"},"Toggle B")],-1),s("div",{id:"checkboxA",hidden:""},"Hello there, I'm A !",-1),s("div",{id:"checkboxB",hidden:""},"Hello there, I'm B !",-1)])]),_:1}),i[10]||(i[10]=t("",3)),a(h,{height:"200px"},{default:l(()=>[...i[5]||(i[5]=[s("fieldset",null,[s("legend",null,"Toggles"),s("input",{id:"rA",class:"demo-toggle",type:"radio",name:"radio","aria-controls":"radioA","aria-expanded":"false",value:"a"}),s("label",{for:"rA"},"Toggle A"),s("input",{id:"rB",class:"demo-toggle",type:"radio",name:"radio","aria-controls":"radioB","aria-expanded":"false",value:"b"}),s("label",{for:"rB"},"Toggle B"),s("input",{id:"rC",class:"demo-toggle",type:"radio",name:"radio",value:"c"}),s("label",{for:"rC"},"Toggle C")],-1),s("div",{id:"radioA",hidden:""},"Hello there, I'm A !",-1),s("div",{id:"radioB",hidden:""},"Hello there, I'm B !",-1)])]),_:1}),i[11]||(i[11]=t("",3)),a(h,null,{default:l(()=>[...i[6]||(i[6]=[s("input",{id:"switch",class:"demo-toggle",type:"checkbox",role:"switch","aria-controls":"switchA switchB","aria-expanded":"true"},null,-1),s("label",{for:"switch"},"Switch",-1),s("div",{id:"switchA","data-toggle-when":"true",hidden:""},"This is TRUE",-1),s("div",{id:"switchB","data-toggle-when":"false"},"This is FALSE",-1)])]),_:1}),i[12]||(i[12]=t("",3)),a(h,{height:"200px"},{default:l(()=>[...i[7]||(i[7]=[s("select",{class:"demo-toggle",name:"select","aria-controls":"selectA selectB selectG selectNot","aria-expanded":"false"},[s("option",{value:"null"},"--"),s("option",{value:"A"},"aaa"),s("option",{value:"B"},"bbb"),s("optgroup",{label:"mygroup"},[s("option",{value:"C"},"ccc"),s("option",{value:"D"},"ddd")])],-1),s("div",{id:"selectA","data-toggle-when":"A",hidden:""},"Hello there, I'm A !",-1),s("div",{id:"selectB","data-toggle-when":"B",hidden:""},"Hello there, I'm B !",-1),s("div",{id:"selectG","data-toggle-when":"mygroup",hidden:""},"Hello there, I'm GROUP for C or D !",-1),s("div",{id:"selectNot","data-toggle-when-not":"A",hidden:""},"Hello there, I'm present if not A !",-1)])]),_:1}),i[13]||(i[13]=t("",5))])}}});export{u as __pageData,B as default};

package/public/assets/javascript_trap.md.CRF-CChT.js

@@ -0,0 +1,2 @@
+/* empty css                                                                                */import{P as e,I as n,f as r,b as a,j as i,k as l,i as h}from"./chunks/framework.CzIb_Ns1.js";const d={id:"trap",tabindex:"-1"},m=JSON.parse('{"title":"Trap","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/trap.md","filePath":"javascript/trap.md"}'),o={name:"javascript/trap.md"},u=Object.assign(o,{setup(p){return(k,t)=>{const s=e("Badge");return n(),r("div",null,[a("h1",d,[t[0]||(t[0]=i("Trap ",-1)),l(s,{type:"warning",text:"JS"}),t[1]||(t[1]=i()),t[2]||(t[2]=a("a",{class:"header-anchor",href:"#trap","aria-label":"Permalink to “Trap”"},"​",-1))]),t[3]||(t[3]=h(`<p>The trap component make you able to create a focus trap on an element.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Trap </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/utilities/_trap&quot;</span></span></code></pre></div><h2 id="javascript" tabindex="-1">Javascript <a class="header-anchor" href="#javascript" aria-label="Permalink to “Javascript”">​</a></h2><p>This component is only in javascript, to use it you must import the script file and create a <code>new Trap</code> object.</p><p>You can pass the element, an array of exclusions (= element that should not be inert) and an array of inclusions (= element that should be included into the trap) when initiate the component.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Trap </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/utilities/_trap&quot;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Trap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;drawer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#backdrop&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#toggleMenu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#toggleMenu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span></code></pre></div><h3 id="methods" tabindex="-1">Methods <a class="header-anchor" href="#methods" aria-label="Permalink to “Methods”">​</a></h3><table tabindex="0"><thead><tr><th>Method</th><th>Description</th></tr></thead><tbody><tr><td>focusOnFirst()</td><td>This will focus on the first focusable element</td></tr><tr><td>activate()</td><td>This method will activate the trap, it will also set <code>inert</code> and <code>aria-hidden</code> attributes on other HTMLElements</td></tr><tr><td>desactivate()</td><td>This method will desactivate the trap and remove related attributes</td></tr><tr><td>handleKeydown(e)</td><td>This method will keep the TAB focus inside the element</td></tr><tr><td>getFocusableElements()</td><td>This method will return an array of focusable items inside the element</td></tr><tr><td>getSiblingsOutside()</td><td>This method will return an array of HTMLElements outside of the element</td></tr></tbody></table>`,8))])}}});export{m as __pageData,u as default};

package/public/assets/javascript_trap.md.CRF-CChT.lean.js

@@ -0,0 +1 @@
+/* empty css                                                                                */import{P as e,I as n,f as r,b as a,j as i,k as l,i as h}from"./chunks/framework.CzIb_Ns1.js";const d={id:"trap",tabindex:"-1"},m=JSON.parse('{"title":"Trap","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/trap.md","filePath":"javascript/trap.md"}'),o={name:"javascript/trap.md"},u=Object.assign(o,{setup(p){return(k,t)=>{const s=e("Badge");return n(),r("div",null,[a("h1",d,[t[0]||(t[0]=i("Trap ",-1)),l(s,{type:"warning",text:"JS"}),t[1]||(t[1]=i()),t[2]||(t[2]=a("a",{class:"header-anchor",href:"#trap","aria-label":"Permalink to “Trap”"},"​",-1))]),t[3]||(t[3]=h("",8))])}}});export{m as __pageData,u as default};

package/public/assets/{javascript_tree.md.uc1UUsFV.js → javascript_tree.md.zuzzDvFQ.js}

@@ -1,4 +1,4 @@
-import{C as l}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as p,o as e,c as E,j as s,a as n,J as a,ai as t,w as h}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const d={id:"tree",tabindex:"-1"},u=JSON.parse('{"title":"Tree","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/tree.md","filePath":"javascript/tree.md"}'),r={name:"javascript/tree.md"},b=Object.assign(r,{setup(g){return(y,i)=>{const k=p("Badge");return e(),E("div",null,[s("h1",d,[i[0]||(i[0]=n("Tree ",-1)),a(k,{type:"warning",text:"JS"}),i[1]||(i[1]=n()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#tree","aria-label":"Permalink to “Tree”"},"​",-1))]),i[6]||(i[6]=t('<div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Tree </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_tree&quot;</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title custom-block-title-default">WARNING</p><p>The <code>role=tree</code> and <code>role=treeGrid</code> are not accessible !</p></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”">​</a></h2><p>The tree component make you able to make a tree view by adding the <code>role=&quot;tree&quot;</code> attribute on a <code>&lt;ul&gt;</code> or <code>&lt;ol&gt;</code> tag.</p><p>The <code>&lt;li&gt;</code> must have a <code>role=&quot;treeitem&quot;</code>, and if nested the <code>aria-expanded</code> and <code>aria-owns</code> attributes.</p>',5)),a(l,{height:"200px"},{default:h(()=>[...i[3]||(i[3]=[s("ul",{class:"demo-tree"},[s("li",null,"1: Lorem, ipsum"),s("li",null,[s("button",{role:"link","aria-controls":"treelist","aria-expanded":"false"}," 1: Inventore, perspiciatis (Open) "),s("ul",{id:"treelist",tabindex:"0",hidden:""},[s("li",null,"2: Lorem"),s("li",null,[s("button",{role:"link","aria-controls":"subtreelist","aria-expanded":"false"}," 2: Adipisci (Open) "),s("ul",{id:"subtreelist",tabindex:"0",hidden:""},[s("li",null,"3: Lorem"),s("li",null,"3: Adipisci"),s("li",null,"3: Facilis")])]),s("li",null,"1: Facilis")])]),s("li",null,"1: Dolor, quis")],-1)])]),_:1}),i[7]||(i[7]=t(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-20" id="tab-21" checked><label data-title="html" for="tab-21">html</label><input type="radio" name="group-20" id="tab-22"><label data-title="js" for="tab-22">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demo-tree&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as l}from"./chunks/ComponentPreview.CkvDvzXt.js";import{P as p,I as e,f as E,b as s,j as n,k as a,i as t,ag as h}from"./chunks/framework.CzIb_Ns1.js";/* empty css                                                                                */const d={id:"tree",tabindex:"-1"},c=JSON.parse('{"title":"Tree","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/tree.md","filePath":"javascript/tree.md"}'),r={name:"javascript/tree.md"},b=Object.assign(r,{setup(g){return(y,i)=>{const k=p("Badge");return e(),E("div",null,[s("h1",d,[i[0]||(i[0]=n("Tree ",-1)),a(k,{type:"warning",text:"JS"}),i[1]||(i[1]=n()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#tree","aria-label":"Permalink to “Tree”"},"​",-1))]),i[6]||(i[6]=t('<div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Tree </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_tree&quot;</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title custom-block-title-default">WARNING</p><p>The <code>role=tree</code> and <code>role=treeGrid</code> are not accessible !</p></div><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to “Syntax”">​</a></h2><p>The tree component make you able to make a tree view by adding the <code>role=&quot;tree&quot;</code> attribute on a <code>&lt;ul&gt;</code> or <code>&lt;ol&gt;</code> tag.</p><p>The <code>&lt;li&gt;</code> must have a <code>role=&quot;treeitem&quot;</code>, and if nested the <code>aria-expanded</code> and <code>aria-owns</code> attributes.</p>',5)),a(l,{height:"200px"},{default:h(()=>[...i[3]||(i[3]=[s("ul",{class:"demo-tree"},[s("li",null,"1: Lorem, ipsum"),s("li",null,[s("button",{role:"link","aria-controls":"treelist","aria-expanded":"false"}," 1: Inventore, perspiciatis (Open) "),s("ul",{id:"treelist",tabindex:"0",hidden:""},[s("li",null,"2: Lorem"),s("li",null,[s("button",{role:"link","aria-controls":"subtreelist","aria-expanded":"false"}," 2: Adipisci (Open) "),s("ul",{id:"subtreelist",tabindex:"0",hidden:""},[s("li",null,"3: Lorem"),s("li",null,"3: Adipisci"),s("li",null,"3: Facilis")])]),s("li",null,"1: Facilis")])]),s("li",null,"1: Dolor, quis")],-1)])]),_:1}),i[7]||(i[7]=t(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-20" id="tab-21" checked><label data-title="html" for="tab-21">html</label><input type="radio" name="group-20" id="tab-22"><label data-title="js" for="tab-22">js</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demo-tree&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;1: Lorem, ipsum&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;link&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;treelist&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-expanded</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
@@ -69,4 +69,4 @@ import{C as l}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as p,o as e,c
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">myTree.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addEventListener</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tree:changed&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">e</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> isOpen</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> e.detail.isOpen</span></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    ...</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div>`,7))])}}});export{u as __pageData,b as default};
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div>`,7))])}}});export{c as __pageData,b as default};

package/public/assets/{javascript_tree.md.uc1UUsFV.lean.js → javascript_tree.md.zuzzDvFQ.lean.js}

@@ -1 +1 @@
-import{C as l}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as p,o as e,c as E,j as s,a as n,J as a,ai as t,w as h}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const d={id:"tree",tabindex:"-1"},u=JSON.parse('{"title":"Tree","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/tree.md","filePath":"javascript/tree.md"}'),r={name:"javascript/tree.md"},b=Object.assign(r,{setup(g){return(y,i)=>{const k=p("Badge");return e(),E("div",null,[s("h1",d,[i[0]||(i[0]=n("Tree ",-1)),a(k,{type:"warning",text:"JS"}),i[1]||(i[1]=n()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#tree","aria-label":"Permalink to “Tree”"},"​",-1))]),i[6]||(i[6]=t("",5)),a(l,{height:"200px"},{default:h(()=>[...i[3]||(i[3]=[s("ul",{class:"demo-tree"},[s("li",null,"1: Lorem, ipsum"),s("li",null,[s("button",{role:"link","aria-controls":"treelist","aria-expanded":"false"}," 1: Inventore, perspiciatis (Open) "),s("ul",{id:"treelist",tabindex:"0",hidden:""},[s("li",null,"2: Lorem"),s("li",null,[s("button",{role:"link","aria-controls":"subtreelist","aria-expanded":"false"}," 2: Adipisci (Open) "),s("ul",{id:"subtreelist",tabindex:"0",hidden:""},[s("li",null,"3: Lorem"),s("li",null,"3: Adipisci"),s("li",null,"3: Facilis")])]),s("li",null,"1: Facilis")])]),s("li",null,"1: Dolor, quis")],-1)])]),_:1}),i[7]||(i[7]=t("",5)),a(l,{height:"200px"},{default:h(()=>[...i[4]||(i[4]=[s("table",{id:"treeGrid",class:"demo-tree",role:"treegrid"},[s("tbody",null,[s("tr",{"aria-level":"1"},[s("td",null,"1: Lorem, ipsum")]),s("tr",{"aria-level":"1","aria-expanded":"false","aria-controls":"row1 row2 row3"},[s("td",null,"1: Cum, dolorum (open me)")]),s("tr",{id:"row1","aria-level":"2",tabindex:"0",hidden:""},[s("td",null,"2: Lorem")]),s("tr",{id:"row2","aria-level":"2","aria-expanded":"false","aria-controls":"row2-1 row2-2",hidden:""},[s("td",null,"2: Quo (open me)")]),s("tr",{id:"row2-1","aria-level":"3",tabindex:"0",hidden:""},[s("td",null,"2.1: Quo")]),s("tr",{id:"row2-2","aria-level":"3",hidden:""},[s("td",null,"2.2: Quo")]),s("tr",{id:"row3","aria-level":"2",hidden:""},[s("td",null,"2: Odio")]),s("tr",{"aria-level":"1"},[s("td",null,"1: Perspiciatis, tenetur")])])],-1)])]),_:1}),i[8]||(i[8]=t("",3)),a(l,{height:"200px"},{default:h(()=>[...i[5]||(i[5]=[s("table",{class:"demo-tree"},[s("tbody",null,[s("tr",{"aria-level":"1","aria-expanded":"false","aria-controls":"rowExpandable"},[s("td",null,[s("span",{"data-handle":"tree"}," (open me) ")]),s("td",null,"1: Cum, dolorum")]),s("tr",{id:"rowExpandable","aria-level":"2",tabindex:"0",hidden:""},[s("td"),s("td",null,"1.1: Lorem")])])],-1)])]),_:1}),i[9]||(i[9]=t("",7))])}}});export{u as __pageData,b as default};
+import{C as l}from"./chunks/ComponentPreview.CkvDvzXt.js";import{P as p,I as e,f as E,b as s,j as n,k as a,i as t,ag as h}from"./chunks/framework.CzIb_Ns1.js";/* empty css                                                                                */const d={id:"tree",tabindex:"-1"},c=JSON.parse('{"title":"Tree","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/tree.md","filePath":"javascript/tree.md"}'),r={name:"javascript/tree.md"},b=Object.assign(r,{setup(g){return(y,i)=>{const k=p("Badge");return e(),E("div",null,[s("h1",d,[i[0]||(i[0]=n("Tree ",-1)),a(k,{type:"warning",text:"JS"}),i[1]||(i[1]=n()),i[2]||(i[2]=s("a",{class:"header-anchor",href:"#tree","aria-label":"Permalink to “Tree”"},"​",-1))]),i[6]||(i[6]=t("",5)),a(l,{height:"200px"},{default:h(()=>[...i[3]||(i[3]=[s("ul",{class:"demo-tree"},[s("li",null,"1: Lorem, ipsum"),s("li",null,[s("button",{role:"link","aria-controls":"treelist","aria-expanded":"false"}," 1: Inventore, perspiciatis (Open) "),s("ul",{id:"treelist",tabindex:"0",hidden:""},[s("li",null,"2: Lorem"),s("li",null,[s("button",{role:"link","aria-controls":"subtreelist","aria-expanded":"false"}," 2: Adipisci (Open) "),s("ul",{id:"subtreelist",tabindex:"0",hidden:""},[s("li",null,"3: Lorem"),s("li",null,"3: Adipisci"),s("li",null,"3: Facilis")])]),s("li",null,"1: Facilis")])]),s("li",null,"1: Dolor, quis")],-1)])]),_:1}),i[7]||(i[7]=t("",5)),a(l,{height:"200px"},{default:h(()=>[...i[4]||(i[4]=[s("table",{id:"treeGrid",class:"demo-tree",role:"treegrid"},[s("tbody",null,[s("tr",{"aria-level":"1"},[s("td",null,"1: Lorem, ipsum")]),s("tr",{"aria-level":"1","aria-expanded":"false","aria-controls":"row1 row2 row3"},[s("td",null,"1: Cum, dolorum (open me)")]),s("tr",{id:"row1","aria-level":"2",tabindex:"0",hidden:""},[s("td",null,"2: Lorem")]),s("tr",{id:"row2","aria-level":"2","aria-expanded":"false","aria-controls":"row2-1 row2-2",hidden:""},[s("td",null,"2: Quo (open me)")]),s("tr",{id:"row2-1","aria-level":"3",tabindex:"0",hidden:""},[s("td",null,"2.1: Quo")]),s("tr",{id:"row2-2","aria-level":"3",hidden:""},[s("td",null,"2.2: Quo")]),s("tr",{id:"row3","aria-level":"2",hidden:""},[s("td",null,"2: Odio")]),s("tr",{"aria-level":"1"},[s("td",null,"1: Perspiciatis, tenetur")])])],-1)])]),_:1}),i[8]||(i[8]=t("",3)),a(l,{height:"200px"},{default:h(()=>[...i[5]||(i[5]=[s("table",{class:"demo-tree"},[s("tbody",null,[s("tr",{"aria-level":"1","aria-expanded":"false","aria-controls":"rowExpandable"},[s("td",null,[s("span",{"data-handle":"tree"}," (open me) ")]),s("td",null,"1: Cum, dolorum")]),s("tr",{id:"rowExpandable","aria-level":"2",tabindex:"0",hidden:""},[s("td"),s("td",null,"1.1: Lorem")])])],-1)])]),_:1}),i[9]||(i[9]=t("",7))])}}});export{c as __pageData,b as default};

package/public/assets/{prologue_conventions.md.D8nVwlRS.js → prologue_conventions.md.DK88T5YA.js}

@@ -1,4 +1,4 @@
-import{_ as i,o as a,c as n,ai as l}from"./chunks/framework.CaiDwmc7.js";const c=JSON.parse('{"title":"Naming conventions","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/conventions.md","filePath":"prologue/conventions.md"}'),e={name:"prologue/conventions.md"};function t(h,s,p,k,r,d){return a(),n("div",null,[...s[0]||(s[0]=[l(`<h1 id="naming-conventions" tabindex="-1">Naming conventions <a class="header-anchor" href="#naming-conventions" aria-label="Permalink to “Naming conventions”">​</a></h1><p>Because all project should have some little rules...</p><h2 id="almost-classless" tabindex="-1">Almost classless <a class="header-anchor" href="#almost-classless" aria-label="Permalink to “Almost classless”">​</a></h2><p>The framework try to be classless as much as possible, this are the exeptions:</p><ul><li>.accordion</li><li>.badge</li><li>.breadcrumb</li><li>.card</li><li>.container</li><li>.container-full</li><li>.drawer</li><li>.drawer-button</li><li>.dropdown</li><li>.grid</li><li>.flex-grid</li><li>.slider</li><li>.subgrid</li><li>.group</li><li>.list</li></ul><p>And for variations:</p><ul><li>.outline</li><li>.COLORNAME (e.g.: .primary)</li></ul><div class="warning custom-block"><p class="custom-block-title custom-block-title-default">WARNING</p><p>For good practice avoid as much it&#39;s possible classes !</p></div><h2 id="html-css-and-scss" tabindex="-1">HTML, CSS and SCSS <a class="header-anchor" href="#html-css-and-scss" aria-label="Permalink to “HTML, CSS and SCSS”">​</a></h2><ul><li>The custom properties and variable must be kebab-case</li><li>Private properties start with an underscore</li><li>The classes must be kebab-case</li><li>The IDs must be camelCase</li><li>Use comment like in <a href="http://sassdoc.com/" target="_blank" rel="noreferrer">SassDoc</a></li></ul><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+import{_ as i,I as a,f as n,i as l}from"./chunks/framework.CzIb_Ns1.js";const c=JSON.parse('{"title":"Naming conventions","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/conventions.md","filePath":"prologue/conventions.md"}'),e={name:"prologue/conventions.md"};function t(h,s,p,k,r,d){return a(),n("div",null,[...s[0]||(s[0]=[l(`<h1 id="naming-conventions" tabindex="-1">Naming conventions <a class="header-anchor" href="#naming-conventions" aria-label="Permalink to “Naming conventions”">​</a></h1><p>Because all project should have some little rules...</p><h2 id="almost-classless" tabindex="-1">Almost classless <a class="header-anchor" href="#almost-classless" aria-label="Permalink to “Almost classless”">​</a></h2><p>The framework try to be classless as much as possible, this are the exeptions:</p><ul><li>.accordion</li><li>.badge</li><li>.breadcrumb</li><li>.card</li><li>.container</li><li>.container-full</li><li>.drawer</li><li>.drawer-button</li><li>.dropdown</li><li>.grid</li><li>.flex-grid</li><li>.slider</li><li>.subgrid</li><li>.group</li><li>.list</li></ul><p>And for variations:</p><ul><li>.outline</li><li>.COLORNAME (e.g.: .primary)</li></ul><div class="warning custom-block"><p class="custom-block-title custom-block-title-default">WARNING</p><p>For good practice avoid as much it&#39;s possible classes !</p></div><h2 id="html-css-and-scss" tabindex="-1">HTML, CSS and SCSS <a class="header-anchor" href="#html-css-and-scss" aria-label="Permalink to “HTML, CSS and SCSS”">​</a></h2><ul><li>The custom properties and variable must be kebab-case</li><li>Private properties start with an underscore</li><li>The classes must be kebab-case</li><li>The IDs must be camelCase</li><li>Use comment like in <a href="http://sassdoc.com/" target="_blank" rel="noreferrer">SassDoc</a></li></ul><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
 <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">    --global-property</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
 <span class="line"></span>

package/public/assets/prologue_conventions.md.DK88T5YA.lean.js

@@ -0,0 +1 @@
+import{_ as i,I as a,f as n,i as l}from"./chunks/framework.CzIb_Ns1.js";const c=JSON.parse('{"title":"Naming conventions","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/conventions.md","filePath":"prologue/conventions.md"}'),e={name:"prologue/conventions.md"};function t(h,s,p,k,r,d){return a(),n("div",null,[...s[0]||(s[0]=[l("",15)])])}const g=i(e,[["render",t]]);export{c as __pageData,g as default};

package/public/assets/prologue_release.md.CDIl9leQ.js

@@ -0,0 +1 @@
+import{_ as a,I as t,f as r,i as o}from"./chunks/framework.CzIb_Ns1.js";const g=JSON.parse('{"title":"Release note","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/release.md","filePath":"prologue/release.md"}'),s={name:"prologue/release.md"};function n(i,e,l,h,c,p){return t(),r("div",null,[...e[0]||(e[0]=[o('<h1 id="release-note" tabindex="-1">Release note <a class="header-anchor" href="#release-note" aria-label="Permalink to “Release note”">​</a></h1><h2 id="versioning-scheme" tabindex="-1">Versioning Scheme <a class="header-anchor" href="#versioning-scheme" aria-label="Permalink to “Versioning Scheme”">​</a></h2><p>The package use a three-part numbering system (e.g., 1.2.3) to track updates. This helps the developers to understand the scope of changes at a glance.</p><h3 id="the-patch-release-0-0-x" tabindex="-1">The &quot;Patch&quot; Release (0.0.X) <a class="header-anchor" href="#the-patch-release-0-0-x" aria-label="Permalink to “The &quot;Patch&quot; Release (0.0.X)”">​</a></h3><p>The third digit is reserved for small fixes.</p><ul><li><strong>Purpose:</strong> Bug fixes, security patches, or minor text corrections.</li><li><strong>Impact:</strong> These updates do not change how the site functions and are safe to deploy immediately.</li><li><strong>Example:</strong> Moving from 1.0.1 to 1.0.2.</li></ul><h3 id="the-minor-release-0-x-0" tabindex="-1">The &quot;Minor&quot; Release (0.X.0) <a class="header-anchor" href="#the-minor-release-0-x-0" aria-label="Permalink to “The &quot;Minor&quot; Release (0.X.0)”">​</a></h3><p>The second digit represents medium-sized updates.</p><ul><li><strong>Purpose:</strong> Adding new features or making significant modifications to existing ones.</li><li><strong>Impact:</strong> These introduce new functionality but remain backward-compatible (they should not &quot;break&quot; the existing setup !).</li><li><strong>Example:</strong> Moving from 1.1.0 to 1.2.0.</li></ul><h3 id="the-major-release-x-0-0" tabindex="-1">The &quot;Major&quot; Release (X.0.0) <a class="header-anchor" href="#the-major-release-x-0-0" aria-label="Permalink to “The &quot;Major&quot; Release (X.0.0)”">​</a></h3><p>The first digit indicates major structural changes.</p><ul><li><strong>Purpose:</strong> Complete redesigns, total code refactoring, or breaking changes that alter how the system works fundamentally.</li><li><strong>Impact:</strong> These are significant milestones and often require thorough testing before deployment.</li><li><strong>Example:</strong> Moving from 1.0.0 to 2.0.0.</li></ul><h2 id="git-branches" tabindex="-1">GIT branches <a class="header-anchor" href="#git-branches" aria-label="Permalink to “GIT branches”">​</a></h2><p>The package supports the current version and one previous version. Here the branches naming convention:</p><ul><li><strong>main:</strong> Is the latest version DEV branch</li><li><strong>production:</strong> Is the latest version PROD branch</li><li><strong>support/vx.x.x :</strong> Is the legacy version PROD branches per MAJOR+MINOR release</li><li><strong>hotfix/vx.x.x :</strong> Is the legacy version DEV branches for PATCH release only</li></ul><h2 id="support-policy" tabindex="-1">Support Policy <a class="header-anchor" href="#support-policy" aria-label="Permalink to “Support Policy”">​</a></h2><p>The current version of the package is construct with SCSS and vanilla JS !</p><p>Make sure you can use some of the new HTML/CSS/JS into the browser !</p>',18)])])}const d=a(s,[["render",n]]);export{g as __pageData,d as default};

package/public/assets/prologue_release.md.CDIl9leQ.lean.js

@@ -0,0 +1 @@
+import{_ as a,I as t,f as r,i as o}from"./chunks/framework.CzIb_Ns1.js";const g=JSON.parse('{"title":"Release note","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/release.md","filePath":"prologue/release.md"}'),s={name:"prologue/release.md"};function n(i,e,l,h,c,p){return t(),r("div",null,[...e[0]||(e[0]=[o("",18)])])}const d=a(s,[["render",n]]);export{g as __pageData,d as default};

package/public/assets/prologue_upgrade.md.DLld-KVb.js

@@ -0,0 +1 @@
+import{_ as a,I as r,f as o,i as t}from"./chunks/framework.CzIb_Ns1.js";const u=JSON.parse('{"title":"Upgrade Guide","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/upgrade.md","filePath":"prologue/upgrade.md"}'),i={name:"prologue/upgrade.md"};function d(l,e,n,p,s,h){return r(),o("div",null,[...e[0]||(e[0]=[t('<h1 id="upgrade-guide" tabindex="-1">Upgrade Guide <a class="header-anchor" href="#upgrade-guide" aria-label="Permalink to “Upgrade Guide”">​</a></h1><h2 id="_0-4-0-to-1-0-0" tabindex="-1">0.4.0 to 1.0.0 <a class="header-anchor" href="#_0-4-0-to-1-0-0" aria-label="Permalink to “0.4.0 to 1.0.0”">​</a></h2><p>These update includes some changes as:</p><ul><li><a href="#doc">Doc</a></li><li><a href="#popover">Popover</a></li><li><a href="#slider">Slider</a></li></ul><h3 id="doc" tabindex="-1">Doc <a class="header-anchor" href="#doc" aria-label="Permalink to “Doc”">​</a></h3><p>The most important change is the Documentation ! Now it is in Vitepress, and you have access to. a Sandbox via <code>npm run sandbox</code> to play with the code and test it.</p><h3 id="popover" tabindex="-1">Popover <a class="header-anchor" href="#popover" aria-label="Permalink to “Popover”">​</a></h3><p>There is the new Popover component, and it will replace the current Dropdown. But be carefull because not all browser support it yet 😃</p><h3 id="slider" tabindex="-1">Slider <a class="header-anchor" href="#slider" aria-label="Permalink to “Slider”">​</a></h3><p>The slider has the ability to have a play and a pause button for more accessibility.</p>',10)])])}const _=a(i,[["render",d]]);export{u as __pageData,_ as default};

package/public/assets/prologue_upgrade.md.DLld-KVb.lean.js

@@ -0,0 +1 @@
+import{_ as a,I as r,f as o,i as t}from"./chunks/framework.CzIb_Ns1.js";const u=JSON.parse('{"title":"Upgrade Guide","description":"","frontmatter":{},"headers":[],"relativePath":"prologue/upgrade.md","filePath":"prologue/upgrade.md"}'),i={name:"prologue/upgrade.md"};function d(l,e,n,p,s,h){return r(),o("div",null,[...e[0]||(e[0]=[t("",10)])])}const _=a(i,[["render",d]]);export{u as __pageData,_ as default};