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

package/dist/styles/MrlTextInput/module.scss

@@ -0,0 +1,70 @@
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+@use '../../forms.global.scss' as *;
+@use './MrlTextInput.variables.scss';
+.MrlTextInput {
+	@include mrl-text-inputs;
+	@include mrl-text-inputs-read-only;
+	@include mrl-focus($style: 'outline');
+	&--wrapper {
+		position: relative;
+	}
+	&::-ms-clear,
+	&::-ms-reveal {
+		display: none;
+		height: 0;
+		width: 0;
+	}
+	&::-webkit-search-decoration,
+	&::-webkit-search-cancel-button,
+	&::-webkit-search-results-button,
+	&::-webkit-search-results-decoration {
+		display: none;
+	}
+}
+.MrlTextInput--dynamicIcon {
+	padding-right: calc(
+		var(--mrl-text-input-inset-horizontal) + var(--mrl-text-input-icon-size) +
+			var(--mrl-text-input-icon-offset)
+	);
+}
+.MrlTextInput--persistIcon {
+	padding-left: calc(
+		var(--mrl-text-input-inset-horizontal) + var(--mrl-text-input-icon-size) +
+			var(--mrl-text-input-icon-offset)
+	);
+}
+.MrlTextInput--active {
+	border-color: var(--mrl-text-input-border-color-hover);
+}
+.MrlTextInput-dynamicIcon,
+.MrlTextInput-persistIcon {
+	color: var(--mrl-text-input-border-color);
+	position: absolute;
+	top: calc(var(--mrl-text-input-inset-vertical) + var(--mrl-line-width-border));
+	transition: color var(--mrl-duration-03) var(--mrl-timing-m2);
+	z-index: $mrl-zIndex-focus + 1;
+	&--disabled {
+		color: var(--mrl-text-input-border-color-disabled);
+	}
+}
+.MrlTextInput-dynamicIcon {
+	right: var(--mrl-text-input-inset-horizontal);
+}
+.MrlTextInput-persistIcon {
+	left: var(--mrl-text-input-inset-horizontal);
+}
+.MrlTextInput-persistIcon--active,
+.MrlTextInput-dynamicIcon--active {
+	color: var(--mrl-text-input-border-color-hover);
+}
+.MrlTextInput-dynamicIcon > button {
+	@include mrl-focus;
+	background: none;
+	border: none;
+	color: inherit;
+	cursor: pointer;
+	height: 20px;
+	outline: none;
+	padding: 0;
+}

package/dist/styles/MrlTextInput/variables.scss

@@ -0,0 +1,5 @@
+@use '../../forms.variables.scss';
+.MrlTextInput {
+	--mrl-text-input-icon-size: var(--mrl-spacing-06);
+	--mrl-text-input-icon-offset: var(--mrl-input-icon-offset);
+}

package/dist/styles/MrlTextarea/global.scss

@@ -0,0 +1,12 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '../../forms.global.scss' as *;
+@use '../../forms.variables.scss';
+.MrlTextarea {
+	@include mrl-focus($style: 'outline');
+}
+.MrlTextarea--wrapper {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+}

package/dist/styles/MrlTextarea/module.scss

@@ -0,0 +1,18 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '../../forms.global.scss' as *;
+@use '../../forms.variables.scss';
+.MrlTextarea {
+	@include mrl-text-inputs;
+	@include mrl-text-inputs-read-only;
+	resize: vertical;
+	&--auto-expand {
+		display: block;
+		max-height: 120px;
+		overflow: hidden;
+		resize: none;
+	}
+	&--read-only {
+		resize: none;
+	}
+}

package/dist/styles/MrlToast/module.scss

@@ -0,0 +1,114 @@
+@use '@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+.MrlToast {
+	align-items: center;
+	background-color: rgba(var(--mrl-status-info), 1);
+	border-radius: var(--mrl-border-radius-container);
+	box-shadow: var(--mrl-shadows-lifted);
+	color: rgba(var(--mrl-white), 1);
+	display: flex;
+	gap: var(--mrl-space-inset);
+	height: max-content;
+	justify-content: space-between;
+	max-width: 32rem;
+	min-height: var(--mrl-spacing-09);
+	min-width: 8.75rem;
+	padding: var(--mrl-space-inset-control-small) var(--mrl-spacing-05)
+		var(--mrl-space-inset-control-small) var(--mrl-spacing-04);
+	pointer-events: auto;
+	width: fit-content;
+	z-index: $mrl-zIndex-notifications-toast;
+	&.closing {
+		animation: fadeout 0.3s forwards;
+		padding: 20px;
+	}
+	@keyframes fadeout {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+			visibility: hidden;
+		}
+	}
+	.iconWrapper {
+		align-items: center;
+		display: flex;
+		flex-shrink: 0;
+		height: var(--mrl-spacing-06);
+	}
+	.content {
+		align-items: center;
+		display: flex;
+		gap: var(--mrl-space-inset);
+	}
+	.primaryMessage {
+		font-family: var(--mrl-heading-font);
+		font-size: var(--mrl-font-size-03);
+		font-weight: var(--mrl-font-weight-04);
+		letter-spacing: var(--mrl-letter-spacing-03);
+		line-height: var(--mrl-line-height-08);
+	}
+	.secondaryMessage {
+		font-family: var(--mrl-body-font);
+		font-size: var(--mrl-font-size-03);
+		font-weight: var(--mrl-font-weight-01);
+		letter-spacing: var(--mrl-letter-spacing-03);
+		line-height: var(--mrl-line-height-08);
+	}
+	.cta-container {
+		align-items: center;
+		display: flex;
+		height: 100%;
+		justify-content: center;
+	}
+	.cta {
+		vertical-align: middle;
+		&--secondary {
+			margin-right: var(--mrl-spacing-02);
+		}
+		&--close {
+			margin-left: var(--mrl-spacing-02);
+		}
+	}
+	&.reducedPadding {
+		padding: var(--mrl-spacing-02) var(--mrl-spacing-02) var(--mrl-spacing-02) var(--mrl-spacing-04);
+		.content {
+			margin-right: var(--mrl-space-inline-sibling);
+		}
+	}
+	&.infoNotification {
+		background-color: rgba(var(--mrl-status-info), 1);
+	}
+	&.warningNotification {
+		background-color: rgba(var(--mrl-status-warning), 1);
+		color: var(--mrl-color-text);
+	}
+	&.successNotification {
+		background-color: rgba(var(--mrl-status-success), 1);
+	}
+	&.errorNotification {
+		background-color: rgba(var(--mrl-status-error), 1);
+	}
+	&.privateNotification {
+		background-color: rgba(var(--mrl-status-private), 1);
+	}
+	&.generalNotification {
+		background-color: var(--mrl-color-background-inverse);
+		color: var(--mrl-color-text-inverse);
+		max-width: 100%;
+		.secondaryMessage {
+			color: var(--mrl-color-text-inverse-secondary);
+		}
+	}
+	&.collaboratorNotification {
+		background-color: transparent;
+		.primaryMessage {
+			align-items: center;
+			display: flex;
+			gap: var(--mrl-spacing-04);
+		}
+		&.darkCollaborator {
+			color: var(--mrl-color-text);
+		}
+	}
+}

package/dist/styles/MrlToolbar/module.scss

@@ -0,0 +1,53 @@
+
+$medium-size: 3.5rem;
+$small-size: 3rem;
+$xsmall-size: 2rem;
+.MrlToolbar {
+	align-items: center;
+	background: var(--mrl-color-background);
+	border-radius: var(--mrl-border-radius-container);
+	box-shadow: var(--mrl-shadows-lifted);
+	cursor: default;
+	display: flex;
+	gap: var(--mrl-spacing-02);
+	min-height: $small-size;
+	padding: var(--mrl-spacing-03);
+	pointer-events: all;
+	transition: opacity var(--mrl-duration-03) var(--mrl-timing-m3);
+}
+.MrlToolbar-inverse {
+	background: var(--mrl-color-background-inverse);
+	box-shadow: none;
+	color: var(--mrl-color-text-inverse);
+}
+.MrlToolbar-skeleton.MrlToolbar-vertical {
+	background-color: rgba(var(--mrl-gray-30), 1);
+}
+.MrlToolbar-medium {
+	gap: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
+	min-height: $medium-size;
+	padding: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
+}
+.MrlToolbar-xsmall {
+	gap: var(--mrl-spacing-01);
+	min-height: $xsmall-size;
+	padding: var(--mrl-spacing-02);
+}
+.MrlToolbar-vertical {
+	flex-direction: column;
+	min-height: 0;
+	min-width: $small-size;
+	&.MrlToolbar-medium {
+		min-width: $medium-size;
+	}
+	&.MrlToolbar-xsmall {
+		min-width: $xsmall-size;
+	}
+}
+.MrlToolbar-spaced {
+	gap: var(--mrl-spacing-05);
+	padding-left: var(--mrl-spacing-05);
+	.mrlButton + .mrlButton {
+		margin-left: calc(var(--mrl-spacing-03) / 2 * -1);
+	}
+}

package/dist/styles/MrlToolbarButton/module.scss

@@ -0,0 +1,3 @@
+.MrlToolbarButtonIcon {
+	margin-right: var(--mrl-spacing-03);
+}

package/dist/styles/MrlTooltipContent/global.scss

@@ -0,0 +1,146 @@
+
+@use 'sass:math';
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+$mrl-tooltip-arrow-horizontal-center: calc(50% - var(--mrl-tooltip-arrow-size) / 2);
+$mrl-tooltip-arrow-vertical-center: calc(var(--mrl-tooltip-arrow-size) * -1 / 2 + 1px);
+$mrl-tooltip-arrow-size: math.hypot(8px, 5px);
+@use '../tooltip.mixins.scss' as *;
+@use './MrlTooltipContent.variables.scss';
+.mrl-tooltip-content {
+	background: var(--mrl-tooltip-background-color);
+	border-radius: var(--mrl-tooltip-border-radius);
+	color: var(--mrl-tooltip-text-color);
+	cursor: default;
+	font-family: var(--mrl-body-font);
+	font-size: var(--mrl-tooltip-font-size);
+	font-weight: var(--mrl-type-weight-title-secondary);
+	line-height: var(--mrl-tooltip-line-height);
+	max-width: calc(var(--mrl-spacing-09) * 7);
+	overflow-wrap: break-word;
+	padding: var(--mrl-tooltip-padding);
+	position: absolute;
+	transition-property: opacity;
+	white-space: normal;
+	width: max-content;
+	z-index: $mrl-zIndex-tooltips;
+}
+.mrl-tooltip-content__hover {
+	background: transparent;
+	position: absolute;
+}
+.mrl-tooltip-content::after {
+	background: transparent;
+	border-bottom: $mrl-tooltip-arrow-size solid var(--mrl-tooltip-background-color);
+	border-right: $mrl-tooltip-arrow-size solid transparent;
+	content: '';
+	height: 0;
+	position: absolute;
+	transform: rotate(135deg);
+	width: 0;
+}
+.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-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-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-content[data-position='bottom'] {
+	margin-top: var(--mrl-tooltip-trigger-offset);
+	top: 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-content[data-position='bottom'][data-anchor='center'] {
+	right: 50%;
+	transform: translateX(50%);
+	&::after {
+		left: calc(50% - var(--mrl-tooltip-arrow-size) / 2);
+	}
+}
+.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-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/MrlTooltipContent/variables.scss

@@ -0,0 +1,17 @@
+.mrl-tooltip-content {
+	--mrl-tooltip-background-color: var(--mrl-color-background-inverse);
+	--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary);
+	--mrl-tooltip-border-radius: var(--mrl-border-radius-content-large);
+	--mrl-tooltip-font-size: var(--mrl-type-size-text-xsmall);
+	--mrl-tooltip-line-height: var(--mrl-type-line-height-text-xsmall);
+	--mrl-tooltip-padding: var(--mrl-spacing-02) var(--mrl-spacing-03);
+	--mrl-tooltip-arrow-size: 8px;
+	--mrl-tooltip-arrow-border-radius: 1px;
+	--mrl-tooltip-arrow-spacing: var(--mrl-spacing-06);
+	--mrl-tooltip-arrow-display-left-right: none;
+	--mrl-tooltip-trigger-offset: var(--mrl-spacing-03);
+	&--inverse {
+		--mrl-tooltip-background-color: var(--mrl-gray-80);
+		--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary);
+	}
+}

package/dist/styles/MrlTopbar/module.scss

@@ -0,0 +1,12 @@
+
+@use '../layout.variables' as *;
+.MrlTopbar {
+	min-height: $topbar-height;
+	width: 100%;
+	&--mobile {
+		padding-left: calc(var(--mrl-spacing-10) + var(--mrl-spacing-01));
+	}
+}
+.MrlTopbar--no-sidebar {
+	margin-left: 0;
+}

package/dist/styles/a11y-helpers/global.scss

@@ -0,0 +1,5 @@
+
+@use './a11y.mixins.scss' as *;
+.mrl-visually-hidden {
+	@include mrl-a11y-text;
+}

package/dist/styles/a11y-helpers/mixins.scss

@@ -0,0 +1,11 @@
+
+@mixin mrl-a11y-text() {
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}

package/dist/styles/button/global.scss

@@ -0,0 +1,38 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
+@use './button.mixins.scss' as *;
+$mrl-interaction-scope: ':not(#{$mrl-button-toggle-selector}):not([aria-disabled="true"])';
+.mrlIconButton,
+.mrlButton {
+	@include mrl-button-common;
+	display: inline-flex;
+	position: relative;
+	visibility: inherit;
+	&:focus-visible {
+		@include mrl-focus($position: 'none');
+	}
+	&--inverse:focus-visible,
+	&--ghost-inverse:focus-visible {
+		@include mrl-focus($is-inverse: 'true');
+	}
+	&:hover {
+		cursor: pointer;
+	}
+	&[aria-disabled='true'] {
+		@include mrl-button-common-disabled;
+	}
+	&[aria-disabled='true']:hover {
+		@include mrl-button-common-disabled;
+	}
+	&:hover#{$mrl-interaction-scope} {
+		@include mrl-button-common-hover;
+	}
+	&:active#{$mrl-interaction-scope} {
+		@include mrl-button-common-active;
+	}
+	&--skeleton,
+	&--skeleton[aria-disabled='true'] {
+		@include mrl-button-skeleton;
+	}
+}

package/dist/styles/button/mixins.scss

@@ -0,0 +1,42 @@
+
+$mrl-button-toggle-selector: '[aria-pressed="true"],[aria-expanded="true"],[aria-selected="true"],[aria-checked="true"]';
+@mixin mrl-button-common-motion() {
+	transition: all var(--mrl-duration-03) var(--mrl-timing-m1);
+}
+@mixin mrl-button-common() {
+	background: var(--mrl-button-background-color);
+	border: none;
+	border-radius: var(--mrl-button-border-radius);
+	box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color);
+	color: var(--mrl-button-text-color);
+	justify-content: center;
+	outline: none;
+	@include mrl-button-common-motion;
+}
+@mixin mrl-button-common-hover() {
+	background: var(--mrl-button-background-color-hover);
+	box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-hover);
+	color: var(--mrl-button-text-color-hover);
+}
+@mixin mrl-button-common-active() {
+	background: var(--mrl-button-background-color-active);
+	box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-active);
+	color: var(--mrl-button-text-color-active);
+}
+@mixin mrl-button-common-disabled() {
+	background: var(--mrl-button-background-color-disabled);
+	box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-disabled);
+	color: var(--mrl-button-text-color-disabled);
+	cursor: default;
+}
+@mixin mrl-button-common-selected-underline {
+	background: var(--mrl-color-accent);
+	border-radius: 1px 1px 0 0;
+	bottom: calc((var(--mrl-button-underline-width) + var(--mrl-spacing-02)) * -1);
+	content: '';
+	display: block;
+	height: var(--mrl-button-underline-width);
+	left: var(--mrl-spacing-02);
+	position: absolute;
+	width: calc(100% - (var(--mrl-spacing-02) * 2));
+}