@clayui/css 3.163.0 → 3.164.0

package/src/scss/components/_icons.scss

@@ -2,16 +2,115 @@
 	@include clay-css($lexicon-icon);
 }
 
-.lexicon-icon-sm {
-	@include clay-css($lexicon-icon-sm);
+.lexicon-icon-arrows-all {
+	background-color: unquote('hsl(from #{$white} h s l / 0.6)');
+	border: 1px solid $border-color;
+	border-radius: 0.1413em; // 6.5/46
+	height: 0.73913em; // 34/46 aspect ratio
+	margin-top: 0;
+	width: 1em;
+
+	.lx-arrows-all-chevron {
+		fill: $white;
+	}
 }
 
-.lexicon-icon-lg {
-	@include clay-css($lexicon-icon-lg);
+.clay-keyboard-arrows-horizontal {
+	.lx-arrows-all-keycap-down,
+	.lx-arrows-all-keycap-up {
+		fill: $gray-300;
+	}
 }
 
-.lexicon-icon-xl {
-	@include clay-css($lexicon-icon-xl);
+.clay-keyboard-arrows-vertical {
+	.lx-arrows-all-keycap-left,
+	.lx-arrows-all-keycap-right {
+		fill: $gray-300;
+	}
+}
+
+.clay-keyboard-arrows-indicator {
+	display: inline-flex;
+	font-size: 2.875rem; // 46px — natural design size
+
+	.lexicon-icon {
+		margin-top: 0;
+	}
+}
+
+.clay-keyboard-arrows-indicator-floating {
+	background-color: $white;
+	border-radius: 0.1413em; // matches `.lexicon-icon-arrows-all`
+	position: absolute;
+
+	// Position timing matches `$c-slideout-transition-in` so the
+	// indicator slides in lockstep with a `VerticalBar` panel opening
+	// rather than vanishing and reappearing at the new position. The
+	// focus-within toggle stays instantaneous.
+	transition:
+		bottom 0.3s ease-in-out,
+		left 0.3s ease-in-out,
+		right 0.3s ease-in-out,
+		top 0.3s ease-in-out;
+	z-index: $zindex-tooltip;
+
+	&.clay-keyboard-arrows-indicator-floating-hidden {
+		opacity: 0;
+		pointer-events: none;
+		visibility: hidden;
+	}
+
+	// `tooltip` placement (default): the indicator sits next to the
+	// anchor with a directional CSS-triangle arrow. The arrow's fill
+	// matches the icon's semi-transparent white surface, with the icon's
+	// border color outlining it.
+
+	&.clay-keyboard-arrows-indicator-floating-tooltip {
+		&::before,
+		&::after {
+			border-style: solid;
+			content: '';
+			height: 0;
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			width: 0;
+		}
+
+		// Default: indicator sits to the right of the anchor, so the arrow
+		// points left (toward the anchor).
+
+		&::before {
+			border-color: transparent $border-color transparent transparent;
+			border-width: 7px 7px 7px 0;
+			left: -7px;
+		}
+
+		&::after {
+			border-color: transparent $white transparent transparent;
+			border-width: 6px 6px 6px 0;
+			left: -6px;
+		}
+
+		&.clay-keyboard-arrows-indicator-floating-flipped {
+			// Flipped: indicator sits to the left of the anchor, so the
+			// arrow points right (toward the anchor).
+
+			&::before {
+				border-color: transparent transparent transparent $border-color;
+				border-width: 7px 0 7px 7px;
+				left: auto;
+				right: -7px;
+			}
+
+			&::after {
+				border-color: transparent transparent transparent $white;
+				border-width: 6px 0 6px 6px;
+				left: auto;
+				right: -6px;
+			}
+		}
+	}
 }
 
 .order-arrow-down-active {
@@ -102,3 +201,15 @@ button.collapse-icon,
 		transform: translateY(-50%);
 	}
 }
+
+.lexicon-icon-sm {
+	@include clay-css($lexicon-icon-sm);
+}
+
+.lexicon-icon-lg {
+	@include clay-css($lexicon-icon-lg);
+}
+
+.lexicon-icon-xl {
+	@include clay-css($lexicon-icon-xl);
+}

package/src/scss/components/_resizer.scss

@@ -9,6 +9,14 @@
 		@include clay-css(map-deep-get($c-horizontal-resizer, hover, before));
 	}
 
+	&:active::before {
+		@include clay-css(map-deep-get($c-horizontal-resizer, active, before));
+	}
+
+	&:focus-visible {
+		@include clay-css(map-get($c-horizontal-resizer, focus));
+	}
+
 	&:focus-visible::before {
 		@include clay-css(map-deep-get($c-horizontal-resizer, focus, before));
 	}

package/src/scss/components/_root.scss

@@ -1,7 +1,14 @@
-:root {
-	@if (variable-exists(c-root)) {
+@if (variable-exists(c-root)) {
+	:root {
 		@include clay-css($c-root);
-	} @else {
+	}
+
+	[data-color-scheme='light']:root,
+	:root [data-color-scheme='light'] {
+		color-scheme: light;
+	}
+} @else {
+	:root {
 		// Custom variable values only support SassScript inside `#{}`
 
 		@each $color, $value in $colors {
@@ -22,3 +29,29 @@
 		--font-family-monospace: #{inspect($font-family-monospace)};
 	}
 }
+
+@if (variable-exists(c-dark)) {
+	@media (prefers-color-scheme: dark) {
+		:root {
+			@include clay-css($c-dark);
+		}
+	}
+
+	[data-color-scheme='dark']:root,
+	:root [data-color-scheme='dark'] {
+		@include clay-css($c-dark);
+	}
+}
+
+@if (variable-exists(c-dark-high-contrast)) {
+	@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
+		:root {
+			@include clay-css($c-dark-high-contrast);
+		}
+	}
+
+	[data-color-scheme='dark-high-contrast']:root,
+	:root [data-color-scheme='dark-high-contrast'] {
+		@include clay-css($c-dark-high-contrast);
+	}
+}

package/src/scss/functions/_lx-icons-generated.scss

@@ -62,7 +62,7 @@
 
 	'announcement': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zM95.9 240.2c.2-28.7 10.4-34.2 24.2-37.4l71.7-6.8v88.3s-54-3-71.9-5.4c-11.6-1.7-24.2-8.8-24-38.7zM192 400.1c-.7 20.9-31 21.6-32 0v-86l32 2.4v83.6zm192.1-63.6c-.3 14.6-17.3 21.3-27.4 11.1-21.4-21.4-86.1-61.2-132.8-61.2v-92.8c46.1 0 111.2-39.1 132.6-60.5 10.8-10.8 27.4-2.6 27.4 11.1l.2 192.3z"/></svg>',
 
-	'anonymize': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="m480 220.3-64-32-52.9-132.2c-6.3-15.6-23.6-23.8-39.6-18.6l-70.2 22.8-64.5-22.1c-16.1-5.5-33.8 2.6-40.1 18.4L96 188.3l-64 32h64v86.3c0 6.9 2.1 13.1 5 18.8 52.4 200.3 256.4 202.3 310 0 2.9-5.7 5-11.9 5-18.8v-86.3h64zm-338.2 128c84.9 0 94.2-64 114.2-64s27.3 64 114.2 64c-54.2 128-173.5 128.6-228.4 0zm242.2-96H128v-32h256v32z" fill="#{$color}"/></svg>',
+	'anonymize': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M12.5 9a3.5 3.5 0 1 1-3.435 4.176 1.396 1.396 0 0 0-2.131 0 3.5 3.5 0 1 1-.134-1.843 2.997 2.997 0 0 1 2.4 0A3.502 3.502 0 0 1 12.5 9Zm-9 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm9 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z" fill-rule="evenodd" clip-rule="evenodd" fill="#{$color}"/><path class="lexicon-icon-outline" d="M11 0a2 2 0 0 1 2 2v4h2a1 1 0 1 1 0 2H1a1 1 0 0 1 0-2h2V2a2 2 0 0 1 2-2c.255 0 .49.127.683.295C6.233.775 7.065 1 8 1c.935 0 1.768-.226 2.317-.705C10.51.127 10.745 0 11 0Z" fill="#{$color}"/></svg>',
 
 	'api-lock': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline api-lock-a" d="M112.1 467.3H54.7L43.2 512H0l58.8-191.5h51L168.5 512h-44.9l-11.5-44.7zm-8.7-33.2S86.3 366 83.8 356.2h-1.2c-2.3 10-19.3 77.9-19.3 77.9h40.1z" fill="#{$color}"/><path class="lexicon-icon-outline api-lock-p" d="M192 320.5h65.5c10.2 0 73.4 0 73.4 64 0 64.2-63.5 63.8-73.4 63.8h-26.2V512H192V320.5zm62.9 89.5c23 0 34.6-10.7 34.6-25.4 0-25.3-23.2-27.3-34.6-27.3h-22.3V410h22.3z" fill="#{$color}"/><path class="lexicon-icon-outline api-lock-i" d="M369.3 320.5H416V512h-46.7V320.5z" fill="#{$color}"/><path class="lexicon-icon-outline api-lock-lock" d="M460.8 192.3H288V96.1c0-35.3 28.7-64.1 64-64.1s64 28.8 64 64.1v31.5h32V96.1C448 43 405 0 352 0s-96 43-96 96.1v96.1h-19.2c-28.2 0-44.8 23-44.8 51.3v12.8h256v160.2h32c32 0 32-30.7 32-51.3V243.6c0-28.3-23-51.3-51.2-51.3z" fill="#{$color}"/></svg>',
 
@@ -74,14 +74,6 @@
 
 	'arrow-join': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M493.5 210.8 301.3 18.7c-18-18-57.2-30.8-90.6-.1l-192 192.3c-31 33.3-17.9 74.4 0 90.5 50.4 45.5 143.9 144.3 192.2 192.2 31.5 31.2 74.3 17 90.5 0l192.3-192c16.2-17.4 31.5-56.6-.2-90.8zM347.9 343.7l-82 100.4c-5.4 5.4-14.3 5.4-19.7 0l-82-100.4c-8.8-8.7-2.6-23.6 9.9-23.6h50c.2-64.1 1.1-67.8-18.7-92.1L141 163.7l22.6-22.6 60.3 60.3V96h64v224h50c12.6.1 18.8 15 10 23.7z" fill="#{$color}"/></svg>',
 
-	'arrow-key-down': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" clip-rule="evenodd" d="M3.33 0h9.34A3.33 3.33 0 0 1 16 3.33v9.34A3.33 3.33 0 0 1 12.67 16H3.33A3.33 3.33 0 0 1 0 12.67V3.33A3.33 3.33 0 0 1 3.33 0Zm8.5 6.49-3.42 3.98c-.23.26-.59.26-.82 0L4.17 6.49c-.36-.43-.1-1.16.41-1.16h6.84c.51.01.77.73.41 1.16Z" fill-rule="evenodd" fill="#{$color}"/></svg>',
-
-	'arrow-key-left': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" clip-rule="evenodd" d="M3.33 0h9.34A3.33 3.33 0 0 1 16 3.33v9.34A3.33 3.33 0 0 1 12.67 16H3.33A3.33 3.33 0 0 1 0 12.67V3.33A3.33 3.33 0 0 1 3.33 0Zm6.18 11.83L5.53 8.41a.529.529 0 0 1 0-.82l3.98-3.42c.43-.36 1.16-.1 1.16.41v6.84c-.01.51-.73.77-1.16.41Z" fill-rule="evenodd" fill="#{$color}"/></svg>',
-
-	'arrow-key-right': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" clip-rule="evenodd" d="M3.33 0h9.34A3.33 3.33 0 0 1 16 3.33v9.34A3.33 3.33 0 0 1 12.67 16H3.33A3.33 3.33 0 0 1 0 12.67V3.33A3.33 3.33 0 0 1 3.33 0Zm3.16 4.17 3.98 3.42c.26.23.26.59 0 .82l-3.98 3.42c-.43.36-1.16.1-1.16-.41V4.58c.01-.51.73-.77 1.16-.41Z" fill-rule="evenodd" fill="#{$color}"/></svg>',
-
-	'arrow-key-up': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" clip-rule="evenodd" d="M3.33 0h9.34A3.33 3.33 0 0 1 16 3.33v9.34A3.33 3.33 0 0 1 12.67 16H3.33A3.33 3.33 0 0 1 0 12.67V3.33A3.33 3.33 0 0 1 3.33 0Zm8.5 9.51L8.41 5.53a.529.529 0 0 0-.82 0L4.17 9.51c-.36.43-.1 1.16.41 1.16h6.84c.51-.01.77-.73.41-1.16Z" fill-rule="evenodd" fill="#{$color}"/></svg>',
-
 	'arrow-right-full': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M255.4 0C124 0 15.9 97.8 0 224h261.2l-.1-.1-27.4-27.2c-29.8-30.3 15.6-75.5 45.5-45.3l82.2 81.9c12.6 12.5 12.6 32.8 0 45.3l-82.5 81.9c-29.3 28.7-76.2-12-45.5-45.3l27.2-27.1.2-.2H0c15.9 126.2 124 224 255.4 224C596.5 511.1 598.5 0 255.4 0z" fill="#{$color}"/></svg>',
 
 	'arrow-split': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M493.29 210.83 301.17 18.71c-24.95-24.95-65.39-24.95-90.34 0L18.71 210.83c-24.95 24.95-24.95 65.39 0 90.34l192.12 192.12c24.95 24.95 65.39 24.95 90.34 0l192.12-192.12c24.95-24.95 24.95-65.39 0-90.34zM376.81 351.82l-64.37-6.48c-6.18.03-9.24-7.41-4.84-11.81l17.65-17.64L256 246.64l-69.25 69.24 17.65 17.64c4.4 4.4 1.34 11.84-4.84 11.81l-64.37 6.48c-3.81-.02-6.94-3.14-6.95-6.96l6.48-64.37c-.03-6.18 7.41-9.24 11.81-4.84l17.64 17.64c48.25-49.75 59.03-52.6 59.89-73.12v-91.95h63.88v91.92c-.72 19.87 16.02 27.16 59.89 73.14l17.64-17.64c4.4-4.4 11.84-1.35 11.81 4.84l6.48 64.37c-.02 3.84-3.14 6.96-6.95 6.98z" fill="#{$color}"/></svg>',
@@ -92,6 +84,8 @@
 
 	'arrow-xor': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M493.5 210.8 301.3 18.6c-18-18.1-57.2-30.8-90.6-.1l-192 192.3c-31 33.3-17.9 74.4 0 90.5l192.2 192.2c31.5 31.2 74.3 17 90.5 0l192.3-192.1c16.2-17.2 31.5-56.4-.2-90.6zM352 187.1V224c0 17.7-14.3 32-32 32h-48v106.7h38.7c8.3 0 12.5 9.9 6.6 15.7l-54.7 66.9c-3.6 3.6-9.5 3.6-13.1 0l-54.7-66.9c-5.9-5.8-1.7-15.7 6.6-15.7H240V256h-48c-17.7 0-32-14.3-32-32v-36.9c-25.6-12.6-19.1-59.1 16-59.1 33.9 0 43.3 44.2 16 59.1V224h128v-36.9c-26.1-14.9-19-59.1 16-59.1 34.2 0 43.1 44 16 59.1z" fill="#{$color}"/></svg>',
 
+	'arrows-all': '<svg viewBox="0 0 46 34" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline lx-arrows-all-keycap lx-arrows-all-keycap-right" d="M32.083 28A2.083 2.083 0 0 1 30 25.917v-5.834c0-1.15.933-2.083 2.083-2.083h5.834c1.15 0 2.083.933 2.083 2.083v5.834c0 1.15-.933 2.083-2.083 2.083h-5.834Z" fill="#{$color}"/><path class="lx-arrows-all-chevron" d="m34.685 20.72 2.388 2.052a.317.317 0 0 1 0 .493l-2.388 2.051c-.256.22-.694.063-.694-.246v-4.102c.003-.31.438-.466.694-.247Z"/><path class="lexicon-icon-outline lx-arrows-all-keycap lx-arrows-all-keycap-left" d="M13.917 28c1.15 0 2.083-.933 2.083-2.083v-5.834c0-1.15-.933-2.083-2.083-2.083H8.083C6.933 18 6 18.933 6 20.083v5.834C6 27.067 6.933 28 8.083 28h5.834Z" fill="#{$color}"/><path class="lx-arrows-all-chevron" d="m11.422 25.298-2.388-2.051a.317.317 0 0 1 0-.494l2.388-2.05c.255-.22.694-.064.694.246v4.102c-.003.31-.439.466-.694.247Z"/><path class="lexicon-icon-outline lx-arrows-all-keycap lx-arrows-all-keycap-down" d="M25.917 28c1.15 0 2.083-.933 2.083-2.083v-5.834c0-1.15-.933-2.083-2.083-2.083h-5.834c-1.15 0-2.083.933-2.083 2.083v5.834c0 1.15.933 2.083 2.083 2.083h5.834Z" fill="#{$color}"/><path class="lx-arrows-all-chevron" d="m25.298 22.494-2.051 2.388a.317.317 0 0 1-.494 0l-2.05-2.388c-.22-.256-.064-.694.246-.694h4.102c.31.003.466.438.247.694Z"/><path class="lexicon-icon-outline lx-arrows-all-keycap lx-arrows-all-keycap-up" d="M18 13.917c0 1.15.933 2.083 2.083 2.083h5.834c1.15 0 2.083-.933 2.083-2.083V8.083C28 6.933 27.067 6 25.917 6h-5.834C18.933 6 18 6.933 18 8.083v5.834Z" fill="#{$color}"/><path class="lx-arrows-all-chevron" d="m20.702 11.485 2.051-2.388a.317.317 0 0 1 .494 0l2.05 2.388c.22.256.064.694-.246.694H20.95c-.31-.003-.466-.438-.247-.694Z"/></svg>',
+
 	'asterisk': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="m323.6 190 146.7-48.8L512 263.9l-149.2 47.6 93.6 125.2L351.5 513l-96.1-126.4L161.8 513 56.9 435.3l92.3-123.9L0 263.8l40.4-122.6 148 48.8V31h135.3l-.1 159z" fill="#{$color}"/></svg>',
 
 	'audio': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M12.31 2H6.232c-.931 0-1.693.772-1.693 1.715v6.042a2.2 2.2 0 0 0-.423-.042c-1.169 0-2.115.959-2.115 2.142 0 1.184.946 2.143 2.115 2.143 1.169 0 2.116-.959 2.116-2.143V6.286h6.077V8.9a2.201 2.201 0 0 0-.424-.043c-1.168 0-2.115.96-2.115 2.143 0 1.184.947 2.143 2.115 2.143 1.17 0 2.116-.959 2.116-2.143V3.715c0-.943-.762-1.715-1.693-1.715Z" fill="#{$color}"/></svg>',
@@ -136,6 +130,8 @@
 
 	'box-container': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline box-container-border" d="M448 64v384H64V64h384m0-64H64C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z" fill="#{$color}"/><path class="lexicon-icon-outline box-container-square1" d="M384 256h-64c-17.7 0-32-14.3-32-32v-64c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32z" fill="#{$color}"/><path class="lexicon-icon-outline box-container-square2" d="M384 416h-64c-17.7 0-32-14.3-32-32v-64c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32z" fill="#{$color}"/><path class="lexicon-icon-outline box-container-square3" d="M224 416h-64c-17.7 0-32-14.3-32-32v-64c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32z" fill="#{$color}"/></svg>',
 
+	'box-squared': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M14 0a2 2 0 0 1 2 2v4a1 1 0 1 1-2 0V2H2v12h4a1 1 0 1 1 0 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M14 9a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z" fill="#{$color}"/></svg>',
+
 	'braces': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M156.564 31.936c-26.379 0-51.676 10.114-70.329 28.117-18.652 18.004-29.13 42.422-29.13 67.883v37.504c-.003 8.486-3.497 16.624-9.714 22.624l-9.78 9.44a1.14 1.14 0 0 1-.332.224c-49.664 24-49.664 92.448 0 116.416a1.1 1.1 0 0 1 .331.224l9.78 9.44c6.218 5.999 9.712 14.137 9.714 22.624v37.504c0 25.46 10.48 49.878 29.131 67.882 18.653 18.003 43.95 28.118 70.329 28.118 8.792 0 17.225-3.372 23.442-9.373 6.218-6.001 9.711-14.141 9.711-22.627 0-8.487-3.493-16.627-9.711-22.628-6.217-6.001-14.65-9.372-23.442-9.372-8.793 0-17.226-3.372-23.443-9.373-6.218-6.001-9.71-14.141-9.71-22.627v-37.504c-.015-25.448-10.497-49.849-29.142-67.84l-9.78-9.472a67.42 67.42 0 0 0-17.97-12.48l-.032-.032s-.166-.288-.166-.672c0-.384.166-.64.166-.64v-.064l.464-.288a67.203 67.203 0 0 0 17.538-12.16l9.78-9.472c9.242-8.91 16.576-19.49 21.582-31.135a93.126 93.126 0 0 0 7.593-36.737v-37.504c0-8.487 3.493-16.627 9.71-22.628 6.217-6.001 14.65-9.373 23.443-9.373 8.793 0 17.225-3.37 23.443-9.372 6.217-6.001 9.71-14.14 9.71-22.628 0-8.486-3.493-16.626-9.71-22.627-6.218-6.001-14.684-9.372-23.476-9.372Zm198.918 0c26.379 0 51.676 10.114 70.329 28.117 18.652 18.004 29.131 42.422 29.131 67.883v37.504c.001 8.486 3.496 16.624 9.713 22.624l9.814 9.44c.075.087.165.163.265.224 49.73 24 49.73 92.448 0 116.416-.1.06-.19.136-.265.224l-9.814 9.44c-6.217 5.999-9.712 14.137-9.713 22.624v37.504c0 25.46-10.479 49.878-29.131 67.882-18.653 18.003-43.95 28.118-70.329 28.118-8.792 0-17.225-3.372-23.442-9.373-6.218-6.001-9.711-14.141-9.711-22.627 0-8.487 3.493-16.627 9.711-22.628 6.217-6.001 14.65-9.372 23.442-9.372 8.793 0 17.226-3.372 23.443-9.373 6.217-6.001 9.71-14.141 9.71-22.627v-37.504c.015-25.448 10.497-49.849 29.142-67.84l9.78-9.472a67.443 67.443 0 0 1 18.002-12.48s.166-.32.166-.704c0-.384-.133-.64-.133-.64l-.066-.064s-.099-.128-.431-.288a67.436 67.436 0 0 1-17.538-12.16l-9.78-9.472c-18.654-18-29.136-42.414-29.142-67.872v-37.504c0-8.487-3.493-16.627-9.71-22.628-6.217-6.001-14.65-9.373-23.443-9.373-8.792 0-17.225-3.37-23.442-9.372-6.218-6.001-9.711-14.14-9.711-22.628 0-8.486 3.493-16.626 9.711-22.627 6.217-6.001 14.65-9.372 23.442-9.372Z"/></svg>',
 
 	'brackets': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M160.03 64.991c0-17.674-14.327-32.001-32.001-32.001H96.027c-35.314 0-64.003 28.701-64.003 64.003v320.014c0 35.302 28.69 64.003 64.003 64.003h32.002c17.674 0 32.001-14.327 32.001-32.001s-14.327-32.002-32.001-32.002H96.027V96.993h32.002c17.674 0 32.001-14.328 32.001-32.002Zm320.015 352.016c0 35.302-28.689 64.003-64.003 64.003h-32.001c-17.674 0-32.002-14.327-32.002-32.001s14.328-32.002 32.002-32.002h32.001V96.993h-32.001c-17.674 0-32.002-14.328-32.002-32.002 0-17.674 14.328-32.001 32.002-32.001h32.001c35.314 0 64.003 28.701 64.003 64.003v320.014Z"/></svg>',
@@ -190,6 +186,28 @@
 
 	'change': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline change-top" d="M32 256c17.6 0 32-14.4 32-32v-96h342.6l-17.1 17.1c-12.4 12.4-12.4 32.8 0 45.3 12.4 12.4 32.8 12.4 45.3 0l67.9-67.9c12.4-12.4 12.4-32.8 0-45.3L434.8 9.3c-12.4-12.4-32.8-12.4-45.3 0-12.4 12.4-12.4 32.8 0 45.3l9.4 9.4H32C14.4 64 0 78.4 0 96v128c0 17.6 14.4 32 32 32z" fill="#{$color}"/><path class="lexicon-icon-outline change-bottom" d="M480 256c-17.6 0-32 14.4-32 32v96H105.4l17.1-17.1c12.4-12.4 12.4-32.8 0-45.3-12.4-12.4-32.8-12.4-45.3 0L9.3 389.5c-12.4 12.4-12.4 32.8 0 45.3l67.9 67.9c12.4 12.4 32.8 12.4 45.3 0 12.4-12.4 12.4-32.8 0-45.3l-9.4-9.4H480c17.6 0 32-14.4 32-32V288c0-17.6-14.4-32-32-32z" fill="#{$color}"/></svg>',
 
+	'chart-area': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M1 0a1 1 0 0 1 1 1v13h13a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M6.559 2.313a.971.971 0 0 1 1.428 0l2.558 2.723 2.096-1.784a.968.968 0 0 1 1.264 0l1.727 1.47c.233.199.368.496.368.81v5.423c0 .577-.448 1.045-1 1.045H5c-.552 0-1-.468-1-1.045V5.463c0-.274.103-.537.286-.733L6.56 2.312Z" fill="#{$color}"/></svg>',
+
+	'chart-bar-stacked': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M3 12a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h2ZM3 6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h2Z" fill="#{$color}"/></svg>',
+
+	'chart-bar-x-axis': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M15 14a1 1 0 1 1 0 2H1a1 1 0 1 1 0-2h14ZM3 6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h2Zm6-6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h2Zm6 3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2Z" fill="#{$color}"/></svg>',
+
+	'chart-bar-y-axis': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M1 0a1 1 0 0 1 1 1v14a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1Zm11 12a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h7Zm3-6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h10ZM9 0a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h4Z" fill="#{$color}"/></svg>',
+
+	'chart-bar': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M3 6a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h2Z" fill="#{$color}"/></svg>',
+
+	'chart-donut': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M7.25 4.07A4.001 4.001 0 0 0 8 12a3.98 3.98 0 0 0 2.247-.692l2.854 2.853A8 8 0 1 1 7.25.035V4.07Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M15.964 8.75a7.96 7.96 0 0 1-1.803 4.35l-2.853-2.853c.302-.443.517-.95.62-1.497h4.036ZM8.75.035a8 8 0 0 1 7.214 7.215h-4.035A4.003 4.003 0 0 0 8.75 4.07V.035Z" fill="#{$color}"/></svg>',
+
+	'chart-line-down': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M1 0a1 1 0 0 1 1 1v13h13a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M10.483 4a.94.94 0 0 1 .68.31l2.99 3.355v-.488c0-.487.414-.883.923-.883.51 0 .924.396.924.883v2.94c0 .457-.364.834-.83.88a1.43 1.43 0 0 1-.094.003h-2.768c-.51 0-.924-.396-.924-.883V10c0-.487.414-.882.924-.882h.717l-2.597-2.912L8.366 8.31a.945.945 0 0 1-.674.278.95.95 0 0 1-.605-.215L7.02 8.31 4.25 5.486a.855.855 0 0 1 .043-1.247.953.953 0 0 1 1.304.04l2.096 2.138 2.096-2.139A.945.945 0 0 1 10.483 4Z" fill="#{$color}"/></svg>',
+
+	'chart-line-up': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M1 0a1 1 0 0 1 1 1v13h13a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M15.096 3.001a.931.931 0 0 1 .153.016l.022.004a.925.925 0 0 1 .143.043l.034.014a.918.918 0 0 1 .133.074l.016.011a.9.9 0 0 1 .06.045l.013.01.029.024.021.023.018.017a.925.925 0 0 1 .119.153l.021.037a1.06 1.06 0 0 1 .063.135l.01.028.017.055.007.034a.91.91 0 0 1 .017.09c.002.016.002.033.003.05a.455.455 0 0 1 .004.053l.001.017v2.8a.928.928 0 0 1-.922.932.928.928 0 0 1-.923-.933v-.385l-3.01 3.346a.921.921 0 0 1-.661.306.92.92 0 0 1-.675-.273L7.693 7.586l-2.117 2.14a.916.916 0 0 1-1.305 0 .941.941 0 0 1 0-1.32l2.77-2.8.07-.063a.915.915 0 0 1 1.234.063l2.084 2.108 2.56-2.848h-.681a.928.928 0 0 1-.923-.932c0-.516.413-.934.923-.934h2.77l.018.001Z" fill="#{$color}"/></svg>',
+
+	'chart-line': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M1 0a1 1 0 0 1 1 1v13h13a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M14.241 4.35a.999.999 0 1 1 1.518 1.3l-4.285 5a1.001 1.001 0 0 1-1.519 0L7.856 8.202 5.76 10.65a.999.999 0 1 1-1.518-1.3l2.857-3.334a1 1 0 0 1 1.518 0l2.098 2.447L14.24 4.35Z" fill="#{$color}"/></svg>',
+
+	'chart-pie-fill': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M7.25 8c0 .199.08.39.22.53l5.63 5.631A8 8 0 1 1 7.25.035V8Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M15.271 4.667A7.966 7.966 0 0 1 16 8a7.965 7.965 0 0 1-1.839 5.1l-4.94-4.94 6.05-3.493ZM8.75.035a7.99 7.99 0 0 1 5.77 3.333L8.75 6.7V.035Z" fill="#{$color}"/></svg>',
+
+	'chart-pie': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM7 2.084A6 6 0 0 0 8 14a5.97 5.97 0 0 0 3.475-1.111L7.293 8.707A1 1 0 0 1 7 8V2.084Zm2.628 6.13 3.26 3.26A5.97 5.97 0 0 0 14 8a5.98 5.98 0 0 0-.376-2.093L9.628 8.214ZM9 6.268l3.623-2.092A5.993 5.993 0 0 0 9 2.084v4.184Z" fill-rule="evenodd" clip-rule="evenodd" fill="#{$color}"/></svg>',
+
 	'chatbot': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline lx-chatbot-border" d="M480 32H32C12.8 32 0 44.8 0 64v319.7c0 19.2 12.8 32 32 32h64v32c0 25.6 32 44.8 54.4 22.5l54.4-54.4H480c19.2 0 32-12.8 32-32V64c0-19.2-12.8-32-32-32zm-32 319.8H64V96h384v255.8z" fill="#{$color}"/><path class="lexicon-icon-outline lx-chatbot-eye-1" fill="#{$color}" d="M128 160h64v64h-64z"/><path class="lexicon-icon-outline lx-chatbot-eye-2" fill="#{$color}" d="M320 160h64v64h-64z"/><path class="lexicon-icon-outline lx-chatbot-mouth" d="M256 320c64 0 96-28.7 96-64H160c0 35.3 32 64 96 64z" fill="#{$color}"/></svg>',
 
 	'check-circle-full': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M471.2 117.7 280.3 340.8c-5.9 6.8-14.6 11.2-24.3 11.2-8.8 0-16.8-3.6-22.6-9.4l-96-96.1c-29.1-28.9 16.1-74.2 45.2-45.3l71.6 71.7L423.7 74.8c2.2-2.5 4.7-3.9 7.1-5.5C385 26.5 323.7 0 256 0 114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256c0-51-15.1-98.4-40.8-138.3z" fill="#{$color}"/></svg>',
@@ -736,6 +754,8 @@
 
 	'pin': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline pin-tack" fill="#{$color}" d="m0 512 140-216.5 77.6 77.4z"/><path class="lexicon-icon-outline pin-body" d="m501.9 140.7-129.2-129c-35.4-32-76.7 8.8-58.1 41.9l-175.4 85.8c-34.8-34.8-84.3 14.6-50.9 52.9L321 424.5c29.6 29.4 87.9-11.4 51.7-51.6l85.9-175.1c35.9 18.9 71.3-24.5 43.3-57.1z" fill="#{$color}"/></svg>',
 
+	'plant': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M1.5.05c.04-.006 3.243-.448 5.02 1.43 1.186 1.252 1.438 3.223 1.473 4.408.004.037.007.074.007.112v3.517c.364-1.059 1.031-2.38 2.213-3.079 2.173-1.285 5.259.019 5.259.019-.004.031-.448 3.393-2.611 4.672-1.7 1.005-3.958.423-4.86.124V15a1 1 0 0 1-2 0V6.864c-1.005-.136-2.191-.5-3.047-1.403C1.176 3.58 1.497.086 1.5.05Z" fill="#{$color}"/></svg>',
+
 	'play': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M2 14.543V1.462C2-.093 3.215-.465 4.701.634l8.838 6.54c.615.456.615 1.2 0 1.657L4.7 15.37c-1.483 1.1-2.7.727-2.7-.827Z" fill="#{$color}"/></svg>',
 
 	'plug': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M457.8 326.4 413 281.6l89.6-89.6c28.8-32-16-73.6-44.8-44.8l-89.6 89.6-92.8-92.8L365 54.4c28.8-32-12.8-73.6-44.8-44.8l-89.6 89.6-44.8-44.8C157 28.8 112.2 67.2 141 99.2l-38.4 38.4c-64 64-67.2 166.4-6.4 233.6l-96 96L45 512l92.8-92.8c28.8 32 128 92.8 224 3.2l48-48c35.2 25.6 76.8-19.2 48-48z" fill="#{$color}"/></svg>',
@@ -1008,6 +1028,8 @@
 
 	'urgent': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zm31.9 399.7c15.1-6.9 33.4-17.8 52.5-34 25.4 42.1-34.3 69.3-52.5 34zm-64.4-16.2c-37.1-26.1-4.1-45.4-50.9-90.5-16.9-16.2-70.6-60.6-30.6-127.6-21.1-19.9 1.4-45.8 23.6-23.6 66.5-38.9 111.1 13.9 127.5 30.5 48.8 49.6 65.3 13.1 91.5 49.9-8.6 81.7-94.4 155.4-161.1 161.3z"/></svg>',
 
+	'user-cog': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M6.858 7.797V16C3.429 16 0 15.01 0 13.028c0-3.505 3.43-5.24 6.858-5.23ZM6.857 0c1.893 0 3.428 1.522 3.428 3.399S8.75 6.797 6.857 6.797c-1.894 0-3.429-1.522-3.429-3.398C3.428 1.522 4.963 0 6.857 0Zm8.189 12.386c.036-.242-.008-.614-.03-.783l.758-.502a.499.499 0 0 0 .155-.647l-.558-.984a.5.5 0 0 0-.64-.222l-.8.367a3.375 3.375 0 0 0-.78-.437l-.104-.749A.502.502 0 0 0 12.55 8h-1.094a.502.502 0 0 0-.497.432l-.101.733c-.29.12-.577.298-.786.454l-.781-.378c-.23-.09-.475-.07-.6.144l-.622.953a.5.5 0 0 0 .11.634l.785.628a3.36 3.36 0 0 0-.009.795l-.74.509a.501.501 0 0 0-.149.656l.608 1.008a.505.505 0 0 0 .642.209l.756-.402c.206.16.539.363.784.458l.09.722a.5.5 0 0 0 .496.442l1.126.003a.5.5 0 0 0 .499-.44l.083-.733a3.33 3.33 0 0 0 .787-.434l.823.338c.24.113.528.02.655-.213l.525-.94a.497.497 0 0 0-.146-.64l-.748-.551Zm-3.041.976c-1.62 0-1.725-2.499 0-2.499 1.698 0 1.62 2.5 0 2.5Z" fill="#{$color}"/></svg>',
+
 	'user-plus': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline user-plus-plus-sign" fill="#{$color}" d="M512 156.9h-64v-64h-32v64h-64v32h64v64h32v-64h64z"/><ellipse class="lexicon-icon-outline user-plus-head" cx="192" cy="127.3" rx="96" ry="95.2" fill="#{$color}"/><path class="lexicon-icon-outline user-plus-body" d="M384 396.8c0 111-384 111-384 0 0-196.2 384-194.2 384 0z" fill="#{$color}"/></svg>',
 
 	'user': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><circle class="lexicon-icon-outline user-head" cx="256" cy="126.1" r="96" fill="#{$color}"/><path class="lexicon-icon-outline user-body" d="M448 398.1c0 112-384 112-384 0 0-198 384-196 384 0z" fill="#{$color}"/></svg>',

package/src/scss/mixins/_cards.scss

@@ -2002,7 +2002,8 @@
 			$_checked: map-get($map, checked);
 
 			@if ($_checked) {
-				&.checked {
+				&.checked,
+				&:has(.custom-control-input:checked) {
 					$_card: map-get($_checked, card);
 
 					@if ($_card) {
@@ -2027,6 +2028,23 @@
 				}
 			}
 
+			$_disabled: map-get($map, disabled);
+
+			@if ($_disabled) {
+				&.disabled,
+				&:has(.custom-control-input:disabled) {
+					@include clay-css($_disabled);
+
+					$_card: map-get($_disabled, card);
+
+					@if ($_card) {
+						.card {
+							@include clay-card-variant($_card);
+						}
+					}
+				}
+			}
+
 			$_card: map-get($map, card);
 
 			@if ($_card) {

package/src/scss/mixins/_labels.scss

@@ -758,10 +758,17 @@
 			}
 
 			@if (length($href) != 0) {
-				&[href],
+				&[href] {
+					@include clay-link($href);
+				}
+			}
+
+			$_tabindex: map-get($map, tabindex);
+
+			@if (length($_tabindex) != 0) {
 				&[type],
 				&[tabindex] {
-					@include clay-link($href);
+					@include clay-link($_tabindex);
 				}
 			}
 

package/src/scss/variables/_cards.scss

@@ -9,6 +9,7 @@ $card-height: null !default;
 $card-margin-bottom: 1.5rem !default;
 $card-spacer-x: 1.25rem !default;
 $card-spacer-y: 0.75rem !default;
+$card-transition: null !default;
 
 $card-inner-border-radius: calc(
 	#{$card-border-radius} - #{$card-border-width}
@@ -182,6 +183,7 @@ $card: map-deep-merge(
 		margin-bottom: $card-margin-bottom,
 		min-width: 0rem,
 		position: relative,
+		transition: $card-transition,
 		word-wrap: break-word,
 
 		aspect-ratio: (
@@ -404,6 +406,16 @@ $form-check-card: map-deep-merge(
 			),
 		),
 
+		disabled: (
+			transform: none,
+
+			card: (
+				box-shadow: none,
+				border-color: $card-border-color,
+				outline-color: transparent,
+			),
+		),
+
 		card: (
 			margin-bottom: 0rem,
 		),
@@ -738,6 +750,8 @@ $card-interactive: map-deep-merge(
 
 // Card Interactive Primary
 
+$card-interactive-primary-hover-box-shadow: null !default;
+
 $card-interactive-primary-after-highlight: () !default;
 $card-interactive-primary-after-highlight: map-deep-merge(
 	(
@@ -759,6 +773,9 @@ $card-interactive-primary-after-highlight: map-deep-merge(
 $card-interactive-primary: () !default;
 $card-interactive-primary: map-deep-merge(
 	(
+		hover: (
+			box-shadow: $card-interactive-primary-hover-box-shadow,
+		),
 		focus: (
 			background-color: $gray-100,
 		),
@@ -846,6 +863,10 @@ $card-type-asset: map-deep-merge(
 			align-items: flex-start,
 		),
 
+		disabled: (
+			transform: none,
+		),
+
 		dropdown-action: (
 			margin-right: -0.5rem,
 			margin-top: -0.1875rem,
@@ -877,7 +898,7 @@ $product-card: map-deep-merge(
 	(
 		aspect-ratio: (
 			background-color: $white,
-			background-image: linear-gradient(0deg, #ebebeb, #ebebeb),
+			background-image: linear-gradient(0deg, $gray-200, $gray-200),
 		),
 
 		card-body: (

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

@@ -44,7 +44,7 @@ $custom-control-indicator-box-shadow: if(
 	$input-box-shadow,
 	inset 0 1px 1px rgba($black, 0.075)
 ) !default;
-$custom-control-indicator-position-top: 0px !default;
+$custom-control-indicator-position-top: 0rem !default;
 
 $custom-control-indicator-focus-border-color: if(
 	variable-exists(input-focus-border-color),
@@ -104,6 +104,13 @@ $custom-control-indicator-disabled-checked-border-color: null !default;
 
 $custom-control-indicator-checked-disabled-border-color: $custom-control-indicator-disabled-checked-border-color !default;
 
+// .custom-control-input
+
+$custom-control-input-size: 1.5rem !default;
+$custom-control-input-offset: calc(
+	(#{$custom-control-input-size} - #{$custom-control-indicator-size}) / -2
+) !default;
+
 // .custom-control
 
 $custom-control-cursor: null !default;
@@ -163,12 +170,13 @@ $custom-control-label: map-deep-merge(
 	(
 		color: $custom-control-label-color,
 		cursor: $custom-control-description-cursor,
+		display: inline-block,
 		font-size: $custom-control-description-font-size,
 		font-weight: $custom-control-description-font-weight,
 		line-height: $custom-control-description-line-height,
 		margin-bottom: 0rem,
+		max-width: 100%,
 		position: static,
-		vertical-align: top,
 
 		before: (
 			background-color: $custom-control-indicator-bg,
@@ -184,7 +192,7 @@ $custom-control-label: map-deep-merge(
 			height: $custom-control-indicator-size,
 			left: 0rem,
 			position: relative,
-			top: 0.25rem,
+			top: $custom-control-indicator-position-top,
 			transition: clay-enable-transitions($custom-forms-transition),
 			width: $custom-control-indicator-size,
 		),
@@ -194,11 +202,11 @@ $custom-control-label: map-deep-merge(
 			border-radius: $rounded-circle-border-radius,
 			content: '',
 			display: block,
-			height: 1.5rem,
-			left: -0.25rem,
+			height: $custom-control-input-size,
+			left: $custom-control-input-offset,
 			position: absolute,
-			top: $custom-control-indicator-position-top,
-			width: 1.5rem,
+			top: $custom-control-input-offset,
+			width: $custom-control-input-size,
 		),
 	),
 	$custom-control-label
@@ -237,6 +245,8 @@ $custom-control-label-text: () !default;
 $custom-control-label-text: map-deep-merge(
 	(
 		padding-left: $custom-control-description-padding-left,
+		position: relative,
+		top: -0.25rem,
 	),
 	$custom-control-label-text
 );
@@ -256,6 +266,7 @@ $custom-control: map-deep-merge(
 	(
 		cursor: $custom-control-cursor,
 		display: block,
+		line-height: 1,
 		margin-bottom: $custom-control-margin-bottom,
 		margin-top: $custom-control-margin-top,
 		min-height: $custom-control-min-height,
@@ -287,12 +298,12 @@ $custom-control-input: map-deep-merge(
 				$form-check-input-cursor,
 				$link-cursor
 			),
-		height: 1.5rem,
-		left: -0.25rem,
+		height: $custom-control-input-size,
+		left: $custom-control-input-offset,
 		opacity: 0,
 		position: absolute,
-		top: $custom-control-indicator-position-top,
-		width: 1.5rem,
+		top: $custom-control-input-offset,
+		width: $custom-control-input-size,
 		z-index: 1,
 
 		focus: (

package/src/scss/variables/_dropdowns.scss

@@ -384,7 +384,9 @@ $dropdown-subheader-text-transform: uppercase !default;
 $dropdown-subheader: () !default;
 $dropdown-subheader: map-deep-merge(
 	(
+		align-items: center,
 		color: $dropdown-subheader-color,
+		display: flex,
 		font-size: $dropdown-subheader-font-size,
 		font-weight: $dropdown-subheader-font-weight,
 		margin-bottom: $dropdown-subheader-margin-bottom,

package/src/scss/variables/_globals.scss

@@ -382,6 +382,7 @@ $border-width: 0.0625rem !default;
 
 $border-radius-lg: 0.3rem !default;
 $border-radius-sm: 0.2rem !default;
+$border-radius-xl: 1rem !default;
 $border-radius: 0.25rem !default;
 
 $rounded-0-border-radius: 0px !default;