diff --git a/packages/webawesome/docs/docs/components/radio.md b/packages/webawesome/docs/docs/components/radio.md
index 8453f1e7c..10adc4a44 100644
--- a/packages/webawesome/docs/docs/components/radio.md
+++ b/packages/webawesome/docs/docs/components/radio.md
@@ -75,14 +75,3 @@ Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to c
```
-### Hint
-
-Add descriptive hint to a switch with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
-
-```html {.example}
-
- Option 1
- Option 2
- Option 3
-
-```
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index ee35c081d..1536192bf 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -31,6 +31,7 @@ During the alpha period, things might break! We take breaking changes very serio
- `` => ``
- `` => ``
- 🚨 BREAKING: removed the `size` attribute from ``; please set the size of child elements on the children directly
+- 🚨 BREAKING: removed the `hint` property and slot from ``; please apply hints directly to `` instead
- Added a new free component: `` (#2 of 14 per stretch goals)
- Added a `min-block-size` to `` to ensure the divider is visible regardless of container height [issue:675]
- Added support for `name` in `` for exclusively opening one in a group
diff --git a/packages/webawesome/src/components/radio/radio.ts b/packages/webawesome/src/components/radio/radio.ts
index 72cc97148..a281af4df 100644
--- a/packages/webawesome/src/components/radio/radio.ts
+++ b/packages/webawesome/src/components/radio/radio.ts
@@ -1,8 +1,6 @@
import type { PropertyValues } from 'lit';
import { html, isServer } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { HasSlotController } from '../../internal/slot.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import formControlStyles from '../../styles/component/form-control.css';
import sizeStyles from '../../styles/utilities/size.css';
@@ -18,7 +16,6 @@ import styles from './radio.css';
* @dependency wa-icon
*
* @slot - The radio's label.
- * @slot hint - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute.
*
* @event blur - Emitted when the control loses focus.
* @event focus - Emitted when the control gains focus.
@@ -26,7 +23,6 @@ import styles from './radio.css';
* @csspart control - The circular container that wraps the radio's checked state.
* @csspart checked-icon - The checked icon.
* @csspart label - The container that wraps the radio's label.
- * @csspart hint - The hint's wrapper.
*
* @cssproperty --background-color - The radio's background color.
* @cssproperty --background-color-checked - The radio's background color when checked.
@@ -68,11 +64,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
/** Disables the radio. */
@property({ type: Boolean }) disabled = false;
- /** The radio's hint. If you need to display HTML, use the `hint` slot instead. */
- @property() hint = '';
-
- private readonly hasSlotController = new HasSlotController(this, 'hint');
-
constructor() {
super();
if (!isServer) {
@@ -120,9 +111,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
};
render() {
- const hasHintSlot = isServer ? true : this.hasSlotController.test('hint');
- const hasHint = this.hint ? true : !!hasHintSlot;
-
return html`
${this.checked
@@ -135,15 +123,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
-
- ${this.hint}
`;
}
}