@volverjs/style 0.1.2-beta.20 → 0.1.2-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.20",
+  "version": "0.1.2-beta.21",
   "description": "@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui and static webpages as well.",
   "main": "dist/style.css",
   "style": "dist/style.css",

package/src/settings/_input.scss

@@ -11,6 +11,7 @@ $input: (
 	gap: var(--spacing-md),
 	line-height: var(--leading-normal),
 	font-size: var(--text-16),
+	min-height: var(--spacing-50),
 	label: (
 		color: var(--color-word-3),
 		display: block,

package/src/settings/components/_vv-accordion.scss

@@ -38,6 +38,7 @@ $vv-accordion: (
 			transition: background-color 0.3s ease-in-out,
 			font-size: var(--text-sm),
 			border-radius: var(--rounded-lg),
+			-webkit-tap-highlight-color: transparent,
 			pseudo: (
 				before: (
 					display: block,

package/src/settings/components/_vv-alert.scss

@@ -3,7 +3,7 @@ $vv-alert: (
 	min-width: 0,
 	overflow: hidden,
 	align-items: center,
-	padding: var(--spacing-md),
+	padding: var(--spacing-sm) var(--spacing-md),
 	background-color: var(--color-surface-2),
 	border-color: var(--color-gray-lighten-4),
 	border-width: var(--border),
@@ -32,12 +32,12 @@ $vv-alert: (
 		title: (
 			display: flex,
 			margin-right: 1ch,
-			line-height: var(--leading-none),
+			line-height: var(--leading-normal),
 			font-weight: var(--font-bold),
 			color: var(--color-word),
 		),
 		content: (
-			line-height: var(--leading-none),
+			line-height: var(--leading-normal),
 			color: var(--color-word-1),
 			text-overflow: ellipsis,
 			white-space: nowrap,

package/src/settings/components/_vv-avatar.scss

@@ -44,5 +44,12 @@ $vv-avatar: (
 			transform: translate(50%, -50%),
 			box-shadow: var(--shadow-sm),
 		),
+		image: (
+			_alias: '> img',
+			width: 100%,
+			height: 100%,
+			border-radius: inherit,
+			object-fit: inherit,
+		),
 	),
 ) !default;

package/src/settings/components/_vv-breadcrumb.scss

@@ -1,29 +1,37 @@
 $vv-breadcrumb: (
+	position: relative,
+	pseudo: (
+		after: (
+			position: absolute,
+			top: 0,
+			bottom: 0,
+			right: 0,
+			display: block,
+			width: var(--spacing-sm),
+			background:
+				linear-gradient(45deg, transparent, var(--color-surface)),
+		),
+	),
 	element: (
 		list: (
 			_alias: '> ol',
 			position: relative,
+			overflow: auto hidden,
+			overscroll-behavior-x: contain,
+			scroll-behavior: smooth,
+			scroll-snap-type: x mandatory,
+			scrollbar-width: none,
 			display: flex,
 			flex-wrap: no-wrap,
 			list-style: none,
-			overflow: auto,
 			padding: 0,
 			background: var(--color-surface),
+			white-space: nowrap,
 			pseudo: (
-				after: (
-					position: absolute,
-					top: 0,
-					bottom: 0,
-					right: 0,
-					display: block,
-					width: var(--spacing-sm),
-					background:
-						linear-gradient(
-							45deg,
-							transparent,
-							var(--color-surface)
-						),
-				),
+				-webkit-scrollbar: (
+						width: 0,
+						height: 0,
+					),
 			),
 		),
 		item: (

package/src/settings/components/_vv-button-group.scss

@@ -1,6 +1,10 @@
 $vv-button-group: (
 	display: inline-flex,
+	flex-wrap: wrap,
+	min-width: 0,
+	max-width: 100%,
 	align-items: center,
+	justify-content: center,
 	gap: var(--spacing-4),
 	modifier: (
 		block: (

package/src/settings/components/_vv-input-checkbox-group.scss

@@ -2,7 +2,6 @@ $vv-input-checkbox-group: (
 	display: var(--input-display),
 	flex: var(--input-flex),
 	flex-direction: var(--input-flex-direction),
-	min-width: max-content,
 	element: (
 		legend: (
 			_alias: '> legend',

package/src/settings/components/_vv-input-text.scss

@@ -65,7 +65,7 @@ $vv-input-text: (
 			color: var(--input-color),
 			[padding]: var(--input-padding-top) var(--input-padding-right)
 				var(--input-padding-bottom) var(--input-padding-left),
-			min-height: var(--spacing-50),
+			min-height: var(--input-min-height),
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
@@ -80,15 +80,7 @@ $vv-input-text: (
 				search-cancel-button: (
 					display: none,
 				),
-				color-swatch-wrapper: (
-					display: block,
-					border: none,
-					height: 100%,
-					padding: 0,
-				),
 				color-swatch: (
-					display: block,
-					border: none,
 					height: var(--spacing-20),
 					border-radius: var(--spacing-4),
 				),
@@ -256,6 +248,9 @@ $vv-input-text: (
 				label: (
 					position: absolute,
 					z-index: 1,
+					display: flex,
+					align-items: center,
+					min-height: var(--input-min-height),
 					pointer-events: none,
 					font-size: inherit,
 					[padding-top]: var(--input-padding-top),

package/src/settings/components/_vv-select.scss

@@ -84,6 +84,14 @@ $vv-select: (
 					cursor: not-allowed,
 				),
 			),
+			pseudo: (
+				marker: (
+					display: none,
+				),
+				-webkit-details-marker: (
+						display: none,
+					),
+			),
 		),
 		icon: (
 			_alias: ':where(svg, [data-icon])',

package/src/utilities/sizing.scss

@@ -2,26 +2,16 @@
 @import '../context';
 
 // width / height / max-width / max-height
-@each $dimension,
-	$attr in(w: width, h: height, max-w: max-width, max-h: max-height)
+@each $class,
+	$attribute in(w: width, h: height, max-w: max-width, max-h: max-height)
 {
-	@each $size, $value in map.merge($spacing, $spacing-dynamic) {
-		// check if value is not a map (spacing-dynamic)
-		$var: var(--spacing-#{$size});
-		@if type-of($value) != 'map' {
-			$var: var(--spacing-#{$size}, #{$value});
-		}
-
-		%#{$dimension}-#{$size} {
-			#{$attr}: #{$var};
-		}
-		@include wrap-with-where(
-			$selector: '.#{$dimension}-#{$size}',
-			$enabled: $zero-specificity-for-utilities
-		) {
-			@extend %#{$dimension}-#{$size};
-		}
-	}
+	@include spread-map-into-utilities(
+		$map: map.merge($spacing, $spacing-dynamic),
+		$class: $class,
+		$attribute: $attribute,
+		$bps: $breakpoints,
+		$prop: spacing
+	);
 }
 
 @include spread-map-into-utilities(