@brightspace-ui/core 1.235.2 → 1.236.1

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

@@ -193,6 +193,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			.d2l-list-item-actions-container {
 				padding: 0.55rem 0;
 			}
+
 			::slotted([slot="actions"]),
 			.d2l-list-item-actions * {
 				display: grid;
@@ -202,6 +203,16 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				margin: 0.15rem 0;
 			}
 
+			.d2l-list-item-content-extend-separators ::slotted([slot="actions"]),
+			.d2l-list-item-content-extend-separators .d2l-list-item-actions * {
+				margin-right: 0.9rem;
+			}
+			:host([dir="rtl"]) .d2l-list-item-content-extend-separators ::slotted([slot="actions"]),
+			:host([dir="rtl"]) .d2l-list-item-content-extend-separators .d2l-list-item-actions * {
+				margin-left: 0.9rem;
+				margin-right: 0;
+			}
+
 			[data-breakpoint="1"] ::slotted([slot="illustration"]),
 			[data-breakpoint="1"] .d2l-list-item-illustration * {
 				margin-right: 1rem;

package/components/overflow-group/demo/overflow-group.html

@@ -33,15 +33,14 @@
 						<d2l-button>Export</d2l-button>
 					</d2l-overflow-group>
 				</template>
-			</d2l-demo-snippet> 
+			</d2l-demo-snippet>
 
 			<h2>Overflow Group (min max with autoShow)</h2>
 			<d2l-demo-snippet>
 				<template>
 					<d2l-overflow-group auto-show>
-						<d2l-button  disabled primary="">New</d2l-button>
-						<d2l-dropdown class="d2l-button-group-show">
-							<d2l-dropdown-button text="Explore Topics" class="d2l-dropdown-opener"></d2l-dropdown-button>
+						<d2l-button  disabled primary>New</d2l-button>
+						<d2l-dropdown-button text="Explore Topics" class="d2l-button-group-show">
 							<d2l-dropdown-menu id="dropdown">
 								<d2l-menu label="Astronomy">
 									<d2l-menu-item text="Introduction"></d2l-menu-item>
@@ -52,7 +51,7 @@
 									<d2l-menu-item text="The Universe"></d2l-menu-item>
 								</d2l-menu>
 							</d2l-dropdown-menu>
-						</d2l-dropdown>
+						</d2l-dropdown-button>
 						<d2l-button>Copy</d2l-button>
 						<d2l-button description="For screen readers">Import</d2l-button>
 						<d2l-button class="d2l-button-group-no-show">Delete</d2l-button>
@@ -60,18 +59,17 @@
 					</d2l-overflow-group>
 				</template>
 			</d2l-demo-snippet>
-			
+
 			<h2>Subtle Overflow Group</h2>
 			<d2l-demo-snippet>
 				<template>
 					<d2l-overflow-group opener-style="subtle">
-						<d2l-button-subtle primary="" text="New"></d2l-button-subtle>
+						<d2l-button-subtle primary text="New"></d2l-button-subtle>
 						<d2l-button-subtle text="Copy"></d2l-button-subtle>
 						<d2l-button-subtle text="Import"></d2l-button-subtle>
 						<d2l-button-subtle text="Edit"></d2l-button-subtle>
 						<d2l-button-subtle text="Manage!"></d2l-button-subtle>
-						<d2l-dropdown class="d2l-button-group-show">
-							<d2l-dropdown-button-subtle text="Explore Topics" class="d2l-dropdown-opener"></d2l-dropdown-button-subtle>
+						<d2l-dropdown-button-subtle text="Explore Topics" class="d2l-button-group-show">
 							<d2l-dropdown-menu id="dropdown">
 								<d2l-menu label="Astronomy">
 									<d2l-menu-item text="Introduction"></d2l-menu-item>
@@ -82,12 +80,12 @@
 									<d2l-menu-item text="The Universe"></d2l-menu-item>
 								</d2l-menu>
 							</d2l-dropdown-menu>
-						</d2l-dropdown>
+						</d2l-dropdown-button-subtle>
 						<d2l-button-subtle text="Delete"></d2l-button-subtle>
 					</d2l-overflow-group>
 				</template>
 			</d2l-demo-snippet>
-			
+
 			<h2>Subtle Overflow Group (more icon)</h2>
 			<d2l-demo-snippet>
 				<template>

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

@@ -114,6 +114,7 @@ function convertToDropdownItem(node) {
 		return createMenuItemSeparator();
 	}
 }
+
 /**
  *
  * A component that can be used to display a set of buttons, links or menus that will be put into a dropdown menu when they no longer fit on the first line of their container
@@ -178,8 +179,7 @@ class OverflowGroup extends RtlMixin(LocalizeCoreElement(LitElement)) {
 	}
 
 	static get styles() {
-		return [offscreenStyles,
-			css`
+		return [offscreenStyles, css`
 			:host {
 				display: block;
 			}
@@ -195,44 +195,44 @@ class OverflowGroup extends RtlMixin(LocalizeCoreElement(LitElement)) {
 				flex-wrap: wrap;
 				justify-content: var(--d2l-overflow-group-justify-content, normal);
 			}
-			.d2l-overflow-group-container ::slotted(d2l-button),
-			.d2l-overflow-group-container ::slotted(d2l-button-icon),
-			.d2l-overflow-group-container ::slotted(d2l-link),
-			.d2l-overflow-group-container ::slotted(span),
-			.d2l-overflow-group-container ::slotted(d2l-dropdown:not(.d2l-overflow-dropdown)),
-			.d2l-overflow-group-container ::slotted(d2l-dropdown-button),
-			.d2l-overflow-group-container ::slotted(d2l-dropdown-button-subtle),
-			.d2l-overflow-group-container ::slotted(d2l-dropdown-more),
-			.d2l-overflow-group-container ::slotted(d2l-dropdown-context-menu),
-			.d2l-overflow-group-container ::slotted(d2l-selection-action),
-			.d2l-overflow-group-container ::slotted(d2l-selection-action-dropdown) {
+			::slotted(d2l-button),
+			::slotted(d2l-link),
+			::slotted(span),
+			::slotted(d2l-dropdown:not(.d2l-overflow-dropdown)),
+			::slotted(d2l-dropdown-button) {
 				margin-right: 0.6rem;
 			}
-			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-button),
-			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-button-icon),
-			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-link),
-			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(span),
-			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-dropdown:not(.d2l-overflow-dropdown)),
-			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-dropdown-button),
-			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-dropdown-button-subtle),
-			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-dropdown-more),
-			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-dropdown-context-menu),
-			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-selection-action),
-			:host([dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-selection-action-dropdown) {
+			:host([dir="rtl"]) ::slotted(d2l-button),
+			:host([dir="rtl"]) ::slotted(d2l-link),
+			:host([dir="rtl"]) ::slotted(span),
+			:host([dir="rtl"]) ::slotted(d2l-dropdown:not(.d2l-overflow-dropdown)),
+			:host([dir="rtl"]) ::slotted(d2l-dropdown-button) {
 				margin-left: 0.6rem;
 				margin-right: 0;
 			}
-			:host([opener-style="subtle"]) .d2l-overflow-group-container ::slotted(d2l-button-subtle) {
+			::slotted(d2l-button-subtle),
+			::slotted(d2l-button-icon),
+			::slotted(d2l-dropdown-button-subtle),
+			::slotted(d2l-dropdown-more),
+			::slotted(d2l-dropdown-context-menu),
+			::slotted(d2l-selection-action),
+			::slotted(d2l-selection-action-dropdown) {
 				margin-right: 0.2rem;
 			}
-			:host([opener-style="subtle"][dir="rtl"]) .d2l-overflow-group-container ::slotted(d2l-button-subtle) {
+			:host([dir="rtl"]) ::slotted(d2l-button-subtle),
+			:host([dir="rtl"]) ::slotted(d2l-button-icon),
+			:host([dir="rtl"]) ::slotted(d2l-dropdown-button-subtle),
+			:host([dir="rtl"]) ::slotted(d2l-dropdown-more),
+			:host([dir="rtl"]) ::slotted(d2l-dropdown-context-menu),
+			:host([dir="rtl"]) ::slotted(d2l-selection-action),
+			:host([dir="rtl"]) ::slotted(d2l-selection-action-dropdown) {
 				margin-left: 0.2rem;
 				margin-right: 0;
 			}
 			.d2l-overflow-group-container ::slotted([data-is-chomped]) {
 				display: none !important;
-			}`
-		];
+			}
+		`];
 	}
 
 	constructor() {

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

@@ -2,6 +2,7 @@ import '../button/button-subtle.js';
 import { html, LitElement } from 'lit-element/lit-element.js';
 import { DropdownOpenerMixin } from '../dropdown/dropdown-opener-mixin.js';
 import { dropdownOpenerStyles } from '../dropdown/dropdown-opener-styles.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { SelectionActionMixin } from './selection-action-mixin.js';
@@ -11,7 +12,7 @@ import { SelectionActionMixin } from './selection-action-mixin.js';
  * @slot - Dropdown content (e.g., "d2l-dropdown-content", "d2l-dropdown-menu" or "d2l-dropdown-tabs")
  * @fires d2l-selection-observer-subscribe - Internal event
  */
-class ActionDropdown extends LocalizeCoreElement(SelectionActionMixin(DropdownOpenerMixin(LitElement))) {
+class ActionDropdown extends FocusMixin(LocalizeCoreElement(SelectionActionMixin(DropdownOpenerMixin(LitElement)))) {
 
 	static get properties() {
 		return {
@@ -27,6 +28,8 @@ class ActionDropdown extends LocalizeCoreElement(SelectionActionMixin(DropdownOp
 		return dropdownOpenerStyles;
 	}
 
+	static focusElementSelector = 'd2l-button-subtle';
+
 	render() {
 		return html`
 			<d2l-button-subtle
@@ -39,11 +42,6 @@ class ActionDropdown extends LocalizeCoreElement(SelectionActionMixin(DropdownOp
 		`;
 	}
 
-	focus() {
-		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-button-subtle');
-		if (elem) elem.focus();
-	}
-
 	/**
 	 * Gets the opener element with class "d2l-dropdown-opener" (required by dropdown-opener-mixin).
 	 * @return {HTMLElement}

package/components/selection/selection-action.js

@@ -1,6 +1,7 @@
 import '../button/button-subtle.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
 import { ButtonMixin } from '../button/button-mixin.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { SelectionActionMixin } from './selection-action-mixin.js';
@@ -11,7 +12,7 @@ import { SelectionInfo } from './selection-mixin.js';
  * @fires d2l-selection-action-click - Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected.
  * @fires d2l-selection-observer-subscribe - Internal event
  */
-class Action extends LocalizeCoreElement(SelectionActionMixin(ButtonMixin(LitElement))) {
+class Action extends FocusMixin(LocalizeCoreElement(SelectionActionMixin(ButtonMixin(LitElement)))) {
 
 	static get properties() {
 		return {
@@ -39,6 +40,8 @@ class Action extends LocalizeCoreElement(SelectionActionMixin(ButtonMixin(LitEle
 		`;
 	}
 
+	static focusElementSelector = 'd2l-button-subtle';
+
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener('d2l-button-ghost-click', this._handleActionClick);
@@ -61,11 +64,6 @@ class Action extends LocalizeCoreElement(SelectionActionMixin(ButtonMixin(LitEle
 		`;
 	}
 
-	focus() {
-		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-button-subtle');
-		if (elem) elem.focus();
-	}
-
 	_handleActionClick(e) {
 		e.stopPropagation();
 

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

@@ -1,5 +1,6 @@
 import '../button/button-subtle.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { SelectionInfo } from './selection-mixin.js';
 import { SelectionObserverMixin } from './selection-observer-mixin.js';
@@ -8,7 +9,7 @@ import { SelectionObserverMixin } from './selection-observer-mixin.js';
  * A subtle button that selects all items for all pages.
  * @fires d2l-selection-observer-subscribe - Internal event
  */
-class SelectAllPages extends LocalizeCoreElement(SelectionObserverMixin(LitElement)) {
+class SelectAllPages extends FocusMixin(LocalizeCoreElement(SelectionObserverMixin(LitElement))) {
 
 	static get styles() {
 		return css`
@@ -21,6 +22,8 @@ class SelectAllPages extends LocalizeCoreElement(SelectionObserverMixin(LitEleme
 		`;
 	}
 
+	static focusElementSelector = 'd2l-button-subtle';
+
 	render() {
 		if (!this._provider) return;
 		if (!this._provider.itemCount) return;
@@ -34,11 +37,6 @@ class SelectAllPages extends LocalizeCoreElement(SelectionObserverMixin(LitEleme
 			</d2l-button-subtle>`;
 	}
 
-	focus() {
-		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-button-subtle');
-		if (elem) elem.focus();
-	}
-
 	_handleClick() {
 		if (this._provider) this._provider.setSelectionForAll(true, true);
 	}

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

@@ -1,5 +1,6 @@
 import '../inputs/input-checkbox.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { SelectionInfo } from './selection-mixin.js';
@@ -9,7 +10,7 @@ import { SelectionObserverMixin } from './selection-observer-mixin.js';
  * A checkbox that provides select-all behavior for selection components such as tables and lists.
  * @fires d2l-selection-observer-subscribe - Internal event
  */
-class SelectAll extends LocalizeCoreElement(SelectionObserverMixin(LitElement)) {
+class SelectAll extends FocusMixin(LocalizeCoreElement(SelectionObserverMixin(LitElement))) {
 
 	static get properties() {
 		return {
@@ -33,6 +34,8 @@ class SelectAll extends LocalizeCoreElement(SelectionObserverMixin(LitElement))
 		`;
 	}
 
+	static focusElementSelector = 'd2l-input-checkbox';
+
 	constructor() {
 		super();
 		this.disabled = false;
@@ -56,11 +59,6 @@ class SelectAll extends LocalizeCoreElement(SelectionObserverMixin(LitElement))
 		`;
 	}
 
-	focus() {
-		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-checkbox');
-		if (elem) elem.focus();
-	}
-
 	_handleCheckboxChange(e) {
 		if (this._provider) this._provider.setSelectionForAll(e.target.checked, false);
 	}

package/components/switch/switch-mixin.js

@@ -1,12 +1,13 @@
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
 import { css, html } from 'lit-element/lit-element.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
-export const SwitchMixin = superclass => class extends RtlMixin(FocusVisiblePolyfillMixin(superclass)) {
+export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(FocusVisiblePolyfillMixin(superclass))) {
 
 	static get properties() {
 		return {
@@ -165,6 +166,8 @@ export const SwitchMixin = superclass => class extends RtlMixin(FocusVisiblePoly
 		`;
 	}
 
+	static focusElementSelector = '.d2l-switch-container';
+
 	constructor() {
 		super();
 		this.disabled = false;
@@ -212,11 +215,6 @@ export const SwitchMixin = superclass => class extends RtlMixin(FocusVisiblePoly
 		`;
 	}
 
-	focus() {
-		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-switch-container');
-		if (elem) elem.focus();
-	}
-
 	_handleClick() {
 		this._toggleState();
 	}

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

@@ -1,11 +1,12 @@
 import '../icons/icon.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
 
 /**
  * Button for sorting a table column in ascending/descending order.
  * @slot - Text of the sort button
  */
-export class TableColSortButton extends LitElement {
+export class TableColSortButton extends FocusMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -57,6 +58,8 @@ export class TableColSortButton extends LitElement {
 		`;
 	}
 
+	static focusElementSelector = 'button';
+
 	constructor() {
 		super();
 		this.nosort = false;
@@ -70,11 +73,6 @@ export class TableColSortButton extends LitElement {
 		return html`<button type="button"><slot></slot>${iconView}</button>`;
 	}
 
-	focus() {
-		const button = this.shadowRoot && this.shadowRoot.querySelector('button');
-		if (button) button.focus();
-	}
-
 }
 
 customElements.define('d2l-table-col-sort-button', TableColSortButton);