Merge branch 'next' into form-control-dom

docs/pages/resources/changelog.md

@@ -24,6 +24,9 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug in `<sl-select>` that prevented it from closing when tabbing to another select inside a shadow root [#1763]
 - Fixed a bug in `<sl-spinner>` that caused the animation to appear strange in certain circumstances [#1787]
 - Fixed a bug that caused form controls to submit even after they were removed from the DOM [#1823]
+- Fixed a bug that caused empty `<sl-radio-group>` elements to log an error in the console [#1795]
+- Fixed a bug that caused modal scroll locking to conflict with the `scrollbar-gutter` property [#1805]
+- Fixed a bug in `<sl-option>` that caused slotted content to show up when calling `getTextLabel()` [#1730]
 - Improved the accessibility of `<sl-tooltip>` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734]
 
 ## 2.12.0

src/components/option/option.component.ts

@@ -106,7 +106,22 @@ export default class SlOption extends ShoelaceElement {
 
   /** Returns a plain text label based on the option's content. */
   getTextLabel() {
-    return (this.textContent ?? '').trim();
+    const nodes = this.childNodes;
+    let label = '';
+
+    [...nodes].forEach(node => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        if (!(node as HTMLElement).hasAttribute('slot')) {
+          label += (node as HTMLElement).outerHTML;
+        }
+      }
+
+      if (node.nodeType === Node.TEXT_NODE) {
+        label += node.textContent;
+      }
+    });
+
+    return label.trim();
   }
 
   render() {

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

@@ -218,7 +218,7 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
 
     this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'sl-radio-button');
 
-    if (!radios.some(radio => radio.checked)) {
+    if (radios.length > 0 && !radios.some(radio => radio.checked)) {
       if (this.hasButtonGroup) {
         const buttonRadio = radios[0].shadowRoot?.querySelector('button');
 

src/themes/_utility.css

@@ -4,9 +4,18 @@
  * to reduce the possibility of collisions.
  */
 
-.sl-scroll-lock {
-  padding-right: var(--sl-scroll-lock-size) !important;
-  overflow: hidden !important;
+@supports (scrollbar-gutter: stable) {
+  .sl-scroll-lock {
+    scrollbar-gutter: stable !important;
+    overflow: hidden !important;
+  }
+}
+
+@supports not (scrollbar-gutter: stable) {
+  .sl-scroll-lock {
+    padding-right: var(--sl-scroll-lock-size) !important;
+    overflow: hidden !important;
+  }
 }
 
 .sl-toast-stack {