Merge branch 'next' into current

It's not clear In [Vue Guide](https://shoelace.style/frameworks/vue#installation), the user may not know where to apply the theme and base path set, so I add file hint like [React Guide](https://shoelace.style/frameworks/react#installation)

docs/pages/components/button.md

@@ -236,7 +236,7 @@ When a `target` is set, the link will receive `rel="noreferrer noopener"` for [s
 
 ### Setting a Custom Width
 
-As expected, buttons can be given a custom width by setting the `width` attribute. This is useful for making buttons span the full width of their container on smaller screens.
+As expected, buttons can be given a custom width by passing inline styles to the component (or using a class). This is useful for making buttons span the full width of their container on smaller screens.
 
 ```html:preview
 <sl-button variant="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>

docs/pages/frameworks/vue.md

@@ -23,6 +23,7 @@ npm install @shoelace-style/shoelace
 Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.
 
 ```jsx
+// main.js or main.ts
 import '@shoelace-style/shoelace/dist/themes/light.css';
 import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
 

docs/pages/resources/changelog.md

@@ -12,6 +12,18 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
 
 New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
 
+## 2.15.1
+
+- Fixed a bug in `<sl-radio-group>` where if a click did not contain a `<sl-radio>` it would show a console error. [#2009]
+- Fixed a bug in `<sl-split-panel>` that caused it not to recalculate it's position when going from being `display: none;` to its original display value. [#1942]
+- Fixed a bug in `<dialog>` where when it showed it would cause a layout shift. [#1967]
+- Fixed a bug in `<sl-tooltip>` that allowed unwanted text properties to leak in [#1947]
+- Fixed a bug in `<sl-button-group>` classes [#1974]
+- Fixed a bug in `<sl-textarea>` that may throw errors on `disconnectedCallback` in test environments [#1985]
+- Fixed a bug in `<sl-color-picker>` that would log a non-passive event listener warning [#2005]
+- Fixed a bug in the submenu controller that allowed submenus to go offscreen and not be scrollable [#2001]
+- Fixed a bug in `<sl-range>` that caused the tooltip position to be incorrect in some cases [#1979]
+
 ## 2.15.0
 
 - Added the Slovenian translation [#1893]

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@shoelace-style/shoelace",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@shoelace-style/shoelace",
-      "version": "2.15.0",
+      "version": "2.15.1",
       "license": "MIT",
       "dependencies": {
         "@ctrl/tinycolor": "^4.0.2",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shoelace-style/shoelace",
   "description": "A forward-thinking library of web components.",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "homepage": "https://github.com/shoelace-style/shoelace",
   "author": "Cory LaViska",
   "license": "MIT",

src/components/button/button.styles.ts

@@ -590,7 +590,7 @@ export default css`
 
   /* Focus and checked are always on top */
   :host([data-sl-button-group__button--focus]),
-  :host([data-sl-button-group__button[checked]]) {
+  :host([data-sl-button-group__button][checked]) {
     z-index: 2;
   }
 `;

src/components/color-picker/color-picker.component.ts

@@ -2,11 +2,11 @@ import { clamp } from '../../internal/math.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { defaultValue } from '../../internal/default-value.js';
 import { drag } from '../../internal/drag.js';
+import { eventOptions, property, query, state } from 'lit/decorators.js';
 import { FormControlController } from '../../internal/form.js';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeController } from '../../utilities/localize.js';
-import { property, query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { TinyColor } from '@ctrl/tinycolor';
 import { watch } from '../../internal/watch.js';
@@ -488,6 +488,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
     this.formControlController.emitInvalidEvent(event);
   }
 
+  @eventOptions({ passive: false })
   private handleTouchMove(event: TouchEvent) {
     event.preventDefault();
   }

src/components/menu-item/menu-item.styles.ts

@@ -147,4 +147,9 @@ export default css`
       outline-offset: -1px;
     }
   }
+
+  ::slotted(sl-menu) {
+    max-width: var(--auto-size-available-width) !important;
+    max-height: var(--auto-size-available-height) !important;
+  }
 `;

src/components/menu-item/submenu-controller.ts

@@ -283,6 +283,8 @@ export class SubmenuController implements ReactiveController {
         flip-fallback-strategy="best-fit"
         skidding="${this.skidding}"
         strategy="fixed"
+        auto-size="vertical"
+        auto-size-padding="10"
       >
         <slot name="submenu"></slot>
       </sl-popup>

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

@@ -133,7 +133,7 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
     const radios = this.getAllRadios();
     const oldValue = this.value;
 
-    if (target.disabled) {
+    if (!target || target.disabled) {
       return;
     }
 

src/components/radio/radio.component.ts

@@ -116,9 +116,3 @@ export default class SlRadio extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-radio': SlRadio;
-  }
-}

src/components/range/range.component.ts

@@ -216,7 +216,8 @@ export default class SlRange extends ShoelaceElement implements ShoelaceFormCont
     this.syncProgress(percent);
 
     if (this.tooltip !== 'none') {
-      this.syncTooltip(percent);
+      // Ensure updates are drawn before we sync the tooltip
+      this.updateComplete.then(() => this.syncTooltip(percent));
     }
   }
 

src/components/split-panel/split-panel.component.ts

@@ -189,6 +189,14 @@ export default class SlSplitPanel extends ShoelaceElement {
     const { width, height } = entries[0].contentRect;
     this.size = this.vertical ? height : width;
 
+    // There's some weird logic that gets `this.cachedPositionInPixels = NaN` or `this.position === Infinity` when
+    // a split-panel goes from `display: none;` to showing.
+    if (isNaN(this.cachedPositionInPixels) || this.position === Infinity) {
+      this.cachedPositionInPixels = Number(this.getAttribute('position-in-pixels'));
+      this.positionInPixels = Number(this.getAttribute('position-in-pixels'));
+      this.position = this.pixelsToPercentage(this.positionInPixels);
+    }
+
     // Resize when a primary panel is set
     if (this.primary) {
       this.position = this.pixelsToPercentage(this.cachedPositionInPixels);

src/components/textarea/textarea.component.ts

@@ -163,7 +163,9 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.resizeObserver.unobserve(this.input);
+    if (this.input) {
+      this.resizeObserver.unobserve(this.input);
+    }
   }
 
   private handleBlur() {

src/components/tooltip/tooltip.styles.ts

@@ -44,6 +44,8 @@ export default css`
     font-size: var(--sl-tooltip-font-size);
     font-weight: var(--sl-tooltip-font-weight);
     line-height: var(--sl-tooltip-line-height);
+    text-align: start;
+    white-space: normal;
     color: var(--sl-tooltip-color);
     padding: var(--sl-tooltip-padding);
     pointer-events: none;

src/internal/scroll.ts

@@ -33,6 +33,19 @@ export function lockBodyScrolling(lockingEl: HTMLElement) {
   if (!document.documentElement.classList.contains('sl-scroll-lock')) {
     /** Scrollbar width + body padding calculation can go away once Safari has scrollbar-gutter support. */
     const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding(); // must be measured before the `sl-scroll-lock` class is applied
+
+    let scrollbarGutterProperty = getComputedStyle(document.documentElement).scrollbarGutter;
+
+    // default is auto, unsupported browsers is "undefined"
+    if (!scrollbarGutterProperty || scrollbarGutterProperty === 'auto') {
+      scrollbarGutterProperty = 'stable';
+    }
+
+    if (scrollbarWidth <= 0) {
+      // if there's no scrollbar, just set it to "revert" so whatever the user has set gets used. This is useful is the page is not overflowing and showing a scrollbar, or if the user has overflow: hidden, or any other reason a scrollbar may not be showing.
+      scrollbarGutterProperty = 'revert';
+    }
+    document.documentElement.style.setProperty('--sl-scroll-lock-gutter', scrollbarGutterProperty);
     document.documentElement.classList.add('sl-scroll-lock');
     document.documentElement.style.setProperty('--sl-scroll-lock-size', `${scrollbarWidth}px`);
   }

src/themes/_utility.css

@@ -6,7 +6,10 @@
 
 @supports (scrollbar-gutter: stable) {
   .sl-scroll-lock {
-    scrollbar-gutter: stable !important;
+    scrollbar-gutter: var(--sl-scroll-lock-gutter) !important;
+  }
+
+  .sl-scroll-lock body {
     overflow: hidden !important;
   }
 }

src/translations/id.ts

@@ -0,0 +1,39 @@
+import { registerTranslation } from '@shoelace-style/localize';
+import type { Translation } from '../utilities/localize.js';
+
+const translation: Translation = {
+  $code: 'id',
+  $name: 'Bahasa Indonesia',
+  $dir: 'ltr',
+
+  carousel: 'Karousel',
+  clearEntry: 'Hapus entri',
+  close: 'Tutup',
+  copied: 'Disalin',
+  copy: 'Salin',
+  currentValue: 'Nilai saat ini',
+  error: 'Kesalahan',
+  goToSlide: (slide, count) => `Pergi ke slide ${slide} dari ${count}`,
+  hidePassword: 'Sembunyikan sandi',
+  loading: 'Memuat',
+  nextSlide: 'Slide berikutnya',
+  numOptionsSelected: num => {
+    if (num === 0) return 'Tidak ada opsi yang dipilih';
+    if (num === 1) return '1 opsi yang dipilih';
+    return `${num} opsi yang dipilih`;
+  },
+  previousSlide: 'Slide sebelumnya',
+  progress: 'Kemajuan',
+  remove: 'Hapus',
+  resize: 'Ubah ukuran',
+  scrollToEnd: 'Gulir ke akhir',
+  scrollToStart: 'Gulir ke awal',
+  selectAColorFromTheScreen: 'Pilih warna dari layar',
+  showPassword: 'Tampilkan sandi',
+  slideNum: slide => `Slide ${slide}`,
+  toggleColorFormat: 'Beralih format warna'
+};
+
+registerTranslation(translation);
+
+export default translation;