@clayui/css 3.160.0 → 3.162.0

package/src/scss/cadmin/components/_focus-ring.scss

@@ -0,0 +1,74 @@
+$cadmin-focus-ring-animation-name: clay-cadmin-focus-ring !default;
+$cadmin-focus-ring-animation-duration: 1s !default;
+$cadmin-focus-ring-animation-timing-function: cubic-bezier(
+	0.2,
+	0,
+	0,
+	1
+) !default;
+$cadmin-focus-ring-animation: $cadmin-focus-ring-animation-name
+	$cadmin-focus-ring-animation-duration
+	$cadmin-focus-ring-animation-timing-function !default;
+
+$cadmin-focus-ring-animation-from-box-shadow:
+	0 0 0 4px $cadmin-white,
+	0 0 0 12px $cadmin-primary-l2 !default;
+$cadmin-focus-ring-animation-to-box-shadow:
+	0 0 0 2px $cadmin-white,
+	0 0 0 4px $cadmin-primary-l0 !default;
+
+@at-root {
+	@keyframes #{$cadmin-focus-ring-animation-name} {
+		0%,
+		50% {
+			box-shadow: $cadmin-focus-ring-animation-from-box-shadow;
+		}
+
+		100% {
+			box-shadow: $cadmin-focus-ring-animation-to-box-shadow;
+		}
+	}
+
+	@if $cadmin-enable-prefers-reduced-motion-media-query {
+		@media (prefers-reduced-motion: reduce) {
+			@keyframes #{$cadmin-focus-ring-animation-name} {
+				0%,
+				60% {
+					box-shadow: $cadmin-focus-ring-animation-from-box-shadow;
+				}
+
+				61% {
+					box-shadow: $cadmin-focus-ring-animation-to-box-shadow;
+				}
+			}
+		}
+	}
+
+	html#{$cadmin-selector} .c-prefers-focus-ring .cadmin {
+		.custom-control-input:focus-visible ~ .custom-control-label::after,
+		.toggle-switch-check:focus-visible ~ .toggle-switch-bar::before,
+		:focus-visible:not(.custom-control-input):not(.toggle-switch-check),
+		.focus {
+			animation: $cadmin-focus-ring-animation;
+			box-shadow: $cadmin-focus-ring-animation-to-box-shadow;
+		}
+
+		:focus-visible:not(.toggle-switch-check):not(.custom-control-input),
+		.focus {
+			position: relative;
+			z-index: 1;
+		}
+	}
+
+	html#{$cadmin-selector} .c-prefers-focus-ring.c-tab-returning .cadmin,
+	html#{$cadmin-selector}
+		.c-prefers-reduced-motion.c-prefers-focus-ring
+		.cadmin {
+		.custom-control-input:focus-visible ~ .custom-control-label::after,
+		.toggle-switch-check:focus-visible ~ .toggle-switch-bar::before,
+		:focus-visible:not(.custom-control-input):not(.toggle-switch-check),
+		.focus {
+			animation: none;
+		}
+	}
+}

package/src/scss/cadmin/components/_forms.scss

@@ -698,6 +698,8 @@ textarea.form-control-sm,
 	}
 
 	label {
+		font-size: $cadmin-form-group-sm-input-label-font-size;
+		line-height: $cadmin-form-group-sm-input-label-line-height;
 		margin-bottom: $cadmin-form-group-sm-input-label-margin-bottom;
 	}
 

package/src/scss/cadmin/components/_menubar.scss

@@ -25,6 +25,10 @@
 		@include clay-menubar-vertical-variant(
 			$cadmin-menubar-vertical-transparent-md
 		);
+
+		.nav-link * {
+			letter-spacing: normal;
+		}
 	}
 
 	&.menubar-decorated {
@@ -63,6 +67,10 @@
 		@include clay-menubar-vertical-variant(
 			$cadmin-menubar-vertical-transparent-lg
 		);
+
+		.nav-link * {
+			letter-spacing: normal;
+		}
 	}
 
 	&.menubar-decorated {

package/src/scss/cadmin/components/_resizer.scss

@@ -1,11 +1,26 @@
 .c-horizontal-resizer {
 	@include clay-css($cadmin-c-horizontal-resizer);
 
-	&:hover {
-		@include clay-css(map-get($cadmin-c-horizontal-resizer, hover));
+	&::before {
+		@include clay-css(map-get($cadmin-c-horizontal-resizer, before));
 	}
 
-	&:focus {
-		@include clay-css(map-get($cadmin-c-horizontal-resizer, focus));
+	&:hover::before {
+		@include clay-css(
+			map-deep-get($cadmin-c-horizontal-resizer, hover, before)
+		);
 	}
+
+	&:focus-visible::before {
+		@include clay-css(
+			map-deep-get($cadmin-c-horizontal-resizer, focus, before)
+		);
+	}
+}
+
+.c-horizontal-resizer-end {
+	left: 0px;
+	margin-left: -0.25rem;
+	margin-right: 0px;
+	right: auto;
 }

package/src/scss/cadmin/variables/_breadcrumbs.scss

@@ -134,6 +134,7 @@ $cadmin-breadcrumb-link: map-deep-merge(
 		border-radius: 1px,
 		color: $cadmin-breadcrumb-link-color,
 		display: block,
+		line-height: 1.5rem,
 		text-decoration: $cadmin-breadcrumb-link-text-decoration,
 		text-transform: $cadmin-breadcrumb-text-transform,
 		transition: box-shadow 0.15s ease-in-out,
@@ -159,6 +160,8 @@ $cadmin-breadcrumb-toggle: () !default;
 $cadmin-breadcrumb-toggle: map-merge(
 	(
 		color: $cadmin-breadcrumb-link-color,
+		flex-shrink: 0,
+		margin-top: $cadmin-breadcrumb-padding-y,
 	),
 	$cadmin-breadcrumb-toggle
 );
@@ -166,7 +169,6 @@ $cadmin-breadcrumb-toggle: map-merge(
 $cadmin-breadcrumb-bar: () !default;
 $cadmin-breadcrumb-bar: map-deep-merge(
 	(
-		align-items: center,
 		display: flex,
 	),
 	$cadmin-breadcrumb-bar

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

@@ -616,7 +616,9 @@ $cadmin-form-group-sm-margin-bottom: 16px !default; // 16px
 
 $cadmin-form-group-sm-margin-bottom-mobile: null !default;
 
-$cadmin-form-group-sm-input-label-margin-bottom: 3px !default; // 3px
+$cadmin-form-group-sm-input-label-font-size: 12px !default; // 12px
+$cadmin-form-group-sm-input-label-line-height: 1.5 !default; // 150%
+$cadmin-form-group-sm-input-label-margin-bottom: 2px !default; // 2px
 
 $cadmin-form-group-sm-item-label-spacer: 25px !default; // 25px
 

package/src/scss/cadmin/variables/_reorder.scss

@@ -44,6 +44,7 @@ $cadmin-clay-reorder-underlay-focus: map-deep-merge(
 	(
 		background-color: $cadmin-input-focus-bg,
 		border-color: $cadmin-input-focus-border-color,
+		box-shadow: $cadmin-input-focus-box-shadow,
 	),
 	$cadmin-clay-reorder-underlay-focus
 );

package/src/scss/cadmin/variables/_resizer.scss

@@ -8,15 +8,28 @@ $cadmin-c-horizontal-resizer: map-merge(
 		position: absolute,
 		right: 0px,
 		top: 0px,
-		width: 0.5rem,
+		width: 0.75rem,
 		z-index: 10,
 
+		before: (
+			bottom: 0px,
+			content: '',
+			left: 0.25rem,
+			position: absolute,
+			right: 0.25rem,
+			top: 0px,
+		),
+
 		hover: (
-			background-color: $cadmin-primary-l0,
+			before: (
+				background-color: $cadmin-primary-l0,
+			),
 		),
 
 		focus: (
-			background-color: $cadmin-primary-l0,
+			before: (
+				background-color: $cadmin-primary-l0,
+			),
 		),
 	),
 	$cadmin-c-horizontal-resizer

package/src/scss/cadmin.scss

@@ -86,6 +86,7 @@ html#{$cadmin-selector} {
 		@import 'cadmin/components/_utilities-functional-important';
 
 		@import 'cadmin/components/_loaders';
+		@import 'cadmin/components/_focus-ring';
 
 		@import 'cadmin/components/_print';
 	}

package/src/scss/components/_focus-ring.scss

@@ -0,0 +1,64 @@
+$focus-ring-animation-name: clay-focus-ring !default;
+$focus-ring-animation-duration: 1s !default;
+$focus-ring-animation-timing-function: cubic-bezier(0.2, 0, 0, 1) !default;
+$focus-ring-animation: $focus-ring-animation-name $focus-ring-animation-duration
+	$focus-ring-animation-timing-function !default;
+
+$focus-ring-animation-from-box-shadow:
+	0 0 0 0.25rem $white,
+	0 0 0 0.75rem $primary-l2 !default;
+$focus-ring-animation-to-box-shadow:
+	0 0 0 0.125rem $white,
+	0 0 0 0.25rem $primary-l0 !default;
+
+@keyframes #{$focus-ring-animation-name} {
+	0%,
+	50% {
+		box-shadow: $focus-ring-animation-from-box-shadow;
+	}
+
+	100% {
+		box-shadow: $focus-ring-animation-to-box-shadow;
+	}
+}
+
+@if $enable-prefers-reduced-motion-media-query {
+	@media (prefers-reduced-motion: reduce) {
+		@keyframes #{$focus-ring-animation-name} {
+			0%,
+			60% {
+				box-shadow: $focus-ring-animation-from-box-shadow;
+			}
+
+			61% {
+				box-shadow: $focus-ring-animation-to-box-shadow;
+			}
+		}
+	}
+}
+
+.c-prefers-focus-ring {
+	.custom-control-input:focus-visible ~ .custom-control-label::after,
+	.toggle-switch-check:focus-visible ~ .toggle-switch-bar::before,
+	:focus-visible:not(.custom-control-input):not(.toggle-switch-check),
+	.focus {
+		animation: $focus-ring-animation;
+		box-shadow: $focus-ring-animation-to-box-shadow;
+	}
+
+	:focus-visible:not(.toggle-switch-check):not(.custom-control-input),
+	.focus {
+		position: relative;
+		z-index: 1;
+	}
+
+	&.c-tab-returning,
+	&.c-prefers-reduced-motion {
+		.custom-control-input:focus-visible ~ .custom-control-label::after,
+		.toggle-switch-check:focus-visible ~ .toggle-switch-bar::before,
+		:focus-visible:not(.custom-control-input):not(.toggle-switch-check),
+		.focus {
+			animation: none;
+		}
+	}
+}

package/src/scss/components/_forms.scss

@@ -810,6 +810,8 @@ textarea.form-control-sm,
 	}
 
 	label {
+		font-size: $form-group-sm-input-label-font-size;
+		line-height: $form-group-sm-input-label-line-height;
 		margin-bottom: $form-group-sm-input-label-margin-bottom;
 	}
 

package/src/scss/components/_keyboard-arrows-indicator.scss

@@ -0,0 +1,82 @@
+// Keyboard arrows indicator
+//
+// A visual hint showing which arrow keys move focus inside a component. The
+// four directional keys are laid out in the inverted-T arrangement found on
+// physical keyboards. Keys not part of the active direction are rendered
+// muted so the layout stays recognizable.
+
+.clay-keyboard-arrows-indicator {
+	column-gap: 0.15em;
+	display: inline-grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: 1fr 1fr;
+	row-gap: 0.15em;
+}
+
+.clay-keyboard-arrows-indicator-md {
+	font-size: 1rem; // 16px keycaps
+}
+
+.clay-keyboard-arrows-indicator-sm {
+	font-size: 0.75rem; // 12px keycaps
+}
+
+.clay-keyboard-arrows-indicator-key {
+	display: inline-flex;
+
+	.lexicon-icon {
+		height: 1em;
+		margin-top: 0;
+		width: 1em;
+	}
+}
+
+.clay-keyboard-arrows-indicator-key-up {
+	grid-column: 2;
+	grid-row: 1;
+}
+
+.clay-keyboard-arrows-indicator-key-left {
+	grid-column: 1;
+	grid-row: 2;
+}
+
+.clay-keyboard-arrows-indicator-key-down {
+	grid-column: 2;
+	grid-row: 2;
+}
+
+.clay-keyboard-arrows-indicator-key-right {
+	grid-column: 3;
+	grid-row: 2;
+}
+
+.clay-keyboard-arrows-indicator-key-inactive {
+	opacity: 0.25;
+}
+
+// Modifier for popup-style consumers (DropDown, Picker, Autocomplete, etc.)
+// that want the indicator pinned to the bottom-right of the popup chrome.
+// Visibility is implicit: the popup itself is conditionally rendered only
+// while open, so the indicator follows.
+
+.clay-keyboard-arrows-indicator-floating {
+	bottom: 0.25rem;
+	pointer-events: none;
+	position: absolute;
+	right: 0.5rem;
+}
+
+// Modifier for inline consumers (Table, MultiSelect, VerticalNav,
+// VerticalBar, DatePicker calendar). The indicator is hidden by default
+// and revealed only when its direct parent has `:focus-within` (i.e. the
+// consumer's focusable scope contains the focused element). Consumers
+// place the indicator as a direct child of the focusable container.
+
+.clay-keyboard-arrows-indicator-on-focus {
+	visibility: hidden;
+}
+
+:focus-within > .clay-keyboard-arrows-indicator-on-focus {
+	visibility: visible;
+}

package/src/scss/components/_menubar.scss

@@ -25,6 +25,10 @@
 		@include clay-menubar-vertical-variant(
 			$menubar-vertical-transparent-md
 		);
+
+		.nav-link * {
+			letter-spacing: normal;
+		}
 	}
 
 	&.menubar-decorated {
@@ -61,6 +65,10 @@
 		@include clay-menubar-vertical-variant(
 			$menubar-vertical-transparent-lg
 		);
+
+		.nav-link * {
+			letter-spacing: normal;
+		}
 	}
 
 	&.menubar-decorated {

package/src/scss/components/_resizer.scss

@@ -1,11 +1,22 @@
 .c-horizontal-resizer {
 	@include clay-css($c-horizontal-resizer);
 
-	&:hover {
-		@include clay-css(map-get($c-horizontal-resizer, hover));
+	&::before {
+		@include clay-css(map-get($c-horizontal-resizer, before));
 	}
 
-	&:focus {
-		@include clay-css(map-get($c-horizontal-resizer, focus));
+	&:hover::before {
+		@include clay-css(map-deep-get($c-horizontal-resizer, hover, before));
 	}
+
+	&:focus-visible::before {
+		@include clay-css(map-deep-get($c-horizontal-resizer, focus, before));
+	}
+}
+
+.c-horizontal-resizer-end {
+	left: 0rem;
+	margin-left: -0.25rem;
+	margin-right: 0rem;
+	right: auto;
 }

package/src/scss/functions/_global-functions.scss

@@ -25,12 +25,14 @@
 	$toggle-switch-padding,
 	$label-spacer-x: 8px
 ) {
-	@if ($toggle-switch-padding < 0) {
-		$toggle-switch-width: $toggle-switch-width +
-			abs($toggle-switch-padding);
+	@if not(is-css-var($toggle-switch-padding)) {
+		@if ($toggle-switch-padding < 0) {
+			$toggle-switch-width: $toggle-switch-width +
+				abs($toggle-switch-padding);
+		}
 	}
 
-	@return $toggle-switch-width + $label-spacer-x;
+	@return calc(#{$toggle-switch-width} + #{$label-spacer-x});
 }
 
 /// A function that combines two maps. It adds new key value pairs to the end of the map.

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

@@ -74,6 +74,14 @@
 
 	'arrow-join': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M493.5 210.8 301.3 18.7c-18-18-57.2-30.8-90.6-.1l-192 192.3c-31 33.3-17.9 74.4 0 90.5 50.4 45.5 143.9 144.3 192.2 192.2 31.5 31.2 74.3 17 90.5 0l192.3-192c16.2-17.4 31.5-56.6-.2-90.8zM347.9 343.7l-82 100.4c-5.4 5.4-14.3 5.4-19.7 0l-82-100.4c-8.8-8.7-2.6-23.6 9.9-23.6h50c.2-64.1 1.1-67.8-18.7-92.1L141 163.7l22.6-22.6 60.3 60.3V96h64v224h50c12.6.1 18.8 15 10 23.7z" fill="#{$color}"/></svg>',
 
+	'arrow-key-down': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" clip-rule="evenodd" d="M3.33 0h9.34A3.33 3.33 0 0 1 16 3.33v9.34A3.33 3.33 0 0 1 12.67 16H3.33A3.33 3.33 0 0 1 0 12.67V3.33A3.33 3.33 0 0 1 3.33 0Zm8.5 6.49-3.42 3.98c-.23.26-.59.26-.82 0L4.17 6.49c-.36-.43-.1-1.16.41-1.16h6.84c.51.01.77.73.41 1.16Z" fill-rule="evenodd" fill="#{$color}"/></svg>',
+
+	'arrow-key-left': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" clip-rule="evenodd" d="M3.33 0h9.34A3.33 3.33 0 0 1 16 3.33v9.34A3.33 3.33 0 0 1 12.67 16H3.33A3.33 3.33 0 0 1 0 12.67V3.33A3.33 3.33 0 0 1 3.33 0Zm6.18 11.83L5.53 8.41a.529.529 0 0 1 0-.82l3.98-3.42c.43-.36 1.16-.1 1.16.41v6.84c-.01.51-.73.77-1.16.41Z" fill-rule="evenodd" fill="#{$color}"/></svg>',
+
+	'arrow-key-right': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" clip-rule="evenodd" d="M3.33 0h9.34A3.33 3.33 0 0 1 16 3.33v9.34A3.33 3.33 0 0 1 12.67 16H3.33A3.33 3.33 0 0 1 0 12.67V3.33A3.33 3.33 0 0 1 3.33 0Zm3.16 4.17 3.98 3.42c.26.23.26.59 0 .82l-3.98 3.42c-.43.36-1.16.1-1.16-.41V4.58c.01-.51.73-.77 1.16-.41Z" fill-rule="evenodd" fill="#{$color}"/></svg>',
+
+	'arrow-key-up': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" clip-rule="evenodd" d="M3.33 0h9.34A3.33 3.33 0 0 1 16 3.33v9.34A3.33 3.33 0 0 1 12.67 16H3.33A3.33 3.33 0 0 1 0 12.67V3.33A3.33 3.33 0 0 1 3.33 0Zm8.5 9.51L8.41 5.53a.529.529 0 0 0-.82 0L4.17 9.51c-.36.43-.1 1.16.41 1.16h6.84c.51-.01.77-.73.41-1.16Z" fill-rule="evenodd" fill="#{$color}"/></svg>',
+
 	'arrow-right-full': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M255.4 0C124 0 15.9 97.8 0 224h261.2l-.1-.1-27.4-27.2c-29.8-30.3 15.6-75.5 45.5-45.3l82.2 81.9c12.6 12.5 12.6 32.8 0 45.3l-82.5 81.9c-29.3 28.7-76.2-12-45.5-45.3l27.2-27.1.2-.2H0c15.9 126.2 124 224 255.4 224C596.5 511.1 598.5 0 255.4 0z" fill="#{$color}"/></svg>',
 
 	'arrow-split': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M493.29 210.83 301.17 18.71c-24.95-24.95-65.39-24.95-90.34 0L18.71 210.83c-24.95 24.95-24.95 65.39 0 90.34l192.12 192.12c24.95 24.95 65.39 24.95 90.34 0l192.12-192.12c24.95-24.95 24.95-65.39 0-90.34zM376.81 351.82l-64.37-6.48c-6.18.03-9.24-7.41-4.84-11.81l17.65-17.64L256 246.64l-69.25 69.24 17.65 17.64c4.4 4.4 1.34 11.84-4.84 11.81l-64.37 6.48c-3.81-.02-6.94-3.14-6.95-6.96l6.48-64.37c-.03-6.18 7.41-9.24 11.81-4.84l17.64 17.64c48.25-49.75 59.03-52.6 59.89-73.12v-91.95h63.88v91.92c-.72 19.87 16.02 27.16 59.89 73.14l17.64-17.64c4.4-4.4 11.84-1.35 11.81 4.84l6.48 64.37c-.02 3.84-3.14 6.96-6.95 6.98z" fill="#{$color}"/></svg>',
@@ -118,6 +126,8 @@
 
 	'bookmarks': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" clip-rule="evenodd" d="M235.363 338.109c11.92-10.059 29.355-10.059 41.275 0l107.363 90.599V64h-256v364.708l107.362-90.599Zm20.638 66.946 113.271 95.586c31.264 26.382 78.729 4.57 78.729-36.641V64c0-35.793-28.654-64-64-64h-256C92.655 0 64 28.207 64 64v400c0 41.211 47.466 63.023 78.73 36.641l113.271-95.586Z" fill-rule="evenodd" fill="#{$color}"/></svg>',
 
+	'books-brush': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M3.992 14c0 .553-.446 1-.998 1H.998A.998.998 0 0 1 0 14v-1h3.992v1Zm4.989 0c0 .553-.446 1-.998 1H5.987a.998.998 0 0 1-.998-1v-1h3.992v1Zm4.523-8.549c.63.887 1.287 2.19 1.81 3.695 1.034 2.967.694 5.73.301 5.85-.393.118-2.409-1.931-3.442-4.898-.524-1.504-.816-2.918-.864-3.982a1.75 1.75 0 0 0 1.244.086c.427-.13.758-.407.95-.75ZM3.992 12H0V4h3.992v8Zm4.989 0H4.99V4h3.992v8Zm2.887-10.85c-.188.937.703.892 1.215 1.717.067.108.13.245.19.417.282.81-.193 1.679-1.06 1.942-.868.263-1.8-.18-2.082-.99a1.46 1.46 0 0 1-.048-.173 2.408 2.408 0 0 1 .214-1.787A2.708 2.708 0 0 1 11.898 1l-.03.15ZM2.994 1c.552 0 .998.447.998 1v1H0V2c0-.553.446-1 .998-1h1.996Zm4.989 0c.552 0 .998.447.998 1v1H4.99V2c0-.553.446-1 .998-1h1.996Z" fill="#{$color}"/></svg>',
+
 	'books': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><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>',
 
 	'border-style': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline border-style-rectangle-1" d="M64.001 96c-17.673 0-32 14.327-32 32 0 17.673 14.327 32 32 32h384c17.674 0 32-14.327 32-32 0-17.673-14.326-32-32-32h-384Z" fill="#{$color}"/><path class="lexicon-icon-outline border-style-rectangle-2" d="M64.001 224c-17.673 0-32 14.327-32 32 0 17.673 14.327 32 32 32h128c17.674 0 32-14.327 32-32 0-17.673-14.326-32-32-32h-128Z" fill="#{$color}"/><path class="lexicon-icon-outline border-style-rectangle-3" d="M32.002 384c0-17.673 14.326-32 32-32H128c17.674 0 32 14.327 32 32 0 17.673-14.326 32-32 32h-64c-17.673 0-32-14.327-32-32Z" fill="#{$color}"/><path class="lexicon-icon-outline border-style-rectangle-4" d="M320.001 224c-17.673 0-32 14.327-32 32 0 17.673 14.327 32 32 32h128c17.674 0 32-14.327 32-32 0-17.673-14.326-32-32-32h-128Z" fill="#{$color}"/><path class="lexicon-icon-outline border-style-rectangle-5" d="M192.001 384c0-17.673 14.327-32 32-32h64c17.674 0 32 14.327 32 32 0 17.673-14.326 32-32 32h-64c-17.673 0-32-14.327-32-32Z" fill="#{$color}"/><path class="lexicon-icon-outline border-style-rectangle-6" d="M384.001 352c-17.673 0-32 14.327-32 32 0 17.673 14.327 32 32 32h64c17.674 0 32-14.327 32-32 0-17.673-14.326-32-32-32h-64Z" fill="#{$color}"/></svg>',

package/src/scss/variables/_breadcrumbs.scss

@@ -47,7 +47,7 @@ $breadcrumb-active-color: $gray-600 !default;
 $breadcrumb-active-font-weight: null !default;
 
 $breadcrumb-item: () !default;
-$breadcrumb-item: map-merge(
+$breadcrumb-item: map-deep-merge(
 	(
 		font-size: $breadcrumb-font-size,
 		font-weight: $breadcrumb-font-weight,
@@ -132,6 +132,7 @@ $breadcrumb-link: map-deep-merge(
 	(
 		color: $breadcrumb-link-color,
 		display: block,
+		line-height: 1.5rem,
 		text-decoration: $breadcrumb-link-text-decoration,
 		text-transform: $breadcrumb-text-transform,
 
@@ -154,6 +155,8 @@ $breadcrumb-toggle: () !default;
 $breadcrumb-toggle: map-merge(
 	(
 		color: $breadcrumb-link-color,
+		flex-shrink: 0,
+		margin-top: $breadcrumb-padding-y,
 	),
 	$breadcrumb-toggle
 );
@@ -161,7 +164,6 @@ $breadcrumb-toggle: map-merge(
 $breadcrumb-bar: () !default;
 $breadcrumb-bar: map-deep-merge(
 	(
-		align-items: center,
 		display: flex,
 	),
 	$breadcrumb-bar

package/src/scss/variables/_forms.scss

@@ -676,6 +676,8 @@ $form-group-margin-bottom-mobile: null !default;
 
 $form-group-sm-margin-bottom: 1rem !default; // 16px
 
+$form-group-sm-input-label-font-size: 0.75rem !default; // 12px
+$form-group-sm-input-label-line-height: 1.5 !default; // 150%
 $form-group-sm-input-label-margin-bottom: 0.25rem !default; // 4px
 
 $form-group-sm-item-label-spacer: 1.75rem !default; // 28px

package/src/scss/variables/_globals.scss

@@ -345,14 +345,14 @@ $spacers: () !default;
 $spacers: map-deep-merge(
 	(
 		0: 0rem,
-		1: $spacer * 0.25,
-		2: $spacer * 0.5,
-		3: $spacer,
-		4: $spacer * 1.5,
-		5: $spacer * 3,
-		6: $spacer * 4.5,
-		7: $spacer * 6,
-		8: $spacer * 7.5,
+		1: calc(#{$spacer} * 0.25),
+		2: calc(#{$spacer} * 0.5),
+		3: calc(#{$spacer}),
+		4: calc(#{$spacer} * 1.5),
+		5: calc(#{$spacer} * 3),
+		6: calc(#{$spacer} * 4.5),
+		7: calc(#{$spacer} * 6),
+		8: calc(#{$spacer} * 7.5),
 	),
 	$spacers
 );

package/src/scss/variables/_resizer.scss

@@ -9,15 +9,28 @@ $c-horizontal-resizer: map-merge(
 		right: 0rem,
 		top: 0rem,
 		user-select: none,
-		width: 0.5rem,
+		width: 0.75rem,
 		z-index: 10,
 
+		before: (
+			bottom: 0rem,
+			content: '',
+			left: 0.25rem,
+			position: absolute,
+			right: 0.25rem,
+			top: 0rem,
+		),
+
 		hover: (
-			background-color: $primary-l0,
+			before: (
+				background-color: $primary-l0,
+			),
 		),
 
 		focus: (
-			background-color: $primary-l0,
+			before: (
+				background-color: $primary-l0,
+			),
 		),
 	),
 	$c-horizontal-resizer