@brightspace-ui/core 1.176.2 → 1.177.0

package/components/count-badge/README.md

@@ -24,6 +24,21 @@ The `d2l-count-badge` element is a web component to display a number count, eith
 | `type`, default: `count` | String | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
 | `max-digits`, default: `2` when `type="notification"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and no limit for `"count"` type.
 | `hide-zero`, default: `false` | Boolean | Optionally choose not to show the count badge when the number is zero. |
+| `text`, required | String | Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled. |
+| `tab-stop`, default: `false` | Boolean | Optionally choose to make the badge a tab stop. |
+| `announce-changes`, default: `false` | Boolean | Optionally choose to announce changes to the badge with an aria-live region. If the text property is changed, the text will be read by screen-readers. |
+| `has-tooltip`, default: `false` | Boolean | Optionally choose to have a tooltip below the badge. |
+
+### Accessibility Properties
+
+To make your `d2l-count-badge` accessible, use the following properties when applicable:
+
+| Attribute | Description |
+|--|--|
+| `text`, required | Only the text will be read by screen-readers (not the number), so include the number in the text. |
+| `tab-stop` | A tab stop allows screen-reader users to easily tab to the badge. Otherwise, screen-reader users will need to arrow through to the badge. |
+| `announce-changes` | Use "announce-changes" if screen-reader users should be notified that the badge has been updated, such as a new notification. The "text" property will be read as soon as the screen-reader is idle. |
+| `has-tooltip` | The tooltip will be visible on hover/tab-stop, and read out by screen-readers. |
 
 ## Future Enhancements
 

package/components/count-badge/count-badge.js

@@ -1,18 +1,53 @@
 import '../colors/colors.js';
+import '../tooltip/tooltip.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 class CountBadge extends RtlMixin(LitElement) {
 
 	static get properties() {
 		return {
+			/**
+			 * Optionally choose to announce changes to the badge with an aria-live region. If the number property is changed, the text will be read by screenreaders. Defaults to false.
+			 * @type {boolean}
+			 */
+			announceChanges: {
+				type: Boolean,
+				attribute: 'announce-changes'
+			},
+			/**
+			 * Optionally add a tooltip on the badge. Defaults to false.
+			 * @type {boolean}
+			 */
+			hasTooltip: {
+				type: Boolean,
+				attribute: 'has-tooltip'
+			},
+			/**
+			 * Optionally choose to not render the count badge when the number is zero. Defaults to false.
+			 * @type {boolean}
+			 */
+			hideZero: {
+				type: Boolean,
+				attribute: 'hide-zero'
+			},
+			/**
+			 * Optionally specify a digit limit, after which numbers are truncated. Defaults to two for "notification" type and no limit for "count" type.
+			 * @type {number}
+			 */
+			maxDigits: {
+				type: Number,
+				attribute: 'max-digits'
+			},
 			/**
 			 * The number to be displayed on the badge. Must be a positive integer.
 			 * @type {number}
 			 */
 			number: {
 				type: Number,
-				reflect: true,
 				attribute: 'number'
 			},
 			/**
@@ -25,37 +60,34 @@ class CountBadge extends RtlMixin(LitElement) {
 				attribute: 'size'
 			},
 			/**
-			 * The type of the badge. Defaults to "count".
-			 * @type {'count'|'notification'}
+			 * Optionally choose to add a tab stop to the badge. Defaults to false.
+			 * @type {boolean}
 			 */
-			type: {
-				type: String,
-				reflect: true,
-				attribute: 'type'
+			tabStop: {
+				type: Boolean,
+				attribute: 'tab-stop'
 			},
 			/**
-			 * Optionally specify a digit limit, after which numbers are truncated. Defaults to two for "notification" type and no limit for "count" type.
-			 * @type {number}
+			 * * Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.
+			 * @type {string}
 			 */
-			maxDigits: {
-				type: Number,
-				reflect: true,
-				attribute: 'max-digits'
+			text: {
+				type: String
 			},
 			/**
-			 * Optionally choose to not render the count badge when the number is zero. Defaults to false.
-			 * @type {boolean}
+			 * The type of the badge. Defaults to "count".
+			 * @type {'count'|'notification'}
 			 */
-			hideZero: {
-				type: Boolean,
+			type: {
+				type: String,
 				reflect: true,
-				attribute: 'hide-zero'
-			},
+				attribute: 'type'
+			}
 		};
 	}
 
 	static get styles() {
-		return [ css`
+		return [offscreenStyles, css`
 		:host([hidden]) {
 			display: none;
 		}
@@ -112,9 +144,16 @@ class CountBadge extends RtlMixin(LitElement) {
 
 	constructor() {
 		super();
-		this.type = 'count';
-		this.size = 'small';
+		this.announceChanges = false;
+		this.hasTooltip = false;
 		this.hideZero = false;
+		this.size = 'small';
+		this.tabStop = false;
+		this.text = '';
+		this.type = 'count';
+
+		this._badgeId = getUniqueId();
+		this._textId = getUniqueId();
 	}
 
 	connectedCallback() {
@@ -134,7 +173,17 @@ class CountBadge extends RtlMixin(LitElement) {
 			numberString = `${'9'.repeat(this.maxDigits)}+`;
 		}
 		return html`
-        	<div class="d2l-count-badge-number">${numberString}</div>`;
+        	<div
+			class="d2l-count-badge-number" 
+			id="${this._badgeId}"
+			tabindex="${ifDefined(this.tabStop || this.hasTooltip ? '0' : undefined)}" 
+			aria-labelledby="${ifDefined(this.hasTooltip ? undefined : this._textId)}">
+					<div aria-hidden="true">${numberString}</div>
+					${this.hasTooltip ?
+		html`<d2l-tooltip id="${this._textId}" for="${this._badgeId}" aria-live="${this.announceChanges ? 'polite' : 'off'}">${this.text}</d2l-tooltip>`
+		: html`<span id="${this._textId}" class="d2l-offscreen" aria-live="${this.announceChanges ? 'polite' : 'off'}">"${this.text}"</span>`}
+			</div>
+			`;
 	}
 }
 

package/components/count-badge/demo/count-badge.html

@@ -9,6 +9,7 @@
 		<script type="module">
 			import '../../demo/demo-page.js';
 			import '../count-badge.js';
+			import '../../button/button.js';
         </script>
 	</head>
 	<body unresolved>
@@ -17,22 +18,43 @@
 			<h2>Small Notification Badge</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-count-badge size="small" type="notification" number="1"></d2l-count-badge>
-					<d2l-count-badge size="small" type="notification" number="10"></d2l-count-badge>
-					<d2l-count-badge size="small" type="notification" number="100"></d2l-count-badge>
+					<d2l-count-badge size="small" tab-stop text=" 1 new notification." type="notification" number="1"></d2l-count-badge>
+					<d2l-count-badge size="small"  text="10 new notifications."  type="notification" number="10"></d2l-count-badge>
+					<d2l-count-badge size="small"  text="100 new notifications." type="notification" number="100"></d2l-count-badge>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Small Notification Badge with live region</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-count-badge id="badge-announce-changes"size="small" announce-changes tab-stop text=" 1 new notification." type="notification" number="1"></d2l-count-badge>
+					<d2l-button id="increment-count">Increment Count</d2l-button>
 				</template>
 			</d2l-demo-snippet>
 
 			<h2>Large Count Badge</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-count-badge size="large" type="count" number="1"></d2l-count-badge>
-					<d2l-count-badge size="large" type="count" number="10"></d2l-count-badge>
-					<d2l-count-badge size="large" type="count" number="100"></d2l-count-badge>
-					<d2l-count-badge size="large" type="count" number="777777"></d2l-count-badge>
-					<d2l-count-badge size="large" type="count" number="777777" max-digits="5"></d2l-count-badge>
+					<d2l-count-badge size="large" text="1 new notification." type="count" number="1"></d2l-count-badge>
+					<d2l-count-badge size="large" text="10 new notifications." type="count" number="10"></d2l-count-badge>
+					<d2l-count-badge size="large" text="100 new notifications." type="count" number="100"></d2l-count-badge>
+					<d2l-count-badge size="large" text="777777 new notifications." type="count" number="777777"></d2l-count-badge>
+					<d2l-count-badge size="large" text="777777 new notifications."type="count" number="777777" max-digits="5"></d2l-count-badge>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Small Notification Badge with Tooltip</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-count-badge size="small" has-tooltip text=" 3 new notification." type="notification" number="1"></d2l-count-badge>
 				</template>
 			</d2l-demo-snippet>
 		</d2l-demo-page>
+		<script type="module">
+			document.getElementById('increment-count').addEventListener('click', () => {
+				document.getElementById('badge-announce-changes').number += 1;
+				document.getElementById('badge-announce-changes').text = `${document.getElementById('badge-announce-changes').number} new notifications.`;
+			});
+		</script>
 	</body>
 </html>

package/components/dropdown/dropdown-content-mixin.js

@@ -323,7 +323,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			this.opened = false;
 		};
 
-		if (!reduceMotion && this.mediaQueryList.matches && this.mobileTray && isVisible(this)) {
+		if (!reduceMotion && this._useMobileStyling && this.mobileTray && isVisible(this)) {
 			this.shadowRoot.querySelector('.d2l-dropdown-content-width')
 				.addEventListener('animationend', hide, { once: true });
 			this._closing = true;
@@ -352,14 +352,14 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this.__applyFocus = applyFocus !== undefined ? applyFocus : true;
 		this.opened = true;
 		await this.updateComplete;
-		this._showBackdrop = this.mediaQueryList.matches && this.mobileTray;
+		this._showBackdrop = this._useMobileStyling && this.mobileTray;
 	}
 
 	async resize() {
 		if (!this.opened) {
 			return;
 		}
-		this._showBackdrop = this.mediaQueryList.matches && this.mobileTray;
+		this._showBackdrop = this._useMobileStyling && this.mobileTray;
 		await this.__position();
 	}
 
@@ -504,7 +504,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			}
 
 			await this.__position();
-			this._showBackdrop = this.mediaQueryList.matches && this.mobileTray;
+			this._showBackdrop = this._useMobileStyling && this.mobileTray;
 
 			if (!this.noAutoFocus && this.__applyFocus) {
 				const focusable = getFirstFocusableDescendant(this);
@@ -530,7 +530,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 
 		if (newValue) {
 
-			if (ifrauBackdropService && this.mobileTray && this.mediaQueryList.matches) {
+			if (ifrauBackdropService && this.mobileTray && this._useMobileStyling) {
 				this._ifrauContextInfo = await ifrauBackdropService.showBackdrop();
 			}
 
@@ -542,7 +542,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 				clearDismissible(this.__dismissibleId);
 				this.__dismissibleId = null;
 			}
-			if (ifrauBackdropService && this.mobileTray && this.mediaQueryList.matches) {
+			if (ifrauBackdropService && this.mobileTray && this._useMobileStyling) {
 				ifrauBackdropService.hideBackdrop();
 				this._ifrauContextInfo = null;
 			}
@@ -771,8 +771,10 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this.dispatchEvent(new CustomEvent('d2l-dropdown-focus-enter'));
 	}
 
-	_handleMobileResize() {
+	async _handleMobileResize() {
 		this._useMobileStyling =  this.mediaQueryList.matches;
+		this._showBackdrop = this._useMobileStyling && this.mobileTray;
+		if (this.opened) await this.__position();
 	}
 
 	_renderContent() {
@@ -787,9 +789,9 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			}
 		}
 
-		const specialMobileStyle = this.mediaQueryList.matches && this.mobileTray;
-		const mobileTrayRightLeft = this.mediaQueryList.matches && (this.mobileTray === 'right' || this.mobileTray === 'left');
-		const mobileTrayBottom = this.mediaQueryList.matches && (this.mobileTray === 'bottom');
+		const specialMobileStyle = this._useMobileStyling && this.mobileTray;
+		const mobileTrayRightLeft = this._useMobileStyling && (this.mobileTray === 'right' || this.mobileTray === 'left');
+		const mobileTrayBottom = this._useMobileStyling && (this.mobileTray === 'bottom');
 
 		let maxWidthOverride = this.maxWidth;
 		if (mobileTrayRightLeft) {

package/components/expand-collapse/README.md

@@ -1,36 +1,76 @@
-# Expand Collapse
+# Collapsible Containers
 
-## Expand Collapse Content
+## Expand Collapse Content [d2l-expand-collapse-content]
 
 The `d2l-expand-collapse-content` element can be used to create expandable and collapsible content. This component only provides the logic to expand and collapse the content; controlling when and how it expands or collapses is the responsibility of the user.
 
+<!-- docs: start hidden content -->
 ![Expand Collapse Content](./screenshots/expand-collapse-content.gif?raw=true)
+<!-- docs: end hidden content -->
 
+<!-- docs: demo live name:d2l-expand-collapse-content autoSize:false display:block size:small -->
 ```html
 <script type="module">
+  import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/expand-collapse/expand-collapse-content.js';
-</script>
 
-<d2l-expand-collapse-content expanded>
+  const button = document.querySelector('d2l-button');
+  button.addEventListener('click', () => {
+    const section = document.querySelector('d2l-expand-collapse-content');
+    section.expanded = !section.expanded;
+    button.setAttribute('aria-expanded', section.expanded ? 'true' : 'false');
+  });
+</script>
+<d2l-button primary>Toggle</d2l-button>
+<d2l-expand-collapse-content>
   <p>My expand collapse content.</p>
 </d2l-expand-collapse-content>
 ```
 
-**Properties:**
+<!-- docs: start hidden content -->
+### Properties
 
 | Property | Type | Description |
 |--|--|--|
 | `expanded` | Boolean, default: `false` | Specifies the expanded/collapsed state of the content |
 
-**Events:**
+### Events
 
 - `d2l-expand-collapse-content-expand`: dispatched when the content starts to expand. The `detail` contains an `expandComplete` promise that can be waited on to determine when the content has finished expanding.
 - `d2l-expand-collapse-content-collapse`: dispatched when the content starts to collapse. The `detail` contains a `collapseComplete` promise that can be waited on to determine when the content has finished collapsing.
+<!-- docs: end hidden content -->
 
-**Accessibility:**
+### Accessibility Properties
 
 To make your usage of `d2l-expand-collapse-content` accessible, the [`aria-expanded` attribute](https://www.w3.org/TR/wai-aria/#aria-expanded) should be added to the element that controls expanding and collapsing the content with `"true"` or `"false"` to indicate that the content is expanded or collapsed.
 
-## Future Enhancements
+## More-Less [d2l-more-less]
+
+The `d2l-more-less` element can be used to minimize the display of long content, while providing a way to reveal the full content.
 
-Looking for an enhancement not listed here? Create a GitHub issue!
+<!-- docs: start hidden content -->
+![More-Less](./screenshots/more-less.png?raw=true)
+<!-- docs: end hidden content -->
+
+<!-- docs: demo live name:d2l-more-less -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/more-less/more-less.js';
+</script>
+<d2l-more-less>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+</d2l-more-less>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `blur-color` | String | Gradient HEX formatted color of the blurring effect (defaults to white). |
+| `expanded` | Boolean | Specifies the expanded/collapsed state of the content |
+| `h-align` | String | A value of `text` aligns the leading edge of text |
+| `height` | String, default: `'4em'` | Maximum height of the content when in "less" mode. The `d2l-more-less` element itself will take up additional vertical space for the fading effect as well as the more/less button itself. |
+| `inactive` | Boolean | Whether the component is active or inactive |
+<!-- docs: end hidden content -->

package/components/expand-collapse/expand-collapse-content.js

@@ -12,10 +12,20 @@ const states = {
 	EXPANDED: 'expanded', // fully expanded
 };
 
+/**
+ * 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-expand-collapse-content-expand - Dispatched when the content starts to expand. The `detail` contains an `expandComplete` promise that can be waited on to determine when the content has finished expanding.
+ * @fires d2l-expand-collapse-content-collapse - Dispatched when the content starts to collapse. The `detail` contains a `collapseComplete` promise that can be waited on to determine when the content has finished collapsing.
+ */
 class ExpandCollapseContent extends LitElement {
 
 	static get properties() {
 		return {
+			/**
+			 * Specifies the expanded/collapsed state of the content
+			 * @type {boolean}
+			 */
 			expanded: { type: Boolean, reflect: true },
 			_height: { type: String },
 			_state: { type: String }

package/components/filter/filter.js

@@ -213,11 +213,12 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		}
 		return this._dimensions.map((dimension) => {
 			const builtDimension = this._buildDimension(dimension);
-			const dimensionDescription = `${dimension.text}. ${this.localize('components.filter.filterCountDescription', { number: dimension.appliedCount })}`;
-			return html`<d2l-menu-item text="${dimension.text}" description="${dimensionDescription}">
+			const countBadgeId = `filters-applied-count-${dimension.key}`;
+			const filtersAppliedText = `${this.localize('components.filter.filterCountDescription', { number: dimension.appliedCount })}`;
+			return html`<d2l-menu-item text="${dimension.text}" description="${dimension.text}." aria-describedby="${countBadgeId}">
 				${builtDimension}
 				<div slot="supporting">
-					<d2l-count-badge number="${dimension.appliedCount}" max-digits="2" hide-zero></d2l-count-badge>
+					<d2l-count-badge id="${countBadgeId}" number="${dimension.appliedCount}" max-digits="2" text="${filtersAppliedText}" hide-zero></d2l-count-badge>
 				</div>
 			</d2l-menu-item>`;
 		});

package/components/more-less/README.md

@@ -1,27 +1,3 @@
 # More-Less
 
-The `d2l-more-less` element can be used to minimize the display of long content, while providing a way to reveal the full content.
-
-![More-Less](./screenshots/more-less.png?raw=true)
-
-```html
-<script type="module">
-  import '@brightspace-ui/core/components/more-less/more-less.js';
-</script>
-<d2l-more-less>
-  Grumpy wizards make toxic brew for the evil Queen and Jack.
-</d2l-more-less>
-```
-
-**Properties:**
-
-| Property | Type | Description |
-|--|--|--|
-| `blur-color` | String | Gradient HEX formatted color of the blurring effect (defaults to white). |
-| `expanded` | Boolean | Specifies the expanded/collapsed state of the content |
-| `h-align` | String | A value of `text` aligns the leading edge of text |
-| `height` | String, default: `'4em'` | Maximum height of the content when in "less" mode. The `d2l-more-less` element itself will take up additional vertical space for the fading effect as well as the more/less button itself. |
-
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!
+See [more-less](https://github.com/BrightspaceUI/core/tree/main/components/expand-collapse/README.md#more-less-d2l-more-less).

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

@@ -19,11 +19,13 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 		return {
 			/**
 			 * The gradient color of the blurring effect
+			 * @type {string}
 			 */
 			blurColor: { type: String, attribute: 'blur-color' },
 
 			/**
 			 * Indicates whether element is in "more" state
+			 * @type {boolean}
 			 */
 			expanded: { type: Boolean, reflect: true },
 
@@ -35,11 +37,13 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 
 			/**
 			 * The maximum height of the content when in "less" state
+			 * @type {string}
 			 */
 			height: { type: String },
 
 			/**
 			 * Whether the component is active or inactive
+			 * @type {boolean}
 			 */
 			inactive: { type: Boolean, reflect: true },
 			__blurBackground: { type: String },

package/components/selection/selection-mixin.js

@@ -171,6 +171,8 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 				if (selectable.selected && selectable !== target) selectable.selected = false;
 			});
 		}
+
+		this._updateSelectionObservers();
 	}
 
 	_handleSelectionObserverSubscribe(e) {

package/components/status-indicator/README.md

@@ -106,7 +106,6 @@ The state is used to apply a meaningful colour to the status indicator to assist
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/status-indicator/status-indicator.js';
-  import '@brightspace-ui/core/components/status-indicator/status-indicator.js';
 </script>
 <style>
   .status-format {

package/custom-elements.json

@@ -1008,21 +1008,33 @@
       "name": "d2l-count-badge",
       "path": "./components/count-badge/count-badge.js",
       "attributes": [
+        {
+          "name": "max-digits",
+          "description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
+          "type": "number"
+        },
         {
           "name": "number",
           "description": "The number to be displayed on the badge. Must be a positive integer.",
           "type": "number"
         },
         {
-          "name": "max-digits",
-          "description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
-          "type": "number"
+          "name": "announce-changes",
+          "description": "Optionally choose to announce changes to the badge with an aria-live region. If the number property is changed, the text will be read by screenreaders. Defaults to false.",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "type",
-          "description": "The type of the badge. Defaults to \"count\".",
-          "type": "'count'|'notification'",
-          "default": "\"count\""
+          "name": "has-tooltip",
+          "description": "Optionally add a tooltip on the badge. Defaults to false.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "hide-zero",
+          "description": "Optionally choose to not render the count badge when the number is zero. Defaults to false.",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "size",
@@ -1031,13 +1043,31 @@
           "default": "\"small\""
         },
         {
-          "name": "hide-zero",
-          "description": "Optionally choose to not render the count badge when the number is zero. Defaults to false.",
+          "name": "tab-stop",
+          "description": "Optionally choose to add a tab stop to the badge. Defaults to false.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "text",
+          "description": "* Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "type",
+          "description": "The type of the badge. Defaults to \"count\".",
+          "type": "'count'|'notification'",
+          "default": "\"count\""
         }
       ],
       "properties": [
+        {
+          "name": "maxDigits",
+          "attribute": "max-digits",
+          "description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
+          "type": "number"
+        },
         {
           "name": "number",
           "attribute": "number",
@@ -1045,17 +1075,25 @@
           "type": "number"
         },
         {
-          "name": "maxDigits",
-          "attribute": "max-digits",
-          "description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
-          "type": "number"
+          "name": "announceChanges",
+          "attribute": "announce-changes",
+          "description": "Optionally choose to announce changes to the badge with an aria-live region. If the number property is changed, the text will be read by screenreaders. Defaults to false.",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "type",
-          "attribute": "type",
-          "description": "The type of the badge. Defaults to \"count\".",
-          "type": "'count'|'notification'",
-          "default": "\"count\""
+          "name": "hasTooltip",
+          "attribute": "has-tooltip",
+          "description": "Optionally add a tooltip on the badge. Defaults to false.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "hideZero",
+          "attribute": "hide-zero",
+          "description": "Optionally choose to not render the count badge when the number is zero. Defaults to false.",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "size",
@@ -1065,11 +1103,25 @@
           "default": "\"small\""
         },
         {
-          "name": "hideZero",
-          "attribute": "hide-zero",
-          "description": "Optionally choose to not render the count badge when the number is zero. Defaults to false.",
+          "name": "tabStop",
+          "attribute": "tab-stop",
+          "description": "Optionally choose to add a tab stop to the badge. Defaults to false.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "* Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "type",
+          "attribute": "type",
+          "description": "The type of the badge. Defaults to \"count\".",
+          "type": "'count'|'notification'",
+          "default": "\"count\""
         }
       ]
     },
@@ -2536,9 +2588,11 @@
     {
       "name": "d2l-expand-collapse-content",
       "path": "./components/expand-collapse/expand-collapse-content.js",
+      "description": "A component used to minimize the display of long content, while providing a way to reveal the full content.",
       "attributes": [
         {
           "name": "expanded",
+          "description": "Specifies the expanded/collapsed state of the content",
           "type": "boolean",
           "default": "false"
         }
@@ -2547,16 +2601,25 @@
         {
           "name": "expanded",
           "attribute": "expanded",
+          "description": "Specifies the expanded/collapsed state of the content",
           "type": "boolean",
           "default": "false"
         }
       ],
       "events": [
         {
-          "name": "d2l-expand-collapse-content-expand"
+          "name": "d2l-expand-collapse-content-expand",
+          "description": "Dispatched when the content starts to expand. The `detail` contains an `expandComplete` promise that can be waited on to determine when the content has finished expanding."
         },
         {
-          "name": "d2l-expand-collapse-content-collapse"
+          "name": "d2l-expand-collapse-content-collapse",
+          "description": "Dispatched when the content starts to collapse. The `detail` contains a `collapseComplete` promise that can be waited on to determine when the content has finished collapsing."
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Default content placed inside of the component"
         }
       ]
     },

package/package.json

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