@ui5/webcomponents 0.0.0-7c7170d4a → 0.0.0-7d8c57f70

package/package-scripts.cjs

@@ -3,6 +3,7 @@ const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js")
 const options = {
 	port: 8080,
 	portStep: 2,
+	typescript: true,
 	noWatchTS: true,
 	dev: true,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.0.0-7c7170d4a",
+  "version": "0.0.0-7d8c57f70",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -48,15 +48,15 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-7c7170d4a",
-    "@ui5/webcomponents-icons": "0.0.0-7c7170d4a",
-    "@ui5/webcomponents-icons-business-suite": "0.0.0-7c7170d4a",
-    "@ui5/webcomponents-icons-tnt": "0.0.0-7c7170d4a",
-    "@ui5/webcomponents-localization": "0.0.0-7c7170d4a",
-    "@ui5/webcomponents-theming": "0.0.0-7c7170d4a"
+    "@ui5/webcomponents-base": "0.0.0-7d8c57f70",
+    "@ui5/webcomponents-icons": "0.0.0-7d8c57f70",
+    "@ui5/webcomponents-icons-business-suite": "0.0.0-7d8c57f70",
+    "@ui5/webcomponents-icons-tnt": "0.0.0-7d8c57f70",
+    "@ui5/webcomponents-localization": "0.0.0-7d8c57f70",
+    "@ui5/webcomponents-theming": "0.0.0-7d8c57f70"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-7c7170d4a",
-    "chromedriver": "^124.0.4"
+    "@ui5/webcomponents-tools": "0.0.0-7d8c57f70",
+    "chromedriver": "^126.0.2"
   }
 }

package/src/AvatarGroup.hbs

@@ -18,7 +18,7 @@
 		{{else}}
 			<ui5-button
 				.accessibilityAttributes="{{_overflowButtonAccAttributes}}"
-				accessible-name="{{_overflowButtonAriaLabelText}}"
+				aria-label="{{_overflowButtonAriaLabelText}}"
 				?hidden="{{_overflowBtnHidden}}"
 				?non-interactive={{_isGroup}}
 				class="{{classes.overflowButton}}"

package/src/{Tag.hbs → Badge.hbs}

@@ -1,5 +1,5 @@
 {{#if interactive}}
-	<button class="ui5-tag-root"
+	<button class="ui5-badge-root"
 			title="{{_title}}"
 			aria-roledescription="{{_roleDescription}}"
 			aria-description="{{_valueState}}"
@@ -8,7 +8,7 @@
 		{{> content}}
 	</button>
 {{else}}
-	<div class="ui5-tag-root"
+	<div class="ui5-badge-root"
 		 title="{{_title}}">
 		{{> content}}
 	</div>
@@ -17,11 +17,11 @@
 {{#*inline "content"}}
 	<slot name="icon"></slot>
 	{{#if this._semanticIconName}}
-		<ui5-icon class="ui5-tag-semantic-icon" name="{{_semanticIconName}}"></ui5-icon>
+		<ui5-icon class="ui5-badge-semantic-icon" name="{{_semanticIconName}}"></ui5-icon>
 	{{/if}}
-	<span class="ui5-hidden-text">{{tagDescription}}</span>
+	<span class="ui5-hidden-text">{{badgeDescription}}</span>
 	{{#if hasText}}
-		<span class="ui5-tag-text"><bdi><slot></slot></bdi></span>
+		<span class="ui5-badge-text"><bdi><slot></slot></bdi></span>
 	{{/if}}
 {{/inline}}
 

package/src/Breadcrumbs.hbs

@@ -8,8 +8,8 @@
 		<li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper" ?hidden="{{_isOverflowEmpty}}">
 			<ui5-link @ui5-click="{{_openRespPopover}}"
 				accessible-role="button"
-				accessible-name="{{_dropdownArrowAccessibleNameText}}"
-				.accessibilityAttributes="{{linkAccessibilityAttributes}}">
+				aria-label="{{_dropdownArrowAccessibleNameText}}"
+				aria-haspopup="{{_ariaHasPopup}}">
 				<ui5-icon name="slim-arrow-down" title="{{_dropdownArrowAccessibleNameText}}"></ui5-icon>
 			</ui5-link>
 		</li>
@@ -34,6 +34,4 @@
 		</li>
 		{{/each}}
 	</ol>
-</nav>
-
-{{>include "./BreadcrumbsPopover.hbs"}}
+</nav>

package/src/BreadcrumbsPopover.hbs

@@ -2,11 +2,11 @@
 	class="ui5-breadcrumbs-popover"
 	hide-arrow
 	content-only-on-desktop
-	placement="Bottom"
-	horizontal-align="Start"
+	placement-type="Bottom"
+	horizontal-align="Left"
 	_hide-header
 	@keydown="{{_onkeydown}}">
-	<ui5-list selection-mode="Single"
+	<ui5-list mode="SingleSelect"
 		separators="None"
 		@ui5-selection-change="{{_onOverflowListItemSelect}}">
 

package/src/BusyIndicator.hbs

@@ -33,7 +33,7 @@
 
 {{#*inline "busy-text"}}
 	{{#if text}}
-		<ui5-label id="{{_id}}-label" class="ui5-busy-indicator-text">
+		<ui5-label id="{{_id}}-label" class="ui5-busy-indicator-text" wrapping-type="Normal">
 			{{text}}
 		</ui5-label>
 	{{/if}}

package/src/Button.hbs

@@ -18,15 +18,16 @@
 	aria-controls="{{accessibilityAttributes.controls}}"
 	aria-haspopup="{{_hasPopup}}"
 	aria-label="{{ariaLabelText}}"
+	aria-describedby="{{ariaDescribedbyText}}"
 	title="{{buttonTitle}}"
 	part="button"
-	role="{{effectiveAccRole}}"
+	role="{{buttonAccessibleRole}}"
 >
 	{{#if icon}}
 		<ui5-icon
 			class="ui5-button-icon"
 			name="{{icon}}"
-			mode="{{iconMode}}"
+			accessible-role="{{iconRole}}"
 			part="icon"
 			?show-tooltip={{showIconTooltip}}
 		></ui5-icon>
@@ -38,17 +39,8 @@
 		</bdi>
 	</span>
 
-	{{#if endIcon}}
-		<ui5-icon
-			class="ui5-button-end-icon"
-			name="{{endIcon}}"
-			mode="{{endIconMode}}"
-			part="endIcon"
-		></ui5-icon>
-	{{/if}}
-
 	{{#if hasButtonType}}
-		<span class="ui5-hidden-text">{{buttonTypeText}}</span>
+		<span id="ui5-button-hiddenText-type" aria-hidden="true" class="ui5-hidden-text">{{buttonTypeText}}</span>
 	{{/if}}
 </button>
 

package/src/Calendar.hbs

@@ -62,6 +62,7 @@
 			.isPrevButtonDisabled="{{_previousButtonDisabled}}"
 			.isNextButtonDisabled="{{_nextButtonDisabled}}"
 			.isMonthButtonHidden="{{_isHeaderMonthButtonHidden}}"
+			.isYearButtonHidden="{{_isHeaderYearButtonHidden}}"
 			._monthButtonText="{{_headerMonthButtonText}}"
 			._yearButtonText="{{_headerYearButtonText}}"
 			._yearButtonTextSecType="{{_headerYearButtonTextSecType}}"

package/src/CardHeader.hbs

@@ -33,9 +33,9 @@
 					>{{titleText}}</div>
 				{{/if}}
 
-				{{#if additionalText}}
-					<div class="ui5-card-header-additionalText">
-						<span id="{{_id}}-additionalText" part="additional-text" dir="auto">{{additionalText}}</span>
+				{{#if status}}
+					<div class="ui5-card-header-status">
+						<span id="{{_id}}-status" part="status" dir="auto">{{status}}</span>
 					</div>
 				{{/if}}
 

package/src/CheckBox.hbs

@@ -48,4 +48,6 @@
 	{{#if hasValueState}}
 		<span id="{{_id}}-descr" class="ui5-hidden-text">{{valueStateText}}</span>
 	{{/if}}
+
+	<slot name="formSupport"></slot>
 </div>

package/src/ColorPalette.hbs

@@ -6,15 +6,15 @@
 >
 	{{#if this.showDefaultColor}}
 		<div class="ui5-cp-default-color-button-wrapper">
-			<ui5-button
+			<ui5-button 
 				class="ui5-cp-default-color-button"
-				design="Transparent"
+				design="Transparent" 
 				@click={{_onDefaultColorClick}}
 				@keydown={{_onDefaultColorKeyDown}}>{{colorPaletteDefaultColorText}}</ui5-button>
 			<div class="ui5-cp-separator"></div>
 		</div>
 	{{/if}}
-	<div class="ui5-cp-item-container"
+	<div class="ui5-cp-item-container" 
 		role="region"
 		aria-label="{{colorContainerLabel}}"
 		@keydown="{{_onColorContainerKeyDown}}"
@@ -50,5 +50,3 @@
 		</div>
 	{{/if}}
 </div>
-
-{{>include "./ColorPaletteDialog.hbs"}}

package/src/ColorPaletteDialog.hbs

@@ -1,4 +1,3 @@
-{{#if _showMoreColors}}
 <ui5-dialog
     header-text="{{moreColorsFeature.colorPaletteDialogTitle}}"
 >
@@ -17,4 +16,3 @@
         >{{moreColorsFeature.colorPaletteCancelButton}}</ui5-button>
     </div>
 </ui5-dialog>
-{{/if}}

package/src/ColorPalettePopover.hbs

@@ -1,15 +1,14 @@
 <ui5-responsive-popover
 	hide-arrow
 	content-only-on-desktop
-	placement="Bottom"
+	placement-type="Bottom"
 	?open="{{_open}}"
 	.opener="{{opener}}"
-	@ui5-close="{{onAfterClose}}"
+	@ui5-after-close="{{onAfterClose}}"
 >
 	<div slot="header" class="ui5-cp-header">
 		<ui5-title
 			level="H5"
-			wrapping-type="None"
 		>{{_colorPaletteTitle}}</ui5-title>
 	</div>
 	<div>

package/src/ColorPicker.hbs

@@ -66,7 +66,7 @@
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
                 accessible-name="{{redInputLabel}}"
-                value="{{_value.r}}"
+                value="{{_color.r}}"
             ></ui5-input>
             <ui5-label>R</ui5-label>
         </div>
@@ -76,7 +76,7 @@
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
                 accessible-name="{{greenInputLabel}}"
-                value="{{_value.g}}"
+                value="{{_color.g}}"
             ></ui5-input>
             <ui5-label>G</ui5-label>
         </div>
@@ -86,7 +86,7 @@
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
                 accessible-name="{{blueInputLabel}}"
-                value="{{_value.b}}"
+                value="{{_color.b}}"
             ></ui5-input>
             <ui5-label>B</ui5-label>
         </div>

package/src/ComboBox.hbs

@@ -19,16 +19,17 @@
 		@focusout="{{_focusout}}"
 		aria-expanded="{{open}}"
 		role="combobox"
-		aria-haspopup="dialog"
+		aria-haspopup="listbox"
 		aria-autocomplete="both"
 		aria-describedby="value-state-description"
 		aria-label="{{ariaLabelText}}"
 		aria-required="{{required}}"
+		autocomplete="off"
 		data-sap-focus-ref
 	/>
 
 	{{#if _effectiveShowClearIcon}}
-		<div @click={{_clear}} class="ui5-input-clear-icon-wrapper inputIcon" tabindex="-1">
+		<div @click={{_clear}} class="ui5-input-clear-icon-wrapper" input-icon tabindex="-1">
 			<ui5-icon tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
 		</div>
 	{{/if}}
@@ -42,12 +43,10 @@
 			name="slim-arrow-down"
 			slot="icon"
 			tabindex="-1"
-			class="inputIcon"
+			input-icon
 			?pressed="{{_iconPressed}}"
 			@click="{{_arrowClick}}"
 			accessible-name="{{_iconAccessibleNameText}}"
 		></ui5-icon>
 	{{/unless}}
 </div>
-
-{{>include "./ComboBoxPopover.hbs"}}

package/src/ComboBoxPopover.hbs

@@ -1,15 +1,15 @@
 <ui5-responsive-popover
 	class="{{classes.popover}}"
 	hide-arrow
-	placement="Bottom"
-	horizontal-align="Start"
-	prevent-initial-focus
+	placement-type="Bottom"
+	horizontal-align="Left"
 	style="{{styles.suggestionsPopover}}"
-	@ui5-open={{_afterOpenPopover}}
-	@ui5-close={{_afterClosePopover}}
+	@ui5-after-open={{_afterOpenPopover}}
+	@ui5-after-close={{_afterClosePopover}}
 >
 	<ui5-busy-indicator
 		?active={{loading}}
+		size="Medium"
 		class="ui5-combobox-busy"
 	>
 	</ui5-busy-indicator>
@@ -43,7 +43,7 @@
 				</ui5-input>
 			</div>
 		</div>
-
+		
 		{{#if hasValueStateText}}
 			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
@@ -67,11 +67,12 @@
 		@ui5-item-click={{_selectItem}}
 		@ui5-item-focused={{_onItemFocus}}
 		@mousedown={{_itemMousedown}}
-		selection-mode="Single"
+		mode="SingleSelect"
+		accessible-role="listbox"
 	>
 		{{#each _filteredItems}}
 			{{#if isGroupItem}}
-				<ui5-li-group-header ?focused={{this.focused}}>{{ this.text }}</ui5-li-group-header>
+				<ui5-li-groupheader ?focused={{this.focused}}>{{ this.text }}</ui5-li-groupheader>
 			{{else}}
 				{{> listItem}}
 			{{/if}}
@@ -92,12 +93,12 @@
 {{#if shouldOpenValueStateMessagePopover}}
 	<ui5-popover
 		skip-registry-update
-		prevent-initial-focus
+		_disable-initial-focus
 		prevent-focus-restore
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
-		placement="Bottom"
+		placement-type="Bottom"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
@@ -127,6 +128,7 @@
 			?selected={{this.selected}}
 			?focused={{this.focused}}
 			data-ui5-stable="{{this.stableDomRef}}"
+			accessible-role="option"
 	>
 		{{this.text}}
 	</ui5-li>

package/src/DatePicker.hbs

@@ -1,2 +1,45 @@
-{{>include "./DatePickerInput.hbs"}}
-{{>include "./DatePickerPopover.hbs"}}
+<div
+		class="ui5-date-picker-root"
+		style="{{styles.main}}"
+>
+	{{! INPUT}}
+	<ui5-input
+			id="{{_id}}-inner"
+			class="ui5-date-picker-input"
+			placeholder="{{_placeholder}}"
+			type="{{type}}"
+			value="{{value}}"
+			?disabled="{{disabled}}"
+			?required="{{required}}"
+			?readonly="{{readonly}}"
+			value-state="{{valueState}}"
+			data-sap-focus-ref
+			._inputAccInfo ="{{accInfo}}"
+			@ui5-change="{{_onInputChange}}"
+			@ui5-input="{{_onInputInput}}"
+			@ui5-submit="{{_onInputSubmit}}"
+			@keydown="{{_onkeydown}}"
+	>
+
+		{{#if valueStateMessage.length}}
+			<slot name="valueStateMessage" slot="valueStateMessage"></slot>
+		{{/if}}
+
+		{{#unless readonly}}
+			<ui5-icon
+				slot="icon"
+				name="{{openIconName}}"
+				tabindex="-1"
+				accessible-name="{{openIconTitle}}"
+				accessible-role="button"
+				aria-hidden="{{_ariaHidden}}"
+				show-tooltip
+				@click="{{togglePicker}}"
+				input-icon
+				?pressed="{{_isPickerOpen}}"
+			></ui5-icon>
+		{{/unless}}
+	</ui5-input>
+
+	<slot name="formSupport"></slot>
+</div>

package/src/DatePickerPopover.hbs

@@ -1,15 +1,13 @@
 <ui5-responsive-popover
 	id="{{_id}}-responsive-popover"
-	.opener={{this}}
-	?open="{{open}}"
 	allow-target-overlap
-	placement="Bottom"
-	horizontal-align="Start"
+	placement-type="Bottom"
+	horizontal-align="Left"
+	accessible-name="{{pickerAccessibleName}}"
 	hide-arrow
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"
-	@ui5-close="{{onResponsivePopoverAfterClose}}"
-	@ui5-before-open="{{onResponsivePopoverBeforeOpen}}"
+	@ui5-after-close="{{onResponsivePopoverAfterClose}}"
 >
 	{{#if showHeader}}
 		{{> header}}
@@ -30,7 +28,7 @@
 				class="ui5-responsive-popover-close-btn"
 				icon="decline"
 				design="Transparent"
-				@click="{{_togglePicker}}"
+				@click="{{closePicker}}"
 			>
 			</ui5-button>
 		</div>
@@ -47,7 +45,7 @@
 		.selectionMode="{{_calendarSelectionMode}}"
 		.minDate="{{minDate}}"
 		.maxDate="{{maxDate}}"
-		@ui5-selection-change="{{onSelectedDatesChange}}"
+		@ui5-selected-dates-change="{{onSelectedDatesChange}}"
 		@ui5-show-month-view="{{onHeaderShowMonthPress}}"
 		@ui5-show-year-view="{{onHeaderShowYearPress}}"
 		?hide-week-numbers="{{hideWeekNumbers}}"

package/src/DateTimePickerPopover.hbs

@@ -24,7 +24,7 @@
 			.selectionMode="{{_calendarSelectionMode}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
-			@ui5-selection-change="{{onSelectedDatesChange}}"
+			@ui5-selected-dates-change="{{onSelectedDatesChange}}"
 			@ui5-show-month-view="{{onHeaderShowMonthPress}}"
 			@ui5-show-year-view="{{onHeaderShowYearPress}}"
 			?hide-week-numbers="{{hideWeekNumbers}}"

package/src/FileUploader.hbs

@@ -1,3 +1,4 @@
+
 <div class="ui5-file-uploader-root"
 	@mouseover="{{_onmouseover}}"
 	@mouseout="{{_onmouseout}}"
@@ -22,16 +23,20 @@
 		{{/unless}}
 		<slot></slot>
 	</div>
-	<input
-		type="file"
-		title="{{titleText}}"
-		accept="{{accept}}"
-		?multiple="{{multiple}}"
-		?disabled="{{disabled}}"
-		@change="{{_onChange}}"
-		aria-hidden="true"
-		tabindex="-1"
-	>
+	{{#if _keepInputInShadowDOM}}
+		<input
+			type="file"
+			title="{{titleText}}"
+			accept="{{accept}}"
+			?multiple="{{multiple}}"
+			?disabled="{{disabled}}"
+			@change="{{_onChange}}"
+			aria-hidden="true"
+			tabindex="-1"
+		>
+	{{else}}
+		<slot name="formSupport">
+			{{!-- input for forms will be placed here on IE, Edge and Firefox --}}
+		</slot>
+	{{/if}}
 </div>
-
-{{>include "./FileUploaderPopover.hbs"}}

package/src/FileUploaderPopover.hbs

@@ -1,11 +1,11 @@
 <ui5-popover
 	skip-registry-update
-	prevent-initial-focus
+	_disable-initial-focus
 	prevent-focus-restore
 	hide-arrow
 	class="ui5-valuestatemessage-popover"
-	placement="Bottom"
-	horizontal-align="Start"
+	placement-type="Bottom"
+	horizontal-align="Left"
 >
 	<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 		{{#if _valueStateMessageInputIcon}}

package/src/Icon.hbs

@@ -10,6 +10,8 @@
 	aria-label="{{effectiveAccessibleName}}"
 	aria-hidden={{effectiveAriaHidden}}
 	xmlns="http://www.w3.org/2000/svg"
+	@focusin={{_onfocusin}}
+	@focusout={{_onfocusout}}
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
 >

package/src/Input.hbs

@@ -6,8 +6,7 @@
 	<div class="ui5-input-content">
 		{{> preContent}}
 
-		<input 
-			id="inner"
+		<input id="{{_id}}-inner"
 			class="ui5-input-inner"
 			style="{{styles.innerInput}}"
 			type="{{inputType}}"
@@ -28,6 +27,7 @@
 			aria-expanded="{{accInfo.input.ariaExpanded}}"
 			aria-label="{{accInfo.input.ariaLabel}}"
 			aria-required="{{required}}"
+			autocomplete="off"
 			@input="{{_handleInput}}"
 			@change="{{_handleChange}}"
 			@keydown="{{_onkeydown}}"
@@ -41,7 +41,7 @@
 		/>
 
 		{{#if _effectiveShowClearIcon}}
-			<div @click={{_clear}} @mousedown={{_iconMouseDown}} class="ui5-input-clear-icon-wrapper inputIcon" tabindex="-1">
+			<div @click={{_clear}} @mousedown={{_iconMouseDown}} class="ui5-input-clear-icon-wrapper" input-icon tabindex="-1">
 				<ui5-icon tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
 			</div>
 		{{/if}}
@@ -58,24 +58,24 @@
 
 		{{> postContent }}
 
-		{{#if showSuggestions}}
-			<span id="suggestionsText" class="ui5-hidden-text">{{suggestionsText}}</span>
-			<span id="selectionText" class="ui5-hidden-text" aria-live="polite" role="status"></span>
-			<span id="suggestionsCount" class="ui5-hidden-text" aria-live="polite">{{availableSuggestionsCount}}</span>
+		{{#if _effectiveShowSuggestions}}
+			<span id="{{_id}}-suggestionsText" class="ui5-hidden-text">{{suggestionsText}}</span>
+			<span id="{{_id}}-selectionText" class="ui5-hidden-text" aria-live="polite" role="status"></span>
+			<span id="{{_id}}-suggestionsCount" class="ui5-hidden-text" aria-live="polite">{{availableSuggestionsCount}}</span>
 		{{/if}}
 
 		{{#if accInfo.input.ariaDescription}}
-			<span id="descr" class="ui5-hidden-text">{{accInfo.input.ariaDescription}}</span>
+			<span id="{{_id}}-descr" class="ui5-hidden-text">{{accInfo.input.ariaDescription}}</span>
 		{{/if}}
 
 		{{#if hasValueState}}
-			<span id="valueStateDesc" class="ui5-hidden-text">{{ariaValueStateHiddenText}}</span>
+			<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{ariaValueStateHiddenText}}</span>
 		{{/if}}
 	</div>
+
+	<slot name="formSupport"></slot>
 </div>
 
 
 {{#*inline "preContent"}}{{/inline}}
-{{#*inline "postContent"}}{{/inline}}
-
-{{>include "./InputPopover.hbs"}}
+{{#*inline "postContent"}}{{/inline}}