@ui5/webcomponents 2.23.0-rc.2 → 2.24.0-rc.0

package/src/FormTemplate.tsx

@@ -7,7 +7,7 @@ export default function FormTemplate(this: Form) {
 			class="ui5-form-root"
 			role={this.effectiveAccessibleRole}
 			aria-label={this.effectiveAccessibleName}
-			aria-labelledby={this.effectiveАccessibleNameRef}
+			aria-labelledby={this.effectiveAccessibleNameRef}
 			style={{
 				"--ui5-form-columns-s": this.columnsS,
 				"--ui5-form-columns-m": this.columnsM,

package/src/ListBoxItemGroupTemplate.tsx

@@ -1,7 +1,6 @@
 import type ListItemGroup from "./ListItemGroup.js";
 import ListItemGroupHeader from "./ListItemGroupHeader.js";
 import DropIndicator from "./DropIndicator.js";
-import ListItemAccessibleRole from "./types/ListItemAccessibleRole.js";
 
 export default function ListItemGroupTemplate(this: ListItemGroup, hooks?: { items: () => void }) {
 	const items = hooks?.items || defaultItems;
@@ -16,7 +15,7 @@ export default function ListItemGroupTemplate(this: ListItemGroup, hooks?: { ite
 			onDragLeave={this._ondragleave}
 		>
 			{this.hasHeader &&
-				<ListItemGroupHeader focused={this.focused} part="header" accessibleRole={ListItemAccessibleRole.Group} wrappingType={this.getGroupHeaderWrapping()} >
+				<ListItemGroupHeader focused={this.focused} part="header" accessibleRole="Group" wrappingType={this.getGroupHeaderWrapping()} >
 					{ this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText }
 				</ListItemGroupHeader>
 			}

package/src/PopupTemplate.tsx

@@ -27,7 +27,14 @@ export default function PopupTemplate(this: Popup, hooks?: {
 
 			{(hooks?.beforeContent || beforeContent).call(this)}
 
-			<div style={this.styles.content} class={this.classes.content} onScroll={this._scroll} part="content">
+			<div
+				style={this.styles.content}
+				class={this.classes.content}
+				role={this._contentRole}
+				aria-label={this._contentAriaLabel}
+				onScroll={this._scroll}
+				part="content"
+			>
 				<slot></slot>
 			</div>
 

package/src/RangeSliderTemplate.tsx

@@ -28,6 +28,7 @@ const startHandle = (slider: RangeSlider) => {
 				aria-valuemin={slider.min}
 				aria-valuemax={slider.max}
 				aria-valuenow={slider.startValue}
+				aria-valuetext={slider._ariaValueTextStart}
 				aria-label={slider._ariaLabelStartHandle}
 				aria-disabled={slider._ariaDisabled}
 				aria-describedby={slider._ariaDescribedByHandleText}
@@ -62,6 +63,7 @@ const endHandle = (slider: RangeSlider) => {
 				aria-valuemin={slider.min}
 				aria-valuemax={slider.max}
 				aria-valuenow={slider.endValue}
+				aria-valuetext={slider._ariaValueTextEnd}
 				aria-label={slider._ariaLabelEndHandle}
 				aria-disabled={slider._ariaDisabled}
 				aria-describedby={slider._ariaDescribedByHandleText}
@@ -79,7 +81,7 @@ const endHandle = (slider: RangeSlider) => {
 
 const startTooltip = (slider: RangeSlider) => (
 	<SliderTooltip
-		open={slider._tooltipsOpen}
+		open={slider._isStartTooltipVisible}
 		value={slider.tooltipStartValue}
 		valueState={slider.tooltipStartValueState}
 		min={slider.min}
@@ -98,7 +100,7 @@ const startTooltip = (slider: RangeSlider) => (
 
 const endTooltip = (slider: RangeSlider) => (
 	<SliderTooltip
-		open={slider._tooltipsOpen}
+		open={slider._isEndTooltipVisible}
 		value={slider.tooltipEndValue}
 		valueState={slider.tooltipEndValueState}
 		min={slider.min}
@@ -134,8 +136,9 @@ export default function RangeSliderTemplate(this: RangeSlider) {
 					min={this.min}
 					max={this.max}
 					step={this._effectiveStep}
-					showTickmarks={this.showTickmarks}
-					labelInterval={this.labelInterval}
+					showTickmarks={this.showTickmarks || this._hasCustomTickmarks}
+					labelInterval={this._hasCustomTickmarks ? 1 : this.labelInterval}
+					tickmarks={this.tickmarks}
 					progressTabIndex={this._tabIndex}
 					progressAriaValueNow={this._ariaValueNow}
 					progressAriaValueText={`From ${this.startValue} to ${this.endValue}`}

package/src/RatingIndicatorTemplate.tsx

@@ -45,7 +45,7 @@ function starLi(this: RatingIndicator, star: Star) {
 					<Icon data-ui5-value={star.index} name={this.ratedIcon} />
 				</div>
 				<div class="ui5-rating-indicator-half-icon-wrapper ui5-rating-indicator-half-icon-right">
-					<Icon data-ui5-value={star.index} name={halfStarIconName.call(this)} />
+					<Icon data-ui5-value={star.index} name={this.unratedIcon} />
 				</div>
 			</li>
 		);
@@ -68,7 +68,3 @@ function starLi(this: RatingIndicator, star: Star) {
 		</li>
 	);
 }
-
-function halfStarIconName(this: RatingIndicator) {
-	return this.disabled || this.readonly ? this.ratedIcon : this.unratedIcon;
-}

package/src/SelectPopoverTemplate.tsx

@@ -4,7 +4,6 @@ import Button from "./Button.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import Popover from "./Popover.js";
 import Icon from "./Icon.js";
-import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import Title from "./Title.js";
 
 export default function SelectPopoverTemplate(this: Select) {
@@ -33,11 +32,6 @@ export default function SelectPopoverTemplate(this: Select) {
 						<div slot="header" class="ui5-responsive-popover-header">
 							<div class="row">
 								<Title>{this._headerTitleText}</Title>
-								<Button
-									class="ui5-responsive-popover-close-btn"
-									icon={decline}
-									design="Transparent"
-									onClick={this._toggleRespPopover} />
 							</div>
 
 							{this.hasValueStateText &&
@@ -71,6 +65,18 @@ export default function SelectPopoverTemplate(this: Select) {
 					>
 						<slot></slot>
 					</List>
+
+					{this._isPhone &&
+						<div slot="footer" class="ui5-responsive-popover-footer">
+							<Button
+								class="ui5-responsive-popover-close-btn"
+								design="Transparent"
+								onClick={this._toggleRespPopover}
+							>
+								{this._cancelButtonText}
+							</Button>
+						</div>
+					}
 				</ResponsivePopover>
 			}
 

package/src/SliderTemplate.tsx

@@ -27,6 +27,7 @@ const handle = (slider: Slider) => {
 				aria-valuemin={slider.min}
 				aria-valuemax={slider.max}
 				aria-valuenow={slider.value}
+				aria-valuetext={slider._ariaValueText}
 				aria-label={slider._ariaLabel}
 				aria-disabled={slider._ariaDisabled}
 				aria-describedby={slider._ariaDescribedByHandleText}
@@ -42,7 +43,7 @@ const handle = (slider: Slider) => {
 
 const tooltip = (slider: Slider) => (
 	<SliderTooltip
-		open={slider._tooltipsOpen}
+		open={slider._isTooltipVisible}
 		value={slider.tooltipValue}
 		min={slider.min}
 		max={slider.max}
@@ -77,8 +78,9 @@ export default function SliderTemplate(this: Slider) {
 					max={this.max}
 					step={this.step}
 					startValue={this.min}
-					showTickmarks={this.showTickmarks}
-					labelInterval={this.labelInterval}
+					showTickmarks={this.showTickmarks || this._hasCustomTickmarks}
+					labelInterval={this._hasCustomTickmarks ? 1 : this.labelInterval}
+					tickmarks={this.tickmarks}
 					onFocusOut={this._onfocusout}
 					onFocusIn={this._onfocusin}
 					part="scale"

package/src/TableGrowingTemplate.tsx

@@ -4,7 +4,7 @@ export default function TableGrowingTemplate(this: TableGrowing) {
 	return (
 		<div
 			id="button"
-			tabindex={-1}
+			tabindex={0}
 			data-ui5-growing-active={this._activeState}
 			onClick={this.loadMore}
 			onKeyDown={this._onKeydown}

package/src/i18n/messagebundle.properties

@@ -450,6 +450,9 @@ COMBOBOX_DIALOG_OK_BUTTON=OK
 #XBUT: Combobox Dialog Cancel button on mobile devices
 COMBOBOX_DIALOG_CANCEL_BUTTON=Cancel
 
+#XBUT: Select Dialog Cancel button on mobile devices
+SELECT_DIALOG_CANCEL_BUTTON=Cancel
+
 #XACT: ARIA announcement for suggestions popup
 INPUT_AVALIABLE_VALUES=Available Values
 
@@ -840,6 +843,15 @@ DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=Use Arrow keys to move
 
 #XACT: ARIA announcement for describedby attribute of draggable and resizable Dialog header
 DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Use Arrow keys to move, Shift+Arrow keys to resize
+
+#XACT: ARIA label for the Dialog header region
+DIALOG_HEADER_ARIA_LABEL=Header
+
+#XACT: ARIA label for the Dialog content region
+DIALOG_CONTENT_ARIA_LABEL=Content
+
+#XACT: ARIA label for the Dialog footer region
+DIALOG_FOOTER_ARIA_LABEL=Footer
 #XFLD: A colon to separate the "label" from an input. In some languages there might be a different symbol used for such a colon
 LABEL_COLON=:
 

package/src/themes/Bar.css

@@ -16,7 +16,8 @@
 	box-shadow: inherit;
 	border-radius: inherit;
 	min-width: 0;
-	overflow: hidden;
+	overflow-x: clip;
+	overflow-y: visible;
 }
 
 .ui5-bar-root .ui5-bar-startcontent-container,
@@ -39,7 +40,8 @@
 	flex: 1 1 auto;
 	padding: 0 var(--_ui5_bar-mid-container-padding-start-end);
 	min-width: 0;
-	overflow: hidden;
+	overflow-x: clip;
+	overflow-y: visible;
 }
 
 .ui5-bar-root .ui5-bar-startcontent-container {
@@ -54,7 +56,8 @@
 
 .ui5-bar-root.ui5-bar-root-shrinked .ui5-bar-content-container {
 	min-width: 0px;
-	overflow: hidden;
+	overflow-x: clip;
+	overflow-y: visible;
 	height: 100%;
 }
 
@@ -80,7 +83,7 @@
 	border: none;
 }
 
-::slotted(*:not([hidden])) {
+::slotted(*:not([hidden]):not([ui5-button])) {
 	margin: 0 0.25rem;
 	display: inline-block;
     max-width: 100%;
@@ -88,4 +91,16 @@
     overflow: hidden;
     text-overflow: ellipsis;
     box-sizing: border-box;
+}
+
+/* Scoped here (not in Bar-parameters.css) so the override applies only to buttons inside a Bar, not to standalone buttons on the page. */
+::slotted([ui5-button]) {
+	margin: 0 0.25rem;
+	--_ui5_button_overlay_badge_offset: -0.25rem;
+}
+
+@container style(--ui5_content_density: compact) {
+	::slotted([ui5-button]) {
+		--_ui5_button_overlay_badge_offset: initial;
+	}
 }

package/src/themes/Button.css

@@ -318,7 +318,7 @@ bdi {
 	position: absolute;
 	top: 0;
 	inset-inline-end: 0;
-	margin: -0.5rem;
+	margin: var(--_ui5_button_overlay_badge_offset, -0.5rem);
 	z-index: 1;
 	font-family: var(--sapButton_FontFamily);
 	font-size: var(--sapFontSmallSize);

package/src/themes/ExpandableText.css

@@ -11,6 +11,7 @@
 
 .ui5-exp-text-text {
 	display: inline;
+	white-space: inherit;
 }
 
 .ui5-exp-text-text,
@@ -24,6 +25,13 @@
 	color: inherit;
 }
 
+.ui5-exp-text-popover,
+.ui5-exp-text-popover-text {
+	white-space: inherit;
+	font-family: inherit;
+	font-size: inherit;
+}
+
 .ui5-exp-text-popover::part(content) {
 	padding-inline: 1rem;
 }

package/src/themes/Popover.css

@@ -1,4 +1,5 @@
 :host {
+	min-width: 6.25rem;
 	box-shadow: var(--_ui5_popover_box_shadow);
 	background-color: var(--_ui5_popover_background);
 	max-width: calc(100vw - (100vw - 100%) - 2 * var(--_ui5_popup_viewport_margin));
@@ -59,10 +60,6 @@
 	display: none;
 }
 
-.ui5-popover-root {
-	min-width: 6.25rem;
-}
-
 .ui5-popover-arrow {
 	pointer-events: none;
 	display: block;

package/src/themes/RatingIndicator.css

@@ -17,7 +17,6 @@
 	cursor: initial;
 }
 
-:host([disabled]) .ui5-rating-indicator-item-unsel,
 :host([readonly]) .ui5-rating-indicator-item-unsel {
 	padding-inline: var(--_ui5_rating_indicator_readonly_item_spacing);
 	width: var(--_ui5_rating_indicator_readonly_item_width);

package/src/themes/ResponsivePopoverCommon.css

@@ -186,11 +186,12 @@
 .ui5-responsive-popover-footer {
 	display: flex;
 	justify-content: flex-end;
-	padding: 0.25rem 0;
+	align-items: center;
 	width: 100%;
+	box-sizing: border-box;
 }
 
-.ui5-responsive-popover-footer .ui5-responsive-popover-close-btn, 
+.ui5-responsive-popover-footer .ui5-responsive-popover-close-btn,
 .ui5-responsive-popover-footer .ui5-responsive-popover-footer-btn {
 	margin-left: 0.5rem;
 }
@@ -203,4 +204,3 @@
 .ui5-responsive-popover-footer .ui5-responsive-popover-footer-btn {
 	width: 4.5rem;
 }
-

package/src/themes/Select.css

@@ -8,28 +8,7 @@
 }
 
 :host([opened]) .ui5-input-focusable-element::after {
-	content: var(--ui5_input_focus_pseudo_element_content);
-	position: absolute;
-	pointer-events: none;
-	z-index: 2;
-	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_input_focus_outline_color);
-	border-radius: var(--_ui5_input_focus_border_radius);
-	top: var(--_ui5_input_focus_offset);
-	bottom: var(--_ui5_input_focus_offset);
-	left: var(--_ui5_input_focus_offset);
-	right: var(--_ui5_input_focus_offset);
-}
-
-:host([value-state="Negative"][opened]:not([readonly])) .ui5-input-focusable-element:after {
-	border-color: var(--_ui5_input_focused_value_state_error_focus_outline_color);
-}
-
-:host([value-state="Critical"][opened]:not([readonly])) .ui5-input-focusable-element:after {
-	border-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color);
-}
-
-:host([value-state="Positive"][opened]:not([readonly])) .ui5-input-focusable-element:after {
-	border-color: var(--_ui5_input_focused_value_state_success_focus_outline_color);
+	content: none;
 }
 
 :host([icon]) .ui5-select-root {

package/src/themes/Table.css

@@ -37,4 +37,8 @@
 	inset: 0;
 	height: 100%;
 	z-index: 2;
+}
+
+:host([loading]) #table:has(#loading[_is-busy]) ::slotted(*) {
+	opacity: var(--sapContent_DisabledOpacity);
 }

package/src/themes/Text.css

@@ -6,15 +6,6 @@
 	line-height: normal;
 	cursor: text;
 	overflow: hidden;
-}
-
-:host([max-lines="1"]) {
-	display: inline-block;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-:host(:not([max-lines="1"])) {
 	display: -webkit-inline-box;
 	-webkit-line-clamp: var(--_ui5_text_max_lines);
 	line-clamp: var(--_ui5_text_max_lines);
@@ -23,6 +14,10 @@
 	word-wrap: break-word;
 }
 
+:host([max-lines="1"]) {
+	word-break: break-all;
+}
+
 .empty-indicator-aria-label {
 	position: absolute !important;
 	clip: rect(1px, 1px, 1px, 1px);

package/src/themes/Toolbar.css

@@ -6,7 +6,7 @@
 	justify-content: flex-end;
 	box-sizing: border-box;
 	border-bottom: var(--sapGroup_TitleBorderWidth) solid var(--sapGroup_TitleBorderColor);
-	padding: 0 var(--_ui5-toolbar-padding-left) 0 var(--_ui5-toolbar-padding-right);
+	padding: 0 var(--_ui5-toolbar-padding-right) 0 var(--_ui5-toolbar-padding-left);
 	background-color: var(--sapToolbar_Background);
 }
 

package/src/themes/ToolbarItem.css

@@ -1,5 +1,4 @@
 :host {
-	display: inline-block;
 	height: 100%;
 }
 

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

@@ -2,5 +2,5 @@
     --_ui5-toolbar-padding-left: 0.5rem;
 	--_ui5-toolbar-padding-right: 0.5rem;
 	--_ui5-toolbar-item-margin-left: 0;
-	--_ui5-toolbar-item-margin-right: 0.25rem;
+	--_ui5-toolbar-item-margin-right: 0.5rem;
 }