@oardi/css-utils 0.105.0 → 0.107.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.105.0",
+	"version": "0.107.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

@@ -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/components/form.scss

@@ -241,7 +241,7 @@
 				border-color: var(--form-check-input-checked-border-color);
 			}
 
-			&[type='checkbox']:checked::after {
+			&:where([type='checkbox']):checked::after {
 				content: '';
 				position: absolute;
 				inset-inline-start: 0.25rem;
@@ -253,6 +253,23 @@
 				transform: rotate(45deg);
 			}
 
+			&:where([type='checkbox']):indeterminate {
+				background-color: var(--form-check-input-checked-bg-color);
+				border-color: var(--form-check-input-checked-border-color);
+
+				&::after {
+					content: '';
+					position: absolute;
+					inset-inline: 0.1875rem;
+					inset-block-start: calc(50% - 0.0625rem);
+					width: auto;
+					height: 0.125rem;
+					background-color: var(--form-check-input-checked-color);
+					border: 0;
+					transform: none;
+				}
+			}
+
 			&[type='radio'] {
 				border-radius: 9999px;
 			}
@@ -293,6 +310,10 @@
 				background-color: var(--form-check-disabled-bg-color);
 				border-color: var(--form-check-disabled-border-color);
 
+				&:where([type='checkbox']):indeterminate::after {
+					background-color: var(--disabled-text-color);
+				}
+
 				& + .form-label {
 					color: var(--disabled-text-color);
 					cursor: not-allowed;
@@ -306,6 +327,59 @@
 	}
 }
 
+@layer components {
+	@media (forced-colors: active) {
+		.form-check .form-check-input:where([type='checkbox']) {
+			forced-color-adjust: none;
+			background-color: Canvas;
+			border-color: CanvasText;
+
+			&:checked,
+			&:indeterminate {
+				background-color: Highlight;
+				border-color: Highlight;
+			}
+
+			&:checked::after {
+				border-color: HighlightText;
+			}
+
+			&:indeterminate::after {
+				background-color: HighlightText;
+			}
+
+			&:focus-visible,
+			&.is-focus-visible {
+				border-color: Highlight;
+				outline-color: Highlight;
+			}
+
+			&.is-invalid {
+				border-color: LinkText;
+
+				&:focus-visible,
+				&.is-focus-visible {
+					outline-color: Highlight;
+				}
+			}
+
+			&:disabled,
+			&[disabled] {
+				background-color: Canvas;
+				border-color: GrayText;
+
+				&:checked::after {
+					border-color: GrayText;
+				}
+
+				&:indeterminate::after {
+					background-color: GrayText;
+				}
+			}
+		}
+	}
+}
+
 @layer components {
 	.form-label {
 		display: inline-block;

package/scss/display.scss

@@ -11,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/grid.scss

@@ -1,6 +1,6 @@
 @use './layers.scss';
 
-@layer utilities {
+@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;