@lion/ui 0.0.1 → 0.0.3

package/docs/guides/how-to/create-a-custom-field.md

@@ -0,0 +1,200 @@
+# How To >> Create a custom field ||20
+
+```js script
+import { html, css, LitElement } from '@mdjs/mdjs-preview';
+import { LionField } from '@lion/ui/form-core.js';
+import '@lion/ui/define/lion-field.js';
+import '@lion/ui/define/lion-validation-feedback.js';
+
+import '../../fundamentals/systems/form/assets/h-output.js';
+
+// A) the custom [slot=input] or 'HTMLElementWithValue'
+class DummySlider extends LitElement {
+  // A1) it should have a .value property of type 'string'
+  static properties = { value: String, reflect: true };
+
+  static styles = [
+    css`
+      :host {
+        display: block;
+        padding-top: 16px;
+        padding-bottom: 16px;
+      }
+
+      [part='rail'] {
+        position: relative;
+        display: block;
+        background: #eee;
+        height: 8px;
+        border-radius: 8px;
+      }
+
+      [part='thumb'] {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        background: black;
+        color: white;
+        border-radius: 50%;
+        height: 24px;
+        width: 24px;
+        top: 50%;
+        transform: translateY(-50%);
+        transition: left 0.5s ease 0s;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.value = '0';
+    this.addEventListener('click', ev => {
+      this.value = `${Math.round(
+        ((ev.clientX - this.getClientRects()[0].x) / this.offsetWidth) * 5,
+      )}`;
+      // A2) it should have a way to tell LionField its value changed
+      this.dispatchEvent(new Event('dummy-slider-changed', { bubbles: true }));
+    });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('tabindex', 0);
+  }
+
+  render() {
+    return html` <div part="rail">
+      <span part="thumb" style="left:${Number(this.value) * 20}%;">${this.value}</span>
+    </div>`;
+  }
+}
+if (!customElements.get('dummy-slider')) {
+  customElements.define('dummy-slider', DummySlider);
+}
+```
+
+Custom Fields can be created in just a few steps. All you need is an interaction element (like for instance a slider, a listbox or a combobox) and connect it to the [LionField](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/components/input/overview.md).
+
+> In case you want to extend a native element, follow [Extend a native Input](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/guides/how-to/extend-a-native-input.md).
+
+## A) an interaction element
+
+An interaction element (.\_inputNode) provides the means for the end user to enter a certain value,
+just like native elements provide in this (think of input, textarea and select).
+An example of a non native element is the [slider design pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#slider) described here.
+
+For this tutorial, we create a dummy component 'dummy-slider' that exposes its value via
+property `.value` and sends an event `dummy-slider-changed` on every value change.
+To make it focusable, it has a tabindex=“0” applied.
+
+```js preview-story
+export const createAnInteractiveElement = () => {
+  // A) the custom [slot=input] or 'HTMLElementWithValue'
+  class DummySlider extends LitElement {
+    // A1) it should have a .value property of type 'string'
+    static properties = { value: String };
+
+    constructor() {
+      super();
+      this.value = 0;
+      this.addEventListener('click', ev => {
+        this.value = `${Math.round(
+          ((ev.clientX - this.getClientRects()[0].x) / this.offsetWidth) * 5,
+        )}`;
+        // A2) it should have a way to tell LionField its value changed
+        this.dispatchEvent(new Event('dummy-slider-changed', { bubbles: true }));
+      });
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.setAttribute('tabindex', 0);
+    }
+
+    render() {
+      return html` <div part="rail">
+        <span part="thumb" style="left:${Number(this.value) * 20}%;">${this.value}</span>
+      </div>`;
+    }
+  }
+  return html`<dummy-slider></dummy-slider>`;
+};
+```
+
+## B) your LionField extension
+
+Now we want to integrate the slider in our form system to enrich the user interface, get
+validation support and all other [benefits of LionField](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/components/input/overview.md).
+We start by creating a component `<slider-field>` that extends from `LionField`.
+Then we follow the steps below:
+
+- **Add your interaction element**
+
+  Here you return the element the user interacts with. By configuring it as a slot, it will end up in
+  light DOM, ensuring the best accessibility for the end user.
+
+- **Connect modelValue**
+
+  The `user-input-changed` event is listened to by the FormatMixin: it should be regarded as the
+  equivalent of the `input` event of the platform, but for custom built interaction elements.
+  You now synchronized [modelValue](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/fundamentals/systems/form/model-value.md), which can be regarded as
+  the glue to integrate all other functionality like parsing/formatting/serializing, validating,
+  tracking interaction states etc.
+
+> N.B. Make sure you never override other property getters than the one mentioned in this tutorial,
+> because those properties will loose their reactivity (they won't be considered anymore in the
+> update loop of LitElement).
+> Whenever a .modelValue/.formattedValue/.serializedValue needs to be computed, use
+> [parser/formatter/serializer](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/fundamentals/systems/form/formatting-and-parsing.md)
+
+Implement with the following code:
+
+```js preview-story
+export const createAField = () => {
+  // B) your extension with all the Field goodness...
+  class SliderField extends LionField {
+    // B1) Add your interaction element as ‘input slot'
+    get slots() {
+      return {
+        ...super.slots,
+        input: () => document.createElement('dummy-slider'),
+      };
+    }
+
+    // B2) Connect modelValue
+    constructor() {
+      super();
+      this.addEventListener('dummy-slider-changed', ev => {
+        ev.stopPropagation();
+        this.dispatchEvent(new Event('user-input-changed'));
+      });
+    }
+
+    get value() {
+      // Remember we should always return type 'string' here
+      return this._inputNode.value;
+    }
+
+    set value(newV) {
+      this._inputNode.value = newV;
+    }
+  }
+  customElements.define('slider-field', SliderField);
+
+  return html`<slider-field
+      label="SliderField"
+      help-text="Press to see how modelValue is synchronized"
+    ></slider-field>
+    <h-output .show="${['modelValue', 'touched', 'dirty', 'focused']}"></h-output>`;
+};
+```
+
+That was all!
+Now that your .modelValue is connected your component is fully compatible with our form system
+
+> Is your `.modelValue` still undefined? Please make sure you're `.value` is of type 'string'.
+
+Now you can enhance your slider by writing custom Validators for it or by
+writing a parser to get a custom modelValue type.

package/docs/guides/how-to/extend-a-native-input.md

@@ -0,0 +1,66 @@
+# How To >> Extend a native Input ||20
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import { LionInput } from '@lion/ui/input.js';
+import { LionInputDate } from '@lion/ui/input-date.js';
+import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
+import '@lion/ui/define/lion-input.js';
+import '../../fundamentals/systems/form/assets/h-output.js';
+
+loadDefaultFeedbackMessages();
+```
+
+Input fields can be created by extending [LionInput](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/components/input/overview.md).
+
+> In case you want to wrap a custom form element, follow [Create a custom Field](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/guides/how-to/create-a-custom-field.md).
+
+For this tutorial, we create an input that wraps native `input[type=datetime-local]`.
+This is as simple as adding a type:
+
+```js preview-story
+export const extendLionInput = () => {
+  class LionInputDatetime extends LionInput {
+    constructor() {
+      super();
+      this.type = 'datetime-local';
+    }
+  }
+  customElements.define('lion-input-datetime', LionInputDatetime);
+
+  return html`<lion-input-datetime label="With Date string"></lion-input-datetime>
+    <h-output .show="${['modelValue', 'touched', 'dirty', 'focused']}"></h-output>`;
+};
+```
+
+However, we might want to have a more advanced modelValue. In the example above, our modelValue is
+a serialized datetime string.
+If we want our modelValue to be of type Date, we should do the following:
+
+```js preview-story
+export const extendLionInputDate = () => {
+  function toIsoDatetime(d) {
+    return d && new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().split('.')[0];
+  }
+  function fromIsoDatetime(value) {
+    return new Date(value);
+  }
+
+  class LionInputDatetimeWithObject extends LionInputDate {
+    constructor() {
+      super();
+      this.type = 'datetime-local';
+      this.parser = fromIsoDatetime;
+      this.deserializer = fromIsoDatetime;
+      this.serializer = toIsoDatetime;
+      this.formatter = toIsoDatetime;
+    }
+  }
+  customElements.define('lion-input-datetime-with-object', LionInputDatetimeWithObject);
+
+  return html`<lion-input-datetime-with-object
+      label="With Date object"
+    ></lion-input-datetime-with-object>
+    <h-output .show="${['modelValue', 'touched', 'dirty', 'focused']}"></h-output>`;
+};
+```

package/docs/guides/how-to/get-started.md

@@ -0,0 +1,77 @@
+# How To >> Get Started ||10
+
+## Technologies Used
+
+Lion Web Components aims to be future proof and use well-supported proven technology. The stack we have chosen should reflect this.
+
+Checkout the documentation of our main stack.
+
+- [lit](https://lit.dev/) - Building on top of the Web Components standards, Lit adds just what you need to be happy and productive: reactivity, declarative templates and a handful of thoughtful features to reduce boilerplate and make your job easier.
+- [modern-web](https://modern-web.dev) - Guides, tools and libraries for modern web development.
+- [open-wc](https://open-wc.org) - Open Web Components provides guides, tools and libraries for developing web components.
+
+## How to get started
+
+Make sure you have `npm`, if you don't have it yet: [get npm](https://www.npmjs.com/get-npm).
+
+And create a repo, we suggest to use [the generator from open-wc](https://open-wc.org/docs/development/generator/):
+
+```bash
+npm init @open-wc
+```
+
+### Install lion packages
+
+```bash
+npm i @lion/<package-name>
+```
+
+### 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/ui/input.js';
+
+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/ui/define/lion-input.js';
+</script>
+
+<lion-input name="firstName" label="First name"></lion-input>
+```

package/docs/guides/how-to/index.md

@@ -0,0 +1 @@
+# How To ||20

package/docs/guides/index.md

@@ -0,0 +1,34 @@
+# Guides ||30
+
+Lion is a set of white label Web Components that can be extended to your own styled layer of components.
+
+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.
+
+## Consuming Developer
+
+Developers consuming our web components inside an application (not extending them).
+`Application Developers` are only allowed to interact with `public` properties and methods.
+Can be abbreviated as `AD`. Sometimes also called `Consuming Developer`.
+
+- [Definitions and Terms](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/guides/principles/definitions-and-terms.md)
+- [Styling](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/guides/principles/styling.md)
+- [Scoped Elements](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/guides/principles/scoped-elements.md)
+
+## Extending Developer
+
+Developers extending our web components, for instance: `class MaterialInput extends LionInput` are called `subclassers`. Subclassers have access to protected methods (prefixed with an underscore or marked as protected), but not to private methods.
+
+Especially for subclassers we have some extra documentation:
+
+- [Subclasser APIs](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/guides/principles/subclasser-apis.md)
+- [Extend documentation](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/blog/extending-documentation.md)
+
+## How To
+
+Next to that we have some specific "How To" documentations.
+
+- [Get started](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/guides/how-to/get-started.md)
+- [Create a custom field](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/guides/how-to/create-a-custom-field.md)
+- [Extend a native input](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/guides/how-to/extend-a-native-input.md)

package/docs/guides/principles/definitions-and-terms.md

@@ -0,0 +1,41 @@
+# Principles >> Definitions and Terms ||20
+
+Below you will find a list of definitions and terms that will be used throughout our code
+documentation.
+
+## Public
+
+Methods and properties are public when they are not prefixed by an underscore.
+They can be used by Application Developers.
+
+```js
+class SoccerPlayer {
+  kickBall() {
+    // Soccer player can kick a ball
+  }
+}
+```
+
+## Protected
+
+Methods and properties are protected when they contain one underscore or are explicitly marked as protected in the code. They can be used by Subclassers.
+
+```js
+class SoccerPlayer {
+  _catchBall() {
+    // Soccer player usually does not need to catch a ball (with their hands)
+  }
+}
+```
+
+## Private
+
+Methods and properties are private when they contain two underscores or are explicitly marked as private in the code. They can be only used within the class where they are defined (developers of Lion components).
+
+```js
+class SoccerPlayer {
+  __score() {
+    // internally save how many goals have been made
+  }
+}
+```

package/docs/guides/principles/index.md

@@ -0,0 +1,26 @@
+# Principles ||10
+
+Lion is a set of white label Web Components that can be extended to your own styled layer of components.
+
+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.
+
+## Consuming Developer
+
+Developers consuming our web components inside an application (not extending them).
+`Application Developers` are only allowed to interact with `public` properties and methods.
+Can be abbreviated as `AD`. Sometimes also called `Consuming Developer`.
+
+- [Definitions and Terms](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/guides/principles/definitions-and-terms.md)
+- [Styling](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/guides/principles/styling.md)
+- [Scoped Elements](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/guides/principles/scoped-elements.md)
+
+## Extending Developer
+
+Developers extending our web components, for instance: `class MaterialInput extends LionInput` are called `subclassers`. Subclassers have access to protected methods (prefixed with an underscore or marked as protected), but not to private methods.
+
+Especially for subclassers we have some extra documentation:
+
+- [Subclasser APIs](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/guides/principles/subclasser-apis.md)
+- [Extend documentation](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/blog/extending-documentation.md)

package/docs/guides/principles/scoped-elements.md

@@ -0,0 +1,103 @@
+# Principles >> Scoped Elements ||40
+
+The [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry) provides methods for registering custom elements. One of the limitations of working with this global registry is that multiple versions of the same element cannot co-exist. This causes bottlenecks in software delivery that should be managed by the teams and complex build systems. [Scoped Custom Element Registries](https://github.com/w3c/webcomponents/issues/716) is a proposal that will solve the problem. Since this functionality won't be available (especially not cross browser) anytime soon, we've adopted [OpenWC's Scoped Elements](https://open-wc.org/docs/development/scoped-elements/).
+
+Whenever a lion component uses composition (meaning it uses another lion component inside), we
+apply ScopedElementsMixin to make sure it uses the right version of this internal component.
+
+```js
+import { LitElement, html } from '@lion/ui/core.js';
+import { ScopedElementsMixin, LitElement, html } from '@open-wc/scoped-elements';
+
+import { LionInput } from '@lion/ui/input.js';
+import { LionButton } from '@lion/ui/button.js';
+
+class MyElement extends ScopedElementsMixin(LitElement) {
+  static get scopedElements() {
+    return {
+      'lion-input': LionInput,
+      'lion-button': LionButton,
+    };
+  }
+
+  render() {
+    return html`
+      <lion-input label="Greeting" name="greeting" .modelValue=${'Hello world'}></lion-input>
+      <lion-button>Save</lion-button>
+    `;
+  }
+}
+```
+
+## Query selectors
+
+Since Scoped Elements changes tagnames under the hood, a tagname querySelector should be written like this:
+
+```js
+this.querySelector(
+  this.constructor.getScopedTagName('lion-input', this.constructor.scopedElements),
+);
+```
+
+## CSS selectors
+
+Avoid tagname css selectors.
+We already avoid query selectors internally in lion, but just be aware that a selector like
+
+```css
+lion-input {
+  padding: 20px;
+}
+```
+
+will stop working.
+
+## Edge cases
+
+Sometimes we need to render parts of a template to light dom for [accessibility](https://wicg.github.io/aom/explainer.html). For instance we render a node via `lit-html` that we append to the host element, so it gets slotted in the right position.
+In this case, we should also make sure that we also scope the rendered element.
+
+We can do this as follows:
+
+```js
+_myLightTemplate() {
+  return html`
+    This template may be overridden by a Subclasser.
+    Even I don't end up in shadow root, I need to be scoped to constructor.scopedElements as well.
+    <div>
+      <lion-button>True</lion-button>
+      <lion-input label="xyz"></lion-input>
+    </div>
+  `;
+}
+
+__getLightDomNode() {
+  const renderParent = document.createElement('div');
+  this.constructor.render(this._myLightTemplate(), renderParent, {
+    scopeName: this.localName,
+    eventContext: this,
+  });
+  // this node will be appended to the host
+  return renderParent.firstElementChild;
+}
+
+connectedCallback() {
+  super.connectedCallback();
+  this.appendChild(this.__getLightDomNode());
+}
+```
+
+In a less complex case, we might just want to add a child node to the dom.
+
+```js
+import { LitElement  } from 'lit';
+import { ScopedElementsMixin, getScopedTagName } from '@open-wc/scoped-elements';
+
+...
+
+__getLightDomNode() {
+  return document.createElement(getScopedTagName('lion-input', this.constructor.scopedElements));
+}
+```
+
+We encourage you to have a look at [OpenWC's Scoped elements](https://open-wc.org/docs/development/scoped-elements/).

package/docs/guides/principles/styling.md

@@ -0,0 +1,32 @@
+# Principles >> Styling ||30
+
+## Markup and styling
+
+All Lion web components have white label styling: this means theming is not applied,
+but functional styling is.
+
+### Functional styling
+
+Functional styling can be divided into defaults for `basic layout` and `accessibility`.
+Examples for both categories can be found below:
+
+- Basic layout examples:
+
+  - A dropdown menu has `position: absolute;`.
+  - A lion-button might behave as an `display: inline-block;` element.
+  - A suffix attached to an input is horizontally positioned (instead of vertically stacked).
+
+- Accessibility examples:
+  - Content (for instance a caption in a table) can be `visually hidden`: it will be
+    readable by screen readers, but invisible for end users.
+  - When an html table is used, we allow [subclassers](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/guides/principles/subclasser-apis.md) to override the display property (`table-cell`) to `flex`. By putting the proper accessible roles (`role="cell"`) in the markup, we guarantee our markup stays accessible.
+
+Although Lion components try to stay as unbiased as possible with regard to styling, defaults will be needed. In these cases we try to follow the platform as much as possible. If the platform doesn't provide defaults, the largest common denominator across existing UI systems is taken as a lead.
+
+## CSS variables
+
+Css variables will not be added in our white label style components, but adding them in your own extension layer would be a perfect fit.
+
+## Parts and themes
+
+The `::part` and `::theme` specs might currently not be widely adopted enough to be used inside style components. When they are, we could be consider to add them later to our components as a means to theme components (changing a whole Design System is not a good idea).

package/docs/guides/principles/subclasser-apis.md

@@ -0,0 +1,28 @@
+# Principles >> Subclasser apis ||50
+
+In order to make it easy for Subclassers to extend our components, we follow a certain set
+of best practices naming conventions to make our code predictable.
+
+## Templates
+
+### Template naming conventions
+
+For templates that do need access to the instance of the web component there is a prefix `_render/__render`.
+Examples are `__renderHeader` and `__renderData`.
+
+### Separation of concerns
+
+Our components should make it possible to override markup and styling, without having to redefine
+functionality.
+By using the spread directive, we can achieve this. For more info, see [explanation](https://github.com/ing-bank/lion/issues/591).
+
+## Node references
+
+As a Subclasser, you sometimes need access to a protected node inside the shadow dom.
+Most functional nodes have their own getters. A Subclasser can access those in his extension and
+in some cases, override these getters.
+
+### Node naming conventions
+
+A node reference will have an underscore prefix and always ends with `Node`.
+Examples are `_inputNode` and `_formNode`.

package/docs/override.js

@@ -0,0 +1,15 @@
+/**
+ * This will override all md files within the folder to only contain [=> See Source <=](../path/to/source.md)
+ */
+
+import { writeFile } from 'fs/promises';
+import glob from 'glob';
+
+const allFiles = glob.sync('**/*.md', { nodir: true });
+const files = allFiles;
+
+for (const filePath of files) {
+  const insert = 3 + filePath.match(/\//g).length;
+  const srcPath = `${'../'.repeat(insert)}docs/${filePath}`;
+  await writeFile(filePath, `[=> See Source <=](${srcPath})`);
+}

package/exports/define/lion-drawer.js

@@ -0,0 +1,3 @@
+import { LionDrawer } from '../drawer.js';
+
+customElements.define('lion-drawer', LionDrawer);

package/exports/drawer.js

@@ -0,0 +1 @@
+export { LionDrawer } from '../components/drawer/src/LionDrawer.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lion/ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A package of extendable web components",
   "license": "MIT",
   "author": "ing-bank",
@@ -50,7 +50,7 @@
     "awesome-phonenumber": "^3.0.1",
     "ibantools": "^2.2.0",
     "lit": "^2.4.0",
-    "singleton-manager": "^1.6.0"
+    "singleton-manager": "^1.6.1"
   },
   "keywords": [
     "design-system",