Merge remote-tracking branch 'origin/feature/1507-grid-apply-tokens' …

…into feature/1507-grid-apply-tokens-selection-change

.changeset/ninety-comics-poke.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/menu': patch
+---
+
+Set initial aria-details and aria-expanded on the menu button

.changeset/tough-papayas-sip.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/combobox': patch
+---
+
+Show a message when there are no filter matches

.changeset/yellow-tools-press.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/grid': patch
+---
+
+Fix error in code when flattening column groups

examples/lit/package.json

@@ -22,6 +22,6 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^3.0.5",
-    "@sl-design-system/shared": "^0.3.1"
+    "@sl-design-system/shared": "^0.3.2"
   }
 }

packages/components/combobox/CHANGELOG.md

@@ -0,0 +1,15 @@
+# @sl-design-system/combobox
+
+## 0.0.1
+
+### Patch Changes
+
+- [#1492](https://github.com/sl-design-system/components/pull/1492) [`21302c2`](https://github.com/sl-design-system/components/commit/21302c28065512f1c89ffde17dbc3241a2306d5d) - New `<sl-combobox>` component
+
+- [#1536](https://github.com/sl-design-system/components/pull/1536) [`d79c397`](https://github.com/sl-design-system/components/commit/d79c3977b15cf55c8a83db94fc4ab98a1fe7e328) - Fix combobox, radio-group and select not focusing the form control when clicking the label
+
+- Updated dependencies [[`21302c2`](https://github.com/sl-design-system/components/commit/21302c28065512f1c89ffde17dbc3241a2306d5d), [`21302c2`](https://github.com/sl-design-system/components/commit/21302c28065512f1c89ffde17dbc3241a2306d5d), [`21302c2`](https://github.com/sl-design-system/components/commit/21302c28065512f1c89ffde17dbc3241a2306d5d), [`000723a`](https://github.com/sl-design-system/components/commit/000723a8e42cb468383fa0b968eb31a672b95e80), [`21302c2`](https://github.com/sl-design-system/components/commit/21302c28065512f1c89ffde17dbc3241a2306d5d)]:
+  - @sl-design-system/text-field@1.4.0
+  - @sl-design-system/listbox@0.0.1
+  - @sl-design-system/form@1.0.4
+  - @sl-design-system/tag@0.0.3

packages/components/combobox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sl-design-system/combobox",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Combobox component for the SL Design System",
   "license": "Apache-2.0",
   "publishConfig": {
@@ -38,11 +38,11 @@
     "test": "echo \"Error: run tests from monorepo root.\" && exit 1"
   },
   "dependencies": {
-    "@sl-design-system/form": "^1.0.3",
+    "@sl-design-system/form": "^1.0.4",
     "@sl-design-system/icon": "^1.0.2",
-    "@sl-design-system/listbox": "^0.0.0",
-    "@sl-design-system/tag": "^0.0.2",
-    "@sl-design-system/text-field": "^1.3.5"
+    "@sl-design-system/listbox": "^0.0.1",
+    "@sl-design-system/tag": "^0.0.3",
+    "@sl-design-system/text-field": "^1.4.0"
   },
   "devDependencies": {
     "@open-wc/scoped-elements": "^3.0.5",

packages/components/combobox/src/combobox.spec.ts

@@ -825,6 +825,27 @@ describe('sl-combobox', () => {
         expect(options[1]).to.be.displayed;
         expect(options[2]).to.be.displayed;
       });
+
+      it('should show a message when there are no matches', async () => {
+        input.focus();
+        await sendKeys({ type: 'Foo' });
+
+        const noMatch = el.querySelector('sl-combobox-no-match');
+        expect(noMatch).to.exist;
+        expect(noMatch?.renderRoot).to.have.text('No options starting with "Foo" have been found.');
+      });
+
+      it('should remove the message when there are matches', async () => {
+        input.focus();
+        await sendKeys({ type: 'Foo' });
+
+        expect(el.querySelector('sl-combobox-no-match')).to.exist;
+
+        input.select();
+        await sendKeys({ press: 'Backspace' });
+
+        expect(el.querySelector('sl-combobox-no-match')).not.to.exist;
+      });
     });
 
     describe('group selected', () => {

packages/components/combobox/src/combobox.ts

@@ -14,6 +14,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import styles from './combobox.scss.js';
 import { CreateCustomOption } from './create-custom-option.js';
 import { CustomOption } from './custom-option.js';
+import { NoMatch } from './no-match.js';
 import { SelectedGroup } from './selected-group.js';
 
 declare global {
@@ -57,6 +58,7 @@ export class Combobox<T = unknown> extends FormControlMixin(ScopedElementsMixin(
     return {
       'sl-combobox-create-custom-option': CreateCustomOption,
       'sl-combobox-custom-option': CustomOption,
+      'sl-combobox-no-match': NoMatch,
       'sl-combobox-selected-group': SelectedGroup,
       'sl-icon': Icon,
       'sl-option': Option,
@@ -75,6 +77,9 @@ export class Combobox<T = unknown> extends FormControlMixin(ScopedElementsMixin(
   /** Event controller. */
   #events = new EventsController(this, { click: this.#onClick });
 
+  /** Message element for when filtering results did not yield any results. */
+  #noMatch?: NoMatch;
+
   /** Monitor the DOM for new options. */
   #observer = new MutationObserver(() => this.#updateOptions());
 
@@ -670,16 +675,31 @@ export class Combobox<T = unknown> extends FormControlMixin(ScopedElementsMixin(
   }
 
   #updateFilteredOptions(value?: string): void {
+    let noMatch = true;
+
     this.options.forEach(option => {
       let match = !this.filterResults || !value;
       if (!match) {
         match = option.content.toLowerCase().startsWith(value!.toLowerCase());
       }
 
+      if (noMatch && match) {
+        noMatch = false;
+      }
+
       if (option.element) {
         option.element.style.display = match ? '' : 'none';
       }
     });
+
+    if (noMatch && value) {
+      this.#noMatch ||= this.shadowRoot!.createElement('sl-combobox-no-match') as NoMatch;
+      this.#noMatch.value = value;
+      this.listbox?.prepend(this.#noMatch);
+    } else {
+      this.#noMatch?.remove();
+      this.#noMatch = undefined;
+    }
   }
 
   /** Updates the list of options and the listbox link with the text input. */

packages/components/combobox/src/no-match.scss

@@ -0,0 +1,4 @@
+:host {
+  color: var(--sl-color-text-plain);
+  padding-inline: var(--sl-space-new-md);
+}

packages/components/combobox/src/no-match.ts

@@ -0,0 +1,26 @@
+import { localized, msg, str } from '@lit/localize';
+import { type CSSResultGroup, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './no-match.scss.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-combobox-no-match': NoMatch;
+  }
+}
+
+/**
+ * Message component for when filtering a listbox yields no matches.
+ */
+@localized()
+export class NoMatch extends LitElement {
+  /** @internal */
+  static override styles: CSSResultGroup = styles;
+
+  /** The string that did not yield any matches. */
+  @property() value?: string;
+
+  override render(): string {
+    return msg(str`No options starting with "${this.value}" have been found.`);
+  }
+}

packages/components/form/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @sl-design-system/form
 
+## 1.0.4
+
+### Patch Changes
+
+- [#1500](https://github.com/sl-design-system/components/pull/1500) [`000723a`](https://github.com/sl-design-system/components/commit/000723a8e42cb468383fa0b968eb31a672b95e80) - Added `reset()` function to sl-form and FormController
+
+- Updated dependencies [[`21302c2`](https://github.com/sl-design-system/components/commit/21302c28065512f1c89ffde17dbc3241a2306d5d)]:
+  - @sl-design-system/shared@0.3.2
+
 ## 1.0.3
 
 ### Patch Changes

packages/components/form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sl-design-system/form",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Form components for the SL Design System",
   "license": "Apache-2.0",
   "publishConfig": {
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@sl-design-system/inline-message": "^1.0.1",
-    "@sl-design-system/shared": "^0.3.0"
+    "@sl-design-system/shared": "^0.3.2"
   },
   "devDependencies": {
     "@lit/localize": "^0.12.1",