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

package/src/i18n/messagebundle_en_US_sappsd.properties

@@ -600,6 +600,7 @@ TABLE_MULTI_SELECTABLE=[[[Μűĺţį Ŝēĺēċţįŏŋ Ţąƃĺē∙∙∙∙
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=[[[Ŝēĺēċţ Āĺĺ Ĉĥēċķƃŏχ∙∙∙∙∙]]]
 TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=[[[Ĉĺēąŗ Āĺĺ Ɓűţţŏŋ∙∙∙∙∙∙∙∙]]]
 TABLE_ROW=[[[Řŏŵ∙]]]
+TABLE_GROUP_ROW=[[[Ģŗŏűρ Řŏŵ∙∙∙∙∙]]]
 TABLE_ROW_POPIN=[[[Řŏŵ Ƥŏρįŋ∙∙∙∙∙]]]
 TABLE_ROW_INDEX=[[[{0} ŏƒ {1}]]]
 TABLE_ROW_SELECTED=[[[Ŝēĺēċţēƌ∙∙∙∙∙∙]]]

package/src/i18n/messagebundle_en_US_saprigi.properties

@@ -600,6 +600,7 @@ TABLE_MULTI_SELECTABLE=‍‌​‌‍​‍‌‌​​‍‌‌‍‍
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=‌​​‍‍​​‍​‌​​‌​​‌‌‌​‍‍‍‌​​‌‍‌​‍​​‍‍​‌​‌Select All Checkbox
 TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=‌‌​‌‍‌‌‌​‌​‌​‌‌‍​‌​‍‍​‌‌‍​​‍‌​‍​‌‌‌​‌‌‌‍Clear All Button
 TABLE_ROW=‍​‌‌‌‍‌​​‍‌​‍‍‍‍‍​​‌‌‌‍‍​​​‍‌‍‍‌‍‌‍‌‌​​Row
+TABLE_GROUP_ROW=‌‌‌‌​‍‌‌‌‌‌‍​‍‌​‌​‌‌‍‍‍‍‌‌​‌‌​‍‍‍‌‌‌​‍‍‍Group Row
 TABLE_ROW_POPIN=‍‌‍​‌‍​‍‌​‍​‌‍​‌‌‍‍‍​​​​‍‍​​​‍‌​​‍​‌​‌‌‌Row Popin
 TABLE_ROW_INDEX=‍​‍‍‌​​‍‌‍‌​‍‍‍‌‌‌‌‌‌​‍‍​‌‌‍​‍​‍‍​‍​​‌​​​{0}‌‌‌ of ​​​{1}‌‌‌
 TABLE_ROW_SELECTED=‍‍​‍‍​​‍‍‍‍‌‌​‌​‌‍​‍​​‍​‌‍​‌‍‍‌​‍‍​‍​‌Selected

package/src/i18n/messagebundle_en_US_saptrc.properties

@@ -600,6 +600,7 @@ TABLE_MULTI_SELECTABLE=RIckvhQnszVB2Wq9afX5qw_Multi Selection Table
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=U8jAD5CFyK2C8PpsfjhSww_Select All Checkbox
 TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=ACqC5WL2EIW7V6oKe89LAw_Clear All Button
 TABLE_ROW=BeY7BI1eVkssMRyo6OTuOg_Row
+TABLE_GROUP_ROW=lSMmOgJWKAW1cYToj4S2ig_Group Row
 TABLE_ROW_POPIN=jSWaz9VQvAMjWONvW6vG+w_Row Popin
 TABLE_ROW_INDEX=JSw0PIsKHB9ry5CcnSSkpg_{0} of {1}
 TABLE_ROW_SELECTED=gE83WYhPpE4QRrCw9U/gVA_Selected

package/src/themes/Form.css

@@ -30,7 +30,7 @@
 }
 
 .ui5-form-group-layout {
-	display: grid;
+	display: block;
 	column-gap: 1rem;
 }
 
@@ -51,5 +51,7 @@
 }
 
 dl {
-	all: unset;
+	padding: 0;
+	margin: 0;
+	border: 0 transparent;
 }

package/src/themes/FormItem.css

@@ -3,28 +3,8 @@
 	width: 100%;
 }
 
-:host([column-span="1"]) {
-	grid-column: span 1;
-}
-
-:host([column-span="2"]) {
-	grid-column: span 2;
-}
-
-:host([column-span="3"]) {
-	grid-column: span 3;
-}
-
-:host([column-span="4"]) {
-	grid-column: span 4;
-}
-
-:host([column-span="5"]) {
-	grid-column: span 5;
-}
-
-:host([column-span="6"]) {
-	grid-column: span 6;
+:host {
+	break-inside: avoid;
 }
 
 .ui5-form-item-root {
@@ -68,34 +48,8 @@
 	width: 100%;
 }
 
-@container (max-width: 600px) {
-	:host {
-		order: var(--ui5-form-item-order-S, unset);
-	}
-}
-
-/* M  - 1 column by default, up to 2 columns */
-@container (width > 600px) and (width <= 1024px) {
-	:host {
-		order: var(--ui5-form-item-order-M, unset);
-	}
-
-}
-
-/* L - 2 columns by default, up to 3 columns */
-@container (width > 1024px) and (width <= 1440px) {
-	:host {
-		order: var(--ui5-form-item-order-L, unset);
-	}
-}
-
-/* XL - 3 columns by default, up to 6 */
-@container (min-width: 1441px) {
-	:host {
-		order: var(--ui5-form-item-order-Xl, unset);
-	}
-}
-
 dd {
-	all: unset;
+	padding: 0;
+	margin: 0;
+	border: 0 transparent;
 }

package/src/themes/FormItemSpan.css

@@ -17,8 +17,8 @@
 		--ui5-form-item-layout: var(--ui5-form-item-layout-S);
 	}
 
-	:host([label-span-s="12"]) .ui5-form-item,
-	:host([label-span-s="12"]) .ui5-form-group {
+	:host(:is([label-span~="S12"], :not([label-span*="S"]))) .ui5-form-item,
+	:host(:is([label-span~="S12"], :not([label-span*="S"]))) .ui5-form-group {
 		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
 		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
@@ -30,8 +30,8 @@
 		--ui5-form-item-layout: var(--ui5-form-item-layout-M);
 	}
 
-	:host([label-span-m="12"]) .ui5-form-item,
-	:host([label-span-m="12"]) .ui5-form-group {
+	:host([label-span~="M12"]) .ui5-form-item,
+	:host([label-span~="M12"]) .ui5-form-group {
 		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
 		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
@@ -43,8 +43,8 @@
 		--ui5-form-item-layout: var(--ui5-form-item-layout-L);
 	}
 
-	:host([label-span-l="12"]) .ui5-form-item,
-	:host([label-span-l="12"]) .ui5-form-group {
+	:host([label-span~="L12"]) .ui5-form-item,
+	:host([label-span~="L12"]) .ui5-form-group {
 		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
 		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
@@ -56,9 +56,9 @@
 		--ui5-form-item-layout: var(--ui5-form-item-layout-XL);
 	}
 
-	:host([label-span-xl="12"]) .ui5-form-item,
-	:host([label-span-xl="12"]) .ui5-form-group {
+	:host([label-span~="XL12"]) .ui5-form-item,
+	:host([label-span~="XL12"]) .ui5-form-group {
 		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
 		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
-}
+}

package/src/themes/FormLayout.css

@@ -1,43 +1,46 @@
-/* 
-* The Form layout is divided into one or more columns. 
+/*
+* The Form layout is divided into one or more columns.
 * XL - max. 6 columns, L - max. 3 columns, M - max. 2 columns and S - 1 column.
 */
-/* 
+/*
 * S max-width: 600px - container padding 24px
 */
 
 /* S - 1 column */
 @container (max-width: 599px) {
 	.ui5-form-layout {
-		grid-template-columns: 1fr;
+		grid-template-columns: repeat(var(--ui5-form-columns-s), 1fr);
 	}
 
 	::slotted(*) {
 		justify-self: start;
 	}
-	::slotted(:nth-child(2n)){
+
+	::slotted(:nth-child(2n)) {
 		margin-bottom: 0.5rem;
 	}
+
+	.ui5-form-column {
+		grid-column: span var(--ui5-form-column-span-s, 1);
+	}
+
+	.ui5-form-group-layout {
+		column-count: var(--ui5-form-column-span-s, 1)
+	}
 }
 
 /* M  - 1 column by default, up to 2 columns */
 @container (min-width: 600px) and (max-width: 1023px) {
 	.ui5-form-layout {
-		grid-template-columns: 1fr;
-	}
-	:host([columns-m="1"]) .ui5-form-layout {
-		grid-template-columns: 1fr;
-	}
-	:host([columns-m="2"]) .ui5-form-layout {
-		grid-template-columns: repeat(2, 1fr);
+		grid-template-columns: repeat(var(--ui5-form-columns-m), 1fr);
 	}
 
-	.ui5-form-column-spanM-2 {
-		grid-column: span 2;
+	.ui5-form-column {
+		grid-column: span var(--ui5-form-column-span-m, 1);
 	}
 
-	.ui5-form-column-spanM-2 .ui5-form-group-layout {
-		grid-template-columns: repeat(2, 1fr);
+	.ui5-form-group-layout {
+		column-count: var(--ui5-form-column-span-m, 1)
 	}
 }
 
@@ -45,115 +48,29 @@
 @container (min-width: 1024px) and (max-width: 1439px) {
 
 	.ui5-form-layout {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	.ui5-form-column {
-		grid-template-columns: 1fr;
+		grid-template-columns: repeat(var(--ui5-form-columns-l), 1fr);
 	}
 
-	:host([columns-l="1"]) .ui5-form-layout {
-		grid-template-columns: 1fr;
-	}
-	:host([columns-l="2"]) .ui5-form-layout {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	:host([columns-l="3"]) .ui5-form-layout {
-		grid-template-columns: repeat(3, 1fr);
-	}
-
-	.ui5-form-column-spanL-2 {
-		grid-column: span 2;
-	}
-	.ui5-form-column-spanL-2 .ui5-form-group-layout {
-		grid-template-columns: repeat(2, 1fr);
+	.ui5-form-column {
+		grid-column: span var(--ui5-form-column-span-l, 1);
 	}
 
-	.ui5-form-column-spanL-3 {
-		grid-column: span 3;
-	}
-	.ui5-form-column-spanL-3 .ui5-form-group-layout {
-		grid-template-columns: repeat(3, 1fr);
+	.ui5-form-group-layout {
+		column-count: var(--ui5-form-column-span-l, 1)
 	}
 }
 
 /* XL - 3 columns by default, up to 6 */
 @container (min-width: 1440px) {
 	.ui5-form-layout {
-		grid-template-columns: repeat(3, 1fr);
-	}
-
-	:host([columns-xl="1"]) .ui5-form-layout {
-		grid-template-columns: 1fr;
-	}
-	:host([columns-xl="2"]) .ui5-form-layout {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	:host([columns-xl="3"]) .ui5-form-layout {
-		grid-template-columns: repeat(3, 1fr);
-	}
-	:host([columns-xl="4"]) .ui5-form-layout {
-		grid-template-columns: repeat(4, 1fr);
-	}
-	:host([columns-xl="5"]) .ui5-form-layout {
-		grid-template-columns: repeat(5, 1fr);
-	}
-	:host([columns-xl="6"]) .ui5-form-layout {
-		grid-template-columns: repeat(6, 1fr);
+		grid-template-columns: repeat(var(--ui5-form-columns-xl), 1fr);
 	}
 
-	.ui5-form-column-spanXL-2 {
-		grid-column: span 2;
-	}
-	.ui5-form-column-spanXL-2 .ui5-form-group-layout {
-		grid-template-columns: repeat(2, 1fr);
-	}
-
-	.ui5-form-column-spanXL-3 {
-		grid-column: span 3;
-	}
-	.ui5-form-column-spanXL-3 .ui5-form-group-layout {
-		grid-template-columns: repeat(3, 1fr);
-	}
-
-	.ui5-form-column-spanXL-4 {
-		grid-column: span 4;
-	}
-	.ui5-form-column-spanXL-4 .ui5-form-group-layout {
-		grid-template-columns: repeat(4, 1fr);
-
-	}
-
-	.ui5-form-column-spanXL-5 {
-		grid-column: span 5;
-	}
-	.ui5-form-column-spanXL-5 .ui5-form-group-layout {
-		grid-template-columns: repeat(5, 1fr);
-
+	.ui5-form-column {
+		grid-column: span var(--ui5-form-column-span-xl, 1);
 	}
 
-	.ui5-form-column-spanXL-6 {
-		grid-column: span 6;
-	}
-	.ui5-form-column-spanXL-6 .ui5-form-group-layout {
-		grid-template-columns: repeat(6, 1fr);
+	.ui5-form-group-layout {
+		column-count: var(--ui5-form-column-span-xl, 1)
 	}
-}
-
-.ui5-form-item-span-2 {
-	grid-column: span 2;
-}
-
-.ui5-form-item-span-3 {
-	grid-column: span 3;
-}
-
-.ui5-form-item-span-4 {
-	grid-column: span 4;
-}
-
-.ui5-form-item-span-5 {
-	grid-column: span 5;
-}
-.ui5-form-item-span-6 {
-	grid-column: span 6;
-}
+}

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);
 }