@lion/ui 0.2.1 → 0.3.0

package/README.md

@@ -8,15 +8,15 @@
 </p>
 
 <p align="center">
-  <a href="https://github.com/modernweb-dev/rocket/actions"
+  <a href="https://github.com/ing-bank/lion/issues"
     ><img
-      src="https://img.shields.io/github/workflow/status/modernweb-dev/rocket/Release/main?label=workflow&style=flat-square"
-      alt="GitHub Actions workflow status"
+      src="https://badgen.net/github/open-issues/ing-bank/lion"
+      alt="Lion open issues status"
   /></a>
-  <a href="https://github.com/modernweb-dev/rocket/actions"
+  <a href="https://github.com/ing-bank/lion/pulls"
     ><img
-      src="https://img.shields.io/github/workflow/status/modernweb-dev/rocket/Release/main?label=workflow&style=flat-square"
-      alt="GitHub Actions workflow status"
+      src="https://badgen.net/github/open-prs/ing-bank/lion/"
+      alt="GitHub open pull requests status"
   /></a>
   <a href="https://www.tickgit.com/browse?repo=github.com/ing-bank/lion"
     ><img
@@ -28,12 +28,12 @@
 <p align="center">
   <a href="https://lion-web.netlify.app">Website</a>
   ·
+  <a href="https://lion-web.netlify.app/fundamentals/">Fundamentals</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>
 
@@ -42,7 +42,7 @@
 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.
+- **Accessibility:** Aimed at compliance with the WCAG 2.2 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.
@@ -57,7 +57,7 @@ They provide an unopinionated, white-label layer that can be extended to your ow
 ## How to install
 
 ```bash
-npm i @lion/<package-name>
+npm i @lion/ui
 ```
 
 ## How to use
@@ -68,7 +68,7 @@ npm i @lion/<package-name>
 
 ```js
 import { css } from 'lit';
-import { LionInput } from '@lion/input';
+import { LionInput } from '@lion/ui/input.js';
 
 class MyInput extends LionInput {
   static get styles() {
@@ -89,7 +89,7 @@ There's a couple of "systems" in lion which have a JavaScript API. Examples are
 
 ```html
 <script type="module">
-  import { ajax } from '@lion/ajax';
+  import { ajax } from '@lion/ui/ajax.js';
 
   ajax
     .fetch('data.json')
@@ -106,7 +106,7 @@ You can also use the lion elements directly, although this is likely not a commo
 
 ```html
 <script type="module">
-  import '@lion/input/define';
+  import '@lion/ui/define/lion-input.js';
 </script>
 
 <lion-input name="firstName"></lion-input>
@@ -122,55 +122,16 @@ When you have an idea on how we could improve, please check our [discussions](ht
 
 ## 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                                                                        |
+| Name                                                                                                                        | version                                                                                                                   | description                                                                                                                                                                                                                                                                                                                |
+| --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [@lion/ui](https://github.com/ing-bank/lion/tree/master/packages/ui)                                                        | <img src="https://img.shields.io/npm/v/@lion/ui.svg" alt="@lion/ui version"/>                                             | Set of components                                                                                                                                                                                                                                                                                                          |
+| [@lion/ajax](https://github.com/ing-bank/lion/tree/master/packages/ajax)                                                    | <img src="https://img.shields.io/npm/v/@lion/ajax.svg" alt="@lion/ajax version"/>                                         | A small wrapper around fetch                                                                                                                                                                                                                                                                                               |
+| [Singleton-manager](https://github.com/ing-bank/lion/tree/master/packages/singleton-manager)                                | <img src="https://img.shields.io/npm/v/singleton-manager.svg" alt="Singleton-manager version"/>                           | A singleton manager provides a way to make sure a singleton instance loaded from multiple file locations stays a singleton. Primarily useful if two major version of a package with a singleton is used.                                                                                                                   |
+| [Babel plugin extend docs](https://github.com/ing-bank/lion/tree/master/packages-node/babel-plugin-extend-docs)             | <img src="https://img.shields.io/npm/v/babel-plugin-extend-docs.svg" alt="babel-plugin-extend-docs version"/>             | A plugin which rewrites imports and templates according to a configuration. This enables the reuse of existing documentation from source packages while still using your extensions code.                                                                                                                                  |
+| [Providence analytics](https://github.com/ing-bank/lion/tree/master/packages-node/providence-analytics) | <img src="https://img.shields.io/npm/v/providence-analytics.svg" alt="providence-analytics version"/>                     | Providence is the 'All Seeing Eye' that generates usage statistics by analyzing code. It measures the effectivity and popularity of your software. With just a few commands you can measure the impact for (breaking) changes, making your release process more stable and predictable.                                    |
+| [Publish docs](https://github.com/ing-bank/lion/tree/master/packages-node/publish-docs) | <img src="https://img.shields.io/npm/v/publish-docs.svg" alt="publish-docs version"/>                                     | A tool that copies and processes your documentation (in a monorepo) so it can be published/shipped with your package.                                                                                                                                                                                                      |
+| [Remark extend](https://github.com/ing-bank/lion/tree/master/packages-node/remark-extend)                                   | <img src="https://img.shields.io/npm/v/remark-extend.svg" alt="remark-extend version"/>                                   | A plugin for remark to extend markdown by importing from source files.                                                                                                                                                                                                                                                     |
+| [Rocket preset extend lion docs](https://github.com/ing-bank/lion/tree/master/packages-node/rocket-preset-extend-lion-docs) | <img src="https://img.shields.io/npm/v/rocket-preset-extend-lion-docs.svg" alt="rocket-preset-extend-lion-docs version"/> | When maintaining your own extension layer of lion you most likely want to maintain a similar documentation. Copying and rewriting the markdown files works, but whenever something changes you need copy and rewrite again. To do this automatically you can use this preset for [rocket](https://rocket.modern-web.dev/). |
 
 ## Technologies
 
@@ -210,13 +171,3 @@ Read our [contribution guide](https://github.com/ing-bank/lion/blob/master/CONTR
 ## 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/button/src/LionButton.js

@@ -47,7 +47,7 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
           box-sizing: border-box;
           vertical-align: middle;
           line-height: 24px;
-          background: #eee; /* minimal styling to make it recognizable as btn */
+          background-color: #eee; /* minimal styling to make it recognizable as btn */
           padding: 8px; /* padding to fix with min-height */
           outline: none; /* focus style handled below */
           cursor: default; /* we should always see the default arrow, never a caret */

package/components/core/src/SlotMixin.js

@@ -83,6 +83,7 @@ const SlotMixinImplementation = superclass =>
         slotName,
         shouldRerender: true,
       });
+      // TODO: this is deprecated, remove later
       slotFunctionResult.afterRender?.();
     }
 
@@ -90,8 +91,8 @@ const SlotMixinImplementation = superclass =>
      * Here we rerender slots defined with a `SlotRerenderObject`
      * @param {import('lit-element').PropertyValues } changedProperties
      */
-    updated(changedProperties) {
-      super.updated(changedProperties);
+    update(changedProperties) {
+      super.update(changedProperties);
 
       if (this.__slotsThatNeedRerender.size) {
         for (const slotName of Array.from(this.__slotsThatNeedRerender)) {

package/components/core/test/SlotMixin.test.js

@@ -383,7 +383,7 @@ describe('SlotMixin', () => {
       expect(slot.tagName).to.equal('SPAN');
     });
 
-    it('supports afterRender logic (type "{ template:TemplateResults; afterRender: Function}" )', async () => {
+    it('supports (deprecated) afterRender logic (type "{ template:TemplateResults; afterRender: Function}" )', async () => {
       let varThatProvesAfterRenderIsCalled = 'not called';
 
       const tag = defineCE(

package/components/core/types/SlotMixinTypes.ts

@@ -6,7 +6,10 @@ import { TemplateResult, LitElement } from 'lit';
  */
 export type SlotRerenderObject = {
   template: TemplateResult;
-  /* Add logic that will be performed after the render */
+  /**
+   * Add logic that will be performed after the render
+   * @deprecated
+   */
   afterRender?: Function;
 };
 

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

@@ -1,3 +1,4 @@
+/* eslint-disable lit-a11y/no-autofocus */
 import { expect, fixture as _fixture, html, unsafeStatic } from '@open-wc/testing';
 import { runOverlayMixinSuite } from '../../overlays/test-suites/OverlayMixin.suite.js';
 import '@lion/ui/define/lion-dialog.js';
@@ -72,4 +73,59 @@ describe('lion-dialog', () => {
       expect(nestedDialogEl.opened).to.be.true;
     });
   });
+
+  describe('focus', () => {
+    it('sets focus on contentSlot by default', async () => {
+      const el = await fixture(html`
+        <lion-dialog>
+          <button slot="invoker">invoker button</button>
+          <div slot="content">
+            <label for="myInput">Label</label>
+            <input id="myInput" />
+          </div>
+        </lion-dialog>
+      `);
+      // @ts-expect-error [allow-protected-in-tests]
+      const invokerNode = el._overlayInvokerNode;
+      invokerNode.focus();
+      invokerNode.click();
+      const contentNode = el.querySelector('[slot="content"]');
+      expect(document.activeElement).to.equal(contentNode);
+    });
+
+    it('sets focus on autofocused element', async () => {
+      const el = await fixture(html`
+        <lion-dialog>
+          <button slot="invoker">invoker button</button>
+          <div slot="content">
+            <label for="myInput">Label</label>
+            <input id="myInput" autofocus />
+          </div>
+        </lion-dialog>
+      `);
+      // @ts-expect-error [allow-protected-in-tests]
+      const invokerNode = el._overlayInvokerNode;
+      invokerNode.focus();
+      invokerNode.click();
+      const input = el.querySelector('input');
+      expect(document.activeElement).to.equal(input);
+    });
+
+    it('with trapsKeyboardFocus set to false the focus stays on the invoker', async () => {
+      const el = /** @type {LionDialog} */ await fixture(html`
+        <lion-dialog .config=${{ trapsKeyboardFocus: false }}>
+          <button slot="invoker">invoker button</button>
+          <div slot="content">
+            <label for="myInput">Label</label>
+            <input id="myInput" autofocus />
+          </div>
+        </lion-dialog>
+      `);
+      // @ts-expect-error [allow-protected-in-tests]
+      const invokerNode = el._overlayInvokerNode;
+      invokerNode.focus();
+      invokerNode.click();
+      expect(document.activeElement).to.equal(invokerNode);
+    });
+  });
 });

package/components/form-core/src/FocusMixin.js

@@ -27,6 +27,7 @@ const FocusMixinImplementation = superclass =>
       return {
         focused: { type: Boolean, reflect: true },
         focusedVisible: { type: Boolean, reflect: true, attribute: 'focused-visible' },
+        autofocus: { type: Boolean, reflect: true }, // Required in Lit to observe autofocus
       };
     }
 
@@ -47,11 +48,16 @@ const FocusMixinImplementation = superclass =>
        * @type {boolean}
        */
       this.focusedVisible = false;
+      this.autofocus = false;
     }
 
-    connectedCallback() {
-      super.connectedCallback();
+    /**
+     * @param {import('lit').PropertyValues } changedProperties
+     */
+    firstUpdated(changedProperties) {
+      super.firstUpdated(changedProperties);
       this.__registerEventsForFocusMixin();
+      this.__syncAutofocusToFocusableElement();
     }
 
     disconnectedCallback() {
@@ -59,6 +65,31 @@ const FocusMixinImplementation = superclass =>
       this.__teardownEventsForFocusMixin();
     }
 
+    /**
+     * @param {import('lit').PropertyValues } changedProperties
+     */
+    updated(changedProperties) {
+      super.updated(changedProperties);
+      if (changedProperties.has('autofocus')) {
+        this.__syncAutofocusToFocusableElement();
+      }
+    }
+
+    /**
+     * @private
+     */
+    __syncAutofocusToFocusableElement() {
+      if (!this._focusableNode) {
+        return;
+      }
+
+      if (this.hasAttribute('autofocus')) {
+        this._focusableNode.setAttribute('autofocus', '');
+      } else {
+        this._focusableNode.removeAttribute('autofocus');
+      }
+    }
+
     /**
      * Calls `focus()` on focusable element within
      */

package/components/form-core/src/LionField.js

@@ -72,9 +72,11 @@ export class LionField extends FormControlMixin(
 
   /**
    * Dispatches custom bubble event
+   * @param {Event=} ev
    * @protected
    */
-  _onChange() {
+  // eslint-disable-next-line no-unused-vars
+  _onChange(ev) {
     /** @protectedEvent user-input-changed */
     this.dispatchEvent(new Event('user-input-changed', { bubbles: true }));
   }

package/components/form-core/src/validate/LionValidationFeedback.js

@@ -3,10 +3,7 @@ import { html, LitElement } from 'lit';
 /**
  * @typedef {import('./Validator.js').Validator} Validator
  * @typedef {import('lit').TemplateResult} TemplateResult
- * @typedef {Object} messageMap
- * @property {string | Node} message
- * @property {string} type
- * @property {Validator} [validator]
+ * @typedef {import('../../types/validate/ValidateMixinTypes.js').FeedbackMessage} FeedbackMessage
  */
 
 /**
@@ -47,7 +44,7 @@ export class LionValidationFeedback extends LitElement {
       if (this.currentType === 'success') {
         this.removeMessage = window.setTimeout(() => {
           this.removeAttribute('type');
-          /** @type {messageMap[]} */
+          /** @type {FeedbackMessage[]} */
           this.feedbackData = [];
         }, 3000);
       }

package/components/form-core/src/validate/ResultValidator.js

@@ -1,7 +1,7 @@
 import { Validator } from './Validator.js';
 
 /**
- * @desc Instead of evaluating the result of a regular validator, a ResultValidator looks
+ * Instead of evaluating the result of a regular Validator, a ResultValidator looks
  * at the total result of regular Validators. Instead of an execute function, it uses a
  * 'executeOnResults' Validator.
  * ResultValidators cannot be async, and should not contain an execute method.

package/components/form-core/test/FocusMixin.test.js

@@ -323,6 +323,39 @@ describe('FocusMixin', () => {
         spy4.restore();
         restoreMock4();
       });
+
+      it('has mirrors syncs autofocus on the focusable element when autofocus changes', async () => {
+        const el = /** @type {Focusable} */ (
+          await fixture(html`
+          <${tag}><input slot="input"></${tag}>
+        `)
+        );
+
+        // @ts-ignore [allow-protected] in test
+        const { _focusableNode } = el;
+
+        el.setAttribute('autofocus', '');
+        await el.updateComplete;
+        expect(_focusableNode.hasAttribute('autofocus')).to.be.true;
+
+        el.removeAttribute('autofocus');
+        await el.updateComplete;
+        expect(_focusableNode.hasAttribute('autofocus')).not.to.be.true;
+      });
+
+      it('has mirrors syncs autofocus on the focusable element when autofocus was set on render', async () => {
+        const el = /** @type {Focusable} */ (
+          await fixture(html`
+          <${tag} autofocus><input slot="input"></${tag}>
+        `)
+        );
+
+        // @ts-ignore [allow-protected] in test
+        const { _focusableNode } = el;
+
+        expect(el.hasAttribute('autofocus')).to.be.true;
+        expect(_focusableNode.hasAttribute('autofocus')).to.be.true;
+      });
     });
   });
 });

package/components/form-core/types/validate/ValidateMixinTypes.ts

@@ -9,9 +9,9 @@ import { FormControlHost } from '../FormControlMixinTypes.js';
 import { SyncUpdatableHost } from '../utils/SyncUpdatableMixinTypes.js';
 import { Validator } from '../../src/validate/Validator.js';
 
-type FeedbackMessage = {
+export type FeedbackMessage = {
   message: string | Node;
-  type: string;
+  type: ValidationType | string;
   validator?: Validator;
 };
 

package/components/form-integrations/test/dialog-integrations.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable lit-a11y/no-autofocus */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
 import { getAllTagNames } from './helpers/helpers.js';
@@ -36,6 +37,7 @@ describe('Form inside dialog Integrations', () => {
       'lion-input-amount',
       'lion-input-iban',
       'lion-input-email',
+      'lion-input-file',
       'lion-input-tel',
       'lion-input-tel-dropdown',
       'lion-checkbox-group',
@@ -70,4 +72,21 @@ describe('Form inside dialog Integrations', () => {
       'lion-textarea',
     ]);
   });
+
+  it('sets focus on first focusable element with autofocus', async () => {
+    const el = /** @type {LionDialog} */ await fixture(html`
+      <lion-dialog>
+        <button slot="invoker">invoker button</button>
+        <div slot="content">
+          <lion-input label="label" name="input" autofocus></lion-input>
+          <lion-textarea label="label" name="textarea" autofocus></lion-textarea>
+        </div>
+      </lion-dialog>
+    `);
+    // @ts-expect-error [allow-protected-in-tests]
+    el._overlayInvokerNode.click();
+    const lionInput = el.querySelector('[name="input"]');
+    // @ts-expect-error [allow-protected-in-tests]
+    expect(document.activeElement).to.equal(lionInput._focusableNode);
+  });
 });

package/components/form-integrations/test/form-group-methods.test.js

@@ -1,49 +1,20 @@
 import { elementUpdated, expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-import './helpers/umbrella-form.js';
 import { getAllFieldsAndFormGroups } from './helpers/helpers.js';
-
-import '@lion/ui/define/lion-button.js';
-import '@lion/ui/define/lion-button-submit.js';
-import '@lion/ui/define/lion-button-reset.js';
-
-import '@lion/ui/define/lion-checkbox.js';
-import '@lion/ui/define/lion-checkbox-group.js';
-import '@lion/ui/define/lion-combobox.js';
-
-import '@lion/ui/define/lion-dialog.js';
-
-import '@lion/ui/define/lion-form.js';
-import '@lion/ui/define/lion-fieldset.js';
-import '@lion/ui/define/lion-select-rich.js';
-import '@lion/ui/define/lion-select.js';
-
-import '@lion/ui/define/lion-input-stepper.js';
-import '@lion/ui/define/lion-input-range.js';
-import '@lion/ui/define/lion-input-amount.js';
-import '@lion/ui/define/lion-input.js';
-import '@lion/ui/define/lion-input-date.js';
-import '@lion/ui/define/lion-input-iban.js';
-import '@lion/ui/define/lion-input-email.js';
-import '@lion/ui/define/lion-input-tel-dropdown.js';
-import '@lion/ui/define/lion-input-datepicker.js';
-
-import '@lion/ui/define/lion-textarea.js';
-
-import '@lion/ui/define/lion-radio.js';
-import '@lion/ui/define/lion-radio-group.js';
-
-import '@lion/ui/define/lion-listbox.js';
-import '@lion/ui/define/lion-option.js';
-import '@lion/ui/define/lion-options.js';
-
-import '@lion/ui/define/lion-validation-feedback.js';
+import './helpers/umbrella-form.js';
 /**
  * @typedef {import('../../form-core/src/LionField.js').LionField} LionField
+ * @typedef {import('../../input-file/types/input-file.js').InputFile} InputFile
  * @typedef {import('../../button/src/LionButton.js').LionButton} LionButton
  * @typedef {import('./helpers/umbrella-form.js').UmbrellaForm} UmbrellaForm
  */
 
+const file = /** @type {InputFile} */ (
+  new File(['foo'], 'foo.txt', {
+    type: 'text/plain',
+  })
+);
+
 const fullyPrefilledSerializedValue = {
   fullName: { firstName: 'Lorem', lastName: 'Ipsum' },
   date: '2000-12-12',
@@ -57,6 +28,7 @@ const fullyPrefilledSerializedValue = {
   favoriteFruit: 'Banana',
   favoriteMovie: 'Rocky',
   favoriteColor: 'hotpink',
+  file: [],
   lyrics: '1',
   notifications: {
     checked: true,
@@ -81,6 +53,7 @@ const fullyChangedSerializedValue = {
   favoriteFruit: '',
   favoriteMovie: '',
   favoriteColor: '',
+  file: [file],
   lyrics: '2',
   notifications: {
     checked: false,
@@ -189,6 +162,7 @@ describe(`Submitting/Resetting/Clearing Form`, async () => {
       favoriteFruit: '',
       favoriteMovie: '',
       favoriteColor: '',
+      file: [],
       lyrics: '',
       notifications: {
         checked: false,

package/components/form-integrations/test/form-integrations.test.js

@@ -41,6 +41,7 @@ describe('Form Integrations', () => {
       favoriteFruit: 'Banana',
       favoriteMovie: 'Rocky',
       favoriteColor: 'hotpink',
+      file: [],
       lyrics: '1',
       range: 2.3,
       terms: [],
@@ -74,6 +75,7 @@ describe('Form Integrations', () => {
       favoriteFruit: 'Banana',
       favoriteMovie: 'Rocky',
       favoriteColor: 'hotpink',
+      file: '',
       lyrics: 'Fire up that loud',
       range: 2.3,
       terms: [],
@@ -98,6 +100,7 @@ describe('Form Integrations', () => {
               money: '',
               iban: '',
               email: '',
+              file: [],
               checkers: ['foo', 'bar'],
               dinosaurs: 'brontosaurus',
               favoriteFruit: 'Banana',
@@ -129,6 +132,7 @@ describe('Form Integrations', () => {
       'lion-input-amount',
       'lion-input-iban',
       'lion-input-email',
+      'lion-input-file',
       'lion-input-tel',
       'lion-input-tel-dropdown',
       'lion-checkbox-group',