@volverjs/style 0.1.2-beta.6 → 0.1.2-beta.8

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

@@ -1,8 +1,9 @@
 $vv-button: (
+	--button-border-width: var(--border-2),
 	position: relative,
 	background: var(--color-brand),
 	border-radius: 0.5ch,
-	border-width: var(--border-2),
+	[border-width]: var(--button-border-width),
 	border-style: solid,
 	border-color: var(--color-brand),
 	color: var(--color-white),
@@ -13,7 +14,7 @@ $vv-button: (
 	padding-block: 0.75ch,
 	padding-inline: 1.75ch,
 	text-shadow: 0 1px 0 var(--color-gray-darken-5),
-	transition: all 0.2s ease-in-out,
+	transition: all 0.3s ease-in-out,
 	will-change: all,
 	min-width: 0,
 	state: (
@@ -29,6 +30,10 @@ $vv-button: (
 			background: var(--color-brand-darken-2),
 			border-color: var(--color-brand-darken-2),
 		),
+		selected: (
+			background: var(--color-brand-darken-2),
+			border-color: var(--color-brand-darken-2),
+		),
 		disabled: (
 			opacity: 0.5,
 			cursor: not-allowed,
@@ -70,6 +75,10 @@ $vv-button: (
 					background: var(--color-gray-darken-5),
 					border-color: var(--color-gray-darken-5),
 				),
+				selected: (
+					background: var(--color-gray-darken-5),
+					border-color: var(--color-gray-darken-5),
+				),
 			),
 		),
 		secondary: (
@@ -88,6 +97,9 @@ $vv-button: (
 				active: (
 					background: var(--color-gray-lighten-3),
 				),
+				selected: (
+					background: var(--color-gray-lighten-3),
+				),
 			),
 		),
 		danger: (
@@ -106,6 +118,10 @@ $vv-button: (
 					background: var(--color-danger-darken-2),
 					border-color: var(--color-danger-darken-2),
 				),
+				selected: (
+					background: var(--color-danger-darken-2),
+					border-color: var(--color-danger-darken-2),
+				),
 			),
 		),
 		ghost: (
@@ -124,9 +140,12 @@ $vv-button: (
 				active: (
 					background: var(--color-gray-lighten-4),
 				),
+				selected: (
+					background: var(--color-gray-lighten-4),
+				),
 			),
 		),
-		text: (
+		link: (
 			background: transparent,
 			border-color: var(--color-word),
 			border-width: var(--border-0),
@@ -162,6 +181,10 @@ $vv-button: (
 					border-color: var(--color-gray-lighten-4),
 					background: var(--color-gray-lighten-4),
 				),
+				selected: (
+					border-color: var(--color-gray-lighten-4),
+					background: var(--color-gray-lighten-4),
+				),
 			),
 		),
 		static-dark: (
@@ -181,18 +204,22 @@ $vv-button: (
 					border-color: var(--color-gray-darken-3),
 					background: var(--color-gray-darken-3),
 				),
+				selected: (
+					border-color: var(--color-gray-darken-3),
+					background: var(--color-gray-darken-3),
+				),
 			),
 		),
 		action: (
+			--button-border-width: var(--border),
 			font-size: 0.875em,
 			background: var(--color-surface-1),
 			color: var(--color-word-1),
 			border-color: var(--color-word-5),
-			border-width: var(--border),
 			font-weight: var(--font-normal),
 			padding-inline: 0.75ch,
 			padding-block: 0.5ch,
-			line-height: var(--leading-none),
+			line-height: var(--leading-snug),
 			text-shadow: none,
 			state: (
 				focus-visible: (
@@ -213,21 +240,21 @@ $vv-button: (
 			element: (
 				icon: (
 					margin-inline: -0.125ch,
-					block-size: 1.4em,
-					inline-size: 1.4em,
+					block-size: calc(1em * var(--leading-snug)),
+					inline-size: calc(1em * var(--leading-snug)),
 				),
 			),
 		),
 		action-quiet: (
+			--button-border-width: var(--border),
 			font-size: var(--text-14),
 			background: transparent,
 			color: var(--color-word-1),
-			border-width: var(--border),
 			border-color: transparent,
 			font-weight: var(--font-normal),
 			padding-inline: 0.75ch,
 			padding-block: 0.5ch,
-			line-height: var(--leading-none),
+			line-height: var(--leading-snug),
 			text-shadow: none,
 			state: (
 				focus-visible: (
@@ -251,8 +278,8 @@ $vv-button: (
 			element: (
 				icon: (
 					margin-inline: -0.125ch,
-					block-size: 1.4em,
-					inline-size: 1.4em,
+					block-size: calc(1em * var(--leading-snug)),
+					inline-size: calc(1em * var(--leading-snug)),
 				),
 			),
 		),

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

@@ -29,6 +29,8 @@ $vv-card: (
 			display: block,
 			width: 100%,
 			height: auto,
+			object-fit: cover,
+			object-position: center,
 		),
 		content: (
 			padding: var(--spacing-md),
@@ -38,7 +40,6 @@ $vv-card: (
 		),
 		footer: (
 			_alias: '> footer',
-			background-color: var(--color-surface-1),
 			border-top: var(--border) solid var(--color-surface-4),
 			padding: var(--spacing-md),
 		),

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

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

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

@@ -14,6 +14,7 @@ $vv-input-checkbox: (
 			cursor: not-allowed,
 		),
 		readonly: (
+			opacity: 1,
 			cursor: default,
 			pointer-events: none,
 		),
@@ -55,7 +56,7 @@ $vv-input-checkbox: (
 					background-color: var(--color-word-5),
 					position: relative,
 					will-change: background-color,
-					transition: background-color 0.2s ease-in-out,
+					transition: background-color 0.3s ease-in-out,
 					pseudo: (
 						after: (
 							width: var(--spacing-20),
@@ -65,7 +66,7 @@ $vv-input-checkbox: (
 							inset: var(--spacing-2) 0 0 var(--spacing-2),
 							background: var(--color-white),
 							will-change: transform,
-							transition: transform 0.2s ease-in-out,
+							transition: transform 0.3s ease-in-out,
 						),
 					),
 					state: (

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

@@ -14,6 +14,7 @@ $vv-input-radio: (
 			cursor: not-allowed,
 		),
 		readonly: (
+			opacity: 1,
 			cursor: default,
 			pointer-events: none,
 		),
@@ -39,7 +40,7 @@ $vv-input-radio: (
 					border-radius: 50%,
 					transform: translate(-50%, -50%) scale(0),
 					will-change: transform,
-					transition: transform 0.2s ease-in-out,
+					transition: transform 0.3s ease-in-out,
 				),
 			),
 			state: (

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

@@ -25,7 +25,7 @@ $vv-input-text: (
 			overflow: hidden,
 			background-color: var(--input-background-color),
 			will-change: background-color,
-			transition: background-color 0.2s ease-in-out,
+			transition: background-color 0.3s ease-in-out,
 			pseudo: (
 				before: (
 					position: absolute,
@@ -41,7 +41,7 @@ $vv-input-text: (
 					transform: scaleX(0),
 					transform-origin: left,
 					will-change: transform,
-					transition: transform 0.2s ease-in-out,
+					transition: transform 0.3s ease-in-out,
 				),
 			),
 			state: (
@@ -248,7 +248,7 @@ $vv-input-text: (
 					margin: 0,
 					will-change: 'transform',
 					transform-origin: left,
-					transition: all 0.2s ease-in-out,
+					transition: all 0.3s ease-in-out,
 				),
 				input: (
 					pseudo: (

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

@@ -1 +1,57 @@
-$vv-nav: () !default;
+$vv-nav: (
+	--nav-item-padding: var(--spacing-xs) var(--spacing-sm),
+	element: (
+		menu: (
+			_alias: 'ul',
+			flex: 1,
+			display: flex,
+			flex-direction: column,
+			gap: var(--spacing-2),
+		),
+		item: (
+			_alias: 'li',
+		),
+		heading-label: (
+			_alias: '[aria-hidden="true"]',
+			display: block,
+			font-weight: var(--font-semibold),
+			[padding]: var(--nav-item-padding),
+		),
+		item-label: (
+			_alias: 'li > a',
+			display: block,
+			will-change: background-color color,
+			transition: all 0.3s ease-in-out,
+			border-radius: var(--rounded-md),
+			color: var(--color-word-3),
+			[padding]: var(--nav-item-padding),
+			state: (
+				hover: (
+					background-color: var(--color-surface-2),
+					color: var(--color-word-1),
+				),
+				active: (
+					background-color: var(--color-surface-3),
+				),
+				current: (
+					background-color: var(--color-surface-2),
+					color: var(--color-word-1),
+				),
+			),
+		),
+		divider: (
+			_alias: 'li[role="separator"]',
+			display: block,
+			margin-block: var(--spacing-16),
+			height: var(--spacing-px),
+			background-color: var(--color-surface-3),
+		),
+	),
+	modifier: (
+		menu: (
+			font-size: 0.9em,
+			display: flex,
+			flex-direction: column,
+		),
+	),
+) !default;

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

@@ -25,7 +25,7 @@ $vv-select: (
 			flex: 1,
 			background-color: var(--input-background-color),
 			will-change: background-color,
-			transition: background-color 0.2s ease-in-out,
+			transition: background-color 0.3s ease-in-out,
 			pseudo: (
 				before: (
 					position: absolute,
@@ -41,7 +41,7 @@ $vv-select: (
 					transform: scaleX(0),
 					transform-origin: left,
 					will-change: transform,
-					transition: transform 0.2s ease-in-out,
+					transition: transform 0.3s ease-in-out,
 				),
 			),
 			state: (
@@ -170,7 +170,81 @@ $vv-select: (
 							background: var(--color-brand-lighten-5),
 						),
 						after: (
-							animation: progress 2.2s infinite,
+							animation: var(--animate-indeterminate),
+						),
+					),
+				),
+			),
+		),
+		floating: (
+			[margin-left]: var(--input-padding-left),
+			[margin-right]: var(--input-padding-right),
+			element: (
+				wrapper: (
+					[margin-left]: calc(var(--input-padding-left) * -1),
+					[margin-right]: calc(var(--input-padding-right) * -1),
+				),
+				hint: (
+					[margin-left]: calc(var(--input-padding-left) * -1),
+					[margin-right]: calc(var(--input-padding-right) * -1),
+				),
+				label: (
+					position: absolute,
+					z-index: 1,
+					pointer-events: none,
+					font-size: inherit,
+					[padding-top]: var(--input-padding-top),
+					[padding-bottom]: var(--input-padding-bottom),
+					padding-inline: 0,
+					margin: 0,
+					will-change: 'transform',
+					transform-origin: left,
+					transition: all 0.3s ease-in-out,
+				),
+				input: (
+					pseudo: (
+						placeholder: (
+							opacity: 0,
+						),
+					),
+				),
+			),
+			state: (
+				focus-within: (
+					element: (
+						label: (
+							transform: translateY(-1.2ch),
+							font-size: var(--text-12),
+						),
+						input: (
+							[padding-top]:
+								calc(var(--input-padding-top) + 0.85ch),
+							[padding-bottom]:
+								calc(var(--input-padding-bottom) - 0.85ch),
+							pseudo: (
+								placeholder: (
+									opacity: 1,
+								),
+							),
+						),
+					),
+				),
+				dirty: (
+					element: (
+						label: (
+							transform: translateY(-1.2ch),
+							font-size: var(--text-12),
+						),
+						input: (
+							[padding-top]:
+								calc(var(--input-padding-top) + 0.85ch),
+							[padding-bottom]:
+								calc(var(--input-padding-bottom) - 0.85ch),
+							pseudo: (
+								placeholder: (
+									opacity: 1,
+								),
+							),
 						),
 					),
 				),

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

@@ -1,11 +1,18 @@
 $vv-table: (
+	--table-cell-padding: var(--spacing-md) 0,
 	width: 100%,
+	border-collapse: collapse,
+	border-color: var(--color-surface-5),
 	element: (
 		tr: (
 			_alias: 'tr',
 			border-width: 0 0 1px 0,
 			border-style: solid,
-			border-color: var(--color-alpha-1),
+			border-color: var(--color-surface-5),
+		),
+		tbody-tr: (
+			_alias: 'tbody > tr',
+			border-color: var(--color-surface-3),
 			state: (
 				last-child: (
 					border-width: 0,
@@ -15,15 +22,21 @@ $vv-table: (
 		th: (
 			_alias: 'th',
 			font-weight: semibold,
-			padding-block: var(--spacing-md),
 			font-size: var(--text-sm),
 			color: var(--color-word-2),
+			[padding]: var(--table-cell-padding),
 		),
 		td: (
 			_alias: 'td',
-			padding-block: var(--spacing-md),
 			border-style: solid,
 			font-size: var(--text-xs),
+			[padding]: var(--table-cell-padding),
+		),
+	),
+	modifier: (
+		inline-spacing: (
+			--table-cell-padding: var(--spacing-md),
+			border-width: 0,
 		),
 	),
 ) !default;

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

@@ -4,7 +4,6 @@ $vv-text: (
 	line-height: var(--leading-normal),
 	modifier: (
 		headline: (
-			font-family: var(--font-serif),
 			font-weight: var(--font-semibold),
 			line-height: var(--leading-tight),
 			margin-top: var(--spacing-24),

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

@@ -25,7 +25,7 @@ $vv-textarea: (
 			overflow: hidden,
 			background-color: var(--input-background-color),
 			will-change: background-color,
-			transition: background-color 0.2s ease-in-out,
+			transition: background-color 0.3s ease-in-out,
 			pseudo: (
 				before: (
 					position: absolute,
@@ -41,7 +41,7 @@ $vv-textarea: (
 					transform: scaleX(0),
 					transform-origin: left,
 					will-change: transform,
-					transition: transform 0.2s ease-in-out,
+					transition: transform 0.3s ease-in-out,
 				),
 			),
 			state: (
@@ -196,7 +196,7 @@ $vv-textarea: (
 					margin: 0,
 					will-change: 'transform',
 					transform-origin: left,
-					transition: all 0.2s ease-in-out,
+					transition: all 0.3s ease-in-out,
 				),
 				input: (
 					pseudo: (

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

@@ -2,7 +2,7 @@
 @import '../context';
 
 $component-name: map.get($components-names, vv-button);
-$component-map: $vv-button;
+$component-map: $dark-vv-button;
 $props: true;
 
 @mixin theme-dark-vv-button {

package/src/themes/dark/components/_vv-input-checkbox.scss

@@ -2,7 +2,7 @@
 @import '../context';
 
 $component-name: map.get($components-names, vv-input-checkbox);
-$component-map: $vv-input-checkbox;
+$component-map: $dark-vv-input-checkbox;
 $props: true;
 
 @mixin theme-dark-vv-input-checkbox {

package/src/themes/dark/props/_background.scss

@@ -1,7 +1,7 @@
 @import '../context';
 
 @mixin theme-dark-bg {
-	@include spread-map-into-props($background-image, 'bg');
+	@include spread-map-into-props($dark-background-image, 'bg');
 }
 
 :where(:host, :root, .theme):not(.theme--light) {

package/src/themes/dark/props/_colors.scss

@@ -1,7 +1,7 @@
 @import '../context';
 
 @mixin theme-dark-colors {
-	@include spread-map-into-props($colors, 'color');
+	@include spread-map-into-props($dark-colors, 'color');
 }
 
 :where(:host, :root, .theme):not(.theme--light) {

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

@@ -1,12 +1,12 @@
 // background-image
-$background-image: (
+$dark-background-image: (
 	none: none,
 	chevron:
-		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"),
+		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($dark-color-word)})' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"),
 	grid:
 		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E"),
 	check:
-		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"),
+		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($dark-color-word)})' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"),
 	minus:
-		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"),
+		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($dark-color-word)})' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"),
 ) !default;

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

@@ -1,15 +1,15 @@
 @use 'sass:color';
 
-$color-scheme: dark !default;
-$color-brand: #1976d2 !default;
-$color-word: hsl(color.hue($color-brand) 15% 85%) !default;
-$color-surface: hsl(color.hue($color-brand) 10% 5%) !default;
-$color-alpha: hsla(0deg 0% 100% / 0%) !default;
+$dark-color-scheme: dark !default;
+$dark-color-brand: #1976d2 !default;
+$dark-color-word: hsl(color.hue($dark-color-brand) 15% 85%) !default;
+$dark-color-surface: hsl(color.hue($dark-color-brand) 10% 5%) !default;
+$dark-color-alpha: hsla(0deg 0% 100% / 0%) !default;
 
 // color map
-$colors: (
-	scheme: $color-scheme,
-	word: color-darken-map($color-word, 'word', $scale: 15%),
-	surface: color-lighten-map($color-surface, 'surface', $scale: 5%),
-	alpha: color-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 5%),
+$dark-colors: (
+	scheme: $dark-color-scheme,
+	word: color-darken-map($dark-color-word, 'word', $scale: 15%),
+	surface: color-lighten-map($dark-color-surface, 'surface', $scale: 5%),
+	alpha: color-alpha-map($dark-color-alpha, 'alpha', $steps: 5, $scale: 5%),
 ) !default;

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

@@ -1,4 +1,4 @@
-$vv-button: (
+$dark-vv-button: (
 	modifier: (
 		primary: (
 			border-color: var(--color-gray-lighten-3),

package/src/themes/dark/settings/components/_vv-input-checkbox.scss

@@ -1,10 +1,10 @@
-$vv-input-checkbox: (
+$dark-vv-input-checkbox: (
 	element: (
 		input: (
 			state: (
 				checked: (
 					background-image:
-						url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"),
+						url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($dark-color-word)})' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"),
 				),
 			),
 		),
@@ -16,7 +16,7 @@ $vv-input-checkbox: (
 					state: (
 						checked: (
 							background-image:
-								url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"),
+								url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($dark-color-word)})' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"),
 						),
 					),
 				),

package/src/tools/_mixins.scss

@@ -397,7 +397,8 @@
 					close,
 					determinate,
 					indeterminate,
-					selected
+					selected,
+					current
 				),
 				$state
 			)
@@ -480,16 +481,30 @@
 								'#{$modifier}#{$alias}[#{$state}]'
 							);
 						}
+
+						@if $state == 'disabled' {
+							$selectors: list.join(
+								$selectors,
+								'#{$modifier}#{$block-item}[aria-disabled="true"]'
+							);
+
+							@if $alias {
+								$selectors: list.join(
+									$selectors,
+									'#{$modifier}#{$alias}[aria-disabled="true"]'
+								);
+							}
+						}
 					} @else if $state == 'focus-visible' {
 						$selectors: list.join(
 							$selectors,
-							'#{$modifier}#{$block-item}:not(:active):not([disabled]):not([tabindex="-1"]):#{$state}'
+							'#{$modifier}#{$block-item}:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled="true"])):#{$state}'
 						);
 
 						@if $alias {
 							$selectors: list.join(
 								$selectors,
-								'#{$modifier}#{$alias}:not(:active):not([disabled]):not([tabindex="-1"]):#{$state}'
+								'#{$modifier}#{$alias}:not(:active):not([disabled]):not([tabindex="-1"]:not([aria-disabled="true"])):#{$state}'
 							);
 						}
 					} @else if $state == 'checked' {
@@ -504,7 +519,19 @@
 								'#{$modifier}#{$alias}:#{$state}'
 							);
 						}
-					} @else if $state != 'selected' {
+					} @else if $state == 'selected' {
+						$selectors: list.join(
+							$selectors,
+							'#{$modifier}#{$block-item}[aria-selected="true"]'
+						);
+
+						@if $alias {
+							$selectors: list.join(
+								$selectors,
+								'#{$modifier}#{$alias}[aria-selected="true"]'
+							);
+						}
+					} @else if $state != 'current' {
 						$selectors: list.join(
 							$selectors,
 							'#{$modifier}#{$block-item}:not([disabled]):#{$state}'