@brightspace-ui/labs 2.56.0 → 2.56.2

package/src/components/navigation/navigation-immersive.js

@@ -11,157 +11,153 @@ const mediaQueryList = window.matchMedia('(max-width: 615px)');
 
 class NavigationImmersive extends LitElement {
 
-	static get properties() {
-		return {
-			allowOverflow: {
-				attribute: 'allow-overflow',
-				type: Boolean,
-				reflect: true
-			},
-			backLinkHref: {
-				attribute: 'back-link-href',
-				type: String
-			},
-			backLinkText: {
-				attribute: 'back-link-text',
-				type: String
-			},
-			backLinkTextShort: {
-				attribute: 'back-link-text-short',
-				type: String
-			},
-			widthType: {
-				attribute: 'width-type',
-				type: String,
-				reflect: true
-			},
-			_dynamicSpacingHeight: { state: true },
-			_middleHidden: { state: true },
-			_middleNoRightBorder: { state: true },
-			_smallWidth: { state: true }
-		};
-	}
+	static properties = {
+		allowOverflow: {
+			attribute: 'allow-overflow',
+			type: Boolean,
+			reflect: true
+		},
+		backLinkHref: {
+			attribute: 'back-link-href',
+			type: String
+		},
+		backLinkText: {
+			attribute: 'back-link-text',
+			type: String
+		},
+		backLinkTextShort: {
+			attribute: 'back-link-text-short',
+			type: String
+		},
+		widthType: {
+			attribute: 'width-type',
+			type: String,
+			reflect: true
+		},
+		_dynamicSpacingHeight: { state: true },
+		_middleHidden: { state: true },
+		_middleNoRightBorder: { state: true },
+		_smallWidth: { state: true }
+	};
+
+	static styles = [bodyCompactStyles, navigationSharedStyle, css`
+		:host {
+			--d2l-labs-navigation-immersive-height-main: 3.1rem;
+			--d2l-labs-navigation-immersive-height-responsive: 2.8rem;
+		}
+		.d2l-navigiation-immersive-fixed {
+			background-color: white;
+			left: 0;
+			position: fixed;
+			right: 0;
+			top: 0;
+			z-index: 2; /* higher than skeletons which could scroll behind immersive nav */
+		}
+		d2l-labs-navigation {
+			border-bottom: 1px solid var(--d2l-color-mica);
+		}
+		.d2l-labs-navigation-immersive-margin {
+			display: flex;
+			justify-content: center;
+			margin: 0 30px;
+		}
 
-	static get styles() {
-		return [bodyCompactStyles, navigationSharedStyle, css`
-			:host {
-				--d2l-labs-navigation-immersive-height-main: 3.1rem;
-				--d2l-labs-navigation-immersive-height-responsive: 2.8rem;
-			}
-			.d2l-navigiation-immersive-fixed {
-				background-color: white;
-				left: 0;
-				position: fixed;
-				right: 0;
-				top: 0;
-				z-index: 2; /* higher than skeletons which could scroll behind immersive nav */
-			}
-			d2l-labs-navigation {
-				border-bottom: 1px solid var(--d2l-color-mica);
-			}
-			.d2l-labs-navigation-immersive-margin {
-				display: flex;
-				justify-content: center;
-				margin: 0 30px;
-			}
+		.d2l-labs-navigation-immersive-container {
+			display: flex;
+			height: var(--d2l-labs-navigation-immersive-height-main);
+			justify-content: space-between;
+			margin: 0 -7px;
+			max-width: 100%;
+			overflow: hidden;
+			width: 100%;
+		}
 
-			.d2l-labs-navigation-immersive-container {
-				display: flex;
-				height: var(--d2l-labs-navigation-immersive-height-main);
-				justify-content: space-between;
-				margin: 0 -7px;
-				max-width: 100%;
-				overflow: hidden;
-				width: 100%;
-			}
+		:host([width-type="normal"]) .d2l-labs-navigation-immersive-container {
+			max-width: 1230px;
+		}
 
-			:host([width-type="normal"]) .d2l-labs-navigation-immersive-container {
-				max-width: 1230px;
-			}
+		:host([allow-overflow]) .d2l-labs-navigation-immersive-container {
+			overflow: visible;
+		}
 
-			:host([allow-overflow]) .d2l-labs-navigation-immersive-container {
-				overflow: visible;
-			}
+		.d2l-labs-navigation-immersive-left ::slotted(*),
+		.d2l-labs-navigation-immersive-middle ::slotted(*),
+		.d2l-labs-navigation-immersive-right ::slotted(*) {
+			height: var(--d2l-labs-navigation-immersive-height-main);
+		}
 
-			.d2l-labs-navigation-immersive-left ::slotted(*),
-			.d2l-labs-navigation-immersive-middle ::slotted(*),
-			.d2l-labs-navigation-immersive-right ::slotted(*) {
-				height: var(--d2l-labs-navigation-immersive-height-main);
-			}
+		.d2l-labs-navigation-immersive-left {
+			color: var(--d2l-color-tungsten);
+			letter-spacing: 0.2px;
+			padding-left: 7px;
+		}
 
-			.d2l-labs-navigation-immersive-left {
-				color: var(--d2l-color-tungsten);
-				letter-spacing: 0.2px;
-				padding-left: 7px;
-			}
+		.d2l-labs-navigation-immersive-right {
+			padding-right: 7px;
+		}
 
-			.d2l-labs-navigation-immersive-right {
-				padding-right: 7px;
-			}
+		.d2l-labs-navigation-immersive-left,
+		.d2l-labs-navigation-immersive-right {
+			flex: 0 0 auto;
+		}
 
-			.d2l-labs-navigation-immersive-left,
-			.d2l-labs-navigation-immersive-right {
-				flex: 0 0 auto;
-			}
+		.d2l-labs-navigation-immersive-middle {
+			border-inline-end: 1px solid var(--d2l-color-gypsum);
+			border-inline-start: 1px solid var(--d2l-color-gypsum);
+			flex: 0 1 auto;
+			margin: 0 24px;
+			min-width: 0;
+			padding: 0 24px;
+			width: 100%;
+		}
 
-			.d2l-labs-navigation-immersive-middle {
-				border-inline-end: 1px solid var(--d2l-color-gypsum);
-				border-inline-start: 1px solid var(--d2l-color-gypsum);
-				flex: 0 1 auto;
-				margin: 0 24px;
-				min-width: 0;
-				padding: 0 24px;
-				width: 100%;
-			}
+		.d2l-labs-navigation-immersive-middle.d2l-labs-navigation-immersive-middle-no-right-border {
+			border-inline-end: none;
+		}
 
-			.d2l-labs-navigation-immersive-middle.d2l-labs-navigation-immersive-middle-no-right-border {
-				border-inline-end: none;
-			}
+		div.d2l-labs-navigation-immersive-middle-observer,
+		div.d2l-labs-navigation-immersive-right-observer {
+			height: auto;
+		}
 
-			div.d2l-labs-navigation-immersive-middle-observer,
-			div.d2l-labs-navigation-immersive-right-observer {
-				height: auto;
-			}
+		.d2l-labs-navigation-immersive-middle-hidden {
+			visibility: hidden;
+		}
 
-			.d2l-labs-navigation-immersive-middle-hidden {
-				visibility: hidden;
-			}
+		.d2l-labs-navigation-immersive-spacing {
+			position: unset;
+		}
 
-			.d2l-labs-navigation-immersive-spacing {
-				position: unset;
+		@media (max-width: 929px) {
+			.d2l-labs-navigation-immersive-margin {
+				margin: 0 24px;
 			}
+		}
 
-			@media (max-width: 929px) {
-				.d2l-labs-navigation-immersive-margin {
-					margin: 0 24px;
-				}
+		@media (max-width: 767px) {
+			.d2l-labs-navigation-immersive-margin {
+				margin: 0 18px;
 			}
+		}
 
-			@media (max-width: 767px) {
-				.d2l-labs-navigation-immersive-margin {
-					margin: 0 18px;
-				}
+		@media (max-width: 615px) {
+			.d2l-labs-navigation-immersive-container {
+				height: var(--d2l-labs-navigation-immersive-height-responsive);
 			}
-
-			@media (max-width: 615px) {
-				.d2l-labs-navigation-immersive-container {
-					height: var(--d2l-labs-navigation-immersive-height-responsive);
-				}
-				.d2l-labs-navigation-immersive-left ::slotted(*),
-				.d2l-labs-navigation-immersive-middle ::slotted(*),
-				.d2l-labs-navigation-immersive-right ::slotted(*) {
-					height: var(--d2l-labs-navigation-immersive-height-responsive);
-				}
-				.d2l-labs-navigation-immersive-spacing {
-					height: calc(var(--d2l-labs-navigation-immersive-height-responsive) + 5px);
-				}
-				.d2l-labs-navigation-immersive-middle {
-					margin: 0 18px;
-					padding: 0 18px;
-				}
+			.d2l-labs-navigation-immersive-left ::slotted(*),
+			.d2l-labs-navigation-immersive-middle ::slotted(*),
+			.d2l-labs-navigation-immersive-right ::slotted(*) {
+				height: var(--d2l-labs-navigation-immersive-height-responsive);
 			}
-		`];
-	}
+			.d2l-labs-navigation-immersive-spacing {
+				height: calc(var(--d2l-labs-navigation-immersive-height-responsive) + 5px);
+			}
+			.d2l-labs-navigation-immersive-middle {
+				margin: 0 18px;
+				padding: 0 18px;
+			}
+		}
+	`];
 
 	constructor() {
 		super();

package/src/components/navigation/navigation-iterator.js

@@ -5,32 +5,28 @@ import { LocalizeLabsElement } from '../localize-labs-element.js';
 
 class NavigationIterator extends LocalizeLabsElement(LitElement) {
 
-	static get properties() {
-		return {
-			hideText: { attribute: 'hide-text', type: Boolean },
-			previousDisabled: { attribute: 'previous-disabled', type: Boolean },
-			previousText: { attribute: 'previous-text', type: String },
-			nextDisabled: { attribute: 'next-disabled', type: Boolean },
-			nextText: { attribute: 'next-text', type: String },
-			noHighlightBorder: { attribute: 'no-highlight-border', type: Boolean },
-		};
-	}
+	static properties = {
+		hideText: { attribute: 'hide-text', type: Boolean },
+		previousDisabled: { attribute: 'previous-disabled', type: Boolean },
+		previousText: { attribute: 'previous-text', type: String },
+		nextDisabled: { attribute: 'next-disabled', type: Boolean },
+		nextText: { attribute: 'next-text', type: String },
+		noHighlightBorder: { attribute: 'no-highlight-border', type: Boolean },
+	};
 
-	static get styles() {
-		return [bodyCompactStyles, css`
-			:host {
-				align-items: center;
-				display: flex;
-				gap: 1.2rem;
-				height: 3.3rem;
-				justify-content: space-between;
-				max-width: 20rem;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-		`];
-	}
+	static styles = [bodyCompactStyles, css`
+		:host {
+			align-items: center;
+			display: flex;
+			gap: 1.2rem;
+			height: 3.3rem;
+			justify-content: space-between;
+			max-width: 20rem;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+	`];
 
 	constructor() {
 		super();

package/src/components/navigation/navigation-link-back.js

@@ -5,24 +5,20 @@ import { LocalizeLabsElement } from '../localize-labs-element.js';
 
 class NavigationLinkBack extends LocalizeLabsElement(FocusMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			text: { type: String },
-			href: { type: String }
-		};
-	}
+	static properties = {
+		text: { type: String },
+		href: { type: String }
+	};
 
-	static get styles() {
-		return css`
-			:host {
-				display: inline-block;
-				height: 100%;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-		`;
-	}
+	static styles = css`
+		:host {
+			display: inline-block;
+			height: 100%;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+	`;
 
 	static get focusElementSelector() {
 		return 'd2l-labs-navigation-link-icon';

package/src/components/navigation/navigation-link-icon.js

@@ -12,47 +12,43 @@ import { offscreenStyles } from '@brightspace-ui/core/components/offscreen/offsc
  */
 class NavigationLinkIcon extends FocusMixin(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * REQUIRED: URL or URL fragment of the link
-			 * @type {string}
-			 */
-			href: { type: String },
-			/**
-			 * REQUIRED: Preset icon key (e.g. "tier1:gear")
-			 * @type {string}
-			 */
-			icon: { type: String },
-			/**
-			 * REQUIRED: Text for the link
-			 * @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 = {
+		/**
+		 * REQUIRED: URL or URL fragment of the link
+		 * @type {string}
+		 */
+		href: { type: String },
+		/**
+		 * REQUIRED: Preset icon key (e.g. "tier1:gear")
+		 * @type {string}
+		 */
+		icon: { type: String },
+		/**
+		 * REQUIRED: Text for the link
+		 * @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, highlightLinkStyles, offscreenStyles, css`
-			:host {
-				display: inline-block;
-				height: 100%;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-		`];
-	}
+	static styles = [highlightBorderStyles, highlightLinkStyles, offscreenStyles, css`
+		:host {
+			display: inline-block;
+			height: 100%;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+	`];
 
 	constructor() {
 		super();

package/src/components/navigation/navigation-link-image.js

@@ -7,42 +7,38 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 class NavigationLinkImage extends FocusMixin(LitElement) {
 
-	static get properties() {
-		return {
-			href: { type: String },
-			slim: { reflect: true, type: Boolean },
-			src: { type: String },
-			text: { type: String },
-			tooltipOffset: { attribute: 'tooltip-offset', type: Number }
-		};
-	}
+	static properties = {
+		href: { type: String },
+		slim: { reflect: true, type: Boolean },
+		src: { type: String },
+		text: { type: String },
+		tooltipOffset: { attribute: 'tooltip-offset', type: Number }
+	};
 
-	static get styles() {
-		return [highlightBorderStyles, highlightLinkStyles, css`
-			:host {
-				display: inline-block;
-				height: 100%;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			img {
-				max-height: 60px;
-				max-width: 260px;
-				vertical-align: middle;
-			}
-			:host([slim]) img {
-				max-height: 40px;
-				max-width: 173px;
-			}
-			.d2l-labs-navigation-link-image-container {
-				align-items: center;
-				display: inline-flex;
-				height: 100%;
-				vertical-align: middle;
-			}
-		`];
-	}
+	static styles = [highlightBorderStyles, highlightLinkStyles, css`
+		:host {
+			display: inline-block;
+			height: 100%;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		img {
+			max-height: 60px;
+			max-width: 260px;
+			vertical-align: middle;
+		}
+		:host([slim]) img {
+			max-height: 40px;
+			max-width: 173px;
+		}
+		.d2l-labs-navigation-link-image-container {
+			align-items: center;
+			display: inline-flex;
+			height: 100%;
+			vertical-align: middle;
+		}
+	`];
 
 	constructor() {
 		super();

package/src/components/navigation/navigation-link.js

@@ -5,45 +5,41 @@ import { highlightBorderStyles } from './navigation-styles.js';
 
 class D2LNavigationLink extends FocusMixin(LitElement) {
 
-	static get properties() {
-		return {
-			href: {
-				reflect: true,
-				type: String
-			},
-			text: {
-				type: String
-			}
-		};
-	}
+	static properties = {
+		href: {
+			reflect: true,
+			type: String
+		},
+		text: {
+			type: String
+		}
+	};
 
-	static get styles() {
-		return [highlightBorderStyles, css`
-			:host {
-				display: inline-block;
-				height: 100%;
-			}
-			a {
-				align-items: center;
-				color: var(--d2l-color-ferrite);
-				display: inline-flex;
-				height: 100%;
-				min-height: 40px;
-				position: relative;
-				text-decoration: none;
-				vertical-align: middle;
-			}
-			a:hover,
-			a:focus {
-				--d2l-icon-fill-color: var(--d2l-color-celestine);
-				color: var(--d2l-color-celestine);
-				outline: none;
-			}
-			:host(:not([href])) .d2l-labs-navigation-highlight-border {
-				display: none;
-			}
-		`];
-	}
+	static styles = [highlightBorderStyles, css`
+		:host {
+			display: inline-block;
+			height: 100%;
+		}
+		a {
+			align-items: center;
+			color: var(--d2l-color-ferrite);
+			display: inline-flex;
+			height: 100%;
+			min-height: 40px;
+			position: relative;
+			text-decoration: none;
+			vertical-align: middle;
+		}
+		a:hover,
+		a:focus {
+			--d2l-icon-fill-color: var(--d2l-color-celestine);
+			color: var(--d2l-color-celestine);
+			outline: none;
+		}
+		:host(:not([href])) .d2l-labs-navigation-highlight-border {
+			display: none;
+		}
+	`];
 
 	static get focusElementSelector() {
 		return 'a';

package/src/components/navigation/navigation-main-footer.js

@@ -3,15 +3,13 @@ import { navigationSharedStyle } from './navigation-shared-styles.js';
 
 class NavigationMainFooter extends LitElement {
 
-	static get styles() {
-		return [navigationSharedStyle, css`
-			:host {
-				border-bottom: 1px solid rgba(124, 134, 149, 0.18);
-				border-top: 1px solid rgba(124, 134, 149, 0.18);
-				display: block;
-			}
-		`];
-	}
+	static styles = [navigationSharedStyle, css`
+		:host {
+			border-bottom: 1px solid rgba(124, 134, 149, 0.18);
+			border-top: 1px solid rgba(124, 134, 149, 0.18);
+			display: block;
+		}
+	`];
 
 	render() {
 		return html`