@muraldevkit/ui-toolkit 2.4.0 → 2.4.2

package/dist/styles/MrlLink/module.scss

@@ -1,12 +1,10 @@
 @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
 @use '../variables.scss';
-
 .mrl-link {
 	@include mrl-focus(
 		$element-radius: 'var(--mrl-radii-02)',
 		$border-width: 'var(--mrl-link-border-width)'
 	);
-
 	border-bottom: var(--mrl-link-border-width) var(--mrl-link-border-style) currentcolor;
 	color: var(--mrl-link-color);
 	font-weight: var(--mrl-link-font-weight);
@@ -14,8 +12,6 @@
 	transition: all var(--mrl-duration-03) var(--mrl-timing-m2);
 	transition-property: border-color, color;
 }
-
-// Color Scheme modifiers
 a.mrl-link--inverse {
 	@include mrl-focus(
 		$is-inverse: 'true',
@@ -23,52 +19,30 @@ a.mrl-link--inverse {
 		$border-width: 'var(--mrl-link-border-width)'
 	);
 }
-
-// Visited Links
-// -----------------------------------------------------------------------
-// Due to privacy restrictions the visited pseudo class is very particular about how it is styled
-// and is limited in what it supports.  We can not have an opacity or even define the color using
-// RGBA even if the alpha is set to full opacity.
-/* stylelint-disable color-function-notation */
 a.mrl-link:visited {
 	color: rgb(var(--mrl-red-100));
 }
-
 a.mrl-link--mono:visited {
 	color: rgb(var(--mrl-gray-80));
 }
-
 a.mrl-link--inverse:visited {
 	color: rgb(var(--mrl-white));
 }
-/* stylelint-enable color-function-notation */
-
-// Link styles
-// -----------------------------------------------------------------------
-// Note the visited styles required the use of `a` within the selector but
-// in order to overwrite the visited styles for visited links on hover and
-// active following the LVHA rule we need to apply that selector here too
 a.mrl-link:hover {
 	color: var(--mrl-link-color-hover);
 }
-
 a.mrl-link:active {
 	color: var(--mrl-link-color-active);
 }
-
-// Size Modifiers
 a.mrl-link--large {
 	@include mrl-text-interactive('large');
 }
-
 a.mrl-link--medium {
 	@include mrl-text-interactive('medium');
 }
-
 a.mrl-link--small {
 	@include mrl-text-interactive('small');
 }
-
 a.mrl-link--xsmall {
 	@include mrl-text-interactive('xsmall');
 }

package/dist/styles/MrlModal/global.scss

@@ -1,9 +1,6 @@
 @use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
-
 @use './MrlModal.variables.scss';
 @use './MrlModal.mixins.scss' as *;
-
-// Modifiers: Sizes
 @media screen and (min-width: $mrl-breakpoint-01) {
 	.mrl-modal {
 		border-radius: var(--mrl-modal-border-radius);
@@ -13,7 +10,6 @@
 		max-height: var(--mrl-modal-max-height);
 		max-width: var(--mrl-modal-size);
 	}
-
 	.mrl-native-modal,
 	.mrl-display-modal {
 		height: min(var(--mrl-modal-max-height), 100vh - var(--mrl-spacing-09) - var(--mrl-spacing-08));
@@ -21,22 +17,18 @@
 		max-height: initial;
 	}
 }
-
 .mrl-native-modal,
 .mrl-display-modal {
 	border-radius: var(--mrl-modal-border-radius) var(--mrl-modal-border-radius) 0 0;
 	@media screen and (min-width: $mrl-breakpoint-01) {
 		border-radius: var(--mrl-modal-border-radius);
 	}
-
 	.mrl-modal-close {
 		display: none;
 	}
-
 	.mrl-modal-header {
 		position: relative;
 		text-align: center;
-
 		.mrl-text-heading {
 			text-align: center;
 			width: 100%;

package/dist/styles/MrlModal/mixins.scss

@@ -1,44 +1,21 @@
-////
-/// Modal component mixins
-/// @group modal
-////
 
-/// CSS transition setup for modal backdrop/scrim animating in
-/// There are no configurations for this mixin
-///
-/// @example @include mrl-modal-scrim-in;
 @mixin mrl-modal-scrim-in() {
 	opacity: 1;
 	transition-duration: var(--mrl-duration-04);
 	transition-property: opacity;
 	transition-timing-function: var(--mrl-timing-m1);
 }
-
-/// CSS transition setup for modal backdrop/scrim animating out
-/// There are no configurations for this mixin
-///
-/// @example @include mrl-modal-scrim-out;
 @mixin mrl-modal-scrim-out() {
 	opacity: 0;
 	transition-duration: var(--mrl-duration-03);
 	transition-timing-function: var(--mrl-timing-m3);
 }
-
-/// CSS transition setup for modal dialog animating in
-/// There are no configurations for this mixin
-///
-/// @example @include mrl-modal-dialog-in;
 @mixin mrl-modal-dialog-in() {
 	transform: translate(0, 0);
 	transition-duration: var(--mrl-duration-04);
 	transition-property: transform;
 	transition-timing-function: var(--mrl-timing-m1);
 }
-
-/// CSS transition setup for modal dialog animating out
-/// There are no configurations for this mixin
-///
-/// @example @include mrl-modal-dialog-out;
 @mixin mrl-modal-dialog-out() {
 	transform: translate(0, var(--mrl-distance-02));
 	transition-duration: var(--mrl-duration-03);

package/dist/styles/MrlModal/module.scss

@@ -1,15 +1,9 @@
-////
-/// Modal component styles
-/// @group modal
-////
 
 @use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
 @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
 @use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
-
 @use './MrlModal.variables.scss';
 @use './MrlModal.mixins.scss' as *;
-
 .mrl-modal-backdrop {
 	align-items: center;
 	background: var(--mrl-modal-backdrop-background);
@@ -20,29 +14,23 @@
 	position: fixed;
 	transition: opacity 300ms ease-in-out;
 	z-index: $mrl-zIndex-overlays;
-
 	&.fade-in {
 		@include mrl-modal-scrim-in;
 	}
-
 	&.fade-out {
 		@include mrl-modal-scrim-out;
 	}
-
 	&.display {
 		display: fixed;
 	}
-
 	&.hide {
 		display: none;
 	}
-
 	&--native,
 	&--display {
 		align-items: flex-start;
 	}
 }
-
 .mrl-modal {
 	background: var(--mrl-modal-background);
 	display: flex;
@@ -53,20 +41,15 @@
 	position: relative;
 	width: 100vw;
 }
-
 .mrl-modal-close {
 	position: absolute;
-
-	// The close button is in the same location for all modal sizes
 	right: var(--mrl-modal-close-offset);
 	top: var(--mrl-modal-close-offset);
 }
-
 @media (prefers-reduced-motion: no-preference) {
 	.mrl-modal-backdrop.fade-in .mrl-modal {
 		@include mrl-modal-dialog-in;
 	}
-
 	.mrl-modal-backdrop.fade-out .mrl-modal {
 		@include mrl-modal-dialog-out;
 	}

package/dist/styles/MrlModal/variables.scss

@@ -1,33 +1,23 @@
-////
-/// Modal component styles
-/// @group modal
-////
 
 @use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
 @use '../modal.variables.scss';
-
 .mrl-modal-backdrop {
 	--mrl-modal-backdrop-background: var(--mrl-black-opacity-06);
 }
-
 .mrl-modal {
 	--mrl-modal-size: 600px;
 	--mrl-modal-border-radius: var(--mrl-radii-05);
 	--mrl-modal-background: var(--mrl-color-background);
 	--mrl-modal-max-height: 95vh;
 }
-
-/// Media queries' styles for desktop
 @media screen and (min-width: $mrl-breakpoint-01) {
 	.mrl-modal--small {
 		--mrl-modal-size: 400px;
 	}
-
 	.mrl-modal--large {
 		--mrl-modal-size: 800px;
 	}
 }
-
 .mrl-native-modal,
 .mrl-display-modal {
 	--mrl-modal-border-radius: var(--mrl-radii-04);

package/dist/styles/MrlModalContent/module.scss

@@ -1,17 +1,12 @@
 @use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
 @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-
 .mrl-modal-content {
-	// Because this is a non-standard tab-able element, we may have limitations with
-	// styling options of the focus ring.
 	@include mrl-focus($style: 'outline');
-
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
 	overflow: auto;
 	padding: 0 var(--mrl-modal-padding-horizontal) 4px;
-
 	:global(.mrl-native-modal) &,
 	:global(.mrl-display-modal) & {
 		margin-top: var(--mrl-spacing-03);

package/dist/styles/MrlModalFooter/global.scss

@@ -4,14 +4,12 @@
 	button {
 		align-self: flex-start;
 	}
-
 	.modal-secondary,
 	.modal-primary,
 	.mrlButton--primary,
 	.mrlButton--secondary {
 		margin-left: auto;
 	}
-
 	.mrlButton--primary {
 		margin: 0;
 	}

package/dist/styles/MrlModalFooter/module.scss

@@ -1,43 +1,32 @@
-////
-/// Modal footer component styles
-/// @group modal
-////
 
 @use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
 @use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
 @use './MrlModalFooter.variables.scss';
-
 .mrl-modal-footer {
 	display: flex;
 	flex-direction: row;
 	gap: var(--mrl-modal-footer-inline-margin);
 	padding: var(--mrl-modal-padding-vertical) var(--mrl-modal-padding-horizontal);
 }
-
 .mrl-modal-footer-wrapper {
 	display: flex;
 	flex-direction: column;
 	gap: var(--mrl-modal-footer-inline-margin);
 	width: 100%;
 }
-
 .slotted :global(.mrlButton) {
 	display: block;
 	width: 100%;
 }
-
-/// Media queries' styles for desktop
 @media screen and (min-width: $mrl-breakpoint-01) {
 	.mrl-modal-footer {
 		flex-direction: row;
 		justify-content: space-between;
 	}
-
 	.mrl-modal-footer-wrapper {
 		flex-direction: row;
 		justify-content: right;
 	}
-
 	.mrl-modal-footer-wrapper .slotted {
 		display: inline-flex;
 		width: auto;

package/dist/styles/MrlModalFooter/variables.scss

@@ -1,10 +1,5 @@
-////
-/// Modal footer component styles
-/// @group modal
-////
 
 @use '../modal.variables.scss';
-
 .mrl-modal-footer {
 	--mrl-modal-footer-inline-margin: var(--mrl-spacing-03);
 }

package/dist/styles/MrlModalHeader/module.scss

@@ -1,10 +1,5 @@
-////
-/// Modal header component styles
-/// @group modal
-////
 
 @use '../modal.variables.scss' as *;
-
 .mrl-modal-header {
 	color: var(--mrl-modal-header-text-color);
 	display: flex;
@@ -12,8 +7,6 @@
 		var(--mrl-type-size-headline-large) * var(--mrl-type-line-height-headline-large)
 	);
 	padding: var(--mrl-modal-padding-vertical)
-		// We calculate padding based on the position of the close button
-		// that is added to the modal container
 		calc(
 			#{$mrl-modal-close-size} + var(--mrl-modal-close-offset) + var(--mrl-modal-close-inline-margin)
 		)

package/dist/styles/MrlModalHeaderNative/module.scss

@@ -1,11 +1,6 @@
-////
-/// Modal header component styles
-/// @group modal
-////
 
 @use '../modal.variables.scss' as *;
 @use './MrlModalHeaderNative.variables.scss' as *;
-
 .mrl-modal-header-native {
 	align-items: center;
 	display: grid;
@@ -14,7 +9,6 @@
 		--mrl-native-modal-header-max-button-size
 	);
 	padding: var(--mrl-native-modal-header-padding) var(--mrl-native-modal-header-padding);
-
 	:global(.mrl-text-heading) {
 		color: var(--mrl-modal-header-text-color);
 		display: block;
@@ -25,11 +19,9 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
-
 	&__primary-content {
 		display: flex;
 		justify-content: flex-end;
-
 		:global(.mrlButton--primary-native) {
 			display: block;
 			overflow: hidden;
@@ -37,10 +29,8 @@
 			white-space: nowrap;
 		}
 	}
-
 	&__secondary-content {
 		display: flex;
-
 		:global(.mrlButton--secondary-native) {
 			display: block;
 			overflow: hidden;

package/dist/styles/MrlRadioButtonStandalone/global.scss

@@ -1,19 +1,13 @@
 @use '@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-
 .MrlRadioButtonStandalone-input {
 	@include mrl-focus(
 		$is-inline-element: 'true',
 		$element-radius: 'var(--mrl-border-radius-rounded)'
 	);
-
 	position: absolute;
 }
-
 .MrlRadioButtonStandalone-focus-indicator {
-	// Safari needs to have defined dimensions
 	height: var(--mrl-radio-button-height);
-
-	// Fixes FF display issue
 	left: 0;
 	position: absolute;
 	top: auto;

package/dist/styles/MrlRadioButtonStandalone/module.scss

@@ -1,13 +1,8 @@
-////
-/// Standalone radio button component styles
-/// @group radio-button-standalone
-////
 
 @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
 @use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
 @use '../../forms.variables.scss';
 @use './MrlRadioButtonStandalone.variables.scss';
-
 .MrlRadioButtonStandalone {
 	display: inline-block;
 	height: var(--mrl-radio-button-height);
@@ -16,7 +11,6 @@
 	position: relative;
 	width: var(--mrl-radio-button-width);
 }
-
 .MrlRadioButtonStandalone-input {
 	appearance: none;
 	cursor: pointer;
@@ -30,13 +24,11 @@
 	vertical-align: middle;
 	width: var(--mrl-radio-button-width);
 	z-index: $mrl-zIndex-focus;
-
 	&:disabled,
 	& ~ .MrlRadioButtonStandalone-faux-input {
 		cursor: default;
 		pointer-events: none;
 	}
-
 	& ~ .MrlRadioButtonStandalone-faux-input {
 		background-color: var(--mrl-radio-button-background);
 		border-color: var(--mrl-radio-button-border-color);
@@ -48,7 +40,6 @@
 		position: absolute;
 		top: 0;
 		width: var(--mrl-radio-button-width);
-
 		&::before {
 			background-color: var(--mrl-radio-button-background);
 			border-radius: var(--mrl-border-radius-rounded);

package/dist/styles/MrlRadioButtonStandalone/variables.scss

@@ -1,34 +1,26 @@
 .MrlRadioButtonStandalone-input:focus-within ~ .MrlRadioButtonStandalone-faux-input {
 	--mrl-radio-button-border-color: var(--mrl-color-line-active);
 }
-
 .MrlRadioButtonStandalone-input:hover ~ .MrlRadioButtonStandalone-faux-input {
 	--mrl-radio-button-border-color: var(--mrl-color-line-hover);
 }
-
 .MrlRadioButtonStandalone-input:checked ~ .MrlRadioButtonStandalone-faux-input {
 	--mrl-radio-button-border-color: var(--mrl-radio-button-background-selected);
-
 	&::before {
 		--mrl-radio-button-background: var(--mrl-radio-button-background-selected);
 	}
 }
-
 .MrlRadioButtonStandalone-input:disabled ~ .MrlRadioButtonStandalone-faux-input {
 	--mrl-radio-button-border-color: var(--mrl-color-line-disabled);
-
 	&::before {
 		--mrl-radio-button-background: var(--mrl-color-background-disabled);
 	}
 }
-
-// Error states
 .MrlRadioButtonStandalone-input.hasError ~ .MrlRadioButtonStandalone-faux-input,
 .MrlRadioButtonStandalone-input.hasError:checked ~ .MrlRadioButtonStandalone-faux-input,
 .MrlRadioButtonStandalone-input.hasError:hover ~ .MrlRadioButtonStandalone-faux-input {
 	--mrl-radio-button-border-color: var(--mrl-color-background-error);
 }
-
 .MrlRadioButtonStandalone-input.hasError:checked ~ .MrlRadioButtonStandalone-faux-input {
 	&::before {
 		--mrl-radio-button-background: var(--mrl-color-background-error);

package/dist/styles/MrlSelect/module.scss

@@ -1,106 +1,63 @@
-////
-/// Select component styles
-/// @group select
-////
 
 @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
 @use '../../forms.variables.scss' as selectItem;
 @use '../../forms.global.scss' as *;
-
 @use './MrlSelect.variables.scss';
-
 .mrl-select {
 	display: block;
 	position: relative;
 }
-
 .mrl-select-trigger {
 	@include mrl-text-inputs;
-
 	align-items: center;
 	box-sizing: border-box;
 	cursor: pointer;
 	display: flex;
 	justify-content: space-between;
-
-	// we can consistently overwrite this in the select component since
-	// there is always an icon
 	padding-right: var(--mrl-input-icon-offset);
 	position: relative;
-
-	// FYI, This overwrites the width set in mrl-text-inputs
 	width: auto;
 }
-
-/// -- Focus State --
 .mrl-select:focus-within > .mrl-select-trigger {
 	border-color: var(--mrl-text-input-border-color-focus);
 }
-
 .mrl-select:focus-within > .mrl-select-trigger::after {
 	@include mrl-focus-pseudo-element($border-width: 'var(--mrl-text-input-border-width)');
 }
-
 .mrl-select:focus-visible {
 	outline: none;
 }
-
-/// -- Custom trigger content --
-// We don't target classes here because the content in this span
-// is a clone copy from the selected selectItem
 .mrl-select-trigger span {
 	display: flex;
 }
-
 .mrl-select-trigger span mrl-svg {
 	@include mrl-selectItem-icon;
 }
-
-/// -- Select trigger indicator (icon) --
 .mrl-select-trigger-indicator {
 	color: var(--mrl-trigger-indicator-color);
 	margin-left: var(--mrl-input-icon-offset);
 }
-
 .mrl-select-trigger-indicator.mrl-is--open {
 	transform: rotate(180deg);
 }
-
 .mrl-select:focus-within .mrl-select-trigger-indicator {
 	color: var(--mrl-trigger-indicator-color-focus);
 }
-
 .mrl-select-trigger:hover .mrl-select-trigger-indicator {
 	color: var(--mrl-trigger-indicator-color-hover);
 }
-
-/// -- Inline kind --
-/// @todo this is just variables but it's currently being overwritten
-/// 	by the mrl-text-inputs mixin earlier in this file.
 .mrl-select-trigger--inline {
 	@include mrl-inline-input-vars;
 }
-
-/// -- Large size --
-/// @todo this is just variables but it's currently being overwritten
-/// 	by the mrl-text-inputs mixin earlier in this file.
 .mrl-select-trigger--large {
 	--mrl-text-input-height: var(--mrl-spacing-09);
 }
-
-// -- Disabled state --
-// The mixin for text inputs doesn't work in this use case because
-// of the nested behavior of the HTML
-// -- disabling for better code readability
-/* stylelint-disable no-descending-specificity */
 .mrl-select--disabled {
 	.mrl-select-trigger {
 		border-color: var(--mrl-text-input-border-color-disabled);
 		color: var(--mrl-text-input-color-disabled);
 		pointer-events: none;
 	}
-
-	// when set on the host, the style is not being inherited properly
 	.mrl-select-trigger-indicator {
 		color: var(--mrl-text-input-color-disabled);
 		cursor: default;

package/dist/styles/MrlSelect/variables.scss

@@ -1,15 +1,10 @@
-////
-/// Select component styles
-/// @group select
-////
-@use '../../forms.variables.scss';
 
+@use '../../forms.variables.scss';
 .mrl-select {
 	--mrl-select-trigger-indicator-color: var(--mrl-text-input-border-color);
 	--mrl-select-trigger-indicator-color-hover: var(--mrl-text-input-border-color-hover);
 	--mrl-select-trigger-indicator-color-focus: var(--mrl-text-input-border-color-focus);
 }
-
 .mrl-select:focus-within > .mrl-select-trigger--inline {
 	--mrl-text-input-border-color-focus: transparent;
 }