@brightspace-ui/core 3.161.0 → 3.162.1

package/components/calendar/README.md

@@ -16,7 +16,7 @@ The `d2l-calendar` component can be used to display a responsively sized calenda
 <!-- docs: start hidden content -->
 ### Properties
 
-Note: All `*-value` properties should be in ISO 8601 calendar date format (`YYYY-MM-DD`) and should be localized to the user's timezone (if applicable).
+Note: All `*-value` properties should be in ISO 8601 calendar date format (`YYYY-MM-DD`) and should be localized to the user's time zone (if applicable).
 
 | Property | Type | Description |
 |--|--|--|

package/components/inputs/demo/input-time.html

@@ -47,6 +47,13 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Custom Timezone</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-time label="Start Time" time-zone-id="America/Vancouver"></d2l-input-time>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Custom Interval</h2>
 			<d2l-demo-snippet>
 				<template>

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

@@ -17,7 +17,7 @@ Use date and time inputs to set dates and times in forms. They are available as
 <!-- docs: start dos -->
 * Use short but descriptive labels like "Start Date" or "Due Date"
 * Offer reasonable defaults whenever possible
-* Use date and time values relative to the user's [timezone](#timezone)
+* Use date and time values relative to the user's [time zone](#time-zone)
 <!-- docs: end dos -->
 
 <!-- docs: start donts -->
@@ -29,7 +29,7 @@ Use date and time inputs to set dates and times in forms. They are available as
 
 Use the `<d2l-input-date>` component when users need to choose a single date. It consists of a text input field for typing a date and an attached calendar (`<d2l-calendar>`) dropdown. The dropdown opens on click of the text input, or on enter or down arrow press if the text input is focused. It displays the `value` if one is specified, or a placeholder if not, and reflects the selected value when one is selected in the `d2l-calendar` or entered in the text input.
 
-Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-MM-DD`) and should be [localized to the user's timezone](#timezone) (if applicable).
+Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-MM-DD`) and should be [localized to the user's time zone](#time-zone) (if applicable).
 
 <!-- docs: demo code properties name:d2l-input-date sandboxTitle:'Date Input' align:flex-start autoSize:false size:xlarge -->
 ```html
@@ -115,7 +115,7 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
 
 Use the `<d2l-input-time>` component when users need to enter a time, without a date. The component consists of a text input field for typing a time and an attached dropdown for time selection. The dropdown opens on click of the text input, or on enter or down arrow press if the text input is focused. It displays the `value` if one is specified, or a fallback time if not, and reflects the selected value when one is selected in the dropdown or entered in the text input.
 
-Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and should be [localized to the user's timezone](#timezone) (if applicable).
+Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and should be [localized to the user's time zone](#time-zone) (if applicable).
 
 <!-- docs: demo code properties name:d2l-input-time sandboxTitle:'Time Input' align:flex-start autoSize:false size:large -->
 ```html
@@ -140,9 +140,9 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
 | `name` | String | Name of the form control. Submitted with the form as part of a name/value pair. |
 | `opened` | Boolean | Indicates if the dropdown is open |
 | `required` | Boolean | Indicates that a value is required |
-| `timezone-hidden` | Boolean | Hides the timezone inside the selection dropdown. Should only be used when the input uses a different timezone than the document's settings |
+| `time-zone-hidden` | Boolean | Hides the time zone inside the selection dropdown. Should only be used when the input value is not related to any one timezone |
 | `time-interval` | String, default: `thirty` | Number of minutes between times shown in dropdown. Valid values include `five`, `ten`, `fifteen`, `twenty`, `thirty`, and `sixty`. |
-| `value` | String, default `''` | Value of the input. This should be in ISO 8601 time format (`hh:mm:ss`) and should be [localized to the user's timezone](#timezone) (if applicable). |
+| `value` | String, default `''` | Value of the input. This should be in ISO 8601 time format (`hh:mm:ss`) and should be [localized to the user's time zone](#time-zone) (if applicable). |
 
 ### Events
 
@@ -157,7 +157,7 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
 
 Use the `<d2l-input-time-range>` component when users need to enter two times in a range, and the date is already known. The component consists of two input-time components - one for the start of a range and one for the end of a range. Values specified for these components (through the `start-value` and/or `end-value` attributes) are displayed if specified, and selected values are reflected.
 
-Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and should be [localized to the user's timezone](#timezone) (if applicable).
+Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and should be [localized to the user's time zone](#time-zone) (if applicable).
 
 <!-- docs: demo code properties name:d2l-input-time-range sandboxTitle:'Time Range Input' align:flex-start autoSize:false size:large -->
 ```html
@@ -199,7 +199,7 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
 
 Use the `<d2l-input-date-time>` component when users need to enter a single date and time, like a due date. The component consists of a `<d2l-input-date>` and a `<d2l-input-time>` component. The time input only appears once a date is selected. This component displays the `value` if one is specified, and reflects the selected value when one is selected or entered.
 
-Note: All `*value` properties should be in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`) and in UTC time (i.e., do NOT localize to the user's timezone).
+Note: All `*value` properties should be in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`) and in UTC time (i.e., do NOT localize to the user's time zone).
 
 <!-- docs: demo code properties name:d2l-input-date-time sandboxTitle:'Date-Time Input' align:flex-start autoSize:false size:xlarge -->
 ```html
@@ -219,7 +219,7 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
 | `disabled` | Boolean | Disables the input |
 | `label-hidden` | Boolean | Hides the fieldset label visually |
 | `labelled-by` | String | HTML id of an element in the same shadow root which acts as the input's label |
-| `localized` | Boolean | Indicates that any timezone localization will be handeld by the consumer and so any values will not be converted from/to UTC |
+| `localized` | Boolean | Indicates that any time zone 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 |
 | `name` | String | Name of the form control. Submitted with the form as part of a name/value pair. |
@@ -241,7 +241,7 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
 
 Use the `<d2l-input-date-time-range>` component when users need to enter two dates and times in a range, like an assignment start and end date/time. The component consists of two input-date-time components - one for the start of a range and one for the end of a range. Values specified for these components (through the `start-value` and/or `end-value` attributes) are displayed if specified, and selected values are reflected.
 
-Note: All `*value` properties should be in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`) and in UTC time (i.e., do NOT localize to the user's timezone).
+Note: All `*value` properties should be in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`) and in UTC time (i.e., do NOT localize to the user's time zone).
 
 <!-- docs: demo code properties name:d2l-input-date-time-range sandboxTitle:'Date-Time Range Input' align:flex-start autoSize:false size:xlarge -->
 ```html
@@ -294,8 +294,8 @@ A few notable accessibility-related features of these components are:
 
 ## Timezone
 
-The `input-date-time` and `input-date-time-range` components expect input in UTC (`YYYY-MM-DDTHH:mm:ss.sssZ`). These components will convert values automatically to the user's timezone to display the date/time to them, and then will provide the value back in UTC. No timezone conversions are needed.
+The `input-date-time` and `input-date-time-range` components expect input in UTC (`YYYY-MM-DDTHH:mm:ss.sssZ`). These components will convert values automatically to the user's time zone to display the date/time to them, and then will provide the value back in UTC. No time zone conversions are needed.
 
-The `input-date`, `input-date-range`, `input-time`, and `input-time-range` components do not handle timezone and so require the input to be in the user's timezone (if applicable), which corresponds to the user's timezone as specified in their account settings. The consumer of the component will need to handle any necessary UTC to local to UTC conversions. The following methods can be used for these conversions:
-* `getLocalDateTimeFromUTCDateTime(utcDateTime)` (where `utcDateTime` is the date/time in the format `YYYY-MM-DDTHH:mm:ss.sssZ`) returns the date/time in the format `YYYY-MM-DDTHH:mm:ss.sss` in the user's local timezone
-* `getUTCDateTimeFromLocalDateTime(localDate, localTime)` (where `localDate` and `localTime` are the date and time in the user's local timezone) returns the date/time in the format `YYYY-MM-DDTHH:mm:ss.sssZ` in UTC
+The `input-date`, `input-date-range`, `input-time`, and `input-time-range` components do not handle time zone and so require the input to be in the user's time zone (if applicable), which corresponds to the user's time zone as specified in their account settings. The consumer of the component will need to handle any necessary UTC to local to UTC conversions. The following methods can be used for these conversions:
+* `getLocalDateTimeFromUTCDateTime(utcDateTime)` (where `utcDateTime` is the date/time in the format `YYYY-MM-DDTHH:mm:ss.sssZ`) returns the date/time in the format `YYYY-MM-DDTHH:mm:ss.sss` in the user's local time zone
+* `getUTCDateTimeFromLocalDateTime(localDate, localTime)` (where `localDate` and `localTime` are the date and time in the user's local time zone) returns the date/time in the format `YYYY-MM-DDTHH:mm:ss.sssZ` in UTC

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

@@ -28,7 +28,7 @@ export function getShiftedEndDate(startValue, endValue, prevStartValue, inclusiv
 }
 
 /**
- * A component consisting of two input-date components - one for start of range and one for end of range. Values specified for these components (through start-value and/or end-value attributes) should be localized to the user's timezone if applicable and must be in ISO 8601 calendar date format ("YYYY-MM-DD").
+ * A component consisting of two input-date components - one for start of range and one for end of range. Values specified for these components (through start-value and/or end-value attributes) should be localized to the user's time zone if applicable and must be in ISO 8601 calendar date format ("YYYY-MM-DD").
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when there is a change to selected start date or selected end date. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 calendar date format (`YYYY-MM-DD`).
  */

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

@@ -85,6 +85,16 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
 			 * @type {string}
 			 */
 			timeDefaultValue: { attribute: 'time-default-value', reflect: true, type: String },
+			/**
+			 * Timezone identifier for the time input to use.
+			 * @type {string}
+			 */
+			timeZoneId: { type: String },
+			/**
+			 * Hides the time zone inside the time selection dropdown. Should only be used when the time input value is not related to any one time zone
+			 * @type {Boolean}
+			 */
+			timeZoneHidden: { type: Boolean, attribute: 'time-zone-hidden' },
 			/**
 			 * Value of the input
 			 * @type {string}

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

@@ -34,7 +34,7 @@ function getValidISOTimeAtInterval(val, timeInterval) {
 }
 
 /**
- * A component consisting of two input-time components - one for start of range and one for end of range. Values specified for these components (through start-value and/or end-value attributes) should be localized to the user's timezone if applicable and must be in ISO 8601 time format ("hh:mm:ss").
+ * A component consisting of two input-time components - one for start of range and one for end of range. Values specified for these components (through start-value and/or end-value attributes) should be localized to the user's time zone if applicable and must be in ISO 8601 time format ("hh:mm:ss").
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when there is a change to selected start time or selected end time. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 calendar time format (`hh:mm:ss`).
  */
@@ -119,7 +119,17 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(LocalizeC
 			 * Number of minutes between times shown in dropdown menu
 			 * @type {'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'}
 			 */
-			timeInterval: { attribute: 'time-interval', reflect: true, type: String }
+			timeInterval: { attribute: 'time-interval', reflect: true, type: String },
+			/**
+			 * Timezone identifier for the inputs to use.
+			 * @type {string}
+			 */
+			timeZoneId: { type: String },
+			/**
+			 * Hides the time zone inside the selection dropdowns. Should only be used when the input values are not related to any one time zone
+			 * @type {Boolean}
+			 */
+			timeZoneHidden: { type: Boolean, attribute: 'time-zone-hidden' },
 		};
 	}
 
@@ -251,6 +261,8 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(LocalizeC
 						?skeleton="${this.skeleton}"
 						slot="left"
 						time-interval="${ifDefined(timeInterval)}"
+						time-zone-id="${ifDefined(this.timeZoneId)}"
+						?time-zone-hidden="${this.timeZoneHidden}"
 						value="${ifDefined(this.startValue)}">
 					</d2l-input-time>
 					<d2l-input-time

package/components/inputs/input-time.js

@@ -2,13 +2,17 @@ import '../dropdown/dropdown.js';
 import '../dropdown/dropdown-menu.js';
 import '../menu/menu.js';
 import '../menu/menu-item-radio.js';
+import '../icons/icon.js';
 
 import { css, html, LitElement, nothing } from 'lit';
 import { formatDateInISOTime, getDateFromISOTime, getToday } from '../../helpers/dateTime.js';
 import { formatTime, parseTime } from '@brightspace-ui/intl/lib/dateTime.js';
+import { getTimeZoneData, validateTimeZone } from '@brightspace-ui/intl/lib/timeZones.js';
 import { bodySmallStyles } from '../typography/styles.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
+import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { InputInlineHelpMixin } from './input-inline-help.js';
@@ -24,6 +28,8 @@ const START_OF_DAY = new Date(2020, 0, 1, 0, 1, 0);
 const END_OF_DAY = new Date(2020, 0, 1, 23, 59, 59);
 const INTERVALS = new Map();
 
+const defaultTimezone = getDocumentLocaleSettings().timezone.identifier || new Intl.DateTimeFormat().timeZone;
+
 export function getIntervalNumber(size) {
 	switch (size) {
 		case 'five':
@@ -164,10 +170,15 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 			 */
 			timeInterval: { type: String, attribute: 'time-interval' },
 			/**
-			 * Hides the timezone inside the selection dropdown. Should only be used when the input uses a different timezone than the document's settings
+			 * Time zone identifier for the input to use. e.g. America/Toronto. Defaults to the user's account or device time zone setting.
+			 * @type {string}
+			 */
+			timeZoneId: { type: String, attribute: 'time-zone-id' },
+			/**
+			 * Hides the time zone inside the selection dropdown. Should only be used when the input value is not related to any one timezone
 			 * @type {Boolean}
 			 */
-			timezoneHidden: { type: Boolean, attribute: 'timezone-hidden' },
+			timeZoneHidden: { type: Boolean, attribute: 'time-zone-hidden' },
 			/**
 			 * Value of the input
 			 * @type {string}
@@ -175,7 +186,8 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 			value: { type: String },
 			_dropdownFirstOpened: { type: Boolean },
 			_formattedValue: { type: String },
-			_hiddenContentWidth: { type: String }
+			_hiddenContentWidth: { type: String },
+			_timeZone: { state: true },
 		};
 	}
 
@@ -202,12 +214,20 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 					display: inline-block;
 					vertical-align: top;
 				}
-				.d2l-input-time-timezone {
+				.d2l-input-time-time-zone {
 					line-height: 1.8rem;
 					text-align: center;
 					vertical-align: middle;
 					width: auto;
 				}
+				.d2l-input-time-time-zone.d2l-input-time-time-zone-custom {
+					align-items: center;
+					column-gap: 0.3rem;
+					display: flex;
+					font-weight: 700;
+					justify-content: center;
+				}
+
 				.d2l-input-time-hidden-content {
 					font-family: inherit;
 					font-size: 0.8rem;
@@ -230,11 +250,11 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 		this.opened = false;
 		this.required = false;
 		this.timeInterval = 'thirty';
-		this.timezoneHidden = false;
+		this.timeZoneHidden = false;
 		this._dropdownFirstOpened = false;
 		this._dropdownId = getUniqueId();
 		this._hiddenContentWidth = '6rem';
-		this._timezone = formatTime(new Date(), { format: 'ZZZ' });
+		this.timeZoneId = defaultTimezone;
 		this._inlineHelpId = getUniqueId();
 	}
 
@@ -330,8 +350,14 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 		const formattedWideTimeAM = formatTime(new Date(2020, 0, 1, 10, 23, 0));
 		const formattedWideTimePM = formatTime(new Date(2020, 0, 1, 23, 23, 0));
 		const opened = this.opened && !this.disabled && !this.skeleton;
-		const dropdownIdTimezone = `${this._dropdownId}-timezone`;
+		const dropdownIdTimezone = `${this._dropdownId}-time-zone`;
 		const ariaDescribedByIds = `${this._dropdownId ? dropdownIdTimezone : ''} ${this._hasInlineHelp ? this._inlineHelpId : ''}`.trim();
+		const customTimezone = this.timeZoneId !== defaultTimezone;
+		const timeZoneClassMap = {
+			'd2l-input-time-time-zone': true,
+			'd2l-body-small': true,
+			'd2l-input-time-time-zone-custom': customTimezone
+		};
 
 		return html`
 			<div aria-hidden="true" class="d2l-input-time-hidden-content">
@@ -376,9 +402,10 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 						root-view>
 						${menuItems}
 					</d2l-menu>
-					${!this.timezoneHidden ? html`
-						<div class="d2l-input-time-timezone d2l-body-small" id="${dropdownIdTimezone}" slot="footer">${this._timezone}</div>
-					` : nothing}
+					${!this.timeZoneHidden && this._timeZone ? html`<div class=${classMap(timeZoneClassMap)} id="${dropdownIdTimezone}" slot="footer">
+						${customTimezone ? html`<d2l-icon icon="tier1:browser"></d2l-icon>` : nothing}
+						${this._timeZone}
+					</div>` : nothing}
 				</d2l-dropdown-menu>
 			</d2l-dropdown>
 			${this._renderInlineHelp(this._inlineHelpId)}
@@ -393,9 +420,18 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 		});
 	}
 
-	willUpdate(changedProperties) {
+	async willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
 		this.style.maxWidth = `calc(${this._hiddenContentWidth} + 1.5rem + 3px)`; // text and icon width + left & right padding + border width + 1
+
+		if ((changedProperties.has('timeZoneId') || changedProperties.has('localize'))) {
+			if (validateTimeZone(this.timeZoneId)) {
+				const tzData = await getTimeZoneData(this.timeZoneId);
+				this._timeZone = tzData.friendlyName;
+			} else {
+				this._timeZone = null;
+			}
+		}
 	}
 
 	getTime() {

package/components/progress/progress.js

@@ -49,7 +49,8 @@ class Progress extends LitElement {
 					display: block;
 					min-width: 6rem;
 				}
-				:host([hidden]) {
+				:host([hidden]),
+				.text[hidden] {
 					display: none;
 				}
 				.text {
@@ -130,7 +131,7 @@ class Progress extends LitElement {
 		const perecentageText = formatPercent(percentage);
 
 		return html`
-			<div class=${classMap(textClasses)} >
+			<div class=${classMap(textClasses)} ?hidden=${(this.labelHidden || !this.label) && this.valueHidden}>
 				<span ?hidden=${this.labelHidden} id="label">${this.label}</span>
 				<span style="font-size: 0;">${getSeparator({ nonBreaking: true })}</span>
 				<span ?hidden=${this.valueHidden}>${perecentageText}</span>

package/custom-elements.json

@@ -5556,7 +5556,7 @@
     {
       "name": "d2l-input-date-range",
       "path": "./components/inputs/input-date-range.js",
-      "description": "A component consisting of two input-date components - one for start of range and one for end of range. Values specified for these components (through start-value and/or end-value attributes) should be localized to the user's timezone if applicable and must be in ISO 8601 calendar date format (\"YYYY-MM-DD\").",
+      "description": "A component consisting of two input-date components - one for start of range and one for end of range. Values specified for these components (through start-value and/or end-value attributes) should be localized to the user's time zone if applicable and must be in ISO 8601 calendar date format (\"YYYY-MM-DD\").",
       "attributes": [
         {
           "name": "end-label",
@@ -6093,6 +6093,16 @@
       "path": "./components/inputs/input-date-time.js",
       "description": "A component that consists of a \"<d2l-input-date>\" and a \"<d2l-input-time>\" component. The time input only appears once a date is selected. This component displays the \"value\" if one is specified, and reflects the selected value when one is selected or entered.",
       "attributes": [
+        {
+          "name": "timeZoneId",
+          "description": "Timezone identifier for the time input to use.",
+          "type": "string"
+        },
+        {
+          "name": "time-zone-hidden",
+          "description": "Hides the time zone inside the time selection dropdown. Should only be used when the time input value is not related to any one time zone",
+          "type": "Boolean"
+        },
         {
           "name": "max-value",
           "description": "Maximum valid date/time that could be selected by a user",
@@ -6166,6 +6176,18 @@
         }
       ],
       "properties": [
+        {
+          "name": "timeZoneId",
+          "attribute": "timeZoneId",
+          "description": "Timezone identifier for the time input to use.",
+          "type": "string"
+        },
+        {
+          "name": "timeZoneHidden",
+          "attribute": "time-zone-hidden",
+          "description": "Hides the time zone inside the time selection dropdown. Should only be used when the time input value is not related to any one time zone",
+          "type": "Boolean"
+        },
         {
           "name": "maxValue",
           "attribute": "max-value",
@@ -7894,7 +7916,7 @@
     {
       "name": "d2l-input-time-range",
       "path": "./components/inputs/input-time-range.js",
-      "description": "A component consisting of two input-time components - one for start of range and one for end of range. Values specified for these components (through start-value and/or end-value attributes) should be localized to the user's timezone if applicable and must be in ISO 8601 time format (\"hh:mm:ss\").",
+      "description": "A component consisting of two input-time components - one for start of range and one for end of range. Values specified for these components (through start-value and/or end-value attributes) should be localized to the user's time zone if applicable and must be in ISO 8601 time format (\"hh:mm:ss\").",
       "attributes": [
         {
           "name": "end-label",
@@ -7913,6 +7935,16 @@
           "type": "string",
           "default": "\"\\\"Start Time\\\"\""
         },
+        {
+          "name": "timeZoneId",
+          "description": "Timezone identifier for the inputs to use.",
+          "type": "string"
+        },
+        {
+          "name": "time-zone-hidden",
+          "description": "Hides the time zone inside the selection dropdowns. Should only be used when the input values are not related to any one time zone",
+          "type": "Boolean"
+        },
         {
           "name": "end-value",
           "description": "Value of the end time input",
@@ -8015,6 +8047,18 @@
           "type": "string",
           "default": "\"\\\"Start Time\\\"\""
         },
+        {
+          "name": "timeZoneId",
+          "attribute": "timeZoneId",
+          "description": "Timezone identifier for the inputs to use.",
+          "type": "string"
+        },
+        {
+          "name": "timeZoneHidden",
+          "attribute": "time-zone-hidden",
+          "description": "Hides the time zone inside the selection dropdowns. Should only be used when the input values are not related to any one time zone",
+          "type": "Boolean"
+        },
         {
           "name": "endValue",
           "attribute": "end-value",
@@ -8180,11 +8224,17 @@
           "default": "\"thirty\""
         },
         {
-          "name": "timezone-hidden",
-          "description": "Hides the timezone inside the selection dropdown. Should only be used when the input uses a different timezone than the document's settings",
+          "name": "time-zone-hidden",
+          "description": "Hides the time zone inside the selection dropdown. Should only be used when the input value is not related to any one timezone",
           "type": "Boolean",
           "default": "false"
         },
+        {
+          "name": "time-zone-id",
+          "description": "Time zone identifier for the input to use. e.g. America/Toronto. Defaults to the user's account or device time zone setting.",
+          "type": "string",
+          "default": "\"defaultTimezone\""
+        },
         {
           "name": "labelled-by",
           "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
@@ -8268,12 +8318,19 @@
           "default": "\"thirty\""
         },
         {
-          "name": "timezoneHidden",
-          "attribute": "timezone-hidden",
-          "description": "Hides the timezone inside the selection dropdown. Should only be used when the input uses a different timezone than the document's settings",
+          "name": "timeZoneHidden",
+          "attribute": "time-zone-hidden",
+          "description": "Hides the time zone inside the selection dropdown. Should only be used when the input value is not related to any one timezone",
           "type": "Boolean",
           "default": "false"
         },
+        {
+          "name": "timeZoneId",
+          "attribute": "time-zone-id",
+          "description": "Time zone identifier for the input to use. e.g. America/Toronto. Defaults to the user's account or device time zone setting.",
+          "type": "string",
+          "default": "\"defaultTimezone\""
+        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",

package/package.json

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