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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.19",
+  "version": "0.1.2-beta.20",
   "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/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,7 @@ $vv-accordion: (
 			will-change: background-color,
 			transition: background-color 0.3s ease-in-out,
 			font-size: var(--text-sm),
+			border-radius: var(--rounded-lg),
 			pseudo: (
 				before: (
 					display: block,
@@ -46,6 +61,11 @@ $vv-accordion: (
 						display: none,
 					),
 			),
+			state: (
+				hover: (
+					background-color: var(--color-surface-1),
+				),
+			),
 		),
 		content: (
 			_alias: '> summary + *',
@@ -54,19 +74,6 @@ $vv-accordion: (
 				var(--accordion-padding-right),
 		),
 	),
-	state: (
-		open: (
-			element: (
-				summary: (
-					pseudo: (
-						before: (
-							transform: rotate(0),
-						),
-					),
-				),
-			),
-		),
-	),
 	modifier: (
 		marker-right: (
 			element: (
@@ -107,20 +114,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-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-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;