@brightspace-ui/core 1.197.4 → 1.200.0

package/components/dropdown/dropdown-opener-mixin.js

@@ -60,11 +60,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this._isHovering = false;
 		this._isFading = false;
 
-		this.__onWholeKeypress = this.__onKeypress.bind(this);
-		this.__onMouseUp = this.__onMouseUp.bind(this);
-		this.__onMouseEnter = this.__onMouseEnter.bind(this);
-		this.__onMouseLeave = this.__onMouseLeave.bind(this);
-		this.__onTouchStart = this.__onTouchStart.bind(this);
+		this._onOutsideClick = this._onOutsideClick.bind(this);
 		this._contentRendered = null;
 		this._openerRendered = null;
 	}
@@ -77,7 +73,6 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this.addEventListener('mouseup', this.__onMouseUp);
 		this.addEventListener('mouseenter', this.__onMouseEnter);
 		this.addEventListener('mouseleave', this.__onMouseLeave);
-		this.addEventListener('touchstart', this.__onTouchStart);
 
 		if (this.openOnHover) {
 			document.body.addEventListener('mouseup', this._onOutsideClick);
@@ -91,7 +86,6 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this.removeEventListener('mouseup', this.__onMouseUp);
 		this.removeEventListener('mouseenter', this.__onMouseEnter);
 		this.removeEventListener('mouseleave', this.__onMouseLeave);
-		this.removeEventListener('touchstart', this.__onTouchStart);
 
 		if (this.openOnHover) {
 			document.body.removeEventListener('mouseup', this._onOutsideClick);
@@ -172,6 +166,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 			return;
 		}
 		content.toggleOpen(applyFocus);
+		this._isOpen = !this._isOpen;
 	}
 
 	__getContentElement() {
@@ -190,47 +185,57 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this._isOpenedViaClick = false;
 	}
 
-	/* used by open-on-hover option */
-	__onDropdownMouseEnter() {
+	__onDropdownMouseUp() {
 		this._isOpen = true;
 		this._isFading = false;
+		this._isHovering = false;
+		this._isOpenedViaClick = true;
 		this._closeTimerStop();
 	}
 
-	/* used by open-on-hover option */
-	__onDropdownMouseLeave(e) {
-		if (this.__getContentElement() !== e.target) return;
-		if (!this._isOpenedViaClick) this._isOpen = false;
-		this._closeTimerStart();
-	}
-
 	__onKeypress(e) {
-		if (isComposedAncestor(e.srcElement, this.getOpenerElement())) {
-			this.__onOpenerKeyPress(e);
+		if (e.srcElement === this || isComposedAncestor(this.getOpenerElement(), e.srcElement)) {
+			if (e.keyCode !== 13 && e.keyCode !== 32) return;
+			if (this.noAutoOpen) return;
+			if (!this.openOnHover) {
+				this.toggleOpen(true);
+			} else {
+				this._closeTimerStop();
+				e.preventDefault();
+				this._isOpenedViaClick = true;
+				this.openDropdown(true);
+			}
 		}
 	}
 
-	__onMouseEnter(e) {
+	async __onMouseEnter() {
 		if (!this.openOnHover) return;
-		if (isComposedAncestor(e.srcElement, this.getOpenerElement())) {
-			this.__onOpenerMouseEnter(e);
-		} else if (isComposedAncestor(this.__getContentElement(), e.srcElement)) {
-			this.__onDropdownMouseEnter(e);
-		}
+		// do not respond to hover events on mobile screens
+		const dropdownContent = this.__getContentElement();
+		if (dropdownContent._useMobileStyling) return;
+		clearTimeout(this._dismissTimerId);
+		if (!this._isOpen) await this.openDropdown(false);
+		this._closeTimerStop();
+		if (!this._isOpenedViaClick) this._isHovering = true;
 	}
 
-	__onMouseLeave(e) {
+	async __onMouseLeave() {
 		if (!this.openOnHover) return;
-		if (isComposedAncestor(e.srcElement, this.getOpenerElement())) {
-			this.__onOpenerMouseLeave(e);
-		} else if (isComposedAncestor(this.__getContentElement(), e.srcElement)) {
-			this.__onDropdownMouseLeave(e);
-		}
+		// do not respond to hover events on mobile screens
+		const dropdownContent = this.__getContentElement();
+		if (dropdownContent._useMobileStyling) return;
+		this._isHovering = false;
+		if (this._isOpenedViaClick) return;
+		//Wait before closing so we don't lose hover when we jump from opener to card
+		clearTimeout(this._dismissTimerId);
+		await this.closeDropdown(true);
 	}
 
 	__onMouseUp(e) {
-		if (isComposedAncestor(e.srcElement, this.getOpenerElement())) {
+		if (e.srcElement === this || isComposedAncestor(this.getOpenerElement(), e.srcElement)) {
 			this.__onOpenerMouseUp(e);
+		} else if (this.openOnHover && isComposedAncestor(this.__getContentElement(), e.srcElement)) {
+			this.__onDropdownMouseUp();
 		}
 	}
 
@@ -244,42 +249,6 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this._isFading = false;
 	}
 
-	__onOpenerKeyPress(e) {
-		if (e.keyCode !== 13 && e.keyCode !== 32) return;
-		if (this.noAutoOpen) return;
-		if (!this.openOnHover) {
-			this.toggleOpen(true);
-		} else {
-			this._closeTimerStop();
-			e.preventDefault();
-			this._isOpenedViaClick = true;
-			this.openDropdown(true);
-		}
-	}
-
-	/* used by open-on-hover option */
-	async __onOpenerMouseEnter() {
-		// do not respond to hover events on mobile screens
-		const dropdownContent = this.__getContentElement();
-		if (dropdownContent._useMobileStyling) return;
-		clearTimeout(this._dismissTimerId);
-		if (!this._isOpen) await this.openDropdown(false);
-		this._closeTimerStop();
-		this._isHovering = true;
-	}
-
-	/* used by open-on-hover option */
-	async __onOpenerMouseLeave() {
-		// do not respond to hover events on mobile screens
-		const dropdownContent = this.__getContentElement();
-		if (dropdownContent._useMobileStyling) return;
-		this._isHovering = false;
-		if (this._isOpenedViaClick) return;
-		//Wait before closing so we don't lose hover when we jump from opener to card
-		clearTimeout(this._dismissTimerId);
-		await this.closeDropdown(true);
-	}
-
 	__onOpenerMouseUp(e) {
 		if (this.noAutoOpen) return;
 		if (this.openOnHover) {
@@ -296,27 +265,6 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		} else this.toggleOpen(false);
 	}
 
-	/* used by open-on-hover option */
-	__onOpenerTouch(e) {
-		//Prevents touch from triggering mouseover/hover behavior
-		e.preventDefault();
-		this._closeTimerStop();
-		if (this._isOpen) {
-			this.closeDropdown();
-		}
-		else {
-			this._isOpenedViaClick = true;
-			this.openDropdown(true);
-		}
-	}
-
-	__onTouchStart(e) {
-		if (!this.openOnHover) return;
-		if (isComposedAncestor(e.srcElement, this.getOpenerElement())) {
-			this.__onOpenerTouch(e);
-		}
-	}
-
 	/* used by open-on-hover option */
 	_closeTimerStart() {
 		if (this._isOpen) return;
@@ -339,10 +287,11 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 	_onOutsideClick(e) {
 		if (!this._isOpen) return;
 		const isWithinDropdown = isComposedAncestor(this.__getContentElement(), e.composedPath()[0]);
+		const isWithinOpener = isComposedAncestor(this.getOpenerElement(), e.composedPath()[0]);
 		const isBackdropClick = isWithinDropdown
 			&& this.__getContentElement()._useMobileStyling
 			&& e.composedPath().find(node => node.nodeName === 'D2L-BACKDROP');
-		if (!isWithinDropdown || isBackdropClick) {
+		if (!isWithinOpener && (!isWithinDropdown || isBackdropClick)) {
 			this.closeDropdown();
 		}
 	}

package/components/filter/filter.js

@@ -244,10 +244,10 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			const countBadgeId = `filters-applied-count-${dimension.key}`;
 			const filtersAppliedText = `${this.localize('components.filter.filterCountDescription', { number: dimension.appliedCount })}`;
 			return html`<d2l-menu-item text="${dimension.text}" description="${dimension.text}." aria-describedby="${countBadgeId}">
-				${builtDimension}
 				<div slot="supporting">
 					<d2l-count-badge id="${countBadgeId}" number="${dimension.appliedCount}" max-digits="2" text="${filtersAppliedText}" hide-zero></d2l-count-badge>
 				</div>
+				${builtDimension}
 			</d2l-menu-item>`;
 		});
 	}
@@ -364,6 +364,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				id="${SET_DIMENSION_ID_PREFIX}${dimension.key}"
 				@d2l-list-selection-change="${this._handleChangeSetDimension}"
 				extend-separators
+				grid
 				?selection-single="${dimension.selectionSingle}">
 				${dimension.values.map(item => html`
 					<d2l-list-item

package/components/selection/README.md

@@ -2,50 +2,84 @@
 
 The selection components (`d2l-selection-action`, `d2l-selection-input`, `d2l-selection-select-all`, `d2l-selection-summary`, `d2l-selection-action`) are low-level components that provide the ability to create selection interfaces with select-all and bulk-action behaviours.
 
+<!-- docs: start hidden content -->
 ![Selection](./screenshots/selection-multiple.png?raw=true)
 
 ![Selection](./screenshots/selection-single.png?raw=true)
+<!-- docs: end hidden content -->
 
 ## SelectionMixin
 
-The selection components above work with a component that extends the `SelectionMixin`, which acts like a controller for the checkboxes, radios, actions, etc. The `d2l-selection-input` component must be placed _within_ the component that extends the `SelectionMixin`.  The other selection components may also be placed inside the `SelectionMixin` component, or in the same DOM scope with the `selection-for` attribute set to the id of that component.
-
-The `d2l-list` already extends `SelectionMixin` and should always be used for lists, however a custom selection control can be easily defined to enable the use of these selection controls in different semantic contexts or radically different layouts. The `SelectionMixin` defines the `selection-single` attribute that consumers can specify for single selection behaviour.
-
-```javascript
-import { html, LitElement } from 'lit-element/lit-element.js';
-import { SelectionMixin } from '@brightspace-ui/core/components/selection-mixin.js';
-
-class CustomSelection extends SelectionMixin(LitElement) {
-  render() {
-    return html`
-      <slot></slot>
-    `;
-  }
-}
-customElements.define('d2l-custom-selection', CustomSelection);
-```
-
-**Properties:**
-
-| Property | Type | Description |
-|--|--|--|
-| `selection-single` | Boolean | Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item. |
-
-The selection components can then be used within the custom selection component as shown below.
+The selection components below work with a component that extends the `SelectionMixin`, which acts like a controller for the checkboxes, radios, actions, etc. The `d2l-selection-input` component must be placed _within_ the component that extends the `SelectionMixin`.  The other selection components may also be placed inside the `SelectionMixin` component, or in the same DOM scope with the `selection-for` attribute set to the id of that component.
 
+<!-- docs: demo live name:d2l-demo-selection display:block -->
 ```html
+<script type="module">
+  import { css, html, LitElement } from 'lit-element/lit-element.js';
+  import { SelectionMixin } from '@brightspace-ui/core/components/selection/selection-mixin.js';
+
+  class CustomSelection extends SelectionMixin(LitElement) {
+    static get styles() {
+      return css`
+        :host {
+          display: block;
+        }
+      `;
+    }
+    render() {
+      return html`
+        <slot></slot>
+      `;
+    }
+  }
+  customElements.define('d2l-demo-selection', CustomSelection);
+</script>
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-action.js';
   import '@brightspace-ui/core/components/selection/selection-input.js';
   import '@brightspace-ui/core/components/selection/selection-select-all.js';
   import '@brightspace-ui/core/components/selection/selection-summary.js';
 </script>
-<d2l-custom-selection>
-  <div>
-    <d2l-selection-select-all></d2l-selection-select-all>
-    <d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
-    <d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
+<!-- docs: start hidden content -->
+<script type="module">
+  import '@brightspace-ui/core/components/selection/demo/demo-selection.js';
+</script>
+<style>
+  ul {
+    padding: 0;
+  }
+  li {
+    list-style-type: none;
+  }
+  li, .d2l-selection-header, .d2l-selection-header-wrapper {
+    align-items: center;
+    display: flex;
+  }
+  d2l-selection-input {
+    margin-right: 10px;
+  }
+  [dir="rtl"] d2l-selection-input {
+    margin-left: 10px;
+    margin-right: 0;
+  }
+  .d2l-selection-header-wrapper {
+    flex-wrap: wrap;
+  }
+  .d2l-selection-header {
+    flex: auto;
+  }
+  d2l-selection-summary {
+    flex: none;
+  }
+</style>
+<!-- docs: end hidden content -->
+<d2l-demo-selection>
+  <div class="d2l-selection-header-wrapper">
+    <div class="d2l-selection-header">
+      <d2l-selection-select-all></d2l-selection-select-all>
+      <d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
+      <d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
+    </div>
     <d2l-selection-summary></d2l-selection-summary>
   </div>
   <ul>
@@ -53,21 +87,26 @@ The selection components can then be used within the custom selection component
     <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
     <li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
   </ul>
-</d2l-custom-selection>
+</d2l-demo-selection>
 ```
 
-Or, the non-`d2l-selection-input` components can be used outside the custom selection component as long as they are in the same DOM scope:
+The `d2l-list` already extends `SelectionMixin` and should always be used for lists, however a custom selection control can be easily defined to enable the use of these selection controls in different semantic contexts or radically different layouts. The `SelectionMixin` defines the `selection-single` attribute that consumers can specify for single selection behaviour.
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `selection-single` | Boolean | Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item. |
+<!-- docs: end hidden content -->
+
+### Usage
+
+The selection components can then be used within the custom selection component as shown above, or the non-`d2l-selection-input` components can be used outside the custom selection component as long as they are in the same DOM scope:
 
 ```html
-<script type="module">
-  import '@brightspace-ui/core/components/selection/selection-action.js';
-  import '@brightspace-ui/core/components/selection/selection-input.js';
-  import '@brightspace-ui/core/components/selection/selection-select-all.js';
-  import '@brightspace-ui/core/components/selection/selection-summary.js';
-</script>
 <div>
   <d2l-selection-select-all selection-for="custom"></d2l-selection-select-all>
-  <d2l-selection-action selection-for="custom" text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
   <d2l-selection-action selection-for="custom" text="Settings" icon="tier1:gear"></d2l-selection-action>
   <d2l-selection-summary selection-for="custom"></d2l-selection-summary>
 </div>
@@ -75,73 +114,216 @@ Or, the non-`d2l-selection-input` components can be used outside the custom sele
   <ul>
     <li><d2l-selection-input key="geo" label="Geography" selected></d2l-selection-input>Geography</li>
     <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
-    <li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
   </ul>
 </d2l-custom-selection>
 ```
 
-## d2l-selection-action
+## Selection Action [d2l-selection-action]
 
 The `d2l-selection-action` is an optional component that provides a button for actions associated with the selection component (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the button should be non-interactive if nothing is selected.
 
-**Properties:**
+<!-- docs: demo live name:d2l-selection-action -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/selection/selection-action.js';
+</script>
+<d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow"></d2l-selection-action>
+```
+
+<!-- docs: start hidden content -->
+### Properties
 
 | Property | Type | Description |
-|--|--|--|
+|---|---|---|
 | `icon` | String | Preset icon key (e.g. "tier1:gear"). |
 | `requires-selection` | Boolean | Whether the action requires one or more selected items. If no items are selected, the action button will be focusable and a hint displayed in a tooltip. |
 | `selection-for` | String | Id of the corresponding `SelectionMixin` component, if not placed within it. |
 | `text` | String, required | Text to be shown for the action. |
 
-**Events:**
+### Events
 
 | Event | Description |
-|--|--|
+|---|---|
 | `d2l-selection-action-click` | Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected. |
+<!-- docs: end hidden content -->
 
-## d2l-selection-input
+## Selection Input [d2l-selection-input]
 
 The `d2l-selection-input` is a required component in selection controls - without it, there wouldn't be anything for the user to select! Note: `d2l-list-item` already provides a selection input for selectable list items. If `d2l-selection-input` is placed within a selection control that specifies `selection-single`, then radios will be rendered instead of checkboxes.
 
-**Properties:**
+<!-- docs: demo live name:d2l-selection-input display:block -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/selection/selection-input.js';
+  import '@brightspace-ui/core/components/selection/demo/demo-selection.js';
+</script>
+<!-- docs: start hidden content -->
+<style>
+  ul {
+    padding: 0;
+  }
+  li {
+    list-style-type: none;
+    align-items: center;
+    display: flex;
+  }
+  d2l-selection-input {
+    margin-right: 10px;
+  }
+</style>
+<!-- docs: end hidden content -->
+<d2l-demo-selection>
+  <ul>
+    <li><d2l-selection-input key="geo" label="Geography" selected></d2l-selection-input>Geography</li>
+    <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
+  </ul>
+</d2l-demo-selection>
+```
+
+<!-- docs: start hidden content -->
+### Properties
 
 | Property | Type | Description |
-|--|--|--|
-| `key` | String, required | Key to identify the the selectable. |
+|---|---|---|
+| `key` | String, required | Key to identify the selectable. |
 | `label` | String | Accessible hidden label for the input. |
 | `labelled-by` | String | Id reference to the accessible label for the input. **Note:** if specified, it must reference an element in the same DOM context. |
 | `selected` | Boolean | State of the input. |
 
-**Accessibility:** either `label` or `labelled-by` is required.
-
-**Events:**
+### Events
 
 | Event | Description |
-|--|--|
+|---|---|
 | `d2l-selection-change` | Dispatched when the state of the input changes. |
+<!-- docs: end hidden content -->
 
-## d2l-selection-select-all
+### Accessibility Properties
+
+Either `label` or `labelled-by` is **required**.
+
+## Select All [d2l-selection-select-all]
 
 The `d2l-selection-select-all` is an optional component that provides a checkbox for bulk selecting the selectable elements within the selection control. Its state will also be automatically updated when the state of the selectable elements change.
 
-**Properties:**
+In the example below, setting `selection-for` to `other-list` demonstrates the ability to use `d2l-selection-select-all` for `d2l-select-input` outside of the custom selection element.
+
+<!-- docs: demo live name:d2l-selection-select-all display:block -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/selection/selection-action.js';
+  import '@brightspace-ui/core/components/selection/selection-input.js';
+  import '@brightspace-ui/core/components/selection/selection-select-all.js';
+  import '@brightspace-ui/core/components/selection/demo/demo-selection.js';
+</script>
+<!-- docs: start hidden content -->
+<style>
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+  li {
+    align-items: center;
+    display: flex;
+    list-style-type: none;
+  }
+  div {
+    align-items: center;
+    display: flex;
+  }
+  d2l-selection-input {
+    margin-right: 10px;
+  }
+  #other-list {
+    padding-top: 1rem;
+  }
+</style>
+<!-- docs: end hidden content -->
+<d2l-demo-selection>
+  <div>
+    <d2l-selection-select-all></d2l-selection-select-all>
+    <d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
+  </div>
+  <ul>
+    <li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>List 1 item 1</li>
+    <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>List 1 item 2</li>
+  </ul>
+</d2l-demo-selection>
+<d2l-demo-selection id="other-list">
+  <ul>
+    <li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>List 2 item 1</li>
+    <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>List 2 item 2</li>
+  </ul>
+</d2l-demo-selection>
+```
+
+<!-- docs: start hidden content -->
+### Properties
 
 | Property | Type | Description |
-|--|--|--|
+|---|---|---|
 | `disabled` | Boolean | Disables the select all checkbox |
 | `selection-for` | String | Id of the corresponding `SelectionMixin` component, if not placed within it. |
+<!-- docs: end hidden content -->
 
-## d2l-selection-summary
+## Selection Summary [d2l-selection-summary]
 
 The `d2l-selection-summary` is an optional component that shows a simple count of the selected items within the selection control.
 
-**Properties:**
+In the example below, setting `selection-for` to `other-list` demonstrates the ability to use `d2l-selection-summary` for `d2l-select-input` outside of the custom selection element.
+
+<!-- docs: demo live name:d2l-selection-summary display:block -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/selection/selection-input.js';
+  import '@brightspace-ui/core/components/selection/selection-summary.js';
+  import '@brightspace-ui/core/components/selection/demo/demo-selection.js';
+</script>
+<!-- docs: start hidden content -->
+<style>
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+  li {
+    align-items: center;
+    display: flex;
+    list-style-type: none;
+  }
+  div {
+    align-items: center;
+    display: flex;
+  }
+  d2l-selection-input {
+    margin-right: 10px;
+  }
+  #other-list {
+    padding-top: 1rem;
+  }
+</style>
+<!-- docs: end hidden content -->
+<d2l-demo-selection>
+  <div>
+    <d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
+    <d2l-selection-summary></d2l-selection-summary>
+  </div>
+  <ul>
+    <li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>List 1 item 1</li>
+    <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>List 1 item 2</li>
+  </ul>
+</d2l-demo-selection>
+<d2l-demo-selection id="other-list">
+  <ul>
+    <li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>List 2 item 1</li>
+    <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>List 2 item 2</li>
+  </ul>
+</d2l-demo-selection>
+```
+
+<!-- docs: start hidden content -->
+### Properties
 
 | Property | Type | Description |
-|--|--|--|
+|---|---|---|
 | `no-selection-text` | String | Text to display if no items are selected. By default, the "0 selected" message is displayed. |
 | `selection-for` | String | Id of the corresponding `SelectionMixin` component, if not placed within it. |
-
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!
+<!-- docs: end hidden content -->

package/components/selection/demo/demo-selection.js

@@ -0,0 +1,18 @@
+import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { SelectionMixin } from '../selection-mixin.js';
+
+class DemoSelection extends SelectionMixin(LitElement) {
+	static get styles() {
+		return css`
+			:host {
+				display: block;
+			}
+		`;
+	}
+	render() {
+		return html`
+			<slot></slot>
+		`;
+	}
+}
+customElements.define('d2l-demo-selection', DemoSelection);

package/components/selection/demo/selection.html

@@ -10,25 +10,7 @@
 			import '../selection-input.js';
 			import '../selection-select-all.js';
 			import '../selection-summary.js';
-			import { css, html, LitElement } from 'lit-element/lit-element.js';
-			import { SelectionMixin } from '../selection-mixin.js';
-
-			class DemoSelection extends SelectionMixin(LitElement) {
-				static get styles() {
-					return css`
-						:host {
-							display: block;
-						}
-					`;
-				}
-				render() {
-					return html`
-						<slot></slot>
-					`;
-				}
-			}
-			customElements.define('d2l-demo-selection', DemoSelection);
-
+			import './demo-selection.js';
 		</script>
 		<style>
 			ul {
@@ -131,7 +113,7 @@
 						</div>
 
 						<div class="d2l-selection-collection">
-							Pick Your Bread 
+							Pick Your Bread
 							<div class="d2l-selection-header">
 								<d2l-selection-select-all selection-for="collection-2"></d2l-selection-select-all>
 								<d2l-selection-action selection-for="collection-2" text="Add Note" icon="tier1:add-message"></d2l-selection-action>

package/components/selection/selection-action.js

@@ -11,7 +11,7 @@ import { SelectionObserverMixin } from './selection-observer-mixin.js';
 
 /**
  * An action associated with a selection component.
- * @fires d2l-selection-action-click - Dispatched when the user clicks the action; provides the selection info
+ * @fires d2l-selection-action-click - Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected.
  * @fires d2l-selection-observer-subscribe - Internal event
  */
 class Action extends LocalizeCoreElement(SelectionObserverMixin(ButtonMixin(RtlMixin(LitElement)))) {
@@ -19,7 +19,7 @@ class Action extends LocalizeCoreElement(SelectionObserverMixin(ButtonMixin(RtlM
 	static get properties() {
 		return {
 			/**
-			 * Preset icon key (e.g. "tier1:gear")
+			 * Preset icon key (e.g. `tier1:gear`)
 			 * @type {string}
 			 */
 			icon: { type: String, reflect: true },

package/components/selection/selection-input.js

@@ -31,11 +31,12 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 			disabled: { type: Boolean },
 			/**
 			 * Private. Force hovering state of input
+			 * @ignore
 			 * @type {boolean}
 			 */
 			hovering: { type: Boolean },
 			/**
-			 * Key for the selectable
+			 * REQUIRED: Key for the selectable
 			 * @type {string}
 			 */
 			key: { type: String },

package/components/selection/selection-mixin.js

@@ -39,7 +39,7 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 	static get properties() {
 		return {
 			/**
-			 * Whether the selection control is limited to single selection
+			 * Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.
 			 * @type {boolean}
 			 */
 			selectionSingle: { type: Boolean, attribute: 'selection-single' }

package/components/selection/selection-observer-mixin.js

@@ -6,12 +6,13 @@ export const SelectionObserverMixin = superclass => class extends superclass {
 	static get properties() {
 		return {
 			/**
-			 * Id of the SelectionMixin component this component wants to observe (if not located within that component)
+			 * Id of the `SelectionMixin` component this component wants to observe (if not located within that component)
 			 * @type {string}
 			 */
 			selectionFor: { type: String, reflect: true, attribute: 'selection-for' },
 			/**
 			 * The selection info (set by the selection component)
+			 * @ignore
 			 * @type {object}
 			 */
 			selectionInfo: { type: Object },

package/custom-elements.json

@@ -6954,7 +6954,7 @@
         },
         {
           "name": "selection-single",
-          "description": "Whether the selection control is limited to single selection",
+          "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
           "type": "boolean",
           "default": "false"
         }
@@ -6984,7 +6984,7 @@
         {
           "name": "selectionSingle",
           "attribute": "selection-single",
-          "description": "Whether the selection control is limited to single selection",
+          "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
           "type": "boolean",
           "default": "false"
         }
@@ -7966,6 +7966,27 @@
         }
       ]
     },
+    {
+      "name": "d2l-demo-selection",
+      "path": "./components/selection/demo/demo-selection.js",
+      "attributes": [
+        {
+          "name": "selection-single",
+          "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "selectionSingle",
+          "attribute": "selection-single",
+          "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ]
+    },
     {
       "name": "d2l-selection-action",
       "path": "./components/selection/selection-action.js",
@@ -7973,7 +7994,7 @@
       "attributes": [
         {
           "name": "icon",
-          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "description": "Preset icon key (e.g. `tier1:gear`)",
           "type": "string"
         },
         {
@@ -7988,14 +8009,9 @@
         },
         {
           "name": "selection-for",
-          "description": "Id of the SelectionMixin component this component wants to observe (if not located within that component)",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
-        {
-          "name": "selectionInfo",
-          "description": "The selection info (set by the selection component)",
-          "type": "object"
-        },
         {
           "name": "disabled-tooltip",
           "description": "Tooltip text when disabled",
@@ -8012,7 +8028,7 @@
         {
           "name": "icon",
           "attribute": "icon",
-          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "description": "Preset icon key (e.g. `tier1:gear`)",
           "type": "string"
         },
         {
@@ -8030,14 +8046,11 @@
         {
           "name": "selectionFor",
           "attribute": "selection-for",
-          "description": "Id of the SelectionMixin component this component wants to observe (if not located within that component)",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
         {
-          "name": "selectionInfo",
-          "attribute": "selectionInfo",
-          "description": "The selection info (set by the selection component)",
-          "type": "object"
+          "name": "selectionInfo"
         },
         {
           "name": "disabledTooltip",
@@ -8056,7 +8069,7 @@
       "events": [
         {
           "name": "d2l-selection-action-click",
-          "description": "Dispatched when the user clicks the action; provides the selection info"
+          "description": "Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected."
         },
         {
           "name": "d2l-selection-observer-subscribe",
@@ -8074,14 +8087,9 @@
           "description": "Disables the input",
           "type": "boolean"
         },
-        {
-          "name": "hovering",
-          "description": "Private. Force hovering state of input",
-          "type": "boolean"
-        },
         {
           "name": "key",
-          "description": "Key for the selectable",
+          "description": "REQUIRED: Key for the selectable",
           "type": "string"
         },
         {
@@ -8114,16 +8122,10 @@
           "description": "Disables the input",
           "type": "boolean"
         },
-        {
-          "name": "hovering",
-          "attribute": "hovering",
-          "description": "Private. Force hovering state of input",
-          "type": "boolean"
-        },
         {
           "name": "key",
           "attribute": "key",
-          "description": "Key for the selectable",
+          "description": "REQUIRED: Key for the selectable",
           "type": "string"
         },
         {
@@ -8182,13 +8184,8 @@
         },
         {
           "name": "selection-for",
-          "description": "Id of the SelectionMixin component this component wants to observe (if not located within that component)",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
-        },
-        {
-          "name": "selectionInfo",
-          "description": "The selection info (set by the selection component)",
-          "type": "object"
         }
       ],
       "properties": [
@@ -8202,14 +8199,11 @@
         {
           "name": "selectionFor",
           "attribute": "selection-for",
-          "description": "Id of the SelectionMixin component this component wants to observe (if not located within that component)",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
         {
-          "name": "selectionInfo",
-          "attribute": "selectionInfo",
-          "description": "The selection info (set by the selection component)",
-          "type": "object"
+          "name": "selectionInfo"
         }
       ],
       "events": [
@@ -8231,13 +8225,8 @@
         },
         {
           "name": "selection-for",
-          "description": "Id of the SelectionMixin component this component wants to observe (if not located within that component)",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
-        },
-        {
-          "name": "selectionInfo",
-          "description": "The selection info (set by the selection component)",
-          "type": "object"
         }
       ],
       "properties": [
@@ -8250,14 +8239,11 @@
         {
           "name": "selectionFor",
           "attribute": "selection-for",
-          "description": "Id of the SelectionMixin component this component wants to observe (if not located within that component)",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
         {
-          "name": "selectionInfo",
-          "attribute": "selectionInfo",
-          "description": "The selection info (set by the selection component)",
-          "type": "object"
+          "name": "selectionInfo"
         }
       ],
       "events": [
@@ -8273,7 +8259,7 @@
       "attributes": [
         {
           "name": "selection-single",
-          "description": "Whether the selection control is limited to single selection",
+          "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
           "type": "boolean",
           "default": "false"
         }
@@ -8282,7 +8268,7 @@
         {
           "name": "selectionSingle",
           "attribute": "selection-single",
-          "description": "Whether the selection control is limited to single selection",
+          "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
           "type": "boolean",
           "default": "false"
         }

package/package.json

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