@brightspace-ui/core 3.320.1 → 3.321.0

package/components/icons/icon.js

@@ -3,11 +3,12 @@ import { css, html, LitElement, noChange } from 'lit';
 import { fixSvg } from './fix-svg.js';
 import { guard } from 'lit/directives/guard.js';
 import { iconStyles } from './icon-styles.js';
+import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
 import { loadSvg } from '../../generated/icons/presetIconLoader.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { until } from 'lit/directives/until.js';
 
-class Icon extends LitElement {
+class Icon extends LoadingCompleteMixin(LitElement) {
 
 	static properties = {
 		icon: {
@@ -58,7 +59,13 @@ class Icon extends LitElement {
 				icon = icon.substring(4);
 			}
 			const svg = await loadSvg(icon);
-			return this._fixSvg(svg ? svg.val : undefined);
+			const fixedSvg = this._fixSvg(svg ? svg.val : undefined);
+
+			this.updateComplete
+				.then(() => new Promise(resolve => requestAnimationFrame(resolve)))
+				.then(this.resolveLoadingComplete);
+
+			return fixedSvg;
 		}
 	}
 

package/components/tabs/tabs.js

@@ -906,7 +906,9 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 			scrollVisibilityPromise,
 			scrollToPromise
 		]);
-		p.then(() => {
+		p.then(async() => {
+			await new Promise(resolve => requestAnimationFrame(resolve));
+			await new Promise(resolve => requestAnimationFrame(resolve));
 			if (this.#loadingCompleteResolve) {
 				this.#loadingCompleteResolve();
 				this.#loadingCompleteResolve = undefined;

package/components/toolbar/toolbar-button.js

@@ -0,0 +1,61 @@
+import { html, LitElement } from 'lit';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+import { SlottedIconMixin } from '../icons/slotted-icon-mixin.js';
+import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
+import { toolbarButtonStyles } from './toolbar-item-styles.js';
+
+/**
+ * A toolbar button that performs an action
+ */
+class ToolbarButton extends SlottedIconMixin(FocusMixin(ThemeMixin(PropertyRequiredMixin(LitElement)))) {
+
+	static properties = {
+		/**
+		 * Disables the toolbar button
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean },
+		/**
+		 * ACCESSIBILITY: REQUIRED: Accessible text for the button
+		 * @type {string}
+		 */
+		text: { type: String, required: true },
+		_activeFocusable: { state: true }
+	};
+
+	static styles = [super.styles, toolbarButtonStyles];
+
+	constructor() {
+		super();
+		this.disabled = false;
+		this.text = '';
+		this._activeFocusable = false;
+	}
+
+	static get focusElementSelector() {
+		return 'button';
+	}
+
+	render() {
+		return html`
+			<button
+				aria-disabled="${this.disabled ? 'true' : 'false'}"
+				aria-label="${this.text}"
+				@click="${this.#handleClick}"
+				tabindex="${this._activeFocusable ? 0 : -1}"
+				title="${this.text}"
+				type="button">
+				<div class="background"></div>
+				${this._renderIcon()}
+			</button>
+		`;
+	}
+
+	#handleClick(e) {
+		if (this.disabled) e.stopPropagation();
+	}
+
+}
+
+customElements.define('d2l-toolbar-button', ToolbarButton);

package/components/toolbar/toolbar-item-styles.js

@@ -0,0 +1,103 @@
+import '../colors/colors.js';
+import { css } from 'lit';
+import { getFocusRingStyles } from '../../helpers/focus.js';
+
+export const toolbarButtonStyles = css`
+	:host {
+		display: inline-block;
+	}
+	:host([hidden]) {
+		display: none;
+	}
+	button {
+		--d2l-focus-ring-offset: 0;
+		align-items: center;
+		background-color: transparent;
+		border: none;
+		border-radius: 0.2rem;
+		box-sizing: border-box;
+		color: var(--d2l-theme-text-color-static-standard);
+		cursor: pointer;
+		display: flex;
+		fill: var(--d2l-theme-icon-color-standard);
+		font-family: inherit;
+		justify-content: center;
+		margin: 0;
+		min-height: 34px;
+		min-width: 34px;
+		outline: none;
+		padding: 0;
+		position: relative;
+		text-align: center;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+		vertical-align: middle;
+		white-space: nowrap;
+		width: auto;
+		z-index: 0; /* create stacking context for the background so it can be animated */
+	}
+	button::-moz-focus-inner {
+		border: 0;
+	}
+	.background {
+		background-color: transparent;
+		border-radius: 4px;
+		height: 100%;
+		position: absolute;
+		transform: scale(0.1, 0.1);
+		transition: background-color 150ms linear, transform 150ms linear;
+		width: 100%;
+		z-index: -1;
+	}
+	${getFocusRingStyles('button')}
+	@supports not selector(:focus-visible) {
+		button:hover > .background,
+		button:focus > .background {
+			background-color: var(--d2l-theme-background-color-interactive-secondary-default);
+			transform: scale(1, 1);
+		}
+	}
+	@supports selector(:focus-visible) {
+		button:hover > .background,
+		button:focus-visible > .background {
+			background-color: var(--d2l-theme-background-color-interactive-secondary-default);
+			transform: scale(1, 1);
+		}
+	}
+	button[disabled],
+	button[aria-disabled="true"] {
+		cursor: default;
+		opacity: var(--d2l-theme-opacity-disabled-control);
+	}
+	button[disabled]:hover,
+	button[disabled]:focus {
+		background-color: transparent;
+		fill: var(--d2l-theme-text-color-static-standard);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.background {
+			transition: none;
+		}
+	}
+
+	@supports not selector(:focus-visible) {
+		:host([theme="dark"]) button:hover > .background,
+		:host([theme="dark"]) button:focus > .background {
+			background-color: var(--d2l-color-tungsten);
+		}
+	}
+	@supports selector(:focus-visible) {
+		:host([theme="dark"]) button:hover > .background,
+		:host([theme="dark"]) button:focus-visible > .background {
+			background-color: var(--d2l-color-tungsten);
+		}
+	}
+	:host([theme="dark"]) button,
+	:host([theme="dark"]) ::slotted(d2l-icon-custom),
+	:host([theme="dark"]) d2l-icon {
+		color: var(--d2l-color-regolith);
+		fill: var(--d2l-color-regolith);
+	}
+`;

package/components/toolbar/toolbar.js

@@ -0,0 +1,143 @@
+import '../colors/colors.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { css, html, LitElement } from 'lit';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+
+const keyCodes = Object.freeze({
+	END: 35,
+	HOME: 36,
+	LEFT: 37,
+	RIGHT: 39
+});
+
+/**
+ * A toolbar that provides a slot for toolbar items
+ * @slot - Slot for toolbar items (ex. ``)
+ */
+class Toolbar extends PropertyRequiredMixin(LitElement) {
+
+	static properties = {
+		/**
+		 * ACCESSIBILITY: REQUIRED: Accessible label for the toolbar
+		 * @type {string}
+		 */
+		label: { type: String, required: true }
+	};
+
+	static styles = css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.container {
+			border-block-end: 1px solid var(--d2l-theme-border-color-standard);
+			display: flex;
+			flex-wrap: wrap;
+			gap: 4px;
+			padding-block-end: 4px;
+		}
+	`;
+
+	constructor() {
+		super();
+		this.label = '';
+	}
+
+	render() {
+		return html`
+			<div
+				aria-label="${this.label}"
+				class="container"
+				@keydown="${this.#handleKeyDown}"
+				role="toolbar">
+				<slot ${ref(this.#slotRef)} @slotchange="${this.#handleSlotChange}"></slot>
+			</div>
+		`;
+	}
+
+	focus() {
+		const focusables = this.#getFocusables();
+		const item = focusables.find(item => item._activeFocusable);
+		if (!item) return;
+		item.focus();
+	}
+
+	setActiveFocusable(focusable) {
+		const focusables = this.#getFocusables();
+		if (focusables.length === 0) return;
+
+		const focusableExists = !!focusables.find(item => item === focusable);
+		if (!focusableExists) return;
+
+		const currentFocusable = focusables.find(item => item._activeFocusable);
+		if (currentFocusable) currentFocusable._activeFocusable = false;
+
+		focusable._activeFocusable = true;
+	}
+
+	#slotRef = createRef();
+
+	#getFocusables() {
+		return this.#slotRef.value?.assignedElements({ flatten: true })
+			.filter(elem => elem.tagName === 'D2L-TOOLBAR-BUTTON') ?? [];
+	}
+
+	async #handleKeyDown(e) {
+
+		// todo: don't steal focus if arrow key originated from inside a dropdown
+
+		if (e.keyCode !== keyCodes.LEFT && e.keyCode !== keyCodes.RIGHT && e.keyCode !== keyCodes.HOME && e.keyCode !== keyCodes.END) return;
+
+		const isRtl = document.documentElement.getAttribute('dir') === 'rtl';
+		const focusables = this.#getFocusables();
+		if (focusables.length === 0) return;
+
+		const index = focusables.findIndex(item => item._activeFocusable);
+		focusables[index]._activeFocusable = false;
+
+		let focusable;
+		if (isRtl && e.keyCode === keyCodes.LEFT) {
+			if (index === focusables.length - 1) focusable = focusables[0];
+			else focusable = focusables[index + 1];
+		} else if (isRtl && e.keyCode === keyCodes.RIGHT) {
+			if (index === 0) focusable = focusables[focusables.length - 1];
+			else focusable = focusables[index - 1];
+		} else if (e.keyCode === keyCodes.LEFT) {
+			if (index === 0) focusable = focusables[focusables.length - 1];
+			else focusable = focusables[index - 1];
+		} else if (e.keyCode === keyCodes.RIGHT) {
+			if (index === focusables.length - 1) focusable = focusables[0];
+			else focusable = focusables[index + 1];
+		} else if (e.keyCode === keyCodes.HOME) {
+			focusable = focusables[0];
+		} else if (e.keyCode === keyCodes.END) {
+			focusable = focusables[focusables.length - 1];
+		}
+
+		// prevent default so page doesn't scroll when hitting HOME/END
+		e.preventDefault();
+
+		focusable._activeFocusable = true;
+		await focusable.updateComplete;
+		requestAnimationFrame(() => focusable.focus());
+	}
+
+	#handleSlotChange() {
+		const focusables = this.#getFocusables();
+		this.#resetActiveFocusable(focusables);
+	}
+
+	#resetActiveFocusable(focusables) {
+		if (focusables.length === 0) return;
+
+		const item = focusables.find(item => item._activeFocusable);
+		if (item) item._activeFocusable = false;
+
+		focusables[0]._activeFocusable = true;
+	}
+
+}
+
+customElements.define('d2l-toolbar', Toolbar);

package/custom-elements.json

@@ -5862,6 +5862,14 @@
           "name": "styles",
           "type": "array",
           "default": "[\"iconStyles\",null]"
+        },
+        {
+          "name": "loadingComplete",
+          "type": "Promise<any>"
+        },
+        {
+          "name": "resolveLoadingComplete",
+          "type": "() => void"
         }
       ]
     },
@@ -17173,6 +17181,89 @@
         }
       ]
     },
+    {
+      "name": "d2l-toolbar-button",
+      "path": "./components/toolbar/toolbar-button.js",
+      "description": "A toolbar button that performs an action",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Disables the toolbar button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "text",
+          "description": "ACCESSIBILITY: REQUIRED: Accessible text for the button",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[[null],\"toolbarButtonStyles\"]"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the toolbar button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "ACCESSIBILITY: REQUIRED: Accessible text for the button",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        }
+      ]
+    },
+    {
+      "name": "d2l-toolbar",
+      "path": "./components/toolbar/toolbar.js",
+      "description": "A toolbar that provides a slot for toolbar items",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "ACCESSIBILITY: REQUIRED: Accessible label for the toolbar",
+          "type": "string",
+          "default": "\"\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t}\\n\\t\\t:host([hidden]) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t.container {\\n\\t\\t\\tborder-block-end: 1px solid var(--d2l-theme-border-color-standard);\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex-wrap: wrap;\\n\\t\\t\\tgap: 4px;\\n\\t\\t\\tpadding-block-end: 4px;\\n\\t\\t}\\n\\t`\""
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "ACCESSIBILITY: REQUIRED: Accessible label for the toolbar",
+          "type": "string",
+          "default": "\"\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Slot for toolbar items (ex. ``)"
+        }
+      ]
+    },
     {
       "name": "d2l-demo-tooltip-drag-and-drop-list",
       "path": "./components/tooltip/demo/tooltip-drag-and-drop-list.js",

package/package.json

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