@brightspace-ui/core 3.268.0 → 3.268.2

package/components/progress/progress.js

@@ -8,173 +8,169 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 
 class Progress extends LocalizeCoreElement(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, reflect: true },
-			/**
-			 * REQUIRED: Label for the progress bar
-			 * @type {string}
-			 */
-			label: { type: String },
-			/**
-			 * Hide the bar's label
-			 * @type {boolean}
-			 */
-			labelHidden: { type: Boolean, attribute: 'label-hidden' },
-			/**
-			 * Announce the label when it changes
-			 * @type {boolean}
-			 */
-			announceLabel: { type: Boolean, attribute: 'announce-label' },
-			/**
-			 * Hide the bar's value
-			 * @type {boolean}
-			 */
-			valueHidden: { type: Boolean, attribute: 'value-hidden', reflect: true },
-			/**
-			 * The size of the progress bar
-			 * @type {'small'|'medium'|'large'}
-			 */
-			size: { type: String, reflect: true }
-		};
-	}
-
-	static get styles() {
-		return [bodySmallStyles, bodyCompactStyles, css`
-				:host {
-					align-items: center;
-					display: grid;
-					grid-template: auto auto / 1fr auto;
-					grid-template-areas:
-						"label label"
-						"bar value";
-					min-width: 6rem;
-				}
-				:host([hidden]) {
-					display: none;
-				}
-
-				#label {
-					grid-area: label;
-					width: 100%;
-				}
-
-				progress {
-					--d2l-progress-color: var(--d2l-color-celestine);
-					-moz-appearance: none;
-					-webkit-appearance: none;
-					appearance: none;
-					background-color: var(--d2l-color-gypsum);
-					box-shadow: inset 0 2px var(--d2l-color-mica);
-					overflow: hidden;
-					width: 100%;
-				}
-				.bar {
-					border: none;
-					border-radius: 0.9rem;
-					display: block;
-					grid-area: bar;
-					height: 0.6rem;
-				}
-				.value {
-					grid-area: value;
-					margin-inline-start: 0.4rem;
-					text-align: end;
-					width: 2.42rem;
-				}
-
-				:host([size="small"]) {
-					.bar {
-						height: 0.3rem;
-					}
-
-					.value {
-						margin-inline-start: 0.3rem;
-						width: 2.15rem;
-					}
-				}
-
-				:host([size="large"]) {
-					line-height: 1.5rem;
-					.bar {
-						height: 0.9rem;
-					}
-					.value {
-						margin-inline-start: 0.5rem;
-						width: 2.82rem;
-					}
-				}
-
-				progress.complete {
-					--d2l-progress-color: var(--d2l-color-olivine);
-				}
-				/* this is necessary to avoid white bleed over rounded corners in chrome and safari */
-				progress::-webkit-progress-bar {
-					background-color: transparent;
-				}
-
-
-				:host(:not([value-hidden]):not([value])) .bar {
-					margin-bottom: 0.3rem;
-				}
-
-				:host(:not([value]):not([label-hidden])),
-				:host([value-hidden]:not([label-hidden])) {
-					row-gap: 0.3rem;
-				}
-
-				.indeterminate-bar-container {
-					overflow: hidden;
-				}
-				.indeterminate-bar {
-					--d2l-progress-indeterminate-width: calc(100% / 3);
-					animation: 1450ms 50ms ease-in-out indeterminateState alternate infinite;
-					background-color: var(--d2l-color-celestine);
-					height: 100%;
-					margin-inline-start: calc(var(--d2l-progress-indeterminate-width) * -0.75);
-					width: var(--d2l-progress-indeterminate-width);
-				}
-				@keyframes indeterminateState {
-					100% {
-						margin-inline-start: calc(100% - var(--d2l-progress-indeterminate-width) * 0.25);
-					}
-				}
-			`,
-		/* comma separating the selectors for these pseudo-elements causes them to break */
-		/* note: unable to get firefox to animate the width... seems animation is not implemented for progress in FF */
-		...['-webkit-progress-value', '-moz-progress-bar'].map(selector => css`
+	static properties = {
+		/**
+		 * 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, reflect: true },
+		/**
+		 * REQUIRED: Label for the progress bar
+		 * @type {string}
+		 */
+		label: { type: String },
+		/**
+		 * Hide the bar's label
+		 * @type {boolean}
+		 */
+		labelHidden: { type: Boolean, attribute: 'label-hidden' },
+		/**
+		 * Announce the label when it changes
+		 * @type {boolean}
+		 */
+		announceLabel: { type: Boolean, attribute: 'announce-label' },
+		/**
+		 * Hide the bar's value
+		 * @type {boolean}
+		 */
+		valueHidden: { type: Boolean, attribute: 'value-hidden', reflect: true },
+		/**
+		 * The size of the progress bar
+		 * @type {'small'|'medium'|'large'}
+		 */
+		size: { type: String, reflect: true }
+	};
+
+	static styles = [bodySmallStyles, bodyCompactStyles, css`
+		:host {
+			align-items: center;
+			display: grid;
+			grid-template: auto auto / 1fr auto;
+			grid-template-areas:
+				"label label"
+				"bar value";
+			min-width: 6rem;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+
+		#label {
+			grid-area: label;
+			width: 100%;
+		}
+
+		progress {
+			--d2l-progress-color: var(--d2l-color-celestine);
+			-moz-appearance: none;
+			-webkit-appearance: none;
+			appearance: none;
+			background-color: var(--d2l-color-gypsum);
+			box-shadow: inset 0 2px var(--d2l-color-mica);
+			overflow: hidden;
+			width: 100%;
+		}
+		.bar {
+			border: none;
+			border-radius: 0.9rem;
+			display: block;
+			grid-area: bar;
+			height: 0.6rem;
+		}
+		.value {
+			grid-area: value;
+			margin-inline-start: 0.4rem;
+			text-align: end;
+			width: 2.42rem;
+		}
+
+		:host([size="small"]) {
+			.bar {
+				height: 0.3rem;
+			}
+
+			.value {
+				margin-inline-start: 0.3rem;
+				width: 2.15rem;
+			}
+		}
+
+		:host([size="large"]) {
+			line-height: 1.5rem;
+			.bar {
+				height: 0.9rem;
+			}
+			.value {
+				margin-inline-start: 0.5rem;
+				width: 2.82rem;
+			}
+		}
+
+		progress.complete {
+			--d2l-progress-color: var(--d2l-color-olivine);
+		}
+		/* this is necessary to avoid white bleed over rounded corners in chrome and safari */
+		progress::-webkit-progress-bar {
+			background-color: transparent;
+		}
+
+
+		:host(:not([value-hidden]):not([value])) .bar {
+			margin-bottom: 0.3rem;
+		}
+
+		:host(:not([value]):not([label-hidden])),
+		:host([value-hidden]:not([label-hidden])) {
+			row-gap: 0.3rem;
+		}
+
+		.indeterminate-bar-container {
+			overflow: hidden;
+		}
+		.indeterminate-bar {
+			--d2l-progress-indeterminate-width: calc(100% / 3);
+			animation: 1450ms 50ms ease-in-out indeterminateState alternate infinite;
+			background-color: var(--d2l-color-celestine);
+			height: 100%;
+			margin-inline-start: calc(var(--d2l-progress-indeterminate-width) * -0.75);
+			width: var(--d2l-progress-indeterminate-width);
+		}
+		@keyframes indeterminateState {
+			100% {
+				margin-inline-start: calc(100% - var(--d2l-progress-indeterminate-width) * 0.25);
+			}
+		}
+	`,
+	/* comma separating the selectors for these pseudo-elements causes them to break */
+	/* note: unable to get firefox to animate the width... seems animation is not implemented for progress in FF */
+	...['-webkit-progress-value', '-moz-progress-bar'].map(selector => css`
+			progress::${unsafeCSS(selector)} {
+				background-color: var(--d2l-progress-color);
+				border: 1px solid transparent;
+				border-radius: 0.9rem;
+				transition: width 0.4s ease-out;
+			}
+			/* these are necessary to avoid showing border when value is 0 */
+			progress:not([value])::${unsafeCSS(selector)},
+			progress[value="0"]::${unsafeCSS(selector)} {
+				border: none;
+			}
+
+			progress:not([value])::${unsafeCSS(selector)} {
+				transition: none;
+			}
+			@media (prefers-reduced-motion: reduce) {
 				progress::${unsafeCSS(selector)} {
-					background-color: var(--d2l-progress-color);
-					border: 1px solid transparent;
-					border-radius: 0.9rem;
-					transition: width 0.4s ease-out;
-				}
-				/* these are necessary to avoid showing border when value is 0 */
-				progress:not([value])::${unsafeCSS(selector)},
-				progress[value="0"]::${unsafeCSS(selector)} {
-					border: none;
-				}
-
-				progress:not([value])::${unsafeCSS(selector)} {
 					transition: none;
 				}
-				@media (prefers-reduced-motion: reduce) {
-					progress::${unsafeCSS(selector)} {
-						transition: none;
-					}
-				}
-			`)
-		];
-	}
+			}
+		`)
+	];
 
 	constructor() {
 		super();

package/components/scroll-wrapper/scroll-wrapper.js

@@ -36,126 +36,122 @@ function getStyleSheetInsertionPoint(elem) {
  */
 class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * An object containing custom primary/secondary scroll containers
-			 * @type {Object}
-			 */
-			customScrollers: {
-				attribute: false,
-				type: Object
-			},
-			/**
-			 * Whether to hide left/right scroll buttons
-			 * @type {boolean}
-			 */
-			hideActions: {
-				attribute: 'hide-actions',
-				type: Boolean
-			},
-			/**
-			 * The area in pixels to offset scroll width calculations
-			 * @type {number}
-			 */
-			scrollAreaOffset: {
-				attribute: 'scroll-area-offset',
-				type: Number
-			},
-			_hScrollbar: {
-				attribute: 'h-scrollbar',
-				reflect: true,
-				type: Boolean
-			},
-			_scrollbarLeft: {
-				attribute: 'scrollbar-left',
-				reflect: true,
-				type: Boolean
-			},
-			_scrollbarRight: {
-				attribute: 'scrollbar-right',
-				reflect: true,
-				type: Boolean
-			}
-		};
-	}
+	static properties = {
+		/**
+		 * An object containing custom primary/secondary scroll containers
+		 * @type {Object}
+		 */
+		customScrollers: {
+			attribute: false,
+			type: Object
+		},
+		/**
+		 * Whether to hide left/right scroll buttons
+		 * @type {boolean}
+		 */
+		hideActions: {
+			attribute: 'hide-actions',
+			type: Boolean
+		},
+		/**
+		 * The area in pixels to offset scroll width calculations
+		 * @type {number}
+		 */
+		scrollAreaOffset: {
+			attribute: 'scroll-area-offset',
+			type: Number
+		},
+		_hScrollbar: {
+			attribute: 'h-scrollbar',
+			reflect: true,
+			type: Boolean
+		},
+		_scrollbarLeft: {
+			attribute: 'scrollbar-left',
+			reflect: true,
+			type: Boolean
+		},
+		_scrollbarRight: {
+			attribute: 'scrollbar-right',
+			reflect: true,
+			type: Boolean
+		}
+	};
 
-	static get styles() {
-		return css`
-			:host {
-				display: block;
-				position: relative;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.d2l-scroll-wrapper-container {
-				box-sizing: border-box;
-				overflow-y: var(--d2l-scroll-wrapper-overflow-y, visible);
-			}
-			:host([h-scrollbar]) .d2l-scroll-wrapper-container {
-				border-inline: 1px dashed var(--d2l-theme-border-color-standard);
-			}
-			:host([h-scrollbar][hide-actions]) .d2l-scroll-wrapper-container {
-				border-inline: none;
-			}
-			:host([scrollbar-left]) .d2l-scroll-wrapper-container {
-				border-inline-start: none;
-			}
-			:host([scrollbar-right]) .d2l-scroll-wrapper-container {
-				border-inline-end: none;
-			}
+	static styles = css`
+		:host {
+			display: block;
+			position: relative;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.d2l-scroll-wrapper-container {
+			box-sizing: border-box;
+			overflow-y: var(--d2l-scroll-wrapper-overflow-y, visible);
+		}
+		:host([h-scrollbar]) .d2l-scroll-wrapper-container {
+			border-inline: 1px dashed var(--d2l-theme-border-color-standard);
+		}
+		:host([h-scrollbar][hide-actions]) .d2l-scroll-wrapper-container {
+			border-inline: none;
+		}
+		:host([scrollbar-left]) .d2l-scroll-wrapper-container {
+			border-inline-start: none;
+		}
+		:host([scrollbar-right]) .d2l-scroll-wrapper-container {
+			border-inline-end: none;
+		}
 
-			.d2l-scroll-wrapper-button-left {
-				inset-inline-start: -10px;
-			}
-			.d2l-scroll-wrapper-button-right {
-				inset-inline-end: -10px;
-			}
+		.d2l-scroll-wrapper-button-left {
+			inset-inline-start: -10px;
+		}
+		.d2l-scroll-wrapper-button-right {
+			inset-inline-end: -10px;
+		}
 
-			.d2l-scroll-wrapper-actions {
-				position: -webkit-sticky;
-				position: sticky;
-				top: var(--d2l-table-sticky-top, 0);
-				z-index: 5;
-			}
+		.d2l-scroll-wrapper-actions {
+			position: -webkit-sticky;
+			position: sticky;
+			top: var(--d2l-table-sticky-top, 0);
+			z-index: 5;
+		}
 
-			.d2l-scroll-wrapper-button {
-				background-color: var(--d2l-theme-background-color-interactive-faint-default);
-				border: 1px solid var(--d2l-theme-border-color-standard);
-				border-radius: 50%;
-				box-shadow: var(--d2l-theme-shadow-floating);
-				cursor: pointer;
-				display: inline-block;
-				height: 18px;
-				line-height: 0;
-				padding: 10px;
-				position: absolute;
-				top: 4px;
-				width: 18px;
-			}
-			.d2l-scroll-wrapper-button:hover {
-				background-color: var(--d2l-theme-background-color-interactive-faint-hover);
-			}
-			:host([scrollbar-right]) .d2l-scroll-wrapper-button-right {
-				display: none;
-			}
-			:host([scrollbar-left]) .d2l-scroll-wrapper-button-left {
+		.d2l-scroll-wrapper-button {
+			background-color: var(--d2l-theme-background-color-interactive-faint-default);
+			border: 1px solid var(--d2l-theme-border-color-standard);
+			border-radius: 50%;
+			box-shadow: var(--d2l-theme-shadow-floating);
+			cursor: pointer;
+			display: inline-block;
+			height: 18px;
+			line-height: 0;
+			padding: 10px;
+			position: absolute;
+			top: 4px;
+			width: 18px;
+		}
+		.d2l-scroll-wrapper-button:hover {
+			background-color: var(--d2l-theme-background-color-interactive-faint-hover);
+		}
+		:host([scrollbar-right]) .d2l-scroll-wrapper-button-right {
+			display: none;
+		}
+		:host([scrollbar-left]) .d2l-scroll-wrapper-button-left {
+			display: none;
+		}
+
+		@media print {
+			.d2l-scroll-wrapper-actions {
 				display: none;
 			}
-
-			@media print {
-				.d2l-scroll-wrapper-actions {
-					display: none;
-				}
-				.d2l-scroll-wrapper-container {
-					border: none !important;
-					box-sizing: content-box !important;
-					overflow: visible !important;
-				}
+			.d2l-scroll-wrapper-container {
+				border: none !important;
+				box-sizing: content-box !important;
+				overflow: visible !important;
 			}
-		`;
-	}
+		}
+	`;
 
 	constructor() {
 		super();

package/components/selection/README.md

@@ -19,13 +19,11 @@ The `SelectionMixin` defines the `selection-single` attribute that consumers can
   import { SelectionMixin } from '@brightspace-ui/core/components/selection/selection-mixin.js';
 
   class DemoSelection extends SelectionMixin(LitElement) {
-    static get styles() {
-      return css`
-        :host {
-          display: block;
-        }
-      `;
-    }
+    static styles = css`
+      :host {
+        display: block;
+      }
+    `;
     render() {
       return html`
         <slot></slot>

package/components/selection/demo/demo-selection.js

@@ -3,13 +3,11 @@ import { PageableMixin } from '../../paging/pageable-mixin.js';
 import { SelectionMixin } from '../selection-mixin.js';
 
 class DemoBase extends LitElement {
-	static get styles() {
-		return css`
-			:host {
-				display: block;
-			}
-		`;
-	}
+	static styles = css`
+		:host {
+			display: block;
+		}
+	`;
 	render() {
 		return html`
 			<slot></slot>

package/components/selection/selection-action-dropdown.js

@@ -13,19 +13,15 @@ import { SelectionActionMixin } from './selection-action-mixin.js';
  */
 class ActionDropdown extends FocusMixin(SelectionActionMixin(DropdownOpenerMixin(LitElement))) {
 
-	static get properties() {
-		return {
-			/**
-			 * REQUIRED: Text for the dropdown opener button
-			 * @type {string}
-			 */
-			text: { type: String }
-		};
-	}
-
-	static get styles() {
-		return dropdownOpenerStyles;
-	}
+	static properties = {
+		/**
+		 * REQUIRED: Text for the dropdown opener button
+		 * @type {string}
+		 */
+		text: { type: String }
+	};
+
+	static styles = dropdownOpenerStyles;
 
 	static get focusElementSelector() {
 		return 'd2l-button-subtle';