remove no-fieldset; add fieldset

docs/components/radio-group.md

@@ -14,12 +14,12 @@ Radio Groups are used to group multiple radios so they function as a single cont
 
 ## Examples
 
-### Hiding the Fieldset
+### Showing the Fieldset
 
-You can hide the fieldset and legend that wraps the radio group using the `no-fieldset` attribute. In this case, a label is still required for assistive devices to properly identify the control.
+You can show a fieldset and legend that wraps the radio group using the `fieldset` attribute.
 
 ```html preview
-<sl-radio-group label="Select an item" no-fieldset>
+<sl-radio-group label="Select an item" fieldset>
   <sl-radio value="1" checked>Item 1</sl-radio>
   <sl-radio value="2">Item 2</sl-radio>
   <sl-radio value="3">Item 3</sl-radio>

docs/resources/changelog.md

@@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 ## Next
 
 - 🚨 BREAKING: fixed a bug where `--sl-color-neutral-0` and `--sl-color-neutral-1000` were inverted (swap them to update)
+- 🚨 BREAKING: removed the `no-fieldset` property from `sl-radio-group` (fieldsets are now hidden by default; use `fieldset` to show them)
 - Added `--swatch-size` custom property to `sl-color-picker`
 - Added `date` to `sl-input` as a supported `type`
 - Added the `--sl-focus-ring` design token for a more convenient way to apply focus ring styles

src/components/radio-group/radio-group.styles.ts

@@ -28,14 +28,14 @@ export default css`
     margin-bottom: var(--sl-spacing-xx-small);
   }
 
-  .radio-group--no-fieldset {
+  .radio-group:not(.radio-group--has-fieldset) {
     border: none;
     padding: 0;
     margin: 0;
     min-width: 0;
   }
 
-  .radio-group--no-fieldset .radio-group__label {
+  .radio-group:not(.radio-group--has-fieldset) .radio-group__label {
     position: absolute;
     width: 0;
     height: 0;

src/components/radio-group/radio-group.ts

@@ -23,8 +23,8 @@ export default class SlRadioGroup extends LitElement {
   /** The radio group label. Required for proper accessibility. Alternatively, you can use the label slot. */
   @property() label = '';
 
-  /** Hides the fieldset and legend that surrounds the radio group. The label will still be read by screen readers. */
-  @property({ type: Boolean, attribute: 'no-fieldset' }) noFieldset = false;
+  /** Shows the fieldset and legend that surrounds the radio group. */
+  @property({ type: Boolean, attribute: 'fieldset' }) fieldset = false;
 
   handleFocusIn() {
     // When tabbing into the fieldset, make sure it lands on the checked radio
@@ -45,7 +45,7 @@ export default class SlRadioGroup extends LitElement {
         part="base"
         class=${classMap({
           'radio-group': true,
-          'radio-group--no-fieldset': this.noFieldset
+          'radio-group--has-fieldset': this.fieldset
         })}
         role="radiogroup"
         @focusin=${this.handleFocusIn}