@brightspace-ui/core 3.159.6 → 3.160.0

package/components/progress/README.md

@@ -21,3 +21,4 @@ A progress bar communicates information relating to the progress of completion o
 | `label` | String | Label for the progress bar |
 | `label-hidden` | Boolean | Hide the bar's label |
 | `value-hidden` | Boolean | Hide the bar's value |
+<!-- docs: end hidden content -->

package/components/progress/progress.js

@@ -10,11 +10,35 @@ class Progress extends LitElement {
 
 	static get properties() {
 		return {
+			/**
+			 * The maximum value of the progress bar
+			 * @type {number}
+			 */
 			max: { type: Number, attribute: 'max' },
+			/**
+			 * The current value of the progress bar
+			 * @type {number}
+			 */
 			value: { type: Number },
+			/**
+			 * Label for the progress bar
+			 * @type {string}
+			 */
 			label: { type: String },
+			/**
+			 * Hide the bar's label
+			 * @type {boolean}
+			 */
 			labelHidden: { type: Boolean, attribute: 'label-hidden' },
+			/**
+			 * Hide the bar's value
+			 * @type {boolean}
+			 */
 			valueHidden: { type: Boolean, attribute: 'value-hidden' },
+			/**
+			 * Use d2l-body-small styles
+			 * @type {boolean}
+			 */
 			small: { type: Boolean, reflect: true }
 		};
 	}
@@ -89,6 +113,7 @@ class Progress extends LitElement {
 		this.max = 100;
 		this.value = 0;
 		this.valueHidden = false;
+		this.small = false;
 	}
 
 	render() {

package/custom-elements.json

@@ -11733,29 +11733,36 @@
       "attributes": [
         {
           "name": "label",
+          "description": "Label for the progress bar",
           "type": "string"
         },
-        {
-          "name": "small",
-          "type": "boolean"
-        },
         {
           "name": "label-hidden",
+          "description": "Hide the bar's label",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "max",
+          "description": "The maximum value of the progress bar",
           "type": "number",
           "default": "100"
         },
         {
           "name": "value",
+          "description": "The current value of the progress bar",
           "type": "number",
           "default": "0"
         },
         {
           "name": "value-hidden",
+          "description": "Hide the bar's value",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "small",
+          "description": "Use d2l-body-small styles",
           "type": "boolean",
           "default": "false"
         }
@@ -11764,34 +11771,41 @@
         {
           "name": "label",
           "attribute": "label",
+          "description": "Label for the progress bar",
           "type": "string"
         },
-        {
-          "name": "small",
-          "attribute": "small",
-          "type": "boolean"
-        },
         {
           "name": "labelHidden",
           "attribute": "label-hidden",
+          "description": "Hide the bar's label",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "max",
           "attribute": "max",
+          "description": "The maximum value of the progress bar",
           "type": "number",
           "default": "100"
         },
         {
           "name": "value",
           "attribute": "value",
+          "description": "The current value of the progress bar",
           "type": "number",
           "default": "0"
         },
         {
           "name": "valueHidden",
           "attribute": "value-hidden",
+          "description": "Hide the bar's value",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "small",
+          "attribute": "small",
+          "description": "Use d2l-body-small styles",
           "type": "boolean",
           "default": "false"
         }

package/helpers/demo/template-tags.html

@@ -67,11 +67,13 @@
 								one {There is # person}
 								other {There are # people}
 							}`;
+						/* eslint-disable @stylistic/indent */
 						document.querySelector('#complex-no-tag2').value =
 `{peopleCount, plural,
 	one {There is # person}
 	other {There are # people}
 }`;
+						/* eslint-enable @stylistic/indent */
 					</script>
 				</template>
 			</d2l-demo-snippet>

package/helpers/focus.js

@@ -1,5 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 import { getComposedChildren, getComposedParent, getFirstVisibleAncestor, getNextAncestorSibling, getPreviousAncestorSibling, isVisible } from './dom.js';
+import { getFlag } from './flags.js';
 
 const focusableElements = {
 	a: true,
@@ -14,6 +15,8 @@ const focusableElements = {
 	textarea: true
 };
 
+const focusVisibleSupportChangesEnabled = getFlag('focus-visible-support-changes-for-focus-rings', true);
+
 export function getComposedActiveElement() {
 	let node = document.activeElement;
 
@@ -75,19 +78,50 @@ export function getFocusableDescendants(node, options) {
 export function getFocusPseudoClass() {
 	return isFocusVisibleSupported() ? 'focus-visible' : 'focus';
 }
-export function getFocusRingStyles(selector, { applyOnHover = false, extraStyles = null } = {}) {
-	const selectorDelegate = typeof selector === 'string' ? pseudoClass => `${selector}:${pseudoClass}` : selector;
-	const cssSelector = unsafeCSS(`${selectorDelegate(getFocusPseudoClass())}${applyOnHover ? `, ${selectorDelegate('hover')}` : ''}`);
-	return css`${cssSelector} {
-		${extraStyles ?? css``}
-		outline: 2px solid var(--d2l-focus-ring-color, var(--d2l-color-celestine));
-		outline-offset: var(--d2l-focus-ring-offset, 2px);
+export function getFocusRingStyles(selector, { extraStyles = null } = {}) {
+	// Remove when cleaning up focus-visible-support-changes-for-focus-rings
+	if (!focusVisibleSupportChangesEnabled) {
+		const selectorDelegate = typeof selector === 'string' ? pseudoClass => `${selector}:${pseudoClass}` : selector;
+		const cssSelector = unsafeCSS(selectorDelegate(getFocusPseudoClass()));
+		return css`${cssSelector} {
+			${extraStyles ?? css``}
+			outline: 2px solid var(--d2l-focus-ring-color, var(--d2l-color-celestine));
+			outline-offset: var(--d2l-focus-ring-offset, 2px);
+		}
+		@media (prefers-contrast: more) {
+			${cssSelector} {
+				outline-color: Highlight;
+			}
+		}`;
 	}
-	@media (prefers-contrast: more) {
-		${cssSelector} {
-			outline-color: Highlight;
+
+	const stylesDelegate = selector => css`
+		${selector} {
+			${extraStyles ?? css``}
+			outline: 2px solid var(--d2l-focus-ring-color, var(--d2l-color-celestine));
+			outline-offset: var(--d2l-focus-ring-offset, 2px);
+		}
+		@media (prefers-contrast: more) {
+			${selector} {
+				outline-color: Highlight;
+			}
+		}
+	`;
+	return getFocusVisibleStyles(selector, stylesDelegate);
+}
+
+export function getFocusVisibleStyles(selector, stylesDelegate) {
+	const selectorDelegate = typeof selector === 'string' ? pseudoClass => `${selector}:${pseudoClass}` : selector;
+	const focusSelector = unsafeCSS(selectorDelegate('focus'));
+	const focusVisibleSelector = unsafeCSS(selectorDelegate('focus-visible'));
+	return unsafeCSS(css`
+		@supports not selector(:focus-visible) {
+			${stylesDelegate(focusSelector)}
+		}
+		@supports selector(:focus-visible) {
+			${stylesDelegate(focusVisibleSelector)}
 		}
-	}`;
+	`);
 }
 
 export function getLastFocusableDescendant(node, includeHidden) {

package/package.json

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