@clayui/css 3.122.0 → 3.126.0

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

@@ -46,6 +46,12 @@
 	margin-bottom: $multi-step-item-margin-bottom;
 	position: relative;
 
+	&:last-child {
+		.multi-step-divider {
+			display: none;
+		}
+	}
+
 	&.active {
 		.multi-step-icon {
 			background-color: $multi-step-icon-active-bg;
@@ -181,8 +187,11 @@
 				}
 			}
 
-			&:focus {
-				box-shadow: $multi-step-icon-disabled-focus-box-shadow;
+			@at-root {
+				&.focus,
+				#{$focus-visible-selector} {
+					box-shadow: $multi-step-icon-disabled-focus-box-shadow;
+				}
 			}
 		}
 
@@ -259,6 +268,7 @@
 	padding-left: $multi-step-icon-padding-left;
 	padding-right: $multi-step-icon-padding-right;
 	padding-top: $multi-step-icon-padding-top;
+	position: relative;
 
 	@include transition($multi-step-icon-transition);
 
@@ -270,12 +280,15 @@
 		text-decoration: $multi-step-icon-hover-text-decoration;
 	}
 
-	&:focus {
-		background-color: $multi-step-icon-focus-bg;
-		box-shadow: $multi-step-icon-focus-box-shadow;
-		color: $multi-step-icon-focus-color;
-		outline: $multi-step-icon-focus-outline;
-		text-decoration: $multi-step-icon-focus-text-decoration;
+	@at-root {
+		&.focus,
+		#{$focus-visible-selector} {
+			background-color: $multi-step-icon-focus-bg;
+			box-shadow: $multi-step-icon-focus-box-shadow;
+			color: $multi-step-icon-focus-color;
+			outline: $multi-step-icon-focus-outline;
+			text-decoration: $multi-step-icon-focus-text-decoration;
+		}
 	}
 
 	&[data-multi-step-icon]::before {
@@ -315,6 +328,30 @@
 	}
 }
 
+.multi-step-nav-center {
+	@include clay-css($multi-step-nav-center);
+
+	.multi-step-item {
+		$_item: setter(map-get($multi-step-nav-center, multi-step-item), ());
+
+		@include clay-css($_item);
+	}
+
+	.multi-step-divider {
+		@include clay-css(map-get($multi-step-nav-center, multi-step-divider));
+	}
+
+	.multi-step-indicator {
+		@include clay-css(
+			map-get($multi-step-nav-center, multi-step-indicator)
+		);
+	}
+
+	.multi-step-title {
+		@include clay-css(map-get($multi-step-nav-center, multi-step-title));
+	}
+}
+
 .multi-step-nav-collapse-sm {
 	@include media-breakpoint-down(sm) {
 		flex-wrap: nowrap;
@@ -341,6 +378,29 @@
 			}
 		}
 
+		&.multi-step-nav-center {
+			.multi-step-item {
+				flex-grow: 0;
+				width: auto;
+			}
+
+			.multi-step-item-expand {
+				flex-grow: 1;
+				width: 75px;
+			}
+
+			.multi-step-divider {
+				left: auto;
+				margin-left: $multi-step-icon-size;
+				width: auto;
+			}
+
+			.multi-step-indicator {
+				left: auto;
+				transform: none;
+			}
+		}
+
 		.active {
 			&.multi-step-item {
 				position: static;

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

@@ -360,6 +360,10 @@
 
 	'da-dk': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#E03232" d="M16 80h480v352H16z"/><path fill="#FFF" d="M144 80h64v352h-64z"/><path fill="#FFF" d="M16 224h480.1v64H16z"/></svg>',
 
+	'de-at': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M16 2H0v12h16V2Z" fill="#B0BEC9"/><path d="M15.5 2.51H.5v3.5h15v-3.5ZM15.5 10H.5v3.5h15V10Z" fill="#C8102E"/><path d="M15.5 6H.5v4h15V6Z" fill="#FFF"/></svg>',
+
+	'de-ch': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M16 2H0v12h16V2Z" fill="#C0CFD8"/><path d="M15.5 2.5H.5v11h15v-11Z" fill="#DA291C"/><path d="M9 5H7v2H5v2h2v2h2V9h2V7H9V5Z" fill="#FFF"/></svg>',
+
 	'de-de': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#4C4C4E" d="M16 80.3h480v112H16z"/><path fill="#FCD638" d="M16 320h480v112H16z"/><path fill="#E03232" d="M16 192h480v128H16z"/></svg>',
 
 	'el-gr': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#0035A0" d="M16 80h480v39.1H16z"/><path fill="#FFF" d="M16 119.1h480v39.1H16zM16 197.3h480v39.1H16z"/><path fill="#0035A0" d="M16 236.4h480v39.1H16z"/><path fill="#FFF" d="M16 275.6h480v39.1H16z"/><path fill="#0035A0" d="M16 314.7h480v39.1H16z"/><path fill="#FFF" d="M16 353.8h480v39.1H16z"/><path fill="#0035A0" d="M16 392.9h480V432H16zM16.1 80H224v195.6H16.1z"/><path fill="#0035A0" d="M16 158.2h480v39.1H16z"/><path fill="#FFF" d="M100.2 80h39.1v195.6h-39.1z"/><path fill="#FFF" d="M16.5 158.2h207.8v39.1H16.5z"/></svg>',
@@ -388,8 +392,12 @@
 
 	'fi-fi': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#FFF" d="M16 80h480v352H16z"/><path fill="#0035A0" d="M144 80h64v352h-64z"/><path fill="#0035A0" d="M16 224h480.1v64H16z"/></svg>',
 
+	'fr-be': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#4C4C4E" d="M16 80h160v352H16z"/><path fill="#E03232" d="M336 80h160v352H336z"/><path fill="#FCD638" d="M176 80h160v352H176z"/></svg>',
+
 	'fr-ca': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#E03232" d="M16 80h112v352H16zM384 80h112v352H384z"/><path fill="#FFF" d="M128 80h256v352H128z"/><path fill="#E03232" d="M301.9 300.3c0 3.6 4.1 13.4 4.1 13.4s-34.2-5.7-37.1-6.2-5.5-.5-5.4 5.5l2.4 18.2h-8.4l1.9-18.2c0-6-2.6-6-5.5-5.5l-37.1 6.4s4-9.7 4-13.4c0-4.7-10.1-11.4-21.1-21-11-9.7-18.6-14.6-18.6-15.7 0-1 7.8-.8 7.8-6.6 0-5.7-7.4-27.3-7.4-27.3s15.4 6 19.6 5.9c4.2 0 10.7-8.4 10.7-14.4 0 0 20.1 25.4 24.3 23.5 4.2-1.8-7.7-51.8-7.7-51.8s12 10.9 16.1 9.6c4.2-1.3 15.9-31.3 15.9-31.3s.1-.4.4-.4c.2 0 .4.4.4.4s11.8 29.9 16 31.1c4.2 1.3 16.1-9.7 16.1-9.7s-11.6 50-7.4 51.9c4.2 1.8 24.2-23.8 24.2-23.8 0 6 6.6 14.4 10.7 14.4 4.2-.1 19.5-6.1 19.5-6.1s-7.3 21.6-7.2 27.4c0 5.8 7.8 5.5 7.8 6.5s-7.6 6-18.5 15.8c-10.5 10-20.5 16.6-20.5 21.4z"/></svg>',
 
+	'fr-ch': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M16 2H0v12h16V2Z" fill="#C0CFD8"/><path d="M15.5 2.5H.5v11h15v-11Z" fill="#DA291C"/><path d="M9 5H7v2H5v2h2v2h2V9h2V7H9V5Z" fill="#FFF"/></svg>',
+
 	'fr-fr': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#0035A0" d="M16 80h160v352H16z"/><path fill="#E03232" d="M336 80h160v352H336z"/><path fill="#FFF" d="M176 80h160v352H176z"/></svg>',
 
 	'gl-es': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#FFF" d="M16 80h480v352H16z"/><path fill="#0094CE" d="M256 295.7 441.9 432H496v-39.7L310.1 256 256 216.3 70.1 80H16v39.7L201.9 256z"/></svg>',
@@ -402,6 +410,8 @@
 
 	'in-id': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#E03232" d="M16 80.6h480v176H16z"/><path fill="#FFF" d="M16 256h480v176H16z"/></svg>',
 
+	'it-ch': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M16 2H0v12h16V2Z" fill="#C0CFD8"/><path d="M15.5 2.5H.5v11h15v-11Z" fill="#DA291C"/><path d="M9 5H7v2H5v2h2v2h2V9h2V7H9V5Z" fill="#FFF"/></svg>',
+
 	'it-it': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#75BD4A" d="M16 80h160v352H16z"/><path fill="#E03232" d="M336 80h160v352H336z"/><path fill="#FFF" d="M176 80h160v352H176z"/></svg>',
 
 	'iw-il': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#FFF" d="M16 80h480v352H16z"/><path fill="#0094CE" d="M16 96h480v64H16zM16 352h480v64H16zM256 192l32 47.7 32 47.8H192l32-47.8z"/><path fill="#0094CE" d="m256 320-32-47.7-32-47.8h128l-32 47.8z"/><circle fill="#FFF" cx="256" cy="256" r="16"/></svg>',
@@ -418,6 +428,8 @@
 
 	'lt-lt': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#FCD638" d="M16 80.3h480v112H16z"/><path fill="#E03232" d="M16 320h480v112H16z"/><path fill="#75BD4A" d="M16 192h480v128H16z"/></svg>',
 
+	'mk-mk': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M16 2H0v12h16V2Z" fill="#C0CFD8"/><path d="M15.5 2.5H.5v11h15v-11Z" fill="#CE2028"/><path d="M7.5 10 7 13.5h2L8.5 10h-1ZM8.5 6 9 2.5H7L7.5 6h1ZM10.01 8.5l5.49.5V7l-5.49.5v1ZM5.99 7.5.5 7v2l5.49-.5v-1ZM6.643 8.693.503 13.5h3.318l3.53-4.1-.708-.707ZM9.36 8.693 15.5 13.5h-3.317l-3.53-4.1.708-.707ZM9.36 7.307 15.5 2.5h-3.317l-3.53 4.1.708.707ZM6.64 7.307.5 2.5h3.317l3.53 4.1-.708.707Z" fill="#F9D616"/><path d="M8 9.75a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z" fill="#F9D616" stroke="#CE2028"/></svg>',
+
 	'ms-my': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 24"><path d="M0 0h32v24H0V0z" fill="#B0BEC9"/><path d="M1 1h30v22H1V1z" fill="#E03232"/><path d="M1 3h30v2H1V3zm0 4h30v2H1V7zm0 4h30v2H1v-2zm0 4h30v2H1v-2zm0 4h30v2H1v-2z" fill="#FFF"/><path d="M1 1h16v12H1V1z" fill="#00206A"/><path d="M5.6 7c0-1.9 1.4-3.5 3.2-3.9-.2 0-.5-.1-.8-.1-2.2 0-4 1.8-4 4s1.8 4 4 4c.3 0 .5 0 .8-.1C7 10.6 5.6 9 5.6 7z" fill="#FCD638"/><path d="M11.5 4.5c3.1 0 3.3 5 0 5-3.1 0-3.2-5 0-5z" fill="#FCD638"/></svg>',
 
 	'nb-no': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#E03232" d="M16 80h480v352H16z"/><path fill="#FFF" d="M128 80h96v352h-96z"/><path fill="#FFF" d="M16 208h480.1v96H16z"/><path fill="#0035A0" d="M16 240h480.1v32H16z"/><path fill="#0035A0" d="M160 80h32v352h-32z"/></svg>',
@@ -426,6 +438,8 @@
 
 	'nl-nl': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#E03232" d="M16 80.3h480v112H16z"/><path fill="#0035A0" d="M16 320h480v112H16z"/><path fill="#FFF" d="M16 192h480v128H16z"/></svg>',
 
+	'no-no': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M16 2H0v12h16V2Z" fill="#B0BEC9"/><path d="M15.5 2.5H.5v11h15v-11Z" fill="#E03232"/><path d="M7 2.5H4v11h3v-11Z" fill="#FFF"/><path d="M15.503 6.5H.5v3h15.003v-3Z" fill="#FFF"/><path d="M15.503 7.5H.5v1h15.003v-1Z" fill="#0035A0"/><path d="M6 2.5H5v11h1v-11Z" fill="#0035A0"/></svg>',
+
 	'pl-pl': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#FFF" d="M16 80.6h480v176H16z"/><path fill="#E03232" d="M16 256h480v176H16z"/></svg>',
 
 	'pt-br': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#75BD4A" d="M16 80h480v352H16z"/><path fill="#FCD638" d="M256 416 32 256 256 96l224 160z"/><circle fill="#0035A0" cx="256" cy="256" r="80"/></svg>',
@@ -480,6 +494,8 @@
 
 	'full-size': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline full-size-bottom-right" d="M384 382.804H224V448h160c35.2 0 64-28.8 64-64V224h-64v158.804z" fill="#{$color}"/><path class="lexicon-icon-outline full-size-top-left" d="M128 126.804h160v-64H128c-35.2 0-64 28.8-64 64V288h64V126.804z" fill="#{$color}"/><path class="lexicon-icon-outline full-size-top-right" d="M502.524 9.475A32.315 32.315 0 0 0 479.614 0H378.357c-17.96 0-32.457 14.496-32.386 32.385 0 8.91 3.606 17.042 9.475 22.91a32.338 32.338 0 0 0 22.91 9.476h23.618l-80.469 80.469 45.255 45.254 80.469-80.468v23.617c0 17.96 14.495 32.456 32.385 32.386 17.96 0 32.456-14.496 32.386-32.386V32.386c0-8.627-3.394-16.83-9.476-22.91z" fill="#{$color}"/><path class="lexicon-icon-outline fullsize-bottom-left" d="m145.24 321.505-80.469 80.47v-23.618c0-17.96-14.495-32.456-32.385-32.386-17.96 0-32.456 14.496-32.386 32.386v101.257c0 8.627 3.394 16.83 9.476 22.91A32.315 32.315 0 0 0 32.386 512h101.257c17.96 0 32.457-14.496 32.386-32.386 0-8.909-3.606-17.04-9.475-22.91a32.338 32.338 0 0 0-22.91-9.475h-23.618l80.469-80.469-45.255-45.255z" fill="#{$color}"/></svg>',
 
+	'gallery': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="lexicon-icon-outline" d="M0 14.7a.7.7 0 0 1 .7-.7h2.6a.7.7 0 0 1 .7.7v.6a.7.7 0 0 1-.7.7H.7a.7.7 0 0 1-.7-.7v-.6Zm6 0a.7.7 0 0 1 .7-.7h2.6a.7.7 0 0 1 .7.7v.6a.7.7 0 0 1-.7.7H6.7a.7.7 0 0 1-.7-.7v-.6Zm6 0a.7.7 0 0 1 .7-.7h2.6a.7.7 0 0 1 .7.7v.6a.7.7 0 0 1-.7.7h-2.6a.7.7 0 0 1-.7-.7v-.6Zm2-2.7H2c-1 0-2-1.197-2-2.4V2.4C0 1.206 1 0 2 0h12c1 0 2 1.197 2 2.4v7.2c0 1.201-1 2.4-2 2.4ZM2 2v8h12V2H2Z" fill="#{$color}"/></svg>',
+
 	'geolocation': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M64 191.3c0 106.3 96 224.5 192 320.7 96-96.2 192-214.4 192-320.7 0-257.1-384-253.1-384 0zm96 0c0-125.9 192-124.7 192 0 0 124-192 127.2-192 0z" fill="#{$color}"/></svg>',
 
 	'globe-lines': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M0 256.9c0-343.6 512-341.4 512 0 0 337.7-512 342.6-512 0zm420.2 99.7H379c5.2-25.9 8.5-53.8 9.4-83.1h58.9c-2.6 30.2-12.1 58.4-27.1 83.1zm27.1-116.3h-58.9c-.9-29.2-4.2-57.2-9.4-83.1h41.2c15 24.6 24.5 52.8 27.1 83.1zM272.6 65.2c14.6 1.3 28.7 4.1 42.2 8.5 7.9 13.9 15.4 31.2 21.4 50.3h-63.7V65.2zm-75.4 8.5c13.5-4.3 27.6-7.2 42.2-8.5V124h-63.7c6.1-19.1 13.6-36.3 21.5-50.3zm-80 50.3c9.9-10.4 21-19.7 33.1-27.7-3.3 8.8-6.4 18.1-9.2 27.7h-23.9zM64.7 240.3c2.6-30.2 12.1-58.5 27.1-83.1H133c-5.2 25.9-8.5 53.8-9.4 83.1H64.7zm27.1 116.3c-14.9-24.6-24.5-52.8-27.1-83.1h58.9c.9 29.2 4.2 57.2 9.4 83.1H91.8zm58.5 60.9c-12-8-23.1-17.3-33.1-27.7h23.9c2.8 9.6 5.8 18.8 9.2 27.7zm89.1 31c-14.6-1.3-28.7-4.1-42.2-8.5-7.9-13.9-15.4-31.2-21.4-50.3h63.7v58.8zm75.4-8.5c-13.5 4.3-27.6 7.2-42.2 8.5v-58.7h63.7c-6.1 19-13.6 36.3-21.5 50.2zm46.9-22.5c3.3-8.8 6.4-18.1 9.2-27.7h23.9c-9.9 10.4-21 19.7-33.1 27.7zm0-321.2c12 8 23.1 17.3 33.1 27.7h-23.9c-2.8-9.6-5.8-18.9-9.2-27.7zm-6.5 177.2c-1 29.7-4.5 57.7-10.1 83.1h-72.5v-83.1h82.6zm-10.1-116.3c5.6 25.4 9.1 53.4 10.1 83.1h-82.6v-83.1h72.5zm-188.3 83.1c1-29.7 4.5-57.7 10.1-83.1h72.5v83.1h-82.6zm10.1 116.3c-5.6-25.4-9.1-53.4-10.1-83.1h82.6v83.1h-72.5z" clip-rule="evenodd" fill-rule="evenodd" fill="#{$color}"/></svg>',

package/src/scss/mixins/_links.scss

@@ -938,6 +938,40 @@
 				}
 			}
 
+			&.collapse-icon {
+				$_collapse-icon: setter(map-get($map, collapse-icon), ());
+
+				@include clay-css($_collapse-icon);
+
+				.collapse-icon-closed {
+					@include clay-css(
+						map-get($_collapse-icon, collapse-icon-closed)
+					);
+				}
+
+				.collapse-icon-open {
+					@include clay-css(
+						map-get($_collapse-icon, collapse-icon-open)
+					);
+				}
+			}
+
+			.autofit-row {
+				$_autofit-row: setter(map-get($map, autofit-row), ());
+
+				@include clay-css($_autofit-row);
+
+				.autofit-col {
+					@include clay-css(map-get($_autofit-row, autofit-col));
+				}
+
+				.autofit-col-expand {
+					@include clay-css(
+						map-get($_autofit-row, autofit-col-expand)
+					);
+				}
+			}
+
 			@if (map-get($c-inner, enabled)) {
 				> .c-inner {
 					@include clay-css($c-inner);

package/src/scss/mixins/_menubar.scss

@@ -931,6 +931,10 @@
 			}
 		}
 
+		.nav-item {
+			@include clay-css(map-get($map, nav-item));
+		}
+
 		.nav-link {
 			$_nav-link: setter(map-get($map, nav-link), ());
 			$_nav-link: map-deep-merge($link, $_nav-link);
@@ -942,6 +946,14 @@
 			}
 		}
 
+		.menubar-actions-1 {
+			@include clay-css(map-get($map, menubar-actions-1));
+		}
+
+		.menubar-action {
+			@include clay-css(map-get($map, menubar-action));
+		}
+
 		$_media-breakpoint-down: map-get($map, media-breakpoint-down);
 		$_media-breakpoint-up: map-get($map, media-breakpoint-up);
 

package/src/scss/variables/_globals.scss

@@ -87,6 +87,7 @@ $blue-l1: #338fff !default;
 $blue-l2: #66abff !default;
 $blue-l3: #97c5ff !default;
 $blue-l4: #cce3ff !default;
+$blue-l5: #e5f1ff !default;
 
 $indigo-d4: #0017e5 !default;
 $indigo-d3: #001aff !default;
@@ -97,6 +98,7 @@ $indigo-l1: #808cff !default;
 $indigo-l2: #99a3ff !default;
 $indigo-l3: #b2baff !default;
 $indigo-l4: #ccd1ff !default;
+$indigo-l5: #e5e8ff !default;
 
 $purple-d4: #7700cc !default;
 $purple-d3: #8600e6 !default;
@@ -107,6 +109,7 @@ $purple-l1: #bf66ff !default;
 $purple-l2: #ca80ff !default;
 $purple-l3: #d499ff !default;
 $purple-l4: #dfb3ff !default;
+$purple-l5: #f2e5ff !default;
 
 $pink-d4: #800048 !default;
 $pink-d3: #990057 !default;
@@ -117,6 +120,7 @@ $pink-l1: #ff4db2 !default;
 $pink-l2: #ff80c8 !default;
 $pink-l3: #ff99d3 !default;
 $pink-l4: #ffb3de !default;
+$pink-l5: #ffe5f4 !default;
 
 $red-d4: #800000 !default;
 $red-d3: #990000 !default;
@@ -127,6 +131,7 @@ $red-l1: #ff4d4d !default;
 $red-l2: #ff6666 !default;
 $red-l3: #ff8080 !default;
 $red-l4: #ff9999 !default;
+$red-l5: #ffe5e5 !default;
 
 $orange-d4: #662700 !default;
 $orange-d3: #803100 !default;
@@ -137,6 +142,7 @@ $orange-l1: #ff6200 !default;
 $orange-l2: #ff8133 !default;
 $orange-l3: #ffa166 !default;
 $orange-l4: #ffc099 !default;
+$orange-l5: #fff0e5 !default;
 
 $yellow-d4: #997000 !default;
 $yellow-d3: #b38900 !default;
@@ -147,6 +153,7 @@ $yellow-l1: #ffc933 !default;
 $yellow-l2: #ffd666 !default;
 $yellow-l3: #ffe499 !default;
 $yellow-l4: #fff1cc !default;
+$yellow-l5: #fff8e5 !default;
 
 $green-d4: #162d06 !default;
 $green-d3: #22430a !default;
@@ -157,6 +164,7 @@ $green-l1: #53a117 !default;
 $green-l2: #67c91d !default;
 $green-l3: #81e236 !default;
 $green-l4: #9de963 !default;
+$green-l5: #f1fce9 !default;
 
 $teal-d4: #092a25 !default;
 $teal-d3: #0d3f37 !default;
@@ -167,6 +175,7 @@ $teal-l1: #24a892 !default;
 $teal-l2: #42d7be !default;
 $teal-l3: #6ce0cc !default;
 $teal-l4: #96e9db !default;
+$teal-l5: #eafbf8 !default;
 
 $cyan-d4: #00334d !default;
 $cyan-d3: #004466 !default;
@@ -177,6 +186,7 @@ $cyan-l1: #0099e6 !default;
 $cyan-l2: #33bbff !default;
 $cyan-l3: #66ccff !default;
 $cyan-l4: #99ddff !default;
+$cyan-l5: #e5f6ff !default;
 
 $colors: () !default;
 $colors: map-merge(

package/src/scss/variables/_menubar.scss

@@ -1,3 +1,125 @@
+$menubar-primary: () !default;
+$menubar-primary: map-deep-merge(
+	(
+		nav-item: (
+			position: relative,
+		),
+		nav-link: (
+			border-radius: 0,
+			color: $gray-900,
+			line-height: 24px,
+			transition: #{color 0.15s ease-in-out,
+			background-color 0.15s ease-in-out,
+			border-color 0.15s ease-in-out,
+			box-shadow 0.15s ease-in-out},
+			before: (
+				bottom: 0,
+				content: '',
+				display: block,
+				left: 0,
+				position: absolute,
+				top: 0,
+				transition: $transition-base,
+			),
+			hover: (
+				background-color: $primary-l3,
+				color: $gray-900,
+				letter-spacing: 0,
+				before: (
+					background: $secondary-l0,
+					width: 0.125rem,
+				),
+			),
+			focus: (
+				background-color: c-unset,
+				box-shadow: none,
+				color: $gray-900,
+				outline: 0,
+				after: (
+					bottom: 0,
+					box-shadow: $component-focus-inset-box-shadow,
+					content: '',
+					display: block,
+					left: 0,
+					pointer-events: none,
+					position: absolute,
+					right: 0,
+					top: 0,
+				),
+			),
+			active-class: (
+				background-color: $primary-l3,
+				color: $gray-900,
+				font-weight: $font-weight-semi-bold,
+				before: (
+					background-color: $primary,
+					width: 0.375rem,
+				),
+				focus: (
+					before: (
+						display: none,
+					),
+				),
+			),
+			disabled: (
+				background-color: transparent,
+				box-shadow: none,
+				font-weight: $font-weight-normal,
+				before: (
+					content: none,
+				),
+				after: (
+					content: none,
+				),
+			),
+			show: (
+				background-color: c-unset,
+				box-shadow: c-unset,
+				color: $gray-900,
+				before: (
+					background-color: transparent,
+					width: 0,
+				),
+				hover: (
+					before: (
+						background-color: $secondary-l0,
+						width: 0.125rem,
+					),
+				),
+			),
+			autofit-row: (
+				align-items: center,
+				margin-left: -0.25rem,
+				margin-right: -0.25rem,
+				autofit-col: (
+					padding-left: 0.25rem,
+					padding-right: 0.25rem,
+				),
+			),
+			collapse-icon: (
+				font-size: 0.75rem,
+				font-weight: $font-weight-semi-bold,
+				text-transform: uppercase,
+				collapse-icon-closed: (
+					top: calc(22px - (1em / 2)),
+				),
+				collapse-icon-open: (
+					top: calc(22px - (1em / 2)),
+				),
+			),
+		),
+		menubar-actions-1: (
+			padding-right: 4rem,
+		),
+		menubar-action: (
+			position: absolute,
+			top: 0.625rem,
+			right: 2rem,
+		),
+	),
+	$menubar-primary
+);
+
 // Menubar Vertical MD
 
 $menubar-vertical-expand-md: () !default;

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

@@ -96,6 +96,32 @@ $multi-step-item-margin-bottom: 10px !default;
 $multi-step-item-width: 75px !default;
 $multi-step-item-fixed-width: 150px !default;
 
+$multi-step-nav-center: () !default;
+$multi-step-nav-center: map-deep-merge(
+	(
+		padding: 0,
+		text-align: center,
+		multi-step-item: (
+			flex-grow: 1,
+			width: $multi-step-item-width,
+		),
+		multi-step-divider: (
+			left: 50%,
+			margin-left: 1rem,
+			width: calc(100% - #{$multi-step-icon-size}),
+		),
+		multi-step-indicator: (
+			left: 50%,
+			transform: translateX(-50%),
+		),
+		multi-step-title: (
+			margin-left: 12.5%,
+			max-width: 75%,
+		),
+	),
+	$multi-step-nav-center
+);
+
 $multi-step-title-center: () !default;
 $multi-step-title-center: map-deep-merge(
 	(

package/src/scss/variables/_navs.scss

@@ -11,12 +11,14 @@ $nav-link-disabled-cursor: $disabled-cursor !default;
 $nav-link: () !default;
 $nav-link: map-deep-merge(
 	(
+		cursor: pointer,
 		display: block,
 		padding-bottom: $nav-link-padding-y,
 		padding-left: $nav-link-padding-x,
 		padding-right: $nav-link-padding-x,
 		padding-top: $nav-link-padding-y,
 		position: relative,
+		user-select: none,
 		hover: (
 			text-decoration: none,
 		),

package/src/scss/variables/_stickers.scss

@@ -402,6 +402,106 @@ $sticker-dark: map-deep-merge(
 	$sticker-dark
 );
 
+$sticker-outline-0: () !default;
+$sticker-outline-0: map-deep-merge(
+	(
+		background-color: $light,
+		border: 1px solid $dark,
+		color: $dark,
+	),
+	$sticker-outline-0
+);
+
+$sticker-outline-1: () !default;
+$sticker-outline-1: map-deep-merge(
+	(
+		background-color: $purple-l5,
+		border: 1px solid $purple,
+		color: $purple,
+	),
+	$sticker-outline-1
+);
+
+$sticker-outline-2: () !default;
+$sticker-outline-2: map-deep-merge(
+	(
+		background-color: $yellow-l5,
+		border: 1px solid $yellow-d3,
+		color: $yellow-d3,
+	),
+	$sticker-outline-2
+);
+
+$sticker-outline-3: () !default;
+$sticker-outline-3: map-deep-merge(
+	(
+		background-color: $green-l5,
+		border: 1px solid $green,
+		color: $green,
+	),
+	$sticker-outline-3
+);
+
+$sticker-outline-4: () !default;
+$sticker-outline-4: map-deep-merge(
+	(
+		background-color: $red-l5,
+		border: 1px solid $red,
+		color: $red,
+	),
+	$sticker-outline-4
+);
+
+$sticker-outline-5: () !default;
+$sticker-outline-5: map-deep-merge(
+	(
+		background-color: $orange-l5,
+		border: 1px solid $orange,
+		color: $orange,
+	),
+	$sticker-outline-5
+);
+
+$sticker-outline-6: () !default;
+$sticker-outline-6: map-deep-merge(
+	(
+		background-color: $teal-l5,
+		border: 1px solid $teal,
+		color: $teal,
+	),
+	$sticker-outline-6
+);
+
+$sticker-outline-7: () !default;
+$sticker-outline-7: map-deep-merge(
+	(
+		background-color: $cyan-l5,
+		border: 1px solid $cyan,
+		color: $cyan,
+	),
+	$sticker-outline-7
+);
+
+$sticker-outline-8: () !default;
+$sticker-outline-8: map-deep-merge(
+	(
+		background-color: $pink-l5,
+		border: 1px solid $pink,
+		color: $pink-d4,
+	),
+	$sticker-outline-8
+);
+
+$sticker-outline-9: () !default;
+$sticker-outline-9: map-deep-merge(
+	(
+		background-color: $white,
+		border: 1px solid $dark-l2,
+		color: $dark-l2,
+	),
+	$sticker-outline-9
+);
+
 $sticker-palette: () !default;
 $sticker-palette: map-deep-merge(
 	(
@@ -413,6 +513,16 @@ $sticker-palette: map-deep-merge(
 		danger: $sticker-danger,
 		light: $sticker-light,
 		dark: $sticker-dark,
+		'.sticker-outline-0': $sticker-outline-0,
+		'.sticker-outline-1': $sticker-outline-1,
+		'.sticker-outline-2': $sticker-outline-2,
+		'.sticker-outline-3': $sticker-outline-3,
+		'.sticker-outline-4': $sticker-outline-4,
+		'.sticker-outline-5': $sticker-outline-5,
+		'.sticker-outline-6': $sticker-outline-6,
+		'.sticker-outline-7': $sticker-outline-7,
+		'.sticker-outline-8': $sticker-outline-8,
+		'.sticker-outline-9': $sticker-outline-9,
 	),
 	$sticker-palette
 );

package/src/scss/variables/_toggle-switch.scss

@@ -497,7 +497,7 @@ $toggle-switch-sizes: map-deep-merge(
 		toggle-switch-sm: (
 			simple-toggle-switch: (
 				toggle-switch-label: (
-					max-width: calc(100% - 38px),
+					max-width: calc(100% - 34px),
 				),
 			),
 			toggle-switch-check: (
@@ -515,9 +515,8 @@ $toggle-switch-sizes: map-deep-merge(
 					),
 					toggle-switch-handle: (
 						min-width: 30px,
-						max-width: 30px,
 						after: (
-							margin-left: 38px,
+							margin-left: 34px,
 						),
 					),
 					toggle-switch-icon: (