fix(select): select design and functionality changes.

packages/assets/css/src/scss/_components/_dropdown/_dropdown.scss

@@ -8,6 +8,7 @@
 @include sui-dropdown--element.build-cta(dropdown);
 @include sui-dropdown--element.build-menu-group(dropdown);
 @include sui-dropdown--element.build-menu-item(dropdown);
+@include sui-dropdown--element.build-menu-items(dropdown);
 
 @include sui-dropdown--modifier.modify-size(dropdown);
 @include sui-dropdown--modifier.modify-placement(dropdown);
@@ -16,3 +17,6 @@
 @include sui-dropdown--state.edit-hover(dropdown);
 @include sui-dropdown--state.edit-disabled(dropdown);
 @include sui-dropdown--state.edit-variation(dropdown);
+@include sui-dropdown--state.edit-fluid(dropdown);
+@include sui-dropdown--state.edit-current(dropdown);
+@include sui-dropdown--state.edit-type(dropdown);

packages/assets/css/src/scss/_components/_dropdown/_elements/_dropdown-menu-group.scss

@@ -26,7 +26,7 @@
 				line-height: $font-height-xs;
 				font-weight: $font-weight-md;
 				letter-spacing: $font-spacing-xxl;
-				padding: $spacing-md $menu-spacing-horizontal;
+				padding: $spacing-md $spacing-lg;
 				text-transform: uppercase;
 			}
 

packages/assets/css/src/scss/_components/_dropdown/_elements/_dropdown-menu-item.scss

@@ -18,12 +18,48 @@
 				align-items: center;
 				cursor: pointer;
 				display: flex;
-				font-weight: $font-weight-md;
+				font: $font-weight-default #{$font-size-xs}/#{$font-height-xs}
+					$font-family-default;
 				gap: $spacing-md;
 				list-style: none;
+				line-height: $font-height-sm;
 				margin: 0;
-				padding: $spacing-md $menu-spacing-horizontal;
+				padding: $spacing-sm $spacing-lg;
 				text-decoration: none;
+
+				@include modifier(wrapper) {
+					display: flex;
+					gap: $spacing-sm;
+					flex: 1;
+					align-items: flex-start;
+
+					.sui-#{$block}__menu-item-icon {
+						margin-top: $spacing-xs;
+					}
+				}
+
+				@include modifier(title) {
+					font-weight: $font-weight-md;
+				}
+
+				@include modifier(loading) {
+					align-items: center;
+					align-self: stretch;
+					background: $color-extended-neutral-95;
+					border-radius: $border-radius-md;
+					display: flex;
+					font: $font-weight-default #{$font-size-xs}/#{$font-height-xs}
+						$font-family-default;
+					gap: $spacing-md;
+					padding: $spacing-default;
+					margin: 0 $spacing-md $spacing-md;
+				}
+
+				@include modifier(loading-alt) {
+					background: transparent;
+					padding: $spacing-md $spacing-lg;
+					margin: 0;
+				}
 			}
 
 			@include element(menu) {

packages/assets/css/src/scss/_components/_dropdown/_elements/_dropdown-menu-items.scss

@@ -0,0 +1,35 @@
+@use "sass:map";
+
+@use "../../../_utils/utils" as *;
+
+/// Build menu items
+///
+/// @type block
+/// @author WPMU DEV
+///
+/// @param {String} $block - Main block name
+@mixin build-menu-items($block) {
+	// DIR: Left to right.
+	// THEME: None.
+	@include sui-class($rtl: false, $theme: null) {
+		// Block wrapper.
+		@include block($block) {
+			@include element(menu-items) {
+				max-height: $dropdown-size-height-md;
+				overflow-y: auto;
+				margin: 0;
+			}
+		}
+	}
+
+	// DIR: Left to right.
+	// THEME: Dark.
+	@include sui-class($rtl: false, $theme: dark) {
+		// Block wrapper.
+		@include block($block) {
+			@include element(menu-items) {
+				background: $color-extended-neutral-100;
+			}
+		}
+	}
+}

packages/assets/css/src/scss/_components/_dropdown/_elements/_dropdown-menu.scss

@@ -13,6 +13,10 @@
 				margin: 0;
 				padding: 0;
 			}
+
+			@include element(menu-nav-search) {
+				padding: 0px 12px 8px 12px;
+			}
 		}
 	}
 }

packages/assets/css/src/scss/_components/_dropdown/_elements/_dropdown-popover.scss

@@ -12,8 +12,7 @@
 	@include sui-class($rtl: false, $theme: null) {
 		@include block($block-name) {
 			@include element(popover) {
-				width: $dropdown-size-width-md;
-				overflow-y: auto;
+				min-width: 120px;
 				z-index: 100;
 				position: absolute;
 				top: 100%;
@@ -27,10 +26,22 @@
 						$color-shadow-default,
 					0 $shadow-offset-2xs $shadow-offset-xl $color-shadow-light,
 					0 $shadow-offset-xs $shadow-offset-sm $color-shadow-dark;
-				max-width: $dropdown-size-width-sm;
 
-				@include modifier(fixed-height) {
-					max-height: $dropdown-size-height-md;
+				@include modifier(select-variable) {
+					.sui-#{$block-name}__menu-item {
+						line-height: $font-height-xs;
+						border-bottom: $border-width-sm solid $color-extended-neutral-80;
+
+						&:last-child {
+							border-bottom: 0;
+						}
+					}
+				}
+
+				@include modifier(select-checkbox, select-variable) {
+					.sui-#{$block-name}__menu-item {
+						padding: $spacing-md $spacing-lg;
+					}
 				}
 			}
 		}

packages/assets/css/src/scss/_components/_dropdown/_elements/_elements.scss

@@ -3,4 +3,5 @@
 @forward "./dropdown-popover";
 @forward "./dropdown-menu";
 @forward "./dropdown-menu-group";
+@forward "./dropdown-menu-items";
 @forward "./dropdown-menu-item";

packages/assets/css/src/scss/_components/_dropdown/_modifiers/_dropdown-placement.scss

@@ -14,6 +14,11 @@
 					left: auto;
 					right: 0;
 				}
+
+				@include modifier(placement-top) {
+					top: auto;
+					bottom: 100%;
+				}
 			}
 		}
 	}

packages/assets/css/src/scss/_components/_dropdown/_states/_dropdown-open.scss

@@ -10,7 +10,7 @@
 	@include sui-class($rtl: false, $theme: null) {
 		@include block($block-name) {
 			@include modifier(open) {
-				@include modifies-element(popover) {
+				& > .sui-#{$block-name}__popover {
 					display: block;
 				}
 			}

packages/assets/css/src/scss/_components/_dropdown/_states/_edit-current.scss

@@ -0,0 +1,33 @@
+@use "../../../_utils/utils" as *;
+
+/// Edit Current State
+///
+/// @type state
+/// @author WPMU DEV
+///
+/// @param {String} $block - Main block name
+@mixin edit-current($block) {
+	// DIR: Left to right.
+	// THEME: None.
+	@include sui-class($rtl: false, $theme: null) {
+		@include block($block) {
+			@include element(menu) {
+				.sui-#{$block}__menu-item--current {
+					color: #0059ff;
+				}
+			}
+		}
+	}
+
+	// DIR: Left to right.
+	// THEME: Dark.
+	@include sui-class($rtl: false, $theme: dark) {
+		@include block($block) {
+			@include element(menu) {
+				.sui-#{$block}__menu-item--current {
+					color: #0059ff;
+				}
+			}
+		}
+	}
+}

packages/assets/css/src/scss/_components/_dropdown/_states/_edit-disabled.scss

@@ -13,6 +13,7 @@
 		@include block($block) {
 			@include element(menu-item) {
 				@include modifier(disabled) {
+					color: $color-extended-neutral-10;
 					opacity: 0.5;
 					pointer-events: none;
 					user-select: none;

packages/assets/css/src/scss/_components/_dropdown/_states/_edit-fluid.scss

@@ -0,0 +1,21 @@
+@use "../../../_utils/utils" as *;
+
+/// Fluid popover
+///
+/// @type state
+/// @author WPMU DEV
+///
+/// @param {String} $block - Main block name
+@mixin edit-fluid($block) {
+	// DIR: Left to right.
+	// THEME: None.
+	@include sui-class($rtl: false, $theme: null) {
+		@include block($block) {
+			@include element(popover) {
+				@include modifier(fluid) {
+					min-width: 100%;
+				}
+			}
+		}
+	}
+}

packages/assets/css/src/scss/_components/_dropdown/_states/_edit-type.scss

@@ -0,0 +1,36 @@
+@use "../../../_utils/utils" as *;
+
+/// Edit Type
+///
+/// @type state
+/// @author WPMU DEV
+///
+/// @param {String} $block - Main block name
+@mixin edit-type($block) {
+	@include sui-class($rtl: false, $theme: null) {
+		@include block($block) {
+			@include element(popover) {
+				@include modifier(select) {
+					width: 100%;
+				}
+
+				@include modifier(select-checkbox) {
+					width: 100%;
+				}
+			}
+		}
+	}
+
+	@include sui-class($rtl: false, $theme: dark) {
+		@include block($block) {
+			@include element(menu-item) {
+				.sui-#{$block}__menu-item-icon {
+					color: inherit;
+				}
+				@include modifier(hover) {
+					background: $color-extended-neutral-0;
+				}
+			}
+		}
+	}
+}

packages/assets/css/src/scss/_components/_dropdown/_states/_edit-variation.scss

@@ -141,6 +141,20 @@
 						background: $color-secondary-beehive-general-70;
 					}
 				}
+
+				@include modifier(danger) {
+					&:not(.sui-#{$block}__menu-item--disabled) {
+						color: #f45c59;
+
+						.sui-#{$block}__menu-item-icon {
+							color: #f45c59;
+						}
+
+						&.sui-#{$block}__menu-item--hover {
+							background: #feefee;
+						}
+					}
+				}
 			}
 		}
 	}

packages/assets/css/src/scss/_components/_dropdown/_states/_states.scss

@@ -2,3 +2,6 @@
 @forward "./edit-disabled";
 @forward "./edit-hover";
 @forward "./edit-variation";
+@forward "./edit-fluid";
+@forward "./edit-current";
+@forward "./edit-type";

packages/assets/css/src/scss/_components/_input/_elements/_build-input.scss

@@ -48,6 +48,7 @@
 					background: transparent;
 					border: none;
 					outline: none;
+					padding: $spacing-md;
 				}
 			}
 

packages/assets/css/src/scss/_components/_navigation/_elements/_navigation-container.scss

@@ -8,32 +8,49 @@
 ///
 /// @param {String} $block - Main block name
 @mixin build-container($block) {
-    // DIR: Left to right.
-    // THEME: None.
-    @include sui-class($rtl: false, $theme: null) {
-        @include block($block) {
-            align-items: center;
-            background-color: $color-extended-neutral-100;
-            display: flex;
-            gap: $spacing-lg;
-            justify-content: space-between;
-            padding: $spacing-lg $spacing-xxl;
+	// DIR: Left to right.
+	// THEME: None.
+	@include sui-class($rtl: false, $theme: null) {
+		@include block($block) {
+			align-items: center;
+			background-color: $color-extended-neutral-100;
+			display: flex;
+			gap: $spacing-lg;
+			justify-content: space-between;
+			padding: $spacing-lg $spacing-xxl;
 
-            @include media(max-width, md) {
-                padding: $spacing-xl;
-            }
-
-            @include media(max-width, sm) {
-                padding: $spacing-lg;
-            }
-        }
-    }
+			.sui-dropdown__popover {
+				.sui-dropdown__menu-group-title {
+					padding: $spacing-md $spacing-xl;
+				}
 
-    // DIR: Left to right.
-    // THEME: Dark.
-    @include sui-class($rtl: false, $theme: dark) {
-        @include block($block) {
-            border: $border-width-sm solid $color-extended-neutral-0;
-        }
-    }
+				.sui-dropdown__menu-item {
+					padding: $spacing-md $spacing-xl;
+					font: $font-weight-md #{$font-size-default}/#{$font-height-sm}
+						$font-family-default;
+					color: $color-extended-neutral-50;
+
+					&.sui-dropdown__menu-item--hover {
+						color: $color-extended-neutral-0;
+					}
+				}
+			}
+
+			@include media(max-width, md) {
+				padding: $spacing-xl;
+			}
+
+			@include media(max-width, sm) {
+				padding: $spacing-lg;
+			}
+		}
+	}
+
+	// DIR: Left to right.
+	// THEME: Dark.
+	@include sui-class($rtl: false, $theme: dark) {
+		@include block($block) {
+			border: $border-width-sm solid $color-extended-neutral-0;
+		}
+	}
 }