@muraldevkit/ui-toolkit 2.4.0 → 2.4.2

package/dist/styles/MrlSelectItem/module.scss

@@ -1,62 +1,39 @@
-////
-/// Select Item component styles
-/// @group select-item
-////
 
 @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
 @use '../../forms.global.scss' as *;
-
 @use './MrlSelectItem.variables.scss';
-
 .mrl-select-item {
 	display: block;
 }
-
 .mrl-selectItem {
-	// The menu uses the token  --mrl-select-item-text-affordance to calculate the
-	// max height. If you change this mixin, you must also change the token
-	// within the `../variables.scss` file.
 	@include mrl-text-static($size: 'small', $kind: 'title-secondary');
-
 	background: var(--mrl-select-item-background);
 	border-radius: var(--mrl-select-item-border-radius);
 	color: var(--mrl-select-item-color);
 	cursor: pointer;
 	display: flex;
-
-	// @todo - this does not align to any contextual tokens. We need
-	// to have a better audit of them to understand how things are being designed
-	// so developers have better luck finding something that works.
 	padding: var(--mrl-select-item-padding-vertical) var(--mrl-select-item-padding-horizontal);
 	position: relative;
 }
-
 .mrl-selectItem-selectedIcon {
 	position: absolute;
 	right: var(--mrl-select-item-icon-spacing);
 	width: var(--mrl-select-item-icon-size);
 }
-
-// State: Selected
 $spacing: var(--mrl-select-item-icon-spacing);
 $item: var(var(--mrl-select-item-icon-size));
 $icon: var(var(-mrl-select-item-icon-spacing));
-
 .mrl-is--selected {
 	padding-right: calc($spacing + $item + $icon);
 }
-
 .mrl-is--focused {
 	outline: 5px auto Highlight;
 	outline: 5px auto -webkit-focus-ring-color;
 }
-
-// State: Disabled
 .mrl-selectItem[aria-disabled='true'],
 .mrl-selectItem[aria-disabled='true']:hover {
 	cursor: default;
 }
-
 .mrl-is--hidden {
 	display: none;
 }

package/dist/styles/MrlSelectItem/variables.scss

@@ -1,15 +1,8 @@
-////
-/// Select component styles
-/// @group select
-////
 
 @use '../../forms.variables.scss';
-
 .mrl-selectItem {
 	--mrl-select-item-background: var(--mrl-color-background);
 	--mrl-select-item-color: var(--mrl-color-text-highlight);
-
-	// @todo - v2 - remove --mrl-select-item-padding since it's a duplicate
 	--mrl-select-item-padding: var(--mrl-select-item-padding-vertical)
 		var(--mrl-select-item-padding-horizontal);
 	--mrl-select-item-padding-horizontal: var(--mrl-spacing-04);
@@ -18,17 +11,14 @@
 	--mrl-select-item-icon-size: var(--mrl-spacing-06);
 	--mrl-select-item-icon-spacing: var(--mrl-spacing-03);
 }
-
 .mrl-selectItem:hover {
 	--mrl-select-item-background: var(--mrl-color-background-highlight-hover);
 	--mrl-select-item-color: var(--mrl-color-text-highlight-hover);
 }
-
 .mrl-is--selected {
 	--mrl-select-item-background: var(--mrl-color-background-highlight-selected);
 	--mrl-select-item-color: var(--mrl-color-text-highlight-selected);
 }
-
 .mrl-selectItem[aria-disabled='true'],
 .mrl-selectItem[aria-disabled='true']:hover {
 	--mrl-select-item-background: transparent;

package/dist/styles/MrlSelectMenu/module.scss

@@ -1,26 +1,14 @@
-////
-/// Select Menu component styles
-/// @group select-menu
-////
-///
-@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
 
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
 @use './MrlSelectMenu.variables.scss';
-
 $affordance: var(--mrl-select-item-text-affordance);
 $item-padding: var(--mrl-select-item-padding-vertical);
 $space: var(--mrl-select-item-spacing-stack);
-
 .mrl-selectMenu {
-	// sass-lint:disable-block border-zero
 	$mrl-selectItem-height: calc($affordance + ($item-padding * 2) + $space);
-
 	background: var(--mrl-color-background);
 	border-radius: var(--mrl-radii-03);
 	box-shadow: var(--mrl-shadow-01);
-
-	// Since the aria updates happen at the Select component level
-	// The show/hide feature of the menu resides in those files
 	display: none;
 	left: 0;
 	max-height: calc($mrl-selectItem-height * 6);
@@ -30,16 +18,12 @@ $space: var(--mrl-select-item-spacing-stack);
 	right: 0;
 	z-index: $mrl-zIndex-menus-contextual;
 }
-
-// Menu positions
 .mrl-selectMenu--bottom {
 	top: calc(100% + var(--mrl-spacing-02));
 }
-
 .mrl-selectMenu-bottom--top {
 	bottom: calc(100% + var(--mrl-spacing-02));
 }
-
 .mrl-selectMenu--open {
 	display: block;
 }

package/dist/styles/MrlSelectMenu/variables.scss

@@ -1,8 +1,3 @@
-////
-/// Select Menu component styles
-/// @group select-menu
-////
 
 .mrl-selectMenu {
-	// Add the component CSS variables to this file
 }

package/dist/styles/MrlSmartTable/module.scss

@@ -1,23 +1,7 @@
-////
-/// Table component styles
-/// @group Table
-////
 
-// IMPORTANT!
-// Please DO NOT add visual styling to the MrlSmartTable component. As
-// a smart component, it should only compose other existing components and handle
-// data and interactivity concerns. By adding styling unique to the smart component,
-// it tightly couples the composed component to the smart component and makes it
-// much more likely to have styling regressions.
-// IMPORTANT!
-
-.MrlSortToggleWrapperButton {
-	// Because sorting is performed by clicking the table header, which itself
-	// is not meant to be an interactive element, the sort controls are wrapped
-	// in a visually hidden button to allow for accessible interaction.
+.MrlSmartTable--accessible-visually-hidden-button {
 	all: unset;
 	cursor: pointer;
-
 	&:focus {
 		outline: revert;
 	}

package/dist/styles/MrlSvg/module.scss

@@ -1,35 +1,24 @@
 @use '../svg.variables.scss';
-
 .MrlSvgContainer {
 	color: inherit;
 	display: inline-flex;
-
-	// We set static height & width so the icon doesn't shrink when it's
-	// within a flex parent that has competing content. We want the icon
-	// to maintain its intended size. If the user needs the icon to scale
-	// they should use size="auto"
 	height: var(--mrl-svg-size);
 	width: var(--mrl-svg-size);
 }
-
 .MrlSvgContainer--auto {
 	height: 100%;
 	width: 100%;
 }
-
 .MrlSvg {
 	display: inline-block;
 	fill: currentcolor;
 	height: auto;
 	width: var(--mrl-svg-size);
-
 	* {
 		pointer-events: none;
 	}
 }
-
 .MrlSvg--auto {
-	// inline-flex was not filling the container unless specified
 	height: 100%;
 	width: 100%;
 }

package/dist/styles/MrlSvgAnimate/module.scss

@@ -1,22 +1,13 @@
 @use '../svg.variables.scss';
-
 .MrlSvgAnimate {
 	display: inline-block;
 	fill: currentcolor;
-
-	// We set static height & width so the icon doesn't shrink when it's
-	// within a flex parent that has competing content. We want the icon
-	// to maintain its intended size. If the user needs the icon to scale
-	// they should use size="auto"
 	height: var(--mrl-svg-size);
 	width: var(--mrl-svg-size);
-
 	* {
 		pointer-events: none;
 	}
 }
-
 .MrlSvgAnimate--auto {
-	// inline-flex was not filling the container unless specified
 	width: 100%;
 }

package/dist/styles/MrlTable/module.scss

@@ -1,10 +1,5 @@
-////
-/// Table component styles
-/// @group Table
-////
 
 @use '../table.variables.scss';
-
 .MrlTable {
 	width: 100%;
 }

package/dist/styles/MrlTableBody/module.scss

@@ -1,8 +1,2 @@
-////
-/// Table component styles
-/// @group Table
-////
 
 @use '../table.variables.scss';
-
-// .MrlTableBody {}

package/dist/styles/MrlTableCell/module.scss

@@ -1,11 +1,6 @@
-////
-/// Table component styles
-/// @group Table
-////
 
 @use '../table.variables.scss';
 @use '../table.global.scss' as *;
-
 .MrlTableCell {
 	@include mrl-cell-layout;
 }

package/dist/styles/MrlTableColumn/module.scss

@@ -1,27 +1,17 @@
-////
-/// Table component styles
-/// @group Table
-////
 
 @use '../table.variables.scss';
 @use '../table.global.scss' as *;
-
 .MrlTableColumn {
 	@include mrl-cell-layout;
-
 	color: var(--mrl-color-text);
 	font-size: var(--mrl-type-size-text);
 	font-weight: var(--mrl-type-weight-title);
-
 	&.clickable:hover {
 		background-color: var(--mrl-table-column-background-hover);
 		cursor: pointer;
 		user-select: none;
 	}
-
-	// This ensures alignment of the sort indicator icons in the
-	// table header. Please suggest/replace if there are better solutions!
-	:global(.MrlSvgContainer.header-sort-indicator) {
+	:global(.MrlTableColumn--sort-indicator) {
 		vertical-align: text-top;
 	}
 }

package/dist/styles/MrlTableEmptyState/module.scss

@@ -1,10 +1,5 @@
-////
-/// Table component styles
-/// @group Table
-////
 
 @use '../table.variables.scss';
-
 .MrlTableEmptyState {
 	align-items: center;
 	color: var(--mrl-color-text-secondary);

package/dist/styles/MrlTableHeader/module.scss

@@ -1,11 +1,6 @@
-////
-/// Table component styles
-/// @group Table
-////
 
 @use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
 @use '../table.variables.scss';
-
 .MrlTableHeader {
 	background-color: var(--mrl-color-background);
 	border-bottom: var(--mrl-table-header-row-border-bottom);

package/dist/styles/MrlTableRow/module.scss

@@ -1,17 +1,11 @@
-////
-/// Table component styles
-/// @group Table
-////
 
 @use '../table.variables.scss';
-
 .MrlTableRow {
 	border-bottom: var(--mrl-table-row-border-bottom);
 	font-size: var(--mrl-type-size-text-small);
 	font-weight: var(--mrl-type-weight-text);
 	height: var(--mrl-table-row-height);
 	outline: none;
-
 	&:hover {
 		background-color: var(--mrl-table-row-background-hover);
 	}

package/dist/styles/MrlText/module.scss

@@ -1,10 +1,4 @@
 @use './MrlText.variables.scss';
-
-////
-/// Text component styles
-/// @group Text
-////
-
 .MrlText {
 	font-family: var(--mrl-body-font);
 	font-size: var(--mrl-text-size);

package/dist/styles/MrlText/variables.scss

@@ -1,18 +1,10 @@
-////
-/// Text component variables
-/// @group Text
-////
 
 .MrlText {
 	--mrl-text-size: var(--mrl-type-size-text);
 	--mrl-text-weight: var(--mrl-type-weight-text);
 	--mrl-text-spacing: var(--mrl-type-spacing-text);
 	--mrl-text-height: var(--mrl-type-line-height-text);
-
-	// There are 5 sizes: xxsmall, xsmall, small, medium, and large.
-	// Medium is the default
 	$mrl-title-sizes: 'large', 'small', 'xsmall', 'xxsmall';
-
 	@each $size in $mrl-title-sizes {
 		&.MrlText--#{$size} {
 			--mrl-text-size: var(--mrl-type-size-text-#{$size});

package/dist/styles/MrlTextHeading/module.scss

@@ -1,18 +1,6 @@
 @use './MrlTextHeading.variables.scss';
-
-////
-/// Text/Heading component styles
-/// @group Heading
-////
-
-// ---- Poster, Display, and Headline Classes ----
-// There are also title use-cases but they follow a different scale/structure
 $mrl-heading-use-cases: 'display', 'headline';
-
-// There are 3 sizes: small, medium, and large.
-// Medium is the default
 $mrl-heading-sizes: 'large', 'small';
-
 @each $use-case in $mrl-heading-use-cases {
 	.MrlTextHeading-#{$use-case} {
 		display: block;
@@ -23,8 +11,6 @@ $mrl-heading-sizes: 'large', 'small';
 		line-height: var(--mrl-heading-height);
 	}
 }
-
-// ---- Title Classes ----
 .MrlTextHeading-title {
 	display: block;
 	font-family: var(--mrl-heading-family);

package/dist/styles/MrlTextHeading/variables.scss

@@ -1,16 +1,6 @@
-////
-/// Text/Heading component variables
-/// @group Heading
-////
 
-// ---- Poster, Display, and Headline Classes ----
-// There are also title use-cases but they follow a different scale/structure
 $mrl-heading-use-cases: 'display', 'headline';
-
-// There are 3 sizes: small, medium, and large.
-// Medium is the default
 $mrl-heading-sizes: 'large', 'small';
-
 @each $use-case in $mrl-heading-use-cases {
 	.MrlTextHeading-#{$use-case} {
 		@if $use-case == 'display' {
@@ -18,13 +8,11 @@ $mrl-heading-sizes: 'large', 'small';
 		} @else {
 			--mrl-heading-family: var(--mrl-heading-font);
 		}
-
 		--mrl-heading-size: var(--mrl-type-size-#{$use-case});
 		--mrl-heading-weight: var(--mrl-type-weight-#{$use-case});
 		--mrl-heading-spacing: var(--mrl-type-spacing-#{$use-case});
 		--mrl-heading-height: var(--mrl-type-line-height-#{$use-case});
 	}
-
 	@each $size in $mrl-heading-sizes {
 		.MrlTextHeading-#{$use-case}--#{$size} {
 			--mrl-heading-size: var(--mrl-type-size-#{$use-case}-#{$size});
@@ -33,8 +21,6 @@ $mrl-heading-sizes: 'large', 'small';
 		}
 	}
 }
-
-// ---- Title Classes ----
 .MrlTextHeading-title {
 	--mrl-heading-family: var(--mrl-heading-font);
 	--mrl-heading-size: var(--mrl-type-size-text);
@@ -42,18 +28,13 @@ $mrl-heading-sizes: 'large', 'small';
 	--mrl-heading-spacing: var(--mrl-type-spacing-text);
 	--mrl-heading-height: var(--mrl-type-line-height-text);
 }
-
-// There are 5 sizes: xxsmall, xsmall, small, medium, and large.
-// Medium is the default
 $mrl-title-sizes: 'large', 'small', 'xsmall', 'xxsmall';
-
 @each $size in $mrl-title-sizes {
 	.MrlTextHeading-title--#{$size} {
 		--mrl-heading-size: var(--mrl-type-size-text-#{$size});
 		--mrl-heading-height: var(--mrl-type-line-height-title-#{$size});
 	}
 }
-
 .MrlTextHeading-title--secondary {
 	--mrl-heading-weight: var(--mrl-type-weight-title-secondary);
 }

package/dist/styles/MrlTextInput/module.scss

@@ -2,33 +2,18 @@
 @use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
 @use '../../forms.global.scss' as *;
 @use './MrlTextInput.variables.scss';
-
-/* stylelint-disable scss/operator-no-newline-after */
-
 .MrlTextInput {
 	@include mrl-text-inputs;
 	@include mrl-focus($is-inline-element: 'true');
-
-	// Focus state
 	&.mrl-u-focus-wrapper {
-		// When used within a grid layout not setting an
-		// explicit height can create rendering issues with
-		// the focus indicator.
 		height: 100%;
 	}
-
-	/*
- 	* Since we have built a custom clearable functionality,
- 	* we should hide the default search clear from certain browsers
-  */
 	&::-ms-clear,
 	&::-ms-reveal {
 		display: none;
 		height: 0;
 		width: 0;
 	}
-
-	/* clears the ‘X’ from Chrome */
 	&::-webkit-search-decoration,
 	&::-webkit-search-cancel-button,
 	&::-webkit-search-results-button,
@@ -36,57 +21,43 @@
 		display: none;
 	}
 }
-
-// Icon support
 .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)
 	);
 }
-
-// This class is used when we hover over icons within the input
-// and can't directly target it via CSS
 .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));
 	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);
 }
-
-// @todo this needs replaced with a "nested" size button once available
 .MrlTextInput-dynamicIcon > button {
 	@include mrl-focus;
-
 	background: none;
 	border: none;
 	color: inherit;

package/dist/styles/MrlTextInput/variables.scss

@@ -1,5 +1,4 @@
 @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

@@ -1,18 +1,11 @@
-////
-/// textarea component global styles
-/// @group textarea
-////
+
 @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
 @use '../../forms.global.scss' as *;
 @use '../../forms.variables.scss';
-
 .MrlTextarea {
 	@include mrl-focus($is-inline-element: 'true');
 }
-
 .MrlTextarea-focus-wrapper {
-	// These styles remove an undefined space between the textarea
-	// and counter span
 	display: flex;
 	flex-direction: column;
 }

package/dist/styles/MrlTextarea/module.scss

@@ -1,20 +1,13 @@
-////
-/// textarea component scope styles
-/// @group textarea
-////
+
 @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
 @use '../../forms.global.scss' as *;
 @use '../../forms.variables.scss';
-
 .MrlTextarea {
 	@include mrl-text-inputs;
-
 	resize: vertical;
 }
-
 .MrlTextarea-counter {
 	@include mrl-text-static('xxsmall');
-
 	color: rgba(var(--mrl-gray-80), 1);
 	display: block;
 	margin-top: var(--mrl-spacing-02);