New combobox component (#1492)

.changeset/big-books-behave.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/shared': patch
+---
+
+Prevent anchor directive from initializing more than once on the same host

.changeset/brown-camels-hunt.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/text-field': minor
+---
+
+Change the `autocomplete` property to be more flexible when inheriting

.changeset/chilly-llamas-remember.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/listbox': patch
+---
+
+New `<sl-listbox>`, `<sl-option>` and `<sl-option-group>` components

.changeset/curvy-glasses-cheat.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/combobox': patch
+---
+
+New `<sl-combobox>` component

.changeset/giant-walls-itch.md

@@ -0,0 +1,8 @@
+---
+'@sl-design-system/text-field': patch
+---
+
+Various bug fixes:
+- Fix selector for field button not matching when not slotted
+- Fix nested slotted `<input>` logic not working correctly
+- Rename private `#syncInput` to public `updateInputElement` method that can be overridden

.changeset/serious-lizards-kiss.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/select': patch
+---
+
+Fix `.focus()` not working properly on the select component.

.changeset/witty-planes-care.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/tag': patch
+---
+
+Fix tag list width calculation

.storybook/manager.ts

@@ -58,7 +58,7 @@ addons.setConfig({
     renderLabel: (item: HashEntry, api: API) => {
       if (item.depth !== 1 || item.type === 'docs') return item.name;
 
-      const tags = findComponentTags(item.children?.map(id => api.getData(id)).filter(({ type }) => type === 'story'));
+      const tags = findComponentTags(item.children?.map(id => api.getData(id)).filter(child => child?.type === 'story'));
       if (tags.length) {
         const tag = tags[0];
 

chromatic/.storybook/stories/all.stories.ts

@@ -5,6 +5,7 @@ import {All as AllBreadcrumbs} from '../../../packages/components/breadcrumbs/sr
 import {All as AllButton} from '../../../packages/components/button/src/button.stories';
 import {All as AllCard} from '../../../packages/components/card/src/card.stories';
 import {All as AllCheckbox} from '../../../packages/components/checkbox/src/checkbox.stories';
+import {All as AllCombobox} from '../../../packages/components/combobox/src/combobox.stories';
 import {All as AllDialog} from '../../../packages/components/dialog/src/dialog.stories';
 import {All as AllIcon} from '../../../packages/components/icon/src/icon.stories';
 import {All as AllInlineMessage} from '../../../packages/components/inline-message/src/inline-message.stories';
@@ -51,7 +52,7 @@ export default {
 /**
  * When adding an "All" story of a component you need to only include all variants that can have changes per style;
  * so when multiple variants or scenarios use the exact same styling or, more specifically, tokens,
- * there is no need to incluse all those scenarios.
+ * there is no need to include all those scenarios.
  *
  * The All story always needs its own `render` function, otherwise this doesn't work.
  */
@@ -62,6 +63,7 @@ export const Breadcrumbs = {render: AllBreadcrumbs.render};
 export const Button = {render: AllButton.render};
 export const Card = {render: AllCard.render};
 export const Checkbox = {render: AllCheckbox.render};
+export const Combobox = {render: AllCombobox.render};
 export const Dialog = {render: AllDialog.render, play: AllDialog.play};
 export const Icon = {render:  AllIcon.render};
 export const InlineMessage = {render: AllInlineMessage.render};

package.json

@@ -452,7 +452,7 @@
     "@types/mocha": "^10.0.7",
     "@types/sinon": "^17.0.3",
     "@web/dev-server-esbuild": "^1.0.2",
-    "@web/test-runner": "^0.18.3",
+    "@web/test-runner": "^0.19.0",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
     "@webcomponents/scoped-custom-element-registry": "^0.0.9",

packages/components/combobox/index.ts

@@ -0,0 +1 @@
+export * from './src/combobox.js';

packages/components/combobox/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@sl-design-system/combobox",
+  "version": "0.0.0",
+  "description": "Combobox component for the SL Design System",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sl-design-system/components.git",
+    "directory": "packages/components/combobox"
+  },
+  "homepage": "https://sanomalearning.design/components/combobox",
+  "bugs": {
+    "url": "https://github.com/sl-design-system/components/issues"
+  },
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "customElements": "custom-elements.json",
+  "exports": {
+    ".": "./index.js",
+    "./package.json": "./package.json",
+    "./register.js": "./register.js"
+  },
+  "files": [
+    "**/*.d.ts",
+    "**/*.js",
+    "**/*.js.map",
+    "custom-elements.json"
+  ],
+  "sideEffects": [
+    "register.js"
+  ],
+  "scripts": {
+    "test": "echo \"Error: run tests from monorepo root.\" && exit 1"
+  },
+  "dependencies": {
+    "@sl-design-system/form": "^1.0.3",
+    "@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"
+  },
+  "devDependencies": {
+    "@open-wc/scoped-elements": "^3.0.5",
+    "lit": "^3.1.4"
+  },
+  "peerDependencies": {
+    "@open-wc/scoped-elements": "^3.0.5",
+    "lit": "^3.1.4"
+  }
+}

packages/components/combobox/register.ts

@@ -0,0 +1,3 @@
+import { Combobox } from './src/combobox.js';
+
+customElements.define('sl-combobox', Combobox);

packages/components/combobox/src/combobox.scss

@@ -0,0 +1,56 @@
+:host {
+  display: flex;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+}
+
+sl-text-field {
+  flex: 1;
+  max-inline-size: 100%;
+  padding-block: 0;
+  padding-inline: var(--_padding-inline) 0;
+
+  &:has(> sl-tag-list) {
+    padding-inline: calc(var(--sl-space-new-md) - var(--sl-size-borderWidth-default)) 0;
+  }
+}
+
+sl-text-field:has(+ :popover-open) sl-icon {
+  rotate: 180deg;
+}
+
+sl-tag-list {
+  max-inline-size: 66%;
+}
+
+sl-icon {
+  transition: rotate 0.2s ease-in-out;
+}
+
+[popover] {
+  background: var(--sl-color-elevation-surface-raised);
+  border: var(--sl-color-elevation-border-raised) solid var(--sl-size-borderWidth-default);
+  border-radius: var(--sl-size-borderRadius-default);
+  box-shadow: var(--sl-elevation-shadow-md);
+  box-sizing: border-box;
+  display: none;
+  margin: 0;
+  padding: 0;
+
+  &:popover-open {
+    @starting-style {
+      display: flex;
+      opacity: 0;
+    }
+
+    display: flex;
+    opacity: 1;
+  }
+}
+
+::slotted(sl-listbox) {
+  flex: 1;
+  max-block-size: var(--sl-combobox-listbox-maxBlockSize, 20rem);
+}