@clayui/css 3.44.2 → 3.45.0

package/src/scss/components/_treeview.scss

@@ -0,0 +1,310 @@
+.treeview {
+	@include clay-css($treeview);
+
+	.btn {
+		@include clay-button-variant(map-get($treeview, btn));
+	}
+
+	.btn-monospaced {
+		@include clay-button-variant(map-get($treeview, btn-monospaced));
+	}
+
+	.custom-control {
+		@include clay-css(map-get($treeview, custom-control));
+	}
+
+	.component-expander {
+		@include clay-button-variant(map-get($treeview, component-expander));
+
+		.lexicon-icon:not(.component-expanded-d-none) {
+			display: none;
+		}
+	}
+
+	.component-action {
+		@include clay-button-variant(map-get($treeview, component-action));
+	}
+
+	.component-icon {
+		@include clay-css(map-get($treeview, component-icon));
+
+		.lexicon-icon {
+			@include clay-css(
+				map-deep-get($treeview, component-icon, lexicon-icon)
+			);
+		}
+	}
+
+	.component-text {
+		@include clay-css(map-get($treeview, component-text));
+	}
+
+	&.show-component-expander-on-hover {
+		@include clay-css($treeview-show-component-expander-on-hover);
+
+		&:hover,
+		&.hover {
+			@include clay-css(
+				map-get($treeview-show-component-expander-on-hover, hover)
+			);
+
+			.component-expander {
+				@include clay-css(
+					map-deep-get(
+						$treeview-show-component-expander-on-hover,
+						hover,
+						component-expander
+					)
+				);
+			}
+		}
+
+		.treeview-link {
+			@include clay-css(
+				map-get(
+					$treeview-show-component-expander-on-hover,
+					treeview-link
+				)
+			);
+
+			&:focus,
+			&.focus {
+				@include clay-css(
+					map-deep-get(
+						$treeview-show-component-expander-on-hover,
+						treeview-link,
+						focus
+					)
+				);
+
+				.component-expander {
+					@include clay-css(
+						map-deep-get(
+							$treeview-show-component-expander-on-hover,
+							treeview-link,
+							focus,
+							component-expander
+						)
+					);
+				}
+			}
+		}
+
+		.component-expander {
+			@include clay-css(
+				map-get(
+					$treeview-show-component-expander-on-hover,
+					component-expander
+				)
+			);
+		}
+	}
+}
+
+.treeview-group {
+	@include clay-css(map-get($treeview, treeview-group));
+}
+
+.treeview-item {
+	@include clay-css(map-get($treeview, treeview-item));
+
+	&:last-child {
+		@include clay-css(map-deep-get($treeview, treeview-item, last-child));
+	}
+}
+
+.treeview-link {
+	@include clay-link(map-get($treeview, treeview-link));
+
+	&.treeview-dropping-bottom {
+		@include clay-link(
+			map-deep-get($treeview, treeview-link, treeview-dropping-bottom)
+		);
+	}
+
+	&.treeview-dropping-middle {
+		@include clay-link(
+			map-deep-get($treeview, treeview-link, treeview-dropping-middle)
+		);
+	}
+
+	&.treeview-dropping-top {
+		@include clay-link(
+			map-deep-get($treeview, treeview-link, treeview-dropping-top)
+		);
+	}
+
+	&.hover,
+	&:hover,
+	&.focus,
+	&:focus {
+		.component-action {
+			display: block;
+		}
+	}
+
+	&.show,
+	&[aria-expanded='true'] {
+		.component-expander {
+			.component-expanded-d-none {
+				display: none;
+			}
+
+			.lexicon-icon:not(.component-expanded-d-none) {
+				display: inline-block;
+			}
+		}
+	}
+}
+
+.treeview-nested-margins {
+	@include clay-css($treeview-nested-margins);
+
+	.treeview-group {
+		@include clay-css(map-get($treeview-nested-margins, treeview-group));
+
+		.treeview-item {
+			@include clay-css(
+				map-deep-get(
+					$treeview-nested-margins,
+					treeview-group,
+					treeview-item
+				)
+			);
+		}
+	}
+}
+
+.treeview-item-dragging {
+	@include clay-css(map-get($treeview, treeview-item-dragging));
+
+	.treeview-link {
+		@include clay-link(
+			map-deep-get($treeview, treeview-item-dragging, treeview-link)
+		);
+	}
+}
+
+.treeview-dragging {
+	@include clay-css(map-get($treeview, treeview-dragging));
+}
+
+// Treeview Variants
+
+.treeview-light {
+	@include clay-css($treeview-light);
+
+	.btn {
+		@include clay-button-variant(map-get($treeview-light, btn));
+	}
+
+	.btn-monospaced {
+		@include clay-button-variant(map-get($treeview-light, btn-monospaced));
+	}
+
+	.component-expander {
+		@include clay-button-variant(
+			map-get($treeview-light, component-expander)
+		);
+
+		&.btn-secondary {
+			@include clay-button-variant(
+				map-deep-get($treeview-light, component-expander, btn-secondary)
+			);
+		}
+	}
+
+	.custom-control {
+		@include clay-css(map-get($treeview-light, custom-control));
+	}
+
+	.treeview-group {
+		@include clay-css(map-get($treeview-light, treeview-group));
+	}
+
+	.treeview-item {
+		@include clay-css(map-get($treeview-light, treeview-item));
+
+		&:last-child {
+			@include clay-css(
+				map-deep-get($treeview-light, treeview-item, last-child)
+			);
+		}
+	}
+
+	.treeview-link {
+		@include clay-link(map-get($treeview-light, treeview-link));
+	}
+
+	.component-action {
+		@include clay-button-variant(
+			map-get($treeview-light, component-action)
+		);
+	}
+
+	.component-icon {
+		@include clay-css(map-get($treeview-light, component));
+	}
+
+	.component-text {
+		@include clay-css(map-get($treeview-light, component));
+	}
+}
+
+.treeview-dark {
+	@include clay-css($treeview-dark);
+
+	.btn {
+		@include clay-button-variant(map-get($treeview-dark, btn));
+	}
+
+	.btn-monospaced {
+		@include clay-button-variant(map-get($treeview-dark, btn-monospaced));
+	}
+
+	.component-expander {
+		@include clay-button-variant(
+			map-get($treeview-dark, component-expander)
+		);
+
+		&.btn-secondary {
+			@include clay-button-variant(
+				map-deep-get($treeview-dark, component-expander, btn-secondary)
+			);
+		}
+	}
+
+	.custom-control {
+		@include clay-css(map-get($treeview-dark, custom-control));
+	}
+
+	.treeview-group {
+		@include clay-css(map-get($treeview-dark, treeview-group));
+	}
+
+	.treeview-item {
+		@include clay-css(map-get($treeview-dark, treeview-item));
+
+		&:last-child {
+			@include clay-css(
+				map-deep-get($treeview-dark, treeview-item, last-child)
+			);
+		}
+	}
+
+	.treeview-link {
+		@include clay-link(map-get($treeview-dark, treeview-link));
+	}
+
+	.component-action {
+		@include clay-button-variant(map-get($treeview-dark, component-action));
+	}
+
+	.component-icon {
+		@include clay-css(map-get($treeview-dark, component-icon));
+	}
+
+	.component-text {
+		@include clay-css(map-get($treeview-dark, component-text));
+	}
+}

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

@@ -194,6 +194,8 @@
 
 	'copy': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-body" d="M412 128h-60V68c0-37.4-30.6-68-68-68H100C62.6 0 32 30.6 32 68v248c0 37.4 30.6 68 68 68h60v60c0 37.4 30.6 68 68 68h184c37.4 0 68-30.6 68-68V196c0-37.4-30.6-68-68-68z" fill="none"/><path class="lexicon-icon-outline" d="M412 128h-60V68c0-37.4-30.6-68-68-68H100C62.6 0 32 30.6 32 68v248c0 37.4 30.6 68 68 68h60v60c0 37.4 30.6 68 68 68h184c37.4 0 68-30.6 68-68V196c0-37.4-30.6-68-68-68zm-252 68v124H96V64h192v64h-60c-37.4 0-68 30.6-68 68zm256 252H224V192h192v256z" fill="#{$color}"/></svg>',
 
+	'corner-radius': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline corner-radius-bottom-right" d="M448 384c0 35.3-28.7 64-64 64h-64v64h64c70.7 0 128-57.3 128-128v-64h-64v64z" fill="#{$color}"/><path class="lexicon-icon-outline corner-radius-top-right" d="M384 0h-64v64h64c35.3 0 64 28.7 64 64v64h64v-64C512 57.3 454.7 0 384 0z" fill="#{$color}"/><path class="lexicon-icon-outline corner-radius-top-left" d="M64 128c0-35.3 28.7-64 64-64h64V0h-64C57.3 0 0 57.3 0 128v64h64v-64z" fill="#{$color}"/><path class="lexicon-icon-outline corner-radius-bottom-left" d="M64 384v-64H0v64c0 70.7 57.3 128 128 128h64v-64h-64c-35.3 0-64-28.7-64-64z" fill="#{$color}"/></svg>',
+
 	'credit-card': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-credit-card-border" d="M448 32.1 64 32C32 32 0 64.1 0 96v320.1c0 32 32 64 64 64h384c32 0 64-32 64-64V96c0-31.9-32-63.9-64-63.9zm0 384H64v-224h384v224zm0-288H64V96h384v32.1z" fill="#{$color}"/><path class="lexicon-icon-outline lx-credit-card-text" d="M304 288.1h64c62.7 0 63.3 96 0 96h-64c-63.3 0-64.3-96 0-96z" fill="#{$color}"/></svg>',
 
 	'cursor': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M468.3 273.8 110.6 5.9c-20.2-15.1-48.7.8-46.5 25.9l40.4 453.6c2.4 27 37.2 36.4 52.8 14.2l106.5-151c5.1-7.2 13.2-11.8 22-12.3l166.7-10c27.2-1.7 37.5-36.2 15.8-52.5z" fill="#{$color}"/></svg>',
@@ -412,6 +414,10 @@
 
 	'folder': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M448 128h-96L241.1 44.8C230 36.5 216.5 32 202.7 32H64C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V192c0-35.3-28.7-64-64-64z" fill="#{$color}"/></svg>',
 
+	'font-family': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline font-family-capital-a" d="M264.4 375.1 175.6 126c-15.3-40.4-69.5-39.4-84.8 0l-89 249.2c-11.7 34.4 38.6 53.1 52.1 17.8l20.5-62.7h117.4l20.5 62.6c14.1 36.5 63.6 15.4 52.1-17.8zM88.6 286.7l43.9-134.4h1.1l43.9 134.4H88.6z" fill="#{$color}"/><path class="lexicon-icon-outline font-family-lowercase-a" d="M316.1 229.9c-8.5 34.1 46.5 36.9 49.9 12.4 5.8-37.3 100.5-52.5 90.3 25.1C176.5 251 345 517.6 456.4 374c-6.9 47.6 55.6 44.7 55.6 11.2V247c.1-96.9-170.5-108.8-195.9-17.1zm43.5 110.7c.8-33.3 32-39.8 96.9-36.1 5.5 88-96.9 82.2-96.9 36.1z" fill="#{$color}"/></svg>',
+
+	'font-size': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline font-size-ns-resize" d="M455.4 348.5 441 362.9V151l14.4 13.6c33.9 29.2 75.9-17.1 46.9-46.2l-62.9-61.1c-12.9-12.5-33.7-12.5-46.6 0L330 118.5c-29.9 31.6 13.6 73.9 46.9 45l14.4-14.4V361l-14.4-13.6c-30.7-27.9-77.4 12.7-46.9 46.2l62.9 61.1c12.9 12.5 33.7 12.5 46.6 0l62.9-61.1c29.3-30.6-14.8-75.2-47-45.1z" fill="#{$color}"/><path class="lexicon-icon-outline font-size-lowercase-a" d="M14.8 183.6C4.9 223.4 69 226.7 73 198.1c6.8-43.5 117.2-61.3 105.4 29.3-326.5-19.2-129.9 291.8 0 124.3-8 55.5 64.9 52.2 64.9 13.1V203.6c.1-113.1-198.9-127-228.5-20zm50.7 129.1c.9-38.9 37.3-46.4 113-42.1 6.5 102.7-113 95.9-113 42.1z" fill="#{$color}"/></svg>',
+
 	'form-extensions': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-form-extensions-border-1" fill="#{$color}" d="M256 0h64v64h-64z"/><circle class="lexicon-icon-outline lx-form-extensions-circle-1" transform="rotate(-11.976 127.97 159.967)" cx="128" cy="160" fill="#{$color}" r="32"/><path class="lexicon-icon-outline lx-form-extensions-rectangle-1" d="M224 192h160c17.7 0 32-14.3 32-32s-14.3-32-32-32H224c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-form-extensions-rectangle-2" d="M384 224H224c-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}"/><circle class="lexicon-icon-outline lx-form-extensions-circle-2" transform="rotate(-61.894 128.006 255.995)" cx="128" cy="256" fill="#{$color}" r="32"/><path class="lexicon-icon-outline lx-form-extensions-rectangle-3" d="M416 354c0-17.7-14.3-32-32-32H224c-17.7 0-32 14.3-32 32s14.3 32 32 32h160c17.7 0 32-14.3 32-32z" fill="#{$color}"/><circle class="lexicon-icon-outline lx-form-extensions-circle-3" cx="128" cy="354" r="32" fill="#{$color}"/><path class="lexicon-icon-outline lx-form-extensions-border-2" fill="#{$color}" d="M448 192h64v128h-64z"/><path class="lexicon-icon-outline lx-form-extensions-border-3" fill="#{$color}" d="M256 448h64v64h-64z"/><path class="lexicon-icon-outline lx-form-extensions-border-4" d="M64 64h128V0H64C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h128v-64H64V64z" fill="#{$color}"/><path class="lexicon-icon-outline lx-form-extensions-border-5" d="M448 448h-64v64h64c35.3 0 64-28.7 64-64v-64h-64v64z" fill="#{$color}"/><path class="lexicon-icon-outline lx-form-extensions-border-6" d="M448 0h-64v64h64v64h64V64c0-35.3-28.7-64-64-64z" fill="#{$color}"/></svg>',
 
 	'format': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="format-roller lexicon-icon-outline" d="M416 192H192c-35.3 0-64-28.7-64-64V64c0-35.3 28.7-64 64-64h224c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64z" fill="#{$color}"/><path class="format-handle lexicon-icon-outline" d="M320 320v-64c0-17.7-14.3-32-32-32H96V96c0-43-64-43-64 0v160c0 17.7 14.3 32 32 32h192v32c-17.7 0-32 14.3-32 32v160h128V352c0-17.7-14.3-32-32-32z" fill="#{$color}"/></svg>',
@@ -668,6 +674,8 @@
 
 	'separator': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline separator-content-2" d="M416 448H96c-17.7 0-32-14.3-32-32v-32c0-17.7 14.3-32 32-32h320c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32z" fill="#{$color}"/><path class="lexicon-icon-outline separator-divider" d="M464 272H48c-21.2 0-20.5-32 0-32h416c20.8 0 21.8 32 0 32z" fill="#{$color}"/><path class="lexicon-icon-outline separator-content-1" d="M416 160H96c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h320c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32z" fill="#{$color}"/></svg>',
 
+	'shadow': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M453.4 51.3C361.2-33.7 187.7-18 136.6 136 14.2 172.8-55.8 335.2 56.4 455.4c126.2 118 290.4 32 319.5-79.9 150.5-52.9 175.9-229 77.5-324.2zM192.3 191.6c0-168.8 256-168.3 256 0 0 170.7-256 168.5-256 0z" fill="#{$color}"/></svg>',
+
 	'share-alt': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M397.255 402.745a63.725 63.725 0 0 0-20.334-13.702C369.01 385.697 360.625 384 352 384s-17.01 1.697-24.921 5.043a64.4 64.4 0 0 0-7.587 3.822L215.135 288.508a64.019 64.019 0 0 0 3.822-7.587c3.346-7.911 5.042-16.296 5.042-24.922s-1.696-17.011-5.042-24.922a64.17 64.17 0 0 0-3.822-7.587l104.357-104.357a64.094 64.094 0 0 0 7.587 3.822c7.911 3.346 16.296 5.043 24.921 5.043s17.01-1.697 24.921-5.043c7.625-3.225 14.466-7.835 20.334-13.703s10.478-12.709 13.702-20.334C414.303 81.007 416 72.622 416 63.996s-1.697-17.011-5.043-24.922c-3.225-7.625-7.835-14.466-13.702-20.334S384.546 8.263 376.921 5.037C369.01 1.691 360.625-.006 352-.006s-17.01 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.334C289.697 46.985 288 55.37 288 63.996s1.697 17.011 5.043 24.922a64.324 64.324 0 0 0 3.822 7.587L192.508 200.862a63.943 63.943 0 0 0-7.587-3.822c-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.043a64.324 64.324 0 0 0 7.587-3.822l104.357 104.357a64.094 64.094 0 0 0-3.822 7.587c-3.346 7.911-5.043 16.296-5.043 24.921s1.697 17.01 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.01-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.01-5.043-24.921a63.743 63.743 0 0 0-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 32zm192 192c-17.673 0-32-14.327-32-32s14.327-32 32-32 32 14.327 32 32-14.327 32-32 32z" fill="#{$color}"/></svg>',
 
 	'share': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="m326.2 323.3-107.6-53.8c2.7-5.9 2.4-19.9 0-27.1l107.6-53.8c77.2 69.3 185.8 13 185.8-78.9C512 49.2 462.8 0 402.3 0S287 51.3 293.4 123.3l-107.6 53.8C113.3 108 0 161.7 0 256c0 100.3 118.3 143.7 185.8 78.9l107.6 53.8C285 460.7 341.8 512 402.3 512S512 462.8 512 402.3c0-88-105.7-150.3-185.8-79zm112.7-213.6c0 49-73.1 47.6-73.1 0-.1-49.4 73.1-47.7 73.1 0zM73.1 256c0-49 73.1-49 73.1 0 .1 47.3-73.1 49-73.1 0zm292.6 146.3c0-48.6 73.1-49 73.1 0 .1 48.7-73.1 47.4-73.1 0z" fill="#{$color}"/></svg>',

package/src/scss/variables/_forms.scss

@@ -310,10 +310,11 @@ $form-control-label-size: () !default;
 $form-control-label-size: map-deep-merge(
 	(
 		border-width: 0.0625rem,
-		height: 1.25rem,
+		height: auto,
 		margin-bottom: 0.25rem,
 		margin-right: 0.5rem,
 		margin-top: 0.25rem,
+		min-height: 1.25rem,
 	),
 	$form-control-label-size
 );
@@ -322,7 +323,7 @@ $form-control-label-size: map-deep-merge(
 
 $form-control-tag-group-padding-y: (
 		$input-height - $input-border-bottom-width - $input-border-top-width -
-			map-get($form-control-label-size, height) -
+			map-get($form-control-label-size, min-height) -
 			(map-get($form-control-label-size, margin-bottom)) -
 			(map-get($form-control-label-size, margin-top))
 	) * 0.5 !default;

package/src/scss/variables/_links.scss

@@ -285,3 +285,20 @@ $component-action: map-deep-merge(
 	),
 	$component-action
 );
+
+$component-text: () !default;
+
+$component-icon: () !default;
+$component-icon: map-deep-merge(
+	(
+		align-items: center,
+		display: inline-flex,
+		height: 32px,
+		justify-content: center,
+		width: 32px,
+		lexicon-icon: (
+			margin-top: 0,
+		),
+	),
+	$component-icon
+);

package/src/scss/variables/_treeview.scss

@@ -0,0 +1,222 @@
+$treeview: () !default;
+$treeview: map-merge(
+	(
+		display: flex,
+		flex-direction: column,
+		font-size: 14px,
+		list-style: none,
+		margin-bottom: 0,
+		padding: 2px 0,
+		btn-monospaced: (
+			font-size: 14px,
+			height: 24px,
+			width: 24px,
+			focus: (
+				box-shadow: $component-focus-inset-box-shadow,
+			),
+		),
+		custom-control: (
+			margin-left: 4px,
+			margin-right: 4px,
+			margin-top: 1.5px,
+		),
+		treeview-dragging: (
+			background-color: $white,
+			border-color: $primary-l1,
+			border-radius: $border-radius-sm,
+			border-style: solid,
+			border-width: 1px,
+			display: inline-block,
+			font-size: 10px,
+			font-weight: $font-weight-semi-bold,
+			padding: 4px 12px,
+			text-transform: uppercase,
+		),
+		treeview-group: (
+			display: flex,
+			flex-direction: column,
+			list-style: none,
+			margin-bottom: 0,
+			padding-left: 0,
+		),
+		treeview-item: (
+			word-wrap: break-word,
+		),
+		treeview-item-dragging: (
+			cursor: $disabled-cursor,
+			opacity: 0.4,
+			treeview-link: (
+				background-color: transparent,
+				border-color: transparent,
+				box-shadow: none,
+			),
+		),
+		treeview-link: (
+			cursor: pointer,
+			display: block,
+			border-color: transparent,
+			border-style: solid,
+			border-width: 1px,
+			margin-bottom: 2px,
+			margin-top: 2px,
+			min-width: 100%,
+			padding: 0,
+			position: relative,
+			user-select: none,
+			treeview-dropping-bottom: (
+				box-shadow: 0 2px 0 0 $primary-l1,
+			),
+			treeview-dropping-middle: (
+				background-color: $primary-l3,
+				border-color: $primary-l1,
+			),
+			treeview-dropping-top: (
+				box-shadow: 0 -2px 0 0 $primary-l1,
+			),
+			hover: (
+				text-decoration: none,
+			),
+			focus: (
+				box-shadow: $component-focus-inset-box-shadow,
+				outline: 0,
+			),
+		),
+		component-action: (
+			display: none,
+			margin-left: 2px,
+			margin-right: 2px,
+			hover: (
+				background-color: transparent,
+				color: $secondary,
+			),
+			focus: (
+				color: $secondary,
+			),
+			active: (
+				background-color: transparent,
+			),
+		),
+		component-icon: (
+			display: inline,
+			height: auto,
+			margin-left: 4px,
+			margin-right: 4px,
+			width: auto,
+		),
+		component-text: (
+			padding-bottom: 1.5px,
+			padding-left: 4px,
+			padding-top: 1.5px,
+			user-select: auto,
+		),
+	),
+	$treeview
+);
+
+$treeview-nested-margins: () !default;
+$treeview-nested-margins: map-deep-merge(
+	(
+		treeview-group: (
+			treeview-item: (
+				margin-left: 24px,
+			),
+		),
+	),
+	$treeview-nested-margins
+);
+
+$treeview-show-component-expander-on-hover: () !default;
+$treeview-show-component-expander-on-hover: map-deep-merge(
+	(
+		hover: (
+			component-expander: (
+				opacity: 1,
+				transition: opacity ease-in-out 600ms,
+			),
+		),
+		component-expander: (
+			opacity: 0,
+			transition: opacity ease-in-out 450ms,
+		),
+		treeview-link: (
+			focus: (
+				component-expander: (
+					opacity: 1,
+					transition: none,
+				),
+			),
+		),
+	),
+	$treeview-show-component-expander-on-hover
+);
+
+// Variants
+
+$treeview-light: () !default;
+$treeview-light: map-deep-merge(
+	(
+		component-expander: (
+			color: $secondary,
+			hover: (
+				color: $primary,
+			),
+			btn-secondary: (
+				background-color: $white,
+			),
+		),
+		treeview-link: (
+			color: $gray-600,
+			hover: (
+				background-color: $gray-100,
+				color: $gray-900,
+			),
+			active: (
+				background-color: $gray-200,
+				color: $gray-900,
+			),
+			active-class: (
+				background-color: $gray-200,
+				color: $gray-900,
+			),
+			show: (
+				background-color: null,
+				color: null,
+			),
+		),
+	),
+	$treeview-light
+);
+
+$treeview-dark: () !default;
+$treeview-dark: map-deep-merge(
+	(
+		component-expander: (
+			color: $secondary-l1,
+			hover: (
+				color: $primary-l1,
+			),
+		),
+		treeview-link: (
+			color: $secondary-l1,
+			hover: (
+				background-color: rgba($white, 0.04),
+			),
+			active-class: (
+				background-color: rgba($white, 0.06),
+				color: $white,
+			),
+			disabled: (
+				background-color: transparent,
+				color: rgba($secondary-l1, 0.04),
+			),
+			show: (
+				background-color: null,
+				color: null,
+			),
+		),
+		component-action: (
+			color: $secondary-l1,
+		),
+	),
+	$treeview-dark
+);