@brightspace-ui/core 3.268.0 → 3.268.1

package/components/tabs/tabs.js

@@ -37,196 +37,192 @@ function getOffsetLeft(tab, tabRect) {
  */
 class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))) {
 
-	static get properties() {
-		return {
-			/**
-			 * Limit the number of tabs to initially display
-			 * @type {number}
-			 */
-			maxToShow: { type: Number, attribute: 'max-to-show' },
-			/**
-			 * REQUIRED: ACCESSIBILITY: Accessible text for the tablist
-			 * @type {string}
-			 */
-			text: { type: String },
-			_allowScrollNext: { type: Boolean },
-			_allowScrollPrevious: { type: Boolean },
-			_defaultSlotBehavior: { state: true },
-			_maxWidth: { type: Number },
-			_scrollCollapsed: { type: Boolean },
-			_state: { type: String },
-			_tabInfos: { type: Array },
-			_translationValue: {}
-		};
-	}
+	static properties = {
+		/**
+		 * Limit the number of tabs to initially display
+		 * @type {number}
+		 */
+		maxToShow: { type: Number, attribute: 'max-to-show' },
+		/**
+		 * REQUIRED: ACCESSIBILITY: Accessible text for the tablist
+		 * @type {string}
+		 */
+		text: { type: String },
+		_allowScrollNext: { type: Boolean },
+		_allowScrollPrevious: { type: Boolean },
+		_defaultSlotBehavior: { state: true },
+		_maxWidth: { type: Number },
+		_scrollCollapsed: { type: Boolean },
+		_state: { type: String },
+		_tabInfos: { type: Array },
+		_translationValue: {}
+	};
+
+	static styles = [super.styles, bodyCompactStyles, css`
+		:host {
+			--d2l-tabs-background-color: var(--d2l-theme-background-color-base);
+			box-sizing: border-box;
+			display: block;
+			margin-bottom: 1.2rem;
+		}
+		.d2l-tabs-layout {
+			border-bottom: 1px solid var(--d2l-theme-border-color-subtle);
+			display: none;
+			max-height: 0;
+			opacity: 0;
+			transform: translateY(-10px);
+			-webkit-transition: max-height 200ms ease-out, transform 200ms ease-out, opacity 200ms ease-out;
+			transition: max-height 200ms ease-out, transform 200ms ease-out, opacity 200ms ease-out;
+			width: 100%;
+		}
+		.d2l-tabs-layout-anim {
+			display: flex;
+		}
+		.d2l-tabs-layout-shown {
+			display: flex;
+			max-height: 60px;
+			opacity: 1;
+			transform: none;
+		}
+		.d2l-tabs-container {
+			box-sizing: border-box;
+			flex: auto;
+			margin-left: -3px;
+			padding-left: 3px;
+			position: relative;
+			-webkit-transition: max-width 200ms ease-in;
+			transition: max-width 200ms ease-in;
+			${getOverflowDeclarations({ textOverflow: 'clip' })}
+		}
+		.d2l-tabs-container-ext {
+			flex: none;
+			padding-inline: 4px 0;
+		}
+		.d2l-tabs-container-list {
+			display: flex;
+			position: relative;
+			-webkit-transition: transform 200ms ease-out;
+			transition: transform 200ms ease-out;
+			white-space: nowrap;
+		}
+		.d2l-tabs-scroll-previous-container,
+		.d2l-tabs-scroll-next-container {
+			background-color: var(--d2l-tabs-background-color);
+			box-shadow: 0 0 12px 18px var(--d2l-tabs-background-color);
+			clip-path: rect(0% 200% 100% -100%);
+			display: none;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			z-index: 1;
+		}
+		.d2l-tabs-scroll-previous-container {
+			inset-inline-start: 0;
+			margin-inline: 4px 0;
+		}
+		.d2l-tabs-container[data-allow-scroll-previous] > .d2l-tabs-scroll-previous-container {
+			display: inline-block;
+		}
+		.d2l-tabs-scroll-next-container {
+			inset-inline-end: 0;
+			margin-inline: 0 4px;
+		}
+		.d2l-tabs-container[data-allow-scroll-next] > .d2l-tabs-scroll-next-container {
+			display: inline-block;
+		}
+		.d2l-tabs-scroll-button {
+			background-color: transparent;
+			border: 1px solid transparent;
+			border-radius: 15px;
+			box-sizing: border-box;
+			cursor: pointer;
+			display: inline-block;
+			height: 30px;
+			margin: 0;
+			outline: none;
+			padding: 0;
+			transform: translateY(10px);
+			width: 30px;
+		}
+		.d2l-tabs-scroll-button[disabled] {
+			cursor: default;
+			opacity: 0.5;
+		}
+		.d2l-tabs-scroll-button::-moz-focus-inner {
+			border: 0;
+		}
+		.d2l-tabs-scroll-button[disabled]:hover,
+		.d2l-tabs-scroll-button[disabled]:${unsafeCSS(getFocusPseudoClass())} {
+			background-color: transparent;
+		}
+		.d2l-tabs-scroll-button:hover,
+		.d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
+			background-color: var(--d2l-theme-background-color-interactive-tertiary-hover);
+		}
+		${getFocusRingStyles('.d2l-tabs-scroll-button')}
+		:host([skeleton]) .d2l-tabs-scroll-button {
+			visibility: hidden;
+		}
+		.d2l-panels-container-no-whitespace ::slotted(*) {
+			margin-top: 0;
+			-webkit-transition: margin-top 200ms ease-out;
+			transition: margin-top 200ms ease-out;
+		}
+
+		d2l-tab-internal, ::slotted([role="tab"]) {
+			-webkit-transition: max-width 200ms ease-out, opacity 200ms ease-out, transform 200ms ease-out;
+			transition: max-width 200ms ease-out, opacity 200ms ease-out, transform 200ms ease-out;
+		}
+		d2l-tab-internal[data-state="adding"],
+		d2l-tab-internal[data-state="removing"],
+		::slotted([role="tab"][data-state="adding"]),
+		::slotted([role="tab"][data-state="removing"]) {
+			max-width: 0;
+			opacity: 0;
+			transform: translateY(20px);
+		}
+
+		@media (prefers-reduced-motion: reduce) {
 
-	static get styles() {
-		return [super.styles, bodyCompactStyles, css`
-			:host {
-				--d2l-tabs-background-color: var(--d2l-theme-background-color-base);
-				box-sizing: border-box;
-				display: block;
-				margin-bottom: 1.2rem;
-			}
 			.d2l-tabs-layout {
-				border-bottom: 1px solid var(--d2l-theme-border-color-subtle);
-				display: none;
-				max-height: 0;
-				opacity: 0;
-				transform: translateY(-10px);
-				-webkit-transition: max-height 200ms ease-out, transform 200ms ease-out, opacity 200ms ease-out;
-				transition: max-height 200ms ease-out, transform 200ms ease-out, opacity 200ms ease-out;
-				width: 100%;
-			}
-			.d2l-tabs-layout-anim {
-				display: flex;
-			}
-			.d2l-tabs-layout-shown {
-				display: flex;
-				max-height: 60px;
-				opacity: 1;
-				transform: none;
+				-webkit-transition: none;
+				transition: none;
 			}
 			.d2l-tabs-container {
-				box-sizing: border-box;
-				flex: auto;
-				margin-left: -3px;
-				padding-left: 3px;
-				position: relative;
-				-webkit-transition: max-width 200ms ease-in;
-				transition: max-width 200ms ease-in;
-				${getOverflowDeclarations({ textOverflow: 'clip' })}
-			}
-			.d2l-tabs-container-ext {
-				flex: none;
-				padding-inline: 4px 0;
+				-webkit-transition: none;
+				transition: none;
 			}
 			.d2l-tabs-container-list {
-				display: flex;
-				position: relative;
-				-webkit-transition: transform 200ms ease-out;
-				transition: transform 200ms ease-out;
-				white-space: nowrap;
-			}
-			.d2l-tabs-scroll-previous-container,
-			.d2l-tabs-scroll-next-container {
-				background-color: var(--d2l-tabs-background-color);
-				box-shadow: 0 0 12px 18px var(--d2l-tabs-background-color);
-				clip-path: rect(0% 200% 100% -100%);
-				display: none;
-				height: 100%;
-				position: absolute;
-				top: 0;
-				z-index: 1;
-			}
-			.d2l-tabs-scroll-previous-container {
-				inset-inline-start: 0;
-				margin-inline: 4px 0;
-			}
-			.d2l-tabs-container[data-allow-scroll-previous] > .d2l-tabs-scroll-previous-container {
-				display: inline-block;
-			}
-			.d2l-tabs-scroll-next-container {
-				inset-inline-end: 0;
-				margin-inline: 0 4px;
-			}
-			.d2l-tabs-container[data-allow-scroll-next] > .d2l-tabs-scroll-next-container {
-				display: inline-block;
-			}
-			.d2l-tabs-scroll-button {
-				background-color: transparent;
-				border: 1px solid transparent;
-				border-radius: 15px;
-				box-sizing: border-box;
-				cursor: pointer;
-				display: inline-block;
-				height: 30px;
-				margin: 0;
-				outline: none;
-				padding: 0;
-				transform: translateY(10px);
-				width: 30px;
-			}
-			.d2l-tabs-scroll-button[disabled] {
-				cursor: default;
-				opacity: 0.5;
-			}
-			.d2l-tabs-scroll-button::-moz-focus-inner {
-				border: 0;
-			}
-			.d2l-tabs-scroll-button[disabled]:hover,
-			.d2l-tabs-scroll-button[disabled]:${unsafeCSS(getFocusPseudoClass())} {
-				background-color: transparent;
-			}
-			.d2l-tabs-scroll-button:hover,
-			.d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
-				background-color: var(--d2l-theme-background-color-interactive-tertiary-hover);
-			}
-			${getFocusRingStyles('.d2l-tabs-scroll-button')}
-			:host([skeleton]) .d2l-tabs-scroll-button {
-				visibility: hidden;
+				-webkit-transition: none;
+				transition: none;
 			}
 			.d2l-panels-container-no-whitespace ::slotted(*) {
-				margin-top: 0;
-				-webkit-transition: margin-top 200ms ease-out;
-				transition: margin-top 200ms ease-out;
+				-webkit-transition: none;
+				transition: none;
 			}
-
 			d2l-tab-internal, ::slotted([role="tab"]) {
-				-webkit-transition: max-width 200ms ease-out, opacity 200ms ease-out, transform 200ms ease-out;
-				transition: max-width 200ms ease-out, opacity 200ms ease-out, transform 200ms ease-out;
-			}
-			d2l-tab-internal[data-state="adding"],
-			d2l-tab-internal[data-state="removing"],
-			::slotted([role="tab"][data-state="adding"]),
-			::slotted([role="tab"][data-state="removing"]) {
-				max-width: 0;
-				opacity: 0;
-				transform: translateY(20px);
+				-webkit-transition: none;
+				transition: none;
 			}
 
-			@media (prefers-reduced-motion: reduce) {
-
-				.d2l-tabs-layout {
-					-webkit-transition: none;
-					transition: none;
-				}
-				.d2l-tabs-container {
-					-webkit-transition: none;
-					transition: none;
-				}
-				.d2l-tabs-container-list {
-					-webkit-transition: none;
-					transition: none;
-				}
-				.d2l-panels-container-no-whitespace ::slotted(*) {
-					-webkit-transition: none;
-					transition: none;
-				}
-				d2l-tab-internal, ::slotted([role="tab"]) {
-					-webkit-transition: none;
-					transition: none;
-				}
+		}
 
+		@media (prefers-contrast: more) {
+			.d2l-tabs-scroll-previous-container,
+			.d2l-tabs-scroll-next-container {
+				margin-inline: 0;
+				padding-inline: 4px;
 			}
-
-			@media (prefers-contrast: more) {
-				.d2l-tabs-scroll-previous-container,
-				.d2l-tabs-scroll-next-container {
-					margin-inline: 0;
-					padding-inline: 4px;
-				}
-				.d2l-tabs-scroll-next-container {
-					border-inline-start: 1px solid var(--d2l-theme-border-color-subtle);
-					padding-inline-start: 11px;
-				}
-				.d2l-tabs-scroll-previous-container {
-					border-inline-end: 1px solid var(--d2l-theme-border-color-subtle);
-					padding-inline-end: 11px;
-				}
+			.d2l-tabs-scroll-next-container {
+				border-inline-start: 1px solid var(--d2l-theme-border-color-subtle);
+				padding-inline-start: 11px;
 			}
-		`];
-	}
+			.d2l-tabs-scroll-previous-container {
+				border-inline-end: 1px solid var(--d2l-theme-border-color-subtle);
+				padding-inline-end: 11px;
+			}
+		}
+	`];
 
 	constructor() {
 		super();

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

@@ -44,117 +44,113 @@ const focusSelector = isHasSelectorSupported() && isFocusVisibleSupported() ?
 
 export const TagListItemMixin = superclass => class extends LocalizeCoreElement(PropertyRequiredMixin(superclass)) {
 
-	static get properties() {
-		return {
-			/**
-			 * Enables the option to clear a tag list item. The `d2l-tag-list-item-clear` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.
-			 * @type {boolean}
-			 */
-			clearable: { type: Boolean },
-			/**
-			 * REQUIRED if clearable. Acts as a unique identifier for the tag
-			 * @type {string}
-			 */
-			key: { type: String },
-			/**
-			 * @ignore
-			 */
-			keyboardTooltipItem: { type: Boolean, attribute: 'keyboard-tooltip-item' },
-			/**
-			 * @ignore
-			 */
-			_plainText: {
-				state: true,
-				required: {
-					message: (_value, elem) => `TagListItemMixin: "${elem.tagName.toLowerCase()}" called "_renderTag()" with empty "plainText" option`
-				}
-			},
-			_displayKeyboardTooltip: { state: true }
-		};
-	}
-
-	static get styles() {
-		return [labelStyles, heading4Styles, css`
-			:host {
-				display: grid;
-				max-width: 100%;
-				outline: none;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.tag-list-item-container {
-				--d2l-focus-ring-offset: -2px;
-				align-items: center;
-				background-color: var(--d2l-theme-background-color-interactive-faint-default);
-				border-radius: 6px;
-				box-shadow: var(--d2l-theme-shadow-attached);
-				box-sizing: border-box;
-				color: var(--d2l-theme-text-color-static-standard);
-				cursor: pointer;
-				display: flex;
-				line-height: 1rem;
-				max-width: 320px;
-				min-width: 0;
-				outline: 1px solid var(--d2l-theme-border-color-subtle);
-				outline-offset: -1px;
-				transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
-				white-space: nowrap;
-			}
-			.tag-list-item-container.tag-list-item-container-clearable {
-				padding-inline-end: 0.2rem;
-			}
-			.tag-list-item-content {
-				outline: none;
-				overflow: hidden;
-				padding: 0.25rem 0.6rem;
-				text-overflow: ellipsis;
-			}
-			${getFocusRingStyles(() => focusSelector)}
-			:host(:hover) .tag-list-item-container,
-			${unsafeCSS(focusSelector)} {
-				background-color: var(--d2l-theme-background-color-interactive-faint-hover);
-			}
-			:host(:hover) .tag-list-item-container:not(${unsafeCSS(focusSelector)}) {
-				outline-color: var(--d2l-theme-border-color-standard);
+	static properties = {
+		/**
+		 * Enables the option to clear a tag list item. The `d2l-tag-list-item-clear` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.
+		 * @type {boolean}
+		 */
+		clearable: { type: Boolean },
+		/**
+		 * REQUIRED if clearable. Acts as a unique identifier for the tag
+		 * @type {string}
+		 */
+		key: { type: String },
+		/**
+		 * @ignore
+		 */
+		keyboardTooltipItem: { type: Boolean, attribute: 'keyboard-tooltip-item' },
+		/**
+		 * @ignore
+		 */
+		_plainText: {
+			state: true,
+			required: {
+				message: (_value, elem) => `TagListItemMixin: "${elem.tagName.toLowerCase()}" called "_renderTag()" with empty "plainText" option`
 			}
+		},
+		_displayKeyboardTooltip: { state: true }
+	};
 
-			@media (prefers-reduced-motion: reduce) {
-				.tag-list-item-container {
-					transition: none;
-				}
-			}
-			.d2l-tag-list-item-clear-button {
-				margin-inline-start: calc(-0.6rem + 3px);
-			}
-			d2l-button-icon {
-				--d2l-button-icon-fill-color: var(--d2l-color-chromite);
-				--d2l-button-icon-min-height: 1.2rem;
-				--d2l-button-icon-min-width: 1.2rem;
-			}
-			d2l-button-icon:hover {
-				--d2l-button-icon-fill-color: var(--d2l-theme-icon-color-standard);
-			}
-			d2l-tooltip ul {
-				list-style: none;
-				margin-bottom: 0;
-				margin-top: 0.2rem;
-				padding: 0;
-			}
-			.d2l-tag-list-item-tooltip-title-key {
-				font-weight: 600;
-			}
-			.d2l-heading-4 {
-				margin: 0 0 0.5rem 0;
+	static styles = [labelStyles, heading4Styles, css`
+		:host {
+			display: grid;
+			max-width: 100%;
+			outline: none;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.tag-list-item-container {
+			--d2l-focus-ring-offset: -2px;
+			align-items: center;
+			background-color: var(--d2l-theme-background-color-interactive-faint-default);
+			border-radius: 6px;
+			box-shadow: var(--d2l-theme-shadow-attached);
+			box-sizing: border-box;
+			color: var(--d2l-theme-text-color-static-standard);
+			cursor: pointer;
+			display: flex;
+			line-height: 1rem;
+			max-width: 320px;
+			min-width: 0;
+			outline: 1px solid var(--d2l-theme-border-color-subtle);
+			outline-offset: -1px;
+			transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
+			white-space: nowrap;
+		}
+		.tag-list-item-container.tag-list-item-container-clearable {
+			padding-inline-end: 0.2rem;
+		}
+		.tag-list-item-content {
+			outline: none;
+			overflow: hidden;
+			padding: 0.25rem 0.6rem;
+			text-overflow: ellipsis;
+		}
+		${getFocusRingStyles(() => focusSelector)}
+		:host(:hover) .tag-list-item-container,
+		${unsafeCSS(focusSelector)} {
+			background-color: var(--d2l-theme-background-color-interactive-faint-hover);
+		}
+		:host(:hover) .tag-list-item-container:not(${unsafeCSS(focusSelector)}) {
+			outline-color: var(--d2l-theme-border-color-standard);
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.tag-list-item-container {
+				transition: none;
 			}
-			@media (prefers-contrast: more) {
-				:host(:hover) .tag-list-item-container {
-					outline-offset: -2px;
-					outline-width: 2px;
-				}
+		}
+		.d2l-tag-list-item-clear-button {
+			margin-inline-start: calc(-0.6rem + 3px);
+		}
+		d2l-button-icon {
+			--d2l-button-icon-fill-color: var(--d2l-color-chromite);
+			--d2l-button-icon-min-height: 1.2rem;
+			--d2l-button-icon-min-width: 1.2rem;
+		}
+		d2l-button-icon:hover {
+			--d2l-button-icon-fill-color: var(--d2l-theme-icon-color-standard);
+		}
+		d2l-tooltip ul {
+			list-style: none;
+			margin-bottom: 0;
+			margin-top: 0.2rem;
+			padding: 0;
+		}
+		.d2l-tag-list-item-tooltip-title-key {
+			font-weight: 600;
+		}
+		.d2l-heading-4 {
+			margin: 0 0 0.5rem 0;
+		}
+		@media (prefers-contrast: more) {
+			:host(:hover) .tag-list-item-container {
+				outline-offset: -2px;
+				outline-width: 2px;
 			}
-		`];
-	}
+		}
+	`];
 
 	constructor() {
 		super();

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

@@ -3,21 +3,19 @@ import { TagListItemMixin } from './tag-list-item-mixin.js';
 
 class TagListItem extends TagListItemMixin(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * REQUIRED: Text to display
-			 * @type {string}
-			 */
-			text: { type: String },
-			/**
-			 * Optional: Text to display in tooltip.
-			 * Tooltip will also include text property value if truncated.
-			 * @type {string}
-			 */
-			description: { type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * REQUIRED: Text to display
+		 * @type {string}
+		 */
+		text: { type: String },
+		/**
+		 * Optional: Text to display in tooltip.
+		 * Tooltip will also include text property value if truncated.
+		 * @type {string}
+		 */
+		description: { type: String }
+	};
 
 	render() {
 		return this._renderTag(this.text, {