@clayui/css 3.104.0 → 3.105.0

package/src/scss/cadmin/variables/_clay-color.scss

@@ -37,7 +37,7 @@ $cadmin-clay-color-input-group-inset-item-before: map-merge(
 $cadmin-clay-color-dropdown-menu: () !default;
 $cadmin-clay-color-dropdown-menu: map-deep-merge(
 	(
-		max-height: 400px,
+		max-height: 500px,
 		max-width: none,
 		padding-bottom: 0,
 		padding-left: 16px,
@@ -333,6 +333,162 @@ $cadmin-clay-color-range-pointer: map-deep-merge(
 	$cadmin-clay-color-range-pointer
 );
 
+// Clay Color Form Group
+
+$cadmin-clay-color-form-group: () !default;
+$cadmin-clay-color-form-group: map-deep-merge(
+	(
+		display: flex,
+		align-items: center,
+		margin-top: 4px,
+		margin-bottom: 16px,
+		clay-range: (
+			flex-grow: 1,
+			flex-shrink: 0,
+			margin-right: 16px,
+			width: 144px,
+		),
+		form-control: (
+			padding-left: 0,
+			padding-right: 10%,
+			text-align: right,
+		),
+		input-group: (
+			input-group-inset-item-before: (
+				font-weight: $cadmin-font-weight-semi-bold,
+				padding-left: 10%,
+				padding-right: 0,
+				min-width: 18px,
+			),
+		),
+	),
+	$cadmin-clay-color-form-group
+);
+
+// Clay Color Slider
+
+$cadmin-clay-color-slider: () !default;
+$cadmin-clay-color-slider: map-deep-merge(
+	(
+		clay-range-input: (
+			border-radius: 100px,
+			clay-range-track: (
+				border-radius: inherit,
+				height: 8px,
+				margin-top: -4px,
+			),
+			clay-range-progress: (
+				background-color: transparent,
+				border-radius: inherit,
+				height: 8px,
+				margin-top: -4px,
+				width: 100%,
+			),
+			ms-thumb: (
+				visibility: visible,
+			),
+			moz-range-thumb: (
+				visibility: visible,
+			),
+			webkit-slider-thumb: (
+				visibility: visible,
+			),
+			clay-range-thumb: (
+				background-color: currentColor,
+				border-width: 0,
+				box-shadow: 0 0 0 2px $cadmin-white,
+				height: 10px,
+				margin-top: -5px,
+				transition:
+					clay-enable-transitions(box-shadow 0.15s ease-in-out),
+				visibility: hidden,
+				width: 10px,
+			),
+			form-control-range: (
+				background-color: inherit,
+				border-radius: inherit,
+				color: inherit,
+				height: 8px,
+				webkit-slider-runnable-track: (
+					-webkit-appearance: none,
+					appearance: none,
+				),
+			),
+			focus: (
+				clay-range-thumb: (
+					box-shadow: #{0 0 0 2px $cadmin-white,
+					0 0 0 4px $cadmin-primary-l1},
+				),
+			),
+		),
+	),
+	$cadmin-clay-color-slider
+);
+
+$cadmin-clay-color-slider-hue: () !default;
+$cadmin-clay-color-slider-hue: map-deep-merge(
+	(
+		clay-range-input: (
+			color: #26affd,
+			clay-range-track: (
+				background-image:
+					linear-gradient(
+						270deg,
+						#fc0d1b 0%,
+						#fc22d6 18.23%,
+						#1824fb 34.25%,
+						#2bf6fd 50.28%,
+						#2bfd2e 67.58%,
+						#fcfd37 81.22%,
+						#fc121b 100%
+					),
+			),
+		),
+	),
+	$cadmin-clay-color-slider-hue
+);
+
+$cadmin-clay-color-slider-alpha: () !default;
+$cadmin-clay-color-slider-alpha: map-deep-merge(
+	(
+		clay-range-input: (
+			color: $cadmin-black,
+			clay-range-track: (
+				background-color: $cadmin-white,
+				background-image: #{linear-gradient(
+						45deg,
+						#e7e7ed 25%,
+						transparent 25%
+					),
+				linear-gradient(
+					-45deg,
+					#e7e7ed 25%,
+					transparent 25%,
+				),
+				linear-gradient(
+					45deg,
+					transparent 75%,
+					#e7e7ed 75%,
+				),
+				linear-gradient(-45deg, transparent 75%, #e7e7ed 75%)},
+				background-position: #{0 0,
+				0 4px,
+				4px -4px,
+				-4px 0px},
+				background-size: 8px 8px,
+			),
+			form-control-range: (
+				color: inherit,
+			),
+			clay-range-progress: (
+				background-image:
+					linear-gradient(90deg, transparent 0%, currentcolor 100%),
+			),
+		),
+	),
+	$cadmin-clay-color-slider-alpha
+);
+
 // Clay Color Sm
 
 $cadmin-clay-color-sm-input-group-inset-item-before: () !default;

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

@@ -1,6 +1,25 @@
 $cadmin-custom-forms-transition: background-color 0.15s ease-in-out,
 	border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
 
+// Form File
+
+$cadmin-form-file: () !default;
+$cadmin-form-file: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($cadmin-input-border-radius),
+		display: flex,
+		position: relative,
+		transition: clay-enable-transitions($cadmin-input-transition),
+		focus-within: (
+			background-color: $cadmin-input-focus-bg,
+			box-shadow: $cadmin-input-focus-box-shadow,
+			outline: 0,
+			z-index: 1,
+		),
+	),
+	$cadmin-form-file
+);
+
 // Custom Control Indicator
 
 $cadmin-custom-control-indicator-size: 16px !default;

package/src/scss/cadmin/variables/_forms.scss

@@ -99,6 +99,12 @@ $cadmin-input: map-deep-merge(
 				color: $cadmin-input-placeholder-focus-color,
 			),
 		),
+		focus-within: (
+			background-color: $cadmin-input-focus-bg,
+			border-color: $cadmin-input-focus-border-color,
+			box-shadow: $cadmin-input-focus-box-shadow,
+			color: $cadmin-input-focus-color,
+		),
 		disabled: (
 			background-color: $cadmin-input-disabled-bg,
 			border-color: $cadmin-input-disabled-border-color,
@@ -1524,6 +1530,23 @@ $cadmin-input-group-item-shrink: map-deep-merge(
 	$cadmin-input-group-item-shrink
 );
 
+// .input-group-item-focusable
+
+$cadmin-input-group-item-focusable: () !default;
+$cadmin-input-group-item-focusable: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($cadmin-input-border-radius),
+		transition: clay-enable-transitions($cadmin-input-transition),
+		focus-within: (
+			background-color: $cadmin-input-focus-bg,
+			box-shadow: $cadmin-input-focus-box-shadow,
+			outline: 0,
+			z-index: 1,
+		),
+	),
+	$cadmin-input-group-item-focusable
+);
+
 // Input Group Inset
 
 $cadmin-input-group-inset-item-color: $cadmin-input-group-addon-color !default;

package/src/scss/cadmin/variables/_globals.scss

@@ -704,14 +704,20 @@ $cadmin-link-hover-decoration: underline !default;
 $cadmin-link: () !default;
 $cadmin-link: map-deep-merge(
 	(
+		border-radius: 1px,
 		color: $cadmin-link-color,
 		cursor: $cadmin-link-cursor,
 		text-decoration: $cadmin-link-decoration,
 		text-underline-offset: 0.23em,
+		transition: clay-enable-transitions($cadmin-component-transition),
 		hover: (
 			color: $cadmin-link-hover-color,
 			text-decoration: $cadmin-link-hover-decoration,
 		),
+		focus: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$cadmin-link
 );

package/src/scss/components/_clay-color.scss

@@ -151,6 +151,48 @@
 	@include clay-button-variant($clay-color-range-pointer);
 }
 
+// Clay Color Slider
+
+.clay-color-slider {
+	@include clay-range-variant($clay-color-slider);
+}
+
+.clay-color-slider-hue {
+	@include clay-range-variant($clay-color-slider-hue);
+}
+
+.clay-color-slider-alpha {
+	@include clay-range-variant($clay-color-slider-alpha);
+}
+
+// Clay Color Form Group
+
+.clay-color-form-group {
+	@include clay-css($clay-color-form-group);
+
+	.clay-range {
+		@include clay-css(map-get($clay-color-form-group, clay-range));
+	}
+
+	.form-control {
+		@include clay-form-control-variant(
+			map-get($clay-color-form-group, form-control)
+		);
+	}
+
+	.input-group {
+		$input-group: map-get($clay-color-form-group, input-group);
+
+		@include clay-input-group-variant($input-group);
+
+		.input-group-inset-item-before {
+			@include clay-css(
+				map-get($input-group, input-group-inset-item-before)
+			);
+		}
+	}
+}
+
 // Clay Color Sm
 
 %clay-color-sm-input-group-inset-item-before {

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

@@ -1,6 +1,5 @@
 .form-file {
-	display: flex;
-	position: relative;
+	@include clay-form-control-variant($form-file);
 }
 
 .form-file-input {

package/src/scss/components/_input-groups.scss

@@ -134,6 +134,10 @@
 	@include clay-input-group-item-variant($input-group-item-shrink);
 }
 
+.input-group-item-focusable {
+	@include clay-input-group-item-variant($input-group-item-focusable);
+}
+
 // Input Group Text
 
 .input-group-text {

package/src/scss/components/_range.scss

@@ -24,8 +24,8 @@
 	}
 }
 
-.clay-range-progress-none .clay-range-progress {
-	visibility: hidden;
+.clay-range-progress-none {
+	@include clay-range-variant($clay-range-progress-none);
 }
 
 .clay-range-title {

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

@@ -112,7 +112,9 @@
 
 	'book': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M480 352V32c0-16.6-14.3-32-32-32H128C75 0 32 46.3 32 96v352s0 64 80.2 63.7l351.8.3c21.6-1.3 20.9-30.7 0-31.9l-352-.1c-64.1-.1-63.9-96.1.2-96H448c17.7-.1 32-15.4 32-32zm-64-32H128V64h288v256z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M111.8 416c-20.1.3-22.2 31 0 32H432c23.1-1.6 19.4-31.7 0-32H111.8z" fill="#{$color}"/></svg>',
 
-	'bookmarks': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-body" fill="none" d="M448 0H64C28.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"/><path class="lexicon-icon-outline" d="M448 0H64C28.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-64zm0 448H64V64h160v224l96-81.5 96 81.5V64h32v384z" fill="#{$color}"/></svg>',
+	'bookmarks-full': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="m191.945 404.937 113.237 95.557c31.255 26.375 78.706 4.569 78.706-36.63V63.981C383.888 28.2 355.243 0 319.907 0H63.982C28.646 0 0 28.199 0 63.981v399.883c0 41.198 47.452 63.005 78.707 36.63l113.238-95.557Z" fill="#{$color}"/></svg>',
+
+	'bookmarks': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M171.307 338.015c11.92-10.059 29.355-10.059 41.275 0l107.325 90.567v-364.6H63.982v364.6l107.325-90.567Zm20.637 66.922 113.238 95.557c31.255 26.375 78.706 4.569 78.706-36.63V63.981C383.888 28.2 355.243 0 319.907 0H63.982C28.646 0 0 28.199 0 63.981v399.883c0 41.198 47.452 63.005 78.707 36.63l113.237-95.557Z" fill="#{$color}"/></svg>',
 
 	'books': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline books-1-spine-top" d="M96.1 32h-64C14.4 32 .1 46.3.1 64v32h128V64c0-17.7-14.3-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline books-1-spine-bottom" d="M.1 448c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32v-32H.1v32z" fill="#{$color}"/><path class="lexicon-icon-outline books-1-spine" fill="#{$color}" d="M.1 128h128v256H.1z"/><path class="lexicon-icon-outline books-2-spine-top" d="M256.1 32h-64c-17.7 0-32 14.3-32 32v32h128V64c0-17.7-14.3-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline books-2-spine-bottom" d="M160.1 448c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32v-32h-128v32z" fill="#{$color}"/><path class="lexicon-icon-outline books-2-spine" fill="#{$color}" d="M160.1 128h128v256h-128z"/><path class="lexicon-icon-outline books-3-spine-top" d="m359.2 35.2-31 8.1c-17.1 4.5-27.4 21.9-22.9 39l8.1 31 92.9-24.2-8.1-31c-4.5-17.1-21.9-27.4-39-22.9z" fill="#{$color}"/><path class="lexicon-icon-outline books-3-spine" fill="#{$color}" d="m321.422 144.212 92.909-24.172 64.46 247.756-92.908 24.173z"/><path class="lexicon-icon-outline books-3-spine-bottom" d="M402 453.9c4.5 17.1 21.9 27.4 39 22.9l31-8.1c17.1-4.5 27.4-21.9 22.9-39l-8.1-31-92.9 24.2 8.1 31z" fill="#{$color}"/></svg>',
 
@@ -280,7 +282,7 @@
 
 	'dollar-symbol': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M223 31c0-41.4 63.7-41.4 63.7 0v35.6c26.9 6 51 19.7 68.7 39.4 26.1 29.3-19.5 73.7-47.4 42.9-91-70.3-184.6 50.1-52.5 73.7h.3c138.4 8.9 187.8 175.2 30.9 225.1V480c0 42.7-63.7 42.5-63.7 0v-32.2c-27.1-6-69.6-23.1-87.3-42.9-25.6-28.8 20.2-73.5 47.6-42.7 91.6 77.6 235-48.8 44-81.7C74.7 252.4 118 85.1 223 66.7V31z" fill="#{$color}"/></svg>',
 
-	'download': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="download-arrow-down lexicon-icon-outline" d="M233.2 374.5c13.1 13.2 33.5 12.2 45.6 0l71.3-71.6c29.8-29.9-14.3-77.2-45.6-45.8l-16.6 16.7V32.1c0-42.5-63.7-43-63.7 0v241.7l-16.6-16.7c-30.8-30.9-75.5 15.8-45.6 45.8l71.2 71.6z" fill="#{$color}"/><path class="download-border lexicon-icon-outline" d="M384 384.5v63.8H128v-63.8c0-43.8-64-41.8-64 0V512h384V384.5c0-43.8-64-42.8-64 0z" fill="#{$color}"/></svg>',
+	'download': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="download-arrow-down lexicon-icon-outline" d="M256 384a32.324 32.324 0 0 1-22.906-9.5L161.5 302.9c-12.719-12.599-12.719-33.099 0-45.8 12.594-12.7 33.094-12.7 45.781 0L224 273.801V32c0-17.7 14.281-32 32-32 17.688 0 32 14.3 32 32v241.801l16.688-16.701a32.352 32.352 0 0 1 22.906-9.5 32.365 32.365 0 0 1 22.906 9.5c12.688 12.599 12.688 33.099 0 45.8l-71.594 71.6c-6.125 6.1-14.312 9.5-22.906 9.5Z" fill="#{$color}"/><path class="download-border lexicon-icon-outline" d="M384 384c0-17.699 14.312-32 32-32 17.688 0 32 14.301 32 32v64c0 35.346-28.654 64-64 64H128c-35.346 0-64-28.654-64-64v-64c0-17.699 14.313-32 32-32 17.688 0 32 14.301 32 32v64h256v-64Z" fill="#{$color}"/></svg>',
 
 	'drag': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle class="lexicon-icon-outline drag-dot-1" cx="192" cy="128" r="32" fill="#{$color}"/><circle class="lexicon-icon-outline drag-dot-2" cx="192" cy="256" r="32" fill="#{$color}"/><circle class="lexicon-icon-outline drag-dot-3" cx="192" cy="384" r="32" fill="#{$color}"/><circle class="lexicon-icon-outline drag-dot-4" cx="320" cy="128" r="32" fill="#{$color}"/><circle class="lexicon-icon-outline drag-dot-5" cx="320" cy="256" r="32" fill="#{$color}"/><circle class="lexicon-icon-outline drag-dot-6" cx="320" cy="384" r="32" fill="#{$color}"/></svg>',
 
@@ -510,9 +512,9 @@
 
 	'import-export': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline import-export-arrow-up" d="M254.5 81.1 182.9 9.5C176.8 3.4 168.6 0 160 0c-8.6 0-16.8 3.4-22.9 9.5L65.5 81.1c-12.7 12.7-12.7 33.2 0 45.8 6.3 6.3 14.6 9.5 22.9 9.5s16.6-3.2 22.9-9.5l16.7-16.7V481c0 17.7 14.3 32 32 32s32-14.3 32-32V110.2l16.7 16.7c12.7 12.7 33.2 12.7 45.8 0 12.7-12.7 12.7-33.2 0-45.8z" fill="#{$color}"/><path class="lexicon-icon-outline import-export-arrow-down" d="M446.5 385.1c-6.3-6.3-14.6-9.5-22.9-9.5s-16.6 3.2-22.9 9.5L384 401.8V31c0-17.7-14.3-32-32-32s-32 14.3-32 32v370.8l-16.7-16.7c-12.7-12.7-33.2-12.7-45.8 0-12.7 12.7-12.7 33.2 0 45.8l71.6 71.6c6.1 6.1 14.3 9.5 22.9 9.5s16.8-3.4 22.9-9.5l71.6-71.6c12.7-12.7 12.7-33.2 0-45.8z" fill="#{$color}"/></svg>',
 
-	'import-list': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-import-list-border-bottom" d="M448 160v288H64V160c0-42.4-64-41.4-64 0v288c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V160c0-42.7-64-42.2-64 0z" fill="#{$color}"/><path class="lexicon-icon-outline lx-import-list-bar" d="M352 64H160c-43.5 0-43-64 0-64h192c43 0 43.5 64 0 64z" fill="#{$color}"/><path class="lexicon-icon-outline lx-import-list-arrow-down" d="M352 96H160c-42 0-43 64 0 64h64.2l.1 121.4-16.6-16.6c-27.3-23.8-65.2 18-38.6 44.8l64.3 65.2c6.1 6.1 25.5 17.2 45.5 0l64.3-65.2c27.1-29.4-14.1-67.2-38.6-44.8L288 281.4l-.2-121.4H352c42.5 0 42.5-64 0-64z" fill="#{$color}"/></svg>',
+	'import-list': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-import-list-bar" d="M448 256.002v192H64v-192c0-42.4-64-41.4-64 0v192c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64v-192c0-42.7-64-42.2-64 0ZM352 64H160c-43.5 0-43-64 0-64h192c43 0 43.5 64 0 64Z" fill="#{$color}"/><path class="lexicon-icon-outline lx-import-list-arrow-down" d="M352.001 96h-192c-42 0-43 64 0 64h64.2l.1 121.4-16.6-16.6c-27.3-23.8-65.2 18-38.6 44.8l64.3 65.2c6.1 6.1 25.5 17.2 45.5 0l64.3-65.2c27.1-29.4-14.1-67.2-38.6-44.8l-16.6 16.6-.2-121.4h64.2c42.5 0 42.5-64 0-64Z" fill="#{$color}"/></svg>',
 
-	'import': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-import-border-bottom" d="M448 160v288H64V160c0-42.4-64-41.4-64 0v288c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V160c0-42.7-64-42.2-64 0z" fill="#{$color}"/><path class="lexicon-icon-outline lx-import-arrow-down" d="m278.9 342.8 64.3-65.2c27.1-29.4-14.1-67.2-38.6-44.8L288 249.4l-.1-217.8c0-42.7-63.6-41.7-63.6 0l.1 217.8-16.6-16.6c-27.3-23.8-65.2 18-38.6 44.8l64.3 65.2c5.9 6.1 25.3 17.2 45.4 0z" fill="#{$color}"/></svg>',
+	'import': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M160 32c0-17.673 14.327-32 32-32h128c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H192c-17.673 0-32-14.327-32-32Zm288 415.99V255.989c0-42.2 64-42.7 64 0V447.99c0 35.299-28.7 64-64 64l-384-.001c-35.3 0-64-28.7-64-64v-192c0-41.4 64-42.4 64 0v192l384 .001Zm-169.319-73.139 64.3-65.2c27.1-29.4-14.1-67.2-38.6-44.8l-16.6 16.6-.1-121.8c0-42.7-63.6-41.7-63.6 0l.1 121.8-16.6-16.6c-27.3-23.8-65.2 18-38.6 44.8l64.3 65.2c5.9 6.1 25.3 17.2 45.4 0Z" fill="#{$color}"/></svg>',
 
 	'indent-less': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline indent-more-line-1" d="M64 96h384c17.7 0 32-14.3 32-32s-14.3-32-32-32H64c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="#{$color}"/><path class="lexicon-icon-outline indent-more-line-4" d="M448 416H64c-17.7 0-32 14.3-32 32s14.3 32 32 32h384c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline indent-more-line-3" d="M448 288H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h128c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline indent-more-line-2" d="M448 160H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h128c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline indent-more-arrow" d="M113.1 350.5c12.7 12.7 33.2 12.7 45.8 0 6.3-6.3 9.5-14.6 9.5-22.9s-3.2-16.6-9.5-22.9L142.2 288H224c17.7 0 32-14.3 32-32s-14.3-32-32-32h-81.8l16.7-16.7c12.7-12.7 12.7-33.2 0-45.8-12.7-12.7-33.2-12.7-45.8 0l-71.6 71.6c-6.1 6.1-9.5 14.3-9.5 22.9s3.4 16.8 9.5 22.9l71.6 71.6z" fill="#{$color}"/></svg>',
 
@@ -534,6 +536,8 @@
 
 	'italic': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M320 448H128v-32h64l64-320h-64V64h192v32h-64l-64 320h64v32z" fill="#{$color}"/></svg>',
 
+	'key': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M256 512c-17.673 0-32-14.327-32-32V251.968c-55.207-14.209-96-64.325-96-123.968C128 57.308 185.308 0 256 0c70.692 0 128 57.308 128 128 0 59.643-40.793 109.759-96 123.968V416h47.999c8.837 0 16 7.163 16 16v32c0 8.837-7.163 16-16 16H288c0 17.673-14.327 32-32 32Zm64-384c0 35.347-28.653 64-64 64s-64-28.653-64-64 28.653-64 64-64 64 28.653 64 64Z" fill="#{$color}"/></svg>',
+
 	'liferay-ac': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-liferay-ac-bar-1" d="M128 512H32c-17.7 0-32-14.3-32-32V288c0-17.7 14.3-32 32-32h96v256z" fill="#{$color}"/><path class="lexicon-icon-outline lx-liferay-ac-bar-2" d="M320 512H192c-17.7 0-32-14.3-32-32V32c0-17.7 14.3-32 32-32h128c17.7 0 32 14.3 32 32v448c0 17.7-14.3 32-32 32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-liferay-ac-bar-3" d="M480 512h-96V160h96c17.7 0 32 14.3 32 32v288c0 17.7-14.3 32-32 32z" fill="#{$color}"/></svg>',
 
 	'link': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M216.2 295.8c-23.4-23.4 11.6-58.3 35-35 18.1 18.1 47.5 18.1 65.6 0l122.5-122.5c43.4-43.4-22.2-109.1-65.6-65.6L273.1 173.3c-23.4 23.4-58.3-11.6-35-35L338.7 37.8C429-52.5 564.5 83 474.2 173.3L351.7 295.7c-41.3 41.4-102 33.7-135.5.1zm79.6-79.6c23.4 23.4-11.6 58.3-35 35-18.1-18.1-47.5-18.1-65.6 0L72.8 373.6C29.4 417 95 482.7 138.4 439.2l100.5-100.5c23.4-23.4 58.3 11.6 35 35L173.3 474.2C83 564.5-52.5 429 37.8 338.7l122.5-122.5c41.3-41.3 102-33.6 135.5 0z" fill="#{$color}"/></svg>',
@@ -890,9 +894,9 @@
 
 	'unpin': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline unpin-tack" fill="#{$color}" d="m0 512 140-216.5 77.6 77.4z"/><path class="lexicon-icon-outline unpin-body" d="m414.8 458.6-362-362C12 55 69-4 115 36.4l362 362c42 46.6-15 103.6-62.2 60.2z" fill="#{$color}"/><path class="lexicon-icon-outline unpin-head" d="m501.9 140.7-129.2-129c-35.4-32-76.7 8.8-58.1 41.9L247 87l180 174 31.6-63.2c35.9 18.9 71.3-24.5 43.3-57.1z" fill="#{$color}"/></svg>',
 
-	'upload-multiple': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline upload-multiple-arrow-up" d="M278.9 9.9c-14.9-13.5-32.6-12.8-45.8 0l-71.5 71.5c-28.8 26.6 10.8 77.1 45.8 45.8l16.7-16.7v113.6c0 42.3 64 42 64 0V110.5l16.7 16.7c28 29.1 76.5-13.6 45.8-45.8L278.9 9.9z" fill="#{$color}"/><path class="lexicon-icon-outline upload-multiple-bracket" d="M383.9 256.1v64H128.1v-64c0-43-64-41.7-64 0V384h383.7V256.1c.1-42-63.9-42.3-63.9 0z" fill="#{$color}"/><path class="lexicon-icon-outline upload-multiple-line" fill="#{$color}" d="M64 448h384v64H64z"/></svg>',
+	'upload-multiple': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline upload-multiple-arrow-up" d="M278.914 9.9c-14.9-13.5-32.6-12.8-45.8 0l-71.5 71.5c-28.8 26.599 10.8 77.099 45.8 45.799l16.7-16.7v113.6c0 42.3 64 42 64 0v-113.6l16.7 16.7c28 29.1 76.5-13.6 45.8-45.8L278.914 9.9Z" fill="#{$color}"/><path class="lexicon-icon-outline upload-multiple-bracket" d="M383.925 256.098v64h-255.8v-64c0-43-64-41.7-64 0v63.9c0 35.347 28.654 64 64 64h255.7c35.346 0 64-28.653 64-64v-63.9c.1-42-63.9-42.3-63.9 0ZM64 480c0-17.673 14.327-32 32-32h320c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H96c-17.673 0-32-14.327-32-32Z" fill="#{$color}"/></svg>',
 
-	'upload': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline upload-arrow-up" d="M278.9 9.5C272.8 3.4 264.6 0 256 0c-8.6 0-16.8 3.4-22.9 9.5l-71.6 71.6c-12.7 12.7-12.7 33.2 0 45.8 6.3 6.3 14.6 9.5 22.9 9.5s16.6-3.2 22.9-9.5l16.7-16.7V352c0 17.7 14.3 32 32 32s32-14.3 32-32V110.2l16.7 16.7c12.7 12.7 33.2 12.7 45.8 0 12.7-12.7 12.7-33.2 0-45.8L278.9 9.5z" fill="#{$color}"/><path class="lexicon-icon-outline upload-bracket" d="M416 352c-17.7 0-32 14.3-32 32v64H128v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32v128h384V384c0-17.7-14.3-32-32-32z" fill="#{$color}"/></svg>',
+	'upload': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M233.094 10.48c13.187-12.775 30.906-13.475 45.781 0L350.5 81.939c30.781 32.139-17.812 74.754-45.812 45.711L288 110.984v241.328c0 41.918-64 42.217-64 0V110.984l-16.719 16.666c-35 31.34-74.593-19.162-45.781-45.711l71.594-71.459ZM384 448.125V384.25c0-42.219 64-41.918 64 0V448c0 35.346-28.654 64-64 64H128c-35.346 0-64-28.654-64-64v-63.75c0-41.62 64-42.916 64 0v63.875h256Z" fill="#{$color}"/></svg>',
 
 	'urgent': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><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>',
 

package/src/scss/mixins/_forms.scss

@@ -601,6 +601,10 @@
 				}
 			}
 
+			&:focus-within:has(input:focus) {
+				@include clay-form-control-variant(map-get($map, focus-within));
+			}
+
 			&:active {
 				@include clay-css(map-get($map, active));
 			}
@@ -1699,8 +1703,6 @@
 				position:
 					setter(map-get($clay-range-thumb, position), absolute),
 				top: setter(map-get($clay-range-thumb, top), 50%),
-				visibility:
-					setter(map-get($clay-range-thumb, visibility), hidden),
 				width:
 					setter(
 						map-get($map, thumb-width),
@@ -2473,11 +2475,30 @@
 				}
 
 				// Webkit
+				&::-webkit-slider-container {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							form-control-range,
+							webkit-slider-container
+						)
+					);
+				}
 
 				&::-webkit-slider-runnable-track {
-					-webkit-appearance: none;
-					appearance: none;
-					height: 100%;
+					$webkit-slider-runnable-track: map-deep-get(
+						$map,
+						form-control-range,
+						webkit-slider-runnable-track
+					);
+
+					@if not($webkit-slider-runnable-track) {
+						-webkit-appearance: none;
+						appearance: none;
+						height: 100%;
+					} @else {
+						@include clay-css($webkit-slider-runnable-track);
+					}
 				}
 
 				&::-webkit-slider-thumb {
@@ -2631,3 +2652,197 @@
 		}
 	}
 }
+
+@mixin clay-range-variant($map) {
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
+
+		$clay-range-input: setter(map-get($map, clay-range-input), ());
+
+		$clay-range-thumb: setter(
+			map-get($clay-range-input, clay-range-thumb),
+			()
+		);
+		$clay-range-thumb: map-merge(
+			$clay-range-thumb,
+			(
+				margin-top:
+					setter(map-get($clay-range-thumb, margin-top), c-unset),
+				position: setter(map-get($clay-range-thumb, position), c-unset),
+				right: setter(map-get($clay-range-thumb, right), c-unset),
+				top: setter(map-get($clay-range-thumb, top), c-unset),
+			)
+		);
+
+		$moz-range-thumb: setter(
+			map-get($clay-range-input, moz-range-thumb),
+			()
+		);
+		$moz-range-thumb: map-merge(
+			$moz-range-thumb,
+			(
+				appearance:
+					setter(map-get($moz-range-thumb, appearance), c-unset),
+				position: setter(map-get($moz-range-thumb, position), c-unset),
+			)
+		);
+
+		$ms-thumb: setter(map-get($clay-range-input, ms-thumb), ());
+		$ms-thumb: map-merge(
+			$ms-thumb,
+			(
+				appearance: setter(map-get($ms-thumb, appearance), c-unset),
+			)
+		);
+
+		$webkit-slider-thumb: setter(
+			map-get($clay-range-input, webkit-slider-thumb),
+			()
+		);
+		$webkit-slider-thumb: map-merge(
+			$webkit-slider-thumb,
+			(
+				appearance:
+					setter(map-get($webkit-slider-thumb, appearance), c-unset),
+				position:
+					setter(map-get($webkit-slider-thumb, position), c-unset),
+			)
+		);
+
+		$clay-range-track: setter(
+			map-get($clay-range-input, clay-range-track),
+			()
+		);
+		$clay-range-track: map-merge(
+			$clay-range-track,
+			(
+				margin-top:
+					setter(map-get($clay-range-track, margin-top), c-unset),
+			)
+		);
+
+		$clay-range-progress: setter(
+			map-get($clay-range-input, clay-range-progress),
+			()
+		);
+		$clay-range-progress: map-merge(
+			$clay-range-progress,
+			(
+				margin-top:
+					setter(map-get($clay-range-progress, margin-top), c-unset),
+			)
+		);
+
+		$tooltip: setter(map-get($clay-range-input, tooltip), ());
+		$tooltip: map-merge(
+			$tooltip,
+			(
+				margin-left: setter(map-get($tooltip, margin-left), c-unset),
+			)
+		);
+
+		$clay-tooltip-bottom: setter(
+			map-get($clay-range-input, clay-tooltip-bottom),
+			()
+		);
+		$clay-tooltip-bottom: map-merge(
+			$clay-tooltip-bottom,
+			(
+				padding-top:
+					setter(
+						map-get($map, tooltip-arrow-offset),
+						map-get($clay-tooltip-bottom, padding-top),
+						c-unset
+					),
+				top: setter(map-get($clay-tooltip-bottom, top), c-unset),
+				transform:
+					setter(map-get($clay-tooltip-bottom, transform), c-unset),
+			)
+		);
+
+		$clay-tooltip-bottom-tooltip-arrow: setter(
+			map-get($clay-tooltip-bottom, tooltip-arrow),
+			()
+		);
+		$clay-tooltip-bottom-tooltip-arrow: map-merge(
+			$clay-tooltip-bottom-tooltip-arrow,
+			(
+				margin-left:
+					setter(
+						map-get(
+							$clay-tooltip-bottom-tooltip-arrow,
+							margin-left
+						),
+						c-unset
+					),
+			)
+		);
+
+		$clay-tooltip-bottom: map-deep-merge(
+			$clay-tooltip-bottom,
+			(
+				tooltip-arrow: $clay-tooltip-bottom-tooltip-arrow,
+			)
+		);
+
+		$clay-tooltip-top: setter(
+			map-get($clay-range-input, clay-tooltip-top),
+			()
+		);
+		$clay-tooltip-top: map-merge(
+			$clay-tooltip-top,
+			(
+				bottom: setter(map-get($clay-tooltip-top, bottom), c-unset),
+				padding-bottom:
+					setter(map-get($clay-tooltip-top, padding-bottom), c-unset),
+				transform:
+					setter(map-get($clay-tooltip-top, transform), c-unset),
+			)
+		);
+
+		$clay-tooltip-top-tooltip-arrow: setter(
+			map-get($clay-tooltip-top, tooltip-arrow),
+			()
+		);
+		$clay-tooltip-top-tooltip-arrow: map-merge(
+			$clay-tooltip-top-tooltip-arrow,
+			(
+				margin-left:
+					setter(
+						map-get($clay-tooltip-top-tooltip-arrow, margin-left),
+						c-unset
+					),
+			)
+		);
+
+		$clay-tooltip-top: map-deep-merge(
+			$clay-tooltip-top,
+			(
+				tooltip-arrow: $clay-tooltip-top-tooltip-arrow,
+			)
+		);
+
+		$clay-range-input: map-deep-merge(
+			$clay-range-input,
+			(
+				clay-range-thumb: $clay-range-thumb,
+				moz-range-thumb: $moz-range-thumb,
+				ms-thumb: $ms-thumb,
+				webkit-slider-thumb: $webkit-slider-thumb,
+				clay-range-track: $clay-range-track,
+				clay-range-progress: $clay-range-progress,
+				tooltip: $tooltip,
+				clay-tooltip-bottom: $clay-tooltip-bottom,
+				clay-tooltip-top: $clay-tooltip-top,
+			)
+		);
+
+		@if ($enabled) {
+			@include clay-css($map);
+
+			.clay-range-input {
+				@include clay-range-input-variant($clay-range-input);
+			}
+		}
+	}
+}