@clayui/css 3.100.0 → 3.101.0

package/src/scss/mixins/_close.scss

@@ -67,6 +67,31 @@
 	@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,
 			(
@@ -356,14 +381,19 @@
 
 			@at-root {
 				button#{&} {
-					&:focus {
+					#{$focus-visible-selector},
+					#{$_c-prefers-focus-selector} {
 						@include clay-css($btn-focus);
 					}
 				}
 			}
 
-			&:focus {
-				@include clay-css($focus);
+			@at-root {
+				&.focus,
+				#{$focus-visible-selector},
+				#{$_c-prefers-focus-selector} {
+					@include clay-css($focus);
+				}
 			}
 
 			&:active {

package/src/scss/mixins/_custom-forms.scss

@@ -103,6 +103,31 @@
 	@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);
 
@@ -140,21 +165,36 @@
 				}
 			}
 
-			&:focus {
-				~ .custom-control-label::before {
-					@include clay-css(
-						map-deep-get($map, focus, custom-control-label, before)
-					);
-				}
-
-				~ .custom-control-label::after {
-					@include clay-css(
-						map-deep-get($map, focus, custom-control-label, after)
-					);
-				}
-
-				~ .card {
-					@include clay-card-variant(map-deep-get($map, focus, card));
+			@at-root {
+				#{$focus-visible-selector},
+				#{$_c-prefers-focus-selector} {
+					~ .custom-control-label::before {
+						@include clay-css(
+							map-deep-get(
+								$map,
+								focus,
+								custom-control-label,
+								before
+							)
+						);
+					}
+
+					~ .custom-control-label::after {
+						@include clay-css(
+							map-deep-get(
+								$map,
+								focus,
+								custom-control-label,
+								after
+							)
+						);
+					}
+
+					~ .card {
+						@include clay-card-variant(
+							map-deep-get($map, focus, card)
+						);
+					}
 				}
 			}
 
@@ -384,35 +424,40 @@
 				}
 			}
 
-			&:checked:focus {
-				~ .custom-control-label::before {
-					@include clay-css(
-						map-deep-get(
-							$map,
-							checked,
-							focus,
-							custom-control-label,
-							before
-						)
-					);
-				}
-
-				~ .custom-control-label::after {
-					@include clay-css(
-						map-deep-get(
-							$map,
-							checked,
-							focus,
-							custom-control-label,
-							after
-						)
-					);
-				}
-
-				~ .card {
-					@include clay-card-variant(
-						map-deep-get($map, checked, focus, card)
-					);
+			@at-root {
+				&:checked {
+					#{$focus-visible-selector},
+					#{$_c-prefers-focus-selector} {
+						~ .custom-control-label::before {
+							@include clay-css(
+								map-deep-get(
+									$map,
+									checked,
+									focus,
+									custom-control-label,
+									before
+								)
+							);
+						}
+
+						~ .custom-control-label::after {
+							@include clay-css(
+								map-deep-get(
+									$map,
+									checked,
+									focus,
+									custom-control-label,
+									after
+								)
+							);
+						}
+
+						~ .card {
+							@include clay-card-variant(
+								map-deep-get($map, checked, focus, card)
+							);
+						}
+					}
 				}
 			}
 
@@ -609,35 +654,40 @@
 				}
 			}
 
-			&:indeterminate:focus {
-				~ .custom-control-label::before {
-					@include clay-css(
-						map-deep-get(
-							$map,
-							indeterminate,
-							focus,
-							custom-control-label,
-							before
-						)
-					);
-				}
-
-				~ .custom-control-label::after {
-					@include clay-css(
-						map-deep-get(
-							$map,
-							indeterminate,
-							focus,
-							custom-control-label,
-							after
-						)
-					);
-				}
-
-				~ .card {
-					@include clay-card-variant(
-						map-deep-get($map, indeterminate, focus, card)
-					);
+			@at-root {
+				&:indeterminate {
+					#{$focus-visible-selector},
+					#{$_c-prefers-focus-selector} {
+						~ .custom-control-label::before {
+							@include clay-css(
+								map-deep-get(
+									$map,
+									indeterminate,
+									focus,
+									custom-control-label,
+									before
+								)
+							);
+						}
+
+						~ .custom-control-label::after {
+							@include clay-css(
+								map-deep-get(
+									$map,
+									indeterminate,
+									focus,
+									custom-control-label,
+									after
+								)
+							);
+						}
+
+						~ .card {
+							@include clay-card-variant(
+								map-deep-get($map, indeterminate, focus, card)
+							);
+						}
+					}
 				}
 			}
 

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

@@ -354,6 +354,26 @@
 			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,
@@ -624,20 +644,23 @@
 				}
 			}
 
-			&:focus,
-			&.focus {
-				@include clay-css($focus);
+			@at-root {
+				&.focus,
+				#{$_focus-selector},
+				#{$_prefers-focus-selector} {
+					@include clay-css($focus);
 
-				&::before {
-					@include clay-css(map-get($focus, before));
-				}
+					&::before {
+						@include clay-css(map-get($focus, before));
+					}
 
-				&::after {
-					@include clay-css(map-get($focus, after));
-				}
+					&::after {
+						@include clay-css(map-get($focus, after));
+					}
 
-				.c-kbd-inline {
-					@include clay-css($focus-c-kbd-inline);
+					.c-kbd-inline {
+						@include clay-css($focus-c-kbd-inline);
+					}
 				}
 			}
 
@@ -702,10 +725,13 @@
 			// Overwrite Bootstrap's Ensure active button styles are not applied to disabled buttons
 			// https://github.com/twbs/bootstrap/commit/de3973b5e74058e37fd15fecc4cb7b9fd3409def
 
-			&.btn:not([disabled]):not(.disabled):active,
-			&.btn:not([disabled]):not(.disabled).active {
-				&:focus {
-					box-shadow: map-get($focus, box-shadow);
+			@at-root {
+				&.btn:not([disabled]):not(.disabled):active,
+				&.btn:not([disabled]):not(.disabled).active {
+					#{$_focus-selector},
+					#{$_prefers-focus-selector} {
+						box-shadow: map-get($focus, box-shadow);
+					}
 				}
 			}
 

package/src/scss/mixins/_forms.scss

@@ -297,6 +297,31 @@
 	@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,
@@ -558,18 +583,21 @@
 				}
 			}
 
-			&:focus,
-			&.focus {
-				@include clay-css($focus);
+			@at-root {
+				&.focus,
+				#{$focus-visible-selector},
+				#{$_c-prefers-focus-selector} {
+					@include clay-css($focus);
 
-				&::placeholder {
-					@include clay-css($focus-placeholder);
-				}
+					&::placeholder {
+						@include clay-css($focus-placeholder);
+					}
 
-				~ .input-group-inset-item {
-					@include clay-css(
-						map-deep-get($map, focus, input-group-inset-item)
-					);
+					~ .input-group-inset-item {
+						@include clay-css(
+							map-deep-get($map, focus, input-group-inset-item)
+						);
+					}
 				}
 			}
 
@@ -713,6 +741,31 @@
 	@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,
 			(
@@ -888,21 +941,24 @@
 				}
 			}
 
-			&:focus,
-			&.focus {
-				@include clay-css($focus);
+			@at-root {
+				&.focus,
+				#{$focus-visible-selector},
+				#{$_c-prefers-focus-selector} {
+					@include clay-css($focus);
 
-				> option {
-					$focus-option: setter(map-get($focus, option), ());
+					> option {
+						$focus-option: setter(map-get($focus, option), ());
 
-					@include clay-css($focus-option);
+						@include clay-css($focus-option);
 
-					&:hover {
-						@include clay-css(map-get($focus-option, hover));
-					}
+						&:hover {
+							@include clay-css(map-get($focus-option, hover));
+						}
 
-					&:checked {
-						@include clay-css(map-get($focus-option, checked));
+						&:checked {
+							@include clay-css(map-get($focus-option, checked));
+						}
 					}
 				}
 			}
@@ -1020,30 +1076,36 @@
 						}
 					}
 
-					&:focus,
-					&.focus {
-						$ff-only-focus: setter(map-get($ff-only, focus), ());
-
-						@include clay-css($ff-only-focus);
-
-						> option {
-							$ff-only-focus-option: setter(
-								map-get($ff-only-focus, option),
+					@at-root {
+						&.focus,
+						#{$focus-visible-selector},
+						#{$_c-prefers-focus-selector} {
+							$ff-only-focus: setter(
+								map-get($ff-only, focus),
 								()
 							);
 
-							@include clay-css($ff-only-focus-option);
+							@include clay-css($ff-only-focus);
 
-							&:hover {
-								@include clay-css(
-									map-get($ff-only-focus-option, hover)
+							> option {
+								$ff-only-focus-option: setter(
+									map-get($ff-only-focus, option),
+									()
 								);
-							}
 
-							&:checked {
-								@include clay-css(
-									map-get($ff-only-focus-option, checked)
-								);
+								@include clay-css($ff-only-focus-option);
+
+								&:hover {
+									@include clay-css(
+										map-get($ff-only-focus-option, hover)
+									);
+								}
+
+								&:checked {
+									@include clay-css(
+										map-get($ff-only-focus-option, checked)
+									);
+								}
 							}
 						}
 					}
@@ -1553,6 +1615,31 @@
 	@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,
@@ -2432,51 +2519,54 @@
 					}
 				}
 
-				&:focus,
-				&.focus {
-					@include clay-css($focus);
+				@at-root {
+					&.focus,
+					#{$focus-visible-selector},
+					#{$_c-prefers-focus-selector} {
+						@include clay-css($focus);
 
-					~ .clay-range-track {
-						@include clay-css(
-							map-deep-get(
-								$map,
-								form-control-range,
-								focus,
-								clay-range-track
-							)
-						);
-					}
+						~ .clay-range-track {
+							@include clay-css(
+								map-deep-get(
+									$map,
+									form-control-range,
+									focus,
+									clay-range-track
+								)
+							);
+						}
 
-					~ .clay-range-progress {
-						@include clay-css(
-							map-deep-get(
-								$map,
-								form-control-range,
-								focus,
-								clay-range-progress
-							)
-						);
+						~ .clay-range-progress {
+							@include clay-css(
+								map-deep-get(
+									$map,
+									form-control-range,
+									focus,
+									clay-range-progress
+								)
+							);
 
-						.clay-range-thumb {
-							@include clay-css($focus-clay-range-thumb);
-						}
+							.clay-range-thumb {
+								@include clay-css($focus-clay-range-thumb);
+							}
 
-						.tooltip {
-							visibility: visible;
-							opacity: 1;
+							.tooltip {
+								visibility: visible;
+								opacity: 1;
+							}
 						}
-					}
 
-					&::-moz-range-thumb {
-						@include clay-css($focus-clay-range-thumb);
-					}
+						&::-moz-range-thumb {
+							@include clay-css($focus-clay-range-thumb);
+						}
 
-					&::-ms-thumb {
-						@include clay-css($focus-clay-range-thumb);
-					}
+						&::-ms-thumb {
+							@include clay-css($focus-clay-range-thumb);
+						}
 
-					&::-webkit-slider-thumb {
-						@include clay-css($focus-clay-range-thumb);
+						&::-webkit-slider-thumb {
+							@include clay-css($focus-clay-range-thumb);
+						}
 					}
 				}