@ui5/webcomponents 2.23.0 → 2.24.0-rc.0

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/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

@@ -843,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/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/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;
 }