npm - @brightspace-ui/core - Versions diffs - 3.62.4 → 3.64.0 - Mend

@brightspace-ui/core 3.62.4 → 3.64.0

Files changed (16) hide show

package/components/count-badge/README.md +31 -38
package/components/count-badge/count-badge-mixin.js +10 -11
package/components/dialog/dialog-mixin.js +1 -2
package/components/filter/demo/filter-tags.html +0 -2
package/components/filter/demo/filter.html +4 -4
package/components/inputs/demo/input-search.html +0 -1
package/components/inputs/input-date-time.js +3 -3
package/components/inputs/input-date.js +1 -1
package/components/list/list-item-generic-layout.js +0 -1
package/custom-elements.json +40 -40
package/helpers/focus.js +1 -1
package/helpers/framed.js +1 -1
package/mixins/async-container/async-container-mixin.js +1 -1
package/mixins/loading-complete/loading-complete-mixin.js +0 -2
package/package.json +7 -4
package/templates/primary-secondary/primary-secondary.js +2 -2

package/components/count-badge/README.md CHANGED Viewed

@@ -24,30 +24,21 @@ The `d2l-count-badge` element is a web component to display a number count, depe
 </script>
 <d2l-count-badge size="small" type="notification" text="100 new notifications" number="100" has-tooltip tab-stop></d2l-count-badge>
 ```
-### Accessibility Properties
-| 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. |
 <!-- docs: start hidden content -->
 ### Properties
 | Property | Type | Description |
 |---|---|---|
-| `number` | Number, required | The number to display on the badge.  Must be a positive integer. |
-| `size`, default: `small` | String | The size of the badge. Valid options are `"small"` and `"large"`. |
-| `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"`, `5` when `type="count"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and five for `"count"` type. Must be between 1-5.
-| `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. |
-| `focus-ring`, default: `false` | Boolean | Optionally force a focus ring around the badge. This property can be used to highlight the badge when the parent element is focused. |
+| `number` | Number, required | The number to display on the badge; must be a positive integer |
+| `size` | String, default: `small` | The size of the badge. Valid options are `"small"` and `"large"`. |
+| `type` | String, default: `count` | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
+| `max-digits` | Number, default: `2` when `type="notification"`, `5` when `type="count"` | Specifies a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and five for `"count"` type. Must be between 1-5.
+| `hide-zero` | Boolean, default: `false` | Hides the count badge when `number` is zero |
+| `text` | String, required | Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled |
+| `tab-stop` | Boolean, default: `false` | Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge |
+| `announce-changes` | Boolean, default: `false` | When `true`, changes to the badge will be announced to screen reader users |
+| `has-tooltip` | Boolean, default: `false` | Adds a tooltip on the badge, which will be visible on hover/tab-stop, and read out by screen-readers |
+| `focus-ring` | Boolean, default: `false` | Forces the focus ring around the badge. This property can be used to highlight the badge when the parent element is focused. |
 <!-- docs: end hidden content -->
 ## Count Badge: Icon [d2l-count-badge-icon]
@@ -62,28 +53,30 @@ The `d2l-count-badge-icon` element is a web component to display a number count,
 <d2l-count-badge-icon size="small" icon="tier1:gear" type="notification" text="100 new settings applied." number="100" tab-stop has-tooltip></d2l-count-badge-icon>
 ```
-### Accessibility Properties
-| 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. |
 <!-- docs: start hidden content -->
 ### Properties
 | Property | Type | Description |
 |--|--|--|
-| `number` | Number | Required: The number to display on the badge.  Must be a positive integer. |
-| `icon` | String | Required: [Preset icon key](../icons#preset-icons) (e.g. `tier1:gear`) |
-| `size`, default: `small` | String | The size of the badge. Valid options are `"small"` and `"large"`. |
-| `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"`, `5` when `type="count"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and five for `"count"` type. Must be between 1-5.
-| `hide-zero`, default: `false` | Boolean | Optionally choose not to show the count badge when the number is zero. |
-| `text`  | String | REQUIRED: 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. |
-| `focus-ring`, default: `false` | Boolean | Optionally force a focus ring around the badge. This property can be used to highlight the badge when the parent element is focused. |
+| `number` | Number, required | The number to display on the badge; must be a positive integer |
+| `icon` | String, required | [Preset icon key](../icons#preset-icons) (e.g. `tier1:gear`) |
+| `size` | String, default: `small` | The size of the badge. Valid options are `"small"` and `"large"`. |
+| `type` | String, default: `count` | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
+| `max-digits` | Number, default: `2` when `type="notification"`, `5` when `type="count"` | Specifies a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and five for `"count"` type. Must be between 1-5.
+| `hide-zero` | Boolean, default: `false` | Hides the count badge when `number` is zero |
+| `text` | String, required | Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled |
+| `tab-stop` | Boolean, default: `false` |  Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge |
+| `announce-changes` | Boolean, default: `false` | When `true`, changes to the badge will be announced to screen reader users |
+| `has-tooltip` | Boolean, default: `false` | Adds a tooltip on the badge, which will be visible on hover/tab-stop, and read out by screen-readers |
+| `focus-ring` | Boolean, default: `false` | Forces a focus ring around the badge. This property can be used to highlight the badge when the parent element is focused. |
 <!-- docs: end hidden content -->
+## Accessibility
+Notable accessibility features:
+- `tab-stop`:
+  - While non-interactive components traditionally shouldn't be focusable, this property greatly helps screen reader users find the the count badge, and removes the need to use the arrow keys to navigate to it
+  - This isn't needed if the optional tooltip is used, as the count-badge becomes focusable in order to display the tooltip
+- `has-tooltip`:
+  - The optional tooltip makes use of the [`d2l-tooltip`](../../components/tooltip), which follows the [W3C best practices for Tooltips](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)
+  - This tooltip can help provide additional context, such as by providing the exact count badge number if it were to go above the limit set in `max-digits`

package/components/count-badge/count-badge-mixin.js CHANGED Viewed

@@ -16,7 +16,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 	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.
+			 * ACCESSIBILITY: When `true`, changes to the badge will be announced to screen reader users
 			 * @type {boolean}
 			 */
 			announceChanges: {
@@ -24,7 +24,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 				attribute: 'announce-changes'
 			},
 			/**
-			 * Optionally choose to force the focus ring around the badge. Defaults to false.
+			 * Forces the focus ring around the badge
 			 * @type {boolean}
 			 */
 			forceFocusRing: {
@@ -33,7 +33,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 				reflect: true
 			},
 			/**
-			 * Optionally add a tooltip on the badge. Defaults to false.
+			 * ACCESSIBILITY: Adds a tooltip on the badge, which will be visible on hover and keyboard interaction
 			 * @type {boolean}
 			 */
 			hasTooltip: {
@@ -41,7 +41,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 				attribute: 'has-tooltip'
 			},
 			/**
-			 * Optionally choose to not render the count badge when the number is zero. Defaults to false.
+			 * Hides the count badge when `number` is zero
 			 * @type {boolean}
 			 */
 			hideZero: {
@@ -49,8 +49,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 				attribute: 'hide-zero'
 			},
 			/**
-			 * Optionally specify a digit limit, after which numbers are truncated.
-			 * Defaults to two for "notification" type and five for "count" type.
+			 * Specifies a digit limit, after which numbers are truncated. Defaults to two for "notification" type and five for "count" type.
 			 * @type {number}
 			 */
 			maxDigits: {
@@ -58,7 +57,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 				attribute: 'max-digits'
 			},
 			/**
-			 * REQUIRED: The number to be displayed on the badge. Must be a positive integer.
+			 * REQUIRED: The number to be displayed on the badge; must be a positive integer
 			 * @type {number}
 			 */
 			number: {
@@ -66,7 +65,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 				attribute: 'number'
 			},
 			/**
-			 * The size of the badge. Defaults to "small".
+			 * The size of the badge
 			 * @type {'small'|'large'}
 			 */
 			size: {
@@ -75,7 +74,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 				attribute: 'size'
 			},
 			/**
-			 * Optionally choose to add a tab stop to the badge. Defaults to false.
+			 * ACCESSIBILITY: Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge
 			 * @type {boolean}
 			 */
 			tabStop: {
@@ -83,14 +82,14 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 				attribute: 'tab-stop'
 			},
 			/**
-			 * REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.
+			 * ACCESSIBILITY: REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled
 			 * @type {string}
 			 */
 			text: {
 				type: String
 			},
 			/**
-			 * The type of the badge. Defaults to "count".
+			 * The type of the badge
 			 * @type {'count'|'notification'}
 			 */
 			type: {

package/components/dialog/dialog-mixin.js CHANGED Viewed

@@ -19,8 +19,7 @@ window.D2L.DialogMixin = window.D2L.DialogMixin || {};
 // https://bugs.webkit.org/show_bug.cgi?id=233320
 // starting in Chrome 102, all elements inside <dialog>s that are inside shadow roots have null offsetParent
 // https://bugs.chromium.org/p/chromium/issues/detail?id=1331803
-window.D2L.DialogMixin.hasNative = false && (window.HTMLDialogElement !== undefined)
-	&& (navigator.vendor && navigator.vendor.toLowerCase().indexOf('apple') === -1);
+window.D2L.DialogMixin.hasNative = false;
 if (window.D2L.DialogMixin.preferNative === undefined) {
 	window.D2L.DialogMixin.preferNative = true;
 }

package/components/filter/demo/filter-tags.html CHANGED Viewed

@@ -77,14 +77,12 @@
 				coreFilter.addEventListener('d2l-filter-change', (e) => {
 					logEvent(e, 'Filter value(s) changed!');
 				});
-				/* eslint-disable no-console */
 				function logEvent(e, text) {
 					console.group(text);
 					console.log('event', e);
 					if (e.detail) console.log('detail', e.detail);
 					console.groupEnd();
 				}
-				/* eslint-enable no-console */
 			</script>
 			<h2>Registered to both filters</h2>

package/components/filter/demo/filter.html CHANGED Viewed

@@ -191,14 +191,14 @@
 	<script type="module">
 		document.addEventListener('d2l-filter-change', e => {
 			if (e.detail.dimensions.length === 1) {
-				console.log(`Filter selection(s) changed for dimension "${e.detail.dimensions[0].dimensionKey}":`, e.detail.dimensions[0].changes); // eslint-disable-line no-console
-				if (e.detail.dimensions[0].cleared) console.log(`(Dimension "${e.detail.dimensions[0].dimensionKey}" cleared)`); // eslint-disable-line no-console
+				console.log(`Filter selection(s) changed for dimension "${e.detail.dimensions[0].dimensionKey}":`, e.detail.dimensions[0].changes);
+				if (e.detail.dimensions[0].cleared) console.log(`(Dimension "${e.detail.dimensions[0].dimensionKey}" cleared)`);
 			} else {
-				console.log('Multiple dimension selections changed:', e.detail.dimensions); // eslint-disable-line no-console
+				console.log('Multiple dimension selections changed:', e.detail.dimensions);
 			}
 			if (e.detail.allCleared) {
-				console.log('(All dimensions cleared)'); // eslint-disable-line no-console
+				console.log('(All dimensions cleared)');
 			}
 		});

package/components/inputs/demo/input-search.html CHANGED Viewed

@@ -66,7 +66,6 @@
 			<script>
 				document.body.addEventListener('d2l-input-search-searched', (e) => {
-					// eslint-disable-next-line no-console
 					console.log(e);
 				});
 			</script>

package/components/inputs/input-date-time.js CHANGED Viewed

@@ -143,7 +143,7 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
 				const dateObj = parseISODateTime(val);
 				const localDateTime = convertUTCToLocalDateTime(dateObj);
 				this._maxValueLocalized = formatDateInISO(localDateTime);
-			} catch (e) {
+			} catch {
 				this._maxValueLocalized = undefined;
 			}
 		}
@@ -160,7 +160,7 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
 				const dateObj = parseISODateTime(val);
 				const localDateTime = convertUTCToLocalDateTime(dateObj);
 				this._minValueLocalized = formatDateInISO(localDateTime);
-			} catch (e) {
+			} catch {
 				this._minValueLocalized = undefined;
 			}
 		}
@@ -176,7 +176,7 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
 			try {
 				getLocalDateTimeFromUTCDateTime(val);
 				this._value = val;
-			} catch (e) {
+			} catch {
 				this._value = '';
 			}
 		}

package/components/inputs/input-date.js CHANGED Viewed

@@ -371,7 +371,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		try {
 			const date = parseDate(value);
 			await this._updateValueDispatchEvent(formatDateInISO({ year: date.getFullYear(), month: (parseInt(date.getMonth()) + 1), date: date.getDate() }));
-		} catch (err) {
+		} catch {
 			// leave value the same when invalid input
 		}
 		this._setFormattedValue(); // keep out here in case parseDate is same date, e.g., user adds invalid text to end of parseable date

package/components/list/list-item-generic-layout.js CHANGED Viewed

@@ -205,7 +205,6 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				const slot = (event.path || event.composedPath()).find((node) =>
 					node.nodeName === 'SLOT' && ['content'].includes(node.name)
 				);
-				// eslint-disable-next-line no-console
 				console.warn(`${slot.name} area should not have focusable items in it. Consider using href or creating a custom list-item.`);
 			},
 			capture: true

package/custom-elements.json CHANGED Viewed

@@ -1516,59 +1516,59 @@
         },
         {
           "name": "max-digits",
-          "description": "Optionally specify a digit limit, after which numbers are truncated.\nDefaults to two for \"notification\" type and five for \"count\" type.",
+          "description": "Specifies a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and five for \"count\" type.",
           "type": "number"
         },
         {
           "name": "number",
-          "description": "REQUIRED: The number to be displayed on the badge. Must be a positive integer.",
+          "description": "REQUIRED: The number to be displayed on the badge; must be a positive integer",
           "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.",
+          "description": "ACCESSIBILITY: When `true`, changes to the badge will be announced to screen reader users",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "focus-ring",
-          "description": "Optionally choose to force the focus ring around the badge. Defaults to false.",
+          "description": "Forces the focus ring around the badge",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "has-tooltip",
-          "description": "Optionally add a tooltip on the badge. Defaults to false.",
+          "description": "ACCESSIBILITY: Adds a tooltip on the badge, which will be visible on hover and keyboard interaction",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "hide-zero",
-          "description": "Optionally choose to not render the count badge when the number is zero. Defaults to false.",
+          "description": "Hides the count badge when `number` is zero",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "size",
-          "description": "The size of the badge. Defaults to \"small\".",
+          "description": "The size of the badge",
           "type": "'small'|'large'",
           "default": "\"small\""
         },
         {
           "name": "tab-stop",
-          "description": "Optionally choose to add a tab stop to the badge. Defaults to false.",
+          "description": "ACCESSIBILITY: Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "text",
-          "description": "REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
+          "description": "ACCESSIBILITY: REQUIRED: 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\".",
+          "description": "The type of the badge",
           "type": "'count'|'notification'",
           "default": "\"count\""
         },
@@ -1588,68 +1588,68 @@
         {
           "name": "maxDigits",
           "attribute": "max-digits",
-          "description": "Optionally specify a digit limit, after which numbers are truncated.\nDefaults to two for \"notification\" type and five for \"count\" type.",
+          "description": "Specifies a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and five for \"count\" type.",
           "type": "number"
         },
         {
           "name": "number",
           "attribute": "number",
-          "description": "REQUIRED: The number to be displayed on the badge. Must be a positive integer.",
+          "description": "REQUIRED: The number to be displayed on the badge; must be a positive integer",
           "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.",
+          "description": "ACCESSIBILITY: When `true`, changes to the badge will be announced to screen reader users",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "forceFocusRing",
           "attribute": "focus-ring",
-          "description": "Optionally choose to force the focus ring around the badge. Defaults to false.",
+          "description": "Forces the focus ring around the badge",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "hasTooltip",
           "attribute": "has-tooltip",
-          "description": "Optionally add a tooltip on the badge. Defaults to false.",
+          "description": "ACCESSIBILITY: Adds a tooltip on the badge, which will be visible on hover and keyboard interaction",
           "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.",
+          "description": "Hides the count badge when `number` is zero",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "size",
           "attribute": "size",
-          "description": "The size of the badge. Defaults to \"small\".",
+          "description": "The size of the badge",
           "type": "'small'|'large'",
           "default": "\"small\""
         },
         {
           "name": "tabStop",
           "attribute": "tab-stop",
-          "description": "Optionally choose to add a tab stop to the badge. Defaults to false.",
+          "description": "ACCESSIBILITY: Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "text",
           "attribute": "text",
-          "description": "REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
+          "description": "ACCESSIBILITY: REQUIRED: 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\".",
+          "description": "The type of the badge",
           "type": "'count'|'notification'",
           "default": "\"count\""
         },
@@ -1667,59 +1667,59 @@
       "attributes": [
         {
           "name": "max-digits",
-          "description": "Optionally specify a digit limit, after which numbers are truncated.\nDefaults to two for \"notification\" type and five for \"count\" type.",
+          "description": "Specifies a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and five for \"count\" type.",
           "type": "number"
         },
         {
           "name": "number",
-          "description": "REQUIRED: The number to be displayed on the badge. Must be a positive integer.",
+          "description": "REQUIRED: The number to be displayed on the badge; must be a positive integer",
           "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.",
+          "description": "ACCESSIBILITY: When `true`, changes to the badge will be announced to screen reader users",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "focus-ring",
-          "description": "Optionally choose to force the focus ring around the badge. Defaults to false.",
+          "description": "Forces the focus ring around the badge",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "has-tooltip",
-          "description": "Optionally add a tooltip on the badge. Defaults to false.",
+          "description": "ACCESSIBILITY: Adds a tooltip on the badge, which will be visible on hover and keyboard interaction",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "hide-zero",
-          "description": "Optionally choose to not render the count badge when the number is zero. Defaults to false.",
+          "description": "Hides the count badge when `number` is zero",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "size",
-          "description": "The size of the badge. Defaults to \"small\".",
+          "description": "The size of the badge",
           "type": "'small'|'large'",
           "default": "\"small\""
         },
         {
           "name": "tab-stop",
-          "description": "Optionally choose to add a tab stop to the badge. Defaults to false.",
+          "description": "ACCESSIBILITY: Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "text",
-          "description": "REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
+          "description": "ACCESSIBILITY: REQUIRED: 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\".",
+          "description": "The type of the badge",
           "type": "'count'|'notification'",
           "default": "\"count\""
         },
@@ -1733,68 +1733,68 @@
         {
           "name": "maxDigits",
           "attribute": "max-digits",
-          "description": "Optionally specify a digit limit, after which numbers are truncated.\nDefaults to two for \"notification\" type and five for \"count\" type.",
+          "description": "Specifies a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and five for \"count\" type.",
           "type": "number"
         },
         {
           "name": "number",
           "attribute": "number",
-          "description": "REQUIRED: The number to be displayed on the badge. Must be a positive integer.",
+          "description": "REQUIRED: The number to be displayed on the badge; must be a positive integer",
           "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.",
+          "description": "ACCESSIBILITY: When `true`, changes to the badge will be announced to screen reader users",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "forceFocusRing",
           "attribute": "focus-ring",
-          "description": "Optionally choose to force the focus ring around the badge. Defaults to false.",
+          "description": "Forces the focus ring around the badge",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "hasTooltip",
           "attribute": "has-tooltip",
-          "description": "Optionally add a tooltip on the badge. Defaults to false.",
+          "description": "ACCESSIBILITY: Adds a tooltip on the badge, which will be visible on hover and keyboard interaction",
           "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.",
+          "description": "Hides the count badge when `number` is zero",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "size",
           "attribute": "size",
-          "description": "The size of the badge. Defaults to \"small\".",
+          "description": "The size of the badge",
           "type": "'small'|'large'",
           "default": "\"small\""
         },
         {
           "name": "tabStop",
           "attribute": "tab-stop",
-          "description": "Optionally choose to add a tab stop to the badge. Defaults to false.",
+          "description": "ACCESSIBILITY: Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "text",
           "attribute": "text",
-          "description": "REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
+          "description": "ACCESSIBILITY: REQUIRED: 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\".",
+          "description": "The type of the badge",
           "type": "'count'|'notification'",
           "default": "\"count\""
         },

package/helpers/focus.js CHANGED Viewed

@@ -202,7 +202,7 @@ export function isFocusVisibleSupported() {
 			document.head.appendChild(style);
 			style.sheet.insertRule(':focus-visible { color: inherit; }');
 			_isFocusVisibleSupported = true;
-		} catch (error) {
+		} catch {
 			_isFocusVisibleSupported = false;
 		} finally {
 			style.remove();

package/helpers/framed.js CHANGED Viewed

@@ -13,7 +13,7 @@ export async function isFramed() {
 			framed = false;
 			return framed;
 		}
-	} catch (e) {
+	} catch {
 		framed = false;
 		return framed;
 	}

package/mixins/async-container/async-container-mixin.js CHANGED Viewed

@@ -59,7 +59,7 @@ export const AsyncContainerMixin = superclass => class extends superclass {
 		try {
 			await promise;
 			if (this._asyncPromises.indexOf(promise) !== -1) this._asyncCounts.fulfilled++;
-		} catch (error) {
+		} catch {
 			if (this._asyncPromises.indexOf(promise) !== -1) this._asyncCounts.rejected++;
 		} finally {
 			if (this._asyncPromises.indexOf(promise) !== -1) {

package/mixins/loading-complete/loading-complete-mixin.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 export const LoadingCompleteMixin = dedupeMixin((superclass) => class extends superclass {
 	get loadingComplete() {
 		return this.getLoadingComplete();
 	}
@@ -22,7 +21,6 @@ export const LoadingCompleteMixin = dedupeMixin((superclass) => class extends su
 	#loadingCompleteResolve;
-	// eslint-disable-next-line sort-class-members/sort-class-members
 	#loadingCompletePromise = !Object.prototype.hasOwnProperty.call(this.constructor.prototype, 'getLoadingComplete')
 		? new Promise(resolve => this.#loadingCompleteResolve = resolve)
 		: Promise.resolve();

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.62.4",
+  "version": "3.64.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -16,7 +16,7 @@
     "build": "npm run build:clean && npm run build:icons && npm run build:illustrations && npm run build:sass && npm run build:wca",
     "build-static": "rollup -c ./rollup/rollup.config.js",
     "lint": "npm run lint:eslint && npm run lint:style",
-    "lint:eslint": "eslint . --ext .js,.html --ignore-path .gitignore",
+    "lint:eslint": "eslint .",
     "lint:style": "stylelint \"**/*.{js,html}\" --ignore-path .gitignore",
     "start": "web-dev-server --node-resolve --watch --open",
     "test": "npm run lint && npm run test:translations && npm run test:unit && npm run test:axe",
@@ -47,13 +47,16 @@
   "devDependencies": {
     "@brightspace-ui/stylelint-config": "^1",
     "@brightspace-ui/testing": "^1",
+    "@eslint/compat": "^1",
+    "@eslint/eslintrc": "^3",
+    "@eslint/js": "^9",
     "@rollup/plugin-dynamic-import-vars": "^2",
     "@rollup/plugin-node-resolve": "^15",
     "@rollup/plugin-replace": "^6",
     "@web/dev-server": "^0.4",
     "chalk": "^5",
-    "eslint": "^8",
-    "eslint-config-brightspace": "^1",
+    "eslint": "^9",
+    "eslint-config-brightspace": "^1.2.1",
     "glob-all": "^3",
     "messageformat-validator": "^2",
     "node-sass": "^9",

package/templates/primary-secondary/primary-secondary.js CHANGED Viewed

@@ -1066,7 +1066,7 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 				const key = computeSizeKey(this.storageKey);
 				try {
 					localStorage.setItem(key, this._size);
-				} catch (ex) {
+				} catch {
 					// throws if storage is full or in private mode in mobile Safari
 				}
 			}
@@ -1146,7 +1146,7 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 				const key = computeSizeKey(this.storageKey);
 				try {
 					size = parseFloat(localStorage.getItem(key));
-				} catch (ex) {
+				} catch {
 					// may throw SecurityError if localStorage isn't allowed to be accessed
 				}
 			}