@brightspace-ui/core 3.268.0 → 3.268.2

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

@@ -9,62 +9,59 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
  * with an optional icon.
  */
 export class ObjectPropertyListItem extends SkeletonMixin(LitElement) {
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			// eslint-disable-next-line lit/no-native-attributes
-			hidden: { type: Boolean },
-			/**
-			 * Name of an optional icon to display
-			 * @type {string}
-			 */
-			icon: { type: String },
-			/**
-			 * REQUIRED: Text to display on the item
-			 * @type {string}
-			 */
-			text: { type: String },
-			_showSeparator: { state: true },
-		};
-	}
 
-	static get styles() {
-		return [super.styles, css`
-			:host {
-				unicode-bidi: isolate;
-				vertical-align: middle;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			d2l-icon {
-				height: 1.2857em; /* 18px desired height at main font size (14px), but using em to scale properly at smaller breakpoint. */
-				width: 1.2857em;
-			}
-			.separator {
-				margin: 0 -0.05rem; /* 10px desired margin, subtract 5px arbitrary whitespace and 6px whitespace inside bullet icon. */
-			}
-			.separator d2l-icon {
-				color: var(--d2l-theme-text-color-static-faint);
-			}
-			.item-icon {
-				margin-inline-end: 0.05rem; /* 6px desired margin, subtract 5px arbitrary whitespace. */
-				margin-top: -0.1rem;
-			}
-			:host([skeleton]) d2l-icon {
-				color: var(--d2l-theme-background-color-interactive-faint-hover);
-			}
-			:host([skeleton]) .d2l-skeletize {
-				display: inline-block;
-				max-width: 80%;
-				overflow: hidden;
-				vertical-align: middle;
-				white-space: nowrap;
-			}
-		`];
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		// eslint-disable-next-line lit/no-native-attributes
+		hidden: { type: Boolean },
+		/**
+		 * Name of an optional icon to display
+		 * @type {string}
+		 */
+		icon: { type: String },
+		/**
+		 * REQUIRED: Text to display on the item
+		 * @type {string}
+		 */
+		text: { type: String },
+		_showSeparator: { state: true },
+	};
+
+	static styles = [super.styles, css`
+		:host {
+			unicode-bidi: isolate;
+			vertical-align: middle;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		d2l-icon {
+			height: 1.2857em; /* 18px desired height at main font size (14px), but using em to scale properly at smaller breakpoint. */
+			width: 1.2857em;
+		}
+		.separator {
+			margin: 0 -0.05rem; /* 10px desired margin, subtract 5px arbitrary whitespace and 6px whitespace inside bullet icon. */
+		}
+		.separator d2l-icon {
+			color: var(--d2l-theme-text-color-static-faint);
+		}
+		.item-icon {
+			margin-inline-end: 0.05rem; /* 6px desired margin, subtract 5px arbitrary whitespace. */
+			margin-top: -0.1rem;
+		}
+		:host([skeleton]) d2l-icon {
+			color: var(--d2l-theme-background-color-interactive-faint-hover);
+		}
+		:host([skeleton]) .d2l-skeletize {
+			display: inline-block;
+			max-width: 80%;
+			overflow: hidden;
+			vertical-align: middle;
+			white-space: nowrap;
+		}
+	`];
 
 	constructor() {
 		super();

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

@@ -11,34 +11,31 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
  * @slot status - Slot for a single `d2l-status-indicator` to be rendered before the list
  */
 class ObjectPropertyList extends LocalizeCoreElement(SkeletonMixin(LitElement)) {
-	static get properties() {
-		return {
-			/**
-			 * Number of skeleton items to insert
-			 * @type {number}
-			 */
-			skeletonCount: { type: Number, attribute: 'skeleton-count' },
-		};
-	}
 
-	static get styles() {
-		return [super.styles, bodySmallStyles, css`
-			:host {
-				display: block;
-				overflow-wrap: anywhere;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			::slotted([slot="status"]) {
-				display: none;
-			}
-			::slotted(d2l-status-indicator[slot="status"]:first-of-type) {
-				display: inline-block;
-				margin-inline-end: 0.25rem; /* 10px desired margin, subtract 5px arbitrary whitespace. */
-			}
-		`];
-	}
+	static properties = {
+		/**
+		 * Number of skeleton items to insert
+		 * @type {number}
+		 */
+		skeletonCount: { type: Number, attribute: 'skeleton-count' },
+	};
+
+	static styles = [super.styles, bodySmallStyles, css`
+		:host {
+			display: block;
+			overflow-wrap: anywhere;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		::slotted([slot="status"]) {
+			display: none;
+		}
+		::slotted(d2l-status-indicator[slot="status"]:first-of-type) {
+			display: inline-block;
+			margin-inline-end: 0.25rem; /* 10px desired margin, subtract 5px arbitrary whitespace. */
+		}
+	`];
 
 	firstUpdated() {
 		this.addEventListener('d2l-object-property-list-item-visibility-change', () => this._onItemsChanged());

package/components/offscreen/README.md

@@ -34,7 +34,7 @@ import { offscreenStyles } from './offscreen.js';
 
 class MyElement extends LitElement {
 
-  static get styles() { return [ offscreenStyles ] }
+  static styles = [ offscreenStyles ];
 
   render() {
     return html`

package/components/offscreen/offscreen.js

@@ -7,14 +7,14 @@ const OffSCREEN_SIZELESS = getFlag('d2l-offscreen-sizeless', true);
  * A private helper declarations that should not be used by general consumers
  */
 export const _offscreenStyleDeclarations = css`
-		direction: var(--d2l-document-direction, ${document.dir === 'rtl' ? css`rtl` : css`ltr`}); /* stylelint-disable-line @stylistic/string-quotes */
-		height: ${OffSCREEN_SIZELESS ? 0 : 1}px;
-		inset-inline-start: -10000px;
-		overflow: hidden;
-		position: absolute !important;
-		white-space: nowrap;
-		width: ${OffSCREEN_SIZELESS ? 0 : 1}px;
-		${document.dir === 'rtl' ? css`right` : css`left`}: -10000px;
+	direction: var(--d2l-document-direction, ${document.dir === 'rtl' ? css`rtl` : css`ltr`}); /* stylelint-disable-line @stylistic/string-quotes */
+	height: ${OffSCREEN_SIZELESS ? 0 : 1}px;
+	inset-inline-start: -10000px;
+	overflow: hidden;
+	position: absolute !important;
+	white-space: nowrap;
+	width: ${OffSCREEN_SIZELESS ? 0 : 1}px;
+	${document.dir === 'rtl' ? css`right` : css`left`}: -10000px;
 `;
 
 export const offscreenStyles = css`
@@ -28,13 +28,11 @@ export const offscreenStyles = css`
  * @slot - Default content placed inside of the component
  */
 class Offscreen extends LitElement {
-	static get styles() {
-		return css`
-			:host {
-				${_offscreenStyleDeclarations}
-			}
-		`;
-	}
+	static styles = css`
+		:host {
+			${_offscreenStyleDeclarations}
+		}
+	`;
 	render() {
 		return html`<slot></slot>`;
 	}

package/components/offscreen/screen-reader-pause.js

@@ -3,9 +3,7 @@ import { getSeparator } from '@brightspace-ui/intl/lib/list.js';
 import { offscreenStyles } from './offscreen.js';
 
 export class ScreenReaderPause extends LitElement {
-	static get styles() {
-		return offscreenStyles;
-	}
+	static styles = offscreenStyles;
 
 	render() {
 		return html`<span class="d2l-offscreen">${getSeparator({ nonBreaking: true })}</span>`;

package/components/overflow-group/README.md

@@ -102,9 +102,7 @@ class OtherOverflowGroup extends OverflowGroupMixin(LitElement) {
 **Styles:**
 
 ```javascript
-static get styles() {
-  return [ super.styles ];
-}
+static styles = [super.styles];
 ```
 
 **Functionality:**

package/components/overflow-group/overflow-group-mixin.js

@@ -24,65 +24,61 @@ async function filterAsync(arr, callback) {
 
 export const OverflowGroupMixin = superclass => class extends LocalizeCoreElement(superclass) {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			autoShow: {
-				type: Boolean,
-				attribute: 'auto-show',
-			},
-			/**
-			 * minimum amount of slotted items to show
-			 * @type {number}
-			 */
-			minToShow: {
-				type: Number,
-				reflect: true,
-				attribute: 'min-to-show',
-			},
-			/**
-			 * maximum amount of slotted items to show
-			 * @type {number}
-			 */
-			maxToShow: {
-				type: Number,
-				reflect: true,
-				attribute: 'max-to-show',
-			},
-			/**
-			 * @ignore
-			 */
-			openerType: {
-				type: String,
-				attribute: 'opener-type'
-			},
-			_chompIndex: { state: true },
-			_itemGap: { state: true },
-			_mini: { state: true },
-			_wrapping: { state: true }
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				display: block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.d2l-overflow-group-container {
-				align-items: var(--d2l-overflow-group-align-items, normal);
-				display: flex;
-				justify-content: var(--d2l-overflow-group-justify-content, normal);
-			}
-			.d2l-overflow-group-container ::slotted([data-is-chomped]) {
-				display: none !important;
-			}
-		`;
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		autoShow: {
+			type: Boolean,
+			attribute: 'auto-show',
+		},
+		/**
+		 * minimum amount of slotted items to show
+		 * @type {number}
+		 */
+		minToShow: {
+			type: Number,
+			reflect: true,
+			attribute: 'min-to-show',
+		},
+		/**
+		 * maximum amount of slotted items to show
+		 * @type {number}
+		 */
+		maxToShow: {
+			type: Number,
+			reflect: true,
+			attribute: 'max-to-show',
+		},
+		/**
+		 * @ignore
+		 */
+		openerType: {
+			type: String,
+			attribute: 'opener-type'
+		},
+		_chompIndex: { state: true },
+		_itemGap: { state: true },
+		_mini: { state: true },
+		_wrapping: { state: true }
+	};
+
+	static styles = css`
+		:host {
+			display: block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.d2l-overflow-group-container {
+			align-items: var(--d2l-overflow-group-align-items, normal);
+			display: flex;
+			justify-content: var(--d2l-overflow-group-justify-content, normal);
+		}
+		.d2l-overflow-group-container ::slotted([data-is-chomped]) {
+			display: none !important;
+		}
+	`;
 
 	constructor() {
 		super();

package/components/overflow-group/overflow-group.js

@@ -69,49 +69,45 @@ function createMenuItemSeparator() {
 */
 class OverflowGroup extends OverflowGroupMixin(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * Setting this property will change the style of the overflow menu opener
-			 * @type {'default'|'subtle'}
-			 * @default "default"
-			 */
-			openerStyle: {
-				type: String,
-				reflect: true,
-				attribute: 'opener-style',
-			}
-		};
-	}
+	static properties = {
+		/**
+		 * Setting this property will change the style of the overflow menu opener
+		 * @type {'default'|'subtle'}
+		 * @default "default"
+		 */
+		openerStyle: {
+			type: String,
+			reflect: true,
+			attribute: 'opener-style',
+		}
+	};
 
-	static get styles() {
-		return [super.styles, css`
-			:host([opener-style="subtle"]) {
-				--d2l-button-icon-fill-color: var(--d2l-theme-text-color-interactive-default);
-				--d2l-button-icon-fill-color-hover: var(--d2l-theme-text-color-interactive-hover);
-			}
-
-			::slotted(d2l-button),
-			::slotted(d2l-link),
-			::slotted(span),
-			::slotted(d2l-dropdown:not(.d2l-overflow-dropdown)),
-			::slotted(d2l-dropdown-button) {
-				margin-inline-end: 0.6rem;
-			}
-			::slotted(d2l-button-subtle),
-			::slotted(d2l-button-icon),
-			::slotted(d2l-dropdown-button-subtle),
-			::slotted(d2l-dropdown-more),
-			::slotted(d2l-dropdown-context-menu),
-			::slotted(d2l-selection-action),
-			::slotted(d2l-selection-action-dropdown) {
-				margin-inline-end: 0.2rem;
-			}
-			::slotted(*:last-child) {
-				margin-inline-end: 0;
-			}
-		`];
-	}
+	static styles = [super.styles, css`
+		:host([opener-style="subtle"]) {
+			--d2l-button-icon-fill-color: var(--d2l-theme-text-color-interactive-default);
+			--d2l-button-icon-fill-color-hover: var(--d2l-theme-text-color-interactive-hover);
+		}
+
+		::slotted(d2l-button),
+		::slotted(d2l-link),
+		::slotted(span),
+		::slotted(d2l-dropdown:not(.d2l-overflow-dropdown)),
+		::slotted(d2l-dropdown-button) {
+			margin-inline-end: 0.6rem;
+		}
+		::slotted(d2l-button-subtle),
+		::slotted(d2l-button-icon),
+		::slotted(d2l-dropdown-button-subtle),
+		::slotted(d2l-dropdown-more),
+		::slotted(d2l-dropdown-context-menu),
+		::slotted(d2l-selection-action),
+		::slotted(d2l-selection-action-dropdown) {
+			margin-inline-end: 0.2rem;
+		}
+		::slotted(*:last-child) {
+			margin-inline-end: 0;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/page/page-header-button.js

@@ -12,52 +12,48 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  */
 class PageHeaderButton extends FocusMixin(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * Disables the button
-			 * @type {boolean}
-			 */
-			disabled: { reflect: true, type: Boolean },
-			/**
-			 * REQUIRED: Preset icon key (e.g. "tier1:gear")
-			 * @type {string}
-			 */
-			icon: { type: String },
-			/**
-			 * Position of the icon.
-			 * @type {'start'|'end'}
-			 */
-			iconPosition: { attribute: 'icon-position', type: String },
-			/**
-			 * REQUIRED: Text for the button
-			 * @type {string}
-			 */
-			text: { type: String },
-			/**
-			 * Visually hides the text but still accessible
-			 * @type {boolean}
-			 */
-			textHidden: { attribute: 'text-hidden', type: Boolean },
-			/**
-			 * Offset of the tooltip
-			 * @type {Number}
-			 */
-			tooltipOffset: { attribute: 'tooltip-offset', type: Number },
-		};
-	}
+	static properties = {
+		/**
+		 * Disables the button
+		 * @type {boolean}
+		 */
+		disabled: { reflect: true, type: Boolean },
+		/**
+		 * REQUIRED: Preset icon key (e.g. "tier1:gear")
+		 * @type {string}
+		 */
+		icon: { type: String },
+		/**
+		 * Position of the icon.
+		 * @type {'start'|'end'}
+		 */
+		iconPosition: { attribute: 'icon-position', type: String },
+		/**
+		 * REQUIRED: Text for the button
+		 * @type {string}
+		 */
+		text: { type: String },
+		/**
+		 * Visually hides the text but still accessible
+		 * @type {boolean}
+		 */
+		textHidden: { attribute: 'text-hidden', type: Boolean },
+		/**
+		 * Offset of the tooltip
+		 * @type {Number}
+		 */
+		tooltipOffset: { attribute: 'tooltip-offset', type: Number },
+	};
 
-	static get styles() {
-		return [highlightBorderStyles, highlightButtonStyles, css`
-			:host {
-				display: inline-block;
-				height: 100%;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-		`];
-	}
+	static styles = [highlightBorderStyles, highlightButtonStyles, css`
+		:host {
+			display: inline-block;
+			height: 100%;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+	`];
 
 	constructor() {
 		super();