remove hint from <wa-radio>; fixes #1024 (#1026)

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
 </wa-radio-group>
 ```
 
-### Hint
-
-Add descriptive hint to a switch with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
-
-```html {.example}
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio value="1" hint="What should the user know about radio 1?">Option 1</wa-radio>
-  <wa-radio value="2" hint="What should the user know about radio 2?">Option 2</wa-radio>
-  <wa-radio value="3" hint="What should the user know about radio 3?">Option 3</wa-radio>
-</wa-radio-group>
-```

packages/webawesome/docs/docs/resources/changelog.md

@@ -31,6 +31,7 @@ During the alpha period, things might break! We take breaking changes very serio
   - `<wa-tab-group no-scroll-controls>` => `<wa-tab-group without-scroll-controls>`
   - `<wa-tag removable>` => `<wa-tag with-remove>`
 - 🚨 BREAKING: removed the `size` attribute from `<wa-card>`; please set the size of child elements on the children directly
+- 🚨 BREAKING: removed the `hint` property and slot from `<wa-radio>`; please apply hints directly to `<wa-radio-group>` instead
 - Added a new free component: `<wa-popover>` (#2 of 14 per stretch goals)
 - Added a `min-block-size` to `<wa-divider orientation="vertical">` to ensure the divider is visible regardless of container height [issue:675]
 - Added support for `name` in `<wa-details>` for exclusively opening one in a group

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`
       <span part="control" class="control">
         ${this.checked
@@ -135,15 +123,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
       </span>
 
       <slot part="label" class="label"></slot>
-
-      <slot
-        name="hint"
-        aria-hidden=${hasHint ? 'false' : 'true'}
-        class="${classMap({ 'has-slotted': hasHint })}"
-        id="hint"
-        part="hint"
-        >${this.hint}</slot
-      >
     `;
   }
 }