@brightspace-ui/core 3.268.2 → 3.269.1

package/components/backdrop/backdrop.js

@@ -41,7 +41,7 @@ class Backdrop extends LitElement {
 		_state: { type: String, reflect: true }
 	};
 
-	static styles = [ css`
+	static styles = [css`
 		:host {
 			background-color: var(--d2l-theme-backdrop-background-color);
 			height: 0;

package/components/button/button-move.js

@@ -87,7 +87,7 @@ class ButtonMove extends ThemeMixin(FocusMixin(LitElement)) {
 		sideToSide: { type: Boolean, attribute: 'side-to-side', reflect: true }
 	};
 
-	static styles = [ buttonStyles,
+	static styles = [buttonStyles,
 		css`
 			:host {
 				--d2l-button-move-background-color-focus: #ffffff;

package/components/button/button-split-item.js

@@ -16,7 +16,7 @@ class ButtonSplitItem extends PropertyRequiredMixin(MenuItemMixin(LitElement)) {
 		key: { type: String, required: true }
 	};
 
-	static styles = [ menuItemStyles,
+	static styles = [menuItemStyles,
 		css`
 			:host {
 				align-items: center;

package/components/button/button.js

@@ -27,7 +27,7 @@ class Button extends ButtonMixin(LitElement) {
 		primary: { type: Boolean, reflect: true }
 	};
 
-	static styles = [ labelStyles, buttonStyles,
+	static styles = [labelStyles, buttonStyles,
 		css`
 			:host {
 				display: inline-block;

package/components/menu/menu-item-selectable-styles.js

@@ -1,7 +1,7 @@
 import { css } from 'lit';
 import { menuItemStyles } from './menu-item-styles.js';
 
-export const menuItemSelectableStyles = [ menuItemStyles,
+export const menuItemSelectableStyles = [menuItemStyles,
 	css`
 		:host {
 			align-items: center;

package/components/object-property-list/object-property-list.js

@@ -65,7 +65,7 @@ class ObjectPropertyList extends LocalizeCoreElement(SkeletonMixin(LitElement))
 
 	_setItemSeparatorVisibility(slot) {
 		const slottedElements = slot.assignedElements();
-		const elements = slottedElements.length ? slottedElements : [ ...slot.children ];
+		const elements = slottedElements.length ? slottedElements : [...slot.children];
 		const filtered = elements.filter(item => item.tagName?.toLowerCase().includes('d2l-object-property-list-') && !item.hidden);
 
 		const lastIndex = filtered.length - 1;

package/components/page/page-divider-internal.js

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
 import { formatPercent } from '@brightspace-ui/intl';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 
 export const DIVIDER_WIDTH = 4;
@@ -88,7 +89,10 @@ class PageDivider extends PropertyRequiredMixin(LitElement) {
 	}
 
 	render() {
-		const currentSizePercent = formatPercent(Math.round(this.currentSize / this.maxSize) || 0);
+		let ariaValues = {};
+		if (this.maxSize > 0) {
+			ariaValues = { max: this.maxSize, min: 0, now: this.currentSize, text: formatPercent(this.currentSize / this.maxSize, { maximumFractionDigits: 0 }) };
+		}
 
 		return html`
 			<div
@@ -97,10 +101,10 @@ class PageDivider extends PropertyRequiredMixin(LitElement) {
 				tabindex="0"
 				aria-label="${this.label}"
 				aria-orientation="${this.panelType === 'panel' ? 'horizontal' : 'vertical'}"
-				aria-valuemax="${this.maxSize}"
-				aria-valuemin="0"
-				aria-valuenow="${this.currentSize}"
-				aria-valuetext="${currentSizePercent}"
+				aria-valuemax="${ifDefined(ariaValues.max)}"
+				aria-valuemin="${ifDefined(ariaValues.min)}"
+				aria-valuenow="${ifDefined(ariaValues.now)}"
+				aria-valuetext="${ifDefined(ariaValues.text)}"
 				@keydown="${this.#handleKeyDown}">
 			</div>
 		`;

package/components/paging/pageable-subscriber-mixin.js

@@ -25,7 +25,7 @@ export const PageableSubscriberMixin = superclass => class extends superclass {
 	}
 
 	_getPageableRegistries() {
-		return this.pageableFor ? this._pageableIdSubscriber.registries : [ this._pageableEventSubscriber.registry ];
+		return this.pageableFor ? this._pageableIdSubscriber.registries : [this._pageableEventSubscriber.registry];
 	}
 
 };

package/components/scroll-wrapper/scroll-wrapper.js

@@ -293,8 +293,8 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 		this._baseContainer = this.shadowRoot.querySelector('.d2l-scroll-wrapper-container');
 		this._container = this.customScrollers?.primary || this._baseContainer;
 		this._secondaryScrollers = this.customScrollers?.secondary || [];
-		if (this._secondaryScrollers.length === undefined) this._secondaryScrollers = [ this._secondaryScrollers ];
-		this._allScrollers = [ this._container, ...this._secondaryScrollers ];
+		if (this._secondaryScrollers.length === undefined) this._secondaryScrollers = [this._secondaryScrollers];
+		this._allScrollers = [this._container, ...this._secondaryScrollers];
 
 		if (this._container) {
 			this._container.classList.add('d2l-scroll-wrapper-focus');

package/components/skeleton/skeleton-mixin.js

@@ -175,7 +175,7 @@ export const SkeletonMixin = dedupeMixin(superclass => class extends superclass
 	};
 
 	static get styles() {
-		const styles = [ skeletonStyles ];
+		const styles = [skeletonStyles];
 		super.styles && styles.unshift(super.styles);
 		return styles;
 	}

package/components/tabs/tab-mixin.js

@@ -34,7 +34,7 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 	};
 
 	static get styles() {
-		const styles = [ css`
+		const styles = [css`
 			:host {
 				box-sizing: border-box;
 				display: inline-block;

package/components/tabs/tab.js

@@ -27,7 +27,7 @@ class Tab extends TabMixin(LitElement) {
 	};
 
 	static get styles() {
-		const styles = [ css`
+		const styles = [css`
 			.d2l-tab-text-inner-content {
 				--d2l-focus-ring-offset: 0;
 				display: flex;

package/helpers/prism.js

@@ -343,9 +343,9 @@ const getLanguageInfo = elem => {
 };
 
 const languageDependencies = {
-	arduino: [ 'cpp' ],
-	cpp: [ 'c' ],
-	racket: [ 'scheme' ]
+	arduino: ['cpp'],
+	cpp: ['c'],
+	racket: ['scheme']
 };
 
 const languagesLoaded = {

package/helpers/template-tags.js

@@ -5,7 +5,7 @@ export function set(strings, ...expressions) {
 	let w = Number.MAX_SAFE_INTEGER;
 	const emptyStart = strings[0].match(emptyStartRe);
 	if (emptyStart) {
-		strings = [ strings[0].replace(emptyStartRe, ''), ...strings.slice(1) ];
+		strings = [strings[0].replace(emptyStartRe, ''), ...strings.slice(1)];
 		strings[strings.length - 1] = strings.at(-1).replace(emptyEndRe, '');
 	}
 	strings

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.268.2",
+  "version": "3.269.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -55,6 +55,7 @@
     "@rollup/plugin-dynamic-import-vars": "^2",
     "@rollup/plugin-node-resolve": "^16",
     "@rollup/plugin-replace": "^6",
+    "@stylistic/eslint-plugin": "^5",
     "@web/dev-server": "^0.4",
     "chalk": "^5",
     "eslint": "^9",

package/components/inputs/sass/select.scss

@@ -1,96 +0,0 @@
-@use "../../colors/colors.scss";
-
-@mixin d2l-input-select() {
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-	background-origin: border-box;
-	background-position: center right 17px;
-	background-repeat: no-repeat;
-	background-size: 11px 7px;
-	border-radius: 0.3rem;
-	border-style: solid;
-	box-sizing: border-box;
-	color: colors.$d2l-color-ferrite;
-	display: inline-block;
-	font-family: inherit;
-	font-size: 0.8rem;
-	font-weight: 400;
-	height: auto;
-	letter-spacing: 0.02rem;
-	line-height: 1.2rem;
-	margin: 0;
-	max-height: calc(2rem + 2px);
-	vertical-align: middle;
-	&,
-	&:hover:disabled {
-		background-color: #ffffff;
-		border-color: colors.$d2l-color-galena;
-		border-width: 1px;
-		box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
-		padding: 0.4rem 0.75rem;
-	}
-	&,
-	&:disabled,
-	&:hover:disabled,
-	&:focus:disabled {
-		background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDExIDciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEgMmw0LjUgNE0xMCAyTDUuNSA2IiBzdHJva2U9IiM1NjVBNUMiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+");
-	}
-	&,
-	&:disabled,
-	&:hover:disabled,
-	&:focus:disabled {
-		padding-right: calc(2px + 0.8rem + 1px + 11px + 16px);
-	}
-	&:hover,
-	&:focus {
-		border-color: colors.$d2l-color-celestine;
-		border-width: 2px;
-		outline: none;
-		padding: calc(0.4rem - 1px) calc(0.75rem - 1px);
-		padding-right: calc(2px + 0.8rem + 1px + 11px + 16px - 1px);
-	}
-	&[aria-invalid="true"] {
-		background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDExIDciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEgMmw0LjUgNE0xMCAyTDUuNSA2IiBzdHJva2U9IiM1NjVBNUMiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+"), url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBmaWxsPSIjY2QyMDI2IiBkPSJNMTcuNzkgMTUuMTFsLTctMTRhMiAyIDAgMCAwLTMuNTggMGwtNyAxNGExLjk3NSAxLjk3NSAwIDAgMCAuMDkgMS45NEEyIDIgMCAwIDAgMiAxOGgxNGExLjk5NCAxLjk5NCAwIDAgMCAxLjctLjk1IDEuOTY3IDEuOTY3IDAgMCAwIC4wOS0xLjk0ek05IDE2YTEuNSAxLjUgMCAxIDEgMS41LTEuNUExLjUgMS41IDAgMCAxIDkgMTZ6bS45OC00LjgwNmExIDEgMCAwIDEtMS45NiAwbC0uOTktNUExIDEgMCAwIDEgOC4wMSA1aDEuOTgzYTEgMSAwIDAgMSAuOTggMS4xOTR6Ii8+Cjwvc3ZnPgo=");
-		background-position: center right 17px, center right calc(1px + 11px + 17px);
-		background-repeat: no-repeat, no-repeat;
-		background-size: 11px 7px, 0.8rem 0.8rem;
-		border-color: colors.$d2l-color-cinnabar;
-	}
-	&:disabled {
-		opacity: 0.5;
-	}
-	/* IE11 to prevent selection styling */
-	&:focus::-ms-value,
-	&:hover::-ms-value {
-		background-color: transparent;
-		color: colors.$d2l-color-ferrite;
-	}
-	/* IE11 to hide the native chevron */
-	&::-ms-expand {
-		display: none;
-	}
-	/* Prevents dotted outline when focused in Firefox */
-	&:-moz-focusring {
-		color: transparent;
-		text-shadow: 0 0 0 #000000;
-	}
-	[dir="rtl"] & {
-		background-position: center left 17px;
-		&,
-		&:disabled,
-		&:hover:disabled,
-		&:focus:disabled {
-			padding-left: calc(2px + 0.8rem + 1px + 11px + 16px);
-			padding-right: 0.75rem;
-		}
-		&:hover,
-		&:focus {
-			padding-left: calc(2px + 0.8rem + 1px + 11px + 16px - 1px);
-			padding-right: calc(0.75rem - 1px);
-		}
-		&[aria-invalid="true"] {
-			background-position: center left 17px, center left calc(1px + 11px + 17px);
-		}
-	}
-}