@brightspace-ui/core 3.135.2 → 3.135.4

package/components/inputs/demo/input-select-test.js

@@ -1,9 +1,8 @@
 import { css, html, LitElement } from 'lit';
-import { RtlMixin } from '../../../mixins/rtl/rtl-mixin.js';
 import { selectStyles } from '../input-select-styles.js';
 import { SkeletonMixin } from '../../../components/skeleton/skeleton-mixin.js';
 
-class TestInputSelect extends SkeletonMixin(RtlMixin(LitElement)) {
+class TestInputSelect extends SkeletonMixin(LitElement) {
 
 	static get properties() {
 		return {

package/components/inputs/input-select-styles.js

@@ -18,7 +18,7 @@ export const selectStyles = css`
 		background-color: #ffffff;
 		background-image: ${chevron};
 		background-origin: border-box;
-		background-position: center right 17px;
+		background-position: center var(--d2l-inline-end, right) 17px;
 		background-repeat: no-repeat;
 		background-size: 11px 7px;
 		border: none;
@@ -40,9 +40,6 @@ export const selectStyles = css`
 		padding-inline: calc(0.75rem + 1px) calc(2px + 0.8rem + 1px + 11px + 16px + 1px);
 		vertical-align: middle;
 	}
-	:host([dir="rtl"]) .d2l-input-select {
-		background-position: center left 17px;
-	}
 
 	.d2l-input-select:not([disabled]):hover,
 	.d2l-input-select:not([disabled]):${focusClass} {
@@ -52,7 +49,7 @@ export const selectStyles = css`
 	}
 	.d2l-input-select[aria-invalid="true"] {
 		background-image: ${chevron}, ${invalidIcon};
-		background-position: center right 17px, center right calc(1px + 11px + 17px);
+		background-position: center var(--d2l-inline-end, right) 17px, center var(--d2l-inline-end, right) calc(1px + 11px + 17px);
 		background-repeat: no-repeat, no-repeat;
 		background-size: 11px 7px, 0.8rem 0.8rem;
 	}
@@ -61,9 +58,6 @@ export const selectStyles = css`
 	.d2l-input-select[aria-invalid="true"]:hover {
 		outline-color: var(--d2l-color-cinnabar);
 	}
-	:host([dir="rtl"]) .d2l-input-select[aria-invalid="true"] {
-		background-position: center left 17px, center left calc(1px + 11px + 17px);
-	}
 	.d2l-input-select:disabled {
 		opacity: 0.5;
 	}
@@ -95,7 +89,7 @@ export const selectStyles = css`
 
 		.d2l-input-select[aria-invalid="true"] {
 			background-image: ${invalidIcon};
-			background-position: center right calc(1px + 11px + 17px);
+			background-position: center var(--d2l-inline-end, right) calc(1px + 11px + 17px);
 			background-repeat: no-repeat;
 			background-size: 0.8rem 0.8rem;
 		}
@@ -105,8 +99,5 @@ export const selectStyles = css`
 		.d2l-input-select[aria-invalid="true"]:hover {
 			outline-color: var(--d2l-color-cinnabar);
 		}
-		:host([dir="rtl"]) .d2l-input-select[aria-invalid="true"] {
-			background-position: center left calc(1px + 11px + 17px);
-		}
 	}
 `;

package/components/inputs/input-time.js

@@ -369,10 +369,10 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 					min-width="195"
 					?opened="${opened}">
 					<d2l-menu
-						aria-labelledby="${this._dropdownId}-label"
 						class="d2l-input-time-menu"
 						@d2l-menu-item-change="${this._handleDropdownChange}"
 						id="${this._dropdownId}"
+						label="${this.label}"
 						role="listbox"
 						root-view>
 						${menuItems}

package/components/menu/demo/custom-view.js

@@ -7,8 +7,7 @@ class CustomView extends HierarchicalViewMixin(LitElement) {
 		return [ super.styles,
 			css`
 				:host {
-					background-image: url("https://www.nasa.gov/sites/default/files/images/504349main_ngc6357_hst_big_full.jpg");
-					background-size: cover;
+					background-color: black;
 					border: 1px solid black;
 					border-radius: 0.3rem;
 					box-sizing: border-box;

package/components/menu/menu.js

@@ -262,7 +262,11 @@ class Menu extends PropertyRequiredMixin(ThemeMixin(HierarchicalViewMixin(LitEle
 	}
 
 	_labelChanged() {
-		this.setAttribute('aria-label', this.label);
+		if (typeof this.label === 'string' && this.label.trim().length > 0) {
+			this.setAttribute('aria-label', this.label);
+		} else {
+			this.removeAttribute('aria-label');
+		}
 		const returnItem = this._getMenuItemReturn();
 		if (returnItem) returnItem.setAttribute('text', this.label);
 	}

package/components/table/table-col-sort-button.js

@@ -54,7 +54,8 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 				type: String
 			},
 			_hasDropdownItems: { state: true },
-			_selectedMenuItemText: { state: true }
+			_selectedMenuItemText: { state: true },
+			_label: { state: true },
 		};
 	}
 
@@ -142,6 +143,7 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 		this._describedById = getUniqueId();
 		this._describedBySortedId = getUniqueId();
 		this._hasDropdownItems = false;
+		this._label = '';
 	}
 
 	static get focusElementSelector() {
@@ -181,13 +183,13 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 				class="${classMap({ 'd2l-dropdown-opener': this._hasDropdownItems })}"
 				title="${ifDefined(buttonTitle)}"
 				type="button">
-				<slot></slot>${iconView}
+				<slot @slotchange="${this.#handleDefaultSlotChange}"></slot>${iconView}
 			</button><span id="${this._describedById}" hidden>${buttonDescription}</span>${sortedView}`;
 		if (this._hasDropdownItems) {
 			return html`<d2l-dropdown>
 					${button}
 					<d2l-dropdown-menu no-pointer align="start" vertical-offset="4">
-						<d2l-menu @d2l-table-col-sort-button-item-change="${this._handleTablColSortButtonItemChange}">
+						<d2l-menu label="${ifDefined(this._label)}" @d2l-table-col-sort-button-item-change="${this._handleTablColSortButtonItemChange}">
 							<slot name="items" @slotchange="${this._handleSlotChange}"></slot>
 						</d2l-menu>
 					</d2l-dropdown-menu>
@@ -219,6 +221,16 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 		this._selectedMenuItemText = e.target?.text;
 	}
 
+	#handleDefaultSlotChange(e) {
+		const labels = e.target?.assignedNodes({ flatten: false })
+			.map(node => {
+				if (node.nodeType === Node.TEXT_NODE) return node.textContent;
+				if (node.nodeType === Node.ELEMENT_NODE) return node.innerText;
+			}).filter(text => typeof(text) === 'string' && text.trim().length > 0)
+			.map(text => text.replace(/[\t\n\r]+/g, ' ').trim());
+		this._label = labels.join(' ');
+	}
+
 }
 
 customElements.define('d2l-table-col-sort-button', TableColSortButton);

package/components/typography/styles.js

@@ -506,10 +506,12 @@ export const baseTypographyStyles = css`
 	html {
 		--d2l-document-direction: ltr;
 		--d2l-mirror-transform: none;
+		--d2l-inline-end: right;
 	}
 	html[dir="rtl"] {
 		--d2l-document-direction: rtl;
 		--d2l-mirror-transform: scale(-1, 1);
+		--d2l-inline-end: left;
 	}
 
 	.d2l-typography {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.135.2",
+  "version": "3.135.4",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",