npm - @lion/ui - Versions diffs - 0.22.0 → 0.24.0 - Mend

@lion/ui 0.22.0 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (901) hide show

package/docs/components/dialog/api-table.md CHANGED Viewed

@@ -16,20 +16,46 @@ eleventyNavigation:
 ### Fields
-| Name            | Privacy | Type      | Default | Description | Inherited From |
-| --------------- | ------- | --------- | ------- | ----------- | -------------- |
-| `isAlertDialog` | public  | `boolean` | `false` |             |                |
+| Name                         | Privacy   | Type                     | Default | Description                                                                                                                                                                                                                                                                                                                                                                                               | Inherited From |
+| ---------------------------- | --------- | ------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `config`                     | public    | `Partial<OverlayConfig>` | `{}`    | Configure the many options of the \`OverlayController\`                                                                                                                                                                                                                                                                                                                                                   | OverlayMixin   |
+| `isAlertDialog`              | public    | `boolean`                | `false` |                                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `opened`                     | public    | `boolean`                | `false` | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out&#xA;in case the user does not need to be able to reopen the dialog.                                                                                                                                                                                                                                     | OverlayMixin   |
+| `_overlayBackdropNode`       | protected |                          |         |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
+| `_overlayContentNode`        | protected |                          |         |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
+| `_overlayContentWrapperNode` | protected |                          |         |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
+| `_overlayInvokerNode`        | protected |                          |         | The node that opens/closes this overlay.&#xA;&#xA;Resolved in a stable, declarative way (independent of the exact DOM order)&#xA;by looking, in order, for:&#xA;1\. a child with \`\[slot="invoker"]\`&#xA;2\. any element in the same root that opts in via \`\[data-invoker]\` and&#xA;   references this host by id (\`for="\<id>"\`)&#xA;3\. a preceding sibling that opts in via \`\[data-invoker]\` | OverlayMixin   |
+| `_overlayReferenceNode`      | protected |                          |         |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
 ### Methods
-| Name                   | Privacy   | Description | Parameters | Return | Inherited From |
-| ---------------------- | --------- | ----------- | ---------- | ------ | -------------- |
-| `_defineOverlayConfig` | protected |             |            |        |                |
+| Name                               | Privacy   | Description                                                                                                                                                                                                                                                                                                                | Parameters                                                                                                   | Return              | Inherited From |
+| ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------- | -------------- |
+| `close`                            | public    | Hides the overlay                                                                                                                                                                                                                                                                                                          |                                                                                                              |                     | OverlayMixin   |
+| `open`                             | public    | Shows the overlay                                                                                                                                                                                                                                                                                                          |                                                                                                              |                     | OverlayMixin   |
+| `repositionOverlay`                | public    | Sometimes it's needed to recompute Popper position of an overlay, for instance when we have&#xA;an opened combobox and the surrounding context changes (the space consumed by the textbox&#xA;increases vertically)                                                                                                        |                                                                                                              |                     | OverlayMixin   |
+| `toggle`                           | public    | Toggles the overlay                                                                                                                                                                                                                                                                                                        |                                                                                                              |                     | OverlayMixin   |
+| `_defineOverlay`                   | protected |                                                                                                                                                                                                                                                                                                                            | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` | OverlayMixin   |
+| `_defineOverlayConfig`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `OverlayConfig`     | OverlayMixin   |
+| `_getInvokerNode`                  | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `Element\|null`     | OverlayMixin   |
+| `_isPermanentlyDisconnected`       | protected | When we're moving around in dom, disconnectedCallback gets called.&#xA;Before we decide to teardown, let's wait to see if we were not just moving nodes around.                                                                                                                                                            |                                                                                                              | `Promise<boolean>`  | OverlayMixin   |
+| `_setOpenedWithoutPropertyEffects` | protected | When the opened state is changed by an Application Developer,cthe OverlayController is&#xA;requested to show/hide. It might happen that this request is not honoured&#xA;(intercepted in before-hide for instance), so that we need to sync the controller state&#xA;to this webcomponent again, preventing eternal loops. | `newOpened: boolean`                                                                                         |                     | OverlayMixin   |
+| `_setupOpenCloseListeners`         | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_setupOverlayCtrl`                | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_teardownOpenCloseListeners`      | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_teardownOverlayCtrl`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+### Events
+| Name             | Type          | Description | Inherited From |
+| ---------------- | ------------- | ----------- | -------------- |
+| `opened-changed` | `CustomEvent` |             | OverlayMixin   |
 ### Attributes
 | Name              | Field         | Inherited From |
 | ----------------- | ------------- | -------------- |
 | `is-alert-dialog` | isAlertDialog |                |
+| `opened`          | opened        | OverlayMixin   |
 <hr/>

package/docs/components/dialog/overview.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Dialog: Overview'
+title: 'Overview'
 parts:
   - Dialog
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
-# Dialog: Overview
+# Overview
 A web component that wraps a modal dialog controller.
 Its purpose is to make it easy to use our Overlay System declaratively.
@@ -66,6 +66,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/1e44a873eb492168e7e3d2f5c120371d950b9e03/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/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/dialog/use-cases.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Dialog: Use Cases'
+title: 'Use Cases'
 parts:
   - Dialog
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Dialog: Use Cases
+# Use Cases
 `lion-dialog` is a component wrapping a modal dialog controller.
 Its purpose is to make it easy to use our Overlay System declaratively.

package/docs/components/drawer/overview.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Drawer: Overview'
+title: 'Overview'
 parts:
   - Drawer
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
-# Drawer: Overview
+# Overview
 A combination of a button (the invoker) and a chunk of 'extra content'. This web component can be extended with an
 animation to disclose the extra content.

package/docs/components/drawer/use-cases.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Drawer: Use Cases'
+title: 'Use Cases'
 parts:
   - Drawer
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Drawer: Use Cases
+# Use Cases
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/fieldset/overview.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Fieldset: Overview'
+title: 'Overview'
 parts:
   - Fieldset
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
-# Fieldset: Overview
+# Overview
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -32,9 +32,9 @@ export const main = () => html`
 We have three specific fieldset implementations:
-- [form](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/form/overview.md)
-- [checkbox-group](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/checkbox-group/overview.md)
-- [radio-group](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/radio-group/overview.md)
+- [form](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/form/overview.md)
+- [checkbox-group](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/checkbox-group/overview.md)
+- [radio-group](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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.
@@ -43,8 +43,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/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/interaction-states.md)
-- Can have [validate](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/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/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/interaction-states.md)
+- Can have [validate](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/fieldset/use-cases.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Fieldset: Use Cases'
+title: 'Use Cases'
 parts:
   - Fieldset
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Fieldset: Use Cases
+# Use Cases
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/form/overview.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Form: Overview'
+title: 'Overview'
 parts:
   - Form
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
-# Form: Overview
+# Overview
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -20,7 +20,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/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/overview.md).
+It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/overview.md).
 ```js preview-story
 export const main = () => {
@@ -49,11 +49,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/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/interaction-states.md)
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/1e44a873eb492168e7e3d2f5c120371d950b9e03/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/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/overview.md).
 ## Installation

package/docs/components/form/use-cases.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Form: Use Cases'
+title: 'Use Cases'
 parts:
   - Form
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Form: Use Cases
+# Use Cases
 ```js script
 import { html as previewHtml } from '@mdjs/mdjs-preview';
@@ -26,7 +26,7 @@ import '@lion/ui/define/lion-form.js';
 To submit a form, use a regular `<button>` (or `<lion-button-submit>`) somewhere inside the native `<form>`. Then, add a `submit` handler on the `<lion-form>`. You can use this event to do your own (pre-)submit logic, like getting the serialized form data and sending it to a backend API.
 Another example is checking if the form has errors, and focusing the first field with a validation error.
-To learn more about form validation, please take a look at [validate](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/validate.md).
+To learn more about form validation, please take a look at [validate](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md).
 To fire a submit from JavaScript, select the `<lion-form>` element and call `.submit()`.
@@ -128,7 +128,7 @@ export const prefilledData = () => {
 };
 ```
-Learn more about [formatting and parsing](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/formatting-and-parsing.md).
+Learn more about [formatting and parsing](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/formatting-and-parsing.md).
 ## Sub forms

package/docs/components/icon/overview.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Icon: Overview'
+title: 'Overview'
 parts:
   - Icon
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
-# Icon: Overview
+# Overview
 A web component for displaying icons.

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

@@ -1,5 +1,5 @@
 ---
-title: 'Icon: Use Cases'
+title: 'Use Cases'
 parts:
   - Icon
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Icon: Use Cases
+# Use Cases
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -25,7 +25,7 @@ import '@lion/ui/define/lion-icon.js';
 ## 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/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
+See the [system documentation](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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 CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Input: Overview'
+title: 'Overview'
 parts:
   - Input
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
-# Input: Overview
+# Overview
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -35,7 +35,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/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/validate.md).
+- Can make use of [validation](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md).
 ## Installation

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input: Use Cases'
+title: 'Use Cases'
 parts:
   - Input
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Input: Use Cases
+# Use Cases
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/input-amount/api-table.md CHANGED Viewed

@@ -19,6 +19,7 @@ eleventyNavigation:
 | Name                       | Privacy   | Type                  | Default        | Description                                                                                                                                                                                                                                                                                                                                                                                                       | Inherited From |
 | -------------------------- | --------- | --------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
 | `currency`                 | public    | `string \| undefined` | `undefined`    |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
+| `currencyLabel`            | public    | `string`              | `''`           |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
 | `formatter`                | public    |                       | `formatAmount` |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
 | `locale`                   | public    | `string \| undefined` | `undefined`    |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
 | `modelValue`               | public    |                       |                |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
@@ -53,12 +54,13 @@ eleventyNavigation:
 ### Attributes
-| Name          | Field       | Inherited From |
-| ------------- | ----------- | -------------- |
-| `currency`    | currency    |                |
-| `modelValue`  | modelValue  |                |
-| `readonly`    | readOnly    | LionInput      |
-| `type`        | type        | LionInput      |
-| `placeholder` | placeholder | LionInput      |
+| Name             | Field         | Inherited From |
+| ---------------- | ------------- | -------------- |
+| `currency`       | currency      |                |
+| `currency-label` | currencyLabel |                |
+| `modelValue`     | modelValue    |                |
+| `readonly`       | readOnly      | LionInput      |
+| `type`           | type          | LionInput      |
+| `placeholder`    | placeholder   | LionInput      |
 <hr/>

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Amount: Overview'
+title: 'Overview'
 parts:
   - Input Amount
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
-# Input Amount: Overview
+# Overview
 A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an amount.
@@ -36,13 +36,13 @@ export const main = () => {
 ## Features
-- Based on our [input](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input/overview.md)
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md)
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/1e44a873eb492168e7e3d2f5c120371d950b9e03/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/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsNumber (default)
   - MinNumber
   - MaxNumber

package/docs/components/input-amount/use-cases.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Input Amount: Use Cases'
+title: 'Use Cases'
 parts:
   - Input Amount
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Input Amount: Use Cases
+# Use Cases
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -32,13 +32,24 @@ export const negativeNumber = () => html`
 `;
 ```
-## Set currency label
+## Set currency
-You can optionally set a currency label with the `currency` attribute, which is visible in the after slot by default.
+You can optionally set a currency with the `currency` attribute, which is visible in the after slot by default.
+```html preview-story
+<lion-input-amount label="Price" currency="USD" .modelValue="${123456.78}"></lion-input-amount>
+```
+### Set currency label
 ```js preview-story
-export const currencySuffix = () => html`
-  <lion-input-amount label="Price" currency="USD" .modelValue="${123456.78}"></lion-input-amount>
+export const currencySymbol = () => html`
+  <lion-input-amount
+    label="Price"
+    currency="USD"
+    currency-label="$"
+    .modelValue="${123456.78}"
+  ></lion-input-amount>
 `;
 ```

package/docs/components/input-amount-dropdown/api-table.md CHANGED Viewed

@@ -20,6 +20,7 @@ eleventyNavigation:
 | --------------------------- | --------- | ------------------------------------ | ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
 | `allowedCurrencies`         | public    | `CurrencyCode[]`                     | `[]`                                                                                 | Regions that are allowed to be selected in the dropdown.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |                 |
 | `currency`                  | public    | `string \| undefined`                | `undefined`                                                                          |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInputAmount |
+| `currencyLabel`             | public    | `string`                             | `''`                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInputAmount |
 | `defaultValidators`         | public    | `array`                              | `[new CurrencyAndAmount()]`                                                          |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |                 |
 | `deserializer`              | public    |                                      | `deserializer`                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |                 |
 | `formatter`                 | public    |                                      | `formatAmount`                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInputAmount |
@@ -77,6 +78,7 @@ eleventyNavigation:
 | `allowedCurrencies`   | allowedCurrencies   |                 |
 | `__dropdownSlot`      | \_\_dropdownSlot    |                 |
 | `currency`            | currency            | LionInputAmount |
+| `currency-label`      | currencyLabel       | LionInputAmount |
 | `modelValue`          | modelValue          | LionInputAmount |
 | `readonly`            | readOnly            | LionInput       |
 | `type`                | type                | LionInput       |

package/docs/components/input-amount-dropdown/use-cases.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Input Amount Dropdown: Use Cases'
+title: 'Use Cases'
 parts:
   - Input Amount Dropdown
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Input Amount Dropdown: Use Cases
+# Use Cases
 ```js script
 import { html } from '@mdjs/mdjs-preview';

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Date: Overview'
+title: 'Overview'
 parts:
   - Input Date
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
-# Input Date: Overview
+# Overview
 A web component based on the generic text input field. Its purpose is to provide a way for users to fill in a date.
@@ -28,11 +28,11 @@ import '@lion/ui/define/lion-input-date.js';
 ## Features
-- Based on our [input](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input/overview.md)
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md)
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/1e44a873eb492168e7e3d2f5c120371d950b9e03/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/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

package/docs/components/input-date/use-cases.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Input Date: Use Cases'
+title: 'Use Cases'
 parts:
   - Input Date
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Input Date: Use Cases
+# Use Cases
 ```js script
 import { html } from '@mdjs/mdjs-preview';