@clayui/css 3.136.0 → 3.138.0

package/src/images/icons/paste-word.svg

@@ -4,6 +4,4 @@
 *
 * SPDX-License-Identifier: BSD-3-Clause
 -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-	<path class="lexicon-icon-outline" d="M416,192h-64V91.87C352,58.8,325.2,32,292.13,32H91.87C58.8,32,32,58.8,32,91.87v264.27C32,389.2,58.8,416,91.87,416H160v32c0,35.35,28.65,64,64,64h192c35.35,0,64-28.65,64-64V256C480,220.65,451.35,192,416,192z M160,256v96H96V96h32c0,17.67,14.33,32,32,32h64c17.67,0,32-14.33,32-32h32v96h-64C188.65,192,160,220.65,160,256z M386.03,416h-36.64l-27.36-83.24L293.85,416h-35.82l-32-128h32l19.35,85.66L304.79,288h33.7l26.84,85.66l20.7-85.66h32L386.03,416z"/>
-</svg>
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M7.5.252a.5.5 0 0 1 .5.5h1.129C10.162.752 11 1.59 11 2.623v3.13h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-1H2.871A1.871 1.871 0 0 1 1 10.88V2.623A1.87 1.87 0 0 1 2.871.753H4a.5.5 0 0 1 .5-.5h3Zm.563 12.5h1.12l.88-2.601.855 2.601h1.146l1-4h-1l-.647 2.677-.839-2.677H9.524l-.856 2.677-.605-2.677h-1l1 4Zm-5.063-2h2v-3a2 2 0 0 1 2-2h2v-3H8a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5H3v8Z"/></svg>

package/src/images/icons/paste.svg

@@ -4,6 +4,4 @@
 *
 * SPDX-License-Identifier: BSD-3-Clause
 -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-	<path class="lexicon-icon-outline" d="M388.1,32H123.9C90.8,32,64,58.8,64,91.9v328.3c0,33.1,26.8,59.9,59.9,59.9h264.3c33.1,0,59.9-26.8,59.9-59.9V91.9C448,58.8,421.2,32,388.1,32L388.1,32z M192,128h128c17.7,0,32-14.3,32-32h32v320H128V96h32C160,113.7,174.3,128,192,128L192,128z"/>
-</svg>
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M3.87 1.375h1.38c0-.498.5-.748.749-.748h4c.251 0 .751.25.751.748h1.377c1.034 0 1.871.838 1.874 1.872v10.259a1.872 1.872 0 0 1-1.872 1.872H3.871a1.871 1.871 0 0 1-1.872-1.872V3.247c0-1.034.837-1.872 1.872-1.872Zm.129 2v10h8v-10H10.75c0 .502-.5.752-.751.752h-4c-.249 0-.749-.25-.749-.752H3.999Z"/></svg>

package/src/images/icons/pin-full.svg

@@ -4,6 +4,7 @@
 *
 * SPDX-License-Identifier: BSD-3-Clause
 -->
+<!-- pin-full is deprecated as of v3.136.0 and will be removed with no replacement -->
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 	<path class="lexicon-icon-outline" d="M256,0C114.6,0,0,114.6,0,256s114.6,256,256,256s256-114.6,256-256S397.4,0,256,0z M401.4,246.4c-27.2,27.2-45.4,10.5-51.2,5.9l-25.7,25.7c13.1,67.7-42.2,110.1-42.2,110.1c-12.5,12.5-32.8,12.5-45.3,0L195.7,347l-66.5,54L111.4,383l53-67.3l-40.6-40.6c-12.5-12.5-12.5-32.8,0-45.3c0,0,41.8-55.1,110.1-42.2l25.7-25.7c-2.1-2.1-23.6-21.7,6.4-51.8c20.7-20.7,39.6-15.1,50-4.7l90.5,90.5C412,202.6,427.7,220.1,401.4,246.4z"></path>
 </svg>

package/src/images/icons/repeat.svg

@@ -0,0 +1,7 @@
+<!--
+* SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M5.174 2.293a1.008 1.008 0 0 1 1.416 0l2.12 2.122c.389.39.389 1.028 0 1.416L6.59 7.952a1.008 1.008 0 0 1-1.416 0 1.007 1.007 0 0 1 0-1.415l.534-.534H2v6h12v-6h-2a1 1 0 0 1 0-2h3c.5 0 1 .5 1 1v8c0 .517-.5.999-1 .999H1c-.47-.048-.952-.53-1-1v-8c0-.55.45-1 1-1h4.468l-.294-.293a1.007 1.007 0 0 1 0-1.416Z"/></svg>

package/src/images/icons/reset.svg

@@ -4,6 +4,6 @@
 *
 * SPDX-License-Identifier: BSD-3-Clause
 -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-	<path class="lexicon-icon-outline" d="M256,0C179.5,0,110.9,33.5,64,86.7V64c0-44.5-64-43-64,0v96l0,0c0,18.5,15,32,32,32l0,0h96c41.5,0,43.5-64,0-64h-15.1c35.2-39.3,86.2-64,143.1-64c251,0,253,384,0,384c-95.1,0-174.1-69.2-189.3-160H2c15.7,126.3,123.5,224,254,224C593,512,598,0,256,0z"></path>
-</svg>
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path d="M8 .002a7.973 7.973 0 0 0-6 2.71v-.71c0-.55-.45-1-1-1s-1 .45-1 1v3a1.005 1.005 0 0 0 1 1h3c.55 0 1-.45 1-1s-.45-1-1-1h-.472a6.002 6.002 0 0 1 10.472 4 6 6 0 0 1-11.916 1H.063A8 8 0 1 0 8 .002Z"/>
+</svg>

package/src/images/icons/send.svg

@@ -4,6 +4,7 @@
 *
 * SPDX-License-Identifier: BSD-3-Clause
 -->
+<!-- third-party is deprecated as of v3.136.0 with no replacement -->
 <svg class="lexicon-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 	<path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M15.3427 9.14808C16.2191 8.72084 16.2191 7.27915 15.3427 6.85192L1.48786 0.098408C0.780993 -0.246152 9.40251e-07 0.356486 9.0674e-07 1.24648L7.79595e-07 4.62324C7.43789e-07 5.57418 0.735637 6.36309 1.68426 6.42945L6.3347 6.7548L6.97193 6.7548C7.56431 6.7548 8.04453 7.31229 8.04453 7.99998C8.04453 8.68767 7.56431 9.24516 6.97193 9.24516L6.33543 9.24516L1.68426 9.57055C0.735639 9.63691 5.61109e-07 10.4258 5.25303e-07 11.3768L3.98158e-07 14.7535C3.64646e-07 15.6435 0.780996 16.2461 1.48786 15.9016L15.3427 9.14808Z"/>
 </svg>

package/src/images/icons/share-alt.svg

@@ -4,6 +4,7 @@
 *
 * SPDX-License-Identifier: BSD-3-Clause
 -->
+<!-- share-alt is deprecated as of v3.136.0 use share instead -->
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 	<path class="lexicon-icon-outline" d="M397.255 402.745c-5.868-5.868-12.709-10.478-20.334-13.702-7.911-3.346-16.296-5.043-24.921-5.043s-17.010 1.697-24.921 5.043c-2.625 1.111-5.154 2.389-7.587 3.822l-104.357-104.357c1.434-2.432 2.712-4.962 3.822-7.587 3.346-7.911 5.042-16.296 5.042-24.922s-1.696-17.011-5.042-24.922c-1.111-2.625-2.388-5.155-3.822-7.587l104.357-104.357c2.432 1.433 4.961 2.712 7.587 3.822 7.911 3.346 16.296 5.043 24.921 5.043s17.010-1.697 24.921-5.043c7.625-3.225 14.466-7.835 20.334-13.703s10.478-12.709 13.702-20.334c3.346-7.911 5.043-16.296 5.043-24.922s-1.697-17.011-5.043-24.922c-3.225-7.625-7.835-14.466-13.702-20.334s-12.709-10.477-20.334-13.703c-7.911-3.346-16.296-5.043-24.921-5.043s-17.010 1.696-24.921 5.043c-7.625 3.225-14.466 7.835-20.334 13.703s-10.478 12.709-13.702 20.334c-3.346 7.911-5.043 16.296-5.043 24.922s1.697 17.011 5.043 24.922c1.111 2.625 2.389 5.155 3.822 7.587l-104.357 104.357c-2.431-1.434-4.962-2.712-7.587-3.822-7.911-3.346-16.296-5.042-24.922-5.042s-17.011 1.696-24.922 5.042c-7.625 3.225-14.466 7.835-20.334 13.702s-10.478 12.709-13.703 20.334c-3.346 7.911-5.043 16.296-5.043 24.922s1.697 17.011 5.043 24.922c3.225 7.625 7.835 14.466 13.703 20.334s12.709 10.478 20.334 13.702c7.911 3.346 16.296 5.043 24.922 5.043s17.011-1.697 24.922-5.043c2.625-1.111 5.155-2.389 7.587-3.822l104.357 104.357c-1.433 2.432-2.712 4.961-3.822 7.587-3.346 7.911-5.043 16.296-5.043 24.921s1.697 17.010 5.043 24.921c3.225 7.625 7.835 14.466 13.702 20.334s12.709 10.478 20.334 13.702c7.911 3.346 16.296 5.042 24.921 5.042s17.010-1.697 24.921-5.043c7.625-3.225 14.466-7.835 20.334-13.702s10.478-12.709 13.702-20.334c3.346-7.911 5.043-16.296 5.043-24.921s-1.697-17.010-5.043-24.921c-3.225-7.625-7.835-14.466-13.702-20.333zM352 32c17.673 0 32 14.327 32 32s-14.327 32-32 32-32-14.327-32-32 14.327-32 32-32zM160 288c-17.673 0-32-14.327-32-32s14.327-32 32-32 32 14.327 32 32-14.327 32-32 32zM352 480c-17.673 0-32-14.327-32-32s14.327-32 32-32 32 14.327 32 32-14.327 32-32 32z"></path>
 </svg>

package/src/images/icons/social-twitter.svg

@@ -4,6 +4,7 @@
 *
 * SPDX-License-Identifier: BSD-3-Clause
 -->
+<!-- social-twitter is deprecated as of v3.136.0 and will be removed with no replacement -->
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 	<path class="lexicon-icon-outline" d="M512.015 97.213c-18.842 8.368-39.089 14.015-60.332 16.531 21.68-12.991 38.358-33.589 46.2-58.108-20.306 12.026-42.776 20.774-66.71 25.485-19.164-20.423-46.462-33.179-76.688-33.179-58.020 0-105.039 47.048-105.039 105.039 0 8.222 0.936 16.238 2.721 23.934-87.308-4.389-164.698-46.2-216.516-109.749-9.041 15.508-14.22 33.559-14.22 52.812 0 36.457 18.55 68.612 46.727 87.425-17.234-0.556-33.414-5.267-47.575-13.137 0 0.439 0 0.877 0 1.317 0 50.91 36.222 93.336 84.266 102.99-8.807 2.399-18.082 3.687-27.679 3.687-6.759 0-13.343-0.673-19.779-1.901 13.371 41.723 52.169 72.123 98.135 72.942-35.959 28.176-81.252 44.971-130.465 44.971-8.486 0-16.853-0.498-25.046-1.464 46.493 29.815 101.704 47.195 161.041 47.195 193.226 0 298.879-160.075 298.879-298.879 0-4.565-0.117-9.070-0.293-13.576 20.481-14.776 38.3-33.267 52.374-54.334v0z"></path>
 </svg>

package/src/images/icons/third-party.svg

@@ -4,6 +4,7 @@
 *
 * SPDX-License-Identifier: BSD-3-Clause
 -->
+<!-- third-party is deprecated as of v3.136.0 with no replacement -->
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 	<path class="lexicon-icon-outline third-party-dots" d="M480.1,194.6v-69.1c47.8-14.6,41.5-93.5-16-93.5c-57.1,0-63.6,78.9-16,93.5v69.2c-15,4.8-24.8,16.1-29.1,29.4H221.4c-5.7-17.6-20.9-32-45.4-32c-62.9,0-64.7,96,0,96c25.1,0,40.1-14.4,45.6-32h197c4.1,13.4,14,24.7,29.4,29.5v101.2c-46.4,14.9-42.6,93.4,16,93.4c58.7,0,62.8-78.6,16-93.4V285.5C522.9,272.4,522.1,207.9,480.1,194.6z M464,224c21.2,0,20.7,32,0,32C442.5,256,443.2,224,464,224z M464,64c21.2,0,20.7,32,0,32C442.5,96,443.2,64,464,64z M176,256c-21.6,0-20.8-32,0-32C197.2,224,196.7,256,176,256z M464,448c-21.6,0-20.8-32,0-32C485.2,416,484.8,448,464,448z"></path>
 	<path class="lexicon-icon-outline third-party-border" d="M284.9,320v92.9H67.1V99.1h217.8V160H352V99.1C352,62.1,322,32,284.9,32H67.1C30.1,32,0,62.1,0,99.1v313.8C0,449.9,30.1,480,67.1,480h217.8c37.1,0,67.1-30.1,67.1-67.1V320H284.9z"></path>

package/src/scss/_license-text.scss

@@ -1,5 +1,5 @@
 /**
- * Clay 3.136.0
+ * Clay 3.138.0
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>

package/src/scss/atlas/variables/_forms.scss

@@ -201,11 +201,10 @@ $form-feedback-indicator-margin-x: 0 !default;
 
 $input-danger-bg: $danger-l2 !default;
 $input-danger-border-color: $danger-l1 !default;
-// Will need to be revisited if https://github.com/twbs/bootstrap/pull/24821 merge error is fixed
-$input-danger-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
+$input-danger-box-shadow: c-unset !default;
 $input-danger-color: $input-color !default;
 
-$input-danger-focus-box-shadow: $input-focus-box-shadow !default;
+$input-danger-focus-box-shadow: c-unset !default;
 
 $input-danger: () !default;
 $input-danger: map-deep-merge(
@@ -261,11 +260,10 @@ $input-danger-select: map-deep-merge(
 
 $input-warning-bg: $warning-l2 !default;
 $input-warning-border-color: $warning-l1 !default;
-// Will need to be revisited if https://github.com/twbs/bootstrap/pull/24821 merge error is fixed
-$input-warning-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
+$input-warning-box-shadow: c-unset !default;
 $input-warning-color: $input-color !default;
 
-$input-warning-focus-box-shadow: $input-focus-box-shadow !default;
+$input-warning-focus-box-shadow: c-unset !default;
 
 $input-warning: () !default;
 $input-warning: map-deep-merge(
@@ -321,11 +319,10 @@ $input-warning-select: map-deep-merge(
 
 $input-success-bg: $success-l2 !default;
 $input-success-border-color: $success-l1 !default;
-// Will need to be revisited if https://github.com/twbs/bootstrap/pull/24821 merge error is fixed
-$input-success-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
+$input-success-box-shadow: c-unset !default;
 $input-success-color: $input-color !default;
 
-$input-success-focus-box-shadow: $input-focus-box-shadow !default;
+$input-success-focus-box-shadow: c-unset !default;
 
 $input-success: () !default;
 $input-success: map-deep-merge(

package/src/scss/atlas/variables/_sidebar.scss

@@ -3,8 +3,7 @@
 $sidebar-header-component-title: () !default;
 $sidebar-header-component-title: map-deep-merge(
 	(
-		// 20px
-		font-size: 1.25rem
+		font-size: 1rem,
 	),
 	$sidebar-header-component-title
 );
@@ -14,7 +13,7 @@ $sidebar-header-component-title: map-deep-merge(
 $sidebar-header-component-subtitle: () !default;
 $sidebar-header-component-subtitle: map-deep-merge(
 	(
-		font-size: 0.75rem,
+		font-size: 0.875rem,
 		font-weight: $font-weight-normal,
 	),
 	$sidebar-header-component-subtitle
@@ -63,10 +62,6 @@ $sidebar-light: map-deep-merge(
 		box-shadow: -0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1),
 		sidenav-start: (
 			box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1),
-			focus: (
-				box-shadow: #{0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1),
-				$component-focus-inset-box-shadow},
-			),
 		),
 		sidebar-panel: (
 			background-color: $gray-200,
@@ -93,3 +88,13 @@ $sidebar-light: map-deep-merge(
 	),
 	$sidebar-light
 );
+
+$sidebar-c-slideout-start: () !default;
+$sidebar-c-slideout-start: map-deep-merge(
+	(
+		'.sidebar-light': (
+			box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1),
+		),
+	),
+	$sidebar-c-slideout-start
+);

package/src/scss/cadmin/components/_form-validation.scss

@@ -20,6 +20,22 @@
 
 .form-text {
 	@include clay-css($cadmin-form-text);
+
+	$_blockquote: map-get($cadmin-form-text, blockquote);
+
+	@if ($_blockquote) {
+		&.blockquote {
+			@include clay-css($_blockquote);
+
+			$_before: map-get($_blockquote, before);
+
+			@if ($_before) {
+				&::before {
+					@include clay-css($_before);
+				}
+			}
+		}
+	}
 }
 
 // Non HTML5 Form Validator

package/src/scss/cadmin/components/_sidebar.scss

@@ -31,6 +31,30 @@
 			map-get($sidebar-header, component-subtitle)
 		);
 	}
+
+	$_autofit-row: map-get($sidebar-header, autofit-row);
+
+	@if ($_autofit-row) {
+		.autofit-row {
+			@include clay-css($_autofit-row);
+
+			$_autofit-col: map-get($_autofit-row, autofit-col);
+
+			@if ($_autofit-col) {
+				> .autofit-col {
+					@include clay-css($_autofit-col);
+				}
+			}
+
+			$_autofit-col-expand: map-get($_autofit-row, autofit-col-expand);
+
+			@if ($_autofit-col-expand) {
+				> .autofit-col-expand {
+					@include clay-css($_autofit-col-expand);
+				}
+			}
+		}
+	}
 }
 
 .sidebar-footer {
@@ -121,3 +145,11 @@
 		}
 	}
 }
+
+.c-slideout-start {
+	@include clay-map-to-css($cadmin-sidebar-c-slideout-start);
+}
+
+.c-slideout-end {
+	@include clay-map-to-css($cadmin-sidebar-c-slideout-end);
+}

package/src/scss/cadmin/components/_slideout.scss

@@ -14,6 +14,18 @@
 	@include clay-css($cadmin-c-slideout-absolute);
 }
 
+.c-slideout-container {
+	@include clay-map-to-css($cadmin-c-slideout-container);
+}
+
+.c-slideout-push-start {
+	@include clay-css($cadmin-c-slideout-push-start);
+}
+
+.c-slideout-push-end {
+	@include clay-css($cadmin-c-slideout-push-end);
+}
+
 .c-slideout {
 	@include clay-slideout-variant($cadmin-c-slideout);
 

package/src/scss/cadmin/components/_utilities-functional-important.scss

@@ -463,6 +463,14 @@
 	z-index: $cadmin-zindex-fixed;
 }
 
+.sticky-bottom {
+	@supports (position: sticky) {
+		bottom: 0;
+		position: sticky;
+		z-index: $cadmin-zindex-sticky;
+	}
+}
+
 .sticky-top {
 	@supports (position: sticky) {
 		position: sticky;

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

@@ -478,6 +478,8 @@ $cadmin-clay-color-slider-alpha: map-deep-merge(
 				background-size: 8px 8px,
 			),
 			form-control-range: (
+				background-image:
+					linear-gradient(90deg, transparent 0%, currentcolor 100%),
 				color: inherit,
 			),
 			clay-range-progress: (

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

@@ -631,6 +631,24 @@ $cadmin-form-text: map-merge(
 		font-weight: $cadmin-form-text-font-weight,
 		margin-top: $cadmin-form-text-margin-top,
 		word-wrap: break-word,
+		blockquote: (
+			font-style: italic,
+			font-weight: $cadmin-font-weight-normal,
+			margin-bottom: 0,
+			margin-top: 12px,
+			padding-left: 12px,
+			position: relative,
+			before: (
+				background-color: $cadmin-secondary-l1,
+				bottom: 0,
+				content: '',
+				display: block,
+				left: 0,
+				position: absolute,
+				top: 0,
+				width: 2px,
+			),
+		),
 	),
 	$cadmin-form-text
 );
@@ -678,7 +696,7 @@ $cadmin-form-feedback-invalid-color: $cadmin-danger !default;
 
 $cadmin-input-danger-bg: $cadmin-danger-l2 !default;
 $cadmin-input-danger-border-color: $cadmin-danger-l1 !default;
-$cadmin-input-danger-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
+$cadmin-input-danger-box-shadow: null !default;
 $cadmin-input-danger-color: $cadmin-input-color !default;
 
 $cadmin-input-danger-focus-bg: null !default;
@@ -699,6 +717,12 @@ $cadmin-input-danger: map-deep-merge(
 			box-shadow: $cadmin-input-danger-focus-box-shadow,
 			color: $cadmin-input-danger-focus-color,
 		),
+		focus-within: (
+			background-color: $cadmin-input-danger-bg,
+			border-color: $cadmin-input-danger-border-color,
+			box-shadow: $cadmin-input-danger-box-shadow,
+			color: $cadmin-input-danger-color,
+		),
 	),
 	$cadmin-input-danger
 );
@@ -848,7 +872,7 @@ $cadmin-has-error: map-deep-merge(
 
 $cadmin-input-warning-bg: $cadmin-warning-l2 !default;
 $cadmin-input-warning-border-color: $cadmin-warning-l1 !default;
-$cadmin-input-warning-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
+$cadmin-input-warning-box-shadow: null !default;
 $cadmin-input-warning-color: $cadmin-input-color !default;
 
 $cadmin-input-warning-focus-bg: null !default;
@@ -869,6 +893,12 @@ $cadmin-input-warning: map-deep-merge(
 			box-shadow: $cadmin-input-warning-focus-box-shadow,
 			color: $cadmin-input-warning-focus-color,
 		),
+		focus-within: (
+			background-color: $cadmin-input-warning-bg,
+			border-color: $cadmin-input-warning-border-color,
+			box-shadow: $cadmin-input-warning-box-shadow,
+			color: $cadmin-input-warning-color,
+		),
 	),
 	$cadmin-input-warning
 );
@@ -1018,7 +1048,7 @@ $cadmin-has-warning: map-deep-merge(
 
 $cadmin-input-success-bg: $cadmin-success-l2 !default;
 $cadmin-input-success-border-color: $cadmin-success-l1 !default;
-$cadmin-input-success-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
+$cadmin-input-success-box-shadow: null !default;
 $cadmin-input-success-color: $cadmin-input-color !default;
 
 $cadmin-input-success-focus-bg: null !default;
@@ -1039,6 +1069,12 @@ $cadmin-input-success: map-deep-merge(
 			box-shadow: $cadmin-input-success-focus-box-shadow,
 			color: $cadmin-input-success-focus-color,
 		),
+		focus-within: (
+			background-color: $cadmin-input-success-bg,
+			border-color: $cadmin-input-success-border-color,
+			box-shadow: $cadmin-input-success-box-shadow,
+			color: $cadmin-input-success-color,
+		),
 	),
 	$cadmin-input-success
 );

package/src/scss/cadmin/variables/_sidebar.scss

@@ -1,14 +1,14 @@
-$cadmin-sidebar-padding-bottom: 16px !default; // 16px
-$cadmin-sidebar-padding-left: 16px !default; // 16px
-$cadmin-sidebar-padding-right: 16px !default; // 16px
-$cadmin-sidebar-padding-top: 16px !default; // 16px
+$cadmin-sidebar-padding-bottom: 16px !default;
+$cadmin-sidebar-padding-left: 24px !default;
+$cadmin-sidebar-padding-right: 24px !default;
+$cadmin-sidebar-padding-top: 16px !default;
 
 // Sidebar Header Title
 
 $cadmin-sidebar-header-component-title: () !default;
 $cadmin-sidebar-header-component-title: map-deep-merge(
 	(
-		font-size: 20px,
+		font-size: 16px,
 		href: (
 			color: $cadmin-gray-900,
 		),
@@ -21,7 +21,7 @@ $cadmin-sidebar-header-component-title: map-deep-merge(
 $cadmin-sidebar-header-component-subtitle: () !default;
 $cadmin-sidebar-header-component-subtitle: map-deep-merge(
 	(
-		font-size: 12px,
+		font-size: 14px,
 		font-weight: $cadmin-font-weight-normal,
 		margin-bottom: 0,
 	),
@@ -86,10 +86,19 @@ $cadmin-sidebar: map-deep-merge(
 		sidebar-header: (
 			padding-bottom: $cadmin-sidebar-padding-bottom,
 			padding-left: $cadmin-sidebar-padding-left,
-			padding-right: $cadmin-sidebar-padding-right,
+			padding-right: 16px,
 			padding-top: $cadmin-sidebar-padding-top,
 			component-title: $cadmin-sidebar-header-component-title,
 			component-subtitle: $cadmin-sidebar-header-component-subtitle,
+			autofit-row: (
+				margin-left: -4px,
+				margin-right: -4px,
+				width: auto,
+				autofit-col: (
+					padding-left: 4px,
+					padding-right: 4px,
+				),
+			),
 		),
 		sidebar-footer: (
 			padding-bottom: $cadmin-sidebar-padding-bottom,
@@ -200,6 +209,14 @@ $cadmin-sidebar-light: map-deep-merge(
 		border-left-width: 0,
 		box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.1),
 		color: $cadmin-gray-900,
+		sidebar-header: (
+			background-color: inherit,
+			border: 0px solid $cadmin-gray-300,
+		),
+		sidebar-footer: (
+			background-color: inherit,
+			border: 0px solid $cadmin-gray-300,
+		),
 		sidenav-start: (
 			box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.1),
 		),
@@ -293,6 +310,18 @@ $cadmin-sidebar-dark: map-deep-merge(
 	$cadmin-sidebar-dark
 );
 
+$cadmin-sidebar-c-slideout-start: () !default;
+$cadmin-sidebar-c-slideout-start: map-deep-merge(
+	(
+		'.sidebar-light': (
+			box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1),
+		),
+	),
+	$cadmin-sidebar-c-slideout-start
+);
+
+$cadmin-sidebar-c-slideout-end: () !default;
+
 $cadmin-sidebar-palette: () !default;
 $cadmin-sidebar-palette: map-deep-merge(
 	(

package/src/scss/cadmin/variables/_slideout.scss

@@ -11,6 +11,7 @@ $cadmin-c-slideout-tbar-stacked-min-width-mobile: 40px !default;
 $cadmin-c-slideout-transition-in: () !default;
 $cadmin-c-slideout-transition-in: map-merge(
 	(
+		overflow: hidden,
 		transition: all 0.3s ease-in-out,
 	),
 	$cadmin-c-slideout-transition-in
@@ -19,6 +20,7 @@ $cadmin-c-slideout-transition-in: map-merge(
 $cadmin-c-slideout-transition-out: () !default;
 $cadmin-c-slideout-transition-out: map-merge(
 	(
+		overflow: hidden,
 		transition: all 0.2s ease-in,
 	),
 	$cadmin-c-slideout-transition-out
@@ -42,6 +44,41 @@ $cadmin-c-slideout-fixed: map-merge(
 	$cadmin-c-slideout-fixed
 );
 
+$cadmin-c-slideout-container: () !default;
+$cadmin-c-slideout-container: map-deep-merge(
+	(
+		min-height: 480px,
+		position: relative,
+	),
+	$cadmin-c-slideout-container
+);
+
+$cadmin-c-slideout-push-start: () !default;
+$cadmin-c-slideout-push-start: map-deep-merge(
+	(
+		padding-left: $cadmin-c-slideout-sidebar-width,
+		media-breakpoint-down: (
+			md: (
+				padding-left: 0,
+			),
+		),
+	),
+	$cadmin-c-slideout-push-start
+);
+
+$cadmin-c-slideout-push-end: () !default;
+$cadmin-c-slideout-push-end: map-deep-merge(
+	(
+		padding-right: $cadmin-c-slideout-sidebar-width,
+		media-breakpoint-down: (
+			md: (
+				padding-right: 0,
+			),
+		),
+	),
+	$cadmin-c-slideout-push-end
+);
+
 // C Slideout Base
 
 $cadmin-c-slideout: () !default;
@@ -56,15 +93,26 @@ $cadmin-c-slideout: map-deep-merge(
 		sidebar: (
 			display: none,
 			flex-shrink: 0,
-			overflow: visible,
 			position: relative,
 			width: $cadmin-c-slideout-sidebar-width,
+			sidebar-header: (
+				border-bottom-width: 1px,
+			),
+			sidebar-body: (
+				flex-grow: 1,
+				overflow: visible,
+			),
+			sidebar-footer: (
+				border-top-width: 1px,
+			),
 		),
 		sidebar-c-slideout-show: (
-			display: block,
+			display: flex,
+			flex-direction: column,
 		),
 		sidebar-c-slideout-transition: (
-			display: block,
+			display: flex,
+			flex-direction: column,
 			c-horizontal-resizer: (
 				display: none,
 			),

package/src/scss/cadmin/variables/_stickers.scss

@@ -95,6 +95,12 @@ $cadmin-sticker-xl: map-deep-merge(
 $cadmin-sticker-sizes: () !default;
 $cadmin-sticker-sizes: map-deep-merge(
 	(
+		sticker-xs: (
+			font-size: 0.5rem,
+			height: 1rem,
+			line-height: 1rem,
+			width: 1rem,
+		),
 		sticker-sm: $cadmin-sticker-sm,
 		sticker-lg: $cadmin-sticker-lg,
 		sticker-xl: $cadmin-sticker-xl,

package/src/scss/components/_form-validation.scss

@@ -42,6 +42,22 @@
 
 .form-text {
 	@include clay-css($form-text);
+
+	$_blockquote: map-get($form-text, blockquote);
+
+	@if ($_blockquote) {
+		&.blockquote {
+			@include clay-css($_blockquote);
+
+			$_before: map-get($_blockquote, before);
+
+			@if ($_before) {
+				&::before {
+					@include clay-css($_before);
+				}
+			}
+		}
+	}
 }
 
 @if ($enable-bs4-deprecated) {

package/src/scss/components/_sidebar.scss

@@ -30,6 +30,30 @@
 			map-get($sidebar-header, component-subtitle)
 		);
 	}
+
+	$_autofit-row: map-get($sidebar-header, autofit-row);
+
+	@if ($_autofit-row) {
+		.autofit-row {
+			@include clay-css($_autofit-row);
+
+			$_autofit-col: map-get($_autofit-row, autofit-col);
+
+			@if ($_autofit-col) {
+				> .autofit-col {
+					@include clay-css($_autofit-col);
+				}
+			}
+
+			$_autofit-col-expand: map-get($_autofit-row, autofit-col-expand);
+
+			@if ($_autofit-col-expand) {
+				> .autofit-col-expand {
+					@include clay-css($_autofit-col-expand);
+				}
+			}
+		}
+	}
 }
 
 .sidebar-footer {
@@ -119,3 +143,11 @@
 		}
 	}
 }
+
+.c-slideout-start {
+	@include clay-map-to-css($sidebar-c-slideout-start);
+}
+
+.c-slideout-end {
+	@include clay-map-to-css($sidebar-c-slideout-end);
+}

package/src/scss/components/_slideout.scss

@@ -14,6 +14,18 @@
 	@include clay-css($c-slideout-absolute);
 }
 
+.c-slideout-container {
+	@include clay-map-to-css($c-slideout-container);
+}
+
+.c-slideout-push-start {
+	@include clay-css($c-slideout-push-start);
+}
+
+.c-slideout-push-end {
+	@include clay-css($c-slideout-push-end);
+}
+
 .c-slideout {
 	@include clay-slideout-variant($c-slideout);
 

package/src/scss/components/_utilities-functional-important.scss

@@ -445,6 +445,14 @@
 	z-index: $zindex-fixed;
 }
 
+.sticky-bottom {
+	@supports (position: sticky) {
+		bottom: 0;
+		position: sticky;
+		z-index: $zindex-sticky;
+	}
+}
+
 .sticky-top {
 	@supports (position: sticky) {
 		position: sticky;