@lion/ui 0.25.0 → 0.26.0

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

@@ -1,128 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Select
-  - Use Cases
-eleventyNavigation:
-  key: 'Select: Use Cases'
-  order: 20
-  parent: Select
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { Required } from '@lion/ui/form-core.js';
-import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
-import '@lion/ui/define/lion-select.js';
-loadDefaultFeedbackMessages();
-```
-
-## Pre-select
-
-You can preselect an option by setting the property modelValue.
-
-```html preview-story
-<lion-select name="favoriteColor" label="Favorite color" .modelValue="${'hotpink'}">
-  <select slot="input">
-    <option selected value>Please select</option>
-    <option value="red">Red</option>
-    <option value="hotpink">Hotpink</option>
-    <option value="teal">Teal</option>
-  </select>
-</lion-select>
-```
-
-## Disabled
-
-You can disable an option by adding the `disabled` attribute to an option.
-
-```html preview-story
-<lion-select name="favoriteColor" label="Favorite color">
-  <select slot="input">
-    <option selected value>Please select</option>
-    <option value="red">Red</option>
-    <option value="hotpink" disabled>Hotpink</option>
-    <option value="teal">Teal</option>
-  </select>
-</lion-select>
-```
-
-Or by setting the `disabled` attribute on the entire `lion-select` field.
-
-```html preview-story
-<lion-select name="favoriteColor" label="Favorite color" disabled>
-  <select slot="input">
-    <option selected value>Please select</option>
-    <option value="red">Red</option>
-    <option value="hotpink">Hotpink</option>
-    <option value="teal">Teal</option>
-  </select>
-</lion-select>
-```
-
-## Validation
-
-A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/9575386e5fb419f7dbd3b893be4c4ce7925bcb2e/docs/fundamentals/systems/form/validate.md).
-
-## Rendering and updating select options
-
-A very common pattern is to keep the options in an array, and render them through a repeating template.
-
-```js
-import { html, LitElement } from 'lit';
-
-class MyOptions extends LitElement {
-  static properties = {
-    colours: Array,
-  };
-
-  constructor() {
-    super();
-
-    this.colours = ['red', 'hotpink', 'teal'];
-  }
-
-  render() {
-    return html`
-      <lion-select name="favoriteColor" label="Favorite color" disabled>
-        <select slot="input">
-          <option selected value>Please select</option>
-          ${this.colours.map(colour => html`<option value="${colour}">${colour}</option>`)}
-        </select>
-      </lion-select>
-    `;
-  }
-}
-```
-
-Using the above method to build repeating templates is usually efficient. However, there are cases where you might want to update the list of options after an option has already been selected.
-
-For example, if we add a button to sort the array alphabetically, pressing it would update the list. However, the selected state and index would not reset or update accordingly.
-
-Lit is intelligent and updates the DOM with minimal effort. During a rerender, it only updates the values inside the template and doesn't check state values outside the template, such as the selected item from the parent element.
-
-So, if the first option was selected, the newly selected option would be whatever ends up in that position after sorting. This creates a confusing user experience where a seemingly random value is selected.
-
-The Lit `repeat` directive fixes this problem by attaching a unique ID to each DOM element using an item as the identifier, `colour` in our example. Any changes will then result in a complete rerender or reordering of the DOM nodes, rather than just changing the values of those nodes.
-
-```js
-import { repeat } from 'lit/directives/repeat.js';
-
-render() {
-  return html`
-    <lion-select name="favoriteColor" label="Favorite color" disabled>
-      <select slot="input">
-        <option selected value>Please select</option>
-        ${repeat(
-          this.colours,
-          (colour) => colour,
-          (colour, index) => html`<option value="${colour}">${colour}</option>`
-        )}
-      </select>
-    </lion-select>
-  `;
-}
-```

package/docs/components/select-rich/api-table.md

@@ -1,123 +0,0 @@
----
-parts:
-  - API Table
-  - Select Rich
-title: 'Select Rich: API Table'
-eleventyNavigation:
-  key: API Table >> Select Rich
-  title: API Table
-  order: 90
-  parent: Select Rich
----
-# Select Rich: API Table
- 
-
-## class: `LionSelectInvoker`, `lion-select-invoker`
-
-### Fields
-
-| Name                  | Privacy   | Type                     | Default    | Description                                                                                                         | Inherited From |
-| --------------------- | --------- | ------------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `active`              | public    | `boolean`                | `false`    |                                                                                                                     | LionButton     |
-| `hostElement`         | public    | `LionSelectRich \| null` | `null`     | The LionSelectRich element this invoker is part of. Will be set on connectedCallback of
LionSelectRich          |                |
-| `readOnly`            | public    | `boolean`                | `false`    | When the connected LionSelectRich instance is readOnly,
this should be reflected in the invoker as well         |                |
-| `selectedElement`     | public    | `LionOption \| null`     | `null`     | The option element that is currently selected                                                                       |                |
-| `singleOption`        | public    | `boolean`                | `false`    | When the connected LionSelectRich instance has only one option,
this should be reflected in the invoker as well |                |
-| `slots`               | public    |                          |            |                                                                                                                     |                |
-| `type`                | public    | `string`                 | `'button'` |                                                                                                                     | LionButton     |
-| `_contentWrapperNode` | protected |                          |            |                                                                                                                     |                |
-
-### Methods
-
-| Name                   | Privacy   | Description                                                                                      | Parameters | Return                                 | Inherited From |
-| ---------------------- | --------- | ------------------------------------------------------------------------------------------------ | ---------- | -------------------------------------- | -------------- |
-| `_afterTemplate`       | protected |                                                                                                  |            |                                        |                |
-| `_beforeTemplate`      | protected |                                                                                                  |            |                                        |                |
-| `_contentTemplate`     | protected |                                                                                                  |            | `TemplateResult\|Node[]\|string\|null` |                |
-| `_noSelectionTemplate` | protected | To be overriden for a placeholder, used when \`hasNoDefaultSelected\` is true on the select rich |            | `TemplateResult`                       |                |
-
-### Attributes
-
-| Name              | Field           | Inherited From |
-| ----------------- | --------------- | -------------- |
-| `selectedElement` | selectedElement |                |
-| `hostElement`     | hostElement     |                |
-| `readonly`        | readOnly        |                |
-| `single-option`   | singleOption    |                |
-| `active`          | active          | LionButton     |
-| `type`            | type            | LionButton     |
-
-<hr/>
- 
-
-## class: `LionSelectRich`, `lion-field-with-select`
-
-### Fields
-
-| Name                         | Privacy   | Type                             | Default  | Description                                                                                                                                                                                                                                                                                                                                                                                               | Inherited From |
-| ---------------------------- | --------- | -------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `config`                     | public    | `Partial<OverlayConfig>`         | `{}`     | Configure the many options of the \`OverlayController\`                                                                                                                                                                                                                                                                                                                                                   | OverlayMixin   |
-| `interactionMode`            | public    | `'windows/linux'\|'mac'\|'auto'` | `'auto'` | Aligns behavior for 'selectionFollowFocus' and 'navigateWithinInvoker' with&#xA;platform. When 'auto' (default), platform is automatically detected                                                                                                                                                                                                                                                       |                |
-| `navigateWithinInvoker`      | public    | `Boolean`                        | `false`  | When invoker has focus, up and down arrow keys changes active state of listbox,&#xA;without opening overlay.                                                                                                                                                                                                                                                                                              |                |
-| `opened`                     | public    | `boolean`                        | `false`  | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out&#xA;in case the user does not need to be able to reopen the dialog.                                                                                                                                                                                                                                     | OverlayMixin   |
-| `singleOption`               | public    | `boolean`                        | `false`  |                                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `slots`                      | public    | `SlotsMap`                       |          |                                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `_arrowWidth`                | protected | `number`                         | `28`     |                                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `_feedbackConditionMeta`     | protected |                                  |          |                                                                                                                                                                                                                                                                                                                                                                                                           | LionListbox    |
-| `_focusableNode`             | protected |                                  |          | Must remain public: narrowing the public Listbox member causes TS2415.&#xA;Unlike Listbox, this override was protected in Lion 0.21.1.                                                                                                                                                                                                                                                                    | LionListbox    |
-| `_invokerNode`               | protected | `LionSelectInvoker`              |          |                                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `_overlayBackdropNode`       | protected |                                  |          |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
-| `_overlayContentNode`        | protected |                                  |          |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
-| `_overlayContentWrapperNode` | protected |                                  |          |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
-| `_overlayInvokerNode`        | protected |                                  |          | The node that opens/closes this overlay.&#xA;&#xA;Resolved in a stable, declarative way (independent of the exact DOM order)&#xA;by looking, in order, for:&#xA;1\. a child with \`\[slot="invoker"]\`&#xA;2\. any element in the same root that opts in via \`\[data-invoker]\` and&#xA;   references this host by id (\`for="\<id>"\`)&#xA;3\. a preceding sibling that opts in via \`\[data-invoker]\` | OverlayMixin   |
-| `_overlayReferenceNode`      | protected |                                  |          |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
-| `_scrollTargetNode`          | protected |                                  |          |                                                                                                                                                                                                                                                                                                                                                                                                           |                |
-
-### Methods
-
-| Name                               | Privacy   | Description                                                                                                                                                                                                                                                                                                                | Parameters                                                                                                   | Return              | Inherited From |
-| ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------- | -------------- |
-| `addFormElement`                   | public    |                                                                                                                                                                                                                                                                                                                            | `child: LionOption & FormControlHost, indexToInsertAt: Number`                                               |                     |                |
-| `close`                            | public    | Hides the overlay                                                                                                                                                                                                                                                                                                          |                                                                                                              |                     | OverlayMixin   |
-| `open`                             | public    | Shows the overlay                                                                                                                                                                                                                                                                                                          |                                                                                                              |                     | OverlayMixin   |
-| `removeFormElement`                | public    |                                                                                                                                                                                                                                                                                                                            | `child: FormRegisteringHost`                                                                                 |                     |                |
-| `repositionOverlay`                | public    | Sometimes it's needed to recompute Popper position of an overlay, for instance when we have&#xA;an opened combobox and the surrounding context changes (the space consumed by the textbox&#xA;increases vertically)                                                                                                        |                                                                                                              |                     | OverlayMixin   |
-| `toggle`                           | public    | Toggles the overlay                                                                                                                                                                                                                                                                                                        |                                                                                                              |                     | OverlayMixin   |
-| `_alignInvokerWidth`               | protected | Align invoker width with content width&#xA;Make sure display is not set to "none" while calculating the content width                                                                                                                                                                                                      |                                                                                                              |                     |                |
-| `_defineOverlay`                   | protected |                                                                                                                                                                                                                                                                                                                            | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` | OverlayMixin   |
-| `_defineOverlayConfig`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `OverlayConfig`     | OverlayMixin   |
-| `_getCheckedElements`              | protected | In the select disabled options are still going to a possible value for example&#xA;when prefilling or programmatically setting it.                                                                                                                                                                                         |                                                                                                              |                     |                |
-| `_getInvokerNode`                  | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `Element\|null`     | OverlayMixin   |
-| `_inputGroupInputTemplate`         | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |
-| `_isPermanentlyDisconnected`       | protected | When we're moving around in dom, disconnectedCallback gets called.&#xA;Before we decide to teardown, let's wait to see if we were not just moving nodes around.                                                                                                                                                            |                                                                                                              | `Promise<boolean>`  | OverlayMixin   |
-| `_listboxOnClick`                  | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |
-| `_listboxOnKeyDown`                | protected |                                                                                                                                                                                                                                                                                                                            | `ev: KeyboardEvent`                                                                                          |                     |                |
-| `_noDefaultSelectedInheritsWidth`  | protected | With no selected element, we should override the inheritsReferenceWidth in most cases.&#xA;By default, we will set it to 'min', and then set it back to what it was initially when&#xA;something is selected.&#xA;As a subclasser you can override this behavior.                                                          |                                                                                                              |                     |                |
-| `_onFormElementsChanged`           | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |
-| `_onLabelClick`                    | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |
-| `_scrollIntoView`                  | protected |                                                                                                                                                                                                                                                                                                                            | `el: HTMLElement, scrollTargetEl: HTMLElement`                                                               |                     |                |
-| `_setOpenedWithoutPropertyEffects` | protected | When the opened state is changed by an Application Developer,cthe OverlayController is&#xA;requested to show/hide. It might happen that this request is not honoured&#xA;(intercepted in before-hide for instance), so that we need to sync the controller state&#xA;to this webcomponent again, preventing eternal loops. | `newOpened: boolean`                                                                                         |                     | OverlayMixin   |
-| `_setupListboxNode`                | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |
-| `_setupOpenCloseListeners`         | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
-| `_setupOverlayCtrl`                | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
-| `_teardownListboxNode`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |
-| `_teardownOpenCloseListeners`      | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
-| `_teardownOverlayCtrl`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
-
-### Events
-
-| Name             | Type          | Description | Inherited From |
-| ---------------- | ------------- | ----------- | -------------- |
-| `blur`           | `Event`       |             |                |
-| `opened-changed` | `CustomEvent` |             | OverlayMixin   |
-
-### Attributes
-
-| Name                      | Field                 | Inherited From |
-| ------------------------- | --------------------- | -------------- |
-| `navigate-within-invoker` | navigateWithinInvoker |                |
-| `interaction-mode`        | interactionMode       |                |
-| `single-option`           | singleOption          |                |
-| `opened`                  | opened                | OverlayMixin   |
-
-<hr/>

package/docs/components/select-rich/examples.md

@@ -1,43 +0,0 @@
----
-title: 'Examples'
-parts:
-  - Select Rich
-  - Examples
-eleventyNavigation:
-  key: 'Select Rich: Examples'
-  order: 30
-  parent: Select Rich
-  title: Examples
----
-
-# Examples
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { repeat } from 'lit/directives/repeat.js';
-import '@lion/ui/define/lion-select-rich.js';
-import './src/intl-select-rich.js';
-import { regionMetaList } from './src/regionMetaList.js';
-```
-
-## Select Rich International
-
-A visually advanced Subclasser implementation of `LionSelectRich`.
-
-Inspired by:
-
-- [intl-tel-input](https://intl-tel-input.com/)
-
-```js story
-export const IntlSelectRich = () => html`
-  <intl-select-rich label="Choose a region" name="regions">
-    ${repeat(
-      regionMetaList,
-      regionMeta => regionMeta.regionCode,
-      regionMeta =>
-        html` <intl-option .choiceValue="${regionMeta.regionCode}" .regionMeta="${regionMeta}">
-        </intl-option>`,
-    )}
-  </intl-select-rich>
-`;
-```

package/docs/components/select-rich/index.md

@@ -1,13 +0,0 @@
----
-title: Select Rich
-parts:
-  - Select Rich
-eleventyNavigation:
-  key: Select Rich
-  order: 40
-  title: Select Rich
----
-
-# Select Rich
-
--> go to Overview

package/docs/components/select-rich/overview.md

@@ -1,55 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Select Rich
-  - Overview
-eleventyNavigation:
-  key: 'Select Rich: Overview'
-  order: 10
-  parent: Select Rich
-  title: Overview
----
-
-# Overview
-
-This web component is a 'rich' version of the native `<select>` element.
-It allows providing fully customized options and a fully customized invoker button and is meant to be used whenever the native `<select>` doesn't provide enough styling, theming or user interaction opportunities.
-
-Its implementation is based on the following Design pattern:
-<https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html>
-
-```js script
-import { LitElement, html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-select-rich.js';
-import '@lion/ui/define/lion-option.js';
-```
-
-```html preview-story
-<lion-select-rich name="favoriteColor" label="Favorite color">
-  <lion-option .choiceValue="${'red'}">Red</lion-option>
-  <lion-option .choiceValue="${'hotpink'}">Hotpink</lion-option>
-  <lion-option .choiceValue="${'blue'}">Blue</lion-option>
-</lion-select-rich>
-```
-
-## Features
-
-- Fully accessible
-- Flexible API
-- Fully customizable option elements
-- Fully customizable invoker element
-- Mimics native select interaction mode (windows/linux and mac)
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionSelectRich } from '@lion/ui/select-rich.js';
-import { LionOptions, LionOption } from '@lion/ui/listbox.js';
-// or
-import '@lion/ui/define/lion-select-rich.js';
-import '@lion/ui/define/lion-option.js';
-```