@nuvoui/core 1.3.0 → 1.3.2

package/src/styles/layouts/_flex.scss

@@ -2,398 +2,306 @@
 // Module: Flex | Flex Inline
 // Note: Gap utilities are defined in _spacing.scss
 
-/**
- * @component Flex
- * @description Flexbox layout system for creating flexible page layouts
- *
- * @example
- * <div class="flex row between x-center">
- *   <div class="w-6">Left column (6 units)</div>
- *   <div class="w-6">Right column (6 units)</div>
- * </div>
- * 
- * <div class="flex col@md row@lg">
- *   <!-- Changes direction based on breakpoint -->
- * </div>
- *
- * @classes
- * Base:
- * - flex: Creates a flex container
- * 
- * Direction:
- * - row: Sets flex-direction to row
- * - col: Sets flex-direction to column
- * - row-reverse: Reverses row direction
- * - col-reverse: Reverses column direction
- * 
- * Alignment:
- * - start/end/center: Controls justify-content
- * - x-start/x-end/x-center: Controls align-items
- * 
- * Child elements:
- * - w-{1-12}: Sets width based on column count
- * - grow: Allows item to grow
- * - shrink/no-shrink: Controls shrink behavior
- *
- * @responsive
- * All classes support responsive variants using @breakpoint suffix:
- * - row@md: Row direction on medium screens and up
- * - between@lg: Space-between on large screens
- *
- * @see grid
- */
+// @component Flex
+// @description Flexbox layout system for creating flexible page layouts
+
+// @example
+// <div class="flex row between x-center">
+//   <div class="w-6">Left column (6 units)</div>
+//   <div class="w-6">Right column (6 units)</div>
+// </div>
+
+// <div class="flex col@md row@lg">
+//   <!-- Changes direction based on breakpoint -->
+// </div>
+
+// @classes
+// Base:
+// - flex: Creates a flex container
+
+// Direction:
+// - row: Sets flex-direction to row
+// - col: Sets flex-direction to column
+// - row-reverse: Reverses row direction
+// - col-reverse: Reverses column direction
+
+// Alignment:
+// - start/end/center: Controls justify-content
+// - x-start/x-end/x-center: Controls align-items
+
+// Child elements:
+// - w-{1-12}: Sets width based on column count
+// - grow: Allows item to grow
+// - shrink/no-shrink: Controls shrink behavior
+
+// @responsive
+// All classes support responsive variants using @breakpoint suffix:
+// - row@md: Row direction on medium screens and up
+// - between@lg: Space-between on large screens
+
+// @see grid
 
 @use "sass:math";
 @use "../utilities/media-queries" as MC;
 @use "../abstracts/config" as VAR;
 @use "../abstracts/functions" as FN;
 
-/**
- * @description Establishes a flex container.
- */
-@mixin flex {
-  display: flex;
-}
-
-/**
- * @description Establishes a flex-inline container.
- */
-@mixin flex-inline {
-  display: inline-flex;
-}
-
-/**
- * @description Sets flex-direction to row.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-direction to row.
+// @dependencies flex | flex-inline
 @mixin row {
   flex-direction: row;
 }
 
-/**
- * @description Sets flex-direction to row-reverse.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-direction to row-reverse.
+// @dependencies flex | flex-inline
 @mixin row-reverse {
   flex-direction: row-reverse;
 }
 
-/**
- * @description Sets flex-direction to column.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-direction to column.
+// @dependencies flex | flex-inline
 @mixin col {
   flex-direction: column;
 }
 
-/**
- * @description Sets flex-direction to column-reverse.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-direction to column-reverse.
+// @dependencies flex | flex-inline
 @mixin col-reverse {
   flex-direction: column-reverse;
 }
 
-/**
- * @description Sets flex-wrap to wrap.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-wrap to wrap.
+// @dependencies flex | flex-inline
 @mixin wrap {
   flex-wrap: wrap;
 }
 
-/**
- * @description Sets flex-wrap to nowrap.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-wrap to nowrap.
+// @dependencies flex | flex-inline
 @mixin nowrap {
   flex-wrap: nowrap;
 }
 
-/**
- * @description Sets flex-wrap to wrap-reverse
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-wrap to wrap-reverse
+// @dependencies flex | flex-inline
 @mixin wrap-reverse {
   flex-wrap: wrap-reverse;
 }
 
-/**
- * @description Sets justify-content to flex-start
- * @dependencies flex | flex-inline
- */
+// @description Sets justify-content to flex-start
+// @dependencies flex | flex-inline
 @mixin start {
   justify-content: flex-start;
 }
 
-/**
- * @description Sets justify-content to flex-end
- * @dependencies flex | flex-inline
- */
+// @description Sets justify-content to flex-end
+// @dependencies flex | flex-inline
 @mixin end {
   justify-content: flex-end;
 }
 
-/**
- * @description Sets justify-content to center
- * @dependencies flex | flex-inline
- */
+// @description Sets justify-content to center
+// @dependencies flex | flex-inline
 @mixin center {
   justify-content: center;
 }
 
-/**
- * @description Sets justify-content to stretch
- * @dependencies flex | flex-inline
- */
+// @description Sets justify-content to stretch
+// @dependencies flex | flex-inline
 @mixin stretch {
   justify-content: stretch;
 }
 
-/**
- * @description Sets justify-content to space-between
- * @dependencies flex | flex-inline
- */
+// @description Sets justify-content to space-between
+// @dependencies flex | flex-inline
 @mixin between {
   justify-content: space-between;
 }
 
-/**
- * @description Sets justify-content to space-around
- * @dependencies flex | flex-inline
- */
+// @description Sets justify-content to space-around
+// @dependencies flex | flex-inline
 @mixin around {
   justify-content: space-around;
 }
 
-/**
- * @description Sets justify-content to space-evenly
- * @dependencies flex | flex-inline
- */
+// @description Sets justify-content to space-evenly
+// @dependencies flex | flex-inline
 @mixin evenly {
   justify-content: space-evenly;
 }
 
 // Cross Axis Alignment Mixins
 
-/**
- * @description Sets align-items to flex-start - aligns items to the start of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-items to flex-start - aligns items to the start of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-start {
   align-items: flex-start;
 }
 
-/**
- * @description Sets align-items to flex-end - aligns items to the end of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-items to flex-end - aligns items to the end of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-end {
   align-items: flex-end;
 }
 
-/**
- * @description Sets align-items to center - aligns items to the center of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-items to center - aligns items to the center of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-center {
   align-items: center;
 }
 
-/**
- * @description Sets align-items to stretch - aligns items to the stretch of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-items to stretch - aligns items to the stretch of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-stretch {
   align-items: stretch;
 }
 
-/**
- * @description Sets align-items to baseline - aligns items to the baseline of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-items to baseline - aligns items to the baseline of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-baseline {
   align-items: baseline;
 }
 
 // Cross Axis Content Mixins
 
-/**
- * @description Sets align-content to flex-start - aligns content to the start of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-content to flex-start - aligns content to the start of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-content-start {
   align-content: flex-start;
 }
 
-/**
- * @description Sets align-content to flex-end - aligns content to the end of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-content to flex-end - aligns content to the end of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-content-end {
   align-content: flex-end;
 }
 
-/**
- * @description Sets align-content to center - aligns content to the center of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-content to center - aligns content to the center of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-content-center {
   align-content: center;
 }
 
-/**
- * @description Sets align-content to space-between - aligns content to the space between the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-content to space-between - aligns content to the space between the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-content-between {
   align-content: space-between;
 }
 
-/**
- * @description Sets align-content to space-around - aligns content to the space around the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-content to space-around - aligns content to the space around the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-content-around {
   align-content: space-around;
 }
 
-/**
- * @description Sets align-content to space-evenly - aligns content to the space evenly between the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-content to space-evenly - aligns content to the space evenly between the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-content-evenly {
   align-content: space-evenly;
 }
 
-/**
- * @description Sets align-content to stretch - aligns content to the stretch of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-content to stretch - aligns content to the stretch of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-content-stretch {
   align-content: stretch;
 }
 
 // Self Alignment Mixins
 
-/**
- * @description Sets align-self to auto
- * @dependencies flex | flex-inline
- */
+// @description Sets align-self to auto
+// @dependencies flex | flex-inline
 @mixin self-auto {
   align-self: auto;
 }
 
-/**
- * @description Sets align-self to flex-start
- * @dependencies flex | flex-inline
- */
+// @description Sets align-self to flex-start
+// @dependencies flex | flex-inline
 @mixin self-start {
   align-self: flex-start;
 }
 
-/**
- * @description Sets align-self to flex-end
- * @dependencies flex | flex-inline
- */
+// @description Sets align-self to flex-end
+// @dependencies flex | flex-inline
 @mixin self-end {
   align-self: flex-end;
 }
 
-/**
- * @description Sets align-self to center
- * @dependencies flex | flex-inline
- */
+// @description Sets align-self to center
+// @dependencies flex | flex-inline
 @mixin self-center {
   align-self: center;
 }
 
-/**
- * @description Sets align-self to stretch
- * @dependencies flex | flex-inline
- */
+// @description Sets align-self to stretch
+// @dependencies flex | flex-inline
 @mixin self-stretch {
   align-self: stretch;
 }
 
-/**
- * @description Sets align-self to baseline
- * @dependencies flex | flex-inline
- */
+// @description Sets align-self to baseline
+// @dependencies flex | flex-inline
 @mixin self-baseline {
   align-self: baseline;
 }
 
-/**
- * @description Sets flex-shrink to 1 - allows the item to shrink.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-shrink to 1 - allows the item to shrink.
+// @dependencies flex | flex-inline
 @mixin shrink {
   flex-shrink: 1;
 }
 
-/**
- * @description Sets flex-shrink to 0 - prevents the item from shrinking.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-shrink to 0 - prevents the item from shrinking.
+// @dependencies flex | flex-inline
 @mixin no-shrink {
   flex-shrink: 0;
 }
 
-/**
- * @description Sets flex-shrink to 2 - allows the item to shrink twice as much as the other items.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-shrink to 2 - allows the item to shrink twice as much as the other items.
+// @dependencies flex | flex-inline
 @mixin shrink-twice {
   flex-shrink: 2;
 }
 
 // Flex Child Mixins
 
-/**
- * @description Sets flex to 0 0 100%
- */
+// @description Sets flex to 0 0 100%
 @mixin fill-full {
   flex: 0 0 100%;
 }
 
-/**
- * @description Sets flex to 1 1 auto - allows the item to grow and shrink.
- */
+// @description Sets flex to 1 1 auto - allows the item to grow and shrink.
 @mixin fill-auto {
   flex: 1 1 auto;
 }
 
-/**
- * @description Sets flex to 1 1 0% - allows the item to grow but not shrink.
- */
+// @description Sets flex to 1 1 0% - allows the item to grow but not shrink.
 @mixin grow {
   flex: 1 1 0%;
 }
 
-/**
- * @description Sets flex to none - prevents the item from growing.
- */
+// @description Sets flex to none - prevents the item from growing.
 @mixin no-grow {
   flex: none;
 }
 
-/**
- * @description Sets flex to 1 0 auto - allows the item to grow but not shrink.
- */
+// @description Sets flex to 1 0 auto - allows the item to grow but not shrink.
 @mixin grow-only {
   flex: 1 0 auto;
 }
 
-/**
- * @description Sets how many columns this would take using percentage of VAR.$column-count.
- * @param {Number} $size - The number of columns to span.
- */
+// @description Sets how many columns this would take using percentage of VAR.$column-count.
+// @param {Number} $size - The number of columns to span.
 @mixin fill($size) {
-  flex: 0 0 math.percentage(math.div($size, VAR.$column-count));
+  $percentage: math.percentage(math.div($size, VAR.$column-count));
+
+  $n: math.div(VAR.$column-count, $size); // How many items fit in a row
+  $gap-adjustment: calc(var(--flex-gap, 0px) * #{$n - 1} / #{$n});
+
+  // The width calculation accounts for the gap proportionally
+  flex: 0 0 calc(#{$percentage} - #{$gap-adjustment});
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("flex") {
   // Build flat selector list for all flex containers
   $flex-selectors: "#{VAR.$parent-selector} .flex";
 
@@ -403,12 +311,6 @@
 
   // Apply base flex styles to all flex variants at once
   #{$flex-selectors} {
-    @include flex;
-
-    &.inline {
-      @include flex-inline;
-    }
-
     // Direction modifiers
     &.row {
       @include row;
@@ -595,7 +497,7 @@
 
   // Handle responsive variants
   @each $breakpoint, $width in VAR.$breakpoints {
-    $bp-val: FN.get-breakpoint-value($breakpoint);
+    $bp-val: FN.get-breakpoint-value($breakpoint); // todo: why get-breakpoint-value?
 
     @media (min-width: #{$bp-val}) {
       #{$flex-selectors} {
@@ -746,12 +648,6 @@
           }
         }
       }
-
-      // Special case for inline@breakpoint
-      #{VAR.$parent-selector} .flex.inline\@#{$breakpoint},
-      #{VAR.$parent-selector} .flex\@#{$breakpoint}.inline\@#{$breakpoint} {
-        @include flex-inline;
-      }
     }
   }
 }

package/src/styles/layouts/_grid.scss

@@ -6,20 +6,6 @@
 @use "../abstracts/functions" as FN;
 @use "../abstracts/config" as VAR;
 
-/**
- * @description Establishes a grid container.
- */
-@mixin grid {
-  display: grid;
-}
-
-/**
- * @description Establishes a inline-grid container.
- */
-@mixin grid-inline {
-  display: inline-grid;
-}
-
 // Grid Template Mixins
 @mixin cols($count) {
   grid-template-columns: repeat($count, minmax(0, 1fr));
@@ -28,17 +14,14 @@
   grid-template-rows: repeat($count, minmax(0, 1fr));
 }
 
-/**
-* @description Establishes a grid container with a specified number of columns.
-* @param {number} $count - The number of columns.
+// @description Establishes a grid container with a specified number of columns.
+// @param {number} $count - The number of columns.
 
-/// EXAMPLE USAGE
-.custom-grid {
-  display: grid;
-  @include cols-custom("1fr_auto_1fr");
-}
-
-*/
+// /EXAMPLE USAGE
+// .custom-grid {
+//  display: grid;
+//  @include cols-custom("1fr_auto_1fr");
+// }
 
 @mixin cols-custom($template) {
   // Convert underscores to spaces so "1fr_auto" becomes "1fr auto"
@@ -76,26 +59,20 @@ $alignments: (
   "stretch": stretch,
 );
 
-/**
- * @description justify-items container.
- * @param {string} $value - The value for the justify-items property.
- */
+// @description justify-items container.
+// @param {string} $value - The value for the justify-items property.
 @mixin justify($value) {
   justify-items: $value;
 }
 
-/**
- * @description Establishes a align-items container.
- * @param {string} $value - The value for the align-items property.
- */
+// @description Establishes a align-items container.
+// @param {string} $value - The value for the align-items property.
 @mixin align($value) {
   align-items: $value;
 }
 
-/**
- * @description Establishes a place-items container.
- * @param {string} $value - The value for the place-items property.
- */
+// @description Establishes a place-items container.
+// @param {string} $value - The value for the place-items property.
 @mixin place($value) {
   place-items: $value;
 }
@@ -131,7 +108,7 @@ $alignments: (
   grid-row: $row;
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("grid") {
   // Build the flat selector list manually with proper escaping
   $base-grid-selector: #{VAR.$parent-selector} + " .grid";
   $all-grid-selectors: $base-grid-selector;
@@ -142,12 +119,6 @@ $alignments: (
 
   // Apply base grid styles to all grid variants at once
   #{$all-grid-selectors} {
-    @include grid;
-
-    &.inline {
-      @include grid-inline;
-    }
-
     // Auto-fit/fill Classes
     @each $size, $width in VAR.$grid-item-sizes {
       &.auto-fit-#{$size} {