@brightspace-ui/core 3.155.7 → 3.155.9

package/components/inputs/input-date-range.js

@@ -10,7 +10,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { InteractiveMixin } from '../../mixins/interactive/interactive-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 export function getShiftedEndDate(startValue, endValue, prevStartValue, inclusive) {
@@ -33,7 +32,7 @@ export function getShiftedEndDate(startValue, endValue, prevStartValue, inclusiv
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when there is a change to selected start date or selected end date. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 calendar date format (`YYYY-MM-DD`).
  */
-class InputDateRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement)))))) {
+class InputDateRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
 
 	static get properties() {
 		return {

package/components/inputs/input-date-time-range.js

@@ -11,7 +11,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { InteractiveMixin } from '../../mixins/interactive/interactive-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 function _isSameDate(date1, date2) {
@@ -66,7 +65,7 @@ export function getShiftedEndDateTime(startValue, endValue, prevStartValue, incl
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when there is a change to selected start date-time or selected end date-time. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`).
  */
-class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement)))))) {
+class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
 
 	static get properties() {
 		return {

package/components/inputs/input-date-time.js

@@ -21,7 +21,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -42,7 +41,7 @@ function _getFormattedDefaultTime(defaultValue) {
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when there is a change to selected date or selected time. `value` corresponds to the selected value and is formatted in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`).
  */
-class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(RtlMixin(LitElement)))))) {
+class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
 
 	static get properties() {
 		return {
@@ -219,14 +218,9 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
 
 		const dateStyle = {};
 		if (timeHidden) {
-			dateStyle.paddingLeft = '0';
-			dateStyle.paddingRight = '0';
-		} else if (!timeHidden && this.dir === 'rtl') {
-			dateStyle.paddingLeft = '0.3rem';
-			dateStyle.paddingRight = '0';
-		} else if (!timeHidden) {
-			dateStyle.paddingLeft = '0';
-			dateStyle.paddingRight = '0.3rem';
+			dateStyle.paddingInline = '0';
+		} else {
+			dateStyle.paddingInline = '0 0.3rem';
 		}
 
 		const dateOpened = this.opened && !this._timeOpened && !this.disabled && !this.skeleton;

package/components/inputs/input-percent.js

@@ -5,7 +5,6 @@ import { FormElementMixin } from '../form/form-element-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 /**
@@ -14,7 +13,7 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when an alteration to the value is committed (typically after focus is lost) by the user. The `value` attribute reflects a JavaScript Number which is parsed from the formatted input value.
  */
-class InputPercent extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(RtlMixin(LitElement)))))) {
+class InputPercent extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
 
 	static get properties() {
 		return {

package/components/inputs/input-radio-spacer.js

@@ -1,11 +1,10 @@
 import { css, html, LitElement } from 'lit';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * Used to align related content below radio buttons
  * @slot - Additional related content
  */
-class InputRadioSpacer extends RtlMixin(LitElement) {
+class InputRadioSpacer extends LitElement {
 
 	static get styles() {
 		return css`
@@ -13,11 +12,7 @@ class InputRadioSpacer extends RtlMixin(LitElement) {
 					box-sizing: border-box;
 					display: block;
 					margin-bottom: 0.9rem;
-					padding-left: 1.7rem;
-				}
-				:host([dir="rtl"]) {
-					padding-left: 0;
-					padding-right: 1.7rem;
+					padding-inline-start: 1.7rem;
 				}
 				:host(.d2l-input-inline-help) {
 					margin-bottom: 0.9rem !important;

package/components/inputs/input-search.js

@@ -6,7 +6,6 @@ import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { inputStyles } from './input-styles.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 export const INPUT_TIMEOUT_MS = 400;
 export const SUPPRESS_ENTER_TIMEOUT_MS = 1000;
@@ -16,7 +15,7 @@ export const SUPPRESS_ENTER_TIMEOUT_MS = 1000;
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires d2l-input-search-searched - Dispatched when a search is performed. When the input is cleared, this will be fired with an empty value.
  */
-class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
+class InputSearch extends FocusMixin(LocalizeCoreElement(LitElement)) {
 
 	static get properties() {
 		return {
@@ -81,8 +80,7 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 					--d2l-button-icon-min-width: 1.5rem;
 					--d2l-button-icon-border-radius: 4px;
 					--d2l-focus-ring-offset: 1px;
-					margin-left: 0.3rem;
-					margin-right: 0.3rem;
+					margin-inline: 0.3rem;
 				}
 			`
 		];

package/components/inputs/input-styles.js

@@ -92,7 +92,7 @@ export const inputStyles = css`
 	}
 	textarea.d2l-input[aria-invalid="true"] {
 		background-image: ${invalidIcon};
-		background-position: top 12px right 18px;
+		background-position: top 12px var(--d2l-inline-end, right) 18px;
 		background-repeat: no-repeat;
 		background-size: 0.8rem 0.8rem;
 		padding-inline-end: calc(18px + 0.8rem);
@@ -100,17 +100,9 @@ export const inputStyles = css`
 	textarea.d2l-input-focus[aria-invalid="true"],
 	textarea.d2l-input[aria-invalid="true"]:hover,
 	textarea.d2l-input[aria-invalid="true"]:${focusClass} {
-		background-position: top calc(12px - 1px) right calc(18px - 1px);
+		background-position: top calc(12px - 1px) var(--d2l-inline-end, right) calc(18px - 1px);
 		padding-inline-end: calc(18px + 0.8rem - 1px);
 	}
-	:host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"] {
-		background-position: top 12px left 18px;
-	}
-	:host([dir="rtl"]) textarea.d2l-input-focus[aria-invalid="true"],
-	:host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:${focusClass},
-	:host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:hover {
-		background-position: top calc(12px - 1px) left calc(18px - 1px);
-	}
 	textarea[aria-invalid="true"].d2l-input:disabled {
 		background-image: none;
 	}

package/components/inputs/input-textarea.js

@@ -11,7 +11,6 @@ import { inputLabelStyles } from './input-label-styles.js';
 import { inputStyles } from './input-styles.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -21,7 +20,7 @@ import { styleMap } from 'lit/directives/style-map.js';
  * @fires change - Dispatched when an alteration to the value is committed (typically after focus is lost) by the user
  * @fires input - Dispatched immediately after changes by the user
  */
-class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(LitElement)))))) {
+class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(LitElement))))) {
 
 	static get properties() {
 		return {
@@ -132,8 +131,7 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 				visibility: hidden;
 			}
 			:host([no-padding]) .d2l-input {
-				padding-left: 0;
-				padding-right: 0;
+				padding-inline: 0;
 			}
 			:host([no-border][no-padding]) textarea.d2l-input:hover,
 			:host([no-border][no-padding]) textarea.d2l-input:focus {
@@ -141,11 +139,7 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 				border-right-width: 1px;
 			}
 			.d2l-input-textarea-mirror[aria-invalid="true"] {
-				padding-right: calc(18px + 0.8rem);
-			}
-			:host([dir="rtl"]) .d2l-input-textarea-mirror[aria-invalid="true"] {
-				padding-left: calc(18px + 0.8rem);
-				padding-right: 0.75rem;
+				padding-inline-end: calc(18px + 0.8rem);
 			}
 		`];
 	}

package/components/inputs/input-time-range.js

@@ -9,7 +9,6 @@ import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 export function getShiftedEndTime(startValue, endValue, prevStartValue, inclusive) {
@@ -40,7 +39,7 @@ function getValidISOTimeAtInterval(val, timeInterval) {
  * @fires change - Dispatched when there is a change to selected start time or selected end time. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 calendar time format (`hh:mm:ss`).
  */
 
-class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement))))) {
+class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement)))) {
 
 	static get properties() {
 		return {

package/components/inputs/input-time.js

@@ -17,7 +17,6 @@ import { inputStyles } from './input-styles.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const MIDNIGHT = new Date(2020, 0, 1, 0, 0, 0);
@@ -120,7 +119,7 @@ function initIntervals(size, enforceTimeIntervals) {
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when there is a change to selected time. `value` corresponds to the selected value and is formatted in ISO 8601 time format (`hh:mm:ss`).
  */
-class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(RtlMixin(LitElement)))))) {
+class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LitElement))))) {
 
 	static get properties() {
 		return {

package/components/scroll-wrapper/scroll-wrapper.js

@@ -5,7 +5,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { getFlag } from '../../helpers/flags.js';
 import { getFocusRingStyles } from '../../helpers/focus.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 export const printMediaQueryOnlyFlag = getFlag('GAUD-8263-scroll-wrapper-media-print', false);
 
@@ -44,7 +43,7 @@ function getStyleSheetInsertionPoint(elem) {
  * Wraps content which may overflow its horizontal boundaries, providing left/right scroll buttons.
  * @slot - User provided content to wrap
  */
-class ScrollWrapper extends RtlMixin(LitElement) {
+class ScrollWrapper extends LitElement {
 
 	static get properties() {
 		return {
@@ -97,32 +96,23 @@ class ScrollWrapper extends RtlMixin(LitElement) {
 				overflow-y: var(--d2l-scroll-wrapper-overflow-y, visible);
 			}
 			:host([h-scrollbar]) .d2l-scroll-wrapper-container {
-				border-left: 1px dashed var(--d2l-color-mica);
-				border-right: 1px dashed var(--d2l-color-mica);
+				border-inline: 1px dashed var(--d2l-color-mica);
 			}
 			:host([h-scrollbar][hide-actions]) .d2l-scroll-wrapper-container {
-				border-left: none;
-				border-right: none;
+				border-inline: none;
 			}
-			:host([dir="rtl"][scrollbar-right]) .d2l-scroll-wrapper-container,
-			:host(:not([dir="rtl"])[scrollbar-left]) .d2l-scroll-wrapper-container {
-				border-left: none;
+			:host([scrollbar-left]) .d2l-scroll-wrapper-container {
+				border-inline-start: none;
 			}
-			:host([dir="rtl"][scrollbar-left]) .d2l-scroll-wrapper-container,
-			:host(:not([dir="rtl"])[scrollbar-right]) .d2l-scroll-wrapper-container {
-				border-right: none;
+			:host([scrollbar-right]) .d2l-scroll-wrapper-container {
+				border-inline-end: none;
 			}
 
-			:host([dir="rtl"]) .d2l-scroll-wrapper-button-left,
-			.d2l-scroll-wrapper-button-right {
-				left: auto;
-				right: -10px;
-			}
-
-			:host([dir="rtl"]) .d2l-scroll-wrapper-button-right,
 			.d2l-scroll-wrapper-button-left {
-				left: -10px;
-				right: auto;
+				inset-inline-start: -10px;
+			}
+			.d2l-scroll-wrapper-button-right {
+				inset-inline-end: -10px;
 			}
 
 			.d2l-scroll-wrapper-actions {
@@ -270,7 +260,7 @@ class ScrollWrapper extends RtlMixin(LitElement) {
 
 	scrollDistance(distance, smooth) {
 		if (!this._container) return;
-		if (this.dir === 'rtl') distance = distance * RTL_MULTIPLIER;
+		if (document.documentElement.getAttribute('dir') === 'rtl') distance = distance * RTL_MULTIPLIER;
 		if (this._container.scrollBy) {
 			this._container.scrollBy({ left: distance, behavior: smooth ? 'smooth' : 'auto' });
 		} else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.155.7",
+  "version": "3.155.9",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -54,7 +54,7 @@
     "chalk": "^5",
     "eslint": "^9",
     "eslint-config-brightspace": "^2.0.0",
-    "eslint-plugin-unicorn": "^59",
+    "eslint-plugin-unicorn": "^60",
     "glob-all": "^3",
     "messageformat-validator": "^3.0.0-beta",
     "rollup": "^4",