@brightspace-ui/core 3.268.0 → 3.268.1

package/components/collapsible-panel/README.md

@@ -219,21 +219,17 @@ import { selectStyles } from '@brightspace-ui/core/components/inputs/input-selec
 
 class CollapsiblePanelDaylightDemo extends LitElement {
 
-	static get properties() {
-		return {
-      _addons: { state: true },
-			_icingType: { state: true },
-			_icingTypes: { state: true },
-		};
-	}
-
-	static get styles() {
-		return [labelStyles, selectStyles, css`
-			d2l-collapsible-panel {
-				width: 500px;
-			}
-		`];
-	}
+	static properties = {
+		_addons: { state: true },
+		_icingType: { state: true },
+		_icingTypes: { state: true },
+	};
+
+	static styles = [labelStyles, selectStyles, css`
+		d2l-collapsible-panel {
+			width: 500px;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/demo/code-view.js

@@ -6,17 +6,13 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 class CodeView extends LitElement {
 
-	static get properties() {
-		return {
-			hideLanguage: { type: Boolean, reflect: true, attribute: 'hide-language' },
-			language: { type: String, reflect: true },
-			_code: { type: String }
-		};
-	}
+	static properties = {
+		hideLanguage: { type: Boolean, reflect: true, attribute: 'hide-language' },
+		language: { type: String, reflect: true },
+		_code: { type: String }
+	};
 
-	static get styles() {
-		return [ themeStyles, styles ];
-	}
+	static styles = [themeStyles, styles];
 
 	constructor() {
 		super();

package/components/demo/demo-page-settings.js

@@ -17,35 +17,31 @@ const localeSettings = getDocumentLocaleSettings();
 
 class DemoPageSettings extends LitElement {
 
-	static get properties() {
-		return {
-			panelTitle: { type: String, attribute: 'panel-title' },
-			_language: { state: true }
-		};
-	}
-
-	static get styles() {
-		return [ inputLabelStyles, selectStyles, css`
-			:host {
-				display: block;
-			}
-			:host[hidden] {
-				display: none;
-			}
-			d2l-collapsible-panel {
-				width: 100%;
-			}
-			.color-mode-group {
-				display: inline-flex;
-			}
-			#applyFlagsButton {
-				max-width: max-content;
-			}
-			#useAsDefaultColorMode {
-				margin-block-end: 0;
-			}
-		`];
-	}
+	static properties = {
+		panelTitle: { type: String, attribute: 'panel-title' },
+		_language: { state: true }
+	};
+
+	static styles = [inputLabelStyles, selectStyles, css`
+		:host {
+			display: block;
+		}
+		:host[hidden] {
+			display: none;
+		}
+		d2l-collapsible-panel {
+			width: 100%;
+		}
+		.color-mode-group {
+			display: inline-flex;
+		}
+		#applyFlagsButton {
+			max-width: max-content;
+		}
+		#useAsDefaultColorMode {
+			margin-block-end: 0;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/demo/demo-page.js

@@ -21,44 +21,40 @@ window.isD2LDemoPage = true;
 
 class DemoPage extends LitElement {
 
-	static get properties() {
-		return {
-			pageTitle: { type: String, attribute: 'page-title' },
-			_noScroll: { state: true }
-		};
-	}
+	static properties = {
+		pageTitle: { type: String, attribute: 'page-title' },
+		_noScroll: { state: true }
+	};
 
-	static get styles() {
-		return [ css`
-			:host {
-				background-color: var(--d2l-theme-background-color-sunken);
-				display: block;
-				padding: 30px;
-			}
-			main.no-scroll {
-				height: 0;
-				overflow: hidden;
-				padding: 0;
-			}
-			header {
-				margin-bottom: 1.5rem;
-				max-width: 900px;
-			}
-			.d2l-demo-page-content > ::slotted(h2),
-			.d2l-demo-page-content > ::slotted(h3) {
-				color: var(--d2l-theme-text-color-static-standard);
-				font-size: 0.8rem;
-				font-weight: 700;
-				line-height: 1.2rem;
-				margin: 1.5rem 0 1.5rem 0;
-			}
+	static styles = [css`
+		:host {
+			background-color: var(--d2l-theme-background-color-sunken);
+			display: block;
+			padding: 30px;
+		}
+		main.no-scroll {
+			height: 0;
+			overflow: hidden;
+			padding: 0;
+		}
+		header {
+			margin-bottom: 1.5rem;
+			max-width: 900px;
+		}
+		.d2l-demo-page-content > ::slotted(h2),
+		.d2l-demo-page-content > ::slotted(h3) {
+			color: var(--d2l-theme-text-color-static-standard);
+			font-size: 0.8rem;
+			font-weight: 700;
+			line-height: 1.2rem;
+			margin: 1.5rem 0 1.5rem 0;
+		}
 
-			.d2l-demo-page-content > ::slotted(d2l-code-view),
-			.d2l-demo-page-content > ::slotted(d2l-demo-snippet) {
-				margin-bottom: 36px;
-			}
-		`];
-	}
+		.d2l-demo-page-content > ::slotted(d2l-code-view),
+		.d2l-demo-page-content > ::slotted(d2l-demo-snippet) {
+			margin-bottom: 36px;
+		}
+	`];
 
 	connectedCallback() {
 		super.connectedCallback();

package/components/demo/demo-snippet.js

@@ -15,108 +15,104 @@ function setIndent(text, indent = 0, skipFirstLine = false) {
 
 class DemoSnippet extends LitElement {
 
-	static get properties() {
-		return {
-			codeViewHidden: { type: Boolean, reflect: true, attribute: 'code-view-hidden' },
-			fullWidth: { type: Boolean, reflect: true, attribute: 'full-width' },
-			noPadding: { type: Boolean, reflect: true, attribute: 'no-padding' },
-			overflowHidden: { type: Boolean, reflect: true, attribute: 'overflow-hidden' },
-			_code: { type: String },
-			_fullscreen: { state: true },
-			_hasSkeleton: { type: Boolean, attribute: false },
-			_settingsPeek: { state: true },
-			_skeletonOn: { type: Boolean, reflect: false }
-		};
-	}
+	static properties = {
+		codeViewHidden: { type: Boolean, reflect: true, attribute: 'code-view-hidden' },
+		fullWidth: { type: Boolean, reflect: true, attribute: 'full-width' },
+		noPadding: { type: Boolean, reflect: true, attribute: 'no-padding' },
+		overflowHidden: { type: Boolean, reflect: true, attribute: 'overflow-hidden' },
+		_code: { type: String },
+		_fullscreen: { state: true },
+		_hasSkeleton: { type: Boolean, attribute: false },
+		_settingsPeek: { state: true },
+		_skeletonOn: { type: Boolean, reflect: false }
+	};
 
-	static get styles() {
-		return css`
-			:host {
-				background-color: var(--d2l-theme-background-color-base);
-				border: 1px solid var(--d2l-theme-border-color-standard);
-				border-radius: 6px;
-				box-shadow: var(--d2l-theme-shadow-floating);
-				display: block;
-				max-width: 900px;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			:host([full-width]) {
-				max-width: unset;
-			}
-			.d2l-demo-snippet-demo-wrapper {
-				display: flex;
-			}
-			.d2l-demo-snippet-demo-wrapper.fullscreen {
-				background-color: var(--d2l-theme-background-color-base);
-				height: 100vh;
-				inset: 0;
-				overflow: auto;
-				position: absolute;
-				z-index: 2;
-			}
-			.d2l-demo-snippet-demo {
-				flex: 1 1 auto;
-				min-width: 0;
-				position: relative;
-			}
-			:host([full-width]) .d2l-demo-snippet-demo-wrapper.fullscreen .d2l-demo-snippet-demo {
-				width: 100vw;
-			}
-			:host([overflow-hidden]) .d2l-demo-snippet-demo {
-				overflow: hidden;
-			}
-			.d2l-demo-snippet-demo-padding {
-				padding: 18px;
-			}
-			:host([no-padding]) .d2l-demo-snippet-demo-padding,
-			.d2l-demo-snippet-demo-wrapper.fullscreen .d2l-demo-snippet-demo-padding {
-				padding: 0;
-			}
-			.d2l-demo-snippet-settings {
-				border-inline-start: 1px solid var(--d2l-theme-border-color-standard);
-				flex: 0 0 auto;
-				padding: 6px;
-			}
-			.d2l-demo-snippet-demo-wrapper.fullscreen .d2l-demo-snippet-settings {
-				position: sticky;
-				top: 0;
-			}
+	static styles = css`
+		:host {
+			background-color: var(--d2l-theme-background-color-base);
+			border: 1px solid var(--d2l-theme-border-color-standard);
+			border-radius: 6px;
+			box-shadow: var(--d2l-theme-shadow-floating);
+			display: block;
+			max-width: 900px;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		:host([full-width]) {
+			max-width: unset;
+		}
+		.d2l-demo-snippet-demo-wrapper {
+			display: flex;
+		}
+		.d2l-demo-snippet-demo-wrapper.fullscreen {
+			background-color: var(--d2l-theme-background-color-base);
+			height: 100vh;
+			inset: 0;
+			overflow: auto;
+			position: absolute;
+			z-index: 2;
+		}
+		.d2l-demo-snippet-demo {
+			flex: 1 1 auto;
+			min-width: 0;
+			position: relative;
+		}
+		:host([full-width]) .d2l-demo-snippet-demo-wrapper.fullscreen .d2l-demo-snippet-demo {
+			width: 100vw;
+		}
+		:host([overflow-hidden]) .d2l-demo-snippet-demo {
+			overflow: hidden;
+		}
+		.d2l-demo-snippet-demo-padding {
+			padding: 18px;
+		}
+		:host([no-padding]) .d2l-demo-snippet-demo-padding,
+		.d2l-demo-snippet-demo-wrapper.fullscreen .d2l-demo-snippet-demo-padding {
+			padding: 0;
+		}
+		.d2l-demo-snippet-settings {
+			border-inline-start: 1px solid var(--d2l-theme-border-color-standard);
+			flex: 0 0 auto;
+			padding: 6px;
+		}
+		.d2l-demo-snippet-demo-wrapper.fullscreen .d2l-demo-snippet-settings {
+			position: sticky;
+			top: 0;
+		}
+		d2l-dropdown.settings-dropdown {
+			background-color: var(--d2l-theme-background-color-base);
+			border-radius: 6px;
+			outline: 1px solid var(--d2l-color-celestine-minus-1);
+			position: fixed;
+			right: 1rem;
+			top: -0.25rem;
+			translate: 0 -1.5rem;
+			z-index: 9999; /* stack on top of sticky headers */
+		}
+		@media (prefers-reduced-motion: no-preference) {
 			d2l-dropdown.settings-dropdown {
-				background-color: var(--d2l-theme-background-color-base);
-				border-radius: 6px;
-				outline: 1px solid var(--d2l-color-celestine-minus-1);
-				position: fixed;
-				right: 1rem;
-				top: -0.25rem;
-				translate: 0 -1.5rem;
-				z-index: 9999; /* stack on top of sticky headers */
-			}
-			@media (prefers-reduced-motion: no-preference) {
-				d2l-dropdown.settings-dropdown {
-					transition: translate 0.15s, box-shadow 0.15s;
-				}
+				transition: translate 0.15s, box-shadow 0.15s;
 			}
-			d2l-dropdown.settings-dropdown.peek,
-			d2l-dropdown.settings-dropdown:hover,
-			d2l-dropdown.settings-dropdown:focus-within {
-				box-shadow: 0 -1px 0 1px white;
-				translate: 0;
-			}
-			d2l-code-view {
-				border: none;
-				border-top-left-radius: 0;
-				border-top-right-radius: 0;
-				box-shadow: none;
-				margin: 0;
-				max-width: 100%;
-			}
-			:host([code-view-hidden]) d2l-code-view {
-				display: none;
-			}
-		`;
-	}
+		}
+		d2l-dropdown.settings-dropdown.peek,
+		d2l-dropdown.settings-dropdown:hover,
+		d2l-dropdown.settings-dropdown:focus-within {
+			box-shadow: 0 -1px 0 1px white;
+			translate: 0;
+		}
+		d2l-code-view {
+			border: none;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+			box-shadow: none;
+			margin: 0;
+			max-width: 100%;
+		}
+		:host([code-view-hidden]) d2l-code-view {
+			display: none;
+		}
+	`;
 
 	constructor() {
 		super();

package/components/description-list/README.md

@@ -38,9 +38,7 @@ For very long values, or very small container sizes, the description list can us
 
   class TestDescriptionList extends LitElement {
 
-    static get styles() {
-      return descriptionListStyles;
-    }
+    static styles = descriptionListStyles;
 
     render() {
       return html`
@@ -77,15 +75,11 @@ The `d2l-dl-wrapper` component can be combined with `descriptionListStyles` to a
 
   class TestDescriptionList extends LitElement {
 
-    static get styles() {
-      return descriptionListStyles;
-    }
+    static styles = descriptionListStyles;
 
-    static get properties() {
-      return {
-        breakpoint: { type: Number },
-      }
-    }
+    static properties = {
+      breakpoint: { type: Number },
+    };
 
     render() {
       return html`
@@ -133,28 +127,26 @@ The `dt` and `dd` elements can contain non-text content such as links or profile
 
   class TestDescriptionList extends LitElement {
 
-    static get styles() {
-      return [
-        descriptionListStyles, css`
-          .user {
-            align-items: center;
-            display: flex;
-            gap: 0.5rem;
-          }
-          .avatar {
-            align-items: center;
-            background-color: var(--d2l-color-cinnabar-minus-1);
-            border-radius: 0.25rem;
-            color: white;
-            display: flex;
-            font-size: 0.7rem;
-            font-weight: 700;
-            height: 1.5rem;
-            justify-content: center;
-            width: 1.5rem;
-          }
-      `];
-    }
+    static styles = [
+      descriptionListStyles, css`
+        .user {
+          align-items: center;
+          display: flex;
+          gap: 0.5rem;
+        }
+        .avatar {
+          align-items: center;
+          background-color: var(--d2l-color-cinnabar-minus-1);
+          border-radius: 0.25rem;
+          color: white;
+          display: flex;
+          font-size: 0.7rem;
+          font-weight: 700;
+          height: 1.5rem;
+          justify-content: center;
+          width: 1.5rem;
+        }
+    `];
 
     render() {
       return html`

package/components/description-list/demo/description-list-test.js

@@ -4,46 +4,43 @@ import { descriptionListStyles } from '../description-list-wrapper.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 class TestDescriptionList extends LitElement {
-	static get properties() {
-		return {
-			/**
-			 * Width for component to use a stacked layout
-			 * @type {number}
-			 */
-			breakpoint: { type: Number, reflect: true },
-			/**
-			 * Force the component to always use a stacked layout; will override breakpoint attribute
-			 * @type {boolean}
-			 */
-			forceStacked: { type: Boolean, reflect: true, attribute: 'force-stacked' },
-			/**
-			 * @ignore
-			 */
-			type: { type: String, reflect: true },
-		};
-	}
 
-	static get styles() {
-		return [descriptionListStyles, css`
-			.user {
-				align-items: center;
-				display: flex;
-				gap: 0.5rem;
-			}
-			.avatar {
-				align-items: center;
-				background-color: var(--d2l-color-cinnabar-minus-1);
-				border-radius: 0.25rem;
-				color: white;
-				display: flex;
-				font-size: 0.7rem;
-				font-weight: 700;
-				height: 1.5rem;
-				justify-content: center;
-				width: 1.5rem;
-			}
-		`];
-	}
+	static properties = {
+		/**
+		 * Width for component to use a stacked layout
+		 * @type {number}
+		 */
+		breakpoint: { type: Number, reflect: true },
+		/**
+		 * Force the component to always use a stacked layout; will override breakpoint attribute
+		 * @type {boolean}
+		 */
+		forceStacked: { type: Boolean, reflect: true, attribute: 'force-stacked' },
+		/**
+		 * @ignore
+		 */
+		type: { type: String, reflect: true },
+	};
+
+	static styles = [descriptionListStyles, css`
+		.user {
+			align-items: center;
+			display: flex;
+			gap: 0.5rem;
+		}
+		.avatar {
+			align-items: center;
+			background-color: var(--d2l-color-cinnabar-minus-1);
+			border-radius: 0.25rem;
+			color: white;
+			display: flex;
+			font-size: 0.7rem;
+			font-weight: 700;
+			height: 1.5rem;
+			justify-content: center;
+			width: 1.5rem;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/dialog/README.md

@@ -278,11 +278,9 @@ Notes on this example:
 
   class DialogAsyncContentUntil extends LoadingCompleteMixin(LitElement) {
 
-    static get properties() {
-      return {
-        key: { type: String }
-      };
-    }
+    static properties = {
+      key: { type: String }
+    };
     
     constructor() {
       super();

package/components/form/docs/form-element-mixin.md

@@ -67,20 +67,17 @@ import { FormElementMixin } from '@brightspace-ui/core/form/form-element-mixin.j
 // Use the FormElementMixin
 class MyFormElement extends FormElementMixin(LitElement) {
 
-	static get properties() {
-		return {
-			_val1: { type: String },
-			_val2: { type: String }
-		};
-	}
-	static get styles() {
-		return css`
-			/* Add our invalid styles */
-			:host([invalid]) {
-				border: 2px solid var(--d2l-color-cinnabar);
-			}
-		`;
-	}
+	static properties = {
+		_val1: { type: String },
+		_val2: { type: String }
+	};
+
+	static styles = css`
+		/* Add our invalid styles */
+		:host([invalid]) {
+			border: 2px solid var(--d2l-color-cinnabar);
+		}
+	`;
 
 	constructor() {
 		super();

package/components/form/docs/form-element-nesting.md

@@ -35,12 +35,10 @@ import { FormElementMixin } from '@brightspace-ui/core/form/form-element-mixin.j
 // Use the FormElementMixin
 class MyNestingFormElement extends FormElementMixin(LitElement) {
 
-	static get properties() {
-		return {
-			_firstName: { type: String },
-			_lastName: { type: String }
-		};
-	}
+	static properties = {
+		_firstName: { type: String },
+		_lastName: { type: String }
+	};
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);

package/components/form/docs/form-element-wrapping.md

@@ -23,9 +23,7 @@ import { FormElementMixin } from '@brightspace-ui/core/form/form-element-mixin.j
 // Use the FormElementMixin
 class MyWrappingFormElement extends FormElementMixin(LitElement) {
 
-	static get properties() {
-		return { value: { type: String } };
-	}
+	static properties = { value: { type: String } };
 
 	render() {
 		// Conditionally render our validation error message if there is one