@brightspace-ui/core 2.47.2 → 2.47.5

package/components/description-list/README.md

@@ -1,5 +1,5 @@
 # Description List
-A Description List displays information in a vertical list of key-value pairs. Common usages could include terms & definitions, or fields & values.
+A Description List displays static pairs of terms and definitions in a vertical list. In the standard HTML element `dl` these are called "terms" `dt` and "definitions" `dd`.
 
 <!-- docs: demo -->
 ```html
@@ -10,16 +10,20 @@ A Description List displays information in a vertical list of key-value pairs. C
 ```
 
 ## Best Practices
+
 <!-- docs: start best practices -->
 <!-- docs: start dos -->
-* Terms and descriptions are 1-to-1
+* Keep terms short and scannable
+* Use terms of similar lengths since definitions are aligned to the longest term
+* Use title case for terms and sentence case for definitions
+* Adjust the [responsive breakpoint](#responsive-behavior) to suit your content since longer values may need a higher breakpoint
 <!-- docs: end dos -->
 
 <!-- docs: start donts -->
-* Don't have a term without a description
-* Don't have a description without a term
-* Don't have multiple terms for a description
-* Don't have multiple descriptions for a term
+* Avoid using multiple description lists on one page
+* Don't use empty terms or definitions, both are required
+* Don't use colons in the labels, they're unnecessary
+* Don't end a definition with a period unless it has multiple sentences
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
@@ -42,11 +46,14 @@ When the component width is less than the `breakpoint` property, the side-by-sid
       return html`
         <d2l-dl-wrapper breakpoint="600">
           <dl>
-            <dt>Course Code That Represents The Course as a Short String</dt>
-            <dd>A short string that represents the course, often with important information such as section or room number.</dd>
+            <dt>Active Course</dt>
+            <dd>Inactive courses are invisible, regardless of start or end dates unless the user’s role has the permission "Can View Inactive Courses"</dd>
+
+            <dt>Start Date</dt>
+            <dd>The start date determines when a course becomes available to learners. Users with the "Can View Course Before Start Date" permission are excluded from this restriction.</dd>
 
-            <dt>Availability Dates</dt>
-            <dd>The start and end date for the course. Learners can't access courses outside these dates.</dd>
+            <dt>End Date</dt>
+            <dd>The end date determines when a course becomes unavailable to learners. Users with the "Can View Course After End Date" permission are excluded from this restriction.</dd>
           </dl>
         </d2l-dl-wrapper>
       `;
@@ -60,9 +67,9 @@ When the component width is less than the `breakpoint` property, the side-by-sid
 
 ## Description List Wrapper [d2l-dl-wrapper]
 
-The `d2l-dl-wrapper` can be combined with `descriptionListStyles` to apply styling and resize behavior to native `dl` elements.
+The `d2l-dl-wrapper` component can be combined with `descriptionListStyles` to apply styling and resize behavior to native `dl` elements.
 
-<!-- docs: demo live name:d2l-test-dl -->
+<!-- docs: demo live name:d2l-test-dl display:block -->
 ```html
 <script type="module">
   import { html, LitElement } from 'lit';
@@ -84,11 +91,17 @@ The `d2l-dl-wrapper` can be combined with `descriptionListStyles` to apply styli
       return html`
         <d2l-dl-wrapper breakpoint="${this.breakpoint}">
           <dl>
-            <dt>Course Code That Represents The Course as a Short String</dt>
-            <dd>A short string that represents the course, often with important information such as section or room number.</dd>
+            <dt>Course Name</dt>
+            <dd>Brightspace 101B</dd>
+
+            <dt>Course Code</dt>
+            <dd>BSPC 101B</dd>
+
+            <dt>Start Date</dt>
+            <dd>June 14 2022</dd>
 
-            <dt>Availability Dates</dt>
-            <dd>The start and end date for the course. Learners can't access courses outside these dates.</dd>
+            <dt>Semester</dt>
+            <dd>2022 Summer</dd>
           </dl>
         </d2l-dl-wrapper>
       `;

package/components/description-list/description-list-wrapper.js

@@ -4,26 +4,26 @@ import { classMap } from 'lit/directives/class-map.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 
 export const descriptionListStyles = [
-	_generateLabelStyles('dt'),
-	_generateBodyCompactStyles('dd'),
+	_generateLabelStyles('d2l-dl-wrapper > dl > dt'),
+	_generateBodyCompactStyles('d2l-dl-wrapper > dl > dd'),
 	css`
-		:host {
+		d2l-dl-wrapper {
 			--d2l-dl-wrapper-dt-min-width: min-content;
 			--d2l-dl-wrapper-dt-max-width: 10rem;
 			--d2l-dl-wrapper-dd-min-width: 50%;
 		}
-		dl {
+		d2l-dl-wrapper > dl {
 			align-items: baseline;
 			display: var(--d2l-dl-wrapper-dl-display, grid);
 			gap: 0.3rem 1.5rem;
 			grid-auto-flow: row;
 			grid-template-columns: minmax(var(--d2l-dl-wrapper-dt-min-width), auto) minmax(var(--d2l-dl-wrapper-dd-min-width), 1fr);
 		}
-		dt {
+		d2l-dl-wrapper > dl > dt {
 			margin: var(--d2l-dl-wrapper-dt-margin, 0);
 			max-width: var(--d2l-dl-wrapper-dt-max-width);
 		}
-		dd {
+		d2l-dl-wrapper > dl > dd {
 			margin: var(--d2l-dl-wrapper-dd-margin, 0);
 		}
 	`,

package/components/typography/styles.js

@@ -2,7 +2,7 @@ import '../colors/colors.js';
 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 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;

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.2",
+  "version": "2.47.5",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",