@brightspace-ui/core 3.267.1 → 3.267.3

package/components/count-badge/count-badge-icon.js

@@ -9,21 +9,18 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * REQUIRED: Preset icon key (e.g. "tier1:gear")
-			 * @type {string}
-			 */
-			icon: {
-				type: String,
-				reflect: true
-			}
-		};
-	}
+	static properties = {
+		/**
+		 * REQUIRED: Preset icon key (e.g. "tier1:gear")
+		 * @type {string}
+		 */
+		icon: {
+			type: String,
+			reflect: true
+		}
+	};
 
-	static get styles() {
-		return [super.styles, css`
+	static styles = [super.styles, css`
 		${getFocusRingStyles(pseudoClass => `:host([focus-ring]) d2l-icon, d2l-icon:${pseudoClass}`)}
 		:host {
 			display: inline-block;
@@ -52,8 +49,7 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
 			border: 2px solid transparent;
 			border-radius: 6px;
 		}
-		`];
-	}
+	`];
 
 	constructor() {
 		super();

package/components/count-badge/count-badge-mixin.js

@@ -12,135 +12,131 @@ const maxBadgeDigits = 5;
 
 export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(SkeletonMixin(superclass)) {
 
-	static get properties() {
-		return {
-			/**
-			 * ACCESSIBILITY: When `true`, changes to the badge will be announced to screen reader users
-			 * @type {boolean}
-			 */
-			announceChanges: {
-				type: Boolean,
-				attribute: 'announce-changes'
-			},
-			/**
-			 * Forces the focus ring around the badge
-			 * @type {boolean}
-			 */
-			forceFocusRing: {
-				type: Boolean,
-				attribute: 'focus-ring',
-				reflect: true
-			},
-			/**
-			 * ACCESSIBILITY: Adds a tooltip on the badge, which will be visible on hover and keyboard interaction
-			 * @type {boolean}
-			 */
-			hasTooltip: {
-				type: Boolean,
-				attribute: 'has-tooltip'
-			},
-			/**
-			 * Hides the count badge when `number` is zero
-			 * @type {boolean}
-			 */
-			hideZero: {
-				type: Boolean,
-				attribute: 'hide-zero'
-			},
-			/**
-			 * Specifies a digit limit, after which numbers are truncated. Defaults to two for "notification" type and five for "count" type.
-			 * @type {number}
-			 */
-			maxDigits: {
-				type: Number,
-				attribute: 'max-digits'
-			},
-			/**
-			 * REQUIRED: The number to be displayed on the badge; must be a positive integer
-			 * @type {number}
-			 */
-			number: {
-				type: Number,
-				attribute: 'number'
-			},
-			/**
-			 * The size of the badge
-			 * @type {'small'|'large'}
-			 */
-			size: {
-				type: String,
-				reflect: true,
-				attribute: 'size'
-			},
-			/**
-			 * ACCESSIBILITY: Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge
-			 * @type {boolean}
-			 */
-			tabStop: {
-				type: Boolean,
-				attribute: 'tab-stop'
-			},
-			/**
-			 * ACCESSIBILITY: REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled
-			 * @type {string}
-			 */
-			text: {
-				type: String
-			},
-			/**
-			 * The type of the badge
-			 * @type {'count'|'notification'}
-			 */
-			type: {
-				type: String,
-				reflect: true,
-				attribute: 'type'
-			}
-		};
-	}
+	static properties = {
+		/**
+		 * ACCESSIBILITY: When `true`, changes to the badge will be announced to screen reader users
+		 * @type {boolean}
+		 */
+		announceChanges: {
+			type: Boolean,
+			attribute: 'announce-changes'
+		},
+		/**
+		 * Forces the focus ring around the badge
+		 * @type {boolean}
+		 */
+		forceFocusRing: {
+			type: Boolean,
+			attribute: 'focus-ring',
+			reflect: true
+		},
+		/**
+		 * ACCESSIBILITY: Adds a tooltip on the badge, which will be visible on hover and keyboard interaction
+		 * @type {boolean}
+		 */
+		hasTooltip: {
+			type: Boolean,
+			attribute: 'has-tooltip'
+		},
+		/**
+		 * Hides the count badge when `number` is zero
+		 * @type {boolean}
+		 */
+		hideZero: {
+			type: Boolean,
+			attribute: 'hide-zero'
+		},
+		/**
+		 * Specifies a digit limit, after which numbers are truncated. Defaults to two for "notification" type and five for "count" type.
+		 * @type {number}
+		 */
+		maxDigits: {
+			type: Number,
+			attribute: 'max-digits'
+		},
+		/**
+		 * REQUIRED: The number to be displayed on the badge; must be a positive integer
+		 * @type {number}
+		 */
+		number: {
+			type: Number,
+			attribute: 'number'
+		},
+		/**
+		 * The size of the badge
+		 * @type {'small'|'large'}
+		 */
+		size: {
+			type: String,
+			reflect: true,
+			attribute: 'size'
+		},
+		/**
+		 * ACCESSIBILITY: Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge
+		 * @type {boolean}
+		 */
+		tabStop: {
+			type: Boolean,
+			attribute: 'tab-stop'
+		},
+		/**
+		 * ACCESSIBILITY: REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled
+		 * @type {string}
+		 */
+		text: {
+			type: String
+		},
+		/**
+		 * The type of the badge
+		 * @type {'count'|'notification'}
+		 */
+		type: {
+			type: String,
+			reflect: true,
+			attribute: 'type'
+		}
+	};
 
-	static get styles() {
-		return [super.styles, offscreenStyles, css`
-			:host([hidden]) {
-				display: none;
-			}
-
-			:host {
-				display: inline-block;
-				min-width: 0.9rem;
-			}
-
-			.d2l-count-badge-number {
-				font-weight: bold;
-			}
-
-			:host([type="notification"]) .d2l-count-badge-number {
-				background-color: var(--d2l-theme-notification-background-color);
-				color: var(--d2l-theme-notification-text-color);
-			}
-
-			:host([type="count"]) .d2l-count-badge-number {
-				background-color: var(--d2l-count-badge-background-color, var(--d2l-theme-badge-background-color));
-				color: var(--d2l-count-badge-foreground-color, var(--d2l-theme-badge-text-color));
-			}
-
-			:host([size="small"]) .d2l-count-badge-number {
-				border-radius: 0.55rem;
-				font-size: 0.6rem;
-				line-height: 0.9rem;
-				padding-left: 0.3rem;
-				padding-right: 0.3rem;
-			}
-
-			:host([size="large"]) .d2l-count-badge-number {
-				border-radius: 0.7rem;
-				font-size: 0.8rem;
-				line-height: 1.2rem;
-				padding-left: 0.4rem;
-				padding-right: 0.4rem;
-			}
-		`];
-	}
+	static styles = [super.styles, offscreenStyles, css`
+		:host([hidden]) {
+			display: none;
+		}
+
+		:host {
+			display: inline-block;
+			min-width: 0.9rem;
+		}
+
+		.d2l-count-badge-number {
+			font-weight: bold;
+		}
+
+		:host([type="notification"]) .d2l-count-badge-number {
+			background-color: var(--d2l-theme-notification-background-color);
+			color: var(--d2l-theme-notification-text-color);
+		}
+
+		:host([type="count"]) .d2l-count-badge-number {
+			background-color: var(--d2l-count-badge-background-color, var(--d2l-theme-badge-background-color));
+			color: var(--d2l-count-badge-foreground-color, var(--d2l-theme-badge-text-color));
+		}
+
+		:host([size="small"]) .d2l-count-badge-number {
+			border-radius: 0.55rem;
+			font-size: 0.6rem;
+			line-height: 0.9rem;
+			padding-left: 0.3rem;
+			padding-right: 0.3rem;
+		}
+
+		:host([size="large"]) .d2l-count-badge-number {
+			border-radius: 0.7rem;
+			font-size: 0.8rem;
+			line-height: 1.2rem;
+			padding-left: 0.4rem;
+			padding-right: 0.4rem;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/count-badge/count-badge.js

@@ -8,8 +8,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 class CountBadge extends FocusMixin(CountBadgeMixin(LitElement)) {
 
-	static get styles() {
-		return [super.styles, css`
+	static styles = [super.styles, css`
 		${getFocusRingStyles(pseudoClass => `:host([focus-ring]) .d2l-count-badge-wrapper, .d2l-count-badge-wrapper:${pseudoClass}`)}
 		.d2l-count-badge-wrapper {
 			--d2l-focus-ring-offset: 0;
@@ -23,8 +22,7 @@ class CountBadge extends FocusMixin(CountBadgeMixin(LitElement)) {
 		:host([size="large"]) .d2l-count-badge-wrapper {
 			border-radius: 0.8rem;
 		}
-		`];
-	}
+	`];
 
 	constructor() {
 		super();

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

@@ -36,38 +36,34 @@ export const descriptionListStyles = [
  * @slot - Content to wrap
  */
 class DescriptionListWrapper extends LitElement {
-	static get properties() {
-		return {
-			/**
-			 * Width for component to use a stacked layout
-			 * @type {number}
-			 */
-			breakpoint: { type: Number, reflect: true },
-			/**
-			 * Force the component to always use a stacked layout; will override breakpoint attribute
-			 * @type {boolean}
-			 */
-			forceStacked: { type: Boolean, reflect: true, attribute: 'force-stacked' },
-			_stacked: { state: true },
-		};
-	}
+	static properties = {
+		/**
+		 * Width for component to use a stacked layout
+		 * @type {number}
+		 */
+		breakpoint: { type: Number, reflect: true },
+		/**
+		 * Force the component to always use a stacked layout; will override breakpoint attribute
+		 * @type {boolean}
+		 */
+		forceStacked: { type: Boolean, reflect: true, attribute: 'force-stacked' },
+		_stacked: { state: true },
+	};
 
-	static get styles() {
-		return css`
-			:host {
-				display: block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.stacked {
-				--d2l-dl-wrapper-dl-display: block;
-				--d2l-dl-wrapper-dt-max-width: none;
-				--d2l-dl-wrapper-dt-margin: 0 0 0.3rem 0;
-				--d2l-dl-wrapper-dd-margin: 0 0 0.9rem 0;
-			}
-		`;
-	}
+	static styles = css`
+		:host {
+			display: block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.stacked {
+			--d2l-dl-wrapper-dl-display: block;
+			--d2l-dl-wrapper-dt-max-width: none;
+			--d2l-dl-wrapper-dt-margin: 0 0 0.3rem 0;
+			--d2l-dl-wrapper-dd-margin: 0 0 0.9rem 0;
+		}
+	`;
 
 	constructor() {
 		super();

package/components/dialog/dialog-confirm.js

@@ -15,79 +15,75 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
  */
 class DialogConfirm extends LocalizeCoreElement(DialogMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * Whether the dialog should indicate that its message is important to the user
-			 */
-			critical: { type: Boolean },
-
-			/**
-			 * REQUIRED: The text content for the confirmation dialog. Newline characters (`
` in HTML or `\n` in JavaScript) will render as multiple paragraphs.
-			 * @type {string}
-			 */
-			text: { type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * Whether the dialog should indicate that its message is important to the user
+		 */
+		critical: { type: Boolean },
+
+		/**
+		 * REQUIRED: The text content for the confirmation dialog. Newline characters (`
` in HTML or `\n` in JavaScript) will render as multiple paragraphs.
+		 * @type {string}
+		 */
+		text: { type: String }
+	};
+
+	static styles = [_generateResetStyles(':host'), dialogStyles, heading3Styles, css`
+
+		.d2l-dialog-outer {
+			max-width: 420px;
+		}
 
-	static get styles() {
-		return [ _generateResetStyles(':host'), dialogStyles, heading3Styles, css`
+		.d2l-dialog-header > h2 {
+			margin: 0;
+			width: fit-content;
+		}
 
-			.d2l-dialog-outer {
-				max-width: 420px;
-			}
+		${getFocusRingStyles(pseudoClass => `.d2l-dialog-content:${pseudoClass} > div`, { extraStyles: css`
 
-			.d2l-dialog-header > h2 {
-				margin: 0;
-				width: fit-content;
-			}
+			--d2l-focus-ring-offset: -1px; border-radius: 6px;`
+		})}
+		.d2l-dialog-content:focus,
+		.d2l-dialog-content:focus-visible {
+			outline: none;
+		}
 
-			${getFocusRingStyles(pseudoClass => `.d2l-dialog-content:${pseudoClass} > div`, { extraStyles: css`
+		.d2l-dialog-content {
+			padding-top: 30px;
+		}
 
-				--d2l-focus-ring-offset: -1px; border-radius: 6px;`
-			})}
-			.d2l-dialog-content:focus,
-			.d2l-dialog-content:focus-visible {
-				outline: none;
-			}
+		.d2l-dialog-header + .d2l-dialog-content {
+			padding-top: 0;
+		}
 
-			.d2l-dialog-content {
-				padding-top: 30px;
-			}
+		.d2l-dialog-content p {
+			margin: 1rem 0;
+		}
 
-			.d2l-dialog-header + .d2l-dialog-content {
-				padding-top: 0;
-			}
+		.d2l-dialog-content p:first-child {
+			margin-top: 0;
+		}
 
-			.d2l-dialog-content p {
-				margin: 1rem 0;
-			}
+		.d2l-dialog-content p:last-child {
+			margin-bottom: 0;
+		}
 
-			.d2l-dialog-content p:first-child {
-				margin-top: 0;
-			}
+		@media (max-width: 615px), (max-height: 420px) and (max-width: 900px) {
 
-			.d2l-dialog-content p:last-child {
-				margin-bottom: 0;
+			dialog.d2l-dialog-outer,
+			.d2l-dialog-outer {
+				bottom: 0;
+				margin: auto;
+				top: 0;
 			}
 
-			@media (max-width: 615px), (max-height: 420px) and (max-width: 900px) {
-
-				dialog.d2l-dialog-outer,
-				.d2l-dialog-outer {
-					bottom: 0;
-					margin: auto;
-					top: 0;
-				}
-
-				.d2l-dialog-content {
-					padding-top: 20px;
-				}
-
+			.d2l-dialog-content {
+				padding-top: 20px;
 			}
 
-		`];
-	}
+		}
+
+	`];
 
 	constructor() {
 		super();