@ui5/webcomponents 2.22.1-rc.0 → 2.23.0-rc.0

package/src/IconTemplate.tsx

@@ -1,6 +1,24 @@
 import type Icon from "./Icon.js";
 
 export default function IconTemplate(this: Icon) {
+	if (this.hasFontIcon) {
+		return (
+			<span
+				class="ui5-icon-root"
+				part="root"
+				tabindex={this._tabIndex}
+				role={this.effectiveAccessibleRole}
+				aria-label={this.effectiveAccessibleName}
+				aria-hidden={this.effectiveAriaHidden}
+				onKeyDown={this._onkeydown}
+				onKeyUp={this._onkeyup}
+				onClick={this._onclick}
+			>
+				<slot name="fontIcon"></slot>
+			</span>
+		);
+	}
+
 	return (
 		<svg
 			class="ui5-icon-root"

package/src/PanelTemplate.tsx

@@ -21,6 +21,7 @@ export default function PanelTemplate(this: Panel) {
 					}}
 					role={this.headingWrapperRole}
 					aria-level={this.headingWrapperAriaLevel}
+					part="header-wrapper"
 				>
 					<div
 						onClick={this._headerClick}
@@ -89,22 +90,15 @@ export default function PanelTemplate(this: Panel) {
 
 			{/* content area */}
 			<div
-				class={{
-					"ui5-panel-content-wrapper": true,
-					"ui5-panel-content-focusable": this._contentFocusable,
-				}}
+				class="ui5-panel-content"
+				id={ `${this._id}-content` }
+				tabindex={ -1 }
 				style={{
 					display: this._contentExpanded ? "block" : "none",
 				}}
+				part="content"
 			>
-				<div
-					class="ui5-panel-content"
-					id={ `${this._id}-content` }
-					tabindex={ this._contentTabIndex }
-					part="content"
-				>
-					<slot></slot>
-				</div>
+				<slot></slot>
 			</div>
 		</div>
 	</>);

package/src/themes/Icon.css

@@ -20,6 +20,7 @@
 	color: var(--sapContent_IconColor);
 	fill: currentColor;
 	outline: none;
+	container-type: size;
 }
 
 :host([design="Contrast"]) {
@@ -62,6 +63,11 @@
 	width: 100%;
 	outline: none;
 	vertical-align: top;
+	box-sizing: border-box;
+	align-items: center;
+	justify-content: center;
+	font-size: min(100cqw, 100cqh);
+	line-height: 1;
 }
 
 

package/src/themes/Panel.css

@@ -91,30 +91,13 @@
 	white-space: nowrap;
 }
 
-.ui5-panel-content-wrapper {
-	overflow: hidden;
+.ui5-panel-content {
 	padding: var(--_ui5_panel_content_padding);
 	background-color: var(--sapGroup_ContentBackground);
+	outline: none;
 	border-bottom-left-radius: var(--_ui5_panel_border_radius);
 	border-bottom-right-radius: var(--_ui5_panel_border_radius);
-	flex: 1;
-	min-height: 0;
-	box-sizing: border-box;
-}
-
-.ui5-panel-content-wrapper.ui5-panel-content-focusable:focus-within {
-	outline: var(--_ui5_panel_focus_border);
-	outline-offset: var(--_ui5_panel_content_focus_offset);
-}
-
-.ui5-panel-content {
-	height: 100%;
 	overflow: auto;
-	outline: none;
-}
-
-.ui5-panel-content:focus {
-	outline: none;
 }
 
 .ui5-panel-header-button-root {

package/src/themes/Table.css

@@ -1,6 +1,7 @@
 :host {
 	display: block;
 	position: relative;
+	z-index: 0; /* create a stacking context for the sticky elements */
 	color: var(--sapList_TextColor);
 	font: var(--sapFontSize) var(--sapFontFamily);
 }
@@ -36,8 +37,4 @@
 	inset: 0;
 	height: 100%;
 	z-index: 2;
-}
-
-:host([loading]) #table:has(#loading[_is-busy]) ::slotted(*) {
-	opacity: var(--sapContent_DisabledOpacity);
 }

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

@@ -13,7 +13,6 @@
 	--_ui5_panel_focus_offset: 1px;
 	--_ui5_panel_focus_bottom_offset: var(--_ui5_panel_focus_offset);
 	--_ui5_panel_content_padding: 0.625rem 1rem 1.375rem 1rem;
-	--_ui5_panel_content_focus_offset: -0.1875rem;
 	--_ui5_panel_header_background_color: var(--sapBackgroundColor);
 }