@ui5/webcomponents 2.0.1 → 2.1.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.0.1",
+  "version": "2.1.0-rc.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -50,16 +50,16 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.0.1",
-    "@ui5/webcomponents-icons": "2.0.1",
-    "@ui5/webcomponents-icons-business-suite": "2.0.1",
-    "@ui5/webcomponents-icons-tnt": "2.0.1",
-    "@ui5/webcomponents-localization": "2.0.1",
-    "@ui5/webcomponents-theming": "2.0.1"
+    "@ui5/webcomponents-base": "2.1.0-rc.1",
+    "@ui5/webcomponents-icons": "2.1.0-rc.1",
+    "@ui5/webcomponents-icons-business-suite": "2.1.0-rc.1",
+    "@ui5/webcomponents-icons-tnt": "2.1.0-rc.1",
+    "@ui5/webcomponents-localization": "2.1.0-rc.1",
+    "@ui5/webcomponents-theming": "2.1.0-rc.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.0.1",
+    "@ui5/webcomponents-tools": "2.1.0-rc.1",
     "chromedriver": "^125.0.0"
   },
-  "gitHead": "9b383e20fc3b22750f92f103c54e13529992fc74"
+  "gitHead": "87939ef793d60480ba9571b194223cf5ac8ba031"
 }

package/src/ColorPalettePopover.hbs

@@ -9,7 +9,7 @@
 >
 	<div slot="header" class="ui5-cp-header">
 		<ui5-title
-			level="H5"
+			level="H1"
 			wrapping-type="None"
 		>{{_colorPaletteTitle}}</ui5-title>
 	</div>

package/src/ComboBoxPopover.hbs

@@ -55,7 +55,9 @@
 		{{#if hasValueStateText}}
 			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
+				{{#if open}}
 					{{> valueStateMessage}}
+				{{/if}}
 			</div>
 		{{/if}}
 	{{/if}}
@@ -64,7 +66,9 @@
 		{{#if hasValueStateText}}
 			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" ?focused={{_isValueStateFocused}} style="{{styles.suggestionPopoverHeader}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
+				{{#if open}}
 					{{> valueStateMessage}}
+				{{/if}}
 			</div>
 		{{/if}}
 	{{/unless}}
@@ -132,9 +136,7 @@
 	{{#if shouldDisplayDefaultValueStateMessage}}
 		{{valueStateDefaultText}}
 	{{else}}
-		{{#each valueStateMessageText}}
-			{{this}}
-		{{/each}}
+		<slot name="valueStateMessage"></slot>
 	{{/if}}
 {{/inline}}
 

package/src/Dialog.hbs

@@ -20,7 +20,7 @@
 				{{#if header.length }}
 					<slot name="header"></slot>
 				{{else}}
-					<h1 id="ui5-popup-header-text" class="ui5-popup-header-text">{{headerText}}</h1>
+					<ui5-title level="H1" id="ui5-popup-header-text" class="ui5-popup-header-text">{{headerText}}</ui5-title>
 				{{/if}}
 
 				{{#if resizable}}

package/src/Label.hbs

@@ -3,10 +3,10 @@
 	@click={{_onclick}}
 	>
 	<span class="ui5-label-text-wrapper">
-		<bdi id="{{_id}}-bdi"><slot></slot></bdi>
+		<slot></slot>
 	</span>
-	<span 
-		aria-hidden="true" 
+	<span
+		aria-hidden="true"
 		class="ui5-label-required-colon"
 		data-colon="{{_colonSymbol}}"
 	>

package/src/ListItem.hbs

@@ -28,6 +28,7 @@
 	aria-selected="{{_accInfo.ariaSelected}}"
 	aria-checked="{{_accInfo.ariaChecked}}"
 	aria-owns="{{_accInfo.ariaOwns}}"
+	aria-keyshortcuts="{{_accInfo.ariaKeyShortcuts}}"
 >
 		{{> listItemPreContent}}
 

package/src/ListItemBase.hbs

@@ -8,6 +8,7 @@
 	@keydown="{{_onkeydown}}"
 	draggable="{{movable}}"
 	@click="{{_onclick}}"
+	{{> listItemAttributes}}
 >
 	{{> listItemContent}}
 </li>
@@ -18,4 +19,7 @@
 			<span part="title" class="ui5-li-title"><slot></slot></span>
 		</div>
 	</div>
-{{/inline}}
+{{/inline}}
+
+{{#*inline "listItemAttributes"}}
+{{/inline}}

package/src/ListItemGroup.hbs

@@ -1,12 +1,21 @@
-<ul class="ui5-group-li-root" role="group">
-  {{#if hasHeader}}
-    <ui5-li-group-header ?focused="{{focused}}" part="header">
-        {{#if hasFormattedHeader}}
-          <slot name="header"></slot>
-        {{else}}
-          {{headerText}}
-        {{/if}}
-    </ui5-li-group-header>
-  {{/if}}
-  <slot></slot>
+<ul class="ui5-group-li-root"
+	role="group" 
+	@dragenter="{{_ondragenter}}"
+	@dragover="{{_ondragover}}"
+	@drop="{{_ondrop}}"
+	@dragleave="{{_ondragleave}}">
+	{{#if hasHeader}}
+		<ui5-li-group-header ?focused="{{focused}}" part="header">
+			{{#if hasFormattedHeader}}
+			<slot name="header"></slot>
+			{{else}}
+			{{headerText}}
+			{{/if}}
+		</ui5-li-group-header>
+	{{/if}}
+	<slot></slot>
+	<ui5-drop-indicator
+		orientation="Horizontal"
+		.ownerReference="{{this}}"
+	></ui5-drop-indicator>
 </ul>

package/src/MenuItem.hbs

@@ -23,7 +23,11 @@
 	{{else if hasEndContent}}
 		<slot name="endContent"></slot>
 	{{else if additionalText}}
-		<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+		<span
+			part="additional-text"
+			class="ui5-li-additional-text"
+			aria-hidden="{{_accInfo.ariaHidden}}"
+		>{{additionalText}}</span>
 	{{/if}}
 
 {{/inline}}

package/src/MultiComboBoxPopover.hbs

@@ -53,7 +53,9 @@
 		{{#if hasValueStateMessage}}
 			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-				{{> valueStateMessage}}
+				{{#if open}}
+					{{> valueStateMessage}}
+				{{/if}}
 			</div>
 		{{/if}}
 
@@ -64,7 +66,9 @@
 		{{#if hasValueStateMessage}}
 			<div slot="header" @keydown="{{_onListHeaderKeydown}}" tabindex="0" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.popoverValueStateMessage}}>
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-				{{> valueStateMessage}}
+				{{#if open}}
+					{{> valueStateMessage}}
+				{{/if}}			
 			</div>
 		{{/if}}
 
@@ -130,7 +134,9 @@
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-			{{> valueStateMessage}}
+			{{#if valueStateOpen}}
+				{{> valueStateMessage}}
+			{{/if}}
 		</div>
 	</ui5-popover>
 {{/if}}
@@ -139,9 +145,7 @@
 	{{#if shouldDisplayDefaultValueStateMessage}}
 		{{valueStateDefaultText}}
 	{{else}}
-		{{#each valueStateMessageText}}
-			{{this}}
-		{{/each}}
+		<slot name="valueStateMessage"></slot>
 	{{/if}}
 {{/inline}}
 

package/src/Option.hbs

@@ -12,4 +12,8 @@
 			{{/if}}
 		</div>
 	</div>
-{{/inline}}
+{{/inline}}
+
+{{#*inline "listItemAttributes"}}
+	title="{{tooltip}}"
+{{/inline}}

package/src/OptionCustom.hbs

@@ -3,3 +3,7 @@
 {{#*inline "listItemContent"}}
 	<slot></slot>
 {{/inline}}
+
+{{#*inline "listItemAttributes"}}
+	title="{{tooltip}}"
+{{/inline}}

package/src/Popover.hbs

@@ -8,7 +8,7 @@
 			{{#if header.length }}
 				<slot name="header"></slot>
 			{{else}}
-				<h1 class="ui5-popup-header-text">{{headerText}}</h1>
+				<ui5-title level="H1" class="ui5-popup-header-text">{{headerText}}</ui5-title>
 			{{/if}}
 		</header>
 	{{/if}}

package/src/Popup.hbs

@@ -5,7 +5,6 @@
 	style="{{styles.root}}"
 	class="{{classes.root}}"
 	role="{{_role}}"
-	tabindex="-1"
 	aria-modal="{{_ariaModal}}"
 	aria-label="{{_ariaLabel}}"
 	aria-labelledby="{{_ariaLabelledBy}}"

package/src/ResponsivePopover.hbs

@@ -22,7 +22,7 @@
 				<div class="{{classes.header}}" slot="header">
 					{{#if headerText }}
 						<ui5-title
-							level="H2"
+							level="H1"
 							wrapping-type="None"
 							class="ui5-popup-header-text ui5-responsive-popover-header-text"
 						>

package/src/TabInOverflow.hbs

@@ -3,8 +3,8 @@
 	class="{{this.overflowClasses}}"
 	style="{{this._forcedStyleInOverflow}}"
 	type="{{this.overflowState}}"
-	aria-disabled="{{this.effectiveDisabled}}"
-	aria-selected="{{this.effectiveSelected}}"
+	disabled="{{this.effectiveDisabled}}"
+	?selected="{{this.selected}}"
 	?movable="{{this.movable}}"
 	.realTabReference="{{this}}"
 >

package/src/Tag.hbs

@@ -21,7 +21,7 @@
 	{{/if}}
 	<span class="ui5-hidden-text">{{tagDescription}}</span>
 	{{#if hasText}}
-		<span class="ui5-tag-text"><bdi><slot></slot></bdi></span>
+		<span class="ui5-tag-text"><slot></slot></span>
 	{{/if}}
 {{/inline}}
 

package/src/TextAreaPopover.hbs

@@ -18,9 +18,7 @@
 
 {{#*inline "valueStateMessage"}}
 	{{#if hasCustomValueState}}
-		{{#each valueStateMessageText}}
-			{{this}}
-		{{/each}}
+		<slot name="valueStateMessage"></slot>
 	{{else}}
 		{{valueStateDefaultText}}
 	{{/if}}

package/src/TimePicker.hbs

@@ -8,6 +8,7 @@
 			placeholder="{{_placeholder}}"
 			?disabled="{{disabled}}"
 			?readonly="{{readonly}}"
+			?required="{{required}}"
 			value-state="{{valueState}}"
 			._inputAccInfo="{{accInfo}}"
 			data-sap-focus-ref

package/src/Title.hbs

@@ -4,7 +4,7 @@
 				{{> titleInner}}
 		</h1>
 {{/if}}
-		
+
 {{#if h2}}
 		<h2
 			class="ui5-title-root">

package/src/TokenizerPopover.hbs

@@ -16,7 +16,7 @@
 		<div slot="header" class="ui5-responsive-popover-header">
 			<div class="row">
 				<ui5-title
-					level="H5"
+					level="H1"
 					wrapping-type="None"
 					class="ui5-responsive-popover-header-text"
 				>

package/src/themes/BusyIndicator.css

@@ -2,6 +2,10 @@
 	display: inline-block;
 }
 
+:host {
+	border-radius: unset;
+}
+
 :host([_is-busy]) {
 	color: var(--_ui5_busy_indicator_color);
 }
@@ -73,6 +77,7 @@
 	position: relative;
 	background-color: inherit;
 	height: inherit;
+	border-radius: inherit;
 }
 
 .ui5-busy-indicator-busy-area {
@@ -87,6 +92,7 @@
 	align-items: center;
 	background-color: inherit;
 	flex-direction: column;
+	border-radius: inherit;
 }
 
 :host(:not(:empty)) .ui5-busy-indicator-busy-area {

package/src/themes/Label.css

@@ -52,12 +52,12 @@
 	line-height: 0;
 }
 
-:host([required][show-colon]) .ui5-label-required-colon:after {
-	margin-inline-start: .125rem;
+.ui5-label-text-wrapper {
+	padding-inline-end: 0.075rem; /*1.2px - fix for last letter clipping issue when style is italic*/
 }
 
-bdi {
-	padding-right: 0.075rem; /*1.2px - fix for last letter clipping issue when style is italic*/
+:host([required][show-colon]) .ui5-label-required-colon:after {
+	margin-inline-start: .125rem;
 }
 
 :host([show-colon]) .ui5-label-required-colon {

package/src/themes/ListItemGroup.css

@@ -7,6 +7,10 @@
 }
 
 .ui5-group-li-root {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-sizing: border-box;
     padding: 0;
     margin: 0;
     list-style-type: none;

package/src/themes/PopupsCommon.css

@@ -43,8 +43,6 @@
 .ui5-popup-footer-root,
 :host([header-text]) .ui5-popup-header-text {
     margin: 0;
-    font-size: 1rem;
-    font-family: "72override", var(--_ui5_popup_header_font_family);
     display: flex;
     justify-content: center;
     align-items: center;

package/src/themes/Tag.css

@@ -9,6 +9,7 @@
 	font-family: var(--sapFontBoldFamily);
 	font-weight: var(--_ui5-tag-font-weight);
 	letter-spacing: var(--_ui5-tag-letter-spacing);
+	line-height: var(--_ui5-tag-height);
 }
 
 .ui5-tag-root {
@@ -18,10 +19,8 @@
 	width: 100%;
 	min-width: 1.125em;
 	max-width: 100%;
-	min-height: var(--_ui5-tag-height);
-	height: auto;
 	box-sizing: border-box;
-	padding: 0 0.25rem;
+	padding: var(--_ui5-tag-text-padding);
 	border: 0.0625rem solid;
 	border-radius: var(--sapButton_BorderCornerRadius);
 	white-space: normal;
@@ -48,7 +47,6 @@
 
 :host([wrapping-type="None"]) .ui5-tag-root {
 	white-space: nowrap;
-	height: var(--_ui5-tag-height);
 }
 
 :host([_icon-only]) .ui5-tag-root {
@@ -71,7 +69,6 @@
 ::slotted([ui5-icon]) {
 	width: var(--_ui5-tag-icon-width);
 	min-width: var(--_ui5-tag-icon-width);
-	height:  calc(var(--_ui5-tag-height) - 0.125rem); /* remove width of the border since tag root is with box-sizing:border-box*/
 	color: inherit;
 	pointer-events: none;
 	align-self: flex-start;
@@ -513,17 +510,14 @@
 }
 
 /* Sizes */
-:host([size="L"]) .ui5-tag-root{
-	font-size: var(--_ui5-tag-font-size_size_l);
+:host([size="L"]) {
+	font-family: var(--sapFontSemiboldDuplexFamily);
+	line-height: var(--_ui5-tag-height_size_l);
 }
 
 :host([size="L"]) .ui5-tag-root {
+	font-size: var(--_ui5-tag-font-size_size_l);
 	min-width: var(--_ui5-tag-min-width_size_l);
-    height: var(--_ui5-tag-height_size_l);
-}
-
-:host([size="L"]) .ui5-tag-root .ui5-tag-text {
-	height: var(--_ui5-tag-text-height_size_l);
 	padding: var(--_ui5-tag-text_padding_size_l);
 }
 

package/src/themes/Title.css

@@ -6,7 +6,7 @@
 :host {
 	max-width: 100%;
 	color: var(--sapGroup_TitleTextColor);
-	font-size: var(--sapFontHeader2Size);
+	font-size: var(--sapFontHeader5Size);
 	font-family: "72override", var(--sapFontHeaderFamily);
 	text-shadow: var(--sapContent_TextShadow);
 }
@@ -48,32 +48,26 @@
 	text-shadow: inherit;
 }
 
-/* Level H1 */
-:host([level="H1"]) {
+:host([size="H1"]) {
 	font-size: var(--sapFontHeader1Size);
 }
 
-/* Level H2 */
-:host([level="H2"]) {
+:host([size="H2"]) {
 	font-size: var(--sapFontHeader2Size);
 }
 
-/* Level H3 */
-:host([level="H3"]) {
+:host([size="H3"]) {
 	font-size: var(--sapFontHeader3Size);
 }
 
-/* Level H4 */
-:host([level="H4"]) {
+:host([size="H4"]) {
 	font-size: var(--sapFontHeader4Size);
 }
 
-/* Level H5 */
-:host([level="H5"]) {
+:host([size="H5"]) {
 	font-size: var(--sapFontHeader5Size);
 }
 
-/* Level H6 */
-:host([level="H6"]) {
+:host([size="H6"]) {
 	font-size: var(--sapFontHeader6Size);
 }

package/src/themes/base/PopupsCommon-parameters.css

@@ -7,7 +7,6 @@
 	--_ui5_popup_header_footer_padding_xl: 3rem;
 	--_ui5_popup_viewport_margin: 10px;
 	--_ui5_popup_header_font_weight: 400;
-	--_ui5_popup_header_font_family: var(--sapFontFamily);
 	--_ui5_popup_header_prop_header_text_alignment: flex-start;
 	--_ui5_popup_border_radius: var(--sapElement_BorderCornerRadius);
 	--_ui5_popup_header_background: var(--sapPageHeader_Background);

package/src/themes/base/Tag-parameters.css

@@ -1,7 +1,7 @@
 :root {
 	--_ui5-tag-height: 1rem;
-	--_ui5-tag-padding-inline: 0.3125em;
 	--_ui5-tag-padding-inline-icon-only: 0.1875rem;
+	--_ui5-tag-text-padding: 0 0.25rem;
 	--_ui5-tag-text-transform: uppercase;
 	--_ui5-tag-icon-width: 0.75rem;
 	--_ui5-tag-icon-gap: 0.125rem;
@@ -111,7 +111,7 @@
 	--ui5-tag-set2-color-scheme-10-active-border: var(--sapIndicationColor_10_Active_BorderColor);
 
 	/* Sizes */
-	--_ui5-tag-height_size_l: 1.75rem;
+	--_ui5-tag-height_size_l: 1.5rem;
 	--_ui5-tag-min-width_size_l: 1.75rem;
 	--_ui5-tag-font-size_size_l: 1.25rem;
 	--_ui5-tag-icon_min_width_size_l: 1.25rem;

package/src/themes/sap_horizon/PopupsCommon-parameters.css

@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }

package/src/themes/sap_horizon/Tag-parameters.css

@@ -1,8 +1,7 @@
 @import "../base/Tag-parameters.css";
 
 :root {
-	--_ui5-tag-height: 1.375rem;
-	--_ui5-tag-padding-inline: 0.375em;
+	--_ui5-tag-text-padding: 0.1875rem 0.25rem;
 	--_ui5-tag-padding-inline-icon-only: 0.313rem;
 	--_ui5-tag-text-transform: none;
 	--_ui5-tag-icon-gap: 0.25rem;

package/src/themes/sap_horizon_dark/PopupsCommon-parameters.css

@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }

package/src/themes/sap_horizon_dark/Tag-parameters.css

@@ -1,8 +1,7 @@
 @import "../base/Tag-parameters.css";
 
 :root {
-	--_ui5-tag-height: 1.375rem;
-	--_ui5-tag-padding-inline: 0.375em;
+	--_ui5-tag-text-padding: 0.1875rem 0.25rem;
 	--_ui5-tag-padding-inline-icon-only: 0.313rem;
 	--_ui5-tag-text-transform: none;
 	--_ui5-tag-icon-gap: 0.25rem;

package/src/themes/sap_horizon_dark_exp/PopupsCommon-parameters.css

@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }

package/src/themes/sap_horizon_exp/PopupsCommon-parameters.css

@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }

package/src/themes/sap_horizon_hcb/PopupsCommon-parameters.css

@@ -1,7 +1,6 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 	--_ui5_popup_header_shadow: none;
 }

package/src/themes/sap_horizon_hcb/Tag-parameters.css

@@ -1,8 +1,7 @@
 @import "../base/Tag-parameters.css";
 
 :root {
-	--_ui5-tag-height: 1.375rem;
-	--_ui5-tag-padding-inline: 0.375em;
+	--_ui5-tag-text-padding: 0.1875rem 0.25rem;
 	--_ui5-tag-padding-inline-icon-only: 0.313rem;
 	--_ui5-tag-text-transform: none;
 	--_ui5-tag-icon-gap: 0.25rem;

package/src/themes/sap_horizon_hcb_exp/PopupsCommon-parameters.css

@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }

package/src/themes/sap_horizon_hcw/PopupsCommon-parameters.css

@@ -1,7 +1,6 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 	--_ui5_popup_header_shadow: none;
 }

package/src/themes/sap_horizon_hcw/Tag-parameters.css

@@ -1,8 +1,7 @@
 @import "../base/Tag-parameters.css";
 
 :root {
-	--_ui5-tag-height: 1.375rem;
-	--_ui5-tag-padding-inline: 0.375em;
+	--_ui5-tag-text-padding: 0.1875rem 0.25rem;
 	--_ui5-tag-padding-inline-icon-only: 0.313rem;
 	--_ui5-tag-text-transform: none;
 	--_ui5-tag-icon-gap: 0.25rem;

package/src/themes/sap_horizon_hcw_exp/PopupsCommon-parameters.css

@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }