npm - @natachah/vanilla-frontend - Versions diffs - 1.0.0 → 1.0.1 - Mend

@natachah/vanilla-frontend 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (164) hide show

package/public/assets/{components_disclosure.md.DeSRu9_P.js → components_disclosure.md.BwvLkFL_.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as l}from"./chunks/ComponentPreview.BW2s4ay5.js";import{o as e,c as h,ai as a,J as t,w as n,j as s,a as k}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const g=JSON.parse('{"title":"Disclosure","description":"","frontmatter":{},"headers":[],"relativePath":"components/disclosure.md","filePath":"components/disclosure.md"}'),p={name:"components/disclosure.md"},y=Object.assign(p,{setup(E){return(d,i)=>(e(),h("div",null,[i[2]||(i[2]=a('<h1 id="disclosure" tabindex="-1">Disclosure <a class="header-anchor" href="#disclosure" aria-label="Permalink to “Disclosure”"></a></h1><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/disclosure&#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 disclosure is using the native <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> tags.</p>',4)),t(l,{height:"200"},{default:n(()=>[...i[0]||(i[0]=[s("details",null,[s("summary",null,[s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},[s("path",{"fill-rule":"evenodd",d:"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"})]),k(" Title ")]),s("div",null," Content ")],-1)])]),_:1}),i[3]||(i[3]=a(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-12" id="tab-13" checked><label data-title="html" for="tab-13">html</label><input type="radio" name="group-12" id="tab-14"><label data-title="css properties" for="tab-14">css properties</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;">details</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as l}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{o as e,c as h,ai as a,J as t,w as n,j as s,a as k}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const g=JSON.parse('{"title":"Disclosure","description":"","frontmatter":{},"headers":[],"relativePath":"components/disclosure.md","filePath":"components/disclosure.md"}'),p={name:"components/disclosure.md"},y=Object.assign(p,{setup(E){return(d,i)=>(e(),h("div",null,[i[2]||(i[2]=a('<h1 id="disclosure" tabindex="-1">Disclosure <a class="header-anchor" href="#disclosure" aria-label="Permalink to “Disclosure”"></a></h1><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/disclosure&#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 disclosure is using the native <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> tags.</p>',4)),t(l,{height:"200"},{default:n(()=>[...i[0]||(i[0]=[s("details",null,[s("summary",null,[s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},[s("path",{"fill-rule":"evenodd",d:"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"})]),k(" Title ")]),s("div",null," Content ")],-1)])]),_:1}),i[3]||(i[3]=a(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-12" id="tab-13" checked><label data-title="html" for="tab-13">html</label><input type="radio" name="group-12" id="tab-14"><label data-title="css properties" for="tab-14">css properties</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;">details</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;">summary</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;">svg</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> xmlns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;http://www.w3.org/2000/svg&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;16&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;16&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fill</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;currentColor&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> viewBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;0 0 16 16&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">path</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fill-rule</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;evenodd&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">path</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">svg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        Title</span></span>

package/public/assets/{components_disclosure.md.DeSRu9_P.lean.js → components_disclosure.md.BwvLkFL_.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{C as l}from"./chunks/ComponentPreview.~~BW2s4ay5~~.js";import{o as e,c as h,ai as a,J as t,w as n,j as s,a as k}from"./chunks/framework.~~CaiDwmc7~~.js";/* empty css */const g=JSON.parse('{"title":"Disclosure","description":"","frontmatter":{},"headers":[],"relativePath":"components/disclosure.md","filePath":"components/disclosure.md"}'),p={name:"components/disclosure.md"},y=Object.assign(p,{setup(E){return(d,i)=>(e(),h("div",null,[i[2]\|\|(i[2]=a("",4)),t(l,{height:"200"},{default:n(()=>[...i[0]\|\|(i[0]=[s("details",null,[s("summary",null,[s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},[s("path",{"fill-rule":"evenodd",d:"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"})]),k(" Title ")]),s("div",null," Content ")],-1)])]),_:1}),i[3]\|\|(i[3]=a("",19)),t(l,{height:"250px"},{default:n(()=>[...i[1]\|\|(i[1]=[s("div",{class:"accordion",style:{"--disclosure-border-color":"black"}},[s("details",null,[s("summary",null," Disclosure A "),s("div",null," AAA ")]),s("details",null,[s("summary",null," Disclosure B "),s("div",null," BBB ")]),s("details",null,[s("summary",null," Disclosure C "),s("div",null," CCC ")])],-1)])]),_:1}),i[4]\|\|(i[4]=a("",1))]))}});export{g as __pageData,y as default};
1	+ import{C as l}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{o as e,c as h,ai as a,J as t,w as n,j as s,a as k}from"./chunks/framework.26dFs73Q.js";/* empty css */const g=JSON.parse('{"title":"Disclosure","description":"","frontmatter":{},"headers":[],"relativePath":"components/disclosure.md","filePath":"components/disclosure.md"}'),p={name:"components/disclosure.md"},y=Object.assign(p,{setup(E){return(d,i)=>(e(),h("div",null,[i[2]\|\|(i[2]=a("",4)),t(l,{height:"200"},{default:n(()=>[...i[0]\|\|(i[0]=[s("details",null,[s("summary",null,[s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},[s("path",{"fill-rule":"evenodd",d:"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"})]),k(" Title ")]),s("div",null," Content ")],-1)])]),_:1}),i[3]\|\|(i[3]=a("",19)),t(l,{height:"250px"},{default:n(()=>[...i[1]\|\|(i[1]=[s("div",{class:"accordion",style:{"--disclosure-border-color":"black"}},[s("details",null,[s("summary",null," Disclosure A "),s("div",null," AAA ")]),s("details",null,[s("summary",null," Disclosure B "),s("div",null," BBB ")]),s("details",null,[s("summary",null," Disclosure C "),s("div",null," CCC ")])],-1)])]),_:1}),i[4]\|\|(i[4]=a("",1))]))}});export{g as __pageData,y as default};

package/public/assets/{components_form.md.Be8d5WFv.js → components_form.md.C6B5z_6G.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as l}from"./chunks/ComponentPreview.BW2s4ay5.js";import{o as n,c as p,ai as t,J as h,w as k,j as s,a}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const y=JSON.parse('{"title":"Form","description":"","frontmatter":{},"headers":[],"relativePath":"components/form.md","filePath":"components/form.md"}'),e={name:"components/form.md"},F=Object.assign(e,{setup(E){return(d,i)=>(n(),p("div",null,[i[17]||(i[17]=t('<h1 id="form" tabindex="-1">Form <a class="header-anchor" href="#form" aria-label="Permalink to “Form”"></a></h1><p>All form elements are fully responsive with pure semantic HTML, enabling forms to scale gracefully across devices and viewports.</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/form&#39;</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 form is using the native <code>&lt;label&gt;</code>, <code>&lt;input&gt;</code> and co. tags.</p>',5)),h(l,null,{default:k(()=>[...i[0]||(i[0]=[s("label",{for:"demoInput"},"Input",-1),s("input",{type:"text",id:"demoInput",name:"input",placeholder:"My input","aria-describedby":"demoInputDescription"},null,-1),s("small",{id:"demoInputDescription"}," Must be at least 8 characters. ",-1)])]),_:1}),i[18]||(i[18]=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="css properties" for="tab-17">css properties</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;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demoInput&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Input&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as l}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{o as n,c as p,ai as t,J as h,w as k,j as s,a}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const y=JSON.parse('{"title":"Form","description":"","frontmatter":{},"headers":[],"relativePath":"components/form.md","filePath":"components/form.md"}'),e={name:"components/form.md"},F=Object.assign(e,{setup(E){return(d,i)=>(n(),p("div",null,[i[17]||(i[17]=t('<h1 id="form" tabindex="-1">Form <a class="header-anchor" href="#form" aria-label="Permalink to “Form”"></a></h1><p>All form elements are fully responsive with pure semantic HTML, enabling forms to scale gracefully across devices and viewports.</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/form&#39;</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 form is using the native <code>&lt;label&gt;</code>, <code>&lt;input&gt;</code> and co. tags.</p>',5)),h(l,null,{default:k(()=>[...i[0]||(i[0]=[s("label",{for:"demoInput"},"Input",-1),s("input",{type:"text",id:"demoInput",name:"input",placeholder:"My input","aria-describedby":"demoInputDescription"},null,-1),s("small",{id:"demoInputDescription"}," Must be at least 8 characters. ",-1)])]),_:1}),i[18]||(i[18]=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="css properties" for="tab-17">css properties</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;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demoInput&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Input&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</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;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text&quot;</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;demoInput&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;input&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;My input&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-describedby</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;demoInputDescription&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;">small</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;demoInputDescription&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    Must be at least 8 characters.</span></span>

package/public/assets/{components_form.md.Be8d5WFv.lean.js → components_form.md.C6B5z_6G.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{C as l}from"./chunks/ComponentPreview.~~BW2s4ay5~~.js";import{o as n,c as p,ai as t,J as h,w as k,j as s,a}from"./chunks/framework.~~CaiDwmc7~~.js";/* empty css */const y=JSON.parse('{"title":"Form","description":"","frontmatter":{},"headers":[],"relativePath":"components/form.md","filePath":"components/form.md"}'),e={name:"components/form.md"},F=Object.assign(e,{setup(E){return(d,i)=>(n(),p("div",null,[i[17]\|\|(i[17]=t("",5)),h(l,null,{default:k(()=>[...i[0]\|\|(i[0]=[s("label",{for:"demoInput"},"Input",-1),s("input",{type:"text",id:"demoInput",name:"input",placeholder:"My input","aria-describedby":"demoInputDescription"},null,-1),s("small",{id:"demoInputDescription"}," Must be at least 8 characters. ",-1)])]),_:1}),i[18]\|\|(i[18]=t("",2)),h(l,null,{default:k(()=>[...i[1]\|\|(i[1]=[s("input",{type:"text",name:"text",placeholder:"Some text"},null,-1),s("input",{type:"search",name:"search",placeholder:"Enter some keyword"},null,-1),s("input",{type:"email",name:"email",placeholder:"info@something.com"},null,-1),s("input",{type:"url",name:"url",placeholder:"http://www.google.com"},null,-1),s("input",{type:"tel",name:"tel",placeholder:"021 922 00 00"},null,-1),s("input",{type:"number",name:"number",placeholder:"42"},null,-1),s("input",{type:"password",name:"password",placeholder:"123456"},null,-1)])]),_:1}),i[19]\|\|(i[19]=t("",2)),h(l,null,{default:k(()=>[...i[2]\|\|(i[2]=[s("input",{type:"file",name:"file",accept:"image/png, image/jpeg"},null,-1)])]),_:1}),i[20]\|\|(i[20]=t("",2)),h(l,null,{default:k(()=>[...i[3]\|\|(i[3]=[s("input",{type:"date",name:"date"},null,-1),s("input",{type:"time",name:"time"},null,-1),s("input",{type:"datetime-local",name:"datetime"},null,-1)])]),_:1}),i[21]\|\|(i[21]=t("",2)),h(l,null,{default:k(()=>[...i[4]\|\|(i[4]=[s("input",{type:"color",name:"color"},null,-1)])]),_:1}),i[22]\|\|(i[22]=t("",2)),h(l,null,{default:k(()=>[...i[5]\|\|(i[5]=[s("input",{type:"range",name:"range",min:"0",max:"10"},null,-1)])]),_:1}),i[23]\|\|(i[23]=t("",4)),h(l,null,{default:k(()=>[...i[6]\|\|(i[6]=[s("textarea",{name:"textarea",rows:"5",cols:"33"},"It was a dark and stormy night...",-1)])]),_:1}),i[24]\|\|(i[24]=t("",3)),h(l,null,{default:k(()=>[...i[7]\|\|(i[7]=[s("select",{name:"select"},[s("option",{value:"1"},"One"),s("option",{value:"2"},"Two"),s("option",{value:"3"},"Three"),s("option",{value:"4"},"Four")],-1)])]),_:1}),i[25]\|\|(i[25]=t("",3)),h(l,null,{default:k(()=>[...i[8]\|\|(i[8]=[s("fieldset",null,[s("legend",null,"Radio"),s("input",{type:"radio",id:"radioA",name:"radio",checked:""}),a(),s("label",{for:"radioA"},"Option A"),s("input",{type:"radio",id:"radioB",name:"radio"}),a(),s("label",{for:"radioB"},"Option B"),s("input",{type:"radio",id:"radioC",name:"radio"}),a(),s("label",{for:"radioC"},"Option C")],-1)])]),_:1}),i[26]\|\|(i[26]=t("",2)),h(l,null,{default:k(()=>[...i[9]\|\|(i[9]=[s("fieldset",null,[s("legend",null,"Radio"),s("div",null,[s("input",{type:"radio",id:"radioD",name:"radio",checked:""}),a(),s("label",{for:"radioD"},"Option D")]),s("div",null,[s("input",{type:"radio",id:"radioE",name:"radio"}),a(),s("label",{for:"radioE"},"Option E")]),s("div",null,[s("input",{type:"radio",id:"radioF",name:"radio"}),a(),s("label",{for:"radioF"},"Option F")])],-1)])]),_:1}),i[27]\|\|(i[27]=t("",3)),h(l,null,{default:k(()=>[...i[10]\|\|(i[10]=[s("fieldset",null,[s("legend",null,"Checkbox"),s("input",{type:"checkbox",id:"checkboxA",name:"checkboxA",checked:""}),a(),s("label",{for:"checkboxA"},"Option A"),s("input",{type:"checkbox",id:"checkboxB",name:"checkboxB"}),a(),s("label",{for:"checkboxB"},"Option B"),s("input",{type:"checkbox",id:"checkboxC",name:"checkboxC"}),a(),s("label",{for:"checkboxC"},"Option C")],-1)])]),_:1}),i[28]\|\|(i[28]=t("",2)),h(l,null,{default:k(()=>[...i[11]\|\|(i[11]=[s("fieldset",null,[s("legend",null,"Radio"),s("div",null,[s("input",{type:"checkbox",id:"checkboxD",name:"checkbox",checked:""}),a(),s("label",{for:"checkboxD"},"Option D")]),s("div",null,[s("input",{type:"checkbox",id:"checkboxE",name:"checkbox"}),a(),s("label",{for:"checkboxE"},"Option E")]),s("div",null,[s("input",{type:"checkbox",id:"checkboxF",name:"checkbox"}),a(),s("label",{for:"checkboxF"},"Option F")])],-1)])]),_:1}),i[29]\|\|(i[29]=t("",3)),h(l,null,{default:k(()=>[...i[12]\|\|(i[12]=[s("input",{type:"checkbox",role:"switch",id:"switch",name:"switch",value:"true"},null,-1),a(),s("label",{for:"switch"},"I agree to the terms",-1)])]),_:1}),i[30]\|\|(i[30]=t("",10)),h(l,null,{default:k(()=>[...i[13]\|\|(i[13]=[s("input",{type:"text",value:"My value",disabled:""},null,-1),s("select",{type:"text",disabled:""},[s("option",{value:"--"},"--")],-1),s("textarea",{disabled:""},"It was a dark and stormy night...",-1),s("input",{type:"checkbox",disabled:""},null,-1),a(),s("input",{type:"checkbox",disabled:"",checked:""},null,-1),a(),s("input",{type:"radio",disabled:""},null,-1),a(),s("input",{type:"radio",disabled:"",checked:""},null,-1),a(),s("input",{type:"checkbox",role:"switch",disabled:""},null,-1),a(),s("input",{type:"checkbox",role:"switch",disabled:"",checked:""},null,-1)])]),_:1}),i[31]\|\|(i[31]=t("",3)),h(l,null,{default:k(()=>[...i[14]\|\|(i[14]=[s("input",{type:"text",value:"My value",readonly:""},null,-1),s("textarea",{readonly:""},"It was a dark and stormy night...",-1)])]),_:1}),i[32]\|\|(i[32]=t("",4)),h(l,null,{default:k(()=>[...i[15]\|\|(i[15]=[s("div",null,[s("label",{for:"invalidInput"},"Invalid input"),s("input",{id:"invalidInput",type:"text","aria-describedby":"invalidMsg","aria-invalid":"true",value:"My bad value"}),s("small",{id:"invalidMsg",style:{color:"var(--color-error)"}},[s("span",{"aria-live":"assertive"},[s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},[s("path",{d:"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"}),s("path",{d:"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"})]),a(" Incorrect value ! ")])])],-1),s("div",null,[s("label",{for:"validInput"},"Valid input"),s("input",{id:"validInput",type:"text","aria-describedby":"validMsg","aria-invalid":"false",value:"My good value"}),s("small",{id:"validMsg",style:{color:"var(--color-success)"}},[s("span",{"aria-live":"assertive"},[s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},[s("path",{d:"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"}),s("path",{d:"m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"})]),a(" All good ! ")])])],-1)])]),_:1}),i[33]\|\|(i[33]=t("",4)),h(l,null,{default:k(()=>[...i[16]\|\|(i[16]=[s("fieldset",null,[s("legend",null,"Price"),s("div",{class:"group"},[s("label",null,"Before"),s("select",null,[s("option",{value:"A"},"CHF"),s("option",{value:"B"},"€"),s("option",{value:"C"},"$")]),s("input",{type:"number",value:"110"}),s("label",null,"After"),s("button",null,"Send")])],-1)])]),_:1}),i[34]\|\|(i[34]=t("",1))]))}});export{y as __pageData,F as default};
1	+ import{C as l}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{o as n,c as p,ai as t,J as h,w as k,j as s,a}from"./chunks/framework.26dFs73Q.js";/* empty css */const y=JSON.parse('{"title":"Form","description":"","frontmatter":{},"headers":[],"relativePath":"components/form.md","filePath":"components/form.md"}'),e={name:"components/form.md"},F=Object.assign(e,{setup(E){return(d,i)=>(n(),p("div",null,[i[17]\|\|(i[17]=t("",5)),h(l,null,{default:k(()=>[...i[0]\|\|(i[0]=[s("label",{for:"demoInput"},"Input",-1),s("input",{type:"text",id:"demoInput",name:"input",placeholder:"My input","aria-describedby":"demoInputDescription"},null,-1),s("small",{id:"demoInputDescription"}," Must be at least 8 characters. ",-1)])]),_:1}),i[18]\|\|(i[18]=t("",2)),h(l,null,{default:k(()=>[...i[1]\|\|(i[1]=[s("input",{type:"text",name:"text",placeholder:"Some text"},null,-1),s("input",{type:"search",name:"search",placeholder:"Enter some keyword"},null,-1),s("input",{type:"email",name:"email",placeholder:"info@something.com"},null,-1),s("input",{type:"url",name:"url",placeholder:"http://www.google.com"},null,-1),s("input",{type:"tel",name:"tel",placeholder:"021 922 00 00"},null,-1),s("input",{type:"number",name:"number",placeholder:"42"},null,-1),s("input",{type:"password",name:"password",placeholder:"123456"},null,-1)])]),_:1}),i[19]\|\|(i[19]=t("",2)),h(l,null,{default:k(()=>[...i[2]\|\|(i[2]=[s("input",{type:"file",name:"file",accept:"image/png, image/jpeg"},null,-1)])]),_:1}),i[20]\|\|(i[20]=t("",2)),h(l,null,{default:k(()=>[...i[3]\|\|(i[3]=[s("input",{type:"date",name:"date"},null,-1),s("input",{type:"time",name:"time"},null,-1),s("input",{type:"datetime-local",name:"datetime"},null,-1)])]),_:1}),i[21]\|\|(i[21]=t("",2)),h(l,null,{default:k(()=>[...i[4]\|\|(i[4]=[s("input",{type:"color",name:"color"},null,-1)])]),_:1}),i[22]\|\|(i[22]=t("",2)),h(l,null,{default:k(()=>[...i[5]\|\|(i[5]=[s("input",{type:"range",name:"range",min:"0",max:"10"},null,-1)])]),_:1}),i[23]\|\|(i[23]=t("",4)),h(l,null,{default:k(()=>[...i[6]\|\|(i[6]=[s("textarea",{name:"textarea",rows:"5",cols:"33"},"It was a dark and stormy night...",-1)])]),_:1}),i[24]\|\|(i[24]=t("",3)),h(l,null,{default:k(()=>[...i[7]\|\|(i[7]=[s("select",{name:"select"},[s("option",{value:"1"},"One"),s("option",{value:"2"},"Two"),s("option",{value:"3"},"Three"),s("option",{value:"4"},"Four")],-1)])]),_:1}),i[25]\|\|(i[25]=t("",3)),h(l,null,{default:k(()=>[...i[8]\|\|(i[8]=[s("fieldset",null,[s("legend",null,"Radio"),s("input",{type:"radio",id:"radioA",name:"radio",checked:""}),a(),s("label",{for:"radioA"},"Option A"),s("input",{type:"radio",id:"radioB",name:"radio"}),a(),s("label",{for:"radioB"},"Option B"),s("input",{type:"radio",id:"radioC",name:"radio"}),a(),s("label",{for:"radioC"},"Option C")],-1)])]),_:1}),i[26]\|\|(i[26]=t("",2)),h(l,null,{default:k(()=>[...i[9]\|\|(i[9]=[s("fieldset",null,[s("legend",null,"Radio"),s("div",null,[s("input",{type:"radio",id:"radioD",name:"radio",checked:""}),a(),s("label",{for:"radioD"},"Option D")]),s("div",null,[s("input",{type:"radio",id:"radioE",name:"radio"}),a(),s("label",{for:"radioE"},"Option E")]),s("div",null,[s("input",{type:"radio",id:"radioF",name:"radio"}),a(),s("label",{for:"radioF"},"Option F")])],-1)])]),_:1}),i[27]\|\|(i[27]=t("",3)),h(l,null,{default:k(()=>[...i[10]\|\|(i[10]=[s("fieldset",null,[s("legend",null,"Checkbox"),s("input",{type:"checkbox",id:"checkboxA",name:"checkboxA",checked:""}),a(),s("label",{for:"checkboxA"},"Option A"),s("input",{type:"checkbox",id:"checkboxB",name:"checkboxB"}),a(),s("label",{for:"checkboxB"},"Option B"),s("input",{type:"checkbox",id:"checkboxC",name:"checkboxC"}),a(),s("label",{for:"checkboxC"},"Option C")],-1)])]),_:1}),i[28]\|\|(i[28]=t("",2)),h(l,null,{default:k(()=>[...i[11]\|\|(i[11]=[s("fieldset",null,[s("legend",null,"Radio"),s("div",null,[s("input",{type:"checkbox",id:"checkboxD",name:"checkbox",checked:""}),a(),s("label",{for:"checkboxD"},"Option D")]),s("div",null,[s("input",{type:"checkbox",id:"checkboxE",name:"checkbox"}),a(),s("label",{for:"checkboxE"},"Option E")]),s("div",null,[s("input",{type:"checkbox",id:"checkboxF",name:"checkbox"}),a(),s("label",{for:"checkboxF"},"Option F")])],-1)])]),_:1}),i[29]\|\|(i[29]=t("",3)),h(l,null,{default:k(()=>[...i[12]\|\|(i[12]=[s("input",{type:"checkbox",role:"switch",id:"switch",name:"switch",value:"true"},null,-1),a(),s("label",{for:"switch"},"I agree to the terms",-1)])]),_:1}),i[30]\|\|(i[30]=t("",10)),h(l,null,{default:k(()=>[...i[13]\|\|(i[13]=[s("input",{type:"text",value:"My value",disabled:""},null,-1),s("select",{type:"text",disabled:""},[s("option",{value:"--"},"--")],-1),s("textarea",{disabled:""},"It was a dark and stormy night...",-1),s("input",{type:"checkbox",disabled:""},null,-1),a(),s("input",{type:"checkbox",disabled:"",checked:""},null,-1),a(),s("input",{type:"radio",disabled:""},null,-1),a(),s("input",{type:"radio",disabled:"",checked:""},null,-1),a(),s("input",{type:"checkbox",role:"switch",disabled:""},null,-1),a(),s("input",{type:"checkbox",role:"switch",disabled:"",checked:""},null,-1)])]),_:1}),i[31]\|\|(i[31]=t("",3)),h(l,null,{default:k(()=>[...i[14]\|\|(i[14]=[s("input",{type:"text",value:"My value",readonly:""},null,-1),s("textarea",{readonly:""},"It was a dark and stormy night...",-1)])]),_:1}),i[32]\|\|(i[32]=t("",4)),h(l,null,{default:k(()=>[...i[15]\|\|(i[15]=[s("div",null,[s("label",{for:"invalidInput"},"Invalid input"),s("input",{id:"invalidInput",type:"text","aria-describedby":"invalidMsg","aria-invalid":"true",value:"My bad value"}),s("small",{id:"invalidMsg",style:{color:"var(--color-error)"}},[s("span",{"aria-live":"assertive"},[s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},[s("path",{d:"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"}),s("path",{d:"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"})]),a(" Incorrect value ! ")])])],-1),s("div",null,[s("label",{for:"validInput"},"Valid input"),s("input",{id:"validInput",type:"text","aria-describedby":"validMsg","aria-invalid":"false",value:"My good value"}),s("small",{id:"validMsg",style:{color:"var(--color-success)"}},[s("span",{"aria-live":"assertive"},[s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},[s("path",{d:"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"}),s("path",{d:"m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"})]),a(" All good ! ")])])],-1)])]),_:1}),i[33]\|\|(i[33]=t("",4)),h(l,null,{default:k(()=>[...i[16]\|\|(i[16]=[s("fieldset",null,[s("legend",null,"Price"),s("div",{class:"group"},[s("label",null,"Before"),s("select",null,[s("option",{value:"A"},"CHF"),s("option",{value:"B"},"€"),s("option",{value:"C"},"$")]),s("input",{type:"number",value:"110"}),s("label",null,"After"),s("button",null,"Send")])],-1)])]),_:1}),i[34]\|\|(i[34]=t("",1))]))}});export{y as __pageData,F as default};

package/public/assets/{components_loading.md.CKDG7z5x.js → components_loading.md.51ktm2_l.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as t}from"./chunks/ComponentPreview.BW2s4ay5.js";import{o as k,c as e,ai as a,J as n,w as l,j as s,a as h}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const u=JSON.parse('{"title":"Loading","description":"","frontmatter":{},"headers":[],"relativePath":"components/loading.md","filePath":"components/loading.md"}'),p={name:"components/loading.md"},y=Object.assign(p,{setup(r){return(d,i)=>(k(),e("div",null,[i[3]||(i[3]=a('<h1 id="loading" tabindex="-1">Loading <a class="header-anchor" href="#loading" aria-label="Permalink to “Loading”"></a></h1><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/loading&#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 loading is using the native <code>aria-busy</code> attribute.</p>',4)),n(t,null,{default:l(()=>[...i[0]||(i[0]=[s("div",{"aria-busy":"true"},null,-1)])]),_:1}),i[4]||(i[4]=a('<div class="language-html"><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;"> aria-busy</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;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="variants" tabindex="-1">Variants <a class="header-anchor" href="#variants" aria-label="Permalink to “Variants”"></a></h2><h3 id="link" tabindex="-1">Link <a class="header-anchor" href="#link" aria-label="Permalink to “Link”"></a></h3><p>The loading is available for links:</p>',4)),n(t,null,{default:l(()=>[...i[1]||(i[1]=[s("a",{href:"#","aria-busy":"true"},"My link",-1)])]),_:1}),i[5]||(i[5]=a('<div class="language-html"><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;">a</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;#&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-busy</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;My link&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="button" tabindex="-1">Button <a class="header-anchor" href="#button" aria-label="Permalink to “Button”"></a></h3><p>The loading is available for buttons:</p>',3)),n(t,null,{default:l(()=>[...i[2]||(i[2]=[s("button",{"aria-busy":"true"},null,-1),h("  ",-1),s("button",{class:"outline","aria-busy":"true"},"Button",-1),h("  ",-1),s("button",{class:"primary","aria-busy":"true"},"Button",-1),h("  ",-1),s("button",{class:"primary outline","aria-busy":"true"},"Button",-1)])]),_:1}),i[6]||(i[6]=a(`<div class="language-html"><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;"> aria-busy</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;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as t}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{o as k,c as e,ai as a,J as n,w as l,j as s,a as h}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const u=JSON.parse('{"title":"Loading","description":"","frontmatter":{},"headers":[],"relativePath":"components/loading.md","filePath":"components/loading.md"}'),p={name:"components/loading.md"},y=Object.assign(p,{setup(r){return(d,i)=>(k(),e("div",null,[i[3]||(i[3]=a('<h1 id="loading" tabindex="-1">Loading <a class="header-anchor" href="#loading" aria-label="Permalink to “Loading”"></a></h1><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/loading&#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 loading is using the native <code>aria-busy</code> attribute.</p>',4)),n(t,null,{default:l(()=>[...i[0]||(i[0]=[s("div",{"aria-busy":"true"},null,-1)])]),_:1}),i[4]||(i[4]=a('<div class="language-html"><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;"> aria-busy</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;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="variants" tabindex="-1">Variants <a class="header-anchor" href="#variants" aria-label="Permalink to “Variants”"></a></h2><h3 id="link" tabindex="-1">Link <a class="header-anchor" href="#link" aria-label="Permalink to “Link”"></a></h3><p>The loading is available for links:</p>',4)),n(t,null,{default:l(()=>[...i[1]||(i[1]=[s("a",{href:"#","aria-busy":"true"},"My link",-1)])]),_:1}),i[5]||(i[5]=a('<div class="language-html"><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;">a</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;#&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-busy</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;My link&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="button" tabindex="-1">Button <a class="header-anchor" href="#button" aria-label="Permalink to “Button”"></a></h3><p>The loading is available for buttons:</p>',3)),n(t,null,{default:l(()=>[...i[2]||(i[2]=[s("button",{"aria-busy":"true"},null,-1),h("  ",-1),s("button",{class:"outline","aria-busy":"true"},"Button",-1),h("  ",-1),s("button",{class:"primary","aria-busy":"true"},"Button",-1),h("  ",-1),s("button",{class:"primary outline","aria-busy":"true"},"Button",-1)])]),_:1}),i[6]||(i[6]=a(`<div class="language-html"><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;"> aria-busy</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;">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;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;outline&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-busy</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;Button&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;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;primary&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-busy</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;Button&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;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;primary outline&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-busy</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;Button&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div>`,1))]))}});export{u as __pageData,y as default};

package/public/assets/{components_loading.md.CKDG7z5x.lean.js → components_loading.md.51ktm2_l.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{C as t}from"./chunks/ComponentPreview.~~BW2s4ay5~~.js";import{o as k,c as e,ai as a,J as n,w as l,j as s,a as h}from"./chunks/framework.~~CaiDwmc7~~.js";/* empty css */const u=JSON.parse('{"title":"Loading","description":"","frontmatter":{},"headers":[],"relativePath":"components/loading.md","filePath":"components/loading.md"}'),p={name:"components/loading.md"},y=Object.assign(p,{setup(r){return(d,i)=>(k(),e("div",null,[i[3]\|\|(i[3]=a("",4)),n(t,null,{default:l(()=>[...i[0]\|\|(i[0]=[s("div",{"aria-busy":"true"},null,-1)])]),_:1}),i[4]\|\|(i[4]=a("",4)),n(t,null,{default:l(()=>[...i[1]\|\|(i[1]=[s("a",{href:"#","aria-busy":"true"},"My link",-1)])]),_:1}),i[5]\|\|(i[5]=a("",3)),n(t,null,{default:l(()=>[...i[2]\|\|(i[2]=[s("button",{"aria-busy":"true"},null,-1),h(" ",-1),s("button",{class:"outline","aria-busy":"true"},"Button",-1),h(" ",-1),s("button",{class:"primary","aria-busy":"true"},"Button",-1),h(" ",-1),s("button",{class:"primary outline","aria-busy":"true"},"Button",-1)])]),_:1}),i[6]\|\|(i[6]=a("",1))]))}});export{u as __pageData,y as default};
1	+ import{C as t}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{o as k,c as e,ai as a,J as n,w as l,j as s,a as h}from"./chunks/framework.26dFs73Q.js";/* empty css */const u=JSON.parse('{"title":"Loading","description":"","frontmatter":{},"headers":[],"relativePath":"components/loading.md","filePath":"components/loading.md"}'),p={name:"components/loading.md"},y=Object.assign(p,{setup(r){return(d,i)=>(k(),e("div",null,[i[3]\|\|(i[3]=a("",4)),n(t,null,{default:l(()=>[...i[0]\|\|(i[0]=[s("div",{"aria-busy":"true"},null,-1)])]),_:1}),i[4]\|\|(i[4]=a("",4)),n(t,null,{default:l(()=>[...i[1]\|\|(i[1]=[s("a",{href:"#","aria-busy":"true"},"My link",-1)])]),_:1}),i[5]\|\|(i[5]=a("",3)),n(t,null,{default:l(()=>[...i[2]\|\|(i[2]=[s("button",{"aria-busy":"true"},null,-1),h(" ",-1),s("button",{class:"outline","aria-busy":"true"},"Button",-1),h(" ",-1),s("button",{class:"primary","aria-busy":"true"},"Button",-1),h(" ",-1),s("button",{class:"primary outline","aria-busy":"true"},"Button",-1)])]),_:1}),i[6]\|\|(i[6]=a("",1))]))}});export{u as __pageData,y as default};

package/public/assets/{components_popover.md.CwgNttNc.js → components_popover.md.DpbAjVUj.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as t}from"./chunks/ComponentPreview.BW2s4ay5.js";import{o as k,c as p,ai as a,J as l,w as h,j as s,a as n}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const y=JSON.parse('{"title":"Popover","description":"","frontmatter":{},"headers":[],"relativePath":"components/popover.md","filePath":"components/popover.md"}'),E={name:"components/popover.md"},u=Object.assign(E,{setup(e){return(r,i)=>(k(),p("div",null,[i[5]||(i[5]=a('<h1 id="popover" tabindex="-1">Popover <a class="header-anchor" href="#popover" aria-label="Permalink to “Popover”"></a></h1><p>This component make able to crate box on flyout as Tooltip or Dropdown menu.</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/popover&#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 popover is using a <code>&lt;div&gt;</code> tag with the class <code>.popover</code>. Inside of the element you must add a <code>&lt;button&gt;</code> and another <code>&lt;div&gt;</code> or an <code>&lt;ul/ol&gt;</code> tag.</p>',5)),l(t,{height:"150px"},{default:h(()=>[...i[0]||(i[0]=[s("div",{class:"popover"},[s("button",{popovertarget:"myPopover"},"⚓︎ Open the popover"),s("div",{popover:"",id:"myPopover"},[s("p",null,"Hello world")])],-1)])]),_:1}),i[6]||(i[6]=a(`<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></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;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;popover&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as t}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{o as k,c as p,ai as a,J as l,w as h,j as s,a as n}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const y=JSON.parse('{"title":"Popover","description":"","frontmatter":{},"headers":[],"relativePath":"components/popover.md","filePath":"components/popover.md"}'),E={name:"components/popover.md"},u=Object.assign(E,{setup(e){return(r,i)=>(k(),p("div",null,[i[5]||(i[5]=a('<h1 id="popover" tabindex="-1">Popover <a class="header-anchor" href="#popover" aria-label="Permalink to “Popover”"></a></h1><p>This component make able to crate box on flyout as Tooltip or Dropdown menu.</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/popover&#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 popover is using a <code>&lt;div&gt;</code> tag with the class <code>.popover</code>. Inside of the element you must add a <code>&lt;button&gt;</code> and another <code>&lt;div&gt;</code> or an <code>&lt;ul/ol&gt;</code> tag.</p>',5)),l(t,{height:"150px"},{default:h(()=>[...i[0]||(i[0]=[s("div",{class:"popover"},[s("button",{popovertarget:"myPopover"},"⚓︎ Open the popover"),s("div",{popover:"",id:"myPopover"},[s("p",null,"Hello world")])],-1)])]),_:1}),i[6]||(i[6]=a(`<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></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;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;popover&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;"> popovertarget</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;myPopover&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;⚓︎ Open the popover&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;"> popover</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;myPopover&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;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Hello world&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/{components_popover.md.CwgNttNc.lean.js → components_popover.md.DpbAjVUj.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{C as t}from"./chunks/ComponentPreview.~~BW2s4ay5~~.js";import{o as k,c as p,ai as a,J as l,w as h,j as s,a as n}from"./chunks/framework.~~CaiDwmc7~~.js";/* empty css */const y=JSON.parse('{"title":"Popover","description":"","frontmatter":{},"headers":[],"relativePath":"components/popover.md","filePath":"components/popover.md"}'),E={name:"components/popover.md"},u=Object.assign(E,{setup(e){return(r,i)=>(k(),p("div",null,[i[5]\|\|(i[5]=a("",5)),l(t,{height:"150px"},{default:h(()=>[...i[0]\|\|(i[0]=[s("div",{class:"popover"},[s("button",{popovertarget:"myPopover"},"⚓︎ Open the popover"),s("div",{popover:"",id:"myPopover"},[s("p",null,"Hello world")])],-1)])]),_:1}),i[6]\|\|(i[6]=a("",4)),l(t,{height:"150px"},{default:h(()=>[...i[1]\|\|(i[1]=[s("p",null,[n(" Anchor in a text "),s("span",{class:"popover",style:{"--popover-area":"center right","--popover-inset":"auto"}},[s("button",{popovertarget:"myTooltip"},"⚓︎"),s("span",{popover:"",id:"myTooltip"}," Hello world ")])],-1)])]),_:1}),i[7]\|\|(i[7]=a("",3)),l(t,{height:"200px"},{default:h(()=>[...i[2]\|\|(i[2]=[s("div",{class:"dropdown"},[s("button",{popovertarget:"myDropdown"},[n(" Open my dropdown "),s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},[s("path",{"fill-rule":"evenodd",d:"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"})])]),s("ul",{popover:"",id:"myDropdown"},[s("li",null,[s("a",{href:"#"},"Subitem")]),s("li",null,[s("a",{href:"#"},"Subitem")]),s("li",null,[s("a",{href:"#"},"Subitem")])])],-1)])]),_:1}),i[8]\|\|(i[8]=a("",4)),l(t,{height:"200px"},{default:h(()=>[...i[3]\|\|(i[3]=[s("div",{class:"popover"},[s("button",{popovertarget:"myPopoverPrimary"},"⚓︎ Open the popover"),s("div",{popover:"",id:"myPopoverPrimary",class:"primary"},[s("p",null,"Hello world"),s("p",null,"This is a primary popover !")])],-1)])]),_:1}),i[9]\|\|(i[9]=a("",3)),l(t,{height:"200px"},{default:h(()=>[...i[4]\|\|(i[4]=[s("div",{class:"group"},[s("div",{class:"dropdown"},[s("button",{popovertarget:"dropdownA"},[n(" Dropdown A "),s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},[s("path",{"fill-rule":"evenodd",d:"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"})])]),s("ul",{popover:"",id:"dropdownA"},[s("li",null,[s("a",{href:"#"},"Subitem A")]),s("li",null,[s("a",{href:"#"},"Subitem A")]),s("li",null,[s("a",{href:"#"},"Subitem A")])])]),s("div",{class:"dropdown"},[s("button",{popovertarget:"dropdownB"},[n(" Dropdown B "),s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},[s("path",{"fill-rule":"evenodd",d:"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"})])]),s("ul",{popover:"",id:"dropdownB"},[s("li",null,[s("a",{href:"#"},"Subitem B")]),s("li",null,[s("a",{href:"#"},"Subitem B")]),s("li",null,[s("a",{href:"#"},"Subitem B")])])]),s("div",{class:"dropdown"},[s("button",{popovertarget:"dropdownC"},[n(" Dropdown C "),s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},[s("path",{"fill-rule":"evenodd",d:"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"})])]),s("ul",{popover:"",id:"dropdownC"},[s("li",null,[s("a",{href:"#"},"Subitem C ")]),s("li",null,[s("a",{href:"#"},"Subitem C ")]),s("li",null,[s("a",{href:"#"},"Subitem C ")])])])],-1)])]),_:1}),i[10]\|\|(i[10]=a("",1))]))}});export{y as __pageData,u as default};
1	+ import{C as t}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{o as k,c as p,ai as a,J as l,w as h,j as s,a as n}from"./chunks/framework.26dFs73Q.js";/* empty css */const y=JSON.parse('{"title":"Popover","description":"","frontmatter":{},"headers":[],"relativePath":"components/popover.md","filePath":"components/popover.md"}'),E={name:"components/popover.md"},u=Object.assign(E,{setup(e){return(r,i)=>(k(),p("div",null,[i[5]\|\|(i[5]=a("",5)),l(t,{height:"150px"},{default:h(()=>[...i[0]\|\|(i[0]=[s("div",{class:"popover"},[s("button",{popovertarget:"myPopover"},"⚓︎ Open the popover"),s("div",{popover:"",id:"myPopover"},[s("p",null,"Hello world")])],-1)])]),_:1}),i[6]\|\|(i[6]=a("",4)),l(t,{height:"150px"},{default:h(()=>[...i[1]\|\|(i[1]=[s("p",null,[n(" Anchor in a text "),s("span",{class:"popover",style:{"--popover-area":"center right","--popover-inset":"auto"}},[s("button",{popovertarget:"myTooltip"},"⚓︎"),s("span",{popover:"",id:"myTooltip"}," Hello world ")])],-1)])]),_:1}),i[7]\|\|(i[7]=a("",3)),l(t,{height:"200px"},{default:h(()=>[...i[2]\|\|(i[2]=[s("div",{class:"dropdown"},[s("button",{popovertarget:"myDropdown"},[n(" Open my dropdown "),s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},[s("path",{"fill-rule":"evenodd",d:"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"})])]),s("ul",{popover:"",id:"myDropdown"},[s("li",null,[s("a",{href:"#"},"Subitem")]),s("li",null,[s("a",{href:"#"},"Subitem")]),s("li",null,[s("a",{href:"#"},"Subitem")])])],-1)])]),_:1}),i[8]\|\|(i[8]=a("",4)),l(t,{height:"200px"},{default:h(()=>[...i[3]\|\|(i[3]=[s("div",{class:"popover"},[s("button",{popovertarget:"myPopoverPrimary"},"⚓︎ Open the popover"),s("div",{popover:"",id:"myPopoverPrimary",class:"primary"},[s("p",null,"Hello world"),s("p",null,"This is a primary popover !")])],-1)])]),_:1}),i[9]\|\|(i[9]=a("",3)),l(t,{height:"200px"},{default:h(()=>[...i[4]\|\|(i[4]=[s("div",{class:"group"},[s("div",{class:"dropdown"},[s("button",{popovertarget:"dropdownA"},[n(" Dropdown A "),s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},[s("path",{"fill-rule":"evenodd",d:"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"})])]),s("ul",{popover:"",id:"dropdownA"},[s("li",null,[s("a",{href:"#"},"Subitem A")]),s("li",null,[s("a",{href:"#"},"Subitem A")]),s("li",null,[s("a",{href:"#"},"Subitem A")])])]),s("div",{class:"dropdown"},[s("button",{popovertarget:"dropdownB"},[n(" Dropdown B "),s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},[s("path",{"fill-rule":"evenodd",d:"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"})])]),s("ul",{popover:"",id:"dropdownB"},[s("li",null,[s("a",{href:"#"},"Subitem B")]),s("li",null,[s("a",{href:"#"},"Subitem B")]),s("li",null,[s("a",{href:"#"},"Subitem B")])])]),s("div",{class:"dropdown"},[s("button",{popovertarget:"dropdownC"},[n(" Dropdown C "),s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},[s("path",{"fill-rule":"evenodd",d:"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"})])]),s("ul",{popover:"",id:"dropdownC"},[s("li",null,[s("a",{href:"#"},"Subitem C ")]),s("li",null,[s("a",{href:"#"},"Subitem C ")]),s("li",null,[s("a",{href:"#"},"Subitem C ")])])])],-1)])]),_:1}),i[10]\|\|(i[10]=a("",1))]))}});export{y as __pageData,u as default};

package/public/assets/{components_progress.md.CNC7rJiC.js → components_progress.md.H7v6t9h-.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as t}from"./chunks/ComponentPreview.BW2s4ay5.js";import{o as e,c as l,ai as i,J as n,w as h,j as a}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const E=JSON.parse('{"title":"Progress","description":"","frontmatter":{},"headers":[],"relativePath":"components/progress.md","filePath":"components/progress.md"}'),r={name:"components/progress.md"},c=Object.assign(r,{setup(p){return(k,s)=>(e(),l("div",null,[s[1]||(s[1]=i('<h1 id="progress" tabindex="-1">Progress <a class="header-anchor" href="#progress" aria-label="Permalink to “Progress”"></a></h1><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/progress&#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 progress is using the native <code>&lt;progress&gt;</code> tag.</p>',4)),n(t,null,{default:h(()=>[...s[0]||(s[0]=[a("label",{for:"download"},"Download progress:",-1),a("progress",{id:"download",value:"50",max:"100"},"50%",-1)])]),_:1}),s[2]||(s[2]=i(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-12" id="tab-13" checked><label data-title="html" for="tab-13">html</label><input type="radio" name="group-12" id="tab-14"><label data-title="css properties" for="tab-14">css properties</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;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;download&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Download progress:&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as t}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{o as e,c as l,ai as i,J as n,w as h,j as a}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const E=JSON.parse('{"title":"Progress","description":"","frontmatter":{},"headers":[],"relativePath":"components/progress.md","filePath":"components/progress.md"}'),r={name:"components/progress.md"},c=Object.assign(r,{setup(p){return(k,s)=>(e(),l("div",null,[s[1]||(s[1]=i('<h1 id="progress" tabindex="-1">Progress <a class="header-anchor" href="#progress" aria-label="Permalink to “Progress”"></a></h1><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/progress&#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 progress is using the native <code>&lt;progress&gt;</code> tag.</p>',4)),n(t,null,{default:h(()=>[...s[0]||(s[0]=[a("label",{for:"download"},"Download progress:",-1),a("progress",{id:"download",value:"50",max:"100"},"50%",-1)])]),_:1}),s[2]||(s[2]=i(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-12" id="tab-13" checked><label data-title="html" for="tab-13">html</label><input type="radio" name="group-12" id="tab-14"><label data-title="css properties" for="tab-14">css properties</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;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;download&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Download progress:&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</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;">progress</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;download&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;50&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;100&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;50%&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">progress</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</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;">--progress-width</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--progress-height</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--progress-background</span></span>

package/public/assets/{components_progress.md.CNC7rJiC.lean.js → components_progress.md.H7v6t9h-.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{C as t}from"./chunks/ComponentPreview.~~BW2s4ay5~~.js";import{o as e,c as l,ai as i,J as n,w as h,j as a}from"./chunks/framework.~~CaiDwmc7~~.js";/* empty css */const E=JSON.parse('{"title":"Progress","description":"","frontmatter":{},"headers":[],"relativePath":"components/progress.md","filePath":"components/progress.md"}'),r={name:"components/progress.md"},c=Object.assign(r,{setup(p){return(k,s)=>(e(),l("div",null,[s[1]\|\|(s[1]=i("",4)),n(t,null,{default:h(()=>[...s[0]\|\|(s[0]=[a("label",{for:"download"},"Download progress:",-1),a("progress",{id:"download",value:"50",max:"100"},"50%",-1)])]),_:1}),s[2]\|\|(s[2]=i("",1))]))}});export{E as __pageData,c as default};
1	+ import{C as t}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{o as e,c as l,ai as i,J as n,w as h,j as a}from"./chunks/framework.26dFs73Q.js";/* empty css */const E=JSON.parse('{"title":"Progress","description":"","frontmatter":{},"headers":[],"relativePath":"components/progress.md","filePath":"components/progress.md"}'),r={name:"components/progress.md"},c=Object.assign(r,{setup(p){return(k,s)=>(e(),l("div",null,[s[1]\|\|(s[1]=i("",4)),n(t,null,{default:h(()=>[...s[0]\|\|(s[0]=[a("label",{for:"download"},"Download progress:",-1),a("progress",{id:"download",value:"50",max:"100"},"50%",-1)])]),_:1}),s[2]\|\|(s[2]=i("",1))]))}});export{E as __pageData,c as default};

package/public/assets/{components_table.md.LyBkIDkF.js → components_table.md.BPrpvUDy.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as l}from"./chunks/ComponentPreview.BW2s4ay5.js";import{o as h,c as k,ai as a,J as t,w as n,j as s}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const y=JSON.parse('{"title":"Table","description":"","frontmatter":{},"headers":[],"relativePath":"components/table.md","filePath":"components/table.md"}'),p={name:"components/table.md"},o=Object.assign(p,{setup(e){return(E,i)=>(h(),k("div",null,[i[2]||(i[2]=a('<h1 id="table" tabindex="-1">Table <a class="header-anchor" href="#table" aria-label="Permalink to “Table”"></a></h1><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/table&#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 table is using the native <code>&lt;table&gt;</code> tag.</p>',4)),t(l,null,{default:n(()=>[...i[0]||(i[0]=[s("table",null,[s("caption",null,"Caption of the table"),s("thead",null,[s("tr",null,[s("th",null,"Head A"),s("th",null,"Head B"),s("th",null,"Head C")])]),s("tbody",null,[s("tr",null,[s("td",null,"Cell"),s("td",null,"Cell"),s("td",null,"Cell")]),s("tr",null,[s("td",null,"Cell"),s("td",null,"Cell"),s("td",null,"Cell")]),s("tr",null,[s("td",null,"Cell"),s("td",null,"Cell"),s("td",null,"Cell")])]),s("tfoot",null,[s("tr",null,[s("th",null,"Foot A"),s("th",null,"Foot B"),s("th",null,"Foot C")])])],-1)])]),_:1}),i[3]||(i[3]=a(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-12" id="tab-13" checked><label data-title="html" for="tab-13">html</label><input type="radio" name="group-12" id="tab-14"><label data-title="css properties" for="tab-14">css properties</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;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as l}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{o as h,c as k,ai as a,J as t,w as n,j as s}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const y=JSON.parse('{"title":"Table","description":"","frontmatter":{},"headers":[],"relativePath":"components/table.md","filePath":"components/table.md"}'),p={name:"components/table.md"},o=Object.assign(p,{setup(e){return(E,i)=>(h(),k("div",null,[i[2]||(i[2]=a('<h1 id="table" tabindex="-1">Table <a class="header-anchor" href="#table" aria-label="Permalink to “Table”"></a></h1><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/table&#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 table is using the native <code>&lt;table&gt;</code> tag.</p>',4)),t(l,null,{default:n(()=>[...i[0]||(i[0]=[s("table",null,[s("caption",null,"Caption of the table"),s("thead",null,[s("tr",null,[s("th",null,"Head A"),s("th",null,"Head B"),s("th",null,"Head C")])]),s("tbody",null,[s("tr",null,[s("td",null,"Cell"),s("td",null,"Cell"),s("td",null,"Cell")]),s("tr",null,[s("td",null,"Cell"),s("td",null,"Cell"),s("td",null,"Cell")]),s("tr",null,[s("td",null,"Cell"),s("td",null,"Cell"),s("td",null,"Cell")])]),s("tfoot",null,[s("tr",null,[s("th",null,"Foot A"),s("th",null,"Foot B"),s("th",null,"Foot C")])])],-1)])]),_:1}),i[3]||(i[3]=a(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-12" id="tab-13" checked><label data-title="html" for="tab-13">html</label><input type="radio" name="group-12" id="tab-14"><label data-title="css properties" for="tab-14">css properties</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;">table</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;">caption</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Caption of the table&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">caption</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;">thead</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;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/{components_table.md.LyBkIDkF.lean.js → components_table.md.BPrpvUDy.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{C as l}from"./chunks/ComponentPreview.~~BW2s4ay5~~.js";import{o as h,c as k,ai as a,J as t,w as n,j as s}from"./chunks/framework.~~CaiDwmc7~~.js";/* empty css */const y=JSON.parse('{"title":"Table","description":"","frontmatter":{},"headers":[],"relativePath":"components/table.md","filePath":"components/table.md"}'),p={name:"components/table.md"},o=Object.assign(p,{setup(e){return(E,i)=>(h(),k("div",null,[i[2]\|\|(i[2]=a("",4)),t(l,null,{default:n(()=>[...i[0]\|\|(i[0]=[s("table",null,[s("caption",null,"Caption of the table"),s("thead",null,[s("tr",null,[s("th",null,"Head A"),s("th",null,"Head B"),s("th",null,"Head C")])]),s("tbody",null,[s("tr",null,[s("td",null,"Cell"),s("td",null,"Cell"),s("td",null,"Cell")]),s("tr",null,[s("td",null,"Cell"),s("td",null,"Cell"),s("td",null,"Cell")]),s("tr",null,[s("td",null,"Cell"),s("td",null,"Cell"),s("td",null,"Cell")])]),s("tfoot",null,[s("tr",null,[s("th",null,"Foot A"),s("th",null,"Foot B"),s("th",null,"Foot C")])])],-1)])]),_:1}),i[3]\|\|(i[3]=a("",4)),t(l,null,{default:n(()=>[...i[1]\|\|(i[1]=[s("div",{class:"as-container"},[s("table",{id:"responsiveTable"},[s("thead",null,[s("tr",null,[s("th",null,"Header A"),s("th",null,"Header B"),s("th",null,"Header C")])]),s("tbody",null,[s("tr",null,[s("td",{"data-label":"Header A"},"Cell"),s("td",{"data-label":"Header B"},"Cell"),s("td",{"data-label":"Header C"},"Cell")])])])],-1)])]),_:1}),i[4]\|\|(i[4]=a("",1))]))}});export{y as __pageData,o as default};
1	+ import{C as l}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{o as h,c as k,ai as a,J as t,w as n,j as s}from"./chunks/framework.26dFs73Q.js";/* empty css */const y=JSON.parse('{"title":"Table","description":"","frontmatter":{},"headers":[],"relativePath":"components/table.md","filePath":"components/table.md"}'),p={name:"components/table.md"},o=Object.assign(p,{setup(e){return(E,i)=>(h(),k("div",null,[i[2]\|\|(i[2]=a("",4)),t(l,null,{default:n(()=>[...i[0]\|\|(i[0]=[s("table",null,[s("caption",null,"Caption of the table"),s("thead",null,[s("tr",null,[s("th",null,"Head A"),s("th",null,"Head B"),s("th",null,"Head C")])]),s("tbody",null,[s("tr",null,[s("td",null,"Cell"),s("td",null,"Cell"),s("td",null,"Cell")]),s("tr",null,[s("td",null,"Cell"),s("td",null,"Cell"),s("td",null,"Cell")]),s("tr",null,[s("td",null,"Cell"),s("td",null,"Cell"),s("td",null,"Cell")])]),s("tfoot",null,[s("tr",null,[s("th",null,"Foot A"),s("th",null,"Foot B"),s("th",null,"Foot C")])])],-1)])]),_:1}),i[3]\|\|(i[3]=a("",4)),t(l,null,{default:n(()=>[...i[1]\|\|(i[1]=[s("div",{class:"as-container"},[s("table",{id:"responsiveTable"},[s("thead",null,[s("tr",null,[s("th",null,"Header A"),s("th",null,"Header B"),s("th",null,"Header C")])]),s("tbody",null,[s("tr",null,[s("td",{"data-label":"Header A"},"Cell"),s("td",{"data-label":"Header B"},"Cell"),s("td",{"data-label":"Header C"},"Cell")])])])],-1)])]),_:1}),i[4]\|\|(i[4]=a("",1))]))}});export{y as __pageData,o as default};

package/public/assets/{index.md.CJiHmjB7.js → index.md.DNiLOsZD.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{_ as e,o as t,c as i}from"./chunks/framework.~~CaiDwmc7~~.js";const p=JSON.parse(`{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Vanilla Frontend","text":"A simple framework","tagline":"For wild HTML, CSS and JS purists lover","actions":[{"theme":"brand","text":"Let's start !","link":"/start/install"},{"theme":"alt","text":"Upgrade Guide","link":"/prologue/upgrade"}]},"features":[{"title":"Class-light and Semantic","details":"Thriving on simplicity, directly styles your HTML tags, using fewer .classes as possible."},{"title":"Accessibility","details":"Use pur HTML and make your frontend more accessible for everyone."},{"title":"Easy Customization","details":"Customize the frontend with over CSS custom properties, or dive deeper by using SCSS."},{"title":"Vanilla JS","details":"Libraries of tiny vanilla JS interaction to make your website more interactive."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}`),a={name:"index.md"};function s(r,n,o,l,d,c){return t(),i("div")}const u=e(a,[["render",s]]);export{p as __pageData,u as default};
1	+ import{_ as e,o as t,c as i}from"./chunks/framework.26dFs73Q.js";const p=JSON.parse(`{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Vanilla Frontend","text":"A simple framework","tagline":"For wild HTML, CSS and JS purists lover","actions":[{"theme":"brand","text":"Let's start !","link":"/start/install"},{"theme":"alt","text":"Upgrade Guide","link":"/prologue/upgrade"}]},"features":[{"title":"Class-light and Semantic","details":"Thriving on simplicity, directly styles your HTML tags, using fewer .classes as possible."},{"title":"Accessibility","details":"Use pur HTML and make your frontend more accessible for everyone."},{"title":"Easy Customization","details":"Customize the frontend with over CSS custom properties, or dive deeper by using SCSS."},{"title":"Vanilla JS","details":"Libraries of tiny vanilla JS interaction to make your website more interactive."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}`),a={name:"index.md"};function s(r,n,o,l,d,c){return t(),i("div")}const u=e(a,[["render",s]]);export{p as __pageData,u as default};

package/public/assets/{index.md.CJiHmjB7.lean.js → index.md.DNiLOsZD.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{_ as e,o as t,c as i}from"./chunks/framework.~~CaiDwmc7~~.js";const p=JSON.parse(`{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Vanilla Frontend","text":"A simple framework","tagline":"For wild HTML, CSS and JS purists lover","actions":[{"theme":"brand","text":"Let's start !","link":"/start/install"},{"theme":"alt","text":"Upgrade Guide","link":"/prologue/upgrade"}]},"features":[{"title":"Class-light and Semantic","details":"Thriving on simplicity, directly styles your HTML tags, using fewer .classes as possible."},{"title":"Accessibility","details":"Use pur HTML and make your frontend more accessible for everyone."},{"title":"Easy Customization","details":"Customize the frontend with over CSS custom properties, or dive deeper by using SCSS."},{"title":"Vanilla JS","details":"Libraries of tiny vanilla JS interaction to make your website more interactive."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}`),a={name:"index.md"};function s(r,n,o,l,d,c){return t(),i("div")}const u=e(a,[["render",s]]);export{p as __pageData,u as default};
1	+ import{_ as e,o as t,c as i}from"./chunks/framework.26dFs73Q.js";const p=JSON.parse(`{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Vanilla Frontend","text":"A simple framework","tagline":"For wild HTML, CSS and JS purists lover","actions":[{"theme":"brand","text":"Let's start !","link":"/start/install"},{"theme":"alt","text":"Upgrade Guide","link":"/prologue/upgrade"}]},"features":[{"title":"Class-light and Semantic","details":"Thriving on simplicity, directly styles your HTML tags, using fewer .classes as possible."},{"title":"Accessibility","details":"Use pur HTML and make your frontend more accessible for everyone."},{"title":"Easy Customization","details":"Customize the frontend with over CSS custom properties, or dive deeper by using SCSS."},{"title":"Vanilla JS","details":"Libraries of tiny vanilla JS interaction to make your website more interactive."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}`),a={name:"index.md"};function s(r,n,o,l,d,c){return t(),i("div")}const u=e(a,[["render",s]]);export{p as __pageData,u as default};

package/public/assets/inter-italic-cyrillic-ext._dlW9xFb.woff2 ADDED Viewed

Binary file

package/public/assets/inter-italic-cyrillic.D7dRslh9.woff2 ADDED Viewed

Binary file

package/public/assets/inter-italic-greek-ext.Ct-Tf2bq.woff2 ADDED Viewed

Binary file

package/public/assets/inter-italic-greek.DNcpQ8QC.woff2 ADDED Viewed

Binary file

package/public/assets/inter-italic-latin-ext.DytegdRQ.woff2 ADDED Viewed

Binary file

package/public/assets/inter-italic-latin.COaG5lWR.woff2 ADDED Viewed

Binary file

package/public/assets/inter-italic-vietnamese.BI5UxJD-.woff2 ADDED Viewed

Binary file

package/public/assets/inter-roman-cyrillic-ext.BeNbU08G.woff2 ADDED Viewed

Binary file

package/public/assets/inter-roman-cyrillic.CD0kT8R4.woff2 ADDED Viewed

Binary file

package/public/assets/inter-roman-greek-ext.CFAEQ5Ow.woff2 ADDED Viewed

Binary file

package/public/assets/inter-roman-greek.Dsf7YjP7.woff2 ADDED Viewed

Binary file

package/public/assets/inter-roman-latin-ext.Dl_ayf4-.woff2 ADDED Viewed

Binary file

package/public/assets/inter-roman-latin.Cy4MYw_J.woff2 ADDED Viewed

Binary file

package/public/assets/inter-roman-vietnamese.CpqCnS2H.woff2 ADDED Viewed

Binary file

package/public/assets/{javascript_autofill.md.BewVUo4H.js → javascript_autofill.md.HyVx8c7W.js} RENAMED Viewed

@@ -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 i,a as n,J as a,ai as t,w as h}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const d={id:"autofill",tabindex:"-1"},c=JSON.parse('{"title":"Autofill","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/autofill.md","filePath":"javascript/autofill.md"}'),r={name:"javascript/autofill.md"},C=Object.assign(r,{setup(o){return(g,s)=>{const k=p("Badge");return e(),E("div",null,[i("h1",d,[s[0]||(s[0]=n("Autofill ",-1)),a(k,{type:"warning",text:"JS"}),s[1]||(s[1]=n()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#autofill","aria-label":"Permalink to “Autofill”"},"",-1))]),s[6]||(s[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;"> Autofill </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_autofill&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 autofill component make you able to automaticaly fill some <code>&lt;input&gt;</code> fields by another.</p><p>You can use it with a <code>&lt;select&gt;</code> tag with the <code>aria-controls=&quot;IdOfTheOtherField&quot;</code> attribute.</p><p>The other field must have a <code>data-autofill=&quot;NameOfTheValue&quot;</code> attribute. The value must exist into the <code>&lt;option&gt;</code> tags as <code>data-NameOfTheValue=&quot;value&quot;</code>.</p>',5)),a(l,null,{default:h(()=>[...s[3]||(s[3]=[i("fieldset",null,[i("legend",null,"Favorite animal"),i("div",{class:"group"},[i("select",{class:"autofill-demo",id:"autofillSelect",name:"select","aria-controls":"animalID"},[i("option",null,"--"),i("option",{"data-id":"1"},"Cat"),i("option",{"data-id":"2"},"Dog"),i("option",{"data-id":"3"},"Lizzard"),i("option",{"data-id":"4"},"Bird")]),i("input",{id:"animalID",type:"text",placeholder:"ID of the animal","data-autofill":"id",readonly:""})])],-1)])]),_:1}),s[7]||(s[7]=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.Cw4G3qNN.js";import{I as p,o as e,c as E,j as i,a as n,J as a,ai as t,w as h}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const d={id:"autofill",tabindex:"-1"},c=JSON.parse('{"title":"Autofill","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/autofill.md","filePath":"javascript/autofill.md"}'),r={name:"javascript/autofill.md"},C=Object.assign(r,{setup(o){return(g,s)=>{const k=p("Badge");return e(),E("div",null,[i("h1",d,[s[0]||(s[0]=n("Autofill ",-1)),a(k,{type:"warning",text:"JS"}),s[1]||(s[1]=n()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#autofill","aria-label":"Permalink to “Autofill”"},"",-1))]),s[6]||(s[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;"> Autofill </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_autofill&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 autofill component make you able to automaticaly fill some <code>&lt;input&gt;</code> fields by another.</p><p>You can use it with a <code>&lt;select&gt;</code> tag with the <code>aria-controls=&quot;IdOfTheOtherField&quot;</code> attribute.</p><p>The other field must have a <code>data-autofill=&quot;NameOfTheValue&quot;</code> attribute. The value must exist into the <code>&lt;option&gt;</code> tags as <code>data-NameOfTheValue=&quot;value&quot;</code>.</p>',5)),a(l,null,{default:h(()=>[...s[3]||(s[3]=[i("fieldset",null,[i("legend",null,"Favorite animal"),i("div",{class:"group"},[i("select",{class:"autofill-demo",id:"autofillSelect",name:"select","aria-controls":"animalID"},[i("option",null,"--"),i("option",{"data-id":"1"},"Cat"),i("option",{"data-id":"2"},"Dog"),i("option",{"data-id":"3"},"Lizzard"),i("option",{"data-id":"4"},"Bird")]),i("input",{id:"animalID",type:"text",placeholder:"ID of the animal","data-autofill":"id",readonly:""})])],-1)])]),_:1}),s[7]||(s[7]=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;Favorite animal&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;">select</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;autofillSelect&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;select&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;animalID&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/{javascript_autofill.md.BewVUo4H.lean.js → javascript_autofill.md.HyVx8c7W.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{C as l}from"./chunks/ComponentPreview.~~BW2s4ay5~~.js";import{I as p,o as e,c as E,j as i,a as n,J as a,ai as t,w as h}from"./chunks/framework.~~CaiDwmc7~~.js";/* empty css */const d={id:"autofill",tabindex:"-1"},c=JSON.parse('{"title":"Autofill","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/autofill.md","filePath":"javascript/autofill.md"}'),r={name:"javascript/autofill.md"},C=Object.assign(r,{setup(o){return(g,s)=>{const k=p("Badge");return e(),E("div",null,[i("h1",d,[s[0]\|\|(s[0]=n("Autofill ",-1)),a(k,{type:"warning",text:"JS"}),s[1]\|\|(s[1]=n()),s[2]\|\|(s[2]=i("a",{class:"header-anchor",href:"#autofill","aria-label":"Permalink to “Autofill”"},"",-1))]),s[6]\|\|(s[6]=t("",5)),a(l,null,{default:h(()=>[...s[3]\|\|(s[3]=[i("fieldset",null,[i("legend",null,"Favorite animal"),i("div",{class:"group"},[i("select",{class:"autofill-demo",id:"autofillSelect",name:"select","aria-controls":"animalID"},[i("option",null,"--"),i("option",{"data-id":"1"},"Cat"),i("option",{"data-id":"2"},"Dog"),i("option",{"data-id":"3"},"Lizzard"),i("option",{"data-id":"4"},"Bird")]),i("input",{id:"animalID",type:"text",placeholder:"ID of the animal","data-autofill":"id",readonly:""})])],-1)])]),_:1}),s[7]\|\|(s[7]=t("",2)),a(l,null,{default:h(()=>[...s[4]\|\|(s[4]=[i("fieldset",null,[i("legend",null,"Favorite ice cream"),i("div",{class:"group"},[i("input",{class:"autofill-demo",id:"autofillList",name:"datalist",list:"myDatalist","aria-controls":"flavourID flavorColor",placeholder:"Choose a flavor"}),i("input",{id:"flavourID",type:"text",placeholder:"ID of the icecream","data-autofill":"id",readonly:""}),i("input",{id:"flavorColor",type:"text",placeholder:"Color of the icecream","data-autofill":"color",readonly:""})])],-1),i("datalist",{id:"myDatalist"},[i("option",{"data-id":"1","data-color":"Brown",value:"Chocolate"}),i("option",{"data-id":"2","data-color":"White",value:"Coconut"}),i("option",{"data-id":"3","data-color":"Green",value:"Mint"}),i("option",{"data-id":"4","data-color":"Red",value:"Strawberry"}),i("option",{"data-id":"5","data-color":"Yellow",value:"Vanilla"})],-1)])]),_:1}),s[8]\|\|(s[8]=t("",2)),a(l,null,{default:h(()=>[...s[5]\|\|(s[5]=[i("label",{for:"autofillList"},"Choose a file",-1),i("input",{class:"autofill-demo",id:"autofillFile",type:"file",name:"file","aria-controls":"fileName fileSize fileType fileCleanName fileExtension"},null,-1),i("fieldset",null,[i("legend",null,"File data"),i("div",{class:"group"},[i("input",{id:"fileName",type:"text",placeholder:"Name of the file","data-autofill":"name",readonly:""}),i("input",{id:"fileSize",type:"text",placeholder:"Size of the file","data-autofill":"size",readonly:""}),i("input",{id:"fileType",type:"text",placeholder:"Type of the file","data-autofill":"type",readonly:""}),i("input",{id:"fileCleanName",type:"text",placeholder:"Clean name of the file","data-autofill":"filename",readonly:""}),i("input",{id:"fileExtension",type:"text",placeholder:"Extension of the file","data-autofill":"extension",readonly:""})])],-1)])]),_:1}),s[9]\|\|(s[9]=t("",5))])}}});export{c as __pageData,C as default};
1	+ import{C as l}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as p,o as e,c as E,j as i,a as n,J as a,ai as t,w as h}from"./chunks/framework.26dFs73Q.js";/* empty css */const d={id:"autofill",tabindex:"-1"},c=JSON.parse('{"title":"Autofill","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/autofill.md","filePath":"javascript/autofill.md"}'),r={name:"javascript/autofill.md"},C=Object.assign(r,{setup(o){return(g,s)=>{const k=p("Badge");return e(),E("div",null,[i("h1",d,[s[0]\|\|(s[0]=n("Autofill ",-1)),a(k,{type:"warning",text:"JS"}),s[1]\|\|(s[1]=n()),s[2]\|\|(s[2]=i("a",{class:"header-anchor",href:"#autofill","aria-label":"Permalink to “Autofill”"},"",-1))]),s[6]\|\|(s[6]=t("",5)),a(l,null,{default:h(()=>[...s[3]\|\|(s[3]=[i("fieldset",null,[i("legend",null,"Favorite animal"),i("div",{class:"group"},[i("select",{class:"autofill-demo",id:"autofillSelect",name:"select","aria-controls":"animalID"},[i("option",null,"--"),i("option",{"data-id":"1"},"Cat"),i("option",{"data-id":"2"},"Dog"),i("option",{"data-id":"3"},"Lizzard"),i("option",{"data-id":"4"},"Bird")]),i("input",{id:"animalID",type:"text",placeholder:"ID of the animal","data-autofill":"id",readonly:""})])],-1)])]),_:1}),s[7]\|\|(s[7]=t("",2)),a(l,null,{default:h(()=>[...s[4]\|\|(s[4]=[i("fieldset",null,[i("legend",null,"Favorite ice cream"),i("div",{class:"group"},[i("input",{class:"autofill-demo",id:"autofillList",name:"datalist",list:"myDatalist","aria-controls":"flavourID flavorColor",placeholder:"Choose a flavor"}),i("input",{id:"flavourID",type:"text",placeholder:"ID of the icecream","data-autofill":"id",readonly:""}),i("input",{id:"flavorColor",type:"text",placeholder:"Color of the icecream","data-autofill":"color",readonly:""})])],-1),i("datalist",{id:"myDatalist"},[i("option",{"data-id":"1","data-color":"Brown",value:"Chocolate"}),i("option",{"data-id":"2","data-color":"White",value:"Coconut"}),i("option",{"data-id":"3","data-color":"Green",value:"Mint"}),i("option",{"data-id":"4","data-color":"Red",value:"Strawberry"}),i("option",{"data-id":"5","data-color":"Yellow",value:"Vanilla"})],-1)])]),_:1}),s[8]\|\|(s[8]=t("",2)),a(l,null,{default:h(()=>[...s[5]\|\|(s[5]=[i("label",{for:"autofillList"},"Choose a file",-1),i("input",{class:"autofill-demo",id:"autofillFile",type:"file",name:"file","aria-controls":"fileName fileSize fileType fileCleanName fileExtension"},null,-1),i("fieldset",null,[i("legend",null,"File data"),i("div",{class:"group"},[i("input",{id:"fileName",type:"text",placeholder:"Name of the file","data-autofill":"name",readonly:""}),i("input",{id:"fileSize",type:"text",placeholder:"Size of the file","data-autofill":"size",readonly:""}),i("input",{id:"fileType",type:"text",placeholder:"Type of the file","data-autofill":"type",readonly:""}),i("input",{id:"fileCleanName",type:"text",placeholder:"Clean name of the file","data-autofill":"filename",readonly:""}),i("input",{id:"fileExtension",type:"text",placeholder:"Extension of the file","data-autofill":"extension",readonly:""})])],-1)])]),_:1}),s[9]\|\|(s[9]=t("",5))])}}});export{c as __pageData,C as default};

package/public/assets/{javascript_check.md.B6ajE66i.js → javascript_check.md.BCbZtUBE.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as k}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as n,o as e,c as p,j as i,a,J as t,ai as h,w as E}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const d={id:"check-all",tabindex:"-1"},u=JSON.parse('{"title":"Check all","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/check.md","filePath":"javascript/check.md"}'),r={name:"javascript/check.md"},b=Object.assign(r,{setup(g){return(o,s)=>{const l=n("Badge");return e(),p("div",null,[i("h1",d,[s[0]||(s[0]=a("Check all ",-1)),t(l,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#check-all","aria-label":"Permalink to “Check all”"},"",-1))]),s[4]||(s[4]=h('<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;"> CheckAll </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_check-all&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 check all component make you able to toggle a checkbox in relation of others.</p><p>The value of the parent checkbox must be the name of the children.</p>',4)),t(k,null,{default:E(()=>[...s[3]||(s[3]=[i("input",{type:"checkbox",id:"checkboxAll",name:"all",value:"check[]"},null,-1),i("label",{for:"checkboxAll"},"Check all",-1),i("fieldset",null,[i("legend",null,"Choices"),i("input",{type:"checkbox",id:"checkboxA",name:"check[]",value:"a"}),i("label",{for:"checkboxA"},"A"),i("input",{type:"checkbox",id:"checkboxB",name:"check[]",value:"b"}),i("label",{for:"checkboxB"},"B"),i("input",{type:"checkbox",id:"checkboxC",name:"check[]",value:"c"}),i("label",{for:"checkboxC"},"C")],-1)])]),_:1}),s[5]||(s[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="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;">input</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;checkbox&quot;</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;checkboxAll&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;all&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;check[]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as k}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as n,o as e,c as p,j as i,a,J as t,ai as h,w as E}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const d={id:"check-all",tabindex:"-1"},u=JSON.parse('{"title":"Check all","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/check.md","filePath":"javascript/check.md"}'),r={name:"javascript/check.md"},b=Object.assign(r,{setup(g){return(o,s)=>{const l=n("Badge");return e(),p("div",null,[i("h1",d,[s[0]||(s[0]=a("Check all ",-1)),t(l,{type:"warning",text:"JS"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#check-all","aria-label":"Permalink to “Check all”"},"",-1))]),s[4]||(s[4]=h('<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;"> CheckAll </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_check-all&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 check all component make you able to toggle a checkbox in relation of others.</p><p>The value of the parent checkbox must be the name of the children.</p>',4)),t(k,null,{default:E(()=>[...s[3]||(s[3]=[i("input",{type:"checkbox",id:"checkboxAll",name:"all",value:"check[]"},null,-1),i("label",{for:"checkboxAll"},"Check all",-1),i("fieldset",null,[i("legend",null,"Choices"),i("input",{type:"checkbox",id:"checkboxA",name:"check[]",value:"a"}),i("label",{for:"checkboxA"},"A"),i("input",{type:"checkbox",id:"checkboxB",name:"check[]",value:"b"}),i("label",{for:"checkboxB"},"B"),i("input",{type:"checkbox",id:"checkboxC",name:"check[]",value:"c"}),i("label",{for:"checkboxC"},"C")],-1)])]),_:1}),s[5]||(s[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="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;">input</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;checkbox&quot;</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;checkboxAll&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;all&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;check[]&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;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;checkboxAll&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Check all&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</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;">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;Choices&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">legend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/public/assets/{javascript_check.md.B6ajE66i.lean.js → javascript_check.md.BCbZtUBE.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{C as k}from"./chunks/ComponentPreview.~~BW2s4ay5~~.js";import{I as n,o as e,c as p,j as i,a,J as t,ai as h,w as E}from"./chunks/framework.~~CaiDwmc7~~.js";/* empty css */const d={id:"check-all",tabindex:"-1"},u=JSON.parse('{"title":"Check all","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/check.md","filePath":"javascript/check.md"}'),r={name:"javascript/check.md"},b=Object.assign(r,{setup(g){return(o,s)=>{const l=n("Badge");return e(),p("div",null,[i("h1",d,[s[0]\|\|(s[0]=a("Check all ",-1)),t(l,{type:"warning",text:"JS"}),s[1]\|\|(s[1]=a()),s[2]\|\|(s[2]=i("a",{class:"header-anchor",href:"#check-all","aria-label":"Permalink to “Check all”"},"",-1))]),s[4]\|\|(s[4]=h("",4)),t(k,null,{default:E(()=>[...s[3]\|\|(s[3]=[i("input",{type:"checkbox",id:"checkboxAll",name:"all",value:"check[]"},null,-1),i("label",{for:"checkboxAll"},"Check all",-1),i("fieldset",null,[i("legend",null,"Choices"),i("input",{type:"checkbox",id:"checkboxA",name:"check[]",value:"a"}),i("label",{for:"checkboxA"},"A"),i("input",{type:"checkbox",id:"checkboxB",name:"check[]",value:"b"}),i("label",{for:"checkboxB"},"B"),i("input",{type:"checkbox",id:"checkboxC",name:"check[]",value:"c"}),i("label",{for:"checkboxC"},"C")],-1)])]),_:1}),s[5]\|\|(s[5]=h("",1))])}}});export{u as __pageData,b as default};
1	+ import{C as k}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as n,o as e,c as p,j as i,a,J as t,ai as h,w as E}from"./chunks/framework.26dFs73Q.js";/* empty css */const d={id:"check-all",tabindex:"-1"},u=JSON.parse('{"title":"Check all","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/check.md","filePath":"javascript/check.md"}'),r={name:"javascript/check.md"},b=Object.assign(r,{setup(g){return(o,s)=>{const l=n("Badge");return e(),p("div",null,[i("h1",d,[s[0]\|\|(s[0]=a("Check all ",-1)),t(l,{type:"warning",text:"JS"}),s[1]\|\|(s[1]=a()),s[2]\|\|(s[2]=i("a",{class:"header-anchor",href:"#check-all","aria-label":"Permalink to “Check all”"},"",-1))]),s[4]\|\|(s[4]=h("",4)),t(k,null,{default:E(()=>[...s[3]\|\|(s[3]=[i("input",{type:"checkbox",id:"checkboxAll",name:"all",value:"check[]"},null,-1),i("label",{for:"checkboxAll"},"Check all",-1),i("fieldset",null,[i("legend",null,"Choices"),i("input",{type:"checkbox",id:"checkboxA",name:"check[]",value:"a"}),i("label",{for:"checkboxA"},"A"),i("input",{type:"checkbox",id:"checkboxB",name:"check[]",value:"b"}),i("label",{for:"checkboxB"},"B"),i("input",{type:"checkbox",id:"checkboxC",name:"check[]",value:"c"}),i("label",{for:"checkboxC"},"C")],-1)])]),_:1}),s[5]\|\|(s[5]=h("",1))])}}});export{u as __pageData,b as default};

package/public/assets/{javascript_comfort.md.BRci3j7V.js → javascript_comfort.md.CQm191VA.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{C as e}from"./chunks/ComponentPreview.BW2s4ay5.js";import{I as k,o as p,c as o,j as i,a as h,J as a,ai as t,w as l}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const r={id:"comfort",tabindex:"-1"},m=JSON.parse('{"title":"Comfort","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/comfort.md","filePath":"javascript/comfort.md"}'),d={name:"javascript/comfort.md"},b=Object.assign(d,{setup(E){return(g,s)=>{const n=k("Badge");return p(),o("div",null,[i("h1",r,[s[0]||(s[0]=h("Comfort ",-1)),a(n,{type:"warning",text:"JS"}),s[1]||(s[1]=h()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#comfort","aria-label":"Permalink to “Comfort”"},"",-1))]),s[6]||(s[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;"> Comfort </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_comfort&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>You can change the CSS custom properties of a website with the comfort component.</p><p>You can triggered changes by using some <code>&lt;button&gt;</code> tags or with some javascript methods. The changes are saved into a cookie.</p><p>An <code>aria-pressed</code> attribute will be automatically added to the <code>&lt;button&gt;</code> tag.</p><h3 id="themes" tabindex="-1">Themes <a class="header-anchor" href="#themes" aria-label="Permalink to “Themes”"></a></h3><p>You can change the global theme via some <code>&lt;button&gt;</code> tag with the <code>data-theme</code> and value attributes.</p><p>Or you can use the javascript method <code>setTheme(value)</code>.</p><p>In both case, it will add a <code>data-theme</code> attribute on the <code>&lt;html&gt;</code> tag of your website.</p>',9)),a(e,null,{default:l(()=>[...s[3]||(s[3]=[i("p",{class:"demo-theme"},"Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?",-1),i("button",{"data-theme":"",value:"light"},"Light theme",-1),i("button",{"data-theme":"",value:"dark"},"Dark theme",-1)])]),_:1}),s[7]||(s[7]=t(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-30" id="tab-31" checked><label data-title="html" for="tab-31">html</label><input type="radio" name="group-30" id="tab-32"><label data-title="css" for="tab-32">css</label><input type="radio" name="group-30" id="tab-33"><label data-title="js" for="tab-33">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;">p</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-theme&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{C as e}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as k,o as p,c as o,j as i,a as h,J as a,ai as t,w as l}from"./chunks/framework.26dFs73Q.js";/* empty css                                                                                */const r={id:"comfort",tabindex:"-1"},m=JSON.parse('{"title":"Comfort","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/comfort.md","filePath":"javascript/comfort.md"}'),d={name:"javascript/comfort.md"},b=Object.assign(d,{setup(E){return(g,s)=>{const n=k("Badge");return p(),o("div",null,[i("h1",r,[s[0]||(s[0]=h("Comfort ",-1)),a(n,{type:"warning",text:"JS"}),s[1]||(s[1]=h()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#comfort","aria-label":"Permalink to “Comfort”"},"",-1))]),s[6]||(s[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;"> Comfort </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@natachah/vanilla-frontend/js/_comfort&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>You can change the CSS custom properties of a website with the comfort component.</p><p>You can triggered changes by using some <code>&lt;button&gt;</code> tags or with some javascript methods. The changes are saved into a cookie.</p><p>An <code>aria-pressed</code> attribute will be automatically added to the <code>&lt;button&gt;</code> tag.</p><h3 id="themes" tabindex="-1">Themes <a class="header-anchor" href="#themes" aria-label="Permalink to “Themes”"></a></h3><p>You can change the global theme via some <code>&lt;button&gt;</code> tag with the <code>data-theme</code> and value attributes.</p><p>Or you can use the javascript method <code>setTheme(value)</code>.</p><p>In both case, it will add a <code>data-theme</code> attribute on the <code>&lt;html&gt;</code> tag of your website.</p>',9)),a(e,null,{default:l(()=>[...s[3]||(s[3]=[i("p",{class:"demo-theme"},"Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?",-1),i("button",{"data-theme":"",value:"light"},"Light theme",-1),i("button",{"data-theme":"",value:"dark"},"Dark theme",-1)])]),_:1}),s[7]||(s[7]=t(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-30" id="tab-31" checked><label data-title="html" for="tab-31">html</label><input type="radio" name="group-30" id="tab-32"><label data-title="css" for="tab-32">css</label><input type="radio" name="group-30" id="tab-33"><label data-title="js" for="tab-33">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;">p</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-theme&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</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;"> data-theme</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;light&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Light theme&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;"> data-theme</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;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Dark theme&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</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:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">data-theme</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">light</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.demo-theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
 <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>

package/public/assets/{javascript_comfort.md.BRci3j7V.lean.js → javascript_comfort.md.CQm191VA.lean.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{C as e}from"./chunks/ComponentPreview.~~BW2s4ay5~~.js";import{I as k,o as p,c as o,j as i,a as h,J as a,ai as t,w as l}from"./chunks/framework.~~CaiDwmc7~~.js";/* empty css */const r={id:"comfort",tabindex:"-1"},m=JSON.parse('{"title":"Comfort","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/comfort.md","filePath":"javascript/comfort.md"}'),d={name:"javascript/comfort.md"},b=Object.assign(d,{setup(E){return(g,s)=>{const n=k("Badge");return p(),o("div",null,[i("h1",r,[s[0]\|\|(s[0]=h("Comfort ",-1)),a(n,{type:"warning",text:"JS"}),s[1]\|\|(s[1]=h()),s[2]\|\|(s[2]=i("a",{class:"header-anchor",href:"#comfort","aria-label":"Permalink to “Comfort”"},"",-1))]),s[6]\|\|(s[6]=t("",9)),a(e,null,{default:l(()=>[...s[3]\|\|(s[3]=[i("p",{class:"demo-theme"},"Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?",-1),i("button",{"data-theme":"",value:"light"},"Light theme",-1),i("button",{"data-theme":"",value:"dark"},"Dark theme",-1)])]),_:1}),s[7]\|\|(s[7]=t("",4)),a(e,null,{default:l(()=>[...s[4]\|\|(s[4]=[i("p",null,"Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?",-1),i("button",{"data-style":"--font-size",value:"1rem"},"1 rem",-1),i("button",{"data-style":"--font-size",value:"1.5rem"},"1.5 rem",-1),i("button",{"data-style":"--font-size",value:"2rem"},"2 rem",-1)])]),_:1}),s[8]\|\|(s[8]=t("",2)),a(e,null,{default:l(()=>[...s[5]\|\|(s[5]=[i("label",{for:"demoCustomColor",style:{color:"var(--demo-label-color, black)"}},"Change my label color !",-1),i("input",{id:"demoCustomColor",name:"demo-change-color","data-style-custom":"--demo-label-color",type:"color"},null,-1)])]),_:1}),s[9]\|\|(s[9]=t("",7))])}}});export{m as __pageData,b as default};
1	+ import{C as e}from"./chunks/ComponentPreview.Cw4G3qNN.js";import{I as k,o as p,c as o,j as i,a as h,J as a,ai as t,w as l}from"./chunks/framework.26dFs73Q.js";/* empty css */const r={id:"comfort",tabindex:"-1"},m=JSON.parse('{"title":"Comfort","description":"","frontmatter":{},"headers":[],"relativePath":"javascript/comfort.md","filePath":"javascript/comfort.md"}'),d={name:"javascript/comfort.md"},b=Object.assign(d,{setup(E){return(g,s)=>{const n=k("Badge");return p(),o("div",null,[i("h1",r,[s[0]\|\|(s[0]=h("Comfort ",-1)),a(n,{type:"warning",text:"JS"}),s[1]\|\|(s[1]=h()),s[2]\|\|(s[2]=i("a",{class:"header-anchor",href:"#comfort","aria-label":"Permalink to “Comfort”"},"",-1))]),s[6]\|\|(s[6]=t("",9)),a(e,null,{default:l(()=>[...s[3]\|\|(s[3]=[i("p",{class:"demo-theme"},"Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?",-1),i("button",{"data-theme":"",value:"light"},"Light theme",-1),i("button",{"data-theme":"",value:"dark"},"Dark theme",-1)])]),_:1}),s[7]\|\|(s[7]=t("",4)),a(e,null,{default:l(()=>[...s[4]\|\|(s[4]=[i("p",null,"Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?",-1),i("button",{"data-style":"--font-size",value:"1rem"},"1 rem",-1),i("button",{"data-style":"--font-size",value:"1.5rem"},"1.5 rem",-1),i("button",{"data-style":"--font-size",value:"2rem"},"2 rem",-1)])]),_:1}),s[8]\|\|(s[8]=t("",2)),a(e,null,{default:l(()=>[...s[5]\|\|(s[5]=[i("label",{for:"demoCustomColor",style:{color:"var(--demo-label-color, black)"}},"Change my label color !",-1),i("input",{id:"demoCustomColor",name:"demo-change-color","data-style-custom":"--demo-label-color",type:"color"},null,-1)])]),_:1}),s[9]\|\|(s[9]=t("",7))])}}});export{m as __pageData,b as default};