@brightspace-ui/core 2.82.2 → 2.83.1

package/components/filter/filter.js

@@ -137,8 +137,8 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				word-break: break-word;
 			}
 
-			d2l-list-item[disabled] .d2l-filter-dimension-set-value,
-			d2l-list-item[disabled] .d2l-body-small {
+			d2l-list-item[selection-disabled] .d2l-filter-dimension-set-value,
+			d2l-list-item[selection-disabled] .d2l-body-small {
 				color: var(--d2l-color-chromite);
 			}
 
@@ -424,7 +424,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				separators="between">
 				${dimension.values.map(item => html`
 					<d2l-list-item
-						?disabled="${item.disabled}"
+						?selection-disabled="${item.disabled}"
 						?hidden="${item.hidden}"
 						key="${item.key}"
 						label="${item.text}"

package/components/list/README.md

@@ -402,7 +402,6 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 | Property | Type | Description |
 |---|---|---|
 | `breakpoints` | Array | Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used. |
-| `disabled` | Boolean | Disables the input |
 | `draggable` |  Boolean | Whether the item is draggable |
 | `drag-handle-text` | String | The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode. |
 | `drag-target-handle-only` | Boolean | Make the drag target the drag handle only. |
@@ -418,6 +417,7 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 | `padding-type` | String | List item whitespace (`normal` (default), `none`)|
 | `selectable` | Boolean | Indicates an input should be rendered for selecting the item |
 | `selected` | Boolean | Whether the item is selected |
+| `selection-disabled` | Boolean | Disables selection |
 | `skeleton` | Boolean | Renders the input as a skeleton loader |
 
 ### Methods
@@ -477,7 +477,6 @@ The `d2l-list-item-button` provides the same functionality as `d2l-list-item` ex
 |---|---|---|
 | `breakpoints` | Array | Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used. |
 | `button-disabled` | Boolean | Disables the primary action button |
-| `disabled` | Boolean | Disables the input |
 | `draggable` |  Boolean | Whether the item is draggable |
 | `drag-handle-text` | String | The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode. |
 | `drop-nested` | Boolean | Whether nested items can be dropped on this item |
@@ -490,6 +489,7 @@ The `d2l-list-item-button` provides the same functionality as `d2l-list-item` ex
 | `padding-type` | String | List item whitespace (`normal` (default), `none`)|
 | `selectable` | Boolean | Indicates an input should be rendered for selecting the item |
 | `selected` | Boolean | Whether the item is selected |
+| `selection-disabled` | Boolean | Disables selection |
 | `skeleton` | Boolean | Renders the input as a skeleton loader |
 
 ### Events

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

@@ -31,18 +31,25 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 			[slot="outside-control-container"] {
 				margin: 0 -12px;
 			}
-			:host([_hovering]) [slot="control-container"]::before,
-			:host([_hovering]) [slot="control-container"]::after,
-			:host([_focusing]) [slot="control-container"]::before,
-			:host([_focusing]) [slot="control-container"]::after {
+			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_hovering]) [slot="control-container"]::before,
+			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_hovering]) [slot="control-container"]::after,
+			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_focusing]) [slot="control-container"]::before,
+			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_focusing]) [slot="control-container"]::after,
+			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_hovering]) [slot="control-container"]::before,
+			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_hovering]) [slot="control-container"]::after,
+			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_focusing]) [slot="control-container"]::before,
+			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_focusing]) [slot="control-container"]::after {
 				border-top-color: transparent;
 			}
-			:host(:not([disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"],
-			:host(:not([disabled]):not([skeleton])[_focusing]) [slot="outside-control-container"] {
+			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"],
+			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_focusing]) [slot="outside-control-container"],
+			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"],
+			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_focusing]) [slot="outside-control-container"] {
 				background-color: white;
 				border-color: #b6cbe8; /* celestine alpha 0.3 */
 			}
-			:host(:not([disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"] {
+			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"],
+			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"] {
 				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 			}
 			button {

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

@@ -12,8 +12,14 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 			/**
 			 * **Selection:** Disables the input
 			 * @type {boolean}
+			 * @ignore
+			 */
+			disabled: { type: Boolean }, // deprecated
+			/**
+			 * **Selection:** Disables selection
+			 * @type {boolean}
 			 */
-			disabled: { type: Boolean },
+			selectionDisabled: { type: Boolean, attribute: 'selection-disabled', reflect: true },
 			/**
 			 * **Selection:** Value to identify item if selectable
 			 * @type {string}
@@ -55,9 +61,9 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 
 	constructor() {
 		super();
-		this.disabled = false;
 		this.selectable = false;
 		this.selected = false;
+		this.selectionDisabled = false;
 		this.selectionInfo = new SelectionInfo();
 		this._checkboxId = getUniqueId();
 	}
@@ -95,6 +101,10 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 		if (!suppressEvent) this._dispatchSelected(selected);
 	}
 
+	willUpdate(changedProperties) {
+		if (changedProperties.has('disabled')) this.selectionDisabled = this.disabled;
+	}
+
 	async _dispatchSelected(value) {
 		/* wait for internal state to be updated in case of action-click case so that a consumer
 		 calling getSelectionInfo will get the correct state */
@@ -109,7 +119,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 
 	_onCheckboxActionClick(event) {
 		event.preventDefault();
-		if (this.disabled) return;
+		if (this.selectionDisabled) return;
 		this.setSelected(!this.selected);
 		const checkbox = this.shadowRoot && this.shadowRoot.querySelector(`#${this._checkboxId}`);
 		if (checkbox) checkbox.focus();
@@ -138,7 +148,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 			<d2l-selection-input
 				@d2l-selection-change="${this._onCheckboxChange}"
 				?selected="${this.selected}"
-				?disabled="${this.disabled}"
+				?disabled="${this.selectionDisabled}"
 				id="${this._checkboxId}"
 				?_indeterminate="${this.selectionInfo.state === SelectionInfo.states.some}"
 				key="${this.key}"
@@ -152,7 +162,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 	_renderCheckboxAction(inner) {
 		const classes = {
 			'd2l-checkbox-action': true,
-			'd2l-checkbox-action-disabled': this.disabled
+			'd2l-checkbox-action-disabled': this.selectionDisabled
 		};
 		return this.selectable ? html`
 			<div @click="${this._onCheckboxActionClick}"

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

@@ -27,12 +27,12 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 			:host([action-href]:not([action-href=""])[_focusing]) [slot="control-container"]::after {
 				border-top-color: transparent;
 			}
-			:host(:not([disabled]):not([skeleton])[action-href]:not([action-href=""])[_hovering]) [slot="outside-control-container"],
-			:host(:not([disabled]):not([skeleton])[action-href]:not([action-href=""])[_focusing]) [slot="outside-control-container"] {
+			:host(:not([skeleton])[action-href]:not([action-href=""])[_hovering]) [slot="outside-control-container"],
+			:host(:not([skeleton])[action-href]:not([action-href=""])[_focusing]) [slot="outside-control-container"] {
 				background-color: white;
 				border-color: #b6cbe8; /* celestine alpha 0.3 */
 			}
-			:host(:not([disabled]):not([skeleton])[action-href]:not([action-href=""])[_hovering]) [slot="outside-control-container"] {
+			:host(:not([skeleton])[action-href]:not([action-href=""])[_hovering]) [slot="outside-control-container"] {
 				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 			}
 			a[href] {

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

@@ -147,8 +147,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host(:last-of-type[_separators="between"]) [slot="control-container"]::after,
 			:host([_separators="none"]) [slot="control-container"]::before,
 			:host([_separators="none"]) [slot="control-container"]::after,
-			:host([selectable][_hovering]:not([disabled])) [slot="control-container"]::before,
-			:host([selectable][_hovering]:not([disabled])) [slot="control-container"]::after,
+			:host([selectable][_hovering]:not([selection-disabled])) [slot="control-container"]::before,
+			:host([selectable][_hovering]:not([selection-disabled])) [slot="control-container"]::after,
 			:host([selectable][_focusing]) [slot="control-container"]::before,
 			:host([selectable][_focusing]) [slot="control-container"]::after,
 			:host([selected]) [slot="control-container"]::before,
@@ -317,20 +317,20 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin: 0;
 			}
 
-			:host(:not([disabled]):not([skeleton])[selected]) [slot="outside-control-container"],
-			:host(:not([disabled]):not([skeleton])[selectable][_hovering]) [slot="outside-control-container"],
-			:host(:not([disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"] {
+			:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"],
+			:host(:not([selection-disabled]):not([skeleton])[selectable][_hovering]) [slot="outside-control-container"],
+			:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"] {
 				background-color: white;
 				border-color: #b6cbe8; /* celestine alpha 0.3 */
 			}
-			:host(:not([disabled]):not([skeleton])[selectable][_hovering]) [slot="outside-control-container"] {
+			:host(:not([selection-disabled]):not([skeleton])[selectable][_hovering]) [slot="outside-control-container"] {
 				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 			}
-			:host(:not([disabled]):not([skeleton])[selected]) [slot="outside-control-container"] {
+			:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"] {
 				background-color: #f3fbff;
 			}
 
-			:host(:not([disabled]):not([skeleton])[padding-type="none"]) [slot="outside-control-container"] {
+			:host(:not([selection-disabled]):not([skeleton])[padding-type="none"]) [slot="outside-control-container"] {
 				border-color: transparent;
 				margin: 0;
 			}
@@ -343,9 +343,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				transition: border-color 400ms linear;
 			}
 			:host([_highlighting]) [slot="outside-control-container"],
-			:host(:not([disabled]):not([skeleton])[_hovering][_highlighting]) [slot="outside-control-container"],
-			:host(:not([disabled]):not([skeleton])[_focusing][_highlighting]) [slot="outside-control-container"],
-			:host(:not([disabled]):not([skeleton])[selected][_highlighting]) [slot="outside-control-container"] {
+			:host(:not([selection-disabled]):not([skeleton])[_hovering][_highlighting]) [slot="outside-control-container"],
+			:host(:not([selection-disabled]):not([skeleton])[_focusing][_highlighting]) [slot="outside-control-container"],
+			:host(:not([selection-disabled]):not([skeleton])[selected][_highlighting]) [slot="outside-control-container"] {
 				background-color: var(--d2l-color-celestine-plus-2);
 				border-color: var(--d2l-color-celestine);
 			}

package/custom-elements.json

@@ -7461,12 +7461,6 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
-        {
-          "name": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "selectable",
           "description": "**Selection:** Indicates an input should be rendered for selecting the item",
@@ -7479,6 +7473,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "selection-disabled",
+          "description": "**Selection:** Disables selection",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "skeleton",
           "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
@@ -7561,13 +7561,6 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "selectable",
           "attribute": "selectable",
@@ -7582,6 +7575,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "selectionDisabled",
+          "attribute": "selection-disabled",
+          "description": "**Selection:** Disables selection",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         },
@@ -7860,12 +7860,6 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
-        {
-          "name": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "selectable",
           "description": "**Selection:** Indicates an input should be rendered for selecting the item",
@@ -7878,6 +7872,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "selection-disabled",
+          "description": "**Selection:** Disables selection",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "skeleton",
           "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
@@ -7967,13 +7967,6 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "selectable",
           "attribute": "selectable",
@@ -7988,6 +7981,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "selectionDisabled",
+          "attribute": "selection-disabled",
+          "description": "**Selection:** Disables selection",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         },
@@ -8339,12 +8339,6 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
-        {
-          "name": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "selectable",
           "description": "**Selection:** Indicates an input should be rendered for selecting the item",
@@ -8357,6 +8351,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "selection-disabled",
+          "description": "**Selection:** Disables selection",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "skeleton",
           "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
@@ -8451,13 +8451,6 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "**Selection:** Disables the input",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "selectable",
           "attribute": "selectable",
@@ -8472,6 +8465,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "selectionDisabled",
+          "attribute": "selection-disabled",
+          "description": "**Selection:** Disables selection",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         },

package/package.json

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