@clayui/css 3.163.0 → 3.164.0

package/src/scss/variables/_labels.scss

@@ -904,7 +904,7 @@ $label-inverse-primary: map-deep-merge(
 		href: (
 			hover: (
 				background-color: clay-darken($primary, 10%),
-				border-color: clay-darken($primary, 10%),
+				border-color: transparent,
 				color: color-yiq(clay-darken($primary, 10%)),
 			),
 		),
@@ -933,7 +933,7 @@ $label-inverse-secondary: map-deep-merge(
 		href: (
 			hover: (
 				background-color: clay-darken($secondary, 10%),
-				border-color: clay-darken($secondary, 10%),
+				border-color: transparent,
 				color: color-yiq(clay-darken($secondary, 10%)),
 			),
 		),
@@ -962,7 +962,7 @@ $label-inverse-success: map-deep-merge(
 		href: (
 			hover: (
 				background-color: clay-darken($success, 10%),
-				border-color: clay-darken($success, 10%),
+				border-color: transparent,
 				color: color-yiq(clay-darken($success, 10%)),
 			),
 		),
@@ -991,7 +991,7 @@ $label-inverse-info: map-deep-merge(
 		href: (
 			hover: (
 				background-color: clay-darken($info, 10%),
-				border-color: clay-darken($info, 10%),
+				border-color: transparent,
 				color: color-yiq(clay-darken($info, 10%)),
 			),
 		),
@@ -1020,7 +1020,7 @@ $label-inverse-warning: map-deep-merge(
 		href: (
 			hover: (
 				background-color: clay-darken($warning, 10%),
-				border-color: clay-darken($warning, 10%),
+				border-color: transparent,
 				color: color-yiq(clay-darken($warning, 10%)),
 			),
 		),
@@ -1049,7 +1049,7 @@ $label-inverse-danger: map-deep-merge(
 		href: (
 			hover: (
 				background-color: clay-darken($danger, 10%),
-				border-color: clay-darken($danger, 10%),
+				border-color: transparent,
 				color: color-yiq(clay-darken($danger, 10%)),
 			),
 		),
@@ -1078,7 +1078,7 @@ $label-inverse-light: map-deep-merge(
 		href: (
 			hover: (
 				background-color: clay-darken($light, 10%),
-				border-color: clay-darken($light, 10%),
+				border-color: transparent,
 				color: color-yiq(clay-darken($light, 10%)),
 			),
 		),
@@ -1107,7 +1107,7 @@ $label-inverse-dark: map-deep-merge(
 		href: (
 			hover: (
 				background-color: clay-darken($dark, 10%),
-				border-color: clay-darken($dark, 10%),
+				border-color: transparent,
 				color: color-yiq(clay-darken($dark, 10%)),
 			),
 		),
@@ -1127,6 +1127,276 @@ $label-inverse-dark: map-deep-merge(
 	$label-inverse-dark
 );
 
+$label-inverse-content-0: () !default;
+$label-inverse-content-0: map-deep-merge(
+	(
+		background-color: $secondary-l3,
+		border-color: transparent,
+		color: $dark-d2,
+
+		href: (
+			hover: (
+				background-color: $secondary-l3,
+				border-color: transparent,
+				color: $dark-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $dark-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $dark-d2,
+			),
+		),
+	),
+	$label-inverse-content-0
+);
+
+$label-inverse-content-1: () !default;
+$label-inverse-content-1: map-deep-merge(
+	(
+		background-color: $purple-l5,
+		border-color: transparent,
+		color: $purple-d2,
+
+		href: (
+			hover: (
+				background-color: $purple-l5,
+				border-color: transparent,
+				color: $purple-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $purple-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $purple-d2,
+			),
+		),
+	),
+	$label-inverse-content-1
+);
+
+$label-inverse-content-2: () !default;
+$label-inverse-content-2: map-deep-merge(
+	(
+		background-color: $yellow-l5,
+		border-color: transparent,
+		color: $yellow-d4,
+
+		href: (
+			hover: (
+				background-color: $yellow-l5,
+				border-color: transparent,
+				color: $yellow-d4,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $yellow-d4,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $yellow-d4,
+			),
+		),
+	),
+	$label-inverse-content-2
+);
+
+$label-inverse-content-3: () !default;
+$label-inverse-content-3: map-deep-merge(
+	(
+		background-color: $green-l5,
+		border-color: transparent,
+		color: $green-d2,
+
+		href: (
+			hover: (
+				background-color: $green-l5,
+				border-color: transparent,
+				color: $green-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $green-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $green-d2,
+			),
+		),
+	),
+	$label-inverse-content-3
+);
+
+$label-inverse-content-4: () !default;
+$label-inverse-content-4: map-deep-merge(
+	(
+		background-color: $red-l5,
+		border-color: transparent,
+		color: $red-d2,
+
+		href: (
+			hover: (
+				background-color: $red-l5,
+				border-color: transparent,
+				color: $red-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $red-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $red-d2,
+			),
+		),
+	),
+	$label-inverse-content-4
+);
+
+$label-inverse-content-5: () !default;
+$label-inverse-content-5: map-deep-merge(
+	(
+		background-color: $teal-l5,
+		border-color: transparent,
+		color: $teal-d2,
+
+		href: (
+			hover: (
+				background-color: $teal-l5,
+				border-color: transparent,
+				color: $teal-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $teal-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $teal-d2,
+			),
+		),
+	),
+	$label-inverse-content-5
+);
+
+$label-inverse-content-6: () !default;
+$label-inverse-content-6: map-deep-merge(
+	(
+		background-color: $cyan-l5,
+		border-color: transparent,
+		color: $cyan-d2,
+
+		href: (
+			hover: (
+				background-color: $cyan-l5,
+				border-color: transparent,
+				color: $cyan-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $cyan-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $cyan-d2,
+			),
+		),
+	),
+	$label-inverse-content-6
+);
+
+$label-inverse-content-7: () !default;
+$label-inverse-content-7: map-deep-merge(
+	(
+		background-color: $orange-l5,
+		border-color: transparent,
+		color: $orange-d2,
+
+		href: (
+			hover: (
+				background-color: $orange-l5,
+				border-color: transparent,
+				color: $orange-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $orange-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $orange-d2,
+			),
+		),
+	),
+	$label-inverse-content-7
+);
+
+$label-inverse-content-8: () !default;
+$label-inverse-content-8: map-deep-merge(
+	(
+		background-color: $pink-l5,
+		border-color: transparent,
+		color: $pink-d2,
+
+		href: (
+			hover: (
+				background-color: $pink-l5,
+				border-color: transparent,
+				color: $pink-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $pink-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $pink-d2,
+			),
+		),
+	),
+	$label-inverse-content-8
+);
+
 $label-palette: () !default;
 $label-palette: map-deep-merge(
 	(
@@ -1161,6 +1431,24 @@ $label-palette: map-deep-merge(
 		inverse-light: $label-inverse-light,
 
 		inverse-dark: $label-inverse-dark,
+
+		inverse-content-0: $label-inverse-content-0,
+
+		inverse-content-1: $label-inverse-content-1,
+
+		inverse-content-2: $label-inverse-content-2,
+
+		inverse-content-3: $label-inverse-content-3,
+
+		inverse-content-4: $label-inverse-content-4,
+
+		inverse-content-5: $label-inverse-content-5,
+
+		inverse-content-6: $label-inverse-content-6,
+
+		inverse-content-7: $label-inverse-content-7,
+
+		inverse-content-8: $label-inverse-content-8,
 	),
 	$label-palette
 );

package/src/scss/variables/_resizer.scss

@@ -23,13 +23,24 @@ $c-horizontal-resizer: map-merge(
 
 		hover: (
 			before: (
-				background-color: $primary-l0,
+				background-color: $primary,
+			),
+		),
+
+		active: (
+			before: (
+				background-color: $primary-d2,
 			),
 		),
 
 		focus: (
+			box-shadow: $component-focus-inset-box-shadow,
+			outline: 0,
+
 			before: (
-				background-color: $primary-l0,
+				background-color: $primary,
+				bottom: 0.25rem,
+				top: 0.25rem,
 			),
 		),
 	),

package/lib/images/icons/arrow-key-down.svg

@@ -1,9 +0,0 @@
-<!--
-* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2026 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" 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 0ZM11.83 6.49 8.41 10.47C8.18 10.73 7.82 10.73 7.59 10.47L4.17 6.49C3.81 6.06 4.07 5.33 4.58 5.33H11.42C11.93 5.34 12.19 6.06 11.83 6.49Z" fill-rule="evenodd" />
-</svg>

package/lib/images/icons/arrow-key-left.svg

@@ -1,9 +0,0 @@
-<!--
-* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2026 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" 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 0ZM9.51 11.83 5.53 8.41C5.27 8.18 5.27 7.82 5.53 7.59L9.51 4.17C9.94 3.81 10.67 4.07 10.67 4.58V11.42C10.66 11.93 9.94 12.19 9.51 11.83Z" fill-rule="evenodd" />
-</svg>

package/lib/images/icons/arrow-key-right.svg

@@ -1,9 +0,0 @@
-<!--
-* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2026 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" 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.49 4.17 10.47 7.59C10.73 7.82 10.73 8.18 10.47 8.41L6.49 11.83C6.06 12.19 5.33 11.93 5.33 11.42V4.58C5.34 4.07 6.06 3.81 6.49 4.17Z" fill-rule="evenodd" />
-</svg>

package/lib/images/icons/arrow-key-up.svg

@@ -1,9 +0,0 @@
-<!--
-* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2026 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" 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 0ZM11.83 9.51 8.41 5.53C8.18 5.27 7.82 5.27 7.59 5.53L4.17 9.51C3.81 9.94 4.07 10.67 4.58 10.67H11.42C11.93 10.66 12.19 9.94 11.83 9.51Z" fill-rule="evenodd" />
-</svg>

package/src/images/icons/arrow-key-down.svg

@@ -1,9 +0,0 @@
-<!--
-* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2026 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" 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 0ZM11.83 6.49 8.41 10.47C8.18 10.73 7.82 10.73 7.59 10.47L4.17 6.49C3.81 6.06 4.07 5.33 4.58 5.33H11.42C11.93 5.34 12.19 6.06 11.83 6.49Z" fill-rule="evenodd" />
-</svg>

package/src/images/icons/arrow-key-left.svg

@@ -1,9 +0,0 @@
-<!--
-* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2026 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" 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 0ZM9.51 11.83 5.53 8.41C5.27 8.18 5.27 7.82 5.53 7.59L9.51 4.17C9.94 3.81 10.67 4.07 10.67 4.58V11.42C10.66 11.93 9.94 12.19 9.51 11.83Z" fill-rule="evenodd" />
-</svg>

package/src/images/icons/arrow-key-right.svg

@@ -1,9 +0,0 @@
-<!--
-* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2026 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" 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.49 4.17 10.47 7.59C10.73 7.82 10.73 8.18 10.47 8.41L6.49 11.83C6.06 12.19 5.33 11.93 5.33 11.42V4.58C5.34 4.07 6.06 3.81 6.49 4.17Z" fill-rule="evenodd" />
-</svg>

package/src/images/icons/arrow-key-up.svg

@@ -1,9 +0,0 @@
-<!--
-* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2026 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" 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 0ZM11.83 9.51 8.41 5.53C8.18 5.27 7.82 5.27 7.59 5.53L4.17 9.51C3.81 9.94 4.07 10.67 4.58 10.67H11.42C11.93 10.66 12.19 9.94 11.83 9.51Z" fill-rule="evenodd" />
-</svg>

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

@@ -1,82 +0,0 @@
-// 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;
-}