@brightspace-ui/core 2.0.0 → 2.0.3

package/components/demo/code-view.js

@@ -30,11 +30,7 @@ class CodeView extends LitElement {
 		if (Prism.languages[language]) {
 			this._dependenciesPromise = Promise.resolve();
 		} else {
-			/* Current, non-relative imports don't appear to work with Polymer dev server
-			for FF, Edge, IE11.  Use of non-default languages is limited to dev with this approach.
-			https://github.com/Polymer/tools/issues/3402 */
-			const path = `/node_modules/prismjs/components/prism-${language}.min.js`;
-			this._dependenciesPromise = import(path);
+			this._dependenciesPromise = import(`./node_modules/prismjs/components/prism-${language}.min.js`);
 		}
 		if (this.shadowRoot) this._updateCode(this.shadowRoot.querySelector('slot'));
 		super.attributeChangedCallback(name, oldval, newval);

package/components/tabs/tab-panel-mixin.js

@@ -51,17 +51,6 @@ export const TabPanelMixin = superclass => class extends superclass {
 		this.selected = false;
 	}
 
-	async attributeChangedCallback(name, oldval, newval) {
-		super.attributeChangedCallback(name, oldval, newval);
-		if (name === 'text') {
-			this.setAttribute('aria-label', this.text);
-			/** Dispatched when the text attribute is changed */
-			this.dispatchEvent(new CustomEvent(
-				'd2l-tab-panel-text-changed', { bubbles: true, composed: true, detail: { text: this.text } }
-			));
-		}
-	}
-
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.id.length === 0) this.id = getUniqueId();
@@ -80,6 +69,11 @@ export const TabPanelMixin = superclass => class extends superclass {
 						));
 					});
 				}
+			} else if (prop === 'text') {
+				this.setAttribute('aria-label', this.text);
+				this.dispatchEvent(new CustomEvent(
+					'd2l-tab-panel-text-changed', { bubbles: true, composed: true, detail: { text: this.text } }
+				));
 			}
 		});
 	}

package/custom-elements.json

@@ -9702,13 +9702,12 @@
         }
       ],
       "events": [
-        {
-          "name": "d2l-tab-panel-text-changed",
-          "description": "Dispatched when the text attribute is changed"
-        },
         {
           "name": "d2l-tab-panel-selected",
           "description": "Dispatched when a tab is selected"
+        },
+        {
+          "name": "d2l-tab-panel-text-changed"
         }
       ],
       "slots": [

package/mixins/arrow-keys-mixin.md

@@ -12,14 +12,14 @@ If the elements are known up-front and are in the element's local DOM scope, sim
 import { ArrowKeysMixin } from '@brightspace-ui/core/mixins/arrow-keys-mixin.js';
 class MyElement extends ArrowKeysMixin(LitElement) {
   render() {
-    return html`
+    return this.arrowKeysContainer(html`
       <div>
         ...
         <a href="..." class="d2l-arrowkeys-focusable">link 1</a>
         <a href="..." class="d2l-arrowkeys-focusable">link 2</a>
         ...
       </div>
-    `;
+    `);
   }
 }
 customElements.define('my-element', MyElement);
@@ -31,14 +31,14 @@ If the elements are not known up front, or the elements cannot be simply queried
 import { ArrowKeysMixin } from '@brightspace-ui/core/mixins/arrow-keys-mixin.js';
 class MyElement extends ArrowKeysMixin(LitElement) {
   render() {
-    return html`
+    return this.arrowKeysContainer(html`
       <div>
         ...
         <a href="...">link 1</a>
         <a href="...">link 2</a>
         ...
       </div>
-    `;
+    `);
   }
   async arrowKeysFocusablesProvider() {
     return [ /* array containing focusable elements */]
@@ -51,4 +51,8 @@ customElements.define('my-element', MyElement);
 
 - `arrowKeysDirection` (String): Indicates which arrow keys are allowed (default is leftright)
 - `arrowKeysNoWrap` (Boolean): Whether focus should wrap from end-to-start and start-to-end
-- `arrowKeysBeforeFocus` (Function): Async callback invoked before focus us applied
+
+**Methods:**
+- `arrowKeysContainer(innerHtmlTemplate)`: Hooks up the event listener, to be used in your `render` function to wrap the focusable elements
+- `async arrowKeysFocusablesProvider()` (Array): Optional - Override to provide the focusable elements if necessary (see above)
+- `async arrowKeysOnBeforeFocus(elemToBeFocused)`: Optional - Override to provide an async callback invoked before focus is applied

package/package.json

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