@oardi/css-utils 0.104.0 → 0.106.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.104.0",
+	"version": "0.106.0",
 	"author": "Ardian Shala",
 	"homepage": "https://css-utils.oardi.com",
 	"description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",

package/readme.md

@@ -28,7 +28,7 @@ Load CSS Utils once through your application's global stylesheet:
 @use '@oardi/css-utils';
 ```
 
-No additional cascade-layer setup is required.
+No additional cascade-layer setup is required, including when importing selected public SCSS entry points directly.
 
 When compiling directly with the Dart Sass CLI, use the Node package importer:
 
@@ -68,6 +68,8 @@ Responsive utilities are mobile-first. Classes without a breakpoint apply at eve
 </div>
 ```
 
+Display utilities intentionally override the grid container at their active breakpoint. For example, `class="grid d-lg-block"` uses the grid below `lg` and switches to block layout from `lg` upward.
+
 ## Browser support
 
 The minimum supported versions for the compiled library CSS are:

package/scss/borders.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use './layers.scss';
 @use './theme.scss' as theme;
 
 $borderWidths: 0, 1, 2, 3, 4, 5;

package/scss/components/alert.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.alert {
 		--alert-padding-y: var(--spacer-3);

package/scss/components/avatar.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.avatar {
 		--avatar-size: 2.5rem;

package/scss/components/badge.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.badge {
 		--badge-padding-y: var(--spacer-1);

package/scss/components/breadcrumb.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.breadcrumb {
 		--breadcrumb-padding-x: var(--spacer-0);

package/scss/components/button.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../layers.scss';
 @use '../theme.scss' as theme;
 
 @layer components {

package/scss/components/card.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.card {
 		--card-header-padding: var(--spacer-3) var(--spacer-3) 0 var(--spacer-3);

package/scss/components/chip.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../layers.scss';
 @use '../theme.scss' as theme;
 
 @layer components {

package/scss/components/drawer.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.drawer {
 		--drawer-width: 20rem;

package/scss/components/empty-state.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.empty-state {
 		--empty-state-max-width: 36rem;

package/scss/components/expansion-panel.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.expansion-panel-container {
 		display: flex;

package/scss/components/form.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.form-control {
 		--form-control-bg-color: var(--bg-surface);

package/scss/components/icon-button.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../layers.scss';
 @use '../theme.scss' as theme;
 
 @layer components {

package/scss/components/list.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.list {
 		--list-padding: var(--spacer-0);

package/scss/components/menu.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.menu {
 		--menu-min-width: 12rem;

package/scss/components/modal.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.modal {
 		--modal-width: min(32rem, calc(100vw - var(--spacer-4)));

package/scss/components/navbar.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../layers.scss';
 @use '../theme.scss' as theme;
 
 @layer components {

package/scss/components/overlay.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.overlay {
 		--overlay-highlight: rgb(from var(--gray-800) r g b / 0.7);

package/scss/components/pagination.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.pagination {
 		--pagination-gap: var(--spacer-1);

package/scss/components/range-slider.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.range-slider {
 		--range-slider-gap: var(--spacer-1);

package/scss/components/stepper.scss

@@ -1,3 +1,4 @@
+@use '../layers.scss';
 @use '../mixins/breakpoints' as bp;
 
 @layer components {

package/scss/components/table.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.table {
 		--table-color: var(--text-color);

package/scss/components/tabs.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.tabs {
 		--tabs-bg-color: transparent;

package/scss/components/timeline.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.timeline {
 		--timeline-line-color: var(--border-color);

package/scss/components/toast.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.toast {
 		--toast-z-index: var(--z-index-toast);

package/scss/components/tooltip.scss

@@ -1,3 +1,5 @@
+@use '../layers.scss';
+
 @layer components {
 	.tooltip {
 		--tooltip-z-index: var(--z-index-tooltip);

package/scss/display.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use './layers.scss';
 @use './theme.scss' as theme;
 
 $-display-values: (
@@ -10,7 +11,7 @@ $-display-values: (
 	inline-flex: inline-flex,
 );
 
-@layer utilities {
+@layer utilities.display {
 	@each $name, $value in $-display-values {
 		.d-#{$name} {
 			display: $value;

package/scss/flex-responsive.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use './layers.scss';
 @use './display.scss';
 @use './theme.scss' as theme;
 

package/scss/flex.scss

@@ -1,3 +1,4 @@
+@use './layers.scss';
 @use './display.scss';
 
 @layer utilities {

package/scss/gap-responsive.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use './layers.scss';
 @use './theme.scss' as theme;
 
 // i.e.: .gap-md-2, .row-gap-md-2, .column-gap-md-2

package/scss/gap.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use './layers.scss';
 @use './theme.scss' as theme;
 
 @layer utilities {

package/scss/grid-responsive.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use './layers.scss';
 @use './theme.scss' as theme;
 
 // grid responsive

package/scss/grid.scss

@@ -1,4 +1,6 @@
-@layer utilities {
+@use './layers.scss';
+
+@layer utilities.grid {
 	.grid {
 		--grid-gap: var(--spacer-3);
 

package/scss/layers.scss

@@ -1 +1,2 @@
 @layer reset, base, components, utilities;
+@layer utilities.grid, utilities.display;

package/scss/order-responsive.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use './layers.scss';
 @use './theme.scss' as theme;
 
 // Order utilities work with flex and grid items.

package/scss/order.scss

@@ -1,5 +1,7 @@
 // Order utilities work with flex and grid items.
 
+@use './layers.scss';
+
 @layer utilities {
 	.order-0 {
 		order: 0;

package/scss/reboot.scss

@@ -1,3 +1,5 @@
+@use './layers.scss';
+
 @layer reset {
 	*,
 	::after,

package/scss/spacings-responsive.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use './layers.scss';
 @use './theme.scss' as theme;
 
 @layer utilities {

package/scss/spacings.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use './layers.scss';
 @use './theme.scss' as theme;
 
 @layer utilities {

package/scss/text.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use './layers.scss';
 @use './theme.scss' as theme;
 
 $letterSpacings: 0, 1, 2, 3, 4, 5;

package/scss/typography.scss

@@ -1,3 +1,5 @@
+@use './layers.scss';
+
 @layer base {
 	:root {
 		--h1: 500 2.25rem var(--font-family);

package/scss/utilities.scss

@@ -1,5 +1,6 @@
 @use 'sass:color';
 @use 'sass:map';
+@use './layers.scss';
 @use './display.scss';
 @use './theme.scss' as theme;
 

package/scss/variables.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use './layers.scss';
 @use './theme.scss' as theme;
 
 @mixin _define-color-variables($colors) {