@ui5/webcomponents 0.0.0-dcd8e5389 → 0.0.0-ddc5fe31b

package/src/TimePickerPopover.hbs

@@ -6,28 +6,53 @@
 	allow-target-overlap
 	_hide-header
 	hide-arrow
+	@ui5-after-open="{{onResponsivePopoverAfterOpen}}"
 	@ui5-after-close="{{onResponsivePopoverAfterClose}}"
 	@wheel="{{_handleWheel}}"
 	@keydown="{{_onkeydown}}"
 >
 
-	<ui5-time-selection
+	<ui5-time-selection-clocks
 		id="{{_id}}-time-sel"
 		value="{{_timeSelectionValue}}"
 		format-pattern="{{_formatPattern}}"
-		.hideHours="{{hideHours}}"
-		.hideMinutes="{{hideMinutes}}"
-		.hideSeconds="{{hideSeconds}}"
-		.minutesStep="{{minutesStep}}"
-		.secondsStep="{{secondsStep}}"
-		.maxHours="{{maxHours}}"
-		.maxMinutes="{{maxMinutes}}"
-		.maxSeconds="{{maxSeconds}}"
 		@ui5-change="{{onTimeSelectionChange}}"
-	></ui5-time-selection>
+		@close-picker="{{submitPickers}}"
+	></ui5-time-selection-clocks>
 
 	<div slot="footer" class="ui5-time-picker-footer" @keydown={{_onfooterkeydown}}>
 		<ui5-button id="submit" design="Emphasized" @click="{{submitPickers}}">{{submitButtonLabel}}</ui5-button>
 		<ui5-button id="close" design="Transparent" @click="{{closePicker}}">{{cancelButtonLabel}}</ui5-button>
 	</div>
 </ui5-responsive-popover>
+
+{{#if _isPhone}}
+<ui5-popover
+	id="{{_id}}-popover"
+	class="ui5-time-picker-inputs-popover"
+	placement-type="Bottom"
+	horizontal-align="Left"
+	allow-target-overlap
+	_hide-header
+	hide-arrow
+	@ui5-after-open="{{onInputsPopoverAfterOpen}}"
+	@ui5-after-close="{{onInputsPopoverAfterClose}}"
+	@wheel="{{_handleWheel}}"
+	@keydown="{{_onkeydown}}"
+>
+	<div class="popover-content">
+		<ui5-time-selection-inputs
+			id="{{_id}}-time-sel-inputs"
+			value="{{_timeSelectionValue}}"
+			format-pattern="{{_formatPattern}}"
+			@ui5-change="{{onTimeSelectionChange}}"
+			@close-inputs="{{submitInputsPopover}}"
+		></ui5-time-selection-inputs>
+	</div>
+
+	<div slot="footer" class="ui5-time-picker-footer" @keydown={{_onfooterkeydown}}>
+		<ui5-button id="submitInputs" design="Emphasized" @click="{{submitInputsPopover}}">{{submitButtonLabel}}</ui5-button>
+		<ui5-button id="closeInputs" design="Transparent" @click="{{closeInputsPopover}}">{{cancelButtonLabel}}</ui5-button>
+	</div>
+</ui5-popover>
+{{/if}}

package/src/TimeSelection.hbs

@@ -9,6 +9,7 @@
 		<ui5-wheelslider
 				label = "{{hoursSliderTitle}}"
 				._items="{{hoursArray}}"
+				._density="{{_density}}"
 				data-sap-focus-ref
 				?expanded="{{_hoursSliderFocused}}"
 				value="{{_hours}}"
@@ -23,6 +24,7 @@
 		<ui5-wheelslider
 				label = "{{minutesSliderTitle}}"
 				._items="{{minutesArray}}"
+				._density="{{_density}}"
 				?expanded="{{_minutesSliderFocused}}"
 				value="{{_minutes}}"
 				@ui5-select="{{onMinutesChange}}"
@@ -36,6 +38,7 @@
 		<ui5-wheelslider
 				label = "{{secondsSliderTitle}}"
 				._items="{{secondsArray}}"
+				._density="{{_density}}"
 				?expanded="{{_secondsSliderFocused}}"
 				value="{{_seconds}}"
 				@ui5-select="{{onSecondsChange}}"
@@ -49,6 +52,7 @@
 		<ui5-wheelslider
 				label = "{{periodSliderTitle}}"
 				._items="{{periodsArray}}"
+				._density="{{_density}}"
 				?expanded="{{_periodSliderFocused}}"
 				value="{{_period}}"
 				@ui5-select="{{onPeriodChange}}"

package/src/TimeSelectionClocks.hbs

@@ -0,0 +1,71 @@
+<div
+	id="{{_id}}"
+	class="ui5-time-picker-tsc-container"
+	tabindex="-1"
+	@keydown={{_onkeydown}}
+	@keyup={{_onkeyup}}
+	@focusin={{_clocksFocusIn}}
+	format-pattern="{{formatPattern}}"
+>
+	<div
+		class="ui5-time-picker-tsc-buttons"
+	>
+	{{#each _entities}}
+		{{#if this.hasSeparator}}
+		<span separator>:</span>
+		{{/if}}
+		<ui5-toggle-spin-button
+			id="{{../_id}}_button_{{this.entity}}"
+			.valueMin="{{this.attributes.min}}"
+			.valueMax="{{this.attributes.max}}"
+			.valueNow="{{this.value}}"
+			.valueText="{{this.textValue}}"
+			.accessibleName="{{this.label}}"
+			.pressed="{{this.active}}"
+			?focused="{{this.active}}"
+			@focusin="{{../_buttonFocusIn}}"
+		>{{this.stringValue}}</ui5-toggle-spin-button>
+	{{/each}}
+	{{#if _periods.length}}
+		<span separator> </span>
+		<ui5-segmented-button
+			id="{{_id}}_AmPm"
+			@click={{_periodChange}}
+		>
+		{{#each _periods}}
+    		<ui5-segmented-button-item
+				?pressed={{this.pressed}}
+			>
+			{{this.label}}
+			</ui5-segmented-button-item>
+		{{/each}}
+		</ui5-segmented-button>
+	{{/if}}
+	</div>
+
+	<div
+		class="ui5-time-picker-tsc-clocks"
+		role="img"
+		aria-label="{{clockDialAriaLabel}}"
+	>
+	{{#each _entities}}
+		<ui5-time-picker-clock
+			id="{{../_id}}_clock_{{this.entity}}"
+			data-sap-clock="{{this.entity}}"
+			.active="{{this.active}}"
+			.label="{{this.label}}"
+			.itemMin="{{this.itemMin}}"
+			.itemMax="{{this.itemMax}}"
+			.selectedValue="{{this.value}}"
+			.displayStep="{{this.displayStep}}"
+			.valueStep="{{this.attributes.step}}"
+			.lastItemReplacement="{{this.lastItemReplacement}}"
+			.showInnerCircle="{{this.showInnerCircle}}"
+			.prependZero="{{this.prependZero}}"
+			@ui5-change={{../_clockChange}}
+		>
+		</ui5-time-picker-clock>
+	{{/each}}
+	</div>
+
+</div>

package/src/TimeSelectionInputs.hbs

@@ -0,0 +1,41 @@
+	<div
+		class="ui5-time-selection-inputs"
+		@keydown="{{_onkeydown}}"
+	>
+	{{#each _entities}}
+		{{#if this.hasSeparator}}
+		<span separator>:</span>
+		{{/if}}
+		<ui5-input
+			id="{{../_id}}_input_{{this.entity}}"
+			data-sap-input="{{this.entity}}"
+			type="{{../_numberType}}"
+			maxlength="2"
+			autocomplete="off"
+			pattern="[0-9]*"
+			inputmode="numeric"
+			class="ui5-time-selection-numeric-input"
+			.value="{{this.stringValue}}"
+			.accessibleName="{{this.label}}"
+			._nativeInputAttributes={{this.attributes}}
+			@focusin={{../_onfocusin}}
+			@focusout={{../_onfocusout}}
+			@ui5-input={{../_oninput}}
+		></ui5-input>
+	{{/each}}
+	{{#if _periods.length}}
+		<span separator> </span>
+		<ui5-segmented-button
+			id="{{_id}}_AmPm"
+			@click={{_periodChange}}
+		>
+		{{#each _periods}}
+    		<ui5-segmented-button-item
+				?pressed={{this.pressed}}
+			>
+			{{this.label}}
+			</ui5-segmented-button-item>
+		{{/each}}
+		</ui5-segmented-button>
+	{{/if}}
+	</div>

package/src/Toast.hbs

@@ -2,6 +2,10 @@
 	<div class="ui5-toast-root"
 		role="alert"
 		style="{{styles.root}}"
+		tabindex="{{_tabindex}}"
+		@focusin="{{_onfocusin}}"
+		@focusout="{{_onfocusout}}"
+		@keydown="{{_onkeydown}}"
 		@mouseover="{{_onmouseover}}"
 		@mouseleave="{{_onmouseleave}}"
 		@transitionend="{{_ontransitionend}}">

package/src/ToggleSpinButton.hbs

@@ -0,0 +1,10 @@
+{{>include "./Button.hbs"}}
+
+{{#*inline "ariaPressed"}}
+	aria-pressed="{{pressed}}"
+	aria-valuemin="{{valueMin}}"
+	aria-valuemax="{{valueMax}}"
+	aria-valuenow="{{valueNow}}"
+	aria-valuetext="{{valueText}}"
+	role="spinbutton"
+{{/inline}}

package/src/Token.hbs

@@ -13,16 +13,15 @@
 	{{#unless readonly}}
 		<div
 			class="ui5-token--icon"
-			@mousedown="{{_mousedown}}"
-			@click="{{_delete}}"
 		>
 			{{#if closeIcon.length}}
-				<slot name="closeIcon"></slot>
+				<slot name="closeIcon" @click="{{_delete}}"></slot>
 			{{else}}
 				<ui5-icon
 					name="{{iconURI}}"
 					accessible-name="{{tokenDeletableText}}"
 					show-tooltip
+					@click="{{_delete}}"
 				></ui5-icon>
 			{{/if}}
 		</div>

package/src/Tokenizer.hbs

@@ -7,6 +7,7 @@
 		@click="{{_click}}"
 		@mousedown="{{_onmousedown}}"
 		@keydown="{{_onkeydown}}"
+		@ui5-select="{{onTokenSelect}}"
 		role="listbox"
 		aria-labelledby="{{_id}}-hiddenText"
 	>
@@ -17,7 +18,7 @@
 
 	{{#if showNMore}}
 		<span
-			@click="{{_openOverflowPopover}}"
+			@click="{{_openMorePopoverAndFireEvent}}"
 			class="ui5-tokenizer-more-text"
 			part="n-more-text"
 		>{{_nMoreText}}</span>

package/src/TokenizerPopover.hbs

@@ -1,13 +1,29 @@
 <ui5-responsive-popover
 	tokenizer-popover="true"
 	style={{styles.popover}}
-	?content-only-on-desktop="{{hasValueState}}"
+	class={{classes.popover}}
+	?content-only-on-desktop="{{noValueStatePopover}}"
 	hide-arrow
 	placement-type="Bottom"
 	horizontal-align="Left"
+	@before-close={{handleBeforeClose}}
+	@before-open="{{handleBeforeOpen}}"
 >
-	<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
-		{{#if _isPhone}}
+	{{#unless _isPhone}}
+		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
+			{{#unless noValueStatePopover}}
+				<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
+					{{#each valueStateMessageText}}
+						{{this}}
+					{{/each}}
+				</div>
+			{{/unless}}
+		</div>
+	{{/unless}}
+
+	{{#if _isPhone}}
+		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
 			<div class="row" style="{{styles.popoverHeaderTitle}}">
 				<ui5-title level="H5" class="ui5-responsive-popover-header-text">{{morePopoverTitle}}</ui5-title>
 				<ui5-button
@@ -18,8 +34,8 @@
 				>
 				</ui5-button>
 			</div>
-		{{/if}}
-		{{#unless hasValueState}}
+		</div>
+		{{#unless noValueStatePopover}}
 			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 				{{#each valueStateMessageText}}
@@ -27,14 +43,17 @@
 				{{/each}}
 			</div>
 		{{/unless}}
-	</div>
+	{{/if}}
 	<ui5-list
 		class="ui5-tokenizer-list"
 		mode="Delete"
 		@ui5-item-delete={{itemDelete}}
 	>
 		{{#each _tokens}}
-			<ui5-li .tokenRef={{this}}>
+			<ui5-li
+				.tokenRef={{this}}
+				wrapping-type="Normal"
+			>
 				{{this.text}}
 			</ui5-li>
 		{{/each}}
@@ -42,7 +61,8 @@
 	{{#if _isPhone}}
 		<div slot="footer" class="ui5-responsive-popover-footer">
 			<ui5-button
-				design="Transparent"
+				id="ui5-tokenizer-dialog-confirm-btn"
+				design="Emphasized"
 				@click="{{closeMorePopover}}"
 			>OK</ui5-button>
 		</div>

package/src/Toolbar.hbs

@@ -0,0 +1,20 @@
+
+<div 
+	class="{{classes.items}}" 
+	role="{{accInfo.root.role}}"
+	aria-label="{{accInfo.root.accessibleName}}"
+>
+	{{#each standardItems}}
+		{{this.toolbarTemplate}}
+	{{/each}}
+
+	<ui5-button
+		aria-hidden="{{hideOverflowButton}}"
+		icon="overflow"
+		design="Transparent"
+		class="{{classes.overflowButton}}"
+		tooltip="{{accInfo.overflowButton.tooltip}}"
+		accessible-name="{{accInfo.overflowButton.accessibleName}}"
+		.accessibilityAttributes={{accInfo.overflowButton.accessibilityAttributes}}
+	></ui5-button>
+</div>

package/src/ToolbarButton.hbs

@@ -0,0 +1,19 @@
+<ui5-button
+	class="ui5-tb-button ui5-tb-item"
+	id="{{this.id}}"
+	style="{{this.styles}}"
+	icon="{{this.icon}}"
+	?icon-end="{{this.iconEnd}}"
+	tooltip="{{this.tooltip}}"
+	accessible-name="{{this.accessibleName}}"
+	accessible-name-ref="{{this.accessibleNameRef}}"
+	.accessibilityAttributes="{{this.accessibilityAttributes}}"
+	design="{{this.design}}"
+	?disabled="{{this.disabled}}"
+	?hidden="{{this.hidden}}"
+	data-ui5-external-action-item-id="{{this._id}}"
+	data-ui5-stable="{{this.stableDomRef}}"
+	.refItemId="{{this._id}}"
+>
+		{{this.text}}
+</ui5-button>

package/src/ToolbarPopover.hbs

@@ -0,0 +1,14 @@
+<ui5-popover
+	class="ui5-overflow-popover"
+	placement-type="Bottom"
+	horizontal-align="Right"
+	@ui5-after-close="{{onOverflowPopoverClosed}}"
+	@ui5-after-open="{{onOverflowPopoverOpened}}"
+	hide-arrow
+>
+	<div class="ui5-overflow-list {{classes.overflow}}">
+		{{#each overflowItems}}
+			{{this.toolbarPopoverTemplate}}
+		{{/each}}
+	</div>
+</ui5-popover>

package/src/ToolbarPopoverButton.hbs

@@ -0,0 +1,16 @@
+<ui5-button
+	icon="{{this.icon}}"
+	?icon-end="{{this.iconEnd}}"
+	accessible-name="{{this.accessibleName}}"
+	accessible-name-ref="{{this.accessibleNameRef}}"
+	.accessibilityAttributes="{{this.accessibilityAttributes}}"
+	tooltip="{{this.tooltip}}"
+	design="{{this.design}}"
+	?disabled="{{this.disabled}}"
+	?hidden="{{this.hidden}}"
+	class="ui5-tb-popover-button ui5-tb-popover-item"
+	data-ui5-external-action-item-id="{{this._id}}"
+	data-ui5-stable="{{this.stableDomRef}}"
+>
+	{{this.text}}
+</ui5-button>

package/src/ToolbarPopoverSelect.hbs

@@ -0,0 +1,12 @@
+<ui5-select 
+	class="ui5-tb-popover-item"
+	data-ui5-external-action-item-id="{{this._id}}"
+	value-state="{{this.valueState}}"
+	?disabled="{{this.disabled}}"
+	accessible-name="{{this.accessibleName}}"
+	accessible-name-ref="{{this.accessibleNameRef}}"
+>
+	{{#each options}}
+		<ui5-option ?selected="{{this.selected}}" data-ui5-external-action-item-index="{{@index}}">{{this.textContent}}</ui5-option>
+	{{/each}}
+</ui5-select>

package/src/ToolbarPopoverSeparator.hbs

@@ -0,0 +1,5 @@
+<div
+	class="ui5-tb-separator-in-overflow ui5-tb-popover-item"
+	data-ui5-external-action-item-id="{{this._id}}"
+	?visible="{{visible}}"
+></div>

package/src/ToolbarSelect.hbs

@@ -0,0 +1,13 @@
+<ui5-select 
+	class="ui5-tb-item"
+	style="{{this.styles}}"
+	data-ui5-external-action-item-id="{{this._id}}"
+	value-state="{{this.valueState}}"
+	?disabled="{{this.disabled}}"
+	accessible-name="{{this.accessibleName}}"
+	accessible-name-ref="{{this.accessibleNameRef}}"
+>
+	{{#each options}}
+		<ui5-option ?selected="{{this.selected}}" data-ui5-external-action-item-index="{{@index}}">{{this.textContent}}</ui5-option>
+	{{/each}}
+</ui5-select>

package/src/ToolbarSeparator.hbs

@@ -0,0 +1,4 @@
+<div
+	class="ui5-tb-separator ui5-tb-item"
+	data-ui5-external-action-item-id="{{this._id}}"
+></div>

package/src/ToolbarSpacer.hbs

@@ -0,0 +1,6 @@
+<div
+	class="ui5-tb-spacer ui5-tb-item"
+	style="{{this.styles}}"
+	role="separator"
+	data-ui5-external-action-item-id="{{this._id}}"
+></div>

package/src/TreeItemBase.hbs

@@ -9,7 +9,7 @@
 		class="ui5-li-tree-toggle-box"
 		style="{{styles.preContent}}"
 	>
-		{{#if _showToggleButtonBeginning}}
+		{{#if showToggleButton}}
 			<ui5-icon
 				part="toggle-icon"
 				class="ui5-li-tree-toggle-icon"
@@ -33,17 +33,6 @@
 	{{/if}}
 {{/inline}}
 
-{{#*inline "iconEnd"}}
-	{{#if _showToggleButtonEnd}}
-		<ui5-icon
-			part="toggle-icon"
-			class="ui5-li-tree-toggle-icon"
-			name="{{_toggleIconName}}"
-			@click="{{_toggleClick}}"
-		></ui5-icon>
-	{{/if}}
-{{/inline}}
-
 {{#*inline "listItemPostContent"}}
 	{{#if expanded}}
 		<ul

package/src/WheelSlider.hbs

@@ -9,6 +9,7 @@
 	data-sap-focus-ref
 	tabindex="0"
 	@wheel="{{_handleWheel}}"
+	._density="{{_density}}"
 >
 	<div class="ui5-wheelslider-header-block">
 		<div id="{{this._id}}--label" class="ui5-wheelslider-label">{{label}}</div>

package/src/i18n/messagebundle.properties

@@ -32,7 +32,25 @@ AVATAR_GROUP_ARIA_LABEL_GROUP=Conjoined avatars.
 AVATAR_GROUP_MOVE=Press ARROW keys to move.
 
 #XACT: ARIA announcement for the badge
-BADGE_DESCRIPTION=Badge
+BADGE_DESCRIPTION_BADGE=Badge
+
+#XACT: ARIA announcement for the badge with "Tag" design
+BADGE_DESCRIPTION_TAG=Tag
+
+#XACT: ARIA announcement for the roledescription attribute
+BADGE_ROLE_DESCRIPTION=Tag button
+
+#XACT: ARIA announcement for the "Error" state
+BADGE_ERROR=Error
+
+#XACT: ARIA announcement for the "Warning" state
+BADGE_WARNING=Warning
+
+#XACT: ARIA announcement for the "Success" state
+BADGE_SUCCESS=Success
+
+#XACT: ARIA announcement for the "Information" state
+BADGE_INFORMATION=Information
 
 #XACT: position (current and max. value) of a Breadcrumb item which should be announced by screenreaders
 BREADCRUMB_ITEM_POS={0} of {1}
@@ -88,9 +106,12 @@ COLOR_PALETTE_DIALOG_OK_BUTTON=OK
 #XTIT: Color Palette dialog title of the Color Picker
 COLOR_PALETTE_DIALOG_TITLE=Change Color
 
-#XTIT: Color Palette dialog title of the Color Picker
+#XTIT: Color Palette dialog button text to open the Color Picker
 COLOR_PALETTE_MORE_COLORS_TEXT=More Colors...
 
+#XTIT: Color Palette dialog button text to set the default color
+COLOR_PALETTE_DEFAULT_COLOR_TEXT=Default Color
+
 #XACT: Aria information for the ColorPicker Alpha slider
 COLORPICKER_ALPHA_SLIDER=Alpha control
 
@@ -139,9 +160,15 @@ SELECT_ROLE_DESCRIPTION=Listbox
 #XTXT: MultiComboBox and ComboBox icon accessible name
 SELECT_OPTIONS=Select Options
 
+#XTXT: MultiComboBox show selected items button accessible name
+SHOW_SELECTED_BUTTON=Show Selected Items Only
+
 #XBUT: A link that can be clicked to display more/all items
 INPUT_SUGGESTIONS=Suggestions available
 
+#XCKL: Select all checkbox label
+MCB_SELECTED_ITEMS=Select All ({0} of {1})
+
 #XBUT: Default title text for mobile
 INPUT_SUGGESTIONS_TITLE=Select
 
@@ -154,6 +181,9 @@ INPUT_SUGGESTIONS_MORE_HITS={0} results are available
 #XACT: ARIA announcement for the Input suggestion result if no hit
 INPUT_SUGGESTIONS_NO_HIT=No results
 
+#XACT: ARIA label for the Input clear icon
+INPUT_CLEAR_ICON_ACC_NAME=Clear
+
 #XFLD: Subtle link description label
 LINK_SUBTLE=Subtle
 
@@ -208,6 +238,9 @@ MESSAGE_STRIP_INFORMATION=Information Bar
 #XFLD: MultiComboBox dialog button
 MULTICOMBOBOX_DIALOG_OK_BUTTON=OK
 
+#XMSG: Text used for reporting that a radio button group requires one of the radio buttons to be checked
+RADIO_BUTTON_GROUP_REQUIRED=Select one of the available options.
+
 #XMSG: Text used for value state error message when an item is already selected
 VALUE_STATE_ERROR_ALREADY_SELECTED=This value is already selected.
 
@@ -235,6 +268,9 @@ RATING_INDICATOR_TOOLTIP_TEXT=Rating
 #XBUT: Rating indicator aria-roledescription text
 RATING_INDICATOR_TEXT=Rating Indicator
 
+#XACT: Rating indicator ARIA description
+RATING_INDICATOR_ARIA_DESCRIPTION=Required
+
 #XFLD: ResponsivePopover's button's text which closes the dialog
 RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=Decline
 
@@ -268,6 +304,9 @@ ARIA_LABEL_ROW_SELECTION=Item selection
 #XACT ARIA label for select all checkbox in a multiselect mode table
 ARIA_LABEL_SELECT_ALL_CHECKBOX=Select All Rows
 
+#XACT ARIA label for table cell without content
+ARIA_LABEL_EMPTY_CELL=Empty
+
 #XACT: ARIA announcement for the positive design
 TAB_ARIA_DESIGN_POSITIVE=Positive
 
@@ -325,6 +364,21 @@ TIMEPICKER_CANCEL_BUTTON=Cancel
 #XACT: Aria information for the Time Picker
 TIMEPICKER_INPUT_DESCRIPTION=Time Input
 
+#XACT: Aria information for the Time Picker Clock Dial
+TIMEPICKER_CLOCK_DIAL_LABEL=Clock Dial
+
+#XACT: Time Picker Inputs tooltip/aria-label for Hours input
+TIMEPICKER_INPUTS_ENTER_HOURS=Please enter hours
+
+#XACT: Time Picker Inputs tooltip/aria-label for Minutes input
+TIMEPICKER_INPUTS_ENTER_MINUTES=Please enter minutes
+
+#XACT: Time Picker Inputs tooltip/aria-label for Seconds input
+TIMEPICKER_INPUTS_ENTER_SECONDS=Please enter seconds
+
+#XACT: Aria information for the Duration Picker
+DURATION_INPUT_DESCRIPTION=Duration Input
+
 #XFLD: DateTimePicker popover button
 DATETIME_PICKER_DATE_BUTTON=Date
 
@@ -349,6 +403,9 @@ TOKENIZER_ARIA_LABEL=Tokenizer
 #XFLD: Remove label for Tokenizer's Dialog on phone
 TOKENIZER_POPOVER_REMOVE=Remove
 
+#XFLD: Token number indicator which is used to show all tokens in Tokenizer when all of the tokens are hidden
+TOKENIZER_SHOW_ALL_ITEMS={0} Items
+
 #XACT: Label text for TreeListItem
 TREE_ITEM_ARIA_LABEL=Tree Item
 
@@ -420,3 +477,23 @@ MENU_BACK_BUTTON_ARIA_LABEL=Back
 
 #XACT: ARIA announcement for the Menu Close button aria-label attribute
 MENU_CLOSE_BUTTON_ARIA_LABEL=Decline
+
+#XTXT: Text for the Navigation Menu Popover hidden text
+NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=Navigation
+
+#XACT: ARIA announcement for roldesecription attribute of Dialog header
+DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Interactive Header
+
+#XACT: ARIA announcement for describedby attribute of resizable Dialog header
+DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Use Shift+Arrow keys to resize
+
+#XACT: ARIA announcement for describedby attribute of draggable Dialog header
+DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=Use Arrow keys to move
+
+#XACT: ARIA announcement for describedby attribute of draggable and resizable Dialog header
+DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Use Arrow keys to move, Shift+Arrow keys to resize
+#XFLD: A colon to separate the "label" from an input. In some languages there might be a different symbol used for such a colon
+LABEL_COLON=:
+
+#XACT: ARIA announcement for the input field of the TimePicker
+TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Additional Options