@brightspace-ui/labs 2.56.0 → 2.56.2

package/src/components/media-player/slider-bar.js

@@ -6,141 +6,138 @@ import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
 
 class SliderBar extends PropertyRequiredMixin(LocalizeLabsElement(RtlMixin(LitElement))) {
 
-	static get properties() {
-		return {
-			value: { type: Number },
-			immediateValue: { type: Number, reflect: true },
-			hoverValue: { type: Number, reflect: true },
-			dragging: { type: Boolean, reflect: true },
-			hovering: { type: Boolean, reflect: true },
-			vertical: { type: Boolean },
-			fullWidth: { type: Boolean },
-			min: { type: Number },
-			max: { type: Number },
-			label: { type: String, required: true },
-		};
-	}
-
-	static get styles() {
-		return css`
-	:host {
-		--d2l-color-corundum-65-opacity: rgba(177, 185, 190, 0.65);
-		--d2l-color-galena-88-opacity: rgba(110, 116, 119, 0.88);
-		--d2l-calculated-seek-bar-height: var(--d2l-seek-bar-height, 6px);
-		--d2l-calculated-knob-size: var(--d2l-knob-size, 32px);
-		--d2l-half-knob-size: calc(var(--d2l-calculated-knob-size)/2);
-		--d2l-half-knob-size-overflow: calc((var(--d2l-calculated-knob-size) - var(--d2l-calculated-seek-bar-height)) / 2 - 1px);
-		--d2l-calculated-inner-knob-margin: var(--d2l-inner-knob-margin, 8px);
-		--d2l-calculated-knob-box-shadow: var(--d2l-knob-box-shadow, 0 2px 4px 0 rgba(0, 0, 0, 0.52));
-		--d2l-calculated-outer-knob-color: var(--d2l-outer-knob-color, var(--d2l-color-regolith));
-		--d2l-calculated-outer-knob-border-color: var(--d2l-outer-knob-border-color, var(--d2l-color-pressicus));
-		--d2l-inner-knob-color: var(--d2l-inner-knob-color, var(--d2l-color-celestine-plus-1));
-		--d2l-calculated-knob-focus-color: var(--d2l-knob-focus-color, var(--d2l-color-celestine));
-		--d2l-calculated-knob-focus-size: var(--d2l-knob-focus-size, 2px);
-		--d2l-calculated-progress-border-color: var(--d2l-progress-border-color, var(--d2l-color-pressicus));
-		--d2l-calculated-progress-border-radius: var(--d2l-progress-border-radius, 6px);
-		--d2l-calculated-progress-shadow-color: var(--d2l-progress-shadow-color, var(--d2l-color-galena-88-opacity));
-		--d2l-calculated-progress-active-color: var(--d2l-progress-active-color, var(--d2l-color-celestine-plus-1));
-		--d2l-calculated-progress-background-color: var(--d2l-progress-background-color, var(--d2l-color-corundum-65-opacity));
-		display: block;
-	}
+	static properties = {
+		value: { type: Number },
+		immediateValue: { type: Number, reflect: true },
+		hoverValue: { type: Number, reflect: true },
+		dragging: { type: Boolean, reflect: true },
+		hovering: { type: Boolean, reflect: true },
+		vertical: { type: Boolean },
+		fullWidth: { type: Boolean },
+		min: { type: Number },
+		max: { type: Number },
+		label: { type: String, required: true },
+	};
+
+	static styles = css`
+		:host {
+			--d2l-color-corundum-65-opacity: rgba(177, 185, 190, 0.65);
+			--d2l-color-galena-88-opacity: rgba(110, 116, 119, 0.88);
+			--d2l-calculated-seek-bar-height: var(--d2l-seek-bar-height, 6px);
+			--d2l-calculated-knob-size: var(--d2l-knob-size, 32px);
+			--d2l-half-knob-size: calc(var(--d2l-calculated-knob-size)/2);
+			--d2l-half-knob-size-overflow: calc((var(--d2l-calculated-knob-size) - var(--d2l-calculated-seek-bar-height)) / 2 - 1px);
+			--d2l-calculated-inner-knob-margin: var(--d2l-inner-knob-margin, 8px);
+			--d2l-calculated-knob-box-shadow: var(--d2l-knob-box-shadow, 0 2px 4px 0 rgba(0, 0, 0, 0.52));
+			--d2l-calculated-outer-knob-color: var(--d2l-outer-knob-color, var(--d2l-color-regolith));
+			--d2l-calculated-outer-knob-border-color: var(--d2l-outer-knob-border-color, var(--d2l-color-pressicus));
+			--d2l-inner-knob-color: var(--d2l-inner-knob-color, var(--d2l-color-celestine-plus-1));
+			--d2l-calculated-knob-focus-color: var(--d2l-knob-focus-color, var(--d2l-color-celestine));
+			--d2l-calculated-knob-focus-size: var(--d2l-knob-focus-size, 2px);
+			--d2l-calculated-progress-border-color: var(--d2l-progress-border-color, var(--d2l-color-pressicus));
+			--d2l-calculated-progress-border-radius: var(--d2l-progress-border-radius, 6px);
+			--d2l-calculated-progress-shadow-color: var(--d2l-progress-shadow-color, var(--d2l-color-galena-88-opacity));
+			--d2l-calculated-progress-active-color: var(--d2l-progress-active-color, var(--d2l-color-celestine-plus-1));
+			--d2l-calculated-progress-background-color: var(--d2l-progress-background-color, var(--d2l-color-corundum-65-opacity));
+			display: block;
+		}
 
-	:host(:focus-within) {
-		outline: none;
-	}
+		:host(:focus-within) {
+			outline: none;
+		}
 
-	:host(:focus-within) .slider-knob::after {
-		border-radius: 50%;
-		bottom: 0;
-		box-shadow: 0 0 0 var(--d2l-calculated-knob-focus-size) var(--d2l-calculated-knob-focus-color);
-		content: "";
-		left: 0;
-		position: absolute;
-		right: 0;
-		top: 0;
-	}
+		:host(:focus-within) .slider-knob::after {
+			border-radius: 50%;
+			bottom: 0;
+			box-shadow: 0 0 0 var(--d2l-calculated-knob-focus-size) var(--d2l-calculated-knob-focus-color);
+			content: "";
+			left: 0;
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
 
-	:host([solid]) .slider-knob-inner {
-		display: none;
-	}
+		:host([solid]) .slider-knob-inner {
+			display: none;
+		}
 
-	#sliderContainer {
-		height: var(--d2l-calculated-knob-size);
-		margin-left: var(--d2l-half-knob-size);
-		margin-right: var(--d2l-half-knob-size);
-		position: relative;
-	}
+		#sliderContainer {
+			height: var(--d2l-calculated-knob-size);
+			margin-left: var(--d2l-half-knob-size);
+			margin-right: var(--d2l-half-knob-size);
+			position: relative;
+		}
 
-	#knobContainer {
-		bottom: 0;
-		left: 0;
-		pointer-events: none;
-		position: absolute;
-		right: 0;
-		top: 0;
-	}
+		#knobContainer {
+			bottom: 0;
+			left: 0;
+			pointer-events: none;
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
 
-	:host([fullWidth]) #sliderContainer {
-		margin-left: 0;
-		margin-right: 0;
-	}
+		:host([fullWidth]) #sliderContainer {
+			margin-left: 0;
+			margin-right: 0;
+		}
 
-	:host([fullWidth]) #knobContainer {
-		left: var(--d2l-half-knob-size);
-		right: var(--d2l-half-knob-size);
-	}
+		:host([fullWidth]) #knobContainer {
+			left: var(--d2l-half-knob-size);
+			right: var(--d2l-half-knob-size);
+		}
 
-	.bar-container {
-		cursor: pointer;
-		overflow: hidden;
-	}
+		.bar-container {
+			cursor: pointer;
+			overflow: hidden;
+		}
 
-	#sliderBar {
-		padding: var(--d2l-half-knob-size-overflow) 0;
-		width: 100%;
-	}
+		#sliderBar {
+			padding: var(--d2l-half-knob-size-overflow) 0;
+			width: 100%;
+		}
 
-	#progressContainer {
-		--d2l-progress-container-color: var(--d2l-calculated-progress-background-color);
-		background: var(--d2l-progress-container-color, var(--d2l-color-gypsum));
-		border-radius: var(--d2l-calculated-progress-border-radius);
-		box-shadow: inset 0 1px 0 0 var(--d2l-calculated-progress-shadow-color);
-		height: var(--d2l-progress-height, 6px);
-		position: relative;
-	}
+		#progressContainer {
+			--d2l-progress-container-color: var(--d2l-calculated-progress-background-color);
+			background: var(--d2l-progress-container-color, var(--d2l-color-gypsum));
+			border-radius: var(--d2l-calculated-progress-border-radius);
+			box-shadow: inset 0 1px 0 0 var(--d2l-calculated-progress-shadow-color);
+			height: var(--d2l-progress-height, 6px);
+			position: relative;
+		}
 
-	#primaryProgress {
-		--d2l-progress-active-color: var(--d2l-calculated-progress-active-color);
-		background: var(--d2l-progress-active-color, var(--d2l-color-celestine));
-		border-radius: var(--d2l-calculated-progress-border-radius);
-		box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.07);
-		height: 100%;
-	}
+		#primaryProgress {
+			--d2l-progress-active-color: var(--d2l-calculated-progress-active-color);
+			background: var(--d2l-progress-active-color, var(--d2l-color-celestine));
+			border-radius: var(--d2l-calculated-progress-border-radius);
+			box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.07);
+			height: 100%;
+		}
 
-	.slider-knob {
-		background-color: var(--d2l-calculated-outer-knob-color);
-		border-radius: 50%;
-		box-shadow: var(--d2l-calculated-knob-box-shadow);
-		cursor: pointer;
-		height: calc((((var(--d2l-calculated-knob-size) / 2) - var(--d2l-calculated-seek-bar-height) / 2) * 2) + var(--d2l-calculated-seek-bar-height) - 2px);
-		left: 0;
-		margin-left: calc(-1 * ((var(--d2l-calculated-knob-size) / 2) - var(--d2l-calculated-seek-bar-height) / 2) - var(--d2l-calculated-seek-bar-height) / 2);
-		position: absolute;
-		top: 0;
-		width: calc((((var(--d2l-calculated-knob-size) / 2) - var(--d2l-calculated-seek-bar-height) / 2) * 2) + var(--d2l-calculated-seek-bar-height) - 2px);
-		z-index: 1;
-	}
+		.slider-knob {
+			background-color: var(--d2l-calculated-outer-knob-color);
+			border-radius: 50%;
+			box-shadow: var(--d2l-calculated-knob-box-shadow);
+			cursor: pointer;
+			height: calc((((var(--d2l-calculated-knob-size) / 2) - var(--d2l-calculated-seek-bar-height) / 2) * 2) + var(--d2l-calculated-seek-bar-height) - 2px);
+			left: 0;
+			margin-left: calc(-1 * ((var(--d2l-calculated-knob-size) / 2) - var(--d2l-calculated-seek-bar-height) / 2) - var(--d2l-calculated-seek-bar-height) / 2);
+			position: absolute;
+			top: 0;
+			width: calc((((var(--d2l-calculated-knob-size) / 2) - var(--d2l-calculated-seek-bar-height) / 2) * 2) + var(--d2l-calculated-seek-bar-height) - 2px);
+			z-index: 1;
+		}
 
-	.slider-knob-inner {
-		background-color: var(--d2l-inner-knob-color);
-		border-radius: 50%;
-		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
-		box-sizing: border-box;
-		height: calc(100% - var(--d2l-calculated-inner-knob-margin) *2);
-		margin: var(--d2l-calculated-inner-knob-margin);
-		width: calc(100% - var(--d2l-calculated-inner-knob-margin) *2);
-	}`;
-	}
+		.slider-knob-inner {
+			background-color: var(--d2l-inner-knob-color);
+			border-radius: 50%;
+			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
+			box-sizing: border-box;
+			height: calc(100% - var(--d2l-calculated-inner-knob-margin) *2);
+			margin: var(--d2l-calculated-inner-knob-margin);
+			width: calc(100% - var(--d2l-calculated-inner-knob-margin) *2);
+		}
+	`;
 
 	constructor() {
 		super();

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

@@ -9,84 +9,82 @@ function useCustomScroll() {
 
 class NavigationBand extends LitElement {
 
-	static get styles() {
-		return [centererStyles, guttersStyles, css`
-			:host {
-				background: linear-gradient(180deg, var(--d2l-branding-primary-color, var(--d2l-color-celestine)) 1.5rem, #ffffff 0%);
-				display: block;
-				min-height: 4px;
-				position: relative; /* Needed for Firefox */
-			}
-			:host([hidden]) {
-				display: none;
-			}
+	static styles = [centererStyles, guttersStyles, css`
+		:host {
+			background: linear-gradient(180deg, var(--d2l-branding-primary-color, var(--d2l-color-celestine)) 1.5rem, #ffffff 0%);
+			display: block;
+			min-height: 4px;
+			position: relative; /* Needed for Firefox */
+		}
+		:host([hidden]) {
+			display: none;
+		}
 
-			.d2l-labs-navigation-scroll {
-				overflow-x: auto;
-				overflow-y: hidden;
-				scroll-behavior: smooth;
-			}
+		.d2l-labs-navigation-scroll {
+			overflow-x: auto;
+			overflow-y: hidden;
+			scroll-behavior: smooth;
+		}
 
-			.d2l-labs-navigation-scroll[data-custom-scroll] {
-				/* Firefox Styles */
-				scrollbar-color: var(--d2l-color-galena) var(--d2l-color-sylvite);
-				scrollbar-width: thin;
-			}
-			/* Webkit Styles */
-			.d2l-labs-navigation-scroll[data-custom-scroll]::-webkit-scrollbar {
-				background-color: var(--d2l-color-sylvite);
-				border-radius: 8px;
-				height: 9px;
-			}
-			.d2l-labs-navigation-scroll[data-custom-scroll]::-webkit-scrollbar-thumb {
-				background-color: var(--d2l-color-galena);
-				border-bottom: 1px solid var(--d2l-color-sylvite);
-				border-radius: 8px;
-				border-top: 1px solid var(--d2l-color-sylvite);
-			}
-			/* Faded edges styles */
+		.d2l-labs-navigation-scroll[data-custom-scroll] {
+			/* Firefox Styles */
+			scrollbar-color: var(--d2l-color-galena) var(--d2l-color-sylvite);
+			scrollbar-width: thin;
+		}
+		/* Webkit Styles */
+		.d2l-labs-navigation-scroll[data-custom-scroll]::-webkit-scrollbar {
+			background-color: var(--d2l-color-sylvite);
+			border-radius: 8px;
+			height: 9px;
+		}
+		.d2l-labs-navigation-scroll[data-custom-scroll]::-webkit-scrollbar-thumb {
+			background-color: var(--d2l-color-galena);
+			border-bottom: 1px solid var(--d2l-color-sylvite);
+			border-radius: 8px;
+			border-top: 1px solid var(--d2l-color-sylvite);
+		}
+		/* Faded edges styles */
+		.d2l-labs-navigation-scroll-before,
+		.d2l-labs-navigation-scroll-after {
+			height: 100%;
+			max-height: 1.5rem; /* should match linear-background height */
+			pointer-events: none;
+			position: absolute;
+			top: 0;
+			width: 2.439%; /* should match gutter width */
+			z-index: 2;
+		}
+		.d2l-labs-navigation-scroll-before {
+			background: linear-gradient(to right, var(--d2l-branding-primary-color, var(--d2l-color-celestine)), transparent);
+			left: 0;
+		}
+		.d2l-labs-navigation-scroll-after {
+			background: linear-gradient(to left, var(--d2l-branding-primary-color, var(--d2l-color-celestine)), transparent);
+			right: 0;
+		}
+		/* Styles to ensure the right padding is respected when scrolling */
+		.d2l-labs-navigation-centerer {
+			line-height: 0;
+			position: relative;
+		}
+		.d2l-labs-navigation-gutters {
+			display: inline-block;
+			position: unset;
+			vertical-align: top;
+		}
+		@media (max-width: 615px) {
 			.d2l-labs-navigation-scroll-before,
 			.d2l-labs-navigation-scroll-after {
-				height: 100%;
-				max-height: 1.5rem; /* should match linear-background height */
-				pointer-events: none;
-				position: absolute;
-				top: 0;
-				width: 2.439%; /* should match gutter width */
-				z-index: 2;
-			}
-			.d2l-labs-navigation-scroll-before {
-				background: linear-gradient(to right, var(--d2l-branding-primary-color, var(--d2l-color-celestine)), transparent);
-				left: 0;
+				width: 15px;
 			}
+		}
+		@media (min-width: 1230px) {
+			.d2l-labs-navigation-scroll-before,
 			.d2l-labs-navigation-scroll-after {
-				background: linear-gradient(to left, var(--d2l-branding-primary-color, var(--d2l-color-celestine)), transparent);
-				right: 0;
+				width: 30px;
 			}
-			/* Styles to ensure the right padding is respected when scrolling */
-			.d2l-labs-navigation-centerer {
-				line-height: 0;
-				position: relative;
-			}
-			.d2l-labs-navigation-gutters {
-				display: inline-block;
-				position: unset;
-				vertical-align: top;
-			}
-			@media (max-width: 615px) {
-				.d2l-labs-navigation-scroll-before,
-				.d2l-labs-navigation-scroll-after {
-					width: 15px;
-				}
-			}
-			@media (min-width: 1230px) {
-				.d2l-labs-navigation-scroll-before,
-				.d2l-labs-navigation-scroll-after {
-					width: 30px;
-				}
-			}
-		`];
-	}
+		}
+	`];
 
 	constructor() {
 		super();

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

@@ -12,62 +12,58 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  */
 class NavigationButtonIcon 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 },
-			/**
-			 * Visually hides the highlight border when hovered/focused
-			 * @type {boolean}
-			 */
-			noHighlightBorder: { attribute: 'no-highlight-border', type: Boolean },
-			/**
-			 * 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 },
-			/**
-			 * Position of the tooltip
-			 * @type {'top'|'bottom'|'left'|'right'}
-			 */
-			tooltipPosition: { attribute: 'tooltip-position', type: String }
-		};
-	}
+	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 },
+		/**
+		 * Visually hides the highlight border when hovered/focused
+		 * @type {boolean}
+		 */
+		noHighlightBorder: { attribute: 'no-highlight-border', type: Boolean },
+		/**
+		 * 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 },
+		/**
+		 * Position of the tooltip
+		 * @type {'top'|'bottom'|'left'|'right'}
+		 */
+		tooltipPosition: { attribute: 'tooltip-position', type: String }
+	};
 
-	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();

package/src/components/navigation/navigation-dropdown-button-custom.js

@@ -5,24 +5,20 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 class NavigationDropdownButtonCustom extends DropdownOpenerMixin(LitElement) {
 
-	static get properties() {
-		return {
-			openerLabel: { type: String, attribute: 'opener-label' }
-		};
-	}
+	static properties = {
+		openerLabel: { type: String, attribute: 'opener-label' }
+	};
 
-	static get styles() {
-		return [highlightBorderStyles, highlightButtonStyles, css`
-			:host {
-				display: inline-block;
-				height: 100%;
-				position: relative;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-		`];
-	}
+	static styles = [highlightBorderStyles, highlightButtonStyles, css`
+		:host {
+			display: inline-block;
+			height: 100%;
+			position: relative;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+	`];
 
 	render() {
 		return html`

package/src/components/navigation/navigation-dropdown-button-icon.js

@@ -10,32 +10,28 @@ import { offscreenStyles } from '@brightspace-ui/core/components/offscreen/offsc
 
 class NavigationDropdownButtonIcon extends DropdownOpenerMixin(LitElement) {
 
-	static get properties() {
-		return {
-			icon: { type: String },
-			hasNotification: { attribute: 'has-notification', reflect: true, type: Boolean },
-			text: { type: String },
-			notificationText: { attribute: 'notification-text', type: String },
-			tooltipOffset: { attribute: 'tooltip-offset', type: Number }
-		};
-	}
+	static properties = {
+		icon: { type: String },
+		hasNotification: { attribute: 'has-notification', reflect: true, type: Boolean },
+		text: { type: String },
+		notificationText: { attribute: 'notification-text', type: String },
+		tooltipOffset: { attribute: 'tooltip-offset', type: Number }
+	};
 
-	static get styles() {
-		return [highlightBorderStyles, highlightButtonStyles, offscreenStyles, css`
-			:host {
-				display: inline-block;
-				height: 100%;
-				position: relative;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.icon-container {
-				display: inline-block;
-				position: relative;
-			}
-		`];
-	}
+	static styles = [highlightBorderStyles, highlightButtonStyles, offscreenStyles, css`
+		:host {
+			display: inline-block;
+			height: 100%;
+			position: relative;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.icon-container {
+			display: inline-block;
+			position: relative;
+		}
+	`];
 
 	constructor() {
 		super();