@lion/ui 0.7.1 → 0.7.3

package/docs/components/button/use-cases.md

@@ -28,16 +28,17 @@ export const disabled = () => html`<lion-button disabled>Disabled</lion-button>`
 The minimum click area needs to be at least `44px` by `44px` according to [WCAG Success Criterion 2.5.5 Target Size (Enhanced)](https://www.w3.org/TR/WCAG22/#target-size-enhanced).
 
 ```js preview-story
-export const minimumClickArea = () => html` <style>
-    .small {
-      padding: 4px;
-      line-height: 1em;
-    }
-    .small::before {
-      border: 1px dashed #000;
-    }
-  </style>
-  <lion-button class="small">xs</lion-button>`;
+export const minimumClickArea = () =>
+  html` <style>
+      .small {
+        padding: 4px;
+        line-height: 1em;
+      }
+      .small::before {
+        border: 1px dashed #000;
+      }
+    </style>
+    <lion-button class="small">xs</lion-button>`;
 ```
 
 ## Usage with native form

package/docs/components/checkbox-group/overview.md

@@ -19,11 +19,11 @@ import '@lion/ui/define/lion-checkbox.js';
 </lion-checkbox-group>
 ```
 
-> Make sure that the checkbox-group also has a name attribute, this is necessary for our [form](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/form/overview.md)'s serialization result.
+> Make sure that the checkbox-group also has a name attribute, this is necessary for our [form](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/form/overview.md)'s serialization result.
 
 ## Features
 
-Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/fieldset/overview.md),
+Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/fieldset/overview.md),
 it has all the features a fieldset has.
 
 ## Installation

package/docs/components/collapsible/assets/applyDemoCollapsibleStyles.js

@@ -7,7 +7,9 @@ const applyDemoCollapsibleStyles = () => {
       margin: 16px;
       border-radius: 4px;
       width: 400px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      box-shadow:
+        0 1px 3px rgba(0, 0, 0, 0.12),
+        0 1px 2px rgba(0, 0, 0, 0.24);
     }
 
     .demo-custom-collapsible-body {
@@ -18,7 +20,9 @@ const applyDemoCollapsibleStyles = () => {
       border-width: 0;
       border-radius: 2px;
       padding: 12px 24px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      box-shadow:
+        0 1px 3px rgba(0, 0, 0, 0.12),
+        0 1px 2px rgba(0, 0, 0, 0.24);
       font-weight: bold;
       color: #3f51b5;
     }

package/docs/components/collapsible/overview.md

@@ -22,7 +22,7 @@ export const main = () => html`
 ## Features
 
 - Use `opened` attribute or `toggle()` method to render default open.
-- `invoker` slot can be custom template e.g. our [button](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/button/overview.md) or native `button` with custom styling.
+- `invoker` slot can be custom template e.g. our [button](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/button/overview.md) or native `button` with custom styling.
 - Observe the state with the help of `@opened-changed` event.
 - `show()` and `hide()` are helper methods to hide or show the content from outside.
 

package/docs/components/combobox/overview.md

@@ -25,15 +25,16 @@ export const main = () => html`
   <lion-combobox name="combo" label="Default">
     ${lazyRender(
       listboxData.map(
-        (entry, i) =>
-          html` <lion-option .checked="${i === 0}" .choiceValue="${entry}">${entry}</lion-option> `,
+        (entry, i) => html`
+          <lion-option .checked="${i === 0}" .choiceValue="${entry}">${entry}</lion-option>
+        `,
       ),
     )}
   </lion-combobox>
 `;
 ```
 
-[...show more](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/combobox/extensions.md)
+[...show more](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/combobox/extensions.md)
 
 ## Features
 

package/docs/components/combobox/src/gh-combobox/gh-button.js

@@ -35,7 +35,9 @@ export class GhButton extends LionButton {
         color: #24292e;
         background-color: #fafbfc;
         border-color: rgba(27, 31, 35, 0.15);
-        box-shadow: 0 1px 0 rgba(27, 31, 35, 0.04), inset 0 1px 0 hsla(0, 0%, 100%, 0.25);
+        box-shadow:
+          0 1px 0 rgba(27, 31, 35, 0.04),
+          inset 0 1px 0 hsla(0, 0%, 100%, 0.25);
         transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
       }
 

package/docs/components/combobox/src/gh-combobox/gh-combobox.js

@@ -123,8 +123,15 @@ export class GhCombobox extends LionCombobox {
         /** @configure LionCombobox */
 
         :host {
-          font-family: apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
-            Apple Color Emoji, Segoe UI Emoji;
+          font-family:
+            apple-system,
+            BlinkMacSystemFont,
+            Segoe UI,
+            Helvetica,
+            Arial,
+            sans-serif,
+            Apple Color Emoji,
+            Segoe UI Emoji;
           font-size: 14px;
         }
 

package/docs/components/combobox/src/google-combobox/google-combobox.js

@@ -403,15 +403,13 @@ export class GoogleCombobox extends LionCombobox {
         ),
       prefix: () => renderLitAsNode(html` <span>${googleSearchIcon}</span> `),
       suffix: () =>
-        renderLitAsNode(
-          html` <button aria-label="Search by voice">${googleVoiceSearchIcon}</button> `,
-        ),
+        renderLitAsNode(html`
+          <button aria-label="Search by voice">${googleVoiceSearchIcon}</button>
+        `),
       'clear-btn': () =>
-        renderLitAsNode(
-          html`
-            <button @click="${this.__clearText}" aria-label="Clear text">${googleClearIcon}</button>
-          `,
-        ),
+        renderLitAsNode(html`
+          <button @click="${this.__clearText}" aria-label="Clear text">${googleClearIcon}</button>
+        `),
     };
   }
 

package/docs/components/combobox/src/md-combobox/MdFieldMixin.js

@@ -48,7 +48,8 @@ export const MdFieldMixin = dedupeMixin(
               transform: perspective(100px);
               -ms-transform: none;
               transform-origin: 0 0;
-              transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
+              transition:
+                transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                 color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                 width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
               /* z-index: 1; */
@@ -205,7 +206,9 @@ export const MdFieldMixin = dedupeMixin(
               background-position: 50%;
               transform: scale(10, 10);
               opacity: 0;
-              transition: transform 0.25s, opacity 0.5s;
+              transition:
+                transform 0.25s,
+                opacity 0.5s;
             }
 
             .input-group__container > .input-group__prefix ::slotted(button:active)::after,
@@ -288,7 +291,8 @@ export const MdFieldMixin = dedupeMixin(
               visibility: visible;
               opacity: 1;
               transform: scaleX(1);
-              transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
+              transition:
+                transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                 opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1),
                 background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
             }

package/docs/components/combobox/src/md-combobox/style/md-ripple.js

@@ -59,6 +59,7 @@ class MdRipple extends LitElement {
   }
 
   disconnectedCallback() {
+    super.disconnectedCallback();
     this.removeEventListener('mousedown', this.__onRipple);
   }
 

package/docs/components/combobox/src/wa-combobox/wa-combobox.js

@@ -28,7 +28,9 @@ class WaOption extends LionOption {
         cursor: pointer;
         color: rgb(74, 74, 74);
         padding: 0;
-        transition: max-height 0.4s ease, opacity 0.3s ease;
+        transition:
+          max-height 0.4s ease,
+          opacity 0.3s ease;
         max-height: 500px;
       }
 
@@ -287,8 +289,18 @@ class WaCombobox extends LionCombobox {
     ...super.styles,
     css`
       :host {
-        font-family: SF Pro Text, SF Pro Icons, system, -apple-system, system-ui, BlinkMacSystemFont,
-          Helvetica Neue, Helvetica, Lucida Grande, Kohinoor Devanagari, sans-serif;
+        font-family:
+          SF Pro Text,
+          SF Pro Icons,
+          system,
+          -apple-system,
+          system-ui,
+          BlinkMacSystemFont,
+          Helvetica Neue,
+          Helvetica,
+          Lucida Grande,
+          Kohinoor Devanagari,
+          sans-serif;
       }
 
       .input-group__container {

package/docs/components/combobox/use-cases.md

@@ -242,8 +242,9 @@ export const multipleChoice = () => html`
     ></demo-selection-display>
     ${lazyRender(
       listboxData.map(
-        (entry, i) =>
-          html` <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option> `,
+        (entry, i) => html`
+          <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option>
+        `,
       ),
     )}
   </lion-combobox>
@@ -264,8 +265,9 @@ export const multipleCustomizableChoice = () => html`
     ></demo-selection-display>
     ${lazyRender(
       listboxData.map(
-        (entry, i) =>
-          html` <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option> `,
+        (entry, i) => html`
+          <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option>
+        `,
       ),
     )}
   </lion-combobox>
@@ -434,26 +436,26 @@ const onModelValueChanged = event => {
   console.log(`event.target.modelValue: ${JSON.stringify(event.target.modelValue)}`);
 };
 
-export const complexObjectChoiceValue = () => html` <complex-object-combobox
-  name="combo"
-  label="Display only the label once selected"
-  @model-value-changed="${onModelValueChanged}"
->
-  ${lazyRender(
-    listboxComplexData.map(
-      entry =>
-        html`
+export const complexObjectChoiceValue = () =>
+  html` <complex-object-combobox
+    name="combo"
+    label="Display only the label once selected"
+    @model-value-changed="${onModelValueChanged}"
+  >
+    ${lazyRender(
+      listboxComplexData.map(
+        entry => html`
           <lion-option .choiceValue="${entry.label}">
             <div data-key>${entry.label}</div>
             <small>${entry.description}</small>
           </lion-option>
         `,
-    ),
-  )}
-</complex-object-combobox>`;
+      ),
+    )}
+  </complex-object-combobox>`;
 ```
 
 ## Listbox compatibility
 
 All configurations that can be applied to `lion-listbox`, can be applied to `lion-combobox` as well.
-See the [listbox documentation](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/listbox/overview.md) for more information.
+See the [listbox documentation](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/listbox/overview.md) for more information.

package/docs/components/dialog/overview.md

@@ -54,6 +54,6 @@ import '@lion/ui/define/lion-dialog.js';
 ## Changing the configuration
 
 You can use the `.config` property on the dialog to change the configuration.
-The documentation of the full config object can be found in the `overlays` folder or here in [Overlay System - Configuration](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/overlays/configuration.md).
+The documentation of the full config object can be found in the `overlays` folder or here in [Overlay System - Configuration](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/overlays/configuration.md).
 
 The `config` property uses a setter to merge the passed configuration with the current, so you only **overwrite what you pass** when updating `config`.

package/docs/components/fieldset/overview.md

@@ -20,9 +20,9 @@ export const main = () => html`
 
 We have three specific fieldset implementations:
 
-- [form](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/form/overview.md)
-- [checkbox-group](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/checkbox-group/overview.md)
-- [radio-group](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/radio-group/overview.md)
+- [form](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/form/overview.md)
+- [checkbox-group](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/checkbox-group/overview.md)
+- [radio-group](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/radio-group/overview.md)
 
 A native fieldset element should always have a legend-element for a11y purposes.
 However, our fieldset element is not native and should not have a legend-element.
@@ -31,8 +31,8 @@ Our fieldset instead has a label attribute or you can add a label with a div- or
 ## Features
 
 - Easy retrieval of form data based on field names
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/form/interaction-states.md)
-- Can have [validate](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/form/interaction-states.md)
+- Can have [validate](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
 - Can disable input fields on fieldset level
 - Accessible out of the box
 

package/docs/components/form/overview.md

@@ -8,7 +8,7 @@ import '@lion/ui/define/lion-form.js';
 ```
 
 A web component that enhances the functionality of the native `form` component.
-It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/form/overview.md).
+It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/form/overview.md).
 
 ```js preview-story
 export const main = () => {
@@ -37,11 +37,11 @@ export const main = () => {
 - Data synchronization with models
 - Easy retrieval of form data based on field names
 - Advanced validation possibilities
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/form/interaction-states.md)
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/form/interaction-states.md)
 - Registration mechanism for form controls
 - Accessible out of the box
 
-For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/form/overview.md).
+For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/form/overview.md).
 
 ## Installation
 

package/docs/components/icon/use-cases.md

@@ -26,7 +26,7 @@ icons.addIconResolver('lion', (iconset, name) => {
 ## Icon sets
 
 Icons are displayed using icon sets. These are collections of icons, lazily loaded on demand for performance.
-See the [system documentation](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
+See the [system documentation](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
 
 ```js preview-story
 export const iconSets = () => html`

package/docs/components/input/overview.md

@@ -23,7 +23,7 @@ export const main = () => html`<lion-input label="First Name"></lion-input>`;
   - **before**: does not have an active use case yet, but the option is in place.
   - **after**: can be used to show a currency or percentage.
 - Delegates attributes like `type`, `disabled`, `placeholder` and `readonly` to the native input.
-- Can make use of [validation](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/form/validate.md).
+- Can make use of [validation](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/form/validate.md).
 
 ## Installation
 

package/docs/components/input/use-cases.md

@@ -20,8 +20,9 @@ Can be provided via the `label-sr-only` boolean attribute.
 The label will be hidden, but still readable by screen readers.
 
 ```js preview-story
-export const labelSrOnly = () =>
-  html` <lion-input label-sr-only label="Input" name="input"></lion-input> `;
+export const labelSrOnly = () => html`
+  <lion-input label-sr-only label="Input" name="input"></lion-input>
+`;
 ```
 
 > Note: Once we support the ElementInternals API, the equivalent will be `<lion-input aria-label="Input" name="input"></lion-input>`

package/docs/components/input-amount/overview.md

@@ -24,13 +24,13 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input/overview.md)
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input/overview.md)
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
 - Option to show currency as a suffix
 - Option to override locale to change the formatting and parsing
 - Option to provide additional format options overrides
 - Default label in different languages
-- Can make use of number specific [validators](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Can make use of number specific [validators](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsNumber (default)
   - MinNumber
   - MaxNumber

package/docs/components/input-date/overview.md

@@ -16,11 +16,11 @@ import '@lion/ui/define/lion-input-date.js';
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input/overview.md)
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input/overview.md)
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
 - Option to override locale to change the formatting and parsing
 - Default label in different languages
-- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

package/docs/components/input-datepicker/overview.md

@@ -2,7 +2,7 @@
 
 A web component based on the date text input field. Its purpose is to provide a way for users to fill in a date with a datepicker.
 For an input field with a big range, such as `birthday-input`, a datepicker is not the best choice due to the high variance between possible inputs.
-We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input-date/overview.md) for this.
+We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input-date/overview.md) for this.
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -18,11 +18,11 @@ export const main = () => {
 ## Features
 
 - Input field with a datepicker to help to choose a date
-- Based on our [input-date](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input-date/overview.md)
-- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/calendar/overview.md) inside the datepicker
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input-date](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input-date/overview.md)
+- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/calendar/overview.md) inside the datepicker
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
 - Option to overwrite locale to change the formatting and parsing
-- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

package/docs/components/input-email/overview.md

@@ -15,8 +15,8 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input/overview.md)
-- Makes use of email [validators](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Based on our [input](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input/overview.md)
+- Makes use of email [validators](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsEmail (default)
 
 ## Installation

package/docs/components/input-file/overview.md

@@ -15,7 +15,7 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input/overview.md)
 - Default labels and validation messages in different languages
 - Options for multi file upload and drop-zone.
 

package/docs/components/input-iban/overview.md

@@ -16,9 +16,9 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input/overview.md)
 - Default label in different languages
-- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsIBAN (default)
   - IsCountryIBAN
 - Parses IBANs automatically

package/docs/components/input-range/overview.md

@@ -13,11 +13,11 @@ import '@lion/ui/define/lion-input-range.js';
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input/overview.md).
 - Shows `modelValue` and `unit` above the range input.
 - Shows `min` and `max` value after the range input.
 - Can hide the `min` and `max` value via `no-min-max-labels`.
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
 
 ## Installation
 

package/docs/components/input-stepper/overview.md

@@ -18,7 +18,7 @@ loadDefaultFeedbackMessages();
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input/overview.md).
 - Set `min` and `max` value to define the range.
 - Set `step` value in integer or decimal to increase and decrease the value.
 - Use `ArrowUp` or `ArrowDown` to update the value.

package/docs/components/input-tel/overview.md

@@ -39,7 +39,7 @@ export const main = () => {
 
 ## Features
 
-- Extends our [input](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input/overview.md)
+- Extends our [input](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input/overview.md)
 - Shows a mobile telephone keypad on mobile (by having a native `<input inputmode="tel">` inside)
 - Can be configured with a list of allowed region codes
 - Will be preconfigured with region derived from locale

package/docs/components/input-tel/use-cases.md

@@ -22,7 +22,7 @@ Say we have the following telephone number from Madrid, Spain: `+34919930432`.
 It contains a [country code](https://en.wikipedia.org/wiki/Country_code) (34), an [area code](https://en.wikipedia.org/wiki/Telephone_numbering_plan#Area_code) (91) and a [dial code](https://en.wikipedia.org/wiki/Mobile_dial_code) (+34 91).
 Input Tel interprets phone numbers based on their [region code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2): a two character long region representation('ES' in the telephone number above).
 
-The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input-tel/#allowed-regions) are not configured,
+The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input-tel/#allowed-regions) are not configured,
 all of them will be supported as values of Input Tel.
 
 ```js story
@@ -37,11 +37,11 @@ export const regionCodesTable = () => {
 The active region (accessible via readonly accessor `.activeRegion`) determines how validation and formatting
 should be applied. It is dependent on the following factors:
 
-- [allowed regions](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input-tel/#allowed-regions): a list that determines what is allowed to become .activeRegion. If
-  [.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
+- [allowed regions](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input-tel/#allowed-regions): a list that determines what is allowed to become .activeRegion. If
+  [.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
 - the modelValue or viewValue: once it contains sufficient info to derive its region code (and
-  the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input-tel/#allowed-regions) if configured)
-- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input-tel/#allowed-regions) if configured)
+  the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input-tel/#allowed-regions) if configured)
+- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input-tel/#allowed-regions) if configured)
 
 What follows from the list above is that .activeRegion can change dynamically, after a value
 change in the text box by the user (or when locales or allowed regions would be changed by the
@@ -130,7 +130,7 @@ export const heuristic = () => {
 Once it is configured, validation and formatting will be restricted to those
 values that are present in this list.
 
-> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input-tel-dropdown/index.md), only allowed regions will
+> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input-tel-dropdown/index.md), only allowed regions will
 > be shown in the dropdown list.
 
 ```js preview-story

package/docs/components/input-tel-dropdown/overview.md

@@ -19,7 +19,7 @@ export const main = () => {
 
 ## Features
 
-- Extends our [input-tel](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/components/input-tel/overview.md)
+- Extends our [input-tel](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/components/input-tel/overview.md)
 - Shows dropdown list with all possible regions
 - Shows only allowed regions in dropdown list when .allowedRegions is configured
 - Highlights regions on top of dropdown list when .preferredRegions is configured

package/docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js

@@ -46,9 +46,15 @@ export class IntlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdo
         border-radius: 4px;
         -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
         box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-        -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
-        -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-        transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+        -webkit-transition:
+          border-color ease-in-out 0.15s,
+          -webkit-box-shadow ease-in-out 0.15s;
+        -o-transition:
+          border-color ease-in-out 0.15s,
+          box-shadow ease-in-out 0.15s;
+        transition:
+          border-color ease-in-out 0.15s,
+          box-shadow ease-in-out 0.15s;
       }
 
       .input-group__input {
@@ -64,8 +70,12 @@ export class IntlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdo
       :host([focused]) .input-group__container {
         border-color: #66afe9;
         outline: 0;
-        -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
-        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
+        -webkit-box-shadow:
+          inset 0 1px 1px rgb(0 0 0 / 8%),
+          0 0 8px rgb(102 175 233 / 60%);
+        box-shadow:
+          inset 0 1px 1px rgb(0 0 0 / 8%),
+          0 0 8px rgb(102 175 233 / 60%);
       }
     `,
   ];

package/docs/components/listbox/use-cases.md

@@ -139,4 +139,4 @@ Navigation will skip over disabled options. Let's disable Artichoke and Brussel
 
 ## Validation
 
-A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/2b6884581ac36b85c50d1e376606293661482f72/docs/fundamentals/systems/form/validate.md).
+A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/3829e2dce5fce180672f666257d10513da30e1d5/docs/fundamentals/systems/form/validate.md).