@clayui/css 3.95.1 → 3.97.0

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

@@ -577,7 +577,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': (
+			'[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': (
+			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(
+	(
+		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
+);
 
 $cadmin-c-prefers-reduced-motion: () !default;
 $cadmin-c-prefers-reduced-motion: map-merge(

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/_globals.scss

@@ -292,6 +292,30 @@
 				} @else if ($key == 'overflow-wrap') {
 					overflow-wrap: $value;
 					word-wrap: $value;
+				} @else if ($key == 'text-overflow') {
+					@if ($value == 'ellipsis') {
+						text-overflow: $value;
+
+						@at-root {
+							$selector: '.c-prefers-expanded-text &';
+
+							@if (variable-exists(cadmin-selector)) {
+								$selector: clay-insert-after(
+									'.cadmin ',
+									'.c-prefers-expanded-text '
+								);
+								$selector: clay-insert-after(
+									'.cadmin.',
+									'c-prefers-expanded-text.',
+									$selector
+								);
+							}
+
+							#{$selector} {
+								@extend %c-prefers-expanded-text !optional;
+							}
+						}
+					}
 				} @else if ($key == 'transition') {
 					transition: $value;
 
@@ -344,7 +368,7 @@
 	@each $key, $value in $map {
 		@if not clay-is-map-unset($value) {
 			@if (type-of($value) == 'map') {
-				$valid-prefixes: '#', '&', '.', '>', '@';
+				$valid-prefixes: '#', '&', '.', '>', '@', '~', '+', '[';
 
 				$selector: if(
 					index($valid-prefixes, str-slice($key, 1, 1)),

package/src/scss/mixins/_input-groups.scss

@@ -300,6 +300,14 @@
 		@if ($enabled) {
 			@include clay-css($map);
 
+			&::before {
+				@include clay-css(map-get($map, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($map, after));
+			}
+
 			&.focus {
 				@include clay-input-group-item-variant(
 					map-deep-get($map, focus)

package/src/scss/mixins/_links.scss

@@ -845,6 +845,50 @@
 				&::after {
 					@include clay-css(map-get($show, after));
 				}
+
+				&:hover {
+					$_show-hover: setter(map-get($show, hover), ());
+
+					@include clay-css($_show-hover);
+
+					&::before {
+						@include clay-css(map-get($_show-hover, before));
+					}
+
+					&::after {
+						@include clay-css(map-get($_show-hover, after));
+					}
+				}
+
+				&:focus {
+					$_show-focus: setter(map-get($show, focus), ());
+
+					@include clay-css($_show-focus);
+
+					&::before {
+						@include clay-css(map-get($_show-focus, before));
+					}
+
+					&::after {
+						@include clay-css(map-get($_show-focus, after));
+					}
+				}
+
+				.inline-item {
+					@include clay-css(map-get($show, inline-item));
+				}
+
+				.inline-item-before {
+					@include clay-css(map-get($show, inline-item-before));
+				}
+
+				.inline-item-middle {
+					@include clay-css(map-get($show, inline-item-middle));
+				}
+
+				.inline-item-after {
+					@include clay-css(map-get($show, inline-item-after));
+				}
 			}
 
 			@if (map-get($c-inner, enabled)) {

package/src/scss/mixins/_type.scss

@@ -50,9 +50,13 @@
 /// A Bootstrap 4 mixin for displaying ellipsis if text overflows its container. Requires other CSS properties to function properly depending on the `display` property. Clay CSS `truncate-text-inline` with `text-truncate` is a more fail safe pattern.
 
 @mixin text-truncate() {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	@include clay-css(
+		(
+			overflow: hidden,
+			text-overflow: ellipsis,
+			white-space: nowrap,
+		)
+	);
 }
 
 // Highlight inline text

package/src/scss/variables/_buttons.scss

@@ -45,6 +45,7 @@ $btn: map-deep-merge(
 		font-family: $btn-font-family,
 		font-size: $btn-font-size,
 		font-weight: $btn-font-weight,
+		letter-spacing: inherit,
 		line-height: $btn-line-height,
 		padding-bottom: $btn-padding-y,
 		padding-left: $btn-padding-x,
@@ -350,6 +351,7 @@ $btn-unstyled: map-deep-merge(
 		cursor: $btn-cursor,
 		font-size: inherit,
 		font-weight: inherit,
+		letter-spacing: inherit,
 		line-height: inherit,
 		max-width: 100%,
 		padding: 0,

package/src/scss/variables/_forms.scss

@@ -70,13 +70,14 @@ $input: map-deep-merge(
 		font-size: $input-font-size,
 		font-weight: $input-font-weight,
 		height: $input-height,
+		letter-spacing: inherit,
 		line-height: $input-line-height,
 		min-width: 0,
 		padding-bottom: $input-padding-y,
 		padding-left: $input-padding-x,
 		padding-right: $input-padding-x,
 		padding-top: $input-padding-y,
-		transition: $input-transition,
+		transition: clay-enable-transitions($input-transition),
 		width: 100%,
 		mobile: (
 			font-size: $input-font-size-mobile,
@@ -118,6 +119,36 @@ $input-palette: () !default;
 
 $input-plaintext-color: $body-color !default;
 
+$input-plaintext: () !default;
+$input-plaintext: map-deep-merge(
+	(
+		background-clip: border-box,
+		background-color: transparent,
+		border-bottom-width: $input-border-bottom-width,
+		border-color: transparent,
+		border-left-width: $input-border-left-width,
+		border-right-width: $input-border-right-width,
+		border-style: solid,
+		border-top-width: $input-border-top-width,
+		color: $input-plaintext-color,
+		display: block,
+		font-size: $input-font-size,
+		height: $input-height,
+		letter-spacing: inherit,
+		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%,
+	),
+	$input-plaintext
+);
+
 /// @deprecated with no replacement
 
 $input-height-border: calc(
@@ -339,7 +370,7 @@ $input-plaintext-readonly: map-deep-merge(
 	(
 		border-radius: $input-border-radius,
 		outline: 0,
-		transition: $input-transition,
+		transition: clay-enable-transitions($input-transition),
 		focus: (
 			box-shadow: $input-focus-box-shadow,
 		),
@@ -1433,9 +1464,23 @@ $input-group-item: map-deep-merge(
 		margin-left: $input-group-item-margin-left,
 		width: 1%,
 		word-wrap: break-word,
+		after: (
+			border-radius: inherit,
+			bottom: 0,
+			content: '',
+			display: block,
+			left: 0,
+			pointer-events: none,
+			position: absolute,
+			right: 0,
+			top: 0,
+			transition: clay-enable-transitions($input-transition),
+		),
 		focus: (
 			border-radius: clay-enable-rounded($input-border-radius),
-			box-shadow: $input-focus-box-shadow,
+			after: (
+				box-shadow: $input-focus-box-shadow,
+			),
 			input-group-prepend: (
 				border-bottom-right-radius: clay-enable-rounded(0),
 				border-top-right-radius: clay-enable-rounded(0),

package/src/scss/variables/_icons.scss

@@ -65,7 +65,7 @@ $collapse-icon-position-bottom: null !default;
 $collapse-icon-position-left: null !default;
 $collapse-icon-position-right: 0.9375rem !default; // 15px
 $collapse-icon-position-top: clay-collapse-icon-align(
-	$nav-link-padding-y,
+	if(variable-exists(nav-link-padding-y), $nav-link-padding-y, 0.5rem),
 	0.0625rem,
 	0.9375em
 ) !default;

package/src/scss/variables/_menubar.scss

@@ -9,9 +9,7 @@ $menubar-vertical-expand-md: map-deep-merge(
 		),
 		media-breakpoint-down: (
 			sm: (
-				margin-bottom: 1.5rem,
-				margin-left: math-sign($grid-gutter-width * 0.5),
-				margin-right: math-sign($grid-gutter-width * 0.5),
+				margin-bottom: 1rem,
 				max-width: none,
 				menubar-collapse: (
 					border-color: transparent,
@@ -38,11 +36,13 @@ $menubar-vertical-expand-md: map-deep-merge(
 					border-color: transparent,
 					border-style: solid,
 					border-width: 0.0625rem,
-					display: flex,
+					display: inline-flex,
 					height: 2rem,
 					padding-left: 0.5rem,
 					padding-right: 0.5rem,
 					c-inner: (
+						margin-left: -0.5rem,
+						margin-right: -0.5rem,
 						max-width: none,
 					),
 					lexicon-icon: (
@@ -75,7 +75,6 @@ $menubar-vertical-transparent-md: map-deep-merge(
 		),
 		media-breakpoint-down: (
 			sm: (
-				background-color: $gray-100,
 				nav-link: (
 					border-radius: clay-enable-rounded(0),
 					color: $gray-900,
@@ -174,9 +173,7 @@ $menubar-vertical-expand-lg: map-deep-merge(
 		),
 		media-breakpoint-down: (
 			md: (
-				margin-bottom: 1.5rem,
-				margin-left: math-sign($grid-gutter-width * 0.5),
-				margin-right: math-sign($grid-gutter-width * 0.5),
+				margin-bottom: 1rem,
 				max-width: none,
 				menubar-collapse: (
 					border-color: transparent,
@@ -203,11 +200,13 @@ $menubar-vertical-expand-lg: map-deep-merge(
 					border-color: transparent,
 					border-style: solid,
 					border-width: 0.0625rem,
-					display: flex,
+					display: inline-flex,
 					height: 2rem,
 					padding-left: 0.5rem,
 					padding-right: 0.5rem,
 					c-inner: (
+						margin-left: -0.5rem,
+						margin-right: -0.5rem,
 						max-width: none,
 					),
 					lexicon-icon: (
@@ -240,7 +239,6 @@ $menubar-vertical-transparent-lg: map-deep-merge(
 		),
 		media-breakpoint-down: (
 			md: (
-				background-color: $gray-100,
 				nav-link: (
 					border-radius: clay-enable-rounded(0),
 					color: $gray-900,