@brightspace-ui/core 2.36.1 → 2.37.2

package/components/empty-state/empty-state-styles.js

@@ -14,6 +14,15 @@ export const emptyStateStyles = css`
 		display: none;
 	}
 
+	.action-slot::slotted(*) {
+		display: none;
+	}
+
+	.action-slot::slotted(d2l-empty-state-action-button:first-child),
+	.action-slot::slotted(d2l-empty-state-action-link:first-child) {
+		display: inline-block;
+	}
+
 `;
 
 export const emptyStateSimpleStyles = css`
@@ -28,10 +37,6 @@ export const emptyStateSimpleStyles = css`
 		padding-right: 0.5rem;
 	}
 
-	.d2l-empty-state-action {
-		vertical-align: top;
-	}
-
 `;
 
 export const emptyStateIllustratedStyles = css`
@@ -40,12 +45,16 @@ export const emptyStateIllustratedStyles = css`
 		text-align: center;
 	}
 
-	.d2l-empty-state-action {
-		margin-top: 0.5rem;
+	.illustration-slot::slotted(*) {
+		display: none;
 	}
 
-	.d2l-empty-state-description {
-		margin: 0 auto 0.3rem;
+	.illustration-slot::slotted(svg:first-of-type) {
+		display: inline-block;
+	}
+
+	svg {
+		height: 100%;
 		max-width: 500px;
 		width: 100%;
 	}
@@ -67,16 +76,8 @@ export const emptyStateIllustratedStyles = css`
 		margin-top: 0.5rem;
 	}
 
-	::slotted(*) {
-		display: none;
-	}
-
-	::slotted(svg:first-child) {
-		display: inline-block;
-	}
-
-	svg {
-		height: 100%;
+	.d2l-empty-state-description {
+		margin: 0 auto 0.8rem;
 		max-width: 500px;
 		width: 100%;
 	}

package/components/menu/menu-item-mixin.js

@@ -1,6 +1,4 @@
-import { FocusVisiblePolyfillMixin } from  '../../mixins/focus-visible-polyfill-mixin.js';
-
-export const MenuItemMixin = superclass => class extends FocusVisiblePolyfillMixin(superclass) {
+export const MenuItemMixin = superclass => class extends superclass {
 
 	static get properties() {
 		return {

package/components/menu/menu-item-styles.js

@@ -16,8 +16,6 @@ export const menuItemStyles = css`
 		width: 100%;
 	}
 
-	:host(.focus-visible),
-	:host([first].focus-visible),
 	:host(:hover),
 	:host([first]:hover) {
 		background-color: var(--d2l-menu-background-color-hover);
@@ -27,7 +25,23 @@ export const menuItemStyles = css`
 		z-index: 2;
 	}
 
-	:host([disabled]), :host([disabled]:hover), :host([disabled].focus-visible) {
+	/** separated because Safari <15.4 is having trouble parsing these */
+	:host(:focus-visible),
+	:host([first]:focus-visible) {
+		background-color: var(--d2l-menu-background-color-hover);
+		border-bottom: 1px solid var(--d2l-menu-border-color-hover);
+		border-top: 1px solid var(--d2l-menu-border-color-hover);
+		color: var(--d2l-menu-foreground-color-hover);
+		z-index: 2;
+	}
+
+	:host([disabled]), :host([disabled]:hover) {
+		cursor: default;
+		opacity: 0.75;
+	}
+
+	/** separated because Safari <15.4 is having trouble parsing these */
+	:host([disabled]:focus-visible) {
 		cursor: default;
 		opacity: 0.75;
 	}
@@ -40,7 +54,12 @@ export const menuItemStyles = css`
 		border-top-color: transparent;
 	}
 
-	:host([last]:hover), :host([last].focus-visible) {
+	:host([last]:hover) {
+		border-bottom-color: var(--d2l-menu-border-color-hover);
+	}
+
+	/** separated because Safari <15.4 is having trouble parsing these */
+	:host([last]:focus-visible) {
 		border-bottom-color: var(--d2l-menu-border-color-hover);
 	}
 

package/components/menu/menu.js

@@ -2,7 +2,6 @@ import '../colors/colors.js';
 import '../icons/icon.js';
 import './menu-item-return.js';
 import { css, html, LitElement } from 'lit';
-import { FocusVisiblePolyfillMixin } from  '../../mixins/focus-visible-polyfill-mixin.js';
 import { HierarchicalViewMixin } from '../hierarchical-view/hierarchical-view-mixin.js';
 import { ThemeMixin } from '../../mixins/theme-mixin.js';
 
@@ -21,7 +20,7 @@ const keyCodes = {
  * @slot - Menu items
  * @fires d2l-menu-resize - Dispatched when size of menu changes (e.g., when nested menu of a different size is opened)
  */
-class Menu extends FocusVisiblePolyfillMixin(ThemeMixin(HierarchicalViewMixin(LitElement))) {
+class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
 
 	static get properties() {
 		return {

package/components/paging/pager-load-more.js

@@ -5,6 +5,7 @@ import { buttonStyles } from '../button/button-styles.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
+import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { getFirstFocusableDescendant } from '../../helpers/focus.js';
 import { getSeparator } from '@brightspace-ui/intl/lib/list.js';
 import { labelStyles } from '../typography/styles.js';
@@ -102,11 +103,11 @@ class LoadMore extends FocusMixin(FocusVisiblePolyfillMixin(LocalizeCoreElement(
 				<span class="d2l-offscreen" role="alert">${this.localize('components.pager-load-more.status-loading')}</span>
 				<d2l-loading-spinner size="24"></d2l-loading-spinner>
 			` : html`
-				<span class="action">${this.localize('components.pager-load-more.action', { count: this.pageSize })}</span>
+				<span class="action">${this.localize('components.pager-load-more.action', { count: formatNumber(this.pageSize) })}</span>
 				${this.itemCount > -1 ? html`
 					<span class="d2l-offscreen">${getSeparator({ nonBreaking: true })}</span>
 					<span class="separator"></span>
-					<span class="info">${this.localize('components.pager-load-more.info', { showingCount: this.itemShowingCount, totalCount: this.itemCount })}</span>
+					<span class="info">${this.localize('components.pager-load-more.info', { showingCount: formatNumber(this.itemShowingCount), totalCount: this.itemCount, totalCountFormatted: formatNumber(this.itemCount) })}</span>
 				` : nothing}
 			`}
 		</button>

package/components/typography/styles.js

@@ -1,5 +1,12 @@
 import '../colors/colors.js';
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+
+export const _isValidCssSelector = (selector) => {
+	const re = /[#.]?([a-zA-Z0-9-_]+)(\[[a-zA-Z0-9-_]+\])?([a-zA-Z0-9-_]+)?/g;
+	const match = selector.match(re);
+
+	return !!match && match.length === 1 && match[0].length === selector.length;
+};
 
 export const bodyStandardStyles = css`
 	.d2l-body-standard {
@@ -41,26 +48,36 @@ export const bodyStandardStyles = css`
 	}
 `;
 
-export const bodyCompactStyles = css`
-	.d2l-body-compact {
-		font-size: 0.8rem;
-		font-weight: 400;
-		line-height: 1.2rem;
-	}
-	:host([skeleton]) .d2l-body-compact.d2l-skeletize::before {
-		bottom: 0.3rem;
-		top: 0.3rem;
-	}
-	:host([skeleton]) .d2l-body-compact.d2l-skeletize-paragraph-2 {
-		max-height: 2.4rem;
-	}
-	:host([skeleton]) .d2l-body-compact.d2l-skeletize-paragraph-3 {
-		max-height: 3.6rem;
-	}
-	:host([skeleton]) .d2l-body-compact.d2l-skeletize-paragraph-5 {
-		max-height: 6rem;
-	}
-`;
+/**
+ * A private helper method that should not be used by general consumers
+ */
+export const _generateBodyCompactStyles = (selector) => {
+	if (!_isValidCssSelector(selector)) return;
+
+	selector = unsafeCSS(selector);
+	return css`
+		${selector} {
+			font-size: 0.8rem;
+			font-weight: 400;
+			line-height: 1.2rem;
+		}
+		:host([skeleton]) ${selector}.d2l-skeletize::before {
+			bottom: 0.3rem;
+			top: 0.3rem;
+		}
+		:host([skeleton]) ${selector}.d2l-skeletize-paragraph-2 {
+			max-height: 2.4rem;
+		}
+		:host([skeleton]) ${selector}.d2l-skeletize-paragraph-3 {
+			max-height: 3.6rem;
+		}
+		:host([skeleton]) ${selector}.d2l-skeletize-paragraph-5 {
+			max-height: 6rem;
+		}
+	`;
+};
+
+export const bodyCompactStyles = _generateBodyCompactStyles('.d2l-body-compact');
 
 export const bodySmallStyles = css`
 	.d2l-body-small {
@@ -212,18 +229,28 @@ export const heading4Styles = css`
 	}
 `;
 
-export const labelStyles = css`
-	.d2l-label-text {
-		font-size: 0.7rem;
-		font-weight: 700;
-		letter-spacing: 0.2px;
-		line-height: 1rem;
-	}
-	:host([skeleton]) .d2l-label-text.d2l-skeletize::before {
-		bottom: 0.25rem;
-		top: 0.15rem;
-	}
-`;
+/**
+ * A private helper method that should not be used by general consumers
+ */
+export const _generateLabelStyles = (selector) => {
+	if (!_isValidCssSelector(selector)) return;
+
+	selector = unsafeCSS(selector);
+	return css`
+		${selector} {
+			font-size: 0.7rem;
+			font-weight: 700;
+			letter-spacing: 0.2px;
+			line-height: 1rem;
+		}
+		:host([skeleton]) ${selector}.d2l-skeletize::before {
+			bottom: 0.25rem;
+			top: 0.15rem;
+		}
+	`;
+};
+
+export const labelStyles = _generateLabelStyles('.d2l-label-text');
 
 export const blockquoteStyles = css`
 	.d2l-blockquote {

package/custom-elements.json

@@ -2975,96 +2975,81 @@
       "path": "./components/dropdown/test/dropdown-component.js"
     },
     {
-      "name": "d2l-empty-state-illustrated-button",
-      "path": "./components/empty-state/empty-state-illustrated-button.js",
-      "description": "The `d2l-empty-state-illustrated-button` component is an empty state component that displays an illustration and action button. The illustration property can be set to use one of the preset illustrations or a custom SVG illustration can be added in the default slot.",
+      "name": "d2l-empty-state-action-button",
+      "path": "./components/empty-state/empty-state-action-button.js",
+      "description": "`d2l-empty-state-action-button` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a button action to the component.",
       "attributes": [
         {
-          "name": "primary",
-          "description": "This will change the action button to use a primary button instead of the default subtle button",
-          "type": "boolean"
-        },
-        {
-          "name": "action-text",
-          "description": "The action text to be used in the subtle button",
-          "type": "string"
-        },
-        {
-          "name": "description",
-          "description": "REQUIRED: A description giving details about the empty state",
-          "type": "string"
-        },
-        {
-          "name": "illustration-name",
-          "description": "The name of the preset image you would like to display in the component",
+          "name": "text",
+          "description": "REQUIRED: The action text to be used in the button",
           "type": "string"
         },
         {
-          "name": "title-text",
-          "description": "REQUIRED: A title for the empty state",
-          "type": "string"
+          "name": "primary",
+          "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-empty-state-action-button` is placed within `d2l-empty-state-illustrated` components",
+          "type": "boolean"
         }
       ],
       "properties": [
         {
-          "name": "primary",
-          "attribute": "primary",
-          "description": "This will change the action button to use a primary button instead of the default subtle button",
-          "type": "boolean"
-        },
-        {
-          "name": "actionText",
-          "attribute": "action-text",
-          "description": "The action text to be used in the subtle button",
-          "type": "string"
-        },
-        {
-          "name": "description",
-          "attribute": "description",
-          "description": "REQUIRED: A description giving details about the empty state",
-          "type": "string"
-        },
-        {
-          "name": "illustrationName",
-          "attribute": "illustration-name",
-          "description": "The name of the preset image you would like to display in the component",
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: The action text to be used in the button",
           "type": "string"
         },
         {
-          "name": "titleText",
-          "attribute": "title-text",
-          "description": "REQUIRED: A title for the empty state",
-          "type": "string"
+          "name": "primary",
+          "attribute": "primary",
+          "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-empty-state-action-button` is placed within `d2l-empty-state-illustrated` components",
+          "type": "boolean"
         }
       ],
       "events": [
         {
           "name": "d2l-empty-state-action",
           "description": "Dispatched when the action button is clicked"
-        }
-      ],
-      "slots": [
+        },
         {
-          "name": "",
-          "description": "Custom SVG content if `illustration-name` property is not set"
+          "name": "d2l-empty-state-illustrated-check"
         }
       ]
     },
     {
-      "name": "d2l-empty-state-illustrated-link",
-      "path": "./components/empty-state/empty-state-illustrated-link.js",
-      "description": "The `d2l-empty-state-illustrated-link` component is an empty state component that displays an illustration and action link. The illustration property can be set to use one of the preset illustrations or a custom SVG illustration can be added in the default slot.",
+      "name": "d2l-empty-state-action-link",
+      "path": "./components/empty-state/empty-state-action-link.js",
+      "description": "`d2l-empty-state-action-link` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a link action to the component.",
       "attributes": [
         {
-          "name": "action-href",
-          "description": "The action URL or URL fragment of the link",
+          "name": "text",
+          "description": "REQUIRED: The action text to be used in the subtle button",
           "type": "string"
         },
         {
-          "name": "action-text",
-          "description": "The action text to be used in the subtle button",
+          "name": "href",
+          "description": "REQUIRED: The action URL or URL fragment of the link",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: The action text to be used in the subtle button",
           "type": "string"
         },
+        {
+          "name": "href",
+          "attribute": "href",
+          "description": "REQUIRED: The action URL or URL fragment of the link",
+          "type": "string"
+        }
+      ]
+    },
+    {
+      "name": "d2l-empty-state-illustrated",
+      "path": "./components/empty-state/empty-state-illustrated.js",
+      "description": "The `d2l-empty-state-illustrated` component is an empty state component that displays a title and description with an illustration. An empty state action component can be placed inside of the default slot to add an optional action.",
+      "attributes": [
         {
           "name": "description",
           "description": "REQUIRED: A description giving details about the empty state",
@@ -3082,18 +3067,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "actionHref",
-          "attribute": "action-href",
-          "description": "The action URL or URL fragment of the link",
-          "type": "string"
-        },
-        {
-          "name": "actionText",
-          "attribute": "action-text",
-          "description": "The action text to be used in the subtle button",
-          "type": "string"
-        },
         {
           "name": "description",
           "attribute": "description",
@@ -3116,20 +3089,19 @@
       "slots": [
         {
           "name": "",
-          "description": "Custom SVG content if `illustration-name` property is not set"
+          "description": "Slot for empty state actions"
+        },
+        {
+          "name": "illustration",
+          "description": "Slot for custom SVG content if `illustration-name` property is not set"
         }
       ]
     },
     {
-      "name": "d2l-empty-state-simple-button",
-      "path": "./components/empty-state/empty-state-simple-button.js",
-      "description": "The `d2l-empty-state-simple-button` component is an empty state component that displays a description and action button.",
+      "name": "d2l-empty-state-simple",
+      "path": "./components/empty-state/empty-state-simple.js",
+      "description": "The `d2l-empty-state-simple` component is an empty state component that displays a description. An empty state action component can be placed inside of the default slot to add an optional action.",
       "attributes": [
-        {
-          "name": "action-text",
-          "description": "The action text to be used in the subtle button",
-          "type": "string"
-        },
         {
           "name": "description",
           "description": "REQUIRED: A description giving details about the empty state",
@@ -3137,12 +3109,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "actionText",
-          "attribute": "action-text",
-          "description": "The action text to be used in the subtle button",
-          "type": "string"
-        },
         {
           "name": "description",
           "attribute": "description",
@@ -3150,52 +3116,10 @@
           "type": "string"
         }
       ],
-      "events": [
-        {
-          "name": "d2l-empty-state-action",
-          "description": "Dispatched when the action button is clicked"
-        }
-      ]
-    },
-    {
-      "name": "d2l-empty-state-simple-link",
-      "path": "./components/empty-state/empty-state-simple-link.js",
-      "description": "The `d2l-empty-state-simple-link` component is an empty state component that displays a description and action link.",
-      "attributes": [
-        {
-          "name": "action-href",
-          "description": "The action URL or URL fragment of the link",
-          "type": "string"
-        },
-        {
-          "name": "action-text",
-          "description": "The action text to be used in the link",
-          "type": "string"
-        },
-        {
-          "name": "description",
-          "description": "REQUIRED: A description giving details about the empty state",
-          "type": "string"
-        }
-      ],
-      "properties": [
-        {
-          "name": "actionHref",
-          "attribute": "action-href",
-          "description": "The action URL or URL fragment of the link",
-          "type": "string"
-        },
-        {
-          "name": "actionText",
-          "attribute": "action-text",
-          "description": "The action text to be used in the link",
-          "type": "string"
-        },
+      "slots": [
         {
-          "name": "description",
-          "attribute": "description",
-          "description": "REQUIRED: A description giving details about the empty state",
-          "type": "string"
+          "name": "",
+          "description": "Slot for empty state actions"
         }
       ]
     },

package/lang/ar.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "المزيد",
 	"components.overflow-group.moreActions": "مزيد من الإجراءات",
 	"components.pager-load-more.action": "تحميل {count} إضافي",
-	"components.pager-load-more.info": "{showingCount} من {totalCount} من المواد",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "تحميل المزيد من المواد",
 	"components.selection.action-hint": "حدد مادة لتنفيذ هذا الإجراء.",
 	"components.selection.select-all": "تحديد الكل",

package/lang/cy.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "mwy",
 	"components.overflow-group.moreActions": "Rhagor o Gamau Gweithredu",
 	"components.pager-load-more.action": "Lwytho {count} Arall",
-	"components.pager-load-more.info": "{showingCount} o {totalCount} eitem",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Llwytho rhagor o eitemau",
 	"components.selection.action-hint": "Dewiswch eitem i gyflawni'r weithred hon.",
 	"components.selection.select-all": "Dewis y Cyfan",

package/lang/da.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "flere",
 	"components.overflow-group.moreActions": "Flere handlinger",
 	"components.pager-load-more.action": "Indlæs {count} mere",
-	"components.pager-load-more.info": "{showingCount} af {totalCount} elementer",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Indlæser flere elementer",
 	"components.selection.action-hint": "Vælg et element for at udføre denne handling.",
 	"components.selection.select-all": "Vælg alle",

package/lang/de.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "mehr",
 	"components.overflow-group.moreActions": "Weitere Aktionen",
 	"components.pager-load-more.action": "{count} weitere laden",
-	"components.pager-load-more.info": "{showingCount} von {totalCount} Elementen",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Weitere Elemente werden geladen",
 	"components.selection.action-hint": "Wählen Sie ein Element aus, um diese Aktion auszuführen.",
 	"components.selection.select-all": "Alle auswählen",

package/lang/en.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "more",
 	"components.overflow-group.moreActions": "More Actions",
 	"components.pager-load-more.action": "Load {count} More",
-	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "Select an item to perform this action.",
 	"components.selection.select-all": "Select All",

package/lang/es-es.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "más",
 	"components.overflow-group.moreActions": "Más acciones",
 	"components.pager-load-more.action": "Cargar {count} más",
-	"components.pager-load-more.info": "{showingCount} de {totalCount} elementos",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Cargando más elementos",
 	"components.selection.action-hint": "Seleccione un elemento para realizar esta acción.",
 	"components.selection.select-all": "Seleccionar todo",

package/lang/es.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "más",
 	"components.overflow-group.moreActions": "Más acciones",
 	"components.pager-load-more.action": "Cargar {count} más",
-	"components.pager-load-more.info": "{showingCount} de {totalCount} elementos",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Cargando más elementos",
 	"components.selection.action-hint": "Seleccione un elemento para realizar esta acción.",
 	"components.selection.select-all": "Seleccionar todo",

package/lang/fr-fr.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "plus",
 	"components.overflow-group.moreActions": "Plus d'actions",
 	"components.pager-load-more.action": "Charger {count} supplémentaire(s)",
-	"components.pager-load-more.info": "{showingCount} élément(s) sur {totalCount}",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Charger plus d’éléments",
 	"components.selection.action-hint": "Sélectionnez un élément pour exécuter cette action.",
 	"components.selection.select-all": "Tout sélectionner",

package/lang/fr.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "plus",
 	"components.overflow-group.moreActions": "Plus d'actions",
 	"components.pager-load-more.action": "Charger {count} de plus",
-	"components.pager-load-more.info": "{showingCount} de {totalCount} éléments",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Chargement d'autres d'éléments",
 	"components.selection.action-hint": "Sélectionner un élément pour exécuter cette action.",
 	"components.selection.select-all": "Tout sélectionner",

package/lang/hi.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "अधिक",
 	"components.overflow-group.moreActions": "अधिक क्रियाएँ",
 	"components.pager-load-more.action": "{count} और लोड करें",
-	"components.pager-load-more.info": "{totalCount} में से {showingCount} आइटम",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "और आइटम लोड करना",
 	"components.selection.action-hint": "यह कार्रवाई निष्पादित करने के लिए कोई आइटम का चयन करें।",
 	"components.selection.select-all": "सभी का चयन करें",

package/lang/ja.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "増やす",
 	"components.overflow-group.moreActions": "その他のアクション",
 	"components.pager-load-more.action": "さらに {count} 件を読み込む",
-	"components.pager-load-more.info": "{showingCount}/{totalCount} 項目",
+	"components.pager-load-more.info": "{totalCount, plural, other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "さらに項目を読み込み中",
 	"components.selection.action-hint": "このアクションを実行するための項目を選択します。",
 	"components.selection.select-all": "すべて選択",