feat(sbb-chip-group): initial implementation

src/elements/autocomplete/autocomplete-base-element.ts

@@ -30,6 +30,11 @@ import style from './autocomplete-base-element.scss?lit&inline';
  */
 const ariaRoleOnHost = isSafari;
 
+/**
+ * Custom event emitted on the input when an option is selected
+ */
+export const inputAutocompleteEvent = 'inputAutocomplete';
+
 export
 @hostAttributes({
   popover: 'manual',
@@ -205,6 +210,9 @@ abstract class SbbAutocompleteBaseElement extends SbbNegativeMixin(
       // Manually trigger the change events
       this.triggerElement.dispatchEvent(new Event('change', { bubbles: true }));
       this.triggerElement.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+
+      // Custom input event emitted when input value changes after an option is selected
+      this.triggerElement.dispatchEvent(new Event(inputAutocompleteEvent));
       this.triggerElement.focus();
     }
 
@@ -400,6 +408,7 @@ abstract class SbbAutocompleteBaseElement extends SbbNegativeMixin(
       'keydown',
       (event: KeyboardEvent) => this.openedPanelKeyboardInteraction(event),
       {
+        capture: true,
         signal: this._openPanelEventsController.signal,
       },
     );

src/elements/autocomplete/autocomplete.spec.ts

@@ -8,6 +8,7 @@ import { describeIf, EventSpy, waitForLitRender } from '../core/testing.js';
 import { SbbFormFieldElement } from '../form-field.js';
 import { SbbOptionElement } from '../option.js';
 
+import { inputAutocompleteEvent } from './autocomplete-base-element.js';
 import { SbbAutocompleteElement } from './autocomplete.js';
 
 describe(`sbb-autocomplete`, () => {
@@ -141,6 +142,7 @@ describe(`sbb-autocomplete`, () => {
     const optionSelectedEventSpy = new EventSpy(SbbOptionElement.events.optionSelected);
     const inputEventSpy = new EventSpy('input', input);
     const changeEventSpy = new EventSpy('change', input);
+    const inputAutocompleteEventSpy = new EventSpy(inputAutocompleteEvent, input);
     const optTwo = element.querySelector<SbbOptionElement>('#option-2')!;
 
     input.focus();
@@ -159,6 +161,7 @@ describe(`sbb-autocomplete`, () => {
 
     expect(inputEventSpy.count).to.be.equal(1);
     expect(changeEventSpy.count).to.be.equal(1);
+    expect(inputAutocompleteEventSpy.count).to.be.equal(1);
     expect(optionSelectedEventSpy.count).to.be.equal(1);
     expect(optionSelectedEventSpy.firstEvent!.target).to.have.property('id', 'option-2');
     expect(document.activeElement).to.be.equal(input);
@@ -170,6 +173,7 @@ describe(`sbb-autocomplete`, () => {
     const optionSelectedEventSpy = new EventSpy(SbbOptionElement.events.optionSelected);
     const inputEventSpy = new EventSpy('input', input);
     const changeEventSpy = new EventSpy('change', input);
+    const inputAutocompleteEventSpy = new EventSpy(inputAutocompleteEvent, input);
     const optOne = element.querySelector<SbbOptionElement>('#option-1');
     const optTwo = element.querySelector<SbbOptionElement>('#option-2');
     const keydownSpy = new EventSpy('keydown', input);
@@ -197,6 +201,7 @@ describe(`sbb-autocomplete`, () => {
     expect(optTwo).to.have.attribute('selected');
     expect(inputEventSpy.count).to.be.equal(1);
     expect(changeEventSpy.count).to.be.equal(1);
+    expect(inputAutocompleteEventSpy.count).to.be.equal(1);
     expect(optionSelectedEventSpy.count).to.be.equal(1);
     expect(input).to.have.attribute('aria-expanded', 'false');
     expect(input).not.to.have.attribute('aria-activedescendant');

src/elements/chip-group.ts

@@ -0,0 +1,2 @@
+export * from './chip-group/chip.js';
+export * from './chip-group/chip-group.js';

src/elements/chip-group/chip-group.ts

@@ -0,0 +1 @@
+export * from './chip-group/chip-group.js';

src/elements/chip-group/chip-group/__snapshots__/chip-group.snapshot.spec.snap.js

@@ -0,0 +1,185 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-chip-group renders DOM"] = 
+`<sbb-chip-group tabindex="0">
+  <sbb-chip value="Value 1">
+  </sbb-chip>
+</sbb-chip-group>
+`;
+/* end snapshot sbb-chip-group renders DOM */
+
+snapshots["sbb-chip-group renders Shadow DOM"] = 
+`<div
+  class="sbb-chip-group"
+  role="grid"
+>
+  <slot>
+  </slot>
+</div>
+`;
+/* end snapshot sbb-chip-group renders Shadow DOM */
+
+snapshots["sbb-chip-group renders with form-field DOM"] = 
+`<sbb-form-field
+  data-input-empty=""
+  data-input-type="input"
+  data-slot-names="label unnamed"
+  error-space="none"
+  size="m"
+  width="default"
+>
+  <label
+    for="sbb-form-field-input-0"
+    slot="label"
+  >
+    Field label
+  </label>
+  <sbb-chip-group
+    name="field-1"
+    tabindex="0"
+  >
+    <sbb-chip value="Value 1">
+    </sbb-chip>
+    <sbb-chip value="Value 2">
+    </sbb-chip>
+  </sbb-chip-group>
+  <input id="sbb-form-field-input-0">
+</sbb-form-field>
+`;
+/* end snapshot sbb-chip-group renders with form-field DOM */
+
+snapshots["sbb-chip-group renders with form-field Shadow DOM"] = 
+`<div class="sbb-form-field__space-wrapper">
+  <div
+    class="sbb-form-field__wrapper"
+    id="overlay-anchor"
+  >
+    <slot name="prefix">
+    </slot>
+    <div class="sbb-form-field__input-container">
+      <span
+        aria-hidden="true"
+        class="sbb-form-field__label-spacer"
+      >
+      </span>
+      <span class="sbb-form-field__label">
+        <span class="sbb-form-field__label-ellipsis">
+          <slot name="label">
+          </slot>
+        </span>
+      </span>
+      <div class="sbb-form-field__input">
+        <slot>
+        </slot>
+      </div>
+    </div>
+    <slot name="suffix">
+    </slot>
+  </div>
+  <div class="sbb-form-field__error">
+    <slot name="error">
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot sbb-chip-group renders with form-field Shadow DOM */
+
+snapshots["sbb-chip-group renders with form-field A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "statictext",
+      "name": "​"
+    },
+    {
+      "role": "text leaf",
+      "name": "Field label"
+    },
+    {
+      "role": "text container",
+      "name": "",
+      "children": [
+        {
+          "role": "grid",
+          "name": "",
+          "children": [
+            {
+              "role": "gridcell",
+              "name": "Value 1"
+            },
+            {
+              "role": "button",
+              "name": "Remove Value 1"
+            },
+            {
+              "role": "gridcell",
+              "name": "Value 2"
+            },
+            {
+              "role": "button",
+              "name": "Remove Value 2"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "role": "textbox",
+      "name": "Field label"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-chip-group renders with form-field A11y tree Firefox */
+
+snapshots["sbb-chip-group renders with form-field A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "​"
+    },
+    {
+      "role": "text",
+      "name": "Field label"
+    },
+    {
+      "role": "generic",
+      "name": "",
+      "children": [
+        {
+          "role": "gridcell",
+          "name": "Value 1"
+        },
+        {
+          "role": "button",
+          "name": "Remove Value 1"
+        },
+        {
+          "role": "gridcell",
+          "name": "Value 2"
+        },
+        {
+          "role": "button",
+          "name": "Remove Value 2"
+        }
+      ]
+    },
+    {
+      "role": "textbox",
+      "name": "Field label"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-chip-group renders with form-field A11y tree Chrome */
+

src/elements/chip-group/chip-group/chip-group.scss

@@ -0,0 +1,18 @@
+@use '../../core/styles/index' as sbb;
+
+// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
+@include sbb.box-sizing;
+
+:host {
+  --sbb-chip-group-input-min-width: #{sbb.px-to-rem-build(150)};
+}
+
+::slotted(input) {
+  flex: 1 1 var(--sbb-chip-group-input-min-width);
+}
+
+.sbb-chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sbb-spacing-fixed-1x);
+}

src/elements/chip-group/chip-group/chip-group.snapshot.spec.ts

@@ -0,0 +1,58 @@
+import { expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+
+import type { SbbChipGroupElement } from './chip-group.js';
+import './chip-group.js';
+import '../chip.js';
+import '../../form-field.js';
+
+describe(`sbb-chip-group`, () => {
+  describe('renders', () => {
+    let element: SbbChipGroupElement;
+
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-chip-group>
+          <sbb-chip value="Value 1"></sbb-chip>
+        </sbb-chip-group>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+  });
+
+  describe('renders with form-field', () => {
+    let element: SbbChipGroupElement;
+
+    beforeEach(async () => {
+      element = await fixture(html`
+        <sbb-form-field>
+          <label>Field label</label>
+          <sbb-chip-group name="field-1">
+            <sbb-chip value="Value 1"></sbb-chip>
+            <sbb-chip value="Value 2"></sbb-chip>
+          </sbb-chip-group>
+          <input />
+        </sbb-form-field>
+      `);
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
+});