@brightspace-ui/core 3.28.5 → 3.28.7

package/components/button/README.md

@@ -170,7 +170,7 @@ Floating workflow buttons `<d2l-floating-buttons>` cause buttons to float or 'do
 
 The best time to use floating workflow buttons is when users need immediate access to the buttons without scrolling. An example is a long or complex form page where it's common for users to make frequent isolated edits rather than sequentially completing the form.
 
-<!-- docs: demo code properties name:d2l-floating-buttons autoSize:false display:block size:xlarge -->
+<!-- docs: demo code properties name:d2l-floating-buttons sandboxTitle:'Floating Buttons' autoSize:false display:block size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/floating-buttons.js';

package/components/form/docs/form.md

@@ -50,7 +50,7 @@ It differs from the native HTML `form` element in 4 ways:
 
 If you're looking to emulate native form element submission, `d2l-form-native` may be more appropriate.
 
-<!-- docs: demo code properties name:d2l-form autoSize:false display:block size:large -->
+<!-- docs: demo code properties name:d2l-form sandboxTitle:'Form' autoSize:false display:block size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/form/form.js';
@@ -184,7 +184,7 @@ It differs from the native HTML `form` element in 2 ways:
 
 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 autoSize:false display:block size:medium -->
+<!-- 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';

package/components/inputs/docs/input-checkbox.md

@@ -31,7 +31,7 @@ Checkboxes are used in forms to toggle an option or preference.
 
 The `<d2l-input-checkbox>` element can be used to get a checkbox and optional visible label.
 
-<!-- docs: demo code properties name:d2l-input-checkbox display:block -->
+<!-- docs: demo code properties name:d2l-input-checkbox sandboxTitle:'Checkbox Input' display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-checkbox.js';

package/components/inputs/docs/input-color.md

@@ -16,7 +16,7 @@ Color inputs allow users to select a color from a palette and perform color cont
 
 The `<d2l-input-color>` will open a dialog to allow the user to select a color from a palette.
 
-<!-- docs: demo code properties name:d2l-input-color -->
+<!-- docs: demo code properties name:d2l-input-color sandboxTitle:'Color Input' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-color.js';

package/components/inputs/docs/input-date-time.md

@@ -31,7 +31,7 @@ Use the `<d2l-input-date>` component when users need to choose a single date. It
 
 Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-MM-DD`) and should be [localized to the user's timezone](#timezone) (if applicable).
 
-<!-- docs: demo code properties name:d2l-input-date align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo code properties name:d2l-input-date sandboxTitle:'Date Input' align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date.js';
@@ -81,7 +81,7 @@ Use the `<d2l-input-date-range>` component when users need to enter two dates i
 
 Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-MM-DD`) and should be [localized to the user's timezone](#timezone) (if applicable).
 
-<!-- docs: demo code properties name:d2l-input-date-range align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo code properties name:d2l-input-date-range sandboxTitle:'Date Range Input' align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date-range.js';
@@ -137,7 +137,7 @@ Use the `<d2l-input-time>` component when users need to enter a time, without a
 
 Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and should be [localized to the user's timezone](#timezone) (if applicable).
 
-<!-- docs: demo code properties name:d2l-input-time align:flex-start autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-input-time sandboxTitle:'Time Input' align:flex-start autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-time.js';
@@ -187,7 +187,7 @@ Use the `<d2l-input-time-range>` component when users need to enter two times in
 
 Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and should be [localized to the user's timezone](#timezone) (if applicable).
 
-<!-- docs: demo code properties name:d2l-input-time-range align:flex-start autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-input-time-range sandboxTitle:'Time Range Input' align:flex-start autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-time-range.js';
@@ -239,7 +239,7 @@ Use the `<d2l-input-date-time>` component when users need to enter a single dat
 
 Note: All `*value` properties should be in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`) and in UTC time (i.e., do NOT localize to the user's timezone).
 
-<!-- docs: demo code properties name:d2l-input-date-time align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo code properties name:d2l-input-date-time sandboxTitle:'Date-Time Input' align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date-time.js';
@@ -290,7 +290,7 @@ Use the `<d2l-input-date-time-range>` component when users need to enter two d
 
 Note: All `*value` properties should be in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`) and in UTC time (i.e., do NOT localize to the user's timezone).
 
-<!-- docs: demo code properties name:d2l-input-date-time-range align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo code properties name:d2l-input-date-time-range sandboxTitle:'Date-Time Range Input' align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date-time-range.js';

package/components/inputs/docs/input-numeric.md

@@ -21,7 +21,7 @@ Numeric inputs allow users to input numbers. These include the more generic `d2l
 
 The `<d2l-input-number>` element is similar to `<d2l-input-text>`, except it's intended for inputting numbers only.
 
-<!-- docs: demo code properties name:d2l-input-number -->
+<!-- docs: demo code properties name:d2l-input-number sandboxTitle:'Number Input' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-number.js';
@@ -101,7 +101,7 @@ To accept only integer numbers, set `max-fraction-digits` to zero:
 
 The `<d2l-input-percent>` element is similar to `<d2l-input-number>`, except it provides a "%" symbol beside the number.
 
-<!-- docs: demo code properties name:d2l-input-percent -->
+<!-- docs: demo code properties name:d2l-input-percent sandboxTitle:'Percent Input' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-percent.js';

package/components/inputs/docs/input-search.md

@@ -35,7 +35,7 @@ Search inputs allow users to input text, execute a search, and clear results. A
 
 For text searches use `<d2l-input-search>`, which wraps the native `<input type="search">` element.
 
-<!-- docs: demo code properties name:d2l-input-search -->
+<!-- docs: demo code properties name:d2l-input-search sandboxTitle:'Search Input' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-search.js';

package/components/inputs/docs/input-text.md

@@ -49,7 +49,7 @@ Therefore in text inputs, placeholder text is a light colour (Mica), which fails
 
 The `<d2l-input-text>` element is a simple wrapper around the native `<input type="text">` tag. It's intended primarily for inputting generic text, email addresses and URLs.
 
-<!-- docs: demo code properties name:d2l-input-text -->
+<!-- docs: demo code properties name:d2l-input-text sandboxTitle:'Text Input' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-text.js';
@@ -168,7 +168,7 @@ As an alternative to using the `<d2l-input-text>` custom element, you can style
 
 The `<d2l-input-textarea>` is a wrapper around the native `<textarea>` element that provides auto-grow and validation behaviours. It's intended for inputting unformatted multi-line text.
 
-<!-- docs: demo code properties name:d2l-input-textarea -->
+<!-- docs: demo code properties name:d2l-input-textarea sandboxTitle:'Textarea Input' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-textarea.js';

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

@@ -29,7 +29,6 @@
 
 		<d2l-demo-page page-title="d2l-list (nested)">
 
-			<h2>Nested</h2>
 
 			<d2l-demo-snippet>
 				<template>

package/components/loading-spinner/README.md

@@ -2,7 +2,7 @@
 
 A loading spinner indicates that something is happening and we don't know how long it will take.
 
-<!-- docs: demo name:d2l-loading-spinner -->
+<!-- docs: demo name:d2l-loading-spinner sandboxTitle:'Loading Spinner' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/loading-spinner/loading-spinner.js';

package/components/meter/meter-circle.js

@@ -36,7 +36,7 @@ class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
 		}
 		.d2l-meter-circle-text {
 			fill: var(--d2l-color-ferrite);
-			font-size: 0.6rem;
+			font-size: 0.55rem;
 		}
 		:host([foreground-light]) .d2l-meter-circle-text {
 			fill: white;

package/components/selection/selection-mixin.js

@@ -12,13 +12,19 @@ const keyCodes = {
 
 export class SelectionInfo {
 
-	constructor(keys, state) {
+	constructor(keys, state, allEnabledSelected) {
+		if (!allEnabledSelected) allEnabledSelected = false;
 		if (!keys) keys = [];
 		if (!state) state = SelectionInfo.states.none;
+		this._allEnabledSelected = allEnabledSelected;
 		this._keys = keys;
 		this._state = state;
 	}
 
+	get allEnabledSelected() {
+		return this._allEnabledSelected;
+	}
+
 	get keys() {
 		return this._keys;
 	}
@@ -87,6 +93,7 @@ export const SelectionMixin = superclass => class extends RtlMixin(CollectionMix
 	}
 
 	getSelectionInfo() {
+		let allEnabledSelected = true;
 		let state = SelectionInfo.states.none;
 		const keys = [];
 
@@ -95,6 +102,7 @@ export const SelectionMixin = superclass => class extends RtlMixin(CollectionMix
 		} else {
 			this._selectionSelectables.forEach(selectable => {
 				if (selectable.selected) keys.push(selectable.key);
+				if (!selectable.disabled && !selectable.selected) allEnabledSelected = false;
 				if (selectable._indeterminate) state = SelectionInfo.states.some;
 			});
 
@@ -104,19 +112,23 @@ export const SelectionMixin = superclass => class extends RtlMixin(CollectionMix
 			}
 		}
 
-		return new SelectionInfo(keys, state);
+		return new SelectionInfo(keys, state, allEnabledSelected);
 	}
 
 	setSelectionForAll(selected, selectAllPages) {
 		if (this.selectionSingle && selected) return;
-
 		this._selectAllPages = (selected && selectAllPages);
 
+		const { allEnabledSelected } = this.getSelectionInfo();
+
 		this._selectionSelectables.forEach(selectable => {
-			if (!selectable.disabled && !!selectable.selected !== selected) {
-				selectable.selected = selected;
+			if (this.selectionSingle || this._selectAllPages) {
+				if (selectable.selected !== selected) selectable.selected = selected;
+			} else if (!selectable.disabled && selectable.selected !== !allEnabledSelected) {
+				selectable.selected = !allEnabledSelected;
 			}
 		});
+
 		this._updateSelectionObservers();
 	}
 

package/package.json

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