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/components/table.html DELETED Viewed

@@ -1,168 +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 ></title>
-</head>
-<body data-preload>
-    <doc-layout>
-        <h1>Table</h1>
-        <p>The table is using the native <code>&lt;table&gt;</code> tag.</p>
-        <doc-demo>
-            <table>
-                <caption>Caption of the table</caption>
-                <thead>
-                    <tr>
-                        <th>Head A</th>
-                        <th>Head B</th>
-                        <th>Head C</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>Cell</td>
-                        <td>Cell</td>
-                        <td>Cell</td>
-                    </tr>
-                    <tr>
-                        <td>Cell</td>
-                        <td>Cell</td>
-                        <td>Cell</td>
-                    </tr>
-                    <tr>
-                        <td>Cell</td>
-                        <td>Cell</td>
-                        <td>Cell</td>
-                    </tr>
-                </tbody>
-                <tfoot>
-                    <tr>
-                        <th>Foot A</th>
-                        <th>Foot B</th>
-                        <th>Foot C</th>
-                    </tr>
-                </tfoot>
-            </table>
-        </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">
-                <table>
-                    <caption>Caption of the table</caption>
-                    <thead>
-                        <tr>
-                            <th>A</th>
-                            <th>B</th>
-                            <th>C</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>Cell</td>
-                            <td>Cell</td>
-                            <td>Cell</td>
-                        </tr>
-                    </tbody>
-                    <tfoot>
-                        <tr>
-                            <th>Result A</th>
-                            <th>Result B</th>
-                            <th>Result C</th>
-                        </tr>
-                    </tfoot>
-                </table>
-            </doc-code>
-            <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use '@natachah/vanilla-frontend/scss/components/table';
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --table-padding-inline
-                --table-padding-block
-                --table-align-inline
-                --table-align-block
-                --table-border-size
-                --table-border-style
-                --table-border-color
-                --table-divider-size
-                --table-divider-style
-                --table-divider-color
-            </doc-code>
-        </div>
-        <h2>Responsive</h2>
-        <p>To render a table responsive, you can use the SASS mixin <code>as-responsive-table()</code> inside a <code>@media</code> or <code>@container</code>.</p>
-        <p>It require the attribute <code>data-label=&quot;Name of the column&quot;</code> on each <code>&lt;td&gt;</code>.</p>
-        <doc-demo>
-            <div class="as-container">
-                <table id="demoTable">
-                    <thead>
-                        <tr>
-                            <th>Header A</th>
-                            <th>Header B</th>
-                            <th>Header C</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td data-label="Header A">Cell</td>
-                            <td data-label="Header B">Cell</td>
-                            <td data-label="Header C">Cell</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </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>
-                <button role="tab" aria-controls="css">CSS</button>
-            </div>
-            <doc-code id="html" data-type="html" role="tabpanel">
-                <table id="demoTable">
-                    <thead>
-                        <tr>
-                            <th>Header A</th>
-                            <th>Header B</th>
-                            <th>Header C</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td data-label="Header A">Cell</td>
-                            <td data-label="Header B">Cell</td>
-                            <td data-label="Header C">Cell</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </doc-code>
-            <doc-code id="scss" data-type="scss" role="tabpanel">
-                @container (max-width:800px) {
-                    #myTable {
-                        @include as-responsive-table()
-                    }
-                }
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --table-grid-template
-            </doc-code>
-        </div>
-        <blockquote>
-            <p>By default the grid is set on 2 columns (15 characters and auto).</p>
-        </blockquote>
-    </doc-layout>
-    <script type="module" src="/main.js"></script>
-</body>
-</html>

package/docs/pages/customs/badge.html DELETED Viewed

@@ -1,150 +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 > Badge</title>
-</head>
-<body data-preload>
-    <doc-layout>
-        <h1>Badge</h1>
-        <p>The badge is using a <code>&lt;span&gt;</code> tag with the class <code>.badge</code>.</p>
-        <doc-demo>
-            <span class="badge">Badge</span>
-        </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">
-                <span class="badge">Badge</span>
-            </doc-code>
-            <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use '@natachah/vanilla-frontend/scss/components/badge';
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --badge-color
-                --badge-background
-                --badge-border-size
-                --badge-border-style
-                --badge-border-color
-                --badge-border-radius
-                --badge-padding-inline
-                --badge-padding-block
-                --badge-font-size
-            </doc-code>
-        </div>
-        <h2>Icon and size</h2>
-        <p>You can add an <code>&lt;svg&gt;</code> icon inside the badge.</p>
-        <doc-demo>
-            <span class="badge">
-                <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>
-                Badge
-            </span>
-        </doc-demo>
-        <p>You can adapte the size of the badge by changing their <code>font-size</code>.</p>
-        <doc-demo>
-            <span class="badge" style="font-size: .75em">Small</span>
-            <span class="badge">Normal</span>
-            <span class="badge" style="font-size: var(--font-size-large)">Large</span>
-        </doc-demo>
-        <blockquote>
-            <p>By default the badge have a font-size set at <code>.875em</code>.</p>
-        </blockquote>
-        <h2>Variants</h2>
-        <h3>Outline</h3>
-        <p>You can create an outline variation by adding the class <code>.outline</code>.</p>
-        <doc-demo>
-            <span class="badge outline">Badge</span>
-        </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">
-                <span class="badge outline">Badge</span>
-            </doc-code>
-            <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use "@natachah/vanilla-frontend/scss/components/badge" 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>
-            <span class="badge primary">Primary</span> <span class="badge outline primary">Outline</span>
-        </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">
-                <span class="badge primary">Primary</span>
-                <span class="badge outline primary">Outline</span>
-            </doc-code>
-            <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use "@natachah/vanilla-frontend/scss/components/badge" with ($colors: ('primary'), $outline: true);
-            </doc-code>
-        </div>
-        <h3>Group</h3>
-        <p>You can group some badges by putting them in a <code>&lt;div&gt;</code> with the class <code>.group</code>.</p>
-        <doc-demo>
-            <div class="group">
-                <span class="badge">Badge A</span>
-                <span class="badge">Badge B</span>
-                <span class="badge">Badge C</span>
-            </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">
-                    <span class="badge">Badge A</span>
-                    <span class="badge">Badge B</span>
-                    <span class="badge">Badge C</span>
-                </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>

package/docs/pages/customs/breadcrumb.html DELETED Viewed

@@ -1,67 +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 ></title>
-</head>
-<body data-preload>
-    <doc-layout>
-        <h1>Breadcrumb</h1>
-        <p>To create a breadcrumb navigation, always use <code>&lt;ol&gt;</code> with a class <code>.breadcrumb</code> inside a <code>&lt;nav&gt;</code> tag.</p>
-        <p>The breadcrumb will automatically be distributed horizontally.</p>
-        <doc-demo>
-            <nav aria-label="Breadcrumb navigaton">
-                <ol class="breadcrumb">
-                    <li><a href="#">One</a></li>
-                    <li><a href="#">Two</a></li>
-                    <li><a href="#">Three</a></li>
-                    <li aria-current="location">Four</li>
-                </ol>
-            </nav>
-        </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">
-                <nav aria-label="Breadcrumb navigaton">
-                    <ol class="breadcrumb">
-                        <li><a href="#">One</a></li>
-                        <li><a href="#">Two</a></li>
-                        <li><a href="#">Three</a></li>
-                        <li aria-current="location">Four</li>
-                    </ol>
-                </nav>
-            </doc-code>
-            <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use '@natachah/vanilla-frontend/scss/components/breadcrumb';
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --breadcrumb-divider
-                --breadcrumb-divider-color
-                --breadcrumb-gap
-                --breadcrumb-decoration
-                --breadcrumb-color
-                --breadcrumb-hover-color
-                --breadcrumb-active-color
-                --breadcrumb-disabled-opacity
-            </doc-code>
-        </div>
-        <blockquote class="warning">
-            <p>The custom properties for the breadcrumb is overriding the default ones in the typography setting.</p>
-        </blockquote>
-    </doc-layout>
-    <script type="module" src="/main.js"></script>
-</body>
-</html>

package/docs/pages/customs/card.html DELETED Viewed

@@ -1,185 +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 > Card</title>
-</head>
-<body data-preload>
-    <doc-layout>
-        <h1>Card</h1>
-        <p>The card is using a <code>&lt;div&gt;</code> or an <code>&lt;article&gt;</code> tag with the class <code>.card</code>.</p>
-        <doc-demo>
-            <div class="card">Hello there !</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>
-                <button role="tab" aria-controls="css">CSS</button>
-            </div>
-            <doc-code id="html" data-type="html" role="tabpanel">
-                <div class="card">Hello there !</div>
-            </doc-code>
-            <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use '@natachah/vanilla-frontend/scss/components/card';
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --card-color
-                --card-background
-                --card-border-size
-                --card-border-style
-                --card-border-color
-                --card-border-radius
-                --card-padding-inline
-                --card-padding-block
-                --card-divider-size
-                --card-divider-style
-                --card-divider-color
-            </doc-code>
-        </div>
-        <h2>Layout</h2>
-        <p>The card can have a <code>&lt;header&gt;</code> and/or <code>&lt;footer&gt;</code> inside to create a more complexe layout.</p>
-        <doc-demo>
-            <article class="card">
-                <header>Header</header>
-                <p>Content</p>
-                <footer>Footer</footer>
-            </article>
-        </doc-demo>
-        <doc-code>
-            <article class="card">
-                <header>Header</header>
-                <p>Content</p>
-                <footer>Footer</footer>
-            </article>
-        </doc-code>
-        <p>You also can add a <code>&lt;picture&gt;</code> on the top, center or bottom of a card.</p>
-        <p>To make the picture full width add the class <code>.flush</code></p>
-        <doc-demo>
-            <div class="card">
-                <picture class="flush">
-                    <img src="https://picsum.photos/400/200" srcset="https://picsum.photos/800/400 2x" alt="My random image from lorem picsum">
-                </picture>
-                <h3>Title of the card</h3>
-                <p>Content of the card</p>
-            </div>
-        </doc-demo>
-        <doc-code>
-            <div class="card">
-                <picture class="flush">
-                    <img src="https://picsum.photos/400/200" srcset="https://picsum.photos/800/400 2x" alt="My random image from lorem picsum">
-                </picture>
-                <h3>Title of the card</h3>
-                <p>Content of the card</p>
-            </div>
-        </doc-code>
-        <blockquote class="warning">
-            <p>You can't use directly <code>&lt;img&gt;</code> tag because of CSS bug.</p>
-        </blockquote>
-        <p>The card is compatible with the components <b>group</b> and <b>list</b></p>
-        <p>To make them full width add the class <code>.flush</code></p>
-        <doc-demo>
-            <div class="card" style="--card-border-color:#000;">
-                <h3>Mycard</h3>
-                <p>Content of the card</p>
-                <div class="group flush">
-                    <button>Button A</button>
-                    <button>Button B</button>
-                </div>
-                <p>Content of the card</p>
-                <ul class="list flush">
-                    <li><a href="#" role="button">List F</a></li>
-                    <li>List D</li>
-                    <li><a>List E</a></li>
-                    <li><span>List F</span><button>Button</button></li>
-                    <li><a href="#" role="button">List F</a></li>
-                </ul>
-            </div>
-        </doc-demo>
-        <doc-code>
-            <div class="card" style="--card-border-color:#000">
-                <h3>Mycard</h3>
-                <p>Content of the card</p>
-                <div class="group flush">
-                    <button>Button A</button>
-                    <button>Button B</button>
-                </div>
-                <p>Content of the card</p>
-                <ul class="list flush">
-                    <li>List D</li>
-                    <li><a>List E</a></li>
-                    <li><span>List F</span><button>Button</button></li>
-                    <li><a href="#" role="button">List F</a></li>
-                </ul>
-            </div>
-        </doc-code>
-        <h2 id="variants">Variants</h2>
-        <h3>Outline</h3>
-        <p>You can create an outline variation by adding the class <code>.outline</code>.</p>
-        <doc-demo>
-            <div class="card outline">Hello there !</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="card outline">Hello there !</div>
-            </doc-code>
-            <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use "@natachah/vanilla-frontend/scss/components/card" 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>
-            <div class="card primary">Hello there !</div>
-            <div class="card outline primary" style="margin-top:1rem">Hello there !</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="card primary">Hello there !</div>
-                <div class="card outline primary">Hello there !</div>
-            </doc-code>
-            <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use "@natachah/vanilla-frontend/scss/components/card" with ($colors: ('primary'),$outline: true);
-            </doc-code>
-        </div>
-    </doc-layout>
-    <script type="module" src="/main.js"></script>
-</body>
-</html>