Merge remote-tracking branch 'origin/main' into feature/1487-POC-pagi…

…nator-component

.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

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/checkbox/src/checkbox-group.spec.ts

@@ -1,5 +1,6 @@
 import { expect, fixture } from '@open-wc/testing';
 import { type SlFormControlEvent } from '@sl-design-system/form';
+import '@sl-design-system/form/register.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { LitElement, type TemplateResult, html } from 'lit';
 import { spy } from 'sinon';
@@ -315,23 +316,39 @@ describe('sl-checkbox-group', () => {
 
       override render(): TemplateResult {
         return html`
-          <sl-checkbox-group @sl-form-control=${this.onFormControl}>
-            <sl-checkbox>Option 1</sl-checkbox>
-            <sl-checkbox>Option 2</sl-checkbox>
-            <sl-checkbox>Option 3</sl-checkbox>
-          </sl-checkbox-group>
+          <sl-form-field label="Label">
+            <sl-checkbox-group @sl-form-control=${this.onFormControl}>
+              <sl-checkbox>Option 1</sl-checkbox>
+              <sl-checkbox>Option 2</sl-checkbox>
+              <sl-checkbox>Option 3</sl-checkbox>
+            </sl-checkbox-group>
+          </sl-form-field>
         `;
       }
     }
 
     beforeEach(async () => {
-      customElements.define('form-integration-test-component', FormIntegrationTestComponent);
+      try {
+        customElements.define('form-integration-test-component', FormIntegrationTestComponent);
+      } catch {
+        // empty
+      }
 
       el = await fixture(html`<form-integration-test-component></form-integration-test-component>`);
     });
 
     it('should emit an sl-form-control event after first render', () => {
       expect(el.onFormControl).to.have.been.calledOnce;
     });
+
+    it('should focus the input of the first checkbox when the label is clicked', async () => {
+      const input = el.renderRoot.querySelector('input'),
+        label = el.renderRoot.querySelector('label');
+
+      label?.click();
+      await el.updateComplete;
+
+      expect(el.shadowRoot!.activeElement).to.equal(input);
+    });
   });
 });

packages/components/checkbox/src/checkbox.spec.ts

@@ -1,6 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
+import { type SlFormControlEvent } from '@sl-design-system/form';
+import '@sl-design-system/form/register.js';
 import { sendKeys } from '@web/test-runner-commands';
-import { html } from 'lit';
+import { LitElement, type TemplateResult, html } from 'lit';
 import { spy } from 'sinon';
 import '../register.js';
 import { Checkbox } from './checkbox.js';
@@ -373,4 +375,55 @@ describe('sl-checkbox', () => {
       expect(el.validationMessage).to.equal('Custom validation message');
     });
   });
+
+  describe('form integration', () => {
+    let el: FormIntegrationTestComponent;
+
+    class FormIntegrationTestComponent extends LitElement {
+      onFormControl: (event: SlFormControlEvent) => void = spy();
+
+      override render(): TemplateResult {
+        return html`
+          <sl-form-field label="Label">
+            <sl-checkbox @sl-form-control=${this.onFormControl}>Checkbox</sl-checkbox>
+          </sl-form-field>
+        `;
+      }
+    }
+
+    beforeEach(async () => {
+      try {
+        customElements.define('form-integration-test-component', FormIntegrationTestComponent);
+      } catch {
+        // empty
+      }
+
+      el = await fixture(html`<form-integration-test-component></form-integration-test-component>`);
+    });
+
+    it('should emit an sl-form-control event after first render', () => {
+      expect(el.onFormControl).to.have.been.calledOnce;
+    });
+
+    it('should focus the input when the label is clicked', async () => {
+      const input = el.renderRoot.querySelector('input'),
+        label = el.renderRoot.querySelector('label');
+
+      label?.click();
+      await el.updateComplete;
+
+      expect(el.shadowRoot!.activeElement).to.equal(input);
+    });
+
+    it('should toggle the checkbox when the label is clicked', async () => {
+      const checkbox = el.renderRoot.querySelector('sl-checkbox'),
+        label = el.renderRoot.querySelector('label');
+
+      label?.click();
+      await el.updateComplete;
+
+      expect(checkbox).to.have.attribute('checked');
+      expect(checkbox?.checked).to.be.true;
+    });
+  });
 });

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

@@ -1,9 +1,11 @@
 import { setupIgnoreWindowResizeObserverLoopErrors } from '@lit-labs/virtualizer/support/resize-observer-errors.js';
 import { expect, fixture } from '@open-wc/testing';
+import { type SlFormControlEvent } from '@sl-design-system/form';
+import '@sl-design-system/form/register.js';
 import '@sl-design-system/listbox/register.js';
 import { type SlChangeEvent } from '@sl-design-system/shared/events.js';
 import { sendKeys } from '@web/test-runner-commands';
-import { html } from 'lit';
+import { LitElement, type TemplateResult, html } from 'lit';
 import { spy } from 'sinon';
 import '../register.js';
 import { type Combobox } from './combobox.js';
@@ -823,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', () => {
@@ -865,4 +888,50 @@ describe('sl-combobox', () => {
       });
     });
   });
+
+  describe('form integration', () => {
+    let el: FormIntegrationTestComponent;
+
+    class FormIntegrationTestComponent extends LitElement {
+      onFormControl: (event: SlFormControlEvent) => void = spy();
+
+      override render(): TemplateResult {
+        return html`
+          <sl-form-field label="Label">
+            <sl-combobox @sl-form-control=${this.onFormControl}>
+              <sl-listbox>
+                <sl-option>Option 1</sl-option>
+                <sl-option>Option 2</sl-option>
+                <sl-option>Option 3</sl-option>
+              </sl-listbox>
+            </sl-combobox>
+          </sl-form-field>
+        `;
+      }
+    }
+
+    beforeEach(async () => {
+      try {
+        customElements.define('form-integration-test-component', FormIntegrationTestComponent);
+      } catch {
+        // empty
+      }
+
+      el = await fixture(html`<form-integration-test-component></form-integration-test-component>`);
+    });
+
+    it('should emit an sl-form-control event after first render', () => {
+      expect(el.onFormControl).to.have.been.calledOnce;
+    });
+
+    it('should focus the input when the label is clicked', async () => {
+      const input = el.renderRoot.querySelector('input'),
+        label = el.renderRoot.querySelector('label');
+
+      label?.click();
+      await el.updateComplete;
+
+      expect(el.shadowRoot!.activeElement).to.equal(input);
+    });
+  });
 });