@volverjs/style 0.1.6 → 0.1.8

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.6",
+  "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",
@@ -95,6 +97,8 @@
     "./scss/components/vv-accordion": "./src/components/vv-accordion.scss",
     "./components/vv-alert": "./dist/components/vv-alert.css",
     "./scss/components/vv-alert": "./src/components/vv-alert.scss",
+    "./components/vv-avatar-group": "./dist/components/vv-avatar-group.css",
+    "./scss/components/vv-avatar-group": "./src/components/vv-avatar-group.scss",
     "./components/vv-avatar": "./dist/components/vv-avatar.css",
     "./scss/components/vv-avatar": "./src/components/vv-avatar.scss",
     "./components/vv-badge": "./dist/components/vv-badge.css",
@@ -113,6 +117,10 @@
     "./scss/components/vv-checkbox": "./src/components/vv-checkbox.scss",
     "./components/vv-dialog": "./dist/components/vv-dialog.css",
     "./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

@@ -22,11 +22,14 @@ $components-names: (
 	vv-card: $components-prefix + -card,
 	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,
 	vv-radio: $components-prefix + -radio,
 	vv-avatar: $components-prefix + -avatar,
+	vv-avatar-group: $components-prefix + -avatar-group,
 	vv-input-text: $components-prefix + -input-text,
 	vv-nav: $components-prefix + -nav,
 	vv-progress: $components-prefix + -progress,

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

@@ -8,11 +8,14 @@
 @use 'vv-card';
 @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';
 @use 'vv-radio';
 @use 'vv-avatar';
+@use 'vv-avatar-group';
 @use 'vv-input-text';
 @use 'vv-nav';
 @use 'vv-progress';

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

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

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

@@ -1,4 +1,5 @@
 @use '../context' as *;
+@use 'sass:string';
 
 :where(:host, :root, .theme) {
 	// animation
@@ -27,11 +28,16 @@
 		// transition
 		@each $property, $value in $transition-property {
 			@if $property != 'none' {
-				--transition-#{$property}: var(
-						--transition-property-#{$property}
-					)
-					var(--duration-300)
-					var(--ease-in-out);
+				$transition: '';
+				@each $prop in str-split($value, ', ') {
+					$transition: $transition +
+						$prop +
+						' var(--duration-300) var(--ease-in-out), ';
+				}
+
+				$transition: string.slice($transition, 1, -3);
+
+				--transition-#{$property}: #{$transition};
 			} @else {
 				--transition-#{$property}: none;
 			}

package/src/settings/_index.scss

@@ -28,11 +28,14 @@
 @forward 'components/vv-card';
 @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';
 @forward 'components/vv-radio';
 @forward 'components/vv-avatar';
+@forward 'components/vv-avatar-group';
 @forward 'components/vv-input-text';
 @forward 'components/vv-nav';
 @forward 'components/vv-progress';

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),
@@ -27,10 +27,8 @@ $input: (
 	icon: (
 		position: absolute,
 		width: 1em,
-		height: calc(var(--input-icon-width) * var(--input-line-height)),
-		padding: calc((var(--input-icon-height) - var(--input-icon-width)) / 2)
-			0,
 		pointer-events: none,
+		margin: 0 var(--spacing-sm),
 	),
 	hint: (
 		display: block,

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/_transitions.scss

@@ -2,8 +2,6 @@
 $transition-property: (
 	none: none,
 	all: all,
-	transition:
-		'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
 	colors:
 		'color, background-color, border-color, text-decoration-color, fill, stroke',
 	opacity: opacity,

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

@@ -0,0 +1,23 @@
+$vv-avatar-group: (
+	--avatar-group-spacing: var(--spacing-9),
+	display: flex,
+	align-items: flex-end,
+	element: (
+		item: (
+			_alias: '> *',
+			box-shadow: var(--shadow-md),
+		),
+		item-not-first: (
+			_alias: '> *:not(:first-child)',
+			[margin-left]: calc(-1 * var(--avatar-group-spacing)),
+		),
+	),
+	modifier: (
+		tight: (
+			--avatar-group-spacing: var(--spacing-12),
+		),
+		relaxed: (
+			--avatar-group-spacing: var(--spacing-6),
+		),
+	),
+) !default;

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

@@ -1,4 +1,11 @@
 $vv-avatar: (
+	--avatar-background-color: var(--color-brand),
+	--avatar-color: var(--color-white),
+	--avatar-border-radius: var(--rounded),
+	--avatar-border-color: var(--color-brand-darken-3),
+	[background-color]: var(--avatar-background-color),
+	[border-radius]: var(--avatar-border-radius),
+	[color]: var(--avatar-color),
 	display: inline-flex,
 	position: relative,
 	justify-content: center,
@@ -7,28 +14,10 @@ $vv-avatar: (
 	line-height: var(--leading-none),
 	width: var(--spacing-28),
 	height: var(--spacing-28),
-	border-radius: var(--rounded),
 	background-position: center,
 	background-size: contain,
 	background-repeat: no-repeat,
-	color: var(--color-white),
 	object-fit: contain,
-	modifier: (
-		rounded: (
-			border-radius: var(--rounded-full),
-			overflow: hidden,
-		),
-		md: (
-			font-size: var(--text-14),
-			width: var(--spacing-34),
-			height: var(--spacing-34),
-		),
-		lg: (
-			font-size: var(--text-16),
-			width: var(--spacing-40),
-			height: var(--spacing-40),
-		),
-	),
 	state: (
 		focus: (
 			outline: var(--spacing-px) solid var(--color-brand),
@@ -41,15 +30,124 @@ $vv-avatar: (
 			position: absolute,
 			top: 0,
 			right: 0,
-			transform: translate(50%, -50%),
+			transform: translate(50%, -33.3%),
+			box-shadow: var(--shadow-sm),
+		),
+		badge-bottom: (
+			_alias: '> sub',
+			position: absolute,
+			bottom: 0,
+			right: 0,
+			transform: translate(50%, 33.3%),
 			box-shadow: var(--shadow-sm),
 		),
 		image: (
 			_alias: '> img',
 			width: 100%,
 			height: 100%,
-			border-radius: inherit,
 			object-fit: inherit,
+			[border-radius]: var(--avatar-border-radius),
+			overflow: hidden,
+		),
+	),
+	modifier: (
+		rounded: (
+			--avatar-border-radius: var(--rounded-full),
+		),
+		square: (
+			--avatar-border-radius: var(--rounded-none),
+		),
+		bordered: (
+			[border-color]: var(--avatar-border-color),
+			border-width: var(--border),
+			border-style: solid,
+		),
+		md: (
+			font-size: var(--text-14),
+			width: var(--spacing-34),
+			height: var(--spacing-34),
+		),
+		lg: (
+			font-size: var(--text-16),
+			width: var(--spacing-40),
+			height: var(--spacing-40),
+		),
+		transparent: (
+			--avatar-background-color: var(--color-transparent),
+		),
+		surface: (
+			--avatar-background-color: var(--color-surface-1),
+			--avatar-border-color: var(--color-surface-3),
+			--avatar-color: var(--color-word-2),
+		),
+		danger: (
+			--avatar-background-color: var(--color-danger),
+			--avatar-border-color: var(--color-danger-darken-3),
+		),
+		success: (
+			--avatar-background-color: var(--color-success),
+			--avatar-border-color: var(--color-success-darken-3),
+		),
+		warning: (
+			--avatar-background-color: var(--color-warning),
+			--avatar-border-color: var(--color-warning-darken-3),
+		),
+		info: (
+			--avatar-background-color: var(--color-info),
+			--avatar-border-color: var(--color-info-darken-3),
+		),
+		accent: (
+			--avatar-background-color: var(--color-accent),
+			--avatar-border-color: var(--color-accent-darken-3),
+		),
+		gray: (
+			--avatar-background-color: var(--color-gray),
+			--avatar-border-color: var(--color-gray-darken-3),
+		),
+		ring: (
+			--avatar-color: var(--color-brand),
+			--avatar-background-color: var(--color-surface-brand),
+			--avatar-border-color: var(--color-brand),
+			[border-color]: var(--avatar-border-color),
+			border-width: var(--border),
+			border-style: solid,
+			modifier: (
+				surface: (
+					--avatar-background-color: var(--color-surface),
+					--avatar-border-color: var(--color-surface-5),
+					--avatar-color: var(--color-word-2),
+				),
+				danger: (
+					--avatar-background-color: var(--color-surface-danger),
+					--avatar-border-color: var(--color-danger),
+					--avatar-color: var(--color-danger),
+				),
+				success: (
+					--avatar-background-color: var(--color-surface-success),
+					--avatar-border-color: var(--color-success),
+					--avatar-color: var(--color-success),
+				),
+				warning: (
+					--avatar-background-color: var(--color-surface-warning),
+					--avatar-border-color: var(--color-warning),
+					--avatar-color: var(--color-warning),
+				),
+				info: (
+					--avatar-background-color: var(--color-surface-info),
+					--avatar-border-color: var(--color-info),
+					--avatar-color: var(--color-info),
+				),
+				accent: (
+					--avatar-background-color: var(--color-surface-accent),
+					--avatar-border-color: var(--color-accent),
+					--avatar-color: var(--color-accent),
+				),
+				gray: (
+					--avatar-background-color: var(--color-surface-4),
+					--avatar-border-color: var(--color-gray),
+					--avatar-color: var(--color-word-2),
+				),
+			),
 		),
 	),
 ) !default;

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

@@ -22,6 +22,8 @@ $vv-badge: (
 	font-weight: var(--font-normal),
 	text-shadow: none,
 	line-height: var(--leading-none),
+	overflow: hidden,
+	flex-shrink: 0,
 	state: (
 		empty: (
 			font-size: inherit,
@@ -32,8 +34,33 @@ $vv-badge: (
 			[border-radius]: calc(var(--badge-font-size) * 0.5),
 			padding: 0,
 		),
+		focus-within: (
+			outline-offset: var(--spacing-4),
+			[outline]: var(--spacing-px) solid var(--badge-background-color),
+		),
+	),
+	element: (
+		button: (
+			_alias: '> button',
+			cursor: pointer,
+			padding: 0 0.5em,
+			margin: 0 -0.5em,
+			min-height: 2em,
+			transition: var(--transition-colors),
+			state: (
+				hover: (
+					background-color: var(--color-alpha-3),
+				),
+				active: (
+					background-color: var(--color-alpha-5),
+				),
+			),
+		),
 	),
 	modifier: (
+		action: (
+			gap: calc(0.5ch + 0.5em),
+		),
 		sm: (
 			--badge-font-size: 0.6rem,
 		),

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

@@ -47,11 +47,7 @@ $vv-button: (
 			block-size: 1.1em,
 			inline-size: 1.1em,
 			margin: 0,
-			stroke: currentcolor,
-			fill: none,
 			flex-shrink: 0,
-			stroke-linecap: round,
-			stroke-linejoin: round,
 			[min-height]: calc(1em * var(--button-line-height)),
 		),
 		label: (
@@ -176,6 +172,11 @@ $vv-button: (
 					color: var(--color-brand-darken-3),
 				),
 			),
+			element: (
+				icon: (
+					margin: var(--spacing-0),
+				),
+			),
 		),
 		static-light: (
 			background: var(--color-white),
@@ -300,7 +301,6 @@ $vv-button: (
 			border-radius: var(--rounded-full),
 		),
 		block: (
-			display: block,
 			width: 100%,
 			max-width: auto,
 		),

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

@@ -0,0 +1,26 @@
+$vv-dropdown-action: (
+	display: flex,
+	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,
+		),
+		hover: (
+			background-color: var(--color-surface-brand),
+		),
+		focus-visible: (
+			outline: var(--spacing-px) solid var(--color-brand),
+			outline-offset: calc(var(--spacing-px) * -1),
+		),
+		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;