@brightspace-ui/core 1.228.0 → 1.229.0

package/components/list/README.md

@@ -311,7 +311,8 @@ The `d2l-list-header` component can be placed in the `d2l-list`'s `header` slot
 
 | Property | Type | Description |
 |---|---|---|
-| `padding-type` | String | Header whitespace (`normal` (default), `slim`)|
+| `padding-type` | String | Header whitespace (`normal` (default), `slim`) |
+| `select-all-pages-allowed` | Boolean | Whether all pages can be selected |
 <!-- docs: end hidden content -->
 
 ## List Item [d2l-list-item]

package/components/list/demo/list.html

@@ -64,11 +64,10 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-list>
-						<d2l-list-header slot="header">
-							<d2l-selection-action icon="tier1:tag-hollow" text="Tag" requires-selection></d2l-selection-action>
+					<d2l-list id="allFeatures" item-count="50">
+						<d2l-list-header slot="header" select-all-pages-allowed>
+							<d2l-selection-action icon="tier1:plus-default" text="Add"></d2l-selection-action>
 							<d2l-selection-action icon="tier1:share" text="Share" requires-selection></d2l-selection-action>
-							<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
 						</d2l-list-header>
@@ -130,6 +129,23 @@
 							</div>
 						</d2l-list-item>
 					</d2l-list>
+					<script>
+						let newItemCount = 0;
+						document.querySelector('d2l-selection-action[text="Add"]').addEventListener('d2l-selection-action-click', () => {
+							const item = document.createElement('d2l-list-item');
+							item.selectable = true;
+							item.key = `${++newItemCount}`;
+							item.label = 'New Item';
+							item.innerHTML = `
+								<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
+								<d2l-list-item-content>
+									<div>New Item ${newItemCount}</div>
+									<div slot="supporting-info">Supporting Info</div>
+								</d2l-list-item-content>
+							`;
+							document.querySelector('#allFeatures').appendChild(item);
+						});
+					</script>
 				</template>
 			</d2l-demo-snippet>
 

package/components/list/list-header.js

@@ -1,5 +1,6 @@
 import '../overflow-group/overflow-group.js';
 import '../selection/selection-select-all.js';
+import '../selection/selection-select-all-pages.js';
 import '../selection/selection-summary.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
@@ -25,6 +26,11 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 			 * @type {'normal'|'slim'}
 			 */
 			paddingType: { type: String, attribute: 'padding-type' },
+			/**
+			 * Whether all pages can be selected
+			 * @type {boolean}
+			 */
+			selectAllPagesAllowed: { type: Boolean, attribute: 'select-all-pages-allowed' },
 		};
 	}
 
@@ -60,6 +66,14 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 				margin-left: 0;
 				margin-right: 0.9rem;
 			}
+			d2l-selection-select-all-pages {
+				flex: none;
+				margin-left: 0.45rem;
+			}
+			:host([dir="rtl"]) d2l-selection-select-all-pages {
+				margin-left: 0;
+				margin-right: 0.45rem;
+			}
 			.d2l-list-header-actions {
 				--d2l-overflow-group-justify-content: flex-end;
 				flex: auto;
@@ -75,6 +89,7 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 		super();
 		this.slim = false;
 		this.paddingType = 'normal';
+		this.selectAllPagesAllowed = false;
 	}
 
 	render() {
@@ -86,6 +101,7 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 					class="d2l-list-header-summary"
 					no-selection-text="${this.localize('components.selection.select-all')}">
 				</d2l-selection-summary>
+				${this.selectAllPagesAllowed ? html`<d2l-selection-select-all-pages></d2l-selection-select-all-pages>` : null}
 				<div class="d2l-list-header-actions">
 					<d2l-overflow-group opener-type="icon"><slot></slot></d2l-overflow-group>
 				</div>

package/components/selection/README.md

@@ -97,6 +97,7 @@ The `d2l-list` already extends `SelectionMixin` and should always be used for li
 
 | Property | Type | Description |
 |---|---|---|
+| `item-count` | Number | Total number of items. Required when selecting all pages is allowed. |
 | `selection-single` | Boolean | Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item. |
 <!-- docs: end hidden content -->
 

package/components/selection/selection-input.js

@@ -74,6 +74,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 			});
 			this.dispatchEvent(evt);
 			this._provider = evt.detail.provider;
+			if (this._provider && this._provider._selectAllPages) this.selected = true;
 		});
 	}
 

package/components/selection/selection-mixin.js

@@ -28,7 +28,8 @@ export class SelectionInfo {
 		return {
 			none: 'none',
 			some: 'some',
-			all: 'all'
+			all: 'all',
+			allPages: 'all-pages'
 		};
 	}
 
@@ -38,6 +39,11 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 
 	static get properties() {
 		return {
+			/**
+			 * Total number of items. Required when selecting all pages is allowed.
+			 * @type {number}
+			 */
+			itemCount: { type: Number, attribute: 'item-count' },
 			/**
 			 * Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.
 			 * @type {boolean}
@@ -48,7 +54,9 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 
 	constructor() {
 		super();
+		this.itemCount = 0;
 		this.selectionSingle = false;
+		this._selectAllPages = false;
 		this._selectionObservers = new Map();
 		this._selectionSelectables = new Map();
 	}
@@ -80,22 +88,28 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 		let state = SelectionInfo.states.none;
 		const keys = [];
 
-		this._selectionSelectables.forEach(selectable => {
-			if (selectable.selected) keys.push(selectable.key);
-			if (selectable._indeterminate) state = SelectionInfo.states.some;
-		});
+		if (this._selectAllPages) {
+			state = SelectionInfo.states.allPages;
+		} else {
+			this._selectionSelectables.forEach(selectable => {
+				if (selectable.selected) keys.push(selectable.key);
+				if (selectable._indeterminate) state = SelectionInfo.states.some;
+			});
 
-		if (keys.length > 0) {
-			if (keys.length === this._selectionSelectables.size) state = SelectionInfo.states.all;
-			else state = SelectionInfo.states.some;
+			if (keys.length > 0) {
+				if (keys.length === this._selectionSelectables.size) state = SelectionInfo.states.all;
+				else state = SelectionInfo.states.some;
+			}
 		}
 
 		return new SelectionInfo(keys, state);
 	}
 
-	setSelectionForAll(selected) {
+	setSelectionForAll(selected, selectAllPages) {
 		if (this.selectionSingle && selected) return;
 
+		this._selectAllPages = (selected && selectAllPages);
+
 		this._selectionSelectables.forEach(selectable => {
 			if (!!selectable.selected !== selected) {
 				selectable.selected = selected;
@@ -154,6 +168,7 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 	}
 
 	_handleSelectionChange(e) {
+		if (!e.detail.selected) this._selectAllPages = false;
 		if (this.selectionSingle && e.detail.selected) {
 			const target = e.composedPath().find(elem => elem.tagName === 'D2L-SELECTION-INPUT');
 			this._selectionSelectables.forEach(selectable => {

package/components/selection/selection-select-all-pages.js

@@ -0,0 +1,48 @@
+import '../button/button-subtle.js';
+import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
+import { SelectionInfo } from './selection-mixin.js';
+import { SelectionObserverMixin } from './selection-observer-mixin.js';
+
+/**
+ * A subtle button that selects all items for all pages.
+ * @fires d2l-selection-observer-subscribe - Internal event
+ */
+class SelectAllPages extends LocalizeCoreElement(SelectionObserverMixin(LitElement)) {
+
+	static get styles() {
+		return css`
+			:host {
+				display: inline-block;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+		`;
+	}
+
+	render() {
+		if (!this._provider) return;
+		if (!this._provider.itemCount) return;
+		if (this._provider.selectionSingle) return;
+		if (this.selectionInfo.state !== SelectionInfo.states.all) return;
+
+		return html`
+			<d2l-button-subtle
+				@click="${this._handleClick}"
+				text="${this.localize('components.selection.select-all-items', 'count', this._provider.itemCount)}">
+			</d2l-button-subtle>`;
+	}
+
+	focus() {
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-button-subtle');
+		if (elem) elem.focus();
+	}
+
+	_handleClick() {
+		if (this._provider) this._provider.setSelectionForAll(true, true);
+	}
+
+}
+
+customElements.define('d2l-selection-select-all-pages', SelectAllPages);

package/components/selection/selection-select-all.js

@@ -48,7 +48,7 @@ class SelectAll extends LocalizeCoreElement(SelectionObserverMixin(LitElement))
 			<d2l-input-checkbox
 				aria-label="${this.localize('components.selection.select-all')}"
 				@change="${this._handleCheckboxChange}"
-				?checked="${this.selectionInfo.state === SelectionInfo.states.all}"
+				?checked="${this.selectionInfo.state === SelectionInfo.states.all || this.selectionInfo.state === SelectionInfo.states.allPages}"
 				?disabled="${this.disabled}"
 				description="${ifDefined(this.selectionInfo.state !== SelectionInfo.states.none ? summary : undefined)}"
 				?indeterminate="${this.selectionInfo.state === SelectionInfo.states.some}">
@@ -62,7 +62,7 @@ class SelectAll extends LocalizeCoreElement(SelectionObserverMixin(LitElement))
 	}
 
 	_handleCheckboxChange(e) {
-		if (this._provider) this._provider.setSelectionForAll(e.target.checked);
+		if (this._provider) this._provider.setSelectionForAll(e.target.checked, false);
 	}
 
 }

package/components/selection/selection-summary.js

@@ -37,8 +37,12 @@ class Summary extends LocalizeCoreElement(SelectionObserverMixin(LitElement)) {
 	render() {
 		if (this._provider && this._provider.selectionSingle) return;
 
+		const count = (this.selectionInfo.state === SelectionInfo.states.allPages ?
+			this._provider.itemCount : this.selectionInfo.keys.length);
+
 		const summary = (this.selectionInfo.state === SelectionInfo.states.none && this.noSelectionText ?
-			this.noSelectionText : this.localize('components.selection.selected', 'count', this.selectionInfo.keys.length));
+			this.noSelectionText : this.localize('components.selection.selected', 'count', count));
+
 		return html`
 			<p class="d2l-body-compact">${summary}</p>
 		`;

package/custom-elements.json

@@ -6678,6 +6678,12 @@
           "description": "How much padding to render list items with",
           "type": "'normal'|'slim'",
           "default": "\"normal\""
+        },
+        {
+          "name": "select-all-pages-allowed",
+          "description": "Whether all pages can be selected",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -6692,6 +6698,13 @@
           "description": "How much padding to render list items with",
           "type": "'normal'|'slim'",
           "default": "\"normal\""
+        },
+        {
+          "name": "selectAllPagesAllowed",
+          "attribute": "select-all-pages-allowed",
+          "description": "Whether all pages can be selected",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "slots": [
@@ -7352,6 +7365,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "item-count",
+          "description": "Total number of items. Required when selecting all pages is allowed.",
+          "type": "number",
+          "default": "0"
+        },
         {
           "name": "selection-single",
           "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
@@ -7388,6 +7407,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. Required when selecting all pages is allowed.",
+          "type": "number",
+          "default": "0"
+        },
         {
           "name": "selectionSingle",
           "attribute": "selection-single",
@@ -8389,6 +8415,12 @@
       "name": "d2l-demo-selection",
       "path": "./components/selection/demo/demo-selection.js",
       "attributes": [
+        {
+          "name": "item-count",
+          "description": "Total number of items. Required when selecting all pages is allowed.",
+          "type": "number",
+          "default": "0"
+        },
         {
           "name": "selection-single",
           "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
@@ -8397,6 +8429,13 @@
         }
       ],
       "properties": [
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. Required when selecting all pages is allowed.",
+          "type": "number",
+          "default": "0"
+        },
         {
           "name": "selectionSingle",
           "attribute": "selection-single",
@@ -8590,6 +8629,35 @@
         }
       ]
     },
+    {
+      "name": "d2l-selection-select-all-pages",
+      "path": "./components/selection/selection-select-all-pages.js",
+      "description": "A subtle button that selects all items for all pages.",
+      "attributes": [
+        {
+          "name": "selection-for",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "selectionFor",
+          "attribute": "selection-for",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
+        {
+          "name": "selectionInfo"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-selection-observer-subscribe",
+          "description": "Internal event"
+        }
+      ]
+    },
     {
       "name": "d2l-selection-select-all",
       "path": "./components/selection/selection-select-all.js",
@@ -8676,6 +8744,12 @@
       "name": "d2l-test-selection",
       "path": "./components/selection/test/selection-component.js",
       "attributes": [
+        {
+          "name": "item-count",
+          "description": "Total number of items. Required when selecting all pages is allowed.",
+          "type": "number",
+          "default": "0"
+        },
         {
           "name": "selection-single",
           "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
@@ -8684,6 +8758,13 @@
         }
       ],
       "properties": [
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. Required when selecting all pages is allowed.",
+          "type": "number",
+          "default": "0"
+        },
         {
           "name": "selectionSingle",
           "attribute": "selection-single",

package/lang/ar.js

@@ -1,12 +1,11 @@
 /* eslint quotes: 0 */
-
 export default {
 	"components.alert.close": "إغلاق التنبيه",
 	"components.breadcrumbs.breadcrumb": "شريط التنقل",
 	"components.calendar.notSelected": "لم يتم التحديد.",
 	"components.calendar.selected": "تم التحديد.",
 	"components.calendar.show": "إظهار {month}",
-	"components.count-badge.plus" : "{number}+",
+	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "إغلاق مربع الحوار هذا",
 	"components.dropdown.close": "إغلاق",
 	"components.filter.clear": "مسح",
@@ -17,9 +16,9 @@ export default {
 	"components.filter.clearAnnounceSingle": "جارٍ مسح عوامل التصفية",
 	"components.filter.clearDescription": "مسح عوامل التصفية لـ: {filterName}",
 	"components.filter.clearDescriptionSingle": "مسح عوامل التصفية",
-	"components.filter.loading": "يتم تحميل عوامل التصفية",
 	"components.filter.filterCountDescription": "{number, plural, zero {لم يتم تطبيق عوامل تصفية.} one {تم تطبيق عامل تصفية واحد.} other {{number} من عوامل التصفية التي تم تطبيقها.}}",
 	"components.filter.filters": "عوامل التصفية",
+	"components.filter.loading": "يتم تحميل عوامل التصفية",
 	"components.filter.noFilters": "ما من عوامل تصفية متوفرة",
 	"components.filter.searchResults": "{number, plural, zero {ما من نتائج بحث} one {نتيجة بحث واحدة} other {{number} من نتائج البحث}}",
 	"components.filter.singleDimensionDescription": "التصفية حسب: {filterName}",
@@ -49,37 +48,37 @@ export default {
 	"components.input-date.errorMaxDateOnly": "يجب أن يكون التاريخ قبل {maxDate}",
 	"components.input-date.errorMinDateOnly": "يجب أن يكون التاريخ بعد {minDate}",
 	"components.input-date.errorOutsideRange": "يجب أن يكون التاريخ بين {minDate} و{maxDate}",
-	"components.input-date.openInstructions": "استخدم تنسيق التاريخ {format}. انتقل إلى الأسفل أو اضغط على Enter للوصول إلى التقويم المصغّر.",
 	"components.input-date.now": "الآن",
+	"components.input-date.openInstructions": "استخدم تنسيق التاريخ {format}. انتقل إلى الأسفل أو اضغط على Enter للوصول إلى التقويم المصغّر.",
 	"components.input-date.today": "اليوم",
-	"components.input-number.hintInteger": "يقبل هذا الحقل قيم الأعداد الصحيحة فقط (بدون أعداد عشرية)",
 	"components.input-number.hintDecimalDuplicate": "يوجد عدد عشري في هذا الرقم",
 	"components.input-number.hintDecimalIncorrectComma": "لإضافة عدد عشري، استخدم حرف الفاصلة \",\"",
 	"components.input-number.hintDecimalIncorrectPeriod": "لإضافة عدد عشري، استخدم حرف النقطة \".\"",
+	"components.input-number.hintInteger": "يقبل هذا الحقل قيم الأعداد الصحيحة فقط (بدون أعداد عشرية)",
 	"components.input-search.clear": "مسح البحث",
 	"components.input-search.defaultPlaceholder": "البحث...",
 	"components.input-search.search": "بحث",
 	"components.input-time-range.endTime": "وقت النهاية",
 	"components.input-time-range.errorBadInput": "يجب أن يكون تاريخ {startLabel} قبل {endLabel}",
 	"components.input-time-range.startTime": "وقت البدء",
+	"components.list-item-drag-handle-tooltip.enter-desc": "تبديل وضع إعادة ترتيب لوحة المفاتيح.",
+	"components.list-item-drag-handle-tooltip.enter-key": "إدخال",
+	"components.list-item-drag-handle-tooltip.left-right-desc": "غيِّر مستوى التداخل.",
+	"components.list-item-drag-handle-tooltip.left-right-key": "يسار/يمين",
+	"components.list-item-drag-handle-tooltip.title": "عناصر التحكم بلوحة المفاتيح لإعادة الترتيب:",
+	"components.list-item-drag-handle-tooltip.up-down-desc": "نقل المادة إلى الأعلى أو الأسفل في القائمة.",
+	"components.list-item-drag-handle-tooltip.up-down-key": "أعلى/أسفل",
 	"components.list-item-drag-handle.default": "إعادة ترتيب إجراء المادة لـ {name}",
 	"components.list-item-drag-handle.keyboard": "إعادة ترتيب المواد، الموضع الحالي {currentPosition} من أصل {size}. لنقل هذه المادة، اضغط على السهم المتجه إلى أعلى أو السهم المتجه إلى أسفل.",
-	"components.list-item-tooltip.title": "التنقل عبر لوحة المفاتيح للقوائم:",
-	"components.list-item-tooltip.enter-key": "إدخال",
 	"components.list-item-tooltip.enter-desc": "تنشيط خيار التركيز.",
-	"components.list-item-tooltip.up-down-key": "أعلى/أسفل",
-	"components.list-item-tooltip.up-down-desc": "نقل التركيز بين مواد القائمة.",
-	"components.list-item-tooltip.left-right-key": "يسار/يمين",
+	"components.list-item-tooltip.enter-key": "إدخال",
 	"components.list-item-tooltip.left-right-desc": "نقل التركيز ضمن المادة الحالية.",
-	"components.list-item-tooltip.page-up-down-key": "صفحة إلى الأعلى/الأسفل",
+	"components.list-item-tooltip.left-right-key": "يسار/يمين",
 	"components.list-item-tooltip.page-up-down-desc": "نقل التركيز لـ 5 مواد في كل مرة.",
-	"components.list-item-drag-handle-tooltip.title": "عناصر التحكم بلوحة المفاتيح لإعادة الترتيب:",
-	"components.list-item-drag-handle-tooltip.enter-key": "إدخال",
-	"components.list-item-drag-handle-tooltip.enter-desc": "تبديل وضع إعادة ترتيب لوحة المفاتيح.",
-	"components.list-item-drag-handle-tooltip.up-down-key": "أعلى/أسفل",
-	"components.list-item-drag-handle-tooltip.up-down-desc": "نقل المادة إلى الأعلى أو الأسفل في القائمة.",
-	"components.list-item-drag-handle-tooltip.left-right-key": "يسار/يمين",
-	"components.list-item-drag-handle-tooltip.left-right-desc": "غيِّر مستوى التداخل.",
+	"components.list-item-tooltip.page-up-down-key": "صفحة إلى الأعلى/الأسفل",
+	"components.list-item-tooltip.title": "التنقل عبر لوحة المفاتيح للقوائم:",
+	"components.list-item-tooltip.up-down-desc": "نقل التركيز بين مواد القائمة.",
+	"components.list-item-tooltip.up-down-key": "أعلى/أسفل",
 	"components.menu-item-return.return": "العودة إلى القائمة السابقة.",
 	"components.menu-item-return.returnCurrentlyShowing": "العودة إلى القائمة السابقة. يتم عرض {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}، ‏{term2}",
@@ -90,6 +89,7 @@ export default {
 	"components.overflow-group.moreActions": "مزيد من الإجراءات",
 	"components.selection.action-hint": "حدد مادة لتنفيذ هذا الإجراء.",
 	"components.selection.select-all": "تحديد الكل",
+	"components.selection.select-all-items": "Select All {count} Items",
 	"components.selection.selected": "تم تحديد {count}",
 	"components.switch.visibility": "إمكانية الرؤية",
 	"components.tabs.next": "التمرير إلى الأمام",

package/lang/cy.js

@@ -1,12 +1,11 @@
 /* eslint quotes: 0 */
-
 export default {
 	"components.alert.close": "Cau Hysbysiad",
 	"components.breadcrumbs.breadcrumb": "Briwsionyn Bara",
 	"components.calendar.notSelected": "Heb ei Ddewis.",
 	"components.calendar.selected": "Wedi'i Ddewis.",
 	"components.calendar.show": "Dangos {month}",
-	"components.count-badge.plus" : "{number}+",
+	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Cau'r dialog hwn",
 	"components.dropdown.close": "Cau",
 	"components.filter.clear": "Clirio",
@@ -17,9 +16,9 @@ export default {
 	"components.filter.clearAnnounceSingle": "Wrthi'n clirio hidlwyr",
 	"components.filter.clearDescription": "Wrthi’n clirio hidlwyd ar gyfer: {filterName}",
 	"components.filter.clearDescriptionSingle": "Clirio Hidlwyr",
-	"components.filter.loading": "Wrthi’n llwytho hidlyddion",
 	"components.filter.filterCountDescription": "{number, plural, zero {Ni chymhwyswyd hidlwyr.} one {1 hidlydd wedi'i gymhwyso.} other {{number} hidlydd wedi'u cymhwyso.}}",
 	"components.filter.filters": "Hidlyddion",
+	"components.filter.loading": "Wrthi’n llwytho hidlyddion",
 	"components.filter.noFilters": "Dim hidlyddion ar gael",
 	"components.filter.searchResults": "{number, plural, zero {Dim canlyniadau chwilio} one {1 canlyniad chwilio} other {{number} o ganlyniadau chwilio}}",
 	"components.filter.singleDimensionDescription": "Hidlo yn ôl: {filterName}",
@@ -49,37 +48,37 @@ export default {
 	"components.input-date.errorMaxDateOnly": "Rhaid i'r dyddiad fod cyn {maxDate}",
 	"components.input-date.errorMinDateOnly": "Rhaid i'r dyddiad fod ar ôl {minDate}",
 	"components.input-date.errorOutsideRange": "Rhaid i'r dyddiad fod rhwng {minDate} a {maxDate}",
-	"components.input-date.openInstructions": "Defnyddio fformat dyddiad {format}. Pwyswch saeth i lawr neu Enter i gael mynediad at galendr bach.",
 	"components.input-date.now": "Nawr",
+	"components.input-date.openInstructions": "Defnyddio fformat dyddiad {format}. Pwyswch saeth i lawr neu Enter i gael mynediad at galendr bach.",
 	"components.input-date.today": "Heddiw",
-	"components.input-number.hintInteger": "Mae'r maes hwn yn derbyn gwerthoedd cyfanrif yn unig (dim degolion)",
 	"components.input-number.hintDecimalDuplicate": "Mae degol eisoes yn y nifer hwn",
 	"components.input-number.hintDecimalIncorrectComma": "I ychwanegu degol defnyddiwch y nod coma \",”",
 	"components.input-number.hintDecimalIncorrectPeriod": "I ychwanegu degol defnyddiwch y nod atalnod llawn \".\"",
+	"components.input-number.hintInteger": "Mae'r maes hwn yn derbyn gwerthoedd cyfanrif yn unig (dim degolion)",
 	"components.input-search.clear": "Clirio'r Chwilio",
 	"components.input-search.defaultPlaceholder": "Chwilio...",
 	"components.input-search.search": "Chwilio",
 	"components.input-time-range.endTime": "Amser Gorffen",
 	"components.input-time-range.errorBadInput": "Rhaid i {startLabel} fod cyn {endLabel}",
 	"components.input-time-range.startTime": "Amser Dechrau",
+	"components.list-item-drag-handle-tooltip.enter-desc": "Toglo'r modd aildrefnu bysellfwrdd.",
+	"components.list-item-drag-handle-tooltip.enter-key": "Nodi",
+	"components.list-item-drag-handle-tooltip.left-right-desc": "Newid y lefel nythu.",
+	"components.list-item-drag-handle-tooltip.left-right-key": "Chwith/De",
+	"components.list-item-drag-handle-tooltip.title": "Rheolaethau bysellfwrdd ar gyfer aildrefnu:",
+	"components.list-item-drag-handle-tooltip.up-down-desc": "Symud yr eitem i fyny neu i lawr yn y rhestr.",
+	"components.list-item-drag-handle-tooltip.up-down-key": "I Fyny/I Lawr",
 	"components.list-item-drag-handle.default": "Aildrefnu gweithred eitem ar gyfer {name}",
 	"components.list-item-drag-handle.keyboard": "Aildrefnu eitemau, safle presennol {currentPosition} allan o {size}. I symud yr eitem hon, pwyswch y saeth i fyny neu'r saeth i lawr.",
-	"components.list-item-tooltip.title": "Llywio Bysellfwrdd ar gyfer Rhestrau:",
-	"components.list-item-tooltip.enter-key": "Nodi",
 	"components.list-item-tooltip.enter-desc": "Gweithredu'r opsiwn ffocysu.",
-	"components.list-item-tooltip.up-down-key": "I Fyny/I Lawr",
-	"components.list-item-tooltip.up-down-desc": "Symud y ffocws rhwng eitemau rhestr.",
-	"components.list-item-tooltip.left-right-key": "Chwith/De",
+	"components.list-item-tooltip.enter-key": "Nodi",
 	"components.list-item-tooltip.left-right-desc": "Symud y ffocws o fewn yr eitem bresennol.",
-	"components.list-item-tooltip.page-up-down-key": "Tudalen I Fyny/I Lawr",
+	"components.list-item-tooltip.left-right-key": "Chwith/De",
 	"components.list-item-tooltip.page-up-down-desc": "Symud y ffocws 5 eitem ar y tro.",
-	"components.list-item-drag-handle-tooltip.title": "Rheolaethau bysellfwrdd ar gyfer aildrefnu:",
-	"components.list-item-drag-handle-tooltip.enter-key": "Nodi",
-	"components.list-item-drag-handle-tooltip.enter-desc": "Toglo'r modd aildrefnu bysellfwrdd.",
-	"components.list-item-drag-handle-tooltip.up-down-key": "I Fyny/I Lawr",
-	"components.list-item-drag-handle-tooltip.up-down-desc": "Symud yr eitem i fyny neu i lawr yn y rhestr.",
-	"components.list-item-drag-handle-tooltip.left-right-key": "Chwith/De",
-	"components.list-item-drag-handle-tooltip.left-right-desc": "Newid y lefel nythu.",
+	"components.list-item-tooltip.page-up-down-key": "Tudalen I Fyny/I Lawr",
+	"components.list-item-tooltip.title": "Llywio Bysellfwrdd ar gyfer Rhestrau:",
+	"components.list-item-tooltip.up-down-desc": "Symud y ffocws rhwng eitemau rhestr.",
+	"components.list-item-tooltip.up-down-key": "I Fyny/I Lawr",
 	"components.menu-item-return.return": "Dychwelyd i'r ddewislen flaenorol.",
 	"components.menu-item-return.returnCurrentlyShowing": "Dychwelyd i'r ddewislen flaenorol. Rydych chi'n edrych ar {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
@@ -90,6 +89,7 @@ export default {
 	"components.overflow-group.moreActions": "Rhagor o Gamau Gweithredu",
 	"components.selection.action-hint": "Dewiswch eitem i gyflawni'r weithred hon.",
 	"components.selection.select-all": "Dewis y Cyfan",
+	"components.selection.select-all-items": "Select All {count} Items",
 	"components.selection.selected": "{count} wedi’u dewis.",
 	"components.switch.visibility": "Gwelededd",
 	"components.tabs.next": "Sgrolio Ymlaen",