@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/src/themes/FormLayout.css

@@ -1,159 +1,76 @@
-/* 
-* 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: 600px) {
+@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 (width > 600px) and (width <= 1024px) {
+@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)
 	}
 }
 
 /* L - 2 columns by default, up to 3 columns */
-@container (width > 1024px) and (width <= 1440px) {
+@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: 1441px) {
+@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/Input.css

@@ -509,3 +509,8 @@
 	-webkit-appearance: inherit;
 	margin: inherit;
 }
+
+
+[ui5-responsive-popover] [ui5-input] {
+	width: 100%;
+}

package/src/themes/List.css

@@ -17,7 +17,8 @@
 }
 
 .ui5-list-root,
-.ui5-list-busy-indicator {
+.ui5-list-busy-indicator,
+.ui5-list-container {
 	width: 100%;
 	height: 100%;
 	position: relative;
@@ -111,4 +112,11 @@
 :host([growing="Scroll"]) .ui5-list-end-marker {
 	/* Ensure the list-end-marker has a block property to always be stretched and "visible" on the screen */
 	display: inline-block;
+}
+
+:host([sticky-header]) ::slotted([slot="header"]),
+:host([sticky-header]) .ui5-list-header {
+	position: sticky;
+    top: 0;
+    z-index: 100;
 }

package/src/themes/ListItemBase.css

@@ -34,16 +34,16 @@
 }
 
 /* hovered */
-:host([actionable]:not([active]):not([selected]):not([ui5-li-group-header]):hover) {
+:host([actionable]:not([active]):not(:active):not([selected]):not([ui5-li-group-header]):hover) {
     background-color: var(--sapList_Hover_Background);
 }
 
-:host([actionable]:not([active]):not([selected]):not([ui5-li-group-header]):hover) .ui5-li-additional-text {
+:host([actionable]:not([active]):not(:active):not([selected]):not([ui5-li-group-header]):hover) .ui5-li-additional-text {
 	text-shadow: var(--sapContent_TextShadow);
 }
 
 /* selected and hovered */
-:host([actionable][selected]:not([active], [data-moving]):hover) {
+:host([actionable][selected]:not([active]):not(:active):not([data-moving]):hover) {
 	background-color: var(--sapList_Hover_SelectionBackground);
 }
 
@@ -51,6 +51,7 @@
 :host([active][actionable]:not([data-moving])),
 :host([active][actionable][selected]:not([data-moving])) {
 	background-color: var(--sapList_Active_Background);
+	border-bottom-color: var(--sapList_Active_Background);
 }
 
 /* focused */

package/src/themes/Menu.css

@@ -19,6 +19,14 @@
 
 .ui5-menu-busy-indicator {
 	width: 100%;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.ui5-menu-busy-indicator-main {
+	min-height: var(--_ui5_list_item_base_height);
 }
 
 .ui5-menu-dialog-header {
@@ -53,3 +61,12 @@
 .ui5-menu-back-button {
 	margin-right: 1rem;
 }
+
+.ui5-menu-dialog-footer {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 0 1rem;
+	width: 100%;
+	border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
+}

package/src/themes/MenuItem.css

@@ -5,11 +5,6 @@
 	margin-inline: var(--_ui5_menu_submenu_margin_offset);
 }
 
-.ui5-menu-rp.ui5-menu-rp-sub-menu[actual-placement="Start"] {
-	margin-top: 0.25rem;
-	margin-inline: var(--_ui5_menu_submenu_placement_type_left_margin_offset);
-}
-
 :host([disabled]) {
 	pointer-events: initial;
 	opacity: initial;
@@ -63,6 +58,7 @@
 	white-space: nowrap;
 	pointer-events: none;
 	display: inline-block;
+	font-size: var(--sapFontSize);
 }
 
 .ui5-menu-item-dummy-icon {
@@ -128,4 +124,17 @@
 .ui5-menu-item-icon-checked {
 	color: var(--sapContent_BusyColor);
 	padding-top: 0.25rem;
+}
+
+.ui5-menu-item-end-content {
+	display: inline-flex;
+	align-items: center;
+}
+
+.ui5-menu-busy-indicator {
+	position: absolute;
+	width: 100%;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
 }

package/src/themes/MonthPicker.css

@@ -48,8 +48,8 @@
 }
 
 .ui5-dp-monthsectext {
-	font-size: 0.75rem;
-	color: var(--sapNeutralElementColor);
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapTextColor);
 }
 
 .ui5-mp-item.ui5-mp-item--selected,

package/src/themes/MultiComboBox.css

@@ -8,7 +8,7 @@
 }
 
 :host([tokenizer-available]) {
-	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
+	min-width: calc(var(--_ui5_input_min_width_tokenizer_available) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
 }
 
 :host(:not([hidden])) {
@@ -25,7 +25,7 @@
 
 .ui5-multi-combobox-tokenizer {
 	min-width: var(--_ui5_input_tokenizer_min_width);
-	max-width: calc(100% - 3rem - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
+	max-width: calc(100% - var(--_ui5_input_min_width_tokenizer_available) - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
 	border: none;
 	width: auto;
 	height: 100%;
@@ -48,7 +48,9 @@
 }
 
 :host([tokenizer-available]) [inner-input] {
-	padding-inline-start: var(--_ui5_input_inner_space_to_tokenizer);
+	padding-inline-start: 0;
+	padding-inline-end: var(--_ui5_input_inner_with_tokenizer_padding_inline_end);
+	min-width: var(--_ui5_input_min_width_tokenizer_available);
 }
 
 :host(:not([tokenizer-available])) .ui5-multi-combobox-tokenizer {

package/src/themes/MultiComboBoxPopover.css

@@ -1,7 +1,3 @@
-.ui5-suggestions-popover .ui5-multi-combobox-all-items-list {
-	--_ui5_checkbox_width_height: var(--_ui5_list_item_dropdown_base_height);
-}
-
 .ui5-mcb-select-all-header {
 	width: 100%;
 	height: 44px;
@@ -40,3 +36,24 @@
 [ui5-responsive-popover] .ui5-valuestatemessage-header, [ui5-popover] .ui5-valuestatemessage-header  {
 	max-width: inherit;
 }
+
+.ui5-multi-combobox-busy {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%,-50%);
+	z-index: 42;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	pointer-events: all;
+	width: 100%;
+}
+
+.ui5-multi-combobox-busy:not([active]) {
+	display: none;
+}
+
+[ui5-responsive-popover] [ui5-input] {
+	width: 100%;
+}

package/src/themes/MultiInput.css

@@ -5,12 +5,12 @@
 }
 
 :host([tokenizer-available]) {
-	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
+	min-width: calc(var(--_ui5_input_min_width_tokenizer_available) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
 }
 
 .ui5-multi-input-tokenizer {
 	min-width: var(--_ui5_input_tokenizer_min_width);
-	max-width: calc(100% - 3rem - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
+	max-width: calc(100% - var(--_ui5_input_min_width_tokenizer_available) - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
 	border: none;
 	width: auto;
 	height: 100%;
@@ -29,7 +29,9 @@
 }
 
 :host([tokenizer-available]) [inner-input] {
-	padding-inline-start: var(--_ui5_input_inner_space_to_tokenizer);
+	padding-inline-start: 0;
+	padding-inline-end: var(--_ui5_input_inner_with_tokenizer_padding_inline_end);
+	min-width: var(--_ui5_input_min_width_tokenizer_available);
 }
 
 :host(:not([tokenizer-available])) .ui5-multi-input-tokenizer {

package/src/themes/OptionBase.css

@@ -1,4 +1,10 @@
 :host {
 	height: var(--_ui5_list_item_dropdown_base_height);
 	--_ui5_list_item_title_size: var(--sapFontSize);
+}
+
+:host(:active[actionable]:not([data-moving])),
+:host(:active[actionable][selected]:not([data-moving])) {
+	background-color: var(--sapList_Active_Background);
+	border-bottom-color: var(--sapList_Active_Background);
 }

package/src/themes/Panel.css

@@ -59,10 +59,14 @@
 	right: var(--_ui5_panel_focus_offset);
 }
 
-:host(:not([collapsed]):not([_has-header]):not([fixed])) .ui5-panel-header:focus:after {
+:host(:not([collapsed]):not([_has-header]):not([fixed])) .ui5-panel-header:focus::after {
 	border-radius: var(--_ui5_panel_border_radius_expanded);
 }
 
+:host([_touched]:not([_has-header]):not([fixed])) .ui5-panel-header:focus::after {
+	display: none;
+}
+
 :host(:not([collapsed])) .ui5-panel-header-button:not(.ui5-panel-header-button-with-icon),
 :host(:not([collapsed])) .ui5-panel-header-icon-wrapper [ui5-icon] {
 	transform: var(--_ui5_panel_toggle_btn_rotation);

package/src/themes/Popover.css

@@ -20,13 +20,13 @@
 }
 
 /* pointing right arrow */
-:host([actual-placement="Start"]) .ui5-popover-arrow {
+:host([actual-placement="Left"]) .ui5-popover-arrow {
 	top: calc(50% - 0.5625rem);
 	right: -0.5625rem;
 	width: 0.5625rem;
 }
 
-:host([actual-placement="Start"]) .ui5-popover-arrow:after {
+:host([actual-placement="Left"]) .ui5-popover-arrow:after {
 	margin: var(--_ui5_popover_right_arrow_margin);
 }
 
@@ -43,7 +43,7 @@
 
 /* pointing left arrow */
 :host(:not([actual-placement])) .ui5-popover-arrow,
-:host([actual-placement="End"]) .ui5-popover-arrow {
+:host([actual-placement="Right"]) .ui5-popover-arrow {
 	left: -0.5625rem;
 	top: calc(50% - 0.5625rem);
 	width: 0.5625rem;
@@ -51,7 +51,7 @@
 }
 
 :host(:not([actual-placement])) .ui5-popover-arrow:after,
-:host([actual-placement="End"]) .ui5-popover-arrow:after {
+:host([actual-placement="Right"]) .ui5-popover-arrow:after {
 	margin: var(--_ui5_popover_left_arrow_margin);
 }
 
@@ -90,3 +90,80 @@
 :host([modal]) .ui5-block-layer {
 	display: block;
 }
+
+/* resize handle */
+
+.ui5-popover-resize-handle {
+	position: absolute;
+	width: 1.5rem;
+	height: 1.5rem;
+	border-radius: 50%;
+	z-index: 1;
+}
+
+.ui5-popover-resize-handle [ui5-icon] {
+	position: absolute;
+	width: 1rem;
+	height: 1rem;
+	cursor: inherit;
+	color: var(--sapButton_Lite_TextColor);
+	--rotAngle: 0;
+	--scaleX: 1;
+	transform: rotate(var(--rotAngle)) scaleX(var(--scaleX));
+}
+
+.ui5-popover-rtl .ui5-popover-resize-handle [ui5-icon] {
+	--scaleX: -1;
+}
+
+.ui5-popover-resize-handle-top-right .ui5-popover-resize-handle {
+	top: -0.5rem;
+	right: -0.5rem;
+	cursor: ne-resize;
+}
+
+.ui5-popover-resize-handle-top-right .ui5-popover-resize-handle [ui5-icon] {
+	bottom: 0;
+	left: 0;
+	--rotAngle: 270deg;
+}
+
+.ui5-popover-resize-handle-top-left .ui5-popover-resize-handle {
+	top: -0.5rem;
+	left: -0.5rem;
+	cursor: nw-resize;
+}
+
+.ui5-popover-resize-handle-top-left .ui5-popover-resize-handle [ui5-icon] {
+	bottom: 0;
+	right: 0;
+	--rotAngle: 180deg;
+}
+
+.ui5-popover-resize-handle-bottom-left .ui5-popover-resize-handle {
+	bottom: -0.5rem;
+	left: -0.5rem;
+	cursor: ne-resize;
+}
+
+.ui5-popover-resize-handle-bottom-left .ui5-popover-resize-handle [ui5-icon] {
+	top: 0;
+	right: 0;
+	--rotAngle: 90deg;
+}
+
+.ui5-popover-resize-handle-bottom-right .ui5-popover-resize-handle {
+	bottom: -0.5rem;
+	right: -0.5rem;
+	cursor: nw-resize;
+}
+
+.ui5-popover-resize-handle-bottom-right .ui5-popover-resize-handle [ui5-icon] {
+	top: 0;
+	left: 0;
+}
+
+.ui5-popover-resizing,
+.ui5-popover-resizing * {
+	user-select: none !important;
+}

package/src/themes/Popup.css

@@ -9,4 +9,8 @@
 
 :host(:focus-visible) {
     outline: none;
+}
+
+:host(.ui5-popup-opening) {
+    opacity: 0.1;
 }

package/src/themes/PopupsCommon.css

@@ -127,3 +127,26 @@
 	padding-left: var(--_ui5_popup_header_footer_padding_xl);
 	padding-right: var(--_ui5_popup_header_footer_padding_xl);
 }
+
+::slotted([slot="footer"]) {
+	height: var(--_ui5_popup_footer_height);
+}
+
+::slotted([slot="footer"][ui5-bar][design="Footer"]) {
+	border-top: none;
+}
+
+::slotted([slot="header"][ui5-bar]) {
+	box-shadow: none;
+}
+
+::slotted([slot="footer"][ui5-toolbar]) {
+	border: 0;
+}
+
+::slotted([slot="footer"][ui5-bar][design="Footer"]),
+::slotted([slot="header"][ui5-bar][design="Header"]) {
+	--_ui5_bar-start-container-padding-start: 0;
+	--_ui5_bar-mid-container-padding-start-end: 0;
+	--_ui5_bar-end-container-padding-end: 0;
+}

package/src/themes/ProgressIndicator.css

@@ -44,6 +44,7 @@
 	box-sizing: border-box;
 	border: var(--_ui5_progress_indicator_bar_border_max);
 	border-radius: var(--_ui5_progress_indicator_bar_border_radius);
+	z-index: 1;
 }
 
 .ui5-progress-indicator-min-value .ui5-progress-indicator-bar,