@clayui/css 3.116.0 → 3.117.0

package/src/scss/mixins/_labels.scss

@@ -236,6 +236,10 @@
 				}
 			}
 
+			.label-item-expand {
+				@include clay-css(map-get($map, label-item-expand));
+			}
+
 			.label-item-before {
 				@include clay-css($label-item-before);
 			}
@@ -691,6 +695,10 @@
 				}
 			}
 
+			.label-item-expand {
+				@include clay-css(map-get($map, label-item-expand));
+			}
+
 			.label-item-before {
 				@include clay-css($label-item-before);
 			}

package/src/scss/mixins/_popovers.scss

@@ -90,6 +90,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);
 
@@ -122,6 +147,14 @@
 			.close {
 				@include clay-close(map-get($map, close));
 			}
+
+			@at-root {
+				&.focus,
+				#{$focus-visible-selector},
+				#{$_c-prefers-focus-selector} {
+					@include clay-popover-variant(map-get($map, focus));
+				}
+			}
 		}
 	}
 }

package/src/scss/variables/_globals.scss

@@ -112,7 +112,7 @@ $colors: map-merge(
 $primary: $blue !default;
 $primary-d1: clay-darken($primary, 7.5) !default;
 $primary-d2: clay-darken($primary, 10) !default;
-$primary-l0: clay-lighten($primary, 13.92) !default;
+$primary-l0: clay-lighten($primary, 17.06) !default;
 $primary-l1: clay-lighten($primary, 22.94) !default;
 $primary-l2: clay-lighten($primary, 32.94) !default;
 $primary-l3: clay-lighten($primary, 44.9) !default;
@@ -120,7 +120,7 @@ $primary-l3: clay-lighten($primary, 44.9) !default;
 $secondary: $gray-600 !default;
 $secondary-d1: clay-darken($secondary, 7.5) !default;
 $secondary-d2: clay-darken($secondary, 10) !default;
-$secondary-l0: clay-lighten($secondary, 11) !default;
+$secondary-l0: clay-lighten($secondary, 15.29) !default;
 $secondary-l1: clay-lighten($secondary, 22.94) !default;
 $secondary-l2: clay-lighten($secondary, 32.94) !default;
 $secondary-l3: clay-lighten($secondary, 44.9) !default;

package/src/scss/variables/_list-group.scss

@@ -34,6 +34,22 @@ $list-group-item-flex-checkbox-offset-top: 0.1875rem !default;
 $list-group-item-flex-offset-top: 0.0625rem !default;
 $list-group-item-flex-list-group-title-offset-top: -0.25rem !default;
 
+$list-group-item-flex: () !default;
+$list-group-item-flex: map-deep-merge(
+	(
+		display: flex,
+		margin-bottom: math-sign($list-group-border-width),
+		padding-left: calc(#{$list-group-item-padding-x} * 0.5),
+		padding-right: calc(#{$list-group-item-padding-x} * 0.5),
+		autofit-col: (
+			justify-content: $list-group-item-flex-align-items,
+			padding-left: calc(#{$list-group-item-padding-x} * 0.5),
+			padding-right: calc(#{$list-group-item-padding-x} * 0.5),
+		),
+	),
+	$list-group-item-flex
+);
+
 $list-group-active-bg: $component-active-bg !default;
 $list-group-active-border-color: $list-group-active-bg !default;
 $list-group-active-color: $component-active-color !default;
@@ -172,6 +188,25 @@ $list-group-link-color: null !default;
 $list-group-link-hover-color: null !default;
 $list-group-link-active-color: $white !default;
 
+$list-group: () !default;
+$list-group: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($list-group-border-radius),
+		box-shadow: clay-enable-shadows($list-group-box-shadow),
+		color: $list-group-color,
+		display: flex,
+		flex-direction: column,
+		font-size: $list-group-font-size,
+		margin-bottom: $list-group-margin-bottom,
+		margin-top: $list-group-margin-top,
+		padding-left: 0,
+		list-group: (
+			box-shadow: if($list-group-box-shadow != null, none, null),
+		),
+	),
+	$list-group
+);
+
 // List Group Item Variants
 
 $list-group-item-theme-colors: () !default;

package/src/scss/variables/_modals.scss

@@ -358,6 +358,9 @@ $modal: map-deep-merge(
 			text-align: $modal-title-text-align,
 			text-overflow: ellipsis,
 			white-space: nowrap,
+			'[tabindex="-1"]': (
+				outline: 0,
+			),
 		),
 		modal-title-indicator: (
 			display: inline-block,

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

@@ -79,6 +79,19 @@ $multi-step-title-font-weight: null !default;
 $multi-step-title-margin-bottom: 0.625rem !default; // 10px
 $multi-step-title-max-width: 100px !default;
 
+$multi-step-title: () !default;
+$multi-step-title: map-deep-merge(
+	(
+		color: $multi-step-title-color,
+		font-size: $multi-step-title-font-size,
+		font-weight: $multi-step-title-font-weight,
+		line-height: normal,
+		margin-bottom: $multi-step-title-margin-bottom,
+		word-wrap: break-word,
+	),
+	$multi-step-title
+);
+
 $multi-step-item-margin-bottom: 10px !default;
 $multi-step-item-width: 75px !default;
 $multi-step-item-fixed-width: 150px !default;
@@ -160,3 +173,11 @@ $multi-step-icon-disabled-focus-box-shadow: none !default;
 $multi-step-divider-disabled-bg: $multi-step-icon-disabled-bg !default;
 $multi-step-title-disabled-color: $multi-step-icon-disabled-color !default;
 $multi-step-indicator-label-disabled-color: $multi-step-title-disabled-color !default;
+
+$multi-step-title-disabled: () !default;
+$multi-step-title-disabled: map-deep-merge(
+	(
+		color: $multi-step-title-disabled-color,
+	),
+	$multi-step-title-disabled
+);

package/src/scss/variables/_popovers.scss

@@ -80,6 +80,10 @@ $popover: map-deep-merge(
 		word-spacing: normal,
 		word-wrap: break-word,
 		z-index: $zindex-popover,
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 		arrow: (
 			display: block,
 			height: $popover-arrow-height,