@lion/ui 0.0.8 → 0.0.10

package/docs/fundamentals/node-tools/publish-docs/overview.md

@@ -31,7 +31,7 @@ For a Mono Repository
    ```md
    # My Pkg
 
-   [=> See Source <=](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/docs/deep/dir/overview.md)
+   [=> See Source <=](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/docs/deep/dir/overview.md)
    ```
 
 ## CLI flags
@@ -61,7 +61,7 @@ Bring the `overview.md` in a docs folder along.
 👉 `packages/[my-package]/docs/overview.md`
 
 ```md
-[=> See Source <=](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/docs/deep/dir/overview.md)
+[=> See Source <=](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/docs/deep/dir/overview.md)
 ```
 
 Add a `use-cases.md`
@@ -69,7 +69,7 @@ Add a `use-cases.md`
 👉 `packages/[my-package]/docs/use-cases.md`
 
 ```md
-[=> See Source <=](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/docs/deep/dir/use-cases.md)
+[=> See Source <=](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/docs/deep/dir/use-cases.md)
 ```
 
 So you will end up with something like this in your package.

package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md

@@ -7,7 +7,7 @@ To do this automatically you can use this preset for [rocket](https://rocket.mod
 
 ## Features
 
-- Import lion documentation and adjust it using [remark-extend](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/node-tools/remark-extend/overview.md)
+- Import lion documentation and adjust it using [remark-extend](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/node-tools/remark-extend/overview.md)
 - Renames named imports and all it's usage
 - Adjusts import paths
 - Replace tags in template literals
@@ -38,7 +38,7 @@ export default {
 
 ## Reusing documentation
 
-To take an existing documentation you can "import" it using [remark-extend](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/node-tools/remark-extend/overview.md).
+To take an existing documentation you can "import" it using [remark-extend](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/node-tools/remark-extend/overview.md).
 
 As an example you can create `docs/components/tabs/overview.md`.
 

package/docs/fundamentals/systems/core/overview.md

@@ -15,7 +15,7 @@ import { LitElement, html, render } from 'lit-element';
 
 ## Features
 
-- [function to deduplicate mixins (dedupeMixin)](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/core/#deduping-of-mixins)
+- [function to deduplicate mixins (dedupeMixin)](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/core/#deduping-of-mixins)
 - Mixin to handle disabled (DisabledMixin)
 - Mixin to handle disabled AND tabIndex (DisabledWithTabIndexMixin)
 - Mixin to manage auto-generated needed slot elements in light dom (SlotMixin)

package/docs/fundamentals/systems/form/formatting-and-parsing.md

@@ -23,7 +23,7 @@ Our fields can automatically format/parse/serialize user input or an input set i
 
 Below are some concrete examples of implementations of formatters and parsers mimicking a (basic) amount input.
 
-> For an actual amount input, check out [lion-input-amount](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/input-amount/overview.md).
+> For an actual amount input, check out [lion-input-amount](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/input-amount/overview.md).
 > This comes with its own formatter, parser, serializer.
 
 ### Parsers & modelValue
@@ -230,16 +230,16 @@ Below we show three flow diagrams to show the flow of formatting, serializing an
 
 Where a user changes the input with their keyboard:
 
-![Standard flow](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/form/assets/FormatMixinDiagram-1.svg 'Standard flow')
+![Standard flow](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/form/assets/FormatMixinDiagram-1.svg 'Standard flow')
 
 ### Unparseable flow
 
 Where a user sets the input to something that is not parseable by the parser:
 
-![Unparseable flow](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/form/assets/FormatMixinDiagram-2.svg 'Unparseable flow')
+![Unparseable flow](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/form/assets/FormatMixinDiagram-2.svg 'Unparseable flow')
 
 ### Imperative / programmatic flow
 
 Where the developer sets the modelValue of the input programmatically:
 
-![Imperative flow](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/form/assets/FormatMixinDiagram-3.svg 'Imperative flow')
+![Imperative flow](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/form/assets/FormatMixinDiagram-3.svg 'Imperative flow')

package/docs/fundamentals/systems/form/model-value.md

@@ -21,7 +21,7 @@ level, via:
 > Internal/private concepts like viewValue, formattedValue, serializedValue are therefore not
 > recommended as a means of interaction.
 
-For more information about parsing and the Unparseable type, see [Formatting and Parsing](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/form/formatting-and-parsing.md)
+For more information about parsing and the Unparseable type, see [Formatting and Parsing](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/form/formatting-and-parsing.md)
 
 ### Event meta
 

package/docs/fundamentals/systems/form/overview.md

@@ -20,9 +20,9 @@ Fields (think of an input, textarea, select) are the actual form controls the en
 
 On top of this, they feature:
 
-- [formatting/parsing/serializing](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/form/formatting-and-parsing.md) of view values.
-- Advanced [validation](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/form/validate.md) possibilities.
-- Creation of advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/form/interaction-states.md).
+- [formatting/parsing/serializing](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/form/formatting-and-parsing.md) of view values.
+- Advanced [validation](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/form/validate.md) possibilities.
+- Creation of advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/form/interaction-states.md).
 - Provision of labels and help texts in an easy, declarative manner.
 - Accessibility out of the box.
 - Advanced styling possibilities: map your own Design System to the internal HTML structure.
@@ -31,33 +31,33 @@ On top of this, they feature:
 
 ### Platform fields (wrappers)
 
-- [LionInput](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/input/overview.md), a wrapper for `<input>`.
-- [LionTextarea](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/textarea/overview.md), a wrapper for `<textarea>`.
-- [LionSelect](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/select/overview.md), a wrapper for `<select>`.
+- [LionInput](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/input/overview.md), a wrapper for `<input>`.
+- [LionTextarea](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/textarea/overview.md), a wrapper for `<textarea>`.
+- [LionSelect](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/select/overview.md), a wrapper for `<select>`.
 
 ### Custom fields (wrappers)
 
-Whenever a native form control doesn't exist or is not sufficient, a [custom form field](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/guides/how-to/create-a-custom-field.md) should be created. One could think of components like:
+Whenever a native form control doesn't exist or is not sufficient, a [custom form field](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/guides/how-to/create-a-custom-field.md) should be created. One could think of components like:
 
-- [LionCombobox](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/combobox/overview.md), a custom implementation of a combobox.
-- [LionDate](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/input-date/overview.md), an alternative for `<input type="date">`.
-- [LionDatepicker](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/input-datepicker/overview.md), an alternative for `<input type="date">` including a calendar dropdown.
-- [LionListbox](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/listbox/overview.md), a custom implementation of a listbox.
-- [LionInputAmount](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/input-amount/overview.md), an alternative for `<input type="number">` special for amounts.
-- [LionInputEmail](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/input-email/overview.md), an alternative for `<input type="email">`.
-- [LionInputIban](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/input-iban/overview.md), an ING specific for an input with IBAN numbers.
-- [LionInputRange](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/input-range/overview.md), an alternative for `<input type="range">`.
-- [LionInputStepper](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/input-stepper/overview.md), an alternative for `<input type="number">`.
-- [LionSelectRich](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/select-rich/overview.md), an alternative for `<select>` with multiline options.
+- [LionCombobox](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/combobox/overview.md), a custom implementation of a combobox.
+- [LionDate](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/input-date/overview.md), an alternative for `<input type="date">`.
+- [LionDatepicker](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/input-datepicker/overview.md), an alternative for `<input type="date">` including a calendar dropdown.
+- [LionListbox](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/listbox/overview.md), a custom implementation of a listbox.
+- [LionInputAmount](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/input-amount/overview.md), an alternative for `<input type="number">` special for amounts.
+- [LionInputEmail](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/input-email/overview.md), an alternative for `<input type="email">`.
+- [LionInputIban](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/input-iban/overview.md), an ING specific for an input with IBAN numbers.
+- [LionInputRange](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/input-range/overview.md), an alternative for `<input type="range">`.
+- [LionInputStepper](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/input-stepper/overview.md), an alternative for `<input type="number">`.
+- [LionSelectRich](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/select-rich/overview.md), an alternative for `<select>` with multiline options.
 
 ### Choice Input Fields
 
 For form controls which return a `checked-state` you can use the `lion-choice-input` mixin. It is used in:
 
-- [LionCheckbox](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/checkbox-group/overview.md), a wrapper for `<input type="checkbox">`.
+- [LionCheckbox](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/checkbox-group/overview.md), a wrapper for `<input type="checkbox">`.
 - LionOption, an alternative for `<option>`.
-- [LionRadio](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/radio-group/overview.md), a wrapper for `<input type="radio">`.
-- [LionSwitch](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/switch/overview.md), a custom implementation of a switch.
+- [LionRadio](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/radio-group/overview.md), a wrapper for `<input type="radio">`.
+- [LionSwitch](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/switch/overview.md), a custom implementation of a switch.
 
 Which contains the following features:
 
@@ -69,14 +69,14 @@ Which contains the following features:
 
 Fieldsets are groups of fields. They can be considered fields on their own as well, since they partly share the normalized API via `FormControlMixin`. Fieldsets are the basis for:
 
-- [LionFieldset](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/fieldset/overview.md), a wrapper around multiple input fields or other fieldsets.
-- [LionForm](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/form/overview.md), enhances the functionality of the native `<form>` component.
-- [LionCheckboxGroup](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/checkbox-group/overview.md), a wrapper component for multiple checkboxes.
-- [LionRadioGroup](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/components/radio-group/overview.md), a wrapper component for multiple radio inputs.
+- [LionFieldset](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/fieldset/overview.md), a wrapper around multiple input fields or other fieldsets.
+- [LionForm](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/form/overview.md), enhances the functionality of the native `<form>` component.
+- [LionCheckboxGroup](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/checkbox-group/overview.md), a wrapper component for multiple checkboxes.
+- [LionRadioGroup](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/components/radio-group/overview.md), a wrapper component for multiple radio inputs.
 
 ## Other Resources
 
-- [Model Value](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/form/model-value.md)
-- [Formatting and parsing](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/form/formatting-and-parsing.md)
-- [Interaction states](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/form/interaction-states.md)
-- [Validation System](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/form/validate.md)
+- [Model Value](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/form/model-value.md)
+- [Formatting and parsing](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/form/formatting-and-parsing.md)
+- [Interaction states](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/form/interaction-states.md)
+- [Validation System](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/form/validate.md)

package/docs/fundamentals/systems/form/use-cases.md

@@ -7,7 +7,9 @@ For usage and installation please see the appropriate packages.
 import { html } from '@mdjs/mdjs-preview';
 import '@lion/ui/define/lion-button.js';
 import '@lion/ui/define/lion-checkbox-group.js';
+import '@lion/ui/define/lion-checkbox.js';
 import '@lion/ui/define/lion-combobox.js';
+import '@lion/ui/define/lion-option.js';
 import '@lion/ui/define/lion-fieldset.js';
 import '@lion/ui/define/lion-form.js';
 import '@lion/ui/define/lion-input-amount.js';
@@ -15,12 +17,14 @@ import '@lion/ui/define/lion-input-date.js';
 import '@lion/ui/define/lion-input-datepicker.js';
 import '@lion/ui/define/lion-input-email.js';
 import '@lion/ui/define/lion-input-tel.js';
+import '@lion/ui/define/lion-input-tel-dropdown.js';
 import '@lion/ui/define/lion-input-iban.js';
 import '@lion/ui/define/lion-input-range.js';
 import '@lion/ui/define/lion-input-stepper.js';
 import '@lion/ui/define/lion-input.js';
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-radio-group.js';
+import '@lion/ui/define/lion-radio.js';
 import '@lion/ui/define/lion-select.js';
 import '@lion/ui/define/lion-select-rich.js';
 import '@lion/ui/define/lion-switch.js';

package/docs/fundamentals/systems/form/validate.md

@@ -58,7 +58,7 @@ Validation happens on every change of `modelValue`. A change in modelValue can b
 
 ## When validation feedback will be shown
 
-Although validation happens realtime under the hood, displaying validity feedback in realtime may not always lead to the desired User Experience. Together with [interaction states](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/form/interaction-states.md),
+Although validation happens realtime under the hood, displaying validity feedback in realtime may not always lead to the desired User Experience. Together with [interaction states](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/form/interaction-states.md),
 validity states can determine whether a validation message should be shown along the input field.
 
 ## Assessing field validation state programmatically

package/docs/fundamentals/systems/localize/overview.md

@@ -9,15 +9,15 @@ In it's simplest form it is a function that returns the translated text for a na
 - Formatting of numbers, amounts
 - Formatting of dates
 
-Further examples and a more in depth description can be found at the [Use Cases Page](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/localize/use-cases.md).
+Further examples and a more in depth description can be found at the [Use Cases Page](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/localize/use-cases.md).
 
 ## Content
 
 | Feature                                  | Description                                   |
 | ---------------------------------------- | --------------------------------------------- |
-| [Translate Text](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/localize/text.md)    | Load and translate text in multiple languages |
-| [Format Numbers](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/localize/numbers.md) | Format numbers in multiple languages          |
-| [Format Dates](https://github.com/ing-bank/lion/blob/f7fde3152a358108303b5a53f5907b6cb1517b71/docs/fundamentals/systems/localize/dates.md)     | Format dates in multiple languages            |
+| [Translate Text](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/localize/text.md)    | Load and translate text in multiple languages |
+| [Format Numbers](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/localize/numbers.md) | Format numbers in multiple languages          |
+| [Format Dates](https://github.com/ing-bank/lion/blob/9b61aac7a106832dd1596bf30ef4ff4dcbfc894f/docs/fundamentals/systems/localize/dates.md)     | Format dates in multiple languages            |
 
 ## Installation
 

package/docs/fundamentals/systems/overlays/assets/{applyDemoOverlayStyles.js → applyDemoOverlayStyles.mjs}

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import { css } from 'lit';
 
 const applyDemoOverlayStyles = () => {
@@ -14,7 +15,7 @@ const applyDemoOverlayStyles = () => {
   `;
 
   const styleTag = document.createElement('style');
-  styleTag.setAttribute('data-demo-global-overlays', '');
+  styleTag.setAttribute('data-demo-overlays', '');
   styleTag.textContent = demoOverlaysStyle.cssText;
   document.head.appendChild(styleTag);
 };

package/docs/fundamentals/systems/overlays/assets/demo-el-using-overlaymixin.mjs

@@ -0,0 +1,119 @@
+/* eslint-disable max-classes-per-file */
+/* eslint-disable import/no-extraneous-dependencies */
+import { html, LitElement, css } from 'lit';
+import { OverlayMixin } from '@lion/ui/overlays.js';
+import { LionButton } from '@lion/ui/button.js';
+
+/**
+ * @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
+ */
+class DemoElUsingOverlayMixin extends OverlayMixin(LitElement) {
+  // eslint-disable-next-line class-methods-use-this
+  _defineOverlayConfig() {
+    return /** @type {OverlayConfig} */ ({
+      placementMode: 'global',
+    });
+  }
+
+  _setupOpenCloseListeners() {
+    super._setupOpenCloseListeners();
+
+    if (this._overlayInvokerNode) {
+      this._overlayInvokerNode.addEventListener('click', this.toggle);
+    }
+  }
+
+  _teardownOpenCloseListeners() {
+    super._teardownOpenCloseListeners();
+
+    if (this._overlayInvokerNode) {
+      this._overlayInvokerNode.removeEventListener('click', this.toggle);
+    }
+  }
+
+  render() {
+    return html`
+      <slot name="invoker"></slot>
+      <slot name="backdrop"></slot>
+      <slot name="content"></slot>
+    `;
+  }
+}
+customElements.define('demo-el-using-overlaymixin', DemoElUsingOverlayMixin);
+
+class DemoOverlay extends OverlayMixin(LitElement) {
+  static get styles() {
+    return [
+      css`
+        ::slotted([slot='content']) {
+          background-color: #333;
+          color: white;
+          padding: 8px;
+        }
+
+        .close-button {
+          background: none;
+          border: none;
+          color: white;
+          font-weight: bold;
+          font-size: 16px;
+          padding: 4px;
+        }
+      `,
+    ];
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _defineOverlayConfig() {
+    return /** @type {OverlayConfig} */ ({
+      placementMode: 'global',
+    });
+  }
+
+  _setupOpenCloseListeners() {
+    super._setupOpenCloseListeners();
+
+    if (this._overlayInvokerNode) {
+      this._overlayInvokerNode.addEventListener('click', this.toggle);
+    }
+  }
+
+  _teardownOpenCloseListeners() {
+    super._teardownOpenCloseListeners();
+
+    if (this._overlayInvokerNode) {
+      this._overlayInvokerNode.removeEventListener('click', this.toggle);
+    }
+  }
+
+  render() {
+    return html`
+      <slot name="invoker"></slot>
+      <slot name="backdrop"></slot>
+      <div id="overlay-content-node-wrapper">
+        <slot name="content"></slot>
+      </div>
+    `;
+  }
+}
+customElements.define('demo-overlay', DemoOverlay);
+
+class DemoCloseButton extends LionButton {
+  static get styles() {
+    return [
+      css`
+        ::host {
+          background: none;
+        }
+      `,
+    ];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.innerText = '⨯';
+    this.setAttribute('aria-label', 'Close');
+  }
+}
+customElements.define('demo-close-button', DemoCloseButton);

package/docs/fundamentals/systems/overlays/assets/{demo-overlay-backdrop.js → demo-overlay-backdrop.mjs}

@@ -1,21 +1,20 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import { css, LitElement } from 'lit';
 
 /**
- * @typedef {import('../types/OverlayConfig').OverlayConfig} OverlayConfig
+ * @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
  */
 class DemoOverlayBackdrop extends LitElement {
   static get styles() {
     return css`
       :host {
-        position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
-        z-index: 1;
         background-color: grey;
         opacity: 0.3;
-        display: none;
+        position: fixed;
       }
 
       :host(.local-overlays__backdrop--visible) {