@volverjs/style 0.1.7 → 0.1.9-beta.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 volverjs
+Copyright (c) 2022-2023 24/Consulting
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.7",
+  "version": "0.1.9-beta.1",
   "engines": {
     "node": ">= 12.x"
   },
@@ -37,45 +37,45 @@
     "dist/*"
   ],
   "devDependencies": {
-    "@iconify/vue": "^4.0.2",
+    "@iconify/vue": "^4.1.0",
     "@vitejs/plugin-vue": "^4.0.0",
-    "@vueuse/core": "^9.11.0",
-    "@vueuse/head": "^1.0.22",
-    "eslint": "^8.32.0",
+    "@vueuse/core": "^9.13.0",
+    "@vueuse/head": "^1.1.15",
+    "eslint": "^8.35.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-vue": "^9.9.0",
-    "glob": "^8.1.0",
+    "glob": "^9.2.1",
     "icss-utils": "^5.1.0",
-    "markdown-it-anchor": "^8.6.6",
+    "markdown-it-anchor": "^8.6.7",
     "markdown-it-prism": "^2.3.0",
     "postcss": "^8.4.21",
     "postcss-html": "^1.5.0",
-    "postcss-preset-env": "^7.8.3",
+    "postcss-preset-env": "^8.0.1",
     "prism-themes": "^1.9.0",
     "prismjs": "1.29.0",
     "remark": "^14.0.2",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "remark-lint": "^9.1.1",
-    "sass": "^1.57.1",
-    "stylelint": "^14.16.1",
-    "stylelint-config-prettier": "^9.0.4",
-    "stylelint-config-recommended-scss": "^8.0.0",
+    "sass": "^1.58.3",
+    "stylelint": "^15.2.0",
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-config-recommended-scss": "^9.0.1",
     "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard-scss": "^6.1.0",
-    "unplugin-auto-import": "^0.12.1",
-    "unplugin-vue-components": "^0.22.12",
-    "vite": "^4.0.4",
-    "vite-plugin-css-export": "^1.2.1",
+    "stylelint-config-standard-scss": "^7.0.1",
+    "unplugin-auto-import": "^0.15.0",
+    "unplugin-vue-components": "^0.24.0",
+    "vite": "^4.1.4",
+    "vite-plugin-css-export": "^2.0.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^1.6.0",
     "vite-plugin-markdown": "^2.1.0",
     "vite-plugin-pages": "^0.28.0",
-    "vite-plugin-stylelint": "^4.1.6",
-    "vite-plugin-vue-layouts": "^0.7.0",
+    "vite-plugin-stylelint": "^4.2.0",
+    "vite-plugin-vue-layouts": "^0.8.0",
     "vite-ssg": "^0.22.1",
     "vite-ssg-sitemap": "^0.4.3",
-    "vue": "^3.2.45",
+    "vue": "^3.2.47",
     "vue-live": "2.3.2",
     "vue-router": "^4.1.6"
   },
@@ -87,6 +87,8 @@
     "./scss/mixins": "./src/tools/_mixins.scss",
     "./scss/settings": "./src/settings/_index.scss",
     "./scss/preflight": "./src/_preflight.scss",
+    "./base": "./dist/base.css",
+    "./scss/base": "./src/base.scss",
     "./components": "./dist/components.css",
     "./scss/components": "./src/components/index.scss",
     "./components/vv-accordion-group": "./dist/components/vv-accordion-group.css",
@@ -117,6 +119,8 @@
     "./scss/components/vv-dialog": "./src/components/vv-dialog.scss",
     "./components/vv-dropdown-action": "./dist/components/vv-dropdown-action.css",
     "./scss/components/vv-dropdown-action": "./src/components/vv-dropdown-action.scss",
+    "./components/vv-dropdown-option": "./dist/components/vv-dropdown-option.css",
+    "./scss/components/vv-dropdown-option": "./src/components/vv-dropdown-option.scss",
     "./components/vv-dropdown": "./dist/components/vv-dropdown.css",
     "./scss/components/vv-dropdown": "./src/components/vv-dropdown.scss",
     "./components/vv-input-text": "./dist/components/vv-input-text.css",

package/src/_config.scss

@@ -23,6 +23,7 @@ $components-names: (
 	vv-dialog: $components-prefix + -dialog,
 	vv-dropdown: $components-prefix + -dropdown,
 	vv-dropdown-action: $components-prefix + -dropdown-action,
+	vv-dropdown-option: $components-prefix + -dropdown-option,
 	vv-checkbox-group: $components-prefix + -checkbox-group,
 	vv-checkbox: $components-prefix + -checkbox,
 	vv-radio-group: $components-prefix + -radio-group,

package/src/_preflight.scss

@@ -1,16 +1,6 @@
 @use 'sass:map';
 @use 'context' as *;
 
-:where(:host, :root, .theme) {
-	accent-color: var(--color-brand);
-	background: var(--color-surface);
-	caret-color: var(--color-brand);
-	color-scheme: var(--color-scheme);
-	color: var(--color-word);
-	scrollbar-color: var(--color-brand);
-	font-family: var(--font-sans);
-}
-
 :where(.preflight) {
 	:not(.preflight-revert *) {
 		// typography

package/src/base.scss

@@ -0,0 +1,15 @@
+// reset
+@use 'reset';
+
+// props
+@use 'props';
+
+:where(:host, :root, .theme) {
+	accent-color: var(--color-brand);
+	background: var(--color-surface);
+	caret-color: var(--color-brand);
+	color-scheme: var(--color-scheme);
+	color: var(--color-word);
+	scrollbar-color: var(--color-brand);
+	font-family: var(--font-sans);
+}

package/src/components/index.scss

@@ -1,5 +1,5 @@
-@use 'vv-accordion-group';
 @use 'vv-accordion';
+@use 'vv-accordion-group';
 @use 'vv-alert';
 @use 'vv-badge';
 @use 'vv-breadcrumb';
@@ -9,10 +9,11 @@
 @use 'vv-dialog';
 @use 'vv-dropdown';
 @use 'vv-dropdown-action';
-@use 'vv-checkbox-group';
+@use 'vv-dropdown-option';
 @use 'vv-checkbox';
-@use 'vv-radio-group';
+@use 'vv-checkbox-group';
 @use 'vv-radio';
+@use 'vv-radio-group';
 @use 'vv-avatar';
 @use 'vv-avatar-group';
 @use 'vv-input-text';

package/src/components/vv-dropdown-option.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-dropdown-option);
+$component-map: $vv-dropdown-option;
+
+@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/settings/_index.scss

@@ -18,8 +18,8 @@
 @forward 'typography';
 
 // components
-@forward 'components/vv-accordion-group';
 @forward 'components/vv-accordion';
+@forward 'components/vv-accordion-group';
 @forward 'components/vv-alert';
 @forward 'components/vv-badge';
 @forward 'components/vv-breadcrumb';
@@ -29,10 +29,11 @@
 @forward 'components/vv-dialog';
 @forward 'components/vv-dropdown';
 @forward 'components/vv-dropdown-action';
-@forward 'components/vv-checkbox-group';
+@forward 'components/vv-dropdown-option';
 @forward 'components/vv-checkbox';
-@forward 'components/vv-radio-group';
+@forward 'components/vv-checkbox-group';
 @forward 'components/vv-radio';
+@forward 'components/vv-radio-group';
 @forward 'components/vv-avatar';
 @forward 'components/vv-avatar-group';
 @forward 'components/vv-input-text';

package/src/settings/_input.scss

@@ -8,15 +8,16 @@ $input: (
 	spacing-left: var(--spacing-sm),
 	color: var(--color-word),
 	background-color: var(--color-surface-1),
+	background-color-hover: var(--color-surface-3),
+	background-color-focus: var(--color-surface-2),
 	gap: var(--spacing-md),
 	line-height: var(--leading-normal),
 	font-size: var(--text-16),
-	min-height: var(--spacing-50),
+	min-height: var(--spacing-52),
 	min-width: 0,
 	label: (
 		color: var(--color-word-2),
-		display: flex,
-		align-items: center,
+		display: inline,
 		font-size: var(--text-xs),
 		gap: var(--spacing-xs),
 		white-space: nowrap,

package/src/settings/_spacing.scss

@@ -29,6 +29,7 @@ $spacing: (
 	44: 2.75rem,
 	48: 3rem,
 	50: 3.125rem,
+	52: 3.25rem,
 	56: 3.5rem,
 	64: 4rem,
 	80: 5rem,

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

@@ -2,4 +2,19 @@ $vv-accordion-group: (
 	display: flex,
 	flex-direction: column,
 	gap: var(--spacing-sm),
+	element: (
+		not-last-child: (
+			_alias: '> details:not(:last-child)',
+		),
+	),
+	modifier: (
+		condensed: (
+			gap: 0,
+			element: (
+				not-last-child: (
+					border-bottom-width: 0,
+				),
+			),
+		),
+	),
 ) !default;

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

@@ -139,5 +139,13 @@ $vv-accordion: (
 				),
 			),
 		),
+		square: (
+			border-radius: 0,
+			element: (
+				summary: (
+					border-radius: 0,
+				),
+			),
+		),
 	),
 ) !default;

package/src/settings/components/_vv-dropdown-action.scss

@@ -1,52 +1,26 @@
 $vv-dropdown-action: (
 	display: flex,
-	min-width: 0,
+	width: 100%,
 	overflow: hidden,
 	gap: var(--spacing-sm),
 	align-items: center,
 	padding: var(--spacing-sm),
+	color: var(--color-brand),
+	cursor: pointer,
 	state: (
 		disabled: (
 			opacity: var(--opacity-50),
 			cursor: not-allowed,
-			pointer-events: none,
 		),
-		focus-visible: (
-			background-color: var(--color-surface-success),
-			color: var(--color-success),
-			element: (
-				hint: (
-					opacity: var(--opacity-100),
-				),
-			),
-		),
-		selected: (
-			font-weight: var(--font-bold),
+		hover: (
 			background-color: var(--color-surface-brand),
-			color: var(--color-brand),
 		),
-	),
-	modifier: (
-		unselectable: (
-			state: (
-				focus-visible: (
-					background-color: var(--color-surface-danger),
-					color: var(--color-danger),
-				),
-			),
+		focus-visible: (
+			outline: var(--spacing-px) solid var(--color-brand),
+			outline-offset: calc(var(--spacing-px) * -1),
 		),
-	),
-	element: (
-		hint: (
-			opacity: var(--opacity-0),
-			transition: var(--transition-opacity),
-			will-change: opacity,
-			margin-left: auto,
-			font-size: 0.8em,
-			font-weight: var(--font-normal),
-			text-overflow: ellipsis,
-			white-space: nowrap,
-			overflow: hidden,
+		pressed: (
+			background-color: var(--color-surface-2),
 		),
 	),
 ) !default;

package/src/settings/components/_vv-dropdown-option.scss

@@ -0,0 +1,64 @@
+$vv-dropdown-option: (
+	display: flex,
+	min-width: 0,
+	overflow: hidden,
+	gap: var(--spacing-sm),
+	align-items: center,
+	padding: var(--spacing-sm),
+	white-space: nowrap,
+	state: (
+		disabled: (
+			opacity: var(--opacity-50),
+			cursor: not-allowed,
+			pointer-events: none,
+		),
+		focus-visible: (
+			background-color: var(--color-surface-success),
+			color: var(--color-success),
+			element: (
+				hint: (
+					opacity: var(--opacity-100),
+				),
+			),
+		),
+		selected: (
+			font-weight: var(--font-bold),
+			background-color: var(--color-surface-brand),
+			color: var(--color-brand),
+		),
+	),
+	modifier: (
+		unselectable: (
+			state: (
+				focus-visible: (
+					background-color: var(--color-surface-danger),
+					color: var(--color-danger),
+				),
+			),
+		),
+		inert: (
+			cursor: default,
+			color: var(--color-word-3),
+			font-size: 0.8em,
+			state: (
+				focus-visible: (
+					background-color: transparent,
+					color: var(--color-word-3),
+				),
+			),
+		),
+	),
+	element: (
+		hint: (
+			opacity: var(--opacity-0),
+			transition: var(--transition-opacity),
+			will-change: opacity,
+			margin-left: auto,
+			font-size: 0.8em,
+			font-weight: var(--font-normal),
+			text-overflow: ellipsis,
+			white-space: nowrap,
+			overflow: hidden,
+		),
+	),
+) !default;

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

@@ -6,12 +6,12 @@ $vv-dropdown: (
 	flex-direction: column,
 	box-shadow: var(--shadow-lg),
 	width: 'max-content',
-	overflow: auto,
 	element: (
 		list: (
 			_alias: 'ul',
 			[border-radius]: var(--dropdown-border-radius),
 			background-color: var(--color-surface-1),
+			overflow: auto,
 		),
 		item: (
 			_alias: 'li',

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

@@ -10,7 +10,6 @@ $vv-input-text: (
 		label: (
 			_alias: '> label',
 			display: var(--input-label-display),
-			align-items: var(--input-label-align-items),
 			font-size: var(--input-label-font-size),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
@@ -48,10 +47,10 @@ $vv-input-text: (
 			),
 			state: (
 				hover: (
-					background-color: var(--color-surface-3),
+					background-color: var(--input-background-color-hover),
 				),
 				focus-within: (
-					background-color: var(--color-surface-2),
+					background-color: var(--input-background-color-focus),
 					pseudo: (
 						after: (
 							transform: scaleX(1),
@@ -64,6 +63,7 @@ $vv-input-text: (
 			position: relative,
 			display: flex,
 			flex: 1,
+			min-width: 0,
 		),
 		input: (
 			_alias: 'input',
@@ -95,7 +95,7 @@ $vv-input-text: (
 					opacity: var(--opacity-0),
 				),
 				color-swatch-wrapper: (
-					padding: 1px,
+					padding: var(--spacing-px),
 				),
 				color-swatch: (
 					height: var(--spacing-20),
@@ -124,6 +124,7 @@ $vv-input-text: (
 				),
 				readonly: (
 					cursor: text,
+					user-select: text,
 				),
 			),
 		),
@@ -142,6 +143,8 @@ $vv-input-text: (
 		icon: (
 			_alias: '> div > :where(svg, [data-icon])',
 			position: var(--input-icon-position),
+			top: 0,
+			left: 0,
 			width: var(--input-icon-width),
 			height: var(--input-min-height),
 			margin: var(--input-icon-margin),
@@ -151,6 +154,7 @@ $vv-input-text: (
 			_alias: 'input + :where(svg, [data-icon])',
 			position: var(--input-icon-position),
 			right: 0,
+			left: auto,
 		),
 		actions-group: (
 			display: flex,
@@ -158,26 +162,19 @@ $vv-input-text: (
 			height: var(--input-min-height),
 		),
 		action: (
-			cursor: pointer,
-			state: (
-				focus-visible: (
-					text-shadow: 0 1px 0 var(--color-gray-darken-5),
-				),
-			),
-		),
-		action-chevron: (
-			flex: 1,
+			position: relative,
 			width:
 				calc(
 					var(--input-icon-width) + var(--input-spacing-left) +
 						var(--input-spacing-right)
 				),
-			background-position: center var(--spacing-2),
-			background-size: var(--text-14) auto,
-			background-repeat: no-repeat,
-			background-image: var(--bg-chevron),
+			height: var(--input-min-height),
 			cursor: pointer,
 			state: (
+				disabled: (
+					cursor: not-allowed,
+					opacity: var(--opacity-50),
+				),
 				focus-visible: (
 					background-color: var(--color-surface-3),
 				),
@@ -189,6 +186,13 @@ $vv-input-text: (
 				),
 			),
 		),
+		action-chevron: (
+			flex: 1,
+			background-position: center var(--spacing-2),
+			background-size: var(--text-14) auto,
+			background-repeat: no-repeat,
+			background-image: var(--bg-chevron),
+		),
 		action-chevron-up: (
 			transform: rotate(180deg),
 		),
@@ -209,6 +213,15 @@ $vv-input-text: (
 			font-size: var(--input-hint-font-size),
 			color: var(--input-hint-color),
 		),
+		unit: (
+			color: var(--input-placeholder-color),
+			display: flex,
+			align-items: center,
+			flex: 0 1 auto,
+			[padding-right]: var(--input-spacing-right),
+			[padding-block]: var(--input-spacing-top)
+				var(--input-spacing-bottom),
+		),
 	),
 	modifier: (
 		icon-before: (
@@ -355,6 +368,45 @@ $vv-input-text: (
 				),
 			),
 		),
+		auto-width: (
+			element: (
+				inner: (
+					[padding-block]: var(--input-spacing-top)
+						var(--input-spacing-bottom),
+					[padding-inline]: var(--input-spacing-left)
+						var(--input-spacing-right),
+					min-height: var(--input-min-height),
+					cursor: text,
+				),
+				input: (
+					padding-block: 0,
+					padding-inline: 0,
+					min-width: 1ch,
+					min-height: 1em,
+					text-align: left,
+				),
+				unit: (
+					padding-right: 0,
+					padding-block: 0,
+				),
+			),
+			state: (
+				dirty: (
+					element: (
+						input: (
+							flex: 0 1 auto,
+						),
+					),
+				),
+				disabled: (
+					element: (
+						inner: (
+							cursor: not-allowed,
+						),
+					),
+				),
+			),
+		),
 	),
 	state: (
 		disabled: (
@@ -363,7 +415,10 @@ $vv-input-text: (
 				wrapper: (
 					state: (
 						hover: (
-							background-color: var(--color-surface-1),
+							background-color: var(--input-background-color),
+						),
+						focus-within: (
+							background-color: var(--input-background-color),
 						),
 					),
 				),
@@ -373,13 +428,19 @@ $vv-input-text: (
 			element: (
 				wrapper: (
 					pseudo: (
+						before: (
+							opacity: var(--opacity-0),
+						),
 						after: (
 							opacity: var(--opacity-0),
 						),
 					),
 					state: (
 						hover: (
-							background-color: var(--color-surface-1),
+							background-color: var(--input-background-color),
+						),
+						focus-within: (
+							background-color: var(--input-background-color),
 						),
 					),
 				),

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

@@ -11,7 +11,6 @@ $vv-select: (
 		label: (
 			_alias: '> label',
 			display: var(--input-label-display),
-			align-items: var(--input-label-align-items),
 			font-size: var(--input-label-font-size),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
@@ -48,10 +47,10 @@ $vv-select: (
 			),
 			state: (
 				hover: (
-					background-color: var(--color-surface-3),
+					background-color: var(--input-background-color-hover),
 				),
 				focus-within: (
-					background-color: var(--color-surface-2),
+					background-color: var(--input-background-color-focus),
 					pseudo: (
 						after: (
 							transform: scaleX(1),
@@ -59,7 +58,7 @@ $vv-select: (
 					),
 				),
 				open: (
-					background-color: var(--color-surface-2),
+					background-color: var(--input-background-color-focus),
 					pseudo: (
 						after: (
 							transform: scaleX(1),
@@ -302,17 +301,24 @@ $vv-select: (
 		),
 		readonly: (
 			opacity: var(--opacity-100),
+			cursor: text,
 			user-select: text,
 			element: (
 				wrapper: (
 					pseudo: (
+						before: (
+							opacity: var(--opacity-0),
+						),
 						after: (
 							opacity: var(--opacity-0),
 						),
 					),
 					state: (
 						hover: (
-							background-color: var(--color-surface-1),
+							background-color: var(--input-background-color),
+						),
+						focus-within: (
+							background-color: var(--input-background-color),
 						),
 					),
 				),
@@ -330,7 +336,10 @@ $vv-select: (
 				wrapper: (
 					state: (
 						hover: (
-							background-color: var(--color-surface-1),
+							background-color: var(--input-background-color),
+						),
+						focus-within: (
+							background-color: var(--input-background-color),
 						),
 					),
 				),