@clayui/css 3.136.0 → 3.138.0

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

@@ -206,7 +206,7 @@
 
 	'columns': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-body columns-bg-left" fill="none" d="M0 46.9V465c0 25.9 21.1 47 46.9 47h130.8c25.8 0 46.9-21.1 46.9-46.9V46.9c0-25.8-21.1-46.9-46.9-46.9H46.9C21.1 0 0 21.1 0 46.9z"/><path class="lexicon-icon-body columns-bg-right" fill="none" d="M287.3 46.9V465c0 25.8 21.1 46.9 46.9 46.9H465c25.8 0 46.9-21.1 46.9-46.9V46.9C512 21.1 490.9 0 465.1 0H334.3c-25.9 0-47 21.1-47 46.9z"/><path class="lexicon-icon-outline columns-border-left" d="M0 46.9V465c0 25.9 21.1 47 46.9 47h130.8c25.8 0 46.9-21.1 46.9-46.9V46.9c0-25.8-21.1-46.9-46.9-46.9H46.9C21.1 0 0 21.1 0 46.9zM160.7 64v384h-96V64h96z" fill="#{$color}"/><path class="lexicon-icon-outline columns-border-right" d="M287.3 46.9V465c0 25.8 21.1 46.9 46.9 46.9H465c25.8 0 46.9-21.1 46.9-46.9V46.9C512 21.1 490.9 0 465.1 0H334.3c-25.9 0-47 21.1-47 46.9zM448 64v384h-96V64h96z" fill="#{$color}"/></svg>',
 
-	'comments': '<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 64v288c0 35.3 28.7 64 64 64h50.7l-41 41c-12.5 12.5-12.5 32.8 0 45.3 6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4l86.3-86.3H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"/><path class="lexicon-icon-outline comments-border" d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h50.7l-41 41c-12.5 12.5-12.5 32.8 0 45.3 6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4l86.3-86.3H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm0 352H64V64h384v288z" fill="#{$color}"/><path class="lexicon-icon-outline comments-line-top" d="M384 128H128c-17.7 0-32 14.3-32 32s14.3 32 32 32h256c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline comments-line-bottom" d="M288 224H128c-17.7 0-32 14.3-32 32s14.3 32 32 32h160c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="#{$color}"/></svg>',
+	'comments': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14 .002H2c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2h1.584l-1.28 1.282a1.002 1.002 0 0 0 .705 1.709.986.986 0 0 0 .707-.294l2.696-2.697H14c1.103 0 2-.897 2-2v-9c0-1.103-.897-2-2-2Zm0 11H2v-9h12v9Z"/><path d="M12 3.502H4a.999.999 0 1 0 0 2h8a.999.999 0 1 0 0-2Zm-3.857 3.5H3.857c-.474 0-.857.447-.857 1 0 .553.383 1 .857 1h4.286c.474 0 .857-.447.857-1 0-.553-.383-1-.857-1Z"/></svg>',
 
 	'community': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M0 256.6c0 337.1 512 344.1 512 0 0-342.1-512-342.1-512 0zm60.6 106.5c7.3-61.8 67.3-106.5 109.3-106.9C296.2 255.1 307 403.8 305 474.8 199.3 505.3 90 429.4 60.6 363.1zM128 176c0-63.7 95.8-63.9 95.8 0 0 65.3-95.8 63.3-95.8 0zm276 85.4c32.7-50.7-8.3-101.4-52.4-101-57 .6-82.8 66.9-47.1 102.2-10.9 1.9-18.7 7.7-19 7.4-22.4-25-54.7-35.6-54.5-35.8 52.6-46.2 19.2-137.8-55.1-138.3-66.4-.5-110.6 81.1-54 139.4-63 26.3-81.3 83.5-81.8 81C4.7 149.3 134.3 31.9 256 31.9c123.5 0 258.3 112.6 211.3 299.2-21.4-46.3-50-63.7-63.3-69.7z" fill="#{$color}"/></svg>',
 
@@ -350,6 +350,8 @@
 
 	'bg-bg': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#FFF" d="M16 80.3h480v112H16z"/><path fill="#E03232" d="M16 320h480v112H16z"/><path fill="#75BD4A" d="M16 192h480v128H16z"/></svg>',
 
+	'bs-ba': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M16 2H0v12h16V2Z" fill="#B0BEC9"/><path d="M15.5 2.5H.5v11h15v-11Z" fill="#002F6C"/><path d="M13.017 13.5v-11H2.092l10.925 11Z" fill="#FFCD00"/><path d="m3.463 5.826.385 1.184h1.245l-1.007.732.385 1.185-1.008-.733-1.008.733.385-1.185-1.007-.732h1.245l.385-1.184ZM6.891 9.254l.385 1.184h1.246l-1.008.732.385 1.185-1.008-.732-1.007.732.385-1.185-1.008-.732h1.246l.384-1.184Z" fill="#fff"/></svg>',
+
 	'ca-ad': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#0035A0" d="M16 80h160v352H16z"/><path fill="#E03232" d="M336 80h160v352H336z"/><path fill="#FCD638" d="M176 80h160v352H176z"/><path fill="#A97451" d="M208 206.5h96v96h-96z"/></svg>',
 
 	'ca-es-valencia': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 64h512v384H0V64Z" fill="#B0BEC9"/><path d="M16 80h480v352H16V80Z" fill="#FCD638"/><path d="M16 118.4h480v38.4H16v-38.4Zm0 78.4h480v38.4H16v-38.4Zm0 78.4h480v38.4H16v-38.4Zm0 78.4h480V392H16v-38.4Z" fill="#E03232"/><path d="M112 80H16v352h96V80Z" fill="#5887DD"/><path d="M144 80h-32v352h32V80Z" fill="#E03232"/></svg>',
@@ -684,11 +686,11 @@
 
 	'password-policies': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle class="lexicon-icon-outline password-policies-head" cx="192" cy="96" r="96" fill="#{$color}"/><path class="lexicon-icon password-policies-body" d="M288 245.9C30 132-174 475.5 224 446.8V352c0-35.5 28.7-64.2 64-64.2v-41.9z"/><path class="lexicon-icon password-policies-unlock" d="M480 320H352v-64c0-43.5 64-43.5 64 0v32h32v-32c0-84-128-86.5-128 0v64h-32c-17.7 0-32 14.3-32 32v128c0 17.7 14.3 32 32 32h192c17.7 0 32-14.3 32-32V352c0-17.7-14.3-32-32-32zm-64 128h-64v-64h64v64z"/></svg>',
 
-	'paste-plaintext': '<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.9c-.1-33.1-26.9-59.9-60-59.9zM192 128h128c17.7 0 32-14.3 32-32h32v320H128V96h32c0 17.7 14.3 32 32 32zm112 64h-96c-21 0-21 32 0 32h96c21 0 21-32 0-32zm0 64h-96c-21 0-21 32 0 32h96c21 0 21-32 0-32zm-64 64h-32c-21 0-21 32 0 32h32c21 0 21-32 0-32z" fill="#{$color}"/></svg>',
+	'paste-plaintext': '<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" fill="#{$color}"/><path d="M9.5 5.877h-3c-.656 0-.656 1 0 1h3c.656 0 .656-1 0-1Zm0 2h-3c-.656 0-.656 1 0 1h3c.656 0 .656-1 0-1Zm-2 2h-1c-.656 0-.656 1 0 1h1c.656 0 .656-1 0-1Z"/></svg>',
 
-	'paste-word': '<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-64V256c0-35.35-28.65-64-64-64zm-256 64v96H96V96h32c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32h32v96h-64c-35.35 0-64 28.65-64 64zm226.03 160h-36.64l-27.36-83.24L293.85 416h-35.82l-32-128h32l19.35 85.66L304.79 288h33.7l26.84 85.66 20.7-85.66h32l-32 128z" fill="#{$color}"/></svg>',
+	'paste-word': '<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" fill="#{$color}"/></svg>',
 
-	'paste': '<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.9c-.1-33.1-26.9-59.9-60-59.9zM192 128h128c17.7 0 32-14.3 32-32h32v320H128V96h32c0 17.7 14.3 32 32 32z" fill="#{$color}"/></svg>',
+	'paste': '<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" fill="#{$color}"/></svg>',
 
 	'pause': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline pause-line-1" d="M160 0c-17.7 0-32 14.3-32 32v448c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline pause-line-2" d="M352 0c-17.7 0-32 14.3-32 32v448c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32z" fill="#{$color}"/></svg>',
 
@@ -754,11 +756,13 @@
 
 	'remove-style': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline remove-style-t" d="M0 64.426h116.531L54.685 352.273h70.601l57.645-287.847h110.736V0H0l-.001 64.426z" fill="#{$color}"/><path class="lexicon-icon-outline remove-style-t-underline" d="M0 384h288v32H0v-32z" fill="#{$color}"/><path class="lexicon-icon-outline remove-style-x" d="M481 512c-8.281 0-16.065-3.224-21.921-9.08l-45.962-45.962-45.962 45.962c-5.856 5.856-13.64 9.08-21.92 9.08s-16.065-3.224-21.921-9.08c-5.856-5.854-9.08-13.639-9.08-21.92s3.224-16.065 9.08-21.921l45.962-45.962-45.962-45.962c-12.087-12.087-12.087-31.753 0-43.841 5.854-5.856 13.639-9.08 21.92-9.08s16.065 3.224 21.921 9.08l45.962 45.962 45.962-45.962c5.854-5.856 13.639-9.08 21.92-9.08s16.065 3.224 21.921 9.08c12.086 12.087 12.086 31.754 0 43.841l-45.962 45.962 45.962 45.962c5.856 5.854 9.08 13.639 9.08 21.92s-3.224 16.065-9.08 21.921c-5.855 5.855-13.639 9.079-21.92 9.079z" fill="#{$color}"/></svg>',
 
+	'repeat': '<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" fill="#{$color}"/></svg>',
+
 	'reply': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M14.4 4.5H5.655l.47-.514c.62-.684.62-1.8 0-2.478a1.513 1.513 0 0 0-1.934-.277c-.118.075-.23.167-.331.277L.465 5.222c-.62.683-.62 1.799 0 2.477l3.395 3.713c.102.11.214.203.334.277a1.507 1.507 0 0 0 1.931-.277c.62-.683.62-1.799 0-2.477L5.27 8h7.53v5.25c0 .963.72 1.75 1.6 1.75.88 0 1.6-.787 1.6-1.75v-7c0-.963-.72-1.75-1.6-1.75Z" fill="#{$color}"/></svg>',
 
 	'repository': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M448 384c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64h-96L241.1 12.8C230 4.5 216.5 0 202.7 0H64C28.7 0 0 28.7 0 64v256c0 35.3 28.7 64 64 64h160v64H32c-42 0-42 64 0 64h448c43 0 42-64 0-64H288v-64h160z" fill="#{$color}"/></svg>',
 
-	'reset': '<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 0v96c0 18.5 15 32 32 32h96c41.5 0 43.5-64 0-64h-15.1c35.2-39.3 86.2-64 143.1-64 251 0 253 384 0 384-95.1 0-174.1-69.2-189.3-160H2c15.7 126.3 123.5 224 254 224 337 0 342-512 0-512z" fill="#{$color}"/></svg>',
+	'reset': '<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>',
 
 	'restore': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline restore-hands" d="M180.7 347.3c3.1 3.1 7.2 4.7 11.3 4.7s8.2-1.6 11.3-4.7l48-48c6.3 3 13.3 4.7 20.7 4.7 26.5 0 48-21.5 48-48 0-20.9-13.4-38.7-32-45.3V112c0-8.8-7.2-16-16-16s-16 7.2-16 16v98.7c-18.6 6.6-32 24.4-32 45.3 0 7.4 1.7 14.4 4.7 20.7l-48 48c-6.3 6.2-6.3 16.4 0 22.6z" fill="#{$color}"/><path class="lexicon-icon-outline restore-border" d="M256 0C179.5 0 110.9 33.5 64 86.7V64c0-17.6-14.4-32-32-32S0 46.4 0 64v96c0 9.9 4.6 18.8 11.7 24.7 5.5 4.6 12.6 7.3 20.3 7.3h96c17.6 0 32-14.4 32-32s-14.4-32-32-32h-15.1c35.2-39.3 86.2-64 143.1-64 106 0 192 86 192 192s-86 192-192 192c-95.1 0-174.1-69.2-189.3-160H2c15.7 126.3 123.5 224 254 224 141.4 0 256-114.6 256-256S397.4 0 256 0z" fill="#{$color}"/></svg>',
 

package/src/scss/mixins/_globals.scss

@@ -398,6 +398,13 @@
 					#{$key}: #{$value};
 				}
 			}
+
+			$_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);
+			}
 		}
 	}
 }

package/src/scss/mixins/_grid.scss

@@ -229,6 +229,8 @@
 						@include clay-modal-variant($breakpoint-up);
 					} @else if ($mixin == 'clay-select-variant') {
 						@include clay-select-variant($breakpoint-up);
+					} @else if ($mixin == 'clay-slideout-variant') {
+						@include clay-slideout-variant($breakpoint-up);
 					}
 				}
 			}
@@ -263,6 +265,10 @@
 						@include clay-modal-variant($breakpoint-down);
 					} @else if ($mixin == 'clay-select-variant') {
 						@include clay-select-variant($breakpoint-down);
+					} @else if ($mixin == 'clay-slideout-variant') {
+						@include clay-slideout-variant($breakpoint-down);
+					} @else {
+						@error "The mixin, `#{$mixin}`, is not defined in clay-generate-media-breakpoints.";
 					}
 				}
 			}

package/src/scss/mixins/_sidebar.scss

@@ -490,6 +490,8 @@
 					@include clay-map-to-css($_input-group);
 				}
 			}
+
+			@include clay-map-to-css($map);
 		}
 	}
 }

package/src/scss/mixins/_slideout.scss

@@ -56,7 +56,7 @@
 
 			@if ($_sidebar) {
 				.sidebar {
-					@include clay-css($_sidebar);
+					@include clay-sidebar-variant($_sidebar);
 				}
 			}
 
@@ -146,6 +146,16 @@
 					}
 				}
 			}
+
+			$_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-slideout-variant'
+				);
+			}
 		}
 	}
 }

package/src/scss/variables/_forms.scss

@@ -695,6 +695,24 @@ $form-text: map-merge(
 		font-weight: $form-text-font-weight,
 		margin-top: $form-text-margin-top,
 		word-wrap: break-word,
+		blockquote: (
+			font-style: italic,
+			font-weight: $font-weight-normal,
+			margin-bottom: 0,
+			margin-top: 0.75rem,
+			padding-left: 0.75rem,
+			position: relative,
+			before: (
+				background-color: $secondary-l1,
+				bottom: 0,
+				content: '',
+				display: block,
+				left: 0,
+				position: absolute,
+				top: 0,
+				width: 0.125rem,
+			),
+		),
 	),
 	$form-text
 );
@@ -799,6 +817,12 @@ $input-danger: map-deep-merge(
 			box-shadow: $input-danger-focus-box-shadow,
 			color: $input-danger-focus-color,
 		),
+		focus-within: (
+			background-color: $input-danger-bg,
+			border-color: $input-danger-border-color,
+			box-shadow: $input-danger-box-shadow,
+			color: $input-danger-color,
+		),
 	),
 	$input-danger
 );
@@ -952,6 +976,12 @@ $input-warning: map-deep-merge(
 			box-shadow: $input-warning-focus-box-shadow,
 			color: $input-warning-focus-color,
 		),
+		focus-within: (
+			background-color: $input-warning-bg,
+			border-color: $input-warning-border-color,
+			box-shadow: $input-warning-box-shadow,
+			color: $input-warning-color,
+		),
 	),
 	$input-warning
 );
@@ -1105,6 +1135,12 @@ $input-success: map-deep-merge(
 			box-shadow: $input-success-focus-box-shadow,
 			color: $input-success-focus-color,
 		),
+		focus-within: (
+			background-color: $input-success-bg,
+			border-color: $input-success-border-color,
+			box-shadow: $input-success-box-shadow,
+			color: $input-success-color,
+		),
 	),
 	$input-success
 );

package/src/scss/variables/_sidebar.scss

@@ -1,7 +1,7 @@
-$sidebar-padding-bottom: 1rem !default; // 16px
-$sidebar-padding-left: 1rem !default; // 16px
-$sidebar-padding-right: 1rem !default; // 16px
-$sidebar-padding-top: 1rem !default; // 16px
+$sidebar-padding-bottom: 1rem !default;
+$sidebar-padding-left: 1.5rem !default;
+$sidebar-padding-right: 1.5rem !default;
+$sidebar-padding-top: 1rem !default;
 
 // .sidebar-header .component-title
 
@@ -82,17 +82,22 @@ $sidebar: map-deep-merge(
 		height: 100%,
 		overflow: auto,
 		-webkit-overflow-scrolling: touch,
-		focus: (
-			box-shadow: $component-focus-inset-box-shadow,
-			outline: 0,
-		),
 		sidebar-header: (
 			padding-bottom: $sidebar-padding-bottom,
 			padding-left: $sidebar-padding-left,
-			padding-right: $sidebar-padding-right,
+			padding-right: 1rem,
 			padding-top: $sidebar-padding-top,
 			component-title: $sidebar-header-component-title,
 			component-subtitle: $sidebar-header-component-subtitle,
+			autofit-row: (
+				margin-left: -0.25rem,
+				margin-right: -0.25rem,
+				width: auto,
+				autofit-col: (
+					padding-left: 0.25rem,
+					padding-right: 0.25rem,
+				),
+			),
 		),
 		sidebar-footer: (
 			padding-bottom: $sidebar-padding-bottom,
@@ -220,6 +225,14 @@ $sidebar-light: map-deep-merge(
 		border-color: $gray-300,
 		border-left-width: 1px,
 		color: $gray-900,
+		sidebar-header: (
+			background-color: inherit,
+			border: 0px solid $gray-300,
+		),
+		sidebar-footer: (
+			background-color: inherit,
+			border: 0px solid $gray-300,
+		),
 		sidebar-dd: (
 			href: (
 				color: $gray-900,
@@ -297,6 +310,10 @@ $sidebar-dark: map-deep-merge(
 	$sidebar-dark
 );
 
+$sidebar-c-slideout-start: () !default;
+
+$sidebar-c-slideout-end: () !default;
+
 $sidebar-palette: () !default;
 $sidebar-palette: map-deep-merge(
 	(

package/src/scss/variables/_slideout.scss

@@ -11,6 +11,7 @@ $c-slideout-tbar-stacked-min-width-mobile: 40px !default;
 $c-slideout-transition-in: () !default;
 $c-slideout-transition-in: map-merge(
 	(
+		overflow: hidden,
 		transition: all 0.3s ease-in-out,
 	),
 	$c-slideout-transition-in
@@ -19,6 +20,7 @@ $c-slideout-transition-in: map-merge(
 $c-slideout-transition-out: () !default;
 $c-slideout-transition-out: map-merge(
 	(
+		overflow: hidden,
 		transition: all 0.2s ease-in,
 	),
 	$c-slideout-transition-out
@@ -42,6 +44,41 @@ $c-slideout-fixed: map-merge(
 	$c-slideout-fixed
 );
 
+$c-slideout-container: () !default;
+$c-slideout-container: map-deep-merge(
+	(
+		min-height: 480px,
+		position: relative,
+	),
+	$c-slideout-container
+);
+
+$c-slideout-push-start: () !default;
+$c-slideout-push-start: map-deep-merge(
+	(
+		padding-left: $c-slideout-sidebar-width,
+		media-breakpoint-down: (
+			md: (
+				padding-left: 0,
+			),
+		),
+	),
+	$c-slideout-push-start
+);
+
+$c-slideout-push-end: () !default;
+$c-slideout-push-end: map-deep-merge(
+	(
+		padding-right: $c-slideout-sidebar-width,
+		media-breakpoint-down: (
+			md: (
+				padding-right: 0,
+			),
+		),
+	),
+	$c-slideout-push-end
+);
+
 // C Slideout Base
 
 $c-slideout: () !default;
@@ -56,15 +93,26 @@ $c-slideout: map-deep-merge(
 		sidebar: (
 			display: none,
 			flex-shrink: 0,
-			overflow: visible,
 			position: relative,
 			width: $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/variables/_stickers.scss

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