@oardi/css-utils 0.70.0 → 0.72.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.70.0",
+	"version": "0.72.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/scss/components/button.scss

@@ -148,10 +148,14 @@
 		background-color: transparent;
 		border-color: transparent;
 
-		&:hover,
+		&:hover {
+			color: var(--button-color-hover);
+			background-color: var(--button-highlight);
+		}
+
 		&.is-active,
 		&:active {
-			color: var(--button-color-hover);
+			color: var(--button-color-active);
 			background-color: var(--button-highlight);
 		}
 

package/scss/components/chip.scss

@@ -13,6 +13,7 @@
 		--chip-padding-x: var(--spacer-2);
 		--chip-border-radius: 9999px;
 		--chip-border-width: var(--border-width);
+		--chip-action-size: 1.5rem;
 
 		--chip-highlight: var(--bg-highlight);
 
@@ -55,7 +56,8 @@
 			border-color: var(--chip-highlight);
 		}
 
-		&:has(> i.icon:last-child) {
+		&:has(> i.icon:last-child),
+		&:has(> .chip-action:last-child) {
 			padding-inline-end: 0;
 		}
 
@@ -69,6 +71,32 @@
 				padding: 0;
 			}
 		}
+
+		.chip-action {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			flex-shrink: 0;
+			width: var(--chip-action-size);
+			height: var(--chip-action-size);
+			padding: 0;
+			border: 0;
+			border-radius: var(--chip-border-radius);
+			background-color: transparent;
+			color: inherit;
+			fill: currentColor;
+			line-height: 1;
+
+			&:hover {
+				cursor: pointer;
+			}
+
+			&:focus-visible {
+				outline: var(--focus-outline-width) var(--focus-outline-style)
+					var(--focus-outline-color);
+				outline-offset: var(--focus-offset);
+			}
+		}
 	}
 
 	@each $name, $value in map.get(theme.$theme, colors) {

package/scss/components/expansion-panel.scss

@@ -33,7 +33,7 @@
 
 		--expansion-panel-transition-duration: var(--transition-duration);
 		--expansion-panel-transition-easing: var(--transition-easing);
-		--expansion-panel-content-transition-duration: 0.25s;
+		--expansion-panel-content-transition-duration: var(--transition-duration);
 
 		color: var(--text-color);
 		background-color: var(--expansion-panel-bg-color);

package/scss/components/form.scss

@@ -121,8 +121,9 @@
 		display: block;
 		width: 100%;
 		max-width: 100%;
-		padding: var(--form-select-padding-y) var(--form-select-indicator-padding)
-			var(--form-select-padding-y) var(--form-select-padding-x);
+		padding-block: var(--form-select-padding-y);
+		padding-inline-start: var(--form-select-padding-x);
+		padding-inline-end: var(--form-select-indicator-padding);
 		font-size: var(--form-select-font-size);
 		font-weight: var(--form-select-font-weight);
 		line-height: var(--line-height);
@@ -132,8 +133,8 @@
 			linear-gradient(45deg, transparent 50%, currentColor 50%),
 			linear-gradient(135deg, currentColor 50%, transparent 50%);
 		background-position:
-			calc(100% - 1rem) 50%,
-			calc(100% - 0.75rem) 50%;
+			right 1rem center,
+			right 0.75rem center;
 		background-size:
 			0.25rem 0.25rem,
 			0.25rem 0.25rem;
@@ -142,6 +143,12 @@
 		border-radius: var(--form-select-border-radius);
 		appearance: none;
 
+		&:dir(rtl) {
+			background-position:
+				left 0.75rem center,
+				left 1rem center;
+		}
+
 		transition:
 			color var(--form-select-transition-duration) var(--form-select-transition-easing),
 			background-color var(--form-select-transition-duration)
@@ -251,14 +258,13 @@
 			&[type='radio']:checked::after {
 				content: '';
 				position: absolute;
-				inset-block-start: 50%;
-				inset-inline-start: 50%;
+				inset: 0;
 				width: 0.5rem;
 				height: 0.5rem;
+				margin: auto;
 				background-color: var(--form-check-input-checked-color);
 				border: 0;
 				border-radius: 9999px;
-				transform: translate(-50%, -50%);
 			}
 
 			&:focus-visible,
@@ -285,7 +291,6 @@
 				background-color: var(--form-check-disabled-bg-color);
 				border-color: var(--form-check-disabled-border-color);
 
-				& + .form-label,
 				& + .form-label {
 					color: var(--disabled-text-color);
 					cursor: not-allowed;
@@ -453,7 +458,6 @@
 					background-color: var(--form-switch-disabled-thumb-bg-color);
 				}
 
-				& + .form-label,
 				& + .form-label {
 					color: var(--disabled-text-color);
 					cursor: not-allowed;

package/scss/components/icon-button.scss

@@ -108,7 +108,6 @@
 
 		&:focus-visible,
 		&.is-focus-visible {
-			outline-color: rgba(var(--icon-button-color-rgb), 0.5);
 			outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
 				rgba(var(--icon-button-color-rgb), 0.5);
 		}
@@ -119,16 +118,21 @@
 		background-color: transparent;
 		border-color: transparent;
 
-		&:hover,
-		&:active {
+		&:hover {
 			color: var(--icon-button-color-hover);
 			background-color: var(--icon-button-highlight);
 			border-color: transparent;
 		}
 
+		&:active,
+		&.is-active {
+			color: var(--icon-button-color-active);
+			background-color: var(--icon-button-highlight);
+			border-color: transparent;
+		}
+
 		&:focus-visible,
 		&.is-focus-visible {
-			outline-color: rgba(var(--icon-button-color-rgb), 0.5);
 			outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
 				rgba(var(--icon-button-color-rgb), 0.5);
 			background-color: var(--icon-button-highlight);
@@ -155,7 +159,6 @@
 
 		&:focus-visible,
 		&.is-focus-visible {
-			outline-color: rgba(var(--icon-button-color-rgb), 0.5);
 			outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
 				rgba(var(--icon-button-color-rgb), 0.5);
 		}

package/scss/components/timeline.scss

@@ -44,6 +44,10 @@
 			transform: translateX(-50%);
 		}
 
+		&:dir(rtl)::before {
+			transform: translateX(50%);
+		}
+
 		&:first-child::before {
 			inset-block-start: var(--timeline-dot-center-y);
 		}

package/scss/reboot.scss

@@ -90,6 +90,8 @@
 	[type='submit'],
 	button {
 		-webkit-appearance: button;
+		// Kept for the established cross-browser button normalization.
+		// stylelint-disable-next-line declaration-property-value-keyword-no-deprecated
 		appearance: button;
 	}
 
@@ -126,12 +128,6 @@
 	}
 
 	ul {
-		padding-left: 1rem;
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		:root {
-			--transition-duration: 0ms;
-		}
+		padding-inline-start: 1rem;
 	}
 }

package/scss/variables.scss

@@ -127,4 +127,11 @@
 		--disabled-bg-color: var(--gray-750);
 		--disabled-border-color: var(--gray-700);
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:root {
+			--transition-duration-fast: 0ms;
+			--transition-duration: 0ms;
+		}
+	}
 }