@brightspace-ui/core 3.268.0 → 3.268.2

package/components/tag-list/tag-list.js

@@ -32,64 +32,60 @@ async function filterAsync(arr, callback) {
 
 class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitElement))) {
 
-	static get properties() {
-		return {
-			/**
-			 * Enables the option to clear all inner tag list items. The `d2l-tag-list-item-clear` event will be dispatched for each list item when the user selects to Clear All. The consumer must handle the actual item deletion.
-			 * @type {boolean}
-			 */
-			clearable: { type: Boolean },
-			/**
-			 * ADVANCED: When an item is `clearable`, optionally add a timeout before the focus happens on clear. This is useful if the consumer has some operations that will reload the list items prior to wanting focus to occur.
-			 * @type {number}
-			 */
-			clearFocusTimeout: { type: Number, attribute: 'clear-focus-timeout' },
-			/**
-			 * REQUIRED: A description of the tag list for additional accessibility context
-			 * @type {string}
-			 */
-			description: { type: String },
-			_chompIndex: { type: Number },
-			_contentReady: { type: Boolean },
-			_lines: { type: Number },
-			_showHiddenTags: { type: Boolean }
-		};
-	}
-
-	static get styles() {
-		return [...super.styles, css`
-			:host {
-				display: block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.tag-list-container {
-				display: flex;
-				flex-wrap: wrap;
-				gap: 6px;
-				padding: 0;
-			}
-			::slotted([data-is-chomped]) {
-				display: none !important;
-			}
-			.d2l-tag-list-hidden-button {
-				position: absolute;
-				visibility: hidden;
-			}
-			.d2l-tag-list-clear-button {
-				position: absolute;
-				visibility: hidden;
-			}
-			.d2l-tag-list-clear-button.d2l-tag-list-clear-button-visible {
-				position: static;
-				visibility: visible;
-			}
-			.tag-list-hidden {
-				visibility: hidden;
-			}
-		`];
-	}
+	static properties = {
+		/**
+		 * Enables the option to clear all inner tag list items. The `d2l-tag-list-item-clear` event will be dispatched for each list item when the user selects to Clear All. The consumer must handle the actual item deletion.
+		 * @type {boolean}
+		 */
+		clearable: { type: Boolean },
+		/**
+		 * ADVANCED: When an item is `clearable`, optionally add a timeout before the focus happens on clear. This is useful if the consumer has some operations that will reload the list items prior to wanting focus to occur.
+		 * @type {number}
+		 */
+		clearFocusTimeout: { type: Number, attribute: 'clear-focus-timeout' },
+		/**
+		 * REQUIRED: A description of the tag list for additional accessibility context
+		 * @type {string}
+		 */
+		description: { type: String },
+		_chompIndex: { type: Number },
+		_contentReady: { type: Boolean },
+		_lines: { type: Number },
+		_showHiddenTags: { type: Boolean }
+	};
+
+	static styles = [...super.styles, css`
+		:host {
+			display: block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.tag-list-container {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 6px;
+			padding: 0;
+		}
+		::slotted([data-is-chomped]) {
+			display: none !important;
+		}
+		.d2l-tag-list-hidden-button {
+			position: absolute;
+			visibility: hidden;
+		}
+		.d2l-tag-list-clear-button {
+			position: absolute;
+			visibility: hidden;
+		}
+		.d2l-tag-list-clear-button.d2l-tag-list-clear-button-visible {
+			position: static;
+			visibility: visible;
+		}
+		.tag-list-hidden {
+			visibility: hidden;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/tooltip/tooltip-help.js

@@ -16,79 +16,75 @@ import { SlottedIconMixin } from '../icons/slotted-icon-mixin.js';
  */
 class TooltipHelp extends SlottedIconMixin(SkeletonMixin(FocusMixin(LitElement))) {
 
-	static get properties() {
-		return {
-			/**
-			 * Allows this component to inherit certain font properties
-			 * @type {boolean}
-			 */
-			inheritFontStyle: { type: Boolean, attribute: 'inherit-font-style' },
-			/**
-			 * ADVANCED: Force the internal tooltip to open in a certain direction. If no position is provided, the tooltip will open in the first position that has enough space for it in the order: bottom, top, right, left.
-			 * @type {'top'|'bottom'|'left'|'right'}
-			 */
-			position: { type: String },
-			/**
-			 * @ignore
-			 */
-			showing: { type: Boolean, reflect: true },
-			/**
-			 * REQUIRED: Text that will render as the Help Tooltip opener
-			 * @type {string}
-			 */
-			text: { type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * Allows this component to inherit certain font properties
+		 * @type {boolean}
+		 */
+		inheritFontStyle: { type: Boolean, attribute: 'inherit-font-style' },
+		/**
+		 * ADVANCED: Force the internal tooltip to open in a certain direction. If no position is provided, the tooltip will open in the first position that has enough space for it in the order: bottom, top, right, left.
+		 * @type {'top'|'bottom'|'left'|'right'}
+		 */
+		position: { type: String },
+		/**
+		 * @ignore
+		 */
+		showing: { type: Boolean, reflect: true },
+		/**
+		 * REQUIRED: Text that will render as the Help Tooltip opener
+		 * @type {string}
+		 */
+		text: { type: String }
+	};
 
-	static get styles() {
-		return [super.styles, bodySmallStyles, css`
-			:host {
-				display: inline-block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			#d2l-tooltip-help-text {
-				--d2l-focus-ring-offset: 0.05rem;
-				align-items: baseline;
-				background: none;
-				border: none;
-				column-gap: 0.3rem;
-				cursor: inherit;
-				display: inline-flex;
-				font-family: inherit;
-				padding: 0;
-				text-align: start;
-				text-decoration-line: underline;
-				text-decoration-style: dashed;
-				text-decoration-thickness: 1px;
-				text-underline-offset: 0.1rem;
-			}
-			d2l-icon,
-			slot[name="icon"]::slotted(d2l-icon-custom) {
-				align-self: center;
-			}
+	static styles = [super.styles, bodySmallStyles, css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		#d2l-tooltip-help-text {
+			--d2l-focus-ring-offset: 0.05rem;
+			align-items: baseline;
+			background: none;
+			border: none;
+			column-gap: 0.3rem;
+			cursor: inherit;
+			display: inline-flex;
+			font-family: inherit;
+			padding: 0;
+			text-align: start;
+			text-decoration-line: underline;
+			text-decoration-style: dashed;
+			text-decoration-thickness: 1px;
+			text-underline-offset: 0.1rem;
+		}
+		d2l-icon,
+		slot[name="icon"]::slotted(d2l-icon-custom) {
+			align-self: center;
+		}
 
-			${getFocusRingStyles('#d2l-tooltip-help-text', { extraStyles: css`border-radius: 0.05rem; text-underline-offset: 0.1rem;` })}
-			:host([inherit-font-style]) #d2l-tooltip-help-text {
-				color: inherit;
-				font-size: inherit;
-				font-weight: inherit;
-				letter-spacing: inherit;
-				line-height: inherit;
-				margin: inherit;
-			}
-			d2l-tooltip {
-				cursor: text;
-			}
-			:host([skeleton]) #d2l-tooltip-help-text.d2l-skeletize {
-				text-decoration: none;
-			}
-			:host([skeleton]) slot[name="icon"]::slotted(d2l-icon-custom) {
-				display: none;
-			}
-		`];
-	}
+		${getFocusRingStyles('#d2l-tooltip-help-text', { extraStyles: css`border-radius: 0.05rem; text-underline-offset: 0.1rem;` })}
+		:host([inherit-font-style]) #d2l-tooltip-help-text {
+			color: inherit;
+			font-size: inherit;
+			font-weight: inherit;
+			letter-spacing: inherit;
+			line-height: inherit;
+			margin: inherit;
+		}
+		d2l-tooltip {
+			cursor: text;
+		}
+		:host([skeleton]) #d2l-tooltip-help-text.d2l-skeletize {
+			text-decoration: none;
+		}
+		:host([skeleton]) slot[name="icon"]::slotted(d2l-icon-custom) {
+			display: none;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/tooltip/tooltip.js

@@ -58,115 +58,111 @@ let activeTooltip = null;
  */
 class Tooltip extends PopoverMixin(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * Align the tooltip with either the start or end of its target. If not set, the tooltip will attempt be centered.
-			 * @type {'start'|'end'}
-			 */
-			align: { type: String, reflect: true },
-			/**
-			 * ADVANCED: Announce the tooltip innerText when applicable (for use with custom elements)
-			 * @type {boolean}
-			 */
-			announced: { type: Boolean },
-			/**
-			 * ADVANCED: Causes the tooltip to close when its target is clicked
-			 * @type {boolean}
-			 */
-			closeOnClick: { type: Boolean, attribute: 'close-on-click' },
-			/**
-			 * Provide a delay in milliseconds to prevent the tooltip from opening immediately when hovered. This delay will only apply to hover, not focus.
-			 * @type {number}
-			 */
-			delay: { type: Number },
-			/**
-			 * ADVANCED: Disables focus lock so the tooltip will automatically close when no longer hovered even if it still has focus
-			 * @type {boolean}
-			 */
-			disableFocusLock: { type: Boolean, attribute: 'disable-focus-lock' },
-			/**
-			 * REQUIRED: The "id" of the tooltip's target element. Both elements must be within the same shadow root. If not provided, the tooltip's parent element will be used as its target.
-			 * @type {string}
-			 */
-			for: { type: String },
-			/**
-			 * ADVANCED: Force the tooltip to stay open as long as it remains "true"
-			 * @type {boolean}
-			 */
-			forceShow: { type: Boolean, attribute: 'force-show' },
-			/**
-			 * ADVANCED: Accessibility type for the tooltip to specify whether it is the primary label for the target or a secondary descriptor.
-			 * @type {'label'|'descriptor'}
-			 */
-			forType: { type: String, attribute: 'for-type' },
-			/**
-			 * Adjust the size of the gap between the tooltip and its target (px)
-			 * @type {number}
-			 */
-			offset: { type: Number },
-			/**
-			 * ADVANCED: Force the tooltip to open in a certain direction. If no position is provided, the tooltip will open in the first position that has enough space for it in the order: bottom, top, right, left.
-			 * @type {'top'|'bottom'|'left'|'right'}
-			 */
-			positionLocation: { type: String, attribute: 'position' },
-			/**
-			 * @ignore
-			 */
-			showing: { type: Boolean, reflect: true },
-			/**
-			 * ADVANCED: Only show the tooltip if we detect the target element is truncated
-			 * @type {boolean}
-			 */
-			showTruncatedOnly: { type: Boolean, attribute: 'show-truncated-only' },
-			/**
-			 * The style of the tooltip based on the type of information it displays
-			 * @type {'info'|'error'}
-			 */
-			state: { type: String, reflect: true }
-		};
-	}
-
-	static get styles() {
-		return [super.styles, bodySmallStyles, css`
-			:host {
-				--d2l-tooltip-background-color: var(--d2l-color-ferrite); /* Deprecated, use state attribute instead */
-				--d2l-tooltip-border-color: var(--d2l-color-ferrite); /* Deprecated, use state attribute instead */
-				--d2l-tooltip-outline-color: rgba(255, 255, 255, 0.32);
-				--d2l-popover-background-color: var(--d2l-tooltip-background-color);
-				--d2l-popover-border-color: var(--d2l-tooltip-border-color);
-				--d2l-popover-border-radius: 0.3rem;
-				--d2l-popover-outline-color: var(--d2l-tooltip-outline-color);
-				--d2l-popover-outline-width: 1px;
-			}
-			:host([state="error"]) {
-				--d2l-tooltip-background-color: var(--d2l-color-cinnabar);
-				--d2l-tooltip-border-color: var(--d2l-color-cinnabar);
-			}
+	static properties = {
+		/**
+		 * Align the tooltip with either the start or end of its target. If not set, the tooltip will attempt be centered.
+		 * @type {'start'|'end'}
+		 */
+		align: { type: String, reflect: true },
+		/**
+		 * ADVANCED: Announce the tooltip innerText when applicable (for use with custom elements)
+		 * @type {boolean}
+		 */
+		announced: { type: Boolean },
+		/**
+		 * ADVANCED: Causes the tooltip to close when its target is clicked
+		 * @type {boolean}
+		 */
+		closeOnClick: { type: Boolean, attribute: 'close-on-click' },
+		/**
+		 * Provide a delay in milliseconds to prevent the tooltip from opening immediately when hovered. This delay will only apply to hover, not focus.
+		 * @type {number}
+		 */
+		delay: { type: Number },
+		/**
+		 * ADVANCED: Disables focus lock so the tooltip will automatically close when no longer hovered even if it still has focus
+		 * @type {boolean}
+		 */
+		disableFocusLock: { type: Boolean, attribute: 'disable-focus-lock' },
+		/**
+		 * REQUIRED: The "id" of the tooltip's target element. Both elements must be within the same shadow root. If not provided, the tooltip's parent element will be used as its target.
+		 * @type {string}
+		 */
+		for: { type: String },
+		/**
+		 * ADVANCED: Force the tooltip to stay open as long as it remains "true"
+		 * @type {boolean}
+		 */
+		forceShow: { type: Boolean, attribute: 'force-show' },
+		/**
+		 * ADVANCED: Accessibility type for the tooltip to specify whether it is the primary label for the target or a secondary descriptor.
+		 * @type {'label'|'descriptor'}
+		 */
+		forType: { type: String, attribute: 'for-type' },
+		/**
+		 * Adjust the size of the gap between the tooltip and its target (px)
+		 * @type {number}
+		 */
+		offset: { type: Number },
+		/**
+		 * ADVANCED: Force the tooltip to open in a certain direction. If no position is provided, the tooltip will open in the first position that has enough space for it in the order: bottom, top, right, left.
+		 * @type {'top'|'bottom'|'left'|'right'}
+		 */
+		positionLocation: { type: String, attribute: 'position' },
+		/**
+		 * @ignore
+		 */
+		showing: { type: Boolean, reflect: true },
+		/**
+		 * ADVANCED: Only show the tooltip if we detect the target element is truncated
+		 * @type {boolean}
+		 */
+		showTruncatedOnly: { type: Boolean, attribute: 'show-truncated-only' },
+		/**
+		 * The style of the tooltip based on the type of information it displays
+		 * @type {'info'|'error'}
+		 */
+		state: { type: String, reflect: true }
+	};
+
+	static styles = [super.styles, bodySmallStyles, css`
+		:host {
+			--d2l-tooltip-background-color: var(--d2l-color-ferrite); /* Deprecated, use state attribute instead */
+			--d2l-tooltip-border-color: var(--d2l-color-ferrite); /* Deprecated, use state attribute instead */
+			--d2l-tooltip-outline-color: rgba(255, 255, 255, 0.32);
+			--d2l-popover-background-color: var(--d2l-tooltip-background-color);
+			--d2l-popover-border-color: var(--d2l-tooltip-border-color);
+			--d2l-popover-border-radius: 0.3rem;
+			--d2l-popover-outline-color: var(--d2l-tooltip-outline-color);
+			--d2l-popover-outline-width: 1px;
+		}
+		:host([state="error"]) {
+			--d2l-tooltip-background-color: var(--d2l-color-cinnabar);
+			--d2l-tooltip-border-color: var(--d2l-color-cinnabar);
+		}
+		.d2l-tooltip-content {
+			box-sizing: border-box;
+			color: white;
+			max-width: 17.5rem;
+			min-height: 1.85rem;
+			min-width: 2.1rem;
+			overflow: hidden;
+			overflow-wrap: anywhere;
+			padding-block: ${10 - contentBorderSize}px ${11 - contentBorderSize}px;
+			padding-inline: ${contentHorizontalPadding - contentBorderSize}px;
+			white-space: normal;
+		}
+		::slotted(ul),
+		::slotted(ol) {
+			padding-inline-start: 1rem;
+		}
+		@media (max-width: 615px) {
 			.d2l-tooltip-content {
-				box-sizing: border-box;
-				color: white;
-				max-width: 17.5rem;
-				min-height: 1.85rem;
-				min-width: 2.1rem;
-				overflow: hidden;
-				overflow-wrap: anywhere;
-				padding-block: ${10 - contentBorderSize}px ${11 - contentBorderSize}px;
-				padding-inline: ${contentHorizontalPadding - contentBorderSize}px;
-				white-space: normal;
-			}
-			::slotted(ul),
-			::slotted(ol) {
-				padding-inline-start: 1rem;
-			}
-			@media (max-width: 615px) {
-				.d2l-tooltip-content {
-					padding-bottom: ${12 - contentBorderSize}px;
-					padding-top: ${12 - contentBorderSize}px;
-				}
+				padding-bottom: ${12 - contentBorderSize}px;
+				padding-top: ${12 - contentBorderSize}px;
 			}
-		`];
-	}
+		}
+	`];
 
 	constructor() {
 		super();

package/components/typography/README.md

@@ -52,13 +52,11 @@ import { heading2Styles } from '@brightspace-ui/core/components/typography/style
 
 class MyComponent extends LitElement {
 
-  static get styles() {
-    return [ heading2Styles, css`
-      :host {
-        display: inline-block;
-      }
-    ` ];
-  }
+  static styles = [heading2Styles, css`
+    :host {
+      display: inline-block;
+    }
+  `];
 
   render() {
     return html `<h1 class="d2l-heading-2"> ... </h1>`;

package/components/validation/validation-custom-mixin.js

@@ -2,12 +2,10 @@ import { isCustomFormElement } from '../form/form-helper.js';
 
 export const ValidationCustomMixin = superclass => class extends superclass {
 
-	static get properties() {
-		return {
-			failureText: { type: String, attribute: 'failure-text' },
-			for: { type: String }
-		};
-	}
+	static properties = {
+		failureText: { type: String, attribute: 'failure-text' },
+		for: { type: String }
+	};
 
 	constructor() {
 		super();

package/components/view-switcher/view-switcher-button.js

@@ -12,57 +12,53 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
  */
 class ViewSwitcherButton extends PropertyRequiredMixin(FocusMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * REQUIRED: Key for the button
-			 * @type {string}
-			 */
-			key: { type: String, required: true },
-			/**
-			 * REQUIRED: Text for the button
-			 * @type {string}
-			 */
-			text: { type: String, required: true },
-			/**
-			 * Indicates if the item is selected
-			 * @type {boolean}
-			 */
-			selected: { type: Boolean, reflect: true },
-		};
-	}
+	static properties = {
+		/**
+		 * REQUIRED: Key for the button
+		 * @type {string}
+		 */
+		key: { type: String, required: true },
+		/**
+		 * REQUIRED: Text for the button
+		 * @type {string}
+		 */
+		text: { type: String, required: true },
+		/**
+		 * Indicates if the item is selected
+		 * @type {boolean}
+		 */
+		selected: { type: Boolean, reflect: true },
+	};
 
-	static get styles() {
-		return [labelStyles, buttonStyles, css`
-			/* Firefox includes a hidden border which messes up button dimensions */
-			button::-moz-focus-inner {
-				border: 0;
-			}
+	static styles = [labelStyles, buttonStyles, css`
+		/* Firefox includes a hidden border which messes up button dimensions */
+		button::-moz-focus-inner {
+			border: 0;
+		}
 
-			button {
-				background-color: transparent;
-				border-radius: 0.2rem;
-				display: block;
-				font-family: inherit;
-				min-height: auto;
-				padding-block: 0.3rem;
-				padding-inline: 1rem;
-			}
+		button {
+			background-color: transparent;
+			border-radius: 0.2rem;
+			display: block;
+			font-family: inherit;
+			min-height: auto;
+			padding-block: 0.3rem;
+			padding-inline: 1rem;
+		}
 
-			button:hover {
-				background-color: var(--d2l-color-mica);
-			}
+		button:hover {
+			background-color: var(--d2l-color-mica);
+		}
 
-			button:${unsafeCSS(getFocusPseudoClass())} {
-				box-shadow: 0 0 0 2px #ffffff;
-			}
+		button:${unsafeCSS(getFocusPseudoClass())} {
+			box-shadow: 0 0 0 2px #ffffff;
+		}
 
-			:host([selected]) button {
-				background-color: var(--d2l-color-tungsten);
-				color: #ffffff;
-			}
-		`];
-	}
+		:host([selected]) button {
+			background-color: var(--d2l-color-tungsten);
+			color: #ffffff;
+		}
+	`];
 
 	constructor() {
 		super();