@muraldevkit/ui-toolkit 4.45.2-dev-jOrv.1 → 4.45.2

package/dist/index.js.LICENSE.txt

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */

package/dist/src/components/layout/error-page/MrlBrandColors/MrlBrandColors.functions.scss

@@ -0,0 +1,12 @@
+@use 'sass:list';
+@function color-grid($color-counts) {
+	$template-areas: '';
+	@each $color-count in $color-counts {
+		$color: list.nth($color-count, 1);
+		$count: list.nth($color-count, 2);
+		@for $i from 1 through $count {
+			$template-areas: '#{$template-areas} #{$color}';
+		}
+	}
+	@return $template-areas;
+}

package/dist/styles/MrlAvatar/module.scss

@@ -0,0 +1,97 @@
+.MrlAvatar-content {
+	border: var(--mrl-stroke-02) solid transparent;
+	border-radius: var(--mrl-radii-03);
+	display: block;
+	font-size: var(--mrl-font-size-04);
+	font-weight: var(--mrl-font-weight-04);
+	height: 100%;
+	line-height: 2.875rem;
+	max-width: 100%;
+	overflow: hidden;
+	text-align: center;
+	width: 100%;
+	:global(.MrlSvgContainer) {
+		display: block;
+		height: auto;
+		max-width: 100%;
+		width: 100%;
+	}
+}
+.MrlAvatar {
+	border-radius: var(--mrl-radii-03);
+	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 4%) inset;
+	box-sizing: border-box;
+	display: block;
+	height: var(--mrl-spacing-10);
+	position: relative;
+	width: var(--mrl-spacing-10);
+	&--xsmall {
+		height: var(--mrl-spacing-07);
+		width: var(--mrl-spacing-07);
+		.MrlAvatar-content {
+			font-size: var(--mrl-font-size-02);
+			line-height: 1.375rem;
+		}
+	}
+	&--small {
+		height: var(--mrl-spacing-08);
+		width: var(--mrl-spacing-08);
+		.MrlAvatar-content {
+			font-size: var(--mrl-font-size-02);
+			line-height: 1.875rem;
+		}
+	}
+	&--large {
+		border-radius: var(--mrl-radii-06);
+		height: var(--mrl-spacing-13);
+		width: var(--mrl-spacing-13);
+		.MrlAvatar-content {
+			border-radius: var(--mrl-radii-06);
+			font-size: var(--mrl-font-size-07);
+			line-height: 5.875rem;
+		}
+	}
+}
+.MrlAvatar-image {
+	display: block;
+	height: auto;
+	max-width: 100%;
+	width: 100%;
+}
+.MrlAvatar-icon-container {
+	border-radius: 1rem;
+	bottom: -0.1875rem;
+	color: var(--mrl-color-background);
+	position: absolute;
+	.MrlAvatar-icon {
+		display: block;
+		left: 50%;
+		position: absolute;
+		:global(.mrl-svg) {
+			margin: 0;
+		}
+	}
+}
+.MrlAvatar-icon-container--small {
+	height: 1rem;
+	right: -0.1875rem;
+	width: 1rem;
+	.MrlAvatar-icon {
+		height: 1rem;
+		margin-left: -0.3125rem;
+		top: 0;
+		width: 0.625rem;
+	}
+}
+.MrlAvatar-icon-container--xsmall {
+	border-radius: 0.75rem;
+	height: 0.75rem;
+	right: -0.125rem;
+	width: 0.75rem;
+	.MrlAvatar-icon {
+		height: 0.5rem;
+		margin-left: -0.225rem;
+		top: -0.1rem;
+		width: 0.5rem;
+	}
+}

package/dist/styles/MrlAvatarButton/module.scss

@@ -0,0 +1,41 @@
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+.MrlAvatarButton {
+	background-color: transparent;
+	border: none;
+	border-radius: var(--mrl-radii-03);
+	margin: 0;
+	outline: none;
+	padding: 0;
+	position: relative;
+	&::after {
+		background-color: rgba(0, 0, 0, 0%);
+		border-radius: var(--mrl-radii-03);
+		content: '';
+		display: block;
+		inset: 0;
+		position: absolute;
+	}
+	&:focus-visible {
+		@include mrl-focus;
+	}
+	&:hover {
+		cursor: pointer;
+		&::after {
+			background-color: rgba(var(--mrl-gray-90), 0.32);
+		}
+	}
+	&:active {
+		&::after {
+			background-color: rgba(var(--mrl-gray-90), 0.64);
+		}
+	}
+	&--large {
+		border-radius: var(--mrl-radii-06);
+		&:focus-visible {
+			@include mrl-focus($element-radius: 'var(--mrl-radii-06)');
+		}
+		&::after {
+			border-radius: var(--mrl-radii-06);
+		}
+	}
+}

package/dist/styles/MrlBadge/module.scss

@@ -0,0 +1,39 @@
+
+.MrlBadge {
+	align-items: center;
+	background-color: var(--mrl-black-opacity-01);
+	border-radius: var(--mrl-radii-04);
+	color: var(--mrl-color-text-emph);
+	display: inline-flex;
+	flex-shrink: 1;
+	font-size: var(--mrl-font-size-02);
+	font-weight: var(--mrl-font-weight-02);
+	height: var(--mrl-spacing-06);
+	padding: var(--mrl-spacing-01) calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+	width: auto;
+	:global(.MrlSvgContainer) {
+		flex-shrink: 0;
+		height: var(--mrl-spacing-04);
+		margin-left: var(--mrl-spacing-02);
+		width: var(--mrl-spacing-04);
+	}
+	&--error {
+		background-color: var(--mrl-color-background-error-light);
+		color: var(--mrl-color-text-error);
+	}
+	&--info {
+		background-color: var(--mrl-color-background-info-light);
+		color: rgb(var(--mrl-status-info));
+	}
+	&--success {
+		background-color: var(--mrl-color-background-success-light);
+		color: rgb(var(--mrl-status-success));
+	}
+	&--warning {
+		background-color: var(--mrl-color-background-warning-light);
+		color: var(--mrl-color-text-warning-light);
+		:global(.MrlSvgContainer) {
+			color: rgb(var(--mrl-status-warning));
+		}
+	}
+}

package/dist/styles/MrlBadgeNotification/module.scss

@@ -0,0 +1,38 @@
+
+.MrlBadgeNotification {
+	align-items: center;
+	background-color: rgb(var(--mrl-gray-90));
+	border: var(--mrl-line-width-border-fine) solid rgb(var(--mrl-white));
+	border-radius: var(--mrl-radii-04);
+	box-sizing: border-box;
+	color: var(--mrl-color-text-inverse);
+	display: inline-flex;
+	flex-shrink: 1;
+	font-size: var(--mrl-font-size-02);
+	font-weight: var(--mrl-font-weight-02);
+	height: var(--mrl-spacing-03);
+	justify-content: center;
+	padding: 0;
+	width: var(--mrl-spacing-03);
+	&--info {
+		background-color: var(--mrl-color-background-info);
+	}
+	&--numeric {
+		font-size: 0.5625rem;
+		height: var(--mrl-spacing-05);
+		padding: 0 var(--mrl-spacing-01);
+		width: var(--mrl-spacing-05);
+	}
+}
+:global(.mrlButton),
+:global(.mrlIconButton) {
+	.MrlBadgeNotification {
+		position: absolute;
+		right: 0;
+		top: 0;
+		&--numeric {
+			right: calc(var(--mrl-spacing-01) * -1);
+			top: calc(var(--mrl-spacing-01) * -1);
+		}
+	}
+}

package/dist/styles/MrlBlockNotification/global.scss

@@ -0,0 +1,19 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+@use './MrlBlockNotification.mixins.scss' as *;
+.mrl-blockNotification {
+	border-radius: var(--mrl-blockNotification-radius);
+	&.mrl-is--transitioning {
+		@include mrl-block-notification-fade-out;
+	}
+	&.mrl-is--closed {
+		display: none;
+		padding: 0;
+	}
+}
+@media (prefers-reduced-motion: no-preference) {
+	.mrl-blockNotification.mrl-is--transitioning {
+		@include mrl-block-notification-slide-out;
+	}
+}

package/dist/styles/MrlBlockNotification/mixins.scss

@@ -0,0 +1,20 @@
+
+@mixin mrl-block-notification-animate-in() {
+	margin-top: 0;
+	opacity: 1;
+	transition-duration: var(--mrl-duration-03);
+	transition-property: margin opacity;
+	transition-timing-function: var(--mrl-timing-m1);
+}
+@mixin mrl-block-notification-fade-in() {
+	opacity: 0;
+}
+@mixin mrl-block-notification-slide-in() {
+	margin-top: calc(var(--mrl-blockNotification-height));
+}
+@mixin mrl-block-notification-fade-out() {
+	opacity: 0;
+}
+@mixin mrl-block-notification-slide-out() {
+	margin-top: calc(var(--mrl-blockNotification-height) * -1);
+}

package/dist/styles/MrlBlockNotification/module.scss

@@ -0,0 +1,79 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
+@use './MrlBlockNotification.variables.scss';
+@use './MrlBlockNotification.mixins.scss' as *;
+$mrl-notification-close-inset: var(--mrl-spacing-02);
+.mrl-blockNotification-icon {
+	display: flex;
+	min-width: fit-content;
+	svg {
+		color: var(--mrl-blockNotification-svg-color);
+	}
+}
+.mrl-blockNotification {
+	@include mrl-block-notification-animate-in;
+	align-items: center;
+	background: var(--mrl-blockNotification-background);
+	color: var(--mrl-blockNotification-color);
+	display: flex;
+	flex-direction: row;
+	gap: var(--mrl-blockNotification-inline-spacing);
+	justify-content: center;
+	min-height: var(--mrl-blockNotification-height);
+	padding: var(--mrl-blockNotification-inset-spacing);
+	position: relative;
+	width: 100%;
+	.mrl-blockNotification-close-wrapper {
+		position: absolute;
+		right: $mrl-notification-close-inset;
+		top: 50%;
+		transform: translateY(-50%);
+		svg {
+			color: var(--mrl-blockNotification-color);
+		}
+	}
+	&[data-scope='inline'] {
+		display: inline-flex;
+		justify-content: start;
+		position: relative;
+		width: 100%;
+		.cta {
+			margin: var(--mrl-blockNotification-cta-spacing);
+		}
+		.mrl-blockNotification-icon {
+			align-self: baseline;
+		}
+		.mrl-blockNotification-close-wrapper {
+			position: absolute;
+			top: 20px;
+		}
+	}
+}
+.mrl-blockNotification--dismissible {
+	padding-right: calc(
+		#{$mrl-notification-close-inset} + var(--mrl-blockNotification-inline-spacing) + var(--mrl-spacing-08)
+	);
+	position: relative;
+}
+.mrl-blockNotification-message {
+	align-items: center;
+	max-width: 45rem;
+	h2,
+	p {
+		display: contents;
+	}
+	h2::after {
+		content: '\00a0';
+		display: contents;
+	}
+	p {
+		@include mrl-text-static('small');
+	}
+}
+.mrl-blockNotification-heading {
+	color: var(--mrl-blockNotification-heading-color);
+	display: inline;
+	margin-right: var(--mrl-blockNotification-inline-spacing-message);
+}

package/dist/styles/MrlBlockNotification/variables.scss

@@ -0,0 +1,66 @@
+
+.mrl-blockNotification {
+	--mrl-blockNotification-background: var(--mrl-color-background-info);
+	--mrl-blockNotification-background-general: rgba(var(--mrl-gray-100), 1);
+	--mrl-blockNotification-color: rgba(var(--mrl-gray-10), 1);
+	--mrl-blockNotification-heading-color: var(--mrl-color-text-inverse);
+	--mrl-blockNotification-height: var(--mrl-spacing-09);
+	--mrl-blockNotification-inline-spacing: var(--mrl-spacing-03);
+	--mrl-blockNotification-inline-spacing-message: var(--mrl-spacing-02);
+	--mrl-blockNotification-inset-spacing: var(--mrl-spacing-02) var(--mrl-spacing-07);
+	--mrl-blockNotification-radius: 0;
+	--mrl-blockNotification-svg-color: var(--mrl-color-text-inverse);
+}
+.mrl-blockNotification[data-kind='info'] {
+	--mrl-blockNotification-background: var(--mrl-color-background-info);
+	&[data-scope='inline'] {
+		--mrl-blockNotification-background: var(--mrl-color-background-info-light);
+		--mrl-blockNotification-color: var(--mrl-color-text-info);
+		--mrl-blockNotification-svg-color: var(--mrl-color-text-info);
+		--mrl-blockNotification-heading-color: var(--mrl-color-text-info);
+	}
+}
+.mrl-blockNotification[data-kind='error'] {
+	--mrl-blockNotification-background: var(--mrl-color-background-error);
+	&[data-scope='inline'] {
+		--mrl-blockNotification-background: var(--mrl-color-background-error-light);
+		--mrl-blockNotification-color: var(--mrl-color-text-error);
+		--mrl-blockNotification-svg-color: var(--mrl-color-text-error);
+		--mrl-blockNotification-heading-color: var(--mrl-color-text-error);
+	}
+}
+.mrl-blockNotification[data-kind='success'] {
+	--mrl-blockNotification-background: var(--mrl-color-background-success);
+	&[data-scope='inline'] {
+		--mrl-blockNotification-background: var(--mrl-color-background-success-light);
+		--mrl-blockNotification-color: var(--mrl-color-text-success);
+		--mrl-blockNotification-svg-color: var(--mrl-color-text-success);
+		--mrl-blockNotification-heading-color: var(--mrl-color-text-success);
+	}
+}
+.mrl-blockNotification[data-kind='warning'] {
+	--mrl-blockNotification-background: var(--mrl-color-background-warning);
+	--mrl-blockNotification-color: rgba(var(--mrl-gray-90), 1);
+	--mrl-blockNotification-heading-color: rgba(var(--mrl-black), 1);
+	--mrl-blockNotification-svg-color: rgba(var(--mrl-color-text-warning), 1);
+	&[data-scope='inline'] {
+		--mrl-blockNotification-background: var(--mrl-color-background-warning-light);
+		--mrl-blockNotification-color: var(--mrl-color-text-warning);
+		--mrl-blockNotification-heading-color: var(--mrl-color-text-warning);
+		--mrl-blockNotification-svg-color: rgba(var(--mrl-status-warning), 1);
+	}
+}
+.mrl-blockNotification[data-kind='general'],
+.mrl-blockNotification[data-kind='private'] {
+	--mrl-blockNotification-background: var(--mrl-blockNotification-background-general);
+}
+.mrl-blockNotification[data-scope='inline'] {
+	--mrl-blockNotification-radius: var(--mrl-border-radius-content-large);
+	--mrl-blockNotification-inset-spacing: calc(var(--mrl-spacing-03) + var(--mrl-spacing-01))
+		var(--mrl-spacing-04);
+	--mrl-blockNotification-cta-spacing: calc(
+			calc(var(--mrl-spacing-03) - var(--mrl-spacing-01)) * -1
+		)
+		calc(var(--mrl-spacing-03) * -1) calc(calc(var(--mrl-spacing-03) - var(--mrl-spacing-01)) * -1)
+		0;
+}

package/dist/styles/MrlBrandColors/mixins.scss

@@ -0,0 +1,9 @@
+@use './MrlBrandColors.functions.scss' as functions;
+@mixin pattern-classes($patterns) {
+	@each $pattern-name, $color-counts in $patterns {
+		$grid-template-areas: functions.color-grid($color-counts);
+		.#{$pattern-name} {
+			grid-template-areas: $grid-template-areas;
+		}
+	}
+}

package/dist/styles/MrlBrandColors/module.scss

@@ -0,0 +1,24 @@
+@use '@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
+@use './MrlBrandColors.functions.scss' as *;
+@use './MrlBrandColors.variables.scss' as *;
+@use './MrlBrandColors.mixins.scss' as *;
+@each $name, $color in $colors {
+	.MrlBrandColor-#{$name} {
+		background-color: #{$color};
+		grid-area: #{$name};
+	}
+}
+.MrlBrandColors {
+	display: grid;
+	grid-template-columns: repeat(8, 1fr);
+	grid-template-rows: 1fr;
+	height: 15rem;
+	width: 100%;
+}
+@include pattern-classes($patterns-xs);
+@media (min-width: $mrl-breakpoint-01) {
+	.MrlBrandColors {
+		grid-template-columns: repeat(32, 1fr);
+	}
+	@include pattern-classes($patterns);
+}

package/dist/styles/MrlBrandColors/variables.scss

@@ -0,0 +1,89 @@
+
+$colors: (
+	color-black: #000,
+	color-jade: #00c27a,
+	color-blue: #5887ff,
+	color-pink: #fc83ff,
+	color-red: #ff4b4b,
+	color-yellow: #fa0,
+	color-grape: #be53ff,
+	color-sky: #79c1ff,
+	color-lemon: #ffe146,
+	color-lavander: #e6bfff
+);
+$patterns: (
+	MrlPattern-01: (
+		(color-blue, 2),
+		(color-pink, 12),
+		(color-jade, 1),
+		(color-yellow, 8),
+		(color-red, 6),
+		(color-black, 3)
+	),
+	MrlPattern-02: (
+		(color-blue, 3),
+		(color-black, 3),
+		(color-yellow, 1),
+		(color-red, 9),
+		(color-grape, 10),
+		(color-jade, 6)
+	),
+	MrlPattern-03: (
+		(color-black, 3),
+		(color-lemon, 2),
+		(color-red, 6),
+		(color-pink, 12),
+		(color-jade, 6),
+		(color-sky, 4)
+	),
+	MrlPattern-04: (
+		(color-jade, 2),
+		(color-sky, 6),
+		(color-black, 3),
+		(color-pink, 12),
+		(color-lemon, 7),
+		(color-red, 2)
+	),
+	MrlPattern-05: (
+		(color-lavander, 3),
+		(color-jade, 6),
+		(color-black, 2),
+		(color-yellow, 12),
+		(color-blue, 7),
+		(color-red, 2)
+	),
+	MrlPattern-06: (
+		(color-yellow, 5),
+		(color-lavander, 3),
+		(color-jade, 12),
+		(color-black, 3),
+		(color-red, 1),
+		(color-sky, 8)
+	)
+);
+$patterns-xs: (
+	MrlPattern-01: (
+		(color-blue, 2),
+		(color-pink, 6)
+	),
+	MrlPattern-02: (
+		(color-red, 5),
+		(color-grape, 3)
+	),
+	MrlPattern-03: (
+		(color-pink, 6),
+		(color-jade, 2)
+	),
+	MrlPattern-04: (
+		(color-pink, 5),
+		(color-lemon, 3)
+	),
+	MrlPattern-05: (
+		(color-lavander, 2),
+		(color-jade, 6)
+	),
+	MrlPattern-06: (
+		(color-jade, 6),
+		(color-black, 2)
+	)
+);

package/dist/styles/MrlBreadcrumbItem/module.scss

@@ -0,0 +1,41 @@
+@use '@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+.MrlBreadcrumbItem {
+	align-items: center;
+	color: var(--mrl-color-text);
+	display: inline-flex;
+	font-size: var(--mrl-font-size-02);
+	font-weight: var(--mrl-font-weight-02);
+	line-height: var(--mrl-line-height-06);
+	min-height: var(--mrl-spacing-05);
+	&:hover {
+		color: var(--mrl-color-text-hover);
+	}
+	&--selected {
+		color: var(--mrl-color-text-selected);
+		font-weight: var(--mrl-font-weight-04);
+	}
+	a {
+		@include mrl-focus;
+		color: var(--mrl-color-text);
+		padding-right: var(--mrl-spacing-01);
+		text-decoration: none;
+		&:focus-visible::after {
+			border-radius: var(--mrl-radii-03);
+		}
+		&:hover {
+			color: var(--mrl-color-text-hover);
+		}
+		&--active {
+			color: var(--mrl-color-text-selected);
+			font-weight: var(--mrl-font-weight-04);
+		}
+	}
+	&--icon,
+	&--separator {
+		align-items: center;
+		color: var(--mrl-color-text);
+		height: 0.75rem;
+		margin: 0 var(--mrl-spacing-01);
+		width: 0.75rem;
+	}
+}

package/dist/styles/MrlBreadcrumbs/module.scss

@@ -0,0 +1,7 @@
+.MrlBreadcrumbs {
+	&--list {
+		align-items: center;
+		display: flex;
+		justify-items: flex-start;
+	}
+}

package/dist/styles/MrlButton/global.scss

@@ -0,0 +1,70 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
+@use '../button.global.scss' as *;
+@use '../button.variables.scss' as *;
+.mrlButton {
+	@include mrl-text-interactive('small');
+	@include mrl-button-size;
+	align-items: center;
+	display: inline-flex;
+	min-width: auto;
+	padding: var(--mrl-button-inset-vertical) var(--mrl-button-inset-horizontal);
+	text-align: center;
+	vertical-align: middle;
+	white-space: nowrap;
+	.mrl-tooltip-trigger-content {
+		align-items: center;
+		display: inline-flex;
+		flex-direction: inherit;
+	}
+	&.mrlButton--small {
+		@include mrl-text-interactive('xsmall');
+		@include mrl-button-size('small');
+	}
+	&.mrlButton--large {
+		@include mrl-text-interactive;
+		@include mrl-button-size('large');
+	}
+	.MrlSvgContainer,
+	.MrlSpinner-container {
+		margin-right: var(--mrl-button-icon-margin-right);
+		max-width: var(--mrl-button-icon-size);
+		min-width: var(--mrl-button-icon-size);
+	}
+	.mrlButton-spinner-container {
+		margin: 0 auto;
+		position: absolute;
+	}
+}
+.mrlButton--loading .mrlButton-text {
+	opacity: 0;
+}
+.mrlButton--icon-before {
+	padding-left: var(--mrl-spacing-04);
+	&.mrlButton--small {
+		padding-left: var(--mrl-spacing-03);
+	}
+	&.mrlButton--ghost,
+	&.mrlButton--ghost-inverse {
+		padding-left: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+		padding-right: var(--mrl-spacing-03);
+	}
+}
+.mrlButton--icon-after {
+	flex-direction: row-reverse;
+	padding-right: var(--mrl-spacing-04);
+	&.mrlButton--small {
+		padding-right: var(--mrl-spacing-03);
+	}
+	&.mrlButton--ghost,
+	&.mrlButton--ghost-inverse {
+		padding-left: var(--mrl-spacing-03);
+		padding-right: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+	}
+	.MrlSvgContainer,
+	.MrlSpinner-container {
+		margin-left: var(--mrl-button-icon-margin-right);
+		margin-right: 0;
+	}
+}