@muraldevkit/ui-toolkit 1.10.1 → 1.11.0

package/dist/styles/MrlSelect/module.scss

@@ -0,0 +1,108 @@
+////
+/// Select component styles
+/// @group select
+////
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '../MrlSelect/variables.scss' as selectItem;
+@use '../styles.scss' as *;
+@use './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;
+		pointer-events: none;
+	}
+}

package/dist/styles/MrlSelectItem/module.scss

@@ -0,0 +1,57 @@
+////
+/// Select Item component styles
+/// @group select-item
+////
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '../styles.scss' as *;
+@use './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;
+}

package/dist/styles/MrlSelectMenu/module.scss

@@ -0,0 +1,44 @@
+////
+/// Select Menu component styles
+/// @group select-menu
+////
+
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+@use '../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);
+	overflow-y: auto;
+	padding: var(--mrl-spacing-03);
+	position: absolute;
+	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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@muraldevkit/ui-toolkit",
-	"version": "1.10.1",
+	"version": "1.11.0",
 	"description": "Mural's UI Toolkit",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",