@brightspace-ui/core 1.233.9 → 1.234.2

package/components/backdrop/README.md

@@ -1,7 +1,9 @@
-# Backdrop [d2l-backdrop]
+# Backdrops
 
 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"`.
 
+## Backdrop [d2l-backdrop]
+
 <!-- docs: demo live name:d2l-backdrop size:small -->
 ```html
 <script type="module">

package/components/dropdown/README.md

@@ -280,7 +280,7 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 ![screenshot the basic dropdown-menu](./screenshots/dropdown-menu.png)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live name:d2l-dropdown-menu align:flex-start autoOpen:true autoSize:false size:medium -->
+<!-- docs: demo live name:d2l-dropdown-menu align:flex-start autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
@@ -291,7 +291,7 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
   import '@brightspace-ui/core/components/tabs/tab-panel.js';
 </script>
 <d2l-dropdown-button text="Open!" primary>
-  <d2l-dropdown-menu>
+  <d2l-dropdown-menu opened>
     <d2l-menu label="Astronomy">
       <d2l-menu-item text="Introduction"></d2l-menu-item>
       <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>

package/components/dropdown/dropdown-menu.js

@@ -20,12 +20,15 @@ class DropdownMenu extends ThemeMixin(DropdownContentMixin(LitElement)) {
 		super();
 		this.noAutoFocus = true;
 		this.noPadding = true;
+		this._initiallyOpenedSuppressFocus = false;
 		this._maxHeightNonTray = this.maxHeight;
 	}
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
+		if (this.opened) this._initiallyOpenedSuppressFocus = true;
+
 		this._maxHeightNonTray = this.maxHeight;
 		if (this._useMobileStyling && this.mobileTray) {
 			this.maxHeight = null;
@@ -114,7 +117,9 @@ class DropdownMenu extends ThemeMixin(DropdownContentMixin(LitElement)) {
 
 		menu.resize();
 
-		menu.focus();
+		// If dropdown-menu is opened on first render, do not focus
+		if (this._initiallyOpenedSuppressFocus) this._initiallyOpenedSuppressFocus = false;
+		else menu.focus();
 	}
 
 	_onSelect(e) {

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

@@ -35,7 +35,7 @@ class InputDateRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 	static get properties() {
 		return {
 			/**
-			 * Automatically shifts end date when start date changes to keep same range
+			 * ADVANCED: Automatically shifts end date when start date changes to keep same range
 			 * @type {boolean}
 			 */
 			autoShiftDates: { attribute: 'auto-shift-dates', reflect: true, type: Boolean },
@@ -56,7 +56,7 @@ class InputDateRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 			 */
 			endLabel: { attribute: 'end-label', reflect: true, type: String },
 			/**
-			 * Indicates if the end calendar dropdown is open
+			 * ADVANCED: Indicates if the end calendar dropdown is open
 			 * @type {boolean}
 			 */
 			endOpened: { attribute: 'end-opened', type: Boolean },
@@ -102,7 +102,7 @@ class InputDateRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 			 */
 			startLabel: { attribute: 'start-label', reflect: true, type: String },
 			/**
-			 * Indicates if the start calendar dropdown is open
+			 * ADVANCED: Indicates if the start calendar dropdown is open
 			 * @type {boolean}
 			 */
 			startOpened: { attribute: 'start-opened', type: Boolean },

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

@@ -68,7 +68,7 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 	static get properties() {
 		return {
 			/**
-			 * Automatically shifts end date when start date changes to keep same range. If start and end date are equal, automatically shifts end time when start time changes.
+			 * ADVANCED: Automatically shifts end date when start date changes to keep same range. If start and end date are equal, automatically shifts end time when start time changes.
 			 * @type {boolean}
 			 */
 			autoShiftDates: { attribute: 'auto-shift-dates', reflect: true, type: Boolean },
@@ -89,7 +89,7 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 			 */
 			endLabel: { attribute: 'end-label', reflect: true, type: String },
 			/**
-			 * Indicates if the end date or time dropdown is open
+			 * ADVANCED: Indicates if the end date or time dropdown is open
 			 * @type {boolean}
 			 */
 			endOpened: { attribute: 'end-opened', type: Boolean },
@@ -140,7 +140,7 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 			 */
 			startLabel: { attribute: 'start-label', reflect: true, type: String },
 			/**
-			 * Indicates if the start date or time dropdown is open
+			 * ADVANCED: Indicates if the start date or time dropdown is open
 			 * @type {boolean}
 			 */
 			startOpened: { attribute: 'start-opened', type: Boolean },

package/components/inputs/input-date.js

@@ -37,7 +37,7 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
 			 */
 			disabled: { type: Boolean },
 			/**
-			 * Text that appears as a placeholder in the input to reassure users that they can choose not to provide a value (usually not necessary)
+			 * ADVANCED: Text that appears as a placeholder in the input to reassure users that they can choose not to provide a value (usually not necessary)
 			 * @type {string}
 			 */
 			emptyText: { type: String, attribute: 'empty-text' },

package/components/inputs/input-number.js

@@ -78,7 +78,7 @@ class InputNumber extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeC
 			 */
 			autocomplete: { type: String },
 			/**
-			 * When set, will automatically place focus on the input
+			 * ADVANCED: When set, will automatically place focus on the input
 			 * @type {boolean}
 			 */
 			autofocus: { type: Boolean },
@@ -88,7 +88,7 @@ class InputNumber extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeC
 			 */
 			disabled: { type: Boolean },
 			/**
-			 * Hide the alert icon when input is invalid
+			 * ADVANCED: Hide the alert icon when input is invalid
 			 * @type {boolean}
 			 */
 			hideInvalidIcon: { attribute: 'hide-invalid-icon', type: Boolean, reflect: true },

package/components/inputs/input-text.js

@@ -27,17 +27,17 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 	static get properties() {
 		return {
 			/**
-			 * Indicates that the input has a popup menu
+			 * ADVANCED: Indicates that the input has a popup menu
 			 * @type {string}
 			 */
 			ariaHaspopup: { type: String, attribute: 'aria-haspopup' },
 			/**
-			 * Indicates that the input value is invalid
+			 * ADVANCED: Indicates that the input value is invalid
 			 * @type {string}
 			 */
 			ariaInvalid: { type: String, attribute: 'aria-invalid' },
 			/**
-			 * Specifies whether or not the screen reader should always present changes to the live region as a whole.
+			 * ADVANCED: Specifies whether or not the screen reader should always present changes to the live region as a whole.
 			 * This only applies if live is set to polite or assertive.
 			 * @type {string}
 			 */
@@ -63,7 +63,7 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 			 */
 			disabled: { type: Boolean, reflect: true },
 			/**
-			 * Hide the alert icon when input is invalid
+			 * ADVANCED: Hide the alert icon when input is invalid
 			 * @type {boolean}
 			 */
 			hideInvalidIcon: { attribute: 'hide-invalid-icon', type: Boolean, reflect: true },
@@ -78,7 +78,7 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 			 */
 			labelHidden: { type: Boolean, attribute: 'label-hidden' },
 			/**
-			 * Set the priority with which screen readers should treat updates to the input's live text region
+			 * ADVANCED: Set the priority with which screen readers should treat updates to the input's live text region
 			 * @type {string}
 			 */
 			live: { type: String },

package/components/inputs/input-textarea.js

@@ -22,7 +22,7 @@ class InputTextArea extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixi
 	static get properties() {
 		return {
 			/**
-			 * Indicates that the input value is invalid
+			 * ADVANCED: Indicates that the input value is invalid
 			 * @type {string}
 			 */
 			ariaInvalid: { type: String, attribute: 'aria-invalid' },

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

@@ -43,7 +43,7 @@ class InputTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 	static get properties() {
 		return {
 			/**
-			 * Automatically shifts end time when start time changes to keep same range
+			 * ADVANCED: Automatically shifts end time when start time changes to keep same range
 			 * @type {boolean}
 			 */
 			autoShiftTimes: { attribute: 'auto-shift-times', reflect: true, type: Boolean },
@@ -64,7 +64,7 @@ class InputTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 			 */
 			endLabel: { attribute: 'end-label', reflect: true, type: String },
 			/**
-			 * Indicates if the end dropdown is open
+			 * ADVANCED: Indicates if the end dropdown is open
 			 * @type {boolean}
 			 */
 			endOpened: { attribute: 'end-opened', type: Boolean },
@@ -105,7 +105,7 @@ class InputTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 			 */
 			startLabel: { attribute: 'start-label', reflect: true, type: String },
 			/**
-			 * Indicates if the start dropdown is open
+			 * ADVANCED: Indicates if the start dropdown is open
 			 * @type {boolean}
 			 */
 			startOpened: { attribute: 'start-opened', type: Boolean },

package/components/offscreen/README.md

@@ -1,7 +1,9 @@
-# Off-screen Content [d2l-offscreen]
+# Off-screen Content
 
 Positioning content off-screen is a valuable accessibility technique that allows us to include content that is only visible to screen reader users. For more information on this approach, read [WebAIM's article on Invisible Content](http://webaim.org/techniques/css/invisiblecontent/).
 
+## Offscreen Component [d2l-offscreen]
+
 Import the `<d2l-offscreen>` web component and place your content within the default slot to position it off-screen. The content will be hidden in the UI but still discoverable by screen reader users.
 
 <!-- docs: demo live name:d2l-offscreen -->

package/custom-elements.json

@@ -3824,7 +3824,7 @@
         },
         {
           "name": "auto-shift-dates",
-          "description": "Automatically shifts end date when start date changes to keep same range",
+          "description": "ADVANCED: Automatically shifts end date when start date changes to keep same range",
           "type": "boolean",
           "default": "false"
         },
@@ -3842,7 +3842,7 @@
         },
         {
           "name": "end-opened",
-          "description": "Indicates if the end calendar dropdown is open",
+          "description": "ADVANCED: Indicates if the end calendar dropdown is open",
           "type": "boolean",
           "default": "false"
         },
@@ -3866,7 +3866,7 @@
         },
         {
           "name": "start-opened",
-          "description": "Indicates if the start calendar dropdown is open",
+          "description": "ADVANCED: Indicates if the start calendar dropdown is open",
           "type": "boolean",
           "default": "false"
         },
@@ -3930,7 +3930,7 @@
         {
           "name": "autoShiftDates",
           "attribute": "auto-shift-dates",
-          "description": "Automatically shifts end date when start date changes to keep same range",
+          "description": "ADVANCED: Automatically shifts end date when start date changes to keep same range",
           "type": "boolean",
           "default": "false"
         },
@@ -3951,7 +3951,7 @@
         {
           "name": "endOpened",
           "attribute": "end-opened",
-          "description": "Indicates if the end calendar dropdown is open",
+          "description": "ADVANCED: Indicates if the end calendar dropdown is open",
           "type": "boolean",
           "default": "false"
         },
@@ -3979,7 +3979,7 @@
         {
           "name": "startOpened",
           "attribute": "start-opened",
-          "description": "Indicates if the start calendar dropdown is open",
+          "description": "ADVANCED: Indicates if the start calendar dropdown is open",
           "type": "boolean",
           "default": "false"
         },
@@ -4108,7 +4108,7 @@
         },
         {
           "name": "auto-shift-dates",
-          "description": "Automatically shifts end date when start date changes to keep same range. If start and end date are equal, automatically shifts end time when start time changes.",
+          "description": "ADVANCED: Automatically shifts end date when start date changes to keep same range. If start and end date are equal, automatically shifts end time when start time changes.",
           "type": "boolean",
           "default": "false"
         },
@@ -4126,7 +4126,7 @@
         },
         {
           "name": "end-opened",
-          "description": "Indicates if the end date or time dropdown is open",
+          "description": "ADVANCED: Indicates if the end date or time dropdown is open",
           "type": "boolean",
           "default": "false"
         },
@@ -4156,7 +4156,7 @@
         },
         {
           "name": "start-opened",
-          "description": "Indicates if the start date or time dropdown is open",
+          "description": "ADVANCED: Indicates if the start date or time dropdown is open",
           "type": "boolean",
           "default": "false"
         },
@@ -4220,7 +4220,7 @@
         {
           "name": "autoShiftDates",
           "attribute": "auto-shift-dates",
-          "description": "Automatically shifts end date when start date changes to keep same range. If start and end date are equal, automatically shifts end time when start time changes.",
+          "description": "ADVANCED: Automatically shifts end date when start date changes to keep same range. If start and end date are equal, automatically shifts end time when start time changes.",
           "type": "boolean",
           "default": "false"
         },
@@ -4241,7 +4241,7 @@
         {
           "name": "endOpened",
           "attribute": "end-opened",
-          "description": "Indicates if the end date or time dropdown is open",
+          "description": "ADVANCED: Indicates if the end date or time dropdown is open",
           "type": "boolean",
           "default": "false"
         },
@@ -4276,7 +4276,7 @@
         {
           "name": "startOpened",
           "attribute": "start-opened",
-          "description": "Indicates if the start date or time dropdown is open",
+          "description": "ADVANCED: Indicates if the start date or time dropdown is open",
           "type": "boolean",
           "default": "false"
         },
@@ -4511,7 +4511,7 @@
         },
         {
           "name": "empty-text",
-          "description": "Text that appears as a placeholder in the input to reassure users that they can choose not to provide a value (usually not necessary)",
+          "description": "ADVANCED: Text that appears as a placeholder in the input to reassure users that they can choose not to provide a value (usually not necessary)",
           "type": "string",
           "default": "\"\""
         },
@@ -4584,7 +4584,7 @@
         {
           "name": "emptyText",
           "attribute": "empty-text",
-          "description": "Text that appears as a placeholder in the input to reassure users that they can choose not to provide a value (usually not necessary)",
+          "description": "ADVANCED: Text that appears as a placeholder in the input to reassure users that they can choose not to provide a value (usually not necessary)",
           "type": "string",
           "default": "\"\""
         },
@@ -4731,7 +4731,7 @@
         },
         {
           "name": "hide-invalid-icon",
-          "description": "Hide the alert icon when input is invalid",
+          "description": "ADVANCED: Hide the alert icon when input is invalid",
           "type": "boolean"
         },
         {
@@ -4776,7 +4776,7 @@
         },
         {
           "name": "autofocus",
-          "description": "When set, will automatically place focus on the input",
+          "description": "ADVANCED: When set, will automatically place focus on the input",
           "type": "boolean",
           "default": "false"
         },
@@ -4848,7 +4848,7 @@
         {
           "name": "hideInvalidIcon",
           "attribute": "hide-invalid-icon",
-          "description": "Hide the alert icon when input is invalid",
+          "description": "ADVANCED: Hide the alert icon when input is invalid",
           "type": "boolean"
         },
         {
@@ -4909,7 +4909,7 @@
         {
           "name": "autofocus",
           "attribute": "autofocus",
-          "description": "When set, will automatically place focus on the input",
+          "description": "ADVANCED: When set, will automatically place focus on the input",
           "type": "boolean",
           "default": "false"
         },
@@ -5306,17 +5306,17 @@
       "attributes": [
         {
           "name": "aria-haspopup",
-          "description": "Indicates that the input has a popup menu",
+          "description": "ADVANCED: Indicates that the input has a popup menu",
           "type": "string"
         },
         {
           "name": "aria-invalid",
-          "description": "Indicates that the input value is invalid",
+          "description": "ADVANCED: Indicates that the input value is invalid",
           "type": "string"
         },
         {
           "name": "atomic",
-          "description": "Specifies whether or not the screen reader should always present changes to the live region as a whole.\nThis only applies if live is set to polite or assertive.",
+          "description": "ADVANCED: Specifies whether or not the screen reader should always present changes to the live region as a whole.\nThis only applies if live is set to polite or assertive.",
           "type": "string"
         },
         {
@@ -5336,7 +5336,7 @@
         },
         {
           "name": "live",
-          "description": "Set the priority with which screen readers should treat updates to the input's live text region",
+          "description": "ADVANCED: Set the priority with which screen readers should treat updates to the input's live text region",
           "type": "string"
         },
         {
@@ -5408,7 +5408,7 @@
         },
         {
           "name": "hide-invalid-icon",
-          "description": "Hide the alert icon when input is invalid",
+          "description": "ADVANCED: Hide the alert icon when input is invalid",
           "type": "boolean",
           "default": "false"
         },
@@ -5468,19 +5468,19 @@
         {
           "name": "ariaHaspopup",
           "attribute": "aria-haspopup",
-          "description": "Indicates that the input has a popup menu",
+          "description": "ADVANCED: Indicates that the input has a popup menu",
           "type": "string"
         },
         {
           "name": "ariaInvalid",
           "attribute": "aria-invalid",
-          "description": "Indicates that the input value is invalid",
+          "description": "ADVANCED: Indicates that the input value is invalid",
           "type": "string"
         },
         {
           "name": "atomic",
           "attribute": "atomic",
-          "description": "Specifies whether or not the screen reader should always present changes to the live region as a whole.\nThis only applies if live is set to polite or assertive.",
+          "description": "ADVANCED: Specifies whether or not the screen reader should always present changes to the live region as a whole.\nThis only applies if live is set to polite or assertive.",
           "type": "string"
         },
         {
@@ -5504,7 +5504,7 @@
         {
           "name": "live",
           "attribute": "live",
-          "description": "Set the priority with which screen readers should treat updates to the input's live text region",
+          "description": "ADVANCED: Set the priority with which screen readers should treat updates to the input's live text region",
           "type": "string"
         },
         {
@@ -5590,7 +5590,7 @@
         {
           "name": "hideInvalidIcon",
           "attribute": "hide-invalid-icon",
-          "description": "Hide the alert icon when input is invalid",
+          "description": "ADVANCED: Hide the alert icon when input is invalid",
           "type": "boolean",
           "default": "false"
         },
@@ -5692,7 +5692,7 @@
       "attributes": [
         {
           "name": "aria-invalid",
-          "description": "Indicates that the input value is invalid",
+          "description": "ADVANCED: Indicates that the input value is invalid",
           "type": "string"
         },
         {
@@ -5787,7 +5787,7 @@
         {
           "name": "ariaInvalid",
           "attribute": "aria-invalid",
-          "description": "Indicates that the input value is invalid",
+          "description": "ADVANCED: Indicates that the input value is invalid",
           "type": "string"
         },
         {
@@ -5944,7 +5944,7 @@
         },
         {
           "name": "auto-shift-times",
-          "description": "Automatically shifts end time when start time changes to keep same range",
+          "description": "ADVANCED: Automatically shifts end time when start time changes to keep same range",
           "type": "boolean",
           "default": "false"
         },
@@ -5962,7 +5962,7 @@
         },
         {
           "name": "end-opened",
-          "description": "Indicates if the end dropdown is open",
+          "description": "ADVANCED: Indicates if the end dropdown is open",
           "type": "boolean",
           "default": "false"
         },
@@ -5992,7 +5992,7 @@
         },
         {
           "name": "start-opened",
-          "description": "Indicates if the start dropdown is open",
+          "description": "ADVANCED: Indicates if the start dropdown is open",
           "type": "boolean",
           "default": "false"
         },
@@ -6050,7 +6050,7 @@
         {
           "name": "autoShiftTimes",
           "attribute": "auto-shift-times",
-          "description": "Automatically shifts end time when start time changes to keep same range",
+          "description": "ADVANCED: Automatically shifts end time when start time changes to keep same range",
           "type": "boolean",
           "default": "false"
         },
@@ -6071,7 +6071,7 @@
         {
           "name": "endOpened",
           "attribute": "end-opened",
-          "description": "Indicates if the end dropdown is open",
+          "description": "ADVANCED: Indicates if the end dropdown is open",
           "type": "boolean",
           "default": "false"
         },
@@ -6106,7 +6106,7 @@
         {
           "name": "startOpened",
           "attribute": "start-opened",
-          "description": "Indicates if the start dropdown is open",
+          "description": "ADVANCED: Indicates if the start dropdown is open",
           "type": "boolean",
           "default": "false"
         },

package/package.json

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