@ui5/webcomponents 2.27.0-rc.2 → 2.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.27.0-rc.2",
+  "version": "2.27.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -56,22 +56,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.27.0-rc.2",
-    "@ui5/webcomponents-icons": "2.27.0-rc.2",
-    "@ui5/webcomponents-icons-business-suite": "2.27.0-rc.2",
-    "@ui5/webcomponents-icons-tnt": "2.27.0-rc.2",
-    "@ui5/webcomponents-localization": "2.27.0-rc.2",
-    "@ui5/webcomponents-theming": "2.27.0-rc.2"
+    "@ui5/webcomponents-base": "2.27.0",
+    "@ui5/webcomponents-icons": "2.27.0",
+    "@ui5/webcomponents-icons-business-suite": "2.27.0",
+    "@ui5/webcomponents-icons-tnt": "2.27.0",
+    "@ui5/webcomponents-localization": "2.27.0",
+    "@ui5/webcomponents-theming": "2.27.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.27.0-rc.2",
+    "@ui5/webcomponents-tools": "2.27.0",
     "cypress": "15.18.1",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.2.7"
   },
-  "gitHead": "ed68024790c2ca5f3eddb25055e87883f5535515"
+  "gitHead": "70f2e43117933570d92033332f2a9b33532ba94f"
 }

package/src/RatingIndicatorTemplate.tsx

@@ -18,7 +18,6 @@ export default function RatingIndicatorTemplate(this: RatingIndicator) {
 			aria-description={this._ariaDescription}
 			tabindex={this.effectiveTabIndex}
 			onFocusIn={this._onfocusin}
-			onFocusOut={this._onfocusout}
 			onClick={this._onclick}
 			onKeyDown={this._onkeydown}
 			title={this.ratingTooltip}

package/src/themes/CalendarHeader.css

@@ -44,23 +44,24 @@
 }
 
 .ui5-calheader-arrowbtn:hover {
-	background-color: var(--sapButton_Hover_Background);
-	color: var(--sapButton_Lite_TextColor);
+	background-color: var(--sapButton_Lite_Hover_Background);
+	color: var(--sapButton_Lite_Hover_TextColor);
 	box-shadow: var(--_ui5_calendar_header_arrow_button_box_shadow);
+	border-color: var(--sapButton_Lite_Hover_BorderColor);
 }
 
 .ui5-calheader-arrowbtn:active {
 	background-color: var(--sapButton_Active_Background);
 	color: var(--sapButton_Active_TextColor);
+	border-color: var(--sapButton_Lite_Active_BorderColor);
 }
 
 .ui5-calheader-arrowbtn,
 .ui5-calheader-middlebtn {
-	border: var(--_ui5_calendar_header_arrow_button_border);
-	border-radius: var(--_ui5_calendar_header_arrow_button_border_radius);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_Lite_BorderColor);
+	border-radius: var(--_ui5_calendar_header_arrow_button_border_radius, var(--sapButton_BorderCornerRadius));
 	display:flex;
 	background-color: var(--sapButton_Lite_Background);
-	border-color: var(--sapButton_Lite_BorderColor);
 }
 
 .ui5-calheader-middlebtn {
@@ -103,7 +104,7 @@
 
 .ui5-calheader-middlebtn:focus, .ui5-calheader-arrowbtn:focus {
 	border: var(--_ui5_calendar_header_middle_button_focus_border);
-	border-radius: var(--_ui5_calendar_header_middle_button_focus_border_radius);
+	border-radius: var(--_ui5_calendar_header_middle_button_focus_border_radius, var(--sapButton_BorderCornerRadius));
 	outline: var(--_ui5_calendar_header_middle_button_focus_outline);
 	outline-offset: -0.125rem;
 	background: var(--_ui5_calendar_header_middle_button_focus_background);

package/src/themes/DynamicDateRangePopover.css

@@ -107,11 +107,10 @@
 }
 
 .ui5-ddr-arrow-back-btn {
-	border: var(--_ui5_calendar_header_arrow_button_border);
-	border-radius: var(--_ui5_calendar_header_arrow_button_border_radius);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_Lite_BorderColor);
+	border-radius: var(--_ui5_calendar_header_arrow_button_border_radius, var(--sapButton_BorderCornerRadius));
 	display:flex;
 	background-color: var(--sapButton_Lite_Background);
-	border-color: var(--sapButton_Lite_BorderColor);
 }
 
 .ui5-ddr-arrow-back-btn-arrow-icon {

package/src/themes/ListItemBase.css

@@ -102,7 +102,7 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	flex: auto;
+	flex: var(--_ui5_li_text_wrapper_flex, auto);
 	min-width: 1px;
 	line-height: normal;
 }

package/src/themes/RatingIndicator.css

@@ -29,7 +29,8 @@
 	opacity: .9;
 }
 
-:host([_focused]) {
+:host([desktop]:not([disabled]):not([display-only])) .ui5-rating-indicator-root:focus,
+:host(:not([disabled]):not([display-only])) .ui5-rating-indicator-root:focus-visible {
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: var(--_ui5_rating_indicator_outline_offset);
 	border-radius: var(--_ui5_rating_indicator_border_radius);

package/src/themes/Token.css

@@ -63,7 +63,8 @@
 	padding: var(--_ui5_token_readonly_padding);
 }
 
-:host([selected]) .ui5-token--wrapper:focus {
+:host([desktop][selected]) .ui5-token--wrapper:focus,
+:host([selected]) .ui5-token--wrapper:focus-visible {
 	outline: var(--_ui5_token_selected_focus_outline);
 }
 
@@ -94,12 +95,14 @@
 	font-family: var(--_ui5_token_selected_text_font_family);
 }
 
-.ui5-token--wrapper:focus {
+:host([desktop]) .ui5-token--wrapper:focus,
+.ui5-token--wrapper:focus-visible {
 	outline-offset: var(--_ui5_token_outline_offset);
 	outline: var(--_ui5_token_focus_outline);
 }
 
-.ui5-token--wrapper:focus::after {
+:host([desktop]) .ui5-token--wrapper:focus::after,
+.ui5-token--wrapper:focus-visible::after {
 	content: var(--ui5_token_focus_pseudo_element_content);
 	position: absolute;
 	pointer-events: none;

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

@@ -1,11 +1,10 @@
 @import "../base/CalendarHeader-parameters.css";
 
 :host {
-	--_ui5_calendar_header_arrow_button_border: 1px solid var(--sapButton_BorderColor);
-	--_ui5_calendar_header_arrow_button_border_radius: 0.375rem;
+	--_ui5_calendar_header_arrow_button_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_calendar_header_middle_button_width: 5.75rem;
 	--_ui5_calendar_header_middle_button_flex: auto;
-	--_ui5_calendar_header_middle_button_focus_border_radius: 0;
+	--_ui5_calendar_header_middle_button_focus_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_calendar_header_middle_button_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_calendar_header_middle_button_focus_after_display: none;
-}
+}

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

@@ -1,11 +1,10 @@
 @import "../base/CalendarHeader-parameters.css";
 
 :host {
-	--_ui5_calendar_header_arrow_button_border: 1px solid var(--sapButton_BorderColor);
-	--_ui5_calendar_header_arrow_button_border_radius: 0.375rem;
+	--_ui5_calendar_header_arrow_button_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_calendar_header_middle_button_width: 5.75rem;
 	--_ui5_calendar_header_middle_button_flex: auto;
-	--_ui5_calendar_header_middle_button_focus_border_radius: 0;
+	--_ui5_calendar_header_middle_button_focus_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_calendar_header_middle_button_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_calendar_header_middle_button_focus_after_display: none;
-}
+}

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

@@ -5,7 +5,6 @@
 	--_ui5_calendar_header_middle_button_focus_after_height: calc(100% - 0.375rem);
 	--_ui5_calendar_header_middle_button_focus_after_top_offset: 0.125rem;
 	--_ui5_calendar_header_middle_button_focus_after_left_offset: 0.125rem;
-	--_ui5_calendar_header_arrow_button_border: 0.0625rem solid var(--sapList_Hover_Background);
 	--_ui5_calendar_header_arrow_button_border_radius: 0.5rem;
 	--_ui5_calendar_header_arrow_button_box_shadow: 0 0 0.125rem 0 rgb(85 107 130 / 72%);
 	--_ui5_calendar_header_middle_button_focus_border_radius: 0.5rem;

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

@@ -5,7 +5,6 @@
 	--_ui5_calendar_header_middle_button_focus_after_height: calc(100% - 0.375rem);
 	--_ui5_calendar_header_middle_button_focus_after_top_offset: 0.125rem;
 	--_ui5_calendar_header_middle_button_focus_after_left_offset: 0.125rem;
-	--_ui5_calendar_header_arrow_button_border: 0.0625rem solid var(--sapList_Hover_Background);
 	--_ui5_calendar_header_arrow_button_border_radius: 0.5rem;
 	--_ui5_calendar_header_arrow_button_box_shadow: 0 0 0.125rem 0 rgb(85 107 130 / 72%);
 	--_ui5_calendar_header_middle_button_focus_border_radius: 0.5rem;

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

@@ -1,10 +1,10 @@
 @import "../base/CalendarHeader-parameters.css";
 
 :host {
+	--_ui5_calendar_header_arrow_button_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_calendar_header_middle_button_width: 5.75rem;
 	--_ui5_calendar_header_middle_button_flex: auto;
-	--_ui5_calendar_header_middle_button_focus_border_radius: 0.5rem;
+	--_ui5_calendar_header_middle_button_focus_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_calendar_header_middle_button_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_calendar_header_middle_button_focus_after_display: none;
-	--_ui5_calendar_header_arrow_button_border: none;
-}
+}

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

@@ -1,10 +1,10 @@
 @import "../base/CalendarHeader-parameters.css";
 
 :host {
+	--_ui5_calendar_header_arrow_button_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_calendar_header_middle_button_width: 5.75rem;
 	--_ui5_calendar_header_middle_button_flex: auto;
-	--_ui5_calendar_header_middle_button_focus_border_radius: 0.5rem;
+	--_ui5_calendar_header_middle_button_focus_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_calendar_header_middle_button_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_calendar_header_middle_button_focus_after_display: none;
-	--_ui5_calendar_header_arrow_button_border: none;
-}
+}