@muraldevkit/ui-toolkit 2.4.1 → 2.4.2

package/dist/styles/MrlTooltipContent/global.scss

@@ -1,21 +1,11 @@
-////
-/// Tooltip Content styles
-/// @group Tooltip
-////
-///
+
 @use 'sass:math';
 @use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
-
-// Created a couple Sass variables for things that are reused a lot but don't need theming
 $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);
-
-// The first number of this calculation needs to match the value of var(--mrl-tooltip-arrow-size)
 $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);
@@ -36,8 +26,6 @@ $mrl-tooltip-arrow-size: math.hypot(8px, 5px);
 	width: max-content;
 	z-index: $mrl-zIndex-tooltips;
 }
-
-// Arrow
 .mrl-tooltip-content::after {
 	background: transparent;
 	border-bottom: $mrl-tooltip-arrow-size solid var(--mrl-tooltip-background-color);
@@ -48,21 +36,16 @@ $mrl-tooltip-arrow-size: math.hypot(8px, 5px);
 	transform: rotate(135deg);
 	width: 0;
 }
-
-// State: Show (Default is hide)
 .mrl-tooltip-content:hover,
 .mrl-tooltip-trigger--active:hover + .mrl-tooltip-content,
 .mrl-tooltip-trigger--active:focus-visible + .mrl-tooltip-content {
 	@include mrl-tooltip-show;
 }
-
-// Position: Top
 .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;
@@ -70,55 +53,43 @@ $mrl-tooltip-arrow-size: math.hypot(8px, 5px);
 		transform: rotate(315deg);
 	}
 }
-
 .mrl-tooltip-content[data-anchor='start'] {
 	left: 0;
 	right: initial;
 	transform: none;
-
 	&::after {
 		left: var(--mrl-tooltip-arrow-spacing);
 	}
 }
-
 .mrl-tooltip-content[data-anchor='end'] {
 	right: 0;
 	transform: none;
-
 	&::after {
 		left: auto;
 		right: var(--mrl-tooltip-arrow-spacing);
 	}
 }
-
-// Position: Bottom
 .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[data-position='bottom'][data-anchor='center'] {
 	right: 50%;
 	transform: translateX(50%);
-
 	&::after {
 		left: calc(50% - var(--mrl-tooltip-arrow-size) / 2);
 	}
 }
-
-// Position: Left
 .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);
@@ -126,14 +97,11 @@ $mrl-tooltip-arrow-size: math.hypot(8px, 5px);
 		top: $mrl-tooltip-arrow-horizontal-center;
 	}
 }
-
-// Position: Right
 .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);

package/dist/styles/MrlTooltipContent/variables.scss

@@ -5,12 +5,7 @@
 	--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-04);
-
-	// This is the width of the arrow. The height is 5px;
-	// Note: If this is changed, the $mrl-tooltip-arrow-size variable calculation also needs updated
 	--mrl-tooltip-arrow-size: 8px;
-
-	// The arrow has an intentional exception for the border radius
 	--mrl-tooltip-arrow-border-radius: 1px;
 	--mrl-tooltip-arrow-spacing: var(--mrl-spacing-06);
 	--mrl-tooltip-arrow-display-left-right: none;

package/dist/styles/button/global.scss

@@ -1,65 +1,36 @@
-////
-/// Common Button component styles
-/// @group button
-////
 
 @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"])';
-
-// @todo - move display and visibility to common styles or remove :not selectors from
-// the skeleton definition so it doesn't need to be duplicated with the `mrl-button` component
-// which has a different HTML structure.
 .mrlIconButton,
 .mrlButton {
 	@include mrl-button-common;
-
 	display: inline-flex;
-
-	// required for focus indicator
 	position: relative;
 	visibility: inherit;
-
-	// Focus state
 	&:focus-visible::after {
 		@include mrl-focus-pseudo-element;
 	}
-
 	&--inverse:focus-visible::after,
 	&--ghost-inverse:focus-visible::after {
 		@include mrl-focus-pseudo-element($color-token: '-inverse');
 	}
-
-	// Hover state for all buttons
 	&:hover {
 		cursor: pointer;
 	}
-
-	// Disabled state
 	&[aria-disabled='true'] {
 		@include mrl-button-common-disabled;
 	}
-
 	&[aria-disabled='true']:hover {
 		@include mrl-button-common-disabled;
 	}
-
-	// Hover state for non-selected toggle buttons
 	&:hover#{$mrl-interaction-scope} {
 		@include mrl-button-common-hover;
 	}
-
-	// Active/Pressed state
-	// In order for active to work, it has to have a higher CSS specificity than :hover.
-	// Adding :active on selected toggle buttons requires a button selector re-architecture.
 	&:active#{$mrl-interaction-scope} {
 		@include mrl-button-common-active;
 	}
-
-	// Developer-initiated skeleton state
-	// Requires additional weight to overwrite other versions of the component
 	&--skeleton,
 	&--skeleton[aria-disabled='true'] {
 		@include mrl-button-skeleton;

package/dist/styles/button/mixins.scss

@@ -1,68 +1,37 @@
-////
-/// Shared Button mixins
-/// @group button
-////
 
 $mrl-button-toggle-selector: '[aria-pressed="true"],[aria-expanded="true"],[aria-selected="true"],[aria-checked="true"]';
-
-/// Default motion styles for button components
-/// @group button
 @mixin mrl-button-common-motion() {
 	transition: all var(--mrl-duration-03) var(--mrl-timing-m1);
 	transition-property: background-color, border-color, color;
 }
-
-/// Common default styles for button components
-/// @group button
 @mixin mrl-button-common() {
 	background: var(--mrl-button-background-color);
 	border: none;
 	border-radius: var(--mrl-button-border-radius);
-
-	// Due to spacing design specs in Classic, we have to use a shadow to
-	// create the border for the button
 	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;
-
-	// This adds transition styles when mousing out
 	@include mrl-button-common-motion;
 }
-
-/// Default styles for button components on hover
-/// @group button
 @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);
 }
-
-/// Default styles for button components on active/press
-/// @group button
 @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);
 }
-
-/// Default styles for button components when disabled
-/// @group button
 @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;
 }
-
-/// Styles for before element when the button has an underline/ bottom border
-/// for the toggle style
-/// @group button
-/// @todo - remove this mixin once we verify no one is using it in the product
 @mixin mrl-button-common-selected-underline {
 	background: var(--mrl-color-accent);
-
-	// This is a specific component overwrite
 	border-radius: 1px 1px 0 0;
 	bottom: calc((var(--mrl-button-underline-width) + var(--mrl-spacing-02)) * -1);
 	content: '';

package/dist/styles/button/variables.scss

@@ -1,14 +1,7 @@
-////
-/// Button shared variables
-/// @group button
-////
 
 @use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
-
 .mrlIconButton,
 .mrlButton {
-	// background-color-skeleton, border-radius, and height are all
-	// defined in the foundation package under the button skeleton
 	--mrl-button-background-color: var(--mrl-color-background);
 	--mrl-button-background-color-active: rgba(var(--mrl-gray-30), 1);
 	--mrl-button-background-color-disabled: var(--mrl-color-background);
@@ -23,49 +16,29 @@
 	--mrl-button-text-color-active: rgba(var(--mrl-black), 1);
 	--mrl-button-text-color-disabled: var(--mrl-color-text-disabled);
 	--mrl-button-text-color-hover: rgba(var(--mrl-gray-90), 1);
-
-	// Used for basic buttons only
-	--mrl-button-inset-vertical: var(--mrl-spacing-01);
-	--mrl-button-inset-horizontal: calc(var(--mrl-space-inset-control-large) + var(--mrl-spacing-01));
+	--mrl-button-inset-vertical: 0;
+	--mrl-button-inset-horizontal: var(--mrl-space-inset-control-large);
 	--mrl-button-icon-margin-right: var(--mrl-space-inline-related);
-
-	// Size variants need to be defined first as the ghost variant overwrites
-	// some of these rules
-
 	&--small {
 		@include mrl-button-size('small');
-
-		// Note: button height is defined in the button skeleton within ds-foundation
 		--mrl-button-icon-size: var(--mrl-spacing-06);
-
-		// Used for basic buttons only
 		--mrl-button-inset-horizontal: var(--mrl-spacing-04);
 	}
-
 	&.mrlIconButton--small {
 		@include mrl-button-size('small', true);
-
 		+ .mrl-tooltip-content {
 			--mrl-tooltip-arrow-spacing: calc(
 				(#{$mrl-button-height--small} - var(--mrl-tooltip-arrow-size)) / 2
 			);
 		}
 	}
-
 	&--large {
 		@include mrl-button-size('large');
-
-		// Note: button height is defined in the button skeleton within ds-foundation
-		// Used for basic buttons only
 		--mrl-button-inset-horizontal: var(--mrl-spacing-05);
 	}
-
 	&.mrlIconButton--large {
 		@include mrl-button-size('large', true);
 	}
-
-	// Secondary (default) buttons are the only ones with a visible border, so
-	// we want to overwrite these styles for all other kinds
 	&.mrlButton--primary,
 	&.mrlButton--ghost,
 	&.mrlButton--ghost-inverse,
@@ -77,16 +50,13 @@
 		--mrl-button-border-color-hover: transparent;
 		--mrl-button-border-color-disabled: transparent;
 	}
-
 	&--secondary-native {
 		--mrl-button-border-color: transparent;
 		--mrl-button-border-color-active: transparent;
 		--mrl-button-border-color-hover: transparent;
 		--mrl-button-border-color-disabled: transparent;
 	}
-
 	&--primary {
-		// Overrides mrl-button styles
 		--mrl-button-background-color: var(--mrl-color-brand);
 		--mrl-button-background-color-active: var(--mrl-color-brand-active);
 		--mrl-button-background-color-disabled: var(--mrl-color-background-disabled);
@@ -96,7 +66,6 @@
 		--mrl-button-text-color-disabled: var(--mrl-color-text-inverse);
 		--mrl-button-text-color-hover: var(--mrl-color-text-inverse);
 	}
-
 	&--primary-native {
 		--mrl-button-background-color: transparent;
 		--mrl-button-background-color-active: var(--mrl-black-opacity-01);
@@ -111,9 +80,7 @@
 		--mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
 		--mrl-button-text-color-hover: rgba(var(--mrl-blue-70), 1);
 	}
-
 	&--ghost {
-		// Overrides mrl-button styles
 		--mrl-button-background-color: transparent;
 		--mrl-button-background-color-active: var(--mrl-black-opacity-01);
 		--mrl-button-background-color-hover: var(--mrl-black-opacity-00);
@@ -122,13 +89,8 @@
 		--mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);
 		--mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
 		--mrl-button-text-color-hover: rgba(var(--mrl-gray-100), 1);
-
-		// Used for basic buttons only
 		--mrl-button-inset-horizontal: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
 		--mrl-button-icon-margin-right: var(--mrl-spacing-02);
-
-		// Toggle Button Styles
-		// For ghost buttons the selected state is always the same no matter what the toggle-style is
 		&[aria-pressed='true'],
 		&[aria-checked='true'],
 		&[aria-expanded='true'],
@@ -137,9 +99,7 @@
 			--mrl-button-text-color: var(--mrl-color-text-inverse);
 		}
 	}
-
 	&--ghost-inverse {
-		// Overrides mrl-button styles
 		--mrl-button-background-color: transparent;
 		--mrl-button-background-color-active: var(--mrl-white-opacity-04);
 		--mrl-button-background-color-hover: var(--mrl-white-opacity-02);
@@ -148,17 +108,11 @@
 		--mrl-button-text-color-active: var(--mrl-color-text-inverse);
 		--mrl-button-text-color-hover: var(--mrl-color-text-inverse);
 		--mrl-button-text-color-disabled: var(--mrl-white-opacity-04);
-
-		// Used for basic buttons only
 		--mrl-button-inset-horizontal: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
 		--mrl-button-icon-margin-right: var(--mrl-spacing-02);
-
-		// Skeleton state for inverse buttons
 		&.mrlButton--skeleton {
 			--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
 		}
-
-		// Default Toggle Button Styles
 		&.toggleStyle--default[aria-pressed='true'],
 		&.toggleStyle--default[aria-checked='true'],
 		&.toggleStyle--default[aria-expanded='true'],
@@ -166,8 +120,6 @@
 			--mrl-button-background-color: var(--mrl-color-background);
 			--mrl-button-text-color: var(--mrl-color-text);
 		}
-
-		// Secondary Toggle Button Styles
 		&.toggleStyle--secondary[aria-pressed='true'],
 		&.toggleStyle--secondary[aria-checked='true'],
 		&.toggleStyle--secondary[aria-expanded='true'],
@@ -175,8 +127,6 @@
 			--mrl-button-background-color: var(--mrl-color-accent);
 			--mrl-button-text-color: var(--mrl-color-text-inverse);
 		}
-
-		// Disabled Toggle Button Styles
 		&[aria-disabled='true'][aria-pressed='true'],
 		&[aria-disabled='true'][aria-checked='true'],
 		&[aria-disabled='true'][aria-expanded='true'],
@@ -185,11 +135,7 @@
 			--mrl-button-text-color-disabled: var(--mrl-white-opacity-04);
 		}
 	}
-
 	&--inverse {
-		// Overrides mrl-button styles
-		// Currently the inverse button does not follow any standard pattern of colors and
-		// requires component overwrites
 		--mrl-button-background-color: var(--mrl-color-background);
 		--mrl-button-background-color-active: var(--mrl-white-opacity-06);
 		--mrl-button-background-color-hover: var(--mrl-white-opacity-08);
@@ -201,15 +147,10 @@
 		--mrl-button-text-color: rgba(var(--mrl-gray-100), 1);
 		--mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);
 		--mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
-
-		// Skeleton state for inverse buttons
 		&.mrlButton--skeleton {
 			--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
 		}
 	}
-
-	// Disabled Toggle Button Styles
-	// -----------------------------------------------------------------------
 	&[aria-disabled='true'][aria-pressed='true'],
 	&[aria-disabled='true'][aria-checked='true'],
 	&[aria-disabled='true'][aria-expanded='true'],

package/dist/styles/divider/mixins.scss

@@ -1,35 +1,6 @@
-////
-/// Divider component mixins
-/// @group divider
-////
 
-/// Used to apply a separation between two elements without adding an additional element to the DOM. This is
-/// typically used for things like menus where we don't want to add the DOM elements for accessibility considerations
-/// for screen reader users.
-/// @group mixins
-/// @param {String} $orientation - Defines the orientation of the divider. Available options are: "horizontal" (default)
-/// @param {String} $max-width - Use when the divider should not span the full-width of the container, for example
-/// 	dividers between stacked Icon Buttons in a toolbar. Set to any valid CSS width value.
-///
-/// @example @include mrl-divider; // Generates the default horizontal divider that spans the full width of the container
-/// @example @include mrl-divider($max-width: 2rem); // Generates a separation that is only 2rems wide and centers it between
-/// 	the overall container's width
-/// @todo - since this is no longer used in the component implementation, we need to use this in another component (e.g. menu)
-/// 	or set up Storybook so we can test Sass mixins to ensure this is not breaking
 @mixin mrl-divider($orientation: 'horizontal', $max-width: '') {
-	// Note: if you change this CSS before the @todo comment is addressed, you'll need to run the changes in the product to
-	// verify nothing breaks
 	position: relative;
-
-	// We use pseudo elements so we can apply this to non-divider elements
-	// for better accessibility support
-
-	// The :before element is used to ensure the proper spacing as margin-top
-	// will push content down but margin-bottom does not reflow the content
-
-	// The :after element is the actual visual divider we display to the user
-	// The element that these pseudo elements are applied to is position relative
-
 	@if $orientation == 'horizontal' {
 		&::before {
 			content: '';
@@ -38,7 +9,6 @@
 			margin-top: calc(var(--mrl-divider-spacing) * 2);
 			width: 100%;
 		}
-
 		&::after {
 			background-color: var(--mrl-divider-color);
 			content: '';
@@ -47,26 +17,15 @@
 			position: absolute;
 			top: calc(var(--mrl-divider-spacing) * -1);
 			width: 100%;
-
-			/* stylelint-disable-next-line max-nesting-depth */
 			@if $max-width != '' {
 				@include mrl-divider-center;
-
 				max-width: $max-width;
 			}
 		}
 	} @else {
-		// @todo - the pseudo elements can't push content to the right
-		// in order to get the correct spacing
 		@warn 'Vertical dividers are not supported as pseudo elements';
 	}
 }
-
-/// Used to create DRY code for shared styles between the actual divider component and mixin.
-/// This mixin is not intended for external adoption.
-/// @group mixins
-///
-/// @example @include mrl-divider-center; // Adds shared code to your implementation
 @mixin mrl-divider-center() {
 	left: 50%;
 	transform: translateX(-50%);

package/dist/styles/divider/variables.scss

@@ -1,31 +1,19 @@
-////
-/// Divider component variables
-/// @group divider
-////
 
-// Need to define on both the class and the :root to support usage outside of the component
 :root,
 .MrlDivider {
 	--mrl-divider-size: var(--mrl-spacing-01);
 	--mrl-divider-spacing: var(--mrl-space-stack-section-divider);
 	--mrl-divider-color: var(--mrl-color-line-divider);
 }
-
-// Spacing variants (only applies to horizontal dividers)
 .MrlDivider--small {
 	--mrl-divider-spacing: var(--mrl-space-stack-section-divider-small);
 }
-
 .MrlDivider--large {
 	--mrl-divider-spacing: var(--mrl-space-stack-section-divider-large);
 }
-
-// Kind variants
 .MrlDivider--inverse {
 	--mrl-divider-color: var(--mrl-color-line-divider-inverse);
 }
-
-// Orientation variants
 .MrlDivider--vertical {
 	--mrl-divider-spacing: var(--mrl-spacing-02);
 }

package/dist/styles/form/global.scss

@@ -1,124 +1,68 @@
-////
-/// Mural's form elements shared styles
-/// @group form-elements
-////
 
 @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
 @use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
-
-/// Shared styles for text-related inputs such as text-input and textarea
-/// There are no configurations for this mixin
-///
-/// @example @include mrl-text-inputs;
-/// @todo - v2 - this is actually used for non-text inputs too. We should rename
-/// it and it corresponding tokens to just `mrl-inputs`
 @mixin mrl-text-inputs {
 	@include mrl-text-static('small');
-
 	background: var(--mrl-text-input-background);
 	border-color: var(--mrl-text-input-border-color);
 	border-radius: var(--mrl-text-input-border-radius);
 	border-style: solid;
 	border-width: var(--mrl-text-input-border-width);
 	color: var(--mrl-text-input-color);
-
-	// We have to reset the margin on this component since
-	// Safari automatically applies 2 px
 	margin: 0;
 	min-height: var(--mrl-text-input-height);
 	padding: var(--mrl-text-input-inset-vertical) var(--mrl-text-input-inset-horizontal);
 	width: 100%;
-
-	// Need a z-index above 1 which is the focus indicator's z-index to ensure
-	// the user can interact with the input as expected
 	z-index: $mrl-zIndex-focus + 1;
-
 	&::placeholder {
 		color: var(--mrl-text-input-placeholder-color);
 	}
-
 	&:hover {
 		--mrl-text-input-border-color: var(--mrl-text-input-border-color-hover);
 		--mrl-text-input-background: var(--mrl-text-input-background-color-hover);
 	}
-
-	// For text inputs, active and focus are the same state
 	&:focus {
 		--mrl-text-input-border-color: var(--mrl-text-input-border-color-focus);
-
 		color: var(--mrl-text-input-color-focus);
 	}
-
-	// Specifically turning off the outline here as we have a custom
-	// focus indicator
 	&:focus-visible {
 		outline: none;
 	}
-
 	&:disabled {
 		--mrl-text-input-border-color: var(--mrl-text-input-border-color-disabled);
-
 		color: var(--mrl-text-input-color-disabled);
 		pointer-events: none;
 	}
-
 	&:disabled::placeholder {
 		color: var(--mrl-text-input-color-disabled);
 	}
-
 	&[aria-invalid='true'] {
 		border-color: var(--mrl-color-background-error);
 	}
 }
-
-/// Shared styles select item icon when it's displayed in the select trigger
-/// There are no configurations for this mixin
-///
-/// @example @include mrl-selectItem-icon;
 @mixin mrl-selectItem-icon {
 	flex-basis: fit-content;
 	margin-right: var(--mrl-select-item-icon-spacing);
 	max-width: var(--mrl-select-item-icon-size);
 }
-
-/// @access private
-/// @todo this needs applied to text inputs and textareas once ready from Design
-///
-/// Shared variables for inline kind inputs (select, text input, textarea)
-/// This needs to be in a mixin so we can control where it's rendered in
-/// the CSS ordering
-///
-/// @example @include mrl-inline-input-vars
 @mixin mrl-inline-input-vars {
 	--mrl-text-input-border-color: transparent;
 	--mrl-text-input-inset-vertical: var(--mrl-spacing-02);
 	--mrl-text-input-inset-horizontal: var(--mrl-spacing-03);
 	--mrl-text-input-height: var(--mrl-spacing-08);
-
 	&:hover {
 		--mrl-text-input-background-color-hover: var(--mrl-black-opacity-00);
 		--mrl-text-input-border-color: transparent;
 	}
-
 	&:focus-visible {
 		--mrl-text-input-border-color: transparent;
 	}
 }
-
-/// Shared styles for standalone checkbox host and checkbox + label wrapper
-/// There are no configurations for this mixin
-///
-/// @example @include mrl-checkbox-wrapper;
 @mixin mrl-checkbox-wrapper {
 	height: var(--mrl-checkbox-input-affordance);
 	padding: var(--mrl-checkbox-input-inset);
 	width: var(--mrl-checkbox-input-affordance);
 }
-
-/// Shared styles for checkbox input element
-/// There are no configurations for this mixin
-///
-/// @example @include mrl-checkbox-input;
 @mixin mrl-checkbox-input {
 	cursor: pointer;
 	height: var(--mrl-checkbox-input-size);