@oardi/css-utils 0.108.0 → 0.110.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.108.0",
+	"version": "0.110.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/input-group.scss

@@ -0,0 +1,194 @@
+@use '../layers.scss';
+
+@layer components {
+	.input-group {
+		--input-group-bg-color: var(--bg-surface);
+		--input-group-border-width: var(--border-width);
+		--input-group-border-color: var(--control-border-color);
+		--input-group-border-radius: var(--border-radius-lg);
+		--input-group-box-shadow: var(--shadow-sm);
+		--input-group-color: var(--text-color);
+		--input-group-addon-bg-color: var(--bg-highlight);
+		--input-group-addon-color: var(--text-muted);
+		--input-group-inset: var(--spacer-1);
+		--input-group-gap: var(--spacer-1);
+		--input-group-item-border-radius: calc(
+			var(--input-group-border-radius) - var(--input-group-inset)
+		);
+		--input-group-padding-y: var(--spacer-1);
+		--input-group-padding-x: var(--spacer-3);
+		--input-group-font-size: var(--font-size);
+		--input-group-control-min-size: 8rem;
+		--input-group-focus-border-color: var(--primary-hover);
+		--input-group-focus-outline-width: var(--focus-outline-width);
+		--input-group-focus-outline-style: var(--focus-outline-style);
+		--input-group-focus-outline-color: var(--focus-outline-color);
+		--input-group-focus-outline-offset: var(--focus-offset);
+		--input-group-invalid-color: var(--error);
+		--input-group-disabled-text-color: var(--disabled-text-color);
+		--input-group-disabled-bg-color: var(--disabled-bg-color);
+		--input-group-disabled-border-color: var(--disabled-border-color);
+		--input-group-transition-duration: var(--transition-duration);
+		--input-group-transition-easing: var(--transition-easing);
+
+		display: flex;
+		flex-wrap: wrap;
+		align-items: stretch;
+		gap: var(--input-group-gap);
+		max-inline-size: 100%;
+		padding: var(--input-group-inset);
+		color: var(--input-group-color);
+		background-color: var(--input-group-bg-color);
+		border: var(--input-group-border-width) solid var(--input-group-border-color);
+		border-radius: var(--input-group-border-radius);
+		box-shadow: var(--input-group-box-shadow);
+		overflow: clip;
+
+		transition:
+			background-color var(--input-group-transition-duration)
+				var(--input-group-transition-easing),
+			border-color var(--input-group-transition-duration) var(--input-group-transition-easing),
+			box-shadow var(--input-group-transition-duration) var(--input-group-transition-easing),
+			outline-offset var(--input-group-transition-duration)
+				var(--input-group-transition-easing);
+
+		> :where(.form-control, .form-select, .input-group-text, .btn, .icon-btn) {
+			margin: 0;
+			border: 0;
+			border-radius: var(--input-group-item-border-radius);
+		}
+
+		> :where(.form-control, .form-select) {
+			flex: 1 1 var(--input-group-control-min-size);
+			inline-size: 1%;
+			min-inline-size: min(100%, var(--input-group-control-min-size));
+			--form-control-bg-color: transparent;
+			--form-control-padding-y: var(--input-group-padding-y);
+			--form-control-padding-x: var(--input-group-padding-x);
+			--form-control-font-size: var(--input-group-font-size);
+			--form-select-bg-color: transparent;
+			--form-select-padding-y: var(--input-group-padding-y);
+			--form-select-padding-x: var(--input-group-padding-x);
+			--form-select-font-size: var(--input-group-font-size);
+		}
+
+		> :is(.form-control, .form-select):is(:focus, :focus-visible, .is-focus-visible) {
+			outline: 0;
+			outline-offset: 0;
+		}
+
+		> .input-group-text {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			flex: 0 0 auto;
+			min-inline-size: 0;
+			padding: var(--input-group-padding-y) var(--input-group-padding-x);
+			color: var(--input-group-addon-color);
+			background-color: var(--input-group-addon-bg-color);
+			font-size: var(--input-group-font-size);
+			line-height: var(--line-height);
+			white-space: nowrap;
+
+			> svg {
+				inline-size: 1em;
+				block-size: 1em;
+				fill: currentColor;
+			}
+		}
+
+		> :where(.btn, .icon-btn) {
+			flex: 0 0 auto;
+			--button-border-radius: var(--input-group-item-border-radius);
+			--button-padding-y: var(--input-group-padding-y);
+			--button-padding-x: var(--input-group-padding-x);
+			--button-font-size: var(--input-group-font-size);
+			--icon-button-border-radius: var(--input-group-item-border-radius);
+			--icon-button-size: auto;
+			--icon-button-padding: var(--input-group-padding-y);
+		}
+
+		&:focus-within,
+		&:has(> .is-focus-visible) {
+			border-color: var(--input-group-focus-border-color);
+			outline: var(--input-group-focus-outline-width) var(--input-group-focus-outline-style)
+				var(--input-group-focus-outline-color);
+			outline-offset: var(--input-group-focus-outline-offset);
+		}
+
+		&:has(> :is(.form-control, .form-select).is-invalid),
+		&:has(> :is(.form-control, .form-select)[aria-invalid='true']) {
+			border-color: var(--input-group-invalid-color);
+
+			&:focus-within,
+			&:has(> .is-focus-visible) {
+				outline-color: var(--input-group-invalid-color);
+			}
+		}
+
+		&:has(> .form-control:disabled),
+		&:has(> .form-select:disabled) {
+			color: var(--input-group-disabled-text-color);
+			background-color: var(--input-group-disabled-bg-color);
+			border-color: var(--input-group-disabled-border-color);
+			box-shadow: none;
+
+			> .input-group-text {
+				color: var(--input-group-disabled-text-color);
+				background-color: var(--input-group-disabled-bg-color);
+			}
+		}
+	}
+
+	.was-validated .input-group:has(> :is(.form-control, .form-select):invalid) {
+		border-color: var(--input-group-invalid-color);
+
+		&:focus-within {
+			outline-color: var(--input-group-invalid-color);
+		}
+	}
+
+	.input-group:has(> :is(.form-control, .form-select).is-invalid) + .invalid-feedback,
+	.input-group:has(> :is(.form-control, .form-select)[aria-invalid='true']) + .invalid-feedback,
+	.was-validated
+		.input-group:has(> :is(.form-control, .form-select):invalid)
+		+ .invalid-feedback {
+		display: block;
+	}
+
+	.input-group-sm {
+		--input-group-padding-y: var(--spacer-0);
+		--input-group-padding-x: var(--spacer-2);
+		--input-group-font-size: var(--font-size-sm);
+		--input-group-control-min-size: 7rem;
+	}
+
+	.input-group-lg {
+		--input-group-padding-y: var(--spacer-2);
+		--input-group-padding-x: var(--spacer-4);
+		--input-group-font-size: var(--font-size-lg);
+		--input-group-control-min-size: 10rem;
+	}
+
+	@media (forced-colors: active) {
+		.input-group {
+			border-color: CanvasText;
+
+			&:focus-within,
+			&:has(> .is-focus-visible) {
+				border-color: Highlight;
+				outline-color: Highlight;
+			}
+
+			&:has(> :is(.form-control, .form-select).is-invalid),
+			&:has(> :is(.form-control, .form-select)[aria-invalid='true']) {
+				border-color: LinkText;
+			}
+
+			&:has(> .form-control:disabled),
+			&:has(> .form-select:disabled) {
+				border-color: GrayText;
+			}
+		}
+	}
+}

package/scss/components/skeleton.scss

@@ -0,0 +1,157 @@
+@use '../layers.scss';
+
+@layer components {
+	.skeleton {
+		--skeleton-width: 100%;
+		--skeleton-height: 1rem;
+		--skeleton-size: 2.5rem;
+		--skeleton-font-size: var(--font-size);
+		--skeleton-line-height: var(--line-height-sm);
+		--skeleton-control-height: 2.5rem;
+		--skeleton-aspect-ratio: auto;
+		--skeleton-border-radius: var(--border-radius-sm);
+		--skeleton-base-color: color-mix(in srgb, var(--text-color) 14%, var(--bg-surface));
+		--skeleton-highlight-color: color-mix(in srgb, var(--text-color) 5%, var(--bg-surface));
+		--skeleton-animation-duration: 1.6s;
+		--skeleton-animation-easing: ease-in-out;
+
+		position: relative;
+		display: block;
+		flex-shrink: 1;
+		inline-size: var(--skeleton-width);
+		max-inline-size: 100%;
+		block-size: var(--skeleton-height);
+		min-inline-size: 0;
+		overflow: hidden;
+		aspect-ratio: var(--skeleton-aspect-ratio);
+		border-radius: var(--skeleton-border-radius);
+		background-color: var(--skeleton-base-color);
+		box-sizing: border-box;
+		pointer-events: none;
+		user-select: none;
+	}
+
+	.skeleton::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(
+			100deg,
+			transparent 20%,
+			var(--skeleton-highlight-color) 50%,
+			transparent 80%
+		);
+		transform: translateX(-100%);
+		animation: skeleton-shimmer var(--skeleton-animation-duration)
+			var(--skeleton-animation-easing) infinite;
+	}
+
+	.skeleton-headline {
+		--skeleton-width: 65%;
+		--skeleton-height: calc(var(--skeleton-font-size) * var(--skeleton-line-height));
+		--skeleton-font-size: var(--font-size-xxl);
+	}
+
+	.skeleton-text {
+		--skeleton-height: calc(var(--skeleton-font-size) * var(--skeleton-line-height));
+	}
+
+	.skeleton-avatar {
+		--skeleton-width: var(--skeleton-size);
+		--skeleton-height: var(--skeleton-size);
+		--skeleton-border-radius: 50%;
+	}
+
+	.skeleton-image {
+		--skeleton-height: auto;
+		--skeleton-aspect-ratio: 16 / 9;
+		--skeleton-border-radius: var(--border-radius);
+	}
+
+	.skeleton-pill {
+		--skeleton-width: 7rem;
+		--skeleton-height: var(--skeleton-control-height);
+		--skeleton-border-radius: 9999px;
+	}
+
+	.skeleton-square {
+		--skeleton-width: var(--skeleton-size);
+		--skeleton-height: auto;
+		--skeleton-aspect-ratio: 1;
+		--skeleton-border-radius: var(--border-radius);
+	}
+
+	.skeleton-sm {
+		--skeleton-size: 2rem;
+		--skeleton-font-size: var(--font-size-sm);
+		--skeleton-control-height: 2rem;
+	}
+
+	.skeleton-md {
+		--skeleton-size: 2.5rem;
+		--skeleton-font-size: var(--font-size);
+		--skeleton-control-height: 2.5rem;
+	}
+
+	.skeleton-lg {
+		--skeleton-size: 3rem;
+		--skeleton-font-size: var(--font-size-lg);
+		--skeleton-control-height: 3rem;
+	}
+
+	.skeleton-aspect-square {
+		--skeleton-height: auto;
+		--skeleton-aspect-ratio: 1;
+	}
+
+	.skeleton-aspect-video {
+		--skeleton-height: auto;
+		--skeleton-aspect-ratio: 16 / 9;
+	}
+
+	.skeleton-lines {
+		--skeleton-width: 100%;
+		--skeleton-line-gap: var(--spacer-2);
+		--skeleton-last-line-width: 65%;
+
+		display: grid;
+		gap: var(--skeleton-line-gap);
+		inline-size: var(--skeleton-width);
+		max-inline-size: 100%;
+		min-inline-size: 0;
+	}
+
+	.skeleton-lines > .skeleton-text {
+		--skeleton-width: 100%;
+	}
+
+	.skeleton-lines > .skeleton-text:last-child {
+		--skeleton-width: var(--skeleton-last-line-width);
+	}
+
+	@keyframes skeleton-shimmer {
+		to {
+			transform: translateX(100%);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.skeleton::after {
+			display: none;
+			animation: none;
+		}
+	}
+
+	@media (forced-colors: active) {
+		.skeleton {
+			border: var(--border-width) solid CanvasText;
+			background-color: GrayText;
+			forced-color-adjust: none;
+		}
+
+		.skeleton::after {
+			display: none;
+			animation: none;
+		}
+	}
+}

package/scss/index.scss

@@ -36,6 +36,7 @@
 @forward './components/expansion-panel.scss';
 @forward './components/form.scss';
 @forward './components/icon-button.scss';
+@forward './components/input-group.scss';
 @forward './components/list.scss';
 @forward './components/menu.scss';
 @forward './components/modal.scss';
@@ -43,6 +44,7 @@
 @forward './components/overlay.scss';
 @forward './components/pagination.scss';
 @forward './components/range-slider.scss';
+@forward './components/skeleton.scss';
 @forward './components/stepper.scss';
 @forward './components/table.scss';
 @forward './components/tabs.scss';