@muraldevkit/ui-toolkit 2.4.0 → 2.4.2

package/dist/styles/MrlBlockNotification/global.scss

@@ -1,27 +1,16 @@
-////
-/// Block Notification component styles
-/// @group block-notification
-////
 
 @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
 @use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
-
 @use './MrlBlockNotification.mixins.scss' as *;
-
-// Transition states were not working as expected when migrated to
-// modules, so we are using global styles for now.
 .mrl-blockNotification {
 	border-radius: var(--mrl-blockNotification-radius);
-
 	&.mrl-is--transitioning {
 		@include mrl-block-notification-fade-out;
 	}
-
 	.mrl-is--closed {
 		display: none;
 	}
 }
-
 @media (prefers-reduced-motion: no-preference) {
 	.mrl-blockNotification.mrl-is--transitioning {
 		@include mrl-block-notification-slide-out;

package/dist/styles/MrlBlockNotification/mixins.scss

@@ -1,12 +1,4 @@
-////
-/// Block notification component mixins
-/// @group block-notification
-////
 
-/// CSS transition setup for block notification animations.
-/// There are no configurations for this mixin
-///
-/// @example @include mrl-block-notification-animate-in;
 @mixin mrl-block-notification-animate-in() {
 	margin-top: 0;
 	opacity: 1;
@@ -14,35 +6,15 @@
 	transition-property: margin opacity;
 	transition-timing-function: var(--mrl-timing-m1);
 }
-
-/// CSS to fade the block notification out.
-/// There are no configurations for this mixin
-///
-/// @example @include mrl-block-notification-fade-out;
 @mixin mrl-block-notification-fade-in() {
 	opacity: 0;
 }
-
-/// CSS to slide block notification out
-/// There are no configurations for this mixin
-///
-/// @example @include mrl-block-notification-slide-out;
 @mixin mrl-block-notification-slide-in() {
 	margin-top: calc(var(--mrl-blockNotification-height));
 }
-
-/// CSS to fade the block notification out.
-/// There are no configurations for this mixin
-///
-/// @example @include mrl-block-notification-fade-out;
 @mixin mrl-block-notification-fade-out() {
 	opacity: 0;
 }
-
-/// CSS to slide block notification out
-/// There are no configurations for this mixin
-///
-/// @example @include mrl-block-notification-slide-out;
 @mixin mrl-block-notification-slide-out() {
 	margin-top: calc(var(--mrl-blockNotification-height) * -1);
 }

package/dist/styles/MrlBlockNotification/module.scss

@@ -1,20 +1,12 @@
-////
-/// Block Notification component styles
-/// @group block-notification
-////
 
 @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 {
 	@include mrl-block-notification-animate-in;
-
 	align-items: center;
 	background: var(--mrl-blockNotification-background);
 	color: var(--mrl-blockNotification-color);
@@ -26,58 +18,41 @@ $mrl-notification-close-inset: var(--mrl-spacing-02);
 	padding: var(--mrl-blockNotification-inset-spacing);
 	position: relative;
 	width: 100%;
-
 	svg {
 		color: var(--mrl-blockNotification-color);
 	}
 }
-
 .mrl-blockNotification--dismissible {
 	padding-right: calc(
 		#{$mrl-notification-close-inset} + var(--mrl-blockNotification-inline-spacing) + var(--mrl-spacing-08)
 	);
 	position: relative;
 }
-
 .mrl-blockNotification-close-wrapper {
 	position: absolute;
 	right: $mrl-notification-close-inset;
 	top: 50%;
 	transform: translateY(-50%);
 }
-
 .mrl-blockNotification-message {
 	align-items: center;
-
 	h2,
 	p {
 		display: contents;
 	}
-
 	h2::after {
-		// Adds a space after the header. display: contents allows text to flow naturally but you cannot apply margin or padding
-		// that would normally be needed on the element. So this will ensure proper spacing for the text after the header.
 		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);
 }
-
-/**
- * @todo v2 - we should apply a class to the mrl-svg element instead
- * of targeting the element. However, the class should be `mrl-blockNotification-icon`
- * so we would want to rename the existing class to `mrl-blockNotification-iconWrapper`
- * which is a breaking change. Also we could explore if we need this div at all?
- **/
 .mrl-blockNotification-icon {
 	display: flex;
 	min-width: fit-content;

package/dist/styles/MrlBlockNotification/variables.scss

@@ -1,7 +1,3 @@
-////
-/// Block Notification component styles
-/// @group block-notification
-////
 
 .mrl-blockNotification {
 	--mrl-blockNotification-background: var(--mrl-color-background-info);
@@ -15,27 +11,21 @@
 	--mrl-blockNotification-radius: 0;
 	--mrl-blockNotification-svg-color: var(--mrl-color-text-inverse);
 }
-
-// Kind variants
 .mrl-blockNotification[data-kind='error'] {
 	--mrl-blockNotification-background: var(--mrl-color-background-error);
 }
-
 .mrl-blockNotification[data-kind='success'] {
 	--mrl-blockNotification-background: var(--mrl-color-background-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[data-kind='general'],
 .mrl-blockNotification[data-kind='private'] {
 	--mrl-blockNotification-background: var(--mrl-blockNotification-background-general);
 }
-
 .mrl-blockNotification[data-scope='component'] {
 	--mrl-blockNotification-radius: var(--mrl-radii-01);
 }

package/dist/styles/MrlButton/global.scss

@@ -1,17 +1,11 @@
-////
-/// Shadow Button component styles
-/// @group button
-////
 
 @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;
@@ -19,35 +13,21 @@
 	text-align: center;
 	vertical-align: middle;
 	white-space: nowrap;
-
-	// Size variants
 	&.mrlButton--small {
 		@include mrl-text-interactive('xsmall');
 		@include mrl-button-size('small');
 	}
-
 	&.mrlButton--large {
 		@include mrl-text-interactive;
 		@include mrl-button-size('large');
 	}
-
 	.MrlSvgContainer {
 		margin-right: var(--mrl-button-icon-margin-right);
-
-		// Due to the nested nature of the icon we have limited ways to overwrite
-		// the mrl-svg's CSS. There is not a way to simply apply more weight to the
-		// selector so we can use "important" or we can use completely different CSS
-		// properties. I opted to go with the latter and using min/max to overwrite
-		// "width: 100%". As the design system matures and the wild-west of Classic
-		// is removed, we may not need this level of flexibility.
 		max-width: var(--mrl-button-icon-size);
 		min-width: var(--mrl-button-icon-size);
 	}
-
-	// Icon position
 	&.mrlButton--icon-after {
 		flex-direction: row-reverse;
-
 		.MrlSvgContainer {
 			margin-left: var(--mrl-button-icon-margin-right);
 			margin-right: 0;

package/dist/styles/MrlCheckbox/global.scss

@@ -1,23 +1,16 @@
-////
-/// Checkbox component global styles
-/// @group checkbox
-////
 
 @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

@@ -1,18 +1,12 @@
-////
-/// Checkbox component scoped styles
-/// @group checkbox
-////
 
 @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;
-
 	:first-child {
 		align-self: flex-start;
 	}

package/dist/styles/MrlCheckbox/variables.scss

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

package/dist/styles/MrlCheckboxStandalone/global.scss

@@ -1,30 +1,17 @@
-////
-/// Standalone checkbox global styles
-/// @group checkbox-standalone
-////
 
 @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)'
 	);
-
-	// overrides position: relative from the focus mixin
-	/* stylelint-disable order/properties-alphabetical-order */
 	position: absolute;
-
 	& + .mrl-u-focus-indicator {
 		position: absolute;
-
-		// Fixes FF display issue
 		left: 0;
 		top: auto;
-
-		// Safari needs to have defined dimensions
 		height: var(--mrl-checkbox-input-size);
 		width: var(--mrl-checkbox-input-size);
 	}

package/dist/styles/MrlCheckboxStandalone/module.scss

@@ -1,22 +1,13 @@
-////
-/// Standalone checkbox component styles
-/// @group checkbox-standalone
-////
 
 @use '../../forms.global.scss' as *;
 @use './MrlCheckboxStandalone.variables.scss';
-
-/// @todo v2 - move mrl-checkbox-standalone styles in shared file back to this file
-
 .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);
@@ -29,27 +20,22 @@
 	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 {
 	position: absolute;
 }

package/dist/styles/MrlCheckboxStandalone/variables.scss

@@ -1,41 +1,27 @@
-////
-/// Checkbox component styles
-/// @group checkbox
-////
-@use '../../forms.variables.scss';
 
-// State: error
+@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);
 	}
 }
-
-// State: disabled
-/* stylelint-disable no-descending-specificity */
-// We want to be able to group all related-state styles together
 .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);
 	}
 }
-/* stylelint-enable no-descending-specificity */
-
-// State: hover
 .MrlCheckboxStandalone:hover {
 	--mrl-checkbox-input-border-color: rgba(var(--mrl-gray-90), 1);
 }

package/dist/styles/MrlDivider/module.scss

@@ -1,34 +1,21 @@
-////
-/// Divider component styles
-/// @group divider
-////
 
 @use '../divider.variables.scss';
-
-// Horizontal divider
 .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;
 	}
 }
-
-// Vertical divider
 .MrlDivider--vertical {
-	// A display: flex parent will give the most consistent and expected results
-	// but we add display: inline-block just in case so the user can at least see
-	// the divider and then tweak positioning as needed.
 	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/MrlFieldset/module.scss

@@ -1,7 +1,2 @@
-////
-/// fieldset component styles
-/// @group fieldset
-////
 
-// The legend element uses the same styles as the label
 @use '../../label/MrlLabel/MrlLabel.module.scss';

package/dist/styles/MrlLabel/module.scss

@@ -1,11 +1,5 @@
 @use '../../text-input/MrlTextInput/MrlTextInput.variables.scss' as textInput;
 @use './MrlLabel.variables.scss';
-
-////
-/// label component styles
-/// @group label
-////
-
 .MrlLabel {
 	color: var(--mrl-label-text-color);
 	display: block;
@@ -13,19 +7,14 @@
 	font-weight: var(--mrl-label-font-weight);
 	line-height: var(--mrl-label-line-height);
 	margin-bottom: var(--mrl-label-offset-vertical);
-
-	// The label has a slight padding to create visual alignment since
-	// the element has a border
 	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)

package/dist/styles/MrlLabel/variables.scss

@@ -1,7 +1,3 @@
-////
-/// label component variables
-/// @group label
-////
 
 .MrlLabel {
 	--mrl-label-text-color: var(--mrl-color-text-label);
@@ -10,17 +6,12 @@
 	--mrl-label-font-weight: var(--mrl-type-weight-title-secondary);
 	--mrl-label-offset-vertical: var(--mrl-space-stack-related-small);
 }
-
 .MrlLabel--inline {
-	// Overwrite
 	--mrl-label-offset-vertical: 0;
-
-	// Custom for this variant
 	--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);
 }

package/dist/styles/MrlLabelWithDescription/module.scss

@@ -1,61 +1,44 @@
-////
-/// LabelWithDescription component scoped styles
-/// @group label-with-description
-////
 
 @use './MrlLabelWithDescription.variables.scss';
-
 .MrlLabelWithDescription {
 	--mrl-label-text-padding-top: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
 	--mrl-description-margin-left: calc(var(--mrl-spacing-08) + var(--mrl-spacing-03));
 	--mrl-description-margin-top: calc(-1 * calc(var(--mrl-spacing-02) + var(--mrl-spacing-01)));
-
 	min-height: var(--mrl-spacing-09);
-
-	// keep the same size of the icon when we have a multiline label
 	:global(.MrlSvgContainer) {
 		flex-shrink: 0;
 	}
 }
-
 .MrlLabelWithDescription-label {
 	color: var(--mrl-label-with-description-color);
 	vertical-align: middle;
-
 	:global(.MrlLabel-text) {
 		padding-top: var(--mrl-label-text-padding-top);
 	}
-
 	&.has-icon {
 		:global(.MrlLabel-text) {
 			padding-top: 0;
 		}
 	}
-
 	&.has-multiline-label {
 		:global(.MrlLabel-text) {
 			padding-top: var(--mrl-label-text-padding-top);
 		}
 	}
 }
-
 .MrlLabelWithDescription-description {
 	color: var(--mrl-label-with-description-color);
 	margin-left: var(--mrl-spacing-02);
-
 	.MrlLabelWithDescription-text {
 		--mrl-text-weight: var(--mrl-type-weight-text-secondary);
 	}
-
 	&.has-icon,
 	&.has-multiline-label {
 		margin-left: var(--mrl-description-margin-left);
 	}
-
 	&.has-icon {
 		margin-top: var(--mrl-description-margin-top);
 	}
-
 	&.has-multiline-label {
 		margin-top: 0;
 	}

package/dist/styles/MrlLabelWithDescription/variables.scss

@@ -1,20 +1,13 @@
-////
-/// LabelWithDescription component styles
-/// @group label-with-description
-////
 
 .MrlLabelWithDescription {
 	--mrl-label-with-description-color: rgba(var(--mrl-gray-80), 1);
-
 	&.mrl-is--selected,
 	&.mrl-is--indeterminate {
 		--mrl-label-with-description-color: rgba(var(--mrl-gray-100), 1);
 	}
-
 	&.mrl-is--disabled {
 		--mrl-label-with-description-color: var(--mrl-color-text-disabled);
 	}
-
 	&:not(.mrl-is--disabled):hover {
 		--mrl-label-with-description-color: rgba(var(--mrl-gray-90), 1);
 	}