@brightspace-ui/core 3.151.5 → 3.152.0

package/components/inputs/input-checkbox.js

@@ -25,9 +25,28 @@ export const cssSizes = {
 
 export const checkboxStyles = css`
 	input[type="checkbox"].d2l-input-checkbox {
+		--d2l-input-checkbox-background-image: none;
+		--d2l-input-checkbox-background-color: var(--d2l-color-regolith);
+		--d2l-input-checkbox-background-image-disabled:
+			linear-gradient(
+				/* regolith at 50% */
+				rgba(249, 251, 255, 0.5),
+				rgba(249, 251, 255, 0.5)
+			),
+			var(--d2l-input-checkbox-background-image);
+
+		@supports (color: color-mix(in srgb, black 50%, transparent)) {
+			--d2l-input-checkbox-background-image-disabled:
+				linear-gradient(
+					color-mix(in srgb, var(--d2l-input-checkbox-background-color) 50%, transparent),
+					color-mix(in srgb, var(--d2l-input-checkbox-background-color) 50%, transparent)
+				),
+				var(--d2l-input-checkbox-background-image);
+		}
 		-webkit-appearance: none;
 		-moz-appearance: none;
 		appearance: none;
+		background-image: var(--d2l-input-checkbox-background-image);
 		background-position: center center;
 		background-repeat: no-repeat;
 		background-size: ${cssSizes.inputBoxSize}rem ${cssSizes.inputBoxSize}rem;
@@ -43,17 +62,20 @@ export const checkboxStyles = css`
 		width: ${cssSizes.inputBoxSize}rem;
 	}
 	input[type="checkbox"].d2l-input-checkbox:checked {
-		background-image: ${inputCheck};
+		--d2l-input-checkbox-background-image: ${inputCheck};
 	}
 	input[type="checkbox"].d2l-input-checkbox:indeterminate {
-		background-image: ${inputCheckIndeterminate};
+		--d2l-input-checkbox-background-image: ${inputCheckIndeterminate};
 	}
 	input[type="checkbox"].d2l-input-checkbox,
 	input[type="checkbox"].d2l-input-checkbox:hover:disabled {
-		background-color: var(--d2l-color-regolith);
+		background-color: var(--d2l-input-checkbox-background-color);
 		border-color: var(--d2l-color-galena);
 		border-width: 1px;
 	}
+	input[type="checkbox"].d2l-input-checkbox:hover:disabled {
+		border-color: var(--d2l-color-corundum);
+	}
 	input[type="checkbox"].d2l-input-checkbox:hover,
 	input[type="checkbox"].d2l-input-checkbox:focus,
 	input[type="checkbox"].d2l-input-checkbox.d2l-input-checkbox-focus,
@@ -63,10 +85,11 @@ export const checkboxStyles = css`
 		outline-width: 0;
 	}
 	input[type="checkbox"].d2l-input-checkbox:disabled,
-	input[type="checkbox"].d2l-input-checkbox[aria-disabled="true"] {
-		opacity: 0.5;
+	input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
+		background-image: var(--d2l-input-checkbox-background-image-disabled);
+		border-color: var(--d2l-color-corundum);
 	}
-	@media (prefers-contrast: more) {
+	@media (forced-colors: active) {
 		input[type="checkbox"].d2l-input-checkbox:checked,
 		input[type="checkbox"].d2l-input-checkbox:indeterminate {
 			background-image: none;
@@ -85,6 +108,11 @@ export const checkboxStyles = css`
 			width: ${cssSizes.inputBoxSize}rem;
 		}
 
+		input[type="checkbox"].d2l-input-checkbox:disabled,
+		input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
+			opacity: 0.5;
+		}
+
 		input[type="checkbox"].d2l-input-checkbox:checked::after {
 			mask-image: ${inputCheck};
 		}
@@ -201,12 +229,9 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
 				.d2l-input-checkbox-supporting {
 					margin-inline-start: ${cssSizes.inputBoxSize + cssSizes.checkboxMargin}rem;
 				}
-				.d2l-input-checkbox-text-disabled {
+				:host(:not([skeleton])) .d2l-input-checkbox-text-disabled {
 					opacity: 0.5;
 				}
-				:host([skeleton]) .d2l-input-checkbox-text-disabled {
-					opacity: 1;
-				}
 				input[type="checkbox"].d2l-input-checkbox {
 					vertical-align: top;
 				}

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

@@ -14,6 +14,11 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 			 * @type {boolean}
 			 */
 			selectionDisabled: { type: Boolean, attribute: 'selection-disabled', reflect: true },
+			/**
+			 * **Selection:** Tooltip text when selection is disabled
+			 * @type {string}
+			 */
+			selectionDisabledTooltip: { type: String, attribute: 'selection-disabled-tooltip' },
 			/**
 			 * **Selection:** Value to identify item if selectable
 			 * @type {string}
@@ -45,8 +50,12 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 				display: block;
 				height: 100%;
 			}
-			:host([selection-disabled]) .d2l-checkbox-action {
-				cursor: default;
+			:host([selection-disabled]) [slot="control-action"] {
+				pointer-events: none;
+			}
+			:host([selection-disabled]) [slot="control"],
+			:host([selection-disabled]) [slot="control-action"] [slot="content"] {
+				pointer-events: all;
 			}
 		` ];
 
@@ -155,10 +164,12 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 	}
 
 	_renderCheckbox() {
+		/* eslint-disable lit/no-private-properties */
 		return this.selectable ? html`
 			<d2l-selection-input
 				@d2l-selection-change="${this._onCheckboxChange}"
 				?disabled="${this.selectionDisabled}"
+				._disabledTooltip=${this.selectionDisabledTooltip}
 				.hovering="${this._hoveringSelection}"
 				id="${this._checkboxId}"
 				?_indeterminate="${this.selectionInfo.state === SelectionInfo.states.some}"
@@ -168,6 +179,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 				?skeleton="${this.skeleton}">
 			</d2l-selection-input>
 		` : nothing;
+		/* eslint-enable */
 	}
 
 	_renderCheckboxAction(inner) {

package/components/list/list-item-generic-layout.js

@@ -176,7 +176,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			:host(:not([no-primary-action])) ::slotted([slot="outside-control-action"]) {
 				grid-column-end: end;
 			}
-				
+
 			:host(:not([no-primary-action])) ::slotted([slot="control-action"]) {
 				grid-column-end: actions-start;
 			}

package/components/selection/selection-input.js

@@ -40,6 +40,8 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 			 * @type {string}
 			 */
 			key: { type: String },
+			/* passthrough for list-item */
+			_disabledTooltip: { state: true },
 			_indeterminate: { type: Boolean },
 			_provider: { type: Object }
 		};
@@ -120,6 +122,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 					?checked="${this.selected}"
 					class="${ifDefined(this.hovering ? 'd2l-hovering' : undefined)}"
 					?disabled="${this.disabled}"
+					disabled-tooltip="${ifDefined(this._disabledTooltip)}"
 					?indeterminate="${this._indeterminate}"
 					?skeleton="${this.skeleton}">
 				</d2l-input-checkbox>

package/custom-elements.json

@@ -8700,6 +8700,11 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "selection-disabled-tooltip",
+          "description": "**Selection:** Tooltip text when selection is disabled",
+          "type": "string"
+        },
         {
           "name": "selectable",
           "description": "**Selection:** Indicates an input should be rendered for selecting the item",
@@ -8809,6 +8814,12 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "selectionDisabledTooltip",
+          "attribute": "selection-disabled-tooltip",
+          "description": "**Selection:** Tooltip text when selection is disabled",
+          "type": "string"
+        },
         {
           "name": "selectable",
           "attribute": "selectable",
@@ -9050,6 +9061,11 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "selection-disabled-tooltip",
+          "description": "**Selection:** Tooltip text when selection is disabled",
+          "type": "string"
+        },
         {
           "name": "selectable",
           "description": "**Selection:** Indicates an input should be rendered for selecting the item",
@@ -9166,6 +9182,12 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "selectionDisabledTooltip",
+          "attribute": "selection-disabled-tooltip",
+          "description": "**Selection:** Tooltip text when selection is disabled",
+          "type": "string"
+        },
         {
           "name": "selectable",
           "attribute": "selectable",
@@ -9537,6 +9559,11 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "selection-disabled-tooltip",
+          "description": "**Selection:** Tooltip text when selection is disabled",
+          "type": "string"
+        },
         {
           "name": "selectable",
           "description": "**Selection:** Indicates an input should be rendered for selecting the item",
@@ -9665,6 +9692,12 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "selectionDisabledTooltip",
+          "attribute": "selection-disabled-tooltip",
+          "description": "**Selection:** Tooltip text when selection is disabled",
+          "type": "string"
+        },
         {
           "name": "selectable",
           "attribute": "selectable",
@@ -9840,6 +9873,11 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "selection-disabled-tooltip",
+          "description": "**Selection:** Tooltip text when selection is disabled",
+          "type": "string"
+        },
         {
           "name": "selectable",
           "description": "**Selection:** Indicates an input should be rendered for selecting the item",
@@ -9961,6 +9999,12 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "selectionDisabledTooltip",
+          "attribute": "selection-disabled-tooltip",
+          "description": "**Selection:** Tooltip text when selection is disabled",
+          "type": "string"
+        },
         {
           "name": "selectable",
           "attribute": "selectable",

package/package.json

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