@lion/ui 0.12.0 → 0.13.1

package/docs/components/accordion/api-table.md

@@ -42,4 +42,12 @@ eleventyNavigation:
 | `expanded`     | expanded     |                |
 | `exclusive`    | exclusive    |                |
 
+### Slots
+
+| Name         | Description                                                        |
+| ------------ | ------------------------------------------------------------------ |
+| `invoker`    | The invoker element for the accordion                              |
+| `content`    | The content element for the accordion                              |
+| `_accordion` | The slot for the accordion, used to rearrange invokers and content |
+
 <hr/>

package/docs/components/button/api-table.md

@@ -22,7 +22,6 @@ eleventyNavigation:
 | `disabled`               | public    | `boolean` | `false`    |             | DisabledMixin             |
 | `tabIndex`               | public    | `number`  |            |             | DisabledWithTabIndexMixin |
 | `type`                   | public    | `string`  | `'button'` |             |                           |
-| `_buttonId`              | protected |           |            |             |                           |
 | `_requestedToBeDisabled` | protected | `boolean` | `false`    |             | DisabledMixin             |
 
 ### Methods
@@ -55,7 +54,6 @@ eleventyNavigation:
 | `disabled`               | public    | `boolean` | `false`   |             | LionButton     |
 | `tabIndex`               | public    | `number`  |           |             | LionButton     |
 | `type`                   | public    | `string`  | `'reset'` |             | LionButton     |
-| `_buttonId`              | protected |           |           |             | LionButton     |
 | `_requestedToBeDisabled` | protected | `boolean` | `false`   |             | LionButton     |
 
 ### Methods
@@ -90,7 +88,6 @@ eleventyNavigation:
 | `disabled`               | public    | `boolean`                 | `false`    |             | LionButton     |
 | `tabIndex`               | public    | `number`                  |            |             | LionButton     |
 | `type`                   | public    | `string`                  | `'submit'` |             | LionButton     |
-| `_buttonId`              | protected |                           |            |             | LionButton     |
 | `_nativeButtonNode`      | protected | `HTMLButtonElement\|null` |            |             |                |
 | `_requestedToBeDisabled` | protected | `boolean`                 | `false`    |             | LionButton     |
 

package/docs/components/checkbox-group/api-table.md

@@ -34,9 +34,9 @@ eleventyNavigation:
 | `formatOptions`              | public    |                                           | `({ mode: 'auto' })`            | Configuration object that will be available inside the formatter function                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | FormatMixin           |
 | `formattedValue`             | public    | `string\|undefined`                       | `undefined`                     | The view value is the result of the formatter function (when available).
The result will be stored in the native \_inputNode (usually an input\[type=text]).

Examples:
- For a date input, this would be '20/01/1999' (dependent on locale).
- For a number input, this could be '1,234.56' (a String representation of modelValue
1234.56)                                                                                                                                                                                                                                      | FormatMixin           |
 | `hasFeedbackFor`             | public    | `ValidationType[]`                        | `[]`                            | As soon as validation happens (after modelValue/validators/validator param change), this
array is updated with the active ValidationTypes ('error'\|'warning'\|'success'\|'info' etc.).
Notice the difference with \`.showsFeedbackFor\`, which filters \`.hasFeedbackFor\` based on
\`.feedbackCondition()\`.

For styling purposes, will be reflected to \[has-feedback-for="error warning"]. This can
be useful for subtle visual feedback on keyup, like a red/green border around an input.                                                                                  | ValidateMixin         |
-| `helpText`                   | public    | `string`                                  | `''`                            | The helpt text for the input node.
When no value is defined, textContent of \[slot=help-text] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | FormControlMixin      |
+| `helpText`                   | public    | `string`                                  |                                 | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | FormControlMixin      |
 | `isPending`                  | public    | `boolean`                                 | `false`                         | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | ValidateMixin         |
-| `label`                      | public    | `string`                                  | `''`                            | The label text for the input node.
When no value is defined, textContent of \[slot=label] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | FormControlMixin      |
+| `label`                      | public    | `string`                                  |                                 | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | FormControlMixin      |
 | `labelSrOnly`                | public    | `boolean`                                 | `false`                         | The label will only be visible for srceen readers when true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | FormControlMixin      |
 | `modelValue`                 | public    | `{value:string\|any,checked:boolean}`     | `{ value: '', checked: false }` | Whereas 'normal' \`.modelValue\`s usually store a complex/typed version
of a view value, choice inputs have a slightly different approach.
In order to remain their Single Source of Truth characteristic, choice inputs
store both the value and 'checkedness', in the format { value: 'x', checked: true }
Different from the platform, this also allows to serialize the 'non checkedness',
allowing to restore form state easily and inform the server about unchecked options.                                                                                                   | FormControlMixin      |
 | `name`                       | public    | `string`                                  | `''`                            | The name the element will be registered with to the .formElements collection
of the parent. Also, it serves as the key of key/value pairs in
 modelValue/serializedValue objects                                                                                                                                                                                                                                                                                                                                                                                                                  | FormRegisteringMixin  |
@@ -209,10 +209,10 @@ eleventyNavigation:
 | `formattedValue`           | public    |                                       |                                                                                                                                   | Object keyed by formElements names, containing formElements' formattedValues                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | FormGroupMixin        |
 | `formElements`             | public    | `FormControlsCollection`              | `new FormControlsCollection()`                                                                                                    | Closely mimics the natively supported HTMLFormControlsCollection. It can be accessed
both like an array and an object (based on control/element names).                                                                                                                                                                                                                                                                                                                                                                                          | FormRegistrarMixin    |
 | `hasFeedbackFor`           | public    | `ValidationType[]`                    | `[]`                                                                                                                              | As soon as validation happens (after modelValue/validators/validator param change), this
array is updated with the active ValidationTypes ('error'\|'warning'\|'success'\|'info' etc.).
Notice the difference with \`.showsFeedbackFor\`, which filters \`.hasFeedbackFor\` based on
\`.feedbackCondition()\`.

For styling purposes, will be reflected to \[has-feedback-for="error warning"]. This can
be useful for subtle visual feedback on keyup, like a red/green border around an input.                             | ValidateMixin         |
-| `helpText`                 | public    | `string`                              | `''`                                                                                                                              | The helpt text for the input node.
When no value is defined, textContent of \[slot=help-text] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                       | FormControlMixin      |
+| `helpText`                 | public    | `string`                              |                                                                                                                                   | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormControlMixin      |
 | `initComplete`             | public    | `Promise<any>`                        | `new Promise((resolve, reject) => { this.__resolveInitComplete = resolve; this.__rejectInitComplete = reject; })`                 | initComplete resolves after all pending initialization logic&#xA;(for instance \`\<form-group .serializedValue=${{ child1: 'a', child2: 'b' }}>\`)&#xA;is executed                                                                                                                                                                                                                                                                                                                                                                                   | FormRegistrarMixin    |
 | `isPending`                | public    | `boolean`                             | `false`                                                                                                                           | Flag indicating whether async validation is pending.&#xA;Creates attribute \[is-pending] as a styling hook                                                                                                                                                                                                                                                                                                                                                                                                                                           | ValidateMixin         |
-| `label`                    | public    | `string`                              | `''`                                                                                                                              | The label text for the input node.&#xA;When no value is defined, textContent of \[slot=label] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                           | FormControlMixin      |
+| `label`                    | public    | `string`                              |                                                                                                                                   | The label text for the input node.&#xA;When no light dom defined via \[slot=label], this value will be used.                                                                                                                                                                                                                                                                                                                                                                                                                                         | FormControlMixin      |
 | `labelSrOnly`              | public    | `boolean`                             | `false`                                                                                                                           | The label will only be visible for srceen readers when true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | FormControlMixin      |
 | `modelValue`               | public    |                                       |                                                                                                                                   | Object keyed by formElements names, containing formElements' modelValues                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | FormControlMixin      |
 | `multipleChoice`           | public    | `boolean`                             | `true`                                                                                                                            | When false (default), modelValue and serializedValue will reflect the&#xA;currently selected choice (usually a string). When true, modelValue will and&#xA;serializedValue will be an array of strings.                                                                                                                                                                                                                                                                                                                                              | ChoiceGroupMixin      |
@@ -377,10 +377,10 @@ eleventyNavigation:
 | `formatOptions`              | public    |                                           | `({ mode: 'auto' })`            | Configuration object that will be available inside the formatter function                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | FormatMixin           |
 | `formattedValue`             | public    | `string\|undefined`                       | `undefined`                     | The view value is the result of the formatter function (when available).&#xA;The result will be stored in the native \_inputNode (usually an input\[type=text]).&#xA;&#xA;Examples:&#xA;- For a date input, this would be '20/01/1999' (dependent on locale).&#xA;- For a number input, this could be '1,234.56' (a String representation of modelValue&#xA;1234.56)                                                                                                                                                                                                                                      | FormatMixin           |
 | `hasFeedbackFor`             | public    | `ValidationType[]`                        | `[]`                            | As soon as validation happens (after modelValue/validators/validator param change), this&#xA;array is updated with the active ValidationTypes ('error'\|'warning'\|'success'\|'info' etc.).&#xA;Notice the difference with \`.showsFeedbackFor\`, which filters \`.hasFeedbackFor\` based on&#xA;\`.feedbackCondition()\`.&#xA;&#xA;For styling purposes, will be reflected to \[has-feedback-for="error warning"]. This can&#xA;be useful for subtle visual feedback on keyup, like a red/green border around an input.                                                                                  | ValidateMixin         |
-| `helpText`                   | public    | `string`                                  | `''`                            | The helpt text for the input node.&#xA;When no value is defined, textContent of \[slot=help-text] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | FormControlMixin      |
+| `helpText`                   | public    | `string`                                  |                                 | The helpt text for the input node.&#xA;When no light dom defined via \[slot=help-text], this value will be used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | FormControlMixin      |
 | `indeterminate`              | public    | `boolean`                                 | `false`                         | Indeterminate state of the checkbox                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                       |
 | `isPending`                  | public    | `boolean`                                 | `false`                         | Flag indicating whether async validation is pending.&#xA;Creates attribute \[is-pending] as a styling hook                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | ValidateMixin         |
-| `label`                      | public    | `string`                                  | `''`                            | The label text for the input node.&#xA;When no value is defined, textContent of \[slot=label] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | FormControlMixin      |
+| `label`                      | public    | `string`                                  |                                 | The label text for the input node.&#xA;When no light dom defined via \[slot=label], this value will be used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | FormControlMixin      |
 | `labelSrOnly`                | public    | `boolean`                                 | `false`                         | The label will only be visible for srceen readers when true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | FormControlMixin      |
 | `mixedState`                 | public    | `boolean`                                 | `false`                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                       |
 | `modelValue`                 | public    | `{value:string\|any,checked:boolean}`     | `{ value: '', checked: false }` | Whereas 'normal' \`.modelValue\`s usually store a complex/typed version&#xA;of a view value, choice inputs have a slightly different approach.&#xA;In order to remain their Single Source of Truth characteristic, choice inputs&#xA;store both the value and 'checkedness', in the format { value: 'x', checked: true }&#xA;Different from the platform, this also allows to serialize the 'non checkedness',&#xA;allowing to restore form state easily and inform the server about unchecked options.                                                                                                   | FormControlMixin      |

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

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

package/docs/components/collapsible/api-table.md

@@ -45,4 +45,11 @@ eleventyNavigation:
 | -------- | ------ | -------------- |
 | `opened` | opened |                |
 
+### Slots
+
+| Name      | Description                             |
+| --------- | --------------------------------------- |
+| `invoker` | The invoker element for the collapsible |
+| `content` | The content element for the collapsible |
+
 <hr/>

package/docs/components/collapsible/overview.md

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

package/docs/components/combobox/api-table.md

@@ -37,10 +37,10 @@ eleventyNavigation:
 | `formElements`                 | public    | `FormControlsCollection`              | `new FormControlsCollection()`                                                                                                    | Closely mimics the natively supported HTMLFormControlsCollection. It can be accessed
both like an array and an object (based on control/element names).                                                                                                                                                                                                                                                                                                                                                                                          | FormRegistrarMixin     |
 | `hasFeedbackFor`               | public    | `ValidationType[]`                    | `[]`                                                                                                                              | As soon as validation happens (after modelValue/validators/validator param change), this
array is updated with the active ValidationTypes ('error'\|'warning'\|'success'\|'info' etc.).
Notice the difference with \`.showsFeedbackFor\`, which filters \`.hasFeedbackFor\` based on
\`.feedbackCondition()\`.

For styling purposes, will be reflected to \[has-feedback-for="error warning"]. This can
be useful for subtle visual feedback on keyup, like a red/green border around an input.                             | ValidateMixin          |
 | `hasNoDefaultSelected`         | public    | `boolean`                             | `false`                                                                                                                           | When setting this to true, on initial render, no option will be selected.
It is advisable to override \`\_noSelectionTemplate\` method in the select-invoker
to render some kind of placeholder initially                                                                                                                                                                                                                                                                                                                                    | ListboxMixin           |
-| `helpText`                     | public    | `string`                              | `''`                                                                                                                              | The helpt text for the input node.
When no value is defined, textContent of \[slot=help-text] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                       | FormControlMixin       |
+| `helpText`                     | public    | `string`                              |                                                                                                                                   | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormControlMixin       |
 | `initComplete`                 | public    | `Promise<any>`                        | `new Promise((resolve, reject) => { this.__resolveInitComplete = resolve; this.__rejectInitComplete = reject; })`                 | initComplete resolves after all pending initialization logic&#xA;(for instance \`\<form-group .serializedValue=${{ child1: 'a', child2: 'b' }}>\`)&#xA;is executed                                                                                                                                                                                                                                                                                                                                                                                   | FormRegistrarMixin     |
 | `isPending`                    | public    | `boolean`                             | `false`                                                                                                                           | Flag indicating whether async validation is pending.&#xA;Creates attribute \[is-pending] as a styling hook                                                                                                                                                                                                                                                                                                                                                                                                                                           | ValidateMixin          |
-| `label`                        | public    | `string`                              | `''`                                                                                                                              | The label text for the input node.&#xA;When no value is defined, textContent of \[slot=label] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                           | FormControlMixin       |
+| `label`                        | public    | `string`                              |                                                                                                                                   | The label text for the input node.&#xA;When no light dom defined via \[slot=label], this value will be used.                                                                                                                                                                                                                                                                                                                                                                                                                                         | FormControlMixin       |
 | `labelSrOnly`                  | public    | `boolean`                             | `false`                                                                                                                           | The label will only be visible for srceen readers when true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | FormControlMixin       |
 | `matchMode`                    | public    | `'begin'\|'all'`                      | `'all'`                                                                                                                           | When typing in the textbox, will by default be set on 'begin',&#xA;only matching the beginning part in suggestion list.&#xA;=> 'a' will match 'apple' from \['apple', 'pear', 'citrus'].&#xA;When set to 'all', will match middle of the word as well&#xA;=> 'a' will match 'apple' and 'pear'                                                                                                                                                                                                                                                       |                        |
 | `modelValue`                   | public    | `object`                              |                                                                                                                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormControlMixin       |
@@ -258,4 +258,11 @@ eleventyNavigation:
 | `is-pending`                     | isPending                        | ValidateMixin          |
 | `disabled`                       | disabled                         | DisabledMixin          |
 
+### Slots
+
+| Name                | Description                                                                    |
+| ------------------- | ------------------------------------------------------------------------------ |
+| `listbox`           | The listbox element for the combobox, e.g. \<lion-options>                     |
+| `selection-display` | The selection display element for the combobox, e.g. \<lion-selection-display> |
+
 <hr/>

package/docs/components/combobox/overview.md

@@ -46,7 +46,7 @@ export const main = () => html`
 `;
 ```
 
-[...show more](https://github.com/ing-bank/lion/blob/226f0cf003588b7062c590da551a3070e7940f82/docs/components/combobox/extensions.md)
+[...show more](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/combobox/extensions.md)
 
 ## Features
 

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

@@ -29,6 +29,7 @@ import { LitElement, html, repeat } from '@mdjs/mdjs-preview';
 import { listboxData, listboxComplexData } from '../listbox/src/listboxData.js';
 import { LionCombobox } from '@lion/ui/combobox.js';
 import { Required } from '@lion/ui/form-core.js';
+import '@lion/ui/define/lion-button.js';
 import '@lion/ui/define/lion-combobox.js';
 import '@lion/ui/define/lion-option.js';
 import './src/demo-selection-display.js';
@@ -176,6 +177,94 @@ export const customMatchCondition = () => html`
 `;
 ```
 
+## Disabled option
+
+```js preview-story
+class DemoDisabledState extends LitElement {
+  static get properties() {
+    return { disabled: { type: Boolean } };
+  }
+
+  constructor() {
+    super();
+    /** @type {string[]} */
+    this.disabled = true;
+  }
+
+  get combobox() {
+    return /** @type {LionCombobox} */ (this.shadowRoot?.querySelector('#combobox'));
+  }
+
+  /**
+   * @param {InputEvent & {target: HTMLInputElement}} e
+   */
+  toggleDisabled(e) {
+    this.disabled = !this.disabled;
+    this.requestUpdate();
+  }
+
+  render() {
+    return html`
+      <lion-button @click=${this.toggleDisabled}>Toggle disabled</lion-button> Disabled state:
+      ${this.disabled}
+      <lion-combobox name="search" label="Search" ?disabled=${this.disabled}>
+        ${lazyRender(
+          listboxData.map(
+            entry => html` <lion-option .choiceValue="${entry}">${entry}</lion-option> `,
+          ),
+        )}
+      </lion-combobox>
+    `;
+  }
+}
+customElements.define('demo-disabled-state', DemoDisabledState);
+export const disabledState = () => html`<demo-disabled-state></demo-disabled-state>`;
+```
+
+## Readonly option
+
+```js preview-story
+class DemoReadonlyState extends LitElement {
+  static get properties() {
+    return { readOnly: { type: Boolean } };
+  }
+
+  constructor() {
+    super();
+    /** @type {string[]} */
+    this.readOnly = true;
+  }
+
+  get combobox() {
+    return /** @type {LionCombobox} */ (this.shadowRoot?.querySelector('#combobox'));
+  }
+
+  /**
+   * @param {InputEvent & {target: HTMLInputElement}} e
+   */
+  toggleReadonly(e) {
+    this.readOnly = !this.readOnly;
+    this.requestUpdate();
+  }
+
+  render() {
+    return html`
+      <lion-button @click=${this.toggleReadonly}>Toggle readonly</lion-button> ReadOnly state:
+      ${this.readOnly}
+      <lion-combobox name="search" label="Search" ?readOnly=${this.readOnly}>
+        ${lazyRender(
+          listboxData.map(
+            entry => html` <lion-option .choiceValue="${entry}">${entry}</lion-option> `,
+          ),
+        )}
+      </lion-combobox>
+    `;
+  }
+}
+customElements.define('demo-readonly-state', DemoReadonlyState);
+export const readonlyState = () => html`<demo-readonly-state></demo-readonly-state>`;
+```
+
 ## Options
 
 ```js preview-story
@@ -469,4 +558,4 @@ export const complexObjectChoiceValue = () =>
 ## Listbox compatibility
 
 All configurations that can be applied to `lion-listbox`, can be applied to `lion-combobox` as well.
-See the [listbox documentation](https://github.com/ing-bank/lion/blob/226f0cf003588b7062c590da551a3070e7940f82/docs/components/listbox/overview.md) for more information.
+See the [listbox documentation](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/listbox/overview.md) for more information.

package/docs/components/dialog/overview.md

@@ -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/226f0cf003588b7062c590da551a3070e7940f82/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/5f1d7166273cc724458c0239822cd454e16253fa/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/drawer/api-table.md

@@ -53,4 +53,12 @@ eleventyNavigation:
 | `opened`        | opened        | LionCollapsible |
 | `position`      | position      |                 |
 
+### Slots
+
+| Name       | Description                         |
+| ---------- | ----------------------------------- |
+| `invoker`  | The invoker element for the drawer  |
+| `content`  | The content element for the drawer  |
+| `headline` | The headline element for the drawer |
+
 <hr/>

package/docs/components/fieldset/api-table.md

@@ -27,10 +27,10 @@ eleventyNavigation:
 | `formattedValue`           | public    |                                       |                                                                                                                                   | Object keyed by formElements names, containing formElements' formattedValues                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | FormGroupMixin     |
 | `formElements`             | public    | `FormControlsCollection`              | `new FormControlsCollection()`                                                                                                    | Closely mimics the natively supported HTMLFormControlsCollection. It can be accessed
both like an array and an object (based on control/element names).                                                                                                                                                                                                                                                                                                                                                                                          | FormRegistrarMixin |
 | `hasFeedbackFor`           | public    | `ValidationType[]`                    | `[]`                                                                                                                              | As soon as validation happens (after modelValue/validators/validator param change), this
array is updated with the active ValidationTypes ('error'\|'warning'\|'success'\|'info' etc.).
Notice the difference with \`.showsFeedbackFor\`, which filters \`.hasFeedbackFor\` based on
\`.feedbackCondition()\`.

For styling purposes, will be reflected to \[has-feedback-for="error warning"]. This can
be useful for subtle visual feedback on keyup, like a red/green border around an input.                             | ValidateMixin      |
-| `helpText`                 | public    | `string`                              | `''`                                                                                                                              | The helpt text for the input node.
When no value is defined, textContent of \[slot=help-text] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                       | FormControlMixin   |
+| `helpText`                 | public    | `string`                              |                                                                                                                                   | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormControlMixin   |
 | `initComplete`             | public    | `Promise<any>`                        | `new Promise((resolve, reject) => { this.__resolveInitComplete = resolve; this.__rejectInitComplete = reject; })`                 | initComplete resolves after all pending initialization logic&#xA;(for instance \`\<form-group .serializedValue=${{ child1: 'a', child2: 'b' }}>\`)&#xA;is executed                                                                                                                                                                                                                                                                                                                                                                                   | FormRegistrarMixin |
 | `isPending`                | public    | `boolean`                             | `false`                                                                                                                           | Flag indicating whether async validation is pending.&#xA;Creates attribute \[is-pending] as a styling hook                                                                                                                                                                                                                                                                                                                                                                                                                                           | ValidateMixin      |
-| `label`                    | public    | `string`                              | `''`                                                                                                                              | The label text for the input node.&#xA;When no value is defined, textContent of \[slot=label] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                           | FormControlMixin   |
+| `label`                    | public    | `string`                              |                                                                                                                                   | The label text for the input node.&#xA;When no light dom defined via \[slot=label], this value will be used.                                                                                                                                                                                                                                                                                                                                                                                                                                         | FormControlMixin   |
 | `labelSrOnly`              | public    | `boolean`                             | `false`                                                                                                                           | The label will only be visible for srceen readers when true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | FormControlMixin   |
 | `modelValue`               | public    |                                       |                                                                                                                                   | Object keyed by formElements names, containing formElements' modelValues                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | FormControlMixin   |
 | `operationMode`            | public    | `OperationMode`                       |                                                                                                                                   | Types of input interaction of the FormControl (for instance 'enter'\|'select'\|'upload')                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ValidateMixin      |

package/docs/components/fieldset/overview.md

@@ -32,9 +32,9 @@ export const main = () => html`
 
 We have three specific fieldset implementations:
 
-- [form](https://github.com/ing-bank/lion/blob/226f0cf003588b7062c590da551a3070e7940f82/docs/components/form/overview.md)
-- [checkbox-group](https://github.com/ing-bank/lion/blob/226f0cf003588b7062c590da551a3070e7940f82/docs/components/checkbox-group/overview.md)
-- [radio-group](https://github.com/ing-bank/lion/blob/226f0cf003588b7062c590da551a3070e7940f82/docs/components/radio-group/overview.md)
+- [form](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/form/overview.md)
+- [checkbox-group](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/checkbox-group/overview.md)
+- [radio-group](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/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/226f0cf003588b7062c590da551a3070e7940f82/docs/fundamentals/systems/form/interaction-states.md)
-- Can have [validate](https://github.com/ing-bank/lion/blob/226f0cf003588b7062c590da551a3070e7940f82/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/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/interaction-states.md)
+- Can have [validate](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
 - Can disable input fields on fieldset level
 - Accessible out of the box
 

package/docs/components/form/overview.md

@@ -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/226f0cf003588b7062c590da551a3070e7940f82/docs/fundamentals/systems/form/overview.md).
+It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/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/226f0cf003588b7062c590da551a3070e7940f82/docs/fundamentals/systems/form/interaction-states.md)
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/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/226f0cf003588b7062c590da551a3070e7940f82/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/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/overview.md).
 
 ## Installation
 

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

@@ -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/226f0cf003588b7062c590da551a3070e7940f82/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/5f1d7166273cc724458c0239822cd454e16253fa/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/226f0cf003588b7062c590da551a3070e7940f82/docs/fundamentals/systems/form/formatting-and-parsing.md).
+Learn more about [formatting and parsing](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/formatting-and-parsing.md).
 
 ## Sub forms
 

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

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

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

@@ -32,9 +32,9 @@ eleventyNavigation:
 | `formatOptions`              | public    |                                           | `({ mode: 'auto' })`    | Configuration object that will be available inside the formatter function                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | LionField            |
 | `formattedValue`             | public    | `string\|undefined`                       | `undefined`             | The view value is the result of the formatter function (when available).
The result will be stored in the native \_inputNode (usually an input\[type=text]).

Examples:
- For a date input, this would be '20/01/1999' (dependent on locale).
- For a number input, this could be '1,234.56' (a String representation of modelValue
1234.56)                                                                                                                                                                                                                                      | LionField            |
 | `hasFeedbackFor`             | public    | `ValidationType[]`                        | `[]`                    | As soon as validation happens (after modelValue/validators/validator param change), this
array is updated with the active ValidationTypes ('error'\|'warning'\|'success'\|'info' etc.).
Notice the difference with \`.showsFeedbackFor\`, which filters \`.hasFeedbackFor\` based on
\`.feedbackCondition()\`.

For styling purposes, will be reflected to \[has-feedback-for="error warning"]. This can
be useful for subtle visual feedback on keyup, like a red/green border around an input.                                                                                  | LionField            |
-| `helpText`                   | public    | `string`                                  | `''`                    | The helpt text for the input node.
When no value is defined, textContent of \[slot=help-text] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | LionField            |
+| `helpText`                   | public    | `string`                                  |                         | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionField            |
 | `isPending`                  | public    | `boolean`                                 | `false`                 | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | LionField            |
-| `label`                      | public    | `string`                                  | `''`                    | The label text for the input node.
When no value is defined, textContent of \[slot=label] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | LionField            |
+| `label`                      | public    | `string`                                  |                         | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | LionField            |
 | `labelSrOnly`                | public    | `boolean`                                 | `false`                 | The label will only be visible for srceen readers when true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | LionField            |
 | `modelValue`                 | public    |                                           |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionField            |
 | `name`                       | public    | `string`                                  | `''`                    | The name the element will be registered with to the .formElements collection
of the parent. Also, it serves as the key of key/value pairs in
 modelValue/serializedValue objects                                                                                                                                                                                                                                                                                                                                                                                                                  | LionField            |

package/docs/components/input/overview.md

@@ -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/226f0cf003588b7062c590da551a3070e7940f82/docs/fundamentals/systems/form/validate.md).
+- Can make use of [validation](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/validate.md).
 
 ## Installation
 

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

@@ -34,9 +34,9 @@ eleventyNavigation:
 | `formattedValue`             | public    | `string\|undefined`                       | `undefined`             | The view value is the result of the formatter function (when available).
The result will be stored in the native \_inputNode (usually an input\[type=text]).

Examples:
- For a date input, this would be '20/01/1999' (dependent on locale).
- For a number input, this could be '1,234.56' (a String representation of modelValue
1234.56)                                                                                                                                                                                                                                      | LionField            |
 | `formatter`                  | public    |                                           | `formatAmount`          | Converts modelValue to formattedValue (formattedValue will be synced with
\`.\_inputNode.value\`)
For instance, a Date object to a localized date.                                                                                                                                                                                                                                                                                                                                                                                                                                                | LionField            |
 | `hasFeedbackFor`             | public    | `ValidationType[]`                        | `[]`                    | As soon as validation happens (after modelValue/validators/validator param change), this
array is updated with the active ValidationTypes ('error'\|'warning'\|'success'\|'info' etc.).
Notice the difference with \`.showsFeedbackFor\`, which filters \`.hasFeedbackFor\` based on
\`.feedbackCondition()\`.

For styling purposes, will be reflected to \[has-feedback-for="error warning"]. This can
be useful for subtle visual feedback on keyup, like a red/green border around an input.                                                                                  | LionField            |
-| `helpText`                   | public    | `string`                                  | `''`                    | The helpt text for the input node.
When no value is defined, textContent of \[slot=help-text] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | LionField            |
+| `helpText`                   | public    | `string`                                  |                         | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionField            |
 | `isPending`                  | public    | `boolean`                                 | `false`                 | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | LionField            |
-| `label`                      | public    | `string`                                  | `''`                    | The label text for the input node.
When no value is defined, textContent of \[slot=label] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | LionField            |
+| `label`                      | public    | `string`                                  |                         | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | LionField            |
 | `labelSrOnly`                | public    | `boolean`                                 | `false`                 | The label will only be visible for srceen readers when true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | LionField            |
 | `locale`                     | public    | `string \| undefined`                     | `undefined`             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                      |
 | `modelValue`                 | public    |                                           |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionField            |

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

@@ -36,13 +36,13 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/226f0cf003588b7062c590da551a3070e7940f82/docs/components/input/overview.md)
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/226f0cf003588b7062c590da551a3070e7940f82/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/input/overview.md)
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/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/226f0cf003588b7062c590da551a3070e7940f82/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/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsNumber (default)
   - MinNumber
   - MaxNumber

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

@@ -33,9 +33,9 @@ eleventyNavigation:
 | `formattedValue`             | public    | `string\|undefined`                       | `undefined`             | The view value is the result of the formatter function (when available).
The result will be stored in the native \_inputNode (usually an input\[type=text]).

Examples:
- For a date input, this would be '20/01/1999' (dependent on locale).
- For a number input, this could be '1,234.56' (a String representation of modelValue
1234.56)                                                                                                                                                                                                                                      | LionField            |
 | `formatter`                  | public    |                                           | `formatDate`            | Converts modelValue to formattedValue (formattedValue will be synced with
\`.\_inputNode.value\`)
For instance, a Date object to a localized date.                                                                                                                                                                                                                                                                                                                                                                                                                                                | LionField            |
 | `hasFeedbackFor`             | public    | `ValidationType[]`                        | `[]`                    | As soon as validation happens (after modelValue/validators/validator param change), this
array is updated with the active ValidationTypes ('error'\|'warning'\|'success'\|'info' etc.).
Notice the difference with \`.showsFeedbackFor\`, which filters \`.hasFeedbackFor\` based on
\`.feedbackCondition()\`.

For styling purposes, will be reflected to \[has-feedback-for="error warning"]. This can
be useful for subtle visual feedback on keyup, like a red/green border around an input.                                                                                  | LionField            |
-| `helpText`                   | public    | `string`                                  | `''`                    | The helpt text for the input node.
When no value is defined, textContent of \[slot=help-text] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | LionField            |
+| `helpText`                   | public    | `string`                                  |                         | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionField            |
 | `isPending`                  | public    | `boolean`                                 | `false`                 | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | LionField            |
-| `label`                      | public    | `string`                                  | `''`                    | The label text for the input node.
When no value is defined, textContent of \[slot=label] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | LionField            |
+| `label`                      | public    | `string`                                  |                         | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | LionField            |
 | `labelSrOnly`                | public    | `boolean`                                 | `false`                 | The label will only be visible for srceen readers when true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | LionField            |
 | `modelValue`                 | public    |                                           |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionField            |
 | `name`                       | public    | `string`                                  | `''`                    | The name the element will be registered with to the .formElements collection
of the parent. Also, it serves as the key of key/value pairs in
 modelValue/serializedValue objects                                                                                                                                                                                                                                                                                                                                                                                                                  | LionField            |

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

@@ -28,11 +28,11 @@ import '@lion/ui/define/lion-input-date.js';
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/226f0cf003588b7062c590da551a3070e7940f82/docs/components/input/overview.md)
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/226f0cf003588b7062c590da551a3070e7940f82/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/input/overview.md)
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/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/226f0cf003588b7062c590da551a3070e7940f82/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/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate