@brightspace-ui/core 3.226.0 → 3.227.0

package/components/inputs/input-checkbox.js

@@ -1,4 +1,5 @@
 import '../colors/colors.js';
+import '../expand-collapse/expand-collapse-content.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
@@ -240,12 +241,8 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
 					vertical-align: top;
 				}
 				.d2l-input-checkbox-supporting {
-					display: none;
 					margin-block-start: 0.6rem;
 				}
-				.d2l-input-checkbox-supporting-visible {
-					display: block;
-				}
 			`
 		];
 	}
@@ -271,10 +268,7 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
 
 	render() {
 		const tabindex = this.notTabbable ? -1 : undefined;
-		const supportingClasses = {
-			'd2l-input-checkbox-supporting': true,
-			'd2l-input-checkbox-supporting-visible': this._hasSupporting && (this.checked || !this.supportingHiddenWhenUnchecked)
-		};
+		const supportingContentVisible = this._hasSupporting && (this.checked || !this.supportingHiddenWhenUnchecked);
 		const textClasses = {
 			'd2l-input-checkbox-text': true,
 			'd2l-skeletize': true,
@@ -311,7 +305,9 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
 			${this._renderInlineHelp(this.#inlineHelpId)}
 			${offscreenContainer}
 			${disabledTooltip}
-			<div class="${classMap(supportingClasses)}" @change="${this.#handleSupportingChange}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
+			<d2l-expand-collapse-content ?expanded="${supportingContentVisible}">
+				<div class="d2l-input-checkbox-supporting" @change="${this.#handleSupportingChange}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
+			</d2l-expand-collapse-content>
 		`;
 	}
 

package/components/inputs/input-radio.js

@@ -1,3 +1,4 @@
+import '../expand-collapse/expand-collapse-content.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
@@ -80,12 +81,8 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 				margin-inline-start: 1.7rem;
 			}
 			.d2l-input-radio-supporting {
-				display: none;
 				margin-block-start: 0.6rem;
 			}
-			.d2l-input-radio-supporting-visible {
-				display: block;
-			}
 		`];
 	}
 
@@ -129,6 +126,7 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 
 	render() {
 		const allowFocus = !this.focusDisabled && this._focusable;
+		const supportingContentVisible = this._hasSupporting && (!this.supportingHiddenWhenUnchecked || this._checked);
 		const labelStyles = {
 			alignItems: this._horizontal ? 'flex-start' : undefined
 		};
@@ -143,10 +141,6 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 			'd2l-hovering': this._isHovered && !this.focusDisabled,
 			'd2l-skeletize': true
 		};
-		const supportingClasses = {
-			'd2l-input-radio-supporting': true,
-			'd2l-input-radio-supporting-visible': this._hasSupporting && (!this.supportingHiddenWhenUnchecked || this._checked),
-		};
 		const description = this.description ? html`<div id="${this.#descriptionId}" hidden>${this.description}</div>` : nothing;
 		const ariaDescribedByIds = `${this.description ? this.#descriptionId : ''} ${this._hasInlineHelp ? this.#inlineHelpId : ''}`.trim();
 		const disabledTooltip = this.disabled && this.disabledTooltip ?
@@ -169,7 +163,9 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 			${this._renderInlineHelp(this.#inlineHelpId)}
 			${description}
 			${disabledTooltip}
-			<div class="${classMap(supportingClasses)}" @change="${this.#handleSupportingChange}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
+			<d2l-expand-collapse-content ?expanded="${supportingContentVisible}">
+				<div class="d2l-input-radio-supporting" @change="${this.#handleSupportingChange}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
+			</d2l-expand-collapse-content>
 		`;
 	}
 

package/package.json

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