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

@natachah/vanilla-frontend 0.4.0 → 1.0.0

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 (283) hide show

package/.gitlab-ci.yml +22 -13
package/LICENSE.md +1 -1
package/docs/.vitepress/config.mts +101 -0
package/docs/base/layout.md +77 -0
package/docs/base/media.md +146 -0
package/docs/base/reset.md +33 -0
package/docs/base/typography.md +296 -0
package/docs/classes/badge.md +146 -0
package/docs/classes/breadcrumb.md +54 -0
package/docs/classes/card.md +171 -0
package/docs/classes/dropdown.md +180 -0
package/docs/classes/grid.md +230 -0
package/docs/classes/list.md +90 -0
package/docs/components/button.md +254 -0
package/docs/components/dialog.md +223 -0
package/docs/components/disclosure.md +169 -0
package/docs/components/form.md +514 -0
package/docs/components/loading.md +53 -0
package/docs/components/popover.md +270 -0
package/docs/components/progress.md +33 -0
package/docs/components/table.md +175 -0
package/docs/index.md +27 -0
package/docs/javascript/autofill.md +155 -0
package/docs/javascript/check.md +53 -0
package/docs/javascript/comfort.md +125 -0
package/docs/javascript/consent.md +89 -0
package/docs/javascript/cookie.md +33 -0
package/docs/javascript/drawer.md +99 -0
package/docs/javascript/form.md +130 -0
package/docs/javascript/scroll.md +104 -0
package/docs/javascript/slider.md +130 -0
package/docs/javascript/sortable.md +127 -0
package/docs/javascript/tabpanel.md +72 -0
package/docs/javascript/toggle.md +182 -0
package/docs/javascript/trap.md +33 -0
package/docs/javascript/tree.md +220 -0
package/docs/prologue/conventions.md +92 -0
package/docs/prologue/release.md +44 -0
package/docs/prologue/upgrade.md +21 -0
package/docs/{pages/demo/layout.html → public/demo/demo.html} +1 -2
package/docs/start/customization.md +184 -0
package/docs/start/install.md +80 -0
package/docs/start/mixin.md +203 -0
package/docs/vuejs/ComponentPreview.vue +99 -0
package/js/_slider.js +17 -1
package/js/vanilla-frontend-doc.js +105 -0
package/natachah-vanilla-frontend-1.0.0.tgz +0 -0
package/package.json +11 -14
package/public/404.html +22 -0
package/public/assets/app.DsgDPRSA.js +1 -0
package/public/assets/base_layout.md.CTGv6rTn.js +13 -0
package/public/assets/base_layout.md.CTGv6rTn.lean.js +1 -0
package/public/assets/base_media.md.CcuDUcF-.js +24 -0
package/public/assets/base_media.md.CcuDUcF-.lean.js +1 -0
package/public/assets/base_reset.md.DqIdqFRJ.js +3 -0
package/public/assets/base_reset.md.DqIdqFRJ.lean.js +1 -0
package/public/assets/base_typography.md.DV-ikqGZ.js +87 -0
package/public/assets/base_typography.md.DV-ikqGZ.lean.js +1 -0
package/public/assets/chunks/ComponentPreview.BW2s4ay5.js +27 -0
package/public/assets/chunks/framework.CaiDwmc7.js +4 -0
package/public/assets/chunks/theme.DL_11MHV.js +1 -0
package/public/assets/classes_badge.md.BCGzPr6f.js +24 -0
package/public/assets/classes_badge.md.BCGzPr6f.lean.js +1 -0
package/public/assets/classes_breadcrumb.md.vU6jlo36.js +15 -0
package/public/assets/classes_breadcrumb.md.vU6jlo36.lean.js +1 -0
package/public/assets/classes_card.md.BZEh2l_B.js +41 -0
package/public/assets/classes_card.md.BZEh2l_B.lean.js +1 -0
package/public/assets/classes_dropdown.md.BLVw_xQY.js +70 -0
package/public/assets/classes_dropdown.md.BLVw_xQY.lean.js +1 -0
package/public/assets/classes_grid.md.47v-Ybqe.js +45 -0
package/public/assets/classes_grid.md.47v-Ybqe.lean.js +1 -0
package/public/assets/classes_list.md.BW9PWZV1.js +36 -0
package/public/assets/classes_list.md.BW9PWZV1.lean.js +1 -0
package/public/assets/components_button.md.vx3HzdpN.js +45 -0
package/public/assets/components_button.md.vx3HzdpN.lean.js +1 -0
package/public/assets/components_dialog.md.C-0gJGus.js +76 -0
package/public/assets/components_dialog.md.C-0gJGus.lean.js +1 -0
package/public/assets/components_disclosure.md.DeSRu9_P.js +53 -0
package/public/assets/components_disclosure.md.DeSRu9_P.lean.js +1 -0
package/public/assets/components_form.md.Be8d5WFv.js +122 -0
package/public/assets/components_form.md.Be8d5WFv.lean.js +1 -0
package/public/assets/components_loading.md.CKDG7z5x.js +4 -0
package/public/assets/components_loading.md.CKDG7z5x.lean.js +1 -0
package/public/assets/components_popover.md.CwgNttNc.js +102 -0
package/public/assets/components_popover.md.CwgNttNc.lean.js +1 -0
package/public/assets/components_progress.md.CNC7rJiC.js +6 -0
package/public/assets/components_progress.md.CNC7rJiC.lean.js +1 -0
package/public/assets/components_table.md.LyBkIDkF.js +75 -0
package/public/assets/components_table.md.LyBkIDkF.lean.js +1 -0
package/public/assets/index.md.CJiHmjB7.js +1 -0
package/public/assets/index.md.CJiHmjB7.lean.js +1 -0
package/public/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
package/public/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
package/public/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
package/public/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
package/public/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
package/public/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
package/public/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
package/public/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
package/public/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
package/public/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
package/public/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
package/public/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
package/public/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
package/public/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
package/public/assets/javascript_autofill.md.BewVUo4H.js +49 -0
package/public/assets/javascript_autofill.md.BewVUo4H.lean.js +1 -0
package/public/assets/javascript_check.md.B6ajE66i.js +13 -0
package/public/assets/javascript_check.md.B6ajE66i.lean.js +1 -0
package/public/assets/javascript_comfort.md.BRci3j7V.js +20 -0
package/public/assets/javascript_comfort.md.BRci3j7V.lean.js +1 -0
package/public/assets/javascript_consent.md.Bjv8ZDS6.js +29 -0
package/public/assets/javascript_consent.md.Bjv8ZDS6.lean.js +1 -0
package/public/assets/javascript_cookie.md.Dlhyk4Ha.js +2 -0
package/public/assets/javascript_cookie.md.Dlhyk4Ha.lean.js +1 -0
package/public/assets/javascript_drawer.md.BCJX3fL-.js +32 -0
package/public/assets/javascript_drawer.md.BCJX3fL-.lean.js +1 -0
package/public/assets/javascript_form.md.Cwf_gxLI.js +40 -0
package/public/assets/javascript_form.md.Cwf_gxLI.lean.js +2 -0
package/public/assets/javascript_scroll.md.BrJijWbF.js +30 -0
package/public/assets/javascript_scroll.md.BrJijWbF.lean.js +1 -0
package/public/assets/javascript_slider.md.DDO8wC4u.js +27 -0
package/public/assets/javascript_slider.md.DDO8wC4u.lean.js +1 -0
package/public/assets/javascript_sortable.md.BKyem7yw.js +35 -0
package/public/assets/javascript_sortable.md.BKyem7yw.lean.js +1 -0
package/public/assets/javascript_tabpanel.md.D9M-_xE0.js +19 -0
package/public/assets/javascript_tabpanel.md.D9M-_xE0.lean.js +1 -0
package/public/assets/javascript_toggle.md.C8582WNC.js +46 -0
package/public/assets/javascript_toggle.md.C8582WNC.lean.js +1 -0
package/public/assets/javascript_trap.md.Bc59YUng.js +2 -0
package/public/assets/javascript_trap.md.Bc59YUng.lean.js +1 -0
package/public/assets/javascript_tree.md.uc1UUsFV.js +72 -0
package/public/assets/javascript_tree.md.uc1UUsFV.lean.js +1 -0
package/public/assets/prologue_conventions.md.D8nVwlRS.js +34 -0
package/public/assets/prologue_conventions.md.D8nVwlRS.lean.js +1 -0
package/public/assets/prologue_release.md.CG6nuFnt.js +1 -0
package/public/assets/prologue_release.md.CG6nuFnt.lean.js +1 -0
package/public/assets/prologue_upgrade.md.CFxokaBG.js +1 -0
package/public/assets/prologue_upgrade.md.CFxokaBG.lean.js +1 -0
package/public/assets/start_customization.md.t-ze_NoQ.js +141 -0
package/public/assets/start_customization.md.t-ze_NoQ.lean.js +1 -0
package/public/assets/start_install.md.OluH7l11.js +46 -0
package/public/assets/start_install.md.OluH7l11.lean.js +1 -0
package/public/assets/start_mixin.md.D76cLRSX.js +85 -0
package/public/assets/start_mixin.md.D76cLRSX.lean.js +1 -0
package/public/assets/style.zIeGMibA.css +1 -0
package/public/base/layout.html +37 -0
package/public/base/media.html +179 -0
package/public/base/reset.html +27 -0
package/public/base/typography.html +320 -0
package/public/bundles/vanilla-frontend-doc.css +1 -0
package/public/bundles/vanilla-frontend-doc.js +1 -0
package/public/bundles/vanilla-frontend.css +1 -0
package/public/classes/badge.html +205 -0
package/public/classes/breadcrumb.html +66 -0
package/public/classes/card.html +222 -0
package/public/classes/dropdown.html +147 -0
package/public/classes/grid.html +278 -0
package/public/classes/list.html +113 -0
package/public/components/button.html +304 -0
package/public/components/dialog.html +205 -0
package/public/components/disclosure.html +130 -0
package/public/components/form.html +589 -0
package/public/components/loading.html +107 -0
package/public/components/popover.html +257 -0
package/public/components/progress.html +57 -0
package/public/components/table.html +152 -0
package/public/demo/demo.html +84 -0
package/public/hashmap.json +1 -0
package/public/index.html +25 -0
package/public/javascript/autofill.html +152 -0
package/public/javascript/check.html +64 -0
package/public/javascript/comfort.html +123 -0
package/public/javascript/consent.html +80 -0
package/public/javascript/cookie.html +26 -0
package/public/javascript/drawer.html +83 -0
package/public/javascript/form.html +117 -0
package/public/javascript/scroll.html +81 -0
package/public/javascript/slider.html +78 -0
package/public/javascript/sortable.html +112 -0
package/public/javascript/tabpanel.html +70 -0
package/public/javascript/toggle.html +201 -0
package/public/javascript/trap.html +26 -0
package/public/javascript/tree.html +175 -0
package/public/prologue/conventions.html +58 -0
package/public/prologue/release.html +25 -0
package/public/prologue/upgrade.html +25 -0
package/public/start/customization.html +165 -0
package/public/start/install.html +70 -0
package/public/start/mixin.html +109 -0
package/public/vp-icons.css +0 -0
package/sandbox/index.html +27 -0
package/sandbox/js/sandbox-header.js +57 -0
package/sandbox/js/sandbox-test.js +91 -0
package/sandbox/pages/base/layout.html +80 -0
package/sandbox/pages/base/media.html +52 -0
package/sandbox/pages/base/typography.html +132 -0
package/sandbox/pages/components/button.html +70 -0
package/sandbox/pages/components/dialog.html +72 -0
package/sandbox/pages/components/disclosure.html +77 -0
package/sandbox/pages/components/form.html +164 -0
package/sandbox/pages/components/loading.html +32 -0
package/sandbox/pages/components/popover.html +119 -0
package/sandbox/pages/components/progress.html +28 -0
package/sandbox/pages/components/table.html +80 -0
package/sandbox/pages/customs/badge.html +59 -0
package/sandbox/pages/customs/breadcrumb.html +34 -0
package/sandbox/pages/customs/card.html +71 -0
package/sandbox/pages/customs/dropdown.html +70 -0
package/sandbox/pages/customs/grid.html +109 -0
package/sandbox/pages/customs/list.html +43 -0
package/sandbox/pages/javascript/autofill.html +39 -0
package/sandbox/pages/javascript/checkall.html +37 -0
package/sandbox/pages/javascript/comfort.html +41 -0
package/sandbox/pages/javascript/consent.html +45 -0
package/sandbox/pages/javascript/form.html +50 -0
package/sandbox/pages/javascript/scroll.html +44 -0
package/sandbox/pages/javascript/slider.html +44 -0
package/sandbox/pages/javascript/sortable.html +56 -0
package/sandbox/pages/javascript/tabpanel.html +39 -0
package/sandbox/pages/javascript/toggle.html +72 -0
package/sandbox/pages/javascript/tree.html +96 -0
package/sandbox/sandbox.js +26 -0
package/sandbox/scss/sandbox-header.scss +93 -0
package/scss/base/_reset.scss +2 -0
package/scss/components/_badge.scss +2 -1
package/scss/components/_dropdown.scss +2 -2
package/scss/components/_group.scss +8 -4
package/scss/components/_popover.scss +74 -0
package/scss/components/index.scss +1 -0
package/scss/themes/_root.scss +3 -0
package/scss/vanilla-frontend-doc.scss +46 -1
package/scss/vanilla-frontend-sandbox.scss +34 -0
package/vite.config.js +30 -0
package/docs/index.html +0 -36
package/docs/main-demo.js +0 -2
package/docs/main.js +0 -34
package/docs/pages/base/layout.html +0 -131
package/docs/pages/base/media.html +0 -142
package/docs/pages/base/reset.html +0 -53
package/docs/pages/base/typography.html +0 -334
package/docs/pages/components/button.html +0 -202
package/docs/pages/components/dialog.html +0 -336
package/docs/pages/components/disclosure.html +0 -174
package/docs/pages/components/form.html +0 -427
package/docs/pages/components/loading.html +0 -58
package/docs/pages/components/progress.html +0 -47
package/docs/pages/components/table.html +0 -168
package/docs/pages/customs/badge.html +0 -150
package/docs/pages/customs/breadcrumb.html +0 -67
package/docs/pages/customs/card.html +0 -185
package/docs/pages/customs/drawer.html +0 -149
package/docs/pages/customs/dropdown.html +0 -270
package/docs/pages/customs/grid.html +0 -185
package/docs/pages/customs/list.html +0 -112
package/docs/pages/customs/slider.html +0 -273
package/docs/pages/javascript/autofill.html +0 -170
package/docs/pages/javascript/checkall.html +0 -59
package/docs/pages/javascript/comfort.html +0 -146
package/docs/pages/javascript/consent.html +0 -112
package/docs/pages/javascript/cookie.html +0 -81
package/docs/pages/javascript/form.html +0 -199
package/docs/pages/javascript/scroll.html +0 -209
package/docs/pages/javascript/sortable.html +0 -167
package/docs/pages/javascript/tabpanel.html +0 -89
package/docs/pages/javascript/toggle.html +0 -193
package/docs/pages/javascript/trap.html +0 -89
package/docs/pages/javascript/tree.html +0 -256
package/docs/pages/quick-start/conventions.html +0 -112
package/docs/pages/quick-start/customization.html +0 -184
package/docs/pages/quick-start/installation.html +0 -97
package/docs/pages/quick-start/mixins.html +0 -214
package/docs/src/js/demo.js +0 -110
package/docs/src/js/doc-code.js +0 -102
package/docs/src/js/doc-demo.js +0 -14
package/docs/src/js/doc-layout.js +0 -117
package/docs/src/scss/demo.scss +0 -77
package/docs/src/scss/layout.scss +0 -83
package/docs/src/scss/style.scss +0 -278
package/docs/vite.config.mjs +0 -23
package/esbuild.mjs +0 -25
package/natachah-vanilla-frontend-0.4.0.tgz +0 -0
package/vitest.config.js +0 -8

package/docs/pages/base/reset.html DELETED Viewed

@@ -1,53 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Documentations: Base > Reset</title>
-</head>
-<body data-preload>
-    <doc-layout>
-        <h1>Reset</h1>
-        <p>The framework include a simple <b>reboot</b> to makes browsers render all elements more consistently and in line with modern standards.</p>
-        <ul>
-            <li>Unset all default style <em>(except display)</em> </li>
-            <li>Change box-sizing to <code>border-box</code> on all element</li>
-            <li>Render media as block with a default 100% width</li>
-            <li>Change the <code>overflow-wrap</code> for text</li>
-            <li>Set default size and align for <code>&lt;svg&gt;</code></li>
-            <li>Set <code>&lt;table&gt;</code>default width</li>
-            <li>Set default cursor for <code>draggable</code></li>
-            <li>Set default cursor and animation for <code>tree</code></li>
-            <li>Enable <code>scroll-behavior</code> if <code>prefers-reduced-motion</code> is not set</li>
-            <li>Set default <code>body</code> setting + <code>inert</code> mode for <code>&lt;dialog&gt;</code></li>
-            <li>Set functionalities on <code>body</code> for <code>inert</code> and <code>data-preload</code> attributes </li>
-        </ul>
-        <p>To use it, import this file:</p>
-        <doc-code data-type="scss">
-            @use '@natachah/vanilla-frontend/scss/base/reset';
-        </doc-code>
-        <h2>Preload</h2>
-        <p>If you need to disabled the CSS animation on first load of the page add the data attribute <code>data-preload</code> on the <code>&lt;body&gt;</code>.</p>
-        <p>And then add this script taht will remove the attribute after a timeout:</p>
-        <doc-code data-type="js">
-            setTimeout(() => {
-                document.body.removeAttribute('data-preload')
-            }, 10)
-        </doc-code>
-    </doc-layout>
-    <script type="module" src="/main.js"></script>
-</body>
-</html>

package/docs/pages/base/typography.html DELETED Viewed

@@ -1,334 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Documentations: Base > Typography</title>
-</head>
-<body data-preload>
-    <doc-layout>
-        <h1>Typography</h1>
-        <p>All website have some typographic elements, here some basic styling.</p>
-        <p>To use it, import this file:</p>
-        <doc-code data-type="scss">
-            @use '@natachah/vanilla-frontend/scss/base/typography'
-        </doc-code>
-        <h2>Heading</h2>
-        <p>The headings use the default <code>&lt;h*&gt;</code> tags.</p>
-        <doc-demo>
-            <h1>Heading 1</h1>
-            <h2>Heading 2</h2>
-            <h3>Heading 3</h3>
-            <h4>Heading 4</h4>
-            <h5>Heading 5</h5>
-            <h6>Heading 6</h6>
-        </doc-demo>
-        <div class="code-group">
-            <div role="tablist">
-                <button role="tab" aria-controls="html">HTML</button>
-                <button role="tab" aria-controls="css">CSS</button>
-            </div>
-            <doc-code id="html" data-type="html" role="tabpanel">
-                <h1>Heading 1</h1>
-                <h2>Heading 2</h2>
-                <h3>Heading 3</h3>
-                <h4>Heading 4</h4>
-                <h5>Heading 5</h5>
-                <h6>Heading 6</h6>
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --font-size-h*
-                --heading-font-weight
-                --heading-line-height
-                --heading-color
-            </doc-code>
-        </div>
-        <h2>Paragraph</h2>
-        <p>The paragraph use the default <code>&lt;p&gt;</code> tag.</p>
-        <p>As each website is uniq, there is no default <code>margin-block</code> for the paragraph.</p>
-        <doc-demo>
-            <p>Paragraph ! 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?</p>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id rem placeat suscipit a consequatur ipsam nam quis eveniet vel nobis sunt praesentium explicabo alias obcaecati, perferendis nostrum ut veritatis mollitia.</p>
-            <p>Accusamus sit saepe laborum, veniam doloribus aliquid, commodi odio corrupti, repellendus pariatur modi. Saepe recusandae, natus fuga quidem ab iusto beatae molestias tempore rem esse aspernatur aut quasi deserunt atque.</p>
-        </doc-demo>
-        <h2>Anchor</h2>
-        <p>Use the default <code>&lt;a&gt;</code> tag to create links.</p>
-        <p>You can add the <code>aria-current</code> or <code>aria-selected</code> attribute to make the link with an active state.</p>
-        <p>By default if there is no <code>href</code> attribute, it will render as disabled state.</p>
-        <doc-demo>
-            <a href="#">Anchor</a>
-            <a href="#" aria-current="page">Active</a>
-            <a>Disabled</a>
-        </doc-demo>
-        <div class="code-group">
-            <div role="tablist">
-                <button role="tab" aria-controls="html">HTML</button>
-                <button role="tab" aria-controls="css">CSS</button>
-            </div>
-            <doc-code id="html" data-type="html" role="tabpanel">
-                <a href="#">Anchor</a>
-                <a href="#" aria-current="page">Active</a>
-                <a>Disabled</a>
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --anchor-decoration
-                --anchor-color
-                --anchor-hover-color
-                --anchor-focus-color
-                --anchor-active-color
-                --anchor-disabled-opacity
-                --anchor-outline-size
-                --anchor-outline-style
-                --anchor-outline-color
-                --anchor-outline-offset
-            </doc-code>
-        </div>
-        <p>By default the external link with <code>target="_blank"</code> attribute, will have an icon for accessibility.</p>
-        <doc-demo>
-            <a href="#" target="_blank" title="This link opens in a new window" aria-label="This link opens in a new window">Anchor</a>
-        </doc-demo>
-        <div class="code-group">
-            <div role="tablist">
-                <button role="tab" aria-controls="html">HTML</button>
-                <button role="tab" aria-controls="css">CSS</button>
-            </div>
-            <doc-code id="html" data-type="html" role="tabpanel">
-                <a href="#" target="_blank" title="This link opens in a new window" aria-label="This link opens in a new window">Anchor</a>
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --icon-external
-            </doc-code>
-        </div>
-        <h2>Inline</h2>
-        <doc-demo>
-            <div class="grid demo-inline">
-                <p><abbr title="Abbreviation">Abbr.</abbr></p>
-                <p><small>Small</small></p>
-                <p><q>An inline quote</q></p>
-                <p><b>Bold</b></p>
-                <p><strong>Strong</strong></p>
-                <p><em>Emphasis</em></p>
-                <p><i>Idiomatic</i></p>
-                <p><s>Strikethrough</s></p>
-                <p><u>Underline</u></p>
-                <p><span>Text <sub>Sub</sub></span></p>
-                <p><span>Text <sup>Sup</sup></span></p>
-                <p><cite>Citation</cite></p>
-                <p><mark>Highlight</mark></p>
-                <p><kbd>Ctrl + S</kbd></p>
-                <p><code>&lt;Code&gt;</code></p>
-                <p><ins>Inserted</ins></p>
-                <p><del>Deleted</del></p>
-            </div>
-        </doc-demo>
-        <div class="code-group">
-            <div role="tablist">
-                <button role="tab" aria-controls="html">HTML</button>
-                <button role="tab" aria-controls="css">CSS</button>
-            </div>
-            <doc-code id="html" data-type="html" role="tabpanel">
-                <p><abbr title="Abbreviation">Abbr.</abbr></p>
-                <p><small>Small</small></p>
-                <p><q>An inline quote</q></p>
-                <p><b>Bold</b></p>
-                <p><b>b</b></p>
-                <p><em>Emphasis</em></p>
-                <p><i>Idiomatic</i></p>
-                <p><s>Strikethrough</s></p>
-                <p><u>Underline</u></p>
-                <p><span>Text <sub>Sub</sub></span></p>
-                <p><span>Text <sup>Sup</sup></span></p>
-                <p><cite>Citation</cite></p>
-                <p><mark>Highlight</mark></p>
-                <p><kbd>Ctrl + S</kbd></p>
-                <p><code>&lt;Code&gt;</code></p>
-                <p><ins>Inserted</ins></p>
-                <p><del>Deleted</del></p>
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --mark-padding-block
-                --mark-padding-inline
-                --mark-background
-                --kbd-padding-block
-                --kbd-padding-inline
-                --kbd-font-family
-                --kbd-color
-                --kbd-background
-                --kbd-border-radius
-                --code-padding-block
-                --code-padding-inline
-                --code-font-family
-                --code-color
-                --code-background
-                --code-border-radius
-            </doc-code>
-        </div>
-        <h2>Blockquote</h2>
-        <p>The quotes use the default <code>&lt;blockquote&gt;</code> tag.
-            Because the blockquote is usully design per website, their is no custom properties for them.</p>
-        <doc-demo>
-            <blockquote>
-                <p>
-                    “It's only after we've lost everything that we're free to do anything.”
-                </p>
-                <footer>
-                    - Chuck Palahniuk, <cite>Fight Club</cite>
-                </footer>
-            </blockquote>
-        </doc-demo>
-        <doc-code>
-            <blockquote>
-                It was a bright cold day in April, and the clocks were striking thirteen.
-            </blockquote>
-            <blockquote>
-                <p>
-                    “It's only after we've lost everything that we're free to do anything.”
-                </p>
-                <footer>
-                    - Chuck Palahniuk, <cite>Fight Club</cite>
-                </footer>
-            </blockquote>
-        </doc-code>
-        <h2>Code</h2>
-        <p>Use the <code>&lt;pre&gt;</code> tag with a <code>&lt;code&gt;</code> tag inside.
-            The design of a block of code is not the same as the inline element.</p>
-        <doc-demo>
-            <pre><code><!--
-            -->&lt;p&gt;Sample text here...&lt;/p&gt;<br><!--
-            -->&lt;p&gt;And another line of sample text here...&lt;/p&gt;</code></pre>
-        </doc-demo>
-        <div class="code-group">
-            <div role="tablist">
-                <button role="tab" aria-controls="html">HTML</button>
-                <button role="tab" aria-controls="css">CSS</button>
-            </div>
-            <doc-code id="html" data-type="html" role="tabpanel">
-                <pre><code><!--
-                -->&lt;p&gt;Sample text here...&lt;/p&gt;<br><!--
-                -->&lt;p&gt;And another line of sample text here...&lt;/p&gt;</code></pre>
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --pre-padding-block
-                --pre-padding-inline
-                --pre-font-family
-                --pre-color
-                --pre-background
-                --pre-border-radius
-            </doc-code>
-        </div>
-        <h2>List</h2>
-        <p>The lists use the default <code>&lt;ul&gt;</code> <code>&lt;ol&gt;</code> and <code>&lt;dl&gt;</code> tags.
-            Because the lists are usully design per website/situation, their is not too much custom properties for them.</p>
-        <doc-demo>
-            <ul>
-                <li>Lorem ipsum dolor sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dolores eligendi assumenda eaque sint nemo non laudantium quidem, voluptate ipsum sapiente accusantium mollitia vitae quia tenetur cupiditate voluptatibus maxime fugiat?</li>
-                <li>Velit ipsam blanditiis ducimus?</li>
-                <li>Porro impedit provident at!</li>
-            </ul>
-            <ol>
-                <li>Lorem, ipsum dolor.</li>
-                <li>Obcaecati, a impedit!</li>
-                <li>Quo, eligendi veritatis?</li>
-            </ol>
-            <dl>
-                <dt>Coffee</dt>
-                <dd>Black hot drink</dd>
-                <dt>Milk</dt>
-                <dd>White cold drink</dd>
-            </dl>
-        </doc-demo>
-        <div class="code-group">
-            <div role="tablist">
-                <button role="tab" aria-controls="html">HTML</button>
-                <button role="tab" aria-controls="css">CSS</button>
-            </div>
-            <doc-code id="html" data-type="html" role="tabpanel">
-                <ul>
-                    <li>Coffee</li>
-                    <li>Milk</li>
-                    <li>...</li>
-                </ul>
-                <ol>
-                    <li>Make coffee</li>
-                    <li>Add the milk</li>
-                    <li>Drink it !</li>
-                </ol>
-                <dl>
-                    <dt>Coffee</dt>
-                    <dd>Black hot drink</dd>
-                    <dt>Milk</dt>
-                    <dd>White cold drink</dd>
-                </dl>
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --list-bullet
-                --list-offset
-            </doc-code>
-        </div>
-        <h2>Line</h2>
-        <p>Use the default <code>&lt;hr&gt;</code> tag render a horizontal line.</p>
-        <doc-demo>
-            <hr>
-        </doc-demo>
-        <div class="code-group">
-            <div role="tablist">
-                <button role="tab" aria-controls="html">HTML</button>
-                <button role="tab" aria-controls="css">CSS</button>
-            </div>
-            <doc-code id="html" data-type="html" role="tabpanel">
-                <hr>
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --hr-border-size
-                --hr-border-style
-                --hr-border-color
-            </doc-code>
-        </div>
-    </doc-layout>
-    <script type="module" src="/main.js"></script>
-</body>
-</html>

package/docs/pages/components/button.html DELETED Viewed

@@ -1,202 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Documentations: Components > Button</title>
-</head>
-<body data-preload>
-    <doc-layout>
-        <h1>Button</h1>
-        <p>The button is using the native <code>&lt;button&gt;</code> tag, or an <code>&lt;a&gt;</code> tag with the attribute <code>role=&quot;button&quot;</code>.</p>
-        <doc-demo>
-            <button>Button</button>
-            <a href="#" role="button">Link as button</a>
-        </doc-demo>
-        <div class="code-group">
-            <div role="tablist">
-                <button role="tab" aria-controls="html">HTML</button>
-                <button role="tab" aria-controls="scss">SCSS</button>
-                <button role="tab" aria-controls="css">CSS</button>
-            </div>
-            <doc-code id="html" data-type="html" role="tabpanel">
-                <button>Button</button>
-                <a href="#" role="button">Link as button</a>
-            </doc-code>
-            <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use '@natachah/vanilla-frontend/scss/components/button';
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --button-color
-                --button-background
-                --button-border-size
-                --button-border-style
-                --button-border-color
-                --button-border-radius
-                --button-padding-inline
-                --button-padding-block
-                --button-transition
-                --button-decoration
-                --button-outline-size
-                --button-outline-style
-                --button-outline-color
-                --button-outline-offset
-                --button-hover-color
-                --button-hover-background
-                --button-hover-border-color
-                --button-focus-color
-                --button-focus-background
-                --button-focus-border-color
-                --button-active-color
-                --button-active-background
-                --button-active-border-color
-                --button-disabled-opacity
-            </doc-code>
-        </div>
-        <h2>Icon and size</h2>
-        <p>You can add an <code>&lt;svg&gt;</code> icon inside the button.</p>
-        <doc-demo>
-            <button>
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                    <path d="M8 8c.828 0 1.5-.895 1.5-2S8.828 4 8 4s-1.5.895-1.5 2S7.172 8 8 8Z" />
-                    <path d="M11.953 8.81c-.195-3.388-.968-5.507-1.777-6.819C9.707 1.233 9.23.751 8.857.454a3.495 3.495 0 0 0-.463-.315A2.19 2.19 0 0 0 8.25.064.546.546 0 0 0 8 0a.549.549 0 0 0-.266.073 2.312 2.312 0 0 0-.142.08 3.67 3.67 0 0 0-.459.33c-.37.308-.844.803-1.31 1.57-.805 1.322-1.577 3.433-1.774 6.756l-1.497 1.826-.004.005A2.5 2.5 0 0 0 2 12.202V15.5a.5.5 0 0 0 .9.3l1.125-1.5c.166-.222.42-.4.752-.57.214-.108.414-.192.625-.281l.198-.084c.7.428 1.55.635 2.4.635.85 0 1.7-.207 2.4-.635.067.03.132.056.196.083.213.09.413.174.627.282.332.17.586.348.752.57l1.125 1.5a.5.5 0 0 0 .9-.3v-3.298a2.5 2.5 0 0 0-.548-1.562l-1.499-1.83ZM12 10.445v.055c0 .866-.284 1.585-.75 2.14.146.064.292.13.425.199.39.197.8.46 1.1.86L13 14v-1.798a1.5 1.5 0 0 0-.327-.935L12 10.445ZM4.75 12.64C4.284 12.085 4 11.366 4 10.5v-.054l-.673.82a1.5 1.5 0 0 0-.327.936V14l.225-.3c.3-.4.71-.664 1.1-.861.133-.068.279-.135.425-.199ZM8.009 1.073c.063.04.14.094.226.163.284.226.683.621 1.09 1.28C10.137 3.836 11 6.237 11 10.5c0 .858-.374 1.48-.943 1.893C9.517 12.786 8.781 13 8 13c-.781 0-1.517-.214-2.057-.607C5.373 11.979 5 11.358 5 10.5c0-4.182.86-6.586 1.677-7.928.409-.67.81-1.082 1.096-1.32.09-.076.17-.135.236-.18Z" />
-                    <path d="M9.479 14.361c-.48.093-.98.139-1.479.139-.5 0-.999-.046-1.479-.139L7.6 15.8a.5.5 0 0 0 .8 0l1.079-1.439Z" />
-                </svg>
-                Button
-            </button>
-        </doc-demo>
-        <p>You can adapte the size of the button by changing their <code>font-size</code>.</p>
-        <doc-demo>
-            <button style="font-size: var(--font-size-small)">Small</button>
-            <button>Normal</button>
-            <button style="font-size: var(--font-size-large)">Large</button>
-        </doc-demo>
-        <h2>States</h2>
-        <p>The button can have multiple states as <code>:focus</code>, <code>:hover</code>, <code>:active</code> and <code>:disabled</code></p>
-        <h3>Active</h3>
-        <p>Apply the <code>aria-pressed</code>, <code>aria-current</code>, or <code>aria-selected</code> attribute on the <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code> tag to display the active style.</p>
-        <doc-demo>
-            <button aria-pressed="true">Button</button>
-            <a href="#" role="button" aria-current="true">Link as button</a>
-        </doc-demo>
-        <h3>Disabled</h3>
-        <p>Apply the <code>disabled</code> attribute on <code>&lt;button&gt;</code> or remove the <code>href</code> attribute on <code>&lt;a&gt;</code> to display the disabled style.</p>
-        <doc-demo>
-            <button disabled>Button</button>
-            <a role="button">Link as button</a>
-        </doc-demo>
-        <h2>Variants</h2>
-        <h3>Outline</h3>
-        <p>You can create an outline variation by adding the class <code>.outline</code>.</p>
-        <doc-demo>
-            <button class="outline">Button</button>
-            <button class="outline" disabled>Disabled</button>
-            <button class="outline" aria-pressed="true">Active</button>
-        </doc-demo>
-        <div class="code-group">
-            <div role="tablist">
-                <button role="tab" aria-controls="html">HTML</button>
-                <button role="tab" aria-controls="scss">SCSS</button>
-            </div>
-            <doc-code id="html" data-type="html" role="tabpanel">
-                <button class="outline">Button</button>
-                <button class="outline" disabled>Disabled</button>
-                <button class="outline" aria-pressed="true">Active</button>
-            </doc-code>
-            <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use "@natachah/vanilla-frontend/scss/components/button" with ($outline: true);
-            </doc-code>
-        </div>
-        <h3>Color</h3>
-        <p>You can create a color variation by adding the class <code>.{COLOR}</code>.</p>
-        <doc-demo>
-            <button class="primary">Primary</button> <button class="primary" disabled>Disabled</button> <button class="primary" aria-pressed="true">Active</button>
-            <button class="primary outline">Primary</button> <button class="primary outline" disabled>Disabled</button> <button class="primary outline" aria-pressed="true">Active</button>
-        </doc-demo>
-        <div class="code-group">
-            <div role="tablist">
-                <button role="tab" aria-controls="html">HTML</button>
-                <button role="tab" aria-controls="scss">SCSS</button>
-            </div>
-            <doc-code id="html" data-type="html" role="tabpanel">
-                <button class="primary">Primary</button>
-                <button class="primary" disabled>Disabled</button>
-                <button class="primary" aria-pressed="true">Active</button>
-                <button class="primary outline">Primary</button>
-                <button class="primary outline" disabled>Disabled</button>
-                <button class="primary outline" aria-pressed="true">Active</button>
-            </doc-code>
-            <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use "@natachah/vanilla-frontend/scss/components/button" with ($colors: ('primary'),$outline: true);
-            </doc-code>
-        </div>
-        <h3>As link</h3>
-        <p>You can create a button that look as a simple link with the attribute <code>role="link"</code>.</p>
-        <doc-demo>
-            <button role="link">As link</button>
-            <button role="link" disabled>As disabled link</button>
-        </doc-demo>
-        <doc-code data-typ="html">
-            <button role="link">As link</button>
-            <button role="link" disabled>As disabled link</button>
-        </doc-code>
-        <h3>Group</h3>
-        <p>You can group some badge by putting them in a <code>&lt;div&gt;</code> with the class <code>.group</code>.</p>
-        <doc-demo>
-            <div class="group">
-                <button>Button A</button>
-                <button>Button B</button>
-                <button>Button C</button>
-            </div>
-        </doc-demo>
-        <div class="code-group">
-            <div role="tablist">
-                <button role="tab" aria-controls="html">HTML</button>
-                <button role="tab" aria-controls="scss">SCSS</button>
-            </div>
-            <doc-code id="html" data-type="html" role="tabpanel">
-                <div class="group">
-                    <button>Button A</button>
-                    <button>Button B</button>
-                    <button>Button C</button>
-                </div>
-            </doc-code>
-            <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use '@natachah/vanilla-frontend/scss/components/group';
-            </doc-code>
-        </div>
-    </doc-layout>
-    <script type="module" src="/main.js"></script>
-</body>
-</html>