@brightspace-ui/core 2.130.0 → 2.131.1

package/components/calendar/calendar.js

@@ -463,8 +463,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				const month = day.getMonth();
 				const date = day.getDate();
 				const weekday = calendarData.descriptor.calendar.days.long[calendarData.daysOfWeekIndex[index]];
-				const description = `${weekday} ${date}. ${selected ? this.localize(`${this._namespace}.selected`) : this.localize(`${this._namespace}.notSelected`)} ${formatDate(day, { format: 'monthYear' })}`;
-				// role="gridcell" used for screen reader (e.g., JAWS and VoiceOver) behavior to work properly
+				const description = `${weekday} ${date} ${formatDate(day, { format: 'monthYear' })}`;
 				return html`
 					<td
 						aria-selected="${selected ? 'true' : 'false'}"
@@ -519,7 +518,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 								icon="tier1:chevron-right">
 							</d2l-button-icon>
 						</div>
-						<table aria-labelledby="${labelId}" role="presentation">
+						<table aria-labelledby="${labelId}">
 							${summary}
 							<thead aria-hidden="true">
 								<tr>${weekdayHeaders}</tr>

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

@@ -9,13 +9,20 @@ import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
-const normalizeHeadingNumber = (number) => {
+const normalizeHeadingStyle = (number) => {
 	number = parseInt(number);
 	if (number < 1) { return 1; }
 	if (number > 4) { return 4; }
 	return number;
 };
 
+const normalizeHeadingLevel = (number) => {
+	number = parseInt(number);
+	if (number < 1) { return 1; }
+	if (number > 6) { return 6; }
+	return number;
+};
+
 const defaultHeading = 3;
 
 /**
@@ -38,8 +45,8 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 			 */
 			panelTitle: { attribute: 'panel-title', type: String, reflect: true },
 			/**
-			 * The semantic heading level (h1-h4)
-			 * @type {'1'|'2'|'3'|'4'}
+			 * The semantic heading level (h1-h6)
+			 * @type {'1'|'2'|'3'|'4'|'5'|'6'}
 			 * @default "3"
 			 */
 			headingLevel: { attribute: 'heading-level', type: String, reflect: true },
@@ -453,7 +460,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 
 	_renderPanelTitle() {
 		let headingStyle = (this.headingStyle === defaultHeading && this.headingLevel !== this.headingStyle) ? this.headingLevel : this.headingStyle;
-		headingStyle = normalizeHeadingNumber(headingStyle);
+		headingStyle = normalizeHeadingStyle(headingStyle);
 
 		const titleClasses = {
 			'd2l-collapsible-panel-title': true,
@@ -461,12 +468,14 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 			[`d2l-heading-${headingStyle}`]: true,
 		};
 
-		const headingLevel = normalizeHeadingNumber(this.headingLevel);
+		const headingLevel = normalizeHeadingLevel(this.headingLevel);
 		switch (headingLevel) {
 			case 1: return html`<h1 class="${classMap(titleClasses)}">${this.panelTitle}</h1>`;
 			case 2: return html`<h2 class="${classMap(titleClasses)}">${this.panelTitle}</h2>`;
 			case 3: return html`<h3 class="${classMap(titleClasses)}">${this.panelTitle}</h3>`;
 			case 4: return html`<h4 class="${classMap(titleClasses)}">${this.panelTitle}</h4>`;
+			case 5: return html`<h5 class="${classMap(titleClasses)}">${this.panelTitle}</h5>`;
+			case 6: return html`<h6 class="${classMap(titleClasses)}">${this.panelTitle}</h6>`;
 		}
 	}
 

package/components/collapsible-panel/demo/collapsible-panel.html

@@ -153,7 +153,8 @@
 			</d2l-demo-snippet>
 
 			<h2>Headings</h2>
-			<d2l-demo-snippet class="spacer">
+			<d2l-demo-snippet>
+				<d2l-collapsible-panel-group>
 					<d2l-collapsible-panel heading-level="1" panel-title="Heading Level 1">
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
 					</d2l-collapsible-panel>
@@ -170,6 +171,14 @@
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
 					</d2l-collapsible-panel>
 
+					<d2l-collapsible-panel heading-level="5" panel-title="Heading Level 5">
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
+					</d2l-collapsible-panel>
+
+					<d2l-collapsible-panel heading-level="6" panel-title="Heading Level 6">
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
+					</d2l-collapsible-panel>
+
 					<d2l-collapsible-panel heading-style="2" panel-title="Heading Style 2">
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
 					</d2l-collapsible-panel>
@@ -177,6 +186,7 @@
 					<d2l-collapsible-panel heading-style="4" heading-level="2" panel-title="Heading Style 4">
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
 					</d2l-collapsible-panel>
+				</d2l-collapsible-panel-group>
 			</d2l-demo-snippet>
 
 			<h2>Loooooong</h2>

package/components/more-less/more-less.js

@@ -11,7 +11,6 @@ import { styleMap } from 'lit/directives/style-map.js';
 /**
  * A component used to minimize the display of long content, while providing a way to reveal the full content.
  * @slot - Default content placed inside of the component
- * @fires d2l-more-less-render - Dispatched when the component finishes rendering
  */
 class MoreLess extends LocalizeCoreElement(LitElement) {
 
@@ -147,12 +146,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 	}
 
 	render() {
-		requestAnimationFrame(
-			() => this.dispatchEvent(new CustomEvent('d2l-more-less-render', {
-				bubbles: false,
-				composed: false
-			}))
-		);
 		const contentClasses = {
 			'd2l-more-less-content': true,
 			'd2l-more-less-transition': this.__transitionAdded

package/custom-elements.json

@@ -1215,8 +1215,8 @@
         },
         {
           "name": "heading-level",
-          "description": "The semantic heading level (h1-h4)",
-          "type": "'1'|'2'|'3'|'4'",
+          "description": "The semantic heading level (h1-h6)",
+          "type": "'1'|'2'|'3'|'4'|'5'|'6'",
           "default": "\"\\\"3\\\"\""
         },
         {
@@ -1273,8 +1273,8 @@
         {
           "name": "headingLevel",
           "attribute": "heading-level",
-          "description": "The semantic heading level (h1-h4)",
-          "type": "'1'|'2'|'3'|'4'",
+          "description": "The semantic heading level (h1-h6)",
+          "type": "'1'|'2'|'3'|'4'|'5'|'6'",
           "default": "\"\\\"3\\\"\""
         },
         {
@@ -9875,12 +9875,6 @@
           "default": "\"getDocumentLocaleSettings()\""
         }
       ],
-      "events": [
-        {
-          "name": "d2l-more-less-render",
-          "description": "Dispatched when the component finishes rendering"
-        }
-      ],
       "slots": [
         {
           "name": "",

package/mixins/labelled/labelled-mixin.js

@@ -126,6 +126,16 @@ export const LabelledMixin = superclass => class extends superclass {
 
 	}
 
+	_dispatchChangeEvent() {
+		/** @ignore */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-labelled-mixin-label-change', {
+				bubbles: false,
+				composed: false
+			}
+		));
+	}
+
 	_throwError(err) {
 		if (!this.labelRequired || this._missingLabelErrorHasBeenThrown) return;
 		this._missingLabelErrorHasBeenThrown = true;
@@ -134,9 +144,14 @@ export const LabelledMixin = superclass => class extends superclass {
 
 	_updateLabelElem(labelElem) {
 
+		const oldLabelVal = this.label;
+
 		// setting textContent doesn't change labelElem but we do need to refetch the label
 		if (labelElem === this._labelElem && this._labelElem) {
 			this.label = getLabel(this._labelElem);
+			if (oldLabelVal !== this.label) {
+				this._dispatchChangeEvent();
+			}
 			return;
 		}
 
@@ -180,13 +195,9 @@ export const LabelledMixin = superclass => class extends superclass {
 		}
 
 		this.label = getLabel(this._labelElem);
-		/** @ignore */
-		this.dispatchEvent(new CustomEvent(
-			'd2l-labelled-mixin-label-elem-change', {
-				bubbles: false,
-				composed: false
-			}
-		));
+		if (oldLabelVal !== this.label) {
+			this._dispatchChangeEvent();
+		}
 
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.130.0",
+  "version": "2.131.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -45,9 +45,8 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7",
     "@brightspace-ui/stylelint-config": "^0.8",
-    "@brightspace-ui/testing": "^0.7",
+    "@brightspace-ui/testing": "^0.9",
     "@open-wc/semantic-dom-diff": "^0.20",
-    "@open-wc/testing": "^3",
     "@rollup/plugin-dynamic-import-vars": "^2",
     "@rollup/plugin-node-resolve": "^15",
     "@rollup/plugin-replace": "^5",

package/tools/constructor-test-helper.js

@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { expect } from '@brightspace-ui/testing';
 
 export function runConstructor(nodeName) {
 	const ctor = customElements.get(nodeName);