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

package/dist/styles/MrlCallout/module.scss

@@ -0,0 +1,50 @@
+@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) {
+			margin-left: var(--mrl-spacing-03);
+		}
+		:global(.mrlButton:first-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/MrlCheckbox/global.scss

@@ -0,0 +1,18 @@
+
+@use '../../forms.global.scss' as *;
+@use './MrlCheckbox.variables.scss';
+.MrlCheckbox-input:disabled {
+	~ .MrlCheckbox-inputDisplay {
+		--mrl-checkbox-input-border-color: var(--mrl-color-background-disabled);
+	}
+}
+.MrlCheckbox-input:checked:disabled {
+	~ .MrlCheckbox-inputDisplay {
+		--mrl-checkbox-input-background: var(--mrl-color-background-disabled);
+	}
+}
+.MrlCheckbox-input:checked[aria-invalid='true'] {
+	~ .MrlCheckbox-inputDisplay {
+		--mrl-checkbox-input-background: var(--mrl-color-background-error);
+	}
+}

package/dist/styles/MrlCheckbox/module.scss

@@ -0,0 +1,16 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '../../forms.global.scss' as *;
+@use './MrlCheckbox.variables.scss';
+.MrlCheckbox {
+	align-items: center;
+	display: flex;
+	min-height: var(--mrl-checkbox-height);
+	position: relative;
+	:global(.MrlCheckboxStandalone) {
+		padding-right: var(--mrl-checkbox-input-inset);
+	}
+	:first-child {
+		align-self: flex-start;
+	}
+}

package/dist/styles/MrlCheckbox/variables.scss

@@ -0,0 +1,10 @@
+
+@use '../../forms.variables.scss';
+.MrlCheckbox-input[aria-invalid='true'] {
+	~ .mrl-checkbox-inputDisplay {
+		--mrl-checkbox-input-border-color: var(--mrl-color-background-error);
+	}
+}
+.MrlCheckbox:hover {
+	--mrl-checkbox-input-border-color: rgba(var(--mrl-gray-90), 1);
+}

package/dist/styles/MrlCheckboxStandalone/global.scss

@@ -0,0 +1,18 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '../../forms.global.scss' as *;
+@use './MrlCheckboxStandalone.variables.scss';
+.MrlCheckboxStandalone-input {
+	@include mrl-focus(
+		$is-inline-element: 'true',
+		$element-radius: 'var(--mrl-border-radius-content)'
+	);
+	position: absolute;
+	& + .mrl-u-focus-indicator {
+		position: absolute;
+		left: 0;
+		top: auto;
+		height: var(--mrl-checkbox-input-size);
+		width: var(--mrl-checkbox-input-size);
+	}
+}

package/dist/styles/MrlCheckboxStandalone/module.scss

@@ -0,0 +1,42 @@
+
+@use '../../forms.global.scss' as *;
+@use './MrlCheckboxStandalone.variables.scss';
+.MrlCheckboxStandalone {
+	@include mrl-checkbox-wrapper;
+	align-items: center;
+	display: flex;
+	min-height: var(--mrl-checkbox-height);
+	position: relative;
+}
+.MrlCheckboxStandalone-inputDisplay {
+	background: var(--mrl-checkbox-input-background);
+	border-color: var(--mrl-checkbox-input-border-color);
+	border-radius: var(--mrl-checkbox-input-border-radius);
+	border-style: solid;
+	border-width: var(--mrl-checkbox-input-border-width);
+	color: var(--mrl-checkbox-input-color);
+	display: flex;
+	height: var(--mrl-checkbox-input-size);
+	width: var(--mrl-checkbox-input-size);
+	z-index: 1;
+}
+.MrlCheckboxStandalone-inputDisplay-icon {
+	display: none;
+}
+.MrlCheckboxStandalone-input {
+	@include mrl-checkbox-input;
+	&:checked ~ .MrlCheckboxStandalone-inputDisplay {
+		.MrlCheckboxStandalone-inputDisplay-icon {
+			display: block;
+		}
+	}
+	&:indeterminate ~ .MrlCheckboxStandalone-inputDisplay {
+		.MrlCheckboxStandalone-inputDisplay-icon {
+			display: block;
+		}
+	}
+}
+.MrlCheckboxStandalone .MrlCheckboxStandalone-input {
+	left: 0;
+	position: absolute;
+}

package/dist/styles/MrlCheckboxStandalone/variables.scss

@@ -0,0 +1,27 @@
+
+@use '../../forms.variables.scss';
+.MrlCheckboxStandalone-input[aria-invalid='true'] {
+	~ .MrlCheckboxStandalone-inputDisplay {
+		--mrl-checkbox-input-border-color: var(--mrl-color-background-error);
+	}
+}
+.MrlCheckboxStandalone-input:checked[aria-invalid='true'] {
+	~ .MrlCheckboxStandalone-inputDisplay {
+		--mrl-checkbox-input-border-color: var(--mrl-color-background-error);
+		--mrl-checkbox-input-background: var(--mrl-color-background-error);
+	}
+}
+.MrlCheckboxStandalone-input:disabled {
+	~ .MrlCheckboxStandalone-inputDisplay {
+		--mrl-checkbox-input-border-color: var(--mrl-color-background-disabled);
+	}
+}
+.MrlCheckboxStandalone-input:checked:disabled {
+	~ .MrlCheckboxStandalone-inputDisplay {
+		--mrl-checkbox-input-border-color: var(--mrl-color-background-disabled);
+		--mrl-checkbox-input-background: var(--mrl-color-background-disabled);
+	}
+}
+.MrlCheckboxStandalone:hover {
+	--mrl-checkbox-input-border-color: rgba(var(--mrl-gray-90), 1);
+}

package/dist/styles/MrlContainer/module.scss

@@ -0,0 +1,32 @@
+
+@use '../container.variables.scss';
+.MrlContainer {
+	background-color: var(--mrl-container-background);
+	border: var(--mrl-container-border-width) solid var(--mrl-container-border-color);
+	border-radius: var(--mrl-container-border-radius);
+	overflow: hidden;
+	padding: var(--mrl-container-padding);
+}
+.MrlContainer--helper {
+	background-color: var(--mrl-container-background--helper);
+}
+.MrlContainer--nested {
+	background-color: var(--mrl-color-background-highlight-secondary);
+	border-color: var(--mrl-color-line-highlight-secondary);
+}
+.MrlContainer--nested-options {
+	background-color: transparent;
+	border: none;
+	padding: var(--mrl-space-inset-control-large) 0 var(--mrl-space-stack-related)
+		var(--mrl-space-inset-container);
+	&-container {
+		display: flex;
+	}
+	&-divider {
+		background-color: var(--mrl-color-background-highlight-selected);
+		border-radius: var(--mrl-radii-03);
+		flex-shrink: 0;
+		margin-right: var(--mrl-spacing-06);
+		width: var(--mrl-spacing-02);
+	}
+}

package/dist/styles/MrlDivider/module.scss

@@ -0,0 +1,22 @@
+
+@use '../divider.variables.scss';
+.MrlDivider--horizontal {
+	background-color: var(--mrl-divider-color);
+	display: block;
+	height: var(--mrl-divider-size);
+	margin: var(--mrl-divider-spacing) 0;
+	width: 100%;
+	.MrlDivider--center {
+		margin: var(--mrl-divider-spacing) auto;
+	}
+}
+.MrlDivider--vertical {
+	align-self: stretch;
+	background-color: var(--mrl-divider-color);
+	display: inline-block;
+	margin: 0 var(--mrl-divider-spacing);
+	width: var(--mrl-divider-size);
+	.MrlDivider--center {
+		align-self: center;
+	}
+}

package/dist/styles/MrlEditableTextInput/module.scss

@@ -0,0 +1,105 @@
+@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 './MrlEditableTextInput.variables.scss';
+.MrlEditableTextInput-hover-button {
+	opacity: 0;
+	transition: opacity var(--mrl-duration-03) var(--mrl-timing-m2);
+}
+.MrlEditableTextInput {
+	@include mrl-text-inputs;
+	@include mrl-text-inputs-read-only;
+	@include mrl-focus($style: 'outline');
+	&:focus {
+		--mrl-text-input-border-color: transparent;
+	}
+	&:not(:disabled):read-only {
+		color: var(--mrl-text-input-color-read-only);
+		pointer-events: auto;
+		--mrl-text-input-background: none;
+	}
+	padding-left: 0;
+	&::-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;
+	}
+	&:not(:focus):hover {
+		background-color: var(--mrl-black-opacity-00);
+	}
+	&:focus-visible ~ .MrlEditableTextInput-hover-button,
+	&:focus-visible ~ .MrlEditableTextInput-right-button {
+		opacity: 0;
+	}
+}
+.MrlEditableTextInput--allowOnClick {
+	&:not(:disabled):read-only {
+		pointer-events: auto;
+	}
+}
+.MrlEditableTextInput-dynamicIcon {
+	color: var(--mrl-text-input-border-color);
+	padding-right: calc(
+		var(--mrl-text-input-inset-horizontal) + var(--mrl-text-input-icon-size) +
+			var(--mrl-text-input-icon-offset)
+	);
+	position: absolute;
+	right: var(--mrl-text-input-inset-horizontal);
+	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);
+	}
+}
+.MrlEditableTextInput--active {
+	&:focus-visible {
+		~ .MrlEditableTextInput-right-button,
+		~ .MrlEditableTextInput-hover-button {
+			opacity: 0;
+		}
+	}
+}
+.MrlEditableTextInput-dynamicIcon--active {
+	color: var(--mrl-text-input-border-color-hover);
+}
+.MrlEditableTextInput-dynamicIcon > button {
+	@include mrl-focus;
+	background: none;
+	border: none;
+	color: inherit;
+	cursor: pointer;
+	height: 20px;
+	outline: none;
+	padding: 0;
+}
+.MrlEditableTextInput-errorMessage {
+	color: var(--mrl-color-background-error);
+	font-size: var(--mrl-type-size-text-small);
+}
+.MrlEditableTextInput-errorIcon {
+	margin-right: var(--mrl-spacing-02);
+	vertical-align: middle;
+}
+.MrlEditableTextInput--wrapper {
+	font-size: var(--mrl-type-size-text-small);
+	position: relative;
+	&:hover {
+		.MrlEditableTextInput:not(:focus) {
+			background-color: var(--mrl-black-opacity-00);
+		}
+		.MrlEditableTextInput--readOnly {
+			background-color: var(--mrl-text-input-background);
+		}
+		.MrlEditableTextInput-hover-button {
+			opacity: 1;
+		}
+	}
+}

package/dist/styles/MrlEditableTextInput/variables.scss

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

package/dist/styles/MrlEditableTextarea/global.scss

@@ -0,0 +1,24 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '../../forms.global.scss' as *;
+@use '../../forms.variables.scss';
+.MrlEditableTextarea {
+	@include mrl-focus($style: 'outline');
+	&:not(:disabled):read-only {
+		--mrl-text-input-background: none;
+		color: var(--mrl-text-input-color-read-only);
+	}
+}
+.MrlEditableTextarea--wrapper {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	&:hover {
+		.MrlEditableTextarea:not(:focus) {
+			background-color: var(--mrl-black-opacity-00);
+		}
+		&.MrlEditableTextarea--readOnly {
+			background-color: var(--mrl-text-input-background);
+		}
+	}
+}

package/dist/styles/MrlEditableTextarea/module.scss

@@ -0,0 +1,78 @@
+
+@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 '../../forms.variables.scss';
+.MrlEditableTextarea {
+	@include mrl-text-inputs;
+	--mrl-text-input-border-color: var(--mrl-color-background);
+	min-height: 1.5rem;
+	padding-left: 0;
+	padding-right: var(--mrl-spacing-08);
+	resize: vertical;
+	&:focus {
+		--mrl-text-input-border-color: transparent;
+	}
+	&:disabled {
+		--mrl-text-input-border-color: var(--mrl-color-background);
+	}
+	&:read-only {
+		overflow: hidden;
+		resize: none;
+	}
+	&:not(:disabled):read-only {
+		color: var(--mrl-text-input-color-read-only);
+		--mrl-text-input-border-color: var(--mrl-color-background);
+	}
+	&:not(:focus, .MrlEditableTextarea--readOnly):hover {
+		background-color: var(--mrl-black-opacity-00);
+	}
+}
+.MrlEditableTextarea-dynamicIcon {
+	color: var(--mrl-text-input-border-color);
+	padding-right: calc(
+		var(--mrl-text-input-inset-horizontal) + var(--mrl-text-input-icon-size) +
+			var(--mrl-text-input-icon-offset)
+	);
+	position: absolute;
+	right: var(--mrl-text-input-inset-horizontal);
+	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);
+	}
+}
+.MrlEditableTextarea--active {
+	border-color: var(--mrl-text-input-border-color-hover);
+}
+.MrlEditableTextarea-dynamicIcon--active {
+	color: var(--mrl-text-input-border-color-hover);
+}
+.MrlEditableTextarea-dynamicIcon > button {
+	@include mrl-focus;
+	background: none;
+	border: none;
+	color: inherit;
+	cursor: pointer;
+	height: 1.25rem;
+	outline: none;
+	padding: 0;
+}
+.MrlEditableTextarea-errorMessage {
+	color: var(--mrl-color-background-error);
+	font-size: var(--mrl-type-size-text-small);
+}
+.MrlEditibaleTextInput-errorIcon {
+	vertical-align: middle;
+}
+.MrlEditableTextarea--wrapper {
+	&:hover {
+		.MrlEditableTextarea:not(:focus) {
+			background-color: var(--mrl-black-opacity-00);
+		}
+		.MrlEditableTextarea--readOnly:not(:focus) {
+			background-color: var(--mrl-text-input-background);
+		}
+	}
+}

package/dist/styles/MrlErrorPage/module.scss

@@ -0,0 +1,43 @@
+@use '@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
+.MrlErrorPage {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	min-height: 100dvh;
+	.MrlErrorPage-header {
+		align-items: center;
+		display: flex;
+		justify-content: space-between;
+		padding: var(--mrl-spacing-08) var(--mrl-spacing-07) var(--mrl-spacing-11) var(--mrl-spacing-07);
+		:global(.MrlSvgContainer) {
+			height: 1.875rem;
+			width: 6.188rem;
+		}
+	}
+	.MrlErrorPage-main {
+		flex-grow: 1;
+		padding: 0 var(--mrl-spacing-07) var(--mrl-spacing-08);
+	}
+	.MrlErrorPage-title {
+		color: var(--mrl-color-text-heading);
+		font-family: var(--mrl-heading-font-alt);
+		padding-bottom: var(--mrl-spacing-07);
+	}
+	.MrlErrorPage-brand-colors {
+		flex-grow: 0;
+		flex-shrink: 0;
+	}
+}
+@media (min-width: $mrl-breakpoint-02) {
+	.MrlErrorPage {
+		.MrlErrorPage-header {
+			padding: var(--mrl-spacing-08) var(--mrl-spacing-08) var(--mrl-spacing-11)
+				var(--mrl-spacing-08);
+		}
+		.MrlErrorPage-main {
+			margin: 0 auto;
+			max-width: 33.75rem;
+			padding: 0 0 var(--mrl-spacing-08) 0;
+		}
+	}
+}

package/dist/styles/MrlFieldset/module.scss

@@ -0,0 +1,2 @@
+
+@use '../../label/MrlLabel/MrlLabel.module.scss';

package/dist/styles/MrlFilter/module.scss

@@ -0,0 +1,5 @@
+.MrlFilter {
+	display: flex;
+	gap: var(--mrl-spacing-02);
+	margin: var(--mrl-spacing-05) 0;
+}

package/dist/styles/MrlFilterItem/module.scss

@@ -0,0 +1,53 @@
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+.MrlFilterItem {
+	align-items: center;
+	background-color: var(--mrl-color-background-decorative);
+	border-radius: var(--mrl-border-radius-rounded);
+	color: rgba(var(--mrl-gray-100), 1);
+	display: flex;
+	font-family: var(--mrl-body-font);
+	font-size: var(--mrl-font-size-02);
+	font-weight: var(--mrl-font-weight-04);
+	gap: var(--mrl-spacing-02);
+	height: var(--mrl-spacing-08);
+	justify-content: center;
+	line-height: var(--mrl-line-height-06);
+	min-width: 3.5rem;
+	outline-color: transparent;
+	padding: var(--mrl-spacing-03) var(--mrl-spacing-04);
+	text-align: center;
+	transition: outline-color var(--mrl-duration-04) var(--mrl-timing-m2),
+		background-color var(--mrl-duration-04) var(--mrl-timing-m2),
+		color var(--mrl-duration-04) var(--mrl-timing-m2);
+	:global(.MrlBadge) {
+		border-radius: var(--mrl-border-radius-rounded);
+		color: rgba(var(--mrl-gray-100), 1);
+		font-size: 0.625rem;
+		font-weight: var(--mrl-font-weight-04);
+		height: var(--mrl-spacing-05);
+		line-height: var(--mrl-line-height-02);
+		padding: var(--mrl-spacing-01) var(--mrl-spacing-02);
+		transition: outline-color var(--mrl-duration-04) var(--mrl-timing-m2),
+			background-color var(--mrl-duration-04) var(--mrl-timing-m2),
+			color var(--mrl-duration-04) var(--mrl-timing-m2);
+	}
+	&:focus-within {
+		outline: var(--mrl-line-width-focus) solid var(--mrl-color-focus);
+		outline-offset: var(--mrl-space-offset-focus);
+	}
+	&:hover {
+		background-color: var(--mrl-color-background-highlight-emph-active);
+		cursor: pointer;
+	}
+	&[aria-checked='true'] {
+		background-color: var(--mrl-color-background-inverse);
+		color: var(--mrl-color-text-inverse-selected);
+		:global(.MrlBadge) {
+			background-color: var(--mrl-color-background);
+			color: rgba(var(--mrl-gray-100), 1);
+		}
+	}
+}
+.MrlFilterItem-has-count {
+	padding-right: var(--mrl-spacing-03);
+}

package/dist/styles/MrlInlineMessage/module.scss

@@ -0,0 +1,45 @@
+.MrlInlineMessage {
+	display: flex;
+	font-size: var(--mrl-font-size-03);
+	font-weight: var(--mrl-font-weight-02);
+	margin-top: var(--mrl-spacing-02);
+	&:not(.helper) a {
+		color: inherit;
+	}
+	&.error {
+		color: var(--mrl-color-text-error);
+	}
+	&.information {
+		color: var(--mrl-color-text-highlight-emph);
+		:global(.MrlSvgContainer) {
+			color: var(--mrl-color-background-info);
+		}
+	}
+	&.warning {
+		color: var(--mrl-color-text-highlight-emph);
+		:global(.MrlSvgContainer) {
+			color: var(--mrl-color-background-warning);
+		}
+	}
+	&.success {
+		:global(.MrlSvgContainer) {
+			color: var(--mrl-color-text-success);
+		}
+	}
+	&.success,
+	&.warning,
+	&.information {
+		:global(.MrlSvgContainer.mrl-link-icon) {
+			color: inherit;
+		}
+	}
+	&.helper {
+		color: var(--mrl-color-text-secondary);
+	}
+	&-icon {
+		flex-shrink: 0;
+		height: var(--mrl-spacing-05);
+		margin-right: var(--mrl-spacing-02);
+		width: var(--mrl-spacing-05);
+	}
+}

package/dist/styles/MrlLabel/module.scss

@@ -0,0 +1,25 @@
+@use '../../text-input/MrlTextInput/MrlTextInput.variables.scss' as textInput;
+@use './MrlLabel.variables.scss';
+.MrlLabel {
+	color: var(--mrl-label-text-color);
+	display: block;
+	font-family: var(--mrl-body-font);
+	font-size: var(--mrl-label-font-size);
+	font-weight: var(--mrl-label-font-weight);
+	line-height: var(--mrl-label-line-height);
+	margin-bottom: var(--mrl-label-offset-vertical);
+	padding-left: var(--mrl-text-input-border-width);
+}
+.MrlLabel--inline {
+	align-items: center;
+	display: inline-flex;
+	margin-left: var(--mrl-label-offset-inline);
+	padding-left: 0;
+}
+.MrlLabel-icon {
+	height: var(--mrl-label-icon-size);
+	margin: var(--mrl-label-icon-inset)
+		calc(var(--mrl-label-icon-inset) + var(--mrl-label-offset-inline)) var(--mrl-label-icon-inset)
+		var(--mrl-label-icon-inset);
+	width: var(--mrl-label-icon-size);
+}

package/dist/styles/MrlLabel/variables.scss

@@ -0,0 +1,17 @@
+
+.MrlLabel {
+	--mrl-label-text-color: var(--mrl-color-text-label);
+	--mrl-label-font-size: var(--mrl-type-size-text-small);
+	--mrl-label-line-height: var(--mrl-type-line-height-text-small);
+	--mrl-label-font-weight: var(--mrl-type-weight-title-secondary);
+	--mrl-label-offset-vertical: var(--mrl-space-stack-related-small);
+}
+.MrlLabel--inline {
+	--mrl-label-offset-vertical: 0;
+	--mrl-label-offset-inline: var(--mrl-space-inline-sibling-xsmall);
+	--mrl-label-icon-inset: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+	--mrl-label-icon-size: var(--mrl-spacing-06);
+}
+.MrlLabel.mrl-is--disabled {
+	--mrl-label-text-color: var(--mrl-color-text-disabled);
+}