@oardi/css-utils 0.63.0 → 0.64.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.63.0",
+	"version": "0.64.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/badge.scss

@@ -4,7 +4,7 @@
 		--badge-padding-x: var(--spacer-2);
 		--badge-border-radius: 9999px;
 		--badge-font-size: var(--font-size-xs);
-		--badge-font-weight: 600;
+		--badge-font-weight: 400;
 		--badge-bg-color: var(--bg-highlight);
 		--badge-color: var(--text-color);
 

package/scss/components/form.scss

@@ -46,7 +46,8 @@
 			border-color var(--form-control-transition-duration) var(--form-control-transition-easing),
 			outline-offset var(--form-control-transition-duration) var(--form-control-transition-easing);
 
-		&:focus {
+		&:focus,
+		&.is-focus-visible {
 			background-color: var(--form-control-bg-color);
 			border-color: var(--form-control-focus-border-color);
 			outline: var(--form-control-focus-outline-width) var(--form-control-focus-outline-style)
@@ -55,11 +56,12 @@
 		}
 
 		&.is-invalid {
-			color: var(--error);
+			// color: var(--error);
 			border-color: var(--error);
 			padding-inline-end: calc(1.5em + var(--form-control-padding-x));
 
-			&:focus {
+			&:focus,
+			&.is-focus-visible {
 				outline: var(--focus-outline-error);
 				outline-offset: var(--form-control-focus-outline-offset);
 			}
@@ -69,7 +71,6 @@
 		&[disabled] {
 			opacity: 1;
 			cursor: not-allowed;
-			pointer-events: none;
 			box-shadow: none;
 			outline: 0;
 			color: var(--form-control-disabled-text-color);
@@ -145,7 +146,8 @@
 			border-color var(--form-select-transition-duration) var(--form-select-transition-easing),
 			outline-offset var(--form-select-transition-duration) var(--form-select-transition-easing);
 
-		&:focus {
+		&:focus,
+		&.is-focus-visible {
 			border-color: var(--form-select-focus-border-color);
 			outline: var(--form-select-focus-outline-width) var(--form-select-focus-outline-style)
 				var(--form-select-focus-outline-color);
@@ -156,7 +158,8 @@
 			color: var(--error);
 			border-color: var(--error);
 
-			&:focus {
+			&:focus,
+			&.is-focus-visible {
 				outline: var(--focus-outline-error);
 				outline-offset: var(--form-select-focus-outline-offset);
 			}
@@ -166,7 +169,6 @@
 		&[disabled] {
 			opacity: 1;
 			cursor: not-allowed;
-			pointer-events: none;
 			box-shadow: none;
 			outline: 0;
 			color: var(--form-select-disabled-text-color);
@@ -202,6 +204,7 @@
 		gap: var(--form-check-gap);
 
 		.form-check-input {
+			margin: 0;
 			position: relative;
 			flex-shrink: 0;
 			width: var(--form-check-input-size);
@@ -273,6 +276,12 @@
 				cursor: not-allowed;
 				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;
+				}
 			}
 		}
 
@@ -423,6 +432,12 @@
 				&::after {
 					background-color: var(--form-switch-disabled-thumb-bg-color);
 				}
+
+				& + .form-label,
+				& + .form-label {
+					color: var(--disabled-text-color);
+					cursor: not-allowed;
+				}
 			}
 		}
 

package/scss/components/timeline.scss

@@ -0,0 +1,76 @@
+@layer components {
+	.timeline {
+		--timeline-line-color: var(--border-color);
+		--timeline-line-width: var(--border-width);
+
+		--timeline-dot-size: 0.75rem;
+		--timeline-dot-offset-y: var(--spacer-3);
+		--timeline-dot-center-y: calc(var(--timeline-dot-offset-y) + (var(--timeline-dot-size) / 2));
+
+		--timeline-dot-color: var(--border-color);
+		--timeline-dot-active-color: var(--primary);
+		--timeline-dot-ring-color: var(--bg-body);
+		--timeline-dot-ring-size: 0.25rem;
+
+		--timeline-gap: var(--spacer-3);
+		--timeline-item-padding-bottom: var(--spacer-4);
+
+		display: flex;
+		flex-direction: column;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.timeline-item {
+		--timeline-item-line-color: var(--timeline-line-color);
+
+		position: relative;
+		display: grid;
+		grid-template-columns: var(--timeline-dot-size) minmax(0, 1fr);
+		gap: var(--timeline-gap);
+		padding-bottom: var(--timeline-item-padding-bottom);
+
+		&::before {
+			content: '';
+			position: absolute;
+			inset-block-start: 0;
+			inset-block-end: 0;
+			inset-inline-start: calc(var(--timeline-dot-size) / 2);
+			width: var(--timeline-line-width);
+			background-color: var(--timeline-item-line-color);
+			transform: translateX(-50%);
+		}
+
+		&:first-child::before {
+			inset-block-start: var(--timeline-dot-center-y);
+		}
+
+		&:last-child {
+			padding-bottom: 0;
+
+			&::before {
+				inset-block-end: calc(100% - var(--timeline-dot-center-y));
+			}
+		}
+
+		&:only-child::before {
+			display: none;
+		}
+
+		&.is-active {
+			--timeline-dot-color: var(--timeline-dot-active-color);
+		}
+	}
+
+	.timeline-dot {
+		position: relative;
+		z-index: 1;
+		width: var(--timeline-dot-size);
+		height: var(--timeline-dot-size);
+		margin-top: var(--timeline-dot-offset-y);
+		border-radius: 9999px;
+		background-color: var(--timeline-dot-color);
+		box-shadow: 0 0 0 var(--timeline-dot-ring-size) var(--timeline-dot-ring-color);
+	}
+}

package/scss/index.scss

@@ -40,5 +40,6 @@
 @forward './components/pagination.scss';
 @forward './components/table.scss';
 @forward './components/tabs.scss';
+@forward './components/timeline.scss';
 @forward './components/toast.scss';
 @forward './components/tooltip.scss';

package/scss/typography.scss

@@ -99,7 +99,7 @@
 			text-decoration: underline;
 		}
 
-		&:focus {
+		&:focus-visible {
 			outline: var(--link-focus-outline-width) var(--link-focus-outline-style) var(--link-focus-outline-color);
 			outline-offset: var(--focus-offset);
 		}