@muraldevkit/ui-toolkit 4.67.0-dev-Vc0V.1 → 4.68.0-dev-NFbt.1

package/dist/styles/MrlContainer/module.scss

@@ -11,7 +11,7 @@
 	background-color: var(--mrl-container-background--helper);
 }
 .MrlContainer--nested {
-	background-color: var(--mrl-color-background-highlight-secondary);
+	background-color: var(--mrl-color-background-decorative);
 	border-color: var(--mrl-color-line-highlight-secondary);
 }
 .MrlContainer--nested-options {
@@ -23,7 +23,7 @@
 		display: flex;
 	}
 	&-divider {
-		background-color: var(--mrl-color-background-highlight-selected);
+		background-color: var(--mrl-color-background-selected);
 		border-radius: var(--mrl-radii-03);
 		flex-shrink: 0;
 		margin-right: var(--mrl-spacing-06);

package/dist/styles/MrlFilterItem/module.scss

@@ -39,7 +39,7 @@
 			color var(--mrl-duration-04) var(--mrl-timing-m2);
 	}
 	&:hover {
-		background-color: var(--mrl-color-background-highlight-emph-active);
+		background-color: var(--mrl-color-background-emph-active);
 		cursor: pointer;
 	}
 	&[aria-checked='true'] {

package/dist/styles/MrlKeystroke/module.scss

@@ -1,6 +1,6 @@
 .MrlKeystroke {
 	align-items: center;
-	background-color: var(--mrl-color-background-secondary);
+	background-color: rgba(var(--mrl-gray-80), 1);
 	border: 1px solid var(--mrl-black-opacity-05);
 	border-radius: var(--mrl-border-radius-content);
 	color: rgba(var(--mrl-gray-20), 1);

package/dist/styles/MrlLegacySelectItem/variables.scss

@@ -12,11 +12,11 @@
 	--mrl-select-item-icon-spacing: var(--mrl-spacing-03);
 }
 .mrl-selectItem:hover {
-	--mrl-select-item-background: var(--mrl-color-background-highlight-hover);
+	--mrl-select-item-background: var(--mrl-color-background-hover);
 	--mrl-select-item-color: var(--mrl-color-text-highlight-hover);
 }
 .mrl-is--selected {
-	--mrl-select-item-background: var(--mrl-color-background-highlight-selected);
+	--mrl-select-item-background: var(--mrl-color-background-selected);
 	--mrl-select-item-color: var(--mrl-color-text-highlight-selected);
 }
 .mrl-selectItem[aria-disabled='true'],

package/dist/styles/MrlSidebarNavItem/module.scss

@@ -2,7 +2,7 @@
 @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
 $mrl-sidebar-nav-item-background-color-hover: rgba(var(--mrl-gray-20), 1);
 $mrl-sidebar-nav-item-background-color-active: rgba(var(--mrl-gray-30), 1);
-$mrl-sidebar-nav-item-background-color-selected: var(--mrl-color-background-highlight-active);
+$mrl-sidebar-nav-item-background-color-selected: var(--mrl-color-background-selected);
 $mrl-sidebar-nav-item-text-color-default: var(--mrl-color-text-heading);
 $mrl-sidebar-nav-item-text-color-selected: var(--mrl-color-text-inverse-active);
 .MrlSidebarNavItem {

package/dist/styles/MrlSwitchStandalone/module.scss

@@ -15,7 +15,7 @@
 	background-color: var(--mrl-color-background);
 	border-radius: 0.375rem;
 	bottom: calc(var(--mrl-spacing-03) - var(--mrl-spacing-02));
-	color: var(--mrl-color-background-secondary);
+	color: rgba(var(--mrl-gray-80), 1);
 	display: flex;
 	height: var(--mrl-spacing-04);
 	left: var(--mrl-spacing-02);

package/dist/styles/MrlTabGroup/module.scss

@@ -4,7 +4,7 @@
 	padding: 4px;
 	position: relative;
 	&::before {
-		background-color: var(--mrl-color-background-decorative);
+		background-color: var(--mrl-color-line-divider);
 		bottom: 4px;
 		content: '';
 		height: var(--mrl-line-width-control);

package/dist/styles/MrlTooltipContent/global.scss

@@ -6,61 +6,6 @@ $mrl-tooltip-arrow-vertical-center: calc(var(--mrl-tooltip-arrow-size) * -1 / 2
 $mrl-tooltip-arrow-size: math.hypot(8px, 5px);
 @use '../tooltip.mixins.scss' as *;
 @use './MrlTooltipContent.variables.scss';
-.mrl-tooltip-trigger {
-	anchor-name: var(--mrl-tooltip-anchor-name);
-}
-.mrl-tooltip-positioner {
-	--mrl-tooltip-trigger-offset: var(--mrl-spacing-03);
-	container-type: anchored;
-	max-width: calc(var(--mrl-spacing-09) * 7);
-	position: fixed;
-	position-anchor: var(--mrl-tooltip-anchor-name);
-	width: max-content;
-	z-index: $mrl-zIndex-tooltips;
-}
-.mrl-tooltip-positioner[data-position='top'] {
-	bottom: anchor(top);
-	margin-bottom: var(--mrl-tooltip-trigger-offset);
-	position-try-fallbacks: flip-block;
-}
-.mrl-tooltip-positioner[data-position='top'][data-anchor='center'] {
-	justify-self: anchor-center;
-}
-.mrl-tooltip-positioner[data-position='top'][data-anchor='start'] {
-	left: anchor(left);
-}
-.mrl-tooltip-positioner[data-position='top'][data-anchor='end'] {
-	right: anchor(right);
-}
-.mrl-tooltip-positioner[data-position='bottom'] {
-	margin-top: var(--mrl-tooltip-trigger-offset);
-	position-try-fallbacks: flip-block;
-	top: anchor(bottom);
-}
-.mrl-tooltip-positioner[data-position='bottom'][data-anchor='center'] {
-	justify-self: anchor-center;
-}
-.mrl-tooltip-positioner[data-position='bottom'][data-anchor='start'] {
-	left: anchor(left);
-}
-.mrl-tooltip-positioner[data-position='bottom'][data-anchor='end'] {
-	right: anchor(right);
-}
-.mrl-tooltip-positioner[data-position='left'] {
-	align-self: anchor-center;
-	margin-right: var(--mrl-tooltip-trigger-offset);
-	position-try-fallbacks: flip-inline;
-	right: anchor(left);
-}
-.mrl-tooltip-positioner[data-position='right'] {
-	align-self: anchor-center;
-	left: anchor(right);
-	margin-left: var(--mrl-tooltip-trigger-offset);
-	position-try-fallbacks: flip-inline;
-}
-.mrl-tooltip-fade {
-	width: max-content;
-}
 .mrl-tooltip-content {
 	background: var(--mrl-tooltip-background-color);
 	border-radius: var(--mrl-tooltip-border-radius);
@@ -75,9 +20,11 @@ $mrl-tooltip-arrow-size: math.hypot(8px, 5px);
 	max-width: calc(var(--mrl-spacing-09) * 7);
 	overflow-wrap: break-word;
 	padding: var(--mrl-tooltip-padding);
-	position: relative;
+	position: absolute;
+	transition-property: opacity;
 	white-space: normal;
 	width: max-content;
+	z-index: $mrl-zIndex-tooltips;
 	&.has-custom-render {
 		padding-right: var(--mrl-spacing-02);
 	}
@@ -96,85 +43,109 @@ $mrl-tooltip-arrow-size: math.hypot(8px, 5px);
 	transform: rotate(135deg);
 	width: 0;
 }
-.mrl-tooltip-positioner[data-position='top'] .mrl-tooltip-content::after {
-	border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
-	bottom: $mrl-tooltip-arrow-vertical-center;
-	left: $mrl-tooltip-arrow-horizontal-center;
-	transform: rotate(315deg);
-}
-.mrl-tooltip-positioner[data-position='bottom'] .mrl-tooltip-content::after {
-	border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
-	left: $mrl-tooltip-arrow-horizontal-center;
-	top: $mrl-tooltip-arrow-vertical-center;
-}
-.mrl-tooltip-positioner[data-anchor='start'] .mrl-tooltip-content::after {
-	left: var(--mrl-tooltip-arrow-spacing);
-}
-.mrl-tooltip-positioner[data-anchor='start']
-	.mrl-tooltip-content.mrlIconButton--small-wrapper::after {
-	left: var(--mrl-spacing-04);
-}
-.mrl-tooltip-positioner[data-anchor='start']
-	.mrl-tooltip-content.mrlIconButton--xsmall-wrapper::after {
-	left: var(--mrl-spacing-03);
-}
-.mrl-tooltip-positioner[data-anchor='end'] .mrl-tooltip-content::after {
-	left: auto;
-	right: var(--mrl-tooltip-arrow-spacing);
-}
-.mrl-tooltip-positioner[data-anchor='end']
-	.mrl-tooltip-content.mrlIconButton--small-wrapper::after {
-	left: auto;
-	right: var(--mrl-spacing-04);
-}
-.mrl-tooltip-positioner[data-anchor='end']
-	.mrl-tooltip-content.mrlIconButton--xsmall-wrapper::after {
-	left: auto;
-	right: var(--mrl-spacing-03);
-}
-.mrl-tooltip-positioner[data-position='left'] .mrl-tooltip-content::after,
-.mrl-tooltip-positioner[data-position='right'] .mrl-tooltip-content::after {
-	display: var(--mrl-tooltip-arrow-display-left-right);
+.mrl-tooltip-content[data-position='top'] {
+	bottom: 100%;
+	margin-bottom: var(--mrl-tooltip-trigger-offset);
+	right: 50%;
+	transform: translateX(50%);
+	&::after {
+		border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
+		bottom: $mrl-tooltip-arrow-vertical-center;
+		left: $mrl-tooltip-arrow-horizontal-center;
+		transform: rotate(315deg);
+	}
+	.mrl-tooltip-content__hover {
+		height: 10px;
+		left: 0;
+		top: 100%;
+		width: 100%;
+	}
 }
-.mrl-tooltip-positioner[data-position='top'] .mrl-tooltip-content {
-	@container anchored(fallback: flip-block) {
-		&::after {
-			bottom: auto;
-			top: $mrl-tooltip-arrow-vertical-center;
-			transform: rotate(135deg);
-		}
+.mrl-tooltip-content[data-anchor='start'] {
+	left: 0;
+	right: initial;
+	transform: none;
+	&::after {
+		left: var(--mrl-tooltip-arrow-spacing);
+	}
+	&.mrlIconButton--small-wrapper::after {
+		left: var(--mrl-spacing-04);
+	}
+	&.mrlIconButton--xsmall-wrapper::after {
+		left: var(--mrl-spacing-03);
 	}
 }
-.mrl-tooltip-positioner[data-position='bottom'] .mrl-tooltip-content {
-	@container anchored(fallback: flip-block) {
-		&::after {
-			bottom: $mrl-tooltip-arrow-vertical-center;
-			top: auto;
-			transform: rotate(315deg);
-		}
+.mrl-tooltip-content[data-anchor='end'] {
+	right: 0;
+	transform: none;
+	&::after {
+		left: auto;
+		right: var(--mrl-tooltip-arrow-spacing);
+	}
+	&.mrlIconButton--small-wrapper::after {
+		left: auto;
+		right: var(--mrl-spacing-04);
+	}
+	&.mrlIconButton--xsmall-wrapper::after {
+		left: auto;
+		right: var(--mrl-spacing-03);
 	}
 }
-.mrl-tooltip-positioner[data-position='top'] .mrl-tooltip-content__hover {
-	height: 10px;
-	left: 0;
+.mrl-tooltip-content[data-position='bottom'] {
+	margin-top: var(--mrl-tooltip-trigger-offset);
 	top: 100%;
-	width: 100%;
+	&::after {
+		border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
+		top: $mrl-tooltip-arrow-vertical-center;
+	}
+	.mrl-tooltip-content__hover {
+		height: 10px;
+		left: 0;
+		top: -10px;
+		width: 100%;
+	}
 }
-.mrl-tooltip-positioner[data-position='bottom'] .mrl-tooltip-content__hover {
-	height: 10px;
-	left: 0;
-	top: -10px;
-	width: 100%;
+.mrl-tooltip-content[data-position='bottom'][data-anchor='center'] {
+	right: 50%;
+	transform: translateX(50%);
+	&::after {
+		left: calc(50% - var(--mrl-tooltip-arrow-size) / 2);
+	}
 }
-.mrl-tooltip-positioner[data-position='left'] .mrl-tooltip-content__hover {
-	height: 23px;
-	right: -10px;
-	top: 0;
-	width: 100%;
+.mrl-tooltip-content[data-position='left'] {
+	left: initial;
+	margin-right: var(--mrl-tooltip-trigger-offset);
+	right: 100%;
+	top: 50%;
+	transform: translateY(-50%);
+	&::after {
+		border-top-right-radius: var(--mrl-tooltip-arrow-border-radius);
+		display: var(--mrl-tooltip-arrow-display-left-right);
+		right: $mrl-tooltip-arrow-vertical-center;
+		top: $mrl-tooltip-arrow-horizontal-center;
+	}
+	.mrl-tooltip-content__hover {
+		height: 23px;
+		right: -10px;
+		top: 0;
+		width: 100%;
+	}
 }
-.mrl-tooltip-positioner[data-position='right'] .mrl-tooltip-content__hover {
-	height: 23px;
-	left: -10px;
-	top: 0;
-	width: 100%;
+.mrl-tooltip-content[data-position='right'] {
+	left: 100%;
+	margin-left: var(--mrl-tooltip-trigger-offset);
+	top: 50%;
+	transform: translateY(-50%);
+	&::after {
+		border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
+		display: var(--mrl-tooltip-arrow-display-left-right);
+		left: $mrl-tooltip-arrow-vertical-center;
+		top: $mrl-tooltip-arrow-horizontal-center;
+	}
+	.mrl-tooltip-content__hover {
+		height: 23px;
+		left: -10px;
+		top: 0;
+		width: 100%;
+	}
 }

package/dist/styles/form/variables.scss

@@ -38,7 +38,7 @@
 	--mrl-radio-button-border-width: var(--mrl-line-width-border);
 	--mrl-radio-button-border-radius: var(--mrl-border-radius-rounded);
 	--mrl-radio-button-background: var(--mrl-color-background);
-	--mrl-radio-button-background-selected: var(--mrl-color-background-highlight-selected);
+	--mrl-radio-button-background-selected: var(--mrl-color-background-selected);
 	--mrl-select-background-color-read-only: var(--mrl-black-opacity-00);
 	--mrl-select-border-color-read-only: rgba(0, 0, 0, 0%);
 }