@avenirs-esr/avenirs-dsav 0.1.106 → 0.1.108

package/dist/tokens/icons.d.ts

@@ -41,6 +41,7 @@ export declare const MDI_ICONS: {
     CHECK: string;
     CHECK_CIRCLE: string;
     CHECK_CIRCLE_OUTLINE: string;
+    CHECK_DECAGRAM_OUTLINE: string;
     CHECKBOX_BLANK_OUTLINE: string;
     CHECKBOX_MARKED: string;
     CHEVRON_DOUBLE_LEFT: string;
@@ -68,6 +69,7 @@ export declare const MDI_ICONS: {
     FILE_RESTORE_OUTLINE: string;
     FILE_TREE_OUTLINE: string;
     FLAG_VARIANT: string;
+    FLARE: string;
     FORMAT_LIST_BULLETED: string;
     HAMBURGER_MENU: string;
     HISTORY: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@avenirs-esr/avenirs-dsav",
   "type": "module",
-  "version": "0.1.106",
+  "version": "0.1.108",
   "repository": {
     "type": "git",
     "url": "https://github.com/avenirs-esr/avenirs-dsav"

package/src/styles/components/_grid.scss

@@ -1,12 +1,18 @@
 @use '../core/namespace' as *;
 @use '../settings/breakpoints' as bp;
 @use '../core/spacing' as sp;
-
-$columns: 12;
+@use "sass:map";
 
 // === Containers ===
-// Default container
-// Ex: .av-container, .av-container--fluid
+$container-paddings: (
+  sm: sm,
+  md: sm,
+  lg: md,
+  xl: md
+);
+
+// === Base container ===
+// Ex: .av-container, .av-container-fluid
 @include ns("container") {
   max-width: 90rem;
   margin-left: auto;
@@ -14,30 +20,25 @@ $columns: 12;
   padding-left: sp.get(sm);
   padding-right: sp.get(sm);
 
-  &--fluid {
+  &-fluid {
     max-width: none;
-    padding-left: var(--spacing-none);
-    padding-right: var(--spacing-none);
+    padding-left: 0;
+    padding-right: 0;
     overflow: hidden;
   }
 }
 
-// Breakpoint-specific containers
-// Ex: .av-container-md / .av-container-lg
+// === Responsive containers ===
+// Ex: .av-container--md / .av-container--lg
 @each $bp-name, $bp-value in bp.$breakpoints {
   @media (min-width: #{$bp-value}) {
-    @include ns("container-#{$bp-name}") {
+    @include ns("container--#{$bp-name}") {
       width: 100%;
       max-width: #{$bp-value};
       margin-left: auto;
       margin-right: auto;
-      @if $bp-name == lg or $bp-name == xl {
-        padding-left: sp.get(md);
-        padding-right: sp.get(md);
-      } @else {
-        padding-left: sp.get(sm);
-        padding-right: sp.get(sm);
-      }
+      padding-left: sp.get(map.get($container-paddings, $bp-name));
+      padding-right: sp.get(map.get($container-paddings, $bp-name));
     }
   }
 }
@@ -56,67 +57,32 @@ $row-alignments: (
   bottom: flex-end
 );
 
-@include ns("row") {
+// === Mixin row layout ===
+@mixin row-layout {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: row;
+}
 
-  // Horizontal alignments
-  // Ex: .av-row--left / .av-row--center
-  @each $mod-name, $justify in $row-justifications {
-    &--#{$mod-name} {
-      justify-content: $justify;
-    }
+// === Base row ===
+// Ex: .av-row / .av-row-wrap / .av-row-nowrap
+@include ns("row") {
+  @include row-layout;
+
+  &-wrap {
+    flex-wrap: wrap;
   }
 
-  // Vertical alignments
-  // Ex: .av-row--top / .av-row--bottom
-  @each $mod-name, $align in $row-alignments {
-    &--#{$mod-name} {
-      align-items: $align;
-    }
+  &-nowrap {
+    flex-wrap: nowrap;
   }
 }
 
+// === Responsive layout for rows ===
+// Ex: .av-row--md
 @each $bp-name, $bp-value in bp.$breakpoints {
   @media (min-width: #{$bp-value}) {
-    // Base row
-    // Ex: .av-row-md
-    @include ns("row-#{$bp-name}") {
-      display: flex;
-      flex-wrap: wrap;
-      margin-left: -#{sp.get(sm)};
-      margin-right: -#{sp.get(sm)};
-
-      > * {
-        padding-left: sp.get(sm);
-        padding-right: sp.get(sm);
-      }
-
-      &.av-no-gutters {
-        margin-left: 0;
-        margin-right: 0;
-
-        > * {
-          padding-left: 0;
-          padding-right: 0;
-        }
-      }
-
-      // Horizontal alignments
-      // Ex: .av-row-md--left / .av-row-lg--center
-      @each $mod-name, $justify in $row-justifications {
-        &--#{$mod-name} {
-          justify-content: $justify;
-        }
-      }
-
-      // Vertical alignments
-      // Ex: .av-row-md--top / .av-row-lg--bottom
-      @each $mod-name, $align in $row-alignments {
-        &--#{$mod-name} {
-          align-items: $align;
-        }
-      }
+    @include ns("row--#{$bp-name}") {
+      @include row-layout;
     }
   }
 }
@@ -128,56 +94,24 @@ $col-alignments: (
   bottom: flex-end
 );
 
-@each $bp-name, $bp-value in bp.$breakpoints {
-  @media (min-width: #{$bp-value}) {
-    // Base column
-    // Ex: .av-col-md
-    @include ns("col-#{$bp-name}") {
-      flex: 1;
-    }
-
-    // Align-self modifiers
-    // Ex: .av-col-md--top / .av-col-lg--bottom
-    @each $mod-name, $align in $col-alignments {
-      @include ns("col-#{$bp-name}--#{$mod-name}") {
-        align-self: $align;
-      }
-    }
-
-    // Width and offsets
-    // Ex: .av-col-md-4 / .av-col-offset-md-2 / .av-col-offset-md-2--right
-    @for $i from 1 through $columns {
-      @include ns("col-#{$bp-name}-#{$i}") {
-        flex: 0 0 calc(100% * #{$i} / #{$columns});
-        max-width: calc(100% * #{$i} / #{$columns});
-      }
-
-      @include ns("col-offset-#{$bp-name}-#{$i}") {
-        margin-left: calc(100% * #{$i} / #{$columns});
-      }
-
-      @include ns("col-offset-#{$bp-name}-#{$i}--right") {
-        margin-left: 0;
-        margin-right: calc(100% * #{$i} / #{$columns});
-      }
-    }
-  }
+// === Mixin column layout ===
+@mixin col-layout {
+  display: flex;
+  flex-direction: column;
 }
 
-// === Gapped flex directions ===
-// Ex: .av-flex-row-md / .av-flex-col-sm
-$flex-directions: (
-  row: row,
-  col: column,
-);
+// === Base column ===
+// Ex: .av-col
+@include ns("col") {
+  @include col-layout;
+}
 
-@each $dir-name, $dir-value in $flex-directions {
-  @each $size, $value in sp.$spacing {
-    @include ns("flex-#{$dir-name}-#{$size}") {
-      display: flex;
-      flex: 1;
-      flex-direction: $dir-value;
-      gap: var(--spacing-#{$size});
+// === Responsive layout for columns ===
+// Ex: .av-col--md
+@each $bp-name, $bp-value in bp.$breakpoints {
+  @media (min-width: #{$bp-value}) {
+    @include ns("col--#{$bp-name}") {
+      @include col-layout;
     }
   }
 }

package/src/styles/components/_icons.scss

@@ -33,6 +33,7 @@
   --icon-mdi-check: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yMSA3TDkgMTlsLTUuNS01LjVsMS40MS0xLjQxTDkgMTYuMTdMMTkuNTkgNS41OXoiLz48L3N2Zz4=");
   --icon-mdi-check-circle: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xMiAyQzYuNSAyIDIgNi41IDIgMTJzNC41IDEwIDEwIDEwczEwLTQuNSAxMC0xMFMxNy41IDIgMTIgMm0tMiAxNWwtNS01bDEuNDEtMS40MUwxMCAxNC4xN2w3LjU5LTcuNTlMMTkgOHoiLz48L3N2Zz4=");
   --icon-mdi-check-circle-outline: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xMiAyQzYuNSAyIDIgNi41IDIgMTJzNC41IDEwIDEwIDEwczEwLTQuNSAxMC0xMFMxNy41IDIgMTIgMm0wIDE4Yy00LjQxIDAtOC0zLjU5LTgtOHMzLjU5LTggOC04czggMy41OSA4IDhzLTMuNTkgOC04IDhtNC41OS0xMi40MkwxMCAxNC4xN2wtMi41OS0yLjU4TDYgMTNsNCA0bDgtOHoiLz48L3N2Zz4=");
+  --icon-mdi-check-decagram-outline: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Im0yMyAxMmwtMi40LTIuOGwuMy0zLjdsLTMuNi0uOGwtMS45LTMuMkwxMiAzTDguNiAxLjVMNi43IDQuN2wtMy42LjhsLjMgMy43TDEgMTJsMi40IDIuOGwtLjMgMy43bDMuNi44bDEuOSAzLjJMMTIgMjFsMy40IDEuNWwxLjktMy4ybDMuNi0uOGwtLjMtMy43em0tNC4zIDQuOWwtMi43LjZsLTEuNCAyLjRsLTIuNi0xLjFsLTIuNiAxLjFMOCAxNy41bC0yLjctLjZsLjItMi44TDMuNyAxMmwxLjgtMi4xbC0uMi0yLjhMOCA2LjVsMS40LTIuNEwxMiA1LjJsMi42LTEuMUwxNiA2LjVsMi43LjZsLS4yIDIuOGwxLjggMi4xbC0xLjggMi4xem0tMi4xLTkuM0wxOCA5bC04IDhsLTQtNGwxLjQtMS40bDIuNiAyLjZ6Ii8+PC9zdmc+");
   --icon-mdi-checkbox-blank-outline: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xOSAzSDVjLTEuMTEgMC0yIC44OS0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGEyIDIgMCAwIDAgMi0yVjVhMiAyIDAgMCAwLTItMm0wIDJ2MTRINVY1eiIvPjwvc3ZnPg==");
   --icon-mdi-checkbox-marked: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Im0xMCAxN2wtNS01bDEuNDEtMS40MkwxMCAxNC4xN2w3LjU5LTcuNTlMMTkgOG0wLTVINWMtMS4xMSAwLTIgLjg5LTIgMnYxNGEyIDIgMCAwIDAgMiAyaDE0YTIgMiAwIDAgMCAyLTJWNWEyIDIgMCAwIDAtMi0yIi8+PC9zdmc+");
   --icon-mdi-chevron-double-left: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xOC40MSA3LjQxTDE3IDZsLTYgNmw2IDZsMS40MS0xLjQxTDEzLjgzIDEyem0tNiAwTDExIDZsLTYgNmw2IDZsMS40MS0xLjQxTDcuODMgMTJ6Ii8+PC9zdmc+");
@@ -60,6 +61,7 @@
   --icon-mdi-file-restore-outline: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNCAySDZjLTEuMSAwLTIgLjktMiAydjE2YzAgMS4xLjkgMiAyIDJoMTJjMS4xIDAgMi0uOSAyLTJWOHptNCAxOEg2VjRoN2w1IDV6bS0xLTYuNzZjMCAyLjYyLTIuMTMgNC43Ni00Ljc2IDQuNzZjLTEuOTUgMC0zLjYzLTEuMTgtNC4zNi0yLjg2SDkuNWMuNjEuODYgMS42MSAxLjQzIDIuNzQgMS40M2MxLjg0IDAgMy4zMy0xLjUgMy4zMy0zLjMzUzE0LjA4IDkuOSAxMi4yNCA5LjljLTEuMjkgMC0yLjM4Ljc1LTIuOTUgMS44MWwxLjUyIDEuNTNIN1Y5LjQzbDEuMjQgMS4yNGE0LjcxIDQuNzEgMCAwIDEgNC0yLjE3YzIuNjMtLjAzIDQuNzYgMi4xMSA0Ljc2IDQuNzQiLz48L3N2Zz4=");
   --icon-mdi-file-tree-outline: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xMiAxM0g3djVoNXYySDVWMTBoMnYxaDV6TTggNHYySDRWNHptMi0ySDJ2Nmg4em0xMCA5djJoLTR2LTJ6bTItMmgtOHY2aDh6bS0yIDl2MmgtNHYtMnptMi0yaC04djZoOHoiLz48L3N2Zz4=");
   --icon-mdi-flag-variant: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik02IDNhMSAxIDAgMCAxIDEgMXYuODhDOC4wNiA0LjQ0IDkuNSA0IDExIDRjMyAwIDMgMiA1IDJjMyAwIDQtMiA0LTJ2OHMtMSAyLTQgMnMtMy0yLTUtMmMtMyAwLTQgMi00IDJ2N0g1VjRhMSAxIDAgMCAxIDEtMSIvPjwvc3ZnPg==");
+  --icon-mdi-flare: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik03IDExSDF2Mmg2em0yLjE3LTMuMjRMNy4wNSA1LjY0TDUuNjQgNy4wNWwyLjEyIDIuMTJ6TTEzIDFoLTJ2Nmgyem01LjM2IDYuMDVsLTEuNDEtMS40MWwtMi4xMiAyLjEybDEuNDEgMS40MXpNMTcgMTF2Mmg2di0yem0tNS0yYTMgMyAwIDAgMC0zIDNhMyAzIDAgMCAwIDMgM2EzIDMgMCAwIDAgMy0zYTMgMyAwIDAgMC0zLTNtMi44MyA3LjI0bDIuMTIgMi4xMmwxLjQxLTEuNDFsLTIuMTItMi4xMnptLTkuMTkuNzFsMS40MSAxLjQxbDIuMTItMi4xMmwtMS40MS0xLjQxek0xMSAyM2gydi02aC0yeiIvPjwvc3ZnPg==");
   --icon-mdi-format-list-bulleted: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik03IDVoMTR2Mkg3em0wIDh2LTJoMTR2MnpNNCA0LjVBMS41IDEuNSAwIDAgMSA1LjUgNkExLjUgMS41IDAgMCAxIDQgNy41QTEuNSAxLjUgMCAwIDEgMi41IDZBMS41IDEuNSAwIDAgMSA0IDQuNW0wIDZBMS41IDEuNSAwIDAgMSA1LjUgMTJBMS41IDEuNSAwIDAgMSA0IDEzLjVBMS41IDEuNSAwIDAgMSAyLjUgMTJBMS41IDEuNSAwIDAgMSA0IDEwLjVNNyAxOXYtMmgxNHYyem0tMy0yLjVBMS41IDEuNSAwIDAgMSA1LjUgMThBMS41IDEuNSAwIDAgMSA0IDE5LjVBMS41IDEuNSAwIDAgMSAyLjUgMThBMS41IDEuNSAwIDAgMSA0IDE2LjUiLz48L3N2Zz4=");
   --icon-mdi-hamburger-menu: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0zIDZoMTh2Mkgzem0wIDVoMTh2Mkgzem0wIDVoMTh2MkgzeiIvPjwvc3ZnPg==");
   --icon-mdi-history: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xMy41IDhIMTJ2NWw0LjI4IDIuNTRsLjcyLTEuMjFsLTMuNS0yLjA4ek0xMyAzYTkgOSAwIDAgMC05IDlIMWwzLjk2IDQuMDNMOSAxMkg2YTcgNyAwIDAgMSA3LTdhNyA3IDAgMCAxIDcgN2E3IDcgMCAwIDEtNyA3Yy0xLjkzIDAtMy42OC0uNzktNC45NC0yLjA2bC0xLjQyIDEuNDJBOC45IDguOSAwIDAgMCAxMyAyMWE5IDkgMCAwIDAgOS05YTkgOSAwIDAgMC05LTkiLz48L3N2Zz4=");

package/src/styles/utilities/_helpers.scss

@@ -1,24 +1,73 @@
 @use '../settings/breakpoints' as bp;
+@use '../core/spacing' as sp;
 @use '../core/namespace' as *;
 
-// === Hidden class ===
-@include ns("hidden") {
-  display: none !important;
-}
+// === Responsive utility mixin ===
+@mixin responsive-utility($class-name, $prop, $value) {
+  // Base class
+  @include ns($class-name) {
+    #{$prop}: #{$value};
+  }
 
-// === Breakpoint visibility classes ===
-@each $bp-name, $bp-value in bp.$breakpoints {
-  @media (min-width: #{$bp-value}) {
-    @include ns("hidden-#{$bp-name}") {
-      display: none !important;
-    }
-    @include ns("unhidden-#{$bp-name}") {
-      display: inherit !important;
+  // Breakpoint-specific classes
+  @each $bp-name, $bp-value in bp.$breakpoints {
+    @media (min-width: #{$bp-value}) {
+      @include ns("#{$class-name}--#{$bp-name}") {
+        #{$prop}: #{$value};
+      }
     }
   }
 }
 
+// === Visibility classes ===
+// Ex: .av-hidden / .av-hidden--md / .av-unhidden / .av-unhidden--lg
+@include responsive-utility("hidden", display, "none !important");
+@include responsive-utility("unhidden", display, "inherit !important");
+
+// === Gapped layouts ===
+// Ex: .av-gap-sm / .av-gap-lg / .av-gap-lg--lg
+@each $size, $value in sp.$spacing {
+  @include responsive-utility("gap-#{$size}", gap, var(--spacing-#{$size}));
+}
+
+// === Flex fill class ===
+// Ex: .av-flex-fill / .av-flex-fill--md
+@include responsive-utility("flex-fill", flex, "1 1 0%");
+
+// === Full width/height classes ===
+// Ex: .av-w-full / .av-h-full / .av-w-full--lg / .av-h-full--md
+@include responsive-utility("w-full", width, 100%);
+@include responsive-utility("h-full", height, 100%);
+
+// === Flex alignment classes ===
+// Ex: .av-align-center / .av-align-end
+$alignments: (
+  start: flex-start,
+  center: center,
+  end: flex-end,
+  stretch: stretch,
+  baseline: baseline
+);
+@each $alignment, $value in $alignments {
+  @include responsive-utility("align-#{$alignment}", align-items, $value);
+}
+
+// === Flex justification classes ===
+// Ex: .av-justify-center / .av-justify-between
+$justifications: (
+  start: flex-start,
+  center: center,
+  end: flex-end,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly
+);
+@each $justification, $value in $justifications {
+  @include responsive-utility("justify-#{$justification}", justify-content, $value);
+}
+
 // === No before/after classes ===
+// Ex: .av-no-before / .av-no-after
 @include ns("no-after") {
   &::after {
     content: none !important;
@@ -71,11 +120,6 @@
   display: none !important;
 }
 
-// === Full height class ===
-.h-full {
-  height: 100%;
-}
-
 // === Reset link background image ===
 a,
 [href] {