@enigmatry/scss-foundation 1.15.1-preview.9 → 15.0.0-preview

package/README.md

@@ -7,19 +7,11 @@
 $ npm install --save-dev @enigmatry/scss-foundation
 ```
 
-## How to use it
-
-Utilities are nothing more than just sass mixins that won't be included in your code base unless you @use individual file of this library and @include them.
-
-
 ## What's included
 
-- [Flexible Grid System](../scss-foundation/docs/grid.md)
-- [Encapsulated logic regarding Breakpoints / Media queries](../scss-foundation/docs/breakpoints.md)
-- [(Flex) Alignment utilities](../scss-foundation/docs/alignment.md)
-- [Absolute Positioning utilities](../scss-foundation/docs/absolute-positioning.md)
-- [Fixed Positioning utilities](../scss-foundation/docs/fixed-positioning.md)
-- [Text Modification utilities](../scss-foundation/docs/text-modification.md)
+- [Utilities](../scss-foundation/docs/modules/README.md)
+
+- [Helper Classes](../scss-foundation/docs/partials/README.md)
 
 ## License
 

package/coverage/clover.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1690209955198" clover="3.2.0">
-  <project timestamp="1690209955198" name="All files">
+<coverage generated="1699000683047" clover="3.2.0">
+  <project timestamp="1699000683047" name="All files">
     <metrics statements="0" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0" elements="0" coveredelements="0" complexity="0" loc="0" ncloc="0" packages="0" files="0" classes="0"/>
   </project>
 </coverage>

package/coverage/lcov-report/index.html

@@ -86,7 +86,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-07-24T14:45:55.193Z
+                at 2023-11-03T08:38:03.044Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/dist/scss-foundation-modules.css

@@ -0,0 +1 @@
+/*# sourceMappingURL=scss-foundation-modules.css.map */

package/dist/scss-foundation-modules.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"scss-foundation-modules.css"}

package/dist/scss-foundation.css

@@ -1 +1 @@
-.first-letter-capitalized{display:inline-block}.first-letter-capitalized::first-letter{text-transform:capitalize}.capitalized{text-transform:uppercase}.space-between{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}.align-center{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}.align-right{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end}.align-vertical{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start}.clickable{cursor:pointer}.draggable{cursor:grab}.forbidden{cursor:not-allowed}.hidden{display:none}.no-resize{resize:none}/*# sourceMappingURL=scss-foundation.css.map */
+.first-letter-capitalized{display:inline-block}.first-letter-capitalized::first-letter{text-transform:capitalize}.capitalized{text-transform:uppercase}.space-between{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}.align-center{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}.align-right{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end}.align-vertical{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start}.stack-vertical{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:baseline;justify-content:space-between}.clickable{cursor:pointer}.draggable{cursor:grab}.forbidden{cursor:not-allowed}.hidden{display:none}.no-resize{resize:none}/*# sourceMappingURL=scss-foundation.css.map */

package/dist/scss-foundation.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/partials/core/fonts/_text-control.scss","../src/partials/core/layouts/_alignment.scss","../src/modules/display/_items.scss","../src/partials/core/states/_cursors.scss","../src/partials/core/states/_visibility.scss","../src/partials/core/states/_resize.scss"],"names":[],"mappings":"AAAA,0BACC,qBAEA,wCACC,0BAIF,aACC,yBCPD,eCYC,aAEC,eAH2D,IAI3D,UAJuE,KAMxE,YDhB2B,OCiB3B,gBDjBmC,cAGpC,cCQC,aAEC,eAH2D,IAI3D,UAJuE,KAMxE,YATqB,OAUrB,gBAV6B,oBAI7B,aAEC,eAH2D,IAI3D,UAJuE,KAMxE,YDR2B,OCS3B,gBDTmC,SAGpC,6BCEE,eAH2D,IAI3D,UAJuE,KAMxE,YDJqB,OCKrB,gBAPoC,WCbrC,WACC,eAGD,WACC,YAGD,WACC,mBCTD,QACC,aCDD,WACC","file":"scss-foundation.css"}
+{"version":3,"sourceRoot":"","sources":["../src/partials/core/fonts/_text-control.scss","../src/partials/core/layouts/_alignment.scss","../src/modules/display/_items.scss","../src/partials/core/states/_cursors.scss","../src/partials/core/states/_visibility.scss","../src/partials/core/states/_resize.scss"],"names":[],"mappings":"AAAA,0BACC,qBAEA,wCACC,0BAIF,aACC,yBCPD,eCYC,aAEC,eAH2D,IAI3D,UAJuE,KAMxE,YDhB2B,OCiB3B,gBDjBmC,cAGpC,cCQC,aAEC,eAH2D,IAI3D,UAJuE,KAMxE,YATqB,OAUrB,gBAV6B,oBAI7B,aAEC,eAH2D,IAI3D,UAJuE,KAMxE,YDR2B,OCS3B,gBDTmC,SAGpC,6BCEE,eAH2D,IAI3D,UAJuE,KAMxE,YDJqB,OCKrB,gBAPoC,WDKrC,gBCJC,aAEC,eDGmD,OCFnD,UDE2D,4BCC5D,gBDDqC,cEnBtC,WACC,eAGD,WACC,YAGD,WACC,mBCTD,QACC,aCDD,WACC","file":"scss-foundation.css"}

package/docs/modules/README.md

@@ -0,0 +1,19 @@
+# Utilities
+
+## How to use it
+
+Utilities are nothing more than just sass mixins that won't be included in your code base unless you @use individual files of this library and @include them.
+
+## What's included
+
+- [Flexible Grid System](./grid.md)
+- [Encapsulated logic regarding Breakpoints / Media queries](./breakpoints.md)
+- [(Flex) Alignment utilities](./alignment.md)
+- [Background Hover utilities](./background-hover.md)
+- [Absolute Positioning utilities](./absolute-positioning.md)
+- [Fixed Positioning utilities](./fixed-positioning.md)
+- [Text Modification utilities](./text-modification.md)
+- [Text Hover utilities](./text-hover.md)
+- [Border Radius utilities](./border-radius.md)
+- [Row Coloring utilities](./row-coloring.md)
+- [Visibility utilities](./visibility.md)

package/docs/{absolute-positioning.md → modules/absolute-positioning.md}

@@ -4,13 +4,14 @@ Alignment utilities for absolute positioning of content.
 
 ## Absolute
 
-@use scss-foundation/src/position/absolute;
+@use scss-foundation/src/modules/position/absolute;
 
 - Replaces the several most common lines in absolute positioning with just one liner.
+
 ```
 @include absolute.position($top, $right, $bottom, $left);
 ```
-All arguments are optional and default to 0. Sets following properties:
+All arguments are optional and default to 0. Sets the following properties:
 ```
 	position: absolute;
 	top: $top;
@@ -20,7 +21,8 @@ All arguments are optional and default to 0. Sets following properties:
 ```
 
 - Replaces the several most common lines in absolute positioning for unset values with just one liner.
+
 ```
 @include absolute.position-unset($top, $right, $bottom, $left);
 ```
-All arguments are optional and default to unset. Sets the same properties as in previous method.
+All arguments are optional and default to unset. Sets the same properties as in the previous method.

package/docs/{alignment.md → modules/alignment.md}

@@ -4,27 +4,36 @@ Alignment utilities for positioning items using flex.
 
 ## Items
 
-@use scss-foundation/src/display/items;
+@use scss-foundation/src/modules/display/items;
+
+- Center alignment. Wrapper method for following flex settings: flex direction row, justify content on flex start and
+align items centrally.
 
-- Center alignment. Wrapper method for following flex settings: flex direction row, justify content on flex start and align items centrally.
 ```
 @include items.align-center();
 ```
+
 - Configurable alignment. Everything is same as for the previous method, but align items property is configurable.
+
 ```
 @include items.align($align);
 ```
+
 - Horizontal and vertical central alignment. Wrapper method for following flex settings: flex direction row, justify content centrally and align items centrally.
+
 ```
 @include items.align-absolute-center();
 ```
-- Alignment utility. Replaces several line of CSS with just one liner. 
+
+- Alignment utility. Replaces several line of CSS with just one liner.
+
 ```
 @include items.fully-align($align, $justify, $direction, $wrap);
 ```
+
 Optional arguments and their default values:
 $justify: flex-start, $direction: row, $wrap: wrap
-Sets following properties:
+Sets the following properties:
 ```
 	display: flex;
 	flex: {
@@ -34,5 +43,3 @@ Sets following properties:
 	align-items: $align;
 	justify-content: $justify;
 ```
-
-

package/docs/modules/background-hover.md

@@ -0,0 +1,18 @@
+# Background hover method
+
+Hover utilities for easy definition of regular and hover background states.
+
+## Background hover
+
+@use scss-foundation/src/modules/states/hover;
+
+- Background hover. Method for setting the background color of any element for the regular state, and when the element is hovered over, it changes the color to the specified hover state.
+
+```
+@include hover.background-hover($regular-state, $hover-state);
+```
+Sets the properties for both regular and hover states:
+```
+	background-color: $regular-state;
+    background-color: $hover-state;
+```

package/docs/modules/border-radius.md

@@ -0,0 +1,20 @@
+# Border-radius method
+
+Border radius utility for setting different border radius values for each corner of an element.
+
+## Border Radius
+
+@use scss-foundation/src/modules/borders/border-radius;
+
+- Replaces the several most common lines in border radius with just one liner.
+
+```
+@include border-radius.partial-border-radius($top-left, $top-right, $bottom-right, $bottom-left);
+```
+All arguments are optional and default to 0. Sets the following properties:
+```
+	top-left-radius: $top-left;
+	top-right-radius: $top-right;
+	bottom-right-radius: $bottom-right;
+	bottom-left-radius: $bottom-left;
+```

package/docs/modules/breakpoints.md

@@ -0,0 +1,27 @@
+# Breakpoints methods
+
+Utilities related to the application's breakpoints.
+
+## Breakpoints
+
+This module has an overridable breakpoints variable. Due to Sass limitations, there should be only one (wrapper) @use/@forward of this utility in your application in order to prevent side effects and to have easier work.
+Breakpoints must be in the same format as variables inside the src root folder.
+
+Usage:
+@use scss-foundation/src/modules/responsiveness/breakpoints;
+
+- Applies desired styles and properties starting from a certain breakpoint given by its key. The key must be a valid key from
+the given (or default) breakpoint collection.
+
+```
+@include breakpoints.apply-on($given-size);
+```
+
+- Sets up breakpoints in a way so you can pass them to the JS from HTML. This is needed so you could have them defined
+only in SCSS after which you can apply some logic in JS based on that, but with only one spot for future maintenance.
+
+```
+@include breakpoints.set-up($with-capitalization);
+```
+Mixin defines the set of properties that must be added to a certain HTML container, ideally the root one. Whatever the width of the display device is, the content property of it is gonna hold a descriptive name for it and you can process that kind of enum insided JS and apply some logic.
+$with-capitalization argument is optional (default = true), since we're mostly using TypeScript + Angular Material which enforces capitalization.

package/docs/{fixed-positioning.md → modules/fixed-positioning.md}

@@ -4,13 +4,14 @@ Alignment utilities for fixed positioning of content.
 
 ## Fixed
 
-@use scss-foundation/src/position/fixed;
+@use scss-foundation/src/modules/position/fixed;
 
 - Replaces the several most common lines in fixed positioning with just one liner.
+
 ```
 @include fixed.position($top, $right, $bottom, $left);
 ```
-All arguments are optional and default to 0. Sets following properties:
+All arguments are optional and default to 0. Sets the following properties:
 ```
 	position: fixed;
 	top: $top;
@@ -20,7 +21,8 @@ All arguments are optional and default to 0. Sets following properties:
 ```
 
 - Replaces the several most common lines in fixed positioning for unset values with just one liner.
+
 ```
 @include fixed.position-unset($top, $right, $bottom, $left);
 ```
-All arguments are optional and default to unset. Sets the same properties as in previous method.
+All arguments are optional and default to unset. Sets the same properties as in the previous method.

package/docs/modules/grid.md

@@ -0,0 +1,46 @@
+
+# Grid methods
+
+Grid heavily depends on breakpoints utilities since there's not much sense in making a grid without them. On the other hand, on rare occasions, if you just need row styles with auto width, independent core grid utilities might be just enough. In the majority of cases, this utility is already the part of full grid so there's no need to use it manually.
+
+## Grid
+
+This module has an overridable breakpoints variable. Due to Sass limitations, there should be only one (wrapper) @use/@forward of this utility in your application in order to prevent side effects and to have easier work.
+Breakpoints must be in the same format as variables inside the src root folder.
+
+@use scss-foundation/src/layout/grid;
+
+- Full grid generation. It generates everything from the core grid plus all column/offset classes using syntax from Bootstrap
+5, classes like col-sm-4, offset-md-10.
+
+```
+@include grid.generate(); // or @include grid.generate($divisions);
+```
+The default grid (as in Bootstrap) has 12 columns, but you can change that by passing a positive number parameter (between 2 and 1000).
+
+## Grid core
+
+@use scss-foundation/src/layout/grid-core as grid;
+
+ -  Core generation creates styles for rows and auto width of the content. You must pass prefixes for column and offset class
+ names.
+
+```
+@include grid.generate($column-prefix, $offset-prefix);
+```
+
+- Reverse row generation. Integrated into the full grid, but this can be also added independently if needed in your application.
+
+```
+@include grid.generate-reverse-row($breakpoints);
+```
+Breakpoints are required parameter. Expected format of breakpoints is a map/dictionary with keys being unique and something descriptive to you (i.e. mobile) and value being an object defined with size (in pixels) and string description that will be seen in CSS output (i.e. sm).
+In other words:
+    **mobile: ( size: 576px, description: 'sm' )**
+For more details, please check the format of the breakpoint variable inside the src root folder.
+
+This method generates classes which helps you reverse order in row; i.e. if row had divs A, B, C and you apply reverse row class, the order will be C, B, A. There are two options:
+
+1) .reverse-row-DESIRED_BREAKPOINT_DESCRIPTION
+2) .reverse-dow-under-DESIRED_BREAKPOINT_DESCRIPTION
+The first one helps you to reverse order starting from a given breakpoint (DESIRED_BREAKPOINT_DESCRIPTION might be sm, md, xxl, depending on what you pass as a breakpoint description). The second one helps you to reverse order on all widths under certain breakpoint.

package/docs/modules/row-coloring.md

@@ -0,0 +1,24 @@
+# Row coloring methods
+
+Row coloring utilities for the background color to rows based on their position.
+
+## Row coloring
+
+@use scss-foundation/src/modules/lists/row-coloring as list;
+
+- Odd row coloring. Method for easily applying specified background color to odd-numbered rows.
+
+```
+@include list.odd-row-coloring($color);
+```
+Sets the following property:
+```
+	background-color: $color;
+```
+
+- Even row coloring. Method for easily applying specified background color to even-numbered rows.
+
+```
+@include list.even-row-coloring($color);
+```
+Sets the same property as in the previous method.

package/docs/modules/text-hover.md

@@ -0,0 +1,18 @@
+# Text hover method
+
+Hover utilities for easy definition of regular and hover font states.
+
+## Text Hover
+
+@use scss-foundation/src/modules/text/hover;
+
+- Font hover. Method for setting the color of the font for the regular state, and when the element is hovered over, it changes the color to the specified hover state.
+
+```
+@include hover.font-hover($regular-state, $hover-state);
+```
+Sets the properties for both regular and hover states:
+```
+	color: $regular-state;
+    color: $hover-state;
+```

package/docs/modules/text-modification.md

@@ -0,0 +1,27 @@
+
+# Text-related methods
+
+From time to time we need to prettify and alter some text in HTML. The following methods help us with that.
+
+## Text Modification
+
+@use scss-foundation/src/modules/text/modification as text-modification;
+
+- Capitalizes given string.
+
+```
+text-modification.capitalize('john'); // returns John
+```
+
+- Cuts off lengthy text by adding an ellipsis at the end. Behavior heavily depends on context; it cannot be applied to
+containers with unlimited width.
+
+```
+@include text-modification.ellipsis();
+```
+This mixin is short-hand for the following set of properties:
+```
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+```

package/docs/modules/visibility.md

@@ -0,0 +1,27 @@
+# Visibility methods
+
+Visibility utilities for control of element visibility based on different device states.
+
+## Visibility
+
+@use scss-foundation/src/modules/states/visibility;
+
+- Show on mobile. Method for controlling the visibility of the element on mobile devices.
+
+```
+@include visibility.show-on-mobile($mobile-state: block);
+```
+The argument is optional and defaults to block. Sets the following property:
+```
+	display: $mobile-state;
+```
+
+- Show on the tablet. Method for controlling the visibility of the element on tablet devices.
+
+```
+@include visibility.show-on-tablet($tablet-state: block);
+```
+The argument is optional and defaults to block. Sets the following property:
+```
+	display: $tablet-state;
+```

package/docs/partials/README.md

@@ -0,0 +1,14 @@
+
+# Helper Classes
+
+## How to use it
+
+Helper classes provide an effective solution for minimizing repetitive code. You can easily apply them from this library in your code base.
+
+## What's included
+
+- [Alignment Helper Classes](./visibility.md)
+- [Cursor Helper Classes](./cursor.md)
+- [Resize Helper Classes](./resize.md)
+- [Text Control Helper Classes](./text-control.md)
+- [Visibility Helper Classes](./visibility.md)

package/docs/partials/alignment.md

@@ -0,0 +1,15 @@
+# Alignment Helper Classes
+
+Provides a set of classes that can be used to apply flexible alignment properties. Included classes are: space-between, align-center, align-right, align-vertical which work using utilities for positioning items using flex.
+
+## Alignment
+
+@use scss-foundation/src/partials/core/layout/alignment;
+
+- The `space-between` class applies a flexible alignment to its elements, distributing them along the horizontal axis with space between each element.
+
+- The `align-center` class applies a flexible alignment to its elements, centering them both horizontally and vertically inside the parent container.
+
+- The `align-right` class applies a flexible alignment to its elements, centering them vertically and aligning them to the right side of the parent container.
+
+- The `align-vertical` class applies a flexible alignment to its elements, centering them vertically inside the parent container.

package/docs/partials/cursor.md

@@ -0,0 +1,13 @@
+# Cursor Helper Classes
+
+ Various cursor states. Currently supported: clickable, draggable, and forbidden, each of them represents a specific cursor state.
+
+## Cursor
+
+@use scss-foundation/src/partials/core/states/cursor;
+
+- The `clickable` class is used to indicate that an element is clickable. When this class is applied, the cursor will change to a pointer.
+
+- The `draggable` class is used to indicate that an element is draggable. When this class is applied, the cursor will change to a grabbing hand.
+
+- The `forbidden` class is used to indicate that an element is not allowed to be interacted with. When this class is applied, the cursor will change to not allowed.

package/docs/partials/resize.md

@@ -0,0 +1,9 @@
+# Resize Helper Class
+
+Resize helper class is used to disable the resizing behavior of an element, preventing users from resizing it.
+
+## Resize
+
+@use scss-foundation/src/partials/core/states/resize;
+
+- Apply the `no-resize` class to an element to disable resizing.

package/docs/partials/text-control.md

@@ -0,0 +1,11 @@
+# Text Control Helper Classes
+
+Text control helper classes are used for text transformation. Included classes are: first-letter-capitalized and capitalized.
+
+## Text Control
+
+@use scss-foundation/src/partials/core/fonts/text-control;
+
+- The `first-letter-capitalized` class is used to capitalize the first letter of the element.
+
+- The `capitalized` class is used to transform all text to uppercase.

package/docs/partials/visibility.md

@@ -0,0 +1,9 @@
+# Hidden Helper Class
+
+ Hidden helper class is used to hide elements by setting their display property to none, effectively removing them from the visual layout of the page.
+
+## Hidden
+
+@use scss-foundation/src/partials/core/states/visibility;
+
+- To hide an element, apply the `hidden` class to it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmatry/scss-foundation",
-  "version": "1.15.1-preview.9",
+  "version": "15.0.0-preview",
   "author": "Enigmatry",
   "description": "Collection of SCSS utilities useful for the most of projects.",
   "homepage": "https://github.com/enigmatry/entry-angular-building-blocks/tree/master/libs/scss-foundation#readme",
@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "sass --style=compressed --load-path=src src/partials/main.scss dist/scss-foundation.css",
-    "build-modules": "sass --style=compressed --load-path=src src/modules/_index.scss dist/scss-foundation-modules.css",
+    "build-modules": "sass --style=compressed --load-path=src --load-path=../../node_modules src/modules/_index.scss dist/scss-foundation-modules.css",
     "lint": "stylelint --fix src/**/*.scss",
     "test": "jest --coverage --colors"
   },

package/src/modules/layout/_grid-core.scss

@@ -12,6 +12,7 @@ $breakpoints: () !default;
 		}
 
 		[class ^= #{$column-prefix}], [class ^= #{$offset-prefix}] {
+			box-sizing: border-box;
 			flex-shrink: 0;
 			max-width: 100%;
 			padding: 0 $spacing;
@@ -44,7 +45,7 @@ $breakpoints: () !default;
 
 		#{$reverse-prefix + $under + $size} {
 			flex-direction: row-reverse;
-		
+
 			@include breakpoints.apply-on($item) {
 				flex-direction: row;
 			}

package/src/modules/layout/_grid.scss

@@ -4,8 +4,8 @@ $breakpoints: () !default;
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
-@use '../../../node_modules/sass-true';
-@use '../../../node_modules/sass-true/sass/throw';
+@use 'sass-true';
+@use 'sass-true/sass/throw';
 @use '../../modules/variables' as vars;
 @forward '../../modules/responsiveness/breakpoints' with (
 	$breakpoints: $breakpoints

package/src/modules/states/_hover.scss

@@ -0,0 +1,7 @@
+@mixin background-hover($regular-state, $hover-state) {
+	background-color: $regular-state;
+
+	&:hover, &:hover::before {
+		background-color: $hover-state;
+	}
+}

package/src/modules/states/_index.scss

@@ -1 +1,2 @@
+@use 'hover';
 @use 'visibility';

package/src/modules/text/_modification.scss

@@ -1,6 +1,6 @@
 @use 'sass:string';
 @use '../../modules/variables' as vars;
-@use '../../../node_modules/sass-true';
+@use 'sass-true';
 @use 'sass:meta';
 
 @function capitalize($string) {

package/src/partials/core/layouts/_alignment.scss

@@ -15,3 +15,7 @@
 .align-vertical {
 	@include items.align(center);
 }
+
+.stack-vertical {
+	@include items.fully-align(baseline, space-between, column, nowrap);
+}

package/tests/display/items.tests.scss

@@ -1,4 +1,4 @@
-@use '../../node_modules/sass-true/sass/true';
+@use 'sass-true/sass/true';
 @use '../../src/modules/display/items';
 
 @include true.describe('align($align)') {

package/tests/layout/grid-core.tests.scss

@@ -5,7 +5,7 @@
 /* stylelint-disable at-rule-allowed-list */
 $custom-breakpoints: () !default;
 
-@use '../../node_modules/sass-true/sass/true';
+@use 'sass-true/sass/true';
 @use '../../src/modules/variables' as vars;
 
 @forward '../../src/modules/layout/grid' with (
@@ -28,6 +28,7 @@ $custom-breakpoints: () !default;
 				}
 
 				.row [class ^= 'col-'], .row [class ^= 'offset-'] {
+					box-sizing: border-box;
 					flex-shrink: 0;
 					max-width: 100%;
 					padding: 0 0;
@@ -58,6 +59,7 @@ $custom-breakpoints: () !default;
 				}
 
 				.row [class ^= 'column-'], .row [class ^= 'gap-'] {
+					box-sizing: border-box;
 					flex-shrink: 0;
 					max-width: 100%;
 					padding: 0 8px;

package/tests/layout/grid.tests.scss

@@ -7,7 +7,7 @@
 /* stylelint-disable at-rule-allowed-list */
 @use '../../src/modules/layout/grid';
 @use '../../src/modules/variables' as vars;
-@use '../../../node_modules/sass-true';
+@use 'sass-true';
 
 vars.$testing: true;
 
@@ -128,6 +128,7 @@ vars.$testing: true;
 				}
 
 				.row [class ^= 'col-'], .row [class ^= 'offset-'] {
+					box-sizing: border-box;
 					flex-shrink: 0;
 					max-width: 100%;
 					padding: 0 0;
@@ -925,6 +926,7 @@ vars.$testing: true;
 					margin: 0 -8px;
 
 					[class ^= 'col-'], [class ^= 'offset-'] {
+						box-sizing: border-box;
 						flex-shrink: 0;
 						max-width: 100%;
 						padding: 0 8px;

package/tests/lists/row-coloring.tests.scss

@@ -1,5 +1,5 @@
 @use 'sass:color';
-@use '../../node_modules/sass-true/sass/true';
+@use 'sass-true/sass/true';
 @use '../../src/modules/lists/row-coloring' as lists;
 
 @include true.describe('row-coloring($color, $rows)') {

package/tests/position/absolute.tests.scss

@@ -1,6 +1,6 @@
 /* stylelint-disable declaration-block-no-redundant-longhand-properties */
 /* stylelint-disable shorthand-property-no-redundant-values */
-@use '../../node_modules/sass-true/sass/true';
+@use 'sass-true/sass/true';
 @use '../../src/modules/position/absolute';
 
 @include true.describe('position($top, $right, $bottom, $left)') {

package/tests/position/fixed.tests.scss

@@ -1,6 +1,6 @@
 /* stylelint-disable declaration-block-no-redundant-longhand-properties */
 /* stylelint-disable shorthand-property-no-redundant-values */
-@use '../../node_modules/sass-true/sass/true';
+@use 'sass-true/sass/true';
 @use '../../src/modules/position/fixed';
 
 @include true.describe('position($top, $right, $bottom, $left)') {

package/tests/position/set-position.tests.scss

@@ -1,5 +1,5 @@
 /* stylelint-disable declaration-block-no-redundant-longhand-properties */
-@use '../../node_modules/sass-true/sass/true';
+@use 'sass-true/sass/true';
 @use '../../src/modules/position/set-position' as position;
 
 @include true.describe('set-position($top, $right, $bottom, $left, $position)') {

package/tests/shim.test.js

@@ -7,8 +7,8 @@ const sassTrue = require('sass-true');
 const glob = require('glob');
 
 describe('Scss unit tests', () => {
-    const paths = path.resolve(process.cwd(), 'tests/**/*.tests.scss');
+    const paths = path.resolve(process.cwd(), 'tests/**/*.tests.scss').replace(/\\/g,'/');
     const sassTestFiles = glob.sync(paths);
 
-    sassTestFiles.forEach(file => sassTrue.runSass({ describe, it }, file));
+    sassTestFiles.forEach(file => sassTrue.runSass({ describe, it }, file, {loadPaths: ['../../node_modules'] }));
 });

package/tests/text/modification.tests.scss

@@ -1,6 +1,6 @@
 @use '../../src/modules/variables' as vars;
 @use '../../src/modules/text/modification';
-@use '../../../node_modules/sass-true';
+@use 'sass-true';
 
 vars.$testing: true;
 

package/docs/breakpoints.md

@@ -1,23 +0,0 @@
-# Breakpoints methods
-
-Utilities related with application's breakpoints.
-
-## Breakpoints
-
-This module has overridable breakpoints variable. Due to Sass limitations, there should be only one (wrapper) @use/@forward of this utility in your application in order to prevent side effects and to have easier work.
-Breakpoints must be in the same format as variables inside src root folder.
-
-Usage:
-@use scss-foundation/src/responsiveness/breakpoints;
-
-- Applies desired styles and properties starting from certain breakpoint given by its key. Key must be valid key from given (or default) breakpoint collection.
-```
-@include breakpoints.apply-on($given-size);
-```
-
-- Sets up breakpoints in a way so you can pass them to the JS from HTML. This is needed so you could have them defined only in SCSS after which you can apply some logic in JS based on that, but with only one spot for future maintenance.
-```
-@include breakpoints.set-up($with-capitalization);
-```
-Mixin defines set of properties that must be added to a certain HTML container, ideally the root one. Whatever the width of display device is, content property of it is gonna hold descriptive name for it and you can process that kind of enum insided JS and apply some logic.
-$with-capitalization argument is optional (default = true), since we're mostly using TypeScript + Angular Material which enforces capitalization.

package/docs/grid.md

@@ -1,40 +0,0 @@
-
-# Grid methods
-
-Grid heavily depends on breakpoints utilities since there's not much sense in making grid without them. On the other hand, in rare occasions if you just need row styles with auto width, independent core grid utilities might be just enough. In majority of cases, this utility is already the part of full grid so there's no need to use it manually.
-
-## Grid
-
-This module has overridable breakpoints variable. Due to Sass limitations, there should be only one (wrapper) @use/@forward of this utility in your application in order to prevent side effects and to have easier work.
-Breakpoints must be in the same format as variables inside src root folder.
-
-@use scss-foundation/src/layout/grid;
-
-- Full grid generation. It generates everything from core grid plus all column/offset classes using syntax from Bootstrap 5, classes like col-sm-4, offset-md-10.
-```
-@include grid.generate(); // or @include grid.generate($divisions);
-```
-Default grid (as in Bootstrap) has 12 columns, but you can change that by passing a positive number parameter (between 2 and 1000).
-
-## Grid core
-
-@use scss-foundation/src/layout/grid-core as grid;
-
- - Core generation creates styles for rows and auto width of content. You must pass prefixes for column and offset class names.
-```
-@include grid.generate($column-prefix, $offset-prefix);
-```
-
-- Reverse row generation. Integrated in full grid, but this can be also added independently if needed in your application. 
-```
-@include grid.generate-reverse-row($breakpoints);
-```
-Breakpoints are required parameter. Expected format of breakpoints is a map/dictionary with keys being unique and something descriptive to you (i.e. mobile) and value being an object defined with size (in pixels) and string description that will be seen in CSS output (i.e. sm).
-In other words:
-    **mobile: ( size: 576px, description: 'sm' )**
-For more details, please check the format of breakpoint variable inside src root folder.
- 
-This method generates classes which helps you reverse order in row; i.e. if row had divs A, B, C and you apply reverse row class, order will be C, B, A. There are two options: 
-1) .reverse-row-DESIRED_BREAKPOINT_DESCRIPTION
-2) .reverse-dow-under-DESIRED_BREAKPOINT_DESCRIPTION
-The first one helps you to reverse order starting from given breakpoint (DESIRED_BREAKPOINT_DESCRIPTION might be sm, md, xxl, depending on what you pass as a breakpoint description). The second one helps you to reverse order on all widths under certain breakpoint.

package/docs/text-modification.md

@@ -1,24 +0,0 @@
-
-# Text-related methods
-
-From time to time we need to prettify and alter some text in HTML. Following methods help us in that.
-
-## Text Modification
-
-@use scss-foundation/src/text/modification as text-modification;
-
-- Capitalizes given string.
-```
-text-modification.capitalize('john'); // returns John
-```
-
-- Cuts off lengthy text by adding ellipsis in the end. Behavior heavily depends on context; it cannot be applied on containers with unlimited width.
-```
-@include text-modification.ellipsis();
-```
-This mixin is short-hand for following set of properties:
-```
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-```

package/src/partials/states/_cursors.scss

@@ -1,11 +0,0 @@
-.clickable {
-	cursor: pointer;
-}
-
-.draggable {
-	cursor: grab;
-}
-
-.forbidden {
-	cursor: not-allowed;
-}

package/src/partials/states/_index.scss

@@ -1,3 +0,0 @@
-@use 'cursors';
-@use 'visibility';
-@use 'resize';

package/src/partials/states/_resize.scss

@@ -1,3 +0,0 @@
-.no-resize {
-	resize: none;
-}

package/src/partials/states/_visibility.scss

@@ -1,3 +0,0 @@
-.hidden {
-	display: none;
-}