@brightspace-ui/core 1.173.0 → 1.175.1

package/components/backdrop/README.md

@@ -1,30 +1,32 @@
-# Backdrop
-
-## d2l-backdrop
+# Backdrop [d2l-backdrop]
 
 The `d2l-backdrop` element is a web component to display a semi-transparent backdrop behind a specified sibling element. It also hides elements other than the target from assistive technologies by applying `role="presentation"` and `aria-hidden="true"`.
 
+<!-- docs: demo live name:d2l-backdrop size:small -->
 ```html
 <script type="module">
+  import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/backdrop/backdrop.js';
+  import '@brightspace-ui/core/components/switch/switch.js';
 </script>
 <style>
-  #target { position: relative; z-index: 1000; }
+  #target { position: relative; z-index: 1000; margin: 40px; }
 </style>
-
-<div id="target"><button>toggle backdrop</button></div>
-<d2l-backdrop for-target="target" shown></d2l-backdrop>
-```
-
-Set the visible state of the backdrop by using the `shown` attribute/property.
-
-```javascript
-button.addEventListener('click', () => {
-  backdrop.shown = !backdrop.shown;
-});
+<div>
+  <div id="target"><d2l-button primary>Toggle backdrop</d2l-button></div>
+  <d2l-backdrop for-target="target"></d2l-backdrop>
+</div>
+<span>Background content</span>
+<script>
+  const backdrop = document.querySelector('d2l-backdrop');
+  document.querySelector('#target > d2l-button').addEventListener('click', () => {
+    backdrop.shown = !backdrop.shown;
+  });
+</script>
 ```
 
-**Properties:**
+<!-- docs: start hidden content -->
+### Properties:
 
 | Property | Type | Description |
 |--|--|--|
@@ -36,3 +38,4 @@ button.addEventListener('click', () => {
 ## Future Enhancements
 
 Looking for an enhancement not listed here? Create a GitHub issue!
+<!-- docs: end hidden content -->

package/components/breadcrumbs/README.md

@@ -1,6 +1,6 @@
 # Breadcrumbs
 
-The `d2l-breadcrumbs` element can be used to help users understand where they are within an application, and provide useful clues about how the space is organized. They also provide a convenient navigation mechanism.
+Breadcrumbs are a way-finding tool that helps users understand where they are within an application, while also offering an easy way to navigate "up" to higher level pages.
 
 <!-- docs: start hidden content -->
 ![screenshot of d2l-breadcrumbs component](./screenshots/basic.png)
@@ -9,32 +9,47 @@ The `d2l-breadcrumbs` element can be used to help users understand where they ar
 <!-- docs: demo display:block -->
 ```html
 <script type="module">
-  import '@brightspace-ui/core/components/breadcrumbs/breadcrumb-current-page.js';
   import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
 </script>
 <d2l-breadcrumbs>
-  <d2l-breadcrumb text="Item 1" href="page1.html"></d2l-breadcrumb>
-  <d2l-breadcrumb text="Item 2" href="page2.html"></d2l-breadcrumb>
-  <d2l-breadcrumb-current-page text="Current Page"></d2l-breadcrumb-current-page>
+  <d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
+  <d2l-breadcrumb text="Item 2" href="#"></d2l-breadcrumb>
+  <d2l-breadcrumb text="Item 3" href="#"></d2l-breadcrumb>
 </d2l-breadcrumbs>
 ```
 
 ## Best Practices
 <!-- docs: start best practices -->
 <!-- docs: start dos -->
-* Breadcrumbs should be used to show the information architecture of a page, not the history
-* Breadcrumbs are page level controls – only one should appear on a page a time. If a page that normally has breadcrumbs is embedded in another page, remove the breadcrumbs from the embedded page.
+* Structure breadcrumbs around information architecture rather than the user's browsing history
+* Keep breadcrumbs short and sweet; it's okay to simplify language in a breadcrumb
 <!-- docs: end dos -->
 
 <!-- docs: start donts -->
-* Do not use breadcrumbs for multi-step processes, use a Stepper (TBD)
-* If your navigation is only one level deep, and never gets deeper than one level, consider other design patterns or components
+* Don't repeat the current page name in the breadcrumb
+* Avoid displaying more than one breadcrumb control on a page
+* Don't use breadcrumbs as a stepper, see [Wizards](https://github.com/BrightspaceUILabs/wizard) instead
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
 ## Responsive Behavior
 
-There are various options to truncate the breadcrumb when in horizontally constrained spaces in order to keep the breadcrumb on one line.
+Breadcrumbs that overflow their container will appear to fade at the edge.
+
+<!-- docs: demo display:block -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
+</script>
+<d2l-breadcrumbs>
+  <d2l-breadcrumb text="Table of Contents" href="#"></d2l-breadcrumb>
+  <d2l-breadcrumb text="Unit 1: Shakespeare" href="#"></d2l-breadcrumb>
+  <d2l-breadcrumb text="Lesson 1: Introduction" href="#"></d2l-breadcrumb>
+  <d2l-breadcrumb text="The Comedies, Tragedies, and Histories" href="#"></d2l-breadcrumb>
+</d2l-breadcrumbs>
+```
+
+This works well for mobile or other touch devices but not as well for mouse or keyboard users, so we have two other options for managing width.
 
 ### Limited Width
 
@@ -50,8 +65,8 @@ Set a `max-width` to constrain breadcrumbs to a particular width:
   import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
 </script>
 <d2l-breadcrumbs style="max-width: 250px">
-  <d2l-breadcrumb text="Trucate Basic Item 1" href="page1.html"></d2l-breadcrumb>
-  <d2l-breadcrumb text="Truncate Basic Item 2" href="page2.html"></d2l-breadcrumb>
+  <d2l-breadcrumb text="Trucate Basic Item 1" href="#"></d2l-breadcrumb>
+  <d2l-breadcrumb text="Truncate Basic Item 2" href="#"></d2l-breadcrumb>
 </d2l-breadcrumbs>
 ```
 
@@ -63,15 +78,15 @@ Set a `max-width` to constrain breadcrumbs to a particular width:
 
 Alternately, add the `compact` attribute to only display the last breadcrumb. The `d2l-breadcrumb-current-page` will be hidden:
 
-<!-- docs: demo code -->
+<!-- docs: demo code display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/breadcrumbs/breadcrumb-current-page.js';
   import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
 </script>
 <d2l-breadcrumbs compact>
-  <d2l-breadcrumb text="Item 1" href="page1.html"></d2l-breadcrumb>
-  <d2l-breadcrumb text="Item 2" href="page2.html"></d2l-breadcrumb>
+  <d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
+  <d2l-breadcrumb text="Item 2" href="#"></d2l-breadcrumb>
   <d2l-breadcrumb-current-page text="Current Page"></d2l-breadcrumb-current-page>
 </d2l-breadcrumbs>
 ```
@@ -84,9 +99,9 @@ Alternately, add the `compact` attribute to only display the last breadcrumb. Th
   import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
 </script>
 <d2l-breadcrumbs>
-  <d2l-breadcrumb text="Item 1" href="page1.html"></d2l-breadcrumb>
-  <d2l-breadcrumb text="Item 2" href="page2.html"></d2l-breadcrumb>
-  <d2l-breadcrumb text="Item 3" href="page3.html"></d2l-breadcrumb>
+  <d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
+  <d2l-breadcrumb text="Item 2" href="#"></d2l-breadcrumb>
+  <d2l-breadcrumb text="Item 3" href="#"></d2l-breadcrumb>
 </d2l-breadcrumbs>
 ```
 
@@ -106,7 +121,7 @@ Alternately, add the `compact` attribute to only display the last breadcrumb. Th
   import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
 </script>
 <d2l-breadcrumbs>
-  <d2l-breadcrumb text="Item 1" href="page1.html"></d2l-breadcrumb>
+  <d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
 </d2l-breadcrumbs>
 ```
 
@@ -131,9 +146,7 @@ To make your usage of `d2l-breadcrumb` (child) accessible, use the following att
 
 ## Current Page [d2l-breadcrumb-current-page]
 
-Based on guidance from design, sometimes the last breadcrumb represents the current page and is therefore not a link.
-
-Use the `d2l-breadcrumb-current-page` element for this:
+Older pages or tools include the current page name at the end of the breadcrumb, even though this is not best practice going forward. Use the d2l-breadcrumb-current-page if you need to replicate this in a legacy page:
 
 <!-- docs: demo live name:d2l-breadcrumb-current-page display:block -->
 ```html
@@ -142,8 +155,9 @@ Use the `d2l-breadcrumb-current-page` element for this:
   import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
 </script>
 <d2l-breadcrumbs>
-  <d2l-breadcrumb text="Item 1" href="page1.html"></d2l-breadcrumb>
-  <d2l-breadcrumb text="Item 2" href="page2.html"></d2l-breadcrumb>
+  <d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
+  <d2l-breadcrumb text="Item 2" href="#"></d2l-breadcrumb>
   <d2l-breadcrumb-current-page text="Current Page"></d2l-breadcrumb-current-page>
 </d2l-breadcrumbs>
 ```
+

package/components/inputs/docs/input-date-time.md

@@ -272,7 +272,7 @@ size:xlarge
 | `localized` | Boolean | Indicates that any timezone localization will be handeld by the consumer and so any values will not be converted from/to UTC |
 | `max-value` | String | Maximum valid date/time that could be selected by a user |
 | `min-value` | String | Minimum valid date/time that could be selected by a user |
-| `opened` | Boolean | Whether or not the date or time dropdown is open |
+| `opened` | Boolean | Indicates if the date or time dropdown is open |
 | `required` | Boolean | Indicates that a value is required |
 | `time-default-value`| String, default:`'00:00:00'` | Set default value of time input. Accepts ISO 8601 time format (`hh:mm:ss`) and the following keywords: `startOfDay`,`endOfDay`. |
 | `value` | String, default `''` | Value of the input. |
@@ -324,11 +324,13 @@ size:xlarge
 | `child-labels-hidden` | Boolean | Visually hides the labels for start and end date-time inputs |
 | `disabled` | Boolean | Disables the inputs |
 | `end-label` | String, default `'End Date'` | Accessible label for the second date-time input |
+| `end-opened` | Boolean | Indicates if the end date or time dropdown is open |
 | `end-value` | String, default `''` | Value of the second date-time input |
 | `inclusive-date-range` | Boolean | Validate on inclusive range (i.e., it is valid for start and end date-times to be equal) |
 | `label-hidden` | Boolean | Hides the fieldset label visually |
 | `required` | Boolean | Indicates that values are required |
 | `start-label` | String, default `'Start Date'` | Accessible label for the first date-time input |
+| `start-opened` | Boolean | Indicates if the start date or time dropdown is open |
 | `start-value` | String, default `''` | Value of the first date-time input |
 
 ### Events

package/components/inputs/input-date-time-range.js

@@ -85,6 +85,10 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 			 * @default "End Date"
 			 */
 			endLabel: { attribute: 'end-label', reflect: true, type: String },
+			/**
+			 * Indicates if the end date or time dropdown is open
+			 */
+			endOpened: { attribute: 'end-opened', type: Boolean },
 			/**
 			 * Value of the end date-time input
 			 * @type {string}
@@ -127,14 +131,16 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 			 * @default "Start Date"
 			 */
 			startLabel: { attribute: 'start-label', reflect: true, type: String },
+			/**
+			 * Indicates if the start date or time dropdown is open
+			 */
+			startOpened: { attribute: 'start-opened', type: Boolean },
 			/**
 			 * Value of the start date-time input
 			 * @type {string}
 			 */
 			startValue: { attribute: 'start-value', reflect: true, type: String },
-			_endDropdownOpened: { type: Boolean },
-			_slotOccupied: { type: Boolean },
-			_startDropdownOpened: { type: Boolean }
+			_slotOccupied: { type: Boolean }
 		};
 	}
 
@@ -162,14 +168,14 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 		this.autoShiftDates = false;
 		this.childLabelsHidden = false;
 		this.disabled = false;
+		this.endOpened = false;
 		this.inclusiveDateRange = false;
 		this.labelHidden = false;
 		this.localized = false;
 		this.required = false;
+		this.startOpened = false;
 
-		this._startDropdownOpened = false;
 		this._startInputId = getUniqueId();
-		this._endDropdownOpened = false;
 		this._endInputId = getUniqueId();
 
 		this._slotOccupied = false;
@@ -197,8 +203,8 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 		const startDateTimeInput = this.shadowRoot.querySelector('.d2l-input-date-time-range-start');
 		const endDateTimeInput = this.shadowRoot.querySelector('.d2l-input-date-time-range-end');
 
-		const tooltipStart = (this.validationError && !this._startDropdownOpened && !this.childErrors.has(startDateTimeInput)) ? html`<d2l-tooltip align="start" announced for="${this._startInputId}" position="bottom" state="error">${this.validationError}</d2l-tooltip>` : null;
-		const tooltipEnd = (this.validationError && !this._endDropdownOpened && !this.childErrors.has(endDateTimeInput)) ? html`<d2l-tooltip align="start" announced for="${this._endInputId}" position="bottom" state="error">${this.validationError}</d2l-tooltip>` : null;
+		const tooltipStart = (this.validationError && !this.startOpened && !this.childErrors.has(startDateTimeInput)) ? html`<d2l-tooltip align="start" announced for="${this._startInputId}" position="bottom" state="error">${this.validationError}</d2l-tooltip>` : null;
+		const tooltipEnd = (this.validationError && !this.endOpened && !this.childErrors.has(endDateTimeInput)) ? html`<d2l-tooltip align="start" announced for="${this._endInputId}" position="bottom" state="error">${this.validationError}</d2l-tooltip>` : null;
 		return html`
 			${tooltipStart}
 			${tooltipEnd}
@@ -226,6 +232,7 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 							?localized="${this.localized}"
 							max-value="${ifDefined(this.maxValue)}"
 							min-value="${ifDefined(this.minValue)}"
+							?opened="${this.startOpened}"
 							?required="${this.required}"
 							?skeleton="${this.skeleton}"
 							time-default-value="startOfDay"
@@ -247,6 +254,7 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 							?localized="${this.localized}"
 							max-value="${ifDefined(this.maxValue)}"
 							min-value="${ifDefined(this.minValue)}"
+							?opened="${this.endOpened}"
 							?required="${this.required}"
 							?skeleton="${this.skeleton}"
 							time-default-value="endOfDay"
@@ -325,9 +333,9 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 
 	_handleDropdownToggle(e) {
 		if (e.target.classList.contains('d2l-input-date-time-range-start')) {
-			this._startDropdownOpened = e.detail.opened;
+			this.startOpened = e.detail.opened;
 		} else {
-			this._endDropdownOpened = e.detail.opened;
+			this.endOpened = e.detail.opened;
 		}
 	}
 

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

@@ -70,7 +70,7 @@ class InputDateTime extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(R
 			 */
 			minValue: { attribute: 'min-value', reflect: true, type: String },
 			/**
-			 * Whether or not the date or time dropdown is open
+			 * Indicates if the date or time dropdown is open
 			 */
 			opened: { type: Boolean },
 			/**

package/components/inputs/input-date.js

@@ -16,6 +16,8 @@ import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
 
+const mediaQueryList = window.matchMedia('(max-width: 615px)');
+
 export function formatISODateInUserCalDescriptor(val) {
 	return formatDate(getDateFromISODate(val));
 }
@@ -148,6 +150,8 @@ class InputDate extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitEl
 		this._inputTextFocusMouseup = false;
 		this._inputTextFocusShowTooltip = true; // true by default so hover triggers tooltip
 		this._namespace = 'components.input-date';
+		this._openCalendarOnly = false;
+		this._openedOnKeydown = false;
 		this._showInfoTooltip = true;
 		this._shownValue = '';
 
@@ -232,7 +236,7 @@ class InputDate extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitEl
 				@d2l-dropdown-focus-enter="${this._handleFocusTrapEnter}"
 				max-width="335"
 				min-height="${this._hiddenCalendarHeight}"
-				no-auto-fit
+				?no-auto-fit="${!mediaQueryList.matches}"
 				trap-focus
 				no-auto-focus
 				mobile-tray="bottom"
@@ -438,13 +442,15 @@ class InputDate extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitEl
 	_handleKeydown(e) {
 		// open dropdown on down arrow or enter and focus on calendar focus date
 		if (e.keyCode === 40 || e.keyCode === 13) {
+			this._openedOnKeydown = true;
 			this.opened = true;
 			e.preventDefault();
 		}
 	}
 
-	_handleMouseup() {
+	_handleMouseup(e) {
 		this._inputTextFocusMouseup = true;
+		this._openCalendarOnly = e.srcElement.tagName.toLowerCase() === 'd2l-icon';
 		this.opened = !this.opened;
 	}
 
@@ -461,13 +467,26 @@ class InputDate extends SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitEl
 
 		await this._handleChange();
 
-		if (this._inputTextFocusMouseup) {
+		// on small screens, only open calendar if calendar icon is selected,
+		// otherwise only open text input
+		if (mediaQueryList.matches && this._openCalendarOnly) {
+			this._dropdown.toggleOpen(true);
+		} else if (mediaQueryList.matches && !this._openCalendarOnly && !this._openedOnKeydown) {
+			this._openCalendarOnly = false;
+			this._openedOnKeydown = false;
+			this.opened = false;
+			return;
+		}
+		else if (this._inputTextFocusMouseup) {
 			this._dropdown.open(false);
 		} else {
 			this._dropdown.open();
 			this._calendar.focus();
 			this._setFormattedValue();
 		}
+		if (mediaQueryList.matches) this._calendar.focus();
+		this._openCalendarOnly = false;
+		this._openedOnKeydown = false;
 	}
 
 	_setFormattedValue() {

package/components/inputs/input-time.js

@@ -258,7 +258,8 @@ class InputTime extends SkeletonMixin(FormElementMixin(LitElement)) {
 		}
 
 		const hiddenContent = this.shadowRoot.querySelector('.d2l-input-time-hidden-content');
-		this.addEventListener('d2l-localize-behavior-language-changed', () => {
+		this.addEventListener('d2l-localize-behavior-language-changed', async() => {
+			await this.updateComplete;
 			this._formattedValue = formatTime(getDateFromISOTime(this.value));
 			INTERVALS.clear();
 			this.requestUpdate();
@@ -322,7 +323,6 @@ class InputTime extends SkeletonMixin(FormElementMixin(LitElement)) {
 					no-padding-footer
 					max-height="${ifDefined(this.maxHeight)}"
 					min-width="195"
-					mobile-tray="bottom"
 					?opened="${opened}">
 					<d2l-menu
 						aria-labelledby="${this._dropdownId}-label"

package/components/loading-spinner/README.md

@@ -1,6 +1,7 @@
 # Loading Spinners
 
-The loading spinner can be used to indicate to a user that the current page/component is in a loading state, potentially when waiting for asynchronous data or during rendering.
+A loading spinner indicates that something is happening and we don't know how long it will take.
+
 <!-- docs: demo name:d2l-loading-spinner -->
 ```html
 <script type="module">
@@ -13,6 +14,21 @@ The loading spinner can be used to indicate to a user that the current page/comp
 ![Loading Spinner](./screenshots/loading-spinner.gif?raw=true)
 <!-- docs: end hidden content -->
 
+## Best Practices
+
+<!-- docs: start best practices -->
+<!-- docs: start dos -->
+* Use a loading spinner when the user initiates an action with indeterminate length, and it's expected to take longer than a couple seconds
+* Adjust the size proportionally to the area that is being loaded; small for a widget or dropdown, larger for a large list or an entire page
+* For a better user experience, use a Skeleton loader instead when possible
+<!-- docs: end dos -->
+
+<!-- docs: start donts -->
+* Don't use a loading spinner it if the user's action is nearly instant, as it may appear to flash or flicker on the screen before disappearing
+* Avoid using multiple spinners on one screen, as this can overwhelm users and create anxiety - see Skeleton loaders instead
+<!-- docs: end donts -->
+<!-- docs: end best practices -->
+
 ## Loading Spinner [d2l-loading-spinner]
 
 <!-- docs: demo live name:d2l-loading-spinner -->

package/components/status-indicator/README.md

@@ -11,29 +11,34 @@ Status Indicators are used to communicate the status of an item. They are non-in
   import '@brightspace-ui/core/components/status-indicator/status-indicator.js';
 </script>
 <style>
-  div {
-    width: 100%;
-  }
   .status-format {
     display: flex;
-    justify-content: space-between;
+    justify-content: space-evenly;
+    text-align: center;
+    width: 30rem;
+    margin: 0px auto;
   }
   d2l-status-indicator {
-    margin: 5px;
+    margin: .6rem;
+    display: block;
   }
 </style>
-<div>
-  <div class="status-format">
-    <d2l-status-indicator state="default" text="due today"></d2l-status-indicator>
-    <d2l-status-indicator state="success" text="complete"></d2l-status-indicator>
-    <d2l-status-indicator state="alert" text="overdue"></d2l-status-indicator>
-    <d2l-status-indicator state="none" text="closed"></d2l-status-indicator>
-  </div>
 
-  <div class="status-format">
+<div class="status-format d2l-typography">
+  <div>
+    <d2l-status-indicator state="default" text="due today"></d2l-status-indicator>
     <d2l-status-indicator state="default" text="due today" bold></d2l-status-indicator>
+  </div>
+  <div>
+    <d2l-status-indicator state="success" text="complete"></d2l-status-indicator>
     <d2l-status-indicator state="success" text="complete" bold></d2l-status-indicator>
+  </div>
+  <div>
+    <d2l-status-indicator state="alert" text="overdue"></d2l-status-indicator>
     <d2l-status-indicator state="alert" text="overdue" bold></d2l-status-indicator>
+  </div>
+  <div>
+    <d2l-status-indicator state="none" text="closed"></d2l-status-indicator>
     <d2l-status-indicator state="none" text="closed" bold></d2l-status-indicator>
   </div>
 </div>
@@ -42,16 +47,16 @@ Status Indicators are used to communicate the status of an item. They are non-in
 ## Best Practices
 <!-- docs: start best practices -->
 <!-- docs: start dos -->
-* Only use when status is critical to the users’ workflow.
-* Maintain consistent placement when used in a list.
-* Limit text values to one word; 2 max.
+* Only use when status is critical to the users’ workflow
+* Maintain consistent placement when used in a list
+* Limit text values to one word; 2 max
 <!-- docs: end dos -->
 
 <!-- docs: start donts -->
-* Don't render as a link. If the user requires a call to action, use a button.
-* Don't compose the element such that the user will think that the indicator is interactive.
-* Avoid using verbs.
-* Don't include additional text in the status badge.
+* Don't render as a link; if the user requires a call to action, use a button
+* Don't compose the element such that the user will think that the indicator is interactive
+* Avoid using verbs
+* Don't include additional text in the status badge
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
@@ -76,19 +81,28 @@ Status Indicators are used to communicate the status of an item. They are non-in
 | `state` | String, default: `default` | State of status indicator to display. Can be one of  `default`, `success`, `alert` , `none` |
 <!-- docs: end hidden content -->
 
-### Bold 
-<!-- docs: demo -->
+### Bold
+
+Use the bold style if the state is central to the user's task and should have maximum prominence. Use the default style if the state is important but not critical to the user's workflow. It is acceptable to mix the styles if one particular state should stand out more than the rest.
+
+<!-- docs: demo live -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/status-indicator/status-indicator.js';
 </script>
 <d2l-status-indicator state="alert" text="overdue" bold></d2l-status-indicator>
 ```
-Use the bold style if the state is central to the user's task and should have maximum prominence. Use the default style if the state is important but not critical to the user's workflow. It is acceptable to mix the styles if one particular state should stand out more than the rest.
-
 
 ### States
-<!-- docs: demo autoSize:false display:block -->
+
+The state is used to apply a meaningful colour to the status indicator to assist with scannability. The visible label should still have a clear meaning so that users who can't see the colour can still understand the state.
+
+* **Default** - the state is important but not urgent 
+* **Success** - the state is considered positive or complete
+* **Alert** - the state requires urgent attention
+* **None** - the state is not important
+
+<!-- docs: demo display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/status-indicator/status-indicator.js';
@@ -98,43 +112,48 @@ Use the bold style if the state is central to the user's task and should have m
   .status-format {
     display: flex;
     justify-content: space-evenly;
-	  width: 100%;
+    text-align: center;
+    width: 30rem;
+    margin: 0px auto;
   }
   d2l-status-indicator {
-    margin: 5px;
+    margin: .6rem;
+    display: block;
+  }
+  .status-format p {
+    margin-top: 0px;
   }
 </style>
-<div>
-  <div class="status-format d2l-typography">
-    <span class="title">Default</span>
-    <span class="title">Success</span>
-    <span class="title">Alert</span>
-    <span class="title">None</span>
-  </div>
-  <div class="status-format">
-    <d2l-status-indicator state="default" text="due today"></d2l-status-indicator>
-    <d2l-status-indicator state="success" text="complete"></d2l-status-indicator>
-    <d2l-status-indicator state="alert" text="overdue"></d2l-status-indicator>
-    <d2l-status-indicator state="none" text="closed"></d2l-status-indicator>
-  </div>
 
-  <div class="status-format">
+<div class="status-format d2l-typography">
+  <div>
+    <p class="d2l-label-text">Default</p>
+    <d2l-status-indicator state="default" text="due today"></d2l-status-indicator>
     <d2l-status-indicator state="default" text="due today" bold></d2l-status-indicator>
+  </div>
+  <div>
+    <p class="d2l-label-text">Success</p>
+    <d2l-status-indicator state="success" text="complete"></d2l-status-indicator>
     <d2l-status-indicator state="success" text="complete" bold></d2l-status-indicator>
+  </div>
+  <div>
+    <p class="d2l-label-text">Alert</p>
+    <d2l-status-indicator state="alert" text="overdue"></d2l-status-indicator>
     <d2l-status-indicator state="alert" text="overdue" bold></d2l-status-indicator>
+  </div>
+  <div>
+    <p class="d2l-label-text">None</p>
+    <d2l-status-indicator state="none" text="closed"></d2l-status-indicator>
     <d2l-status-indicator state="none" text="closed" bold></d2l-status-indicator>
   </div>
 </div>
-```
-The state is used to apply a meaningful colour to the status indicator to assist with scannability. The visible label should still have a clear meaning so that users who can't see the colour can still understand the state.
 
-* Default - the state is important but not urgent 
-* Success - the state is considered positive or complete
-* Alert - the state requires urgent attention
-* None - the state is not important
+```
 
 ### Content
 
+The text label should be kept short; one or two words at most. If more information is needed to explain the state or give extra context, the information should be included after the label and should use the same color to associate the information with the state. When placing additional text on the same line as the status indicator, ensure that the bottom of the text is even across all elements.
+
 <!-- docs: demo -->
 ```html
 <script type="module">
@@ -149,8 +168,8 @@ The state is used to apply a meaningful colour to the status indicator to assist
 	.align-item.bullet::before {
 		color: var(--d2l-color-tungsten);
 		content: '\002022';
-		margin-left: 5px;
-		margin-right: 5px;
+		margin-left: 6px;
+		margin-right: 6px;
 	}
 	.card {
 		min-width: 300px
@@ -195,7 +214,8 @@ The state is used to apply a meaningful colour to the status indicator to assist
 		</h4>
 		<div class="indicator">
 			<d2l-status-indicator state="alert" text="overdue" bold></d2l-status-indicator>
-			<span class="align-item" style="margin-left: 10px;">Grade 6 Science</span>
+      <span class="align-item" style="margin-left: 6px; color: var(--d2l-color-cinnabar);">Ends Tomorrow</span>
+			<span class="align-item bullet">Grade 6 Science</span>
 			<span class="align-item bullet">Assignment</span>
 		</div>
 		<div class="d2l-typography text">
@@ -205,9 +225,6 @@ The state is used to apply a meaningful colour to the status indicator to assist
 
 </div>
 ```
-
-The text label should be kept short; one or two words at most. If more information is needed to explain the state or give extra context, the information should be included after the label and should use the same color to associate the information with the state. When placing additional text on the same line as the status indicator, ensure that the bottom of the text is even across all elements.
-
 <!-- docs: start hidden content -->
 
 ## Future Enhancements

package/components/typography/typography.js

@@ -67,7 +67,7 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
 
 		.d2l-typography:lang(ar),
 		.d2l-typography :lang(ar) {
-			font-family: 'Arabic Transparent', 'Arabic Typesetting', 'Geeza Pro', sans-serif;
+			font-family: 'Segoe UI', 'Geeza Pro', sans-serif;
 		}
 
 		.d2l-typography:lang(zh),

package/components/typography/typography.scss

@@ -16,7 +16,7 @@
 
 	&:lang(ar),
 	& :lang(ar) {
-		font-family: 'Arabic Transparent', 'Arabic Typesetting', 'Geeza Pro', sans-serif;
+		font-family: 'Segoe UI', 'Geeza Pro', sans-serif;
 	}
 
 	&:lang(zh),

package/custom-elements.json

@@ -3640,6 +3640,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "end-opened",
+          "description": "Indicates if the end date or time dropdown is open",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "inclusive-date-range",
           "description": "Validates on inclusive range (i.e., it is valid for start and end date-times to be equal)",
@@ -3664,6 +3670,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "start-opened",
+          "description": "Indicates if the start date or time dropdown is open",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "skeleton",
           "type": "boolean",
@@ -3736,6 +3748,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "endOpened",
+          "attribute": "end-opened",
+          "description": "Indicates if the end date or time dropdown is open",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "inclusiveDateRange",
           "attribute": "inclusive-date-range",
@@ -3764,6 +3783,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "startOpened",
+          "attribute": "start-opened",
+          "description": "Indicates if the start date or time dropdown is open",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -3833,7 +3859,7 @@
         },
         {
           "name": "opened",
-          "description": "Whether or not the date or time dropdown is open",
+          "description": "Indicates if the date or time dropdown is open",
           "type": "boolean",
           "default": "false"
         },
@@ -3904,7 +3930,7 @@
         {
           "name": "opened",
           "attribute": "opened",
-          "description": "Whether or not the date or time dropdown is open",
+          "description": "Indicates if the date or time dropdown is open",
           "type": "boolean",
           "default": "false"
         },

package/package.json

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