@brightspace-ui/core 3.268.0 → 3.268.1

package/components/skip-nav/skip-nav-custom.js

@@ -7,44 +7,40 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
  */
 class SkipNavCustom extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * ACCESSIBILITY: REQUIRED: Text for the link
-			 * @type {string}
-			 */
-			text: { required: true, type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * ACCESSIBILITY: REQUIRED: Text for the link
+		 * @type {string}
+		 */
+		text: { required: true, type: String }
+	};
 
-	static get styles() {
-		return css`
-			a {
-				inset-inline-start: -10000px;
-				overflow: hidden;
-				position: absolute;
-				width: 1px;
-			}
-			a:active,
-			a:focus {
-				background-color: rgba(0, 0, 0, 0.7);
-				border: 1px solid rgba(0, 0, 0, 0.8);
-				color: #ffffff;
-				cursor: pointer;
-				display: block;
-				font-weight: bold;
-				inset-block-start: 0;
-				inset-inline-start: 25%;
-				margin: 0 auto;
-				outline: none;
-				padding: 0.3em;
-				text-align: center;
-				text-decoration: none;
-				width: 50%;
-				z-index: 10000;
-			}
-		`;
-	}
+	static styles = css`
+		a {
+			inset-inline-start: -10000px;
+			overflow: hidden;
+			position: absolute;
+			width: 1px;
+		}
+		a:active,
+		a:focus {
+			background-color: rgba(0, 0, 0, 0.7);
+			border: 1px solid rgba(0, 0, 0, 0.8);
+			color: #ffffff;
+			cursor: pointer;
+			display: block;
+			font-weight: bold;
+			inset-block-start: 0;
+			inset-inline-start: 25%;
+			margin: 0 auto;
+			outline: none;
+			padding: 0.3em;
+			text-align: center;
+			text-decoration: none;
+			width: 50%;
+			z-index: 10000;
+		}
+	`;
 
 	static get focusElementSelector() {
 		return 'a';

package/components/sorting/sort.js

@@ -24,19 +24,17 @@ class Sort extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		_selectedItemValue: { state: true },
 	};
 
-	static get styles() {
-		return css`
-			:host {
-				display: inline-block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			::slotted(:not(d2l-sort-item)) {
-				display: none;
-			}
-		`;
-	}
+	static styles = css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		::slotted(:not(d2l-sort-item)) {
+			display: none;
+		}
+	`;
 
 	constructor() {
 		super();

package/components/status-indicator/status-indicator.js

@@ -6,88 +6,84 @@ import { css, html, LitElement } from 'lit';
  */
 class StatusIndicator extends LitElement {
 
-	static get properties() {
-		return {
-			/**
-			 * State of status indicator to display
-			 * @type {'default'|'success'|'alert'|'none'}
-			 */
-			state: {
-				type: String,
-				reflect: true
-			},
-			/**
-			 * REQUIRED: The text that is displayed within the status indicator
-			 * @type {string}
-			 */
-			text: {
-				type: String
-			},
-			/**
-			 * Use when the status is very important and needs to have a lot of prominence
-			 * @type {boolean}
-			 */
-			bold: {
-				type: Boolean,
-				reflect: true
-			}
-		};
-	}
+	static properties = {
+		/**
+		 * State of status indicator to display
+		 * @type {'default'|'success'|'alert'|'none'}
+		 */
+		state: {
+			type: String,
+			reflect: true
+		},
+		/**
+		 * REQUIRED: The text that is displayed within the status indicator
+		 * @type {string}
+		 */
+		text: {
+			type: String
+		},
+		/**
+		 * Use when the status is very important and needs to have a lot of prominence
+		 * @type {boolean}
+		 */
+		bold: {
+			type: Boolean,
+			reflect: true
+		}
+	};
 
-	static get styles() {
-		return css`
-			:host {
-				border-color: var(--d2l-color-celestine);
-				border-radius: 0.6rem;
-				border-style: solid;
-				border-width: 1px;
-				color: var(--d2l-color-celestine);
-				cursor: default;
-				display: inline-block;
-				font-size: 0.6rem;
-				font-weight: bold;
-				line-height: 1;
-				overflow: hidden;
-				padding: 2px 10px 2px 10px;
-				text-overflow: ellipsis;
-				text-transform: capitalize;
-				vertical-align: middle;
-				white-space: nowrap;
-			}
+	static styles = css`
+		:host {
+			border-color: var(--d2l-color-celestine);
+			border-radius: 0.6rem;
+			border-style: solid;
+			border-width: 1px;
+			color: var(--d2l-color-celestine);
+			cursor: default;
+			display: inline-block;
+			font-size: 0.6rem;
+			font-weight: bold;
+			line-height: 1;
+			overflow: hidden;
+			padding: 2px 10px 2px 10px;
+			text-overflow: ellipsis;
+			text-transform: capitalize;
+			vertical-align: middle;
+			white-space: nowrap;
+		}
 
-			:host([hidden]) {
-				display: none;
-			}
-			:host([state="success"]) {
-				border-color: var(--d2l-color-olivine-minus-1);
-				color: var(--d2l-color-olivine-minus-1);
-			}
-			:host([state="alert"]) {
-				border-color: var(--d2l-color-cinnabar);
-				color: var(--d2l-color-cinnabar);
-			}
-			:host([state="none"]),
-			:host([state="null"]) {
-				border-color: var(--d2l-color-tungsten);
-				color: var(--d2l-color-tungsten);
-			}
+		:host([hidden]) {
+			display: none;
+		}
+		:host([state="success"]) {
+			border-color: var(--d2l-color-olivine-minus-1);
+			color: var(--d2l-color-olivine-minus-1);
+		}
+		:host([state="alert"]) {
+			border-color: var(--d2l-color-cinnabar);
+			color: var(--d2l-color-cinnabar);
+		}
+		:host([state="none"]),
+		:host([state="null"]) {
+			border-color: var(--d2l-color-tungsten);
+			color: var(--d2l-color-tungsten);
+		}
 
-			:host([bold]) {
-				background-color: var(--d2l-color-celestine);
-				color: white;
-			}
-			:host([bold][state="success"]) {
-				background-color: var(--d2l-color-olivine-minus-1);
-			}
-			:host([bold][state="alert"]) {
-				background-color: var(--d2l-color-cinnabar);
-			}
-			:host([bold][state="none"]),
-			:host([bold][state="null"]) {
-				background-color: var(--d2l-color-tungsten);
-			}
-		`;
-	}
+		:host([bold]) {
+			background-color: var(--d2l-color-celestine);
+			color: white;
+		}
+		:host([bold][state="success"]) {
+			background-color: var(--d2l-color-olivine-minus-1);
+		}
+		:host([bold][state="alert"]) {
+			background-color: var(--d2l-color-cinnabar);
+		}
+		:host([bold][state="none"]),
+		:host([bold][state="null"]) {
+			background-color: var(--d2l-color-tungsten);
+		}
+	`;
 
 	constructor() {
 		super();

package/components/switch/switch-mixin.js

@@ -9,158 +9,154 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(superclass)) {
 
-	static get properties() {
-		return {
-			/**
-			 * Disables the switch from being toggled.
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean, reflect: true },
-			/**
-			 * Active state.
-			 * @type {boolean}
-			 */
-			on: { type: Boolean, reflect: true },
-			/**
-			 * @ignore - Need to add documentation in each component that uses this mixin.
-			 */
-			text: { type: String, reflect: true },
-			/**
-			 * Determines where text should be positioned relative to the switch.
-			 * @type {'start'|'end'|'hidden'}
-			 * @default end
-			 */
-			textPosition: { type: String, attribute: 'text-position', reflect: true },
-			_hovering: { state: true }
-		};
-	}
+	static properties = {
+		/**
+		 * Disables the switch from being toggled.
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean, reflect: true },
+		/**
+		 * Active state.
+		 * @type {boolean}
+		 */
+		on: { type: Boolean, reflect: true },
+		/**
+		 * @ignore - Need to add documentation in each component that uses this mixin.
+		 */
+		text: { type: String, reflect: true },
+		/**
+		 * Determines where text should be positioned relative to the switch.
+		 * @type {'start'|'end'|'hidden'}
+		 * @default end
+		 */
+		textPosition: { type: String, attribute: 'text-position', reflect: true },
+		_hovering: { state: true }
+	};
 
-	static get styles() {
-		return css`
-			:host {
-				display: inline-block;
-				user-select: none;
-				white-space: nowrap;
-			}
-			:host([hidden]) {
-				display: none;
-			}
+	static styles = css`
+		:host {
+			display: inline-block;
+			user-select: none;
+			white-space: nowrap;
+		}
+		:host([hidden]) {
+			display: none;
+		}
 
-			.d2l-switch-container {
-				--d2l-focus-ring-offset: 0;
-				background-color: var(--d2l-switch-container-background-color, var(--d2l-theme-background-color-base));
-				border-radius: 1rem;
-				box-sizing: border-box;
-				cursor: default;
-				display: inline-block;
-				font-size: 0;
-				line-height: 0;
-				outline-style: none;
-				padding: 0.1rem;
-				vertical-align: middle;
-			}
-			${getFocusRingStyles('.d2l-switch-container', { extraStyles: css`position: relative;` })}
-			:host([disabled]) .d2l-switch-container {
-				cursor: default;
-				opacity: var(--d2l-theme-opacity-disabled-control);
-			}
-			:host([disabled]) .d2l-switch-container:hover > .d2l-switch-inner,
-			:host([disabled]) .d2l-switch-inner:hover,
-			:host([disabled]) .switch-hover {
-				outline: none;
-			}
-			.d2l-switch-inner {
-				border: 1px solid var(--d2l-theme-border-color-emphasized);
-				border-radius: 0.8rem;
-				box-sizing: border-box;
-				padding: 0.3rem;
-				position: relative;
-				width: 3rem;
-			}
-			:host([on]) .d2l-switch-inner {
-				background-color: var(--d2l-theme-background-color-interactive-highlighted);
-			}
-			.d2l-switch-toggle {
-				position: relative;
-				transition: transform 150ms ease-out;
-			}
-			.d2l-switch-toggle > div {
-				background-color: var(--d2l-theme-background-color-base);
-				border: 1px solid var(--d2l-theme-border-color-emphasized);
-				border-radius: 0.6rem;
-				box-sizing: border-box;
-				display: inline-block;
-				height: 1.1rem;
-				left: -0.1rem;
-				position: absolute;
-				top: -0.95rem;
-				width: 1.1rem;
-			}
-			:host([on]) .d2l-switch-toggle > div {
-				left: 0.1rem;
-			}
-			:host([dir="rtl"][on]) .d2l-switch-toggle > div {
-				right: 0.3rem;
-			}
-			:host([dir="rtl"]) .d2l-switch-toggle > div {
-				left: auto;
-				right: -0.1rem;
-			}
-			:host([on]) .d2l-switch-toggle {
-				transform: translateX(1.2rem);
-			}
-			:host([dir="rtl"][on]) .d2l-switch-toggle {
-				right: -0.2rem;
-				transform: translateX(-1.2rem);
-			}
-			d2l-icon, d2l-icon-custom {
-				height: 0.8rem;
-				width: 0.8rem;
-			}
-			.d2l-switch-icon-on, .d2l-switch-icon-off {
-				display: inline-block;
-				transform: scale(1);
-				transition: transform 150ms ease-out;
-			}
-			.d2l-switch-icon-on {
-				margin-right: 0.65rem;
-			}
-			:host([dir="rtl"]) .d2l-switch-icon-on {
-				margin-left: 0.65rem;
-				margin-right: 0;
-			}
-			:host([on]) .d2l-switch-icon-on > d2l-icon,
-			:host([on]) .d2l-switch-icon-on > d2l-icon-custom {
-				color: var(--d2l-theme-icon-color-active);
-			}
-			:host([on]) .d2l-switch-icon-off {
-				transform: scale(0.35);
-			}
-			:host(:not([on])) .d2l-switch-icon-on {
-				color: var(--d2l-theme-icon-color-active);
-				transform: scale(0.35);
-			}
-			.d2l-switch-text {
-				cursor: default;
-				font-size: 0.8rem;
-				font-weight: 400;
-			}
-			:host([text-position="hidden"]) .d2l-switch-text {
-				display: none;
-			}
-			.d2l-switch-inner:hover, .switch-hover {
-				outline: 2px solid var(--d2l-theme-border-color-focus);
-				outline-offset: -2px;
-			}
-			@media (prefers-reduced-motion: reduce) {
-				.d2l-switch-toggle,
-				.d2l-switch-icon-on,
-				.d2l-switch-icon-off {
-					transition: none;
-				}
+		.d2l-switch-container {
+			--d2l-focus-ring-offset: 0;
+			background-color: var(--d2l-switch-container-background-color, var(--d2l-theme-background-color-base));
+			border-radius: 1rem;
+			box-sizing: border-box;
+			cursor: default;
+			display: inline-block;
+			font-size: 0;
+			line-height: 0;
+			outline-style: none;
+			padding: 0.1rem;
+			vertical-align: middle;
+		}
+		${getFocusRingStyles('.d2l-switch-container', { extraStyles: css`position: relative;` })}
+		:host([disabled]) .d2l-switch-container {
+			cursor: default;
+			opacity: var(--d2l-theme-opacity-disabled-control);
+		}
+		:host([disabled]) .d2l-switch-container:hover > .d2l-switch-inner,
+		:host([disabled]) .d2l-switch-inner:hover,
+		:host([disabled]) .switch-hover {
+			outline: none;
+		}
+		.d2l-switch-inner {
+			border: 1px solid var(--d2l-theme-border-color-emphasized);
+			border-radius: 0.8rem;
+			box-sizing: border-box;
+			padding: 0.3rem;
+			position: relative;
+			width: 3rem;
+		}
+		:host([on]) .d2l-switch-inner {
+			background-color: var(--d2l-theme-background-color-interactive-highlighted);
+		}
+		.d2l-switch-toggle {
+			position: relative;
+			transition: transform 150ms ease-out;
+		}
+		.d2l-switch-toggle > div {
+			background-color: var(--d2l-theme-background-color-base);
+			border: 1px solid var(--d2l-theme-border-color-emphasized);
+			border-radius: 0.6rem;
+			box-sizing: border-box;
+			display: inline-block;
+			height: 1.1rem;
+			left: -0.1rem;
+			position: absolute;
+			top: -0.95rem;
+			width: 1.1rem;
+		}
+		:host([on]) .d2l-switch-toggle > div {
+			left: 0.1rem;
+		}
+		:host([dir="rtl"][on]) .d2l-switch-toggle > div {
+			right: 0.3rem;
+		}
+		:host([dir="rtl"]) .d2l-switch-toggle > div {
+			left: auto;
+			right: -0.1rem;
+		}
+		:host([on]) .d2l-switch-toggle {
+			transform: translateX(1.2rem);
+		}
+		:host([dir="rtl"][on]) .d2l-switch-toggle {
+			right: -0.2rem;
+			transform: translateX(-1.2rem);
+		}
+		d2l-icon, d2l-icon-custom {
+			height: 0.8rem;
+			width: 0.8rem;
+		}
+		.d2l-switch-icon-on, .d2l-switch-icon-off {
+			display: inline-block;
+			transform: scale(1);
+			transition: transform 150ms ease-out;
+		}
+		.d2l-switch-icon-on {
+			margin-right: 0.65rem;
+		}
+		:host([dir="rtl"]) .d2l-switch-icon-on {
+			margin-left: 0.65rem;
+			margin-right: 0;
+		}
+		:host([on]) .d2l-switch-icon-on > d2l-icon,
+		:host([on]) .d2l-switch-icon-on > d2l-icon-custom {
+			color: var(--d2l-theme-icon-color-active);
+		}
+		:host([on]) .d2l-switch-icon-off {
+			transform: scale(0.35);
+		}
+		:host(:not([on])) .d2l-switch-icon-on {
+			color: var(--d2l-theme-icon-color-active);
+			transform: scale(0.35);
+		}
+		.d2l-switch-text {
+			cursor: default;
+			font-size: 0.8rem;
+			font-weight: 400;
+		}
+		:host([text-position="hidden"]) .d2l-switch-text {
+			display: none;
+		}
+		.d2l-switch-inner:hover, .switch-hover {
+			outline: 2px solid var(--d2l-theme-border-color-focus);
+			outline-offset: -2px;
+		}
+		@media (prefers-reduced-motion: reduce) {
+			.d2l-switch-toggle,
+			.d2l-switch-icon-on,
+			.d2l-switch-icon-off {
+				transition: none;
 			}
-		`;
-	}
+		}
+	`;
 
 	constructor() {
 		super();

package/components/switch/switch-visibility.js

@@ -12,22 +12,18 @@ import { SwitchMixin } from './switch-mixin.js';
  */
 class VisibilitySwitch extends LocalizeCoreElement(SwitchMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			_hasConditions: { state: true }
-		};
-	}
+	static properties = {
+		_hasConditions: { state: true }
+	};
 
-	static get styles() {
-		return [super.styles, css`
-			d2l-tooltip-help {
-				display: none;
-			}
-			d2l-tooltip-help.switch-visibility-conditions-show {
-				display: inline;
-			}
-		`];
-	}
+	static styles = [super.styles, css`
+		d2l-tooltip-help {
+			display: none;
+		}
+		d2l-tooltip-help.switch-visibility-conditions-show {
+			display: inline;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/switch/switch.js

@@ -11,13 +11,11 @@ import { SwitchMixin } from './switch-mixin.js';
  */
 class Switch extends SwitchMixin(LitElement) {
 
-	static get styles() {
-		return [super.styles, css`
-			.d2l-switch-icon-off > d2l-icon-custom {
-				color: var(--d2l-theme-icon-color-standard);
-			}
-		`];
-	}
+	static styles = [super.styles, css`
+		.d2l-switch-icon-off > d2l-icon-custom {
+			color: var(--d2l-theme-icon-color-standard);
+		}
+	`];
 
 	get offIcon() {
 		return html`