@volverjs/style 0.1.7 → 0.1.8

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.7",
+  "version": "0.1.8",
   "engines": {
     "node": ">= 12.x"
   },
@@ -37,11 +37,11 @@
     "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.12.0",
+    "@vueuse/head": "^1.0.24",
+    "eslint": "^8.33.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-vue": "^9.9.0",
     "glob": "^8.1.0",
@@ -50,32 +50,32 @@
     "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",
+    "sass": "^1.58.0",
     "stylelint": "^14.16.1",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-recommended-scss": "^8.0.0",
     "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",
+    "unplugin-auto-import": "^0.13.0",
+    "unplugin-vue-components": "^0.23.0",
+    "vite": "^4.1.1",
     "vite-plugin-css-export": "^1.2.1",
     "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-stylelint": "^4.1.8",
     "vite-plugin-vue-layouts": "^0.7.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

@@ -9,6 +9,7 @@
 @use 'vv-dialog';
 @use 'vv-dropdown';
 @use 'vv-dropdown-action';
+@use 'vv-dropdown-option';
 @use 'vv-checkbox-group';
 @use 'vv-checkbox';
 @use 'vv-radio-group';

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

@@ -29,6 +29,7 @@
 @forward 'components/vv-dialog';
 @forward 'components/vv-dropdown';
 @forward 'components/vv-dropdown-action';
+@forward 'components/vv-dropdown-option';
 @forward 'components/vv-checkbox-group';
 @forward 'components/vv-checkbox';
 @forward 'components/vv-radio-group';

package/src/settings/_input.scss

@@ -11,7 +11,7 @@ $input: (
 	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),

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-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,63 @@
+$vv-dropdown-option: (
+	display: flex,
+	min-width: 0,
+	overflow: hidden,
+	gap: var(--spacing-sm),
+	align-items: center,
+	padding: var(--spacing-sm),
+	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/utilities/layout.scss

@@ -14,15 +14,9 @@
 // container
 %container {
 	width: 100%;
-
-	@each $breakpoint, $value in $breakpoints {
-		@if $value > 0 {
-			@include media-breakpoint-up($breakpoint, $breakpoints) {
-				max-width: $value;
-			}
-		}
-	}
+	max-width: var(--breakpoint-value, 100%);
 }
+
 @include wrap-with-where(
 	$selector: '.container',
 	$enabled: $zero-specificity-for-utilities

package/src/volver.scss

@@ -1,8 +1,5 @@
-// reset
-@use 'reset';
-
-// props
-@use 'props';
+// base
+@use 'base';
 
 // components
 @use 'components';