Merge remote-tracking branch 'origin/main' into fix/2012-tooltip-support-aria-labelledby-for-anchoring-the-tooltip-to-its-owner

Author: anna-lach

.changeset/afraid-adults-serve.md

@@ -0,0 +1,6 @@
+---
+'@sl-design-system/listbox': patch
+---
+
+- Adds missing divider between groups and options,
+- Fixes rendering `sl-option-group-header` only when the label attribute is set.

packages/components/listbox/src/listbox.ts

@@ -230,7 +230,19 @@ export class Listbox<T = any, U = T> extends ScopedElementsMixin(LitElement) {
   #propagateEmphasis(): void {
     const slot = this.renderRoot.querySelector('slot');
 
+    // This is a workaround because we can't (yet) target combinations of ::slotted children using :has()
+    const style = document.createElement('style');
+    style.innerHTML = `
+         sl-option-group:has(+ sl-option) {
+            border-block-end: var(--sl-color-border-plain) solid var(--sl-size-borderWidth-default);
+            margin-block-end: var(--sl-size-075);
+            padding-block-end: var(--sl-size-100);
+        }
+      `;
+
     slot?.assignedElements({ flatten: true }).forEach(el => {
+      el.append(style);
+
       if (el instanceof Option) {
         el.emphasis = this.emphasis;
       } else if (el instanceof OptionGroup) {

packages/components/listbox/src/option-group.ts

@@ -1,5 +1,5 @@
 import { type ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
-import { type CSSResultGroup, LitElement, type PropertyValues, type TemplateResult, html } from 'lit';
+import { type CSSResultGroup, LitElement, type PropertyValues, type TemplateResult, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { OptionGroupHeader } from './option-group-header.js';
 import styles from './option-group.scss.js';
@@ -50,7 +50,7 @@ export class OptionGroup extends ScopedElementsMixin(LitElement) {
   override render(): TemplateResult {
     return html`
       <div part="wrapper">
-        <sl-option-group-header>${this.label}</sl-option-group-header>
+        ${this.label ? html`<sl-option-group-header>${this.label}</sl-option-group-header>` : nothing}
         <slot></slot>
       </div>
     `;

packages/components/tabs/src/tab-group.scss

@@ -192,6 +192,7 @@
   transform-origin: center left;
   transition-property:
     width, height, translate; // TODO: `width` and `height` are not animated on the GPU, but `scale` is not working properly in Safari e.g. when zooming in/out (so we cannot use it right now). Change to `scale` when Safari supports it in a proper way.
+
   transition-timing-function: ease-in-out;
   translate: 0;