@lion/ui 0.24.0 → 0.26.0

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

@@ -1,87 +0,0 @@
----
-parts:
-  - API Table
-  - Input Amount Dropdown
-title: 'Input Amount Dropdown: API Table'
-eleventyNavigation:
-  key: API Table >> Input Amount Dropdown
-  title: API Table
-  order: 90
-  parent: Input Amount Dropdown
----
-# Input Amount Dropdown: API Table
- 
-
-## class: `LionInputAmountDropdown`, `lion-input-amount-dropdown`
-
-### Fields
-
-| Name                        | Privacy   | Type                                 | Default                                                                              | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Inherited From  |
-| --------------------------- | --------- | ------------------------------------ | ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
-| `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 |
-| `locale`                    | public    | `string \| undefined`                | `undefined`                                                                          |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInputAmount |
-| `modelValue`                | public    | `object`                             |                                                                                      | For a FormControl to function properly, its modelValue, serializedValue and  viewValue/formattedValue
should always translate in two directions. This is expected by \`\_callParser\` method. It guards for empty
viewValues. As the viewValue (\`.value\`) only concerns the amount part and not the currency part in
InputAmountDropdown, this contract is broken.
Below, we compensate for this.                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | LionInputAmount |
-| `parser`                    | public    |                                      | `parseAmount`                                                                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInputAmount |
-| `placeholder`               | public    | `string`                             | `''`                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInput       |
-| `preferredCurrencies`       | public    | `CurrencyCode[]`                     | `[]`                                                                                 | Regions that will be shown on top of the dropdown                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                 |
-| `readOnly`                  | public    | `boolean`                            | `false`                                                                              | A Boolean attribute which, if present, indicates that the user should not be able to edit
the value of the input. The difference between disabled and readonly is that read-only
controls can still function, whereas disabled controls generally do not function as
controls until they are enabled.

(From: https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | LionInput       |
-| `refs`                      | public    | `object`                             | `{ /** @type {DropdownRef} */ dropdown: /** @type {DropdownRef} */ (createRef()), }` |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |                 |
-| `serializer`                | public    |                                      | `serializer`                                                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |                 |
-| `slots`                     | public    |                                      |                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInput       |
-| `type`                      | public    | `string`                             | `'text'`                                                                             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInput       |
-| `_allCurrenciesLabel`       | protected | `string`                             | `''`                                                                                 | Group label for all countries, when preferredCountries are shown                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |                 |
-| `_allowedOrAllCurrencies`   | protected | `CurrencyCode[]`                     |                                                                                      | Used for rendering the region/currency list                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |                 |
-| `_currencyDisplayNodeSlot`  | protected | `string`                             | `'after'`                                                                            | The slot to put the currency display node in. Can be 'prefix', 'suffix', 'before' and 'after'.
Default will be 'after'.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | LionInputAmount |
-| `_currencyUtil`             | protected |                                      | `currencyUtil`                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |                 |
-| `_dropdownSlot`             | protected |                                      |                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |                 |
-| `_feedbackConditionMeta`    | protected |                                      |                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionField       |
-| `_focusableNode`            | protected |                                      |                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionField       |
-| `_inputNode`                | protected | `HTMLInputElement`                   |                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInput       |
-| `_langIso`                  | protected | `RegionCode \| undefined`            | `undefined`                                                                          |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |                 |
-| `_preferredCurrenciesLabel` | protected | `string`                             | `''`                                                                                 | Group label for preferred countries, when preferredCountries are shown                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |                 |
-| `_templateDataDropdown`     | protected | `TemplateDataForDropdownInputAmount` |                                                                                      | This method provides a TemplateData object to be fed to pure template functions, a.k.a.
Pure Templates™. The goal is to totally decouple presentation from logic here, so that
Subclassers can override all content without having to loose private info contained
within the template function that was overridden.

Subclassers would need to make sure all the contents of the TemplateData object are implemented
by making sure they are coupled to the right 'ref' (\[data-ref=dropdown] in this example),
with the help of lit's spread operator directive.
To enhance this process, the TemplateData object is completely typed. Ideally, this would be
enhanced by providing linters that make sure all of their required members are implemented by
a Subclasser.
When a Subclasser wants to add more data, this can be done via: |                 |
-
-### Methods
-
-| Name                             | Privacy   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Parameters                                                 | Return    | Inherited From  |
-| -------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | --------- | --------------- |
-| `clear`                          | public    | Clears modelValue.
Interaction states are not cleared (use resetInteractionState for this)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |                                                            |           | LionField       |
-| `onLocaleChanged`                | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `newLocale: string, oldLocale: string`                     |           | LionInputAmount |
-| `onLocaleUpdated`                | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |                                                            |           |                 |
-| `reset`                          | public    | Resets modelValue to initial value.
Interaction states are cleared                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                            |           | LionField       |
-| `resetInteractionState`          | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |                                                            |           | LionField       |
-| `_connectSlotMixin`              | protected | Upon connecting slot mixin, we should check if
the required slot was created by the slot mixin,
and if so, we should execute the currency changed flow
which evaluates whether the slot node should be
removed for invalid currencies                                                                                                                                                                                                                                                                                                                                        |                                                            |           | LionInputAmount |
-| `_initModelValueBasedOnDropdown` | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |                                                            |           |                 |
-| `_isEmpty`                       | protected | Used for Required validation and computation of interaction states.
We only consider the amount part for emptiness checks.
Missing, null, empty-string or NaN amount is considered empty.                                                                                                                                                                                                                                                                                                                                                                                            | `modelValue`                                               | `boolean` |                 |
-| `_onChange`                      | protected | Dispatches custom bubble event                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `ev: Event=`                                               |           | LionField       |
-| `_onCurrencyChanged`             | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `{ currency }, opts: @param {string?} opts.currency    * ` |           | LionInputAmount |
-| `_onDropdownValueChange`         | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `event: OnDropdownChangeEvent`                             |           |                 |
-| `_reflectBackOn`                 | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |                                                            |           | LionInputAmount |
-| `_repropagationCondition`        | protected | Usually, we don't use composition in regular LionFields (non choice-groups). Here we use a LionSelect(Rich) inside.
We don't want to repropagate any children, since an Application Developer is not concerned with these internals (see repropate logic in FormControlMixin)
Also, we don't want to give (wrong) info to InteractionStateMixin, that will set the wrong interaction states based on child info.
TODO: Make "this.\_repropagationRole !== 'child'" the default for FormControlMixin
(so that FormControls used within are never repropagated for LionFields) |                                                            |           |                 |
-
-### Events
-
-| Name                 | Type    | Description | Inherited From |
-| -------------------- | ------- | ----------- | -------------- |
-| `user-input-changed` | `Event` |             | LionField      |
-
-### Attributes
-
-| Name                  | Field               | Inherited From  |
-| --------------------- | ------------------- | --------------- |
-| `preferredCurrencies` | preferredCurrencies |                 |
-| `allowedCurrencies`   | allowedCurrencies   |                 |
-| `__dropdownSlot`      | \_\_dropdownSlot    |                 |
-| `currency`            | currency            | LionInputAmount |
-| `currency-label`      | currencyLabel       | LionInputAmount |
-| `modelValue`          | modelValue          | LionInputAmount |
-| `readonly`            | readOnly            | LionInput       |
-| `type`                | type                | LionInput       |
-| `placeholder`         | placeholder         | LionInput       |
-
-<hr/>

package/docs/components/input-amount-dropdown/index.md

@@ -1,13 +0,0 @@
----
-title: Input Amount Dropdown
-parts:
-  - Input Amount Dropdown
-eleventyNavigation:
-  key: Input Amount Dropdown
-  order: 20
-  title: Input Amount Dropdown
----
-
-# Input Amount Dropdown
-
--> go to Overview

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

@@ -1,103 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Input Amount Dropdown
-  - Use Cases
-eleventyNavigation:
-  key: 'Input Amount Dropdown: Use Cases'
-  order: 20
-  parent: Input Amount Dropdown
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
-import { LionInputAmountDropdown } from '@lion/ui/input-amount-dropdown.js';
-import '@lion/ui/define/lion-input-amount-dropdown.js';
-```
-
-## Input Amount Dropdown
-
-When `.allowedCurrencies` is not configured, all currencies will be available in the dropdown
-list.
-
-```js preview-story
-export const InputAmountDropdown = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-input-amount-dropdown
-      label="Select currency via dropdown"
-      help-text="Shows all currencies by default"
-      name="amount"
-    ></lion-input-amount-dropdown>
-  `;
-};
-```
-
-## Allowed currencies
-
-When `.allowedCurrencies` is configured, only those currencies will be available in the dropdown
-list.
-
-```js preview-story
-export const allowedCurrencies = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-input-amount-dropdown
-      label="Select currency via dropdown"
-      help-text="Shows only allowed currencies"
-      name="amount"
-      .allowedCurrencies=${['EUR', 'GBP']}
-    ></lion-input-amount-dropdown>
-  `;
-};
-```
-
-## Preferred currencies
-
-When `.preferredCurrencies` is configured, they will show up on top of the dropdown list to enhance user experience.
-
-```js preview-story
-export const preferredCurrencies = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-input-amount-dropdown
-      label="Select currency via dropdown"
-      help-text="Preferred currencies show on top"
-      name="amount"
-      .allowedCurrencies=${['EUR', 'GBP', 'USD', 'JPY']}
-      .preferredCurrencies=${['USD', 'JPY']}
-    ></lion-input-amount-dropdown>
-  `;
-};
-```
-
-## Suffix or prefix
-
-Subclassers can decide the dropdown location via `_dropdownSlot`, this can be set to either `suffix` or `prefix`.
-
-```js preview-story
-class DemoAmountDropdown extends LionInputAmountDropdown {
-  constructor() {
-    super();
-
-    this._dropdownSlot = 'suffix';
-  }
-}
-
-customElements.define('demo-amount-dropdown', DemoAmountDropdown);
-
-export const suffixSlot = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <demo-amount-dropdown
-      label="Select region via dropdown"
-      help-text="the dropdown shows in the suffix slot"
-      name="amount"
-    ></demo-amount-dropdown>
-  `;
-};
-```

package/docs/components/input-date/api-table.md

@@ -1,58 +0,0 @@
----
-parts:
-  - API Table
-  - Input Date
-title: 'Input Date: API Table'
-eleventyNavigation:
-  key: API Table >> Input Date
-  title: API Table
-  order: 90
-  parent: Input Date
----
-# Input Date: API Table
- 
-
-## class: `LionInputDate`, `lion-input-date`
-
-### Fields
-
-| Name                     | Privacy   | Type               | Default      | Description                                                                                                                                                                                                                                                                                                                                                                                                       | Inherited From |
-| ------------------------ | --------- | ------------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `formatter`              | public    |                    | `formatDate` |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `modelValue`             | public    |                    |              |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `parser`                 | public    |                    |              |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `placeholder`            | public    | `string`           | `''`         |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `readOnly`               | public    | `boolean`          | `false`      | A Boolean attribute which, if present, indicates that the user should not be able to edit
the value of the input. The difference between disabled and readonly is that read-only
controls can still function, whereas disabled controls generally do not function as
controls until they are enabled.

(From: https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) | LionInput      |
-| `slots`                  | public    |                    |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `type`                   | public    | `string`           | `'text'`     |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `_feedbackConditionMeta` | protected |                    |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_focusableNode`         | protected |                    |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_inputNode`             | protected | `HTMLInputElement` |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-
-### Methods
-
-| Name                    | Privacy   | Description                                                                                    | Parameters                | Return | Inherited From |
-| ----------------------- | --------- | ---------------------------------------------------------------------------------------------- | ------------------------- | ------ | -------------- |
-| `clear`                 | public    | Clears modelValue.
Interaction states are not cleared (use resetInteractionState for this) |                           |        | LionField      |
-| `deserializer`          | public    |                                                                                                | `serializedValue: string` |        |                |
-| `reset`                 | public    | Resets modelValue to initial value.
Interaction states are cleared                         |                           |        | LionField      |
-| `resetInteractionState` | public    |                                                                                                |                           |        | LionField      |
-| `serializer`            | public    |                                                                                                | `modelValue: Date`        |        |                |
-| `_onChange`             | protected | Dispatches custom bubble event                                                                 | `ev: Event=`              |        | LionField      |
-
-### Events
-
-| Name                 | Type    | Description | Inherited From |
-| -------------------- | ------- | ----------- | -------------- |
-| `user-input-changed` | `Event` |             | LionField      |
-
-### Attributes
-
-| Name          | Field       | Inherited From |
-| ------------- | ----------- | -------------- |
-| `modelValue`  | modelValue  |                |
-| `readonly`    | readOnly    | LionInput      |
-| `type`        | type        | LionInput      |
-| `placeholder` | placeholder | LionInput      |
-
-<hr/>

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

@@ -1,13 +0,0 @@
----
-title: Input Date
-parts:
-  - Input Date
-eleventyNavigation:
-  key: Input Date
-  order: 20
-  title: Input Date
----
-
-# Input Date
-
--> go to Overview

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

@@ -1,51 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Input Date
-  - Overview
-eleventyNavigation:
-  key: 'Input Date: Overview'
-  order: 10
-  parent: Input Date
-  title: 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.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { MinDate, MinMaxDate, MaxDate } from '@lion/ui/form-core.js';
-import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
-import { formatDate } from '@lion/ui/localize.js';
-import '@lion/ui/define/lion-input-date.js';
-```
-
-```html preview-story
-<lion-input-date label="Date" name="date"></lion-input-date>
-```
-
-## Features
-
-- 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/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
-  - IsDate (default)
-  - MinDate
-  - MaxDate
-  - MinMaxDate
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionInputDate } from '@lion/ui/input-date.js';
-// or
-import '@lion/ui/define/lion-input-date.js';
-```

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

@@ -1,96 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Input Date
-  - Use Cases
-eleventyNavigation:
-  key: 'Input Date: Use Cases'
-  order: 20
-  parent: Input Date
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { MinDate, MinMaxDate, MaxDate } from '@lion/ui/form-core.js';
-import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
-import { formatDate } from '@lion/ui/localize.js';
-import '@lion/ui/define/lion-input-date.js';
-```
-
-## Is a date
-
-```js preview-story
-export const isADate = () => html`
-  <lion-input-date label="IsDate" .modelValue="${new Date('foo')}"> </lion-input-date>
-`;
-```
-
-## With minimum date
-
-```js preview-story
-export const withMinimumDate = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-input-date
-      label="MinDate"
-      help-text="Enter a date greater than or equal to today."
-      .modelValue="${new Date('2018/05/30')}"
-      .validators="${[new MinDate(new Date())]}"
-    >
-    </lion-input-date>
-  `;
-};
-```
-
-## With maximum date
-
-```js preview-story
-export const withMaximumDate = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-input-date
-      label="MaxDate"
-      help-text="Enter a date smaller than or equal to today."
-      .modelValue="${new Date('2100/05/30')}"
-      .validators="${[new MaxDate(new Date())]}"
-    ></lion-input-date>
-  `;
-};
-```
-
-## With minimum and maximum date
-
-```js preview-story
-export const withMinimumAndMaximumDate = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-input-date
-      label="MinMaxDate"
-      .modelValue="${new Date('2018/05/30')}"
-      .validators="${[
-        new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') }),
-      ]}"
-    >
-      <div slot="help-text">
-        Enter a date between ${formatDate(new Date('2018/05/24'))} and
-        ${formatDate(new Date('2018/06/24'))}.
-      </div>
-    </lion-input-date>
-  `;
-};
-```
-
-## Faulty prefilled
-
-```js preview-story
-export const faultyPrefilled = () => html`
-  <lion-input-date
-    label="Date"
-    help-text="Faulty prefilled input will be cleared"
-    .modelValue="${'foo'}"
-  ></lion-input-date>
-`;
-```