@ui5/webcomponents 2.12.0-rc.3 → 2.13.0-rc.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.12.0-rc.3",
+  "version": "2.13.0-rc.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -736,12 +736,12 @@
             },
             {
               "name": "min-date",
-              "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).",
+              "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).",
               "value": { "type": "string", "default": "\"\"" }
             },
             {
               "name": "max-date",
-              "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
+              "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).",
               "value": { "type": "string", "default": "\"\"" }
             },
             {
@@ -806,12 +806,12 @@
               },
               {
                 "name": "min-date",
-                "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).",
+                "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).",
                 "value": { "type": "string" }
               },
               {
                 "name": "max-date",
-                "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
+                "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).",
                 "value": { "type": "string" }
               },
               {
@@ -2068,12 +2068,12 @@
             },
             {
               "name": "min-date",
-              "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).",
+              "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).",
               "value": { "type": "string", "default": "\"\"" }
             },
             {
               "name": "max-date",
-              "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
+              "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).",
               "value": { "type": "string", "default": "\"\"" }
             },
             {
@@ -2198,12 +2198,12 @@
               },
               {
                 "name": "min-date",
-                "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).",
+                "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).",
                 "value": { "type": "string" }
               },
               {
                 "name": "max-date",
-                "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
+                "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).",
                 "value": { "type": "string" }
               },
               {
@@ -2349,12 +2349,12 @@
             },
             {
               "name": "min-date",
-              "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).",
+              "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).",
               "value": { "type": "string", "default": "\"\"" }
             },
             {
               "name": "max-date",
-              "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
+              "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).",
               "value": { "type": "string", "default": "\"\"" }
             },
             {
@@ -2499,12 +2499,12 @@
               },
               {
                 "name": "min-date",
-                "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).",
+                "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).",
                 "value": { "type": "string" }
               },
               {
                 "name": "max-date",
-                "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
+                "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).",
                 "value": { "type": "string" }
               },
               {
@@ -2630,12 +2630,12 @@
             },
             {
               "name": "min-date",
-              "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).",
+              "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).",
               "value": { "type": "string", "default": "\"\"" }
             },
             {
               "name": "max-date",
-              "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
+              "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).",
               "value": { "type": "string", "default": "\"\"" }
             },
             {
@@ -2760,12 +2760,12 @@
               },
               {
                 "name": "min-date",
-                "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).",
+                "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).",
                 "value": { "type": "string" }
               },
               {
                 "name": "max-date",
-                "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
+                "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).",
                 "value": { "type": "string" }
               },
               {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.12.0-rc.3",
+  "version": "2.13.0-rc.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.12.0-rc.3",
-    "@ui5/webcomponents-icons": "2.12.0-rc.3",
-    "@ui5/webcomponents-icons-business-suite": "2.12.0-rc.3",
-    "@ui5/webcomponents-icons-tnt": "2.12.0-rc.3",
-    "@ui5/webcomponents-localization": "2.12.0-rc.3",
-    "@ui5/webcomponents-theming": "2.12.0-rc.3"
+    "@ui5/webcomponents-base": "2.13.0-rc.0",
+    "@ui5/webcomponents-icons": "2.13.0-rc.0",
+    "@ui5/webcomponents-icons-business-suite": "2.13.0-rc.0",
+    "@ui5/webcomponents-icons-tnt": "2.13.0-rc.0",
+    "@ui5/webcomponents-localization": "2.13.0-rc.0",
+    "@ui5/webcomponents-theming": "2.13.0-rc.0"
   },
   "devDependencies": {
     "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "2.12.0-rc.3",
+    "@ui5/webcomponents-tools": "2.13.0-rc.0",
     "chromedriver": "^137.0.4",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "c6ddec53b176580e72fed5b27a84184d73287dfb"
+  "gitHead": "c08c3718ee4da135120ee7a18772325baaf8a8d8"
 }

package/src/SliderBaseTemplate.tsx

@@ -35,16 +35,15 @@ export default function SliderBaseTemplate(this: SliderBase, hooks?: {
 						</>)}
 					</ul>
 					{!!this.labelInterval &&
-							<ul class={{
-								"ui5-slider-labels": true,
-								"ui5-slider-hidden-labels": this._labelsOverlapping,
-							}}
-							style={this.styles.labelContainer}
-							>
-								{this._labels.map(l =>
-									<li style={this.styles.label}>{l}</li>
-								)}
-							</ul>
+						<ul class={{
+							"ui5-slider-labels": true,
+							"ui5-slider-hidden-labels": this._labelsOverlapping,
+						}}
+						>
+							{this._labels.map(l =>
+								<li data-counter={l}></li>
+							)}
+						</ul>
 					}
 				</>}
 

package/src/TimeSelectionClocksTemplate.tsx

@@ -19,6 +19,7 @@ export default function TimeSelectionClocksTemplate(this: TimeSelectionClocks) {
 					<>
 						{ entity.hasSeparator && <span class="ui5-time-selection-separator">:</span> }
 						<ToggleSpinButton
+							data-sap-focus-ref
 							id={`${this._id}_button_${entity.entity}`}
 							data-ui5-clock={entity.entity}
 							valueMin={entity.attributes && entity.attributes.min}

package/src/i18n/messagebundle.properties

@@ -187,6 +187,9 @@ DATERANGE_DESCRIPTION=Date Range Input
 #XACT: Aria information for the Date Picker popover
 DATEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date
 
+#XTXT: Date Picker placeholder prefix
+DATETIME_COMPONENTS_PLACEHOLDER_PREFIX=e.g.
+
 #XACT: Aria information for the Date Time Picker popover
 DATETIMEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date and Time
 

package/src/themes/DatePicker.css

@@ -51,6 +51,11 @@
 	margin: inherit;
 }
 
+:host([disabled]) .ui5-date-picker-input {
+	background-color: var(--_ui5-input_disabled_background);
+	opacity: var(--_ui5_input_disabled_opacity);
+}
+
 :host(:not([disabled]):not([readonly])) .ui5-date-picker-input[focused] {
 	background-color: var(--_ui5-datepicker-hover-background);
 }

package/src/themes/InputSharedStyles.css

@@ -4,20 +4,18 @@
 	- readonly and disabled states
 */
 
+:host([disabled]) {
+	cursor: default;
+	pointer-events: none;
+	background: none;
+}
+
 :host([readonly]:not([disabled])) {
 	border-color: var(--_ui5_input_readonly_border_color);
 	background: var(--sapField_ReadOnly_BackgroundStyle);
 	background-color: var(--_ui5_input_readonly_background);
 }
 
-:host([disabled]) {
-	opacity: var(--_ui5_input_disabled_opacity);
-	cursor: default;
-	pointer-events: none;
-	background-color: var(--_ui5-input_disabled_background);
-	border-color: var(--_ui5_input_disabled_border_color);
-}
-
 :host([value-state="Negative"]) .inputIcon:not(.inputIcon--pressed):not(:active):hover {
 	box-shadow: var(--_ui5_input_error_icon_box_shadow);
 }

package/src/themes/SliderBase.css

@@ -93,7 +93,7 @@
 
 .ui5-slider-tickmarks li {
 	height: var(--_ui5_slider_tickmark_height);
-	border-inline-start: 1px solid var(--_ui5_slider_tickmark_bg);
+	border-inline-start: 0.0625rem solid var(--_ui5_slider_tickmark_bg);
 }
 
 .ui5-slider-handle {
@@ -203,28 +203,38 @@
 	margin: 0;
 	padding: 0;
 	white-space: nowrap;
+    height: 1rem;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
 }
 
 .ui5-slider-labels li {
-	position: relative;
+    position: relative;
 	list-style: none;
-	padding-top: 0.3125rem;
-	height: 1rem;
 	margin: 0;
 	text-align: center;
 	display: inline-block;
-	color: var(--_ui5_slider_label_color);
 	font-family: var(--sapFontFamily);
 	font-size: var(--_ui5_slider_label_fontsize);
 	padding-top: 0;
 	box-sizing: border-box;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	vertical-align: top;
+    width: 0.0625rem;
+    visibility: hidden;
+}
+
+.ui5-slider-labels li::after {
+	content: attr(data-counter);
+	position: absolute;
+	top: 0;
+	visibility: visible;
+    display: inline-block;
+    width: 2rem;
+	color: var(--_ui5_slider_label_color);
+    transform: translateX(-50%);
 }
 
-.ui5-slider-hidden-labels li:not(:first-child):not(:last-child) {
+.ui5-slider-hidden-labels li:not(:first-child):not(:last-child)::after {
 	visibility: hidden;
 }
 

package/src/themes/TimePicker.css

@@ -27,7 +27,7 @@
 	background-color: var(--sapField_InvalidBackground);
 }
 
-:host(:not([disabled]):hover) {
+:host(:not([disabled]):not([readonly]):hover) {
 	background: var(--sapField_Hover_Background);
 }
 
@@ -49,6 +49,11 @@
 	height: inherit;
 }
 
+:host([disabled]) .ui5-time-picker-input {
+	background-color: var(--_ui5-input_disabled_background);
+	opacity: var(--_ui5_input_disabled_opacity);
+}
+
 .ui5-time-picker-popover::part(header) {
 	padding: 0;
 }

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

@@ -21,7 +21,6 @@
 	--ui5-avatar-accent8: var(--sapAvatar_8_Background);
 	--ui5-avatar-accent9: var(--sapAvatar_9_Background);
 	--ui5-avatar-accent10: var(--sapAvatar_10_Background);
-	--ui5-avatar-placeholder: var(--sapContent_ImagePlaceholderBackground);
 
 	--ui5-avatar-accent1-color: var(--sapAvatar_1_TextColor);
 	--ui5-avatar-accent2-color: var(--sapAvatar_2_TextColor);
@@ -33,7 +32,6 @@
 	--ui5-avatar-accent8-color: var(--sapAvatar_8_TextColor);
 	--ui5-avatar-accent9-color: var(--sapAvatar_9_TextColor);
 	--ui5-avatar-accent10-color:  var(--sapAvatar_10_TextColor);
-	--ui5-avatar-placeholder-color:  var(--sapAvatar_Lite_Background);
 
 	--ui5-avatar-accent1-border-color: var(--sapAvatar_1_BorderColor);
 	--ui5-avatar-accent2-border-color: var(--sapAvatar_2_BorderColor);

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

@@ -21,7 +21,6 @@
 	--ui5-avatar-accent8: var(--sapAvatar_8_Background);
 	--ui5-avatar-accent9: var(--sapAvatar_9_Background);
 	--ui5-avatar-accent10: var(--sapAvatar_10_Background);
-	--ui5-avatar-placeholder: var(--sapContent_ImagePlaceholderBackground);
 
 	--ui5-avatar-accent1-color: var(--sapAvatar_1_TextColor);
 	--ui5-avatar-accent2-color: var(--sapAvatar_2_TextColor);
@@ -33,7 +32,6 @@
 	--ui5-avatar-accent8-color: var(--sapAvatar_8_TextColor);
 	--ui5-avatar-accent9-color: var(--sapAvatar_9_TextColor);
 	--ui5-avatar-accent10-color:  var(--sapAvatar_10_TextColor);
-	--ui5-avatar-placeholder-color:  var(--sapContent_ImagePlaceholderForegroundColor);
 
 	--ui5-avatar-accent1-border-color: var(--sapAvatar_1_BorderColor);
 	--ui5-avatar-accent2-border-color: var(--sapAvatar_2_BorderColor);

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

@@ -22,7 +22,6 @@
 	--ui5-avatar-accent8: var(--sapAvatar_8_Background);
 	--ui5-avatar-accent9: var(--sapAvatar_9_Background);
 	--ui5-avatar-accent10: var(--sapAvatar_10_Background);
-	--ui5-avatar-placeholder: var(--sapContent_ImagePlaceholderBackground);
 
 	--ui5-avatar-accent1-color: var(--sapAvatar_1_TextColor);
 	--ui5-avatar-accent2-color: var(--sapAvatar_2_TextColor);
@@ -34,7 +33,6 @@
 	--ui5-avatar-accent8-color: var(--sapAvatar_8_TextColor);
 	--ui5-avatar-accent9-color: var(--sapAvatar_9_TextColor);
 	--ui5-avatar-accent10-color:  var(--sapAvatar_10_TextColor);
-	--ui5-avatar-placeholder-color:  var(--sapAvatar_Lite_Background);
 
 	--ui5-avatar-accent1-border-color: var(--sapAvatar_1_BorderColor);
 	--ui5-avatar-accent2-border-color: var(--sapAvatar_2_BorderColor);

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

@@ -22,7 +22,6 @@
 	--ui5-avatar-accent8: var(--sapAvatar_8_Background);
 	--ui5-avatar-accent9: var(--sapAvatar_9_Background);
 	--ui5-avatar-accent10: var(--sapAvatar_10_Background);
-	--ui5-avatar-placeholder: var(--sapContent_ImagePlaceholderBackground);
 
 	--ui5-avatar-accent1-color: var(--sapAvatar_1_TextColor);
 	--ui5-avatar-accent2-color: var(--sapAvatar_2_TextColor);
@@ -34,7 +33,6 @@
 	--ui5-avatar-accent8-color: var(--sapAvatar_8_TextColor);
 	--ui5-avatar-accent9-color: var(--sapAvatar_9_TextColor);
 	--ui5-avatar-accent10-color:  var(--sapAvatar_10_TextColor);
-	--ui5-avatar-placeholder-color:  var(--sapAvatar_Lite_Background);
 
 	--ui5-avatar-accent1-border-color: var(--sapAvatar_1_BorderColor);
 	--ui5-avatar-accent2-border-color: var(--sapAvatar_2_BorderColor);