@brightspace-ui/core 3.267.1 → 3.268.0

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

@@ -63,79 +63,77 @@ export const ListItemMixin = superclass => class extends composeMixins(
 	ListItemRoleMixin,
 	SkeletonMixin) {
 
-	static get properties() {
-		return {
-			/**
-			 * A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).
-			 * @type {string}
-			 */
-			color: { type: String },
-			/**
-			 * @ignore
-			 */
-			first: { type: Boolean, reflect: true },
-			/**
-			 * Whether to allow the drag target to be the handle only rather than the entire cell
-			 * @type {boolean}
-			 */
-			dragTargetHandleOnly: { type: Boolean, attribute: 'drag-target-handle-only' },
-			/**
-			 * Inline start padding (in px) to apply to list item(s) in the nested slot. When used, nested list items will not use the grid start calcuations and will only use this number to determine indentation.
-			 * @type {number}
-			 */
-			indentation: { type: Number, reflect: true },
-			/**
-			 * @ignore
-			 */
-			last: { type: Boolean, reflect: true },
-			/**
-			 * @ignore
-			 */
-			layout: { type: String, reflect: true },
-			/**
-			 * Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.
-			 * @type {boolean}
-			 */
-			noPrimaryAction: { type: Boolean, attribute: 'no-primary-action' },
-			/**
-			 * How much padding to render in standard/normal list items
-			 * @type {'normal'|'none'}
-			 */
-			paddingType: { type: String, attribute: 'padding-type' },
-			/**
-			 * Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.
-			 * @type {boolean}
-			 */
-			tileHeader: { type: Boolean, reflect: true, attribute: 'tile-header' },
-			/**
-			 * How much padding to render in tile list items
-			 * @type {'normal'|'none'}
-			 * @default "normal"
-			 */
-			tilePaddingType: { type: String, attribute: 'tile-padding-type' },
-			_addButtonText: { state: true },
-			_displayKeyboardTooltip: { type: Boolean },
-			_hasColorSlot: { type: Boolean, reflect: true, attribute: '_has-color-slot' },
-			_hasListItemContent: { state: true },
-			_hasNestedList: { type: Boolean, reflect: true, attribute: '_has-nested-list' },
-			_hasNestedListAddButton: { type: Boolean, reflect: true, attribute: '_has-nested-list-add-button' },
-			_hovering: { type: Boolean, reflect: true },
-			_hoveringControl: { type: Boolean, attribute: '_hovering-control', reflect: true },
-			_hoveringPrimaryAction: { type: Boolean, attribute: '_hovering-primary-action', reflect: true },
-			_focusing: { type: Boolean, reflect: true },
-			_focusingPrimaryAction: { type: Boolean, attribute: '_focusing-primary-action', reflect: true },
-			_forceShowSelection: { type: Boolean, attribute: '_force-show-selection', reflect: true },
-			_highlight: { type: Boolean, reflect: true },
-			_highlighting: { type: Boolean, reflect: true },
-			_showAddButton: { type: Boolean, attribute: '_show-add-button', reflect: true },
-			_selectionWhenInteracted: { type: Boolean, attribute: '_selection-when-interacted', reflect: true },
-			_siblingHasColor: { state: true },
-		};
-	}
+	static properties = {
+		/**
+		 * A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).
+		 * @type {string}
+		 */
+		color: { type: String },
+		/**
+		 * @ignore
+		 */
+		first: { type: Boolean, reflect: true },
+		/**
+		 * Whether to allow the drag target to be the handle only rather than the entire cell
+		 * @type {boolean}
+		 */
+		dragTargetHandleOnly: { type: Boolean, attribute: 'drag-target-handle-only' },
+		/**
+		 * Inline start padding (in px) to apply to list item(s) in the nested slot. When used, nested list items will not use the grid start calcuations and will only use this number to determine indentation.
+		 * @type {number}
+		 */
+		indentation: { type: Number, reflect: true },
+		/**
+		 * @ignore
+		 */
+		last: { type: Boolean, reflect: true },
+		/**
+		 * @ignore
+		 */
+		layout: { type: String, reflect: true },
+		/**
+		 * Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.
+		 * @type {boolean}
+		 */
+		noPrimaryAction: { type: Boolean, attribute: 'no-primary-action' },
+		/**
+		 * How much padding to render in standard/normal list items
+		 * @type {'normal'|'none'}
+		 */
+		paddingType: { type: String, attribute: 'padding-type' },
+		/**
+		 * Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.
+		 * @type {boolean}
+		 */
+		tileHeader: { type: Boolean, reflect: true, attribute: 'tile-header' },
+		/**
+		 * How much padding to render in tile list items
+		 * @type {'normal'|'none'}
+		 * @default "normal"
+		 */
+		tilePaddingType: { type: String, attribute: 'tile-padding-type' },
+		_addButtonText: { state: true },
+		_displayKeyboardTooltip: { type: Boolean },
+		_hasColorSlot: { type: Boolean, reflect: true, attribute: '_has-color-slot' },
+		_hasListItemContent: { state: true },
+		_hasNestedList: { type: Boolean, reflect: true, attribute: '_has-nested-list' },
+		_hasNestedListAddButton: { type: Boolean, reflect: true, attribute: '_has-nested-list-add-button' },
+		_hovering: { type: Boolean, reflect: true },
+		_hoveringControl: { type: Boolean, attribute: '_hovering-control', reflect: true },
+		_hoveringPrimaryAction: { type: Boolean, attribute: '_hovering-primary-action', reflect: true },
+		_focusing: { type: Boolean, reflect: true },
+		_focusingPrimaryAction: { type: Boolean, attribute: '_focusing-primary-action', reflect: true },
+		_forceShowSelection: { type: Boolean, attribute: '_force-show-selection', reflect: true },
+		_highlight: { type: Boolean, reflect: true },
+		_highlighting: { type: Boolean, reflect: true },
+		_showAddButton: { type: Boolean, attribute: '_show-add-button', reflect: true },
+		_selectionWhenInteracted: { type: Boolean, attribute: '_selection-when-interacted', reflect: true },
+		_siblingHasColor: { state: true },
+	};
 
 	static get styles() {
 
-		const styles = [ css`
+		const styles = [css`
 			:host {
 				display: block;
 				position: relative;

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

@@ -4,27 +4,25 @@ import { ListItemLinkMixin } from './list-item-link-mixin.js';
 
 export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(superclass) {
 
-	static get properties() {
-		return {
-			/**
-			 * Whether the list item is the current page in a navigation context. At most one list item should have the `current` attribute at any time; this will be managed by the `list` after initial render.
-			 * @type {boolean}
-			 */
-			current: { type: Boolean, reflect: true },
-			/**
-			 * Whether to prevent the default navigation behavior of the link
-			 * @type {boolean}
-			 */
-			preventNavigation: { type: Boolean, attribute: 'prevent-navigation' },
-			_childCurrent: { type: Boolean, reflect: true, attribute: '_child-current' },
-			_hasCurrentParent: { type: Boolean, reflect: true, attribute: '_has-current-parent' },
-			_nextSiblingCurrent: { type: Boolean, reflect: true, attribute: '_next-sibling-current' },
-		};
-	}
+	static properties = {
+		/**
+		 * Whether the list item is the current page in a navigation context. At most one list item should have the `current` attribute at any time; this will be managed by the `list` after initial render.
+		 * @type {boolean}
+		 */
+		current: { type: Boolean, reflect: true },
+		/**
+		 * Whether to prevent the default navigation behavior of the link
+		 * @type {boolean}
+		 */
+		preventNavigation: { type: Boolean, attribute: 'prevent-navigation' },
+		_childCurrent: { type: Boolean, reflect: true, attribute: '_child-current' },
+		_hasCurrentParent: { type: Boolean, reflect: true, attribute: '_has-current-parent' },
+		_nextSiblingCurrent: { type: Boolean, reflect: true, attribute: '_next-sibling-current' },
+	};
 
 	static get styles() {
 
-		const styles = [ css`
+		const styles = [css`
 			:host([action-href]:not([action-href=""])) {
 				--d2l-list-item-content-text-color: var(--d2l-color-ferrite);
 			}
@@ -65,7 +63,7 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
 			:host([current]) .d2l-list-item-color-outer {
 				padding-block: 3px;
 			}
-		` ];
+		`];
 
 		super.styles && styles.unshift(super.styles);
 		return styles;

package/components/list/list-item-placement-marker.js

@@ -7,73 +7,71 @@ class ListItemPlacementMarker extends LitElement {
 		vertical: { type: Boolean, reflect: true }
 	};
 
-	static get styles() {
-		return css`
-			:host {
-				display: block;
-			}
-
-			:host([vertical]) {
-				height: 100%;
-			}
-
-			:host([hidden]) {
-				display: none;
-			}
-
-			:host([vertical]) .d2l-list-drag-marker-line {
-				height: 100%;
-				margin: -1px 0;
-				width: 12px;
-			}
-
-			.d2l-list-drag-marker-line {
-				height: 12px;
-				margin-inline: -1px;
-				stroke: var(--d2l-color-celestine);
-				stroke-width: 3px;
-				width: 100%;
-			}
-
-			:host([vertical]) .d2l-list-drag-marker-linecap {
-				height: 4px;
-				margin-inline: 0 -2px;
-				width: 12px;
-			}
-
-			.d2l-list-drag-marker-linecap {
-				fill: var(--d2l-color-celestine);
-				height: 12px;
-				margin-inline: -1px 0;
-				stroke: none;
-				width: 4px;
-			}
-
-			:host([vertical]) .d2l-list-drag-marker-circle {
-				margin-inline: 0 0;
-			}
-
-
-			.d2l-list-drag-marker-circle {
-				fill: none;
-				height: 12px;
-				margin-inline: 0 -1px;
-				stroke: var(--d2l-color-celestine);
-				stroke-width: 3px;
-				width: 12px;
-			}
-
-			.d2l-list-drag-marker {
-				display: flex;
-				flex-wrap: nowrap;
-			}
-
-			:host([vertical]) .d2l-list-drag-marker {
-				flex-direction: column;
-				height: 100%;
-			}
-		`;
-	}
+	static styles = css`
+		:host {
+			display: block;
+		}
+
+		:host([vertical]) {
+			height: 100%;
+		}
+
+		:host([hidden]) {
+			display: none;
+		}
+
+		:host([vertical]) .d2l-list-drag-marker-line {
+			height: 100%;
+			margin: -1px 0;
+			width: 12px;
+		}
+
+		.d2l-list-drag-marker-line {
+			height: 12px;
+			margin-inline: -1px;
+			stroke: var(--d2l-color-celestine);
+			stroke-width: 3px;
+			width: 100%;
+		}
+
+		:host([vertical]) .d2l-list-drag-marker-linecap {
+			height: 4px;
+			margin-inline: 0 -2px;
+			width: 12px;
+		}
+
+		.d2l-list-drag-marker-linecap {
+			fill: var(--d2l-color-celestine);
+			height: 12px;
+			margin-inline: -1px 0;
+			stroke: none;
+			width: 4px;
+		}
+
+		:host([vertical]) .d2l-list-drag-marker-circle {
+			margin-inline: 0 0;
+		}
+
+
+		.d2l-list-drag-marker-circle {
+			fill: none;
+			height: 12px;
+			margin-inline: 0 -1px;
+			stroke: var(--d2l-color-celestine);
+			stroke-width: 3px;
+			width: 12px;
+		}
+
+		.d2l-list-drag-marker {
+			display: flex;
+			flex-wrap: nowrap;
+		}
+
+		:host([vertical]) .d2l-list-drag-marker {
+			flex-direction: column;
+			height: 100%;
+		}
+	`;
 
 	constructor() {
 		super();

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

@@ -2,17 +2,15 @@ import { findComposedAncestor } from '../../helpers/dom.js';
 
 export const ListItemRoleMixin = superclass => class extends superclass {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			// eslint-disable-next-line lit/no-native-attributes
-			role: { type: String, reflect: true },
-			_nested: { type: Boolean, reflect: true },
-			_separators: { type: String, reflect: true }
-		};
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		// eslint-disable-next-line lit/no-native-attributes
+		role: { type: String, reflect: true },
+		_nested: { type: Boolean, reflect: true },
+		_separators: { type: String, reflect: true }
+	};
 
 	constructor() {
 		super();

package/components/list/list-item.js

@@ -10,15 +10,13 @@ import { LitElement } from 'lit';
  */
 class ListItem extends ListItemLinkMixin(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * Address of item link if navigable
-			 * @type {string}
-			 */
-			href: { type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * Address of item link if navigable
+		 * @type {string}
+		 */
+		href: { type: String }
+	};
 
 	get href() {
 		return this.actionHref;

package/components/list/list.js

@@ -35,134 +35,130 @@ const ro = new ResizeObserver(entries => {
  */
 class List extends PageableMixin(SelectionMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * When true, show the inline add button after each list item.
-			 * @type {boolean}
-			 */
-			addButton: { type: Boolean, reflect: true, attribute: 'add-button' },
-			/**
-			 * Text to show in label tooltip on inline add button. Defaults to "Add Item".
-			 * @type {string}
-			 */
-			addButtonText: { type: String, reflect: true, attribute: 'add-button-text' },
-			/**
-			 * Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.
-			 * @type {array}
-			 */
-			breakpoints: { type: Array },
-			/**
-			 * Always show drag handle
-			 * @type {boolean}
-			 */
-			dragHandleShowAlways: { type: Boolean, attribute: 'drag-handle-show-always' },
-			/**
-			 * Whether the user can drag multiple items
-			 * @type {boolean}
+	static properties = {
+		/**
+		 * When true, show the inline add button after each list item.
+		 * @type {boolean}
+		 */
+		addButton: { type: Boolean, reflect: true, attribute: 'add-button' },
+		/**
+		 * Text to show in label tooltip on inline add button. Defaults to "Add Item".
+		 * @type {string}
+		 */
+		addButtonText: { type: String, reflect: true, attribute: 'add-button-text' },
+		/**
+		 * Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.
+		 * @type {array}
+		 */
+		breakpoints: { type: Array },
+		/**
+		 * Always show drag handle
+		 * @type {boolean}
+		 */
+		dragHandleShowAlways: { type: Boolean, attribute: 'drag-handle-show-always' },
+		/**
+		 * Whether the user can drag multiple items
+		 * @type {boolean}
  			 */
-			dragMultiple: { type: Boolean, reflect: true, attribute: 'drag-multiple' },
-			/**
-			 * Disable ability to drop items above or below this item
-			 * @type {boolean}
-			 */
-			dropNestedOnly: { type: Boolean, attribute: 'drop-nested-only' },
-			/**
-			 * Whether to extend the separators beyond the content's edge
-			 * @type {boolean}
-			 */
-			extendSeparators: { type: Boolean, reflect: true, attribute: 'extend-separators' },
-			/**
-			 * Use grid to manage focus with arrow keys. See [Accessibility](#accessibility).
-			 * @type {boolean}
-			 */
-			grid: { type: Boolean },
-			/**
-			 * Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.
-			 * @type {string}
+		dragMultiple: { type: Boolean, reflect: true, attribute: 'drag-multiple' },
+		/**
+		 * Disable ability to drop items above or below this item
+		 * @type {boolean}
+		 */
+		dropNestedOnly: { type: Boolean, attribute: 'drop-nested-only' },
+		/**
+		 * Whether to extend the separators beyond the content's edge
+		 * @type {boolean}
+		 */
+		extendSeparators: { type: Boolean, reflect: true, attribute: 'extend-separators' },
+		/**
+		 * Use grid to manage focus with arrow keys. See [Accessibility](#accessibility).
+		 * @type {boolean}
+		 */
+		grid: { type: Boolean },
+		/**
+		 * Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.
+		 * @type {string}
  			 */
-			label: { type: String },
-			/**
-			 * The type of layout for the list items. Valid values are "list" (default) and "tiles". The tile layout is only valid for single level (non-nested) lists.
-			 * @type {'list'|'tiles'}
-			 * @default "list"
-			 */
-			layout: { type: String, reflect: true },
-			/**
-			 * Display separators. Valid values are "all" (default), "between", "none"
-			 * @type {'all'|'between'|'none'}
-			 * @default "all"
-			 */
-			separators: { type: String, reflect: true },
-			/**
-			 * Show selection only on hover, focus or if at least one item is selected. Exclusive for the tile layout
-			 * @type {boolean}
-			 */
-			selectionWhenInteracted: { type: Boolean, attribute: 'selection-when-interacted', reflect: true },
-			_breakpoint: { type: Number, reflect: true },
-			_slimColor: { type: Boolean, reflect: true, attribute: '_slim-color' }
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				--d2l-list-item-color-border-radius: 6px;
-				--d2l-list-item-color-width: 6px;
-				--d2l-list-item-illustration-margin-inline-end: 0.9rem;
-				--d2l-list-item-illustration-max-height: 2.6rem;
-				--d2l-list-item-illustration-max-width: 4.5rem;
-				display: block;
-			}
-			:host([layout="tiles"]) > .d2l-list-content {
-				display: flex;
-				flex-wrap: wrap;
-				gap: 0.9rem;
-				justify-content: normal;
-			}
-			:host(:not([slot="nested"])) > .d2l-list-content {
-				padding-bottom: 1px;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			slot[name="pager"]::slotted(*) {
-				margin-top: 10px;
-			}
-			:host([extend-separators]) slot[name="pager"]::slotted(*) {
-				margin-left: 0.9rem;
-				margin-right: 0.9rem;
-			}
-			:host([_breakpoint="1"]) {
-				--d2l-list-item-illustration-max-height: 3.55rem;
-				--d2l-list-item-illustration-max-width: 6rem;
-			}
-			:host([_breakpoint="2"]) {
-				--d2l-list-item-illustration-max-height: 5.1rem;
-				--d2l-list-item-illustration-max-width: 9rem;
-			}
-			:host([_breakpoint="3"]) {
-				--d2l-list-item-illustration-max-height: 6rem;
-				--d2l-list-item-illustration-max-width: 10.8rem;
-			}
-			:host([_slim-color]) {
-				--d2l-list-item-color-border-radius: 3px;
-				--d2l-list-item-color-width: 3px;
-			}
-			:host([add-button]) ::slotted([slot="controls"]) {
-				margin-bottom: calc(6px + 0.4rem); /* controls section margin-bottom + spacing for add-button */
-			}
+		label: { type: String },
+		/**
+		 * The type of layout for the list items. Valid values are "list" (default) and "tiles". The tile layout is only valid for single level (non-nested) lists.
+		 * @type {'list'|'tiles'}
+		 * @default "list"
+		 */
+		layout: { type: String, reflect: true },
+		/**
+		 * Display separators. Valid values are "all" (default), "between", "none"
+		 * @type {'all'|'between'|'none'}
+		 * @default "all"
+		 */
+		separators: { type: String, reflect: true },
+		/**
+		 * Show selection only on hover, focus or if at least one item is selected. Exclusive for the tile layout
+		 * @type {boolean}
+		 */
+		selectionWhenInteracted: { type: Boolean, attribute: 'selection-when-interacted', reflect: true },
+		_breakpoint: { type: Number, reflect: true },
+		_slimColor: { type: Boolean, reflect: true, attribute: '_slim-color' }
+	};
+
+	static styles = css`
+		:host {
+			--d2l-list-item-color-border-radius: 6px;
+			--d2l-list-item-color-width: 6px;
+			--d2l-list-item-illustration-margin-inline-end: 0.9rem;
+			--d2l-list-item-illustration-max-height: 2.6rem;
+			--d2l-list-item-illustration-max-width: 4.5rem;
+			display: block;
+		}
+		:host([layout="tiles"]) > .d2l-list-content {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.9rem;
+			justify-content: normal;
+		}
+		:host(:not([slot="nested"])) > .d2l-list-content {
+			padding-bottom: 1px;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		slot[name="pager"]::slotted(*) {
+			margin-top: 10px;
+		}
+		:host([extend-separators]) slot[name="pager"]::slotted(*) {
+			margin-left: 0.9rem;
+			margin-right: 0.9rem;
+		}
+		:host([_breakpoint="1"]) {
+			--d2l-list-item-illustration-max-height: 3.55rem;
+			--d2l-list-item-illustration-max-width: 6rem;
+		}
+		:host([_breakpoint="2"]) {
+			--d2l-list-item-illustration-max-height: 5.1rem;
+			--d2l-list-item-illustration-max-width: 9rem;
+		}
+		:host([_breakpoint="3"]) {
+			--d2l-list-item-illustration-max-height: 6rem;
+			--d2l-list-item-illustration-max-width: 10.8rem;
+		}
+		:host([_slim-color]) {
+			--d2l-list-item-color-border-radius: 3px;
+			--d2l-list-item-color-width: 3px;
+		}
+		:host([add-button]) ::slotted([slot="controls"]) {
+			margin-bottom: calc(6px + 0.4rem); /* controls section margin-bottom + spacing for add-button */
+		}
 
-			::slotted(.d2l-list-tile-break) {
-				display: none;
-			}
-			:host([layout="tiles"]) ::slotted(.d2l-list-tile-break) {
-				display: block;
-				flex-basis: 100%;
-				height: 0;
-			}
-		`;
-	}
+		::slotted(.d2l-list-tile-break) {
+			display: none;
+		}
+		:host([layout="tiles"]) ::slotted(.d2l-list-tile-break) {
+			display: block;
+			flex-basis: 100%;
+			height: 0;
+		}
+	`;
 
 	constructor() {
 		super();