@ui5/webcomponents 2.6.2 → 2.7.0-rc.0

package/src/SelectTemplate.tsx

@@ -0,0 +1,68 @@
+import type Select from "./Select.js";
+import Icon from "./Icon.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import SelectPopoverTemplate from "./SelectPopoverTemplate.js";
+
+export default function SelectTemplate(this: Select) {
+	return (
+		<>
+			<div
+				class={{
+					"ui5-select-root": true,
+					"ui5-input-focusable-element": true,
+				}}
+				id={`${this._id}-select`}
+				onClick={this._onclick}
+			>
+				{this.selectedOptionIcon &&
+					<Icon
+						mode="Decorative"
+						class="ui5-select-option-icon"
+						name={this.selectedOptionIcon} />
+				}
+
+				<div
+					class="ui5-select-label-root"
+					data-sap-focus-ref
+					tabindex={this._effectiveTabIndex}
+					role="combobox"
+					aria-haspopup="listbox"
+					aria-label={this.ariaLabelText}
+					aria-describedby={this.valueStateTextId}
+					aria-disabled={this.isDisabled}
+					aria-required={this.required}
+					aria-readonly={this.readonly}
+					aria-expanded={this._isPickerOpen}
+					aria-roledescription={this._ariaRoleDescription}
+					onKeyDown={this._onkeydown}
+					onKeyPress={this._handleKeyboardNavigation}
+					onKeyUp={this._onkeyup}
+					onFocusIn={this._onfocusin}
+					onFocusOut={this._onfocusout}
+				>
+					{this.hasCustomLabel
+						? <slot name="label"></slot>
+						: this.text
+					}
+				</div>
+
+				{!this.readonly &&
+					<Icon
+						name={slimArrowDown}
+						class={{
+							"inputIcon": true,
+							"inputIcon--pressed": this._iconPressed,
+						}} />
+				}
+
+				{this.hasValueState &&
+					<span id={`${this._id}-valueStateDesc`} class="ui5-hidden-text">
+						{this.valueStateText}
+					</span>
+				}
+			</div>
+
+			{SelectPopoverTemplate.call(this)}
+		</>
+	);
+}

package/src/SliderBaseTemplate.tsx

@@ -24,7 +24,7 @@ export default function SliderBaseTemplate(this: SliderBase, hooks?: {
 			{(hooks?.handlesAriaText || handlesAriaText).call(this)}
 
 			<div class="ui5-slider-inner">
-				{this.step && this.showTickmarks && <>
+				{!!this.step && this.showTickmarks && <>
 					<ul class="ui5-slider-tickmarks">
 						{this.tickmarksObject.map(tm => <>
 							{tm ?
@@ -34,7 +34,7 @@ export default function SliderBaseTemplate(this: SliderBase, hooks?: {
 							}
 						</>)}
 					</ul>
-					{this.labelInterval &&
+					{!!this.labelInterval &&
 							<ul class={{
 								"ui5-slider-labels": true,
 								"ui5-slider-hidden-labels": this._labelsOverlapping,

package/src/SwitchTemplate.tsx

@@ -59,13 +59,7 @@ export default function SwitchTemplate(this: Switch) {
 							</>
 						}
 
-						<span class="ui5-switch-handle" part="handle">
-							{/*  this icon is used in the sap_horizon_exp theme */}
-							<Icon
-								name={this.sapNextIcon}
-								class="ui5-switch-handle-icon"
-							/>
-						</span>
+						<span class="ui5-switch-handle" part="handle"></span>
 					</div>
 				</div>
 			</div>

package/src/Table.hbs

@@ -14,7 +14,7 @@
     </div>
     {{#unless rows.length}}
         <ui5-table-row id="nodata-row">
-            <ui5-table-cell id="nodata-cell" excluded-from-navigation horizontal-align="center">
+            <ui5-table-cell id="nodata-cell" excluded-from-navigation horizontal-align="Center">
             {{#if nodata.length}}
                 <slot name="nodata"></slot>
             {{else}}

package/src/TableCell.hbs

@@ -1,9 +1,10 @@
 {{#if _popin}}
-	{{#if _popinHeader}}
-		<div class="popin-header-colon">
-			{{_popinHeader}}
-			<span class="popin-colon">{{_i18nPopinColon}}</span>
-		</div>
+	{{#if _popinText}}
+		{{_popinText}}
+		<span class="popin-colon">{{_i18nPopinColon}}</span>
+	{{else if _popinHeader}}
+		{{_popinHeader}}
+		<span class="popin-colon">{{_i18nPopinColon}}</span>
 	{{/if}}
 	<slot></slot>
 {{else}}

package/src/TableHeaderRow.hbs

@@ -19,6 +19,10 @@
 	<slot name="{{_individualSlot}}"></slot>
 {{/each}}
 
+{{#if _hasRowActions}}
+    <ui5-table-header-cell id="actions-cell" aria-label="{{_i18nRowActions}}"></ui5-table-header-cell>
+{{/if}}
+
 {{#if _popinCells.length}}
     <ui5-table-header-cell id="popin-cell" aria-label="{{_i18nRowPopin}}" excluded-from-navigation></ui5-table-cell>
 {{/if}}

package/src/TableRow.hbs

@@ -21,12 +21,31 @@
     <slot name="{{_individualSlot}}"></slot>
 {{/each}}
 
-{{#if _renderNavigated}}
-    <ui5-table-cell id="navigated-cell" excluded-from-navigation>
-        <div id="navigated"></div>
+{{#if _hasRowActions}}
+    <ui5-table-cell id="actions-cell">
+        {{#each _flexibleActions}}
+            <slot name="{{_individualSlot}}"></slot>
+        {{/each}}
+        {{#if _hasOverflowActions}}
+            <ui5-button
+                id="overflow"
+                icon="overflow"
+                design="Transparent"
+                @click="{{_onOverflowButtonClick}}">
+            </ui5-button>
+        {{/if}}
+         {{#each _fixedActions}}
+            <slot name="{{_individualSlot}}"></slot>
+        {{/each}}
     </ui5-table-cell>
 {{/if}}
 
+{{#if _renderNavigated}}
+        <ui5-table-cell id="navigated-cell" excluded-from-navigation>
+            <div id="navigated"></div>
+        </ui5-table-cell>
+{{/if}}
+
 {{#if _popinCells.length}}
     <ui5-table-cell id="popin-cell">
         {{#each _popinCells}}

package/src/TableRowActionBase.hbs

@@ -0,0 +1,17 @@
+{{#if invisible}}
+    <div></div>
+{{else if _isInteractive}}
+    <ui5-button
+        icon="{{_icon}}"
+        text="{{_text}}"
+        tooltip="{{_text}}"
+        @click={{_onActionClick}}
+        design="Transparent">
+    </ui5-button>
+{{else}}
+    <ui5-icon
+        name="{{_icon}}"
+        tooltip="{{_text}}"
+        design="Transparent">
+    </ui5-icon>
+{{/if}}

package/src/ToastTemplate.tsx

@@ -2,9 +2,11 @@ import type Toast from "./Toast.js";
 
 export default function ToastTemplate(this: Toast) {
 	return <>
-		this.open &&
-		<div class="ui5-toast-root" role="alert" tabindex={this._tabindex}>
-			<bdi><slot></slot></bdi>
-		</div>
+		{
+			this.open &&
+				<div class="ui5-toast-root" role="alert" tabindex={this._tabindex}>
+					<bdi><slot></slot></bdi>
+				</div>
+		}
 	</>;
 }

package/src/TokenizerPopoverTemplate.tsx

@@ -42,7 +42,6 @@ export default function TokenizerPopoverTemplate(this: Tokenizer) {
 				onItemDelete={this.itemDelete}
 			>
 				{this._tokens
-					.filter(token => token._isVisible)
 					.map(token => <ListItemStandard key={String(token._id)} data-ui5-token-ref-id={token._id} wrappingType="Normal">{token.text}</ListItemStandard>)}
 			</List>
 

package/src/TreeItemTemplate.tsx

@@ -15,7 +15,7 @@ export default function TreeItemTemplate(this: TreeItem, hooks?: Partial<ListIte
 function listItemContent(this: TreeItem) {
 	return <>
 		<div class="ui5-li-text-wrapper">
-			{this._showTitle &&
+			{!!this._showTitle &&
 				<div part="title" class="ui5-li-title"> {this.text}</div>
 			}
 		</div>

package/src/i18n/messagebundle.properties

@@ -606,4 +606,8 @@ TABLE_ROW_POPIN=Row Popin
 #XTXT: Text for the growing button
 TABLE_MORE=More
 #XACT: ARIA description for the growing button
-TABLE_MORE_DESCRIPTION=Load more rows by pressing Enter or Space
+TABLE_MORE_DESCRIPTION=To load more rows, press Enter or Space
+#XACT: ARIA description for the row action of the header cell
+TABLE_ROW_ACTIONS=Row Actions
+#XACT: ARIA description for the row action navigation
+TABLE_NAVIGATION=Navigation

package/src/themes/FormItem.css

@@ -17,6 +17,7 @@
 :host([column-span="5"]) {
 	grid-column: span 5;
 }
+
 :host([column-span="6"]) {
 	grid-column: span 6;
 }
@@ -40,6 +41,8 @@
 }
 
 .ui5-form-item-content {
+	overflow: hidden;
+	width: 100%;
 	display: flex;
 	padding: 0 0.25rem;
 }
@@ -57,13 +60,9 @@
 	box-sizing: border-box;
 }
 
-::slotted([ui5-input]) {
+::slotted(*) {
 	width: 100%;
 }
-::slotted([ui5-select]) {
-	width: 100%;
-}
-
 
 @container (max-width: 600px) {
 	:host {

package/src/themes/Label.css

@@ -44,7 +44,7 @@
 :host([required]) .ui5-label-required-colon:after {
 	content:"*";
 	color: var(--sapField_RequiredColor);
-	font-size: 1.25rem;
+	font-size: var(--sapFontLargeSize);
 	font-weight: bold;
 	position: relative;
 	font-style: normal;

package/src/themes/NavigationMenuItem.css

@@ -21,6 +21,9 @@
 	color: var(--sapList_TextColor);
 	font-weight: bold;
 	font-size: var(--sapFontSize);
+}
+
+:host([ui5-navigation-menu-item][selected]) {
 	border-bottom: none;
 }
 
@@ -38,7 +41,6 @@
 }
 
 .ui5-navigation-menu-item-root .ui5-sn-item-external-link-icon {
-	color: var(--_ui5_side_navigation_external_link_icon_color);
 	min-width: 2rem;
 	height: 0.875rem;
 }

package/src/themes/Switch.css

@@ -88,15 +88,6 @@
 	width: var(--_ui5_switch_handle_with_label_width);
 }
 
-.ui5-switch-handle-icon {
-	display: var(--_ui5-switch-handle-icon-display);
-	transition: var(--_ui5_switch_track_transition);
-}
-
-:host([checked]) .ui5-switch-handle-icon {
-	color: var(--_ui5-switch_track-on-background)
-}
-
 .ui5-switch-text {
 	display: flex;
 	justify-content: center;

package/src/themes/TableCellBase.css

@@ -6,7 +6,7 @@
     max-width: 100%;
     overflow: clip;
     overflow-clip-margin: content-box;
-    padding: var(--_ui5_table_cell_padding);
+    padding: var(--_ui5_table_cell_vertical_padding) var(--_ui5_table_cell_horizontal_padding);
     box-sizing: border-box;
 }
 

package/src/themes/TableRow.css

@@ -1,73 +1,96 @@
-: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);
+	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: 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;
+}
+
+#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,13 @@
+: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);
+}

package/src/themes/TableRowBase.css

@@ -14,6 +14,11 @@
 	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 */
+}
+
 #selection-cell {
 	padding: 0;
 	left: 0;
@@ -27,10 +32,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/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;

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

@@ -100,7 +100,6 @@
 	--_ui5_switch_handle_semantic_on_hover_box_shadow: var(--sapContent_Informative_Shadow);
 	--_ui5_switch_handle_semantic_off_hover_box_shadow: var(--sapContent_Negative_Shadow);
 
-	--_ui5-switch-handle-icon-display: none;
 	--_ui5_switch_handle_left: -0.0625rem;
 	--_ui5-switch-slider-texts-display: inline;
 

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

@@ -2,13 +2,7 @@
 	--_ui5_table_cell_valign: center;
 	--_ui5_table_cell_min_width: 2.75rem;
 	--_ui5_table_navigated_cell_width: 0.25rem;
-	--_ui5_table_shadow_border_left: inset var(--sapContent_FocusWidth) 0 var(--sapContent_FocusColor);
-	--_ui5_table_shadow_border_right: inset calc(-1 * var(--sapContent_FocusWidth)) 0 var(--sapContent_FocusColor);
-	--_ui5_table_shadow_border_top: inset 0 var(--sapContent_FocusWidth) var(--sapContent_FocusColor);
-	--_ui5_table_shadow_border_bottom: inset 0 -1px var(--sapContent_FocusColor);
-}
-
-[dir="rtl"] {
-	--_ui5_table_shadow_border_left:  inset calc(-1 * var(--sapContent_FocusWidth)) 0 var(--sapContent_FocusColor);
-	--_ui5_table_shadow_border_right: inset var(--sapContent_FocusWidth) 0 var(--sapContent_FocusColor);
+	--_ui5_table_cell_horizontal_padding: 0.5rem;
+	--_ui5_table_cell_vertical_padding: 0.25rem;
+	--_ui5_table_row_actions_gap: 0.25rem;
 }

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

@@ -1,5 +1,6 @@
 :root {
     --_ui5-toolbar-padding-left: 0.5rem;
 	--_ui5-toolbar-padding-right: 0.5rem;
-	--_ui5-toolbar-items-gap: 0.25rem;
+	--_ui5-toolbar-item-margin-left: 0;
+	--_ui5-toolbar-item-margin-right: 0.25rem;
 }

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

@@ -101,9 +101,6 @@
 	--_ui5_tl_li_margin_bottom: 1.625rem;
 
 	/*switch*/
-	--_ui5_switch_focus_width_size_horizon_exp: calc(100% + 4px);
-	--_ui5_switch_focus_height_size_horizon_exp: calc(100% + 4px);
-
 	--_ui5_tc_item_text: 3rem;
 	--_ui5_tc_item_height: 4.75rem;
 	--_ui5_tc_item_text_only_height: 2.75rem;
@@ -339,9 +336,6 @@
 	/* Responsive Popover */
 	--_ui5-responsive_popover_header_height: 2.5rem;
 
-	/* Side Navigation */
-	--ui5_side_navigation_item_height: 2rem;
-
 	/* Slider */
 	--_ui5_slider_handle_height: 1.25rem;
 	--_ui5_slider_handle_width: 1.5rem;

package/src/themes/sap_horizon/RadioButton-parameters.css

@@ -1,6 +1,11 @@
 @import "../base/RadioButton-parameters.css";
 
 :root {
+	--_ui5_radio_button_hover_fill: var(--sapField_Selector_Hover_Background);
+	--_ui5_radio_button_hover_fill_error: var(--sapField_Selector_Hover_InvalidBackground);
+	--_ui5_radio_button_hover_fill_warning: var(--sapField_Selector_Hover_WarningBackground);
+	--_ui5_radio_button_hover_fill_success: var(--sapField_Selector_Hover_SuccessBackground);
+	--_ui5_radio_button_hover_fill_information: var(--sapField_Selector_Hover_InformationBackground);
 	--_ui5_radio_button_border_width: var(--sapContent_FocusWidth);
 	--_ui5_radio_button_border_radius: 0.5rem;
 	--_ui5_radio_button_label_color: var(--sapField_TextColor);
@@ -11,7 +16,6 @@
 	--_ui5_radio_button_checked_warning_fill: var(--sapField_WarningColor);
 	--_ui5_radio_button_read_only_inner_ring_color: var(--sapField_TextColor);
 	--_ui5_radio_button_read_only_border_width: var(--sapElement_BorderWidth);
-	--_ui5_radio_button_hover_fill: var(--sapContent_Selected_Hover_Background);
 	--_ui5_radio_button_focus_dist: 0.375rem;
 }
 

package/src/themes/sap_horizon_dark/RadioButton-parameters.css

@@ -1,6 +1,11 @@
 @import "../base/RadioButton-parameters.css";
 
 :root {
+	--_ui5_radio_button_hover_fill: var(--sapField_Selector_Hover_Background);
+	--_ui5_radio_button_hover_fill_error: var(--sapField_Selector_Hover_InvalidBackground);
+	--_ui5_radio_button_hover_fill_warning: var(--sapField_Selector_Hover_WarningBackground);
+	--_ui5_radio_button_hover_fill_success: var(--sapField_Selector_Hover_SuccessBackground);
+	--_ui5_radio_button_hover_fill_information: var(--sapField_Selector_Hover_InformationBackground);
 	--_ui5_radio_button_border_width: var(--sapContent_FocusWidth);
 	--_ui5_radio_button_border_radius: 0.5rem;
 	--_ui5_radio_button_label_color: var(--sapField_TextColor);
@@ -11,7 +16,6 @@
 	--_ui5_radio_button_checked_warning_fill: var(--sapField_WarningColor);
 	--_ui5_radio_button_read_only_inner_ring_color: var(--sapField_TextColor);
 	--_ui5_radio_button_read_only_border_width: var(--sapElement_BorderWidth);
-	--_ui5_radio_button_hover_fill: var(--sapContent_Selected_Hover_Background);
 	--_ui5_radio_button_focus_dist: 0.375rem;
 }