@brightspace-ui/core 2.47.4 → 2.48.0

package/components/description-list/README.md

@@ -28,7 +28,7 @@ A Description List displays static pairs of terms and definitions in a vertical
 <!-- docs: end best practices -->
 
 ## Responsive Behavior
-When the component width is less than the `breakpoint` property, the side-by-side pairs will appear in a stacked layout.
+For very long values, or very small container sizes, the description list can use a vertically stacked layout. By default this happens at a container-width breakpoint of `240px`, but the `breakpoint` property provides flexibility so it can be adjusted to suit your content.
 
 <!-- docs: demo -->
 ```html

package/components/selection/selection-mixin.js

@@ -48,7 +48,12 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 			 * 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}
 			 */
-			selectionSingle: { type: Boolean, attribute: 'selection-single' }
+			selectionSingle: { type: Boolean, attribute: 'selection-single' },
+			/**
+			 * Number of selected items. Optional parameter used to override existing count.
+			 * @type {number}
+			 */
+			selectionCountOverride: { type: Number, attribute: 'selection-count-override' }
 		};
 	}
 

package/components/selection/selection-summary.js

@@ -37,11 +37,19 @@ 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', count));
+		let count;
+		let summary;
+		if (this._provider && this._provider.selectionCountOverride !== undefined) {
+			count = this._provider.selectionCountOverride;
+			summary = (this._provider.selectionCountOverride === 0 && this.noSelectionText ?
+				this.noSelectionText : this.localize('components.selection.selected', 'count', count));
+		} else {
+			count = (this.selectionInfo.state === SelectionInfo.states.allPages ?
+				this._provider.itemCount : this.selectionInfo.keys.length);
+
+			summary = (this.selectionInfo.state === SelectionInfo.states.none && this.noSelectionText ?
+				this.noSelectionText : this.localize('components.selection.selected', 'count', count));
+		}
 
 		return html`
 			<p class="d2l-body-compact">${summary}</p>

package/custom-elements.json

@@ -7880,6 +7880,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "selection-count-override",
+          "description": "Number of selected items. Optional parameter used to override existing count.",
+          "type": "number"
+        },
         {
           "name": "item-count",
           "description": "Total number of items. Required when selecting all pages is allowed.",
@@ -7922,6 +7927,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "selectionCountOverride",
+          "attribute": "selection-count-override",
+          "description": "Number of selected items. Optional parameter used to override existing count.",
+          "type": "number"
+        },
         {
           "name": "itemCount",
           "attribute": "item-count",
@@ -9093,6 +9104,11 @@
       "name": "d2l-demo-selection",
       "path": "./components/selection/demo/demo-selection.js",
       "attributes": [
+        {
+          "name": "selection-count-override",
+          "description": "Number of selected items. Optional parameter used to override existing count.",
+          "type": "number"
+        },
         {
           "name": "item-count",
           "description": "Total number of items. Required when selecting all pages is allowed.",
@@ -9107,6 +9123,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "selectionCountOverride",
+          "attribute": "selection-count-override",
+          "description": "Number of selected items. Optional parameter used to override existing count.",
+          "type": "number"
+        },
         {
           "name": "itemCount",
           "attribute": "item-count",
@@ -9634,6 +9656,11 @@
       "name": "d2l-test-selection",
       "path": "./components/selection/test/selection-component.js",
       "attributes": [
+        {
+          "name": "selection-count-override",
+          "description": "Number of selected items. Optional parameter used to override existing count.",
+          "type": "number"
+        },
         {
           "name": "item-count",
           "description": "Total number of items. Required when selecting all pages is allowed.",
@@ -9648,6 +9675,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "selectionCountOverride",
+          "attribute": "selection-count-override",
+          "description": "Number of selected items. Optional parameter used to override existing count.",
+          "type": "number"
+        },
         {
           "name": "itemCount",
           "attribute": "item-count",

package/helpers/README.md

@@ -127,7 +127,7 @@ forceFocusVisible(node);
 getComposedActiveElement()
 
 // gets the first focusable descendant given a node, including those within the shadow DOM
-getFirstFocusableDescendant(node, includeHidden, predicate)
+getFirstFocusableDescendant(node, includeHidden, predicate, includeTabbablesOnly)
 
 // gets the last focusable descendant given a node, including those within the shadow DOM
 getLastFocusableDescendant(node, includeHidden)

package/helpers/focus.js

@@ -37,15 +37,15 @@ export function getComposedActiveElement() {
 	return node;
 }
 
-export function getFirstFocusableDescendant(node, includeHidden, predicate) {
+export function getFirstFocusableDescendant(node, includeHidden, predicate, includeTabbablesOnly) {
 	if (predicate === undefined) predicate = () => true;
 
 	const composedChildren = getComposedChildren(node);
 
 	for (let i = 0; i < composedChildren.length; i++) {
-		if (isFocusable(composedChildren[i], includeHidden) && predicate(composedChildren[i])) return composedChildren[i];
+		if (isFocusable(composedChildren[i], includeHidden, includeTabbablesOnly) && predicate(composedChildren[i])) return composedChildren[i];
 
-		const focusable = getFirstFocusableDescendant(composedChildren[i], includeHidden, predicate);
+		const focusable = getFirstFocusableDescendant(composedChildren[i], includeHidden, predicate, includeTabbablesOnly);
 		if (focusable) return focusable;
 	}
 

package/helpers/prism.js

@@ -1,8 +1,5 @@
 import { css, unsafeCSS } from 'lit';
 
-window.Prism = window.Prism || {};
-Prism.manual = true;
-
 const prismLocation = 'https://s.brightspace.com/lib/prismjs/1.28.0';
 //const prismLocation = '/node_modules/prismjs'; // for local debugging
 
@@ -407,6 +404,12 @@ let prismLoaded;
 const loadPrism = () => {
 	if (prismLoaded) return prismLoaded;
 
+	// Set Prism to manual mode before loading to make sure
+	// we don't automatically highlight before we finish
+	// configuring it.
+	window.Prism = window.Prism || {};
+	Prism.manual = true;
+
 	prismLoaded = Promise.all([
 		new Promise(resolve => {
 			const script = document.createElement('script');

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": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} من أصل {totalCountFormatted} من العناصر} other {{showingCount} من أصل {totalCountFormatted} من العناصر}}",
 	"components.pager-load-more.status-loading": "تحميل المزيد من المواد",
 	"components.selection.action-hint": "حدد مادة لتنفيذ هذا الإجراء.",
 	"components.selection.select-all": "تحديد الكل",

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": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} af {totalCountFormatted} element} other {{showingCount} af {totalCountFormatted} elementer}}",
 	"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.47.4",
+  "version": "2.48.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",