@clayui/css 3.161.0 → 3.163.0

package/src/scss/atlas-variables.scss

@@ -10,8 +10,6 @@
 
 @import '_variables';
 
-@import 'atlas-custom-properties/_variables';
-
 @import '_mixins';
 
 // INSERT CUSTOM VARS

package/src/scss/atlas.scss

@@ -10,8 +10,6 @@
 
 @import '_variables';
 
-@import 'atlas-custom-properties/_variables';
-
 @import '_mixins';
 
 @import '_components';

package/src/scss/base-variables.scss

@@ -8,8 +8,6 @@
 
 @import '_variables';
 
-@import 'atlas-custom-properties/_variables';
-
 @import '_mixins';
 
 // INSERT CUSTOM VARS

package/src/scss/base.scss

@@ -8,8 +8,6 @@
 
 @import '_variables';
 
-@import 'atlas-custom-properties/_variables';
-
 @import '_mixins';
 
 @import '_components';

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/_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>',

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/_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