@clayui/css 3.95.2 → 3.98.0

package/src/scss/cadmin/variables/_pagination.scss

@@ -86,12 +86,15 @@ $cadmin-pagination-link-hover: map-deep-merge(
 	(
 		background-color: $cadmin-pagination-hover-bg,
 		border-color: $cadmin-pagination-hover-border-color,
-		box-shadow: inset 0 -0.125rem 0 0 $cadmin-secondary-l0,
 		color: $cadmin-pagination-hover-color,
 		font-weight: $cadmin-font-weight-semi-bold,
 		letter-spacing: 0,
 		text-decoration: none,
 		z-index: 2,
+		before: (
+			background-color: $cadmin-secondary-l0,
+			height: 3px,
+		),
 	),
 	$cadmin-pagination-link-hover
 );
@@ -125,7 +128,6 @@ $cadmin-pagination-link-active: map-deep-merge(
 	(
 		background-color: $cadmin-pagination-active-bg,
 		border-color: $cadmin-pagination-active-border-color,
-		box-shadow: inset 0 -0.125rem 0 0 $cadmin-primary-l0,
 		color: $cadmin-pagination-active-color,
 		font-weight: $cadmin-font-weight-semi-bold,
 		letter-spacing: 0,
@@ -145,6 +147,9 @@ $cadmin-pagination-link-disabled: map-deep-merge(
 		opacity: $cadmin-pagination-disabled-opacity,
 		pointer-events: $cadmin-pagination-disabled-pointer-events,
 		z-index: $cadmin-zindex-pagination-link-disabled,
+		before: (
+			content: none,
+		),
 		focus: (
 			after: (
 				content: none,
@@ -177,6 +182,15 @@ $cadmin-pagination-link: map-deep-merge(
 		padding-top: $cadmin-pagination-padding-y,
 		position: relative,
 		transition: $cadmin-pagination-link-transition,
+		before: (
+			border-radius: 0 0 $cadmin-border-radius $cadmin-border-radius,
+			bottom: 0,
+			content: '',
+			display: block,
+			left: 0,
+			position: absolute,
+			right: 0,
+		),
 		hover: $cadmin-pagination-link-hover,
 		focus: $cadmin-pagination-link-focus,
 		active: $cadmin-pagination-link-active,
@@ -184,15 +198,26 @@ $cadmin-pagination-link: map-deep-merge(
 			background-color: $cadmin-pagination-active-bg,
 			border-color: $cadmin-pagination-active-border-color,
 			color: $cadmin-pagination-active-color,
-			box-shadow: inset 0 -0.25rem 0 0 $cadmin-primary-l0,
 			font-weight: $cadmin-font-weight-semi-bold,
 			letter-spacing: 0,
+			before: (
+				background-color: $cadmin-primary-l0,
+				height: 4px,
+			),
 		),
 		disabled: $cadmin-pagination-link-disabled,
 		show: (
-			box-shadow: inset 0 -0.25rem 0 0 $cadmin-primary-l0,
 			font-weight: $cadmin-font-weight-semi-bold,
 			letter-spacing: 0,
+			before: (
+				background-color: transparent,
+			),
+			hover: (
+				before: (
+					background-color: $cadmin-secondary-l0,
+					height: 3px,
+				),
+			),
 		),
 		lexicon-icon: (
 			margin-top: 0,
@@ -359,8 +384,18 @@ $cadmin-pagination-items-per-page-link-disabled: map-deep-merge(
 		box-shadow: none,
 		color: $cadmin-pagination-disabled-color,
 		cursor: $cadmin-pagination-disabled-cursor,
+		font-weight: $cadmin-font-weight-normal,
 		opacity: $cadmin-pagination-disabled-opacity,
 		pointer-events: $cadmin-pagination-disabled-pointer-events,
+		letter-spacing: 0.033em,
+		before: (
+			content: none,
+		),
+		focus: (
+			after: (
+				content: none,
+			),
+		),
 	),
 	$cadmin-pagination-items-per-page-link-disabled
 );
@@ -386,6 +421,15 @@ $cadmin-pagination-items-per-page-link: map-deep-merge(
 		padding-top: $cadmin-pagination-padding-y,
 		text-decoration: none,
 		transition: $cadmin-pagination-items-per-page-transition,
+		before: (
+			border-radius: 0 0 $cadmin-border-radius $cadmin-border-radius,
+			bottom: 0,
+			content: '',
+			display: block,
+			left: 0,
+			position: absolute,
+			right: 0,
+		),
 		hover: $cadmin-pagination-items-per-page-link-hover,
 		focus: $cadmin-pagination-items-per-page-link-focus,
 		active: $cadmin-pagination-items-per-page-link-active,

package/src/scss/cadmin/variables/_tables.scss

@@ -202,7 +202,7 @@ $cadmin-table-title-link: map-deep-merge(
 	(
 		border-radius: 1px,
 		color: $cadmin-gray-900,
-		display: inline-block,
+		display: inline-flex,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
 		hover: (
@@ -223,7 +223,7 @@ $cadmin-table-link: map-deep-merge(
 	(
 		border-radius: 1px,
 		color: $cadmin-gray-900,
-		display: inline-block,
+		display: inline-flex,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
 		hover: (
@@ -641,7 +641,7 @@ $cadmin-table-list-title-link: map-deep-merge(
 	(
 		border-radius: 1px,
 		color: $cadmin-gray-900,
-		display: inline-block,
+		display: inline-flex,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
 		hover: (
@@ -662,7 +662,7 @@ $cadmin-table-list-link: map-deep-merge(
 	(
 		border-radius: 1px,
 		color: $cadmin-gray-900,
-		display: inline-block,
+		display: inline-flex,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
 		hover: (

package/src/scss/cadmin/variables/_utilities.scss

@@ -370,41 +370,6 @@ $cadmin-border-theme-colors: map-deep-merge(
 $cadmin-displays: none, inline, inline-block, grid, block, contents, table,
 	table-row, table-cell, flex, inline-flex !default;
 
-$cadmin-displays-c-prefers-reduced-motion: () !default;
-$cadmin-displays-c-prefers-reduced-motion: map-deep-merge(
-	(
-		d-block-c-prefers-reduced-motion: (
-			display: none !important,
-		),
-		d-inline-block-c-prefers-reduced-motion: (
-			display: none !important,
-		),
-		'@media (prefers-reduced-motion: reduce)': (
-			d-none-c-prefers-reduced-motion: (
-				display: none !important,
-			),
-			d-block-c-prefers-reduced-motion: (
-				display: block !important,
-			),
-			d-inline-block-c-prefers-reduced-motion: (
-				display: inline-block !important,
-			),
-		),
-		c-prefers-reduced-motion: (
-			d-none-c-prefers-reduced-motion: (
-				display: none !important,
-			),
-			d-block-c-prefers-reduced-motion: (
-				display: block !important,
-			),
-			d-inline-block-c-prefers-reduced-motion: (
-				display: inline-block !important,
-			),
-		),
-	),
-	$cadmin-displays-c-prefers-reduced-motion
-);
-
 // Overflow
 
 $cadmin-overflows: auto, hidden !default;
@@ -577,7 +542,117 @@ $cadmin-text-decorations: map-deep-merge(
 	$cadmin-text-decorations
 );
 
-// Transitions
+// Text Truncate
+
+$cadmin-text-truncate: () !default;
+$cadmin-text-truncate: map-merge(
+	(
+		display: block,
+		overflow: hidden,
+		text-overflow: ellipsis,
+		white-space: nowrap,
+	),
+	$cadmin-text-truncate
+);
+
+// Text Truncate Inline
+
+$cadmin-text-truncate-inline: () !default;
+$cadmin-text-truncate-inline: map-deep-merge(
+	(
+		display: inline-flex,
+		max-width: 100%,
+		text-truncate: (
+			display: inline-block,
+			max-width: 100%,
+			overflow: hidden,
+			text-overflow: ellipsis,
+			vertical-align: bottom,
+			white-space: nowrap,
+			word-wrap: normal,
+		),
+	),
+	$cadmin-text-truncate-inline
+);
+
+// C Prefers
+
+$cadmin-c-prefers-link-underline: () !default;
+$cadmin-c-prefers-link-underline: map-deep-merge(
+	(
+		'.c-prefers-link-underline .cadmin': (
+			'[href]:not(.disabled):not([role="button"])': (
+				text-decoration: underline !important,
+			),
+			'.btn-monospaced, .nav-btn-monospaced, .nav-link-monospaced': (
+				'&[href]:not(.disabled):not([role="button"]):not([role="tab"])::after':
+				(
+					content: '\00a0\00a0\00a0',
+					position: absolute,
+					text-decoration: underline !important,
+				),
+			),
+			'.multi-step-item.active, .multi-step-item.complete, .multi-step-item.error, .dropdown':
+			(
+				'.multi-step-icon[href]:not([role="button"])::after': (
+					content: '\00a0\00a0\00a0',
+					position: absolute,
+					text-decoration: underline !important,
+				),
+			),
+			'.multi-step-item.disabled .multi-step-icon[href]:not([role="button"])::after':
+			(
+				text-decoration: none !important,
+			),
+		),
+	),
+	$cadmin-c-prefers-link-underline
+);
+
+$cadmin-c-prefers-letter-spacing: () !default;
+$cadmin-c-prefers-letter-spacing: map-deep-merge(
+	(
+		'.c-prefers-letter-spacing-1 .cadmin': (
+			letter-spacing: 1px !important,
+		),
+	),
+	$cadmin-c-prefers-letter-spacing
+);
+
+$cadmin-displays-c-prefers-reduced-motion: () !default;
+$cadmin-displays-c-prefers-reduced-motion: map-deep-merge(
+	(
+		'.cadmin .d-block-c-prefers-reduced-motion': (
+			display: none !important,
+		),
+		'.cadmin .d-inline-block-c-prefers-reduced-motion': (
+			display: none !important,
+		),
+		'@media (prefers-reduced-motion: reduce)': (
+			'.cadmin .d-none-c-prefers-reduced-motion': (
+				display: none !important,
+			),
+			'.cadmin .d-block-c-prefers-reduced-motion': (
+				display: block !important,
+			),
+			'.cadmin .d-inline-block-c-prefers-reduced-motion': (
+				display: inline-block !important,
+			),
+		),
+		'.c-prefers-reduced-motion .cadmin': (
+			'.d-none-c-prefers-reduced-motion': (
+				display: none !important,
+			),
+			'.d-block-c-prefers-reduced-motion': (
+				display: block !important,
+			),
+			'.d-inline-block-c-prefers-reduced-motion': (
+				display: inline-block !important,
+			),
+		),
+	),
+	$cadmin-displays-c-prefers-reduced-motion
+);
 
 $cadmin-c-prefers-reduced-motion: () !default;
 $cadmin-c-prefers-reduced-motion: map-merge(

package/src/scss/components/_date-picker.scss

@@ -26,6 +26,10 @@
 	select.form-control {
 		@include clay-select-variant($date-picker-nav-select);
 	}
+
+	.form-control-select {
+		@include clay-select-variant($date-picker-nav-select);
+	}
 }
 
 .date-picker-nav-item {

package/src/scss/components/_forms.scss

@@ -119,31 +119,7 @@ fieldset[disabled] .form-control {
 // text (without any border, background color, focus indicator)
 
 .form-control-plaintext {
-	background-clip: border-box;
-	background-color: transparent;
-	border-color: transparent;
-	border-style: solid;
-
-	border-bottom-width: $input-border-bottom-width;
-	border-left-width: $input-border-left-width;
-	border-right-width: $input-border-right-width;
-	border-top-width: $input-border-top-width;
-	color: $input-plaintext-color;
-	display: block;
-	font-size: $input-font-size;
-	height: $input-height;
-	line-height: $input-line-height;
-
-	// match inputs if this class comes on inputs with default margins
-
-	margin-bottom: 0;
-	min-width: 0;
-	padding-bottom: $input-padding-y;
-	padding-left: 0;
-	padding-right: 0;
-	padding-top: $input-padding-y;
-	text-overflow: ellipsis;
-	width: 100%;
+	@include clay-form-control-variant($input-plaintext);
 
 	@include clay-scale-component {
 		font-size: $input-font-size-mobile;

package/src/scss/components/_grid.scss

@@ -214,16 +214,6 @@
 
 	.container-form-lg {
 		@include clay-container($container-form-lg);
-
-		.menubar-vertical-expand-lg {
-			$container-form-lg-breakpoint-down: clay-breakpoint-prev(
-				map-get($container-form-lg, breakpoint-up)
-			);
-
-			@include media-breakpoint-down($container-form-lg-breakpoint-down) {
-				margin-top: -(map-get($container-form-lg, padding-top-mobile));
-			}
-		}
 	}
 
 	.container-view {

package/src/scss/components/_multi-step-nav.scss

@@ -33,16 +33,12 @@
 }
 
 .multi-step-title-center {
+	@include clay-css($multi-step-title-center);
+
 	.multi-step-title {
-		margin-left: calc(#{$multi-step-icon-size} * 0.5);
-		max-width: $multi-step-title-max-width;
-		overflow: hidden;
-		position: relative;
-		text-align: center;
-		text-overflow: ellipsis;
-		transform: translateX(-50%);
-		white-space: nowrap;
-		width: auto;
+		@include clay-text-typography(
+			map-get($multi-step-title-center, multi-step-title)
+		);
 	}
 }
 
@@ -224,8 +220,7 @@
 }
 
 .multi-step-indicator {
-	position: relative;
-	width: $multi-step-indicator-width;
+	@include clay-css($multi-step-indicator);
 
 	.dropdown-item-indicator,
 	.dropdown-item-indicator-start,
@@ -242,15 +237,9 @@
 	}
 
 	.multi-step-indicator-label {
-		color: $multi-step-indicator-label-color;
-		font-size: $multi-step-indicator-label-font-size;
-		font-weight: $multi-step-indicator-label-font-weight;
-		left: 50%;
-		max-width: $multi-step-indicator-label-max-width;
-		position: absolute;
-		transform: translateX(-50%);
-
-		@include text-truncate;
+		@include clay-css(
+			map-get($multi-step-indicator, multi-step-indicator-label)
+		);
 	}
 }
 

package/src/scss/components/_navbar.scss

@@ -133,12 +133,7 @@
 }
 
 .navbar-text-truncate {
-	display: inline-block;
-	max-width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	vertical-align: bottom;
-	white-space: nowrap;
+	@include clay-css($navbar-text-truncate);
 }
 
 // Navbar Toggler

package/src/scss/components/_type.scss

@@ -301,24 +301,3 @@ strong {
 .c-kbd-dark {
 	@include clay-css($c-kbd-dark);
 }
-
-// Text Truncate
-
-.text-truncate {
-	display: block;
-}
-
-.text-truncate-inline {
-	display: inline-flex;
-	max-width: 100%;
-
-	.text-truncate {
-		display: inline-block;
-		max-width: 100%;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		vertical-align: bottom;
-		white-space: nowrap;
-		word-wrap: normal;
-	}
-}

package/src/scss/components/_utilities-functional-important.scss

@@ -190,10 +190,6 @@
 	display: none !important;
 }
 
-// Display C Reduced Motion
-
-@include clay-map-to-css($displays-c-prefers-reduced-motion);
-
 // Display Print
 
 @media print {
@@ -658,9 +654,11 @@
 }
 
 .text-truncate {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	@include clay-css($text-truncate);
+}
+
+.text-truncate-inline {
+	@include clay-map-to-css($text-truncate-inline);
 }
 
 // Responsive Text Alignment
@@ -833,7 +831,28 @@
 	visibility: hidden !important;
 }
 
-// Transitions
+// C Prefers Expanded Text
+
+%c-prefers-expanded-text {
+	max-width: 100% !important;
+	overflow-wrap: break-word !important;
+	white-space: normal !important;
+	word-wrap: break-word !important;
+}
+
+// C Prefers Link Underline
+
+@include clay-map-to-css($c-prefers-link-underline);
+
+// C Prefers Letter Spacing
+
+@include clay-map-to-css($c-prefers-letter-spacing);
+
+// Display C Reduced Motion
+
+@include clay-map-to-css($displays-c-prefers-reduced-motion);
+
+// C Prefers Reduced Motion
 
 .c-prefers-reduced-motion {
 	@include clay-css($c-prefers-reduced-motion);

package/src/scss/functions/_lx-icons-generated.scss

@@ -6,6 +6,8 @@
 	// prettier-ignore
 	$lx-icons: (
 
+	'accessibility': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M473.6 256c0 120.177-97.423 217.6-217.6 217.6-120.177 0-217.6-97.423-217.6-217.6 0-120.177 97.423-217.6 217.6-217.6 120.177 0 217.6 97.423 217.6 217.6Zm38.4 0c0 141.385-114.615 256-256 256S0 397.385 0 256 114.615 0 256 0s256 114.615 256 256Zm-76.8 0c0 98.969-80.231 179.2-179.2 179.2S76.8 354.969 76.8 256 157.031 76.8 256 76.8 435.2 157.031 435.2 256ZM291.371 148.48c0 19.794-16.046 35.84-35.84 35.84-19.795 0-35.84-16.046-35.84-35.84 0-19.794 16.045-35.84 35.84-35.84 19.794 0 35.84 16.046 35.84 35.84Zm-120.984 43.299c55.881 18.626 114.501 18.594 170.287 0 21.039-7.013 31.249 25.424 10.752 32.256-14.59 4.863-29.364 8.898-44.433 11.704-8.882 1.654-15.67 9.218-16.011 18.247l-.051 1.346c-.706 18.598-1.444 38.031 4.763 55.083l23.491 64.541c7.905 21.717-25.774 33.975-33.679 12.258l-29.975-82.358-29.975 82.358c-7.905 21.717-41.584 9.459-33.679-12.258l23.491-64.541c6.207-17.052 5.469-36.485 4.763-55.083l-.051-1.346c-.341-9.028-7.129-16.592-16.011-18.247-15.069-2.806-29.843-6.841-44.434-11.704-20.497-6.832-10.287-39.269 10.752-32.256Z" fill="#{$color}"/></svg>',
+
 	'add-cell': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-body" fill="none" d="M455.1 0H56.9C25.5 0 0 25.5 0 56.9v398.2C0 486.5 25.5 512 56.9 512h398.2c31.4 0 56.9-25.5 56.9-56.9V56.9C512 25.5 486.5 0 455.1 0z"/><path class="lexicon-icon-outline" d="M455.1 0H56.9C25.5 0 0 25.5 0 56.9v398.2C0 486.5 25.5 512 56.9 512h398.2c31.4 0 56.9-25.5 56.9-56.9V56.9C512 25.5 486.5 0 455.1 0zM160 448H64v-96h96v96zm0-128H64V192h96v128zm0-160H64V64h96v96zm160 288H192v-96h128v96zm0-288H192V64h128v96zm128 288h-96v-96h96v96zm0-128h-96V192h96v128zm0-160h-96V64h96v96z" fill="#{$color}"/></svg>',
 
 	'add-column': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-body" fill="none" d="M0 56.9v398.2C0 486.5 25.5 512 56.9 512h398.2c31.4 0 56.9-25.5 56.9-56.9V56.9C512 25.5 486.5 0 455.1 0H56.9C25.5 0 0 25.5 0 56.9z"/><path class="lexicon-icon-outline" d="M0 56.9v398.2C0 486.5 25.5 512 56.9 512h398.2c31.4 0 56.9-25.5 56.9-56.9V56.9C512 25.5 486.5 0 455.1 0H56.9C25.5 0 0 25.5 0 56.9zM448 352v96h-96v-96h96zm-288 0v96H64v-96h96zm288-160v128h-96V192h96zm-288 0v128H64V192h96zM448 64v96h-96V64h96zm-288 0v96H64V64h96z" fill="#{$color}"/></svg>',
@@ -808,6 +810,8 @@
 
 	'star': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-body" d="M508.753 190.647c-3.247-9.265-11.983-15.493-21.802-15.493H336.845L277.642 16.946c-3.378-9.027-12.01-14.992-21.644-14.992s-18.264 5.965-21.617 14.992l-59.203 158.208H25.047a23.087 23.087 0 0 0-21.802 15.493c-3.247 9.265-.264 19.558 7.417 25.682l120.966 96.234-55.534 162.88a23.104 23.104 0 0 0 7.285 25.365c7.47 6.097 17.975 6.889 26.316 1.979l146.173-86.204 150.317 90.163a22.936 22.936 0 0 0 11.877 3.299h.132c12.722-.422 23.2-10.32 23.2-23.095 0-3.853-.924-7.496-2.613-10.69l-58.252-163.83 120.807-96.103c7.68-6.097 10.663-16.417 7.417-25.682z"/><path class="lexicon-icon-outline" d="M418.1 510.1c-4.1 0-8.2-1.1-11.9-3.3l-150.3-90.2-146.2 86.2c-8.3 4.9-18.8 4.1-26.3-2s-10.4-16.2-7.3-25.4l55.5-162.9-121-96.2C3 210.2 0 199.9 3.3 190.6s12-15.5 21.8-15.5h150.1l59.2-158.2c3.4-9 12-15 21.6-15s18.2 6 21.6 15l59.2 158.2H487c9.8 0 18.6 6.2 21.8 15.5 3.2 9.3.3 19.6-7.4 25.7l-120.8 96.1 58.3 163.9c1.7 3.2 2.6 6.8 2.6 10.7 0 12.7-10.3 23.1-23.1 23.1h-.3zM256 366.6c4.1 0 8.2 1.1 11.9 3.3L374.7 434l-43.3-121.7c-3.3-9.3-.3-19.7 7.4-25.8l82-65.2h-100c-9.6 0-18.3-6-21.6-15L256 90.9l-43.2 115.4c-3.4 9-12 15-21.6 15h-100l82 65.2c7.6 6.1 10.6 16.3 7.5 25.5L140 431.3l104.3-61.5c3.6-2.1 7.6-3.2 11.7-3.2z" fill="#{$color}"/></svg>',
 
+	'stars': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M352 96a19.518 19.518 0 0 0-19.138 15.689l-16.678 83.392a32 32 0 0 1-25.103 25.103l-83.392 16.678a19.518 19.518 0 0 0 0 38.276l83.392 16.678a32 32 0 0 1 25.103 25.103l16.678 83.392a19.518 19.518 0 0 0 38.276 0l16.678-83.392a32 32 0 0 1 25.103-25.103l83.392-16.678a19.518 19.518 0 0 0 0-38.276l-83.392-16.678a32 32 0 0 1-25.103-25.103l-16.678-83.392A19.518 19.518 0 0 0 352 96ZM96 0c-9.233 0-17.112 6.675-18.63 15.782l-5.04 30.243A32 32 0 0 1 46.024 72.33l-30.243 5.04C6.675 78.889 0 86.768 0 96s6.675 17.113 15.782 18.63l30.243 5.041a32 32 0 0 1 26.304 26.304l5.04 30.243C78.889 185.325 86.768 192 96 192s17.113-6.675 18.63-15.782l5.041-30.243a32.001 32.001 0 0 1 26.304-26.304l30.243-5.041C185.325 113.112 192 105.233 192 96c0-9.233-6.675-17.112-15.782-18.63l-30.243-5.04a32 32 0 0 1-26.304-26.305l-5.041-30.243C113.113 6.675 105.233 0 96 0Zm44.119 399.522c-3.877 15.511-13.422 24.804-28.597 28.597-20.185 5.047-20.185 34.715 0 39.762 15.175 3.793 24.72 13.086 28.597 28.597 5.047 20.185 34.715 20.185 39.762 0 3.793-15.175 13.086-24.72 28.597-28.597 20.185-5.047 20.185-34.715 0-39.762-15.175-3.793-24.72-13.086-28.597-28.597-5.047-20.185-34.715-20.185-39.762 0Z" fill="#{$color}"/></svg>',
+
 	'sticky': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zm145.4 246.4c-27.2 27.2-45.4 10.5-51.2 5.9L324.5 278c13.1 67.7-42.2 110.1-42.2 110.1-12.5 12.5-32.8 12.5-45.3 0L195.7 347l-66.5 54-17.8-18 53-67.3-40.6-40.6c-12.5-12.5-12.5-32.8 0-45.3 0 0 41.8-55.1 110.1-42.2l25.7-25.7c-2.1-2.1-23.6-21.7 6.4-51.8 20.7-20.7 39.6-15.1 50-4.7l90.5 90.5c5.5 6.7 21.2 24.2-5.1 50.5z"/></svg>',
 
 	'strikethrough': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M511.999 224h-174.81a227.388 227.388 0 0 0-32.11-8.521l-68.462-13.129c-17.957-3.73-31.342-10.533-40.119-20.48-8.741-9.911-13.129-21.577-13.129-34.962 0-8.338 1.865-16.165 5.522-23.552 3.73-7.387 8.887-13.97 15.579-19.749 6.656-5.815 14.738-10.423 24.21-13.861 9.435-3.511 19.931-5.193 31.451-5.193 15.653 0 28.928 2.304 39.717 6.949 10.862 4.571 19.749 10.386 26.624 17.298 6.912 6.949 12.142 14.446 15.579 22.491s5.851 15.616 7.241 22.491l85.76-26.331c-2.743-13.824-7.973-28.233-15.579-43.301-7.607-14.994-18.286-28.709-32.146-41.216-13.824-12.471-31.232-22.711-52.224-30.793C314.148 4.059 288.95-.001 259.473-.001c-23.077 0-44.946 3.95-65.719 11.776-20.699 7.899-38.949 18.725-54.638 32.585-15.653 13.861-27.977 30.098-36.974 48.823s-13.495 38.912-13.495 60.599c0 26.843 6.254 50.139 18.213 70.18H-.002v64h192.913c7.79 2.487 15.799 4.754 24.357 6.473l68.424 13.861c19.419 3.657 34.158 10.715 44.288 21.102 10.13 10.423 15.177 22.784 15.177 37.083 0 17.518-6.802 31.963-20.37 43.301-13.605 11.337-33.317 16.969-59.136 16.969-17.518 0-32.731-2.523-45.641-7.607-12.873-5.083-23.735-11.886-32.475-20.48-8.777-8.521-15.579-18.322-20.407-29.44s-7.717-22.601-8.594-34.633l-88.502 23.515c1.792 17.591 6.912 35.474 15.177 53.723 8.265 18.213 20.37 34.743 36.279 49.518 15.909 14.811 35.621 26.953 59.136 36.352 23.515 9.545 51.602 14.299 84.333 14.299 28.599 0 53.797-4.389 75.666-13.129 21.906-8.777 40.338-20.187 55.296-34.267 15.031-14.08 26.405-30.281 34.267-48.53 7.826-18.213 11.776-36.827 11.776-55.771 0-17.079-3.035-33.499-8.997-49.152-3.109-8.119-6.985-15.799-11.557-23.113h90.587v-64.037z" fill="#{$color}"/></svg>',

package/src/scss/mixins/_dropdown-menu.scss

@@ -117,7 +117,25 @@
 
 			.dropdown-item {
 				@include clay-dropdown-item-variant(
-					map-deep-get($map, dropdown-item)
+					map-get($map, dropdown-item)
+				);
+			}
+
+			.dropdown-item-scroll {
+				@include clay-dropdown-item-variant(
+					map-get($map, dropdown-item-scroll)
+				);
+			}
+
+			.dropdown-item-scroll-down {
+				@include clay-dropdown-item-variant(
+					map-get($map, dropdown-item-scroll-down)
+				);
+			}
+
+			.dropdown-item-scroll-up {
+				@include clay-dropdown-item-variant(
+					map-get($map, dropdown-item-scroll-up)
 				);
 			}
 
@@ -184,6 +202,10 @@
 					);
 				}
 			}
+
+			.inline-scroller {
+				@include clay-css(map-get($map, inline-scroller));
+			}
 		}
 	}
 }
@@ -721,6 +743,20 @@
 				}
 			}
 
+			&.show {
+				$show: setter(map-get($map, show), ());
+
+				@include clay-css($show);
+
+				&::before {
+					@include clay-css(map-get($show, before));
+				}
+
+				&::after {
+					@include clay-css(map-get($show, after));
+				}
+			}
+
 			&::before {
 				@include clay-css(map-get($map, before));
 			}