@clayui/css 3.99.0 → 3.101.0

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);
+						}
 					}
 				}
 

package/src/scss/mixins/_links.scss

@@ -253,6 +253,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,
 			(
@@ -649,32 +674,35 @@
 				}
 			}
 
-			&.focus,
-			&:focus {
-				@include clay-css($focus);
+			@at-root {
+				&.focus,
+				#{$focus-visible-selector},
+				#{$_c-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));
+					}
 
-				.inline-item {
-					@include clay-css(map-get($focus, inline-item));
-				}
+					.inline-item {
+						@include clay-css(map-get($focus, inline-item));
+					}
 
-				.inline-item-before {
-					@include clay-css(map-get($focus, inline-item-before));
-				}
+					.inline-item-before {
+						@include clay-css(map-get($focus, inline-item-before));
+					}
 
-				.inline-item-middle {
-					@include clay-css(map-get($focus, inline-item-middle));
-				}
+					.inline-item-middle {
+						@include clay-css(map-get($focus, inline-item-middle));
+					}
 
-				.inline-item-after {
-					@include clay-css(map-get($focus, inline-item-after));
+					.inline-item-after {
+						@include clay-css(map-get($focus, inline-item-after));
+					}
 				}
 			}
 
@@ -689,17 +717,20 @@
 					@include clay-css(map-get($active, after));
 				}
 
-				&:focus {
-					$_active-focus: setter(map-get($active, focus), ());
+				@at-root {
+					#{$focus-visible-selector},
+					#{$_c-prefers-focus-selector} {
+						$_active-focus: setter(map-get($active, focus), ());
 
-					@include clay-css($_active-focus);
+						@include clay-css($_active-focus);
 
-					&::before {
-						@include clay-css(map-get($_active-focus, before));
-					}
+						&::before {
+							@include clay-css(map-get($_active-focus, before));
+						}
 
-					&::after {
-						@include clay-css(map-get($_active-focus, after));
+						&::after {
+							@include clay-css(map-get($_active-focus, after));
+						}
 					}
 				}
 
@@ -731,22 +762,27 @@
 					@include clay-css(map-get($active-class, after));
 				}
 
-				&:focus {
-					$_active-class-focus: setter(
-						map-get($active-class, focus),
-						()
-					);
+				@at-root {
+					#{$focus-visible-selector},
+					#{$_c-prefers-focus-selector} {
+						$_active-class-focus: setter(
+							map-get($active-class, focus),
+							()
+						);
 
-					@include clay-css($_active-class-focus);
+						@include clay-css($_active-class-focus);
 
-					&::before {
-						@include clay-css(
-							map-get($_active-class-focus, before)
-						);
-					}
+						&::before {
+							@include clay-css(
+								map-get($_active-class-focus, before)
+							);
+						}
 
-					&::after {
-						@include clay-css(map-get($_active-class-focus, after));
+						&::after {
+							@include clay-css(
+								map-get($_active-class-focus, after)
+							);
+						}
 					}
 				}
 
@@ -785,17 +821,22 @@
 					@include clay-css(map-get($disabled, after));
 				}
 
-				&:focus {
-					$_disabled-focus: setter(map-get($disabled, focus), ());
+				@at-root {
+					#{$focus-visible-selector},
+					#{$_c-prefers-focus-selector} {
+						$_disabled-focus: setter(map-get($disabled, focus), ());
 
-					@include clay-css($_disabled-focus);
+						@include clay-css($_disabled-focus);
 
-					&::before {
-						@include clay-css(map-get($_disabled-focus, before));
-					}
+						&::before {
+							@include clay-css(
+								map-get($_disabled-focus, before)
+							);
+						}
 
-					&::after {
-						@include clay-css(map-get($_disabled-focus, after));
+						&::after {
+							@include clay-css(map-get($_disabled-focus, after));
+						}
 					}
 				}
 
@@ -829,8 +870,11 @@
 			}
 
 			&[type] {
-				&:focus {
-					@include clay-css($btn-focus);
+				@at-root {
+					#{$focus-visible-selector},
+					#{$_c-prefers-focus-selector} {
+						@include clay-css($btn-focus);
+					}
 				}
 			}
 
@@ -860,17 +904,20 @@
 					}
 				}
 
-				&:focus {
-					$_show-focus: setter(map-get($show, focus), ());
+				@at-root {
+					#{$focus-visible-selector},
+					#{$_c-prefers-focus-selector} {
+						$_show-focus: setter(map-get($show, focus), ());
 
-					@include clay-css($_show-focus);
+						@include clay-css($_show-focus);
 
-					&::before {
-						@include clay-css(map-get($_show-focus, before));
-					}
+						&::before {
+							@include clay-css(map-get($_show-focus, before));
+						}
 
-					&::after {
-						@include clay-css(map-get($_show-focus, after));
+						&::after {
+							@include clay-css(map-get($_show-focus, after));
+						}
 					}
 				}
 

package/src/scss/mixins/_modals.scss

@@ -24,6 +24,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 '
+			);
+		}
+
 		$header: setter(map-get($map, modal-header), map-get($map, header), ());
 		$header: map-merge(
 			$header,
@@ -144,10 +169,16 @@
 				@include clay-close($header-close);
 			}
 
-			button.close {
-				&:focus {
-					box-shadow: map-get($header-close-btn-focus, box-shadow);
-					outline: map-get($header-close-btn-focus, outline);
+			@at-root {
+				button.close {
+					#{$focus-visible-selector},
+					#{$_c-prefers-focus-selector} {
+						box-shadow: map-get(
+							$header-close-btn-focus,
+							box-shadow
+						);
+						outline: map-get($header-close-btn-focus, outline);
+					}
 				}
 			}
 

package/src/scss/mixins/_sidebar.scss

@@ -104,6 +104,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,
 			(
@@ -239,8 +264,9 @@
 
 					@include clay-css($sidenav-start);
 
-					&:focus,
-					&.focus {
+					&.focus,
+					#{$focus-visible-selector},
+					#{$_c-prefers-focus-selector} {
 						@include clay-css(map-get($sidenav-start, focus));
 					}
 				}
@@ -251,16 +277,20 @@
 
 					@include clay-css($sidenav-end);
 
-					&:focus,
-					&.focus {
+					&.focus,
+					#{$focus-visible-selector},
+					#{$_c-prefers-focus-selector} {
 						@include clay-css(map-get($sidenav-end, focus));
 					}
 				}
 			}
 
-			&:focus,
-			&.focus {
-				@include clay-css(map-get($map, focus));
+			@at-root {
+				&.focus,
+				#{$focus-visible-selector},
+				#{$_c-prefers-focus-selector} {
+					@include clay-css(map-get($map, focus));
+				}
 			}
 
 			.component-link {