@clayui/css 3.126.0 → 3.127.0

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

@@ -364,26 +364,6 @@
 			setter(map-get($map, hover-c-kbd-inline), ())
 		);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-		$_focus-selector: if(
-			$_enable-focus-visible,
-			'&:focus-visible',
-			'&:focus'
-		);
-		$_prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
 		$focus: setter(map-get($map, focus), ());
 		$focus: map-deep-merge(
 			$focus,
@@ -656,8 +636,8 @@
 
 			@at-root {
 				&.focus,
-				#{$_focus-selector},
-				#{$_prefers-focus-selector} {
+				#{$focus-visible-selector},
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					@include clay-css($focus);
 
 					&::before {
@@ -738,8 +718,8 @@
 			@at-root {
 				&.btn:not([disabled]):not(.disabled):active,
 				&.btn:not([disabled]):not(.disabled).active {
-					#{$_focus-selector},
-					#{$_prefers-focus-selector} {
+					#{$focus-visible-selector},
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						box-shadow: map-get($focus, box-shadow);
 					}
 				}
@@ -850,6 +830,20 @@
 			.custom-control-label {
 				font-weight: map-get($map, font-weight);
 			}
+
+			.inline-item {
+				$_inline-item: setter(map-get($map, inline-item), ());
+
+				@include clay-css($_inline-item);
+
+				.lexicon-icon {
+					@include clay-css(map-get($_inline-item, lexicon-icon));
+				}
+			}
+
+			.label {
+				@include clay-label-variant(map-get($map, label));
+			}
 		}
 	}
 }

package/src/scss/mixins/_forms.scss

@@ -297,31 +297,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		$base: setter($map, ());
 		$base: map-merge(
 			$map,
@@ -586,7 +561,7 @@
 			@at-root {
 				&.focus,
 				#{$focus-visible-selector},
-				#{$_c-prefers-focus-selector} {
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					@include clay-css($focus);
 
 					&::placeholder {
@@ -745,31 +720,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		$base: map-merge(
 			$map,
 			(
@@ -960,7 +910,7 @@
 			@at-root {
 				&.focus,
 				#{$focus-visible-selector},
-				#{$_c-prefers-focus-selector} {
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					@include clay-css($focus);
 
 					> option {
@@ -1095,7 +1045,7 @@
 					@at-root {
 						&.focus,
 						#{$focus-visible-selector},
-						#{$_c-prefers-focus-selector} {
+						#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 							$ff-only-focus: setter(
 								map-get($ff-only, focus),
 								()
@@ -1631,31 +1581,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		$clay-range-thumb: setter(map-get($map, clay-range-thumb), ());
 		$clay-range-thumb: map-merge(
 			$clay-range-thumb,
@@ -2559,7 +2484,7 @@
 				@at-root {
 					&.focus,
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						@include clay-css($focus);
 
 						~ .clay-range-track {

package/src/scss/mixins/_links.scss

@@ -253,31 +253,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		$base: map-merge(
 			$map,
 			(
@@ -677,7 +652,7 @@
 			@at-root {
 				&.focus,
 				#{$focus-visible-selector},
-				#{$_c-prefers-focus-selector} {
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					@include clay-css($focus);
 
 					&::before {
@@ -719,7 +694,7 @@
 
 				@at-root {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						$_active-focus: setter(map-get($active, focus), ());
 
 						@include clay-css($_active-focus);
@@ -764,7 +739,7 @@
 
 				@at-root {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						$_active-class-focus: setter(
 							map-get($active-class, focus),
 							()
@@ -823,7 +798,7 @@
 
 				@at-root {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						$_disabled-focus: setter(map-get($disabled, focus), ());
 
 						@include clay-css($_disabled-focus);
@@ -872,7 +847,7 @@
 			&[type] {
 				@at-root {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						@include clay-css($btn-focus);
 					}
 				}
@@ -906,7 +881,7 @@
 
 				@at-root {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						$_show-focus: setter(map-get($show, focus), ());
 
 						@include clay-css($_show-focus);

package/src/scss/mixins/_modals.scss

@@ -24,31 +24,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		$header: setter(map-get($map, modal-header), map-get($map, header), ());
 		$header: map-merge(
 			$header,
@@ -172,7 +147,7 @@
 			@at-root {
 				button.close {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						box-shadow: map-get(
 							$header-close-btn-focus,
 							box-shadow

package/src/scss/mixins/_popovers.scss

@@ -90,31 +90,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		@if ($enabled) {
 			@include clay-css($map);
 
@@ -151,7 +126,7 @@
 			@at-root {
 				&.focus,
 				#{$focus-visible-selector},
-				#{$_c-prefers-focus-selector} {
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					@include clay-popover-variant(map-get($map, focus));
 				}
 			}

package/src/scss/mixins/_sidebar.scss

@@ -104,31 +104,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		$base: map-merge(
 			$map,
 			(
@@ -266,7 +241,7 @@
 
 					&.focus,
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						@include clay-css(map-get($sidenav-start, focus));
 					}
 				}
@@ -279,7 +254,7 @@
 
 					&.focus,
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						@include clay-css(map-get($sidenav-end, focus));
 					}
 				}
@@ -288,7 +263,7 @@
 			@at-root {
 				&.focus,
 				#{$focus-visible-selector},
-				#{$_c-prefers-focus-selector} {
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					@include clay-css(map-get($map, focus));
 				}
 			}

package/src/scss/mixins/_slideout.scss

@@ -20,31 +20,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		@if ($enabled) {
 			@include clay-css($map);
 
@@ -114,7 +89,7 @@
 
 				@at-root {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						@include clay-css(
 							map-get($_c-horizontal-resizer, focus)
 						);

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

@@ -646,31 +646,6 @@
 		$breakpoint-down: setter(map-get($map, breakpoint-down), sm);
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		@include clay-css($map);
 
 		@if ($enabled) {
@@ -688,7 +663,7 @@
 
 			@at-root {
 				#{$focus-visible-selector},
-				#{$_c-prefers-focus-selector} {
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					~ .toggle-switch-bar {
 						@include clay-toggle-switch-bar-variant(
 							map-deep-get($map, focus, toggle-switch-bar)
@@ -725,7 +700,7 @@
 			@at-root {
 				&:checked {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						~ .toggle-switch-bar {
 							@include clay-toggle-switch-bar-variant(
 								map-deep-get(
@@ -768,7 +743,7 @@
 			@at-root {
 				&:indeterminate {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						~ .toggle-switch-bar {
 							@include clay-toggle-switch-bar-variant(
 								map-deep-get(
@@ -818,7 +793,7 @@
 
 				@at-root {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						~ .toggle-switch-bar {
 							@include clay-toggle-switch-bar-variant(
 								map-deep-get(
@@ -866,7 +841,7 @@
 				@at-root {
 					&:checked {
 						#{$focus-visible-selector},
-						#{$_c-prefers-focus-selector} {
+						#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 							~ .toggle-switch-bar {
 								@include clay-toggle-switch-bar-variant(
 									map-deep-get(
@@ -933,7 +908,7 @@
 				@at-root {
 					&:indeterminate {
 						#{$focus-visible-selector},
-						#{$_c-prefers-focus-selector} {
+						#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 							~ .toggle-switch-bar {
 								@include clay-toggle-switch-bar-variant(
 									map-deep-get(

package/src/scss/variables/_dropdowns.scss

@@ -217,6 +217,7 @@ $dropdown-item-base: map-deep-merge(
 			line-height: calc(#{$dropdown-font-size} * #{$line-height-base}),
 		),
 		'&.autofit-row': (
+			align-items: center,
 			padding-left: calc(#{$dropdown-item-padding-x} - 0.25rem),
 			padding-right: calc(#{$dropdown-item-padding-x} - 0.25rem),
 			autofit-col: (
@@ -225,6 +226,7 @@ $dropdown-item-base: map-deep-merge(
 			),
 		),
 		autofit-row: (
+			align-items: center,
 			margin-left: -0.25rem,
 			margin-right: -0.25rem,
 			width: auto,
@@ -233,6 +235,17 @@ $dropdown-item-base: map-deep-merge(
 				padding-right: 0.25rem,
 			),
 		),
+		inline-item: (
+			line-height: 1,
+			lexicon-icon: (
+				font-size: 1rem,
+				margin-top: 0,
+			),
+		),
+		label: (
+			margin-bottom: 0,
+			margin-top: 0.3125rem,
+		),
 	),
 	$dropdown-item-base
 );
@@ -502,6 +515,7 @@ $dropdown-item-indicator-start: map-deep-merge(
 			),
 		width: $dropdown-item-indicator-size,
 		lexicon-icon: (
+			font-size: 1rem,
 			margin-top: 0,
 		),
 	),
@@ -548,6 +562,7 @@ $dropdown-item-indicator-end: map-deep-merge(
 			),
 		width: $dropdown-item-indicator-size,
 		lexicon-icon: (
+			font-size: 16px,
 			margin-top: 0,
 		),
 	),
@@ -963,10 +978,6 @@ $dropdown-menu-palette: map-deep-merge(
 				padding-left: 1.75rem,
 				padding-right: 0.5rem,
 				padding-top: 0.3125rem,
-				'&.autofit-row': (
-					padding-left: 1.5rem,
-					padding-right: 0.5rem,
-				),
 			),
 			dropdown-item-scroll: (
 				font-size: 1rem,
@@ -1023,13 +1034,11 @@ $dropdown-menu-palette: map-deep-merge(
 			dropdown-menu-indicator-start: (
 				dropdown-item-indicator-start: (
 					left: 0.5rem,
-					top: 0.5rem,
 				),
 			),
 			dropdown-menu-indicator-end: (
 				dropdown-item-indicator-end: (
 					right: 0.5rem,
-					top: 0.5rem,
 				),
 			),
 		),

package/src/scss/variables/_globals.scss

@@ -24,6 +24,12 @@ $focus-visible-selector: if(
 	'&:focus'
 ) !default;
 
+$c-prefers-focus-selector: if(
+	$enable-focus-visible,
+	'.c-prefers-focus &:focus',
+	null
+);
+
 $enable-lexicon-flat-colors: false !default;
 $enable-scaling-components: false !default;
 $scaling-breakpoint-down: sm !default;

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

@@ -22,9 +22,9 @@ $multi-step-icon-hover-bg: $multi-step-icon-bg !default;
 $multi-step-icon-hover-color: rgba($black, 0.7) !default;
 $multi-step-icon-hover-text-decoration: none !default;
 
-$multi-step-icon-focus-bg: $multi-step-icon-hover-bg !default;
+$multi-step-icon-focus-bg: null !default;
 $multi-step-icon-focus-box-shadow: $component-focus-box-shadow !default;
-$multi-step-icon-focus-color: $multi-step-icon-hover-color !default;
+$multi-step-icon-focus-color: null !default;
 $multi-step-icon-focus-outline: 0 !default;
 $multi-step-icon-focus-text-decoration: $multi-step-icon-hover-text-decoration !default;