@brightspace-ui/core 3.274.0 → 3.274.2

package/components/button/button-mixin.js

@@ -2,74 +2,72 @@ import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 
 export const ButtonMixin = superclass => class extends FocusMixin(superclass) {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			ariaExpanded: { type: String, reflect: true, attribute: 'aria-expanded' },
-			/**
-			 * @ignore
-			 */
-			ariaHaspopup: { type: String, reflect: true, attribute: 'aria-haspopup' },
-			/**
-			 * @ignore
-			 */
-			ariaLabel: { type: String, reflect: true, attribute: 'aria-label' },
-			/**
-			 * @ignore
-			 */
-			// eslint-disable-next-line lit/no-native-attributes
-			autofocus: { type: Boolean, reflect: true },
-			/**
-			 * Wether the controlled element is expanded. Replaces 'aria-expanded'
-			 * @type {'true' | 'false'}
-			 */
-			expanded: { type: String, reflect: true, attribute: 'expanded' },
-			/**
-			 * Disables the button
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean, reflect: true },
-			/**
-			 * Tooltip text when disabled
-			 * @type {string}
-			 */
-			disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
-			/**
-			 * @ignore
-			 */
-			form: { type: String, reflect: true },
-			/**
-			 * @ignore
-			 */
-			formaction: { type: String, reflect: true },
-			/**
-			 * @ignore
-			 */
-			formenctype: { type: String, reflect: true },
-			/**
-			 * @ignore
-			 */
-			formmethod: { type: String, reflect: true },
-			/**
-			 * @ignore
-			 */
-			formnovalidate: { type: String, reflect: true },
-			/**
-			 * @ignore
-			 */
-			formtarget: { type: String, reflect: true },
-			/**
-			 * @ignore
-			 */
-			name: { type: String, reflect: true },
-			/**
-			 * @ignore
-			 */
-			type: { type: String, reflect: true }
-		};
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		ariaExpanded: { type: String, reflect: true, attribute: 'aria-expanded' },
+		/**
+		 * @ignore
+		 */
+		ariaHaspopup: { type: String, reflect: true, attribute: 'aria-haspopup' },
+		/**
+		 * @ignore
+		 */
+		ariaLabel: { type: String, reflect: true, attribute: 'aria-label' },
+		/**
+		 * @ignore
+		 */
+		// eslint-disable-next-line lit/no-native-attributes
+		autofocus: { type: Boolean, reflect: true },
+		/**
+		 * Wether the controlled element is expanded. Replaces 'aria-expanded'
+		 * @type {'true' | 'false'}
+		 */
+		expanded: { type: String, reflect: true, attribute: 'expanded' },
+		/**
+		 * Disables the button
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean, reflect: true },
+		/**
+		 * Tooltip text when disabled
+		 * @type {string}
+		 */
+		disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
+		/**
+		 * @ignore
+		 */
+		form: { type: String, reflect: true },
+		/**
+		 * @ignore
+		 */
+		formaction: { type: String, reflect: true },
+		/**
+		 * @ignore
+		 */
+		formenctype: { type: String, reflect: true },
+		/**
+		 * @ignore
+		 */
+		formmethod: { type: String, reflect: true },
+		/**
+		 * @ignore
+		 */
+		formnovalidate: { type: String, reflect: true },
+		/**
+		 * @ignore
+		 */
+		formtarget: { type: String, reflect: true },
+		/**
+		 * @ignore
+		 */
+		name: { type: String, reflect: true },
+		/**
+		 * @ignore
+		 */
+		type: { type: String, reflect: true }
+	};
 
 	constructor() {
 		super();

package/components/calendar/calendar.js

@@ -481,8 +481,8 @@ class Calendar extends LocalizeCoreElement(LitElement) {
 
 		const weekdayHeaders = calendarData.daysOfWeekIndex.map((index) => html`
 			<th>
-				<abbr class="d2l-body-small" title="${calendarData.descriptor.calendar.days.long[index]}">
-					${calendarData.descriptor.calendar.days.short[index]}
+				<abbr class="d2l-body-small" title="${calendarData.descriptor.calendar.daysStandAlone.wide[index]}">
+					${calendarData.descriptor.calendar.daysStandAlone.abbreviated[index]}
 				</abbr>
 			</th>
 		`);

package/components/demo/demo-passthrough-mixin.js

@@ -8,9 +8,7 @@ import { LitElement } from 'lit';
  * @param { String } target The element name or other selector string of the element to pass properties to.
  */
 export const DemoPassthroughMixin = (superclass, target) => class extends LitElement {
-	static get properties() {
-		return Object.fromEntries(superclass.elementProperties);
-	}
+	static properties = Object.fromEntries(superclass.elementProperties);
 
 	firstUpdated() {
 		this.target = this.shadowRoot.querySelector(target);

package/components/empty-state/README.md

@@ -32,16 +32,20 @@ Empty state components are used to convey that there is no data available to be
 
 <!-- docs: start best practices -->
 <!-- docs: start dos -->
-* Use clear language to indicate there is no data available
-* Offer concise guidance about next steps
+* Use an empty state in place of an empty list, table, widget, or page section
+  * Replace the entire content with its empty state; do not show an empty table or list header
 * Include an [Empty State Action](#d2l-empty-state-action-button) or [Link](#d2l-empty-state-action-link) if it can help the user
-* Replace the entire content with its empty state; do not show an empty table or list header
+* Follow our [Writing guidelines]({{ project.assetPath }}/style-elements/writing/#periods)
+  * Use clear language to indicate there is no data available
+  * Offer concise guidance about next steps unless the action or button already provides a next step
+  * If you include an action or button, end your message with a period even if it's a single sentence (this is an exception to the rules for [Periods]({{ project.assetPath }}/style-elements/writing/#periods))
 <!-- docs: end dos -->
 
 <!-- docs: start donts -->
-* Don’t use an empty state as a default state while data is loading
-* Don't leave a section completely empty, or use a skeleton loading screen in place of an empty state component
-* Avoid causing users to believe that they have hit a dead-end when they have not
+* Don’t use an empty state as a default state while data is loading — consider using a [Skeleton Loader or Loading Spinner]({{ project.assetPath }}/components/loading-spinner/#when-should-i-use-the-skeleton-loader-pattern-vs.-a-loading-spinner) instead
+* Avoid having multiple empty state messages caused by the same root issue
+  * The presence of multiple empty states often indicates a special case that can be addressed at the design level
+  * For instance, an underlying error causing no data to be returned or a first-time user who could be guided through creating the data instead of seeing a bunch of empty states
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 

package/components/selection/selection-action-mixin.js

@@ -5,21 +5,19 @@ import { SelectionObserverMixin } from './selection-observer-mixin.js';
 
 export const SelectionActionMixin = superclass => class extends LocalizeCoreElement(SelectionObserverMixin(superclass)) {
 
-	static get properties() {
-		return {
-			/**
-			 * Disables bulk actions in the list or table controls once the selection limit is reached, but does not prevent further selection
-			 * @type {number}
-			 */
-			maxSelectionCount: { type: Number, attribute: 'max-selection-count' },
-			/**
-			 * Whether the action requires one or more selected items
-			 * @type {boolean}
-			 */
-			requiresSelection: { type: Boolean, attribute: 'requires-selection', reflect: true },
-			_disabledTooltip: { state: true }
-		};
-	}
+	static properties = {
+		/**
+		 * Disables bulk actions in the list or table controls once the selection limit is reached, but does not prevent further selection
+		 * @type {number}
+		 */
+		maxSelectionCount: { type: Number, attribute: 'max-selection-count' },
+		/**
+		 * Whether the action requires one or more selected items
+		 * @type {boolean}
+		 */
+		requiresSelection: { type: Boolean, attribute: 'requires-selection', reflect: true },
+		_disabledTooltip: { state: true }
+	};
 
 	constructor() {
 		super();