@nuvoui/core 1.1.6 → 1.1.8

package/src/styles/mixins-map.scss

@@ -5,6 +5,7 @@
 @use 'layouts/flex' as *;
 @use 'layouts/grid' as *;
 @use 'themes/theme' as *;
+@use 'utilities/alignment' as *;
 @use 'utilities/animations' as *;
 @use 'utilities/borders' as *;
 @use 'utilities/colors' as *;
@@ -19,6 +20,7 @@
 @use 'utilities/sizing' as *;
 @use 'utilities/spacing' as *;
 @use 'utilities/tooltips' as *;
+@use 'utilities/transitions' as *;
 @use 'utilities/typography' as *;
 @use 'utilities/variables' as *;
 
@@ -140,6 +142,14 @@
           @include flow-in-col;
         } @else if $mixin-str == 'flow-dense-items' {
           @include flow-dense-items;
+        } @else if $mixin-str == 'align-baseline' {
+          @include align-baseline;
+        } @else if $mixin-str == 'align-top' {
+          @include align-top;
+        } @else if $mixin-str == 'align-middle' {
+          @include align-middle;
+        } @else if $mixin-str == 'align-bottom' {
+          @include align-bottom;
         } @else if $mixin-str == 'hide' {
           @include hide;
         } @else if $mixin-str == 'block' {
@@ -156,8 +166,34 @@
           @include d-tbl-row;
         } @else if $mixin-str == 'd-tbl-cell' {
           @include d-tbl-cell;
+        } @else if $mixin-str == 'visible' {
+          @include visible;
+        } @else if $mixin-str == 'invisible' {
+          @include invisible;
+        } @else if $mixin-str == 'collapse' {
+          @include collapse;
+        } @else if $mixin-str == 'contents' {
+          @include contents;
         } @else if $mixin-str == 'overflow-hidden' {
           @include overflow-hidden;
+        } @else if $mixin-str == 'overflow-visible' {
+          @include overflow-visible;
+        } @else if $mixin-str == 'overflow-scroll' {
+          @include overflow-scroll;
+        } @else if $mixin-str == 'overflow-auto' {
+          @include overflow-auto;
+        } @else if $mixin-str == 'overflow-x-hidden' {
+          @include overflow-x-hidden;
+        } @else if $mixin-str == 'overflow-y-hidden' {
+          @include overflow-y-hidden;
+        } @else if $mixin-str == 'overflow-x-scroll' {
+          @include overflow-x-scroll;
+        } @else if $mixin-str == 'overflow-y-scroll' {
+          @include overflow-y-scroll;
+        } @else if $mixin-str == 'overflow-x-auto' {
+          @include overflow-x-auto;
+        } @else if $mixin-str == 'overflow-y-auto' {
+          @include overflow-y-auto;
         } @else if $mixin-str == 'touch' {
           @include touch;
         } @else if $mixin-str == 'print' {
@@ -200,12 +236,38 @@
           @include min-h-full;
         } @else if $mixin-str == 'max-h-full' {
           @include max-h-full;
+        } @else if $mixin-str == 'w-screen' {
+          @include w-screen;
+        } @else if $mixin-str == 'h-screen' {
+          @include h-screen;
         } @else if $mixin-str == 'ml-auto' {
           @include ml-auto;
         } @else if $mixin-str == 'mr-auto' {
           @include mr-auto;
         } @else if $mixin-str == 'mx-auto' {
           @include mx-auto;
+        } @else if $mixin-str == 'transition' {
+          @include transition;
+        } @else if $mixin-str == 'transition-none' {
+          @include transition-none;
+        } @else if $mixin-str == 'transition-all' {
+          @include transition-all;
+        } @else if $mixin-str == 'transition-colors' {
+          @include transition-colors;
+        } @else if $mixin-str == 'transition-opacity' {
+          @include transition-opacity;
+        } @else if $mixin-str == 'transition-shadow' {
+          @include transition-shadow;
+        } @else if $mixin-str == 'transition-transform' {
+          @include transition-transform;
+        } @else if $mixin-str == 'ease-linear' {
+          @include ease-linear;
+        } @else if $mixin-str == 'ease-in' {
+          @include ease-in;
+        } @else if $mixin-str == 'ease-out' {
+          @include ease-out;
+        } @else if $mixin-str == 'ease-in-out' {
+          @include ease-in-out;
         } @else if $mixin-str == 'font-thin' {
           @include font-thin;
         } @else if $mixin-str == 'font-extralight' {
@@ -264,6 +326,27 @@
           @include no-underline;
         } @else if $mixin-str == 'truncate' {
           @include truncate;
+        } @else if $mixin-str == 'break-normal' {
+          @include break-normal;
+        } @else if $mixin-str == 'break-words' {
+          @include break-words;
+        } @else if $mixin-str == 'break-all' {
+          @include break-all;
+        } @else if $mixin-str == 'whitespace-normal' {
+          @include whitespace-normal;
+        } @else if $mixin-str == 'whitespace-nowrap' {
+          @include whitespace-nowrap;
+        } @else if $mixin-str == 'whitespace-pre' {
+          @include whitespace-pre;
+        } @else if $mixin-str == 'whitespace-pre-line' {
+          @include whitespace-pre-line;
+        } @else if $mixin-str == 'whitespace-pre-wrap' {
+          @include whitespace-pre-wrap;
+        } @else if str.index($mixin-str, 'container-padding(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-padding(str.unquote($value));
         } @else if str.index($mixin-str, 'container(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -284,11 +367,11 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include rows(str.unquote($value));
-        } @else if str.index($mixin-str, 'grid-cols-custom(') == 1 {
+        } @else if str.index($mixin-str, 'cols-custom(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
-          @include grid-cols-custom(str.unquote($value));
+          @include cols-custom(str.unquote($value));
         } @else if str.index($mixin-str, 'auto-fit(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -359,6 +442,21 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include position-row(str.unquote($value));
+        } @else if str.index($mixin-str, 'grid-gap(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include grid-gap(str.unquote($value));
+        } @else if str.index($mixin-str, 'col-gap(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include col-gap(str.unquote($value));
+        } @else if str.index($mixin-str, 'row-gap(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include row-gap(str.unquote($value));
         } @else if str.index($mixin-str, 'generate-bounce-keyframes(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -419,6 +517,16 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include container-query(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-type(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-type(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-name(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-name(str.unquote($value));
         } @else if str.index($mixin-str, 'media-up(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -644,11 +752,31 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include gap-y(str.unquote($value));
+        } @else if str.index($mixin-str, 'duration(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include duration(str.unquote($value));
+        } @else if str.index($mixin-str, 'delay(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include delay(str.unquote($value));
         } @else if str.index($mixin-str, 'text-size(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include text-size(str.unquote($value));
+        } @else if str.index($mixin-str, 'truncate-lines(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include truncate-lines(str.unquote($value));
+        } @else if str.index($mixin-str, 'responsive-typography(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include responsive-typography(str.unquote($value));
         }
       }
     } @else {
@@ -744,6 +872,14 @@
           @include flow-in-col;
         } @else if $mixin-str == 'flow-dense-items' {
           @include flow-dense-items;
+        } @else if $mixin-str == 'align-baseline' {
+          @include align-baseline;
+        } @else if $mixin-str == 'align-top' {
+          @include align-top;
+        } @else if $mixin-str == 'align-middle' {
+          @include align-middle;
+        } @else if $mixin-str == 'align-bottom' {
+          @include align-bottom;
         } @else if $mixin-str == 'hide' {
           @include hide;
         } @else if $mixin-str == 'block' {
@@ -760,8 +896,34 @@
           @include d-tbl-row;
         } @else if $mixin-str == 'd-tbl-cell' {
           @include d-tbl-cell;
+        } @else if $mixin-str == 'visible' {
+          @include visible;
+        } @else if $mixin-str == 'invisible' {
+          @include invisible;
+        } @else if $mixin-str == 'collapse' {
+          @include collapse;
+        } @else if $mixin-str == 'contents' {
+          @include contents;
         } @else if $mixin-str == 'overflow-hidden' {
           @include overflow-hidden;
+        } @else if $mixin-str == 'overflow-visible' {
+          @include overflow-visible;
+        } @else if $mixin-str == 'overflow-scroll' {
+          @include overflow-scroll;
+        } @else if $mixin-str == 'overflow-auto' {
+          @include overflow-auto;
+        } @else if $mixin-str == 'overflow-x-hidden' {
+          @include overflow-x-hidden;
+        } @else if $mixin-str == 'overflow-y-hidden' {
+          @include overflow-y-hidden;
+        } @else if $mixin-str == 'overflow-x-scroll' {
+          @include overflow-x-scroll;
+        } @else if $mixin-str == 'overflow-y-scroll' {
+          @include overflow-y-scroll;
+        } @else if $mixin-str == 'overflow-x-auto' {
+          @include overflow-x-auto;
+        } @else if $mixin-str == 'overflow-y-auto' {
+          @include overflow-y-auto;
         } @else if $mixin-str == 'touch' {
           @include touch;
         } @else if $mixin-str == 'print' {
@@ -804,12 +966,38 @@
           @include min-h-full;
         } @else if $mixin-str == 'max-h-full' {
           @include max-h-full;
+        } @else if $mixin-str == 'w-screen' {
+          @include w-screen;
+        } @else if $mixin-str == 'h-screen' {
+          @include h-screen;
         } @else if $mixin-str == 'ml-auto' {
           @include ml-auto;
         } @else if $mixin-str == 'mr-auto' {
           @include mr-auto;
         } @else if $mixin-str == 'mx-auto' {
           @include mx-auto;
+        } @else if $mixin-str == 'transition' {
+          @include transition;
+        } @else if $mixin-str == 'transition-none' {
+          @include transition-none;
+        } @else if $mixin-str == 'transition-all' {
+          @include transition-all;
+        } @else if $mixin-str == 'transition-colors' {
+          @include transition-colors;
+        } @else if $mixin-str == 'transition-opacity' {
+          @include transition-opacity;
+        } @else if $mixin-str == 'transition-shadow' {
+          @include transition-shadow;
+        } @else if $mixin-str == 'transition-transform' {
+          @include transition-transform;
+        } @else if $mixin-str == 'ease-linear' {
+          @include ease-linear;
+        } @else if $mixin-str == 'ease-in' {
+          @include ease-in;
+        } @else if $mixin-str == 'ease-out' {
+          @include ease-out;
+        } @else if $mixin-str == 'ease-in-out' {
+          @include ease-in-out;
         } @else if $mixin-str == 'font-thin' {
           @include font-thin;
         } @else if $mixin-str == 'font-extralight' {
@@ -868,6 +1056,27 @@
           @include no-underline;
         } @else if $mixin-str == 'truncate' {
           @include truncate;
+        } @else if $mixin-str == 'break-normal' {
+          @include break-normal;
+        } @else if $mixin-str == 'break-words' {
+          @include break-words;
+        } @else if $mixin-str == 'break-all' {
+          @include break-all;
+        } @else if $mixin-str == 'whitespace-normal' {
+          @include whitespace-normal;
+        } @else if $mixin-str == 'whitespace-nowrap' {
+          @include whitespace-nowrap;
+        } @else if $mixin-str == 'whitespace-pre' {
+          @include whitespace-pre;
+        } @else if $mixin-str == 'whitespace-pre-line' {
+          @include whitespace-pre-line;
+        } @else if $mixin-str == 'whitespace-pre-wrap' {
+          @include whitespace-pre-wrap;
+        } @else if str.index($mixin-str, 'container-padding(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-padding(str.unquote($value));
         } @else if str.index($mixin-str, 'container(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -888,11 +1097,11 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include rows(str.unquote($value));
-        } @else if str.index($mixin-str, 'grid-cols-custom(') == 1 {
+        } @else if str.index($mixin-str, 'cols-custom(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
-          @include grid-cols-custom(str.unquote($value));
+          @include cols-custom(str.unquote($value));
         } @else if str.index($mixin-str, 'auto-fit(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -963,6 +1172,21 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include position-row(str.unquote($value));
+        } @else if str.index($mixin-str, 'grid-gap(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include grid-gap(str.unquote($value));
+        } @else if str.index($mixin-str, 'col-gap(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include col-gap(str.unquote($value));
+        } @else if str.index($mixin-str, 'row-gap(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include row-gap(str.unquote($value));
         } @else if str.index($mixin-str, 'generate-bounce-keyframes(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -1023,6 +1247,16 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include container-query(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-type(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-type(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-name(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-name(str.unquote($value));
         } @else if str.index($mixin-str, 'media-up(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -1248,11 +1482,31 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include gap-y(str.unquote($value));
+        } @else if str.index($mixin-str, 'duration(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include duration(str.unquote($value));
+        } @else if str.index($mixin-str, 'delay(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include delay(str.unquote($value));
         } @else if str.index($mixin-str, 'text-size(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include text-size(str.unquote($value));
+        } @else if str.index($mixin-str, 'truncate-lines(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include truncate-lines(str.unquote($value));
+        } @else if str.index($mixin-str, 'responsive-typography(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include responsive-typography(str.unquote($value));
         } @else {
             @warn "Mixin '#{$mixin}' is not defined.";
         }

package/src/styles/utilities/_alignment.scss

@@ -0,0 +1,20 @@
+@use '../utilities/variables' as VAR;
+
+@mixin align-baseline { vertical-align: baseline; }
+@mixin align-top { vertical-align: top; }
+@mixin align-middle { vertical-align: middle; }
+@mixin align-bottom { vertical-align: bottom; }
+
+.align-baseline { @include align-baseline; }
+.align-top { @include align-top; }
+.align-middle { @include align-middle; }
+.align-bottom { @include align-bottom; }
+
+@each $breakpoint, $width in VAR.$breakpoints {
+    @media (min-width: #{$width}) {
+        .align-baseline\@#{$breakpoint} { @include align-baseline; }
+        .align-top\@#{$breakpoint} { @include align-top; }
+        .align-middle\@#{$breakpoint} { @include align-middle; }
+        .align-bottom\@#{$breakpoint} { @include align-bottom; }
+    }
+}

package/src/styles/utilities/_container-queries.scss

@@ -3,6 +3,22 @@
 @use './variables' as *;
 @use './functions' as FN;
 
+/**
+ * Container Query Mixins
+ *
+ * Usage:
+ * .container {
+ *   container-type: inline-size;
+ *   container-name: sidebar;
+ * }
+ * 
+ * .item {
+ *   @include container-up('md', 'sidebar') {
+ *     // Styles for 'md' and up within 'sidebar' container
+ *   }
+ * }
+ */
+
 /// Container Query: Up
 @mixin container-up($breakpoint, $containerName: null) {
   $bp-val: FN.get-breakpoint-value($breakpoint);
@@ -55,4 +71,28 @@
   @container #{$containerName} (min-width: $size) {
     @content;
   }
+}
+
+@mixin container-type($type: inline-size) {
+  container-type: $type;
+}
+
+@mixin container-name($name) {
+  container-name: $name;
+}
+
+
+// Utility classes
+.container-inline-size {
+  container-type: inline-size;
+}
+
+.container-size {
+  container-type: size;
+}
+
+@each $name in ('main', 'sidebar', 'card', 'section') {
+  .container-#{$name} {
+    container-name: $name;
+  }
 }

package/src/styles/utilities/_display.scss

@@ -4,6 +4,19 @@
 @use './variables' as *;
 @use './functions' as FN;
 
+/**
+ * Display Utilities
+ *
+ * Classes:
+ * - .hide, .show: Control element visibility
+ * - .block, .inline, .inline-block: Basic display modes
+ * - .d-tbl, .d-tbl-row, .d-tbl-cell: Table display modes
+ * - .overflow-hidden: Control overflow behavior
+ *
+ * All utilities support responsive variants with @breakpoint suffix:
+ * - .hide@md, .block@lg, etc.
+ */
+
 // Display Mixins
  
 /**
@@ -47,8 +60,22 @@
 @mixin d-tbl-cell { display: table-cell; }
 
 
+@mixin visible { visibility: visible; }
+@mixin invisible { visibility: hidden; }
+@mixin collapse { visibility: collapse; }
+@mixin contents { display: contents; }
 
 @mixin overflow-hidden { overflow: hidden; }
+@mixin overflow-visible { overflow: visible; }
+@mixin overflow-scroll { overflow: scroll; }
+@mixin overflow-auto { overflow: auto; }
+@mixin overflow-x-hidden { overflow-x: hidden; }
+@mixin overflow-y-hidden { overflow-y: hidden; }
+@mixin overflow-x-scroll { overflow-x: scroll; }
+@mixin overflow-y-scroll { overflow-y: scroll; }
+@mixin overflow-x-auto { overflow-x: auto; }
+@mixin overflow-y-auto { overflow-y: auto; }
+
 
 // Base Classes 
 .hide { @include hide; }
@@ -56,7 +83,21 @@
 .block { @include block; }
 .inline { @include inline; }
 .inline-block { @include inline-block; }
+.visible { @include visible; }
+.invisible { @include invisible; }
+.collapse { @include collapse; }
+.contents { @include contents; }
 .overflow-hidden { @include overflow-hidden; }
+.overflow-visible { @include overflow-visible; }
+.overflow-scroll { @include overflow-scroll; }
+.overflow-auto { @include overflow-auto; }
+.overflow-x-hidden { @include overflow-x-hidden; }
+.overflow-y-hidden { @include overflow-y-hidden; }
+.overflow-x-scroll { @include overflow-x-scroll; }
+.overflow-y-scroll { @include overflow-y-scroll; }
+.overflow-x-auto { @include overflow-x-auto; }
+.overflow-y-auto { @include overflow-y-auto; }
+
 
 .d {
   &-tbl { @include d-tbl; }
@@ -72,8 +113,21 @@
     .block\@#{$breakpoint} { @include block; }
     .inline\@#{$breakpoint} { @include inline; }
     .inline-block\@#{$breakpoint} { @include inline-block; }
+    .visible\@#{$breakpoint} { @include visible; }
+    .invisible\@#{$breakpoint} { @include invisible; }
+    .collapse\@#{$breakpoint} { @include collapse; }
+    .contents\@#{$breakpoint} { @include contents; }
     .overflow-hidden\@#{$breakpoint} { @include overflow-hidden; }
-   
+    .overflow-visible\@#{$breakpoint} { @include overflow-visible; }
+    .overflow-scroll\@#{$breakpoint} { @include overflow-scroll; }
+    .overflow-auto\@#{$breakpoint} { @include overflow-auto; }
+    .overflow-x-hidden\@#{$breakpoint} { @include overflow-x-hidden; }
+    .overflow-y-hidden\@#{$breakpoint} { @include overflow-y-hidden; }
+    .overflow-x-scroll\@#{$breakpoint} { @include overflow-x-scroll; }
+    .overflow-y-scroll\@#{$breakpoint} { @include overflow-y-scroll; }
+    .overflow-x-auto\@#{$breakpoint} { @include overflow-x-auto; }
+    .overflow-y-auto\@#{$breakpoint} { @include overflow-y-auto; }
+
     .d {
       &-tbl\@#{$breakpoint} { @include d-tbl; }
       &-tbl-row\@#{$breakpoint} { @include d-tbl-row; }

package/src/styles/utilities/_media-queries.scss

@@ -13,21 +13,22 @@
  * @param {string} $type - The media query type (e.g. 'lg', 'md').
  */
 @mixin media-up($breakpoint) {
-  @media screen and (min-width: #{FN.get-breakpoint-value($breakpoint)}) {
+  @media screen and (min-width: FN.get-breakpoint-value($breakpoint)) {
     @content;
   }
 }
 
 @mixin media-down($breakpoint) {
-  @media screen and (max-width: (#{FN.get-breakpoint-value($breakpoint)} - 0.02px)) {
+  $val: FN.get-breakpoint-value($breakpoint) - 0.02px;
+  @media screen and (max-width: #{$val}) {
     @content;
   }
 }
 
 @mixin media-between($lower, $upper) {
   $lower-val: FN.get-breakpoint-value($lower);
-  $upper-val: FN.get-breakpoint-value($upper);
-  @media screen and (min-width: #{$lower-val}) and (max-width: (#{ $upper-val } - 0.02px)) {
+  $upper-val: FN.get-breakpoint-value($upper) - 0.02px;
+  @media screen and (min-width: #{$lower-val}) and (max-width: #{$upper-val}) {
     @content;
   }
 }
@@ -38,13 +39,13 @@
   $next-breakpoint: null;
   
   @each $name, $width in $breakpoints {
-    @if $width > $min and (not $next-breakpoint or $width < $next-breakpoint) {
-      $next-breakpoint: #{$width};
+    @if $width > $min and (meta.type-of($next-breakpoint) == 'null' or $width < $next-breakpoint) {
+      $next-breakpoint: $width;
     }
   }
   
   @if $next-breakpoint {
-    @media (min-width: #{$min}) and (max-width: (#{ $next-breakpoint } - 1)) {
+    @media (min-width: #{$min}) and (max-width: #{$next-breakpoint - 0.02px}) {
       @content;
     }
   } @else {
@@ -106,7 +107,7 @@
   @supports (height: 100dvh) {
     height: 100dvh;
   }
-  
+
   @supports not (height: 100dvh) {
     height: 100vh;
   }
@@ -128,4 +129,4 @@
   @media (forced-colors: active) {
     @content;
   }
-}
+}