@brightspace-ui/core 2.102.0 → 2.104.0

package/components/list/list-item-generic-layout.js

@@ -1,8 +1,8 @@
 import { css, html, LitElement } from 'lit';
 import { findComposedAncestor, getNextAncestorSibling, getPreviousAncestorSibling, isComposedAncestor } from '../../helpers/dom.js';
 import { getComposedActiveElement, getFirstFocusableDescendant, getLastFocusableDescendant, getNextFocusable, getPreviousFocusable, isFocusable } from '../../helpers/focus.js';
-import { isInteractiveDescendant } from '../../mixins/interactive-mixin.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { isInteractiveDescendant } from '../../mixins/interactive/interactive-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const keyCodes = {
 	DOWN: 40,
@@ -100,7 +100,6 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			}
 			::slotted([slot="outside-control"]) {
 				grid-column: outside-control-start / outside-control-end;
-				width: fit-content;
 			}
 
 			::slotted([slot="expand-collapse"]) {

package/components/list/list-item-mixin.js

@@ -10,14 +10,14 @@ import { composeMixins } from '../../helpers/composeMixins.js';
 import { getFirstFocusableDescendant } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { LabelledMixin } from '../../mixins/labelled-mixin.js';
+import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { ListItemCheckboxMixin } from './list-item-checkbox-mixin.js';
 import { ListItemDragDropMixin } from './list-item-drag-drop-mixin.js';
 import { ListItemExpandCollapseMixin } from './list-item-expand-collapse-mixin.js';
 import { ListItemRoleMixin } from './list-item-role-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 let tabPressed = false;
 let tabListenerAdded = false;

package/components/list/list-item-placement-marker.js

@@ -1,6 +1,6 @@
 import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 class ListItemPlacementMarker extends RtlMixin(LitElement) {
 

package/components/menu/menu-item-checkbox.js

@@ -2,7 +2,7 @@ import '../icons/icon.js';
 import { html, LitElement } from 'lit';
 import { MenuItemSelectableMixin } from './menu-item-selectable-mixin.js';
 import { menuItemSelectableStyles } from './menu-item-selectable-styles.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * A menu item component used for selection. Multiple checkboxes can be selected at once.

package/components/menu/menu-item-radio.js

@@ -2,7 +2,7 @@ import '../icons/icon.js';
 import { html, LitElement } from 'lit';
 import { MenuItemRadioMixin } from './menu-item-radio-mixin.js';
 import { menuItemSelectableStyles } from './menu-item-selectable-styles.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * A menu item component used for radio selection. Only one radio item in a given d2l-menu may be selected at once (i.e., selecting one option will deselect the other selected "d2l-menu-item-radio" item).

package/components/menu/menu-item-return.js

@@ -3,7 +3,7 @@ import { css, html, LitElement } from 'lit';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { MenuItemMixin } from './menu-item-mixin.js';
 import { menuItemStyles } from './menu-item-styles.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 class MenuItemReturn extends RtlMixin(LocalizeCoreElement(MenuItemMixin(LitElement))) {
 

package/components/menu/menu.js

@@ -3,7 +3,7 @@ import '../icons/icon.js';
 import './menu-item-return.js';
 import { css, html, LitElement } from 'lit';
 import { HierarchicalViewMixin } from '../hierarchical-view/hierarchical-view-mixin.js';
-import { ThemeMixin } from '../../mixins/theme-mixin.js';
+import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
 
 const keyCodes = {
 	DOWN: 40,

package/components/meter/meter-circle.js

@@ -3,7 +3,7 @@ import { css, html, LitElement } from 'lit';
 import { bodyStandardStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { MeterMixin } from './meter-mixin.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * A circular progress indicator.

package/components/meter/meter-linear.js

@@ -2,7 +2,7 @@ import { css, html, LitElement } from 'lit';
 import { bodySmallStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { MeterMixin } from './meter-mixin.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * A horizontal progress bar.

package/components/meter/meter-radial.js

@@ -3,7 +3,7 @@ import { bodySmallStyles, heading4Styles } from '../typography/styles.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { MeterMixin } from './meter-mixin.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * A half-circle progress indicator.

package/components/object-property-list/object-property-list-item-link.js

@@ -1,4 +1,4 @@
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { linkStyles } from '../link/link.js';

package/components/offscreen/offscreen.js

@@ -1,5 +1,5 @@
 import { css, html, LitElement } from 'lit';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 export const offscreenStyles = css`
 	.d2l-offscreen {

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

@@ -13,7 +13,7 @@ import '../menu/menu-item-link.js';
 import { css, html, LitElement } from 'lit';
 import { OVERFLOW_CLASS, OVERFLOW_MINI_CLASS, OverflowGroupMixin } from './overflow-group-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const OPENER_STYLE = {
 	DEFAULT: 'default',

package/components/paging/pager-load-more.js

@@ -3,7 +3,7 @@ import '../loading-spinner/loading-spinner.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { buttonStyles } from '../button/button-styles.js';
 import { findComposedAncestor } from '../../helpers/dom.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 { getFirstFocusableDescendant } from '../../helpers/focus.js';
 import { getSeparator } from '@brightspace-ui/intl/lib/list.js';

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

@@ -1,6 +1,6 @@
 import '../scroll-wrapper.js';
 import { css, html, LitElement } from 'lit';
-import { RtlMixin } from '../../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 class TestScrollWrapper extends RtlMixin(LitElement) {

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

@@ -4,7 +4,7 @@ import { css, html, LitElement, unsafeCSS } from 'lit';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.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';
 
 const RTL_MULTIPLIER = navigator.userAgent.indexOf('Edge/') > 0 ? 1 : -1; /* legacy-Edge doesn't reverse scrolling in RTL */
 const SCROLL_AMOUNT = 0.8;

package/components/selection/selection-action-dropdown.js

@@ -2,7 +2,7 @@ import '../button/button-subtle.js';
 import { html, LitElement } from 'lit';
 import { DropdownOpenerMixin } from '../dropdown/dropdown-opener-mixin.js';
 import { dropdownOpenerStyles } from '../dropdown/dropdown-opener-styles.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 { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { SelectionActionMixin } from './selection-action-mixin.js';

package/components/selection/selection-action.js

@@ -1,7 +1,7 @@
 import '../button/button-subtle.js';
 import { css, html, LitElement } from 'lit';
 import { ButtonMixin } from '../button/button-mixin.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 { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { SelectionActionMixin } from './selection-action-mixin.js';

package/components/selection/selection-controls.js

@@ -6,7 +6,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SelectionObserverMixin } from './selection-observer-mixin.js';
 
 /**

package/components/selection/selection-input.js

@@ -2,7 +2,7 @@ import '../inputs/input-checkbox.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { LabelledMixin } from '../../mixins/labelled-mixin.js';
+import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { radioStyles } from '../inputs/input-radio-styles.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 

package/components/selection/selection-mixin.js

@@ -1,4 +1,4 @@
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const keyCodes = {
 	DOWN: 40,

package/components/selection/selection-select-all-pages.js

@@ -1,6 +1,6 @@
 import '../button/button-subtle.js';
 import { css, html, LitElement } from 'lit';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { SelectionInfo } from './selection-mixin.js';
 import { SelectionObserverMixin } from './selection-observer-mixin.js';

package/components/selection/selection-select-all.js

@@ -1,6 +1,6 @@
 import '../inputs/input-checkbox.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 { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { SelectionInfo } from './selection-mixin.js';

package/components/skeleton/skeleton-mixin.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
 import { css } from 'lit';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 // DE50056: starting in Safari 16, the pulsing animation causes FACE
 // (and possibly elsewhere) to render a blank page

package/components/switch/switch-mixin.js

@@ -1,11 +1,11 @@
 import '../colors/colors.js';
 import { css, html, unsafeCSS } 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 { 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 { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(superclass)) {
 

package/components/table/demo/table-test.js

@@ -12,7 +12,7 @@ import '../../selection/selection-input.js';
 import { css, html } from 'lit';
 import { tableStyles, TableWrapper } from '../table-wrapper.js';
 import { DemoPassthroughMixin } from '../../demo/demo-passthrough-mixin.js';
-import { RtlMixin } from '../../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../../mixins/rtl/rtl-mixin.js';
 
 const fruits = ['Apples', 'Oranges', 'Bananas'];
 const thText = ['Additional', 'Placeholder', 'Header', 'Row'];

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

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 
 /**

package/components/table/table-wrapper.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
 import '../scroll-wrapper/scroll-wrapper.js';
 import { css, html, LitElement, nothing } from 'lit';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SelectionMixin } from '../selection/selection-mixin.js';
 
 export const tableStyles = css`

package/components/tabs/tab-internal.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const keyCodes = {
 	ENTER: 13,

package/components/tabs/tabs.js

@@ -4,14 +4,14 @@ import '../../helpers/queueMicrotask.js';
 import './tab-internal.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { cssEscape, findComposedAncestor } from '../../helpers/dom.js';
-import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
+import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
 import { bodyCompactStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { repeat } from 'lit/directives/repeat.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';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;

package/components/tag-list/tag-list-item-mixin.js

@@ -8,7 +8,7 @@ import { classMap } from 'lit/directives/class-map.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-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const keyCodes = {
 	BACKSPACE: 8,

package/components/tag-list/tag-list.js

@@ -1,10 +1,10 @@
 import '../button/button-subtle.js';
 import { css, html, LitElement } from 'lit';
 import { announce } from '../../helpers/announce.js';
-import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
+import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getOffsetParent } from '../../helpers/dom.js';
-import { InteractiveMixin } from '../../mixins/interactive-mixin.js';
+import { InteractiveMixin } from '../../mixins/interactive/interactive-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { styleMap } from 'lit/directives/style-map.js';

package/components/tooltip/tooltip-help.js

@@ -3,7 +3,7 @@ import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { bodySmallStyles } 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 { getFocusPseudoClass } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';

package/components/tooltip/tooltip.js

@@ -6,7 +6,7 @@ import { bodySmallStyles } from '../typography/styles.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { isFocusable } from '../../helpers/focus.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';
 
 let logAccessibilityWarning = true;

package/custom-elements.json

@@ -438,6 +438,66 @@
         }
       ]
     },
+    {
+      "name": "d2l-button-move",
+      "path": "./components/button/button-move.js",
+      "description": "A button component that provides a move action via a single button.",
+      "attributes": [
+        {
+          "name": "description",
+          "description": "A description to be added to the button for accessibility when text on button does not provide enough context",
+          "type": "string"
+        },
+        {
+          "name": "disabled-tooltip",
+          "description": "Tooltip text when disabled",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "description": "REQUIRED: Accessible text for the button",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the button",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "A description to be added to the button for accessibility when text on button does not provide enough context",
+          "type": "string"
+        },
+        {
+          "name": "disabledTooltip",
+          "attribute": "disabled-tooltip",
+          "description": "Tooltip text when disabled",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: Accessible text for the button",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the button",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-button-move-action"
+        }
+      ]
+    },
     {
       "name": "d2l-button-subtle",
       "path": "./components/button/button-subtle.js",

package/helpers/demo/prism.html

@@ -615,7 +615,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';
 
@@ -1768,11 +1768,11 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreE
 <pre class="d2l-code d2l-code-dark line-numbers"><code class="language-javascript">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/mixins/{arrow-keys-mixin.md → arrow-keys/README.md}

@@ -9,7 +9,7 @@ The focusable elements can be provided in one of two ways:
 If the elements are known up-front and are in the element's local DOM scope, simply add the d2l-arrowkeys-focusable class.
 
 ```javascript
-import { ArrowKeysMixin } from '@brightspace-ui/core/mixins/arrow-keys-mixin.js';
+import { ArrowKeysMixin } from '@brightspace-ui/core/mixins/arrow-keys/arrow-keys-mixin.js';
 class MyElement extends ArrowKeysMixin(LitElement) {
   render() {
     return this.arrowKeysContainer(html`
@@ -28,7 +28,7 @@ customElements.define('my-element', MyElement);
 If the elements are not known up front, or the elements cannot be simply queried in the element's local DOM-scope, an async arrowKeysFocusablesProvider may be implemented.
 
 ```javascript
-import { ArrowKeysMixin } from '@brightspace-ui/core/mixins/arrow-keys-mixin.js';
+import { ArrowKeysMixin } from '@brightspace-ui/core/mixins/arrow-keys/arrow-keys-mixin.js';
 class MyElement extends ArrowKeysMixin(LitElement) {
   render() {
     return this.arrowKeysContainer(html`

package/mixins/arrow-keys/arrow-keys-mixin.js

@@ -0,0 +1,125 @@
+import { html } from 'lit';
+
+const keyCodes = Object.freeze({
+	END: 35,
+	HOME: 36,
+	LEFT: 37,
+	UP: 38,
+	RIGHT: 39,
+	DOWN: 40,
+});
+
+export const ArrowKeysMixin = superclass => class extends superclass {
+
+	static get properties() {
+		return {
+			/**
+			 * @ignore
+			 */
+			arrowKeysDirection: { type: String, attribute: 'arrow-keys-direction' },
+			/**
+			 * @ignore
+			 */
+			arrowKeysNoWrap: { type: Boolean, attribute: 'arrow-keys-no-wrap' }
+		};
+	}
+
+	constructor() {
+		super();
+		this.arrowKeysDirection = 'leftright';
+		this.arrowKeysNoWrap = false;
+	}
+
+	arrowKeysContainer(inner) {
+		return html`<div class="arrow-keys-container" @keydown="${this._handleArrowKeys}">
+			${inner}
+		</div>`;
+	}
+
+	async arrowKeysFocusablesProvider() {
+		return this.shadowRoot ?
+			[...this.shadowRoot.querySelectorAll('.d2l-arrowkeys-focusable')]
+			: [];
+	}
+
+	async _focus(elem) {
+		if (elem) {
+			if (this.arrowKeysOnBeforeFocus) await this.arrowKeysOnBeforeFocus(elem);
+			elem.focus();
+		}
+	}
+
+	async _focusFirst() {
+		const elems = await this.arrowKeysFocusablesProvider();
+		if (elems && elems.length > 0) return this._focus(elems[0]);
+	}
+
+	async _focusLast() {
+		const elems = await this.arrowKeysFocusablesProvider();
+		if (elems && elems.length > 0) return this._focus(elems[elems.length - 1]);
+	}
+
+	async _focusNext(elem) {
+		const elems = await this.arrowKeysFocusablesProvider();
+		const next = this._tryGetNextFocusable(elems, elem);
+		return this._focus(next);
+	}
+
+	async _focusPrevious(elem) {
+		const elems = await this.arrowKeysFocusablesProvider();
+		const previous = this._tryGetPreviousFocusable(elems, elem);
+		return this._focus(previous);
+	}
+
+	_handleArrowKeys(e) {
+		const target = e.target;
+		if (this.arrowKeysDirection.indexOf('left') >= 0 && e.keyCode === keyCodes.LEFT) {
+			if (getComputedStyle(this).direction === 'rtl') {
+				this._focusNext(target);
+			} else {
+				this._focusPrevious(target);
+			}
+		} else if (this.arrowKeysDirection.indexOf('right') >= 0 && e.keyCode === keyCodes.RIGHT) {
+			if (getComputedStyle(this).direction === 'rtl') {
+				this._focusPrevious(target);
+			} else {
+				this._focusNext(target);
+			}
+		} else if (this.arrowKeysDirection.indexOf('up') >= 0 && e.keyCode === keyCodes.UP) {
+			this._focusPrevious(target);
+		} else if (this.arrowKeysDirection.indexOf('down') >= 0 && e.keyCode === keyCodes.DOWN) {
+			this._focusNext(target);
+		} else if (e.keyCode === keyCodes.HOME) {
+			this._focusFirst();
+		} else if (e.keyCode === keyCodes.END) {
+			this._focusLast();
+		} else {
+			return;
+		}
+		e.stopPropagation();
+		e.preventDefault();
+	}
+
+	_tryGetNextFocusable(elems, elem) {
+		if (!elems || elems.length === 0) return;
+
+		const index = elems.indexOf(elem);
+		if (index === elems.length - 1) {
+			if (this.arrowKeysNoWrap) return;
+			return elems[0];
+		}
+		return elems[index + 1];
+	}
+
+	_tryGetPreviousFocusable(elems, elem) {
+		if (!elems || elems.length === 0) return;
+
+		const index = elems.indexOf(elem);
+		if (index === 0) {
+			if (this.arrowKeysNoWrap) return;
+			return elems[elems.length - 1];
+		}
+		return elems[index - 1];
+	}
+
+};

package/mixins/{demo → arrow-keys/demo}/arrow-keys-mixin.html

@@ -3,9 +3,9 @@
 	<head>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta charset="UTF-8">
-		<link rel="stylesheet" href="../../components/demo/styles.css" type="text/css">
+		<link rel="stylesheet" href="../../../components/demo/styles.css" type="text/css">
 		<script type="module">
-			import '../../components/demo/demo-page.js';
+			import '../../../components/demo/demo-page.js';
 			import './arrow-keys-test.js';
 		</script>
 	</head>

package/mixins/{demo → arrow-keys/demo}/arrow-keys-test.js

@@ -1,4 +1,4 @@
-import '../../components/colors/colors.js';
+import '../../../components/colors/colors.js';
 import { css, html, LitElement } from 'lit';
 import { ArrowKeysMixin } from '../arrow-keys-mixin.js';