@brightspace-ui/labs 2.56.0 → 2.56.2

package/demo/components/ou-filter/ouFilterDemoPage.js

@@ -16,22 +16,20 @@ function parseHash(hash) {
 /* eslint-disable no-console */
 class OuFilterDemoPage extends MobxLitElement {
 
-	static get styles() {
-		return [
-			css`
-				:host {
-					display: inline-block;
-				}
-				div {
-					padding: 30px;
-				}
-				label {
-					display: block;
-					margin-top: 25px;
-				}
-			`
-		];
-	}
+	static styles = [
+		css`
+			:host {
+				display: inline-block;
+			}
+			div {
+				padding: 30px;
+			}
+			label {
+				display: block;
+				margin-top: 25px;
+			}
+		`
+	];
 
 	constructor() {
 		super();

package/package.json

@@ -80,7 +80,7 @@
     "@web/dev-server": "^0.4",
     "@web/rollup-plugin-html": "^3",
     "eslint": "^9",
-    "eslint-config-brightspace": "^3",
+    "eslint-config-brightspace": "^4",
     "glob-all": "^3",
     "messageformat-validator": "^3.0.0-beta.5",
     "rollup": "^4",
@@ -96,7 +96,8 @@
     "/demo/components/ou-filter/*.js"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
     "@adobe/lit-mobx": "^2",
@@ -111,5 +112,5 @@
     "parse-srt": "^1.0.0-alpha",
     "webvtt-parser": "^2"
   },
-  "version": "2.56.0"
+  "version": "2.56.2"
 }

package/src/components/accessibility-disability-simulator/accessibility-disability-simulator.js

@@ -23,81 +23,77 @@ const otherTypes = Object.entries(DISABILITY_TYPES).filter(value => !value[0].in
 
 class AccessibilityDisabilitySimulator extends LocalizeLabsElement(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * The level of blurriness when the low-vision filter is being used, should range between 1 and 100
-			 * @type {Number}
-			 */
-			blurLevel: { type: Number, attribute: 'blur-level', reflect: true },
-			/**
-			 * The type of disability to simulate
-			 * @type {'no-vision'|'low-vision'|'keyboard-only'|'colorblind-achromatopsia'|'colorblind-deuteranopia'|'colorblind-protanopia'|'colorblind-tritanopia'}
-			 */
-			disabilityType: { type: String, attribute: 'disability-type', reflect: true },
-			/**
-			 * Whether or not the alert should be shown
-			 * @type {Boolean}
-			 */
-			hideAlert: { type: Boolean, attribute: 'hide-alert' },
-			/**
-			 * Whether or not to show the disability type selection and blur level controls
-			 * @type {Boolean}
-			 */
-			hideControls: { type: Boolean, attribute: 'hide-controls' }
-		};
-	}
+	static properties = {
+		/**
+		 * The level of blurriness when the low-vision filter is being used, should range between 1 and 100
+		 * @type {Number}
+		 */
+		blurLevel: { type: Number, attribute: 'blur-level', reflect: true },
+		/**
+		 * The type of disability to simulate
+		 * @type {'no-vision'|'low-vision'|'keyboard-only'|'colorblind-achromatopsia'|'colorblind-deuteranopia'|'colorblind-protanopia'|'colorblind-tritanopia'}
+		 */
+		disabilityType: { type: String, attribute: 'disability-type', reflect: true },
+		/**
+		 * Whether or not the alert should be shown
+		 * @type {Boolean}
+		 */
+		hideAlert: { type: Boolean, attribute: 'hide-alert' },
+		/**
+		 * Whether or not to show the disability type selection and blur level controls
+		 * @type {Boolean}
+		 */
+		hideControls: { type: Boolean, attribute: 'hide-controls' }
+	};
+
+	static styles = [bodyCompactStyles, bodyStandardStyles, offscreenStyles, selectStyles, css`
+		.simulator-controls {
+			align-items: center;
+			display: flex;
+			gap: 0.5rem;
+			margin-bottom: 1rem;
+		}
 
-	static get styles() {
-		return [ bodyCompactStyles, bodyStandardStyles, offscreenStyles, selectStyles, css`
-			.simulator-controls {
-				align-items: center;
-				display: flex;
-				gap: 0.5rem;
-				margin-bottom: 1rem;
-			}
-
-			.low-vision-slider {
-				align-items: center;
-				display: flex;
-				gap: 0.5rem;
-			}
-
-			.alert-message {
-				display: inline-block;
-				margin-bottom: 1rem;
-				padding: 0.5rem;
-			}
-
-			.svg-filter {
-				display: none;
-			}
-
-			:host([disability-type="keyboard-only"]) .wrapper-slot {
-				pointer-events: none;
-			}
-
-			:host([disability-type="no-vision"]) .wrapper-slot {
-				filter: grayscale(1);
-			}
-
-			:host([disability-type="colorblind-achromatopsia"]) .wrapper-slot {
-				filter: grayscale(1);
-			}
-
-			:host([disability-type="colorblind-deuteranopia"]) .wrapper-slot {
-				filter: url("#deuteranopia");
-			}
-
-			:host([disability-type="colorblind-protanopia"]) .wrapper-slot {
-				filter: url("#protanopia");
-			}
-
-			:host([disability-type="colorblind-tritanopia"]) .wrapper-slot {
-				filter: url("#tritanopia");
-			}
-		` ];
-	}
+		.low-vision-slider {
+			align-items: center;
+			display: flex;
+			gap: 0.5rem;
+		}
+
+		.alert-message {
+			display: inline-block;
+			margin-bottom: 1rem;
+			padding: 0.5rem;
+		}
+
+		.svg-filter {
+			display: none;
+		}
+
+		:host([disability-type="keyboard-only"]) .wrapper-slot {
+			pointer-events: none;
+		}
+
+		:host([disability-type="no-vision"]) .wrapper-slot {
+			filter: grayscale(1);
+		}
+
+		:host([disability-type="colorblind-achromatopsia"]) .wrapper-slot {
+			filter: grayscale(1);
+		}
+
+		:host([disability-type="colorblind-deuteranopia"]) .wrapper-slot {
+			filter: url("#deuteranopia");
+		}
+
+		:host([disability-type="colorblind-protanopia"]) .wrapper-slot {
+			filter: url("#protanopia");
+		}
+
+		:host([disability-type="colorblind-tritanopia"]) .wrapper-slot {
+			filter: url("#tritanopia");
+		}
+	`];
 
 	constructor() {
 		super();

package/src/components/accordion/accordion-collapse.js

@@ -6,172 +6,169 @@ import { findComposedAncestor, isComposedAncestor } from '@brightspace-ui/core/h
 import { offscreenStyles } from '@brightspace-ui/core/components/offscreen/offscreen.js';
 
 class LabsAccordionCollapse extends LitElement {
-	static get properties() {
-		return {
-			/**
-			 * Label. Does not apply title to entire accordion
-			 */
-			label: { type: String },
-			/**
-			 * Header text hidden on the screen, but to be read by a screen reader
-			 */
-			screenReaderHeaderText: { type: String, attribute: 'screen-reader-header-text' },
-			/**
-			 * Corresponds to the iron-collapse's noAnimation property.
-			 */
-			noAnimation: { type: Boolean, attribute: 'no-animation' },
-			/**
-			 * Whether currently expanded.
-			 */
-			opened: { type: Boolean, reflect: true },
-			/**
-			 * The icon when collapsed.
-			 */
-			expandIcon: { type: String, attribute: 'expand-icon' },
-			/**
-			 * The icon when expanded.
-			 */
-			collapseIcon: { type: String, attribute: 'collapse-icon' },
-			/**
-			 * Whether to hide the expand/collapse icon.
-			 */
-			noIcons: { type: Boolean, attribute: 'no-icons' },
-			/**
-			 * Whether or not to use flex layout.
-			 */
-			flex: { type: Boolean, reflect: true },
-			/**
-			 * Whether or not to add extra padding for icon.
-			 */
-			iconHasPadding: { type: Boolean, attribute: 'icon-has-padding', reflect: true },
-			/**
-			 * Whether or not to add a border between the header and the content.
-			 */
-			headerBorder: { type: Boolean, attribute: 'header-border' },
-			/**
-			 * Whether the accordion's expand/collapse function is disabled.
-			 */
-			disabled: { type: Boolean, reflect: true },
-			/**
-			 * Whether or not to disable default focus styles
-			 */
-			disableDefaultTriggerFocus: { type: Boolean, attribute: 'disable-default-trigger-focus', reflect: true },
-			/**
-			 * Whether or not the header contains an interactive element inside it (e.g. clickable)
-			 */
-			headerHasInteractiveContent: { type: Boolean, attribute: 'header-has-interactive-content', reflect: true },
-			/**
-			 * Listener for state changes.
-			 */
-			_boundListener: { type: Function, attribute: '_bound-listener' },
-			/**
-			 * The current state of the accordion (opened, closed)
-			 */
-			_state: { type: String, reflect: true }
-		};
-	}
 
-	static get styles() {
-		return [offscreenStyles, css`
-	:host {
-		display: block;
-	}
-	#interactive-header-content {
-		align-items: center;
-		display: flex;
-	}
-	#trigger {
-		align-items: center;
-		display: flex;
-		text-decoration: none;
-	}
-	#trigger:focus-visible {
-		outline-offset: 3px;
-	}
-	#trigger[data-border] {
-		border-bottom: solid 1px var(--d2l-color-corundum);
-		margin-bottom: 0.4rem;
-		padding-bottom: 0.4rem;
-	}
-	#trigger, #trigger:visited, #trigger:hover, #trigger:active {
-		color: inherit;
-	}
-	:host([flex]) .collapse-title {
-		flex: 1;
-		flex-basis: 0.000000001px;
-		overflow: hidden;
-	}
-	:host([icon-has-padding]) d2l-icon {
-		padding-left: 1.25rem;
-		padding-right: 0;
-	}
-	:host([icon-has-padding][dir="rtl"]) d2l-icon {
-		padding-left: 0;
-		padding-right: 1.25rem;
-	}
-	:host([flex][icon-has-padding]) d2l-icon {
-		padding-left: 0;
-		padding-right: 1.25rem;
-	}
-	:host([flex][icon-has-padding][dir="rtl"]) d2l-icon {
-		padding-left: 1.25rem;
-		padding-right: 0;
-	}
-	.content {
-		height: auto;
-		margin: -1px;
-		padding: 1px;
-		position: relative;
-	}
-	.summary {
-		transition: opacity 500ms ease;
-	}
-	:host([_state="closing"]) .content,
-	:host([_state="opening"]) .content {
-		overflow: hidden;
-	}
-	:host([_state="closed"]) .summary,
-	:host([_state="closing"]) .summary {
-		transition-delay: 500ms;
-	}
-	:host([_state="opening"]) .summary,
-	:host([_state="opened"]) .summary {
-		opacity: 0;
-	}
-	:host([_state="closing"]) .summary,
-	:host([_state="opening"]) .summary,
-	:host([_state="opened"]) .summary {
-		pointer-events: none;
-		position: absolute;
-	}
-	:host([_state="closing"]) .summary,
-	:host([_state="opened"]) .summary {
-		transition-property: none;
-	}
-	:host([disabled]) a {
-		cursor: default;
-	}
-	:host([disabled]) d2l-icon {
-		color: var(--d2l-color-chromite);
-	}
-	:host([disable-default-trigger-focus]) #trigger:focus {
-		outline: none;
-	}
+	static properties = {
+		/**
+		 * Label. Does not apply title to entire accordion
+		 */
+		label: { type: String },
+		/**
+		 * Header text hidden on the screen, but to be read by a screen reader
+		 */
+		screenReaderHeaderText: { type: String, attribute: 'screen-reader-header-text' },
+		/**
+		 * Corresponds to the iron-collapse's noAnimation property.
+		 */
+		noAnimation: { type: Boolean, attribute: 'no-animation' },
+		/**
+		 * Whether currently expanded.
+		 */
+		opened: { type: Boolean, reflect: true },
+		/**
+		 * The icon when collapsed.
+		 */
+		expandIcon: { type: String, attribute: 'expand-icon' },
+		/**
+		 * The icon when expanded.
+		 */
+		collapseIcon: { type: String, attribute: 'collapse-icon' },
+		/**
+		 * Whether to hide the expand/collapse icon.
+		 */
+		noIcons: { type: Boolean, attribute: 'no-icons' },
+		/**
+		 * Whether or not to use flex layout.
+		 */
+		flex: { type: Boolean, reflect: true },
+		/**
+		 * Whether or not to add extra padding for icon.
+		 */
+		iconHasPadding: { type: Boolean, attribute: 'icon-has-padding', reflect: true },
+		/**
+		 * Whether or not to add a border between the header and the content.
+		 */
+		headerBorder: { type: Boolean, attribute: 'header-border' },
+		/**
+		 * Whether the accordion's expand/collapse function is disabled.
+		 */
+		disabled: { type: Boolean, reflect: true },
+		/**
+		 * Whether or not to disable default focus styles
+		 */
+		disableDefaultTriggerFocus: { type: Boolean, attribute: 'disable-default-trigger-focus', reflect: true },
+		/**
+		 * Whether or not the header contains an interactive element inside it (e.g. clickable)
+		 */
+		headerHasInteractiveContent: { type: Boolean, attribute: 'header-has-interactive-content', reflect: true },
+		/**
+		 * Listener for state changes.
+		 */
+		_boundListener: { type: Function, attribute: '_bound-listener' },
+		/**
+		 * The current state of the accordion (opened, closed)
+		 */
+		_state: { type: String, reflect: true }
+	};
 
-	:host([header-has-interactive-content]) #header-container {
-		display: grid;
-		grid-template-columns: auto;
-		grid-template-rows: auto;
-	}
-	:host([header-has-interactive-content]) .header-grid-item {
-		grid-column: 1;
-		grid-row: 1;
-	}
-	:host([header-has-interactive-content]) #interactive-header-content {
-		cursor: pointer;
-	}
-		`];
-	}
+	static styles = [offscreenStyles, css`
+		:host {
+			display: block;
+		}
+		#interactive-header-content {
+			align-items: center;
+			display: flex;
+		}
+		#trigger {
+			align-items: center;
+			display: flex;
+			text-decoration: none;
+		}
+		#trigger:focus-visible {
+			outline-offset: 3px;
+		}
+		#trigger[data-border] {
+			border-bottom: solid 1px var(--d2l-color-corundum);
+			margin-bottom: 0.4rem;
+			padding-bottom: 0.4rem;
+		}
+		#trigger, #trigger:visited, #trigger:hover, #trigger:active {
+			color: inherit;
+		}
+		:host([flex]) .collapse-title {
+			flex: 1;
+			flex-basis: 0.000000001px;
+			overflow: hidden;
+		}
+		:host([icon-has-padding]) d2l-icon {
+			padding-left: 1.25rem;
+			padding-right: 0;
+		}
+		:host([icon-has-padding][dir="rtl"]) d2l-icon {
+			padding-left: 0;
+			padding-right: 1.25rem;
+		}
+		:host([flex][icon-has-padding]) d2l-icon {
+			padding-left: 0;
+			padding-right: 1.25rem;
+		}
+		:host([flex][icon-has-padding][dir="rtl"]) d2l-icon {
+			padding-left: 1.25rem;
+			padding-right: 0;
+		}
+		.content {
+			height: auto;
+			margin: -1px;
+			padding: 1px;
+			position: relative;
+		}
+		.summary {
+			transition: opacity 500ms ease;
+		}
+		:host([_state="closing"]) .content,
+		:host([_state="opening"]) .content {
+			overflow: hidden;
+		}
+		:host([_state="closed"]) .summary,
+		:host([_state="closing"]) .summary {
+			transition-delay: 500ms;
+		}
+		:host([_state="opening"]) .summary,
+		:host([_state="opened"]) .summary {
+			opacity: 0;
+		}
+		:host([_state="closing"]) .summary,
+		:host([_state="opening"]) .summary,
+		:host([_state="opened"]) .summary {
+			pointer-events: none;
+			position: absolute;
+		}
+		:host([_state="closing"]) .summary,
+		:host([_state="opened"]) .summary {
+			transition-property: none;
+		}
+		:host([disabled]) a {
+			cursor: default;
+		}
+		:host([disabled]) d2l-icon {
+			color: var(--d2l-color-chromite);
+		}
+		:host([disable-default-trigger-focus]) #trigger:focus {
+			outline: none;
+		}
+
+		:host([header-has-interactive-content]) #header-container {
+			display: grid;
+			grid-template-columns: auto;
+			grid-template-rows: auto;
+		}
+		:host([header-has-interactive-content]) .header-grid-item {
+			grid-column: 1;
+			grid-row: 1;
+		}
+		:host([header-has-interactive-content]) #interactive-header-content {
+			cursor: pointer;
+		}
+	`];
 
 	constructor() {
 		super();

package/src/components/accordion/accordion.js

@@ -2,24 +2,21 @@ import './accordion-collapse.js';
 import { css, html, LitElement } from 'lit';
 
 class LabsAccordion extends LitElement {
-	static get properties() {
-		return {
-			/**
-			 * Whether to automatically close other opened branches
-			 */
-			autoClose: { type: Boolean, attribute: 'auto-close' },
-			_selected: { type: Number }
-		};
-	}
 
-	static get styles() {
-		return css`
-			:host {
-				box-sizing: border-box;
-				display: block;
-			}
-		`;
-	}
+	static properties = {
+		/**
+		 * Whether to automatically close other opened branches
+		 */
+		autoClose: { type: Boolean, attribute: 'auto-close' },
+		_selected: { type: Number }
+	};
+
+	static styles = css`
+		:host {
+			box-sizing: border-box;
+			display: block;
+		}
+	`;
 
 	constructor() {
 		super();