@volverjs/style 0.1.6 → 0.1.7

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.6",
+  "version": "0.1.7",
   "engines": {
     "node": ">= 12.x"
   },
@@ -95,6 +95,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 +115,8 @@
     "./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": "./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,13 @@ $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-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/components/index.scss

@@ -8,11 +8,13 @@
 @use 'vv-card';
 @use 'vv-dialog';
 @use 'vv-dropdown';
+@use 'vv-dropdown-action';
 @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/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,13 @@
 @forward 'components/vv-card';
 @forward 'components/vv-dialog';
 @forward 'components/vv-dropdown';
+@forward 'components/vv-dropdown-action';
 @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

@@ -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/_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,52 @@
+$vv-dropdown-action: (
+	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),
+				),
+			),
+		),
+	),
+	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

@@ -1,37 +1,112 @@
 $vv-dropdown: (
-	position: absolute,
-	inset: auto 0,
+	--dropdown-border-radius: 0px,
+	position: relative,
 	z-index: var(--z-dropdown),
 	display: flex,
 	flex-direction: column,
-	background-color: var(--color-surface-1),
 	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),
+		),
 		item: (
-			_alias: '> li > :where(a, label, button)',
+			_alias: 'li',
+		),
+		item-first: (
+			_alias: 'li:first-child',
+			[border-top-left-radius]: var(--dropdown-border-radius),
+			[border-top-right-radius]: var(--dropdown-border-radius),
+		),
+		item-last: (
+			_alias: 'li:last-child',
+			[border-bottom-left-radius]: var(--dropdown-border-radius),
+			[border-bottom-right-radius]: var(--dropdown-border-radius),
+		),
+		item-not-last: (
+			_alias: 'li:not(:last-child)',
+			border-width: 0 0 var(--border) 0,
+			border-color: var(--color-surface-3),
+			border-style: solid,
+		),
+		search: (
 			display: block,
+			min-width: 0,
+			align-items: center,
+			min-height: var(--spacing-50),
+			background-color: var(--color-surface-2),
 			padding: var(--spacing-sm),
-			state: (
-				hover: (
-					background-color: var(--color-surface-2),
-				),
-				active: (
-					background-color: var(--color-surface-3),
+			pseudo: (
+				search-cancel-button: (
+					-webkit-appearance: none,
+					opacity: var(--opacity-0),
 				),
-				checked-within: (
-					color: var(--color-brand),
-					background-color: var(--color-surface-3),
+				placeholder: (
+					color: var(--color-word-4),
+					text-overflow: ellipsis,
 				),
 			),
 		),
-		input: (
-			_alias: '> li > input',
-			display: none,
+		arrow: (
+			position: absolute,
+			width: var(--spacing-20),
+			height: var(--spacing-20),
+			z-index: -1,
+			pointer-events: none,
+			border: none,
+			pseudo: (
+				before: (
+					position: absolute,
+					top: 0,
+					left: 0,
+					width: 0,
+					height: 0,
+					border-left: var(--spacing-10) solid transparent,
+					border-right: var(--spacing-10) solid transparent,
+					border-bottom: var(--spacing-10) solid
+						var(--color-surface-1),
+				),
+				after: (
+					position: absolute,
+					bottom: 0,
+					left: 0,
+					width: 0,
+					height: 0,
+					border-left: var(--spacing-10) solid transparent,
+					border-right: var(--spacing-10) solid transparent,
+					border-top: var(--spacing-10) solid var(--color-surface-1),
+				),
+			),
 		),
 	),
 	modifier: (
-		place-top: (
+		rounded: (
+			--dropdown-border-radius: var(--rounded),
+		),
+		block: (
+			width: 100%,
+		),
+		bottom: (
+			position: absolute,
+			top: 100%,
+			right: 0,
+			left: 0,
+		),
+		top: (
+			position: absolute,
+			left: 0,
+			right: 0,
 			bottom: 100%,
 		),
+		full-bleed: (
+			element: (
+				item: (
+					min-width: 20ch,
+				),
+			),
+		),
 	),
 ) !default;