@brightspace-ui/core 2.102.0 → 2.104.0

package/README.md

@@ -65,17 +65,17 @@ npm install @brightspace-ui/core
 * Helpers
   * [Helpers](helpers/): helpers for composed DOM, unique ids, etc.
 * Mixins
-  * [ArrowKeysMixin](mixins/arrow-keys-mixin.md): manage focus with arrow keys
+  * [ArrowKeysMixin](mixins/arrow-keys/): manage focus with arrow keys
   * [AsyncContainerMixin](mixins/async-container/): manage collective async state
-  * [FocusMixin](mixins/focus-mixin.md): delegate focus to a nested element when `focus()` is called
+  * [FocusMixin](mixins/focus/): delegate focus to a nested element when `focus()` is called
   * [FormElementMixin](components/form/docs/form-element-mixin.md): allow components to participate in forms and validation
-  * [InteractiveMixin](mixins/interactive-mixin.md): enables toggling interactive elements inside of nested grids
-  * [LabelledMixin](mixins/labelled-mixin.md): label custom elements by referencing elements across DOM scopes
+  * [InteractiveMixin](mixins/interactive/): enables toggling interactive elements inside of nested grids
+  * [LabelledMixin](mixins/labelled/): label custom elements by referencing elements across DOM scopes
   * [LocalizeMixin](mixins/localize/): localize text in your components
-  * [ProviderMixin](mixins/provider-mixin.md): provide and consume data across elements in a DI-like fashion
-  * [RtlMixin](mixins/rtl-mixin.md): enable components to define RTL styles
+  * [ProviderMixin](mixins/provider/): provide and consume data across elements in a DI-like fashion
+  * [RtlMixin](mixins/rtl/): enable components to define RTL styles
   * [SkeletonMixin](components/skeleton/): make components skeleton-aware
-  * [VisibleOnAncestorMixin](mixins/visible-on-ancestor-mixin.md): display element on-hover of an ancestor
+  * [VisibleOnAncestorMixin](mixins/visible-on-ancestor/): display element on-hover of an ancestor
 * Templates
   * [PrimarySecondaryTemplate](templates/primary-secondary): Two Panel (primary and secondary) page template with header and optional footer
 

package/components/alert/alert.js

@@ -5,7 +5,7 @@ import { bodyCompactStyles, bodyStandardStyles } from '../typography/styles.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * A component for communicating important information relating to the state of the system and the user's work flow.

package/components/breadcrumbs/breadcrumb.js

@@ -1,10 +1,10 @@
 import '../icons/icon.js';
 import { css, html, LitElement } from 'lit';
 import { findComposedAncestor } from '../../helpers/dom.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { linkStyles } from '../link/link.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * An entry within a <d2l-breadcrumbs> parent.

package/components/breadcrumbs/breadcrumbs.js

@@ -1,7 +1,7 @@
 import './breadcrumb.js';
 import { css, html, LitElement } from 'lit';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * Help users understand where they are within the application, and provide useful clues about how the space is organized. They also provide a convenient navigation mechanism.

package/components/button/button-icon.js

@@ -2,14 +2,14 @@ import '../colors/colors.js';
 import '../icons/icon.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
-import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor-mixin.js';
+import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
 import { ButtonMixin } from './button-mixin.js';
 import { buttonStyles } from './button-styles.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
-import { ThemeMixin } from '../../mixins/theme-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
+import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
 
 /**
  * A button component that can be used just like the native button for instances where only an icon is displayed.
@@ -167,7 +167,6 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 				aria-haspopup="${ifDefined(this.ariaHaspopup)}"
 				aria-label="${this.ariaLabel ? this.ariaLabel : ifDefined(this.text)}"
 				?autofocus="${this.autofocus}"
-				class="d2l-label-text"
 				?disabled="${this.disabled && !this.disabledTooltip}"
 				form="${ifDefined(this.form)}"
 				formaction="${ifDefined(this.formaction)}"

package/components/button/button-mixin.js

@@ -1,4 +1,4 @@
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 
 export const ButtonMixin = superclass => class extends FocusMixin(superclass) {
 

package/components/button/button-move.js

@@ -0,0 +1,245 @@
+import '../colors/colors.js';
+import '../icons/icon.js';
+import '../tooltip/tooltip.js';
+import { css, html, LitElement } from 'lit';
+import { buttonStyles } from './button-styles.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
+
+const keyCodes = Object.freeze({
+	DOWN: 40,
+	END: 35,
+	HOME: 36,
+	LEFT: 37,
+	RIGHT: 39,
+	UP: 38
+});
+
+export const moveActions = Object.freeze({
+	up: 'up',
+	down: 'down',
+	left: 'left',
+	right: 'right',
+	rootHome: 'root-home',
+	home: 'home',
+	rootEnd: 'root-end',
+	end: 'end'
+});
+
+/**
+ * A button component that provides a move action via a single button.
+ */
+class ButtonMove extends FocusMixin(RtlMixin(LitElement)) {
+
+	static get properties() {
+		return {
+			/**
+			 * @ignore
+			 */
+			autofocus: { type: Boolean, reflect: true },
+			/**
+			 * A description to be added to the button for accessibility when text on button does not provide enough context
+			 * @type {string}
+			 */
+			description: { type: String },
+			/**
+			 * Disables the button
+			 * @type {boolean}
+			 */
+			disabled: { type: Boolean, reflect: true },
+			/**
+			 * Tooltip text when disabled
+			 * @type {string}
+			 */
+			disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
+			/**
+			 * REQUIRED: Accessible text for the button
+			 * @type {string}
+			 */
+			text: { type: String, reflect: true }
+
+		};
+	}
+
+	static get styles() {
+		return [ buttonStyles,
+			css`
+				:host {
+					display: inline-block;
+					line-height: 0;
+				}
+				:host([hidden]) {
+					display: none;
+				}
+				button {
+					background-color: transparent;
+					display: flex;
+					flex-direction: column;
+					gap: 2px;
+					margin: 0;
+					min-height: 1.8rem;
+					padding: 0;
+					position: relative;
+					width: 0.9rem;
+				}
+				d2l-icon {
+					border-radius: 0.1rem;
+					height: 0.85rem;
+					width: 0.9rem;
+				}
+				button:focus {
+					background-color: #ffffff;
+				}
+				button:hover > d2l-icon,
+				button:focus > d2l-icon {
+					background-color: var(--d2l-color-mica);
+				}
+				.up-icon {
+					border-top-left-radius: 0.3rem;
+					border-top-right-radius: 0.3rem;
+				}
+				.down-icon {
+					border-bottom-left-radius: 0.3rem;
+					border-bottom-right-radius: 0.3rem;
+				}
+
+				.up-layer,
+				.down-layer {
+					height: 1.1rem;
+					left: -0.2rem;
+					position: absolute;
+					width: 1.3rem;
+				}
+				.up-layer {
+					top: -0.25rem;
+				}
+				.down-layer {
+					bottom: -0.25rem;
+				}
+				:host([dir="rtl"]) .up-layer,
+				:host([dir="rtl"]) .down-layer {
+					left: auto;
+					right: -0.2rem;
+				}
+
+
+				/* Firefox includes a hidden border which messes up button dimensions */
+				button::-moz-focus-inner {
+					border: 0;
+				}
+				:host([disabled]) button {
+					cursor: default;
+					opacity: 0.5;
+				}
+				button[disabled]:hover > d2l-icon {
+					background-color: transparent;
+				}
+			`
+		];
+	}
+
+	constructor() {
+		super();
+		this.disabled = false;
+		/** @ignore */
+		this.autofocus = false;
+		/** @internal */
+		this._buttonId = getUniqueId();
+		/** @internal */
+		this._describedById = getUniqueId();
+	}
+
+	static get focusElementSelector() {
+		return 'button';
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener('click', this._handleClick, true);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener('click', this._handleClick, true);
+	}
+
+	render() {
+		return html`
+			<button
+				aria-describedby="${ifDefined(this.description ? this._describedById : undefined)}"
+				aria-disabled="${ifDefined(this.disabled && this.disabledTooltip ? 'true' : undefined)}"
+				aria-label="${ifDefined(this.text)}"
+				?autofocus="${this.autofocus}"
+				?disabled="${this.disabled && !this.disabledTooltip}"
+				id="${this._buttonId}"
+				@keydown="${this._handleKeydown}"
+				title="${ifDefined(this.text)}"
+				type="button">
+				<d2l-icon icon="tier1:arrow-toggle-up" class="up-icon"></d2l-icon>
+				<d2l-icon icon="tier1:arrow-toggle-down" class="down-icon"></d2l-icon>
+				<div class="up-layer" @click="${this._handleUpClick}"></div>
+				<div class="down-layer" @click="${this._handleDownClick}"></div>
+		</button>
+		${this.description ? html`<span id="${this._describedById}" hidden>${this.description}</span>` : null}
+		${this.disabled && this.disabledTooltip ? html`<d2l-tooltip for="${this._buttonId}">${this.disabledTooltip}</d2l-tooltip>` : ''}
+		`;
+	}
+
+	_dispatchAction(action) {
+		if (!action) return;
+		this.dispatchEvent(new CustomEvent('d2l-button-move-action', {
+			detail: { action },
+			bubbles: false
+		}));
+	}
+
+	_handleClick(e) {
+		if (this.disabled) {
+			e.stopPropagation();
+		}
+	}
+
+	_handleDownClick() {
+		this._dispatchAction(moveActions.down);
+	}
+
+	_handleKeydown(e) {
+		let action;
+		switch (e.keyCode) {
+			case keyCodes.UP:
+				action = moveActions.up;
+				break;
+			case keyCodes.DOWN:
+				action = moveActions.down;
+				break;
+			case keyCodes.LEFT:
+				action = moveActions.left;
+				break;
+			case keyCodes.RIGHT:
+				action = moveActions.right;
+				break;
+			case keyCodes.HOME:
+				action = (e.ctrlKey ? moveActions.rootHome : moveActions.home);
+				break;
+			case keyCodes.END:
+				action = (e.ctrlKey ? moveActions.rootEnd : moveActions.end);
+				break;
+			default:
+				return;
+		}
+
+		this._dispatchAction(action);
+		e.preventDefault();
+		e.stopPropagation();
+
+	}
+
+	_handleUpClick() {
+		this._dispatchAction(moveActions.up);
+	}
+
+}
+
+customElements.define('d2l-button-move', ButtonMove);

package/components/button/button-subtle.js

@@ -6,7 +6,7 @@ import { buttonStyles } from './button-styles.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { labelStyles } from '../typography/styles.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * A button component that can be used just like the native button, but for advanced or de-emphasized actions.

package/components/button/demo/button-move.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../demo/demo-page.js';
+			import '../button-move.js';
+		</script>
+	</head>
+	<body unresolved>
+
+		<d2l-demo-page page-title="d2l-button-move">
+
+			<h2>Move Button</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-move id="move-button" text="Reorder Item"></d2l-button-move>
+					<script>
+						document.querySelector('#move-button').addEventListener('d2l-button-move-action', e => {
+							console.log('d2l-button-move-action', e.target, e.detail);
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Move Button Disabled</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-move text="Reorder Item" disabled></d2l-button-move>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Move Button Disabled with Tooltip</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-move text="Reorder Item" disabled disabled-tooltip="Optional disabled tooltip"></d2l-button-move>
+				</template>
+			</d2l-demo-snippet>
+
+	</body>
+</html>

package/components/button/floating-buttons.js

@@ -3,7 +3,7 @@ import '../../helpers/requestIdleCallback.js';
 import { css, html, LitElement } from 'lit';
 import { getBoundingAncestor, getComposedParent } from '../../helpers/dom.js';
 import { getLegacyOffsetParent } from '../../helpers/offsetParent-legacy.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const mediaQueryList = window.matchMedia('(max-height: 500px)');

package/components/calendar/calendar.js

@@ -10,7 +10,7 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const daysInWeek = 7;
 const keyCodes = {

package/components/card/card-footer-link.js

@@ -2,10 +2,10 @@ import '../colors/colors.js';
 import '../count-badge/count-badge-icon.js';
 import '../icons/icon.js';
 import { css, html, LitElement } from 'lit';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * An icon link that can be placed in the `footer` slot.

package/components/card/card.js

@@ -1,11 +1,11 @@
 import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 /**

package/components/collapsible-panel/collapsible-panel.js

@@ -4,9 +4,9 @@ import '../expand-collapse/expand-collapse-content.js';
 import { css, html, LitElement } from 'lit';
 import { heading1Styles, heading2Styles, heading3Styles, heading4Styles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const normalizeHeadingNumber = (number) => {
 	number = parseInt(number);

package/components/count-badge/count-badge-icon.js

@@ -2,7 +2,7 @@ import '../colors/colors.js';
 import '../icons/icon.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { CountBadgeMixin } from './count-badge-mixin.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';

package/components/count-badge/count-badge-mixin.js

@@ -5,7 +5,7 @@ import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 

package/components/count-badge/count-badge.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { CountBadgeMixin } from './count-badge-mixin.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';

package/components/dialog/dialog-mixin.js

@@ -8,7 +8,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
 

package/components/dropdown/dropdown-button.js

@@ -3,7 +3,7 @@ import '../icons/icon.js';
 import { css, html, LitElement } from 'lit';
 import { DropdownOpenerMixin } from './dropdown-opener-mixin.js';
 import { dropdownOpenerStyles } from './dropdown-opener-styles.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * A "d2l-button" opener for dropdown content.

package/components/dropdown/dropdown-content-mixin.js

@@ -7,7 +7,7 @@ import { getComposedActiveElement, getFirstFocusableDescendant, getPreviousFocus
 import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
 

package/components/dropdown/dropdown-context-menu.js

@@ -1,6 +1,6 @@
 import '../button/button-icon.js';
 import { css, html, LitElement } from 'lit';
-import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor-mixin.js';
+import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
 import { DropdownOpenerMixin } from './dropdown-opener-mixin.js';
 import { dropdownOpenerStyles } from './dropdown-opener-styles.js';
 

package/components/dropdown/dropdown-menu.js

@@ -1,7 +1,7 @@
 import { html, LitElement } from 'lit';
 import { DropdownContentMixin } from './dropdown-content-mixin.js';
 import { dropdownContentStyles } from './dropdown-content-styles.js';
-import { ThemeMixin } from '../../mixins/theme-mixin.js';
+import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
 
 /**
  * A container for a "d2l-menu". It provides additional support on top of "d2l-dropdown-content" for closing the menu when menu items are selected, resetting to the root of nested menus when reopening and automatic resizing when the menu resizes.

package/components/dropdown/dropdown-more.js

@@ -1,6 +1,6 @@
 import '../button/button-icon.js';
 import { css, html, LitElement } from 'lit';
-import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor-mixin.js';
+import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
 import { DropdownOpenerMixin } from './dropdown-opener-mixin.js';
 import { dropdownOpenerStyles } from './dropdown-opener-styles.js';
 

package/components/empty-state/empty-state-simple.js

@@ -2,7 +2,7 @@ import '../button/button-subtle.js';
 import { emptyStateSimpleStyles, emptyStateStyles } from './empty-state-styles.js';
 import { html, LitElement } from 'lit';
 import { bodyCompactStyles } from '../typography/styles.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * The `d2l-empty-state-simple` component is an empty state component that displays a description. An empty state action component can be placed inside of the default slot to add an optional action.

package/components/filter/filter-overflow-group.js

@@ -3,7 +3,7 @@ import './filter-tags.js';
 import { css, html, LitElement } from 'lit';
 import { OVERFLOW_CLASS, OverflowGroupMixin } from '../overflow-group/overflow-group-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 function createFilterItem(node) {
 	const dimensionSets = node.querySelectorAll('d2l-filter-dimension-set');

package/components/filter/filter.js

@@ -22,12 +22,12 @@ import { bodyCompactStyles, bodySmallStyles, bodyStandardStyles } from '../typog
 import { css, html, LitElement, nothing } from 'lit';
 import { announce } from '../../helpers/announce.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
 
 const ARROWLEFT_KEY_CODE = 37;

package/components/focus-trap/focus-trap.js

@@ -1,6 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
 

package/components/form/form-errory-summary.js

@@ -3,7 +3,7 @@ import '../expand-collapse/expand-collapse-content.js';
 import { css, html, LitElement } from 'lit';
 import { linkStyles } from '../link/link.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 class FormErrorSummary extends LocalizeCoreElement(RtlMixin(LitElement)) {
 

package/components/html-block/demo/html-block.html

@@ -8,7 +8,7 @@
 			import '../../demo/demo-page.js';
 			import '../html-block.js';
 
-			import { provideInstance } from '../../../mixins/provider-mixin.js';
+			import { provideInstance } from '../../../mixins/provider/provider-mixin.js';
 
 			class DemoReplacementRenderer {
 				get canRenderInline() {

package/components/html-block/html-block.js

@@ -6,7 +6,7 @@ import { createHtmlBlockRenderer as createMathRenderer } from '../../helpers/mat
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { HtmlAttributeObserverController } from '../../controllers/attributeObserver/htmlAttributeObserverController.js';
 
-import { requestInstance } from '../../mixins/provider-mixin.js';
+import { requestInstance } from '../../mixins/provider/provider-mixin.js';
 
 export const htmlBlockContentStyles = css`
 	.d2l-html-block-rendered {

package/components/icons/icon-custom.js

@@ -1,7 +1,7 @@
 import { css, html, LitElement } from 'lit';
 import { fixSvg } from './fix-svg.js';
 import { iconStyles } from './icon-styles.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 class IconCustom extends RtlMixin(LitElement) {
 

package/components/icons/icon.js

@@ -3,7 +3,7 @@ import { css, html, LitElement } from 'lit';
 import { fixSvg } from './fix-svg.js';
 import { iconStyles } from './icon-styles.js';
 import { loadSvg } from '../../generated/icons/presetIconLoader.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { runAsync } from '../../directives/run-async/run-async.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';