@brightspace-ui/core 3.267.3 → 3.268.1

package/helpers/focus.js

@@ -72,10 +72,13 @@ export function getFocusableDescendants(node, options) {
 	return focusables;
 }
 
+/**
+ * @deprecated Use getFocusVisibleStyles instead.
+ */
 export function getFocusPseudoClass() {
 	return isFocusVisibleSupported() ? 'focus-visible' : 'focus';
 }
-export function getFocusRingStyles(selector, { extraStyles = null } = {}) {
+export function getFocusRingStyles(selector, { extraStyles = null, preferContrastMediaQueryExtraStyles = null } = {}) {
 	const stylesDelegate = selector => css`
 		${selector} {
 			${extraStyles ?? css``}
@@ -84,6 +87,7 @@ export function getFocusRingStyles(selector, { extraStyles = null } = {}) {
 		}
 		@media (prefers-contrast: more) {
 			${selector} {
+				${preferContrastMediaQueryExtraStyles ?? css``}
 				outline-color: Highlight;
 			}
 		}

package/mixins/arrow-keys/arrow-keys-mixin.js

@@ -11,18 +11,16 @@ const keyCodes = Object.freeze({
 
 export const ArrowKeysMixin = superclass => class extends superclass {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			arrowKeysDirection: { type: String, attribute: 'arrow-keys-direction' },
-			/**
-			 * @ignore
-			 */
-			arrowKeysNoWrap: { type: Boolean, attribute: 'arrow-keys-no-wrap' }
-		};
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		arrowKeysDirection: { type: String, attribute: 'arrow-keys-direction' },
+		/**
+		 * @ignore
+		 */
+		arrowKeysNoWrap: { type: Boolean, attribute: 'arrow-keys-no-wrap' }
+	};
 
 	constructor() {
 		super();

package/mixins/async-container/async-container-mixin.js

@@ -7,18 +7,16 @@ export const asyncStates = {
 
 export const AsyncContainerMixin = superclass => class extends superclass {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			asyncPendingDelay: { type: Number, attribute: 'async-pending-delay' },
-			/**
-			 * @ignore
-			 */
-			asyncState: { type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		asyncPendingDelay: { type: Number, attribute: 'async-pending-delay' },
+		/**
+		 * @ignore
+		 */
+		asyncState: { type: String }
+	};
 
 	constructor() {
 		super();

package/mixins/collection/collection-mixin.js

@@ -1,14 +1,12 @@
 export const CollectionMixin = superclass => class extends superclass {
 
-	static get properties() {
-		return {
-			/**
-			 * Total number of items. If not specified, features like select-all-pages will be disabled.
-			 * @type {number}
-			 */
-			itemCount: { type: Number, attribute: 'item-count', reflect: true },
-		};
-	}
+	static properties = {
+		/**
+		 * Total number of items. If not specified, features like select-all-pages will be disabled.
+		 * @type {number}
+		 */
+		itemCount: { type: Number, attribute: 'item-count', reflect: true },
+	};
 
 	constructor() {
 		super();

package/mixins/interactive/interactive-mixin.js

@@ -16,20 +16,16 @@ export function isInteractiveDescendant(node) {
 
 export const InteractiveMixin = superclass => class extends LocalizeCoreElement(superclass) {
 
-	static get properties() {
-		return {
-			_focusingToggle: { state: true },
-			_hasInteractiveAncestor: { state: true },
-			_interactive: { state: true }
-		};
-	}
-
-	static get styles() {
-		return [offscreenStyles, getFocusRingStyles(
-			() => '.interactive-focusing-toggle',
-			{ extraStyles: css`border-radius: 6px;` }
-		)];
-	}
+	static properties = {
+		_focusingToggle: { state: true },
+		_hasInteractiveAncestor: { state: true },
+		_interactive: { state: true }
+	};
+
+	static styles = [offscreenStyles, getFocusRingStyles(
+		() => '.interactive-focusing-toggle',
+		{ extraStyles: css`border-radius: 6px;` }
+	)];
 
 	constructor() {
 		super();

package/mixins/labelled/README.md

@@ -26,11 +26,9 @@ Optionally, to enable custom elements to act as labels, extend the `LabelMixin`
 import { LabelMixin } from '@brightspace-ui/core/mixins/labelled/labelled-mixin.js';
 
 class CustomLabel extends LabelMixin(LitElement) {
-  static get properties() {
-    return {
-      text: { type: String }
-    };
-  }
+  static properties = {
+    text: { type: String }
+  };
   render() {
     return html`
       <span>${this.text}</span>

package/mixins/labelled/labelled-mixin.js

@@ -48,11 +48,9 @@ const waitForElement = async(contextElement, selector, timeout) => {
 
 export const LabelMixin = superclass => class extends superclass {
 
-	static get properties() {
-		return {
-			_label: { type: String, reflect: true }
-		};
-	}
+	static properties = {
+		_label: { type: String, reflect: true }
+	};
 
 	connectedCallback() {
 		super.connectedCallback();
@@ -77,33 +75,31 @@ export const LabelMixin = superclass => class extends superclass {
 
 export const LabelledMixin = superclass => class extends PropertyRequiredMixin(superclass) {
 
-	static get properties() {
-		return {
-			/**
-			 * ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.
-			 * @type {string}
-			 */
-			labelledBy: { type: String, reflect: true, attribute: 'labelled-by' },
-			/**
-			 * ACCESSIBILITY: REQUIRED: Explicitly defined label for the element
-			 * @type {string}
-			 */
-			label: {
-				type: String,
-				required: {
-					message: (_value, elem, defaultMessage) => {
-						if (!elem.labelledBy) return defaultMessage;
-						return `LabelledMixin: "${elem.tagName.toLowerCase()}" is labelled-by="${elem.labelledBy}", but its label is empty`;
-					},
-					validator: (_value, elem, hasValue) => {
-						if (!elem.labelRequired || hasValue) return true;
-						if (!elem.labelledBy) return false;
-						return elem._labelElem !== null;
-					}
+	static properties = {
+		/**
+		 * ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.
+		 * @type {string}
+		 */
+		labelledBy: { type: String, reflect: true, attribute: 'labelled-by' },
+		/**
+		 * ACCESSIBILITY: REQUIRED: Explicitly defined label for the element
+		 * @type {string}
+		 */
+		label: {
+			type: String,
+			required: {
+				message: (_value, elem, defaultMessage) => {
+					if (!elem.labelledBy) return defaultMessage;
+					return `LabelledMixin: "${elem.tagName.toLowerCase()}" is labelled-by="${elem.labelledBy}", but its label is empty`;
+				},
+				validator: (_value, elem, hasValue) => {
+					if (!elem.labelRequired || hasValue) return true;
+					if (!elem.labelledBy) return false;
+					return elem._labelElem !== null;
 				}
 			}
-		};
-	}
+		}
+	};
 
 	constructor() {
 		super();

package/mixins/provider/README.md

@@ -30,13 +30,11 @@ NB: due to its reliance on DOM events, `requestInstance()` needs to be called af
 import { RequesterMixin } from '@brightspace-ui/core/mixins/provider/provider-mixin.js'
 
 class InterestingFactUI extends RequesterMixin(LitElement) {
-	static get properties() {
-		return {
-			_factString: { type: String },
-			_factObjectString: { type: String },
-			_factFunctionString: { type: String }
-		};
-	}
+	static properties = {
+		_factString: { type: String },
+		_factObjectString: { type: String },
+		_factFunctionString: { type: String }
+	};
 
 	render() {
 		return html`

package/mixins/rtl/README.md

@@ -11,12 +11,10 @@ Apply the mixin and define RTL styles.
 ```js
 import { RtlMixin } from '@brightspace-ui/core/mixins/rtl/rtl-mixin.js';
 class MyComponent extends RtlMixin(LitElement) {
-  static get styles() {
-    return css`
-      :host([dir="rtl"]) .some-elem {
-        /* some RTL styles */
-      }
-    `;
-  }
+  static styles = css`
+    :host([dir="rtl"]) .some-elem {
+      /* some RTL styles */
+    }
+  `;
 }
 ```

package/mixins/rtl/rtl-mixin.js

@@ -3,15 +3,13 @@ import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
 
 export const RtlMixin = dedupeMixin(superclass => class extends superclass {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			// eslint-disable-next-line lit/no-native-attributes
-			dir: { type: String, reflect: true }
-		};
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		// eslint-disable-next-line lit/no-native-attributes
+		dir: { type: String, reflect: true }
+	};
 
 	constructor() {
 		super();

package/mixins/theme/theme-mixin.js

@@ -7,13 +7,11 @@
  */
 export const ThemeMixin = superclass => class extends superclass {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			theme: { reflect: true, type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		theme: { reflect: true, type: String }
+	};
 
 };

package/mixins/visible-on-ancestor/README.md

@@ -9,9 +9,7 @@ Apply the mixin and include the required `visibleOnAncestorStyles`.
 ```js
 import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '@brightspace-ui/core/mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
 class MyComponent extends VisibleOnAncestorMixin(LitElement) {
-  static get styles() {
-    return [ visibleOnAncestorStyles, css`/* MyComponent styles */` ];
-  }
+  static styles = [ visibleOnAncestorStyles, css`/* MyComponent styles */` ];
 }
 ```
 

package/mixins/visible-on-ancestor/visible-on-ancestor-mixin.js

@@ -41,19 +41,17 @@ export const visibleOnAncestorStyles = css`
 
 export const VisibleOnAncestorMixin = superclass => class extends superclass {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			animationType: { type: String, reflect: true, attribute: 'animation-type' },
-			/**
-			 * @ignore
-			 */
-			visibleOnAncestor: { type: Boolean, reflect: true, attribute: 'visible-on-ancestor' },
-			__voaState: { type: String, reflect: true, attribute: '__voa-state' }
-		};
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		animationType: { type: String, reflect: true, attribute: 'animation-type' },
+		/**
+		 * @ignore
+		 */
+		visibleOnAncestor: { type: Boolean, reflect: true, attribute: 'visible-on-ancestor' },
+		__voaState: { type: String, reflect: true, attribute: '__voa-state' }
+	};
 
 	constructor() {
 		super();

package/package.json

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