@ui5/webcomponents 1.3.1 → 1.6.0

package/src/TreeListItem.hbs

@@ -7,6 +7,7 @@
 	>
 		{{#if _showToggleButtonBeginning}}
 			<ui5-icon
+				part="toggle-icon"
 				class="ui5-li-tree-toggle-icon"
 				name="{{_toggleIconName}}"
 				show-tooltip
@@ -40,6 +41,7 @@
 {{#*inline "iconEnd"}}
 	{{#if _showToggleButtonEnd}}
 		<ui5-icon
+			part="toggle-icon"
 			class="ui5-li-tree-toggle-icon"
 			name="{{_toggleIconName}}"
 			@click="{{_toggleClick}}"

package/src/TreeListItem.js

@@ -2,7 +2,6 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import ListItem from "./ListItem.js";
 import Icon from "./Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
@@ -93,7 +92,7 @@ const metadata = {
 		/**
 		 * Defines the state of the <code>additionalText</code>.
 		 * <br>
-		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
 		 * @type {ValueState}
 		 * @defaultvalue "None"
 		 * @public
@@ -260,7 +259,7 @@ class TreeListItem extends ListItem {
 	get styles() {
 		return {
 			preContent: {
-				"padding-left": isIE() ? `${this.effectiveLevel}rem` : `calc(var(--_ui5-tree-indent-step) * ${this.effectiveLevel})`,
+				"padding-left": `calc(var(--_ui5-tree-indent-step) * ${this.effectiveLevel})`,
 			},
 		};
 	}

package/src/YearPicker.hbs

@@ -19,7 +19,14 @@
 					role="gridcell"
 					aria-selected="{{this.ariaSelected}}"
 				>
+					<span>
 						{{this.year}}
+					</span>
+					{{#if this.yearInSecType}}
+						<span class="ui5-yp-item-sec-type">
+							{{this.yearInSecType}}
+						</span>
+					{{/if}}
 				</div>
 			{{/each}}
 		</div>

package/src/YearPicker.js

@@ -15,6 +15,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import { getMaxCalendarDate } from "@ui5/webcomponents-localization/dist/dates/ExtremeDates.js";
 import CalendarPart from "./CalendarPart.js";
@@ -26,7 +27,7 @@ import styles from "./generated/themes/YearPicker.css.js";
  */
 const metadata = {
 	tag: "ui5-yearpicker",
-	properties: /** @lends  sap.ui.webcomponents.main.YearPicker.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.YearPicker.prototype */ {
 		/**
 		 * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
 		 * @type {Array}
@@ -48,7 +49,7 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.YearPicker.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.YearPicker.prototype */ {
 		/**
 		 * Fired when the user selects a year (space/enter/click).
 		 * @public
@@ -65,9 +66,6 @@ const metadata = {
 	},
 };
 
-const PAGE_SIZE = 20; // Total years on a single page
-const ROW_SIZE = 4; // Years per row (5 rows of 4 years each)
-
 /**
  * @class
  *
@@ -97,27 +95,39 @@ class YearPicker extends CalendarPart {
 		this._buildYears();
 	}
 
+	_getPageSize() {
+		// Total years on a single page depending on using on one or two calendar type
+		return this.secondaryCalendarType ? 8 : 20;
+	}
+
+	_getRowSize() {
+		// Years per row (5 rows of 4 years each) for one claendar type and (4 row of 2 years each) for two calendar type
+		return this.secondaryCalendarType ? 2 : 4;
+	}
+
 	_buildYears() {
 		if (this._hidden) {
 			return;
 		}
-
+		const pageSize = this._getPageSize();
 		const oYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._primaryCalendarType }, getLocale());
-
+		const oYearFormatInSecType = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType }, getLocale());
 		this._calculateFirstYear();
-		this._lastYear = this._firstYear + PAGE_SIZE - 1;
+		this._lastYear = this._firstYear + pageSize - 1;
 
 		const calendarDate = this._calendarDate; // store the value of the expensive getter
 		const minDate = this._minDate; // store the value of the expensive getter
 		const maxDate = this._maxDate; // store the value of the expensive getter
 		const tempDate = new CalendarDate(calendarDate, this._primaryCalendarType);
+		let tempDateInSecType;
+		let textInSecType;
 		tempDate.setYear(this._firstYear);
 
 		const intervals = [];
 		let timestamp;
 
 		/* eslint-disable no-loop-func */
-		for (let i = 0; i < PAGE_SIZE; i++) {
+		for (let i = 0; i < pageSize; i++) {
 			timestamp = tempDate.valueOf() / 1000;
 
 			const isSelected = this.selectedDates.some(itemTimestamp => {
@@ -127,6 +137,13 @@ class YearPicker extends CalendarPart {
 			const isFocused = tempDate.getYear() === calendarDate.getYear();
 			const isDisabled = tempDate.getYear() < minDate.getYear() || tempDate.getYear() > maxDate.getYear();
 
+			if (this.secondaryCalendarType) {
+				tempDateInSecType = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, timestamp, true);
+				textInSecType = tempDateInSecType.firstDate.getYear() === tempDateInSecType.lastDate.getYear
+					? `${oYearFormatInSecType.format(tempDateInSecType.firstDate.toLocalJSDate(), true)}`
+					: `${oYearFormatInSecType.format(tempDateInSecType.firstDate.toLocalJSDate(), true)} - ${oYearFormatInSecType.format(tempDateInSecType.lastDate.toLocalJSDate(), true)}`;
+			}
+
 			const year = {
 				timestamp: timestamp.toString(),
 				_tabIndex: isFocused ? "0" : "-1",
@@ -134,6 +151,7 @@ class YearPicker extends CalendarPart {
 				selected: isSelected,
 				ariaSelected: isSelected ? "true" : "false",
 				year: oYearFormat.format(tempDate.toLocalJSDate()),
+				yearInSecType: this.secondaryCalendarType && textInSecType,
 				disabled: isDisabled,
 				classes: "ui5-yp-item",
 			};
@@ -146,7 +164,10 @@ class YearPicker extends CalendarPart {
 				year.classes += " ui5-yp-item--disabled";
 			}
 
-			const intervalIndex = parseInt(i / ROW_SIZE);
+			if (this.secondaryCalendarType) {
+				year.classes += " ui5-yp-item-secondary-type";
+			}
+			const intervalIndex = parseInt(i / this._getRowSize());
 
 			if (intervals[intervalIndex]) {
 				intervals[intervalIndex].push(year);
@@ -161,24 +182,25 @@ class YearPicker extends CalendarPart {
 	}
 
 	_calculateFirstYear() {
+		const pageSize = this._getPageSize();
 		const absoluteMaxYear = getMaxCalendarDate(this._primaryCalendarType).getYear(); // 9999
 		const currentYear = this._calendarDate.getYear();
 
 		// 1. If first load - center the current year (set first year to be current year minus half page size)
 		if (!this._firstYear) {
-			this._firstYear = currentYear - PAGE_SIZE / 2;
+			this._firstYear = currentYear - pageSize / 2;
 		}
 
 		// 2. If out of range - change by a page (20) - do not center in order to keep the same position as the last page
 		if (currentYear < this._firstYear) {
-			this._firstYear -= PAGE_SIZE;
-		} else if (currentYear >= this._firstYear + PAGE_SIZE) {
-			this._firstYear += PAGE_SIZE;
+			this._firstYear -= pageSize;
+		} else if (currentYear >= this._firstYear + pageSize) {
+			this._firstYear += pageSize;
 		}
 
 		// 3. If the date was changed by more than 20 years - reset _firstYear completely
-		if (Math.abs(this._firstYear - currentYear) >= PAGE_SIZE) {
-			this._firstYear = currentYear - PAGE_SIZE / 2;
+		if (Math.abs(this._firstYear - currentYear) >= pageSize) {
+			this._firstYear = currentYear - pageSize / 2;
 		}
 
 		// Keep it in the range between the min and max year
@@ -186,8 +208,8 @@ class YearPicker extends CalendarPart {
 		this._firstYear = Math.min(this._firstYear, this._maxDate.getYear());
 
 		// If first year is > 9980, make it 9980 to not show any years beyond 9999
-		if (this._firstYear > absoluteMaxYear - PAGE_SIZE + 1) {
-			this._firstYear = absoluteMaxYear - PAGE_SIZE + 1;
+		if (this._firstYear > absoluteMaxYear - pageSize + 1) {
+			this._firstYear = absoluteMaxYear - pageSize + 1;
 		}
 	}
 
@@ -199,6 +221,8 @@ class YearPicker extends CalendarPart {
 
 	_onkeydown(event) {
 		let preventDefault = true;
+		const pageSize = this._getPageSize();
+		const rowSize = this._getRowSize();
 
 		if (isEnter(event)) {
 			this._selectYear(event);
@@ -209,19 +233,19 @@ class YearPicker extends CalendarPart {
 		} else if (isRight(event)) {
 			this._modifyTimestampBy(1);
 		} else if (isUp(event)) {
-			this._modifyTimestampBy(-ROW_SIZE);
+			this._modifyTimestampBy(-rowSize);
 		} else if (isDown(event)) {
-			this._modifyTimestampBy(ROW_SIZE);
+			this._modifyTimestampBy(rowSize);
 		} else if (isPageUp(event)) {
-			this._modifyTimestampBy(-PAGE_SIZE);
+			this._modifyTimestampBy(-pageSize);
 		} else if (isPageDown(event)) {
-			this._modifyTimestampBy(PAGE_SIZE);
+			this._modifyTimestampBy(pageSize);
 		} else if (isHome(event) || isEnd(event)) {
 			this._onHomeOrEnd(isHome(event));
 		} else if (isHomeCtrl(event)) {
 			this._setTimestamp(parseInt(this._years[0][0].timestamp)); // first year of first row
 		} else if (isEndCtrl(event)) {
-			this._setTimestamp(parseInt(this._years[PAGE_SIZE / ROW_SIZE - 1][ROW_SIZE - 1].timestamp)); // last year of last row
+			this._setTimestamp(parseInt(this._years[pageSize / rowSize - 1][rowSize - 1].timestamp)); // last year of last row
 		} else {
 			preventDefault = false;
 		}
@@ -235,7 +259,7 @@ class YearPicker extends CalendarPart {
 		this._years.forEach(row => {
 			const indexInRow = row.findIndex(item => CalendarDate.fromTimestamp(parseInt(item.timestamp) * 1000).getYear() === this._calendarDate.getYear());
 			if (indexInRow !== -1) { // The current year is on this row
-				const index = homePressed ? 0 : ROW_SIZE - 1; // select the first (if Home) or last (if End) year on the row
+				const index = homePressed ? 0 : this._getRowSize() - 1; // select the first (if Home) or last (if End) year on the row
 				this._setTimestamp(parseInt(row[index].timestamp));
 			}
 		});
@@ -297,7 +321,7 @@ class YearPicker extends CalendarPart {
 	 * @protected
 	 */
 	_hasNextPage() {
-		return this._firstYear + PAGE_SIZE - 1 < this._maxDate.getYear();
+		return this._firstYear + this._getPageSize() - 1 < this._maxDate.getYear();
 	}
 
 	/**
@@ -306,7 +330,8 @@ class YearPicker extends CalendarPart {
 	 * @protected
 	 */
 	_showPreviousPage() {
-		this._modifyTimestampBy(-PAGE_SIZE);
+		const pageSize = this._getPageSize();
+		this._modifyTimestampBy(-pageSize);
 	}
 
 	/**
@@ -315,7 +340,7 @@ class YearPicker extends CalendarPart {
 	 * @protected
 	 */
 	_showNextPage() {
-		this._modifyTimestampBy(PAGE_SIZE);
+		this._modifyTimestampBy(this._getPageSize());
 	}
 }
 

package/src/features/InputElementsFormSupport.js

@@ -7,12 +7,25 @@ class FormSupport {
 	 * @param nativeInputUpdateCallback - determines how the native input's disabled and value properties are calculated
 	 */
 	static syncNativeHiddenInput(element, nativeInputUpdateCallback) {
-		const needsNativeInput = !!element.name;
-		let nativeInput = element.querySelector("input[type=hidden][data-ui5-form-support]");
+		const needsNativeInput = !!element.name || element.required;
+		let nativeInput = element.querySelector("input[data-ui5-form-support]");
 		if (needsNativeInput && !nativeInput) {
 			nativeInput = document.createElement("input");
-			nativeInput.type = "hidden";
+
+			nativeInput.style.clip = "rect(0 0 0 0)";
+			nativeInput.style.clipPath = "inset(50%)";
+			nativeInput.style.height = "1px";
+			nativeInput.style.overflow = "hidden";
+			nativeInput.style.position = "absolute";
+			nativeInput.style.whiteSpace = "nowrap";
+			nativeInput.style.width = "1px";
+			nativeInput.style.bottom = "0";
+			nativeInput.setAttribute("tabindex", "-1");
+			nativeInput.required = element.required;
 			nativeInput.setAttribute("data-ui5-form-support", "");
+
+			nativeInput.addEventListener("focusin", event => element.focus());
+
 			nativeInput.slot = "formSupport"; // Needed for IE - otherwise input elements are not part of the real DOM tree and are not detected by forms
 			element.appendChild(nativeInput);
 		}
@@ -69,12 +82,16 @@ class FormSupport {
 
 		if (currentElement) {
 			// eslint-disable-next-line no-undef
-			currentElement.dispatchEvent(new SubmitEvent("submit", {
+			const submitPrevented = !currentElement.dispatchEvent(new SubmitEvent("submit", {
 				bubbles: true,
 				cancelable: true,
 				submitter: element,
 			}));
 
+			if (submitPrevented) {
+				return;
+			}
+
 			currentElement.submit();
 		}
 	}

package/src/features/InputSuggestions.js

@@ -562,6 +562,7 @@ class Suggestions {
 		this.component.focused = false;
 		this.component.hasSuggestionItemSelected = false;
 		this.selectedItemIndex = null;
+		this.component.value = this.component.valueBeforeAutoComplete;
 
 		items && this._scrollItemIntoView(items[0]);
 		this._deselectItems();

package/src/i18n/messagebundle.properties

@@ -91,6 +91,27 @@ COLOR_PALETTE_DIALOG_TITLE=Change Color
 #XTIT: Color Palette dialog title of the Color Picker
 COLOR_PALETTE_MORE_COLORS_TEXT=More Colors...
 
+#XACT: Aria information for the ColorPicker Alpha slider
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+#XACT: Aria information for the ColorPicker Hue slider
+COLORPICKER_HUE_SLIDER=Hue control
+
+#XTOL: Six symbol hexadecimal group representing CSS color hex string
+COLORPICKER_HEX=Hexadecimal
+
+#XTOL: Red color for the ColorPicker control
+COLORPICKER_RED=Red
+
+#XTOL: Green color for the ColorPicker control
+COLORPICKER_GREEN=Green
+
+#XTOL: Blue color for the ColorPicker control
+COLORPICKER_BLUE=Blue
+
+#XTOL: Alpha chanel transparency value for RGBA color mode
+COLORPICKER_ALPHA=Alpha
+
 #XACT: DatePicker 'Open Picker' icon title
 DATEPICKER_OPEN_ICON_TITLE=Open Picker
 
@@ -148,6 +169,9 @@ LIST_ITEM_SELECTED=Selected
 #XACT: ARIA announcement for the list item selected=false state
 LIST_ITEM_NOT_SELECTED=Not Selected
 
+#XACT: ARIA announcement for the list item selected=false state
+LIST_ITEM_GROUP_HEADER=Group Header
+
 #XBUT: List Multi Selection Mode Checkbox aria-label text
 ARIA_LABEL_LIST_ITEM_CHECKBOX = Multiple Selection mode.
 
@@ -226,12 +250,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Segmented button
 #XACT: ARIA description for slider handle
 SLIDER_ARIA_DESCRIPTION=Slider handle
 
-#XACT: ARIA announcement for the switch on
-SWITCH_ON=On
-
-#XACT: ARIA announcement for the switch off
-SWITCH_OFF=Off
-
 #XTXT Table and List "load more" row's text.
 LOAD_MORE_TEXT=More
 
@@ -325,9 +343,21 @@ TREE_ITEM_ARIA_LABEL=Tree Item
 #XTOL: tooltip for expand icon in a tree item
 TREE_ITEM_EXPAND_NODE=Expand Node
 
-#XTOL: tooltip for collapse icon in a tree item
+#XACT: tooltip for collapse icon in a tree item
 TREE_ITEM_COLLAPSE_NODE=Collapse Node
 
+#XACT: the value state type that is preppended to value state error message text
+VALUE_STATE_TYPE_ERROR=Value State Error
+
+#XACT: the value state type that is preppended to value state warning message text
+VALUE_STATE_TYPE_WARNING=Value State Warning
+
+#XACT: the value state type that is preppended to value state success message text
+VALUE_STATE_TYPE_SUCCESS=Value State Success
+
+#XACT: the value state type that is preppended to value state information message text
+VALUE_STATE_TYPE_INFORMATION=Value State Information
+
 #XTOL: text that is appended to the tooltips of input fields etc. which are marked to have an error
 VALUE_STATE_ERROR=Invalid entry
 

package/src/i18n/messagebundle_ar.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=تغيير اللون
 
 COLOR_PALETTE_MORE_COLORS_TEXT=مزيد من الألوان...
 
+COLORPICKER_ALPHA_SLIDER=عنصر تحكم ألفا
+
+COLORPICKER_HUE_SLIDER=عنصر تحكم تدرج اللون
+
+COLORPICKER_HEX=ست عشري
+
+COLORPICKER_RED=أحمر
+
+COLORPICKER_GREEN=أخضر
+
+COLORPICKER_BLUE=أزرق
+
+COLORPICKER_ALPHA=ألفا
+
 DATEPICKER_OPEN_ICON_TITLE=فتح أداة الانتقاء
 
 DATEPICKER_DATE_DESCRIPTION=إدخال التاريخ
@@ -99,6 +113,8 @@ LIST_ITEM_SELECTED=محدد
 
 LIST_ITEM_NOT_SELECTED=غير محدد
 
+LIST_ITEM_GROUP_HEADER=مقدمة المجموعة
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=نمط التحديد المتعدد
 
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=تحديد البنود.
@@ -151,10 +167,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=الزر المقسَّم
 
 SLIDER_ARIA_DESCRIPTION=مؤشر مربع التمرير
 
-SWITCH_ON=تشغيل
-
-SWITCH_OFF=غلق
-
 LOAD_MORE_TEXT=المزيد
 
 TABLE_HEADER_ROW_TEXT=صف المقدمة
@@ -219,6 +231,14 @@ TREE_ITEM_EXPAND_NODE=توسيع العقدة
 
 TREE_ITEM_COLLAPSE_NODE=طي العقدة
 
+VALUE_STATE_TYPE_ERROR=Value State Error
+
+VALUE_STATE_TYPE_WARNING=Value State Warning
+
+VALUE_STATE_TYPE_SUCCESS=Value State Success
+
+VALUE_STATE_TYPE_INFORMATION=Value State Information
+
 VALUE_STATE_ERROR=إدخال غير صالح
 
 VALUE_STATE_WARNING=تم إصدار تحذير
@@ -245,3 +265,6 @@ SPLIT_BUTTON_DESCRIPTION=زر التقسيم
 
 SPLIT_BUTTON_KEYBOARD_HINT=اضغط على Space أو Enter لبدء تشغيل الإجراء الافتراضي وAlt + Arrow Down أو F4 لبدء تشغيل إجراء السهم
 
+MENU_BACK_BUTTON_ARIA_LABEL=الخلف
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=رفض

package/src/i18n/messagebundle_bg.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=Промяна на цвят
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Още цветове...
 
+COLORPICKER_ALPHA_SLIDER=Алфа-контрол
+
+COLORPICKER_HUE_SLIDER=Контрол на цветове
+
+COLORPICKER_HEX=Шестнадесетичен
+
+COLORPICKER_RED=Червен
+
+COLORPICKER_GREEN=Зелен
+
+COLORPICKER_BLUE=Син
+
+COLORPICKER_ALPHA=Алфа
+
 DATEPICKER_OPEN_ICON_TITLE=Отваряне на средство за избор
 
 DATEPICKER_DATE_DESCRIPTION=Въвеждане на дата
@@ -99,6 +113,8 @@ LIST_ITEM_SELECTED=Избрани
 
 LIST_ITEM_NOT_SELECTED=Неизбрано
 
+LIST_ITEM_GROUP_HEADER=Заглавие на група
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=Режим на множествен избор
 
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=Избор на позиция.
@@ -151,10 +167,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Сегментиран бутон
 
 SLIDER_ARIA_DESCRIPTION=Регулатор на плъзгач
 
-SWITCH_ON=Включено
-
-SWITCH_OFF=Изключено
-
 LOAD_MORE_TEXT=Други
 
 TABLE_HEADER_ROW_TEXT=Заглавен ред
@@ -219,6 +231,14 @@ TREE_ITEM_EXPAND_NODE=Разширяване на възел
 
 TREE_ITEM_COLLAPSE_NODE=Скриване на възел
 
+VALUE_STATE_TYPE_ERROR=Value State Error
+
+VALUE_STATE_TYPE_WARNING=Value State Warning
+
+VALUE_STATE_TYPE_SUCCESS=Value State Success
+
+VALUE_STATE_TYPE_INFORMATION=Value State Information
+
 VALUE_STATE_ERROR=Невалиден запис
 
 VALUE_STATE_WARNING=Изведено предупреждение
@@ -245,3 +265,6 @@ SPLIT_BUTTON_DESCRIPTION=Бутон разделяне
 
 SPLIT_BUTTON_KEYBOARD_HINT=Натиснете интервал или Enter, за да инициирате действие по подразбиране и Alt + стрелка надолу или F4, за да инициирате действие на стрелка.
 
+MENU_BACK_BUTTON_ARIA_LABEL=Назад
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=Отхвърляне

package/src/i18n/messagebundle_ca.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=Modificar color
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Més colors...
 
+COLORPICKER_ALPHA_SLIDER=Regulador alfa
+
+COLORPICKER_HUE_SLIDER=Regulador de tonalitat
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Vermell
+
+COLORPICKER_GREEN=Verd
+
+COLORPICKER_BLUE=Blau
+
+COLORPICKER_ALPHA=Alfa
+
 DATEPICKER_OPEN_ICON_TITLE=Obrir selector
 
 DATEPICKER_DATE_DESCRIPTION=Entrada de data
@@ -99,6 +113,8 @@ LIST_ITEM_SELECTED=Seleccionat
 
 LIST_ITEM_NOT_SELECTED=No seleccionats
 
+LIST_ITEM_GROUP_HEADER=Capçalera de grup
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=Mode de selecció múltiple
 
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=Selecció de posició.
@@ -151,10 +167,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Botó segmentat
 
 SLIDER_ARIA_DESCRIPTION=Ansa del botó lliscant
 
-SWITCH_ON=Activat
-
-SWITCH_OFF=Desactivat
-
 LOAD_MORE_TEXT=Més
 
 TABLE_HEADER_ROW_TEXT=Línia de capçalera
@@ -219,6 +231,14 @@ TREE_ITEM_EXPAND_NODE=Desplegar nodes
 
 TREE_ITEM_COLLAPSE_NODE=Comprimir nodes
 
+VALUE_STATE_TYPE_ERROR=Value State Error
+
+VALUE_STATE_TYPE_WARNING=Value State Warning
+
+VALUE_STATE_TYPE_SUCCESS=Value State Success
+
+VALUE_STATE_TYPE_INFORMATION=Value State Information
+
 VALUE_STATE_ERROR=Entrada no vàlida
 
 VALUE_STATE_WARNING=Advertència emesa
@@ -245,3 +265,6 @@ SPLIT_BUTTON_DESCRIPTION=Polsador dividit
 
 SPLIT_BUTTON_KEYBOARD_HINT=Premeu Espai o Intro per activar l'acció predeterminada i Alt + Fletxa avall o F4 per activar l'acció de fletxa
 
+MENU_BACK_BUTTON_ARIA_LABEL=Endarrere
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=Declinar

package/src/i18n/messagebundle_cs.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=Změnit barvu
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Další barvy...
 
+COLORPICKER_ALPHA_SLIDER=Řízení alfa
+
+COLORPICKER_HUE_SLIDER=Řízení barevného odstínu
+
+COLORPICKER_HEX=Hexadecimální
+
+COLORPICKER_RED=Červená
+
+COLORPICKER_GREEN=Zelená
+
+COLORPICKER_BLUE=Modrá
+
+COLORPICKER_ALPHA=Alfa
+
 DATEPICKER_OPEN_ICON_TITLE=Otevřít výběr
 
 DATEPICKER_DATE_DESCRIPTION=Zadání data
@@ -99,6 +113,8 @@ LIST_ITEM_SELECTED=Vybráno
 
 LIST_ITEM_NOT_SELECTED=Není vybráno
 
+LIST_ITEM_GROUP_HEADER=Hlavička skupiny
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=Režim vícenásobného výběru
 
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=Výběr položek.
@@ -151,10 +167,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Segmentované tlačítko
 
 SLIDER_ARIA_DESCRIPTION=Úchyt jezdce
 
-SWITCH_ON=Zapnuto
-
-SWITCH_OFF=Vypnuto
-
 LOAD_MORE_TEXT=Více
 
 TABLE_HEADER_ROW_TEXT=Hlavička
@@ -219,6 +231,14 @@ TREE_ITEM_EXPAND_NODE=Rozbalit uzel
 
 TREE_ITEM_COLLAPSE_NODE=Sbalit uzel
 
+VALUE_STATE_TYPE_ERROR=Value State Error
+
+VALUE_STATE_TYPE_WARNING=Value State Warning
+
+VALUE_STATE_TYPE_SUCCESS=Value State Success
+
+VALUE_STATE_TYPE_INFORMATION=Value State Information
+
 VALUE_STATE_ERROR=Neplatné zadání
 
 VALUE_STATE_WARNING=Výstup upozornění
@@ -245,3 +265,6 @@ SPLIT_BUTTON_DESCRIPTION=Rozdělené tlačítko
 
 SPLIT_BUTTON_KEYBOARD_HINT=Stisknutím mezerníku nebo Enter spustíte standardní akci a pomocí Alt + šipky dolů nebo F4 spustíte akci šipky
 
+MENU_BACK_BUTTON_ARIA_LABEL=Zpět
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=Odmítnout