@muraldevkit/ui-toolkit 2.56.0 → 2.57.1

package/dist/styles/MrlCallout/module.scss

@@ -0,0 +1,47 @@
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+.MrlCallout {
+	&--content {
+		max-width: 17.5rem;
+	}
+	&--title {
+		font-size: var(--mrl-font-size-03);
+		margin-bottom: var(--mrl-spacing-02);
+		padding-right: var(--mrl-spacing-06);
+	}
+	&--eyebrow {
+		font-size: var(--mrl-font-size-01);
+		font-weight: var(--mrl-font-weight-04);
+		margin-bottom: var(--mrl-spacing-02);
+		padding-right: var(--mrl-spacing-06);
+	}
+	&--description {
+		p {
+			font-size: var(--mrl-font-size-02);
+			padding-right: var(--mrl-spacing-06);
+		}
+	}
+	&--image {
+		margin-top: var(--mrl-spacing-05);
+		img {
+			height: auto;
+			width: 100%;
+		}
+	}
+	&--footer {
+		display: flex;
+		justify-content: flex-start;
+		margin-top: var(--mrl-spacing-05);
+		:global(.mrlButton:last-child) {
+			margin-left: auto;
+		}
+	}
+	:global(.mrlButton:focus-visible) {
+		@include mrl-focus($is-inverse: 'true');
+	}
+}
+@media screen and (min-resolution: 384dpi) and (max-resolution: 399dpi),
+	(min-resolution: 4dppx) and (max-resolution: 3.99dppx) {
+	.MrlCallout > div:first-child {
+		min-height: 75px;
+	}
+}

package/dist/styles/MrlPopover/module.scss

@@ -7,7 +7,6 @@
 	box-shadow: var(--mrl-shadows-raised);
 	color: var(--mrl-popover-text-color);
 	flex-direction: column;
-	max-height: calc(100vh - 2 * var(--mrl-space-inset-large));
 	max-width: 600px;
 	opacity: 0;
 	overflow: visible;
@@ -28,6 +27,7 @@
 		position: absolute;
 		right: 4px;
 		top: 6px;
+		transition: none;
 		svg {
 			color: var(--mrl-popover-text-color);
 		}
@@ -39,13 +39,14 @@
 		display: flex;
 	}
 	&--scrolling {
-		padding-bottom: var(--mrl-spacing-04);
 		padding-right: 0;
-		padding-top: var(--mrl-spacing-03);
-		&--content {
-			overflow-x: hidden;
-			overflow-y: auto;
-			padding: var(--mrl-spacing-02) var(--mrl-spacing-04) var(--mrl-spacing-02) 0;
+	}
+	&--scrolling--content {
+		overflow-x: hidden;
+		overflow-y: auto;
+		padding-right: calc(var(--mrl-popover-padding) - 4px);
+		.MrlPopover--close {
+			right: 8px;
 		}
 	}
 	&--point {
@@ -97,3 +98,19 @@
 		}
 	}
 }
+.inverse {
+	.MrlPopover--scrolling--content {
+		&::-webkit-scrollbar {
+			background-color: var(--mrl-popover-background-color);
+			border-radius: 10px;
+			width: 12px;
+		}
+		&::-webkit-scrollbar-thumb {
+			background-clip: content-box;
+			background-color: var(--mrl-popover-text-color);
+			border: 3px solid transparent;
+			border-radius: 10px;
+			position: relative;
+		}
+	}
+}

package/dist/styles/MrlRadioButtonStandalone/global.scss

@@ -9,6 +9,7 @@
 .MrlRadioButtonStandalone-focus-indicator {
 	height: var(--mrl-radio-button-height);
 	left: 0;
+	pointer-events: none;
 	position: absolute;
 	top: auto;
 	width: var(--mrl-radio-button-width);

package/dist/styles/layers/layers.d.ts

@@ -0,0 +1,11 @@
+/**
+ * References to the different portal layers
+ */
+export declare const PORTAL_LAYERS: {
+    readonly ROOT: "mrl-root-portal";
+    readonly MENU: "mrl-menu-portal";
+    readonly POPOVER: "mrl-popover-portal";
+    readonly CALLOUT: "mrl-callout-portal";
+    readonly MODAL: "mrl-modal";
+    readonly TOOLTIP: "mrl-tooltip-portal";
+};

package/dist/utils/{findInteractiveElement/findInteractiveElement.d.ts → findAdjacentInteractiveElement/findAdjacentInteractiveElement.d.ts}

@@ -5,4 +5,4 @@
  * @param direction - The direction to search in
  * @returns The interactive element or null if none is found
  */
-export declare const findInteractiveElement: (ref: React.RefObject<HTMLElement> | undefined, direction?: 'next' | 'previous') => HTMLElement | null;
+export declare const findAdjacentInteractiveElement: (ref: React.RefObject<HTMLElement> | undefined, direction?: 'next' | 'previous') => HTMLElement | null;

package/dist/utils/findAdjacentInteractiveElement/index.d.ts

@@ -0,0 +1 @@
+export * from './findAdjacentInteractiveElement';

package/dist/utils/index.d.ts

@@ -1,5 +1,5 @@
 export * from './commonProps';
-export * from './findInteractiveElement';
+export * from './findAdjacentInteractiveElement';
 export * from './getCamelCase';
 export * from './isImagePath';
 export * from './isImageUri';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@muraldevkit/ui-toolkit",
-	"version": "2.56.0",
+	"version": "2.57.1",
 	"description": "Mural's UI Toolkit",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",

package/dist/utils/findInteractiveElement/index.d.ts

@@ -1 +0,0 @@
-export * from './findInteractiveElement';