@volverjs/style 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "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",
@@ -23,6 +23,8 @@
     "./scss/preflight": "./src/_preflight.scss",
     "./components": "./dist/components.css",
     "./scss/components": "./src/components/index.scss",
+    "./components/vv-accordion-group": "./dist/components/vv-accordion-group.css",
+    "./scss/components/vv-accordion-group": "./src/components/vv-accordion-group.scss",
     "./components/vv-accordion": "./dist/components/vv-accordion.css",
     "./scss/components/vv-accordion": "./src/components/vv-accordion.scss",
     "./components/vv-alert": "./dist/components/vv-alert.css",
@@ -135,6 +137,10 @@
     "./scss/utilities/sizing": "./src/utilities/sizing.scss",
     "./utilities/spacing": "./dist/utilities/spacing.css",
     "./scss/utilities/spacing": "./src/utilities/spacing.scss",
+    "./utilities/tables": "./dist/utilities/tables.css",
+    "./scss/utilities/tables": "./src/utilities/tables.scss",
+    "./utilities/transforms": "./dist/utilities/transforms.css",
+    "./scss/utilities/transforms": "./src/utilities/transforms.scss",
     "./utilities/transitions": "./dist/utilities/transitions.css",
     "./scss/utilities/transitions": "./src/utilities/transitions.scss",
     "./utilities/typography": "./dist/utilities/typography.css",
@@ -161,14 +167,14 @@
     "@vitejs/plugin-vue": "^4.0.0",
     "@vueuse/core": "^9.10.0",
     "@vueuse/head": "^1.0.22",
-    "eslint": "^8.31.0",
+    "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-vue": "^9.8.0",
-    "glob": "^8.0.3",
+    "eslint-plugin-vue": "^9.9.0",
+    "glob": "^8.1.0",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^8.6.6",
     "markdown-it-prism": "^2.3.0",
-    "postcss": "^8.4.20",
+    "postcss": "^8.4.21",
     "postcss-html": "^1.5.0",
     "postcss-preset-env": "^7.8.3",
     "prism-themes": "^1.9.0",
@@ -191,7 +197,7 @@
     "vite-plugin-handlebars": "^1.6.0",
     "vite-plugin-markdown": "^2.1.0",
     "vite-plugin-pages": "^0.28.0",
-    "vite-plugin-stylelint": "^4.1.5",
+    "vite-plugin-stylelint": "^4.1.6",
     "vite-plugin-vue-layouts": "^0.7.0",
     "vite-ssg": "^0.22.1",
     "vite-ssg-sitemap": "^0.4.3",

package/src/_config.scss

@@ -12,6 +12,7 @@ $components-prefix: vv !default;
 
 // components names
 $components-names: (
+	vv-accordion-group: $components-prefix + -accordion-group,
 	vv-accordion: $components-prefix + -accordion,
 	vv-alert: $components-prefix + -alert,
 	vv-badge: $components-prefix + -badge,

package/src/components/index.scss

@@ -1,3 +1,4 @@
+@use 'vv-accordion-group';
 @use 'vv-accordion';
 @use 'vv-alert';
 @use 'vv-badge';

package/src/components/vv-accordion-group.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-accordion-group);
+$component-map: $vv-accordion-group;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);

package/src/export.scss

@@ -98,6 +98,14 @@
 		#{'position__' + $index}: $index;
 	}
 
+	// placement
+	@each $key, $value in $placement {
+		$name: meta.inspect($key);
+		$name: str-replace($name, '\\/', '_');
+
+		#{'placement__' + $name}: $value;
+	}
+
 	// visibility
 	@each $key, $value in $visibility {
 		#{'visibility__' + $key}: $value;
@@ -449,6 +457,20 @@
 
 	// #endregion
 
+	// ============================================================== */
+	// #region TABLES
+	// border-collapse
+	@each $key, $value in $border-collapse {
+		#{'border-collapse__' + $key}: $value;
+	}
+
+	// table-layout
+	@each $key, $value in $table-layout {
+		#{'table-layout__' + $key}: $value;
+	}
+
+	// #endregion
+
 	// ============================================================== */
 	// #region TRANSITIONS & ANIMATIONS
 	// transition property
@@ -470,4 +492,31 @@
 	}
 
 	// #endregion
+
+	// ============================================================== */
+	// #region TRANSFORMS
+	// scale
+	@each $key, $value in $scale {
+		#{'scale__' + $key}: $value;
+	}
+
+	// rotate
+	@each $key, $value in $rotate {
+		#{'rotate__' + $key}: $value;
+	}
+
+	// translate
+	@each $key, $value in $translate {
+		$name: meta.inspect($key);
+		$name: str-replace($name, '\\/', '/');
+
+		#{'translate__' + $name}: $value;
+	}
+
+	// transform-origin
+	@each $key, $value in $transform-origin {
+		#{'transform-origin__' + $key}: $value;
+	}
+
+	// #endregion
 }

package/src/props/effects.scss

@@ -2,4 +2,5 @@
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($box-shadow, $prefix: shadow);
+	@include spread-map-into-props($opacity, $prefix: opacity);
 }

package/src/settings/_index.scss

@@ -12,10 +12,13 @@
 @forward 'layout';
 @forward 'sizing';
 @forward 'spacing';
+@forward 'tables';
+@forward 'transforms';
 @forward 'transitions';
 @forward 'typography';
 
 // components
+@forward 'components/vv-accordion-group';
 @forward 'components/vv-accordion';
 @forward 'components/vv-alert';
 @forward 'components/vv-badge';

package/src/settings/_layout.scss

@@ -94,6 +94,18 @@ $overflow: (
 // position
 $position: (static, fixed, absolute, relative, sticky) !default;
 
+// placement
+$placement: (
+	1\/2: 50%,
+	1\/3: 33.3333%,
+	2\/3: 66.6667%,
+	1\/4: 25%,
+	2\/4: 50%,
+	3\/4: 75%,
+	full: 100%,
+	auto: auto
+) !default;
+
 // visibility
 $visibility: (
 	visible: visible,

package/src/settings/_spacing.scss

@@ -4,9 +4,13 @@ $spacing: (
 	px: 1px,
 	1: 0.0625rem,
 	2: 0.125rem,
+	3: 0.1875rem,
 	4: 0.25rem,
+	5: 0.3125rem,
 	6: 0.375rem,
+	7: 0.4375rem,
 	8: 0.5rem,
+	9: 0.5625rem,
 	10: 0.625rem,
 	12: 0.75rem,
 	14: 0.875rem,

package/src/settings/_tables.scss

@@ -0,0 +1,11 @@
+// border-collapse
+$border-collapse: (
+	collapse: collapse,
+	separate: separate,
+) !default;
+
+// table-layout
+$table-layout: (
+	auto: auto,
+	fixed: fixed,
+) !default;

package/src/settings/_transforms.scss

@@ -0,0 +1,50 @@
+// scale
+$scale: (
+	0: 0,
+	50: 0.5,
+	75: 0.75,
+	90: 0.9,
+	95: 0.95,
+	100: 1,
+	105: 1.05,
+	110: 1.1,
+	125: 1.25,
+	150: 1.5,
+) !default;
+
+// rotate
+$rotate: (
+	0: rotate(0deg),
+	1: rotate(1deg),
+	2: rotate(2deg),
+	3: rotate(3deg),
+	6: rotate(6deg),
+	12: rotate(12deg),
+	45: rotate(45deg),
+	90: rotate(90deg),
+	180: rotate(180deg),
+) !default;
+
+// translate
+$translate: (
+	1\/2: 50%,
+	1\/3: 33.3333%,
+	2\/3: 66.6667%,
+	1\/4: 25%,
+	2\/4: 50%,
+	3\/4: 75%,
+	full: 100%
+) !default;
+
+// transform-origin
+$transform-origin: (
+	center: center,
+	top: top,
+	top-right: top right,
+	top-left: top left,
+	bottom: bottom,
+	bottom-right: bottom right,
+	bottom-left: bottom left,
+	right: right,
+	left: left,
+) !default;

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

@@ -0,0 +1,5 @@
+$vv-accordion-group: (
+	display: flex,
+	flex-direction: column,
+	gap: var(--spacing-sm),
+) !default;

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

@@ -19,6 +19,15 @@ $vv-accordion: (
 				),
 			),
 		),
+		disabled: (
+			element: (
+				summary: (
+					cursor: not-allowed,
+					pointer-events: none,
+					opacity: var(--opacity-50),
+				),
+			),
+		),
 	),
 	element: (
 		summary: (

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

@@ -5,15 +5,15 @@ $vv-button: (
 	[line-height]: var(--button-line-height),
 	position: relative,
 	background: var(--color-brand),
-	border-radius: 0.5ch,
+	border-radius: var(--rounded),
 	border-style: solid,
 	border-color: var(--color-brand),
 	color: var(--color-white),
 	font-family: var(--font-sans),
 	font-weight: var(--font-semibold),
 	gap: 1ch,
-	padding-block: 0.75ch,
-	padding-inline: 1.75ch,
+	padding-block: var(--spacing-7),
+	padding-inline: var(--spacing-16),
 	text-shadow: 0 1px 0 var(--color-gray-darken-5),
 	transition: var(--transition-all),
 	will-change: all,
@@ -37,7 +37,7 @@ $vv-button: (
 			border-color: var(--color-brand-darken-2),
 		),
 		disabled: (
-			opacity: 0.5,
+			opacity: var(--opacity-50),
 			cursor: not-allowed,
 		),
 	),
@@ -61,6 +61,13 @@ $vv-button: (
 		),
 	),
 	modifier: (
+		icon-only: (
+			element: (
+				icon: (
+					margin-inline: calc(var(--spacing-9) * -1),
+				),
+			),
+		),
 		primary: (
 			background: var(--color-gray-darken-3),
 			border-color: var(--color-gray-darken-3),
@@ -223,8 +230,8 @@ $vv-button: (
 			color: var(--color-word-1),
 			border-color: var(--color-word-5),
 			font-weight: var(--font-normal),
-			padding-inline: 0.75ch,
-			padding-block: 0.5ch,
+			padding-inline: var(--spacing-6),
+			padding-block: var(--spacing-4),
 			text-shadow: none,
 			state: (
 				focus-visible: (
@@ -258,8 +265,8 @@ $vv-button: (
 			color: var(--color-word-1),
 			border-color: transparent,
 			font-weight: var(--font-normal),
-			padding-inline: 0.75ch,
-			padding-block: 0.5ch,
+			padding-inline: var(--spacing-6),
+			padding-block: var(--spacing-4),
 			text-shadow: none,
 			state: (
 				focus-visible: (
@@ -290,11 +297,6 @@ $vv-button: (
 		),
 		rounded: (
 			border-radius: var(--rounded-full),
-			element: (
-				icon: (
-					margin: 0 -1ch,
-				),
-			),
 		),
 		block: (
 			display: block,

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

@@ -11,7 +11,7 @@ $vv-checkbox: (
 	min-width: var(--input-min-width),
 	state: (
 		disabled: (
-			opacity: 0.3,
+			opacity: var(--opacity-30),
 			cursor: not-allowed,
 		),
 	),
@@ -55,7 +55,7 @@ $vv-checkbox: (
 	),
 	modifier: (
 		readonly: (
-			opacity: 1,
+			opacity: var(--opacity-100),
 			cursor: default,
 			pointer-events: none,
 		),

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

@@ -13,7 +13,7 @@ $vv-dialog: (
 	border: 0,
 	background-color: var(--color-backdrop),
 	backdrop-filter: var(--blur-sm),
-	opacity: 1,
+	opacity: var(--opacity-100),
 	state: (
 		close: (
 			display: none,
@@ -80,7 +80,7 @@ $vv-dialog: (
 				),
 			),
 			enter-from: (
-				opacity: 0,
+				opacity: var(--opacity-0),
 				element: (
 					wrapper: (
 						transform: translateY(100%),
@@ -88,7 +88,7 @@ $vv-dialog: (
 				),
 			),
 			leave-to: (
-				opacity: 0,
+				opacity: var(--opacity-0),
 				element: (
 					wrapper: (
 						transform: translateY(-100%),
@@ -106,7 +106,7 @@ $vv-dialog: (
 				),
 			),
 			enter-from: (
-				opacity: 0,
+				opacity: var(--opacity-0),
 				element: (
 					wrapper: (
 						transform: translateX(-100%),
@@ -114,7 +114,7 @@ $vv-dialog: (
 				),
 			),
 			leave-to: (
-				opacity: 0,
+				opacity: var(--opacity-0),
 				element: (
 					wrapper: (
 						transform: translateX(100%),
@@ -132,7 +132,7 @@ $vv-dialog: (
 				),
 			),
 			inert: (
-				opacity: 0,
+				opacity: var(--opacity-0),
 				element: (
 					wrapper: (
 						transform: scale(0%),

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

@@ -79,11 +79,11 @@ $vv-input-text: (
 					padding: var(--spacing-sm),
 					top: 0,
 					right: 0,
-					opacity: 0,
+					opacity: var(--opacity-0),
 				),
 				search-cancel-button: (
 					-webkit-appearance: none,
-					opacity: 0,
+					opacity: var(--opacity-0),
 				),
 				color-swatch-wrapper: (
 					padding: 1px,
@@ -299,7 +299,7 @@ $vv-input-text: (
 						placeholder: (
 							will-change: 'opacity',
 							transition: var(--transition-opacity),
-							opacity: 0,
+							opacity: var(--opacity-0),
 						),
 					),
 				),
@@ -315,7 +315,7 @@ $vv-input-text: (
 							transform: translateY(0.55em),
 							pseudo: (
 								placeholder: (
-									opacity: 1,
+									opacity: var(--opacity-100),
 								),
 							),
 						),
@@ -331,7 +331,7 @@ $vv-input-text: (
 							transform: translateY(0.55em),
 							pseudo: (
 								placeholder: (
-									opacity: 1,
+									opacity: var(--opacity-100),
 								),
 							),
 						),
@@ -342,7 +342,7 @@ $vv-input-text: (
 	),
 	state: (
 		disabled: (
-			opacity: 0.5,
+			opacity: var(--opacity-50),
 			element: (
 				wrapper: (
 					state: (
@@ -358,7 +358,7 @@ $vv-input-text: (
 				wrapper: (
 					pseudo: (
 						after: (
-							opacity: 0,
+							opacity: var(--opacity-0),
 						),
 					),
 					state: (

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

@@ -11,13 +11,13 @@ $vv-radio: (
 	min-width: var(--input-min-width),
 	state: (
 		disabled: (
-			opacity: 0.3,
+			opacity: var(--opacity-30),
 			cursor: not-allowed,
 		),
 	),
 	modifier: (
 		readonly: (
-			opacity: 1,
+			opacity: var(--opacity-100),
 			cursor: default,
 			pointer-events: none,
 		),

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

@@ -214,7 +214,7 @@ $vv-select: (
 				input: (
 					pseudo: (
 						placeholder: (
-							opacity: 0,
+							opacity: var(--opacity-0),
 						),
 					),
 				),
@@ -233,7 +233,7 @@ $vv-select: (
 								calc(var(--input-spacing-bottom) - 0.55em),
 							pseudo: (
 								placeholder: (
-									opacity: 1,
+									opacity: var(--opacity-100),
 								),
 							),
 						),
@@ -242,13 +242,13 @@ $vv-select: (
 			),
 		),
 		readonly: (
-			opacity: 1,
+			opacity: var(--opacity-100),
 			user-select: text,
 			element: (
 				wrapper: (
 					pseudo: (
 						after: (
-							opacity: 0,
+							opacity: var(--opacity-0),
 						),
 					),
 					state: (
@@ -266,7 +266,7 @@ $vv-select: (
 	),
 	state: (
 		disabled: (
-			opacity: 0.5,
+			opacity: var(--opacity-50),
 			element: (
 				wrapper: (
 					state: (

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

@@ -27,7 +27,7 @@ $vv-text: (
 					color: var(--color-brand-darken-3),
 				),
 				disabled: (
-					opacity: 0.5,
+					opacity: var(--opacity-50),
 					cursor: not-allowed,
 				),
 			),

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

@@ -226,7 +226,7 @@ $vv-textarea: (
 						placeholder: (
 							will-change: 'opacity',
 							transition: var(--transition-opacity),
-							opacity: 0,
+							opacity: var(--opacity-0),
 						),
 					),
 				),
@@ -242,7 +242,7 @@ $vv-textarea: (
 							transform: translateY(0.55em),
 							pseudo: (
 								placeholder: (
-									opacity: 1,
+									opacity: var(--opacity-100),
 								),
 							),
 						),
@@ -258,7 +258,7 @@ $vv-textarea: (
 							transform: translateY(0.55em),
 							pseudo: (
 								placeholder: (
-									opacity: 1,
+									opacity: var(--opacity-100),
 								),
 							),
 						),
@@ -269,7 +269,7 @@ $vv-textarea: (
 	),
 	state: (
 		disabled: (
-			opacity: 0.5,
+			opacity: var(--opacity-50),
 			element: (
 				wrapper: (
 					state: (

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

@@ -54,7 +54,7 @@ $vv-toast: (
 			border: 1px solid var(--color-white),
 			border-radius: 50%,
 			overflow: hidden,
-			opacity: 0.8,
+			opacity: var(--opacity-80),
 			cursor: pointer,
 			pseudo: (
 				before: (
@@ -78,7 +78,7 @@ $vv-toast: (
 					border-radius: 100% 0 0 100% / 50% 0 0 50%,
 					[animation]: pie-masks var(--toast-pie-animation-duration)
 						steps(1, end),
-					opacity: 0,
+					opacity: var(--opacity-0),
 				),
 			),
 		),

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

@@ -1,5 +1,5 @@
 $vv-tooltip: (
-	opacity: 0,
+	opacity: var(--opacity-0),
 	display: block,
 	position: absolute,
 	inset-inline: 100% auto,
@@ -33,7 +33,7 @@ $vv-tooltip: (
 	),
 	modifier: (
 		visible: (
-			opacity: 1,
+			opacity: var(--opacity-100),
 		),
 		top: (
 			inset-inline: 50% 0,

package/src/utilities/index.scss

@@ -9,5 +9,7 @@
 @forward 'layout';
 @forward 'sizing';
 @forward 'spacing';
+@forward 'tables';
 @forward 'transitions';
 @forward 'typography';
+@forward 'transforms';

package/src/utilities/layout.scss

@@ -137,11 +137,16 @@
 );
 
 // top / right / bottom / left
-@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});
+@each $size,
+	$value in map.merge($placement, map.merge($spacing, $spacing-dynamic))
+{
+	$var: $value;
+	@if not map-has-key($placement, $size) {
+		// check if value is not a map (spacing-dynamic)
+		$var: var(--spacing-#{$size});
+		@if type-of($value) != 'map' {
+			$var: var(--spacing-#{$size}, #{$value});
+		}
 	}
 
 	// all