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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.19",
+  "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",
@@ -59,6 +59,8 @@
     "./scss/components/vv-progress": "./src/components/vv-progress.scss",
     "./components/vv-select": "./dist/components/vv-select.css",
     "./scss/components/vv-select": "./src/components/vv-select.scss",
+    "./components/vv-tab": "./dist/components/vv-tab.css",
+    "./scss/components/vv-tab": "./src/components/vv-tab.scss",
     "./components/vv-table": "./dist/components/vv-table.css",
     "./scss/components/vv-table": "./src/components/vv-table.scss",
     "./components/vv-text": "./dist/components/vv-text.css",

package/src/_config.scss

@@ -30,6 +30,7 @@ $components-names: (
 	vv-nav: $components-prefix + -nav,
 	vv-progress: $components-prefix + -progress,
 	vv-select: $components-prefix + -select,
+	vv-tab: $components-prefix + -tab,
 	vv-table: $components-prefix + -table,
 	vv-text: $components-prefix + -text,
 	vv-textarea: $components-prefix + -textarea,

package/src/components/index.scss

@@ -16,6 +16,7 @@
 @import 'vv-nav';
 @import 'vv-progress';
 @import 'vv-select';
+@import 'vv-tab';
 @import 'vv-table';
 @import 'vv-text';
 @import 'vv-textarea';

package/src/components/vv-tab.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@import '../context';
+
+$component-name: map.get($components-names, vv-tab);
+$component-map: $vv-tab;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-compoenents
+);

package/src/components/vv-tooltip.scss

@@ -24,7 +24,9 @@ $component-selector: '.#{ $component-name}';
 	$enabled: $zero-specificity-for-compoenents
 ) {
 	&:hover,
-	&:focus-visible {
+	&:focus-visible,
+	&.hover,
+	&.focus-visible {
 		@extend %vv-tooltip--visible !optional;
 	}
 }

package/src/settings/_index.scss

@@ -33,6 +33,7 @@
 @import 'components/vv-nav';
 @import 'components/vv-progress';
 @import 'components/vv-select';
+@import 'components/vv-tab';
 @import 'components/vv-table';
 @import 'components/vv-text';
 @import 'components/vv-textarea';

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

@@ -1,11 +1,25 @@
 $vv-accordion: (
 	--accordion-marker-size:
 		calc(var(--spacing-sm) + var(--leading-normal) * 1em),
-	--accordion-padding-top: 0px,
-	--accordion-padding-right: 0px,
-	--accordion-padding-bottom: 0px,
-	--accordion-padding-left: 0px,
+	--accordion-padding-top: var(--spacing-xs),
+	--accordion-padding-right: var(--spacing-xs),
+	--accordion-padding-bottom: var(--spacing-xs),
+	--accordion-padding-left: var(--spacing-xs),
 	overflow: hidden,
+	state: (
+		open: (
+			element: (
+				summary: (
+					background-color: var(--color-surface-2),
+					pseudo: (
+						before: (
+							transform: rotate(0),
+						),
+					),
+				),
+			),
+		),
+	),
 	element: (
 		summary: (
 			_alias: '> summary',
@@ -23,6 +37,8 @@ $vv-accordion: (
 			will-change: background-color,
 			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,
@@ -46,6 +62,11 @@ $vv-accordion: (
 						display: none,
 					),
 			),
+			state: (
+				hover: (
+					background-color: var(--color-surface-1),
+				),
+			),
 		),
 		content: (
 			_alias: '> summary + *',
@@ -54,19 +75,6 @@ $vv-accordion: (
 				var(--accordion-padding-right),
 		),
 	),
-	state: (
-		open: (
-			element: (
-				summary: (
-					pseudo: (
-						before: (
-							transform: rotate(0),
-						),
-					),
-				),
-			),
-		),
-	),
 	modifier: (
 		marker-right: (
 			element: (
@@ -107,20 +115,12 @@ $vv-accordion: (
 			--accordion-padding-left: var(--spacing-xs),
 			border: var(--border) solid var(--color-surface-4),
 			border-radius: var(--rounded-lg),
-			element: (
-				summary: (
-					state: (
-						hover: (
-							background-color: var(--color-surface-1),
-						),
-					),
-				),
-			),
 			state: (
 				open: (
 					element: (
 						summary: (
-							background-color: var(--color-surface-2),
+							border-bottom-right-radius: 0,
+							border-bottom-left-radius: 0,
 						),
 					),
 				),

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-nav.scss

@@ -117,10 +117,27 @@ $vv-nav: (
 						current: (
 							color: var(--color-brand),
 							border-color: var(--color-brand),
+							background-color:
+								hsla(
+									var(--color-brand-hue)
+										var(--color-brand-saturation)
+										var(--color-brand-lightness) / 5%
+								),
 						),
 					),
 				),
 			),
 		),
+		full: (
+			element: (
+				item: (
+					flex: 1 1 0%,
+				),
+				item-label: (
+					display: block,
+					text-align: center,
+				),
+			),
+		),
 	),
 ) !default;

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/settings/components/_vv-tab.scss

@@ -0,0 +1,16 @@
+$vv-tab: (
+	display: flex,
+	flex-direction: column,
+	element: (
+		panel: (
+			display: none,
+			padding: var(--spacing-lg),
+			line-height: var(--leading-normal),
+			state: (
+				target: (
+					display: block,
+				),
+			),
+		),
+	),
+) !default;

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(