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/docs/pages/components/list.html ADDED Viewed

@@ -0,0 +1,140 @@
+<!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>List</h1>
+        <p>The list is using the native <code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code> or <code>&lt;div&gt;</code> tag with the class <code>.list</code>.</p>
+        <doc-demo>
+            <ul class="list">
+                <li>List A</li>
+                <li>List B</li>
+                <li><span>List C with <a href="#">link</a></span></li>
+                <li><a>List D</a></li>
+                <li><a href="#">List E</a></li>
+            </ul>
+        </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">
+                <ul class="list">
+                    <li>List A</li>
+                    <li>List B</li>
+                    <li><span>List C with <a href="#">link</a></span></li>
+                    <li><a>List D</a></li>
+                    <li><a href="#">List E</a></li>
+                </ul>
+            </doc-code>
+            <doc-code id="scss" data-type="scss" role="tabpanel">
+                @import '@natachah/vanilla-frontend/scss/_list';
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --list-color
+                --list-background
+                --list-border-size
+                --list-border-style
+                --list-border-color
+                --list-border-radius
+                --list-padding-inline
+                --list-padding-block
+                --list-transition
+                --list-decoration
+                --list-focus-size
+                --list-focus-style
+                --list-focus-color
+                --list-focus-offset
+                --list-hover-color
+                --list-hover-background
+                --list-hover-border-color
+                --list-active-color
+                --list-active-background
+                --list-active-border-color
+                --list-disabled-opacity
+            </doc-code>
+        </div>
+        <h2>States</h2>
+        <p>If you add some <code>&lt;a&gt;</code> as direct child, it will transform the links into an interactive item with all the default states (<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;a&gt;</code> tag to display the active.</p>
+        <h3>Disabled</h3>
+        <p>Remove the <code>href</code> attribute on <code>&lt;a&gt;</code> to display the disabled style.</p>
+        <h2>Variants</h2>
+        <h3>Outline</h3>
+        <p>You can create an outline variation by adding the class <code>.outline</code> on each children.</p>
+        <doc-demo>
+            <div class="list">
+                <div class="outline">List A</div>
+                <div><a class="outline">List B</a></div>
+            </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="list">
+                    <div class="outline">List A</div>
+                    <div><a class="outline">List B</a></div>
+                </div>
+            </doc-code>
+            <doc-code id="scss" data-type="scss" role="tabpanel">
+                $outline-variations: (
+                    list
+                );
+            </doc-code>
+        </div>
+        <h3>Color</h3>
+        <p>You can create a color variation by adding the class <code>.{COLOR}</code> on each children.</p>
+        <doc-demo>
+            <div class="list">
+                <div class="primary">List A</div>
+                <div class="primary outline">List B</div>
+                <div><a class="primary">List C</a></div>
+                <div><a class="primary outline">List D</a></div>
+            </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="list">
+                    <div class="primary">List A</div>
+                    <div class="primary outline">List B</div>
+                    <div><a class="primary">List C</a></div>
+                    <div><a class="primary outline">List D</a></div>
+                </div>
+            </doc-code>
+            <doc-code id="scss" data-type="scss" role="tabpanel">
+                $color-variations: (
+                    list: (primary)
+                );
+            </doc-code>
+        </div>
+    </doc-layout>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,58 @@
+<!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>Loading</h1>
+        <p>The loading is using the native <code>aria-busy</code> attribute.</p>
+        <doc-demo>
+            <div aria-busy="true"></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 aria-busy="true"></div>
+            </doc-code>
+            <doc-code id="scss" data-type="scss" role="tabpanel">
+                @import '@natachah/vanilla-frontend/scss/_loading';
+            </doc-code>
+        </div>
+        <p>The loading is avaible also for links:</p>
+        <doc-demo>
+            <a href="#" aria-busy="true">My link</a>
+        </doc-demo>
+        <doc-code>
+            <a href="#" aria-busy="true">My link</a>
+        </doc-code>
+        <p>And for buttons:</p>
+        <doc-demo>
+            <button aria-busy="true"></button>
+            <button class="outline" aria-busy="true">Button</button>
+            <button class="error" aria-busy="true">Button</button>
+            <button class="error outline" aria-busy="true">Button</button>
+        </doc-demo>
+        <doc-code>
+            <button aria-busy="true"></button>
+            <button class="outline" aria-busy="true">Button</button>
+            <button class="error" aria-busy="true">Button</button>
+            <button class="error outline" aria-busy="true">Button</button>
+        </doc-code>
+    </doc-layout>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,130 @@
+<!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>Media</h1>
+        <p>A website can have multiple media as images, videos and/or audios.</p>
+        <h2>Image</h2>
+        <p>The image is using the native <code>&lt;img&gt;</code> tag with the attributes <code>srcset</code>, <code>alt</code> and <code>title</code>.</p>
+        <doc-demo>
+            <img src="https://picsum.photos/400/330" srcset="https://picsum.photos/800/660 2x" alt="A random image from lorem picsum" title="This is my picture">
+        </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">
+                <img src="https://picsum.photos/400/330" srcset="https://picsum.photos/800/660 2x" alt="A random image from lorem picsum" title="This is my picture">
+            </doc-code>
+            <doc-code id="scss" data-type="scss" role="tabpanel">
+                @import '@natachah/vanilla-frontend/scss/_media';
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --image-width
+                --image-height
+                --image-fit
+                --image-ratio
+            </doc-code>
+        </div>
+        <h3>Picture</h3>
+        <p>For responsive and best practice, it's better to use the <code>&lt;picture&gt;</code> tag with inside the <code>&lt;source&gt;</code> and <code>&lt;img&gt;</code> tags.</p>
+        <doc-demo>
+            <picture>
+                <source media="(max-width:576px)" srcset="https://fakeimg.pl/200x200/?text=mobile, https://fakeimg.pl/400x400/?text=mobile+retina 2x">
+                <source media="(max-width:768px)" srcset="https://fakeimg.pl/200x200/?text=tablet, https://fakeimg.pl/400x400/?text=tablet+retina 2x">
+                <source media="(max-width:992px)" srcset="https://fakeimg.pl/200x200/?text=laptop, https://fakeimg.pl/400x400/?text=laptop+retina 2x">
+                <img src="https://fakeimg.pl/200x200/?text=desktop" srcset="https://fakeimg.pl/400x400/?text=desktop+retina 2x" alt="A random image from lorem picsum" title="This is my picture">
+            </picture>
+        </doc-demo>
+        <doc-code>
+            <picture>
+                <source media="(max-width:576px)" srcset="https://fakeimg.pl/200x200/?text=mobile, https://fakeimg.pl/400x400/?text=mobile+retina 2x">
+                <source media="(max-width:768px)" srcset="https://fakeimg.pl/200x200/?text=tablet, https://fakeimg.pl/400x400/?text=tablet+retina 2x">
+                <source media="(max-width:992px)" srcset="https://fakeimg.pl/200x200/?text=laptop, https://fakeimg.pl/400x400/?text=laptop+retina 2x">
+                <img src="https://fakeimg.pl/200x200/?text=desktop" srcset="https://fakeimg.pl/400x400/?text=desktop+retina 2x" alt="A random image from lorem picsum" title="This is my picture">
+            </picture>
+        </doc-code>
+        <h3>Figure</h3>
+        <p>You also can use <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> tags, to display an <code>&lt;img&gt;</code> with a nice caption.</p>
+        <doc-demo>
+            <figure>
+                <img src="https://picsum.photos/id/320/400/330" srcset="https://picsum.photos/id/320/800/660 2x" alt="My random image from lorem picsum">
+                <figcaption>My image from lorem picsum</figcaption>
+            </figure>
+        </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">
+                <figure>
+                    <img src="https://picsum.photos/id/320/400/330" srcset="https://picsum.photos/id/320/800/660 2x" alt="My random image from lorem picsum">
+                    <figcaption>My image from lorem picsum</figcaption>
+                </figure>
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --caption-color
+                --caption-font-size
+                --caption-margin-block
+                --caption-margin-inline
+            </doc-code>
+        </div>
+        <h2>Video</h2>
+        <p>Use the default <code>&lt;video&gt;</code> and <code>&lt;source&gt;</code> tags.</p>
+        <p>By default the video take 100% width and have a ratio of 16:9.</p>
+        <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">
+                <video width="320" height="240" controls>
+                    <source src="http://localhost:5173/public/video.mp4" type="video/mp4">
+                </video>
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --video-width
+                --video-height
+                --video-fit
+                --video-ratio
+            </doc-code>
+        </div>
+        <h2>Audio</h2>
+        <p>Use the default <code>&lt;audio&gt;</code> and <code>&lt;source&gt;</code> tags.</p>
+        <p>By default the audio take 100% width.</p>
+        <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">
+                <audio controls>
+                    <source src="http://localhost:5173/public/audio.mp3" type="audio/mpeg">
+                </audio>
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --audio-width
+            </doc-code>
+        </div>
+    </doc-layout>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,119 @@
+<!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>Navigation</h1>
+        <p>The navigation is using the native <code>&lt;ul&gt;</code> inside a <code>&lt;nav&gt;</code> tag.</p>
+        <doc-demo>
+            <nav aria-label="Main navigaton">
+                <ul>
+                    <li><a href="#" aria-current="page">Link 1</a></li>
+                    <li><a href="#">Link 2</a></li>
+                    <li><a href="#">Link 3</a></li>
+                    <li><a>Link 4</a></li>
+                    <li><button class="primary">Button</button></li>
+                </ul>
+            </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="Main navigaton">
+                    <ul>
+                        <li><a href="#" aria-current="page">Link 1</a></li>
+                        <li><a href="#">Link 2</a></li>
+                        <li><a href="#">Link 3</a></li>
+                        <li><a>Link 4</a></li>
+                        <li><button class="primary">Button</button></li>
+                    </ul>
+                </nav>
+            </doc-code>
+            <doc-code id="scss" data-type="scss" role="tabpanel">
+                @import '@natachah/vanilla-frontend/scss/_nav';
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --nav-direction
+                --nav-justify
+                --nav-align
+                --nav-gap
+                --nav-decoration
+                --nav-color
+                --nav-hover-color
+                --nav-active-color
+                --nav-disabled-opacity
+            </doc-code>
+        </div>
+        <blockquote class="warning">
+            <p>The custom properties for the navigation is overriding the default ones in the typography setting.</p>
+        </blockquote>
+        <p>You can make a vertical menu by setting the CSS property <code>--nav-direction</code> to <code>column</code>.</p>
+        <h2>Breadcrumb</h2>
+        <p>To create a breadcrumb navigation, always use <code>&lt;ol&gt;</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>
+                    <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>
+                        <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">
+                @import '@natachah/vanilla-frontend/scss/_nav';
+            </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/components/progress.html ADDED Viewed

@@ -0,0 +1,47 @@
+<!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>Progress</h1>
+        <p>The progress is using the native <code>&lt;progress&gt;</code> tag.</p>
+        <doc-demo>
+            <label for="download">Download progress:</label>
+            <progress id="download" value="50" max="100">50%</progress>
+        </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">
+                <label for="download">Download progress:</label>
+                <progress id="download" value="50" max="100">50%</progress>
+            </doc-code>
+            <doc-code id="scss" data-type="scss" role="tabpanel">
+                @import '@natachah/vanilla-frontend/scss/_progress';
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --progress-width
+                --progress-height
+                --progress-background
+                --progress-color
+                --progress-border-radius
+            </doc-code>
+        </div>
+    </doc-layout>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>