npm - @natachah/vanilla-frontend - Versions diffs - 0.0.2 - Mend

@natachah/vanilla-frontend 0.0.2

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

package/.gitlab-ci.yml +40 -0
package/LICENSE.md +7 -0
package/README.md +11 -0
package/docs/index.html +36 -0
package/docs/main.js +32 -0
package/docs/pages/components/badge.html +154 -0
package/docs/pages/components/button.html +186 -0
package/docs/pages/components/card.html +184 -0
package/docs/pages/components/dialog.html +334 -0
package/docs/pages/components/disclosure.html +310 -0
package/docs/pages/components/dropdown.html +255 -0
package/docs/pages/components/form.html +331 -0
package/docs/pages/components/list.html +140 -0
package/docs/pages/components/loading.html +58 -0
package/docs/pages/components/media.html +130 -0
package/docs/pages/components/nav.html +119 -0
package/docs/pages/components/progress.html +47 -0
package/docs/pages/components/slider.html +311 -0
package/docs/pages/components/table.html +168 -0
package/docs/pages/javascript/autofill.html +170 -0
package/docs/pages/javascript/checkall.html +59 -0
package/docs/pages/javascript/comfort.html +134 -0
package/docs/pages/javascript/consent.html +112 -0
package/docs/pages/javascript/cookie.html +81 -0
package/docs/pages/javascript/form.html +199 -0
package/docs/pages/javascript/scroll.html +209 -0
package/docs/pages/javascript/sidebar.html +53 -0
package/docs/pages/javascript/sortable.html +148 -0
package/docs/pages/javascript/toggle.html +191 -0
package/docs/pages/javascript/tree.html +221 -0
package/docs/pages/layout/grid.html +201 -0
package/docs/pages/layout/reset.html +53 -0
package/docs/pages/layout/typography.html +324 -0
package/docs/pages/quick-start/conventions.html +112 -0
package/docs/pages/quick-start/customization.html +187 -0
package/docs/pages/quick-start/installation.html +95 -0
package/docs/pages/quick-start/mixins.html +228 -0
package/docs/pages/test.html +15 -0
package/docs/src/js/demo.js +98 -0
package/docs/src/js/doc-code.js +102 -0
package/docs/src/js/doc-demo.js +14 -0
package/docs/src/js/doc-layout.js +108 -0
package/docs/src/scss/demo.scss +77 -0
package/docs/src/scss/layout.scss +160 -0
package/docs/src/scss/style.scss +278 -0
package/docs/vite.config.mjs +23 -0
package/esbuild.mjs +25 -0
package/js/_autofill.js +131 -0
package/js/_check-all.js +77 -0
package/js/_comfort.js +174 -0
package/js/_consent.js +84 -0
package/js/_dialog.js +164 -0
package/js/_dropdown.js +101 -0
package/js/_scroll.js +184 -0
package/js/_sidebar.js +97 -0
package/js/_slider.js +249 -0
package/js/_sortable.js +143 -0
package/js/_tabpanel.js +88 -0
package/js/_toggle.js +123 -0
package/js/_tree.js +85 -0
package/js/tests/autofill.test.js +157 -0
package/js/tests/base-component.test.js +108 -0
package/js/tests/check-all.test.js +88 -0
package/js/tests/comfort.test.js +219 -0
package/js/tests/consent.test.js +84 -0
package/js/tests/cookie.test.js +102 -0
package/js/tests/dialog.test.js +189 -0
package/js/tests/dropdown.test.js +115 -0
package/js/tests/form-helper.test.js +155 -0
package/js/tests/scroll.test.js +203 -0
package/js/tests/sidebar.test.js +99 -0
package/js/tests/slider.test.js +307 -0
package/js/tests/sortable.test.js +124 -0
package/js/tests/tabpanel.test.js +114 -0
package/js/tests/toggle.test.js +190 -0
package/js/tests/tree.test.js +165 -0
package/js/utilities/_base-component.js +101 -0
package/js/utilities/_cookie.js +98 -0
package/js/utilities/_error.js +80 -0
package/js/utilities/_form-helper.js +101 -0
package/package.json +42 -0
package/scss/_badge.scss +37 -0
package/scss/_button.scss +34 -0
package/scss/_card.scss +122 -0
package/scss/_dialog.scss +116 -0
package/scss/_disclosure.scss +101 -0
package/scss/_dropdown.scss +68 -0
package/scss/_form.scss +197 -0
package/scss/_grid.scss +40 -0
package/scss/_group.scss +57 -0
package/scss/_list.scss +18 -0
package/scss/_loading.scss +49 -0
package/scss/_media.scss +37 -0
package/scss/_nav.scss +72 -0
package/scss/_progress.scss +40 -0
package/scss/_slider.scss +35 -0
package/scss/_table.scss +36 -0
package/scss/utilities/_mixin.scss +322 -0
package/scss/utilities/_reset.scss +145 -0
package/scss/utilities/_typography.scss +107 -0
package/scss/vanilla-frontend.scss +23 -0
package/scss/variables/_root.scss +70 -0
package/scss/variables/_setting.scss +63 -0
package/vitest.config.js +7 -0

package/.gitlab-ci.yml ADDED Viewed

@@ -0,0 +1,40 @@
+image: node:latest
+before_script:
+  - npm install
+  - npm ci
+stages:
+  - test
+  - build
+  - deploy
+unit-test-job:
+  stage: test
+  rules:
+    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
+  script:
+    - npm test
+pages:
+  stage: build
+  script:
+    - npm run docs:build
+    - rm -rf public
+    - mkdir public
+    - cp -a docs/dist/* public/
+  artifacts:
+    paths:
+      # The folder that contains the files to be exposed at the Page URL
+      - public
+  rules:
+    - if: $CI_COMMIT_REF_NAME == "production"
+publish-job:
+  stage: deploy
+  environment: production
+  rules:
+    - if: $CI_COMMIT_REF_NAME == "production"
+  script:
+    - echo "//registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN}" > .npmrc
+    - npm publish --access public

package/LICENSE.md ADDED Viewed

@@ -0,0 +1,7 @@
+Copyright (c) 2024 Natacha Herth
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,11 @@
+# Vanilla Frontend
+A simple and minimal framework that prioritize semantic HTML and accessibility.
+Quickly start a new project with a clean design and a minimal override for customization.
+More info on the(https://vanilla-frontend-packages4913705-8c38a44c52586aedf08b2939a0529c.gitlab.io/)[DOC]
+## Bug or suggestion
+Please report any bug of issues on (https://gitlab.com/packages4913705/vanilla-frontend/-/issues)[Gitlab] or send me an email !

package/docs/index.html ADDED Viewed

@@ -0,0 +1,36 @@
+<!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>A simple <span style="color: var(--color-primary)">Vanilla Frontend</span> framework</h1>
+        <p>Here let me explain a little more about my framework and how to use it :-)</p>
+        <h2>Why a new framework</h2>
+        <p>A lot or framework are too heavy or too minimal, and more important a lot of them don't prioritize semantic HTML.</p>
+        <p>I wanted to be able to quickly start a new project with a clean design and a minimal override for customization.</p>
+        <blockquote>
+            <p>And must important to keep it accessible and Vanilla !</p>
+        </blockquote>
+        <p>As a visual imparaired person, I know how much it can be difficult to find a good website with good semantic and/or with the ability to change some basic styling as the font size.</p>
+    </doc-layout>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>

package/docs/main.js ADDED Viewed

@@ -0,0 +1,32 @@
+// Import main css
+import './../scss/vanilla-frontend.scss'
+// HERE go the code
+import './src/js/doc-layout.js'
+import './src/js/doc-demo.js'
+import './src/js/doc-code.js'
+import './src/js/demo.js'
+import './src/scss/layout.scss'
+import './src/scss/style.scss'
+import './src/scss/demo.scss'
+// Prevent first animation
+setTimeout(() => { document.body.removeAttribute('data-preload') }, 10)
+// Set the current navigation
+const current = window.location.pathname
+if (current.startsWith('/pages/')) document.querySelectorAll(`#sidebar a[href*="${current}"]`).forEach(elem => {
+    elem.setAttribute('aria-current', 'page')
+})
+// My awsome sidebar !!!
+import Sidebar from './../js/_sidebar.js'
+const sidebar = document.getElementById('sidebar')
+if (sidebar) new Sidebar(sidebar)
+// Code group
+import Tabpanel from './../js/_tabpanel.js'
+const tabpanels = document.querySelectorAll('.code-group')
+if (tabpanels) tabpanels.forEach(tabpanel => new Tabpanel(tabpanel))

package/docs/pages/components/badge.html ADDED Viewed

@@ -0,0 +1,154 @@
+<!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">
+                @import '@natachah/vanilla-frontend/scss/_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">setting.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">
+                $outline-variations: (
+                    badge
+                );
+            </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">setting.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">
+                $color-variations: (
+                    badge: (primary)
+                );
+            </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">
+                @import '@natachah/vanilla-frontend/scss/_group';
+            </doc-code>
+        </div>
+    </doc-layout>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,186 @@
+<!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">
+                @import '@natachah/vanilla-frontend/scss/_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-focus-size
+                --button-focus-style
+                --button-focus-color
+                --button-focus-offset
+                --button-hover-color
+                --button-hover-background
+                --button-hover-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">setting.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">
+                $outline-variations: (
+                    button
+                );
+            </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="outline primary">Outline</button> <button class="primary" disabled>Disabled</button> <button class="primary" 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">setting.scss</button>
+            </div>
+            <doc-code id="html" data-type="html" role="tabpanel">
+                <button class="primary">Primary</button>
+                <button class="outline primary">Outline</button>
+                <button class="primary" disabled>Disabled</button>
+                <button class="primary" aria-pressed="true">Active</button>
+            </doc-code>
+            <doc-code id="scss" data-type="scss" role="tabpanel">
+                $color-variations: (
+                    button: (primary)
+                );
+            </doc-code>
+        </div>
+        <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">
+                @import '@natachah/vanilla-frontend/scss/_group';
+            </doc-code>
+        </div>
+    </doc-layout>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>

package/docs/pages/components/card.html ADDED Viewed

@@ -0,0 +1,184 @@
+<!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">
+                @import '@natachah/vanilla-frontend/scss/_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>
+        <doc-demo>
+            <div class="card">
+                <picture>
+                    <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>
+                    <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>
+        <doc-demo>
+            <div class="card">
+                <h3>Mycard</h3>
+                <p>Content of the card</p>
+                <div class="group">
+                    <button>Button A</button>
+                    <button>Button B</button>
+                </div>
+                <p>Content of the card</p>
+                <ul class="list">
+                    <li>List D</li>
+                    <li><a>List E</a></li>
+                    <li><a href="#">List F</a></li>
+                </ul>
+            </div>
+        </doc-demo>
+        <doc-code>
+            <div class="card">
+                <h3>Mycard</h3>
+                <p>Content of the card</p>
+                <div class="group">
+                    <button>Button A</button>
+                    <button>Button B</button>
+                </div>
+                <p>Content of the card</p>
+                <ul class="list">
+                    <li>List D</li>
+                    <li><a>List E</a></li>
+                    <li><a href="#">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">setting.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">
+                $outline-variations: (
+                    card
+                );
+            </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">setting.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">
+                $color-variations: (
+                    card: (primary)
+                );
+            </doc-code>
+        </div>
+    </doc-layout>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>