@brightspace-ui/core 3.141.1 → 3.142.1

package/components/button/button-add.js

@@ -45,6 +45,8 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 				--d2l-button-add-animation-duration: 200ms;
 				--d2l-button-add-hover-focus-color: var(--d2l-color-celestine-minus-1);
 				--d2l-button-add-line-color: var(--d2l-color-mica);
+				--d2l-button-add-line-height: 1px;
+				--d2l-button-add-hover-focus-line-height: 2px;
 			}
 			:host([mode="icon-when-interacted"]) {
 				--d2l-button-add-animation-delay: 50ms;
@@ -74,7 +76,7 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 
 			.line {
 				background: var(--d2l-button-add-line-color);
-				height: 1px;
+				height: var(--d2l-button-add-line-height);
 				margin: 5px 0;
 				width: 100%;
 			}
@@ -82,7 +84,7 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 			button:hover .line,
 			button:focus .line {
 				background: var(--d2l-button-add-hover-focus-color);
-				height: 2px;
+				height: var(--d2l-button-add-hover-focus-line-height);
 			}
 			button:hover d2l-button-add-icon-text,
 			button:focus d2l-button-add-icon-text {
@@ -139,21 +141,21 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 
 				@keyframes line-start-animation {
 					0% {
-						background: linear-gradient(to right, var(--d2l-color-mica) 0%, var(--d2l-color-mica) 11%, var(--d2l-button-add-hover-focus-color) 11%) left center / 113%;
+						background: linear-gradient(to right, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) left center / 113%;
 						opacity: 10%;
 					}
 					100% {
-						background: linear-gradient(to right, var(--d2l-color-mica) 0%, var(--d2l-color-mica) 11%, var(--d2l-button-add-hover-focus-color) 11%) left center / 113%; /* safari */
+						background: linear-gradient(to right, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) left center / 113%; /* safari */
 						background-position: right;
 					}
 				}
 				@keyframes line-end-animation {
 					0% {
-						background: linear-gradient(to left, var(--d2l-color-mica) 0%, var(--d2l-color-mica) 11%, var(--d2l-button-add-hover-focus-color) 11%) right center / 113%;
+						background: linear-gradient(to left, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) right center / 113%;
 						opacity: 10%;
 					}
 					100% {
-						background: linear-gradient(to left, var(--d2l-color-mica) 0%, var(--d2l-color-mica) 11%, var(--d2l-button-add-hover-focus-color) 11%) right center / 113%; /* safari */
+						background: linear-gradient(to left, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) right center / 113%; /* safari */
 						background-position: left;
 					}
 				}

package/components/list/demo/list-nav.html

@@ -30,7 +30,7 @@
 								<div>Welcome!</div>
 							</d2l-list-item-content>
 							<d2l-list slot="nested" grid>
-								<d2l-list-item-nav key="L2-1" label="Syallabus Confirmation">
+								<d2l-list-item-nav key="L2-1" label="Syallabus Confirmation" action-href="https://d2l.com" prevent-navigation>
 									<d2l-list-item-content>
 										<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Syallabus Confirmation</div>
 										<div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 2 pm" style="padding: 5px;">Start: May 1, 2023 at 12:01 AM</d2l-tooltip-help></div>
@@ -38,18 +38,18 @@
 								</d2l-list-item-nav>
 							</d2l-list>
 						</d2l-list-item-nav>
-						<d2l-list-item-nav key="L2-2" label="Unit 1: Poetry" color="#29a6ff" expandable expanded>
+						<d2l-list-item-nav key="L2-2" label="Unit 1: Poetry" color="#29a6ff" expandable expanded action-href="https://d2l.com" prevent-navigation>
 							<d2l-list-item-content>
 								<div>Unit 1: Fiction</div>
 								<div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 5 pm" style="padding: 5px;">Starts: May 1, 2023 at 12:01 AM</d2l-tooltip-help></div>
 							</d2l-list-item-content>
 							<d2l-list slot="nested" grid>
-								<d2l-list-item-nav key="L3-2" label="Fiction">
+								<d2l-list-item-nav key="L3-2" label="Fiction" action-href="https://d2l.com" prevent-navigation>
 									<d2l-list-item-content>
 										<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Fiction</div>
 									</d2l-list-item-content>
 								</d2l-list-item-nav>
-								<d2l-list-item-nav key="L3-2" label="Ten rules for writing fiction">
+								<d2l-list-item-nav key="L3-2" label="Ten rules for writing fiction" action-href="https://d2l.com" prevent-navigation>
 									<d2l-list-item-content>
 										<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Ten rules for writing fiction</div>
 									</d2l-list-item-content>

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

@@ -84,6 +84,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			 * @type {boolean}
 			 */
 			dragTargetHandleOnly: { type: Boolean, attribute: 'drag-target-handle-only' },
+			/**
+			 * @ignore
+			 */
+			last: { type: Boolean, reflect: true },
 			/**
 			 * Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.
 			 * @type {boolean}
@@ -208,6 +212,18 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				--d2l-list-item-content-text-outline: 2px solid var(--d2l-color-celestine);
 				--d2l-list-item-content-text-outline-offset: 1px;
 			}
+			@supports selector(:has(a, b)) {
+				:host([_list-item-new-styles][_focusing-primary-action]) .d2l-list-item-content {
+					--d2l-list-item-content-text-border-radius: initial;
+					--d2l-list-item-content-text-outline: initial;
+					--d2l-list-item-content-text-outline-offset: initial;
+				}
+				:host([_list-item-new-styles][_focusing-primary-action]):has(:focus-visible) .d2l-list-item-content {
+					--d2l-list-item-content-text-border-radius: 3px;
+					--d2l-list-item-content-text-outline: 2px solid var(--d2l-color-celestine);
+					--d2l-list-item-content-text-outline-offset: 1px;
+				}
+			}
 			[slot="content-action"] {
 				height: 100%;
 			}

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

@@ -18,6 +18,8 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
 			preventNavigation: { type: Boolean, attribute: 'prevent-navigation' },
 			_childCurrent: { type: Boolean, reflect: true, attribute: '_child-current' },
 			_focusingElem: { type: Boolean, reflect: true, attribute: '_focusing-elem' },
+			_hasCurrentParent: { type: Boolean, reflect: true, attribute: '_has-current-parent' },
+			_nextSiblingCurrent: { type: Boolean, reflect: true, attribute: '_next-sibling-current' },
 		};
 	}
 
@@ -44,6 +46,40 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
 				--d2l-list-item-content-text-color: var(--d2l-color-ferrite);
 				--d2l-list-item-content-text-decoration: none;
 			}
+			:host([current]) d2l-button-add,
+			:host([_has-current-parent]) [slot="add-top"] d2l-button-add,
+			:host([_next-sibling-current]) [slot="add"] d2l-button-add {
+				--d2l-button-add-hover-focus-line-height: 3px;
+				--d2l-button-add-line-color: var(--d2l-color-celestine);
+				--d2l-button-add-line-height: 3px;
+			}
+			:host([current]) [slot="add"],
+			:host([_has-current-parent]) [slot="add-top"] {
+				margin-bottom: -14.5px;
+				margin-top: -13.5px;
+			}
+			:host([current]) [slot="add-top"],
+			:host([_next-sibling-current]) [slot="add"] {
+				margin-bottom: -13.5px;
+				margin-top: -10.5px;
+			}
+			:host([current]) .d2l-list-item-color-outer {
+				padding-block: 3px;
+			}
+
+			/* clean up with GAUD-7495-list-item-new-styles flag */
+			@supports selector(:has(a, b)) {
+				:host([_focusing-primary-action]) .d2l-list-item-content {
+					--d2l-list-item-content-text-border-radius: initial;
+					--d2l-list-item-content-text-outline: initial;
+					--d2l-list-item-content-text-outline-offset: initial;
+				}
+				:host([_focusing-primary-action]):has(:focus-visible) .d2l-list-item-content {
+					--d2l-list-item-content-text-border-radius: 3px;
+					--d2l-list-item-content-text-outline: 2px solid var(--d2l-color-celestine);
+					--d2l-list-item-content-text-outline-offset: 1px;
+				}
+			}
 
 		` ];
 
@@ -56,6 +92,8 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
 		this.current = false;
 		this._childCurrent = false;
 		this._focusingElem = false;
+		this._hasCurrentParent = false;
+		this._nextSiblingCurrent = false;
 	}
 
 	connectedCallback() {
@@ -106,6 +144,24 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
 	dispatchSetChildCurrentEvent(val) {
 		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-nav-set-child-current', { bubbles: true, composed: true, detail: { value: val } }));
+
+		if (!val) return;
+		requestAnimationFrame(() => {
+			if (this._hasNestedListAddButton) {
+				const firstChild = this.querySelector('[first]');
+				if (firstChild) firstChild._hasCurrentParent = true;
+			}
+
+			const prevSibling = this._getPreviousListItemSibling();
+			if (prevSibling) {
+				if (prevSibling._showAddButton) prevSibling._nextSiblingCurrent = true;
+
+				if (prevSibling._hasNestedListAddButton) {
+					const lastChild = prevSibling.querySelector('[last]');
+					if (lastChild) lastChild._nextSiblingCurrent = true;
+				}
+			}
+		});
 	}
 
 	_handleLinkClick(e) {

package/components/list/list.js

@@ -416,6 +416,15 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 					target.dispatchSetChildCurrentEvent(true);
 				}, { once: true });
 				prevCurrent.current = false;
+				const firstChild = this.querySelector('[_has-current-parent]');
+				if (firstChild) firstChild._hasCurrentParent = false;
+
+				const prevSiblings = this.querySelectorAll('[_next-sibling-current]');
+				if (prevSiblings.length > 0) {
+					prevSiblings.forEach(sibling => {
+						sibling._nextSiblingCurrent = false;
+					});
+				}
 			} else {
 				target.dispatchSetChildCurrentEvent(true);
 			}
@@ -437,9 +446,21 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 
 	_handleSlotChange() {
 		this._updateItemShowingCount();
-		this.getItems().forEach((item, i) => {
-			if (i === 0) item.first = true;
-			else item.first = false;
+		const items = this.getItems();
+		items.forEach((item, i) => {
+			if (items.length === 1) {
+				item.first = true;
+				item.last = true;
+			} else if (i === 0) {
+				item.first = true;
+				item.last = false;
+			} else if (i === items.length - 1) {
+				item.first = false;
+				item.last = true;
+			} else {
+				item.first = false;
+				item.last = false;
+			}
 		});
 
 		/** @ignore */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.141.1",
+  "version": "3.142.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",