@brightspace-ui/core 3.117.0 → 3.119.0

package/components/form/README.md

@@ -2,16 +2,15 @@
 
 There are several components and mixins available to help make working with forms easier.
 
-## Validating and Submitting Forms Using `<d2l-form>` and `<d2l-form-native>`
+## Validating and Submitting Forms Using `<d2l-form>`
 
-These two components behave much like a native `<form>` element, grouping nested form elements together and controlling how their data is validated and submitted. Unlike native `<form>`s, they support our custom form elements.
+Much like a native `<form>` element, `<d2l-form>` groups nested form elements together and controls how their data is validated and submitted. Unlike native `<form>`s, it supports our custom form elements.
 
 - [d2l-form](docs/form.md#form-d2l-form): supports aggregation of nested forms for validation and submission
-- [d2l-form-native](docs/form.md#native-form-d2l-form-native): emulates how a native `<form>` submits, but supports our custom form elements
 
 ## Custom Elements in Forms
 
-To allow custom elements to participate in `<d2l-form>` and `<d2l-form-native>` submission and validation, use the [FormElementMixin](docs/form-element-mixin.md).
+To allow custom elements to participate in `<d2l-form>` submission and validation, use the [FormElementMixin](docs/form-element-mixin.md).
 
 If your custom element uses other nested *custom* form elements internally, read about [form element nesting](docs/form-element-nesting.md).
 

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

@@ -1,14 +1,14 @@
 # FormElementMixin
 
-The `FormElementMixin` allows the user to turn a custom web component into a form element.
+The `FormElementMixin` allows custom web components to participate as a form element.
 
 This means that the component will be able to:
 1. Perform live self-validation when being edited.
-1. Participate in validation and submission when added to `d2l-form` or `d2l-form-native`.
+1. Participate in validation and submission when added to `d2l-form`.
 
-All custom form elements must provide a form value that will be submitted during `d2l-form` or `d2l-form-native` submission.
-However, participating in validation is optional. Some custom form elements may not need validation because they have no
-invalid state.
+All custom form elements must provide a form value that will be submitted during `d2l-form` submission.
+
+Participating in validation is, however, optional. Some custom form elements may not need validation because they have no invalid state.
 
 ## Form Value
 
@@ -24,7 +24,6 @@ invalid state.
 		- When an `Object` is provided, all keys-value pairs will be submitted. To avoid collision it is recommended that you prefix each key with the component's `name` property value.
 	1. A single value: `'my-value'`
 		- When a single value is provided a key-value pair will be submitted with the component's `name` property value as the key. If `name` does not have a value, the value will not be submitted.
-	- **Note:** When using `d2l-form-native` all values will be converted to `String`s. Complex value may be used with `d2l-form` but should only be used if absolutely required to maintain compatibility with `d2l-form-native`.
 
 ## Validation
 
@@ -62,7 +61,6 @@ invalid state.
 
 ## Usage
 
-
 ```javascript
 import { FormElementMixin } from '@brightspace-ui/core/form/form-element-mixin.js';
 

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

@@ -199,7 +199,7 @@ render() {
 
 **8. Support Validate:**
 
-The last step is to ensure that calling validate on the parent will result in the nested components being validated. This is not required for self-validation but is important to ensure your custom form element works properly when used inside a [`d2l-form`](../form.md) or [`d2l-form-native`](../form-native.md).
+The last step is to ensure that calling validate on the parent will result in the nested components being validated. This is not required for self-validation but is important to ensure your custom form element works properly when used inside a [`d2l-form`].
 
 ```javascript
 async validate() {

package/components/form/docs/form.md

@@ -1,4 +1,4 @@
-# Form Components
+# Form [d2l-form]
 
 <!-- docs: demo -->
 ```html
@@ -34,12 +34,6 @@
 </d2l-form>
 ```
 
-There are two form components that can be used with our custom elements: `d2l-form` and `d2l-form-native`. These are useful in the following scenarios:
-- `d2l-form`: when submitting form data via your own API calls OR when nesting multiple forms within each other
-- `d2l-form-native`: when emulating native form element submission
-
-## Form [d2l-form]
-
 The `d2l-form` component can be used to build sections containing interactive controls that are validated and submitted as a group.
 
 It differs from the native HTML `form` element in 4 ways:
@@ -48,8 +42,6 @@ It differs from the native HTML `form` element in 4 ways:
 1. `d2l-form` elements can be nested. If a parent form is validated or submitted it will also trigger the corresponding action for descendent `d2l-form`s unless they explicitly opt-out using `no-nesting`. This means that a `d2l-form` will only pass validation if it and all of its nested descendants pass validation.
 1. Submission is not handled directly by `d2l-form`. Instead, all form data will be aggregated and passed back to the caller via an event. The caller is then responsible for submitting the data.
 
-If you're looking to emulate native form element submission, `d2l-form-native` may be more appropriate.
-
 <!-- docs: demo code properties name:d2l-form sandboxTitle:'Form' autoSize:false display:block size:large -->
 ```html
 <script type="module">
@@ -174,68 +166,3 @@ In the above example, calling `submit` on form `#a` will cause forms `#a` and `#
 - `d2l-form#a` will be submitted because submit was called on it directly.
 - `d2l-form#b` will be submitted because it is nested directly within `#a`'s slot.
 - `d2l-form#root`, `d2l-form#c` and the `d2l-form` within the shadow root of `#d` will _**not**_ be submitted because they are ancestors of `#a` rather than descendants.
-
-## Native Form [d2l-form-native]
-
-The `d2l-form-native` component can be used to build sections containing interactive controls that are validated and submitted as a group.
-
-It differs from the native HTML `form` element in 2 ways:
-1. It supports custom form elements made using the [`FormElementMixin`](./form-element-mixin.md) in addition to native form elements like `input`, `select` and `textarea`.
-1. Upon validation, it will display an error summary that contains error messages for any elements that failed validation.
-
-If you're looking to submit form data via your own API calls or nest multiple forms within each other, `d2l-form` may be more appropriate.
-
-<!-- docs: demo code properties name:d2l-form-native sandboxTitle:'Native Form' autoSize:false display:block size:medium -->
-```html
-<script type="module">
-  import '@brightspace-ui/core/components/form/form-native.js';
-  import '@brightspace-ui/core/components/inputs/input-text.js';
-
-  const button = document.querySelector('button');
-  const form = document.querySelector('d2l-form-native');
-  button.addEventListener('click', () => {
-    form.submit();
-  });
-
-  function handleSubmission(e) {
-    const { formData } = e.detail;
-    const email = formData.get('email');
-    const pets = formData.get('pets');
-    console.log('Form submission data: email = ' + email + ', pets = ' + pets);
-  }
-  form.addEventListener('formdata', (e) => handleSubmission(e));
-</script>
-<d2l-form-native>
-  <d2l-input-text required label="Email" name="email" type="email"></d2l-input-text>
-  <select class="d2l-input-select" name="pets" required>
-    <option value="">--Please choose an option--</option>
-    <option value="porpoise">Porpoise</option>
-    <option value="house hippo">House Hippo</option>
-    <option value="spiker monkey">Spider Monkey</option>
-    <option value="capybara">Capybara</option>
-  </select>
-  <button name="action" value="save" type="submit">Save</button>
-</d2l-form-native>
-```
-
-<!-- docs: start hidden content -->
-### Properties
-
-| Property | Type | Description |
-|---|---|---|
-| `action` | String | The URL that processes the form submission. |
-| `enctype` | default: `"application/x-www-form-urlencoded"`<br>`"multipart/form-data"`<br>`"text/plain"` | If the value of the method attribute is post, enctype is the MIME type of the form submission. |
-| `method` | default: `"get"`<br>`"post"` | The URL that processes the form submission. |
-| `target` | default: `"_self"`<br>`"_blank"`<br>`"_parent"`<br>`"_top"` | Indicates where to display the response after submitting the form. |
-| `track-changes` | Boolean, default: `false` | Indicates that the form should interrupt and warn on navigation if the user has unsaved changes. |
-
-### Events
-- `submit`: Dispatched when the form is submitted. Cancelling this event will prevent form submission.
-- `formdata`: Dispatched after the entry list representing the form's data is constructed. This happens when the form is submitted just prior to submission. The form data can be obtained from the `detail`'s `formData` property.
-- `d2l-form-dirty`: Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not.
-<!-- docs: end hidden content -->
-
-### Methods
-- `submit()`: Submits the form to the server. This will first perform validation on all elements within the form. Submission will only happen if validation succeeds.
-- `requestSubmit(submitter)`: Requests that the form be submitted using the specified submit button and its corresponding configuration. A `button`'s value is only submitted if that button is both part of the form and the `submitter`.
-- `async validate()`: Validates the form without submitting even if validation succeeds. This returns a `Map` mapping from an element to the list of error messages associated with it.

package/components/form/form.js

@@ -1,7 +1,13 @@
+import './form-errory-summary.js';
+import '../tooltip/tooltip.js';
+import '../link/link.js';
 import { css, html, LitElement } from 'lit';
 import { findFormElements, flattenMap, getFormElementData, isCustomFormElement, isNativeFormElement } from './form-helper.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
-import { FormMixin } from './form-mixin.js';
+import { getComposedActiveElement } from '../../helpers/focus.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { localizeFormElement } from './form-element-localize-helper.js';
 
 /**
  * A component that can be used to build sections containing interactive controls that are validated and submitted as a group.
@@ -9,7 +15,7 @@ import { FormMixin } from './form-mixin.js';
  * @slot - The native and custom form elements that participate in validation and submission
  * @fires d2l-form-connect - Internal event
  */
-class Form extends FormMixin(LitElement) {
+class Form extends LocalizeCoreElement(LitElement) {
 
 	static get properties() {
 		return {
@@ -20,6 +26,13 @@ class Form extends FormMixin(LitElement) {
 			 * @type {boolean}
 			 */
 			noNesting: { type: Boolean, attribute: 'no-nesting', reflect: true },
+			/**
+			 * Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.
+			 * @type {boolean}
+			 */
+			trackChanges: { type: Boolean, attribute: 'track-changes', reflect: true },
+			_errors: { type: Object },
+			_hasErrors: { type: Boolean, attribute: '_has-errors', reflect: true },
 		};
 	}
 
@@ -39,21 +52,37 @@ class Form extends FormMixin(LitElement) {
 
 	constructor() {
 		super();
+		this.trackChanges = false;
+		this._errors = new Map();
 		this._isSubForm = false;
 		this._nestedForms = new Map();
+		this._firstUpdateResolve = null;
+		this._firstUpdatePromise = new Promise((resolve) => {
+			this._firstUpdateResolve = resolve;
+		});
+		this._tooltips = new Map();
+		this._validationCustoms = new Set();
+
+		this._onUnload = this._onUnload.bind(this);
+		this._onNativeSubmit = this._onNativeSubmit.bind(this);
 
 		/** @ignore */
 		this.addEventListener('d2l-form-connect', this._onFormConnect);
+		this.addEventListener('d2l-form-errors-change', this._onErrorsChange);
+		this.addEventListener('d2l-form-element-errors-change', this._onErrorsChange);
+		this.addEventListener('d2l-validation-custom-connected', this._validationCustomConnected);
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
+		window.addEventListener('beforeunload', this._onUnload);
 		/** @ignore */
 		this._isSubForm = !this.dispatchEvent(new CustomEvent('d2l-form-connect', { bubbles: true, composed: true, cancelable: true }));
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		window.removeEventListener('beforeunload', this._onUnload);
 		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-form-disconnect'));
 		this._isSubForm = false;
@@ -62,6 +91,10 @@ class Form extends FormMixin(LitElement) {
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
+		this.addEventListener('change', this._onFormElementChange);
+		this.addEventListener('input', this._onFormElementChange);
+		this.addEventListener('focusout', this._onFormElementChange);
+		this._firstUpdateResolve();
 		this._setupDialogValidationReset();
 	}
 
@@ -79,6 +112,13 @@ class Form extends FormMixin(LitElement) {
 		`;
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('_errors')) {
+			this._hasErrors = this._errors.size > 0;
+		}
+	}
+
 	async requestSubmit(submitter) {
 		const errors = await this.validate();
 		if (errors.size > 0) {
@@ -145,6 +185,34 @@ class Form extends FormMixin(LitElement) {
 		return flattenedErrorMap;
 	}
 
+	_displayInvalid(ele, message) {
+		let tooltip = this._tooltips.get(ele);
+		if (!tooltip) {
+			tooltip = document.createElement('d2l-tooltip');
+			tooltip.for = ele.id;
+			tooltip.align = 'start';
+			tooltip.state = 'error';
+			ele.parentNode.append(tooltip);
+			this._tooltips.set(ele, tooltip);
+
+			tooltip.appendChild(document.createTextNode(message));
+		} else if (tooltip.innerText.trim() !== message.trim()) {
+			tooltip.textContent = '';
+			tooltip.appendChild(document.createTextNode(message));
+			tooltip.updatePosition();
+		}
+		ele.setAttribute('aria-invalid', 'true');
+	}
+
+	_displayValid(ele) {
+		const tooltip = this._tooltips.get(ele);
+		if (tooltip) {
+			this._tooltips.delete(ele);
+			tooltip.remove();
+		}
+		ele.setAttribute('aria-invalid', 'false');
+	}
+
 	_findFormElements() {
 		const isFormElementPredicate = ele => this._hasSubForms(ele);
 		const visitChildrenPredicate = ele => !this._hasSubForms(ele);
@@ -163,6 +231,14 @@ class Form extends FormMixin(LitElement) {
 		return !this._isSubForm || this.noNesting;
 	}
 
+	_onErrorsChange(e) {
+		if (e.target === this) {
+			return;
+		}
+		e.stopPropagation();
+		this._updateErrors(e.target, e.detail.errors);
+	}
+
 	_onFormConnect(e) {
 		if (e.target === this) {
 			return;
@@ -195,6 +271,37 @@ class Form extends FormMixin(LitElement) {
 
 	}
 
+	async _onFormElementChange(e) {
+		const ele = e.target;
+
+		if ((isNativeFormElement(ele) || isCustomFormElement(ele)) && e.type !== 'focusout') {
+			this._dirty = true;
+			/** Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not. */
+			this.dispatchEvent(new CustomEvent('d2l-form-dirty'));
+		}
+
+		if (!isNativeFormElement(ele)) {
+			return;
+		}
+		e.stopPropagation();
+		const errors = await this._validateFormElement(ele, e.type === 'focusout');
+		this._updateErrors(ele, errors);
+	}
+
+	_onNativeSubmit(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		const submitter = e.submitter || getComposedActiveElement();
+		this.requestSubmit(submitter);
+	}
+
+	_onUnload(e) {
+		if (this.trackChanges && this._dirty) {
+			e.preventDefault();
+			e.returnValue = false;
+		}
+	}
+
 	_setupDialogValidationReset() {
 		const dialogAncestor = findComposedAncestor(
 			this,
@@ -229,5 +336,59 @@ class Form extends FormMixin(LitElement) {
 		this.dispatchEvent(new CustomEvent('d2l-form-submit', { detail: { formData } }));
 	}
 
+	_updateErrors(ele, errors) {
+
+		if (!this._errors.has(ele)) {
+			return false;
+		}
+		if (Array.from(errors).length === 0) {
+			this._errors.delete(ele);
+		} else {
+			this._errors.set(ele, errors);
+		}
+		const detail = { bubbles: true, composed: true, detail: { errors: this._errors } };
+		/** @ignore */
+		this.dispatchEvent(new CustomEvent('d2l-form-errors-change', detail));
+		this.requestUpdate('_errors');
+		return true;
+	}
+
+	async _validateFormElement(ele, showNewErrors) {
+		// if validation occurs before we've rendered,
+		// localization may not have loaded yet
+		await this._firstUpdatePromise;
+		ele.id = ele.id || getUniqueId();
+		if (isCustomFormElement(ele)) {
+			return ele.validate(showNewErrors);
+		} else if (isNativeFormElement(ele)) {
+			const customs = [...this._validationCustoms].filter(custom => custom.forElement === ele);
+			const results = await Promise.all(customs.map(custom => custom.validate()));
+			const errors = customs.map(custom => custom.failureText).filter((_, i) => !results[i]);
+			if (!ele.checkValidity()) {
+				const validationMessage = localizeFormElement(this.localize.bind(this), ele);
+				errors.unshift(validationMessage);
+			}
+			if (errors.length > 0 && (showNewErrors || ele.getAttribute('aria-invalid') === 'true')) {
+				this._displayInvalid(ele, errors[0]);
+			} else {
+				this._displayValid(ele);
+			}
+			return errors;
+		}
+		return [];
+	}
+
+	_validationCustomConnected(e) {
+		e.stopPropagation();
+		const custom = e.composedPath()[0];
+		this._validationCustoms.add(custom);
+
+		const onDisconnect = () => {
+			custom.removeEventListener('d2l-validation-custom-disconnected', onDisconnect);
+			this._validationCustoms.delete(custom);
+		};
+		custom.addEventListener('d2l-validation-custom-disconnected', onDisconnect);
+	}
+
 }
 customElements.define('d2l-form', Form);

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

@@ -10,10 +10,12 @@
 			import '../../demo/demo-page.js';
 			import '../../dropdown/dropdown-menu.js';
 			import '../../dropdown/dropdown-more.js';
+			import '../../icons/icon.js';
 			import '../list-item-button.js';
 			import '../list-item-content.js';
 			import './list-item-custom.js';
 			import '../list-item.js';
+			import '../list-item-nav-button.js';
 			import '../list-controls.js';
 			import '../list.js';
 			import '../../menu/menu.js';
@@ -21,6 +23,7 @@
 			import '../../paging/pager-load-more.js';
 			import '../../selection/selection-action.js';
 			import '../../switch/switch.js';
+			import '../../tooltip/tooltip-help.js';
 
 			import './demo-list-nested-iterations-helper.js';
 		</script>
@@ -29,7 +32,6 @@
 
 		<d2l-demo-page page-title="d2l-list (nested)">
 
-
 			<d2l-demo-snippet>
 				<template>
 					<d2l-list grid>
@@ -224,6 +226,66 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Side nav item</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-list grid style="width: 334px;">
+						<d2l-list-item-nav-button key="L1-1" label="Welcome!" color="#006fbf" expandable expanded draggable>
+							<d2l-list-item-content>
+								<div>Welcome!</div>
+							</d2l-list-item-content>
+							<d2l-list slot="nested" grid>
+								<d2l-list-item-nav-button key="L2-1" label="Syallabus Confirmation" draggable>
+									<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">Due: May 2, 2023</d2l-tooltip-help></div>
+									</d2l-list-item-content>
+								</d2l-list-item-nav-button>
+							</d2l-list>
+						</d2l-list-item-nav-button>
+						<d2l-list-item-nav-button key="L2-2" label="Unit 1: Poetry" color="#29a6ff" expandable expanded draggable>
+							<d2l-list-item-content>
+								<div>Unit 1: Fiction</div>
+								<div slot="secondary"><d2l-tooltip-help text="Starts: May 2, 2023 at 2 pm">Starts: May 2, 2023</d2l-tooltip-help></div>
+							</d2l-list-item-content>
+							<d2l-list slot="nested" grid>
+								<d2l-list-item-nav-button key="L3-2" label="Fiction" draggable>
+									<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-button>
+								<d2l-list-item-nav-button key="L3-2" label="Ten rules for writing fiction" draggable>
+									<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>
+								</d2l-list-item-nav-button>
+							</d2l-list>
+						</d2l-list-item-nav-button>
+					</d2l-list>
+					<script>
+						(demo => {
+							let currentItem = document.querySelector('d2l-list-item-nav-button[current]');
+							demo.addEventListener('d2l-list-item-button-click', (e) => {
+								console.log('d2l-list-item-nav-button: click event');
+
+								if (!e.target.expandable) {
+									currentItem = e.target;
+									return;
+								}
+
+								if (currentItem !== e.target) {
+									e.target.expanded = true;
+									currentItem = e.target;
+								} else {
+									e.target.expanded = !e.target.expanded;
+								}
+							});
+						})(document.currentScript.parentNode);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>All Iterations</h2>
 
 			<d2l-demo-snippet full-width>

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

@@ -2,6 +2,7 @@ import '../colors/colors.js';
 import { css, html, nothing } from 'lit';
 import { isInteractiveInListItemComposedPath, ListItemMixin } from './list-item-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 export const ListItemButtonMixin = superclass => class extends ListItemMixin(superclass) {
 	static get properties() {
@@ -10,7 +11,8 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 			 * Disables the primary action button
 			 * @type {boolean}
 			 */
-			buttonDisabled : { type: Boolean, attribute: 'button-disabled', reflect: true }
+			buttonDisabled : { type: Boolean, attribute: 'button-disabled', reflect: true },
+			_ariaCurrent: { type: String }
 		};
 	}
 
@@ -75,6 +77,12 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 		this.buttonDisabled = false;
 	}
 
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		this._button = this.shadowRoot.querySelector(`#${this._primaryActionId}`);
+	}
+
 	willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
 		if (changedProperties.has('buttonDisabled') && this.buttonDisabled === true) this._hoveringPrimaryAction = false;
@@ -115,6 +123,7 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 	_renderPrimaryAction(labelledBy, content) {
 		return html`<button 
 			id="${this._primaryActionId}" 
+			aria-current="${ifDefined(this._ariaCurrent)}"
 			aria-labelledby="${labelledBy}" 
 			@click="${this._onButtonClick}" 
 			@focusin="${this._onButtonFocus}"

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

@@ -0,0 +1,124 @@
+import '../colors/colors.js';
+import { css } from 'lit';
+import { ListItemButtonMixin } from './list-item-button-mixin.js';
+
+export const ListItemNavButtonMixin = superclass => class extends ListItemButtonMixin(superclass) {
+
+	static get properties() {
+		return {
+			/**
+			 * Whether the list item is the current page in a navigation context
+			 * @type {boolean}
+			 */
+			current: { type: Boolean, reflect: true },
+			_childCurrent: { type: Boolean, reflect: true, attribute: '_child-current' },
+		};
+	}
+
+	static get styles() {
+
+		const styles = [ css`
+			:host(:not([button-disabled])) {
+				--d2l-list-item-content-text-color: var(--d2l-color-ferrite);
+			}
+			.d2l-list-item-content ::slotted(*) {
+				width: 100%;
+			}
+			:host([current]) [slot="outside-control-container"] {
+				border: 3px solid var(--d2l-color-celestine);
+				margin-block: -1px;
+			}
+			:host([_focusing-primary-action]:not([current])) [slot="outside-control-container"] {
+				border: 2px solid var(--d2l-color-celestine);
+			}
+			:host([current]) [slot="control-container"]::before,
+			:host([current]) [slot="control-container"]::after {
+				border-color: transparent;
+			}
+			:host([_focusing-primary-action]) .d2l-list-item-content {
+				--d2l-list-item-content-text-outline: none;
+			}
+			:host([_hovering-primary-action]) .d2l-list-item-content,
+			:host([_focusing-primary-action]) .d2l-list-item-content {
+				--d2l-list-item-content-text-color: var(--d2l-color-ferrite);
+				--d2l-list-item-content-text-decoration: none;
+			}
+
+		` ];
+
+		super.styles && styles.unshift(super.styles);
+		return styles;
+	}
+
+	constructor() {
+		super();
+		this.current = false;
+		this._childCurrent = false;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener('d2l-list-item-nav-set-child-current', this.#setChildCurrent);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener('d2l-list-item-nav-set-child-current', this.#setChildCurrent);
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		if (this.current) {
+			this.dispatchSetChildCurrentEvent(true);
+		}
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.get('current') !== undefined) {
+			/** @ignore */
+			this.dispatchEvent(new CustomEvent('d2l-list-item-property-change', { bubbles: true, composed: true, detail: { name: 'current', value: this.current } }));
+		}
+	}
+
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('current') || changedProperties.has('_childCurrent')) {
+			if (this.current) {
+				this.#setAriaCurrent('page');
+			} else if (this._childCurrent) {
+				this.#setAriaCurrent('location');
+			} else {
+				this.#setAriaCurrent(undefined);
+			}
+		}
+	}
+
+	/**
+	 * Internal. Do not use.
+	 */
+	dispatchSetChildCurrentEvent(val) {
+		/** @ignore */
+		this.dispatchEvent(new CustomEvent('d2l-list-item-nav-set-child-current', { bubbles: true, composed: true, detail: { value: val } }));
+	}
+
+	_onButtonClick(e) {
+		if (!this._getDescendantClicked(e)) {
+			this.current = true;
+			this._childCurrent = false;
+		}
+		super._onButtonClick(e);
+	}
+
+	#setAriaCurrent(val) {
+		this._ariaCurrent = val;
+	}
+
+	async #setChildCurrent(e) {
+		await this.updateComplete; // ensure button exists
+		if (e.target === this) return;
+		this._childCurrent = e.detail.value;
+	}
+
+};