@brightspace-ui/core 3.268.0 → 3.268.1

package/components/menu/menu.js

@@ -23,62 +23,58 @@ const keyCodes = {
  */
 class Menu extends PropertyRequiredMixin(ThemeMixin(HierarchicalViewMixin(LitElement))) {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			active: { type: Boolean, reflect: true },
-			/**
-			 * ACCESSIBILITY: Acts as the primary label for the menu (REQUIRED for root menu)
-			 * @type {string}
-			 */
-			label: { type: String, required: true },
-			/**
-			 * @ignore
-			 */
-			// eslint-disable-next-line lit/no-native-attributes
-			role: { type: String, attribute: 'role' }
-		};
-	}
-
-	static get styles() {
-		return [ super.styles, css`
-			:host {
-				--d2l-menu-background-color: var(--d2l-theme-background-color-base);
-				--d2l-menu-background-color-hover: var(--d2l-theme-brand-color-highlight);
-				--d2l-menu-border-color: var(--d2l-theme-border-color-subtle);
-				--d2l-menu-border-color-hover: var(--d2l-theme-border-color-focus);
-				--d2l-menu-foreground-color: var(--d2l-theme-text-color-static-standard);
-				--d2l-menu-foreground-color-hover: var(--d2l-theme-brand-color-primary-hover);
-				--d2l-menu-separator-color: var(--d2l-theme-border-color-emphasized);
-				box-sizing: border-box;
-				display: block;
-				min-width: 180px;
-				padding-top: 1px;
-				width: 100%;
-			}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		active: { type: Boolean, reflect: true },
+		/**
+		 * ACCESSIBILITY: Acts as the primary label for the menu (REQUIRED for root menu)
+		 * @type {string}
+		 */
+		label: { type: String, required: true },
+		/**
+		 * @ignore
+		 */
+		// eslint-disable-next-line lit/no-native-attributes
+		role: { type: String, attribute: 'role' }
+	};
+
+	static styles = [super.styles, css`
+		:host {
+			--d2l-menu-background-color: var(--d2l-theme-background-color-base);
+			--d2l-menu-background-color-hover: var(--d2l-theme-brand-color-highlight);
+			--d2l-menu-border-color: var(--d2l-theme-border-color-subtle);
+			--d2l-menu-border-color-hover: var(--d2l-theme-border-color-focus);
+			--d2l-menu-foreground-color: var(--d2l-theme-text-color-static-standard);
+			--d2l-menu-foreground-color-hover: var(--d2l-theme-brand-color-primary-hover);
+			--d2l-menu-separator-color: var(--d2l-theme-border-color-emphasized);
+			box-sizing: border-box;
+			display: block;
+			min-width: 180px;
+			padding-top: 1px;
+			width: 100%;
+		}
 
-			:host([active]) .d2l-menu-items d2l-menu-item-return[role="menuitem"],
-			:host([active]) .d2l-menu-items ::slotted([role="menuitem"]),
-			:host([active]) .d2l-menu-items ::slotted([role="menuitemcheckbox"]),
-			:host([active]) .d2l-menu-items ::slotted([role="menuitemradio"]) {
-				position: relative;
-			}
+		:host([active]) .d2l-menu-items d2l-menu-item-return[role="menuitem"],
+		:host([active]) .d2l-menu-items ::slotted([role="menuitem"]),
+		:host([active]) .d2l-menu-items ::slotted([role="menuitemcheckbox"]),
+		:host([active]) .d2l-menu-items ::slotted([role="menuitemradio"]) {
+			position: relative;
+		}
 
-			:host([theme="dark"]) {
-				--d2l-menu-background-color: #333536; /* tungsten @ 70% */
-				--d2l-menu-background-color-hover: #123559; /* celestine-1 @ 50% */
-				--d2l-menu-border-color: var(--d2l-color-tungsten);
-				--d2l-menu-border-color-hover: #ffffff;
-				--d2l-menu-foreground-color: var(--d2l-color-sylvite);
-				--d2l-menu-foreground-color-hover: #ffffff;
-				--d2l-menu-separator-color: var(--d2l-color-galena);
-				--d2l-icon-fill-color: var(--d2l-color-mica);
-				background-color: var(--d2l-menu-background-color); /* so that opacity on disabled items works */
-			}
-		`];
-	}
+		:host([theme="dark"]) {
+			--d2l-menu-background-color: #333536; /* tungsten @ 70% */
+			--d2l-menu-background-color-hover: #123559; /* celestine-1 @ 50% */
+			--d2l-menu-border-color: var(--d2l-color-tungsten);
+			--d2l-menu-border-color-hover: #ffffff;
+			--d2l-menu-foreground-color: var(--d2l-color-sylvite);
+			--d2l-menu-foreground-color-hover: #ffffff;
+			--d2l-menu-separator-color: var(--d2l-color-galena);
+			--d2l-icon-fill-color: var(--d2l-color-mica);
+			background-color: var(--d2l-menu-background-color); /* so that opacity on disabled items works */
+		}
+	`];
 
 	constructor() {
 		super();

package/components/meter/meter-circle.js

@@ -9,8 +9,8 @@ import { meterStyles } from './meter-styles.js';
  * A circular progress indicator.
  */
 class MeterCircle extends MeterMixin(LitElement) {
-	static get styles() {
-		return [ bodySmallStyles, bodyStandardStyles, meterStyles, css`
+
+	static styles = [bodySmallStyles, bodyStandardStyles, meterStyles, css`
 		:host {
 			display: inline-block;
 			width: 2.4rem;
@@ -25,8 +25,7 @@ class MeterCircle extends MeterMixin(LitElement) {
 		.d2l-meter-circle-text {
 			font-size: 0.55rem;
 		}
-	` ];
-	}
+	`];
 
 	render() {
 		const lengthOfLine = 21 * Math.PI * 2; // approximation perimeter of circle

package/components/meter/meter-linear.js

@@ -7,94 +7,92 @@ import { MeterMixin } from './meter-mixin.js';
  * A horizontal progress bar.
  */
 class MeterLinear extends MeterMixin(LitElement) {
-	static get properties() {
-		return {
-			/**
-			 * Keeps the meter to a single line
-			 * @type {boolean}
-			 */
-			textInline: { type: Boolean, attribute: 'text-inline', reflect: true },
-			/**
-			 * Force text to be aligned to the end of the meter
-			 * @type {boolean}
-			 */
-			textAlignEnd: { type: Boolean, attribute: 'text-align-end', reflect: true }
-		};
-	}
-	static get styles() {
-		return [bodySmallStyles, css`
-			:host {
-				display: block;
-				position: relative;
-			}
-
-			:host > div {
-				display: flex;
-				flex-direction: column;
-				gap: 0.45rem;
-			}
-
-			:host([text-inline]) > div {
-				align-items: center;
-				flex-direction: row;
-			}
-
-			.d2l-meter-linear-full-bar,
-			.d2l-meter-linear-inner-bar {
-				border-radius: 0.225rem;
-				flex-grow: 1;
-				flex-shrink: 1;
-				height: 0.45rem;
-			}
-
-			.d2l-meter-linear-full-bar {
-				background-color: var(--d2l-color-gypsum);
-				position: relative;
-			}
-
-			:host([foreground-light]) .d2l-meter-linear-full-bar {
-				background-color: rgba(255, 255, 255, 0.5);
-			}
-
-			.d2l-meter-linear-inner-bar {
-				background-color: var(--d2l-color-celestine);
-				inset-inline-start: 0;
-				max-width: 100%;
-				position: absolute;
-				top: 0;
-			}
-			:host([foreground-light]) .d2l-meter-linear-inner-bar {
-				background-color: white;
-			}
-
-			.d2l-meter-linear-text {
-				color: var(--d2l-color-ferrite);
-				display: flex;
-				flex-direction: row;
-				gap: 0.45rem;
-				line-height: 1em;
-				width: 100%;
-			}
-			:host([foreground-light]) .d2l-meter-linear-text {
-				color: white;
-			}
-			:host([text-inline]) .d2l-meter-linear-text {
-				width: auto;
-			}
-
-			.d2l-meter-linear-text-space-between {
-				justify-content: space-between;
-			}
-
-			.d2l-meter-linear-secondary {
-				align-self: flex-end;
-			}
-
-			.d2l-meter-linear-primary-ltr {
-				direction: ltr;
-			}
-		`];
-	}
+
+	static properties = {
+		/**
+		 * Keeps the meter to a single line
+		 * @type {boolean}
+		 */
+		textInline: { type: Boolean, attribute: 'text-inline', reflect: true },
+		/**
+		 * Force text to be aligned to the end of the meter
+		 * @type {boolean}
+		 */
+		textAlignEnd: { type: Boolean, attribute: 'text-align-end', reflect: true }
+	};
+
+	static styles = [bodySmallStyles, css`
+		:host {
+			display: block;
+			position: relative;
+		}
+
+		:host > div {
+			display: flex;
+			flex-direction: column;
+			gap: 0.45rem;
+		}
+
+		:host([text-inline]) > div {
+			align-items: center;
+			flex-direction: row;
+		}
+
+		.d2l-meter-linear-full-bar,
+		.d2l-meter-linear-inner-bar {
+			border-radius: 0.225rem;
+			flex-grow: 1;
+			flex-shrink: 1;
+			height: 0.45rem;
+		}
+
+		.d2l-meter-linear-full-bar {
+			background-color: var(--d2l-color-gypsum);
+			position: relative;
+		}
+
+		:host([foreground-light]) .d2l-meter-linear-full-bar {
+			background-color: rgba(255, 255, 255, 0.5);
+		}
+
+		.d2l-meter-linear-inner-bar {
+			background-color: var(--d2l-color-celestine);
+			inset-inline-start: 0;
+			max-width: 100%;
+			position: absolute;
+			top: 0;
+		}
+		:host([foreground-light]) .d2l-meter-linear-inner-bar {
+			background-color: white;
+		}
+
+		.d2l-meter-linear-text {
+			color: var(--d2l-color-ferrite);
+			display: flex;
+			flex-direction: row;
+			gap: 0.45rem;
+			line-height: 1em;
+			width: 100%;
+		}
+		:host([foreground-light]) .d2l-meter-linear-text {
+			color: white;
+		}
+		:host([text-inline]) .d2l-meter-linear-text {
+			width: auto;
+		}
+
+		.d2l-meter-linear-text-space-between {
+			justify-content: space-between;
+		}
+
+		.d2l-meter-linear-secondary {
+			align-self: flex-end;
+		}
+
+		.d2l-meter-linear-primary-ltr {
+			direction: ltr;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/meter/meter-mixin.js

@@ -3,42 +3,40 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 
 export const MeterMixin = superclass => class extends LocalizeCoreElement(superclass) {
 
-	static get properties() {
-		return {
-			/**
-			 * Max number of units that are being measured by this meter.
-			 * Valid values: A number > 0
-			 * @type {number}
-			 */
-			max: { type: Number },
-			/**
-			 * Shows a percentage instead of "value/max"
-			 * @type {boolean}
-			 */
-			percent: { type: Boolean },
-			/**
-			 * Rounding mode for percentage text values
-			 * @type {"round" | "ceil" | "floor"}
-			 */
-			percentRoundingMode: { type: String, attribute: 'percent-rounding-mode' },
-			/**
-			 * Context information for the meter. If the text contains {%} or {x/y}, they will be replaced with a percentage or fraction respectively.
-			 * @type {string}
-			 */
-			text: { type: String },
-			/**
-			 * Hides the text visually
-			 * @type {boolean}
-			 */
-			textHidden: { type: Boolean, attribute: 'text-hidden' },
-			/**
-			 * REQUIRED: Current number of completed units.
-			 * Valid values: A number between 0 and max
-			 * @type {number}
-			 */
-			value: { type: Number }
-		};
-	}
+	static properties = {
+		/**
+		 * Max number of units that are being measured by this meter.
+		 * Valid values: A number > 0
+		 * @type {number}
+		 */
+		max: { type: Number },
+		/**
+		 * Shows a percentage instead of "value/max"
+		 * @type {boolean}
+		 */
+		percent: { type: Boolean },
+		/**
+		 * Rounding mode for percentage text values
+		 * @type {"round" | "ceil" | "floor"}
+		 */
+		percentRoundingMode: { type: String, attribute: 'percent-rounding-mode' },
+		/**
+		 * Context information for the meter. If the text contains {%} or {x/y}, they will be replaced with a percentage or fraction respectively.
+		 * @type {string}
+		 */
+		text: { type: String },
+		/**
+		 * Hides the text visually
+		 * @type {boolean}
+		 */
+		textHidden: { type: Boolean, attribute: 'text-hidden' },
+		/**
+		 * REQUIRED: Current number of completed units.
+		 * Valid values: A number between 0 and max
+		 * @type {number}
+		 */
+		value: { type: Number }
+	};
 
 	constructor() {
 		super();

package/components/meter/meter-radial.js

@@ -9,8 +9,8 @@ import { meterStyles } from './meter-styles.js';
  * A half-circle progress indicator.
  */
 class MeterRadial extends MeterMixin(LitElement) {
-	static get styles() {
-		return [ heading4Styles, bodySmallStyles, meterStyles, css`
+
+	static styles = [heading4Styles, bodySmallStyles, meterStyles, css`
 		:host {
 			display: inline-block;
 			width: 4.2rem;
@@ -19,8 +19,7 @@ class MeterRadial extends MeterMixin(LitElement) {
 		.d2l-meter-progress-bar {
 			stroke-width: 9;
 		}
-	` ];
-	}
+	`];
 
 	render() {
 		const lengthOfLine = 115; // found by approximating half the perimeter of the ellipse with radii 38 and 35

package/components/more-less/more-less.js

@@ -17,71 +17,67 @@ const transitionDur = matchMedia('(prefers-reduced-motion: reduce)').matches ? 0
  */
 class MoreLess extends LocalizeCoreElement(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * Indicates whether element is in "more" state
-			 * @type {boolean}
-			 */
-			expanded: { type: Boolean, reflect: true },
-
-			/**
-			 * Aligns the leading edge of more/less button text if value is set to "text" for left-aligned layouts, the trailing edge of text if value is set to "text-end" for right-aligned layouts
-			 * @type {'text'|'text-end'|''}
-			 */
-			hAlign: { type: String, attribute: 'h-align' },
-
-			/**
-			 * The maximum height of the content when in "less" state
-			 * @type {string}
-			 */
-			height: { type: String },
-
-			/**
-			 * Whether the component is active or inactive
-			 * @type {boolean}
-			 */
-			inactive: { type: Boolean, reflect: true },
-			__maxHeight: { state: true },
-			__transitionAdded: { state: true }
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				display: flow-root;
-			}
+	static properties = {
+		/**
+		 * Indicates whether element is in "more" state
+		 * @type {boolean}
+		 */
+		expanded: { type: Boolean, reflect: true },
+
+		/**
+		 * Aligns the leading edge of more/less button text if value is set to "text" for left-aligned layouts, the trailing edge of text if value is set to "text-end" for right-aligned layouts
+		 * @type {'text'|'text-end'|''}
+		 */
+		hAlign: { type: String, attribute: 'h-align' },
+
+		/**
+		 * The maximum height of the content when in "less" state
+		 * @type {string}
+		 */
+		height: { type: String },
+
+		/**
+		 * Whether the component is active or inactive
+		 * @type {boolean}
+		 */
+		inactive: { type: Boolean, reflect: true },
+		__maxHeight: { state: true },
+		__transitionAdded: { state: true }
+	};
+
+	static styles = css`
+		:host {
+			display: flow-root;
+		}
 
-			.d2l-more-less-content {
-				display: flow-root;
-				margin: -1em -1em 0;
-				padding: 1em 1em 0;
-				${overflowHiddenDeclarations}
-			}
-			.d2l-more-less-transition {
-				transition: max-height ${transitionDur}ms cubic-bezier(0, 0.7, 0.5, 1);
-			}
-			:host(:not([expanded]):not([inactive])) .d2l-more-less-content {
-				-webkit-mask-image: linear-gradient(to top, transparent, #000000 1em);
-				mask-image: linear-gradient(to top, transparent, #000000 1em);
-			}
-			:host([inactive]) .d2l-more-less-toggle {
-				display: none;
-			}
+		.d2l-more-less-content {
+			display: flow-root;
+			margin: -1em -1em 0;
+			padding: 1em 1em 0;
+			${overflowHiddenDeclarations}
+		}
+		.d2l-more-less-transition {
+			transition: max-height ${transitionDur}ms cubic-bezier(0, 0.7, 0.5, 1);
+		}
+		:host(:not([expanded]):not([inactive])) .d2l-more-less-content {
+			-webkit-mask-image: linear-gradient(to top, transparent, #000000 1em);
+			mask-image: linear-gradient(to top, transparent, #000000 1em);
+		}
+		:host([inactive]) .d2l-more-less-toggle {
+			display: none;
+		}
 
-			.force-margin-scroll {
-				height: 1px;
-				margin-top: -1px;
-			}
+		.force-margin-scroll {
+			height: 1px;
+			margin-top: -1px;
+		}
 
-			@media (prefers-reduced-motion: reduce) {
-				.d2l-more-less-transition {
-					transition: none;
-				}
+		@media (prefers-reduced-motion: reduce) {
+			.d2l-more-less-transition {
+				transition: none;
 			}
-		`;
-	}
+		}
+	`;
 
 	constructor() {
 		super();

package/components/object-property-list/object-property-list-item-link.js

@@ -9,25 +9,24 @@ import { ObjectPropertyListItem } from './object-property-list-item.js';
  * rendered as a link and with an optional icon.
  */
 class ObjectPropertyListItemLink extends FocusMixin(ObjectPropertyListItem) {
-	static get properties() {
-		return {
-			/**
-			 * Download a URL instead of navigating to it
-			 * @type {boolean}
-			 */
-			download: { type: Boolean },
-			/**
-			 * REQUIRED: URL or URL fragment of the link
-			 * @type {string}
-			 */
-			href: { type: String },
-			/**
-			 * Where to display the linked URL
-			 * @type {string}
-			 */
-			target: { type: String },
-		};
-	}
+
+	static properties = {
+		/**
+		 * Download a URL instead of navigating to it
+		 * @type {boolean}
+		 */
+		download: { type: Boolean },
+		/**
+		 * REQUIRED: URL or URL fragment of the link
+		 * @type {string}
+		 */
+		href: { type: String },
+		/**
+		 * Where to display the linked URL
+		 * @type {string}
+		 */
+		target: { type: String },
+	};
 
 	static get focusElementSelector() {
 		return 'd2l-link';

package/components/object-property-list/object-property-list-item-tooltip-help.js

@@ -11,15 +11,14 @@ import { ObjectPropertyListItem } from './object-property-list-item.js';
  * @slot icon - Optional slot for a custom icon
  */
 class ObjectPropertyListItemTooltipHelp extends FocusMixin(ObjectPropertyListItem) {
-	static get properties() {
-		return {
-			/**
-			 * Preset icon key (e.g. "tier1:gear")
-			 * @type {string}
-			 */
-			icon: { type: String, reflect: true, },
-		};
-	}
+
+	static properties = {
+		/**
+		 * Preset icon key (e.g. "tier1:gear")
+		 * @type {string}
+		 */
+		icon: { type: String, reflect: true, },
+	};
 
 	static get focusElementSelector() {
 		return 'd2l-tooltip-help';