@volverjs/style 0.1.9-beta.7 → 0.1.9-beta.9

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

@@ -1,22 +1,43 @@
 $vv-alert: (
-	display: flex,
-	min-width: 0,
-	overflow: hidden,
-	align-items: center,
-	padding: var(--spacing-sm) var(--spacing-md),
+	--alert-duration: 3s,
 	background-color: var(--color-surface-2),
+	box-shadow: var(--shadow-lg),
 	border-color: var(--color-gray-lighten-4),
-	border-width: var(--border),
-	border-style: solid,
 	border-radius: var(--rounded),
-	position: relative,
+	border-style: solid,
+	border-width: var(--border),
+	display: flex,
+	flex-wrap: wrap,
+	align-items: center,
+	gap: var(--spacing-sm),
+	min-width: 0,
+	overflow: hidden,
+	font-size: var(--text-sm),
+	padding: var(--spacing-sm),
 	element: (
-		icon: (
-			_alias: '> :where(svg, [data-icon])',
-			position: absolute,
-			left: var(--spacing-md),
-			inline-size: 1.2em,
-			block-size: 1.2em,
+		header: (
+			display: flex,
+			align-items: center,
+			gap: var(--spacing-sm),
+			line-height: var(--leading-none),
+			color: var(--color-word),
+			overflow: hidden,
+			text-overflow: ellipsis,
+		),
+		title: (
+			min-width: 0,
+			font-weight: var(--font-bold),
+			overflow: hidden,
+			text-overflow: ellipsis,
+		),
+		content: (
+			line-height: var(--leading-normal),
+			color: var(--color-word-1),
+			text-overflow: ellipsis,
+			overflow: hidden,
+		),
+		footer: (
+			display: flex,
 		),
 		close: (
 			position: absolute,
@@ -28,50 +49,34 @@ $vv-alert: (
 			background-position: center,
 			background-size: 100% auto,
 			background-repeat: no-repeat,
+			align-self: center,
+			border-radius: var(--rounded),
 		),
-		title: (
-			display: flex,
-			margin-right: 1ch,
-			line-height: var(--leading-normal),
-			font-weight: var(--font-bold),
-			color: var(--color-word),
-		),
-		content: (
-			line-height: var(--leading-normal),
-			color: var(--color-word-1),
-			text-overflow: ellipsis,
-			white-space: nowrap,
-			overflow: hidden,
+		icon: (
+			flex-shrink: 0,
 		),
-		separator: (
-			_alias: '> hr',
-			height: var(--border),
-			background-color: var(--color-alpha-2),
-			margin-block: var(--spacing-sm),
+		close-mask: (
+			display: none,
+			position: absolute,
+			top: 0,
+			width: 50%,
+			height: 100%,
+			left: 50%,
+			background-color: var(--color-gray),
+			[animation]: pie-masks var(--alert-duration) steps(1, end) reverse,
+			z-index: 1,
 		),
 	),
 	modifier: (
-		fixed: (
-			position: fixed,
-			z-index: var(--z-notification-alert),
-		),
-		top: (
-			inset-inline: var(--spacing-lg),
-			inset-block: var(--spacing-lg) auto,
-		),
-		bottom: (
-			inset-inline: var(--spacing-lg),
-			inset-block: auto var(--spacing-lg),
-		),
 		success: (
 			border-color: var(--color-success-lighten-5),
 			background-color: var(--color-surface-success),
 			element: (
 				icon: (
-					color: var(--color-success),
+					color: var(--color-success-darken-1),
 				),
-				title: (
-					color: var(--color-success),
+				header: (
+					color: var(--color-success-darken-1),
 				),
 			),
 		),
@@ -82,32 +87,32 @@ $vv-alert: (
 				icon: (
 					color: var(--color-danger),
 				),
-				title: (
+				header: (
 					color: var(--color-danger),
 				),
 			),
 		),
 		warning: (
-			border-color: var(--color-warning-lighten-5),
+			border-color: var(--color-warning-lighten-1),
 			background-color: var(--color-surface-warning),
 			element: (
 				icon: (
-					color: var(--color-warning-darken-2),
+					color: var(--color-warning-darken-5),
 				),
-				title: (
-					color: var(--color-warning-darken-2),
+				header: (
+					color: var(--color-warning-darken-5),
 				),
 			),
 		),
 		info: (
-			border-color: var(--color-info-lighten-5),
+			border-color: var(--color-info-lighten-1),
 			background-color: var(--color-surface-info),
 			element: (
 				icon: (
-					color: var(--color-info-darken-2),
+					color: var(--color-info-darken-5),
 				),
-				title: (
-					color: var(--color-info-darken-2),
+				header: (
+					color: var(--color-info-darken-5),
 				),
 			),
 		),
@@ -118,7 +123,7 @@ $vv-alert: (
 				icon: (
 					color: var(--color-accent),
 				),
-				title: (
+				header: (
 					color: var(--color-accent),
 				),
 			),
@@ -128,34 +133,259 @@ $vv-alert: (
 			background-color: var(--color-surface-brand),
 			element: (
 				icon: (
-					color: var(--color-brand),
+					color: var(--color-brand-darken-2),
+				),
+				header: (
+					color: var(--color-brand-darken-2),
+				),
+			),
+		),
+		dismissable: (
+			position: relative,
+			padding-right: calc(var(--spacing-md) * 2 + 1em),
+		),
+		auto-close: (
+			element: (
+				close: (
+					background-color: var(--color-white),
+					border: var(--border) solid var(--color-white),
+					border-radius: 50%,
+					overflow: hidden,
+					opacity: var(--opacity-80),
+					background-image: none,
+					background-size: 70% auto,
+					inline-size: 1.1em,
+					block-size: 1.1em,
+					[animation]: fade-out var(--alert-duration) forwards,
+					pseudo: (
+						before: (
+							position: absolute,
+							top: 0,
+							width: 50%,
+							height: 100%,
+							transform-origin: 100% 50%,
+							background-color: var(--color-gray),
+							border-radius: 100% 0 0 100% / 50% 0 0 50%,
+							[animation]: spin var(--alert-duration) linear,
+						),
+						after: (
+							position: absolute,
+							top: 0,
+							width: 50%,
+							height: 100%,
+							background-color: var(--color-white),
+							border-radius: 100% 0 0 100% / 50% 0 0 50%,
+							[animation]: pie-masks var(--alert-duration)
+								steps(1, end),
+							opacity: var(--opacity-0),
+						),
+					),
+				),
+				close-mask: (
+					display: block,
+				),
+			),
+			state: (
+				hover: (
+					element: (
+						close-mask: (
+							opacity: var(--opacity-0),
+							animation: none,
+						),
+						close: (
+							border-radius: var(--rounded),
+							background-image: var(--bg-close),
+							animation: none,
+							pseudo: (
+								before: (
+									opacity: var(--opacity-0),
+									animation: none,
+								),
+								after: (
+									opacity: var(--opacity-0),
+									animation: none,
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+		notification: (
+			padding: var(--spacing-0),
+			width: clamp(15dvw, 20rem, 80dvw),
+			border-color: var(--color-gray),
+			flex-direction: column,
+			align-items: none,
+			gap: var(--spacing-0),
+			element: (
+				header: (
+					padding: var(--spacing-sm),
+					background-color: var(--color-gray-darken-1),
+					color: var(--color-white),
 				),
 				title: (
-					color: var(--color-brand),
+					font-weight: var(--font-normal),
+					margin-right: auto,
+				),
+				icon: (
+					color: var(--color-white),
+				),
+				content: (
+					padding: var(--spacing-sm),
+					font-size: var(--text-xs),
+				),
+				footer: (
+					padding: 0 var(--spacing-sm) var(--spacing-sm)
+						var(--spacing-sm),
+				),
+				close: (
+					background-color: var(--color-surface-2),
+					border-radius: var(--rounded),
+					background-size: 70% auto,
+					inline-size: 1.1em,
+					block-size: 1.1em,
+				),
+			),
+			modifier: (
+				dismissable: (
+					padding-right: 0,
+					element: (
+						header: (
+							position: relative,
+							padding-right: calc(var(--spacing-md) * 2 + 1em),
+						),
+					),
+				),
+				success: (
+					border-color: var(--color-success),
+					element: (
+						header: (
+							background-color: var(--color-success),
+						),
+					),
+				),
+				danger: (
+					border-color: var(--color-danger),
+					element: (
+						header: (
+							background-color: var(--color-danger),
+						),
+					),
+				),
+				warning: (
+					border-color: var(--color-warning),
+					element: (
+						header: (
+							background-color: var(--color-warning),
+						),
+					),
+				),
+				info: (
+					border-color: var(--color-info),
+					element: (
+						header: (
+							background-color: var(--color-info),
+						),
+					),
+				),
+				accent: (
+					border-color: var(--color-accent),
+					element: (
+						header: (
+							background-color: var(--color-accent),
+						),
+					),
+				),
+				brand: (
+					border-color: var(--color-brand),
+					element: (
+						header: (
+							background-color: var(--color-brand),
+						),
+					),
 				),
 			),
 		),
 		callout: (
-			display: block,
+			box-shadow: none,
 			border-radius: var(--rounded-none),
 			border-width: 0 0 0 var(--spacing-4),
+			flex-direction: column,
+			align-items: none,
 			element: (
 				title: (
-					margin-bottom: var(--spacing-sm),
-					margin-right: 0,
 					text-transform: uppercase,
 				),
 				content: (
 					line-height: var(--leading-normal),
-					white-space: wrap,
 				),
 			),
 		),
-		icon: (
-			padding-left: calc(var(--spacing-md) * 2 + 1em),
+	),
+	transition: (
+		fade-inline-end: (
+			active: (
+				transition: var(--transition-all),
+			),
+			enter-from: (
+				opacity: var(--opacity-0),
+				transform: translateX(100%),
+			),
+			leave-to: (
+				opacity: var(--opacity-0),
+				transform: translateX(100%),
+			),
 		),
-		close: (
-			padding-right: calc(var(--spacing-md) * 2 + 1em),
+		fade-inline-start: (
+			active: (
+				transition: var(--transition-all),
+			),
+			enter-from: (
+				opacity: var(--opacity-0),
+				transform: translateX(-100%),
+			),
+			leave-to: (
+				opacity: var(--opacity-0),
+				transform: translateX(-100%),
+			),
+		),
+		fade-block-top: (
+			active: (
+				transition: var(--transition-all),
+			),
+			enter-from: (
+				opacity: var(--opacity-0),
+				transform: translateY(-100%),
+			),
+			leave-to: (
+				opacity: var(--opacity-0),
+				transform: translateY(-100%),
+			),
+		),
+		fade-block-bottom: (
+			active: (
+				transition: var(--transition-all),
+			),
+			enter-from: (
+				opacity: var(--opacity-0),
+				transform: translateY(100%),
+			),
+			leave-to: (
+				opacity: var(--opacity-0),
+				transform: translateY(100%),
+			),
+		),
+		fade: (
+			active: (
+				transition: var(--transition-opacity),
+			),
+			enter-from: (
+				opacity: var(--opacity-0),
+			),
+			leave-to: (
+				opacity: var(--opacity-0),
+			),
 		),
 	),
 ) !default;

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

@@ -26,8 +26,8 @@ $vv-dialog: (
 			flex-direction: column,
 			position: relative,
 			box-shadow: var(--shadow-lg),
-			width: clamp(30vw, 40rem, 90vw),
-			max-height: 90vh,
+			width: clamp(30dvw, 40rem, 90dvw),
+			max-height: 90dvh,
 			z-index: var(--z-modal),
 			background: var(--color-surface),
 			border-radius: var(--rounded-md),
@@ -145,7 +145,7 @@ $vv-dialog: (
 		small: (
 			element: (
 				wrapper: (
-					width: clamp(10vw, 25rem, 90vw),
+					width: clamp(10dvw, 25rem, 90dvw),
 				),
 			),
 		),

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

@@ -3,9 +3,8 @@ $vv-dropdown-option: (
 	min-width: 0,
 	overflow: hidden,
 	gap: var(--spacing-sm),
-	align-items: center,
+	align-items: flex-end,
 	padding: var(--spacing-sm),
-	white-space: nowrap,
 	state: (
 		disabled: (
 			opacity: var(--opacity-50),
@@ -60,5 +59,10 @@ $vv-dropdown-option: (
 			white-space: nowrap,
 			overflow: hidden,
 		),
+		label: (
+			text-overflow: ellipsis,
+			white-space: nowrap,
+			overflow: hidden,
+		),
 	),
 ) !default;

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

@@ -78,10 +78,10 @@ $vv-input-text: (
 				var(--input-spacing-right),
 			min-width: 0,
 			min-height: var(--input-min-height),
+			text-overflow: var(--input-text-overflow),
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
-					text-overflow: ellipsis,
 				),
 				calendar-picker-indicator: (
 					position: absolute,
@@ -206,7 +206,6 @@ $vv-input-text: (
 			white-space: var(--input-hint-white-space),
 			text-overflow: var(--input-hint-text-overflow),
 			overflow: var(--input-hint-overflow),
-			max-width: var(--input-hint-max-width),
 		),
 		limit: (
 			[padding-right]: var(--input-spacing-right),
@@ -290,6 +289,7 @@ $vv-input-text: (
 			),
 		),
 		floating: (
+			position: relative,
 			[margin-left]: var(--input-spacing-left),
 			[margin-right]: var(--input-spacing-right),
 			element: (

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

@@ -91,6 +91,8 @@ $vv-select: (
 			background-size: 1em,
 			min-height: var(--input-min-height),
 			gap: 0.5ch,
+			text-overflow: var(--input-text-overflow),
+			white-space: nowrap,
 			state: (
 				disabled: (
 					cursor: not-allowed,
@@ -138,7 +140,6 @@ $vv-select: (
 			white-space: var(--input-hint-white-space),
 			text-overflow: var(--input-hint-text-overflow),
 			overflow: var(--input-hint-overflow),
-			max-width: var(--input-hint-max-width),
 		),
 	),
 	modifier: (
@@ -234,6 +235,7 @@ $vv-select: (
 			),
 		),
 		floating: (
+			position: relative,
 			[margin-left]: var(--input-spacing-left),
 			[margin-right]: var(--input-spacing-right),
 			element: (

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

@@ -80,10 +80,10 @@ $vv-textarea: (
 			[padding]: var(--input-spacing-top) var(--input-spacing-right)
 				var(--input-spacing-bottom) var(--input-spacing-left),
 			overflow: auto,
+			text-overflow: var(--input-text-overflow),
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
-					text-overflow: ellipsis,
 				),
 			),
 			state: (
@@ -138,7 +138,6 @@ $vv-textarea: (
 			white-space: var(--input-hint-white-space),
 			text-overflow: var(--input-hint-text-overflow),
 			overflow: var(--input-hint-overflow),
-			max-width: var(--input-hint-max-width),
 		),
 	),
 	modifier: (
@@ -210,6 +209,7 @@ $vv-textarea: (
 			),
 		),
 		floating: (
+			position: relative,
 			[margin-left]: var(--input-spacing-left),
 			[margin-right]: var(--input-spacing-right),
 			element: (

package/src/themes/dark/components/_vv-alert.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-alert);
+$component-map: $dark-vv-alert;
+
+@mixin theme-dark-vv-alert {
+	@include spread-map-into-props(
+		$map: $component-map,
+		$prefix: $component-name
+	);
+}
+
+:where(:host, :root, .theme):not(.theme--light) {
+	@media (prefers-color-scheme: dark) {
+		@include theme-dark-vv-alert;
+	}
+}
+
+:where(.theme.theme--dark) {
+	@include theme-dark-vv-alert;
+}

package/src/themes/dark/components/index.scss

@@ -1 +1,2 @@
 @use 'vv-button';
+@use 'vv-alert';

package/src/themes/dark/settings/_index.scss

@@ -3,3 +3,4 @@
 @forward 'input';
 
 @forward 'components/vv-button';
+@forward 'components/vv-alert';

package/src/themes/dark/settings/components/_vv-alert.scss

@@ -0,0 +1,94 @@
+$dark-vv-alert: (
+	modifier: (
+		auto-close: (
+			element: (
+				close: (
+					background-color: var(--color-black),
+					pseudo: (
+						after: (
+							background-color: var(--color-black),
+						),
+					),
+				),
+			),
+		),
+		success: (
+			element: (
+				header: (
+					color: var(--color-success-lighten-3),
+				),
+			),
+		),
+		warning: (
+			element: (
+				header: (
+					color: var(--color-warning),
+				),
+			),
+		),
+		danger: (
+			element: (
+				header: (
+					color: var(--color-danger-lighten-5),
+				),
+			),
+		),
+		accent: (
+			element: (
+				header: (
+					color: var(--color-accent-lighten-4),
+				),
+			),
+		),
+		brand: (
+			element: (
+				header: (
+					color: var(--color-brand-lighten-2),
+				),
+			),
+		),
+		info: (
+			element: (
+				header: (
+					color: var(--color-info),
+				),
+			),
+		),
+		notification: (
+			element: (
+				header: (
+					background-color: var(--color-gray-darken-2),
+				),
+			),
+			modifier: (
+				danger: (
+					border-color: var(--color-danger-lighten-3),
+				),
+				brand: (
+					border-color: var(--color-brand-lighten-3),
+				),
+				success: (
+					border-color: var(--color-success-lighten-3),
+				),
+				accent: (
+					border-color: var(--color-accent-lighten-3),
+				),
+				warning: (
+					element: (
+						header: (
+							background-color: var(--color-warning-darken-5),
+						),
+					),
+				),
+				info: (
+					border-color: var(--color-info-darken-2),
+					element: (
+						header: (
+							background-color: var(--color-info-darken-5),
+						),
+					),
+				),
+			),
+		),
+	),
+);

package/src/tools/_mixins.scss

@@ -1048,7 +1048,7 @@
 			@each $state, $value in $states {
 				@if $state in [ 'enter-from', 'enter-active', 'enter-to',
 					'leave-from', 'leave-active', 'leave-to', 'active',
-					'inert' ] and type-of($value) == 'map'
+					'inert'] and type-of($value) == 'map'
 				{
 					$selector: '.#{$transition}';