@avenirs-esr/avenirs-dsav 0.1.107 → 0.1.108

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@avenirs-esr/avenirs-dsav",
   "type": "module",
-  "version": "0.1.107",
+  "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/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] {