@lion/ui 0.1.4 → 0.2.0

package/README.md

@@ -0,0 +1,222 @@
+<p align="center">
+  <img
+    width="20%"
+    src="./docs/_assets/logo.svg"
+    alt="Lion"
+  />
+  <h1 style="text-align: center;">Lion</h1>
+</p>
+
+<p align="center">
+  <a href="https://github.com/modernweb-dev/rocket/actions"
+    ><img
+      src="https://img.shields.io/github/workflow/status/modernweb-dev/rocket/Release/main?label=workflow&style=flat-square"
+      alt="GitHub Actions workflow status"
+  /></a>
+  <a href="https://github.com/modernweb-dev/rocket/actions"
+    ><img
+      src="https://img.shields.io/github/workflow/status/modernweb-dev/rocket/Release/main?label=workflow&style=flat-square"
+      alt="GitHub Actions workflow status"
+  /></a>
+  <a href="https://www.tickgit.com/browse?repo=github.com/ing-bank/lion"
+    ><img
+      src="https://badgen.net/https/api.tickgit.com/badgen/github.comgithub.com/ing-bank/lion"
+      alt="Todos"
+  /></a>
+</p>
+
+<p align="center">
+  <a href="https://lion-web.netlify.app">Website</a>
+  ·
+  <a href="https://lion-web.netlify.app/guides/">Guides</a>
+  ·
+  <a href="https://lion-web.netlify.app/components/">Components</a>
+  ·
+  <a href="https://lion-web.netlify.app/docs/">Documentation</a>
+  ·
+  <a href="https://lion-web.netlify.app/blog/">Blog</a>
+</p>
+
+**Lion is a set of highly performant, accessible and flexible Web Components.!**
+
+They provide an unopinionated, white-label layer that can be extended to your own layer of components.
+
+- **High Performance:** Focused on great performance in all relevant browsers with a minimal number of dependencies.
+- **Accessibility:** Aimed at compliance with the WCAG 2.1 AA standard to create components that are accessible for everybody.
+- **Flexibility:** Provides solutions through Web Components and JavaScript classes which can be used, adopted and extended to fit all needs.
+- **Modern Code:** Lion is distributes as pure es modules.
+- **Exposes functions/classes and Web Components:** Ships a functionality in it's most appropriate form.
+
+> Note: Our demos may look a little bland but that is on purpose. They only come with functional stylings.
+> This makes sense as the main use case is to extend those components and if you do you do not want to override existing stylings.
+
+<p align="center">
+  <a href="https://lion-web.netlify.app/guides/"><strong>Explore the Lion Guides&nbsp;&nbsp;▶</strong></a>
+</p>
+
+## How to install
+
+```bash
+npm i @lion/<package-name>
+```
+
+## How to use
+
+### Extend a Web Component
+
+**This is the main use case for lion**. To import component classes, and extend them for your own design system's components.
+
+```js
+import { css } from 'lit';
+import { LionInput } from '@lion/input';
+
+class MyInput extends LionInput {
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        /* your styles here */
+      `,
+    ];
+  }
+}
+customElements.define('my-input', MyInput);
+```
+
+### Use a JavaScript system
+
+There's a couple of "systems" in lion which have a JavaScript API. Examples are `localize`, `overlays`, `ajax`, etc.
+
+```html
+<script type="module">
+  import { ajax } from '@lion/ajax';
+
+  ajax
+    .fetch('data.json')
+    .then(response => response.json())
+    .then(data => {
+      // do something with the data
+    });
+</script>
+```
+
+### Use a Web Component
+
+You can also use the lion elements directly, although this is likely not a common use case.
+
+```html
+<script type="module">
+  import '@lion/input/define';
+</script>
+
+<lion-input name="firstName"></lion-input>
+```
+
+## Issues
+
+If you encounter an issue with any of the packages we are offering please open a [new bug issue](https://github.com/ing-bank/lion/issues/new?assignees=&labels=&template=bug_report.md&title=). Be sure to include a description of the expected and the current behavior - additional adding a [reproduction](https://webcomponents.dev/edit/kpZmz1CJN580OaXsk56f?pm=1) always helps.
+
+## Feature requests
+
+When you have an idea on how we could improve, please check our [discussions](https://github.com/ing-bank/lion/discussions) to see if there are similar ideas or feature requests. If there are none, please [start](https://github.com/ing-bank/lion/discussions/new) your feature request as a new discussion topic. Add the title `[Feature Request] My awesome feature` and a description of what you expect from the improvement and what the use case is.
+
+## Content
+
+Lion web components is logically organized in groups of systems.
+
+The accessibility column indicates whether the functionality is accessible in its core. Aspects like styling and content determine actual accessibility in usage.
+
+| Package                                                                                           | Version                                                                                                                                 | Description                                                                                    | Accessibility              |
+| ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -------------------------- |
+| **-- [Form System](https://lion-web.netlify.app/fundamentals/systems/form/overview/) --**         |                                                                                                                                         | A system that lets you make complex forms with ease, including: validation, translations.      | ✔️                         |
+| [combobox](https://lion-web.netlify.app/components/combobox/overview/)                            | [![combobox](https://img.shields.io/npm/v/@lion/combobox.svg)](https://www.npmjs.com/package/@lion/form)                                | Text box controlling popup listbox                                                             | ✔️                         |
+| [form](https://lion-web.netlify.app/components/form/overview)                                     | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form)                                        | Wrapper for multiple form elements                                                             | ✔️                         |
+| [form-core](https://lion-web.netlify.app/fundamentals/systems/form/overview/)                     | [![form-core](https://img.shields.io/npm/v/@lion/form-core.svg)](https://www.npmjs.com/package/@lion/form-core)                         | Core functionality for all form controls                                                       | ✔️                         |
+| [form-integrations](https://lion-web.netlify.app/fundamentals/systems/form/overview/)             | [![form-integrations](https://img.shields.io/npm/v/@lion/form-integrations.svg)](https://www.npmjs.com/package/@lion/form-integrations) | Shows form elements in an integrated way                                                       | ✔️                         |
+| [fieldset](https://lion-web.netlify.app/components/fieldset/overview/)                            | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset)                            | Group for form inputs                                                                          | ✔️                         |
+| [checkbox-group](https://lion-web.netlify.app/components/checkbox-group/overview/)                | [![checkbox-group](https://img.shields.io/npm/v/@lion/checkbox-group.svg)](https://www.npmjs.com/package/@lion/checkbox-group)          | Group of checkboxes                                                                            | ✔️                         |
+| [input](https://lion-web.netlify.app/components/input/overview/)                                  | [![input](https://img.shields.io/npm/v/@lion/input.svg)](https://www.npmjs.com/package/@lion/input)                                     | Input element for strings                                                                      | ✔️                         |
+| [input-amount](https://lion-web.netlify.app/components/input-amount/overview/)                    | [![input-amount](https://img.shields.io/npm/v/@lion/input-amount.svg)](https://www.npmjs.com/package/@lion/input-amount)                | Input element for amounts                                                                      | ✔️                         |
+| [input-date](https://lion-web.netlify.app/components/input-date/overview/)                        | [![input-date](https://img.shields.io/npm/v/@lion/input-date.svg)](https://www.npmjs.com/package/@lion/input-date)                      | Input element for dates                                                                        | ✔️                         |
+| [input-datepicker](https://lion-web.netlify.app/components/input-datepicker/overview/)            | [![input-datepicker](https://img.shields.io/npm/v/@lion/input-datepicker.svg)](https://www.npmjs.com/package/@lion/input-datepicker)    | Input element for dates with a datepicker                                                      | ✔️                         |
+| [input-email](https://lion-web.netlify.app/components/input-email/overview/)                      | [![input-email](https://img.shields.io/npm/v/@lion/input-email.svg)](https://www.npmjs.com/package/@lion/input-email)                   | Input element for e-mails                                                                      | ✔️                         |
+| [input-iban](https://lion-web.netlify.app/components/input-iban/overview/)                        | [![input-iban](https://img.shields.io/npm/v/@lion/input-iban.svg)](https://www.npmjs.com/package/@lion/input-iban)                      | Input element for IBANs                                                                        | ✔️                         |
+| [input-range](https://lion-web.netlify.app/components/input-range/overview/)                      | [![input-range](https://img.shields.io/npm/v/@lion/input-range.svg)](https://www.npmjs.com/package/@lion/input-range)                   | Input element for a range of values                                                            | ✔️                         |
+| [input-stepper](https://lion-web.netlify.app/components/input-stepper/overview/)                  | [![input-stepper](https://img.shields.io/npm/v/@lion/input-stepper.svg)](https://www.npmjs.com/package/@lion/input-stepper)             | Input stepper element for the predefined range                                                 | ✔️                         |
+| [listbox](https://lion-web.netlify.app/components/listbox/overview/)                              | [![listbox](https://img.shields.io/npm/v/@lion/listbox.svg)](https://www.npmjs.com/package/@lion/form)                                  | Interactive list with selectable options                                                       | ✔️                         |
+| [radio-group](https://lion-web.netlify.app/components/radio-group/overview/)                      | [![radio-group](https://img.shields.io/npm/v/@lion/radio-group.svg)](https://www.npmjs.com/package/@lion/radio-group)                   | Group of radios                                                                                | ✔️                         |
+| [select](https://lion-web.netlify.app/components/select/overview/)                                | [![select](https://img.shields.io/npm/v/@lion/select.svg)](https://www.npmjs.com/package/@lion/select)                                  | Simple native dropdown element                                                                 | ✔️                         |
+| [select-rich](https://lion-web.netlify.app/components/select-rich/overview/)                      | [![select-rich](https://img.shields.io/npm/v/@lion/select-rich.svg)](https://www.npmjs.com/package/@lion/select-rich)                   | 'rich' version of the native dropdown element                                                  | [#243][i243]               |
+| [textarea](https://lion-web.netlify.app/components/textarea/overview/)                            | [![textarea](https://img.shields.io/npm/v/@lion/textarea.svg)](https://www.npmjs.com/package/@lion/textarea)                            | Multiline text input                                                                           | ✔️                         |
+| **-- [Button System](https://lion-web.netlify.app/components/buttons-intro--page) --**            |                                                                                                                                         | These web components bring common UX patterns while still full integrated with (native) forms. |                            |
+| [button](https://lion-web.netlify.app/components/button/overview/)                                | [![button](https://img.shields.io/npm/v/@lion/button.svg)](https://www.npmjs.com/package/@lion/button)                                  | Button                                                                                         | ✔️                         |
+| [switch](https://lion-web.netlify.app/components/switch/overview/)                                | [![switch](https://img.shields.io/npm/v/@lion/switch.svg)](https://www.npmjs.com/package/@lion/switch)                                  | Switch                                                                                         | ✔️                         |
+| **-- [Overlay System](https://lion-web.netlify.app/components/overlays-intro--page) --**          |                                                                                                                                         | If something needs to overlay content this is your place.                                      |                            |
+| [overlays](https://lion-web.netlify.app/fundamentals/systems/overlays/overview/)                  | [![overlays](https://img.shields.io/npm/v/@lion/overlays.svg)](https://www.npmjs.com/package/@lion/overlays)                            | Overlay System                                                                                 | ✔️                         |
+| [dialog](https://lion-web.netlify.app/components/dialog/overview/)                                | [![dialog](https://img.shields.io/npm/v/@lion/dialog.svg)](https://www.npmjs.com/package/@lion/dialog)                                  | Dialog element                                                                                 | ✔️                         |
+| [tooltip](https://lion-web.netlify.app/components/tooltip/overview/)                              | [![tooltip](https://img.shields.io/npm/v/@lion/tooltip.svg)](https://www.npmjs.com/package/@lion/tooltip)                               | Tooltip element                                                                                | [#175][i175]               |
+| **-- [Navigation System](https://lion-web.netlify.app/components/navigation-intro--page) --**     |                                                                                                                                         | Components which are used to guide users                                                       |                            |
+| [accordion](https://lion-web.netlify.app/components/accordion/overview/)                          | [![accordion](https://img.shields.io/npm/v/@lion/accordion.svg)](https://www.npmjs.com/package/@lion/accordion)                         | Accordion                                                                                      | ✔️                         |
+| [pagination](https://lion-web.netlify.app/components/pagination/overview/)                        | [![pagination](https://img.shields.io/npm/v/@lion/pagination.svg)](https://www.npmjs.com/package/@lion/pagination)                      | Pagination                                                                                     | ✔️                         |
+| [steps](https://lion-web.netlify.app/components/steps/overview)                                   | [![steps](https://img.shields.io/npm/v/@lion/steps.svg)](https://www.npmjs.com/package/@lion/steps)                                     | Multi Step System                                                                              | n/a                        |
+| [tabs](https://lion-web.netlify.app/components/tabs/overview)                                     | [![tBS](https://img.shields.io/npm/v/@lion/tabs.svg)](https://www.npmjs.com/package/@lion/tabs)                                         | Move between a small number of equally important views                                         | n/a                        |
+| **-- [localize System](https://lion-web.netlify.app/fundamentals/systems/localize/overview/) --** |                                                                                                                                         | Localize text, numbers, dates and a way to store/fetch these data.                             |                            |
+| [localize](https://lion-web.netlify.app/fundamentals/systems/localize/overview/)                  | [![localize](https://img.shields.io/npm/v/@lion/localize.svg)](https://www.npmjs.com/package/@lion/localize)                            | Localize and translate your application/components                                             | n/a                        |
+| **-- [Icon System](https://lion-web.netlify.app/fundamentals/systems/icon/overview/) --**         |                                                                                                                                         | Loading and displaying icons                                                                   |                            |
+| [icon](https://lion-web.netlify.app/fundamentals/systems/icon/overview/)                          | [![icon](https://img.shields.io/npm/v/@lion/icon.svg)](https://www.npmjs.com/package/@lion/icon)                                        | Display our svg icons                                                                          | [#173][i173], [#172][i172] |
+| **-- Others --**                                                                                  |                                                                                                                                         | Features not fitting any other category                                                        |                            |
+| [core](https://lion-web.netlify.app/fundamentals/systems/core/overview/)                          | [![core](https://img.shields.io/npm/v/@lion/core.svg)](https://www.npmjs.com/package/@lion/core) | Core System (exports LitElement, lit-html)                                                     | n/a                        |
+| [ajax](https://lion-web.netlify.app/fundamentals/tools/ajax/overview/)                            | [![ajax](https://img.shields.io/npm/v/@lion/ajax.svg)](https://www.npmjs.com/package/@lion/ajax)                                        | Fetching data via ajax request                                                                 | n/a                        |
+| [calendar](https://lion-web.netlify.app/components/calendar/overview/)                            | [![calendar](https://img.shields.io/npm/v/@lion/calendar.svg)](https://www.npmjs.com/package/@lion/calendar)                            | Standalone calendar                                                                            | [#195][i195], [#194][i194] |
+| [collapsible](https://lion-web.netlify.app/components/collapsible/overview/)                      | [![collapsible](https://img.shields.io/npm/v/@lion/collapsible.svg)](https://www.npmjs.com/package/@lion/collapsible)                   | Combination of a button and a chunk of extra content                                           | ✔️                         |
+| **-- [Helpers](https://lion-web.netlify.app/fundamentals/tools/helpers/overview/) --**            | [![helpers](https://img.shields.io/npm/v/@lion/helpers.svg)](https://www.npmjs.com/package/@lion/helpers)                               | Helpers to make your and your life easier                                                      |                            |
+| [sb-action-logger](https://lion-web.netlify.app/fundamentals/tools/helpers/action-logger/)        |                                                                                                                                         | Storybook action logger                                                                        |
+
+## Technologies
+
+Lion Web Components aims to be future-proof and use well-supported proven technology. The stack we have chosen should reflect this.
+
+- [lit](https://lit.dev/)
+- [npm](http://npmjs.com)
+- [Open Web Components](https://open-wc.org)
+- [Modern Web](https://modern-web.dev)
+- [Mocha](https://mochajs.org)
+- [Chai](https://www.chaijs.com)
+- [ESLint](https://eslint.org)
+- [prettier](https://prettier.io)
+- [ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
+- Lots and lots of tests
+
+## Rationale
+
+We know from experience that making high quality, accessible UI components is hard and time consuming:
+it takes many iterations, a lot of development time and a lot of testing to get a generic component that works in every
+context, supports many edge cases and is accessible in all relevant screen readers.
+
+Lion aims to do the heavy lifting for you.
+This means you only have to apply your own Design System: by delivering styles, configuring components and adding a minimal set of custom logic on top.
+
+## Coding guidelines
+
+Check out our [coding guidelines](https://lion-web.netlify.app/guides/principles/definitions-and-terms/) for more detailed information.
+
+## How to contribute
+
+**Please note:** This project uses Npm [Workspaces](https://docs.npmjs.com/cli/v8/using-npm/workspaces). If you want to run all demos locally you need to get at least npm 7+ and install all dependencies by executing `npm install`.
+
+Lion Web Components are only as good as its contributions.
+Read our [contribution guide](https://github.com/ing-bank/lion/blob/master/CONTRIBUTING.md) and feel free to enhance/improve Lion. We keep feature requests closed while we're not working on them.
+
+## Contact
+
+Feel free to create a github issue for any feedback or questions you might have.
+You can also find us on the Lit & Friends slack in the [#lion](https://lit-and-friends.slack.com/archives/CJGFWJN9J) channel.
+
+You can join the Lit & Friends slack by visiting [https://lit.dev/slack-invite/](https://lit.dev/slack-invite/).
+
+[i172]: https://github.com/ing-bank/lion/issues/172
+[i173]: https://github.com/ing-bank/lion/issues/173
+[i175]: https://github.com/ing-bank/lion/issues/175
+[i194]: https://github.com/ing-bank/lion/issues/194
+[i195]: https://github.com/ing-bank/lion/issues/195
+[i243]: https://github.com/ing-bank/lion/issues/243

package/components/accordion/src/LionAccordion.js

@@ -171,12 +171,12 @@ export class LionAccordion extends LitElement {
 
     const invokers = /** @type {HTMLElement[]} */ ([
       ...Array.from(existingInvokers),
-      ...Array.from(this.querySelectorAll('[slot="invoker"]')),
+      ...Array.from(this.querySelectorAll(':scope > [slot="invoker"]')),
     ]);
 
     const contents = /** @type {HTMLElement[]} */ ([
       ...Array.from(existingContent),
-      ...Array.from(this.querySelectorAll('[slot="content"]')),
+      ...Array.from(this.querySelectorAll(':scope > [slot="content"]')),
     ]);
 
     if (invokers.length !== contents.length) {

package/components/accordion/test/lion-accordion.test.js

@@ -126,6 +126,37 @@ describe('<lion-accordion>', () => {
       );
       stub.restore();
     });
+
+    it('does not select any elements with slot="invoker" and slot="content" inside slotted elements', async () => {
+      const stub = sinon.stub(console, 'warn');
+      const el = /** @type {LionAccordion} */ (
+        await fixture(html`
+          <lion-accordion>
+            <h2 slot="invoker">
+              <button>invoker 1</button>
+              <button slot="invoker">Nested invoker</button>
+            </h2>
+            <h2 slot="invoker"><button>invoker 2</button></h2>
+            <div slot="content">
+              content 1
+              <p slot="content">Nested content 1</p>
+            </div>
+            <div slot="content">
+              content 2
+              <p slot="content">Nested content 2</p>
+            </div>
+          </lion-accordion>
+        `)
+      );
+
+      const invokers = Array.from(getInvokers(el));
+      const contents = Array.from(getContents(el));
+
+      expect(stub.called).to.be.false;
+      expect(invokers.length).to.equal(contents.length);
+
+      stub.restore();
+    });
   });
 
   describe('Accordion navigation', () => {

package/components/combobox/src/LionCombobox.js

@@ -1,8 +1,11 @@
 import { browserDetection } from '@lion/ui/core.js';
+import { Unparseable } from '@lion/ui/form-core.js';
 import { LionListbox } from '@lion/ui/listbox.js';
+import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 import { OverlayMixin, withDropdownConfig } from '@lion/ui/overlays.js';
 import { css, html } from 'lit';
 import { makeMatchingTextBold, unmakeMatchingTextBold } from './utils/makeMatchingTextBold.js';
+import { MatchesOption } from './validators.js';
 
 const matchA11ySpanReverseFns = new WeakMap();
 
@@ -11,12 +14,12 @@ const matchA11ySpanReverseFns = new WeakMap();
 // on Listbox or ListNavigationWithActiveDescendantMixin
 
 /**
- * @typedef {import('../../listbox/src/LionOption.js').LionOption} LionOption
- * @typedef {import('../../listbox/src/LionOptions.js').LionOptions} LionOptions
- * @typedef {import('../../overlays/types/OverlayConfig.js').OverlayConfig} OverlayConfig
- * @typedef {import('../../core/types/SlotMixinTypes.js').SlotsMap} SlotsMap
- * @typedef {import('../../form-core/types/choice-group/ChoiceInputMixinTypes.js').ChoiceInputHost} ChoiceInputHost
- * @typedef {import('../../form-core/types/FormControlMixinTypes.js').FormControlHost} FormControlHost
+ * @typedef {import('@lion/ui/listbox.js').LionOption} LionOption
+ * @typedef {import('@lion/ui/listbox.js').LionOptions} LionOptions
+ * @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
+ * @typedef {import('@lion/ui/types/core.js').SlotsMap} SlotsMap
+ * @typedef {import('@lion/ui/types/form-core.js').ChoiceInputHost} ChoiceInputHost
+ * @typedef {import('@lion/ui/types/form-core.js').FormControlHost} FormControlHost
  * @typedef {import('../types/SelectionDisplay.js').SelectionDisplay} SelectionDisplay
  */
 
@@ -24,7 +27,7 @@ const matchA11ySpanReverseFns = new WeakMap();
  * LionCombobox: implements the wai-aria combobox design pattern and integrates it as a Lion
  * FormControl
  */
-export class LionCombobox extends OverlayMixin(LionListbox) {
+export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
   /** @type {any} */
   static get properties() {
     return {
@@ -37,6 +40,9 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
         type: Boolean,
         attribute: 'show-all-on-empty',
       },
+      requireOptionMatch: {
+        type: Boolean,
+      },
       __shouldAutocompleteNextUpdate: Boolean,
     };
   }
@@ -75,6 +81,125 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
     ];
   }
 
+  static get localizeNamespaces() {
+    return [
+      {
+        'lion-combobox': /** @param {string} locale */ locale => {
+          switch (locale) {
+            case 'bg-BG':
+            case 'bg':
+              return import('@lion/ui/combobox-translations/bg.js');
+            case 'cs-CZ':
+            case 'cs':
+              return import('@lion/ui/combobox-translations/cs.js');
+            case 'de-AT':
+            case 'de-DE':
+            case 'de':
+              return import('@lion/ui/combobox-translations/de.js');
+            case 'en-AU':
+            case 'en-GB':
+            case 'en-PH':
+            case 'en-US':
+            case 'en':
+              return import('@lion/ui/combobox-translations/en.js');
+            case 'es-ES':
+            case 'es':
+              return import('@lion/ui/combobox-translations/es.js');
+            case 'fr-FR':
+            case 'fr-BE':
+            case 'fr':
+              return import('@lion/ui/combobox-translations/fr.js');
+            case 'hu-HU':
+            case 'hu':
+              return import('@lion/ui/combobox-translations/hu.js');
+            case 'it-IT':
+            case 'it':
+              return import('@lion/ui/combobox-translations/it.js');
+            case 'nl-BE':
+            case 'nl-NL':
+            case 'nl':
+              return import('@lion/ui/combobox-translations/nl.js');
+            case 'pl-PL':
+            case 'pl':
+              return import('@lion/ui/combobox-translations/pl.js');
+            case 'ro-RO':
+            case 'ro':
+              return import('@lion/ui/combobox-translations/ro.js');
+            case 'ru-RU':
+            case 'ru':
+              return import('@lion/ui/combobox-translations/ru.js');
+            case 'sk-SK':
+            case 'sk':
+              return import('@lion/ui/combobox-translations/sk.js');
+            case 'uk-UA':
+            case 'uk':
+              return import('@lion/ui/combobox-translations/uk.js');
+            case 'zh-CN':
+            case 'zh':
+              return import('@lion/ui/combobox-translations/zh.js');
+            default:
+              return import('@lion/ui/combobox-translations/en.js');
+          }
+        },
+      },
+      ...super.localizeNamespaces,
+    ];
+  }
+
+  /**
+   * @override ChoiceGroupMixin
+   */
+  // @ts-ignore
+  get modelValue() {
+    const choiceGroupModelValue = super.modelValue;
+    if (choiceGroupModelValue !== '') {
+      return choiceGroupModelValue;
+    }
+    // Since the FormatMixin can't be applied to a [FormGroup](https://github.com/ing-bank/lion/blob/master/packages/ui/components/form-core/src/form-group/FormGroupMixin.js)
+    // atm, we treat it in a way analogue to InteractionStateMixin (basically same apis, w/o Mixin applied).
+    // Hence, modelValue has no reactivity by default and we need to call parser manually here...
+    return this.parser(this.value);
+  }
+
+  // Duplicating from ChoiceGroupMixin, because you cannot independently inherit/override getter + setter.
+  // If you override one, gotta override the other, they go in pairs.
+  /**
+   * @override ChoiceGroupMixin
+   */
+  set modelValue(value) {
+    super.modelValue = value;
+  }
+
+  /**
+   * We define the value getter/setter below as also defined in LionField (via FormatMixin).
+   * Since FormatMixin is meant for Formgroups/ChoiceGroup it's not applied on Combobox;
+   * Combobox is somewhat of a hybrid between a ChoiceGroup and LionField, therefore we copy over
+   * some of the LionField members to align with its interface.
+   *
+   * The view value. Will be delegated to `._inputNode.value`
+   */
+  get value() {
+    return this._inputNode?.value || this.__value || '';
+  }
+
+  /** @param {string} value */
+  set value(value) {
+    // if not yet connected to dom can't change the value
+    if (this._inputNode) {
+      this._inputNode.value = value;
+      /** @type {string | undefined} */
+      this.__value = undefined;
+    } else {
+      this.__value = value;
+    }
+  }
+
+  reset() {
+    super.reset();
+    // @ts-ignore _initialModelValue comes from ListboxMixin
+    this.value = this._initialModelValue;
+  }
+
   /**
    * @enhance FormControlMixin - add slot[name=selection-display]
    * @protected
@@ -94,9 +219,12 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
    */
   // eslint-disable-next-line class-methods-use-this
   _overlayListboxTemplate() {
-    // TODO: Localize the aria-label
     return html`
-      <div id="overlay-content-node-wrapper" role="dialog" aria-label="Combobox options popup">
+      <div
+        id="overlay-content-node-wrapper"
+        role="dialog"
+        aria-label="${this.msgLit(`lion-combobox:optionsPopup`)}"
+      >
         <slot name="listbox"></slot>
       </div>
       <slot id="options-outlet"></slot>
@@ -187,7 +315,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
    * @protected
    */
   get _inputNode() {
-    if (this._ariaVersion === '1.1') {
+    if (this._ariaVersion === '1.1' && this._comboboxNode) {
       return /** @type {HTMLInputElement} */ (this._comboboxNode.querySelector('input'));
     }
     return /** @type {HTMLInputElement} */ (this._comboboxNode);
@@ -258,7 +386,11 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
      * By default, the listbox closes on empty, similar to wai-aria example and <datalist>
      */
     this.showAllOnEmpty = false;
-
+    /**
+     * If set to false, the value is allowed to not match any of the options.
+     * We set the default to true for backwards compatibility
+     */
+    this.requireOptionMatch = true;
     /**
      * @configure ListboxMixin: the wai-aria pattern and <datalist> rotate
      */
@@ -267,7 +399,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
      * @configure ListboxMixin: the wai-aria pattern and <datalist> have selection follow focus
      */
     this.selectionFollowsFocus = true;
-
+    this.defaultValidators.push(new MatchesOption());
     /**
      * For optimal support, we allow aria v1.1 on newer browsers
      * @type {'1.1'|'1.0'}
@@ -353,6 +485,18 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
     }
   }
 
+  /**
+   * Converts viewValue to modelValue
+   * @param {string} value - viewValue: the formatted value inside <input>
+   * @returns {*} modelValue
+   */
+  parser(value) {
+    if (this.requireOptionMatch && this.checkedIndex === -1 && value !== '') {
+      return new Unparseable(value);
+    }
+    return value;
+  }
+
   /**
    * When textbox value doesn't match checkedIndex anymore, update accordingly...
    * @protected
@@ -363,7 +507,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
     if (!this.multipleChoice && !autoselect && checkedElement) {
       const textboxValue = this._getTextboxValueFromOption(checkedElement);
       if (!this._inputNode.value.startsWith(textboxValue)) {
-        this.checkedIndex = -1;
+        this.setCheckedIndex(-1);
       }
     }
   }
@@ -411,6 +555,15 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
     if (typeof this._selectionDisplayNode?.onComboboxElementUpdated === 'function') {
       this._selectionDisplayNode.onComboboxElementUpdated(changedProperties);
     }
+
+    if (changedProperties.has('requireOptionMatch') || changedProperties.has('multipleChoice')) {
+      if (!this.requireOptionMatch && this.multipleChoice) {
+        // TODO implement !requireOptionMatch and multipleChoice flow
+        throw new Error(
+          "multipleChoice and requireOptionMatch=false can't be used at the same time (yet).",
+        );
+      }
+    }
   }
 
   /**
@@ -488,7 +641,13 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
    */
   // eslint-disable-next-line class-methods-use-this
   _getTextboxValueFromOption(option) {
-    return option.choiceValue;
+    if (option) {
+      return option.choiceValue;
+    }
+    if (this.modelValue instanceof Unparseable) {
+      return this.modelValue.viewValue;
+    }
+    return this.modelValue;
   }
 
   /**
@@ -745,7 +904,8 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
 
           if (isInlineAutoFillCandidate) {
             const textboxValue = this._getTextboxValueFromOption(option);
-            const stringValues = typeof textboxValue === 'string' && typeof curValue === 'string';
+            const stringValues =
+              textboxValue && typeof textboxValue === 'string' && typeof curValue === 'string';
             const beginsWith =
               stringValues && textboxValue.toLowerCase().indexOf(curValue.toLowerCase()) === 0;
             // We only can do proper inline autofilling when the beginning of the word matches
@@ -793,7 +953,8 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
     // [7]. If no autofill took place, we are left with the previously matched option; correct this
     if (autoselect && !hasAutoFilled && !this.multipleChoice) {
       // This means there is no match for checkedIndex
-      this.checkedIndex = -1;
+      this.setCheckedIndex(-1);
+      this.modelValue = this.parser(inputValue);
     }
 
     // [8]. These values will help computing autofill intentions next autocomplete cycle
@@ -856,6 +1017,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
       ...withDropdownConfig(),
       elementToFocusAfterHide: undefined,
       invokerNode: this._comboboxNode,
+      visibilityTriggerFunction: undefined,
     });
   }
 
@@ -1020,6 +1182,6 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
 
   clear() {
     super.clear();
-    this._inputNode.value = '';
+    this.value = '';
   }
 }

package/components/combobox/src/validators.js

@@ -0,0 +1,18 @@
+/* eslint-disable max-classes-per-file */
+import { Unparseable, Validator } from '@lion/ui/form-core.js';
+
+export class MatchesOption extends Validator {
+  static get validatorName() {
+    return 'MatchesOption';
+  }
+
+  /**
+   * @param {unknown} [value]
+   * @param {string | undefined} [options]
+   * @param {{ node: any }} [config]
+   */
+  // eslint-disable-next-line class-methods-use-this
+  execute(value, options, config) {
+    return config?.node.modelValue instanceof Unparseable;
+  }
+}