diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts index 70a67340..df69c843 100644 --- a/src/components/radio-group/radio-group.ts +++ b/src/components/radio-group/radio-group.ts @@ -20,6 +20,8 @@ const RADIO_CHILDREN = ['sl-radio', 'sl-radio-button']; * @slot - The default slot where radio controls are placed. * @slot label - The radio group label. Required for proper accessibility. Alternatively, you can use the label prop. * + * @event sl-change - Emitted when the radio group's selected value changes. + * * @csspart base - The component's internal wrapper. * @csspart label - The radio group's label. * @csspart button-group - The button group that wraps radio buttons. @@ -81,7 +83,7 @@ export default class SlRadioGroup extends LitElement { get validity(): ValidityState { const hasMissingData = !((this.value && this.required) || !this.required); const hasCustomError = this.customErrorMessage !== ''; - + return { badInput: false, customError: hasCustomError, @@ -99,7 +101,7 @@ export default class SlRadioGroup extends LitElement { reportValidity() { const validity = this.validity; - + this.errorMessage = this.customErrorMessage || validity.valid ? '' : this.input.validationMessage; this.isInvalid = !validity.valid; diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index 51bff135..afa2e418 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -13,7 +13,6 @@ import type { CSSResultGroup } from 'lit'; * @slot - The radio's label. * * @event sl-blur - Emitted when the control loses focus. - * @event sl-change - Emitted when the control's checked state changes. * @event sl-focus - Emitted when the control gains focus. * * @csspart base - The component's internal wrapper. @@ -27,9 +26,8 @@ export default class SlRadio extends LitElement { @query('.radio__input') input: HTMLInputElement; - @state() protected hasFocus = false; - @state() checked = false; + @state() protected hasFocus = false; /** The radio's name attribute. */ @property({ reflect: true }) name: string; @@ -74,9 +72,9 @@ export default class SlRadio extends LitElement { } private addEventListeners() { - this.addEventListener('blur', () => this.handleBlur()) - this.addEventListener('click', () => this.handleClick()) - this.addEventListener('focus', () => this.handleFocus()) + this.addEventListener('blur', () => this.handleBlur()); + this.addEventListener('click', () => this.handleClick()); + this.addEventListener('focus', () => this.handleFocus()); } private setInitialAttributes() { @@ -109,7 +107,7 @@ export default class SlRadio extends LitElement { - + `; } }