@ui5/webcomponents 1.3.1 → 1.4.0

package/src/TabContainer.js

@@ -30,6 +30,7 @@ import Icon from "./Icon.js";
 import List from "./List.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import TabContainerTabsPlacement from "./types/TabContainerTabsPlacement.js";
+import SemanticColor from "./types/SemanticColor.js";
 
 // Templates
 import TabContainerTemplate from "./generated/templates/TabContainerTemplate.lit.js";
@@ -248,16 +249,6 @@ const metadata = {
 			defaultValue: "More",
 		},
 
-		_startOverflowItems: {
-			type: Object,
-			multiple: true,
-		},
-
-		_endOverflowItems: {
-			type: Object,
-			multiple: true,
-		},
-
 		_overflowItems: {
 			type: Object,
 			multiple: true,
@@ -383,7 +374,7 @@ class TabContainer extends UI5Element {
 
 	onBeforeRendering() {
 		// update selected tab
-		this._allItemsAndSubItems = this._getAllSubItems(this.items, []);
+		this._allItemsAndSubItems = this._getAllSubItems(this.items);
 		if (this._allItemsAndSubItems.length) {
 			const selectedTabs = this._allItemsAndSubItems.filter(tab => tab.selected);
 			if (selectedTabs.length) {
@@ -407,7 +398,7 @@ class TabContainer extends UI5Element {
 
 	onAfterRendering() {
 		this.items.forEach(item => {
-			item._getTabInStripDomRef = this.getDomRef().querySelector(`*[data-ui5-stable="${item.stableDomRef}"]`);
+			item._tabInStripDomRef = this.getDomRef().querySelector(`*[data-ui5-stable="${item.stableDomRef}"]`);
 		});
 	}
 
@@ -419,6 +410,20 @@ class TabContainer extends UI5Element {
 		ResizeHandler.deregister(this._getHeader(), this._handleResize);
 	}
 
+	async _handleResize() {
+		if (this.responsivePopover && this.responsivePopover.opened) {
+			this.responsivePopover.close();
+		}
+		this._updateMediaRange();
+
+		await renderFinished(); // await the tab container to have rendered its representation of tabs
+		this._setItemsForStrip();
+	}
+
+	_updateMediaRange() {
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+	}
+
 	_setItemsExternalProperties(items) {
 		items.filter(item => !item.isSeparator).forEach((item, index, arr) => {
 			item._isInline = this.tabLayout === TabLayout.Inline;
@@ -438,9 +443,10 @@ class TabContainer extends UI5Element {
 
 	async _onTabStripClick(event) {
 		const tab = getTab(event.target);
-		if (!tab) {
+		if (!tab || tab._realTab.disabled) {
 			return;
 		}
+
 		event.preventDefault();
 		event.stopPropagation();
 		if (event.target.hasAttribute("ui5-button")) {
@@ -449,9 +455,8 @@ class TabContainer extends UI5Element {
 		}
 
 		if (!tab._realTab._hasOwnContent && tab._realTab.tabs.length) {
-			this._overflowItems = [];
 			this._overflowItems = tab._realTab.subTabs;
-			this._addStyleIndent(this._overflowItems, false);
+			this._addStyleIndent(this._overflowItems);
 
 			this.responsivePopover = await this._respPopover();
 			if (this.responsivePopover.opened) {
@@ -488,7 +493,7 @@ class TabContainer extends UI5Element {
 		}
 
 		this._overflowItems = tabInstance.subTabs;
-		this._addStyleIndent(this._overflowItems, false);
+		this._addStyleIndent(this._overflowItems);
 
 		this.responsivePopover = await this._respPopover();
 		if (this.responsivePopover.opened) {
@@ -509,7 +514,7 @@ class TabContainer extends UI5Element {
 
 	_onTabStripKeyDown(event) {
 		const tab = getTab(event.target);
-		if (!tab) {
+		if (!tab || tab._realTab.disabled) {
 			return;
 		}
 
@@ -537,7 +542,7 @@ class TabContainer extends UI5Element {
 
 	_onTabStripKeyUp(event) {
 		const tab = getTab(event.target);
-		if (!tab) {
+		if (!tab || tab._realTab.disabled) {
 			return;
 		}
 
@@ -575,7 +580,7 @@ class TabContainer extends UI5Element {
 		selectedTopLevel.focus();
 	}
 
-	_getAllSubItems(items, result, level = 1) {
+	_getAllSubItems(items, result = [], level = 1) {
 		items.forEach(item => {
 			if (item.hasAttribute("ui5-tab") || item.hasAttribute("ui5-tab-separator")) {
 				item._level = level;
@@ -690,13 +695,13 @@ class TabContainer extends UI5Element {
 		if (isEndOverflow) {
 			button = this.overflowButton[0] || overflow.querySelector("[ui5-button]");
 			this._overflowItems = items;
-			this._addStyleIndent(this._overflowItems, true);
+			this._addStyleIndent(this._overflowItems);
 		}
 
 		if (isStartOverflow) {
 			button = this.startOverflowButton[0] || overflow.querySelector("[ui5-button]");
 			this._overflowItems = items;
-			this._addStyleIndent(this._overflowItems, true);
+			this._addStyleIndent(this._overflowItems);
 		}
 
 		this.responsivePopover = await this._respPopover();
@@ -704,7 +709,7 @@ class TabContainer extends UI5Element {
 			this.responsivePopover.close();
 		} else {
 			this.responsivePopover.initialFocus = this.responsivePopover.content[0].items.filter(item => item.classList.contains("ui5-tab-overflow-item"))[0].id;
-			this.responsivePopover.showAt(button);
+			await this.responsivePopover.showAt(button);
 		}
 	}
 
@@ -712,19 +717,21 @@ class TabContainer extends UI5Element {
 		return this.responsivePopover.content[0].items.filter(item => (item._realTab && item._realTab.selected));
 	}
 
-	_addStyleIndent(tabs, isOverflow) {
+	_addStyleIndent(tabs) {
+		const extraIndent = this._getAllSubItems(tabs)
+			.filter(tab => !tab.isSeparator)
+			.some(tab => tab.design !== SemanticColor.Default && tab.design !== SemanticColor.Neutral);
+
 		walk(tabs, tab => {
-			let level = tab._level;
-			if (!isOverflow) {
-				level -= 1;
-			}
+			let level = tab._level - 1;
 
-			if (tab._level > 1 && tab.isSeparator) {
-				level -= 1;
+			if (tab.isSeparator) {
+				level += 1;
 			}
 
 			tab._style = {
-				"--_ui5-indentation-level": level / 2,
+				"--_ui5-tab-indentation-level": level,
+				"--_ui5-tab-extra-indent": extraIndent ? 1 : null,
 			};
 		});
 	}
@@ -738,16 +745,6 @@ class TabContainer extends UI5Element {
 		}
 	}
 
-	async _handleResize() {
-		if (this.responsivePopover && this.responsivePopover.opened) {
-			this.responsivePopover.close();
-		}
-		this._updateMediaRange();
-
-		await renderFinished(); // await the tab container to have rendered its representation of tabs
-		this._setItemsForStrip();
-	}
-
 	_setItemsForStrip() {
 		const tabStrip = this._getTabStrip();
 		let allItemsWidth = 0;
@@ -1073,10 +1070,6 @@ class TabContainer extends UI5Element {
 		return focusableTabs;
 	}
 
-	_updateMediaRange() {
-		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
-	}
-
 	_getHeader() {
 		return this.shadowRoot.querySelector(`#${this._id}-header`);
 	}

package/src/TabInOverflow.hbs

@@ -11,10 +11,13 @@
 >
 	<div class="ui5-tab-overflow-itemContent-wrapper">
 		<div class="ui5-tab-overflow-itemContent">
+			{{#if this.semanticIconName}}
+				<ui5-icon class="{{this.semanticIconClasses}}" name="{{this.semanticIconName}}"></ui5-icon>
+			{{/if}}
+
 			{{#if this.icon}}
 				<ui5-icon name="{{this.icon}}"></ui5-icon>
 			{{/if}}
-
 			{{this.text}}
 
 			{{#if this.additionalText}}

package/src/TabInStrip.hbs

@@ -25,7 +25,10 @@
 
 		{{#if this.text}}
 			<span class="ui5-tab-strip-itemText" id="{{this._id}}-text">
-				<span class="{{this.headerSemanticIconClasses}}"></span>
+				{{#if this.semanticIconName}}
+					<ui5-icon class="{{semanticIconClasses}}" name="{{semanticIconName}}"></ui5-icon>
+				{{/if}}
+
 				{{this.displayText}}
 			{{#if this.isSingleClickArea}}
 			<span class="ui5-tab-single-click-icon">
@@ -34,8 +37,8 @@
 			{{/if}}
 			</span>
 		{{/if}}
-
 	</div>
+
 	{{#if this.requiresExpandButton}}
 		<div class="ui5-tab-expand-button" @click="{{_onTabExpandButtonClick}}">
 			<ui5-button
@@ -43,6 +46,7 @@
 				icon="slim-arrow-down"
 				design="Transparent"
 				tabindex="-1"
+				?disabled="{{disabled}}"
 				aria-haspopup="true">
 			</ui5-button>
 		</div>

package/src/TabSeparator.js

@@ -59,7 +59,7 @@ class TabSeparator extends UI5Element {
 	}
 
 	getTabInStripDomRef() {
-		return this._getTabInStripDomRef;
+		return this._tabInStripDomRef;
 	}
 
 	get stableDomRef() {

package/src/Table.js

@@ -542,6 +542,11 @@ class Table extends UI5Element {
 		this._noDataDisplayed = !this.rows.length && !this.hideNoData;
 		this.visibleColumnsCount = this.visibleColumns.length;
 
+		if (this.isMultiSelect) {
+			// we have to count the selection column as well
+			this.visibleColumnsCount += 1;
+		}
+
 		this._allRowsSelected = selectedRows.length === this.rows.length;
 
 		this._prevFocusedRow = this._prevFocusedRow || this.rows[0];

package/src/TableColumn.hbs

@@ -2,7 +2,6 @@
 	scope="col"
 	part="column"
 	role="columnheader"
-	dir="{{effectiveDir}}"
 >
 	<slot></slot>
 </th>

package/src/TableGroupRow.hbs

@@ -4,7 +4,6 @@
 	role="row"
 	aria-label={{ariaLabelText}}
 	tabindex="{{_tabIndex}}"
-	dir="{{effectiveDir}}"
 	@focusin="{{_onfocusin}}"
 >
 	<td colspan={{colSpan}}>

package/src/TableRow.js

@@ -194,10 +194,12 @@ class TableRow extends UI5Element {
 	constructor() {
 		super();
 
+		const handleToushStartEvent = event => {
+			this.activate();
+		};
+
 		this._ontouchstart = {
-			handleEvent(event) {
-				this.activate();
-			},
+			handleEvent: handleToushStartEvent,
 			passive: true,
 		};
 	}

package/src/TextArea.js

@@ -568,7 +568,7 @@ class TextArea extends UI5Element {
 		return {
 			valueStateMsg: {
 				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
-				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning || this.exceeding,
+				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
 				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			},
 		};
@@ -639,7 +639,7 @@ class TextArea extends UI5Element {
 	}
 
 	get displayValueStateMessagePopover() {
-		return !this.readonly && (this.hasCustomValueState || this.hasValueState || this.exceeding);
+		return !this.readonly && (this.hasCustomValueState || this.hasValueState);
 	}
 
 	get hasCustomValueState() {
@@ -655,7 +655,7 @@ class TextArea extends UI5Element {
 	}
 
 	get valueStateText() {
-		if (this.valueState !== ValueState.Error && this.exceeding) {
+		if (this.valueState !== ValueState.Error) {
 			return this.valueStateTextMappings()[ValueState.Warning];
 		}
 

package/src/Toast.hbs

@@ -2,7 +2,6 @@
 	<div class="ui5-toast-root"
 		role="alert"
 		style="{{styles.root}}"
-		dir="{{effectiveDir}}"
 		@mouseover="{{_onmouseover}}"
 		@mouseleave="{{_onmouseleave}}"
 		@transitionend="{{_ontransitionend}}">

package/src/Token.hbs

@@ -5,7 +5,6 @@
 	@focusout="{{_focusout}}"
 	@keydown="{{_keydown}}"
 	class="ui5-token--wrapper"
-	dir="{{effectiveDir}}"
 	role="option"
 	aria-selected="{{selected}}"
 >

package/src/Tokenizer.hbs

@@ -1,7 +1,4 @@
-<div
-	dir="{{effectiveDir}}"
-	class="{{classes.wrapper}}"
->
+<div class="{{classes.wrapper}}">
 	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{tokenizerLabel}}</span>
 
 	<div
@@ -22,7 +19,7 @@
 		<span
 			@click="{{_openOverflowPopover}}"
 			class="ui5-tokenizer-more-text"
+			part="n-more-text"
 		>{{_nMoreText}}</span>
 	{{/if}}
-</div>
-	
+</div>

package/src/Tokenizer.js

@@ -518,6 +518,20 @@ class Tokenizer extends UI5Element {
 		return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
 	}
 
+	/**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	 get _valueStateMessageIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
 	get _isPhone() {
 		return isPhone();
 	}

package/src/TokenizerPopover.hbs

@@ -21,6 +21,7 @@
 		{{/if}}
 		{{#unless hasValueState}}
 			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 				{{#each valueStateMessageText}}
 					{{this}}
 				{{/each}}

package/src/Tree.hbs

@@ -32,6 +32,7 @@
             @ui5-step-out="{{../_onListItemStepOut}}"
             @mouseover="{{../_onListItemMouseOver}}"
             @mouseout="{{../_onListItemMouseOut}}"
+            exportparts="icon, toggle-icon"
         >
             {{> treeListItemContent}}
         </ui5-li-tree>

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/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
 
@@ -226,12 +247,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
 

package/src/i18n/messagebundle_ar.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=تغيير اللون
 
 COLOR_PALETTE_MORE_COLORS_TEXT=مزيد من الألوان...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=فتح أداة الانتقاء
 
 DATEPICKER_DATE_DESCRIPTION=إدخال التاريخ
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=الزر المقسَّم
 
 SLIDER_ARIA_DESCRIPTION=مؤشر مربع التمرير
 
-SWITCH_ON=تشغيل
-
-SWITCH_OFF=غلق
-
 LOAD_MORE_TEXT=المزيد
 
 TABLE_HEADER_ROW_TEXT=صف المقدمة
@@ -245,3 +255,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=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=Отваряне на средство за избор
 
 DATEPICKER_DATE_DESCRIPTION=Въвеждане на дата
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Сегментиран бутон
 
 SLIDER_ARIA_DESCRIPTION=Регулатор на плъзгач
 
-SWITCH_ON=Включено
-
-SWITCH_OFF=Изключено
-
 LOAD_MORE_TEXT=Други
 
 TABLE_HEADER_ROW_TEXT=Заглавен ред
@@ -245,3 +255,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=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=Obrir selector
 
 DATEPICKER_DATE_DESCRIPTION=Entrada de data
@@ -151,10 +165,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
@@ -245,3 +255,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=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=Otevřít výběr
 
 DATEPICKER_DATE_DESCRIPTION=Zadání data
@@ -151,10 +165,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
@@ -245,3 +255,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

package/src/i18n/messagebundle_cy.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=Newid Lliw
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Mwy o Liwiau...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=Agor Dewiswr
 
 DATEPICKER_DATE_DESCRIPTION=Mewnbwn Dyddiad
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Botwm wedi'i Segmentu
 
 SLIDER_ARIA_DESCRIPTION=Bachyn llithrydd
 
-SWITCH_ON=Ymlaen 
-
-SWITCH_OFF=Wedi Diffodd
-
 LOAD_MORE_TEXT=Mwy
 
 TABLE_HEADER_ROW_TEXT=Pennyn Rhes
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=Botwm Hollti
 
 SPLIT_BUTTON_KEYBOARD_HINT=Pwyswch Space neu Enter i sbarduno cam gweithredu diofyn ac Alt + Saeth i Lawr neu F4 i sbarduno gweithred saeth
 
+MENU_BACK_BUTTON_ARIA_LABEL=Yn Ôl
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=Gwrthod