@clayui/css 3.100.0 → 3.101.0

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 {

package/src/scss/mixins/_slideout.scss

@@ -20,6 +20,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);
 
@@ -87,8 +112,13 @@
 					@include clay-css(map-get($_c-horizontal-resizer, hover));
 				}
 
-				&:focus {
-					@include clay-css(map-get($_c-horizontal-resizer, focus));
+				@at-root {
+					#{$focus-visible-selector},
+					#{$_c-prefers-focus-selector} {
+						@include clay-css(
+							map-get($_c-horizontal-resizer, focus)
+						);
+					}
 				}
 			}
 		}

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

@@ -646,6 +646,31 @@
 		$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) {
@@ -661,10 +686,15 @@
 				);
 			}
 
-			&:focus ~ .toggle-switch-bar {
-				@include clay-toggle-switch-bar-variant(
-					map-deep-get($map, focus, toggle-switch-bar)
-				);
+			@at-root {
+				#{$focus-visible-selector},
+				#{$_c-prefers-focus-selector} {
+					~ .toggle-switch-bar {
+						@include clay-toggle-switch-bar-variant(
+							map-deep-get($map, focus, toggle-switch-bar)
+						);
+					}
+				}
 			}
 
 			&:active ~ .toggle-switch-bar {
@@ -692,10 +722,22 @@
 				);
 			}
 
-			&:checked:focus ~ .toggle-switch-bar {
-				@include clay-toggle-switch-bar-variant(
-					map-deep-get($map, checked, focus, toggle-switch-bar)
-				);
+			@at-root {
+				&:checked {
+					#{$focus-visible-selector},
+					#{$_c-prefers-focus-selector} {
+						~ .toggle-switch-bar {
+							@include clay-toggle-switch-bar-variant(
+								map-deep-get(
+									$map,
+									checked,
+									focus,
+									toggle-switch-bar
+								)
+							);
+						}
+					}
+				}
 			}
 
 			&:checked:active ~ .toggle-switch-bar {
@@ -723,10 +765,22 @@
 				);
 			}
 
-			&:indeterminate:focus ~ .toggle-switch-bar {
-				@include clay-toggle-switch-bar-variant(
-					map-deep-get($map, indeterminate, focus, toggle-switch-bar)
-				);
+			@at-root {
+				&:indeterminate {
+					#{$focus-visible-selector},
+					#{$_c-prefers-focus-selector} {
+						~ .toggle-switch-bar {
+							@include clay-toggle-switch-bar-variant(
+								map-deep-get(
+									$map,
+									indeterminate,
+									focus,
+									toggle-switch-bar
+								)
+							);
+						}
+					}
+				}
 			}
 
 			&:indeterminate:active ~ .toggle-switch-bar {
@@ -762,10 +816,20 @@
 					);
 				}
 
-				&:focus ~ .toggle-switch-bar {
-					@include clay-toggle-switch-bar-variant(
-						map-deep-get($map, mobile, focus, toggle-switch-bar)
-					);
+				@at-root {
+					#{$focus-visible-selector},
+					#{$_c-prefers-focus-selector} {
+						~ .toggle-switch-bar {
+							@include clay-toggle-switch-bar-variant(
+								map-deep-get(
+									$map,
+									mobile,
+									focus,
+									toggle-switch-bar
+								)
+							);
+						}
+					}
 				}
 
 				&:active ~ .toggle-switch-bar {
@@ -799,16 +863,23 @@
 					);
 				}
 
-				&:checked:focus ~ .toggle-switch-bar {
-					@include clay-toggle-switch-bar-variant(
-						map-deep-get(
-							$map,
-							mobile,
-							checked,
-							focus,
-							toggle-switch-bar
-						)
-					);
+				@at-root {
+					&:checked {
+						#{$focus-visible-selector},
+						#{$_c-prefers-focus-selector} {
+							~ .toggle-switch-bar {
+								@include clay-toggle-switch-bar-variant(
+									map-deep-get(
+										$map,
+										mobile,
+										checked,
+										focus,
+										toggle-switch-bar
+									)
+								);
+							}
+						}
+					}
 				}
 
 				&:checked:active ~ .toggle-switch-bar {
@@ -859,16 +930,23 @@
 					);
 				}
 
-				&:indeterminate:focus ~ .toggle-switch-bar {
-					@include clay-toggle-switch-bar-variant(
-						map-deep-get(
-							$map,
-							mobile,
-							indeterminate,
-							focus,
-							toggle-switch-bar
-						)
-					);
+				@at-root {
+					&:indeterminate {
+						#{$focus-visible-selector},
+						#{$_c-prefers-focus-selector} {
+							~ .toggle-switch-bar {
+								@include clay-toggle-switch-bar-variant(
+									map-deep-get(
+										$map,
+										mobile,
+										indeterminate,
+										focus,
+										toggle-switch-bar
+									)
+								);
+							}
+						}
+					}
 				}
 
 				&:indeterminate:active ~ .toggle-switch-bar {

package/src/scss/variables/_globals.scss

@@ -16,6 +16,14 @@ $clay-unset-placeholder: clay-unset-placeholder !default;
 
 $enable-bs4-deprecated: true !default;
 $enable-c-inner: true !default;
+$enable-focus-visible: true !default;
+
+$focus-visible-selector: if(
+	$enable-focus-visible,
+	'&:focus-visible',
+	'&:focus'
+) !default;
+
 $enable-lexicon-flat-colors: false !default;
 $enable-scaling-components: false !default;
 $scaling-breakpoint-down: sm !default;