@ui5/webcomponents 2.16.0-rc.0 → 2.16.0-rc.2

package/src/DayPickerTemplate.tsx

@@ -15,8 +15,6 @@ export default function DayPickerTemplate(this: DayPicker) {
 			onKeyUp={this._onkeyup}
 			onClick={this._onclick}
 			onMouseOver={this._onmouseover}
-			onFocusIn={this._onfocusin}
-			onFocusOut={this._onfocusout}
 		>
 			<div id={`${this._id}-content`} class="ui5-dp-content" role="grid" aria-roledescription={this.ariaRoledescription}>
 				<div role="row" class="ui5-dp-days-names-container">

package/src/FormTemplate.tsx

@@ -36,7 +36,7 @@ export default function FormTemplate(this: Form) {
 										}}
 										part="column"
 										>
-											<div class="ui5-form-group" role="form" aria-labelledby={groupItemInfo.accessibleNameRef}>
+											<div class="ui5-form-group" role="form" aria-labelledby={groupItemInfo.accessibleNameRef} aria-label={groupItemInfo.accessibleName}>
 												{groupItem.headerText &&
 												<div class="ui5-form-group-heading">
 													<Title id={`${groupItem._id}-group-header-text`} level={groupItem.headerLevel} size="H6">{groupItem.headerText}</Title>

package/src/ListTemplate.tsx

@@ -97,6 +97,7 @@ function moreRow(this: List) {
 				}}
 				aria-label={this.growingButtonAriaLabel}
 				aria-labelledby={this.growingButtonAriaLabelledBy}
+				aria-describedby={this.growingButtonAriaDescribedBy}
 				onClick={this._onLoadMoreClick}
 				onKeyDown={this._onLoadMoreKeydown}
 				onKeyUp={this._onLoadMoreKeyup}
@@ -111,8 +112,15 @@ function moreRow(this: List) {
 						active>
 					</BusyIndicator>
 				}
-				<span id={`${this._id}-growingButton-text`} class="ui5-growing-button-text" growing-button-text>{this._growingButtonText}</span>
+				<span id={`${this._id}-growingButton-text`} class="ui5-growing-button-text" growing-button-text>
+					{this._growingButtonText}
+				</span>
 			</div>
+			{this.accessibilityAttributes.growingButton?.description &&
+				<span id={`${this._id}-growingButton-description`} class="ui5-hidden-text">
+					{this.accessibilityAttributes.growingButton.description}
+				</span>
+			}
 		</div>
 	);
 }

package/src/MenuItemTemplate.tsx

@@ -93,7 +93,7 @@ function listItemPostContent(this: MenuItem) {
 		allowTargetOverlap={true}
 		placement={this.placement}
 		verticalAlign="Top"
-		accessibleName={this.acessibleNameText}
+		accessibleName={this.accessibleNameText}
 		onBeforeOpen={this._beforePopoverOpen}
 		onOpen={this._afterPopoverOpen}
 		onBeforeClose={this._beforePopoverClose}

package/src/MenuTemplate.tsx

@@ -18,7 +18,7 @@ export default function MenuTemplate(this: Menu) {
 			preventInitialFocus={true}
 			hideArrow={true}
 			allowTargetOverlap={true}
-			accessibleName={this.acessibleNameText}
+			accessibleName={this.accessibleNameText}
 			onBeforeOpen={this._beforePopoverOpen}
 			onOpen={this._afterPopoverOpen}
 			onBeforeClose={this._beforePopoverClose}

package/src/MonthPickerTemplate.tsx

@@ -13,6 +13,7 @@ export default function MonthPickerTemplate(this: MonthPicker) {
 			onKeyDown={this._onkeydown}
 			onKeyUp={this._onkeyup}
 			onClick={this._selectMonth}
+			onMouseDown={this._onmousedown}
 		>
 			{this._monthsInterval.map(months =>
 				<div role="row" class="ui5-mp-quarter">

package/src/SegmentedButtonItemTemplate.tsx

@@ -17,7 +17,7 @@ export default function SegmentedButtonItemTemplate(this: SegmentedButtonItem) {
 			tabindex={this.tabIndexValue ? parseInt(this.tabIndexValue) : undefined }
 			aria-label={this.ariaLabelText}
 			aria-description={this.ariaDescriptionText}
-			title={this.tooltip}
+			title={this.tooltip || this.slotTextContent}
 		>
 			{this.icon &&
 				<Icon

package/src/SegmentedButtonTemplate.tsx

@@ -1,10 +1,15 @@
 import type SegmentedButton from "./SegmentedButton.js";
+import SegmentedButtonContentMode from "./types/SegmentedButtonContentMode.js";
 
 export default function SegmentedButtonTemplate(this: SegmentedButton) {
 	return (
 		<ul
 			role="listbox"
-			class="ui5-segmented-button-root"
+			class={{
+				"ui5-segmented-button-root": true,
+				"ui5-segmented-button-root-equal-sized-items": this.contentMode === SegmentedButtonContentMode.EqualSized,
+				"ui5-segmented-button-root-content-fit-items": this.contentMode === SegmentedButtonContentMode.ContentFit,
+			}}
 			onClick={this._onclick}
 			onMouseDown={this._onmousedown}
 			onKeyDown={this._onkeydown}

package/src/TableHeaderRowTemplate.tsx

@@ -45,27 +45,26 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde
 
 			{ this.cells.flatMap(cell => {
 				if (cell._popin) {
+					cell.role = null;
 					cell.ariaColIndex = null;
 					return [];
 				}
-				cell.ariaColIndex = `${ariaColIndex++}`;
+
+				cell.role ??= cell.ariaRole;
+				cell.ariaColIndex = (cell.role === cell.ariaRole) ? `${ariaColIndex++}` : null;
 				return [<slot name={cell._individualSlot}></slot>];
 			})}
 
 			{ this._rowActionCount > 0 &&
-				<TableHeaderCell id="actions-cell"
-					aria-colindex={ariaColIndex++}
-				>
+				<TableHeaderCell id="actions-cell" aria-colindex={ariaColIndex++}>
 					<div id="actions-cell-content">{this._i18nRowActions}</div>
 				</TableHeaderCell>
 			}
 
 			{ this._popinCells.length > 0 &&
-				<TableHeaderCell id="popin-cell"
-					aria-colindex={ariaColIndex++}
-					aria-label={this._i18nRowPopin}
-					data-excluded-from-navigation
-				></TableHeaderCell>
+				<TableHeaderCell id="popin-cell" aria-colindex={ariaColIndex++} data-excluded-from-navigation>
+					<div id="popin-cell-content">{this._i18nRowPopin}</div>
+				</TableHeaderCell>
 			}
 		</>
 	);

package/src/TableRowTemplate.tsx

@@ -38,10 +38,13 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
 
 			{ this.cells.flatMap(cell => {
 				if (cell._popin) {
+					cell.role = null;
 					cell.ariaColIndex = null;
 					return [];
 				}
-				cell.ariaColIndex = `${ariaColIndex++}`;
+
+				cell.role ??= cell.ariaRole;
+				cell.ariaColIndex = (cell.role === cell.ariaRole) ? `${ariaColIndex++}` : null;
 				return [<slot name={cell._individualSlot}></slot>];
 			})}
 
@@ -72,6 +75,7 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
 				<TableCell id="navigated-cell"
 					data-excluded-from-navigation
 					aria-hidden={true}
+					role="none"
 				>
 					<div id="navigated"></div>
 				</TableCell>

package/src/TableTemplate.tsx

@@ -37,22 +37,12 @@ export default function TableTemplate(this: Table) {
 					</TableRow>
 				}
 
-				{ this.rows.length > 0 && this._getGrowing()?.hasGrowingComponent() &&
-					<div id="footer" role="rowgroup">
-						{ growingRow.call(this) }
-					</div>
-				}
-
 				<DropIndicator
 					orientation="Horizontal"
 					ownerReference={this}
 				></DropIndicator>
 
-				<div aria-hidden="true" id="table-end-row">
-					<div id="table-end-cell">
-						<div id="table-end" aria-hidden="true" tabindex={-1}></div>
-					</div>
-				</div>
+				<div aria-hidden="true" id="table-end-row"></div>
 
 				{ this.loading &&
 					<BusyIndicator id="loading"
@@ -64,16 +54,10 @@ export default function TableTemplate(this: Table) {
 			</div>
 
 			<div id="after" role="none" tabindex={0} ui5-table-dummy-focus-area></div>
-		</>
-	);
-}
 
-function growingRow(this: Table) {
-	return (
-		<TableRow id="growing-row" ui5-growing-row aria-hidden={true}>
-			<TableCell id="growing-cell">
+			{ this.rows.length > 0 && this._getGrowing()?.hasGrowingComponent() &&
 				<slot name={this._getGrowing()?._individualSlot}></slot>
-			</TableCell>
-		</TableRow>
+			}
+		</>
 	);
 }

package/src/TextAreaTemplate.tsx

@@ -51,6 +51,10 @@ export default function TextAreaTemplate(this: TextArea) {
 				<span class="ui5-textarea-exceeded-text">{this._exceededTextProps.exceededText}</span>
 				}
 
+				{this.ariaDescriptionText &&
+				<span id="accessibleDescription" class="ui5-hidden-text">{this.ariaDescriptionText}</span>
+				}
+
 				{this.hasValueState &&
 				<span id={`${this._id}-valueStateDesc`} class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
 				}

package/src/TimePickerTemplate.tsx

@@ -39,6 +39,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 							name={timeEntryRequest}
 							tabindex={-1}
 							showTooltip={true}
+							mode={this._iconMode}
 							onClick={this._togglePicker}
 							class={{
 								"ui5-time-picker-input-icon-button": true,

package/src/dynamic-date-range-options/DateTimeRangeTemplate.tsx

@@ -0,0 +1,62 @@
+import DynamicDateRange from "../DynamicDateRange.js";
+import DateTimePicker from "../DateTimePicker.js";
+import Label from "../Label.js";
+import {
+	DYNAMIC_DATE_TIME_RANGE_TEXT_TO_LABEL,
+	DYNAMIC_DATE_TIME_RANGE_TEXT_FROM_LABEL,
+} from "../generated/i18n/i18n-defaults.js";
+
+export default function DateTimeRangeTemplate(this: DynamicDateRange) {
+	const currentOperator = this.currentValue?.operator || "DATETIMERANGE";
+
+	const getDateFromValue = (index = 0) => {
+		if (this.value?.operator === currentOperator && this.value.values && this.value.values.length === 2) {
+			return this.getOption(this.value.operator)?.format(this.value)?.split("-")[index].trim();
+		}
+		return undefined;
+	};
+
+	const handleSelectionChange = () => {
+		const fromPicker = this.shadowRoot?.querySelector("[ui5-datetime-picker]#from-picker") as DateTimePicker;
+		const toPicker = this.shadowRoot?.querySelector("[ui5-datetime-picker]#to-picker") as DateTimePicker;
+
+		const fromDateValue = fromPicker.dateValue;
+		const toDateValue = toPicker.dateValue;
+
+		// If there are no dates selected, clear the value
+		if (!(fromDateValue && toDateValue)) {
+			this.currentValue = {
+				operator: currentOperator,
+				values: []
+			};
+			return;
+		}
+
+		const newValue = [fromDateValue, toDateValue];
+
+		if (newValue[0] && newValue[1] && newValue[0].getTime() > newValue[1].getTime()) {
+			newValue.reverse();
+		}
+
+		this.currentValue = {
+			operator: currentOperator,
+			values: newValue,
+		};
+	};
+	return (
+		<div class="ui5-last-next-container ui5-last-next-container-padded">
+			<Label class="ui5-ddr-label">{DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_TIME_RANGE_TEXT_FROM_LABEL)}</Label>
+			<DateTimePicker
+				id="from-picker"
+				onChange={handleSelectionChange}
+				value={getDateFromValue()}>
+			</DateTimePicker>
+			<Label class="ui5-ddr-label">{DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_TIME_RANGE_TEXT_TO_LABEL)}</Label>
+			<DateTimePicker
+				id="to-picker"
+				onChange={handleSelectionChange}
+				value={getDateFromValue(1)}>
+			</DateTimePicker>
+		</div>
+	);
+}

package/src/dynamic-date-range-options/FromDateTimeTemplate.tsx

@@ -0,0 +1,53 @@
+import type DynamicDateRange from "../DynamicDateRange.js";
+import Calendar from "../Calendar.js";
+import CalendarDate from "../CalendarDate.js";
+import SegmentedButton from "../SegmentedButton.js";
+import SegmentedButtonItem from "../SegmentedButtonItem.js";
+import TimeSelectionClocks from "../TimeSelectionClocks.js";
+import type FromDateTimeOption from "./FromDateTime.js";
+
+export default function FromDateTime(this: DynamicDateRange) {
+	const currentOption = this._currentOption as FromDateTimeOption;
+	const currentValue = this.value?.values ? this.value.values[0] as Date : undefined;
+	return (
+		<div class="ui5-dynamic-date-range-option-datetime-container">
+			<div class="ui5-dt-picker-header">
+				<SegmentedButton class="ui5-dt-picker-toggle-button" onSelectionChange={this.handleSelectionChange}>
+					<SegmentedButtonItem data-ui5-key="Date" selected={currentOption.showDateView}>{currentOption.btnDateLabel}</SegmentedButtonItem>
+					<SegmentedButtonItem data-ui5-key="Time" selected={currentOption.showTimeView}>{currentOption.btnTimeLabel}</SegmentedButtonItem>
+				</SegmentedButton>
+			</div>
+
+			<div class={{
+				"ui5-dt-picker-content": true,
+			}}>
+				{!!currentOption.showDateView &&
+					<Calendar
+						class={{
+							"ui5-dt-cal": true,
+							"ui5-dt-cal--hidden": currentOption.showTimeView,
+							"ui5-dt-time--hidden": currentOption.showDateView,
+						}}
+						onSelectionChange={this.handleSelectionChange}
+					>
+						<CalendarDate
+							value={currentOption.getDateValue(currentValue)}
+						></CalendarDate>
+					</Calendar>
+				}
+
+				{!!currentOption.showTimeView &&
+					<TimeSelectionClocks
+						class={{
+							"ui5-dt-time": true,
+							"ui5-dt-cal--hidden": currentOption.showTimeView,
+							"ui5-dt-time--hidden": currentOption.showDateView,
+						}}
+						value={currentOption.getTimeValue(currentValue)}
+						onChange={this.handleSelectionChange}
+					/>
+				}
+			</div>
+		</div>
+	);
+}

package/src/features/InputSuggestionsTemplate.tsx

@@ -44,7 +44,6 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
 									showClearIcon={this.showClearIcon}
 									placeholder={this.placeholder}
 									onInput={this._handleInput}
-									onChange={this._handleChange}
 								/>
 							</div>
 						</div>
@@ -79,14 +78,14 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
 				<div slot="footer" class="ui5-responsive-popover-footer">
 					<Button
 						design="Emphasized"
-						onClick={this._closePicker}
+						onClick={this._confirmMobileValue}
 					>
 						{this._suggestionsOkButtonText}
 					</Button>
 					<Button
 						class="ui5-responsive-popover-close-btn"
 						design="Transparent"
-						onClick={this._closePicker}
+						onClick={this._cancelMobileValue}
 					>
 						{this._suggestionsCancelButtonText}
 					</Button>

package/src/i18n/messagebundle.properties

@@ -73,8 +73,8 @@ BUTTON_ARIA_TYPE_ACCEPT=Positive Action
 #XACT: ARIA announcement for the reject button
 BUTTON_ARIA_TYPE_REJECT=Negative Action
 
-#XACT: ARIA announcement for the emphasized button
-BUTTON_ARIA_TYPE_EMPHASIZED=Emphasized
+#XACT: ARIA announcement for the default action (emphasized) button
+BUTTON_ARIA_TYPE_EMPHASIZED=Default Action
 
 #XACT: ARIA announcement for the warning button
 BUTTON_ARIA_TYPE_ATTENTION=Warning
@@ -104,7 +104,7 @@ CAL_LEGEND_ROLE_DESCRIPTION=Calendar Legend
 CAROUSEL_OF_TEXT=of
 
 #Carousel dots text
-CAROUSEL_DOT_TEXT=Item {0} of {1} displayed
+CAROUSEL_DOT_TEXT=Page {0} of {1}
 
 # Carousel Previous Page text
 CAROUSEL_PREVIOUS_ARROW_TEXT=Previous Page
@@ -178,12 +178,36 @@ DATEPICKER_OPEN_ICON_TITLE=Open Picker
 #XACT: Aria information for the Date Picker
 DATEPICKER_DATE_DESCRIPTION=Date Input
 
+DATEPICKER_VALUE_MISSING=Fill in the date value in the format: {0}.
+
+DATEPICKER_PATTERN_MISSMATCH=This format is not supported. Fill in the date and time range values in the format: {0}.
+
+DATEPICKER_RANGE_OVERFLOW=Fill in a date value that is lower than the set max. value of {0}.
+
+DATEPICKER_RANGE_UNDERFLOW=Fill in a date value that is higher than the set min. value of {0}.
+
 #XACT: Aria information for the Date Time Picker
 DATETIME_DESCRIPTION=Date Time Input
 
+DATETIME_VALUE_MISSING=Fill in the date and time values in the format: {0}.
+
+DATETIME_PATTERN_MISMATCH=This format is not supported. Fill in the date and time values in the format: {0}.
+
+DATETIME_RANGEOVERFLOW=Fill in a value that is lower than the set max. value of {0}.
+
+DATETIME_RANGEUNDERFLOW=Fill in a value that is higher than the set min. value of {0}.
+
 #XACT: Aria information for the Date Range Picker
 DATERANGE_DESCRIPTION=Date Range Input
 
+DATERANGE_VALUE_MISSING=Fill in the date range in the format: {0} - {0}.
+
+DATERANGE_PATTERN_MISMATCH=This format is not supported. Fill in the date values in the format: {0} - {0}.
+
+DATERANGE_OVERFLOW=Fill in a value that is lower than the set max. value of {0}.
+
+DATERANGE_UNDERFLOW=Fill in a value that is higher than the set min. value of {0}.
+
 #XACT: Aria information for the Date Picker popover
 DATEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date for {0}
 
@@ -236,6 +260,8 @@ FILEUPLOADER_VALUE_HELP_TOOLTIP=Browse and replace all files
 #XTOL: Default tooltip text for the ui5-file-uploader's clear icon
 FILEUPLOADER_CLEAR_ICON_TOOLTIP=Remove all files
 
+FILEUPLOAER_VALUE_MISSING=Select or drag and drop a file to upload.
+
 GROUP_HEADER_TEXT=Group Header
 
 #XACT: ARIA announcement for the Select`s roledescription attribute
@@ -511,6 +537,10 @@ TIMEPICKER_INPUTS_ENTER_MINUTES=Please enter minutes
 #XACT: Time Picker Inputs tooltip/aria-label for Seconds input
 TIMEPICKER_INPUTS_ENTER_SECONDS=Please enter seconds
 
+TIMEPICKER_VALUE_MISSING=Fill in the time value in the format: {0}.
+
+TIMEPICKER_PATTERN_MISSMATCH=This format is not supported. Fill in the time value in the format: {0}.
+
 #XACT: Aria information for the Duration Picker
 DURATION_INPUT_DESCRIPTION=Duration Input
 
@@ -658,6 +688,12 @@ STEPINPUT_DEC_ICON_TITLE=Decrease
 #XTOL: tooltip for increase button of the StepInput
 STEPINPUT_INC_ICON_TITLE=Increase
 
+STEPINPUT_PATTER_MISSMATCH=This format is not supported. Fill in a number with {0} decimal places.
+
+STEPINPUT_RANGEOVERFLOW=Fill in a number that is lower than the set max. value of  {0}.
+
+STEPINPUT_RANGEUNDERFLOW=Fill in a number that is higher than the set min. value of  {0}.
+
 #XACT: Aria information for the Split Button
 SPLIT_BUTTON_DESCRIPTION=Split Button
 
@@ -708,6 +744,9 @@ TOOLBAR_POPOVER_AVAILABLE_VALUES=Available Values
 #XACT: ARIA announcement for the Form aria-label attribute
 FORM_ACCESSIBLE_NAME=Form
 
+#XACT: ARIA announcement for the Form group aria-label attribute
+FORM_GROUP_ACCESSIBLE_NAME=Group {0}
+
 #XMSG: Text used for reporting that a radio button group requires one of the radio buttons to be checked
 FORM_CHECKABLE_REQUIRED=Please tick this box if you want to proceed.
 
@@ -723,6 +762,8 @@ FORM_TEXTFIELD_REQUIRED=Please fill in this field.
 TABLE_SELECTION=Selection
 #XACT: ARIA description for the selection component of the row
 TABLE_ROW_SELECTOR=Row Selector
+#XACT: ARIA description for the navigated indicator of the row
+TABLE_ROW_NAVIGATED=Navigated
 #XMSG: Message text to be displayed when there are no rows in the grid
 TABLE_NO_DATA=No Data
 #XACT: ARIA announcement for the table that allows single selections
@@ -730,9 +771,9 @@ TABLE_SINGLE_SELECTABLE=Single Selection Table
 #XACT: ARIA announcement for the table that allows multi selection
 TABLE_MULTI_SELECTABLE=Multi Selection Table
 #XACT: accessibility text for the cell that contains a single interactive element
-TABLE_CELL_SINGLE_CONTROL=Contains Control
+TABLE_CELL_SINGLE_CONTROL=Includes element
 #XACT: accessibility text for the cell that contains multiple interactive elements
-TABLE_CELL_MULTIPLE_CONTROLS=Contains Controls
+TABLE_CELL_MULTIPLE_CONTROLS=Includes elements
 #XACT: ARIA description for the selection column header when select all checkbox is shown
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=Select All Checkbox
 #XACT: ARIA description for the selection column header when select all checkbox is checked
@@ -797,9 +838,27 @@ DYNAMIC_DATE_RANGE_DATE_TEXT=Date
 #XFLD: Text for the "Date Range" option in the DynamicDateRange component.
 DYNAMIC_DATE_RANGE_DATERANGE_TEXT=From / To
 
+#XFLD: Text for the "From" input field in the From (Date Time) option of the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_FROM_INPUT_TEXT=From
+
+#XFLD: Text for the "To" input field in the To (Date Time) option of the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_TO_INPUT_TEXT=To
+
+#XFLD: Text for the "From" From (Date Time) option of the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_FROM_TEXT=From (Date Time)
+
+#XFLD: Text for the "To" To (Date Time) option of the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_TO_TEXT=To (Date Time)
+
 #XFLD: Text for the selected date in the DynamicDateRange component.
 DYNAMIC_DATE_RANGE_SELECTED_TEXT=Selected
 
+DYNAMIC_DATE_TIME_RANGE_TEXT=From / To (Date and Time)
+
+DYNAMIC_DATE_TIME_RANGE_TEXT_TO_LABEL=To
+
+DYNAMIC_DATE_TIME_RANGE_TEXT_FROM_LABEL=From
+
 #FLD: Text for the selected date section when there's no value in the DynamicDateRange component.
 DYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT=Choose Dates
 

package/src/i18n/messagebundle_ar.properties

@@ -47,7 +47,7 @@ BUTTON_ARIA_TYPE_ACCEPT=إجراء موجب
 
 BUTTON_ARIA_TYPE_REJECT=إجراء سالب
 
-BUTTON_ARIA_TYPE_EMPHASIZED=مؤكد
+BUTTON_ARIA_TYPE_EMPHASIZED=الإجراء الافتراضي
 
 BUTTON_ARIA_TYPE_ATTENTION=تحذير
 
@@ -67,7 +67,7 @@ CAL_LEGEND_ROLE_DESCRIPTION=وسيلة إيضاح التقويم
 
 CAROUSEL_OF_TEXT=من
 
-CAROUSEL_DOT_TEXT=تم عرض {0} من {1}
+CAROUSEL_DOT_TEXT=الصفحة {0} من {1}
 
 CAROUSEL_PREVIOUS_ARROW_TEXT=الصفحة السابقة
 
@@ -180,6 +180,8 @@ INPUT_CLEAR_ICON_ACC_NAME=مسح
 
 INPUT_SUGGESTIONS_OK_BUTTON=موافق
 
+INPUT_SUGGESTIONS_CANCEL_BUTTON=إلغاء
+
 LINK_SUBTLE=غامض
 
 LINK_EMPHASIZED=مؤكد
@@ -232,10 +234,14 @@ MESSAGE_STRIP_CUSTOM=شريط الرسالة المخصصة
 
 MULTICOMBOBOX_DIALOG_OK_BUTTON=موافق
 
+MULTICOMBOBOX_DIALOG_CANCEL_BUTTON=إلغاء
+
 COMBOBOX_AVAILABLE_OPTIONS=الخيارات المتوفرة
 
 COMBOBOX_DIALOG_OK_BUTTON=موافق
 
+COMBOBOX_DIALOG_CANCEL_BUTTON=إلغاء
+
 INPUT_AVALIABLE_VALUES=القيم المتوفرة
 
 VALUE_STATE_ERROR_ALREADY_SELECTED=هذه القيمة محددة بالفعل.
@@ -480,19 +486,32 @@ TABLE_ROW_SELECTOR=مُحدِّد أولي
 TABLE_NO_DATA=لا توجد بيانات
 TABLE_SINGLE_SELECTABLE=جدول التحديد الفردي
 TABLE_MULTI_SELECTABLE=جدول التحديد المتعدد
-TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=يحتوي على خانة الاختيار تحديد الكل
+TABLE_CELL_SINGLE_CONTROL=يحتوي على عنصر تحكم
+TABLE_CELL_MULTIPLE_CONTROLS=يحتوي على عناصر تحكم
+TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=خانات الاختيار تحديد الكل
 TABLE_COLUMNHEADER_SELECTALL_CHECKED=محدد
 TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED=غير محدد
-TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=يحتوي على الزر مسح الكل
-TABLE_COLUMNHEADER_CLEARALL_DISABLED=معطَّل
+TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=مسح كل الأزرار
+TABLE_ROW=الصف
 TABLE_ROW_POPIN=منطقة إدخال الصف
+TABLE_ROW_INDEX={0} من {1}
+TABLE_ROW_SELECTED=مُحدد
+TABLE_ROW_ACTIVE=نشط
+TABLE_ROW_NAVIGABLE=به تفاصيل
+TABLE_COLUMN_HEADER_ROW=صف مقدمة العمود
 TABLE_MORE=المزيد
 TABLE_MORE_DESCRIPTION=لتحميل المزيد من الصفوف، اضغط على Enter أو Space
 TABLE_ROW_ACTIONS=إجراءات الصف
+TABLE_ROW_SINGLE_ACTION=يتوفر 1 إجراء صف
+TABLE_ROW_MULTIPLE_ACTIONS=يتوفر {0} من إجراءات الصف
 TABLE_NAVIGATION=تنقل
 TABLE_GENERATED_BY_AI=مُنشأ بواسطة الذكاء الاصطناعي
 TABLE_SELECT_ALL_ROWS=تحديد كل الصفوف
 TABLE_DESELECT_ALL_ROWS=إلغاء تحديد كل الصفوف
+TABLE_ACC_STATE_DISABLED=معطَّل
+TABLE_ACC_STATE_READONLY=للقراءة فقط
+TABLE_ACC_STATE_REQUIRED=مطلوب
+TABLE_ACC_STATE_EMPTY=فارغ
 
 DYNAMIC_DATE_RANGE_YESTERDAY_TEXT=أمس
 
@@ -509,7 +528,6 @@ DYNAMIC_DATE_RANGE_SELECTED_TEXT=مُحدد
 DYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT=اختيار التواريخ
 
 DYNAMIC_DATE_RANGE_NAVIGATION_ICON_TOOLTIP=التنقل للخلف
-TABLE_COLUMN_HEADER_ROW=صف مقدمة العمود
 
 DYNAMIC_DATE_RANGE_LAST_DAYS_TEXT=آخر X من الأيام