@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/src/themes/TableRow.css

@@ -1,73 +1,99 @@
-:host {
-	background: var(--sapList_Background);
-}
-
-:host([position]) {
-	height: var(--row-height);
-	overflow: clip;
-}
-
-:host([aria-selected=true]) {
-	background-color: var(--sapList_SelectionBackgroundColor);
-	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor);
-}
-
-:host([_interactive]) {
-	cursor: pointer;
-}
-
-@media (hover: hover) {
-	:host([_interactive]:hover) {
-		background: var(--sapList_Hover_Background);
-	}
-	:host([_interactive][aria-selected=true]:hover) {
-		background: var(--sapList_Hover_SelectionBackground);
-	}
-}
-
-:host([_interactive]:active),
-:host([_interactive][_active]),
-:host([_interactive][aria-selected=true]:active),
-:host([_interactive][aria-selected=true][_active]) {
-	background: var(--sapList_Active_Background);
-}
-
-#popin-cell {
-	align-content: initial;
-	flex-direction: column;
-	grid-column: 1 / -1;
-}
-
-#navigated-cell {
-	position: relative;
-	overflow: visible;
-	grid-row: span 2;
-	min-width: 0;
-	padding: 0;
-	position: sticky;
-	right: 0;
-}
-
-:dir(rtl)#navigated-cell {
-	left: 0;
-}
-
-:host([navigated]) #navigated {
-	position: absolute;
-	inset: 0;
-    background-color: var(--sapList_SelectionBorderColor);
-}
-
-:host([tabindex]:focus) #navigated {
-	transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1));
-	bottom: 2px;
-	top: 3px;
-}
-
-:host([tabindex]:focus) #navigated:dir(rtl) {
-	transform: translateX(var(--_ui5_table_navigated_cell_width));
-}
-
-:host([navigated]) #popin-cell {
-	grid-column: 1 / -2;
-}
+:host {
+	background: var(--sapList_Background);
+}
+
+:host([position]) {
+	height: var(--row-height);
+}
+
+:host([aria-selected=true]) {
+	background-color: var(--sapList_SelectionBackgroundColor);
+	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor);
+}
+
+:host([_interactive]) {
+	cursor: pointer;
+}
+
+@media (hover: hover) {
+	:host([_interactive]:hover) {
+		background: var(--sapList_Hover_Background);
+	}
+	:host([_interactive][aria-selected=true]:hover) {
+		background: var(--sapList_Hover_SelectionBackground);
+	}
+}
+
+:host([_interactive]:active),
+:host([_interactive][_active]),
+:host([_interactive][aria-selected=true]:active),
+:host([_interactive][aria-selected=true][_active]) {
+	background: var(--sapList_Active_Background);
+}
+
+#popin-cell {
+	align-content: initial;
+	flex-direction: column;
+	grid-column: 1 / -1;
+}
+
+#navigated-cell {
+	position: sticky;
+	right: 0;
+	overflow: visible;
+	grid-row: span 2;
+	min-width: 0;
+	padding: 0;
+	background: inherit;
+}
+
+:dir(rtl)#navigated-cell {
+	left: 0;
+}
+
+:host([navigated]) #navigated {
+	position: absolute;
+	inset: 0;
+    background-color: var(--sapList_SelectionBorderColor);
+}
+
+:host([tabindex]:focus) #navigated {
+	transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1));
+	bottom: 2px;
+	top: 3px;
+}
+
+:host([tabindex]:focus) #navigated:dir(rtl) {
+	transform: translateX(var(--_ui5_table_navigated_cell_width));
+}
+
+:host([tabindex]:focus) #navigated-cell {
+	clip-path: inset(var(--sapContent_FocusWidth) var(--sapContent_FocusWidth) var(--sapContent_FocusWidth) calc(var(--_ui5_table_navigated_cell_width) * -1));
+}
+
+:host([tabindex]:focus) #navigated-cell:dir(rtl) {
+	clip-path: inset(var(--sapContent_FocusWidth) calc(var(--_ui5_table_navigated_cell_width) * -1) var(--sapContent_FocusWidth) var(--sapContent_FocusWidth));
+}
+
+:host([navigated]) #popin-cell {
+	grid-column: 1 / -2;
+}
+
+#selection-cell ~ #popin-cell {
+	grid-column-start: 2;
+}
+
+#actions-cell {
+	display: flex;
+	align-items: center;
+	gap: var(--_ui5_table_row_actions_gap);
+}
+
+#actions-cell:has(+ #navigated-cell) {
+	right: var(--_ui5_table_navigated_cell_width);
+	overflow: auto;
+}
+
+:dir(rtl)#actions-cell:has(+ #navigated-cell) {
+	left: var(--_ui5_table_navigated_cell_width);
+}

package/src/themes/TableRowActionBase.css

@@ -0,0 +1,14 @@
+:host([invisible]) {
+    display: block;
+    width: var(--_ui5_button_base_min_width);
+}
+
+:host([_fixed]) {
+    margin-inline-start: auto;
+}
+
+[ui5-icon] {
+    display: flex;
+    width: var(--_ui5_button_base_min_width);
+    height: 0.75rem;
+}

package/src/themes/TableRowBase.css

@@ -5,8 +5,7 @@
 	min-height: var(--_ui5_list_item_base_height);
 	box-sizing: border-box;
 	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
-	border-right: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
-	border-left: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
+	overflow: clip;
 }
 
 :host([tabindex]:focus) {
@@ -14,6 +13,22 @@
 	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
 }
 
+:host([tabindex]:focus) #selection-cell,
+:host([tabindex]:focus) #actions-cell {
+	clip-path: inset(var(--sapContent_FocusWidth)); /* focus outline should not overlap sticky cells */
+}
+
+::slotted([ui5-table-cell]:first-of-type),
+::slotted([ui5-table-header-cell]:first-of-type),
+#popin-cell {
+	padding-inline-start: var(--_ui5_first_table_cell_horizontal_padding);
+}
+
+#selection-cell + ::slotted([ui5-table-cell-base]:first-of-type),
+#selection-cell ~ #popin-cell {
+	padding-inline-start: var(--_ui5_table_cell_horizontal_padding);
+}
+
 #selection-cell {
 	padding: 0;
 	left: 0;
@@ -27,10 +42,13 @@
 	vertical-align: middle;
 }
 
-/** Focus outline for the selection cell */
-:host([tabindex]:focus) #selection-cell {
-    outline: none;
-    box-shadow: var(--_ui5_table_shadow_border_top),
-				var(--_ui5_table_shadow_border_left),
-				var(--_ui5_table_shadow_border_bottom); /* There is a 1px difference between row and cell, therefore the outline is also 1px difference between their outline offsets */
+#actions-cell {
+	position: sticky;
+	right: 0;
+	background-color: inherit;
+	flex-wrap: nowrap;
 }
+
+:dir(rtl)#actions-cell {
+	left: 0;
+}

package/src/themes/Tag.css

@@ -14,7 +14,7 @@
 
 .ui5-tag-root {
 	display: flex;
-	align-items: center;
+	align-items: baseline;
 	justify-content: center;
 	width: 100%;
 	min-width: 1.125em;
@@ -74,11 +74,6 @@
 	align-self: flex-start;
 }
 
-:host([wrapping-type="None"]) [ui5-icon],
-:host([wrapping-type="None"]) ::slotted([ui5-icon]) {
-	align-self: auto;
-}
-
 /* Value State Design Types */
 .ui5-tag-root {
 	background-color: var(--sapNeutralBackground);

package/src/themes/Text.css

@@ -1,22 +1,26 @@
 :host {
-	display: inline-block;
 	max-width: 100%;
 	font-size: var(--sapFontSize);
 	font-family: var(--sapFontFamily);
 	color: var(--sapTextColor);
 	line-height: normal;
-	white-space: pre-line;
-	word-wrap: break-word;
 	cursor: text;
+	overflow: hidden;
+}
+
+:host([max-lines="1"]) {
+	display: inline-block;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-:host([max-lines]) {
+:host(:not([max-lines="1"])) {
 	display: -webkit-box;
 	-webkit-line-clamp: var(--_ui5_text_max_lines);
 	line-clamp: var(--_ui5_text_max_lines);
 	-webkit-box-orient: vertical;
-	overflow: hidden;
 	white-space: normal;
+	word-wrap: break-word;
 }
 
 .empty-indicator-aria-label {

package/src/themes/TextArea.css

@@ -92,7 +92,6 @@
 	content: var(--_ui5_textarea_focus_pseudo_element_content);
 	position: absolute;
 	pointer-events: none;
-	z-index: 2;
 	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_textarea_focus_outline_color);
 	border-radius: var(--_ui5_textarea_focus_border_radius);
 	top: var(--_ui5_textarea_focus_offset);
@@ -140,22 +139,25 @@
 
 :host([growing]) .ui5-textarea-inner {
 	box-sizing: border-box;
-	height: 100%;
- 	position: absolute;
-	top: 0;
-	left: 0;
+	height: calc(100% - (2 * var(--_ui5_textarea_wrapper_padding)));
+	width: calc(100% - (2 * var(--_ui5_textarea_wrapper_padding)));
+	position: absolute;
+}
+
+:host([growing]:not([growing-max-rows])) .ui5-textarea-inner {
+	overflow: hidden;
 }
 
+
 .ui5-textarea-mirror {
 	box-sizing: border-box;
 	line-height: var(--_ui5_textarea_line_height);
 	visibility: hidden;
 	width: 100%;
 	max-height: 94vh;
+	word-break: break-word;
 	min-height: calc((var(--_textarea_rows) * var(--_ui5_textarea_line_height)) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
-	word-break: break-all;
-	padding-top: var(--_ui5_textarea_padding_top);
-	padding-bottom: var(--_ui5_textarea_padding_bottom);
+	padding: var(--_ui5_textarea_padding_top) var(--_ui5_textarea_padding_right_and_left) var(--_ui5_textarea_padding_bottom);
 	font-size: var(--sapFontSize);
 	font-family: "72override", var(--sapFontFamily);
 	white-space: pre-wrap;
@@ -420,22 +422,6 @@
 	border-bottom-right-radius: var(--sapField_BorderCornerRadius);
 }
 
-:host([value-state="Negative"]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
-	background-color: var(--sapScrollBar_TrackColor);
-}
-
-:host([value-state="Critical"]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
-	background-color: var(--sapScrollBar_TrackColor);
-}
-
-:host([value-state="Information"]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
-	background-color: var(--sapScrollBar_TrackColor);
-}
-
-:host([value-state="Positive"]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
-	background-color: var(--sapScrollBar_TrackColor);
-}
-
 :host([focused]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
 	background-image: none;
 }

package/src/themes/TimePicker.css

@@ -47,4 +47,8 @@
 	word-spacing: inherit;
 	margin: inherit;
 	height: inherit;
+}
+
+.ui5-time-picker-popover::part(header) {
+	padding: 0;
 }

package/src/themes/TimePickerClock.css

@@ -29,10 +29,7 @@
 	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	color: var(--sapContent_LabelColor);
-	top: 2.75rem;
-	left: 2.75rem;
-	bottom: 2.75rem;
-	right: 2.75rem;
+	inset: 2.75rem;
 	border-radius: 100%;
 	z-index: 2;
 }
@@ -49,10 +46,7 @@
 
 .ui5-tp-clock-cover {
 	position: absolute;
-	top: 0.5625rem;
-	left: 0.5625rem;
-	bottom: 0.5625rem;
-	right: 0.5625rem;
+	inset: -0.25rem;
 	border-radius: 100%;
 	z-index: 10;
 	touch-action: none;
@@ -98,7 +92,7 @@
 	background-color: var(--sapField_BorderColor);
 }
 
-.ui5-tp-clock-marker {
+.ui5-tp-clock-select-marker {
 	box-sizing: border-box;
 	width: 0.25rem;
 	height: 0.5625rem;
@@ -108,6 +102,16 @@
 	border: 0.0625rem solid var(--sapButton_Selected_BorderColor);
 }
 
+.ui5-tp-clock-hover-marker {
+	box-sizing: border-box;
+	width: 0.25rem;
+	height: 0.5625rem;
+	margin: 0 auto;
+	border-radius: 100%;
+	background-color: var(--sapList_Hover_Background);
+	border: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+}
+
 .ui5-tp-clock-number {
 	box-sizing: border-box;
 	display: inline-block;
@@ -120,10 +124,12 @@
 	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	color: var(--sapTextColor);
+	border: 0.0625rem solid transparent;
 }
 
 .ui5-tp-clock-number.ui5-tp-clock-number-hover:not(.ui5-tp-clock-selected) {
 	background-color: var(--sapList_Hover_Background);
+	z-index: 5;
 }
 
 .ui5-tp-clock-selected {
@@ -132,3 +138,168 @@
 	border: 0.0625rem solid var(--sapButton_Selected_BorderColor);
 }
 
+.ui5-tp-clock-hovered {
+	background-color: var(--sapList_Hover_Background);
+	z-index: 5;
+}
+
+.ui5-tp-clock-pointer {
+	cursor: pointer;
+}
+
+.ui5-tp-clock-items,
+.ui5-tp-clock-markers {
+	position: absolute;
+	inset: 0;
+}
+
+/* Animations */
+
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-items .ui5-tp-clock-number,
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-items .ui5-tp-clock-mid-dot,
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-number.ui5-tp-clock-selected,
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-select-marker,
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-dial::before {
+	opacity: 0;
+}
+
+.ui5-tp-clock-transition .ui5-tp-clock-items .ui5-tp-clock-number {
+	animation-name: fadeOutClockItems;
+	animation-delay: 0.15s;
+	animation-duration: 0.2s;
+	animation-timing-function: ease-out;
+	animation-fill-mode: forwards;
+}
+
+.ui5-tp-clock-transition .ui5-tp-clock-dial::before {
+	animation-name: fadeOutClockLabel;
+	animation-duration: 0.35s;
+	animation-timing-function: ease-out;
+	animation-fill-mode: forwards;
+}
+
+.ui5-tp-clock-transition .ui5-tp-clock-number.ui5-tp-clock-selected,
+.ui5-tp-clock-transition .ui5-tp-clock-select-marker {
+	animation-name: fadeOutSelectedItem;
+	animation-delay: 0.1s;
+	animation-duration: 0.15s;
+	animation-timing-function: ease-out;
+	animation-fill-mode: forwards;
+}
+
+.ui5-tp-clock-transition .ui5-tp-clock-items .ui5-tp-clock-mid-dot {
+	animation-name: fadeOutSelectedItem;
+	animation-delay: 0.15s;
+	animation-duration: 0.2s;
+	animation-timing-function: ease-out;
+	animation-fill-mode: forwards;
+}
+
+
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-items .ui5-tp-clock-number {
+	animation-name: fadeInClockItems;
+	animation-delay: 0.15s;
+	animation-duration: 0.2s;
+	animation-timing-function: ease-in;
+	animation-fill-mode: forwards;
+}
+
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-dial::before {
+	animation-name: fadeInClockLabel;
+	animation-duration: 0.35s;
+	animation-timing-function: ease-in;
+	animation-fill-mode: forwards;
+}
+
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-number.ui5-tp-clock-selected,
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-select-marker {
+	animation-name: fadeInSelectedItem;
+	animation-delay: 0.1s;
+	animation-duration: 0.15s;
+	animation-timing-function: ease-in;
+	animation-fill-mode: forwards;
+}
+
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-items .ui5-tp-clock-mid-dot {
+	animation-name: fadeInSelectedItem;
+	animation-delay: 0.15s;
+	animation-duration: 0.2s;
+	animation-timing-function: ease-in;
+	animation-fill-mode: forwards;
+}
+
+/* @keyframes */
+
+@keyframes fadeOutClockItems {
+	from {
+		opacity: 1;
+		display: block;
+	}
+	to {
+		opacity: 0;
+		display: block;
+	}
+}
+
+@keyframes fadeOutClockLabel {
+	from {
+		opacity: 1;
+		display: flex;
+		transform: translateY(0);
+	}
+	to {
+		opacity: 0;
+		display: flex;
+		transform: translateY(-16px);
+	}
+}
+
+@keyframes fadeOutSelectedItem {
+	from {
+		opacity: 1;
+		display: block;
+	}
+	to {
+		opacity: 0;
+		display: block;
+	}
+}
+
+@keyframes fadeInClockItems {
+	from {
+		opacity: 0;
+		display: block;
+	}
+	to {
+		opacity: 1;
+		display: block;
+	}
+}
+
+@keyframes fadeInClockLabel {
+	from {
+		opacity: 0;
+		display: flex;
+		transform: translateY(16px);
+	}
+	to {
+		opacity: 1;
+		display: flex;
+		transform: translateY(0px);
+	}
+}
+
+@keyframes fadeInSelectedItem {
+	from {
+		opacity: 0;
+		display: block;
+	}
+	50% {
+		opacity: 0.5;
+		display: block;
+	}
+	to {
+		opacity: 1;
+		display: block;
+	}
+}

package/src/themes/TimePickerPopover.css

@@ -17,3 +17,8 @@
 .ui5-time-picker-popover::part(content) {
 	padding: 0;
 }
+
+.ui5-time-picker-inputs-popover::part(header) {
+	padding: 0;
+	width: 100%;
+}

package/src/themes/Toast.css

@@ -1,6 +1,6 @@
 :host {
 	font-family: "72override", var(--sapFontFamily);
-	color: var(--sapList_TextColor);
+	color: var(--sapContent_ContrastTextColor);
 	font-size: var(--sapFontSize);
 	position: fixed;
 	display: none;

package/src/themes/Token.css

@@ -26,10 +26,18 @@
 	color: var(--sapButton_Selected_TextColor);
 }
 
-:host([selected]) .ui5-token--wrapper {
+:host([selected]) .ui5-token--wrapper::before {
+	content: "";
+	position: absolute;
 	border-bottom: var(--_ui5_token_selected_internal_border_bottom);
 	border-bottom-left-radius: var(--_ui5_token_selected_internal_border_bottom_radius);
 	border-bottom-right-radius: var(--_ui5_token_selected_internal_border_bottom_radius);
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 0;
+	background: transparent;
+	pointer-events: none;
 }
 
 :host([selected]:hover) {
@@ -50,12 +58,6 @@
 	outline: var(--_ui5_token_selected_focus_outline);
 }
 
-:host([selected]) .ui5-token--text,
-:host([selected]) .ui5-token--icon {
-	top: var(--_ui5_token_text_icon_top);
-	position: relative;
-}
-
 :host([focused][selected]:not(:hover)) {
 	background: var(--sapButton_Selected_Background);
 	color: var(--sapButton_Selected_TextColor);
@@ -68,6 +70,7 @@
 	height: 100%;
 	width: 100%;
 	cursor: pointer;
+	position: relative;
 	padding-inline-start: var(--_ui5_token_left_padding);
 	box-sizing: border-box;
 	font-size: var(--sapFontSize);
@@ -100,9 +103,6 @@
 	right: var(--_ui5_token_focus_offset);
 }
 
-:host([focused][selected]) .ui5-token--wrapper:focus::after {
-	bottom: var(--_ui5_token_selected_focused_offset_bottom)
-}
 
 .ui5-token--text {
 	white-space: nowrap;

package/src/themes/Toolbar.css

@@ -20,7 +20,6 @@
 	display: inherit;
 	align-items: inherit;
 	justify-content: inherit;
-	gap: var(--_ui5-toolbar-items-gap);
 }
 
 .ui5-tb-items-full-width {
@@ -31,6 +30,19 @@
 	flex-shrink: 0;
 }
 
+.ui5-tb-item {
+	margin-inline-end: var(--_ui5-toolbar-item-margin-right);
+	margin-inline-start: var(--_ui5-toolbar-item-margin-left);
+}
+
+/* Last visible element should not have margins.
+Last element is: overflow button or tb-item when overflow button is hidden */
+.ui5-tb-overflow-btn,
+.ui5-tb-items:has(.ui5-tb-overflow-btn-hidden) .ui5-tb-item:nth-last-child(2) {
+	margin-inline-end: 0;
+	margin-inline-start: 0;
+}
+
 .ui5-tb-separator {
 	height: var(--_ui5-toolbar-separator-height);
 	width: 0.0625rem;