@ui5/webcomponents 1.22.0-rc.2 → 1.22.0-rc.3

package/src/Breadcrumbs.hbs

@@ -22,28 +22,16 @@
 				href="{{this.href}}"
 				target="{{this.target}}"
 				id="{{this._id}}-link"
+				design="{{this._linkDesign}}"
 				accessible-name="{{this._accessibleNameText}}"
 				data-ui5-stable="{{this.stableDomRef}}">
 				{{this.innerText}}
 			</ui5-link>
 
-			<span class="ui5-breadcrumbs-separator" aria-hidden="true"></span>
+			{{#unless this._isCurrentPageItem}}
+				<span class="ui5-breadcrumbs-separator" aria-hidden="true"></span>
+			{{/unless}}
 		</li>
 		{{/each}}
-
-		{{#if _endsWithCurrentLocationLabel}}
-			<li class="ui5-breadcrumbs-current-location" @click="{{../_onLabelPress}}">
-
-				<span aria-current="page"
-					aria-label="{{_currentLocationAccName}}"
-					role="link"
-					id="{{this._id}}-labelWrapper">
-
-					<ui5-label>
-						{{_currentLocationText}}
-					</ui5-label>
-				</span>
-			</li>
-		{{/if}}
 	</ol>
 </nav>

package/src/DateTimePickerPopover.hbs

@@ -40,17 +40,14 @@
 		{{/unless}}
 
 		{{#if showTimeView}}
-			<ui5-time-selection
-					id="{{_id}}-time-sel"
-					class="ui5-dt-time {{classes.dateTimeView}}"
-					value="{{_timeSelectionValue}}"
-					format-pattern="{{_formatPattern}}"
-					._currentSlider="{{_currentTimeSlider}}"
-					._calendarType="{{_primaryCalendarType}}"
-					@ui5-change="{{onTimeSelectionChange}}"
-					@ui5-slider-change="{{onTimeSliderChange}}"
-					._density="{{_density}}"
-			></ui5-time-selection>
+			<ui5-time-selection-clocks
+				id="{{_id}}-time-sel"
+				class="ui5-dt-time {{classes.dateTimeView}}"
+				format-pattern="{{_formatPattern}}"
+				value="{{_timeSelectionValue}}"
+				@ui5-change="{{onTimeSelectionChange}}"
+				._calendarType="{{_primaryCalendarType}}"
+			></ui5-time-selection-clocks>
 		{{/if}}
 	</div>
 {{/inline}}

package/src/TimeSelectionClocks.hbs

@@ -5,6 +5,7 @@
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
 	@focusin={{_clocksFocusIn}}
+	@focusout={{_clocksFocusOut}}
 	format-pattern="{{formatPattern}}"
 >
 	<div
@@ -16,13 +17,14 @@
 		{{/if}}
 		<ui5-toggle-spin-button
 			id="{{../_id}}_button_{{this.entity}}"
+			data-sap-clock="{{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}}"
+			?focused="{{this.focused}}"
 			@focusin="{{../_buttonFocusIn}}"
 		>{{this.stringValue}}</ui5-toggle-spin-button>
 	{{/each}}
@@ -31,6 +33,8 @@
 		<ui5-segmented-button
 			id="{{_id}}_AmPm"
 			@click={{_periodChange}}
+			@focusin={{_amPmFocusIn}}
+			@focusout={{_amPmFocusOut}}
 		>
 		{{#each _periods}}
     		<ui5-segmented-button-item

package/src/Toast.hbs

@@ -1,14 +1,6 @@
 {{#if domRendered}}
-	<div class="ui5-toast-root"
-		role="alert"
-		style="{{styles.root}}"
-		tabindex="{{_tabindex}}"
-		@focusin="{{_onfocusin}}"
-		@focusout="{{_onfocusout}}"
-		@keydown="{{_onkeydown}}"
-		@mouseover="{{_onmouseover}}"
-		@mouseleave="{{_onmouseleave}}"
-		@transitionend="{{_ontransitionend}}">
+	<div class="ui5-toast-root" role="alert" tabindex="{{_tabindex}}"
+	>
 		<bdi>
 			<slot></slot>
 		</bdi>

package/src/themes/Breadcrumbs.css

@@ -6,7 +6,7 @@
 .ui5-breadcrumbs-root {
     white-space: nowrap;
     outline: none;
-    margin: 0 0 0.5rem 0;
+    margin:var(--_ui5_breadcrumbs_margin);
 }
 
 .ui5-breadcrumbs-root > ol {
@@ -22,21 +22,6 @@
     display: inline;
 }
 
-.ui5-breadcrumbs-current-location {
-    min-width: 1%;
-    -webkit-flex: 1;
-    -webkit-box-flex: 1;
-    flex: 1 1 auto;
-    /* Fix extra height in ul -> li element */
-    font-size: 0;
-    align-self: center;
-}
-
-.ui5-breadcrumbs-current-location > span:focus {
-    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-    border-radius: var(--_ui5_breadcrumbs_current_location_focus_border_radius);
-}
-
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
     display: none
 }

package/src/themes/DateTimePickerPopover.css

@@ -68,10 +68,19 @@
 /* Phone mode */
 /* TODO: Improve that layouting */
 .ui5-dt-picker-content--phone.ui5-dt-picker-content {
-	min-width: auto;
+	min-width: 20rem;
 	height: calc(100% - 4rem);
 }
 
+.ui5-dt-picker-content--phone.ui5-dt-picker-content [ui5-time-selection-clocks] {
+	height: var(--_ui5_datetime_timeview_phonemode_clocks_width);
+	width: auto;
+}
+
+.ui5-dt-picker-content--phone.ui5-dt-picker-content [ui5-calendar] {
+	margin-bottom: var(--_ui5_datetime_dateview_phonemode_margin_bottom);
+}
+
 .ui5-dt-picker-content--phone .ui5-dt-cal {
 	width: 100%;
 }

package/src/themes/PopupStaticAreaStyles.css

@@ -1,8 +1,7 @@
 .ui5-block-layer {
 	display: none;
 	position: fixed;
-	background-color: var(--sapBlockLayer_Background);
-	opacity: 0.6;
+	background-color: var(--_ui5_popup_block_layer_background);
 	top: -500px;
 	left: -500px;
 	right: -500px;

package/src/themes/PopupsCommon.css

@@ -17,6 +17,7 @@
     flex-direction: column;
     overflow: hidden;
     outline: none;
+    justify-content: space-between;
 }
 
 .ui5-popup-root .ui5-popup-header-root {
@@ -27,6 +28,7 @@
 
 .ui5-popup-content {
     color: var(--sapTextColor);
+    flex: auto;
 }
 
 .ui5-popup-footer-root {

package/src/themes/SplitButton.css

@@ -32,7 +32,7 @@
 
 :host([active-arrow-button][design="Emphasized"]) .ui5-split-arrow-button,
 :host([design="Emphasized"]) .ui5-split-arrow-button[active] {
-	background-color: var(--sapButton_Selected_Background);
+	background-color: var(--sapButton_Emphasized_Active_Background);
 	border: 0.0625rem solid var(--sapButton_Emphasized_Active_BorderColor);
 }
 
@@ -41,7 +41,7 @@
 :host([design="Transparent"]) .ui5-split-arrow-button[active],
 :host([design="Default"]) .ui5-split-arrow-button[active],
 .ui5-split-arrow-button[active], .ui5-split-arrow-button[active]:hover {
-	background-color: var(--sapButton_Selected_Background);
+	background-color: var(--sapButton_Active_Background);
 	border: 0.0625rem solid var(--sapButton_Lite_Active_BorderColor);
 	color: var(--sapButton_Active_TextColor);
 }
@@ -317,7 +317,7 @@
 
 .ui5-split-text-button[active][design="Emphasized"] {
 	color: var(--sapButton_Emphasized_Active_TextColor);
-	background-color: var(--sapButton_Selected_Background);
+	background-color: var(--sapButton_Emphasized_Active_Background);
 }
 
 :host([design="Emphasized"][active-arrow-button]) .ui5-split-arrow-button,

package/src/themes/TabInStrip.css

@@ -79,7 +79,7 @@
 	position: relative;
 	width: 0.0625rem;
 	right: -0.0625rem;
-	height: 1rem;
+	height: 0.625rem;
 	background: var(--sapTextColor);
 	margin-inline-start: 0.0625rem;
 	z-index: 2;

package/src/themes/TimePickerPopover.css

@@ -1,3 +1,7 @@
+.ui5-time-picker-popover {
+	width: 20rem;
+}
+
 .ui5-time-picker-footer {
 	height: fit-content;
 	display: flex;

package/src/themes/TimeSelectionClocks.css

@@ -1,8 +1,7 @@
 .ui5-time-picker-tsc-container {
 	margin: 0 auto;
 	box-sizing: border-box;
-	width: 20rem;
-	height: 23.75rem;
+	width: 100%;
 	padding: 1rem;
 	text-align: center;
 }
@@ -16,7 +15,7 @@
 	justify-content: center;
 	align-items: center;
 	padding-bottom: 1rem;
-	width: 18rem;
+	width: 100%;
 }
 
 .ui5-time-picker-tsc-buttons span[separator] {
@@ -31,7 +30,6 @@
 .ui5-time-picker-tsc-clocks {
     display: block;
     text-align: center;
-    width: 18rem;
-    height: 18rem;
+    width: 100%;
     touch-action: none;
 }

package/src/themes/Toast.css

@@ -2,91 +2,92 @@
 	font-family: "72override", var(--sapFontFamily);
 	color: var(--sapList_TextColor);
 	font-size: var(--sapFontSize);
-}
-
-:host([open]) .ui5-toast-root {
-	display: block;
-}
-
-.ui5-toast-root {
 	position: fixed;
 	display: none;
 	box-sizing: border-box;
 	max-width: 15rem;
 	overflow: hidden;
-	padding: 1rem;
 	background: var(--_ui5_toast_background);
 	box-shadow: var(--_ui5_toast_shadow);
 	border-radius: var(--sapElement_BorderCornerRadius);
 	transition-property: opacity;
 	opacity: 1;
-	font-family: inherit;
-	color: inherit;
-	font-weight: inherit;
-	font-size: inherit;
 	word-wrap: break-word;
 	text-align: center;
 	text-overflow: ellipsis;
 	white-space: pre-line;
+	padding: 1rem;
+}
+
+.ui5-toast-root {
+	height: 100%;
+	width: 100%;
+	padding: 0;
+	outline: none;
+	box-sizing: border-box;
+}
+
+:host([open]) {
+	display: block;
 }
 
-:host(:not([placement])) .ui5-toast-root {
+:host(:not([placement])) {
 	bottom: var(--_ui5_toast_vertical_offset);
 	left: 50%;
 	transform: translateX(-50%);
 }
 
-:host([placement="TopStart"]) .ui5-toast-root {
+:host([placement="TopStart"]) {
 	top: var(--_ui5_toast_vertical_offset);
 	left: var(--_ui5_toast_horizontal_offset);
 }
 
-:host([placement="MiddleStart"]) .ui5-toast-root {
+:host([placement="MiddleStart"]) {
 	left: var(--_ui5_toast_horizontal_offset);
 	top: 50%;
 	transform: translateY(-50%);
 }
 
-:host([placement="BottomStart"]) .ui5-toast-root {
+:host([placement="BottomStart"]) {
 	left: var(--_ui5_toast_horizontal_offset);
 	bottom: var(--_ui5_toast_vertical_offset);
 }
 
- :host([placement="TopCenter"]) .ui5-toast-root {
+ :host([placement="TopCenter"]) {
 	top: var(--_ui5_toast_vertical_offset);
 	left: 50%;
 	transform: translateX(-50%);
 }
 
-:host([placement="MiddleCenter"]) .ui5-toast-root {
+:host([placement="MiddleCenter"]) {
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%);
 }
 
-:host([placement="BottomCenter"]) .ui5-toast-root {
+:host([placement="BottomCenter"]) {
 	bottom: var(--_ui5_toast_vertical_offset);
 	left: 50%;
 	transform: translateX(-50%);
 }
 
-:host([placement="TopEnd"]) .ui5-toast-root {
+:host([placement="TopEnd"]) {
 	right: var(--_ui5_toast_horizontal_offset);
 	top: var(--_ui5_toast_vertical_offset);
 }
 
-:host([placement="MiddleEnd"]) .ui5-toast-root {
+:host([placement="MiddleEnd"]) {
 	right: var(--_ui5_toast_horizontal_offset);
 	top: 50%;
 	transform: translateY(-50%);
 }
 
-:host([placement="BottomEnd"]) .ui5-toast-root {
+:host([placement="BottomEnd"]) {
 	right: var(--_ui5_toast_horizontal_offset);
 	bottom: var(--_ui5_toast_vertical_offset);
 }
 
-:host([focused]) .ui5-toast-root {
+:host([focused]) {
 	outline-width: var(--sapContent_FocusWidth);
 	outline-style: var(--sapContent_FocusStyle);
 	outline-color: var(--sapContent_FocusColor);

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

@@ -0,0 +1,3 @@
+:root {
+	--_ui5_popup_block_layer_background: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 60%);
+}

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

@@ -35,6 +35,8 @@
 	--_ui5_datetime_timeview_width: 17rem;
 	--_ui5_datetime_timeview_phonemode_width: 19.5rem;
 	--_ui5_datetime_timeview_padding: 1rem;
+	--_ui5_datetime_timeview_phonemode_clocks_width: 24.5rem;
+	--_ui5_datetime_dateview_phonemode_margin_bottom: 0;
 
 	/* Dialog */
 	--_ui5_dialog_content_min_height: 2.75rem;
@@ -198,11 +200,13 @@
 	--_ui5_dp_two_calendar_item_text_padding_top: 0;
 
 	/* DateTimePicker */
-	--_ui5_datetime_picker_height: 17rem;
-	--_ui5_datetime_picker_width: 34.0625rem;
+	--_ui5_datetime_picker_height: 20.5rem;
+	--_ui5_datetime_picker_width: 35.5rem;
 	--_ui5_datetime_timeview_width: 17rem;
 	--_ui5_datetime_timeview_phonemode_width: 18.5rem;
 	--_ui5_datetime_timeview_padding: 0.5rem;
+	--_ui5_datetime_timeview_phonemode_clocks_width: 21.125rem;
+	--_ui5_datetime_dateview_phonemode_margin_bottom: 3.125rem;
 
 	/* Dialog */
 	--_ui5_dialog_content_min_height: 2.5rem;

package/src/themes/sap_belize/parameters-bundle.css

@@ -26,6 +26,7 @@
 @import "./Panel-parameters.css";
 @import "../base/Popover-parameters.css";
 @import "./PopupsCommon-parameters.css";
+@import "../base/PopupStaticAreaStyles-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "../base/RadioButton-parameters.css";
 @import "../base/RatingIndicator-parameters.css";

package/src/themes/sap_belize_hcb/parameters-bundle.css

@@ -26,6 +26,7 @@
 @import "./Panel-parameters.css";
 @import "../base/Popover-parameters.css";
 @import "./PopupsCommon-parameters.css";
+@import "../base/PopupStaticAreaStyles-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "./RadioButton-parameters.css";
 @import "../base/RatingIndicator-parameters.css";

package/src/themes/sap_belize_hcw/parameters-bundle.css

@@ -26,6 +26,7 @@
 @import "./Panel-parameters.css";
 @import "../base/Popover-parameters.css";
 @import "./PopupsCommon-parameters.css";
+@import "../base/PopupStaticAreaStyles-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "./RadioButton-parameters.css";
 @import "../base/RatingIndicator-parameters.css";

package/src/themes/sap_fiori_3/parameters-bundle.css

@@ -25,6 +25,7 @@
 @import "../base/Panel-parameters.css";
 @import "../base/Popover-parameters.css";
 @import "../base/PopupsCommon-parameters.css";
+@import "../base/PopupStaticAreaStyles-parameters.css";
 @import "../base/ProgressIndicator-parameters.css";
 @import "../base/RadioButton-parameters.css";
 @import "../base/RatingIndicator-parameters.css";

package/src/themes/sap_fiori_3_dark/parameters-bundle.css

@@ -25,6 +25,7 @@
 @import "../base/Panel-parameters.css";
 @import "../base/Popover-parameters.css";
 @import "../base/PopupsCommon-parameters.css";
+@import "../base/PopupStaticAreaStyles-parameters.css";
 @import "../base/ProgressIndicator-parameters.css";
 @import "../base/RadioButton-parameters.css";
 @import "../base/RatingIndicator-parameters.css";

package/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -27,6 +27,7 @@
 @import "./Panel-parameters.css";
 @import "../base/Popover-parameters.css";
 @import "./PopupsCommon-parameters.css";
+@import "../base/PopupStaticAreaStyles-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "./RadioButton-parameters.css";
 @import "../base/RatingIndicator-parameters.css";

package/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -27,6 +27,7 @@
 @import "./Panel-parameters.css";
 @import "../base/Popover-parameters.css";
 @import "./PopupsCommon-parameters.css";
+@import "../base/PopupStaticAreaStyles-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "./RadioButton-parameters.css";
 @import "../base/RatingIndicator-parameters.css";

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

@@ -1,3 +1,3 @@
 :root {
-	--_ui5_breadcrumbs_current_location_focus_border_radius: 0.25rem;
+	--_ui5_breadcrumbs_margin: 0 0 0.5rem 0;
 }

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

@@ -29,6 +29,7 @@
 @import "./Panel-parameters.css";
 @import "../base/Popover-parameters.css";
 @import "./PopupsCommon-parameters.css";
+@import "../base/PopupStaticAreaStyles-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "../base/RadioButton-parameters.css";
 @import "./RatingIndicator-parameters.css";

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

@@ -1,3 +1,3 @@
 :root {
-	--_ui5_breadcrumbs_current_location_focus_border_radius: 0.25rem;
+	--_ui5_breadcrumbs_margin: 0 0 0.5rem 0;
 }

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

@@ -29,6 +29,7 @@
 @import "./Panel-parameters.css";
 @import "../base/Popover-parameters.css";
 @import "./PopupsCommon-parameters.css";
+@import "../base/PopupStaticAreaStyles-parameters.css";
 @import "../sap_horizon/ProgressIndicator-parameters.css";
 @import "../base/RadioButton-parameters.css";
 @import "./RatingIndicator-parameters.css";

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

@@ -1,3 +1,3 @@
 :root {
-	--_ui5_breadcrumbs_current_location_focus_border_radius: 0.25rem;
+	--_ui5_breadcrumbs_margin: 0 0 0.5rem 0;
 }

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

@@ -1,3 +1,3 @@
 :root {
-	--_ui5_breadcrumbs_current_location_focus_border_radius: 0.25rem;
+	--_ui5_breadcrumbs_margin: 0 0 0.5rem 0;
 }

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

@@ -27,6 +27,7 @@
 @import "./Panel-parameters.css";
 @import "../base/Popover-parameters.css";
 @import "./PopupsCommon-parameters.css";
+@import "../base/PopupStaticAreaStyles-parameters.css";
 @import "./ProgressIndicator-parameters";
 @import "./RadioButton-parameters.css";
 @import "./RatingIndicator-parameters.css";

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

@@ -27,6 +27,7 @@
 @import "./Panel-parameters.css";
 @import "../base/Popover-parameters.css";
 @import "./PopupsCommon-parameters.css";
+@import "../base/PopupStaticAreaStyles-parameters.css";
 @import "../sap_horizon_hcb/ProgressIndicator-parameters";
 @import "./RadioButton-parameters.css";
 @import "./RatingIndicator-parameters.css";