feat(cxl-ui): add cxl-search-header-item component

packages/cxl-ui/scss/cxl-filter-header-item.scss

@@ -0,0 +1,29 @@
+:host {
+  font-weight: 400;
+
+  vaadin-button {
+    background-color: transparent;
+    border-radius: var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0 0 ;
+    margin-bottom: 0;
+
+    &::part(label) {
+      color: var(--lumo-shade);
+    }
+  }
+
+  .label {
+    font-weight: 600;
+  }
+}
+
+:host(.checked) {
+  color: var(--lumo-contrast);
+
+  vaadin-button, vaadin-button {
+    background-color: var(--lumo-primary-color);
+
+    &::part(label) {
+      color: var(--lumo-base-color);
+    }
+  }
+}

packages/cxl-ui/src/components/cxl-filter-header-item.js

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@vaadin/button';
+import cxlFilterHeaderItemStyles from '../styles/cxl-filter-header-item-css.js';
+
+@customElement('cxl-filter-header-item')
+export class CXLFilterHeaderItemElement extends LitElement {
+  static get styles() {
+    return [cxlFilterHeaderItemStyles];
+  }
+
+  @property({ type: String }) label = '';
+
+  @property({ type: String }) value = '';
+
+  @property({ type: Number }) count = 0;
+
+  @property({ type: Boolean, reflect: true }) checked = false;
+
+  render () {
+    return html`
+    <vaadin-button>
+      <span class="label">${this.label}</span>
+      <span class="count">(${this.count})</span>
+    </vaadin-button>
+    `
+  }
+}