@natachah/vanilla-frontend 0.4.1 → 1.0.1

package/scss/base/_reset.scss

@@ -103,6 +103,11 @@ summary {
     }
 }
 
+// Stable scrollbar
+html {
+    scrollbar-gutter: stable;
+}
+
 // Define the bases for the body 
 body {
 

package/scss/components/_badge.scss

@@ -16,7 +16,8 @@
 @use "../abstracts/default";
 @use "../abstracts/mixins" as *;
 
-$colors: () !default;
+$colors: (
+    ) !default;
 
 $outline: false !default;
 

package/scss/components/_dropdown.scss

@@ -4,7 +4,7 @@
 /// ------------------------------------------------------------------
 /// Create the dropdown component
 ///
-/// @example <div class="dropdown"><button aria-controls="myDropdown" aria-expanded="false" aria-pressed="false">Button</button><ul id="myDropdown" hidden>...</ul></div>
+/// @example <div class="dropdown-js"><button aria-controls="myDropdown" aria-expanded="false" aria-pressed="false">Button</button><ul id="myDropdown" hidden>...</ul></div>
 ///
 /// @require {mixin} as-item
 /// @require {mixin} as-list
@@ -24,7 +24,7 @@ $customDropdown: (
 // Change default properties
 $customDropdownProperties: map.merge(default.$item-properties, $customDropdown);
 
-.dropdown {
+.dropdown-js {
 
     position: relative;
     display: inline-block;

package/scss/components/_group.scss

@@ -26,13 +26,15 @@
 
         // Remove extra border
         & + *,
-        & + :is(.dropdown) > [aria-controls] {
+        & + :is(.dropdown-js) > [aria-controls],
+        & + :is(.dropdown) > [popovertarget] {
             border-left: none !important;
         }
 
         // Remove extra radius
         &:not(:first-child, :last-child),
-        &:not(:first-child, :last-child):is(.dropdown) > [aria-controls] {
+        &:not(:first-child, :last-child):is(.dropdown-js) > [aria-controls],
+        &:not(:first-child, :last-child):is(.dropdown) > [popovertarget] {
             border-radius: 0;
         }
 
@@ -40,14 +42,16 @@
 
             // Remove radius right on first child
             &:first-child,
-            &:first-child:is(.dropdown) > [aria-controls] {
+            &:first-child:is(.dropdown-js) > [aria-controls],
+            &:first-child:is(.dropdown) > [popovertarget] {
                 border-start-end-radius: 0;
                 border-end-end-radius: 0;
             }
 
             // Remove radius left on last child
             &:last-child,
-            &:last-child:is(.dropdown) > [aria-controls] {
+            &:last-child:is(.dropdown-js) > [aria-controls],
+            &:last-child:is(.dropdown) > [popovertarget] {
                 border-start-start-radius: 0;
                 border-end-start-radius: 0;
             }

package/scss/components/_popover.scss

@@ -0,0 +1,74 @@
+////
+/// ------------------------------------------------------------------
+/// Popover
+/// ------------------------------------------------------------------
+/// Create the popover component
+///
+/// @example <div>
+///
+/// @require {mixin} as-item
+/// @require {mixin} as-list
+/// @group components
+/// @author Natacha Herth
+///
+////
+
+@use "sass:map";
+@use "../abstracts/default";
+@use "../abstracts/mixins" as *;
+
+$colors: (
+    ) !default;
+
+$customPopover: (
+    background: var(--color-body)
+);
+
+$customPopoverProperties: map.merge(default.$item-properties, $customPopover);
+
+[popovertarget] {
+    anchor-name: --popover-anchor;
+}
+
+[popover] {
+    position: absolute;
+    position-anchor: --popover-anchor;
+    position-area: var(--popover-area);
+    inset: var(--popover-inset, anchor(bottom) auto auto anchor(start));
+
+    // Define as an item
+    @include as-item('popover', (), $customPopoverProperties);
+}
+
+.popover,
+.dropdown {
+    anchor-scope: --popover-anchor;
+}
+
+.popover [popover] {
+    // Define the color variations
+    @include with-color-variations('popover', (), $colors);
+}
+
+.dropdown {
+
+    // Animate the SVG
+    @media screen and (prefers-reduced-motion: no-preference) {
+        [popovertarget] > svg {
+            transition: var(--dropdown-transition, all .25s ease-in-out);
+        }
+    }
+
+    // On open
+    &:has(:popover-open) {
+        [popovertarget] > svg {
+            transform: var(--dropdown-svg-transform, rotate(-180deg));
+        }
+    }
+
+    // Make as list
+    [popover] {
+        @include as-list('dropdown', ('focus', 'hover', 'active', 'disabled'), $customPopoverProperties);
+    }
+
+}

package/scss/components/index.scss

@@ -11,6 +11,7 @@
 @forward "./group";
 @forward "./list";
 @forward "./loading";
+@forward "./popover";
 @forward "./progress";
 @forward "./slider";
 @forward "./table";

package/scss/vanilla-frontend-doc.scss

@@ -7,6 +7,7 @@
 /// @author Natacha Herth
 ///
 
+@use './abstracts/mixins' as *;
 
 // Themes
 @use "./themes/root";
@@ -27,8 +28,52 @@
 @use "./components/dropdown";
 @use "./components/form";
 @use "./components/grid";
+@use "./components/group";
 @use "./components/list";
 @use "./components/loading";
+@use "./components/popover" with ($colors: ('primary'));
 @use "./components/progress";
 @use "./components/table";
-@use "./components/slider";
+@use "./components/slider";
+
+// Create a container
+.as-container {
+    container-type: inline-size;
+    min-height: 300px;
+    overflow: hidden;
+}
+
+// Demo for responsive table
+@container (max-width:500px) {
+    #responsiveTable {
+        @include as-responsive-table()
+    }
+}
+
+// Demo Drawer
+#drawer {
+    --drawer-position: 0 0 0 auto
+}
+
+// Demo Grid
+.grid,
+.flex-grid {
+    &:not(.demo-inline) > * {
+        background-color: #eee;
+        text-align: center;
+        padding-block: 1rem;
+    }
+
+    &.demo-inline {
+        --grid-columns: 3
+    }
+
+}
+
+#flexGridDemoOffset {
+    @include flex-grid-offset-column()
+}
+
+#flexGridDemoWider {
+    @include flex-grid-wider-column()
+}

package/scss/vanilla-frontend-sandbox.scss

@@ -0,0 +1,34 @@
+////
+/// ------------------------------------------------------------------
+/// Main
+/// ------------------------------------------------------------------
+/// This is the main scss generated
+///
+/// @author Natacha Herth
+///
+
+
+// Themes
+@use "./themes/root";
+
+// Base
+@use "./base";
+
+// Components
+@use "./components/badge" with ($colors: ('primary'), $outline: true);
+@use "./components/breadcrumb";
+@use "./components/button" with ($colors: ('primary'), $outline: true);
+@use "./components/card" with ($colors: ('primary'), $outline: true);
+@use "./components/dialog";
+@use "./components/disclosure";
+@use "./components/drawer";
+@use "./components/dropdown";
+@use "./components/form";
+@use "./components/grid";
+@use "./components/group";
+@use "./components/list";
+@use "./components/loading";
+@use "./components/popover" with ($colors: ('primary'));
+@use "./components/progress";
+@use "./components/table";
+@use "./components/slider";

package/vite.config.js

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite'
+import autoprefixer from 'autoprefixer'
+
+export default defineConfig({
+    css: {
+        postcss: {
+            plugins: [autoprefixer],
+        },
+    },
+    build: {
+        outDir: 'docs/public/bundles',
+        emptyOutDir: true,
+        minify: 'esbuild',
+        rollupOptions: {
+            input: {
+                'js': 'js/vanilla-frontend-doc.js',
+                'vanilla-frontend': 'scss/vanilla-frontend.scss',
+                'vanilla-frontend-doc': 'scss/vanilla-frontend-doc.scss',
+            },
+            output: {
+                entryFileNames: 'vanilla-frontend-doc.js',
+                assetFileNames: '[name][extname]',
+            },
+        },
+    },
+    test: {
+        environment: 'happy-dom',
+        globals: true,
+    }
+})

package/docs/index.html

@@ -1,36 +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>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-demo.js

@@ -1,2 +0,0 @@
-// Import main css
-import './../scss/vanilla-frontend.scss'

package/docs/main.js

@@ -1,34 +0,0 @@
-// Import main css
-import './../scss/vanilla-frontend-doc.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 Drawer from './../js/_drawer.js'
-const sidebar = document.getElementById('sidebar')
-if (sidebar) new Drawer(sidebar, {
-    cookie: 'demo-confort'
-})
-
-// 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/base/layout.html

@@ -1,131 +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: Layout > Container</title>
-</head>
-
-<body data-preload>
-    <doc-layout>
-
-        <h1>Layout</h1>
-
-        <p>The framework uses a CSS grid to create the default page layout on the body. It features default CSS variables that you can customize, such as the maximum content width, which is set at <b>1280px</b>. Since it uses a grid, it includes gaps and columns.</p>
-
-        <p>Also, the grid template as two content zone available as <code>full</code> and <code>content</code> that you can use as you wish.</p>
-
-        <p>But as every website can be different, these value can be changed !</p>
-
-        <p><a href="/pages/demo/layout.html">Check the demo page !</a></p>
-
-        <table>
-            <caption>
-                <h2>Device Breakpoint Viewport</h2>
-            </caption>
-            <thead>
-                <tr>
-                    <th>Device</th>
-                    <th>Breakpoint</th>
-                    <th>Columns</th>
-                    <th>Vieport</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td>Mobile</td>
-                    <td>
-                        &lt; 720
-                    </td>
-                    <td>1</td>
-                    <td>100%</td>
-                </tr>
-                <tr>
-                    <td>Tablet</td>
-                    <td>&lt; 1024px</td>
-                    <td>6</td>
-                    <td>100%</td>
-                </tr>
-                <tr>
-                    <td>Laptop</td>
-                    <td>&lt; 1440px</td>
-                    <td>12</td>
-                    <td>1280px</td>
-                </tr>
-                <tr>
-                    <td>Desktop</td>
-                    <td>&gt; 1440px</td>
-                    <td>12</td>
-                    <td>1280px</td>
-                </tr>
-            </tbody>
-        </table>
-
-        <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">
-                <!--
-                <body data-preload>
-                    <header></header>
-                    <main></main>
-                    <footer></footer>
-                </body>
-                -->
-            </doc-code>
-            <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use '@natachah/vanilla-frontend/scss/base/layout';
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --layout-width
-                --layout-gap-block
-                --layout-gap-inline
-                --layout-columns
-                --subgrid-gap-block
-                --subgrid-gap-inline
-            </doc-code>
-        </div>
-
-        <blockquote class="info">
-            <p>The <code>--subgrid-gap-*</code> are used for the direct child as header, main and footer. It set by default the gap block at 0 and take the layout inline gap.</p>
-        </blockquote>
-
-        <h2>Container</h2>
-
-        <p>The default layout include a <code>.container</code> and a <code>.container-full</code>.</p>
-
-        <p>The classic container is centered into the page layout and the full container take the full length of the page.<br>It's perfect if you need to set a background color to a section.</p>
-
-        <doc-code id="html" data-type="html" role="tabpanel">
-            <section class="container"></section>
-            <section class="container-full"></section>
-        </doc-code>
-
-        <h2>Subgrid</h2>
-
-        <p>You can re-use the layout grid into a container with the class <code>.subgrid</code>. Then you can use the <code>grid-column</code> CSS property to manage the space.</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">
-                <section class="container subgrid"></section>
-                <section class="container-full subgrid"></section>
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --subgrid-gap-block
-                --subgrid-gap-inline
-            </doc-code>
-        </div>
-
-    </doc-layout>
-    <script type="module" src="/main.js"></script>
-</body>
-
-</html>

package/docs/pages/base/media.html

@@ -1,142 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Documentations: Base ></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">
-                @use '@natachah/vanilla-frontend/scss/base/media';
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --image-width
-                --image-height
-                --image-fit
-                --image-position
-                --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>
-        <doc-demo>
-            <video width="320" height="240" controls>
-                <source src="..." type="video/mp4">
-            </video>
-        </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">
-                <video width="320" height="240" controls>
-                    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
-                </video>
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --video-width
-                --video-height
-                --video-fit
-                --video-position
-                --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>
-        <doc-demo>
-            <audio controls>
-                <source src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/theme_01.mp3" type="audio/mpeg">
-            </audio>
-        </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">
-                <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>