@brightspace-ui/core 3.199.0 → 3.200.0

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

@@ -169,7 +169,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 			<d2l-selection-input
 				@d2l-selection-change="${this._onCheckboxChange}"
 				?disabled="${this.selectionDisabled}"
-				._disabledTooltip=${this.selectionDisabledTooltip}
+				disabled-tooltip=${this.selectionDisabledTooltip}
 				.hovering="${this._hoveringSelection}"
 				id="${this._checkboxId}"
 				?_indeterminate="${this.selectionInfo.state === SelectionInfo.states.some}"

package/components/selection/README.md

@@ -247,6 +247,7 @@ Note: `d2l-list-item` already provides a selection input for selectable list ite
 | `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. |
 | `disabled` | Boolean | Disables the input element(checkbox/radio btn). |
+| `disabled-tooltip` | String | Tooltip text when disabled. |
 | `selected` | Boolean | State of the input. |
 
 ### Events

package/components/selection/selection-input.js

@@ -30,6 +30,11 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 			 * @type {boolean}
 			 */
 			disabled: { type: Boolean, reflect: true },
+			/**
+			 * Tooltip text when disabled
+			 * @type {string}
+			 */
+			disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
 			/**
 			 * Private. Force hovering state of input
 			 * @ignore
@@ -41,8 +46,6 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 			 * @type {string}
 			 */
 			key: { type: String },
-			/* passthrough for list-item */
-			_disabledTooltip: { state: true },
 			_indeterminate: { type: Boolean },
 			_provider: { type: Object }
 		};
@@ -67,7 +70,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 	}
 
 	get focusDisabled() {
-		return this.disabled && !this._disabledTooltip;
+		return this.disabled && !this.disabledTooltip;
 	}
 
 	connectedCallback() {
@@ -105,10 +108,10 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 				'd2l-skeletize': true,
 				'd2l-hovering': this.hovering,
 				'd2l-disabled': this.disabled,
-				'd2l-input-radio-disabled-tooltip': this.disabled && this._disabledTooltip
+				'd2l-input-radio-disabled-tooltip': this.disabled && this.disabledTooltip
 			};
-			const disabledTooltip = this.disabled && this._disabledTooltip ?
-				html`<d2l-tooltip align="start" class="vdiff-include" for="${this.#inputId}" ?force-show="${this.hovering}" position="top">${this._disabledTooltip}</d2l-tooltip>` :
+			const disabledTooltip = this.disabled && this.disabledTooltip ?
+				html`<d2l-tooltip align="start" class="vdiff-include" for="${this.#inputId}" ?force-show="${this.hovering}" position="top">${this.disabledTooltip}</d2l-tooltip>` :
 				nothing;
 			return html`
 				<div
@@ -133,7 +136,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)}"
+					disabled-tooltip="${ifDefined(this.disabledTooltip)}"
 					?indeterminate="${this._indeterminate}"
 					?skeleton="${this.skeleton}">
 				</d2l-input-checkbox>

package/custom-elements.json

@@ -12939,6 +12939,11 @@
           "description": "Disables the input",
           "type": "boolean"
         },
+        {
+          "name": "disabled-tooltip",
+          "description": "Tooltip text when disabled",
+          "type": "string"
+        },
         {
           "name": "key",
           "description": "REQUIRED: Key for the selectable",
@@ -12973,6 +12978,12 @@
           "description": "Disables the input",
           "type": "boolean"
         },
+        {
+          "name": "disabledTooltip",
+          "attribute": "disabled-tooltip",
+          "description": "Tooltip text when disabled",
+          "type": "string"
+        },
         {
           "name": "key",
           "attribute": "key",

package/package.json

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