@natachah/vanilla-frontend 0.0.5 → 0.1.0

package/docs/pages/quick-start/mixins.html

@@ -17,7 +17,7 @@
         <p>To use them, import this file:</p>
 
         <doc-code data-type="scss">
-            @import '@natachah/vanilla-frontend/scss/utilities/_mixin';
+            @use '@natachah/vanilla-frontend/scss/abstracts/_mixin';
         </doc-code>
 
         <h2>Create an item</h2>
@@ -42,13 +42,13 @@
             /// @access public
             ///
 
-            @include as-item($name, $states: (), $properties: $default-item-properties)
+            @include as-item($name, $states: (), $properties: default.$item-properties)
         </doc-code>
 
         <p>This mixin also include the <b>outline</b> and <b>color</b> variations. It also create some CSS custom properties with the <code>$name</code> value as <code>--{$name}-color</code> with fallback values from the <code>$properties</code>.</p>
 
         <blockquote class="warning">
-            <p>The default properties are set inside the <code>$default-item-properties</code> variable of the file <code>./scss/variables/_setting.scss</code></p>
+            <p>The default properties are set inside the <code>default.$item-properties</code> variable of the file <code>./scss/variables/_setting.scss</code></p>
         </blockquote>
 
         <h2>Create a list</h2>
@@ -64,13 +64,31 @@
             /// @access public
             ///
 
-            @include as-list($name, $states: (), $properties: $default-item-properties)
+            @include as-list($name, $states: (), $properties: default.$item-properties)
         </doc-code>
 
         <blockquote>
             <p>This mixin is used for the <b>list</b> and <b>dropdown</b> components</p>
         </blockquote>
 
+        <h2>Add header and footer to an item</h2>
+
+        <p>This mixin will create a header and a footer with negativ margin, some padding and a divider border.</p>
+
+        <doc-code data-type="scss">
+            /// Create a basic item with an header and a footer style
+            ///
+            /// @param {string} $name - Name of the component
+            /// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
+            /// @access public
+            ///
+            @mixin with-header-and-footer($name, $properties: default.$item-properties)
+        </doc-code>
+
+        <blockquote>
+            <p>This mixin is used in <b>Dialog</b> components</p>
+        </blockquote>
+
         <h2>Set outline variation</h2>
 
         <p>This mixin will create the <code>.outline</code> class to transform an item to the outline varation.</p>
@@ -95,7 +113,7 @@
             </doc-code>
             <doc-code id="setting" data-type="scss" role="tabpanel">
                 $outline-variations: (
-                    my-component-name
+                my-component-name
                 );
             </doc-code>
         </div>
@@ -126,7 +144,7 @@
             </doc-code>
             <doc-code id="setting" data-type="scss" role="tabpanel">
                 $color-variations: (
-                    my-component-name: (primary, other-color)
+                my-component-name: (primary, other-color)
                 );
             </doc-code>
         </div>
@@ -167,9 +185,9 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 @container (max-width:800px) {
-                    table {
-                        @include as-responsive-table()
-                    }
+                table {
+                @include as-responsive-table()
+                }
                 }
             </doc-code>
             <doc-code id="css" data-type="css" role="tabpanel">
@@ -201,11 +219,11 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 #wider {
-                    @include flex-grid-wider-column(3)
+                @include flex-grid-wider-column(3)
                 }
 
                 #offset {
-                    @include flex-grid-offset-column(2)
+                @include flex-grid-offset-column(2)
                 }
             </doc-code>
         </div>

package/docs/src/js/demo.js

@@ -5,7 +5,7 @@
  * This is the code for the demonstration code
  * 
  * @author Natacha Herth
- * @version 0.0.1
+
  * @copyright Natacha Herth, design & web development
  * 
  */

package/docs/src/js/doc-layout.js

@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
                                 <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
                                 </svg>
-                                0.0.1
+                                0.1.0
                             </span>
                         </li>
                         <li>
@@ -55,11 +55,15 @@ class DocLayout extends HTMLElement {
                         <li><a href="/pages/quick-start/mixins.html">SCSS Mixins</a></li>
                         <li><a href="/pages/quick-start/conventions.html">Conventions</a></li>
                     </ul>
-                    <h2>Layout</h2>
+                    <h2>Base</h2>
                     <ul>
-                        <li><a href="/pages/layout/reset.html">Reset</a></li>
-                        <li><a href="/pages/layout/typography.html">Typography</a></li>
-                        <li><a href="/pages/layout/grid.html">Grid</a></li>
+                        <li><a href="/pages/base/reset.html">Reset</a></li>
+                        <li><a href="/pages/base/typography.html">Typography</a></li>
+                        <li><a href="/pages/base/media.html">Media</a></li>
+                    </ul>
+                    <h2>Layouts</h2>
+                    <ul>
+                        <li><a href="/pages/layouts/grid.html">Grid</a></li>
                     </ul>
                     <h2>Components</h2>
                     <ul>
@@ -73,7 +77,6 @@ class DocLayout extends HTMLElement {
                         <li><a href="/pages/components/form.html">Form</a></li>
                         <li><a href="/pages/components/list.html">List</a></li>
                         <li><a href="/pages/components/loading.html">Loading</a></li>
-                        <li><a href="/pages/components/media.html">Media</a></li>
                         <li><a href="/pages/components/progress.html">Progress</a></li>
                         <li><a href="/pages/components/slider.html">Slider</a></li>
                         <li><a href="/pages/components/table.html">Table</a></li>

package/docs/src/scss/demo.scss

@@ -5,11 +5,11 @@
 /// This is the style for demonstration bloc
 ///
 /// @author Natacha Herth
-/// @since 1.0.0
+
 ///
 ////
 
-@import './../../../scss/utilities/_mixin.scss';
+@use './../../../scss/abstracts/mixins' as *;
 
 // Demo for grid offset
 #flexGridDemoOffset {

package/docs/src/scss/layout.scss

@@ -5,7 +5,7 @@
 /// This is the style for the basic layout with a sidebar
 ///
 /// @author Natacha Herth
-/// @since 1.0.0
+
 ///
 ////
 

package/docs/src/scss/style.scss

@@ -5,11 +5,11 @@
 /// This is the style for the website
 ///
 /// @author Natacha Herth
-/// @since 1.0.0
+
 ///
 ////
 
-@import './../../../scss/utilities/_mixin.scss';
+@use './../../../scss/abstracts/mixins' as *;
 
 :root {
 

package/esbuild.mjs

@@ -5,7 +5,7 @@ import autoprefixer from 'autoprefixer'
 
 esbuild
     .build({
-        entryPoints: ["scss/vanilla-frontend.scss", "js/vanilla-frontend.js"],
+        entryPoints: ["scss/vanilla-frontend.scss"],
         entryNames: '[name]',
         outbase: "./",
         outdir: './bundles',

package/js/_autofill.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to automatic filling some fields from another
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_check-all.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to un/check a list of checkboxes
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_comfort.js

@@ -5,7 +5,6 @@
  * This class create and manage the cookies for saving theme and style changes for visual comfort
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_consent.js

@@ -5,7 +5,6 @@
  * This class create and manage the cookies for saving the consent to comply the GDPR
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_dialog.js

@@ -5,7 +5,6 @@
  * This class enable the functionalities for open/close/submit an HTML dialog
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_dropdown.js

@@ -6,7 +6,6 @@
  * This component is a simpler version of the Toggle
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  * 
  */

package/js/_scroll.js

@@ -5,7 +5,6 @@
  * This script enable an HTML element to scroll to a position and to spy some buttons
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_sidebar.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to toggles multiple tabpanel
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  * 
  */

package/js/_slider.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to make an element slider
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  * 
  * * keep check on the scrollend event: https://caniuse.com/?search=scrollend

package/js/_sortable.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to sort a list or a table
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_tabpanel.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to toggles multiple tabpanel
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  * 
  */

package/js/_toggle.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to un/collapse some element by another
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  * 
  * * NOTE: Check availability of the ariaControlsElements to select the #ids

package/js/_tree.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to expand/contract element as a tree
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/utilities/_base-component.js

@@ -5,7 +5,6 @@
  * This class regroup common functionalities for other classes
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/utilities/_cookie.js

@@ -5,7 +5,6 @@
  * This class create and manage the cookies
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/utilities/_error.js

@@ -5,7 +5,6 @@
  * This make global error message
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/utilities/_form-helper.js

@@ -5,7 +5,6 @@
  * This class regroup some helper function for forms
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@natachah/vanilla-frontend",
-    "version": "0.0.5",
+    "version": "0.1.0",
     "description": "A vanilla frontend framework",
     "keywords": [
         "html5",
@@ -29,7 +29,7 @@
         "@testing-library/dom": "^9.3.4",
         "@vitest/coverage-v8": "^1.3.1",
         "autoprefixer": "^10.4.19",
-        "esbuild": "0.21.5",
+        "esbuild": "^0.21.5",
         "esbuild-sass-plugin": "^3.3.1",
         "fast-glob": "^3.3.2",
         "happy-dom": "^13.6.2",

package/scss/abstracts/_default.scss

@@ -0,0 +1,21 @@
+////
+/// ------------------------------------------------------------------
+/// Default values for items
+/// ------------------------------------------------------------------
+/// Setting variables
+///
+/// @group abstracts
+/// @author Natacha Herth
+/// 
+////
+
+$item-properties: (
+    color: var(--color-font),
+    background: transparent,
+    border-size: var(--border-size),
+    border-style: var(--border-style),
+    border-color: transparent,
+    border-radius: var(--border-radius),
+    padding-inline: var(--padding-inline),
+    padding-block: var(--padding-block)
+);

package/scss/{utilities/_mixin.scss → abstracts/_mixins.scss}

@@ -4,13 +4,16 @@
 /// ------------------------------------------------------------------
 /// Regroup all mixins of the package
 ///
-/// @group mixins
+/// @group abstracts
 /// @author Natacha Herth
-/// @since 1.0.0
 /// 
 ////
 
 @use "sass:map";
+@use "sass:meta";
+@use "sass:list";
+@use "./default";
+@use "./options" as *;
 
 /// Create a basic item that can be interactive or not
 ///
@@ -19,7 +22,7 @@
 /// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
 /// @access public
 ///
-@mixin as-item($name, $states: (), $properties: $default-item-properties) {
+@mixin as-item($name, $states: (), $properties: default.$item-properties) {
 
     // Define the default variables
     // INFO: The choice of SASS variables other CSS private properties if for better readability of the final code
@@ -57,7 +60,7 @@
     @if($states !=()) {
 
         // State: focus
-        @if(index($states, 'focus')) {
+        @if(list.index($states, 'focus')) {
             &:focus {
                 outline: var(--#{$name}-focus-size, var(--focus-size)) var(--#{$name}-focus-style, var(--focus-style)) var(--#{$name}-focus-color, color-mix(in srgb, var(--#{$name}-border-color, var(--#{$name}-background, $default-color)), transparent var(--focus-opacity)));
                 outline-offset: var(--#{$name}-focus-offset, var(--focus-offset));
@@ -65,7 +68,7 @@
         }
 
         // State: hover
-        @if(index($states, 'hover')) {
+        @if(list.index($states, 'hover')) {
             &:hover {
                 color: var(--#{$name}-hover-color, $default-color);
                 background-color: var(--#{$name}-hover-background, color-mix(in srgb, $default-background, var(--hover-color) var(--hover-percent)));
@@ -74,7 +77,7 @@
         }
 
         // State: active
-        @if(index($states, 'active')) {
+        @if(list.index($states, 'active')) {
 
             &:active,
             &[aria-current],
@@ -87,7 +90,7 @@
         }
 
         // State: disabled
-        @if(index($states, 'disabled')) {
+        @if(list.index($states, 'disabled')) {
             &:disabled {
                 pointer-events: none;
                 opacity: var(--#{$name}-disabled-opacity, var(--disabled-opacity));
@@ -109,7 +112,7 @@
 /// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
 /// @access public
 ///
-@mixin as-list($name, $states: (), $properties: $default-item-properties) {
+@mixin as-list($name, $states: (), $properties: default.$item-properties) {
 
     // Reset
     margin: 0;
@@ -179,6 +182,36 @@
     }
 }
 
+/// Create a basic item with an header and a footer style
+///
+/// @param {string} $name - Name of the component
+/// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
+/// @access public
+///
+@mixin with-header-and-footer($name, $properties: default.$item-properties) {
+
+    > header,
+    > footer {
+        margin-inline: calc(var(--#{$name}-padding-inline, map.get($properties, padding-inline)) * -1);
+        padding: calc(var(--#{$name}-padding-block, map.get($properties, padding-block)) / 2) var(--#{$name}-padding-inline, map.get($properties, padding-inline));
+    }
+
+    > header {
+        margin-top: calc(var(--#{$name}-padding-block, map.get($properties, padding-block)) * -1);
+        border-start-start-radius: inherit;
+        border-start-end-radius: inherit;
+        border-bottom: var(--#{$name}-divider-size, var(--#{$name}-border-size, var(--border-size))) var(--#{$name}-divider-style, var(--#{$name}-border-style, var(--border-style))) var(--#{$name}-divider-color, var(--#{$name}-border-color, transparent));
+    }
+
+    > footer {
+        margin-bottom: calc(var(--#{$name}-padding-block, map.get($properties, padding-block)) * -1);
+        border-end-start-radius: inherit;
+        border-end-end-radius: inherit;
+        border-top: var(--#{$name}-divider-size, var(--#{$name}-border-size, var(--border-size))) var(--#{$name}-divider-style, var(--#{$name}-border-style, var(--border-style))) var(--#{$name}-divider-color, var(--#{$name}-border-color, transparent));
+    }
+
+}
+
 /// Create some outline variations
 ///
 /// @require {variable} $outline-variations - Map variable
@@ -190,7 +223,7 @@
 ///
 @mixin with-outline-variations($name, $states: (), $color: var(--#{$name}-background, var(--color-font)), $contrast: var(--#{$name}-color, var(--color-body))) {
 
-    @if(variable-exists(outline-variations) and index($outline-variations, $name)) {
+    @if(meta.global-variable-exists('outline-variations') and list.index($outline-variations, $name)) {
 
         &.outline {
 
@@ -198,7 +231,7 @@
             background-color: transparent;
             border-color: currentColor;
 
-            @if(index($states, 'hover')) {
+            @if(list.index($states, 'hover')) {
 
                 &:hover {
                     color: $contrast;
@@ -208,7 +241,7 @@
 
             }
 
-            @if(index($states, 'active')) {
+            @if(list.index($states, 'active')) {
 
                 &:active,
                 &[aria-current],
@@ -235,9 +268,9 @@
 ///
 @mixin with-color-variations($name, $states: ()) {
 
-    @if(variable-exists(color-variations) and map-get($color-variations, #{$name})) {
+    @if(meta.global-variable-exists('color-variations') and map.get($color-variations, #{$name})) {
 
-        @each $colorname in map-get($color-variations, #{$name}) {
+        @each $colorname in map.get($color-variations, #{$name}) {
 
             &.#{$colorname} {
 
@@ -250,7 +283,7 @@
                 --#{$name}-background: #{$color};
                 --#{$name}-border-color: #{$color};
 
-                @if(index($states, 'hover')) {
+                @if(list.index($states, 'hover')) {
 
                     // Define the variables
                     $hover: color-mix(in srgb, $color, var(--hover-color) var(--hover-percent));
@@ -262,7 +295,7 @@
 
                 }
 
-                @if(index($states, 'active')) {
+                @if(list.index($states, 'active')) {
 
                     // Define the variables
                     $active: color-mix(in srgb, $color, var(--active-color) var(--active-percent));
@@ -277,6 +310,7 @@
             }
 
         }
+
     }
 
 }

package/scss/{variables/_setting.scss → abstracts/_options.scss}

@@ -2,11 +2,10 @@
 /// ------------------------------------------------------------------
 /// Setting
 /// ------------------------------------------------------------------
-/// Setting variables for default theme
+/// Setting variables
 ///
-/// @group setting
+/// @group abstracts
 /// @author Natacha Herth
-/// @since 0.0.1
 /// 
 ////
 
@@ -18,8 +17,7 @@ $colors: (
     primary,
     success,
     error,
-    warning
-);
+    warning) !default;
 
 /// Define the components that have some color variations
 ///
@@ -31,8 +29,7 @@ $color-variations: (
     button: $colors,
     card: $colors,
     disclosure: $colors,
-    list: $colors
-);
+    list: $colors) !default;
 
 /// Define the components that have an outline variation
 ///
@@ -44,20 +41,4 @@ $outline-variations: (
     button,
     card,
     disclosure,
-    list
-);
-
-/// Define the default properties for item
-///
-/// @access public
-///
-$default-item-properties: (
-    color: var(--color-font),
-    background: transparent,
-    border-size: var(--border-size),
-    border-style: var(--border-style),
-    border-color: transparent,
-    border-radius: var(--border-radius),
-    padding-inline: var(--padding-inline),
-    padding-block: var(--padding-block)
-);
+    list) !default;

package/scss/{_media.scss → base/_media.scss}

@@ -6,9 +6,8 @@
 ///
 /// @example <img>, <picture>, <figure>, <video> and <audio>
 ///
-/// @group components
+/// @group base
 /// @author Natacha Herth
-/// @since 1.0.0
 ///
 ////
 

package/scss/{utilities → base}/_reset.scss

@@ -4,9 +4,8 @@
 /// ------------------------------------------------------------------
 /// This file is the CSS default reset
 ///
-/// @group reset
+/// @group base
 /// @author Natacha Herth
-/// @since 1.0.0
 /// 
 ////
 
@@ -67,7 +66,7 @@ summary {
 
 // Force the hidden
 [hidden] {
-    display: none;
+    display: none !important;
 }
 
 // Change cursor for draggable