@clayui/css 3.103.1 → 3.105.0

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/_buttons.scss

@@ -991,6 +991,16 @@
 			.loading-animation {
 				@extend %#{$loading-animation} !optional;
 			}
+
+			$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+			$_media-breakpoint-up: map-get($map, media-breakpoint-up);
+
+			@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+				@include clay-generate-media-breakpoints(
+					$map,
+					'clay-button-variant'
+				);
+			}
 		}
 	}
 }

package/src/scss/mixins/_dropdown-menu.scss

@@ -206,6 +206,16 @@
 			.inline-scroller {
 				@include clay-css(map-get($map, inline-scroller));
 			}
+
+			$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+			$_media-breakpoint-up: map-get($map, media-breakpoint-up);
+
+			@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+				@include clay-generate-media-breakpoints(
+					$map,
+					'clay-dropdown-menu-variant'
+				);
+			}
 		}
 	}
 }

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));
 			}
@@ -919,9 +923,21 @@
 			)
 		);
 
+		$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+		$_media-breakpoint-up: map-get($map, media-breakpoint-up);
+
+		$mobile: setter(map-get($map, mobile), ());
+
 		@if ($enabled) {
 			@include clay-css($base);
 
+			@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+				@include clay-generate-media-breakpoints(
+					$map,
+					'clay-select-variant'
+				);
+			}
+
 			&:hover,
 			&.hover {
 				@include clay-css($hover);
@@ -1687,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),
@@ -2461,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 {
@@ -2619,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);
+			}
+		}
+	}
+}

package/src/scss/mixins/_grid.scss

@@ -119,6 +119,13 @@
 
 @mixin clay-row($map) {
 	@include clay-css($map);
+
+	$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+	$_media-breakpoint-up: map-get($map, media-breakpoint-up);
+
+	@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+		@include clay-generate-media-breakpoints($map, 'clay-css');
+	}
 }
 
 @mixin clay-custom-grid-columns($map) {
@@ -193,7 +200,7 @@
 /// A mixin that generates media-breakpoint-{up|down} styles from a Sass map.
 /// @param {Map} $map - A map of `key: value` pairs that is passed to the `clay-css` mixin
 
-@mixin clay-generate-media-breakpoints($map) {
+@mixin clay-generate-media-breakpoints($map, $mixin: 'clay-css') {
 	@if (type-of($map) == 'map') {
 		@if (map-get($map, media-breakpoint-up)) {
 			$media-breakpoint-up: map-get($map, media-breakpoint-up);
@@ -202,7 +209,21 @@
 				$breakpoint-up: map-get($media-breakpoint-up, $breakpoint);
 
 				@include media-breakpoint-up($breakpoint) {
-					@include clay-css($breakpoint-up);
+					@if ($mixin == 'clay-css') {
+						@include clay-css($breakpoint-up);
+					} @else if ($mixin == 'clay-button-variant') {
+						@include clay-button-variant($breakpoint-up);
+					} @else if ($mixin == 'clay-input-group-variant') {
+						@include clay-input-group-variant($breakpoint-up);
+					} @else if ($mixin == 'clay-input-group-text-variant') {
+						@include clay-input-group-text-variant($breakpoint-up);
+					} @else if ($mixin == 'clay-dropdown-menu-variant') {
+						@include clay-dropdown-menu-variant($breakpoint-up);
+					} @else if ($mixin == 'clay-menubar-vertical-variant') {
+						@include clay-menubar-vertical-variant($breakpoint-up);
+					} @else if ($mixin == 'clay-select-variant') {
+						@include clay-select-variant($breakpoint-up);
+					}
 				}
 			}
 		}
@@ -214,7 +235,25 @@
 				$breakpoint-down: map-get($media-breakpoint-down, $breakpoint);
 
 				@include media-breakpoint-down($breakpoint) {
-					@include clay-css($breakpoint-down);
+					@if ($mixin == 'clay-css') {
+						@include clay-css($breakpoint-down);
+					} @else if ($mixin == 'clay-button-variant') {
+						@include clay-button-variant($breakpoint-down);
+					} @else if ($mixin == 'clay-input-group-variant') {
+						@include clay-input-group-variant($breakpoint-down);
+					} @else if ($mixin == 'clay-input-group-text-variant') {
+						@include clay-input-group-text-variant(
+							$breakpoint-down
+						);
+					} @else if ($mixin == 'clay-dropdown-menu-variant') {
+						@include clay-dropdown-menu-variant($breakpoint-down);
+					} @else if ($mixin == 'clay-menubar-vertical-variant') {
+						@include clay-menubar-vertical-variant(
+							$breakpoint-down
+						);
+					} @else if ($mixin == 'clay-select-variant') {
+						@include clay-select-variant($breakpoint-down);
+					}
 				}
 			}
 		}

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

@@ -189,24 +189,14 @@
 				@include clay-css(map-deep-get($map, lexicon-icon));
 			}
 
-			@if (map-get($map, media-breakpoint-down)) {
-				@each $breakpoint
-					in map-keys(map-get($map, media-breakpoint-down))
-				{
-					$media-breakpoint-down: map-deep-get(
-						$map,
-						media-breakpoint-down,
-						$breakpoint
-					);
+			$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+			$_media-breakpoint-up: map-get($map, media-breakpoint-up);
 
-					@if ($breakpoint) {
-						@include media-breakpoint-down($breakpoint) {
-							@include clay-input-group-text-variant(
-								$media-breakpoint-down
-							);
-						}
-					}
-				}
+			@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+				@include clay-generate-media-breakpoints(
+					$map,
+					'clay-input-group-text-variant'
+				);
 			}
 		}
 	}
@@ -309,8 +299,12 @@
 			}
 
 			&.focus {
+				@include clay-input-group-item-variant(map-get($map, focus));
+			}
+
+			&:focus-within:has(input:focus) {
 				@include clay-input-group-item-variant(
-					map-deep-get($map, focus)
+					map-get($map, focus-within)
 				);
 			}
 
@@ -495,24 +489,14 @@
 				@include clay-button-variant(map-deep-get($map, btn-unstyled));
 			}
 
-			@if (map-get($map, media-breakpoint-down)) {
-				@each $breakpoint
-					in map-keys(map-get($map, media-breakpoint-down))
-				{
-					$media-breakpoint-down: map-deep-get(
-						$map,
-						media-breakpoint-down,
-						$breakpoint
-					);
+			$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+			$_media-breakpoint-up: map-get($map, media-breakpoint-up);
 
-					@if ($breakpoint) {
-						@include media-breakpoint-down($breakpoint) {
-							@include clay-input-group-variant(
-								$media-breakpoint-down
-							);
-						}
-					}
-				}
+			@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+				@include clay-generate-media-breakpoints(
+					$map,
+					'clay-input-group-variant'
+				);
 			}
 		}
 	}

package/src/scss/mixins/_menubar.scss

@@ -379,44 +379,14 @@
 				}
 			}
 
-			@if (map-get($map, media-breakpoint-down)) {
-				@each $breakpoint
-					in map-keys(map-get($map, media-breakpoint-down))
-				{
-					$media-breakpoint-down: map-deep-get(
-						$map,
-						media-breakpoint-down,
-						$breakpoint
-					);
-
-					@if ($breakpoint) {
-						@include media-breakpoint-down($breakpoint) {
-							@include clay-menubar-vertical-variant(
-								$media-breakpoint-down
-							);
-						}
-					}
-				}
-			}
-
-			@if (map-get($map, media-breakpoint-up)) {
-				@each $breakpoint
-					in map-keys(map-get($map, media-breakpoint-up))
-				{
-					$media-breakpoint-up: map-deep-get(
-						$map,
-						media-breakpoint-up,
-						$breakpoint
-					);
+			$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+			$_media-breakpoint-up: map-get($map, media-breakpoint-up);
 
-					@if ($breakpoint) {
-						@include media-breakpoint-up($breakpoint) {
-							@include clay-menubar-vertical-variant(
-								$media-breakpoint-up
-							);
-						}
-					}
-				}
+			@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+				@include clay-generate-media-breakpoints(
+					$map,
+					'clay-menubar-vertical-variant'
+				);
 			}
 		} @else {
 			.menubar-collapse {
@@ -972,41 +942,14 @@
 			}
 		}
 
-		@if (map-get($map, media-breakpoint-down)) {
-			@each $breakpoint in map-keys(map-get($map, media-breakpoint-down))
-			{
-				$media-breakpoint-down: map-deep-get(
-					$map,
-					media-breakpoint-down,
-					$breakpoint
-				);
+		$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+		$_media-breakpoint-up: map-get($map, media-breakpoint-up);
 
-				@if ($breakpoint) {
-					@include media-breakpoint-down($breakpoint) {
-						@include clay-menubar-vertical-variant(
-							$media-breakpoint-down
-						);
-					}
-				}
-			}
-		}
-
-		@if (map-get($map, media-breakpoint-up)) {
-			@each $breakpoint in map-keys(map-get($map, media-breakpoint-up)) {
-				$media-breakpoint-up: map-deep-get(
-					$map,
-					media-breakpoint-up,
-					$breakpoint
-				);
-
-				@if ($breakpoint) {
-					@include media-breakpoint-up($breakpoint) {
-						@include clay-menubar-vertical-variant(
-							$media-breakpoint-up
-						);
-					}
-				}
-			}
+		@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+			@include clay-generate-media-breakpoints(
+				$map,
+				'clay-menubar-vertical-variant'
+			);
 		}
 	}
 }

package/src/scss/variables/_breadcrumbs.scss

@@ -138,3 +138,13 @@ $breadcrumb-link: map-deep-merge(
 	),
 	$breadcrumb-link
 );
+
+// Breadcrumb Item Expand
+
+$breadcrumb-toggle: () !default;
+$breadcrumb-toggle: map-merge(
+	(
+		color: $breadcrumb-link-color,
+	),
+	$breadcrumb-toggle
+);